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.