Newsletter

Grupa MagazynyInternetowe

Online: 1138

Wyszukiwarka

Gimp

GIMP i webmastering: Obrysowanie menu przy użyciu ścieżek

« 1 2 3 4

Logo i zmiana obrazu XCF na stronę WWW

Etap 5: logo

GIMP i webmastering: Obrysowanie menu przy użyciu ścieżek Następnie dodaj do obrazu napisy tworzące logo.

GIMP i webmastering: Obrysowanie menu przy użyciu ścieżek Napis INTERNET otocz dwupikselową obwiednią białą i trzypikselową obwiednią czarną. Obwiednie wykonasz następująco:


•zaznacz napis INTERNET (służy do tego opcja Kanał alfa na zaznaczenie dostępna w menu kontekstowym okna dialogowego Warstwy),
•zaznaczenie powiększ o dwa piksele (Zaznaczenie | Powiększ),
•otrzymaną selekcję skopiuj z białego tła i wklej na nową warstwę

W przypadku czarnej obwiedni zaznaczenie powiększ o trzy, a nie dwa piksele, zaś na samym końcu wypełnij czarnym kolorem.

Zamiana obrazu XCF w stronę WWW

GIMP i webmastering: Obrysowanie menu przy użyciu ścieżek Przygotowany obraz XCF należy zamienić w stronę WWW. W tym celu musisz przygotować łącznie 13 obrazów o nazwach i wymiarach podanych na rysunku.

GIMP i webmastering: Obrysowanie menu przy użyciu ścieżek Ułatwisz sobie zadanie dodając do obrazu prowadnice. Po dodaniu prowadnic należy po kolei zaznaczać odpowiednie prostokąty obrazu, po czym przekształcać je w nowy obraz. Przekształcenie to wykonasz wykorzystując dwie operacje: Edycja | Kopiuj widoczne, Edycja | Wklej jako nowy.

Pamiętaj o tym, by opcje zaznaczone na poprzednim rysunku żółtym tłem wykonać podwójnie: raz zaznaczone, a raz odznaczone. Skorzystaj z operacji zmiany widoczności warstw.

Przygotowanie kodu HTML

Gdy przygotujesz pliki graficzne, pora na opracowanie kodu HTML. Witryna jest wykonana w oparciu o układ stałej szerokości. Główny element div o identyfikatorze strona zawiera wewnątrz cały kod witryny. Na ten kod składają się trzy elementy div o identyfikatorach naglowek, menu i tekst. Zarys kodu HTML witryny jest przedstawiony na listingu 1.

[+]
LISTING 1: Szkielet strony WWW
HTML
Pobierz 
1. <body>
2. <div id="strona">
3. <div id="naglowek">...</div>
4. <div id="menu">...</div>
5. <div id="tekst">...</div>
6. </div>
7. </body>

Interaktywne menu jest wykonane w postaci serii obrazów będących hiperłączami:

[+]
 
HTML
Pobierz 
1. <a href="">
2. <img src="" alt="" />
3. </a>

Obrazy są podmieniane po wskazaniu ich wskaźnikiem myszki. Wykonujemy to w skryptach JavaScript, wykorzystując zdarzenia onmouseout i onmouseover elementu img.

Zarys menu jest przedstawiony na listingu 2.

Oczywiście po ukończeniu kodu HTML należy jeszcze witrynę wzbogacić o skrypt JavaScript wymieniający obrazki oraz o style CSS.

[+]
LISTING 2: Zarys menu witryny
HTML
Pobierz 
 1. <div id="menu">
 2. <img id="menugora" src="img/menu-gora.png" alt="" />
 3. <a href="index.html" title="Autorzy">
 4. <img id="img0" src="img/menu-autorzy.png" alt="Autorzy"
    onmouseout="rollover_off('img0', 0);" onmouseover="rollover_on('img0', 0);" />
 5. </a>
 6. <img class="menuprzerwa" src="img/menu-przerwa.png" alt="" />
 7. <a href="index.html" title="Roczniki">
 8. <img id="img1" src="img/menu-roczniki.png" alt="Roczniki"
    onmouseout="rollover_off('img1', 1);" onmouseover="rollover_on('img1', 1);" />
 9. </a>
10. <img class="menuprzerwa" src="img/menu-przerwa.png" alt="" />
11. ...
12. </div>
25 kwietnia 2007
« 1 2 3 4

1. Przygotowanie obrazów: obly prostokąt
2. Przygotowanie obrazów: ścieżka obrysowująca menu
3. Przygotowanie obrazów: tło menu, opcje
4. Logo i zmiana obrazu XCF na stronę WWW

Powiązane publikacje

GIMP 2.4.4

GIMP 2.4.4

 
Skomentuj
ten artykuł

Brak komentarzy

Kod obrazkowy
(Kliknij, aby zmienić)
 

Autor

Włodzimierz Gajda

Artykuły tego autora:

Pozostałe publikacje

GIMP: Tworzenie szablonów stron WWW cz. 12

GIMP: Tworzenie szablonów stron WWW cz. 12

Prezentowany szablon bazuje na układzie stałej szerokości. Wykorzystano w nim trzy triki: kafelkowanie (ang. sprites), pozycjonowanie względnie bezwzględne oraz FIR (ang. Fahrner Image Replacement).

Newsletter

Jesli chcesz być na bieżąco z tym co się dzieje na stronie magazynu INTERNET Maker zapisz się do naszego newslettera.