HTML: Zamiana obrazu XCF na szablon strony

Przygotowanie obrazu w formacie XCF jest pierwszym etapem wykonania szablonu strony WWW. W artykule zajmiemy się przekształceniem pliku graficznego XCF w witrynę WWW. Szczególną uwagę zwrócimy na kilka haczyków dotyczących poprawności kodu HTML oraz wyglądu witryny w starszych przeglądarkach.

Krojenie obrazu XCF

{tlo_1}

Krok 1.

Otwieramy obraz mi.xcf przedstawiający szablon strony WWW wykonany w programie GIMP.

{/tlo}
{tlo_0}

Krok 2.

Dodajemy do obrazu prowadnice, które ułatwią krojenie.

{/tlo}
{tlo_1}

Krok 3.

Plik XCF kroimy na dziewięć prostokątnych obrazów PNG. Obrazy te zostały zaznaczone kolorami czerwonym, zielonym, żółtym oraz niebieskim.

{/tlo}

{tlo_0}

Krok 4.

Każdy z wycinanych obrazów jest oczywiście prostokątny. Dodatkowo należy ustalić kolor, jakim wypełniony zostanie obszar zaznaczony czerwonym prostokątem.

{/tlo}
{tlo_1}

Krok 5.

Wykorzystując dodane prowadnice, selekcję prostokątną oraz operacje:
Edycja | Kopiuj widoczne
Edycja | Wklej jako nowy
wykonujemy osiem obrazów magazyn.png, internet-off.png, autorzy-off.png, artykuły-off.png, roczniki-off.png, numery-off.png, rubryki-off.png oraz podrubryki-off.png o wymiarach podanych na rysunku.

{/tlo}
{tlo_0}

Krok 6.

Do efektu rollover potrzebne będą dodatkowe obrazy. Mają one identyczne rozmiary, a różnią się wyglądem. Zmieniamy widoczność warstw w programie GIMP i wykonujemy obrazy, których nazwa kończy się przyrostkiem -on.

{/tlo}
{tlo_1}

Krok 7.

Na zakończenie wykonujemy obrazy gora.png oraz dol.png. Obraz gora.png wycinamy z obrazu mi.xcf, tak jak poprzednie osiem fragmentów. Natomiast obraz dol.png wykonujemy odbijając pionowo obraz gora.png.

{/tlo}

Ustalenie koloru tła

{tlo_0}

Krok 8.

W kolejnym kroku wyznaczamy kolor wypełnienia jednolitego prostokąta. Wykorzystujemy do tego zakraplacz pobierający kolor z obrazu. Warstwą bieżącą powinien być jednolity prostokąt.

Wybieramy zakraplacz zaznaczony w oknie głównym GIMP-a, po czym klikamy w miejscu oznaczonym literą A. Ujrzymy okno dialogowe przedstawiające kod koloru wskazanego piksela.

{/tlo}

Kod HTML sklejający obrazy

Przechodzimy do wykonania kodu HTML. Najpierw należy skleić dziesięć obrazów w jedną całość. Wykorzystamy do tego układ HTML o stałej szerokości. Szerokość tak przygotowanej witryny nie ulega zmianie wraz ze zmianą wielkości okna przeglądarki.
Przygotujemy element div o identyfikatorze pojemnik. W elemencie tym będzie znajdowała się cała zawartość strony. Zawartość strony dzielimy na cztery poziome pasy:

• menu,
• poziomy obraz gora.png,
• treść,
• poziomy obraz dol.png.

Menu dodatkowo dzielimy w pionie na elementy o identyfikatorach magazyn oraz opcje. Kod HTML tak przygotowanego układu jest widoczny na listingu 1 (###CD###).
W układzie tym należy usunąć białe znaki, gdyż w przeciwnym razie obrazy będą otoczone przestrzenią, która zepsuje układ całości. Do usuwania białych znaków wykorzystujemy funkcję strip szablonów Smarty:

{strip}

    ...

{/strip}

Kod HTML z listingu 1 wzbogacamy o style z listingu 2 (###CD###). W stylach tych warto zwrócić uwagę na:

• wyrównanie głównego pojemnika na środku strony,
• ustalenie szerokości układu,
• sklejenie obrazów z menu,
• ustalenie koloru tła treści,
• sklejenie obrazów gora.png oraz dol.png z zawartością strony.

Za wyśrodkowanie na stronie odpowiadają dwa wpisy:

body {
    text-align : center;
}

oraz

#pojemnik {
    margin : 0 auto;
}

Pierwszy z nich jest konieczny dla przeglądarki IE 5, zaś drugi dla nowych przeglądarek.
Szerokość pojemnika zadajemy wpisem:

#pojemnik {
    width : 760px;
}

Sklejenie obrazów z menu osiągamy dwoma trikami. Po pierwsze element div o identyfikatorze magazyn dosuwamy do lewej strony:

#magazyn {
    float : left;
}

zaś element o identyfikatorze opcje dosuwamy do prawej strony:

#magazyn {
    float : right;
}

Ponadto podajemy szerokości elementów magazyn i opcje. Szerokości te są identyczne z szerokością obrazów zawartych w elementach div.

Zauważmy, że w elemencie o identyfikatorze opcje jest wiele obrazów. Pierwszy z nich (internet-off.png) ma szerokość taką samą jak cały element div. Zatem obrazy od drugiego do ostatniego zostaną umieszczone poniżej pierwszego. Ponieważ łączna szerokość obrazów z drugiego wiersza (czyli od autorzy-off.png do podrubryki-off.png) jest równa szerokości górnego obrazu, zatem otrzymamy efekt płynnego połączenia obrazów.

Górną i dolną część menu możemy dodatkowo podzielić na dwa osobne obszary elementami div (czyli obraz internet-off.png umieścić w jednym elemencie div, a tytuły opcji autorzy-off.png, …, podrubryki-off.png w drugim elemencie div). Ja z takiego podziału zazwyczaj rezygnuję, polegając na zawijaniu zawartości elementów div.

Zwróćmy również uwagę na atrybut line-height : 0%. Jest on konieczny: bez niego obrazy będą nieco oddalone od siebie.

Oczywiście tekst przedstawiany na stronie będzie nieczytelny, jeśli wysokość linii wyniesie 0. Dlatego konieczny jest wpis:

#tresc {
    line-height : 120%;
}

Kolor pobrany zakraplaczem z obrazu XCF ustalamy jako kolor tła elementu #tresc:

#tresc {
    background : rgb(255,226,180);
}

Gdy poszczególne obrazy wzbogacimy o atrybut id:

to w stylach warto wprowadzić ich sztywne wymiary:

#img0 {
    width  : 723px;
    height : 102px;
}

#img1 {
    width  : 108px;
    height : 38px;
}
...

Dzięki temu po pobraniu stylów przeglądarka pozna wymiary wszystkich obrazów. Ułatwi jej to częściowe odrysowywanie strony.

Style przeznaczone do druku

Jeśli myślimy o tym, by strona nasza ładnie wyglądała na wydruku, to musimy ją zaopatrzyć w odpowiednie style CSS.
Style takie dołączymy do dokumentu stosując następujące elementy:

Uważajmy, ważna jest kolejność stylów: najpierw style do druku (media=\”print\”), a następnie style ekranowe (media=\”screen\”). Internet Explorer w wersji 5 nie interpretuje poprawnie atrybutu media. Jeśli umieścimy style w takiej kolejności, to przeglądarka IE 5 – wyświetlając dokument na ekranie – najpierw zastosuje style do wydruku, a następnie style ekranowe. W ten sposób możemy style do wydruku przysłonić stylami ekranowymi.

Skutkiem przysłaniania jest to, że witryna będzie poprawnie wyglądała w IE i w nowych przeglądarkach oraz będzie poprawnie drukowana przez nowe przeglądarki.
Zadaniem stylów do wydruku jest między innymi usunięcie zbędnych (na wydruku) elementów, np. menu. Style takie zostały przedstawione na listingu 3 (###CD###).
Zwróćmy uwagę na wpis:

#menu {
    display : none;
}

Zapis ten jest przysłonięty w stylach z listingu 2 poprzez wpis:

#menu {
    display : block;
}

Przeglądarka IE5:

• najpierw zastosuje style do wydruku (plik: print.css); element menu zostanie usunięty (wpis display: none;),
• następnie zastosuje style ekranowe (plik: style.css); element menu zostanie przywrócony (wpis display: block;).

Nowe przeglądarki wybiorą jeden z plików CSS, w zależności od wykonywanego zadania (formatowanie dokumentu na ekran lub do wydruku).

Testy

Zanim przejdziemy do dodawania hiperłączy oraz efektu rollover, warto przygotowany układ przetestować. Testy można podzielić na:

• sprawdzanie wyglądu strony,
• sprawdzanie poprawności strony.

Test wyglądu strony

Należy sprawdzić:

• wygląd witryny w najnowszych przeglądarkach Firefox, Netscape, Opera, Internet Explorer (pamiętajmy o tym, by pozmieniać rozmiar okna przeglądarki),
• wygląd witryny w starszych przeglądarkach, np. IE 5,
• podgląd wydruku witryny w nowych przeglądarkach.

Test poprawności witryny

Należy sprawdzić:

• poprawność kodu XHTML witryny wysyłając ją jako application/xhtml+xml do przeglądarki Firefox,
• poprawność kodu HTML witryny wykorzystując wtyczkę HTML Validator przeglądarki Firefox,
• poprawność kodu HTML witryny korzystając z walidatora dostępnego na witrynie W3C,
• poprawność stylów CSS walidatorem z W3C.

Rollovery

Gdy testy wyglądu oraz poprawności zakończą się sukcesem, pora na ostatni etap pracy: zamianę obrazów na hiperłącza oraz dodanie skryptów JavaScript odpowiedzialnych za realizację efektu rollover.

Każdy z obrazów menu umieszczamy w elemencie oraz wzbogacamy o atrybuty id, onmouseout oraz onmouseover:

W skrypcie rollover.js wprowadzamy nazwy wymienianych plików:

var rollovers_count = 7;
var filenames_off = new Array;
filenames_off[0] = \"img/internet-off.png\";
filenames_off[1] = \"img/autorzy-off.png\";
...
var filenames_on = new Array;
filenames_on[0] = \"img/internet-on.png\";
filenames_on[1] = \"img/autorzy-on.png\";
...

Element body wzbogacamy o atrybut onload odpowiedzialny za wstępne pobranie obrazów do efektu rollover:

Zwróćmy uwagę, że opcje menu (czyli napisy AUTORZY, ARTYKUŁY, …, PODRUBRYKI) są zwykłymi, pojedynczymi rolloverami. Natomiast napis magazyn jest rolloverem, który wymienia inny obraz. Po naprowadzeniu wskaźnika myszy na napis magazyn, wymianie podlega napis INTERNET. Efekt taki osiągniemy zmieniając identyfikator wymienianego obrazu w wywołaniu funkcji {stala}rollover_on(){/stala} oraz {stala}rollover_off(){/stala}.

Sprawdzamy poprawność kodu JavaScript:

• odwiedzając witrynę przeglądarką Firefox i wędrując po kolejnych hiperłączach,
• sprawdzając komunikaty w konsoli JavaScript: Narzędzia | Konsola JavaScript.

W przeglądarce IE błędy JavaScript są sygnalizowane w wierszu stanu.

Atrybuty alt oraz title

Na zakończenie dodajemy atrybuty alt oraz title:

po czym sprawdzamy wygląd witryny bez stosowania stylów i wyświetlania obrazów. Wykorzystujemy do tego wtyczkę Developer Toolbar do przeglądarki Firefox.