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

(158 KB) Pobierz
makieta.qxd
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:
l
podstawowa znajomoϾ HTML-a
l
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>
<div id=”pojemnik”>
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”
92
INTERNET.maj.2006
www.mi.com.pl
HTML: uk³ad sta³ej szerokoœci
27956089.011.png 27956089.012.png 27956089.013.png 27956089.014.png
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.
<div id=”pojemnik”>
<img src=”one-step.png” alt=”One step” />
<div id=”menu”>
<ul>
<li><a href=”index.html”>LOREM</a></li>
<li><a href=”index.html”>IPSUM</a></li>
</ul>
</div>
<div id=”tekst”>
Lorem ipsum...
</div>
<img src=”one-step-dol.png” alt=”” />
</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 id=”stopka”>
&copy;2006 Rze¿ucha...
</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.
<div id=”pojemnik”>
<div id=”naglowek”></div>
<div id=”menu”>
<ul>
<li><a href=”index.html”>LOREM</a></li>
<li><a href=”index.html”>IPSUM</a></li>
</ul>
</div>
<div id=”tekst”>
Lorem ipsum...
<img class=”il” src=”d1.png” alt=”” />
Curabitur non turpis...
<img class=”ip” src=”d2.png” alt=”” />
}
#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.
n
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
93
27956089.001.png 27956089.002.png 27956089.003.png 27956089.004.png 27956089.005.png 27956089.006.png 27956089.007.png 27956089.008.png 27956089.009.png 27956089.010.png
Zgłoś jeśli naruszono regulamin