Informacje o nowych artykułach oraz akcjach edukacyjnych prosto na Twojej skrzynce e-mail!

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:

html {
	background-color: #fff;
	color: #000;
	margin: 0;
	padding: 0;
}
body {
        margin: 0 auto;
	padding: 0;
        display: block;
	width: 1004px;
        overflow: auto;
}
#header {
        width: 100%;
        float: left;
	background-color: #888;
}
#nav {
	width: 250px;
	float: left;
	overflow: hidden;
	background-color: #ccc;
}
#content {
	width: 554px;
	float: left;
	overflow: hidden;
	background-color: #fff;
}
#footer {
	clear: both;
	width: 100%;
	background-color: #888;
}

Kod HTML:

<html>
    <head>
         <link rel="stylesheet" href="css.css" type="text/css" />
    </head>
    < body>
         <div id="header">header</div>
         <div id="nav">nav</div>
         <div id="content">content</div>
         <div id="footer">footer</div>
    < /body>
</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:

html {
	background-color: #fff;
	color: #000;
	margin: 0;
	padding: 0;
}
body {
	margin: 0 auto;
	padding: 0;
        display: block;
	width: 1004px;
        overflow: auto;
}
#header {
        width:100%;
	float: left;
	background-color: #888;
}
#left {
	width: 200px;
	float: left;
	overflow: hidden;
	background-color: #ccc;
}
#right {
	width: 200px;
	float: right;
	overflow: hidden;
	background-color: #ccc;
}
#content {
	width: 604px;
	float: left;
	overflow: hidden;
	background-color: #fff;
}
#footer {
	clear: both;
	width: 100%;
	background-color: #888;
}

Kod HTML:

<html>
    <head>
        <link rel="stylesheet" href="css.css" type="text/css" />
    </head>
    < body>
        <div id="header">header</div>
        <div id="left">left</div>
        <div id="content">content</div>
        <div id="right">right</div>
        <div id="footer">footer</div>
    < /body> 
</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.

Spodobało się?

Jeśli tak, to zarejestruj się do newslettera aby otrzymywać informacje nowych artykułach oraz akcjach edukacyjnych. Gwarantuję 100% satysfakcji i żadnego spamowania!

, ,

Dodaj komentarz

Odpowiedz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Pin It on Pinterest