UWAGA! Metoda jest przestarzała (deprecated), obecnie lepiej tworzyć takie szablony z użyciem GRID CSS np.
http://fx-team.fulara.com/grid-css/

Jednym z zadań na egzaminie dla profilu Technik Informatyk może się okazać stworzenie strony internetowej jak na zamieszczonym poniżej wzorze. Jest to prosty układ 3-kolumnowy, banalny do wykonania z pomocą tabel. Jednak w jaki sposób wykonać go bez ich użycia? Odpowiedź jest prosta – należy użyć CSS.

layout

Na początek stworzymy szkielet naszej strony oparty o DIV-y, używając jedynie dobrze znanego nam HTML. W sekcji <head> umieszczamy odnośnik do naszego pliku css, który stworzymy później. Następnie w <body> tworzymy wszystkie potrzebne nam divy: kontener, nagłówek, trzy kolumny, clear – o którym w sekcji css, oraz stopkę.

Nasz kod HTML powinien więc wyglądać tak:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
 <head>
  <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body>
  <div id="kontener">
   <div id="naglowek">Nagłówek</div>
   <div class="kolumna">Menu</div>
   <div class="kolumna">News</div>
   <div class="kolumna">Bannery</div>
   <div id="clear"></div>
   <div id="stopka">Stopka</div>
  </div>
 </body>
</html>

W tym momencie nasza strona to jedynie tekst wpisany w DIV-y, pora więc na CSS.

Zaczniemy od #kontenera który wyśrodkuje całą naszą stronę. Nadajemy mu dowolną szerokość, oraz co ważne – margin: 0 auto; co automatycznie umieści zawartość naszej strony na środku ekranu.

Kolejnym divem jest #naglowek któremu należy przypisać marginesy, wysokość, szerokość, oraz obramowanie – tak by był on widoczny.

Teraz zajmujemy się najważniejszą częścią naszej strony czyli naszymi kolumnami. Warto zwrócić uwagę na to że div ten nie posiada id, a klasę gdyż pojawia się on w kodzie HTML kilka razy. Dlatego też oznaczamy go jako .kolumna. Aby nasze kolumny ustawiły się w jednej linii a nie jedna pod drugą, należy przypisać im wartość float: left; – jest to tzw. opływanie. Następnie podobnie jak w przypadku nagłówka przypisujemy wartości marginesów itd.

Innym ważnym DIV-em jest #clear, który jak wskazuje jego nazwa „czyści” poprzednio rozpoczęte opływanie elementów. By spełniać swoje zadanie musi on mieć przypisaną wartość clear: both;. Nie nadajemy mu żadnych innych atrybutów, więc DIV pozostanie niewidoczny na stronie.

Ostatnim divem jest #stopka z którą postępujemy identycznie jak w przypadku nagłówka.

Po nadaniu stylu stopce nasz plik css powinien wyglądać następująco:

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
#kontener{
width: 960px;
margin: 0 auto;
}

#naglowek{
margin: 10px;
width: 936px;
height: 200px;
border: 2px solid black;
}

.kolumna{
float: left;
margin: 10px;
width: 296px;
height: 350px;
border: 2px solid black;
}

#clear{
clear: both;
}

#stopka{
margin: 10px;
width: 936px;
height: 150px;
border: 2px solid black;
}

Jeśli wszystko wykonaliśmy dobrze, nasza strona powinna wyglądać dokładnie tak jak na zamieszczonym wcześniej wzorze.

HTML + CSS, Szablony stron