Dreamweaver 4 : integiertes Webdesign mit professionellen Tools ; [mit UltraDev Mini-Workshop] 3827318084, 9783827318084

Citation preview

Dreamweaver 4

Joerg Kilian

Dreamweaver 4 In t eg riert es Web d esig n m it p ro fessio n ellen To o ls

An imprint of Pearson Education München • Boston • San Francisco • Harlow, England Don Mills, Ontario • Sydney • Mexico City Madrid • Amsterdam

Die Deutsche Bibliothek - CIP-Einheitsaufnahm e Ein Titeldatensatz für diese Publikation ist bei der Deutschen Bibliothek erhältlich.

Die Inform ationen in diesem Produkt w erden ohne Rücksicht auf einen eventuellen Patentschutz veröffentlicht. Warennam en w erden ohne Gew ährleistung der freien Verw endbarkeit benutzt. Bei der Zusam m enstellung von Texten und Abbildungen w urde m it größter Sorgfalt vorgegangen. Trotzdem können Fehler nicht vollständig ausgeschlossen w erden. Verlag, Herausgeber und Autoren können für fehlerhafte Angaben und deren Folgen w eder eine juristische Verantw ortung noch irgendeine Haftung übernehm en. Für Verbesserungsvorschläge und Hinw eise auf Fehler sind Verlag und Herausgeber dankbar.

Alle Rechte vorbehalten, auch die der fotom echanischen Wiedergabe und der Speicherung in elektronischen Medien. Die gew erbliche Nutzung der in diesem Produkt gezeigten Modelle und Arbeiten ist nicht zulässig.

Fast alle Hardw are- und Softw arebezeichnungen, die in diesem Buch erw ähnt w erden, sind gleichzeitig auch eingetragene Warenzeichen oder sollten als solche betrachtet w erden.

Um w elthinw eis: Dieses Buch w urde auf chlorfrei gebleichtem Papier gedruckt. Die Einschrum pffolie – zum Schutz vor Verschm utzung – ist aus um w eltverträglichem und recyclingfähigem PE-Material. 10 9 8 7 6 5 4 3 2 1 05 04 03 02 01 ISBN 3-8273-1808-4

© 2001 by Addison-Wesley Verlag, ein Im print der Pearson Education Deutschland Gm bH, Martin-Kollar-Straße 10–12, 81829 München/ Germ any Alle Rechte vorbehalten Einbandgestaltung: Helm ut Kraus, Düsseldorf Lektorat: Susanne Spitzer, susanne.spitzer@gm x.net Herstellung: Anna Plenk, [email protected] Korrektorat und Satz: angelika.oberm [email protected] Druck und Verarbeitung: Kösel, Kem pten (w w w .KoeselBuch.de) Printed in Germ any

Für Katinka Marie Wer einen Traum nicht durchleben kann, kann auch kein Leben erleben. (Carlos Castaneda)

I NHALT 11

BASIC

12 12 12 13 14 15 15

Einleitung Integration Trends Anspruch Anleitung Tour Workspace

23

PLAN

24 24 25 27 33 40 40 42 44 45 46

Design Screendesign versus Webdesign Informationsdesign Faustregeln Design Guide Projekt Organisation Rollen und Verantwortlichkeiten Pflichtenheft Projektsite Projekttools

49

SITE

50 50 51 55 59 59 60 63 69

Mapping Sitemap Lokale Site Links Managing Entfernte Site Synchronisieren Design Notes Testen

73

184

Formulare

184 185 192 193

Funktionsw eise Form ular erstellen Einstellungen Form ulare und Verhaltensw eisen

196

IM AGE Farben

197 199 201

Websichere Farben Dithering Realitätsnähe

74

PAGE Dokument

74 82 91

Seite Body Text

108

Code

108 111 116 117 119 120

Source Skripte Externe Editoren Referenzpalette Roundtrip Optim ieren

195

121

Elemente und Vorlagen

202

Bildformate

121 124 125 131

Elem entepalette Mit Elem enten arbeiten Vorlagen Bibliothek

136

Tabellen

136 142 155 158 160 163 169

Tags, Attribute und Werte Funktionstabellen Verschachtelte Tabellen Unentbehrliche Helfer Layouten m it Tabellen Layouttabellen Ebenen in Tabellen konvertieren – und zurück

202 204 206 208 210 212 212

GIF JPEG PNG Typografie (Text) als Grafik Transparente Bilder Konvertierungsprogram m e Brow ser-Dithering

213

Bildtechniken

171

Frames

173 175 175 175 176 176 178 179 180 182 183

Fram es erstellen Fram e im Fram e Fram es löschen Fram e-Inspektor Fram e-Seiten sichern Eigenschaften des Fram esets Fram e-Eigenschaften Inhalte einfügen Links und Targets Alternative Vorstellung Arbeiten m it Fram es

213 213 216 217 218 219 221 221 225

Bild einsetzen und m odifizieren Einstellungen Integration Segm entierung Kom plexe Segm entierung Rollover Anim iertes GIF Im agem ap Web-Fotoalbum

229 230

STYLE Stylesheets

230 235

CSS-Stile Stylesheet bearbeiten

240

Ebenen

241 244 246

Ebenen anlegen Ebenenfenster Mit Ebenen arbeiten

249

EXTEND Verhaltensweisen

303

250 250 254

Grundlagen Verhaltensw eisen kurz vorgestellt

304

258

Zeitleisten

258 260 263 267 269

Zeitleisteninspektor Zeitleisten erstellen Objekte anim ieren Zeitleisten und Verhaltensw eisen Hinw eise

Appendix 1: Tools und Anw endungen zur Entw icklung von Websites – ergänzend zu Dream w eaver (DW4)

306

Ereignisse für Verhaltensweisen

306

270

Anpassen und Erweitern

Appendix 2: JavaScript-Ereignisse, kom patible Brow ser und anw endbare Tags

271 271 272 274 274 277 280

Objektepalette Eigene Objekte Befehle Menüs anpassen Tastaturkurzbefehle Erw eiterungen Hinw eise

308

Ressourcen

308 310

Online Offline

311

Bibliografie

313

281

Dynamischer Content

314

EXTRA Interviews

281 281 282 282 284 284 285

Statische versus dynam ische Seiten Webanw endungen Server und Client Anw endungsserver und Datenbank Lastverteilung und Cloning Proprietäre Tags und Server Pages Zum Beispiel Java

287

Dreamweaver UltraDev

287 289

Arbeiten m it UltraDev Kleiner UltraDev-Workshop

314 315 316 318 319 320 322 323 325 327 328 331 332 334

Java-Entw ickler Allround-Webdesignerin Dream w eaver-Evangelist Dream w eaver-Trainer UltraDev-Autorin Webm aster Online-Redakteur Webdesign-Konzeptionerin GoLive-Abtrünniger Intranet-Entw ickler Projektleiterin Office-Konvertierter Webentw ickler Intranet-Designer

336 338

Dank Index

304

APPEND Tools

BASIC BASIC 12 Einleitung 12 12 13 14

Integration Trends Anspruch Anleitung

15 Tour 15

Workspace

12

Einleitung

EINLEITUNG Wie Dreamweaver von anderen Anwendern professionell genutzt wird, erfahren Sie im letzten Teil des Buches.

Dieses Buch richtet sich in erster Linie an Webdesigner und Webentw ickler, die bereits m it Dream w eaver oder anderen WYSIWYG-Editoren arbeiten. Es liefert aber auch interessante Einblicke für Webadm inistratoren und Webstrategen, die Dream w eaver kennen lernen und für den Einsatz in Webprojekten beurteilen m öchten. Nicht zuletzt ist dieses Buch, m it seinen Fallstudien und Mini-Workshops, eine inspirierende Lektüre für Grafikdesigner und Quereinsteiger.

Integration

M it einem kleinen Workshop widmen wir uns im Kapitel Extend auf Seite 249 Dreamweaver UltraDev – der Dreamweaver-Erweiterung für datenbankgestützte Anwendungen.

Dream w eaver hat sich m it der Program m version 4 deutlich w eiter in Richtung eines funktionsbeladenen, frei konfigurierbaren Universalw erkzeugs für Webdesign, Workgroup-Webpublishing und Sitem anagem ent entw ickelt. Mit der vorliegenden Version ist Dream w eaver w eltw eit Marktführer bei den professionellen WYSIWYGEditoren gew orden und w ird verm utlich auch in Zukunft diese Position durch die Gesam tstrategie von Macrom edia stärken können. Die gesam te Program m oberfläche w urde den Macrom edia-Interface-Standards angepasst. Weitere Highlights der Version 4 sind der voll integrierte Code-Editor, der Editoren w ie Hom esite und BBEdit entbehrlich m acht, eine kom plette ReferenzBibliothek, ein integrierter JavaScript-Debugger, ein kom fortables neues LayoutTool für Tabellen sow ie die optim ierte Integration von Firew orks. Im Sitem anagem ent w urden Versioning-Standards w ie WebDAV und Visual Source Safe eingeführt. Workgroup-Managem ent und Site-Reporting w urden w eiter verbessert. Die größte Arbeitserleichterung für Viele bringt vielleicht die neue Elem enteverw altung. Auch die Erw eiterung der individuellen Anpassungsm öglichkeiten durch den eleganten Extension-Manager trägt zur Zufriedenheit bei. Nicht zuletzt sind die interaktiven Hilfestellungen beim Arbeiten verbessert w orden. Neben Dream w eaver stellen w ir in den Beispielen auch ergänzende Websoftw are vor: Grafikprogram m e w ie Firew orks, Im ageReady und Photoshop, die zum Teil direkte Schnittstellen zu Dream w eaver beinhalten.

Trends Einige neue Funktionen von Dreamweaver 4 sprechen wir im Kapitel Tour auf Seite 15 kurz an.

Insgesam t geht die Entw icklung der Werkzeuge für das Webdesign und Sitem anagem ent in Richtung m odularer Erw eiterbarkeit und Schnittstellen zu Webanw endungen. Wichtige Aspekte hierbei sind Content- und Workgroup-Managem ent, Usability, Erfolgskontrolle, E-Com m erce und Datenbankunterstützung sow ie die Einbindung neuer Standards w ie z.B. XML.

Anspruch

Eine Website erfüllt heute im Idealfall folgende Anforderungen:  Lean design: Webseiten m üssen schlank sein, dam it sie schnell geladen w erden. Die enthaltene Grafik m uss gut kom prim iert sein.  Fram eless: Der Einsatz von „glatten“ Seiten ohne Fram es em pfiehlt sich, w enn ein einfacher und flexibler Um gang m it den Inhalten gew ünscht w ird. Seiten ohne Fram es funktionieren besser für die Indizierung in Suchm aschinen, die Site-Statistik und den Ausdruck.  Modular: Die Erw eiterbarkeit (oder auch Reduzierbarkeit) der Site w ird durch einen m odularen Aufbau gew ährleistet.  Skalierbar: die Site und deren Inhalte, die zugrunde liegende Program m ierung und Technik m üssen sich w echselnden Anforderungen (z.B. erhöhten Zugriffszahlen) anpassen.  Dynam isch: Die Erzeugung der Inhalte, die Verw altung, die Interaktion m it dem Benutzer sollten autom atisierbar sein und auf datenbankgestützte Anw endungen zugreifen.  Usability: Die Benutzbarkeit der Site m uss sichergestellt sein. Die Navigation und der gesam te Interaktionsprozess m uss intuitiv bedienbar sein.  Cross platform : Webseiten m üssen m it unterschiedlichen Brow sern auf verschiedenen Betriebssystem en darstellbar sein. Die Site sollte auf verschiedene Serverum gebungen portiert w erden können.  Technik: Die Konzeption der Program m ierung und des Webservers sollte technologische Entw icklungen – zum indestens der nächsten Monate – berücksichtigen.  Content: Die Site sollte interessante, vielleicht exklusive Inhalte anbieten. Aktualisierungen sollen leicht – idealerw eise auch von nicht HTMLkundigen Personen – durchgeführt w erden können.

Anspruch Die m eisten Bücher zu Dream w eaver orientieren sich entw eder an den Features des Program m s oder bringen das Program m dem Leser häppchenw eise in einzelnen Lernschritten näher. Ziel dieses Buches ist nicht, noch ein w eiteres Handbuch zu schreiben, sondern vielm ehr, Dream w eaver aus der Perspektive eines professionellen Anw enders darzustellen. Das vorliegende Buch erhebt dabei keinen Anspruch auf Vollständigkeit. Aufgrund des inzw ischen riesigen Funktionsum fangs von Dream w eaver ist es gar nicht m öglich, alle Funktionen des Program m s zw ischen diesen Buchdeckeln zu dokum entieren. Dies leistet das offizielle Handbuch bzw . die Online-Hilfe viel besser. Seit den Anfängen des World Wide Webs M itte der Neunziger haben sich auch  die Standards für Webdesign immer weiterentwickelt. Neue Trends und M oderichtungen unterliegen immer auch dem Geschmack der einzelnen Kunden und Designer.

13

14

Einleitung

Wir haben versucht, einheitliche Schreibweisen zu verwenden und – wo sinnvoll – auch die englischen Begriffe einzusetzen. Leider sind die deutschen Dreamweaver-Versionen sprachlich nicht optimal und inkonsistent bei den Bezeichnungen im Programm und in der Online-Hilfe. Wir haben uns im Zweifelsfall an das Programm gehalten.

Dieses Buch zeigt Ihnen Wege, unterstützt Sie bei der Planung, hilft Ihnen Fehler zu verm eiden. Das Wichtigste bei der Entw icklung von Websites ist, dass der Entw ickler eine persönliche Vorstellung von dem zu erzielenden Ergebnis hat. Leidenschaft für gutes Design und Gespür für effiziente Kom m unikation sind Grundvoraussetzungen für die Entw icklung guter Websites.

Die Screenshots sind auf dem M acintosh – meistens von Dreamweaver UltraDev – gemacht. Sie sind aber in allen Fällen auf Dreamweaver auch in der WindowsVersion übertragbar.

Wie nutzen Sie dieses Buch am besten? Sie können das Buch von vorn bis hinten in einem Stück lesen. Sie können aber auch einzelne Abschnitte unabhängig voneinander durcharbeiten und zw ischendurch das Begleitm aterial auf der CD-ROM sichten. Die Navigation hilft Ihnen dabei, sich schnell einen Überblick zu verschaffen. Screenshots und Illustrationen im Buch helfen Ihnen, sich ein Bild von den dargestellten Prozessen zu m achen, auch w enn Sie gerade einm al nicht vor dem Bildschirm sitzen. Wie Sie m it dem Stoff um gehen w ollen, bleibt letztendlich Ihnen selbst überlassen. Ich w ünsche Ihnen viel Spaß dabei.

Auf der dem Buch beiliegenden CD-ROM finden Sie das komplette Begleitmaterial zu den Themen dieses Buches.

Anleitung

Ham burg, im März 2001

Joerg Kilian

Workspace

15

TOUR Wodurch unterscheidet sich Dream w eaver von anderen WYSIWYG-Editoren? Das w ichtigste Merkm al von Dream w eaver ist m it Sicherheit die sehr offene Architektur der Program m kom ponenten. Sie gew ährleistet auf der einen Seite eine unkom plizierte Aktualisierung und Sprachlokalisierung durch den Hersteller, auf der anderen Seite bietet sie Entw icklern von Erw eiterungen, Projektadm inistratoren und sogar dem Webdesigner die Möglichkeit, das Program m nach eigenen Vorstellungen anzupassen. Alle konfigurierbaren Einstellungen des Program m s sind in Webstandards um gesetzt: XML, JavaScript und HTML. Das Program m „spricht die gleiche Sprache“ w ie die Webentw ickler!

Workspace Wie arbeiten Sie m it Dream w eaver? Werfen w ir einen ersten Blick auf Dream w eaver und m achen einen kleinen Rundgang durch w ichtige Bedienungsfunktionen:

 Flexibilität Die Bedienung des Program m s ist sehr flexibel und intuitiv. Viele Wege führen ans gew ünschte Ziel. Befehle und Funktionen können auf verschiedene Arten ausgeführt w erden:  Klassisch: Alle jew eils verfügbaren Befehle und Funktionen sind in der oberen Menüleiste des Program m s abrufbar.  Fenster: Viele der Fenster und Paletten enthalten Funktionen, Elem ente und Befehle, die durch Klicken, per Drag & Drop oder Kontextm enüs gesteuert w erden können.  Kontext: Die für ein Elem ent verfügbaren Befehle sind auch über das kontextsensitive Menü (Kontextm enü) erreichbar. Dieses kann über die rechte Maustaste (Window s) oder über KONTROLLTASTE + M AUSKLICK (Mac) aktiviert w erden. In vielen Fällen haben auch Palettenfenster Kontextm enüs, die sich hinter dem schw arzen Dreieck (oben rechts) verstecken.  Tastatur: Alle w esentlichen Befehle sind über Tastaturkürzel abrufbar. Die Tastaturkürzel können individuell angepasst w erden.



Im Verzeichnis „Configuration“ im Dreamweaver-Ordner finden Sie alle Einstellungsdateien. Es sind ausschließlich XM L, JavaScript und HTM L-Dokumente.

Siehe Kapitel Anpassen und Erweitern auf Seite 270.

16

Tour

 Mac … Siehe auch Tastaturbefehle.

Für das Arbeiten m it Dream w eaver ist es unerheblich, ob Sie m it dem Macintosh oder unter Window s arbeiten. Obw ohl in diesem Buch grundsätzlich Screenshots vom Macintosh dargestellt sind, w erden Sie unter Window s einen w eitgehend identischen Aufbau der Fenster und Funktionen finden. Dream w eaver ist von Anfang an als plattform übergreifende Anw endung konzipiert w orden. So gibt es nur Unterschiede, die betriebsbedingt sind, z.B. die Darstellungen der Fenster und Paletten. Weiter gehören dazu unterschiedliche Tastaturbelegungen für Kurzbefehle, die w ir in diesem Buch w eitgehend berücksichtigt haben.

So oder ähnlich  sieht die Arbeitsumgebung von Dreamweaver 4 aus, wenn Sie das Programm zum ersten M al auf dem M acintosh starten.

Dreamweaver hatte leider Probleme mit M acOS 9.1 und der Darstellung von GIFs und M arkierungstechniken mit dem Cursor. Diese wurden mit der Einführung von Quicktime 5 behoben.

 Fenster Die einzelnen Fenster sind als schw ebende Paletten angelegt und können in ihrer Größe und Position der Größe des Bildschirm s und Ihren individuellen Vorlieben angepasst w erden. Über das Menü FENSTER können Fenster und Paletten ein- und ausgeblendet w erden.

Workspace

17

 … oder Windows Ein w eiterer Unterschied in der Darstellung zw ischen Macintosh und Window s tritt in Verbindung m it den HTML-Tags < BR> und < P> auf. Unabhängig davon, ob die Größe per < FONT-Size> oder CSS angegeben w ird, ist die Darstellung auf Macintosh und Window s unterschiedlich. Dieses Problem tritt nicht nur in Dream w eaver, sondern auch in den Brow sern der beiden Plattform en auf.

Siehe auch Kapitel Stylesheets auf Seite 230.



So oder ähnlich sieht die Arbeitsumgebung von Dreamweaver 4 aus, wenn Sie das Programm zum ersten M al unter Windows starten.

 Dokumentfenster Zentrales Elem ent der Dream w eaver-Oberfläche ist das Dokum entfenster, in dem die Seitenelem ente platziert w erden. In der Kopf- und der Fußleiste (Statusleiste) w erden zusätzliche Inform ationen angezeigt und Funktionen abgerufen:  Kopfleiste (Dateinam e und Dokum enttitel)  Sym bolleiste (Steuerungsschaltflächen)  Head-Inhalt (Elem ente des Head-Bereichs)  Tag-Selektor (Ausw ahl des aktiven Elem ents)  Inform ationen (Fenstergröße, Dateigröße und Ladezeiten)  Mini-Launcher (Ein- und Ausblenden von Fenstern)

18

Tour

 Launcher Zum Öffnen und Schließen einzelner Fenster benutzen Sie den Launcher. Praktischer jedoch – insbesondere, w enn Sie m it kleinem Bildschirm arbeiten – ist der neue Mini-Launcher im Fuß des Dokum entfensters. Um die Tafel einer Palette  in eine andere zu verschieben, ziehen Sie diese einfach per Drag & Drop.

 Eigenschafteninspektor Dieses kontextsensitive Fenster w erden Sie im m er geöffnet haben w ollen, da hier alle Inform ationen zu dem aktiven Elem ent angezeigt w erden: M ENÜ: FENSTER: EIGENSCHAFTEN. Also abhängig davon, ob es sich um Text, eine Tabelle oder ein Bild handelt, hat der Eigenschafteninspektor im m er eine andere Inhaltsstruktur. Dies m ag am Anfang etw as verw irrend sein, aber Sie gew öhnen sich schnell an die unterschiedlichen Modi dieses Hilfm ittels. Der Eigenschafteninspektor hat auch – w ieder abhängig vom Kontext – eine erw eiterte Darstellung, die Sie m it dem kleinen w eißen Dreieck unten rechts aufund zuklappen können.

 Objektepalette Neben dem Tag-Selektor gibt es jetzt im Eigenschafteninspektor einen TagM odus, den Sie an dem kleinen Reiter links im Fenster in den Vordergrund holen können.

In diesem Fenster finden Sie – sortiert auf verschiedenen Tafeln, die Sie über das obere Popup-Menü erreichen –, fertige Objekte (Seitenelem ente), die Sie per Drag & Drop ins Dokum entfenster ziehen können. Dieser Palette können Sie auch eigene Objekte oder Tafeln hinzufügen.

Workspace

19

 Quellcode Wichtigstes Fenster neben dem Dokum entfenster ist der Code-Inspektor (FENSTER: CODE-INSPEKTOR). Hier können Sie direkt im Quellcode arbeiten. Die Veränderungen w erden sim ultan zum Dokum entfenster angezeigt. Wenn Sie den Code-Inspektor einblenden, w ird autom atisch die Stelle im Code m arkiert, der das aktive Elem ente im Dokum entfenster entspricht. Neu in Dream w eaver 4 ist die geteilte Ansicht ANSICHT: CODE- UND ENTWURF, die Sie bequem über die Schaltfläche in der Sym bolleiste aktivieren. So haben Sie Entw urf und Code sim ultan im Blick. In den Voreinstellungen können Sie Syntax und Struktur des Codes, die Farbcodierung der einzelnen Tags und w eitere Merkm ale festlegen. Wenn Sie m it externen Editoren arbeiten, w ählen Sie BEARBEITEN: EXTERNER EDITOR… oder BEFEHLSTASTE + E.

Neu in Dreamweaver 4 ist die Layoutansicht, die ausschließlich für Gestaltung mit Tabellen eine Rolle spielt. Sie ist im Fuß der Objektepalette untergebracht. Siehe auch Kapitel Anpassen und Erweitern auf Seite 270.

 Quick-Tag-Editor Der Quick-Tag-Editor bietet Ihnen den Vorteil, HTML-Quellcode direkt im Dokum entfenster bearbeiten zu können.  Im Modus HTML EINFÜGEN w ird neuer Code eingefügt.  Im Modus TAG UM OBJEKT LEGEN w ird um die aktuelle Ausw ahl ein neues Tag gelegt.  Im Modus BEARBEITEN-TAG w ird das bereits vorhandene Tag bearbeitet.  Am schnellsten erreichen Sie den Quick-Tag-Editor über die Tastatur: BEFEHLSTASTE + T. Mit der gleichen Tastenkom bination können Sie – bei aktiviertem Elem ent – zw ischen den Modi des Editors hin- und herspringen.



Die drei verschiedenen M odi des Quick-Tag-Editors. Nach einer kurzen Verzögerung erscheint zwischen den spitzen Klammern ein Auswahlmenü, in dem Sie den gewünschen Tag auswählen können.

20

Tour

Das Programm  können Sie im Fenster „Voreinstellungen“ den individuellen Erfordernissen anpassen.

 Site-Fenster Weitere Informationen im Kapitel M apping auf Seite 50.

Um eine Website m it Dream w eaver zu erstellen, m üssen Sie zuerst eine Site definieren. Diese Site w ird im Site-Fenster dargestellt: M ENÜ: FENSTER: SITEMAP. Das Fenster m uss nicht im m er geöffnet sein, da es sehr viel Raum auf der Arbeitsfläche beansprucht.

 Einstellungen Bevor Sie m it dem Arbeiten beginnen, sollten Sie einen Blick auf die Voreinstellungen w erfen: BEARBEITEN: VOREINSTELLUNGEN… Mit den voreingestellten Werten können Sie ohne Problem e Ihre erste Site erstellen, jedoch lohnt es sich, die m öglichen Einstellungen kennen zu lernen und auszuprobieren, dam it Sie für jede Aufgabe die optim alen Voraussetzungen schaffen. Eine ausführliche Dokum entation der Voreinstellungen finden Sie im Handbuch oder der Online-Hilfe.

Workspace

21

 Hilfe Dream w eaver bietet Ihnen eine ausführliche Online-Dokum entation, die Sie direkt aus dem Program m aufrufen können:  Tastatur: F1  M ENÜ: HILFE: DREAMWEAVER VERWENDEN  kontextsensitiv über das in Fenstern und Paletten enthaltene Icon m it dem Fragezeichen. Ein Klick hierauf bringt Sie direkt zum gew ünschten Them a. Sie navigieren in den Hilfeseiten m it Ihrem Webbrow ser in lokalen Hilfedateien, indem Sie nach bestim m ten Stichw orten suchen, sich den Index anzeigen lassen oder über Verknüpfungen im Text zu assoziierten Inhalten springen. Die Seiten enthalten zum Teil anim ierte Tutorials, die nur m it dem aktuellen Shockw ave-Plug-In sichtbar sind.

Weitere M enüeinträge unter Hilfe beziehen sich auf Erweiterungen (z.B. Exchange, Extension M anager, UltraDev), die z.T. direkt auf OnlineInhalte zeigen.

Weitere Details zu den einzelnen Bedienungselementen finden Sie in den thematisch zugeordneten Abschnitten des Buches.

aktuelles Hilfekapitel scrollbares aufklappbares Menü m it klickbaren Unterpunkten



Über den M enüpunkt „Hilfe“ starten Sie die Online-Hilfe, die in dem eingestellten Primärbrowser angezeigt wird.

w eitere Hilfekapitel ausw ählen

Schaltflächen

Pfadnavigation

lineare Navigation

PLAN

PLAN 24 Design 24 25 27 33

Screendesign versus Webdesign Inform ationsdesign Faustregeln Design Guide

40 Projekt 40 42 44 45 46

Organisation Rollen und Verantw ortlichkeiten Pflichtenheft Projektsite Projekttools

24

Design

D ESIGN Technic distracts – form matters – content counts.

Was bedeutet Design für die Erstellung von Websites? In der Vergangenheit w ar Design in den Inform ationsstrukturen des Internets nur ein Nebenkriegsschauplatz. Der Designer hatte allenfalls die Aufgabe, die Seiten zu „hübschen“, also gut aussehen zu lassen. Die heutigen Anforderungen der neuen Medien geben dem Designer m ehr Spielraum für Gestaltung, aber auch m ehr Verantw ortung. Im Folgenden finden Sie einige Hinw eise zu den Spielregeln.

Screendesign versus Webdesign

Screendesign und Webdesign greifen ineinander, damit Informationsdesign entstehen kann. 

Beim Design von Websites spielen zw ei Faktoren eine Rolle:  Screendesign m eint die Darstellung der einzelnen Seite, m it ihren Navigationselem enten und Inhalten betrachtet nach Form , Farbe, Größe, Typografie, Position im Layout, Hierarchie, Leserichtung etc.  Webdesign bezieht sich auf eine Website als Gesam tobjekt – das Zusam m enspiel der einzelnen Seiten in einem Inform ationsgebäude. Hier sind Struktur, Benutzerführung, Navigierbarkeit etc. gefragt.

Inform ationsdesign

25

Informationsdesign Sie m achen Websites nicht für sich selbst, sondern für „die Welt da draußen“. Denken Sie bei der Erstellung von Websites an folgende Punkte:  Inform ation: Was w ollen Sie auf der Webseite sagen? Welche Art von Inform ation w ird verm ittelt? Wie sind die Inform ationen aufbereitet?  Kom m unikation: Wie w ollen Sie die Inform ation verm itteln? Wie w ird Ihre Website gefunden? Welche Möglichkeiten haben Sie, die Kom m unikation – auch außerhalb des Webs – zu unterstützen?  Zielgruppe: Wer w ird durch die Site angesprochen? Was erw arten die Besucher auf der Site? Welche Vorlieben haben die Besucher? Gibt es kulturelle, sprachliche, soziale oder politische Beschränkungen? Welche Technologien setzt die Zielgruppe ein? Und vielleicht am w ichtigsten: Welcher der Besucher w ird Stam m gast der Site?  Aufm erksam keit: Das w ichtigste und knappste Gut im Web sind „hohe Einschaltquoten“ – eine hohe aw areness. Mit w elchen Mitteln können Sie eine Website m it einer erhöhten Aufm erksam keit ausstatten?  Persönlichkeit: Nichts ist schlim m er als im riesigen Inform ationsnetz des Webs ein Nobody zu sein. Gutes Design zeichnet sich im m er durch einen hohen Grad an Persönlichkeit aus.  Identität: Wichtigstes Hilfsm ittel zur Verm ittlung einer Persönlichkeit ist die Schaffung von Identität. Das bedeutet nicht, dass alle Seiten Ihrer Site gleich aussehen m üssen, sondern dass es bestim m te w iederkehrende Elem ente (Form en, Farben, Logos etc.) gibt, die den Eindruck von Einheit verm itteln.  Seriosität: Sie w ollen m it Ihrer Website Vertrauen gew innen? Sorgen Sie dafür, dass die Inhalte den Besucher nicht verunsichern oder gar verärgern. Setzen Sie vertrauensbildende Maßnahm en ein, w ie z.B. Kontaktm öglichkeiten, kostenlose Beratungsangebote, Sicherheitsm echanism en (SSL) etc.  Konsistenz: Arbeiten Sie grundsätzlich m it w iederkehrenden Elem enten. Dies gilt insbesondere für Navigation, Benennungen, Farben, Maße, Positionen etc. Der Besucher lernt Ihre Site so schneller kennen.

Ganz scharf lassen sich diese beiden Faktoren nicht voneinander trennen. Sie greifen sogar sehr stark ineinander. Wichtig ist jedenfalls, bei Design nicht nur an das starke Visual eines Screens zu denken, sondern das Gesamtwerk vor Augen zu haben.



Awareness: Aufmerksamkeit ist das teuerste Gut im Web.

26

Design

 Strukturen: Denken Sie nicht in einzelnen Seiten, sondern in Kategorien oder Gruppen von Seiten, und w ie diese durch Verknüpfungen m iteinader verbunden w erden. Die Besucher der Site sind gew ohnt, in solchen Strukturen zu denken.  Navigation: Sie können m it Navigation sehr experim entell um gehen, m it dem Resultat, dass der ungeübte Benutzer bald das Fenster schließt. Klassische Navigationsbalken oder auch nur Textlinks sind im m er noch kein schlechter Tipp.  Brow ser: Nicht jeder Brow ser kann das darstellen, w as Sie m it Dream w eaver gestalten können. Vielleicht haben m anche der Besucher noch veraltete Brow ser installiert?  Plug-Ins: Benutzen Sie Elem ente, die Plug-Ins erfordern, nur, w enn es sich um einen w irklich verbreiteten Standard (Flash, PDF etc.) handelt, oder Sie dieses Plug-

In bei der Zielgruppe voraussetzen können.  Technik: Nichts kann lästiger sein als technisch „endgeile“ Websites. Wenn Sie m it Content aufw arten können, verm eiden Sie Technik! Eine gute Geschichte lässt sich auch ohne Shockw ave erzählen (und eine schlechte w ird dadurch auch nicht besser!). Aber guter Content kann m it sinnvoll verw endeter Technik durchaus aufgew ertet w erden und sich dadurch z.B. vom Wettbew erb abheben.

Eine gute  Navigation zeichnet sich durch intuitive Bedienung und M ehrschichtigkeit aus.

Faustregeln

Faustregeln Dam it Sie bei der Erstellung Ihrer Seiten klassische Fehler verm eiden, sind folgende Grundregeln zu beachten:

 Standards einhalten  Halten Sie sich an die HTML-Standards. Zur Zeit gelten im m er noch HTML 4 und JavaScript 1.0 als Webstandards, die von allen gängigen Brow sern angezeigt w erden. Benutzen Sie für den Aufbau Ihrer Seiten die Grundelem ente w ie Head-, Title, Meta-Tags, Alt-Tags für die Bilder. Diese sind notw endig, dam it die Seiten in Suchm aschinen gut indiziert w erden.  Machen Sie Ihre Site Brow ser-neutral. Im Idealfall sollte Ihre Seite auf jedem Brow ser das gleiche Bild abgeben. Arbeiten Sie m it dem „kleinsten gem einsam en Vielfachen“. Legen Sie den Minim al-Brow ser (z.B. Netscape 3.0), die Bildschirm auflösung (z.B. 800 x 600) und Farbtiefe (8-bit) fest, bevor Sie m it der Um setzung beginnen.  Verw enden Sie Schriften, die jeder hat. Schriften w ie Tim es, Helvetica, oder Courier sind auf jedem internetfähigen Rechner installiert. Gängig sind Truetype-Schriften w ie Arial, Verdana und Georgia, die speziell für die Bildschirm darstellung optim iert w urden. 

Wenn Sie sich beim Aufbau einer Seite an die gängigen Standards halten, haben Sie bereits die halbe Aufgabe gelöst.

Schriften wie Helvetica, Times aber auch Verdana und Georgia sind auf fast allen Plattformen zu finden. 

27

28

Design

 Inhalte gestalten  Machen Sie die Startseite besonders. Die Startseite einer Site hat im m er Referenzcharakter und sollte visuell hervorstechen. Legen Sie die Seite m it einer „niedrigen Schw elle“ an, so dass m öglichst viele Besucher die Inform ationen dieser Seite sehen können. Also kein JavaScript oder Flash, ohne alternative Seiten für ältere Brow ser!

Finden Sie für Ihre Startseite eine besondere  Optik. Sie ist Ihre Visitenkarte.

Faustregeln

 Gliedern Sie Ihre Seiten logisch und optisch. Denken Sie an die Leserichtung des Besuchers. Welche

Elem ente sind in der visuellen Hierarchie am w ichtigsten? Wie gehen Sie m it dem Weißraum auf der Seite um ? Machen Sie eine grobe Skizze auf Papier, w o w as stehen soll. Finden Sie ein Layout, das sich w ie ein roter Faden durch alle Seiten zieht. Benutzen Sie Tabellen und Vorlagen.  Verm eiden Sie Stereotypen und Klischees. Wenn Sie eine Baustelle haben, sollten Sie diese nicht im Netz veröffentlichen. Genauso sollten Sie sichtbare Webcounter, kleine zappelnde Männchen m it Presslufthäm m ern, zuckende JavaTicker und eine Mauer von Eine Skizze auf Papier  Banner-Einblendungen verfür das Layout Ihrer Seite ist sicher nicht verkehrt. m eiden.  Geben Sie eine Kontaktm öglichkeit an. Minim ale Forderung ist eine E-Mail-Adresse auf der Startseite. Sie können aber auch eine Kontaktseite m it Postadressen, Ansprechpartnern oder Callcenter-Funktionen ausstatten.  Zeigen Sie Ihre Sitem ap. Der geübte Besucher schaut als Erstes auf die Seitenübersicht. Hier findet er alle Inhalte einer Site – m eist als Text tabellarisch gruppiert und gelistet – auf einen Blick.  Machen Sie Ihre Seite durchsuchbar. Wenn Sie um fangreichen Content ins Web stellen, bieten Sie dem Besucher eine Volltextsuche an, die es ihm erlaubt, Ihre Site nach Schlagw orten zu durchsuchen.  Bieten Sie Hilfestellungen an. Beliebt sind FAQ-Listen m it den m eistgestellten Fragen zur Site (und den entsprechenden Antw orten). Es kann auch sinnvoll sein, spezielle Hilfeseiten zu entw ickeln, die detailliert auf bestim m te Benutzerfragen eingehen. Sehr effizient sind auch gut gestaltete Fehlerm eldungen, die dem Besucher den Fehler erläutern und Lösungsvorschläge anbieten.  Denken Sie an obligatorische Inform ationen. Am Fuß der Seite sollten Inform ationen w ie Copyright, Disclaim er, AGBs, Stand der Änderungen, E-Mail-Adresse u.Ä. stehen.



Informationen, die auf keiner Seite fehlen sollten.

29

30

Design

 Site navigieren

 Die Navigation zieht sich wie ein roter Faden durch alle Seiten einer Site.

 Machen Sie Ihre Site navigierbar. Mit drei Mausklicks sollte der Besucher von jeder Seite zu jeder beliebigen anderen Seite der Site navigieren können. Ist die Navigation zu verspielt, laufen Sie Gefahr, dass sich der Besucher im Inhalt verliert und das Fenster schließt.  Benutzen Sie eine konsistente Navigation. Setzen Sie nur soviel Navigation auf eine Seite, w ie sinnvoll ist. Gleiche Navigationselem ente sollten im m er an der gleichen Stelle stehen. Ergänzen Sie – für Besucher, die die Darstellung von Bildern ausgeschaltet haben – die grafische Navigation durch eine Textnavigation am Fuß der Seite.  Arbeiten Sie m it deutlichen Links. Im Text arbeiten Sie am besten m it klassischen unterstrichenen Textlinks in der Default-Farbe des Brow sers. Sie haben m it CSS aber auch die Möglichkeit die Unterstreichung zu entfernen. Sorgen Sie in diesem Fall dafür, dass das Farbschem a die Links deutlich als solche hervorhebt. Achten Sie darauf, dass die verknüpfte Grafik so groß ist, dass der Benutzer sie auch trifft. Benutzen Sie einen MouseOver-Effekt, um die Schaltfläche als solche optisch hervorzuheben.  Halten Sie die Besucher fest. Lassen Sie sie nicht entkom m en. Benutzen Sie für externe Links ausschließlich externe Fenster. Externe Fenster, die m it eigenem Content gefüllt sind, m üssen schließbar sein, dam it der Besucher zum Ausgangspunkt zurückkehren kann.

Ein schneller Bildschirmaufbau ist garantiert,  wenn Sie die Bilder bereits auf den vorhergehenden Seiten laden.

Faustregeln

 Code optimieren  Optim ieren Sie den Seitenaufbau. Seiten laden schneller, w enn sie ohne Fram es sow ie m it absolut bem aßten Tabellen aufgebaut w urden und alle Bilder m it Dim ensionen versehen sind. Verschachtelte Tabellen laden langsam er, da Sie von innen nach außen aufgebaut w erden m üssen.  Reduzieren Sie grafischen Ballast. Verw enden Sie nur kom prim ierte Grafik, die in Bildschirm auflösung erstellt w urde. Reduzieren Sie die Anzahl der Farben. Benutzen Sie nach Möglichkeit w ebsichere Farben. Verm eiden Sie Skalierungen der Grafik im Im g-Tag.  Nutzen Sie den Brow ser-Cache. Er ist Ihr Freund! Einm al geladene Bilder stehen ohne erneuten Dow nload zur Verfügung. Benutzen Sie die gleiche Grafik auf m ehreren Seiten. Laden Sie große Bilder für folgende Seiten als preload in 1x1 Pixel Größe am Fuß der aktuellen Seite. So sind sie bereits im Cache, w enn die folgenden Seiten aufgerufen w erden.  Achten Sie auf die totale Seitengröße. Trotz der heute stark vergrößerten Bandbreiten w erden Seiten – bedingt durch Netz-und Serverauslastung – nicht im m er schnell geladen. Setzen Sie ein Lim it (z.B. 50 K) für Ihre Seiten, das es auf jeden Fall zu unterschreiten gilt. Größere Seiten nur dann, w enn Sie w irklich etw as Besonderes anzubieten haben. 

Lassen Sie Ihre Site gründlich von den Usern testen. Und verzichten Sie vor allem nicht auf einen Korrekturlauf.

31

32

Design

 Online stellen

Ein Design Guide hilft Ihnen, die wichtigsten M erkmale Ihrer Site zusammenzufassen. 

 Lassen Sie Ihre Seiten korrekturlesen. Zum indestens aber sollten Sie einm al die Rechtschreibprüfung über die Dokum ente laufen lassen, bevor Sie die Site veröffentlichen. Nichts ist peinlicher und unnötiger als Schreibfehler.  Testen Sie Ihre Seiten ausgiebig, am besten online. Lassen Sie Ihre Site von Freunden, Kollegen, am besten aber von jem andem aus Ihrer Zielgruppe testen. Sie w erden Ihnen helfen, Struktur, Navigation und Perform ance der Site zu beurteilen und auf Details hinw eisen, die Ihnen entgangen sind.  Aktualisieren Sie Ihre Seiten regelm äßig. Nichts ist schlim m er als „alte Kam ellen“. Wenn Sie den Content nicht regelm äßig aktualisieren können, achten Sie zum indest darauf, dass der Inhalt der Seiten Interaktion zulässt. Oder setzen Sie Inhalte in die Seite, die per Zufallsgenerator Abw echslung vorgaukeln. Sie können auch Inhalte anderer Anbieter abonnieren, die autom atisch zu Ihrer Seite verknüpft w erden.  Machen Sie Ihre Seiten pflegeleicht. Arbeiten Sie m it Vorlagen (tem plates), die einfach aufgebaut sind, und dem späteren Redakteur der Seiten die Arbeit erleichtert. Heutzutage w erden die w enigsten Seiten vom Webdesigner selbst aktualisiert. Hinterlassen Sie Ihren Nachfolgern nicht ein Buch m it sieben Siegeln: Erstellen Sie einen Design Guide für Ihre Site.

Design Guide

Design Guide Für den Aufbau, Ausbau und die Pflege um fangreicher Sites ist die Erstellung einer Gebrauchsanw eisung sehr sinnvoll. Es haben sich unterschiedliche Nam en für solche Handbücher etabliert: Design Guide, Style Guide, Design Manual etc. Insbesondere für Aufbau und Unterhaltung von Intranet-Lösungen, w o viele verschiedene Abteilungen und Autoren ihre Inhalte in die Site einstellen, ist ein solches Regelw erk w ichtig. Wie eng oder w ie w eit die Spielregeln definiert w erden, hängt ganz von der Art der Site ab. Mitunter w erden nur Seitenform at, Navigation, Schriften, Farben und technische Spezifikationen vorgegeben. Aber auch Art und Menge der eingestellten Inform ationen – sow ie deren Verknüpfung untereinander – kann definiert w erden. In den m eisten Fällen kann ein Handbuch erst geschrieben w erden, w enn die Site fertiggestellt ist, oder w enigsten ein Prototyp (oder Master) m it w esentlichen Seiten existiert. Das Handbuch kann als zusam m enhängendes HTML-Dokum ent online oder offline (z.B. auf CD-ROM) veröffentlich w erden. Das hat den großen Vorteil, dass Musterseiten (tem plates) direkt m it der Anleitung verknüpfbar sind. Es folgen einige Them en, die in einem Design Guide behandelt w erden können. Ausw ahl und Um fang dieser Them enbereiche sind von der Größe der Site, des Projektes oder Unternehm ens abhängig.

Ein Design Guide muss nicht  aufwändig gestaltet sein.

33

34

Design

 Intro         

Leitgedanken zur Site und zum Design Guide Etiquette: Anstandsregeln für den Um gang m it Inform ation Policy: Welche Kom m unikationsw ege w erden angeboten, bzw . sind erw ünscht? Zugang: Wie w ird eine eventuelle Zugangsbeschränkung gehandhabt? Sprache: In w elchen Sprachen w ird die Site erstellt? Abläufe: Gibt es bestim m te Prozeduren für die Freigabe der Inhalte? Autoren: Wie sind die Verantw ortlichkeiten geregelt? Rechte: Wie steht es m it den Rechten (Copyright) an den Inhalten? Kontakte: verantw ortliche Ansprechpartner für den Design Guide

 Content  Inform ation: Welche Art von Inform ation kom m t für die Seiten in Frage?  Quellen: Woher kom m t diese Inform ation?  Struktur: Wie sind diese Inhalte beschaffen? Wie m üssen Sie aufbereitet w erden?  Qualität: Gibt es eine Qualitätskontrolle? Wie können die Inform ationen – vor allem Texte – auf das Web zugeschnitten w erden?  Form ate: Welche Dateiform ate w erden benutzt? Wie können andere Quelldokum ente konvertiert w erden?



Welche Dateiformate  müssen für die Erstellung der Site konvertiert werden?

Wie verzweigen sich die Dokumente der Site?

Design Guide

35

 Site  Sitem ap: Wie ist die Site verzw eigt (docum ent tree)?  Pfade: Welcher Syntax folgen die Nam ensgebungen für Verzeichnisse, Pfade und Dokum ente (Kleinschreibung, Datei-Suffix etc.)?  Technik: Welche Technologie w ird vorausgesetzt (Webserver, Application Server, Datenbank, Netzw erk, Bandbreite, Brow ser etc.)?

Eine Übersicht über häufig verwendete Anwendungen und Formate finden Sie im Anhang.

 Sicherheit: Wie w ird die Site und deren Inhalte gesichert?  Navigation: Wie funktioniert die globale Navigation?  Support: Welche Hilfsfunktionen (Search, FAQ, Sitem ap, Glossar, Feedback etc.) sind vorgesehen? Wie funktionieren sie?

 Dokument  Aufbau: Wie ist das einzelne sichtbare Dokum ent strukturiert (Fram es, Tabellen, Ebenen etc.)?  Technik: Welche Standards sind vorgesehen (Brow ser, Bildschirm größe, Farbtiefe, HTML 4, JavaScript 1.0, Stylesheets CSS 1.0, Flash etc.)?  Navigation: Welche Navigationsm öglichkeiten gibt es innerhalb einer Seite (Next, Previous, Top of Page, Anchor etc.)?  Layout: Wie sieht das Layout einer Seite aus? Wo stehen die einzelnen Elem ente? Wie ist die Inform ationshierarchie aufgebaut? Dürfen Seiten scrollbar sein? Wie lang darf eine Seite sein?  Elem ente: Wie sehen HTML-Elem ente (Title, Head, Meta, Body, Scripte etc.) aus?  Schriften: Mit w elchen Fonts in w elchen Größen w ird gearbeitet?  Links: Wie sehen Textlinks aus? In w elchen Fällen w erden Sie gesetzt?



In welche logischen Bereiche ist ein typisches Dokument der Site gegliedert?

36

Design

 Farben: Welche Farben w erden eingesetzt? Gibt es Hausfarben oder Farbcodierungen die eingehalten w erden m üssen?  Logos: Wie und w o w erden Logos und andere Identitätssym bole angebracht? Gibt es Standardgrößen?  Grafik: Wie w ird m it grafischen Elem enten und Bildern um gegangen? Welche Form ate und Kom prim ierungseinstellungen w erden verw endet? Gibt es ein Bildarchiv, auf das zugegriffen w erden kann?  Druck: Sind die Seiten für einen leichten Ausdruck optim iert? (Fram es drucken von m anchen Brow sern als Default nur das aktive Fram e, nicht die ganze Seite aus.)  Dow nload: Der Zugriff auf Dateien, die nicht im HTML-Form at vorliegen, m uss geregelt w erden. Werden die Daten direkt geöffnet (z.B. m it Word-View er) oder sollen sie gespeichert (z.B. eine Zip-Datei) w erden?  Signatur: In w elcher Form w ird das Dokum ent unterzeichnet (Autor, Abteilung, Stand der Änderungen etc.)?  Index: Müssen die Seiten für eine Indizierung durch Suchm aschinen präpariert w erden? Welche Suchbegriffe gehören in die Meta-Tags?  Dateigröße: Gibt es Beschränkungen der Dateigröße? Wie verhält sich die  Seite beim Ausdrucken?

Design Guide

 Feedback  E-Mail: In w elcher Form w ird E-Mail als Feedback-Medium genutzt?  Form ulare: Welche Form ulare w erden benötigt? Was soll m it diesen Form ularen erreicht w erden?  Kom m entare: Kann der Besucher der Site Kom m entare in anonym er Form abgeben?  Um fragen: Wie können Um fragen (polls), die zur Analyse der Site-Nutzung helfen, eingesetzt w erden?  Statistik: Wie funktioniert die Abfrage der Nutzungs-Statistik? Tipps zur Aufbereitung und Interpretation der Daten.  Benutzertests: Wie w erden Testpersonen ausgew ählt, Testpanels zusam m engestellt und das Testprogram m erarbeitet?  Verbesserungen: In w elcher Form sollen Verbesserungsvorschläge durch Besucher und Benutzer der Site zurückfließen?

 Welches Feedback möchten Sie von den Benutzern der Site haben?

37

38

Design

 Support  Hilfe: Gibt es Hilfsfunktionen oder kontextsensitive Hilfeseiten?  FAQ: Nach w elchen Kriterien w erden die m eistgestellten Fragen (FAQ) erstellt und aktualisiert?  Sitem ap: Wie w ird eine Sitem ap erstellt? Handelt es ich um eine statische Sitem ap oder um eine dynam ische, die veränderte Inhalte der Site autom atisch aktualisiert?  Search: Gibt es eine interne Suchm aschine? Wie funktioniert sie? Worauf ist bei der Indizierung der Inhalte zu achten?  Glossar zur Erklärung neuer oder unbekannter Begriffe. Wie ist ein solches Glossar aufgebaut? Wie funktioniert es?  Foren: Wie w ird m it Expertenrunden, Foren und Chatroom s um gegangen? Wer m oderiert diese Funktionen?  CallCenter: Werden Seiten m it Callcenter-Funktion angeboten? Wie genau funktioniert das?

Geben Sie den Benutzern  der Site Hilfestellungen.

Design Guide

39

 Master Ein Master ist ein Siteprototyp, der alle Dateistrukturen, Kategorien, Navigationsm öglichkeiten und Layoutvarianten der einzelnen Seiten exem plarisch nachbildet. Ein kleiner Master – der anhand von Beispielseiten die Site „en m iniature“ darstellt – könnte som it der sinnvolle Bestandteil eines Design Guides sein. In einem Sitem aster w erden die einzelnen Seiten gern m it Tem plate-Funktion ausgestattet.

 Templates Musterseiten, Vorlagen oder auch Tem plates können verschiedene Funktionen haben:  Statische Tem plates sind einfache HTML-Seiten, die kopiert w erden. Auf den Kopien der Seiten w erden dann Inhalte ausgetauscht und Links angepasst.  Dynam ische Tem plates enthalten CGI-Code, der auf der Seite zunächst unsichtbar erscheint, w enn die entsprechenden Inform ationen vom Server fließen. Es kann Code sein, der externe JavaScripte lädt, PHP3-Seiten aufruft oder Datenbankabfragen durchführt.  Dream -Tem plates haben ein w enig von beiden Konzepten: Sie verhalten sich auf der einen Seite w ie einfache HTML-Tem plates, auf der anderen Seite enthalten sie Inform ationen, die – m it Dream w eaver gelesen – die Seite m it nichteditierbaren Bereichen darstellt.

Siehe auch Kapitel Elemente und Vorlagen auf Seite 121.

M ehr zum Thema Intranet und Design Guide finden Sie in dem Buch „Intranet Business Strategies“ von M elanie Hills. Im Web finden Sie auf folgenden Sites weitere gute Hinweise zu Web Design Guides: www.htmltips.com, www.htmlhelp.com/ design/ style/ , w3.org/ provider/ style/ .

 Ein M aster der Site enthält exemplarische Templates, aus denen sich die weiteren Seiten ableiten.

40

Projekt

PROJEKT Clients always get the websites they deserve.

Wenn Sie ein Webprojekt aufsetzen, bestim m t zuallererst der Um fang des Projektes, w elche Ressourcen Sie einplanen m üssen. Eine kleine Site, m it einem Dutzend Seiten, ist unkom pliziert innerhalb einer Woche und von einer Person zu realisieren. Aber sobald die Site an Um fang und Interaktion zunim m t, m uss m ehr Planung der eigentlichen Entw icklung vorausgehen. Professionelle Websites, die ein klar definiertes Kom m unikationsziel verfolgen, benötigen neben klar definiertem Content auch die Planung und Organisation der Ressourcen. Für die Erstellung einer m ittelgroßen Site (ca. 100 statische Seiten) benötigen Sie ein Team von drei bis neun Personen, einen Zeitraum von zw ei bis sechs Monaten und ein Budget von 50.000 bis 100.000 DM.

Organisation  Workspace

Welche Projektressourcen kommen zusammen und wie werden sie organisiert? 

Zuerst sollten Sie feststellen w o die Projektressourcen zusam m enkom m en:  Sitzt das gesam te Entw icklungsteam im gleichen Raum , Haus, Stadt, Land … ?  Welche anderen physischen (z.B. Bandbreiten) und psychischen (z.B. Sprache und Kultur) Barrieren können im Projekt auftreten?

K U N D E

U N IT1

PROJEKTM ANAGER

U N IT2

PROJEKTM ANAGER

A G E N T U R

DESIGNER

WEBDESIGN PRODUKTION

U N IT3

PROJEKTM ANAGER

PROJEKT LEITER

PROJEKTMANAGEMENT

PROJEKTM ANAGER

REDAKTION QUALITÄTSS ICHERUNG

U N IT4

PROJEKTM ANAGER

U N IT5

PROJEKTM ANAGER

PRODUCER

REDAKTION

PROJEKT SERVER

PRODUCER

Organisation

41

 Workgroup Als Nächstes m uss das Projektteam betrachtet w erden:  Wie ist es quantitativ und qualitativ zusam m engesetzt?  Welche Personen begleiten das Projekt auf Seiten des Auftraggebers?  Wie stark sind die einzelnen Personen in das Projekt eingebunden, bzw . w ie stark sind sie m otiviert?  Wie sind die Rollen und Verantw ortlichkeiten verteilt?  Gibt es ein zentrales Projektm anagem ent?

 Workflow Als Letztes ist es w ichtig zu planen, w ie die Zusam m enarbeit im Einzelnen und im gegebenen Zeitfenster aussehen w ird:  In w elcher Form sind die Teilnehm er m iteinander vernetzt?  Welche Kom m unikationsw ege gibt es, w ie w erden sie genutzt?  Gibt es einen Projektserver und eine Projektsite?  Welche Projekttools w erden w ofür eingesetzt?  Wann und in w elcher Form w erden Abstim m ungen vorgenom m en?  Wie sieht der Zeitplan insgesam t, w ie sehen die einzelnen Meilensteine aus? Von diesen Param etern hängen Entw icklungszeitraum und dam it auch Budgetplanung ab.

Für die Einhaltung von Terminen und Budget ist eine M eilensteinplanung  unerlässlich.

42

Projekt

Rollen und Verantwortlichkeiten Je weiter die Projektteilnehmer auseinander sitzen, je weniger zentrales Projektmanagement es gibt, je länger die Entwicklung einer Site dauert, desto teurer wird sie.

Abhängig von der Größe des Webprojekts w erden die Rollen verteilt. Hierbei gibt es drei große Verantw ortungsbereiche:  Content und Marketing  Produktion und Technik  Konzept und Design

Screendesign

Visuals

Animation D E S IIG GNN

Webdesign

Redaktion

Die drei großen  Verantwortungsbereiche werden durch die Drehscheibe des Projektmanagements zusammengehalten.

Projektmanagement

Text

CO C ON N TT EENNTT

Programmierer T EC H N I K K

Marketing

Code

Sysadmin Werbung

Provider

 Projektmanagement Diese drei Bereiche sollten idealerw eise durch ein Projektm anagem ent konzertiert w erden. In kleineren Projekten (w eniger als 5 Teilnehm er) kann eine der Rollen das Projektm anagem ent in Personalunion übernehm en. Das Projektm anagem ent ist verantw ortlich für:  Konzeption des Projektes in Zusam m enarbeit m it einzelnen Teilnehm ern  Zusam m enführung der Teilnehm er und Ressourcen  glatte Kom m unikation zw ischen den einzelnen Teilnehm ern  Klärung von Differenzen und Problem en im Projekt  Erreichung der Meilensteine und Lieferfristen  Einhaltung des Budgets

Rollen und Verantw ortlichkeiten

43

 Content und Marketing Hier einige Beispiele für die Rollenteilung in diesem Verantw ortungsbereich:  Redaktion: Recherche, Ausw ahl, Aufbereitung und Bereitstellung der Inhalte  Marketing: Bestim m ung von Marketinginhalten, Zielgruppen und Kom m unikationskonzepten, sow ie Werbe- und Kooperationskonzepte und Öffentlichkeitsarbeit

 Produktion und Technik Auch in diesem Verantw ortungsbereich kann es – abhängig von der Größe des Projekts – m ehrere Rollen geben, z.B.:  Program m ierung: HTML, JavaScript, CGI, Datenbanken etc.  Webm aster: Bereitstellung und Einrichtung des Webservers

 Konzept und Design In diesem Verantw ortungsbereich ist es m itunter sehr schw ierig, Rollen und Verantw ortlichkeiten abzugrenzen. Oft w ird dieser Bereich durch eine einzelne Person oder durch einen kleinen „Creativ-Pool“ von Personen kom plett abgedeckt:  Verbales Konzept: Texter und Konzeptioner entw ickeln Kom m unikationskonzepte.  Visuelles Konzept: Screen- und Webdesigner visualisieren diese Konzepte.



Verbale und visuelle Konzeptionen ergänzen einander.

44

Projekt

Pflichtenheft

Ein detaillierter Inhaltsplan regelt die Erstellung des Contents. 

Ein leidiges, aber sehr w ichtiges Them a, ist die Erstellung eines Pflichtenheftes, in dem neben den Verantw ortlichkeiten auch die Spezifikationen für die Site festgehalten w erden. Nur so kann ein m öglichst glatter Ablauf des Projekts erreicht w erden. Hierzu gehören:  Sitem ap: Darstellung der Site in Ihrer Grundstruktur m it allen w esentlichen Verzeichnissen, Dokum enten und Verknüpfungen  Inhaltsplan: Detaillierte Planung der Inhalte, w o sie herkom m en, w ie sie beschaffen sind, w er dafür verantw ortlich ist, w ie und w ann sie übergeben w erden.  Zeitplan: Genauer Zeitplan, der die einzelnen Entw icklungsphasen, Abstim m ungen, Freigaben und Meilensteine projiziert.  Spezifikationen: Festschreibung von technischen Details für Dokum ente, Program m ierung und den Server  Projekttools: Festlegung der Werkzeuge und Anw endungen, die für die Entw icklung der Site benutzt w erden  Sicherheit: Regelungen über Zugriffsrechte und den Schutz der Site gegenüber unberechtigten Zugriffen  Projektverantw ortliche: Beschreibung der einzelnen Arbeits- und Aufgabenbereiche für die Teilnehm er  Ergebnisse: m öglichst genaue Beschreibung der erw arteten Resultate, nach Verantw ortlichkeit in Teilergebnissen aufgegliedert

Projektsite

Projektsite Die Ergebnisse der Entw icklung w erden am besten auf einem Projektserver oder einer Projektsite für alle Teilnehm er zugänglich gem acht. Auf einer Projektsite können Briefings, Zeitpläne, Materialien und Arbeitsunterlagen, die einzelnen Entw icklungsschritte (Versionen) dokum entiert w erden. Die Projektsite ist am besten auf dem Projektserver (staging server), auf dem auch der Siteprototype entw ickelt w ird, untergebracht. Der Projektserver sollte technisch die gleichen Anforderungen erfüllen w ie der Server, der später für die öffentliche Site eingesetzt w ird. Am besten w ird die Site gleich auf diesem Server entw ickelt. Die Projektsite – als Inform ationszentrale des Projekts – sollte regelm äßig von allen Teilnehm ern frequentiert und ständig aktualisiert w erden und auch den Zugriff auf ältere Dokum ente und Versionen gestatten. Welche Ergebnisse und Dokum ente gehören auf die Projektsite?  Index: Von hier kann die jew eils aktuelle Version der Site, sow ie ältere Versionen, angesteuert w erden.  New s: aktuelle Meldungen aus dem Projekt  Sitem ap: grafische Darstellung der aktuellen Sitem ap (PDF)  Inhaltsplan: grafische Darstellung des aktuellen Inhaltsplans (PDF)  Zeitplan: grafische Darstellung des aktuellen Zeitplans (PDF)

Product Finder

Cam paign

Skin Test

Main

Product Range

Product Range

Sitem ap

Skin

Service

Ing redients

Skin an d Cells

Pharm acy Finder

Press Releases

Galenics

Skin Physiology

My Pharm acy

New slet ter

Methods

Skin Conditions

Fairs & Congresses

Compatibilit y

Cleansing & Care

Dermatology

Light Protection

Product Samples

Dr y Skin All prod uct s

FAQ

Product

INCI List (A-Z)

Sensit ive Skin

Cont act

Die Sitemap ist ein zentrales Planungsinstrument.



Sensit ive Facial All prod uct s

Product Range

New s

Mat ure Skin All products

Product Range

Search

Sun Sensit ive All products

Product Range

Acne Proneskin All prod uct s

Product Range

Product Advisor

Product Advisor

Product Advisor

Product Advisor

Product Advisor

Product Advisorr

Product Background

Product Background

Product Background

Product Background

Product Background

Product Background

Studies

Studies

Studies

Studies

Studies

Studies

INCI

INCI

INCI

INCI

INCI

INCI

All products

45

46

Projekt

Der Zeitplan sollte immer  aktuell und allen Projektteilnehmern zugänglich sein.

   

Pflichtenheft: zum Brow sen oder als Dow nload (PDF) Projektteilnehm er: Nam e, Postadresse, Telefonnum m er und E-Mail-Adresse Materialien: Texte, Bilder, Referenzen etc. Sonstige Ergebnisse: z.B. die Ausw ertung einer Um frage

Projekttools In der Übersicht im Anhang finden Sie häufig benutzte Anwendungen und Tipps dazu, wie diese bei der Entwicklung einer Site genutzt werden können.

M ehr zum Thema Webprojekte finden Sie in dem Buch „Das Geheimnis erfolgreicher Websites“ von David Siegel.

Die m eisten Websites entstehen m it den Tools, die bei den einzelnen Teilnehm ern bereits zur Verfügung stehen. Ein zentrales Werkzeug bei der Site-Entw icklung ist ein WYSIWYG-Editor, w ie z.B. Dream w eaver, m it dem viele w ichtige Funktionen an einem Arbeitsplatz benutzt w erden können:  Layout (Aufbau der Seite)  Satz (Setzen und Auszeichnen von Texten)  Navigation (Verknüpfung der Dokum ente)  Program m ierung (JavaScript, CSS etc.)  Rechtschreibprüfung  Transfer (über Site FTP)  Grafik (über Firew orks) In einem arbeitsteiligen Prozess können unterschiedliche Aufgaben auf m ehrere – m it Dream w eaver ausgestattete – Arbeitsplätze verlagert w erden. Bestim m te Arbeitsschritte können im Vorfeld aber auch von anderen Program m en geleistet w erden.

Projekttools

47

SITE

SITE 50 Mapping 50 51 55

Sitem ap Lokale Site Links

59 Managing 59 60 63 69

Entfernte Site Synchronisieren Design Notes Testen

50

Mapping

M APPING Sitemap Without a map you are lost in webspace.

Am Anfang einer Website steht im m er ein Plan. Dieser Plan lässt sich am einfachsten grafisch m it einer Sitem ap visualisieren. Auf einer Sitem ap w erden alle Verzeichnisse und Dokum ente als Sym bole dargestellt und m it Linien verbunden. So erhält m an schnell einen ersten Eindruck von Um fang und Struktur der Site. Sitem aps können folgende Funktionen haben:  planerisches Mittel bei der Entw icklung einer Site  visuelle Darstellung der Site w ährend der Entw icklung (Diese Form der Sitem ap w ird von Dream w eaver verw endet.)  Navigationshilfe auf einer Website. Diese Sitem ap ist oft nicht grafisch, sondern textlich oder tabellarisch aufgebaut. Zunächst die planerische Funktion. Je nach Art der Navigation haben sich im Web drei klassische Modelle herausgebildet:



Sitemap mit linearer Navigation



Sitemap mit zyklischer Navigation

Sitemap mit komplexer Navigation



Sitemap mit hierarchischer Navigation



Lokale Site

51

 Linear: Der Besucher beginnt auf einer Indexseite und klickt sich von Seite zu Seite durch die Site. Die Navigation gestattet nur Vor- und Zurückblättern. Am Ende landet er in einer Sackgasse oder w ird an einem virtuellen Ausgang (exit ) der Site verabschiedet.  Zyklisch: Von der Startseite ausgehend klickt sich der Benutzer durch die Site. Der Link von der letzten Seite führt entw eder zum Ausgangspunkt zurück oder auf eine ganz andere Seite. Dieses beiden Arten der Navigation sind für Inhalte geeignet, bei denen eine bestim m te Reihenfolge (sequence) präsentiert w erden soll (z.B. Bücher, guided tours etc.).

 Hierarchisch: Diese Art der Benutzerführung ist am geeignetsten, um größere Inhalte navigierbar zu m achen. Die Inhalte sind nach Kategorien sortiert und in eige-

nen Verzeichnissen abgelegt. Der Besucher hat die Möglichkeit, in die Tiefe der Site zu gehen und kann von dort m it einem Klick entw eder in die nächst höhere Ebene oder zur Startseite gelangen. Am häufigsten findet m an im Web allerdings die Mischform der kom plexen (oder auch verschachtelten) Navigation, die auf einer hierarchischen Navigation aufbaut, aber Elem ente der linearen und zyklischen Navigation einbezieht.

Es gibt im Web auch experimentelle und chaotische Navigationsmodelle, die bewusst die bereits gelernten M odelle hinterfragen und den Besucher an der Nase herumführen sollen. Hierzu gehören Spiele mit Frames und externen Fenstern.

Lokale Site Um m it Dream w eaver zu arbeiten, sollten Sie in jedem Fall eine lokale Site definieren, da Ihnen sonst eine Menge Funktionen verschlossen bleiben. Dream w eaver bezieht sich m it allen Verknüpfungen und internen Funktionen auf diese Site.  Eine Site definieren Sie im Fenster „Site-Definition“.

52

Mapping

Es ist dabei unerheblich, ob Sie eine Site neu erstellen oder eine bereits vorhandene Site (die nicht m it Dream w eaver erstellt w urde) als Dream w eaver-Site definieren. Sie erstellen eine lokale Site, indem Sie im Menü SITE: SITES DEFINIEREN… ausw ählen:  Im Fenster klicken Sie auf NEU…  Es öffnet sich das Fenster SITE-DEFINITION.  In der Kategorie LOKALE INFOS geben Sie der Site einen Nam en und w ählen den LOKALEN STAMMORDNER aus. Hier geben Sie entw eder den Ordner einer bereits erstellten Site an oder zeigen auf einen leeren Ordner, in dem Sie eine neue Site anlegen w ollen.  Klicken Sie auf OK, im nächsten Fenster auf FERTIG.  Dream w eaver fragt Sie, ob Sie ein Site-Cache erstellen m öchten. Klicken Sie auf OK. Zunächst sind Sie dam it fertig und können sich im Site-Fenster die Site ansehen. Haben Sie eine bereits erstellte Site definiert, ist das Fenster m it Dateien und Ordnern gefüllt. Im Falle einer neuen Site ist das Fenster bis auf den Stam m ordner leer.

Sitefenster in der Ansicht  „Ordner und Dateien“

Lokale Site

53

 Neue Site Sie können m it Dream w eaver im Site-Fenster neue Ordner und Dateien hinzufügen. Klicken Sie hierzu auf den Stam m ordner und w ählen Sie aus dem Kontextm enü NEUE DATEI oder NEUER ORDNER. Die neuen Objekte erscheinen im Site-Fenster im m er in der Verzeichnisebene, auf deren Objekt Sie geklickt haben. Sie können die Objekte auch innerhalb der Struktur per Drag & Drop verschieben. Dream w eaver fragt Sie in diesem Fall, ob Sie vorhandene Verknüpfungen aktualisieren w ollen.

 Sitemap

Es empfiehlt sich, für ein Projekt am Anfang einen Stammordner und einen Site-Namen auszuwählen und diesen bis zur Fertigstellung der Site beizubehalten, da sonst jedesmal die Site-Definition neu gemacht werden muss. Wenn Sie die einzelnen Versionen der Site dokumentieren möchten, können Sie nach Fertigstellung einer Version den Stammordner kopieren und umbenennen oder komprimieren (stuffen oder zippen).

Um die Darstellung einer Sitem ap zu erhalten, m üssen Sie im Fenster SITE-DEFINITION in der Kategorie SITEMAP-LAYOUT in jedem Fall eine Hom epage angeben. Klicken Sie auf das Ordner-Icon, um die Startseite auszuw ählen. Beenden Sie die Site-Definition w ie zuvor beschrieben. Im Site-Fenster können Sie m it dem kleinen w eißen Dreieck unten links die erw eiterte Darstellung auf- und zuklappen. Klicken Sie jetzt auf das Icon oben links, in dem eine Sitem ap dargestellt ist, und w ählen aus dem Popup-Menü eine der beiden Optionen. Wenn Sie die Option M AP UND DATEIEN ausgew ählt haben, finden Sie auf der rechten Seite des Fensters die Ordner- und Dateiendarstellung und links die Map. Mit den Rollbalken können Sie sich innerhalb der Map bew egen, m it der Zoom einstellung unten links am Fensterrand die Darstellungsgröße w ählen.



Layoutvorgaben für die Sitemap

54

Mapping

Dokumente horizontal verschieben

verkn ü pfen mit (impressum.html)

Dokumentstamm

Zweig ein- und ausausblenden Pfad anzeigen

Erstellung einer neuen  Site im Sitefenster Map Zoom

verkn ü pfte Dokumente

Die Dokum ente Ihrer Site w erden in ihrer Verknüpfungsstruktur angezeigt. Wenn Sie versteckt m arkierte und abhängige Elem ente angezeigt haben w ollen, m üssen Sie dies zuvor im FENSTER SITE-DEFINITION ausw ählen. Sie können in der Sitem ap  Dokum ente öffnen, indem Sie darauf doppelklicken.  Verknüpfungen erstellen, indem Sie von dem Verknüpfungs-Icon (Fadenkreuz) per Drag & Drop eine Beziehung herstellen.  Zw eige ein- und ausblenden, indem Sie auf das Plus- bzw . Minuszeichen klicken.  Dokum ente horizontal verschieben, indem Sie m it dem Cursor die senkrechte Linie über dem Dokum ent anfassen und bew egen.  Pfade anzeigen, indem Sie m it dem Cursor auf den Dateinam en (oder Titel) zeigen.  Perspektive ändern, indem Sie auf ein Dokum ent klicken und SITE: ANSICHT SITEMAP: ALS STAMMORDNER ANZEIGEN w ählen. Statt der bisherigen Hom epage w ird das m arkierte Dokum ent in der Sitem ap als Hom epage dargestellt. Sie m achen diesen Schritt rückgängig, indem Sie oben links im Site-Fenster bei SITE-NAVIGATION auf das linke Dokum ent klicken. Die beiden Ansichten M AP und ORDNER UND DATEIEN w erden synchron angezeigt, d.h., w enn Sie ein Elem ent in einem Bereich ausw ählen, w ird es auch in dem anderen m arkiert. Die Objekte im Site-Fenster sind nur m it Dream w eaver kom patibel. Sie können keine Objekte per Drag & Drop vom oder zum Desktop bew egen. Für eine Präsentation können Sie die Sitem ap als Bild speichern: SITE: ANSICHT SITEMAP: SITEMAP SPEICHERN: SITEMAP ALS BILD SPEICHERN BZW. SITE: ANSICHT SITEMAP: SITEMAP SPEICHERN: SITEMAP ALS JPEG SPEICHERN.

Links

 Kaputte Links werden mit rotem Text dargestellt.

broken links

Im M ENÜ: SITE: ANSICHT SITEMAP bzw . über das Kontextm enü zu ausgew ählten Objekten können Sie eine Reihe w eiterer Funktionen in der Sitem ap anw enden, die ausführlich in der Online-Hilfe dokum entiert sind.

Links Bevor w ir uns dem kom plexen Them a des Sitem anagem ents zuw enden, ein kurzer Blick darauf, w ie Dream w eaver m it Verknüpfungen (links) zw ischen Dokum enten um geht. Die Begriffe Verknüpfung , Link und Hyperlink sind synonym .

 Links setzen Sie setzen eine Verknüpfung, indem Sie ein Objekt ausw ählen und dann im Eigenschafteninspektor  den Pfad der Verknüpfung in das Eingabefenster VERKNÜPFUNG schreiben.  auf das Ordner-Icon rechts davon klicken um die zu verknüpfende Datei auf der Festplatte zu suchen.  vom Verknüpfungs-Icon (Fadenkreuz) links daneben – bei gedrückter Maustaste – direkt auf eine Datei im Site-Fenster zeigen. 

Das Kontextmenü für Links

55

56

Mapping

 Links bearbeiten

Um einen Hyperlink zwischen Dokumenten herzustellen, ziehen Sie einfach eine Verbindung zwischen dem Fadenkreuz-Icon und einer Datei im Sitefenster. 

Sie haben über das Kontextm enü (Window s: RECHTE M AUSTASTE, Mac: CTRL + M AUSw eitere Möglichkeiten, eine Verknüpfung zu bearbeiten:  VERKNÜPFUNG ÄNDERN zeigt die verknüpfte Datei an und lässt Sie eine neue ausw ählen.  VERKNÜPFUNG ENTFERNEN entfernt die Verknüpfung.  VERKNÜPFTE SEITE ÖFFNEN öffnet die verknüpfte Seite in Dream w eaver. KLICK)

 Links prüfen Sie können die Verknüpfungen des aktuellen Dokum ents in einem lokalen Teil der Site oder der gesam ten Site prüfen:  Um die Links des aktuellen Dokum ents zu prüfen, w ählen Sie DATEI: LINKS ÜBERPRÜFEN.  Um Links in einem Teil der Site zu prüfen, w ählen Sie FENSTER: DATEIEN DER SITE. Das Site-Fenster w ird eingeblendet. Wählen Sie im Popup-Menü die gew ünschte Site aus. Anschließend im Bereich LOKALER ORDNER die zu prüfenden Dateien und Ordner m arkieren. Wählen Sie dann im Kontextm enü VERKNÜPFUNGEN ÜBERPRÜFEN: AUSGEWÄHLTE D ATEIEN/ ORDNER oder im Menü D ATEI: LINKS PRÜFEN.

Links

57

 Um die gesam te Site auf fehlerhafte Links zu überprüfen, w ählen Sie SITE:

VERKNÜPFUNGEN AUF DER GANZEN SITE PRÜFEN. Im Fenster VERKNÜPFUNG-PRÜFER w ählen Sie nach der Prüfung im Popup-Menü ANZEIGEN zw ischen den OPTIONEN FEHLERHAFTE VERKNÜPFUNGEN, EXTERNE VERKNÜPFUNGEN oder VERWAISTE DATEIEN (nur nach einer Prüfung der gesam ten Site verfügbar). Den fertigen Bericht können Sie als Textdatei speichern. 

Der Link-Prüfer zeigt unterschiedliche Linktypen und fehlerhafte Verknüpfungen an.

 Links reparieren Um einen fehlerhaften Link zu reparieren, gibt es zw ei Wege:  Doppelklicken Sie im Fenster VERKNÜPFUNG-PRÜFER auf ein Dokum ent in der Spalte DATEIEN und öffnen dam it das Quelldokum ent in Dream w eaver. Das Objekt und der dazugehörende Link w erden m arkiert bzw . im Eigenschafteninspektor angezeigt. Ändern Sie den Link im Eigenschafteninspektor.  Klicken Sie im Fenster VERKNÜPFUNG-PRÜFER auf einen Pfad in der rechten Spalte und ändern ihn im Eingabefenster, oder klicken Sie auf den Ordner rechts davon, um eine neue Datei zu verknüpfen. 

Anzeige eines fehlerhaften Links – er führt ins Leere. Klicken Sie auf das Ordner-Icon, können Sie eine neues Ziel auswählen.

58

Mapping

 Links ändern Um eine Verknüpfung auf der gesam ten Site zu ändern, m uss sich der Link entw eder in einem absoluten oder stam m relativen Pfad befinden: SITE: VERKNÜPFUNG FÜR GANZE SITE ÄNDERN… Die beliebte und übliche dokum entrelative Adressierung funktioniert hierbei nicht. Sicherlich ein w eiterer Eintrag auf dem Wunschzettel für die nächste Program m version. 

Sie können einen Link für eine komplette Site in einem Durchgang ändern.



Die Navigationsobjekte der Objektepalette ziehen Sie einfach an der gewünschten Position ins Dokumentfenster.

 Pfade Sie können m it Dream w eaver folgende Adressierungen verw enden:  Absolut: Kom plette URLs, die m it http oder m ailto beginnen, z.B. w w w .eucerin.com  Stam m relativ: Der Pfad bezieht sich auf den Stam m ordner der Site und beginnt m it einem Schrägstrich (slash ) z.B. / m aster/ products.htm l.  Dokum entrelativ: Der Pfad bezieht sich auf das aktuelle Dokum ent z.B. products.htm l (w enn sich das Dokum ent im gleichen Verzeichnis befindet, sonst m aster/ products.htm l oder ../ m aster/ products.htm l).

 Navigationsobjekte Die Erstellung von Navigationsobjekten, die Links enthalten, w ie z.B. Navigationsleisten und Sprungm enüs, ist m it Dream w eaver sehr einfach. Sie finden Sie in der Objektepalette. Ziehen Sie die Objekte auf das Dokum entfenster und folgen Sie den Anw eisungen in den Fenstern. Eine detaillierte Beschreibung für die Erstellung finden Sie in der Online-Hilfe F1.

Entfernte Site

M ANAGING Dream w eaver zeichnet sich vor allem durch ein sehr durchdachtes, w enn auch etw as schw ierig zu erfassendes Sitem anagem ent aus. Wenn Sie bisher allein per Hand und per FTP die Offline-Version Ihrer Website m it der Online-Version synchronisiert haben, sollten Sie jetzt um denken. Wenn Sie m it m ehreren Personen an einem Dream w eaver-Projekt arbeiten, sind die Funktionen Ein- und Auschecken sow ie Design Notes ein Muss. Voraussetzung für ein fließendes Arbeiten in der Workgroup ist jedoch eine gute Planung, eine aufgeräum te Projektsite und vor allem viel Bandbreite, denn die Synchronisierung der lokalen (local) und entfernten (rem ote) Site ist sehr kom plex.

Manage your site or your site will manage you.

Entfernte Site Wenn Sie bereits eine lokale Site erstellt haben, können Sie hier direkt fortfahren. Anderenfalls blättern Sie einige Seiten zurück und erstellen zunächst eine lokale Site.Wenn Sie bereits eine lokale Site erstellt haben, können Sie die entfernte Site – w enn Sie auf einem Server liegen soll – das erste Mal auch m it einem einfachen FTPProgram m uploaden. Im lokalen Netzw erk können Sie die Site direkt zum Ziel kopieren. Später sollten Sie nur noch Dream w eavers Site-FTP benutzen, da unsichtbare Steuerdateien auf dem entfernten Server abgelegt w erden. Sie können die entfernte Site aber auch in einem Netzw erksvolum en anlegen, auf das alle Mitarbeiter Zugriff haben. 

Das Fenster „Site-Defintion für Server-Infos“

59

60

Managing

 Einrichten Öffnen Sie das Fenster SITE-DEFINITION m it SITE: SITES DEFINIEREN…  Wählen Sie eine bereits definierte Site.  Im Fenster SITE-DEFINITION in der Kategorie REMOTE INFORMATIONEN geben Sie unter ZUGRIFF entw eder einen Netzw erksordner an, oder w ählen FTP. Seit der Version 4 stehen hier auch die Optionen SOURCESAFE und WEBDAV zur Verfügung.  Im Falle von FTP geben Sie die Login-Param eter und den Pfad für den Webserver ein. Klicken Sie auf OK.  Im Fenster SITE DEFINIEREN klicken Sie auf FERTIG. Weitere w ichtige Einstellungen w ählen Sie unter BEARBEITEN: VOREINSTELLUNGEN: SITE. Eine detaillierte Beschreibung finden Sie in der Online-Hilfe.

Siehe Kapitel Versionskontrolle auf Seite 67.

 Verbinden Wenn Sie jetzt eine TCP/ IP-Verbindung zum Webserver aufgebaut haben (oder eine Verbindung zum Netzw erksordner besteht), können Sie die entfernte Site im linken Teil des Site-Fensters sehen. Falls die entfernte Site nicht aktualisiert ist, klicken Sie in der oberen Leiste erst auf VERBINDEN, dann auf AKTUALISIEREN. Die bestehende Verbindung w ird durch ein kleines grünes „Läm pchen“ angezeigt. Klicken Sie auf TRENNEN, w enn Sie die Verbindung zum Webserver w ieder beenden m öchten. lokale Auswahl

Ausgecheckt (andere) Ausgecheckt (selbst)

Ein Verzeichnis  der lokalen Site kann mit der entfernten Site synchronisiert werden.

Status

Eingecheckt oder bereitgestellt (lokal gesperrt)

Synchronisieren Inzw ischen haben Sie in der lokalen Site w eitergearbeitet und Dateien und Verknüpfungen hinzugefügt, verändert oder gelöscht. Um die lokale Site m it der entfernten Site abzugleichen, w ählen Sie SITE: SYNCHRONISIEREN… Im Fenster DATEIEN

Synchronisieren

haben Sie jetzt m ehrere Möglichkeiten, die sprachlich etw as verw irrend sein m ögen:  Unter SYNCHRONISIEREN: w ählen Sie entw eder die GESAMTE SITE oder NUR LOKALE DATEIEN AUSWÄHLEN, die Sie zuvor im Site-Fenster m arkiert haben.  Unter RICHTUNG: w ählen SIE AKTUELLERE DATEIEN FÜR ENTFERNTES OBJEKT BEREITSTELLEN.  ENTFERNTE DATEIEN NICHT AUF LOKALEM LAUFWERK LÖSCHEN klicken Sie an, w enn Sie verm eiden w ollen, dass bei der Synchronisierung Dateien, die nicht auf der lokalen Site existieren, auf der entfernten Site gelöscht w erden.  Klicken Sie auf VORSCHAU…  Nachdem Dream w eaver die beiden Sites m iteinander verglichen hat, erhalten Sie im Fenster SITE eine Liste der bereitzustellenden Dateien. Sie haben hier die Möglichkeit, einzelne Dateien auszuschließen, indem Sie das Häkchen entfernen. Klicken Sie auf OK. Die Dateien w erden auf die entfernte Site übertragen. SYNCHRONISIEREN



Die Löschen-Option sollte besser heißen: Löschen von RemoteDateien, die nicht lokal vorliegen.

Die Daten der lokalen Site werden auf der Remote-Site bereitgestellt.

Ähnlich verfahren Sie, w enn Sie Dateien der entfernten Site m it der lokalen Site abgleichen w ollen.

 Abrufen und Bereitstellen Sie können auch einzelne Dateien und Ordner zw ischen den Sites abgleichen, indem Sie sie entw eder  Abrufen (dow nload ): Entfernte Dateien w erden m it den lokalen Dateien verglichen und zur lokalen Site übertragen. Die übertragene Datei w ird in der lokalen Site m it einem kleinen Schloss dargestellt, um zu zeigen, dass Sie nicht ausgecheckt w urde. Sie ist auf der entfernten Site nach w ie vor zur Bearbeitung durch andere freigegeben. Öffnen Sie diese Datei, w ird sie autom atisch auf der entfernten Site ausgecheckt. Oder indem Sie  Bereitstellen (upload ): Lokale Dateien w erden m it den Dateien der entfernten Site verglichen und zur entfernten Site übertragen. Eine bereitgestellte Datei w ird in der lokalen Site m it einem kleinen Schloss dargestellt, um zu zeigen, dass sie auf der entfernten Site zur Bearbeitung freigegeben ist. Dream w eaver 4 hat jetzt auch einen in die Site-Verw altung integrierten E-MailDienst, der bei der Team arbeit sehr nützlich sein kann. Wenn Sie zusätzlich zur Ihrem Auscheck-Nam en auch Ihre E-Mail-Adresse angeben, w ird diese Adresse im Site-

61

62

Managing

Fenster als Link dargestellt, der beim Anklicken ein externes E-Mail-Program m (z.B. Eudora oder Outlook) startet. In der neuen Nachricht w ird autom atisch die E-MailAdresse des Em pfängers sow ie der Sitenam e im Betrefffeld eingetragen. Im Fenster „Site-Definition“  legen Sie die Optionen fürs Aus- und Einchecken fest. Wichtig ist hier Ihr Name.

Neben den Verbindungsdaten  für den FTP-Server geben Sie im Fenster „Site-Definition“ Ihren Auschecknamen und Ihre E-M ailAdresse ein.

 Aus- und Einchecken Gesperrte Dateien werden von Dreamweaver als unsichtbare, mit Schreibschutz versehene Steuerdateien (.LCK) auf den Sites hinterlegt.

Um in einer Workgroup jederzeit zu w issen, w er gerade an w elchen Dateien einer Site arbeitet, ist es w ichtig, dass diese Dateien entsprechend gekennzeichnet w erden. Dream w eaver stellt hierfür die Funktion AUS- UND EINCHECKEN zur Verfügung:  Auschecken: Eine entfernte Datei w ird für die lokale Bearbeitung bereitgestellt. Gleichzeitig w ird die Datei auf der entfernten Site als ausgecheckt m arkiert, so dass sie für die Bearbeitung durch Andere gesperrt ist.

Design Notes

 Einchecken: Eine lokale Datei w ird für die entfernte Bearbeitung bereitgestellt. Gleichzeitig w ird die Datei auf der lokalen Site gesperrt, und auf der entfernten Site für die Bearbeitung durch Andere freigegeben. Der Status der Datei w ird dabei durch ein farbiges Häkchen und den Nam en des Bearbeiters gekennzeichnet:  Grüne Häkchen für Dateien, die für Sie selbst zur Bearbeitung freigegeben sind (ausgecheckt)  Rote Häkchen für Dateien, die von Anderen bearbeitet w erden (eingecheckt) und für Sie gesperrt sind

 Abhängige Dateien Achten Sie bei den Vorgängen der Synchronisierung darauf, dass auch abhängige Dateien (Scripte, Bilder etc.) m iteingeschlossen w erden. Sie können diese Option deaktivieren, w enn Sie nur das Zentraldokum ent (HTML-Seite) und nicht die abhängigen Dateien bearbeiten w ollen. Sie sparen in jedem Fall viel Zeit bei der Synchronisierung, w enn Sie abhängige Dateien ausschließen.

Design Notes Dieses w ichtige Feature w urde m it Dream w eaver 3 zum ersten Mal eingeführt. In der Vergangenheit w aren Entw ickler von Websites im m er auf Kom m entare im HTML-Code, E-Mail-Fragm ente, telefonische Nachrichten auf Mailboxen oder kleine gelbe Zettel an Monitoren angew iesen, um Cow orkers auf bestim m te Inform ationen zu Dateien hinzuw eisen. Mit Design Notes w urde die Möglichkeit eingeführt, für den Benutzer unsichtbare Inform ationen und Nachrichten den Dateien direkt zuzuordnen: z.B. vertrauliche Interna des Projektteam s, Kom m entare, Quellenverw eise, Hinw eise zu Bezugsdaten, Bem erkungen der einzelnen Entw ickler zu dem Entw icklungsstand, noch fehlenden Bestandteilen etc. Sie können Design Notes für jedes Dokum ent einer Site – auch Objekte oder Vorlagen verw enden. Beachten Sie jedoch, dass Design Notes einer Vorlage nicht von den auf der Vorlage basierenden Dokum enten übernom m en w erden.

63

Versuchen Sie, eine von Anderen ausgecheckte – also für Sie gesperrte Datei – zu öffnen, erhalten Sie  Warnhinweise.

64

Managing

Design Notes werden im Fenster  „Site-Definition“ eingestellt.

Um die Design Notes einer Seite zu erstellen bzw . zu sichten, w ählen Sie DATEI: DESIGN NOTES… oder Kontextm enü DESIGN NOTES… Im Fenster DESIGN NOTES w ählen Sie einen Status aus (z.B. ENTWURF) und geben Ihre Anm erkungen ein. Wenn Sie auf das kleine Kalender-Icon m it der Zahl 19 klicken, w ird das aktuelle Datum in die Anm erkungen geschrieben. Ganz unten w ählen Sie die Option ZEIGEN, WENN DATEI GEÖFFNET IST, w enn Sie m öchten, dass die Design Note auf jeden Fall gelesen w ird. Basis-Info im Fenster  „Design Notes“

In der Tafel ALLE INFORMATIONEN haben Sie w eiterhin die Möglichkeit, die Inform ationen zu strukturieren und zu ergänzen. Klicken Sie auf das Pluszeichen, um w eitere Schlüsselpunkte hinzuzufügen. Tragen Sie Nam en und dazugehörige Werte ein. Einen neuen Default für STATUS können Sie eingeben, w enn Sie unter Nam e STATUS eingeben und unter Wert einen neuen Wert z.B. ***neu*** eingeben. Alle Design Notes w erden durch Dream w eaver in einem eigenen Verzeichnis _notes im Verzeichnis des Dokum ents verw altet. Sie tragen den Dateinam en plus die Endung .m no z.B. product2.htm l.m no.

Design Notes

65



Alle Informationen im Fenster „Design Notes“



Der neue Wert für Status wird im Popup-M enü „Status“ in der Basis-Info angezeigt.

Wird das Dokum ent verschoben oder um benannt, w erden autom atisch die entsprechenden Änderungen auch auf die Design Notes angew endet. Um Design Notes zu deaktivieren, m uss die entsprechende Option im Fenster SITE-DEFINITION ausgeschaltet w erden. Im folgenden Dialogfeld w erden Sie gefragt, ob Sie vorhandene Design Notes löschen m öchten. Klicken Sie auf NEIN, w enn Sie sie behalten m öchten. Um nicht zugeordnete Design Notes zu löschen, klicken Sie auf die Schaltfläche ENTFERNEN. Ein Dialogfeld fragt Sie noch einm al, ob die verw aisten Design Notes w irklich gelöscht w erden sollen. Im Fenster SITE-DEFINITION finden Sie auch das Ausw ahlkästchen für die Bereitstellung der gem einsam en Nutzung von Design Notes. Ist die Option nicht ausgew ählt, w erden die Design Notes nur lokal verw altet, d.h. sie w erden nicht auf die Rem oteSite übertragen, w enn Sie Dateien einchecken bzw . bereitstellen.

Wenn Sie mit Dreamweaver eine Datei löschen, der Design Notes zugeordnet sind, werden diese ebenfalls gelöscht. Deswegen kommen verwaiste Design-Notes-Dateien normalerweise nur dann vor, wenn die Datei außerhalb von Dreamweaver gelöscht oder umbenannt wird. Wenn die Option „Design Notes verwalten“ deaktiviert wird, bevor Sie auf „Entfernen“ klicken, werden alle Design-Notes-Dateien der Site gelöscht. Das hier gezeigte Beispiel finden Sie auf der CD-ROM unter examples/ 03site/ newsite/ products/ , wenn Sie die Design Note für product2.html aufrufen.

66

Managing

 Design Notes im Site-Fenster Seit Dream w eaver 4 können Sie direkt im Site-Fenster sehen, w elche Dateien m it Design Notes versehen sind. Sie w erden in der Spalte ANMERKUNGEN m it dem Icon einer kleinen gelben Sprechblase versehen. Klicken Sie auf dieses Icon, öffnen sich die Design Notes der Datei. Die im Site-Fenster angezeigten Spalten in den Bereichen lokaler Ordner und Rem ote-Site können angepasst w erden. Bis zu 10 Spalten je Bereich sind m öglich. Neue Spalten können hinzugefügt, die Reihenfolge der Spalten kann geändert, Spalten können ausgeblendet w erden. Inform ationen der Design Notes können m it Spaltendaten verbunden w erden und für die gem einsam e Nutzung aller m it der Site verbundenen Nutzer zugänglich gem acht w erden. Die Defaultspalten NAME, ANMERKUNGEN, GRÖSSE, TYP, GEÄNDERT und AUSGECHECKT VON können nur in ihrer Reihenfolge geändert – nicht aber um benannt, gelöscht oder m it Design Notes verknüpft w erden. Sie ändern die Reihenfolge, indem Sie SITE: ANSICHT DER SITEDATEIEN: DATEIANSICHTSSPALTEN w ählen und die ausgew ählte Spalte m it den Aufw ärts- und Abw ärtspfeilen oben rechts in die gew ünschte Position bringen. Eine neue Spalte fügen Sie an, indem Sie auf das Pluszeichen (+ ) klicken. Im Feld SPALTENNAME geben Sie einen Nam en ein. Nur w enn Sie eine neue Spalte m it einer Design Note verknüpfen, können Daten im Site-Fenster angezeigt w erden. Mit der Ausrichtungsoption können Sie einstellen, ob der Spaltentext links-, rechtsbündig oder zentriert erscheint. Das Ein- und Ausblenden der Spalte steuern Sie m it der Option ZEIGEN. Mit der Option M IT ALLEN BENUTZERN DIESER SITE TEILEN erlauben Sie eine gem einsam e Nutzung der Spalte. Sie löschen eine von Ihnen angelegte Spalte, indem Sie die Spalte ausw ählen und dann auf das Minuszeichen (−) klicken. Vorsicht: Die Spalte w ird ohne Sicherungsdialog sofort gelöscht! Die Sortierreihenfolge (aufsteigend oder absteigend) einer Spalte im Site-Fenster ändern Sie durch m ehrm aliges Klicken auf die Spaltenüberschrift.

 Design Notes mit Fireworks Das hier gezeigte Beispiel finden Sie auf der CD-ROM unter examples/ 03site/ newsite/ products/ , wenn Sie die Design Note für product2.html aufrufen.

Eine m it Macrom edia Firew orks 4.0 erstellte oder gespeicherte Grafik w ird autom atisch m it einer Design-Notes-Datei verknüpft, die den Pfad der Originalgrafik (Quelldatei) sow ie Inform ationen zu eventuell gesetzten Hotspots und Rollovers enthält. Beim Im port der Grafikdatei in die Site w ird auch die Design-Notes-Datei m it verschoben. Wenn Sie jetzt die Firew orks-Grafik bearbeiten m öchten, w ird über den in den Design Notes gespeicherten Pfad die Originalgrafik in Firew orks geöffnet.

Design Notes

 Versionskontrolle 

Im Fenster „Site-Definition: Ansichtsspalten“ können Sie, außer der Reihenfolge der Ansichtsspalten, viele weitere Spaltenoptionen für das Site-Fenster festlegen.

Die Zusam m enarbeit großer Team s an um fangreichen Projekten m achte ein um fangreiches Adm inistrationssystem m it Features w ie Zugangskontrolle, Rechtevergabe und Freigabem echanism en notw endig. Auf einem so genannten Staging Server w erden neue oder aktualisierte Teile der Site vor einem öffentlichen Publizieren den Projektteilnehm ern zur Überprüfung und Freigabe zugänglich gem acht. Solche Redaktionssystem e beinhalten Kom ponenten, m it denen es m öglich ist, sehr kom plexe Freigaberoutinen zu realisieren und auch w ieder m ehrere Versionen zurückzugehen (Rollback). Die verbreitetsten Standards hierfür sind Visual Source Safe und WebDAV. Dream w eaver kann m it beiden Schnittstellen arbeiten. Sobald eine Verbindung zu den System en steht, können alle Funktionen zur gem einsam en Dateinutzung (Ein/ Auschecken, Aktualisieren, Abrufen und Bereitstellen, Design Notes etc.) auf entsprechende Funktionen im Quellkontrollsystem zugreifen.

 Visual Source Safe (VSS) Über das Site-Fenster von Dream w eaver greifen Sie auf eine installierte VSS-Datenbank zu:  In der Kategorie REMOTE-INFORMATIONEN des Fensters SITE-DEFINITION w ählen Sie im Popup-Menü ZUGRIFF die Option SOURCESAFE.  Bei Bedarf m arkieren Sie die Option DATEIEN BEIM ÖFFNEN AUSCHECKEN.  Wenn Sie auf INFO klicken, w ird das Dialogfeld SOURCESAFE-DATENBANK eingeblendet.  Im Feld DATENBANKPFAD klicken Sie auf DURCHSUCHEN, um die gew ünschte VSS-Datenbank zu suchen. Wahlw eise geben Sie den kom pletten Pfad der Datenbank ein.  Die ausgew ählte Datei w ird zur Datei srcsafe.ini und initialisiert Source Safe.

67

68

Managing

Um dieses Feature unter Windows verwenden zu können, muss M icrosoft Visual SourceSafe Client, Version 6 – auf einem M acintosh M etroWerks SourceSafe 1.1.0 Client – installiert sein. M etroWerks Visual SourceSafeBenutzer können nur auf M icrosoft SourceSafe-Datenbanken der Version 5.0 zugreifen.

 Im Feld PROJEKT geben Sie das Projekt der VSS-Datenbank ein, das als Stam m verzeichnis der Rem ote-Site verw endet w erden soll. In die Felder BENUTZERNAME und KENNWORT geben Sie Angaben für das Login in die ausgew ählte Datenbank ein. Die Option KENNWORT SPEICHERN klicken Sie, w enn Ihr Kennw ort in Dream w eaver gespeichert w erden soll.

Ein Klick auf OK bringt Sie zum Site-Fenster zurück. Wählen Sie SITE: VERBINDEN oder klicken Sie auf die Schaltfläche VERBINDEN in der Sym bolleiste des Site-Fensters, um m it der Rem ote-Site Verbindung aufzunehm en. Sie trennen die Verbindung durch Klicken auf die Schaltfläche TRENNEN oder Sie w ählen im Menü SITE: TRENNEN. Wenn Ihr gesam tes Team plattform übergreifend auf jede VSS-Datenbank Zugriff haben soll, verw enden Sie eine Datenbank der Version 5.0. Mehr Infos finden Sie in Ihrer SourceSafe-Dokum entation.

Das Dialogfeld „SourceSafe“  im Fenster „Site-Definition“

 WebDAV Dream w eaver unterstützt auch das WebDAV-Protokoll (Web-based Distributed Authoring and Versioning ), das zur Zeit nur auf Microsoft Internet Inform ation Server (IIS) 5.0 und Apache Web Server verfügbar ist. Eine Verbindung m it Dream w eaver stellen Sie folgenderm aßen her:  In der Kategorie REMOTE-INFORMATIONEN des Fensters SITE-DEFINITION w ählen Sie im Popup-Menü ZUGRIFF die Option WEBDAV.  Bei Bedarf m arkieren Sie die OPTION DATEIEN BEIM ÖFFNEN AUSCHECKEN.  Wenn Sie auf INFO klicken, w ird das DIALOGFELD WEBDAV-VERBINDUNG eingeblendet.  Im Feld URL geben Sie den vollständigen URL zu dem Verzeichnis des WebDAVServers an, zu dem die Verbindung hergestellt w erden soll. Dazu gehört auch das Protokoll, der Anschluss und das Verzeichnis, sofern dies vom Stam m verzeichnis abw eicht, zum Beispiel http:/ / apache1/ w ebdav/ m ysite

Testen

 In die Felder BENUTZERNAME und KENNWORT geben Sie Angaben für das Login der Serverauthentifizierung ein. Die Option KENNWORT SPEICHERN klicken Sie, w enn Ihr Kennw ort in Dream w eaver gespeichert w erden soll.  Ihre E-Mail-Adresse im nächsten Feld w ird zur Identifizierung des Eigentum srechts auf dem WebDAV-Server benötigt und w ird auch im Sitefenster als Kontaktinform ation angezeigt. Ein Klick auf OK bringt Sie zum Site-Fenster zurück. Wählen Sie SITE: VERBINDEN oder klicken Sie auf die Schaltfläche VERBINDEN in der Sym bolleiste des Site-Fensters, um m it der Rem ote-Site Verbindung aufzunehm en. Sie trennen die Verbindung durch Klicken auf die Schaltfläche TRENNEN oder Sie w ählen im Menü SITE: TRENNEN.



Das Dialogfeld „WebDAV“ im Fenster „Site-Definition“

Testen Testen Sie Ihre Site auf Herz und Nieren, bevor Sie dam it an die Öffentlichkeit gehen. Neben der Möglichkeit, den HTML-Code der einzelnen Seite zu optim ieren m it BEFEHLE: HTML OPTIMIEREN, können Sie eine Brow ser-Vorschau Ihrer Seite anzeigen sow ie eine Ziel-Brow ser-Überprüfung der gesam ten Site vornehm en.

 Verwendung von Berichten beim Testen der Site Wenn Sie Ihre Site vor einer Veröffentlichung testen, ist es sinnvoll, die Ergebnisse des Tests in einem Bericht zu erfassen. Unter SITE: BERICHT… können Sie den Testbericht für Ihren Bedarf konfigurieren und folgende HTML-Attribute für die gesam te Site, einzelne Bereiche oder Dokum ente aufspüren:  kom binierbare verschachtelte FONT-Tags  fehlende ALT-Tags  redundante verschachtelte Tags und entfernbare leere Tags  unbenannte Dokum ente (untitled docum ents)

69

70

Managing

 HTML-Berichte erstellen  Wenn Sie SITE: BERICHTE AUSWÄHLEN, erscheint das Dialogfeld BERICHTE.  Wählen Sie als Erstes aus dem oberen Popup-Menü, w ofür der Bericht erstellt w erden soll: AKTUELLES DOKUMENT, GESAMTE LOKALE SITE, AUSGEWÄHLTE DATEIEN DER SITE oder ORDNER…

Siehe Kapitel Anpassen und Erweitern auf Seite 270.

 Als Nächstes w ählen Sie m it den Kontrollkästchen einen oder m ehrere Berichtstypen aus:  Kom binierbare verschachtelte FONT-Tags listet alle verschachtelten FONT-Tags auf, die bei einer Säuberung des Codes zusam m engefasst w erden können.  ALT-Text fehlt listet alle IMG-Tags, bei denen der alternative Text fehlt, der für Nur-Text-Brow ser und Suchm aschinenbew ertungen w ichtig ist.  Überflüssige verschachtelte Tags listet ähnlich w ie die Option verschachtelte FONT-Tags auf, die gesäubert w erden können.  Entfernbare leere Tags listet alle nicht w eiter benötigten inhaltslosen Tags auf: z.B. < b> < / b> oder < a href= ""> < / a>  Unbenannte Dokum ente listet alle Dokum ente, bei denen die TITLE-Tags entw eder fehlen oder den Default-Nam en enthalten (untitled docum ent ), auf.  Wenn Sie auf AUSFÜHREN klicken, w erden Sie je nach Berichtstyp dazu aufgefordert, die Datei zu speichern, die Site zu definieren oder einen Ordner auszuw ählen.  Im Ergebnisfenster sehen Sie dann eine Liste der einzelnen Befunde. Zum Sortieren der Ergebnisse klicken Sie auf die jew eilige Spaltenüberschrift. Sie können nach DATEINAME, ZEILENNUMMER oder BESCHREIBUNG sortieren.  Um eine ausführlichere Beschreibung zu erhalten, w ählen Sie ein bestim m tes Ergebnis aus. Klicken Sie dazu auf DATEI ÖFFNEN oder doppelklicken Sie auf das Ergebnis. Der ausgew ählte Eintrag w ird im Dokum entfenster angezeigt. Klicken Sie auf BERICHT SPEICHERN, um den fertigen Bericht als XML-Datei in eine vorhandene Vorlage, eine Datenbank oder ein Rechenblatt zu im portieren. Sie können den Bericht z.B. ausdrucken oder auf einer Website publizieren. Über Macrom edia Dream w eaver Exchange können Sie Dream w eaver w eitere Berichtstypen hinzufügen. Nachdem Sie den HTML-Bericht erhalten haben, m acht es Sinn, die aufgelisteten Problem e gleich m it dem Befehl HTML OPTIMIEREN zu bereinigen.

 Workflow-Berichte erstellen Mit dem Befehl SITE: BERICHTE können Sie auch den Arbeitsfluss in Ihrem Webteam verbessern, indem Sie Workflow -Berichte generieren lassen, die Auscheckstatus und Design Notes – einschließlich definierter Nam ens- und Wertparam eter – anzeigen. Da bei dieser Berichtsart auch Abfragen über Ein- und Auscheckstatus gem acht w erden, m uss eine Verbindung zur entfernten Site bestehen.

Testen

71

 Wenn Sie SITE: BERICHTE ausw ählen, erscheint das Dialogfeld BERICHTE.  Wählen Sie als Erstes aus dem oberen Popup-Menü, w ofür der Bericht erstellt w erden soll: AKTUELLES DOKUMENT, GESAMTE LOKALE SITE, AUSGEWÄHLTE DATEIEN DER SITE oder ORDNER…  Wählen Sie in der Berichtskategorie WORKFLOW die Option AUSGECHECKT VON und klicken unten im Fenster auf die Schaltfläche BERICHTSEINSTELLUNGEN.  Im Dialogfeld AUSGECHECKT VON geben Sie den Nam en eines Team m itglieds ein und klicken dann auf OK.  Wenn Sie jetzt auf AUSFÜHREN klicken, erhalten Sie einen Bericht m it der Zusam m enfassung aller von der jew eiligen Person ausgecheckten Dateien. Sie können auch zusätzlich zum oder anstatt des Auscheck-Berichts, einen Bericht für Design Notes erstellen lassen:  Wählen Sie in der Berichtskategorie Workflow die Option DESIGN NOTES und klicken unten im Fenster auf die Schaltfläche BERICHTSEINSTELLUNGEN.  Geben Sie ein oder m ehrere Nam en-Wert-Paare ein und w ählen Sie Vergleichsw erte aus den entsprechenden Popup-Menüs aus. Wenn Sie zum Beispiel „Status enthält Final“ angeben, sucht das Berichtsprogram m nach Dateien, deren Design Notes den Status „Final“ haben.  Klicken Sie auf OK. Im anschließend erscheinenden Dialogfeld BERICHTE klicken Sie auf AUSFÜHREN, um den Bericht zu generieren.

Wenn Sie keine Verbindung zur entfernten Site errichtet haben, versucht Dreamweaver trotzdem ohne Erfolg, auf die entfernte Site zuzugreifen. Das kann sehr nervenzehrend werden, wenn es Ihnen nicht gelingt, diese Schleife zu unterbrechen, da für jede zu überprüfende Datei eine erneute Anfrage an die Remote-Site gestellt wird.

 Browser-Vorschau Wählen Sie DATEI: VORSCHAU IN BROWSER: BROWSER-LISTE BEARBEITEN… Im Fenster der Voreinstellungen können Sie Brow ser hinzufügen oder aus der Liste entfernen. Um die Brow ser-Vorschau des aktuellen Dream w eaver-Dokum ents zu aktivieren, w ählen Sie DATEI: VORSCHAU IN BROWSER. Den als Prim är-Brow ser eingestellten Brow ser öffnen Sie m it F12, den Sekundär-Brow ser m it BEFEHLSTASTE + F12.

 Ziel-Browser überprüfen Bei der Ziel-Brow ser-Überprüfung w ird die gesam te Site auf ein bestim m tes Brow ser-Profil geprüft und in einem HTML-Dokum ent als Bericht festgehalten. Der Bericht w ird im Prim är-Brow ser aufgerufen.

Weitere Browser-Profile finden Sie auf dem M acromedia Exchange Server, www.macromedia.com/ support/ dreamweaver.

Sie überprüfen entw eder ein geöffnetes Dokum ent, einen im Site-Fenster m arkierten Bereich oder als Default die gesam te Site, indem Sie DATEI: ZIEL-BROWSER ÜBERPRÜFEN… ausw ählen. In dem erscheinenden Fenster w ählen Sie das Profil, das geprüft w erden soll, und klicken auf ÜBERPRÜFEN. Nach erfolgter Überprüfung w ird der Bericht im Prim är-Brow ser angezeigt. Sie können diesen Bericht als HTML-Dokum ent für eine spätere Ausw ertung speichern.

In diesem Kapitel sind nur die Grundlagen des Sitemanagements mit Dreamweaver dargestellt. Weitere wichtige Hinweise und Tipps finden Sie in der Online-Hilfe.

PAGE

PAGE 74 Dokument 74 82 91

Seite Body Text

160 Layouten m it Tabellen 163 Layouttabellen 169 Ebenen in Tabellen konvertieren – und zurück

108 Code

171 Frames

108 111 116 117 119 120

173 175 175 175 176 176 178 179 180 182 183

Source Skripte Externe Editoren Referenzpalette Roundtrip Optim ieren

121 Elemente und Vorlagen 121 124 125 131

Elem entepalette Mit Elem enten arbeiten Vorlagen Bibliothek

Fram es erstellen Fram e im Fram e Fram es löschen Fram e-Inspektor Fram e-Seiten sichern Eigenschaften des Fram esets Fram e-Eigenschaften Inhalte einfügen Links und Targets Alternative Vorstellung Arbeiten m it Fram es

136 Tabellen

184 Formulare

136 142 155 158

184 185 192 193

Tags, Attribute und Werte Funktionstabellen Verschachtelte Tabellen Unentbehrliche Helfer

Funktionsw eise Form ular erstellen Einstellungen Form ulare und Verhaltensw eisen

74

Dokum ent

D OKUMENT It's the surface that matters.

Dream w eaver ist einer der ersten WYSIWYG-Editoren, m it dem Sie Webseiten erstellen können, ohne m it dem HTML-Code arbeiten zu m üssen. Je kom plexer Ihre Seiten w erden, desto hilfreicher ist es aber, den Quellcode auch von Hand editieren zu können. Im folgenden Kapitel w erden w ir uns m it dem Aufbau, der Struktur und den einzelnen Elem enten befassen, die eine Website ausm achen. Wir w erden die leistungsfähigen Funktionen kennen lernen, die uns Dream w eaver an die Hand gibt, um den Seitenaufbau zu steuern. Sie w erden lernen, w ie Sie zw ischen HTML-Editor und Dokum entfenster hin- und herschalten.

Seite Eine Webseite ist auch im m er eine Seite, deren Elem ente m it Hyper Text Markup Language (HTML) beschrieben sind. Das w esentliche Merkm al dieser Sprache ist es, von

Immer mehr Websites gehen jedoch dazu über, für Tags zunehmend Kleinschreibung durchzusetzen, um XM Lkompatibel zu werden.

einer Textstelle zu einer anderen und von einem Dokum ent zum anderen springen zu können, egal w o sich im Web diese Seite befindet. HTML-Seiten sind besonders ausgezeichnete und form atierte Textdokum ente. Tags (m arkup elem ents) bilden dabei die Bausteine, m it denen die Seite strukturiert w ird. Diese Elem ente inform ieren den Brow ser darüber, w ie die Inhalte der Seite dargestellt w erden sollen. Tags stehen im m er zw ischen spitzen Klam m ern. Viele Tags haben einen Anfangs-Tag und ein End-Tag. An dieser Stelle sei erw ähnt, dass Groß- oder Kleinschreibung bei den Tags keine Rolle spielt. Man sollte sich jedoch entw eder für Groß- oder für Kleinschreibung entscheiden – das verbessert die Übersichtlichkeit des Codes. Öffnen w ir in Dream w eaver eine neue Seite, sieht der Quellcode folgenderm aßen aus: < htm l> < head> < title> Neues Dokum ent< / title> < m eta http-equiv= "content-t ype" content= "text/ htm l; charset= iso-8859-1"> < / head> < body bgcolor= "#ffffff " text= "#000000"> < / body> < / htm l>

Das erste Tag, < HTML> , zeigt dem Brow ser an, dass es sich um ein HTML-Dokum ent handelt. Achten Sie auf das End-Tag am Schluss < / HTML> . Innerhalb des HTMLTags stehen die Elem ente < HEAD> und < BODY> . Der Body-Tag ist besonders, w eil er noch w eitere Bestandteile enthält:

Seite

75

< BODY BGCOLOR= "#FFFFFF">

BODY ist das Tag, BGCOLOR das Attribut und "#FFFFFF" der Wert. Dieses Elem ent, also die ganze Zeile, beschreibt die Farbe des Hintergrunds im Dokum ent. Gehen Sie in den HTML-Modus (M ENÜ: FENSTER: CODE-INSPEKTOR, Launchersym bol CODEINSPEKTOR oder (F10)) und löschen Sie Attribut und Wert des Body-Tags, so dass nur noch < BODY> stehen bleibt. Zurück im Dokum entfenster w erden Sie feststellen, dass die Hintergrundfarbe ins neutrale Brow ser-Grau gew echselt hat. Nicht jedes Tag hat Attribute (z.B. < TITLE> ), alle Tags m it Attributen haben jedoch eine ähnliche Syntax. Sie können den Quellcode Ihrer Seiten m it Leerzeichen, Tabulator und Zeilenschaltung nach Belieben strukturieren. Diese Zeichen w erden w eitgehend von Brow sern ignoriert. Auf Ausnahm en kom m en w ir später zu sprechen.

 Nützliche Helfer Bevor Sie im Dokum entfenster zu arbeiten beginnen, sollten Sie sich optim ale Arbeitsbedingungen schaffen, indem Sie die visuellen Hilfen kennen lernen: Lineale, Gitterlinien und Raster.  Mit ANSICHT: LINEALE: ZEIGEN blenden Sie links und oben am Rand des Dokum entfensters ein Lineal (ruler) ein: OPTIONSTASTE + BEFEHLSTASTE + R. Im gleichen Menü finden Sie auch die Ausw ahl zw ischen Pixel, Zoll und Zentim eter. Pixel sind absolute Maßeinheiten. Zoll und Zentim eter hingegen sind abhängig von Bildschirm und Auflösung.  Mit URSPRUNG ZURÜCKSETZEN im gleichen Menü setzen Sie den Ursprungspunkt (reference) w ieder auf Null. Sie finden ihn oben links im Dokum entfenster als Kreuz, das aus einer gepunkteten Linie gebildet w ird (crosshair). Ziehen Sie den neuen



Die Größe der Darstellung am Bildschirm variiert je nach Betriebssystem und Grafikkarte. Ein Zoll entspricht 72 Pixel beim M ac und 85 Pixel bei Windows.

In unserem Beispiel wird der Ursprungspunkt auf eine Position von x = 150 und y = −100 verschoben. Die hellblauen Gitterlinien stehen in einem Abstand von 25 x 25 Pixeln und sind auf „einrasten“ eingestellt. Die Ebene rechts „rastet“ nur an den Gitterlinien ein.

76

Dokum ent

Ursprungspunkt – bei gedrückter Maustaste – an eine beliebige Position im Dokum entfenster. Sie sehen im Lineal an den Seiten, dass sich der Nullpunkt der X- und Y-Achse zum neuen Bezugspunkt verschoben hat.  Mit dem Befehl ANSICHT: RASTER: RASTER ANZEIGEN blenden Sie das Raster (grid ) im Dokum entfenster ein, Tastatur OPTIONSTASTE + BEFEHLSTASTE + G. Mit zusätzlich gedrückter SHIFT-TASTE können Sie m it diesem Befehl das Ausrichten am Raster steuern. Im gleichen Menü finden Sie die Rastereinstellungen unter RASTER BEARBEITEN… Rastereinstellungen:  Hier finden Sie die Standardwerte von Dreamweaver. Wählen Sie Farbe und Darstellung des Netzes, durchgehende oder gepunktete Linien und ob „Einrasten“ aktiviert werden soll. Drücken Sie auf Anwenden und Sie erhalten die Vorschau im Dokumentfenster.

 Dokumentfenster

Siehe Kapitel Anpassen und Erweitern auf Seite 270.

Im Dokum entfenster w ird das aktuelle Dokum ent ungefähr so angezeigt, w ie es später im Brow ser erscheint. In der Titelleiste des Dokum entfensters w ird neben dem Seitentitel der Dateinam e in Klam m ern angezeigt. Ein Sternchen hinter dem Nam en zeigt eine ungesicherte Seite an. Neu hinzugekom m en in der Version 4 ist als fester Bestandteil des Dokum entfensters die Sym bolleiste – direkt unterhalb der Kopfleiste. In der Mitte der direkt editierbare Titel der Seite. Hinter den Schaltflächen links und rechts davon liegen unterschiedliche Steuerungsfunktionen und Menüs (von links nach rechts):  CODEANSICHT: zeigt im gesam ten Dokum entfenster den Quellcode an.  CODE- UND ENTWURFSANSICHT teilt das Dokum entfenster horizontal in Code- und Entw urfsansicht auf (split view ). Mit dem Trennbalken lässt sich die Größe des jew eiligen Teils einstellen. Mit ANSICHT: ENTWURFSFENSTER OBEN/ UNTEN können Sie die Ansichten vertauschen.  ENTWURFSANSICHT zeigt im gesam ten Dokum entfenster die Entw urfsansicht an.  LIVEDATA: nur bei UltraDev, zeigt aktuelle Datensätze einer Datenbankanw endung direkt im Dokum entfenster an.  DATEIVERWALTUNG enthält ein kurzes Menü m it Sitem anagem ent-Funktionen, die sich auf das aktuelle Dokum ent beziehen.  VORSCHAU/ DEBUG IM BROWSER enthält ein kurzes Menü für Brow ser-Vorschauen und JavaScript-Debugging.  ENTWURFSANSICHT AKTUALISIEREN aktualisiert die Entw urfsansicht (F5)  REFERENZ ruft die O’Reilly-Referenzen auf.  LISTE ALLE FUNKTIONEN zeigt alle im Dokum ent verw endeten JavaScript-Funktionen.

Seite

77

 ANSICHTSOPTIONEN: kurzes Menü m it den w ichtigsten Funktionen aus dem Hauptm enü ANSICHT 

Im Dokumentfenster werden im oberen Bereich die Inhalte des HeadBereichs als Icon angezeigt. Im Eigenschafteninspektor können Sie die Eigenschaften jedes Elements einstellen.

Wenn Sie im Menü ANSICHT: HEAD-INHALT w ählen, w ird unterhalb der Titelleiste ein Feld eingeblendet, in dem Sie die einzelnen Elem ente des Head-Bereichs editieren können.  Unten links in der Statusleiste des Dokum entfensters zeigt der Tag-Selektor in einer verschachtelten Darstellung die Tags an, die m arkierten Text oder Objekte steuern. Klicken Sie auf diese Tags, um die Elem ente und den zugehörigen Inhalt auszuw ählen.  Rechts in der Statusleiste finden Sie den Mini-Launcher. Von hier aus haben Sie Zugriff auf Site-Fenster, Elem entpalette, Stilpalette, Verhaltensw eiseninspektor, Zeitleisteninspektor und Code-Inspektor.  In dem Fenster links neben dem Mini-Launcher w ird die berechnete Größe des Dokum ents (einschließlich aller m it der Seite verknüpften Elem ente) sow ie die Dow nload-Zeit angezeigt. Im Popup-Menü FENSTERGRÖSSE (kleines schw arzes Dreieck) können Sie das Dokum entfenster auf voreingestellte oder benutzerdefinierte Größen einstellen.  Weitere Einstellungen für die Statusleiste nehm en Sie unter BEARBEITEN: VOREINSTELLUNGEN: STATUSLEISTE vor.

 Head Das Elem ent < HEAD> enthält alle Inform ationen, die der Brow ser benötigt, um die Seite darzustellen, z.B. w elcher Zeichenraum (Western, Chinese) verw endet w ird. Weiter stehen hier w ichtige Inform ationen für Suchm aschinen: der Seitentitel und Meta-Tags, die einen schnellen Überblick über die Inhalte verschaffen. Auch JavaScripte, und Codes anderer Scripting-Sprachen w erden in diesem Bereich der Seite eingesetzt. Zum Einblenden des Head-Bereichs w ählen Sie ANSICHT: HEAD-INHALT.

78

Dokum ent

 Seiteneigenschaften Eine neue Seite in Dream w eaver hat bereits einen Titel: „Untitled Docum ent“ und einen Meta-Tag: < META HTTP-EQUIV> . Wählen Sie M ODIFIZIEREN: SEITENEIGENSCHAFTEN oder die Tasten BEFEHLSTASTE + J, um das Fenster SEITENEIGENSCHAFTEN aufzurufen. Am schnellsten erreichen Sie SEITENEIGENSCHAFTEN über das Kontextm enü CTRL + KLICKEN, (Window s: RECHTE M AUSTASTE). Einige der Eigenschaften betreffen nicht nur den Head-, sondern auch den BodyBereich. Der Body-Tag selbst kann noch w eit m ehr Attribute enthalten als im Fenster SEITENEIGENSCHAFTEN definiert w erden können. Die Seiteneigenschaften  der Beispieldatei „page_properties.html“

Farbschema einstellen:  Wählen Sie ein fertiges Farbschema aus.

Seite

In der folgenden Tabelle finden Sie eine Übersicht der Einstellungen für SEITENEIGENm it den dazugehörigen Tags und Erklärungen. Ferner w erden in diesem Fenster Dokum ent- und Site-Ordner angezeigt. Unter BEFEHLE: FARBSCHEMA EINSTELLEN… können Sie auf eine große Ausw ahl fertiger w ebsicherer Farbkom binationen für Hintergrundfarbe, Text- und Linkdarstellung zugreifen. Dieses Makro können Sie w ie fast jede Funktion in Dream w eaver anpassen. SCHAFTEN

Einstellungen im Fenster Seiteneigenschaften Hintergrundbild

Mit dem Knopf WÄHLEN können Sie dem Hintergrund Ihrer Seite ein Bild zuordnen. Falls das Bild kleiner ist als das Browser-Fenster, wird es als Rapportmuster wiederholt (gekachelt). Nicht möglich sind transparente oder animierte GIFs.

Hintergrundfarbe

Klicken Sie in den Farbnapf und wählen Sie mit der Pipette eine websichere Farbe aus der Palette oder – innerhalb der Anwendung – von einem anderen Teil des Bildschirms. Die Hintergrundfarbe wird durch ein Hintergrundbild überdeckt.

Text

Farbnapf zum Auswählen der Farbe des Textes (default). Diese Farbe kann lokal durch einen Font-Tag überschrieben werden.

Links

Farbnapf zum Auswählen der Farbe für Textlinks und Rahmen verknüpfter Bilder. Diese Farbe kann lokal nicht überschrieben werden.

Besuchte Links

Farbnapf zum Auswählen der Farbe für bereits besuchte (visited) Textlinks und Rahmen verknüpfter Bilder. Diese Farbe gilt für die gesamte Seite und kann lokal nicht überschrieben werden.

Aktive Links

Farbnapf zum Auswählen der Farbe für gerade aktive Textlinks und Rahmen verknüpfter Bilder. Diese Farbe gilt für die gesamte Seite und kann lokal nicht überschrieben werden.

Rand/ Randbreite < LEFTMARGIN="0" TOPMARGIN="0“ MARGINWIDTH="0" MARGINHEIGHT="0">

Definiert den Abstand eines Dokuments zum Rand des Browser-Fensters. Stehen alle Werte auf Null, wird das Dokument oben links mit dem Browser-Fenster fluchten.

Dokum entcodierung

Codierung der verwendeten Standardzeichensätze. Der Code wird in den Bereich der Meta-Tags wie in unserem Beispiel „Westlich (Latin1)“ geschrieben als:

Tracing-Bild

Mit dem Knopf WÄHLEN können Sie ein sog. Tracing-Bild als Layoutvorlage in das Dokumentfenster laden. Ein Hintergrundbild oder eine Hintergrundfarbe wird hiervon überdeckt. Der Code wird als proprietäres (nur von Dreamweaver zu interpretierendes) Attribut in den Body-Tag geschrieben.

Transparenz < BODY TRACINGOPACITY>

Mit dem Schieberegler stellen Sie die Durchsichtigkeit der Layoutvorlage ein. Der Code wird als proprietäres (nur von Dreamweaver zu interpretierendes) Attribut in den Body-Tag geschrieben.

79

80

Dokum ent

 Meta Mit den Meta-Tags im Head-Bereich w ird die Seite m it „unsichtbaren“ Inform ationen versehen, die aber bei der Indizierung und Katalogisierung der Site durch Suchm aschinen oder der Steuerung des Brow sers bei der Seitendarstellung eine w ichtige Rolle spielen. Machen Sie die Head-Leiste des Dokum entfensters m it ANSICHT: HEAD-INHALT sichtbar. Sie sehen in der Leiste zw ei Icons: eines für den Titel, das andere für einen Meta-Tag. Wenn Sie die Icons anklicken, können Sie die Einstellungen im Eigenschafteninspektor sehen und ändern. Um ein neues Objekt im Head-Bereich einzusetzen, w ählen Sie aus dem Menü z.B. EINFÜGEN: HEAD-TAGS: M ETA. Sie können die Icons der Objekte in der Head-Leiste nach dem Einsetzen beliebig m it dem Cursor verschieben und dam it die Reihenfolge der Tags im Code bestim m en. In der Tabelle unten finden Sie die Head-Objekte, die Sie direkt aus dem Menü einsetzen können.

Meta-Tags und andere Head-Objekte META

Setzt eine Information ein, die das gesamte Dokument beschreibt oder beeinflusst, z.B. die Bestimmung des verwendeten Zeichensatzes:

KEYWORDS

Hier können Sie eine Reihe von Schlüsselbegriffen einsetzen, die einer Suchmaschine bei der Kategorisierung und Indexierung der Seite helfen:

DESCRIPTION

Dieses Attribut gibt eine kurze Beschreibung der Seite:

LINK

Mit diesem Tag können Sie ein externes Dokument, z.B. Stylesheet, mit der Webseite verknüpfen:

BASE

Mit diesem Tag können Sie allen in der Seite verwendeten Elementen eine gemeinsame Bezugsadresse (Referenz) zuweisen:

meta.html und metatags.html

Die gleichen Befehle stehen auch in der Objektepalette: HEAD zur Verfügung.

 Suchmaschinen füttern Mit den Meta-Tags SCHLÜSSELWÖRTER (keyw ords) und BESCHREIBUNG (description ) geben Sie den Suchm aschinen w ichtige Inform ationen. Wählen Sie EINFÜGEN: HEAD-TAGS: SCHLÜSSELWÖRTER. In dem Eingabefeld des Fensters geben Sie die Schlüsselbegriffe durch Kom m ata getrennt ein. Genauso verfahren Sie m it „Beschreibung“, nur dass Sie in diesem Fall eine kom pakte Beschreibung der Seite in Form eines Satzes in das Textfeld einfügen. Bedenken Sie hierbei, dass die Beschreibungen sich m öglichst m it den Inhalten Ihrer Seite decken bzw . diese sinnvoll ergänzen.

Seite

Das exzessive Wiederholen von Begriffen und Beschreibungen zum Vortäuschen von Substanz w ird von den m eisten Suchm aschinen inzw ischen nicht m ehr toleriert. Die Seite steht dann ganz hinten auf der Liste oder fliegt sogar gleich ganz raus!

 Seiten aktualisieren und umleiten

Im Internet finden Sie hierzu auf verschiedenen Sites nützliche Informationen und Unterstützung. Zum Beispiel bei: Fireball www.fireball.de/ meta_daten.html PlanetOcean Communications www.searchengine-news.com/

Der Refresh-Tag w ird benutzt, um eine Seite in bestim m ten Intervallen vom Server neu zu laden oder auf eine andere Seite um zuschalten. Sehr beliebt ist diese Funktion, um den Benutzer von Seiten, die „um gezogen“ sind, autom atisch zur aktuellen Seite zu führen. In diesem Fall ist es sinnvoll, einen niedrigen Wert (z.B. 1 Sekunde) einzustellen. Gehen Sie ansonsten m it dieser Funktion sehr vorsichtig um , da sich beim Leser Ihrer Seiten schnell Unm ut einstellen kann, w enn er auf Ihre Seite surft – dann aber gestört w ird – und nach einiger Zeit feststellen m uss, dass sich Ihre Seiten regelm äßig aktualisiert oder auf andere Seiten um geschaltet haben. Der schlim m ste Fall ist eine Schleife zw ischen zw ei Seiten, w ie in den Beispielen m eta.htm l und m etatags.htm l. Diesem Autom atism us kann der Leser nur entkom m en, w enn er sich „w egklickt“ oder das Fenster des Brow sers schließt. Sie sollten für eine zu aktualisierende Seite, deren Inhalt gelesen, zum indest aber überflogen w erden soll, m it relativ hohen Aktualisierungsw erten (z.B. 300 Sekunden) arbeiten und im m er einen Link (z.B. zurück zum Inhaltsverzeichnis) als Ausw eg lassen.

 Bezugspunkte herstellen Das Base-Tag gibt Ihnen die Möglichkeit, w enn Sie auf Ihrer Seite eine relative Adressierung benutzten, für alle Links und verknüpften Elem ente (z.B. Bilder) einen gem einsam en URL als Bezugspunkt anzugeben. Das Base-Objekt hat zw ei Attribute: HREF leitet alle relativen Links der Seite auf den angegebenen URL um , TARGET gibt das Zielfenster an, in dem die Links dargestellt w erden.

 Beziehungen zu anderen Dateien herstellen

81

Siehe Kapitel Dokument auf Seite 74.

82

Dokum ent

Das Link-Tag definiert eine Beziehung zw ischen der Seite und einer Datei, z.B. einem externen Stylesheet. Es w ird über das Menü EINFÜGEN: HEAD-TAGS: VERKNÜPFUNG eingesetzt. Weitere m ögliche Attribute finden Sie in der Tabelle unten. Das Link-Objekt w ird z.B. verw endet, um ein externes Stylesheet m it dem Dokum ent zu verbinden. Drücken Sie DURCHSUCHEN und w eisen Sie das zu verknüpfende Dokum ent zu.

Attribute des Link-Objekts < HREF>

Das Href-Attribut beschreibt den Pfad zum verknüpften Dokument.

< ID>

Das ID-Attribut wird für Scripte benutzt, um das Objekt zu identifizieren und zu bearbeiten.

< TITLE>

Das Title-Attribut wird beim Internet Explorer für die Darstellung des Titels als Tooltipp verwendet.

< REL>

Das Rel-Attribut beschreibt die Art der Beziehung zum Dokument (z.B. einem stylesheet).

< REV>

Das Rev-Attribut beschreibt die Art der Beziehung zum Dokument – aber in umgekehrter Richtung.

< REL> definiert die Beziehung zw ischen dem geöffneten Dokum ent und dem im

Beispiel: body_logic.html

Feld „Href“ angegebenen. Mögliche Werte sind: alternate, stylesheet, start, next, prev, contents, index, glossary, copyright, chapter, section, subsection, appendix, help und bookm ark. Sie können m ehrere Werte eingeben, die durch Leerzeichen voneinander getrennt sind. Bei < REV> w ird die um gekehrte Beziehung zw ischen den Dokum enten definiert. Auch hier können Sie m ehrere Werte eingeben.

Body

Das Stil-M enü:  Diese Stile werden derzeit durch Dreamweaver unterstützt.

Der Inhalt (content ) einer Webseite steht innerhalb des Body-Bereichs des Dokum entes. Grundsätzlich unterscheidet m an bei den Body-Tags zw ischen „logischen“ (relativen ) und „physischen“ (absoluten ) Stilen. Logische Stile versuchen, die Art des Inhalts und die Intention zu beschreiben, w ährend physische Stile feste Vorgaben definieren. Die logischen Stile w erden aufgrund ihrer flexiblen Einsatzm öglichkeiten in Verbindung m it Cascading Style Sheets (CSS) in der Zukunft eine w ichtige Rolle spielen. Sie finden die Stile im Menü TEXT: STIL oder auch im Kontextm enü (CTRL + M AUSKLICK) Die Menüpunkte FETT, KURSIV und UNTERSTRICHEN sind physische (absolute) Stile oder auch zeichenform atierte Stile. < B> (fett) und < I> (kursiv) haben Tastaturkürzel und sind auch über den Eigenschafteninspektor anw endbar. Im selben Menü finden Sie auch die von Dream w eaver unterstützten logischen Stile. Dies bezieht sich sow ohl auf die Eingabe als auch auf die Darstellung der Stile. Alle nicht von Dream w eaver unterstützten logischen Stile m üssen im Quellcode eingegeben w erden.

Body

83



Diese logischen Stile werden derzeit von Dreamweaver unterstützt.

 Font Das Font-Tag bildet eine Untergruppe des Body-Tags und gehört zu den physischen Stilen. Der Tag w eist einem m arkierten Text absolute Eigenschaften w ie Schriftart, -größe und -farbe zu. Schriftarten w erden m eist in Gruppen angegeben, zuerst die gew ünschte Schriftart, dann Ersatzschriften oder übergeordnete Schriftfam ilien oder -kategorien. Der Brow ser kann norm alerw eise nur Schriften darstellen, die installiert sind. Verw enden Sie die m it dem Betriebssystem installierten TrueType-Schriften. Sie können dann davon ausgehen, dass die m eisten Ihrer Leser die gleiche Schrift sehen.

Die Darstellung der verschiedenen Stile – besonders die der logischen Stile – unterscheidet sich stark von Browser zu Browser.

M ehr zum Font-Tag in Verbindung mit Schriften finden Sie im Kapitel Stylesheets auf Seite 230.

84

Dokum ent

In dieser Tabelle  sind alle physischen Stile dargestellt.

body_font.html body_fontcolor.html body_fontsize.html

M ehr zum Thema Farben finden Sie im Kapitel Farben auf Seite 196. M ehr zum Thema Schriftgrößen finden Sie im Kapitel Stylesheets auf Seite 230.

Die Farbe des Textes w ird auch im Font-Tag definiert. Sie können die Farbe m it der system spezifischen Farbausw ahl frei definieren oder m it der Pipette vom Desktop oder aus der w ebsicheren Palette entnehm en. Oder geben Sie die Farbe als Hexadezim al-Wert (#FF0000) oder Farbnam e ein. Die Definition m it Farbnam en w ird nur durch BEFEHLE: FARBSCHEMA EINSTELLEN unterstützt. Die Größe des Textes w ird im m er von der Standardgröße des benutzten Brow sers ausgehend dargestellt. Wenn Sie die Standardgröße verändern, w erden alle davon abhängigen Schriftgrößen des Font-Tags kleiner oder größer. Dream w eaver unterstützt im Schriftm enü die absolute Größen (1–7) sow ie die relativen Größen Vergrößern (+ 1 bis + 7) und Verkleinern (−1 bis −7).

 Sonderzeichen Eine Liste aller ISO-Zeichen finden Sie unter www.w3.org/ M arkUp/ htmlspec/ html-spec_toc.html#SEC9.7.

M ehr Informationen zu Sonderzeichen finden Sie unter: Unicode: die Organisation www.unicode.org/ index.html Unicode im Web: W3C Character M odel www.w3.org/ TR/ charmod/

Die nicht im international festgelegten Standardzeichensatz vorkom m enden Zeichen w erden m ittels einer Zeichenfolge definiert. Als Untergruppe vom Body-Tag w erden die ISO-Sonderzeichen m it einem Et-Zeichen vor und einem Strichpunkt (;) nach dem Zeichen gekennzeichnet. Man unterscheidet nam ed characters und decim al characters. Nam ed characters beschreiben ein Zeichen, z.B. w ird das CopyrightZeichen m it "©" definiert. Decim al characters w erden m it einem Num m erncode definiert, z.B. "#169;" für das Copyright-Zeichen. Das Program m unterstützt seit Version 3 auch die Eingabe von Sonderzeichen. In der Objektepalette ZEICHEN finden Sie die gebräuchlichsten Zeichen. Wenn Sie auf den rechten unteren Knopf drücken, erhalten Sie eine Tabelle m it w eiteren Zeichen. In nicht allzu ferner Zukunft w ird Unicode und das Universal Character Set (CS) das alte ISO-Modell w eitgehend ersetzen.

Body

 Zeilenumbruch Mit dem Elem ent < BR> (break) können Sie den Text (oder andere Inhaltselem ente) an einer bestim m ten Stelle um brechen: Alles w as nach einem BR-Tag steht, w ird in der nächsten Zeile dargestellt. Das Tag w ird häufig auch eingesetzt, w enn in der Seite schnell etw as vertikaler Raum geschaffen w erden soll (EINFÜGEN: SONDERZEICHEN: ZEILENUMBRUCH oder SHIFT + ENTER. Das BR-Tag w ird im Dokum entfenster durch ein kleines gelbes Schild m it den Buchstaben „BR“ dargestellt. Diese Icons sehen Sie nur, w enn Sie die unsichtbaren Elem ente eingeschaltet haben (ANSICHT: VISUELLE HILFSMITTEL: UNSICHTBARE ELEMENTE) und dieses Icon unter VOREINSTELLUNGEN… : UNSICHTBARE ELEMENTE ausgew ählt ist.

 Leerzeichen Wenn Sie sich einm al den Quellcode einer Seite anschauen, auf der Sie gerade Text eingeben, w erden Sie feststellen, dass zw ischen den P-Tags im m er ein " " steht, solange Sie noch keinen Text eingegeben haben. Dies ist eine Standardeingabe, die Dream w eaver vornim m t, um die Form atierung zu erhalten. Das Sonderzeichen " " steht für non-breaking space und hat die Funktion eines geschützten Leerzeichens. Sie können in Ihrer Seite beliebig viele gew öhnliche Leerzeichen (Leertaste) hintereinander eingeben, HTML ignoriert sie bis auf eines. Wenn Sie jedoch " " (EINFÜGEN: SONDERZEICHEN: GESCHÜTZTES LEERZEICHEN oder BEFEHLSTASTE + SHIFT + LEERTASTE oder ALT + LEERTASTE) eingeben, können m ehrere Leerzeichen nebeneinander dargestellt w erden. Sie finden das geschützte Leerzeichen auch in der Objektepalette Zeichen. Zw ischen Worten, bei Nam en oder Ziffernfolgen, z.B. „San Francisco“ oder „1 (403) 123 45 67“, verhindert das Zeichen, dass diese am Leerzeichen getrennt, also in die nächste Zeile um brochen w erden. Weiterhin können Sie das geschützte Leerzeichen benutzen, um schnell horizontale Abstände zw ischen Elem enten in Ihrem Layout zu schaffen, oder um einzelne Buchstaben zu verschieben, etw a um einen Einzug zu sim ulieren.

 Weißraum Mit den Elem enten < NOBR> und < WBR> haben Sie w eitere Möglichkeiten, die Gestaltung von Weißraum (w hitespace) auf Ihrer Seite zu beeinflussen:  Das NOBR-Tag (no break) funktioniert ähnlich w ie das Sonderzeichen " ". Alle Worte, die zw ischen Anfangs- und End-Tag dieses Elem entes stehen, w erden in einer Zeile dargestellt.  Das WBR-Tag (w ord break) hingegen funktioniert w ie ein „w eiches“ Trennzeichen (soft hyphen ) in einer Textverarbeitung: Das Wort w ird an einer definierten Stelle getrennt, w enn der Platz in der Zeile nicht ausreicht.

85

86

Dokum ent

 Kom binieren Sie beide Elem ente und stellen ein WBR-Tag innerhalb eines NOBRTags, w ird der gesam te Text zw ischen den NOBR-Tags in einer Zeile dargestellt, solange die Zeile lang genug ist. Wenn um brochen w ird, dann nur an der Stelle, w o das WBR-Tag eingefügt ist. Da Dream w eaver diese Elem ente nicht unterstützt, m üssen Sie sie im Quellcode eingeben.

 Absatz In älteren Versionen von HTM L wird das Element < P> auch einzeln, d.h. nur mit dem Anfangs-, aber ohne End-Tag eingesetzt. Jedoch wird diese Formatierung seit HTM L 3.2 von einigen Browsern nicht mehr sicher unterstützt.

Wenn Sie eine Zeile Text im Dokum entfenster eingeben und diese Eingabe m it einer Zeilenschaltung (return ) abschließen, w ird diese autom atisch von einem P-Tag (paragraph ) um geben. Dieses Elem ent definiert Textabschnitte, genauer gesagt Absätze. Das P-Tag w ird unten in der Statusleiste im Tag-Selektor als < p> angezeigt. Es erw eist sich z.T. als schw ierig, m it diesem autom atisch im plizierten P-Tag um zugehen. Wenn Sie das Tag aus bestim m ten Gründen einm al löschen w ollen – z.B. um es durch ein anderes zu ersetzen – tun Sie dies am einfachsten im Eigenschafteninspektor: Sie klicken in den Text und w ählen unter FORMAT statt ABSATZ – KEINE, oder im Kontextm enü ABSATZFORMAT: KEINE oder TAG ENTFERNEN < P> . Sie können hierfür auch in den HTML-Modus um schalten (FENSTER: CODE-INSPEKTOR oder F10 oder den Quick-Tag-Editor (M ODIFIZIEREN: QUICK TAG EDITOR oder BEFEHLSTASTE + T) benutzen.

 Headline Wenn Sie von Hand im Code arbeiten, achten Sie darauf, zwischen dem letzten Zeichen und dem schließenden Tag kein Leerzeichen einzufügen, sonst wird der Absatz der letzten Zeile mit fehlerhaftem Durchschuss (Zeilenabstand) dargestellt. body_paragraph.html Beispiel: body_head.html

Überschriften w erden üblicherw eise m it H-Tags unterschiedlicher Größen form atiert, um die Texte deutlich zu gliedern: Nach der Überschrift kom m t der Untertitel, dann die Zw ischentitel usw . Insgesam t gibt es in HTML sechs Abstufungen: von < H1> bis < H6> . Sie sollten sich bei der Gliederung Ihrer Dokum ente m it den ersten vier begnügen, da < H5> und < H6> von ihrer Darstellungsgröße her kaum noch zu unterscheiden sind. Sie können einem beliebigen Textabschnitt die Eigenschaft HEADLINE zuw eisen. Die Zeile w ird autom atisch um brochen, w eil H-Tags Blockelem ente sind. Aus dem gleichen Grund können auch nicht m ehrere verschiedene H-Tags in derselben Zeile stehen. Wenn Sie m it verschiedenen Schriftgrößen in einem Absatz oder in einer Zeile arbeiten w ollen, benutzen Sie hierfür das Font-Tag (siehe oben).

 Einzüge Der Einzug spielt beim Erstellen verschachtelter Listen eine Rolle.

Mit dem Elem ent < BLOCKQUOTE> w ird der Text eingerückt (eingezogen ). Man kann es als vereinfachte Tabtaste verstehen, die m ehrfach angew endet w erden kann. Um den Einzug rückgängig zu m achen, w ählen Sie Negativeinzug. Sie finden dieses Tag im Menü TEXT: EINZUG (NEGATIVEINZUG), im Kontextm enü LISTE: EINZUG oder im Eigenschafteninspektor rechts unten.

Body



87

Im Eigenschafteninspektor kontrollieren Sie den Einzug von Listen.

 Listen und Aufzählungen Es gibt zw ei Arten von Aufzählungen (list ) – die geordneten (ordered ) und ungeordneten (unnum bered ).  Bei den ungeordneten Listen < UL> sind die Aufzählungszeichen Sym bole (z.B. Listenpunkt, Kreis, Quadrat etc.).  Bei den num m erierten Listen < OL> sind die Aufzählungszeichen Zahlen und Buchstaben (1, i, I, a, A etc.). Beide Arten von Listen können kom biniert w erden. Um eine Liste zu erstellen, gehen Sie folgenderm aßen vor:  Schreiben Sie jeden Listenpunkte auf.  Trennen Sie die einzelnen Listenpunkte durch Absätze.  Markieren Sie alle Listenpunkte.  Wählen Sie TEXT: LISTE: UNGEORDNETE LISTE (Kontextm enü) oder klicken Sie auf das Sym bol im Eigenschafteninspektor. Sie erhalten eine Liste m it Listenpunkten (bulletpoints).  Um diese Liste in eine geordnete Liste um zuw andeln, w ählen Sie TEXT: LISTE: GEORDNETE LISTE. Sie erhalten eine durchnum m erierte Liste m it Zahlen. Eine besondere Variante ist die Definitionsliste. In ihr w erden die Listenpunkte abw echselnd als Schlagw ort und dazugehörige Erklärung dargestellt. Diese Liste eignet sich z.B. gut für ein Glossar.

list_unordered1.html list_ordered1.html list_definition.html

88

Dokum ent

 Verschachtelte Listen Die Funktion „Text: Liste: Eigenschaften“ lässt sich nur dann auswählen, wenn der Listen-Bereich in der Entwurfsansicht ausgewählt wird. Ein Klicken auf das < LI> -Tag hilft meistens nicht.

list_ordered2.html list_unordered2.html

Die geordneten und ungeordneten Listen können beliebig kom biniert und verschachtelt w erden:  Wählen Sie einen Listenpunkt einer ungeordneten Liste m it dem Cursor aus.  Benutzen Sie das Einzugsw erkzeug, um den Listenpunkt einzurücken.  Er w ird jetzt zum Unterpunkt – ein neues Listensym bol.  Nehm en Sie einen w eiteren Listenpunkt und rücken Sie ihn als w eiteren Unterpunkt noch w eiter nach rechts ein. Ein w eiteres neues Listensym bol erscheint.  Zum Ausrücken benutzen Sie das negative Einzugsw erkzeug.  Sie können auch m ehrere Listenpunkte gleichzeitig einrücken (oder ausrücken), w enn Sie sie m it dem Cursor m arkieren. Genauso gehen Sie beim Verschachteln einer geordneten Liste vor. Über TEXT: LISTE: EIGENSCHAFTEN… haben Sie jetzt die Möglichkeit, auf jeden einzelnen Listenpunkt (oder jede Unterliste) eigene Listenstile anzuw enden. Bei ungeordneten Listen (Gliederung) können Sie beispielsw eise einen Kreis statt eines Quadrats zuw eisen. Bei geordneten Listen haben Sie eine ungleich größere Ausw ahl von Optionen:  Sie können statt der Num m ern auch kleine und große röm ische Zahlen sow ie kleine und große Buchstaben als Aufzählungszeichen einsetzen.  Sie können den Zähler der Num m erierung bei einer bestim m ten Zahl beginnen lassen, beispielsw eise bei 3 statt bei 1, oder bei C statt bei A.  Sie können die beiden Listentypen (geordnet und ungeordnet) beliebig kom binieren.

Im Fenster „Listeneigenschaften“  bestimmen Sie das Aussehen der Aufzählungspunkte.

list_graphic.html

Will m an Listen grafisch „aufpeppen“, kann m an statt der vom Brow ser generierten Sym bole eigene Grafiken einsetzen. Die kleinen Bilder im Zusam m enw irken m it dem Einzugsw erkzeug lassen schnell eine ansprechende und durchstrukturierte Liste entstehen. Mit Cascading Stylesheets haben Sie ein noch um fangreicheres Repertoire, um auf die Erscheinung von Listen einzuw irken.

Body

 Menü- und Ordnerlisten Etw as seltener benutzte Listentypen sind die Menü- (m enu ) und Ordnerlisten (directory lists). Dies m ag daran liegen, dass sich die Darstellung dieser Listen durch die verschiedenen Brow ser nicht – oder nur m arginal – von der ungeordneten Liste unterscheidet. Ursprünglich w urden diese beiden Listentypen m it HTML 2.0 eingeführt, um alternative und kom paktere Darstellungsform en zur ungeordneten Liste zu haben.

Siehe Kapitel Stylesheets auf Seite 230.

 Vorformatiert Mit dem PRE-Tag lassen sich vorform atierte Texte, inklusive aller Tabs, Leerzeichen und -zeilen in einer Seite darstellen. Hierfür setzen die Brow ser eine nicht-proportionale (m onospaced ) Schrift w ie Courier ein. Der PRE-Tag ist ein Absatzform at w ie das P-Tag und lässt sich über das Menü TEXT: ABSATZFORMAT: VORFORMATIERTER TEXT, das Kontextm enü oder den Eigenschafteninspektor anw enden. Vorform atierter Text eignet sich sehr gut zur Darstellung von Quellcode in Listing-Form .

 Blockelemente Neben den Absatz-, Überschriften- und Listenform aten gibt es noch w eitere strukturierende Elem ente, w ie z.B. < ADDRESS> , < DIV> und < SPAN> . Diese Elem ente w erden als Blockelem ente bezeichnet, w eil sie den zw ischen den Tags stehenden Content „blockartig“ um schließen: Er w ird in der Form atierung w ie ein Elem ent behandelt. Wozu das gut ist, w erden Sie sehen, w enn diese Blockelem ente m it CSS oder Attributen w ie < FONT> kom biniert w erden. Während < P> , < DIV> und < SPAN> zur Strukturierung m it beliebigen Objekten eingesetzt w erden können – also auch m it Bildern, w erden < PRE> , < ADDRESS> , < BLOCKQUOTE> und die oben beschriebenen H-Tags nur auf Text angew endet.

 Inline-Elemente Tags, die Textabschnitte innerhalb von Blockelem enten form atieren, w erden InlineTags genannt. Dazu gehören beispielsw eise das BR-Tag, aber auch das A-Tag, das Font-Tag und die Auszeichnungen der physischen Stile: NORMAL, FETT, KURSIV und FETT KURSIV, (TEXT: STIL). Durch Inline-Elem ente form atierte Textabschnitte w erden in Dream w eaver als Ausw ahlbereiche bezeichnet und durch Ausw ahlstile definiert.

preformat.html

89

90

Dokum ent

 HTML-Stile

Linke Abbildung: HTM L-Stil definieren: Hier können die Einstellungen des gewünschten Stils überprüft und verändert werden. In diesem Fall wurde die Option „Vorhandenem Stil hinzufügen“ gewählt. Rechte Abbildung: HTM L-Stil definieren: In diesem Fall wird ein Absatzstil eingestellt: „Standardfarbe“ (ohne Standardabsatzformat, P-Tag) und „Ausrichtung links“. Außerdem wurde die Option „Vorhandenen Stil löschen“ gewählt. Dieses Stilformat überschreibt alle vorhandenen Absatzformate. 

In diesem Fenster (FENSTER: HTML-STILE oder BEFEHLSTASTE + F11) – nicht zu verw echseln m it dem CSS-Stile-Fenster – lassen sich reine HTML-Stile in m akroartigen Kom binationen zusam m enfassen und editieren (ähnlich den Form atvorlagen der Textverarbeitung). Neben den äußerst hilfreichen Werkzeugen ABSATZ-STIL LÖSCHEN und AUSWAHL-STIL LÖSCHEN gibt es eine Reihe von vorgegebenen Stilen im Menü, die jedoch nur der Anschaulichkeit dienen! Einen eigenen Ausw ahlstil können Sie schnell definieren:  Markieren Sie im Dokum entfenster einen Textabschnitt und geben Sie dem ausgew ählten Text im Eigenschafteninspektor die gew ünschten Eigenschaften: Schriftart, Größe, Farbe etc.  Gehen Sie – m it dem w eiterhin m arkierten Text – m it dem Cursor in das HTMLStile-Fenster und klicken Sie auf den schw arzen Pfeil in der rechten oberen Ecke.  Wählen Sie NEU.  In dem Ausw ahlfenster sehen Sie die von Ihnen getroffenen Form ateigenschaften des m arkierten Textes.  Ändern Sie diese Eigenschaften gegebenenfalls.  Geben Sie einen Nam en für den neuen Stil ein.  Klicken Sie auf OK.  In der Liste sehen Sie den neuen Stil. Wenn Sie jetzt im Dokum entfenster einen anderen Textabschnitt m arkieren und auf den neuen HTML-Stil klicken, w erden die Eigenschaften auf den m arkierten Text angew endet. Die HTML-Stile können auf der Seite – sow eit m öglich – m it den CSS-Stilen kom biniert w erden.

Text

91

 HTM L-Stile-Fenster: Das Absatzzeichen „p“ steht für Absatzstile (Blockelemente), während das kleine „a“ für Auswahlstile (Inline-Elemente) steht. Das kleine Pluszeichen steht für „Vorhandenem Stil hinzufügen“. Ist das kleine Kästchen unten links abgehakt, wird der angewendete Stil sofort im Dokumentfenster angezeigt.

 Schauen Sie sich eine fertige Stilvorlage der Liste an, indem Sie auf den Nam en doppelklicken. Das Fenster HTML-STIL DEFINIEREN öffnet sich.  Sie können auch einen bestehenden Stil als Ausgangspunkt für einen neuen Stil nehm en. Klicken Sie auf den Nam en und w ählen Sie (rechts oben, kleines schw arzes Dreieck) DUPLIZIEREN. Sichern Sie Ihre eigenen Einstellungen unter einem neuen Nam en.  Oder löschen Sie einen der Stile, w enn er Ihnen nicht gefällt oder Sie ihn versehentlich eingerichtet haben. Wählen Sie (rechts oben, kleines schw arzes Dreieck) LÖSCHEN. Neu angelegte HTML-Stile w erden in einem eigenen Ordner im Stam m verzeichnis der Site als XML-Datei verw altet: Library: styles.xm l. Dieses Verzeichnis sollten Sie nicht löschen, w enn Sie auf Ihre Stile und andere Site-spezifische Einstellungen zurückgreifen w ollen. Für die Betrachtung im Brow ser – also im Web – spielen diese Dateien jedoch keine Rolle. Sie brauchen sie folglich auch nicht m it auf die entfernte Site (rem ote site) auf den Webserver zu kopieren.

Text Die Form atierung des Textes w ar in den ersten Tagen des Web das w ichtigste Mittel, um sow ohl Inhalt als auch Struktur und Gestaltung zu verm itteln. Zugleich w aren aber die Möglichkeiten zur Form atierung von Webseiten sehr viel begrenzter als bei Print-Medien. Mittlerw eile sind die Möglichkeiten der Textdarstellung in HTML durch Technologien w ie Cascading Style Sheets und Dynam ic Fonts erw eitert w orden.

92

Dokum ent

Auch das strukturierte Arbeiten m it Texten ist durch verfeinertes Suchen-Ersetzen entscheidend verbessert w orden. In diesem Abschnitt des Buches w erden Sie die Anw endung der Textw erkzeuge von Dream w eaver kennen und nutzen lernen. Wenn Sie bereits einige Zeilen Text in das Dokum entfenster eingegeben haben, w erden Sie feststellen, dass sich Dream w eaver ähnlich w ie ein Textverarbeitungsprogram m (z.B. Word) verhält: Sie beginnen oben links zu schreiben, und der Text fließt von links nach rechts die Zeile entlang, bis er am rechten Rand des Fensters um brochen w ird. Bei den Texten auf Webseiten gibt es jedoch einige Einschränkungen und Besonderheiten: Ausw ahl und Größe der Schriften ist begrenzt, die Blocksatzausrichtung entfällt und harter Zeilenum bruch ist unüblich. Wenn Sie m it Text in Dream w eaver experim entiert haben, w erden Sie sehen, w arum das so ist: Webseiten sind zuallererst ein dynam isches Medium . Sie als Autor haben w enig Einfluss darauf, w ie sich die Seite im Brow ser des Lesers darstellt; das ist abhängig davon, w elchen Brow ser, w elches Betriebssystem , w elche Standardschriften, Fenstergrößen und Monitorauflösungen benutzt w erden. Alle diese Param eter spielen bei der Darstellung einer Seite eine w ichtige Rolle.

 Ausrichten Für das Ausrichten von Text auf der Seite (oder in einer Tabelle) gibt es drei Optionen:  Links ausrichten (TEXT: AUSRICHTEN: LINKS oder BEFEHLSTASTE +ALT + SHIFT + L)  Zentrieren (TEXT: AUSRICHTEN: ZENTRIEREN oder BEFEHLSTASTE + ALT + SHIFT + C)  Rechts ausrichten (TEXT: AUSRICHTEN: RECHTS oder BEFEHLSTASTE + ALT + SHIFT + R)  Sie können auch die Sym bole im Eigenschafteninspektor dafür benutzen. Ausgerichtet w ird im m er das ausgew ählte Blockelem ent. Für eine feinere Ausrichtung von Text benutzen Sie CSS – besonders in Verbindung m it Ebenen.

 Text auswählen Siehe Kapitel Ebenen auf Seite 240.

Es gibt m ehrere Methoden, Text im Dokum entfenster zu m arkieren:  Setzen Sie die Einfügem arke (cursor) vor oder hinter den auszuw ählenden Text und ziehen Sie ihn bei gedrückter Maustaste – je nachdem nach rechts oder links – auch über m ehrere Zeilen nach oben oder unten.  Doppelklicken Sie auf ein Wort, um es auszuw ählen.  Stellen Sie den Cursor an den Anfang Ihrer Ausw ahl und klicken Sie bei gedrückter SHIFT-TASTE an das Ende der Ausw ahl.  Setzen Sie den Cursor ganz links vom zu m arkierenden Text (ein Pfeil w ird angezeigt). Klicken Sie, um die jew eilige Zeile zu m arkieren, oder m arkieren Sie bei gedrückter Maustaste m ehrere Zeilen.

Text

93

 Benutzen Sie BEFEHLSTASTE + A, um den gesam ten Text im Body-Bereich auszuw ählen.  Im Tag-Selektor können Sie Texte oder andere Objekte anhand Ihrer Tags identifizieren (Tag m it fetter Schrift) und ausw ählen (Tag anklicken).

 Löschen und wiederherstellen Text löschen Sie, indem Sie ihn m arkieren und dann die BACKSPACE- oder ENTF-TASTE drücken. Sie können m it den Befehlen RÜCKGÄNGIG (undo ) und WIEDERHOLEN (redo ) m ehrere Schritte rückgängig m achen und w iederholen. Wählen Sie BEARBEITEN: RÜCKGÄNGIG (WIEDERHOLEN) oder drücken Sie BEFEHLSTASTE + Z (Y). Die Anzahl der Schritte w ird nur durch den Arbeitsspeicher begrenzt, den Sie Dream w eaver zugew iesen haben. Dies funktioniert auch nach dem Speichern des Dokum entes, allerdings nur, w enn Sie das Dokum ent nicht vom externen Editor (BBEdit oder Hom esite) speichern.

 Cut, Copy & Paste Wie in jeder guten Textverarbeitung können Sie auch in Dream w eaver m it den üblichen Funktionen AUSSCHNEIDEN (cut ), KOPIEREN (copy) und EINFÜGEN (paste) arbeiten. Markieren Sie den zu bearbeitenden Text m it dem Cursor. Wählen Sie BEARBEITEN: AUSSCHNEIDEN (KOPIEREN) oder drücken Sie BEFEHLSTASTE + X (C). Setzen Sie den Cursor an die Stelle, an die der Text eingesetzt w erden soll (blinkende Einfügem arke). Für das Einfügen w ählen Sie BEARBEITEN: EINFÜGEN oder geben BEFEHLSTASTE + V ein.

 Drag & Drop Die noch pfiffigere Variante m it Drag & Drop w ird inzw ischen von allen Betriebssystem en unterstützt:  Markieren Sie den zu bew egenden Text (eine Kom bination von Ausschneiden und Einfügen). Gehen Sie m it dem Cursor (Pfeil) auf den m arkierten Text. Ziehen Sie (drag ) m it gedrückter Maustaste den m arkierten Textblock (Bereich m it gestrichelter Linie) an die Stelle, an die der Text eingefügt w erden soll (senkrechte Einfügem arke). Lassen Sie die Maustaste los (drop ) und der Text w ird eingefügt.  Oder m arkieren Sie den zu kopierenden Text (eine Kom bination von Kopieren und Einfügen) und führen Sie die gleichen Schritte w ie oben durch. Halten Sie jetzt jedoch zusätzlich die OPTIONSTASTE gedrückt. Ein kleines Pluszeichen erscheint neben dem Pfeil und zeigt dam it den Kopiervorgang an.

M it der mächtigen Funktion „Verlauf“ können mehrere Arbeitsschritte „aufgenommen“ und wieder „abgespielt“ werden. M ehr hierzu in Kapitel Verhaltensweisen auf Seite 250.

94

Dokum ent

 Tutti Frutti Die Befehle „Ausschneiden“, „Kopieren“, „Einfügen“, Drag & Drop, „Rückgängig“ und „Wiederherstellen“ sowie die Verlaufsfunktion können grundsätzlich auf alle Elemente im Dokumentfenster angewendet werden: Steuerelemente, Icons, Text, Bilder, Tabellen oder Ebenen.

In Dream w eaver 3 w ar es m anchm al etw as undurchschaubar, w ie unterschiedlich über die Zw ischenablage kopierte und eingefügte Texte in der Entw urfsansicht und im Quellcode behandelt w urden. Dies ist jetzt vereinheitlicht w orden:  Text in die Entw urfsansicht eingefügt, w ird eins zu eins übernom m en. Die Sonderzeichen w erden im Quellcode entsprechend übersetzt.  Text in den Quellcode eingefügt, w ird auch eins zu eins übernom m en. Das Ganze ist reversibel. Auch aus Dream w eaver kopierter Text w ird eins zu eins übernom m en.

 Word-HTML importieren Die unterschiedlichen Ergebnisse der Kopiermodi lassen sich zu didaktischen Zwecken einsetzen, um die HTM L-Syntax darzustellen, beispielsweise bei der Dokumentation von Schulungsunterlagen. M it dem Feature „Word-HTM L importieren“ wird der Tatsache Rechnung getragen, dass fast alle M anuskripte als Word-Dokumente geliefert werden.

Um die aus Word exportierten HTML-Dokum ente – ohne die Word-spezifischen Bugs, aber bei vollem Erhalt der Form atierungen – übernehm en zu können, w erden beim Im port eine Reihe von Filtern zu- oder abgeschaltet:  Sie können die benutzte Version von Word ausw ählen,  Word-spezifische Marken entfernen,  CSS optim ieren und  Form atierungen voreinstellen. Am Ende der Form atierung erhalten Sie einen kurzen Report in einem Warnfenster. Sie finden dieses Feature unter DATEI: IMPORTIEREN: WORD-HTML IMPORTIEREN…

Word-Dokumente importieren:  umfangreiche Einstellungsmöglichkeiten

Text

95

 Kommentieren und auskommentieren Ein w enig beachtetes – w eil unsichtbares – Tag sind die Kom m entare. Sie erfüllen im HTML-Quellcode m ehrere Funktionen:  Sie m achen den „auskom m entierten“ Code für den Leser unsichtbar, w eil er vom Brow ser nicht dargestellt w ird.  Daher können Sie m it Kom m entaren versteckte Bem erkungen (z.B. Angaben über Design, Autor oder Copyright) in den Code setzen (kom m entieren).  Oder Sie schalten w ährend der Entw icklungsphase einer Site bestim m te Teile des Codes einer Seite „aus“ (auskom m entieren). Dream w eaver unterstützt aktiv nur die einfache Verw endung von Kom m entaren: unsichtbare Anm erkungen. Um dies zu verstehen, m uss m an sich anschauen, w ie das Kom m entar-Tag (com m ent ) aussieht: < !-- Kom m entar --> und w ie es im Program m eingesetzt w ird. Sie fügen einen Kom m entar ein, indem Sie im Menü EINFÜGEN: UNSICHTBARE TAGS: KOMMENTAR w ählen oder von der Objektepalette UNSICHTBARE ELEMENTE die kleine Sprechblase m it Ausrufezeichen in das Dokum entfenster ziehen. In dem Eingabefenster geben Sie Ihre Anm erkung ein und bestätigen m it OK. Wenn Sie unsichtbare Elem ente eingeschaltet haben, sehen Sie im Dokum entfenster ein kleines gelbes Schild m it Ausrufezeichen – das Icon für einen Kom m entar. Zum Bearbeiten des Kom m entars klicken Sie im Entw urfsm odus (Layout) auf das Icon und ändern den im Eigenschafteninspektor erscheinenden Text. Sie können den Code auch jederzeit in der Codeansicht ändern. Um jedoch einen Teil des Quellcodes auszukom m entieren (etw a beim Debuggen einer Seite), m üssen Sie das Anfangs-Tag (< !--) und das End-Tag (--> ) von Hand in den Quellcode (F10) setzen. Prinzipiell können Sie alle HTML-Elem ente – auch längere Passagen einer Seite – auskom m entieren. Sie w erden dann vom Brow ser einfach ignoriert. Kom m entare, die außerhalb des Body-Tags stehen, w erden im Dokum entfenster von Dream w eaver nicht angezeigt. Kom m entare w erden gerne von Program m ierern verw endet, um anderen, die an der Seite w eiter arbeiten, Design-, Funktionsund Arbeitsanw eisungen zu übergeben.

Wie schlecht jedoch – trotz der von Dreamweaver vorgenommen Säuberung – der von Word generierte HTM L-Code ist, können Sie in dem Interview mit Torsten Aue im Kapitel Office-Konvertierter auf Seite 331 lesen.

Weitere umfangreiche Funktionen für versteckte Kommentare im Workgroupmanagement finden Kapitel Design Notes auf Seite 63.

 Suchen und Ersetzen Die m ächtigsten Produktionsw erkzeuge für die Entw icklung und Pflege von Websites verstecken sich hinter den Funktionen SUCHEN UND ERSETZEN. Im Menü rufen Sie m it BEARBEITEN: SUCHEN UND ERSETZEN… (BEFEHLSTASTE + F) und NEU SUCHEN (BEFEHLSTASTE + G) die jew eiligen Dialogfenster auf.  Dream w eaver erlaubt Ihnen das Suchen im aktuellen Dokum ent, in der aktuellen Site oder in einem bestim m ten Ordner sow ie das Ersetzen im aktuellen Dokum ent, in der aktuellen Site, in einer Dokum entenausw ahl oder einem bestim m ten Ordner.

In Dreamweaver 4 ist die Suche jetzt noch leistungsfähiger geworden!

96

Dokum ent

Sie haben Filter für die Suche im Text, im Quellcode und in spezifischen Tags, in deren Attributen und Werten. Anhand einiger Beispiele w erden Sie sehen, w ie einfach oder auch kom plex eine Suchen-und-Ersetzen-Sitzung ablaufen kann. Ein w eiteres Plus ist, dass Sie jetzt auch die Suchm uster Ihrer Anfragen abspeichern und später w ieder aufrufen können. Je nachdem , w o Sie suchen w ollen, sollten Sie Ihre Suche beginnen. Die Suche  im aktuellen Dokum ent starten Sie vom Dokum entfenster aus,  auf der gesam ten Site beginnen Sie im Site- oder Dokum entfenster und die  in einem bestim m ten Ordner starten Sie im Site- oder Dokum entfenster. Beginnen Sie Ihre Suche im aktuellen Dokum ent m it SUCHEN UND ERSETZEN… . In der Beispieldatei search_replace1.htm l suchen Sie nach „Dream w eaver“. Das gesuchte Wort w ird gefunden und im Dokum entfenster m arkiert. Drücken Sie jetzt WEITERSUCHEN, springt die Markierung zum nächsten Vorkom m en des Wortes, w ährend ALLE SUCHEN das Fenster erw eitert und jedes Vorkom m en der Suchkette (searchstring ) auflistet. Doppelklicken Sie in eine Zeile der Liste, w ird das jew eilige Vorkom m en im Dokum entfenster m arkiert. Der Name des zu durchsuchenden  Dokuments wird angezeigt. Der Suchfilter ist auf „Text“ eingestellt. Das gefundene Wort „Dreamweaver“ wird im Dokumentfenster markiert.

Mit BEARBEITEN: NEU SUCHEN springen Sie im Dokum entfenster zum jew eils nächsten Vorkom m en von „Dream w eaver“. Als Nächstes ersetzen Sie im gleichen Dokum ent „Dream w eaver“ durch „m acrom edia Dream w eaver“. In das Eingabefenster ERSETZEN DURCH tragen Sie „m acrom edia Dream w eaver“ ein. Drücken Sie jetzt auf ERSETZEN, w ird das m arkierte Vorkom m en ersetzt. Drücken Sie auf ALLE ERSETZEN, w erden alle Vorkom m en im gesam ten Dokum ent ersetzt.

Text

97

 Alle Vorkommen von „Dreamweaver“ im aktuellen Dokument werden durch „macromedia Dreamweaver“ ersetzt.  Im erweiterten Fenster werden alle Vorkommen von „Dreamweaver“ angezeigt. Klicken in der Liste bringt Sie zur M arkierung im Dokumentfenster.

In der Abbildung oben sehen Sie, dass die Option UNTERSCHIEDE BEI LEERRAUM IGNORIEaktiviert ist. Dies bedeutet, dass jew eils nur ein Leerraum angenom m en w ird. Auch Zeilenum brüche und geschützte Leerzeichen gelten bei Text als Leerraum . Dies erm öglicht Ihnen, Sequenzen, die über m ehrere Zeilen laufen, zu suchen, unabhängig davon, w ie Sie um brochen w erden. Deaktivieren Sie diese Option, w ird Ihre Suche präziser – aber auch kom plizierter. Eine w eitere Präzisierung Ihrer Suche erreichen Sie m it der Option GROSS-/ KLEINSCHREIBUNG BEACHTEN. In diesem Fall w ird nur das Vorkom m en der Zeichenkette gefunden, die exakt übereinstim m t: „Dream w eaver“, jedoch nicht „dream w eaver“. Wenn Sie den zu suchenden Text bereits im Dokum entfenster m arkieren, erscheint er im Eingabefenster „Suchen nach:“ des Suchenfensters. Im erw eiterten Fenster w erden alle Vorkom m en von „Dream w eaver“ angezeigt. Klicken in der Liste bringt Sie zur Markierung im Dokum entfenster. Das w ar schon m al ganz nett für den Anfang! Im zw eiten Anlauf w erden w ir „Dream w eaver“ in der gesam ten Site suchen und durch „m acrom edia Dream w eaver“ ersetzen.  Öffnen Sie das SUCHEN UND ERSETZEN-Fenster. Die Einstellungen der letzten Aktion sind noch erhalten. Wählen Sie unter SUCHEN die Option GESAMTE LOKALE SITE aus. Drücken Sie ALLE SUCHEN. Dream w eaver zeigt im erw eiterten Fenster den Suchvorgang an und quittiert das Ende m it einem Meldungsfenster:  Klicken Sie OK.  Im erw eiterten Ersetzenfenster w erden in der Liste alle Vorkom m en von „Dream w eaver“ in der gesam ten Site angezeigt. Durch Doppelklicken in einen Listenpunkt können Sie das jew eilige Dokum entfenster aufrufen. Sie können eventuell stichprobenw eise die korrekte Ausführung der Suche in Augenschein nehm en.

search_replace1.html

REN

Beim Suchen und Ersetzen für eine ganze Site empfiehlt es sich, eine Sicherungskopie der Site anzufertigen. Denn diese Operation lässt sicht nicht rückgängig machen und oft sind die Prozesse irreversibel, dies gilt insbesondere für reguläre Ausdrücke.

98

Dokum ent

 Drücken Sie ERSETZEN. „Dream w eaver“ w ird in dem m arkierten Vorkom m en durch „m acrom edia Dream w eaver“ ersetzt. So können Sie jetzt m anuell alle Vorkom m en ändern. Solange Sie die Fenster geöffnet haben, sind die Vorgänge rückgängig zu m achen; w enden Sie jetzt jedoch ALLE ERSETZEN an, w ird die gesam te Site „durchkäm m t“ und alle Vorkom m en von „Dream w eaver“ in den jew eiligen Dokum enten ersetzt.  Zuvor w arnt Sie das Program m noch einm al.

Das Fenster "Suchen und Erstzen"  nach dem abgeschlossenen Prozess für die gesamte Site. Die erledigten Vorkommen des Suchbegriffs sind mit einem grünen Punkt versehen.

 Der Ersetzenprozess w ird im erw eiterten ERSETZEN-Fenster angezeigt. Alle abgearbeiteten Vorkom m en erhalten in der Liste einen grünen Punkt am Zeilenanfang. Am Ende w ird der Gesam tvorgang noch einm al quittiert.

Text

99

Das Suchen und Ersetzen in einem bestim m ten Ordner läuft nach dem gleichen Muster ab, w ährend Sie für das Suchen in ausgew ählten Dateien diese im Site-Fenster m arkieren m üssen. 

Für das Suchen in ausgewählten Dateien müssen diese im Site-Fenster markiert werden.

Das Suchen und Ersetzen im Quellcode funktioniert im Wesentlichen genauso w ie im Text, jedoch w erden die Suchm uster – durch die Schichtung der Filter – ungleich kom plexer. Ein einfaches Beispiel: Sie haben in Ihrem Dokum ent das Wort „Dream w eaver“ fett geschrieben und w ollen es durch eine kursive Schreibw eise ersetzen.

 Für das Suchen und Ersetzen im Quellcode müssen die Tags genau wie im Code-Inspektor dargestellt angegeben werden.

100

Dokum ent

search_replace3.html

Wenn Sie das SUCHEN-ERSETZEN-Fenster öffnen, steht der Filter im m er im Textm odus. Wählen Sie SUCHEN NACH QUELLCODE. Schreiben Sie die gew ünschte Suchen-Zeichenfolge in das Eingabefenster oder kopieren Sie sie aus dem Dokum entfenster (oder Code-Inspektor) über die Zw ischenablage dorthin. Drag & Drop funktioniert hier nicht. Die Ersetzen-Zeichenfolge können Sie direkt eingeben oder über die Zw ischenablage transportieren. Richtig interessant w ird das Suchen und Ersetzen m it dem Filter TEXT (ERWEITERT). Diese Funktion ist ähnlich w ie Suchen im Quellcode, jedoch w ird nicht nur eine Zeichenfolge angegeben, sondern auch eine beliebig erw eiterbare Kom bination und Staffelung von Suchfiltern. 

Suchen in Text (erweitert): M it den Plus- und M inus-Knöpfen können Sie die Anzahl der gestaffelten Filter einstellen. Wir suchen nach allen Vorkommen von „Tabelle“ in H1-Überschriften.

Besonders nützlich ist diese Funktion für so effektive Aktionen wie: „Alle Img-Tags suchen, in denen das Attribut ALT nicht vorkommt“, „Alle Bilder ohne Alternativtext suchen“.

Eine w eiter Steigerung der Kom plexität ist SUCHEN NACH: TEXT (ERWEITERT) und SUCHEN NACH: SPEZIFISCHES TAG. Es ist nur sehr schw er, auf w enigen Seiten die Kom plexität dieses Werkzeuges zu beschreiben. Das folgende Beispiel m acht dies deutlich: Die Kom bination der Suche innerhalb von Tags nach m ehreren – sich sogar gegenseitig ausschließenden – Attributen haben w ir uns schon lange gew ünscht. In gut strukturierten Dokum enten lassen sich hierm it w ahrhaft Zaubereien vollbringen. Bei m einen Vergleichen m it anderen Program m en m usste ich feststellen, dass Dream w eaver zw ar langsam in der Ausführung der Suche ist, jedoch w as Kom plexität und Kom fort angeht, Editoren w ie BBEdit und Hom esite w eit hinter sich lässt. Wenn m an viel in großen Entw icklungsum gebungen arbeitet und viel Volum en durchsetzen m uss, w erden solche Tools w ahre Lebensretter. Mit folgenden Optionen schränken Sie den Suchvorgang bei SUCHE NACH: SPEZIFISCHES TAG ein:  M IT ATTRIBUT w ählt das Attribut aus, das im Tag enthalten ist, OHNE ATTRIBUT das Attribut, das im Text nicht enthalten sein darf.  M IT w ählen Sie, w enn Sie nach einem bestim m ten Elem ent innerhalb eines Tags suchen. OHNE, w enn das Elem ent nicht im Tag vorkom m en darf.  Wählen Sie INNERHALB DES TAGS, um anzugeben, dass sich das Tag in einem anderen Tag befinden m uss, AUSSERHALB DES TAGS bedeutet das Gegenteil. Wenn Sie eine kom plexe oder oft w iederholte Suchen-Ersetzen-Aktion nicht verlieren m öchten, speichern Sie diese als Anfragedatei (query) ab: Klicken Sie auf das Diskettensym bol im Suchen-oder Ersetzen-Fenster. Sie w erden aufgefordert, Ihrer Anfrage einen Nam en zu geben. Diese Anfragedateien w erden im Verzeichnis Con-

Text

101



Suchen in Tags: Hier suchen Sie nach allen Vorkommen von „Dreamweaver“ außerhalb von P-Tags, die innerhalb von anderen Tags (z.B. < TD> ) stehen und die Attribute „ALIGN = left“ und „ALIGN = right“ haben.

figuration/ Queries abgelegt. Um Ihre Anfrage zu einem späteren Zeitpunkt w ieder aufzurufen, klicken Sie auf das Ordnersym bol und w ählen Sie die Anfrage aus. Die Anfragen sind also nicht an bestim m te Dateien oder Sites gebunden! 

Die für spezifische Tags anzuwendenden Aktionen in einer Übersicht

M it Dreamweaver 4 sind weitere Neuerungen beim Suchen und Ersetzen hinzugekommen. So können an spezifischen Tags komplexe Aktionen ausgeführt werden (siehe Online-Hilfe).

102

Dokum ent

 Reguläre Ausdrücke

Das Konzept der regulären Ausdrücke in Dreamweaver ist ähnlich dem grepBefehl, welchen die UNIX-User unter Ihnen bereits kennen, nämlich „get regular expressions and print“. Auch BBEdit und Homesite setzen ähnliche Wildcard-Befehle ein.

Reguläre Ausdrücke und Wildcards sind Kom binationsm uster, die bestim m te Zeichenfolgen im Text beschreiben. Sie können dam it Suchkonzepte definieren, beispielsw eise Sätze, die m it einem bestim m ten Wort beginnen, oder Werte, die eine Ziffer enthalten. Grundsätzlich: Wenn Sie in Ihrem Text ein Muster (eine nach einer Regel definierbare Zeichenfolge) ausm achen können, lässt sich dieser Text m it regulären Ausdrücken m anipulieren. Durch die Kom bination und Gruppierung verschiedener Suchm uster lassen sich kom plexe Operationen am Text durchführen. Wenn Sie eine Textzeichenfolge suchen, die eines der aufgelisteten Sonderzeichen enthält, stellen Sie dem Sonderzeichen eine Escape-Sequenz (Backslash ) voran. Angenom m en, Sie m öchten das Fragezeichen in folgendem Satz suchen: „Schon m eine neue Hom epage gesehen?“, dann w enden Sie folgendes Suchm uster an: „gesehen\ ?“. Durch den vorangestellten Schrägstrich verm eiden Sie, dass auch Vorkom m en von „gesehen“ ohne Fragezeichen gefunden w erden sow ie „gesehe“ und auch „ gesehenn“. Die Option UNTERSCHIEDE BEI LEERRAUM IGNORIEREN w ird autom atisch deaktiviert, w enn Sie reguläre Ausdrücke verw enden, da sich diese beiden Optionen gegenseitig ausschließen.

 Beispiel 1 – Wildcard-Zeichen: Sie w ollen eine Kom m entarzeile in allen Dokum enten eines Ordners abgleichen. Bisher stehen in den verschiedenen Dokum enten unterschiedliche Versionsnum m ern, Datum s- und Uhrzeitangaben < !-- Version 2.1 | 23-12-2000 14:01 | jk --> < !-- Version 3.0 | 30-12-2000 19:07 | en --> < !-- Version 4.4 | 17-01-2001 23:11 | os -->

Beispiel 1:  Suche nach einer Kombination regulärer Ausdrücke, um einen String, zusammengesetzt aus Versionsnummer, Datum, Uhrzeit und Autorenkürzel, abzugleichen. Sie müssen die Zeichen Punkt (.), Backslash (|) durch eine Escape-Sequenz (Backslash) maskieren, damit die regulären Ausdrücke funktionieren.

Text

103

und vielleicht noch w eitere, die Sie nicht genau kennen. Das Einzige, w as Sie zuverlässig w issen, ist: Diese Zeile ist im m er im gleichen Form at geschrieben: Version\ s\ d\ .\ d\ s\ |\ s\ d\ d-\ d\ d-\ d\ d\ d\ d\ s\ d\ d:\ d\ d\ s\ |\ s\ w \ w

Es kann passieren, dass Sie beim ersten Mal etw as herum probieren m üssen, ehe es klappt – aber es lohnt sich! Wenn Sie dieses Suchm uster dann noch abspeichern, können Sie es jederzeit w iederverw enden.

reg_ex_example1.html

Reguläre Ausdrücke: Wildcard-Zeichen Zeichen

.

Suchmuster

Beispiel

sucht ein einzelnes Zeichen (außer dem Zeilenvorschub) „.ei“ findet das zweite „ei“ in „Einerlei“ und das in „Hühnerei“.

\w

sucht ein alphanumerisches Zeichen: A–Z, a–z, 0–9, einschließlich Bodenstrich (_).

„l\ w*“ findet „locker“ und „lassen“ sowie „locker lassen“ und „lockerlassen“.

\W

sucht ein nicht-alphanumerisches Zeichen.

„\ W“ findet sowohl „(„ als auch „£“ und „)“ in „British Pound Sterling (£)“.

\d

sucht eine Ziffer.

„\ d“ findet „G4“ und „B2B“ sowie „2001“.

\D

sucht ein Zeichen, jedoch keine Ziffer.

„\ D“ findet „G4“ und „B2B“, jedoch nicht „2001“, dafür aber „Millennium“.

\s

sucht ein nicht druckbares Zeichen (Leerzeichen, Tabulator etc.).

„\ sputzen“ findet „Nase putzen“, jedoch nicht „verputzen“.

\S

sucht ein druckbares Zeichen.

„\ Sputzen“ findet „verputzen“, jedoch nicht „Nase putzen“.

\t

sucht das Zeichen für Tabulator (tab).

„\ t“ findet das Zeichen für Tabulator im HTML-Quellcode.

\f

sucht das Zeichen für Formularvorschub (form -feed ).

„\ f“ findet das Zeichen für Formularvorschub im HTML-Quellcode.

\n

sucht das Zeichen für Zeilenvorschub (line-feed )

„\ n“ findet das Zeichen für Zeilenvorschub im HTML-Quellcode.

\r

sucht das Zeichen für Zeilenumbruch (carriage-return )

„\ r“ findet das Zeichen für Zeilenumbruch im HTML-Quellcode.



Beispiel 2: Bei der Verwendung des regulären Ausdrucks „x|y“ können Sie das Suchen nach Varianten beliebig erweitern „x|y|z|… “. Sie müssen jedoch die Punkte im Kürzel „T.M .“ durch eine EscapeSequenz (Backslash) maskieren.

104

Dokum ent

reg_ex_example2.html

 Beispiel 2 „Zeichenfolgen“: Sie haben in Ihrem Dokum ent insgesam t drei unterschiedliche Schreibw eisen für den Nam en des Geschäftsführers eingesetzt und w ollen diese jetzt vereinheitlichen: „T.Mueller“, „Th. Müller“ und das Kürzel „T.M.“. Alle sollen in einem Arbeitsgang in die korrekte Schreibw eise „Thom as Müller“ gebracht w erden. Sie benutzen den regulären Ausdruck „x|y|z“, w as bedeutet, dass sow ohl x sow ie y als auch z gefunden w erden sollen.

Reguläre Ausdrücke: Zeichenfolgen Zeichen

Suchmuster

Beispiel

x|y|z

sucht entweder „x“, „y“ oder „z“ (sowohl als auch).

„CCFFCC|CCFF00|CCFFFF“ findet sowohl die Farbe „CCFFCC“, als auch alle Vorkommen von „CCFF00“ und „CCFFFF“.

[abc]

sucht beliebige der Zeichen innerhalb der Klammer. Ein Binde- [x-z] findet „x“ in „xenophob“, „y“ in „symbolisch“ und strich zeigt einen Zeichenbereich an; [a-g] entspricht [abcdefg]. „zylindrisch“ sowie das „z“ in „zylindrisch“.

[^ abc]

sucht beliebige der Zeichen außerhalb der Klammer; ein Bindestrich zeigt einen Zeichenbereich an, [^ a-g] entspricht [^ abcdefg].

[^ x-z] findet „a“ in „alt“, „l“ in „alt“ und „t“ in „alt“, jedoch nicht „y“ in „young“.

Reguläre Ausdrücke: Zeichenpositionen und -wiederholungen Zeichen

Suchmuster

Beispiel

^

sucht Zeichen am Zeilenanfang oder am Anfang der Eingabe.

„^ B“ findet ein „B“ wie das in „Bitte hier aufschlagen“, jedoch nicht wie in „Ich konnte ihm keine Bitte abschlagen“.

$

sucht Zeichen am Zeilenende oder am Ende der Eingabe.

„$a“ findet ein „a“ wie in „Anna“, nicht jedoch wie in „Anne“.

\b

sucht eine Wortbegrenzung vor dem Zeichen (ein Leerzeichen, Zeilenumbruch etc.).

„\ bu“ findet „umsteigen“, jedoch nicht „Baum“ oder „Gnu“.

\B

sucht eine Abgrenzung innerhalb des Wortes, jedoch keine Wortbegrenzung.

„\ BD“ findet „MacDonald“ jedoch nicht „Macindosh“.

*

sucht das voran stehende Zeichen keinmal oder mehrmals.

„im*“ findet „im“ in „Jim“, „imm“ in „Zimmer“, aber auch „i“ in „Kinder“.

+

sucht das voran stehende Zeichen einmal oder mehrmals.

„im+“ findet „im“ in „Jim“, „imm“ in „Zimmer“, jedoch nicht „i“ in „Kinder“.

?

sucht das voran stehende Zeichen höchstens einmal (also auch keinmal).

„med?ia“ findet „media“ in „macromedia“, aber auch „meia“ in „mensch, meia“, jedoch nicht „Farbdia“.

{n}

sucht genau „n“ mal das nebeneinander stehende Vorkommen des voran stehenden Zeichens.

„e{2}“ findet „ee“ in „Tee“ und die ersten beiden „ee“ in „Kaffeeernte“, jedoch keines der beiden „e“ in „Teatime“.

sucht mindestens „n“, jedoch höchstens „m“ Vorkommen des voran stehenden Zeichens.

„CC{3,6}“ findet „CCC“ in „#CCCC00“ und alle „C“ in „#CCCCCC“.

{n,m}

 Beispiel 3 „Kom binierte Zeichengruppen“: Sie können die regulären Ausdrücke auch durch Rundklam m ern gruppieren. Wenn Sie auf der gesam ten Site beispielsw eise das am erikanische Datum sform at (MM/ DD/ YYYY) in ein europäisches Form at (DD-MM-YYYY) ändern m öchten, m achen Sie dies am einfachsten m it folgender Gruppenform el für das Suchen des am erikanischen Form ats:

Text

105

(\ d+ )\ / (\ d+ )\ / (\ d+ )

Beim Ersetzen verw eisen Sie jetzt m it „$1“, „$2“, „$3“ usw . auf die einzelnen Gruppen (\ d+), vertauschen Tag und Monat und ersetzen die Schrägstriche durch Bindestriche:

reg_ex_example3.html

$2-$1-$3



Beispiel 3: M it kombinierten Zeichengruppen regulärer Ausdrücke können Sie in einem Durchgang auf der ganzen Site das amerikanische Datumsformat in das europäische umschreiben lassen.

 Rechtschreibprüfung Bevor Sie eine Seite Ihrem Kunden zeigen oder online stellen, sollten Sie eine Rechtschreibprüfung vornehm en, denn nichts ist peinlicher als ein Schreibfehler. Mit der Rechtschreibprüfung haben Sie dafür ein kom fortables Hilfsm ittel: (TEXT: RECHTSCHREIBUNG PRÜFEN oder SHIFT + F7 ). Die Rechtschreibprüfung durchsucht nur den Text des Dokum entfensters – der Quellcode bleibt von der Suche unberührt. Beginnen Sie die Prüfung des Dokum ents im m er am Anfang einer Seite. Sie können auch eine Ausw ahl m arkieren, die

106

Dokum ent

durchsucht w erden soll. Wenn ein Wort gefunden w ird, das in seiner Schreibw eise nicht m it dem ausgew ählten Wörterbuch übereinstim m t, haben Sie folgende Möglichkeiten: Das gefundene Wort  durch das Wort im blau um randeten Vorschlagsfenster zu ersetzen,  durch ein Wort aus der Vorschlagsliste, unterhalb des Vorschlagsfensters, zu ersetzen,  im blau um randeten Vorschlagsfenster zu korrigieren und zu ersetzen  und dem persönlichen Wörterbuch hinzuzufügen und zu ersetzen. Dann w ird das Wort bei der nächsten Prüfung gleich akzeptiert. Ersetzen ist hier gleichbedeutend m it Ändern. Falls Sie das Wort, so w ie es geschrieben ist, akzeptieren, drücken Sie IGNORIEREN. ALLE ÄNDERN und ALLE IGNORIEREN bezieht sich auf alle Vorkom m en des Wortes auf der durchsuchten Seite. Das zu verw endende Wörterbuch w ählen Sie in den VOREINSTELLUNGEN: ALLGEMEIN: RECHTSCHREIBWÖRTERBUCH aus. Für Deutsch w ählen Sie alte oder neue Rechtschreibung aus. Sie können jew eils nur ein Wörterbuch einer Sprache benutzen – also nicht gleichzeitig Englisch und Deutsch. Häufig w iederkehrende Worte, Nam en oder Begriffe (auch einer anderen Sprache) fügen Sie dem persönlichen Wörterbuch hinzu. Die Rechtschreibprüfung reagiert auf Groß- und Kleinschreibung. Wollen Sie alternativ zur Großschreibung eines Wortes auch die kleingeschriebene Variante akzeptieren, m uss das Wort ins persönliche Wörterbuch übernom m en w erden. Haben Sie einm al versehentlich ein falsches Wort oder ein Wort in falscher Schreibw eise hinzugefügt, öffnen Sie die Datei: Configuration/ Dictionaries/ Personal.dat m it einem Text-Editor (BBEdit, Hom esite oder Word) und entfernen oder korrigieren es.

 Hinweis M ehr zum Thema Schreiben und Rechtschreiben im Internet in dem Buch „Writing for the Web“ von Crawford Kilian.

Eine autom atische Rechtschreibprüfung verhindert keine Fehler! Viele Fehler w erden nicht gefunden, w eil die Rechtschreibprüfung diese Worte nicht kennt (z.B. Internet-Jargon oder Fachausdrücke), oder w eil Tippfehler und Verw echslungen nicht geprüft w erden – die zw ar orthografisch richtig – aber inhaltlich falsch sind (z.B. Ihre/ Ehre, Vase/ Base). Eine bessere Textqualität erhalten Sie, w enn Sie die Texte ausdrucken und nach dem bew ährten Verfahren des Korrekturlesens und Gegenlesens überprüfen.

Text

107

 Code optimieren Geben Sie jetzt dem Dokum ent m it Dream w eaver noch den letzten Schliff. Sie w ählen im Menü BEFEHLE: HTML OPTIMIEREN… Der Sinn dieses Werkzeuges ist es, den Code schlank und übersichtlich zu halten. Ein Blick auf die Einstellungen im Einzelnen:  ENTFERNEN VON LEEREN TAGS ist klar. Tags ohne Inhalte m achen den Code unnötig lang.  ENTFERNEN VON ÜBERFLÜSSIGEN VERSCHACHTELTEN TAGS, also redundante Tags die innerhalb anderer Tags stehen  HTML-KOMMENTARE, NICHT DREAMWEAVER benutzen Sie für das Löschen von Kom m entaren „frem der“, also Nicht-HTML-Sprachen.  HTML-KOMMENTARE, DREAMWEAVER benutzen Sie für das Löschen von Dream w eaver-Kom m entaren.  Im Eingabefeld in der Mitte können Sie auch SPEZIFISCHE(S) TAG(S) angeben, die aufgehoben w erden sollen (< STRONG> , < BIG> etc.). In den Optionen können Sie:  beim Optim ierungsprozess VERSCHACHTELTE FONT-TAGS KOMBINIEREN, WENN MÖGLICH w ählen (bedeutet, dass die Attribute der verstreuten Font-Tags in einem Tag zusam m engefasst w erden, w as sehr viel Code spart) 

Die Font-Tags werden mit der nächsten Version von HTM L möglicherweise „aussterben“, da Cascading Stylesheets mit ihren typografischen Feinheiten den Defacto-Standard darstellen.

Im Einstellungsfenster können Sie jetzt Ihre eigenen Einstellungen machen oder mit den Standardwerten arbeiten – die schon recht vernünftige Ergebnisse liefern.

 das standardm äßig am Ende eines Prozesses angezeigte Protokoll deaktivieren.

108

Code

CODE Looking behind the curtains

Nachdem M acromedia die Firma Allaire – Entwickler des meistverwendeten HTM L-Editors Homesite – übernommen hat, ist zu erwarten, dass Dreamweavers Code-Werkzeuge in Zukunft weiter verfeinert werden.

Dream w eaver ist nicht nur ein hervorragender WYSIWYG-Editor, sondern hat auch hinter der grafischen Oberfläche einiges zu bieten. In der CODEANSICHT kann der Quellcode, synchron zur ENTWURFSANSICHT in einem HTML-Editor bearbeitet w erden. Von dort gibt es auch jederzeit die Möglichkeit, zu einem externen Editor w ie BBEdit oder Hom esite zu springen. Im Dokum entfenster kann der Tag-Selektor unten links in der Statusleiste dazu benutzt w erden, einzelne Elem ente auszuw ählen. Der sehr beliebte Quick-Tag Editor kann vielseitig eingesetzt w erden, um „schnell m al w as im Code zu m achen“. Der Code kann auf jeder Seite durch HTML OPTIMIEREN sauber gehalten w erden. Weitere Features sind die Möglichkeiten von ROUNDTRIP HTML und M ICROSOFT WORDHTML IMPORTIEREN/ OPTIMIEREN.

Source Seit Dream w eaver 4 lässt sich das Dokum ent im Dokum entfenster in der Entw urfsund Codeansicht darstellen. Darüber hinaus lässt sich das Dokum entfenster horizontal teilen, um gleichzeitig Entw urfs- und Codeansicht im selben Fenster darzustellen.



Gleichzeitige Darstellung von Entwurfs- und Codeansicht im Dokumentfenster. Alle Ansichtsoptionen stehen zur Verfügung. Sie können auch die Entwurfsansicht in den oberen Teil des Fensters stellen (unterster M enüpunkt).

Source

 Mehrere Ansichten verwenden Über die drei Schaltflächen auf der linken Seite der Sym bolleiste können Sie die Ansichten des Dokum entfensters steuern: CODEANSICHT, GETEILTE ANSICHT (split view ) und ENTWURFSANSICHT. Klicken Sie einfach auf eine der Schaltflächen, um zur entsprechenden Ansicht zu w echseln. Zw ischen den beiden Fenstern der geteilten Ansicht können Sie den Trennbalken (Fensterteiler) beliebig vertikal verschieben und so die Größe der Fenster nach Ihren Wünschen einstellen.

 Synchronisieren der Ansichten Um die Codeansicht m it der Entw urfsansicht zu synchronisieren, klicken Sie auf die Entw urfsansicht, w enn Sie m it ihrer Arbeit in einer der Codeeditoren fertig sind. Wahlw eise klicken Sie auf die Schaltfläche ENTWURFSANSICHT AKTUALISIEREN in der Sym bolleiste oder drücken (F5). Zum Anzeigen der Sym bolleiste w ählen Sie ANSICHT: SYMBOLLEISTE. Wenn Sie in der Entw urfsansicht arbeiten, w ird die Codeansicht synchron aktualisiert.

 Code-Inspektor Mit (F10) oder einen Klick auf die beiden spitzen Klam m ern rechts der Sym bolleiste im Dokum entfenster w ird der Code-Inspektor aufgerufen. Die Funktionen des Code-Inspektors sind identisch m it denen der Codeansicht des Dokum entfensters.



Das Optionsmenü des Code-Inspektors

109

110

Code

Der einzige Unterschied ist, dass der Code-Inspektor in einem separaten Fenster eingeblendet w ird. Das Optionsm enü des Code-Inspektors (auch Codeansicht) lässt Sie folgende Einstellungen w ählen:  UMBRUCH lässt die Zeilen innerhalb des Fensters w eich um brechen (soft w rap ). Vorteil ist, dass Sie den horizontalen Bildlauf (scrollbar) nicht betätigen brauchen, um das Ende einer Zeile zu sehen. Nachteil ist, dass ein strukturierter Code dadurch w esentlich unübersichtlicher w ird, w eil Sie rein optisch zw ischen harten und w eichen Um brüchen nicht m ehr unterscheiden können.  ZEILENNUMMERN lässt die einzelnen Zeilen durchnum m erieren, w as vorteilhaft ist, w enn Sie Code debuggen, besonders w enn Sie gleichzeitig m it eingeschaltetem Um bruch arbeiten.  UNGÜLTIGEN HTML-CODE HERVORHEBEN ist defaultm äßig eingeschaltet und m arkiert ungültigen Code leuchtend gelb. Bei der Ausw ahl ungültiger Tags gibt Dream w eaver im Eigenschafteninspektor entsprechende Korrekturvorschläge.  SYNTAXFARBCODIERUNG ist defaultm äßig eingeschaltet und hebt Codebereiche und Tags m it unterschiedlichen Farben hervor. Die Farben können Sie auf Ihre individuellen Bedürfnisse einstellen (BEARBEITEN: VOREINSTELLUNGEN: CODIERUNGSFARBEN). Das hat den Vorteil, dass Sie ihn an das von Ihnen gew ohnte Farbschem a Ihres HTMLEditors (z.B. BBEdit) anpassen können. Das Fenster  „Voreinstellungen… : Codierungsfarben“

Wenn Sie die Syntaxfarbcodierung ausschalten,  kann die aktuelle Auswahl nicht mehr für die HTM L-Referenz (Shift + F1) übertragen werden.

 AUTOMATISCHER EINZUG ist defaultm äßig gesetzt und sorgt durch das Setzen von Tabulatoren (Tab) – die in HTML funktionslos sind –, dafür, dass der Code optisch

Skripte

111

strukturiert w ird, w as die Übersichtlichkeit enorm fördert. Sie steuern die Art, w ie der Code strukturiert w ird, über die Einstellungen in BEARBEITEN: VOREINSTELLUNGEN… : CODEFORMAT. Sie können u.a. die Optionen für Einzüge und Tabulatoren, Um brüche, Groß- und Kleinschreibung von Tags und Attributen setzen oder einfach m it den eingestellten Default-Werten arbeiten. 

Das Fenster „Voreinstellungen… : Codeformat“

 Im Code arbeiten Zusätzlich zu der Möglichkeit, paarw eise Tags im Code zu überprüfen, hat Dream w eaver 4 jetzt auch das zeilenw eise Ein- und Ausrücken im plem entiert:  EINRÜCKEN: Markieren Sie die Zeile(n) und w ählen Sie BEARBEITEN: CODE EINRÜCKEN. Die Zeile(n) w erden um einen Tab eingerückt.  AUSRÜCKEN: Markieren Sie die Zeile(n) und w ählen Sie BEARBEITEN: CODE AUSRÜCKEN. Die Zeile(n) w erden um einen Tab ausgerückt.  TAGS PAARWEISE PRÜFEN: Setzen Sie die Einfügem arke an die zu überprüfende Stelle im Code und w ählen Sie BEARBEITEN: ÜBERGEORDNETES TAG AUSWÄHLEN. Im Code w ird der Code zw ischen Anfang und Ende des Tag-Paars m arkiert. Beim Wiederholen der Funktion w ird das jew eils höhere Paar ausgew ählt. Wenn ein Tag-Paar unvollständig ist, funktioniert ÜBERGEORDNETES TAG AUSWÄHLEN nicht m ehr. Stattdessen zeigt Dream w eaver das verbleibende Rest-Tag als ungültigen Code an.

Skripte In Dream w eaver können Sie in beiden Ansichten Skripte in die Seite einfügen und bearbeiten. In der Regel handelt es sich dabei um JavaScript oder VBScript. Zum Anzeigen der Skriptm arkierungen in der Entw urfsansicht sorgen Sie zuerst dafür, dass die unsichtbaren Elem ente angeschaltet sind (ANSICHT: VISUELLE HILFSMITTEL: UNSICHTBARE ELEMENTE).

Weitere Informationen zu Codierungsfarben und Codeformat finden Sie in der Online-Hilfe.

112

Code

 Skript einfügen

Fügen Sie JavaScript ein, wissen jedoch nicht genau die Version, wählen Sie einfach JavaScript.

Sie fügen ein Skript in der Entw urfsansicht ein, indem Sie nacheinander:  die Einfügem arke an die gew ünschte Stelle des Dokum entes setzen,  auf die Schaltfläche UNSICHTBARE ELEMENTE: SKRIPT der Palette OBJEKTE klicken oder EINFÜGEN: UNSICHTBARE TAGS: SKRIPT w ählen,  im angezeigten Dialogfeld die gew ünschte Skriptsprache im Popup-Menü SPRACHE ausw ählen.  Dann können Sie den Skriptcode im Textfeld INHALT eingeben.

Ein Skript  über das Dialogfenster einfügen

Dream w eaver ergänzt bei dem im Dialogfenster eingegebenen Skript autom atisch die Anfangs- und Endtags < script> im Code. Sie können das Skript auch im Code-Inspektor (Codeansicht) eingeben. Dabei m üssen Sie dann selbst an die Anfangs- und End-Tags < script> < / script> denken! Vergessen Sie dies, w ird das Skript im Code nicht als ungültiges Tag angezeigt. Spätestens in der Entw urfsansicht dürften Sie allerdings den Fehler bem erken.

 Externes Skript einbinden Sie stellen eine Verbindung zu einem externen Skript her, indem Sie  w ie oben für Skript einfügen verfahren (1–3).  statt jedoch einen Skriptcode in das Textfeld einzugeben, klicken Sie nur auf OK.  Dann klicken Sie in der Entw urfsansicht auf die Skriptm arkierung.  Im Eigenschafteninspektor klicken Sie auf den Ordner rechts neben dem Fenster QUELLE und w eisen Sie die externe Skriptdatei zu.

Skripte

113

 Skripte bearbeiten Sie können entw eder den internen Skriptcode direkt im Code-Inspektor (Codeansicht) bearbeiten, oder das Fenster SKRIPTEIGENSCHAFTEN hierfür benutzen. Sie öffnen das Dialogfenster, indem Sie die Skriptm arkierung in der Entw urfsansicht ausw ählen und im Eigenschafteninspektor auf BEARBEITEN klicken. Externe Skripte rufen Sie auf, indem Sie im Eigenschafteninspektor auf BEARBEITEN klicken. Diese Skripte w erden jedoch in einem neuen Dokum entfenster geöffnet.

 Skripte debuggen Sie haben seit Dream w eaver 4 auch ein einfaches Werkzeug, um Skripte – insbesondere JavaScript – zu debuggen. Hierfür m üssen Sie im Code-Inspektor (Codeansicht) arbeiten. Im Fenster SKRIPTEIGENSCHAFTEN funktionieren diese Tools nicht. Ob Klam m ern im Code paarw eise angeordnet sind, prüfen Sie, indem Sie die Einfügem arke in den zu prüfenden Abschnitt setzen und BEARBEITEN: FEHLENDE KLAMMERN EINFÜGEN w ählen. Es w erden nicht etw a fehlende Klam m ern eingefügt, sondern der Code w ird innerhalb des nächstliegenden Klam m erpaares m arkiert. Beim Wiederholen der Funktion w ird das jew eils höhere Paar ausgew ählt. Wenn ein Tag-Paar unvollständig ist, funktioniert BEARBEITEN: FEHLENDE KLAMMERN EINFÜGEN nicht m ehr.

 Skriptfunktionen anzeigen Lassen Sie sich über das Popup-Menü LISTE ALLER FUNKTIONEN in der Sym bolleiste alle im Skript verw endeten JavaScript- und VBScript-Funktionen anzeigen. Durch gleichzeitiges Drücken der BEFEHLSTASTE (Window s) oder OPTIONSTASTE (Mac) w erden die Funktionen im Popup-Menü in alphabetischer Reihenfolge angezeigt.



Die Online-Hilfe bezieht sich auf geschweifte Klammern. In Wirklichkeit kann Dreamweaver jedoch alle Arten von Klammerpaaren (geschweifte, eckige und runde) prüfen.

Eine im Popup-M enü „Liste aller Funktionen“ ausgewählte Funktion wird im Code-Inspektor (Codeansicht) markiert.

114

Code

 JavaScript-Debugger Mit diesem neuen zeitsparenden Dream w eaver-Tool können Sie eventuelle Fehler in clientseitigem JavaScript-Code finden, isolieren und korrigieren. Zuerst prüft der Debugger die korrekte Syntax. Fehlerhafte Syntax führt im Brow ser zu Fehlerm eldungen. Ein logischer Fehler hingegen w ird nicht im Brow ser gem eldet, sondern verursacht Funktionsstörungen der Seite. Logische Fehler w erden m it Brow ser-Unterstützung im Fenster des JavaScript-Debuggers angezeigt. So können Sie w ährend der Ausführung alle Variablen und Dokum enteigenschaften untersuchen und eventuelle Fehler isolieren. Durch das Setzen von Haltepunkten können Sie bestim m te Abschnitte des Skripts ablaufen lassen und sich in einer Variablenliste die Werte von JavaScriptObjekten und JavaScript-Eigenschaften anzeigen lassen, oder Befehle und Funktionen in einzelnen Schritten ausführen und geänderte Variablenw erte m itverfolgen. Den JavaScript-Debugger  vom Fenster „Codeansicht“ starten

 Debuggen Sie starten das Debuggen eines Dokum ents über die Schaltfläche VORSCHAU/ DEBUG IN BROWSER in der Sym bolleiste. Wählen Sie D EBUG IN BROWSER. Bei Window s w ird der aktuelle Internet Explorer zum Debuggen genutzt, beim Mac hingegen ein Netscape 4.x Brow ser. Während der Brow ser hochfährt, w ird ein Applet – der eigentliche Debugger – gestartet. Wenn Sie kein Sicherheitszertifikat für Macrom edia akzeptiert haben, w ird ein Java Security Request durchgeführt, den Sie positiv bestätigen m üssen, dam it das Applet korrekt funktioniert. Es w ird zw ar eine Verbindung zw ischen Applet und Brow ser hergestellt, nicht jedoch eine Netzw erk- oder Internet-Verbindung.

Skripte

115

Bis der JavaScript-Debugger vollständig geladen ist, w ird in der Titelleiste der Status WARTEN eingeblendet. Der Debugger kann gestartet w erden, w enn der Status LÖSEN erscheint. Über die Schaltfläche AUSFÜHREN in der Sym bolleiste oder (F8) w ird das Debugging ausgeführt. Während der Ausführung des Debuggings w ird das Brow ser-Fenster eingeblendet. Wenn im Skript keine Fehler gefunden w erden, erscheint in der Titelleiste des Debuggers der Status AUSFÜHREN. Mit einem Klick auf die Schaltfläche DEBUG-VORGANG BEENDEN schließen Sie das Fenster des Debuggers. 

Der JavaScript-Debugger in den Zuständen „Warten“ und „Lösen“

 Syntaxfehler Findet der Debugger Syntaxfehler, hält er an und listet die Fehler in einem eigenen Fenster auf. Wählen Sie einen der Fehler aus, w ird eine detaillierte Beschreibung angezeigt. Durch DOPPELKLICKEN w ird die entsprechende Zeile im Code-Inspektor (Codeansicht) fokussiert.

 Logische Fehler Bei logischen Fehlern setzt der Debugger in der ersten Zeile einen Haltepunkt (eine Warnm arke), an dem die Ausführung unterbrochen w ird, so dass Sie die Variablenliste verfolgen können. Bei jedem Haltepunkt können Sie jetzt den Code schrittw eise ausführen und checken, ob das Skript korrekt läuft. Selbst verknüpfte Quelldateien w erden in den Debugging-Prozess eingebunden und im gleichen Fenster geöffnet. Schrittw eise verfolgen Sie die sich ändernden Werte der Variablen.

116

Code

 Haltepunkte Haltepunkte können nur in Zeilen m it JavaScript gesetzt w erden und w erden durch einen roten Punkt am linken Rand des Fensters m arkiert. Die an einem Haltepunkt angehaltene Program m ausführung w ird durch einen kleinen gelben Pfeil angezeigt. Sie können selbst Haltepunkte setzen oder löschen: Setzen Sie die Einfügem arke an die gew ünschte Stelle und klicken Sie oben in der Sym bolleiste auf die Schaltfläche HALTEPUNKT SETZEN/ ENTFERNEN (ALLE HALTEPUNKTE ENTFERNEN). Im CodeInspektor (Codeansicht) setzen Sie die Einfügem arke an die gew ünschte Stelle und w ählen BEARBEITEN: HALTEPUNKT SETZEN. Oder verw enden Sie das Kontextm enü (Window s: RECHTE M AUSTASTE, Mac: CTRL + M AUSKLICK).

 Arbeiten mit dem Debugger Sie können im Debugger Code schrittw eise ausführen, Anw eisungen überspringen, Funktionen in Einzelschritten ausführen, Funktionen abschließen und Variablenw erte anzeigen und bearbeiten. Eine detaillierte Beschreibung der Arbeit m it dem Debugger finden Sie in der Online-Hilfe.

 Andere Dateien bearbeiten Weitere Informationen zum Arbeiten mit anderen als HTM L-Dateien finden Sie in der Online-Hilfe.

In Dream w eaver können Sie auch andere als HTML-Dateien bearbeiten, ohne dass Dream w eaver den Code dieser Datei selbstständig verändert. Alle diese Dateien w erden im Code-Inspektor (Codeansicht) geöffnet. Nach dem Bearbeiten der Datei können Sie diese im Ursprungsform at oder einem anderen Form at speichern. In BEARBEITEN: VOREINSTELLUNGEN… : DATEITYPEN / EDITOREN können Sie festlegen, w ie die unterschiedlichen Form ate – Dateien m it einer bestim m ten Endung (suffix) – geöffnet w erden sollen: im Code-Inspektor, in der Codeansicht oder m it einem externen Editor w ie Hom esite oder BBEdit. Defaultm äßig aufgelistete Form ate für das Öffnen in der Codeansicht sind .js, .txt und .asa. Sie können nach dem gleichen Muster beliebig viele neue Dateiendungen hinzufügen.

Externe Editoren Über BEFEHLSTASTE + E gelangen Sie direkt zum ausgew ählten externen Editor BBEdit (Mac), Hom esite (Window s) oder einen Editor Ihrer Wahl. Die beiden genannten Editoren w erden kom plett durch Dream w eaver unterstützt, bzw . ergänzt. In BEARBEITEN: VOREINSTELLUNGEN… : DATEITYPEN / EDITOREN können Sie die Zusam m enarbeit externer Editoren m it Dream w eaver konfigurieren.

Referenzpalette

117



Das Fenster „Voreinstellungen: Dateitypen / Editoren“

Referenzpalette Mit diesem in Dream w eaver 4 neuen Feature steht Ihnen eine sehr um fangreiche und vor allem außerordentlich praktische Referenz für HTML, CSS (stylesheets) und JavaScript zur Verfügung. Sie rufen die Referenzpalette auf über M ENÜ: HILFE: REFERENZ oder SHIFT + F1. Sie können zum Aufrufen auch die Schaltfläche REFERENZ des Dokum entfensters benutzen oder die Palette über M ENÜ: FENSTER: REFERENZ (SHIFT + BEFEHLSTASTE + F1) öffnen. Wenn Sie vor dem Aufrufen ein Tag in der Code- oder Entw urfsansicht (oder im Code-Inspektor) m arkieren, w ird autom atisch die entsprechende Seite der Referenz aufgerufen. Dabei spielt es keine Rolle, ob es sich um ein HTML-Tag, einen CSS-Stil oder ein JavaScript-Objekt handelt.

Warum M acromedia ein und dasselbe Fenster über so viele verschiedene M enübefehle, Tastaturkürzel und Schaltflächen aufrufen lässt, ist mir ein Rätsel geblieben. Zumindestens die Tastaturkürzel wirken sehr redundant.

 Tag (Stil/ Objekt) im Dokument markieren, die Referenzpalette aufrufen; die entsprechende Seite zum ausgewählten Tag wird automatisch aufgerufen.

118

Code

Die zum ausgew ählten Tag (Stil/ Objekt) angezeigten Inform ationen w erden in dem Fenster der Palette in einer einheitlichen Struktur dargestellt. Im Kopf stehen neben dem Nam en Hinw eise auf unterstützende Brow ser, und ob z.B. ein Tag nur m it Schluss-Tag gültig ist. Danach folgt eine Beschreibung der Funktion, Beispiele für den Einsatz und kurze Listings des verw endeten Codes. M it dem kleinen schwarzen  Dreieck oben rechts wählen Sie die Schriftgröße der Textdarstellung in der Referenzpalette aus.

Schade nur, dass die verwendeten Beispiele weder interaktiv verwendet, noch in die Zwischenablage kopiert werden können.

Die Referenzbücher wurden von O'Reilly & Associates erarbeitet. Auf der Website http:/ / safari.oreilly.com/ finden Sie weitere Informationen, Bibliotheken und Referenzen, die Sie online einsehen können.



Sie können in der Referenz auch m anuell blättern. Im obersten Popup-Menü w ählen Sie das entsprechende Buch aus (HTML, CSS oder JavaScript). In dem PopupMenü TAG (OBJEKT) finden Sie eine Liste aller in der Referenz beschriebenen Tags (Objekte), in dem Popup-Menü rechts daneben die Beschreibung der Attribute, die für das ausgew ählte Objekt zur Verfügung stehen.

Ein Referenz-Tag (Stil/ Objekt) auswählen



Die Attribute des Referenz-Tags (Stil/ Objekt) auswählen

Roundtrip

119

Roundtrip





PHP-Code in der Entwurfsansicht

PHP-Code in der Codeansicht (Code-Inspektor)

Diese besondere Dream w eaver-Funktion erlaubt es, HTML-Seiten zu öffnen, die Code aus frem den Editoren, Codeerw eiterungen w ie JavaScript, XML, PHP, CFML oder ASP sow ie ungültigen Code enthalten, ohne dass dieser durch Dream w eaver w esentlich um strukturiert w ird. Ungültiger Code, der nicht von Dream w eaver repariert oder von anderen Brow sern angezeigt w erden kann, w ird in der Entw urfs- und Codeansicht gelb m arkiert. Wenn Sie ein ungültig m arkiertes Tag ausw ählen, gibt Dream w eaver entsprechende Korrekturvorschläge im Eigenschafteninspektor. Ungültige HTML hervorzuheben ist in der Codeansicht (Code-Inspektor) defaultm äßig aktiviert. Zum Deaktivieren dieser Funktion klicken Sie in den Ansichtsoptionen der Codeansicht auf UNGÜLTIGEN HTML-CODE HERVORHEBEN. Das fehlende Häkchen neben dem Eintrag zeigt Ihnen den deaktivierten Status an.

Dreamweaver erkennt nicht jeden fehlerhaften Code. Zum Beispiel wird ein nicht geschlossenes P-Schluss-Tag nicht erkannt und auch nicht mit dem Befehl „HTM L optimieren“ repariert.

 Ungültiger Code wird gelb markiert. Sie können diese Funktion in den Ansichtsoptionen der Codeansicht (Code-Inspektor) ausschalten.

Die Datei w ird nach dem Öffnen nicht als geändert m arkiert! (Meta-Tags Um laute, obw ohl Sonderzeichen in Voreinstellungen deaktiviert) Die Einstellungen BEARBEITEN: VOREINSTELLUNGEN… : CODEUMSCHREIBUNG für Roundtrip erlauben eine sehr feine Abstim m ung der Filter für den Im port frem der HTMLDokum ente, die ungültigen Code enthalten können. Wenn Sie verhindern m öchten, dass der Code einer frem den Datei um geschrieben w ird, schalten Sie alle Optionen aus.

Dummerweise ändert Dreamweaver Sonderzeichen im Quelltext(!) einer Datei beim Öffnen. Zum Beispiel werden die Umlaute in den Schlüsselbegriffen von M eta-Tags in „Hieroglyphen“ gewandelt, die Datei aber als nicht geändert markiert (kein Sternchen). Dies kann man auch über die entsprechenden Voreinstellungen nicht verhindert werden.

120

Code

Das Fenster  „Voreinstellungen: Codeumschreibung“

Optimieren In diesem Kapitel sind nur die Grundlagen des Arbeitens mit Code dargestellt. Weitere wichtige Hinweise und Tipps finden Sie in der Online-Hilfe.

Innerhalb der aktuellen Seite optim ieren Sie den Code m it BEFEHLE: HTML OPTIMIEREN… Sie können falschen Code, Kom m entare, leere, verschachtelte, redundante und spezifische Tags reparieren und aus Ihrer Seite entfernen. Am Ende des Prozesses gibt Ihnen Dream w eaver einen Bericht. Sie können den Prozess m it BEFEHLSTASTE + Z w ieder rückgängig m achen. Vorsicht: Wenn Sie die Option KOMMENTARE, DREAMWEAVER ausgew ählt haben, w erden alle Tags für z.B. Vorlagen und Bibliothekselem ente entfernt!

Elem entepalette

121

ELEMENTE UND VORLAGEN Dream w eaver bringt eine Reihe von Funktionen m it, die Ihnen – vorausgesetzt Sie gehen planvoll dam it um – die Arbeit entscheidend erleichtern können. Die Rede ist von Vorlagen (tem plates) und Bibliothekselem enten (library elem ents). Beiden gem einsam ist, dass Sie als Dream w eaver-XML (extensible m arkup language) ihre Funktionalität nur bei der Verw endung m it Dream w eaver entfalten. Vorlagen sind sinnvoll, w enn Sie viele Elem ente und Strukturen einer Musterseite einheitlich auf viele Seiten der Site anw enden w ollen. Bibliothekselem ente sind eher dann von Vorteil, w enn es sich um w enige Elem ente einer Seite handelt, oder ein Elem ent auf verschiedenen Seiten, die von unterschiedlichen Vorlagen abhängen, eingesetzt w erden soll. Auch w enn Sie sich nicht sicher sind, ob Sie nicht doch zu einem späteren Zeitpunkt größere Änderungen am Seitenlayout vornehm en w ollen, sollten Sie Bibliothekselem ente anstelle von Vorlagen verw enden. In Dream w eaver 4 w urden die Funktionen für Vorlagen optim iert und vereinfacht. Zusätzlich m it der Palette ELEMENTE ist ein starkes Adm inistrationstool zur Verw altung von Vorlagen, Bibliothekselem enten und anderen Ressourcen der Site hinzugekom m en. Deshalb w enden w ir uns zuerst dieser zentralen Funktion zu.

A good template is half the job done.

Elementepalette Die Organisation von Site-Ressourcen ist m it Dream w eaver 4 um die sehr nützliche Elem entepalette (Assets Manager) erw eitert w orden. Bisher w aren Vorlagen und Bibliothek eigenständige Paletten. Jetzt verw alten Sie in der Elem entepalette (F11) neben Vorlagen und Bibliothekselem enten auch w eitere Objekte und Dokum ente w ie Bilder, Farben, Links (URLs), Flash, Shockw ave, Film e und Skripte. Mit den Schaltflächen der Sym bolleiste links im Fenster w ählen Sie die verschiedenen Kategorien. Im oberen Teil des Fensters ist eine Vorschau (preview ) des jew eils im unteren Fenster (Siteliste) ausgew ählten Elem entes. In der Elem entepalette gibt es folgende Kategorien:  BILDER: für das Web form atierte Bilder (GIF, JPEG oder PNG)  FARBEN: Die in Dokum enten Ihrer Site verw endeten Farben für Text, Hintergrund und Links w erden angezeigt und als Hex- und RGB-Wert beschrieben.  URLS: Externe Links –die außerhalb der definierten Site befindlichen Links – w erden hier gelistet: FTP, gopher, HTTP, HTTPS, JavaScript, E-Mail und lokale Dateien (file:/ / ).  FLASH: m it einer beliebigen Version des Flash-Form ats von Macrom edia erstellte Dateien m it der Endung .sw f  SHOCKWAVE: m it einer beliebigen Version des Shockw ave-Form ats von Macrom edia erstellte Dateien  FILME: im QuickTim e- oder MPEG-Form at erstellte Film dateien

Voraussetzung für das Funktionieren der Elementepalette ist eine definierte Site. Siehe Kapitel Site auf Seite 49.

122

Elem ente und Vorlagen

 SKRIPTE: externe Skriptdateien (JavaScript- oder VBScript). Interne Skripte in HTML-Dateien w erden hier nicht angezeigt.  VORLAGEN: Seiten m it Tem plate-Funktion (siehe unten)  BIBLIOTHEKSELEMENTE: Objekte m it Instanzen-Funktion (siehe unten) Wenn Sie z.B. auf die Schaltfläche BILDER klicken, sehen Sie im unteren Fenster eine Liste aller in Ihrer Site verw endeten Bilder. Sie w erden nach Nam e, Größe und vollständigem Pfad angezeigt. Mit einem Klick auf den Spaltenkopf ändern Sie die Sortierkriterien. Am unteren rechten Rand des Fensters finden Sie folgende Schaltflächen:

Von der Elementepalette haben Sie Zugriff  auf alle wichtigen Ressourcen der Site: oben die Vorschau, unten die Siteliste. Hier sind an den Schaltflächen der Symbolleiste die entsprechenden Infos eingeblendet.

Rechts unten: In der Kategorie „Vorlagen“ entfällt die M öglichkeit, Site oder Favoriten auszuwählen. Dafür können Sie eine neue Vorlage anlegen. Das Gleiche gilt für die Kategorie Bibliothekselemente.  In der Kategorie „Flash“ erscheint im Vorschaufenster der Flash-Film in Originalgröße mit Flash-Icon. M it einem Klick auf das grüne Startdreieck können Sie den  Film in der Preview abspielen.

Elem entepalette

 SITELISTE AKTUALISIEREN aktualisiert die Liste im unteren Fenster.  BEARBEITEN öffnet das ausgew ählte Objekt in einem zugew iesenen Editor.  NEUE VORLAGE oder NEUES BIBLIOTHEKSELEMENT: Bei Vorlagen und Bibliothekselem enten kom m t ein w eiteres Icon m it einem kleinen Pluszeichen hinzu.  ZU FAVORITEN HINZUFÜGEN fügt das ausgew ählte Objekt den Favoriten hinzu. Diese Möglichkeit fehlt bei Vorlagen und Bibliothekselem enten.

 Favoriten

 Wenn Sie ein Objekt in der Siteliste ausgewählt haben, können Sie es über das Fenstermenü den Favoriten hinzufügen.

Die Elemente in der Ansicht „Favoriten“ können Sie in der Siteliste in die Favoritenordner legen oder zwischen diesen verschieben. Jede Elementekategorie hat ihren eigenen Favoritenordner. Sie können die Objekte unterschiedlicher  Kategorien nicht im gleichen Ordner verwalten.

 In der Ansicht „Favoriten“ können Sie einen neuen Favoritenordner anlegen, den Sie beliebig benennen.

Die Favoritenelemente können einen  eigenständigen Kurznamen in Klartext erhalten. Doppelklicken Sie hierzu auf den Namen.

123

124

Elem ente und Vorlagen

Das Entfernen von Elementen oder Ordnern aus Favoriten lässt sich nicht mehr rückgängig machen.

In diesem Modus der Elem entepalette können Sie Ihre m eistverw endeten Objekte der einzelnen Kategorien verw alten. Markieren Sie ein oder m ehrere Objekte in der Siteliste und w ählen Sie im Fenster- oder Kontextm enü: ZU FAVORITEN HINZUFÜGEN. Wenn Sie dann – innerhalb der gleichen Kategorie – in den FAVORITENMODUS schalten (Ausw ahlknopf) finden Sie dort das Objekt. Es w ird nicht dorthin verschoben, sondern synchron verw altet. In FAVORITEN w erden die Elem ente m it Kurznam en verw altet. Defaultm äßig ist es der Dateinam e ohne die Endung (suffix). Diesen Nam en können Sie beliebig in einen Klartextnam en ändern. Doppelklicken Sie hierzu auf den Nam en, oder w ählen Sie im Fenster- oder Kontextm enü KURZNAME ÄNDERN. Sie haben in FAVORITEN w eiter die Möglichkeit, Ordner anzulegen, um Ihre Elem ente noch effektiver zu sortieren. Um einen neuen Favoritenordner anzulegen, w ählen Sie entw eder im Fenster- oder Kontextm enü ORDNER NEUE FAVORITEN oder klicken Sie unten rechts im Fenster auf die Schaltfläche NEUER FAVORITENORDNER. Wenn der Ordner in der Siteliste erscheint, können Sie ihn beliebig benennen und Ihre Elem ente per Drag & Drop hineinziehen und herausnehm en. Sie können die Ordner auch beliebig tief verschachteln, also neue Ordner in bereits existierenden Ordnern anlegen oder hineinziehen. Wenn Sie einen Ordner entfernen w ollen, w ählen Sie im Fenster- oder Kontextm enü AUS FAVORITEN ENTFERNEN oder klicken Sie auf die entsprechende Schaltfläche unten rechts im Fenster. Am einfachsten m arkieren Sie ein oder m ehrere Elem ente und drücken die BACKSPACE-Taste.

Mit Elementen arbeiten

Werden Objekte aus der Site – ohne die Hilfe von Dreamweaver – hinzugefügt oder entfernt, müssen Sie den SiteCache neu erstellen: Klicken Sie hierzu mit gedrückter Befehlstaste unten rechts im Fenster auf die Schaltfläche „Aktualisieren“.

Wenn Sie Elem ente (Objekte) aus Ihrer Site entfernen oder neu hinzufügen, können die Änderungen in der Elem entepalette erst angezeigt w erden, w enn Sie die Siteliste aktualisieren. Wählen Sie hierzu im Fenster- oder Kontextm enü SITELISTE AKTUALISIEREN, oder klicken Sie unten rechts im Fenster auf die Schaltfläche A KTUALISIEREN. Sie können innerhalb der Elem entepalette auch die Elem ente der einen Site in eine andere Dream w eaver-Site kopieren. Wählen Sie hierzu im Fenster- oder Kontextm enü ZUR SITE KOPIEREN. Um den Ort (location ) eines Elem ents innerhalb des SiteFensters anzuzeigen, w ählen Sie IN DER SITE SUCHEN. Das m arkierte Elem ent w ird im Site-Fenster angezeigt. Wenn Sie ein Elem ent bearbeiten w ollen, öffnet der Befehl BEARBEITEN den eingestellten Editor.

 Elemente einfügen Je nach Kategorie gibt es unterschiedliche Techniken, um ein Elem ent in eine Seite einzufügen. Grundsätzlich gibt es drei Arten, die sich jedoch je nach Objekttyp in den Details unterscheiden:

Vorlagen

 Drag and drop: Ziehen Sie einfach das Bild aus der Elem entepalette per Drag & Drop in die Entw urfsansicht.  Menü: Markieren Sie ein Elem ent und w ählen Sie im Fenster- oder Kontextm enü: EINFÜGEN. Dabei ist es unerheblich, ob Sie im Code- oder Entw urfsm odus arbeiten. Entscheidend ist die Stelle, an der sich Ihre Einfügem arke (Cursor) befindet. Dort w ird das Objekt eingesetzt.  Schaltfläche: Unten links am Fensterrand befindet sich die Schaltfläche EINFÜGEN. Markieren Sie ein Elem ent und klicken Sie auf EINFÜGEN. Diese Technik ist ansonsten w ie die Menütechnik. Hier die Details, die Sie bei den unterschiedlichen Kategorien beachten sollten:  Bilder w erden entw eder per Drag & Drop oder über Einfügen platziert.  Farben können per Drag & Drop eingefügt w erden. Sinnvoll ist es jedoch, w enn Textbereiche bearbeitet w erden, den entscheidenden Abschnitt des Textes zu m arkieren und dann Anw enden zu klicken. Soll eine neue Farbe vorgegeben w erden, so w ird die Farbe hinter der Cursor-Position als Font-Tag eingesetzt.  URLs können sow ohl eingefügt als auch auf m arkierte Objekte angew endet w erden.  Flash, Shockw ave und Film e können nur eingefügt w erden.  Skripte ziehen Sie am besten in der Entw urfsansicht direkt in den Head-Inhaltsbereich des Dokum ents.  Vorlagen ziehen Sie entw eder aus der Elem entepalette in die Entw urfsansicht, oder m arkieren Sie die Vorlage und w ählen ANWENDEN.  Bibliothekselem ente w erden ähnlich w ie z.B. Bilder eingefügt.

Vorlagen Nicht nur im Webpublishing gibt es Vorlagen (tem plates). Ihr Ursprung liegt in der Textverarbeitung und im Desktop Publishing. Das Prinzip von Vorlagen ist, auf der Basis einer Vorlage, m ehrere ähnlich aussehende, aber inhaltlich voneinander abw eichende Dokum ente zu erstellen. Meist w erden in einer Vorlage das generelle Layout und Elem ente w ie Firm enlogo, Slogan, Copyright und andere auf allen Seiten w iederkehrende Elem ente verankert. Der Begriff Tem plate w ird im Webpublishing für sehr unterschiedliche Dokum ente benutzt: Design-Tem plates sind Vorlagen, die den Aufriss einer Seite m it allen fest verankerten Elem enten definieren. Sie dienen als Designm aster für die Erstellung der einzelnen Dokum ente. Dynam ische Tem plates w iederum sind Seiten, die dynam isch erzeugte Inhalte z.B. SSI (server side includes) enthalten. SSI sind im HTML-Dokum ent verankerte Anw eisungen an den Webserver, eine bestim m te Datei an der entsprechende Stelle in das HTML-Dokum ent einzuschließen, bevor es an den Brow ser w eitergegeben w ird.

125

Am besten lernen Sie die Unterschiede der Techniken, wenn Sie in der geteilten Ansicht (split view) arbeiten und den Code im Auge behalten. Achten Sie vor allem darauf, dass sich der Befehl „Einfügen“ je nach Objekttyp in den Befehl „Anwenden“ wandelt.

126

Elem ente und Vorlagen

 Dream Templates In Seiten, die mit Vorlagen erstellt wurden, können die Funktionen „Tabellen in Ebenen“ und „Ebenen in Tabellen konvertiert“ nicht angewendet werden.

Dream w eaver Vorlagen (dream tem plates) haben in gew isser Hinsicht sow ohl die Eigenschaften von Design-Tem plates als auch dynam ischer Tem plates: Alle Dokum ente einer Site, die auf einer Dream w eaver-Vorlage basieren, können jederzeit – nur durch das Modifizieren der Vorlage – geändert w erden. In der Vorlage stellen Sie bearbeitbare Bereiche ein, die später in dem auf der Vorlage basierenden Dokum ent m it variierenden Inhalten gefüllt w erden. Alle nicht editierbaren Bereiche sind autom atisch gesperrte Bereiche, d.h. sie können im Dokum ent nicht geändert w erden.

Für Vorlagen spricht:

Gegen Vorlagen spricht:

Das Layout ist relativ einfach. Mehrere Elemente werden auf vielen Seiten an immer der gleichen Position eingesetzt (z.B. das Firmenlogo, eine Copyright-Zeile).

Der komplexe Einsatz von Verhaltensweisen und Ebenen (z.B. Rollovers variieren von Seite zu Seite). Der Funktionsumfang ist später nur bedingt erweiterbar.

Die Struktur der Site ist sehr klar. Art und Umfang der Inhalte sind detailliert beschrieben.

Das kreative Arbeiten mit dem Layout wird durch die starren Vorgaben der Vorlage behindert.

Die Site ist sehr umfangreich, contentlastig und homogen in der Struktur. Modifikationen müssen schnell durchführbar sein.

Die Site hat nicht so viele, aber sehr verschiedenartige Seiten. Modifikationen lassen sich auch mittels anderer Techniken (z.B. Suchen-Ersetzen) durchführen.

Mehrere Personen arbeiten – mit einem hohen Grad an Arbeitsteilung – an der Site. Die Verantwortlichkeiten sind klar definiert.

Die Site wird von einer Person – oder einem kleinen Team – betreut, die alle Seiten bis ins Detail kennen.

Die Inhalte werden häufig aktualisiert und sollen leicht – z.B. durch den Auftraggeber oder eine Redaktionsassistenz – gepflegt werden.

Inhalte werden nur bei Bedarf von der gleichen Person – oder dem gleichen Team – gepflegt, die die Seiten auch erstellt hat.

Bestimmte Bereiche der Seiten sollen vor dem Zugriff nicht befugter Personen geschützt werden.

Alle Bereiche der Seiten sind durch jeden pflegbar.

Die Pflege der Seiten ist am einfachsten, wenn nur Dreamweaver dafür eingesetzt wird.

Die Seiten werden mit anderen Editoren als Dreamweaver gepflegt.

Nachträgliche Änderungswünsche des Auftraggebers sind in einem gewissen Rahmen schnell realisierbar.

Nachträgliche Änderungswünsche des Auftraggebers sind – soweit das Budget reicht – realisierbar.

Zeit ist Geld – schnelles und schmerzloses Aktualisieren und Modi- Zeit für Qualität – die Gestaltung der einzelnen Seite hat Vorrang fizieren der Inhalte. vor dem Kostendruck.

 Einstellungen Editierbare und gesperrte Bereiche, sow ie Bibliothekselem ente und DrittanbieterTags sind nur im Dokum entfenster sichtbar, w enn Sie unsichtbare Elem ente angeschaltet haben (ANSICHT: UNSICHTBARE ELEMENTE). Unter BEARBEITEN: VOREINSTELLUNGEN… können Sie in der Kategorie M ARKIERUNG die Farben der entsprechenden Bereiche einstellen.

Vorlagen

127



Sie können in den Einstellungen für die M arkierung eigene Farben wählen. Sie werden nur angezeigt, wenn „Unsichtbare Elemente“ angeschaltet ist.

 Vorlagen erstellen Sie können auf zw ei Arten Vorlagen erstellen: auf der Basis eines bereits existierenden Dokum ents oder durch das Erstellen einer neuen Vorlage. In den m eisten Fällen haben Sie bereits ein Dokum ent erarbeitet, das Sie als Vorlage nutzen können:  Öffnen Sie das Dokum ent.  Wählen Sie DATEI: ALS VORLAGE SPEICHERN…  Wählen Sie die Site aus, für die die Vorlage erstellt w erden soll. Bereits bestehende Vorlagen w erden angezeigt. Im Eingabefeld geben Sie den Nam en Ihrer Vorlage ein.  Dream w eaver speichert die Datei in das Verzeichnis „Tem plates“, das auf oberster Ebene im Siteordner angelegt w ird. Das Dokum ent erhält die Endung (suffix) .dw t (Dream w eaver Tem plate). Speichern Sie Ihre Vorlagen an keinem anderen Ort ab und verw enden Sie das Verzeichnis „Tem plates“ nicht für andere Dateiarten.



Vorlagen werden in einen eigenen Ordner „Templates“ gespeichert. Im Fenster „Vorlage speichern“ werden Ihnen bereits vorhandene Vorlagen Ihrer Site angezeigt. Sie können Ihr Dokument als Vorlage der aktuellen Site oder einer anderen Site speichern.

 Die Vorlage ist in ihrem Grundzustand gesperrt, d.h. Sie m üssen jetzt die bearbeitbaren (editierbaren ) Bereiche der Vorlage definieren.

Bearbeitbare Bereiche im Dokument werden nur angezeigt, wenn „Unsichtbare Elemente“ angeschaltet ist.

128

Elem ente und Vorlagen

 Markieren Sie im Dokum entfenster einen Bereich, der später bearbeitbar sein soll. Bei Tabellen können Sie nur kom plette Tabellen oder einzelne Tabellenzellen, bei CSS-Layers nur Ebenen (Position, Sichtbarkeit etc.) oder Ebeneninhalte m arkieren.  Wählen Sie aus dem M ODIFIZIEREN: VORLAGEN: NEUER BEARBEITBARER BEREICH (BEFEHLSTASTE + OPTIONSTASTE + V)  Geben Sie einen Nam en (nur alphabetische Zeichen, Binde- oder Bodenstriche) für den Bereich ein.  Der Bereich w ird im Dokum entfenster m it einer farbigen Um randung und einem kleinen Reiter m it dem Nam en des Bereichs m arkiert.  Für das Markieren w eiterer Bereiche verfahren Sie w ie oben beschrieben.  Speichern Sie die Vorlage. Vor dem Speichern w erden Sie gefragt, ob Sie die von dieser Vorlage abhängigen Dokum ente der Site aktualisieren w ollen. Dies können Sie m it NEIN beantw orten, w enn Sie noch keine abhängigen Seiten erstellt haben oder die Seiten später aktualisieren w ollen. Drücken Sie JA w enn Sie die Seiten sofort aktualisieren m öchten. Ein neuer bearbeitbarer Bereich wird über das Kontextmenü  angelegt. In der geteilten Ansicht (split view) können Sie beim Anlegen der bearbeitbaren Bereiche im Code mitverfolgen, wie für die – in diesem Fall hellblau markierten – Bereiche proprietäre Dreamweaver Tags angelegt werden. Im Tag-Selektor wird der Bereich als „mm: editable“-Tag identifiziert. In der Titelleiste sind Vorlagen deutlich gekennzeichnet mit < < Vorlage> > .

Die meisten Vorlagen-Funktionen sind nur in der aktivierten Entwurfsansicht verfügbar.

Wenn Sie eine neue Vorlage erstellen, gehen Sie folgenderm aßen vor:  Wählen Sie DATEI: NEU.  Speichern Sie das neue Dokum ent – w ie oben beschrieben – als Vorlage.  Als Nächstes richten Sie bearbeitbare Bereiche im Dokum entfenster ein. Wenn Sie eine Vorlage aus einem neuen Dokum ent erstellen, ist es sinnvoll, Platzhalter zu verw enden, die an Stelle der später einzufügenden Inhalte stehen und das Layout definieren. Achten Sie darauf, dass Sie m öglichst eine finale Version der Vorlage verw enden, da spätere Änderungen in der Struktur m öglicherw eise nicht m ehr auf die abhängigen Dokum ente übertragbar sind. Dies gilt insbesondere für Elem ente des Head-Bereichs w ie Meta-Tags, CSS und Verhaltensw eisen.

Vorlagen

129

 Kontextmenü Befehle die sich auf die Bearbeitung von Vorlagen – und von Vorlagen abhängigen Dokum enten – beziehen, finden Sie auch im Kontextm enü: CTRL + M AUSTASTE (Mac) oder RECHTE M AUSTASTE (Window s). Je nachdem , ob Sie eine Vorlage bearbeiten oder ein von einer Vorlage abhängiges Dokum ent, w ird das Menü m odifiziert. Unter M ODIFIZIEREN: VORLAGEN und im Kontextm enü können Sie auch direkt die editierbaren Bereiche unten im Menü anw ählen.



Wenn Sie ein neues Dokument von einer Vorlage anlegen, sehen Sie oben in der Titelleiste des neuen Dokuments „UntitledX* “. Das Sternchen zeigt den ungespeicherten Status an.



M ehr zu Gestaltungstechniken mit Platzhaltern finden Sie im Kapitel Verschachtelte Tabellen auf Seite 155 und Kapitel Layouttabellen auf Seite 163.

In den bearbeitbaren Bereichen können Sie jetzt einfach die Dummy-Texte durch Ihre eigenen ersetzen.

 Abhängige Dokumente Wenn Sie aus einer Vorlage ein abhängiges Dokum ent erstellen,  w ählen Sie DATEI: NEU VON VORLAGE.  klicken Sie im Dialogfenster auf eine Vorlage.  w erden im Dokum entfenster die bearbeitbaren Bereiche farbig m arkiert angezeigt. Das neue Dokum ent übernim m t die Seiteneigenschaften der Vorlage m it Ausnahm e des Title-Tags, den Sie editieren können. Wenn Sie die Seiteneigenschaften ändern m öchten,  gehen Sie entw eder zurück zur Vorlage (M ODIFIZIEREN: VORLAGEN: ANGEFÜGTE VORLAGE ÖFFNEN) und ändern diese (M ODIFIZIEREN: SEITENEIGENSCHAFTEN),  oder lösen Sie das Dokum ent von der Vorlage (M ODIFIZIEREN: VORLAGEN: VON VORLAGE LÖSEN) und ändern die Seiteneigenschaften für das Dokum ent. Bedenken Sie hierbei, dass ein Dokum ent, w elches von einer Vorlage gelöst w urde, nicht länger abhängig ist: Änderungen, die Sie in der Vorlage vornehm en,

130

Elem ente und Vorlagen

w erden nicht übernom m en. Andererseits können Sie das Dokum ent jederzeit w ieder an die Vorlage koppeln (M ODIFIZIEREN: VORLAGEN: VORLAGE AUF SEITE ANWENDEN… ). Hierbei ist entscheidend, dass die benannten Bereiche der Vorlage m it der Struktur des abgelösten Dokum ents harm onieren.

 Sie können Ihr von einer Vorlage abhängiges Dokument wieder von der Vorlage lösen. Oben rechts im Dokument wird der Name der Vorlage angezeigt.



Ein einmal von einer Vorlage gelöstes Dokument können Sie später erneut der Vorlage zuweisen.

Beim erneuten Zuweisen einer Vorlage werden die in Frage  kommenden bearbeitbaren Bereiche als verwaiste Bereiche des Dokuments identifiziert. Wählen Sie die Option < keine> , wenn Sie die Struktur des Dokumentes nicht verändert haben.

 Weitere bearbeitbare Bereiche zuweisen Wenn Ihr Dokument von einer Vorlage abhängt, müssen Sie es zuerst von dieser Vorlage lösen, um es als eigene Vorlage abzuspeichern.

Wenn Sie bei Ihrer Arbeit m it abhängigen Dokum enten m erken, dass Sie bestim m te gesperrte Bereiche in bearbeitbare Bereiche um w andeln w ollen, gehen Sie einfach zur Vorlage zurück (M ODIFIZIEREN: VORLAGEN: ANGEFÜGTE VORLAGE ÖFFNEN) und m arkieren den Bereich, den Sie editierbar m achen w ollen. Wählen Sie M ODIFIZIEREN: VORLAGEN: NEUER BEARBEITBARER BEREICH… Wenn Sie einen bearbeitbaren Bereich sperren w ollen, m arkieren Sie den Bereich und w ählen Sie M ENÜ: M ODIFIZIEREN: VORLAGEN: BEARBEITBAREN BEREICH ENTFERNEN…

Bibliothek

131

 HTML-Code Wie bereits erw ähnt, können Sie abhängige Dokum ente auch im Code-Inspektor (Codeansicht) bearbeiten. Die gesperrten Bereiche w erden farbig hinterlegt. Sie können diese Bereiche m it dem Cursor m arkieren und überschreiben. Ihre Änderungen w erden jedoch nicht ausgeführt. Spätestens beim Speichern des Dokum ents sind sie w ieder verschw unden. Dies gilt nur für Dream w eaver als HTML-Editor. Änderungen m it externen Editoren (BBEdit oder Hom esite) w erden gespeichert. Bei der nächsten Aktualisierung des Dokum entes w erden jedoch die Vorgaben der Vorlage w ieder auf das Dokum ent angew endet.

 Aktualisieren Spätestens, w enn Sie eine Vorlage geändert haben, sollten Sie die abhängigen Dokum ente aktualisieren, da Sie bei Ihrer w eiteren Arbeit – ohne eine Aktualisierung – die Änderungen an diesen Dokum enten nicht zu sehen bekom m en. Aktualisieren Sie, w enn Sie  eine Vorlage geändert haben und bereits abhängige Dokum ente erstellt haben, beim Speichern der Vorlage.  m it einem abhängigen Dokum ent arbeiten (M ODIFIZIEREN: VORLAGEN: AKTUELLE SEITE AKTUALISIEREN) und sicher sein w ollen, m it einer aktuellen Version zu arbeiten.  alle abhängigen Dokum ente einer Seite aktualisieren m öchten (M ODIFIZIEREN: VORLAGEN: SEITEN AKTUALISIEREN… ). Im Dialogfenster haben Sie die Wahl, eine bestim m te Site oder abhängige Dokum ente bestim m ter Vorlagen zu aktualisieren. Weiter können Sie die Aktualisierung auf Bibliothekselem ente ausw eiten. Optional können Sie sich am Ende der Aktualisierung ein Protokoll anzeigen lassen.

Bibliothek Die Bibliothek (library) HTML-Code ist eine Funktion, die ähnlich w ie Vorlagen (tem plates) funktioniert. Im Gegensatz zu Vorlagen sind Bibliothekselem ente jedoch nur Teile einer Seite – Elem ente m it Verw eisfunktion (instances). Bibliothekselem ente können Bilder, Texte, Javascripte, andere Webobjekte oder kom plexe Strukturen (w ie z.B. Tabellen oder Ebenen) sein. Bibliothekselem ente können Sie auch in Vorlagen verw enden. Der Einsatz dieser Elem ente ist jedoch abhängig von Ihrer Arbeitsw eise. Wenn Sie ein Bibliothekselem ent editieren, w erden die vorgenom m enen Veränderungen auf alle Vorkom m en (instances) dieses Elem ents angew endet. Sie können  häufig verw endete Objekte (Bilder, Grafik, Webobjekte, Links etc.) w ie in einer Clipart-Sam m lung griffbereit haben, ohne in den Verzeichnissen suchen zu m üssen.

Wie auch bei von Vorlagen abhängigen Dokumenten, ist es wichtig, die Site regelmäßig zu aktualisieren, damit die Vorkommen von Bibliothekselementen in den einzelnen Seiten aktuell bleiben.

132

Elem ente und Vorlagen

 Satzbausteine und Textfragm ente, Slogans und bestim m te w iederkehrende w erbliche Form ulierungen verw alten und aktuell halten. Beachten Sie allerdings, dass alle Form atierungen der Texte im m er gleich sind (Schriftart, -größe und -farbe). Falls dies nicht der Fall ist, benutzen Sie für Textaktualisierungen lieber Suchen-Ersetzen im Textm odus. Wenn Sie CSS-Stile verw enden, m üssen Sie außerdem sicherstel-

Dreamweaver warnt Sie,  wenn Sie ein neues Bibliothekselement erstellen wollen, in dem CCSCode vorkommt. Stellen Sie sicher, dass in den Dokumenten, in dem Sie das Bibliothekselement einsetzen wollen, externe Stylesheets richtig verknüpft sind.

len, dass der Verw eis auf das externe Stylesheet im Head-Bereich des Dokum ents vorhanden ist.  auf bestim m te Layoutstrukturen w ie Tabellenform atierungen, Navigationsleisten und Ähnliches sofort zugreifen. Ich habe in der Vergangenheit auch ohne Bibliothekselem ente leben können. Wenn der Aufbau der Seiten hom ogen und konsistent ist, können Sie m it SuchenErsetzen bereits sehr effektiv arbeiten. Unverzichtbar ist der Einsatz von Bibliothekselem enten jedoch, w enn m ehrere Personen m it Dream w eaver an einer Website arbeiten.

 Bibliothekselemente Vergleichen Sie auch mit der Checkliste für Templates auf Seite 126

Sie erstellen Bibliothekselem ente, indem Sie ein Objekt im Dokum entfenster m arkieren und M ODIFIZIEREN: BIBLIOTHEK: OBJEKT IN BIBLIOTHEK EINFÜGEN… w ählen (BEFEHLSTASTE + SHIFT + B). Es öffnet sich das Elem entefenster in der Kategorie BIBLIO-



Ein neues Bibliothekselement erstellen Sie am einfachsten über das M enü des Elementefensters. In der Siteliste des Fensters können Sie das Objekt umbenennen.

Bibliothek

133

THEK und zeigt das neue Objekt an: im oberen Teil des Fensters den Inhalt des Objekts, im unteren Teil das Icon, Nam e, Größe und den vollständigen Pfad. Sie ändern den Nam en w ie oben bei Elem ente beschrieben. Das Objekt erhält die Endung (suffix) .lbi (library) und w ird im Verzeichnis Library im Site-Ordner abgelegt. Ein Bibliothekselem ent in Ihrem Dokum ent ist farbig m arkiert und w ird inaktiv (grau), w enn Sie versuchen, es anzuklicken. Sie erkennen es im Tag-Selektor am Tag < m m :libitem > . Die Markierungsfarben ändern Sie unter VOREINSTELLUNGEN…

 Mit der Bibliothek arbeiten Über das Menü des Elem entefensters bearbeiten Sie die Bibliotheksobjekte:  NEU BIBLIOTHEKSELEMENT erstellt aus der aktuellen Ausw ahl im Dokum entfenster ein neues Bibliotheksobjekt.  BEARBEITEN öffnet das Bibliothekselem ent im Dokum entfenster. Sie können dann das Elem ent w ie in einer Seite bearbeiten und anschließend w ieder speichern.  EINFÜGEN: das Bibliothekselem ent in die aktuelle Seite einfügen  UMBENENNEN: den Nam en des Bibliothekselem ents ändern  LÖSCHEN: das Objekt aus der Bibliothek löschen  UMBENENNEN m arkiert den Nam en des Objekts. Sie können ihn dann ändern. Sie können auch gleich den Nam en doppelklicken.



Ein Bibliothekselement ändern Sie, indem Sie auf das Element doppelklicken. Das Element wird in einem neuen Dokumentfenster geöffnet, wo Sie es wie gewohnt bearbeiten und speichern können.

134

Elem ente und Vorlagen

 Bibliothekselement bearbeiten Sitelisten- und Site-Aktualisierungsfunktionen sind weiter oben bei Elemente beschrieben.

Doppelklicken Sie im Elem entefenster auf das Icon des Elem ents, w ird das Bibliothekselem ent in einem neuen Dokum entfenster geöffnet. In der Kopfleiste sehen Sie < < Bibliothekselem ent> > sow ie den Nam en m it der Endung .lbi. Jetzt können Sie die gew ünschten Änderungen an dem Objekt in der Code- oder Entw urfsansicht vornehm en. Wenn Sie die Datei sichern (BEFEHLSTASTE + S), w erden die Änderungen in die .lbi-Datei geschrieben. Dam it die Änderungen für alle Seiten übernom m en w erden, m üssen Sie die Site aktualisieren.

 Kontextmenü Die Funktion „Neu erstellen“ ist ähnlich „Neu Bibliotheksobjekt“ mit dem Unterschied, dass das ausgewählte Element in der Seite schon eine Beziehung zu einer (jetzt nicht verfügbaren Quelldatei) hatte. Diese Beziehung ist im Quellcode der Seite festgehalten und wird erst gelöscht, wenn die komplette Site aktualisiert wird.

Sie fügen ein Bibliothekselement  in ein Dokument ein, indem Sie es entweder per Drag & Drop an die gewünschte Stelle (Cursorposition) ziehen oder das Element markieren und am unteren Fensterrand auf „Einfügen“ klicken.

Wenn Sie ein eingefügtes Objekt in der Seite bearbeiten w ollen, nutzen Sie dafür das Kontextm enü: CTRL + M AUSTASTE (Mac) oder RECHTE M AUSTASTE (Window s).  BIBLIOTHEKSELEMENT ÖFFNEN… (w ie oben beschrieben)  VOM ORIGINAL LÖSEN m acht das Objekt zu einem unabhängigen Elem ent der Seite. Wenn das Bibliotheksobjekt geändert w ird, w erden diese Änderungen nicht m ehr in den Code der Seite übertragen.  NEU ERSTELLEN: Mit diesem Befehl können Sie – falls die Quelldatei des Bibliothekselem ents (.lbi) nicht verfügbar ist – aus dem abhängigen Elem ent auf der Seite die Quelldatei w ieder herstellen.

Bibliothek

135

 Weiter können Sie das m arkierte Objekt KOPIEREN, AUSSCHNEIDEN und EINFÜGEN sow ie den Eigenschafteninspektor öffnen.

 Eigenschaften Die Eigenschaften der Bibliothekselem ente w erden im Eigenschafteninspektor angezeigt. Hier können Sie den Pfad der Quelldatei sehen, die Elem ente öffnen, das Elem ent vom Original trennen, sow ie die Quelldatei aus der aktuellen Ausw ahl neu erstellen bzw . neu definieren (siehe oben).

 Hinweise CSS-Stile, Verhaltensw eisen und Zeitleisten in Vorlagen und Bibliothekselem enten m üssen besonders behandelt w erden, da Sie Elem ente enthalten, die im HeadBereich – oder im Head- und Body-Bereich – des Dokum entes stehen. Die hierfür notw endigen Prozeduren w erden ausführlich in der Dream w eaver-Online-Hilfe beschrieben. Hinw eise für die Verw endung von Server Side Includes (SSI) finden Sie an der gleichen Stelle.

Die verwendeten Beispieldateien finden Sie auf der beigelegten CD-ROM : examples/ 04page/ 043template

136

Tabellen

TABELLEN Tables are a webdesigner's best friend.

Tabellen w urden zum ersten Mal vom Brow ser Netscape 1.1 unterstützt. Ihre Funktion w ar auf die von statischen Rechenblättern (spreadsheets) beschränkt. Mit Tabellen konnte m an also Spalten und Zeilen abbilden und m it Text und Zahlen füllen – allerdings ohne innerhalb der Tabelle dynam ische Berechnungen durchzuführen. Aus der Notlage heraus, m it HTML nur w enig Einfluss auf das Layout der Seiten zu haben – entdeckten Webdesigner das enorm e gestalterische Potential von Tabellen: die Position von Texten und Bildern unabhängig von der Fenstergröße absolut im Layout fest zu verankern! Der Einsatz von Tabellen als Mittel zur Seitengestaltung zog eine entsprechende Reaktion der HTML-Puristen nach sich, die die ursprüngliche Idee der strukturierten Form atierung eines Dokum ents m issbraucht sahen. Bis zum heutigen Tag ist in dieser Debatte nicht das letzte Wort gesprochen. Dream w eaver hat das Arbeiten m it Tabellen durch intuitive Handhabung der Elem ente stark verbessert und an die Anforderungen der Praxis angepasst. Das Aufbauen, Anpassen und Optim ieren der Tabellen ist zu einem w irklich erfreulichen WYSIWYG-Erlebnis gew orden. Trotz aller Euphorie ist es jedoch ratsam , ein gerütteltes Maß an Arbeitsdisziplin m itzubringen, denn w ie Sie sehen w erden, steckt der Teufel im Detail. Im folgenden Abschnitt w erden w ir den Aufbau von Tabellen und das einfache Erstellen, Modifizieren und Optim ieren von Funktionstabellen kennen lernen; w ir w erden Tabellen aus anderen Program m en übernehm en, generieren, form atieren und sortieren. Weiter w erden Sie m it verschachtelten Tabellen die kom plexen Layoutm öglichkeiten von HTML kennen lernen, Bildtabellen erstellen und generieren sow ie Ebenen (layer) in Tabellen konvertieren.

Tags, Attribute und Werte Betrachten w ir den Aufbau einer Tabelle im Quellcode, so w ird die Struktur schnell deutlich. Das Listing zeigt die Anatom ie des Beispiels: < TABLE WIDTH= "75%“"CELLSPACING= "0" CELLPADDING= "0" BORDER= "0"> < TR> < TD> Reihe 1 Zelle 1 < / TD> < TD> Reihe 1 Zelle 2 < / TD> < TD> Reihe 1 Zelle 3 < / TD> < / TR> < TR>

Tags, Attribute und Werte

< TD> Reihe 2 Zelle 1 < / TD> < TD> Reihe 2 Zelle 2 < / TD> < TD> Reihe 2 Zelle 3 < / TD> < / TR> < TR> < TD> Reihe 3 Zelle 1 < / TD> < TD> Reihe 3 Zelle 2 < / TD> < TD> Reihe 3 Zelle 3 < / TD> < / TR> < / TABLE>

Das Tag < TABLE> stellt die äußere „Schale“ der Tabelle dar. Das Tag w ird am Ende m it < / TABLE> geschlossen. Die Zeile w ird durch das Tag < TR> (tablerow ) definiert und durch < / TR> geschlossen. Die einzelne Zelle w ird durch die Tags < TD> (tabledata ) und < / TD> beschrieben.

Tabellen m it Dream w eaver zu erstellen ist jetzt generell einfacher:  Ziehen Sie aus der Objektepalette ALLGEMEIN das Objekt TABELLE EINFÜGEN auf das Dokum entfenster m it EINFÜGEN: TABELLE oder m it BEFEHLSTASTE + SHIFT + T.  Sie erhalten ein Ausw ahlfenster, in dem Sie die Attribute der Tabelle einstellen können. Die rechten beiden Eingabefenster sind nicht w irklich leer. Wenn Sie diese beiden Werte nicht definieren, w ird Ihr Brow ser autom atisch einen Wert von „1“ für die Zellauffüllung, von „2“ für den Zellraum und von „1“ für die Rahm enstärke darstellen. Setzen Sie alle drei Werte auf „0“, ehe Sie m it OK bestätigen.  Sie haben jetzt ein Tabellenobjekt m it drei Zeilen und drei Spalten, also insgesam t neun Tabellenzellen in Ihrem Dokum entfenster. Die Tabelle hat eine definierte Breite von 75% der Fensterbreite. In nicht m arkiertem Zustand sind die Tabellenzel-

137

138

Tabellen

len durch gestrichelte Linien getrennt. Wenn Sie m it dem Cursor auf die linke obere Ecke gehen, können Sie die ganze Tabelle ausw ählen.  Sie können einzelne Spalten ausw ählen – der Cursor verw andelt sich dann in einen senkrechten, nach unten zeigenden Pfeil,  oder Zeilen ausw ählen. Der Cursor w andelt sich dann in einen nach rechts zeigenden Pfeil. Das Ausw ählen von Spalten und Zeilen erfordert etw as Fingerspitzengefühl!  Indem Sie m it gedrückter Maustaste den Cursor über neben- oder übereinander liegende Zellen ziehen, w ählen Sie m ehrere Zellen aus. Sie können auch m ehrere angrenzende Zellen m it gedrückter (SHIFT)-TASTE ausw ählen. Mehrere nicht angrenzende Zellen w ählen Sie m it gedrückter Befehlstaste aus.

Sie können jetzt Zelle für Zelle m it Text füllen, indem Sie für jede neue Zelle die TAB-TASTE drücken. Vorsicht: Wenn Sie in der letzten Zelle der letzten Zeile die TABTASTE drücken, w ird eine neue Zeile erzeugt! Aber das lässt sich m it BEFEHLSTASTE + Z rückgängig m achen. Zur optim alen Navigation innerhalb von Tabellen benutzen Sie den Tag-Selektor unten links in der Statusleiste.

 Table

Die TABLE-Attribute VSPACE, HSPACE sowie BORDERCOLOR sind mit Dreamweaver 4 als Optionen aus der Oberfläche des Eigenschafteninspektors entfernt worden. Benutzen Sie hierfür den Tag-M odus des Eigenschafteninspektors.

Dem Table-Tag kann eine Reihe von Attributen zugew iesen w erden:  BREITE (WIDTH) relativ in Prozent der Fensterbreite oder absolut in Pixel  ZELLRAUM (CELLSPACING) definiert den Abstand zw ischen den einzelnen Zellen einer Tabelle, im m er absolut in Pixel.  ZELLAUFFÜLLUNG (CELLPADDING) definiert den Abstand des Zellinhalts zu seiner Begrenzung, im m er absolut in Pixel.  RAHMEN (BORDER) definiert die Stärke des Tabellenrahm ens, im m er absolut in Pixel. Weitere Attribute sind:  HÖHE (HEIGHT) relativ in Prozent der Fensterhöhe oder absolut in Pixel  AUSRICHTUNG (ALIGN): STANDARD, LINKS, RECHTS, ZENTRIEREN  V-ABSTAND (VSPACE): Abstand zu anderen Objekten oder dem Fensterrand nach oben und unten, im m er absolut in Pixel  H-ABSTAND (HSPACE): Abstand zu anderen Objekten oder dem Fensterrand nach rechts und links, im m er absolut in Pixel  HELLER RAHMEN (BORDERCOLORLIGHT) definiert die obere und linke Rahm enfarbe, Hex-Wert (#FFFF00) oder Farbnam e (yellow ).  DUNKLER RAHMEN (BORDERCOLORDARK) definiert die untere und rechte Rahm enfarbe, Hex-Wert (#FFFF00) oder Farbnam e (yellow ).  HINTERGRUNDFARBE (BGCOLOR) definiert die Hintergrundfarbe der Tabelle, HexWert (#FFFF00) oder Farbnam e (yellow ).  RAHMENFARBE (BORDERCOLOR) definiert die Grundfarbe des Rahm ens durch den Hex-Wert (#FFFF00) oder Farbnam en (yellow ).

Tags, Attribute und Werte

Wenn Sie Buchstaben, Wörter oder Zahlen in die Zellen schreiben, sehen Sie, dass sich die Zellen und Zeilen „elastisch“ verhalten und ihre Größe dem Inhalt anpassen. Das gilt für Texte w ie für eingesetzte Bilder – vorausgesetzt, die Breiten und Höhenw erte der Zeilen und Zellen sind relativ (in Prozent) eingestellt. Aber selbst unter Verw endung absoluter Werte (Pixel) w erden Sie feststellen, dass sich die Tabelle nicht im m er so verhält, w ie Sie es erw arten. Insbesondere bei verschachtelten Tabellen w ird Ihre Geduld m anchm al auf die Probe gestellt, ehe Sie das gew ünschte Ergebnis erhalten.

 Row Dem TR-Tag können folgende Attribute zugew iesen w erden:  BREITE (WIDTH) relativ in Prozent der Tabellenbreite oder absolut in Pixel. Diese Einstellung spielt eigentlich keine Rolle, da sie im m er von der Tabellenbreite abhängig ist.  HÖHE (HEIGHT) relativ in Prozent der Tabellenhöhe oder absolut in Pixel  AUSRICHTUNG (ALIGN): STANDARD, LINKS, RECHTS, ZENTRIEREN  HINTERGRUNDFARBE (BGCOLOR) definiert die Hintergrundfarbe der Tabelle als HexWert (#FFFF00) oder Farbnam e (yellow ).  RAHMENFARBE (BORDERCOLOR) definiert die Grundfarbe des Rahm ens als HexWert (#FFFF00) oder Farbnam e (yellow ).  KEIN UMBRUCH (NOWRAP) sorgt dafür, dass Text oder Bilder, die nebeneinander stehen, in keinem Fall in die nächste Zeile um brochen w erden, auch w enn der Platz in der Zelle zu knapp w ird. Die Attribute des TR-Tags überschreiben die Attribute des Table-Tags. So w ird zum Beispiel die Hintergrundfarbe des TR-Tags statt der zuvor eingestellten Hintergrundfarbe des Table-Tags benutzt.

 Cell Dem TD-Tag können folgende Attribute zugew iesen w erden:  BREITE (WIDTH) relativ in Prozent der Tabellenbreite oder absolut in Pixel  HÖHE (HEIGHT) relativ in Prozent der Tabellenhöhe oder absolut in Pixel  AUSRICHTUNG (ALIGN): STANDARD, LINKS, RECHTS, ZENTRIEREN  HINTERGRUNDFARBE (BGCOLOR) definiert die Hintergrundfarbe der Tabelle, HexWert (#FFFF00) oder Farbnam e (yellow ).  RAHMENFARBE (BORDERCOLOR) definiert die Grundfarbe des Rahm ens, Hex-Wert (#FFFF00) oder Farbnam e (yellow ). Die Attribute des TD-Tags überschreiben w iederum die Attribute des Table-Tags und des TR-Tags. So w ird zum Beispiel die Hintergrundfarbe des TD-Tags benutzt, egal w elche Hintergrundfarben im Table-Tag und TR-Tag eingestellt sind.

139

140

Tabellen

 Im Eigenschafteninspektor haben w ir im nächsten Beispiel folgende Werte für unsere Tabelle definiert: < TABLE WIDTH= "75%" BORDER= "5" CELLSPACING= "5" CELLPADDING= "5" VSPACE= "10" HSPACE= "10" BORDERCOLORLIGHT= "#CCCC00" BORDERCOLORDARK= "#999900" BGCOLOR= "#FFFFCC" HEIGHT= "50" ALIGN= "RIGHT" BORDERCOLOR= "#666600"> Die BORDERCOLOR-Attribute – IE-proprietäre-Tags, die aber auch von iCab (M acintosh) interpretiert werden – bisher als Optionen „Heller Rahmen“ und „Dunkler Rahmen“ im Eigenschafteninspektor enthalten, können Sie jetzt im Tag-M odus des Eigenschafteninspektors von Hand eingeben: Pluszeichen klicken, Attribut wählen, Farbe eingeben oder auswählen.

 Das Ergebnis in Dream w eaver zeigt die Tabelle m it den neuen Eigenschaften an.  Betrachtet m an die Tabelle in Netscape Navigator 4.5, fällt auf, dass die Werte der hellen (BORDERCOLORLIGHT) und dunklen (BORDERCOLORDARK) Rahm enfarbe nicht interpretiert w erden, sondern nur die Rahm enfarbe (BORDERCOLOR) in ihren hellen und dunklen Schattierungen. Auch die Zellräum e (CELLSPACING) – eigentlich Zellzw ischenräum e – sind w eiß gew orden. Die Ausrichtung (ALIGN) nach rechts und die Abstände (VSPACE, HSPACE) sind jedoch erhalten geblieben.  Internet Explorer 4.5 interpretiert die Tabelle etw as anders. Die Werte der hellen (BORDERCOLORLIGHT) und dunklen (BORDERCOLORDARK) Rahm enfarbe w erden dargestellt, die Rahm enfarbe (BORDERCOLOR) w ird ignoriert. Die Größe der dargestellten Tabelle (bei gleicher Rahm enbezugsgröße von 800 x 600 Pixel) variiert von Brow ser zu Brow ser. Auch bei den dargestellten Farben (Hintergrund) gibt es Unterschiede. Dies ist auf unterschiedliche Farbm anagem entsystem e und Gam m a-Einstellungen der Brow ser zurückzuführen.

Tags, Attribute und Werte

141

 Kopfzeile Das TH-Tag entspricht dem TR- und dem TD-Tag, m acht jedoch die Zeile (Zelle) zu einer Kopfzeile (-zelle) und setzt alle in ihr enthaltenen Texte fett.

 Hintergrundbilder Man kann < TABLE> , < TR> und < TD> als Attribut auch ein Hintergrundbild zuw eisen. Hintergrundbilder in Tabellen spielen eine Rolle, w enn m an kom plexe, geschichtete Layouts – ohne die Verw endung von CSS-Layern – einsetzen m öchte. Das Hintergrundbild verhält sich dabei in der Tabelle genau w ie das Hintergrundbild einer Seite: Es w ird in seiner Originalgröße als „gekacheltes“ Muster w iederholt. Eine eventuell vorhandene Hintergrundfarbe w ird durch das Hintergrundbild überdeckt.

 Rowspan und Colspan Manchm al ist es notw endig, dass sich der Inhalt einer Zelle über m ehrere Zeilen erstreckt (ROWSPAN). Analog zu (ROWSPAN) gibt (COLSPAN) Ihnen die Möglichkeit, den Inhalt einer Zelle über m ehrere Spalten auszudehnen. (ROWSPAN) und (COLSPAN) sind Attribute vom TD-Tag und – w ie Sie später sehen w erden –, unverzichtbare Hilfsm ittel bei der Gestaltung von Funktions-, Layout- und Bildtabellen.

 Erstellen eines Tabellen-Objekts Wie schnell die Erstellung eines eigenen Objekts funktioniert, zeigen w ir an einem einfachen Beispiel. Bevor Sie jedoch beginnen, die Konfigurierung zu verändern, sollten Sie in Ihrem eigenen Interesse dafür sorgen, dass Sie ein Backup des Verzeichnisses Configuration im Dream w eaver Stam m verzeichnis an einem sicheren Ort verw ahren. Falls Ihre selbstgebastelte Konfiguration versagt, brauchen Sie nur das gesam te Verzeichnis Configuration durch das Original zu ersetzen.  Öffnen Sie Configuration/ Objects/ Com m on.  Duplizieren Sie Table.htm und benennen Sie die neue Datei um in Spezialtabelle.htm .  Öffnen Sie die Datei m it Dream w eaver oder BBEdit und ändern Sie die Werte im Code an folgenden Stellen Ihren Vorstellungen entsprechend, z.B.: < input t ype= "text" nam e= "Row s" size= "8" value= "5"> < input t ype= "text" nam e= "Cellpad" size= "8" value= "0"> < input t ype= "text" nam e= "Cols" size= "8" value= "10">

M ehr zum Thema „Objekte erstellen“ finden Sie im Kapitel Anpassen und Erweitern auf Seite 270.

142

Tabellen

< input t ype= "text" nam e= "Cellspace" size= "8" value= "0"> < input t ype= "text" nam e= "Width" size= "8" value= "600"> < option value= "pixels" nam e= "pixels"> Pixel< / option> < option value= "percent" nam e= "percent" selected> Prozent< / option> < input t ype= "text" nam e= "Border" size= "8" value= "0“>

 Sichern Sie die Datei und schließen Sie sie.  Öffnen Sie Table.gif im gleichen Verzeichnis; m it einem Bildbearbeitungsprogram m (Photoshop) verändern Sie sie nach Ihren Vorstellungen und sichern Sie sie unter dem Nam en Spezialtabelle.gif. Es ist w ichtig, dass Code und Tabelle unter dem gleichen Nam en gesichert w erden! Beim nächsten Neustart lädt Dream w eaver das neue Objekt in die Objektepalette. Falls dieses Beispiel w ider Erw arten bei Ihnen nicht funktioniert, haben w ir die entsprechend m odifizierten Dateien auf der CD-ROM abgelegt.



Nachdem Sie Ihr Tabellenobjekt erstellt haben, können Sie es einfach aus der Objektepalette auf das Dokumentfenster ziehen … … oder in das  Dokumentfenster klicken und in dem erscheinenden Fenster die voreingestellten Werte verändern.

Funktionstabellen Tabellen, die Texte und Zahlen enthalten, nennen w ir Funktionstabellen. In einem Rechenblatt (z.B. Excel) w erden die Werte der einzelnen Zellen m itunter durch Funktionen (Rechenfunktionen w ie Sum m enbildung) verknüpft. Dies ist in einfachem HTML nicht m öglich, nur m it der Unterstützung von JavaScript. Aber die Werte aus Rechenblättern lassen sich m it den m eisten Anw endungen als HTML exportieren. Excel bietet diese Funktion unter DATEI: ALS HTML SPEICHERN. In m ehreren Schritten, in denen die Form atierungen der zu exportierenden Tabelle festgelegt w erden können, führt das Program m durch die Exportfunktion. Am Ende des Prozesses m üssen Sie die HTML-Datei table_xls.htm l dann nur noch m it Dream w eaver (oder BBEdit) öffnen und die Tabelle in Ihre Seite einsetzen. Dies m achen Sie entw eder im Layout- (Seitenansicht) oder im HTML-Modus (Codeansicht). Achten Sie darauf, dass Sie im HTML-Modus den gesam ten Code zw ischen den Table-Tags m arkieren. Falls Sie bereits Tabellen in Word bearbeitet haben, w erden Sie feststellen, dass es viele Gem einsam keiten zw ischen Dream w eaver und Word gibt, w as das „Hand-

Funktionstabellen

143

ling“ von Tabellen betrifft. Nicht nur die Markierung der einzelnen Tabellenbereiche, sondern auch die Form atierung der Inhalte (bei Word „AutoForm at“) funktioniert ähnlich. Die Exportfunktion ist m it der von Excel fast identisch.

 Formatieren Dream w eaver bietet die Möglichkeit, Tabellen m anuell oder halbautom atisch zu form atieren. Wenden w ir uns zunächst der „Handarbeit“ zu, um die Form atierung besser zu verstehen. Form atieren bedeutet, die Tabelle und ihre Inhalte optim al nach unseren Wünschen zu gestalten. Die Größe der Tabelle, Zeilenabstände, Farben, Ausrichtung der Texte sow ie die Schriftart lassen sich m odifizieren. Ändern Sie den Text der Kopfzeile unserer Beispieltabelle table2a.htm l, und setzen Sie statt „Januar“ „JAN“, statt „Februar“ „FEB“ usw . ein, dam it w ir nicht so viel Platz in der Tabelle verschenken. Der Platz auf Webseiten ist teuer, und Sie w erden staunen, w ie w enig Platz eine optim ierte, aussagekräftige Tabelle braucht!

 Hintergrundfarbe zuweisen Markieren Sie die Kopfzeile und w eisen Sie ihr über den HgF-Farbnapf die Hintergrundfarbe #FFFFCC zu. Die nächste Zeile lassen Sie w eiß. Der ersten Wertezeile (Joerg) geben Sie die Hintergrundfarbe #99CC66, der nächsten Zeile #FFCC99, der nächsten w ieder #99CC66, dann w ieder #FFCC99. Lassen Sie die vorletzte Zeile w eiß. Die letzte Zeile erhält die Hintergrundfarbe #FFCC99.



Die Hintergrundfarbe für die letzte Zeile wird mit der Pipette aus den Farbnäpfen der Palette oder von einer beliebigen Stelle auf dem Desktop entnommen.

144

Tabellen

 Spaltenbreite und Zeilenhöhe festlegen Markieren Sie alle Spalten (Zellen) der Kopfzeile, in denen die Monate stehen. Setzen Sie im Eigenschafteninspektor die Breite (B) auf 40. Auf diese Weise haben Sie die Gew ähr, dass die Sum m e der Spaltenbreiten nicht höher als die Gesam tbreite der Tabelle ist, sich die Spalten aber gleichm äßig verteilen. Das Gleiche m achen Sie jetzt m it den Zeilen. Markieren Sie die ganze Tabelle und setzen Sie die Zeilenhöhe (H) auf 10. Für die beiden w eißen Zeilen stellen Sie eine Höhe von 5 ein.

 Dynamische Tabellenformatierung Sie können die Tabelle auch direkt m it dem Cursor anfassen und in ihren Dim ensionen verändern. Entw eder fassen Sie die ganze Tabelle am rechten unteren schw arzen Knopf (handle) des Rahm ens (w enn Sie dabei die SHIFT-TASTE gedrückt halten, verändern Sie die Abm essungen der Tabelle proportional), oder Sie beeinflussen die Breite und Höhe unabhängig voneinander (rechter und unterer Knopf des Rahm ens). Den einzelnen Spalten und Zeilen  werden Breite und Höhe zugewiesen.

Auch die Spalten und Zeilen lassen sich m it dem Cursor verschieben. Der Cursor w ird zum Doppelpfeil, w enn Sie auf eine Zellenbegrenzung gehen. Jedoch lässt Dream w eaver es nicht zu, dass Sie eine Tabelle oder deren Elem ente kleiner m achen als die Inhalte: Ab einer bestim m ten Grenze lässt sich die Tabelle (Zeile oder Spalte) nicht m ehr verkleinern, egal w ie viel Sie schieben. Bedenken Sie auch, dass sich alle zuvor num erisch eingegebenen Werte ändern, w enn Sie eine Tabelle, deren Spalten oder Zeilen m it dem Cursor verschieben.

Funktionstabellen

 Tabellen von Hand konvertieren Bevor es die Möglichkeit gab, HTML aus Rechenblättern zu exportieren, haben die HTML-Program m ierer den strukturierten Aufbau des Codes genutzt, um eine aus einem Rechenblatt exportierte, so genannte tab-separierte Textdatei in eine HTMLTabelle um zuw andeln: Dies w ird hier an einem Beispiel dem onstriert.  Exportieren Sie die Datei table.xls als tab-separierten Text in die Datei table.txt. Falls Sie kein Excel haben, überspringen Sie den Export, und öffnen Sie gleich table.txt.  Öffnen Sie table.txt m it BBEdit oder einem anderen Texteditor, und m achen Sie die Sonderzeichen sichtbar (show invisibles). Sie w erden feststellen, dass vor jedem Zellinhalt ein Tab (Tabulator „\ t“) steht. Der Zellanfang < TD> w ird also durch einen Tab definiert, das Zellende < / TD> durch den nächsten Tab, der gleichzeitig den Zellanfang der folgenden Zelle definiert.  Der Anfang jeder Zeile entspricht dem Anfang einer Tabellenzeile < TR> , nur fehlt hier für die vollständige Syntax der Anfang der Zelle < TD> . Das Ende einer Zeile (Zeilenum bruch „\ r“) entspricht dem Ende einer Tabellenzeile < / TR> .  Nun w andeln Sie m it Hilfe der Suchen-Ersetzen-Funktion des Editors die Syntax der Textdatei in HTML um . Suchen-Ersetzen „\ t\ r“ w ird zu < / TD> < / TR> \ r< TR> < TD> .  Suchen-Ersetzen: „\ t“ w ird zu < / TD> < TD> .  Setzen Sie an den Anfang < TABLE> , an das Ende < / TABLE> und löschen Sie eventuell übrig gebliebene Syntax-Fragm ente (verw aiste Tags). Sichern Sie die Datei unter table.htm l. Testen Sie die Datei: Dream w eaver w ird diese Tabelle notfalls reparieren und in die richtige Form bringen. Das fertige Ergebnis sollte ungefähr so aussehen w ie die Beispieldatei table.htm l. Jetzt können Sie Tabellen schon fast von Hand schreiben! 

Die Beispieltabelle in Excel (table.xls)



Eine nach HTM L exportierte Tabelle, dargestellt im Internet Explorer 4.5 (table_xls.html)

145

146

Tabellen

Eine nach HTM L exportierte  Tabelle aus Excel, dargestellt in Dreamweaver (table_xls.html)



M anuell konvertierte tabseparierte Textdatei (von table.txt)





Sie können vor dem Import der Tabellendaten umfangreiche Feineinstellungen vornehmen.

Das Objekt „Tabellendaten einfügen“

 Tabellendaten einfügen Mit Dream w eaver 3 ist das neue Objekt TABELLENDATEN EINFÜGEN in der Tafel ALLGEMEIN der Objektepalette aufgenom m en w orden. Mit ihm können Sie einfach TabellenExportdateien (zeichenseparierte Texte) einfügen und vorform atieren. Die Art der Trennzeichen (Kom m a, Tabulator) kann gew ählt w erden, die Tabellenbreite (relativ oder absolut) kann entsprechend der Voreinstellung übernom m en oder flexibel an die Dim ensionen der Daten angepasst w erden. Die Stärke des Tabellenrahm ens, die Zellauffüllung und der Zellenabstand (Zellraum ) lassen sich ebenso anpassen w ie das Form at der Kopfzeile.

 Tabellen exportieren Als Gegenstück zu TABELLENDATEN EINFÜGEN hat Dream w eaver 3 den Befehl TABELLEN bekom m en. Wählen Sie im Dokum entfenster eine Tabelle aus, deren

EXPORTIEREN

Funktionstabellen

Daten Sie exportieren m öchten. Wählen Sie DATEI: EXPORTIEREN: TABELLEN EXPORTIEREN. Im Dialogfenster können Sie dann die Zielplattform (Mac, Window s oder UNIX) sow ie das Trennzeichen (Tab, Kom m a, Sem ikolon etc.) für die Textdatei ausw ählen.

 Dynamische Tabellendarstellung Unter dem Menüpunkt BEARBEITEN: VOREINSTELLUNGEN… in der Tafel ALLGEMEIN unter dem Optionspunkt SCHNELLERE TABELLENBEARBEITUNG (VERZÖGERTE AKTUALISIERUNG) können Sie die dynam ische Darstellung der Tabellen in Dream w eaver einstellen. Schalten Sie diese Option aus, w enn Sie jederzeit w issen w ollen, w ie Ihre Tabelle in Dream w eaver gerade aussieht. Anderenfalls w erden die Veränderungen in den Dim ensionen der Tabelle nur verzögert angezeigt. Wenn Sie ganz sicher gehen w ollen, schauen Sie sich das Zw ischenergebnis im Brow ser an (F12).

 Formatierung der Inhalte Markieren Sie alle Zellen, und w ählen Sie die Schrift Arial, Helvetica, sans-serif sow ie die Schriftgröße 2. Markieren Sie alle Spalten (Zellen) m it den Monaten und Zahlen und w ählen Sie im Eigenschafteninspektor die Ausrichtung ZENTRIERT. Schw ierig sind Dezim alzahlen, da HTML keine Möglichkeit bietet, Dezim altabulatoren darzustellen. Hier ist es sinnvoll, allen Zahlen die gleiche Anzahl an Nachkom m astellen zu geben und sie rechtsbündig auszurichten (ALIGN = "right"). Am besten nehm en Sie die Dezim aleinstellung gleich im Rechenblatt vor, bevor die Daten in HTML exportiert w erden.

147

148

Tabellen

Den Tabelleninhalten  Schriftart und Schriftgröße zuweisen

 Tabelle halbautomatisch formatieren Dream w eaver hält eine ganze Reihe von „fertigen“ Tabellen in einem Tabelleneditor für Sie bereit. Sie finden ihn unter BEFEHLE: TABELLE FORMATIEREN… Nachdem Sie die ganze Tabelle m arkiert haben, w ählen Sie links im Ausw ahlm enü eine Einstellung, z.B. ALTROWS: EARTHCOLORS. Rechts daneben sehen Sie in einer Vorschau, w ie die Tabelle aussehen w ird. In den Eingabefenstern können Sie diese Vorgaben beliebig verändern und an Ihre Vorstellungen anpassen. Um die Ausw irkungen auf Ihre Tabelle zu begutachten, klicken Sie auf ANWENDEN. Sind Sie m it dem Ergebnis zufrieden, klicken Sie auf OK. M it „Tabellen formatieren“  können Sie im Handumdrehen Ihrer Tabelle ein eigenes Gesicht geben.

Funktionstabellen

 Einfache Befehle erstellen Das w irklich Interessante an Dream w eaver ist, dass Sie fast jede Funktion anpassen können, so auch TABELLEN FORMATIEREN. Folgen Sie m ir auf einem kleinen Exkurs in das Verzeichnis Configuration. Im Unterverzeichnis Com m ands spielen folgende Dateien für TABELLEN FORMATIEREN eine Rolle:  Form at Table.htm baut das Fenster TABELLEN FORMATIEREN und dessen Inhalte – einschließlich der Beispielvorschau – auf.  tableForm ats.js stellt die Menüleiste im Fenster TABELLEN FORMATIEREN dar.  Form at Table.js sorgt dafür, dass die Einstellungen in TABELLEN FORMATIEREN auf die m arkierte Tabelle angew endet w erden. Ohne ein Experte in HTML oder JavaScript zu sein, können Sie nun beginnen, die Dateien für eigene Zw ecke zu m odifizieren. Für das Experim ent haben w ir neue Dateien angelegt:  Form at Table.htm w ird zu Form at Special Table.htm .  tableForm ats.js w ird zu specialtableForm ats.js.  Form at Table.js w ird zu Form at Special Table.js.  Öffnen Sie m it dem Texteditor die Datei Form at Special Table.htm . In den Zeilen 49 bis 51 geben Sie statt der Nam en Hans, Gabi, Peter eigene Nam en ein. Sie können auch w eitere Werte des Beispiels verändern. Im Kopf des Dokum ents m üssen Sie auch noch Anpassungen vornehm en, dam it diese Datei m it den von Ihnen um benannten anderen Dateien „kooperiert“: < META HTTP-EQUIV= "Content-Type" CONTENT= "text/ htm l; charset= iso-8859-1"> < !-- Copyright 1998 Macrom edia, Inc. All rights reserved. --> < !-- Rem ove the follow ing SCRIPT tag if you are m odifying this file for your ow n use. --> < SCRIPT LANGUAGE= "javascript" SRC= "displayHelp.js"> < / SCRIPT> < !-- End rem oval area. --> < script src= "tableForm ats.js"> < / script> < script src= "Form at Table.js"> < / script>

w ird zu: < META HTTP-EQUIV= "Content-Type" CONTENT= "text/ htm l; charset= iso-8859-1"> < !-- Copyright 1998 Macrom edia, Inc. All rights reserved. --> < !-- Rem ove the follow ing SCRIPT tag if you are m odifying this file for your ow n use. < SCRIPT LANGUAGE= "javascript" SRC= "displayHelp.js"> < / SCRIPT> End rem oval area. *auskom m entiert*--> < script src= "specialtableForm ats.js"> < / script> < script src= "Form at Special Table.js"> < / script>

 Öffnen Sie specialtableForm ats.js m it einem Editor. Ändern Sie im Kopf des Dokum ents tableForm ats in specialtableForm ats. Kopieren Sie dann den Bereich "/ / Sim ple1" und setzen Sie ihn oberhalb davon ein. Modifizieren Sie dann die Werte Ihren Wünschen entsprechend:

149

150

Tabellen

/ / KilDe Form ats[+ + i] = new Array(); Form ats[i].nam e= "KilDe"; Form ats[i].firstRow Color= "#99CC66"; Form ats[i].secondRow Color= "#FFCC99"; Form ats[i].topRow TextSt yle= BOLD; Form ats[i].topRow Align= "center"; Form ats[i].topRow Color= "#FFFFCC"; Form ats[i].topRow TextColor= "#003300"; Form ats[i].leftColTextSt yle= ITALIC; Form ats[i].leftColAlign= "left"; Form ats[i].border= "0"; Form ats[i].row Lim it= "0";

Sichern und schließen Sie die Datei.  Öffnen Sie Form at Special Table.js m it dem Editor. An insgesam t vier Stellen m uss tableForm ats durch specialtableForm ats ersetzt w erden, am besten m it SuchenErsetzen. Sichern und schließen Sie die Datei. Beim nächsten Start von Dream w eaver w erden Sie im Menü unter BEFEHLE den Eintrag SPEZIALTABELLE FORMATIEREN finden. Testen Sie die neuen Funktionen. Wenn es bei Ihnen nicht klappt, nehm en Sie die Beispieldateien der CD-ROM, legen Sie sie in das Verzeichnis Configuration/ Com m ands und versuchen Sie es dam it!

 Tabellen optimieren In unserer Tabelle haben sich einige Fehler (bugs) eingeschlichen. Wenn Sie die Brow ser-Vorschau (F12) betrachten, fehlt die erste Zelle, zum indest die Hintergrundfarbe. Falls Sie versuchen, die Hintergrundfarbe einzusetzen, w erden Sie m öglicherw eise zu keinem Ergebnis kom m en. Auch die beiden w eißen Zeilen lassen sich nicht einfärben. Schuld daran könnte ein Fehler sein, den w ir aus dem selbstgebastelten Code m itgeschleppt haben. Dream w eaver ist „gutm ütig“ – aber deshalb auch gefährlich, w eil auch falscher Code richtig dargestellt w ird. Deshalb sollten Sie häufiger die Brow ser-Vorschau nutzen, um das Ergebnis zu überprüfen.

 Zellen verbinden und aufteilen Wie können w ir die Tabelle besser darstellen? Eine Möglichkeit besteht darin, die m öglicherw eise fehlenden Zellen des Codes durch Verbinden der Zellen zu überbrücken. Sie erinnern sich an COLSPAN und ROWSPAN? Wenn w ir alle Zellen einer Zeile zu einer Zelle verbinden, sparen w ir Code und Program m ierarbeit. Eine einzelne Zelle lässt sich viel einfacher und vielseitiger handhaben. Falls Sie sich später noch anders entscheiden, können Sie die Zellen auch w ieder teilen.

Funktionstabellen

 Blinde Passagiere Löschen Sie die zw eite Zeile – w ir benötigen sie nicht m ehr (m arkieren und Löschtaste drücken). Wir m öchten die drittletzte Zeile nun nur durch eine ganz dünne w eiße Linie von der Sum m enzeile trennen. Wir können m it Höhe und Hintergrundfarbe die Zeile kontrollieren, w erden aber feststellen, dass sich eine leere Zelle im Brow ser „unberechenbar“ verhält. Wenn Sie ein „geschütztes Leerzeichen“ einfügen (EINFÜGEN: SONDERZEICHEN: GESCHÜTZTES LEERZEICHEN oder (BEFEHLSTASTE + SHIFT + LEERTASTE) ODER (ALT + LEERTASTE)), erhalten Sie einen unsichtbaren Text ( ) in der Zelle – dies ist übrigens der Zellinhalt, den Dream w eaver generiert, w enn Sie eine neue Tabelle erstellen. Die Zelle verhält sich jetzt im m er relativ zur Schriftgröße. Um eine ganz dünne w eiße Linie zu bekom m en, m üssen w ir einen Trick anw enden. In einem Bildverarbeitungsprogram m haben w ir uns verschiedenfarbige 1 x 1 Pixel große GIFs gebastelt, die w ir für Feinabstim m ung und Mikrotypografie einsetzen. Einige Experten m einen, dass die Bilder eine optim ale Größe von 8 x 8 Pixel haben sollten, um das Rendering-Verhalten der Brow ser besser zu unterstützen – aber ein 1 x 1 Pixel großes Bild tut es auch. Mein Lieblingsdarsteller ist ein transparentes Bild (die Am erikaner nennen es gerne shim ), das als Weißraum fungiert und in seinen Dim ensionen an den jew eiligen Zw eck angepasst w ird. Ein w eiterer Vorteil ist, dass dieses Bild – auch ohne Brow ser-Cache – blitzschnell geladen w ird. Dieses blind.gif w ird in die Zeile eingesetzt und auf die entsprechende Größe gebracht, die Hintergrundfarbe w ird auf Weiß gesetzt. Dam it sich der gew ünschte Effekt einstellt, brauchen Sie jetzt nur noch die Zeile vertikal zusam m enzuschieben oder per Tastatureingabe die Höhe auf 1 zu setzen.

 Letzter Schliff Durch die Form atierung m it TABELLEN FORMATIEREN w urde viel überflüssiger Code geschrieben: Jede Zelle hat noch Höhen-, Breiten- und Hintergrundattribute erhalten. Markieren Sie die Zellen. Im Eigenschafteninspektor sehen Sie dann, ob für die jew eilige Zelle bzw . Zellen Werte eingetragen sind. Löschen Sie diese Einträge und m arkieren Sie stattdessen die ganze Zeile (Spalte) und setzen dort die Werte ein. Nutzen Sie das erw eiterte Markieren (KLICK + BEFEHLSTASTE), um die Zellen auszuw ählen. Es geht nicht nur darum , überflüssigen Code loszuw erden, sondern auch den Code so elegant und editierbar w ie m öglich zu halten. Das bedeutet, schnell Änderungen vornehm en zu können. Der Trick besteht darin, dass Sie nicht alle Zellen einer Zeile (Spalte) m arkieren, w eil Dream w eaver dann annim m t, dass Sie die gesam te Zeile m einen. Nur w enn die Löschungen im „Zell-Modus“ vorgenom m en w erden, sind sie w irksam . Wenn Sie zum Beispiel die ganze Spalte m arkieren, einen Wert eingeben und diesen Wert dann w ieder löschen, w erden alle Werte der einzelnen Zellen überschrieben, egal w elchen Wert sie enthielten.

151

152

Tabellen

Kontrollieren Sie das Ergebnis im HTML-Inspektor: Die TD-Tags dürfen jetzt keine Attribute (Höhe, Breite, Hintergrundfarbe) m ehr enthalten. Es geht noch einfacher (quick and dirty), w enn Sie alle Werte in den TR-Zeilen und den TD- Zellen löschen. Dann m arkieren Sie nur die Zellen der ersten Zeile (Spalte) und setzen die Werte dort ein. Die anderen Zellen der Zeile (Spalte) richten ihre Größe nach diesen Referenzzellen. Ein Blick auf den  Netscape Navigator 4.5 genügt: Die Tabelle muss optimiert werden …

 M arkieren Sie alle Zellen der Zeile und klicken Sie das Symbol für das Verschmelzen von Zellen im Eigenschafteninspektor …

Fügen Sie ein Bild (transparentes GIF)  in die Zelle ein und stellen Sie es auf 600 x 1 Pixel (B x H) ein.

Funktionstabellen

153

 Zieleinlauf Da w ir ohne Zellauffüllung (CELLPADDING) gearbeitet haben, setzen w ir jetzt vor jeden Nam en in der linken Spalte ein geschütztes Leerzeichen. In der linken oberen Zelle sollte in jedem Fall entw eder ein geschütztes Leerzeichen oder ein blind.gif stehen. Wenn w ir in unserer Beispieltabelle die rechnerisch richtigen Spaltenbreiten einsetzen (72 + 12 x 44 = 600), w erden w egen der ungleichen Inhalte der Zellen unterschiedliche Breiten im Netscape Navigator 4.5 angezeigt. Setzen Sie die Spaltenbreiten größer als die Sum m e der Tabellenbreite (600), also auf (100 + 12 x 50 = 700). Bei einer Tabelle m it relativen Elem enten (Text) kann kein pixelgenaues Ergebnis erw artet w erden.

Wie dies noch einfacher geht, sehen Sie unter Kapitel Eigenschafteninspektor auf Seite 158.

 Wichtig beim Ändern einer Tabellenformatierung ist die Option „Alle Attribute auf TD-Tags, nicht auf TRTags anwenden“. Wenn diese Option gewählt ist, werden die einzelnen Zellen formatiert, sonst nur die Zeilen.

Formatieren Sie eine Referenzzeile.  In diesem Fall ist das die Breite der M onate. Wählen Sie Werte, deren Summe größer ist als die Tabellenbreite. Nur so gewährleisten Sie eine weitgehende Übereinstimmung in verschiedenen Browsern.



Der Netscape Navigator 4.5 zeigt nur geringe Abweichungen in der Darstellung im Vergleich zum Internet Explorer 4.5.



Die gleiche Darstellung im Internet Explorer 4.5

154

Tabellen

 Tabellen sortieren Das fehlende „u“ in „Spaltenräme“ können Sie in Configuration: Commands: Sort Table.htm in der Zeile 27 korrigieren, indem Sie es bei „Spaltenr%E4me“ einfügen, also „Spaltenr%E4ume“. Am Anfang der Zeile erhalten Sie auch den Hinweis im Klartext: Spans Are Present. Übrigens fällt dieser Textbug bereits seit Dreamweaver 2 durch die Qualitätskontrolle.

Dream w eaver 2 enthielt erstm alig ein Werkzeug zum Sortieren von Tabellen. Um zu sehen, w as sich dahinter verbirgt, w enden w ir es auf die eben optim ierte Tabelle an. Wenn Sie die Tabelle m arkieren und BEFEHLE: TABELLE SORTIEREN… w ählen, erhalten Sie prom pt folgende Meldung: „Der Befehl TABELLE SORTIEREN kann nicht auf Tabellen angew andt w erden, die Zeilen- oder Spaltenräm e enthalten“. Zuerst m üssen Sie aus der Übungstabelle tabelle3d.htm die < COLSPANS> entfernen. Das Sortieren hätten w ir dem Optim ieren der Tabelle vorziehen sollen. Wenn w ir von Anfang an gew usst hätten, in w elcher Reihenfolge die Zeilen stehen sollen, hätten w ir die Tabelle von vornherein so aufgebaut oder bequem in Excel sortieren lassen. Schade, dass dieses Feature noch nicht ganz praxisnah arbeitet. Zusätzlich könnte ich m ir vorstellen, die letzte Zeile (Sum m e) einer Tabelle vom Sortieren per Option auszuschließen oder das Sortieren nur auf einzelne Zeilenbereiche anzuw enden.



Die Tabelle table4a1.html vor und nach dem Sortieren…



… sowie die dazu gehörigen Sortierkriterien.



Die Tabelle table4a2.html vor und nach dem Sortieren…



… sowie die dazu gehörigen Sortierkriterien.

Verschachtelte Tabellen

155

 Öffnen Sie die Datei table4a.htm l m it Dream w eaver. Anhand dieser Tabelle lassen sich die Möglichkeiten von Tabellen sortieren am besten dem onstrieren.  Markieren Sie die Tabelle, und w ählen Sie BEFEHLE: TABELLE SORTIEREN. Sortieren Sie aufsteigend nach den alphabetischen Kriterien der ersten Spalte. Das Ergebnis sehen Sie in der Tabelle darunter. Leere Zeilen (und Zellen) w urden nach oben sortiert. Dass der Nam e m it E noch w eiter oben in die Tabelle einsortiert

w urde, liegt daran, dass das geschützte Leerzeichen ( ), w elches Dream w eaver unsichtbar in jede leere Zelle setzt, in der Zeichentabelle zw ischen den Buchstaben H und I einsortiert w ird. Da die erste Zeile oft eine Kopfzeilenfunktion hat, w ird sie nur dann sortiert, w enn die entsprechende Option gesetzt ist. Um zu sehen, w ie Dream w eaver m it den vorliegenden Attributen in einer Tabelle um geht, habe ich die leeren Zeilen gelöscht und die Zeilen m it Hintergrundfarben form atiert. Wenn w ir jetzt z.B. nach der zw eiten Spalte num erisch absteigend sortieren lassen, erhalten w ir das unten stehende Ergebnis, vorausgesetzt die Option TR-ATTRIBUTE BEIBEHALTEN w urde gesetzt. Im anderen Fall blieben die Zeilenhintergrundfarben im Wechsel erhalten.

Verschachtelte Tabellen

 Wir haben drei verschiedene verschachtelte Tabellen mit unterschiedlichen Browsern getestet. Die frühen Netscape-Browser (bis 4.x) kommen mit verschachtelten Tabellen generell nicht so gut zurecht.

156

Tabellen

Beispiele 044_nested_tables1.html

Eine typische verschachtelte  Tabelle. Die einzelnen Tabellen sind mit einer Hintergrundfarbe gekennzeichnet.

Sie kennen russische Matruschka-Puppen? Genau, die Puppe in der Puppe in der Puppe … – etw as absolut Faszinierendes, w ie verschachtelte Tabellen (nested tables) auch. Jedoch bergen verschachtelte Tabellen zw ei Gefahren: erstens, sich in Code und Seitenlayout zu verirren, zw eitens, unnötigen Code zu erzeugen. Abgesehen davon brauchen verschachtelte Tabellen beim Seitenaufbau im Brow ser etw as länger. Bei starken Verschachtelungen kom m t es bei allen Brow sern zu falschen Darstellungen der Tabellen, w enn Sie die Fenstergröße verändern. Aber für w irklich anspruchsvolle Layouts kom m en Sie um dieses Feature nicht herum . Sie haben es hier m it einem sehr fein justierbaren und flexibel einsetzbaren Werkzeug zu tun. Wenn Sie entsprechend Zeit in die Arbeitsvorbereitung investieren, w erden Sie von dem Ergebnis nicht enttäuscht.  Machen Sie einen Plan von Ihrem Vorhaben. Es kann eine einfache Bleistiftzeichnung sein oder aber ein bereits auf das letzte Pixel ausgefeilte Layout.  Lassen Sie beim Arbeiten den Tag-Selektor nicht aus den Augen. So können Sie jederzeit die richtigen Tabellenelem ente ausw ählen.  Erstellen Sie eigene m odifizierte Tabellenobjekte, die Sie an Ihr Vorhaben anpassen.  Im m er w enn Sie eine Zelle nicht aufteilen können, z.B. w eil in der Zelle bereits kom plexe Inhalte stehen, sollten Sie es m it einer verschachtelten Tabelle versuchen. Das ist m itunter viel erquicklicher und zielführender als sich m it COLSPAN und ROWSPAN herum zuschlagen.

Verschachtelte Tabellen

157

 Von außen nach innen Arbeiten Sie – bereits im Entw urf – im m er von außen nach innen. Seien Sie pixelgenau . Verw enden Sie für die Breite der äußeren Tabelle absolute Maße; für die inneren Tabellen können Sie auch relative Maße (Prozent) verw enden. Mit Höhenm aßen m üssen Sie experim entieren. Hier verhalten sich die einzelnen Brow ser m itunter sehr unterschiedlich. Bei den üblichen Layoutform en sind Höhenm aße für Tabellen nur in seltenen Fällen sinnvoll. Setzen Sie auch die Einstellungen für Zellraum und Zellzw ischenraum überlegt ein. Ich arbeite in den m eisten Fällen m it der Einstellung „0“ für diese Attribute und verw ende stattdessen Marginalzellen, also Spaltenzw ischenräum e, die aus Zellen bestehen, die die notw endigen Abstände herstellen. Dam it bin ich viel flexibler im Layout.

 Von oben nach unten Arbeiten Sie sich in den verschachtelten Tabellen m it der Zeilenhöhe im m er von oben nach unten durch. Dam it verm eiden Sie, dass Ihnen die ganze Tabelle nach unten w egw ächst, da Dream w eaver bei m anueller Höheneinstellung im m er absolute Werte einsetzt. Ich arbeite in der Konstruktionsphase des Seitenlayouts sehr gern m it Platzhalterelem enten, die für die späteren Inhalte stehen. Die Vorteile hierbei sind: Für das Layout m üssen noch nicht alle Seitenelem ente (Texte, Buttons, Bilder) vorliegen, der Seitenaufbau ist extrem schnell und es besteht die genaue Kontrolle über die einzelnen Pixel. Sie arbeiten in dieser Phase sehr viel m it der Brow ser-Vorschau, um im m er w ieder das Ergebnis und dessen Kom patibilität zu überprüfen. Vergessen Sie auch nicht –



Beispiele: table5a.html – table5c.html

Für das passgenaue Arbeiten beim Aufriss einer Seite habe ich mir ein Set 1-Pixel-großer Bilder (blind, grey und magenta) angelegt, die entweder die einzelnen Inhaltselemente simulieren oder leere Tabellenelemente am Platz halten. Nachdem ich die Tabellen aufgezogen habe, setze ich im Wechsel „grey“ (Inhalt) und „magenta“ (Weißraum) ein, baue die Seitenelemente auf und teste das Verhalten der einzelnen Elemente in verschiedenen Browsern. Nach dem erfolgreichen Aufbau der Seite können die Elemente schnell durch entsprechende Inhaltselemente oder das blind.gif ersetzt werden. Hier lässt sich dann Suchen-Ersetzen anwenden, um im Handumdrehen alle „magenta“ durch „blind“ auszutauschen.

158

Tabellen

Eine etwas andere Technik, die auch gleich den  noch fehlenden Inhalt dokumentiert, besteht darin, ein nicht existierendes Bild einzusetzen (x.gif) und dessen spätere Funktion und Dimension im Alt-Tag zu kommentieren. Im Browser haben Sie dann sofort den Überblick.

Sie können hierfür auch das Erweiterungsobjekt „Lorem Ipsum“ einsetzen, das Sie vom M acromedia Exchange Server zum Download finden.

besonders w enn Sie viel „von Hand“ im Code arbeiten oder einen externen Editor benutzen – Dream w eaver einen HTML-Check durchführen zu lassen. Blindtexte sollten in der veranschlagten Länge eingesetzt w erden. Benutzen Sie dazu den „Lorem ipsum “-Blindtext, der im Übungsverzeichnis auf der CD-ROM – auch in einer ausgezählten Version m it 1000 Anschlägen – enthalten ist.

Unentbehrliche Helfer  Eigenschafteninspektor Der Eigenschafteninspektor zeigt die Attribute und Werte der einzelnen Tabellenelem ente detailliert an. Mit seiner Hilfe w ird die Feineinstellung vorgenom m en. Im Tabellenm odus w ird das Tabellensym bol angezeigt. Im Eingabefenster daneben kann ein Tabellennam e eingetragen w erden, der bei einem Aufruf (call) der Tabelle durch JavaScript eine Rolle spielt. Außerdem w erden die Zeilen- und Spaltenanzahl, die Zellauffüllung sow ie der Zellraum , die Ausrichtung und Rahm enstärke angezeigt. Links unten in der Ecke befinden sich vier Icons, die Zeilenhöhen und Spaltenbreiten löschen sow ie die Werte der Tabellenbreite in Pixel bzw . Prozent um w andeln. Daneben kann der Tabelle ein vertikaler und horizontaler Abstand zu anderen Seitenelem enten zugew iesen w erden. Farbattribute, w ie heller und dunkler Rahm en, Rahm enfarbe, Hintergrundfarbe, und das Einsetzen eines Hintergrundbildes runden das Menü ab.

Unentbehrliche Helfer



Der Eigenschafteninspektor im Tabellenmodus



Der Eigenschafteninspektor im Zeilenmodus



Der Eigenschafteninspektor im Spaltenmodus



Der Eigenschafteninspektor im Zellenmodus

Spalten-, Zeilen- und Zellenm odi unterscheiden sich w esentlich vom Tabellenm odus. Im oberen Teil des Eigenschafteninspektors w erden jetzt die Kontrollen für die Form atierung der Inhalte sichtbar. Im unteren Teil stehen das Sym bol des jew eiligen Tabellenelem ents sow ie gleich rechts davon die Icons für das Verbinden und das Aufteilen. Horizontale und vertikale Ausrichtung bezieht sich auf die Inhalte der Spalte, w ährend B und H die Dim ensionen der Spalte in Pixel oder Prozent festlegen.

 Kontextmenü Wenn Sie m it gedrückter CTRL-TASTE (bei Window s m it der RECHTEN M AUSTASTE) auf ein Elem ent klicken, erscheint ein Kontextm enü, m it dem Sie die Tabelle sehr zügig editieren können. Neben der Form atierung der Inhalte können kom plexe Funktionen – die sonst über den Eigenschafteninspektor, das Hauptm enü oder per Tastaturkürzel ausgeführt w erden – auf die Tabellenelem ente angew endet w erden; zum Beispiel können Sie eine Zelle teilen.

 Tag-Selektor Besonders bei der Bearbeitung von verschachtelten Tabellen ist der Tag-Selektor ein außerordentlich nützliches Werkzeug, w eil Sie m it ihm jederzeit die Übersicht und Kontrolle behalten. Wenn Sie auf die verschiedenen Tags klicken, w erden die korrespondierenden Elem ente im Dokum entfenster m arkiert. Ungleich schw ieriger ist es, die Elem ente direkt im Dokum entfenster auszuw ählen. Zusam m en m it dem

159

160

Tabellen

Eigenschafteninspektor haben Sie so eine optim ale Arbeitsum gebung, um in Tabellen effektiv zu arbeiten. M it dem Tag-Selektor  können Sie leicht in verschachtelten Tabellen navigieren. Einfach das Element im Dokumentfenster markieren, das korrespondierende Tag wird unten links in der Statuszeile angezeigt. Wenn Sie jetzt ein Tag weiter links anklicken, werden im Dokumentfenster die in der Hierarchie nächsthöheren Elemente angezeigt.

Layouten mit Tabellen Um mit Tabellen im WYSIWYG-M odus zu arbeiten, schalten Sie am besten die Tabellenrahmen aus mit "Ansicht: Visuelle Hilfsmittel: Tabellenrahmen".

Da Sie jetzt w issen, w ie Tabellen verschachtelt w erden, kennen Sie die Grundlage zum Aufbau eines Layouts m it Tabellen, m it dem Zw eck, die einzelnen Elem ente einer Seite in einem Gestaltungsraster zu organisieren. Dieses Raster (grid ) ist teils statisch, teils flexibel, um sich veränderlichen Inhalten anzupassen. Dem entsprechend m üssen auch die Elem ente der Tabellen unterschiedlich angepasst w erden. Ebenen (CSS layers) bieten eine ähnliche Kontrolle in der Layoutgenauigkeit, sind jedoch nicht rückw ärtskom patibel zu älteren Standards. Eine klassisch aufgebaute Tabelle w ird auch von Brow sern der zw eiten und dritten Generation akzeptabel dargestellt. Außerdem kann der Code viel kürzer ausfallen und leichter editiert w erden.

Der Screenshot der Photoshop-Layoutdatei ist in diesem  Beispiel der Ausgangspunkt für das verwendete Tracing-Bild. Es wurde entfärbt, negativ gestellt und kontrastärmer gemacht, damit es, wenn – später die Gestaltungselemente ins Layout eingefügt werden –, sehr zurückhaltend wirkt.

Layouten m it Tabellen

161

 Tracing-Bilder Eine übliche Methode ist – ausgehend vom grafischen Entw urf – die Seite pixelgenau nachzubauen. Hier gibt es ein sehr hilfreiches Feature, das eine Darstellungsebene in den Hintergrund einzieht, die nur von Dream w eaver – nicht aber im Brow ser – dargestellt w ird. Das Seitenlayout w ird m it einem Gestaltungsprogram m w ie Freehand oder Photoshop entw orfen und als GIF-, JPEG- oder PNG-Form at im Bildverzeichnis des HTML-Dokum ents abgelegt. Sie laden das Tracing-Bild m it ANSICHT: TRACING-BILD: LADEN… Im Einstellungsfenster SEITENEIGENSCHAFTEN (M ODIFIZIEREN: SEITENEIGENSCHAFTEN) können Sie m it einem Schieberegler die Transparenz des Bildes einstellen. Unter ANSICHT: TRACING-BILD: POSITION EINSTELLEN können Sie die Position des Tracingbildes m it Ihrem Layout abstim m en. Im gleichen Menü:  ZEIGEN blendet das ausgew ählte Tracingbild ein.  AN AUSWAHL AUSRICHTEN setzt das Tracingbild bündig m it der linken oberen Ecke des von Ihnen ausgew ählten Objektes im Dokum entfensters.  POSITION EINSTELLEN lässt Sie die Position des Bildes vom linken oberen Rand num erisch einstellen.  POSITION ZURÜCKSETZEN setzt das Bild in die Ausgangsposition (0/ 0) zurück.

Die hier verwendeten Beispieldateien finden Sie im Ordner 044table/ layout_spyral/ .

 Design-Templates Beispiele: table7a.html – table7c.html

Die m eisten Seiten einer Site folgen einem Grundaufbau m it w iederkehrenden Elem enten, die durch Tabellen fixiert w erden. Zu diesen Elem enten zählen Logos,



Die Einstellungsfenster für das Tracing-Bild. Im Fenster „Seiteneigenschaften“ können Sie auch den Browserrand einstellen. Unten links der Quellcode, der als XM L-Erweiterung im Body-Tag nur von Dreamweaver interpretiert wird. Im Hintergrund das Dokumentfenster, in dem bereits die ersten Gestaltungselemente in den Tabellenaufbau eingefügt wurden. Deutlich sichtbar auch die horizontalen und vertikalen Referenzzeilen.

162

Tabellen

Menüs, Navigationsfunktionen sow ie die Spaltendefinitionen für Texte und Bilder. Es ist sinnvoll, einige m ögliche Varianten durchzuspielen, ehe die Gestaltungsvorlagen festgelegt w erden: verschiedene Überschriftenvarianten, m ehrspaltige Texte, Funktionstabellen über m ehrere Spalten sow ie unterschiedliche Bilddim ensionen. Um die Tem plates realistisch zu gestalten, können „Dum m y-Bilder“ für noch unfertige Gestaltungselem ente eingesetzt w erden.

 Ränder Wie sie mit Dream-Templates arbeiten, lesen Sie im Kapitel Elemente und Vorlagen auf Seite 121.

Eine HTML-Seite w ird von verschiedenen Brow sern unterschiedlich dargestellt. So benutzt jeder Brow ser andere Koordinaten für den Abstand zw ischen der oberen linken Ecke der HTML-Seite und dem Brow serfenster (offset ). Dies kann sehr hinderlich sein, w enn pixelgenaues Fluchten von Vorder- und Hintergrundgrafik erw ünscht ist. Dream w eaver 4 bietet Ihnen jetzt erstm als die Möglichkeit, diesen Offset bequem im Fenster SEITENEIGENSCHAFTEN (M ODIFIZIEREN: SEITENEIGENSCHAFTEN) einzustellen.

 Tabellenaufbau

M ehr zu Hintergrundbildern und -farben in Tabellen auch im Kapitel Image auf Seite 195.

Mit dem geladenen Tracing-Bild w erden jetzt pixelgenaue Tabellen in die Seite eingezogen, die m it blind.gif (shim s) als Platzhaltern positioniert w erden. In den verschachtelten Tabellen können zur besseren Unterscheidung auch yellow .gif und blue3.gif eingesetzt w erden. Bevor w ir uns der nächsten Funktion zuw enden, folgen zusam m enfassend einige Grundregeln für das Layouten m it Tabellen:  Vereinfachen Sie Ihren Entw urf, versuchen Sie einem Gestaltungsraster zu folgen – w eniger ist m eist m ehr.  Denken Sie daran, dass jede w eitere Spalte und Zeile einer Tabelle zusätzliche Ladezeit bedeutet.  Benutzen Sie – w enn es Ihr Layout erlaubt – dynam ische Tabellen, die sich der Bildschirm breite anpassen.  Verm eiden Sie die unnötige Verschachtelung von Tabellen. Drei Verschachtelungsstufen sind das Maxim um . Insbesondere ältere Netscape Brow ser haben m it starker Verschachtelung Problem e.  Sie sind flexibler m it Ihrem Layout, w enn Sie Tabellen (oder Zeilen) untereinander anlegen, anstatt Sie ineinander zu verschachteln.  Wenn Sie ein w enig strukturiertes, eher chaotisches Layout haben, benutzen Sie Ebenen (CSS layers) statt Tabellen. Dam it sind Sie zw ar nicht m ehr unbedingt abw ärtskom patibel, dafür haben Sie aber sehr viel geringere Datenm engen. In unserem Beispiel hat das Tabellen-Layout 12.032 Byte, das Ebenenlayout hingegen nur 2.173 Byte.  Überprüfen Sie den Code grundsätzlich noch einm al. Nehm en Sie überflüssige Tags von Hand heraus (w idth, height etc.).

Layouttabellen



163

Das komplette Layout. In die Tabelle wurde ein Hintergrundbild eingefügt – die gefiederten grauen Streifen am linken Rand. Browser behandeln die Darstellung von Hintergrundbildern in Tabellen unterschiedlich: Netscape Navigator wiederholt das Hintergrundbild in jeder Zelle, unabhängig davon, ob das Bild der Tabelle, der Reihe oder der einzelnen Zelle zugeordnet wurde. Einen Workaround hierzu finden Sie in der Beispieldatei 044_background_images.html

Die fertige Seite im Browser  betrachtet. Um die eigentliche Seite herum befindet sich ein dynamischer grauer Rahmen, der sich der Fenstergröße anpasst. M ehr dazu erfahren Sie in der Beispieldatei 044_dynamic_tables1.html.

Layouttabellen Ein bereits lange erw artetes Feature, w elches andere Program m e w ie z.B GoLive schon vor Jahren anbieten konnten, sind Layouttabellen (layout tables). Jedoch ist – m it andereren vergleichbaren Tabellen- und Layouttools verglichen – der von Dream w eaver generierte Code viel schlanker und besser optim iert. Layouttabellen erm öglichen ein freies und spontanes Arbeiten m it Tabellen. Dies dürfte vielen kreativen Designern, die vielleicht eben erst ins Webdesign eingestiegen sind, den Weg zur Seitengestaltung m it Tabellen ebnen. Auch Designer m it eher planerischem Vorgehen haben m it Layouttabellen jederzeit die num erische Kontrolle über die Dim ensionen der Tabellen und Zellen. Da diese neue Funktion ein sehr elegantes und unbeschw ertes Arbeiten im Entw urfsm odus – also an der Oberfläche – erlaubt, halte ich es für w ichtig, dass Sie den Code hinter den erzeugten Tabellenstrukturen verstehen lernen. Sonst kann es passieren, dass Sie später auf Ihrer Seite etliche Kilobyte überflüssigen Code „herum schleppen“.

164

Tabellen

Wenn Sie also Seiten produzieren w ollen, die höchsten Ansprüchen in Puncto Codeoptim ierung, Replizierbarkeit und Flexibilität im Layout genügen sollen, w erden Sie nicht um hinkom m en, den Code der erzeugten Tabellen zu überprüfen und eventuell von Hand nachzubessern. Dies gilt insbesondere, w enn Sie das erstellte Layout in einer Vorlage einsetzen w ollen, die zig-, hundert- oder gar tausendfach vervielfältigt w ird. 

Wenn Sie das erste M al den Layoutmodus benutzen, gibt Ihnen Dreamweaver in einem eigenen Fenster eine kleine Einführung für den Umgang mit Layouttabellen und -zellen.



Folgende Aufforderung erhalten Sie, wenn Sie versuchen, eine Layouttabelle oder -zelle von einer feste Breite auf eine automatisch gestreckte Breite zu definieren. Sie können dann wählen, wie Sie mit einem Platzhalterbild (blind-gif) umgehen wollen.

 In den Voreinstellungen für die Layoutansicht können Sie definieren, wie Platzhalterbilder eingesetzt werden. Für jede definierte Site können Sie ein bereits vorliegendes transparentes GIF suchen und zuweisen oder neu erstellen lassen. Auch die M arkierungsfarben für die einzelnen Layoutelemente setzen Sie hier.

Im unteren Teil der Objektepalette finden Sie die Schaltflächen  der Layoutansicht. Klicken Sie die Schaltfläche“ Layouttabelle zeichnen“. Ziehen Sie einfach mit dem Cursor eine Tabelle in beliebiger Größe auf (1). Dann können Sie die Dimensionen der Tabelle mit den Anfassern (handles) weiter modifizieren (1–3).

Layouttabellen

165

 Arbeiten mit Layouttabellen Wenn Sie das erste Mal in den Layoutm odus (OBJEKTE-PALETTE: ANSICHT) schalten, gibt Ihnen Dream w eaver in einem Fenster die erste Hilfestellung. Je nachdem , ob Sie eine Layouttabelle oder Layoutzelle zeichnen w ollen, w ählen Sie das entsprechende Icon (OBJEKTE-PALETTE: LAYOUT). Beginnen Sie m it dem Zeichnen einer Tabelle (rechtes Icon). Ziehen Sie die Tabelle m it dem Cursor direkt im Dokum entfenster auf. Die Tabelle w ird durch einen grünen Rahm en m it einem grünen Reiter (Register, Tabulator) oben links angezeigt. Der Reiter ist defaultm äßig aktiviert. Wollen Sie es abschalten, w ählen Sie 

Am Kopf jeder Spalte können Sie durch ein Klicken auf das Dreieck neben dem angezeigten Wert der Spaltenbreite ein Popup-M enü aufrufen, indem Sie die Einstellungen der einzelnen Spalte verändern können.



Im Kopf der Layouttabelle werden die vier M odi der Tabellenspalte grafisch und numerisch angezeigt. Absolute Spaltenbreite in Pixel, relative Spaltenbreite in Prozent und Pixel, absolute Spaltenbreite in Pixel mit eingesetztem Platzhalterbild und automatisch gestreckte Spaltenbreite. Siehe auch Beispieldatei 044_layouttable5a_01.html.

Die vier Abbildungen zeigen  das unterschiedliche Verhaltender Tabelle, je nachdem ob Sie mit festen oder automatisch gestreckten Tabellen und Tabellenzellen arbeiten. Eingeblendet ist auch der Eigenschafteninspektor, in dem Sie die jeweiligen Einstellungen ablesen können. Die blaue Linie zeigt die feste Gesamtbreite der Tabelle an. Die rote Linie mit den gelben Dreiecken macht deutlich, dass die Tabelle je nach verfügbarer Fenstergröße verbreitert wird.

166

Tabellen

ANSICHT: TABELLENANSICHT: TABULATOREN FÜR LAYOUTTABELLE ANZEIGEN. In der Mitte des Tabellenkopfes w ird die Breite der Tabelle in Pixel angezeigt. Hinter dem grünen Dreieck verbirgt sich ein Popup-Menü, m it dem Sie die Tabelle bearbeiten können:  SPALTE AUTOMATISCH STRECKEN setzt den absoluten Wert der Spalte auf den relativen Wert von 100%: Die Spalte w ird dynam isch und passt sich im m er der Breite des Brow serfensters an.  PLATZHALTERBILD HINZUFÜGEN fügt der jew eiligen Zelle als Platzhalterbild ein transparentes GIF (shim ) hinzu. Sie können ein bereits existierendes w ählen oder von Dream w eaver eines generieren lassen.  PLATZHALTERBILD ENTFERNEN, bzw . ALLE PLATZHALTERBILDER ENTFERNEN  ZELLENHÖHEN ZURÜCKSETZEN: Wenn Sie die Tabelle beim Zeichnen aufziehen, bekom m t sie autom atisch die gezeichnete Höhe absolut zugew iesen. Wollen Sie jedoch, dass sich die Tabelle in der Höhe dynam isch (autom atisch) verhält, w ählen Sie diesen Befehl.  ZELLENBREITE ANGLEICHEN: Hierbei w erden im Tabellenkopf zw ei unterschiedliche Werte der Zellendim ension angezeigt. Dies ist z.B. der Fall, w enn im Code ein Prozentw ert definiert w urde. Dann w ird der Prozentw ert und der absolute Wert angezeigt. Mit diesem Befehl w ird die tatsächliche Breite m it der angegebenen abgeglichen, aus Prozent (relativ) w erden Pixel (absolut).

 Arbeiten mit Layoutzellen Jetzt zeichen Sie m it dem linken Icon eine Tabellenzelle. Wenn Sie nicht bereits eine Tabelle in der Seite stehen haben, erzeugt dieses Werkzeug autom atisch die zur Zelle gehörende Tabelle. Sie bew egen die Layoutzelle innerhalb der Tabelle, indem Sie einfach den blauen Rand anfassen. Auch m it den Cursortasten lässt sich eine Zelle oder verschachtelte Tabelle pixelgenau verschieben. Zum Verändern der Zellengröße benutzen Sie die Anfasser am unteren und rechten Rand sow ie an der Ecke. Wenn Sie m ehrere Zellen – oder auch Tabellen – nacheinander anlegen w ollen, halten Sie beim Zeichnen die BEFEHLSTASTE gedrückt. Die w eiteren Zellen, die Sie in die Tabellen einziehen, haben die Eigenschaft, an bereits vorhandene Zellen zu springen. Wenn Sie dieses Einrasten (snap to grid ) unterdrücken w ollen, drücken Sie beim Zeichnen die (SHIFT)-TASTE. Wollen Sie eine Tabelle löschen, m arkieren Sie diese und drücken die BACKSPACETASTE. Solange Sie im Layoutm odus arbeiten (grüner Tabellenrahm en), können Sie nur innerhalb der aktiven Tabelle arbeiten. Sie können diese Tabelle w eder kopieren, noch ausschneiden oder einfügen. Wählen Sie für diese Operationen die Standardansicht. Wenn Sie bereits eine Tabelle in der Standardansicht angelegt haben und zum w eiteren Arbeiten in die Layoutansicht w echseln, löschen Sie am besten die nicht benötigten leeren Layoutzellen. Sie bekom m en nach dem Löschen des non-breaking space ( ) eine graue Hintergrundfarbe.

Layouttabellen

167

Sie können im Layoutm odus auch Tabellen bearbeiten, die bereits m it Inhalten gefüllt sind – oder verschachtelte Tabellen. Für verschachtelte Tabellen gelten die gleichen Techniken w ie für Zellen. Wenn Sie im Zellenmodus arbeiten, klicken Sie die Schaltfläche  „Tabellenzelle zeichnen“ in der Objektepalette. Die Tabelle wird mit der ersten Zelle generiert. Weitere Zellen können dann innerhalb der Tabelle gezeichnet werden. Inaktive Zellen haben eine blauen gestrichelten Rahmen. Wenn Sie mit dem Cursor über den Rand einer Layoutzelle gehen, wird er rot. Aktivierte Zellen haben einen blauen Rahmen mit Anfassern. Sie können die einzelnen Dimensionen der Zelle mit den Anfassern verändern, oder auch die gesamte Zelle innerhalb der Tabelle verschieben, indem Sie den blauen Rand anfassen.



Sie können mehrere Layouttabellen ineinander verschachteln. Es ist jedoch möglich, innere Tabellen über die Begrenzug der sie umgebenden Tabelle zu ziehen.



Hier wurde eine sehr komplexe (chaotische) Layouttabelle angelegt. Bei solchen Tabellen wächst das Datenvolumen schnell enorm an. Dreamweaver wird mit der Anzeige des Layoutmodus sehr schleppend. Oben die Layout- und Standardansichten der Tabelle 044_layouttable4a.html. Unten haben wir das gleiche Layout – statt als Tabelle – mit Ebenen angelegt und dabei 80% Code eingespart.

168

Tabellen

 Bildtabellen Unsichtbare Elemente auszuschalten, hat keinen Einfluss auf die Darstellung der Seite im Layoutmodus. Wenn Sie die Seite neutral betrachten wollen, müssen Sie in den normalen Tabellenmodus in der Entwurfsansicht zurückkehren.

Mitunter m achen der Seitenaufbau, die Navigation und die Ladezeiten es notw endig, zusam m enhängende Bildflächen in einzelne Teile zu zerlegen. Tabellen bieten eine sehr sichere Form , um diese Bildsegm ente (slices) zusam m enzuhalten. Nicht im m er ist der Einsatz von Tabellen notw endig, da Bilder – w enn sie ohne Leerzeichen im Code eingesetzt w erden – sich lückenlos aneinander reihen. Problem e kann es geben, w enn die Bilder in m ehreren Reihen untereinander stehen. Da treten schon m al von Brow ser zu Brow ser unterschiedliche Darstellungen auf. Abgesehen davon w ird im Code schnell versehentlich ein Leerzeichen zu viel getippt und schon gerät das Ganze außer Kontrolle. Eine w ichtige Rolle bei der Segm entierung von Bildtabellen spielt daher die Referenzzeile.

 Referenzzeile Wie Sie Bilder mit den entsprechenden Tools wie Photoshop und Fireworks automatisch zu segmentierten Tabellen (sliced tables) wandeln, erfahren Sie im Kapitel Bildtechniken auf Seite 213.

Die Referenzzeile  bestimmt die Spaltenbreite einer Tabelle, in der Zellen über mehrere Spalte spannen (colspan). Ohne die Referenzeile würde die Tabelle auseinander fallen. Analog zu Referenzzeilen gibt es Referenzspalten, die die Zellenhöhen definieren.

Wichtig ist das Prinzip der Referenzzeile zu verstehen. Da der Brow ser die Tabelle von links oben nach rechts unten Zeile für Zeile liest, kann er auch nur das abbilden, w as er „sieht“. Steht in der ersten Zeile bereits ein COLSPAN, erw artet er, w eiter unten in der Tabelle die dazugehörigen Referenzzellen zu finden, w oraus er das Gesam tbild der Tabelle ableiten kann. Der Fehler, diese Referenzinform ationen zu unterschlagen, tritt m eist beim m anuellen Tabellenbauen auf, m it dem Resultat, dass die Tabelle auseinander reißt. Was dagegen getan w erden kann, sehen Sie im folgenden Beispiel:  Wir erstellen eine kom plexe Tabelle m it fünf Zeilen und fünf Spalten sow ie m ehreren COLSPANs. Links sehen Sie die Darstellung in Dream w eaver, rechts Netscape Navigtor 4.5.  Die gleiche Tabelle, nach dem Entfernen der letzten Zeile – die Referenzzeile ist abhanden gekom m en. Die Tabelle bricht nach rechts aus.  Jetzt haben w ir die Referenzzeile in die erste Zeile gesetzt, dort erfüllt sie ihre Funktion am besten.  Die gleiche Zeile – jedoch in jeder Zelle m it einem 1 Pixel hohen und 40 Pixel breiten blind.gif gefüllt. So haben w ir die nötige Referenz, ohne m ehr als ein Pixel an Höhe zu opfern. Das Gleiche gilt im Prinzip auch beim Arbeiten m it ROWSPAN. Deshalb kann es sinnvoll sein, „unsichtbare“ Referenzzeilen und -spalten von vornherein im Layout vorzusehen. Sie können darüber hinaus als Spaltenzw ischenräum e und Randm argen einen nützlichen Dienst erw eisen.

Ebenen in Tabellen konvertieren – und zurück

Ebenen in Tabellen konvertieren – und zurück Dream w eaver besitzt ein w eiteres starkes Werkzeug zum Bearbeiten von Tabellen: das Um w andeln von Ebenen (layer) in Tabellen und w ieder zurück in Ebenen. Für den frei arbeitenden Webdesigner ist dies eine große Hilfe, da er nicht im Korsett der Tabellen denken und arbeiten m uss, sondern die Gestaltungsm öglichkeiten im Layout durch freies Positionieren der Elem ente voll ausschöpfen kann. Dies ist auch sinnvoll, w enn m an sich den Workflow bei der Gestaltung von Webseiten anschaut:  Der Webdesigner erhält oft eine Vorlage, deren Elem ente er in einem Layoutund/ oder Bildbearbeitungsprogram m für das Webdesign vorbereitet.  Die Layoutvorlage w ird dann als Tracing-Bild in Dream w eaver eingefügt.  Die einzelnen Elem ente w erden ohne Überlappung in separate Ebenen gesetzt.  Dann w erden die Ebenen in Tabellen konvertiert (M ODIFIZIEREN: KONVERTIEREN: EBENEN IN TABELLE… ).  Jetzt ist die Seite kom patibel für Brow ser der dritten Generation.  Nachdem der Auftraggeber seine Änderungsw ünsche angebracht hat, w ird die Seite w ieder m it einem einzigen Befehl (M ODIFIZIEREN: KONVERTIEREN: TABELLEN IN EBENEN… ) in Ebenen um gew andelt. Diese Prozesse können beliebig oft angew endet w erden, ohne dass das Layout an Präzision einbüßt – sagt das Handbuch.

table8b.html

 Grenzen der Konvertierung Bei einem Konvertierungstest zeigen sich jedoch Ungenauigkeiten, die im Bereich von m ehreren Pixeln liegen, und deren Ursache nicht ganz klar ist. Ich habe eine m it Dream w eaver generierte Tabellendatei zw ischen Tabellen und Ebenen hin- und hergew andelt und die Ausgangsdatei test01.htm l und das Endergebnis test05.htm l im Code verglichen: nonm atching.txt.  test01.htm l: Tabellen  test02.htm l: Tabellen in Ebenen konvertieren  test03.htm l: Ebenen in Tabellen konvertieren  test04.htm l: Tabellen in Ebenen konvertieren  test05.htm l: Ebenen in Tabellen konvertieren Von Nachteil ist außerdem , dass ein etw as unübersichtlicher Code entsteht, der sich von Hand schw erer editieren lässt und vor allem w esentlich länger ist. Die konvertierten Dateien im Vergleich zeigen, dass die von Hand entw ickelten Seiten von der Datenm enge her am besten abschneiden:

Tabellen versus Ebenen: ein Vergleich Dateiname

Art

Datenmenge

Vergleichswert

table9a.html

von Hand gebaute Tabelle

13,9 Kbyte

100%

table9b.html

umgewandelt in Ebenen (54 Ebenen)

15,9 Kbyte

114%

table9c.html

zurückgewandelt in Tabellen (13 Platzhalter-GIFs)

20,9 Kbyte

150%

table9d.html

von Hand optimiert

18,3 Kbyte

131%

Diese Dateien wurden noch mit Dreamweaver 3 umgewandelt.

169

170

Tabellen

 Konvertierung von Tabellen in Ebenen Die Testdateien sowie alle Beispieldateien zu diesem Kapitel finden Sie auf der CDROM : examples/ 044table table9a.html

In unserem Beispiel haben w ir eine andere Ausgangsdatei verw endet und eine konventionell von Hand erstellte Seite m it Tabellenlayout in Ebenen um gew andelt. Die Seite w ird in Dream w eaver geladen und dann m it dem Befehl M ODIFIZIEREN: KONVERTIEREN: TABELLEN IN EBENEN… um gew andelt. Für die Um w andlung stehen m ehrere Optionen zur Verfügung, die eine zusätzliche Layoutkontrolle beim Arbeiten m it Ebenen geben. Wenn eine pixelgenaue Konvertierung erw ünscht ist, ist es sinnvoll, die Ebenenüberlappung zu verhindern und das Einrasten am Gitternetz auszuschalten.

 Konvertierung von Ebenen in Tabellen

table9b.html

Die Um w andlung von Ebenen in Tabellen ist genauso einfach m it M ODIFIZIEREN: KONVERTIEREN: EBENEN IN TABELLE… . Das Optionsm enü gibt uns eine Reihe von Einstellm öglichkeiten. Hier habe ich die w ichtigsten – HÖCHSTE GENAUIGKEIT in Kom bination m it DURCHSICHTIGE GIFS VERWENDEN – m arkiert. So sollte eine pixelgenaue Übersetzung gesichert sein. Interessant ist die Option KLEINSTE: LEERE ZELLEN AUSBLENDEN. Sie erm öglicht eine „ungefähre“ Layoutanpassung, deren Toleranz über den Pixelw ert bestim m t w ird. Leere Zellen, die kleiner als dieser Wert sind, w erden m it Nachbarzellen verbunden.



Die Konvertierung von Ebenen in Tabellen



Die Konvertierung von Tabellen in Ebenen

Ebenen in Tabellen konvertieren – und zurück

171

FRAMES Fram es w urden der Netzw elt erstm als m it der Einführung von Netscape 2.0 vorgestellt. Mit Fram es können Brow ser-Fenster in m ehrere Bereiche unterteilt w erden, in die – unabhängig voneinander – neue Dateien geladen w erden können. Dadurch lassen sich sehr interessante und kom plexe Webseiten erstellen. Beispielsw eise kann links im Brow ser-Fenster ein Navigationsbereich erstellt w erden, der im m er sichtbar ist. Wenn ein Besucher dann in diesem Bereich auf einen Link klickt, w erden die dazugehörigen Inhalte im Hauptfenster geladen. Mit Fram es bleibt die Navigation – auch w enn sich die Inhalte im Hauptfenster ändern oder gescrollt w erden – ständig im Zugriff des Benutzers. Der große Vorteil ist also, sow ohl Navigation als auch Content ständig im sichtbaren Bereich zu haben. Viele der neueren Websites verw enden Fram es nicht zuletzt deshalb, w eil m it ihnen aufw endige Updates verm ieden w erden können. Anders als die bisher in diesem Buch besprochenen Webseiten sind Seiten m it Fram es aus m ehreren Dokum enten zusam m engesetzt. Soll ein Punkt in der Navigation hinzugefügt w erden, m uss nur die Datei geändert w erden, in dem die Navigation gespeichert ist. Auf norm alen Webseiten hingegen m üsste das Navigationsm enü auf allen Seiten geändert w erden. Aus m ehreren Dokum enten Seiten zusam m enzusetzen, m ag zunächst kom pliziert klingen, doch so schw ierig ist es nicht.

Für Websites mit tiefen Verzeichnisstrukturen können Navigationselemente in Frames ein Vorteil sein. Besonders wenn die Navigation auf abhängige Objekte (Bilder, Scripte, etc.) zugreift, da bei relativer Adressierung immer dieselben Pfade benutzt werden.

 Komplexer Aufbau mit verschachtelten Frames. Eine typische Site der späten 90er Jahre: Klais Orgelbau (Beispiel 045frame/ klais_v16/ )

Bei der Unterteilung eines Brow ser-Fensters in zw ei Teilbereiche w erden drei Dateien benötigt: jew eils eine HTML-Datei für jeden Teilbereich (fram e) und eine w eitere HTML-Datei für das Fram eset. Es speichert die Inform ationen über die

172

Fram es

Anordnung der einzelnen Dateien, die Stärke und Farbe der Rahm en zw ischen den einzelnen Fram es und legt fest, ob die einzelnen Fram es Rollbalken erhalten.

Die Verschachtelung aufgelöst:  Das Frameset „fs_main.htm“ enthält die Framesets „fs_20.htm“ („oben“) und „fs_unten.html“. Das Frameset „fs_20.htm“ enthält die Frames „1“, „2“ und „3“, während das Frameset „fs_unten.html“ die Frames „4“, „5“ und „6“ enthält.

n am e

= ob e

n”

n am e

n am e

n am e

= 3”

n am e

= 6”

= 2”

= 1”

n” = unt e n am e

n am e =4 n am e

= 5”

”

Hier ein einfaches Fram eset: < htm l> < head> < title> Ein einfaches Fram eset< / title> < / head> < fram eset row s= "66,1*" fram eborder= "NO" border= "0" fram espacing= "0"> < fram e nam e= "topFram e" scrolling= "NO" noresize src= "top.htm l" > < fram e nam e= "m ainFram e" src= "content.htm l"> < / fram eset> < nofram es> < body bgcolor= "#FFFFFF"> Ihr Brow ser unterstuetzt keine Fram es! < / body> < / nofram es> < / htm l>

Fram es erstellen

173

Die Fram eset-Datei unterscheidet sich von gew öhnlichen HTML-Dateien nur durch das FRAMESET-Tag, w elches nach dem Head-Tag eingesetzt w ird. Die dazugehörigen Attribute bestim m en, aus w elchen Dateien die Seite zusam m engesetzt w ird: < fram eset row s= "66,1*" fram eborder= "NO" border= "0" fram espacing= "0">

beschreibt dabei die Aufteilung des großen Fensters und legt fest, dass die Rahm en unsichtbar sein sollen. < fram e nam e= "topFram e" scrolling= "NO" noresize src= "top.htm l">

benennt das erste Fram e und nennt die Quelle der zugehörigen Datei. Ferner w ird das Scrollen und Verschieben des Rahm ens (border) verhindert. Für jeden Fram e w ird eine Codezeile dieser Art benötigt. Der Quelltext der Fram es hat die Struktur einer norm alen HTML- Datei: < htm l> < head> < title> Fram e 1 (… )< / title> < / head> < body> Fram e 1 (… ) < / body> < / htm l>

Frames erstellen Erstellen Sie Fram es in einem – vorzugsw eise leeren – Dokum ent. Sow ie Sie das Dokum entfenster in zw ei Bereiche unterteilen, erstellt Dream w eaver autom atisch eine Fram eset-Datei. Sie haben drei Möglichkeiten dies zu tun:

 Vordefinierte Framesets Der einfachste Weg Fram es einzufügen, ist m it der neu in Dream w eaver 3 hinzugekom m enen Tafel FRAMES der Objektepalette. Um ein Fram eset zu erstellen, klicken Sie auf das Objekt, w elches Ihrer Vorstellung einer Seitenaufteilung nahe kom m t, oder ziehen Sie es in das Dokum entfenster. Teilen Sie ein Fenster, in dem sich bereits Inhalte befinden, w ird dieser in den Fram e verschoben, der im Icon blau m arkiert ist.



Im Popup-M enü in der Objektepalette finden Sie die Tafel Frames. Werden die Icons angeklickt,  wird das Dokument der Abbildung entsprechend geteilt. Der Inhalt des aktuellen Frames wird dabei in den im Icon blau gekennzeichneten Frame übertragen.

174

Fram es

 Frameset ändern Auch der Befehl FRAME TEILEN teilt Dokum ente in Fram es auf. Gehen Sie in der Menüleiste auf M ODIFIZIEREN: FRAMESET und w ählen Sie zw ischen FRAME LINKS TEILEN, FRAME RECHTS TEILEN, FRAME OBEN TEILEN und FRAME UNTEN TEILEN. FRAME LINKS TEILEN teilt das Fenster durch einen w aagerechten Balken in zw ei Fram es, w ährend der Befehl FRAME OBEN TEILEN einen horizontalen Trennbalken erzeugt. Zugegeben, zunächst scheinen FRAME OBEN TEILEN und FRAME UNTEN TEILEN den gleichen Effekt zu haben. Wenn Sie allerdings ein bereits m it Inhalt gefülltes Fenster teilen, zeigt sich der Unterschied: Bei der Wahl von FRAME OBEN TEILEN w ird der neue Fram e über dem alten Fram e (m it Inhalt) platziert, bei FRAME UNTEN TEILEN w ird der neue Fram e unter dem Inhalt erstellt. Entsprechendes gilt für FRAME LINKS TEILEN und FRAME RECHTS TEILEN.

 Frameset ziehen Schließlich können Sie Fram es auch durch Ziehen (dragging ) erstellen: Wählen Sie hierzu zunächst ANSICHT: VISUELLE HILFSMITTEL: FRAME-RAHMEN, w odurch um den Inhalt des Dokum ents eine w eitere graue Um randung gelegt w ird. Halten Sie die OPTIONSTASTE gedrückt und zeigen Sie so auf diese Linie, dass sich der Mauszeiger in einen Doppelpfeil w andelt. Das Dokum ent w ird unterteilt, w enn Sie eine der Linien m it der Maus an die gew ünschte Position ziehen. Um gleichzeitig vier Fram es zu erstellen, ziehen Sie den Cursor bei gedrückter OPTIONSTASTE aus einer der vier Ecken heraus. Sie können später diese Fram es neu positionieren, indem Sie diese m it GEDRÜCKTER M AUSTASTE (ohne OPTIONSTASTE) an den Schnitt- bzw . Kreuzungspunkten fassen und verschieben. Vorgehensweise zur Erstellung von Frames: 1. Dokument aufteilen 2. Frames mit Inhalt füllen 3. Größe und Aufteilung der Frames bestimmen, entweder durch Dragging oder in den Frameset-Eigenschaften 4. Einstellung der Rahmeneigenschaften



Fram e im Fram e

175

Frame im Frame  Dokum ente können theoretisch unendlich oft geteilt w erden. So w ie Dream w eaver verschachtelte Tabellen zulässt, können auch verschachtelte Fram es (nested fram es) erstellt w erden. Diese w erden auf die gleiche Vorgehensw eise erzeugt, w ie oben bei den einfachen Unterteilungen beschrieben. Vorhandene Fram es w erden dabei erneut unterteilt.  Es besteht jedoch besonders bei älteren Brow sern die Gefahr, dass sie schnell überfordert sind. Neuere Brow ser (beispielsw eise Com m unicator 4.6) können hingegen auch m ehr als 25 Fram es problem los verarbeiten.  Viel größer ist das Problem bei Dream w eaver selbst: Je m ehr Fram es, desto eher scheint das Program m abzustürzen. Wenn Sie einm al eine Site m it derart vielen Fram es erstellen, sollten Sie nach Beendigung der Einstellungen im Fram eset jedes Fram e einzeln öffnen und extern bearbeiten. Speichern Sie dabei häufig!  Es stellt sich an dieser Stelle allerdings die Frage, w arum m an so viele – auch verschachtelte Fram es – erstellen sollte. In den Fällen, w o es nur um das Layout geht, können Tabellen oder auch Ebenen die Funktionen von Fram es übernehm en.

Frames löschen Beim Löschen von Fram es geht der Inhalt verloren. Wenn Sie den Inhalt noch benötigen, sollten Sie ihn daher in ein anderes Fram e oder in ein neues Fenster übertragen. Markieren Sie dazu alle zu kopierenden Objekte und schieben Sie diese an die neue Stelle (Drag & Drop). Danach kann der Rahm en gelöscht w erden, indem er entw eder in den Randbereich oder auf einen anderen Rahm en gezogen w ird.

Frame-Inspektor Viele Fram es bedeuten auch viele Dateien, so dass die Arbeit auch für erfahrene Program m ierer schnell unübersichtlich w erden kann. Der Fram e-Inspektor ist das Dream w eaver-Tool zum schnellen und gezielten Ausw ählen einzelner Fram es oder eines ganzen Fram esets. Er lässt sich durch FENSTER: FRAMES oder SHIFT + F2 aufrufen. Der Fram e-Inspektor besteht aus einem kleinen Übersichtsfenster, in dem die Fram es in ihrer Anordnung und m it ihren Nam en anzeigt w erden. Sie können dort (oder – bei zusätzlich gedrückter OPTIONS- und SHIFT-TASTE – auch direkt im Dokum entfenster) einzelne Fram es ausw ählen. Der gew ählte Fram e w ird durch eine kleine gepunktete Linie hervorgehoben. Gleichzeitig w erden seine Eigenschaften im Eigenschafteninspektor angezeigt. Das Fram eset lässt sich ähnlich ausw ählen: Klicken Sie entw eder im Dokum entfenster auf den sichtbaren Rand des Fram esets – w enn dies nicht klappt, können Sie das Fram eset auch im Tag-Selektor ausw ählen – oder klicken Sie im Fram e-Inspek-



Der Frame-Inspektor zeigt alle verwendeten Frames übersichtlich und mit Namen an.

176

Fram es

tor auf den äußeren Rand eines Fram esets. Es erscheint eine gepunktete Linie um alle dazugehörigen Fram es.

Frame-Seiten sichern Eine Seite aus Fram es besteht aus vielen einzelnen Dateien, die alle einzeln gespeichert w erden m üssen. Auch beim Speichern unterstützt uns der Fram e-Inspektor:  Klicken Sie im Fram e-Inspektor in einen zu speichernden Fram e.  Wählen Sie dann DATEI: SPEICHERN oder BEFEHLSTASTE + S.  Benennen Sie Ihre Datei sinnvoll, um später schnell erkennen zu können, um w elche Datei es sich handelt bzw . w elche Aufgabe sie erfüllt. Im Gegensatz zu den eher positionsorientierten Nam en für die Fram es ist es sinnvoll, die zu ladenden Dokum ente nach den Inhalten der Dokum ente zu benennen, zum Beispiel m enu.htm l oder intro.htm l. Für Fram esets hingegen em pfiehlt es sich, Dateinam en auszuw ählen, die die Datei als eine Steuerdatei kennzeichnen, zum Beispiel fs_start.htm l.  Gehen Sie sicher, dass der richtige Ordner ausgew ählt ist, w enn Sie schließlich auf SPEICHERN klicken.  Wiederholen Sie diese Schritte für jeden w eiteren Fram e.  Anschließend m uss noch das Fram eset gespeichert w erden. Wählen Sie dazu DATEI: FRAMESET SPEICHERN. Geben Sie dem Fram eset ebenfalls einen logischen Nam en. Ist einm al jede Datei unter eigenem Nam en gesichert, brauchen Sie nach Änderungen nicht w ieder jede Datei einzeln zu sichern. Viel einfacher ist es dann, w enn Sie jedesm al alles auf einm al speichern: DATEI: ALLE FRAMES SPEICHERN.

Eigenschaften des Framesets Mit den Einstellungen des Fram esets w ird das Erscheinungsbild und die Art, w ie das Fram eset die Fram es aufbaut, gesteuert. In den m eisten Fällen w ollen Sie eine anfangs grob aufgerissene Seite m it Fram es später präzise einstellen.

 Frames positionieren Größe und Position der Frames  werden im Eigenschafteninspektor für das Frameset eingestellt.

Eigenschaften des Fram esets

177

 Klicken Sie im Dokum entfenster auf den Rahm en zw ischen zw ei Fram es, um im Eigenschafteninspektor die Eigenschaften des Fram esets anzeigen zu lassen.  Die Angaben zur Größe und Position können in drei verschiedenen Einheiten eingegeben w erden:  PIXEL geben einem Fram e eine absolute Größe. Beispiel: Ein 80 Pixel breiter Fram e w ird im m er in dieser Breite dargestellt, unabhängig davon, w ie groß das Brow serFenster aufgezogen w ird. Dadurch w ird sichergestellt, dass ein Navigationsbereich in einem Fram e im m er vollständig angezeigt w ird.  PROZENT hingegen w eisen dem Fram e eine relative Größe des Brow ser-Fensters zu. Angenom m en, w ir haben drei Fram es: Fram e_1 (Breite = 50 Pixel), Fram e_2 (Breite = 40%) und Fram e_3 (Breite = 60%). In einem Brow ser-Fenster belegt Fram e_1 nun 50 Pixel Breite, w ährend der restliche Bereich (= 100%) zw ischen Fram e_2 (40%) und Fram e_3 (60%) aufgeteilt w ird.  RELATIV bedeutet, dass das Fenster relativ aufgeteilt w ird. Geben Sie beispielsw eise zw ei Fram es (Spalten) den relativen Wert 1, w ird der Bereich halbiert. Geben Sie hingegen einem Fram e den Wert 1, dem anderen den Wert 3, erhält der erste ein Viertel, der zw eite drei Viertel des Bereichs. Die Größe der Fram es m it prozentualen und relativen Werten hängt also von der Größe des Brow ser-Fensters ab, w ährend Fram es m it Pixelangaben, stets eine konstante Größe behalten. Beim Laden eines Fram esets in den Brow ser w erden zunächst Fram es m it absoluten, dann die prozentualen und am Ende die relativen Fram es berechnet. 

Links: Frames, die unabhängig von der Größe des Browser-Fensters immer gleich groß bleiben sollen, muss ein Wert in Pixel gegeben werden. Der Vergleich zeigt, dass Frame 1 (50 Pixel hoch) auch bei verschiedenen Browser-Größen gleich groß bleibt. Frame 2 füllt den Rest des Fensters.  Rechts: Im Vergleich dazu hat Frame 1 (15% hoch) in diesem Beispiel immer 15% der Größe des aktuellen Browser-Fensters. Wird das Fenster später aufgezogen, wächst der Frame mit.

Sie stellen die Zeilenhöhe und die Spaltenbreite folgenderm aßen ein:  Wählen Sie das zu verändernde Fram eset aus.  Öffnen Sie die erw eiterten Einstellungsm öglichkeiten im Eigenschafteninspektor.  Wählen Sie rechts bei ZEILEN/ SPALTEN den Fram e (oder die Zeile oder Spalte), dem Sie einen neuen Wert zuordnen w ollen. Wenn vier oder m ehr Fram es angezeigt w erden, können Sie Zeilen oder Spalten auch m it einem Klick auf die Reiter ausw ählen. Es w erden in dieser Ausw ahl im m er nur die Fram es des aktivierten Fram esets angezeigt. Wollen Sie anderen Fram es neue Werte zuw eisen, m üssen Sie zuerst das dazugehörige Fram eset m arkieren.

178

Fram es

 Geben Sie nun in das Eingabefeld für Zeilen bzw . Spalten einen Wert ein, und w ählen Sie im Popup-Menü daneben zw ischen PIXEL und RELATIV.  Wiederholen Sie diese Schritte für alle anderen Fram es, denen Sie einen Wert zuw eisen w ollen.

 Erscheinungsbild der Rahmen Rahmenbreite und Rahmenfarbe werden bisher nur von Internet Explorer unterstützt. Die Farbintensität ist darüber hinaus von der Stärke der Rahmen abhängig. Weder Rahmenbreite noch Rahmenfarbe werden in Dreamweaver in WYSIWYG angezeigt.

In den Fram eset-Eigenschaften können außerdem Sichtbarkeit, Dicke und Farbe der Rahm en zw ischen den Dokum enten bestim m t w erden.  Ein Popup-Menü erlaubt verschiedene Ausw ahlen zur Sichtbarkeit der Rahm en. Dort kann zw ischen JA, NEIN und STANDARD gew ählt w erden. Letzteres benutzt die Voreinstellungen des Brow sers.  In der Textbox RAHMENBREITE kann die Stärke des Rahm ens in Pixelstärke eingestellt w erden.  RAHMENFARBE: Wählen Sie aus der Farbpalette eine Farbe aus oder geben Sie einen Hex-Code in das Feld TEXTFELD ein. Arbeiten Sie an einer Site, deren Rahm en im Brow ser letztendlich unsichtbar sind, können Sie die Rahm en in Dream w eaver trotzdem sichtbar schalten, ohne dass sie im Brow ser sichtbar w erden, und zw ar m it ANSICHT: VISUELLE HILFSMITTEL: FRAME-RAHMEN. Da Rahm en in der Seite zusätzlichen Platz beanspruchen, erschrecken Sie nicht, w enn Sie die Sichtbarkeit ein- und ausschalten und Ihr Design „zerfällt“. Dream w eaver rückt es bei einem refresh des Dokum entfensters w ieder zurecht.

Frame-Eigenschaften Fram e-Eigenschaften legen den Abstand vom Fram e-Rand zum Text fest, ob Besucher die Größe des Fram es nach Belieben verändern können und ob Fram es Rollbalken erhalten, w enn Ihr Inhalt nicht auf die Seite passt. Weiter lässt sich die Farbe und Sichtbarkeit der Rahm en einstellen. Sie blenden die Fram e-Eigenschaften ein, indem Sie in einem Dokum ent bei gedrückter ALT-TASTE (Window s) bzw . OPTIONS- + SHIFT-TASTEN (Mac) in ein Fram e klicken oder aber im Fram e-Inspektor in die Repräsentation eines Fram es klicken. In den Frame-Eigenschaften  können Ränder, Rollbalken und Veränderbarkeit der Größe von Frames geändert werden.

Inhalte einfügen

 Einstellungen für Rollbalken HTML erm öglicht es uns, für jedes Fram e eigene Einstellungen für die Rollbalken (scrollbars oder Bildlaufleisten ) zu treffen. Diese Einstellung w ird generell für ein Fram e vorgenom m en – also für horizontale und vertikale Balken. Im Popup-Menü ROLLEN können Sie zw ischen vier verschiedenen Einstellungen ausw ählen:  JA: Der Fram e hat im m er Rollbalken (unabhängig davon, ob sie benötigt w erden oder nicht).  NEIN: Der Fram e hat nie Rollbalken (selbst w enn Teile des Content außerhalb des Fram e liegen).  AUTO: Rollbalken schalten sich autom atisch an, w enn der Content der Seite größer als der Fram e ist.  STANDARD w ählt die Voreinstellung des Brow sers (m eist AUTO).

 Größenveränderbare Frames Norm alerw eise kann jeder Besucher die von Ihnen vorgegebenen Fram es nach Belieben aufziehen oder verkleinern. Mit dem Ausw ählen des Kontrollkästchen KEINE GRÖSSENÄNDERUNG können Sie dies verhindern. Dies ist beispielsw eise dann interessant, w enn Sie auf einer Seite ein bestim m tes Design erhalten w ollen, das nur in einem absoluten Rahm en funktioniert oder gut aussieht.

 Randbreite und Randhöhe Weiter können Sie die Räum e (m argins) zw ischen dem Inhalt und dem Rand definieren. Standardw erte sind 0 und 10.

Inhalte einfügen Nachdem Sie Ihre Fram es erstellt und angeordnet haben, w erden Sie sie m it Inhalten füllen w ollen. Dream w eaver bietet die Möglichkeit, Fram es intern oder extern zu bearbeiten. Am einfachsten ist es, w enn Sie den Inhalt in der gerade erstellten Fram esetDatei bearbeiten. Klicken Sie dazu einm al in den Fram e, den Sie m it Inhalt füllen m öchten, und geben Sie den Inhalt dann w ie gew ohnt direkt im Dokum entfenster ein. Sie behalten dabei die Übersicht zu den anderen Fram es und bekom m en eine Vorstellung davon, w ie alles zusam m en in einem Brow ser aussehen w ird. Sie haben jedoch auch die Möglichkeit, den Inhalt eines Dokum ents in einem eigenen Fenster zu editieren. Später können Sie es dann in ein Fram eset einbinden:

179

180

Fram es

 Öffnen Sie nach Fertigstellung des einzubauenden Dokum ents das Fram eset.  Klicken Sie bei gleichzeitig gedrückter ALT-TASTE (Window s) bzw . OPTIONSTASTE + SHIFT (Mac) in den Fram e, in dem die eben bearbeitete Datei „eingesetzt“ w erden soll. Das Fenster FRAME-EIGENSCHAFTEN w ird eingeblendet. In QUELLE w ird der aktuelle Pfad des bisherigen Fram e angezeigt. Sie können dort direkt die Adresse des Doku-

m ents eintragen oder auf den Ordner rechts daneben klicken und eine Datei ausw ählen. Lokale Seiten w erden sofort im entsprechenden Fram e angezeigt, w ährend eine entfernte Datei durch einen Platzhalter ersetzt w ird.

Links und Targets Fehlende Targets  sind eine häufige Fehlerquelle: Bei falsch gesetzten Targets werden Frames nicht richtig geladen. Unter Umständen kann Inhalt zweimal in einem Frameset erscheinen.

Links und Targets

Die m eisten Fehler im Zusam m enhang m it Fram es entstehen durch falsch zugew iesene Links. Zum Beispiel kann es vorkom m en, dass Dokum ente in den Navigations-Fram e geladen w erden und nicht w ie gew ünscht in den Inhalts-Fram e, oder das Fram eset w ird erneut in das Inhalts-Fram e geladen, w odurch die Navigation zw eim al auf einer Seite zu sehen ist. Seien Sie daher bei Verw endung von Links in Verbindung m it Fram es besonders vorsichtig und testen Sie Ihre Seiten gründlich. Ein Link von einer Seite ohne Fram es auf eine Seite m it Fram es m uss im m er auf ein Fram eset zeigen, dam it dieses die einzelnen Dateien in die Fram es laden kann. Ein Link innerhalb eines Fram esets ist naturgem äß etw as kom plizierter. Zum Beispiel m uss neben dem Zieldokum ent das Zielfenster (target ) beschrieben w erden, um einen Link im Navigations-Fram e zum Inhalts-Fram e zeigen zu lassen, sonst w ürde das Zieldokum ent im aktuellen Fenster geladen w erden: < A HREF= "inform ation.htm l" TARGET= "content_fram e"> Inform ationen< / A>

Das Attribut TARGET bestim m t dabei das Zielfenster. In diesem Beispiel w ird die Datei inform ation.htm l in den Fram e m it dem Nam en content_fram e geladen.

 Frames benennen Dam it Sie neue Dateien m it dem TARGET-Attribut auch in andere Fram es laden können, m uss jedem Fram e ein eigener Nam e zugew iesen w erden. Eine nützliche Hilfe dabei ist der Fram e-Inspektor (SHIFT + F2), m it dem Sie leicht überprüfen können, w elche Fram es noch keine Nam en haben. Verw enden Sie bei der Benennung Nam en, die das entsprechende Fram e gut beschreiben.  Klicken Sie bei gedrückter ALT-TASTE (Window s) bzw . OPTIONSTASTE + SHIFT (Mac) in den zu benennende Fram e, so dass die Fram e-Eigenschaften angezeigt w erden.  Geben Sie beschreibende Nam en für die Fram es ein. Gerne w ird ein Nam e nach Position oder Funktion des Fram es gew ählt, also z.B. oben_links oder nav_m enu. Schreiben Sie die Nam en als string – also ohne Leerzeichen. Wenn Sie Ihre Fram es m it den vordefinierten Fram esets der Objektepalette von Dream w eaver 3 erstellen, benennt das Program m die Fram es ihrer Position entsprechend.

 Targets verwenden Um einen Link auf ein bestim m tes Zielfram e zu lenken, setzen Sie im Eigenschafteninspektor die Verknüpfung w ie gew ohnt ein. Tragen Sie in das Eingabefenster bei TARGET den Nam en des Fram es ein, in dem die Datei geladen w erden soll. Im PopupMenü daneben finden Sie für den schnellen Zugriff neben den Nam en der benutzten Fram es auch die Standard-Targets:

181

182

Fram es

 _blank bew irkt, dass ein neues Brow ser-Fenster geöffnet w ird, im aktuellen Brow ser-Fenster aber alle Fram es unverändert bestehen bleiben. Dieses Target w ird häufig benutzt, um auf frem de Angebote zu verw eisen und den Besucher nicht von der eigenen Seite zu verlieren.  _parent öffnet das Dokum ent im übergeordneten Fram eset. Bei nur einem Fram eset ist dies m it _top identisch.

Nur Internet Explorer unterscheidet zwischen _top und _parent. Bei Netscape Navigator haben diese Targets denselben Effekt. Workaround: Verwenden Sie immer _top und verweisen Sie gegebenenfalls auf ein neues Frameset.

 _self ist die Standardeinstellung und bew irkt, dass sich die neue Seite im selben Fram e öffnet, in dem der Link angeklickt w urde.  _top w ird verw endet, w enn alle Fram esets verlassen w erden sollen und die neue Datei nicht in einen der Fram es geladen w erden soll. Anstelle des aus m ehreren Fram es bestehenden Fram esets w ird nur eine Seite in das Fenster geladen oder aber dieser durch ein kom plett neues Fram eset ersetzt. Dem nach können w ir im m er nur einen Fram e aktualisieren. Mit Verhaltensw eisen können jedoch auch m ehrere Fram es gleichzeitig geladen w erden. Dream w eaver bietet im Zusam m enhang m it Fram es noch eine w eitere interessante Verhaltensw eise, die es erm öglicht, den Inhalt eines Fram es zu verändern, ohne dass dieses neu geladen w erden m uss.

Alternative Vorstellung Die Zahl derer, die heute Frameinkompatible Browser benutzen, scheint kaum weiter zu sinken. Auch für gute Platzierungen in Suchmaschinen ist es wichtig, eine alternative Site ohne Frames zu haben, denn noch immer kommen viele Roboter der Suchmaschinen bei Frames ins Schleudern und indizieren die Seite unzureichend.

Für einige ältere Brow ser, die noch keine Fram es verstehen, w ird in das Dokum ent, w elches das Fram eset enthält, ein NOFRAME-Tag geschrieben, w elches alternative Inhalte enthält, die auch ältere Brow ser anzeigen können.  Der HTML-Code eines NOFRAME-Tags sieht folgenderm aßen aus: < htm l> < head> < title> Enno Ladw ig | w w w.enno.net< / title> < / head> < fram eset> [… ] < / fram eset> < nofram es> < body bgcolor= "#FFFFFF"> Dies ist der Alternativinhalt von w w w.enno.net. Diese Seite verw endet eigentlich Fram es, bitte benutzen Sie einen aktuellen Brow ser. Danke! < / nofram es> < / htm l>

 Mit Dream w eaver w ird No-Fram es-Inhalt folgenderm aßen eingefügt: M ODIFIZIEREN: FRAMESET: NO-FRAMES INHALT BEARBEITEN. Im Dokum entfenster erscheint statt der Fram es eine No-Fram es-Ansicht. Hier können Sie jetzt Ihre alternativen Inhalte (Text,

Arbeiten m it Fram es

Tabellen, Bilder) einsetzen – alles HTML-2.0-kom patibel. Über M ODIFIZIEREN: FRAMESET: NO-FRAMES INHALT BEARBEITEN gelangen Sie w ieder zu der Fram e-Version zurück. Üblich ist es, den Besucher auf der No-Fram es-Seite aufzufordern, einen aktuellen Brow ser zu installieren. Freundlicher, aber w esentlich m ehr Aufw and bedeutet es jedoch, eine fram elose (fram eless) Version für ihn bereitzuhalten. Für eine bessere Platzierung in Suchm aschinen lohnt sich der Aufw and jedoch m eistens. Mit Verhaltensw eisen können Brow ser auf deren Version überprüft, und dann entsprechend der Brow ser-Kom patibilität unterschiedliche Seiten geladen w erden.

183

M ehr darüber lesen Sie im Kapitel Verhaltensweisen auf Seite 250.

 Frames und Suchmaschinen Bedenken Sie bei der Verw endung von Fram es, dass m anche Suchm aschinen Seiten m it Fram es nicht oder nicht richtig indizieren. Oft hakt es schon beim Fram eset. Wenn Sie auf gute Platzierungen in Suchm aschinen angew iesen sind, sollten Sie sich daher unbedingt überlegen, ob Sie ihre Site nicht auch ohne Fram es erstellen können. Andernfalls kann nur eine Alternativversion ohne Fram es gute Platzierungen erm öglichen.

Arbeiten mit Frames Sie w erden sicherlich Ihre eigene Weise entw ickelt haben, Ihre Arbeit zu organisieren und Ihre Dateien zu speichern. Trotzdem einige nützliche Hinw eise: Grundsätzlich ist es übersichtlicher, w enn Sie alle Dateien, die zu einem Fram eset gehören, in einem eigenen Ordner speichern, da Sie so leicht erkennen können, w elche Dateien zusam m engehören. Der Upload der Site w ird dadurch ebenfalls vereinfacht, da Sie einfach den ganzen Ordner hochladen und dadurch keine Datei vergessen.  Verw enden Sie relative Pfade. Zum einem w erden Ihre Pfade kürzer, zum anderen können Sie Ihre Site dam it auch offline darstellen.  Testen kann m an eine Website nie genug. Und gerade bei Fram es w erden oft peinliche Fehler gem acht, die sich durch Tests leicht verm eiden lassen. Vergessen Sie auch nach dem Upload nicht noch einen letzten Test zu m achen, da Dateien auch beim Hochladen beschädigt oder doch noch vergessen w orden sein können.  Wenn einm al die Fram es im Brow ser nicht w ie erw artet dargestellt w erden, oder die Darstellung ganz ausbleibt, starten Sie den Brow ser neu. Das hilft in den m eisten Fällen. Gerade w enn Sie am Fram eset herum basteln, kann sich der Brow ser m itunter nicht auf die neuen Einstellungen des Fram esets einrichten.

Heute beobachten wir einen zunehmenden Trend zu schlanken, framelosen Seiten. Auch die speziellen HTM LFormate für „handheld devices“ wie Organizer und Handy erfordern „glatte“ Seiten.

184

Form ulare

FORMULARE Wie auch in der Offline-Welt sind Form ulare im Internet nicht m ehr w egzudenken. Bereits die Stichw orteingaben bei Suchm aschinen beruhen auf dem Form ularprinzip. Auch Online-Datenbanken ließen sich ohne Form ulare nicht realisieren, da sie voraussetzen, dass Daten per Brow ser eingetragen w erden können. Kurzum , im m er dann, w enn Besucher die Möglichkeit haben sollen, ein Feedback abzugeben, kann dies m it Form ularen erm öglicht w erden. Im Zusam m enspiel m it Verhaltensw eisen können Form ulare auch dazu verw endet w erden, Navigationselem ente – w ie Sprungm enüs – zu erstellen.

Funktionsweise Form ulare sam m eln Inform ationen, die Besucher entw eder in Textfeldern eingeben oder durch Kontrollkästchen, Menüs oder Ähnlichem m arkieren können. Alle Eingaben w erden erst an den Server überm ittelt, w enn der Besucher den Befehl zum Abschicken gibt. Die Daten w erden entw eder per E-Mail zur m anuellen Verarbeitung verschickt oder an einen Server gesendet, der die Daten bearbeitet und entsprechende Inform ationen zurückschickt.

 Formularobjekte

 Ein Formular mit verschiedenen Formularobjekten im Netscape Navigator

Form ularobjekte (input-item ) sind die Felder und Knöpfe, auf die Besucher klicken bzw . in die sie Texte schreiben können. Die folgende Übersicht stellt alle Objekte zusam m en:  TEXTFELDER: Felder, die m it alphabetischen oder num erischen Inhalten gefüllt w erden können. Sie können zw ischen ein- und m ehrzeiligen Textfeldern w ählen.  KONTROLLKÄSTCHEN dienen der Ausw ahl eines oder m ehrerer Stichpunkte, die neben den Kontrollkästchen stehen – vergleichbar m it dem Abhaken auf Papierform ularen.  OPTIONSSCHALTER (radio-buttons) treten m indestens in Zw eiergruppen auf und erm öglichen die Wahl nur eines Feldes. Wird die Ausw ahl nachträglich geändert, erlischt der zuvor ausgew ählte Optionsschalter.  LISTEN erm öglichen die platzsparende Unterbringung m ehrerer Ausw ahlm öglichkeiten, von denen auch m ehrere Optionen ausgew ählt w erden können.  M ENÜ: Ein Popup-Menü, w elches die platzsparende Unterbringung m ehrerer Ausw ahlpunkte erm öglicht, aus denen nur einer gew ählt w erden kann.

Form ular erstellen

185

 SCHALTFLÄCHEN: Dies sind Schalter (oder Bilder), die Aktionen ausführen, w enn der Benutzer auf sie klickt. Mit den vordefinierten Schaltflächen lässt sich das Form ular abschicken oder alle Felder w ieder löschen.

 Name und Wert Wenn Form ularobjekte in ein Form ular eingefügt w erden (w ie im nächsten Abschnitt beschrieben), ist es w ichtig, dass jedem Objekt ein Nam e und Wert zugew iesen w ird, dam it das form ular-bearbeitende Program m auf dem Server alle Form ularobjekte erkennt. Zw ar benennt Dream w eaver jedes Objekt autom atisch (beispielsw eise „Checkbox1“), aber diese Nam ensgebung ist nicht sehr übersichtlich. Eigene Nam en können Sie in das entsprechende Textfeld links im Eigenschafteninspektor eingeben. Ebenso w ichtig ist es, jedem Feld einen Wert zuzuw eisen (Ausnahm e: Textfelder). Der Wert definiert den Inhalt eines Form ularobjektes. Dabei handelt es sich entw eder um einen von Ihnen benannten Wert (bei Kontrollkästchen, Optionsschaltern, Listen und Menüs) oder aber um den vom Besucher eingegebenen Text (bei dem Textfeld). Der Wert eines Form ularfeldes w ird ebenfalls im Eigenschafteninspektor eingegeben.



Namen und Wertzuweisungen bei Formularen. Beispiel Optionsschalter: Optionsschalter müssen den gleichen Namen erhalten, um in Gruppen zusammengefasst zu werden.

Formular erstellen In einem Beispielform ular, das w ir auf den folgenden Seiten erstellen w erden, können Besucher direkt im Webbrow ser eine Nachricht schreiben und einige Fragen beantw orten, die per E-Mail verschickt w erden sollen. 

Das Beispielformular im Dokumentfenster

186

Form ulare

 Formularrahmen

Die Objektepalette für  Formulare bietet schnellen Zugriff auf die wichtigsten Objekte.

Für die Erstellung von Form ularen m uss zunächst definiert w erden, w o der Form ularbereich erstellt w erden soll. Dies w ird m it der Begrenzung durch den Form ularrahm en erreicht:  Klicken Sie m it der Maus an die Stelle, an der das Form ular erstellt w erden soll.  Stellen Sie die Objektepalette in den Form ularm odus um , indem Sie in dieser auf das Popup-Menü klicken und FORMULARE ausw ählen. Die Tafel m it den Icons der Form ularknöpfe w ird angezeigt.  Klicken Sie dort auf FORMULAR EINFÜGEN (links oben). Sie können aus dem Menü auch EINFÜGEN: FORMULAR ausw ählen.  Im Dokum ent erscheint ein dünnes, rot gepunktetes Rechteck, der Form ularrahm en. Dieser ist nur im Dream w eaver-Dokum ent sichtbar (sofern ANSICHT: VISUELLE HILFSMITTEL: UNSICHTBARE ELEMENTE aktiviert ist), nicht aber im Brow ser. Innerhalb dieses Rahm ens w erden in w eiteren Schritten einige der bereits genannten Form ularobjekte eingefügt. Für unser Beispiel-Form ular benötigen w ir einige Textfelder, ein paar Optionsschalter und Kontrollkästchen sow ie die Schaltflächen zum Absenden des Form ulars.

 Textfelder Das erste Textfeld soll den Nam en des Besuchers abfragen, ein zw eites erm öglicht es, einen kurzen Kom m entar zu schreiben:  Klicken Sie im Dokum ent innerhalb des rot gepunkteten Rahm ens auf die Stelle, an der das Textfeld erstellt w erden soll.  Wählen Sie EINFÜGEN: FORMULAROBJEKTE: TEXTFELD oder klicken Sie in der Objektepalette auf das Icon für TEXTFELD EINFÜGEN. Im Eigenschafteninspektor  wird eingestellt, ob das Textfeld einoder mehrzeilig sein soll.

 Zunächst erscheint im Dokum ent ein einzeiliges Textfeld. Der Eigenschafteninspektor erm öglicht es, einige Einstellungen zu treffen:  Die Optionsschalter bestim m en, ob das Textfeld aus einer (input type = text ) oder m ehreren Zeilen (textarea ) besteht oder ob es für Kennw örter (input type = passw ord ) verw endet w erden soll. Bei Kennw örtern w erden alle Eingaben verdeckt dargestellt („•••“ beim Mac oder „***“ bei Window s).  Im Feld A NFANGSWERT kann ein Text eingegeben w erden, der bereits im Textfeld steht, w enn die Seite geladen w ird. Er kann einen Standardw ert definieren oder eine genaue Vorstellung über die erw ünschte Antw ortart geben.

Form ular erstellen

187

Darunter kann die Breite, bei m ehrzeiligen Textfeldern auch die Höhe des Textfeldes bestim m t w erden.  In dem Popup-Menü kann bei m ehrzeiligen Textfeldern eingestellt w erden, w ie Eingaben um gebrochen w erden sollen: STANDARD, AUS (Um bruch nur bei Zeilenschaltung), VIRTUELL (Um brüche sind nur im Brow ser sichtbar, w erden jedoch nicht an den Server übertragen) und PHYSISCH (stellt alle Um brüche im Brow ser dar, und überm ittelt sie an den Server). Erstellen Sie für unser Beispiel nacheinander ein einzeiliges (für den Nam en des Besuchers) und ein m ehrzeiliges Textfeld (für Kom m entare). 



Browserkompatible Textfelder: Stellen Sie im Feld Zeichenbreite die Wunschbreite für Netscape 4 (Windows) ein. Die Breite für Browser > 4.x wird per CSS-Inline-Style definiert. Dann fällt nur noch Netscape 4.x (M acintosh) aus dem Rahmen: Die Textfelder werden etwas kürzer.

 Versteckte Felder Versteckte Felder (hidden fields) erm öglichen es, Textfelder zu erstellen, die für den Besucher unsichtbare Inform ationen enthalten. Diese Felder können verw endet w erden, w enn Teile des Form ulars beim Absenden an den Server Inform ationen enthalten sollen, die der Besucher nicht verändern oder sehen soll: z.B. vordefinierten Suchabfragen. Oder es kann in versteckten Feldern die Versionsnum m er des Form ulars enthalten sein.  Wählen Sie EINFÜGEN: FORMULAROBJEKTE: VERSTECKTES FELD oder klicken Sie in der Objektepalette das Icon für VERSTECKTES FELD EINFÜGEN.

188

Form ulare

 Im Dream w eaver-Dokum ent erscheint – w enn unsichtbare Elem ente angeschaltet sind – m it ANSICHT: VISUELLE HILFSMITTEL: UNSICHTBARE ELEMENTE – ein Icon für ein verstecktes Feld. Im Brow ser sind diese Felder jedoch im m er unsichtbar. Der Eigenschafteninspektor  im M odus für versteckte Felder

 Geben Sie im Feld WERT des Eigenschafteninspektors den Inhalt des versteckten Textfeldes an.

 Kontrollkästchen In unserem Beispiel verw enden w ir Kontrollkästchen, um den Besucher zu fragen, ob er w eitere Inform ationen erhalten w ill. Das Kontrollkästchen ist im Beispiel beim Laden aktiviert. Es können auch m ehrere Kontrollkästchen verw endet w erden, aus denen m ehrere Optionen gleichzeitig ausgew ählt w erden können.  Wählen Sie eine Stelle innerhalb des Form ularrahm ens, an die die Kontrollkästchen eingefügt w erden sollen.  Wählen Sie EINFÜGEN: FORMULAROBJEKTE: KONTROLLKÄSTCHEN oder klicken Sie in der Objektepalette auf das Icon für KONTROLLKÄSTCHEN EINFÜGEN. Im Eigenschafteninspektor  für Kontrollkästchen kann unter anderem eingestellt werden, ob Kästchen aktiviert geladen werden sollen.

 Im Eigenschafteninspektor kann festgelegt w erden, ob das Kontrollkästchen beim Laden m arkiert ist. Dort m uss jedem Kontrollkästchen im Textfeld AKTIVIERTER WERT außerdem ein aussagekräftiger Wert zugeteilt w erden. Dieser zeichnet es bei der Überm ittlung der Daten aus, so dass bei der Ausw ertung der überm ittelten Inform ationen erkannt w ird, w elche Kästchen m arkiert w urden.  Wiederholen Sie diese Schritte für w eitere Kontrollkästchen.

 Optionsschalter Während Kontrollkästchen auf Internetseiten einzeln verw endet w erden können, treten Optionsschalter (radio-buttons) im m er in Gruppen auf. Sie lassen sich besonders gut für Ja/ Nein-Fragen verw enden, oder bei Fragen, bei denen nur eine Antw ort richtig ist.  Markieren Sie innerhalb des Form ularrahm ens die Stelle, an der die Optionsschalter erstellt w erden sollen.  Wählen Sie aus dem Menü EINFÜGEN: FORMULAROBJEKTE: OPTIONSSCHALTER, oder klicken Sie in der Objektepalette auf das Icon für OPTIONSSCHALTER EINFÜGEN.

Form ular erstellen

189

 Geben Sie Optionsschaltern einer Gruppe im Eigenschafteninspektor den gleichen Namen, aber verschiedene Werte.  Im Eigenschafteninspektor bestim m en Sie, ob dieser beim Laden aktiviert sein soll; vergessen Sie nicht, auch den Optionsschaltern im Textfeld AKTIVIERTER WERT einen Wert zuzuteilen.  Wiederholen Sie diese Schritte für m indestens einen w eiteren Optionsschalter. Wichtig ist, dass w eitere Optionsschalter der gleichen Gruppe denselben Nam en erhalten w ie der erste Optionsschalter. Verschiedene Werte unterscheiden Sie bei der Überm ittlung der Daten. Werden w eitere Optionsschaltergruppen erstellt, m üssen Sie darauf achten, dass jede Gruppe unterschiedliche Nam en erhält, da alle Optionsschalter sonst w ie eine Gruppe behandelt w erden. Durch die fehlerhafte Benennung der Optionsschaltergruppen gibt es sehr oft Problem e, die sich nur durch Tests im Brow ser sicher verm eiden lassen. Überprüfen Sie daher alle Möglichkeiten.

 Menü Das Popup-Menü erlaubt die platzsparende Unterbringung m ehrerer Ausw ahlm öglichkeiten. 

M enü und Liste teilen sich denselben Eigenschafteninspektor.

 Wählen Sie eine Stelle innerhalb des Form ularrahm ens, an die das Menü eingefügt w erden soll.  Durch die Wahl von EINFÜGEN: FORMULAROBJEKTE: LISTE/ M ENÜ oder durch einen Klick in der Objektepalette auf das Icon LISTE/ M ENÜ EINFÜGEN w ird im Dokum ent ein leeres Popup-Menü erstellt.  Im Eigenschafteninspektor kann zw ischen Menü und Liste unterschieden w erden, allerdings soll zunächst das Menü, später die Liste erklärt w erden. Alle w eiteren Einstellungen in den Eigenschaften können nur bei Listen gem acht

w erden. Für die Menüs ist nur das Eintragen der Menüpunkte von Bedeutung: Klicken Sie im Eigenschafteninspektor auf die Schaltfläche LISTENWERTE, um das Fenster zu öffnen, in dem Sie die Inhalte des Menüs eintragen.  Die ELEMENTBEZEICHNUNG beschreibt die Bezeichnung, unter der der Menüpunkt später im Menü erscheint, das zw eite Feld gibt den Wert an, w elcher überm ittelt w ird, w enn dieser Menüpunkt gew ählt w urde. Stim m en Elem entbezeichnung und Wert überein, m uss der Wert nicht extra definiert w erden. 

190

Form ulare

In diesem Fenster  werden die M enü- und Listenwerte eingegeben. Das Fenster lässt sich im Eigenschafteninspektor mit der Schaltfläche „Listenwerte“ öffnen.

Klicken Sie für w eitere Menüpunkte auf den Plusknopf und zum Löschen eines m arkierten Menüpunktes auf den Minusknopf. Soll die Menüreihenfolge verändert w erden, m üssen Sie einen Punkt in der Liste ausw ählen und diesen dann m it den Pfeilknöpfen nach oben oder unten bew egen. Diese Änderungen können auch später durchgeführt w erden, indem das Fenster LISTENWERTE neu geöffnet w ird.  Wenn Sie das Fenster LISTENWERTE schließen, erscheint das Menü etw as größer, um zu verdeutlichen, dass es m it Inhalt gefüllt w urde. Um die tatsächliche Anordnung zu sehen, m uss die Seite jedoch in einem Brow ser geladen w erden. 

 Liste Sie können auch eine Liste m it Ausw ahlpunkten erstellen, aus denen der Benutzer dann anders als beim Popup-Menü m ehrere Optionen ausw ählen kann. Gehen Sie zu der Erstellung einer Liste zunächst genauso vor w ie bei den PopupMenüs. Wählen Sie im Eigenschafteninspektor den Listenoptionsschalter, w om it einige w eitere Einstellungen m öglich sind:  Einstellung der Höhe des Feldes  Das Kontrollkästchen bestim m t, ob Besucher m ehrere Punkte gleichzeitig ausw ählen dürfen.  Markieren Sie den Listenpunkt, der beim Laden der Seite ausgew ählt sein soll.

 Schaltflächen Schaltflächen w erden benötigt, um Form ulare abzuschicken. Mit Hilfe von Verhaltensw eisen können die Schaltflächen auch für andere Aktionen verw endet w erden. Dream w eaver sieht für die Schaltfläche drei Aktionen vor:  ABSCHICKEN sendet das Form ular an eine vorgegebene Adresse.  ZURÜCKSETZEN löscht alle Eingaben des Besuchers.  KEINE: Die Schaltfläche hat keine Ausw irkung. Mit Verhaltensw eisen können der Schaltfläche jedoch Funktionen zugew iesen w erden.

Form ular erstellen

191

 Klicken Sie am Ende des Form ulars (innerhalb des Form ularrahm ens), um die Schaltflächen dort einzusetzen.  Wählen Sie EINFÜGEN: FORMULAROBJEKTE: SCHALTFLÄCHE oder klicken Sie in der Objektepalette auf das Icon für SCHALTFLÄCHE EINFÜGEN. 

Im Eigenschafteninspektor der Schaltflächen wird gewählt, welche Schaltfläche eingesetzt wird und wie diese beschriftet sein soll.

 Es erscheint eine Abschicken-Schaltfläche, die im Eigenschafteninspektor m it Optionsschaltern in andere Aktionen verändert w erden kann.  Die Standardbeschriftung der Schaltfläche ändern Sie im Textfeld BESCHRIFTUNG.

 Bildfeld Mit Bildfeldern können Sie langw eilige Standardschaltflächen durch selbst entw orfene Grafiken ersetzen. Diese Bildfelder können auch dazu verw endet w erden, um – ähnlich w ie bei Im agem aps – die Klickposition abzufragen.  Setzten Sie anstelle der Schaltflächen ein Bildfeld ein, indem Sie EINFÜGEN: FORMULAROBJEKTE: BILDFELD ausw ählen oder das Icon BILDFELD EINFÜGEN in der Objektepalette anklicken.  Wählen Sie aus dem Dialogfeld die Bilddatei aus. Klicken Sie auf OK.  Das gew ählte Bild erscheint anstelle der Verschicken-Schaltfläche im Dokum ent. Geben Sie im Eigenschafteninspektor nötige Inform ationen w ie den Nam en und einen alternativen Text im Alt-Textfeld an.

 Dateifeld Ich m öchte bereits an dieser Stelle auch auf die m it Textfeldern eng verw andten Dateifelder verw eisen. Diese bestehen aus einem einzeiligen Textfeld und einer Durchsuchen-Schaltfläche. Klickt ein Besucher darauf, erscheint das Dialogfeld DATEI ÖFFNEN, in dem er eine Datei ausw ählen kann, deren Pfad im Textfeld angezeigt w ird. Auf diese Weise w erden beispielsw eise bei freien E-Mail-Diensten Dateien an Mitteilungen gehängt. Sie erhalten die Durchsuchen-Schaltfläche, indem Sie EINFÜGEN: FORMULAROBJEKTE: DATEIFELD ausw ählen oder in der Objektepalette auf das Icon für DATEIFELD EINFÜGEN klicken. 

Prüfen Sie, ob im Bearbeiten-Tag des Eigenschafteninspektors ENCTYPE = "multipart/ form-data" enthalten ist.

192

Form ulare

Achten Sie bei der Verw endung von Dateifeldern darauf, dass ENCTYPE = "m ultipart/ form -data" im FORM-Tag enthalten ist, dam it die Datei beim Upload ordnungsgem äß codiert w ird. Geben Sie dies gegebenenfalls von Hand ein.

Einstellungen Im Eigenschafteninspektor für Form ulare w ird eingestellt, w ie die Daten verschickt w erden, beispielsw eise w ie und w ohin die Daten gesendet w erden sollen.  Blenden Sie die Form ulareigenschaften ein, indem Sie auf den Form ularrahm en klicken. Sie erscheinen dann im Eigenschafteninspektor. In unserem Beispiel  sollen die Daten per E-M ail versandt werden. Der Screenshot zeigt die nötigen Einstellungen.

 Weisen Sie dem Form ular einen Nam en zu, dam it Sie es m it JavaScript oder anderen Scriptsprachen steuern können. Schreiben Sie diesen (ohne Leer- und Sonderzeichen) in das Textfeld FORMULARNAME.  Viele einfache Form ulare können säm tliche Verarbeitungsvorgänge beispielsw eise m it Hilfe von JavaScript direkt auf dem Client ausführen. Die Daten können dabei allerdings nicht gespeichert w erden. Dazu m üssen Sie an eine Serveranw endung w ie ein CGI-Script geschickt w erden, das Ihnen Dream w eaver nicht schreiben kann. Oft bieten Internet Service Provider (ISPs) Standardscripte an, die Sie Ihren Bedürfnissen anpassen können. Den Pfad zu diesem Script können Sie dann in das Textfeld eingeben oder aus einem Dialogfeld ausw ählen. Klicken Sie dazu auf das Ordnersym bol. Bei größeren Projekten sollten Sie Kontakt m it Ihrem System adm inistrator aufnehm en. Alternativ können Sie die Daten als E-Mail verschicken. Geben Sie dazu m ailto: und die E-Mail-Adresse in das Aktionsfeld ein. (Wählen Sie im nächsten Schritt POST.)  Wählen Sie aus dem Popup-Menü die Methode aus, m it der die Inform ationen verschickt w erden sollen:  GET (abrufen) fügt die Form ularw erte dem URL hinzu und sendet eine GetAnfrage an den Server. Achtung: URLs dürfen m axim al 8.192 Zeichen lang sein, so dass diese Methode bei sehr langen Form ularen nicht verw endet w erden kann.  POST (veröffentlichen) sendet die Werte in einer Nachricht per Post-Anfrage an den Server.  STANDARD sendet die Form ularw erte m it der Standardm ethode des Brow sers an den Server (m eistens Get).

Form ulare und Verhaltensw eisen

193

Formulare und Verhaltensweisen Mit der Kom bination von Form ularen und Verhaltensw eisen lassen sich einige interessante Effekte und Navigationsm öglichkeiten realisieren.

 Sprungmenü Das Sprungm enü ist ein Popup-Menü, das nach Ausw ahl eines Menüpunktes eine Webseite lädt. Es verbindet Verhaltensw eisen m it Form ularen so, dass jedem Menüpunkt eine Adresse zugeteilt w ird. Zu der w ird der Webbrow ser autom atisch geschickt, w enn der Benutzer den Menüpunkt ausw ählt. Mit Dream w eaver kann diese Form der Navigation schnell und einfach erstellt w erden:  Wählen Sie EINFÜGEN: FORMULAROBJEKTE: SPRUNG M ENÜ oder klicken Sie auf das Icon SPRUNGMENÜ EINFÜGEN in der Objektepalette.  Geben Sie im erscheinenden Dialogfeld Nam en und Links der Seiten ein, zu denen der Besucher über das Sprungm enü gelangen soll. Wählen Sie im Popup-Menü ÖFFNE URLS IN aus, in w elchem Fenster die Links geladen w erden sollen. Benennen Sie dieses Menü. Ein Kontrollkästchen kann außerdem m arkiert w erden, w enn neben dem Menü eine Schaltfläche GEHE ZU… eingesetzt w erden soll, so dass die neuen Dateien erst dann geladen w erden, w enn auf diese geklickt w ird.



Im Dialogfeld des Sprungmenüs müssen die Links nacheinander eingegeben werden.

 Formulareingaben überprüfen Um die Eingaben der Besucher zu checken, bevor sie w eggeschickt w erden, können Sie die Verhaltensw eise FORMULAR ÜBERPRÜFEN verw enden.

 Hinweis Sie können die Nam en und Werte von Objektfeldern auch festlegen, indem Sie w ie folgt vorgehen: Klicken Sie bei gedrückter Kontrolltaste auf das Objekt. Wählen Sie aus der dabei erscheinenden Popup-Box NAME… oder WERT… .

Alle Beispiele dieses Kapitels finden Sie auf der CD-ROM : examples/ 046forms.

IM AGE

I M AGE 196 Farben

213 Bildtechniken

197 Websichere Farben 199 Dithering 201 Realitätsnähe

213 213 216 217 218 219 221 221 225

202 Bildformate 202 204 206 208 210 212 212

GIF JPEG PNG Typografie (Text) als Grafik Transparente Bilder Konvertierungsprogram m e Brow ser-Dithering

Bild einsetzen und m odifizieren Einstellungen Integration Segm entierung Kom plexe Segm entierung Rollover Anim iertes GIF Im agem ap Web-Fotoalbum

196

Farben

FARBEN Farben im Web sind grundsätzlich Bildschirm farben. Diese Farben sind transparent, sie sind von Licht durchschienen oder leuchten selbst. Sie setzen sich aus den Grundfarben des Monitors Rot (R), Grün (G) und Blau (B) zusam m en. Für sie gelten die Regeln der additiven Farbm ischung: je m ehr Farbanteile, desto heller die Farbe. Im Gegensatz dazu sind Farben auf gedrucktem Papier Reflex- oder Pigm entfarben: Sie reflektieren oder absorbieren Teile des einfallenden Lichts. Für sie gelten die Regeln der subtraktiven Farbm ischung: je m ehr Farbanteile, desto dunkler die Farbe. Schematische Darstellung  des Spektralfarbenzugs. Deutlich wird, dass bestimmte Farbbereiche des sichtbaren Spektrums außerhalb der Darstellungsgrenzen einzelner Farbsysteme liegen. Die Lage der Grundfarben (RGB/ CM Y) ist schematisiert. In der M itte des Farbraums der Unbunt- oder Weißpunkt.

Additive Farbmischung

520 525

515

G

530 535

R

Rot

G

Grün

B

Blau

Subtraktive Farbmischung 540 545 C Cyan 550 555 560 M Magenta 565 570 575 Y Yellow 580 Y 585

510

505

500

590 595 495

600 605 610

490

620

C

650

R

485 480

M

475 470 465 450 400

B nm

Wellenlänge des sichtbaren Lichts

700

Websichere Farben

197



Subjektive Farbabstimmung am Beispiel der Farbcodierung des EucerinSortiments. Links: Farben abgestimmt nach den vorliegenden Druckfarben. Die Farben – insbesondere die Türkistöne – wirken matt und kraftlos. Rechts: Optimierte Farben für die Darstellung im Web. Die Farben weichen deutlich vom Druckmuster ab, werden subjektiv aber als richtig, weil angenehm und gesättigt, empfunden.

Beide Farbsystem e haben unterschiedliche Farbräum e, d.h. Bereiche darstellbarer Farben. Ich m öchte an dieser Stelle nicht w eiter auf die Problem e des Farbm anagem ents eingehen, sondern Sie darauf aufm erksam m achen, dass ein Abgleichen von Druck- und Bildschirm farben nur bedingt m öglich ist. Farben auf dem Bildschirm w erden subjektiv em pfunden. Insbesondere w eil jeder Betrachter einen anderen Monitor, zum indest aber seinen Monitor anders eingestellt hat. Im schlim m sten Fall w ird ein Rot nicht als Rot, sondern als Magenta oder Orange w iedergegeben. Es gibt Farben, die eindeutiger sind als andere. Dies hängt nicht nur m it der Darstellung, sondern vor allem m it der subjektiven Farbw ahrnehm ung zusam m en. Mehr Menschen sind bereit, verschiedene Abstufungen von Rot noch als Rot zu akzeptieren als z.B. Blau. Bei Blau w erden schneller Helligkeitsunterschiede und Abw eichungen in Richtung Türkis oder Violett w ahrgenom m en. Es gibt auch Farben, die sich auf dem Bildschirm absolut nicht darstellen lassen, w eil sie zu einem anderen Farbraum gehören, z.B. ein leuchtendes kräftiges Blaugrün (Türkis).

Websichere Farben Als das Web noch jung w ar, hatten die m eisten Anw ender noch kleine 15-ZollMonitore m it einer 8-Bit-VGA-Karte, die m axim al 400x600 Pixel darstellen konnte. 8Bit bedeutet 8 Farben je Grundfarbe (Rot, Grün, Blau) des Monitors: also insgesam t 8 x 8 x 8 = 256 Farben. Da die verschiedenen Betriebssysteme DOS, Window s, Unix, MacOS unterschiedliche System farben vorsahen, m usste für das Web ein neuer Standard gefunden w erden, der sicherstellte, dass im Brow ser die Farben auf allen System en gleich dargestellt w urden. Es w urde eine Farbpalette von 6 x 6 x 6 = 216 Farben, den w ebsicheren Farben (w ebsafe colors), vereinbart. Die übrigen freien 40 Farben w erden von den verschiedenen Betriebssystemen für die System palette genutzt.

Die 216 websicheren Farben in den sechs Ansichten des Farbwürfels



Beispiel: indications.html

198

Farben

 Hex-Farben Websichere Farben w erden m it einem einfachen System beschrieben, das w enig Speicherplatz in der Datei benötigt. Während norm alerw eise eine RGB-Farbe z.B. durch „000-102-102“ beschrieben w erden m uss, w ird die gleiche Inform ation im Hexadezim alsystem m it „#006666“ beschrieben. Die Werte w erden durch die Ziffern 0–9 und die Buchstaben A–F definiert, zusam m en also 16 Werte, die als sechsstelliger String kom biniert w erden können. Die w ebsicheren Farben bestehen im m er aus Ziffernpaaren von 00, 33, 66, 99, CC, FF (6 x 6 x 6 = 216 Farben). Das gesam te Farbspektrum , das m it Hex-Werten beschrieben w erden kann, um fasst 16 x 16 x 16 x 16 x 16 x 16 = 16,7 Millionen Farben (TrueColor).

 Farbpalette Wenn Sie in Dream w eaver 4 m it dem neuen Farbw ähler eine Farbe aus der Palette nehm en, w ird der Hex-Wert der Farbe im grauen Feld obenhalb der Palette angezeigt und dann im Farbw ahlfeld des Eigenschafteninspektors eingetragen. Standardm äßig ist dieses Feld leer. Die Farbe des Objekts w ird durch den DefaultWert des Body-Tags definiert. Wenn Sie die Farbeigenschaften eines Objektes ändern m öchten, haben Sie drei Möglichkeiten:  Klicken Sie im Eigenschafteninspektor auf das Farbw ahlfeld und nehm en die Farbe m it der Pipette, eine Farbe aus der Palette oder von irgendeiner Stelle des Desktops auf.  Tragen Sie die Farbe als Hex-Wert im Farbw ahlfenster ein, z.B. „#FF99CC“.  Tragen Sie einen Farbnam en ein, z.B. „turquoise“. M it dem neuen Farbwähler  können Sie aus unterschiedlichen Paletten wählen (z.B. M ac OS). Die Option „Websicheres Einrasten der Farben “ ist jetzt ganz unten in dem Fenstermenü untergebracht. Das linke Icon mit dem roten Schrägstrich steht für „Standardfarbe“, d.h. die Farbe des Textes bleibt wie im BodyTag definiert. Rechts daneben der Farbwähler des Betriebssystems.

Siehe auch Seiteneigenschaften in Kapitel Dokument auf Seite 74.

Farbnam en sind auf w enige Grundfarben begrenzt, z.B. Purple, Magenta, Pink etc. In Dream w eaver finden Sie einige Farbnam en unter BEFEHLE: FARBSCHEMA EINSTELLEN… Mit diesem Befehl können Sie die Farben für den Body-Tag zusam m enstellen (Hintergrundfarbe, Textfarbe, Farbe aktiver Links etc.) und beurteilen.

Dithering



199

Im Einstellungsfenster „Farbschema “ können Sie schnell die Farben des Body-Tags zusammenstellen.

Dithering Eine beliebte Technik, um unter Verw endung w ebsicherer Farben trotzdem Farben auf dem Bildschirm zu sim ulieren, die außerhalb der Farbpalette der w ebsicheren Farben liegen, ist das Dithering; das Aufrastern der Farben. Ähnlich w ie beim Farbdruck, w o die Grundfarben in kleinen Punkten zusam m engedruckt m ittels optischer Farbm ischung den Eindruck von vielen Farben erzeugen, können Sie diese optische Farbm ischung auch bei Bildschirm farben erzeugen. In einem Bildbearbeitungsprogram m w ie Photoshop, Im ageReady oder Firew orks w erden GIF-Bilder (oder auch 8-Bit-PNG-Bilder) für die Ausgabe als Webgrafik in unterschiedlicher Weise aufgerastert. In den nebenstehenden Beispielen haben w ir einige der Möglichkeiten aufgezeigt.



Beispiel: keyboard.html

Ein RGB-Bild als Ausgangspunkt. Die grauen Farbnuancen der Tastatur werden mit TrueColor (M illionen Farben) gut dargestellt.

200

Farben

 Ein Ausschnitt des gleichen Bildes zeigt die Konvertierung in eine begrenzte Farbpalette von 256 Farben. Die grauen Farben sind in allen Übergängen sehr originalgetreu.

 Bei der Konvertierung in Websafe Colors – ohne Dithering – werden schnell die Grenzen von 216 Farben sichtbar. Farbflächen werden zusammengefasst und Farben zu den nächstgelegenen websicheren Farben verschoben.





Diffusion Dithering: Dieser beliebte Filter mischt die Farben im Bild aus den verfügbaren Farben der Websafe-Palette mittels optischer Farbmischung in einem Streuraster. Das wahrgenommene Bild ist deutlich näher am Original als im Beispiel ohne Dithering.

Pattern Dithering: Ein anderer Dithering-Filter mischt die Farben innerhalb der Websafe-Palette und stellt sie in einem regelmäßigen Raster zusammen. Die Darstellung ist auch nahe am Original, wirkt aber nicht so lebendig.

Ein w eiteres Einsatzgebiet für Dithering ist die Erstellung von Farbflächen aus Zw ischentönen w ebsicherer Farben. Durch die optische Farbm ischung entsteht auf dem Bildschirm der Eindruck einer neuen Farbe. Dam it lassen sich gut bestim m te Farbschattierungen für Farbflächen erzeugen oder Bilder m anuell Pixel für Pixel optim ieren. Dabei bieten sich grundlegend drei Vorgehensw eisen an, die sich auch m iteinander kom binieren lassen:  Anlegen eines gleichm äßigen Rasters in einer On/ off-Technik. Dabei w ird abw echselnd jedes Pixel einer Zeile m it einer der beiden Farben belegt. In der nächsten Zeile kom m t das gleiche Muster um ein Pixel verschoben. Diese Technik erzeugt eine ebenm äßige Farbfläche.  Anlegen eines Linienrasters, bei dem abw echselnd jede Zeile oder Spalte m it der anderen Farbe belegt ist. Auch diese Technik erzeugt eine ebenm äßige Farbfläche, jedoch m eist m it einer leichten Streifenbildung. Dies kann jedoch auch ein erw ünschter Effekt sein.

Realitätsnähe

 Regelmäßiges Dithering mit On/ offRaster. Die Farbfläche in der M itte entsteht aus den beiden Grautönen links und rechts. Der Kreis in der M itte zeigt die Vergrößerung.



Regelmäßiges Dithering mit On/ offRaster. Die Farbfläche in der M itte entsteht aus den beiden Grautönen links und rechts. Der Kreis in der M itte zeigt die Vergrößerung.

 Anlegen eines Verlaufs. Weiche Farbübergänge und Verläufe lassen sich m it w ebsicheren Farben nur ganz schlecht darstellen. Eine – oft notw endige – Lösung sind m anuell gepixelte Übergänge. Je näher bei diesen Techniken die verw endeten Farben zusam m enliegen, desto besser ist die Illusion einer neuen gleichm äßigen Farbe. Eine der Farben kann auch transparent angelegt sein, so dass der jew eilige Hintergrund an der Stelle durchscheint. Im gleichm äßigen Raster angelegt, können dam it halbtransparente Effekte z.B. Schatten erzeugt w erden. Diese Rastertechniken erzeugen beim Speichern unterschiedlich große Daten, da die Kom pressionsalgorithm en im m er zeilenw eise arbeiten. Wenn Sie On/ off-Raster oder senkrechte Linienraster verw enden, w ird die Datei sehr viel größer als bei w aagerechten Linienrastern.

201



Ein Farbübergang zwischen Schwarz und Weiß in vier verschiedenen Dithering-M odi: Diffusion, Pattern, mit Störungen und ganz unten manuell angelegten Übergängen. Deutlich wird in der Vergrößerung die Beimischung bunter Farbtöne in den ersten drei – automatisch generierten – Übergängen.

dither.html

Realitätsnähe Man kann heute davon ausgehen, dass 80% der Besucher Ihre Site auf einem 17Zoll-Monitor m it TrueColor (Millionen Farben ) betrachten. Desw egen kom m t heute den w ebsicheren Farben nicht m ehr die gleiche Bedeutung zu w ie noch vor w enigen Jahren. Bei der Arbeit ertappen w ir uns im m er häufiger dabei, zw ar w ebsafe zu denken, aber aus praktischen Gründen – oder w eil der Auftraggeber es w ünscht – m it Millionen Farben zu arbeiten. Wenn Sie aber ganz sicher sein w ollen, benutzen Sie nach w ie vor w ebsichere Farben.

Als vertiefende Lektüre zum Thema empfehle ich das Buch „Webdesign mit Photoshop 5“ von M ichael Baumgardt. Sie finden dort neben Themen wie websichere Farben, verschiedene PhotoshopTechniken und umfangreiche Testreihen zur Bildkompression.

202

Bildform ate

BILDFORMATE Derzeit w erden auf Webseiten drei verschiedene Bildform ate eingesetzt: GIF (Graphics Interchange Form at ), JPEG (Joint Photographers Experts Group ) und PNG (Portable Netw ork Graphics). Alle drei Bildform ate haben gem einsam , m öglichst kleine,

hochkom prim ierte Daten zu erzeugen. Dream w eaver unterstützt alle drei Form ate, kann selbst aber keine Bilder verarbeiten, sondern nur platzieren. Jedoch gibt es eine Reihe von Bildverarbeitungsprogram m en, die m it Dream w eaver „Hand in Hand“ arbeiten, allen voran Firew orks. Im Folgenden w erden w ir die unterschiedlichen Bildform ate kennen lernen und sehen, w orauf bei der Erstellung zu achten ist. Das Ziel ist die Erzeugung von Bildern und Webgrafiken, die schön aussehen und schnell zu laden sind.

GIF

Der Bildaufbau ist beim GIF  ausschlaggebend für die Kompression. Bei einem On/ off-Raster ist die Dateigröße doppelt so groß wie bei einem gleichgroßen Bild mit horizontalem Aufbau.

Graphics Interchange Form at (GIF) ist das älteste und verbreitetste Online-Bildform at. Es w urde bereits in den 80ern durch Com puServe für die Übertragung hochkom prim ierter Bilddaten konzipiert und arbeitet m it dem LZW-Algorithm us, der auch im kom prim ierten TIFF zum Einsatz kom m t und die Bilddaten zeilenw eise (runlength ) kom prim iert. So w ird eine Pixelfolge w ie „255, 255, 255, 000“ als „3 x 255, 000“ beschrieben. Das spart sehr viel Speicherplatz, w enn m an sich vorstellt, dass in einem Bild tausendm al die gleiche Farbe nebeneinander stehen kann. Deshalb kann bei Bildern, die flächige horizontale Strukturen ohne Farbänderungen enthalten, eine besonders hohe Kom pression erzielt w erden. Ein GIF ist ein verlustfreies (lossyfree) Form at. Das bedeutet, dass Sie ein einm al kom prim iertes Bild beliebig oft m odifizieren und speichern können, ohne dass Daten verloren gehen. Der Begriff „lossyfree“ gilt jedoch nur für den Prozess innerhalb der indizierten Palette. Bei der Um w andlung eines 24-bit-Bildes in ein 8-bit-Bild gehen natürlich Farbinform ationen verloren. Das GIF hat m axim al 256 Farben, die in einer indizierten Palette organisiert sind. Indiziert bedeutet, dass jede einzelne Farbe der Palette unabhängig von den anderen Farben m odifiziert w erden kann. Meist w erden GIFs m it 216 w ebsicheren Farben – oder einer Teilm enge davon – eingesetzt. Das GIF kann interlaced gespeichert w erden: Im Brow ser w ird erst eine niedrig aufgelöste Vorschau gezeigt, die sich nach und nach zum hochaufgelösten Bild aufbaut. Im Unterform at GIF-89a können eine oder m ehrere Farben einem – nicht antialiased – Alphakanal zugew iesen w erden, so dass eine einfache Transparenz gegenüber dem Hintergrund m öglich ist. Auch können einzelne Rahm en (fram es) in einem Bild als Anim ation gespeichert w erden (anim ated GIF).

GIF

203

 Einheitliche Farbflächen mit horizontalem und vertikalem Bildaufbau lassen sich vorzugsweise als GIF konvertieren. Ein RGBBild mit TrueColor dient als Ausgangspunkt. ImageReady und Fireworks bieten fast identische M ehrfachansichten, um die Einstellung der Parameter für die Konvertierung im WYSIWYG-M odus vorzunehmen.



Photoshop, Konvertierung in GIF, Ausschnittvergrößerung 200 %: Oben links das Original. Rechts daneben die Umwandlung in 256 indizierte Farben mit perzeptiver – d.h. der Wahrnehmung angepasster – Palette. Links unten websichere Farben ohne Dithering. Rechts unten websichere Farben mit 100 % Diffusion Dithering.

 Fireworks, Konvertierung in GIF, Ausschnittvergrößerung 200 %: Oben links das Original. Rechts daneben 128 indizierte Farben einer angepassten Palette ohne Dithering. Links unten websichere Farben ohne Dithering. Rechts unten eine angepasste Palette mit 215 Farben und 100 % Diffusion Dithering.

204

Bildform ate

JPEG

Besonders fotografische Abbildungen mit vielen Farbübergängen und feinen Zeichnungen lassen sich bevorzugt als JPEG darstellen. Ein RGB-Bild mit TrueColor dient als Ausgangspunkt. ImageReady und Fireworks bieten fast identische M ehrfachansichten, um die Einstellung der Parameter für die Konvertierung im WYSIWYG-M odus vorzunehmen. 

Joint Photographers Experts Group (JPEG) w urde als optim ales Kom pressionsform at für Fotos und Halbtonbilder (z.B. Verläufe) konzipiert. Es unterliegt einem kom plizierten Algorithm us, w elcher benachbarte Farben vergleicht, kontrastreiche, scharfe Kanten erhält und w eiche, diffuse Bildbereiche stärker kom prim iert. JPEG kann Farbinform ationen von CMYK (32-Bit), RGB (24-Bit, TrueColor) und Graubildern (8-Bit) enthalten. Im Web spielen JPEG-Bilder im CMYK-Modus jedoch keine Rolle. Ein JPEG kann keine Alphakanäle enthalten, also keine Transparenzen darstellen. JPEG ist ein verlustbehaftetes (lossy) Form at: Bei jedem Abspeichern w ird die Bildqualität schlechter. Deshalb sollten Sie ein JPEG im m er vom Original, z.B. von einer Photoshop-Datei erzeugen. Wie auch beim GIF gibt es die Möglichkeit, ein JPEG so abzuspeichern, dass es am Bildschirm nach und nach zur vollen Auflösung aufgebaut w ird, bei JPEG heißt es jedoch fortlaufendes (progressives) Form at. Der w ichtigste Unterschied ist vielleicht die Möglichkeit, beim JPEG die Kom pression und Abbildungsqualität stufenlos zu regeln: von schlechter Kom pression und m axim aler Bildqualität bis hin zu m inim aler Dateigröße bei m iserabler Bilddarstellung.

JPEG

205



Photoshop, Konvertierung in JPEG, Ausschnittvergrößerung 200 %: • Oben links das Originalbild. • Rechts daneben 100 % Qualität – kein sichtbarer Unterschied in der Qualität. • Links unten 50 % Qualität – die Konturen sind klar, in den diffusen Bereichen ist ein leichter Qualitätsverlust wahrnehmbar. • Unten rechts höchste Kompression und größte Qualitätseinbuße, deutlich sichtbare Schlieren und Bildung von Rechtecken.



Fireworks, Konvertierung in JPEG, Ausschnittvergrößerung 200 %: Ähnliche Ergebnisse wie bei Photoshop, jedoch mit anderen Qualitätseinstellungen. Wie Sie an den Dateigrößen sehen können: 50 % Qualität in Photoshop entsprechen 80 % Qualität in Fireworks, 0 % Qualität in Photoshop entsprechen 38 % Qualität in Fireworks.

206

Bildform ate

PNG

Auf der Website zum Buch finden Sie jederzeit aktuelle Browser Compatibility Charts: www.dreambook.de.

Portable Netw ork Graphics (PNG) sind das jüngste Grafikform at im Internet. Sie w urden als optim ierte Alternative zum GIF eingeführt, konnten sich jedoch bisher noch nicht durchsetzen. PNG können 8-Bit-indizierte-Farbbilder und Bitm aps, 8- und 24Bit-Farb- und Graustufenbilder m it Alphakanal, d.h. w eichen Transparenzen enthalten. Alle Form ate sind verlustfrei (lossyfree). Sow eit m ir bekannt ist, können nur in Photoshop w eitere Einstellungen für die optim ierte Speicherung vorgenom m en w erden:  ADAM 7 erzeugt einen progressiven Bildaufbau ähnlich INTERLACED bei GIF und PROGRESSIVE beim JPEG.  OHNE FILTER w ird für indizierte Bilder und Bitm aps verw endet.  SUB optim iert Bilder m it vorw iegend horizontalem Aufbau.  OBEN optim iert Bilder m it vorw iegend vertikalem Aufbau.  DURCHSCHNITT ist geeignet für geringfügige Störungen, die Durchschnittsw erte benachbarter Pixel w erden berechnet.  PAETH ist für geringfügige Störungen geeignet, benachbarten Farbw erten w erden neue Farben zugew iesen.  FLEXIBEL ist eine autom atische Einstellung, die dem Bild den am besten geeigneten Filter zuw eist. Bisher unterstützen nur w enige Brow ser das PNG.

Welche Windows-Browser können PNG anzeigen? Browser

PNG-8

PNG-8 AlphaTransparenz

PNG-8 Index-Trans- PNG-24 parenz

PNG-24 Alpha (PNG-32)

Netscape Navigator 4.5

korrekt

ohne Alphakanal

ohne Alphakanal

korrekt

ohne Alphakanal

Netscape 5.0a (Mozilla)

korrekt

ohne Alphakanal

ohne Alphakanal

korrekt

ohne Alphakanal

Netscape 6.0

korrekt

korrekt

korrekt

korrekt

korrekt

Internet Explorer 4.5

korrekt

korrekt

korrekt

korrekt

ohne Alphakanal

Internet Explorer 5.0

korrekt

korrekt

korrekt

korrekt

ohne Alphakanal

Opera

korrekt

korrekt

ohne Alphakanal

korrekt

ohne Alphakanal

Welche Macintosh-Browser können PNG anzeigen? Browser

PNG-8

PNG-8 AlphaTransparenz

PNG-8 IndexTransparenz

PNG-24

PNG-24 Alpha (PNG-32)

Netscape Navigator 4.5

korrekt

ohne Alphakanal

ohne Alphakanal

korrekt

ohne Alphakanal

Netscape 5.0a (Mozilla M13) korrekt

korrekt

korrekt

korrekt

korrekt

Netscape 6.0

korrekt

korrekt

korrekt

korrekt

korrekt

Internet Explorer 4.5

keine Anzeige

keine Anzeige

keine Anzeige

keine Anzeige

keine Anzeige

Internet Explorer 5.0

korrekt

korrekt

korrekt

korrekt

korrekt

iCab

korrekt

korrekt

korrekt

korrekt

korrekt

PNG

207



Für die Darstellung von monochromen Bildern mit feinen Übergängen bieten sich neben JPEG auch verlustfreie Formate wie GIF und PNG-8 an, solange mit einer perzeptiven Palette konvertiert wird. PNG-24 ist immer verlustfrei. Ein RGB-Bild mit TrueColor dient als Ausgangspunk t. ImageReady und Fireworks bieten fast identische M ehrfachansichten, um die Einstellung der Parameter für die Konvertierung im WYSIWYG-M odus vorzunehmen.



Photoshop, Konvertierung in PNG: • Oben rechts das Original. • Rechts daneben 32 indizierte Farben, die perzeptiv bei 100 % Dithering gefiltert sind. Eine leichte Fleckenbildung wird sichtbar. • Links unten eine websichere Palette aus 32 Farben bei 100 % Dithering. Deutliche Farbabweichungen werden sichtbar. • Rechts unten ein 24-Bit PNG, nahezu identisch mit dem Original.



Fireworks, Konvertierung in PNG: • Oben rechts das Original. • Rechts daneben 32 indizierte Farben, angepasst gefiltert bei 100 % Dithering. Eine leichte Fleckenbildung wird auch hier sichtbar. • Links unten eine websichere Palette aus 32 Farben bei 100 % Dithering. Auch hier deutliche Farbabweichungen. • Rechts unten ein 24-Bit-PNG, nahezu identisch mit dem Original.

208

Bildform ate

Typografie (Text) als Grafik Wenn es um besondere Effekte geht, können Sie Schrift nicht nur als editierbaren Text, sondern auch als Grafik in Webseiten einbinden. Dies hat den großen Vorteil, dass Ihre Schrift im m er gleich in unterschiedlichen Brow sern dargestellt w ird – unabhängig davon w elcher Brow ser, w elche Schriftgrößenvoreinstellungen eingestellt sind und ob die Schrift überhaupt bei dem Betrachter geladen ist. Bei der Erstellung von Schrift als Grafik ist Einiges zu beachten:  Die Dateigröße ist beträchtlich größer als bei Text. Also nicht für seitenlange Abhandlungen einsetzen, sondern für Überschriften, besonders ausgezeichnete Absätze und Schrifteffekte, die m it Text nicht m öglich sind.  Schrift als Grafik ist für den Anw ender nicht als Text – nur als Bild – kopierbar.  Verw enden Sie Kantenglättung. Nur sehr kleine, gut als Bildschirm fonts verw endbare Schriften (z.B. Arial, Geneva, Verdana) können ohne Anti-Aliasing eingesetzt w erden. Als kleinste akzeptable Schriftgröße gelten 8 Pixel.  Setzen Sie kein Dithering ein. Dies erhöht die Speichergröße und ist norm alerw eise nicht notw endig.  Richten Sie die Schrift auf der geplanten Hintergrundfarbe ein und stellen sie transparent. Dies m acht vor allem Sinn, w enn die Schrift vor verschiedenfarbigem oder unruhigem Hintergrund eingesetzt w ird.  Benutzen Sie als Darstellungsform ate GIF oder PNG. Auf JPEG w erden Sie in den m eisten Fällen verzichten, da schlechte Darstellungsqualität m it großen Dateien einhergehen.  Bew ahren Sie die Originaldatei m it dem noch editierbaren Text gut auf. Kursänderungen des Auftraggebers sind m anchm al unergründlich!

Bei der Darstellung von  Typografie (Text) als Grafik haben eindeutig die verlustfreien Formate wie GIF und PNG-8 den Vorrang. Ein RGBBild mit TrueColor dient als Ausgangspunkt. Photoshop und Fireworks bieten fast identische M ehrfachansichten, um die Einstellung der Parameter für die Konvertierung im WYSIWYGM odus vorzunehmen.

Typografie (Text) als Grafik

209

Der einfachste Weg, Typografie als Grafik zu erzeugen, ist, in einem textfähigen Bildverarbeitungsprogram m (Photoshop oder Firew orks) die Texte in editierbarer Form abzusetzen. Sie können den Text auch in einem Publishing-Program m (Pagem aker, Xpress) oder Zeichenprogram m (Freehand, Illustrator) als EPS speichern und in das Bildverarbeitungsprogram m als Pixel im portieren. Falls sich keiner der beiden Wege anbietet, können Sie von Ihrem Text auch einen Screenshot m achen und diesen in das Bildverarbeitungsprogram m im portieren.  Photoshop, Ausschnittvergrößerung 200 %: • Oben links das Original. • Rechts daneben ein GIF mit einer indizierten Palette aus nur sechs Farben. Erstaunlich wie nah diese Darstellung am Original ist. • Links unten das PNG-8 ist identisch mit dem GIF, die Datei ist jedoch noch komprimiert. • Das JPEG rechts unten ist trotz höchster Kompression sehr groß und hat dabei eine nicht akzeptable Qualität.

 Fireworks, Ausschnittvergrößerung 200 %: Ähnliche Ergebnisse wie in Photoshop. GIF und PNG-8 liegen mit den indizierten Paletten von 6 Farben nah am Original. Die Darstellung des JPEGs ist sogar noch schlechter als bei Photoshop.

210

Bildform ate

Transparente Bilder Transparente Bilder können Sie nur in den Form aten GIF und PNG einsetzen. Diese beiden Bildform ate arbeiten m it Alphakanälen, die bestim m te Bereiche des Bildes durchsichtig erscheinen lassen:  Beim GIF w erden eine oder m ehrere Farben der indizierten Palette als transparente Bereiche definiert.  Beim PNG (8- und 24-Bit) kann ein echter w eicher Alphakanal verw endet w erden.

Ein RGB-Bild mit TrueColor  – in Photoshop-Ebenen angelegt – dient als Ausgangspunkt. Links oben in der Ecke eine 400 %ige Ausschnittvergrößerung des weiß umrandeten Bereichs in der M itte. Photoshop bietet umfangreiche Einstellungen für die Vorbereitung von Webbildern.

Photoshop, Ausschnitt 100 %,  4-fache Ansicht des Bildes mit sichtbarem Alphakanal: Rechts oben das Original. Rechts daneben ein 89a GIF mit harter Kontur. Links unten ein PNG-8 mit weicher Kontur. Die schwarze Umrandung wird vom Programm angelegt, wenn die Hintergrundfarbe bestimmt wird – in diesem Fall Schwarz. Rechts unten das verlustfreie PNG-24 mit (theoretisch) 256 Transparenzabstufungen im Alpha-Kanal.

Transparente Bilder

211



Photoshop, Ausschnitt 400 %: In der Vergrößerung noch deutlicher sichtbar wird die schwarze Kontur, die das Programm – bei Transparenz – automatisch anlegt, wenn eine Hintergrundfarbe definiert ist. Rechts unten in der Ecke des Fensters befindet sich das Sprungmenü für die Wahl des Vorschau-Browsers.



Von Photoshop kann direkt in die Browser-Vorschau gesprungen werden, in diesem Fall Netscape Navigator. Photoshop erzeugt temporär eine HTM L-Datei sowie das dazugehörige Bild und zeigt diese im Browser-Fenster an. Zusätzlich werden die Konvertierungsdaten des Bildes und der Quellcode angezeigt.

212

Bildform ate

 Im Unterformat GIF-89a können eine oder mehrere Farben transparent gesetzt werden, jedoch ergibt sich eine harte Kontur zwischen Vorder- und Hintergrund. Hier ein transparentes GIF betrachtet in Netscape Navigator 4.5.



PNG-Bilder mit abgestufter Transparenz werden bisher nur von wenigen Browsern unterstützt. Allen voran hier iCab auf dem M acintosh.

Konvertierungsprogramme Die hier beschriebenen Bildverarbeitungsprogram m e benutzen zum Teil abw eichende Term ini und Param eter für die Exporteinstellungen von Webbildern. So kann der Export von JPEG 80% Qualität bei Firew orks ein ganz anderes Ergebnis haben als bei Im ageReady oder Photoshop. Manche der Program m e lassen darüber hinaus noch w eitere Einstellungen w ie z.B. Weichzeichnen bei JPEGs zu oder die Möglichkeit, ein Bild auf eine bestim m te Dateigröße hin zu optim ieren. Für Firew orks spricht die zum Teil nahtlose Integration in Dream w eaver, aber auch Im ageReady und Photoshop sind ein starkes Gespann m it guten Schnittstellen zu Dream w eaver.

Browser-Dithering Brow ser-Dithering ist das aktive Aufrastern von 24-Bit-Bildern durch den Brow ser, w enn er auf einem Betriebssystem m it 8-Bit-Grafikkarte eingesetzt w ird. In Im ageReady können Sie sich in der Vorschau das sim ulierte Brow ser-Dithering in den unterschiedlichen Gam m aw erten des jew eiligen Betriebssystem s anzeigen lassen.

Bild einsetzen und m odifizieren

BILDTECHNIKEN

Bild einsetzen und modifizieren Um ein Bild im Dokum entfenster einzusetzen, w ählen Sie M ENÜ: EINFÜGEN: BILD oder geben BEFEHLSTASTE + OPTIONSTASTE + I ein. Im Dialogfenster geben Sie den Bildpfad im Eingabefenster an oder w ählen ein Bild über die Verzeichnisstruktur aus. An dieser Stelle können Sie auch einstellen, ob das Bild relativ adressiert w erden soll (z.B. liegt das Bild ../ ../ im g/ bild.gif zw ei Verzeichnisebenen höher im Verzeichnis im g) oder ob der Pfad relativ zum Root-Verzeichnis gew ählt w ird (z.B. liegt das Bild file:/ / / im g/ bild.gif auf einem Pfad relativ zum obersten Verzeichnis der Site). Dream w eaver benutzt als Default „relativ zum Dokum ent“. Voraussetzung hierfür ist, dass das Dokum ent bereits in eine definierte Site gespeichert w urde. Oder Sie ziehen das Bild per Drag & Drop direkt vom Desktop oder aus einem Verzeichnis in das Dokum entfenster. Ebenso können Sie per Drag & Drop ein Bild aus dem Site-Fenster in das Dokum entfenster ziehen. Sie können auch ein Bild von einem Dokum entfenster in ein anderes ziehen oder über die Zw ischenablage dorthin kopieren. Voraussetzung ist in allen Fällen, dass das Bild bereits innerhalb einer definierten Site liegt, sonst w erden Sie von Dream w eaver gefragt, ob das ausgew ählte Bild dorthin kopiert w erden soll.

Einstellungen Die Einstellungen eines Bildes können im Eigenschafteninspektor definiert w erden:  Nam e des Bildes (für Script-Aufrufe)  Breite und Höhe des Bildes in Pixel. Beim Einsetzen w erden die Originalw erte in norm aler Schrift dargestellt. Verändern Sie diese Werte, w ird die Anzeige in fetter Schrift dargestellt. An dieser Stelle ist es einm al m ehr w ichtig darauf hinzuw eisen, dass Bilder im Internet grundsätzlich in 100% (1 : 1 Pixel) dargestellt w erden sollten. Skalieren können Sie die Bilder im Notfall im Verhältnis 2 : 1, d.h. im m er in 50 % Schritten nach unten. Von einem Skalieren nach oben (resam pling ) ist in jedem Fall abzuraten, da die Bilddarstellung sehr darunter leidet.

Von oben nach unten: Sie markieren ein Bild mit dem Cursor. Es erscheint eine schwarze  Linie mit drei Anfassern (handles) um das Bild. Bewegen Sie das Bild per Drag & Drop: Ziehen Sie es an die gewünschte Stelle. Skalieren Sie das Bild, indem Sie es an einem der drei Anfasser zsiehen: horizontal, vertikal oder in beide Richtungen gleichzeitig (proportional bei gedrückter Umschalttaste). Wenn Sie ein Bild im Content-M odus auswählen, wird es dunkel.

213

214

Bildtechniken

 Skalierte Bilder, GIF: Links Original in 100 % Größe (175 x 255 Pixel), M itte proportional verkleinert (106 x135 Pixel). Rechts unproportional verkleinert (42 x 106 Pixel). In Dreamweaver mögen die Bilder noch gut aussehen. Spätestens aber in der Browser-Ansicht wird das unschöne Dithering sichtbar.

Wenn Sie eine Tabellenzelle (TD) auf ALIGN = "RIGHT" stellen wird bei einem Bild in dieser Zelle das Attribut HSPACE in Internet Explorer 5 (M acintosh) ignoriert!

Bildausrichtung:  Links Bild proportional skaliert (142 x 101 Pixel), horizontaler Abstand 10 Pixel, Ausrichtung Links. Rechts Bild unproportional skaliert (132 x 247 Pixel), Ausrichtung rechts, horizontaler und vertikaler Bildabstand 10 Pixel

 Skalierte Bilder, JPEG: Die gleichen Bildeinstellungen wie beim GIF. Hier wird deutlich, dass das Dithering des Browsers unabhängig von 8- oder 24-bit ist. Das hässliche Aufpixeln der Zeichnung ist beim JPEG fast genauso stark wie beim GIF.

 Im nächsten Fenster QUELLE sehen Sie den Dateinam en und Pfad des ausgew ählten Bildes. Sie können ein anderes Bild w ählen, indem Sie auf den Ordner rechts davon klicken oder das Zeiger-Sym bol auf eine Datei (z.B. im Site-Fenster) richten.  Darunter, im Fenster VERKNÜPFUNG, können Sie dem Bild eine Link zuw eisen. Sie können eine Verknüpfung w ählen, indem Sie auf den Ordner rechts davon klicken oder das Zeigersym bol auf eine Datei (z.B. im Site-Fenster) richten.  Ganz rechts können Sie im Pulldow n-Menü die Ausrichtung des Bildes bestim m em . Diese Ausrichtung bezieht sich im m er auf das Verhältnis zu anderen Elem enten (andere Bilder oder Text).

Einstellungen

215

 Im Eingabefeld ALT können Sie den Text für das Alt-Attribut des Im g-Tags eingeben. Dieser Text w ird im Brow ser statt des Bildes w ährend des Ladens angezeigt oder w enn die Grafik ausgeschaltet ist. Beim Internet Explorer w ird der Alt-Text als Quickinfo direkt am Cursor angezeigt. 

Die einfache Darstellung des Eigenschafteninspektors. Ganz links eine M iniaturdarstellung des ausgewählten Bildes.

Mit einem Klick auf das kleine Dreieck unten rechts können Sie den Eigenschafteninspektor erw eitern.  Die erweiterte Darstellung des Eigenschafteninspektors. M it einem Klick auf das kleine Dreieck unten rechts können Sie wieder zur einfachen Darstellung umschalten.

 Ganz links können Sie die Einstellungen für eine Im agem ap vornehm en.  Rechts davon in den Feldern V-ABSTAND (vspace) und H-ABSTAND (hspace) können Sie den vertikalen bzw . horizontalen Abstand eingeben, den andere Elem ente zu dem Bild einnehm en sollen.  ZIEL bezieht sich w ieder auf den darüber stehenden Link. Hier können Sie z.B. bei der Anw endung von Fram es das Ziel (target ) der Link angeben oder aus dem Pull-

dow n-Menü w ählen.  NIEDRIGAUFLÖSENDE QUELLE (low src) gibt ein alternatives schnellladendes Bild an, w elches z.B. als Preview des eigentlichen Bildes genutzt w erden kann. Das ist dann sinnvoll, w enn sehr aufw ändige, große Bilder verw endet w erden, um dem Betrachter vorab schon Anhaltspunkte zu geben. Dieses Tag w ird bereits durch ältere Brow ser unterstützt (z.B. Netscape 2.0) und w ird zunehm end durch andere Techniken, z.B. DHTML, ersetzt.  Rechts davon im Fenster RAHMEN können Sie die Stärke des Rahm ens, der ein Bild um geben soll, einstellen. Falls das Bild verknüpft ist, w ird dieser Rahm en in der Farbe des Links dargestellt.  Mit den drei Icons rechts davon können Sie das Bild im Verhältnis zu seiner Um gebung ausrichten (LINKSBÜNDIG, ZENTRIERT, RECHTSBÜNDIG) also auf der Seite oder in einer Tabellenzelle.  Mit der Schaltfläche AKTUALISIEREN können Sie das Bild neu laden bzw . w ieder auf seine Originalgröße einstellen, nachdem Sie die Dim ensionen verändert haben.  Mit der Schaltfläche BEARBEITEN können Sie einen externes Bildverarbeitungsprogram m starten. Das Program m w eisen Sie unter BEARBEITEN: VOREINSTELLUNGEN: DATEITYPEN / EDITOREN zu.

216

Bildtechniken

 Für nahtlose Übergänge zwischen Bildern ist es wichtig, dass keine Leerzeichen zwischen den beiden Bildern im Quellcode stehen. Unter den Bildern sehen Sie das wichtige Stück im Code, welches den „space“ zwischen den Bildern verursacht.

 Hintergrundbild und Hintergrundfarbe werden in den verschiedenen Browsern unterschiedlich angezeigt. Netscape Navigator 4.5 (oben) zeigt Hintergrundbilder immer in den einzelnen Zellen, egal ob Sie in die Tabelle, die Zeile oder die Zelle geladen wurden. Die Hintergrundfarbe wird in Netscape durch Hintergrundbilder überdeckt. In Internet Explorer 4.5 (M itte) werden Hintergrundfarben und -bilder genauso angezeigt wie in Dreamweaver (unten).

Integration Macrom edia hat seine drei Flagschiffe des Webdesigns noch enger zusam m en rücken lassen. Dream w eaver ist in der Version 4 noch stärker m it Firew orks und Flash verzahnt als in den vorhergehenden Versionen. Sie haben unter anderem folgende Möglichkeiten der Integration:  Roundtrip-Segm entierung: Sie können jetzt in Firew orks vier segm entierte Grafiken (Bildtabellen) direkt in Dream w eaver öffnen, bearbeiten und aktualisieren. Sie können Ihre Änderungen in einem der beiden Program m e vornehm en und auch dort speichern. Dabei w erden anhängige Inform ationen, w ie z.B. Nam en, Im agem aps und Links beibehalten.  Flash-Schaltflächenobjekte: Mit Flash 5 erstellte Schaltflächenobjekt (buttons) können jetzt nicht nur in Dream w eaver übernom m en w erden (OBJEKTE-PALETTE: INTERAKTIVE BILDER), sondern dort auch direkt eingestellt w erden. Sie können m it vordefinierten Schaltflächen arbeiten, oder Ihre eigenen Schaltflächenvorlagen in Flash erstellen und diese in Dream w eaver im portieren.  Flash-Textobjekte: Über die OBJEKTE-PALETTE: INTERAKTIVE BILDER: FLASH-TEXT w ird ein Flash-Textobjekt in Dream w eaver eingefügt. Anschließend können Sie Schrift, Stil, Größe, Farbe und Rollover-Verhalten und Verknüpfungen einstellen.

Segm entierung

217

Segmentierung Segm entierung bzw . slicing nennt m an das Auftrennen von größeren Bildern in kleinere Bilder, Scheiben, Segm ente oder auch Slices. Wie Sie bereits im Kapitel Tabellen auf Seite 136 (Bildtabellen) gesehen haben, hat dies den Vorteil, die einzelnen Bildteile m it unterschiedlicher Funktionalität (z.B. Bildtausch-Rollover) auszustatten oder aber für die verschiedenen Bildteile unterschiedliche Bildform ate (GIF, JPEG) zu w ählen. In der Vergangenheit w ar die Segm entierung von Bildern reine Handarbeit, dann kam in den Bildverarbeitungsprogram m en die Funktion ENTLANG HILFSLINIEN BESCHNEIDEN. Sogar der dazugehörige Quellcode der HTML-Tabelle w urde generiert. Mittlerw eile sind die Werkzeuge so ausgefeilt, dass Sie sehr kom plexe Operationen vornehm en können. Wir w ollen dies an einem einfachen Beispiel veranschaulichen: Ausgangspunkt ist eine Photoshop-Datei m it horizontalen Hilfslinien, die für ein Rollover-Menü genutzt w erden soll.

Nähere Information in der Online-Hilfe unter Fireworks/ Flash und Dreamweaver verwenden.

 Fireworks Die Datei (inter.tif) w ird m it Firew orks geöffnet und m it Firew orks proprietärem Form at PNG gespeichert. Dabei bleiben die in Photoshop gesetzten Hilfslinien erhalten. Dann w ählen Sie EXPORTIEREN. Das Exportfenster bietet eine Reihe von Optionen:  SICHERN ALS: HTML und Bilder  HTML-DATEI EXPORTIEREN (nicht in die Zw ischenablage)  SEGMENTE ENTLANG HILFSLINIEN BESCHNEIDEN (die in diesem Fall w ichtigste Funktion)  BILDER IN UNTERORDNER ABLEGEN Für das Exportieren der segm entierten Bilder können Sie auch den Exportassistenten benutzen. Bevor Sie die Daten exportieren, haben Sie noch folgende Optionen der HTML-Einrichtung:  ALLGEMEIN: HTML-Stile für Dream w eaver oder andere Editoren.  TABELLE: Aufbau m it/ ohne transparenten GIFs, verschachtelten Tabellen  DOKUMENTSPEZIFISCH: Einstellung für die Syntax, w ie die einzelnen Bildsegm ente benannt w erden (r1_c2_f2.gif etc.)

 Die Photoshop-Datei in Fireworks geöffnet

 Photoshop Jetzt w ollen w ir die Datei direkt aus Photoshop segm entieren. Die Funktion SEGMENTE ENTLANG HILFSLINIEN BESCHNEIDEN (Hilfslinien in Slices) fehlt hier, bzw . w urde nicht gefunden. So m üssen die Slices dann von Hand angelegt w erden. Das geht relativ zügig, da sie an die m agnetischen HIlfslinien springen. Hierzu w ird der Befehl IN BENUTZER-SLICE UMWANDELN verw endet. FÜR WEB SPEICHERN bietet ähnlich um fangreiche Einstellungsm öglichkeiten w ie Firew orks.



Zum Erstellen der Slices in Photoshop wird der Befehl „In Benutzer-Slice umwandeln “ benutzt.

218

Bildtechniken

Komplexe Segmentierung Bei der kom plexen Segm entierung geht es um zw ei Aspekte:  die einzelnen Segm ente frei nach Größe und Position zu bestim m en, also auch m it < COLSPAN> und < ROWSPAN> zu arbeiten  den einzelnen Segm enten verschiedene Bildform ate und Kom pressionsqualität zuordnen zu können Unsere Beispieldatei darf in den Randbereichen eine relativ arm e Bildqualität aufw eisen, soll in der Mitte aber scharf bleiben.

 Fireworks Mit dem Segm entierw erkzeug um rahm en Sie einfach den zentralen Bereich. Autom atisch entstehen Hilfslinien, entlang der Sie w eitere Slices aufziehen können. In dem jew eils aktiven Slice können Sie das Exportform at für die Grafik einstellen. Wenn Sie alle Ihre zu exportierenden Slices eingestellt haben, w ählen Sie EXPORTIEREN (oder den Exportassistent).

Rollover

 Photoshop Auch Photoshop hat Werkzeuge für die kom plexe Segm entierung. Allerdings w erden hier die Grafikform ate erst direkt beim Export FÜR WEB SPEICHERN… eingestellt, bleiben aber beim Speichern der Quelldatei (.tif) erhalten. Über „Slice-Optionen bearbeiten “ können Sie den einzelnen Slices Namen und weitere Attribute zuweisen.



 Einsetzen der Bildsegmente Die generierten Bildsegm ente können auf folgende Arten in Dream w eaver übernom m en w erden:  Durch Kopieren des Ordners an den entsprechenden Ort einer Site. Eventuell m üssen dann noch Pfade in der HTML-Datei m anuell angepasst w erden.  Die HTML-Datei kann von Firew orks über die Zw ischenablage direkt in das Dokum entfenster von Dream w eaver übernom m en w erden.  Die HTML-Datei kann von Dream w eaver über OBJEKT-PALETTE: FIREWORKS-HTML EINFÜGEN direkt ins Dokum ent gesetzt w erden.

Rollover Rollover bezeichnet durch JavaScript gesteuerte Schaltflächen (buttons), die je nach Aktivität des Cursors unterschiedliche Zustände einnehm en können. Man unterscheidet je nach Zustand zw ischen:  Up-Status: Standardeinstellung der Schaltfläche, w enn keine Cursoraktivität stattfindet  Over-Status: Erscheinungsbild der Schaltfläche, w enn der Cursor darüber bew egt w ird  Dow n-Status: Erscheinungsbild der Schaltfläche, w enn sie angeklickt w urde  OverDow n-Status: Erscheinungsbild der Schaltfläche im Dow n-Modus, w enn der Cursor darüber bew egt w ird

Siehe Kapitel Bildtechniken auf Seite 213.

219

220

Bildtechniken

Während sich früher die Nerds m it JavaScript die Finger w undgehackt haben, können Sie heute in den m eisten Webprogram m en auch ohne Program m ierkenntnisse Rollover erzeugen. Sow ohl Dream w eaver als auch Firew orks und Im ageReady bringen die nötigen Tools m it. Dreamweaver:  Einfügen eines einfachen BildtauschRollovers

 Dreamweaver Dream w eaver kann Rollover-Effekte auf drei verschiedene Weisen erzeugen:  als einfaches Rollover-Bild, w ählen Sie EINFÜGEN: INTERAKTIVE BILDER: ROLLOVER-BILD  als Navigationsleisten-Objekt aus der Objektepalette oder EINFÜGEN: INTERAKTIVE BILDER: NAVIGATIONSLEISTE  oder als kom plexe OnMouse-Verhaltensw eisen Dreamweaver:  Einfügen einer Navigationsleiste. Die einzelnen Schaltflächen werden in einer Tabelle gehalten. M it dem PlusZeichen (+ ) können Sie weitere Schaltflächen hinzufügen. Auch bereits im Dokument enthaltene Navigationsleisten editieren Sie mit dieser Funktion.

Siehe Kapitel Verhaltensweisen auf Seite 250.

Die Erstellung eines Rollovers in Firew orks ist etw as kom plexer, da auch die Grafik in Firew orks erstellt w ird.

Anim iertes GIF

221

Animiertes GIF Anim ierte GIFs sind die älteste Form der Anim ation auf Internetseiten. Das Unterform at 98a bietet neben der Transparenz auch die Möglichkeit, m ehrere Sequenzen (fram es) eines Bildes in einer Datei zu speichern. Eine Anim ation lässt sich direkt in Firew orks erzeugen, oder w ie in unserem Beispiel im portieren w ir Photoshop-Ebenen in Firew orks. In dem Fenster EBENEN von Firew orks w ählen Sie alle Ebenen aus. Wechseln Sie in das Fenster FRAMES und w ählen im Fensterm enü AUF FRAMES VERTEILEN (kleines Dreieck rechts oben). Die einzelnen Ebenen w erden in Reihenfolge auf die einzelnen Fram es verteilt. Jetzt brauchen Sie nur noch m it einem Doppelklick auf die Fram e-Verzögerung die Zeiten einstellen. Nachdem Sie die notw endigen Einstellungen für den Export des GIF vorgenom m en haben, können Sie das Bild speichern. Es em pfiehlt sich dafür den Exportassistenten zu benutzen, der Sie Schritt für Schritt durch den Prozess führt. M ehr Informationen zu der Erstellung von Rollovers finden Sie in der Online-Hilfe von Fireworks. Beispieldatei 053technic/ gif_ani/ index.html

Imagemap Im agem aps sind nach w ie vor eines der interessantesten Einsatzgebiete für interaktive Grafik auf Webseiten: Auf einem Bild w erden unsichtbare Bereiche definiert und m it Links versehen. Im agem aps sind auch sehr gut in Kom bination m it Verhaltensw eisen und Ebenen einsetzbar. In diesem Abschnitt behandeln w ir nur clientseitige (clientside) Im agem aps. Bei clientseitigen Im agem aps w erden die Koordinaten durch den Brow ser ausgew ertet, w ährend bei dem serverseitigen Typ die Koordinaten vom Webserver verarbeitet w erden. Die älteren serverseitigen Im agem aps finden nur noch w enig Verw endung. Sie haben außerdem den Nachteil, dass Sie sie nicht „im Trockenen“, also auf Ihrem lokalen Arbeitsrechner testen können.



Eine in Photoshop-Ebenen vorbereitete Animation (eclipse_ani.tif), die die einzelnen Phasen einer M ondfinsternis zeigt, wird in Fireworks (eclipse_ani.png) importiert, auf Frames verteilt und als GIF98a (eclipse_ani.gif) exportiert.

 Hot Spots Die aktiven Bereiche der Im agem ap w erden als Hot Spots bezeichnet. Sie zeichnen einen Hot Spot in ein Bild, indem Sie unten links im Eigenschafteninspektor eines der drei Werkzeuge (Rechteck, Kreis, Polygon) w ählen und m it dem Cursor den Bereich im Bild aufziehen bzw . m it dem Polygonw erkzeug Punkt für Punkt um reißen. Später können Sie m it dem Ausw ahlpfeil (ganz links) Größe und Position des Hot Spots noch verändern. Bei der Polygonform können Sie die einzelnen Koordinatenpunkte verschieben, jedoch nicht m it dem visuellen Editor löschen. Dazu m üssen Sie das Polygon entw eder nochm als zeichnen oder im Quellcode editieren. Das Rechteck w ird m it x-

Hot Spots werden in Dreamweaver zusammen mit dem Bild übertragen, wenn Sie ein Bild mit Imagemap von einem Dokument in ein anderes über die Zwischenablage kopieren.

222

Bildtechniken

und y-Koordinaten für links oben und rechts unten definiert. Der Kreis w ird m it den x- und y-Koordinaten des Mittelpunkts sow ie der Größe des Radius beschrieben. Das Polygon w ird durch die x- und y-Koordinaten jedes einzelnen Punktes festgelegt: < im g src= "im g/ m ap.jpg" w idth= "337" height= "151" usem ap= "#Map" border= "0"> < m ap nam e= "Map"> < area shape= "rect" coords= "12,30,89,107" href= "rectangle.htm l"> < area shape= "circle" coords= "153,69,39" href= "circle.htm l"> < area shape= "poly" coords= "174,62,234,53,241,29,265,45,301,25,296,68,321,101,271,95,235,135,246,81" href= "star.htm l" target= "_blank" alt= "Star" title= "Star"> < / m ap> Der magemap-Editor ist in den  Eigenschafteninspektor des Bilds integriert. Wählen Sie zwischen drei Hot-Spot-Werkzeugen.

Der Quellcode des Beispiels zeigt w eiter, dass der MAP-Tag sich unm ittelbar an den Im g-Tag anschließt. Im Im g-Tag w ird außerdem das Attribut USEMAP gesetzt, w elches dem Bild die Im agem ap zuordnet. Die Im agem ap m uss einen Nam en erhalten. Wenn Sie keinen Nam en eintragen, setzt das Program m autom atisch den Nam en „Map“ ein, bei m ehreren Maps w erden diese durchnum m eriert. Die magemaps werden im Editor  als farbige transparente Flächen angezeigt. Hier haben wir für das Rechteck einen etwas größeren Hot Spot, für den Kreis einen kleineren gezeichnet.

 Sie w ählen m ehrere Hot Spots m it dem Cursor und gedrückter Um schalttaste aus.  Alle Hot Spots w ählen Sie m it BEFEHLSTASTE + A aus.  Zw ei oder m ehrere Hot Spots richten Sie aneinander aus m it M ODIFIZIEREN: AUSRICHTEN: LINKS- oder RECHTS-bündig, OBEN oder UNTEN ausrichten.  Die Größe von Hot Spots gleichen Sie an MIT M ODIFIZIEREN: AUSRICHTEN: AUF GLEICHE BREITE oder HÖHE EINSTELLEN.

Im agem ap

 Sie können die Schichtung der Hot Spots einstellen m it M ODIFIZIEREN: ANORDNEN: IN VORDERGRUND oder HINTERGRUND STELLEN. Wenn sich zw ei Im agem aps, w ie in unserem Beispiel Kreis und Stern, überlappen, hat das zuerst gezeichnete Elem ent (im Vordergrund) – in diesem Fall der Kreis – vor dem anderen Vorrang.

 Links Den einzelnen Hot Spots können Sie w ie gew ohnt Verknüpfungen zuordnen: Verknüpfung ausw ählen und gegebenenfalls ZIEL (target ) angeben. Jedem Hot Spot können Sie außerdem ein Alt-Attribut zuordnen. Benutzen Sie Im agem aps nicht, um eine direkte Verknüpfung herzustellen, sondern z.B. eine Verhaltensw eise zu unterstützen, w ird ein Dum m y-Link (javascript:;) eingesetzt (siehe unten). Seit Dream w eaver 3 w ird der so genannte Default URL nicht m ehr unterstützt, m öglicherw eise w eil dieses Attribut vom Internet Explorer 4.x ignoriert w ird. Der Default URL bew irkt, dass dem Bereich außerhalb der Hot Spots ein w eiterer Link zugeordnet w erden kann. Falls Sie einen solchen Link einbauen w ollen, können Sie im Hintergrund einen Hot Spot für die gesam te Fläche des Bildes festlegen und m it einem Link belegen. Im Übrigen w erden clientseitige Im agem aps von allen gängigen Brow sern ab Netscape 2.0 unterstützt.

 Komplexität In diesem Beispiel w ollen w ir eine Im agem ap m it Verhaltensw eisen und Ebenen kom binieren. Diese kom plexe Funktionalität ist m it Dream w eaver relativ einfach zu erstellen und w ird von Netscape 4.x und Internet Explorer 4.x zuverlässig dargestellt.  Nachdem Sie das Bild im Dokum entfenster eingestellt haben, zeichnen Sie einen Hot Spot (z.B. Kreis) und nehm en im Eigenschafteninspektor w eitere Einstellungen vor.  Öffnen Sie den Ebenen-Inspektor (F2) und zeichnen Sie eine Ebene und geben Text in das Ebenenfeld ein. Geben Sie der Ebene einen Nam en.  Stellen Sie die Ebene auf UNSICHTBAR (hidden ).  Öffnen Sie den Verhaltensw eiseninspektor SHIFT + F3 und stellen Sie die Kom patibilität auf BROWSER AB 4.0. Markieren Sie den Hot Spot im Bild.  Wählen Sie die Verhaltensw eise EBENE EIN-/ AUSBLENDEN und stellen Sie im Dialogfenster die Sichtbarkeit der Ebene auf Einblenden (show ). Belassen Sie das DefaultEreignis bei onMouseOver.  Wählen Sie die Verhaltensw eise EBENE EIN-/ AUSBLENDEN ein w eiteres Mal. Stellen Sie im Dialogfenster die Sichtbarkeit der Ebene auf Ausblenden (hide). Ändern Sie das Ereignis in onMouseOut.  Wählen Sie die Verhaltensw eise TEXT DEFINIEREN: STATUSLEISTENTEXT FESTLEGEN und geben Sie im Dialogfenster den Text ein. Belassen Sie das Default-Ereignis bei onMouseOver.  Sichern Sie die Datei.

223

224

Bildtechniken

 Überprüfen Sie das Ergebnis im Brow ser: Wenn alles richtig gelaufen ist, sollte, w enn Sie m it dem Cursor über den Hot Spot fahren, die bisher unsichtbare Ebene eingeblendet w erden. Gleichzeitig erscheint der Text unten in der Statusleiste. Wenn der Cursor den Hot Spot verlässt, w ird die Ebene w ieder ausgeblendet. Eine Standortkarte  mit interaktiver Imagemap: Wenn Sie mit dem Cursor über den Hot Spot fahren, wird die Ebene mit dem Namen des Standorts (z.B. Hamburg) eingeblendet.

 Unten links: Darstellung der Standortkarte im Internet Explorer 4.5. Das Alt-Tag wird als QuickInfo angezeigt. Unten rechts: Darstellung der Standortkarte im Netscape Navigator 4.5 

Web-Fotoalbum

Web-Fotoalbum Eine nette Ergänzung von Dream w eaver ist die etw as versteckte und schlecht dokum entierte Funktion WEB-FOTOALBUM ERSTELLEN. Dabei w erden in einem Batch-Prozess Bilder skaliert, Miniaturen (thum bnails) und dazugehörige Übersichts- und Navigationsseiten eingerichtet. Und das alles autom atisch. Nach m ehreren vergeblichen Versuchen, ein Fotoalbum auf dem Macintosh zu erstellen – es gibt bei Firew orks offensichtlich Problem e m it der Speicherzuw eisung – klappte es auf Window s gleich beim ersten Versuch. Dieses Feature funktioniert nur im Zusam m enspiel m it Firew orks 3 und ist m it BEFEHLE: WEB-FOTOALBUM ERSTELLEN… aufzurufen. In dem Dialogfenster können Sie folgende Param eter einstellen:  Titel, Zw ischenüberschriften und Zusatzinfos für die zu erstellenden Seiten  Angabe der Quellordner für die Bilder und der Zielordner für das fertige Album  Größe der Miniaturen, Anzahl der Spalten und Angabe der Dateinam en auf der Übersichtsseite  Festlegung des Bildform ates (GIF und JPEG) und der Abbildungsqualität für die Miniaturansichten  Festlegung des Bildform ates und der Bildskalierung für die Fotos  optionales Anlegen einer Navigationsseite für die Fotos Sobald der Prozess gestartet w ird, übergibt Dream w eaver die Scriptdatei (buildPhotoAlbum .jsf) an Firew orks, m it der das Program m alle w eiteren Schritte autom atisch abarbeitet. Es w erden im Zielordner eine Index-Seite und drei neue Verzeichnisse angelegt:  im ages für die Fotos  thum bnails für die Miniaturen  pages für die Navigationsseiten 

Web-Fotoalbum: In einem Dialogfenster lassen sich alle notwendigen Einstellungen für den ganzen Prozess einstellen.

225

226

Bildtechniken

Die generierten Seiten können Sie später m it Suchen-Ersetzen-Routinen in das gew ünschte Layout bringen, indem Sie z.B. die Textnavigation durch klickbare Bilder ersetzen, das Bild anders auf der Seite platzieren und die Schriften neu form atieren.

 Web-Fotoalbum: Index-Seite mit Titel und M iniaturen (links). Klicken Sie auf einen der Thumbnails, wird die Navigationsseite des großen Fotos geöffnet (M itte). Von hier aus gelangen Sie über die Textnavigation zur Übersichtsseite zurück, zum nächsten oder vorherigen Bild. Klicken Sie auf ein Foto, wird das Bild in ein neutrales Fenster geladen (rechts).

Alle Beispieldateien zu diesem Kapitel finden Sie auf der beigelegten CD-ROM : examples/ 053technic.

Oder Sie ändern das steuernde JavaScript in Configuration/ Com m ands/ Create Web Photo Album .js ab Zeile 392. Als Quellform ate können alle Bildform ate gew ählt w erden, die Firew orks verarbeiten kann. Die Abm essungen der Quelldateien können variieren, da das Program m sie proportional skaliert. Wenn Sie jedoch feste Größen berechnet haben w ollen, m üssen Sie die Bilder zuvor m anuell – oder in dem Bildverarbeitungsprogram m – skalieren. Photoshop kann m it der Web Photo Gallery eine ähnliche Funktion vorw eisen. Das Batchen der Bilder läuft etw as langsam er ab als bei Firew orks, doch der Funktionsum fang ist durchaus vergleichbar.

STYLE

STYLE 230 Stylesheets 230 CSS-Stile 235 Stylesheet bearbeiten

240 Ebenen 241 Ebenen anlegen 244 Ebenenfenster 246 Mit Ebenen arbeiten

230

Stylesheets

STYLESHEETS Either you have style, or you don't …

Stylesheets als Bestandteil von DHTML (dynam ic HTML) sind neben JavaScript eine w ichtige Erw eiterung von HTML. Traditionell w ird in HTML die Form durch den Inhalt bestim m t. Mit CSS (cascading style sheets) haben Sie die Möglichkeit, Erscheinungsbild und Funktionalität von HTML-Dokum enten besser als m it herköm m lichem HTML zu steuern. Zu CSS gehören, neben Text- und Layoutform atierungen, auch Spezialeffekte, Ebenen (layers) und Zeitleisten (tim elines). Ebenen und Zeitleisten w erden in eigenen Kapiteln behandelt. Wesentliche Kennzeichen von CSS sind:  Definieren des Erscheinungsbildes von HTML-Elem enten w ie z.B. < BODY> , < P> , < H1> etc.  Textform atierungen die über HTML-Tags hinausgehen: z.B. Zeilenabstand, absolute Schriftgröße, Schriftstärke, Dekoration  Pixelgenauigkeit: bei Layoutform atierungen für Elem ente w ie Bilder und Tabellen  absolute Maßsystem e: Pixel, Pica, Punkt, Millim eter etc.  externe Stylesheets: Anw enden von Stilen auf m ehrere Dokum ente  Gruppenbildung: Mehrere Attribute zur Beschreibung eines Stils w erden zusam m engefasst (z.B. Schriftart, -größe und -farbe).  Vererbung: Die Eigenschaften w erden vererbt. Ein Stil übernim m t standardm äßig im m er die Eigenschaften des übergeordneten Stils. Zum Beispiel w erden alle Eigenschaften des Body-Tags an das P-Tag w eitergegeben – es sei denn, sie sind durch einen eigenen Stil definiert w orden.  Kaskadieren beschreibt die System atik in der Anw endung der Regeln für CSS – lokale Stile überschreiben allgem eine Stile. Stile externer Stylesheets überschreiben kollidierende Stile interner Stylesheets.

CSS-Stile Im Folgenden w erden w ir uns drei verschiedene Arten von CSS-Form atierungen anschauen:  HTML-TAG-STILE form atieren ein bestim m tes HTML-Tag neu. In diesem Beispiel w erden dem Absatzform at „Überschrift 1 (H1)“ bestim m te typografische Attribute zugew iesen: H1{ font-fam ily:Verdana,Arial,Helvetica,sans-serif; font-size:12px; font-w eight:bold; color:#003366; }

 BENUTZERDEFINIERTE STILE (classes) sind eigene Stildefinitionen, die ähnlich w ie Form atvorlagen in einer Textverarbeitung funktionieren. Sie sind unabhängig von

CSS-Stile

HTML-Tags .m einstil, können aber auch m it einem HTML-Elem ent assoziiert w erden h1.m eineueberschrift. Klassen w erden m it einen Punkt nach dem Selektor gekennzeichnet. Dieser Stil kann unabhängig von Absatzform at m it dem Tag < SPAN CLASS = "m einstil"> auf eine beliebige Ausw ahl angew endet w erden, oder stehen im Zusam m enhang m it einem anderen HTML-Elem ent z.B. < TD CLASS = "m einstil"> . .m einstil{ font-fam ily: Arial, Helvetica, sans-serif; font-size: 14px; color: #339933 }

 CSS-SELEKTOR-STILE w erden für Kom binationen bestim m ter Tags eingesetzt. Zum Beispiel soll, im m er w enn eine Überschrift 1 (H1) in einer Tabellenzelle steht, eine bestim m te Form atierung angew endet w erden: td h1{ font-fam ily: Verdana, Arial, Helvetica, sans-serif; font-size: 12pt; color: #000066 }

Ein w eiterer CSS-Selektor-Stil w ird m it dem ID-Selektor – im m er w enn ein Tag z.B. das Attribut-Wertepaar ID = "m einstil" enthält – angew endet: #m einstil{ font-fam ily: Georgia, "Tim es New Rom an", Tim es, serif; font-size: 36px; }

Zu den CSS-Selektor-Stilen gehören auch die PSEUDO-KLASSEN (pseudo classes). Bekannteste Beispiele sind die Link-Pseudo-Klassen, m it denen das Erscheinungsbild von Verknüpfungen definiert w ird. Pseudo-Klassen w erden m it einem Doppelpunkt (colon ) nach dem Selektor gekennzeichnet: A:link{ color:#FF6633; text-decoration:none; } A:visited{ color:#FF6633; text-decoration:none; } A:active{ color:#FF6633; text-decoration:none; } A:hover{ color:#666666; text-decoration:none; }

231

232

Stylesheets

 Einstellungen In den Voreinstellungen  für CSS-Stile können Sie festlegen, wie Dreamweaver mit CSS-Kurzschrift umgehen soll.

Bevor Sie anfangen, m it Stylesheets zu arbeiten, m achen Sie sich m it den Einstellungsm öglichkeiten für Stylesheets vertraut. Sie öffnen die Voreinstellungen m it BEARBEITEN: VOREINSTELLUNGEN… Im Einstellungenfenster können Sie genau festlegen, w ie Dream w eaver m it Stilen in Kurzschrift um geht. Kurzschrift ist eine Kom bination m ehrerer Attribute in einem Stil – zum Beispiel: .kurzschrift { font: bold 10pt Verdana, Arial, Helvetica, sans-serif; color: #FF9999}

Die norm ale Notierung hierzu sieht folgenderm aßen aus: .langschrift { font-fam ily: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; fontw eight: bold; color: #FF9999}

Vorteil von Kurzschrift ist der kürzere Code, Nachteil die Inkom patibilität m it älteren Brow sern. Wenn Sie keine Kurzschrift einsetzen w ollen, brauchen Sie die Voreinstellungen nicht zu verändern.

 Styles

Es wäre wünschenswert, wenn die nächste Version von Dreamweaver – wie andere Editoren schon seit langem – strukturierten Code in das Stylesheet schreiben würde und nicht „Bandwurm-Strings“ in einzelne Zeilen.

Sie haben drei Möglichkeiten CSS-Stile einzusetzen:  als externes Stylesheet, w elches m it Ihrem HTML-Dokum ent verknüpft w ird. Das externe Stylesheet hat den großen Vorteil, dass es als eigenständiges Dokum ent m it beliebig vielen HTML-Dateien verknüpft w erden kann. Jede Änderung der Stildefinitionen im externen Stylesheet hat Ausw irkungen auf jede m it diesem Stylesheet verknüpften Seiten. Externe Stylesheets bieten also die Möglichkeit, alle in der Site verw endeten Stile zusam m en zu verw alten. Der Nachteil beim Arbeiten m it externen Stylesheets ist die kreative Unfreiheit: Die Feinheiten des Layouts sollten bereits sehr genau definiert sein. Wenn Sie am Ende der Entw icklung einige Dutzend Stile in Ihrem Stylesheet verw alten w ollen, durch deren Benennung, genaue Funktion und Eigenschaften Sie nicht m ehr ganz durchblicken, ist das w enig erfreulich.  als im Head-Bereich Ihres HTML-Dokum entes verankertes Stylesheet. Der Vorteil ist, dass – anders als beim externen Stylesheet – die Verknüpfung zw ischen Dokum ent und Stylesheet nicht verloren gehen kann. Nachteilig ist, dass Änderungen

CSS-Stile

der Stildefinitionen nur für jew eils ein Dokum ent gelten. Sinnvoll kann deshalb eine Kom bination von externem und internem Stylesheet sein. Im externen Stylesheet w erden die allgem einen Stile verw altet (global), im internen Stylesheet die Stile, die nur eine einzelne Seite betreffen (local). 

Ein internes Stylesheet wird direkt im Head-Bereich Ihres HTM L-Dokumentes verankert.

 als inline style in direkter Verbindung m it dem angew endeten Tag. Diese Stilform atierung kom m t ohne Stylesheet aus, hat gegenüber der HTML-Form atierung keine Vorteile und w ird daher von Dream w eaver zw ar angezeigt, aber nicht aktiv unterstützt: < P STYLE= "color:#666666"> TEXT< / P>

 Voraussetzungen Die heute im Einsatz befindlichen Brow ser der vierten Generation unterstützen nur einen Bruchteil der Möglichkeiten, die CSS Level1 vorsieht. Dum m erw eise sind Um fang und auch Darstellung vieler Stildefinitionen in Internet Explorer 4.x und Netscape 4.x unterschiedlich, so dass Sie jeden Ihrer Stile in den gew ünschten ZielBrow sern testen sollten. Die Entw icklung bei Brow sern bew egt sich jedoch eindeutig zugunsten von CSS. Bereits Internet Explorer 5.0 zeigt eine große Anzahl w eiterer Eigenschaften an. Dream w eaver unterstützt alle Stile von CSS Level1, kann jedoch nur einige davon anzeigen. Das Fenster CSS-Stile ist m it der Program m version 4 entscheidend verbessert w orden. So können jetzt über das Fensterm enü (kleines schw arzes Dreieck rechts oben) neben den bisherigen Funktionen BEARBEITEN… , D UPLIZIEREN… , LÖSCHEN, ÜBERNEHMEN auch w ählen:  NEUER STIL: Ein neuer Stil w ird definiert.  STYLESHEET BEARBEITEN  STYLESHEET ANFÜGEN  STYLESHEET EXPORTIEREN STYLESHEET ANFÜGEN, NEUER STIL und STYLESHEET BEARBEITEN können auch m it den Icons im Fuß des Fensters ausgelöst w erden.

233

234

Stylesheets

 CSS-Stile Um einen Stil zu bearbeiten,  doppelklicken Sie ihn im Fenster „CSS-Stile“ oder wählen Sie „Bearbeiten“ aus dem Fenstermenü.

Im Fenster CSS-Stile (FENSTER: CSS-STILE oder SHIFT + F11) können Sie entw eder einen neuen Stil für Ihr HTML-Dokum ent festlegen, einen vorhandenen Stil in Ihrem Dokum ent oder die Stile eines externen Stylesheets bearbeiten. Im Fensterm enü (kleiner schw arzer Pfeil) w ählen Sie folgende Optionen:  NEUER STIL… legt einen neuen Stil an. Wahlw eise klicken Sie auf das kleine Icon für ein neues Dokum ent unten im Dokum entfenster. Im Fenster NEUER STIL legen Sie den Stil-Typ fest: BENUTZERDEFINIERTER STIL, HTML-TAG oder CSS-SELEKTOR. Der Nam e sollte nur alphabetische Zeichen enthalten. Benutzerdefinierte Stile beginnen im m er m it einem Punkt vor dem Nam en .blau.  ÜBERNEHMEN übernim m t die Stile eines bereits m it dem Dokum ent verlinkten Stylesheets in die Stileausw ahl.  BEARBEITEN öffnet das Fenster STILDEFINITIONEN, in dem Sie die Eigenschaften Ihres Stils definieren.  DUPLIZIEREN… kopiert einen vorhandenen Stil.  LÖSCHEN löscht einen Stil aus dem Menü. Wahlw eise klicken Sie auf das kleine Icon m it dem Papierkorb unten im Dokum entfenster. Diese Befehle erreichen Sie auch über das Kontextm enü, CTRL + M AUSTASTE oder Window s RECHTE M AUSTASTE, w enn Sie auf einen Stil im Menü klicken. Um einen Stil um zubenennen, gibt es zw ei Wege:  Entw eder Sie duplizieren ihn, geben dem Duplikat einen neuen Nam en und entfernen das Original,  oder Sie ändern den Nam en direkt im Quellcode. Seien Sie jedoch vorsichtig m it Um benennungen, w enn Sie den Stil bereits in Ihrem Dokum ent eingesetzt haben. Besondere Vorsicht ist geboten, w enn Sie den Nam en eines Stils in einem externen Stylesheet um benennen. Seien Sie sicher, dass dieser Stil in keinem anderen Dokum ent eingesetzt w ird. Notfalls m üssen Sie alle Vorkom m en des alten Nam ens in der gesam ten Site per Suchen-Ersetzen ändern. Um das Stylesheet, also die Liste aller für das Dokum ent vorgesehen Stile, zu öffnen, klicken Sie das kleine Icon m it dem Listensym bol, zw ischen dem Icon für NEUES DOKUMENT und PAPIERKORB. Alternativ w ählen Sie TEXT: CSS-STILE: STYLESHEET BEARBEITEN… oder SHIFT + BEFEHLSTASTE + E (Window s: SHIFT + STRG + E)

Stylesheet bearbeiten

235

Stylesheet bearbeiten Im Fenster CSS-STILE w erden alle im Stylesheet vorkom m enden Stile – auch die eines externen Stylesheet – angezeigt. Um ein externes Stylesheet m it dem HTMLDokum ent zu verknüpfen, w ählen Sie STYLESHEET ANFÜGEN. Im Fenster STYLESHEET AUSWÄHLEN w ählen Sie dann aus, w ie Sie das Dokum ent verknüpfen w ollen:  als verknüpftes Dokum ent: Das Stylesheet w ird im Head-Bereich m it dem LinkTag aufgerufen: < link rel= "st ylesheet" href= "../ ../ css/ st yles.css">

 als im portiertes Dokum ent: Das Stylesheet w ird im Bereich des Stylesheets im portiert: < st yle t ype= "text/ css"> < !-@im port "../ ../ css/ st yles.css"; --> < / st yle>

 Im Fenster „Stylesheet bearbeiten“ werden alle im Stylesheet enthaltenen Stile gelistet. Um einen der Stile zu bearbeiten, markieren Sie ihn – im unteren Teil des Fensters werden seine Eigenschaften angezeigt.

< st yle t ype= "text/ css"> < !-@im port "../ ../ css/ st yles.css"; @im port "../ ../ css/ st yles_extra.css"; H1, H2, H3 { color: #000000 } --> < / st yle>

Um einen der Stile zu bearbeiten, m arkieren Sie ihn und w ählen Sie BEARBEITEN… oder doppelklicken Sie den Stil. Sie können die Stile in diesem Fenster auch DUPLIZIEREN… , LÖSCHEN oder m it NEUER STIL… einen neuen Stil hinzufügen.

 Stildefinitionen 

Im Fenster „Stildefinition“ können jedem Stil unterschiedliche Eigenschaften aus verschiedenen Kategorien zugeordnet werden.

236

Stylesheets

Im Fenster STILDEFINITION legen Sie die Eigenschaften des Stils fest. Die von Dream w eaver nicht dargestellten Stileigenschaften sind jew eils m it einem Sternchen m arkiert. Für eine detaillierte Erläuterung der einzelnen Einstellungen klicken Sie auf die Schaltfläche HILFE im Einstellungsfenster, um die Online-Hilfe zu öffnen.

 Externes Stylesheet In diesem Dokument sind sowohl  ein externes Stylesheet styles.css, sowie eine Reihe interner Stildefinitionen eingebunden.

Ein externes Stylesheet können Sie in Dream w eaver auf zw ei Weisen bearbeiten:  Sie greifen auf ein vorhandenes Stylesheet zu, indem Sie es im Fenster STYLESHEET BEARBEITEN verknüpfen. Im Fenster ENTFERNTES STYLESHEET w ählen Sie die externe Datei aus. Jetzt können Sie die Stildefinitionen des externen Stylesheet editieren, indem Sie zuerst auf BEARBEITEN… klicken. Im nächsten Schritt m arkieren Sie einen der Stile und klicken aberm als auf BEARBEITEN.  Oder Sie erzeugen ein externes Stylesheet, indem Sie VERKNÜPFEN im Fenster STYLESHEET BEARBEITEN anklicken und dann im Fenster ENTFERNTES STYLESHEET HINZUFÜGEN einen Dateinam en eingeben, der m it .css endet. In w elchem Verzeichnis Sie das CSSStylesheet abspeichern, ist nicht w ichtig. Vor dem Anlegen Ihres externen Stylesheet m uss Ihr HTML-Dokum ent gespeichert sein.

 CSS-Stile anwenden Um eine CSS-Formatierung  zurückzunehmen, markieren Sie das Element und wählen Sie „keine“ im Fenster „CSS-Stile“.

Neu hinzugekommen bei Dreamweaver 4 ist die M öglichkeit, Tabellenzellen mit CSS-Class auszuzeichnen. Das ist zwar praktisch, sollte jedoch vorsichtig eingesetzt werden, da es zu unbeabsichtigten Effekten kommen kann. So wird z.B. auf dem Internet Explorer 5 (M ac) die Farbe des CSS-Stiles auf die Tabellenrahmen übertragen.

Um einen CSS-Stil auf ein Elem ent anzuw enden, m üssen Sie zuerst im Dokum entfenster das Elem ent m arkieren, dem Sie den Stil zuw eisen w ollen. Am besten m achen Sie dies m it dem Tag-Selektor unten links in der Statusleiste.  Wie Sie im Fenster CSS-STILE sehen können, w ird das gleiche Tag in der Stileliste angezeigt. Sie können statt des angezeigten Tags auch ein anderes aus der Liste w ählen. Klicken Sie links in der Liste der verfügbaren Stile auf den gew ünschten Stil.  Alternativ können Sie den Stil auch über TEXT: CSS-STILE: zuw eisen  Wollen Sie eine CSS-Form atierung zurücknehm en, klicken Sie im Menü oder Fenster CSS-STILE auf KEINE.

Stylesheet bearbeiten

 Code und Darstellung der Stildefinitionen des internen Stylesheets für das Beispieldokument stylesheet_intern.html

 Code und Darstellung der Stildefinitionen des externen Stylesheets für das Beispieldokument stylesheet_extern.html

237

238

Stylesheets

Ganz links unten im Fenster CSS-STILE haben Sie die Möglichkeit, das unm ittelbare Anzeigen der Stilform atierung im Dokum entfenster zu steuern. Klicken Sie in das Kontrollkästchen (Häkchen), w erden alle Form atierungen sofort angew endet. Im anderen Fall klicken Sie auf die Schaltfläche ANWENDEN, um die Form atierung sichtbar zu m achen. Zum Ändern eines Stiles, ohne diesen auf die aktuelle Ausw ahl anzuw enden, kann das Häkchen deaktiviert w erden.

 Kontextmenü Alle Befehle unter TEXT: CSS-STILE stehen auch im Kontext zur Verfügung, w enn Sie m it gedrückter CTRL-TASTE (Window s: RECHTE M AUSTASTE) in einen CSS-form atierbaren Bereich im Dokum entfenster klicken.

 Kombinationen Sie können auch CSS-Stile und HTML-Stile m iteinander kom binieren. Grundsätzlich gilt im m er die Regel: Die Stildefinition, die dem ausgezeichneten Elem ent am Nächsten steht, w ird durch den Brow ser angew endet. In folgendem Beispiel w ird das Wort „Text“ blau dargestellt: < font color= "#CC0033"> < span class= "blau"> Text < / span> < / font>

w ährend das Wort „Text“ in dieser Notierung rot dargestellt w ird: span class= "blau"> < font color= "#CC0033"> < Text < / font> < / span>

Kom binierte Form atierungen haben den Nachteil, einen längeren Code zu erzeugen. Sinnvoll sind doppelte Form atierungen, w enn die Seite auch m it Brow sern, die kein CSS verstehen, betrachtet w erden soll. In diesem Beispiel sind  unterschiedliche CSS- und HTM L-Stile miteinander kombiniert.

Stylesheet bearbeiten

239

 Konflikte In Fällen, in denen ein HTML-Tag-Stil m ehrerer Stylesheets – beispielsw eise eines externen und eines internen Stylesheets – auf das gleiche Elem ent z.B. das P-Tag angew endet w ird, kann es zu Stilkonflikten kom m en. Hierfür halten die CSS1-Spezifikationen einige Regeln bereit, dam it der Brow ser w eiß, w as er darstellen soll:  Der Brow ser schaut in allen verfügbaren Stylesheets nach Regeln, die das fragliche Elem ent z.B. das P-Tag definieren. Findet er keine Regel, w erden die Eigenschaften des Body-Tags vererbt. Findet er eine Regel, w endet er sie an, findet er m ehrere, w endet er die letztere der Regeln an – und zw ar in der Reihenfolge, w ie Sie im HTML-Dokum ent stehen.  Als Nächstes w erden die Regeln nach ausdrücklicher Gew ichtung (explicit w eight ) sortiert. Sie können als Autor der Seite einem Stil eine Wichtigkeit (im portance) zuordnen, w elche alle anderen Regeln für dieses Elem ent überstim m t. Sie versehen den Stil im Quellcode einfach m it dem Zusatz !im portant: P {font-color: #CC0033 !im portant}

 Weiter gew ichtet der Brow ser die Regeln nach Herkunft. Als Autor haben Sie m it Ihren Stylesheets grundsätzlich Vorrang vor lokalen Stylesheets, die der Leser für seinen Brow ser eingestellt hat. Ausgenom m en der Leser hat alle Regeln seines Stylesheets m it !im portant gekennzeichnet.  Der Brow ser unterscheidet nach einem ausgeklügelten Punktesystem , ob eine Regel allgem einer oder spezifischer Art ist. In diesen Bew ertungen w erden die Attribute benutzerdefinierter Stile (class attributs) sow ie die Tag-Nam en des Selektors berücksichtigt. ID-Selektoren z.B. haben eine sehr hohe spezifische Wertung.  Als Letztes bew ertet der Brow ser die Reihenfolge der Notierung, so w ie sie im HTML-Dokum ent aufeinanderfolgen. Wenn Sie auf einer Seite vertikale Abstände m it BR-Tags herstellen w ollen, sollten Sie – um brow serkom patible Ergebnisse zu bekom m en –, die Tags m it CSS form atieren und vor jedes einzelne Tag zusätzlich einen   (nonbraking space) setzen. Optim al für pixelgenaue vertikale Abstände sind nach w ie vor transparente GIFs.

M ehr zu diesem Bewertungssystem erfahren Sie in den CSS1-Spezifikationen. Im Rahmen dieses Buchs kann das Thema CSS nur sehr oberflächlich angeschnitten werden. Weiterführende Fragen werden im Internet unter folgenden Adressen beantwortet: Allgemeines zu Stylesheets www.w3.org/ Style/ CSS1-Spezifikationen www.w3.org/ Style/ CSS/ CSS2-Spezifikationen www.w3.org/ TR/ REC-CSS2/ Empfehlenswert ist in diesem Zusammenhang das Buch Webdesigner's‚ Guide to Typography von M ichael Leary, Daniel Hale und Andrew Devigal. Die Beispiele zu diesem Kapitel finden Sie auf der CD-ROM : examples/ 06style/ 061css Beispiel 073_01.html

Siehe Kapitel Transparente Bilder auf Seite 210.

240

Ebenen

EBENEN Layers are the web designers answer to Photoshop.

Voreinstellungen für Ebenen



Ebenen sind – als Bestandteil von CSS – eine der größten Bereicherungen für die Gestaltung von Webseiten. Ebenen lassen Elem ente pixelgenau im Layout fixieren, Elem ente schichten (layer) und in Kom bination m it Verhaltensw eisen und Zeitleisten die – bisher eher statischen – Seiten zum Leben zu erw ecken. Ebenen w erden – w ie auch andere Elem ente von CSS nur von 4.x Brow sern interpretiert. Sie können in Ebenen alle HTML-Objekte einsetzen: Text, Bilder, Tabellen, w eitere Ebenen. Ehe Sie m it Ebenen zu arbeiten beginnen, sollten Sie zw ei Dinge beachten:  Erstens das Netscape-Resize Fix hinzufügen. Dieses JavaScript beseitigt einen Netscape-Bug, der Seitenelem ente nicht m ehr richtig positioniert, nachdem die Fenstergröße verändert w urde. Wenn Ihre Seiten m it Netscape 4.x betrachtet w erden sollen, ist dies unbedingt anzuraten. Sie finden ihn im Menü BEFEHLE: NETSCAPERESIZE FIX HINZUFÜGEN/ ENTFERNEN. Sie benutzen den gleichen Befehl auch w ieder zum Entfernen des Scripts.  Zw eitens die Voreinstellungen für Ebene öffnen: BEARBEITEN: VOREINSTELLUNGEN oder BEFEHLSTASTE + U. Hier können Sie für neu anzulegende Ebenen festlegen:  Das Standard-Tag, m it dem die Ebene im Code geschrieben w erden soll. DIV ist der Standardw ert. Sie können auch das Tag SPAN verw enden. ILAYER und LAYER verw enden Sie nur bei Netscape-Ebenen. Diese Ebenen sind m it keinem anderen Brow ser kom patibel.  Die Einstellung der Sichtbarkeit der Ebene:  DEFAULT (standard) stellt keine Sichtbarkeitsdefinition dar. Die m eisten Brow ser interpretieren es als inherit (vererben).  INHERIT (vererben) übernim m t die Sichtbarkeit der übergeordneten Ebene.  VISIBLE (sichtbar) zeigt die Ebene an – unabhängig vom Wert der übergeordneten Ebene.  HIDDEN (versteckt, unsichtbar) blendet die Ebenen aus – unabhängig vom Wert der übergeordneten Ebene.  Höhe und Breite der Ebene in Pixelw erten

Ebenen anlegen

 eine eventuelle Hintergrundfarbe  ein eventuelles Hintergrundbild  Angabe, ob die in einer anderen Ebene erzeugte Ebene autom atisch verschachtelt angelegt w ird  Einsatz des oben erw ähnten Netscape-Resize-Fixes autom atisch beim Anlegen einer Ebene ins Dokum ent

Ebenen anlegen Sie haben verschiedene Möglichkeiten, eine neue Ebene im Dokum entfenster anzulegen:  Ziehen Sie die Ebene aus der Objektepalette auf das Dokum entfenster.  Klicken Sie auf die Schaltfläche EBENE in der Objektepalette. Ziehen Sie dann m it dem Cursor eine neue Ebene auf – an der Stelle, an der Sie sie haben w ollen.  Wählen Sie aus dem Menü EINFÜGEN: EBENE.

SymSymbol bol

Rahm en Anfasser Rahmen Anfasser



Sichtbarkeit Sichtbarkeit

Nam e Name

Z-Index Z-Index

Eine neue Ebene wird angelegt.

241

242

Ebenen

 Ebenen manipulieren Sie können die neue Ebene im Dokum entfenster aktivieren, indem Sie m it dem Cursor in die Ebene klicken. Um die Ebene zu verschieben, fassen Sie die Ebene am Rahm en oder am Ebenen Sym bol (oben links). Die Größe der Ebene verändern Sie, indem Sie an einem der schw arzen Anfasser (handle) ziehen. Sie können die Ebene auch m it den Pfeiltasten der Tastatur jew eils um einen Pixel verschieben. Wenn Sie gleichzeitig die SHIFT-TASTE gedrückt halten, verschieben Sie die Ebene um jew eils fünf Pixel. Mit der BEFEHLSTASTE in Kom bination m it den Pfeiltasten der Tastatur können Sie jew eils eine der Begrenzungen einer Ebene um einen Pixel verschieben, also die Ebene von dieser Seite aus verkleinern oder vergrößern. Bei gleichzeitig gedrückter SHIFT-TASTE w erden die Bew egungen fünf Pixel groß. Sie können auch m ehrere Ebenen ausw ählen, indem Sie beim Klicken auf die Rahm en der Ebenen die SHIFT-TASTE gedrückt halten (erw eiterte Ausw ahl). Diese Ebenengruppe können Sie dann auch m it den Pfeiltasten der Tastatur bew egen.

 Ebenen ausrichten Wenn Sie m ehrere Ebenen ausw ählen, können Sie diese auch aneinander ausrichten, sow ie die Größe angleichen. Die Befehle zum Ausrichten von Ebenen finden Sie unter M ODIFIZIEREN: AUSRICHTEN Sie haben auch hier die Möglichkeit, die Pfeiltasten der Tastatur einzusetzen. Mit gedrückter BEFEHLSTASTE w erden die Ebenen je nach Pfeiltaste ausgerichtet. Schritt 1 Ebenen ausw ählen

Schritt 2 Linksb ü ndig

Schritt 3 gleiche Breite

Schritt 4 gleiche Hö he

Schritt 5 oben ausrichten

M ehrere Ebenen werden  aneinander ausgerichtet und von der Größe angeglichen.

Mit ANSICHT: RASTER: AM RASTER AUSRICHTEN lassen sich Ebenen im Dokum entfenster am Gitternetz einrasten. Wenn Sie erreichen w ollen, dass sich Ebenen exakt nebeneinander positionieren, w ählen Sie M ODIFIZIEREN: ANORDNEN EBENENÜBERLAPPUNGEN VERHINDERN. Wenn Sie jetzt eine Ebene auf eine andere schieben, prallt diese an der Begrenzung der Ebene ab und legt sich genau daneben.

Ebenen anlegen

243

 Eigenschafteninspektor Die Eigenschaften der Ebene w erden im Eigenschafteninspektor angezeigt. Sie können auch von hier aus die Eigenschaften der Ebene ändern:  EBENEN ID: den Nam en der Ebene  POSITION: über die Werte von OBEN, LINKS, BREITE und HÖHE. Default-Wert ist PIXEL (px).  Z-INDEX: die Stapelreihenfolge der Ebene  SICHTBARKEIT  HINTERGRUNDBILD  HINTERGRUNDFARBE Für die Einstellungen – in der erw eiterten Darstellung – w ie TAG, ÜBERLAUF und ABSCHNEIDEN, finden Sie detaillierte Inform ationen in der Online-Hilfe.

Leere Ebenen in Dreamweaver (z.B. nur mit BG-COLOR, aber ohne sonstigen Inhalt) führen im Internet Explorer 5.x zu Problemen: Der gesamte Seiteninhalt wird erst nach der leeren Ebene dargestellt. (Ein   behebt das Problem.)



Der Eigenschafteninspektor im M odus „Ebenen“

 Quellcode Wählen Sie eine Ebene aus. Wenn Sie ANSICHT: VISUELLE HILFSMITTEL: UNSICHTBARE ELEMENTE eingeschaltet haben, sehen Sie im Dokum entfenster ein gelbes Ebenen-Icon. Öffnen Sie das Fenster QUELLCODE. Der Code für die ausgew ählte Ebene ist m arkiert und sieht z.B. so aus: < div id= "Layer1" st yle= "position:absolute; w idth:200px; height:115px; z-index:2; left: 158px; top: 32px; visibilit y: visible">

 Verschachtelte Ebenen Wenn Sie eine Ebene in einer anderen Ebene zeichnen, w ird diese autom atisch (default ) als verschachtelte Ebene angelegt. Die Ebenen sind m iteinander verbunden. Bew egen Sie die Ursprungs-Ebene (parent ), w ird die verschachtelte Ebene (child ) m it verschoben. Bew egen Sie jedoch die verschachtelte Ebene, bew egt sich die Ursprungsebene nicht m it. Detaillierte Inform ationen hierzu finden Sie in der Online-Hilfe.

Am sichersten kopieren Sie eine oder mehrere Ebenen, indem Sie das (die) EbenenIcon(s) im Dokumentfenster auswählen und über die Zwischenablage oder per Drag & Drop in ein anderes Dokumentfenster kopieren. Sie können jedoch auch eine Ebene direkt auswählen und über die Zwischenablage oder per Drag & Drop kopieren.

244

Ebenen

Verschachtelte Verschachtelte Ebene Ebenen Verschachtelte Ebenen  und Ebenenfenster

Parent Child Parent Child

Hintergrundfarbe Hintergrundfarbe

Ebenenfenster Das beste Werkzeug, m it Ebenen zu arbeiten, ist das Ebenenfenster: FENSTER: EBENEN (F2). Es ist in drei Spalten gegliedert:  SICHTBARKEIT: das Auge  NAME: die Ebenen ID  Z-INDEX: die Stapelreihenfolge AUCH ÜBERLAPPUNGEN VERHINDERN können Sie hier ein- und ausschalten. Um eine oder m ehrere Ebenen auszuw ählen, klicken Sie auf den (die) Nam en der Ebene(n).

 Sichtbarkeit Klicken Sie in einer Zeile auf das Auge, w ird die Sichtbarkeit der Ebene verändert:  KEIN AUGE: Die Sichtbarkeit ist auf DEFAULT eingestellt oder w ird von der Ursprungsebene vererbt (inherited ).  OFFENES AUGE: Die Ebene ist sichtbar (visible).  GESCHLOSSENES AUGE: Die Ebene ist unsichtbar (hidden ).

Ebenenfenster

245

 Name Die Ebenen ID ist w ichtig, w enn Sie m it Verhaltensw eisen arbeiten w ollen. Dream w eaver vergibt zw ar autom atisch Nam en (Layer1, Layer2 usw .), jedoch sollten Sie, um die Ebenen besser unterscheiden zu können, eigene Nam en vergeben. Doppelklicken Sie auf den Nam en einer Ebene und geben einen neuen ein.

 Z-Index Der Z-Index oder die Stapelreihenfolge ist die dritte Dim ension einer Ebene. Er bestim m t die Schichtung der Ebenen, w ie sie im Brow ser sichtbar sind. Je höher die Zahl, desto w eiter oben liegt die Ebene. Theoretisch können Sie eine beliebig hohe Zahl für den Z-Index einsetzen, um zu erreichen, dass die Ebene im m er oben ist. Bei der Eingabe einer 30-stelligen Zahl w ird im Ebenenfenster die Zahl 2.147.483.647 dargestellt. Die Zahl w ird jedoch im Code richtig festgehalten und die Datei in Netscape Navigator 4.7 korrekt angezeigt. Sie ändern die Stapelreihenfolge im Ebenenfenster, indem Sie entw eder die Ebene m it dem Cursor nach oben oder unten verschieben oder im Z-Index einen anderen Wert eingeben.

 Überlappungen verhindern

Verwenden Sie am besten nur kleingeschriebene alphabetische Zeichen, da diese von allen CSS-kompatiblen Browsern richtig interpretiert werden.

Sie können verschachtelte Ebenen von der Ursprungsebene lösen, indem Sie sie nach oben verschieben. Sie können auch eine Ebene in eine andere verschachteln, indem Sie sie mit gedrückter Befehlstaste unter eine andere Ebene ziehen.

Das Verhindern von Überlappungen ist w ichtig für die Konvertierung von Seiten m it Ebenen in 3.0-Brow ser-kom patible Dokum ente, da diese m it Tabellen aufgebaut w erden. Planen Sie deshalb das Layout m it Ebenen gründlich, w enn Sie vorhaben die Seite zu konvertieren. Das nachträgliche Neuarrangieren eines Dokum ents, das m it überlappenden Ebenen angelegt w urde, m uss von Hand gem acht w erden und ist fast nicht m öglich.

 Ebenen konvertieren Sie können ein Dokum ent m it Ebenen in ein 3.0 Brow ser-kom patibles Dokum ent konvertieren, w enn Sie keine überlappenden oder verschachtelten Ebenen eingesetzt haben: DATEI: KONVERTIEREN: 3.0 BROWSER-KOMPATIBEL…

M ehr hierzu finden Sie im Kapitel Tabellen auf Seite 136.

246

Ebenen

Mit Ebenen arbeiten Um die Rahm en der Ebenen an- und auszuschalten, w ählen Sie ANSICHT: VISUELLE HILFSMITTEL: EBENENRAHMEN. Unsichtbare Elem ente sollten Sie angeschaltet lassen, da Sie so die Ebenen-Icons im m er im Auge behalten können.

 Inhalte einsetzen Die Ebene passt sich in Ihren Dim ensionen den eingesetzten Inhalten an: Sie expandiert. Fügen Sie z.B. ein großes Bild in eine kleinere Ebene ein, w ird die Ebene auf die Größe des Bildes gebracht. Ähnlich verhält es sich m it Text. Je m ehr Text Sie in eine Ebene schreiben, desto m ehr verlängert sie sich nach unten. Dieses Verhalten der Ebene w ird durch den Überlauf (overflow ) geregelt. Am besten lassen Sie den DEFAULT von Überlauf eingestellt, da die Ergebnisse bei VISIBLE, HIDDEN, SCROLL und AUTO von Brow ser zu Brow ser stark variieren. Ähnliches gilt für Abschneiden (siehe auch Online-Hilfe). In dem M aster  der Eucerin-Website wird die Ebene „indications“ durch ein M ouseOver sichtbar geschaltet. Die einzelnen grafischen Schaltflächen werden durch M ouseOver ein- und ausgeschaltet. Die transparenten GIFs in der Peripherie der Ebene sorgen dafür, dass das M enü bei OnM ouseOut wieder kollabiert.

EbenenEbene Icon indications

transparente EbenenGIFs Icon

Ebene transparente indications GIFs

Mit Ebenen arbeiten

247

 Navigation mit Ebenen Vorbereitend für eine Navigation m it Ebenen w urde eine Testreihe angelegt, um zu untersuchen, w ie Ebenen am besten m it Verhaltensw eisen kooperieren. Die Idee für die Navigation w ar, m it Hilfe von Ebenen Popup-Menüs zu realisieren, die ähnlich w ie die Menüs von oben herunterklappen, w enn m it dem Cursor darauf gezeigt w ird. Einzelne Menüpunkte m it einem MouseOver-Effekt sollen angew ählt w erden können und w ieder zuklappen, w enn der Cursor das Menü verlässt oder ein Menüpunkt ausgew ählt w ird. Es w urden verschiedene Wege erprobt. Am Ende stellte sich heraus, dass die praktikabelste Lösung eine Kom bination aus MouseOvers, transparenten Pixeln und Ebenen ist.

Auf der CD-ROM finden Sie die verwendeten Testdateien im Verzeichnis examples/ 06css/ layers_test.

Die Site, für die diese Navigation als M aster erstellt wurde, finden Sie im Internet unter: www.eucerin.com und www.eucerin.de.



Das globale Portal www.eucerin.com sowie die einzelnen Ländersites z.B. www.eucerin.de wurden mit navigierbaren CSS-Layers erstellt.

EXTEND

EXTEND 250 Verhaltensweisen

281 Dynamischer Content

250 Grundlagen 254 Verhaltensw eisen kurz vorgestellt

281 281 282 282 284 284 285

258 Zeitleisten 258 260 263 267 269

Zeitleisteninspektor Zeitleisten erstellen Objekte anim ieren Zeitleisten und Verhaltensw eisen Hinw eise

270 Anpassen und Erweitern 271 271 272 274 274 277 280

Objektepalette Eigene Objekte Befehle Menüs anpassen Tastaturkurzbefehle Erw eiterungen Hinw eise

Statische versus dynam ische Seiten Webanw endungen Server und Client Anw endungsserver und Datenbank Lastverteilung und Cloning Proprietäre Tags und Server Pages Zum Beispiel Java

287 Dreamweaver UltraDev 287 Arbeiten m it UltraDev 289 Kleiner UltraDev-Workshop

250

Verhaltensw eisen

VERHALTENSWEISEN Interactivity is the key to the web.

Die bisher in diesem Buch vorgestellten Dream w eaver-Features w aren alle w enig interaktiv. Wir w ollen in diesem Kapitel m it Hilfe von JavaScript erw eiterte Interaktionen erstellen. Viele JavaScript-Aktionen können m it Dream w eaver – bei dem sie Verhaltensw eisen heißen – erstellt w erden, ohne dass dazu spezielle Program m ierkenntnisse nötig w ären. In Dream w eaver können Sie JavaScript spielend leicht einsetzen und trotzdem professionelle Ergebnisse erhalten. Verhaltensw eisen erlauben uns zum Beispiel  das Einspielen von Musik, w ährend eine Seite lädt,  das Laden einer Webseite in einem neuen, vordefinierten Fenster,  das Austauschen von Bildern (rollover). Wenn ein Besucher m it seinem Mauszeiger über ein Bild fährt, w ird dieses m it einem anderen Bild vertauscht. Dies sind nur einige der Möglichkeiten, die Verhaltensw eisen bieten. Im Lieferum fang von Dream w eaver sind 26 Aktionen enthalten, die auf den folgenden Seiten kurz vorgestellt w erden. Wie Sie die einzelnen Verhaltensw eisen im Detail einsetzen, ist Schritt für Schritt ausführlich in der Online-Hilfe dokum entiert. Weitere Verhaltensw eisen können von der Macrom edia-Hom epage heruntergeladen w erden. Im Fenster VERHALTENSWEISEN finden Sie ganz unten im Menü (Pluszeichen) den Eintrag WEITERE VERHALTEN… Dieser Link führt Sie direkt zum Macrom edia Exchange Server.

Grundlagen M ehr zu Exchange und Extensions finden Sie im Kapitel Exchange: Erweiterungen austauschen auf Seite 277 und Kapitel Erweiterung suchen, herunterladen und installieren auf Seite 278.

Mit JavaScript können w ir in Dream w eaver ein bestim m tes Objekt (beispielsw eise ein Bild) bei Eintritt eines vorgegebenen Ereignisses (beispielsw eise das Bew egen des Cursors über das Bild) bestim m te Aktionen ausführen lassen (z.B. das Bild solange durch ein anderes vertauschen, bis der Cursor dieses w ieder verlässt). Objekt, Ereignis und Aktion sind also die Bestandteile einer Verhaltensw eise: Objekt + Ereignis = Aktion

 Objekte Objekte sind die Bestandteile einer Webseite. Dies kann zum Beispiel ein Link, ein Bild oder auch der gesam te Inhalt einer Seite sein. In HTML w erden Objekte (oder auch Elem ente) in eckige Klam m ern gefasst: < HTML> < HEAD> < TITLE> Willkom m en< / TITLE> < / HEAD>

Grundlagen

251

< BODY> < B> hallo auf w w w.enno.net!< / B> < BR> Sehen Sie sich ein w enig auf m einen Seiten um (… )< BR> < IMG src= "bild1.gif"> < P> < A href= "seite2.htm l"> Naechste Seite< / A> < / BODY> < / HTML>

Vielen, der in den eckigen Klam m ern geschriebenen Objekte, können w ir eine Verhaltensw eise zuw eisen. Um eine Verhaltensw eise auf ein Objekt anzuw enden, m uss es zuerst ausgew ählt w erden. Den Typ des m arkierten Objektes erkennen Sie am Einfachsten im Tag-Selektor oder aber in der Titelleiste des Eigenschafteninspektors.

Verhaltensweisen können mit fast allen HTM L-Elementen verknüpft werden. Die Tabelle zeigt die  wichtigsten.

Objekte, die mit JavaScript-Ereignissen eingesetzt werden Anker

Die meisten Ereignisse können mit dem A-Tag verwendet werden. Das A-Tag beschreibt einen Link: Verknüpfung. Verhaltensweisen, die nur in Zusammenhang mit Verknüpfungen funktionieren, können mit einem Null-Link erstellt werden.

Body

Das Body-Tag auswählen, wenn eine Verhaltensweise einer ganzen Seite zugeordnet wird. So kann man eine Seite beispielsweise auf Plug-Ins überprüfen, während sie geladen wird.

Bilder

Das Img-Tag ist das vermutlich am häufigsten benutzte Objekt für Verhaltensweisen, zum Beispiel: Bild tauschen, Bilder vorausladen.

Formulare

Verhaltensweisen, die mit dem FORM-Tag verknüpft sind, können den Funktionsumfang der Knöpfe „Submit“ (OnSubmit) oder „Reset“ (OnReset) erweitern. So kann zum Beispiel im Anschluss an das Versenden eine Seite angezeigt werden, die über die erfolgreiche Versendung informiert. Auch einzelnen Feldern eines Formulars können Verhaltensweisen zugewiesen werden. Eingabefelder können so an bereits getroffene Auswahlen angepasst werden, zum Beispiel: Ändere ich in einer Adressen-Eingabe das Land von „USA“ auf „Deutschland“, wird die Sprungliste der „US-Staaten“ automatisch durch „Bundesländer“ ersetzt.

 Aktionen  Die Aktion ist der Teil einer Verhaltensw eise, der etw as verändert. Während norm alerw eise nichts passiert, w enn Sie im Brow ser m it dem Cursor über ein Bild fahren, kann eine Verhaltensw eise m it JavaScript z. B. bew irken, dass das Bild gegen ein anderes ausgetauscht w ird, solange sich der Cursor auf dem Bild befindet.  Einige Aktionen können nur dann ausgew ählt w erden, w enn auf das Objekt gleichzeitig ein Link angew endet w ird. Statt des bisher in der Version 3 eingesetzten „#“ (Null-Verknüpfung, Raute oder Schw einegitter) setzt Dream w eaver jetzt autom atisch javascript:; ein. Sie können diesen String jederzeit durch eine richtige Verknüpfung ersetzen. Wenn Sie den String jedoch löschen, w ird auch die dam it zusam m enhängende Verhaltensw eise gelöscht.

Nicht alle Browser können JavaScript ausführen oder es kann durch den Benutzer oder Administrator deaktiviert sein. Sie sollten sich daher vorher Gedanken über Ihre Zielgruppe machen und überlegen, auf welchen Browser-Generationen die Seiten funktionieren sollen. M anche älteren Browser stürzen beim Versuch, Verhaltensweisen auszuführen, ab. Behalten Sie dies bei allen Entwicklungen im Auge.

252

Verhaltensw eisen

 Ereignisse Ereignisse sind die Auslöser für Aktionen. In unserem Beispiel ist das Ereignis der über das Bild bew egte Cursor. Es kann aber auch das Laden einer Internet-Seite oder ein Mausklick sein. Dream w eaver setzt ein Standardereignis (z.B. onMouseOver) ein, nachdem Sie eine Aktion ausgew ählt haben. Ein anderes Ereignis kann aus dem Popup-Menü (schw arzes Dreieck) gew ählt w erden. Die Zusam m ensetzung ist von der gew ählten Brow ser-Kom patibilität abhängig. In runden Klam m ern stehende Ereignisse stehen nur in Verbindung m it Links zur Verfügung. Das ausgew ählte Objekt w ird in Dream w eaver autom atisch in einen A-Tag gefasst und m it einem Null-Link ausgestattet.

 Verhaltensweiseninspektor Im Anhang finden Sie eine Tabelle aller Ereignisse mit dazugehörigen Tags und Browserkompatibilitäten.

Das Fenster zur Erstellung von Verhaltensw eisen, den Verhaltensw eiseninspektor, finden Sie unter FENSTER: VERHALTEN oder SHIFT + F3.

 Verhaltensweisen hinzufügen Um im Verhaltensw eiseninspektor eine neue Verhaltensw eise einzustellen, gehen Sie w ie folgt vor:  Wählen Sie die Brow ser-Versionen, m it denen Ihre Verhaltensw eise funktionieren soll, aus dem Popup-Menü.  Markieren Sie ein Objekt, beispielsw eise ein Bild, auf das Sie das onMouseOverEreignis anw enden w ollen. Die Verhaltensw eise w ird dann nur diesem Objekt zugew iesen. Sie können in w eiteren Schritten dem Objekt jedoch noch w eitere Verhaltensw eisen zuordnen.  Wählen Sie die Aktion, die ausgeführt w erden soll, w enn Ereignis und Objekt zusam m entreffen (z.B. w enn der Cursor über das Bild fährt). Klicken Sie auf das Pluszeichen. Das Menü – m it den in diesem Kontext zur Verfügung stehenden Aktionen – erscheint.  Wählen Sie eine Aktion aus. Es öffnet sich ein Dialogfeld, in dem Sie w eitere Einstellungen vornehm en. Diese Einstellungen variieren von Aktion zu Aktion und w erden im Detail w eiter unten beschrieben.  Im Verhaltensw eisenfenster erscheint die Verhaltensw eise m it einem zugeordneten Standardereignis.

 Verhaltensweisen bearbeiten und löschen Nicht im m er ist das Ergebnis auf Anhieb so, w ie w ir es uns vorstellen, so dass nachträgliche Veränderungen nötig w erden. Doppelklicken Sie auf die Verhaltensw eise, um das Dialogfenster zu öffnen und die Einstellungen zu ändern.

Grundlagen

253



Wählen Sie ein Objekt; in unserem Beispiel einen Link. Achten Sie darauf, dass das A im Tag-Selektor fett dargestellt ist. Öffnen Sie den Verhaltensweiseninspektor. Wählen Sie kompatible Browserversionen.



Klicken Sie auf das Pluszeichen, um die Liste der Aktionen anzuzeigen: Wählen Sie Text in der Statusleiste. Schreiben Sie die Textmeldung in das Eingabefenster.



Nehmen Sie im Dialogfenster die jeweiligen Einstellungen vor und klicken Sie auf OK. Jede Aktion hat ein Standardereignis. Aus der Liste können Sie auch ein anderes auslösendes Ereignis wählen. Die Zusammensetzung der Liste ist vom gewählten Browser abhängig.

254

Verhaltensw eisen

Um die Reihenfolge der Verhaltensw eisen eines Objektes zu ändern, benutzen Sie im Fenster oben rechts die Aufw ärts- und Abw ärtspfeile. Zum Löschen einer Verhaltensw eise klicken Sie im Dokum entfenster auf das Objekt, um die zugeordneten Verhaltensw eisen in einer Liste anzuzeigen. Markieren Sie die zu löschende Verhaltensw eise und klicken dann auf das Minuszeichen.

Verhaltensweisen kurz vorgestellt Auf den folgenden Seiten sehen w ir uns die m itgelieferten Aktionen von Dream w eaver kurz an:

 Audio steuern Mit dieser Aktion können Sie Tondateien steuern. Wenn ein Benutzer ein bestim m tes Ereignis ausführt, also z.B. auf einen Knopf drückt, erklingt ein kurzer Ton.

 Bild austauschen Dieser Effekt tauscht ein Bild gegen ein anderes aus, w enn der Besucher m it der Maus darüber fährt (rollover). Dadurch kann unter anderem in einer Navigationsleiste angezeigt w erden, auf w elchem Ausw ahlpunkt sich der Cursor gerade befindet. Im Zusam m enspiel m it Ebenen lassen sich sehr kom plexe und überraschende Benutzerführungen und Präsentationen erstellen. Dam it JavaScript auf ein Bild zugreifen kann, m uss es benannt sein. Falls Sie den Nam en nicht selbst im Eigenschafteninspektor eingeben, setzt das Program m selbstständig Nam en für die verw endeten Bilder ein: Im age1, Im age2 usw .

 Bilder vorausladen Dreamweaver schreibt alle Bilder, die voraus geladen werden sollen, in den Body-Tag des Dokuments. Die Bilder werden dadurch in den Cache des Browsers geladen und stehen dann auf Abruf (zum Beispiel bei „Bild tauschen“) blitzschnell zur Verfügung.

Bilder, die bereits in den Cache des Brow sers geladen sind, können schneller angezeigt w erden als Bilder, die gerade frisch geladen w erden. Mit BILDER VORAUSLADEN können Sie Bilder im Hintergrund laden, w ährend die Aufm erksam keit des Besuchers m it anderen Inhalten beschäftigt ist. Der Brow ser erhält den Befehl, die Bilder vorab schon einm al ins Cache zu legen m it dem Ereignis onLoad (andere m öglich).

 Brow ser-Fenster öffnen Während Sie m it dem Link-Attribut _blank lediglich ein gew öhnliches Brow serFenster öffnen können, erm öglicht die Aktion BROWSER-FENSTER ÖFFNEN m ehr Einfluss auf die Attribute des neuen Fensters. So kann in einem externen Fenster eine Seite ohne Navigations-, Status- oder Standortleiste geöffnet w erden. Auch ein Shockw ave- oder Flash-Film kann so in einem Fenster definierter Größe geöffnet und abgespielt w erden.

Verhaltensw eisen kurz vorgestellt

255

 Brow ser überprüfen Mit dieser Aktion können w ir, w enn der Besucher einen Link klickt, eine Brow serÜberprüfung vornehm en. Dann können w ir derselben Verknüpfung verschiedene Ziele geben, bei denen das eine Ziel für neuere Brow ser, das andere für ältere Brow ser-Versionen bestim m t ist. Dadurch können letztere auf einfachere Versionen der Site geschickt w erden, beispielsw eise auf eine Seite ohne Fram es, w ährend alle anderen zu einer Seite m it Fram es geschickt w erden.

 Ebenen ein-/ ausblenden Diese m ächtige Funktion erlaubt es, durch Interaktion des Benutzers Ebenen einund auszublenden.

 Ebenentext festlegen Mit dieser Aktion können Sie den Text einer Ebene dynam isch erstellen. So kann Inhalt und Form atierung einer Ebene durch den Inhalt ersetzt w erden, den Sie im Dialogfenster angeben. Während Sie hier auch HTML-Code verw enden können, w ird eine dynam ische Erstellung von Inhalten erst durch JavaScript-Ausdrücke m öglich. Besucher können eigene Texte in ein Textfeld eingeben, die dann auf Knopfdruck in der definierten Ebene erscheinen. JavaScript m uss dabei im m er in geschw eiften Klam m ern geschrieben w erden.

 Ebene ziehen Ebenen können vom Besucher auch verschoben w erden. Dazu m uss die Aktion EBENE ZIEHEN auf die Ebenen angew endet w erden. Dam it lassen sich nicht nur Spielereien, sondern auch sinnvolle Effekte erzielen. So kann der Besucher beispielsw eise auf einer Ebene ein Menü herausziehen und daraus einen Link w ählen.

 Eigenschaft ändern Dies ist die kom plexeste Aktion, die Dream w eaver bietet. Sie zielt darauf, die Eigenschaften eines Objektes zu verändern und dadurch beispielsw eise die Zieladresse eines Form ulars von der Ausw ahl des Benutzers abhängig zu m achen. Wenn er beispielsw eise das Kontrollkästchen KONTAKT ausw ählt, w ird das Form ular an die eine, sonst an andere Adressen verschickt. Mit der Aktion sind sehr viele Möglichkeiten verbunden. Ebenso groß ist die Gefahr, dabei etw as verkehrt zu m achen. Die Funktion sollten Sie nur verw enden, w enn Sie bereits über einige Erfahrung m it der Webprogram m ierung verfügen.

 Form ular überprüfen Mit FORMULAR ÜBERPRÜFEN lässt sich checken, ob die in Form ularfeldern gem achten Angaben zur Bearbeitung akzeptiert w erden können. Angegebene E-Mail-Adressen w erden auf das E-Mail-Standardform at ([email protected]) untersucht, andere Felder kön-

 Ebenentext festlegen: Wenn Sie einen Text in das Eingabefenster schreiben und auf die Schaltfläche „Text in Ebene einfügen“ klicken, erscheint der Text anstatt des Platzhalters rechts in der grauen Fläche der Ebene. Interaktive Beispieldatei finden Sie auf der CD-ROM .

256

Verhaltensw eisen

nen als Zahlenfelder m arkiert w erden, beispielsw eise für Postleitzahlen. Bedenken Sie jedoch, dass ausländische Postleitzahlen m itunter auch Buchstaben enthalten. Wenden Sie diese Aktion nur auf Dokum ente m it Form ularen an. Wenn der Besucher das Form ular abschickt und vergessen hat, eines der Felder korrekt auszufüllen, erscheint ein Warnfenster, das dazu auffordert, den Inhalt des Form ulars zu korrigieren.

 Textrahm en einstellen

Formular überprüfen:  Wenn Sie in diesem Formular – als falsche definierte – Eingaben machen, erscheint eine Warnmeldung, die Sie auffordert, die Eingabe zu korrigieren.

Diese Aktion erlaubt es, den Text eines Fram es dynam isch zu erstellen. So kann Inhalt und Form atierung eines Fram es durch angegebenen Inhalt (beliebiges HTML) ersetzt w erden, ohne dass das Fram e neu geladen w erden m uss!

 Gehe zu URL Mit dieser Aktion können Sie im aktuellen oder einem angegebenen Fram e eine neue Seite öffnen. Mit einem Mausklick kann der Inhalt von einem oder m ehreren Fram es m it neuem Inhalt geladen w erden. Wie in dem Beispiel auf der CD-ROM können dam it nach einem Klick auf einen Link im m ittleren Fram e sow ohl die Datei im rechten als auch die Datei im linken durch zw ei neue Dateien ersetzt w erden. Das Fenster, in dem der Link angeklickt w urde, kann dabei unverändert bleiben.

 JavaScript aufrufen Plug-In überprüfen: In diesem Beispiel werden mehrere M öglichkeiten demonstriert, wie geladene Plug-Ins überprüft werden und entsprechende Umleitungsseiten geschaltet werden. 

Wenn Sie sich m it JavaScript gut auskennen und w eitere Scripte hinzufügen m öchten, können Sie sie direkt in einem Dialogfeld eingeben und Objekten dadurch eigene Verhalten zuw eisen. In Beispielen w ird gern der JavaScript-Befehl goBack genannt, m it dem ein Objekt m it der Zurückfunktion des Brow sers belegt w erden kann.

 Plug-In überprüfen Mit dieser Aktion kann der Brow ser des Besuchers prüfen, ob ein benötigtes Plug-In installiert ist. Dadurch können von einem Link ausgehend verschiedene Seiten geladen w erden, abhängig davon, ob das Plug-In vorhanden ist oder nicht. Wenn das Plug-In nicht installiert w urde, w ird eine Alternativseite geladen, z.B. eine um das Plug-In reduzierte Version der Seite, oder eine Seite, die den Besucher auffordert, das Plug-In herunterzuladen.

Verhaltensw eisen kurz vorgestellt

257

 Popup-Meldung Die Aktion erm öglicht uns das Erzeugen von Fenstern m it Warnungen oder Hinw eisen. Sie springen auf den Bildschirm des Besuchers, und er kann seine Arbeit am Com puter erst fortsetzen, nachdem er durch ein OK das Fenster w eggeklickt hat. Dam it können Sie Besucher zum Beispiel vor dem Verlassen der eigenen Seiten w arnen. Neben w itzigen Bem erkungen können Sie dort aktuelle und durchaus w ichtige Inform ationen verstecken, z.B. ein Jobangebot. In unseren Beispieldateien w erden w eiterführende Inform ationen zu einem Bild in einem Warnfenster angezeigt, sobald Sie auf das Bild klicken.

 Shockw ave oder Flash steuern Selbst Shockw ave-Film e lassen sich in Dream w eaver m it Verhaltensw eisen steuern. Ein Film lässt sich dam it abspielen, anhalten oder zurückspulen. Außerdem können Film e m it einem bestim m ten Fram e beginnen oder zu einem bestim m ten Fram e springen, w odurch sich z.B. Intros abkürzen lassen. Die Film e w erden zunächst m it dem EMBED- oder OBJECT-Tag in die Seite eingebaut. Der Film lässt sich dann m it Objekten (Bildern oder Texten), die m it Verhaltensw eisen belegt w urden, steuern. Sind die erforderlichen Shockw ave- oder Flash-Plug-Ins nicht installiert, schaltet der Brow ser autom atisch zu der Plug-In-Seite des Herstellers.

 Sprungm enü und Sprungm enü „Gehe zu“

Sprungmenüs werden ausführlich im Kapitel Formulare auf Seite 184 behandelt.

 Statusleistentext festlegen In der Statusleiste eines Brow sers w erden norm alerw eise aktuelle Vorgänge angezeigt, zum Beispiel Links, Ladezeiten etc. Man kann diese Leiste auch nutzen, um m it JavaScript kurze Textm eldungen einzublenden. Diese können dem Besucher zusätzliche Inform ationen zum Link geben, z.B. w ohin der Link führt, auf den der Cursor gerade zeigt, oder w as sich hinter einem bestim m ten Menüpunkt verbirgt.

Siehe Beispiel am Anfang dieses Kapitels.



Statusleistentext: In diesem Beispiel wird verdeutlicht, wie eine Statusleistenmeldung eingesetzt werden kann.

 Zeitleisten Verhaltensw eisen in Verbindung m it Zeitleisten finden Sie im nächsten Kapitel.

Alle interaktiven Beispieldateien zu diesem Kapitel finden Sie auf der CD-ROM : examples/ 071behaviors.

258

Zeitleisten

ZEITLEISTEN Dieses Kapitel ist eng mit dem Kapitel Ebenen auf Seite 240 verbunden, Sie sollten bei eventuell auftretenden Problemen daher auch dieses Kapitel beachten.

Zeitleisten erm öglichen die Erstellung von Anim ationen, die – anders als beispielsw eise Flash – auf den neueren Brow sern der Generation 4 ohne Plug-Ins dargestellt w erden. Sie sind als DHTML (dynam ic htm l) Bestandteil von CSS (cascading style sheets). Zeitleisten können Sie im WYSIWYG-Modus erstellen, ohne jem als den dahinter stehenden Code sehen zu m üssen. Dabei w erden Ebenen und Bilder in einer Reihe von Zeitleistenbildern so m iteinander verknüpft und ihre Eigenschaften im Zeitverlauf so verändert, dass der Eindruck einer Bew egung entsteht. In Zeitleisten können Sie:  die Position (X- und Y-Achse) einer Ebene verschieben,  die Ebenenreihenfolge (Z-Index) beeinflussen,  die Sichtbarkeit der Ebenen verändern,  die Dim ensionen einer Ebene verändern (Internet Explorer 4 und 5) und  die Bild-Quelldateien austauschen. Außerdem können Sie m it Verhaltensw eisen die Funktionalität von Zeitleisten erw eitern.

Zeitleisteninspektor Zeitleisten w erden im Zeitleisteninspektor erstellt und gesteuert. Wählen Sie FENSTER: ZEITLEISTEN oder SHIFT + F9, um das Fenster ZEITLEISTE zu öffnen.

Zeitleisten-Name

Bildnummer

Abspielgeschwindigkeit

Bild vor

Bild zurü ck

Automatisch starten Endlosschleife

Zum Anfang

1

Verhaltensweisenkanal Animationskan äle

4 5

6

7

Schl ü sselbild

Abspielkopf Objekt Ebene1

2

3

Zeitleisteninspektor

Erläuterung der Abbildung:  Bew egt den Abspielkopf, um ein Bild zurück. Halten Sie den Knopf gedrückt, dam it die Zeitleiste rückw ärts abgespielt w ird.  Setzt den Abspielkopf um ein Bild nach vorne. Halten Sie diesen Knopf gedrückt, um die Zeitleiste flüssig abzuspielen (play).  Dieses Feld legt die Wiedergabegeschw indigkeit fest, dessen Einheit in fps (fram es per second = Bilder pro Sekunde) angegeben w ird. Die Einstellung von 15 fps kann verändert w erden; unsere Erfahrungen zeigen jedoch, dass 15 fps ein gutes Mittelm aß darstellt. Höhere Einstellungen bew irken – besonders bei langsam en Verbindungen – nicht zw angsläufige flüssigere Wiedergaben.  Verhaltenskanal: Kanal, in dem Verhaltensw eisen eingebunden w erden, um an bestim m ten Zeitleistenbildern abgespielt zu w erden.  Mehrere Anim ationskanäle: Kanäle für Objekte, die für die Anim ationen angeordnet und bearbeitet w erden.  Die Anim ationsleisten w erden durch einen Balken in einem Anim ationskanal dargestellt. Die Kreise am Anfang und Ende jeder Anim ationsleiste stellen Schlüsselbilder (keyfram es) dar. Mit ihnen w erden die Eigenschaften (beispielsw eise Position oder Größe) des Objektes festgelegt oder geändert. Weitere Schlüsselbilder in Anim ationsleisten erm öglichen erw eiterte Einstellungen. Der Abspielkopf zeigt an, auf w elchem Zeitleistenbild sich die Anim ation im Dokum entfenster befindet. Die Num m er des aktuellen Zeitleistenbildes steht außerdem im Bilderfenster. Zeitleiste erstellen:  Ebene erstellen  Ebene in Zeitleiste einfügen

259

260

Zeitleisten

   

Eigenschaften (Position) für erstes Schlüsselbild einstellen, letztes Schlüsselbild ausw ählen und Ebene auf Endposition verschieben Auto-Wiederholung einstellen, um die Zeitleiste nach dem Laden zu starten Verhaltensw eise zum Anhalten an Bild 15 generelle Eigenschaften der Ebene einstellen

Zeitleisten erstellen Nur Ebenen und Bilder können in Zeitleisten eingefügt werden. Um Text in einer Zeitleiste einzufügen, müssen Sie ihn vorher in eine Ebene einsetzen.

Die Kom ponenten einer Zeitleiste bestehen aus Ebenen und Bildern. Wird eine Ebene oder ein Bild einer Zeitleiste hinzugefügt, erstellt Dream w eaver die erste Zeitleiste eines Dokum ents autom atisch. Später hinzugefügte Objekte w erden ebenfalls zur ersten Zeitleiste hinzugefügt. Es können auch m ehrere Zeitleisten in einem Dokum ent verw endet w erden.

Warnfenster:  Bilder können nur mit Ebenen animiert werden.

 Bild oder Ebene hinzufügen M ehr dazu im Kapitel Ebenen auf Seite 240.

Gehen Sie w ie folgt vor, um ein Objekt zu einer Zeitleiste hinzuzufügen:  Öffnen Sie den Zeitleisteninspektor (SHIFT + F9).  Markieren Sie im Dokum ent eine benannte Ebene oder ein benanntes Bild. Benennen Sie Ebenen und Bilder später nicht m ehr um , da sie sonst erneut eingefügt w erden m üssen.  Wählen Sie dann M ODIFIZIEREN: ZEITLEISTE: OBJEKT IN ZEITLEISTE EINFÜGEN. Alternativ können Sie auch m it der RECHTEN M AUSTASTE (Mac: CTRL-TASTE + M AUSTASTE) in den Zeitleisteninspektor klicken und aus dem Popup-Menü OBJEKT HINZUFÜGEN w ählen. Das schw arze Dreieck in der rechten oberen Ecke erzeugt das gleiche Menü. Sie können die Objekte auch per Drag & Drop direkt in die Zeitleiste hineinziehen.  Im Zeitleisteninspektor erscheint eine Anim ationsleiste m it einem Schlüsselbild an jedem Ende.

Zeitleisten erstellen

261

 Objekt oder Verhalten löschen Gehen Sie w ie folgt vor, um ein Objekt oder eine Verhaltensw eise aus einer Zeitleiste zu löschen:  Markieren Sie das zu löschende Objekt bzw . die Verhaltensw eise.  Wählen Sie M ODIFIZIEREN: ZEITLEISTE: OBJEKT ENTFERNEN oder klicken Sie m it der rechten Maustaste (Mac: CTRL-TASTE + M AUSTASTE) auf die Anim ationsleiste des zu löschenden Objekts und w ählen Sie OBJEKT ENTFERNEN aus dem Kontextm enü.

 Zeitleiste löschen Um eine Zeitleiste zu löschen, reicht es nicht aus, alle Objekte aus der Zeitleiste zu entfernen, da die Zeitleiste dabei nicht aus dem Quellcode der Datei gelöscht w ird. Wählen Sie zum Löschen der Zeitleiste inklusive aller darin enthaltenen Objekte aus dem Menü M ODIFIZIEREN: ZEITLEISTE: ZEITLEISTE ENTFERNEN.

 Zeitleiste hinzufügen Meist ist die Verw endung m ehrerer Zeitleisten übersichtlicher als alle Ebenen in einer Zeitleiste zu halten. Wählen Sie aus dem Menü M ODIFIZIEREN: ZEITLEISTE: ZEITLEISTE HINZUFÜGEN. Daraufhin w erden alle Anim ationsleisten anderer Zeitleisten unsichtbar und alle Pfade anderer Zeitleisten im Dokum entfenster ausgeblendet. Mit Hilfe des Popup-Menüs können Sie zw ischen m ehreren Zeitleisten hin- und herschalten. Für die einfachere Erkennung sollten Sie den Zeitleisten entsprechende Nam en geben. Zeigen Sie dazu die Zeitleiste an, deren Nam en Sie verändern w ollen. Klicken Sie im Zeitleisteninspektor in das NAMEN-Textfeld und geben Sie einen neuen Nam en ein.

 Schlüsselbilder Schlüsselbilder (keyfram es) speichern Eigenschaften w ie Position und Größe der Anim ationsobjekte. Jedes Objekt, das zu einer Zeitleiste hinzugefügt w ird, erzeugt eine Anim ationsleiste m it zw ei Schlüsselbildern: eines am Anfang und eines am Ende der Anim ationsleiste. Eine Bew egung kom m t zustande, w enn Anfangs- und Endpositionen der beiden Schlüsselbilder nicht übereinstim m en. Das Objekt einer Anim ationsleiste m it zw ei Schlüsselbildern kann nur linear bew egt w erden, da die Schlüsselbilder lediglich die Inform ationen für Start- und Endposition speichern – die Zw ischenbilder w erden aus diesen Inform ationen errechnet. Erst durch das Hinzufügen w eiterer Schlüsselbilder können w ir nichtlineare Bew egungen erzeugen.

Grundsätzlich gibt es kein Limit für die Anzahl der verwendeten Zeitleisten. Bedenken Sie jedoch, dass der Browser mit mehreren Zeitleisten eher ausgelastet ist, die Animationen langsamer zeigt und schneller abstürzt.

262

Zeitleisten

 Schlüsselbild hinzufügen  Klicken Sie im Zeitleisteninspektor auf das Zeitleistenbild einer Anim ationsleiste, an dem Sie ein Schlüsselbild einfügen w ollen.  Wählen Sie M ODIFIZIEREN: ZEITLEISTE: SCHLÜSSELBILD HINZUFÜGEN oder klicken Sie m it gedrückter Wahltaste (Mac: CTRL-TASTE + M AUSTASTE) auf das gew ünschte Zeitleistenbild, um dort ein w eiteres Schlüsselbild einzufügen.

Wenn die gesamte Animationsleiste markiert ist, sich der Abspielkopf über einem Zeitleistenbild – das noch kein Schlüsselbild ist –, befindet und die Ebene verschoben wird, erzeugt Dreamweaver automatisch ein neues Schlüsselbild.

 Dem neuen Schlüsselbild können Sie Eigenschaften zuw eisen, beispielsw eise eine neue Position. Sie erhalten nur dann eine gleichm äßige Anim ationsgeschw indigkeit, w enn Sie das Schlüsselbild genau zw ischen dem Anfangs- und Endschlüsselbild erstellt haben. Liegt es nicht m ittig zw ischen diesen, vergeht zw ischen Schlüsselbild 1 und Schlüsselbild 2 beispielsw eise w eniger Zeit als zw ischen Schlüsselbild 2 und Schlüsselbild 3. Die Anim ation ist daher zu Beginn schneller als am Ende. Soll die Anim ation gleichm äßig verlaufen, m üssen Sie das Schlüsselbild in die Mitte verschieben. Alternativ können Sie in das kürzere Intervall w eitere Bilder einfügen und aus der längeren Strecke Bilder entfernen, um die Länge der Anim ation nicht zu verändern.

 Schlüsselbild verschieben Sie können ein Schlüsselbild nachträglich verschieben, indem Sie es bei gedrückter Maustaste auf die neue Position im selben Anim ationskanal schieben.

 Zeitleistenbilder hinzufügen oder löschen  Bew egen Sie den Abspielkopf im Zeitleisteninspektor auf ein Bild, neben dem Sie w eitere Bilder einfügen w ollen bzw . das Sie löschen w ollen.  Wählen Sie M ODIFIZIEREN: ZEITLEISTE: BILD HINZUFÜGEN bzw . M ODIFIZIEREN: ZEITLEISTE: BILD ENTFERNEN aus oder klicken Sie m it der rechten Maustaste (Mac: CTRL-TASTE + M AUSTASTE) auf die Anim ationsleiste und w ählen dann BILD HINZUFÜGEN bzw . BILD ENTFERNEN aus dem Popup-Menü.  In Anim ationsleisten, die Objekte bew egen oder skalieren, errechnet Dream w eaver alle Zw ischenbilder erneut, um auch anschließend flüssige Anim ationen zu garantieren (tw eening ).

 Animationsleisten bewegen Sie können die Länge einer Anim ationsleiste also verändern, indem Sie Bilder entfernen bzw . w eitere Bilder einfügen. Dabei w ird jedoch die Entfernung der Schlüsselbilder zueinander verändert und dadurch die Geschw indigkeit der Anim ationen beeinflusst. Um alle Schlüsselbilder im gleichen Verhältnis und im gleichen Abstand

Objekte anim ieren

263

m itzuverschieben, können Sie Anim ationsleisten auch verlängern, indem Sie das letzte Schlüsselbild nach rechts über das Ende der Anim ationsleiste hinausziehen. Um die gesam te Anim ationsleiste zu verschieben – ohne die Länge zu verändern –, gehen Sie w ie folgt vor:  Markieren Sie eine Anim ationsleiste vollständig, indem Sie auf ein Zeitleistenbild, jedoch nicht auf ein Schlüsselbild klicken. Die gesam te Zeitleiste erscheint dunkel eingefärbt.  Bew egen Sie sie bei gedrückter Maustaste an eine neue Position.

Objekte animieren Um in den bisher erstellten Zeitleisten Anim ationen auszuführen, m üssen den Schlüsselbildern unterschiedliche Eigenschaften zugew iesen w erden.

 Ebenen bewegen Zunächst w ollen w ir eine Ebene im Zeitverlauf bew egen:  Fügen Sie zu einer Zeitleiste eine Ebene hinzu. Die Ebene erscheint in einem Anim ationskanal als Anim ationsleiste m it einem Schlüsselbild an jedem Ende.  Klicken Sie auf das zw eite Schlüsselbild und achten Sie darauf, dass nur dieses m arkiert ist. Der rote Abspielkopf bew egt sich auf dieses Schlüsselbild, so dass dieses Zeitleistenbild im Dokum entfenster angezeigt w ird.  Ziehen Sie die Ebene an eine andere Position, dam it sich Anfangs- und Endschlüsselbilder unterscheiden.

 Für jedes Schlüsselbild einer Ebene müssen eigene Positionen festgelegt werden, um die Ebene über den M onitor gleiten zu lassen.

264

Zeitleisten

Dream w eaver zeigt den Bew egungspfad m it einer roten Linie an. Sie verbindet die jew eils obere linke Ecke des Bildes an der Startposition m it der gleichen Stelle des Bildes am Ende der Anim ation. Erscheint diese Linie nicht, haben Sie die Ebene verm utlich nicht an nur einem Schlüsselbild verschoben, sondern die Position der gesam ten Anim ationsleiste verändert.  Überprüfen Sie, ob die Ebene korrekt anim iert w ird, indem Sie die Ebene vom ersten Schlüsselbild zum letzten Schlüsselbild vollständig abspielen. Ist Ihre Anim ationsleiste länger als zw ei Zeitleistenbilder, errechnet Dream w eaver die Positionen der Bilder zw ischen den Schlüsselbildern autom atisch.  Für nichtlineare Bew egungen m üssen Sie w eitere Schlüsselbilder zu der Anim ationsleiste hinzufügen und diesen eigene Positionen zuw eisen.

 Pfad aufzeichnen M it dem Internet Explorer 5 (M ac) werden animierte GIFs in bewegten Ebenen nicht korrekt dargestellt. Siehe Beispiel 073_07.html

Pfad aufzeichnen:  Die Ebene an die Startposition bewegen und „Pfad aufzeichnen“ aus dem M enü wählen, dann die Ebene so über den Bildschirm bewegen, wie sie sich später von selbst bewegen soll.

Nichtlineare Bew egungen können Sie am einfachsten erstellen, indem Sie die gew ünschte Bew egung selbst ausführen und dabei aufzeichnen. Gehen Sie dazu w ie folgt vor:  Bew egen Sie die Ebene an den Startpunkt und m arkieren Sie diese.  Wählen Sie M ODIFIZIEREN: ZEITLEISTE: PFAD DER EBENE AUFZEICHNEN oder klicken Sie m it der rechten Maustaste (Mac: CTRL-TASTE + M AUSTASTE) und w ählen Sie aus dem Kontextm enü PFAD AUFZEICHNEN.  Ziehen Sie die Ebene in der gew ünschten Bew egung über das Dokum ent. Beim Loslassen der Maustaste w andelt Dream w eaver den Pfad in eine Anim ationsleiste m it m ehreren Schlüsselbildern. Der Pfad lässt sich über diese später noch feiner einstellen.  Halten Sie zur Überprüfung des Pfades den Wiedergabe-Knopf (BILD VOR) gedrückt, um die Zeitleiste abzuspielen.

Objekte anim ieren

265

 Ebenen in Zeitleisten ein- und ausblenden Ebenen können in den Zeitleisten nach verstrichener Zeit ein- und ausgeblendet w erden. So können Objekte in verschiedenen Ebenen zu einem anim ierten Banner kom biniert w erden:  Markieren Sie im Verhaltenskanal ein Zeitleistenbild und öffnen Sie den Verhaltensw eiseninspektor.  Wählen Sie aus diesem die Verhaltensw eise EBENE EIN/ AUSBLENDEN.  Nehm en Sie in dem erscheinenden Dialogfenster die gew ünschten Einstellungen vor.

Im Gegensatz zu anderen Zeitleistenprogrammen wie Flash, Director etc. unterscheidet Dreamweaver nicht, an welcher Stelle die Animationsleisten in den Animationskanälen platziert werden. Eine Zeitleiste, die auf „visible“ gestellt ist, wird auch dann zu Beginn der Zeitleiste dargestellt, wenn diese erst bei Zeitleistenbild 20 anfängt. Soll eine Ebene erst später eingeblendet werden, müssen Sie die Ebene zunächst als „hidden“ darstellen. In zusätzlichen Schlüsselbildern kann dann an der gewünschten Stelle die Sichtbarkeit auf „visible“ gestellt werden.



Workaround für Ebenen, die noch nicht zu Beginn der Zeitleiste sichtbar sein sollen: M arkieren Sie die Ebene als „hidden“, und ergänzen Sie dort, wo die Ebene sichtbar werden soll, ein Schlüsselbild mit visible.

Sichtbarkeit gesamt visible

hidden visible

hidden

 Stapelreihenfolge verändern Ebenen liegen geschichtet übereinander. Höher liegende Ebenen verdecken im m er einen Teil der darunter liegenden Ebenen. Mit Zeitleisten können Sie die Reihenfolge, in der die Ebenen übereinander liegen (Z-Index), im Zeitverlauf ändern.  Erstellen und m arkieren Sie ein Schlüsselbild an der Stelle eines Anim ationskanals, an der dessen Z-Index verändert w erden soll. Im Dokum entfenster w ird dabei die gesam te Ebene m arkiert.

266

Zeitleisten

 Geben Sie im Ebenen- oder Eigenschafteninspektor den neuen Z-Index-Wert ein.  Wiederholen Sie Schritt (1) und (2) für w eitere Ebenen, deren Z-Index ebenfalls verändert w erden soll.  Überprüfen Sie das Ergebnis.

 Ebenendimensionen ändern Die Dim ensionen von Ebenen können m it Zeitleisten sprunghaft und in Internet Explorer auch dynam isch (also w eich m it Zw ischenbildern) verändert w erden. Für die sprunghafte Veränderung der Größe einer Ebene m üssen Sie die aktuelle Ebene kopieren und als w eitere Anim ationsleiste erneut in den gleichen Anim ationskanal einfügen. Diesem geben Sie dann die neuen Ebenendim ensionen. Ebenendimensionen:  Dreimal die gleiche Ebene mit unterschiedlichen Einstellungen für die Größe ergeben sprunghafte Veränderungen der Größe.

Ebenen können nicht kleiner skaliert werden als der darin enthaltene Inhalt. Es wird auch der Inhalt selbst nicht skaliert, sondern nur die Begrenzung der Ebene verkleinert.

Für die Darstellung im Internet Explorer können Sie die Ebenendim ensionen auch dynam isch verändern und die Ebene langsam größer w erden lassen, w ährend sie sich von rechts nach links über den Monitor bew egt:  Klicken Sie im Zeitleisteninspektor auf das Schlüsselbild einer Anim ationsleiste, an dem die Größenveränderung beginnen soll. Die Ebene w ird im Dokum entfenster m arkiert.  Skalieren Sie die Ebene auf die Startgröße oder geben Sie die gew ünschte Breite und Höhe im Eigenschafteninspektor ein.  Klicken Sie im Zeitleisteninspektor auf das Schlüsselbild, an dem die Größenveränderung beendet sein soll, und stellen Sie für dieses die Zielgröße der Ebene ein.  Überprüfen Sie den erzielten Effekt: Spielen Sie die Zeitleiste in Internet Explorer 4 oder 5 ab.

Zeitleisten und Verhaltensw eisen

267

 Bilddatei austauschen Sie können in Zeitleisten die Quelldateien eines Bildes vertauschen und so Rollovers in Zeitleisten integrieren.  Wählen Sie ein Bild, w elches Sie in die Zeitleiste einfügen w ollen. Geben Sie diesem Bild im Eigenschafteninspektor einen Nam en.

Das Ändern des SRC-Attributs von Bildern über Zeitleisten funktioniert nicht in Netscape 6. Alle anderen Änderungen an Ebenen funktionieren jedoch.

 Setzen Sie es in die Zeitleiste ein (OBJEKT HINZUFÜGEN).  Markieren Sie das Schlüsselbild, an dem die Bilddatei ausgetauscht w erden soll.  Geben Sie im Eigenschafteninspektor im Eingabefeld QUELLDATEI die neue Bilddatei an, die das andere Bild an dem gew ählten Schlüsselbild ersetzen soll. Laden Sie die benötigten Bilder im Voraus in den Cache, um sicherzustellen, dass beim Austauschen des Bildes keine w eiteren Wartezeiten entstehen.

Zeitleisten und Verhaltensweisen Hauptsächlich w erden Verhaltensw eisen zur Steuerung und Navigation von Zeitleisten verw endet. Bereits das Abspielen von Zeitleisten enthält Verhaltensw eisen. Ferner können Verhaltensw eisen dazu verw endet w erden, Zeitleisten ununterbrochen abzuspielen. Diese Verhaltensw eisen können Sie in den Kontrollkästchen im Zeitleisteninspektor ausw ählen. Weitere andere Verhaltensw eisen können m it Zeitleisten kom biniert w erden.

 Zeitleisten abspielen und anhalten Meist w erden Zeitleisten autom atisch nach dem Laden gestartet. Markieren Sie im Zeitleisteninspektor das Kontrollkästchen AUTO-WDG., um dadurch autom atisch eine onLoad-Verhaltensw eise zur Seite hinzuzufügen. Zeitleisten können aber auch durch Benutzerereignisse w ie z.B. OnMouseOver gestartet w erden:  Klicken Sie im Dokum ent auf ein Objekt, das die Zeitleiste starten soll.  Öffnen Sie den Verhaltensw eiseninspektor und w ählen Sie BROWSER AB 4.0 aus.  Klicken Sie auf das Pluszeichen und w ählen Sie ZEITLEISTE: ZEITLEISTE ABSPIELEN aus dem Popup-Menü. Geben Sie im Dialogfenster an, w elche Zeitleiste gestartet w erden soll.  Spezifizieren Sie nun, bei w elchem Ereignis die Zeitleiste gestartet w erden soll. Um Zeitleisten anzuhalten, w ählen Sie ZEITLEISTE ANHALTEN. Zum Anhalten können Sie allerdings nicht das gleiche Objekt verw enden w ie zum Starten. Ein Objekt kann eine Zeitleiste entw eder starten oder stoppen, nicht beides.

Siehe Kapitel Verhaltensweisen auf Seite 250.

268

Zeitleisten

 Schleifen Wenn man im Zeitleistenfenster die Schaltfläche „Schleife“ klickt, wird im letzten Frame eine Aktion angehängt: „onFrameXY Gehe zu Zeitleistenbild 1“. Dadurch entsteht die Schleife. Nachteil: Die Position dieser Aktion wird nicht angepasst, wenn sich die Länge der Zeitleiste ändert. Lösung: Auswahlschalter Schleife erst deaktivieren, dann wieder aktivieren, oder die ganze Aktion mitverschieben.

Oft w erden Sie Ihre Zeitleisten ununterbrochen abspielen w ollen. Dazu m üssen Sie am Ende der Anim ation eine Verhaltensw eise einfügen, die der Zeitleiste m itteilt, w ieder beim ersten Bild anzufangen. Genau diese Verhaltensw eise w ird m it dem Kontrollkästchen SCHLEIFE (loop ) erstellt. Weitere zusätzliche Param eter können Sie einstellen:  Markieren Sie im Zeitleisteninspektor das Kontrollkästchen SCHLEIFE, um die Zeitleiste ununterbrochen abzuspielen.  Soll festgelegt w erden, w ie oft eine Zeitleiste abgespielt w erden soll, m üssen Sie anschließend auf die letzte Verhaltensw eise im Verhaltenskanal der Zeitleiste doppelklicken.  Daraufhin öffnet sich der Verhaltensw eiseninspektor, der alle verw endeten Aktionen auflistet. Doppelklicken Sie auf die Aktion GEHE ZU ZEITLEISTENBILD, so dass sich das entsprechende Dialogfenster öffnet.  In diesem können Sie im Eingabefeld GEHE ZU BILDNUMMER nun ein anderes Zeitleistenbild als Bild 1 eingeben, sofern die Zeitleiste nicht von vorne abgespielt w erden soll. Außerdem können Sie festlegen, ob die Zeitleiste w eniger oft als unendlich w iederholt w erden soll. Geben Sie dafür die gew ünschte Zahl der Wiederholungen in das Feld SCHLEIFE X M AL ein.

Dieses Warnfenster  informiert darüber, wo die Schleife erstellt worden ist, und erinnert, dass dort weitere Parameter eingestellt werden können.

 Zeitleisten spulen Eine w eitere Verhaltensw eise für Zeitleisten erm öglicht es, den Abspielkopf an ein bestim m tes Zeitleistenbild springen zu lassen. Zeitleisten lassen sich dadurch Voroder Zurückspulen.  Wählen Sie im Dokum ent dazu ein Objekt, das die Zeitleiste zu einem speziellen Bild springen lassen soll.  Wählen Sie BROWSER AB 4.0 aus.  Klicken Sie auf das Pluszeichen, um eine neue Aktion hinzuzufügen und w ählen Sie aus dem Popup-Menü ZEITLEISTE: GEHE ZU ZEITLEISTENBILD aus.  Markieren Sie im Dialogfenster eine Zeitleiste, w enn sich m ehr als nur eine Zeitleiste auf Ihrer Seite befinden.

Hinw eise

 Geben Sie im GEHE ZU BILDNUMMER-Textfeld das Zeitleistenbild an, an das die Zeitleiste springen soll. Klicken Sie auf OK.  Wählen Sie ein Ereignis, bei dem die Aktion ausgeführt w erden soll. Haben Sie beispielsw eise das onClick-Ereignis gew ählt, w ird die Zeitleiste im m er bei einem Mausklick auf das Objekt auf das im BILDNUMMER-Textfeld angegebene Zeitleistenbild springen.

 Andere Verhaltensweisen hinzufügen Im Verhaltenskanal des Zeitleisteninspektors können Sie w eitere Verhaltensw eisen m it einer Anim ation verknüpfen. So können Sie beispielsw eise am Ende einer Anim ation eine neue Seite laden.  Doppelklicken Sie im Zeitleisteninspektor über dem Zeitleistenbild, an dem eine Verhaltensw eise aufgerufen w erden soll.  Es öffnet sich der Verhaltensw eiseninspektor, aus dem Sie eine Verhaltensw eise ausw ählen und entsprechende Einstellungen treffen. Es ist hier nicht m öglich, kom patible Brow ser-Versionen auszuw ählen, da die Wiedergabe von Zeitleisten bereits die neueren Brow ser-Generationen benötigt. Nach den Einstellungen w ählt Dream w eaver autom atisch das Ereignis onFram eNum ber aus, dam it die Verhaltensw eise abgespielt w ird, w enn die Zeitleiste an dem Zeitleistenbild ankom m t.  Eine Markierung im Verhaltenskanal kennzeichnet die vorhandene Verhaltensw eise. Bei eventuellen Änderungen m üssen Sie auf diese klicken.

Hinweise  Anstatt Bilder erst dann zu laden, w enn sie benötigt w erden, ist es sinnvoll, alle verw endeten Objekte bereits zu Beginn in unsichtbare Ebenen zu setzen. Wenn dann später ein Bild angezeigt w erden soll, kann entw eder die Ebene eingeblendet w erden, in der sich das Bild befindet, oder es kann in bereits sichtbaren Ebenen die Quelldatei ausgetauscht w erden. Sie sparen dam it Ladezeiten, da sich die Bilder bereits im Cache des Brow sers befinden.  Verm eiden Sie große Bilder. Versuchen Sie die Anim ationsgeschw indigkeit zu verbessern, indem Sie kleinere zusam m engesetzte Bilder erstellen und aus diesen nur kleine Bildbereiche anim ieren.  Bedenken Sie, dass Brow ser grundsätzlich alle Bilder abspielen, auch dann, w enn die Internetverbindung langsam oder das System überlastet ist. Erstellen Sie daher nur Zeitleisten, die Sie in den aktuellen Brow sern m it verschiedenen Betriebssystem en testen können.

269

270

Anpassen und Erw eitern

ANPASSEN UND ERWEITERN

Programmoberfläche editieren: zum Beispiel ein Fenster an die Größe Ihres M onitors anpassen, um besser mit vielen Ebenen arbeiten zu können. Öffnen Sie die Datei ShowHide Layers.htm im Ordner Configuration/ Behaviors/ Actions/ mit Dreamweaver. Ändern Sie die Höhe des Formularobjektes. Speichern und Neustart.

Die größte Stärke von Dream w eaver ist seine Wandlungs- und Anpassungsfähigkeit. Wie Sie im Verlauf des Buches bereits bem erkt haben, können Sie fast alle Menüs, Paletten und Befehle in Funktion, Inhalt und Aussehen an Ihre Bedürfnisse und Arbeitsabläufe anpassen. Sie können sow ohl den Leistungsum fang des Program m s durch eigene Module erw eitern, als auch die Arbeitsum gebung, z.B. durch das Weglassen bestim m ter Funktionen, Menüs und Fenster beschränken. Letztendlich können Sie das Erscheinungsbild der Program m oberfläche Ihren persönlichen Erfordernissen anpassen, indem Sie die Größe und Farbigkeit der Fenster m odifizieren. Dies sind ideale Voraussetzungen, um z.B. für jeden im Team die optim ale Um gebung zu konfigurieren: Dream w eaver für den Adm inistrator, für den Program m ierer, für den Designer, für den Texter etc. Dream w eaver leistet eine solche offene Program m ierung der Strukturen, w eil sich Macrom edia sehr frühzeitig dazu entschlossen hat, die kom plette Konfigurierung – und dam it auch die sichtbare Oberfläche des Program m s – ausschließlich m it HTML, JavaScript und XML um zusetzen. Da dies die vertrauten Um gebungen der Web-Entw ickler sind, ist es klar, dass hieraus ein riesiger Vorteil erw ächst: Das Program m kann – sich selbst als Werkzeug dienend – im Handum drehen m odifiziert w erden. Die gesam te Anpassung von Dream w eaver findet in Dateien in Unterverzeichnissen des Ordners Configuration statt. Um nur einige der w ichtigsten Beispiele zu nennen:  Sie können der Objektepalette eigene Objekte hinzufügen, Objekte in den vorhandenen Tafeln neu anordnen oder neue Tafeln m it neuen Objekten erzeugen.  Sie können die Menüs verändern, indem Sie Menüelem ente um benennen, hinzufügen oder löschen und Kurzbefehle individuell anpassen.  In der Profileinstellung für die Form atierung des Quellcodes können Sie den von Dream w eaver generierten HTML-Code in allen Feinheiten steuern und anpassen.  Mit JavaScript können Sie Dream w eaver erw eitern, eigene Befehle und w eitere schw ebende Fenster erstellen.  Sie können die Darstellung von Drittanbieter-Tags (ASP, PHP und ColdFusionTags) beeinflussen.  Außerdem können Sie zahlreiche Voreinstellungen des Program m s verändern:

BEARBEITEN: VOREINSTELLUNGEN…  Gerade auch das API (application program m ing interface) bietet ein w eites Feld für Anpassung und Erw eiterung des Program m s.

Objektepalette

271

Objektepalette Standardm äßig finden Sie diese Objektepaletten vor: ALLGEMEIN, FORMULARE, FRAMES, HEAD, LIVE (nur Ultradev), SPEZIAL, UNSICHTBARE ELEMENTE und ZEICHEN. Sie können w eitere Paletten erstellen, um in diesen eigene Befehle abzulegen oder um vorhandene Befehle neu zu ordnen. Auch in bestehende Paletten lassen sich w eitere Objekte einfügen. Jede Objektepalette ist in einem Unterordner von Configuration/ Objects gespeichert. In diesem Unterordner liegen die einzelnen Objektdateien. Jedes Objekt w ird durch zw ei oder drei Dateien definiert:  eine GIF-Datei, die das Sym bol für das Objekt enthält  eine HTML-Datei, die den einzufügenden HTML-Code beinhaltet, oder ein HTML-Form ular, in dem benötigte Daten angegeben w erden können (beispielsw eise die Quelle eines Bildes)  evtl. eine JavaScript-Datei, die den einzufügenden HTML-Code generiert Vorhandene Paletten können Sie w ie folgt behandeln:  Verschieben Sie Objekte in eine andere Palette: Alle zusam m en gehörigen Dateien (HTML-, GIF- und JavaScript-Dateien) w erden verschoben.  Benennen Sie vorhandene Paletten um : Ändern Sie den Nam en des Unterordners.  Entfernen Sie ein Objekt aus der Palette: Löschen Sie alle zum Objekt gehörigen Dateien (.gif, .htm , .js) aus dem Unterordner Im Anschluss an die Veränderungen m üssen die Objektepaletten neu geladen w erden, um die Veränderungen in Dream w eaver sichtbar zu m achen. Öffnen Sie das Popup-Menü der Objektepalette bei gedrückter OPTIONSTASTE (Window s: CTRLTASTE). Wählen Sie ERWEITERUNGEN NEU LADEN.

Eigene Objekte Eigene Objekte (custom objects) können das Arbeiten – insbesondere lästige Produktionsroutinen – sehr erleichtern. Ein Beispiel haben Sie bereits im Kapitel Tabellen auf Seite 136 kennen gelernt. Am einfachsten ist es, w enn Sie sich die Kom ponenten eines existierenden Objekts anschauen und sie Schritt für Schritt m odifizieren. Bei dieser Vorgehensw eise stellen sich erfahrungsgem äß die schnellsten Lernerfolge ein. Für die Erstellung kom plexer Objekte w erden Kenntnisse in JavaScript benötigt, aber auch ohne diese Kenntnisse können Sie interessante und nützliche eigene Objekte erstellen. Diese enthalten dann jedoch nur HTML-Code, der in das Dokum ent eingesetzt w ird. Ein Beispiel:  Erzeugen Sie m it einem Texteditor (BBEdit, Hom esite etc.) ein leeres Dokum ent. Wenn Sie Dream w eaver als Texteditor (F10) verw enden, m üssen Sie zunächst alle Tags aus dem Dokum ent löschen.  Geben Sie nur den Code ein, den dieses Objekt in Ihre Dokum ente einfügen soll, w enn auf das Objekt geklickt w ird. Beispielsw eise:

Im Rahmen dieses Buches können hier Umfang und Vielfalt der Einsatzmöglichkeiten nur skizziert werden. Eine umfangreiche Dokumentation mit Beschreibungen und Beispielen finde Sie unter Hilfe: Dreamweaver und UltraDev erweitern.

272

Anpassen und Erw eitern

< P> © 2001 Dream book| < A href= m ailto:dream w eaver@dream book.de> E-Mail< / A> < / P>

Sie können dieses Beispiel auch im Dokum entfenster erstellen, dann in den Quellcode-Inspektor w echseln und die überflüssigen Tags von Hand löschen.  Speichern Sie die Datei in einem bereits existierenden Unterordner, oder legen Sie einen neuen Unterordner in Configuration/ Objects an.  Erstellen Sie ein 18 x 18 Pixel großes GIF-Bild, das als Sym bol des Objekts in der Objektepalette angezeigt w erden soll. Falls Sie kein Bild erstellen, setzt Dream w eaver ein Standardbild ein. Ist Ihr Bild größer als 18 x 18 Pixel, w ird es zur Darstellung in der Palette autom atisch skaliert.  Benennen Sie die zum Objekt gehörenden Dateien identisch. Nur die Erw eiterung (extension ) nach dem Punkt unterscheidet sich (.gif, .htm , .js). Beachten Sie die Groß- und Kleinschreibung!  Das neue Objekt w ird – nach einem Neustart von Dream w eaver – in der Objektepalette als auch im Menü EINFÜGEN angezeigt.

Befehle Befehle bieten die einfache Möglichkeit, häufig ausgeführte Arbeitschritte zusam m enzufassen und als eigene Menüpunkte zu speichern. In der Verlaufspalette  können Sie mehrere Arbeitsschritte markieren und als Befehl speichern.

 Befehl erstellen Die Funktion VERLAUF (history) w ird norm alerw eise benutzt, um Arbeitsschritte rückgängig, bzw . nach dem Rückgängig-m achen w ieder ausführen zu können. Wir neh-

Befehle

m en jetzt die erw eiterten Möglichkeiten von Verlauf in Anspruch: näm lich m ehrere Arbeitsschritte zusam m en als einen Befehl abspeichern zu können.  Öffnen Sie die Verlaufpalette M ENÜ: FENSTER: VERLAUF oder SHIFT + F10.  Führen Sie die Arbeitsschritte im Dokum entfenster aus, die Sie als Befehl abspeichern m öchten.  Markieren Sie die gew ünschten Schritte. Mit der SHIFT-TASTE können Sie w eitere Schritte ausw ählen, m it gedrückter BEFEHLSTASTE (Window s: CTRL-TASTE) können Sie auch Arbeitschritte überspringen.  Wählen Sie aus dem Popup-Menü des Fensters (schw arzes Dreieck) ALS BEFEHL SPEICHERN…  In dem folgenden Dialogfenster geben Sie den Nam en für den gew ünschten Befehl ein.  Wenn Sie jetzt das Menü BEFEHLE öffnen, finden Sie dort im unteren Teil Ihren neu angelegten Befehl. Die Dateien für den Befehl w erden von Dream w eaver – w ie oben unter Objekte beschrieben – im Verzeichnis Configuration/ Com m ands gespeichert. 

Wenn Sie zwischendurch im Dokument klicken, kann Dreamweaver die Schritte nicht zusammenfassen.

 Befehl verwenden, ändern oder löschen Um einen Befehl anzuw enden, m arkieren Sie zuerst das Objekt, auf den der Befehl angew endet w erden soll. Wählen Sie den Befehl aus dem Menü BEFEHLE. Um einen Befehl um zubenennen oder zu löschen, w ählen Sie aus dem Menü BEFEHLE: BEFEHLSLISTE BEARBEITEN. Klicken Sie auf den Befehl und ändern den Nam en, oder klicken Sie auf LÖSCHEN. Am Ende klicken Sie auf SCHLIESSEN.

 Der Befehl wird dem M enü „Befehle“ hinzugefügt.

273

274

Anpassen und Erw eitern

Menüs anpassen Mit der Datei m enus.xm l im Ordner CONFIGURATION/ M ENUS können die anderen Menüs verändert w erden. Dadurch können Sie das Program m noch stärker an Ihre Arbeitsw eisen anpassen: So können Menübefehle neu angeordnet, um benannt oder entfernt w erden und diesen w eitere Tastenkom binationen zugew iesen w erden. Seien Sie beim Bearbeiten dieser Datei sehr vorsichtig, da Sie die Originalm enüs nur m it der von Macrom edia m itgelieferten Sicherungskopie m enus.bak w ieder herstellen können. Ersetzen Sie Ihre bearbeitete Datei m it einer Kopie der Sicherheitskopie, die Sie dann in m enus.xm l um benennen. Sie sollten die Menüleisten nur dann bearbeiten, w enn Sie sich gut m it XML auskennen. Bereits kleine Syntaxfehler bew irken, dass w ichtige Teile des Program m s ignoriert w erden.

Tastaturkurzbefehle In Dream w eaver 4 haben Sie jetzt – w ie auch in allen anderen standardisierten Macrom edia-Produkten – die Möglichkeit, die Tastaturkurzbefehle an Ihre gew ohnte Um gebung anzupassen. Sie können so z.B. anstatt der Default-Einstellung, die alten Dream w eaver-3-Kurzbefehle zusam m en m it den neuen von Dream w eaver 4 benutzen. Oder Sie ziehen es vor, die Kurzbefehle Ihres HTML-Editors

Das Fenster  „Tastaturkurzbefehle“ mit allen ausgeklappten M enüs

Tastaturkurzbefehle

275

(Hom esite oder BBEdit) zu verw enden. Letztendlich können Sie auch Ihren eigenen Satz (set ) von Tastaturkurzbefehlen erstellen. Wählen Sie BEARBEITEN: TASTATURKURZBEFEHLE… Es dauert einige Zeit, bis das Fenster erscheint, da die aktuellen Einstellungen aus dem Program m ausgelesen w erden m üssen. Das gilt übrigens für jeden Wechsel zw ischen Kurzbefehlssätzen. Durch Klicken auf die Schaltflächen oben rechts können Sie den aktuellen Satz  DUPLIZIEREN. In dem erscheinenden Fenster geben Sie im Eingabefeld den neuen Nam en des Satzes ein und klicken auf OK. Dieser Satz w ird autom atisch zum aktuellen Satz.  UMBENENNEN. In dem erscheinenden Fenster ändern Sie den Nam en des Satzes und klicken auf OK. Dieser Satz w ird autom atisch der aktuelle Satz.  SATZ ALS HTML EXPORTIEREN: Um eine gute Übersicht über die Kurzbefehle zu haben und auch als Dokum entation können Sie den aktuellen Satz als HTML-Dokum ent exportieren. Klicken Sie auf die Schaltfläche. Geben Sie einen Nam en (.htm l) ein und sichern Sie das Dokum ent. Leider w erden bei dem ausgegebenen Dokum ent keine Sonderzeichen generiert.  SATZ LÖSCHEN. In dem erscheinenden Fenster w ählen Sie in der Liste den zu löschenden Satz und klicken auf LÖSCHEN. Den gerade aktiven (aktuellen) Satz können Sie nicht löschen. Im Menü AKTUELLER SATZ finden Sie die Liste der verfügbaren w erkseitig eingestellten Sätze:  BBEdit: Tastaturkurzbefehle von BBEdit (Mac)  Dream w eaver 3: Tastaturkurzbefehle für Dream w eaver-3-Funktionen sow ie neue Dream w eaver-4-Tastaturkurzbefehle  Hom esite: Tastaturkurzbefehle von Hom esite (Window s)  Macrom edia Standard: Default-Einstellung Die voreingestellten Sätze können Sie nicht ändern. Um einen eigenen Satz zu erstellen, duplizieren Sie einen der vorhandenen Sätze und m odifizieren die Kopie. 

Diese M eldung erscheint, wenn Sie versuchen, einen werkseitig eingestellten Satz zu ändern.

Diese M eldung erscheint,  wenn Sie versuchen, einen gerade aktiven Satz zu löschen.

276

Anpassen und Erw eitern

Im Menü BEFEHLE finden Sie die drei Kategorien:  Menübefehle: alle in der oberen Menüleiste des Program m s erscheinenden Einträge  Codebearbeitung: alle Kurzbefehle für die Bearbeitung in der Codeansicht  Dokum entbearbeitung: Kurzbefehle, die in unterschiedlichen Bereichen des Program m s verfügbar sind (z.B. Aktualisieren F5)

 Meine Kurzbefehle Mit folgenden Schritten erstellen und editieren Sie Ihre eigenen Tastaturkurzbefehle:  Wählen Sie eine Voreinstellung im Menü AKTUELLER SATZ, die Sie als Ausgangspunkt verw enden w ollen.  Machen Sie eine Kopie von diesem Satz. Klicken Sie auf die Schaltfläche SATZ DUPLIZIEREN. Benennen Sie Ihre Kopie. Nach einiger Zeit ist das Menü aktualisiert und zeigt den von Ihnen gew ählten Nam en an.  Wählen Sie aus der Befehlsliste der Menübefehle den Eintrag DATEI. Klappen Sie das Menü aus, indem Sie auf das Dreieck klicken.  Wählen Sie den Eintrag NEU aus. Unten im Fenster KURZBEFEHLE w ird die aktuelle Tastenkom bination angezeigt: BEFEHLSTASTE + N (Win: STRG + N).  Klicken Sie auf die Schaltfläche M INUS. Das Kürzel w ird aus dem Feld und aus der Liste gelöscht. (Wenn Sie jetzt m it OK bestätigen, w ird diese Einstellung gespeichert und steht im Program m s sofort zur Verfügung.)  (Klicken Sie auf das Pluszeichen, um einen neuen Kurzbefehl für NEUES DOKUMENT festzulegen. Im Feld TASTE DRÜCKEN blinkt eine Einfügem arke und w artet auf Ihre Tastatureingabe. Drücken Sie gleichzeitig die BEFEHLSTASTE + N. Der neu zugew iesene Kurzbefehl w ird als STRG + N im Feld angezeigt.

 Jedem Befehl können bis zu zwei Tastaturkurzbefehle zugeordnet werden.



Unten im Fenster werden M eldungen angezeigt, falls Tastenkombinationen ungültig oder bereits durch andere Befehle belegt sind.

Erw eiterungen

277

Klicken Sie auf ÄNDERN. Die neue Tastenkom bination w ird im Fenster KURZBEFEHL und in der Befehlsliste angezeigt.

Statt die Schritte  und auszuführen, können Sie auch direkt einen Kurzbefehl ändern. Wählen Sie einen Befehl aus der Liste aus. Klicken Sie m it Ihrem Cursor in das Eingabefenster TASTE DRÜCKEN. Drücken Sie eine neue Tastenkom bination. Klicken Sie auf ÄNDERN. Die Aktualisierung der Liste dauert einen Mom ent.

Sie können jedem Befehl zw ei Tastaturkurzbefehle zuw eisen. Wählen Sie den Befehl NEU in der Befehlsliste. Im Fenster KURZBEFEHL sehen Sie den ersten Eintrag STRG + N. Klicken Sie auf das Pluszeichen. Drücken Sie jetzt die zw eite Tastenkom bination z.B. BEFEHLSTASTE + OPTIONSTASTE + CTRL + N. Klicken Sie auf ÄNDERN. Die zw eite Kom bination w ird als CTRL + CMD + OPT + N in die Liste eingetragen. Am Ende klicken Sie auf OK. Die von Ihnen getroffenen Einstellungen w erden in das Program m s übernom m en und stehen sofort zur Verfügung. Weitere Hinw eise für das Arbeiten m it Tastaturkurzbefehlen finden Sie in der Online-Hilfe.

Die M acromedia-DefaultEinstellungen finden Sie als HTM L-Dokument auf der beiliegenden CD-ROM unter 075custom/ mm_shortcuts_default.html

Erweiterungen Erw eiterungen (extensions) sind Plug-Ins, m it denen Sie den Funktionsum fang von Dream w eaver erw eitern können. Hierzu gehören unterschiedlichste Arten von Erw eiterungen, z.B. für das Form atieren von Tabellen, neue Verhaltensw eisen, Anbindung von Datenbanken, Skripting-Support etc. Sie können Erw eiterungen vom Macrom edia Exchange Server oder den Websites von Drittanbietern herunterladen und m it dem Extension Manager installieren und verw alten oder Ihre eigenen Erw eiterungen schreiben und m it dem Rest der Welt teilen (siehe unten).

 Exchange: Erweiterungen austauschen Auf der Exchange Website von Macrom edia gibt es zu den Program m en Flash, Dream w eaver und UltraDev neben dem Forum (HILFE: M ACROMEDIA ONLINE-FORUM ) und Support (HILFE: ULTRADEV-SUPPORT ZENTRUM ) vor allem die Möglichkeit, zw ischen Hunderten von sehr nützlichen Erw eiterungen zu w ählen. Die Seiten von Exchange sind zur Zeit noch in englischer Sprache verfasst. Sinn des Exchange Servers ist es, dem Entw icklerum feld von Macrom edia-Produkten eine offene Plattform zum Austausch von Wissen und Anw endungen zu bieten. Der hier angebotene Support und die Erw eiterungen sind in der Regel unentgeltlich.

Die Website von M acromedia gehört – aufgrund der regen Aktivität im Exchange-Bereich – zu den weltweit bestbesuchten Websites. Anfang 2001 lag sie mit über 11 M illionen Visits pro M onat noch vor Napster!

278

Anpassen und Erw eitern

 Erweiterung suchen, herunterladen und installieren M ehr zu M acromedia Exchange finden Sie im Kapitel Online auf Seite 308.

Wählen Sie HILFE: DREAMWEAVER UND ULTRADEV ERWEITERN, um die Verbindung zum Exchange Server herzustellen. In Ihrem Brow ser-Fenster sehen Sie die Startseite der deutschen Exchange Site. Von dort aus können Sie in them atisch gegliederten Übersichten nach Erw eiterungen suchen oder diese m it der Online-Suche finden. Haben Sie eine Erw eiterung gefunden, die Sie testen m öchten, haben Sie die Möglichkeit, diese direkt von der Website aus zu installieren oder erst auf Ihre Festplatte herunter zu laden. In jedem Fall m üssen Sie sich jetzt auf der Exchange Website als User registrieren. Ihre Zugangsbestätigung erhalten sie in der Regel unverzüglich per E-Mail.

 Extension Manager Falls der Extension Manager (der zuw eilen auch noch Package Manager genannt w ird) noch nicht auf Ihrem Rechner installiert ist, m üssen Sie ihn zuvor vom Exchange Server herunterladen und installieren. Starten Sie den Extension Manager aus Dream w eaver oder UltraDev entw eder m it BEFEHLE: ERWEITERUNGEN VERWALTEN… oder HILFE: ERWEITERUNGEN VERWALTEN… Zum Herunterladen klicken Sie auf der Webseite auf den Dow nload-Link der Erw eiterung. Wenn Sie die Erw eiterung direkt auf der Website öffnen, erfolgt die Installation durch den Extension Manager autom atisch. Wollen Sie die Erw eiterung

M acromedia Exchange  Deutschland bietet eine reiche Auswahl unterschiedlicher Erweiterungen. M it „Suche“ können Sie Erweiterungen mit Hilfe von Suchbegriffen finden. Für den Download müssen Sie sich registrieren und erhalten eine M acromedia ID. In diesem Beispiel laden wir eine Erweiterung zur Bereinigung von FrontPage-HTM L für M ac herunter. Für die Installation der Erweiterungen benutzen Sie den Extension M anager, den Sie auch von dieser Site downloaden können.

Erw eiterungen

279

auf Ihre Festplatte dow nloaden, speichern Sie sie in Configurations/ Dow nloaded Extensions. Macrom edia Erw eiterungs-Packages haben die Endung (suffix) .m xi. Um das Erw eiterungs-Package zu installieren, doppelklicken Sie auf die Datei oder öffnen Sie sie direkt aus dem Extension Manager m it DATEI: ERWEITERUNG INSTALLIEREN… ( BEFEHLSTASTE + O). Es erscheint ein Fenster, in dem Sie die gew ünschte Erw eiterung im Ordner Dow nloaded Extensions ausw ählen können. Da es sich bei der Erw eiterung um eine eigenständige Anw endung handelt, folgt noch ein Lizenzvertrag, den Sie akzeptieren m üssen, bevor die Erw eiterung installiert w ird. Die Erw eiterung w ird dann in der Liste im Fenster des Extension Managers m it Nam e, Versionsnum m er, Typ und Autor angezeigt. Ganz links in der Anw endung ist ein Ausw ahlkästchen, m it dem Sie die Anw endung an- und ausschalten können. Die angeschalteten Erw eiterungen sind auch dann in Dream w eaver verfügbar, w enn der Extension Manager nicht aktiv ist. Auf einige Anw endungen können Sie erst nach einem Neustart von Dream w eaver zugreifen. Möchten Sie die Erw eiterung kom plett entfernen, klicken Sie die BACKSPACE-TASTE oder w ählen Sie DATEI: ERWEITERUNG ENTFERNEN. Um die Erw eiterung erneut zu verw enden, m uss sie w ieder installiert w erden.

 Der Extension M anager mit ausgeklappten M enüs. Im Popup-M enü Produkt wählen Sie die Anwendung, in der Sie eine Erweiterung verwalten wollen: in diesem Fall Dreamweaver UltraDev 4. Im oberen Fenster sehen Sie die Liste der installierten Erweiterungen mit den Spalten Name, Versionsnummer, Typ und Autor. Im unteren Fenster sind die meist englischen Erläuterungen zur Anwendung.



Die Erweiterung „Clean Up FrontPage HTM L“ steht sofort nach der Installation des Extension M anagers in Dreamweaver zur Verfügung.

280

Anpassen und Erw eitern

 Eigene Erweiterungen Weitere detaillierte Hinweise, wie Sie Dreamweaver-Erweiterungen selbst erstellen, finden Sie in der Online-Hilfe „Dreamweaver und UltraDev erweitern“.

Wenn Sie sow eit sind, selbst Dream w eaver-Erw eiterungen zu erstellen und vielleicht sogar zu veröffentlichen, hat Macrom edia die notw endigen Hilfestellungen, Dokum entationen und Prozesse im Program m und auf dem Exchange Server bereitgestellt. Wenn Sie HILFE: ERWEITERUNGEN ERSTELLEN UND ABSCHICKEN w ählen, w ird Ihnen auf der im Brow ser aufgerufenen Seite der Zugang zu den Dokum entationen auf dem Exchange Server erm öglicht. Die m eisten dieser Seiten sind zur Zeit noch in englischer Sprache verfasst. Dam it Ihre Erw eiterung das offizielle Macrom edia-Approved-Siegel erhält, m üssen Sie bestim m ten Standards der Program m ierung und Benutzerführung genügen. Auf den Seiten  http:/ / dynam ic.m acrom edia.com / bin/ MM/ exchange/ dream w eaver/ about_testing.jsp  http:/ / dynam ic.m acrom edia.com / bin/ MM/ exchange/ ultradev/ about_testing.jsp finden Sie genaue Anw eisungen und Spezifikationen für das Erstellen und Testen der Erw eiterungen, z.B. eine PDF-Dokum entation des MXI-Form ats.

Hinweise

Eine Liste von Sites, die Erweiterungen – zum Teil auch kommerzielle Packages – anbieten, finden Sie auf der Website zum Buch: www.dreambook.de sowie im Anhang.

 Standarddateityp ändern: Wenn Sie DATEI: ÖFFNEN w ählen, w erden im Dialogfeld standardm äßig alle erkannten Dateitypen angezeigt. Sie können die Reihenfolge der Einträge im Popup-Menü ändern (z.B. ASP-Dateien als default festlegen) und neue Dateitypen in das Menü einfügen.  Dialogfelder anpassen: Sie können Größe und Erscheinungsbild jedes Dialogfelds optim al Ihren Erfordernissen anpassen.  Profil für das Form atieren des HTML-Quellcode einstellen: Die Art, w ie der Quellcode dargestellt w ird, ob Groß- oder Kleinschreibung von Tags, Größe der Tabs, Farbigkeit der Tags und Attribute etc. Diese Modifikationen gehen w eit über die Möglichkeiten von Voreinstellungen (BEARBEITEN: VOREINSTELLUNGEN… ) hinaus.  Interpretation und Darstellung von Drittanbieter-Tags: Wie w erden Drittanbieter-Tags (z.B. ASP, JSP, PHP, ColdFusion) von Dream w eaver beim Öffnen interpretiert? Wie w erden diese Tags im Dokum entfenster dargestellt?  Brow ser-Profile: Sie können die einzelnen Profile der Ziel-Brow ser (Kom patibilität einer Seite m it Ziel-Brow sern überprüfen) m odifizieren oder neue Profile erstellen. Wir haben in diesem Buch darauf verzichtet, auf der beiliegenden CD-ROM Erw eiterungen anzubieten, da Sie sich aktuelle Erw eiterungen besser aus dem Internet herunterladen können. Neben Macrom edia Exchange gibt es eine ganze Reihe von Websites von Drittanbietern.

Statische versus dynam ische Seiten

281

D YNAMISCHER CONTENT Mehr als die Hälfte aller Websites w erden noch in diesem Jahr Ihr Angebot durch Anw endungsserver und Datenbanken erw eitern. Das bedeutet, dass früher oder später jeder Webdesigner m it der Aufgabe konfrontiert w ird, nicht nur ein hübsches Look and Feel, sondern auch die notw endige Funktionalität und Interaktivität in die Seiten einzubinden. Klassischer Ablauf ist, der Screendesigner gestaltet die Oberfläche, der Webdesigner baut die Seite in HTML auf, der Program m ierer bindet die Datenbank an. Die Schnittstellen sind klar, jedoch kennt sich der Program m ierer z.B. besser in Java aus als in HTML. Der Webdesigner w iederum fühlt sich m it den frem den Tags im Sourcecode unw ohl. Er m öchte sehen, w as er tut. Es gibt zw ar eine Reihe von Tools, die die Arbeit erleichtern sollen, jedoch fehlte bisher eine plattform übergreifende Um gebung. Eine solche Um gebung ist UltraDev. Als Erw eiterung von Dream w eaver gibt UltraDev dem Webdesigner zum ersten Mal einen visuellen Editor an die Hand, m it dem es m öglich ist, dynam ischen Content auf sehr effektive Weise in die Seiten einzubinden. Dieses Kapitel zeigt Ihnen nur die Grundlagen: Was dynam ischer Content ist, w elche Voraussetzungen dafür nötig sind, w ie Sie dynam ischen Content erzeugen und w elche zentrale Rolle das Program m dabei spielt. Mehr w ürde den Rahm en dieses Buches sprengen.

Statische versus dynamische Seiten Eine Website kann aus sehr unterschiedlichen Seiten bestehen, die sehr differenzierte Funktionen abdecken. Nehm en Sie z.B. das Im pressum einer Site. Die Inform ationen dieser Seite w erden nur selten geändert, sie haben einen eher statischen Charakter. Auch ein einfaches interaktives Kontaktform ular ist in diesem Sinne statisch, da alle Elem ente fest in der Seite verankert sind und nur der Benutzer die Seite ändert, indem er z.B. Daten eingibt. Werden jedoch auf einer Seite selbstaktualisierende Inhalte dargestellt, Berechnungen gem acht, Benutzereingaben überprüft, individuelle Darstellungen gew ählt, oder findet zw ischen Webserver und Benutzer eine echte Interaktivität statt, handelt es sich in jedem Fall um dynam ische Seiten.

Webanwendungen Eine Webanw endung (w eb application ) besteht aus m ehreren statischen und dynam ischen Seiten. Beide Arten sind – vereinfacht gesagt – reine Textdateien (ASCII).

Um alle Funktionen von UltraDev kennen zu lernen, gehen Sie auf die Website von M acromedia oder schauen Sie in das Buch Dreamweaver UltraDev 4 von Herbert Bauer.

282

Dynam ischer Content

Beide enthalten entw eder HTML oder JavaScripte und w erden vom Webserver an den Client (Brow ser) w eitergeleitet. Die in den Seiten enthaltenen Scripte oder Markups unterscheiden sich jedoch dadurch, ob sie vom Webserver nur w eitergereicht und auf dem Client angezeigt w erden oder auf dem Server generiert und ausgeführt w erden. So w erden JavaScript-gesteuerte Verhaltensw eisen (DHTML z.B. onm ouseover-Bild einblenden) clientseitig ausgeführt, w ährend an anderer Stellen JavaScript serverseitige Aktionen auslösen kann. Solche serverseitigen Skripte erm öglichen erw eiterte Interaktionen. Das Serverskript kann zum Beispiel den Server anw eisen, bestim m te Daten aus einer Datenbank zu beziehen. Bevor die Seite an den Brow ser w eitergereicht w ird, w erden die Daten in den HTML-Code der Seite eingefügt. Beispiele für typische Webanw endungen sind Suchseiten, Warenkorb, Zugriffsverw altungen und Seiten zur Datenbankpflege. Webanw endungen sind also Program m e m it einer erw eiterten Logik bzw . Funktionalität. Einfache Webanw endungen können – m it einem entsprechenden Plug-In – direkt auf dem Webserver im plem entiert w erden (z.B. Apache-Webserver m it Servlet und JSP Engine). In vielen Fällen w ird jedoch eine klare Trennung von Webserver und Anw endung praktiziert, w obei diese auf einem Anw endungsserver (application server) ausgeführt w ird (z.B. IBM WebSphere). Es benötigt nicht jede Webanw endung autom atisch eine Datenbank, w enn keine Daten bezogen oder w ieder zurückgeschrieben w erden m üssen. Dies ist bei einfachen Anw endungen der Fall, w o Berechnungen angestellt w erden, die auf Anw endereingaben basieren und nicht gespeichert w erden m üssen oder z.B. per E-Mail w eiterversandt w erden.

Server und Client Wenn Sie eine statische HTML-Seite einer Website aufrufen, bedeutet das in der Regel, dass eine Interaktion zw ischen Ihrem Brow ser (Client) und der WebserverSoftw are (Server) ausgeführt w ird. Dabei stellt der Client eine Anfrage (HTTP request) an den Server: z.B. eine URL w w w .kilde.com / index.htm l, w oraufhin der Server die Seite an den Client w eiterreicht.

Anwendungsserver und Datenbank Bei Aufruf einer dynam ischen Seite verläuft die Interaktion kom plexer. Der Client m acht die Anfrage beim Webserver. Die entsprechende Seite w ird nun nicht direkt vom Webserver verarbeitet, sondern aufgrund einer bestim m ten Dateiendung (z.B. *.jsp) w ird die Anfrage an den Anw endungsserver w eitergereicht und ausgeführt. Innerhalb der Verarbeitung w erden z.B. die benötigten Daten aus der Datenbank

Anw endungsserver und Datenbank

283

gelesen oder in die Datenbank zurückgeschrieben. Das Ergebnis – HTML-Code m it integrierten aktuellen Daten – w ird an den Webserver zurückgegeben und auf dem Brow ser (Client ) darstellt. Der Anw endungsserver ist Dreh- und Angelpunkt der Interaktion und kann dabei folgende Funktionen w ahrnehm en:  Anw endungen : Er führt Program m e (business applications) aus und/ oder erm öglicht, EJBs auszuführen (EJB container).  Adm inistration : Er verw altet die Site z.B. Sicherheitsroutinen (security, login ) etc.  Workload Managem ent: Er organisiert die Lastverteilung im internen Netz. Dream w eaver UltraDev unterstützt z.B. folgende Anw endungsserver: IBM WebSphere, Microsoft Internet Inform ation Server und Cold Fusion Server. Die Datenbank enthält – vereinfacht gesagt – nur die in Tabellen organisierten Inform ationen (Daten). Diese Daten können über Datenbanktreiber (z.B. JDBC oder JDBC/ ODBC-Bridge) dem Anw endungsserver zur Verfügung gestellt w erden. Dream w eaver UltraDev unterstützt u.a. folgende Datenbanken über die Datenbanktreiber ODBC, JDBC und/ oder ADO: Oracle, Sybase, Inform ix, Microsoft SQL Server und Microsoft Access.

Client

Client

.html

.html

Webserver

.html

.html

Client

.html

.html

Client

.html

.html

Webserver

Webserver

Webserver

cgi

.jsp

.jsp

externe Anwendung

App Server

App Server

 Client-Server-Interaktion mit statischen Seiten (vereinfachte Darstellung)



Client-Server-Interaktion mit dynamischen Seiten und serverseitigen Skripten z.B. Perl (vereinfachte Darstellung)

 Client-Server-Interaktion mit dynamischen Seiten und serverseitigen Skripten, die auf einem Anwendungsserver ausgeführt werden (vereinfachte Dastellung)

jdbc

Datenbank  Client-Server-Interaktion mit dynamischen Seiten und serverseitigen Skripten, die auf einem Anwendungsserver ausgeführt werden und Datenbankabfragen (vereinfachte Darstellung)

284

Dynam ischer Content

Lastverteilung und Cloning Alle Prozesse können an verschiedenen Stellen innerhalb eines Netzw erks ablaufen. Die einzelnen Kom ponenten können im gleichen Rechner (node) – aber auch auf anderen Rechnern, z.B. auf der anderen Seite der Erde ausgeführt w erden. Entscheidend hierbei ist, an w elcher Stelle die Logik – das berechnende Program m – ausgeführt w ird. Da der Aufruf dieser Prozesse zw ischen m ehreren Hardw are- und Softw arekom ponenten verteilt ist, erhöhen sich Traffic und Verarbeitungszeit. In Großprojekten, bei w achsenden Zugriffen auf die Site, m uss die Konfiguration skalierbar bleiben. Die einzelnen Program m kom ponenten w erden funktional aufgesplittet und/ oder geklont (dupliziert ) und können dann im Netzw erk verteilt operieren.

Proprietäre Tags und Server Pages Die Anbindung von PHP mit M ySQL wird zur Zeit von M acromedia nicht unterstützt. Seit Ende M ärz wird die Anbindung von Dreamweaver UnltraDev an PHP durch die Erweiterung PHAkt (www.interakt.ro/ ) ermöglicht.

Es gibt eine ganze Reihe unterschiedlicher Technologien, dynam ischen Content zu erzeugen. Im Rahm en dieses Buches w erden w ir nicht auf Vorzüge und Details eingehen können, sondern nur einen Überblick geben. Alle von Anw endungsservern generierten Seiten sind – abgesehen von Applets – HTML-Derivate. Vereinfacht gesagt, w erden alle proprietären Tags durch dynam ische HTML-Inhalte ersetzt. Mit dem zum Anw endungsserver passenden Editor können die Seiten im WYSIWYG-Modus bearbeitet w erden. Der große Vorteil von Dream w eaver UltraDev ist, dass das Program m verschiedene proprietäre Tags lesen, interpretieren, verarbeiten und im WYSIWYG-Modus darstellen kann: ASP, CFML und JSP.  ASP (Active Server Pages) sind eine reine Microsoft Lösung, die nur in Verbindung m it dem Microsoft Internet Inform ation Server (oder anderen ähnliche MicrosoftProdukten der Net-Technologie) laufen. Am einfachsten lassen sich ASPs m it Microsoft Frontpage bearbeiten.  CFML (ColdFusion Markup Language) sind Seiten m it proprietären Tags, die durch das Program m ColdFusion von Allaire (gehört seit Januar 2001 zu Macrom edia) erzeugt w erden.  JSP (JavaServer Pages) w erden auf allen Anw endungsservern verw endet, die Java-Technologie von Sun Microsystem s unterstützen (z.B. IBM WebSphere). Die proprietären Tags in den Seiten enthalten entw eder Code zum Aufruf w eiterer JavaKlassen, Servlets, JavaBeans, oder EJBs. Ausführbarer Java-Code (z.B. JDBC-Verbindungen) kann aber auch direkt in die Seiten integriert w erden.

Zum Beispiel Java

Zum Beispiel Java Browser

Java ist eine objektorientierte Program m iersprache, die plattform unabhängig und für Netzanw endungen ausgelegt ist, sow ie hohe Sicherheitskriterien erfüllt. Die in Java verw endeten Elem ente, z.B. Klassen, sind als Objekte organisiert und unterliegen eindeutigen hierarchischen Strukturen. Alle auf Java aufsetzenden Technologien folgen diesen Grundregeln.

Webserver

App Server

Das für Java typische M odel View Controler- Prinzip (M VC)  beschreibt die klassischen Funktionen der Netzwerkskomponenten: Betrachten (view), Steuerung, Berechnung (controler), Datenmodell (model).

 Klasse/Objekt Eine Java-Klasse ist ein Bauplan (blueprint ) einer Funktion. Ein Objekt ist schließlich die Realisierung einer nach diesem Bauplan erstellten Klasse. Eigenständige JavaObjekte sind der Bestandteil einer Anw endung m it w eiteren Objekten. In der Regel w erden Teile der Anw endung lokal, andere Teile rem ote ausgeführt. Die Objekte können also beliebig im Netzw erk verteilt sein: z.B. ein Objekt auf einem Anw endungsserver in Ham burg, ein w eiteres auf einem Applikation-Server in Frankfurt, ein drittes auf einem Anw endungsserver in Los Angeles.

 Servlet Ein Java Servlet kann m an als kleine Java-Anw endung bezeichnen, w elche HTML generiert. Wenn also ein Client ein Servlet aufruft, w ird die Anw endung gestartet, führt Berechnungen durch, greift auf die Datenbank zu und gibt das Ergebnis als HTML-Code an den Webserver zurück. Servlets w erden entw eder in der Servlet Engine innerhalb des Webservers oder der Servlet Engine auf dem Anw endungsserver ausgeführt.

 JavaBeans™ Diese eigenständigen Kom ponenten bestehen m eistens aus m ehreren Klassen bzw . Objekten. Im Gegensatz zu einem einzelnen Objekt m it einfacher Funktionalität, beinhalten JavaBeans-Kom ponenten erw eiterte Funktionalität. So führen JavaBeans in sich abgeschlossene Operationen durch, ohne auf andere Objekte zugreifen zu m üssen. Dam it eine Java-Kom ponente zur JavaBeans w ird, m üssen bestim m te Kriterien erfüllt sein (z.B. Serialisierbarkeit). JavaBeans können in einer norm alen Java-Um gebung (virtual m achine) laufen oder auf dem Anw endungsserver ausgeführt w erden.

 Enterprise JavaBeans™ (EJB) sind eine Weiterentw icklung von JavaBeans, die insbesondere für E-Com m erceAnw endungen w ichtige Aspekte enthalten. Dies sind u.a. Transaktionalität – die

Datenbank

285

286

Dynam ischer Content

Durchführung von Datenbankvorgängen m it der Möglichkeit Ausgangszustände w iederherzustellen (rollback). Ferner enthalten sie von Haus aus Funktionen für Persistenz, Sicherheit, Skalierbarkeit und Thread Managem ent etc, die norm alerw eise aufw ändig von Hand program m iert w erden m üssten. EJBs w erden ausschließlich auf einem Anw endungsserver ausgeführt.

 Applet Java Applet ist eine Java-Anw endung, die vom Server auf den Client geladen w ird und dort von der in den Brow ser integrierten Java Virtual Machine (JVM) ausgeführt w ird. Der Vorteil ist eine kom plette Unabhängigkeit, d.h., das vollständig geladene Applet kann auch dann ausgeführt w erden, w enn keine Verbindung m ehr zw ischen Server und Client besteht. Der Nachteil ist, dass große Anw endungen den Brow ser schnell auslasten.

 JavaScript ist eine in HTML integrierte Scriptsprache, die den Leistungsum fang des Brow sers um zahlreiche Funktionen erw eitert. Das Script w ird durch den Brow ser ausgeführt. JavaScript und CSS, allein oder in Kom bination, w erden auch als dynam isches HTML bezeichnet. JavaScript hat – außer dem Nam en – nichts m it Java gem einsam . Stark vereinfachte Darstellung  eines Distributed Networking am Beispiel von Java: M ehrere Clients (Browser) können gleichzeitig unterschiedliche Anfragen an einen Webserver richten. Der Webserver kann diese Anfragen an andere Webserver weiterleiten. Bei dynamischem Content werden die Anfragen an den Anwendungsserver weitergeleitet, die Anwendungen auf unterschiedlichen im Netzwerk verteilten Servern gestartet. Diese Anwendungen wiederum machen unabhängig voneinander Datenbankabfragen oder starten ihrerseits Anwendungen. Die Ergebnisdaten fließen auf dem gleichen Weg an den Client zurück (vereinfachte Dastellung).

Client Java VM .html

Applet

.html

Webserver

.jsp Servlet

.jsp

.jsp

JavaBeans

EJB

App Server Servlet Engine jdbc

JSP Engine jdbc

Datenbank

jdbc

Arbeiten m it UltraDev

287

D REAMWEAVER ULTRAD EV UltraDev ist eigentlich eine sehr um fangreiche Extensionsam m lung, die von Macrom edia entgeltlich vertrieben w ird: und zw ar nicht als Erw eiterung, sondern als kom plettes Paket (bzw . Update von Dream w eaver). UltraDev ist eine universelle Schnittstelle zw ischen dem WYSIWYG-Editor Dream w eaver und datenbankgestützten Anw endungen. Obw ohl ich Designer und nicht Techniker bin, ist die Macht – die m an m it einer echten Anw endung hat – faszinierend. Diese Macht ist jedoch auch gefährlich, w enn UltraDev von Usern verw endet w ird, denen die nötigen Grundlagen fehlen. Dies resultiert dann häufig in E-Com m erce-Applikationen m it Sicherheitslücken groß w ie Scheunentore und Verlusten um fangreicher Datenbestände. Auf der Client-Seite ist der angerichtete Schaden begrenzt, serverseitig stehen oft große Werte auf dem Spiel. Ich hörte von einem Fall, bei dem eine m it Drum beat erstellte Page durch eine unglückliche Param eterübergabe o.Ä. eine kom plette Datenbank m it w ichtigen Kundendaten gelöscht w urde.

Arbeiten mit UltraDev Dynam ische Seiten m it UltraDev erzeugen Sie in der Regel w ie folgt:  Zuerst erstellen Sie das Seitenlayout einer statischen Seite.  Als Nächstes definieren Sie eine Datenquelle (z.B. einen Datensatzgruppe).  Der dynam ische Inhalt aus der zuvor definierten Datenquelle w ird hinzugefügt.  Die Funktionalität der Seite w ird durch die Befehlstaste des Serververhaltens erw eitert.

 Seitenlayout In dem Layout Ihrer Seite platzieren Sie die gew ünschten statischen Elem ente (z.B. Grafik, Texte, Links) sow ie die Elem ente, die später dynam ischen Content enthalten sollen (z.B. eine Tabelle m it vorgesehenen Datenfeldern).

 Datenquelle definieren Um dynam ischen Content in Ihre Seite einzubinden, m üssen Sie als Nächstes die Datenquelle definieren, aus der die Inform ationen kom m en sollen. Die von Ihnen ausgew ählten Datenquellen (z.B. Datensatzgruppen) w erden in der Datenbindungenpalette gelistet und verw altet.

Wenn Sie noch nicht mit UltraDev arbeiten, machen Sie Ihre ersten Schritte und laden Sie sich eine 30-Tage-Trial-Version von der M acromedia Website oder nehmen die Version auf unserer CD-ROM .

Also überlegen Sie genau, was Sie tun. Gehen Sie planerisch mit Datenbanken und Anwendungsserver um und verlangen Sie regelmäßige Backups der Anwendungsumgebung.

288

Dream w eaver UltraDev

 Dynamischen Inhalt hinzufügen Ohne sich über zugrunde liegende Serverskripte Gedanken m achen zu m üssen, können Sie jetzt Ihrer Seite dynam ischen Inhalt hinzufügen. Sie können den Content  an der Einfügem arke einfließen lassen,  einen String (eine Textzeichenkette) ersetzen lassen,  oder in ein HTML-Attribut einfügen. So kann dynam ischer Inhalt z.B. das Attribut src eines Bildes definieren. Den einzusetzenden dynam ischen Inhalt w ählen Sie aus einer beliebigen Datenquelle in der Datenbindungenpalette (z.B. das Feld einer Datensatzgruppe, die Eigenschaft eines Serverobjekts etc.). UltraDev setzt dann an der betreffenden Stelle ein Serverskript in die Seite ein, das den Server die Daten von der ausgew ählten Datenquelle zum HTML-Code der Seite übertragen lässt.

 Serververhalten hinzufügen Als Nächstes w ird die Seite m it serverseitiger „Intelligenz“ versehen. Sie definieren für die Seite verschiedene Serververhalten. Das Script (z.B. Java, VBScript oder ColdFusion) w ird nicht im Brow ser, sondern auf dem Server ausgeführt. UltraDev bittet Ihnen eine Reihe vordefinierter Serververhalten an. Zum Beispiel können Sie das Serververhalten so einstellen, dass Sie von einem auf der Seite dargestellten Datensatz den nächsten oder vorherigen Datensatz der Datenbank anzeigen lassen. Weiter bietet Ihnen UltraDev die Möglichkeit, eigene Serververhalten selbst zu erstellen oder von Dritten program m ierte Serververhalten zu verw enden.

 LiveObjects Mit den von UltraDev zur Verfügung gestellten Live-Objekten lassen sich m ehrere Serververhalten gleichzeitig in die Seite einfügen. So können z.B. kom plexe Navigationen für Datensätze oder auch Master-/ und Detailseiten erstellt w erden.

 LiveData In UltraDev lassen sich dynam ische Inhalte direkt darstellen. Hierzu übernim m t UltraDev direkt die Daten vom Anw endungsserver und stellt sie innerhalb der Seite dar. Dies ist sehr praktisch und zeitsparend, da die Seite w ährend der Entw icklung nicht im m er auf dem Rem ote-Server in der Um gebung des Anw endungsservers getestet w erden m uss, um eine realistische Darstellung des dynam ischen Inhalts zu bekom m en.

Kleiner UltraDev-Workshop

Code

Dreamweaver UltraDev