Szablon strony WWW, Gimp

GIMP Tworzenie szablonów stron WWW cz. 11

GIMP Tworzenie szablonów stron WWW cz. 11 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.

Włodzimierz Gajda

1 2 3 4 5 6 7 »

Szablon

Szablon jest przedstawiony na rysunku obok. Wszystkie elementy graficzne są dołączone w stylach.

Po wyłączeniu CSS szablon zawiera wyłącznie tekst.

Menu stosuje efekt rollover w połączeniu ze wskaźnikiem wybranej opcji. Efekt rollover polega na delikatnym podświetleniu tekstu opcji.

Natomiast wskaźnikiem wybranej pozycji jest strzałka umieszczona poniżej etykiet opcji menu.

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.

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

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/lord...) oraz czcionka Nickelodeon NF ze strony http://www.1001freefonts.com. Użyte ikony oraz krój czcionki są przedstawione na rysunku.

29 lipca 2008

1 2 3 4 5 6 7 »

1. Szablon
2. Szablon w formacie XCF
3. Szablon w formacie XCF c.d., krojenie
4. Krojenie c.d., kafelkowanie
5. XHTML
6. Style CSS
7. Style CSS c.d.

Powiązane publikacje

GIMP: Tworzenie szablonów stron WWW cz. 12

GIMP Tworzenie szablonów stron WWW cz. 10

Gimp: tworzenie szablonów stron WWW cz. 9

GIMP 2.4.6

Gimp: tworzenie szablonów stron WWW cz. 8

Gimp: tworzenie szablonów stron WWW cz. 7

Gimp: tworzenie szablonów stron WWW cz. 6

Gimp: tworzenie szablonów stron WWW cz. 5

Gimp: tworzenie szablonów stron WWW cz. 4

Gimp: tworzenie szablonów stron WWW cz. 3

Gimp: tworzenie szablonów stron WWW cz. 2

Gimp: tworzenie szablonów stron WWW cz. 1

Skomentuj
ten artykuł

Komentarzy: 2

Sunday, 6.12.2009 15:48lord

A ja mam wrażenie, że każdy tutorial o tworzeniu szablonów WWW zakłada, że użytkownik zna doskonale GIMP-a. Każda kolejna operacja nie dość, że nie specyfikuje jaką dokładnie opcję w narzędziu gimp wybrać, to jeszcze często tłumaczone jest językiem potocznym :/ :/

Thursday, 30.10.2008 00:38ArChom

Nie wiem, czy tak ma być, ale mam wrażenie jakby artykuł i każdy inny na temat szablonów z GIMP nie był dokończony. Temat zapowiedziany w wytłuszczonym wstępie, nie jest poruszany w trakcie artykułu; np.: kafelkowanie w CSS (ang. sprites). Pozdrawiam

Zobacz wszystkie komentarze »

Autor

Włodzimierz Gajda

Artykuły tego autora:

» Efektowna wyszukiwarka Google na twojej...
[INTERNET Maker]
» Ćwiczenia w programowaniu aplikacji...
[INTERNET Maker]
» MathML - matematyka na stronach WWW
[INTERNET Maker]
» Propel - porady jak rozwiązać podstawowe...
[INTERNET Maker]
» AJAX Kurs od podstaw - jQuery
[INTERNET Maker]

Pozostałe publikacje

20 inspirujących layoutów stron

Szukając inspiracji warto zobaczyć, co robią inni projektanci. Nie zachęcamy nikogo do kradzieży, ale przedstawione strony natchną was setkami pomysłów.

Polecamy:

Na skróty:

Nasze serwisy:

Szablon strony WWW, Gimp

GIMP Tworzenie szablonów stron WWW cz. 11

Szablon

Zasoby

Autor

Włodzimierz Gajda

Pozostałe publikacje

20 inspirujących layoutów stron

Newsletter