Warning: fopen(/03bf2e8183618f056cbdbef0a382f4d22ad8c322) [function.fopen]: failed to open stream: Permission denied in /home/klient.dhosting.pl/damek/damek.eu/public_html/wp-content/plugins/fv-code-highlighter/Includes/Cache.php on line 69

Warning: fopen(/d09e7c362e0761a80103a87ec4b30875ba3ead5f) [function.fopen]: failed to open stream: Permission denied in /home/klient.dhosting.pl/damek/damek.eu/public_html/wp-content/plugins/fv-code-highlighter/Includes/Cache.php on line 69

Warning: fopen(/8492c6eb7211a555c337a50fd028db25178cbd2d) [function.fopen]: failed to open stream: Permission denied in /home/klient.dhosting.pl/damek/damek.eu/public_html/wp-content/plugins/fv-code-highlighter/Includes/Cache.php on line 69

Warning: fopen(/dac64ccae50969b29d82edfff82e593e9943a921) [function.fopen]: failed to open stream: Permission denied in /home/klient.dhosting.pl/damek/damek.eu/public_html/wp-content/plugins/fv-code-highlighter/Includes/Cache.php on line 69

Warning: fopen(/a96e277b7d81f51781a4b0e2a991a267eb508f83) [function.fopen]: failed to open stream: Permission denied in /home/klient.dhosting.pl/damek/damek.eu/public_html/wp-content/plugins/fv-code-highlighter/Includes/Cache.php on line 69

Warning: fopen(/65bffaa6089bf5b63fa0061befbf61f19e14271e) [function.fopen]: failed to open stream: Permission denied in /home/klient.dhosting.pl/damek/damek.eu/public_html/wp-content/plugins/fv-code-highlighter/Includes/Cache.php on line 69

Warning: fopen(/df5834b272d56c8bf34d57f4044e4f8dd00aa5d0) [function.fopen]: failed to open stream: Permission denied in /home/klient.dhosting.pl/damek/damek.eu/public_html/wp-content/plugins/fv-code-highlighter/Includes/Cache.php on line 69

Warning: fopen(/0c91fbdf90ccfe02d861296c8dfca81c4732f890) [function.fopen]: failed to open stream: Permission denied in /home/klient.dhosting.pl/damek/damek.eu/public_html/wp-content/plugins/fv-code-highlighter/Includes/Cache.php on line 69

Warning: fopen(/e66f8bf2d46418abb9d81e3a00220c6829344b69) [function.fopen]: failed to open stream: Permission denied in /home/klient.dhosting.pl/damek/damek.eu/public_html/wp-content/plugins/fv-code-highlighter/Includes/Cache.php on line 69

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.

Pierwszą rzeczą jest to, że DIVów nie ustawimy, jeżeli nie znamy CSS.

Bez odpowiedniego ustawienia za żadne skarby nie będą obok siebie. Wykorzystuje się do tego float. Również można zastosować clear:both; jeżeli chcemy wymusić, aby jakiś bok nie przylegał.

Drugą bardzo ważną rzeczą jest to, że DIVy to elementy blokowe. Są jak prostokąty – mają zdeklarowane wymiary(podane np. w pikselach, centymetrach, czy procentach(!)) i posiadają powierzchnię(w kształcie prostokąta oczywiście).

Ich widoczność jest taka, jak bloków na osiedlu patrząc z poziomu Ziemi. Pierw widzimy elementy bliższe(większe z-index), a potem dalsze(mniejsze z-index).

Jeżeli na nich tego nie wymusimy, nie znajdą się w jednym miejscu, na jednej płaszczyźnie(=jeżeli będą miały ten sam z-index). Wymusić to można np. za pomocą pozycjonowania relatywnego.

Do wysokości i szerokości rzeczywistej zalicza się również margines wewnętrzny(padding), lecz zewnętrzny nie. Można to zobrazować prostym rysunkiem:

Domyślnie obydwa marginesy równe są zero.

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:

Przypominając sobie wiadomości z poprzedniej listy możemy wywnioskować, że:
Pierwszej i drugiej kolumnie będzie trzeba ustawić przyleganie
Każdemu elementowi potrzeba ustawić wymiary.
Stopce trzeba wyłączyć przyleganie, gdyż nie chcemy, aby kiedyś coś obok niej mogło się przez przypadek pojawić, jeżeli umieścimy coś dodatkowego

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

/* 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
5
6
7

<!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
3

</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
13
14
15
16
17
18
19
20
21
22
23

<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
3

</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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

<!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.

Autor: Łukasz Rutkowski
Źródło: www.eazu.pl