Gimp: tworzenie szablonów stron WWW cz. 7

Szablon i jego układ

Gotowy szablon jest przedstawiony na rysunku. Jest to szablon stałej szerokości podzielony na trzy kolumny: lewą, środkową i prawą. Cały szablon ma szerokość 1020 pikseli, przy czym 980 pikseli przypada na zawartość, a 40 na pionowe pasy tła strony. Z 980 pikseli 900 przypada na treść, a 80 na dopełnienie.

Wreszcie 900 pikseli treści jest podzielone na trzy kolumny:

• lewą o szerokości 180 pikseli,
• prawą o szerokości 180 pikseli,
• środkową o szerokości 420 pikseli i dopełnieniu 120 pikseli.

Dwa symbole wypunktowania wykorzystane w menu pochodzą z bezpłatnego zestawu ikon o nazwie Fam Fam Fam - http://www.famfamfam.com/lab/i....

Układ szablonu

Układ jest wykonany przy użyciu pojemników div. Całość jest zawarta w pojemniku o iden-tyfikatorze #wrapper. Pojemnik div#wrapper jest dalej podzielony na logo (element h1), panel lewy (element div#panell), panel środkowy (element div#panelc) oraz panel prawy (element div#panelr). W panelu środkowym występuje na dole stopka (element div#footer):

[+]

[-]

 

 

HTML

1. <div id="wrapper">
2. <h1 id="logo">logo</h1>
3. <div id="panel">left<br class="clearing" /></div>
4. <div id="panelc">center
5.   <div id="footer">footer</div><br class="clearing" /></div>
6.   <div id="panelr">right<br class="clearing" /></div>
7. <br class="clearing" />
8. </div>

Listing zwinięty - 8 linii

Element div#wrapper ma stałą szerokość i jest wyśrodkowany na stronie:

[+]

[-]

 

 

CSS

1. #wrapper {
2.   width: 900px;
3.   margin: 0 auto;
4. }

Listing zwinięty - 4 linii

Elementy div#panell oraz div#panelr mają szerokość po 180 pikseli i przylegają do lewej oraz do prawej krawędzi:

[+]

[-]

 

 

CSS

1. #panell {
2.   float: left;
3.   width: 180px;
4. }
5. #panelr {
6.   float: right;
7.   width: 180px;
8. }

Listing zwinięty - 8 linii

Element div#panelc ma szerokość 420 pikseli, dopełnienie lewe i prawe po 60 pikseli i przylega do lewej krawędzi:

[+]

[-]

 

 

CSS

1. #panelc {
2.   float: left;
3.   width: 420px;
4.   padding: 0 60px;
5. }

Listing zwinięty - 5 linii

Zarys układu strony jest widoczny na rysunku.

1. Szablon i jego układ
2. Kod XHTML i CSS menu
3. Rysunek XCF obłego menu
4. Wklejanie ikon