Opisywany szablon ma stałą szerokość. Wykorzystuje tzw. czyszczenie, które nadaje elementom pływającym odpowiednią wysokość. Ponadto w nagłówku, przy użyciu pozycjonowania względnie bezwzględnego, rozjaśniany jest fragment zdjęcia.

Szablon

Szablon widoczny na rys. 1 ma stałą szerokość 800 pikseli. Jest podzielony pionowo na cztery sekcje: zakładki i formularz wyszukiwania, logo, zawartość oraz stopkę. Część zasadnicza, zawartość witryny, jest podzielona na trzy kolumny: menu kontekstowe z lewej strony, tekst w kolumnie środkowej oraz formularz do logowania i gorące tematy z prawej strony.

W szablonie tym wykorzystano fotografię przedstawioną na rys. 2.

GIMP

Etap pierwszy: ilustracja tytułowa

W celu wykonania ilustracji tytułowej szablonu otwieramy plik foto.jpg w programie GIMP. Następnie korzystając z narzędzia Kadrowanie lub Zmiana wymiarów obrazu (skrót: Shift+C) wycinamy poziomy pas.

Wycięty pas skalujemy do wysokości 200 pikseli, po czym wycinamy z niego narzędziem Kadrowanie lub Zmiana wymiarów obrazu prostokąt o wymiarach 760 × 200 pikseli. Wycięty fragment zapisujemy w pliku o nazwie logo.jpg.

Etap drugi: rozjaśnianie fragmentu

Nad ilustracją logo.jpg będzie umieszczony tekst. W celu zwiększenia czytelności tekstu fragment zdjęcia leżący pod tekstem należy rozjaśnić. Otwieramy zdjęcie logo.jpg, po czym dodajemy cztery prowadnice, które wyznaczą położenie prostokąta zawierającego tekst. Zapamiętujemy współrzędne górnej oraz lewej prowadnicy (na przedstawionym rysunku prowadnice lewa, górna i dolna leżą 30 pikseli od krawędzi obrazu). Obraz z dodanymi prowadnicami zapisujemy do pliku wycinanie-fragmentu.xcf.

Następnie zaznaczamy prostokąt wyznaczony przez prowadnice. Prostokąt kopiujemy i wklejamy jako nowy obraz. Obraz ten zapisujemy pod nazwą fragment.xcf.

W obrazie fragment.xcf dodajemy białą warstwę przysłaniającą zdjęcie. Zmniejszamy krycie białej warstwy do 50. Otrzymany obraz zapisujemy pod nazwą fragment.jpg.

Przechodzimy do modyfikacji wyglądu obrazu tytułowego. Ustalamy wymiary i nadajemy tło elementu {stala}#logo{/stala}:

#logo {
   width: 758px;
   height: 198px;
   background: url(img/logo.jpg);
   border: 1px solid black;
   position: relative;
}

po czym ustalamy położenie fragmentu i również przypisujemy mu tło:

#fragment {
   width: 200px;
   height: 120px;
   background: url(img/fragment.jpg);
   left: 30px;
   top: 30px;
   padding: 10px;
   position: absolute;
}

Podane wymiary 220×140 (szerokość: 220 = 200 + 2 × 10, wysokość: 140 = 120 + 2 × 10) są wymiarami obrazu fragment.jpg. Współrzędne 30×30 są położeniem prowadnic wykorzystanych do wycięcia obrazu fragment.jpg.

Zwróćmy uwagę na wpisy position w elementach {stala}#logo{/stala} oraz {stala}#fragment{/stala}. Zapewniają one poprawne pozycjonowanie fragmentu fragment.jpg wewnątrz obrazu logo.jpg. Jest to tak zwane pozycjonowanie względnie bezwzględne. Bez względu na położenie elementu {stala}#logo{/stala} w układzie strony element {stala}#fragment{/stala} jest pozycjonowany względem lewego górnego narożnika elementu {stala}#logo{/stala}. Po przesunięciu elementu {stala}#logo{/stala} w inne miejsce, element {stala}#fragment{/stala} zostanie umieszczony w odpowiednim miejscu.

Element {stala}#content{/stala} nie zawiera żadnych stylów, zaś style elementu {stala}#footer{/stala} nie modyfikują położenia elementu.

Podział pionowy jest dokonany stylami elementów {stala}#menucontext{/stala}, {stala}#text{/stala} oraz {stala}#info{/stala}. Element {stala}#menucontext{/stala} jest dosunięty do lewej krawędzi i ma szerokość 140 pikseli:

#menucontext {
   width: 140px;
   float: left;
}

Element {stala}#text{/stala} ma szerokość 462 pikseli (460 = 420 + 2 × 20 + 2 × 1) i również jest dosunięty do lewej:

#text {
   width: 420px;
   float: left;
   border-right: 1px ...;
   border-left: 1px ...;
   padding: 0 20px;
}

Natomiast element {stala}#info{/stala} ma szerokość 140 pikseli i jest dosunięty do prawej:

#info {
   width: 140px;
   float: right;
}

Dwa elementy:

z listingu 1 wymuszają wysokość zawierających je pojemników. Pierwszy z nich jest konieczny ze względu na to, że element {stala}#tabs{/stala} jest dosunięty do lewej (wszystkie elementy {stala}li{/stala} mają właściwość {stala}float: left{/stala}) zaś element {stala}#search{/stala} jest dosunięty do prawej (ma cechę {stala}float: right{/stala}). Bez elementu {stala}br{/stala} logo występujące poniżej {stala}#tabs{/stala} oraz {stala}#search{/stala} zostanie przesunięte go góry, gdyż \”pływające\” {stala}#tabs{/stala} oraz {stala}#search{/stala} nie będą generowały żadnej wysokości (efekt ten jest widoczny w Firefoksie, nie jest widoczny w IE).

Drugi element {stala}br{/stala} jest konieczny, ze względu na właściwość {stala}float{/stala} elementów {stala}#menucontext{/stala}, {stala}#text{/stala}, {stala}#info{/stala}. Elementy {stala}#menucontext{/stala}, {stala}#text{/stala}, {stala}#info{/stala} nie generują wysokości, przez co stopka strony zostanie przesunięta do góry i przysłoni fragment tekstu (efekt ten jest widoczny zarówno w Firefoksie, jak i IE). Element br wymusza umieszczenie stopki poniżej najniższego z trzech elementów: {stala}#menucontext{/stala}, {stala}#text{/stala}, {stala}#info{/stala}.

Elementy {stala}br{/stala} klasy {stala}clear{/stala} mają styl:

br.clear {
   clear: both;
   line-height: 0;
   height: 0;
}

dzięki czemu ich wysokość wynosi 0 i wypadają one poniżej wszystkich elementów pływających.

Etap trzeci: paskowane tła

Tworzymy nowy obraz o wymiarach 200 × 200 pikseli Dodajemy nową przezroczystą warstwę. Na warstwie tej wykonujemy filtr Filtry / Renderowanie / Deseń / Siatka. W parametrach filtru włączamy linie pionowe o grubości jednego piksela i odległości czterech pikseli. Linie poziome wyłączamy.

Warstwę z paskami obracamy o 45 stopni.

Powiększamy widok obrazu i dodajemy prowadnice. Prowadnice powinny obejmować fragment, który będzie można powielać w poziomie i w pionie.

Zaznaczamy fragment wyznaczony przez prowadnice. Na wszelki wypadek obraz z dodanymi prowadnicami i zaznaczonym fragmentem zapisujemy do pliku paski.xcf. Zaznaczony fragment kopiujemy i wklejamy jako nowy obraz.

W obrazie tym dodajemy warstwę koloru zielonego (zielone tło) oraz białego (biała zasłona). Usuwamy białe tło z wklejonych pasków. Służy do tego filtr Filtry / Kolory / Zamiana koloru w alfę. Otrzymany obraz zapisujemy do pliku tlo.xcf.

Zmniejszamy krycie białej zasłony do 50. Powinniśmy otrzymać paski na zielonym tle. Otrzymany obraz zapisujemy do pliku tlo.png.

Następnie zwiększamy krycie białej zasłony do 90 i blady obraz zapisujemy do pliku tlo2.png.

Otrzymane pliki

Powinniśmy otrzymać cztery pliki JPG/PNG:

• logo.jpg
• fragment.jpg
• tlo.png
• tlo2.png

oraz:

• wycinanie-fragmentu.xcf
• fragment.xcf
• paski.xcf
• tlo.xcf

Nie usuwamy plików XCF. W przypadku popełnienia błędów (np. zaznaczenia błędnego fragmentu podczas wycinania obróconych pasków) pliki XCF znacznie ułatwią wprowadzanie poprawek.

XHTML/CSS

HTML

Cały kod XHTML jest zawarty w pojemniku {stala}div#wrapper{/stala}. Obszar szablonu jest dalej podzielony poziomo oraz pionowo. Podział poziomy wyznaczają elementy:

• pierwszy pas: {stala}ul#tabs{/stala} oraz {stala}div#search{/stala}
• drugi pas: {stala}div#logo{/stala}
• trzeci pas: {stala}div#content{/stala}
• czwarty pas: {stala}div#footer{/stala}

Pionowy podział na trzy kolumny jest wykonany w obrębie elementu {stala}div#content{/stala}. Pionowe kolumny są zdefiniowane przez elementy:

• kolumna lewa: {stala}div#menucontext{/stala}
• kolumna środkowa: {stala}div#text{/stala}
• kolumna prawa: {stala}div#info{/stala}

Szkielet kodu XHTML jest przedstawiony na listingu 1. Zwróćmy uwagę na elementy:

Realizują one tzw. czyszczenie. Dzięki temu elementy pływające (czyli posiadające właściwość {stala}float{/stala}) będą miały nadaną wysokość.

Nagłówek witryny będzie zawierał poziome zdjęcie o wymiarach 760×200, a nad nim tytuł i krótki tekst. Tytuł i tekst umieszczamy wewnątrz elementu {stala}div#fragment{/stala}, dzięki czemu będziemy mogli rozjaśnić tło pod napisami. Do rozjaśnienia tła użyjemy obrazu fragment.jpg, przypisując go jako tło elementu {stala}div#fragment{/stala}. Kod XHTML nagłówka jest widoczny na listingu 2.

   

   
LOREM IPSUM
   
„Lorem ipsum..”
   

CSS

Pracę nad stylami szablonu rozpoczynamy od umiejscowienia pojemnika {stala}div#wrapper{/stala}: Nadajemy mu szerokość, dopełnienie, centrujemy na stronie i dodajemy tło:

#wrapper {
   width: 760px;
   margin: 0px auto;
   padding: 20px;
   background: url(img/tlo2.png);
}

Następnie modyfikujemy style elementu {stala}body{/stala}. Usuwamy marginesy i dopełnienie oraz dodajemy tło. Zwróćmy uwagę, że {stala}div#wrapper{/stala} otrzymał tło rozjaśnione (tlo2.png), a element {stala}body{/stala} tło ciemne (tlo.png):

body {
   margin: 0;
   padding: 0;
   background: url(img/tlo.png);
}

Następnie modyfikujemy wygląd zakładek. Usuwamy wypunktowanie, marginesy i dopełnienie:

#tabs {
   list-style-type: none;
   margin: 0;
   padding: 0;
}

Przesuwamy elementy listy do lewej strony:

#tabs li {
   float: left;
}

po czym modyfikujemy hiperłącza tak, by wypełniały całe elementy {stala}li{/stala} i nadajemy im odpowiednie wymiary i kolory:

#tabs li a {
   display: block;
   margin-right: 10px;
   padding: 2px 8px;
   background: rgb(46,103,0);
   color: white;
}