Webmastering w przykładach: www.willaewa.pl

Wykorzystane języki oraz narzędzia

Witryna jest wykonana w językach: XHTML 1.0 strict, CSS2, JavaScript. Polskie znaki diakrytyczne są zakodowane w standardzie utf-8.

Testy poprawności witryny wykonałem wykorzystując nagłówek HTTP:

 

 

 

header('Content-Type: application/ xhtml+xml');

co gwarantuje składniową zgodność kodu XHTML ze standardami.

Szablon witryny został narysowany w programie GIMP. Plik XCF zamieniłem na witrynę WWW, krojąc go ręcznie przy użyciu opcji Edycja > Kopiuj widoczne oraz Edycja > Wklej jako nowy. Wymiana zawartości witryny jest oprogramowana w PHP z wykorzystaniem szablonów Smarty.

Rys. 1. Witryna po wybraniu opcji pokoje Pracę nad witryną rozpocząłem od wykonania serii fotografii pensjonatu Willa Ewa. Łącznie wykonałem około 200 fotografii, z czego ostatecznie wybrałem 51.

Funkcjonalność witryny

Witryna pensjonatu Willa Ewa jest wykonana w oparciu o układ stałej szerokości. Jej wygląd nie ulega zmianie wraz ze zmianą szerokości okna przeglądarki. Szerokość szablonu wynosi 760 pikseli, dzięki czemu na stronie nigdy nie pojawia się poziomy pasek przewijania (przy rozdzielczości od 800 x 600 wzwyż).

Witryna jest wyświetlana w trybie standardów przez wszystkie nowe przeglądarki, czyli IE6, Firefox 1.5, Opera 7, Netscape 8, od podanych wersji wzwyż.

Menu główne ma siedem opcji: o nas, adres, pokoje, łazienki, posesja, budynek oraz galeria. Zmiana opcji menu powoduje wyświetlenie innej treści, zaś sam szablon witryny pozostaje ten sam.

Menu główne wykorzystuje technikę rollover. Każda z opcji reaguje na wskaźnik myszki.

Rys. 2. Galeria fotografii Ostatnia z opcji menu głównego, galeria, przenosi do wystawy fotografii prezentujących wygląd pensjonatu. Galeria jest zorganizowana w postaci serii fotografii, po których wędrujemy przy użyciu strzałek, co ilustruje rys. 2.

Skórka witryny

Układ: XCF

Skórkę witryny wykonałem programem GIMP. Zasadniczymi elementami skórki są:

• obły, niebieski prostokąt,
• zdjęcie pensjonatu wtopione w obły prostokąt,
• niebieski pas uwypuklający opcje menu,
• napisy.

Oczywiście każdy z tych elementów należy umieścić na osobnej warstwie. Kolor wypełnienia niebieskiego, obłego prostokąta należy dobrać na postawie koloru nieba wtapianej fotografii. Ponadto opcje menu należy wykonać - na potrzeby efektu rollover - w dwóch wariantach. Przygotowując układ zadbałem, by szerokość niebieskiego, obłego prostokąta wynosiła 760 pikseli.

Poszczególne elementy skórki są przedstawione na rys. 3, 4, 5 oraz 6.

Rys. 3. Zaokrąglony prostokąt o kolorze nieba

Rys. 4. Fotografia, z której bierzemy kolor prostokąta

Rys. 5. Pas uwypuklający menu

Rys. 6. Napisy