HTML układ stałej szerokości 05 2006

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

HTML:

uk³ad sta³ej szerokoœci

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;

}

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

”

i zmianie

tła został przedstawiony na rys. 1.

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

INTERNET.maj.2006

www.mi.com.pl

HTML

HTML:

uk³ad sta³ej szerokoœci

CZEGO SIÊ DOWIESZ Z TEGO ARTYKU£U:

w jaki sposób przygotować układ o stałej szerokości

WYMAGANA WIEDZA:

podstawowa znajomoœæ HTML-a

podstawowa znajomoœæ CSS

Rys. 1. Kolumna tekstu wyśrodkowana na stronie

Rys. 2. Witryna pt. „One step”

</div>
<div id=”stopka”>

</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’);

}
#menu {

text-align : center;

}
#tekst {

padding : 0px;
padding-bottom : 20px;

}
#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.

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

}
#tekst {

float : right;
width : 520px;
padding-right : 30px;
padding-left : 30px;
text-align : justify;
border-left : 1px dashed black;

}

oraz menu w postaci listy wypunktowanej:

#menu ul {

list-style-type : none;

}

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

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>
<div id=”tekst”>

Lorem ipsum...
<img class=”il” src=”d1.png” alt=”” />
Curabitur non turpis...
<img class=”ip” src=”d2.png” alt=”” />

INTERNET.maj.2006

www.mi.com.pl

Wszystkie przykłady opisane w tym artykule

są na płycie CD oraz w naszym serwisie

internetowym:

http://www.mi.com.pl

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

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

Rys. 3. Witryna pt. „Rzeżucha”

Wyszukiwarka

Podobne podstrony:
HTML zaawansowane możliwości tabel 05 2006
rynek kapitałowy 05 2006 YYKH5PTPKGRY4BNJOORGG4BATZ6HVFACSJQQZ5Y
finanse międzynarodowe w 11 05 2006 DRQ25QRXV3JYHFZSHXG4URPO2CIXQOVAD4VOUJQ
matura ustna polski 05 2006 32A6VN6JFW3ELOAX56BIT2QDN2W33LJ5EKKUFEY
REGION Wyk ad i 05 2006 r
kolokwia, ZPR k2 16.05.2006, K2
cz09 05 2006
spis zagadnie romantyzm 05 2006
Układ optyczny oka M Koziak 2006
prawo energetyczne 16 05 2006
HTML & PHP Kontrolki formularzy 05 2005
MW1 RX Fx 15 05 2006 DS PA PL F
Układ działa szerokopasmowo, Elektronika, Inne Elektroniczne Polskie
układ pokarmowy przed maturą 2006 wersja b, Biologia - testy liceum
wykłady, Układ limbiczny, 26 kwiecień 2006
Interna test ' 05 2006

więcej podobnych podstron