HTML: układ stałej szerokości. 05-2006.pdf

HTML

HTML: uk³ad sta³ej szerokoœci

Układ o stałej szerokoœci znajduje zastoso-

wanie m.in. w przypadku witryn ozdobio-

nych szerokim graficznym banerem.

Sztywne ustalenie szerokoœci gwarantuje,

¿e przy zmianie wielkoœci okna przegl¹dar-

ki poszczególne elementy witryny nie bêd¹

siê rozje¿d¿ały. Układ taki mo¿emy przygo-

towaæ wykorzystuj¹c jeden element DIV

i odpowiednie style.

W³odzimierz Gajda

CZEGO SIÊ DOWIESZ Z TEGO ARTYKU£U:

l w jaki sposób przygotowaæ układ o stałej szerokoœci

WYMAGANA WIEDZA:

podstawowa znajomoœæ HTML-a

podstawowa znajomoœæ CSS

Kolumna sta³ej szerokoœci wyœrodkowana na stronie

Pierwszym etapem pracy nad układem o stałej szerokoœci jest przygotowa-

nie głównego pojemnika. Pojemnikiem tym bêdzie oczywiœcie element div.

Treœæ strony bêdzie zawarta wewn¹trz tego elementu. Kod HTML takiego

rozwi¹zania przyjmuje bardzo lakoniczn¹ postaæ:

<body>

Lorem ipsum...

</div>

</body>

Wewn¹trz sekcji div mo¿emy umieœciæ – oprócz tekstów – równie¿ inne

znaczniki HTML. W ten sposób mo¿emy wprowadziæ dalszy podział poziomy

(np. na nagłówek, tekst i stopkê), pionowy (np. na kilka kolumn tekstu) lub

mieszany (tj. nagłówek, menu, kilka kolumn tekstu, stopka).

Style CSS

Szerokoœæ układu oraz jego poło¿enie na œrodku strony definiujemy w arku-

szach stylów. Za wyœrodkowanie elementu div odpowiada atrybut margin:

margin : 0px auto;

Dla potrzeb Internet Explorera 5 warto doł¹czyæ atrybut text-align przy

opisie elementu body. Wówczas układ pozostanie poprawny równie¿ w star-

szych wersjach IE. Pełne style formatuj¹ce kolumnê tekstu s¹ nastêpuj¹ce:

body {

margin : 0px;

padding : 0px;

text-align : center;

}

#pojemnik {

margin : 0px auto;

padding : 0px;

width : 800px;

‚ Rys. 1. Kolumna tekstu wyœrodkowana na stronie

}

Tak przygotowany układ po wypełnieniu tekstem „Lorem ipsum” i zmianie

tła został przedstawiony na rys. 1.

‚ Rys. 2. Witryna pt. „One step”

INTERNET.maj.2006

www.mi.com.pl

HTML: uk³ad sta³ej szerokoœci

Wszystkie przykłady opisane w tym artykule

s¹ na płycie CD oraz w naszym serwisie

internetowym: http://www.mi.com.pl .

Podzia³ g³ównego pojemnika

Jako przykład zastosowania takiego układu opiszê dwie witryny: „One

step” oraz „Rze¿ucha”.

Nag³ówek, stopka, menu pionowe i zawartoœæ

Witryna pt. „One step” dzieli główny pojemnik na cztery obszary: nagłó-

wek, stopkê menu oraz tekst. Podział ten jest osi¹gniêty przez wstawienie

do głównego pojemnika dwóch obrazów (nagłówka i stopki) oraz dwóch

sekcji div o identyfikatorach menu oraz tekst.

<ul>

<li><a href=”index.html”>LOREM</a></li>

<li><a href=”index.html”>IPSUM</a></li>

</ul>

</div>

Lorem ipsum...

</div>

</div>

Arkusz stylów nale¿y wzbogaciæ o opis dwóch sekcji div:

#menu {

float : left;

margin-left : 10px;

margin-right : 10px;

‚ Rys. 3. Witryna pt. „Rze¿ucha”

}

#tekst {

float : right;

width : 520px;

padding-right : 30px;

padding-left : 30px;

text-align : justify;

border-left : 1px dashed black;

</div>

</div>

Arkusze stylów zawieraj¹ obrazy tła nagłówka i stopki oraz centruj¹ menu:

#naglowek {

border-bottom : 1px solid black;

height : 100px;

background : url(’rzezucha.png’);

}

oraz menu w postaci listy wypunktowanej:

#menu ul {

list-style-type : none;

}

#menu {

text-align : center;

}

Gotowa witryna pt. „One step” została przedstawiona na rys. 2.

}

#tekst {

padding : 0px;

padding-bottom : 20px;

Nag³ówek, stopka, menu poziome i zawartoœæ

Na witrynie pt. „Rze¿ucha”, w miejsce obrazów nagłówka i stopki wyko-

rzystałem elementy div z ustalonymi obrazami tła. Rozwi¹zanie takie ró¿ni

siê od poprzedniego tym, ¿e nad tak wstawionymi obrazami mo¿emy w łat-

wy sposób umieœciæ tekst (na witrynie „Rze¿ucha” stopka zawiera infor-

macje o prawach autorskich), a ponadto wył¹czenie arkuszy stylów powo-

duje usuniêcie banerów.

<ul>

<li><a href=”index.html”>LOREM</a></li>

<li><a href=”index.html”>IPSUM</a></li>

</ul>

</div>

Lorem ipsum...

Curabitur non turpis...

}

#stopka {

height : 100px;

background : url(’rzezucha-dol.png’);

text-align : center;

font-size : 80%;

border-top : 1px solid black;

}

Menu jest wykonane z wykorzystaniem identycznej jak poprzednio listy

wypunktowanej. Zamianê menu pionowego w poziome osi¹gniemy stylami:

#menu ul {

list-style-type : none;

}

#menu li {

display : inline;

}

Gotowa witryna pt. „Rze¿ucha” jest przedstawiona na rys. 3.

Artykuł ten pomaga w pełni zrozumieæ informacje zawarte

w kolejnym odcinku kursu „GIMP i webmastering“ (na str. 94).

INTERNET.maj.2006

www.mi.com.pl

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: