Tajniki DHTML

DHTML, czyli dynamiczny HTML (Dynamic HTML) jest rozszerzeniem języka opisu stron, w którego skład wchodzą kaskadowy arkusz stylów (CSS& - Cascading Style Sheet) oraz nowe polecenia Java Script. Wykorzystanie jego możliwości sprawia, że stony nabierają większej interaktywności, a zarazem są estetyczniej wykonane. DHTML może być zatem używany do tworzenia gier, aplikacji, łatwieszej nawigacji i wielu innych kreatywnych rozwiązań, których zwykły HTML nie oferuje.

DHTML, czyli dynamiczny HTML (Dynamic HTML) jest rozszerzeniem języka opisu stron, w którego skład wchodzą kaskadowy arkusz stylów (CSS& - Cascading Style Sheet) oraz nowe polecenia Java Script. Wykorzystanie jego możliwości sprawia, że stony nabierają większej interaktywności, a zarazem są estetyczniej wykonane. DHTML może być zatem używany do tworzenia gier, aplikacji, łatwieszej nawigacji i wielu innych kreatywnych rozwiązań, których zwykły HTML nie oferuje.

Samo tworzenie strony jest łatwiejsze. Modyfikacje serwisu są znacząco szybsze przy zastosowaniu jednego pliku ze stylami. DHTML jest obsługiwany przez Microsoft Internet Explorer oraz Netscape Communicator (począwszy od wersji 4.0). Mimo że powstał standard tego języka, obie firmy interpretują go na swój sposób. A więc utworzenie strony przy użyciu DHTML sprowadza się do utworzenia odrębnego kodu dla każdej z przeglądarek. Opiszemy ten język, szerzej pokazując różnice między przeglądarkami i sposobami rozwiązań niektórych problemów, na podstawie doświadczeń nabytych podczas tworzenia serwisów internetowych.

Pozycjonowanie stylów

CSS jest rozwiązaniem umożliwiającym oddzielenie opisu wyglądu strony (rodzaj czcionki, kolor, umiejscowienie obiektów) od jej zawartości. W stylach można zapisać właściwości obiektu, a następnie umieścić go z dokładnością do jednego piksela w dowolnym miejscu na stronie. Jest to duża zaleta w szczególności w Netscapie, gdyż w jego wykonaniu tabele lub ramki mają inne wymiary na stronie w stosunku do zapisanych w kodzie źródłowym.

Najczęstszym znacznikiem wykorzystywanym do pozycjonowania obiektów lub fragmentów stron jest znacznik DIV. Sam w sobie nie zawiera żadnych poleceń języka HTML. Aby wykorzystać style, należy nadać znacznikowi identyfikator. Poniżej przedstawiono sposób użycia znacznika i nadanie identyfikatora "proba":

<DIV ID="proba">To jest próbny tekst</DIV>

Jako identyfikator może być użyty dowolny ciąg znaków i cyfr (należy zaczynać od litery i unikać polskich znaków). Nie należy stosować podkreśleń, gdyż wówczas Netscape źle interpretuje kod.

Treść strony zamknięta w znaczniku DIV często nazywana jest warstwą. Do tak zapisanej warstwy można się odwołać i zmieniać lub nadawać jej właściwości. Są dwa sposoby zapisania właściwości. Pierwszy to bezpośrednie wpisanie stylów do znacznika w poleceniuSTYLE, na przykład:

<DIV ID="proba" STYLE="różne style">To jest próbny tekst </DIV>

Drugi sposób polega na stosowaniu odrębnego znacznika STYLE, umieszczonego między działem HEAD a BODY. Stosowany jest w przypadku, kiedy kilka warstw ma mieć ten sam styl lub w jednym miejscu na stronie są zawarte wszystkie style. Przykładowy zapis przedstawiono poniżej:

</HEAD>

<STYLE TYPE="text/css">

<!-

#proba {różne style}

->

</STYLE>

<BODY>

<DIV ID="proba">To jest próbny tekst</DIV>

</BODY>

Jeżeli projektant strony będzie chciał zmienić styl w całym dokumencie, to szybko znajdzie jego zapis na początku kodu. Można przypisać kilka nazw identyfikacyjnych do tych samych stylów, oddzielając je przecinkami, na przykład:

#proba, #proba1 {różne

style}

Parametry i opcje są oddzielane dwukropkiem. Nie trzeba stosować wszystkich parametrów jednocześnie. Poniżej przedstawiony jest przykład użycia stylów:

<DIV ID="nameDiv" STYLE="position: absolute; left:50px; top:100px; width:200px; height:100px; clip:rect(0px 200px 100px 0px); visiblity:visible; z-index:1;">

</DIV>

Rozpoznanie przeglądarki

Właściwości warstwy można zmieniać w trakcie działania strony. Zmian dokonuje się przy użyciu składni poleceń języka JavaScript. Niestety, inaczej jest w przypadku Internet Explorera, a inaczej w przypadku Netscape'a. Dlatego aby napisana strona była dobrze widoczna w obu przeglądarkach, trzeba pisać kod dla każdej z nich osobno.

Należy stwierdzić, z jaką przeglądarką ma się do czynienia, a następnie wybrać odpowiedni kod źródłowy.

Oto fragment kodu, który rozróżni przeglądarki:###

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

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

Utworzenie zmiennych logicznych powoduje, że kod przygotowany dla Explorera będzie użyty tylko przez niego, a kod przeznaczony dla Netscape'a będzie pominięty i nie wywoła żadnych błędów.

Po poprawnym zidentyfikowaniu rodzaju przeglądarki można zmieniać właściwości każdej warstwy. W przypadku Netscape'a standardowym sposobem dotarcia do tych właściwości jest użycie następującej składni:

Document.layers['nameDiv'].propertyName;

a w przypadku Internet Explorera jest to składnia:###

document.all['nameDiv'].style.propertyName;

Parametry warstwy można zmienić tylko wtedy, gdy warstwa została już wczytana z kodu źródłowego i umieszczona na stronie w przeglądarce. Jeżeli zmienia się właściwości w czasie uruchamiania strony, należy te zmiany umieścić w funkcji, którą się wywołuje w znaczniku BODY jako zdarzenie OnLoad. Poniżej przedstawiony jest przykład wykonania takiej operacji.

<SCRIPT LANGUAGE="JavaScript">

<!-

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

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

function init() {

if (ie4) {

document.all['nameDiv'].style.top=100;

} else if (ns4) {

document.layers['nameDiv'].top=100;

}

}

//->

</SCRIPT>

<BODY onLoad="init()">

<DIV ID="nameDiv" STYLE="position: absolute; top: 10;">To jest tekst</DIV>

</BODY>


Zobacz również