Po lekturze rozdziału pt. Menu w CSS powinny być Ci już znane praktyczne możliwości stylizacji elementów stron internetowych. Wiesz już zapewne, dlaczego rozwiązanie oparte o CSS jest najkorzystniejszym wyborem przy tworzeniu menu nawigacyjnego. Dlaczego zatem ograniczać się tylko do menu, kiedy można przecież zyskać jeszcze więcej, projektując całą stronę w ten sam sposób:
Analogicznie jak we wspomnianym wcześniej rozdziale pt. Menu w CSS, także i tutaj z góry ustalimy kod XHTML, który następnie będzie wykorzystywany we wszystkich przykładach w tym rozdziale. Zmieniając wygląd kolejnych przygotowywanych szablonów, będziemy projektować jedynie kolejne arkusze CSS dla wciąż niezmiennego kodu XHTML. Jest to praktyczny przykład implementacji koncepcji rozdzielenia struktury i prezentacji dokumentów, dzięki czemu możliwe są do osiągnięcia wszystkie wymienione powyżej korzyści.
Szablon dwukolumnowy:
<div id="top"> <div id="NAGLOWEK">Nagłówek szablonu</div> <div id="MENU">Menu nawigacyjne</div> <div id="TRESC">Treść strony</div> <div id="STOPKA">Stopka serwisu</div> </div>
Rezultat bez stylizacji:
Szablon trójkolumnowy:
<div id="top"> <div id="NAGLOWEK">Nagłówek szablonu</div> <div id="MENU">Menu nawigacyjne</div> <div id="INFORMACJE">Dodatkowe informacje</div> <div id="TRESC">Treść strony</div> <div id="STOPKA">Stopka serwisu</div> </div>
Rezultat bez stylizacji:
Do budowy szablonu wykorzystamy elementy <div>...</div>, ponieważ jest to poprawne semantycznie. Zgodnie ze specyfikacją HTML 4.01, element DIV jest ogólnym pojemnikiem, pozwalającym dodać strukturę do dokumentu, którą potem można wykorzystać przy stylizacji za pomocą CSS. Musimy jednak w jakiś sposób odróżnić np. blok treści strony od bloku stopki. W tym celu użyliśmy identyfikatorów (atrybuty id="..."), ponieważ wiemy, że w jednym pliku na pewno nie pojawią się np. dwa bloki treści ani podwójna stopka. Jeśli będziemy chcieć wstawić w dokumencie blok, który może się powtórzyć w obrębie tego samego pliku, zamiast identyfikatorów należy użyć klasy (atrybut class="..."). Wielkie litery w identyfikatorach poszczególnych bloków zapobiegną ewentualnym kolizjom nazw elementów występujących w treści (nie dotyczy trybu Quirks).
Kiedyś do tworzenia szablonów stron WWW używało się tabeli. W czasach, gdy o CSS można było tylko pomarzyć, był to jedyny sposób na stworzenie bardziej skomplikowanej strony. Czy dzisiaj ten powód jest dobrym uzasadnieniem, skoro wszystkie popularne przeglądarki graficzne od dawna obsługują CSS przynajmniej w stopniu zadowalającym? Dlaczego do tworzenia szablonów stron nie należy używać tabelek:
Czasami osoby początkujące, dowiadując się, jakie to "złe" są tabelki, próbują w każdym przypadku zastępować je elementami <div>...</div>. Tymczasem zwykle jest to tak samo niepoprawne semantycznie, jak ich nadużywanie. W tabelach powinny być prezentowane dane tabelaryczne, które obejmują powtarzający się zbiór elementów (wiersze) tych samych typów (kolumny). Zwykle daje się łatwo rozpoznać, czy w określonym przypadku powinno się użyć tabeli:
Stały szablon (ang. fixed layout) charakteryzuje się odgórnie ustaloną szerokością w pikselach. Jeśli użytkownik zmieni rozdzielczość ekranu lub rozmiar okna przeglądarki, taki szablon będzie zajmował inną powierzchnię szerokości ekranu. Aby zapewnić komfortowe przeglądanie strony, szerokość szablonu nie powinna być szersza od najmniejszej przewidzianej rozdzielczości ekranu, z której mają korzystać czytelnicy serwisu - w przeciwnym razie w oknie przeglądarki pojawi się poziomy suwak i przeczytanie całej linijki tekstu może wymagać ciągłego przewijania w prawo i z powrotem. W wyższych rozdzielczościach ekranu pojawi się puste miejsce po lewej lub/i po prawej stronie właściwego szablonu - zwykle zagospodarowuje się je poprzez umieszczenie tła graficznego (w najniższej rozdzielczości nie będzie ono widoczne, ale nie jest to takie ważne).
Stały szablon jest najczęściej używaną formą rozplanowania serwisów internetowych, ponieważ jest to szablon niezależny od rozdzielczości ekranu. Wszystkie elementy w jego obrębie (tekst, zdjęcia, elementy nawigacyjne itp.) zawsze pozostają ułożone dokładnie tak samo względem siebie. Inaczej mówiąc: jeśli np. w wybranym miejscu wstawimy zdjęcie oblane tekstem, to mamy pewność, że w każdej rozdzielczości ekranu efekt będzie taki sam, dzięki czemu unikniemy nieestetycznego ułożenia, gdy pod zdjęciem znalazłaby się tylko jedna linijka akapitu lub obok zdjęcia tylko jeden wyraz, co nie wszystkim się podoba. Mamy również pewność, że tytuły artykułów rozłożą się tak, jak to zaplanowaliśmy, tzn. np. w pojedynczej linijce, a nie w kilku wierszach.
Szerokość stałego szablonu ustala się w pikselach, ponieważ rozdzielczość ekranu określona jest właśnie w tych jednostkach. Jaka zatem powinna być ustalona szerokość? Zgodnie z danymi statystycznymi rozdzielczości o szerokości poniżej 800 pikseli to obecnie niezmierna rzadkość, dlatego zwykle tę wartość przyjmuje się jako najniższą dopuszczalną szerokość stałego szablonu, w której zajmuje on całą dostępną szerokość zmaksymalizowanego okna przeglądarki. Nie można jednak bezpośrednio przyjąć wartości 800px, ponieważ w oknie musi się jeszcze zmieścić pionowy pasek przewijania. W większości systemów operacyjnych szerokość paska przewijania wynosi 20px, a więc żaden szablon nie powinien być szerszy niż 780px - o ile wyzerujemy poziome marginesy strony.
Biorąc pod uwagę malejącą liczbę użytkowników pracujących w rozdzielczości 800x600, coraz częściej spotyka się stałe szablony, przystosowane do wyświetlania w 1024x768 i wyższych rozdzielczościach ekranu. Wtedy dostępna przestrzeń to 1004px. Jeżeli dobrze zaplanujemy taki szablon, to również użytkownicy 800x600 będą w stanie w miarę wygodnie przeglądać serwis. Nie można przecież jednocześnie korzystać z menu nawigacyjnego oraz czytać treści artykułu na stronie (chyba, że ktoś ma bardzo podzielną uwagę i dużego zeza rozbieżnego :-). Zatem przy odpowiednio dobranej szerokości bloku treści, użytkownicy niższych rozdzielczości nie będą musieli używać poziomego paska przewijania podczas czytania artykułu, a jedynie w momencie przejścia do widoku menu nawigacyjnego i odwrotnie. Kolumna bloku treści nie powinna być zatem szersza niż 780px, aby możliwe było odczytanie pełnej linijki tekstu bez potrzeby poziomego przewijania strony.
Ułóżmy nasze szablony, przedstawione na wstępie, tak aby menu i blok dodatkowych informacji rzeczywiście były pionowymi kolumnami (wszystkie przykłady w skali 1:2, czyli dwukrotnie pomniejszone):
Dwie kolumny:
html, body {
background-color: #fff;
color: #000;
margin: 0;
padding: 0;
text-align: center;
}
#top {
width: 780px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
#NAGLOWEK {
background-color: #888;
}
#MENU {
width: 150px;
float: left;
overflow: hidden;
background-color: #ccc;
}
#TRESC {
width: 630px;
float: left;
overflow: hidden;
background-color: #fff;
}
#STOPKA {
clear: both;
width: 100%;
background-color: #888;
}Wyjaśnienie:
html oraz body, z uwagi na różnice interpretacji elementu podstawowego (korzeń - ang. root) drzewa dokumentu w niektórych przeglądarkach (element podstawowy posiada określone domyślne marginesy strony, które chcemy usunąć).float: left, wykorzystywanej zwykle przy oblewaniu elementów (np. ilustracji) tekstem. Kilka następujących po sobie bloków z określonym oblewaniem, ustawia się obok siebie - o ile mieszczą się w dostępnej szerokości ich rodzica [zobacz: Szerokość i marginesy automatycznie - "Elementy z oblewaniem (float) nie-zastępowane" - punkt nr 5]. Suma szerokość wszystkich kolumn nie może przekroczyć 780px, ponieważ jako najmniejszą dopuszczalną rozdzielczość ekranu założyliśmy 800x600 (od wartości 800 odejmujemy szerokość pionowego suwaka).overflow: hidden. Jest to zabezpieczenie na wypadek, gdyby w ich zawartości znalazły się elementy szersze niż mogą pomieścić. W takim przypadku, w zależności od przeglądarki, zbyt szerokie elementy mogłyby zachodzić na sąsiednie bloki, zasłaniając ich zawartość albo blok taki mógłby zostać przeniesiony poniżej wcześniejszego, co zupełnie zepsułoby szablon. Własność przepełnienia po prostu obetnie niemieszczący się element - z dwojga złego lepsze chyba to, niż zupełne "rozjechanie" strony.clear: both, ponieważ bez tego szablon mógłby wyglądać następująco:float: left) dla środkowych bloków szablonu, które próbują wyświetlić się obok (w tym przypadku po lewej stronie) pozostałych elementów, które w kodzie źródłowym są umieszczone pod nimi. Deklaracja width: 100% została dodana tylko ze względu na błąd Internet Explorera 6.0 (w MSIE 7.0 wszystko jest w porządku), objawiający się wyświetleniem koloru tła stopki od dolnych krawędzi ustawionych powyżej oblewanych bloków, a tekstu stopki prawidłowo - poniżej nich.Przykład:
Trzy kolumny:
html, body {
background-color: #fff;
color: #000;
margin: 0;
padding: 0;
text-align: center;
}
#top {
width: 780px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
#NAGLOWEK {
background-color: #888;
}
#MENU {
width: 150px;
float: left;
overflow: hidden;
background-color: #ccc;
}
#INFORMACJE {
width: 150px;
float: right;
overflow: hidden;
background-color: #ccc;
}
#TRESC {
width: 480px;
float: left;
overflow: hidden;
background-color: #fff;
}
#STOPKA {
clear: both;
width: 100%;
background-color: #888;
}Konstrukcja analogiczna jak poprzednio z tym wyjątkiem, że kolumnę dodatkowych informacji musieliśmy przesunąć na prawą stronę, używając float: right.
Spróbujmy teraz przestawić kolejność kolumn, bez ingerencji w ustalony wcześniej kod źródłowy XHTML:
Dwie kolumny:
html, body {
background-color: #fff;
color: #000;
margin: 0;
padding: 0;
text-align: center;
}
#top {
width: 780px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
#NAGLOWEK {
background-color: #888;
}
#MENU {
width: 150px;
float: right;
overflow: hidden;
background-color: #ccc;
}
#TRESC {
width: 630px;
float: left;
overflow: hidden;
background-color: #fff;
}
#STOPKA {
clear: both;
width: 100%;
background-color: #888;
}Tak, to tylko jedna zmieniona linijka w arkuszu stylów CSS! Pomyśl, ile plików trzeba by modyfikować, jeśli szablon byłby oparty o tabelki. Kolumna menu ustawiła się po prawej stronie, ponieważ tym razem została jej przypisana własność float: right, co wymusiło ułożenie po prawej stronie innych elementów - w tym przypadku bloku treści z ustalonym float: left.
Trzy kolumny:
html, body {
background-color: #fff;
color: #000;
margin: 0;
padding: 0;
text-align: center;
}
#top {
width: 780px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
#NAGLOWEK {
background-color: #888;
}
#MENU {
width: 150px;
float: right;
overflow: hidden;
background-color: #ccc;
}
#INFORMACJE {
width: 150px;
float: left;
overflow: hidden;
background-color: #ccc;
}
#TRESC {
width: 480px;
float: left;
overflow: hidden;
background-color: #fff;
}
#STOPKA {
clear: both;
width: 100%;
background-color: #888;
}Normalna kolejność wyświetlania elementów byłaby taka, jak bez żadnej stylizacji, czyli: menu nawigacyjne, dodatkowe informacje, treść. Rozpoczynamy przestawianie:
float: right.float: left.float: left.Możliwe są również inne konfiguracje - np. czasami spotykane ułożenie obu wąskich kolumn po lewej, a treści po prawej stronie:
html, body {
background-color: #fff;
color: #000;
margin: 0;
padding: 0;
text-align: center;
}
#top {
width: 780px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
#NAGLOWEK {
background-color: #888;
}
#MENU {
width: 150px;
float: left;
overflow: hidden;
background-color: #ccc;
}
#INFORMACJE {
width: 150px;
float: left;
overflow: hidden;
background-color: #ccc;
}
#TRESC {
width: 480px;
float: left;
overflow: hidden;
background-color: #fff;
}
#STOPKA {
clear: both;
width: 100%;
background-color: #888;
}W tym przypadku naturalna kolejność wyświetlania bloków, wynikająca z ułożenia elementów w kodzie źródłowym strony, jest odpowiednia. Przypisanie własności float: left, miało jedynie na celu ustawienie kolumn obok siebie, a nie pod sobą. Natomiast nie wpływa to na ich kolejność.
Płynny szablon (ang. liquid layout) charakteryzuje się zmianą swoich poziomych proporcji przy zmianie rozmiaru okna przeglądarki lub rozdzielczości ekranu. Najczęściej w każdych warunkach zajmuje on całą dostępną szerokość w oknie. Jest on raczej rzadziej stosowany, ze względu na niemożliwe do przewidzenia ułożenie elementów treści. Poza tym tekst w zbyt długich linijkach zwykle gorzej się czyta, ponieważ trudniej przenieść wzrok z końca wiersza na początek następnego. Czasami jednak może być wygodny, np. kiedy zawiera jakieś szerokie elementy, które mogą nie zmieścić się w ustalonej szerokości dla stałego szablonu (czyli zwykle 780px minus szerokość kolumny menu i ewentualnie dodatkowych informacji).
W płynnych szablonach najczęściej tylko blok treści strony dopasowuje się do rozmiarów okna przeglądarki, a pozostałe kolumny zawsze pozostają stałe. Dla kolumny menu zmiana szerokości zwykle nie miałaby większego sensu, gdyż często zawiera ustalone wąskie elementy (odnośniki nawigacyjne). Poza tym dzięki stałej szerokości kolumny menu podanej w pikselach jej wygląd staje się niezależny od rozdzielczości ekranu, a w tym przypadku jest to mocno wskazane.
Cały czas jedynie stylizując niezmienny kod XHTML przedstawiony na wstępie, sprawimy, że kolumna treści dopasuje się do rozmiarów okna przeglądarki, a więc również do rozdzielczości ekranu (wszystkie przykłady w skali 1:2, czyli dwukrotnie pomniejszone):
Dwie kolumny:
html, body {
background-color: #fff;
color: #000;
margin: 0;
padding: 0;
}
#NAGLOWEK {
background-color: #888;
}
#MENU {
width: 150px;
float: left;
overflow: hidden;
position: relative;
background-color: #ccc;
}
#TRESC {
margin-left: 150px;
background-color: #fff;
}
#STOPKA {
clear: both;
background-color: #888;
}Wyjaśnienie:
float: left) powoduje, że kolumna ustawia się po lewej stronie następnego bloku. Deklaracja pozycjonowania relatywnego (position: relative) została dodana tylko ze względu na błąd Internet Explorera 6.0 (w MSIE 7.0 wszystko jest w porządku), objawiający się znikaniem z ekranu oblewanego bloku menu nawigacyjnego.float) - w tym przypadku kolumna menu - są usuwane z normalnego biegu treści w dokumencie. Blok treści strony nie jest oblewany tak jak menu, zatem jego margines jest liczony od lewej krawędzi okna przeglądarki, a nie od prawej krawędzi kolumny menu. Margines ten jest konieczny, ponieważ bez niego, kiedy blok treści byłby wyższy od kolumny menu, dolna część tekstu znalazłaby się pod kolumną menu, przylegając do lewej krawędzi okna. Zatem margines przygotowuje miejsce na kolumnę menu, która została ustawiona dokładnie nad nim. Możliwy efekt bez lewego marginesu:clear: both, ponieważ w przeciwnym razie mogłaby się ustawić obok kolumny menu nawigacyjnego, które jest oblewane:Przykład:
Trzy kolumny:
html, body {
background-color: #fff;
color: #000;
margin: 0;
padding: 0;
}
#NAGLOWEK {
background-color: #888;
}
#MENU {
width: 150px;
float: left;
overflow: hidden;
position: relative;
background-color: #ccc;
}
#INFORMACJE {
width: 150px;
float: right;
overflow: hidden;
position: relative;
background-color: #ccc;
}
#TRESC {
margin-left: 150px;
margin-right: 150px;
background-color: #fff;
}
#STOPKA {
clear: both;
background-color: #888;
}Sytuacja analogiczna jak poprzednio, jednak teraz musimy ustawić kolumnę dodatkowych informacji po prawej stronie treści strony (float: right), a co za tym idzie, blok treści posiada dodatkowy prawy margines o wartości równej szerokości prawej kolumny, czyli dodatkowych informacji.
Odwrotna kolejność:
Dwie kolumny:
html, body {
background-color: #fff;
color: #000;
margin: 0;
padding: 0;
}
#NAGLOWEK {
background-color: #888;
}
#MENU {
width: 150px;
float: right;
overflow: hidden;
position: relative;
background-color: #ccc;
}
#TRESC {
margin-right: 150px;
background-color: #fff;
}
#STOPKA {
clear: both;
background-color: #888;
}Trzy kolumny:
html, body {
background-color: #fff;
color: #000;
margin: 0;
padding: 0;
}
#NAGLOWEK {
background-color: #888;
}
#MENU {
width: 150px;
float: right;
overflow: hidden;
position: relative;
background-color: #ccc;
}
#INFORMACJE {
width: 150px;
float: left;
overflow: hidden;
position: relative;
background-color: #ccc;
}
#TRESC {
margin-left: 150px;
margin-right: 150px;
background-color: #fff;
}
#STOPKA {
clear: both;
background-color: #888;
}Jeszcze inne ustawienie:
html, body {
background-color: #fff;
color: #000;
margin: 0;
padding: 0;
}
#NAGLOWEK {
background-color: #888;
}
#MENU {
width: 150px;
float: left;
overflow: hidden;
position: relative;
background-color: #ccc;
}
#INFORMACJE {
width: 150px;
float: left;
overflow: hidden;
position: relative;
background-color: #ccc;
}
#TRESC {
margin-left: 300px;
background-color: #fff;
}
#STOPKA {
clear: both;
background-color: #888;
}