Szablon ten prezentuje menu z efektem rollover oraz wskaźnikiem wybranej opcji. Oba efekty są wykonane w CSS z wykorzystaniem kafelkowania (ang. sprites). Wskaźnik wybranej opcji wymaga dodania do kodu XHTML jednego elementu span dla każdej opcji oraz identyfikatora elementu body.
{tlo_1}
Szablon jest przedstawiony na rysunku obok. Wszystkie elementy graficzne są dołączone w stylach.
{/tlo}
{tlo_0}
Po wyłączeniu CSS szablon zawiera wyłącznie tekst.
{/tlo}
{tlo_1}
Menu stosuje efekt rollover w połączeniu ze wskaźnikiem wybranej opcji. Efekt rollover polega na delikatnym podświetleniu tekstu opcji\\.
{/tlo}
{tlo_0}
Natomiast wskaźnikiem wybranej pozycji jest strzałka umieszczona poniżej etykiet opcji menu.
{/tlo}
{tlo_1}
W treści strony został użyty jeden przycisk z etykietą learn more. Przycisk ten również stosuje efekt rollover. Po wskazaniu przycisku wskaźnikiem myszy, tło napisu staje się ciemniejsze.
{/tlo}
Praca nad szablonem została podzielona na pięć etapów:
- rysowanie pliku XCF,
- krojenie pliku XCF na mniejsze kawałki,
- sklejanie kawałków w jeden obraz,
- opracowanie kodu XHTML,
- opracowanie kodu CSS.
Zasoby
{tlo_1}
W szablonie wykorzystane zostały cztery ikony dostępne pod adresem http://www.ganato.com, jedna ikona z zestawu KNeu Icon Theme (http://www.opentux.com.ar/lordcrow/packs/kneu.html) oraz czcionka Nickelodeon NF ze strony http://www.1001freefonts.com. Użyte ikony oraz krój czcionki są przedstawione na rysunku.
{/tlo}{tlo_1}
Pracę nad szablonem rozpoczynamy od narysowania odpowiedniego obrazu w programie GIMP. Otrzymamy obraz taki jak na rysunku.
{/tlo}
Układ
{tlo_0}
Tworzymy nowy obraz, dodajemy prowadnice dzielące szablon na trzy duże prostokąty, po czym wypełniamy prostokąty. Wszystkie trzy prostokąty są wypełnione delikatnym gradientem liniowym. Dolny prostokąt jest wypełniony w taki sposób, by gradient obejmował wyłącznie jego górną część. W dolnej części dolnego prostokąta kolor jest jednolity.
{/tlo}
{tlo_1}
Dodajemy do obrazu białe linie o grubości jednego piksela. Są to prostokąty wypełnione białym kolorem. Linie te umieszczamy na granicy prostokątów. Zmniejszamy krycie białych linii do 40.
{/tlo}
Logo
{tlo_0}
Dodajemy do obrazu duży, ciemny napis Lorem Ipsum wykonany czcionką Nickelodeon NF.
{/tlo}
{tlo_1}
Dodajemy drugi identyczny napis koloru białego. Napis biały przesuwamy względem napisu ciemnego o jeden piksel.
{/tlo}
{tlo_0}
Dodajemy poświatę napisu:
•zaznaczamy biały napis (Kanał alfa na zaznaczenie),
•powiększamy zaznaczenie (Zaznaczenie→ Powiększ) o kilka pikseli,
•zmiękczamy zaznaczenie (Zaznaczenie → Zmiękcz) promieniem kilkupikselowym,
•bieżące zaznaczenie kopiujemy z białego tła i wklejamy na nową warstwę.
{/tlo}
Menu
{tlo_1}
Wklejamy do obrazu cztery ikony.
{/tlo}
{tlo_0}
Dodajemy cztery ciemne etykiety opcji menu (czcionka Nickelodeon NF).
{/tlo}
{tlo_1}
Dodajemy dwie jednopikselowe, znikające linie.
{/tlo}
{tlo_0}
Umieszczamy w obrazie cztery wskaźniki opcji. Jest to cyfra 5 napisana krojem Webdings.
{/tlo}
{tlo_1}
Dla każdej opcji menu wykonujemy efekt rollover: dodajemy drugi identyczny napis o jaśniejszym kolorze oraz poświatę taką jak w logo.
{/tlo}
Przycisk learn more
{tlo_1}
Przycisk learn more składa się z następujących elementów:
•białego prostokąta o zaokrąglonych narożnikach,. mniejszego o jeden piksel prostokąta wypełnionego gradientem,
•napisu.
{/tlo}
Warstwa z prostokątem wypełnionym gradientem ma zmniejszone krycie. Do efektu rollover zwiększamy krycie warstwy z gradientem lub tworzymy jej duplikat.
Dodatki
{tlo_1}
Na zakończenie w jednolitym obszarze przeznaczonym na treść dodajemy poziomą, znikającą na końcach ciemną linię oraz wklejamy ikonę button_ok.png z zestawu KNeu. Przy użyciu opcji Kolory → Barwienie zmieniamy kolorystykę ikony.
{/tlo}
Krojenie
Pierwszy etap krojenia
W drugim etapie pracy nad szablonem obraz XCF należy pokroić na mniejsze kawałki. Najpierw wycinamy obrazy przeznaczone na tło całej strony, logo oraz menu:
- bkg-body.png
- logo.png
- menu.png
{tlo_1}
Następnie obraz bkg-body.png odbijamy i przycinamy, by uzyskać tło stopki: bkg-footer.png.
Obrazy otrzymane po pierwszym krojeniu są przedstawione na rysunku.
{/tlo}
Drugi etap krojenia
Wycinamy z obrazu opcje menu w stanie aktywnym, tj. po naprowadzeniu wskaźnika myszy.
Otrzymamy cztery obrazy:
- home-on.png
- kontakt-on.png
- services-on.png
- search-on.png
{tlo_1}
Na tych obrazach powinna być widoczna poświata. Wycinamy także jeden obraz przestawiający wskaźnik wybranej opcji. Pięć obrazów, które posłużą do wykonania efektu rollover oraz wskaźnika opcji, zostało przedstawionych na rysunku.
{/tlo}
Trzeci etap krojenia
{tlo_0}
W ostatnim etapie krojenia wycinamy z pliku XCF przycisk learn more (w dwóch stanach: aktywnym i nieaktywnym), poziomą linię oraz ikonę OK. Cztery ostatnie obrazy otrzymane w wyniku krojenia pliku XCF są przedstawione na rysunku.
{/tlo}
Kafelkowanie (ang. sprites)
W trzecim kroku niektóre obrazy otrzymane po pokrojeniu pliku XCF należy złączyć w jeden duży obraz.
{tlo_1}
Do nowego, pustego obrazu wklejamy kolejno: logo, menu, cztery opcje w stanie aktywnym, wskaźnik wybranej opcji oraz przycisk learn more (w dwóch stanach). Otrzymamy obraz widoczny na rysunku.
{/tlo}
Wklejone obrazy dosuwamy w taki sposób, by ściśle przylegały, nie nachodząc na siebie. Wykorzystujemy do tego prowadnice.
Pomogą operacje:
- Warstwa → Przezroczystość → Kanał alfa na zaznaczenie,
- Obraz → Prowadnice → Nowa prowadnica z zaznaczenia.
{tlo_1}
Otrzymamy obraz widoczny na rysunku.
Przygotowany obraz tak przycinamy, by nie zawierał białego tła, po czym zapisujemy do pliku sprite.png.
{/tlo}
{tlo_0}
Na zakończenie zapisujemy współrzędne punktów.
{/tlo}
Punkty te będą miały współrzędne:
- A(476,0)
- B(0,141)
- C(92,141)
- D(213,141)
- E(350,141)
- F(468,141)
- G(468,209)
- H(655,209)
Pojawią się one w arkuszach CSS.
Szablon został podzielony na trzy fragmenty: nagłówek, treść oraz stopkę, przy czym nagłówek i treść znajdują się w pojemniku, a stopka poniżej pojemnika:
...
...
W nagłówku występuje logo (h1) wykonane przy użyciu efektu FIR oraz menu. Każda opcja jest ozdobiona innym obrazem. To wymusza nadanie identyfikatorów id elementom li. Dodatkowo wskaźnik wybranej opcji będzie wykonany jako tło elementu span (efekt FIR) znajdującego się wewnątrz opcji menu:
Treść witryny została podzielona na dwie kolumny: lewą i prawą. Każda z nich zawiera nagłówek, listę opcji oraz przycisk learn more:
Wskaźnik wybranej opcji jest ustalany na podstawie identyfikatora elementu body. Jeśli wybrana jest pierwsza opcja, to element body przyjmuje identyfikator home:
...
Na pozostałych podstronach stosowane są identyfikatory identyczne jak nazwy opcji:
Zarys kodu XHTML jest przedstawiony na listingu 1.
Układ szablonu
Układ szablonu jest ustalony stylami elementów body,{stala} #wrapper{/stala}, {stala}#header{/stala}, {stala}#content{/stala}, {stala}#left{/stala}, {stala}#right{/stala} oraz {stala}#footer{/stala} przedstawionymi na listingu 2.
html, body {
background: #c7d7d7 url(\'img/bkg-body.png\') repeat-x;
margin: 0;
padding: 0;
font-family: Georgia, serif;
font-size: medium;
}
#wrapper {
width: 980px;
margin: 0 auto;
padding: 0;
margin-bottom: 100px;
}
#header {
position: relative;
width: 980px;
height: 240px;
padding: 0;
margin: 0;
}
#content {
padding: 0px;
line-height: 200%;
font-size: 90%;
}
#left {
width: 400px;
float: left;
line-height: 260%;
}
#right {
width: 400px;
float: right;
line-height: 260%;
}
#footer {
width: 100%;
background: url(\'img/bkg-footer.png\') repeat-x;
height: 30px;
clear: both;
text-align: center;
font-size: 70%;
padding-top: 92px;
padding-bottom: 0;
letter-spacing: 0.4em;
color: #0d607b;
}
Logo
Logo jest elementem h1, którego tekst ukrywamy efektem FIR:
#header h1 {
position: absolute;
width: 476px;
height: 140px;
top: 0;
left: 0;
background: url(\'img/sprite.png\') 0 0 no-repeat;
margin: 0;
padding: 0;
line-height: 0;
text-indent: -2000em;
}
Menu
Menu to lista ul. Jej style są następujące:
#header ul {
position: absolute;
width: 468px;
height: 141px;
top: 0;
left: 570px;
background: url(\'img/sprite.png\') -476px 0 no-repeat;
margin: 0;
padding: 0;
line-height: 0;
}
#header ul li {
list-style-type: none;
position: absolute;
top: 0;
}
#header ul li a {
display: block;
text-indent: -2000em;
}
Rollover
Efekt rollover opcji menu jest wykonany indywidualnie dla każdej opcji. Wykorzystujemy identyfikatory id elementów li. W stylach CSS należy wpisać wysokość oraz szerokość każdej opcji (są to szerokości i wysokości plików home-on.png, kontakt-on.png, services-on. png oraz search-on.png) oraz przesunięcie opcji względem całego menu. Dodatkowo tło podane w selektorze hover pochodzi z pliku spirte.png. Należy je przesunąć o wartości odczytane z ostatniego rysunku.
Na przykład opcja contact, w XHTML oznaczona identyfikatorem #o2, jest wykonana na podstawie obrazu kontakt-on.png o wymiarach 121×115 pikseli. Jej punktem zaczepienia jest punkt C o współrzędnych C (92,141). Poprzednia opcja (home, identyfikator #o1) ma szerokość 92 piksele, zatem przesunięcie drugiej opcji wyniesie 92. W ten sposób dla drugiej opcji otrzymamy następujące style CSS:
#header #o2 {
/*
* wysokość i szerokość
* obrazu kontakt-on.png
*/
width: 121px;
height: 115px;
/* szerokość opcji #o1 */
left: 92px;
}
#header #o2 a {
width: 121px;
height: 115px;
left: 92px;
}
#header #o2 a:hover {
/*
* współrzędne punktu C w rysunku 25
*/
background: url(\'img/sprite.png\') -92px -141px no-repeat;
}
Wskaźnik wybranej opcji
Wskaźnik wybranej opcji jest tłem elementu span. Należy więc ustalić wymiary i położenie elementów span:
#header ul li a span {
display: block;
width: 92px;
height: 26px;
margin: 115px auto 0 auto;
}
oraz nadać im odpowiednie tła:
#home #o1 span {
background: url(\'img/sprite.png\') -468px -141px no-repeat;
}
#contact #o2 span {
background: url(\'img/sprite.png\') -468px -141px no-repeat;
}
