DML Dynamic HTML. Inhaltsübersicht n Vorstellungsrunde n Einführung n Image Rollover - Die erste DHTML- Anwendung n Die 3 Grundbausteine von DHTML n Die

DMLDML

Dynamic HTMLDynamic HTML

Inhaltsübersicht Inhaltsübersicht

VorstellungsrundeVorstellungsrunde EinführungEinführung Image Rollover - Die erste DHTML-Image Rollover - Die erste DHTML-

AnwendungAnwendung Die 3 Grundbausteine von DHTMLDie 3 Grundbausteine von DHTML Die wichtigsten DOM-ObjekteDie wichtigsten DOM-Objekte 4 Anwendungen von DHTML4 Anwendungen von DHTML Verschiedene Formen von DHTMLVerschiedene Formen von DHTML

VorstellungsrundeVorstellungsrunde Name, FirmaName, Firma Erfahrungen Erfahrungen

– Kenntnisse HTMLKenntnisse HTML– Kenntnisse CSSKenntnisse CSS– Kenntnisse JavaScript / OO-ProgrammierungKenntnisse JavaScript / OO-Programmierung– Ihr Projekt, Zielmedium (Internet / Intranet) Ihr Projekt, Zielmedium (Internet / Intranet) – WerkzeugeWerkzeuge

Persönliche KurszielePersönliche Kursziele– Gelerntes wie anwenden?Gelerntes wie anwenden?– Spezielle FragenSpezielle Fragen

EinführungEinführung

DHTML ist kein ProduktDHTML ist kein Produkt DHTML ist kein StandardDHTML ist kein Standard DHTML ist ein Konzept, DHTML ist ein Konzept,

zusammengesetzt aus mehreren zusammengesetzt aus mehreren StandardsStandards

Kapitel 1Kapitel 1

Was ist DHTMLWas ist DHTML

DHTML nennen wir DHTML nennen wir das Verändern von Elementen auf einer das Verändern von Elementen auf einer

Webseite, Webseite, nachdem sie fertig geladen ist, nachdem sie fertig geladen ist, mittels einer Scriptsprache,mittels einer Scriptsprache, dem Browser-Objektmodell dem Browser-Objektmodell und unter Zuhilfenahme von CSS,und unter Zuhilfenahme von CSS, ohne nochmals den Server aufzurufenohne nochmals den Server aufzurufen

Kapitel 1Kapitel 1

DHTML-BeispieleDHTML-Beispiele

http://www.yaromat.com/macos8/http://www.yaromat.com/macos8/index.htmindex.htm

http://www.desktop.com http://www.desktop.com http://www.htmlguru.comhttp://www.htmlguru.com http://www.bratta.comhttp://www.bratta.com http://www.borgstrom.com http://www.borgstrom.com http://www.corenet.ch/http://www.corenet.ch/

Übung 1: Image Rollover - Übung 1: Image Rollover - Die erste DHTML-Die erste DHTML-AnwendungAnwendung

Übung 1a: Image RolloverÜbung 1a: Image Rollover– Beim Überfahren des Auges mit der Beim Überfahren des Auges mit der

Maus soll es sich öffnen. Dazu tauschen Maus soll es sich öffnen. Dazu tauschen wir das Bild des geschlossenen Auges wir das Bild des geschlossenen Auges durch das offene ausdurch das offene aus

Übung 1b: Image CachingÜbung 1b: Image Caching– Damit keine Verzögerung beim Damit keine Verzögerung beim

Überfahren mit der Maus eintritt, cachen Überfahren mit der Maus eintritt, cachen wir die Bilder versteckt beim Laden der wir die Bilder versteckt beim Laden der SeiteSeite

Übung 1a: Image RolloverÜbung 1a: Image Rollover

Ergänzen Sie im Anchor-Tag die Events Ergänzen Sie im Anchor-Tag die Events "onMouseOver" und "onMouseOut" so, "onMouseOver" und "onMouseOut" so, dass das Image-Objekt als Argument an dass das Image-Objekt als Argument an die Zielfunktionen übergeben wirddie Zielfunktionen übergeben wird

Schreiben Sie die imgover- und imgout-Schreiben Sie die imgover- und imgout-Funktionen, so dass das src-Attribut des Funktionen, so dass das src-Attribut des übergebenen imgobject auf das jeweils übergebenen imgobject auf das jeweils andere Bild gesetzt wirdandere Bild gesetzt wird

Testen Sie die Seite mit NS4 und IE4/5Testen Sie die Seite mit NS4 und IE4/5

Übung 1b: Image CachingÜbung 1b: Image Caching

Schreiben Sie in den Scriptbereich im Schreiben Sie in den Scriptbereich im HEAD Code, der zwei neue Image-HEAD Code, der zwei neue Image-Objekte erzeugt (var = New Image())Objekte erzeugt (var = New Image())

Weisen Sie den src-Attributen dieser Weisen Sie den src-Attributen dieser Objekte die Adressen der beiden Objekte die Adressen der beiden Augenbilder zuAugenbilder zu

Testen Sie die Seite mit NS4 und Testen Sie die Seite mit NS4 und IE4/5IE4/5

Die 4 Grundbausteine von Die 4 Grundbausteine von DHTMLDHTML

HTMLHTML– http://www.w3.org/MarkUp/http://www.w3.org/MarkUp/

JavaScriptJavaScript– http://www.ecma.ch/stand/ECMA-262.htm http://www.ecma.ch/stand/ECMA-262.htm – http://developer.netscape.com/docs/manuals/js/client/jsref/http://developer.netscape.com/docs/manuals/js/client/jsref/– http://msdn.microsoft.com/scripting/jscript/doc/jstoc.htmhttp://msdn.microsoft.com/scripting/jscript/doc/jstoc.htm

Document Object Model DOMDocument Object Model DOM– http://w3.http://w3.orgorg/DOM/DOM

Cascading Style Sheets CSSCascading Style Sheets CSS– http://w3.http://w3.orgorg/Style//Style/csscss

HTMLHTML

Ist eine SeitenbeschreibungsspracheIst eine Seitenbeschreibungssprache Wichtige ElementeWichtige Elemente

TagTag

AttributAttribut

WertWert

<<IMGIMG SRCSRC="="/images/foeteli.jpg/images/foeteli.jpg">">

JavaScript...JavaScript...

...hat mit Java ausser einer gewissen ...hat mit Java ausser einer gewissen Syntax-Ähnlichkeit nicht viel gemeinsam.Syntax-Ähnlichkeit nicht viel gemeinsam.

...ist eine prozedurale Skriptsprache...ist eine prozedurale Skriptsprache ...ist objektbasiert (nicht objektorientiert)...ist objektbasiert (nicht objektorientiert) ...wird interpretiert, und zwar durch den ...wird interpretiert, und zwar durch den

BrowserBrowser ...heisst eigentlich offiziell ECMA-Script ...heisst eigentlich offiziell ECMA-Script

(JavaScript bei Netscape, JScript bei (JavaScript bei Netscape, JScript bei Microsoft)Microsoft)

S. 11-12, Kapitel 11S. 11-12, Kapitel 11

JavaScript Rekapitulation:JavaScript Rekapitulation:Object – Property - Method Object – Property - Method

Object Object (Objekt)(Objekt)

var mycar = new Car();var mycar = new Car();(object = Substantiv)(object = Substantiv)

Property Property (Eigenschaft, Attribut)(Eigenschaft, Attribut)

mycar.color = „red“;mycar.color = „red“;(property = Adjektiv des Objekts)(property = Adjektiv des Objekts)

Method Method (Methode)(Methode)

mycar.accelerate();mycar.accelerate();(method = Verb des Objekts)(method = Verb des Objekts)

Das Document Object Das Document Object ModelModel

Das Document Object Model Das Document Object Model (DOM) ist eine (DOM) ist eine Programmierschnittstelle (API) Programmierschnittstelle (API) für HTML und XML Dokumentefür HTML und XML Dokumente

Das DOM macht alle Elemente Das DOM macht alle Elemente (Tags, Objekte) einer Webseite in (Tags, Objekte) einer Webseite in einem Objektbaum zugänglicheinem Objektbaum zugänglich


DOM StrukturDOM Struktur

TheTheCurrentCurrentWindowWindow

self, window,parent, top

Various Window objects

navigatorNavigator object

frames[]array of Window objects

locationLocation object

historyHistory object

documentDocument object

plugins[]array of Plugin objects

mimeTypes[]array of MimeType objects

forms[]array of Form objects

anchors[]array of Anchor objects

links[]array of Link objects

images[]array of Image objects

applets[]array of applets

embeds[]array of embedded objects

elements[]

array of HTML FormElement Objects:

Button Checkbox FileUpload Hidden Password Radio Reset Select Submit Text Textarena

options[]array of

Option objects


((http://www.w3.org/TR/REC-DOM-Level-1/ecma-script-language-binding.html)http://www.w3.org/TR/REC-DOM-Level-1/ecma-script-language-binding.html)

Die wichtigsten DOM-Die wichtigsten DOM-ObjekteObjekte

Standard-HTML-TagsStandard-HTML-Tags– Danny Goodman‘s Object RoadmapDanny Goodman‘s Object Roadmap

Container-ObjekteContainer-Objekte– DIV (Netscape 5+, IE 4+)DIV (Netscape 5+, IE 4+)– SPAN (Netscape 5+, IE 4+)SPAN (Netscape 5+, IE 4+)– LAYER (nur Netscape 4)LAYER (nur Netscape 4)

Übung 2a: Übung 2a: Datums-/ZeitanzeigeDatums-/Zeitanzeige

Eine sekundenweise aktualisierte Eine sekundenweise aktualisierte Uhr soll per DHTML auf die Seite Uhr soll per DHTML auf die Seite geschrieben werdengeschrieben werden

Dazu wird ein Containerobjekt Dazu wird ein Containerobjekt geschaffen (DIV), dessen Inhalt geschaffen (DIV), dessen Inhalt (Attribut innerHTML) jede Sekunde (Attribut innerHTML) jede Sekunde durch die aktuelle Zeit ersetzt wirddurch die aktuelle Zeit ersetzt wird

Welches sind die wichtigsten 3 Welches sind die wichtigsten 3 Zeilen dieses DHTML-Codes?Zeilen dieses DHTML-Codes?

CSSCSS

Cascading Style Sheets Cascading Style Sheets erlauben das Setzen und erlauben das Setzen und Verändern der Verändern der Darstellungseigenschaften Darstellungseigenschaften von Elementen einer von Elementen einer Webseite. Webseite.

Kapitel 3 + 10Kapitel 3 + 10

Welche Browser Welche Browser unterstützen CSS?unterstützen CSS?

Internet Explorer ab Version 3Internet Explorer ab Version 3 Netscape Navigator ab Version 4 Netscape Navigator ab Version 4

(stark fehlerbehaftet)(stark fehlerbehaftet) Opera ab Version 3.5Opera ab Version 3.5

Vier Arten von Cascading Vier Arten von Cascading Style SheetsStyle Sheets

Inline StylesInline Styles– Für jedes Element einzeln den Style definierenFür jedes Element einzeln den Style definieren

Embedded Style SheetsEmbedded Style Sheets– Styles spezifisch für eine Webseite definierenStyles spezifisch für eine Webseite definieren

External Style SheetExternal Style Sheet– Globale Styles für die gesamte Website Globale Styles für die gesamte Website

definierendefinieren Imported Style SheetImported Style Sheet

– Globale Styles für andere Stylesheets vorgebenGlobale Styles für andere Stylesheets vorgeben

Style-Attribut als Style-Attribut als Verbindung zu den CSS-Verbindung zu den CSS-PropertiesProperties

Jedes Objekt auf einer Seite hat ein Jedes Objekt auf einer Seite hat ein style-Attributstyle-Attribut

Das style-Attribut ist eine Das style-Attribut ist eine Collection, in der alle CSS-Attribute Collection, in der alle CSS-Attribute gesammelt sind und verändert gesammelt sind und verändert werden könnenwerden können

Netscape-Implementation ist Netscape-Implementation ist fehlerhaftfehlerhaft

Übung 2b: Übung 2b: Class "Uhr" definierenClass "Uhr" definieren

Grundlage: Seite aus Übung 2aGrundlage: Seite aus Übung 2a Definieren Sie die Klasse "Uhr" im Definieren Sie die Klasse "Uhr" im

eingebundenen Style Sheet mit den eingebundenen Style Sheet mit den folgenden Angaben:folgenden Angaben:

Schriftart (font-family): "Century Schriftart (font-family): "Century Gothic" und "Arial"Gothic" und "Arial"

Schriftgrösse (font-size): 36 PunkteSchriftgrösse (font-size): 36 Punkte Farbe (color): BlauFarbe (color): Blau Testen Sie die Seite mit IE4/5Testen Sie die Seite mit IE4/5

Übung 2c: Übung 2c: Funktionen ergänzenFunktionen ergänzen

Funktion "rot"Funktion "rot"– Ändert die Farbe (Attribut "color") des Elements Ändert die Farbe (Attribut "color") des Elements

"MicrosoftUhr" auf Rot (red oder #ff0000)"MicrosoftUhr" auf Rot (red oder #ff0000)– Ändert die Schriftgrösse (Attribut "font-size") des Ändert die Schriftgrösse (Attribut "font-size") des

Elements "MicrosoftUhr" auf 12 Punkte (12pt)Elements "MicrosoftUhr" auf 12 Punkte (12pt) Funktion "gruen"Funktion "gruen"

– Ändert die Farbe des Elements "MicrosoftUhr" Ändert die Farbe des Elements "MicrosoftUhr" auf Grün (green oder #00ff00)auf Grün (green oder #00ff00)

– Ändert die Schriftgrösse des Elements Ändert die Schriftgrösse des Elements "MicrosoftUhr" auf 24 Punkte (24pt)"MicrosoftUhr" auf 24 Punkte (24pt)

Testen Sie die Seite mit IE4/5Testen Sie die Seite mit IE4/5

Übung 3:Übung 3:interne/externe Hyperlinksinterne/externe Hyperlinks

Ziel: Ein DHTML-Script läuft durch Ziel: Ein DHTML-Script läuft durch alle Hyperlinks einer Seite durch und alle Hyperlinks einer Seite durch und verändert ihr Aussehen, wenn es verändert ihr Aussehen, wenn es sich um externe Hyperlinks handeltsich um externe Hyperlinks handelt

Vorteil: Autoren von Seiten müssen Vorteil: Autoren von Seiten müssen sich bei der Erstellung von Seiten sich bei der Erstellung von Seiten nicht um diese Kennzeichnung nicht um diese Kennzeichnung kümmernkümmern

Übung 3:Übung 3:interne/externe Hyperlinksinterne/externe Hyperlinks

a)a) ergänzen Sie den <body>-Tag so, dass die Funktion ergänzen Sie den <body>-Tag so, dass die Funktion "initialisieren()" beim Laden der Seite gestartet wird"initialisieren()" beim Laden der Seite gestartet wird

b)b) for-Schlaufe:for-Schlaufe:– ergänzen Sie die for-Schlaufe mit einem "if" und "else" Statementergänzen Sie die for-Schlaufe mit einem "if" und "else" Statement– b.1) if-Statement(externe Links):b.1) if-Statement(externe Links):

kontrollieren Sie, ob die ersten vier Zeichen des Links (Attribut href) kontrollieren Sie, ob die ersten vier Zeichen des Links (Attribut href) ="http" sind="http" sind

wenn das zutrifft, weisen Sie dem Link die Farbe Rot zuwenn das zutrifft, weisen Sie dem Link die Farbe Rot zu– b.2) else-Statement(interne Links):b.2) else-Statement(interne Links):

weisen Sie den restlichen Links(interne Links) die Farbe Grün zuweisen Sie den restlichen Links(interne Links) die Farbe Grün zu

c)c) testen Sie die Seite mit IE 4/5testen Sie die Seite mit IE 4/5d)d) fügen Sie weitere interne und externe Hyperlinks hinzu fügen Sie weitere interne und externe Hyperlinks hinzu

und testen Sie die Seite erneut mit IE 4/5 und testen Sie die Seite erneut mit IE 4/5

Identifizieren der Identifizieren der ElementeElemente

Jedem Element, dass Sie dynamisch Jedem Element, dass Sie dynamisch bearbeiten wollen, müssen Sie eine ID per bearbeiten wollen, müssen Sie eine ID per HTML-Attribut zuweisenHTML-Attribut zuweisen

Wenn Sie Elemente positionieren, sollten Wenn Sie Elemente positionieren, sollten Sie die Element in die "Container" <div> Sie die Element in die "Container" <div> oder <span> einschliessen. (Weder IE noch oder <span> einschliessen. (Weder IE noch Netscape unterstützt das Positionieren von Netscape unterstützt das Positionieren von nicht-Container-Elementen vollständig)nicht-Container-Elementen vollständig)

Die ID des Containers findet sich im DOM Die ID des Containers findet sich im DOM wiederwieder

ID im DOMID im DOM

IE 4/5IE 4/5– document.all.document.all.idid

Netscape 4Netscape 4– document.layers.document.layers.idid– Wenn Container in Containern liegen:Wenn Container in Containern liegen:

document.layers.document.layers.idid.document.layers..document.layers.idid

S. 80-85S. 80-85

Übung 4: Übung 4: DHTML PositionierungDHTML Positionierung

Element dynamisch verschiebenElement dynamisch verschieben function moveIE ist für IE 4/5 und function moveIE ist für IE 4/5 und

spricht das Objekt "objectIE" anspricht das Objekt "objectIE" an function moveNS ist für Netscape 4 function moveNS ist für Netscape 4

und spricht das Objekt "objectNS" anund spricht das Objekt "objectNS" an

Übung 4a) Übung 4a) DHTML PositionierungDHTML Positionierung

Rufen Sie mit den Hyperlinks die Rufen Sie mit den Hyperlinks die entsprechenden Funktionen auf (URL entsprechenden Funktionen auf (URL ist "Javascript:funktion()")ist "Javascript:funktion()")

Übergeben Sie der Funktion die Übergeben Sie der Funktion die entsprechenden Zielwerte (x/y) entsprechenden Zielwerte (x/y)

Übung 4b) Übung 4b) DHTML PositionierungDHTML Positionierung

Funktion "moveIE":Funktion "moveIE":– Übergeben Sie der Style-Übergeben Sie der Style-

Objekteigenschaft "pixelTop" des Objekteigenschaft "pixelTop" des Elements "elementIE" den Wert von "y"Elements "elementIE" den Wert von "y"

– Übergeben Sie der Style-Übergeben Sie der Style-Objekteigenschaft "pixelLeft" des Objekteigenschaft "pixelLeft" des Elements "elementIE" den Wert von "x" Elements "elementIE" den Wert von "x"

Übung 4c) Übung 4c) DHTML PositionierungDHTML Positionierung

Funktion "moveNS"Funktion "moveNS"– Übergeben Sie der Eigenschaft "top" des Übergeben Sie der Eigenschaft "top" des

Layer-Objekts "elementNS" den Wert von "y"Layer-Objekts "elementNS" den Wert von "y"– Übergeben Sie der Eigenschaft "left" des Übergeben Sie der Eigenschaft "left" des

Layer-Objekts "elementNS" den Wert von "x"Layer-Objekts "elementNS" den Wert von "x"

Testen Sie die Seite mit Netscape 4 und Testen Sie die Seite mit Netscape 4 und IE 4/5IE 4/5

Übung 4d) Übung 4d) DHTML PositionierungDHTML Positionierung

Funktion "moveNS"Funktion "moveNS"– Das Layer-Objekt besitzt die Das Layer-Objekt besitzt die

Methode(Method) "moveTo()"Methode(Method) "moveTo()"– Statt der "top"- und "left"-Eigenschaft Statt der "top"- und "left"-Eigenschaft

wenden Sie die Methode "moveTo()" an wenden Sie die Methode "moveTo()" an Testen Sie die Seite mit Netscape 4Testen Sie die Seite mit Netscape 4

4 Anwendungen von 4 Anwendungen von DHTMLDHTML

TexteffekteTexteffekte– Liquid HTMLLiquid HTML

NavigationseffekteNavigationseffekte– Information HidingInformation Hiding– Floating ContainersFloating Containers– Zweistufige Dropdown-NavigationZweistufige Dropdown-Navigation

Liquid HTMLLiquid HTML

Fliesstext schreibenFliesstext schreiben Zu erklärende Worte als Hyperlinks Zu erklärende Worte als Hyperlinks

markierenmarkieren Funktion schreiben, die Funktion schreiben, die

erklärenden Text erklärenden Text erscheinen/verschwinden lässterscheinen/verschwinden lässt

Beispiel in KursdateienBeispiel in Kursdateien

Information HidingInformation Hiding

Ein Gefäss für Intro-Text definieren Ein Gefäss für Intro-Text definieren (DIV)(DIV)

3 Hyperlinks mit Besucherprofilen 3 Hyperlinks mit Besucherprofilen (Entwickler, Endbenutzer, Entscheider)(Entwickler, Endbenutzer, Entscheider)

Je nach Hyperlink unterschiedliche Je nach Hyperlink unterschiedliche Inhalte im Intro-Text-Gefäss Inhalte im Intro-Text-Gefäss einblendeneinblenden

Beispiel in KursdateienBeispiel in Kursdateien

Floating ContainersFloating Containers

DIVs mit Inhalten definierenDIVs mit Inhalten definieren Auf Mausklick DIV aufnehmen, Auf Mausklick DIV aufnehmen,

ablegenablegen http://www.teamone.de/selfhtml/http://www.teamone.de/selfhtml/

tfcb.htmtfcb.htm

Zweistufige Dropdown-Zweistufige Dropdown-NavigationNavigation

Formular mit Dropdown und Go-ButtonFormular mit Dropdown und Go-Button– http://http://starsstars..comcom//AuthoringAuthoring/HTML//HTML/FormsForms//

selectselect_s._s.htmlhtml Option 1: Objektmethode bei Dropdown-Option 1: Objektmethode bei Dropdown-

AuswahlAuswahl– http://http://wwwwww..ceicei..netnet/~/~rgriebelrgriebel/drop./drop.htmlhtml

Option 2: Ändern des Dropdown 2 Option 2: Ändern des Dropdown 2 aufgrund Auwahl Dropdown 1aufgrund Auwahl Dropdown 1– http://bronze.http://bronze.chch/deutsch//deutsch/prodprod/halb/halb

Verschiedene Formen von Verschiedene Formen von DHTMLDHTML

W3C-DOM-StandardW3C-DOM-Standard IE4-/IE5-ImplementationIE4-/IE5-Implementation Netscape 4 – Implementation Netscape 4 – Implementation Netscape 5 - ImplementationNetscape 5 - Implementation

Cross-Browser DHTML Cross-Browser DHTML

Der erste Schritt:Der erste Schritt: Was sind meine Ziele?Was sind meine Ziele? Welche Browser benützt meine Welche Browser benützt meine

Zielgruppe?Zielgruppe?

Kapitel 2, S. 86-93Kapitel 2, S. 86-93

Beispielszenarien: Beispielszenarien:

Alle Browser müssen dieselbe Alle Browser müssen dieselbe Funktionalität erhaltenFunktionalität erhalten

Wir senden alle nicht-DOM-Wir senden alle nicht-DOM-kompatiblen Browser zu einer nur-kompatiblen Browser zu einer nur-Text-Variante der SiteText-Variante der Site

Browser von Version 4.0 oder höher Browser von Version 4.0 oder höher erhalten dynamische Version, alle erhalten dynamische Version, alle andern müssen bloss lesen und andern müssen bloss lesen und navigieren könnennavigieren können

Kapitel 2, S. 86-93Kapitel 2, S. 86-93

Branching Branching

Browserversions-UnterscheidungBrowserversions-Unterscheidung Auf 3 Ebenen möglichAuf 3 Ebenen möglich

– High Level BranchingHigh Level Branching Mehrere Seiten für mehrere BrowserMehrere Seiten für mehrere Browser

– Mid Level BranchingMid Level Branching Frühe Zuweisung symbolischer VariabelnFrühe Zuweisung symbolischer Variabeln

– Low Level BranchingLow Level Branching Jedes Statement mit IF versehenJedes Statement mit IF versehen

S. 21-27S. 21-27

High Level BranchingHigh Level Branching

Browser/Version?

ns4.htm dom.htmnodhtml.htm

Netscape 4 IE 4+, Netscape 5+

andere

Mid Level BranchingMid Level Branching

page.htm

Browser/Version?

ns4var objects = document.layers

function myFunc(myObject)myId = objects.myObject.id

domvar objects = document.all


Low Level BranchingLow Level Branching

page.htm

function changeBG(myObj)

Browser/Version?

objects.myObj.bgColor= „red“ objects.myObj.style.backgroundColor=„red“


Browser-UnterscheidungBrowser-Unterscheidung

ClientseitigClientseitig– Navigator-ObjektNavigator-Objekt– document.all / document.layers document.all / document.layers

Serverseitig (IIS 4, ASP)Serverseitig (IIS 4, ASP)– browscap.inibrowscap.ini– BrowserHawkBrowserHawk

http://http://wwwwww..browscapbrowscap..comcom

S. 26, 661-667S. 26, 661-667

Übung 5: Übung 5: Mid Level BranchingMid Level Branching

Verschachtelte Layer ansprechenVerschachtelte Layer ansprechen testen Sie die Seite mit Netscape 3 testen Sie die Seite mit Netscape 3

+ 4 und IE 3 + 4/5+ 4 und IE 3 + 4/5 schauen Sie sich den Code an und schauen Sie sich den Code an und

versuchen Sie, die Schritte versuchen Sie, die Schritte nachzuvollziehennachzuvollziehen

TippsTipps

Entwickeln Sie auf Netscape 4, da sie dann die Entwickeln Sie auf Netscape 4, da sie dann die schwierigste Hürde bereits genommen habenschwierigste Hürde bereits genommen haben

Testen auf Sie auf allen Browsern, die in Ihr Testen auf Sie auf allen Browsern, die in Ihr Besucherprofil passenBesucherprofil passen

Schreiben Sie Funktionen in externe js-Schreiben Sie Funktionen in externe js-Dateien (werden gecacht)Dateien (werden gecacht)

Erfinden Sie das Rad nicht neu und benutzen Erfinden Sie das Rad nicht neu und benutzen Sie Scripts und API-libraries, die auf Sie Scripts und API-libraries, die auf verschiedenen Seiten kostenlos zur Verfügung verschiedenen Seiten kostenlos zur Verfügung stehen stehen

Custom APIsCustom APIs

The Dynamic DuoThe Dynamic Duo– http://http://wwwwww..dansteinmandansteinman..comcom//dynduodynduo//– The Dynamic Layer Object APIThe Dynamic Layer Object API

http://http://wwwwww..dansteinmandansteinman..comcom//dynduodynduo/en//en/dynlayerdynlayer..htmlhtml

SiteExperts.ComSiteExperts.Com– http://http://wwwwww..siteexpertssiteexperts..comcom– DHTMLLib 2.0DHTMLLib 2.0

http://http://wwwwww..siteexpertssiteexperts..comcom//dhtmllibdhtmllib/page1./page1.aspasp

LinksLinks Research und TutorialsResearch und Tutorials

– http://http://wwwwww..dhtmlzonedhtmlzone..comcom– http://http://wwwwww..netzweltnetzwelt..comcom//selfhtmlselfhtml//tftf.htm.htm– http://http://wwwwww..dynamicdrivedynamicdrive..comcom– http://http://wwwwww..webdeveloperwebdeveloper..comcom//advhtmladvhtml– http://http://dhtmldhtml..seiteseite..netnet– http://http://wwwwww..brattabratta..comcom– http://http://wwwwww..projectcoolprojectcool..comcom//developerdeveloper//dynamicdynamic//– http://http://wwwwww..webreferencewebreference..comcom//dhtmldhtml//– http://http://developerdeveloper..netscapenetscape..comcom//techtech//dynhtmldynhtml//indexindex..htmlhtml– http://http://msdnmsdn..microsoftmicrosoft..comcom//workshopworkshop//authorauthor//defaultdefault..aspasp– http://www.htmlguru.comhttp://www.htmlguru.com

LinksLinks

Beispiele:Beispiele:– http://http://wwwwww..leicaleica--geosystemsgeosystems..comcom– http://http://wwwwww..borgstromborgstrom..comcom– http://www.desktop.comhttp://www.desktop.com– http://www.corenet.chhttp://www.corenet.ch– http://cordoba.seat.eshttp://cordoba.seat.es– http://www.terrarium.nuhttp://www.terrarium.nu– http://www.zkb.chhttp://www.zkb.ch– http://www.htmlguru.comhttp://www.htmlguru.com

Viel ErfolgViel Erfolg

Documents

DML Dynamic HTML. Inhaltsübersicht n Vorstellungsrunde n Einführung n Image Rollover - Die erste DHTML- Anwendung n Die 3 Grundbausteine von DHTML n Die