Plik XCF zamieniamy na szablon strony WWW krojąc go. Przygotowując kod HTML należy zwrócić uwagę na wygląd szablonu w kilku przeglądarkach, jego poprawność, pracę w trybie standardów (z uwzględnieniem błędu interpretacji szerokości pudełka przez IE5), style do druku, stałe wymiary obrazów oraz atrybuty alt i title.
ETAP 1
Krojenie pliku xcf
Wielowarstwowy obraz przygotowany w programie GIMP należy pokroić na wiele mniejszych plików w formacie PNG. W programie GIMP dodamy do obrazu prowadnice wyznaczające miejsca krojenia. Prowadnice takie są przedstawione na rys. 1.
Wykorzystując prowadnice pokroimy obraz na pięć fragmentów: tlo.png, naglowek-lewy.png, naglowek-prawy.png, tlo-tekst.png, tlo-stopka.png,
o wymiarach podanych na rys. 2. Do krojenia wykorzystamy dwie operacje dostępne w GIMPie:
Edycja ? Kopiuj widoczne oraz Edycja ? Wklej jako nowy.
Kod XHTML
Listing 1 przedstawia kod XHTML strony,
która wykorzystuje pokrojone obrazy. Cała strona jest zawarta w elemencie div o identyfikatorze pojemnik. Następnie pojemnik jest podzielony na nagłówek, treść i stopkę.
Natomiast element
o identyfikatorze nagłówek jest podzielony na naglowek-lewy oraz naglowek-prawy.
W kodzie strony wykorzystane są dwa obrazy: naglowek-lewy.png oraz naglowek-prawy.png. Pozostałe trzy (czyli tlo.png, tlo-tekst.png i tlo-stopka.png) będą użyte jako tło w stylach CSS.
W tak przygotowanym kodzie XHTML należy usunąć białe znaki otaczające obrazy. Do tego celu stosujemy funkcję strip szablonów Smarty. Zatem skórkę witryny od samego początku przygotowujemy z wykorzystaniem języka PHP i szablonów Smarty.
{strip}
![\"\"](\"img/naglowek-lewy.png\")
![\"\"](\"img/naglowek-prawy.png\")
Lorem ipsum...
©lorem ipsum
{/strip}
Kod CSS
Przygotowany kod wzbogacamy o style CSS. Najpierw musimy zadbać o wymiar i położenie głównego pojemnika. Odpowiadają za to dwa pierwsze wpisy z listingu 2.
Następnie dodajemy style ustalające położenie elementów: naglowek-lewy, naglowek-prawy, tekst i stopka.
Pierwszy z wpisów zawiera selektor html, body. Jest to konieczne, jeśli stronę chcemy przetestować jako XHTML (wysyłany jako application/ xhtml+xml).
Testowanie
Gdy ukończona jest pierwsza wersja układu, przystępujemy do testów. Oceniamy wygląd układu w kilku przeglądarkach. Pracując nad tym układem wykonałem testy w najnowszych wersjach FF, IE, Netscape i Opery, jak również w starszych wersjach IE (tj. IE5).
Niestety w IE5 skórka wygląda błędnie. Występuje problem z szerokością treści.
Drugim rodzajem testów jest sprawdzenie poprawności kodu XHTML oraz CSS. Do tego celu możemy wykorzystać walidatory z W3C (http://validator.w3.org i http://jigsaw.w3.org/css-validator/), wtyczkę HTML Validator do przeglądarki Firefox (https://addons.mozilla.org/firefox/249/) oraz interpretację dokumentu XHTML jako application/xhtml+xml.
Proponuję wykorzystanie ostatniej z metod. W pliku index.php (skórka jest wykonana w PHP przy użyciu Smarty) dodajemy wpis:
header(\'Content-Type: application/xhtml+xml\');
html, body {
margin : 0px;
padding : 0px;
text-align : center;
background : url(\'img/tlo.png\') repeat-x rgb(228,254,218);
}
#pojemnik {
margin : 0px auto;
margin-top : 20px;
margin-bottom : 20px;
width : 760px;
}
#naglowek-lewy {
float : left;
width : 330px;
height : 104px;
}
#naglowek-prawy {
float : right;
width : 430px;
height : 104px;
}
#tekst {
padding-top : 30px;
padding-bottom : 30px;
background : url(\'img/tlo-tekst.png\') repeat-y rgb(227,254,216);
width : 720px;
padding-left : 20px;
padding-right : 20px;
}
#stopka {
background : url(\'img/tlo-stopka.png\') no-repeat;
width : 760px;
height : 36px;
}
Jeśli teraz odwiedzimy skórkę Firefoksem, to
– w przypadku wystąpienia jakiegokolwiek błędu w kodzie XHTML – ujrzymy komunikat o błędzie. (Po dołączeniu nagłówka application/xhtml+xml interpretacja witryny WWW przez przeglądarkę przypomina kompilację programu komputerowego: jakikolwiek błąd składniowy powoduje przerwanie pracy i informację o błędzie.)
Po zmianie nagłówka Content-Type należy – w przypadku użycia selektora body – odnotować problem z tłem strony. Ustalenie tła strony w dokumencie XHTML wymaga użycia selektora html w CSS. Zatem zamiast stosowanego dotychczas wpisu:
body {
...
}
należy użyć:
html, body {
...
}
Problemy z IE5
Co zrobić z IE5? Zadanie nie jest proste. Główny problem polega na tym, że IE6 poprawnie interpretuje witrynę. Zatem musimy znaleźć sposób na dostarczenie innych stylów dla IE5 oraz innych dla IE6 (style dla IE6 mogą być identyczne jak style dla FF).
Rozwiązaniem tego problemu są komentarze postaci:
Wpisy takie są interpretowane wyłącznie przez różne wersje IE. Każda inna przeglądarka potraktuje je jak komentarz HTML. Natomiast dla IE jest to instrukcja if pozwalająca na warunkowe (zależnie od wersji IE) dołączanie treści do dokumentu HTML.
Problem szerokości treści na naszej witrynie rozwiążemy ustalając szerokość elementu #tekst na 720 pikseli dla przeglądarki IE w wersjach od 6 wzwyż (operator gte występu-jący po instrukcji if jest skrótem od greater then
or equal – większy lub równy).
Natomiast dla przeglądarek poprzedzających IE6 ustalamy szerokość elementu #tekst na 760 pikseli (operator lt występujący po drugiej z instrukcji if jest skrótem od less than – mniejszy niż):
{literal}
{/literal}
Powyższe instrukcje muszą pojawić się w kodzie XHTML poniżej elementu link dołączającego style z zewnętrznego pliku.
Z racji na wykorzystanie szablonów Smarty osadzanie stylów wewnętrznych w szablonie index.tpl wymaga użycia funkcji literal.
ETAP 2
Dokładniejsze krojenie lewego i prawego nagłówka
Po ukończeniu pierwszego układu przechodzimy do dalszego, bardziej dokładnego pokrojenia pliku XCF. Nagłówek lewy rozkroimy na poszczególne opcje menu, zaś nagłówek prawy na napisy oraz pięć strzałek, zgodnie z rys. 3.
Nazwy i wymiary plików powstałych po pokrojeniu nagłówka lewego są widoczne na rys. 4, zaś rys. 5 przedstawia szczegółowe dane dotyczące krojenia nagłówka prawego.
Zmiany w kodzie XHTML
Lewy nagłówek zostanie wypełniony serią obrazów. Opcje menu będą hiperłączami zawierającymi obraz. Do oddzielenia poszczególnych opcji wykorzystałem obraz menu-przerwa.png (listing 3):
Prawy nagłówek po rozkrojeniu zawiera podpis wybranej opcji (obraz napis-brak.png zamieniany na obrazy napis-autorzy.png, napis-artykuly.png, itd.) oraz strzałki do przewijania rekordów. Strzałki są zapisane w zewnętrznym szablonie next-prev. tpl (listing 4 i 5 – poniżej).
![\"\"](\"img/menu-magazyn.png\")
![\"\"](\"img/menu-strona-glowna-off.png\")
![\"\"](\"img/menu-przerwa.png\")
![\"\"](\"img/menu-autorzy-off.png\")
![\"\"](\"img/menu-artykuly-off.png\")
![\"\"](\"img/menu-roczniki-off.png\")
![\"\"](\"img/menu-numery-off.png\")
![\"\"](\"img/menu-rubryki-off.png\")
![\"\"](\"img/menu-podrubryki-off.png\")
![\"\"](\"img/menu-internet.png\")
![\"\"](\"img/naglowek-prawy-1.png\")
![\"\"](\"img/napis-brak.png\")
![\"\"](\"img/naglowek-prawy-puste-miejsce.png\")
{include file=\"next-prev.tpl\"}
{strip}
![\"\"](\"img/ikona-first.png\")
![\"\"](\"img/ikona-prev.png\")
![\"\"](\"img/ikona-index.png\")
![\"\"](\"img/ikona-next.png\")
![\"\"](\"img/ikona-last.png\")
{/strip}
Zmiany w kodzie CSS
Pokrojenie lewego i prawego nagłówka wymaga jedynie wprowadzenia dwóch drobnych poprawek w kodzie CSS.
Po pierwsze zmieniamy wysokość linii na 0:
Z racji na wykorzystanie szablonów Smarty osadzanie stylów wewnętrznych w szablonie index.tpl wymaga użycia funkcji literal.
html, body {
line-height : 0%;
}
po drugie usuwamy obramowanie otaczające obrazy (domyślnie: obrazy, będące hiperłączami – czyli np. opcje menu – będą otoczone ramką, co popsuje układ elementów):
img {
border :none;
}
Wysokość linii tekstu należy zwiększyć dla elementu zawierającego tekst Lorem ipsum…:
#tekst {
line-height : 120%;
}
Oczywiście przygotowany układ należy ponownie poddać testom zarówno wyglądu, jak i poprawności.
Efekt rollover
W następnym kroku skórkę wzbogacamy o efekt rollover. Zmieniamy kod każdej z siedmiu opcji menu głównego. Element img wzbogacamy o atrybuty id oraz o obsługę zdarzeń onmouseover i onmouseout:
Ponadto dodajemy obsługę zdarzenia onload elementu body, co zapewni wstępne pobranie obrazów do efektu rollover:
Kod JavaScript odpowiedzialny za wymiany obrazów jest zapisany w pliku rollover.js. Plik ten dołączamy do strony następująco:
Wewnątrz pliku rollover.js należy wprowadzić liczbę oraz nazwy obrazów, które mają być wymieniane, np.:
var rollovers_count = 14;
filenames_off[0] = \"img/menu-strona-glowna-off.png\";
filenames_off[1] = \"img/menu-autorzy-off.png\";
...
filenames_on[0] = \"img/menu-strona-glowna-on.png\";
filenames_on[1] = \"img/menu-autorzy-on.png\";
Przygotowany układ poddajemy testom wyglądu oraz poprawności kodu.
Witryna do druku
Kolejny etap udoskonalania skórki to przygotowanie stylów do wydruku. W pliku print.css wprowadzamy style widoczne na listingu 6.
Style dołączamy do szablonu, pamiętając o atrybutach media:
body {
width : 100%;
text-align : left;
background : white;
color : black;
}
#naglowek-lewy {
display : none;
}
#naglowek-prawy {
display : none;
}
#stopka {
display : none;
}
Stałe wymiary obrazów
Następnie dodajemy do stylów CSS wymiary wszystkich obrazów tworzących skórkę. W ten sposób przeglądarka będzie znała rozmiary obrazów przed ich pobraniem. Ułatwi jej to stopniowe odrysowywanie strony wraz z postępem pobierania plików:
#img0 {
width : 16px;
height : 37px;
}
...
#imgA10 {
width : 284px;
height : 67px;
#np-first {
width : 36px;
height : 67px;
}
...
Tytuł hiperłaczy i atrybut alt
Na zakończenie dodajemy atrybuty title do hiperłączy oraz atrybuty alt do obrazów będących hiperłączami (obrazy stanowiące fragment skórki
i nie będące hiperłączami powinny zawierać pusty atrybut alt postaci alt=\”\”):
Ukończony szablon ponownie poddajemy testom.
