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:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
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:
|
1
2
3
4
5
6
7
8
9
10
11
|
<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>
|