GoLive - DHTML und Cyber Objects

von Fries Websolutions

Mit GoLive müssen wir keine Programmierkenntnisse voraussetzen, und so können wir auf DHTML basierende Animationen, einfach und schnell per Drag&Drop erstellen.

Die Cyber Objects entlasten denWebmaster und ersparen ihm somit Zeit und Nervenraubende komplexen Scriptsprachen. Die im GoLive integrierten Aktionen, machen uns auch Roll-Over-Effekte, und auch Animationen am Zeitachsen Editor sind möglich.

Aber wir müssen aufpassen, denn Cyber Objects bestehen aus Java Script und einem guten Teil CSS, das kann bei älteren Browsern zu Problemen führen.

Die Browser Kompatibilität
Browsern in der vierten Generation, die könnnen GoLive-Aktionen eigentlich problemlos darstellen. Denn GoLive zeigt an, welche Aktion, mit welchem Browser kompatibel sind und wo es zu Schwierigkeiten kommen kann. Wenn es nicht angezeigt werden kann, dann wird von GoLive, der im Hintergrund erzeugte JavaScript-Code, einfach ignoriert.

Und zur Sicherheit bietet GoLive eine Browserweiche und durch die automatische Erkennung des Browsers, ist es damit möglich, den Besuchern mit älteren Modellen, dann zu einer angepassten Version der Seite weiterzuleiten. Die müssen wir zwar dann noch extra erstellen, aber dieser Aufwand könnte sich ja lohnen.

Vorsicht mit den GoLive-Aktionen
Wer mutig ist und den von GoLive erzeugten Code selbst von Hand zu modifizieren, der lebt gefährlich. Denn GoLive erlaubt die Bearbeitung der Cyber Object mit dem Inspektor dann nicht mehr und ohne gründliche Kenntnisse in der JavaScript-Programmierung, wird es sehr schwer das Script den eigenen Bedürfnisse anzupassen.

CyberObjects
CyberObjects sind GoLive spezifische Aktionen, die als Objekte, oder Aktionen per Drag&Drop einer Seite hinzugefügt werden können.

Interne Objekte
GoLive benutzt zwei CyberObjekte, und die dienen als Container für ganz bestimmten Inhalt, aber die haben nichts mit Java Script, oder Aktionen zu tun.

Datum und Zeit
Mit dem CyberObject: Datum und Uhrzeit, wird dann die letzte Aktualisierung der Seite vorgenommen. Per Drag & Drop wird das Element in die gewünschte Position gebracht und Datum bzw. Uhrzeit, werden dann bei jedem Abspeichern der Seite nun automatisch erstellt.

Das Format der Datumsanzeige und die Länderauswahl, können im PopUp Menü ausgesucht werden.

Komponente
Die Komponente sind Platzhalter, die zum Einsetzten vom Templates oder von Teilen einer HTML-Seite. Denn es kann nur Text eingesetzt werden, der auch auf allen HTML Seiten auftaucht, und der bei einer Änderung nur auf einer Seite modifiziert wird, und sich dann automatisch auf allen anderen selbst ändert (ähnlich wie bei SSI). Sinnvoll ist der Einsatz der Komponente im Navigationsmenü, denn das wiederholt sich auf allen Seiten.

Eine Anwendung für Komponenten wäre vielleicht ein Copyright-Zeichen, das auf sehr vielen Dokumenten einer Seite erscheinen soll. Dann könnte diese Komponente hinzugefügt werden, in dem wir eine HTML Datei erstellen, in der sich der Text (ohne die Komponente) befindet. Das Komponenten Icon wird auf die Arbeitsfläche gezogen und im Inspektor das Copyright Symbol ausgewählt.

Dieser Vorgang wird für jede gewünschte Seite wiederholt, aber die Editierung des Symbols innerhalb der Komponente, das ist nicht möglich. Wir können die entsprechende Datei direkt aufrufen, oder die Komponente per Doppelklick öffnen und nach der Abspeicherung, ist dann auf allen Seiten automatisch die aktualisierte Komponente eingebunden.

Standard Aktionen
Komplexe Lösungen wie Browserweiche, URL-Menüs und Aktive Bilder sind ohne die GoLive Wizards nur noch schwer zu realiseren. Aber mit Hilfe der GoLive Inspektoren ist jetzt einfaches und übersichtliches Arbeiten möglich, ohne dass wir Java Script Kenntnisse haben.

Browserweiche
Per Browserweiche werden unsere Besucher sortiert, aber die exotischen Betriebssysteme, ältere oder hypermoderne Browser, werden uns sofort an die entsprechende Version der Seite verweisen.

Die Browserweiche ist ein "Aktionsobjekt" und wird genau wie Metatags in den HEAD Bereich der HTML Datei eingefügt. Damit wir den Head-Bereich einblenden können, dafür ist ein kleiner schwarzer Pfeil, wie ein Schalter.

Das CyberObject "Browser-Weiche" muss nur noch in den Kopf-Bereich gezogen werden und kann im Browser-Weiche-Inspektor konfiguriert werden. Der Inspektor kann über Ansicht Inspektor, oder ALT+1 auch sofort geöffnet werden und in diesem Fenster werden die Weichen, für den weiteren Weg unserer Besucher gestellt.

Bei der Einstellung: "Automatisch", da ermittelt GoLive den benutzten Browser selber, aber sonst muss auch die Browser Plattform angegeben werden. Sind diese "Problem" Browser erst bekannt, dann ist es besser die Automatik abzuschalten, um aus der Liste dann zum Beispiel die Browser auszusuchen, die keine CSS unterstützen.

Der Alternative "Hyperlink" bezeichnet die Adresse für die Umleitung und jetzt ist unsere Browserweiche funktionstüchtig. Vor dem Einsatz sollten wir überprüfen, ob unser Browser wirklich nach den gewünschten Kriterien aussortiert.

Aktives Bild
Wie es der Name schon sagt, hier handelt es sich um Bilder, die auf bestimmte Maus-Aktionen reagieren können, wie die berühmten Roll-Over-Buttons. Diese Aktion kann durch Berührung per Maus, oder per Klick ausgelöst werden, ganz wie wir es wollen.

Wie gewohnt wird das zuständige Icon, hier das: "Aktive Bild", auf die Arbeitsfläche des Layout-Fensters gezogen und im Feld-Inspektor die Aktionen dann näher beschrieben.

Mit dem Feld-Inspektor haben wir alle Roll Over Varianten unter Kontrolle und der Standard-Roll-Over-Button besteht aus drei einzelnen Grafiken. Die erste zeigt den Button in Ruheposition. Die zweite Grafik taucht auf, wenn der Mauszeiger über den Button bewegt wird und der dritte erscheint beim Mausklick.

Beim Einsatz unserer eigener Grafiken müssen wir darauf achten, dass sie exakt die gleiche Größe haben, weil sonst die Übergänge zwischen den einzelnen Zuständen dann zu sehen sind.

Wir haben drei einfache Grafiken erstellt.

Als erstes wird der "Ruhezustand" des Buttons gewählt. Im Feld Inspektor wählen wir den ersten Button: "Normal" aus und bestimmen dann eine Grafik, die uns angezeigt werden soll.

Jetzt haben wir zwar einen schönen Roll-Over-Button, aber der löst noch keine Aktion beim Klick aus.Um jetzt einen Link daraus zu machen, fehlen wichtige Angaben in der Registerkarte: "Hyperlink". Dort können wir bis zu drei Angaben machen, aber die wichtigste ist die Adresse. Unter Status können wir noch zusätzliche Informationen eintragen, die werden dann in der Statuszeile angezeigt, sobald über den Button gefahren wird. Der sichtbare Text erscheint in Form, des bekannten ALT-Attributs, obwohl er doch eigentlich keiner ist.

Unter "Ziel" können wir auswählen, in welchem Fenster die Zieladresse aufgerufen werden soll, wenn wir kein Ziel bestimmen, dann zeigt sich der neue Inhalt im gleichen Fenster.

Die Registerkarte: "Aktionen" enthält verschiedene JavaScript- und DHTML-Aktionen, die auf Bilder angewendet werden können. Diese Aktionen können dann auch auf den erstellten Roll-Over-Button angewendet werden. Aber wir sollten beachten, denn unter Umständen kann durch dieses Vorgehen, der Button in seiner Funktion beeinträchtigt werden, wenn schon andere Aktionen zugewiesen wurden, und die dann miteinander in Konflikt geraten.

URL-Menü
Links in Hülle und Fülle, zu befreundeten, wichtigen, oder eigenen Seiten die sind für jeden Web Seiten Betreiber sehr wichtig. Ohne Mühe und Probleme bauen wir dieses beliebte Feature in unsere Seite ein. Dafür ist das CyberObject: URL. Mit Drag&Drop auf die Seite gezogen, dann können wir im URL-Menü-Inspektor so richtig loslegen.

Hier werden die Bezeichnungen der einzelnen Punkte und die Links eingetragen. Das Label bedeutet für den Surfer, die sichtbare Bezeichnung, unter URL tragen wir die gewünschte Adresse ein. Zusätzlich können wir in der Registerkarte: "Details" noch angegeben, in welchem Browser-Fenster die neue Seite aufgerufen werden soll. Zur Auswahl stehen die bekannten Varianten: _top, _parent, _self und _blank.

Ein kleiner Nachteil des GoLive URL-Menüs ist der, es gibt keinen zusätzlichen GO-Button, um z.B. ein CGI aufzurufen und das für den Fall, dass JavaScript nicht unterstützt wird. Dann bekommt der Surfer zwar das Menü zu sehen, aber bei einem Klick auf einen Unterpunkt, der bleibt wirkungslos.

ProfiTIPP: Bunte URL Menüs
Was GoLive noch nicht bietet, ist die Erstellung eines bunten URL-Menüs, denn normalerweise hat das Menü einen weißen Hintergrund. Wenn aber der gesamten Seite bereits eine Hintergrundfarbe zugewiesen wurde, dann kann es professioneller aussehen, wenn das Menü die gleiche Farbe hat. Dann ist ein (ungefährlicher) Eingriff in den HTML-Code notwendig und mit einem kleinen Stylesheet können Farben des Menüs, ganz nach unserem eigenen Geschmack ausgewählt werden. Doch nicht genug, es können auch Schriftart und -größe per CSS definiert werden.

Wir markieren das Menü im Layout-Modus und wechseln in den HTML-Editor, dort suchen wir die Zeile, die mit <select......> anfängt. Gleich hinter dem <select> Attribut setzten wir nach einem Freizeichen das Attribut für die Farbe, es lautet:

style="background-color: #33ccff"

Die Farbe können wir aber wie gewohnt im Hexadezimalcode angeben, oder die normale Farbbezeichnung benutzten.
So sieht die fertige Zeile aus:

<select style="background-color: #33ccff" ; name="cs_popup_name_0" onchange="CSURLPopupShow(/*CMP*/'cs_form_name_0', /*CMP*/'cs_popup_name_0', '_top');" size="">