-Tags nicht weit kommen. Dann ist es besser, mit Tabellen zu arbeiten, um die verschiedenen Elemente auf Ihrer Seite auszurichten. Da Sie den Zellen einer Tabelle exakte Breiten in Pixel zuweisen können, haben Sie vollständige Kontrolle über Ihr Layout. Abb. 2.11 zeigt eine 2x2-Tabelle, die ich meiner Seite hinzugefügt habe. Zwei Zellen sind mit Text gefüllt, die anderen mit Abbildungen. Obwohl dieses Layout sehr einfach ist, können Sie es nur mithilfe von Tabellen umsetzen (oder mit Ebenen, aber so weit sind wir noch nicht).-Tags und den -Tag eingefügt und Sie erhalten eine Leerzeile zwischen den einzelnen Menüpunkten. Natürlich können Sie zur Formatierung der Linkliste auch eine Tabelle verwenden. Wenn Ihre Menüstruktur fertig angelegt ist, wählen Sie die einzelnen Punkte der Reihe nach aus und klicken Sie sie mit der rechten Maustaste (Windows) bzw. mit gedrückter Control-Taste (Mac) an. Es erscheint ein Kontextmenü, in dem Sie den Befehl LINK ERSTELLEN auswählen. Das Fenster DATEI AUSWÄHLEN, das sich nun öffnet, dürfte Ihnen mittlerweile bekannt vorkommen. Um Links wieder zu löschen oder sich die Datei anzusehen, auf die verlinkt wird, rufen Sie im selben Kontextmenü den Befehl HYPERLINK ENTFERNEN auf bzw. den Befehl VERKNÜPFTE SEITE ÖFFNEN (sofern die verknüpfte Seite im lokalen Ordner der Site liegt). Dieselben Befehle können Sie auch über das Menü MODIFIZIEREN aufrufen. Wann immer es geht, sollten Sie Textlinks verwenden. Wenn Sie keine Linkliste als Hauptsteuerung verwenden, dann sollten Sie zumindest im Kopf- bzw. Fußbereich der Seiten die Hauptsteuerung in verkleinerter Form nochmals als Linkliste anbieten. Anwender, die keine grafischen Browser verwenden oder sehbehindert sind, werden es Ihnen danken.-Tag setzen, was sich auch empfiehlt, um die Site auch für Anwender mit reinen Textbrowsern navigierbar zu machen. Wenn Sie sehr viele Hotspots gesetzt haben, können Sie sie über Menü ANSICHT > VISUELLE HILFSMITTEL > IMAGEMAPS ausblenden, denn über kurz oder lang wirken die vielen bunten Flecken störend.0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i-Tag ist eine Art schwebender »Container«, der HTML-Elemente aufnehmen und frei auf der Seite positioniert werden kann.-Tag entsprach nicht den HTML-Spezifikationen und nur der NetscapeBrowser konnte es darstellen. Von einer Website eine Version für den Netscape Navigator und eine weitere Version für den Rest der Welt zu erstellen, erwies sich als wenig praktikabel, und so konnte sich das -Tag nie so richtig durchsetzen. Zum Glück wurden die HTML-Spezifikationen um Tags ergänzt, die in Verbindung mit Stylesheets eine ähnliche Funktionalität bieten wie das -Tag. Somit können Webdesigner nun mit größerer Sicherheit als zuvor plattform- bzw. Browser-kompatible Webseiten entwickeln. Um nun keine übertriebenen Hoffnungen aufkommen zu lassen, soll ein Nachteil der Layer-Technik nicht verschwiegen werden: Nur Browser der neueren Generation können Sie korrekt darstellen. In älteren Browsern wird sich die Darstellung kaum mit dem decken, was Sie beabsichtigt hatten. Wenn Sie sich allerdings für den Einsatz von Layern entscheiden, werden Sie mit dieser Entscheidung nur die wenigsten Anwender vor den Kopf stoßen. Laut den Abrufstatistiken mehrerer Websites, in die ich Einblick habe, verwenden weniger als 2 % der Besucher eine ältere Browser-Version als 4.0.-Tag, das ebenso wie das <SPAN>-Tag von allen Browsern verstanden wird. Das
- sowie das -Tag hingegen werden nur vom Netscape Navigator verstanden.- bzw. <SPAN>-Tag regeln Sie, wie der Browser Inhalt einer Ebene behandeln soll, der größer ist als die Ebene selbst. VISIBLE zeigt den gesamten Inhalt der Ebene an, HIDDEN schneidet alles ab, was außerhalb des sichtbaren Bereichs der Ebene liegt. Die beiden letzten Optionen, SCROLL und AUTO blenden entweder dauerhaft Scrollbalken ein bzw. nur dann, wenn der Inhalt der Ebene den verfügbaren Platz überschreitet.
쐽
ABSCHN. L/O/R/U – Diese Werte sind mit den Koordinaten vergleichbar, die beim Definieren einer Ebene erzeugt werden, nur dass Sie über diese Attribute die sichtbaren Bereiche der Ebene bestimmen und nicht ihre Größe oder Position auf der Seite. Diese Werte sind relativ zur Ebene, nicht zur Seite. Sie benötigen diese Attribute zur Erstellung bestimmter JavaScript-basierter Effekte.
Mit den restlichen Optionen sollten Sie mittlerweile keine Schwierigkeiten mehr haben.
Die Ebenenpalette Da man Ebenen sehr häufig braucht, haben ihnen die Entwickler bei Macromedia eine eigene Werkzeugpalette spendiert. Um deren Funktionen näher kennen zu lernen, fügen Sie noch einige weitere Ebenen in das Dokument ein. Wenn Sie beim Einfügen der Ebene auf die Strg-Taste (Win) oder Befehl-Taste (Mac) drücken, können Sie sogar verschachtelte Ebenen erzeugen. Öffnen Sie nun mit Menü FENSTER > EBENEN die Ebenenpalette (Abb. 2.21). Mit dieser Palette können Sie unter anderem den Z-Index aller erstellten Ebenen verändern.
Abbildung 2.21: Die Ebenenpalette gibt Ihnen einen schnellen Überblick über alle Ebenen innerhalb eines Dokuments.
Wenn Sie auf das Augensymbol in der zugehörigen Spalte klicken, können Sie Ebenen ein- bzw. ausblenden (offenes bzw. geschlossenes Auge). Um den Namen einer Ebene und ihren Z-Index zu ändern, klicken Sie das betreffende Feld an und Sie können es editieren. Wenn Sie verschachtelte Ebenen erzeugt haben, werden diese eingerückt als hierarchische Liste angezeigt. Sie können verschachtelte Ebenen von der übergeordneten Eltern-Ebene lösen, indem Sie sie innerhalb der Ebenenpalette verschieben.
105
Die WYSIWYG-Layoutwerkzeuge von UltraDev
Über dem Ebenenfeld gibt es ein Kontrollfeld ÜBERLAPPUNGEN VERHINDERN. Wenn Sie diese Option aktivieren, können Sie neu erstellte Ebenen nicht mehr über bereits vorhandenen platzieren. Über Menü MODIFIZIEREN > ANORDNEN > EBENENÜBERLAPPUNGEN VERHINDERN erreichen Sie denselben Zweck. Wozu dient nun diese Funktion?
Ebenen in Tabellen verwandeln und umgekehrt Wenn Sie einerseits nicht auf den Komfort verzichten möchten, den Ihnen die Verwendung von Ebenen in der Gestaltungsarbeit gibt, Ihnen andererseits aber auch die CrossBrowser-Kompatibilität Ihrer Seiten am Herzen liegt, bietet UltraDev ein Feature, das die Lösung für dieses Dilemma darstellt: Sie können nämlich Ebenen in Tabellen umwandeln und umgekehrt. Sie setzen also Ihren Entwurf unter Verwendung von Ebenen um, die Ihnen die freie Positionierung aller Elemente auf der Seite gestatten, und bevor Sie die Seiten publizieren, wandeln Sie sie in Tabellen um. Das einzige Hindernis besteht darin, dass das Programm sich überlappende Ebenen nicht in Tabellen verwandeln kann – daher das Kontrollfeld, von dem im vorigen Abschnitt die Rede war. Sie können diese Funktion ausprobieren, indem Sie sie über das Menü MODIFIZIEREN > KONVERTIEREN > EBENEN IN TABELLEN KONVERTIEREN aufrufen. Es öffnet sich das in Abb. 2.22 gezeigte Dialogfenster. Nach meiner Erfahrung ist es das Beste, die eingestellten Defaultwerte zu verwenden. Wenn es Ihnen nicht so sehr auf die exakte Positionierung der Zellen in der erzeugten Tabelle ankommt, können Sie statt der Option HÖCHSTE GENAUIGKEIT auch die Option KLEINSTES verwenden. Wenn Sie Tabellen mit höchster Genauigkeit erstellen lassen, erzeugt UltraDev so viele Zellen wie nötig, um den Inhalt der Ebenen möglichst genau zu positionieren. Mit der Option KLEINSTES werden Inhalte in die nächstliegende Zelle eingefügt, wenn sie innerhalb einer gewissen Zone liegen (Defaulteinstellung 4 Pixel). So werden kleinere Bereiche so weit wie möglich in einer Zelle zusammengefasst und die erzeugte Tabellenstruktur ist weniger kompliziert. Nachfolgend eine Übersicht über die weiteren Einstellungsmöglichkeiten: 쐽
DURCHSICHTIGE GIFS VERWENDEN – Formatiert die erzeugte Tabelle mit transparenten GIFs, sodass sie in allen Browsern gleich angezeigt wird.
쐽
AUF SEITE ZENTRIEREN – Die erzeugte Tabelle wird mittig auf der Seite platziert.
쐽
EBENENÜBERLAPPUNGEN VERHINDERN – Gleichnamige Funktion ein- bzw. ausschalten.
쐽
EBENENPALETTE ANZEIGEN – Ebenenpalette wird angezeigt, nachdem die Tabelle erzeugt wurde.
쐽
RASTER ZEIGEN – Raster wird angezeigt, nachdem die Tabelle erzeugt wurde.
쐽
AM RASTER EINRASTEN – Gleichnamige Funktion ein- bzw. ausschalten, nachdem die Tabelle erzeugt wurde.
106
Ebenen
Abbildung 2.22: Problemlose Umwandlung von Ebenen in Tabellen.
Umgekehrt können Sie auch Seiten, die Sie mithilfe eines Tabellenlayouts erstellt haben, von UltraDev in Ebenen konvertieren lassen. Rufen Sie hierzu den entsprechenden Befehl über Menü MODIFIZIEREN > KONVERTIEREN > TABELLEN IN EBENEN KONVERTIEREN auf. Sie werden feststellen, dass die Ergebnisse dieser Konvertierung nicht hundertprozentig exakt ausfallen. Die Grenzen dieser Funktion zeigen sich, wenn man zwischen Tabellen und Ebenen hin- und herkonvertiert. Wenn Sie z.B. bei der Konversion von Ebenen in Tabellen die Option DURCHSICHTIGE GIFS VERWENDEN aktiviert haben und nun die Tabelle wieder in Ebenen umwandeln lassen, wird nun jedes dieser GIFs in einer eigenen Ebene abgelegt. Aber auch mit diesen Einschränkungen handelt es sich trotz allem um eine höchst nützliche Funktion, die die Umsetzung von Layouts für ältere Browser erleichtert.
Mittels Frames Elemente mehrfach verwenden Bisher haben wir um Seiten miteinander zu verlinken keine andere Möglichkeit kennen gelernt, als jede Seite mit einer eigenen Menüleiste zu versehen. Dem Anwender eine einheitliche Menüsteuerung anzubieten ist eine der wichtigsten Gestaltungsregeln für die Erstellung einer Website. Konfrontieren wir den Anwender ständig mit einer anderen Oberfläche, wird ihn das irritieren und kaum längere Zeit auf unserer Seite halten. Wenn Sie mit Rollover-Menüs arbeiten, kann es einige Zeit dauern, bis die nächste Seite geladen ist. Selbst wenn die Buttons für unser Rollover-Menü im Cache abgelegt werden, bleibt die Ladezeit ein kritischer Punkt. Die Definition eines Framesets ist eine Möglichkeit, wie wir diesem Problem begegnen können. Ein Frameset besteht aus zwei oder mehreren Frames, die jeweils ein selbstständiges HTML-Dokument enthalten. Wir können also ein Framefenster für die Menüsteuerung definieren und ein weiteres für den Inhalt. Ein Vorteil der Frametechnik ist, dass wir die Inhalte der einzelnen Frames unabhängig voneinander austauschen können, also in den Inhaltsframe eine neue Datei laden können, während der Menüframe unverändert bleibt. Ein weiterer Vorteil ist, dass man die einzelnen Framefenster separat scrollen kann.
107
Die WYSIWYG-Layoutwerkzeuge von UltraDev
Wenn Sie also in den Inhaltsframe Ihrer Seite ein längeres Dokument laden, bleibt das Menü an seinem festen Platz, sodass der Anwender jederzeit Zugriff auf die übrigen Seiten hat, während er das Dokument durchsucht. Sicher ist Ihnen schon das Eingabefeld ZIEL aufgefallen, wenn Sie einen Link gesetzt haben. Dieses Feld kommt jetzt bei der Erstellung von Framesets ins Spiel. Jeder Frame innerhalb eines Framesets hat einen eindeutigen Namen. Wenn Sie ein Dokument in einen bestimmten Frame laden lassen wollen, geben Sie bei der Definition des Links im Feld ZIEL den Namen dieses Frames an. Soll das Dokument in den gleichen Frame geladen werden, erübrigt sich die Angabe eines Ziels.
Framesets erstellen Die Definition von Framesets ist nicht gerade die stärkste Seite an UltraDev – wenn Sie mit dieser Funktion Probleme haben, sollten Sie die Schuld nicht bei sich suchen. Die Frame-Werkzeuge sind leider nicht so intuitiv zu bedienen, wie man das gerne hätte. Um ein Frameset zu erstellen, müssen Sie zuerst ein neues Dokument öffnen. Als Nächstes brauchen Sie die Unterpalette FRAMES der Objektpalette. Wählen Sie die Schaltfläche LINKEN FRAME EINFÜGEN. Hiermit teilen wir auf der linken Seite des Fensters einen Bereich, der unser Menü aufnehmen soll. Wenn Sie ein Frameset eingefügt haben, sehen Sie, dass die Design-Ansicht ähnlich wie eine Tabelle in verschiedene Bereiche aufgeteilt ist. Wenn Sie in einen dieser Bereiche klicken, um ihn zu bearbeiten, können Sie das HTML-Dokument, das in diesen Frame geladen wird, unmittelbar bearbeiten. Im Unterschied also zu Tabellen bearbeiten Sie nicht einzelne Zellen, sondern ein ganzes HTML-Dokument. Bevor wir uns aber ans Editieren machen, sollten wir das Frameset nach unseren Vorstellungen einrichten. Wählen Sie hierzu den Frame-Rahmen in der Dokumentansicht per Mausklick aus; die Frame-Rahmen müssen eingeschaltet sein (Menü ANSICHT > VISUELLE HILFSMITTEL > FRAME-RAHMEN). Wenn Sie den Mauszeiger auf den Frame-Rahmen setzen, verändert sich der Cursor zu einem Skalierwerkzeug. Ziehen Sie nun die Begrenzungslinie mit gedrückter Maustaste an die gewünschte Position. Wählen Sie nun durch Klicken auf den äußeren Rahmen das Frameset selbst aus und öffnen Sie den Eigenschafteninspektor. Abb. 2.23 zeigt die Eigenschaften eines Frame-Rahmens mit Menüsteuerung im linken Frame, wie wir ihn eingerichtet haben. Abbildung 2.23: Wählen Sie das Frameset aus, um die Eigenschaften der einzelnen Frames festzusetzen.
108
Ebenen
Im Eigenschafteninspektor können Sie die Größe der einzelnen Frames nun direkt editieren. Am rechten Rand der Palette sehen Sie ein grafisches Schema der aktuellen Frameteilung. Durch Anklicken der jeweiligen Fläche wählen Sie den entsprechenden Frame aus. Folgende Eigenschaften können Sie verändern: 쐽
RAHMEN – Wenn Sie möchten, dass Ihr Frameset von einer sichtbaren Begrenzungslinie umgeben ist, setzen Sie diese Option.
쐽
RAHMENBREITE – Wenn Sie eine Begrenzungslinie anzeigen lassen, definieren Sie hier deren Breite (in Pixel).
쐽
RAHMENFARBE – Hier weisen Sie der Begrenzungslinie eine Farbe zu.
쐽
ZEILEN- BZW. SPALTEN-AUSWAHL – Weist dem Frame eine relative (in Prozent) bzw. absolute (in Pixel) Breite oder Höhe zu.
Nachdem Sie diese Einstellungen vorgenommen haben, können Sie die Frames mit Inhalt füllen. Ich richte mein Frameset so ein, dass der linke Frame die Datei navigation.html aufnimmt und der rechte die Datei content.html. (Achtung! Diese Dateien müssen bereits vorhanden sein, bevor Sie sie in das Frameset einbinden.) Das geht am leichtesten mit der Frames-Palette, die Sie über Menü FENSTER > FRAMES öffnen (siehe Abb. 2.24). Über diese Palette können Sie nun die Eigenschaften der einzelnen Frames editieren, während wir zuvor die Eigenschaften des Framesets bearbeitet haben. Die Namen der einzelnen Frames werden in der Frames-Palette angezeigt.
Abbildung 2.24: Frames mit der Frames-Palette zur Bearbeitung auswählen
Die Frames-Palette Um einzelne Frames mit der Frames-Palette zu bearbeiten, muss der Eigenschafteninspektor ebenfalls geöffnet sein. Wählen Sie nun einen Frame in der Frames-Palette zur Bearbeitung aus und beachten Sie, wie sich die Oberfläche des Eigenschafteninspektors verändert. Es werden ganz spezifische Möglichkeiten der Editierung angeboten: 쐽
FRAME-NAME – Das ist der Name, mit dem Sie den Frame über das Attribut ZIEL ansprechen können. Wenn Sie als Ziel eines Links diesen Wert angeben, wird das Dokument in diesen Frame geladen.
109
Die WYSIWYG-Layoutwerkzeuge von UltraDev
쐽
QUELLE – In dieses Feld tragen Sie die Datei ein, die in diesem Frame zunächst angezeigt werden soll. In meinem Beispiel von oben käme in den linken Frame die Datei navigation.html und in den rechten Frame die Datei content.html.
쐽
ROLLEN – Hier stellen Sie ein, ob der Frame scrollen kann oder nicht. Bei Frames, die eine Menüsteuerung aufnehmen soll, wird man das Scrollen unterdrücken.
쐽
KEINE GRÖSSENÄNDERUNG – Wenn Sie möchten, dass der Anwender die Begrenzungslinien zwischen Frames frei verschieben kann, müssen Sie sie abwählen.
쐽
RAHMEN – Wenn Sie möchten, dass der aktuelle Frame von einem Begrenzungsrahmen umgeben ist, wählen Sie »Ja«. Diese Einstellung überschreibt die Einstellungen im Frameset.
쐽
RAHMENFARBE – Wenn Sie einen Rahmen anzeigen lassen möchten, können Sie ihm hier eine Farbe zuweisen.
Wenn Sie alle Einstellungen vorgenommen haben, speichern Sie Ihr Frameset mit Menü DATEI > FRAMESET SPEICHERN. In Abb. 2.25 sehen Sie das von mir erstellte Frameset. Wie Sie sehen, bleibt die Menüsteuerung im linken Frame fest stehen, während sich der rechte Frame scrollen lässt. Abbildung 2.25: Mit Framesets können Sie auf einer Seite statische Bereiche, wie z.B. ein Menü, definieren, die nicht mit dem anderen Teil der Seite gescrollt werden.
NoFrames-Inhalt bearbeiten Innerhalb des HTML-Codes, mit dem ein Frameset definiert wird, gibt es einen Bereich, der dann angezeigt wird, wenn der Browser die Darstellung von Frames nicht beherrscht. In diesem Bereich können Sie eine »framelose« Variante der Seite ablegen oder den Anwender höflich auffordern, sich einen neueren Browser zu besorgen, wenn er die Seite sehen möchte. Über das Menü MODIFIZIEREN > FRAMESET > NOFRAMES-INHALT BEARBEITEN können Sie diese Bereich aufrufen und bearbeiten.
110
Ebenen
Komplexe Framesets Bei der Erstellung von Framesets sind Sie nicht an die vordefinierten Schemata der Objektpalette gebunden. Ähnlich wie Tabellen können Sie auch Frames ineinander verschachteln, um einen Frame weiter zu unterteilen. Sie können Frames auch über das Menü MODIFIZIEREN > FRAMESET beliebig teilen. Das hat den Vorteil, dass Sie neue Frames innerhalb des aktuellen Framesets definieren und nicht Frameset in Frameset schachteln – was einen unschönen Spagetti-Code zur Folge hätte. Es gibt eigentlich nur einen vertretbaren Grund, mehrere Framesets ineinander zu verschachteln. Wie die Dinge im Moment liegen, können Links nur auf einen einzigen Frame innerhalb eines Framesets oder auf das Frameset selbst zeigen. Möchten Sie innerhalb eines Framesets nun mehrere Frames auf einmal austauschen, müssen Sie diese Frames in einem einzigen Frameset zusammenfassen und den Link auf dieses Frameset setzen.
Das Für und Wider von Frames Momentan wird die Frage, ob man zur Gestaltung von Websites Frames verwenden soll, wieder stärker diskutiert. Ich habe erst kürzlich am Redesign mehrerer ursprünglich Frame-basierter Websites mitgearbeitet, die nun ohne Frames funktionieren. Das Problem mit Frames ist, dass sie bei bestimmten Aktionen manchmal für Verwirrung beim Anwender sorgen können. Angenommen, Sie rufen eine Site auf, die Frames verwendet. In einem der Frames finden Sie Inhalt, der Sie interessiert und den Sie daher Ihren Lesezeichen hinzufügen möchten. Je nach Browser wird nun entweder das ganze Frameset den Bookmarks hinzugefügt (worin nun nicht unbedingt die gewünschte Seite enthalten sein muss) oder nur die der ausgewählte Frame innerhalb des Framesets. Für Neulinge im Internet kann das manchmal ebenso verwirrend wie frustrierend sein. Ein anderes Problem ergibt sich bei dynamischen Anwendungen. Wenn zwischen Anwendungen, die Inhalt für die einzelnen Frames erzeugen, Variablen übergeben werden müssen, können diese einzelnen Anwendungen sozusagen »aus dem Takt geraten«. Anstatt nur eine Seite zu generieren, muss die Anwendung mehrere Seiten in mehreren Frames aktualisieren. Das führt dazu, dass bestimmte Funktionen einer Anwendung auf mehrere Unterprogramme verteilt werden müssen, von denen jedes nur für seinen Frame zuständig ist. Wie Sie sich auch entscheiden, bei jeder Entscheidung gibt es ein Für und Wider. Frames sind ein Gestaltungsmittel von HTML wie Ebenen oder Tabellen mit ihren spezifischen Vor- und Nachteilen. Wählen Sie einfach das, was für Ihre Zwecke am besten passt.
111
Die WYSIWYG-Layoutwerkzeuge von UltraDev
2.7
Formulare
Ein HTML-Element, mit dem wir uns heute noch gar nicht beschäftigt haben, sind Formulare. Formulare werden gebraucht, um Daten an den Server zur Bearbeitung zu übergeben. Das Hauptthema dieses Buches ist ja die Erstellung serverseitiger dynamischer Anwendungen mit UltraDev, darum werden uns dem Thema »Formulare« ausführlich in Tag 11, »Datensätze mit UltraDev-Applikationen speichern, bearbeiten und aktualisieren«, widmen, wenn wir Daten in Online-Datenbanken speichern.
2.8
Zielbrowser prüfen
Nicht jeder Entwickler hat sämtliche Browser auf seinem System installiert, um den Code seiner Seiten auf alle möglichen Fehler hin zu überprüfen. In diesem Fall können Sie sich mit der Funktion im Menü DATEI > ZIELBROWSER ÜBERPRÜFEN behelfen. Dieser Befehl öffnet ein Dialogfenster, in dem Sie konfigurieren, für welche Browser Sie Ihr Dokument überprüfen lassen wollen. Wählen Sie die entsprechenden Browser aus und klicken Sie auf die Schaltfläche ÜBERPRÜFEN. UltraDev ist nun ein paar Augenblicke mit der Analyse des Codes beschäftigt und gibt dann einen präzisen Bericht aus mit Angaben zu eventuellen Fehlern und Kompatibilitätsproblemen zwischen Browsern. Abb. 2.26 zeigt die Analyse einer Seite, die für 4.0-Browser optimiert wurde.
Abbildung 2.26: Die Analyse offenbart alle Schwachstellen einer Seite.
112
Berichte erstellen
Wenn Sie es darauf anlegen, können Sie über den Befehl im Menü DATEI > KONVERTIEREN > 3.0 BROWSER-KOMPATIBEL den Code Ihrer Seite so konvertieren lassen, dass er von älteren Browsern angezeigt werden kann. Das Programm tut zwar sein Bestes, um hierbei möglichst schonend vorzugehen, aber sehr wahrscheinlich ist das Ergebnis nicht in allen Punkten so, wie Sie sich das vorgestellt haben.
2.9
Berichte erstellen
Um sich einen schnellen statistischen Überblick über die gesamte Site oder ein einzelnes Dokument zu verschaffen, rufen Sie den Befehl im Menü SITE > BERICHTE auf. Wie in Abb. 2.27 zu sehen, können Sie sich zu mehreren Themen Informationen ausgeben lassen, die die Funktionalität und die Geschwindigkeit Ihrer Site wesentlich verbessern können: 쐽
Kombinierbare verschachtelte FONT-Tags
쐽
Fehlender ALT-Text bei Grafiken
쐽
Überflüssige verschachtelte Tags
쐽
Entfernbare leere Tags
쐽
Unbenannte Dokumente
Abbildung 2.27: Wählen Sie die gewünschten Berichte aus und das Dokument, das geprüft werden soll.
Sie können auch bearbeiterspezifische Berichte erstellen oder sich eventuell vorhandene Design Notes ausgeben lassen. Mehr über verteilte Entwicklungsumgebungen erfahren Sie in Tag 3, »Websites planen und verwalten«.
113
Die WYSIWYG-Layoutwerkzeuge von UltraDev
Abbildung 2.28: Berichte helfen bei der Fehlersuche und der Optimierung einer Website.
Wenn Sie einen Bericht erstellen lassen, wählen Sie, in welchem Umfang Dokumente geprüft werden sollen (ganze Seite, einzelnes Dokument usw.), und markieren Sie die Kontrollfelder der gewünschten Berichte. Einige Berichte erlauben die Definition zusätzlicher Prüfkriterien, die Sie unter der Schaltfläche BERICHTSEINSTELLUNGEN finden. Um die Berichtsfunktion zu starten, klicken Sie auf die Schaltfläche AUSFÜHREN. Abb. 2.28 zeigt das Ergebnis eines solchen Kontrolldurchgangs.
2.10 Zusammenfassung Heute haben Sie die meisten Werkzeuge kennen gelernt, die Sie zur Erstellung umfangreicher Websites benötigen. Tabellen, Frames, Ebenen und der Eigenschafteninspektor sollten Ihnen jetzt keine Rätsel mehr aufgeben. Zwar brauchen wir diese Werkzeuge nicht unmittelbar zur Entwicklung dynamischer Websites, doch gehören sie zum Inventar von UltraDev, das die Erstellung und Pflege einer Website in all ihren Aspekten ermöglicht – angefangen bei der logischen Struktur bis zur grafischen Gestaltung.
2.11 Fragen und Antworten F
Wenn ich für meine Website Suchbegriffe definiere, bedeutet das, dass meine Site dann in den Suchmaschinen angezeigt wird? A
114
Suchbegriffe in den <META>-Tags werden nur verwendet, wenn Ihre Site indiziert wurde. Dazu müssen Sie sie erst bei den Suchmaschinen anmelden. Gehen Sie auf die Anmeldeseite und geben Sie die URL ein, damit Ihre Site katalogisiert werden kann.
Workshop
F
Ich verwende Tabellen, um Bilder auf meiner Seite zu platzieren, aber irgendwie funktioniert das nicht richtig. Zwischen den Bildteilen ist immer ein Zwischenraum. Woran liegt das? A
F
Ich habe eine Seite mit Ebenen gestaltet, aber in der Browservorschau bekomme ich nichts angezeigt. A
F
Vergewissern Sie sich, dass Sie keine Leerzeichen in die Zellen der Tabelle eingefügt haben und dass die Zellen insgesamt nicht breiter sind als die Tabelle selbst. Tabellen sind nicht unproblematisch. Schon kleine Fehleingaben können bewirken, dass die Tabelle auseinander getrieben wird oder andere Darstellungsfehler aufweist.
Der Einsatz von Ebenen ist nur in Verbindung mit Cascading Style Sheets und 4.0-Browsern oder höher möglich. Vielleicht brauchen Sie ein Upgrade.
Ich habe ein Frameset angelegt, doch ich möchte auch einen Link auf eine Seite ohne Frames anbieten. Wie geht das? A
Geben Sie als Ziel Ihres Links »_top« an. Die Seite wird dann an »über« dem Frameset im Hauptfenster des Browsers geladen.
2.12 Workshop Der Workshop dient dazu, den gelesenen Stoff mithilfe von gezielten Fragen und Übungen zu vertiefen. Die Antworten finden Sie in Anhang A, »Quiz-Antworten«.
Quiz 1. Wie können Sie sich die Tags im -Bereich anzeigen lassen und bearbeiten? 2. Wo können Sie definieren, in welcher Farbe Links dargestellt werden? 3. Wie kann ich Elemente mithilfe einer Tabelle so positionieren, dass sie nahtlos aneinander gefügt werden? 4. Ich habe eine Seite mit Ebenen erstellt, doch nun soll sie auch auf 3.0-Browsern korrekt dargestellt werden. Geht das überhaupt? 5. Ich möchte keine Ebenen verwenden. Kann ich auch mit Tabellen pixelgenau positionieren, ohne dass ich mühselig an den Zellenbreiten herumfummeln muss?
115
Die WYSIWYG-Layoutwerkzeuge von UltraDev
Übungen 1. Positionieren Sie die Elemente Ihrer Seite mit Tabellen. Die Versuchung ist zwar groß, derartige Aufgaben mithilfe von Ebenen zu erledigen, doch es schadet nach wie vor nicht, wenn Sie wissen, wie man mit Tabellen arbeitet. 2. Erstellen Sie mehrere Rollover-Bilder und eine Navigationsleiste. Wenn Sie noch keine Erfahrung mit der Erstellung der nötigen Buttons für den aktiven und passiven Zustand haben, ist die Aufgabe schwerer, als es im ersten Moment scheint. 3. Üben Sie sich in der Verwendung von Framesets. Wenn Sie schon statische Websites ohne Frames erstellt haben, strukturieren Sie sie mit Framesets um. Wenn Sie planen, in der Zukunft Frame-basierte Websites zu erstellen, sollten Sie sich mit den FrameWerkzeugen von UltraDev gut vertraut machen.
116
Websites planen und verwalten
3
Websites planen und verwalten
Zwar haben wir in Tag 2, »Die WYSIWYG-Layoutwerkzeuge von UltraDev«, die zur Umsetzung einer Website nötigen Werkzeuge schon kennen gelernt, doch benötigen wir noch etwas Hintergrundwissen, bevor wir eine Website mit allem, was dazugehört, entwickeln können. Die Gestaltung von Websites besteht nicht nur in der Erzeugung des nötigen HTML-Codes und der Grafiken. Sie müssen vor allem planen, wie Sie dem Anwender Ihre Informationen präsentieren, wie Sie ihn durch Ihre Seiten führen und wie er damit interagieren kann. Die Themen des heutigen Tages: 쐽
Vorbereitende Schritte bei der Realisierung einer Website
쐽
Die Werkzeuge von UltraDev zur Optimierung und Vereinfachung des Gestaltungsprozesses
쐽
Bestehende Websites innerhalb der gewohnten Oberfläche bearbeiten
쐽
Websites online betreuen und Arbeiten in verteilten Entwicklungsumgebungen
3.1
Planung der Site
Die Site-Planung ist die wichtigste Phase bei der Erstellung einer Website. Bei der Entwicklung müssen Sie besonders darauf achten, den Anwender navigationstechnisch in keine Sackgasse zu führen. Wird eine Website von einem Team realisiert, muss verstärkt darauf geachtet werden, ein einheitliches Layout- und Navigationsschema einzuhalten. Ich bin mir ziemlich sicher, dass jeder von Ihnen schon einmal die Erfahrung gemacht hat, sich auf einer Website nicht mehr zurecht zu finden. Plötzlich steht das Menü an einer anderen Stelle, Links sind mal sichtbar und dann wieder nicht, das Design wechselt von Unterseite zu Unterseite. Wie in der gestrigen Lektion erwähnt, ist ein Nachteil von Frames der, dass der Überblick schnell verloren gehen kann, wenn mehrere Dateien zugleich in mehrfach geteilten Framesets dargestellt werden. Zudem trifft man immer wieder auf die Unsitte, dass manche Websites stillschweigend Inhalte anderer Sites in eigene Frames laden. Neben dem fragwürdigen Umgang mit fremdem geistigen Eigentum sind solche Sites höchst chaotisch, denn es unmöglich nachzuvollziehen, wo die gezeigten Information herkommen oder angezeigt werden. Diese und ähnliche Fehler lassen sich durch sorgfältige Planung vermeiden. Verwenden Sie vor der Umsetzung einer Website genügend Zeit auf die Planung, Sie sparen sich damit so manchen Arbeitstag, den Sie die Überarbeitung der Site gekostet hätte.
Sitemaps Was versteht man eigentlich unter einer Sitemap? Nun, sie ist der Bauplan Ihrer Website. Sie ist ein Hilfsmittel, mit dem Sie visualisieren, wie der Anwender innerhalb der einzel-
118
Planung der Site
nen Seiten navigieren kann. Wenn Sie die Sitemap Ihrer neuen Website aufzeichnen und dann feststellen, dass man zur Hauptinformation nur über einen einzigen Link von der Seite »Meine Kinderfotos« kommt, sollten Sie Ihre Strategie noch einmal überdenken. Nehmen wir als Beispiel die Sitemap eines kleinen Computerladens. In Abb. 3.1 sehen Sie eine mögliche Sitemap, die wir zur Erstellung unserer Website verwenden können. In dieser Sitemap werden die einzelnen Seiten in Kategorien eingeteilt, die Verlinkung zwischen den einzelnen Kategorien wird durch Linien symbolisiert. Wenn Sie den Aufbau einer Site visualisieren, bevor Sie sie umsetzen, können Sie feststellen, welche die geeignete Navigationsstruktur ist. So vermeiden Sie auch das Problem der verwaisten Seiten, die nicht mit den übrigen Seiten innerhalb der Website verlinkt sind. Verwaiste Seiten entstehen meistens dann, wenn mehrere Entwickler an einer Site arbeiten. Jemand erstellt eine Seite, aber sie wird nie mit den übrigen Dokumenten verlinkt. Ich habe das selbst mehrfach erlebt, wenn Sites ohne entsprechende Sitemap realisiert wurden. Ich habe vor nicht allzu langer Zeit eine Website nach Kundenvorgaben umgesetzt, um schließlich festzustellen, dass man den Bereich »Über unsere Firma« von keiner der übrigen Seiten erreichen konnte. Hätten wir uns die Zeit genommen, vorher eine Sitemap zu erstellen, wäre dieses Problem gar nicht aufgetreten. Startseite
Firmeninfo
Mitarbeiter
Jobbörse
Hilfe
Shopping System
Firmennachrichten
Produktkatalog
Ausloggen
Abbildung 3.1: Eine Sitemap erleichtert die Erstellung der Navigationsstruktur und die anschließende Umsetzung der Website.
119
Websites planen und verwalten
Aufbau einer Verzeichnisstruktur Sitemaps erweisen sich auch als sehr nützlich, wenn es darum geht, die Verzeichnisstruktur einer neuen Website zu definieren. Immer wieder erlebt man, dass man die Betreuung einer Website übernimmt und feststellt, dass sämtliche Seite in einem einzigen Ordner liegen, egal welcher Kategorie oder welchem Menüpunkt sie angehören. Beim Anlegen einer Sitemap muss man sich notgedrungen auch Gedanken darüber machen, in welcher Beziehung die einzelnen Seiten bzw. Dokumente zueinander stehen. Wenn man dann später die eigentliche Site erstellt, bietet es sich geradezu an, zusammengehörige Dokumente in einem eigenen Ordner zu speichern und diesen sinnvoll zu benennen. Das Wiederfinden von Seiten zur späteren Bearbeitung wird hierdurch ungemein erleichtert. Normalerweise legt man für jeden Menüpunkt einer Website einen eigenen Ordner an und innerhalb dieser Ordner jeweils einen Unterordner für das auf diesen Seiten verwendete Grafikmaterial. Natürlich gibt es Fälle, für die sich andere Verzeichnisstrukturen besser eignen. In manchen Fällen enthält das einzelne Dokument so viele Abbildungen, dass es sinnvoller ist, für diese Datei einen eigenen Bildordner anzulegen. Bei der Definition einer Verzeichnungsstruktur sollte man immer im Hinterkopf behalten, dass die Website, die man erstellt, irgendwann von jemand anderem gewartet wird. Wenn Sie eine saubere, logisch gut nachvollziehbare Verzeichnisstruktur aufbauen, können Sie Ihrem Nachfolger das Leben um einiges leichter machen.
Dateinamenskonventionen Wenn Sitemap und Verzeichnisstruktur Ihrer Website stehen, ist der nächste wichtige Schritt, ein verbindliches Namensschema für die Benennung von Dateien festzulegen. Je nach Umfang der Website arbeiten meist mehrere Entwickler – HTML-Autoren, Grafiker, Systemadministrator – am Projekt mit, deren einzelne Beiträge zusammengeführt werden müssen. Jeder der am Projekt Beteiligten sollte auch ein Mitspracherecht bei der Festlegung der Dateinamenskonventionen haben.
Programmierer und Grafiker Für eine reibungslose Umsetzung des grafischen Entwurfs in das fertige Endprodukt muss der Programmierer wissen, wo der Grafiker welche Abbildungen in welcher Form verwenden will. Ein Beispiel: Größere Grafiken werden oft in kleinere Teile zerschnitten und dann in einer Tabelle wieder zusammengesetzt. Erhält der Programmierer diese Bilddateien nun vom Grafiker mit der Bezeichnung bild1.jpg, bild2.jpg usw., muss der Programmierer jede einzelne Datei öffnen und versuchen, das Puzzle richtig zusammenzusetzen (oder den Grafiker stundenlang am Telefon interviewen). Man wird also viel Zeit, Geld und Ner-
120
Planung der Site
ven sparen, wenn man ein System zur Benennung von Grafikdateien festlegt, aus dem die Position der einzelnen Bildteile in Tabellenzeile und -spalte klar hervorgeht. Heißt eine Datei dann z.B. blume01_z1s1.jpg, dann weiß der Programmierer sofort, dass dieses Bild in Zeile 1 Spalte 1 der Tabelle auf dieser bestimmten Seite gehört. Das ist natürlich nur ein Beispiel und Sie finden vielleicht auch ein System, das für Ihr Projekt besser passt. Ich möchte Ihnen nur empfehlen, ein entsprechendes Benennungssystem zu definieren und sich auch strikt daran zu halten, selbst dann, wenn außer Ihnen niemand an dem Projekt arbeitet. Spätestens, wenn Sie die Wartung einer Website übernehmen, bei der Sie auf solche Dateinamen wie 13123a.jpg stoßen, werden Sie feststellen, wie wichtig sinnvolle Dateinamen sind.
Programmierer und Systemadministrator Wenn Sie beide Ämter in Personalunion vereinen, ist das Glück Ihnen hold. Wenn nicht, sollten Sie einige Vorsichtsmaßnahmen treffen, bevor Sie sich an die Erstellung von Seiten machen. Auf welche Dateinamenskonventionen Sie sich auch geeinigt haben, die nach diesem Schema erstellten Dateinamen müssen für den Webserver, auf dem Ihre Website liegt, verständlich sein. Wenn Sie einen Macintosh-Webserver betreiben, auf dem irgendwas unter Mac OS X läuft, werden Sie mit Dateinamen, die länger als 32 Zeichen sind, Schwierigkeiten bekommen. UNIX-Systeme unterscheiden zwischen Groß- und Kleinschreibung, das ist besonders bei Links wichtig. Für einen Windows-Server ist die Datei HELLO.HTM identisch mit hello.htm. Unter Windows ist es also egal, wie Sie den Link schreiben, für UNIXSysteme müssen Sie hier jedoch klar unterscheiden. Die kleinen Eigenheiten der verwendeten Plattform sollten also bekannt und dokumentiert sein, bevor Sie sich daran machen, Dateinamen zu vergeben. Wenn Sie bei der Benennung von Dateien die folgenden Grundregeln einhalten, sind Sie schon weitgehend auf der sicheren Seite: 쐽
Keine Satzzeichen, keine Sonderzeichen – Entfernen Sie sämtliche Satz- und Sonderzeichen aus Dateinamen (ä, ö, ü, ß, &, Komma, usw.).
쐽
Keine Leerzeichen – Sie könnten theoretisch zwar Leerzeichen in Dateinamen verwenden, doch haben sie praktisch verschiedene Nachteile. Leerzeichen müssen im HTML-Code nämlich in die Zeichenfolge %20 aufgelöst werden, was beim Verlinken auf Dateinamen, die Leerzeichen verwenden, problematisch werden kann. Markieren Sie Wortgrenzen innerhalb von Dateinamen besser mit einem Unterstrich: erste_ seite.htm.
쐽
Einheitliche Schreibung – Wechseln Sie nicht bei der Schreibung von Dateinamen nicht zwischen Groß- und Kleinbuchstaben. Entscheiden Sie sich für eine Schreibung und behalten Sie sie bei.
121
Websites planen und verwalten
쐽
Kurz und einfach – Verwenden Sie einfache, möglichst kurze Dateinamen. Dadurch wird die eventuelle Portierung der Website auf andere Systeme erleichtert und der HTML-Code ist besser zu lesen und zu warten.
Die Einhaltung obiger Regeln ist zwar noch keine Garantie, dass Ihre Seiten auf anderen Plattformen problemlos laufen, aber die Wahrscheinlichkeit ist ziemlich groß. Fragen Sie Ihren zuständigen Systemadministrator, ob noch weitere, plattformspezifische Vorgaben bestehen, die Sie einhalten müssen.
3.2
Die Sitemap-Werkzeuge von UltraDev
Mit den eingebauten Sitemap-Werkzeuge von UltraDev wird die Anlage und Wartung von Websites fast zum Kinderspiel. Zwar entheben Sie diese Funktionen nicht der Notwendigkeit, die Grundstruktur Ihrer Website zunächst von Hand zu entwerfen und zu zeichnen, doch erleichtern sie den Weg vom Entwurf zur tatsächlichen Umsetzung erheblich. Nur durch das Öffnen eines Dokuments bzw. das Setzen eines Links erzeugen Sie die komplette Struktur Ihrer Website. (Bei der Erstellung der Inhalte müssen Sie beim gegenwärtigen Stand der Technik freilich noch selber tätig werden.) Sie haben die Site-Werkzeuge in ihrer einfachsten Form bereits kennen gelernt, als wir die Liste der Dateien im lokalen Ordner der Site-Ansicht durchforscht haben. In einem anderen Ansichtsmodus werden die Dateien einer Site in Form eines Struktogramms dargestellt, das die Verbindungen der Dokumente untereinander visualisiert. In dieser Darstellung können Sie z.B. Links zwischen Dokumenten setzen oder wieder löschen. Diese Struktogramm-Ansicht, also die eigentliche Sitemap, können Sie in zweierlei Weise nutzen: entweder, um die Struktur einer bereits erstellten Website darstellen zu lassen oder um eine neue Website zu erstellen. Zuerst werden wir die Sitemap-Funktion an einer bestehenden Website testen, dann erstellen wir mit ihrer Hilfe eine neue Site.
Sitemaps von fertigen Websites anzeigen Wenn Sie schon eine Site definiert und ein paar Seiten erstellt haben, dann öffnen Sie sie bitte über das Menü SITE > SITE ÖFFNEN. Haben Sie noch keine Sites definiert, dann öffnen Sie eine der Tutorial-Sites, die UltraDev bei der Installation automatisch anlegt, um die Funktion der Sitemap-Werkzeuge nachvollziehen zu können. Sobald Sie eine Site geöffnet haben, können Sie in die Sitemap-Darstellung umschalten. Hierzu klicken Sie auf die dritte Schaltfläche von links in der Menüleiste der Site-Ansicht. Über das Menü FENSTER > SITEMAP können Sie diese Ansicht ebenfalls aufrufen. Die Anzeige auf Ihrem Monitor sollte dann in etwa so aussehen wie in Abb. 3.2 gezeigt. Tolle
122
Die Sitemap-Werkzeuge von UltraDev
Sache, nicht wahr? Und das Ganze ist nicht nur nett anzusehen, sondern darüber hinaus noch höchst nützlich. Lassen Sie uns das Site-Fenster und die Funktionen, die man in dieser Ansicht ausführen kann, nun etwas näher untersuchen.
Abbildung 3.2: Die Sitemap ist eine grafische Darstellung der Struktur einer Website.
Die von UltraDev dargestellte Sitemap hat große Ähnlichkeit mit einem handgezeichneten Struktogramm, bietet aber den großen Vorteil, dass sie den direkten Zugriff auf den HTML-Code erlaubt.
Seitensymbole Jedes Symbol in der Sitemap steht für eine verlinkte Seite, wobei für lokale und entfernte Dokumente unterschiedliche Icons verwendet werden. Lokale Dokumente werden mit dem standardmäßigen Dokumentsymbol von UltraDev angezeigt, Links zu externen Seiten werden durch ein Symbol dargestellt, das aussieht wie ein beschriebenes Blatt Papier mit einem kleinen Globus rechts daneben. Diese beiden Symbole sind die primären Platzhalter für Dokumente innerhalb einer Website. Um zusätzliche Informationen zu den Dokumenten anzuzeigen, können Sie sich im Site-Fenster über das Menü ANSICHT > ABHÄNGIGE DATEIEN ANZEIGEN sämtliche Dateien einblenden lassen, die mit den einzelnen Dokumenten verlinkt sind (Grafiken, Stylesheets usw.). Da bei dieser Art der Darstellung der Überblick schnell verloren geht, sollten Sie sie nur im Bedarfsfall einblenden. Standardmäßig wird in der Sitemap der Dateiname eingeblendet, unter dem ein HTMLDokumente gespeichert ist. Sie können sich aber anstelle der Dateinamen den aus dem <TITLE>-Tag abgeleiteten Seitentitel anzeigen lassen, wenn Sie das praktischer finden. Wählen Sie hierzu im Site-Fenster den entsprechenden Befehl im Menü ANSICHT > SEITENTITEL ANZEIGEN. Diese Option können Sie auch im Dialogfenster SITE-DEFINITION unter der Kategorie SITEMAP-LAYOUT wählen.
123
Websites planen und verwalten
Aussagekräftige Seitentitel spielen auch eine wichtige Rolle bei der Benutzerführung, da sie in der Titelleiste des Browsers angezeigt werden. Seiten ohne Seitentitel sind auch nicht sinnvoll unter den Lesezeichen abzulegen, da keine Informationen zur Seite gespeichert werden. Seitentitel helfen dem Anwender somit, gespeicherte Informationen schnell wiederzufinden und erleichtern ihm die Navigation. Über die Option SEITENTITEL ANZEIGEN finden Sie mühelos sämtliche Dateien, denen Sie noch keinen Seitentitel zugewiesen haben. Diese Dateien sind mit »Untitled Document« gekennzeichnet. Wenn Sie möchten, dass ein bestimmtes Dokument in der Sitemap nicht angezeigt wird, können Sie es über das Menü ANSICHT > HYPERLINK EINBLENDEN/AUSBLENDEN verbergen. Wenn Sie allerdings einen Hyperlink ausblenden, wird es schwierig, ihn über HYPERLINK EINBLENDEN wieder anzuzeigen. Zum Glück können Sie über Menü ANSICHT > ALS VERBORGEN MARKIERTE DATEIEN ANZEIGEN ausgeblendete Dateien wieder einblenden. Hier handelt es sich wieder um eine der merkwürdigen Funktionen von UltraDev, die nicht unbedingt auf Anhieb verständlich sind. Lassen Sie verborgene Hyperlinks wieder einblenden, so werden sie in Kursivschrift markiert. Abschließend sei noch auf ein weiteres nützliches Feature der Sitemap hingewiesen, nämlich auf die Farbe, mit der die Symbole beschriftet werden. Unterbrochene Links werden in Rot dargestellt, somit brauchen Sie die Sitemap nur nach rot markierten Symbolen zu durchsuchen, um eventuelle Probleme zu finden.
Links Wie Sie bereits gesehen haben, werden Links zwischen Dokumenten als Pfeillinien zwischen den Dokumenten dargestellt. Manchmal geht die Sitemap-Funktion nicht so sparsam mit dem gebotenen Platz um, wie man das gerne möchte. In diesem Fall können Sie den Cursor auf die vertikalen Pfeillinien setzen und die Symbole mit gedrückter Maustaste verschieben, um mehr Platz zu gewinnen. Neben dem Symbol für lokal gespeicherte Dokumente gibt es ein kleines Fadenkreuz, wie Sie es schon im Eigenschafteninspektor neben dem Eingabefeld HYPERLINK kennen gelernt haben. Sie können Links erstellen, indem Sie dieses Fadenkreuz auf die Datei ziehen, auf die Sie einen Link setzen möchten. Damit fügen Sie im Fußbereich des Dokuments einen Textlink zur Zielseite ein. Es wäre natürlich nur allzu schön, wenn der Link gleich an der richtigen Stelle in unserem tollen grafischen Menü sitzen würde, aber so weit ist die Technik noch nicht. Sie müssen also die Seite öffnen und den Link von Hand an die richtige Stelle kopieren. Über den Befehl Menü MODIFIZIEREN > LINK ERSTELLEN können Sie ebenfalls einen Link setzen. Wenn Sie sich die Struktur Ihrer Website aus mehreren, hierarchisch angeordneten Ebenen zusammensetzt, werden Sie wahrscheinlich schon bemerkt haben, dass UltraDev nur
124
Die Sitemap-Werkzeuge von UltraDev
die oberste Ebene in der Hierarchie anzeigt. Die darunter liegenden Ebenen können Sie sehen, wenn Sie auf das Plussymbol (+) links neben dem Seitensymbol klicken, worauf der Ast des Strukturbaumes aufgeklappt wird, der die von diesem Dokument abhängigen Seiten enthält. Durch Klick auf das Minussymbol (-) können Sie den Ast wieder zusammenfalten. Sie können also die Anzeige übersichtlich halten und immer nur den Ast aufklappen, den Sie bearbeiten möchten. Wenn Sie sehr tief in der Struktur hinuntersteigen, kann es trotzdem irgendwann unübersichtlich werden. Dann empfiehlt es sich, die Datei zu markieren und im Site-Fenster über den Befehl im Menü ANSICHT > ALS STAMMORDNER ANZEIGEN als Verzeichniswurzel zu definieren. Die Datei wird dann in der obersten Ebene der Sitemap angezeigt. Am oberen Rand des Sitemap-Fensters wird dann ein Pfad angezeigt, aus dem Sie ersehen können, an welcher Stelle der Site-Hierarchie Sie sich befinden (siehe Abb. 3.3). Wenn Sie die entsprechenden Knotenpunkte, die über der Sitemap angezeigt werden, anklicken, können Sie im Verzeichnisbaum wieder nach oben hüpfen.
Abbildung 3.3: Verwenden Sie die Knotenpunkte über dem Sitemap-Fenster, um durch die Verzeichnisstruktur der Site zu navigieren.
Wenn Sie ein neue Homepage definieren möchten, markieren Sie die betreffende Datei im lokalen Ordner und wählen Sie im Site-Fenster den entsprechenden Befehl im Menü SITE > ALS HOMEPAGE EINRICHTEN. Über Menü SITE > NEUE HOMEPAGE können Sie ein neues HTML-Dokument einrichten, das die Stammseite Ihrer Website wird. Bis jetzt habe ich allerdings noch keine rechte Verwendung für diese Funktionen gefunden. Nützlicher sind da schon die Befehle SITE > HYPERLINK ÄNDERN bzw. HYPERLINK ENTWenn Sie ein Seitensymbol auswählen und den Befehl SITE > HYPERLINK ÄNDERN aufrufen, öffnet UltraDev das bekannte Dialogfenster HTML-DATEI AUSWÄHLEN. Wenn Sie einen Link ändern, wird UltraDev alle Links entsprechend anpassen, sodass sie auf die neue Datei verweisen. Umgekehrt löscht der Befehl SITE > HYPERLINK ENTFERNEN alle Links innerhalb der Site, die ursprünglich auf diese Datei verwiesen haben. Das hört sich anfangs vielleicht etwas verwirrend an, denn Sie ändern nicht das markierte Dokument, sondern die Links in den Dateien, die auf dieses Dokument zeigen. FERNEN.
125
Websites planen und verwalten
Ausgewählte Dateien Innerhalb der Sitemap können Sie mit der Maus ein Auswahlrechteck aufziehen und mehrere Dateien auf einmal selektieren. In der Statuszeile wird eine Gesamtinformation zu den ausgewählten Dateien angezeigt. Wenn Sie in der Sitemap Dateien auswählen, werden die zugehörigen Einträge in der Dateienliste des lokalen Orders ebenfalls markiert.
Weitere Sitemap-Optionen Sie können die Darstellung der Sitemap über verschiedene Optionen verändern. Rufen Sie hierzu in der Site-Ansicht den Befehl im Menü ANSICHT > LAYOUT auf. Es öffnet sich das Dialogfenster SITE-DEFINITION, die Kategorie SITEMAP-LAYOUT wird automatisch aktiviert. Auch hier ist die Oberfläche von UltraDev nicht ganz logisch. Außer ANZAHL DER SPALTEN und SPALTENBREITE können Sie hier keine Einstellungen vornehmen, die nicht bereits woanders angeboten wurden. ANZAHL DER SPALTEN besagt, wie viele Seitensymbole in der Sitemap nebeneinander in einer Reihe platziert werden, SPALTENBREITE definiert eine Standardbreite für ein Seitensymbol und seine Beschriftung (in Pixel).
Mit der Sitemap neue Websites anlegen Wenn wir eine fertige Website haben, können wir die Sitemap-Funktionen von UltraDev sofort einsetzen, um sie zu verwalten. Doch was bringt die Sitemap, wenn wir unsere Website erst anlegen müssen? Angenommen, Sie haben den Strukturplan Ihrer Website bereits per Hand skizziert, dann können Sie eine »Skelettversion« dieser Site erstellen, ohne dass Sie sofort Inhalte oder die nötigen Navigationselemente einbauen müssen.
Eine neue Site definieren Wenn Sie mit den Sitemap-Funktionen eine Site anlegen wollen, wählen Sie im SiteFenster den Befehl im Menü SITE > NEUE SITE. Erzeugen Sie einen neuen Stammordner, der die Dateien der Site lokal speichert. Nehmen Sie sämtliche Einstellungen so vor, als würden Sie der Site gleich Dateien hinzufügen. Definieren Sie eine Homepage und lassen Sie sie vom Programm gleich erstellen. Schalten Sie nun die Sitemap-Ansicht ein. Sie sollte eine einzige Datei oben im Fenster anzeigen.
Inhaltsseiten erstellen Für eine Website brauchen wir natürlich mehr als bloß die Homepage. Die übrigen Seiten und die erforderlichen Links zwischen den Seiten lassen sich in einem Arbeitsgang leicht erstellen. Nehmen wir an, dass wir von der Homepage auf drei weitere Seiten verlinken:
126
Die Sitemap-Werkzeuge von UltraDev
content.html, links.html und about.html. Markieren Sie das Seitensymbol der Homepage in der Sitemap und rufen Sie den Befehl im Menü SITE > VERKNÜPFEN MIT NEUER DATEI auf (auch über das Kontextmenü zugänglich). Es öffnet sich das in Abb. 3.4 Dialogfenster VERKNÜPFEN MIT NEUER DATEI. In dieses Fenster geben Sie Titel und Dateinamen Ihres neuen Dokuments ein.
Abbildung 3.4: Einfaches Erzeugen neuer Dateien in der Site-Ansicht.
Wenn Sie die neuen Dateien angelegt haben, werden die zugehörigen Symbole in der Sitemap sowie die Links angezeigt. Auf diese Weise können Sie alle Seiten Ihrer Website erzeugen.
Links definieren Zwar wurden die neu erzeugten Seiten mit der markierten Seite verlinkt, zwischen den neuen Seiten selbst jedoch bestehen noch keine Verknüpfungen. Wenn Sie sich noch erinnern können, was über die Erstellung von Links innerhalb bestehender Websites geschrieben wurde, wissen Sie, was zu tun ist. Wenn nicht, dann sei es hiermit wiederholt: Markieren Sie das entsprechende Seitensymbol und ziehen Sie das Fadenkreuz, das neben dem Symbol angezeigt wird, auf die Datei, auf die Sie den Link setzen wollen. Innerhalb kürzester Zeit können Sie so das Grundgerüst einer Website definieren sowie die Links zwischen den Seiten. So können Sie im Schnellverfahren einen Prototyp Ihrer Website anlegen, um die Navigation Ihrer künftigen Website zu testen und so ein Gefühl für ihre Funktionalität zu bekommen. Und wenn Sie dann so allmählich das Material von Ihren Kunden bekommen, können Sie die Seiten sogar mit Inhalt füllen.
Dateien organisieren Nun könnten Sie natürlich einwenden, dass alle Dateien, die wir auf diesem Weg erzeugt haben, im selben Verzeichnis liegen, und mich fragen, wie das zu meinen früheren Aussagen bezüglich einer klaren Dateistruktur passt. UltraDev besitzt die erfreuliche Eigenschaft, Links zu aktualisieren, wenn Dateien verschoben werden. Nachdem Sie also alle Seiten erzeugt und miteinander verlinkt haben, können Sie die nötigen Ordner anlegen und die Dateien dorthin verschieben. Die Links funktionieren weiterhin.
127
Websites planen und verwalten
Um neue Ordner zu erzeugen, klicken Sie mit der rechten Maustaste in das Fenster LOKALER ORDNER. Aus dem Kontextmenü wählen Sie den Befehl NEUER ORDNER. Wenn Sie alle Ordner definiert haben, verschieben Sie die Dateien in die richtigen Ordner. UltraDev wird alle Links aktualisieren.
Sitemap speichern Wen die Site fertig ist und Sie mit der Sitemap zufrieden, können Sie dieselbe über den Befehl im Menü DATEI > SITEMAP SPEICHERN als Grafik speichern. Das ist sehr nützlich, wenn Sie die Sitemap online stellen möchten. Sie können auf dieser Grafik dann Imagemaps definieren, um auf die verschiedenen Seiten zu verlinken. So wird die Sitemap zur Navigationshilfe für die Besucher Ihrer Site.
3.3
Websites in UltraDev importieren
Als Benutzer von UltraDev fallen Sie zwangsläufig in eine der folgenden Kategorien: Entweder erstellen Sie mit dem Programm neue Websites, oder Sie verwenden es, um bereits existierende Websites zu bearbeiten. Sie haben mittlerweile das nötige Wissen, um eine neue Website anzulegen. Doch was, wenn eine Website irgendwo draußen auf einem Server liegt und gepflegt und aktualisiert werden muss?
Wie Sie an die Daten kommen Je nach Serverplattform haben Sie mehrere Zugriffsmöglichkeiten auf die benötigten Daten. Am einfachsten ist es, wenn die Daten auf einem Netzlaufwerk liegen, zu dem Sie direkten Zugang haben, und Sie die Daten direkt auf dem Server bearbeiten können. Meine Kopie von UltraDev greift auf das Netzlaufwerk eines Linuxservers zu, sodass HTML-Dateien unmittelbar bearbeitet und aktualisiert werden. Linux- und NT-basierte Server haben im Normalfall keine Probleme im Zusammenspiel mit Mac- oder WindowsClients, was sie zu nahezu idealen Serverplattformen macht. Wenn Sie keinen Netzwerkzugang zum Server haben, können Sie über FTP auf die Daten der Website zugreifen. Wenn Sie mit FTP arbeiten, müssen Sie immer eine lokale Kopie der Website auf dem Rechner anlegen, auf dem Sie die Website bearbeiten. Sie nehmen Aktualisierungen an den lokalen Dateien vor und laden die geänderten Dateien dann auf den Server.
128
Websites in UltraDev importieren
Sie können auf jeden Fall eine lokale Kopie der Website anlegen und die Änderungen auf den Server übertragen, ob der Zugriff nun per Netzwerk oder FTP erfolgt. Wenn Sie Änderungen direkt auf dem Server durchführen können, wozu sollten Sie dann eine lokale Kopier der Website anlegen? Dateien lokal zu bearbeiten empfiehlt sich vor allem dann, wenn Sie nicht ständig mit dem Netzwerk verbunden sind oder Ihr Zugang sehr langsam ist. Darüber hinaus können Sie mit einer lokalen Kopie Änderungen an der Website ausführlich testen, bevor Sie sie online stellen. Wenn eine Seite noch im Bearbeitungsstadium ist und versehentlich publiziert wurde, dann können Sie nur beten, dass Sie keine Kommentare eingefügt haben, die nicht für die Augen der Öffentlichkeit bestimmt sind. Ich möchte Ihnen raten, grundsätzlich mit einer lokalen Kopie zu arbeiten und die Seiten erst dann zu veröffentlichen, wenn alle Änderungen abgeschlossen sind und die Site ausführlich getestet wurde.
Webserver-Verbindung einrichten Bevor Sie eine Verbindung zum Webserver einrichten, müssen Sie sich entscheiden, ob Sie eine lokale Kopie der Site anlegen wollen oder direkt auf dem Server arbeiten. Wenn Sie einen FTP-Zugang einrichten, müssen Sie ohnehin eine lokale Kopie anlegen. Wenn Sie noch keine lokale Kopie der Dateien angelegt haben, dann ist jetzt der Augenblick dafür gekommen.
Direkter Zugriff auf den Webserver Wenn Sie direkt auf den Produktionsserver zugreifen, müssen Sie die Adresse der Site so angeben, als würde sie lokal auf Ihrem Rechner liegen. Die anderen Verbindungen greifen auf eine lokale Kopie der Dateien zu. Wenn Sie diese kleine Hürde genommen haben, sollten Sie eigentlich loslegen können. Die ganze Prozedur dürfte eigentlich keine Schwierigkeit darstellen, Ähnliches haben Sie die ganze Zeit gemacht. Wenn Sie direkt auf dem Server arbeiten, sollten Sie den Server-Zugriff im Dialogfenster SITE-DEFINITION auf »Keine« stellen, obwohl man zunächst vermuten würde, dass »Lokal/Netzwerk« die richtige Einstellung ist. In letzterem Falle geht UltraDev dann allerdings davon aus, dass auf dem lokalen Rechner ein Webserver installiert ist, was aber nicht immer zutreffend sein dürfte.
Lokale/Netzwerk-Verbindung einrichten Die zweite Art des Serverzugriffs wird im Dialogfenster SITE-DEFINITION als »Lokal/Netzwerk« aufgeführt. Sie funktioniert ähnlich wie der zuvor besprochene direkte Zugriff auf
129
Websites planen und verwalten
den Webserver und setzt voraus, dass Sie auf das Verzeichnis Ihres Webservers wie auf ein Netzlaufwerk zugreifen können. Der Unterschied besteht darin, dass Sie auch eine lokale Kopie der Site angelegt haben, an der Sie Änderungen durchführen, um sie anschließend auf den Webserver zu publizieren. Bei der Auswahl dieses Verbindungstyps verändert sich die Eingabemaske im Dialogfenster SITE-DEFINITION wie in Abb. 3.5 gezeigt. Sie müssen einen entfernten Ordner angeben, in dem die Online-Version Ihrer Website liegt. Dieser Ordner darf nicht mit dem lokalen Site-Ordner identisch sein.
Abbildung 3.5: Auf Sites, die lokal gehostet werden oder auf einem Netzlaufwerk liegen, kann entweder direkt zugegriffen werden oder über die Option Lokal/Netzwerk, bei der eine lokale Arbeitskopie der Site angelegt wird.
WebDAV WebDAV ist erst mit der 4.0-Version von UltraDev verfügbar. WebDAV (Web Distributed Authoring and Versioning) ist ein neues Web-basiertes Datenverwaltungsprotokoll, das zunehmend als offener Standard akzeptiert wird. Windows unterstützt WebDAV bei seiner Webordner-Implementierung, und auch unter Mac OS X steht WebDAV systemweit zur Verfügung. Falls Ihr Netzwerk an einen WebDAV-Server angebunden ist, fragen Sie Ihren Systemadministrator nach den Zugangsdaten. Um eine WebDAV-Verbindung einzurichten, wählen Sie die entsprechende Zugangsart aus und klicken dann auf die Schaltfläche EINSTELLUNGEN. Sie werden nach den üblichen Daten gefragt: URL, Benutzername, Kennwort sowie E-Mail-Adresse. Das Kennwort können Sie speichern, sofern Sie das möchten.
130
Websites in UltraDev importieren
SourceSafe Database Auch dieses Feature steht erst mit UltraDev 4.0 zur Verfügung. SourceSafe Database arbeitet mit der Visual Sourcesafe-Technologie von Microsoft, die eine Datenzugriffskontrolle ermöglicht. Da es sich um eine proprietäre Technologie handelt, steht sie natürlich nicht auf allen Plattformen zur Verfügung. Haben Sie Zugriff auf ein SourceSafe-System, klicken Sie auf den Button EINSTELLUNGEN, um den Zugang einzurichten. Geben Sie den Pfad an sowie den Namen des Projekts, Benutzernamen und Kennwort. Aktivieren Sie das Kontrollkästchen SPEICHERN, wenn Sie das Kennwort nicht jedes Mal neu eingeben wollen. Welche Zugangsart Sie letztlich auch wählen, UltraDev erleichtert die Konfiguration mit diesem Dialogfenster erheblich.
FTP-Zugang Die letzte Option für den Zugriff auf den Webserver ist die Übertragung der Daten per FTPProtokoll – wenn sonst nichts geht, FTP geht immer. Wenn Sie nur per Einwahlverbindung auf den Server zugreifen können oder erhöhte Sicherheitsvorschriften gelten, bleibt Ihnen vermutlich sowieso nichts anderes übrig, als eine FTP-Verbindung einzurichten. Eingerichtet wird der FTP-Zugang über die entsprechende Option im Dropdown-Menü SERVER-ZUGRIFF. Um per FTP auf die entfernte Site zugreifen zu können, müssen Sie mehrere Einstellungen treffen, wie in Abb. 3.6 gezeigt. In diesem Beispiel ist die Hostadresse des FTP-Servers 192.168.0.1 und der Name des Verzeichnisses, in das die Dateien geladen werden, public.html. Sie müssen natürlich die Zugangsdaten eintragen, die Sie von Ihrem Provider bekommen.
Abbildung 3.6: Den FTP-Zugang konfigurieren im Dialogfenster SiteDefinition
131
Websites planen und verwalten
Über folgende Eingabefelder konfigurieren Sie den Zugang zum Webserver: 쐽
FTP-HOST – Hier tragen Sie den Host-Namen oder die IP-Adresse Ihres Webservers ein.
쐽
HOST-ORDNER – Hier tragen Sie den Pfad zum Stammverzeichnis Ihrer Website ein.
쐽
ANMELDUNG – Hier geben Sie Ihren Benutzernamen ein.
쐽
KENNWORT – In dieses Feld geben Sie das geheime Kennwort ein, das Ihnen Ihr Provider mitgeteilt hat. Wenn sichergestellt ist, dass mit Ihrem Kennwert kein Missbrauch betrieben werden kann, können Sie das Kennwort speichern, indem Sie das Kontrollfeld SPEICHERN anklicken.
쐽
PASSIVEN FTP VERWENDEN – Diese Einstellung wird wichtig, wenn Sie aus einem Subnetz, das mit IP-Masquerading und Network Address Translation arbeitet, per FTP auf den Server zugreifen. Technisch gesehen öffnet beim passiven FTP der lokale Rechner einen Daten- und Kontrollkanal zum Server, statt dass wie üblich der entfernte Rechner einen Rückkanal zum Client herstellt. Sie können diese Option vorbeugend aktivieren. Sollte sie nicht benötigt werden, verursacht sie keine Probleme.
쐽
FIREWALL VERWENDEN – Wenn Ihre Site hinter einer Firewall liegt, müssen Sie unter Umständen die Voreinstellungen von UltraDev entsprechend anpassen, damit das Programm auf den Server zugreifen kann. Versuchen Sie es zuerst über passiven FTP. Wenn das nicht funktioniert, müssen Sie den Firewall-Anschluss konfigurieren.
Den Firewall-Anschluss konfigurieren Sie wie schon erwähnt in den Voreinstellungen von UltraDev. Ein paar der Einstellungen sind identisch mit denen des Serverzugriffs über LOKAL/NETZWERK. Sie können also dort die entsprechenden Einstellungen nachsehen, auch wenn Sie kein FTP verwenden. Die Voreinstellungen zu Site-FTP verändern Öffnen Sie im Menü BEARBEITEN das Dialogfenster VOREINSTELLUNGEN. Wählen Sie im Listenfeld KATEGORIE den Eintrag SITE-FTP. Die Eingabemaske ändert sich wie in Abb. 3.7 gezeigt, sodass Sie die nötigen Feineinstellungen vornehmen können. Wenn Sie nicht hinter einer Firewall arbeiten, werden Sie die Einstellungen so belassen können, wie sie sind. Falls Sie Änderungen vornehmen müssen, stehen Ihnen folgende Optionen zur Auswahl: 쐽
IMMER ZEIGEN – Die Site-Ansicht ist in zwei Fenster geteilt, von denen das rechte standardmäßig die lokalen und das linke die entfernten Dateien der Site anzeigt. Über diese beiden Dropdown-Menüs können Sie die Anzeige der Dateien in den Fenstern austauschen.
쐽
ABHÄNGIGE DATEIEN – Abhängige Dateien sind Dateien, die von HTML-Dokumenten benötigt werden und ohne die sie nicht vollständig angezeigt werden können. Einfacher ausgedrückt: Wenn Ihr HTML-Dokument Bilder enthält, dann sind diese Bil-
132
Websites in UltraDev importieren
der abhängige Dateien. Über diese Kontrollfelder regeln Sie, ob UltraDev Sie vorher fragt, ob es abhängige Dateien einschließen soll, wenn es Dateien vom oder zum Server überträgt.
Abbildung 3.7: In den Site-Voreinstellungen legen Sie die Darstellung der Dateien in der Site-Ansicht sowie die Arbeitsweise des FTP-Clients fest. 쐽
FTP-VERBINDUNG – Hier stellen Sie ein, ob und nach welcher Zeitspanne die FTPVerbindung getrennt werden soll, falls keine Daten übertragen werden. Das ist vor allem dann sinnvoll, wenn Sie sich per Wählverbindung auf dem Server einloggen und Ihre Verbindungen nach Zeittakt abgerechnet werden.
쐽
FTP-ZEITÜBERSCHREITUNG – Hier geben Sie an, wie lange UltraDev versuchen soll, eine Verbindung zum entfernten Server herzustellen. Kommt innerhalb der eingestellten Zeitspanne keine Verbindung zu Stande, gibt UltraDev eine Fehlermeldung aus.
쐽
FIREWALL-HOST – Wenn Sie hinter einer Firewall arbeiten, geben Sie in diesem Feld die Adresse des Proxy-Servers ein, zu dem die Verbindung hergestellt werden soll. Über diesen Host erfolgt die eigentliche Verbindung zum Internet.
쐽
FIREWALL-ANSCHLUSS – Wenn Sie eine Firewall verwenden, muss ein feste Portnummer angegeben werden, über die die Verbindung zum FTP-Server hergestellt wird. Die Default-Portnummer ist 21.
쐽
BEREITSTELLUNGSOPTIONEN – Wenn Sie dieses Kontrollfeld aktivieren, werden noch nicht gespeicherte Änderungen an Dateien automatisch gesichert, bevor diese auf den Server geladen werden. Mit dieser Option verhindern Sie, dass Änderungen versehentlich verloren gehen.
133
Websites planen und verwalten
Die meisten dieser Optionen können unverändert bleiben. Wenn Sie Einstellungen an den Firewall-Option vornehmen, obwohl Sie nicht hinter einer Firewall arbeiten, führt dies zu einem Verbindungsfehler. Fortgeschrittene FTP-Konfiguration Das FTP-Protokoll erlaubt die Übertragung von ASCII- und Binär-Daten. Programme und Grafiken im ASCII-Modus zu übertragen ist eine ebenso schnelle wie wirksame Methode, diese Daten zu zerschießen. Warum sollten Sie dann überhaupt den ASCII-Modus verwenden? Unix, Mac und Windows verwenden unterschiedliche Kodierungen, um ein »end of line« zu bezeichnen, und dieses Steuerzeichen wird automatisch umgewandelt. Leider gibt es in UltraDev keine direkte Möglichkeit, dem Programm mitzuteilen, in welchem Modus es bestimmte Dateitypen vom und zum Server übertragen soll. Hier bleibt nur Handarbeit. Öffnen Sie zu diesem Zweck die Datei FTPExtensionMapMac.txt (Mac OS) bzw. FTPExtensionMap.txt (Windows) und passen Sie sie entsprechend an. Sie finden diese Datei im Ordner Dreamweaver UltraDev\Configuration auf Ihrer Festplatte. Nachfolgend sehen Sie einen Ausschnitt aus der Windows-Version dieser Datei: CGI CSS DCR DIR DOC DXR EXE GIF HTM HTML JPG JPEG JS LBI MNO MOV MPEG
ASCII ASCII BINARY BINARY BINARY BINARY BINARY BINARY ASCII ASCII BINARY BINARY BINARY BINARY BINARY BINARY BINARY
Um nun einem bestimmten Dateityp den entsprechenden Übertragungsmodus zuzuweisen, setzen Sie die Dateinamenserweiterung dieses Dateityps in die erste Spalte und den Modus (ASCII bzw. BINARY) in die zweite. Wie Sie in obigem Ausschnitt sehen, werden HTML-Dokumente im ASCII-Modus und Bilder (JPG, GIF) als Binär-Daten übertragen. Wenn Sie z.B. Java-Dateien übertragen müssen, ergänzen Sie die Liste um die Einträge JAR und CLASS und geben Sie als Übertragungsmodus BINARY an. Somit können Sie die entsprechenden Datentypen problemlos per FTP übertragen.
134
Websites in UltraDev importieren
Creator-Kennung und Dateitypen auf dem Mac Macs haben ein einzigartiges System der Dateiverwaltung. Zusammen mit jeder Datei wird eine Signatur bestehend aus vier alphanumerischen Zeichen gespeichert, an der das System erkennt, um welche Art von Datei es sich handelt und mit welchem Programm sie erzeugt wurde. Wenn Sie also eine GIF-Datei mit Photoshop erzeugen, wird sie auch mit Photoshop geöffnet. Bei anderen GIF-Dateien weist die Signatur vielleicht auf Fireworks als Erstellungsprogramm hin und ruft entsprechend dieses Programm auf. Jede Datei »merkt« sich also, welche Art von Datei sie ist und mit welchem Programm sie erzeugt wurde. Mit einem Programm wie Apples ResEdit können Sie die CreatorKennung einer Datei ermitteln. Setzen Sie diese Kennung dann in die Datei FTPExtensionMap.txt ein, damit UltraDev die Dateien im richtigen Modus übertragen kann.
Die Verbindung öffnen Wenn Sie nun den Server-Zugriff konfiguriert haben, können wir die Übertragungsfunktionen im Site-Fenster testen. Klicken Sie dazu auf die Schaltfläche VERBINDEN in der Werkzeugleiste. Abb. 3.8 zeigt die geöffnete Verbindung einer lokalen Site zum entfernten Server. Wenn Sie in der Site-Ansicht nur das Fenster mit den lokalen Dateien sehen, klicken Sie auf den kleinen Pfeil links unten in der Statuszeile, sodass er nach rechts zeigt. Einer Übertragung der Dateien zwischen der lokalen und der entfernten Site steht nun nichts mehr im Wege.
Abbildung 3.8: Die Verbindung zum Server ist geöffnet.
Dateien übertragen Am leichtesten lassen sich Dateien zwischen der lokalen und der entfernten Site per Drag and Drop verschieben. Auf diese Art und Weise können Sie eine oder mehrere Dateien oder sogar ganze Ordner von einem ins andere Fenster ziehen. Beim Verschieben prüft
135
Websites planen und verwalten
UltraDev automatisch, ob und welche Dateien von den ausgewählten Dateien abhängig sind, und fragt, ob die abhängigen Dateien mit übertragen werden sollen. Das Programm spart Ihnen also eine Menge Arbeit, da Sie nach den abhängigen Dateien nicht selbst suchen müssen. Der File-Transfer lässt sich auch mit den Pfeilen DATEI(EN) BEREITSTELLEN bzw. ABRUdurchführen, wie man sie auch von FTP-Clients kennt. Mit DATEI(EN) BEREITSTELLEN laden Sie Dateien auf den entfernten Server, mit DATEI(EN) ABRUFEN holen Sie sich Dateien oder ganze Ordner lokal auf die Festplatte. Eine Anzeige rechts unten in der Statusleiste informiert Sie, wie weit der Up- bzw. Download fortgeschritten ist. Wenn Sie auf den roten Stop-Button klicken, unterbrechen Sie die Übertragung. FEN
Falls es bei der Übertragung zu Fehlern kommt, können Sie sich das FTP-Protokoll anzeigen lassen, das alle Kommandos während der Datenübertragung aufzeichnet. Sie finden es unter Menü SITE > FTP-PROTOKOLL (Mac) bzw. unter Menü FENSTER > SITE-FTP-PROTOKOLL in der Site-Ansicht (Windows). Hier dürften Sie aller Wahrscheinlichkeit nach die Lösung für Ihr Problem finden.
Dateiansicht in den Site-Fenstern aktualisieren Wenn Sie Dateien in der entfernten bzw. lokalen Site ändern (löschen oder hinzufügen), kann es vorkommen, dass die Änderung in den entsprechenden Fenstern nicht angezeigt wird. Wenn Sie das unbestimmte Gefühl haben, dass eine der beiden Seiten nicht vollständig angezeigt wird, klicken Sie auf die Schaltfläche AKTUALISIEREN (der kreisförmige Pfeil in der Werkzeugleiste), dann werden die Dateilisten in beiden Fenstern auf den aktuellen Stand gebracht. Wenn Sie möchten, dass speziell die Liste mit den Dateien der entfernten bzw. der lokalen Site aktualisiert wird, wählen Sie den jeweiligen Befehl im Menü ANSICHT > ENTFERNT AKTUALISIEREN bzw. LOKAL AKTUALISIEREN. Die entsprechende Ansicht wird dann neu geladen.
Dateien synchronisieren Dateien zu synchronisieren ist die bequemste Art und Weise, HTML-Dokumente vom oder zum Server zu übertragen. Statt alle geänderten Dateien mühsam selbst zu suchen und per Drag & Drop zu verschieben, lassen Sie sich die Änderungen von UltraDev anzeigen. Wenn Sie sich nur eine Liste der geänderten Dateien anzeigen lassen wollen, wählen Sie den Befehl im Menü BEARBEITEN > NEUERE AUSWÄHLEN (LOKAL) bzw. NEUERE AUSWÄHLEN (ENTFERNT). Im entsprechenden Fenster werden dann die Dateien markiert, die neuer sind als die Dateien am anderen Ende der Verbindung. Per Drag and Drop können Sie die markierten Dateien dann in das andere Fenster ziehen, um die Daten zu synchro-
136
Websites pflegen
nisieren. Dieses Aktualisieren von Hand lässt Ihnen die volle Kontrolle darüber, welche Dateien aktualisiert werden sollen, andrerseits laufen Sie nicht Gefahr, abhängige Dateien zu vergessen, da UltraDev sie automatisch mit überträgt. Wenn Sie die ganze Arbeit dem Programm überlassen wollen, wählen Sie den Befehl SITE > SYNCHRONISIEREN, woraufhin sich das in Abb. 3.9 gezeigte Dialogfenster öffnet. Klicken Sie auf die Schaltfläche OK, um sich eine Liste aller zu aktualisierenden Dateien anzeigen zu lassen. Dateien, die Sie nicht übertragen wollen, können Sie abwählen. Klicken Sie nun auf OK.
Abbildung 3.9: Entfernte und lokale Site schnell synchronisieren
Im Dialogfenster DATEIEN SYNCHRONISIEREN können Sie einstellen, was übertragen werden soll (die ganze Site oder nur ausgewählte Dateien) und in welcher Richtung diese Dateien übertragen werden sollen (von der lokalen zur entfernten Site oder umgekehrt bzw. in beiden Richtungen). Wenn Sie das etwas missverständliche Kontrollfeld ENTFERNTE DATEIEN NICHT AUF LOKALEM LAUFWERK LÖSCHEN aktivieren, werden beim Upload sämtliche Dateien der entfernten Site gelöscht, für die es kein Gegenstück auf der lokalen Site gibt. Ebenso werden beim Download sämtliche lokalen Dateien gelöscht, die sich nicht auf der entfernten Site finden. Wenn Sie alle Daten übertragen haben, klicken Sie auf die Schaltfläche TRENNEN, um die Verbindung zwischen Ihrem Rechner und dem Server zu schließen. In der Site-Ansicht können Sie mit den beiden Schaltflächen links oben in der Werkzeugleiste schnell zwischen der Sitemap und den Site-Dateien umschalten.
3.4
Websites pflegen
Mit zum Schwierigsten beim Warten großer Websites gehört das Vermeiden von unterbrochenen Links. Bei ein paar Hundert Seiten kann es schon mal passieren, dass man versehentlich einen Link löscht, vor allem, wenn man so wie ich bei kleineren Eingriffen gerne selbst am Code bastelt.
137
Websites planen und verwalten
Hyperlinks überprüfen UltraDev kann sämtliche Links auf Ihren Seiten in Sekundenschnelle überprüfen. Rufen Sie hierzu den Befehl SITE > HYPERLINKS FÜR GANZE SITE PRÜFEN auf. Das Programm untersucht daraufhin die gesamte Website nach fehlerhaften, verwaisten und externen Links. Wählen Sie den benötigten Bericht über das Dropdown-Menü ANZEIGEN aus. Fehlerhafte (unterbrochene) Links beziehen sich auf lokale Dateien, die nicht mehr korrekt funktionieren. Mit den programminternen Funktionen von UltraDev zum Bearbeiten, Verschieben und Umbenennen von Dateien lassen sich diese Probleme in den meisten Fällen gut in den Griff bekommen. Dateien von Hand zu bearbeiten stellt allerdings immer eine gewisse Fehlerquelle dar. Externe Links sind Links, die auf Dateien zeigen, die nicht auf Ihrer Site liegen. Um sich alle externen Links Ihrer HTML-Dokumente anzeigen zu lassen, wählen Sie diese Option. UltraDev checkt diese Links zwar nicht selbst, aber anhand der angezeigten Liste können Sie diese Links aber selbst per Browser überprüfen. Abb. 3.10 zeigt die Ergebnisse eines Suchdurchlaufs nach den externen Links einer Website.
Abbildung 3.10: Mit der Funktion Hyperlinks für ganze Site prüfen können Sie sich z.B. alle externen Links anzeigen lassen.
Die letzte Option VERWAISTE DATEIEN findet sämtliche Dateien, die mit keinen anderen Dokumenten der Site verknüpft sind. Falls nicht zufällig ein externer Link von außerhalb auf diese Dateien gesetzt ist, kann kein Browser der Welt sie finden – daher der Name verwaiste Dateien. Wenn Sie die Linkprüfung über Ihre Site haben laufen lassen, können Sie das Ergebnis mit Klick auf die Schaltfläche SPEICHERN als Datei ausgeben. Es wird eine einfache Textdatei erzeugt, die Ihnen eine gute Kontrollmöglichkeit darüber gibt, welche Links schon berichtigt wurden und welche nicht. Nachfolgend ein Muster eines solchen Berichts:
138
Websites pflegen
Fehlerhafte Hyperlinks: klapptest.htm klapptest.htm klapptest.htm
# grafiken/transparent.gif #
Externe Hyperlinks: index.asp <%=MM_moveNext%> index.asp <%=MM_movePrev%> test01.asp <%=MM_moveNext%> test01.asp <%=MM_moveLast%> test01.asp <%=MM_editAction%> test03.asp <%=MM_moveNext%> test04.asp <%=MM_moveNext%> TMPz9av7d5cj.asp <%=MM_moveNext%> TMPz9av7d5cj.asp <%=MM_movePrev%> Verwaiste Dateien: hg_farbtest.gif multicol.htm screenshot.jpg test01.asp test02.asp test04.asp TMPz9av7d5cj.asp _mmDBScripts/adojavas.inc _mmDBScripts/MMHTTPDB.asp Connections/connTest.asp Connections/connVideothek.asp datenbank/video.ldb datenbank/video.mdb file:///E|/Eigene Dateien/Websites/videothek/multicol.htm Templates/Unbenannt.dwt Dateien: 21 gesamt, 13 HTML, Hyperlinks: 17 gesamt, 5 OK,
15 verwaist 3 fehlerhaft,
9 extern
Der Bericht enthält Angaben zu allen drei Kategorien, die geprüft werden, sowie zum Linkstatus innerhalb der gesamten Website. Wenn Sie eine schnelle Möglichkeit suchen, externe Links zu überprüfen, möchte ich Sie auf meinen Linkchecker hinweisen, den Sie unter der Adresse http://jray.ag.ohio-state.edu herunterladen können. Damit können Sie externe Links auf Ihrer Website in Echtzeit mit Ihrem Browser testen.
139
Websites planen und verwalten
Unterbrochene Links reparieren Wenn Sie auf Ihrer Website einen gebrochenen Link entdecken, der auf allen Seiten vorhanden ist – z.B. ein externer Link auf eine Adresse, die nicht mehr existiert oder sich geändert hat –, dann können Sie diesen Link global auf allen Seiten ändern lassen. Wählen Sie hierzu den Befehl SITE > HYPERLINK FÜR GANZE SITE ÄNDERN. Abb. 3.11 zeigt das Dialogfenster mit den nötigen Einstellungen, um alle Links auf die URL http://www.oldsite.com durch den Link auf die URL http://www.newsite.com zu ersetzen. Sie können auch auf das Ordnersymbol neben dem Eingabefeld klicken und ein Dokument Ihrer Site auswählen, dann müssen Sie nichts tippen. Klicken Sie jetzt auf OK, und das Programm macht sich an die Arbeit. UltraDev zeigt Ihnen ein Fenster mit einer Liste aller betroffenen Dateien an, in dem Sie diejenigen Dokumente auswählen, die aktualisiert werden sollen.
Abbildung 3.11: Schnelle Aktualisierung von Links
3.5
Verteilte Entwicklungsumgebung
Wenn ein mehrköpfiges Team an der Realisierung einer Website arbeitet, kann es erforderlich sein, dass Dateien von mehreren Personen gleichzeitig bearbeitet werden. Zu Problemen kann es kommen, wenn eine Datei von zwei Personen gleichzeitig bearbeitet wird. Im normalen Bearbeitungsmodus überspeichert der letzte Bearbeiter die Änderungen seines »Vorgängers«. Stets allen Kollegen sagen zu müssen, welche Datei Sie gerade bearbeiten und von der sie daher die Finger lassen sollen, kann nicht die endgültige Lösung des Problems sein. Aber, Sie ahnen es schon, UltraDev bietet auch hier Abhilfe. Mithilfe der Funktion EIN-/AUSCHECKEN können Sie sich eine Art Besitzrecht an einem Dokument sichern. »Ausgecheckte« Dokumente können von niemand anderem bearbeitet werden. Das ist so ähnlich wie mit einem Buch aus der Leihbücherei: Wenn Sie das Buch ausleihen, gehört es Ihnen solange, bis Sie es fertig gelesen haben. Ihre Kollegen sehen also, wer das Dokument in Bearbeitung hat, können aber nicht darauf zugreifen. Wenn Sie fertig sind, geben Sie die Datei frei, damit andere sie bearbeiten können. Verschiedene Technologien wie WebDAV und MS SourceSafe bieten solch Ein-/Auschecksysteme. Wenn Sie aber keine entsprechende Servertechnik definiert haben, »weiß« UltraDev nicht, ob diese Technologien zur Verfügung stehen und verwendet daher sein internes System, um Dateien für den Zugriff zu sperren.
140
Verteilte Entwicklungsumgebung
Funktion EIN-/AUSCHECKEN einrichten Wenn Sie die bei der Realisierung einer Website die Funktion EIN-/AUSCHECKEN verwenden wollen, müssen Sie in der Site-Definition die entsprechenden Einstellungen vornehmen. Rufen Sie hierzu in der Site-Ansicht über SITE > SITES DEFINIEREN das entsprechende Dialogfenster auf. Wählen Sie in diesem Fenster die Kategorie REMOTEINFORMAITONEN aus und aktivieren Sie das Kontrollfeld EIN-/AUSCHECKEN VON DATEIEN AKTIVIEREN. Abb. 3.12 zeigt die nicht sehr umfangreiche Eingabemaske. Aktivieren Sie die Funktion EIN-/AUSCHECKEN, können Sie noch wählen, ob die ausgecheckte Datei mit dem Namen und der E-Mail-Adresse des Bearbeiters versehen werden soll. Nicht zuletzt empfiehlt es sich auch, das Kontrollfeld DATEIEN BEIM ÖFFNEN AUSCHECKEN zu aktivieren, da Sie dann nicht jedes Mal von Hand auschecken müssen. Wenn Sie die Funktion EIN-/AUSCHECKEN von UltraDev verwenden wollen, müssen Sie in der Site-Definition als Server-Zugriff eine andere Option als KEINE einstellen.
Abbildung 3.12: Die Funktion Ein-/Auschecken begnügt sich mit wenigen Einstellungen.
Die Funktion EIN-/AUSCHECKEN im praktischen Einsatz Mit der Funktion EIN-/AUSCHECKEN ist es ein Leichtes, den Überblick darüber zu behalten, welche Datei augenblicklich von wem bearbeitet wird. Wenn Sie das Kontrollfeld DATEIEN BEIM ÖFFNEN AUSCHECKEN aktiviert haben, können Sie mit UltraDev wie
141
Websites planen und verwalten
gewohnt arbeiten. Dateien werden beim Öffnen sofort ausgecheckt und können dann von niemand anderem bearbeitet werden, sofern UltraDev bzw. Dreamweaver richtig konfiguriert sind. Sie können auch die Schaltflächen EINCHECKEN bzw. AUSCHECKEN in der Werkzeugliste der Site-Ansicht benutzen (Pfeile), um Dateien für die Bearbeitung durch andere Benutzer zu sperren bzw. freizugeben. Ausgecheckte Dateien werden in der Dateiliste als solche gekennzeichnet, zugleich wird der Name des Bearbeiters angezeigt. Wenn Sie den Namen des Bearbeiters anklicken, öffnet sich Ihr E-Mail-Programm und Sie können dem Kollegen freundlich aber bestimmt mitteilen, dass er nun endlich die Datei wieder freigeben soll. Abb. 3.13 zeigt das Auscheck-System in Funktion.
Abbildung 3.13: Ausgecheckte Dateien werden mit dem Namen des Bearbeiters angezeigt.
Wenn Sie Websites im Team entwickeln, werden Sie auf die Funktion EIN-/AUSCHECKEN bald nicht mehr verzichten wollen. Die einzige Alternative bestünden darin, einen strikten Bearbeitungsplan aufzustellen und genau festzulegen, wer wann welche Datei bearbeitet, oder die Website in mehrere Teile aufzusplitten und jeweils nur diesen Teil lokal auf dem Rechner der einzelnen Mitarbeiter ohne Zugriffsmöglichkeit von Seiten Dritter zu speichern.
Design Notes Auch die Design Notes sind eine Funktion, auf die Sie in einem Entwicklerteam bald nicht mehr verzichten wollen. Design Notes sind einfach ein Kommentar, den Sie während der Bearbeitung an ein beliebiges HTML-Dokument anhängen können. Diese Kommentare werden im XML-Format in einem eigenen Ordner namens _notes im Stammverzeichnis der Site abgelegt. Wenn ein Bearbeiter eine Datei auscheckt, an die Design Notes angehängt sind, kann er diese öffnen und sich über den Bearbeitungsstand informieren und seinerseits Kommentare einfügen. Design Notes werden unabhängig vom eigentlichen HTML-Dokument gespeichert, Sie brauchen also keine Bedenken zu haben, dass sich plötzlich XML-Markup in den normalen HTML-Code schleicht. Um Kommentare an eine Datei anzufügen, rufen Sie den Befehl DATEI > DESIGN NOTES auf. Um die an eine Datei angehängten Design Notes zu lesen, markieren Sie die entspre-
142
Verteilte Entwicklungsumgebung
chende Datei im Fenster LOKALER ORDNER der Site-Ansicht. Mit Klick auf die rechte Maustaste öffnen Sie das Kontextmenü und wählen den Befehl DESIGN NOTES. Das Eingabefenster DESIGN NOTES sehen Sie in Abb. 3.14.
Abbildung 3.14: Speichern Sie in den Design Notes alle wichtigen Informationen zu einer Datei.
Unter dem Register BASIS-INFO können Sie im Dropdown-Menü STATUS aus einer vordefinierten Liste den Bearbeitungsstatus der Datei auswählen. In das Feld ANMERKUNGEN können Sie freien Kommentar eingeben und mit Klick auf das Kalender-Symbol mit einem Datum versehen. Sie können ferner ein Kontrollfeld aktivieren, ob die Design Notes angezeigt werden sollen, wenn die Datei geöffnet ist. Möchten Sie in den Design Notes zusätzliche Informationen ablegen, klicken Sie auf das Register ALLE INFORMATIONEN. Ohne hier groß in XML einsteigen zu wollen, sei darauf hingewiesen, dass in den Design Notes sämtliche Attribute als Name/Wert-Paar gespeichert werden. Im Feld INFO finden Sie alle Paare aufgelistet, die definiert wurden. Name und Wert können verändert werden, indem man die entsprechende Zeile anklickt und in den Eingabefeldern NAME bzw. WERT die neuen Werte zuweist. Wie bei allen Eigenschaftslisten von UltraDev können über das Plus- bzw. Minussymbol Einträge hinzugefügt bzw. gelöscht werden. Wenn Sie die Design Notes direkt bearbeiten möchten, dann öffnen Sie im Explorer bzw. Finder den Ordner _notes. Er liegt im gleichen Verzeichnis wie die Website, wird aber in der Site-Ansicht von UltraDev nicht angezeigt. Die XML-Datei, die die Design Notes zu einem HTML-Dokument enthält, wird mit dem Namen dieses Dokuments und der Extension .xmo abgespeichert. Die Design Notes zu index.html werden also als index.html.mno gespeichert.
143
Websites planen und verwalten
Nachfolgend ein Beispiel für eine solche Notes-Datei in XML:
Wie Sie sehen, sind alle Informationen einsehbar und frei zugänglich. Die meisten Konfigurationsdateien von UltraDev sind in XML geschrieben, sodass sie relativ leicht angepasst werden können.
3.6
Zusammenfassung
Allmählich nehmen die Dinge Gestalt an. Mit Abschluss der heutigen Lektion sollten Sie mit den Werkzeugen zur Erstellung und Bearbeitung von HTML-Code vertraut sein sowie eine Verbindung zum Webserver herstellen können. Damit Websites auf unterschiedlichen Plattformen lauffähig sind, sollten Sie vor der Erstellung den nötigen Planungsaufwand nicht scheuen. Ohne eine verbindliche Dateinamenskonvention können bei der Umsetzung Problem auftreten. UltraDev bietet sehr leistungsfähige Tools zur Site-Erstellung, mit denen Sie in kürzester Zeit die Grundstruktur einer Website anlegen können. UltraDev unterstützt mehrere Zugriffsmethoden auf Webserver. Sobald eine Verbindung aufgebaut ist, können Sie Dateien, die zwischen dem lokalen Rechner und dem Server ausgetauscht werden, auschecken und für die Bearbeitung seitens Dritter sperren. HTMLDokumente können mit Design Notes versehen werden, um andere Bearbeiter über den aktuellen Bearbeitungsstand zu informieren.
3.7 F
Wenn ich auf Dateien auf dem Server verlinke, deren Namen die Zeichen »:« und »\« enthalten, gibt es Probleme. Warum? A
144
Fragen und Antworten
Diese Zeichen werden von Mac OS und Windows als Trennzeichen in Pfadangaben verwendet. Wenn Sie andere als alphanumerische Zeichen verwenden, informieren Sie sich bei Ihrem Systemverwalter, welche Sonderzeichen Sie auf Ihrer Serverplattform verwenden dürfen.
Workshop
F
Ich bin bis jetzt beim Entwurf und der Umsetzung von Websites immer ohne Sitemaps ausgekommen. Warum soll ich nun plötzlich welche verwenden? A
F
Was ist die günstigste Einstellung für den Server-Zugriff? A
F
Kleinere Websites lassen sich relativ problemlos ohne Map realisieren. Bei größeren Websites mit mehreren Hundert Seiten, die auf viele verschiedene Äste verteilt sind, verlieren Sie ohne sauber ausgearbeitete Struktur schnell den Überblick. Große Websites so anzugehen wie eine kleine Site ist ein Fehler, der sich bitter rächen kann.
Ich persönlich ziehe den Zugriff über Lokal/Netzwerk vor. Wenn ich Dateien direkt auf dem Server bearbeiten will, stelle ich die Option Server-Zugriff auf Keine. Wenn Sie nicht in einem Netzwerk arbeiten, verwenden Sie den Zugriff per FTP.
Was passiert, wenn ich eine Datei auschecke und nicht wieder einchecke? A
3.8
Dann sorgen Sie für böses Blut bei Ihren Kollegen. Diese könnten zwar die Ein-/ Auscheck-Funktion deaktivieren, damit wäre aber ihr eigentlicher Sinn ad absurdum geführt.
Workshop
Der Workshop dient dazu, den gelesenen Stoff mithilfe von gezielten Fragen und Übungen zu vertiefen. Die Antworten finden Sie in Anhang A, »Quiz-Antworten«.
Quiz 1. Welche Zeichen sollten Sie in Dateinamen verwenden? 2. Wie finden Sie am schnellsten alle HTML-Dokumente, denen Sie kein <TITLE>-Tag zugewiesen haben? 3. Welche zusätzlichen Einstellungen müssen Sie am FTP-Client von UltraDev vornehmen, wenn Sie von einem Subnetz, das IP-Masquerading verwendet, auf einen Webserver zugreifen? 4. Wie können Sie sich eine Liste sämtlicher externen Links Ihrer Website anzeigen lassen? 5. Welche Funktion müssen Sie aktivieren, um eine Datei während der Bearbeitung für die Benutzung durch Dritte zu sperren?
145
Websites planen und verwalten
Übungen 1. Zeichnen Sie für ein fiktives Unternehmen eine Sitemap mit allen erforderlichen Bereichen – News, Links, Kontaktinformationen, Produktpalette usw. 2. Bauen Sie diese Sitemap in UltraDev mit Platzhalterseiten nach und verlinken Sie diese Seiten untereinander. 3. Laden Sie die so erstellte Grundstruktur der Site auf den Webserver. Aktivieren Sie die Ein-/Auscheck-Funktion und fügen Sie Inhalt auf den Seiten ein.
146
Websites in Bewegung – clientseitige Verhaltensweisen
4
Websites in Bewegung – clientseitige Verhaltensweisen
Der Stoff der vorausgegangen Tage hat sich ausschließlich mit der Erstellung statischer Websites beschäftigt. Statisch bedeutet, dass Inhalt und Erscheinungsbild eines HTMLDokumentes durch anwenderseitige Aktionen weder beeinflusst noch verändert werden können. Zwar haben wir schon über die vorprogrammierten JavaScript-Objekte von UltraDev gesprochen, mit denen Sie HTML-Objekten dynamische Funktionalität verleihen können, doch haben wir sie bis jetzt noch nicht eingesetzt. Doch ab heute wird das anders, denn mit den DHTML-Objekten kommt Leben in die Website. Der Stoff des heutigen Tages im Überblick: 쐽
DHTML: Grundlagen, Für und Wider
쐽
Die Verhaltenspalette und wie Sie damit dynamische Objekte erzeugen sowie die vorprogrammierten JavaScript-Objekte an Ihre Zwecke anpassen können
쐽
Wie Sie mit Ebenen und DHTML einzigartige Webanwendungen erstellen
쐽
Wie Sie mit der Zeitleiste von UltraDev Animationen und andere zeitgesteuerte Effekte erstellen
쐽
Sonstige clientseitige dynamische Effekte
4.1
DHTML – Was hat man darunter zu verstehen und was nicht?
Der Begriff DHTML, die Abkürzung für dynamisches HTML, ist nicht ganz glücklich gewählt, denn er legt die Schlussfolgerung nahe, dass die bisher statische Auszeichnungssprache HTML nun um die Fähigkeit erweitert wurde, Objekte mit dynamischem Verhalten zu versehen. Liest man zum ersten Mal von DHTML, denkt man sich vielleicht: »Muss ich jetzt etwa schon wieder eine neue Programmiersprache lernen?« Tatsächlich ist DHTML nichts anderes als eine Mischung aus HTML, Stylesheets und JavaScript. Wenn Ihre Website für ein möglichst breites Publikum und die unterschiedlichsten Plattformen zugänglich sein soll, dann verbietet sich unter Umständen der Einsatz von DHTML. Wenn Sie Ihre Website mit DHTML-Effekten ausstatten, muss der Browser des Anwenders bestimmte Voraussetzungen erfüllen (Browser der neueren Generation, Installation bestimmter Plug-Ins usw.). Bei Einsatz solcher Effekte laufen Sie also Gefahr, ein bestimmtes Publikum auszuschließen.
148
DHTML – Was hat man darunter zu verstehen und was nicht?
Stylesheets Stylesheets, die wir in der morgigen Lektion ausführlich besprechen werden, ermöglichen die exakte Positionierung von Elementen auf der Seite sowie präzise Größenangaben. Auch die Verwendung von Ebenen ist weitgehend von der Verwendung von Stylesheets abhängig. Wenn Sie in ein HTML-Dokument Ebenen einsetzen und deren Eigenschaften definieren, haben Sie im Grunde ein Stylesheet für diese Ebene geschrieben. Im Fall von Ebenen werden die nötigen Stylesheets sozusagen stillschweigend im Hintergrund erzeugt, bei anderen Objekten müssen Sie jedoch die Ärmel aufkrempeln und selbst Hand anlegen. Da Stylesheets die pixelgenaue Positionierung von Elementen ermöglichen, spielen sie eine zentrale Rolle bei der Erzeugung von dynamischen Effekten und Animationen. Ohne Stylesheets könnte z.B. JavaScript nicht auf die Attribute eines Objekts zugreifen und sie dynamisch verändern.
JavaScript JavaScript ist eine Programmiersprache, die clientseitig im Browser arbeitet und sämtliche Objekte eines HTML-Dokuments ansprechen und verändern kann. JavaScript hat dabei aber nur auf die Eigenschaften eines Objektes Zugriff, die über HTML-Tags oder Stylesheets definiert sind. Sie können z.B. also nicht Helligkeit oder Kontrast einer Abbildung mit JavaScript verändern. Wenn Sie daher die Eigenschaften eines Objekts nicht per HTML oder Stylesheets ansprechen können, werden Sie auch mit JavaScript nicht weit kommen. Das heißt natürlich nicht, dass JavaScript nutzlos ist. Die Fähigkeit, die Eigenschaften eines Objekts dynamisch ändern zu können, bedeutet, dass Objekte clientseitig, d.h. auf dem Rechner des Anwenders, manipuliert werden können. Mit ein paar Zeilen Code können Sie so Bilder und Text austauschen oder in der Größe verändern. Da die nötigen Operationen vom Rechner des Anwenders ausgeführt werden, muss der Server nur die Seite im Ausgangszustand sowie die nötigen Grafiken übertragen und wird somit entlastet.
Das DHTML-Problem Wenn Sie nun sagen, dass DHTML eine tolle Erfindung ist, stimme ich Ihnen da durchaus zu. Theoretisch handelt es sich bei DHTML um eine wunderbare Möglichkeit, dem Anwender maßgeschneidert Feed-back zu geben, ohne serverseitige Scripts einsetzen oder schreiben zu müssen. Leider ist DHTML in der Praxis nicht so pflegeleicht, wie man sich das wünschen würde.
149
Websites in Bewegung – clientseitige Verhaltensweisen
In der Einleitung zu diesem Buch habe ich das Thema Webbrowser und die Problematik der unterschiedlichen Umsetzung von HTML-Standards angesprochen. Die Browserhersteller haben sich in diesem Punkt mittlerweile weitgehend geeinigt und es hat sich ein verbindlicher HTML-Standard etabliert. Bei der Implementierung von JavaScript in den Browsern bleibt in puncto Standards jedoch noch ein gutes Stück Arbeit zu leisten. Wenn Sie schon einmal ein JavaScript-Programm geschrieben haben, um es in eine Webseite einzubauen, haben Sie vermutlich auch einige Mühe darauf verwendet, dass Ihr fertiges Programm sowohl im Netscape Navigator als auch im Internet Explorer einwandfrei funktioniert. Und nach getaner Arbeit haben Sie sich stolz zurückgelehnt, mit sich und der Welt zufrieden, und an Freunde, Kollegen und Vorgesetzte schnell eine E-Mail geschickt mit der Bitte, doch mal einen Blick auf die tolle JavaScript-gepowerte Seite zu werfen. Aber welchen Browser Sie auch verwenden, um Ihre JavaScript-Seite zu testen, der Betrachter Ihrer Seite wird immer genau den anderen Browser verwenden und prompt funktioniert auch die Seite nicht wie erhofft. Hier holt nicht nur das Schicksal mit harter Hand zu einem grausamen Schlag gegen uns aus, sondern der Hoffnung auf erfolgreiche Präsentation von DHTML-Seiten über alle Browser- und Plattformgrenzen hinweg ist hiermit ein jähes Ende bereitet. Jeder Browser spricht sozusagen seinen eigenen JavaScript-Dialekt. Die Hauptschwierigkeit liegt in der Verwendung von unterschiedlichen Document Object Models (DOM) bei der Implementierung von JavaScript in den verschiedenen Browsern. Über das DOM wird geregelt, wie Objekte per JavaScript angesprochen und verändert werden. Zwischen dem DOM des Internet Explorers und demjenigen von Netscape klafft eine gewaltige Lücke. Um JavaScript-Code problemlos von einer Plattform auf die andere portieren zu können, ist Einiges an Vorausschau und Planung nötig. In vielen Fällen bedeutet das praktisch, dass Sie den Code für jeden Browser extra anpassen müssen. Die Verwendung der DHTML-Funktionen von UltraDev enthebt uns dieser Notwendigkeit, denn das Programm erzeugt Code, der von beiden Plattformen fehlerfrei verstanden wird. Wenn Sie HTML-Objekten auf einer Seite dynamische Verhaltensweisen zuweisen, können Sie darüber hinaus spezifizieren, welche Browsergeneration unterstützt werden soll. Je nach Zielpublikum, das Sie anvisieren, haben Sie verschiedene Optionen zur Auswahl. Sollten Sie es drauf anlegen und Ihre Seiten ausschließlich für den IE 5.0 optimieren, steht Ihnen eine lange Liste von dynamischen Effekten zur Auswahl.
Soll ich nun DHTML verwenden oder nicht? Wenn Sie DHTML-Effekte einsetzen, haben Sie zwar sicher die Bewunderer auf Ihrer Seite, doch Sie laufen Gefahr, dass Sie den Kreis Ihrer Adressaten unter Umständen erheblich einschränken. Wenn der Anwender nicht mindestens einen 4.0-Browser benutzt und JavaScript aktiviert hat, kann er sich DHTML-Websites schlichtweg nicht ansehen. Meiner
150
Clientseitige Verhaltensweisen
Meinung nach wird der Einsatz von DHTML auf manchen Sites übertrieben, sodass sie oft schlecht navigierbar sind und auch dem Auge viel zumuten. Ich finde, der Einsatz von DHTML sollte die Botschaft, die Information einer Seite unterstützen und nicht zum Selbstzweck werden. Wenn Sie den Anwender durch die Anwendung von DHTML-Effekten nicht optisch erschlagen, spricht nichts gegen deren Einsatz. Effekte aber nur um ihrer selbst willen zu verwenden, einfach nur, weil sie machbar sind, ist in meinen Augen keine gute Gestaltungsphilosophie. Es gibt viele Möglichkeiten, auf einer Webseite Animationen einzubauen – GIFs, Flash, Shockwave, Java, QuickTime usw. Diese verschiedenen Typen von Animationen werden in das HTML-Dokument eingebettet und benötigen ein Browser-Plug-In (außer GIFs), um angezeigt werden zu können. Anders bei DHTML-basierten Animationen: Sie sind Teil des HTML-Codes und brauchen zu ihrer Anzeige nur den Browser selbst. Nun können aber mit DHTML nicht alle Effekte erzeugt werden, die mit anderen Animationstechniken möglich sind. Heute werden viele Browser zusammen mit dem Flash-Plug-In installiert, sodass sich für die Erstellung komplexerer Animationen die Verwendung von Flash empfiehlt.
4.2
Clientseitige Verhaltensweisen
Heute lernen wir ein neues Werkzeug kennen: die Verhaltenspalette. Wenn im Folgenden von Verhaltensweisen gesprochen wird, sind damit immer clientseitige Verhaltensweisen gemeint. Mit dieser Palette weisen sie Objekten eine Verhaltensweise zu – das heißt, Sie legen fest, wie ein Objekt auf bestimmte Ereignisse von Seiten des Anwenders, z.B. einen Mausklick, reagieren soll. Die Funktionsweise dieses Werkzeugs wird am besten anhand eines praktischen Beispiels deutlich. Dazu brauchen wir auf unserer Seite zunächst ein JavaScript-Element. Das bekommen wir, wenn wir einen einfachen Rollover-Button auf unsere Seite setzen. Im nächsten Schritt öffnen Sie mit FENSTER > VERHALTEN die Verhaltenspalette.
Die Verhaltenspalette Der Inspector sollte zwei JavaScript-Aktionen anzeigen: onMouseOver und onMouseOut. Wenn alles glatt gegangen ist, sehen Sie auf Ihrem Monitor das in Abb. 4.1 gezeigte Fenster. Die Verhaltenspalette zeigt eine Liste der aktuell einem Objekt zugewiesenen Ereignisse und der damit verbundenen Aktionen. Im Fall unseres Rollover-Bildes handelt es sich um
151
Websites in Bewegung – clientseitige Verhaltensweisen
ein onMouseOver-Ereignis, das die Aktion BILD AUSTAUSCHEN auslöst. Umgekehrt wird durch das onMouseOut-Ereignis die Aktion BILDAUSTAUSCH WIEDERHERSTELLEN ausgeführt. Das Zusammenspiel dieser beiden Ereignisse bewirkt, dass ein Bild ausgetauscht wird, wenn wir den Mauszeiger darauf setzen, und der ursprüngliche Zustand wiederhergestellt wird, wenn sich die Maus außerhalb der Bildfläche befindet.
Abbildung 4.1: Verhaltensweisen sind JavaScript-basierte Aktionen.
Verhaltensweisen erstellen In der Verhaltenspalette gibt es ein Popup-Menü EREIGNISSE ZEIGEN FÜR. Wenn Sie es anklicken, wird eine Liste der verschiedenen Browser angezeigt, aus der Sie die gewünschte Zielplattform auswählen. Diese Einstellung sollten Sie vornehmen, bevor Sie ein Ereignis zuweisen, denn je nach gewähltem Browser ist die Liste der angebotenen Ereignisse kürzer oder länger bzw. nur für diese Plattform erhältlich. Die Auswahlliste selbst bedarf wohl keiner Erklärung, ich möchte Ihnen aber empfehlen, die Einstellung BROWSER AB 3.0 zu verwenden, um größtmögliche Kompatibilität zwischen den Plattformen zu erzielen. Die Einstellung BROWSER AB 4.0 bietet sich an, wenn es um größtmögliche Kompatibilität und Zukunftssicherheit geht. In den folgenden Beispielen arbeiten wir immer mit der Einstellung BROWSER AB 4.0.
Eine Aktion zuweisen Eine Aktion zuzuweisen ist recht einfach – Sie müssen lediglich das betreffende Objekt auswählen und dann zur Verhaltenspalette gehen. Klicken Sie dort auf das Plussymbol (+) und wählen Sie aus dem geöffneten Popup-Menü (siehe Abb. 4.2) die gewünschte Aktion aus. Bei manchen Aktionen ist es offensichtlich, was sie tun, andere bedürfen der Erklärung. In Tabelle 4.1 finden Sie eine Liste sämtlicher Aktionen samt Beschreibung.
152
Clientseitige Verhaltensweisen
Abbildung 4.2: Aktionen warten auf ihren Einsatz. JavaScript-Funktion
Beschreibung
AUDIO ABSPIELEN
Spielt Sounddateien auf dem System des Anwenders ab.
BILD AUSTAUSCHEN
Ersetzt ein Bild durch ein anderes. Wird benutzt, um Rollover-Effekte von Hand zu erstellen.
BILDAUSTAUSCH WIEDERHER- Setzt für das vertauschte Bild wieder die ursprüngliche Grafik ein. STELLEN
BILDER VORAUSLADEN
Lädt Bilder in den Cache, sodass sie im Bedarfsfall ohne weitere Ladezeit ausgetauscht werden können. UltraDev lädt Bilder für Rollover per Default im Voraus.
BROWSER ÜBERPRÜFEN
Leitet den Browser je nach Typ (NN oder IE) bzw. Version zu entsprechend optimierten Seiten.
BROWSER-FENSTER ÖFFNEN
Öffnet URL in neuem Browser-Fenster.
EBENE ZIEHEN
Ermöglicht dem Anwender, eine Ebene im Browser-Fenster frei zu verschieben.
EBENEN EIN-/AUSBLENDEN
Blendet Ebenen ein oder aus bzw. stellt die Standardsichtbarkeit wieder her.
EIGENSCHAFT ÄNDERN
Ändert Eigenschaften eines Objekts. Nützlich zur Anpassung von Ebeneneigenschaften usw.
FORMULAR ÜBERPRÜFEN
Überprüft, ob Formularfelder, die Daten enthalten müssen, vom Anwender auch ausgefüllt worden sind, bevor es zum Server zur Bearbeitung übertragen wird.
Tabelle 4.1: JavaScript-Funktionen und ihr Verwendungszweck
153
Websites in Bewegung – clientseitige Verhaltensweisen
JavaScript-Funktion
Beschreibung
GEHE ZU URL
Leitet den Browser zu neuer URL um.
JAVASCRIPT AUFRUFEN
Ruft eine selbst geschriebene JavaScript-Funktion auf.
NAVIGATIONSLEISTENBILD
Tauscht Bilder in der aktuellen Navigationsleiste aus.
FESTLEGEN
PLUG-IN ÜBERPRÜFEN
Prüft, ob das entsprechende Plug-In installiert ist und leitet den Anwender zur richtigen URL.
POPUP-MELDUNG
Blendet ein Fenster mit einer frei definierten Warnmeldung ein.
SHOCKWAVE ODER FLASHFILM STEUERN
Steuert die Wiedergabe von Shockwave oder Flash-Filmen.
SPRUNGMENÜ
Ändert die Attribute eines Sprungmenüs.
SPRUNGMENÜ GEHE ZU
Fügt dem Sprungmenü eine GEHE ZU-Schaltfläche hinzu. Das entsprechende JavaScript-Element finden Sie in der Unterpalette FORMULARE der Werkzeugpalette.
TEXT DEFINIEREN: EBENE-
Ersetzt Inhalt und Formatierung einer vorhandenen Ebene.
TEXT FESTLEGEN
TEXT DEFINIEREN: STATUS-
Definiert Text zur Anzeige in der Statusleiste des Browsers.
LEISTENTEXT FESTLEGEN
TEXT DEFINIEREN: TEXT VON TEXTFELD EINSTELLEN
Ersetzt den Inhalt eines Textfeldes in einem Formular.
TEXT DEFINIEREN: TEXT VON FRAME EINSTELLEN
Stellt Text eines Frames dynamisch ein.
ZEITLEISTE: GEHE ZU ZEIT-
Bewegt den Wiedergabekopf zu einem beistimmten Bild in der Zeitleiste.
LEISTENBILD
ZEITLEISTE: ZEITLEISTE ABSPIELEN BZW. ZEITLEISTE ANHALTEN
Definiert, welche Aktion zu einem bestimmten Zeitpunkt ausgeführt werden soll. Über diese Funktion können Sie gezielt Punkte in der Zeitleiste anspringen und den zeitlichen Ablauf von Ereignissen steuern.
Tabelle 4.1: JavaScript-Funktionen und ihr Verwendungszweck (Forts.)
Die meisten dieser Aktionen erfordern, dass das Objekt, auf das sie zugreifen, durch einen eindeutigen Namen identifizierbar ist, d.h., das Attribut name muss gesetzt sein. Falls Sie bisher Objekten keinen Namen zugewiesen haben, müssen Sie das nachholen, wenn Sie mit Verhaltensweisen arbeiten wollen. Wählen Sie hierzu das Objekt aus, und öffnen Sie den Eigenschafteninspektor. In der linken oberen Ecke der Palette befindet sich ein Eingabefeld, in das Sie den Namen des Objektes einsetzen.
154
Clientseitige Verhaltensweisen
Als JavaScript-Programmierer werden Sie vielleicht das Menü mit den Aktionen durchsehen und einwenden, dass es sich hier um keine eigentlichen JavaScript-Funktionen handelt. Der Einwand ist nicht unberechtigt. Bei der Verhaltensweisen-Bibliothek handelt sich um eine Sammlung fertig programmierter Verhaltensweisen, deren Ziel es ist, in allen Browsern und auf verschiedenen Plattformen zu funktionieren. Über die letzte Option im Popup-Menü WEITERE VERHALTEN werden Sie mit der Website von Macromedia verbunden, von wo Sie zusätzliche Verhaltensweisen herunterladen können. Die Einbindung neuer Verhaltensweisen sowie die Erweiterung von UltraDev ist Stoff unserer morgigen Lektion.
Ereignisse zuweisen Nachdem Sie in der Verhaltenspalette einem Objekt eine Aktion zugewiesen haben, müssen Sie noch definieren, durch welches Ereignis, d.h. durch welche Maus- bzw. Tastatureingaben des Anwenders, diese Aktion ausgelöst wird. Im Falle des Rollover-Bildes waren die auslösenden Ereignisse onMouseOver bzw. onMouseOut. Bestimmte Ereignisse sind nur in Verbindung mit bestimmten Objekten möglich, und je nach den Einstellungen, die Sie im Eingabefeld EREIGNISSE ZEIGEN FÜR der Verhaltenspalette getroffen haben, sind Sie entweder auf ein paar wenige Ereignisse beschränkt oder haben die ganze Batterie von IEspezifischen Ereignissen zu Ihrer Verfügung. Das auslösende Ereignis definieren Sie, indem Sie zunächst die betreffende Verhaltensweise auswählen und dann im Feld EREIGNISSE auf den kleinen, nach unten gerichteten Pfeil klicken, der rechts neben dem ausgewählten Ereignis angezeigt wird. Es öffnet sich das in Abb. 4.3 gezeigte Popup-Menü mit den möglichen Ereignissen. Vielleicht haben Sie schon bemerkt, dass in manchen Fällen das Ereignis zwischen Klammern steht. Das bedeutet, dass dieses Ereignis in Verbindung mit dem ausgewählten Objekt nicht funktioniert, sondern nur in Verbindung mit einem zweiten Objekt, das das gewünschte Ereignis unterstützt. Das
-Objekt z.B. unterstützt eigentlich kein onMouseOver-Ereignis, es unterstützt nebenbei bemerkt fast überhaupt keine Ereignisse. Damit Grafiken überhaupt für Aktionen des Mauszeigers sensibel werden, legt UltraDev ein Anchor-Tag um das Bild (
). Über diesen Umweg unterstützt die Grafik die gewünschte Funktion, und wir müssen uns nicht den Kopf zermartern, um uns wieder daran zu erinnern, welches Objekt welche Ereignisse unterstützt. Mehr darüber, welcher Browser welche Ereignisse unterstützt, erfahren Sie auf den Websites der Hersteller. Microsoft: http://msdn.microsoft.com/scripting/jscript/default.htm Netscape: http://developer.netscape.com/docs/manuals/index.html?content= javascript.html
155
Websites in Bewegung – clientseitige Verhaltensweisen
Abbildung 4.3: Aktionen ein auslösendes Ereignis zuweisen
Es folgt eine Übersicht der wichtigsten Ereignisse für 4.0-Browser und höher: 쐽
onMouseUp – Die gedrückte Maustaste wird über dem Objekt losgelassen.
쐽
onMouseOver – Der Mauszeiger befindet sich über dem Objekt.
쐽
onMouseDown – Die Maustaste wird gedrückt, während sich der Mauszeiger über dem Objekt befindet.
쐽
onMouseOut – Der Mauszeiger wird vom betreffenden Objekt weg bewegt.
쐽
onClick – Der Anwender klickt auf das betreffende Objekt.
쐽
onDblClick – Der Anwender führt einen Doppelklick auf das betreffende Objekt aus.
쐽
onKeyDown – Der Anwender drückt eine beliebige Taste.
쐽
onKeyPress – Der Anwender drückt eine beliebige Taste und lässt sie wieder los.
쐽
onKeyUp – Der Anwender lässt eine Taste los, die er zuvor gedrückt hat.
쐽
onBlur – Das betreffende Objekt hat seinen Focus verloren, d.h., es ist nicht mehr
Gegenstand der Benutzeraktion. 쐽
156
onChange – Der Inhalt eines Objekts wurde geändert. Dies kann beispielsweise der Fall sein, wenn der Anwender ein Menüelement auswählt oder den Wert eines Textfeldes ändert und dann auf eine andere Stelle der Seite klickt.
Clientseitige Verhaltensweisen
쐽
onFocus – Ein Objekt erhält den Fokus der Benutzerinteraktion. Beispielsweise wird das Ereignis onFocus generiert, wenn ein Anwender in einem Formular in ein Textfeld klickt.
Da die meisten JavaScript-Aktionen von Maus-Ereignissen ausgelöst werden, steht gewöhnlich auch deren Verwendung im Mittelpunkt des Interesses.
Verhaltensweisen bearbeiten Wenn Sie Objekten Aktionen zuweisen, die von bestimmten Ereignissen ausgelöst werden, können Sie die Auf- bzw. Ab-Pfeile in der Verhaltenspalette dazu verwenden, die Reihenfolge der Aktionen neu zu ordnen. Die Ereignisse werden von oben nach unten abgearbeitet. Sie können über das Popup-Menü jederzeit neue Ereignisse als Auslöser für Aktionen zuweisen. Wenn Sie auf eine Aktion doppelklicken, öffnet sich ein Dialogfenster, über das Sie die Aktion selbst editieren können. Um eine Verhaltensweise zu löschen, müssen Sie nichts weiter tun als auf das Minussymbol (-) der Palette zu klicken.
Per Verhaltensweise Text in der Statuszeile ausgeben Für unsere erste clientseitige Verhaltensweise nehmen wir eine einfache Aktion – wir weisen einem Rollover-Bild eine Verhaltensweise zu, die in der Statuszeile einen erklärenden Text zu diesem Bild bzw. Link ausgibt. Das ist eine ganz praktikable Methode, dem Anwender Feed-back zu geben, ohne dass man gleich Änderungen am HTML-Dokument vornehmen oder ein neues Browserfenster öffnen muss. Hoffentlich haben Sie die Datei gespeichert, in die wir einen Rollover-Bild eingesetzt haben. Wenn ja, dann öffnen Sie sie bitte jetzt, wenn nicht, müssen Sie einen neuen Rollover-Effekt erzeugen. Nun brauchen wir die Verhaltenspalette. Wie bereits gesagt, sind für Rollover-Effekte zwei Verhaltensweisen vordefiniert, die auf onMouseOver- bzw. onMouseOut-Ereignissen basieren. Um Text in der Statuszeile auszugeben, brauchen wir eine dritte Verhaltensweise.
Aktion STATUSLEISTENTEXT FESTLEGEN Klicken Sie in der Verhaltenspalette auf das Plussymbol (+), und wählen Sie aus dem Popup-Menü die Aktion TEXT DEFINIEREN > STATUSLEISTENTEXT FESTLEGEN. Es öffnet sich das in Abb. 4.4 gezeigte Dialogfenster, in das Sie den Text eingeben, der in der Statusleiste angezeigt werden soll.
157
Websites in Bewegung – clientseitige Verhaltensweisen
Abbildung 4.4: Textmeldungen in der Statuszeile ausgeben lassen
Wenn Sie vielleicht schon ein bisschen mit den Verhaltensweisen experimentiert haben, wissen Sie bereits, dass zu den meisten Aktionen Dialogfenster angezeigt werden, um den Ablauf der Aktion zu konfigurieren. Die Einstellungen des Fensters STATUSLEISTENTEXT FESTLEGEN gehören zu den einfachsten, die man vornehmen muss.
Ereignis onMouseOver hinzufügen Wenn Sie einem Objekt eine Aktion zuweisen, wird als auslösendes Ereignis standardmäßig onMouseOver gesetzt. Falls das sowieso Ihre Absicht war, brauchen Sie an der Einstellung nichts mehr zu verändern. Wenn Sie nun mit der Maus über die Grafik fahren, wird die Aktion STATUSLEISTENTEXT FESTLEGEN ausgeführt, und der Text, den Sie in der entsprechenden Dialogbox eingetippt haben, wird in der Statuszeile des Browsers ausgegeben. Sie könnten natürlich als auslösendes Ereignis auch onClick oder eines der anderen vordefinierten Ereignisse setzen. Wenn Sie alle Verhaltensweisen wie vorstehend definiert haben, müsste Ihre Verhaltenspalette so aussehen wie in Abb. 4.5 gezeigt.
Abbildung 4.5: Dem Rollover-Bild sind nun drei Aktionen zugewiesen worden.
Es macht nichts, dass zwei onMouseOver-Ereignisse gesetzt wurden. Die Reihenfolge der Verhaltensweisen in der Liste bezeichnet die Reihenfolge, in der sie abgearbeitet werden (von oben nach unten). In der in Abb. 4.5 gezeigten Konfiguration werden zuerst die Bilder ausgetauscht und dann der Text der Statuszeile ausgegeben. Das Ganze jedoch geschieht so schnell, dass wir keine Verzögerung bemerken, und die Reihenfolge spielt eigentlich keine Rolle. Wenn Sie aber möchten, dass zuerst der Text der Statuszeile angezeigt wird, markieren Sie dieses Verhalten und verschieben es mit dem Nach-oben-Button an die erste Stelle.
158
Clientseitige Verhaltensweisen
Sie können die Reihenfolge der Ausführung nur bei bestimmten Ereignissen abändern. Sie können z.B. ein onMouseOver-Ereignis im Stapel nicht über ein onMouseOut-Ereignis legen, da es voneinander unabhängige Ereignisse sind. Die Reihenfolge von zwei onMouseOver-Ereignissen können Sie jedoch vertauschen. Zum Abschluss unserer Bemühungen sollten wir unser Werk im Browser begutachten. Wenn alles gut gegangen ist, wird die Rollover-Grafik angezeigt, wenn Sie den Mauszeiger auf den Button setzen, und die eingestellte Nachricht wird in der Statuszeile angezeigt. So einfach geht das. Als Nächstes wollen wir eine ähnliche Funktionalität mit einer völlig anderen Verhaltensweise erreichen. Es empfiehlt sich, Verhaltensweisen eines Objekts in verschiedenen Browsern zu testen. Sie werden feststellen, dass die Resultate unterschiedlich ausfallen. Das liegt an den unterschiedlichen JavaScript-»Dialekten«. Bevor wir uns jedoch zu neuen Ufern wagen, möchten Sie vielleicht noch wissen, wie UltraDev diese und jene Kunststücke vollbringt. Lassen Sie uns daher einen Blick auf den JavaScript-Code werfen, den das Programm erzeugt hat, um den Objekten diese Verhaltensweisen zuzuweisen: <script language="JavaScript"> 0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i
159
Websites in Bewegung – clientseitige Verhaltensweisen
Die obigen vier Funktionen werden in jedes HTML-Dokument eingefügt, das RolloverBilder verwendet. Die generische Routine MM_findObj ist für jeden JavaScript-Programmierer höchst nützlich. Sie ermöglicht unabhängig von der verwendeten Browserplattform auf Objekte über deren Namen zuzugreifen. Wenn Ihnen das böhmische Dörfer sind, müssen Sie sich deswegen keine grauen Haare wachsen lassen. Die übrigen drei Funktionen, MM_preloadImages, MM_swapImage und MM_swapImgRestore, dienen dazu, die benötigten Bilder auf die Seite zu laden, das aktuelle Bild gegen sein Rollover-Bild zu tauschen und den Ausgangszustand wiederherzustellen. Die folgende Funktion hat die Aufgabe, Text in der Statuszeile auszugeben: function MM_displayStatusMsg(msgStr) { //v1.0 status=msgStr; document.MM_returnValue = true; } //-->
Im -Bereich des HTML-Codes finden wir die auslösenden JavaScript-Ereignisse. Durch das onMouseOver-Ereignis werden der Austausch der Grafiken und die Anzeige in der Statuszeile veranlasst, während durch das onMouseOut-Ereignis wieder das Ausgangsbild geladen wird.
Mit jeder neuen Verhaltensweise wird dem Dokument auch neuer JavaScript-Code hinzugefügt. Auch wenn Sie selbst kein JavaScript-Programmierer sind, sollten Sie anhand der Namen der Funktionen erkennen, welche Routine zu welchem Verhalten gehört.
Benutzerhilfen einblenden Erklärenden Test in der Statuszeile einzublenden ist durchaus ein gangbarer Weg, um dem Benutzer Feed-back zu geben, doch von einem echten Blickfänger kann man in diesem Zusammenhang nicht gerade sprechen. Die Information sollte schon ein bisschen besser ins Auge fallen. Sie kennen sicher alle die Tooltipps, die aus keiner neuen Software mehr wegzudenken sind. Wäre es nicht toll, wenn Sie mit etwas JavaScript auf Ihrer Website eine ähnliche Funktionalität anbieten könnten? (Natürlich wäre das toll!)
160
Clientseitige Verhaltensweisen
Tooltipps einrichten Bevor Sie einen Tooltipp einrichten können, müssen Sie ein Objekt haben, zu dem dieser Tooltipp eingeblendet wird. Ich habe ein altgedientes Rollover-Bild aus meiner Sammlung genommen und es zweimal auf der Seite eingefügt. Welche Art von Objekt Sie verwenden ist egal, solange es onMouseOver-Ereignisse und onMouseOut-Ereignisse unterstützt. Die Tooltipps selbst werden in Ebenen abgelegt. Da ich zwei Buttons habe, zeichne ich auch zwei Ebenen – je eine pro Tooltipp. Geben Sie Ihren Ebenen eindeutige Namen, die die Zuordnung erleichtern. Wenn Sie auf Ihrer Seite Button1 und Button2 verwenden, dann nennen Sie die Ebenen ebene1 und ebene2. Schreiben Sie nun in diese Ebenen den Text, der beim Rollover angezeigt werden soll. Positionieren Sie die Ebenen an der Stelle, an der sie später eingeblendet werden sollen. Abb. 4.6 zeigt zwei Buttons und den zugehörigen Ebenen. Wenn Sie die Ebenen mit Text gefüllt und richtig positioniert haben, müssen für jede Ebene im Eigenschafteninspektor die Sichtbarkeit auf HIDDEN stellen. Somit ist sichergestellt, dass der Anwender die Ebenen nicht sieht, wenn er Ihre Seite zum ersten Mal lädt, und nur die Buttons angezeigt bekommt. Im nächsten Schritt werden wir den Ebenen das entsprechende Verhalten zuweisen, sodass sie bei einem Rollover wie Tooltipps zu den jeweiligen Buttons eingeblendet werden.
Abbildung 4.6: Positionieren Sie die Ebenen dort, wo sie später eingeblendet werden sollen.
161
Websites in Bewegung – clientseitige Verhaltensweisen
Verhaltensweise EBENEN EIN-/AUSBLENDEN zuweisen Für jeden Tooltipp, der ein- und wieder ausgeblendet werden soll, müssen Sie der Verhaltensweise des übergeordneten Buttons die Aktion EBENEN EIN-/AUSBLENDEN zuweisen. Wenn der Anwender mit der Maus den Button überfährt, sollte die entsprechende Ebene eingeblendet werden. Bewegt sich die Maus vom Button weg, sollte die Ebene wieder unsichtbar werden. Wählen Sie einen Button aus, um ihm ein Verhalten zuzuweisen und öffnen Sie die Verhaltenspalette. Klicken Sie auf das Plussymbol (+) und wählen Sie die Aktion EBENEN EIN/AUSBLENDEN aus. Es öffnet sich ein Fenster, das eine Liste aller Ebenen und die verfügbaren Optionen anzeigt (siehe Abb. 4.7). Abbildung 4.7: Wählen Sie die Ebene aus, die angezeigt oder verborgen werden soll, und klicken Sie auf die entsprechende Schaltfläche.
Markieren Sie die Ebene, die zu dem Button oder Objekt gehört, das Sie gerade bearbeiten, und klicken Sie auf die Schaltfläche AUSBLENDEN. Markieren Sie in der Verhaltenspalette das neu hinzugefügte Verhalten und ändern Sie das Ereignis auf onMouseOut. Damit stellen Sie sicher, dass die Ebene ausgeblendet wird, wenn der Anwender die Maus vom Button wegbewegt. Wiederholen Sie diesen Schritt und weisen Sie dem Button eine weitere Aktion EBENEN zu, nur dass Sie diesmal im Fenster EBENEN EIN-/AUSBLENDEN die Option »Einblenden« wählen. Die Verhaltenspalette sollte nun zwei Aktionen EBENEN EIN-/AUSBLENDEN (einmal EINBLENDEN, einmal AUSBLENDEN) enthalten, die die Ebene mit den Tooltipps des Buttons kontrollieren. Als auslösendes Ereignis für die Aktion EBENE EINBLENDEN setzen Sie onMouseOver. Dadurch wird die Ebene eingeblendet, wenn der Anwender die Maus auf den Button setzt. Wenn Sie sämtliche Verhaltensweisen zugewiesen haben, sollte die Palette so aussehen wie in Abb. 4.8 gezeigt. EIN-/AUSBLENDEN
Für den zweiten Button wiederholen Sie die gesamte Prozedur, nur dass Sie natürlich die zu diesem Button gehörige Ebene verwenden. Mit geringem Aufwand haben Sie jetzt Ihrer Webseite dynamische Informationen verpasst, die nur angezeigt werden, wenn sie benötigt werden.
162
Clientseitige Verhaltensweisen
Abbildung 4.8: Das Endergebnis: zwei Buttons, zwei Tooltipps – vier Verhaltensweisen.
Viele Webdesigner erzeugen Tooltipps über das onMouseOver-Ereignis, indem sie Abbildungen gegen Grafiken mit erklärendem Text austauschen lassen. Das ist zwar möglich, ist aber keine so effektive Methode wie die eben verwendete Verhaltensweise EBENEN EIN-/AUSBLENDEN. Als Grafik abgespeicherter Text braucht wesentlich länger um zu laden, außerdem können Sie diese Grafiken nicht so frei positionieren wie Ebenen. Auch in dem Fall, dass Ihre Tooltipps grafische Elemente enthalten, können Sie Ebenen verwenden, denn Ebenen können alle Arten von Objekten enthalten, auch Grafiken.
Popup-Fenster Ein weiteres sehr beliebtes Mittel, um dem Anwender zusätzliche Informationen zu geben, sind Popup-Fenster. Das sind eigene Fenster, die über dem Hauptfenster des Browsers geöffnet werden, wenn der Anwender auf den entsprechenden Link klickt. Diese Technik bietet sich vor allem dann an, wenn kurze Informationen eingeblendet werden sollen, die bestimmte Inhalte im Hauptfenster näher erläutern sollen. Sie können natürlich auch ohne den Einsatz von Verhaltensweisen einen Link in einem neuen Fenster öffnen lassen. Hierzu müssen Sie dem Link im Eigenschafteninspektor nur das entsprechende Ziel zuweisen. Diese Methode hat allerdings den Nachteil, dass ein neues Browserfenster mit all seinen Menüs und Werkzeugleisten geöffnet wird. Das sind nicht nur relative schwere Geschütze, um wenig zusätzliche Information einzublenden, sondern auch das Hauptfenster wird verdeckt, was den Anwender irritieren kann.
163
Websites in Bewegung – clientseitige Verhaltensweisen
Verhaltensweise BROWSERFENSTER ÖFFNEN Im Arsenal der Verhaltensweisen von UltraDev findet sich auch eine Aktion, die das Öffnen von neuen Browserfenstern mit oder ohne die üblichen grafischen Steuerelemente ermöglicht. Zur Realisierung dieses Beispiels verwende ich diesmal ein einfaches Bild. Ziel dieser Übung ist es, den Mausklick des Anwenders abzufangen und daraufhin ein neues Fenster zu öffnen. Im Beispiel mit den Tooltipps war der Text für die eingeblendete Information im gleichen HTML-Dokument gespeichert wie die aufrufende Verhaltensweise. Die Verhaltensweise BROWSERFENSTER ÖFFNEN zeigt jedoch auf die URL einer externen Datei, in der die entsprechenden Information liegen, und öffnet sie in einem neuen Fenster. Sie müssen also vorher ein neues Dokument anlegen. Ich habe zu diesem Zweck eine Datei namens help.html erzeugt. Sobald Sie diese Datei erstellt haben, markieren Sie das Objekt, dem Sie das Verhalten zuweisen wollen und öffnen die Verhaltenspalette. Wählen Sie im Popup-Menü die Aktion BROWSERFENSTER ÖFFNEN. Es öffnet sich das in Abb. 4.9 gezeigte Dialogfenster, in dem Sie weitere Einstellungen vornehmen.
Abbildung 4.9: Optionen für das neue Browserfenster festlegen
Durchsuchen Sie die Site nach der URL, die im neuen Fenster angezeigt werden soll, oder geben Sie sie direkt ein. Wenn Sie dem Fenster eine feste Höhe oder Breite zuweisen wollen, geben Sie die Werte in die entsprechenden Felder ein. Wenn das neue Fenster zusätzliche Informationen zur Hauptseite anzeigen soll, sollten Sie es nicht größer machen als die Hauptseite, sodass es der Anwender im Bedarfsfall verschieben kann, ohne das Hauptfenster zu verdecken. Mit den Kontrollfeldern setzen Sie die Attribute, mit denen das Popup-Fenster dargestellt werden soll. Stellen Sie keine festen Fenstergrößen ein, auch wenn Sie mit vorgegebenen Auflösungen arbeiten. Das letzte Wort darüber, wie er seinen Browser konfiguriert, hat immer der Anwender. Wenn Sie Ihr Layout noch so präzise angelegt haben, kann der Anwender mit seinen Einstellungen Ihre sämtlichen Vorgaben
164
Clientseitige Verhaltensweisen
überschreiben. Wenn Sie dem Anwender feste Auflösungen aufzwingen, wird es immer jemanden geben, dem Ihre Inhalte nicht zugänglich sind aus dem einfachen Grund, weil sie außerhalb des Anzeigebereichs liegen. Zu guter Letzt möchten Sie dem Kind vielleicht noch einen Namen geben. Wenn Sie das Fenster benennen, können Sie dieses Fenster als Ziel für andere Links angeben. Schließt der Anwender dieses Fenster jedoch, verliert der Browser dieses Ziel, und alle Links, die auf dieses Fenster zielen, werden in ganz normalen neuen Browserfenstern geöffnet. Damit haben wir alle nötigen Schritte durchgeführt. Bleibt uns nur noch, unser PopupFenster in Aktion zu bewundern. Rufen Sie die Browservorschau auf und klicken Sie auf das Objekt, dem Sie das Verhalten zugewiesen haben. Die Früchte meiner Arbeit sehen Sie in Abb. 4.10.
Abbildung 4.10: Hiermit stehen die berüchtigten Popup-Fenster auch zu Ihrer Verfügung.
Sie kennen sicher genügend Websites, die sofort ein Popup-Fenster öffnen, wenn man auf die Homepage geht. Manchmal ist das ganz nützlich, manchmal nervt es auch bloß. Wollen Sie auf Ihrer Website dieses Feature einbauen, müssen Sie die Aktion BROWSERFENSTER ÖFFNEN dem onLoad-Ereignis im Tag zuweisen. Auch wenn diese Funktion wie gesagt in manchem Fällen ganz nützlich ist, sollten Sie sie nicht in jeder Ihrer Seiten einbauen – Hunderte von kleinen Browserfenstern verderben schnell den Spaß am Surfen.
165
Websites in Bewegung – clientseitige Verhaltensweisen
Drag-and-Drop auf meiner Website? Ja, das geht. Allein mit den Bordmitteln von UltraDev ist es möglich, auf einer Website volle Drag-and-Drop-Funktionalität zu realisieren. Mit dem folgenden Beispiel schließen wir unsere Erkundung der Verhaltenspalette ab und lernen ein paar der interessanteren Aktionen von UltraDev kennen. Wie Sie gesehen haben, können Ebenen pixelgenau positioniert und ihre Attribute per JavaScript verändert werden. Es erhebt sich die Frage, ob man nicht Verhaltensweisen schreiben könnte, die eine Ebene im Fenster verschieben. Zwar lassen sich auf diesem Weg keine hochkomplexen Anwendungen realisieren, aber für einfachere Lernprogramme, die dem Anwender Rückmeldung geben, reicht es allemal. Im Folgenden bauen wir mit der Funktion EBENE ZIEHEN ein kleines Geschichtsquiz zusammen. Zu diesem Zweck habe ich die in Abb. 4.11 gezeigten Grafiken vorbereitet, denen wir dann das entsprechende Verhalten zuweisen.
Abbildung 4.11: Mithilfe dieser Grafiken erstellen wir eine einfache Quizanwendung.
Ziel der folgenden Übung ist es, eine Anwendung zu erstellen, bei der die drei gezeigten Grafiken an die richtige Stelle in der Tafel oben verschoben werden müssen. Um die Elemente auf der Seite zu positionieren, habe ich Ebenen verwendet. Elemente, die verschoben werden sollen, können sowieso nur in Ebenen abgelegt werden. Der statische Teil, die »Tafel«, wurde ebenfalls mit Ebenen erzeugt. Dies wäre zwar nicht nötig, aber mit Ebenen geht es einfacher. Wenn Sie meine Anwendung nachbauen, sollte das fertige Dokument so aussehen wie in Abb. 4.12 gezeigt.
Verhalten EBENE ZIEHEN zuweisen Die Grafiken sind platziert, nun müssen wir ihnen das Verhalten EBENE ZIEHEN zuweisen. Jede Ebene muss einzeln eingerichtet werden, aber wenn Sie einmal alle Schritte durchgespielt haben, dürfte es keine Schwierigkeiten mehr geben.
166
Clientseitige Verhaltensweisen
Abbildung 4.12: Das Dokument besteht aus vier Ebenen, die obere enthält das Ablageziel.
Sie können zwar bewegliche Ebenen im Dokument platzieren, doch wie alle Verhaltensweisen braucht auch diese ein auslösendes Ereignis. Wenn Sie möchten, dass die Ebenen verschiebbar sind, sobald die Seite geladen ist, setzen ein onLoad-Ereignis im -Tag. Bevor Sie ein Verhalten zuweisen, sollten Sie die Ebenen, die Sie bearbeiten, an die Endposition ziehen (sofern es eine gibt), die als Ablageziel dient. Das wird später ganz praktisch sein, weil Sie die Ebenen dann von hier aus an die Startposition ziehen können, wenn Sie die Ziehbewegung definieren. Setzen Sie nun das angesprochene onLoad-Ereignis im -Tag des Dokuments, um ihm das Verhalten EBENE ZIEHEN zuzuweisen. Es öffnet sich das in Abb. 4.13 gezeigte Dialogfenster.
Abbildung 4.13: Definieren Sie die Ziehbewegung und das Ablageziel der Ebene.
167
Websites in Bewegung – clientseitige Verhaltensweisen
Wählen Sie als Erstes im Popup-Menü die Ebene aus, die bewegt werden soll. Definieren Sie nun die Art der Bewegung, die die Ebene auf der Seite ausführen kann. Den Bewegungsmodus von Ebenen einstellen Wenn der Anwender Ebenen frei im Browserfenster verschieben können soll, lassen Sie die standardmäßige Voreinstellung im Eingabefeld BEWEGUNG auf UNBESCHRÄNKT. Wenn Sie jedoch möchten, dass der Anwender die Ebene nur innerhalb eines vorgegebenen Bereichs nach links, rechts, oben oder unten verschieben kann, wählen Sie die Option BESCHRÄNKT. In dieser Einstellung werden rechts neben dem Eingabefeld vier weitere Felder sichtbar. In diese Felder geben Sie ein, um wie viele Pixel die Ebene nach oben (O:), unten (U:), links (L:) und rechts (R:) ausgehend von ihrer Ursprungsposition verschoben werden kann. Das Eingabefeld akzeptiert nur positive Werte. Wenn ich nun z.B. möchte, dass der Anwender die Ebene nur nach oben oder unten verschieben kann, aber nicht nach links oder rechts, setze ich die Werte für L und R auf »0« und schränke damit die Bewegungsrichtung auf die Vertikale ein. Ablageziele von Ebenen festlegen Sie können Ebenen auch ein Ablageziel zuweisen. Weiter oben habe ich schon angedeutet, dass es sich empfiehlt, verschiebbare Ebenen an der Stelle zu positionieren, wo sie schließlich abgelegt werden sollen, bevor Sie ihnen ein Verhalten zuweisen. So können Sie nämlich über die Schaltfläche AKTUELLE POS. ABRUFEN die exakten Koordinaten für das Ablageziel abrufen. Als Letztes können Sie im Feld EINRASTEN, FALLS INNERHALB den Radius festlegen, innerhalb welchem die abgelegte Ebene am Ziel »einschnappt«, wenn die Ebene nicht exakt am Ablageziel platziert wird. Als guter Wert für die Einrastfunktion hat sich die halbe Breite des verschiebbaren Objekts erwiesen. Damit ist sichergestellt, dass das Objekt einschnappt, wenn es nur zur Hälfte auf dem Ablageziel liegt. Erweiterte Einstellungen Die erweiterten Einstellungen der Aktion EBENE ZIEHEN erhöhen das Maß an Interaktivität dieses Verhaltens. Standardmäßig gilt die gesamte Ebene als Anfasser, mit dem sie verschoben werden kann – der Anwender klickt das Objekt an irgendeiner Stelle an und verschiebt es über den Bildschirm. Für bestimmte Anwendungen ist es jedoch sinnvoller, Abbildungen mit einem als solchen erkennbaren Anfasser zu versehen. Wenn Sie z.B. eine Anwendung mit verschiebbaren Fenstern erstellen, könnten Sie am oberen Rand des Fensters eine Titelleiste anbringen, die als Anfasser dient. Zu diesem Zweck wählen Sie im Eingabefeld ZIEHGRIFF die Option BEREICH IN EBENE. In dieser Einstellung werden vier zusätzliche Eingabefelder angezeigt. Die Koordinaten des Anfassers sowie seine Größe
168
Clientseitige Verhaltensweisen
definieren Sie über den Abstand vom linken (L:) und oberen (T:) Rand der Ebene sowie über die Breite (B:) und Höhe (H:). Abb. 4.14 zeigt das Dialogfenster EBENE ZIEHEN im Register ERWEITERT.
Abbildung 4.14: Die erweiterten Einstellungen ermöglichen die Definition eines Anfassers sowie die Verknüpfung mit weiteren JavaScript-Funktionen.
Die Einstellungsoptionen neben BEIM ZIEHEN steuern, wie die Ebene beim Ziehen behandelt wird. In der Standardeinstellung wird die gezogene Ebene in den Vordergrund gebracht und an oberster Stelle über allen anderen Ebenen abgelegt. Mit der Option Z-INDEX WIEDERHERSTELLEN wird die Ebene wieder in ihre ursprüngliche Position im Stapel zurückgebracht. Wenn während der Ziehaktion zusätzlicher JavaScript-Code ausgeführt werden soll, dann geben Sie das im Feld JAVASCRIPT AUFRUFEN ein. Über das Eingabefeld WENN ABGELEGT: JAVASCRIPT AUFRUFEN steuern Sie, ob und welche JavaScripts ausgeführt werden sollen, sobald der Anwender das gezogene Objekt abgelegt hat. Aktivieren Sie zusätzlich das Kontrollfeld NUR WENN EINGERASTET, wird dieses JavaScript nur ausgeführt, wenn das Objekt am Ablageziel eingerastet ist. In diesem Beispiel lasse ich ein Alert-Fenster aufrufen. Mithilfe der Option NUR WENN EINGERASTET können Sie überprüfen, ob der Anwender das Objekt korrekt abgelegt hat, da das JavaScript nur ausgeführt wird, wenn das Objekt am Ablageziel eingerastet ist. Wenn Sie alle Einstellungen vorgenommen haben, müssen Sie nur noch auf OK klicken. Vergessen Sie aber nicht, die Ebene an ihren Ausgangspunkt zu verschieben. Wenn alles glatt gelaufen ist, sollten Sie jetzt die Früchte Ihrer Arbeit in der Browservorschau genießen können. Um den übrigen Ebenen dieselbe Funktionalität zuzuweisen, müssen Sie nur die entsprechenden Arbeitsschritte wiederholen und jeder Ebene einen eindeutigen Namen zuweisen sowie das jeweilige Ablageziel. Nicht um Sie zu erschrecken, sondern um Ihnen einen Eindruck davon zu vermitteln, wie viel Arbeit Ihnen UltraDev abgenommen hat, sei im Folgenden der komplette JavaScript-Code der Funktion MMdragLayer abgedruckt, der das Ziehen von Ebenen ermöglicht:
169
Websites in Bewegung – clientseitige Verhaltensweisen
function MM_dragLayer(objName,x,hL,hT,hW,hH,toFront,dropBack,cU,cD,cL, cR,targL,targT,tol,dropJS,et,dragJS) { //v3.0 //Copyright 1998 Macromedia, Inc. All rights reserved. var i,j,aLayer,retVal,curDrag=null, NS=(navigator.appName=='Netscape'), curLeft, curTop; if (!document.all && !document.layers) return false; retVal = true; if(!NS && event) event.returnValue = true; if (MM_dragLayer.arguments.length > 1) { curDrag = MM_findObj(objName); if (!curDrag) return false; if (!document.allLayers) { document.allLayers = new Array(); with (document) if (NS) { for (i=0; i
document.MM_maxZ) document.MM_maxZ = aLayerZ; var isVisible = (((NS)?aLayer.visibility:aLayer.style.visibility).indexOf('hid') == -1); if (aLayer.MM_dragOk != null && isVisible) with (aLayer) { var parentL=0; var parentT=0; if (!NS) { parentLayer = aLayer.parentElement; while (parentLayer != null && parentLayer.style.position) { parentL += parentLayer.offsetLeft; parentT += parentLayer.offsetTop; parentLayer = parentLayer.parentElement; } } var tmpX=mouseX-(((NS)?pageX:style.pixelLeft+parentL)+MM_hLeft); var tmpY=mouseY-(((NS)?pageY:style.pixelTop +parentT)+MM_hTop);Tags und zugehörigen Attributen wie face, size usw. Verwendet man Text in Tabellen, dann wird das definieren von -Tags für jede einzelne Zelle schnell zur Strafarbeit, abgesehen davon wird auch die Datei schnell aufgebläht. Zudem ist die Einhaltung einheitlicher Textformatierungen über viele Seiten sehr aufwändig und fehleranfällig. Die Formatierung von Text und die Zuweisung von Stilattributen lässt sich zum größten Teil bequem über Cascading Style Sheets (CSS) erledigen. Stylesheets werden von Browsern der 4. Generation (und höher) verstanden und sind so etwas wie eine Formatvorlage. Z.B. könnten Sie über Stylesheets die Darstellung von Text innerhalb des -Tags neu definieren und dem Browser so mitteilen, dass er diesen Text in 10 Punkt Arial darstellen soll. Sie können auch ganz neue Stile definieren und diese den verschiedenen Objekten innerhalb Ihres HTML-Dokuments zuweisen, sei es von Hand oder über die entsprechenden Inspektoren von UltraDev. CSS können für das jeweilige Dokument erstellt werden, oder – was weit sinnvoller ist – in einer externen Datei gespeichert und mit den einzelnen HTML-Dateien innerhalb der Site verlinkt werden. Müssen Sie nun Änderungen an der Textformatierung durchführen, z.B. Times durch Arial ersetzen, müssen Sie nur noch eine Datei, das Stylesheet bearbeiten, und Ihre Änderungen werden sofort in allen Dateien durchgeführt. Darüber hinaus wird es mit Stylesheets möglich, Websites zu gestalten, die auf den unterschiedlichen Plattformen konsistent dargestellt werden. Gestalten Sie eine Website auf dem Mac und schauen Sie sich diese Website dann auf einem PC an – gut möglich, dass das Ergebnis nicht ganz Ihre Absichten widerspiegelt. Gestalten Sie dieselbe Site auf dem PC und öffnen Sie sie dann auf einem Mac – dasselbe in Grün. Abb. 5.1 zeigt, wie eine häufig besuchte Website auf dem Mac aussieht. Abb. 5.2 zeigt dieselbe Site auf einem PC. Beachten Sie die unterschiedliche Menge an Information, die bei gleicher Monitorgröße angezeigt wird. Das größte Problem bei der Entwicklung plattformübergreifender Websites ist die unterschiedliche Auflösung von 96 dpi auf Windowssystemen und von 72 dpi bei Macs. Das hat zur Folge, dass dieselbe Seite auf einem PC wesentlich größer dargestellt wird als auf einem Mac.-Tags. -Tags und -Tags verändert: <style type="text/css"> -Tags auf »Arial, Helvetica, sans serif« gesetzt sowie eine Schriftgröße und -farbe definiert. Das -Tag bekommt ebenfalls dieselbe Fontgruppe zugewiesen, nur wurde eine andere Farbe und eine höhere Schriftgröße gewählt. Jedes HTML-Dokument, das mit diesem Stylesheet verlinkt wird bzw. in das dieses Stylesheet eingefügt wird, erbt diese Eigenschaften. Mit UltraDev wird die Erstellung von CSS bzw. die Neudefinition von Tags zum Kinderspiel – nur ein paar Einträge auswählen, klick, fertig! neu. Wählen Sie HTML-TAG NEU DEFINIEREN, und wählen Sie aus dem Popup-Menü TAG das Tag B. Klicken Sie dann auf OK. 1. Im Listenfeld KATEGORIE können Sie zwischen acht Kategorien von Attributen wählen, die Sie einem Stil zuweisen können. Die am meisten gebräuchliche Kategorie ist TYP. Hier legen Sie sämtliche Schriftattribute fest. Sollte diese Kategorie nicht ausgewählt sein, dann machen Sie das bitte jetzt. Die zugehörige Eingabemaske ist in Abb. 5.7 zu sehen.-Tag umdefiniert haben, geben Sie etwas Text ein und formatieren ihn fett (Menü TEXT > STIL > FETT). Wie Sie sehen, verhält sich fett formatierter Text auf einmal völlig anders als gewohnt. Fett formatierter Text wird in dem Dokument, in dem Sie das Stylesheet definiert haben, nun mit den Attributen angezeigt, die Sie diesem Tag zugewiesen haben. Wollen Sie Text einen benutzerdefinierten Stil zuweisen, benutzen Sie hierzu entweder die CSS-Palette oder das Menü TEXT > CSS-STILE. Markieren Sie den Text und klicken Sie auf den gewünschten Stil in der CSS-Palette oder wählen Sie ihn über das Menü aus.-Tag steckt. Dieser Umlernprozess macht erfahrenen Programmierern den Einstieg in ColdFusion unter Umständen schwerer als jemandem, der noch gar keine Programmiererfahrung hat. Und wie Active Server Pages leidet auch ColdFusion an der Beschränkung auf bestimmte Plattformen. Sie müssen den ColdFusion-Server unter Linux, Solaris, HP-UX oder Windows zusätzlich zum Webserver installieren und vor dem praktischen Einsatz wird erst einmal Bares fällig. Dass ColdFusion nicht auf allen Plattformen verfügbar ist, ist der einzige Nachteil dieser wirklich tollen Software. Ich weiß, ich sollte das hier eigentlich gar nicht sagen, aber wenn Sie mit ColdFusion Studio arbeiten, werden Sie früher oder später feststellen, dass im Vergleich mit UltraDev ColdFusion Studio die bessere CFML Entwicklungsumgebung ist. Die verschiedenen Serververhalten wurden für die unterstützten Plattformen möglichst homogen in UltraDev implementiert. Aus diesem Grund hat man auch kaum versucht, die besonderen Vorteile der einzelnen Sprachen auszureizen. ColdFusion Studio hingegen wurde für die ausschließliche Verwendung mit CFML konzipiert und optimiert und bietet daher natürlich ein Höchstmaß an Flexibilität und Kontrolle über die damit erstellten Anwendungen. Als Mac-User haben Sie allerdings keine andere Alternative als UltraDev. Es ist momentan die einzige CFML-Entwicklungsumgebung für den Mac.... -Tags lässt sich sowohl eine for...next-Schleife als auch eine while-Schleife definieren: -Tag normal wurde der besseren Übersichtlichkeit halber auf mehrere Zeilen umbrochen, um seinen Aufbau zu verdeutlichen. Man könnte es aber ohne Weiteres in eine einzige Zeile setzen. Um eine bedingte Schleife zu definieren, muss das Tag nur leicht verändert werden: ...... , steuern Sie den Programmablauf: -Tag setzen, um das Session-Management zu aktivieren. Dieses Tag wird in die Datei application.cfm, die Sie für jedes Projekt erstellen, geschrieben und sollte-Tag Sitzungsvariablen wie irgendeine andere beliebige Variable definieren. -Tag definiert, in dem sich vom Client übermittelte Werte ablegen lassen: /jdbc:odbc:<Windows NT Data Source Name>... -Tags ablegen, sieht dann so aus: bilder/<%=(Recordset1.Fields.Item("vname").Value)%> <%=(Recordset1.Fields.Item("nname").Value)%>.jpgUntitled Document 4 <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"> 5 6 7 8 12 John Ray
13 99
358
Dynamische Attribute und komplexe Screens
14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60
555-555-5555
Ein famoses Haus
Robyn Ness
62
555-555-1234
Ein nettes Frauenzimmer
Anne Groves
12
230-555-1234
Typischer ColdFusion-Freak
Paul Jeebers
12
430-555-4444
Ein Ex-Knacki
Jack Dairyfay
62
555-555-7123
Ein Mathe-Genie
-Tag die Größe von
