Szablon strony WWW na div-ach o stałej szerokości

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:

Kod HTML:

Objaśnienie:

  1. 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).
  2. 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).
  3. W kolejnym punkcie ustalamy tło nagłówka i wyrównujemy go do lewej krawędzi.
  4. Potem przypisujemy style lewej kolumnie. Wyrównujemy ją do lewej krawędzi oraz ustalamy stałą szerokość.
  5. W kolejnym kroku wykonujemy dokładnie to samo co w punkcie wyżej z tym, że dla prawej kolumny.
  6. 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:

Kod HTML:

Objaśnienie:

  1. 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).
  2. 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).
  3. W kolejnym punkcie ustalamy tło nagłówka i wyrównujemy go do lewej krawędzi.
  4. Potem przypisujemy style lewej kolumnie. Wyrównujemy ją do lewej krawędzi oraz ustalamy stałą szerokość.
  5. W kolejnym kroku wykonujemy dokładnie to samo co w punkcie wyżej z tym, że dla prawej kolumny.
  6. Następnie ustalamy style dla kolumny środkowej, zawierającej główną treść.
  7. W ostatnim elemencie naszej układanki pozostaje tylko, ustawić dolny pasek (stopkę) na samym dole pod wszystkimi elementami.

, ,