Ten etap jest bez w▒tpienia kluczowy w ca│ym procesie tworzenia stron WWW. Na temat dobrego projektowania napisano ju┐ setki ksi▒┐ek i artyku│≤w (niekt≤re ca│kiem niez│e :-). My skupimy siΩ dzisiaj na elementach bezpo╢rednio zwi▒zanych z projektowaniem w Dynamicznym HTML.
Hmmm, o czym by tu zrobiµ stronΩ? A mo┐e... tak! to jest to! Zrobimy stronΩ o ..........
Znamy ju┐ temat strony i wiemy, co bΩdzie jej tre╢ci▒. Mo┐emy wiΩc wyodrΩbniµ podstawowe elementy logiczne, z kt≤rych bΩdzie siΩ ona sk│adaµ. Takim elementem jest na przyk│ad menu, fragment tekstu czy obrazek. Maj▒c wyznaczone elementy logiczne bΩdziemy mogli zaprojektowaµ wygl▒d oraz dzia│anie strony.
Kolejny krok to projekt wygl▒du, czyli uk│adu strony. Na tym etapie nale┐y rozmie╢ciµ wszystkie elementy maj▒c na uwadze funkcjonalno╢µ i czytelno╢µ strony. Najlepiej wykorzystaµ do tego star▒ wypr≤bowan▒ metodΩ o│≤wka i kartki papieru. Trzeba pamiΩtaµ, ┐e strony w DHTML projektuje siΩ trochΩ inaczej ni┐ w "zwyk│ym" HTML. Podstawowymi elementami, kt≤re rozmieszczamy, s▒ bloki. Bloki pozycjonuje siΩ wzglΩdem okna przegl▒darki.
Teraz planujemy zachowanie naszej strony, czyli animacje i elementy interakcyjne (takie na kt≤rych u┐ytkownik mo┐e klikn▒µ lub co╢ siΩ stanie gdy najedzie na nie myszk▒). DHTML pozwala na znaczn▒ rozbudowΩ interakcji. Nie ka┐de klikniΩcie musi siΩ r≤wnaµ za│adowaniu kolejnego dokumentu, a zmiana wygl▒du dokumentu bez odwo│ania siΩ do serwera to podstawa dynamicznych stron.
Projekt struktury fizycznej sprowadza siΩ do przygotowania pustych plik≤w o ustalonych nazwach. Umieszczenie projektu w paru plikach ma parΩ zalet. Po pierwsze zwiΩksza wydajno╢µ przy │adowaniu serwisu, a po drugie znacznie u│atwia samo projektowanie (│atwiej jest zachowaµ orientacjΩ w tworzonym projekcie).
Nasz projekt bΩdzie siΩ zatem sk│ada│ z kilku plik≤w:
| index.html | tre╢µ strony, skrypty inicjuj▒ce |
| index3.html | wersja strony dla starszych przegl▒darek |
| style.css | definicje arkuszy styl≤w (wygl▒du dokumentu) |
| bloki.css | pozycjonowanie blok≤w (CSS-P) |
| biblioteka.js | biblioteka podstawowych funkcji DHTML |
| funkcje.js | funkcje wykorzystane bezpo╢rednio na stronie |
W pliku biblioteka.js umie╢cili╢my podstawowe funkcje DHTML:
| show(ident) | pokazuje blok ident |
| hide(ident) | chowa blok ident |
| pozycja(ident) | zapisuje pozycjΩ bloku ident do zmiennych globalnych l (left) i t (top) |
| moveTo(ident, x, y) | przesuwa blok ident do punktu (x,y) |
| moveBy(ident, dx, dy) | przesuwa blok ident o wektor [dx, dy] |
| clipTo(ident, t, r, b, l) | przycina blok ident do zadanego prostok▒ta ( t = top, r = right, b = bottom, l = left ) |
| clipBy(ident, t, r, b, l) | zmienia przyciΩcie bloku ident o zadane warto╢ci ( t = top, r = right, b = bottom, l = left ) |
| wysokosc(ident) | Zapisuje wysoko╢µ bloku ident do zmiennej globalnej h (height) |
| okno() | Sprawdza rozmiary okna przegl▒darki i zapisuje do zmiennych globalnych oknoW (dostΩpna szeroko╢µ) i oknoH (dostΩpna wysoko╢µ) |
Kolejny etap to przygotowanie i formatowanie tre╢ci strony. Na tym etapie tworzymy plik HTML z formatowanym tekstem strony oraz plik CSS (kaskadowe arkusze styl≤w), kt≤ry bΩdzie odpowiedzialny za wygl▒d dokumentu.
Na pocz▒tek wpisujemy ca│▒ tre╢µ, jaka ma siΩ znale╝µ na stronie do pliku index.html, a nastΩpnie formatujemy tekst za pomoc▒ znacznik≤w HTML.
Teraz dzielimy tre╢µ dokumentu na bloki zgodnie z projektem uk│adu, czyli otaczamy wybrane elementy znacznikami <DIV> i nadajemy im indywidualne identyfikatory (atrybut ID). Pozwoli to na pozycjonowanie wszystkich element≤w oraz na przygotowanie skrypt≤w dla strony (krok 14).
Za pomoc▒ arkuszy styl≤w nadajemy elementom dokumentu po┐▒dany wygl▒d: kolor tekstu i odno╢nik≤w, kr≤j i inne atrybuty czcionki. Style (tak jak zaplanowali╢my) umieszczamy w pliku style.css i do│▒czamy do dokumentu index.html poprzez znacznik LINK:
<LINK rel="STYLESHEET" type="text/css" href="style.css">
Znacznik LINK umieszczamy w sekcji HEAD dokumentu.
Chcemy zadeklarowaµ pozycjΩ i wielko╢µ ka┐dego bloku. Chcemy tak┐e odwo│ywaµ siΩ do blok≤w poprzez skrypty. Do tych cel≤w potrzebujemy regu│Ω (deklaracjΩ) w arkuszu styl≤w dla ka┐dego ze zdefiniowanych wcze╢niej blok≤w. Regu│y maj▒ postaµ:
#nazwaDiv {
position:absolute;
left:0; top:0;
width:szeroko╢µ;
height:wysoko╢µ;
clip:rect(0 wysoko╢µ szeroko╢µ 0);
background-color:kolor t│a;
layer-background-color:kolor t│a;
visibility:hidden;
}
nazwaDiv jest identyfikatorem bloku, a wysoko╢µ, szeroko╢µ i kolor t│a s▒ zdefiniowanie odpowiednio dla ka┐dego bloku tak, aby odpowiada│y naszemu projektowi.
Prosimy zwr≤ciµ uwagΩ, ┐e wszystkie bloki s▒ ustawione w tym samym miejscu - w punkcie (0,0) (left:0; top:0) - oraz s▒ niewidoczne (visibility:hidden). Dlaczego? Ot≤┐ naszym celem na tym etapie jest tylko zainicjowanie blok≤w. Precyzyjne pozycjonowanie i pokazanie wybranych blok≤w nast▒pi na poziomie skryptu (Etap III).
Niekt≤re bloki mog▒ nie mieµ zdefiniowanego koloru t│a (s▒ wtedy prze╝roczyste). Mo┐emy r≤wnie┐ dla niekt≤rych blok≤w nie definiowaµ wysoko╢ci oraz atrybutu clip. Wysoko╢µ takiego bloku dostosuje siΩ do ilo╢ci umieszczonego w nim tekstu. Mo┐emy j▒ p≤╝niej sprawdziµ za pomoc▒ funkcji bibliotecznej wysokosc().
Wszystkie regu│y dla blok≤w umieszczamy w pliku bloki.css. Ten plik do│▒czamy do index.html analogicznie jak style.css.
Teraz czeka nas najbardziej pracoch│onny etap, czyli przygotowanie funkcji, kt≤re tchn▒ ┐ycie w nasz▒ stronΩ i wyr≤┐ni▒ j▒ spo╢r≤d setek statycznych stron WWW. Ca│a dotychczasowa praca sprowadza│a siΩ do takiego przygotowania strony, aby mo┐na j▒ by│o modyfikowaµ za pomoc▒ skrypt≤w. Podzielenie dokumentu na bloki oraz zwi▒zanie z ka┐dym blokiem identyfikatora pozwoli nam teraz za pomoc▒ obiektowego modelu dokument≤w (DOM) w │atwy spos≤b zarz▒dzaµ dokumentem i modyfikowaµ poszczeg≤lne elementy strony.
Skrypty dla dynamicznych stron warto umie╢ciµ w osobnych plikach (patrz krok 5).
Do naszego dokumentu HTML do│▒czamy dwa zewnΩtrzne pliki ze skryptami:
biblioteka.js - podstawowe funkcje DHTML umo┐liwiaj▒ce realizacjΩ bardziej z│o┐onych efekt≤w oraz zapewniaj▒ kompatybilno╢µ z r≤┐nymi przegl▒darkami czwartej generacji.
funkcje.js - w tym pliku umieszczamy funkcje bezpo╢rednio przygotowane dla danej strony. Skrypty korzystaj▒ z biblioteki funkcji ni┐szego poziomu, kt≤ra zapewni kompatybilno╢µ. Skrypty bΩd▒ odpowiedzialne dynamiczne zachowanie strony. Opracujemy je w kroku 14.
Do│▒czenie zewnΩtrznych skrypt≤w wygl▒da nastΩpuj▒co (skrypty do│▒czamy w sekcji HEAD pliku HTML):
<script language="JavaScript1.2" src="biblioteka.js"></script>Przez kilka kolejnych krok≤w bΩdziemy opracowywaµ sekcjΩ SCRIPT naszego pliku index.html.
Pierwsze zadanie to sprawdzenie, z jakiej przegl▒darki korzysta odwiedzaj▒cy:
nn4 = (document.layers) ? true:false;
ie4 = (document.all) ? true:false;
Zanim uruchomimy dynamiczne funkcje, musimy poczekaµ, a┐ za│aduj▒ siΩ wszystkie elementy naszej strony (plik HTML, skrypty i style). Poinformuje nas o tym przegl▒darka poprzez wywo│anie zdarzenia onload. Obs│uzymy to zdarzenie przypisuj▒c wywo│anie funkcji, kt≤r▒ nazwiemy init():
window.onload=init;
Powy┐sz▒ instrukcjΩ umieszczamy sekcji skryptu pliku index.html. Jest to polecenie uruchomienia funkcji init() zaraz PO za│adowaniu siΩ CAúEJ strony.
Do zada± funkcji init() nale┐y sprawdzenie wielko╢ci okna przegl▒darki, ustawienie pozycji wszystkich blok≤w, pokazanie wybranych blok≤w oraz uruchomienie prezentacji.
Szkic funkcji init():function init() {
okno();
pozycjonujWszystko();
pokazWszystko();
// wywo│ania innych funkcji
}
Pierwsza funkcja, okno(), sprawdza rozmiary okna przegl▒darki, w kt≤rym strona bΩdzie wy╢wietlana:
function okno(){
if(nn4){
oknoW = window.innerWidth-16;
oknoH = window.innerHeight
}else if(ie4){
oknoW = document.body.offsetWidth-20;
oknoH =document.body.offsetHeight
}
}
Umie╢cili╢my j▒ w bibliotece (biblioteka.js). Funkcja wpisuje do zmiennych oknoW i oknoH dostΩpn▒ szeroko╢µ i wysoko╢µ okna przegl▒darki. Od faktycznej szeroko╢ci okna odejmuje szeroko╢µ pionowego suwaka (16 pikseli dla NN i 20 dla IE).
Funkcja init() wywo│uje kolejno funkcje pozycjonujWszystko() i pokazWszystko(). Funkcja pozycjonuj▒ca rozmieszcza wszystkie bloki na ekranie. Rozmieszczenie blok≤w z uwzglΩdnieniem wielko╢ci okna zapewnia, ┐e dokument bΩdzie prezentowa│ siΩ wy╢mienicie niezale┐nie od rozmiar≤w okna przegl▒darki klienta. Pokazanie wybranych blok≤w dopiero po ich rozmieszczeniu na ekranie sprawia, ┐e odwiedzaj▒cy nie widzi, ┐e w tle wykonujemy przesuniΩcia blok≤w.
Czas na wype│nienie tre╢ci▒ pliku funkcje.js. Funkcje te maj▒ realizowaµ dynamiczne efekty, kt≤re zaprojektowali╢my w pierwszym etapie w kroku 4. Ta czΩ╢µ jest zdecydowanie najbardziej pracoch│onna, ale i sprawia najwiΩcej satysfakcji.
Do przygotowania skrypt≤w mo┐na zabraµ siΩ na dwa sposoby. Spos≤b pierwszy polega na pisaniu wszystkich funkcji "od zera", to znaczy korzystaj▒c z bibliotecznych funkcji tworzyµ w│asne dynamiczne efekty. Ten spos≤b wymaga co najmniej dobrej znajomo╢ci jΩzyka javascript. Drugi spos≤b polega na zaadoptowaniu gotowych funkcji na potrzeby w│asnej strony. To podej╢cie wymaga tylko og≤lnego zrozumienia jak dzia│a dana funkcja i ewentualnie odrobiny eksperyment≤w.
Do pe│ni naszego dzia│a pozosta│o ju┐ tylko kilka ostatnich poci▒gniΩµ pΩdzlem.
Aby nasz projekt by│ kompletny, musimy pamiΩtaµ r≤wnie┐ o tych, kt≤rzy nie maj▒ przegl▒darki czwartej generacji. Dla nich przygotowujemy prostsz▒ wersjΩ dokumentu w pliku index3.html. Zanim uruchomimy jakikolwiek skrypt musimy sprawdziµ, czy odwiedzaj▒cy korzysta z przegl▒darki czwartej generacji, a je┐eli nie - odes│aµ go do prostszego dokumentu.
W sekcji SCRIPT dokumentu index.html umieszczamy nastΩpuj▒c▒ instrukcjΩ:
if(!nn4 && !ie4) { location = "index3.htm" }
Zapewnienie wstecznej kompatybilno╢ci pozwoli obejrzeµ nasz▒ stronΩ ka┐demu bez wzglΩdu na model przegl▒darki.
Przyszed│ czas na obejrzenie naszego dzie│a. Je┐eli niekt≤re etapy wydaj▒ Ci siΩ niejasne, proponujemy przeanalizowaµ kod wszystkich plik≤w (zaczynaj▒c od pliku index.html i pliku funkcje.js), a nastΩpnie ponowne przejrzeµ artyku│ oraz spr≤bowaµ wprowadziµ r≤┐ne modyfikacje do przyk│adowej strony.