Cieniowanie

Bardzo efektownie wygl▒daj▒ strony, na kt≤rych pod tekstem jest t│o. Chc▒c to zrobiµ, trzeba je jednak rozs▒dnie dobraµ, aby nie zla│o siΩ z literami. Dlatego mo┐na pos│u┐yµ siΩ sztuczk▒ i wykorzystaµ efekt cieniowania, kt≤ry - umieszczony z lewej strony - powoli zanika, przechodz▒c w bia│y kolor. Takie t│o daje mi│y efekt wizualny i mo┐na korzystaµ nawet z jaskrawych kolor≤w nie zaciemniaj▒c ca│ej strony.
Aby zrealizowaµ projekt, trzeba najpierw stworzyµ odpowiedni plik graficzny GIF. Przyk│adowy wymiar pliku to 10╫1000 pikseli, gdy┐ w≤wczas przegl▒darka bΩdzie wy╢wietlaµ ten sam obrazek jeden pod drugim jak wiersze tabeli (za╢ sam plik ma ma│e rozmiary, co jest istotne dla szybko╢ci za│adowania strony).
Teraz plik ten mo┐emy wykorzystaµ jako t│o strony. Je╢li narysowany cie± jest kr≤tki (nie wychodzi na tekst), to wszystko w porz▒dku. Je╢li jednak cie± bΩdzie d│u┐szy, nale┐a│oby przesun▒µ obszar, na kt≤rym bΩdzie pisany tekst, w prawo. Robi siΩ to dziel▒c stronΩ ramk▒ sk│adaj▒c▒ siΩ z dw≤ch kolumn (w jednej bΩdzie cie±, w drugiej tekst - patrz rys. 1).

Nieregularne kszta│ty

Tradycyjnie, stosuj▒c ramki, mamy do dyspozycji jedynie proste krawΩdzie. Ograniczenie to mo┐na jednak omin▒µ. Podobnie jak poprzednio, najpierw trzeba stworzyµ plik graficzny GIF, kt≤ry bΩdzie zawiera│ nieregularny kszta│t ramki (a tak naprawdΩ - powtarzaj▒cy siΩ fragment). Przyk│adowy wymiar pliku to 100╫200 pikseli. Rysuj▒c falΩ, trzeba pamiΩtaµ, aby u g≤ry i na dole ko±czy│a siΩ na tej samej wysoko╢ci, gdy┐ s▒ to krawΩdzie, kt≤re bΩd▒ siΩ ze sob▒ stykaµ.

Podobnie jak w poprzednim przypadku mo┐na skorzystaµ z ramek, je╢li jest taka potrzeba (rys. 2).

W│asne separatory graficzne

JΩzyk HTML daje mo┐liwo╢µ umieszczenia separatora w postaci linii ci▒g│ej. S│u┐y do tego znacznik <HR>. Nie wygl▒da to najlepiej. Dlatego, gdy nie chcemy psuµ wygl▒du strony, mo┐emy stworzyµ w│asny separator w postaci obrazka GIF. Wymiary takiego obrazka powinny mieµ odpowiednie proporcje: kilka pikseli wysoko╢ci i kilkaset d│ugo╢ci. W tek╢cie strony umieszczamy go za pomoc▒ znacznika <IMG>. Dodatkowo trzeba dopasowaµ szeroko╢µ separatora do szeroko╢ci okna, ustawiaj▒c parametr WIDTH=100% (patrz Listing 1).
Tym sposobem uzyskamy ciekawy efekt oddzielenia dw≤ch fragment≤w strony (rys. 3).

Pod╢wietlane przyciski

Strony mo┐na wzbogacaµ r≤wnie┐ efektami animacyjnymi. Najprostszy spos≤b polega na umieszczeniu animowanego GIF-a. Warto po-kusiµ siΩ jednak o bardziej wyrafinowane ani-macje, kt≤re reaguj▒ na poczynania u┐ytkownika. Przypu╢µmy, ┐e umie╢cimy na stronie graficzny odsy│acz do innych naszych (lub czyich╢) stron. Zwykle wygl▒da on tak, jak przedstawia to poni┐szy rysunek.

Je╢li jednak postawimy na nim kursor myszy, to odpowiednio do jego po│o┐enia zapali siΩ na czerwono lewa lub prawa strza│ka. »eby to zrealizowaµ, nale┐y najpierw stworzyµ odpowiednie trzy pliki GIF dla sytuacji pocz▒tkowej oraz dla sytuacji, gdy pojawia siΩ kursor myszy. Wszystkie obrazki powinny mieµ ten sam rozmiar.

Gdy GIF-y s▒ przygotowane, trzeba jeszcze oprogramowaµ podmienianie rysunk≤w po wskazaniu ich kursorem myszy w czasie przegl▒dania strony. S│u┐▒ do tego parametry onMouseOver i onMouseOut. Je╢li chcemy, aby pojawia│y siΩ dodatkowo dymki podpowiedzi, to trzeba okre╢liµ parametr ALT. Natomiast, aby pojawia│ siΩ opis w linii statusu przegl▒darki, trzeba pos│u┐yµ siΩ JavaScriptem i podstawiµ odpowiedni tekst pod window.status (Listing 2). Przesuwanie kursora po odpowiednim fragmencie przycisku powoduje zmianΩ jego wygl▒du i pojawienie siΩ opisu w wierszu statusu (rys. 4).

Aktywne graficzne menu

Gdy potrafimy ju┐ utworzyµ nieregularn▒ ramkΩ i elementy reaguj▒ce na kursor myszy, mo┐emy uzyskaµ ciekawy efekt graficznego menu z opcjami, kt≤re bΩd▒ animowa│y wci╢niΩcie. Wykorzystamy w tym celu wcze╢niej zrobion▒ ramkΩ. Opr≤cz tego trzeba utworzyµ przyciski w dw≤ch wersjach: dla stanu normalnego i stanu wci╢niΩtego. Trzeba pamiΩtaµ, aby t│o przycisku by│o takie samo jak kolor ramki.

 

Gdy mamy ju┐ gotowe wszystkie elementy, przystΩpujemy do napisania strony. Trzeba j▒ podzieliµ na dwie czΩ╢ci: mniejsz▒ dla menu (lewa) i wiΩksz▒ na tekst (prawa), stosuj▒c ramki (Listing 3).
Teraz, je╢li staniemy kursorem na jednym z przycisk≤w, zmieni on wygl▒d na wci╢niΩty, w wierszu statusu pojawi siΩ opis, a po chwili r≤wnie┐ pomocniczy dymek (rys. 5). W zale┐no╢ci od tego, kt≤ry przycisk zostanie wci╢niΩty, po prawej stronie pojawi siΩ inna zawarto╢µ strony (odpowiednio z plik≤w tekst1.htm, tekst2.htm lub tekst3.htm).

Listing 1

<HTML>
<TITLE>Separator graficzny</TITLE>
<BODY><H2><CENTER>
Przyk│ad separatora</CENTER></H2>
<IMG SRC="separator.gif" WIDTH=100%>
<BR><P>
Pozosta│y tekst oddzielony separatorem.
</BODY>
</HTML>

Listing nr 2

<HTML>
<TITLE>Aktywne przyciski</TITLE>
<BODY  onLoad="top.focus()">
<H2><CENTER>Przyk│ad z aktywnymi 
przyciskami</CENTER></H2>
<CENTER>
<IMG SRC="p_norm.gif" name=przycisk 
USEMAP="#przycisk" BORDER=0> 
</CENTER>
<MAP NAME="przycisk">
<AREA SHAPE=RECT COORDS="0,1,75,50" 
HREF=""
ALT=" w lewo " 
OnMouseOver="document.przycisk.src='p_lewo.gif';
window.status='Przejd╝ w lewo!!!'; return true;" 
onMouseOut="document.przycisk.src='p_norm.gif'; 
window.status=''; return true;">
<AREA SHAPE=RECT COORDS="76,1,150,50" 
HREF=""  
ALT=" w prawo " 
OnMouseOver="document.przycisk.src='p_prawo.gif';
window.status='Przejd╝ w prawo!!!'; return true;" 
onMouseOut="document.przycisk.src='p_norm.gif'; 
window.status=''; return true;"> </MAP>
</BODY>
</HTML>

Listing 3

<HTML>
<HEAD>
<TITLE>Menu graficzne z ramk▒</TITLE>
</HEAD>
<FRAMESET COLS="40%,60%" FRAMEBORDER=0>
<FRAME SRC="menu.htm" NAME="menu">
<FRAME SRC="tekst.htm" NAME="tekst">
<NOFRAMES>
<BODY>
<P>
Ta przegl▒darka nie obs│uguje ramek!
</P>
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>

Najwa┐niejsz▒ spraw▒ jest jednak napisanie obs│ugi menu.

<HTML>
<TITLE>Menu graficzne</TITLE>
<BODY  background="fala.gif">
<IMG SRC="przycisk_n.gif" NAME=przycisk1 
USEMAP="#przycisk1" BORDER=0><BR>
<IMG SRC="przycisk_n.gif" NAME=przycisk2 
USEMAP="#przycisk2" BORDER=0><BR>
<IMG SRC="przycisk_n.gif" NAME=przycisk3 
USEMAP="#przycisk3" BORDER=0><BR>
<MAP NAME="przycisk1"> 
<AREA SHAPE=RECT COORDS="0,1,150,50" 
HREF="tekst1.htm" TARGET="tekst" 
ALT="przycisk 1" 
OnMouseOver="document.przycisk1.src='przycisk_w.gif'; 
window.status='Jest przycisk1 !!!'; 
return true;" 
onMouseOut="document.przycisk1.src='przycisk_n.gif'; 
window.status=''; return true;"> </MAP>
<MAP NAME="przycisk2">
<AREA SHAPE=RECT COORDS="0,1,150,50" 
HREF="tekst2.htm " TARGET="tekst" 
ALT="przycisk 2" 
OnMouseOver="document.przycisk2.src='przycisk_w.gif'; 
window.status='Jest przycisk2 !!!'; 
return true;"  
onMouseOut="document.przycisk2.src='przycisk_n.gif'; 
window.status=''; return true;"> </MAP>
<MAP NAME="przycisk3">
<AREA SHAPE=RECT COORDS="0,1,150,50" 
HREF="tekst3.htm" TARGET="tekst" 
ALT="przycisk 3" 
OnMouseOver="document.przycisk3.src='przycisk_w.gif'; 
window.status='Jest przycisk3 !!!'; 
return true;"  
onMouseOut="document.przycisk3.src='przycisk_n.gif'; 
window.status=''; return true;">
</MAP>
</BODY>
</HTML>

(c) Copyright LUPUS