Stały szablon

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:

1. Pierwszą regułą stylów w arkuszu CSS jest ustalenie domyślnego koloru tła oraz kolor tekstu w całym dokumencie. Zawsze trzeba o tym pamiętać, ponieważ użytkownik może zmienić domyślne kolory w swoim systemie operacyjnym, a wtedy przypadkowo możemy uzyskać dość osobliwy efekt kolorystyczny - np. czarny tekst na czarnym tle. Nigdy nie zakładaj, że domyślny kolor tekstu to czarny, a kolor tła - biały!
2. W tym samym miejscu usuwamy wszystkie marginesy strony. Analogicznie postępujemy z marginesem wewnętrznym, aby zabezpieczyć się przed możliwą odmienną interpretacją w niektórych przeglądarkach. Wyzerowanie marginesu jest konieczne, aby uzyskać maksymalną dostępną przestrzeń w poziomie - dla rozdzielczości 800x600 będzie to 780px. Te oraz poprzednie deklaracje są przypisane jednocześnie elementom 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ąć).
3. Ustalamy odpowiednią szerokość szablonu, tzn. taką, aby zmieściła się w najniższej planowanej rozdzielczości ekranu - w tym przypadku 800x600. Musimy przewidzieć 20px miejsca dla suwaka do przewijania treści, dlatego ostatecznie, przy zerowych marginesach strony, ustalamy szerokość szablonu na 780px.
4. Dla bloku nagłówka po prostu przypisujemy odrębny kolor tła, aby był lepiej widoczny na załączonych przykładach.
5. Cała "magia" dzieje się dla bloku treści strony i menu nawigacyjnego. Normalnie wszystkie bloki szablonu były ułożone jeden pod drugim. Aby ułożyć wspomniane kolumny pionowo, użyliśmy własności 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).
6. Oblewane bloki kolumn posiadają również własność przepełnienia 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.
7. Stopce serwisu nadajemy własność przylegania clear: both, ponieważ bez tego szablon mógłby wyglądać następująco:
   Nagłówek szablonu

   Menu nawigacyjne

   Treść strony

   Stopka serwisu
   Efekt ten wynika z ustalonego oblewania (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 możliwy błąd w bardzo starych przeglądarkach, który objawiał 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.

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 HTML:

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:

1. Kolumna menu nawigacyjnego powinna się znaleźć po prawej stronie, a w kodzie źródłowym znajduje się na początku, zatem zostaje jej przypisana własność float: right.
2. Kolumna dodatkowych informacji może pozostać w kolejności wynikającej z ułożenia w kodzie źródłowym, a zatem przypisujemy float: left.
3. Kolejność bloku treści strony, wynikająca z naturalnego ułożenia, również jest odpowiednia (powinien się wyświetlić po kolumnie dodatkowych informacji, która w kodzie źródłowym poprzedza blok treści), a zatem - 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ść.