Szablon strony na DIV-ach

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:

• Wyobraź sobie, że po roku działalności strony zechcesz całkowicie odmienić jej wygląd, np. przenosząc kolumnę menu z lewej na prawą stronę. Dzięki CSS to tylko jedna linijka w arkuszu stylów, zamiast żmudnej modyfikacji być może setek powstałych dotychczas podstron serwisu!
• Bez trudu wprowadzisz okolicznościowe wersje wyglądu swojej witryny - np. z okazji Nowego Roku.
• Chcesz przygotować zestaw skórek dla Twojej strony? Z CSS jest to znacznie prostsze i mniej inwazyjne niż w jakimkolwiek systemie parsowania szablonów. Ponadto rozwiązanie takie jest pozbawione bardzo irytującej wady: jeśli przyszło Ci administrować darmowym systemem CMS lub forum dyskusyjnym i masz już za sobą samodzielne próby wprowadzania modyfikacji dodających nowe funkcje w serwisie, to zapewne wiesz, że bardzo często wymaga to aktualizacji plików wszystkich dostępnych skórek. Po jakimś czasie staje się to tak uciążliwe, że usuwasz wszystkie dodatkowe skórki albo rezygnujesz z wprowadzania jakichkolwiek modyfikacji, mimo iż użytkownicy coraz głośniej się tego domagają. Przejdź na CSS i raz na zawsze zapomnij o tych problemach!
• Znacznie mniejsze rozmiary wszystkich podstron serwisu. Twoi użytkownicy odczują to w postaci zauważalnie krótszego czasu ładowania stron (zadowolony użytkownik częściej powraca do serwisu), a Ty możesz zaoszczędzić na opłacie za utrzymanie witryny, mniej płacąc firmie hostingowej za wykorzystany transfer (w przypadku popularnych serwisów będą to naprawdę niebagatelne sumy).
• Inna wersja strony do wydruku lub dla urządzeń przenośnych? Proszę bardzo - dzięki obsłudze mediów wystarczy dołączyć dodatkowe arkusze stylów i nie trzeba przygotowywać żadnych nowych wersji dokumentów HTML.
• Zależy Ci na wysokiej pozycji w wyszukiwarkach internetowych? Semantyczny kod oparty o CSS jest najprostszą ku temu drogą.
• Nie utrudniaj korzystania z Twojego serwisu osobom niewidomym ani użytkownikom przeglądarek tekstowych, tworząc stronę w technologii sprzed dziesięcioleci.
• Wdrożenie kolejnego serwisu, wchodzącego w skład jednego portalu, może się sprowadzać tylko do niewielkiej modyfikacji jednego krótkiego pliku - arkusza stylów CSS... no i oczywiście zredagowania nowych treści 🙂 Zaoszczędzisz sporo czasu na programowaniu oraz na szkoleniu redaktorów w obsłudze nowego serwisu, dzięki czemu pozostawisz konkurencję daleko w tyle. Ponadto możesz wykorzystywać raz opracowane elementy we wszystkich serwisach portalu, wszędzie elastycznie dopasowując ich wygląd do lokalnego szablonu.

Analogicznie jak we wspomnianym wcześniej rozdziale pt. Menu w CSS, także i tutaj z góry ustalimy kod HTML, 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 HTML. 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>

[Zobacz także: Szablon strony w HTML5]

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>

[Zobacz także: Szablon strony w HTML5]

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).

Dlaczego nie tabele?

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:

• Tabele służą do prezentacji danych tabelarycznych, a nie do tworzenia szablonów - jest to poważny błąd semantyczny.
• Zwiększają rozmiary dokumentów (dłuższe wczytywanie i wyższe opłaty za transfer).
• Znacznie ograniczają możliwości stylizacji za pomocą CSS.
• Utrudniają odbiór treści przez osoby niewidome oraz użytkowników przeglądarek tekstowych.
• Zwykle wpływają negatywnie na pozycję serwisu w wynikach wyszukiwania.

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:

1. W prezentowanych danych można wyróżnić poziomy lub/i pionowy nagłówek - może go nawet nie być, ważne żeby dało się go logicznie wyznaczyć choćby wirtualnie.
2. Prezentujemy przynajmniej dwa egzemplarze krótkich danych o podobnym charakterze - będą to odpowiedniki kolejnych wierszy tabeli. Taka tabela może mieć nawet tylko jedną kolumnę danych (w takim przypadku zwykle mamy do czynienia z pionowym nagłówkiem, poprzedzającym kolumnę danych).