-->

Jak pisać strony na DIVach?

Data dodania:
06 kwietnia 09
Autor:
Łukasz Rutkowski
Kategoria:
(x)HTML, CSS

To odwieczne pytanie początkujących koderów (x)HTML, kiedy zarzuci im się tworzenie szablonu na tabelkach. Niestety dla dużej części jest to dość zawiłe w zrozumieniu, choć tak na prawdę to nic trudnego. Wystarczy minimalnie zmienić swoje wyobrażenie struktury elementów.

Podstawowe informacje o DIVach już znamy, więc przejdźmy do napisania prostego szablonu. Będzie się składał z nagłówka, dwóch kolumn po środku i stopki. Będzie to wyglądało tak:
strona
Przypominając sobie wiadomości z poprzedniej listy możemy wywnioskować, że:

Kodem xHTML zajmiemy się w kolejnym kroku, teraz, kiedy jesteśmy przy wyciąganiu wniosków z listy, opracujmy kod CSS. Przyjmijmy, że nagłówkowi później nadamy ID równy “naglowek”, pierwszej kolumnie – “menu”, drugiej kolumnie – “tresc”, a stopce – “stopka”. Kolory zastosujemy te same, które są na powyższym obrazku.
Polecam spróbować samemu wykonać ten kod.
Mój 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

/* szerokość bloku obejmującego i kolor czcionki */
body {
	width: 800px;
	color: white;
}
/* szerokość nagłówka i stopki oraz ich kolor */
#naglowek, #stopka {
	width: 800px;
	background: #00BA00;
}
/* wysokość nagłówka */
#naglowek {
	height: 120px;
}
/* wysokość stopki i zablokowanie przylegania */
#stopka {
	height: 50px;
	clear: both;
}
/* wysokość obydwu kolumn i ustawienie im przylegania */
#menu, #tresc {
	height: 400px;
	float: left;
}
/* szerokość I kolumny i jej tło */
#menu {
	width: 200px;
	background: #007BB9;
}
/* szerokość II kolumny i jej tło */
#tresc {
	width: 600px;
	background: #DBC500;
}

Kod ten proszę umieścić w pliku style.css.

Mało doświadczonych może zdziwić deklaracja szerokości dla elementu body. Tutaj chciałbym wprowadzić informację, że nie używa się elementów zbiorowych dla całej strony, którym byłby na przykład DIV obejmujący całą treść.
Skoro mamy już ten kod, powinniśmy się zabrać do pisania w xHTML. Najpierw oczywiście zaczynamy od standardowego nagłówka xHTML(w tym przypadku 1.0 Strict):

1
2
3
4

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>

Potem podajmy tytuł strony:

1

<title>Moja pierwsza strona na DIVach</title>

W następnej kolejności ustawiamy kodowanie strony(w tym przypadku UTF-8):

1

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

Jako następną rzecz, dodajemy informację o zewnętrznym arkuszu stylów, który jest umieszczony w pliku style.css:

1

<link rel="stylesheet" type="text/css" href="style.css" />

Zakańczamy sekcję head i otwieramy body:

1
2

</head>
<body>

Tutaj zaczyna się trudność większości. Nie wykonujemy tu nic trudniejszego, jak wypisanie wszystkich DIVów z treścią odpowiadającą ich przeznaczeniu:

1
2
3
4
5
6
7
8
9
10
11
12

<div id="naglowek">
	Nagłówek
</div>
<div id="menu">
	Menu
</div>
<div id="tresc">
	Treść
</div>
<div id="stopka">
	Stopka
</div>

Teraz nie pozostaje nam nic innego, jak zamknąć wszystkie niezamknięte elementy, czyli body i html:

1
2

</body>
</html>

Cały kod pliku xHTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
	<title>Moja pierwsza strona na DIVach</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
	<div id="naglowek">
		Nagłówek
	</div>
	<div id="menu">
		Menu
	</div>
	<div id="tresc">
		Treść
	</div>
	<div id="stopka">
		Stopka
	</div>
</body>
</html>

Kod xHTML zapisujemy w dowolnym pliku o rozszerzeniu html i umieszczamy na serwerze. Wszystko powinno ułożyć się tak:
Wynik

No i to już koniec naszej trudnej wędrówki przez ten artykuł. Jego wynikiem jest prosty szablon oparty na DIVach. Polecam dla utrwalenia wiadomości i praktyki poćwiczyć dodawanie kolejnych bloków(np. menu górnego) oraz zmianę wszystkich wartości na procenty, które umożliwiają tworzenie stron dopasowujących się do rozdzielczości klienta.

Część druga »

~Łukasz Rutkowski