Wielu webmasterów buduje strukturę strony używając tabeli.
Jest to złe rozwiązanie. Zmniejsza ono dostępność strony i przeczy
idei semantyczności - każdy znacznik HTML ma swoje własne zastosowanie.
Akurat tabele służą do prezentacji danych tabelarycznych. Do tworzenia
struktury strony odpowiednie są DIV'y - tagi wyświetlane w bloku, tzn. zajmujące
100% dostępnej szerokości i mające długość taką, jak ich zawartość.
Na samym początku rozpiszemy znaczniki składające się na stronę.
Nie zapomnijcie dodać deklaracji DTD oraz znaczników html i body! Wiele edytorów
kodu robi to automatycznie, np.:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="pl" xml:lang="pl">
Na samym początku napiszemy układ strony w HTML:
<h1>Nagłówek</h1> <div id="text">Treść strony</div> <div id="menu">Nawigacja strony</div> <div id="stopka">Stopka strony</div>
h1 nagłówek pierwszego stopnia. Możemy w nim zamieścić najważniejsze
informacje dotyczące strony, np. jej nazwę.
Nagłówek
Treść strony
Nawigacja strony
Stopka strony
Poszczególne bloki wyświetlają się pod sobą. Teraz wystarczy klika linijek kodu w stylu kaskadowym CSS, aby Treść strony i Nawigacja strony wyświetliły się obok siebie, a Stopka strony poniżej. Możemy do zrobić dwoma sposobami, umieszczając poniższy kod na stronie, pomiędzy znacznikami <head> i </head>:
<style type="text/css">
* <![CDATA[ */
}
body {width: 600px; margin: 0 auto;}
h1 {margin: 0; background: #C0C0C0;}
#text {width: 500px; height: background: #F7F7F7; float: left;}
#menu {width: 100px; height: background: #FFCC00; float: left;}
#stopka {height: 20px; background: #969696; clear: both;}
/* ]]> */
</style>
lub umieść go w pliku zewnętrznym style.css,
wstawiając w sekcji head dokumentu link do niego:
<link href="style.css" rel="stylesheet" type="text/css" />
Przykładowy plik style.css wygląda następująco
}
body {
width: 600px;
margin: 0 auto;
}
h1 {
margin: 0;
background: #C0C0C0;
}
#text {
width: 500px;
background: #F7F7F7;
float: left;
}
#menu {
width: 100px;
background: #FFCC00;
float: left;
}
#stopka {
height: 20px;
background: #969696;
clear: both;
}
Użyliśmy tu body, aby ograniczyć szerokość strony i ją wyśrodkować.
margin: 0 auto; zeruje margines górny i dolny, a lewy i prawy ustawia
jako auto, czyli zlicza ilość wolnego miejsca w oknie przeglądarki i dzieli je
równo pomiędzy te dwie strony, dzięki czemu strona jest wyśrodkowana.
DIV'om menu i text dajemy ograniczoną szerokość, aby zmieściły się
w jednej linii. Jeżeli spróbujcie zwiększyć szerokość menu - zjedzie
wtedy pod text.
Float: left; ustawia opływanie. Możemy dzięki niemu sprawić, aby element
"wpuścić" w np. treść. Zastosowanie float: left; dla naszego menu i
treści sprawi, że te DIV'y będą się kończyć tam, gdzie są ich widzialne krawędzie
i, dzięki odpowiedniej wielkości, ustawią się obok siebie.
Pozostaje jeszcze do omówienia stopka. Dostała ona clear: both;. Sprawia
to, że nie może być opływana. W taki sposób nie będzie "szukała" miejsca, tylko
od razu ustawi się pod DIV'ami z włączonym opływaniem. O to nam chodziło.
To już wszystko. Struktura strony jest gotowa! Do jej przygotowania nie
wykorzystaliśmy tabel, które przecież do tego nie służą. Teraz wystarczy, że
dostosujesz ten kod pod swoje potrzeby i będziesz mógł się cieszyć stroną
dostępną i semantyczną. Wykorzystane kolory w background służą wyłącznie
po to, aby pokazać przykład strony.