Tajniki DHTML


Wczytywanie plików zewnętrznych

DHTML oferuje też możliwość wczytywania informacji z zewnętrznych plików i umieszczania ich bezpośrednio na stronie. W Netscapie zostały do tego wykorzystane warstwy, a w Explorerze odmiana tabelek, ale traktowana jak ramki. Ze względu na tak różny sposób obsługi należy zapisać dwie niezależne funkcje. Netscape ma znacznik LAYER z atrybutem SRC. Można go wykorzystać do wczytania zewnętrznego pliku do warstwy. Nie definiuje się stylów, gdyż te właściwości są już atrybutami. Przykładowy wiersz wczytujący plik do warstwy w Netscapie pokazano poniżej:

<LAYER NAME="textLayer" SRC="text.html" LEFT=50 TOP=50 WIDTH=300 HEIGHT=200 CLIP="0,0,300,200"></LAYER>

W przypadku Explorera należy użyć znacznika IFRAME. Przeglądarka traktuje go jak ramkę i aby umieścić ją w odpowiednim miejscu, należy używać warstwy zdefiniowanej znacznikiem DIV. Poniżej przedstawiono przykład umieszczenia na stronie informacji wczytanej z zewnętrznego pliku:

<STYLE TYPE="text/css">

#textDiv {position:absolute; left:50; top:50; width:300; height;200; clip:rect(0,300,200,0);}

</STYLE>

<DIV ID="textDiv">

<IFRAME SRC="text.html" NAME="textFrame" SCROLLING="No" WIDTH="300" HEIGHT="200" MARGINWIDTH=0 MARGINHEIGHT=0 FRAMEBORDER="No"></IFRAME>

</DIV>

Aby napisać stronę, która będzie poprawnie działała w obu przeglądarkach, należy w części kodu języka HTML zapisać warunek dotyczący rodzaju przeglądarki i wyświetlać odpowiedni kod. Poniżej pokazano przykładowy zapis takiego warunku.

<STYLE TYPE="text/css">

#textDiv {position:absolute; left:50; top:50; width:300; height;200; clip:rect(0,300,200,0);}

</STYLE>

<SCRIPT LANGUAGE="JavaScript">

<!-

ns4 = (document.layers)? true:false;

ie4 = (document.all)? true:false;

srcIE='<DIV ID="textDiv"><IFRAME

SRC="text.html" NAME="textFrame" SCROLLING="No" WIDTH="300" HEIGHT="200" MARGINWIDTH=0 MARGINHEIGHT=0 FRAMEBORDER="No"></IFRAME></DIV>';

srcNS='<LAYER NAME="textLayer" SRC="text.html" LEFT=50 TOP=50 WIDTH=300 HEIGHT=200 CLIP="0,0,300,200"></LAYER>';

//->

</SCRIPT>

<BODY>

<SCRIPT LANGUAGE="JavaScript">

<!-

if (ie4) {

document.write(srcIE);

} else if (ns4) {

document.write(srcNS);

}

//->

</SCRIPT>

</BODY>

Można zmieniać dynamicznie zawartość wczytanych danych na inne, pochodzące z kolejnego pliku. W przypadku Netscape'a należy zmienić atrybut [SRC], a w Explorerze wczytać inny plik do ramki. Przykładową funkcję ładującą plik przedstawiono poniżej:

function load(page) {

if (ns4) document.textLayer.src = page;

else if (ie4) parent.textFrame.document.location = page;

}

Należy pamiętać, że format wczytywanego pliku powinien być znany przeglądarce. Netscape nie radzi sobie dobrze z wczytywaniem plików z rozszerzeniem.txt, ale po zmianie tego rozszerzenie na.html wczytuje go bez problemowo.

Podsumowanie

Wykorzystując rozwiązania, jakie oferuje DHTML można łatwo wykonać dynamiczne menu czy interaktywne formularze. Łatwiejsze jest także wykonanie grafik zmieniających się pod wpływem ruchu myszą. Wykorzystując animacje, można budować efektowne witryny, w których teksty pojawiają się, "wjeżdżając" na stronę, a menu może się płynnie rozwijać i chować. Najważniejsze jest, że nasze strony będą dobrze wyglądały i działały zarówno w Internet Explorerze, jak i w Netscape Communicatorze. Połączenie wysiłków twórców przeglądarek i ujednolicenie sposobu interpretowania kodu spopularyzowałoby język DHTML wśród twórców stron. Przeglądarki obu czołowych producentów świadczą jednak o daleko idącej rozbieżności, na dodatek kolejne wersje przeglądarek zawierają nowe składnie, zastępujace stare. Dlatego zdarza się, że strona dobrze wyglądająca i działająca w wersji 4.0 Explorera w piątej wersji powoduje błędy w czasie wyświetlania.

Najczęstsze style stosowane do pozycjonowania

<font color="red">position - określa rodzaj pozycjonowania: <font color="red">"relative" - czyli relatywnie do miejsca, w którym został zapisany w kodzie źródłowym, "absolute" - wartości pozycji będą zawsze liczone od początku dokumentu i warstwa zostanie pokazana w dokładnie określonym miejscu,

<font color="red">left - odległość podawana w pikselach od lewego brzegu okna przeglądarki,

<font color="red">top - odległość podawana w pikselach od górnego brzegu okna przeglądarki,

<font color="red">width - szerokość znacznika DIV. Każda treść (tekst, kod HTML) znajdująca się wewnątrz znacznika DIV zostanie zawinięta do szerokości określonej przez ten parametr,

<font color="red">height - wysokość znacznika DIV. Niepodanie tego znacznika może powodować podobne efekty jak w przypadku atrybutu width,

<font color="red">clip - zawiera współrzędne prostokąta umiejscowionego nad warstwą przez który możemy oglądać to co jest na warstwie umieszczone. Prostokąt ten jest definiowany przez wartości jego czterech rogów np. <font color="red">clip:rect(top,right,bottom,left),

<font color="red">visibility - określa, czy warstwa jest widoczna <font color="red">(visible), czy ukryta <font color="red">(hidden). Opcje tej właściwości właściwości są inne dla Explorera i inne dla Netscape'a. Jednakże początkowe ustawienia użyte dla Explorera są poprawnie interpretowane przez Netscape'a. Można też ustawić parametr inherit, który oznacza, że widzialność będzie dziedziczona,

<font color="red">z-index - właściwość określająca kolejność układania warstw DIV lub odległość obiektu od okna przeglądarki w kierunku osi z. Jeżeli obiekt A będzie miał ustawiony styl <font color="red">z-index:10, a obiekt B <font color="red">z-index:20, to obiekt B będzie wyżej niż A i w przypadku tych samych parametrów<font color="red">left i <font color="red">top B przysłoni A,

<font color="red">background-color - kolor tła warstwy DIV. W Netscapie ten parametr jest źle interpretowany,

<font color="red">layer-background-color - kolor tła warstwy DIV dla Netscape'a,

<font color="red">background-image - obrazek tła warstwy DIV dla Internet Explorera,

<font color="red">layer-background-image - obrazek tła warstwy DIV dla Netscape'a.