Hur dynamisk HTML (DHTML) används för att skapa interaktiva sidor

Dynamisk HTML är egentligen inte en ny specifikation av HTML utan snarare ett annat sätt att titta på och kontrollera standard HTML-koder och kommandon.

När man tänker på dynamisk HTMLmåste du komma ihåg kvaliteten på standard HTML, särskilt att när en sida laddas från servern kommer den inte att ändras förrän en annan begäran kommer till servern. Dynamisk HTML ger dig mer kontroll över HTML-elementen och låter dem ändras när som helst utan att återvända till webbservern.

Det finns fyra delar till DHTML:

  • Document Object Model (DOM) (definition)
  • Skript
  • Cascading Style Sheets (CSS)
  • XHTML

DOM

DOM är det som låter dig komma åt någon del av din webbsida för att ändra den med DHTML. Varje del av en webbsida specificeras av DOM och med hjälp av dess konsekventa namnkonventioner kan du komma åt dem och ändra deras egenskaper.

Skript

Skript skrivna i antingen JavaScript eller ActiveX är de två vanligaste skriptspråken som används för att aktivera DHTML. Du använder ett skriptspråk för att styra objekten som anges i DOM.

instagram viewer

Cascading Style Sheets

CSS används i DHTML för att kontrollera utseendet på webbsidan. Stilark definierar textens färger och teckensnitt, bakgrundsfärger och bilder och placeringen av objekt på sidan. Med hjälp av skript och DOM kan du ändra stil för olika element.

XHTML

XHTML eller HTML 4.x används för att skapa själva sidan och bygga elementen för CSS och DOM att jobba på. Det finns inget speciellt med XHTML för DHTML - men att ha giltig XHTML är ännu viktigare, eftersom det finns fler saker som fungerar från det än bara webbläsaren.

Funktioner i DHTML

Det finns fyra primära funktioner i DHTML:

  1. Ändra taggar och egenskaper
  2. Positionering i realtid
  3. Dynamiska teckensnitt (Netscape Communicator)
  4. Databindning (Internet Explorer)

Ändra taggar och egenskaper

Detta är en av de vanligaste användningarna av DHTML. Det låter dig ändra egenskaperna hos en HTML-tagg beroende på en händelse utanför webbläsaren (t.ex. ett musklick, tid eller datum osv.). Du kan använda detta för att förinstallera information på en sida och inte visa den om inte läsaren klickar på en specifik länk.

Positionering i realtid

När de flesta tänker på DHTML är det vad de förväntar sig. Objekt, bilder och text rör sig på webbsidan. Detta kan låta dig spela interaktiva spel med dina läsare eller animera delar av skärmen.

Dynamiska teckensnitt

Detta är en Netscape-enda funktion. Netscape utvecklade detta för att komma runt de problem som designers hade med att inte veta vilka teckensnitt som skulle finnas på en läsares system. Med dynamiska teckensnitt kodas teckensnitt och laddas ner med sidan så att sidan alltid ser ut som designern tänkt. Du kan också använda webbsäkra teckensnitt.

Databindning

Detta är en IE-enda funktion. Microsoft utvecklade detta för att möjliggöra enklare åtkomst till databaser från webbplatser. Det liknar mycket att använda CGI för att komma åt en databas men använder en ActiveX-kontroll för att fungera. Den här funktionen är mycket avancerad och svår att använda för den nya DHTML-författaren.