Dreamweaver UltraDev 4 in 21 Tagen . Eigene E-Commerce-Anwendungen ohne Programmierkenntnisse [1. Aufl.] 3-8272-5978-9

Citation preview

---

Dreamweaver UltraDev 4

John Ray Übersetzung: Alfred Liebl und Judith Muhr

Dreamweaver UltraDev 4

Markt + Technik Verlag

Die Deutsche Bibliothek – CIP-Einheitsaufnahme Ein Titeldatensatz für diese Publikation ist bei Der Deutschen Bibliothek erhältlich.

Die Informationen in diesem Produkt werden ohne Rücksicht auf einen eventuellen Patentschutz veröffentlicht. Warennamen werden ohne Gewährleistung der freien Verwendbarkeit benutzt. Bei der Zusammenstellung von Texten und Abbildungen wurde mit größter Sorgfalt vorgegangen. Trotzdem können Fehler nicht vollständig ausgeschlossen werden. Verlag, Herausgeber und Autoren können für fehlerhafte Angaben und deren Folgen weder eine juristische Verantwortung noch irgendeine Haftung übernehmen. Für Verbesserungsvorschläge und Hinweise auf Fehler sind Verlag und Herausgeber dankbar. Autorisierte Übersetzung der amerikanischen Originalausgabe: Teach Yourself Dreamweaver UltraDev 4 in 21 Days © 2001 by SAMS Publishing Alle Rechte vorbehalten, auch die der fotomechanischen Wiedergabe und der Speicherung in elektronischen Medien. Die gewerbliche Nutzung der in diesem Produkt gezeigten Modelle und Arbeiten ist nicht zulässig. Fast alle Hardware- und Software-Bezeichnungen, die in diesem Buch erwähnt werden, sind gleichzeitig auch eingetragene Warenzeichen oder sollten als solche betrachtet werden. Umwelthinweis: Dieses Buch wurde auf chlorfrei gebleichtem Papier gedruckt. Die Einschrumpffolie – zum Schutz vor Verschmutzung – ist aus umweltverträglichem und recyclingfähigem PE-Material.

10 9 8 7 6 5 4 3 2 1 04 03 02 01

ISBN 3-8272-5978-9

© 2001 by Markt+Technik Verlag, ein Imprint der Pearson Education Deutschland GmbH, Martin-Kollar-Straße 10–12, D–81829 München/Germany Alle Rechte vorbehalten Übersetzung: Alfred Liebl und Judith Muhr Lektorat: Jürgen Bergmoser, [email protected] Fachlektorat und Korrektorat: Christel Metke, Köln Herstellung: Claudia Bäurle, [email protected] Satz: reemers publishing services gmbh, Krefeld, (www.reemers.de) Einbandgestaltung: Grafikdesign Heinz H. Rauner, Gmund Druck und Verarbeitung: Kösel, Kempten, www.koeselbuch.de Printed in Germany

Inhaltsverzeichnis Einführung in Macromedia Dreamweaver UltraDev. . . . . . . . . . . 21 Im Anfang.... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 Dann ward es licht (am anderen Ende des Tunnels)... . . . . . . 22 Die Nebel heben sich... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 Der Horizont verfinstert sich ein weiteres Mal. . . . . . . . . . . . . 23 Dreamweaver UltraDev betritt die Bühne . . . . . . . . . . . . . . . . 24 Die kommenden Wochen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

Woche 1 – Auf einen Blick . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 Tag 1

Die Programmumgebung von UltraDev. . . . . . . . . . . . . . . . . . . . . 31 1.1 1.2 1.3

1.4

1.5

1.6 1.7 1.8 1.9

Die Programmoberfläche von UltraDev . . . . . . . . . . . . . . . . . 32 Die Menüleiste . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 Die Dokumentansicht . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 Objekte bearbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 Screenformate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 Downloadzeiten und Dokumentgrößen. . . . . . . . . . . . . . . . . . 39 Die Dokumentansicht anpassen . . . . . . . . . . . . . . . . . . . . . . . . 39 Die Werkzeugpaletten. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41 Die HTML-Objektpalette. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42 Der Eigenschafteninspektor . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 Der Quick Tag Editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54 Sonstige Paletten und Fenster . . . . . . . . . . . . . . . . . . . . . . . . . 54 Direkter Zugriff auf den HTML-Code . . . . . . . . . . . . . . . . . . . 57 Auswahlen in die verschiedenen Ansichten übernehmen. . . . 58 Codeansichtsoptionen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59 Informationen zu HTML-Tags anzeigen . . . . . . . . . . . . . . . . . 60 Suchfunktionen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60 Bearbeiten mit externem Editor . . . . . . . . . . . . . . . . . . . . . . . . 64 Die Voreinstellungen von UltraDev anpassen . . . . . . . . . . . . . 64 Zusammenfassung. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67 Fragen und Antworten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67 Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68 Quiz. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68 Übungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68

5

Inhaltsverzeichnis

Tag 2

Die WYSIWYG-Layoutwerkzeuge von UltraDev . . . . . . . . . . . . . . 69 2.1 Ihre erste Website . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70 Eine Site definieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71 2.2 Gedanken zur Gestaltung. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 Wie sieht meine Zielgruppe aus? . . . . . . . . . . . . . . . . . . . . . . . 74 Planen Sie für den kleinsten gemeinsamen Nenner . . . . . . . . 74 Halten Sie Ihre Website sauber . . . . . . . . . . . . . . . . . . . . . . . . 74 2.3 Allgemeine Objekte und Seitenelemente . . . . . . . . . . . . . . . . 75 Einen Link erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76 Den Head-Bereich bearbeiten . . . . . . . . . . . . . . . . . . . . . . . . . 77 Allgemeine Seiteneigenschaften. . . . . . . . . . . . . . . . . . . . . . . . 79 Eine Seitenvorschau anzeigen lassen . . . . . . . . . . . . . . . . . . . . 81 Rechtschreibprüfung. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81 2.4 Tabellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82 Tabellen einfügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82 Layout von Bildern und Texten . . . . . . . . . . . . . . . . . . . . . . . . 87 Der Tabellen-Layoutmodus . . . . . . . . . . . . . . . . . . . . . . . . . . . 92 2.5 Menüleisten und Buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93 Linklisten. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93 Grafiken und Imagemaps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94 Menüs mit Rollover-Bildern . . . . . . . . . . . . . . . . . . . . . . . . . . . 96 Navigationsleisten mit Rollover . . . . . . . . . . . . . . . . . . . . . . . . 99 2.6 Ebenen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101 Exaktes Positionieren mit Ebenen . . . . . . . . . . . . . . . . . . . . . 102 Ebenen in Tabellen verwandeln und umgekehrt . . . . . . . . . 106 Mittels Frames Elemente mehrfach verwenden . . . . . . . . . . 107 2.7 Formulare . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112 2.8 Zielbrowser prüfen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112 2.9 Berichte erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113 2.10 Zusammenfassung. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114 2.11 Fragen und Antworten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114 2.12 Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115 Quiz. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115 Übungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116

Tag 3

Websites planen und verwalten . . . . . . . . . . . . . . . . . . . . . . . . . . . 117 3.1 Planung der Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118 Sitemaps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118 Dateinamenskonventionen . . . . . . . . . . . . . . . . . . . . . . . . . . . 120 3.2 Die Sitemap-Werkzeuge von UltraDev . . . . . . . . . . . . . . . . . 122

6

Inhaltsverzeichnis

3.3

3.4 3.5

3.6 3.7 3.8

Tag 4

Sitemaps von fertigen Websites anzeigen. . . . . . . . . . . . . . . . 122 Mit der Sitemap neue Websites anlegen . . . . . . . . . . . . . . . . 126 Websites in UltraDev importieren . . . . . . . . . . . . . . . . . . . . . 128 Wie Sie an die Daten kommen . . . . . . . . . . . . . . . . . . . . . . . 128 Webserver-Verbindung einrichten . . . . . . . . . . . . . . . . . . . . . 129 Die Verbindung öffnen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135 Websites pflegen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137 Hyperlinks überprüfen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138 Verteilte Entwicklungsumgebung. . . . . . . . . . . . . . . . . . . . . . 140 Funktion Ein-/Auschecken einrichten . . . . . . . . . . . . . . . . . . 141 Die Funktion Ein-/Auschecken im praktischen Einsatz . . . . 141 Design Notes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142 Zusammenfassung. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144 Fragen und Antworten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144 Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145 Quiz. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145 Übungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146

Websites in Bewegung – clientseitige Verhaltensweisen. . . . . . . . 147 4.1

4.2

4.3

4.4

DHTML – Was hat man darunter zu verstehen und was nicht?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148 Stylesheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149 JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149 Das DHTML-Problem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149 Soll ich nun DHTML verwenden oder nicht?. . . . . . . . . . . . 150 Clientseitige Verhaltensweisen . . . . . . . . . . . . . . . . . . . . . . . . 151 Die Verhaltenspalette . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151 Verhaltensweisen erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . 152 Per Verhaltensweise Text in der Statuszeile ausgeben. . . . . . 157 Aktion Statusleistentext festlegen . . . . . . . . . . . . . . . . . . . . . . 157 Benutzerhilfen einblenden . . . . . . . . . . . . . . . . . . . . . . . . . . . 160 Popup-Fenster . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163 Drag-and-Drop auf meiner Website? . . . . . . . . . . . . . . . . . . . 166 Mit Zeitleisten arbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172 Der Zeitleisteninspektor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172 Schlüsselbilder für eine Animation definieren. . . . . . . . . . . . 174 Komplexe Bewegungspfade mühelos erstellen . . . . . . . . . . . 175 Weitere Funktionen der Zeitleiste . . . . . . . . . . . . . . . . . . . . . 177 Flash-Elemente mit UltraDev . . . . . . . . . . . . . . . . . . . . . . . . 177 Flash-Schaltflächen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178 Flash-Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179

7

Inhaltsverzeichnis

4.5 4.6 4.7 4.8 4.9

Tag 5

Wieder verwertbare Elemente und Erweiterungsmodule. . . . . . . 187 5.1

5.2 5.3

5.4

5.5

5.6 5.7

5.8 5.9 5.10

8

Weitere dynamische Elemente . . . . . . . . . . . . . . . . . . . . . . . . 181 JavaScript für Fortgeschrittene . . . . . . . . . . . . . . . . . . . . . . . . 182 Zusammenfassung. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184 Fragen und Antworten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184 Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185 Quiz. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185 Übungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186 HTML-Code wieder verwenden . . . . . . . . . . . . . . . . . . . . . . 188 Einheitliche Formatierung mit Stylesheets . . . . . . . . . . . . . . 189 Wiederkehrende Elemente. . . . . . . . . . . . . . . . . . . . . . . . . . . 191 Vorlagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192 HTML-Stile. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192 Cascading Style Sheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195 Stylesheets verwenden. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195 Bearbeitung und Links zu externen Stylesheets. . . . . . . . . . . 199 CSS-Referenz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201 Ein letzte Bemerkung zu Stylesheets . . . . . . . . . . . . . . . . . . . 204 Bibliotheken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205 Fertige HTML-Elemente in Bibliotheken ablegen . . . . . . . . 205 Die Elementepalette: Bibliotheken . . . . . . . . . . . . . . . . . . . . 205 Bibliothekselemente neu erstellen . . . . . . . . . . . . . . . . . . . . . 207 Vorlagen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208 Bestehende HTML-Dokumente als Vorlage speichern. . . . . 209 Die Elementepalette: Vorlagen . . . . . . . . . . . . . . . . . . . . . . . 211 Vorlagen neu erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211 Hast du mal 'ne Vorlage? . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212 Der Elemente-Manager . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213 Verschiedene Ansichtsmodi im Elemente-Manager . . . . . . . 213 UltraDev erweitern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214 Makros aufzeichnen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214 Temporäre Befehle aufzeichnen . . . . . . . . . . . . . . . . . . . . . . 215 Erweiterungsmodule für UltraDev herunterladen . . . . . . . . . 216 Zusammenfassung. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218 Fragen und Antworten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218 Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219 Quiz. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219 Übungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219

Inhaltsverzeichnis

Tag 6

Einführung in dynamische Webanwendungen und Datenbankentwicklung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221 6.1

6.2

6.3

6.4

6.5 6.6 6.7

Tag 7

Dynamische Websites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222 Traditionelle Programmierung von Web-Applikationen . . . . 223 In den HTML-Code eingebettete Scriptsprachen . . . . . . . . . 224 Dynamische Sites verstehen . . . . . . . . . . . . . . . . . . . . . . . . . . 225 Variablenübergabe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225 Sitzungsvariablen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227 Cookies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228 Dynamische Websites kreieren . . . . . . . . . . . . . . . . . . . . . . . . 230 Verschiedene Typen dynamischer Websites . . . . . . . . . . . . . 230 Die Planung von dynamischen Websites . . . . . . . . . . . . . . . . 231 Datenbankentwurf. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233 Terminologie der Datenmodellierung . . . . . . . . . . . . . . . . . . 234 Beispiel für eine Normalisierung . . . . . . . . . . . . . . . . . . . . . . 236 Vom Entwurf zur Datenbank . . . . . . . . . . . . . . . . . . . . . . . . . 243 Zusammenfassung. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247 Fragen und Antworten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248 Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249 Quiz. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249 Übungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249

Die unterstützten Skriptsprachen verstehen. . . . . . . . . . . . . . . . . 251 7.1

7.2

7.3 7.4 7.5 7.6

Skriptsprachen in UltraDev . . . . . . . . . . . . . . . . . . . . . . . . . . 252 Active Server Pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253 Java Server Pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255 ColdFusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257 Die Auswahl des Servers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258 Anwenderfreundlichkeit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259 Welche Dienste werden angeboten? . . . . . . . . . . . . . . . . . . . 260 Stabilität. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260 Performance/Kosten-Relation . . . . . . . . . . . . . . . . . . . . . . . . . 261 Support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261 Die endgültige Entscheidung . . . . . . . . . . . . . . . . . . . . . . . . . 262 Ein Blick auf die unterstützten Skriptsprachen . . . . . . . . . . . 262 Grundlegende Konzepte der Programmierung . . . . . . . . . . . 263 Zusammenfassung. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270 Fragen und Antworten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270 Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271 Quiz. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271 Übung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271

9

Inhaltsverzeichnis

Woche 2 – Auf eínen Blick . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274 Tag 8

Mac und Windows-PC für die Datenbankanbindung fit machen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275 8.1 Datenbankverbindungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276 Eine Datenbankverbindung einrichten (Mac/Win) . . . . . . . 277 8.2 Java/ODBC-Verbindung einrichten (Macintosh/Windows NT) . . . . . . . . . . . . . . . . . . . . . . . . . . . 287 Den Macintosh-JDBC-Client-Treiber installieren . . . . . . . . 287 Den Windows NT-JDBC-ODBC-Server konfigurieren . . . . 290 8.3 MySQL installieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294 MySQL unter Windows einrichten . . . . . . . . . . . . . . . . . . . . 294 MySQL auf UNIX-Systemen einrichten . . . . . . . . . . . . . . . . 295 Den MySQL-Server testen . . . . . . . . . . . . . . . . . . . . . . . . . . . 297 ODBC-Datenquelle für MySQL einrichten . . . . . . . . . . . . . 298 8.4 Eine ODBC-Datenquelle für Microsoft Access definieren . . 300 8.5 Zusammenfassung. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302 8.6 Fragen und Antworten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303 8.7 Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304 Quiz. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304 Übungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304

Tag 9

Einführung in die dynamischen Werkzeuge von UltraDev . . . . . 305 9.1

Herkömmliche Datenbanken und das Web . . . . . . . . . . . . . . 306

. . . . . . . . . . . . . . . . . . . . . . . . . . . . 306 erstelltDatenbankverbindungen von ciando Serververhalten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307

9.2

9.3

9.4

10

Standard-Serververhalten . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310 Der Unterschied online – offline . . . . . . . . . . . . . . . . . . . . . . 317 Weitere Serververhalten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 318 Datenbindungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322 Dynamische Daten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323 Datenbindungen in der Dokumentansicht . . . . . . . . . . . . . . 323 Benutzerauthentifizierung . . . . . . . . . . . . . . . . . . . . . . . . . . . 326 Benutzer anmelden. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 326 Zugriff auf Seite beschränken . . . . . . . . . . . . . . . . . . . . . . . . . 328 Benutzer abmelden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328 Neuen Benutzernamen überprüfen . . . . . . . . . . . . . . . . . . . . 329 Technik für Fortgeschrittene: Serververhalten editieren bzw. neu erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . 330 Zusammenfassung. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333

Inhaltsverzeichnis

9.5 9.6

Tag 10

Datenbankgestützte Webseiten entwickeln . . . . . . . . . . . . . . . . . 337 10.1 10.2

10.3

10.4 10.5 10.6 10.7 10.8 10.9

Tag 11

Fragen und Antworten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334 Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335 Quiz. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335 Übungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335 Datenbankgestützte Webseiten . . . . . . . . . . . . . . . . . . . . . . . . 338 Eine einfache Tabelle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 339 Das Backend erstellen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 339 Das UltraDev-Frontend entwickeln . . . . . . . . . . . . . . . . . . . . 341 Grafiken mit Datensatzgruppen verknüpfen . . . . . . . . . . . . . 349 Ein grafiktaugliches Datenbank-Backend . . . . . . . . . . . . . . . 350 Das Dokument um dynamische Bilder ergänzen . . . . . . . . . 351 Das Layout verschönern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 354 Dynamische Attribute und komplexe Screens . . . . . . . . . . . . 355 Ein erweitertes Datenbank-Backend . . . . . . . . . . . . . . . . . . . 355 Zusatzfunktionen in dynamisch erzeugten Dokumenten . . . 360 Sortieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 361 Zusammenfassung. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362 Fragen und Antworten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 363 Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 363 Quiz. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 363 Übungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 364

Datensätze mit UltraDev-Applikationen speichern, bearbeiten und aktualisieren. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365 11.1 11.2

11.3 11.4

11.5

Datenmanipulation online . . . . . . . . . . . . . . . . . . . . . . . . . . . 366 Online-Formulare erstellen. . . . . . . . . . . . . . . . . . . . . . . . . . . 367 Ein einfaches HTML-Formular erstellen . . . . . . . . . . . . . . . 368 Textfelder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 371 Submit-Schaltflächen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 374 Serververhalten Datensatz einfügen zuweisen . . . . . . . . . . . . 379 Anzeige von Detailseiten und Löschen von Datensätzen . . . 382 Eine Detailseite erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . 382 Datensätze löschen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 387 Auf Detailseiten verlinken . . . . . . . . . . . . . . . . . . . . . . . . . . . 388 Aktualisierungsseiten erstellen . . . . . . . . . . . . . . . . . . . . . . . . 391 Das Erstellen von dynamischen Formularen . . . . . . . . . . . . . 393 Dynamische Formulare mit Serververhalten erstellen . . . . . 393

11

Inhaltsverzeichnis

11.6

11.7 11.8 11.9

Dynamische Formulare mit dem Eigenschafteninspektor erzeugen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 395 Fertige Musterseiten verwenden . . . . . . . . . . . . . . . . . . . . . . . 396 Master-Detailseitensatz einfügen . . . . . . . . . . . . . . . . . . . . . . 397 Einfügeformulare . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 399 Aktualisierungsformular für Datensätze . . . . . . . . . . . . . . . . . 401 Die endgültige Verknüpfung der Formularseiten . . . . . . . . . 403 Zusammenfassung. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 404 Fragen und Antworten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 405 Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 406 Quiz. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 406 Übungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 406

Tag 12

Komplexe Datenbankabfragen . . . . . . . . . . . . . . . . . . . . . . . . . . . 409 12.1 Wozu brauchen wir SQL? . . . . . . . . . . . . . . . . . . . . . . . . . . . 410 12.2 Die Datenbankobjekte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 412 12.3 Datenbanken und Tabellen anlegen . . . . . . . . . . . . . . . . . . . 413 Datentypen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 414 12.4 Daten eintragen/ändern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 416 Daten aktualisieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417 Daten löschen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 420 12.5 Datenbanktabellen abfragen. . . . . . . . . . . . . . . . . . . . . . . . . . 421 Informationen sortieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 422 Tabellen verknüpfen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 422 Werkzeuge zur Summenbildung . . . . . . . . . . . . . . . . . . . . . . 426 12.6 Andere komplexe Techniken . . . . . . . . . . . . . . . . . . . . . . . . . 428 Ansichten. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 428 Gespeicherte Prozeduren . . . . . . . . . . . . . . . . . . . . . . . . . . . . 429 Unterabfragen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 430 12.7 Komplexe Abfragen und UltraDev. . . . . . . . . . . . . . . . . . . . . 430 12.8 Zusammenfassung. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 432 12.9 Fragen und Antworten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 433 12.10 Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 433 Quiz. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 433 Übung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 434

Tag 13

Komplexe Komponenten: Kataloge und Suchen . . . . . . . . . . . . . 435 13.1

12

Ein Produktkatalog . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 436 Produktkategorien . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 437 Katalogelemente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 438

Inhaltsverzeichnis

13.2

13.3

13.4 13.5 13.6

Tag 14

Verwandte Elemente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 439 Das SQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 440 Die SQL-Abfragen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 442 Entwurf des Katalogs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 446 Suchformular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 448 Suchergebnisse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 451 Die Verhalten Zu Datensatz verschieben . . . . . . . . . . . . . . . 453 Automatisieren der Navigationsleiste . . . . . . . . . . . . . . . . . . . 461 Navigationsstatus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 461 Navigationsleisten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 462 Zusammenfassung. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 463 Fragen und Antworten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 464 Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465 Quiz. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465 Übungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465

Komplexe Komponenten: Benutzeranmeldungen . . . . . . . . . . . . 467 14.1

Anmeldesysteme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 468 HTTP-Authentifizierung . . . . . . . . . . . . . . . . . . . . . . . . . . . . 468 Web-basierte Anmeldung . . . . . . . . . . . . . . . . . . . . . . . . . . . . 469 14.2 Das SQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 470 14.3 Eine einfache Anmeldung . . . . . . . . . . . . . . . . . . . . . . . . . . . 473 Verarbeitung der Anmeldeinformation . . . . . . . . . . . . . . . . . 475 Testen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 477 Verborgener Code. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 478 14.4 Sitzungsverwaltung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 479 Variablenübergabe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 481 Variablenübergabe – Fortsetzung. . . . . . . . . . . . . . . . . . . . . . 485 Auf eine Seite mit ergänzenden Themen wechseln . . . . . . . 487 14.5 Cookies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 488 Sitzungsvariablen setzen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 490 Sitzungsvariablen verwenden . . . . . . . . . . . . . . . . . . . . . . . . . 491 Sitzungsvariablen in Abfragen . . . . . . . . . . . . . . . . . . . . . . . . 492 14.6 Das Authentifizierungssystem von UltraDev . . . . . . . . . . . . . 493 14.7 Echte Sicherheit für Websites. . . . . . . . . . . . . . . . . . . . . . . . . 494 14.8 Zusammenfassung. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 494 14.9 Fragen und Antworten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 495 14.10 Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 496 Quiz. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 496 Übungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 496

13

Inhaltsverzeichnis

Woche 3 – Auf einen Blick . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 498 Tag 15

Komplexe Techniken: Existierende Websites mithilfe dynamischer Werkzeuge konvertieren. . . . . . . . . . . . . . . . . . . . . . 501 15.1 Der Umstieg vom Statischen zum Dynamischen . . . . . . . . . 502 15.2 Banner-Anzeigen zufällig ausgeben . . . . . . . . . . . . . . . . . . . . 504 Tabellendefinitionen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 505 Beispieldaten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 505 Die SQL-Abfrage. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 506 Implementierung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 508 15.3 Jahreszeitlich/tageszeitlich unterschiedliche Bilder. . . . . . . . 512 Tabellendefinition. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 512 Das SQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 513 Mehrere Jahreszeit-/zeitbasierte Bilder. . . . . . . . . . . . . . . . . . 515 Das SQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 516 15.4 Feed-back von Ihren Benutzern entgegennehmen . . . . . . . . 518 Die Tabellendefinition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 518 Das SQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 519 15.5 Das HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 521 15.6 Zusammenfassung. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 527 15.7 Fragen und Antworten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 527 15.8 Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 528 Quiz. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 528 Übungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 528

Tag 16

Komplexe Techniken: Datensammlung und Berichte . . . . . . . . . 529 16.1

16.2

16.3

14

Eingaben und Ausgaben: Übersicht über das Nachrichtensystem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 530 Definition der Sitemap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 531 Anlegen des SQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 532 Die Hauptlistenansicht . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 535 Die Nachrichtenliste anlegen. . . . . . . . . . . . . . . . . . . . . . . . . 536 Sortieren der Nachrichtenliste . . . . . . . . . . . . . . . . . . . . . . . . 540 Parameter für die Verhaltensweise Zu Seite mit ergänzenden Themen wechseln. . . . . . . . . . . . . . . . . . . . . . . 542 Durchsuchen der Nachrichtenliste . . . . . . . . . . . . . . . . . . . . 543 Nachrichten lesen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 545 Die Datensatzgruppen laden . . . . . . . . . . . . . . . . . . . . . . . . . 547 Seitenentwurf . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 549 Nachrichten löschen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 550 Der Anzeigebildschirm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 552

Inhaltsverzeichnis

16.4

16.5 16.6 16.7

Der Bildschirm zum Erstellen von Nachrichten . . . . . . . . . . 553 Verborgene Felder hinzufügen. . . . . . . . . . . . . . . . . . . . . . . . 555 Speichern der Nachricht. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 556 Zusammenfassung. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 557 Fragen und Antworten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 557 Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 558 Quiz. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 558 Übungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 559

Tag 17

Komplexe Techniken: Benutzerdaten verfolgen und verwenden. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 561 17.1 Benutzerdefinierte Websites . . . . . . . . . . . . . . . . . . . . . . . . . . 562 Der Plan der konfigurierbaren Website . . . . . . . . . . . . . . . . . 564 17.2 Tabellendefinitionen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 566 Benutzerauthentifizierung und Voreinstellungen . . . . . . . . . 566 Funktionen und Optionen . . . . . . . . . . . . . . . . . . . . . . . . . . . 567 Eine optimierte Struktur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 569 Bereitstellen der verfügbaren Optionen . . . . . . . . . . . . . . . . . 571 Standardeinstellungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 574 17.3 Die Registrierung und das Anmeldungssystem . . . . . . . . . . . 575 Die Registrierungsseiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 576 Die Anmeldeseiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 580 17.4 Der Inhaltsbildschirm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 584 17.5 Die Einstellungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 591 17.6 Zusammenfassung. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 596 17.7 Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 596 Fragen und Antworten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 596 Quiz. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 597 Übungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 597

Tag 18

Komplexe Techniken: Komplexe Abfragesysteme. . . . . . . . . . . . . 599 18.1 Komplexe Suchen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 600 Schwellenwerte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 606 Gewichtung von Antworten . . . . . . . . . . . . . . . . . . . . . . . . . . 608 18.2 Die Sitemap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 609 18.3 Die Tabellendefinitionen . . . . . . . . . . . . . . . . . . . . . . . . . . . . 610 Die Tabelle UserInfo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 611 Die Optionstabelle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 612 Beispieldaten einfügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 613 18.4 Das Anmeldesystem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 616 Registrierung und Ausgangsprofil . . . . . . . . . . . . . . . . . . . . . . 616

15

Inhaltsverzeichnis

18.5 18.6 18.7 18.8 18.9 18.10 18.11

Tag 19

Komplexe Techniken: Lehren und Prüfen – online . . . . . . . . . . 633 19.1

19.2 19.3

19.4 19.5 19.6 19.7

Tag 20

Umfrage- und Prüfungssysteme . . . . . . . . . . . . . . . . . . . . . . . 634 Die Sitemap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 634 Das SQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 636 Der Anmeldebildschirm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 641 Das Quiz-Formular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 644 Fragen überspringen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 647 Dynamische Antworten. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 647 Speichern der Antwort . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 650 Korrekte Antworten bewerten (optional) . . . . . . . . . . . . . . . . 653 Das Quiz beenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 656 Das Quiz schützen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 661 Administrativer Zugriff . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 661 Der Ergebnis-Bildschirm . . . . . . . . . . . . . . . . . . . . . . . . . . . . 662 Zusammenfassung. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 665 Fragen und Antworten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 665 Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 666 Quiz. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 666 Übungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 666

Komplexe Techniken: E-Commerce-Lösungen . . . . . . . . . . . . . . 669 20.1

20.2

16

Anmeldebildschirme. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 619 Die Seite für die Profilaktualisierung . . . . . . . . . . . . . . . . . . . 622 Die Such- und Ergebnisseiten . . . . . . . . . . . . . . . . . . . . . . . . 625 Schützen Sie Ihre Seiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . 629 Zusammenfassung. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 630 Fragen und Antworten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 630 Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 631 Quiz. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 631 Übungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 631

Einfach komplex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 670 Einkaufen unter Verwendung einer Sitzungs-ID. . . . . . . . . . 671 Benutzerkonten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 672 Unser »perfekter« Ansatz . . . . . . . . . . . . . . . . . . . . . . . . . . . . 673 Sitemap für eine E-Commerce-Site . . . . . . . . . . . . . . . . . . . . 673 Die Tabellendefinitionen . . . . . . . . . . . . . . . . . . . . . . . . . . . . 675 Produktkategorien . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 675 Katalogelemente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 675 Verwandte Elemente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 676

Inhaltsverzeichnis

20.3

20.4

20.5 20.6

20.7 20.8 20.9

Tag 21

Benutzerinformation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 676 Einkaufswageninformation . . . . . . . . . . . . . . . . . . . . . . . . . . . 678 Das Katalogsystem. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 681 Suchformular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 681 Suchergebnisse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 682 Detailbildschirme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 684 Verwandte Elemente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 685 Die Anzeige organisieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . 686 Das Authentifizierungssystem für den Benutzer. . . . . . . . . . . 687 Die Registrierungsseiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 687 Die Anmeldebildschirme . . . . . . . . . . . . . . . . . . . . . . . . . . . . 689 Überprüfen der Sitzungsvariablen . . . . . . . . . . . . . . . . . . . . . 691 Der Einkaufswagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 691 Das Auftragssystem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 694 Die Einkaufswagen-Ansicht . . . . . . . . . . . . . . . . . . . . . . . . . . 694 Die endgültige Auftragserteilung . . . . . . . . . . . . . . . . . . . . . . 699 Die Seite für die Benachrichtigung für einen abgesetzten Auftrag . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 703 Zusammenfassung. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 703 Fragen und Antworten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 704 Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 705 Quiz. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 705 Übungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 705

Dynamische Applikationen testen und einsetzen . . . . . . . . . . . . 707 21.1 Codierprobleme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 708 21.2 Fehler im HTML-Entwurf . . . . . . . . . . . . . . . . . . . . . . . . . . . 709 Formulare . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 709 Ebenen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 714 21.3 Probleme mit Serververhalten . . . . . . . . . . . . . . . . . . . . . . . . 719 Überbleibsel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 719 Erweiterte Abfragen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 719 Halten Sie die Dinge möglichst einfach . . . . . . . . . . . . . . . . 724 21.4 Testen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 725 Prüfung auf NULL-Werte. . . . . . . . . . . . . . . . . . . . . . . . . . . . 725 Überprüfung auf bereits verwendete Daten . . . . . . . . . . . . . . 727 Überprüfen maximaler Längen . . . . . . . . . . . . . . . . . . . . . . . 727 21.5 Weitere Hilfestellungen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 728 21.6 Zusammenfassung. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 729 21.7 Fragen und Antworten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 729

17

Inhaltsverzeichnis

21.8

Anhang A

Quiz-Antworten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 731 A.1 A.2 A.3 A.4 A.5 A.6 A.7 A.8 A.9 A.10 A.11 A.12 A.13 A.14 A.15

A.16 A.17

18

Workshop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 730 Quiz. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 730 Übung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 730 Antworten zu Tag 1, »Die Programmumgebung von UltraDev« . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 732 Antworten zu Tag 2, »Die WYSIWYG-Layoutwerkzeuge von UltraDev« . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 732 Antworten zu Tag 3, »Websites planen und verwalten« . . . . . 733 Antworten zu Tag 4, »Websites in Bewegung – clientseitige Verhaltensweisen« . . . . . . . . . . . . . . . . . . . . . . . . 734 Antworten zu Tag 5, »Wieder verwertbare Elemente und Erweiterungsmodule« . . . . . . . . . . . . . . . . . . . . . . . . . . . 734 Antworten zu Tag 6, »Einführung in dynamische Webanwendungen und Datenbankentwicklung« . . . . . . . . . 735 Antworten zu Tag 7, »Die unterstützten Skriptsprachen verstehen« . . . . . . . . . . . . . . . . . . . . . . . . . . . 736 Antworten zu Tag 8, »Mac und Windows-PC für die Datenbankanbindung fit machen«. . . . . . . . . . . . . . . . . . . . . 737 Antworten zu Tag 9, »Einführung in die dynamischen Werkzeuge von UltraDev« . . . . . . . . . . . . . . . . . . . . . . . . . . . 738 Antworten zu Tag 10, »Datenbankgestützte Webseiten entwickeln« . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 738 Antworten zu Tag 11, »Datensätze mit UltraDevApplikationen speichern, bearbeiten und aktualisieren« . . . . 740 Antworten zu Tag 12, »Datensätze mit UltraDevApplikationen speichern, bearbeiten und aktualisieren« . . . . 741 Antworten zu Tag 13, »Komplexe Komponenten: Kataloge und Suchen« . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 742 Antworten zu Tag 14, »Komplexe Komponenten: Benutzeranmeldungen« . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 743 Antworten zu Tag 15, »Komplexe Techniken: Existierende Websites mithilfe dynamischer Werkzeuge konvertieren« . . . . . . . . . . . . . . . . . . . . . . . . . . . . 744 Antworten zu Tag 16, »Komplexe Techniken: Datensammlung und Berichte« . . . . . . . . . . . . . . . . . . . . . . . 745 Antworten zu Tag 17, »Komplexe Techniken: Benutzerdaten verfolgen und verwenden« . . . . . . . . . . . . . . . 746

Inhaltsverzeichnis

A.18 Antworten zu Tag 18, »Komplexe Techniken: Komplexe Abfragesysteme« . . . . . . . . . . . . . . . . . . . . . . . . . . 747 A.19 Antworten zu Tag 19, »Komplexe Techniken: Lehren und prüfen – online« . . . . . . . . . . . . . . . . . . . . . . . . . 747 A.20 Antworten zu Tag 20, »Komplexe Techniken: E-Commerce-Lösungen« . . . . . . . . . . . . . . . . . . . . . . . . . . . . 748 A.21 Antworten zu Tag 21, »Dynamische Applikationen testen und einsetzen« . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 749 Anhang B

Anpassen der UltraDev-Umgebung. . . . . . . . . . . . . . . . . . . . . . . . 751 B.1 B.2

Menüs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 752 Dialogfelder und Fenster . . . . . . . . . . . . . . . . . . . . . . . . . . . . 753

Anhang C

Schnellüberblick über die MySQL-Funktionen . . . . . . . . . . . . . 757 C.1 Allgemeine Datentypen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 758 C.2 Arithmetische Operationen . . . . . . . . . . . . . . . . . . . . . . . . . . 759 C.3 Logische Operationen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 760 C.4 Numerische Vergleiche. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 760 C.5 Funktionen für Zeichenkettenvergleiche . . . . . . . . . . . . . . . . 760 C.6 Mathematische Funktionen . . . . . . . . . . . . . . . . . . . . . . . . . . 761 C.7 Zeichenkettenfunktionen . . . . . . . . . . . . . . . . . . . . . . . . . . . . 762 C.8 Datums- und Zeitfunktionen . . . . . . . . . . . . . . . . . . . . . . . . . 764 C.9 Aggregatfunktionen für GROUP BY-Klauseln . . . . . . . . . . . . 765

Anhang D

Benutzerdefinierte Codelistings . . . . . . . . . . . . . . . . . . . . . . . . . . 767 D.1 Tag 15 – Das Gästebuch (guestbook.asp) . . . . . . . . . . . . . . . . 768 D.2 Tag 16 – Nachrichtenliste (index.asp) . . . . . . . . . . . . . . . . . . 771 D.3 Tag 16 – Nachrichten lesen (message.asp) . . . . . . . . . . . . . . . 778 D.4 Tag 17 – Anmeldeseite (login2.asp) . . . . . . . . . . . . . . . . . . . . 782 D.5 Tag 17 – Inhaltsseite (content.asp) . . . . . . . . . . . . . . . . . . . . . 784 D.6 Tag 19 – Bildschirm für die Quizfragen (quiz.asp) . . . . . . . . 789 D.7 Tag 20 – In den Einkaufswagen legen (details.asp) . . . . . . . . 801 D.8 Tag 20 – Artikel aus dem Einkaufswagen löschen (checkout.asp) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 811 D.9 Tag 20 – Auftragserteilung (checkout2.asp) . . . . . . . . . . . . . . 815 Stichwortverzeichnis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 825

19

Einführung in Macromedia Dreamweaver UltraDev Im Anfang... Als in den frühen 90er-Jahren das Internet entstand, lag es in den Händen einer kleinen Elite – den Besitzern des technischen Know-hows. Wer ordentlichen HTML-Code erzeugen konnte, galt schon fast als Genie. Damit war ein neuer Berufsstand geboren: der HTML-Programmierer. Leider waren die ersten HTML-Autoren das und nichts anderes: Programmierer. Die Gestaltung visuell ansprechender Webseiten verlangt jedoch ganz andere Fähigkeiten als das Schreiben eines Programms. Heraus kamen dabei meist Sites, die zwar technisch gesehen einwandfrei funktionierten, die aber entweder gestalterisch alles andere als attraktiv waren bzw. den Besucher optisch »überreizten«. Als sich dann mehr und mehr herausstellte, dass es sich beim Web keineswegs wie angenommen um eine Eintagsfliege handelte, wurde auch den Firmen klar, dass sie im Internet präsent sein mussten, wollten sie wettbewerbsfähig bleiben. Die Unternehmen erkannten auch, dass sie bei der Gestaltung von Internetseiten nicht ohne die speziellen Talente von Grafik- bzw. Interface-Designern und Layout-Spezialisten auskommen würden. Trotzdem lag noch alle Macht in den Händen der Programmierer, die aus dem von Grafikern und Textern gelieferten Material die endgültige Website zusammenbauten. Diese Art der Produktion führt zwar zum Ziel, ist aber nicht sonderlich produktiv. Inhalte erstellen, die erstellten Inhalte weiterreichen, auf Feed-back und das fertige Endprodukt warten ist nicht gerade das, was man unter effizientem Workflow versteht. Die Menschheit brauchte Werkzeuge, die es auch Nicht-Programmierern erlaubte, HTML-Dokumente zu erstellen und in einem Team von Webentwicklern mitzuarbeiten. Genau aus dieser Notwendigkeit heraus entstanden die ersten WYSIWYG-(What you see is what you get)-HTML-Editoren.

21

Einführung in Macromedia Dreamweaver UltraDev

Dann ward es licht (am anderen Ende des Tunnels)... Je mehr Menschen sich an die Erzeugung von HTML-Code wagten, desto mehr Editoren erschienen auf der Bildfläche. Die ersten grafischen Editoren waren noch sehr rudimentär, aber sie ermöglichten es dem Anwender, Webseiten visuell in einem Bruchteil der Zeit zu gestalten, die die Codierung per Hand in Anspruch nahm. Diese Editoren waren leicht zu bedienen und erinnerten an primitive Textverarbeitungsprogramme. Netscapes kostenloser »Composer« ist ein gutes Beispiel für jene Editoren der ersten Generation. Er hat sich seit der ersten Version kaum verändert, erlaubt aber dem Anfänger einen guten Einstieg ins Design von Webseiten. Die Crux mit diesen Editoren war, dass ihre Entwicklung nicht mit derjenigen der HTMLSpezifikationen standgehalten hat. Schlimmer war allerdings, dass den Browserherstellern wiederum die Entwicklung der HTML-Spezifikationen nicht schnell genug voran ging. Sie wurden zwar schnell angepasst und erweitert, doch nicht schnell genug, um all die Features zu integrieren, die diesen Firmen so unentbehrlich schienen. Um diese Lücke fehlender »wichtiger Tags« zu füllen, integrierten sie ihre proprietären Tags in ihre Browser. Wenn Sie sich je auf einer Webseite von aufdringlich blinkendem Text genervt fühlten, bedanken Sie sich dafür bei Netscape Communications, den Erfindern des Tags. Der Browserkrieg zwischen Netscape und Microsoft war Vater vieler proprietärer Tags, die von manchen HTML-Editoren unterstützt wurden, von anderen wiederum nicht. Es glich geradezu einer Sisyphusarbeit, einen Editor zu programmieren, dessen HTML-Code von allen Browsern identisch dargestellt wurde.

Die Nebel heben sich... Mit den HTML-Spezifikationen 3.0 und 4.0 wurden viele der browserspezifischen Tags überflüssig. Leistungsfähigere Objektattribute und Features wie CSS (Cascading Style Sheets) ermöglichten es schließlich, HTML-Editoren zu programmieren, die diesen Namen auch verdienten. 1997 kam Macromedia mit seinem Editor Dreamweaver für Mac und PC auf den Markt. Schnell wurde dieses Programm zum Standard, an dem sich andere HTML-Editoren messen lassen mussten. Diese Kombination von vollständigem Zugriff und Kontrolle über den HTML-Code mit einer Bedienoberfläche, die auch die speziellen Bedürfnisse des Gestalters zufrieden stellt, machte zum ersten Mal die plattformübergreifende Entwicklung von HTML-Dokumenten möglich.

22

Der Horizont verfinstert sich ein weiteres Mal

Im Lauf der Zeit hat Macromedia sein Programm immer weiterentwickelt und die jeweils neuesten HTML-Spezifikationen implementiert. So glänzt Dreamweaver mittlerweile mit solchen Features wie der verteilten Entwicklung von Websites, Site-Management oder JavaScript-Fähigkeit. Dreamweaver gewann und gewinnt immer wieder zahlreiche Preise für seine einfache Bedienbarkeit und seine technische Überlegenheit. Doch das Rad der Geschichte dreht sich weiter, und auch die Entwickler von Macromedia sind nicht müßig.

Der Horizont verfinstert sich ein weiteres Mal HTML ist kein Geheimwissen mehr und jeder, der will, kann Webseiten erstellen. Hierdurch sah sich die Creme de la Creme unter den HTML-Programmierern getrieben, sich nach neuen Jagdgründen umzusehen und die nächste große Herausforderung zu suchen. Diese Herausforderung war die Schaffung von Websites, die mit ihrem Besucher interagieren, und diese neue Errungenschaft erobert das Web nun im Sturm. Statt dem Besucher nur statische Dokumente »vorzusetzen«, können moderne Websites Daten speichern und verarbeiten. Dem Besucher wird eine individualisierte, auf ihn zugeschnittene Webseite angezeigt, eine einzigartige Surferfahrung. Dieses Websites sind nicht mehr nur einfach Websites, sondern richtiggehende Webanwendungen. Überall im Web stößt man jetzt auf Online-Händler, Kataloge und Auktionshäuser. Die einstigen HTML-Programmierer schreiben nun den serverseitigen Programmcode, der hinter solchen Anwendungen steht. Eine Unzahl an Programmiersprachen und Technologien kommt zum Einsatz, um diese dynamischen Sites zu realisieren: Cold Fusion Markup Language, Active Server Pages und Java Server Pages, um nur wenige zu nennen. Ähnlich wie im Falle von HTML und den WYSIWYG-Editoren, führte der Trend zu dynamischen Sites zur Entwicklung von Editoren, die es auch dem Nicht-Programmierer ermöglichen sollten, solche Webanwendungen zu erstellen. Diese Werkzeuge wiesen aber einige gravierende Nachteile auf – sie unterstützten eine sehr bescheidene Anzahl an Servertechnologien, die sich auf eine einzige Entwicklungsplattform beschränkten und nur mit ausreichender Programmiererfahrung verwendet werden konnten. Und wieder einmal lag die ganze Macht in den Händen einer kleinen Elite. Die ganze Macht?

23

Einführung in Macromedia Dreamweaver UltraDev

Dreamweaver UltraDev betritt die Bühne Erneut hat sich Macromedia der Herausforderung gestellt und eine Entwicklungsumgebung für dynamische Webanwendungen geschaffen, die unter der bekannten und vertrauten Oberfläche von Dreamweaver die Leistungsfähigkeit dynamischer Sites verfügbar macht: Dreamweaver UltraDev. UltraDev, wie ich es von nun an liebevoll nennen werde, ist eine Entwicklungsumgebung aus einem Guss auf dem neuesten Stand der Technik. UltraDev unterstützt nicht eine, sondern drei Servertechnologien (JSP, CFML, ASP), und kann jederzeit durch Plug-Ins um neue Technologien erweitert werden. Darüber hinaus bietet Macromedia dieses Produkt sowohl in einer Mac- wie in einer Windows-Version an. Zur Freude aller Mac-User, die wieder an ihre gewohnten Desktops zurückkehren können, nachdem sie zunächst zähneknirschend auf Windows-Rechnern codieren mussten. Mittels einer intuitiv bedienbaren grafischen Oberfläche lassen sich in UltraDev komplette datenbankgestützte Websites erstellen. Und im Gegensatz zu anderen Programmpaketen bietet UltraDev dem Designer eine Echtzeitvorschau auf seine Daten. Kann man nur vermuten, wie der fertige Produktkatalog im Browser aussehen wird, oder sieht man ihn jederzeit direkt vor Augen, ist ein entscheidender Faktor, ob die Entwicklungszeit bei zwei Stunden oder zwei Tagen liegt. UltraDev erlaubt ferner eine arbeitsteilige Entwicklung von Websites: Der Anwendungsentwickler arbeitet an der Datenbankstruktur, der Designer am Seitenlayout. Die Zeiten, in denen man Dateien von einem Bearbeiter zum nächsten weiterreichen musste, sind vorbei. Wenn Sie dieses Buch durcharbeiten, werden Sie lernen, aus den Möglichkeiten des Programms den größtmöglichen Nutzen zu ziehen. Egal, ob Sie noch nie mit Dreamweaver gearbeitet oder überhaupt keine Erfahrung mit HTML-Editoren haben, in diesen 21 Tagen werden Sie Ihre eigenen datenbankgestützten Websites erstellen. Die einzige Voraussetzung, die Sie mitbringen müssen, sind HTML-Grundkenntnisse sowie Zugang zu einem Mac- oder Windows-Rechner.

Die kommenden Wochen Bevor wir richtig einsteigen, ein paar Worte über den Aufbau des Buches. Sie können, je nach Vorwissen und Interesse, beim Durcharbeiten des Buches durchaus von der Reihenfolge der Kapitel abweichen, das ist überhaupt kein Problem. Der Inhalt ist zwar nach einem 21-Tage-Modell aufgebaut, aber Sie müssen keine Angst haben, dass Ihnen eine Woche Ihrer Lebenszeit verloren geht, wenn Sie von Tag 8 zu Tag 15 springen. Schwerpunkt der ersten Woche ist die Bearbeitung des HTML-Codes mit UltraDev sowie die Grundlagen datenbankgestützter Websites. Sie lernen die verschiedenen Editierwerk-

24

Die kommenden Wochen

zeuge kennen und das Arbeitsfenster. Haben Sie die Programmoberfläche bis in alle Winkel durchstöbert, beginnt der wahre Spaß. Sie werden sich mit den Grundlagen der Datenbankentwicklung und den verschiedenen Servertechnologien vertraut machen, die UltraDev unterstützt. Woche 2 wird zeigen, wie leistungsfähig UltraDev tatsächlich ist. Sobald Sie erfolgreich eine Datenbankverbindung hergestellt haben, werden Sie dynamische Daten in Ihre Webanwendung integrieren. Als Nächstes werden Sie sich mit den Serververhalten und den Werkzeugen der Datendarstellung befassen. Zum Abschluss dieser Woche lernen Sie einige grundlegende Techniken kennen, die allen dynamischen Sites gemeinsam sind. Woche 3 ist der Erstellung richtiger Anwendungen gewidmet. In diesen letzten sieben Tagen werden Sie realistische Projekte erstellen und pflegen. Sie können diese Anwendungen für eigene Projekte übernehmen, sie erweitern und sofort einsetzen. Ferner werden Sie sich auch mit der Fehlersuche in fertigen Anwendungen befassen, falls einmal etwas nicht so funktioniert wie geplant. Wenn Sie dieses Buch ganz durcharbeiten, werden Sie im Stande sein, die unterschiedlichsten Webanwendungen für drei unterschiedliche Servertechnologien zu entwickeln, und das in einer Zeit und einer Mühelosigkeit, die ihresgleichen suchen. Sie sind jetzt eins mit der Macht.

25

Tag 1 Tag 2 Tag 3 Tag 4 Tag 5 Tag 6 Tag 7

Tag 8 Tag 9 Tag 10 Tag 11 Tag 12 Tag 13 Tag 14

Tag 15 Tag 16 Tag 17 Tag 18 Tag 19 Tag 20 Tag 21

Die Programmumgebung von UltraDev Die WYSIWYG-Layoutwerkzeuge von UltraDev Websites planen und verwalten Websites in Bewegung – clientseitige Verhaltensweisen Wieder verwertbare Elemente und Erweiterungsmodule Einführung in dynamische Webanwendungen und Datenbankentwicklung Die unterstützten Skriptsprachen verstehen

Mac und Windows-PC für die Datenbankanbindung fit machen Einführung in die dynamischen Werkzeuge von UltraDev Datenbankgestützte Webseiten entwickeln Datensätze mit UltraDev-Applikationen speichern, bearbeiten und aktualisieren Komplexe Datenbankabfragen Komplexe Komponenten: Kataloge und Suchen Komplexe Komponenten: Benutzeranmeldungen

Komplexe Techniken: Existierende Websites mithilfe dynamischer Werkzeuge konvertieren Komplexe Techniken: Datensammlung und Berichte Komplexe Techniken: Benutzerdaten verfolgen und verwenden Komplexe Techniken: Komplexe Abfragesysteme Komplexe Techniken: Lehren und Prüfen – online Komplexe Techniken: E-Commerce-Lösungen Dynamische Applikationen testen und einsetzen

31 69 117 147 187

W O C H E

221 251

275 305 337 365 409 435 467

501 529 561 599 633 669 707

W O C H E

W O C H E

Auf einen Blick UltraDev ist nicht nur ein mächtiger grafischer Editor, sondern auch ein erstklassiges Autorenprogramm zur Erstellung von dynamischen Webseiten. Macromedia hat seinem neuen Werkzeug alle Features seines bekannten Editors Dreamweaver mitgegeben. Der Anwender ist somit in der Lage, von seiner vertrauten grafischen Oberfläche aus dynamische Webanwendungen zu erstellen, die auch visuell ansprechend sind. In unserer ersten Arbeitswoche werden wir uns schwerpunktmäßig auf die Werkzeuge konzentrieren, die Sie zur Erstellung und Verwaltung von Webseiten benötigen. Bevor Sie daran gehen können, spannende dynamische Webseiten zu generieren, müssen Sie sich erst das nötige Hintergrundwissen erarbeiten, um den HTML-Code zu erzeugen, auf dem diese Seiten aufsetzen. Wenn Sie ein erfahrener HTML-Autor sind, empfiehlt es sich, dass Sie den Stoff der ersten Woche trotzdem durchlesen. UltraDev ist zwar leicht zu bedienen, aber es gibt viele versteckte Funktionen, die, wenn man sie kennt und zu nutzen weiß, die Entwicklungszeit von Websites drastisch verkürzen helfen. Hier eine nur eine kleine Auswahl der Funktionen, die Sie kennen lernen werden: 쐽

Flash-Buttons und -Text einfügen – Wie Sie schnell Flash-basierten Text und Buttons in Ihre Anwendungen einfügen, ohne dass Sie hierzu das Programm selbst brauchen.

쐽

Animationen mit DHTML – Ohne irgendwelche Plug-Ins bereichern Sie Ihre Webseiten um Animationen. Sogar die Erstellung einfacher Spiele ist möglich.

쐽

Pixelgenaues Positionieren – Wie Sie mithilfe der Layertechnik und des einzigartigen Layout-Modus von UltraDev Elemente auf Ihren Seiten exakt positionieren.

쐽

Fortgeschrittenes Site-Management – Wie Sie mit WebDAV, SourceSafe sowie weiteren Werkzeugen zur Versions- und Dateiverwaltung Ihre Websites in einer MultiUser-Umgebung erstellen.

Die ersten Tage sind zwar voll gepackt mit Informationen, aber Sie geben Ihnen ein verlässliches Rüstzeug für die verbleibenden Wochen mit auf den Weg. Da ich davon ausgehe, dass Sie dieses Buch lesen, weil Sie sich für die serverbasierten dynamischen Funktionen von UltraDev interessieren, endet die erste Woche mit ein paar wichtigen Lektionen, die Sie auf die zweite und dritte Woche vorbereiten. Wenn dies Ihr erster Kontakt mit der Programmierung von dynamischen Webseiten ist, haben Sie vielleicht noch keine Erfahrung im Design von Datenbanken. Aber keine Sorge, nach ein paar Tagen wissen Sie alles, was Sie wissen müssen. Selbst wenn das für Sie jetzt noch komisch klingt, werden Sie bald erkennen, dass das mächtigste Glied in Ihrer Weban-

28

wendung Ihr Datenbankserver ist. Je leistungsfähiger Ihr Datenbankserver ist, desto schneller wird Ihr Anwendungsserver reagieren und desto schneller wird Ihre Site die Daten anzeigen. Und wenn ich nicht einmal einen Anwendungsserver habe? Auch das ist kein Grund zur Sorge. Die erste Woche endet mit einem Überblick über alle Servertechnologien, die die dynamischen Funktionen von UltraDev unterstützen, sowie die jeweiligen Vorteile, die die einzelnen Technologien bieten. Es werden alle wichtigen Punkte besprochen. Und nun viel Erfolg! Sollten Sie Fragen haben, können Sie mir auch gerne eine E-Mail schicken ([email protected]).

29

Die Programmumgebung von UltraDev

1

Die Programmumgebung von UltraDev

Anhand eines »Rundgangs« durch die Programmoberfläche von UltraDev werden Sie lernen, wie man sowohl statische wie dynamische HTML-Seiten erstellt. Es ist unerlässlich, dass Sie den Aufbau der Design-Ansicht und des Menüsystems verstehen, wenn Sie mit der Entwicklungsumgebung von UltraDev vertraut werden wollen. In diesem Kapitel werden Sie 쐽

die Optionen erforschen, die Ihnen die einzelnen Menüs bieten, um ein Objekt auf dem Bildschirm zu verändern;

쐽

die verschiedenen Werkzeugpaletten kennen lernen und erfahren, wie man sie aufruft;

쐽

erfahren, wozu die verschiedenen Schaltflächen in der Programmoberfläche von UltraDev da sind und welche HTML-Objekte sich dahinter verbergen;

쐽

lernen, wie Sie den HTML-Code Ihrer Seiten direkt bearbeiten können, falls Sie am automatisch erzeugten Code Änderungen vornehmen möchten;

쐽

die Voreinstellungen von UltraDev verändern, um das Programm Ihren Bedürfnissen anzupassen.

1.1

Die Programmoberfläche von UltraDev

Dreamweaver UltraDev ist ein Programm, das aus zwei Hauptmodulen besteht – dem Modul zum Design von Webseiten (Dreamweaver) und dem Modul zur Erstellung einer Datenbankverbindung (UltraDev). Diese beiden Module sind unter einer Oberfläche vereint, funktionieren aber unabhängig voneinander. In diesem Buch werden wir uns während der ersten Woche in erster Linie damit beschäftigen, uns in die Standardfunktionen von Dreamweaver einzuarbeiten, die der Erzeugung und Bearbeitung von HTML-Code dienen. So werden Sie Webseiten erstellen, die gut aussehen und funktionieren. Die heutige Lektion gibt Ihnen einen allgemeinen Überblick über die DreamweaverOberfläche. So werden Sie die einzelnen Funktionen in den folgenden Tagen leicht wiederfinden. Was UltraDev von anderen Programmen dieser Art unterscheidet, ist, dass Sie nicht nur eine, sondern oft drei oder vier Möglichkeiten zur Auswahl haben, um eine bestimmte Aufgabe auszuführen. Und ich bin mir ziemlich sicher, dass Sie bei der Umsetzung Ihrer Webseiten Ihre eigenen Techniken entwickeln werden, von denen nichts in diesem Buch steht. Ich für meinen Teil habe die Erfahrung gemacht, dass ich durch die tägliche Arbeit mit dem Programm immer routinierter werde. Zum Beispiel entdecke ich immer wieder neue Shortcuts, die die Arbeit mit dem Programm vereinfachen. Die Oberfläche von UltraDev ist so flexibel wie das Programm selbst – kein anderes Programm erlaubt es, die eigenen Daten in so vielen unterschiedlichen Ansichten darzustellen. In der Dokumentansicht bekommen Sie einen ersten Eindruck, wie Ihre Webseite im

32

Die Programmoberfläche von UltraDev

Browser aussehen wird. Der Eigenschafteninspektor erlaubt Ihnen, die einzelnen Attribute eines bestimmten Objekts in Ihrem Design unmittelbar zu verändern. Wer den Dingen gern auf den Grund geht, hat mit eingebautem HTML-Editor sowie dem Quick Tag Editor direkten Zugriff auf den zugrunde liegenden Code. Eine Vielzahl von weiteren Inspektoren und Paletten gibt Ihnen die Möglichkeit, Ihre Seiten um JavaScripts, Datenbankbindungen und viele weitere Features zu ergänzen. Wenn man UltraDev das erste Mal öffnet, reagiert man beim Anblick der Oberfläche vielleicht etwas verschüchtert. Wie in Abb. 1.1 zu sehen, warten etliche Werkzeugpaletten und Dutzende von Buttons darauf, dass der Anwender sie anklickt. Ohne Handbuch kann es schon einmal passieren, dass man sich quer durch alle Werkzeugpaletten von Funktion zu Funktion klickt, nur um einen simplen Befehl auszuführen. Die Idee hinter UltraDev ist ja, die Produktion zu vereinfachen – daher ist weder effektiv noch sinnvoll, zwei Minuten sämtliche Schaltflächen durchzuprobieren, um die Funktion zu finden, die automatisch einen Link erstellt, wenn man im Grunde nur LINK eintippen müsste. Machen Sie sich also gut mit der Programmoberfläche und den Werkzeugleisten vertraut – es ist weniger nervenaufreibend, wenn Sie das jetzt tun und nicht erst ein paar Stunden bevor die Webdatenbank Ihres Kunden online gehen soll. Wenn Sie das Programm gerne selbst erforschen wollen, dann schalten Sie die Tooltipps von UltraDev ein. Wenn Sie dann den Mauszeiger über einer Schaltfläche platzieren, öffnet UltraDev ein kleines Popup-Fenster, in dem die Funktion des betreffenden Werkzeugs beschrieben wird. Nichtsdestotrotz werden Sie einige Erklärungen zur Programmoberfläche benötigen.

Abbildung 1.1: Die Oberfläche von UltraDev ist sehr komplex.

33

Die Programmumgebung von UltraDev

Um uns das Leben etwas leichter zu machen, werden wir uns die verschiedenen Programmfenster und Menüs der Reihe nach vornehmen und ihre Funktionen besprechen. So werden Sie die benötigten Werkzeuge leicht wieder finden, wenn Sie darangehen, Ihren eigenen HTML-Code zu schreiben – das Thema von Tag 2, »Die WYSIWYG-Layoutwerkzeuge von UltraDev«.

1.2

Die Menüleiste

Die Menüleiste von UltraDev ist leicht zu verstehen. Die meisten Funktionen, die von den Inspektoren bzw. Werkzeugleisten angeboten werden, finden sich noch einmal unter den entsprechenden Menüpunkten. Vermutlich werden Sie weniger mit den Menüs arbeiten, sondern mehr die Inspektoren und die Dokumentansicht verwenden. Es folgt ein kleiner Überblick darüber, welche Funktionen sich unter den einzelnen Menüpunkten verbergen: 쐽

DATEI – HTML-Dateien öffnen und speichern. Alles, was mit dem Öffnen von Dateien, dem Importieren von externem Datenmaterial oder dem Speichern von HTMLCode zu tun hat, hat seinen Platz in diesem Menü. Hier entdecken Sie auch solche Funktionen wie ALS VORLAGE SPEICHERN oder DESIGN NOTES. Wenn Ihnen das im Augenblick noch nichts sagt, machen Sie sich deswegen keine Gedanken. Sie werden diese Funktionen im Laufe dieser Woche noch ausführlich kennen lernen.

쐽

BEARBEITEN – Objekte im Dokumentfenster ausschneiden, kopieren, einsetzen und suchen. Über das Menü BEARBEITEN können Sie auch die Voreinstellungen des Programms verändern. Im Laufe dieses Tages erfahren Sie Näheres über diese Voreinstellungen und wie Sie damit Ihren Arbeitsprozess erleichtern können.

쐽

ANSICHT – Hier wählen Sie aus, welche Elemente Sie sich in der Designansicht anzeigen lassen wollen. Das Menü ANSICHT gibt Ihnen einen Überblick, welche Elemente gerade sichtbar sind und welche nicht. Wenn Sie das Gerüst Ihrer HTML-Seite mit Text- oder Bildmaterial füllen, dann werden Sie es vielleicht hilfreich finden, wenn Sie Tabellenrahmen oder das Gitternetz ausblenden können, um einen besseren Eindruck vom endgültigen Aussehen Ihrer Seite zu bekommen.

쐽

EINFÜGEN – Wenn Sie Material auf Ihrer Seite lieber über ein Menü einfügen, dann sind Sie hier richtig. Über das Menü EINFÜGEN können Sie Bilder und allen anderen Objekte, die in der Werkzeugleiste enthalten sind, direkt auf Ihrer HTML-Seite platzieren. Es macht keinen Unterschied, ob Sie dieses Menü oder die Werkzeugleiste verwenden.

쐽

MODIFIZIEREN – Mithilfe dieses Menüs können Sie einzelne Elemente Ihrer HTMLSeite verändern. Sie wählen ein Objekt aus und weisen ihm neue Eigenschaften zu. Das Menü MODIFIZIEREN erlaubt Ihnen z.B., eine Auswahl in einen Link umzuwandeln oder das Layout von Tabellen zu verändern.

34

Die Menüleiste

쐽

TEXT – Wenn Sie Text eingeben oder ausgewählt haben, können Sie sein Aussehen über dieses Menü verändern. Es stehen ähnliche Formate zur Verfügung, wie sie auch Textverarbeitungen bieten: Schriftart, Größe, Stil usw.

쐽

BEFEHLE – Das Menü BEFEHLE von UltraDev gibt Ihnen einen leicht zu bedienenden Makrorecorder an die Hand. Zeichnen Sie damit mehrere Arbeitsschritte auf, und spielen Sie sie als neuen Befehl wieder ab. Zusätzlich können Sie sich auch kostenlose Befehlsbibliotheken von der Macromedia-Website herunterladen. Hier finden sich auch noch diverse andere Anweisungen wie z.B. HTML OPTIMIEREN oder FARBSCHEMA EINSTELLEN. In Tag 5, »Wiederverwertbare Elemente und Erweiterungsmodule«, werden Sie lernen, wie Sie eigene Befehle definieren.

쐽

SITE – Natürlich können Sie mit UltraDev auch einzelne Webseiten erstellen, doch seine Fähigkeit, komplette Websites zu verwalten, macht aus ihm ein mächtiges Werkzeug für Anfänger ebenso wie für Profis. Über das Menü SITE definieren Sie Websites und ihre Eigenschaften. In Tag 6, »Einführung in dynamische Webanwendungen und Datenbankentwicklung«, werden Sie den Umgang mit den Werkzeugen zur SiteErstellung lernen und erfahren, wie man damit Sites von beliebiger Größe verwaltet.

쐽

FENSTER – Alle Inspektoren bzw. Paletten, von denen hier die Rede ist, können Sie sich über dieses Menü anzeigen lassen bzw. verbergen. Wenn eine bestimmte Palette, die im Buch besprochen wird, auf Ihrem Bildschirm nicht angezeigt wird, dann sollten Sie hier nachsehen.

쐽

HILFE – Das Hilfesystem von UltraDev können Sie jederzeit über dieses Menü aufrufen. Das Hilfesystem wurde mit HTML und Java geschrieben und benötigt einen Browser zur Anzeige. Vielleicht stört es Sie etwas, wenn Sie zwischen verschiedenen Anwendungen wechseln müssen, um die Hilfetexte lesen zu können, aber das OnlineHandbuch ist ebenso ausführlich wie nützlich und entschädigt somit reichlich für das nicht so ansprechende Äußere. Darüber hinaus werden noch verschiedene Lehrgänge und Touren angeboten, die den sofortigen Einstieg in das Programm ungemein erleichtern. Viele Bearbeitungsfunktionen bieten ein Kontextmenü. Es öffnet sich, wenn Sie das Objekt mit der rechten Maustaste (Windows) bzw. mit gedrückter Befehl-Taste (Mac) anklicken. Oft finden Sie in diesen Menüs neben dem Befehl auch noch einen Shortcut.

35

Die Programmumgebung von UltraDev

1.3

Die Dokumentansicht

Wenn Sie UltraDev öffnen, ist das größte Fenster, das Sie auf Ihrem Monitor sehen, das Dokumentfenster. Hier bauen Sie Ihre Webseiten im WYSIWYG-Modus zusammen (WYSIWYG: what you see is what you get). Sie haben also eine direkte Vorschau darauf, wie Ihre Seite aussehen wird, ohne dass Sie hierzu einen Browser starten müssen. Am oberen Fensterrand sehen Sie die Werkzeugleiste, die diverse Buttons enthält, über die sich häufig gebrauchte Funktionen schnell aufrufen lassen. Wir werden zum geeigneten Zeitpunkt näher darauf eingehen. Abb. 1.2 zeigt das Dokumentfenster, in dem eine einfache Seite mit Links geöffnet ist.

Abbildung 1.2: Bei der Erstellung von Webseiten arbeiten wir hauptsächlich im Dokumentfenster.

Um Ihrer Webseite Inhalt hinzuzufügen, können Sie entweder Text direkt in der Dokumentansicht eintippen oder einen Button in der Objektpalette anklicken, um das entsprechende Objekt unmittelbar auf der Seite zu platzieren. Der blinkende Cursor zeigt an, wo sich die Einfügemarke augenblicklich befindet. Sie können diese Einfügemarke mit den Pfeiltasten verschieben oder mit der Maus an die gewünschte Stelle klicken. Text oder jedes beliebige andere Element wird immer dort eingefügt, wo der Cursor steht.

36

Die Dokumentansicht

Im Gegensatz zu modernen Textverarbeitungen wie Word oder WordPerfect, können Sie in UltraDev standardmäßig den Cursor nur innerhalb eines Bereiches positionieren, in dem sich bereits Text oder andere Elemente befinden. Sie können also nicht an den unteren Fensterrand klicken und dort mit der Texteingabe beginnen. Jedoch können Sie in der Layoutansicht, die wir morgen besprechen, einen beliebigen Eingabebereich definieren, in den Sie dann Objekte einfügen. Das ist zwar nicht ganz dasselbe, als wenn man frei in die Seite klickt und losschreibt, kommt aber der Sache schon nahe.

Objekte bearbeiten Elemente, die Sie in der Dokumentansicht eingefügt haben, können problemlos gelöscht, ausgeschnitten, kopiert und wieder eingefügt werden – also ganz wie in Ihrer gewohnten Textverarbeitung. Um ein Objekt auszuwählen, klicken Sie es an. Um mehrere Objekte gleichzeitig auszuwählen, platzieren Sie den Cursor an den Anfang der Gruppe, die ausgewählt werden soll. Dann halten Sie die Shift-Taste gedrückt und klicken dorthin, wo die Auswahl enden soll. Werden einzelne Objekte ausgewählt, sind sie von einem dunklen Auswahlrahmen umgeben, eine Gruppe von mehreren ausgewählten Objekten liegt in einem dunklen Auswahlrechteck. Bestimmte Objekte wie z.B. Bilder oder Tabellen werden mit Höhen- und Breitenangaben versehen und können in ihrer Größe verändert werden. Werden diese Objekte ausgewählt, unterscheidet sich ihre Anzeige etwas von der anderer Objekte – skalierbare Objekte erkennt man an den Anfassern (kleine schwarze Quadrate innerhalb des Auswahlrahmens), mit deren Hilfe man das Objekt dehnen oder stauchen kann. Ist ein Objekt markiert, kann man es mit den Befehlen KOPIEREN, AUSSCHNEIDEN, EINund LÖSCHEN im Menü BEARBEITEN verschieben, duplizieren oder entfernen. Auch per Rückschritttaste lässt sich zur Not ein ausgewähltes Objekt entfernen. Im Menü BEARBEITEN finden sich noch zwei weitere Varianten der Befehle KOPIEREN bzw. EINFÜGEN: HTML KOPIEREN und HTML EINFÜGEN. Mit HTML KOPIEREN wird nur der Text innerhalb einer Auswahl kopiert, sämtliche HTML-Tags werden entfernt. Das ist äußerst praktisch, wenn man Text von einer Webseite in ein normales Textdokument kopieren möchte. In gleicher Weise können Sie mit HTML EINFÜGEN HTML-Code, den Sie kopiert haben, als Nur-Text in UltraDev einfügen. Wenn Sie jedoch in UltraDev ein Objekt wie z.B. eine Grafik oder eine Tabelle kopieren und dann als Text einfügen, werden alle HTML-Tags mit eingefügt. FÜGEN

UltraDev bietet verschiedene Shortcuts, die die Auswahl von Objekten wesentlich erleichtern. Um eine Zeile innerhalb eines Textes oder ein Objekt auszuwählen, genügt es, nahe dem linken Fensterrand vor das betreffende Objekt zu klicken. Der Cursor verwandelt sich in einen Pfeil, um anzuzeigen, dass Sie sich jetzt im Zeilenauswahl-Modus befinden. Wenn Sie klicken und gleichzeitig ziehen, können Sie mehrere Zeilen auf einmal auswählen.

37

Die Programmumgebung von UltraDev

Darüber hinaus gibt es noch zwei weitere recht bequeme Methoden, ein Objekt innerhalb der Hierarchie von HTML-Tags auszuwählen. Links unten in der Statuszeile des Dokumentfensters sehen Sie diese Hierarchie von Tags, die das Objekt umschließen, das Sie gerade bearbeiten. In Abb. 1.1 zeigt Ihnen ein Blick auf diese Tagliste, dass einer dieser Links gerade bearbeitet wird:

, wählen Sie die ganze Zeile aus, mit Klick auf

. Sie können nun direkt die Zelle auswählen, die den Link enthält, wenn Sie auf	in dieser Liste klicken. Sie können Ihre Auswahl beliebig verändern: Klicken Sie auf

die ganze Tabelle und mit Klick auf den ganzen HTML-Body. Das ist ein ebenso praktischer wie intuitiver Weg, um Objekte auszuwählen. Mit den Befehlen ÜBERGEORDNETES TAG AUSWÄHLEN und UNTERGEORDNETES OBJEKT im Menü BEARBEITEN können Sie ebenfalls sehr bequem von der Auswahl abhängige bzw. ihr übergeordnete Objekte auswählen. AUSWÄHLEN

Screenformate Wahrscheinlich ist Ihnen auch schon aufgefallen, dass Websites oft ohne Rücksicht auf die Bildschirmauflösung des Betrachters gestaltet werden. Die Bildschirmseiten scheinen der Länge und der Breite nach ins Endlose zu scrollen. UltraDev bietet eine einfache Möglichkeit, die Wirkung einer Webseite bei verschiedenen Auflösungen zu beurteilen. Sie müssen hierzu nur die Größe des Dokumentfensters anpassen. Die aktuelle Auflösung wird rechts unten in der Statusleiste des Fensters angezeigt. Abb. 1.1 zeigt z.B. ein Fenster mit einer Auflösung von 600 x 300 Pixel. Diese Auflösung stellt so etwas wie den kleinsten gemeinsamen Nenner für die Größe eines Browserfensters dar. Bei dieser Auflösung kann auch auf den kleinsten Monitoren die ganze Webseite ohne Scrollen betrachtet werden. Sie können verschiedene Vorschaugrößen wählen, indem Sie in das Feld mit der aktuellen Auflösung klicken und die Maustaste gedrückt lassen. Es öffnet sich ein Popup-Fenster, das Ihnen eine Liste der gebräuchlichsten Auflösungen, einschließlich WebTV, anbietet. Sie können diese Liste um weitere Formate ergänzen, wenn Sie die Voreinstellungen von UltraDev ändern. Wie das geht, lernen Sie im Laufe dieser Lektion. Haben Sie ein zusätzliches Screenformat definiert, wird dieses ebenfalls in der Statuszeile angezeigt. WebTV nicht außen vor lassen Sie können nie mit absoluter Gewissheit sagen, auf welcher Plattform und mit welcher Auflösung Ihr Zielpublikum Ihre Website betrachtet. Vor kurzem habe ich am Usability-Test einer Website teilgenommen, über die verschiedene hausgemachte Produkte vertrieben werden. Ein überraschend hoher Anteil der Site-Besucher (über 35 %) waren WebTV-Nutzer. Zum Glück wurde die Site mit Hinblick auf diese Benutzergruppe designt, sodass diese Gruppe sie ohne Einschränkungen genießen konnte.

Sie müssen sich dabei aber vor Augen halten, dass die gewählte Größe des Vorschaufensters nicht der tatsächlichen Auflösung entspricht, mit der die Seite dann ausgegeben wird.

38

Die Dokumentansicht

Es handelt sich hierbei nur um eine Möglichkeit, wie Sie die Wirkung Ihres Dokuments bei verschiedenen Auflösungen beurteilen können. Wenn Sie also eine Tabelle oder Grafik auf Ihrer Seite platzieren, die 800 Pixel breit ist, Ihr Screen aber nur auf eine Breite von 600 Pixel angelegt ist, wird diese Tabelle bzw. Grafik nicht automatisch auf die richtige Größe skaliert, damit Sie auf Ihre Seite passt. Achten Sie aber umgekehrt auch darauf, dass – wenn Sie für eine kleinere Auflösung arbeiten – auch Benutzer mit höheren Auflösungen ein ansprechendes Layout zu sehen bekommen.

Downloadzeiten und Dokumentgrößen Neben dem Feld, das die gewählte Auflösung anzeigt, finden sich auch Hinweise bezüglich Dokumentgröße und geschätzter Downloadzeit. Die meisten Webdesigner entwerfen ihre Sites mit Blick auf ein bestimmtes Zielpublikum – Online-Zugang über Modem oder Netzwerk, Browser der vierten Generation usw. Es ist sicher nicht das Ei des Kolumbus, schöne Webseiten zu erstellen, die dann 10 Minuten brauchen, bis sie geladen sind. Als Grundlage zur Schätzung der voraussichtlichen Downloadzeit wird eine Standardverbindung über ein 28.8-Modem angenommen. Sie können in den Voreinstellungen von UltraDev aber jederzeit eine andere Übertragungsgeschwindigkeit wählen. Wie das gemacht wird, erfahren Sie am Ende dieser Lektion.

Die Dokumentansicht anpassen Sie können das Dokumentfenster Ihren Bedürfnissen anpassen und sich so die Gestaltungsarbeit erleichtern. Im Menü ANSICHT können Sie die Symbolleiste ausblenden, die am oberen Rand des Dokumentfensters angezeigt wird. Sie ist zwar nützlich, wenn man den Titel des Dokumentes ändern oder schnell auf bestimmte Funktionen zugreifen möchte, allerdings beschneidet sie den ohnehin immer viel zu knappen Platz auf dem Monitor. Wenn Sie den HTML-Code, Ihr Design oder beides zugleich im Hauptfenster sehen möchten, können Sie über die entsprechenden Menüoptionen die gewünschte Darstellung auswählen. Zusätzlich können Sie sich noch ein Raster und/oder Lineale einblenden lassen.

Raster und Lineale Wählen Sie im Menü ANSICHT die Option RASTER > RASTER BEARBEITEN. Wie in Abb. 1.3 gezeigt, können Sie in diesem Fenster ein Raster einrichten und den Abstand der Zellen, Art und Farbe der Rasterlinien sowie die Optionen RASTER ZEIGEN und AM RASTER AUSRICHTEN wählen.

39

Die Programmumgebung von UltraDev

Abbildung 1.3: Mithilfe eines individuell eingerichteten Rasters können Sie sich die Gestaltung einer HTML-Seite erleichtern.

Auch Lineale sind eine wertvolle Positionierhilfe. Gehen Sie in das Menü ANSICHT > LINEALE > ZEIGEN. In diesem Untermenü können Sie auch die Maßeinheit auswählen, die die Lineale verwenden. Möchten Sie den Ursprung der Lineale versetzen, klicken Sie in die linke obere Ecke des Bildschirms und ziehen den Nullpunkt mit gedrückter Maustaste an seine neue Position. Mit der Option ANSICHT > LINEALE > URSPRUNG ZURÜCKSETZEN setzen Sie den Nullpunkt wieder auf die standardmäßige Position zurück.

Tracing-Bilder Tracing-Bilder sind ein weiteres höchst nützliches Feature, um die Dokumentansicht an Ihre gestalterischen Erfordernisse anzupassen. Mussten Sie sich bei der Realisierung einer Webseite schon einmal genau an eine vorgegebene Grafik halten, wissen Sie, wie schwer es ist, die einzelnen Bildelemente exakt so zu platzieren wie in der Originalgrafik. Hier bietet UltraDev mit der Möglichkeit, Tracing-Bilder in den Hintergrund des zu erstellenden Dokumentes zu legen, eine nützliche Arbeitserleichterung. Das Tracing-Bild liegt hinter der aktuellen Seite und kann als Blaupause verwendet werden, an der sich alle Elemente den Vorgaben des Originals entsprechend ausrichten lassen. Um Ihrem Dokument ein Tracing-Bild hinzuzufügen, gehen Sie in das Menü ANSICHT > TRACING-BILD > LADEN. Es öffnet sich ein Fenster, das Sie auffordert, eine Vorlage auszuwählen. Diese Vorlage wird dann an der linken oberen Ecke Ihres HTML-Dokuments ausgerichtet. Abb. 1.4 zeigt eine Webseite mit Tracing-Bild und aktiviertem Raster. Nun ist vielleicht die Position des Tracing-Bildes im Nullpunkt der Seite (linke obere Ecke) nicht die Stelle, wo Sie das Bild haben möchten. Um die Position des Tracing-Bildes zu verschieben, gehen Sie in das Menü ANSICHT > TRACING-BILD > POSITION EINSTELLEN und geben Sie die exakten Koordinaten ein oder verschieben Sie das Bild mit den Pfeiltasten. Sie können ein Tracing-Bild auch an einem Objekt im HTML-Dokument ausrichten (wenn Sie z.B. ein Tracing-Bild verwenden, um eine Tabelle zu gestalten). Gehen Sie zu diesem Zweck in das Menü ANSICHT > TRACING-BILD> AN AUSWAHL AUSRICHTEN. Sie können das Tracing-Bild jederzeit an seinen Ursprung zurückversetzen mit der Option ANSICHT > TRACING-BILD > POSITION ZURÜCKSETZEN.

40

Die Werkzeugpaletten

Abbildung 1.4: Das Tracing-Bild liegt im Hintergrund der aktuellen Webseite und dient dem Designer als Positionierhilfe.

Nun regt sich vielleicht bei dem einen oder anderen der leise Verdacht, ob dieses TracingBild nicht unter Umständen den Gestaltungsprozess eher blockiert, was natürlich nicht ausgeschlossen werden kann. Zum Glück haben die Entwickler bei Macromedia diesen Umstand bedacht und dieser Funktion einen Transparenzregler spendiert, mit dem Sie das Tracing-Bild so weit »absoften« können, dass es auf dem Monitor fast nicht mehr zu sehen ist. Setzt man die Sichtbarkeit nahe Null, dürfte das Tracing-Bild nicht mehr so dominant sein, dass es sich auf den Gestaltungsprozess störend auswirken könnte. Um die Transparenz zu regeln, gehen Sie in das Menü MODIFIZIEREN > SEITENEIGENSCHAFTEN. Stellen Sie den Regler für die Bildtransparenz auf einen Wert zwischen 100 % (voll sichtbar) und 0 % (unsichtbar). Um das Tracing-Bild schnell auszublenden, gehen Sie in das Menü ANSICHT > TRACING-BILD > ZEIGEN und wählen die Option ab.

1.4

Die Werkzeugpaletten

Wenn Sie das Menü FENSTER einmal durchgesehen haben, fühlten Sie sich vielleicht etwas erschlagen von den vielen Paletten, die dort aufgeführt werden. In den ersten Tagen werden wir uns auf die Objektpalette sowie den Eigenschafteninspektor konzentrieren. Mit ihrer Hilfe fügen Sie HTML-Elemente in ein Dokument ein und verändern mühelos deren Attribute, ohne auch nur eine einzige Zeile Code zu tippen.

41

Die Programmumgebung von UltraDev

Die HTML-Objektpalette Die Objektpalette ist die Mutter aller Paletten. Wenn Sie UltraDev zum ersten Mal öffnen, erscheint sie in der linken oberen Ecke des Fensters. Sie werden dieses Werkzeug oft verwenden, wenn Sie HTML-Seiten gestalten. Am Kopf dieser Palette sehen Sie ein kleines Popup-Menü, das verschiedene Optionen zu Auswahl anbietet. Was sich hinter diesen Optionen verbirgt, lesen Sie in der folgenden Übersicht: 쐽

ALLGEMEIN – Hierüber lassen sich all die Design-Elemente einfügen, die man am häufigsten braucht: Bilder, Tabellen, eingebettete Objekte und komplexe Elemente wie Navigationsleisten und Rollover-Bilder. Diese Palette wird standardmäßig angezeigt.

쐽

FORMULARE – Hier finden Sie Textfelder, Optionsschalter und alles andere, was man sonst noch braucht, um ein Formular zu erstellen.

쐽

FRAMES – Enthält vordefinierte Framesets und erspart Ihnen die Mühe, die gebräuchlichsten Frameteilungen per Hand zu erstellen.

쐽

HEAD – Im -Bereich stehen einige sehr wichtige Informationen über eine spezifische Webseite. Mithilfe dieser Palette erstellen Sie die Meta-Tags, die den Suchmaschinen erlauben, Ihre Website leichter zu finden und zu kategorisieren.

쐽

LIVE – UltraDev vereinfacht die Erstellung dynamischer Websites, da es für bestimmte Aufgaben fertige Musterseiten bereithält. Mit dieser Palette lassen sich die am häufigsten benötigten dynamischen Funktionen schnell und bequem einer statischen HTMLSeite hinzufügen.

쐽

SPEZIAL – Ermöglicht das schnelle Einfügen von Java-Applets, ActiveX-Plug-Ins und Browser-Plug-Ins.

쐽

UNSICHTBARE ELEMENTE – Enthält wie die Unterpalette HEAD Elemente, die nicht angezeigt werden, aber für die bequeme Wartung einer Site unentbehrlich sind: Kommentar einfügen, benannter Anker, Script einfügen usw.

쐽

ZEICHEN – Enthält Sonderzeichen und Symbole, die man in der Layoutansicht nicht direkt über die Tastatur eingeben kann.

Am unteren Ende der Objektpalette werden stets zwei Schaltflächen angezeigt, gleich welche Unterpalette Sie auswählen: der Layout- und der Ansichtsmodus. Mit diesen Buttons können Sie zwischen der Standardansicht und der neuen Layoutansicht hin- und herschalten, in der sich Elemente frei auf der Seite platzieren lassen. Sie werden diese Werkzeuge morgen genauer kennen lernen. Merken Sie sich diese Schaltflächen gut, denn Sie werden sie in Zukunft ständig brauchen. Die folgenden Seiten bieten einen – auch grafischen – Überblick über die einzelnen Unterpaletten der Objektpalette und ihrer Funktionen. Los geht's.

42

Die Werkzeugpaletten

Die Objektpalette lässt sich in vertikaler und horizontaler Richtung beliebig in der Größe verändern. Ist die Palettenfläche zu klein, um sämtliche Schaltflächen anzuzeigen, fügt UltraDev Scrollpfeile ein, um die verdeckten Schalter zugänglich zu machen. Über die Voreinstellungen, die wir am Ende des heutigen Tages noch kennen lernen, können Sie außerdem einstellen, ob diese Palette nur Buttons bzw. nur Text anzeigt oder beides zusammen.

Die Unterpalette ZEICHEN Um ein Sonderzeichen an der Einfügemarke einzusetzen, klicken Sie auf das entsprechende Zeichen in der Palette. Abb. 1.5 zeigt die Palette mit ihren Sonderzeichen.

Zeilenumbruch Copyright Marke Yen Anführungszeichen Links Langer Gedankenstrich

Geschütztes Leerzeichen Eingetragene Marke Pfund Eurozeichen Rechtes Anführungszeichen Anderes Zeichen

Abbildung 1.5: Klicken auf ein Sonderzeichen fügt es ins Dokument ein.

Wenn Sie die Return-Taste drücken ist das nicht das Gleiche, als wenn Sie einen Zeilenumbruch einfügen. Mit Return fügen Sie die Anweisung

 

in Ihren HTML-Code ein. Das entspricht dem Raum von zwei Zeilen und die einzelnen Elemente kommen nicht direkt untereinander zu stehen. Eine andere Möglichkeit, einen Zeilenumbruch einzufügen, ist, bei gedrückter Shift-Taste die Return-Taste zu drücken. Vielleicht möchten Sie auch nur zwei Zeilenumbrüche hintereinander verwenden, um eine Zeile mit doppeltem Abstand zu erhalten. Die Tags

sind etwas sauberer als das

-Tag + »non-breaking space«.

Die Unterpalette ALLGEMEIN Von allen Werkzeugen werden Sie diese Unterpalette der Objektpalette vermutlich am häufigsten verwenden. Sie stellt Ihnen die Grundelemente zur Verfügung, die Sie bei der Gestaltung der meisten Webseiten brauchen. Die Abb. 1.6 zeigt diesen Bereich der Palette mit ihren Funktionen.

43

Die Programmumgebung von UltraDev

Bild Tabelle Ebene Horizontale Linie Datum Fireworks-HTML Flash-Schaltfläche Shockwave

Rollover-Bild Tabellendaten Navigationsleiste E-Mail-Verknüpfung Server-Side Include (SSI) Flash Flash-Text Generator

Abbildung 1.6: Fügen Sie Tabellen, Bilder und andere Objekte mit einem einfachen Mausklick ein. 쐽

BILD EINFÜGEN – Mit dieser Schaltfläche fügen Sie Ihrem Dokument bequem Bilder hinzu.

쐽

ROLLOVER-BILD EINFÜGEN – Rollover-Bilder sind eigentlich kein HTML-Element, werden aber allgemein eingesetzt, um den aktiven bzw. inaktiven Zustand von Buttons zu markieren. Statt nun im Schweiße Ihres Angesichts den erforderlichen JavaScriptCode selbst zu schreiben, lehnen Sie sich entspannt zurück, klicken auf dieses Icon, weisen UltraDev an, welche Grafiken es für den jeweiligen Status wählen soll, und lassen das Programm den Rest erledigen.

쐽

TABELLE EINFÜGEN – Tabellen dienen im HTML-Code vielen Zwecken: dem exakten Ausrichten von Bildern und Text, dem Präsentieren von Daten, dem Anlegen von Navigationsleisten usw. Nur durch die Verwendung von Tabellen haben Sie überhaupt erst eine Chance, über das Aussehen Ihrer Webseiten eine gewisse Kontrolle auszuüben. Wenn Sie auf das Tabellen-Icon klicken, öffnet sich ein Fenster, in das Sie die Attribute für Ihre Tabelle (Größe, Breite, Höhe) eingeben. Danach wird die Tabelle mit Ihren Vorgaben automatisch ins Dokument eingesetzt.

쐽

TABELLENDATEN EINFÜGEN – Ein häufiger Verwendungszweck von Tabellen ist die Online-Präsentation von Datenmaterial wie z.B. Statistiken. Um die Erstellung solcher HTML-Dokumente zu vereinfachen, erlaubt UltraDev den direkten Import von Datenmaterial aus einer Textdatei ins Dokument. Wenn Sie dieses Icon anklicken, werden Sie aufgefordert, die entsprechende Datei auszuwählen. Die Tabelle wird dann automatisch nach Ihren Vorgaben erstellt.

쐽

EBENE ZEICHNEN – Ebenen oder Layer sind vielleicht das HTML-Element, das am meisten missverstanden wurde. Nichtsdestotrotz sind sie mehr als nützlich. Ursprünglich wurde das -Tag von Netscape eingeführt, um Elemente frei und einander überlappend auf der Seite platzieren zu können. Leider handelte es sich hierbei um einen Alleingang von Netscape. Später wurden das - und das -Tag in die HTML-Spezifikation eingeführt. In Verbindung mit Stylesheets ermöglichen diese

44

Die Werkzeugpaletten

beiden Tags die gleiche Funktionalität wie Layer und entsprechen den offiziellen HTML-Standards. Layer erlauben die pixelgenaue Positionierung von Elementen, d.h. die präzise Umsetzung von vorgegebenen Layouts. Leider werden Layer von älteren 3.0-Browsern nicht unterstützt. Um eine Ebene zu erzeugen, klicken Sie auf dieses Icon. Dann klicken Sie ins Dokumentfenster und ziehen mit gedrückter Maustaste ein Rechteck in der Größe und an der Position auf, an der Sie die Ebene haben möchten. 쐽

NAVIGATIONSLEISTE EINFÜGEN – Ein weiteres höchst nützliches Feature ist die automatische Erzeugung von Navigationsleisten. Wenn Sie dieses Icon anklicken, können Sie schnell und bequem ein Rollover-Menü erzeugen. Sie müssen dazu lediglich die aktiven und passiven Buttons auswählen. Mit einer Tabelle und der Funktion ROLLOVER-BILD EINFÜGEN würden Sie zwar dasselbe Ergebnis erreichen, doch spart Ihnen der andere Weg eine Menge Zeit, da hier alle Arbeitsschritte in einem leicht zu bedienenden Fenster zusammengefasst sind.

쐽

HORIZONTALE LINIE EINFÜGEN – Wird verwendet, um eine Seite in horizontale Abschnitte einzuteilen. Wenn Sie auf dieses Icon klicken, wird eine horizontale Linie in Ihr Dokument eingefügt.

쐽

E-MAIL-VERKNÜPFUNG EINFÜGEN – Fügt einen Link in ein Dokument ein, über den der Anwender eine E-Mail an eine bestimmte Adresse schicken kann. Dies geschieht mithilfe des -Tags. Allerdings funktioniert das nur, wenn der Browser den Versand von E-Mails beherrscht.

쐽

DATUM EINFÜGEN – Fügt das Datum und/oder die Uhrzeit in ein Dokument ein. Darüber hinaus können Sie wählen, ob das Datum beim Speichern des Dokuments automatisch aktualisiert werden soll.

쐽

SERVER-SIDE INCLUDE EINFÜGEN – Ob Sie Server-Side Includes verwenden können, hängt von der Serversoftware ab. Meist dienen sie dazu, ein mehrfach benötigtes HTML-Element, wie z.B. eine Menüleiste, in einer eigenen Datei abzulegen und diese Datei dann in alle Dokumente einzubetten, in denen dieses Element benötigt wird.

쐽

FIREWORKS-HTML EINFÜGEN – Fireworks ist ein Grafikprogramm von Macromedia zur Optimierung von Webgrafiken. Es erzeugt für bestimmte Funktionen automatisch den benötigten HTML-Code. Um den von Fireworks erzeugten Code in Ihr Dokument einzufügen, klicken Sie auf dieses Icon.

쐽

FLASH EINFÜGEN – Hiermit fügen Sie Flash-Animationen in Ihr Dokument ein. Um Flash-Animationen zu erstellen, brauchen Sie das Flash-Programm von Macromedia.

쐽

FLASH-SCHALTFLÄCHE EINFÜGEN – Hiermit fügen Sie einen Flash-animierten Button auf Ihrer Seite ein, den Sie beliebig beschriften können. Der Flash-Code für diesen Button wird automatisch erzeugt, Sie brauchen also hierfür das Programm nicht.

45

Die Programmumgebung von UltraDev

쐽

FLASH-TEXT EINFÜGEN – Fügt Flash-basierten Vektortext in Ihr Dokument ein. Im Gegensatz zu HTML-formatiertem Text können Sie jede beliebige Schriftart verwenden. Auch hier brauchen Sie Flash nicht.

쐽

SHOCKWAVE EINFÜGEN – Fügt Shockwave-Animationen in Ihr HTML-Dokument ein. Zur Erstellung von Shockwave-Files benötigen Sie Macromedia Director.

쐽

GENERATOR EINFÜGEN – Fügt Generator-Komponenten in Ihr HTML-Dokument ein. Generator ist ein High-End-Grafikprogramm von Macromedia, das die Generierung und Ausgabe von Grafiken auf Webseiten in Echtzeit erlaubt.

Die Unterpalette FORMULARE Formulare dienen der Kommunikation mit dem Anwender. Mehr zu diesem Thema erfahren Sie in der nächsten Woche. Die einzelnen Elemente eines Formulars ermöglichen dem Anwender die einfache Dateneingabe von vertrauten Oberflächen aus. Werfen wir nun einen Blick auf die Formularelemente, die uns UltraDev zur Verfügung stellt. Abb. 1.7 gibt Ihnen einen Überblick.

Formular Schaltfläche Optionsschalter Dateifeld Verstecktes Feld

Textfeld Kontrollkästchen Liste/Menü Bildfeld Sprungmenü

Abbildung 1.7: In dieser Palette sind alle Elemente zusammengefasst, die Sie für Ihre Formulare benötigen. 쐽

FORMULAR EINFÜGEN – Das wichtigste Tag zur Formularerstellung ist das -Tag selbst. Es teilt dem Server mit, was mit den Daten geschehen soll, die ihm vom Anwender übermittelt werden. Dieses Tag müssen Sie als Erstes setzen, wenn Sie ein Formular definieren. Auch wenn dieses Tag eigentlich ein unsichtbares Element ist (d.h., es wird nicht angezeigt, wenn die Seite im Browser dargestellt wird), wird es im Dokumentfenster von UltraDev durch ein rotes Viereck mit gestrichelter Kontur angezeigt. Wenn Sie Elemente in Ihr Formular einsetzen, passt sich diese Kontur automatisch an.

쐽

TEXTFELD EINFÜGEN – Fügt ein einzeiliges Textfeld ein. Dies sind die gebräuchlichsten Eingabefelder in HTML-Formularen. Sie können vorgeben, ob es sich um ein normales Textfeld handelt oder um ein Passwortfeld. In letzterem Fall werden die Eingaben des Anwenders verschlüsselt dargestellt.

46

Die Werkzeugpaletten

쐽

SCHALTFLÄCHE EINFÜGEN – Fügt Schaltflächen ein, mit denen Sie die Formulareingaben abschicken oder löschen können.

쐽

KONTROLLKÄSTCHEN EINFÜGEN – Kontrollkästchen werden hauptsächlich für Formulare genutzt, die eine Mehrfachauswahl an Optionen ermöglicht. In anderen Worten: »Wählen Sie alle zutreffenden Optionen«.

쐽

OPTIONSSCHALTER EINFÜGEN – Optionsschalter funktionieren ähnlich wie Kontrollkästchen (Checkboxen). Bei Optionsschaltern müssen Sie sich jedoch für eine bestimmte Auswahl in einer Liste von Optionen entscheiden. In anderen Worten: »Wählen Sie die Option, die am besten auf Sie zutrifft.«

쐽

LISTE/MENÜ EINFÜGEN – Diese Auswahllisten sind die heimlichen Favoriten der HTML-Codierung. Je nachdem, welche Einstellungen Sie in der Eigenschaftenpalette wählen, werden sie als Dropdown-Menü angezeigt, das die Auswahl eines einzigen Eintrags erlaubt, oder als scrollende Auswahlliste, in der Sie mehrere Einträge anklicken können.

쐽

DATEIFELD EINFÜGEN – Dateifelder werden nur sehr selten benötigt, für manche Anwendungen jedoch sind sie höchst nützlich. Dateifelder fügen eine Schaltfläche ins Formular ein, mit der der Anwender eine Datei auf seiner Festplatte auswählen kann. Diese Datei wird dann zusammen mit den anderen Daten übertragen, wenn das Formular abgeschickt wird. Ein Beispiel für einen möglichen Einsatz dieser Funktion wäre z.B. ein Grafikbüro, das seinen Kunden den Upload von Dateien ermöglicht, die für einen Gestaltungsauftrag benötigt werden.

쐽

BILDFELD EINFÜGEN – Bildfelder werden meistens dazu verwendet, eigene SendenButtons zu definieren, was recht gut funktioniert. Die Daten, die zusammen mit einem Bildfeld übertragen werden, sind jedoch etwas komplexer aufgebaut. Es wird nicht nur der Name des Bildes übertragen, sondern auch die Koordinaten, die mit der Maus angeklickt wurden. Diese Funktion wird oft bei Gewinnspielen verwendet, bei denen der Anwender die Stelle in einer Grafik anklicken muss, an der ein Preis versteckt ist.

쐽

VERSTECKTES FELD EINFÜGEN – In versteckten Feldern werden Daten gespeichert, die die Anwendung braucht, um bestimmte Eingaben zu verarbeiten, die für den Anwender aber nicht unbedingt von Interesse sind.

쐽

SPRUNGMENÜ EINFÜGEN – Das Sprungmenü ist eine JavaScript-gesteuerte Auswahlliste. Sprungmenüs sind nicht zur Verwendung in Formularen gedacht. Ihr eigentlicher Zweck ist es, dem Anwender ein bequemes Popup-Menü anzubieten, mit dem er bestimmte Seiten ansteuern kann. Sprungmenüs lassen sich auf jeder beliebigen Seite verwenden und erleichtern die Navigation innerhalb einer Site. Sie müssen kein -Tag definieren, wenn Sie Sprungmenüs einfügen, das erledigt das Programm automatisch.

47

Die Programmumgebung von UltraDev

Die Unterpalette FRAMES Framesets zu definieren ist eine eher lästige Übung, der man sich selten unterzieht. Wenn ich eine neue Website produziere, die Frames verwendet, benutze ich das -Tag nur einmal, wenn ich die Site anlege. Die Frames-Palette befreit uns von der Notwendigkeit, die Syntax für Framesets ständig präsent zu haben. Die gebräuchlichsten Frameteilungen werden hier schon fix und fertig angeboten. Um welche es sich dabei handelt, sehen Sie in Abb. 1.8.

Linker Frame Oberer Frame Frames links, links oben und oben Frame oben und links verschachteltt

Rechter Frame Unterer Frame Frame links und oben verschachtelt Mittig teilen

Abbildung1.8: Die gebräuchlichsten Framesets lassen sich mit dieser Palette schnell erstellen.

쐽

LINKEN FRAME EINFÜGEN – Erzeugt einen schmalen Frame in der linken Bildschirmhälfte, der die Menüsteuerung aufnimmt.

쐽

RECHTEN FRAME EINFÜGEN – Erzeugt einen kleinen Navigationsframe rechts, während der Inhalt in den linken Frame geschrieben wird.

쐽

OBEREN FRAME EINFÜGEN – Teilt einen horizontalen Navigationsframe am oberen Bildschirmrand ab.

쐽

UNTEREN FRAME EINFÜGEN – Teilt einen horizontalen Navigationsframe am unteren Bildschirmrand ab.

쐽

FRAMES LINKS, IN DER LINKEN OBEREN ECKE UND OBEN EINFÜGEN – Der Bildschirm wird in vier Bereiche geteilt. Die Navigationselemente können im oberen und linken Frame stehen, während der Inhalt in den unteren bzw. linken Frame eingefügt wird.

쐽

FRAME LINKS UND OBEN VERSCHACHTELT EINFÜGEN – Das Fenster wird in drei Bereiche aufgeteilt. Das Hauptmenü steht im linken Frame, der Inhalt im unteren rechten Frame, das Untermenü im oberen rechten Frame.

쐽

FRAME OBEN UND LINKS VERSCHACHTELT EINFÜGEN – Das Fenster wird ebenfalls in drei Bereiche aufgeteilt. Das Hauptmenü liegt im oberen Frame, während das Untermenü im linken unteren Frame und der Inhalt im rechten unteren Frame steht.

쐽

FRAME MITTIG TEILEN – Das Dokument wird in vier gleich große Bereiche aufgeteilt.

48

Die Werkzeugpaletten

Sie können natürlich diese vordefinierten Framesets nach Ihren Erfordernissen modifizieren, sobald Sie sie in Ihr Dokument eingefügt haben, doch dürften sie in den meisten Fällen dem, was Sie brauchen, ziemlich nahe kommen.

Die Unterpalette HEAD Die Funktionen, die hier angeboten werden, sind die wichtigsten Werkzeuge, um Ihre Website erfolgreich zu machen. Sie werden zwar in der Dokumentansicht nicht angezeigt, doch sind sie für alle Suchmaschinen lesbar. Wenn Sie keine Metatags im -Bereich definieren, kann das der Unterschied sein zwischen einer erfolgreichen Website, die von Ihren Kunden auch gefunden wird, und einer namenlosen Seite, die in den Suchmaschinen als 10.109. von 2.534.222 Seiten erscheint. Abb. 1.9 gibt einen Überblick über die verfügbaren Elemente.

Meta Beschreibung Basis

Schlüsselwörter Aktualisierung Link

Abbildung 1.9: Unsichtbar, aber von größter Wichtigkeit: die Head-Elemente. 쐽

META EINFÜGEN – Fügt ein Metatag ein, dem Sie den entsprechenden Inhalt zuweisen. Bestimmte Tags werden in UltraDev nicht angeboten, z.B. Content-Klassifizierung. Über diese Funktion können Sie Metatags jedoch selbst definieren und in Ihr Dokument einsetzen.

쐽

SCHLÜSSELWÖRTER EINFÜGEN – Mit dieser Funktion erstellen Sie eine Liste von Schlüsselwörtern, die Ihre Site näher beschreiben. Viele Suchmaschinen verwenden diese Schlüsselwörter, um Ihre Website zu klassifizieren. Viele Webdesigner verlassen sich darauf, dass die Suchmaschinen die einzelnen Seiten ihrer Website schon richtig auslesen und klassifizieren werden – obwohl die einzelnen Seiten die unterschiedlichsten Informationen enthalten. Durch die Definition von Schlüsselwörtern erreichen Sie, dass Ihre Seite in der richtigen Kategorie und unter den entscheidenden Stichwörtern aufgeführt wird.

49

Die Programmumgebung von UltraDev

쐽

BESCHREIBUNG EINFÜGEN – Hier beschreiben Sie das Thema Ihrer Website in einem Satz. Ähnlich wie die Schlüsselwörter wird diese Beschreibung von manchen Suchmaschinen benutzt, um eine zusammenfassende Information zu einer bestimmten URL anzuzeigen.

쐽

AKTUALISIERUNG EINFÜGEN – Diese Funktion fügt Ihrem Dokument die Anweisung »Aktualisieren« hinzu, die den Browser veranlasst, diese Seite nach einer bestimmten Zeit neu zu laden bzw. zu einer anderen URL zu gehen. Dieses Feature ist ganz nützlich, wenn Sie eine Begrüßungsseite erstellt haben, von der aus der Anwender zur Hauptseite umgeleitet wird, oder um auf einer dynamisch erzeugten Seite Informationen anzuzeigen, die automatisch aktualisiert werden.

쐽

BASIS EINFÜGEN – Definiert eine Basis-URL, auf die sich alle Links einer Site beziehen. Wenn Sie ein HTML-Dokument mit einer Liste von Links erstellen, die sich auf die URL http://mysite.com/ beziehen, können Sie diese Adresse als Basis angeben. Dann müssten Ihre Links nur auf die einzelnen Dokumente zeigen und nicht jeweils die ganze URL enthalten.

쐽

LINK EINFÜGEN – Setzt einen Link auf ein anderes Dokument. Meistens verwendet man diese Funktion dazu, um ein Dokument mit einem Stylesheet zu verknüpfen.

Die Unterpalette UNSICHTBARE ELEMENTE Funktionen, die Sie über diese Palette in ein Dokument einfügen, werden nicht angezeigt, erfüllen aber wichtige Funktionen. Diese Palette bietet nur einige wenige Standardfunktionen, wie Sie in Abb. 1.10 sehen können.

Benannter Autor Kommentar

Skript

Abbildung 1.10: Unsichtbare Elemente werden in der Dokumentansicht nicht angezeigt. 쐽

50

BENANNTEN ANKER EINFÜGEN – Wenn Sie einen benannten Anker in ein Dokument einfügen, wird auf eine bestimmte Stelle innerhalb dieses Dokumentes verlinkt. Sie kennen sicher diese langen Seiten, an deren Kopf ein Inhaltsverzeichnis steht, über das

Die Werkzeugpaletten

Sie die entsprechenden Stellen im Dokument anspringen können. Diese Sprungziele innerhalb eines Dokumentes definieren Sie über benannte Anker, die manchmal auch als Bookmark bezeichnet werden. 쐽

KOMMENTAR EINFÜGEN – Kommentare werden benutzt, um ein HTML-Dokument klar zu strukturieren und die einzelnen Bereiche wie Navigation, Inhalt, Links usw. voneinander abzugrenzen. Hierdurch wird die spätere Pflege und Aktualisierung einer Seite erleichtert, vor allem, wenn man keinen so komfortablen Editor wie UltraDev hat.

쐽

SKRIPT EINFÜGEN – Wenn Sie auf dieses Icon klicken, öffnet sich ein Fenster, in dem Sie zunächst die gewünschte Scriptsprache (JavaScript oder VBScript) auswählen und dann das Script in das darunter liegende Feld eingeben.

Die Unterpalette LIVE Da UltraDev ein Autorenprogramm zur Entwicklung dynamischer Webseiten ist, werden Sie vermutlich auch sehr oft mit dynamischen Websites zu tun haben. Statt nun jedes Mal eine dynamische Seite völlig neu zu entwerfen, können Sie die vordefinierten Funktionen, wie sie in Abb. 1.11 dargestellt sind, verwenden.

Master-Detailseitensatz Navigationsstatus für Datensatzgruppe Aktualisierungsformular für Datensätze

Navigationsleiste für Datensatzgruppe Einfügeformular für Datensätze

Abbildung 1.11: Mit den LiveObjekten ergänzen Sie Ihre Website um dynamische Funktionen, die mit HTML und JavaScript nicht möglich sind.

쐽

MASTER-DETAILSEITENSATZ EINFÜGEN – Viele dynamische Seiten bauen auf einer Masterseite auf, die die Datensätze einer Datenbank enthält, und einer Detailseite, die die Einzelheiten zu einem ausgewählten Datensatz anzeigt. Dieser Button erzeugt die erforderlichen Musterseiten.

쐽

NAVIGATIONSLEISTE FÜR DATENSATZGRUPPE EINFÜGEN – Durch eine Steuerleiste wird es möglich, eine Datenbank vorwärts und rückwärts zu durchblättern. Mit einem Klick auf dieses Icon fügen Sie eine solche Steuerleiste ein.

51

Die Programmumgebung von UltraDev

쐽

NAVIGATIONSSTATUS FÜR DATENSATZGRUPPE EINFÜGEN – In Verbindung mit der Steuerleiste zeigt der Navigationsstatus an, welchen von insgesamt wie vielen Datensätzen sich der Anwender gerade ansieht.

쐽

EINFÜGEFORMULAR FÜR DATENSÄTZE EINFÜGEN – Erstellt ein einfaches Formular, über das sich neue Datensätze in eine Datenbank eingeben lassen.

쐽

AKTUALISIERUNGSFORMULAR EINFÜGEN – Erstellt ein einfaches Formular, mit dem sich in der Datenbank enthaltene Datensätze aktualisieren lassen.

Die Unterpalette SPEZIAL Diese letzte Unterpalette fügt spezielle Objekte wie Java- oder ActiveX-Plug-Ins in das Dokument ein, die die Standardfunktionen des Browsers erweitern (siehe Abb. 1.12). Technisch gesehen gehören Flash und Shockwave eigentlich auch in diese Kategorie. Da es sich hierbei aber um Technologien aus eigenem Hause handelt, hat ihnen Macromedia einen etwas prominenteren Platz in der Unterpalette ALLGEMEIN zugedacht.

Applet ActiveX

Plug-In

Abbildung 1.12: Spezielle Objekte bereichern Websites um Funktionen, die mit HTML und JavaScript nicht zu erreichen sind. 쐽

APPLET EINFÜGEN – Applets sind eigenständige kleine Programme, die bestimmte Funktionen wie z.B. Berechnungen zur Verfügung stellen. Sie laufen unabhängig vom Betriebssystem in jedem Browser.

쐽

PLUG-IN EINFÜGEN – Ermöglicht die Installation spezieller Plug-Ins, die zur Anzeige bestimmter Daten benötigt werden.

쐽

ACTIVEX EINFÜGEN – Dasselbe Prinzip wie bei den Netscape-Plug-Ins, nur in diesem Fall zur Unterstützung des Internet Explorers.

52

Die Werkzeugpaletten

Der Eigenschafteninspektor Haben Sie ein Element in Ihre Webseite eingefügt, müssen Sie vielleicht bestimmte Attribute dieses Objekts nachträglich verändern. Statt nun für jeden Objekttyp eine eigene Palette zu programmieren, haben die Entwickler eine einzige schwebende Palette geschaffen, eben den Eigenschafteninspektor, der sozusagen alle Funktionen »unter einem Dach« vereint. Sie können jedes ausgewählte Objekt über den Eigenschafteninspektor bearbeiten, wobei sich seine Oberfläche je nach Objekttyp automatisch verändert. Abb. 1.13 zeigt, wie der Eigenschafteninspektor aussieht, wenn eine Tabelle ausgewählt wurde. Der Eigenschafteninspektor selbst bietet verschiedene Ansichtsmodi zur Auswahl, je nachdem, wie detailliert die Informationen sein sollen, die Sie zu einem Objekt benötigen. Dem HTML-Neuling genügen vielleicht ein paar Grundinformationen. Um sich nur die wichtigsten Daten anzeigen zu lassen, falten Sie den Inspektor zusammen. Hierzu klicken Sie auf den kleinen, nach oben zeigenden Pfeil rechts unten in der Palette. Zeigt der Pfeil nach unten, ist die Palette schon zusammengefaltet. Klicken Sie darauf, schalten Sie die Palette in den Expertenmodus um (siehe Abb. 1.13). In diesem Buch werden wir diese Palette meistens in ihrem aufgeklappten Zustand verwenden. Abbildung 1.13: Der Eigenschafteninspektor zeigt an, welche Eigenschaften des ausgewählten Objekts verändert werden können.

Sie haben auf die einzelnen Attribute eines Objekts auch über den Listenmodus des Eigenschafteninspektors Zugriff. Um in den Listenmodus umzuschalten, klicken Sie auf das untere Icon am linken Rand der Palette. In dieser Ansicht sehen Sie eine Liste mit den Attributen des ausgewählten Objekts. Diese Attribute können Sie verändern oder löschen bzw. neue hinzufügen. Wenn UltraDev ein seltenes HTML-Attribut nicht kennt, können Sie es hier direkt definieren. Abb. 1.14 zeigt den Eigenschafteninspektor im Listenmodus. Abbildung 1.14: Der Eigenschafteninspektor erlaubt auch direkten Zugriff auf die Attribute eines Tags.

53

Die Programmumgebung von UltraDev

Auch wenn Sie sich sicher sind, dass Sie Ihren HTML-Code niemals von Hand im Listenmodus ändern werden, sollten Sie sich doch mit dieser Ansicht der Palette vertraut machen, denn die Oberfläche zum Eingeben bzw. Ändern längerer Attributlisten ist im ganzen Programm ähnlich aufgebaut. Bereits vorhandene Elemente werden verändert, indem Sie auf das Feld klicken, in dem Sie einen Wert ändern möchten, und warten, bis die Einfügemarke erscheint. Möchten Sie einen Eintrag vollständig entfernen, wählen Sie die ganze Zeile aus und löschen sie durch Klick auf die Minus-Taste (
). Durch Klick auf die Plus-Taste () fügen Sie einen neuen Eintrag hinzu. Der Eigenschafteninspektor bietet noch zwei weitere nützliche Helferlein. Das erste ist das Hilfe-Icon rechts oben in der Palette. Ein Klick darauf öffnet die Online-Hilfe und zeigt Ihnen alle relevanten Informationen zu dem Objekt an, das Sie gerade bearbeiten. Das erspart Ihnen in vielen Fällen den Griff zum dicken HTML-Handbuch.

Der Quick Tag Editor Das zweite nützliche Helferlein ist in meinen Augen eines der nützlichsten Features in UltraDev überhaupt. Wenn Sie das Icon direkt unter dem Hilfe-Icon anklicken, öffnet sich der Quick Tag Editor. Der Quick Tag Editor ist nichts anderes als ein Popup-Fenster, das den HTML-Code des Tags anzeigt, das Sie gerade bearbeiten. Änderungen am HTMLCode können Sie direkt in dieses Fenster eingeben. Vielleicht macht diese Funktion auf den ersten Blick nicht viel her, aber wenn Sie einmal an einem ganz bestimmten Tag eine ganz bestimmte Änderung vornehmen wollen, werden Sie froh sein, wenn Sie sich nicht durch den ganzen HTML-Code scrollen oder eigens einen Editor öffnen müssen. Mit dem Quick Tag Editor können Sie sofort auf ein bestimmtes Tag zugreifen und es verändern. Wenn Sie in der Dokumentansicht arbeiten und ein Objekt ausgewählt haben, können Sie den Quick Tag Editor über das Menü MODIFIZIEREN > QUICK TAG EDITOR aufrufen. Das ermöglicht Ihnen den direkten Zugriff auf den HTML-Code auch ohne Eigenschafteninspektor. Mit der Tastenkombination Strg + T (Windows) bzw. Befehl + T (Mac) können Sie den Quick Tag Editor schnell aufrufen. Und weil diese Funktion so bequem ist, sollten Sie sich diesen Shortcut einprägen.

Sonstige Paletten und Fenster Die restlichen Paletten, die UltraDev verwendet, sind nicht minder wichtig, haben aber einen weit geringeren Funktionsumfang als die bisher besprochenen. Ihre Funktionen

54

Die Werkzeugpaletten

werden im Laufe der kommenden Lektionen an geeigneter Stelle ausführlich erklärt. Der folgende Überblick soll Ihnen einen ersten Eindruck vermitteln, welche Aufgaben diese Paletten erfüllen, die im Menü FENSTER versammelt sind. 쐽

LAUNCHER – Mit dem Launcher öffnen Sie bestimmte Fenster bzw. Paletten, ohne hierfür über die Menüleiste zu gehen oder auf ein bestimmtes Icon zu klicken. Welche Programmteile Sie über den Launcher starten können, legen Sie in den Voreinstellungen fest. Wie das geht, lernen Sie am Ende dieser Lektion.

쐽

DATENBINDUNGEN – Über diese Palette definieren und editieren Sie eine Datenbankverbindung. Diese Palette werden wir in der zweiten und dritten Woche ständig brauchen, wenn wir dynamische Websites erstellen.

쐽

SERVERVERHALTEN – Serververhalten sind ebenfalls nötig zur Erstellung dynamischer Websites. Sie steuern, was der Webserver mit bestimmten Daten tun soll.

쐽

DATEIEN DER SITE – Die Siteansicht gibt Ihnen die nötigen Werkzeuge in die Hand, um den Überblick über die Dateien Ihrer Seite zu behalten und ermöglicht den Abgleich der lokalen Dateien mit den Dateien auf dem Webserver.

쐽

SITEMAP – Die Sitemap gehört zwar zur Siteansicht, ist aber ein eigenständiges Werkzeug. Einer der schwierigen Punkte bei der Verwaltung und Pflege einer Website ist es, den Überblick über die Seiten und deren wechselseitige Verknüpfungen und Abhängigkeiten zu behalten. Anders ausgedrückt: Wo und auf welchem Weg findet der Anwender welche Informationen? Die von UltraDev erzeugte Sitemap ist hierfür ein gutes Hilfsmittel.

쐽

ELEMENTE – Elemente sind alle Bilder, Farben und sonstigen Objekte, die Sie auf Ihrer Website verwenden. Sie müssen die Elementepalette nicht von Hand anlegen – das erledigt UltraDev für Sie. Die Elementepalette ist ein ausgezeichnetes Werkzeug, um den Überblick über alle Objekte zu behalten, die Sie auf Ihrer Site verwenden.

쐽

VERHALTEN – Mit dieser Palette fügen Sie Objekten auf Ihrer Seite eine JavaScript-basierte Aktion hinzu. Die Verhaltensweisen werden automatisch erzeugt, Sie müssen also nicht JavaScript beherrschen.

쐽

CODEINSPEKTOR – Wenn Sie direkt auf den HTML-Code eines Dokumentes und eingebettetes JavaScript zugreifen möchten, rufen Sie dieses Fenster auf. Der Codeinspektor ist eigentlich überflüssig, da Sie im Dokumentfenster die Codeansicht einschalten können.

쐽

CSS-STILE – Cascading Style Sheets (CSS) geben Ihnen sehr präzise Kontrollmöglichkeiten über das Layout Ihrer Webseiten bis hinunter zur Schriftgröße. Diese Palette zeigt alle verwendeten Stile an und ermöglicht Ihnen die Zuweisung und Bearbeitung dieser Stile.

55

Die Programmumgebung von UltraDev

쐽

FRAMES – Wenn Sie Frames verwenden, sind Sie vielleicht ganz froh über diese Palette, die Ihnen die bequeme Erstellung und Bearbeitung von Frames ermöglicht.

쐽

VERLAUF – Wenn Sie schon mit Photoshop gearbeitet haben, wird Ihnen diese Palette gleich vertraut vorkommen. Die Verlaufspalette zeichnet alle Bearbeitungsschritte im aktuell geöffneten Dokument auf. Sie können zu jedem beliebigen Bearbeitungsstadium in der Verlaufspalette zurückgehen. Die Verlaufspalette zeichnet zwischen 2 und 99.999 Bearbeitungsschritte auf, die Standardeinstellung ist 50. Sie können diesen Wert in den Voreinstellungen ändern.

쐽

HTML-STILE – Leider funktionieren CSS-Stile erst ab 4.0-Browsern. Als Ersatz bietet UltraDev HTML-Stile an, die Ähnliches bezwecken. HTML-Stile sind nicht anderes als die bekannten HTML-Tags wie oder , nur lassen sich HTML-Stile einem markierten Textabschnitt »in einem Rutsch« zuweisen.

쐽

EBENEN – Ebenen oder Layer sind ein sehr mächtiges Werkzeug. Da sie sich aber überlagern und zudem noch ausgeblendet sein können, ist es manchmal schwierig, eine spezielle Ebene zur Bearbeitung auszuwählen. Die Ebenenpalette listet alle in einem Dokument vorhandenen Ebenen auf.

쐽

BIBLIOTHEK – In Bibliotheken können Sie beliebige Objekte, die Sie häufiger brauchen, ablegen und wieder verwenden. Wenn Sie ein in einer Bibliothek gespeichertes Element aktualisieren, z.B. ein Logo, wird es in allen Dokumenten, in denen es vorkommt, durch die neue Version ersetzt.

쐽

REFERENZ – Die Referenzpalette gibt sehr ausführlich Auskunft über CSS, HTML und JavaScript. Wenn Sie sich für die programmiertechnischen Hintergründe des automatisch generierten Codes interessieren, finden Sie hier alles Wissenswerte.

쐽

VORLAGEN – Vorlagen sind sehr hilfreich, wenn Websites von Teams erstellt und gepflegt werden. Vorlagen sind gewöhnliche HTML-Dokumente, bei denen jedoch bestimmte Bereiche gesperrt sind und somit nicht bearbeitet werden können. Die übrigen Bereiche können frei editiert werden. Mit der Vorlagenpalette verwalten Sie die verwendeten Vorlagen.

쐽

ZEITLEISTEN – Durch den Einsatz von Ebenen und JavaScript können Sie Objekte auf einer Webseite animieren. Mit der Zeitleistenpalette steuern Sie, wo sich ein Objekt zu einem bestimmten Zeitpunkt befindet.

Wenn Sie alle Fenster und Paletten, die Ihnen UltraDev anbietet, auf einmal öffnen, dann kann es etwas eng zugehen auf dem Monitor. In Abb. 1.15 habe ich mir diesen Spaß einmal erlaubt. Um hier Abhilfe zu schaffen, sollten Sie über das Menü FENSTER alle Paletten ausblenden, die Sie nicht benötigen, oder mit der Option FENSTER > FENSTER AUSBLENDEN alle Paletten auf einmal verbergen. Wenn Sie Sachen lieber aufräumen als sie unter den Teppich kehren, wählen Sie die Option FENSTER > FENSTER ANORDNEN. Das Programm versucht dann, die Paletten möglichst am Rand der Arbeitsfläche zu platzieren.

56

Direkter Zugriff auf den HTML-Code

Abbildung 1.15: Ehe man sich versieht, ist die Arbeitsfläche zugepflastert.

Eine weitere Möglichkeit, um für ein wenig Ordnung unter den Paletten zu sorgen, ist, sie aneinander anzudocken. Paletten mit Registern können Sie auch ineinander ziehen – aus zwei einzelnen Paletten wird eine einzige mit zwei Registern. Um sie wieder zu trennen, müssen Sie die Palette nur mit ihrem Register aus der anderen Palette ziehen und auf einer freien Stelle im Arbeitsbereich ablegen. Die Palette erscheint dann wieder als eigenes Fenster. Sie können die Voreinstellungen von UltraDev auch dahingehend verändern, dass einige (oder alle) Paletten von anderen Fenstern verdeckt werden können. Normalerweise schweben die Paletten über dem Arbeitsbereich und verdecken die übrigen Fenster. Die Anpassung der Voreinstellungen ist das Thema zum Abschluss des heutigen Tages.

1.5

Direkter Zugriff auf den HTML-Code

Irgendwann kommt der Zeitpunkt, an dem Sie direkt auf den HTML-Code zugreifen müssen, weil Sie mit der WYSIWYG-Ansicht nicht mehr weiterkommen. Manchmal geht es eben schneller, wenn man ein paar Tags von Hand korrigiert, als das Objekt auszuwählen, den Eigenschafteninspektor zu öffnen und zu überlegen, welche Attribute man korrigieren muss und diese Attribute dann schlussendlich zu ändern. Sie haben mehrere Möglichkeiten, die HTML-Ansicht aufzurufen: entweder über das Menü FENSTER oder Sie klicken auf das -Symbol rechts unten in der Statuszeile. Haben

57

Die Programmumgebung von UltraDev

Sie den Launcher geöffnet, können Sie die HTML-Quelle hierüber aufrufen. Der einfache und direkte Weg besteht darin, von der Entwurfs- in die Codeansicht bzw. in die Entwurfs- und Codeansicht umzuschalten, indem Sie eines der entsprechenden Icons in der Werkzeugleiste am oberen Fensterrand anklicken oder die entsprechende Option über das Menü ANSICHT auswählen. Die Entwurfs- und Codeansicht sehen Sie in Abb. 1.16. Befinden Sie sich in der Code- bzw. Entwurfs- und Codeansicht, können Sie mit dem dritten Icon von links in die Standard-Dokumentansicht umschalten.

Abbildung 1.16: In der Entwurfs- und Codeansicht könnten Sie entweder im Code-Fenster arbeiten oder in der grafischen Oberfläche.

Der integrierte HTML-Editor ist vermutlich das schwächste Glied in der Produktionsumgebung von UltraDev, dürfte aber trotzdem für die meisten Zwecke ausreichen. Der Editor ist eher rudimentär, bietet aber trotzdem ein paar ausgesprochene Profi-Features wie Syntax-Coloring oder automatische Einrückung. Im Menü BEARBEITEN gibt es ein paar spezielle Optionen zur Arbeit in der Codeansicht – CODE EINRÜCKEN/AUSRÜCKEN, um den Code auszurichten, oder geschwungene Klammern für JavaScript-Programmierung.

Auswahlen in die verschiedenen Ansichten übernehmen Wenn Sie ein HTML-Dokument in der Code- oder in der Entwurfsansicht bearbeiten, können Sie entweder den Code oder die Objekte selbst auswählen. Wechseln Sie zwischen den Ansichten, ist das ausgewählte Objekt auch in der anderen Ansicht ausgewählt. Wenn Sie z.B. in der Entwurfsansicht eine Tabelle anklicken, sind in der Codeansicht die zugehörigen

...-Tags und alles, was dazwischen steht, ebenfalls ausgewählt.

58

Direkter Zugriff auf den HTML-Code

Auf sehr komplexen Seiten ist das eine große Hilfe, um einen Codeabschnitt schnell zu finden. Wenn Sie Ihren HTML-Code verändern, wird automatisch auch die Entwurfsansicht aktualisiert und umgekehrt. Wenn die Ansichten nicht mehr zusammenstimmen, können Sie durch Klicken auf die kreisförmigen Pfeiltasten in der Werkzeugleiste das Programm zwingen, die Seite neu zu laden. Wenn Sie den Codeinspektor verwenden, um HTML-Code zu bearbeiten, dann müssen Sie Vorsicht walten lassen. Der Codeinspektor kann in zwei verschieden Modi angezeigt werden: geöffnet und aktiv bzw. geöffnet und nicht aktiv. Wenn Sie bei geöffnetem Codeinspektor in die Entwurfsansicht klicken, ist der Codeinspektor nicht mehr aktiv. Wenn Sie an den Standardeinstellungen nichts geändert haben, liegt das HTML-Fenster noch immer im Vordergrund, ist aber nicht mehr aktiv (sein Hintergrund wird grau dargestellt). Alles, was Sie nun eingeben, geben Sie in der Entwurfsansicht ein und nicht, wie man vermuten würde, im HTML-Fenster. Sie haben vielleicht den Eindruck, im Sourcecode zu arbeiten, was aber nicht zutrifft. Wenn Sie auf Return drücken, erscheint die Eingabe

 

, statt dass der Cursor wie erhofft einfach eine Zeile nach unten wandert. Ich kann nur raten, entweder die Voreinstellungen so zu verändern, dass der Codeinspektor nicht über allen Fenstern schwebt, oder die Möglichkeiten zur Codeeingabe in der Entwurfsansicht zu nutzen. Es gibt eigentlich überhaupt keinen Grund, den Codeinspektor zu verwenden, wenn Sie die Entwurfs- und die Codeansicht gleichzeitig geöffnet haben.

Codeansichtsoptionen Die einzelnen Zeilen im HTML-Code lassen sich mit Zeilennummern versehen, wenn Sie die entsprechende Option anwählen. Zeilennummern sind sehr nützlich, wenn es an die Fehlersuche im Sourcecode von dynamischen Webseiten geht. Bei der Erstellung von Standard-HTML-Seiten werden Sie diese Option vermutlich weniger benötigen. Die Länge der Zeilen lässt sich an die Fensterbreite anpassen, wenn Sie die Option UMBRUCH anwählen. Zwar lässt sich der Aufbau eines HTML-Dokuments leichter nachvollziehen, wenn die Zeilen nicht umbrechen, doch müssen Sie dann des Öfteren horizontal scrollen, um das gesuchte Tag zu finden. Im selben Menü können Sie auch AUTOMATISCHER EINZUG, UNGÜLTIGEN HTMLCODE HERVORHEBEN und SYNTAXFARBCODIERUNG wählen.

59

Die Programmumgebung von UltraDev

Informationen zu HTML-Tags anzeigen Um vom Editor aus auf die umfangreiche HTML-Referenz von UltraDev zuzugreifen, genügt es, das Tag auszuwählen, zu dem sich Sie nähere Informationen anzeigen lassen möchten, und den -Button in der Werkzeugleiste anzuklicken. Es öffnet sich ein Fenster, das Ihnen alle möglichen Attribute eines bestimmten Tags anzeigt. Das ist eine fantastische Möglichkeit, Ihrem HTML-Code von Hand den letzten Schliff zu geben.

Suchfunktionen Wenn Sie im HTML-Code ein bestimmtes Tag oder eine bestimmte Textstelle suchen, werden Ihnen die eingebauten Suchen- bzw. Ersetzen-Funktionen wertvolle Dienste leisten. Die Suchen- und Ersetzen-Funktion ist vielfältig konfigurierbar und ermöglicht es, auch sehr komplexe Strukturen im HTML-Code zu finden. Um die Suchfunktion in der Codeansicht aufzurufen, klicken Sie auf das Pfeil-Icon rechts oben in der Palette. In der Dokumentansicht rufen Sie die Suchfunktionen über das Menü BEARBEITEN auf. Folgende Optionen stehen zur Auswahl: 쐽

SUCHEN UND ERSETZEN – Sucht und ersetzt Text oder Tags in einem HTML-Dokument. Diese Funktion kann auch zur Nur-Suche ohne Ersetzen verwendet werden.

쐽

WEITERSUCHEN – Findet das nächste Auftreten des gesuchten Objekts und hebt es im HTML-Code farbig hervor.

Schauen wir uns das Dialogfenster SUCHEN UND ERSETZEN jetzt einmal etwas genauer an. Abb. 1.17 zeigt es im ausgeklappten Zustand.

Abbildung 1.17: Im Dialogfenster Suchen und ersetzen können Sie eine große Anzahl von Suchkriterien definieren.

Zur Veranschaulichung habe ich eine Site nach allen -Tags durchsuchen lassen, in denen das Attribut bgcolor fehlt. Das Feld im unteren Teil des Fensters listet alle Tags, auf

60

Direkter Zugriff auf den HTML-Code

die die Suchkriterien zutreffen, nach Dateien geordnet auf. Dieses Feld wird normalerweise nicht angezeigt, Sie können es aber mit dem kleinen Pfeil rechts unten auf- bzw. zuklappen. Die Suchen/Ersetzen-Funktion erlaubt viele individuelle Einstellungen. So können Sie z.B. auch nach Strukturen innerhalb des HTML-Codes suchen lassen und nicht nur nach genau vorgegebenen Wörtern oder Tags. Lernen Sie nun, wie Sie die Suchen/ErsetzenFunktion individuell konfigurieren.

Der Suchbereich In Popup-Menü SUCHEN IN wählen Sie aus, welche Dateien durchsucht werden sollen. Sie können das gerade geöffnete Dokument durchsuchen lassen, die aktuelle Site, bestimmte Dokumente einer Site oder den Inhalt eines Ordners. Die Möglichkeit, in einem Arbeitsgang Hunderte von Dateien zu aktualisieren, erlaubt es, Fehler schnell und bequem zu korrigieren. Ohne diese Funktion würden sich solche Änderungen schnell zum Albtraum auswachsen. Gibt es z.B. auf Ihrer Website sehr viele Links, die auf eine externe Adresse zeigen und quer über alle Seiten verstreut sind, wären Sie eine halbe Ewigkeit beschäftigt, diese Links zu aktualisieren, wenn sich der Name der Domain ändert. Mit einer richtig definierten Suchen- und Ersetzen-Abfrage ist dieses Problem im Handumdrehen gelöst.

Suchkriterien Als Nächstes müssen Sie einstellen, wonach überhaupt gesucht werden soll. Das geschieht mithilfe des Drop-Down-Menüs SUCHEN NACH. Sie haben vier Optionen zur Auswahl: 쐽

TEXT – Die Textsuche durchsucht den reinen Text innerhalb eines Dokuments – nicht den Text innerhalb von Tags.

쐽

QUELLCODE – Diese Suchfunktion ist das Gegenstück zur Textsuche und durchsucht nur HTML-Tags.

쐽

TEXT (ERWEITERT) – Die erweiterte Textsuche ermöglicht die Suche nach Text innerhalb und außerhalb von Tags. Mit den Plus- bzw. Minus-Schaltern fügen Sie Suchkriterien Ihrer Abfrage hinzu bzw. schließen sie aus.

쐽

SPEZIFISCHES TAG – Funktioniert ähnlich der erweiterten Textsuche, ist aber auf Tags beschränkt.

61

Die Programmumgebung von UltraDev

Suche starten Sobald Sie Ihre Suchabfrage definiert haben, können Sie die Suche starten, indem Sie auf die Buttons WEITERSUCHEN oder ALLE SUCHEN klicken. Wenn Sie ein bestimmtes Attribut nicht nur suchen, sondern auch ersetzen wollen, geben Sie den entsprechenden Wert in das Feld ERSETZEN DURCH ein und klicken auf einen der Buttons ERSETZEN bzw. ALLE ERSETZEN. Die meisten Suchoptionen bietet das Feld ERSETZEN DURCH, in das Sie Text oder bestimmte Tags eingeben können. Bei der Tag-Suche können Sie angeben, welches Attribut geändert werden soll. Auf diesem Weg können Sie z.B. problemlos die Werte von Attributen wie bgcolor, width oder height global ändern.

Suche modifizieren Es gibt einige Einstellungen, mit denen Sie Ihr Suchergebnis wirksam beeinflussen können: 쐽

GROSS-/KLEINSCHREIBUNG BEACHTEN – Wenn Sie diese Option auswählen, wird genau zwischen Groß- und Kleinschreibung unterschieden. Es werden also nur Textstrings gefunden, die genau Ihrer Vorgabe entsprechen.

쐽

UNTERSCHIEDE BEI LEERRAUM IGNORIEREN – Diese Funktion bewirkt, dass alle nicht druckbaren Zeichen als ein einziges Leerzeichen interpretiert werden. Wenn Sie diese Option aktivieren, entspricht dieses Wort zwar der Zeichenfolge dieses Wort, nicht jedoch der Zeichenfolge diesesWort.

쐽

REGULÄRE AUSDRÜCKE VERWENDEN – Reguläre Ausdrücke erlauben es, nach bestimmten Strukturen zu suchen und nicht nur nach exakten Wörtern oder Tags. Hierzu muss ich etwas weiter ausholen.

Die mächtigste Suchfunktion ist die, die die Suche nach bestimmten Strukturen, nach bestimmten Zeichenmustern erlaubt, und nicht nur nach genau vorgegebenen Zeichen. Wenn Sie z.B. ein Dokument auf alle Strings durchsuchen möchten, bei denen es sich um eine Telefonnummer handeln könnte, werden Sie mit der üblichen Methode der Textsuche nur Erfolg haben, wenn Sie jede mögliche Kombination durchprobieren. Hier führt nur die Suche über reguläre Ausdrücke zum Ziel. Nehmen wir an, die fraglichen Telefonnummern sind nach folgendem Muster aufgebaut: ###-###-#### (ein Dreierblock, nochmal ein Dreierblock und ein Viererblock). Nun definieren wir einen regulären Ausdruck, der alle möglichen Zahlenkombinationen findet: \d{3}-\d{3}-\d{4}. Das sieht komplizierter aus, als es in Wirklichkeit ist. In der nachfolgenden Übersicht werden alle zur Verfügung stehenden regulären Ausdrücke erklärt. Mithilfe dieser Ausdrücke können Sie Suchabfragen definieren, die alle Arten von Strings abfragen können.

62

Direkter Zugriff auf den HTML-Code

쐽

\w – Findet alle alphanumerischen Zeichen. \w\w\w findet alle dreistelligen Strings,

die Zahlen oder Buchstaben in beliebiger Kombination enthalten. Um alles zu finden, was kein alphanumerisches Zeichen ist, geben Sie \W ein. 쐽

\d – Findet jede beliebige Zahl. \d\d\d-\d\d\d-\d\d\d\d\ ist eine andere Schreibweise für unsere obige Suchabfrage einer Telefonnummer. Ähnlich wie beim vorigen Ausdruck findet \D alles, was keine Zahl ist.

쐽

. – Findet ein einzelnes Zeichen mit Ausnahme eines Zeilenvorschubs. .ar entspricht »tar« und »rar« im Satz »Ein Star ist rar«.

쐽

\s – Ein beliebiges, einzelnes, nicht druckbares Zeichen, beispielsweise Leerzeichen, Tabulator, Formularvorschub oder Zeilenvorschub. \sbuchen entspricht »buchen« in »jetzt buchen«, findet jedoch keine Entsprechung in »verbuchen«. Um alles zu finden, was kein nicht druckbares Zeichen ist, geben Sie \S ein.

쐽

\t – Findet einen Tabulator. Feld1\tFeld2 liefert das Wort »Feld1«, gefolgt von einem Tab und dem Wort »Feld2«.

쐽

\r\n\f – Findet Zeilenumbruch, Zeilenvorschub und Formularvorschub. Je nach

Plattform, auf der Sie ein HTML-Dokument erstellt haben, müssen Sie einen oder mehrere dieser Ausdrücke verwenden. 쐽

a|b – Findet entweder den linken oder den rechten Ausdruck. links|rechts findet entweder »links« oder »rechts«.

쐽

[xyz] – Findet jedes Zeichen innerhalb der eckigen Klammer. [012345] liefert alle Ziffern zwischen 0 und 5. Um ein Zeichen aus der Suchabfrage auszuschließen, setzen Sie mit einem vorangestellten ^ die Suchabfrage negativ. ^[012345] liefert sämtliche Ziffern, die nicht zwischen 0 und 5 liegen.

쐽

- Liefert das vorangestellte Zeichen 0 Mal oder öfter. So liefert die Abfrage test\d* den String »test«, gefolgt von beliebig vielen Ziffern bzw. keinen, wenn keine vorhanden sind.

쐽

+ – Liefert das vorangestellte Zeichen mindestens einmal. test\d+ liefert den String »test«, gefolgt von mindestens einer Ziffer.

쐽

? – Liefert das vorangestellte Zeichen höchstens einmal. bl?au liefert »blau« in »tief-

blau« und »bau« in »vorbauen«. 쐽

{x} – Liefert das vorangestellte Zeichen x-mal. In unserem obigen Beispiel mit der Telefonnummer haben wir diesen Ausdruck bereits verwendet: \d{3}-\d{3}-\d{4}.

쐽

{x,y} – Das vorangestellte Zeichen kommt mindestens x-mal und höchstens y-mal vor. \d{5,10} liefert zwischen 5 und 10 Ziffern.

쐽

^ – Findet den Anfang einer Zeile. ^Zeile 1 findet den String »Zeile 1« nur, wenn er

am Anfang einer Zeile steht.

63

Die Programmumgebung von UltraDev

쐽

$ – Findet das Ende einer Zeile. 1$ findet den String »Zeile 1« nur, wenn er am Zeile-

nende steht. 쐽

\b – Findet Wortgrenzen. \bCreme findet das Wort »Creme«, aber nicht »Zahncreme«. Umgekehrt findet \B alle Stellen, die keine Wortgrenze darstellen.

Mithilfe regulärer Ausdrücke können Sie Suchmuster definieren, die in einem Durchgang mehrere passende Objekte auf einmal finden. Das ist weit effizienter, als für jeden speziellen Fall eine eigene Suche durchzuführen. Wenn Sie eine komplizierte Suchabfrage definiert haben, dann werden Sie sie nicht noch einmal eintippen wollen, wenn Sie sie das nächste Mal brauchen. Sie können Ihre Abfrage speichern, indem Sie im Dialogfenster ERSETZEN auf das Disketten-Icon klicken. Gespeicherte Abfragen laden Sie durch Klick auf das Ordnersymbol. Sie können Suchabfragen in jeder Ansicht durchführen, nicht nur in der Codeansicht. Sie öffnen das Suchfenster über das Menü BEARBEITEN > ERSETZEN.

Bearbeiten mit externem Editor Im Menü BEARBEITEN gibt es eine letzte Schaltfläche: BEARBEITEN MIT EXTERNEM EDITOR. Hiermit rufen Sie einen eingebundenen Editor auf, wenn die Fähigkeiten des eingebauten HTML-Editors nicht mehr ausreichen. Obwohl es wünschenswert ist, wenn man sämtliche Programmier- und Gestaltungsarbeit unter einer Oberfläche verrichten kann, sind die spezialisierten Funktionen eines reinen Texteditors manchmal recht nützlich. UltraDev liefert HomeSite für Windows und BBEdit Lite für Mac mit aus. In den Voreinstellungen von UltraDev können Sie die Standardeinstellungen der Editoren ändern und sogar mehrere externe Editoren einbinden.

1.6

Die Voreinstellungen von UltraDev anpassen

Unser erster Arbeitstag endet mit einer Besprechung der Voreinstellungen von UltraDev. Bevor Sie mit der Arbeit mit UltraDev so richtig loslegen, werden Sie vielleicht die eine oder andere standardmäßige Voreinstellung Ihren Erfordernissen anpassen wollen. So können Sie z.B. regeln, ob schwebende Fenster immer im Vordergrund angezeigt werden oder nicht. Bei kleineren Monitoren ist das durchaus sinnvoll, denn sonst können Ihnen die zahlreichen Paletten schnell die Sicht aufs Dokument verbauen. Gehen Sie nun in das Menü BEARBEITEN > VOREINSTELLUNGEN und lassen Sie uns das Voreinstellungsfenster näher unter die Lupe nehmen. Abb. 1.18 zeigt das Fenster mit den standardmäßigen Voreinstellungen.

64

Die Voreinstellungen von UltraDev anpassen

Abbildung 1.18: Über das Dialogfenster Voreinstellungen haben Sie Zugriff auf zahlreiche Programmoptionen.

Insgesamt werden 16 Kategorien geboten, über die Sie das Programm an Ihre Bedürfnisse anpassen können. Es folgt eine Übersicht, welche Einstellungen Sie in den einzelnen Kategorien tätigen können: 쐽

ALLGEMEIN – Hier wählen Sie das Wörterbuch, das Aussehen der Paletten sowie die Optionen zum Öffnen und Speichern von Dateien. Möchten Sie z.B., dass die Objektpalette neben den Icons auch eine Beschriftung anzeigt, dann stellen Sie das hier ein. Hier legen Sie auch die Anzahl der Arbeitsschritte fest, die in der Verlaufspalette gespeichert werden.

쐽

CODEFORMAT – Hier bestimmten Sie, in welcher Form der automatisch generierte HTML-Code geschrieben wird. Ferner können Sie die Codierung von Zeilenumbrüchen festlegen. Wenn Sie z.B. mit einem Mac arbeiten, wählen Sie die Codierung, die auch von Windows korrekt dargestellt werden kann und umgekehrt. Hier regeln Sie, ob Tags und ihre Attribute mit Klein- oder Großbuchstaben geschrieben werden und ob die Schreibweise der Tags beim Einfügen von fremdem Code an die eigenen Voreinstellungen angepasst wird oder nicht. Es ist ratsam, diese Option zu aktivieren, da hierdurch der Code übersichtlicher und besser lesbar wird.

쐽

CODEUMSCHREIBUNG – UltraDev versucht, fehlerhaften HTML-Code beim Importieren zu korrigieren. Sie können das Programm anweisen, importierten Code nicht anzutasten, indem Sie alle Optionen zum Codeumschreiben abwählen. Ich schreibe öfter Dateien, die innerhalb des HTML-Codes Serverskripte enthalten, also kein reines HTML sind. Öffne ich diese Dateien in UltraDev, versucht das Programm, diesen falschen Code zu korrigieren mit dem Ergebnis, dass die Anwendung nicht mehr funk-

65

Die Programmumgebung von UltraDev

tioniert. Aus diesem Grund rate ich dazu, alle Optionen zum Umschreiben von HTML-Code zu deaktivieren. 쐽

CODIERUNGSFARBEN – In UltraDev können Sie bestimmen, ob und mit welchen Farben die einzelnen HTML-Tags ausgezeichnet werden. In der Standardeinstellung sind nur einige wenige Tags definiert – Sie können aber speziellen Tags eigene Farben zuweisen.

쐽

CSS-STILE – Hier legen Sie fest, wie UltraDev CSS-Stile schreibt. Sie können statt der üblichen Schreibweise Kurzschrift verwenden. Die Kurzschrift-Schreibweise ist zwar bequemer zu lesen, wird aber nicht von allen Browsern verstanden. Daher bringt es nicht viel, diese Voreinstellungen zu ändern.

쐽

DATEITYPEN/EDITOREN – Bestimmt, wie und mit welchen externen Texteditoren UltraDev zusammenarbeitet. Sie können darüber hinaus für die einzelnen Dateitypen wie GIF, JPEG oder andere Formate, spezielle Editoren definieren.

쐽

EBENEN – Wenn Sie mit Ebenen arbeiten, möchten Sie Ihnen vielleicht gewisse Standardattribute zuweisen. Die Voreinstellungen regeln, mit welchen Standardwerten eine Ebene erzeugt wird. Wenn Sie die standardmäßige Hintergrundfarbe, Breite oder Höhe ändern wollen, sind Sie hier an der richtigen Adresse. Im Normalfall würde ich Ihnen aber raten, die Standardeinstellungen unverändert zu lassen.

쐽

FENSTER – Sie können festlegen, ob sich schwebende Fenster immer im Vordergrund befinden sollen oder sich mehr wie »normale« Fenster benehmen. Hier bestimmen Sie auch, welche Funktionen und Programmteile über den Launcher aufgerufen werden können. Über den Launcher haben Sie schnell und bequem Zugriff auf die am meisten benötigten Programmteile.

쐽

LAYOUTANSICHT – Hier stellen Sie ein, ob UltraDev beim Erstellen im freien Layoutmodus Platzhalter einfügen soll oder nicht. Sie können auch festlegen, wie die Layouttabellen auf dem Bildschirm dargestellt werden. Näheres zum Layoutmodus erfahren Sie morgen.

쐽

MARKIERUNG – Markierungen dienen dazu, die editierbaren von den nicht-editierbaren Bereichen in Vorlagen zu unterscheiden. Hier wählen Sie die Farben aus, mit denen das Programm diese Bereiche kennzeichnen soll.

쐽

QUICK TAG EDITOR – Ein paar Optionen, um den Quick Tag Editor Ihren Erfordernissen anzupassen.

쐽

SCHRIFTEN/KODIERUNG – Diese Einstellungen ähneln den Schrifteinstellungen der Standardbrowser. Hier legen Sie auch die Defaultschriften für die Dokumentansicht und die HTML-Quelle fest.

쐽

SITE – Regelt die Verbindungsmodalitäten zu Ihrem Produktionsserver und den Anzeigemodus der Dateien. Wenn Sie keine FTP-Verbindung eingerichtet haben, können Sie hier keine Einstellungen vornehmen.

66

Zusammenfassung

쐽

STATUSLEISTE – Hier können Sie neue Bildschirmauflösungen einrichten und andere Verbindungsgeschwindigkeiten wählen, die als Grundlage zur Ermittlung der geschätzten Downloadzeit dienen. Sie können auch wählen, ob Sie sich einen MiniLauncher unten rechts in der Statuszeile anzeigen lassen.

쐽

UNSICHTBARE ELEMENTE – Wenn Sie unsichtbare Elemente in ein HTML-Dokument einfügen, zeigt UltraDev an dieser Stelle ein Icon in der Dokumentansicht. Da diese Icons manchmal etwas störend sein können, haben Sie hier die Option, ob diese Icons angezeigt werden sollen oder nicht.

쐽

VORSCHAU IN BROWSER – Hier konfigurieren Sie, welche Browser zur Vorschau Ihrer Seiten aufgerufen werden. Sie können die Liste im Browserfeld um weitere Browser ergänzen und ihnen Tastaturkürzel zuweisen, um sie mit einem Knopfdruck zu öffnen.

Wenn Sie gern mehr über die einzelnen Optionen in den Voreinstellungen wissen möchten, dann klicken Sie einfach auf den Hilfe-Button. Alle Optionen sind in der Online-Hilfe sehr gut dokumentiert. Klicken Sie sich in einer ruhigen Stunde einmal durch die verschieden Hilfeseiten. Sie werden so Manches entdecken, was das Leben leichter macht.

1.7

Zusammenfassung

Im Laufe des heutigen Tages sollten Sie mit der Oberfläche von UltraDev vertraut geworden sein. Wenn Sie sich noch nicht so ganz zurecht finden, erforschen Sie noch einmal die verschiedenen Fenster und Paletten. An den kommenden Tagen werden wir »richtige« Webseiten anlegen. Dann werden Sie schnell mit den einzelnen Werkzeugen vertraut werden. Lassen Sie sich nicht einschüchtern von der Oberfläche des Programms. Es bietet eine Menge mächtiger Werkzeuge und es dauert eine gewisse Zeit, bis man sie meistert. Selbst heute noch muss ich manchmal noch alle Menüs durchsuchen, um eine bestimmte Funktion zu finden.

1.8 F

Fragen und Antworten

Wir haben UltraDev bei uns im Büro auf einem Rechner installiert. Die einzelnen Optionen sehen aber ganz anderes aus als im Buch abgebildet. Woran liegt das? A

UltraDev ist sehr flexibel, was die Erweiterung und Anpassung an den eigenen Arbeitsstil angeht. Wenn Sie mit einer Installation arbeiten, an der viele Einstellungen verändert worden sind, ist es gut möglich, dass die aktuelle Oberfläche nur noch wenig Ähnlichkeit mit der Standardkonfiguration hat. Um mit der Standardkonfiguration arbeiten zu können, müssten Sie das Programm neu installieren.

67

Die Programmumgebung von UltraDev

F

Ich vergesse immer, wozu die einzelnen Icons der Objektpalette dienen, aber die Tooltipps nerven mich. Gibt es keine andere Möglichkeit? A

F

Ändern Sie in den allgemeinen Voreinstellungen die Anzeige der Objektpalette auf Nur Text oder Symbole und Text. So sehen Sie immer, wozu ein Werkzeug dient und wählen sofort das richtige aus.

Ich habe eine Webseite angelegt und verschiedene Elemente auf der Seite platziert, doch erhalte ich immer die Meldung, ich müsse vorher eine Site definieren. Was bedeutet das? A

1.9

Morgen lernen wir, wie man eine Site definiert. Im Augenblick können Sie diese Meldung ignorieren und auf Abbrechen klicken.

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 Objekte in der Dokumentansicht auswählen? 2. Die schwebenden Fenster sind sehr praktisch. Aber wenn Sie von einer Palette in die Dokumentansicht klicken, bleiben die Paletten im Vordergrund. Wie können Sie das ändern? 3. Wie können Sie den HTML-Code eines bestimmten Tags ändern, ohne den Codeinspektor zu öffnen?

Übungen 1. Verändern Sie die Voreinstellungen so, dass HTML-Tags in der Codeansicht farbig dargestellt werden. So behalten Sie einen besseren Überblick, wenn Sie den HTMLCode direkt bearbeiten. 2. Binden Sie die auf Ihrem Rechner installierten Browser in die Browservorschau ein, um sich Ihre Website anzeigen zu lassen. Sie sollten sowohl den Internet Explorer wie den Netscape Navigator verwenden, um sicher zu sein, dass Ihre Website in beiden Browsern in etwa gleich aussieht.

68

Die WYSIWYGLayoutwerkzeuge von UltraDev

2

Die WYSIWYG-Layoutwerkzeuge von UltraDev

Nachdem wir das Thema Paletten und Fenster erledigt haben, können wir zur Sache kommen. Mit UltraDev ist es ein wahres Vergnügen, optisch ansprechende und pflegeleichte Websites zu erstellen. Die Werkzeugkiste steht bereit! In diesem Kapitel lernen Sie 쐽

den Umgang mit den UltraDev-Werkzeugen;

쐽

den Einsatz von Metatags, um Besucher auf Ihre Site zu ziehen;

쐽

komplexere Objekte wie JavaScript-Verhalten in Ihre Seite einzubauen;

쐽

wie Sie mithilfe von Tabellen und Ebenen Elemente exakt platzieren.

2.1

Ihre erste Website

Heute werden Sie verschiedene Übungen machen, die Ihnen das Wissen vermitteln, das Sie für die Erstellung von Standard-Websites brauchen. Es gibt allerdings keinen Grund, sich sklavisch an die Vorgaben zu halten. Es handelt sich hier um reine Übungsbeispiele. Wenn Sie eine Website erstellen, müssen Sie im ersten Schritt eine neue Site definieren, damit UltraDev weiß, wo es Ihre Dateien ablegen soll. Wenn Sie während des ersten Tages versucht haben, eine Webseite anzulegen, ist es vielleicht zu Problemen gekommen, weil das Programm Sie aufgefordert hat, eine Site zu definieren. Man kann die verschiedenen Funktionen zwar auch testen, wenn man keine Site definiert, aber das Leben wird leichter, wenn man sich doch dazu durchringt. Für sämtliche Links, die Sie von Ihrem Dokument aus auf andere Dokumente, seien es Grafiken oder andere HTML-Seiten, setzen, sollten Sie relative Pfadangaben verwenden. Setzen Sie auf eine Abbildung in Ihrem Dokument einen absoluten Link in der Form c:\myproject\images\cutepuppy.jpg, hat das zur Folge, dass im Browser des Anwenders ein unterbrochener Link angezeigt wird, wenn er die Seite vom Server abruft. Darum müssen Sie auf die Abbildung relativ zum HTML-Dokument verlinken: images\cutepuppy .jpg. Wenn Sie nun eine Site definieren, »weiß« UltraDev automatisch, wo die einzelnen Seiten liegen und wie sie miteinander verlinkt sind. Wenn Sie nun beispielsweise eine Seite bearbeiten und in einen anderen Ordner verschieben, aktualisiert UltraDev automatisch die betreffenden Links, und die Seite funktioniert weiter fehlerfrei, obwohl die Dateien jetzt an einem anderen Ort liegen. Alles, was mit dem Planen und Verwalten einer Website zusammenhängt, werden wir in Tag 3, »Websites planen und verwalten«, behandeln. Fürs Erste begnügen wir uns mit der Einrichtung einer simplen Website, damit wir uns endlich auf die zentralen Funktionen der UltraDev-Entwicklungsumgebung stürzen können.

70

Ihre erste Website

Eine Site definieren Bevor Sie loslegen können, müssen Sie also eine Website definieren. Dazu öffnen Sie das Menü SITE > NEUE SITE. Es öffnet sich das in Abb. 2.1 gezeigte Dialogfenster.

Abbildung 2.1: Erster Arbeitsschritt: Definition einer Site.

Hier geben Sie den Namen Ihrer Site und den lokalen Stammordner an. Den Stammordner wählen Sie, indem Sie entweder den Pfad in das entsprechende Feld eintippen oder auf das Ordnersymbol rechts davon klicken. Daraufhin öffnet sich ein Fenster, über das Sie den Stammordner auswählen. Als Nächstes müssen Sie das Kontrollfeld LISTE MIT LOKALEN DATEIEN AUTOMATISCH aktivieren. Diese Option sorgt dafür, dass die lokale Dateiliste jedes Mal aktualisiert wird, wenn Sie neue Dateien in dieses Verzeichnis kopieren. Wenn Ihre Site sehr umfangreich ist und Hunderte von Dateien enthält, kann es sein, dass das Programm langsamer wird, wenn diese Option eingeschaltet ist. Sie sollten diese Option immer aktiviert lassen, außer Ihre Website ist wirklich sehr umfangreich. AKTUALISIEREN

Die Angaben zur Hyperlink-Verwaltung werden vom Programm benötigt, um die Hyperlinks zwischen Dokumenten zu prüfen. Wenn Sie vorhaben, absolute Links zu verwenden, vergewissern Sie sich, dass Sie die vollständige Webadresse, unter der Ihre Site später veröffentlicht wird, in das HTTP-Adressfeld eingeben. Ohne diese Information kann UltraDev die angegebenen Links nicht auf ihre Richtigkeit hin überprüfen. Eine absolute URL ist eine URL, die die vollständige Internetadresse der Website einschließlich des Servernamens enthält. Ein Beispiel für eine absolute URL ist http://www.poisontooth.com. Relative URLs zeigen direkt auf ein Dokument innerhalb der Website ohne die Angabe des Servernamens.

71

Die WYSIWYG-Layoutwerkzeuge von UltraDev

Ich achte darauf, beim Anlegen einer Website so oft wie möglich nur relative Pfadangaben zu verwenden. Absolute Pfandangaben machen es schwierig, Websites auf einen anderen Server zu legen, da hier der Hostname geändert werden muss. Relative Pfadangaben sind wesentlich pflegeleichter, da man in diesem Fall eine Website problemlos in ein anderes Verzeichnis oder auf einen anderen Server verschieben kann. Wenn Sie das Kontrollfeld CACHE aktivieren, wird ein lokaler Cache aller Hyperlinks innerhalb einer Site erstellt. Hierdurch funktionieren Hyperlinks schneller, die Siteverwaltung und die Erstellung von Sitemaps wird beschleunigt. Wenn Sie in der Kategorie LOKALE INFOS sämtliche Einstellungen vorgenommen haben, wechseln Sie im Fenster SITE-DEFINITION in die Kategorie SITEMAP-LAYOUT. Geben Sie in das Feld HOMEPAGE den Dateinamen index.html ein. Wenn Sie eine Website aufrufen, wird der Server automatisch als Erstes nach einer Datei mit diesem Namen suchen. Falls Sie den Personal Web Server bzw. den IIS von Microsoft verwenden, wird als Homepage gewöhnlich eine Datei mit der Bezeichnung default.htm angenommen. Von dieser Startseite aus werden Sie Ihre Website aufbauen. Da eine Datei namens index.html natürlich noch nicht existiert, fragt das Programm Sie, ob Sie sie jetzt erstellen wollen. Klicken Sie auf OK und die Datei wird erzeugt. Gehen Sie nun in das Menü FENSTER > DATEIEN DER SITE, um sich alle aktuell vorhandenen Dateien anzeigen zu lassen. Da Sie wahrscheinlich bis jetzt nur eine Datei erzeugt haben, wird natürlich auch nur diese angezeigt. In Abb. 2.2 sehen Sie das Fenster einer Site, die schon etwas mehr Dokumente enthält. Sollte das Fenster auf Ihrem Bildschirm nicht so aussehen wie in der Abbildung gezeigt, überprüfen Sie bitte, ob der kleine Pfeil links unten in der Statuszeile nach links zeigt. Zeigt dieser Pfeil nämlich nach rechts, dann ist das Site-Fenster ausgeklappt und zeigt neben den Dateien im lokalen Ordner auch die Dateien der entfernten Site, d.h. die Dateien, die auf dem Webserver liegen. Diese Ansicht werden wir später brauchen, wenn wir Dateien auf den Server stellen bzw. aktualisieren. Vom Site-Fenster aus haben Sie den schnellsten Zugriff auf die Dateien einer Site. Innerhalb dieses Fensters können Sie Dateien bequem verschieben, sie durch Klick in den Spaltenkopf sortieren lassen sowie mit Doppelklick öffnen. Wenn Sie eine Datei mit gedrückter Maustaste aus einem Ordner in einen anderen verschieben, werden automatisch alle Links in diesem Dokument aktualisiert. Die Pfadangaben sind also weiterhin korrekt. Sie werden bald feststellen, dass Sie mit dem Site-Fenster häufig arbeiten werden. Wenn alles geklappt hat, müssten Sie also im Site-Fenster jetzt die Datei index.html sehen. Mit einem Doppelklick öffnen Sie diese Datei im Dokumentfenster und stehen in den Startlöchern, um Ihre erste Webseite zu gestalten.

72

Gedanken zur Gestaltung

Abbildung 2.2: Das Site-Fenster zeigt alle Dokumente innerhalb einer Site an.

2.2

Gedanken zur Gestaltung

Ich kann mir vorstellen, was jetzt in Ihrem Kopf vorgeht. Sie haben bisher geduldig alle Schritte nachvollzogen, die Seite index.html geöffnet und der Cursor blinkt auffordernd links oben im Eck. Sie brennen darauf, mit der Arbeit loszulegen. Aber bevor wir uns ans Gestalten machen, möchte ich ein paar grundsätzliche Überlegungen zum Webdesign vorausschicken.

73

Die WYSIWYG-Layoutwerkzeuge von UltraDev

Wie sieht meine Zielgruppe aus? Websites zu gestalten macht zwar einen Haufen Spaß, aber man sollte nicht völlig planlos an die Sache herangehen. Bevor Sie sich an die Umsetzung machen, sollten Sie sich darüber klar sein, welchen Zweck Ihre Website verfolgt und an welches Publikum sie sich richtet. Wenn Sie z.B. Ihre Dienste als Webdesigner anbieten wollen, dann wirkt es nicht sehr überzeugend, wenn Sie einem potenziellen Auftraggeber den Text Ihrer Bewerbungsmappe online auf grauem Seitenhintergrund präsentieren. Andererseits besteht wiederum keine Notwendigkeit, eine Website, die schnell gezielte Textinformationen bieten soll, mit langsam ladenden Grafiken zu befrachten. Ideal ist wie immer der goldene Mittelweg, also ein ausgewogenes Verhältnis von Grafik zu Text. Grafiken sollten die Textinformation ergänzen und verdeutlichen. Verzichten Sie auf visuelle Effekthaschereien.

Planen Sie für den kleinsten gemeinsamen Nenner Wenn Sie mit Ihrer Website Informationen für ein möglichst breites Publikum zur Verfügung stellen wollen, dann seien Sie sich dessen bewusst, dass Ihre Zielgruppe ganz unterschiedliche Plattformen und Browser verwenden wird, um auf diese Informationen zuzugreifen. Ich selbst komme aus einem UNIX-Umfeld, und dort ist die einzige Benutzerschnittstelle oft nur eine spartanische Kommandozeile, um Informationen von einer Site abzurufen. Mit einem textbasierten Browser wie Lynx lässt sich die gewünschte Seite ruckzuck öffnen und durchsuchen. HTML wurde in der Absicht geschaffen, Dokumente zwischen den unterschiedlichsten Plattformen problemlos austauschen zu können. Grafiken sind aus dem Internet heute zwar nicht mehr wegzudenken, aber viele Abbildungen ließen sich ohne Weiteres durch ein oder zwei Zeilen Text ersetzen. Wenn Sie innerhalb des -Tags das Attribut alt setzen, definieren Sie hiermit einen Text, der angezeigt wird, solange das Bild lädt. Gerade wenn Sie Seiten anbieten, die für Blinde oder Sehbehinderte bestimmt sind, ist ein altText bei Bildern unverzichtbar.

Halten Sie Ihre Website sauber Ich spreche jetzt nicht von den Inhalten, die Sie auf Ihrer Website zu publizieren gedenken. (Wobei ich, nebenbei bemerkt, obigen Rat auch gerne auf diesen Bereich ausdehnen möchte.) Nein, es geht jetzt um den reinen HTML-Code. Zugegeben, es ist recht verführerisch, sozusagen die Motorhaube zu öffnen und selbst ein bisschen am Code herumzubasteln. Achten Sie darauf, dass der Code nach solchen Eingriffen noch den HTMLSpezifikationen entspricht. Wir alle erliegen von Zeit zu Zeit der Verlockung, den Code von Hand zu verändern und all die Tricks einzusetzen, die wir uns im Lauf der Zeit so ange-

74

Allgemeine Objekte und Seitenelemente

eignet haben. Und wem ist das noch nicht passiert: Da wird schnell mal ein -Tag eingefügt und das schließende Tag vergessen. Im Grunde weiß jeder, wie es richtig gehört, und trotzdem vergisst es im Eifer des Gefechts. Und wenn Sie sich einen eigenwilligen Stil bei der HTML-Codierung angewöhnt haben, kann es geschehen, dass UltraDev ab einem bestimmten Punkt die Zusammenarbeit verweigert und den Code von sich aus in einer Form umschreibt, die sich nicht mit Ihren ursprünglichen Absichten deckt. Wenn Sie wollen, dass UltraDev selbst geschriebenen Code nicht verändert, dann deaktivieren Sie diese Funktion. Wie das geht, steht in Tag 1, »Die Programmumgebung von UltraDev«. Viele HTML-Autoren setzen den Wert von HTML-Attributen nicht in Anführungszeichen (schreiben also ). Das ist nun etwas, was mich wirklich erbost. Zwar schreibt der HTML-Standard nicht für alle Attribute Anführungszeichen zwingend vor, sehr wohl aber die XHTML-Spezifikationen. Da nun aber in der Zukunft HTML vielleicht von XML/XHTML abgelöst wird, wäre es ein Leichtes, den Code den zukünftigen Standards anzupassen, indem man sämtliche Werte von Attributen einfach in Anführungszeichen setzt. Was ist XML/XHTML? XML, die Extensible Markup Language, ist eine Sprache, mit der andere Auszeichnungssprachen definiert werden können. Mit XML können Sie Ihre eigenen Tags definieren und damit jeden beliebigen Datentyp auszeichnen. Diese Tags können plattformübergreifend eingesetzt werden. Wenn Sie z.B. eine Datenbank mit Autos haben, könnten Sie mit XML eine spezifische Auto-Auszeichnungssprache definieren, die die einzelnen Autos und ihre Eigenschaften beschreibt. XHTML ist eine Neudefinition von HTML auf der Grundlage der XML-Standards. XHTML verlangt eine exakte Einhaltung der Syntaxregeln und ist weniger »schwammig« als HTML.

2.3

Allgemeine Objekte und Seitenelemente

So, jetzt geht es aber wirklich los. Bevor wir den Besucher auf unsere eigentliche Website führen, bieten wir ihm eine Willkommensseite an, damit er sich ein Bild machen kann, welche Art von Website ihn dahinter erwartet. Ich erstelle zu Anschauungszwecken jeweils eine x-beliebige Dummyseite, um Ihnen die verschiedenen Erstellungsschritte vorzuführen. Sie können die Beispielseiten einfach nachbauen oder gleich damit beginnen, Seiten zu gestalten, die bereits auf Ihr künftiges Zielpublikum ausgerichtet sind. Wenn Sie es noch nicht getan haben, dann gehen Sie jetzt bitte in das Site-Fenster und öffnen die Datei index.html mit einem Doppelklick. Das Dokument wird daraufhin in der Dokumentansicht angezeigt.

75

Die WYSIWYG-Layoutwerkzeuge von UltraDev

Geben Sie einen kurzen Begrüßungstext ein. In der Dokumentansicht können Sie den Text direkt eintippen und über das Menü TEXT nach Ihren Vorstellungen formatieren. Wie Sie in Abb. 2.3 sehen, habe ich einen Titel und eine kurze Beschreibung der Inhalte der Site eingegeben.

Abbildung 2.3: Unsere erste Seite ist fertig.

Drücken Sie mehrfach auf Return, um den Text ein paar Zeilen vom oberen Fensterrand weg nach unten zu verschieben. Als Textgröße wurde »4« gewählt, als Stil »fett«. Um nach dem Willkommenstext eine einzelne Leerzeile einzufügen, halten Sie die Shift-Taste gedrückt und drücken auf Return (fügt
ein statt

). Den Text formatieren Sie auf Mittelachse, indem Sie ihn markieren und die entsprechende Option im Menü TEXT > AUSRICHTEN > ZENTRIEREN wählen.

Einen Link erstellen Um den WEITER-Link zu erstellen, markieren Sie den Text, den Sie in einen Link verwandeln wollen, und klicken ihn mit der rechten Maustaste bzw. mit Ctrl + Klick an. Daraufhin öffnet sich ein Kontextmenü, das verschiedene Optionen zur Textbearbeitung anbietet, darunter auch die Möglichkeit, einen Link zu erstellen. Ein anderer Weg geht über das Menü MODIFIZIEREN > LINK ERSTELLEN oder die Tastenkombination Strg + L (Windows) bzw. Befehl + L (Mac). Sobald Sie diese Option ausgewählt haben, öffnet sich das in Abb. 2.4 dargestellte Fenster DATEI AUSWÄHLEN, über das Sie den Link definieren. Sie können einen Link auf eine beliebige lokale Datei setzen. Die Datei, auf die verlinkt wird, sollte sich jedoch im Site-

76

Allgemeine Objekte und Seitenelemente

Ordner befinden. Falls nicht, kopiert sie UltraDev dorthin. Das ist zwar ganz praktisch, aber es besteht doch eine gewisse Gefahr, dass Sie bald eine Unzahl von Kopien derselben Datei auf Ihrem Rechner verteilt haben.

Abbildung 2.4: Wählen Sie eine Datei oder eine URL, auf die Sie verlinken wollen.

Weil ich noch keine Seite erstellt habe, auf die ich verlinken kann, gebe ich als Dateinamen einfach mainpage.html ein. Diese Seite wird später meine eigentliche Homepage. Wenn Sie einen Link erzeugen, können Sie angeben, ob er relativ zum Startordner oder zum Dokument, von dem aus verlinkt wird, erstellt werden soll. In den meisten Fällen ist das reine Geschmackssache. Wenn Sie die Schaltfläche PARAMETER anklicken, können Sie dem Link noch verschiedene Attribute zuweisen. Wenn Sie den Link eingegeben haben, klicken Sie auf den Button OK und die erforderlichen Tags werden dem HTML-Code hinzugefügt. Der Link sollte in der Dokumentansicht in blauer Schrift und unterstrichen dargestellt werden.

Den Head-Bereich bearbeiten Da unsere erste Seite nun fertig ist und sogar schon etwas Inhalt vorzuweisen hat, wollen wir ein paar unsichtbare Attribute bearbeiten – die Tags, die sich im Head-Bereich der Datei befinden. Hier können wir den Titel der Seite ändern oder den Browser zwingen, eine andere Seite zu öffnen, wenn er sich allzu lang mit der Begrüßungsseite aufhält. Über das Menü ANSICHT > HEAD-INHALT lassen wir uns die entsprechenden Elemente anzeigen. Sie werden bemerkt haben, dass sich die Dokumentansicht leicht verändert hat.

77

Die WYSIWYG-Layoutwerkzeuge von UltraDev

Am oberen Fensterrand wird nun ein separater Bereich angezeigt, in dem sich ein paar Icons befinden. Diese Icons stehen für diejenigen Tags im Head-Bereich des Dokuments, die bereits definiert worden sind. Um sie zu bearbeiten, öffnen Sie den Eigenschafteninspektor. Abb. 2.5 zeigt das Aussehen des Eigenschafteninspektors, nachdem das Icon für das -Tag markiert wurde. UltraDev fügt in den Head-Bereich eines Dokumentes automatisch zwei Tags ein: zum einen das -Tag mit dem Attribut untitled document, zum anderen ein Tag, das nähere Angaben zum Seiteninhalt liefert. Öffnen Sie den Eigenschafteninspektor, sofern Sie das noch nicht getan haben, und klicken Sie das Icon für das -Tag an. Geben Sie einen für die Begrüßungsseite geeigneten Titel ein. (»Willkommen« oder etwas Ähnliches.)

Abbildung 2.5: Ändern Sie das -Tag und andere -Tags per Eigenschafteninspektor. Hierzu muss der Head-Inhalt angezeigt werden.

Mit der Einführung der Werkzeugleiste in UltraDev 4.0 können Sie das -Tag direkt in der Dokumentansicht bearbeiten. Um den Titel einer

Seite zu ändern, müssen Sie ihn nur noch in das Feld TITEL in der Werkzeugleiste eingeben. Das -Tag ist allerdings das einzige Head-Element, das Sie auf diese Weise bearbeiten können. Zusätzlich wollte ich meine Seite noch um eine refresh-Anweisung ergänzen, sodass der Anwender nach einer bestimmten Zeit automatisch von der Begrüßungsseite auf meine Homepage umgeleitet wird, ohne dass er hierzu auf einen Link klicken muss. Zu diesem Zweck wählen Sie in der Unterpalette HEAD der Objektpalette die Option AKTUALISIERUNG EINFÜGEN. Ein anderer Weg führt über das Menü EINFÜGEN > HEAD-TAGS >

78

Allgemeine Objekte und Seitenelemente

AKTUALISIEREN. Es öffnet sich ein Fenster, das Sie nach der URL fragt, die geladen werden soll, und wie lange der Browser warten soll, bis er die neue Seite lädt. Wenn Sie keine eigene Seite haben, auf die Sie verlinken können, können Sie auch eine externe URL laden lassen (wie z.B. http://www.poisontooth.com). Keine Bange, diese und jede andere Eigenschaft eines Objekts auf der Seite können Sie jederzeit ändern. Hierzu müssen Sie es lediglich auswählen und die entsprechenden Werte im Eigenschafteninspektor ändern. Sie können sich auf die refresh-Anweisung nicht in allen Fällen verlassen, denn sie wird von einigen älteren Browsern nicht verstanden. Wenn Sie daher von der Begrüßungsseite keinen Link auf die Folgeseite setzen, stecken Ihre Besucher unter Umständen in einer Sackgasse und gelangen niemals auf Ihre Website. Auch für Suchmaschinen kann es schwierig werden, Ihre Seiten zu indizieren, wenn Sie nur die refresh-Anweisung verwenden, um Besucher auf Ihre Hauptseiten zu leiten.

Allgemeine Seiteneigenschaften Wie Sie bereits wissen, können Sie den Titel Ihrer Seite verändern, indem Sie das entsprechende Icon im Head-Inhalt anwählen und den neuen Titel im Eigenschafteninspektor eingeben, oder indem Sie direkt über die Werkzeugleiste gehen. Nun gibt es aber in UltraDev noch andere Möglichkeiten, um die allgemeinen Seiteneigenschaften (Seitentitel eingeschlossen) wie Ränder, Hintergrundfarben oder die Darstellung von Links zu verändern. Über das Menü MODIFIZIEREN > SEITENEIGENSCHAFTEN können Sie die Grundeinstellungen für jede beliebige Seite ändern. Abb. 2.6 zeigt das geöffnete Fenster SEITENEIGENSCHAFTEN.

Abbildung 2.6: Das Fenster Seiteneigenschaften erlaubt die Veränderung zahlreicher Attribute im Headund im Body-Bereich eines HTML-Dokuments.

79

Die WYSIWYG-Layoutwerkzeuge von UltraDev

Wie Sie sehen, können Sie hier einige nützliche Einstellungen vornehmen: 쐽

TITEL – Hier vergeben Sie den Titel der aktuellen Seite.

쐽

HINTERGRUNDBILD – Nicht zu verwechseln mit dem Tracing-Bild. Das Hintergrundbild wird im Hintergrund der angezeigten Seite wie Puzzleteile endlos aneinander gelegt.

쐽

HINTERGRUND – Hier definieren Sie eine Hintergrundfarbe für die aktuelle Seite. Sie können entweder im zugehörigen Feld einen hexadezimalen Farbcode entsprechend dem HTML-Standard eingeben oder die Farbpalette öffnen, indem Sie auf das Farbfeld klicken und dort eine Farbe auswählen. Zur Farbpalette erfahren Sie bald Näheres.

쐽

TEXT – Definiert die Farbe, mit der Text ausgegeben wird.

쐽

HYPERLINKS – Definiert die Farben von Hyperlinks, aktiven und besuchten Hyperlinks.

쐽

RÄNDER – Die Seitenränder werden über vier Felder eingestellt. Wenn Sie möchten, dass die Inhalte Ihrer Seite genau bündig zur linken oberen Ecke des Browserfensters stehen, tragen Sie in diese Felder jeweils den Wert »0« ein. Diese vier Felder sind erforderlich, da Netscape und Internet Explorer Seitenränder über andere Attribute steuern (RANDBREITE/RANDHÖHE bzw. LINKER RAND/RECHTER RAND). Wenn Ihre Seite in beiden Browsern gleich angezeigt werden soll, müssen Sie alle vier Felder ausfüllen.

쐽

DOKUMENTKODIERUNG – Hier wählen Sie die Default-Spracheinstellungen eines Dokuments.

쐽

TRACING-BILD/BILDTRANSPARENZ – In Tag 1 haben Sie gelernt, wie Sie in den Hintergrund der Arbeitsfläche einen Entwurf der fertigen Seite legen können, um sich bei der Umsetzung des Layouts daran zu orientieren. Mit diesen beiden Optionen kontrollieren Sie, ob und wie ein Tracing-Bild angezeigt wird. Zur Erinnerung: Das TracingBild wird vom Browser nicht ausgegeben, es ist lediglich als Arbeitserleichterung gedacht.

Dieses Fenster werden Sie ziemlich oft brauchen. Seit dieses Feature in Dreamweaver eingeführt wurde, lässt mir die Frage keine Ruhe, warum man diese Funktionen in ein eigenes Fenster ausgelagert hat und nicht in den Eigenschafteninspektor integriert. Vielleicht nimmt man sich dieses Problems in einer kommenden Version von UltraDev an. Wenn Sie alle Einstellungen für Ihre Seite vorgenommen haben, dann schließen Sie dieses Fenster mit einem Klick auf den OK-Button.

80

Allgemeine Objekte und Seitenelemente

Eine Seitenvorschau anzeigen lassen Obwohl die Entwicklungsumgebung von UltraDev schon ein ziemlich perfektes Bild von der endgültigen Seite liefert, kann es manchmal doch leichte Abweichungen zu dem geben, was Sie im Browser angezeigt bekommen. Über Menü DATEI > VORSCHAU IN BROWSER wählen Sie einen Browser aus, mit dem Sie sich eine Seite anzeigen lassen. Es ist eine gute Idee, sich eine Seite sowohl im Internet Explorer als auch im Netscape Navigator anzuschauen. In einigen Fällen könnte es sonst eine herbe Überraschung geben. Das Vorschausystem von UltraDev funktioniert etwas anders als das vergleichbarer HTMLEditoren. Anstatt die aktuell bearbeitete Datei direkt im Browser anzuzeigen, erzeugt UltraDev eine temporäre HTML-Datei, wenn die Vorschaufunktion aufgerufen wird. Somit wird verhindert, dass eine Seite im Cache des Browsers gespeichert wird und beim nächsten Aufruf der Seite von dort geladen und eventuell nicht aktualisiert wird. Unterhalb des Befehls VORSCHAU IN BROWSER findet sich auch der Befehl ZIELBROWSER ÜBERPRÜFEN. Diese Funktion ist nicht dazu gedacht, HTMLCode zu überprüfen. Sie dient vielmehr dazu zu testen, ob JavaScript-Code, den Sie einer Seite hinzugefügt haben, einwandfrei funktioniert. Zu diesem Feature später mehr.

Rechtschreibprüfung Ihre erste mit UltraDev erstellte Seite ist jetzt so gut wie fertig. Doch bevor Sie Ihre Begrüßungsseite speichern und schließen, sollten Sie sich noch vergewissern, dass sich nicht irgendwelche Tippfehler in Ihren Text eingeschlichen haben. Diese Kontrolle nimmt uns die Rechtschreibprüfung von UltraDev ab. Schließlich wollen wir eventuelle Rechtschreibschwächen nicht der ganzen Welt präsentieren. Über das Menü TEXT > RECHTSCHREIBUNG PRÜFEN rufen Sie den eingebauten Korrektor von UltraDev auf. Es öffnet sich das in Abb. 2.7 gezeigte Fenster, dessen Funktionen jedem verständlich sein dürften, der schon einmal mit einem Textprogramm gearbeitet hat. Findet die Rechtschreibprüfung ein unbekanntes Wort, können Sie es Ihrem persönlichen Wörterbuch hinzufügen, es ignorieren oder ändern. Wenn Sie eine Website erstellen, die sich mit EDV-Themen beschäftigt, werden Sie bald feststellen, dass Sie Ihrem Wörterbuch einige Einträge werden hinzufügen müssen. Man hat so den Eindruck, dass WörterbuchProgramme der Entwicklung immer einen Schritt hinterher hinken, was die Integration der ins Endlose ausufernden EDV-Terminologie angeht. Nachdem Ihr Dokument nun den letzten Feinschliff erhalten hat, speichern und schließen Sie es. Höchste Zeit, dass wir uns um die Homepage kümmern.

81

Die WYSIWYG-Layoutwerkzeuge von UltraDev

Abbildung 2.7: Mit UltraDev können Sie die Dokumente Ihrer Website auf korrekte Orthografie überprüfen lassen.

2.4

Tabellen

Die Erstellung der Begrüßungsseite dürfte Ihnen nicht schwer gefallen sein. Als Nächstes werden wir die Homepage erstellen, die sozusagen das Portal zu Ihrer Site ist und die Navigation zu anderen Seiten ermöglicht. Zu diesem Zweck werden wir ein paar fortgeschrittenere Mittel und Techniken einsetzen. Erstellen Sie über das Menü DATEI > NEU ein neues Dokument. Ein völlig unbeschriebenes Arbeitsblatt öffnet sich. Unser voriges Dokument hatte ja nicht viel mehr zu bieten als ein bisschen Text und einen Link. Alles, was uns an Layout-Künsten abverlangt wurde, bestand darin, den Text so zu formatieren, dass er im Browser zentriert ausgegeben wird. Für unsere Homepage werden wir uns inhaltlich und gestalterisch wohl etwas mehr ins Zeug legen müssen. Für die Homepage wählen wir die klassische Einteilung: Menü links, Inhalt rechts. Dieses bewährte Layout lässt sich mit mehreren Techniken realisieren (und – mein Ehrenwort – Sie werden sie alle kennen lernen). Die gängigste Methode arbeitet mit Tabellen, und genau das werden auch wir jetzt tun.

Tabellen einfügen Tabellen waren ursprünglich dafür gedacht, Zahlenmaterial im Web in einer Art Datenblattansicht zu präsentieren. Zunächst gab es keine Möglichkeit, Tabellen zu formatieren. Das Erscheinungsbild wurde hauptsächlich vom Tabelleninhalt und vom anzeigenden Browser bestimmt. Heute dienen Tabellen in erster Linie dazu, beliebige Elemente auf der Seite in ein Layoutschema einzufügen – Bilder, Text, kurz alles, was sich in ein HTMLDokument einbinden lässt.

82

Tabellen

Um eine Tabelle einzufügen, klicken Sie auf das Tabellen-Icon der Objektpalette oder wählen Sie Menü EINFÜGEN > TABELLE. Es öffnet sich das in Abb. 2.8 dargestellte Fenster TABELLE EINFÜGEN. Hier legen Sie den genauen Tabellenaufbau fest. Sie können diese Werte nachträglich ändern, indem Sie den HTML-Code direkt bearbeiten oder die Tabelle auswählen und das Menü MODIFIZIEREN > TABELLE aufrufen.

Abbildung 2.8: Die meisten Attribute einer Tabelle können Sie direkt bei ihrer Erstellung wählen.

Für unser Layout genügt eine Tabelle mit einer Zeile und zwei Spalten: Die linke Spalte nimmt das Menü auf, die rechte den Inhalt. Ich habe eine feste Tabellenbreite von 600 Pixel vorgegeben. Damit kann ich sicher sein, dass die Seite bei nahezu allen Auflösungen in voller Breite angezeigt wird. Bei ZELLENABSTAND habe ich den Wert »5« eingegeben, sodass zwischen dem Menübereich und dem Inhaltsbereich genügend Abstand bleibt. Wenn Sie alle Einstellungen getroffen haben, wird durch Klick auf den OK-Button die Tabelle ins Dokument eingefügt. Der Wert ZELLENABSTAND regelt den Abstand (in Pixel) zwischen den einzelnen Zellen einer Tabelle. Mit ZELLAUFFÜLLUNG bestimmten Sie den Abstand zwischen dem Inhalt der Zelle und der Zellwand.

Zellengröße verändern Die so erzeugte Tabelle entspricht nicht ganz unseren Zwecken, da beide Spalten gleich breit sind. Für unser Vorhaben muss aber die linke Spalte deutlich schmäler sein als die rechte. Um die Größe einer Zelle zu verändern, setzen Sie den Cursor an den Rand einer Zelle. Der Cursor verwandelt sich in zwei senkrechte Linien mit zwei nach außen zeigenden Pfeilen. Mit gedrückter Maustaste können Sie nun die Breite der Zelle verändern, indem Sie die Begrenzungslinie der Zelle an die gewünschte Position verschieben. Analog können Sie auch die Höhe von Zellen verändern, was aber für unsere Zwecke momentan nicht erforderlich ist. Wenn Sie die Größe der Zellen angepasst haben, klicken Sie in eine der Zellen und öffnen den Eigenschafteninspektor. Die obere Hälfte des Fensters dient dazu, Text zu formatieren. Wenn der Eigenschafteninspektor eingeklappt ist und nur die Minimaleinstellungen

83

Die WYSIWYG-Layoutwerkzeuge von UltraDev

zeigt, können Sie ihn durch Klick auf das Pfeil-Icon rechts unten aufklappen und sich die erweiterten Einstellungen anzeigen lassen. In 2.9 zeigt die Eigenschaften unserer Tabelle. Anhand dieser Eigenschaften werden wir einige allgemeine Attribute kennen lernen, die uns später auch bei anderen Objekten begegnen werden. Wenn Sie wissen möchten, welche Bedeutung ein einzelnes Attribut hat, müssen Sie lediglich den Mauszeiger darüber platzieren und warten, bis sich der Tooltipp öffnet. Keine Angst, es geht gleich weiter mit dem Webdesign. Abbildung 2.9: Die Eigenschaften einer Tabelle eignen sich gut, um ein paar der zahlreichen Features von UltraDev vorzustellen.

Im Eigenschafteninspektor gibt es also einige allgemeine Einstellungen wie Größe, Farbe, Links und Texteigenschaften, die Sie individuell anpassen können. Schauen wir uns die einzelnen Einstellungen einmal genauer an.

Größe von Objekten Die untere Hälfte des Fensters zeigt alle Attribute, die die Tabellenzelle betreffen. Im Feld B wie Breite können Sie die Größe der Zelle ablesen. Wenn Sie durch Verschieben nicht exakt die gewünschte Zellbreite einstellen können, geben Sie den Wert in dieses Feld ein und drücken Sie auf Enter. Sie können die Größe einer Zelle auch an das Objekt anpassen, das sie enthält. Hierzu geben Sie nach dem Zahlenwert das %-Zeichen ein und die Größe der Zelle wird genau an die relative Breite des Objekts angeglichen. In der Dokumentansicht wird die Tabelle sofort mit den richtigen Proportionen aktualisiert.

Farben zuweisen Wenn Sie Webseiten gestalten, müssen Sie ständig Farben zuweisen. Am bequemsten geht das, wenn Sie auf das Farbfeld des Eigenschafteninspektors klicken. Es öffnet sich eine Farbpalette, aus der Sie eine von 212 websicheren Farben auswählen. Sie können die Darstellung der Farbpalette ändern, indem Sie auf den kleinen Pfeil rechts oben in der Farbpalette klicken. Zwei weitere Optionen machen das Leben leichter, wenn Sie sich von der Palette der websicheren Farben allzu sehr eingeschränkt fühlen: die Pipette und die Systemfarbpalette. Um die Pipette zu verwenden, klicken Sie auf das Farbfeld, und der Cursor wird zur Pipette. Die Pipette nimmt die Farbe des Objekts auf, über dem Sie sie platzieren. Somit

84

Tabellen

können Sie von allem, was auf dem Monitor angezeigt wird, die Farbe aufnehmen, sogar vom Arbeitsbereich selbst. Wenn Sie zu den standardmäßigen Farbeinstellungen zurückkehren möchten, klicken Sie auf das Default-Farb-Icon rechts oben in der Farbpalette (ein durchgestrichenes Quadrat). Ein präziserer Weg der Farbauswahl ist die Verwendung der Systemfarbpalette. Öffnen Sie wieder die Palette mit den websicheren Farben und klicken Sie auf das Icon ganz rechts oben in der rechten Ecke der Palette. Hierauf öffnet sich die spezifische Farbpalette Ihres Systems. Farben aus dieser Palette sind nicht websicher. Websichere Farben sind ein Satz von Farben, der auf Systemen, die nur 256 Farben darstellen können, korrekt angezeigt wird. In einer 8-Bit-Umgebung ist die Verwendung dieser Farben Ihre einzige Garantie, dass die Darstellung Ihrer Grafiken annähernd dem Original entspricht. Nun werden heutzutage Computer mit Grafikkarten mit einer Farbtiefe von 16 oder 24 Bit ausgestattet, sodass man sich wegen der Farbdarstellung eigentlich keine Gedanken mehr machen muss. Wenn Sie ausschließlich Websites für die jüngste Browsergeneration unter Verwendung der neuesten Technologien entwerfen, dann sind websichere Farben sowieso kein Thema mehr für Sie. Über kurz oder lang werden sie der digitalen Frühgeschichte angehören.

Links definieren Wenn Sie Websites erstellen, werden Sie naturgemäß oft Dokumente untereinander verlinken. Der Eigenschafteninspektor von UltraDev bietet Ihnen hierfür drei unterschiedliche Techniken an. Die erste Möglichkeit besteht darin, per Tastatur den Namen einer Datei oder eine URL in das entsprechende Feld einzugeben. Die zweite Möglichkeit ist, auf das Ordner-Symbol neben dem Feld HYPERLINK zu klicken. Es öffnet sich das Fenster DATEI AUSWÄHLEN, in dem Sie per Mausklick die gewünschte Datei selektieren. Die dritte Möglichkeit besteht darin, mit gedrückter Maustaste einen Link direkt auf eine Datei zu ziehen. Hierzu müssen das Dokumentfenster und die Site-Ansicht nebeneinander geöffnet sein. Neben dem Ordner-Symbol sehen Sie ein weiteres Icon, das an eine Art Fadenkreuz erinnert. Wenn Sie dieses Icon anklicken und mit gedrückter Maustaste ziehen, zeigt UltraDev ein »Gummiband« zwischen dem Icon und der aktuellen Position des Mauszeigers an. Wenn Sie nun den Mauszeiger auf eine beliebige Datei im lokalen Ordner der Site-Ansicht ziehen, wird die Auswahl im Dokumentfenster direkt mit dieser Datei verlinkt. Sie können auf diese Weise auch auf eine Datei im Windows Explorer verlinken. Diese Funktion verzahnt die Oberfläche von UltraDev mit dem Betriebssystem. Nun ist diese »Gummiband-Methode« zwar ganz praktisch, wenn Sie Dateien innerhalb kleinerer Websites verlinken wollen. Enthält der Lokale Ordner der Site-Ansicht aber erst

85

Die WYSIWYG-Layoutwerkzeuge von UltraDev

einmal einige Hundert Dateien, dann wird es schwierig, die gesuchte Datei anzufahren. Ich habe viel Zeit damit verbracht, den Mauszeiger in das Site-Fenster zu ziehen und zu warten, bis die Anzeige zur gesuchten Datei scrollt, nur um dann mit anzusehen, wie diese Datei übersprungen wird. Manchmal erledigt man die Dinge einfach besser auf die altmodische Art. Wozu dient eigentlich die Option DATENQUELLEN, die in manchen Dialogfenstern angezeigt wird? Die Option DATENQUELLEN verbindet ein ausgewähltes Element mit einer Datenbank, sodass es dynamisch ausgetauscht werden kann. Dieses Thema wird ausführlich in Woche 2 behandelt. Im Augenblick können Sie diese Einstellungen übergehen.

Textattribute Der Eigenschafteninspektor zeigt an, welche Attribute dem Text zugewiesen werden, den Sie in die Tabellenzelle eingeben. Wie Text formatiert wird, hängt eigentlich nicht mit der Tabelle oder den einzelnen Zellen zusammen. Diese Einstellungen werden bei allen Elementen angezeigt, die Text aufnehmen können, seien es Tabellen, Ebenen oder die Seite als solche. Wenn Sie Text in der Dokumentansicht eingeben, können Sie ihm wie gesagt über den Eigenschafteninspektor bestimmte Attribute zuweisen bzw. diese verändern. Folgende Einstellungsmöglichkeiten stehen zu Ihrer Auswahl (von links nach rechts): 쐽

FORMAT – Der Standardblockstil, der einem Textabschnitt zugewiesen wird (Größe der Überschrift, Absatz usw.)

쐽

SCHRIFTART – Die Schriftart (Times, Arial usw.), in der Text dargestellt wird. (Dropdown-Menü neben Format).

쐽

GRÖSSE – Hier stellen Sie die Schriftgröße ein.

쐽

FARBE – Hier wählen Sie die Farbe der Schrift aus. Sie können entweder die Farbpalette öffnen, indem Sie direkt in das Farbfeld klicken oder einen numerischen Wert in das Feld daneben eingeben.

쐽

STIL – Ein Klick auf das Icon B formatiert Text fett, auf I kursiv.

쐽

AUSRICHTUNG – Mit den folgenden drei Icons können Sie Text linksbündig, zentriert oder rechtsbündig ausrichten.

쐽

HYPERLINK – Wenn ein Wort ein Link ist, wird das in diesem Feld angezeigt. Sie können einen Link mit den oben besprochenen Techniken erstellen oder verändern.

쐽

ZIEL – Ziel bezeichnet den Namen des Fensters bzw. Frames, in den das aufgerufene Dokument geladen werden soll.

86

Tabellen

쐽

LISTEN – Mit den nächsten beiden Schaltflächen erzeugen Sie ungeordnete bzw. geordnete Listen.

쐽

TEXTEINZUG – Mit den letzten zwei Schaltflächen erstellen Sie einen Texteinzug bzw. heben ihn auf.

Diese Eigenschaften werden in Zukunft ständig brauchen, um Text zu bearbeiten. Das Menü TEXT bietet noch zusätzliche Optionen der Textformatierung an. Aber nun weiter mit unserem Projekt.

Layout von Bildern und Texten Sie haben jetzt das nötige Wissen, um in die erstellte Tabelle Inhalt einfügen zu können. Ich habe die Breite der linken Spalte auf 150 Pixel gesetzt und der rechten Spalte etwas Farbe verpasst, indem ich dieser Zelle eine Hintergrundfarbe zugewiesen habe. Mein Plan ist es, eine Website zu gestalten, die ein paar Antiquitäten aus meiner Computersammlung zeigen soll. Zu diesem Zweck möchte ich in den Inhaltsbereich ein paar Abbildungen und beschreibenden Text einfügen.

Bilder einfügen Lassen Sie uns als Erstes ein paar Bilder in die rechte Spalte der Tabelle einsetzen. Platzieren Sie hierzu den Cursor in der rechten Hälfte der Tabelle und klicken Sie auf das BildIcon in der Werkzeugpalette oder gehen Sie über das Menü EINFÜGEN > BILD. Wählen Sie eine Abbildung aus, die im lokalen Ordner Ihrer Site liegt. Wenn Sie eine Grafik auswählen, die nicht in diesem Ordner liegt, fragt UltraDev, ob es sie dorthin kopieren soll. Sie können auch eine URL zu einer Datei eingeben, die auf einem entfernten Server liegt. Der Nachteil ist, dass UltraDev nur lokal gespeicherte Bilder anzeigen kann. Die Dokumentansicht Ihrer Seite kann dann allerdings etwas verwirrend aussehen, wenn Sie alle Abbildungen auf Ihrer Seite von entfernten Servern aufrufen. Wenn Sie Grafiken auf einer Seite platzieren, können Sie wählen, ob der Textfluss die Position der Grafiken bestimmt, oder ob Sie Tabellen und Ebenen für ein präzises Layout von Text und Grafik verwenden. Jeder Methode hat ihre Vor- und Nachteile. Markieren Sie die eben eingefügte Grafik und lassen Sie sich ihre Attribute im Eigenschafteninspektor anzeigen.

Text und Bilder ausrichten Der Großteil der Attribute, die Ihnen zu dieser Grafik angezeigt werden, dürfte Ihnen nun schon bekannt sein, wie z.B. die Möglichkeit, die Breite oder Höhe zu verändern oder einen Link auf eine Datei zu setzen. Wenden wir uns als Nächstes dem Popup-Menü AUS-

87

Die WYSIWYG-Layoutwerkzeuge von UltraDev

zu. Hier stellen Sie ein, ob und in welcher Form Text ein Bild umfließt. Sie haben verschiedene Optionen zur Auswahl: OBEN, UNTEN usw. Wichtiger für uns ist die Ausrichtung LINKS bzw. RECHTS. Wählen Sie RECHTS, fließt der Text um den linken Bildrand. Ausrichtung LINKS lässt den Text um den rechten Bildrand fließen. Abb. 2.10 zeigt ein Bild mit Ausrichtung RECHTS. RICHTEN

Abbildung 2.10: Mit dem Attribut Ausrichten wählen Sie, wie Text eine Abbildung umfließt.

Text und Bild über das Attribut AUSRICHTEN zu positionieren empfiehlt sich vor allem dann, wenn Ihre Website auf den unterschiedlichsten Browsern und Plattformen verfügbar sein soll. Wenn Sie eine exakte Positionierung des Textes erzwingen bzw. eine bestimmte Schriftart verwenden, kann es Ihnen passieren, dass Ihr Layout auf kleineren Bildschirmen »zerschossen« wird oder das System eine andere Schrift verwendet, wenn Ihre Schrift nicht vorhanden ist. Wenn Sie die Position von Bildern und Text nur über das Attribut AUSRICHTEN steuern, regelt sich deren Verteilung automatisch nach der Größe des Browserfensters. Ist der Text zu lang, umfließt er das Bild und dehnt das Fenster (bzw. den »Container«, in dem er steht) so weit wie nötig. Wenn Sie keine ganz exakten Layoutvorgaben einhalten müssen, sollten Sie diese Art der Positionierung verwenden. HTML wurde ja eigentlich geschaffen, um Dokumente auf den unterschiedlichsten Plattformen verfügbar zu machen. Und wenn Sie Layouts erstellen können, die diesem Grundgedanken gerecht werden, ist das eine gute Sache. Vergessen Sie auch nicht, Grafiken so oft wie möglich mit einem -Tag zu versehen, damit Ihre Dokumente auch für reine Textbrowser lesbar sind.

88

Tabellen

Bilder exakt positionieren Wenn Sie allerdings strikte Layoutvorgaben (exakter Stand von Bild und Text usw.) erfüllen müssen, werden Sie zugegebenermaßen mit den -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).

Abbildung 2.11: Zur Umsetzung von komplexeren Layouts benötigen Sie Tabellen.

Wenn Sie die einzelnen Elemente einer Seite mit Tabellen positionieren, empfiehlt es sich, Tabellen und Zellen feste Breiten zuzuweisen, um eine vollständige Kontrolle über das Layout zu bekommen. Ferner müssen Sie die Werte für Rahmen, Zellraum und Zellauffüllung im Eigenschafteninspektor auf »0« setzen. Nur so erreichen Sie, dass der Inhalt Ihrer Tabelle dort angezeigt wird, wo er sein soll – ohne störende Spalten oder gegen einander versetzt. Achten Sie darauf, dass die addierten Breiten der einzelnen Zellen der Gesamtbreite der Tabelle entsprechen. Stimmen diese Werte nicht überein, kann es sein, dass die Tabelle im Browser falsch dargestellt wird.

89

Die WYSIWYG-Layoutwerkzeuge von UltraDev

Zellen verbinden und Tabellen verschachteln Die Breiten untereinander liegender Zellen in einer HTML-Tabelle müssen in jeder Zeile gleich sein, ebenso kann eine Zeile natürlich nur eine Höhe haben. Nun könnte man vielleicht meinen, das stelle eine Einschränkung bei der Positionierung von Inhalten dar, dem ist aber nicht so. In jede Zelle können Sie eine weitere Tabelle einfügen und so den Zellraum nochmals feiner unterteilen. Außerdem können Sie mehrere Zellen zu einer verschmelzen oder eine Zelle in mehrere aufteilen. Um Zellen zu verbinden, klicken Sie mit gedrückter Strg-Taste (Windows) bzw. Befehl-Taste (Mac) in die Zellen, die Sie verbinden möchten. (Die Zellen müssen in derselben Zeile bzw. Spalte liegen.) Über das Menü MODIFIZIEREN > TABELLE > ZELLEN VERBINDEN verschmelzen Sie die ausgewählten Zellen zu einer einzigen. Im Menü MODIFIZIEREN > TABELLE finden Sie nicht wenige Befehle, um das Layout von Tabellen zu verändern. Nachfolgend eine Übersicht, welche Auswirkungen die Anwendung dieser Operationen auf eine Zelle hat: 쐽

ZELLE TEILEN – Dieser Befehl erzeugt in der markierten Zelle weitere Zellen. Das Programm fragt Sie, in wie viele Spalten oder Zeilen Sie die Zelle teilen wollen.

쐽

ZEILEN ODER SPALTEN EINFÜGEN – Dieser Befehl fügt vor der markierten Zelle eine neue Zelle oder Spalte ein. Sie werden gefragt, ob Sie eine Zeile oder Spalte einfügen wollen, wie viele Zeilen oder Spalten Sie einfügen wollen und ob Sie vor oder nach der Auswahl eingesetzt werden sollen.

쐽

ZEILE/SPALTE LÖSCHEN – Entfernt die markierte Zeile bzw. Spalte.

쐽

ZEILENRAUM/SPALTENRAUM VERGRÖSSERN – Dieser Befehl vergrößert den Zeilenraum bzw. Spaltenraum einer Zelle. Die markierte Zelle wird mit der Zelle rechts bzw. unter ihr verbunden, was Einfluss hat auf den Inhalt dieser Zelle. Es ist nicht nötig, für diesen Befehl zwei Zellen auszuwählen. Ganz im Gegenteil wird er dann nicht funktionieren.

쐽

ZEILENRAUM/SPALTENRAUM VERKLEINERN – Wenn sich eine Zelle über mehrere Zeilen oder Spalten erstreckt, wird sie mit diesem Befehl wieder auf ihre ursprüngliche Größe gebracht.

Die Verwendung verschachtelter Tabellen und der verschiedenen Modi der Zellteilung bzw. -verschmelzung gibt Ihnen ein sehr flexibles Gestaltungsinstrument an die Hand, das Ihnen die exakte Umsetzung auch sehr aufwändiger Layouts erlaubt.

Kompromisse bei der Layoutkontrolle Sie haben jetzt zwei ganz unterschiedliche Layouttechniken kennen gelernt, die eine sehr locker und variabel, die andere ganz präzise. Nun möchte ich Sie mit einer Methode bekannt machen, die zwar Tabellen verwendet, aber auf eine Art und Weise, dass sie sich den unterschiedlichen Bildschirmgrößen flexibel anpassen.

90

Tabellen

Wenn Sie Tabellen bzw. Zellen feste Breiten und Höhen (in Pixel) zuweisen, haben Sie als Designer die perfekte Kontrolle über Ihr Layout. Sind die Layoutvorgaben jedoch nicht so streng, genügt es, dass Sie Tabellen bzw. Zellen relative Breiten (in Prozentwerten) zuweisen. Damit halten Sie Bild und Text in der gewünschten Anordnung zusammen, aber die Zellen können sich flexibel an die jeweilige Größe des Browserfensters anpassen. So können Sie Seitenelemente zwar nicht pixelgenau positionieren, haben aber trotzdem weit gehende Kontrolle über die Gestaltung Ihrer Seite. Die meisten Designs lassen sich sehr gut mit Tabellen relativer Breite umsetzen, außer Sie verwenden Grafiken, die Sie in mehrere Slices aufgeteilt haben, die exakt positioniert werden müssen. Sie können sogar noch einen Schritt weitergehen und überhaupt keine Breiten oder Höhen zuweisen. Dann wird der Tabelleninhalt je nach Fenstergröße umbrochen. Wie schon gesagt, ist der Grundgedanke von HTML ja der, Dokumente auf den unterschiedlichsten Plattformen verfügbar zu machen. Dieser Anforderung werden Sie am besten gerecht, wenn Sie die Kontrolle über das Layout dem Browser des Anwenders überlassen. Haben Sie Tabellen bzw. Zellen schon feste Werte zugewiesen, können Sie diese festen Breiten über den Befehl im Menü MODIFIZIEREN > TABELLE > BREITE IN PROZENT KONVERTIEREN in relative Breiten umwandeln. Umgekehrt können Sie auf demselben Weg relative Breiten in Pixel konvertieren. Über den Befehl im Menü MODIFIZIEREN > TABELLE > ZELLHÖHEN/ZELLBREITEN LÖSCHEN können Sie sämtliche Höhen- bzw. Breitenzuweisungen rückgängig machen. Diese Befehle stehen nur dann zur Verfügung, wenn Sie die ganze Tabelle ausgewählt haben. Bevor Sie sich daran machen, im Rahmen von größeren Projekten aufwändige Layouts mithilfe von Tabellen umzusetzen, sollten Sie zuvor ein bisschen mit Tabellen experimentieren. Tabellen sind ein höchst nützliches Gestaltungswerkzeug, haben allerdings so ihre Tücken, die man kennen sollte, um ihnen wirksam zu begegnen. Ein Beispiel: Sie setzen Grafiken oder Teile einer zerschnittenen Grafik in eine Tabelle ein. Statt nun die Grafiken nahtlos aneinander zu fügen, sehen Sie in der Vorschau zwischen den Bildteilen einen Spalt, durch den der Hintergrund durchscheint. Wenn das der Fall ist, müssen Sie die HTML-Quelle öffnen und den Code überprüfen. Der Grund für diese fehlerhafte Anzeige kann darin liegen, dass UltraDev ohne ersichtlichen Grund zwischen den -Tags und den -Tags einen Leerschritt eingefügt hat. Diesen Leerschritt müssen Sie dann von Hand löschen.

91

Die WYSIWYG-Layoutwerkzeuge von UltraDev

Der Tabellen-Layoutmodus UltraDev 4.0 kommt mit einem neuen Layoutmodus, der die Umsetzung komplexer Layouts mit der Tabellentechnik wesentlich einfacher macht. Normalerweise würden Sie die Größe von Zellen durch Teilen oder Verbinden von Hand zu ändern, um sie an das Format von Bild oder Text anzupassen. Im Layoutmodus definieren Sie einfach die Bereiche, die Inhalt aufnehmen sollen, ohne sich über Breiten- oder Höhenangaben Gedanken machen zu müssen. Um in den Tabellen-Layoutmodus umzuschalten, klicken Sie unten in der Objektpalette auf das rechte Icon. In diesem Modus stehen Ihnen zwei neue Werkzeuge zur Verfügung (auszuwählen unter LAYOUT: LAYOUTZELLE ZEICHNEN und LAYOUTTABELLE ZEICHNEN). Stellen Sie sich den Tabellenmodus wie ein Skizzenblatt vor, das Sie nach Belieben frei unterteilen können. Im Tabellen-Layoutmodus klicken Sie in die Arbeitsfläche und ziehen ein leeres Eingabefeld auf. Abb. 2.12 zeigt eine leere Layouttabelle.

Abbildung 2.12: Ziehen Sie im Tabellen-Layoutmodus ein Eingabefeld an der Stelle auf, an der Sie Inhalt einfügen möchten.

In dieser Layouttabelle können Sie Layoutzellen frei platzieren, so wie Sie vorher die Tabelle platziert haben. Diese Zelle können Sie pixelgenau an einer beliebigen Stelle der Arbeitsoberfläche positionieren. In Abb. 2.13 sehen Sie die Layouttabelle, der einige Layoutzellen hinzugefügt wurden. Sie können diese Layoutzellen innerhalb der Layouttabelle beliebig verschieben und skalieren. Klicken Sie auf die Ecke einer Zelle und verschieben Sie sie mit gedrückter Maustaste an eine andere Position. Wenn Sie die Begrenzungslinie einer Zelle einmal anklicken, wird sie markiert und es erscheinen Anfasser, mit denen Sie die Zelle nach Bedarf vergrößern oder verkleinern können.

92

Menüleisten und Buttons

Abbildung 2.13: Durch Einfügen einer Layoutzelle in die Layouttabelle können Sie Inhalt beliebig platzieren.

Dabei sollten wir nicht vergessen, dass im Tabellen-Layoutmodus tatsächlich bloß eine Tabellenstruktur erzeugt wird, die auf der Größe und Position der Zellen basiert, die wir in diesem Modus eingefügt haben. Sie können jederzeit in die normale Dokumentansicht zurückschalten, indem Sie im Feld ANSICHT der Objektpalette auf die linke Schaltfläche (Standardansicht) klicken. Der Tabellen-Layoutmodus ist wirklich ein tolles Werkzeug, um Layouts exakt umsetzen, vor allem, wenn man mit Tracing-Bildern arbeitet.

2.5

Menüleisten und Buttons

Nachdem wir auf unserer Seite einen »Containerbereich« zur Aufnahme von Bild- und Textelementen definiert haben, brauchen wir noch ein Menü, um die übrigen Seiten unserer Site ansteuern zu können. Es gibt nun mehrere Möglichkeiten, eine Navigationsstruktur umzusetzen. Für welche dieser Möglichkeiten Sie sich entscheiden, ist letztlich Geschmacksache, wobei allerdings die Ladezeit der Seiten ein wichtiges Entscheidungskriterium darstellt.

Linklisten Die häufigste Form der Navigation ist die Linkliste. Textlinks laden sehr schnell, sind leicht zu erstellen und zu pflegen. In Tag 1 haben Sie gelernt, wie Sie einen Textlink zu einem anderen Dokument erzeugen können. Die Erstellung einer Linkliste funktioniert nicht anders, allerdings können Sie das Verfahren etwas rationalisieren. Tippen Sie

93

Die WYSIWYG-Layoutwerkzeuge von UltraDev

zunächst in der Dokumentansicht die einzelnen Menüpunkte untereinander in der Reihenfolge ein, wie sie später angezeigt werden sollen. Geben Sie einen Begriff ein und springen Sie mit Shift + Enter in die nächste Zeile. Wenn Sie nur Enter drücken, wird im HTML-Code ein

-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.

Grafiken und Imagemaps Sie können alternativ auch Grafiken verwenden, um ein Navigationssystem innerhalb Ihrer Site einzurichten. Je einfacher diese Buttons gehalten sind, desto schneller laden sie. Mithilfe eines Grafikprogramms lassen sich problemlos separate Buttons für die einzelnen Menüpunkt erzeugen. Sie brauchen diese Buttons dann nur noch auf der Seite zu platzieren und mit den entsprechenden Dateien zu verlinken. Es dauert jedoch länger, diese einzelnen Buttons zu laden, als eine einzige Grafik, die all diese Menüpunkte enthält. Wenn Sie Ihr Menü als eine einzige Grafik anlegen, können Sie mithilfe so genannter Imagemaps innerhalb dieser Grafik »sensitive« Bereiche definieren, die als Link auf andere Dokumente der Website dienen. Wenn Sie eine Imagemap definieren, wird im HTMLCode für diese Grafik eine Art »Landkarte« angelegt, d.h., die Grafik wird mit einem Koordinatenraster überzogen. Wenn der Anwender nun in diese Grafik klickt, werden die zugehörigen Koordinaten abgefragt und der Browser ruft die Datei ab, die mit diesen Werten verlinkt ist. Um eine Imagemap zu erzeugen, müssen wir natürlich erst einmal eine Grafik auf unserer Seite platzieren. Imagemaps können Sie übrigens mit jeder beliebigen Grafik definieren. Abb. 2.14 zeigt die Menüleiste, die ich auf meiner Seite eingesetzt habe. Es handelt sich

94

Menüleisten und Buttons

um eine einzige Grafik, die die einzelnen Menüpunkte enthält. Diese einzelnen Menüpunkte möchte ich als Link definieren, um die (noch zu erstellenden) Unterseiten meiner Website anzusteuern.

Abbildung 2.14: Grafiken lassen sich problemlos für Navigationszwecke verwenden.

Wenn Sie die Grafik eingefügt haben, müssen Sie den Eigenschafteninspektor aufrufen. In der unteren Hälfte der Palette sehen Sie einige interessante Werkzeuge, die nur angezeigt werden, wenn Sie Grafiken editieren. Abb. 2.15 zeigt, wie die Palette aussieht, wenn eine Grafik ausgewählt wurde. Uns geht es im Moment speziell um die Funktionen, die links unten in der Palette angeboten werden. Abbildung 2.15: Die Werkzeuge zur Erzeugung von Imagemaps finden Sie links unten im Eigenschafteninspektor.

95

Die WYSIWYG-Layoutwerkzeuge von UltraDev

Hier sind die Werkzeuge versammelt, die wir zur Erzeugung von Imagemaps benötigen. In das Feld MAP geben Sie den Namen ein, den Ihre Imagemap erhalten soll. Sie können jeder Grafik auf einer Seite eine eigene Imagemap zuweisen, doch müssen diese Maps eindeutig benannt werden, d.h., Sie können einen Namen nur einmal vergeben. Wenn Sie keinen Namen vergeben, erledigt dies das Programm für Sie. Unter dem Eingabefeld für den Namen finden Sie von links nach rechts vier Werkzeuge: das Auswahlwerkzeug sowie die Werkzeuge zur Erstellung von rechteckigen, ovalen und mehreckigen Hotspots. Diese Werkzeuge funktionieren ähnlich wie die Zeichenwerkzeuge eines Grafikprogramms. Wählen Sie nun eines dieser drei Werkzeuge, klicken in die ausgewählte Grafik und ziehen die entsprechende Form auf. Die so erzeugte Form ist ein so genannter Hotspot, d.h. der Bereich, dem der Link zu einem anderen Dokument zugewiesen wird. Es macht nichts, wenn die Form nicht gleich auf Anhieb sitzt, Sie können sie später immer noch korrigieren. Wie Sie sich denken können, eignet sich das Rechteckwerkzeug am besten für rechteckige Hotspots, das Ovalwerkzeug für ovale und das Polygonwerkzeug für unregelmäßige Hotspots. Der fertige Hotspot wird in blau-grüner Tönung angezeigt. Haben Sie einen Hotspot gesetzt, können Sie seine Form noch genauer anpassen. Hierzu klicken Sie auf das Pfeilwerkzeug und markieren den Hotspot, den Sie bearbeiten wollen. Über die Kontrollpunkte der Kontur können Sie das Objekt skalieren. Über die Pfeiltasten können Sie die Auswahl pixelweise verschieben und somit exakt positionieren. Zum Schluss müssen Sie den Hotspot noch mit der Datei verlinken, die geöffnet werden soll, wenn man darauf klickt. Hierzu wählen Sie mit dem Pfeilwerkzeug aus und markieren den betreffenden Hotspot. Der Eigenschafteninspektor zeigt daraufhin sämtliche Attribute dieses Hotspots. Nun setzen Sie einen Link und geben nötigenfalls ein Ziel an – genauso wie bei jedem anderen Link, den Sie erstellen. Zusätzlich können Sie noch ein -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.

Menüs mit Rollover-Bildern Imagemaps sind eine wunderbare Sache, doch beherrschen sie ein wichtiges Feature nicht, das heute im Internet allgegenwärtig ist: dem Anwender Feed-back geben. Wenn man auf einen Textlink klickt, wird dessen Farbe verändert. Manche Browser verändern auch die Farbe eines Links, wenn der Anwender den Mauszeiger darüber bewegt. Imagemaps dagegen sind statische Bilder, die sich nicht mit der Mausposition ändern.

96

Menüleisten und Buttons

Nur die halbe Wahrheit ... Es stimmt zwar, dass sich Imagemaps nicht automatisch ändern, wenn der Anwender die Maus darüber bewegt, doch kann man per JavaScript das aktuelle Bild austauschen oder über dem Bild eine Ebene mit Informationen einblenden lassen und so dem Anwender Feed-back geben. Doch hieße das mit Kanonen auf Spatzen schießen, denn der gleiche Effekt lässt sich mit anderen Mitteln weit einfacher erreichen.

HTML sieht keine Möglichkeit vor, Grafiken in Abhängigkeit von Aktionen des Anwenders zu verändern. In diese Lücke springt JavaScript. Mit JavaScript lassen sich Funktionen programmieren, die mit HTML nicht möglich sind, wie eben das Austauschen von Grafiken. Diese Programme werden in den HTML-Code einer Seite eingebaut. Gerade für Rollover-Menüs mit dem Wechsel zwischen ein- bzw. ausgeschalteten und aktivierten Buttons bietet sich der Einsatz von Javascript an. Im Folgenden zu reinen Anschauungszwecken der JavaScript-Code, den UltraDev für einen solchen Rollover-Effekt erzeugt: function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i 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 -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 -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 Home-

page 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 LOKAORDNER. 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.

LER

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 index.asp test01.asp test01.asp test01.asp test03.asp test04.asp TMPz9av7d5cj.asp TMPz9av7d5cj.asp 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, 15 verwaist Hyperlinks: 17 gesamt, 5 OK, 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 -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:

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 NEU VON VORLAGE ein Dokument gleich auf Basis einer Vorlage erstellen. Ein Dialogfenster zeigt Ihnen daraufhin alle zur Verfügung stehenden Vorlagen an, die Sie als Grundlage Ihrer neuen Seite verwenden können. Und wie wir es von einer Vorlage erwarten dürfen, können nur die editierbaren Bereiche überschrieben werden. Andere Bearbeiter können nun Inhalte in die Seite einstellen, ohne befürchten zu müssen, an der Datei oder am Layout etwas zu zerstören. Eine andere Art mit Vorlagen zu arbeiten ist, ein Dokument mit einer Vorlage zu verbinden. Die Vorlage wird mit dem Dokument verknüpft und der Inhalt in eines der editierbaren Felder eingefügt. Verwenden Sie hierzu den Button ANWENDEN in der Vorlagenpalette. Ähnlich wie Bibliothekselemente können Sie auch Vorlagen bearbeiten und aktualisieren und über MODIFIZIEREN > VORLAGEN > SEITEN AKTUALISIEREN auf alle Seiten anwenden, die auf dieser Vorlage basieren. Somit lassen sich eventuelle Layoutänderungen an Seiten, die dieselbe Formatvorlage verwenden, durch Anpassung einer einzigen Datei auf schnellstem Wege bewerkstelligen. Wenn das keine gute Nachricht ist! Damit Bibliotheken und Vorlagen optimal eingesetzt werden können, ist es wichtig, dass sämtliche Mitarbeiter, die eine Site betreuen, deren Funktionsweise wirklich verstehen, bevor sie damit arbeiten. Verwendet man eine Vorlage wie ein gewöhnliches HTML-Dokument, ist es nicht mehr möglich, Dokumente zentral zu aktualisieren oder Inhalte zu kontrollieren. Wenn Sie größere Veränderungen an einer Vorlagen-basierten Seite vornehmen möchten, ohne die Vorlage dabei zu zerstören, können Sie über MODIFIZIEREN > VORLAGEN > VON VORLAGE LÖSEN das Dokument von seiner Vorlage trennen. Sie unterliegen dann nicht mehr den Einschränkungen der Vorlage, die Inhalte der Seite bleiben aber erhalten. Wenn Sie eine Seite von ihrer Vorlage lösen, werden eventuelle Aktualisierungen an dieser Vorlage nicht mehr auf diese Seite übertragen.

212

Der Elemente-Manager

5.6

Der Elemente-Manager

Wie Sie bei der Arbeit mit Vorlagen und Bibliotheken schon gesehen haben, enthält die Palette ELEMENTE sämtliche Objekte die innerhalb einer Website zur Verfügung stehen. Wir haben uns vordringlich mit Vorlagen und Bibliotheken beschäftigt, weil das die komplexesten Themen sind. Doch stehen über den Elemente-Manager auch noch andere Objekte zu Verfügung. Öffnen Sie bitte die Palette ELEMENTE. Am linken Palettenrand sehen Sie neun Icons. Jedes Icon steht für eine bestimmte Ressource, die Sie damit aufrufen können. Es handelt sich um die folgenden Objekte, von oben nach unten: 쐽

BILDER – Jedes Bild, das in der Site vorkommt, ist hier aufgeführt.

쐽

FARBEN – Enthält die Farben, die verwendet wurden.

쐽

URLS – Zeigt Links zu andern Seiten oder Objekten an.

쐽

FLASH – Flash-Dateien, die in der Site verwendet werden.

쐽

SHOCKWAVE – Listet alle Shockwave-Inhalte auf.

쐽

FILME – Alle eingebetteten oder sonst wie verknüpften Videodateien werden hier aufgeführt.

쐽

SCRIPTE – Listet sämtliche JavaScript-Funktionen bzw. VBScript-Code auf.

쐽

VORLAGEN – Hier stehen alle verfügbaren Vorlagen.

쐽

BIBLIOTHEK – Sämtliche Bibliothekselemente werden hier geführt.

Wenn Sie einen bestimmten Objekttyp ausgewählt haben, können Sie die enthaltenen Elemente über diese Palette editieren oder einer Seite hinzufügen, wie wir das bei den Bibliothekselementen und Vorlagen schon gemacht haben. Sie können auch ausgewählte Objekte in eine andere Site kopieren. Öffnen Sie hierzu mit dem kleinen Pfeil rechts das Palettenmenü. So können Sie Elemente zwischen einzelnen Sites austauschen, ohne irgendwelche Dateien von Hand hin- und herkopieren zu müssen.

Verschiedene Ansichtsmodi im Elemente-Manager Im Elemente-Manager haben Sie zwei Ansichtsmodi zur Auswahl: ganze Site und Favoriten. Standardmäßig werden alle Objekte einer Site angezeigt – auch solche, die eher im Weg sind. Um die Liste etwas kürzer zu halten und den Überblick zu bewahren, können Sie ein Element auswählen und es über das Palettenmenü oder durch Klick auf das Favoriten-Icon (ein Band mit einem Pluszeichen) der Favoritenliste hinzufügen. Sie können natürlich jederzeit zwischen den Ansichten umschalten, indem Sie das jeweilige Optionsfeld oben in der Palette anklicken.

213

Wieder verwertbare Elemente und Erweiterungsmodule

5.7

UltraDev erweitern

UltraDev ist extrem ausbaufähig. Darauf einzugehen würde den Rahmen dieses Buches bei weitem sprengen, denn die Erweiterung von UltraDev wäre noch einmal Stoff für zwei oder drei Wochen. Das ganze Menüsystem ist editierbar, selbst geschriebene JavaScript-Verhaltensweisen lassen sich nahtlos in die Entwicklungsumgebung von UltraDev integrieren. Nehmen wir zum Beispiel das Menü BEFEHLE. Hier wurden schon einige externe Befehle integriert, wie z.B. HTML OPTIMIEREN und WORD-HTML OPTIMIEREN. Diese Funktionen sind nicht Teil des genuinen Programmcodes, sondern liegen als Erweiterungsmodul vor. Wenn Sie kein Programmierer sind und Ihre JavaScript-Verhaltensweisen nicht selbst schreiben wollen, stehen Ihnen zwei Wege offen, wie Sie UltraDev um zusätzliche Funktionen erweitern können: die Installation von vordefinierten Verhaltensweisen von Drittanbietern und die Speicherung von mehreren Arbeitsschritten in einem Makro.

Makros aufzeichnen Die einfachste Art, UltraDev um selbst erstellte Funktionen zu erweitern, ist die Aufzeichnung von Bearbeitungsschritten als Makro, das sich immer wieder verwenden lässt. Leider können Sie während der Aufzeichnung Objekte nicht mit der Maus auswählen, sodass Sie im Wesentlichen auf Tastatureingaben und das Einfügen von Objekten beschränkt sind. Wenn Sie ein Makro aufzeichnen wollen, gehen Sie wie folgt vor: 1. Führen Sie die Bearbeitungsschritte aus, die Sie aufzeichnen möchten: Text eingeben, Objekt einfügen usw. 2. Öffnen Sie die Palette VERLAUF und markieren Sie die Schritte, die Sie als Makro (von UltraDev als »Befehl« bezeichnet) speichern wollen. 3. Wenn Sie die Befehlsfolge vor dem Speichern erst noch einmal abspielen wollen, um zu überprüfen, ob sie sich wie gewünscht verhält, klicken Sie auf den Button WIEDERGABE oder wählen im Palettenmenü den Befehl SCHRITTE WIEDERHOLEN. 4. Sind Sie mit dem Ergebnis zufrieden, können Sie es durch Klick auf das DiskettenIcon oder mit dem Befehl ALS BEFEHL SPEICHERN im Palettenmenü speichern. 5. Vergeben Sie einen Namen für Ihren neuen Befehl. 6. Wenn Sie jetzt das Menü Befehle öffnen, sehen Sie, dass nun Ihr Makro dort aufgelistet wird. Abb. 5.16 zeigt die Verlaufspalette, nachdem ein paar einfache Aktionen durchgeführt wurden. Diese Bearbeitungsschritte können nun als Befehl gespeichert werden.

214

UltraDev erweitern

Wenn Sie sehr oft Textbausteine oder Tabellen in ein Dokument einfügen müssen, können Sie solche wiederkehrenden Arbeitsschritte als Makro ablegen und müssen dann im Bedarfsfall nur noch das Makro abspielen. Möchten Sie ein Makro löschen oder umbenennen, wählen Sie BEFEHLE > BEFEHLSLISTE BEARBEITEN. Es öffnet sich das in Abb. 5.17 gezeigte Dialogfenster. Klicken Sie auf den entsprechenden Befehl im Listenfeld, um ihn neu zu benennen. Mit Klick auf die Schaltfläche LÖSCHEN wird das Makro gelöscht.

Abbildung 5.16: Markieren Sie die Bearbeitungsschritte, die Sie als Befehl speichern möchten.

Abbildung 5.17: Befehle löschen und umbenennen

Sie haben aber auch die Möglichkeit, eine Folge von Bearbeitungsschritten aufzuzeichnen und beliebig oft zu verwenden, ohne sie als Makro abzulegen, indem Sie sie als temporären Befehl speichern.

Temporäre Befehle aufzeichnen Mit der Erstellung von temporären Befehlen zeichnen Sie eine Folge von Bearbeitungsschritten während einer UltraDev-Sitzung auf, die beliebig oft wiedergegeben werden kann, aber mit Beendigung dieser Sitzung wieder gelöscht wird. Um einen temporären

215

Wieder verwertbare Elemente und Erweiterungsmodule

Befehl zu erstellen, wählen Sie BEFEHLE > AUFZEICHNUNG STARTEN. Sie arbeiten wie gewohnt mit dem Programm, während es Ihre Aktionen aufzeichnet. Auch hier gilt leider die Einschränkung, dass Sie während der Aufzeichnung keine Objekte mit der Maus auswählen können. Um die Aufzeichnung zu beenden, wählen Sie BEFEHLE > AUFZEICHNUNG STOPPEN. Sobald ein temporärer Befehl gespeichert wurde, steht das Kommando BEFEHLE > AUFGEZEICHNETEN BEFEHL ABSPIELEN zur Verfügung und Sie können die aufgezeichnete Sequenz beliebig oft wiedergeben.

Erweiterungsmodule für UltraDev herunterladen Bevor Sie sich nun durch die Hilfe-Funktion von UltraDev pflügen und sich das Hirn darüber zermartern, wie Sie Ihre eigenen Erweiterungen schreiben, sollten Sie erst einmal auf der Website von Macromedia vorbeischauen und auskundschaften, was dort an fertigen Modulen bereits erhältlich ist. Über BEFEHLE > MEHR BEFEHLE kommen Sie direkt auf die Website von Macromedia. (Dazu müssen Sie natürlich online sein.) Ein Blick auf Abb. 5.18 dürfte keinen Zweifel aufkommen lassen, dass sich dort so manche nützliche Erweiterung finden lässt.

Abbildung 5.18: Auf der Website von Macromedia finden Sie ein reiches Angebot an Erweiterungsmodulen.

Mit den folgenden vier Schritten installieren Sie ein Erweiterungsmodul (von Macromedia als »Package« bezeichnet):

216

UltraDev erweitern

1. Klicken Sie auf das Modul, das Sie herunterladen möchten. 2. Klicken Sie auf der Seite, die sich nun geöffnet hat, auf das Download-Icon für Ihr Betriebssystem (Mac oder Windows). 3. Öffnen Sie den Ordner, in den das Erweiterungsmodul gespeichert wurde. 4. Doppelklicken Sie auf das Modul. Nachdem Sie doppelt auf das Modul geklickt haben, öffnet sich der Extension Manager (siehe Abb. 5.19) und installiert das Modul. Abschließend wird eine Meldung über die erfolgreiche Installation sowie den Funktionsumfang des Moduls angezeigt.

Abbildung 5.19: Der Extension Manager verwaltet alle installierten Erweiterungsmodule.

Um ein Modul wieder zu entfernen, wählen Sie im Extension Manager den Befehl FILE > REMOVE EXTENSION. Es steht ein Unzahl an neuen Features zur Verfügung, um die Sie UltraDev erweitern können. Sie müssen nur auf der Website von Macromedia vorbeischauen und sich die passenden Module herunterladen. Bevor Sie also den Schluss ziehen, dass es doch etwas gibt, was UltraDev nicht kann, sollten Sie sich erst einmal alle erhältlichen Erweiterungen vornehmen. Diese Module gibt es übrigens umsonst! Sie können UltraDev nicht nur durch diverse Module erweitern, sondern auch die Oberfläche nach Ihren Vorstellungen umgestalten. Im Anhang B, »Anpassen der UltraDev-Umgebung«, finden Sie die nötigen Informationen, wie Sie die Programmoberfläche so umstrukturieren, dass Sie damit Ihren persönlichen Workflow verbessern.

217

Wieder verwertbare Elemente und Erweiterungsmodule

5.8

Zusammenfassung

Zu einer effizienten Entwicklung von Websites gehört auch die intelligente Wiederverwertung bereits erstellter Funktionen und Inhalte. Zu diesem Zweck hält UltraDev ein paar sehr nützliche Werkzeuge bereit. Cascading Stylesheets sorgen für ein einheitliches Schriftbild innerhalb einer Site und garantieren eine weitgehend identische Darstellung über Browser- und Betriebssystemgrenzen hinweg. Darüber hinaus können Sie den Aufwand mit CSS-Dateien wesentlich kleiner halten als mit der üblichen HTML-Formatierung von Text. Entwickeln Sie für Browser, die keine CSS unterstützen, können Sie auf HTML-Stile ausweichen. Vorlagen und Bibliotheken sind Features von UltraDev, die die Wiederverwendung bereits erstellter Elemente ermöglichen. Bibliotheken speichern häufig verwendete »HTMLSchnipsel«, die sich in jedes beliebige Dokument einfügen lassen, sodass bei Änderungen nur eine Datei aktualisiert werden muss. Vorlagen sorgen für ein einheitliches Erscheinungsbild aller Seiten, die auf dieser Vorlage basieren. Und auch hier muss im Falle einer Aktualisierung nur eine einzige Datei geändert werden. Und schließlich ist UltraDev erweiterbar – durch Installation von Modulen, die Sie aus dem Internet herunterladen können oder durch Aufzeichnung eigener Makros. Ein paar Klicks und das Programm ist um neue, leistungsfähige Funktionen erweitert, die in der Standardinstallation fehlen.

5.9 F

Soll ich ein zentrales Stylesheet verwenden oder die Stilinformationen in jedem Dokument gesondert speichern? A

F

Das kommt ganz auf Ihre Anforderungen an. Ein zentrales Stylesheet empfiehlt sich vor allem für komplexe Websites. Wenn sich jedoch die Seiten im Layout stark unterscheiden, müssen Sie vielleicht das Stylesheet ständig anpassen, um sämtliche Stilvarianten abzudecken. In diesem Fall würde es sich empfehlen, bei Seiten, die im Layout abweichen, die Stildefinitionen direkt ins Dokument zu schreiben.

Kann ich spezielle Effekte, wie z.B. Filter verwenden, auch wenn sie vom Netscape Navigator nicht unterstützt werden? A

218

Fragen und Antworten

Ja, aber ich würde ein solches Vorgehen nicht empfehlen. Die Grundidee des Internet ist, eine offene Plattform zu sein, über die Dokumente unabhängig von Betriebsystemen oder Browsern ausgetauscht werden können. Websites nur für einen speziellen Browser zu entwickeln ist ziemlich kurzsichtig.

Workshop

F

Welche Elemente speichert man besten in einer Bibliothek? A

F

Vor allem natürlich Menüs und Navigationsleisten, doch auch kleinere Elemente, die sich öfter ändern, wie z.B. Linklisten, E-Mail-Adressen oder regelmäßig wechselnde Grafiken. Wenn Sie bei Aktualisierungen nicht jedes Mal die ganze Site durchpflügen wollen, sollten Sie solche Objekte in Bibliotheken ablegen.

Sind Vorlagen völlig sicher gegen Veränderungen? A

Ganz und gar nicht. Sie können eine auf Vorlagen basierende Website nicht für verschiedene Bearbeiter zugänglich machen und die Dateien hundertprozentig gegen Veränderungen schützen, seien sie nun absichtlich oder nicht. Sie sollten daher sämtliche Mitarbeiter im effektiven Umgang mit UltraDev schulen, damit sie Sinn und Zweck solcher Vorlagen verstehen und dementsprechend damit umgehen.

5.10 Workshop Der Workshop dient dazu, den gelesenen Stoff mithilfe von gezielten Fragen und Übungen zu vertiefen. Die Antworten finden Sie im Anhang A, »Quiz-Antworten«.

Quiz 1. Welches ist der Hauptverwendungszweck von CSS? 2. Funktionieren sämtliche CSS-Attribute in sämtlichen Browsern und auf allen Plattformen? 3. Wozu dient die Bibliothek? 4. Wie machen Sie aus einem normalen HTML-Dokument eine Vorlage? 5. Wie installieren Sie Erweiterungsmodule?

Übungen 1. Öffnen Sie eine bereits bestehende Website und ersetzen Sie HTML-Formatierungen durch Stylesheets. 2. Trainieren Sie die Verwendung von Bibliotheken und Vorlagen. Erzeugen Sie Vorlagen von bestehenden Webseiten und fügen Sie neuen Inhalte ein. 3. Gehen Sie auf die Website von Macromedia und installieren Sie neue Erweiterungsmodule für UltraDev. Machen Sie sich mit dem Extension Manager vertraut und wie man damit Erweiterungen installiert.

219

Einführung in dynamische Webanwendungen und Datenbankentwicklung

6

Einführung in dynamische Webanwendungen und Datenbankentwicklung

Was sind eigentlich datenbankgestützte Websites? Welche Vorteile bieten sie gegenüber »normalen« Websites? Welche Kenntnisse braucht man, um sie zu erstellen? Das sind die Fragen, auf die wir in der heutigen Lektion eine Antwort finden wollen. Heute können wir uns einmal zurücklehnen und den Computer ausgeschaltet lassen. Sie werden lernen, was dynamische Websites sind und welche Konzepte dahinter stehen. Leider geht das nicht ohne etwas Theorie. Die heutigen Themen im Überblick: 쐽

Welche Art von Websites lässt sich per Datenbank steuern? Welche Elemente können dynamisch verändert werden?

쐽

Welche Technologien stecken hinter dynamischen Websites und wie werden diese Technologien vom HTTP-Protokoll unterstützt?

쐽

Wie lassen sich datenbankgestützte Websites realisieren? Welchen Planungsaufwand muss man vor der Umsetzung betreiben?

쐽

Wie lautet das kleine Einmaleins des Datenbankentwurfs? Was versteht man unter Normalisierung? Wie baut man eine effektive und leicht zu pflegende Datenbankstruktur auf?

6.1

Dynamische Websites

An den vorausgegangenen Tagen haben wir uns mit der Erzeugung von statischen Websites befasst und haben gerade einmal das erste Viertel des Buches hinter uns gebracht. Zu was in aller Welt muss man nun noch so viel Papier und Druckerschwärze verbrauchen? Nun, für die Erklärung, wie man dynamische Websites erstellt. Aber was versteht man eigentlich darunter? Wenn eine Website dynamisch ist, so heißt das, dass Inhalte eines HTML-Dokuments nicht – wie wir das bisher von HTML-Dateien kennen – statisch, also unveränderlich, sind, sondern ausgetauscht werden können. Diese neuen Inhalte werden dynamisch in Abhängigkeit von den Eingaben des Anwenders erzeugt. Nun haben wir ja schon Seiten erstellt, bei denen sich Objekte verändert oder bewegt haben, wenn der Anwender z.B. den Mauszeiger darauf gesetzt hat. Sind das also auch schon dynamische Websites? Nein, eigentlich nicht. Der Code, auf dem diese Effekte basieren, ist bereits in das HTML-Dokument integriert, alle erforderlichen Rechenoperationen werden clientseitig, vom System des Anwenders, durchgeführt. Bei echten dynamischen Sites wird ein HTML-Dokument aus Programmcode generiert, der vom Server abgearbeitet wird. Rufen zwei Besucher einer Site dasselbe Dokument ab, kann sich der HTML-Code dieser Dateien durchaus unterscheiden. Zur Erstellung einer individualisierten HTML-Seite wird also auf die Rechenleistung des Servers zugegriffen,

222

Dynamische Websites

der das Dokument auf der Grundlage der Anwendereingaben erzeugt. Diese Seite kann nun die Art von dynamischen Elementen enthalten, die wir in den vorhergehenden Lektionen kennen gelernt haben, oder ein gewöhnliches statisches HTML-Dokument sein. Der entscheidende Punkt ist, dass die Seite während der Laufzeit vom Server erzeugt und dann an den Client übertragen wurde. Hinter dynamischen Websites steht gewöhnlich ein Datenbanksystem, um die Datenbestände möglichst effektiv zu speichern und zu verwalten. Dynamisch erzeugte Dokumente lassen sich manchmal an der Extension der angeforderten Datei wie .cgi, .php oder .jsp – kurz allem, was von .htm oder .html abweicht – erkennen. Die Extension einer Datei ist zwar noch keine hundertprozentige Garantie, dass hinter der Website eine Datenbank steht, aber doch ein ziemlich verlässlicher Hinweis. Sie ist auch ein Hinweis darauf, welche Technologie verwendet wird, um die Site dynamisch zu machen. Es gibt zwei verbreitete Ansätze, um dynamische Websites zu erzeugen: den Einsatz von CGI-Scripts und die Verwendung eingebetteter Skriptsprachen.

Traditionelle Programmierung von Web-Applikationen Traditionell konzentrierte man sich bei der Programmierung von Web-Applikationen darauf, spezialisierte Anwendungen zu schreiben, die genau definierte Aufgaben erledigen, die so genannten CGI-Scripts (CGI: Common Gateway Interface). CGI-Scripts sind Anwendungen, die sich im Prinzip nicht von den Programmen unterscheiden, die Sie lokal auf Ihrem Rechner einsetzen, nur dass sie auf einem Server installiert sind. Es sind Programme wie andere auch, nur verwenden sie ein HTML-Interface. Das Hauptproblem von CGI-Scripts ist, dass sie eine Menge Speicherplatz auf dem Server beanspruchen. Eine typische Perl-Anwendung (Perl ist die am weitesten verbreitete Programmiersprache für CGI-Scripts) belegt ungefähr 5 MB RAM. Für einen modernen UNIX- oder NT-Server ist das noch kein Problem, wohl aber das ständige Laden des Programms in den Arbeitsspeicher und das anschließende Löschen. Diese ständigen Ladeund Löschvorgänge machen CGI-Applikationen weit ressourcenhungriger als eingebettete Scriptsprachen, auf die wir im Anschluss eingehen. Bevor sich jetzt allgemein Unmut breit macht, möchte ich darauf hinweisen, dass man das Perl-Problem elegant umgehen kann. Mit der mod_perl-Library für den Apache-Webserver bzw. dem Perl-Add-on von ActiveState für den IIS kann man einen Perlinterpreter in den Webserver integrieren. So muss nicht jedes Mal ein eigener Perl-Prozess gestartet werden, wenn ein CGI-Script aufgerufen wird. CGI-Scripts werden normalerweise programmiert, um eine genau definierte Aufgabe auszuführen. Auf meiner Website unter http://jray.ag.ohio-state.edu/ finden Sie ver-

223

Einführung in dynamische Webanwendungen und Datenbankentwicklung

schiedene solcher CGI-Scripts. Es handelt sich nicht um die üblichen seitenlangen Webapplikationen, sondern sie sind für einen speziellen Einsatzzweck geschrieben (Besucherstatistiken, grafische Netzwerkanalyse usw.). Der »Pferdefuß« an den herkömmlichen CGI-Programmiersprachen ist, dass sie nicht für die Programmierung von Webapplikationen konzipiert wurden. Wofür Sie bei einer herkömmlichen CGI-Applikation mehrere Dutzend Zeilen Code brauchen, lässt sich mit eingebetteten Scriptsprachen vielleicht mit einer einzigen Zeile erledigen. Wenn Sie Erfahrung mit CGI-Scripts haben, werden Sie feststellen, dass der Einsatz von eingebetteten Sprachen den Sourcecode drastisch verkürzen kann.

In den HTML-Code eingebettete Scriptsprachen Eingebettete Scriptsprachen sind die Nachfolger der CGI-Sprachen. In puncto Benutzerfreundlichkeit und Leistungsumfang übertreffen sie herkömmliche CGI-Scripts bei weitem. Der Hauptunterschied zwischen CGI-Scripts und eingebetteten Scriptsprachen lässt sich am besten an der Frage festmachen, wer sozusagen die »Oberhoheit« über den Code hat. Bei CGI-Scripts steht der Code unter der Regie der Programmiersprache, die das HTML-Dokument erzeugt. Bei eingebetteten Sprachen steuert das HTML-Dokument den Code. Statt also erst ein Programm zu schreiben, das dann anschließend eine HTMLDatei ausgibt, schreiben Sie gleich den erforderlichen HTML-Code und setzen dort, wo Elemente dynamisch verändert werden sollen, den entsprechenden Anwendungscode ein. Auch hinsichtlich der Abarbeitung unterscheiden sich die Programmiersprachen. Eingebettete Sprachen werden vom Server abgearbeitet, wenn er die Seite an den Client schickt. Hierzu muss kein externes Programm aufgerufen werden. Der Interpreter für die Sprache ist in den Server selbst eingebunden. Das macht eingebettete Sprachen höchst effektiv, was Geschwindigkeit und Ressourcenbedarf angeht. Ein anderer fantastischer Vorteil von eingebetteten Sprachen ist, dass man mit ihnen direkt auf Datenbanken zugreifen kann. Datenbankunterstützung wurden bei den meisten Programmiersprachen erst nachträglich integriert. Die Entwickler eingebetteter Sprachen erkannten jedoch frühzeitig das Potenzial, das im direkten Zugriff auf Datenbanken aus dem HTML-Code heraus liegt und integrierten dieses Feature von vorneherein in diese Sprachen. Geschwindigkeit und leichte Anwendbarkeit sind nur zwei der Vorteile dieser optimal aufeinander abgestimmten Technologien. Die Kombination von eingebetteten Scriptsprachen und HTML-Code bietet also große Vorteile. In den letzten zwei Jahren sind eingebettete Sprachen daher zu einem wahren Siegeszug angetreten und werden mittlerweile auf breiter Front eingesetzt. UltraDev unterstützt drei Typen eingebetteter Scriptsprachen und ist somit flexibel einsetzbar. Außerdem erlaubt das Programm als eines der ersten dieser Art eine Live-Vorschau dynamischer Websites.

224

Dynamische Sites verstehen

6.2

Dynamische Sites verstehen

Auch wenn es vielleicht den Anschein hat, dass sich die Entwicklung einer dynamischen Website bis auf den Punkt, dass sie eine HTML-Oberfläche benötigt, in nichts von der Programmierung einer anderen Anwendung unterscheidet, so ist hierbei doch eine völlig andere Vorgehensweise vonnöten. Was den Entwicklern von Web-Applikationen das Leben etwas vergällt, ist das HTTP-Protokoll. Was geschieht zum Beispiel, wenn Sie eine Anwendereingabe entgegennehmen, sie verarbeiten, eine weitere Information abfragen, sie verarbeiten und dann das Ergebnis ausgeben? Mit einer gewöhnlichen Programmiersprache ist das kein Problem. Sie strukturieren den Programmablauf genau in der Reihenfolge, wie die einzelnen Bearbeitungsschritte ausgeführt werden sollen. Soll eine Anwendung im Web laufen, müssen Sie an die Programmierung anders herangehen. Der Grund liegt darin, dass immer nur ein Programmschritt auf einmal implementiert werden kann und dass diese Programmschritte irgendwie miteinander verknüpft werden müssen. Nun ist aber das HTTP-Protokoll ein verbindungsloses Protokoll, und zwischen Client und Server besteht zwischen dem Aufruf von zwei dynamisch erzeugten Seiten keine Verbindung. Jede einzelne Seite, die ausgegeben wird, ist – sofern sie dynamisch erzeugt wurde – das Ergebnis der individuellen Ausführung eines Programms auf dem Server. Wenn der Anwender ein Formular abschickt, geht es an den Server, wird dort abgearbeitet und an den Anwender wird eine Ergebnisseite übermittelt. Nach der Übertragung sind die Daten auf dem Server nicht mehr existent und die Verbindung zwischen Client und Server wurde gelöscht. Also, was tun, wenn Sie diese Daten eigentlich für weitere Operationen benötigen? Um eine konstante Verbindung zwischen Client und Server über mehrere Anwenderzugriffe hinweg aufrecht zu erhalten, müssen Sie die Eigenheiten des HTTP-Protokolls überlisten und mit einem so genannten Session-Management arbeiten. Einfach ausgedrückt ist das Session-Management ein Trick, um zwischen dem Anwender und dem Webserver eine permanente virtuelle Verbindung einzurichten, während in Wirklichkeit keine dauerhafte Verbindung besteht. Für die Realisierung eines Session-Managements können Sie zwischen zwei Möglichkeiten wählen – dem Einsatz von Cookies und der Übergabe von Variablen.

Variablenübergabe Variablenübergabe ist eine Möglichkeit, die Werte von verschiedenen Variablen von einem HTML-Dokument an das nächste weiterzugeben. Sie kennen sicher URLs wie die folgende, die sich nicht auf eine bestimmte statische HTML-Seite beziehen: http://www.someplaceurl.com/test.jsp?firstname=John&lastname=Ray

225

Einführung in dynamische Webanwendungen und Datenbankentwicklung

In diesem Beispiel werden die Variablen firstname und lastname an das Programm test.jsp auf dem Server mit den Werten John bzw. Ray übertragen. Sollen bei einer Anwendung Daten zwischen Seiten übergeben werden, kann man diese Werte in Variablen ablegen und an den Link anhängen, der diese Seite aufruft. Wird der Link aktiviert, werden die Daten »weitergereicht«. Man bezeichnet diese Art der Variablenübergabe als GET-Methode. Sie wird häufig verwendet, doch erzeugt sie hässliche Monster-URLs, die zudem manchmal unerwünschte Einblicke ins Innenleben einer Website zulassen. Ein weiterer Nachteil ist, dass beim Bookmarken von Seiten, die mit der GET-Methode erzeugt wurden, diese Variablen mit abgelegt werden. Werden diese Seiten nun wieder aufgerufen, werden auch die Variablen wieder mitgesendet, die beim ersten Aufruf der Seite vom Webserver erzeugt wurden. Der Vorteil der Variablenübergabe per GETMethode ist, dass man die erforderlichen Links gut von Hand erzeugen kann. Parameter aus Datenbankabfragen oder an anderer Stelle eingegebene Benutzerdaten lassen sich so problemlos in einen Link schreiben. Es folgt ein Codebeispiel für einen Request an den Webserver unter Verwendung der GET-Methode: GET / thetest.jsp?firstname=John&password=notonyourlife&lastname=Ray&action=transferbank funds HTTP/1.0 Host: poisontooth.com: User-Agent: Johnclient.pl (Linux)

Daten lassen sich alternativ auch per POST-Methode übergeben. Sie wird gewöhnlich dann verwendet, wenn man Formulardaten an den Server übermitteln möchte, ohne dabei sämtliche Daten in die URL einbetten zu müssen. Gerade bei sehr umfangreichen Formularen ist es nicht wünschenswert, Daten per URL zu übergeben. Die POST-Methode sendet Daten als Teil der Request-Mitteilung an den Server. POST /thetest.jsp HTTP/1.0 Host: poisontooth.com: User-Agent: Johnclient.pl (Linux) Content-type: application/x-www-form-urlencoded Content-Length: 75 firstname=John&password=notonyourlife&lastname=Ray&action=transferbankfunds

Wie Sie sehen, sind die Unterschiede zwar klein, aber umso weitreichender. Abgesehen davon, dass der resultierende HTML-Code übersichtlicher ist, können auch größere Datenmengen per Formular an das Programm übergeben werden. Mit dem POST-Befehl können Sie jedoch nur dann Daten per HTML übergeben, wenn Sie Formulare benützen. Sie können nicht selber eine URL erzeugen und damit per POST-Befehl Daten übergeben. Dadurch lässt sich die POST-Methode nur begrenzt einsetzen. Verwenden Sie jedoch eine Reihe von Formularen, die der Anwender ausfüllen soll, ist die POST-Methode sehr nützlich.

226

Dynamische Sites verstehen

Sitzungsvariablen Egal für welche Art der Variblenübergabe Sie sich letztlich entscheiden, das Problem, wie Sie Ihre Daten verwalten, ist damit noch nicht gelöst. Wenn Sie z.B. eine WarenkorbFunktion programmieren wollen, die alle gekauften Waren in einer Einkaufsliste speichert, wäre es nicht gerade effizient, eine Warenkorb-Variable zu definieren, an diese Variable dann alle Bestellnummern zu hängen und dann per URL an die nächste Seite zu übergeben. Zur Übergabe dieser Informationen empfiehlt sich die Verwendung von Sitzungsvariablen. Sitzungsvariablen sind virtuelle Variablen, die für die Dauer einer Anwendungssitzung vergeben werden. In Sitzungsvariablen lassen sich beliebige Werte ablegen, die nur für die jeweilige Sitzung gültig sind. Da sich die Dauer einer Anwendersitzung nicht vorhersagen lässt, werden die Variablen gelöscht, sobald der Anwender die Seite wieder verlässt. Manchmal werden Sitzungsvariablen auch zeitabhängig gelöscht. Der Anwender wird dann automatisch vom System ausgeloggt, und die gespeicherten Informationen werden gelöscht. Haben Sie nicht auch schon mal einen Webshop besucht und ein paar Dinge in Ihren Einkaufskorb gelegt, um sie dann schließlich doch nicht zu kaufen? Wahrscheinlich haben Sie dann Ihren Einkaufswagen nicht geleert, sondern einfach das Browserfenster geschlossen. Falls Sie dann am nächsten Tag nochmal auf die Site gegangen sind, war Ihr Einkaufskorb wahrscheinlich leer, d.h., die Sitzungsvariable wurde gelöscht. Sitzungsvariablen können, wenn sie intelligent eingesetzt werden, sowohl dem Anwender als auch dem Programmierer das Leben leichter machen. Man kann damit sowohl komplexere als auch sicherere Anwendungen schreiben, als das unter der Verwendung der üblichen Art der Variablenübergabe möglich wäre. Werden Anwendungen mit Sitzungsvariablen aber nicht sauber programmiert, kann sich der Effekt ins Gegenteil verkehren. Bei den meisten Programmiersprachen, die die Definition von Sitzungsvariablen gestatten, können Sie die vollständige Warenkorbstruktur in einer einzigen Variablen abbilden. Das ist zwar möglich, kann aber den Server schon mal in die Knie zwingen. Komplexe Strukturen, die in einer einzigen Variablen abgelegt werden, müssen zuerst serialisiert, d.h. in eine Datenfolge umgewandelt werden, die auf dem Server gespeichert werden kann. Wird die Information nun aus irgendeinem Grund noch einmal abgerufen, muss sie wieder zurückkonvertiert werden. Laufen mehrere solcher Prozesse simultan ab, kann ein Server in puncto Rechenzeit und Ressourcen schon mal an seine Grenzen kommen. Es empfiehlt sich daher, Datenbanken so zu modellieren, dass sie die Struktur der Daten logisch abbilden, und für den Zugriff auf die einzelnen Datensätze jeweils eigene Sitzungsvariablen zu definieren. Der Webserver kann dann sämtliche Daten an den Datenbankserver weitergeben und wird dadurch entlastet.

227

Einführung in dynamische Webanwendungen und Datenbankentwicklung

Ein weiterer Variblentyp, der bei dynamischen Anwendungen zum Einsatz kommt, ist die so genannte Applikationsvariable. Dieser Typ von Variable wird für sämtliche Anwendersitzungen definiert und kann von der gesamten Webanwendung jederzeit abgerufen werden. Ähnlich globalen Variablen gelten Applikationsvariablen als wenig sinnvolles Konzept. Zur Erstellung interner Statistiken von Webanwendungen können sie jedoch recht nützlich sein. Über Session-IDs lassen sich Anwendersitzungen eindeutig identifizieren. Sie sind eine »Gedächtnisbrücke« für den Server, die ihm hilft, sich an bestimmte Werte wieder zu »erinnern«, die der Anwender während einer Session bereits eingegeben hat. Für den Programmierer heißt das, dass er lediglich eine ID von einer Seite zur nächsten übergeben muss, mehr nicht. Leider gibt's auch hier ein kleines Problem mit der Bookmark-Funktion des Browsers. Wird eine URL mit einer Session-ID in der URL als Lesezeichen abgespeichert, kann es – je nachdem, wie die Anwendung konfiguriert ist – zu Fehlermeldungen wie »session expired« oder nicht vorhersehbaren Fehlfunktionen kommen, wenn die Seite wieder aufgerufen wird. Die perfekte Lösung wäre, wenn man das Session-Management so handhaben könnte, dass man Variablen ohne spezielle Programmierung weitergeben kann und die Vorgänge für Anwender und Programmierer transparent sind. Und diese Möglichkeit gibt es: Cookies.

Cookies Cookies sind eine Möglichkeit, wie eine Webanwendung auf dem Clientrechner Informationen ablegen und wieder auslesen kann. Bei vielen Anwendern läuten beim Thema Cookies allerdings die Alarmglocken. Wenn Cookies auf meinem Rechner Daten ablegen können, wer garantiert mir dann, dass sie nicht irgendwelche unerwünschten Transaktionen vornehmen und Daten auf meinem Rechner zerstören? Nun, das ist schon der schlichten Dateigröße wegen nicht möglich. Cookies können gerade mal einige Tausend Bytes haben – was kaum ausreicht, um eine größere Menge an sinnvollen Informationen zu speichern, geschweige denn ganze Programme. Zudem werden Cookies in einer eigenen Datei gespeichert. Sie können diese Datei jederzeit öffnen und ihre Inhalte überschreiben oder löschen. Als Netscape-Anwender können Sie nach der Datei cookies.txt suchen, verwenden Sie den Internet Explorer, sehen Sie im Ordner Cookies im Windowsverzeichnis nach. Nachfolgend ein Ausschnitt aus meiner eigenen Cookie-Datei: #Netscape HTTP Cookie File #http://www.netscape.com/newsref/std/cookie_spec.html #This is a generated file!Do not edit.

228

Dynamische Sites verstehen

free.aol.com FALSE /tryaolfree FALSE 993674880 user 31031923 .excite.com TRUE / FALSE 1057815167 mesp_popup y2k%fDyes .excite.com TRUE / FALSE 1057815167 UID 9A7BF6F2Df023B94 .excite.com TRUE / FALSE 1057815167 registered no .doubleclick.net TRUE / FALSE 1920499223 id 8bccs8ce .deja.com TRUE / FALSE 1102550463 GTUID 04.48861.3.0.f.4363

Jede kommerzielle Website verwendet aus dem einen oder anderen Grund Cookies. Meine Cookie-Datei zählt momentan gut 400 Cookies, obwohl ich meistens technikorientierte Sites ansurfe und nichts online einkaufe. Ein weiterer Vorbehalt gegen Cookies ist, dass man mit ihrer Hilfe das Surfverhalten von Anwendern über mehrere Websites hinweg verfolgen kann. Für manche Sites ist das zwar richtig, aber nur, weil diese Sites untereinander kooperieren. Cookies sind so konzipiert, dass die darin gespeicherte Information nur von der Site ausgelesen werden kann, die das Cookie gesetzt hat. Damit soll Datenklau seitens anderer Webanwendungen verhindert werden. Für die einzelne Site ist es jedoch sehr wohl möglich, die Aktionen des Anwenders zu rekonstruieren. Und das ist ja genau das, was wir erreichen wollen: bestimmte Vorgänge auf der Website einem einzelnen Anwender zuordnen. Mithilfe von Cookies kann der Programmierer ohne besonderen Programmieraufwand Variablen setzen, auf die von jeder Seite der Website aus zugegriffen werden kann. Cookies werden mit einer Pfadangabe gesetzt. Seiten, die innerhalb dieses Pfades stehen, haben Zugriff auf das Cookie. Den folgenden Code schickt eine Website an den Browser mit der Anfrage, ob ein Cookie gesetzt werden darf: Set-Cookie: SESSION=3424; path=/shopping

Sobald das Cookie gesetzt ist, wird jedes Mal, wenn der Client eine URL anfordert, die innerhalb des Verzeichnisses »Shopping« steht, an den Server folgende Mitteilung geschickt: Cookie: SESSION=3424

Mit der Anweisung path=/ definiert die Webanwendung, wann und von welchen Seiten aus der Client die Cookie-Information an die Webanwendung zurückschickt. Wie sieht nun der typische Einsatz von Cookies in Webanwendungen aus? Sind sie ein »Speichermedium«, das sämtliche Informationen aufnimmt, die zwischen den einzelnen Seiten einer Webanwendung übergeben werden müssen? Das wird wohl nur in den seltensten Fällen so sein, wenn die Informationsmenge so gering ist, dass man diese Daten am besten direkt in ein Cookie schreibt. Arbeiten Webanwendungen mit Sitzungsvariablen, dienen Cookies gewöhnlich der Speicherung der vergebenen Session-IDs. Eine Frage wird zwangsläufig immer wieder gestellt: »Soll ich auf meiner Website mit Cookies arbeiten?« Ich persönlich halte Cookies für eine wunderbare Sache, um mit dem geringsten Programmieraufwand dem Besucher ein

229

Einführung in dynamische Webanwendungen und Datenbankentwicklung

Höchstmaß an Anwendungsfreundlichkeit zu bieten. Wenn Sie Ihre Besucher darüber aufklären, warum und wie Sie Cookies einsetzen, dürfen Sie auch mit entsprechender Akzeptanz rechnen. Die Alternative zu Cookies wäre, mit Variablenübergabe zu arbeiten, eine in meinen Augen alles andere als verlockende Perspektive. Bei den verschiedenen Webanwendungen, die wir im Laufe dieses Buches noch gemeinsam entwickeln werden, werden wir jeweils die Techniken verwenden, die für den jeweiligen Zweck am sinnvollsten sind. Mit UltraDev können Sie beide Varianten des Session-Managements automatisieren. Das Programm erlaubt sowohl die Verwendung von Cookies als Art globaler Variable als auch die Übergabe von Variablen an die nächste Seite per Link.

6.3

Dynamische Websites kreieren

Die Entscheidung, ob und wann man eine Website um dynamische Funktionen erweitert, sollte nicht überstürzt getroffen werden. Ich habe Websites betreut, die aus den unterschiedlichsten Gründen als statische Websites konzipiert und umgesetzt wurden. Die monatliche Aktualisierung dieser Sites erfordert nun aber jedes Mal mehrere Arbeitsstunden, um alle betroffenen Seiten auf den neuesten Stand zu bringen. Je umfangreicher solche Sites mit der Zeit werden, desto aufwändiger wird es, sie zu warten, und umso größer werden die Schwierigkeiten, sie dynamisch an eine Datenbank anzubinden. Es empfiehlt sich dringend, für jede Website, die aus mehr als einem HTML-Dokument besteht, eine Sitemap anzulegen, auch wenn dies am Anfang völlig überflüssig erscheint. Eines vielleicht gar nicht so fernen Tages werden Sie ganz froh darüber sein.

Verschiedene Typen dynamischer Websites Wenn abzusehen ist, dass eine Website häufig aktualisiert werden muss, ist sie ein »Bilderbuchkandidat« für eine Datenbankanbindung. Dynamische Websites entlasten den Bearbeiter von der lästigen Pflicht, jedes Mal den gesamten HTML-Code aktualisieren zu müssen, wenn sich ein Inhalt ändert. Sie müssen nur einmal eine Dateneingabemaske erstellen, mit der sich dann ebenso leicht arbeiten lässt wie mit einer gewohnten OfficeAnwendung. Auch Sites, bei denen größere Mengen an Benutzerdaten anfallen, eignen sich gut zur Dynamisierung. Erstaunlich oft werden die Ergebnisse von Anwenderbefragungen und Kundenkommentare einfach als E-Mails zusammengefasst und an den Betreiber der Site weitergeleitet. Einige Hundert CGI-Applikationen sind in der Folge damit beschäftigt, diese per Formular gewonnenen Daten in lesbaren Text umzuwandeln und dann per

230

Dynamische Websites kreieren

E-Mail an ein Wesen aus Fleisch und Blut zur endgültigen Bearbeitung weiterzuleiten. Da ist es dann interessant zu hören, dass es eigens Programme gibt, die solche per Webanwendung generierten E-Mails zur leichteren Bearbeitung auf Empfängerseite aufbereiten und in Datenbanken speichern. Wäre es da nicht viel einfacher, diese Daten nicht gleich von Anfang an in einer Datenbank zu erfassen, anstatt den Umweg über Formular zu E-Mail und von E-Mail zu Datenbank zu gehen? Ähnlich verhielt es sich bei einigen großen kommerziellen Sites, an deren Redesign ich mitgearbeitet habe. Anfragen zu Produkten oder andere Daten, die ein Anwender in ein Formular auf der Website eingeben hatte, wurden per E-Mail an den Betreiber der Site weitergeleitet. Dort wurden die E-Mails vom Systemadministrator ausgedruckt und an die verschiedenen Kundenbetreuer zur endgültigen Bearbeitung weitergeleitet. Das ist eigentlich nicht die Art von Prozedere, an die man beim Wort E-Commerce denkt. Hier zeigte sich einmal mehr, wie schwierig es ist, bestimmte Praktiken wieder auszumerzen, wenn sie sich erst einmal eingeschliffen haben. Und schließlich eignen sich alle Websites zur Umstellung auf Datenbanken, die große Mengen von Information hosten (und die für den Anwender gut navigierbar gemacht werden sollen). Hat der Anwender z.B. die Möglichkeit, ganze Bücher zu durchsuchen und sich die Ergebnisse strukturiert anzeigen zu lassen, so ist dies für den Nutzwert natürlich unvergleichlich höher, als nur den reinen Text zur Verfügung zu stellen oder allgemeine Informationen über das Buch. Kann der Anwender seine Suchabfragen selbst definieren, wird eine Webdatenbank zu einem fantastischen Recherchewerkzeug.

Die Planung von dynamischen Websites Der erste Schritt zur Umsetzung einer dynamischen Website besteht in der gründlichen Planung. Wenn Sie schon im Vorfeld die richtigen Entscheidungen treffen, kann Ihnen das später so manches graue Haar ersparen – es ist nämlich alles andere als leicht, eine bis dato statische Website datenbankgerecht aufzubereiten. Tatsächlich können Sie sich gar nichts Schlimmeres antun, als eine Website zunächst statisch anzulegen und sich dann im Nachhinein doch dafür zu entscheiden, die Site an eine Datenbank anzubinden. Je umfangreicher und vielschichtiger eine Site wird, desto stärker sind HTML-Code und Inhalt ineinander verzahnt. In solchen Fällen lässt sich der Übergang von der statischen Website zur dynamischen Webanwendung meistens nur durch völlige Neugestaltung bewältigen. Nachfolgend wird auf die einzelnen Planungsschritte eingegangen.

Eine Sitemap anlegen Erstellen Sie eine detaillierte Sitemap der Website mit allen Bereichen und einer kurzen Beschreibung der Inhalte, die unter diesen Bereichen liegen. Die Sitemap ist das A und O bei der Planung und Umsetzung einer jeden Website, und für dynamische Websites gilt

231

Einführung in dynamische Webanwendungen und Datenbankentwicklung

das noch in weit höherem Maße. Wenn Sie sämtliche Seiten und ihre wechselseitigen Bezüge in einem klaren Struktogramm erfassen, können Sie damit auch gut die Beziehungen erkennen, die zwischen den Daten dieser Seiten bestehen.

Mehrfach vorhandene Informationen ermitteln Stellen Sie fest, ob und welche Informationen in den jeweiligen Bereichen mehrfach vorhanden sind. Häufen sich solche Elemente oder sind sie sehr umfangreich, kann man sie in einer Datenbank ablegen. Bei der Identifizierung solcher Elemente sollten Sie natürlich den gesunden Menschenverstand walten lassen. Nur weil das Wörtchen »der« 19 Mal auf einer Seite vorkommt, sollten Sie es nicht bei jedem Auftreten aus der Datenbank abrufen. Adressen, Kontaktinformationen, Telefonnummern u.ä. – das sind unsere Kandidaten, die sich zur Aufnahme in die Datenbank empfehlen.

Auf Listen überprüfen Überprüfen Sie, ob es irgendwelche Listen mit Informationen gibt, die mehr als einige wenige Einträge umfassen. Listen sind eigentlich schon eine Art Datenbank, nur sind sie nicht in elektronischer Form gespeichert. Auf jeder Website gibt es z.B. Linklisten oder Listen von Presseberichten. Diese Listen werden meistens von Mitarbeitern der Firma gepflegt und nicht von der betreuenden Internetagentur. In den Firmen, mit denen ich zu tun hatte, erledigten das die PR- bzw. die Personalabteilung, die die neuen Daten dann an die Agentur weitergaben. Je länger die Liste war, desto häufiger waren auch doppelte Einträge.

Häufige Änderungen lokalisieren Finden Sie heraus, ob es auf den verschiedenen Seiten Elemente gibt, die häufig verändert oder aktualisiert werden müssen. Der »Lesetipp der Woche« oder ähnliche kurzfristig wechselnde Aufmacher lassen sich gut über eine Datenbank generieren. Ist die Werbeaktion abgelaufen, kann das Buch – um bei diesem Beispiel zu bleiben – in den Archivbereich der Site verschoben werden, sodass sich Interessenten auch später noch über diesen Titel informieren können. Das Wichtigste bei der Planung datenbankgestützter Websites ist der Grundsatz der Verhältnismäßigkeit. Es gibt keine unfehlbaren Gesetze, wann und unter welchen Umständen eine Website an eine Datenbank angebunden werden sollte oder nicht. Besteht Ihre Site nur aus zwei oder drei HTML-Dokumenten, lohnt es den Aufwand nicht, einen Datenbank- bzw. Anwendungsserver aufzusetzen, um sie ins Netz zu stellen. Bei so kleinen Sites ist manuelle Datenpflege das Mittel der Wahl. Als professioneller Webdesigner werden Sie allerdings von Kundenseite oft mit der Forderung konfrontiert, dass mit der erstellten Website kein hoher Wartungsaufwand verbunden

232

Datenbankentwurf

sein soll. Selbst in diesen Zeiten des Internetbooms möchten die Leute möglichst wenig mit HTML und allem, was damit zusammenhängt, zu tun haben. Die Einrichtung eines Datenbank-Backends ist in solchen Fällen die einfachste Lösung, die Informationen auf der Site von einer Anwendung aus zu verwalten. Der Kunde kann somit seine Website stets auf dem neuesten Stand halten, ohne an irgendeinem Punkt mit dem Code in Berührung zu kommen. Und schließlich gibt es noch die Leute, die einfach jeder Mode hinterher rennen. Und bei Websites geht der Trend augenblicklich weg von statischen und hin zu dynamischen, datenbankgestützten Anwendungen. In dieser Hinsicht habe ich durchaus schon einige unangenehme Erfahrungen gemacht. Manche Leute wollen einfach nicht einsehen, dass es Fälle gibt, in denen die damit verbundenen Nachteile in keinem Verhältnis zu den wenigen Vorteilen stehen. Statt einfach, um ein Beispiel zu nennen, ein paar Zeilen im HTML-Code anzupassen, muss man nun erst einmal die Datenbank nach dem zugehörigen Datensatz durchsuchen und ihn dann dort ändern. Datenbankgestützte Websites sind in manchen Fällen auch deshalb schwerer zu warten, weil sie, einmal abgesehen von zusätzlich erforderlichen Arbeitsschritten, auch höhere Anforderungen an das Know-how des Bearbeiters stellen. Mit einem UNIX-Zugang und einem einfachen Palm Pilot könnte ich mich auf nahezu jedem Server einloggen und Änderungen an einer Website durchführen. Liegen die Daten in einer Datenbank, dann geht das nicht mehr so leicht. Treffen Sie diesbezügliche Entscheidungen nur nach reiflicher Überlegung. Setzen Sie nicht irgendwelche Technologien ein, nur weil Ihnen jemand weismachen will, Sie müssten das tun. Vielleicht realisieren Sie eine statische Website und stellen später fest, dass Sie besser doch eine datenbankgestützte Anwendung erstellt hätten. Doch kann es Ihnen genauso gut passieren, dass Sie eine dynamische Website erstellen, die sich als statische Website besser und einfacher hätte pflegen lassen. Die Kunst besteht darin, den später möglicherweise entstehenden Schaden möglichst gering zu halten.

6.4

Datenbankentwurf

Doch bevor wir überhaupt eine datenbankgestützte Website ins Netz stellen können, brauchen wir erst einmal ein Datenbank-Backend, aus dem wir unsere Daten holen können. UltraDev liefert kein solches Backend und sucht auch keines für uns aus. Bevor wir also mit UltraDev dynamische Websites entwickeln können, müssen wir auf unserem Rechner zuerst einen Datenbankserver oder zumindest eine Datenbank wie z.B. MS Access installieren. Aber keine Bange, Sie erhalten später eine schrittweise Anleitung, wie Sie eine MySQL-Datenbank einrichten. Diese Datenbank ist für UNIX-Systeme als Freeware und für Windows NT-Rechner als Shareware erhältlich. Somit kann sie auf jeder beliebigen Plattform, eingeschlossen Mac OS X, eingesetzt werden, und das in vielen Fällen unentgeltlich.

233

Einführung in dynamische Webanwendungen und Datenbankentwicklung

Bevor Sie eine Datenbank anlegen, sollten Sie über die Grundlagen des Datenbankenentwurfs Bescheid wissen. Leider ist es nicht damit getan, dass Sie ein paar Werte in eine Tabelle schreiben und das Ganze dann unter dem Namen Datenbank speichern. Zuerst müssen Sie sich eine Strategie überlegen, wie Sie Ihre Daten sinnvoll strukturieren, damit Sie mit der gespeicherten Information effektiv arbeiten können. Lassen Sie uns daher anhand eines Beispiels den Aufbau einer sauberen Datenstruktur nachvollziehen.

Terminologie der Datenmodellierung Wenn Sie eine Datenbank anlegen, sollten Sie auch die damit verbundene Terminologie kennen. Beginnen wir mit dem Wichtigsten: Was versteht man unter Normalisierung?

Normalisierung Unter Normalisierung versteht man den Prozess, eine Menge von Daten so weit zu reduzieren, dass sämtliche Redundanzen, also mehrfach vorhandene identische Datensätze, ausgeschlossen sind. Hierarchische Datenbanksysteme speichern mehr Daten, als tatsächlich erforderlich sind. Durch Normalisieren wird diese monolithische Datenstruktur heruntergebrochen in mehrere kleinere, besser handhabbare »Datenpakete«. Ziel der Normalisierung ist es, Redundanzen auszuschließen und die Aktualisierung des Datenbestands zu vereinfachen. Der Prozess der Normalisierung erfolgt in mehreren Schritten, wie wir heute noch sehen werden. Diese Schritte kann man als Etappen sehen, um die eine Datenmenge Zug um Zug der endgültigen Form zugeführt wird, die sie dann in der Datenbank haben wird.

Entitäten Entitäten sind so etwas wie ein Oberbegriff, unter dem wir spezielle Daten speichern. Praktisch sind sie gleichbedeutend mit den Tabellen in einer Datenbank. Tatsächlich benennt man die Tabellen einer Datenbank nach diesen aufgestellten Entitäten.

Attribute Entitäten setzen sich aus Attributen zusammen. In gewöhnliche Datenbanksprache übersetzt heißt das, dass Tabellen Felder enthalten. Ein Attribut ist ein Feld innerhalb einer Entität. Sie heißen Attribute, weil sie die Entität näher beschreiben. Die Entität Auto könnte z.B. die Attribute Jahr oder Farbe besitzen.

234

Datenbankentwurf

Identifikationsschlüssel Unter Identifikationsschlüssel versteht man ein Attribut oder eine Gruppe von Attributen, über die ein bestimmter Datensatz und nur dieser Datensatz eindeutig identifiziert werden kann. Für die Definition eines Identifikationsschlüssels gelten drei feste Vorschriften: 쐽

Der Identifikationsschlüssel muss eindeutig definiert sein und immer einen Wert haben. Er darf also nicht leer sein.

쐽

Identifikationsschlüssel dürfen in allen Datensätzen einer Entität jeweils nur einmal vorkommen. Sie dürfen nicht zwei Datensätze innerhalb einer Entität erzeugen, die denselben Identifikationsschlüssel haben. Wenn also zwei Personen denselben Namen haben, können Sie den Namen nicht als Identifikationsschlüssel verwenden.

쐽

Der Identifikationsschlüssel darf sich nicht ändern. Vielleicht scheint Ihnen das im Moment wenig einleuchtend, aber wir werden auf die Gründe hierfür noch eingehen. Veränderliche Werte eignen sich nicht als Identifikationsschlüssel einer Entität.

Beziehungen Beziehungen sind genau das, was sich im Namen ausdrückt – die Art und Weise der Verbindung, die zwischen zwei Informationen oder Datensätzen besteht. Folgende drei Arten oder Grade der Beziehung sind zwischen Entitäten möglich: 쐽

1:1 – Jeder Instanz einer Entität entspricht genau eine Instanz einer anderen Entität. Dieser Fall ist eher selten, denn 1:1-Beziehungen treten gewöhnlich nur innerhalb einer Entität auf und nicht zwischen zwei Entitäten.

쐽

1:n – Einer Instanz einer Entität entsprechen mehrere Instanzen einer anderen Entität. Die Entitäten Kurs und Raumnummer stehen in einer 1:n-Beziehung, denn von einem bestimmten Raum kann es nur eine Instanz geben, aber dieser Raum kann von mehreren Kursen benutzt werden. Die meisten Datensätze fallen unter diese Art von Beziehung.

쐽

m:n – Eine »Viele-zu-viele«-Beziehung. Mehrere Instanzen einer Entität stehen zu mehreren Instanzen einer anderen Entität in Beziehung. Sie dürfen keine m:n-Beziehungen schaffen, da sonst die Zuordnung von Daten zwischen den verschiedenen Entitäten nicht eindeutig ist. Sollte am Ende Ihrer Normalisierungsbemühungen eine m:n-Beziehung stehen, müssen Sie leider Ihre Datenstruktur noch einmal völlig überarbeiten.

235

Einführung in dynamische Webanwendungen und Datenbankentwicklung

Beispiel für eine Normalisierung Nehmen wir an, Sie möchten eine Datenbank für eine Schule erstellen, die die folgenden Informationen enthält: 쐽

Dozent

쐽

Kurse

쐽

Teilnehmer

쐽

Raumnummern

Der erste Gedanke wäre vielleicht, nun die Datenbank auf der Basis einer einfachen Tabelle zu erstellen und in den Spalten Dozent, Kurse, Teilnehmer und Raumnummern die entsprechenden Informationen einzutragen. Wenn wir das mit ein paar einfachen Datensätzen durchspielen, sehen wir jedoch bald, wo bei diesem Datenmodell das Problem liegt. Werfen Sie einen Blick auf Tabelle 6.1. Name des Dozenten

Kurse

Teilnehmer

Raumnummern

Hr. Müller

Chemie I Chemie II

Franz Feinbein Lieschen Müller Otto Döderlein

112, 113

Hr. Müller

Mathematik I

Otto Döderlein Karl Kraut Rosie Rüstig

010, 314, 112

Fr. Meier

Psychologie im Alltag

Hans Holbein Anna Lieblich Susi Söhnlein

212, 112, 322

Tabelle 6.1: Tabellarische Aufbereitung der gewünschten Informationen

Wie Sie sehen, lassen sich mit dieser Tabelle die vorhandenen Daten zwar bequem erfassen, aber die Art der Erfassung macht sie nicht besonders tauglich für praktische Zwecke. Nehmen wir beispielsweise an, Sie möchten herausfinden, welche Kurse ein bestimmter Teilnehmer besucht. Dazu müssten Sie alle Dozenten durchgehen und die Spalte Teilnehmer überprüfen. Das ist in höchstem Maße Zeit raubend und ineffektiv. Um unser Suchverfahren optimieren zu können, müssen wir unseren Datenbestand normalisieren. Zu diesem Zweck werden wir uns heute mit der ersten, zweiten und dritten Normalform auseinander setzen. Es gibt zwar noch weitere Normalformen, doch die ersten drei sind die wichtigsten. Mit jedem Schritt wird ein höherer Grad der Normalisierung erreicht.

236

Datenbankentwurf

Erste Normalform Um Daten in eine Normalform zu bringen, muss man sie in Entitäten zusammenfassen. Wir beginnen mit der Entität Dozent, unter der wir die Attribute Namen der Dozenten, Kurse, Teilnehmer, Raumnummern ablegen. Abb. 6.1 zeigt die grafische Darstellung der Entität Dozent. Um unser Datenmaterial vollständig zu normalisieren, müssen wir unserem Datenbankmodell noch weitere Entitäten hinzufügen. Am Schluss wird es nicht mehr viel gemeinsam haben mit unserem momentanen Modell. Dozent Name des Dozenten unterrichtete Kurse Teilnehmer Raumnummern

Abbildung 6.1: Die Basisentität Dozent nach dem Ausgangsdatenmodell

Die erste Normalform verlangt, dass alle Entitäten eindeutig sein müssen und alle Attribute nur einfache Attributwerte aufweisen, also nicht mehrfach vorkommen dürfen. Um herauszufinden, ob sich Attribute wiederholen, überprüfen wir einfach, ob irgendwelche Attribute im Plural stehen. Und da haben wir gleich mehrfach Anlass, uns am Kopf zu kratzen: 쐽

Kurse

쐽

Teilnehmer

쐽

Raumnummern

All diese Attribute wiederholen sich und dürfen daher nicht in der Entität Dozent enthalten sein, wenn wir unsere Daten in die erste Normalform bringen wollen. Zu diesem Zweck müssen wir diese Attribute herunterbrechen und in ihrer eigenen Entitätentabelle erfassen. Ferner müssen wir überprüfen, ob alle Attribute in die kleinsten sinnvollen Entitäten aufgesplittet worden sind. So sollten Namen z.B. in Vornamen und Nachnamen aufgeteilt werden. Abb. 6.2 zeigt unsere neue Sammlung von Entitäten, die auch gleich um ein paar Attribute erweitert wurden. Wir haben jetzt also vier verschiedenen Tabellen: Dozent, Kurs, Teilnehmer, Raum. Und weil's grad so schön war, habe ich die Entitäten gleich um ein paar Attribute erweitert: Dozent – vname, nname, status, gehalt Kurs – bezeichnung, zeit, thema, level Teilnehmer – vname, nname, alter, level Raum – nummer, plaetze, einrichtung

237

Einführung in dynamische Webanwendungen und Datenbankentwicklung

Dozent

Kurs

vname nname status gehalt

bezeichnung zeit thema level

Teilnehmer

Raum

vname nname alter level

nummer plaetze einrichtung

Abbildung 6.2: Sich wiederholende Attribute erhalten ihre eigene Tabelle.

Jede Entität ist nun eindeutig und enthält keine sich wiederholenden Attribute. Die Entitäten enthalten sich aber nur selbst und haben keine Beziehung zueinander. Somit können wir aus diesem Datenmodell immer nur die Informationen beziehen, die innerhalb einer Entität abgelegt sind. Damit hat dieses Modell allerdings keinen besonderen praktischen Wert für uns. Um nun die Daten zueinander in Beziehung zu setzen, brauchen wir Identifikationsschlüssel. Lassen Sie uns die einzelnen Entitäten der Reihe nach dahingehend untersuchen, was wir als Identifikationsschlüssel verwenden können. Die Entität »Dozent« muss irgendwie adressiert werden können. Der erste Gedanke wäre vielleicht, die Namen der Dozenten als Identifikationsschlüssel zu verwenden. Aber, so muss man sich fragen, ist dieser Wert immer eindeutig und unveränderlich? Da es sich um Personennamen handelt, muss diese Frage mit Nein beantwortet werden. Selbst wenn dieser Fall aller Wahrscheinlichkeit nach nie eintritt, darf die potenzielle Möglichkeit dennoch nicht gegeben sein, damit das Datenmodell korrekt ist. Aus diesem Grund müssen wir für die Entität Dozent einen eindeutigen Identifikationsschlüssel einführen. Wir tun das mit dem Attribut persNr, also einer Personalnummer. Das kann ein beliebiger Wert sein, solange er eindeutig ist. Die meisten Datenbanken verfügen über eine Autowert-Funktion, die an jeden neuen Datensatz automatisch eine neue Nummer vergibt, sodass die Datensätze fortlaufend durchgezählt werden. In Abb. 6.3 sehen Sie die normalisierte Form der Entität Dozent. Bei der grafischen Darstellung von Datenmodellen werden die Attribute, die als Identifikationsschlüssel dienen, in geeigneter Form optisch hervorgehoben. Die Entität Kurs ist ähnlich problematisch wie die Entität Dozent. Vermutlich werden mehrere Kurse mit derselben Bezeichnung angeboten und finden vielleicht sogar parallel statt. Also brauchen wir auch für die Entität Kurs einen Identifikationsschlüssel. Am leichtesten lösen wir dieses Problem, indem wir für jeden Kurs eine eigene Kursnummer vergeben. Da die meisten Kurse sowieso schon eine Nummer haben, brauchen wir uns hier nicht übermäßig verausgaben. Wenn Sie versuchen, einen Datenbestand zu normalisie-

238

Datenbankentwurf

ren, werden Sie auf Informationen stoßen, die Sie bei der Erstellung des Ausgangsdatenmodells zunächst außer Acht gelassen haben, oder auf andere Daten, die sich nun als plötzlich sehr nützlich erweisen und darum in die Datenbank aufgenommen werden sollten. Mit der Vergabe einer Kursnummer ist die Entität Kurs in der ersten Normalform, zu sehen in Abb. 6.4. Dozent persNr* vname nname status gehalt

Abbildung 6.3: Die Entität Dozent in der ersten Normalform

Kurs kursNr* vname nname zeit thema level

Abbildung 6.4: Die Entität Kurs wird über die Kursnummer eindeutig identifiziert.

In unserem Ausgangsdatenmodell waren die Kursteilnehmer nur »Menschen zweiter Klasse«, denn der einzige Weg, über die Teilnehmer etwas herauszufinden, führte über die Entität Dozent. Erfassen wir die Teilnehmer nun in einer eigenen Entität und damit in einer eigenen Tabelle, können wir mit jedem Datensatz noch zusätzliche Informationen speichern. Wie bei der Entität Dozent haben wir auch hier das Problem, dass Teilnehmer denselben Namen haben können, und die Wahrscheinlichkeit ist sogar größer, da es ja mehr Teilnehmer als Dozenten gibt. Wie bei den Dozenten vergeben wir auch für die Teilnehmer Nummern, um sie eindeutig identifizieren zu können. Heraus kommt die erste Normalform der Tabelle Teilnehmer, zu sehen in Abb. 6.5. Teilnehmer teilnNr* vname nname alter level

Abbildung 6.5: Wie bei der Entität Dozent können auch bei der Entität Teilnehmer Namen mehrfach vorkommen.

Die letzte Entität, die adressiert werden muss, ist die Entität Raum. Mit unserer gegenwärtigen Festlegung haben wir Glück. Da sich ein Raum über seine Raumnummer eindeutig von allen anderen Räumen des Gebäudes unterscheiden lässt, sind wir schon am Ziel unserer Bestrebungen. Sollte sich die Volkshochschule jedoch entschließen, ihre Kurse auf mehrere Veranstaltungsorte zu verteilen, bekämen wir Schwierigkeiten. Wir wollen es

239

Einführung in dynamische Webanwendungen und Datenbankentwicklung

aber heute nicht allzu schwer machen und gehen darum davon aus, dass alle Kurse im selben Gebäude stattfinden. Eine vielleicht nicht ganz realistische Annahme, darum können Sie im Übungsteil zu dieser Lektion das Datenmodell dahingehend anpassen, dass die Kurse auf mehrere Veranstaltungsorte verteilt werden. Die endgültige Form der Entität Raum sehen Sie in Abb. 6.6. Raum raumNr* plaetze einrichtung

Abbildung 6.6: Die Entität Raum ist bereits in der Normalform.

Nachdem alle Entitäten in die erste Normalform gebracht sind und eindeutige Identifikationsschlüssel besitzen, können wir daran gehen, die Beziehungen zwischen den einzelnen Entitäten zu definieren. So erhalten wir ein klareres grafisches Datenmodell und können eventuelle Inkonsistenzen besser lokalisieren. Nehmen wir zum Beispiel die Entitäten Kurs und Raum. Sehen Sie sich die verschiedenen Entitäten an und versuchen Sie, die einzelnen Entitäten mit dem Verb »hat« in Beziehung zu setzen. Im Falle von Kurs und Raum ergäbe das: »Jeder Kurs hat einen Raum«. Auf diesem Weg haben wir unsere erste Beziehung ermittelt. Nach unserem Datenmodell lassen sich die nachstehend aufgeführten Beziehungen ermitteln (grafisch dargestellt in Abb. 6.7): Raum raumNr* plaetze einrichtung

1 Kurs

∞

∞

kursNr* zeit thema level

Dozent

∞

persNr* 1 vname nname status gehalt

∞ Teilnehmer teilNr* vname nname alter level

240

Abbildung 6.7: Die Beziehungen innerhalb unseres aktuellen Datenmodells. Nicht unproblematisch!

Datenbankentwurf

쐽

Raum/Kurs (1:n) – In einem Raum können mehrere Kurse stattfinden.

쐽

Dozent/Kurs (1:n) – Ein Dozent kann mehrere Kurse geben.

쐽

Teilnehmer/Kurs (m:n) – Ein Teilnehmer kann mehrere Kurse belegen. Ein Kurs

kann mehrere Teilnehmer haben. Mit der Teilnehmer/Kurs-Beziehung sind wir etwas in die Bredouille geraten. Es handelt sich hier um eine Viele-zu-viele-Beziehung, die wir in zwei getrennte Eins-zu-viele-Beziehungen aufbrechen müssen. Hierzu müssen wir eine dritte Entität einfügen, die zwischen den beiden anderen Entitäten sozusagen den Vermittler spielt. Diese neue Entität muss zu den beiden anderen Entitäten in einer 1:n-Beziehung stehen. Im Falle der Entitäten Teilnehmer und Kurs könnten wir die Entität Platznummer einführen und damit den Platz des Teilnehmers in einem bestimmten Kurs definieren. 쐽

Teilnehmer/Platznummer (1:n) – Ein Teilnehmer kann mehrere Platznummern in

verschiedenen Kursen haben. 쐽

Kurs/Platznummer (1:n) – Ein Kurs kann mehrere Platznummern für Teilnehmer ha-

ben. Raum raumNr* plaetze einrichtung

1

∞ Kurs

Dozent

kursNr* name zeit thema level

∞

persNr* 1 vname nname status gehalt

Abbildung 6.8: Alle Entitäten sind nun in die erste Normalform gebracht und über 1:n-Beziehungen miteinander verknüpft.

1

∞ Platznummer sitzNr*

∞ 1 Teilnehmer teilnNr* vname nname alter level

241

Einführung in dynamische Webanwendungen und Datenbankentwicklung

Damit lösen wir unser m:n-Problem, denn ein Sitzplatz kann nicht von mehr als einem Teilnehmer gleichzeitig besetzt werden, noch können Sitzplätze von mehreren Kursen auf einmal belegt werden. Wir fügen die neue Entität mitsamt ihren Beziehungen in unser grafisches Datenmodell ein und erhalten das in Abb. 6.8 gezeigte Schema. Na, das war jetzt doch Einiges an Gehirnakrobatik. Sie fragen sich vielleicht, was der ganze Aufwand soll, nur um eine simple Datenbank zu entwerfen. Aber – so lehrt die Erfahrung – die Mühe, die Sie in die Entwurfsphase stecken, erspart Ihnen später Einiges an Zeit und Arbeit. Ohne Fleiß gibt's nun mal keinen Preis.

Die zweite Normalform Der Weg zur ersten Normalform war hie und da mit Steinen gepflastert. Im nächsten Schritt müssen wir die Entitäten in die zweite Normalform bringen. Um die Bedingungen für die zweite Normalform zu erfüllen, müssen die Entitäten in einer Form definiert werden, die ermöglicht, dass die einzelnen Attribute (mit Ausnahme des Identifikationsschlüssels) allein vom jeweiligen Identifikationsschlüssel abhängen. Kommen z.B. bestimmte Attribute in verschiedenen Datensätzen einer Entität mehrfach vor, sind also identisch, so sind sie nicht vollständig von einem Identifikationsschlüssel abhängig. Ein Weg, das herauszufinden, ist sich zu fragen: »Wenn sich ein Datum in diesem Datensatz ändert, muss ich es dann in anderen Datensätzen dieser Entität ebenfalls ändern?« Überprüfen Sie unter diesem Gesichtspunkt die verschiedenen Attribute der Entitäten, die wir in unserem Datenmodell aufgestellt haben. In allen Fällen sind sämtliche Attribute von einem Identifikationsschlüssel abhängig. Jeder Datensatz einer Entität kommt nur einmal vor.

Die dritte Normalform Bringt man Daten in die zweite oder dritte Normalform, stößt man immer wieder mal auf Daten, die noch nicht in das Datenmodell integriert sind. Die dritte Normalform bietet weniger Verständnisschwierigkeiten als die zweite. Um die Bedingungen für die dritte Normalform zu erfüllen, muss die Entität bereits in die zweite Normalform gebracht sein und darf keine Attribute enthalten, die in irgendeiner Form voneinander abhängig sind (mit Ausnahme vom ID-Schlüssel). Solche Fälle lassen sich gewöhnlich leicht einkreisen. So gibt es z.B. bei unserer Entität Kurs eindeutig Probleme mit der dritten Normalform. Die Entität Kurs hat die Attribute Name und Thema. Diese beiden Attribute hängen offensichtlich zusammen, also müssen wir die Entität modifizieren, um sie in die dritte Normalform zu bringen. Zu diesem Zweck führen wir eine neue Entität Thema ein, die den Namen des Kurses und sein Thema aufnimmt. Da mehrere Kurse dieselbe Bezeichnung und dasselbe Thema haben können, besteht zwischen Thema und Kurs eine 1:n-Beziehung. Abb. 6.9 zeigt das endgültige Datenmodell.

242

Datenbankentwurf

Unser Datenmodell umfasst nun die folgenden Entitäten: 쐽

Dozent – persNr, vname, nname, status, gehalt

쐽

Kurs – kursNr, zeit, level

쐽

Thema – name, thema

쐽

Teilnehmer – teilnNr, vname, nname, alter, level

쐽

Platznummer – sitzNr

쐽

Raum – raumNr, plaetze, einrichtung

Diese Entitäten und die Beziehungen, die zwischen ihnen bestehen, sind alles, was Sie brauchen, um Datenbanken für dynamische Websites anzulegen.

Vom Entwurf zur Datenbank Haben wir unser Datenbankmodell auf dem Papier konzipiert, ist die Datenbank selbst damit noch nicht vollständig definiert. Wir müssen unsere Informationen noch irgendwie aufbereiten, um die physikalische Datenbankstruktur anlegen zu können. Diese Struktur ist den Entitäten nicht unähnlich, die wir definiert haben, aber wir müssen noch Mittel und Wege finden, wie wir die Beziehungen zwischen ihnen beschreiben. Die Definition mehrerer Tabellen mit den gewählten Attributen reicht offensichtlich nicht aus, um diese Tabellen untereinander zu verknüpfen. Hierzu müssen wir uns noch mit dem Konzept der Schlüssel auseinander setzen.

Datenschlüssel definieren Um unser Datenbankmodell zu komplettieren, brauchen wir noch so genannte Schlüssel, von denen es zwei verschiedene Typen gibt. Der erste ist der so genannte Primärschlüssel, den wir schon kennen gelernt haben, als wir den Identifikationsschlüssel der einzelnen Entitäten definiert haben. Über den Primärschlüssel kann das Datenbanksystem Datensätze eindeutig erkennen. Mit der Definition eines eigenen Schlüssels für jeden Datensatz haben wir eigentlich nichts anderes getan, als jeder Entität ein weiteres, eindeutiges Feld hinzuzufügen. Es wäre aber auch eine andere Vorgehensweise denkbar, vor allem dann, wenn eine Entität auf der »n-Seite« einer 1:n-Beziehung steht. Man kann nämlich verschiedene Attribute einer Entität sozusagen gruppieren und als Primärschlüssel definieren. Ein Beispiel: Der Nachname einer Person kann mehrfach vorkommen und ist daher kein eindeutiges Merkmal, könnte es aber in Verbindung mit anderen Attributen werden. So ist es höchst unwahrscheinlich, dass der Name einer Person in Kombination mit Anschrift und Geburtsdatum nicht eindeutig ist.

243

Einführung in dynamische Webanwendungen und Datenbankentwicklung

Raum raumNr* plaetze einrichtung

1

∞ Thema

Kurs

tname* thema

kursNr* zeit level

1

∞

Dozent

∞

persNr* 1 vname nname status gehalt

1

∞ Platznummer sitzNr*

∞ 1 Teilnehmer teilnNr* vname nname alter level

Abbildung 6.9: Nun ist unser Datenmodell in der dritten Normalform.

Primärschlüssel haben wir also schon verwendet und sie stellen auch kein Verständnisproblem dar. Die zweite Art von Schlüssel, die wir brauchen, ist der so genannte Fremdschlüssel. Mit ihm kommt Bewegung in unsere träge Datenmasse, denn er definiert die Beziehungen zwischen den verschiedenen Entitäten. Der Fremdschlüssel ist nichts anderes als der in einer Entität gespeicherte Primärschlüssel einer anderen Entität. Er macht die Beziehung zwischen diesen beiden Entitäten sozusagen amtlich. Für alle Beziehungen muss auf der »n-Seite« einer Beziehung ein Fremdschlüssel festgelegt werden. Für unser Datenmodell haben wir die folgenden Beziehungen definiert: 쐽

Raum/Kurs (1:n) – In einem Raum können mehrere unterschiedliche Kurse stattfinden.

쐽

Dozent/Kurs (1:n) – Ein Dozent kann mehrere Kurse geben.

쐽

Teilnehmer/Platznummer (1:n) – Ein Teilnehmer kann mehrere Platznummern haben.

244

Datenbankentwurf

쐽

Kurs/Platznummer (1:n) – Ein Kurs hat mehrere Plätze für Teilnehmer.

쐽

Thema/Kurs (1:n) – Ein Thema kann in mehreren Kursen behandelt werden.

In all diesen Fällen muss die »n-Seite« den Primärschlüssel der »1-Seite« erben. Wird ein Primärschlüssel in einer anderen Tabelle gespeichert als in der, in der er definiert wurde, spricht man von ihm als Fremdschlüssel. So müssen wir z.B. in der Entität Kurs das Attribut Raumnummer mit speichern, das wir von der Entität Raum übernehmen. Damit werden die 1:n-Beziehungen der Entität komplettiert. Diesen Schritt müssen wir für alle anderen Entitäten ebenfalls durchführen. Wenn Sie möchten, können Sie das jetzt durchspielen. Abb. 6.10 zeigt das endgültige grafische Modell unserer Datenstruktur. An diesem Punkt haben wir die Daten so weit geordnet, dass wir sie als saubere SQL-Datenbank anlegen können. Raum raumNr* plaetze einrichtung

Thema tname* thema

1

Kurs 1

1

∞

kursNr* raumNr tname persNr level

Dozent 1

∞ ∞

persNr* vname nname status gehalt

Platznummer

∞

sitzNr* kursNr teilnNr

∞

Teilnehmer teilnNr* vname nname alter level

1

Abbildung 6.10: Das endgültige Datenbankmodell

245

Einführung in dynamische Webanwendungen und Datenbankentwicklung

Die fertige SQL-Datenbank In einer späteren Lektion (Tag 12, »Komplexe Datenbankabfragen«) werden Sie etwas über die Datenbank-Abfragesprache SQL lernen. Im Moment wollen wir uns mit einem Blick darauf begnügen, wie unser Datenbankmodell in SQL aussieht. Die Entitäten unseres Modells bilden die Tabellen der Datenbank, die einzelnen Attribute werden zu den Feldern der Tabelle. Es dürfte nicht schwer fallen, die Bezüge zwischen Modell und SQL nachzuvollziehen. create table raumTbl ( raumNr int not null, plaetze int, einrichtung varchar(50), primary key (raumNr) ) create table dozentTbl ( persNr int not null, vname varchar(25), nname varchar(25), status varchar(50), gehalt int, primary key (persNr) ) create table kursTbl ( kursNr int not null, thema varchar(50), persNr int, raumNr int, time time, level int, primary key (kursNr) ) create table themaTbl ( name varchar(50) not null, thema varchar(250), primary key (name) ) create table teilnTbl ( teilnNr int not null, vname varchar(25), nname varchar(25), alter int, level int, primary key (teilnNr) ) create table platznrTbl (

246

Zusammenfassung

sitzNr int not null, teilnNr int, kursNr int, primary key (sitzNr) )

Im Grunde ist daran nichts Geheimnisvolles. Interessant ist ein Vergleich des endgültigen Datenbankmodells mit unserem Ausgangsmodell. Statt einer einzigen Tabelle mit einem Wust von teils redundanten Daten haben wir nun ein logisch strukturiertes Modell von sechs Tabellen.

6.5

Zusammenfassung

Um dynamische, datenbankgestützte Websites zu erzeugen braucht es etwas mehr als nur UltraDev zu öffnen und dann einfach loszulegen. Sie sollten reichlich Zeit auf die Planungsphase verwenden. Es ist effektiver, zunächst einmal auf einem Blatt Papier die komplette Datenbankstruktur zu entwerfen, statt gleich am Programmcode zu stricken und dann festzustellen, dass man die Datenbank nochmal völlig neu konzipieren muss. Bestimmte HTML-Dokumente lassen sich besonders gut dynamisch machen: 쐽

Listen – Einträge in Listen lassen sich gut aus einer Datenbank beziehen und als Tabelle darstellen.

쐽

Mehrfach verwendete Informationen – Bestimmte Informationen, die auf mehreren Seiten verwendet werden, können ebenfalls in einer Datenbank abgelegt werden. So hat man leichten Zugriff darauf und kann sie ohne großen Aufwand aktualisieren.

쐽

Informationen, die häufig aktualisiert werden müssen – Für Informationen, die häufig ausgetauscht oder geändert werden müssen, empfiehlt sich ebenfalls der Einsatz einer Datenbank. Mit einer eigens erstellten Eingabemaske lassen sich diese Informationen leicht auf den neuesten Stand bringen.

Eine Sitemap zu zeichnen und die künftige Site auf diese drei Kategorien hin zu überprüfen sind die ersten Schritte in der erfolgreichen Planung einer dynamischen Webanwendung. Haben Sie alle Informationen vorliegen, die Sie zur Erstellung einer Site benötigen, können Sie ein Datenmodell entwerfen. Das Verfahren, mit dem das Datenmodell um redundante Daten bereinigt wird, bezeichnet man als Normalisierung. Es gibt drei Normalisierungsschritte, die man einhalten sollte, damit das Datenmodell problemlos in eine tatsächliche Datenbank übersetzt werden kann.

247

Einführung in dynamische Webanwendungen und Datenbankentwicklung

Die erste Normalform definiert die Entitäten, mit denen das Modell arbeitet, sowie die entsprechenden Attribute. Damit wird ferner sichergestellt, dass die Attribute nur einmal vorkommen und sich wiederholende Attribute in einer eigenen Tabelle abgelegt werden. Sind die Entitäten definiert, muss geklärt werden, welche Beziehungen zwischen ihnen bestehen. Beziehungen werden graduell eingestuft: 1:1, 1:n, m:n. Die zweite Normalform setzt voraus, dass die Daten bereits in die erste Normalform gebracht sind. Ferner dürfen Attribute ausschließlich vom Identifikationsschlüssel des jeweiligen Datensatzes abhängig sein. Für die dritte Normalform müssen die Entitäten in der zweiten Normalform vorliegen. Zusätzlich muss eine weitere Anforderung erfüllt sein. Hängen Attribute nicht ausschließlich vom Identifikationsschlüssel, sondern von anderen Attributen ab, müssen sie in einer eigenen Tabelle abgelegt werden, damit die Bedingungen für die dritte Normalform erfüllt sind. Der letzte Schritt im Datenbankentwurf besteht in der Anlage der Datenbankstruktur selbst. Die Struktur der Datenbank beruht auf dem fertig ausgearbeiteten Datenbankmodell, muss aber noch um die Informationen ergänzt werden, in welcher Beziehung die Entitäten zueinander stehen.

6.6 F

Was ist der Hauptgrund für den Einsatz von datenbankgestützten Websites? A

F

Vielleicht wundern Sie sich, wieso eine datenbankgestützte Website »pflegeleichter« sein soll als eine auf reinem HTML-Code basierende Site. Wenn Sie eine Datenbank wie MS Access verwenden oder eine Programmiersprache wie RealBASIC, können Sie eine Eingabemaske erstellen, die genauso leicht zu bedienen ist wie eine beliebige Office-Anwendung.

Kann ich Datenbanken auch erstellen, ohne die Daten vorher zu normalisieren? A

248

Das Hauptargument für eine Datenbankanbindung ist die Effizienz. Allzu oft ist das Argument für den Einsatz einer bestimmten Technologie die bloße Verfügbarkeit, nicht tatsächliche praktische Erfordernisse oder Notwendigkeiten. Sie sollten Datenbanken nur dann einsetzen, wenn es die Website um sinnvolle Funktionen bereichert und die Betreuung vereinfacht – nicht, weil es gerade »hipp« ist.

Wie kann man mit einer Datenbank eine leichter bedienbare Oberfläche für eine Webseite erstellen, als das mit HTML-Mitteln möglich wäre? A

F

Fragen und Antworten

Das geht zwar, aber ich würde es nicht empfehlen. Die Normalisierung von Daten führt zu einem effizienten Datenmodell ohne Redundanzen. In manchen Fällen ist ein gewisses Maß an Redundanz vertretbar, und Sie können auf den Prozess der

Workshop

Normalisierung verzichten. Wollen Sie aber professionelle Sites erstellen, möchte ich Ihnen dringend raten, sich die Zeit zu nehmen und die Daten sauber zu normalisieren. F

Mit welchen Problemen muss ich rechnen, wenn ich Daten nicht normalisiere? A

6.7

In diesem Fall müssen Sie damit rechnen, dass Sie wirklich viel Zeit damit aufwenden müssen, um Ihren Datenbestand zu aktualisieren. Nicht normalisierte Datenbanken weisen Redundanzen auf. Somit ist es unmöglich, exakte Suchabfragen zu formulieren. Eine Aktualisierung ist ebenfalls sehr aufwändig, da Sie pro Änderung immer mehrere Datensätze aktualisieren müssen. Bei fünf oder sechs Datensätzen ist das noch kein Problem. Aber, wie Sie sich vorstellen können, wächst die benötigte Zeit mit der Anzahl der Datensätze.

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 Teile einer Website lassen sich am besten dynamisieren? 2. Was bewirkt die Normalisierung einer Datenbank? 3. Was ist die erste Normalform? 4. Was ist die zweite Normalform? 5. Was ist die dritte Normalform? 6. Was versteht man unter einem Primärschlüssel? 7. Was versteht man unter einem Fremdschlüssel?

Übungen 1. Zeichnen Sie Sitemaps von Sites, die Sie erstellt haben oder erstellen wollen. Welche Bereiche ließen sich mit Datenbankanbindung effizienter gestalten? Konzentrieren Sie sich dabei nicht nur auf solch offensichtliche Punkte wie Personaldaten oder Videoarchive. Suchen Sie nach Informationen, die sich zur Manipulation per Datenbank anbieten.

249

Einführung in dynamische Webanwendungen und Datenbankentwicklung

2. Erstellen Sie ein Datenmodell für einen Spielzeugladen mit den Daten aus Tabelle 6.2 und bringen Sie sie in die dritte Normalform. Der Spielzeugladen möchte diese Datenbank für Mailingaktionen verwenden und Kunden anschreiben, die ähnliche Artikel bereits gekauft haben. Artikel

Preis

Käufer

Kategorie

Riesen-Rad

320,00 DM

Lisa Fröhlich, Heinz Kopf, Emma Maier

Räder, Kleinkinder

Toller Flieger

75,00 DM

Emma Maier, Jule Huber, Sven Moser

Jugendliche, Flugzeuge

Murmeln

5,00 DM

Kurt Knobel, Paul Grüblein, Susi Sommer

Kleinkinder, Jugendliche, Erwachsene, Diverses

Tabelle 6.2: Schreiben Sie ein normalisiertes Datenmodell für diesen Spielzeugladen

250

Die unterstützten Skriptsprachen verstehen

7

Die unterstützten Skriptsprachen verstehen

Was tun Sie, wenn Sie noch keinen eigenen Webserver installiert haben und auch sonst keinen Zugriff auf einen Server haben? UltraDev unterstützt drei verschiedene Skriptsprachen (dreieinhalb, um genau zu sein). Wenn Sie kein genaues Verständnis davon haben, was diese Sprachen tun und wo bzw. wie Sie sie einsetzen können, werden Sie eine Bruchlandung erleiden, bevor Sie überhaupt gestartet sind. Um es aber erst gar nicht so weit kommen zu lassen, lernen Sie heute, 쐽

welche Skriptsprachen von UltraDev unterstützt werden und welche Konsequenzen eine Entscheidung für die jeweilige Sprache hat;

쐽

welche Servertypen die gewählte Skriptsprache unterstützen;

쐽

wie der Sourcecode der jeweiligen Skriptsprachen zu lesen und zu interpretieren ist. Dieser Teil ist nicht die ultimative Einführung ins Programmieren, aber danach sollten Sie sich im Programmcode besser zurecht finden können.

7.1

Skriptsprachen in UltraDev

Wenn Sie mit UltraDev das erste Mal eine Live-Data-Verbindung für Ihre Website einrichten, müssen Sie sich entscheiden, in welcher Sprache der erforderliche Sourcecode geschrieben werden soll. Doch das ist Stoff für unsere morgige Lektion. Heute erarbeiten wir uns das Wissen, das uns die morgigen Entscheidungen erleichtert. Wie in Abb. 7.1 zu sehen, werden verschiedene Servermodelle unterstützt: 쐽

ASP (VBScript) – Das Servermodell Active Server Pages mit der Standard-Skriptsprache VBScript.

쐽

ASP (JavaScript) – Das Servermodell Active Server Pages mit der Standard-Skriptsprache JavaScript.

쐽

JSP – Java Server Pages. Java Server Pages werden unter Verwendung von eingebettetem Java-Code (nicht JavaScript) erzeugt.

쐽

CFML – Cold Fusion Markup Language. Die Cold Fusion Markup Language ist keine Programmiersprache im eigentlichen Sinn, vereinfacht aber die Erstellung von Webapplikationen erheblich.

Es gibt wie gesagt vier verschiedene Skriptsprachen und drei verschiedene Servermodelle zur Auswahl. Welche eignet sich nun am besten für Ihre Applikation, was ist langfristig die beste Investition? Wofür soll man sich entscheiden, wenn man noch nach allen Seiten offen ist?

252

Skriptsprachen in UltraDev

Abbildung 7.1: UltraDev unterstützt drei verschiedene Servermodelle und vier verschiedene Skriptsprachen.

Die Projekte in diesem Buch wurden unter Verwendung von Active Server Pages als Serverplattform realisiert. Der den Beispielen beigegebene Code wurde also mit Active Server Pages erzeugt, doch sollte es Ihnen nicht schwer fallen, diese Applikationen so anzupassen, dass sie auch auf anderen Serverplattformen lauffähig sind – vor allem nach der Lektüre dieses Kapitels.

Active Server Pages Active Server Pages sind eine Microsoft-Entwicklung und eine der ersten Technologien überhaupt, die die Programmierung mit eingebetteten Skriptsprachen ermöglicht. Statt wie üblich eine externe Anwendung zu schreiben und von diesem Programm dann den erforderlichen HTML-Code erzeugen zu lassen, können Sie das Programm direkt in den HTML-Code einbetten. Das ASP-Modell ist insofern etwas verwirrend, da es sich hierbei um keine Programmiersprache im eigentlichen Sinn handelt, sondern um ein Set von Technologien, die in Verbindung mit verschiedenen Programmiersprachen funktionieren. Unklar? Dann versuchen wir es mal so herum: Eingebettete Skriptsprachen machen es möglich, Informationen aus Datenbanken auszulesen bzw. dort abzulegen, Cookies zu speichern usw. Das ASP-Modell stellt für all diese Funktionen vordefinierte Routinen zur Verfügung, die von jeder Programmiersprache

253

Die unterstützten Skriptsprachen verstehen

genützt werden können, die Active Server Pages unterstützen. Sie könnten sich z.B. Perl herunterladen und als ASP-Sprache installieren. Allerdings wird Perl als Skriptsprache für Active Server Pages von UltraDev nicht unterstützt. Das Haupt-Handicap von Active Server Pages ist, dass es sich hierbei um eine proprietäre Technologie handelt und nur für zwei Plattformen verfügbar ist. Wenn Sie MS Windows installiert haben, können Sie sich den Personal Web Server (PWS) herunterladen und die ASP-Komponenten installieren. Allerdings ist das nicht die ideale Plattform, denn sie ist mehr als langsam. Während der Arbeit an diesem Buch wollte ich den PWS eigentlich unter Windows ME auf einem 750-MHz-Athlon betreiben. Da ich aber jedes Mal gut 10 Sekunden warten musste, bis die Seite generiert war, gab ich dieses Vorhaben auf und zog auf einen NT 4.0-Server um, der eine wesentlich bessere Performance bietet. Hier liegt das Problem von Active Server Pages. Um damit zu arbeiten, sind Sie an die verschiedenen Microsoft-Plattformen gebunden. Und für Mac-User bzw. Open-Source-Jünger dürften diese Plattformen wahrscheinlich nicht zur ersten Wahl gehören. Doch zum Glück gibt es für alle Probleme eine Lösung. Wenn Sie Active Server Pages einsetzen müssen, aber nicht auf Windows NT/2000 arbeiten, können Sie ein Produkt namens ChiliSoft verwenden. Damit werden Active Server Pages auf verschiedenen UNIXDerivaten lauffähig, unter anderem Solaris und Linux. Der Haken an der Sache ist, dass die Anschaffungskosten für eine UNIX-basierte ASPLösung weit über denen für die NT-Plattform liegen. Sie können sich Testversionen und weitergehende Produktinformationen unter folgender Adresse herunterladen: http://www.chilisoft.com/

Das ist sicher eine gangbare Möglichkeit, hat aber ihre Haken und Ösen. Für den Einsteiger empfiehlt es sich, Servermodell und Skriptsprachen nach den Vorteilen auszusuchen, die sie ihm bieten. Das ASP-Modell ist eine sehr flexible Entwicklungsplattform und bietet einiges an Funktionalität. Als Skriptsprache kommt gewöhnlich VBScript zum Einsatz, allerdings wird manchmal auch JavaScript verwendet. VBScript ist leicht zu lernen, wird aber von vielen als nicht besonders leistungsfähige Programmiersprache angesehen. Gestandene C-Programmierer finden es meist unter ihrer Würde, sich plötzlich wieder mit BASIC abzugeben. Die zweite Möglichkeit, JavaScript, gilt zwar als etwas salonfähiger, hat aber nicht ganz den Chic und die Power »angesagter« Sprachen wie z.B. Java.

254

Skriptsprachen in UltraDev

Java Server Pages Java Server Pages oder JSP ist eine relativ junge Technologie der eingebetteten Programmierung. JSP setzen auf einem Java-Servlet-Modul (auch als Servlet Engine bezeichnet) auf, das seinerseits auf Java basiert. Java-Servlets entsprangen dem Bedürfnis, für Java-Umgebungen ein Java-basiertes Äquivalent zu den traditionellen CGI-Scripts zu schaffen. Ein Servlet ist ein kompiliertes Java-Programm, mit dem sich verschiedene Aufgaben erledigen lassen wie die Erzeugung von HTML-Dokumenten oder die Verarbeitung von Anwendereingaben usw. Servlets halten sich vollständig an den Java-Standard, arbeiten jedoch mit speziellen Klassen zur Erzeugung von dynamischen Webapplikationen. Sie können zwar HTML-Code in ein Servlet einbetten, jedoch kein Servlet in ein HTMLDokument. Um diese Einschränkung zu umgehen, wurden Servlets zu Java Server Pages weiterentwickelt. JSP sind ein Mittel, Java-Code in HTML-Dokumente einzubinden. Was das Ganze noch interessanter macht, ist die Tatsache, dass die JSP-Technologie Java Server Pages vor ihrer Ausführung als Servlet kompiliert. Aber keine Angst, das sind Dinge, die Sie gar nicht wissen müssen, wenn Sie mit JSP arbeiten – die erforderlichen Schritte laufen automatisch auf dem Server ab. Vielleicht erhebt sich nun von der einen oder anderen Seite der Einwand, dass dieser Umwandlungsprozess von JSP zu Servlet zu Performance-Einbußen führt, darum will ich näher darauf eingehen. Wenn eine JSP in ein Servlet übersetzt wird, bleibt das Servlet im Server-Cache gespeichert. Erst wenn die JSP modifiziert wird, wird entsprechend ein neues Servlet erzeugt. Beim ersten Aufruf einer Seite kann es vielleicht zu gewissen Verzögerungen kommen, aber es gibt keinen Grund, sich hinsichtlich der Geschwindigkeit Sorgen zu machen. Einer der Vorzüge von JSP ist, dass es sich um Java pur handelt. Alles, was mit Java realisierbar ist (mit der Ausnahme von grafischen Benutzerschnittstellen), ist auch mit JSP machbar. Das heißt, dass Sie als Java-Programmierer sofort in die Erstellung von JSP einsteigen können. Java ist eine moderne Programmiersprache, die in den letzten Jahren zunehmend an Bedeutung gewonnen und andere Programmiersprachen verdrängt hat. Es gibt auch keine Anzeichen, dass sich daran in nächster Zukunft etwas ändern wird. Java hat auch den Vorzug, vollständig plattformübergreifend und an kein spezielles Betriebssystem gebunden zu sein. Java Server Pages sind ohne Anpassung oder Änderung am Code auf jedem Webserver lauffähig, der JSP unterstützt. Das gilt für sämtliche Bereiche der Seitenerstellung einschließlich Datenbankzugriff. JDBC-Datenbanktreiber können mit nur einer einzigen Treiberdatei auf diverse Datenbanken zuzugreifen. Kopieren Sie den JDBC-Treiber auf einen anderen JSP-Server und eine völlig andere Plattform: Er wird dort genauso funktionieren.

255

Die unterstützten Skriptsprachen verstehen

Der Einsatz von JSP-Anwendungen gestaltet sich etwas flexibler als die Verwendung von ASP- oder ColdFusion-Applikationen. Die JSP-Technologie steht zudem völlig unentgeltlich zur Verfügung. Die Apache Group hat z.B. einen Open-Source-JSP-Server implementiert, der unentgeltlich heruntergeladen werden kann. Dieser Server trägt den Namen Tomcat und wurde vom Apache-Jakarta-Projekt entwickelt. Die JSP-1.1-Spezifikationen wurden vollständig implementiert. Tomcat erfreut sich großer Beliebtheit und entwickelt sich zum meistverwendeten JSP-Server. Wenn Sie in die Entwicklung von JSP-Seiten einsteigen möchten, können Sie sich Tomcat von der Website des Jakarta-Projekts bei Apache herunterladen: http:://jakarta.apache.org/

Da an Tomcat noch fleißig entwickelt wird, müssen Sie ein paar Nachteile in Kauf nehmen – die gewichtigsten sind die mehr als unvollständige Dokumentierung und der wenig anwenderfreundliche Installationsprozess. Wenn Sie mit diesem Manko leben können, werden Sie feststellen, dass Tomcat eine universell einsetzbare Produktionsplattform ist, die auf jedem Betriebssystem lauffähig ist, das JSP unterstützt – von Windows 2000/NT bis zu Mac OS X. Wenn Sie lieber auf kommerzielle Software zurückgreifen, können Sie Ihren Anforderungen entsprechend zwischen mehreren Produkten auswählen. Für Windows und UNIX sind mehrere JSP-Server verfügbar, nachfolgend eine subjektive Auswahl: 쐽

Allaire Jrun – http://www.allaire.com/

쐽

Oracle 8i Jserver – http://www.oracle.com/

쐽

IBM WebSphere Application Server – http://www.software.ibm.com/

쐽

iPlanet Web Server – http://www.iplanet.com/

쐽

Silverstream Application Server – http://www.silverstream.com/

Beim Einsatz von JSP-Servern sind hohe Zuwachsraten zu verzeichnen. Informationen über den neuesten Entwicklungsstand bei JSP-Servern finden Sie auf der Website von Sun unter http://java.sun.com/products/jsp/industry.html

Alle ColdFusion-Jünger seien auf den ersten Hersteller in obiger Liste hingewiesen. Dieselbe Firma, die die ColdFusion-Linie entwickelt und vertreibt, hat ihren eigenen (sehr guten) JSP-Server im Programm. Wenn das kein Indiz für die Leistungsfähigkeit der JSP als Produktionsplattform ist, dann weiß ich es auch nicht.

256

Skriptsprachen in UltraDev

Obwohl es sich also bei JSP um eine auf verbindlichen Standards basierende Serverplattform handelt, die vermehrt Anwendung findet, bleibt da noch die Sache mit Java selbst. Java ist eine moderne, objektorientierte Programmiersprache, die auf Grund ihrer Komplexität an den Lerner einige Ansprüche stellt. Wenn Sie C oder C++ kennen, werden Sie sich mit JSP-Code schnell zurechtfinden. Sind Sie jedoch bisher nur an Visual Basic oder RealBasic gewöhnt, dann kann die Beschäftigung mit JSP zunächst mal zur kalten Dusche werden. Wir werden uns mit JSP-Code später noch näher beschäftigen.

ColdFusion Die am leichtesten handhabbare Skriptsprache ist die ColdFusion Markup Language (CFML). Sie erinnert weniger an eine Programmiersprache, sonder eher an erweitertes HTML, mit dem sich nun plötzlich auch auf Datenbanken zugreifen lässt. Allaire hat mit ColdFusion eine Programmierumgebung entwickelt, die auch den Ansprüchen professioneller Entwickler genügt, anderseits aber so leicht erlernbar ist, dass sie auch den gelegentlichen HTML-Autor nicht abschreckt. Die Entwicklung dynamischer Webanwendungen ist damit für einen großen Anwenderkreis in den Bereich des Möglichen gerückt. Nächste Woche werden wir anhand von Codebeispielen die verschiedenen Skriptsprachen, die UltraDev schreiben kann, direkt miteinander vergleichen. Sie werden feststellen, dass CFML-Code bei weitem am klarsten ist. Während ASP und JSP ihren proprietären Programmcode zwischen speziellen BegrenzerTags in den HTML-Code einbetten, müssen Sie sich bei ColdFusion lediglich an den Anblick ein paar neuer Tags gewöhnen, die in das bekannte HTML-Inventar eingefügt werden. Als ich zum ersten Mal mit dieser erweiterten Entwicklungsumgebung gearbeitet habe, war das ein richtiges Aha-Erlebnis für mich. ColdFusion bricht aus dem Schema herkömmlicher Programmiersprachen aus und betritt echtes Neuland, indem es Datenbankanbindung so einfach macht wie die Erzeugung von normalem HTML-Code. Wenn Sie ColdFusion noch nicht kennen, sollten Sie das unbedingt nachholen. Ich habe meine Programme immer in Java, Perl oder C geschrieben, aber nachdem ich einige Zeit mit ColdFusion gearbeitet hatte, war ich wirklich beeindruckt. Die Entwickler der CFML hatten wirklich an alle Funktionen gedacht, die man sich als Entwickler von Webanwendungen wünscht, und gleich noch einige Dutzend mehr drauf gelegt. Man sollte sich von dem scheinbar simplen ColdFusion-Ansatz der eingebetteten Programmierung nicht täuschen lassen. Man kann mit diesem Programm sehr schnelle und sehr leistungsfähige Webanwendungen realisieren, die sich zudem noch kinderleicht debuggen lassen.

257

Die unterstützten Skriptsprachen verstehen

Doch wo Licht ist, ist auch Schatten, und das gilt auch für ColdFusion. Das erste Problem ist ein mentales, nämlich gewisse fixe Ideen seitens der Programmierer. Programmierer haben immer bestimmte Erwartungen bzw. Vorstellungen, wie eine Programmiersprache aufgebaut zu sein hat. Und diese Konzepte stehen ihnen bei der Beschäftigung mit einer neuen Sprache gerne im Weg. Da wird nach for...next-Schleifen und if...then-Bedingungen Ausschau gehalten und keiner kann sich vorstellen, dass sich komplette Funktionen hinter ein paar Tags verbergen. Sie können nicht glauben, dass die komplexe Syntax einer Schleifenanweisung in einem schlichten -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.

7.2

Die Auswahl des Servers

Eigentlich sollten die folgenden Zeilen in eine kleine Marginalie bzw. Fußnote wandern, aber nach reiflicher Überlegung fand ich, dass dieses Thema einen eigenen Abschnitt innerhalb dieses Kapitels verdient. Wenn Sie sich für eine bestimmte Servertechnologie entschieden haben, müssen Sie sich darüber klar werden, welches Betriebssystem auf dem Server verwendet werden soll. Für alle gängigen Entwicklungsumgebungen können Sie in der Hauptsache zwischen zwei Optionen wählen: UNIX oder Windows. Aber wofür sich entscheiden?

258

Die Auswahl des Servers

Diese Frage wird oft und gerne ausführlich diskutiert, ohne jedoch jemals zu wirklichen Ergebnissen zu führen. Erst kürzlich habe ich wieder in einem IT-Magazin einen Artikel über das Pro und Contra von UNIX und NT gelesen, und obwohl auf dem Cover »die endgültige Antwort« versprochen wurde, blieb der Autor die Antwort auf die Frage, welches System welchem nun vorzuziehen sei und warum, geflissentlich schuldig. Wenn der gewiefte Fachmann sich also weigert, verbindliche Auskunft zu geben, worauf soll der Laie seine Entscheidung in Sachen Serverbetriebssystem dann stützen? Die Wahl der Serverplattform wächst sich mittlerweile fast schon zum selben »Glaubenskrieg« aus wie die Entscheidung für Mac oder Windows-PC. Der jüngste Linux-Boom hat auch hat auch den Markt für UNIX- und UNIX-Derivate wiederbelebt, während man schon allgemein mit einer Abdankung von UNIX als Serverplattform zugunsten von NT rechnete.

Anwenderfreundlichkeit Das Hauptargument für den Einsatz von NT lässt sich auf einen Begriff bringen – Anwenderfreundlichkeit. Auch ohne große Erfahrung im Umgang mit Computern kann man in kurzer Zeit einen Windows NT/2000-Server aufsetzen und ein Netzwerk einrichten. Microsoft hat die Einrichtung der verschiedenen Dienste, die für den Betrieb eines Internetservers erforderlich sind, stark vereinfacht. Die Integration der einzelnen Systemkomponenten und das Zusammenspiel der verschiedenen Anwendungen ist gut gelöst, sodass komplexe Netzwerke leicht aufzubauen und über ein einfaches Interface gut zu administrieren sind. UNIX und Linux sehen diesem Treiben allerdings nicht tatenlos zu. In den letzten beiden Jahren hat sich Linux vom Betriebssystem ohne konsistente Benutzerschnittstelle zum Betriebssystem mit einer der komfortabelsten grafischen Oberflächen überhaupt gemausert. Dank den freien Entwicklern des GNOME- (http://www.gnome.org/) und des KDEProjekts (http://www.kde.org/) kommen Linux-Anwender heute in den Genuss ähnlich bequem per Mausklick zu bedienender Installationsroutinen wie Windows-User. Leider sind noch nicht alle dieser Konfigurations-Tools auf dem Niveau kommerzieller Anwendungen. Zieht man aber in Betracht, dass die Entwicklung von Linux weit schneller vorangetrieben wird als die von Windows oder anderen Betriebssystemen, dürfte diese Einschränkung bald nicht mehr gelten. Obwohl manchmal behauptet wird, dass es sich bei UNIX und Linux um zwei Paar Stiefel handle, stehen sie sich in Wirklichkeit ziemlich nahe. Linux ist eine Open-Source-Implementierung eines UNIX-Derivates. Das Ganze ist letztlich nur eine Frage der Wortwahl, und wo ich die beiden Begriffe verwende, können Sie sie nach Belieben als UNIX oder Linux lesen.

259

Die unterstützten Skriptsprachen verstehen

Welche Dienste werden angeboten? Ein weiteres Entscheidungskriterium für oder gegen ein bestimmtes Betriebssystem ist die Frage, welche Dienste sie bieten. Standardmäßig kommt NT mit einigen grundlegenden Webserver- und Netzwerkdiensten (File Sharing, Print Sharing, Active Directories). Red Hat Linux oder ähnliche Distributionen bieten das Open-Source-Gegenstück dieser Dienste und noch einiges mehr. Der PostgreSQL-Datenbankserver ist ein extrem leistungsfähiger relationaler Datenbankserver, der bei industriellen Standard-Benchmarktests (http://www.greatbridge.com/) Kopf an Kopf mit kommerziellen Produkten von Oracle und Microsoft liegt. Tatsächlich hat der zusammen mit Linux vertriebene Apache-Webserver höhere Zuwachsraten zu verzeichnen als der rein auf NT beschränkte IIS-Server. Die neuesten Statistiken über die Verbreitung der verschiedenen Serverplattformen finden Sie im Internet unter http://www.netcraft.com/survey/

Die verschiedenen Linuxdistributionen unterstützen zwar standardmäßig weit mehr solcher Serverdienste als NT, aber die Konfiguration dieser Dienste gestaltet sich leider unter Linux immer noch schwieriger als unter Windows. Der Internet-Dienstmanager von Windows ermöglicht die Konfiguration von Web-, FTP- und anderen Internetdiensten mittels eines einzigen Interfaces. Unter UNIX müssen Sie pro Dienst jeweils eine eigene Datei öffnen und die Einstellungen von Hand vornehmen.

Stabilität Windows ist im Laufe der letzten Jahre immer stabiler geworden, vor allem mit dem Erscheinen von Windows 2000. Nichtsdestotrotz liegt hier UNIX vorne. Kommerzielle UNIX-Betriebssysteme wie Solaris oder AIX bieten ein Höchstmaß an Stabilität bei kritischen Anwendungen. Es ist ziemlich schwierig, Betriebssysteme in puncto Stabilität miteinander zu vergleichen, und leider sind die meisten Aussagen diesbezüglich sehr subjektiv. Nachfolgend sei als Beispiel die Uptime-Statistik einer stark frequentierten E-CommerceSite angeführt, die auf AIX läuft: www3:/> uptime 10:38AM up 285 days,17:59,1 user,load average: 0.26,0.48,0.45

Es handelt sich hier um einen Produktionsserver mit extrem hoher Auslastung. Der Entwicklungsserver dieser Site ist ein NT 4.0-Rechner, der nur wenig belastet wird. Trotzdem bleibt er öfters stehen und muss ein bis zwei Mal pro Woche neu gebootet werden. Ich würde Ihnen empfehlen, sich umzuhören und für die ins Auge gefasste Serverplattform und Hardware Erfahrungsdaten zu sammeln. Die richtige Kombination von Hard- und Software ist die beste Garantie, dass Ihre Site rund um die Uhr online ist und Sie nicht um 3 Uhr früh durch die Gegend telefonieren müssen, weil Ihr Server wieder mal hängt.

260

Die Auswahl des Servers

Performance/Kosten-Relation Über viele Jahre hat NT bei der Performance/Kosten-Relation gepunktet, da Sie hier relativ preisgünstige, Intel-basierte Hardware einsetzen konnten. Wollten Sie ein UNIX-System verwenden, mussten Sie zum Betriebssystem auch gleich die passende Hardware kaufen. Mit Linux hat sich in dieser Beziehung Einiges geändert. Linux läuft auf derselben Hardware wie NT (und, nebenbei bemerkt, auch auf einigen Plattformen, auf denen NT nicht läuft), stellt aber bei weitem nicht die Anforderungen an die Hardware wie NT und läuft auch kleineren Pentium-Systemen ohne Murren. Die Anschaffungskosten für ein Linux-System (kostenlos, wenn man keine Distribution verwendet) sprechen ebenfalls zugunsten des Open-Source-Betriebssystems.

Support Für viele ist das der eigentliche Knackpunkt. »Was soll ich mit einem Produkt, für das ich keinen Support bekommen kann?« Das ist eine berechtigte Frage, die gerade im Firmenumfeld immer wieder gestellt wird. Hinter NT steht natürlich ein Großkonzern mit den entsprechenden Möglichkeiten. Wird ein Fehler entdeckt, wird er sofort dokumentiert und ein Bugfix bereitgestellt. Man kommt kaum einmal in die Lage, dass man Hilfe suchend das Internet durchstreift in der Hoffnung, jemanden zu finden, der weiß, wovon man da eigentlich spricht. Kommerzielle UNIX-Systeme bieten zwar vergleichbaren Support, für Linux gilt das leider nicht. Linux »gehört« niemandem und es gibt keinen Händler, der im »Garantiefall« tätig werden muss. In vielen Fällen bekommen Sie auf ein Posting in einer Newsgroup Hunderte von nützlichen Antworten, aber es gibt auch Situationen, in denen man völlig auf sich allein gestellt ist, und das kann ganz schön frustrierend sein. Ein Freund von mir hatte z.B. eine neue Ethernet-Karte in seinem Rechner installiert. Nachdem er auf seinem Rechner Linux aufgespielt hatte, musste er feststellen, dass sich die Netzwerkverbindung alle paar Stunden verabschiedete. Er suchte im Internet nach einer Lösung für sein Problem und fand heraus, dass derjenige, der den fehlerhaften Treiber entwickelt hatte, mittlerweile einen neuen Treiber geschrieben hatte. Freudig wollte er auf die Website des Entwicklers gehen, musste aber dann feststellen, dass die Site umgezogen und nicht länger existent war. Diesen Programmierer wieder ausfindig zu machen, ihn per E-Mail um Zusendung eines neuen Treibers zu bitten und anschließend auf eine Reaktion zu warten, zog sich über mehrere Wochen hin. Das Ganze komplizierte sich noch durch eine umständliche und komplizierte Installationsprozedur, die einen Linux-Neuling an den Rand der Verzweiflung treiben kann. Das ist sicher ein Extrembeispiel, doch sollte man Fälle wie den geschilderten mit einplanen.

261

Die unterstützten Skriptsprachen verstehen

Die endgültige Entscheidung Wägt man also die Vor- und Nachteile der jeweiligen Plattformen ab, welche ist dann für die eigenen Zwecke die richtige? Statt einer spreche ich zwei Empfehlungen aus und nenne Ihnen jeweils die Gründe, warum Sie sich für die eine oder andere Seite entscheiden sollten. Option eins: Windows. Mit der Entscheidung für Windows als Serverplattform sind Sie auf der sicheren Seite. Sie bekommen ein hinreichend stabiles System, das leicht zu konfigurieren und pflegen ist. Sie müssen eine größere Anfangsinvestition für die benötigten Softwarekomponenten einplanen, die Sie zur Realisierung Ihrer Website brauchen. Windows ist die beste Wahl für jemanden, der sich nicht noch nebenbei mit Systemadministration und komplexen Betriebsystemfragen auseinander setzen will. Option zwei: UNIX/Linux. Mit der Entscheidung für UNIX bekommen Sie eine sehr flexible und schnelle Plattform. Ihren Server ans Netz zu bringen kostet Sie im Falle von Linux nicht mehr als die eingesetzte Hardware plus Ihre Online-Kosten. Für Technikfreaks oder Leute mit schmalem Geldbeutel ist das ein gewichtiges Argument. Der Support ist allerdings eine zweischneidige Sache, doch wenn Sie Hardware von bekannten Markenherstellern verwenden, ist nicht mit größeren Schwierigkeiten zu rechnen. Wenn es Ihnen schlichtweg wurst ist, wie ein Server funktioniert, sollten Sie lieber die Finger von UNIX lassen. Welchen Server verwendet der Autor? Finden Sie es heraus auf seiner Website unter http://www.poisontooth.com/.

7.3

Ein Blick auf die unterstützten Skriptsprachen

Bisher haben wir uns mit der Frage beschäftigt, welche Skriptsprachen UltraDev verwendet, welche Anwendungsserver diese Sprachen unterstützen und unter welchen Gesichtspunkten man das Betriebssystem des Webservers auswählen sollte. Nun wollen wir uns die Struktur und die Funktionsweise dieser Sprachen näher ansehen. Das Folgende ist natürlich keine Einführung ins Programmieren. Ich möchte Ihnen jedoch das nötige Wissen an die Hand geben, damit Sie die von UltraDev erzeugten Serververhalten analysieren und an Ihre Bedürfnisse anpassen können. Sehen Sie das Folgende als Heranführung an grundlegende Programmierkonzepte für diejenigen, die noch nie eine Zeile Code geschrieben haben. Falls Sie nicht zu dieser Gruppe gehören, bitte ich um Nachsicht.

262

Ein Blick auf die unterstützten Skriptsprachen

Grundlegende Konzepte der Programmierung Gewisse grundlegende Konzepte sind allen Programmiersprachen gemeinsam. Das gilt bei allen sonstigen Unterschieden auch für die von UltraDev unterstützten Skriptsprachen. Am besten versteht man eine Programmiersprache, mit der man sich noch nie befasst hat, wenn man sich ein Verständnis für diese Konzepte erwirbt und sich ansieht, wie diese Sprache sie umsetzt. JavaScript wird zwar von UltraDev unterstützt, doch gehe ich in diesem Zusammenhang nicht darauf ein. Auf einer grundlegenden Ebene unterscheiden sich JavaScript und Java nicht, sodass sich eine nähere Besprechung erübrigt.

Grundsätzliches Bevor wir auf die einzelnen Sprachen eingehen, sollten Sie sich ein paar grundsätzliche Dinge für den Umgang mit dem Programmcode einprägen: 쐽

Tags – ASP- und JSP-Tags werden in spitze Klammern eingeschlossen: . ColdFusion-Tags werden direkt in den HTML-Code eingebettet und sehen aus wie die bekannten HTML-Tags.

쐽

Kommentare – Kommentare werden im ASP-Code durch einen Apostroph ' gekennzeichnet, der die Kommentarzeile einleitet. Kommentare im Java- und CFScriptCode werden durch Doppel-Slash // markiert. Da sämtliche Skriptsprachen den Code in HTML einbetten, können Sie Kommentare auch ganz HTML-konform kennzeichnen:

Diese Schleife wird von 1 bis 5 durchgezählt, genau wie die entsprechenden ASP- und JSPPendants. Das -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:





Gästebuch

Tragen Sie sich bitte in unser Gästebuch ein!

Ihr Name:	E-MailAdresse:
Kommentar:

 

The last 10 people to sign the book said...

770

Tag 16 – Nachrichtenliste (index.asp)

 

D.2 Tag 16 – Nachrichtenliste (index.asp) Die Liste für das Nachrichtenboard musste Werte an sich selbst zurückgeben, die in der SORT BY-Klausel der Abfrage verwendet wurden. Beim Anlegen der Seite haben Sie diese Werte manuell eingefügt. Hier sehen Sie die Hauptseite für die Nachrichtenliste:





Unbenanntes Dokument

Nachrichtenanzeige

Replies: , NEUE ANTWORT HINZUFÜGEN

781 Benutzerdefinierte Codelistings Autor Subject Body Zurück zur Hauptliste

Kennwort:

D.4 Tag 17 – Anmeldeseite (login2.asp) In Kapitel 17 wurden Anmeldeseiten verwendet, um Sitzungsvariablen die Benutzer-ID zuzuweisen. Diese Variable wurde dann genutzt, um den Benutzer zu beobachten, während er sich innerhalb der Site bewegte. Für den grundlegenden Bildschirm zur Anmeldeverarbeitung war eine benutzerdefinierte Programmierung erforderlich, um die Sitzungsvariable zu setzen: Den Quellcode für login2.asp sehen Sie hier:

782

Tag 17 – Anmeldeseite (login2.asp)









Misinformation

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

788

Tag 19 – Bildschirm für die Quizfragen (quiz.asp)

 

 

 

 

 

 

 

 

 

 

Einstellungen

D.6 Tag 19 – Bildschirm für die Quizfragen (quiz.asp) Beim Prüfen des Benutzers muss das Programm wissen, welche Frage gerade angezeigt wird, um die möglichen Antworten für diese Frage anzuzeigen. Das haben wir ermöglicht, indem wir eine der Datensatzgruppen auf einer vorhergehenden Abfrage basieren ließen, die die Frage-ID zurückgab. Die Datensatzgruppen-Definitionen mussten umgeordnet werden, damit sie in der richtigen Reihenfolge ausgeführt wurden. Darüber hinaus wurde ein benutzerdefinierter Code für die Bereichsanzeige eingeführt, um anzuzeigen, dass das Quiz abgeschlossen ist. Den endgültigen Code für den Bildschirm, auf dem die Frage gestellt wird, sehen Sie hier:

789

Benutzerdefinierte Codelistings





0) Then ' last page not a full repeat region MM_offset = MM_rsCount – (MM_rsCount Mod MM_size) Else MM_offset = MM_rsCount – MM_size End If

805

Benutzerdefinierte Codelistings

End If End If ' Cursor auf den ausgewählten Datensatz setzen i = 0 While ((Not MM_rs.EOF) And (i < MM_offset Or MM_offset = -1)) MM_rs.MoveNext i = i + 1 Wend If (MM_rs.EOF) Then MM_offset = i ' set MM_offset to the last possible record End If %> MM_offset) Then MM_size = MM_offset MM_offset = 0 ' Cursor auf den Anfang zurücksetzen If (MM_rs.CursorType > 0) Then MM_rs.MoveFirst Else MM_rs.Close MM_rs.Open End If End If End If %> MM_rsCount – MM_size Or MM_offset = -1) Then If ((MM_rsCount Mod MM_size) > 0) Then MM_offset = MM_rsCount – (MM_rsCount Mod MM_size) Else MM_offset = MM_rsCount – MM_size End If End If End If ' Cursor auf den Anfang zurücksetzen If (MM_rs.CursorType > 0) Then MM_rs.MoveFirst Else MM_rs.Requery End If ' Cursor auf den ausgewählten Datensatz setzen i = 0 While (Not MM_rs.EOF And i < MM_offset) MM_rs.MoveNext i = i + 1 Wend End If %> MM_rsCount) Then searchresults_first = MM_rsCount If (searchresults_last > MM_rsCount) Then searchresults_last = MM_rsCount End If ' den booleschen Wert setzen, der vom zu verbergenden Bereich verwendet wird, um zu prüfen, ob wir uns auf dem letzten Datensatz befinden MM_atTotal = (MM_rsCount -1 And MM_offset + MM_size >= MM_rsCount) %> 0) Then MM_moveParam = "offset" If (MM_keepMove "") Then

808

Tag 20 – In den Einkaufswagen legen (details.asp)

params = Split(MM_keepMove, "&") MM_keepMove = "" For i = 0 To UBound(params) nextItem = Left(params(i), InStr(params(i),"=") – 1) If (StrComp(nextItem,MM_moveParam,1) 0) Then MM_keepMove = MM_keepMove & "&" & params(i) End If Next If (MM_keepMove "") Then MM_keepMove = Right(MM_keepMove, Len(MM_keepMove) – 1) End If End If End If ' Strings für das Verschieben zu Links setzen If (MM_keepMove "") Then MM_keepMove = MM_keepMove & "&" urlStr = Request.ServerVariables("URL") & "?" & MM_keepMove & MM_moveParam & "=" MM_moveFirst = urlStr & "0" MM_moveLast = urlStr & "-1" MM_moveNext = urlStr & Cstr(MM_offset + MM_size) prev = MM_offset – MM_size If (prev < 0) Then prev = 0 MM_movePrev = urlStr & Cstr(prev) %>

Catalog

	Produktkatalog
Go Back                       809 Benutzerdefinierte Codelistings	810 Tag 20 – Artikel aus dem Einkaufswagen löschen (checkout.asp) Artikel #: Preis : Log into the system Related Items: Vorheriger Nächster

D.8 Tag 20 – Artikel aus dem Einkaufswagen löschen (checkout.asp) Das Löschen von Artikeln aus dem Einkaufswagen war eine weitere Herausforderung, weil das von UltraDev automatisch erstellte Verhalten nicht so funktioniert, wie wir uns das vorgestellt haben. Die Änderungen an dieser Seite (checkout.asp) beinhalten das Entfernen von UltraDev erzeugten Codes und der Notwendigkeit einer Serverumleitung.