strona z DIVami

Opublikowano: 19 październik 2018 | Super User |

| Odsłony: 299

Dla początkujących webmasterów prawdziwą zmorą jest zbudowanie solidnego szablonu strony WWW, opartego o CSS oraz elementy blokowe <div> </div>. Zazwyczaj początkujący programiści budują strony za pomocą tabelek co jest nierozsądne oraz niedopuszczalne! Po pierwsze taka konstrukcja, jest sprzeczna ze standardami W3C, a po drugie znacznie utrudnia przebudowywanie witryny.

W niniejszym artykule, pokarzę w jaki sposób stworzyć szablon strony WWW oparty o elementy blokowe DIV oraz style CSS o stałej szerokości.

Stały szablon

Stały szablon (ang. fixed layout), zawiera stałą odgórnie ustaloną szerokość wyrażoną w pikselach. Szerokość ta jest identyczna zarówno na monitorze 27-calowym jak i smartphonie posiadającym 4-calowy ekran. Przy tworzeniu takiego szablonu należy zadbać o komfort internauty i ustalić taką szerokość, aby nie trzeba było przewijać strony poziomo. Domyślnie zakłada się, że internauci korzystają z monitorów pracujących w rozdzielczości 1024×768 oraz 1366×768 (są one najpopularniejsze). Wobec tego, tworzony przez nas szablon powinien mieć 1004 piksele szerokości (od 1024px odejmujemy 20px na pasek przewijania w dół) lub 1346.

Szablon dwukolumnowy

Przygotujmy pierwszy szablon, zawierający dwie pionowe kolumny (jedna jest przeznaczona na menu nawigacyjne, a druga na treść). Graficznie będzie on prezentował się tak:

szablon-dwukolumnowy

A jego kod będzie wyglądał tak:

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

html {
background-color: #fff;
color: #000;
margin: 0;
padding: 0;
}
body {
        margin: 0 auto;
padding: 0;
        display: block;
width: 1004px;
        overflow: auto;
}
#header {
        width: 100%;
        float: left;
background-color: #888;
}
#nav {
width: 250px;
float: left;
overflow: hidden;
background-color: #ccc;
}
#content {
width: 554px;
float: left;
overflow: hidden;
background-color: #fff;
}
#footer {
clear: both;
width: 100%;
background-color: #888;
}

Kod HTML:

 



1
2
3
4
5
6
7
8
9
10
11

<html>
    <head>
         <link rel="stylesheet" href="css.css" type="text/css" />
    </head>
    < body>
         <div id="header">header</div>
         <div id="nav">nav</div>
         <div id="content">content</div>
         <div id="footer">footer</div>
    < /body>
</html>

Objaśnienie:

Pierwszy blok stylów odpowiedzialny jest za ustalenie domyślnego tła, koloru czcionki oraz wyzerowanie marginesów (zewnętrznych – margin oraz wewnętrznych – padding).
Następnie ustalamy szerokość naszego szablonu, przypisujemy właściwości blokowe znacznikowi <body> , oraz wypośrodkowywujemy nasz box, tak aby strona znajdowała się na środku ekranu, a nie gdzieś przy lewej czy prawej krawędzi monitora. Dodatkowo ustalamy domyślną wysokość (nigdy nie wiadomo jak wiele treści będzie dostępne na naszej witrynie).
W kolejnym punkcie ustalamy tło nagłówka i wyrównujemy go do lewej krawędzi.
Potem przypisujemy style lewej kolumnie. Wyrównujemy ją do lewej krawędzi oraz ustalamy stałą szerokość.
W kolejnym kroku wykonujemy dokładnie to samo co w punkcie wyżej z tym, że dla prawej kolumny.
W ostatnim elemencie naszej układanki pozostaje tylko, ustawić dolny pasek (stopkę) na samym dole pod wszystkimi elementami.

Szablon trzykolumnowy

Szablon trzykolumnowy, zawiera trzy pionowe kolumny, z reguły są to dwie wąskie oraz jedna szeroka przeznaczona na główną treść. Mogą one być ułożone w różnych wariantach np. dwie wąskie po bokach, a szeroka na środku, szeroka po lewej stronie, a obok dwie wąskie itd. My skorzystamy z pierwszego wariantu i umieścimy dwie wąskie kolumny przy prawej i lewej krawędzi a pomiędzy nimi kolumnę szeroką. Szablon graficznie będzie wyglądał tak:

szablon-trzykolumnowy

Oraz kod:

 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

html {
background-color: #fff;
color: #000;
margin: 0;
padding: 0;
}
body {
margin: 0 auto;
padding: 0;
        display: block;
width: 1004px;
        overflow: auto;
}
#header {
        width:100%;
float: left;
background-color: #888;
}
#left {
width: 200px;
float: left;
overflow: hidden;
background-color: #ccc;
}
#right {
width: 200px;
float: right;
overflow: hidden;
background-color: #ccc;
}
#content {
width: 604px;
float: left;
overflow: hidden;
background-color: #fff;
}
#footer {
clear: both;
width: 100%;
background-color: #888;
}