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