Tworzenie przycisków dla stron WWW

Tworzenie przycisków dla stron WWW
Przyciski stosowane na stronach WWW mają za zadanie
uatrakcyjnić wygląd strony. Program GIMP ma wbudowany skrypt
do tworzenia takich przycisków. Oczywiście tradycyjnym sposobem
(definiując własne kształty) również można wykonać przyciski. W
ćwiczeniu tym skorzystamy ze skryptu, który błyskawicznie wykona
przyciski na strony WWW.
Uruchamiamy program GIMP lecz nie otwieramy ani nie
tworzymy nowego pliku . Wybieramy główne okno programu GIMP i
z menu Dodatki -> Script-Fu -> Przyciski wybieramy jedną z
dwóch opcji tworzenia przycisków - "Prosty przycisk z fazą" lub
"Zaokrąglony przycisk". Wybierzemy Zaokrąglony przycisk,
gdyż jest ciekawszy graficznie i ma więcej opcji. Powinno otworzyć
się okno z widocznymi opcjami.
W oknie tekst: wpisujemy krótki tekst, który będzie wyświetlany na
przycisku. Nieco niżej możemy wybrać wielkość oraz krój czcionki .
Wyściółka - odległość krawędzi przycisku od tekstu wyrażana w
pikselach.
Szerokość fazy - w zależności od jej wielkości mamy bardziej lub
mniej wypukły przycisk.
Stopień zaokrąglenia - w zależności od wartości tworzy przycisk
o mniej lub bardziej zaokrąglonych krawędziach.
Na końcu mamy do wyboru typy klawiszy, które będą
automatycznie utworzone po naciśnięciu klawisza OK.
W tym ćwiczeniu wykorzystane są trzy rodzaje klawiszy:
• Nie wciśnięty
(wyświetla się na stronie jako pierwszy)
02.gif
•
Nie wciśnięty (aktywny) (przycisk wyświetla się po najechaniu
myszką) 01.gif
•
Wciśnięty
(wygląd klawisza zmienia się po najechaniu i kliknięciu myszką) 03.gif
Tak utworzone przyciski umieszczamy wewnątrz kodu HTML wykorzystując znaczniki z Java Script .
Poniżej jest kod źródłowy niezbędny do poprawnego wyświetlenia utworzonych przycisków:
<img border="0" src="rozne/02.gif"
onmouseover="src='rozne/01.gif'"
onmouseout="src='rozne/02.gif'"
onmousedown="src='rozne/03.gif'"
onmouseup="src='rozne/01.gif'">
Przyciski powinny być zrobione w małych rozdzielczościach (najlepiej jako GIFy) po to żeby błyskawicznie
wyświetlały się na stronach WWW. Ciekawy efekt można uzyskać tworząc animowanego GIFa, który będzie się
wyświetlał np. po najechaniu myszką na klawisz. Oto proste przykłady:
Przyciski wyświetlają się na stronie ale nie wykonują żadnej akcji. Jeżeli kliknięcie na przycisk ma otwierać jakąś
konkretną stronę czy podstronę, to musimy wstawić hiperłącze. Hiperłącze musi obejmować cały kod
wyświetlający poszczególne przyciski.
<a href="http://www.wp.pl">
<img border="0" src="rozne/02.gif"
onmouseover="src='rozne/01.gif'"
onmouseout="src='rozne/02.gif'"
onmousedown="src='rozne/03.gif'"
onmouseup="src='rozne/01.gif'">
</a>
Po kliknięciu przycisku otworzy nam się w tym samym oknie strona Wirtualnej Polski. Jeżeli chcemy aby kliknięcie
na przycisk otwierało stronę w nowym oknie, to wystarczy dopisać w pierwszym znaczniku hiperłącza target="_blank" czyli:
<a target="_blank" href="http://www.wp.pl">
<img border="0" src="rozne/02.gif"
onmouseover="src='rozne/01.gif'"
onmouseout="src='rozne/02.gif'"
onmousedown="src='rozne/03.gif'"
onmouseup="src='rozne/01.gif'">
</a>
Nieco niżej zamieszczam uproszczony kod źródłowy, który można zamieścić na naszej stronie. Działa niemal
identycznie jak poprzedni. Jedyna różnica to sposób wyświetlania stanu "wcisnięty". Oto jego składnia oraz
przycisk:
<img src="02.gif" border="0" onmouseover="src='01.gif'" onmouseout="src='02.gif'"
onclick="src='03.gif'">
Jak widać tworzenie przycisków na strony WWW w programie GIMP jest dosyć prostą czynnością.