C

M

Y

K

Zanim przystąpimy do kodowania

Przed rozpoczêciem pisania kodu HTML i CSS witryny
nale¿y ustaliæ g³ówne za³o¿enia dotycz¹ce serwisu. Zagad-
nieniami wymagaj¹cymi zdefiniowania s¹: docelowa grupa
przegl¹darek oraz szerokoœæ uk³adu.

Przegl¹darki internetowe dzielimy na trzy g³ówne

rodziny:

X

pierwsza generacja: przegl¹darki nie wspieraj¹ce
CSS,

X

druga generacja: przegl¹darki czêœciowo wspieraj¹ce
CSS,

X

trzecia generacja: przegl¹darki z pe³nym wsparciem
CSS.

Do pierwszej rodziny zaliczamy m.in. przegl¹darki tek-

stowe oraz archaiczne wersje wspó³czesnego oprogramo-
wania, np. Inernet Explorer 4.0 czy Netscape 4. Oprogra-
mowanie to interpretuje wybiórczo kilka podstawowych
atrybutów CSS.

Przegl¹darki drugiej generacji, nale¿¹ do nich na przy-

k³ad Netscape 6 oraz Internet Explorer 5, interpretuj¹ du¿¹
czêœæ CSS, jednak robi¹ to w sposób na tyle niezgodny
i niespójny, ¿e przygotowywanie uk³adu witryny w oparciu
o style jest zadaniem trudnym.

Wreszcie najnowsza generacja przegl¹darek, Internet

Explorer 6, Opera 7, Firefox oraz Netscape 8, zawiera pe³-
ne wsparcie dla CSS, ró¿ni¹c siê jedynie w szczegó³ach.

Witryna „Gimp w zastosowaniach” jest przygotowana

z myœl¹ o najnowszych wersjach przegl¹darek, które ma-
j¹ pe³ne wsparcie dla CSS. Pozwala to na korzystanie ze
wszystkich atrybutów CSS dotycz¹cych warstw oraz
pude³ek.

Drugim wa¿nym zagadnieniem jest szerokoœæ uk³adu witryny.

Powszechnie stosowanymi rozwi¹zaniami s¹:

X

uk³ad o sta³ej szerokoœci, niezale¿nej od szerokoœci okna
przegl¹darki,

X

uk³ad o szerokoœci zale¿nej od szerokoœci okna przegl¹darki,

X

uk³ad o szerokoœci zale¿nej od szerokoœci okna przegl¹darki,
maj¹cy minimaln¹ szerokoœæ.

Witryna http://gwz.gajdaw.pl ma sta³¹ szerokoœæ, która

wynosi 760 pikseli. Szerokoœæ ta pozwala na pe³ne
wyœwietlenie witryny na monitorach o rozdzielczoœci
od 800 x 600 wzwy¿. 40 pikseli marginesu jest zare-
zerwowane na pionowy pasek przewijania, który jest
wyœwietlany na podstronach zawieraj¹cych wiêcej tek-
stu. W ten sposób na witrynie nigdy nie pojawia siê
poziomy pasek przewijania, uznawany za b³¹d w uk³a-
dzie witryny.

Krok 1: główny pojemnik

W pierwszym kroku w kodzie HTML umieszczamy sekcjê

div, która bêdzie pojemnikiem na ca³¹ zawartoœæ strony.
Sekcji tej nadajemy style:

#strona {

margin : auto;
border : 1px solid black;
padding : 0px;
width : 758px;

}

Dziêki temu bêdzie ona wyœrodkowana na stronie

(w³aœciwoœæ margin) oraz bêdzie mia³a zadan¹ szero-
koœæ. Szerokoœæ ca³ego elementu div wynosi 760 pikseli,
z czego 758 jest przeznaczone na zawartoϾ, a 2 na
obramowanie.

Ca³a zawartoœæ witryny bêdzie umieszczona wewn¹trz

g³ównego pojemnika div o identyfikatorze #strona.

Style zapisujemy w pliku style.css i do³¹czamy do kodu

strony w nastêpuj¹cy sposób:

@import url(style.css);

dziêki czemu stan¹ siê niedostêpne dla przegl¹darek pierwszej genera-
cji. W ten sposób stare przegl¹darki (pierwszej generacji) wyœwietl¹
wprawdzie nieatrakcyjn¹, ale za to czyteln¹ witrynê.

Pierwsza ilustracja przedstawia wygl¹d witryny zawieraj¹cej jedy-

nie g³ówne pude³ko div#strona po modyfikacji koloru t³a.

praktyka

INTERNET.listopad.2005

110

NA CD

NEWSY

Z OK£ADKI

FIRMA

MAGAZYN

PROGRAMY

WEBMASTERING

Artyku³ omawia kulisy powstawania witryny internetowej wy³¹cznie w oparciu o elementy

div oraz kaskadowe arkusze stylów. Jako przyk³ad s³u¿y witryna http://gwz.gajdaw.pl

(„Gimp w zastosowaniach”).

W³odzimierz Gajda

Elementy div i style CSS

w praktyce

Listingi i przykłady z tego artykułu są na płycie CD

oraz w naszym serwisie internetowym: www.mi.com.pl.

l

jak przygotować

i testować układ

witryny

l

na jakie cechy układu

zwrócić uwagę

we wstępnym etapie

projektowania

l

jak szkielet witryny

wypełnić danymi

l

w jaki sposób

przekształcić gotowy

projekt witryny

w szablon

CZEGO SIÊ DOWIESZ

Z TEGO ARTYKU£U?

l

język XHTML

l

arkusze stylów CSS

l

podstawowa

znajomość szablonów

Smarty

WYMAGANA WIEDZA

C

M

Y

K

Krok 2: cztery główne obszary witryny

Pojemnik g³ówny witryny dzielimy nastêpnie na cztery podobszary:
nag³ówek, stopkê, lew¹ kolumnê oraz praw¹ kolumnê. Podzia³ ten
realizujemy umieszczaj¹c w g³ównym pojemniku cztery sekcje div,
tak jak to przedstawiono na listingu 1

.

Szerokoœci nag³ówka i stopki odpowiadaj¹ szerokoœci g³ównego

pojemnika i wynosz¹ 758 pikseli. Natomiast szerokoœci kolumn
lewej i prawej maj¹ tak ustalone wartoœci, by ³¹cznie tworzy³y blok
o szerokoœci 758 pikseli. Kolumna lewa nie ma obramowania, a jej
szerokoœæ wynosi 180 pikseli. Natomiast kolumna prawa ma lew¹
jednopikselow¹ krawêdŸ, wiêc jej szerokoœæ musi wynosiæ 577 pik-
seli, czyli w sumie:

180 + 1 + 577 = 758

Elementy div zawarte w g³ównym kontenerze przylegaj¹ œciœle do

siebie nawzajem i do brzegów g³ównego pojemnika. Efekt ten osi¹-
gniemy za pomoc¹ atrybutów margin, padding oraz border, nadaj¹c im
wartoœci:

margin : 0px;
border : none;
padding : 0px;

Szerokoœci elementów ustalamy oczywiœcie atrybutem width.
Kolumny lew¹ i praw¹ umieszczamy z lewej i z prawej strony za

pomoc¹ atrybutów float:

float : left;
float : right;

Natomiast stopkê przesuwamy pod spód kolumn lewej i prawej

atrybutem clear:

clear : both;

Otrzymany uk³ad, z zaznaczeniem poszczególnych fragmen-

tów i ich szerokoœci, jest przedstawiony na ilustracji 2. Na tym
etapie pracy warto sprawdziæ, czy otrzymana witryna wygl¹da
zgodnie z oczekiwaniami we wszystkich przegl¹darkach, na
które jest opracowywana. W naszym przypadku s¹ to cztery

przegl¹darki: Internet Explorer 6, Opara 7, Firefox oraz Netsca-
pe 8. Po stwierdzeniu, ¿e witryna wygl¹da dobrze nale¿y jesz-
cze dokonaæ sprawdzenia faktycznych rozmiarów sekcji div.
W tym celu modyfikujemy kolor t³a wszystkich sekcji div, a na-
stêpnie dokonujemy pomiaru na przyk³ad za pomoc¹ programu
Miarka.

Jakiekolwiek niedoci¹gniêcia zbagatelizowane na tym poziomie

(w szczególnoœci choæby jednopikselowa ró¿nica szerokoœci której-
kolwiek z sekcji div) bêd¹ powodowa³y zamieszanie w kolejnych
etapach pracy, a im póŸniej, tym trudniej bêdzie odnaleŸæ b³¹d
w kodzie HTML czy CSS.

Krok 3: podział kolumn lewej i prawej

Nastêpnie kolumny lew¹ i praw¹ dzielimy na mniejsze obszary. Tym
razem podzia³ jest poziomy.

W kolumnie lewej umieszczamy dwie sekcje div: jedn¹ przezna-

czon¹ na ilustracjê, drug¹ – na menu pionowe. Sekcje te otrzymaj¹
identyfikatory obrazOkladka oraz menuPion. Obie one maj¹ szerokoœæ
180 pikseli i œciœle przylegaj¹ do brzegów sekcji nadrzêdnej (czyli
div#kolumnaLewa).

Podobnie, w kolumnie prawej umieszczamy dwie sekcje div.

Pierwsza z nich, div#menuPoziome, jest przeznaczona na menu, zaœ
druga, div#tresc – na zawartoœæ strony. Sekcje te przylegaj¹ œciœle
do sekcji nadrzêdnej (czyli div#kolumnaPrawa) i obie maj¹ szerokoœæ
577 pikseli.

Otrzymany kod HTML zawiera wszystkie elementy div, które bêd¹

stanowi³y uk³ad witryny. Kod ten jest zawarty na listingu 2

.

Ilustracja 3 przedstawia wygl¹d otrzymanej witryny z zaznacze-

niem poszczególnych jej obszarów. Ponownie dokonujemy sprawdze-
nia wygl¹du witryny oraz rozmiaru poszczególnych sekcji.

Krok 4: menu pionowe i poziome

Kolejnym etapem tworzenia witryny jest przygotowanie menu
poziomego i pionowego oraz ilustracji w lewym górnym rogu
witryny. Ilustracja jest wstawiona zwyk³ym elementem img,
zaœ menu tworzymy w oparciu o listy wypunktowane ul i odpo-
wiednie arkusze stylów. Niezmiernie wa¿ne jest, by otrzymane
menu mia³o odpowiedni¹ szerokoœæ. Menu pionowe umieszczone
w lewej kolumnie musi mieæ szerokoœæ 180 pikseli, natomiast
menu poziome umieszczone w kolumnie prawej ma szerokoϾ
577 pikseli.

praktyka

111

WEBMASTERING

PROGRAMY

MAGAZYN

FIRMA

Z OK£ADKI

NEWSY

NA CD

Chcesz wiedzieć więcej? Zajrzyj na nasze forum:

http://forum.mi.com.pl

Rys. 1. G³ówny pojemnik

Rys. 2. Nag³ówek, stopka, lewa i prawa kolumna

INTERNET.listopad.2005

C

M

Y

K

Najpierw przygotowujemy menu pionowe, a nastêpnie menu pozio-

me. Opracowuj¹c menu poziome natrafimy na pewien problem. Wy-
konanie menu poziomego wymaga usuniêcia bia³ych znaków (w tym
znaków z³amania wiersza) pomiêdzy elementami listy ul. Oczywiœcie
mo¿emy usun¹æ bia³e znaki z kodu HTML, jednak jest to bardzo nie-
wygodne, gdy¿ utrudnia dalsz¹ edycjê strony. Problem ten rozwi¹¿e-
my stosuj¹c szablony Smarty, w szczególnoœci funkcjê {strip}. Kod
menu poziomego umieszczamy w szablonie, który w ca³oœci jest objê-
ty funkcj¹ {strip}. Na pocz¹tku pliku umieszczamy znacznik Smar-
ty{strip}, a na koñcu – {/strip}. W ten sposób otrzymamy witrynê,
która w trybie edycji zawiera bia³e znaki (podzia³ na wiersze i wciêcia
u³atwiaj¹ce pracê z kodem HTML). Natomiast po przes³aniu do prze-
gl¹darki ta sama witryna jest ju¿ pozbawiona bia³ych znaków.

Dla u³atwienia oba menu przygotowujemy na osobnej pustej stro-

nie zawieraj¹cej ewentualnie jedn¹ sekcjê div. Gdy menu jest gotowe
i ma odpowiedni¹ szerokoœæ (wygl¹d i rozmiar sprawdzamy we
wszystkich przegl¹darkach!), wklejamy je w stronê z poprzedniego
kroku, po czym dokonujemy sprawdzenia otrzymanej witryny.

Strona otrzymana po dodaniu menu poziomego, menu pionowego

i obrazka jest widoczna na rysunku 4. Od tego kroku tworzona witryna
bêdzie ju¿ stosowa³a szablony Smarty.

Krok 5: nagłówek, stopka i treść strony

Koñcz¹c pracê nad witryn¹, dodajemy treœæ nag³ówka oraz stopkê
strony. Elementy te wymagaj¹ jedynie stylów modyfikuj¹cych atrybu-
ty czcionki. Ich rozmiar i po³o¿enie zosta³y ju¿ ustalone. W stopce
witryny mo¿emy umieœciæ hiper³¹cza do adresów http://valida-
tor.w3.org/check?uri=referer

oraz http://jigsaw.w3.org/css-validator/check/referer. Odno-

œniki takie umo¿liwi¹ szybkie sprawdzenie poprawnoœci kodu HTML
oraz CSS walidatorami W3C (oczywiœcie strona musi byæ uprzednio
opublikowana w internecie).

W miejscu przeznaczonym na treϾ witryny umieszczamy kilka

akapitów tekstu Lorem ipsum. Do tego stosujemy funkcjê {include}
szablonów Smarty:

{include file=”zawartosc.tpl”}

Dziêki temu umieszczenie odpowiedniej zawartoœci na stronie

bêdzie siê odbywa³o w pliku zawartosc.tpl, czyli bez jakichkolwiek
modyfikacji uk³adu witryny. Otrzymana witryna jest przedstawiona
na rys. 5.

W ten sposób otrzymamy witrynê, w której uk³ad strony jest

oddzielony fizycznie od treœci. Nale¿y odpowiednio zmodyfikowaæ
adresy URL zawarte w znacznikach <a href=””> menu poziomego
i pionowego oraz zorganizowaæ „wlewanie” zawartoœci witryny w sza-
blonie zawartosc.tpl.

Oczywiœcie treœæ zawarta w sekcji div#tresc nie mo¿e nigdy prze-

kroczyæ maksymalnej dopuszczalnej szerokoœci, czyli 577 pikseli.
Jeœli tak siê stanie, uk³ad witryny bêdzie siê rozje¿d¿a³. Do ustalenia
stylów elementów zawartych w sekcji div#tresc stosujemy selektory
typu potomek. Na przyk³ad akapity zawarte w treœci formatujemy
umieszczaj¹c w pliku stylów wpisy:

#tresc p {

...

}

Stosowanie selektorów typu potomek z jednej strony nie bêdzie

powodowa³o ¿adnych zmian w formatowaniu elementów odpowie-
dzialnych za uk³ad witryny, a z drugiej nie bêdzie wymaga³o umiesz-
czania w kodzie HTML wszechobecnych identyfikatorów. Powy¿szy
selektor #tresc p dotyczy jedynie elementów p zawartych wewn¹trz
sekcji div o identyfikatorze tresc:

Lorem ipsum to początkowe dwa wyrazy rozprawy napisanej
w starożytności przez Cycero. Rozprawa ta jest od ponad
500 lat stosowana przez drukarzy do sprawdzania krojów pism
i układu graficznego drukowanych publikacji. Powodem tego
jest fakt, że oglądanie tekstu w nieznanym języku pozwala się
skupić na jego wizualnych aspektach. Tekst w znanym języku
podświadomie zaczynamy czytać, co odrywa uwagę od jego
graficznych cech.
W środowisku twórców stron internetowych tekst Lorem ipsum
jest powszechnie stosowany jako wypełniacz szkieletów stron.
Więcej informacji oraz pełny tekst Lorem ipsum znajdziemy na
stronach Wikipedii http://pl.wikipedia.org/wiki/Lorem_ipsum
oraz pod adresami http://www.lipsum.com i http://www.lore−
mipsum.net.

praktyka

INTERNET.listopad.2005

112

NA CD

NEWSY

Z OK£ADKI

FIRMA

MAGAZYN

PROGRAMY

WEBMASTERING

Rys. 3. Podzia³ kolumny lewej i prawej

Rys. 4. Strona po dodaniu menu poziomego i pionowego

<div id=”tresc”>

<p>Lorem ipsum...</p>

</div>

Uwagi końcowe

Gotowa witryna jest przedstawiona na rys. 6. Opracowuj¹c kod witry-
ny warto od pocz¹tku dbaæ o jego przejrzystoœæ. Style dotycz¹ce
poszczególnych sekcji div komentujemy i umieszczamy w kolejnoœci
u³atwiaj¹cej póŸniejsz¹ edycjê. Na przyk³ad:

X

style ogólne,

X

style dotycz¹ce uk³adu (tj. sekcji div z listingu 2),

X

poszczególne fragmenty uk³adu (np. menu poziome,
menu pionowe),

X

pozosta³e.

Porz¹dkuj¹c style ka¿dego z selektorów CSS warto stosowaæ

raz zdefiniowan¹ kolejnoœæ atrybutów. Mo¿emy na przyk³ad
(taka kolejnoœæ jest stosowana w przyk³adach) na pocz¹tek prze-
nieœæ wpisy dotycz¹ce pude³ka i nadaæ im kolejnoœæ: margin,
border, padding, width, pozosta³e: np. float, clear (kolejnoœæ
margin, border, padding, width jest posortowana od zewnêtrzne-
go do wewnêtrznego atrybutu pude³ka). Natomiast wpisy doty-
cz¹ce kolorów umieszczamy jako ostatnie. W œrodkowej czêœci,
grupujemy pozosta³e atrybuty (np. czcionki, czy atrybuty doty-
cz¹ce tekstu).

Ponadto ju¿ na samym pocz¹tku pracy nad witryn¹ nale¿y zadbaæ

o kolejnoϾ sekcji div w kodzie HTML. KolejnoϾ ta jest istotna dla
przegl¹darek nie interpretuj¹cych stylów. W omawianym przyk³adzie
witryna bêdzie zawiera³a kolejno:

X

nag³ówek,

X

obraz tytu³owy,

X

menu pionowe,

X

menu poziome,

X

treϾ

X

stopkê.

Zmiana kolejnoœci elementów div decyduj¹cych o uk³adzie witryny

w skoñczonym projekcie jest bardzo pracoch³onna, gdy¿ poci¹ga za
sob¹ w³aœciwie nowy projekt uk³adu.

Na zakoñczenie dodajmy, ¿e nawet najnowsze wersje przegl¹darek

nie s¹ do koñca zgodne ze sob¹ i zawieraj¹ pewne b³êdy. W omawia-
nym przyk³adzie b³êdy takie wyst¹pi³y w dwóch miejscach. Po pierw-
sze przy wyznaczaniu minimalnej wysokoœci pojemnika div#tresc
przeznaczonego na treœæ, po drugie w przypadku szerokoœci akapitów
zawartych w treœci.

WysokoϾ sekcji o identyfikatorze treϾ ustalamy sztucznie na

400 pikseli:

#tresc {

height : 400px;

}

Podany atrybut jest interpretowany przez przegl¹darkê IE jako co

najmniej 400 pikseli, zaœ przez trzy pozosta³e jako dok³adnie 400 pik-
seli. Poniewa¿ IE nie interpretuje selektorów typu dziecko, które za-
wieraj¹ znak >, zatem wszystkie przegl¹darki poza IE informujemy
jeszcze, ¿e tak naprawdê wysokoœæ sekcji div#tresc wynosi co naj-
mniej 400 pikseli:

body>#strona>#kolumnaPrawa>#tresc {

height : auto;
min-height : 400px;

}

W taki oto skomplikowany sposób walczymy z trzema b³êdami IE:

b³êdn¹ interpretacj¹ atrybutów height i min-height oraz brakiem inter-
pretacji selektora dziecko.

Drugi b³¹d, b³êdnie wyznaczan¹ szerokoœæ akapitu, poprawiamy

dodaj¹c wpis:

#tresc p {

width : 470px;

}

który w przypadku pozosta³ych przegl¹darek jest zbêdny.

Niestety tak wykonana witryna nie wygl¹da poprawnie w przegl¹-

darkach drugiej generacji.

n

Ćwiczenia przedstawione w artykule są dostępne na stronie domowej
autora pod adresem

http://www.gajdaw.pl.

praktyka

INTERNET.listopad.2005

113

WEBMASTERING

PROGRAMY

MAGAZYN

FIRMA

Z OK£ADKI

NEWSY

NA CD

C

M

Y

K

Rys. 5. Szablon strony wype³niony tekstem Lorem ipsum

Rys. 6. Strona g³ówna witryny http://gwz.gajdaw.pl