Sie sind auf Seite 1von 629

Dreamweaver verwenden

macromedia
®
Marken
Afterburner, AppletAce, Attain, Attain Enterprise Learning System, Attain Essentials, Attain Objects for Dreamweaver, Authorware,
Authorware Attain, Authorware Interactive Studio, Authorware Star, Authorware Synergy, Backstage, Backstage Designer, Backstage
Desktop Studio, Backstage Enterprise Studio, Backstage Internet Studio, Design in Motion, Director, Director Multimedia Studio,
Doc Around the Clock, Dreamweaver, Dreamweaver Attain, Drumbeat, Drumbeat 2000, Extreme 3D, Fireworks, Flash, Fontographer,
FreeHand, FreeHand Graphics Studio, Generator, Generator Developer's Studio, Generator Dynamic Graphics Server, Knowledge
Objects, Knowledge Stream, Knowledge Track, Lingo, Live Effects, Macromedia, Macromedia M Logo & Design, Macromedia Flash,
Macromedia Xres, Macromind, Macromind Action, MAGIC, Mediamaker, Object Authoring, Power Applets, Priority Access, Roundtrip
HTML, Scriptlets, SoundEdit, ShockRave, Shockmachine, Shockwave, Shockwave Remote, Shockwave Internet Studio, Showcase, Tools
to Power Your Ideas, Universal Media, Virtuoso, Web Design 101, Whirlwind und Xtra sind Marken von Macromedia, Inc. und sind
eventuell in den USA oder in anderen Gerichtsbarkeiten eingetragen. Andere Produktnamen, Logos, Designs, Titel, Wörter oder Begriffe,
die in dieser Dokumentation genannt werden, können Marken, Dienstleistungsmarken oder Warenbezeichnungen von Macromedia, Inc.
oder anderen Organisationen sein und sind eventuell in bestimmten Gerichtsbarkeiten eingetragen.

Apple-Haftungsausschluss
APPLE COMPUTER, INC. LEHNT JEDE AUSDRÜCKLICHE ODER STILLSCHWEIGENDE GEWÄHRLEISTUNG IN
BEZUG AUF DAS ENTHALTENE COMPUTER-SOFTWAREPAKET, SEINE MARKTÜBLICHKEIT ODER EIGNUNG FÜR
EINEN BESTIMMTEN ZWECK AB. DER AUSSCHLUSS STILLSCHWEIGENDER GEWÄHRLEISTUNG IST IN
MANCHEN STAATEN NICHT ZULÄSSIG. DAHER TRIFFT DER OBIGE GEWÄHRLEISTUNGSAUSSCHLUSS
EVENTUELL NICHT AUF SIE ZU. DURCH DIESE GEWÄHRLEISTUNG ERHALTEN SIE BESTIMMTE
RECHTSANSPRÜCHE. MÖGLICHERWEISE HABEN SIE, JE NACH DER FÜR SIE ZUSTÄNDIGEN GERICHTSBARKEIT,
WEITERE RECHTE.

Copyright © 2000 Macromedia, Inc. Alle Rechte vorbehalten. Dieses Handbuch darf ohne die vorherige schriftliche Genehmigung
von Macromedia, Inc. weder ganz noch teilweise kopiert, fotokopiert, reproduziert, übersetzt oder in elektronische oder
maschinenlesbare Form konvertiert werden.
Artikelnummer ZDW40M100G

Unser Dank geht an folgende Mitarbeiter:


Projektmanagement: Sheila McGinn
Autoren: JuLee Burdekin, David Jacowitz und Denise Lee
Redaktion: Susan Moxley
Multimedia-Design und Produktion: Aaron Begley und Noah Zilberberg
Druckproduktion: Chris Basmajian, Paul Benkman, Caroline Branch und Rebecca Godbois
Webredaktion: Jane Flint DeKoven und Jeff Harmon
Lokalisierungsmanager: Kristin Conradi
Besonderer Dank geht an Jaime Austin, Chris Bank, Saam Barrager, Heidi Bauer, Jennifer Chapman, Winsha Chen, Kristin Conradi,
Margaret Dumas, Peter Fenczik, Jean Fitzgerald, S Fred Golden, Stephanie Goss, Victor Grigorieff, Narciso (nj) Jaramillo, John Koch,
David Lenoe, Eric Lerner, Charles Nadeau, Eric Ott, Jeff Schang, Mike Sundermeyer, Scott Richards, Raymond Lim, Yoko Vogt, Luciano
Arruda, Peter von dem Hagen, Gerd Stodiek, Sabine Rusam-Hathaway, Katja Sommer, Bonnie Loo, Karen Catlin, Ken Karleskint, Chris
Bank, Yoko Shindo, Masayo Noda, Tim Hussey und SDL International.

Erstausgabe: November 2000

Macromedia, Inc.
600 Townsend St.
San Francisco, CA 94103, USA

2
INHALTSVERZEICHNIS

EINFÜHRUNG
Erste Schritte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Systemvoraussetzungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Dreamweaver installieren. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Dreamweaver kennen lernen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Entwicklungsphasen bei der Erstellung von Websites . . . . . . . . . . . . . 16
Der beste Start. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Typografische Konventionen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Was ist neu in Dreamweaver 4. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Ressourcen für HTML- und Web-Technologien . . . . . . . . . . . . . . . . . 25
Zugriffshilfen und Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

KAPITEL 1
Dreamweaver-Lehrgang . . . . . . . . . . . . . . . . . . . . . . .29
Eine Tour in Dreamweaver unternehmen . . . . . . . . . . . . . . . . . . . . . . 30
Der Arbeitsbereich in Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Site-Struktur für den Lehrgang einrichten . . . . . . . . . . . . . . . . . . . . . . 33
Lokale Sites definieren. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Die Homepage für die Website erstellen . . . . . . . . . . . . . . . . . . . . . . . 35
Seiten in der Layoutansicht entwerfen . . . . . . . . . . . . . . . . . . . . . . . . . 36
Seiten mit Inhalt füllen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Standardansicht verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Die Elementpalette verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Flash-Objekte einfügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Vorlagen erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
Sites überprüfen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Die nächsten Schritte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70

3
KAPITEL 2
Dreamweaver – Erste Schritte . . . . . . . . . . . . . . . . . . 73
Der Dreamweaver-Arbeitsbereich . . . . . . . . . . . . . . . . . . . . . . . . . . . . .74
Die verschiedenen Ansichten in Dreamweaver . . . . . . . . . . . . . . . . . . .75
Mit Farben arbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .90
Websichere Farben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .92
Voreinstellungen wählen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .92
Dreamweaver mit anderen Anwendungen einsetzen . . . . . . . . . . . . . . .94
Dreamweaver benutzerdefiniert anpassen . . . . . . . . . . . . . . . . . . . . . . .94

KAPITEL 3
Websites planen und einrichten . . . . . . . . . . . . . . . . 101
Websites planen und entwerfen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .101
Neue Sites mit Dreamweaver einrichten . . . . . . . . . . . . . . . . . . . . . . .107
Vorhandene Websites bearbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . .109
Remote-Sites bearbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .110
Sites aus der Siteliste entfernen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .112

KAPITEL 4
Siteverwaltung und Teamarbeit . . . . . . . . . . . . . . . . .113
Das Sitefenster . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .115
Dateien im Sitefenster anzeigen und öffnen . . . . . . . . . . . . . . . . . . . .120
Die Sitemap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .124
Sitemap verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .124
Remote-Sites einrichten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .132
WebDAV- und SourceSafe-Integration . . . . . . . . . . . . . . . . . . . . . . . .135
Fehlerbehebung beim Einrichten der Remote-Site. . . . . . . . . . . . . . . .138
Ein- und Auschecken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .140
Design Notes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .143
Den Arbeitsablauf durch Berichte optimieren . . . . . . . . . . . . . . . . . . .150
Dateien abrufen und bereitstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . .152
Dateien in der lokalen Site und der Remote-Site synchronisieren . . . .155

KAPITEL 5
Dokumente einrichten . . . . . . . . . . . . . . . . . . . . . . . . . 157
HTML-Dokumente erstellen, öffnen und speichern . . . . . . . . . . . . . .158
Dokumenteigenschaften festlegen . . . . . . . . . . . . . . . . . . . . . . . . . . . .160
Elemente im Dokumentfenster auswählen . . . . . . . . . . . . . . . . . . . . .162
Visuelle Hilfsmittel bei der Gestaltung von Webseiten verwenden. . . .165

4 Inhaltsverzeichnis
Head-Inhalt anzeigen und bearbeiten . . . . . . . . . . . . . . . . . . . . . . . . .167
Tasks automatisieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .168

KAPITEL 6
Seitenlayouts entwerfen . . . . . . . . . . . . . . . . . . . . . . . 177
Layoutzellen und Layouttabellen. . . . . . . . . . . . . . . . . . . . . . . . . . . . .179
Layoutzellen und Layouttabellen zeichnen . . . . . . . . . . . . . . . . . . . . .180
Layoutzellen und Layouttabellen verschieben, vergrößern
und verkleinern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .186
Layoutzellen und -tabellen formatieren . . . . . . . . . . . . . . . . . . . . . . . .187
Layoutbreite einstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .190
Voreinstellungen für die Layoutansicht festlegen . . . . . . . . . . . . . . . . .194

KAPITEL 7
Tabellen zur Präsentation von Inhalten
verwenden. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197
Tabellen einfügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .198
Tabellenelemente auswählen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .201
Tabellen und Zellen formatieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . .203
Tabellen und Zellen vergrößern oder verkleinern . . . . . . . . . . . . . . . .208
Zeilen und Spalten hinzufügen und entfernen. . . . . . . . . . . . . . . . . . .210
Zellen kopieren und einfügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .213
Tabellen sortieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .215
Tabellendaten exportieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .216

KAPITEL 8
Frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
Entscheidung für oder gegen Frames . . . . . . . . . . . . . . . . . . . . . . . . . .218
Webseiten mit Frames erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .219
Frames erstellen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .219
Frames oder Framesets auswählen . . . . . . . . . . . . . . . . . . . . . . . . . . . .222
Frame- und Frameset-Dateien speichern . . . . . . . . . . . . . . . . . . . . . . .224
Eigenschaften für Frames und Framesets . . . . . . . . . . . . . . . . . . . . . . .226
Frame-Inhalt mithilfe von Hyperlinks steuern. . . . . . . . . . . . . . . . . . .232
Vorgehensweise bei Browsern ohne Frame-Unterstützung . . . . . . . . . .234
Verhalten mit Frames verwenden. . . . . . . . . . . . . . . . . . . . . . . . . . . . .234

Inhaltsverzeichnis 5
KAPITEL 9
Elemente verwalten und einfügen . . . . . . . . . . . . . 237
Die Elementpalette . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .238
Favoritenelemente verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .246

KAPITEL 10
Text einfügen und formatieren . . . . . . . . . . . . . . . . . 251
Text und Objekte einfügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .252
Listen erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .256
Schrift, Stile, Farbe und Ausrichtung festlegen . . . . . . . . . . . . . . . . . .257
HTML-Stile zur Formatierung von Text verwenden . . . . . . . . . . . . . .262
CSS-Stylesheets verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .267
CSS-Stile in HTML-Tags konvertieren . . . . . . . . . . . . . . . . . . . . . . . .277
Rechtschreibung prüfen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .278
Text, Tags und Attribute suchen und ersetzen . . . . . . . . . . . . . . . . . . .279

KAPITEL 11
Bilder einfügen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289
Bilder einfügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .290
Bildeigenschaften einstellen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .291
Imagemaps erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .296
Mit externen Bildeditoren arbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . .300
Bilder mit Verhalten versehen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .303

KAPITEL 12
Fireworks und Dreamweaver verwenden . . . . . . 305
Fireworks-Dateien in Dreamweaver übernehmen . . . . . . . . . . . . . . . .305
Fireworks in Dreamweaver starten. . . . . . . . . . . . . . . . . . . . . . . . . . . .309
In Dreamweaver platzierte Fireworks-Datei bearbeiten . . . . . . . . . . . .312
In Dreamweaver platzierte Fireworks-Bilder und Animationen
optimieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .315
In Dreamweaver platzierte HTML-Dateien aus Fireworks
aktualisieren. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .318
Webfotoalben erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .319

KAPITEL 13
Medien einfügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323
Medienobjekte einfügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .323
Externe Editoren starten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .324

6 Inhaltsverzeichnis
Design Notes mit Medienobjekten verwenden . . . . . . . . . . . . . . . . . .326
Informationen über Flash-Inhalte . . . . . . . . . . . . . . . . . . . . . . . . . . . .326
Flash-Schaltflächenobjekte verwenden. . . . . . . . . . . . . . . . . . . . . . . . .327
Flash-Textobjekte verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .331
Eigenschaften von Flash-Objekten festlegen . . . . . . . . . . . . . . . . . . . .332
Flash-Filme einfügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .334
Generatorobjekte einfügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .336
Shockwave-Filme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .337
Audiodateien in eine Seite einfügen. . . . . . . . . . . . . . . . . . . . . . . . . . .339
Netscape Navigator-Plug-Ins einfügen. . . . . . . . . . . . . . . . . . . . . . . . .341
ActiveX-Steuerelemente einfügen . . . . . . . . . . . . . . . . . . . . . . . . . . . .344
Java-Applets einfügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .346
Parameter verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .348
Medien über Verhalten steuern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .349

KAPITEL 14
HTML in Dreamweaver bearbeiten . . . . . . . . . . . . . 351
Grundlegende HTML-Tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .352
Kommentare einfügen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .358
Referenzpalette von Dreamweaver verwenden . . . . . . . . . . . . . . . . . . .359
Roundtrip-HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .361
Codeansicht (oder Codeinspektor) verwenden . . . . . . . . . . . . . . . . . .362
Skripte einfügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .366
Andere Dateien als HTML in Dreamweaver öffnen und bearbeiten . .369
HTML-Tags in der Entwurfsansicht bearbeiten . . . . . . . . . . . . . . . . .370
Einstellungen für die Codeformatierung . . . . . . . . . . . . . . . . . . . . . . .374
HTML-Quellcode optimieren. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .379
Microsoft Word-HTML optimieren . . . . . . . . . . . . . . . . . . . . . . . . . .381
Mit externen HTML-Editoren arbeiten . . . . . . . . . . . . . . . . . . . . . . .382

KAPITEL 15
Hyperlinks und Navigation . . . . . . . . . . . . . . . . . . . . .387
Speicherorte und Pfade von Dokumenten . . . . . . . . . . . . . . . . . . . . . .388
Hyperlinks erstellen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .391
Hyperlinks verwalten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .399
Sprungmenüs erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .403
Navigationsleisten erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .405
Verhalten an Hyperlinks anfügen . . . . . . . . . . . . . . . . . . . . . . . . . . . .409

Inhaltsverzeichnis 7
KAPITEL 16
Inhalte über Vorlagen und Bibliotheken wieder
verwenden. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 411
Vorlagen erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .413
Bearbeitbare Bereiche einer Vorlage definieren. . . . . . . . . . . . . . . . . . .418
Dokumente auf Grundlage einer Vorlage erstellen. . . . . . . . . . . . . . . .424
Seiten aktualisieren, die auf einer Vorlage basieren. . . . . . . . . . . . . . . .427
XML-Inhalt exportieren und importieren . . . . . . . . . . . . . . . . . . . . .428
Bibliothekselemente erstellen, verwalten und bearbeiten . . . . . . . . . . .431
Server-Side Includes verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . .439

KAPITEL 17
Dynamische Ebenen . . . . . . . . . . . . . . . . . . . . . . . . . 443
Ebenen und HTML-Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .444
Ebenen auf einer Seite erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .445
Ebenen verwalten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .449
Ebeneneigenschaften festlegen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .453
Stapelreihenfolge der Ebenen ändern. . . . . . . . . . . . . . . . . . . . . . . . . .456
Sichtbarkeit der Ebenen ändern. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .457
Tabellen und Ebenen für das Layout verwenden . . . . . . . . . . . . . . . . .458
Ebenen animieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .462
Verhaltensaktionen zur Steuerung von Ebenen und Zeitleisten . . . . . .471

KAPITEL 18
Verhalten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 473
Die Verhaltenspalette verwenden. . . . . . . . . . . . . . . . . . . . . . . . . . . . .474
Ereignisse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .474
Verhalten definieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .477
Verhalten und Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .479
Verhalten für Zeitleisten definieren . . . . . . . . . . . . . . . . . . . . . . . . . . .480
Verhalten ändern. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .481
Ein Verhalten aktualisieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .481
Neue Aktionen erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .482
Verhalten von Drittanbietern herunterladen und installieren. . . . . . . .482
Aktionen für Verhalten aus dem Dreamweaver-Lieferumfang verwenden .
483

8 Inhaltsverzeichnis
KAPITEL 19
JavaScript-Code debuggen . . . . . . . . . . . . . . . . . . . 513
Debugger ausführen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .514
Logische Fehler suchen und beheben. . . . . . . . . . . . . . . . . . . . . . . . . .516

KAPITEL 20
Formulare erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . 521
CGI-Skripte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .522
Formularobjekte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .522
Formulare erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .523
Formularfelder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .525
Kontrollkästchen und Optionsschalter einfügen . . . . . . . . . . . . . . . . .530
Listen und Menüs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .534
Formularschaltflächen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .536
Formulargestaltung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .538
Formulare verarbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .539
Verhalten für Formulare verwenden . . . . . . . . . . . . . . . . . . . . . . . . . .540

KAPITEL 21
Websites testen und veröffentlichen. . . . . . . . . . . 543
Browserkompatibilität überprüfen. . . . . . . . . . . . . . . . . . . . . . . . . . . .545
Mit Verhalten Browser und Plug-Ins ermitteln . . . . . . . . . . . . . . . . . .546
Vorschau in Browsern anzeigen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .546
Hyperlinks auf einer Seite oder einer Site überprüfen . . . . . . . . . . . . .548
Download-Zeit und -Größe überprüfen . . . . . . . . . . . . . . . . . . . . . . .551
Berichte zum Testen einer Site verwenden . . . . . . . . . . . . . . . . . . . . . .552

KAPITEL 22
Dreamweaver anpassen . . . . . . . . . . . . . . . . . . . . . . 555
Standarddateityp ändern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .556
Objektpalette modifizieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .557
Einfache Objekte erstellen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .558
Dreamweaver-Menüs anpassen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .559
Dialogfelder anpassen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .571
Standard-HTML-Formatierung ändern . . . . . . . . . . . . . . . . . . . . . . .572
Mit Browserprofilen arbeiten. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .574
Dreamweaver erweitern: Grundlagen . . . . . . . . . . . . . . . . . . . . . . . . .578
Interpretation von Drittanbieter-Tags anpassen . . . . . . . . . . . . . . . . . .579

Inhaltsverzeichnis 9
ANHANG A
Tastaturkurzbefehle . . . . . . . . . . . . . . . . . . . . . . . . . . 589
Menü „Datei“ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .590
Menü „Bearbeiten“ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .590
Seitenansichten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .592
Seitenelemente anzeigen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .592
Code-Bearbeitung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .592
Text bearbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .594
Text formatieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .594
Text suchen und ersetzen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .596
Mit Tabellen arbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .596
Mit Frames arbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .597
Mit Ebenen arbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .597
Mit Zeitleisten arbeiten. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .599
Mit Bildern arbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .599
Hyperlinks verwalten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .599
Zielbrowser und Vorschau in Browsern . . . . . . . . . . . . . . . . . . . . . . . .600
Debug in Browsern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .600
Siteverwaltung und FTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .600
Sitemap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .602
Plug-Ins abspielen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .602
Mit Vorlagen arbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .603
Objekte einfügen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .603
Verlaufspalette. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .603
Paletten öffnen und schließen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .604
Hilfe aufrufen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .604
Übersicht der Tastaturbefehle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .605

INDEX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 609

10 Inhaltsverzeichnis
EINFÜHRUNG
Erste Schritte
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Macromedia Dreamweaver ist ein professioneller, visueller HTML-Editor zur


Erstellung und Verwaltung von Websites und Internetseiten. Mit Dreamweaver
haben Sie die Möglichkeit, ganz einfach HTML-Seiten selbst zu kodieren oder
direkt in einer visuellen Entwicklungsumgebung zu arbeiten.
Dreamweaver bietet viele HTML-Tools und Funktionen, wie z. B. eine HTML-,
CSS- und JavaScript-Referenz und einen JavaScript Debugger. Außerdem wurden
Codeeditoren (Codeansicht und Codeinspektor) integriert, mit denen Sie
JavaScript-, XML- und andere Textdokumente direkt in Dreamweaver bearbeiten
können. Mit der Roundtrip HTML-Technologie von Macromedia werden
HTML-Dokumente importiert, ohne dass Code neu formatiert wird. Zudem
können Sie bei Bedarf definieren, ob Dreamweaver den HTML-Code optimieren
und neu formatieren soll.
Dank der visuellen Bearbeitungsfunktionen von Dreamweaver können Sie Ihre
Webseiten im Handumdrehen mit diversen Designelementen und Funktionen
ausstatten, ohne eine einzige Codezeile schreiben zu müssen. Sie können alle
Elemente Ihrer Website anzeigen und aus einer praktischen Palette direkt in
Ihr Dokument ziehen. Rationalisieren Sie Ihren Arbeitsablauf, indem Sie Bilder in
Macromedia Fireworks erstellen und bearbeiten und dann direkt in Dreamweaver
importieren. Sie können auch eigene Flash-Objekte direkt in Dreamweaver
einfügen.
Dreamweaver kann Ihren Anforderungen entsprechend angepasst werden. Sie
können eigene Objekte und Befehle erstellen, Tastaturkurzbefehle modifizieren
und sogar JavaScript-Code schreiben, um Dreamweaver mit neuen Verhalten,
Eigenschafteninspektoren und Siteberichten zu erweitern.

Systemvoraussetzungen
Für Dreamweaver ist die folgende Hardware und Software erforderlich.

11
Für Microsoft Windows:

• Intel Pentium oder gleichwertiger Prozessor, 166 MHz oder höher, mit
Windows 95, Windows 98, Windows 2000, Windows Me oder Windows NT
(mit Server Pack 3)
• Netscape Navigator oder Microsoft Internet Explorer ab Version 4.0
• 32 MB RAM sowie 110 MB freier Festplattenspeicher
• Farbmonitor mit einer Mindestauflösung von 800 x 600 Pixeln und
256 Farben
• CD-ROM-Laufwerk

Für Macintosh:

• Power Macintosh mit Mac OS8.6 oder 9.x


• 32 MB RAM sowie 1350 MB freier Festplattenspeicher
• Farbmonitor mit einer Mindestauflösung von 800 x 600 Pixeln und
256 Farben
• CD-ROM-Laufwerk

Dreamweaver installieren
In diesem Abschnitt wird beschrieben, wie Sie Dreamweaver auf einem Windows-
oder Macintosh-Computer installieren.

So installieren Sie Dreamweaver:

1 Legen Sie die Dreamweaver-CD in das CD-ROM-Laufwerk des


Computers ein.
2 Folgende Optionen stehen zur Auswahl:
• Windows: Wählen Sie Start > Ausführen. Klicken Sie auf Durchsuchen und
wählen Sie die Datei Dreamweaver 4 Installer.exe auf der Dreamweaver-CD
aus. Klicken Sie im Dialogfeld Ausführen auf OK, um den
Installationsvorgang zu starten.
• Macintosh: Doppelklicken Sie auf das Symbol des Dreamweaver-
Installationsprogramms.
3 Folgen Sie den Anweisungen auf dem Bildschirm.
4 Starten Sie den Computer neu, wenn Sie dazu aufgefordert werden.

12 Einführung
Dreamweaver kennen lernen
Das Macromedia Dreamweaver-Paket enthält verschiedene Medien, die Ihnen
dabei helfen sollen, das Programm schnell zu erlernen und eigene, professionelle
Websites und Internetseiten zu erstellen. Dazu gehören ein gedrucktes Handbuch,
Online-HTML-Hilfeseiten, ShowMe-Filme, ein Lehrgang und interaktive
Lektionen. Darüber hinaus wird die Macromedia-Website regelmäßig auf den
neuesten Stand gebracht.
Sehen Sie sich zunächst die ShowMe-Filme an, um die Funktionen von
Dreamweaver kennen zu lernen. Arbeiten Sie dann den Dreamweaver-Lehrgang
durch. Zuletzt können Sie mithilfe der Dreamweaver-Lektionen noch tiefer in die
Thematik einsteigen.

ShowMe-Filme
Die ShowMe-Filme bieten eine animierte Einführung in einige der
Hauptfunktionen von Dreamweaver. Bei der Tour werden alle ShowMe-Filme der
Reihe nach gezeigt.
Um einen ShowMe-Film anzusehen, müssen Sie Hilfe > Tour wählen und
anschließend den gewünschten Filmtitel klicken. Klicken Sie nach jedem Film auf
die Schaltfläche Home, um zur Liste mit den Filmen zurückzukehren. Klicken Sie
dann auf einen anderen Film. Sie können die gesamte Tour sehen oder einige Teile
überspringen, um bestimmte Abschnitte zu sehen.

Lehrgang
Wenn Sie bisher nur wenig Erfahrung mit der Erstellung von Websites haben,
sollten Sie mit dem Dreamweaver-Lehrgang beginnen. In dem Lehrgang erfahren
Sie, wie Sie mit einigen der wichtigsten und leistungsstärksten Dreamweaver-
Funktionen eine Muster-Website erstellen können. Sie finden den Lehrgang
sowohl in der Dreamweaver-Hilfe als auch im Handbuch Dreamweaver
verwenden. Den Lehrgang können Sie auch als gedruckte Ausgabe von der
Macromedia-Website herunterladen.
Zum Lehrgang gehören Beispielseiten und Elemente (Bilder und Macromedia
Flash-Dateien), mit denen Sie Ihre erste Website erstellen können.

Dreamweaver-Lektionen
Zum Lieferumfang von Dreamweaver gehören mehrere interaktive Lektionen.
In jeder Lektion wird ein bestimmtes Thema im Detail behandelt. Die zum
Lieferumfang gehörenden Beispielseiten enthalten alle für die jeweilige Lektion
benötigten Elemente. Die Lektionen können als schrittweise Anleitungen zur
Bearbeitung der mitgelieferten Beispielseiten oder als Hilfe bei der Erstellung
eigener Websites verwendet werden.
Die Lektionen befinden sich im Menü Hilfe > Lektionen. Wählen Sie einfach das
gewünschte Thema aus.

Erste Schritte 13
Dreamweaver-Benutzerhandbuch (gedruckte Version)
Das Benutzerhandbuch Dreamweaver verwenden ist die gedruckte Ausgabe der
Dreamweaver-Hilfe. Hier finden Sie unter anderem Informationen zu Befehlen
und Funktionen von Dreamweaver. Einige Themen über Programmoptionen sind
nicht in diesem Buch enthalten. Informationen zu diesen Themen finden Sie in
der Dreamweaver-Hilfe.
Wenn Sie die ESD-Version (Electronic Software Download) von Dreamweaver
besitzen, können Sie eine druckbare Version von Dreamweaver verwenden unter
folgender Adresse vom Dreamweaver Support Center herunterladen:
http://www.macromedia.com/support/dreamweaver/documentation.html.

Dreamweaver-Hilfe
Die Dreamweaver-Hilfe enthält ausführliche Informationen zu allen Funktionen
von Dreamweaver.
Sie sollten nach Möglichkeit Netscape Navigator oder Microsoft Internet Explorer
ab Version 4.0 zur Anzeige der Dreamweaver-Hilfe verwenden.
In der Dreamweaver-Hilfe wird sehr häufig JavaScript eingesetzt. Stellen Sie
sicher, dass JavaScript in Ihrem Browser aktiviert ist. Dies ist auch erforderlich,
wenn Sie mit der Suchfunktion arbeiten möchten.
Die Dreamweaver-Hilfe enthält die folgenden Komponenten:
Der Inhalt bietet
eine nach Themen geordnete Übersicht der Informationen.
Wenn Sie auf einen Eintrag klicken, werden die zugehörigen untergeordneten
Themen angezeigt.
Der Index bietet
wie ein gedruckter Index die Möglichkeit, wichtige Begriffe und
sinnverwandte Themen zu finden.
Die Funktion Suchen ermöglicht Ihnen, eine beliebige Zeichenfolge im gesamten
Thementext zu finden. Für die Suchfunktion ist ein 4.0-Browser erforderlich,
in dem Java aktiviert ist.
Anmerkung: Nachdem Sie auf Suchen geklickt haben, wird unter Umständen ein Java-
Sicherheitsfenster eingeblendet, in dem Sie gefragt werden, ob Dateien auf Ihrer
Festplatte gelesen werden dürfen. Sie müssen dies zulassen, damit die Suchfunktion
funktioniert. Das Applet schreibt weder auf die Festplatte noch liest es andere Dateien
als die Dreamweaver-Hilfe.

14 Einführung
• Um eine bestimmte Zeichenfolge zu suchen, geben Sie diese einfach in das
Texteingabefeld ein.

• Um Dateien zu suchen, die zwei bestimmte Schlüsselwörter enthalten


(beispielsweise Ebenen und Stile), trennen Sie die beiden Suchbegriffe
mit einem Pluszeichen (+) voneinander ab.

Die kontextbezogene Hilfe bietet in jedem Dialogfeld die Schaltfläche Hilfe bzw.
in Inspektoren und Paletten ein Fragezeichen-Symbol, mit dem ein relevantes
Hilfethema geöffnet werden kann.
Klicken Sie hier, um die Hilfe zu öffnen.

Die Navigationsleiste der Dreamweaver-Hilfe enthält Schaltflächen, mit denen Sie


durch die Hilfethemen navigieren können. Mit den Schaltflächen Vorwärts und
Rückwärts gelangen Sie zum nächsten oder vorherigen Thema in einem Abschnitt
(entsprechend der Themenreihenfolge im Inhaltsverzeichnis).

Dreamweaver erweitern
Die Hilfeseiten Dreamweaver erweitern enthalten Informationen für JavaScript-
und C-Entwickler über das Dreamweaver-Dokumentobjektmodell und die APIs
(Anwendungsprogrammierschnittstellen), mit denen Sie Objekte, Befehle,
Eigenschafteninspektoren, Verhalten und Übersetzer erstellen können.

Erste Schritte 15
Dreamweaver Support Center
Die Website des Dreamweaver Support Center wird regelmäßig mit neuesten
Informationen zu Dreamweaver aktualisiert und enthält Ratschläge von
erfahrenen Benutzern, Beispiele, Tipps und Updates sowie Informationen
zu weiterführenden Themen. Sie sollten diese Website regelmäßig besuchen, um
Zugriff auf die aktuellsten Informationen zu Dreamweaver zu erhalten und das
Programm optimal nutzen zu können. Die HTTP-Adresse der Website lautet
http://www.macromedia.com/support/dreamweaver/.

Dreamweaver-Diskussionsforum
Im Dreamweaver-Diskussionsforum können Sie technische Fragen stellen und
praktische Tipps mit anderen Dreamweaver-Benutzern austauschen. Einzelheiten
zu diesem Diskussionsforum finden Sie auf der Macromedia-Website unter
http://www.macromedia.com/software/dreamweaver/discussiongroup/.

Entwicklungsphasen bei der Erstellung


von Websites
Der erste Schritt bei der Entwicklung von Websites besteht in der Definition der
Strategie oder der Ziele der geplanten Website. Daran schließt sich die
Entwurfsphase für die neue Website an. Der dritte Schritt ist die Produktions-
oder Entwicklungsphase (d. h. die Erstellung der Website und der Codes für die
einzelnen Webseiten). Anschließend wird getestet, ob die Site richtig funktioniert
und die zuvor definierten Ziele erfüllt. Im letzten Schritt wird die neue Website
im Internet oder Intranet veröffentlicht. Viele Entwickler sind auch für eine
regelmäßige Wartung der Website zuständig, um Aktualität des Inhalts und
korrekte Funktionsweise zu gewährleisten.
Um Ihnen bei der Entwicklung von Websites einen direkten Zugang zu
benötigten Informationen zu geben, ist das Handbuch Dreamweaver verwenden in
mehrere größere Abschnitte unterteilt, die den soeben beschriebenen Ansatz
reflektieren: Planung, Entwurf, Entwicklung, Test, Veröffentlichung und
Wartung.

Websites planen
Durch eine sorgfältige Planung der Website von Anfang an lässt sich im
Nachhinein oftmals viel Zeit sparen. Die Planung einer Website umfasst viel mehr
als das Festlegen der Verzeichnisstruktur. In vielen Fällen geht es dabei auch um
die Ermittlung der benötigten Ressourcen, der Zielgruppe und der Absichten, die
Sie mit der Website verfolgen. Darüber hinaus gilt es, technische Voraussetzungen
wie Zugangsmöglichkeiten des Benutzers sowie Einschränkungen durch den
jeweiligen Browsertyp, nicht vorhandene Plug-Ins oder langsame Download-
Geschwindigkeiten zu bedenken.

16 Einführung
Sobald Sie Ihre Informationen gegliedert und eine geeignete Funktionsstruktur
ausgearbeitet haben, können Sie mit der Erstellung der Website beginnen.
• Überlegen Sie bei der Planung, wie Sie vorgehen möchten und welche
Voraussetzungen potenzielle Benutzer mitbringen. Weitere Informationen
finden Sie unter „Websites planen und einrichten“ auf Seite 101.
• Anhand der Dreamweaver-Websitemap können Sie bestimmen, wie Ihre
Website aufgebaut sein soll. Im Websitefenster von Dreamweaver können Sie
mühelos Dateien und Ordner hinzufügen, löschen und umbenennen. Weitere
Informationen finden Sie unter „Siteverwaltung und Teamarbeit“ auf
Seite 113.
Wenn Sie in einem Web-Entwicklungsteam arbeiten, dürften auch die folgenden
Punkte für Sie interessant sein:
• Richten Sie ein System ein, mit dem Teamkollegen daran gehindert werden,
Dateien zu überschreiben (siehe „Eincheck-/Auschecksystem einrichten“ auf
Seite 140).
• Verwenden Sie Design Notes, um mit Teamkollegen zu kommunizieren
(siehe „Dateiinformationen in Design Notes speichern“ auf Seite 144).

Webseiten gestalten
Die meisten Webdesign-Projekte beginnen mit Storyboards oder
Flussdiagrammen, die dann in erste Vorabversionen der Webseiten umgesetzt
werden. Mit Dreamweaver können Sie zunächst Modellseiten entwerfen und diese
dann schrittweise gestalten. Solche Modellseiten zeigen in der Regel das jeweilige
Layout, Navigationselemente, technische Komponenten, Titel und Farben sowie
Grafiken und andere Medienelemente.
• Erstellen Sie HTML-Dokumente in Dreamweaver: Seitentitel oder
Hintergrundfarbe lassen sich leicht hinzufügen. Weitere Informationen finden
Sie unter „Dokumente einrichten“ auf Seite 157.
• Mit der Layoutansicht und den Layoutwerkzeugen von Dreamweaver können
Sie Webseiten ohne großen Zeitaufwand erstellen, indem Sie zunächst eine
Seitenstruktur zeichnen und diese dann nach Bedarf verändern. Weitere
Informationen finden Sie unter „Seitenlayouts entwerfen“ auf Seite 177.
• Mit der Objektpalette von Dreamweaver können Sie im Handumdrehen
Tabellen entwerfen und in Ihre Seite einfügen, Frame-Dokumente erstellen,
Formulare gestalten und mit Ebenen arbeiten. Weitere Informationen finden
Sie unter „Tabellen zur Präsentation von Inhalten verwenden“ auf Seite 197,
„Frames“ auf Seite 217, „Dynamische Ebenen“ auf Seite 443 und „Formulare
erstellen“ auf Seite 521.

Erste Schritte 17
Inhalt hinzufügen
Mit Dreamweaver können Sie Webseiten schnell und einfach mit verschiedenen
Inhalten versehen. Fügen Sie Elemente wie Text, Bilder, Farben, Filme, Sound
und andere Medien in Ihre Webseiten ein.
• Mithilfe der Elementpalette können Sie die Elemente einer Website problemlos
verwalten. Die meisten Elemente können direkt aus der Elementpalette in ein
Dreamweaver-Dokument gezogen werden. Siehe „Elemente verwalten und
einfügen“ auf Seite 237.
• Geben Sie Text direkt in ein Dreamweaver-Dokument ein oder importieren
Sie ihn aus anderen Dokumenten. Formatieren Sie ihn anschließend mit dem
Eigenschafteninspektor oder der HTML-Stilpalette. Darüber hinaus können
Sie auch ganz leicht eigene Cascading Style Sheets erstellen. Siehe unter „Text
einfügen und formatieren“ auf Seite 251.
• Fügen Sie beliebige Grafiken wie Rollover-Bilder, Imagemaps und segmentierte
Fireworks-Bilder ein. Mit Ausrichtungswerkzeugen können Sie Bilder an der
jeweils gewünschten Stelle auf einer Webseite positionieren. Siehe unter „Bilder
einfügen“ auf Seite 289 und „Fireworks und Dreamweaver verwenden“ auf
Seite 305.
• Fügen Sie sonstige Medien wie Flash-, Shockwave- und QuickTime-Filme,
Sound und Applets in Ihre Webseite ein. Siehe unter „Medien einfügen“ auf
Seite 323.
• Fügen Sie mit dem Codeeditor Inhalte ein. Mit der Codeansicht oder dem
Codeinspektor von Dreamweaver können Sie Ihren eigenen HTML- oder
JavaScript-Code schreiben. Weitere Informationen finden Sie unter „HTML in
Dreamweaver bearbeiten“ auf Seite 351.
• Mit Dreamweaver können Sie HTML-Hyperlinks wie Anker- und E-Mail-
Links erstellen und ohne großen Aufwand grafische Navigationssysteme wie
Sprungmenüs und Navigationsleisten einrichten. Siehe unter „Hyperlinks und
Navigation“ auf Seite 387.
• Mit Dreamweaver-Vorlagen und Bibliotheksdateien können Sie mühelos
mehrfach verwendbare Inhalte in Ihre Website einfügen. Sie können neue
Seiten mit Vorlagen erstellen und dann in den bearbeitbaren Bereichen Inhalte
einfügen oder bearbeiten. Siehe unter „Inhalte über Vorlagen und Bibliotheken
wieder verwenden“ auf Seite 411.

Interaktive Funktionen und Animation


Viele Webseiten sind statisch, d. h. sie enthalten nur Text und Bilder. Mit
Dreamweaver können Sie Bewegung in Ihre Webseiten bringen und haben somit
interessante Gestaltungsmöglichkeiten. Sie können Besuchern beim Blättern und
Klicken durch Ihre Webseiten Feedback geben, ihnen Konzepte erklären,
Formulardaten validieren, ohne den Server zu kontaktieren, kurzum, Sie können
Ihre Webseiten für Besucher interessanter machen.

18 Einführung
Mit Dreamweaver haben Sie mehrere Möglichkeiten, interaktive Funktionen und
Animationen in Ihre Webseiten einzufügen:
• Mit Zeitleisten können Sie Animationen erstellen, für die keine Plug-Ins,
ActiveX-Steuerelemente oder Java-Applets erforderlich sind. Zeitleisten ändern
über dynamische HTML die Position einer Ebene oder die Quelle eines Bildes
in einem bestimmten Zeitverlauf oder rufen nach dem Laden einer Seite
automatisch bestimmte Verhaltensaktionen auf. Siehe unter „Dynamische
Ebenen“ auf Seite 443.
• Mit so genannten Verhalten können Sie Aufgaben als Reaktion auf bestimmte
Ereignisse ausführen, beispielsweise eine Schaltfläche hervorheben, wenn der
Besucher sie mit dem Mauszeiger „berührt“, Formulardaten auf ihre
Richtigkeit überprüfen, wenn der Benutzer auf „Abschicken“ klickt, oder ein
zweites Browserfenster öffnen, wenn die Hauptseite vollständig geladen wurde.
Siehe unter „Verhalten“ auf Seite 473 .
• Sie können benutzerdefinierten JavaScript-Code debuggen. Siehe unter
„JavaScript-Code debuggen“ auf Seite 513.
• Mit Formularen können Besucher direkt auf der Webseite Daten eingeben.
Siehe unter „Formulare erstellen“ auf Seite 521.

Websites testen und veröffentlichen


Ihre Website ist fertig und kann sich der Welt präsentieren – doch bevor Sie sie auf
einem Server veröffentlichen, sollten Sie sie unbedingt testen. Je nach der Größe
des Projekts, den Anforderungen des Kunden und den Browsern, die von
Besuchern verwendet werden, kann es erforderlich sein, die Site zunächst auf
einem lokalen Server zu betreiben, auf dem Sie sie testen und bearbeiten können.
Nachdem Sie die entsprechenden Korrekturen vorgenommen haben, können Sie
die Website öffentlich zugänglich machen. Nach der Veröffentlichung sollten Sie
sich regelmäßig um die Site kümmern, um optimale Qualität sicherzustellen, auf
Feedback von Besuchern zu reagieren und die Informationen auf dem neuesten
Stand zu halten.
Mit den folgenden Dreamweaver-Funktionen können Sie Ihre Website testen und
veröffentlichen:
• Wenn Sie neue Tags in die Webseite einfügen oder Fehler im Code beseitigen
möchten, können Sie in der Referenzpalette von Dreamweaver nach JavaScript,
CSS und HTML-Code suchen. Siehe unter „Referenzpalette von Dreamweaver
verwenden“ auf Seite 359.
• Mit dem JavaScript Debugger können Sie Fehler in Ihrem JavaScript-Code
beheben. Im Debugger können Sie Haltepunkte in den Code einfügen und
dann den Code anzeigen, während eine Seite direkt in Dreamweaver debuggt
wird. Weitere Informationen finden Sie unter „JavaScript-Code debuggen“ auf
Seite 513.

Erste Schritte 19
• Führen Sie Tests in Browsern und Plug-Ins durch, testen und berichtigen
Sie Hyperlinks in Ihren Dokumenten und führen Sie Siteberichte aus,
um HTML-Dateien auf die üblichen Fehler zu überprüfen. Weitere
Informationen finden Sie unter „Websites testen und veröffentlichen“ auf
Seite 543.
• Im Websitefenster von Dreamweaver finden Sie viele Werkzeuge zum
Verwalten der Website, Übertragen von Dateien zwischen lokalem und
Remote-Server, Einchecken und Auschecken von Dateien, um sie vor
unbeabsichtigtem Überschreiben zu schützen, und zum Synchronisieren der
Dateien der lokalen und der Remote-Site. Weitere Informationen finden Sie
unter „Siteverwaltung und Teamarbeit“ auf Seite 113.

Der beste Start


Dieses Benutzerhandbuch enthält Informationen für Benutzer mit
unterschiedlichen Produktkenntnissen. Um die Dokumentation optimal
zu nutzen, lesen Sie zunächst die Abschnitte, die für Ihre eigenen Kenntnisse
am besten geeignet sind.

Für HMTL-Anfänger:

1 Sehen Sie sich zunächst die Tour an. Wählen Sie dazu im Dreamweaver-
Hauptmenü die Option Hilfe > Tour.
2 Arbeiten Sie anschließend den Dreamweaver-Lehrgang durch. Wählen Sie
Hilfe > Lehrgang oder gehen Sie nach den Schritten im gedruckten
Handbuch vor.
3 Arbeiten Sie die Lektionen zu den Themen durch, die Sie interessieren.
Wählen Sie Hilfe > Lektionen und suchen Sie sich dann eine Lektion aus.
4 Lesen Sie der Reihe nach „Um Ihre Arbeit mit Macromedia Dreamweaver zu
beginnen, öffnen oder erstellen Sie einfach ein HTML-Dokument. Damit Sie
möglichst effizient mit dem Programm arbeiten können, ist es jedoch hilfreich,
die grundlegenden Konzepte des Dreamweaver-Arbeitsbereichs zu verstehen
und zu wissen, wie Sie Optionen wählen, Inspektoren und Paletten verwenden
und Einstellungen vornehmen, die für Ihren Arbeitsstil am besten geeignet
sind.“ auf Seite 73 „Websites planen und einrichten“ auf Seite 101,
„Siteverwaltung und Teamarbeit“ auf Seite 113 und „Hyperlinks und
Navigation“ auf Seite 387.
5 Mehr zum Thema „Formatieren von Text“ und „Einfügen von Bildern in
Webseiten“ finden Sie unter „Text einfügen und formatieren“ auf Seite 251
und „Bilder einfügen“ auf Seite 289.

20 Einführung
Mit den Kenntnissen aus diesen Kapiteln können Sie bereits mit dem Gestalten
hochwertiger Websites beginnen. Wenn Sie jedoch lernen möchten, wie
ausgefallenere Layout- und Interaktions-Tool eingesetzt werden, können Sie den
Rest des Benutzerhandbuchs in der vorgegebenen Reihenfolge durcharbeiten.
Am Anfang zumindest können Sie unter „Dreamweaver anpassen“ überspringen.

Für erfahrene Webdesigner, die Dreamweaver nicht kennen:

1 Sehen Sie sich zunächst die Tour an. Wählen Sie im Dreamweaver-Hauptmenü
die Option Hilfe > Tour.
2 Arbeiten Sie zunächst den Dreamweaver-Lehrgang durch, um die Grundlagen
der Arbeit mit Dreamweaver kennen zu lernen. Wählen Sie Hilfe > Lehrgang
oder gehen Sie nach den Schritten im gedruckten Handbuch vor.
3 Arbeiten Sie die Lektionen zu den Themen durch, die Sie interessieren.
Wählen Sie Hilfe > Lektionen und suchen Sie sich dann eine Lektion aus.
4 Eine weiterführende Übersicht über die Benutzeroberfläche von Dreamweaver
finden Sie unter „Um Ihre Arbeit mit Macromedia Dreamweaver zu beginnen,
öffnen oder erstellen Sie einfach ein HTML-Dokument. Damit Sie möglichst
effizient mit dem Programm arbeiten können, ist es jedoch hilfreich, die
grundlegenden Konzepte des Dreamweaver-Arbeitsbereichs zu verstehen und
zu wissen, wie Sie Optionen wählen, Inspektoren und Paletten verwenden und
Einstellungen vornehmen, die für Ihren Arbeitsstil am besten geeignet sind.“
auf Seite 73.
5 Obwohl Ihnen vieles in „Siteverwaltung und Teamarbeit“ auf Seite 113 und
„Hyperlinks und Navigation“ auf Seite 387 bereits vertraut sein dürfte, sollten
Sie diese Kapitel überfliegen, um zu sehen, inwieweit bekannte Konzepte bei
Dreamweaver implementiert sind. Beachten Sie besonders die Hinweise in
„Dreamweaver verwenden“ zum Einrichten einer neuen Site. Lesen Sie dann
„Siteverwaltung und Teamarbeit“ auf Seite 113.
6 Die Kapitel unter „Text einfügen und formatieren“ auf Seite 251 und „Bilder
einfügen“ auf Seite 289 enthalten nützliche Informationen darüber, wie mit
Dreamweaver einfache Webseiten erstellt werden.
7 Lesen Sie den Überblick am Anfang jedes darauffolgenden Kapitels, um zu
sehen, ob die darin enthaltenen Themen für Sie interessant sind.

Für erfahrene Webdesigner, die Dreamweaver 3 kennen:

1 Lesen Sie zuerst den Abschnitt „Was ist neu in Dreamweaver 4“ auf Seite 22
Folgen Sie den in diesem Abschnitt angegebenen Querverweisen zu
Abschnitten, in denen neue Dreamweaver-Funktionen beschrieben werden.
2 Überfliegen Sie unter „Dreamweaver – Erste Schritte“ auf Seite 73, in dem
Neuheiten auf der Dreamweaver-Benutzeroberfläche beschrieben sind.

Erste Schritte 21
3 Sehen Sie sich die Dreamweaver-Lektionen an. Wählen Sie Hilfe > Lektionen,
um eine Liste mit interakiven Lektionen aufzurufen, die Sie nach Bedarf
durcharbeiten können.
4 Wenn Sie vorhaben, Dreamweaver individuell anzupassen und zu erweitern,
lesen Sie unter „Dreamweaver anpassen“ auf Seite 555.

Typografische Konventionen
In diesem Handbuch werden die folgenden typografischen Konventionen
verwendet:
• Code kennzeichnet Namen von HTML-Tags und -Attributen sowie in
Beispielen verwendeten Text.
• Kursiv in Code kennzeichnet ersetzbare Elemente (manchmal als
Metasymbole bezeichnet) im Code.
• Fettdruck in Roman kennzeichnet Text, den Sie wortwörtlich eingeben sollen.

Was ist neu in Dreamweaver 4


Die neuen Funktionen in Dreamweaver 4 erweitern die HTML-Bearbeitung,
vereinfachen den Entwurf von Webseiten und verbessern die Verwaltung von
Websites und Webelementen. Mit den neuen Funktionen können Sie eigene
Flash-Objekte erstellen, Ihren Arbeitsablauf rationalisieren, Ihre Arbeit im Team
optimieren und Dreamweaver benutzerspezifisch anpassen und erweitern.

Verbesserte Codebearbeitung
In der Dreamweaver-Symbolleiste können Sie festlegen, ob eine Seite in der
Designansicht, der Codeansicht oder in beiden Ansichten angezeigt werden soll.
Über die Symbolleiste können Sie schnell häufig verwendete Funktionen wie
Vorschau in Browser und Design Notes aufrufen. Siehe unter „Symbolleiste
verwenden“ auf Seite 80.
Bei der Codeansicht handelt es sich um eine neue Funktion, um HTML-
Quellcode direkt im Dreamweaver-Dokumentfenster anzuzeigen. Weitere
Informationen finden Sie unter „Codeansicht (oder Codeinspektor) öffnen“ auf
Seite 363. Neben HTML-Dateien können Sie auch andere Dokumente wie z. B.
JavaScript- und XML-Dateien direkt in der Codeansicht von Dreamweaver
bearbeiten. Siehe unter „Skripte einfügen“ auf Seite 366.

22 Einführung
Integrierte Codeeditoren Dreamweaver verfügt nun über leistungsstarke
Codeeditoren: die Codeansicht und den Codeinspektor. Sie können
Zeilenumbruch, Codeeinrückung, Syntafarbcodierung während der Eingabe und
weitere Eigenschaften im Menü Optionen der beiden Editoren festlegen. Weitere
Informationen finden Sie unter „Optionen für die Codeansicht oder den
Codeinspektor festlegen“ auf Seite 365.
Die Referenzpalette ist eine Kurzreferenz für HTML, JavaScript und CSS.
Sie enthält Informationen über die jeweiligen Tags, mit denen Sie gerade
in der Codeansicht bzw. im Codeinspektor arbeiten. Weitere Informationen
finden Sie unter „Referenzpalette von Dreamweaver verwenden“ auf Seite 359.
Im Popupmenü der Liste aller Funktionen können Sie Code für JavaScript-
Funktionen auf einer Seite auswählen. In diesem Menü finden Sie schnell den
gewünschten JavaScript-Code, wenn Sie gerade in der Codeansicht arbeiten.
Weitere Informationen finden Sie unter „Skriptfunktionen anzeigen“ auf Seite
369.
Mit dem JavaScript Debugger können Sie von Dreamweaver aus Ihre JavaScript-
Dokumente debuggen. Sie können beispielsweise Haltepunkte festlegen, um den
zu überprüfenden Code zu steuern. Weitere Informationen finden Sie unter
„JavaScript-Code debuggen“ auf Seite 513.

Leichtere Seitengestaltung
Mit der Layoutansicht können Sie schnell Webseiten gestalten, indem Sie Rahmen
(Tabellen oder Zellen) zeichnen, die Sie anschließend mit Inhalt füllen können.
Weitere Informationen finden Sie unter „Layoutzellen und Layouttabellen
zeichnen“ auf Seite 180.
Dank der verbesserten Vorlagen können Sie jetzt leichter bearbeitbare Bereiche in
einer Vorlagendatei erkennen. Bei Vorlagen wird nun eine Registerkarte angezeigt,
der den Namen des bearbeitbaren Bereiches sowie einen Begrenzungsrahmen
enthält. Weitere Informationen finden Sie unter „Vorlagen erstellen“ auf
Seite 413.
Cascading Style Sheets (CSS) können Sie nun bereits beim Erstellen eines
neuen Stils definieren. Sie können jetzt auch ganz leicht vorhandene CSS
mit Schaltflächen in der CSS-Stilpalette verknüpfen. Weitere Informationen
finden Sie unter „CSS-Stylesheets verwenden“ auf Seite 267.

Verbesserte Integration
Flash-Schaltflächen und Flash-Text sind jetzt direkt in Dreamweaver integriert.
Sie können zwischen verschiedenen vordefinierten Flash-Schaltflächen wählen
und sie in Ihr Dokument einfügen. Alternativ können Sie sich von Ihrem Flash-
Designer individuelle Schaltflächenvorlagen erstellen lassen. Weitere
Informationen finden Sie unter „Flash-Schaltflächenobjekte verwenden“ auf
Seite 327 und „Flash-Textobjekte verwenden“ auf Seite 331.

Erste Schritte 23
Roundtrip-Segmentieren bietet eine nahtlose Schnittstelle zwischen Dreamweaver
und Fireworks 4. Aus Fireworks importierte Bilder und HTML-Tabellen können
jetzt in Dreamweaver bearbeitet und aktualisiert werden. Sie können Änderungen
auch in Dreamweaver oder Fireworks vornehmen und diese Änderungen in
beiden Programmen speichern. Weitere Informationen finden Sie unter „In
Dreamweaver platzierte Fireworks-Datei bearbeiten“ auf Seite 312.
Der websichere Farbwähler ermöglicht ein müheloses Abstimmen von Farben
und Grafiken. Mit einem einzigen Mausklick können Sie die Farbe einer
beliebigen Stelle des Desktops auswählen und der Farbwähler springt sofort
zur ähnlichsten websicheren Farbe. Weitere Informationen finden Sie unter „Mit
Farben arbeiten“ auf Seite 90.

Arbeitsablauf rationalisieren
Über die Elementpalette können Sie die Elemente Ihrer Website verwalten.
Auf ihr werden alle Bilder, Farben, externe URLs, Skripte und Flash-, Shockwave,
QuickTime-, Vorlagen- und Bibliothekselemente an einer zentralen Stelle gezeigt.
Sehen Sie sich die Elemente in der Vorschau an und ziehen Sie sie dann direkt an
die gewünschte Stelle in Ihrem HTML-Dokument. Speichern Sie häufig
verwendete Elemente in einer Favoritenliste, sodass sie Ihnen für verschiedene
Sites zur Verfügung stehen. Weitere Informationen finden Sie unter „Die
Elementpalette“ auf Seite 238 und „Favoritenelemente verwenden“ auf Seite 246.
Verbesserte Design Notes ermöglichen es Ihnen, Dateien mit Anmerkungen
zu versehen, sodass Sie Änderungen dokumentieren oder andere Teammitglieder
über produktionsrelevante Dinge informieren können. Kommentare dieser Art
können Sie direkt im Dreamweaver-Websitefenster einfügen und einsehen.
Weitere Informationen finden Sie unter „Design Notes“ auf Seite 143 und „Den
Arbeitsablauf durch Berichte optimieren“ auf Seite 150.
Über die integrierte E-Mail-Funktion können Sie mit anderen Teammitgliedern
kommunizieren. Wenn eine Datei von einem anderen Teammitglied ausgecheckt
wurde, brauchen Sie einfach nur auf den jeweiligen Namen zu klicken, um dem
Kollegen eine E-Mail zu schicken. Weitere Informationen finden Sie unter
„Eincheck-/Auschecksystem einrichten“ auf Seite 140.
Über Websitereporting können Sie mehrere vordefinierte Berichte zum Testen
häufig vorkommender Probleme in HTML-Dokumenten wie etwa das Fehlen
eines Dokumenttitels oder eines ALT-Tags verwenden. Sie können auch eigene
Berichte für Ihre speziellen Erfordernisse schreiben, Berichtsergebnisse anzeigen
und fehlerhafte Dateien im Berichtsergebnisfenster öffnen. Weitere
Informationen finden Sie unter „Eincheck-/Auschecksystem einrichten“ auf
Seite 140 und „Berichte erstellen“ auf Seite 552.
SourceSafe-Integration. Sofern Sie über SourceSafe verfügen, können Sie jetzt
von Dreamweaver aus Dateien in SourceSafe einchecken und auschecken. Weitere
Informationen finden Sie unter „Dreamweaver mit Visual SourceSafe verwenden“
auf Seite 137.

24 Einführung
WebDAV-Integration. Jetzt können Sie mit Dreamweaver Dateien unter
Verwendung des WebDAV-Protokolls übertragen. Weitere Informationen finden
Sie unter „Dreamweaver mit dem WebDAV-Protokoll verwenden“ auf Seite 136.
Der Package Manager (früher Extension Manager) ermöglicht das Installieren
von Erweiterungen mit einem einfachen Mausklick. Besuchen Sie die
Macromedia Exchange-Website und laden Sie nützliche Erweiterungen herunter,
die Ihnen die Arbeit erleichtern. Weitere Informationen finden Sie unter
„Erweiterungen für Dreamweaver hinzufügen“ auf Seite 98.

Einheitliche Benutzeroberfläche
Für Tastaturkurzbefehle gibt es eine neue Benutzeroberfläche, die bei allen
Macromedia-Web-Publishing-Produkten einheitlich gestaltet ist. Mit dieser
neuen Oberfläche können Sie vorhandene Tastaturkurzbefehle bearbeiten,
neue Tastaturkurzbefehle für Menüoptionen erstellen und nicht mehr
benötigte Tastaturkurzbefehle löschen. Sie können auch zwischen verschiedenen
Tastaturkurzbefehlgruppen wechseln. Weitere Informationen finden Sie unter
„Tastaturkurzbefehl-Editor verwenden“ auf Seite 94.
Das Fenster-Management wurde verbessert: Alle Fenster werden jetzt an der
richtigen Stelle auf dem Bildschirm geöffnet. Wenn Sie ein neues Fenster öffnen,
sorgt Dreamweaver dafür, dass angezeigte Paletten nicht überlappt werden.
Paletten zeigen sich jetzt in neuer Macromedia-Optik und weisen bei allen Web-
Publishing-Produkten ein einheitliches Verhalten auf. Alle Paletten enthalten nun
Symbole und Text, damit Sie sie leichter identifizieren können. Sie verwenden
sowohl in der Windows- als auch in der Macintosh-Version Systemfarben und
-schriften und weisen ein einheitliches Positionier- und Ziehverhalten auf.

Ressourcen für HTML- und Web-


Technologien
Im Folgenden sind einige nützliche im Web verfügbare Ressourcen aufgeführt:
HTML 4.0-Spezifikation (http://www.w3.org/TR/REC-html40/) ist die offizielle
Spezifikation für HTML des World Wide Web Consortium.
Index DOT Html (http://www.blooberry.com/indexdot/html/) ist eine umfassende
Auflistung der HTML-Tags, -Attribute und -Werte sowie deren Kompatibilität
mit den verschiedenen Browsern.
ZDNet Developer Tag Library (http://www.zdnet.com/devhead/resources/
tag_library/) ist eine weitere Liste mit Informationen über alle HTML-Tags.
Cascading Style Sheets, Level 1-Spezifikation (CSS1) (http://www.w3.org/TR/
REC-CSS1) ist die offizielle Spezifikation für Stylesheets des World Wide Web
Consortium.
Im Referenzhandbuch zu Stylesheets von Web Review (http://webreview.com/
guides/style/style.html) werden CSS-Stile und ihre Funktionsweise in den
verschiedenen Browsern erläutert.

Erste Schritte 25
„CGI Scripts for Fun and Profit“ (http://www.hotwired.lycos.com/webmonkey/
99/26/index4a.htm) ist ein Artikel von der Web-Site „Hotwired Webmonkey“
über das Einarbeiten vorgefertigter CGI-Skripte (Common Gateway Interface)
in eigene Seiten.
Der CGI-Ressourcen-Index (http://www.cgi-resources.com/) ist eine Quelle für
CGI-bezogene Objekte, einschließlich vorgefertigter Skripte, Dokumentation,
Bücher und sogar „zu mietender Programmierer“.
Die Common Gateway Interface-Site (http://hoohoo.ncsa.uiuc.edu/cgi/) enthält
eine Einführung in CGI.
Entitätentabelle(http://www.bbsinc.com/iso8859.html) listet die in ISO 8859-1
(Latin-1) verwendeten Entitätennamen auf.
Die Dynamic HTML Events-Seite (http://msdn.microsoft.com/workshop/author/
dhtml/reference/events.asp#om40_event) enthält Informationen über Ereignisse
in Microsoft Internet Explorer.
ASP Overview-Seiten von Microsoft (http://msdn.microsoft.com/workshop/
server/asp/ASPover.asp) enthalten Informationen über ASP (Active Server Pages).
JSP-Seite von Sun (http://java.sun.com/products/jsp/) enthält Informationen
über JSP (JavaServer Pages).
PHP-Seiten (http://www.php.net/) enthalten Informationen über PHP:
Hypertext Preprocessor.
ColdFusion-Produktseite von Allaire (http://www.allaire.com/Products/
ColdFusion/) enthält Informationen über ColdFusion.
Die XML.com-Website (http://www.xml.com) bietet Informationen,
Lehrgänge und Tipps zu XML (Extensible Markup Language) und anderen
Webtechnologien.
von Danny Goodman (IDG Books) ist eine umfassende
JavaScript Bible
Abhandlung der Skriptsprache JavaScript 1.2.
JavaScript: The Definitive Guidevon David Flanagan (O'Reilly & Associates)
ist ein Nachschlagewerk mit Informationen zu sämtlichen Funktionen,
Objekten, Methoden, Eigenschaften und Ereignisprozeduren von JavaScript.

26 Einführung
Zugriffshilfen und Dreamweaver
Macromedia unterstützt alle Bestrebungen, groflartige Weberlebnisse auch
Benutzern mit Behinderungen zugänglich zu machen. Macromedia befürwortet
eine Umsetzung internationaler Richtlinien, die Entwickler bei der Schaffung von
Websites mit Zugriffshilfen unterstützen, z. B. die vom W3C (World Wide Web
Consortium) vorgeschlagenen Richtlinien, die bereits in vielen Ländern
(einschliefllich den USA) die Grundlage diesbezüglicher Regierungsstrategien
bilden. In den W3C-Richtlinien zu Internetinhalten werden Entwickler dazu
angehalten, beim Design und der Kodierung Zugriffshilfen zu verwenden, die in
vielen Fällen gut von Macromedia unterstützt werden. Weitere Informationen zu
den W3C-Richtlinien finden Sie bei den Hinweisen zur Gestaltung von
Webinhalten (http://www.w3.org/TR/WAI-WEBCONTENT/full-
checklist.html).
Aktuelle Informationen zu Produktmerkmalen und Ressourcen, die ein Design
mit Zugriffshilfen unterstützen, finden Sie auf der Macromedia-Webseite zu
Zugriffshilfen (http://www.macromedia.com/accessibility/).

Erste Schritte 27
28 Einführung
1

KAPITEL 1
Dreamweaver-Lehrgang
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

In diesem Lehrgang erfahren Sie, wie Sie mit Dreamweaver Webseiten erstellen.
Sie lernen, wie Sie mit Macromedia Dreamweaver eine lokale Site definieren
und wie Sie mit den Paletten und Werkzeugen von Dreamweaver Webdokumente
erstellen und bearbeiten.
Im Zuge dieses Lehrgangs erstellen Sie Webseiten für Compass, ein fiktives
Unternehmen, das sich auf Abenteuerreisen spezialisiert hat. Wenn Sie noch nicht
mit Dreamweaver vertraut sind, beginnen Sie am besten mit dem ersten Abschnitt
dieses Lehrgangs. Wenn Sie bereits mit Dreamweaver gearbeitet haben, bietet sich
„Die Elementpalette verwenden“ auf Seite 57 als Ausgangspunkt an. In diesem
und den folgenden Abschnitten werden neue Funktionen in Dreamweaver
beschrieben, wie z. B. die Elementpalette, Flash-Schaltflächen und Flash-Text, die
Verwendung von Vorlagen, das Erstellen von Siteberichten und das Einfügen von
Design Notes.
Je nach Kenntnisstand benötigen Sie zum Durcharbeiten des Lehrgangs ein bis
zwei Stunden. Im Lehrgang werden die folgenden Themen behandelt:
• Definition lokaler Sites
• Erstellen von Seiten in der Layoutansicht
• Einfügen von Bildern und Rollover-Bildern
• Arbeiten mit Tabellen in der Standardansicht
• Erstellen von Hyperlinks zu anderen Dokumenten
• Einfügen von Elementen aus der Elementpalette
• Einfügen von Flash-Text- und Flash-Schaltflächenobjekten
• Erstellen und Verwenden von Vorlagen
• Ausführen von Siteberichten
• Einfügen von Design Notes

29
Anmerkung: In diesem Lehrgang werden einige Funktionen vorgestellt, die nur in
Browsern ab Version 4.0 unterstützt werden.

Eine Tour in Dreamweaver unternehmen


Bevor Sie beginnen, sollten Sie die ShowMe-Filme in der Dreamweaver-Hilfe
ansehen, um die Dreamweaver-Funktionen kennen zu lernen und um einen
Überblick über die Gestaltung von Webseiten zu erhalten.
1 Wählen Sie in Dreamweaver Hilfe > Tour.
2 Klicken Sie auf einen Filmtitel.
3 Schließen Sie den Film, wenn Sie ihn angesehen haben.

Der Arbeitsbereich in Dreamweaver


Im folgenden Abschnitt wird der Arbeitsbereich von Dreamweaver vorgestellt.
• Wenn Sie Dreamweaver noch nicht gestartet haben, doppelklicken Sie auf
das Dreamweaver-Symbol, um die Anwendung zu öffnen.
Der Dreamweaver-Arbeitsbereich ist für unterschiedliche Arbeitsweisen und
verschiedene Kenntnisstufen gleichermaßen geeignet. Wenn Sie Dreamweaver
starten, werden die folgenden Elemente des Arbeitsbereichs geöffnet:

Symbolleiste

Dokumentfenster

Objektpalette
Schwebende
Palette

Tag-Selektor Launcher-Leiste
Eigenschaften-
inspektor

• Wenn Sie ein Dokument erstellen und bearbeiten, wird es im


Dokumentfenster angezeigt.
• Die Objektpalette enthält mehrere Registerkarten mit Symbolen, auf die Sie
klicken können, um Objekte in ein Dokument einzufügen.

30 Kapitel 1
• In Dreamweaver gibt es zahlreiche schwebende Paletten, wie z. B. die HTML-
Stilpalette und den Codeinspektor, über die Sie mit anderen Dreamweaver-
Elementen arbeiten können.
• Die Launcher-Leiste enthält Schaltflächen, mit denen Sie die am häufigsten
verwendeten Inspektoren und Paletten ein- bzw. ausblenden können.
• Im Eigenschafteninspektor werden die Eigenschaften für das ausgewählte
Objekt bzw. den ausgewählten Text angezeigt. Hier können Sie diese
Eigenschaften modifizieren (Welche Eigenschaften im Inspektor angezeigt
werden, hängt davon ab, welches Objekt gerade im Dokument ausgewählt ist.)
Fenster, Inspektoren und Paletten werden in Dreamweaver über das Menü Fenster
geöffnet. Wenn neben einem Element im Menü Fenster ein Häkchen angezeigt
wird, ist dieses Element gerade geöffnet (es kann jedoch hinter anderen Fenstern
verborgen sein). Um ein ausgeblendetes Element anzuzeigen, wählen Sie den
Namen des Elements im Menü oder verwenden Sie den entsprechenden
Tastaturkurzbefehl.

Mit Dreamweaver arbeiten


Dokumente können in Dreamweaver auf drei Arten angezeigt werden: in der
Entwurfsansicht, der Codeansicht und in einer geteilten Ansicht (Entwurf und
Code). (Wenn Sie die Ansicht wechseln möchten, wählen Sie die gewünschte
Ansicht in der Symbolleiste von Dreamweaver aus.) Das Dokumentfenster wird
in Dreamweaver standardmäßig in der Entwurfsansicht angezeigt.
In der Entwurfsansicht haben Sie wiederum die Auswahl aus zwei Ansichten,
der Layoutansicht und der Standardansicht. (Diese Ansichten werden über die
Objektpalette auf der Registerkarte Ansicht ausgewählt.) In der Layoutansicht
können Sie ein Seitenlayout entwerfen sowie Grafiken, Text und anderes Material
einfügen. In der Standardansicht können Sie neben Grafiken, Text und anderem
Material auch Ebenen einfügen, Frame-Dokumente und Tabellen erstellen und
weitere Änderungen auf Ihrer Seite vornehmen. Diese Optionen stehen in der
Layoutansicht nicht zur Verfügung.

Anordnung der Dateien im Lehrgang


Sowohl die fertigen als auch die halbfertigen HTML-Dateien dieses Lehrgangs
befinden sich im Ordner Compass_Site des Ordners Tutorial. Bilder und andere
zur Site gehörende Dateien sind ebenfalls im Ordner Compass_Site gespeichert.
Jede Datei hat einen aussagekräftigen Namen. Die HTML-Datei mit
Informationen zu Reisezielen heißt zum Beispiel Destinations.html (für
„Reiseziele“). Die Namen der halbfertigen Dateien des Lehrgangs ähneln denen
der entsprechenden fertigen Dateien, sie beginnen jedoch mit DW4_. Die
halbfertige Version der Datei Destinations.html heißt demnach
DW4_Destinations.html.

Dreamweaver-Lehrgang 31
Eine Vorschau der fertigen Website anzeigen
Sie sollten sich jetzt zunächst einmal die fertige Website ansehen, damit Sie
wissen, wie Ihre Arbeit zum Schluss aussehen soll.
1 Starten Sie Dreamweaver, falls Sie das nicht bereits getan haben.
2 Wählen Sie in Dreamweaver Datei > Öffnen. Öffnen Sie im Dialogfeld
Öffnen den Ordner Dreamweaver 4 (der Ordner, in dem Sie Dreamweaver
installiert haben). Wählen Sie dann Tutorial/Compass_Site aus.
3 Wählen Sie im Ordner Compass_Site die Datei CompassHome.html
und klicken Sie dann auf Öffnen, um die Compass-Homepage im
Dokumentfenster zu öffnen.
Nehmen Sie an dieser Seite keine Änderungen vor. In diesem Lehrgang
erstellen Sie eine eigene Version dieser Seite.
4 Wählen Sie Datei > Vorschau in Browser und wählen Sie dann den Browser
aus, in dem Sie die Compass-Homepage anzeigen möchten. (Zeigen Sie diese
Website mit einem Browser ab Version 4.0 an.)

5 Bewegen Sie die Maus über die Navigationsschaltflächen, um Rollover-


Bildeffekte zu sehen.
Klicken Sie auf die Navigationsschaltflächen, um durch die Website zu
browsen.
6 Schließen Sie den Browser, wenn Sie sich die Website angesehen haben.
7 Öffnen Sie ein neues, leeres Dokument in Dreamweaver, indem Sie auf
Datei > Neu klicken.
8 Schließen Sie die Datei CompassHome.html, die in Dreamweaver geöffnet ist.

32 Kapitel 1
Site-Struktur für den Lehrgang einrichten
Sie haben zwei Möglichkeiten, um mit den Lehrgangsdateien zu arbeiten.
Verwenden Sie entweder eine vordefinierte lokale Site oder definieren Sie
eine lokale Site.
• Wenn Sie noch nicht mit Dreamweaver vertraut sind, sollten Sie die lokale
Site für den Lehrgang definieren, damit Sie lernen, wie lokale Sites für
Webseiten eingerichtet werden.
• Wenn Sie bereits wissen, wie Sites in Dreamweaver definiert werden,
können Sie die vordefinierte Site des Lehrgangs verwenden. Wählen Sie
im Dreamweaver-Hauptmenü Site > Site öffnen. Wählen Sie anschließend
Lehrgang – Dreamweaver. Die Hyperlinks der Website Lehrgang –
Dreamweaver zu den Dateien der Compass_Site befinden sich im Ordner
Tutorial des Ordners Dreamweaver 4. Wenn Sie die lokale Site ausgewählt
haben, lesen Sie unter „Die Homepage für die Website erstellen“ auf Seite 35
weiter.
Anmerkung: Wenn Sie die vordefinierte Site auswählen, stimmt der Name, der in den
Screenshots des Lehrgangs angezeigt wird, nicht mit dem Namen überein, den Sie
sehen. Statt my_tutorial steht Lehrgang – Dreamweaver als Sitename auf Ihren
Bildschirmen.

Lokale Sites definieren


Wenn Sie eine lokale Site definieren, legen Sie in Dreamweaver fest, wo Sie alle
Dateien für eine bestimmte Site speichern möchten. Um effektiv in Dreamweaver
zu arbeiten, empfiehlt es sich, für jede Website, die Sie erstellen, eine lokale Site
zu definieren.
In diesem Lehrgang geben Sie den Ordner Compass_Site als lokalen
Siteordner an.
1 Starten Sie Dreamweaver, falls das Programm nicht bereits gestartet ist.
Ein leeres Dokument wird geöffnet.
2 Wählen Sie Site > Neue Site.
3 Stellen Sie im Dialogfeld Site-Definition sicher, dass unter Kategorie die
Option Lokale Infos markiert ist.
4 Geben Sie in das Feld Site-Name my_tutorial ein.
Anhand dieses Sitenamens können Sie eine Site einfach erkennen und aus einer
Liste mit von Ihnen definierten Sites auswählen.
5 Klicken Sie auf das Ordnersymbol rechts neben dem Feld Lokaler
Stammordner.

Dreamweaver-Lehrgang 33
6 Wechseln Sie in dem Dialogfeld, das nun angezeigt wird, zum Ordner
Tutorial/Compass_Site und führen Sie einen der folgenden Schritte aus:
• Klicken Sie unter Windows auf Öffnen und klicken Sie anschließend auf
Speichern, wenn Compass_Site im Feld Auswählen angezeigt wird.
• Klicken Sie auf dem Macintosh auf Auswählen, um den Ordner Compass_Site
auszuwählen.
Im Feld Lokaler Stammordner wird nun der Pfad zur lokalen Site angezeigt.

Anmerkung: Der vollständige Pfadname zum Ordner Compass_Site hängt davon ab,
wo Sie den Site-Ordner installiert haben.

7 Führen Sie unter Cache einen der folgenden Schritte aus:


• Wählen Sie Cache aktivieren (Windows), um eine Cache-Datei für die Site
zu erstellen.
• Wählen Sie Cache verwenden, um Hyperlink-Aktualisierungen zu
beschleunigen (Macintosh), um eine Cache-Datei für die Site zu erstellen.
Wenn Sie eine Cache-Datei im Ordner Compass_Site erstellen, wird dort eine
Aufzeichnung aller vorhandenen Dateien angelegt. So können Hyperlinks
schnell aktualisiert werden, wenn Dateien zu einem späteren Zeitpunkt
verschoben, umbenannt oder gelöscht werden.
8 Klicken Sie auf OK, um das Dialogfeld zu schließen.

34 Kapitel 1
9 Klicken Sie auf OK, wenn die Cache-Meldung erscheint.
Im Sitefenster sind nun alle Dateien und Ordner aufgelistet, die in der lokalen
Site enthalten sind. Die Liste dient gleichzeitig als Datei-Manager. Sie können
hier genau wie im Windows-Explorer bzw. im Finder Dateien kopieren,
einfügen, löschen, verschieben und öffnen.

Die Homepage für die Website erstellen


Nachdem Sie eine Struktur der Compass-Site zum Speichern von Seiten und
Elementen eingerichtet haben, können Sie eine Homepage für diese Site erstellen.
Beim Aufbau dieser Seite fügen Sie Bilder, Text und Flash-Elemente ein.
Das Dokument soll zum Schluss die gleichen Komponenten enthalten wie
die fertige Compass-Homepage.

Dokumente speichern
Speichern Sie das leere Dokument, das Sie erstellt haben.
1 Lassen Sie das Sitefenster geöffnet und klicken Sie auf das Dokumentfenster,
um es zum aktiven Fenster zu machen.
Das Sitefenster bleibt im Hintergrund geöffnet.
2 Wählen Sie Datei > Speichern.
3 Wählen Sie im Dialogfeld Speichern unter den Ordner Compass_Site als
Speicherort für dieses Dokument aus.
4 Geben Sie im Feld Dateiname den Namen my_Compass_Home.html ein.

Dreamweaver-Lehrgang 35
5 Klicken Sie auf Speichern.
Der Name des Dokuments wird nun am oberen Rand des Dokumentfensters
angezeigt.

Seitentitel des Dokuments definieren


Das Dokument hat zwar einen Dateinamen, wird aber nach wie vor als
„Unbenanntes Dokument“ bezeichnet, weil kein HTML-Dokumentname
(der Seitentitel) definiert wurde. Wenn Sie Seitentitel für HTML-Dokumente
festlegen, können Besucher Ihrer Homepage Seiten identifizieren und behalten
bei der Anzeige mehrerer Seiten in einem Browser den Überblick. Der Seitentitel
wird in der Titelleiste des Browsers angezeigt, wenn die Seite im Browser geöffnet
ist. Enthält eine Seite ein Lesezeichen, wird der Seitentitel in der Lesezeichenliste
angezeigt. Wird ein Dokument ohne Seitentitel erstellt, so wird bei diesem
Dokument im Browser der Titel Unbenanntes Dokument angezeigt.
Geben Sie Ihrer Seite einen Namen.
1 Klicken Sie in das Dokumentfenster und wählen Sie Ansicht > Symbolleiste,
sofern die Symbolleiste nicht bereits eingeblendet ist.
Über dem Dokumentfenster wird die Symbolleiste von Dreamweaver
eingeblendet.
2 Geben Sie im Feld Titel den Namen Compass Homepage ein und klicken
Sie in das Dokumentfenster. Der Seitentitel in der Titelleiste des
Dokumentfensters wird aktualisiert.

3 Speichern Sie die Datei.

Seiten in der Layoutansicht entwerfen


Ihre erste Seite entwerfen Sie in der Entwurfsansicht von Dreamweaver. Hier
entwerfen Sie zunächst das Layout der Seite und fügen dann Bilder und Text ein.

36 Kapitel 1
Die Seite, die Sie in diesem Teil des Lehrgangs erstellen, wird zum Schluss ähnlich
aussehen wie diese Seite.

Layoutansicht verwenden
In Dreamweaver gibt es zwei visuelle Entwurfsansichten, die Standard- und die
Layoutansicht. Sie beginnen mit der Layoutansicht. Hier können Sie Layoutzellen
oder Layouttabellen zeichnen, in die Sie dann Inhalte wie Bilder, Text oder
anderes Material einfügen können.
In diesem Teil des Lehrgangs entwerfen Sie das Layout der Seite. Im nächsten
Abschnitt fügen Sie dann Inhalt ein. (Wenn Sie mit diesen beiden Arbeitsschritten
bereits vertraut sind, können Sie gleichzeitig das Layout entwerfen und Inhalt
einfügen.)
1 Klicken Sie in der Objektpalette auf Layoutansicht, sofern es nicht bereits
ausgewählt ist.
Symbol Layoutzelle zeichnen

Symbol Layouttabelle zeichnen

Symbol Layoutansicht

Auf dem Bildschirm erscheint das Dialogfeld Erste Schritte in der


Layoutansicht. Hier werden die Optionen für die Layoutansicht beschrieben.
2 Lesen Sie den Text und klicken Sie auf OK, um das Dialogfeld zu schließen.
3 In der Objektpalette stehen auf der Registerkarte Layout die Layoutoptionen
Layoutzelle zeichnen und Layouttabelle zeichnen zur Verfügung.
Diese Optionen sind in der Standardansicht nicht verfügbar.

Dreamweaver-Lehrgang 37
Layoutzellen zeichnen
In der Layoutansicht können Sie die Entwurfsbereiche eines Dokuments durch
Layoutzellen und Layouttabellen definieren. Dieser Arbeitsschritt ist leichter
durchzuführen, wenn Sie vor dem Layout einer Seite ein Muster für die zu
erstellende Seite vorbereiten.
Sehen Sie sich das folgende Beispiellayout an, um einen Eindruck von dem
Seitenlayout zu erhalten, das Sie in diesem Teil des Lehrgangs erstellen werden.
Auf der Seite befindet sich eine Zelle für das Compass-Logo, eine Tabelle mit
drei Zellen für Site-Navigationsschaltflächen, eine Zelle für eine andere Grafik
und eine Tabelle mit drei Zellen für Text.

In Ihrem Dokument zeichnen Sie ähnliche Tabellen und Zellen wie in diesem
Layout gezeigt. Zeichnen Sie zunächst eine Layoutzelle und fügen Sie dann das
Compass-Logo ein.
1 Klicken Sie in das Dokumentfenster des Dokuments my_CompassHome, um
das Dokument zu aktivieren.
2 Öffnen Sie die folgenden Arbeitsbereich-Werkzeuge, sofern sie nicht bereits
geöffnet sind:
• Die Objektpalette (wählen Sie Fenster > Objekte), über die Sie Objekte in das
Dokument einfügen können.
• Den Eigenschafteninspektor (wählen Sie Fenster > Eigenschaften), über den
Sie Eigenschaften oder Attribute für Objekte in einem Dokument einstellen
können. Wenn der Eigenschafteninspektor nicht bereits erweitert dargestellt
wird, klicken Sie auf den Pfeil in der unteren rechten Ecke, um alle
Eigenschaftenoptionen sehen zu können.

38 Kapitel 1
3 Klicken Sie in der Objektpalette auf Layoutzelle zeichnen.
4 Bewegen Sie den Mauszeiger auf das Dokumentfenster. Der Mauszeiger wird
zu einem Zeichenwerkzeug (Fadenkreuz). Klicken Sie in die obere linke Ecke
des Dokuments und zeichnen Sie durch Ziehen bei gedrückter Maustaste einen
Rahmenzelle.
Wenn Sie die Maustaste loslassen, wird eine Layoutzelle in einer Layouttabelle
angezeigt.

Layout-
zelle

Layout-
tabelle

Die Layouttabelle wird vergrößert, um das Dokumentfenster auszufüllen.


Die Layouttabelle definiert den Seitenlayoutbereich. Das weiße Rechteck ist
die von Ihnen gezeichnete Layoutzelle. In den grauen Bereich der Layouttabelle
können weitere Layoutzellen eingefügt werden.

Layoutzellen verkleinern und vergrößern


Bei Bedarf können Sie die Größe der eingefügten Zellen in Dokumenten
verändern. Außerdem können Sie Zellen auf einer Seite verschieben.
1 Klicken Sie auf den Rahmen einer Layoutzelle, um sie auszuwählen.
An der ausgewählten Layoutzelle werden Auswahlgriffe angezeigt:

2 Führen Sie einen der folgenden Schritte aus, um die Layoutzelle zu verkleinern
oder zu vergrößern:

Dreamweaver-Lehrgang 39
• Geben Sie im Eigenschafteninspektor der Layoutzelle im Feld Fest 510 ein,
um die Zellenbreite auf 510 Pixel einzustellen. Klicken Sie dann in das
Dokument, um die neue Zellenbreite zu übernehmen.
Anmerkung: Wenn die von Ihnen angegebene Pixelbreite größer ist als die Breite
der Layouttabelle oder die Zelle mit der gewünschten Breite eine andere Zelle
in der Layouttabelle überlappen würde, wird von Dreamweaver eine entsprechende
Warnmeldung eingeblendet und die Zellenbreite wird durch eine gültige Breite ersetzt.

• Ziehen Sie den mittleren Auswahlgriff an der rechten Seite der Layoutzelle
nach rechts, bis die Zelle die gewünschte Breite hat. Wenn Sie die Maustaste
loslassen, wird die Zellenbreite im Spaltenkopf am oberen Rand der
Layouttabelle angezeigt.

Mehrere Layoutzellen einfügen


Im nächsten Schritt fügen Sie unter der soeben erstellten Zelle für das Logo drei
Zellen hinzu. Später fügen Sie in diese Zellen die Navigationsschaltflächen für die
Seite ein.
1 Klicken Sie in der Objektpalette auf Layoutzelle zeichnen. Halten Sie die
<Strg> Taste (Windows) bzw. die Befehlstaste (Macintosh) gedrückt.
2 Setzen Sie den Zeiger in das Dokumentfenster unter die Zelle, die Sie für das
Logo gezeichnet haben und ziehen Sie den Mauszeiger über den gewünschten
Bereich, um eine Layoutzelle zu zeichnen.
Halten Sie die <Strg>-Taste (Windows) bzw. die Befehlstaste (Macintosh)
gedrückt und zeichnen Sie zwei weitere Layoutzellen. Ihr Bildschirm müsste
jetzt ungefähr so aussehen:

40 Kapitel 1
Layoutzellen verschieben
Layoutzellen können nach Bedarf verschoben und verkleinert oder vergrößert
werden, z. B. um Zellen nebeneinander anzuordnen. Die Größe einer Layoutzelle
verändern Sie mit den Auswahlgriffen.
Sie können eine Zelle nicht durch Klicken und Ziehen an eine andere Position
verschieben. Führen Sie die folgenden Schritte aus, wenn Sie eine Layoutzelle
in einem Dokument verschieben müssen:
1 Klicken Sie auf den Rahmen der Layoutzelle, um sie auszuwählen.
2 Führen Sie einen der folgenden Schritte aus, um die Layoutzelle zu
verschieben:
• Verwenden Sie die Pfeiltasten.
• Halten Sie die Umschalttaste gedrückt und verschieben Sie die Layoutzelle
mit den Pfeiltasten um jeweils 5 Pixel.

Zellen in Layouttabellen gruppieren


In diesem Schritt ordnen Sie die soeben erstellten Zellen für die
Navigationsschaltflächen in einer Tabelle an. Wenn Sie Zellen in einer Tabelle
gruppieren, können Sie den Zellenabstand steuern und Zellen schnell als Gruppe
verschieben, wenn Sie das Seitenlayout ändern wollen. Sie erstellen jetzt eine
Tabelle für die Navigationsschaltflächen, die dieselbe Breite hat wie die darüber
liegende Logo-Zelle.
Gruppieren Sie die Bilder der Navigationsschaltflächen mit der Funktion
Layouttabelle zeichnen.
1 Klicken Sie in der Objektpalette auf Layouttabelle zeichnen.
2 Setzen Sie den Mauszeiger in das Dokumentfenster an die obere linke Ecke der
Zelle mit der ersten Navigationsschaltfläche. Ziehen Sie den Mauszeiger dann
so, dass die Tabelle die drei Zellen enthält und genauso breit ist wie die Logo-
Zelle.

Dreamweaver-Lehrgang 41
3 Lassen Sie die Maustaste los. Die Zellen werden in einer neuen Tabelle
gruppiert.

Sie haben eine Tabelle erstellt, die drei Layoutzellen (der weiße Tabellenbereich)
und einen leeren Bereich (der graue Tabellenbereich) enthält.

Layouttabellen verschieben
Sie können Layouttabellen auswählen und im Dokument verschieben.
Layouttabellen können nicht an eine Stelle verschoben werden, wo sie andere
Layouttabellen überlappen würden.
Im nächsten Schritt verschieben Sie die soeben erstellte Tabelle um einige Pixel
nach rechts, um die Ausrichtung der Navigationsschaltflächen beim Einfügen
in die Seite an das Logo anzupassen.
1 Klicken Sie im Dokumentfenster auf die Registerkarte Layouttabelle, um die
Tabelle zu verschieben.
2 Ziehen Sie die Layouttabelle um einige Pixel nach rechts und ziehen Sie
anschließend mit der Maus am Auswahlgriff an der rechten Seite der Tabelle,
um den rechten Rand der Layoutzellen am Logo und an den
Navigationsschaltflächen auszurichten.
Wie Sie vielleicht bereits bemerkt haben, werden beim Erstellen neuer Tabellen
und Zellen Rasterlinien um den Layoutbereich angezeigt. An diesen Rasterlinien
können Sie die Layoutelemente ausrichten.

Weitere Layoutzellen hinzufügen


Fügen Sie eine Layoutzelle für die Grafik Learn More About ein.
1 Klicken Sie in der Objektpalette auf Layoutzelle zeichnen.
2 Zeichnen Sie im Dokumentfenster eine neue Zelle in den Bereich unter
der Tabelle für die Navigationsschaltflächen.

42 Kapitel 1
Ihre Seite müsste jetzt ungefähr so aussehen:

Layouttabellen erstellen
Im vorherigen Teil haben Sie Zellen gezeichnet und daraus eine Tabelle erstellt.
Erstellen Sie jetzt eine Tabelle und fügen Sie Zellen ein.
1 Klicken Sie in der Objektpalette auf Layouttabelle zeichnen.
2 Bewegen Sie den Mauszeiger in das Dokumentfenster. Ziehen Sie den
Mauszeiger im Bereich unterhalb der Layoutzelle, die Sie gerade eingefügt
haben, nach rechts, um die Tabelle an der rechten Seite der obersten Zelle
auszurichten. Ziehen Sie den Mauszeiger dann nach unten zum unteren
Ende des Dokumentfensters.

Layoutzellen in Tabellen zeichnen


Fügen Sie Layoutzellen ein, die Text über Reiseziele aufnehmen sollen.

Dreamweaver-Lehrgang 43
1 Klicken Sie in der Objektpalette auf Layoutzelle zeichnen und bewegen Sie
den Mauszeiger auf die gerade gezeichnete Layouttabelle.
2 Zeichnen Sie eine Tabellenzelle, die etwa ein Drittel des Raums in der Tabelle
einnimmt.
3 Klicken Sie auf den Rand der Layoutzelle, um sie auszuwählen und geben
Sie im Eigenschafteninspektor im Feld Fest 170 ein, um die Zellenbreite
festzulegen.
4 Zeichnen Sie neben der ersten Zelle eine weitere Tabellenzelle, die etwa ein
Drittel des Tabellenraums einnimmt.
5 Klicken Sie auf den Rand der Layoutzelle, um sie auszuwählen und geben
Sie im Eigenschafteninspektor im Feld Fest 170 ein, um die Zellenbreite
festzulegen.
6 Zeichnen Sie im verbleibenden freien Raum der Tabelle die letzte Zelle.
Ändern Sie ggf. die Größe und Position der Zellen.
Ihr Bildschirm müsste jetzt ungefähr so aussehen:

Seiten mit Inhalt füllen


Nachdem Sie das Seitenlayout erstellt haben, fügen Sie im nächsten Schritt
Grafiken, wie das Logo und Rollover-Bilder, ein.

Bilder einfügen
Bilder können auf zwei Arten eingefügt werden: über das Dreamweaver-
Hauptmenü und über die Objektpalette.

44 Kapitel 1
1 Klicken Sie auf eine beliebige Stelle in der Layoutzelle für das Logo
(die oberste Layoutzelle).
Wenn Sie in eine Layoutzelle klicken, wird die Einfügemarke in die Zelle
gesetzt, ohne dass die Zelle ausgewählt wird.

2 Wählen Sie Einfügen > Bild.


3 Wählen Sie im Dialogfeld Bildquelle auswählen den Ordner Compass_Site.
Öffnen Sie den Ordner Assets und anschließend den Ordner images. Klicken
Sie auf compass_logo.gif, um die Datei auszuwählen.
4 Vergewissern Sie sich, dass das Popupmenü Relativ zu im unteren Bereich
des Dialogfelds auf Dokument eingestellt ist. Klicken Sie dann auf Auswählen
(Windows) bzw. Öffnen (Macintosh), um das Bild auszuwählen.
Das Bild erscheint in der Layoutzelle.

5 Klicken Sie auf eine beliebige Stelle der Layoutzelle Learn More About, um die
Einfügemarke in diese Zelle zu setzen.
6 Klicken Sie in der Objektpalette auf der Registerkarte Allgemein auf Bild
einfügen.
7 Wählen Sie im Dialogfeld Bildquelle auswählen den Ordner Compass_Site/
Assets/images. Klicken Sie auf learnMoreAbout.gif. Klicken Sie dann auf
Auswählen (Windows) bzw. Öffnen (Macintosh), um das Bild auszuwählen.
Das Bild erscheint in der Layoutzelle.
8 Wählen Sie Datei > Speichern, um die an der Homepage vorgenommenen
Änderungen zu speichern.

Rollover-Bilder erstellen
Ein Rollover-Bild ist ein Bild, das sich ändert, wenn Sie den Mauszeiger darüber
bewegen.
In diesem Schritt erstellen Sie mit dem Dreamweaver-Befehl Rollover-Bild
einfügen drei Rollover-Bilder für die Navigationsschaltflächen, und zwar
Trip Planner (Reiseplanung), Destinations (Ziele) und Travel Logs
(Reiseberichte).

Dreamweaver-Lehrgang 45
Ein Rollover-Bild besteht aus zwei Bildern: Das erste Bild wird angezeigt, wenn
die Seite im Browser geladen wird, das zweite Bild erscheint, wenn der Mauszeiger
über das erste Bild bewegt wird. Achten Sie darauf, dass beide Bilder dieselbe
Größe haben. Das erste Bild gibt die Anzeigegröße vor. Wenn das zweite Bild
also erheblich größer oder kleiner ist, sehen die Ergebnisse verzerrt und
unprofessionell aus.
Im nächsten Schritt fügen Sie eine Navigationsschaltfläche mit einem Rollover-
Bild in Ihre Seite ein. Dann fügen Sie die anderen Navigationsschaltflächen ein
und zeigen die Seite zum Testen der Rollover als Vorschau in einem Browser an.
1 Klicken Sie im Dokumentfenster in die erste Zelle der Tabelle für die
Navigationsschaltflächen.
Hiermit legen Sie fest, dass an dieser Stelle das Bild eingefügt werden soll.
2 Führen Sie einen der folgenden Schritte aus, um ein Rollover-Bild einzufügen:
• Klicken Sie der Objektpalette auf der Registerkarte Allgemein auf Rollover-
Bild einfügen.
• Wählen Sie Einfügen > Interaktive Bilder > Rollover-Bild.
3 Geben Sie im Feld Bildname des Dialogfelds Rollover-Bild einfügen das Wort
planner ein.
Dadurch erhält das Bild einen eindeutigen Namen und kann im HTML-Code
leichter gefunden werden.
4 Klicken Sie im Feld Originalbild auf Durchsuchen. Wählen Sie
MenuTripPlanner.gif und klicken Sie auf Auswählen (Windows) bzw. Öffnen
(Macintosh).
Hiermit haben Sie festgelegt, welches Bild angezeigt werden soll, wenn die Seite
geladen wird.
5 Klicken Sie im Feld Rollover-Bild auf Durchsuchen. Wählen Sie
MenuTripPlanner_on.gif und klicken Sie auf Auswählen (Windows) bzw.
Öffnen (Macintosh).
Hiermit haben Sie festgelegt, welches Bild angezeigt werden soll,
wenn der Mauszeiger über dem Originalbild steht.

46 Kapitel 1
6 Vergewissern Sie sich, dass die Option Rollover-Bild vorausladen markiert ist,
damit die Rollover-Bilder beim Laden der Seite im Browser ebenfalls geladen
werden. Nur so erreichen Sie einen schnellen Übergang zwischen Bildern,
wenn Besucher der Seite den Mauszeiger über das Originalbild bewegen.

7 Klicken Sie auf OK, um das Dialogfeld zu schließen.


Das Bild erscheint im Dokument.
8 Passen Sie die Größe der Layoutzelle an die Größe des Bildes an.

Andere Rollover-Bilder erstellen


Fügen Sie jetzt Rollover-Bilder für die anderen Navigationsschaltflächen ein.
1 Klicken Sie im Dokumentfenster in die Zelle für die zweite
Navigationsschaltfläche. Klicken Sie dann in der Objektpalette auf der
Registerkarte Allgemein auf Rollover-Bild einfügen.
2 Geben Sie im Feld Bildname des Dialogfelds Rollover-Bild einfügen
destinations ein, um dem Bild einen eindeutigen Namen zu geben.
3 Klicken Sie im Feld Originalbild auf Durchsuchen. Wählen Sie
MenuDestinations.gif.
4 Klicken Sie im Feld Rollover-Bild auf Durchsuchen. Wählen Sie
MenuDestinations_on.gif.
5 Vergewissern Sie sich, dass die Option Rollover-Bild vorausladen markiert ist.
Klicken Sie auf OK, um das Dialogfeld zu schließen.
6 Klicken Sie im Dokumentfenster auf die Zelle für die dritte
Navigationsschaltfläche. Klicken Sie in der Objektpalette auf der Registerkarte
Allgemein auf Rollover-Bild einfügen.
7 Geben Sie im Feld Bildname des Dialogfelds Rollover-Bild einfügen das Wort
travellog ein, um dem Bild einen eindeutigen Namen zu geben.
8 Klicken Sie im Feld Originalbild auf Durchsuchen. Wählen Sie
MenuTravelLogs.gif.
9 Klicken Sie im Feld Rollover-Bild auf Durchsuchen. Wählen Sie
MenuTravelLogs_on.gif.

Dreamweaver-Lehrgang 47
10 Vergewissern Sie sich, dass die Option Rollover-Bild vorausladen markiert ist.
Klicken Sie auf OK, um das Dialogfeld zu schließen.
11 Passen Sie die Größe der Layoutzellen an die Größe der Bilder an.

Dokument in der Vorschau anzeigen


Sie können das Rollover-Verhalten nicht im Dokumentfenster von Dreamweaver
anzeigen. Rollover-Bilder funktionieren nur in Browsern. Um Browser-
Funktionen zu sehen, können Sie eine Vorschau des Dokuments in Dreamweaver
anzeigen. Sie brauchen das Dokument nicht zu speichern, um es in der Vorschau
anzeigen zu können.
1 Drücken Sie F12, um das Dokument in einem Standard-Webbrowser
aufzurufen.

Bewegen Sie den Mauszeiger über die erstellten Rollover-Bilder, um zu testen,


wie sich die Bilder verändern.
2 Schließen Sie das Browserfenster, wenn Sie fertig sind.
3 Kehren Sie zum Dokumentfenster von Dreamweaver zurück. Wählen Sie
Datei > Speichern, um die Änderungen an der Homepage zu speichern.

Text einfügen
In diesem Schritt fügen Sie Text in die Zellen der unteren Layouttabelle ein.
In Dreamweaver können Sie Text direkt in eine Layoutzelle eingeben oder aus
einem anderen Dokument ausschneiden und dann in die Layoutzelle einfügen.
In diesem Lehrgang fügen Sie Text in die Layoutzelle ein, indem Sie Text aus einer
vorhandenen Textdatei kopieren und in die Layoutzelle einfügen.
1 Wählen Sie Datei > Öffnen und öffnen Sie im Ordner Compass_Site die
Datei DW4_HomeText.txt.
Das Dokument DW4_HomeText.txt wird in einem neuen Dreamweaver-
Dokumentfenster geöffnet.
2 Wählen Sie in DW4_HomeText.txt die ersten beiden Textzeilen von
„Fly Fishing“ bis „ravioli“ aus.
3 Wählen Sie Bearbeiten > Kopieren, um den Text zu kopieren.
4 Klicken Sie im Dokument my_CompassHome in die erste Layoutzelle
der Layouttabelle für Text.

48 Kapitel 1
5 Wählen Sie Bearbeiten > Einfügen, um den Text in die Layoutzelle
einzufügen.
6 Wählen Sie in DW4_HomeText.txt die nächsten beiden Textzeilen von „Level
5 Rapids“ bis „Siberia“ aus.
7 Wählen Sie Bearbeiten > Kopieren, um den Text zu kopieren.
8 Klicken Sie im Dokument my_CompassHome in die zweite Layoutzelle
der Layouttabelle für Text.
9 Wählen Sie Bearbeiten > Einfügen, um den Text in die Layoutzelle
einzufügen.
10 Wählen Sie in DW4_HomeText.txt die beiden letzten Textzeilen von
„Puget Sound Kayaking“ bis „Puget Sound“ aus.
11 Kopieren Sie den Text und fügen Sie ihn in die dritte Zelle der Layouttabelle
ein.
12 Schließen Sie DW4_HomeText.txt und klicken Sie auf
my_CompassHome.html, um es zum aktiven Dokument zu machen.

Text formatieren
Sie können Text im Dokumentfenster formatieren, indem Sie im
Eigenschafteninspektor Eigenschaften festlegen. Wählen Sie zunächst den zu
formatierenden Text aus und nehmen Sie dann die Änderungen vor. Im
Folgenden ändern Sie beispielsweise Schrift und Schriftgröße des Textes.
1 Wenn der Eigenschafteninspektor nicht geöffnet ist, wählen Sie Fenster >
Eigenschaften.
2 Wählen Sie in der ersten Layoutzelle für Text den gesamten Text vom Wort
„Fly“ bis zum Wort „ravioli“ aus.
3 Wählen Sie im zweiten Popupmenü Format des Eigenschafteninspektors,
in dem momentan Standardschrift gewählt ist, die Option Verdana, Arial,
Helvetica, sans-serif.
4 Wählen Sie im Popupmenü Größe die Option 2 aus.
Die Änderungen werden im Dokumenttext automatisch angezeigt.
5 Wiederholen Sie die hier beschriebenen Schritte, um den Text der beiden
übrigen Textzellen auszuwählen und zu formatieren.

Farben ändern und Stile anwenden


In diesem Schritt nehmen Sie weitere Formatierungsänderungen am Text vor.
Durch Änderung von Farbe und Stil markieren Sie Text als Überschrift.

Dreamweaver-Lehrgang 49
1 Wählen Sie in der ersten Textzelle als Überschrift den Text vom Wort „Fly“
bis zum Wort „Mountains“ aus.
2 Klicken Sie im Eigenschafteninspektor auf den Farbwähler. Bewegen Sie die
Pipette auf das Bild Learn More About im Dokumentfenster. Wählen Sie die
braune Farbe des Textes im Bild aus.
3 Klicken Sie im Eigenschafteninspektor auf das Symbol F, um den Text fett
darzustellen.
4 Wiederholen Sie die hier beschriebenen Schritte, um Farbe und Stil der
Überschriften in den übrigen Textzellen zu ändern.
5 Drücken Sie F12, um eine Vorschau der Seite in einem Browser anzuzeigen.
Ihre Seite müsste jetzt ungefähr so aussehen:

Betrachten Sie den Text. Zwischen dem Text in einer Layoutzelle und dem Text
in der nächsten Layoutzelle liegt nur wenig Abstand. Dieses Problem werden
Sie in einem der nächsten Schritte dieses Lehrgangs beheben.
6 Schließen Sie das Browserfenster und klicken Sie in das Dokumentfenster,
um es zu aktivieren.

Standardansicht verwenden
Die Layoutansicht eignet sich gut zum Gestalten von Webseiten. Sie können
zwar so gut wie alle Layoutelemente in der Layoutansicht bearbeiten, einige
Veränderungen müssen jedoch in der Standardansicht fertig gestellt werden.
Wenn Sie zur Standardansicht wechseln, sehen Sie, wie Dreamweaver die Struktur
Ihrer Webseite mithilfe von Tabellen aufbaut. Layouttabellen werden in der
Standardansicht wie nachstehend gezeigt dargestellt.
Im folgenden Teil lernen Sie, wie Sie Ihre Webseite weiter optimieren können.
Wechseln Sie zunächst zur Standardansicht von Dreamweaver.

50 Kapitel 1
• Klicken Sie in der Objektpalette auf Standardansicht.
Ihre Seite müsste jetzt ungefähr wie hier gezeigt aussehen.

Eigenschaften von Zellen definieren


Durch die Zellenhöhe wird die Höhe einer Zellenzeile festgelegt. Da der freie
Raum um das Compass-Logo in unserem Beispiel recht groß ist, entfernen Sie
nun den überschüssigen Leerraum zwischen dem Logo und den
Navigationsschaltflächen.
1 Klicken Sie auf eine beliebige Stelle des leeren Bereichs der Zelle mit dem Bild
des Compass-Logos (nicht auf das Bild selbst).
2 Löschen Sie im Eigenschafteninspektor für die Zelle den Wert, der im Feld H
(Höhe) steht.
3 Klicken Sie im unteren Bereich des Eigenschafteninspektors auf das Farbfeld
Hg und wählen Sie mit der Pipette als Farbe Schwarz aus.
Die Hintergrundfarbe der Zelle wird entsprechend geändert.
4 Klicken Sie auf eine beliebige Stelle im Dokumentfenster, um die Änderung
zu sehen.

Tabellen auswählen
Verändern Sie jetzt die Leerräume in der Tabelle mit den Navigations-
schaltflächen. Die einfachste Möglichkeit, in der Standardansicht eine Tabelle
auszuwählen, ist über den Tag-Selektor, mit dem HTML-Tags von Elementen im
Dokument angezeigt werden.
Wählen Sie mit dem Tag-Selektor die Tabelle aus, die die Navigationsschaltflächen
enthält.

Dreamweaver-Lehrgang 51
1 Klicken Sie in die Zelle mit dem Reiseplanungsbild.
Beachten Sie den Tag-Selektor unten links im Dokumentfenster.

Anmerkung: Welche Tags im Tag-Selektor angezeigt werden, hängt davon ab, wie
viele Tabellen Sie in der Layoutansicht erstellt haben.

2 Klicken Sie im Tag-Selektor auf das Tag <table>, das sich am weitesten rechts
befindet.
Im Dokumentfenster erscheint ein Rahmen um die Tabelle der
Navigationsschaltflächen und im Eigenschafteninspektor werden
die Eigenschaften der Tabelle angezeigt.

Tabelleneigenschaften definieren
In diesem Schritt löschen Sie über den Eigenschafteninspektor der Tabelle die
überschüssigen Bereiche in der Tabelle mit den Navigationsschaltflächen und
fügen eine Hintergrundfarbe für die Tabelle ein.
1 Klicken Sie im Eigenschafteninspektor auf Zeilenhöhen löschen.
(Die Schaltfläche oben links in der unteren Hälfte des
Eigenschafteninspektors.)
Der überschüssige Leerraum wird aus der Tabelle entfernt.
2 Klicken Sie im Eigenschafteninspektor auf das Farbfeld Hg und wählen Sie mit
der Pipette als Farbe Schwarz aus.
Die Hintergrundfarbe der Tabelle mit den Navigationsschaltflächen erscheint
schwarz.

52 Kapitel 1
Zellenauffüllung hinzufügen
In diesem Schritt bearbeiten Sie Zellen mit Text. Wie Sie sehen, liegt der Text
zu dicht an den Rändern der Zellen. Fügen Sie Füllraum in die Zellen ein, sodass
etwas Abstand zwischen dem Text und den Zellen liegt.
1 Klicken Sie in die erste Zelle der Tabelle mit Text.
2 Wählen Sie die Tabelle aus, indem Sie im Tag-Selektor auf den ganz rechten
Tag <table> klicken.
3 Geben Sie im Feld ZellAuff des Eigenschafteninspektors 10 ein, um einen
10 Pixel breiten Abstand zwischen Text und Tabellenzellen einzufügen.
4 Klicken Sie auf eine beliebige Stelle im Dokumentfenster, um die Änderungen
zu sehen.
5 Speichern Sie das Dokument.

Sitedateien anzeigen
Die Struktur einer lokalen Site können Sie sich in der Sitemap-Ansicht von
Dreamweaver anzeigen lassen. Über die Sitemap-Funktion können Sie auch
neue Dateien und Hyperlinks in die Site einfügen, entfernen und ändern.
Außerdem können Sie eine Grafikdatei von der Site erstellen, die Sie in eine
Bildbearbeitungsanwendung exportieren und von dort aus drucken können.
In der Sitemap wird die Homepage einer Site immer als oberste Ebene angezeigt.
Unter der Homepage stehen die Dateien, zu denen Dateien die Hyperlinks der
Homepage führen.
Sie haben verschiedene Möglichkeiten, um die Homepage einer Site zu definieren.
Am einfachsten ist es, die Homepage über das Kontextmenü im Sitefenster
zu definieren.
1 Klicken Sie auf die Titelleiste des Sitefensters, um es zu aktivieren. (Falls das
Sitefenster nicht angezeigt wird, wählen Sie Fenster > Dateien der Site.)
2 Klicken Sie im Sitefenster in der Liste Lokaler Ordner mit der rechten
Maustaste (Windows) bzw. bei gedrückter <Strg>-Taste (Macintosh) auf das
Dokument my_CompassHome.html. Wählen Sie aus dem Kontextmenü
die Option Als Homepage definieren.
3 Klicken Sie im oberen linken Bereich des Sitefensters auf Sitemap und wählen
Sie im Popupmenü Sitemap die Option Map und Dateien.

Symbol Sitemap

Dreamweaver-Lehrgang 53
Im Sitefenster werden jetzt zwei Ansichten der lokalen Site angezeigt: links eine
Sitemap mit einer grafischen Darstellung der aktuellen Struktur der Compass-Site
(mit my_CompassHome.html als Homepage) und rechts eine Liste mit dem
Inhalt des lokalen Ordners.

Auf der Seite my_CompassHome.html befinden sich zurzeit keine Hyperlinks.


Im nächsten Teil dieses Lehrgangs fügen Sie dieser Seite Hyperlinks hinzu.
Lassen Sie das Sitefenster geöffnet, damit Sie sehen können, wie die Sitemap
aktualisiert wird, wenn Sie der Homepage Hyperlinks hinzufügen.

Hyperlinks in Dokumente einfügen


Über Bilder im oberen Bereich der Compass-Homepage sollen Besucher zu
bestimmten Seiten der Website gelangen. In diesem Schritt fügen Sie Hyperlinks
für die Navigationsschaltflächen ein.
In Dreamweaver gibt es verschiedene Möglichkeiten, Hyperlinks zu erstellen.
Fügen Sie zunächst mit dem Eigenschafteninspektor einen Hyperlink vom
Bild Trip Planner (Reiseplanung) zur Seite TripPlanner.html hinzu.
1 Doppelklicken Sie in einem der beiden Fenster des Sitefensters auf das Symbol
für die Datei my_CompassHome.html.
Die Datei my_CompassHome.html wird zum aktiven Fenster.
2 Klicken Sie im Dokumentfenster auf das Bild Trip Planner,
um es auszuwählen.

54 Kapitel 1
3 Wählen Sie Fenster > Eigenschaften, um den Eigenschafteninspektor
zu öffnen, sofern er noch nicht geöffnet ist.
Im Eigenschafteninspektor werden die Informationen zum ausgewählten
Bild angezeigt.

Anmerkung: Das Feld Hyperlink enthält ein Rautezeichen (#), das auch als Null-Link
oder „Dummy-Link“ bezeichnet wird. Der Hyperlink wurde angelegt, als Sie das
Rollover-Bild eingefügt haben. Entfernen Sie dieses Zeichen nicht. Es wird in Kürze
durch den Dateinamen des Dokuments ersetzt, zu dem Sie den Hyperlink anlegen.

4 Klicken Sie im Eigenschafteninspektor auf das Ordnersymbol neben dem Feld


Hyperlink.
5 Öffnen Sie im Dialogfeld Datei auswählen den Ordner Compass_Site, wählen
Sie die Datei DW4_TripPlanner.html und klicken Sie auf Auswählen
(Windows) bzw. Öffnen (Macintosh). Dadurch wählen Sie die Datei aus, die
beim Klicken auf die Schaltfläche Trip Planner geöffnet werden soll.
Der Dateiname erscheint im Feld Hyperlink des Eigenschafteninspektors.
Im nächsten Schritt erstellen Sie mit dem Eigenschafteninspektor und dem
Sitefenster einen Hyperlink zum Bild Destinations.
6 Klicken Sie auf die Titelleiste des Sitefensters, um es zu aktivieren, oder wählen
Sie Fenster > Dateien der Site. Passen Sie die Größe des Dokumentfensters
gegebenenfalls so an, dass Sie die linke Seite des Dokumentfensters und das
Sitefenster nebeneinander sehen können.
7 Wählen Sie im Dokumentfenster das Bild Destinations aus, indem Sie darauf
klicken.

Dreamweaver-Lehrgang 55
8 Klicken Sie im Eigenschafteninspektor auf Auf Datei ziehen (rechts neben dem
Feld Hyperlink) und ziehen Sie den Zeiger auf das Sitefenster und dort in der
Liste Lokaler Ordner auf die Datei DW4_Destinations.html.

Der Dateiname wird im Feld Hyperlink des Eigenschafteninspektors für das


Bild products eingeblendet.
9 Klicken Sie im Sitefenster auf Sitemap. Der eingefügte Hyperlink wird in der
Sitemap angezeigt.

Befindet sich neben einer Datei in der Sitemap ein Pluszeichen (+), bedeutet
dies, dass die Datei Hyperlinks zu anderen Dokumenten enthält. Klicken Sie
auf das Pluszeichen, damit auch die zugehörigen Dateien in der Struktur der
Sitemap angezeigt werden. Klicken Sie auf das Minuszeichen (–), um diese
Dateien aus der Sitemap-Ansicht auszublenden.
Im nächsten Schritt erstellen Sie einen Hyperlink für das Bild Travellogs.
10 Wählen Sie im Dokumentfenster das Bild Travellogs aus, indem Sie darauf
klicken.
11 Ziehen Sie im Eigenschafteninspektor das Symbol Auf Datei ziehen auf das
Sitefenster und zeigen Sie auf die Datei DW4_Travelog.html.
12 Wählen Sie Datei > Speichern, um alle Änderungen zu speichern, die Sie an
der Homepage vorgenommen haben.

56 Kapitel 1
Seiten testen
Sie können Hyperlinks nicht in Dreamweaver testen und müssen daher in einem
Browser prüfen, ob die Seiten wie gewünscht funktionieren.
1 Drücken Sie F12, um eine Vorschau der Seite in einem Browser anzuzeigen.
Prüfen Sie Ihre Hyperlinks durch einen Klick auf die Navigationsschaltflächen.
Klicken Sie im Browser auf die Schaltfläche Zurück, um zu Ihrer Homepage
zurückzukehren.
2 Wenn Sie die Seite getestet haben, wählen Sie Datei > Schließen, um die Seite
zu schließen.

Die Elementpalette verwenden


Über die Elementpalette können Sie Site-Elemente wie Bilder, HTML-Farben,
Hyperlinks, Flash- und andere Filme, Skripte, Vorlagen und Bibliothekselemente
anzeigen. Sie können alle Site-Elemente an einem Ort anzeigen und der Seite
dann direkt von diesem Fenster aus Inhalt hinzufügen.
In diesem Schritt lernen Sie, wie Sie Elemente über die Elementpalette in eine
Seite einfügen.

Neue Dokumente auswählen


Damit Sie keine zusätzlichen Tabellen auf Ihrer Homepage erstellen müssen,
enthält dieser Lehrgang eine HTML-Datei, die der von Ihnen erstellten
Homepage ähnelt. Die Datei enthält eine neue Tabellenzelle auf der rechten
Seite des Dokuments.
Führen Sie einen der folgenden Schritte aus, um mit diesem Teil des Lehrgangs
zu beginnen:
• Wenn Sie den Lehrgang vom vorherigen Teil fortsetzen, wählen Sie Datei >
Öffnen und anschließend die Datei DW4_CompassHome2.html.

Dreamweaver-Lehrgang 57
• Wenn Sie den Lehrgang hier beginnen, wählen Sie Sites > Site öffnen und
wählen Sie in der Liste der Sites Lehrgang – Dreamweaver, um eine definierte
Site zu öffnen. Wählen Sie im Hauptmenü des Dokumentfensters Datei >
Öffnen und wählen Sie in dem anschließend angezeigten Dialogfeld die Datei
DW4_CompassHome2.html.
Die Datei DW4_CompassHome2.html wird geöffnet.

Site-Elemente anzeigen
Blenden Sie die Elementpalette ein.
1 Führen Sie einen der folgenden Schritte aus, um die Elementpalette zu öffnen:
• Wählen Sie Fenster > Elemente.
• Klicken Sie in der Launcher-Leiste auf das Symbol Element anzeigen.
Die Elementpalette erscheint auf dem Bildschirm.

Elementoptionen Elementvorschaubereich

58 Kapitel 1
Bilder einfügen
In diesem Schritt fügen Sie über die Elementpalette zwei Bilder in eine Seite ein:
das Bild eines Felsenkletterers und ein Textbild.
1 Klicken Sie in der Elementpalette auf Bilder und vergewissern Sie sich, dass die
Option Site am oberen Rand der Elementpalette aktiviert ist, damit Sie alle
Bilder der Compass-Site sehen können.
2 Wählen Sie in der Liste Name das Bildsymbol für climber.jpg aus und ziehen
Sie es auf die mittlere Tabellenzelle in der rechten Hälfte der Seite.

3 Drücken Sie die Nach-rechts-Taste (dadurch wird die Auswahl des


Klettererbilds aufgehoben und die Einfügemarke hinter das Bild gesetzt).
Drücken Sie <Umschalt>+<Eingabe> (Windows) bzw.
<Umschalt>+<Zeilenschalter>, um einen Zeilenumbruch einzufügen.
4 Wählen Sie in der Liste Name die Datei featureText.gif aus und ziehen Sie die
Datei auf den gerade erstellten Zeilenumbruch. Das Bild featureText
wird dadurch unter dem Bild des Kletterers eingefügt.

Flash-Filme einfügen
In diesem Schritt fügen Sie einen anderen Elementtyp ein. Ziehen Sie einen Flash-
Film in die Zelle unter den Navigationsschaltflächen.
1 Klicken Sie in der Elementpalette auf das Symbol Flash, um alle Flash-Dateien
auf der Compass-Site anzuzeigen.
2 Klicken Sie in der Liste Name auf Welcome.swf, um den Flash-Film
auszuwählen, den Sie in das Dokument einfügen.
Im Vorschaubereich der Elementpalette sehen Sie einen Platzhalter
für den Flash-Film.

Dreamweaver-Lehrgang 59
3 Klicken Sie im Vorschaubereich der Elementpalette auf die Schaltfläche
Abspielen, um den Flash-Film anzuzeigen.
Schaltfläche Abspielen

4 Ziehen Sie Welcome.swf aus der Liste Name auf die Zelle unter
der Navigationsschaltfläche Trip Planner.
In der ausgewählten Zelle erscheint ein Platzhalter für den Flash-Film.

Farben über die Elementpalette wählen


Farben für Hintergrund oder Text in HTML-Elementen werden automatisch auf
der Registerkarte Elemente der Elementpalette eingefügt. Sie können eine Farbe
aus der Elementpalette wählen und damit Text auf derselben Seite oder auf
anderen Seiten Ihrer Site verändern.
1 Setzen Sie die Einfügemarke hinter das Bild des Felsenkletterers. Drücken Sie
die Eingabetaste (Windows) bzw. den Zeilenschalter (Mac), um einen neuen
Absatz einzufügen. Geben Sie Yosemite ein.
2 Doppelklicken Sie auf Yosemite, um den Text auszuwählen.
3 Klicken Sie in der Elementpalette auf das Symbol Farben, um HTML-Farben
in der Compass-Site anzuzeigen.
4 Wählen Sie in der Liste Wert das Farbsymbol mit dem Wert #993300 aus.
Ziehen Sie es auf den ausgewählten Text, um dessen Farbe zu ändern.

Favoritenelementliste erstellen
Verwalten Sie Ihre Elemente über die Elementpalette. In der Elementpalette
können Sie eigene Gruppen mit Favoritenelementen erstellen. In diesem Schritt
fügen Sie in die Liste der Site-Favoriten das Compass-Logo und das Bild der
Navigationsschaltfläche ein.
1 Wählen Sie in der Elementpalette das Symbol Bilder aus.
2 Wählen Sie in der Liste Name das Bild compass_logo.gif aus, indem Sie
einmal mit der Maustaste auf diesen Namen klicken. Führen Sie einen
der folgenden Schritte aus:
• Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter
Wahltaste (Macintosh), um das Kontextmenü aufzurufen. Wählen Sie
Zu Favoriten hinzufügen.

60 Kapitel 1
• Klicken Sie unten rechts in der Elementpalette auf Zu Favoriten hinzufügen.
Auf dem Bildschirm erscheint eine Meldung, dass das ausgewählte Element
der Liste der Site-Favoriten hinzugefügt wurde.
3 Klicken Sie auf OK.

Mehrere Bilder als Favoriten hinzufügen


In diesem Schritt fügen Sie die Bilder der Navigationsschaltflächen in die Liste
der Favoriten ein. Über die Elementpalette können Sie mehrere Bilder auswählen
und sie gleichzeitig als Favoriten hinzufügen.
1 Klicken Sie in der Elementpalette in der Liste Bilder auf das erste
Navigationsschaltflächenbild (MenuDestinations.gif ).
2 Führen Sie einen der folgenden Schritte aus, um die anderen
Navigationsschaltflächen auszuwählen:
• Drücken Sie die Umschalttaste (Windows) und klicken Sie in der Liste Bilder
auf MenuTripPlanner_on.gif (die letzte Navigationsschaltfläche in der Liste),
um alle Navigationsschaltflächenbilder auszuwählen.
• Drücken Sie die Umschalttaste (Macintosh) und wählen Sie alle
Navigationsschaltflächenbilder bei gedrückter Umschalttaste aus.
3 Klicken Sie auf das Symbol Zu Favoriten hinzufügen.
4 Klicken Sie in der angezeigten Meldung auf OK.

Favoritenelemente anzeigen
Sie können die Elemente anzeigen, die Sie in die Liste der Favoriten eingefügt
haben, und mit dieser Ansicht Elemente in Ihr Dokument einfügen.
Um die in die Favoritenliste eingefügten Bilder anzuzeigen, klicken Sie auf
den Optionsschalter Favoriten am oberen Rand der Elementpalette.

Flash-Objekte einfügen
Flash-Objekte sind kleine Shockwave-Grafikdateien (SWF), die Sie in
Dreamweaver erstellen können. Sie können Flash-Textobjekte und Flash-
Schaltflächenobjekte erstellen. Mit Flash-Text können Sie Webseiten mit
ungewöhnlichen Schriften entwerfen, ohne sich darüber Gedanken machen
zu müssen, welche Schriften Besucher Ihrer Site auf ihren Computern installiert
haben. Flash-Schaltflächen werden aus Flash-Vorlagen erstellt, die zum
Lieferumfang von Dreamweaver gehören. So können Sie Vorlagenschaltflächen
mühelos an Ihre Bedürfnisse anpassen und in Ihre Webseiten einfügen.

Flash-Textobjekte erstellen
In diesem Schritt erstellen Sie ein Flash-Textobjekt als Überschrift für Ihre
Homepage.

Dreamweaver-Lehrgang 61
1 Setzen Sie die Einfügemarke im Dokumentfenster über das Bild
des Felsenkletterers.
2 Klicken Sie in der Elementpalette auf Flash-Text einfügen.

Das Dialogfeld Flash-Text einfügen wird angezeigt.

3 Wählen Sie im Dialogfeld Flash-Text einfügen die folgenden Optionen:


• Wählen Sie als Schrift Verdana oder eine andere Schrift.
• Geben Sie unter Größe 18 ein.
• Klicken Sie unter Farbe auf das Farbfeld. Wählen Sie mit der Pipette einen
Braunton aus der Überschrift im Dokument.
• Klicken Sie unter Rollover-Farbe auf das Farbfeld. Bewegen Sie
die Pipette in das Dokumentfenster und wählen Sie die Goldfarbe
des Tabellenhintergrunds aus.
• Geben Sie im Textfeld Featured Destination ein.
• Geben Sie im Feld Speichern unter als Dateiname myText.swf ein.
4 Klicken Sie auf OK, um das Dialogfeld Flash-Text einfügen zu schließen.

Flash-Textobjekte in Dokumenten anzeigen


Das Flash-Textobjekt erscheint im Dokument. Sie müssen das Flash-Objekt
abspielen, um den Text mit dem zugehörigen Rollover-Effekt zu sehen.
1 Klicken Sie im Eigenschafteninspektor auf den Erweiterungspfeil, um alle
Elemente anzuzeigen (sofern nicht bereits die gesamte Struktur sichtbar ist).

62 Kapitel 1
2 Klicken Sie im Eigenschafteninspektor für Flash-Text auf Abspielen.
3 Bewegen Sie den Mauszeiger im Dokumentfenster über das Flash-Textobjekt.
4 Wenn Sie die Wiedergabe des Objekts unterbrechen möchten, klicken Sie im
Eigenschafteninspektor auf Stop.

Flash-Schaltflächenobjekte erstellen
Das Einfügen einer Flash-Schaltfläche in ein Dokument ist ganz leicht. In diesem
Schritt erstellen Sie eine Flash-Schaltfläche und fügen sie unter dem Kletterer-
Bild ein.
1 Setzen Sie die Einfügemarke im Dokumentfenster an die Stelle, an der das
Objekt erscheinen soll, in diesem Fall unter dem Bild des Felsenkletterers.
Klicken Sie dann in der Objektpalette auf Flash-Schaltfläche einfügen.
Das Dialogfeld Flash-Schaltfläche einfügen wird eingeblendet.

2 Wählen Sie im Dialogfeld Flash-Schaltfläche einfügen die folgenden


Optionen:
• Wählen Sie in der Liste Stil die Option Abgefl. Rechteck - Bronze.
• Geben Sie unter Schaltflächentext Weitere Informationen (More Details) ein.
• Wählen Sie als Schrift Verdana oder eine andere Schrift.
• Geben Sie unter Größe 11 ein.
• Klicken Sie auf Anwenden, um die Flash-Schaltfläche im Dokument
anzuzeigen.
• Geben Sie unter Speichern unter als Dateiname myButton.swf ein.

Dreamweaver-Lehrgang 63
3 Klicken Sie auf OK, um das Dialogfeld zu schließen.
Das Flash-Schaltflächenobjekt erscheint im Dokument.

Flash-Schaltflächen in Dokumenten anzeigen


Die von Ihnen eingefügte Flash-Schaltfläche hat einen Rollover-Effekt.
In diesem Schritt spielen Sie die Schaltfläche ab, um den Effekt zu sehen.
1 Klicken Sie im Eigenschafteninspektor für die Flash-Schaltfläche auf
Abspielen, um die Schaltfläche im Dokument abzuspielen.
2 Bewegen Sie den Mauszeiger im Dokumentfenster über das Objekt,
um den Rollover-Effekt der Flash-Schaltfläche zu sehen.
3 Wenn Sie die Wiedergabe des Objekts unterbrechen möchten, klicken Sie
im Eigenschafteninspektor auf Stop.

Vorlagen erstellen
Mit Vorlagen können Sie Dokumente erstellen, die eine gemeinsame Struktur
und ein ähnliches Erscheinungsbild aufweisen. Vorlagen bieten sich an, wenn
Sie sicherstellen möchten, dass alle Seiten in einer Site bestimmte gemeinsame
Merkmale haben.
Nachdem Sie eine Vorlage auf mehrere Seiten angewandt haben, können Sie
diese Seiten ändern, indem Sie die Vorlage bearbeiten und dann neu auf die
Seiten anwenden. Dabei bleiben seitenspezifische Elemente (wie beispielsweise
die Beschreibung des zu verkaufenden Produkts) unverändert, die gemeinsamen
Vorlagenelemente (wie Navigationsleisten) werden jedoch auf allen Seiten
aktualisiert, die auf der Vorlage basieren.
Auf der Compass-Seite mit Reisezielen befinden sich Hyperlinks zu verschiedenen
Seiten mit Detailinformationen zu Orten, die Besucher der Site möglicherweise
als Reiseziele interessieren. In diesem Schritt erstellen Sie eine Vorlage von einer
vorhandenen Seite mit Reisedetails. Mit dieser Vorlage wird gewährleistet, dass die
Reiseinformationsseiten ein identisches Layout und Format aufweisen.

Aus vorhandenen Seiten Vorlagen erstellen


In diesem Teil erstellen Sie eine Vorlage aus einer vorhandenen Reiseseite.
Anschließend erstellen Sie anhand dieser Vorlage eine neue Reiseseite.
1 Doppelklicken Sie in der Liste Lokaler Ordner des Sitefensters auf das Symbol
für die Datei DW4_TravelDetail_surf.html, um die Datei zu öffnen.

64 Kapitel 1
2 Wählen Sie Datei > Als Vorlage speichern.
Das Dialogfeld Als Vorlage speichern erscheint auf dem Bildschirm.

Die vorhandenen Vorlagen travelDetail und travelDetail_v2 wurden für


die fertigen Reiseseiten der Compass-Site erstellt und darauf angewendet.
Sie erstellen nun eine eigene Version dieser Vorlage.
3 Ändern Sie im Feld Speichern unter den Vorlagennamen: Geben Sie
myTravelDetail ein und klicken Sie dann auf Speichern.
Das Dokument DW4_TravelDetail wird im Dokumentfenster durch ein neues
Dokument ersetzt. In der Titelleiste des Dokuments sehen Sie, dass das
Dokument einen Vorlagenbezeichner <<Vorlage>> und die Dateierweiterung
einer Dreamweaver-Vorlage (.dwt) hat.

Vorlagen modifizieren
Zu diesem Zeitpunkt ist die neue Vorlage ein genaue Kopie der Seite, von der
Sie die Vorlage gespeichert haben. Jede Vorlage enthält sowohl gesperrte als auch
bearbeitbare Bereiche. Die gesperrten Bereiche können nur in der Vorlage selbst
bearbeitet werden. Die bearbeitbaren Bereiche sind Platzhalter für den
spezifischen Inhalt der Seiten, auf die die Vorlage angewandt wird. In Ihrer
Vorlage können Sie das Logo und die Navigationsschaltflächen nicht bearbeiten.
Der Titel des Ziels, die zugehörige Banner-Werbung und die Beschreibung des
Ziels sind bearbeitbar.
Im ersten Schritt erstellen Sie bearbeitbare Bereiche in der Vorlage.
1 Klicken Sie in der Vorlage myTravelDetail.dwt im Dokumentfenster auf den
obersten Flash-Platzhalter, um ihn auszuwählen. In diesem Film wird der Titel
des Ziels angezeigt.

2 Wählen Sie Modifizieren > Vorlagen > Neuer bearbeitbarer Bereich.


Das Dialogfeld Neuer bearbeitbarer Bereich wird angezeigt.

Dreamweaver-Lehrgang 65
3 Geben Sie im Feld Name als Name für diesen Bereich der Vorlage titleCell
(Zelltitel) ein.

4 Klicken Sie auf OK.


Ein Vorlagenbereich wird erstellt. Wie Sie sehen, steht auf der Registerkarte
jetzt der Name für diesen Bereich der Vorlage. Der Platzhalter ist außerdem
von einer hellblauen Linie umgeben, die die Grenzen des bearbeitbaren
Bereichs kennzeichnet.
5 Wählen Sie im Dokumentfenster den Flash-Banner-Platzhalter aus.
Wählen Sie Modifizieren > Vorlagen > Neuer bearbeitbarer Bereich, um
diesen Abschnitt in einen bearbeitbaren Bereich in der Vorlage umzuwandeln.
6 Geben Sie im Feld Name des Dialogfelds Neuer bearbeitbarer Bereich adCell
(neueZelle) ein und klicken Sie auf OK.
Die Bezeichner der Vorlagenbereiche werden im Dokument angezeigt.
7 Wählen Sie im Dokumentfenster den gesamten Text in der ersten Zelle unter
der Banner-Werbung aus. Wählen Sie Modifizieren > Vorlagen > Neuer
bearbeitbarer Bereich, um diesen Abschnitt in einen bearbeitbaren Bereich
in der Vorlage umzuwandeln.
8 Geben Sie im Feld Name des Dialogfelds Neuer bearbeitbarer Bereich als
Name textCell (Zelltext) ein und klicken Sie auf OK.
9 Wählen Sie im Dokumentfenster den gesamten Text in der zweiten Zelle unter
der Banner-Werbung aus. Wählen Sie Modifizieren > Vorlagen > Neuer
bearbeitbarer Bereich, um diesen Abschnitt zu einem bearbeitbaren Bereich in
der Vorlage zu machen.
10 Geben Sie im Feld Name des Dialogfelds Neuer bearbeitbarer Bereich als
Name textCell2 (Zelltext2) ein und klicken Sie auf OK.
11 Wählen Sie Datei > Speichern, um die Vorlage zu speichern.

Wenden Sie die Vorlage auf eine neue Seite an.


Nachdem Sie die bearbeitbaren Bereiche in der Vorlage definiert haben, erstellen
Sie im nächsten Schritt mit der Vorlage eine Seite mit Detailinformationen für
eine Reise nach Neuseeland.
1 Wählen Sie Datei > Neu von Vorlage, um ein neues Dokument zu öffnen.

66 Kapitel 1
2 Wählen Sie im Dialogfeld Vorlage auswählen MyTravelDetail und klicken Sie
dann auf Auswählen, um die Vorlage auszuwählen, die Sie auf die neue Seite
anwenden wollen.
Die Vorlage wird auf das neue Dokument angewendet.

Diese Seite enthält dieselben Bereiche und denselben Inhalt wie die von Ihnen
erstellte Vorlage.
Anmerkung: Wenn Sie den Mauszeiger auf einen nicht bearbeitbaren Bereich dieser
Vorlage (z. B. auf das Logo oder die Navigationsschaltflächenbereiche) bewegen,
verändert sich die Gestalt des Mauszeigers, ein Hinweis darauf, dass Sie nicht auf
diese gesperrten Bereiche zugreifen können.

3 Speichern Sie das Dokument und nennen Sie die Datei


myTravelDetail_mtnBike.html.

Eine Seite bearbeiten, die mit einer Vorlage erstellt wurde


In diesem Schritt bringen Sie das Dokument myTravelDetail_mtnBike.html auf
den neuesten Stand. Sie bearbeiten die bearbeitbaren Bereiche mit Elementen und
Text zum Mountainbiking in Neuseeland.
1 Klicken Sie im Dokumentfenster auf den Flash-Platzhalter im Bereich titleCell
(Zelltitel), um das Objekt auszuwählen, das Sie ersetzen möchten.
2 Klicken Sie im Eigenschafteninspektor im Feld Datei auf das Ordnersymbol.
Wählen Sie im Dialogfeld, das nun angezeigt wird, Assets/swfs und im
Anschluss daran die Datei text_mtnBike.swf.

Dreamweaver-Lehrgang 67
3 Klicken Sie im Bereich adCell (neueZelle) auf den Flash-Platzhalter, um das
Objekt auszuwählen, das Sie ersetzen möchten.
4 Klicken Sie im Eigenschafteninspektor im Feld Datei auf das Ordnersymbol.
Wählen Sie im Dialogfeld, das nun angezeigt wird, Assets/swfs und im
Anschluss daran die Datei bikeAd.swf.
5 Wählen Sie Datei > Öffnen. Wählen Sie DW4_MtnBikeText.txt, um ein
Dokument zu öffnen, das Text für dieses Ziel enthält.
6 Kopieren Sie in der Datei DW4_MtnBikeText.txt den Absatz unter Zelle 1.
Ersetzen Sie im Dokument myTravelDetail_mtnBike den aktuellen Text im
Bereich der Textzelle 1, indem Sie ihn auswählen und dann den kopierten Text
einfügen.
7 Kopieren Sie in der Datei DW4_MtnBikeText.txt den Absatz unter Zelle 2.
Ersetzen Sie im Dokument myTravelDetail_mtnBike den aktuellen Text im
Bereich der Textzelle 2, indem Sie ihn auswählen und dann den kopierten Text
einfügen.
Die Reisedetailinformationen werden aktualisiert.
8 Schließen Sie die Datei DW4_MtnBikeText.txt.
9 Geben Sie in der Dreamweaver-Symbolleiste im Feld Titel New Zealand
biking (Mountain-Biking in Neuseeland) ein.
10 Speichern Sie das Dokument.

Sites überprüfen
Bevor Sie Seiten auf einem Remote-Server ablegen, sollten Sie Ihre Dateien
überprüfen. Sie wissen bereits, wie Sie Seiten durch Anzeigen einer Vorschau
in einem Browser testen. Nun lernen Sie andere Dreamweaver-Werkzeuge
kennen, die Ihnen für das Erstellen von Anmerkungen zu Dateien und für
das Testen von Seiten zur Verfügung stehen.
Zunächst erfahren Sie, wie Sie Design Notes in Dateien einfügen. Später werden
Sie sehen, wie Sie einen Bericht für Dateien in der Site erstellen.

Design Notes erstellen


Design Notes sind eine praktische Einrichtung, um Ihre Site zu verwalten.
Mit dieser Funktion fügen Sie Kommentare in das Sitefenster Ihres Dokuments
ein. Mit Design Notes können Sie Zeitpläne für das Produktionsteam aufstellen,
nachträgliche Anmerkungen einfügen oder Einzelheiten zu Dateien oder der Site
mit Kollegen austauschen. In diesem Schritt erstellen Sie eine Design Note als
nachträgliche Anmerkung zu einer Änderung an einer Seite Ihrer Website.

68 Kapitel 1
1 Wählen Sie im Sitefenster von Dreamweaver (Site > Dateien der Site)
im Fenster Lokaler Ordner die Datei DW4_Destinations.html aus.
2 Wählen Sie im Hauptmenü die Optionen Datei > Design Notes.
Das Dialogfeld Design Notes wird eingeblendet.
3 Wählen Sie in der Registerkarte Basis-Info im Popupmenü Status die Option
Überprüfen.
4 Klicken Sie auf das Kalendersymbol, um das Datum in das Feld Anmerkungen
einzufügen.
5 Klicken Sie in das Feld Anmerkungen und geben Sie Muss noch eine Seite
erstellen und Hyperlinks einfügen ein.
6 Wählen Sie die Option Anzeigen, wenn Datei geöffnet ist aus, damit die
Design Note beim Öffnen der Seite automatisch geöffnet wird.
7 Klicken Sie auf OK, um das Dialogfeld zu schließen.
In der Spalte Anmerkungen des Fensters Lokaler Ordner wird ein Design
Note-Symbol angezeigt.

Dreamweaver-Lehrgang 69
8 Wählen Sie im Sitefenster DW4_Destinations.html aus und öffnen Sie
die Datei.
Das Dokument und die zugehörige Design Note werden geöffnet und Sie
können schnell erkennen, welche Aktionen für diese Datei erforderlich sind.

Siteberichte
Sie können Siteberichte ausführen, um HTML-Dateibedingungen zu überprüfen
und den Arbeitsablauf zu verwalten. Sie können Berichte auf Dokument-,
Ordner- oder Siteebene ausführen. In diesem Schritt führen Sie einen Bericht aus,
um zu prüfen, ob sich in Ihrer Site unbenannte Dokumente befinden.
1 Wählen Sie Site > Berichte.
Das Dialogfeld Berichte wird eingeblendet.
2 Wählen Sie im Dialogfeld Berichte im Popupmenü Bericht über die Option
Ganze lokale Site aus und wählen Sie unter HTML-Berichte die Option
Unbenanntes Dokument.
3 Klicken Sie auf Ausführen, um einen Bericht auszuführen.
In dem nun angezeigten Dialogfeld Ergebnisse werden, sofern vorhanden,
alle Dokumente ohne Seitentitel aufgeführt.
4 Klicken Sie in der Liste Datei auf die Datei, um sie auszuwählen.
Das Feld Detailbeschreibung wird mit detaillierten Warninformationen
aktualisiert.
5 Klicken Sie auf Datei öffnen, um die Datei zu öffnen und das Problem
zu beheben.
Die Datei wird geöffnet.
6 Geben Sie in das Feld Titel auf der Symbolleiste von Dreamweaver Featured
Destinations ein.
7 Speichern und schließen Sie die Datei, wenn Sie fertig sind.
8 Schließen Sie das Dialogfeld Ergebnisse.

Die nächsten Schritte


Herzlichen Glückwunsch, Sie haben den Dreamweaver-Lehrgang erfolgreich
abgeschlossen! Sie wissen nun, wie Sie Seiten gestalten, Inhalt einfügen und Ihre
Seiten testen. Wenn Sie möchten, können Sie weitere Seiten und Hyperlinks für
die Compass-Site erstellen. Sie verfügen über alle notwendigen Kenntnisse zum
Fertigstellen der Seiten (die fertigen Seiten können als Referenz dienen). Zeigen
Sie Ihre Seiten nach dem Aktualisieren in einer Vorschau an, um die Rollover-
Effekte und Hyperlinks zu testen.

70 Kapitel 1
Wenn Sie mehr über Funktionen von Dreamweaver erfahren möchten, sehen
Sie sich die Dreamweaver-Lektionen an. Wählen Sie dazu im Dreamweaver-
Hauptmenü Hilfe > Lektionen und wählen Sie die gewünschte Lektion aus.
Wenn Sie über Dreamweaver und Fireworks verfügen, finden Sie im
Dreamweaver und Fireworks-Lehrgang mehr darüber, wie Sie die Schnittstelle
zwischen diesen beiden Programmen nutzen können.
Ausführlichere Informationen zur Verwendung von HTML-Code, JavaScript-
Code oder Cascading Style Sheets finden Sie in der Sekundärliteratur, die Sie
mit Dreamweaver erhalten haben. Wählen Sie dazu die Option Fenster >
Referenz.

Dreamweaver-Lehrgang 71
72 Kapitel 1
2

KAPITEL 2
Dreamweaver – Erste Schritte
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Um Ihre Arbeit mit Macromedia Dreamweaver zu beginnen, öffnen oder erstellen


Sie einfach ein HTML-Dokument. Damit Sie möglichst effizient mit dem
Programm arbeiten können, ist es jedoch hilfreich, die grundlegenden Konzepte
des Dreamweaver-Arbeitsbereichs zu verstehen und zu wissen, wie Sie Optionen
wählen, Inspektoren und Paletten verwenden und Einstellungen vornehmen,
die für Ihren Arbeitsstil am besten geeignet sind.

73
Der Dreamweaver-Arbeitsbereich
Der Dreamweaver-Arbeitsbereich ist für unterschiedliche Arbeitsweisen und
verschiedene Kenntnisstufen gleichermaßen geeignet. Nachstehend sind einige
der Komponenten aufgeführt, die Sie am häufigsten verwenden werden:

Symbolleiste

Objekt- Kontext-
palette menü

Dokumentfenster

Tag-Selektor Launcher-
Leiste

Eigenschafteninspektor

• Wenn Sie ein Dokument erstellen und bearbeiten, wird es im


Dokumentfenster angezeigt.
• Die Launcher-Leiste unten rechts im Dokumentfenster enthält Schaltflächen,
mit denen die am häufigsten verwendeten Inspektoren und Paletten ein- und
ausgeblendet werden können. Die Schaltflächen auf der Launcher-Leiste sind
auch im Mini-Launcher zu finden, einer schwebenden Palette, die Sie über
dem Menü Fenster einblenden. Sie können festlegen, welche Schaltflächen
auf der Launcher-Leiste und im Mini-Launcher erscheinen sollen.
• Die Symbolleiste enthält Schaltflächen und Popupmenüs, mit denen Sie die
Anzeige des Dokumentfensters ändern und Ansichtsoptionen einstellen sowie
häufig verwendete Operationen wie das Anzeigen einer Vorschau im Browser
durchführen können.
• Über Kontextmenüs können Sie schnell Befehle aufrufen, die sich auf die
aktuelle Auswahl oder den aktuellen Bereich beziehen. Um ein Kontextmenü
anzuzeigen, klicken Sie mit der rechten Maustaste (Windows) bzw. bei
gedrückter <Strg>-Taste (Macintosh) auf ein Element in einem Fenster.

74 Kapitel 2
• Die Objektpalette enthält Schaltflächen zum Erstellen und Einfügen
verschiedener Objekttypen, wie z. B. Bilder, Tabellen, Ebenen und Frames.
Außerdem können Sie in der Standard- oder Layoutansicht arbeiten und die
Zeichenwerkzeuge der Layoutansicht verwenden.
• Im Eigenschafteninspektor werden Eigenschaften für ausgewählte Objekte
oder Textstellen angezeigt. Sie können diese Eigenschaften hier ändern.
(Welche Eigenschaften im Inspektor angezeigt werden, hängt von dem
jeweils ausgewählten Objekt oder Text ab.)
• In Dreamweaver finden Sie zahlreiche andere Inspektoren, Paletten und
Fenster, die hier nicht beschrieben sind, wie z. B. die Verlaufspalette und den
Codeinspektor. Viele dieser Elemente können "angedockt" werden, d. h.,
Sie können Fenster, Inspektoren und Paletten im Registerformat
zusammenfassen.
Fenster, Inspektoren und Paletten werden in Dreamweaver über das Menü Fenster
geöffnet. Wenn neben einem Element im Menü Fenster ein Häkchen angezeigt
wird, ist dieses Element gerade geöffnet (es kann jedoch hinter anderen Fenstern
verborgen sein). Um ein ausgeblendetes Element einzublenden, wählen Sie den
Namen des jeweiligen Elements im Menü.
Wenn neben einer Palette oder einem Inspektor ein Häkchen zu sehen ist,
die Palette oder der Inspektor allerdings nicht angezeigt wird, wählen Sie
Fenster > Paletten anordnen.

Die verschiedenen Ansichten in


Dreamweaver
Sie haben in Dreamweaver mehrere Möglichkeiten, mit Dokumenten zu arbeiten:
Sie können die Entwurfsansicht, Codeansicht oder eine kombinierte Entwurfs-/
Codeansicht für Ihr Dokument verwenden. Die jeweilige Ansicht wählen Sie über
die Dreamweaver-Symbolleiste. Weitere Informationen finden Sie unter
Symbolleiste verwenden.

Codeansicht
Wenn Sie Dokumente erstellen und bearbeiten, wird in Dreamweaver
automatisch der zugrunde liegende HTML-Quellcode generiert. Sie können
diesen Code mit einem der Codeeditoren von Dreamweaver anzeigen lassen und
bearbeiten. Dazu verwenden Sie entweder die Codeansicht im Dokumentfenster
oder den Codeinspektor. Weitere Informationen finden Sie unter Codeansicht
(oder Codeinspektor) verwenden.

Dreamweaver – Erste Schritte 75


Entwurfsansicht
Die Entwurfsansicht von Dreamweaver zeigt nicht den zugrunde liegenden Code,
sondern stellt das Dokument visuell dar. Wenn Sie in der Entwurfsansicht
arbeiten, stehen Ihnen zwei Ansichten zur Verfügung: die Layoutansicht und
die Standardansicht. Diese Ansichten werden über die Objektpalette auf der
Registerkarte Ansicht ausgewählt.
In der Layoutansicht können Sie ein Seitenlayout entwerfen und Grafiken, Text
und anderes Material einfügen. Weitere Informationen finden Sie unter
Seitenlayouts entwerfen.
In der Standardansicht können Sie Ebenen einfügen, Frame-Dokumente und
Tabellen erstellen sowie andere Funktionen verwenden, die in der Layoutansicht
nicht zur Verfügung stehen. Die Standardansicht wird über die Schaltfläche
Standardansicht der Objektpalette aufgerufen.

Das Dokumentfenster
In der Entwurfsansicht wird das aktuelle Dokument ungefähr so im
Dokumentfenster angezeigt, wie es in einem Webbrowser dargestellt würde. In der
Titelleiste des Dokumentfensters stehen der Seitentitel sowie in Klammern der
Name des Stammordners und der Dateiname. Wenn die Datei ungesicherte
Änderungen enthält, wird zudem ein Sternchen angezeigt.
Die Statusleiste am unteren Rand des Dokumentfensters enthält zusätzliche
Informationen über das Dokument, das Sie gerade erstellen.

Dokumentgröße und
geschätzte Download-Zeit

Popupmenü Launcher-
Tag-Selektor Fenstergröße Leiste

Im Tag-Selektor werden die übergeordneten HTML-Tags angezeigt, die


ausgewählte Textstellen oder Objekte steuern. Klicken Sie auf eines dieser Tags,
um seinen Inhalt im Dokumentfenster zu markieren. Wenn Sie auf <body>
klicken, wird der Hauptteil des Dokuments markiert.
Über das Popupmenü Fenstergröße können Sie das Dokumentfenster auf
voreingestellte oder benutzerdefinierte Größen einstellen.
Rechts neben dem Popupmenü Fenstergröße sehen Sie die geschätzte
Dokumentgröße und Download-Zeit für die Seite, sowie alle zu diesem
Dokument gehörenden Dateien, wie z. B. Bilder und anderes Material. Weitere
Informationen finden Sie unter Download-Zeit und -Größe überprüfen

76 Kapitel 2
Am unteren Rand des Dokumentfensters befindet sich die Launcher-Leiste.
Über die standardmäßig angezeigten Schaltflächen der Launcher-Leiste können
Sie das Sitefenster, die Elementpalette, die HTML-Stilpalette, die CSS-Stilpalette,
die Verhaltenspalette, die Verlaufspalette und den Codeinspektor einblenden.
Im Die Launcher-Leiste benutzerdefiniert anpassen wird beschrieben, wie Sie
Schaltflächen definieren, die auf der Launcher-Leiste (und auf dem schwebenden
Mini-Launcher) angezeigt werden sollen.

Das Dokumentfenster vergrößern oder verkleinern


In der Statusleiste des Dokumentfensters werden die aktuellen Abmessungen
des Dokumentfensters (in Pixeln) angezeigt. Wenn Sie auf die Fenstergröße
klicken, wird in Dreamweaver das Popupmenü Fenstergröße geöffnet, in dem Sie
die Fenstergröße entsprechend der verschiedenen gängigen Bildschirmgrößen
einstellen können. Sie können das Dokumentfenster auf eine der vordefinierten
Größen im Popupmenü einstellen, die vordefinierten Größen bearbeiten oder
neue Größen festlegen, und so sicherstellen, dass die Seite für eine bestimmte
Größe geeignet ist.

Anmerkung: Die Fenstergröße ist die innere Abmessung des Browserfensters ohne
Rahmen. Die Bildschirmgröße steht in Klammern. So sollten Sie beispielsweise die Option
536 x 196 (640 x 480, Standard) als Fenstergröße verwenden, wenn Besucher der
Site mit großer Wahrscheinlichkeit Microsoft Internet Explorer oder Netscape Navigator
mit den Standardeinstellungen auf einem Bildschirm mit einer Auflösung von 640 x 480
verwenden.

So ändern Sie die Größe des Dokumentfensters auf eine voreingestellte Größe:

Wählen Sie im Popupmenü unten im Dokumentfenster eine der Größen.

So ändern Sie die im Popupmenü Fenstergröße aufgeführten Werte:

1 Wählen Sie im Popupmenü Fenstergröße die Option Größen bearbeiten.


2 Klicken Sie in der Liste Fenstergrößen auf einen Wert für Höhe oder Breite
und geben Sie einen neuen Wert ein.
Sie können das Dokument auch auf eine bestimmte Breite einstellen und die
Höhe unverändert lassen, indem Sie einen der Werte für die Höhe auswählen
und ihn löschen.

Dreamweaver – Erste Schritte 77


3 Klicken Sie in das Feld Beschreibung und geben Sie einen aussagekräftigen
Text für eine bestimmte Größe ein.
4 Klicken Sie auf OK, um die Änderung zu speichern und zum
Dokumentfenster zurückzukehren.

So fügen Sie dem Popupmenü Fenstergröße eine neue Größe hinzu:

1 Wählen Sie im Popupmenü Fenstergröße die Option Größen bearbeiten.


2 Klicken Sie in der Spalte Breite auf die leere Fläche unter dem letzten Wert.
3 Geben Sie Werte für Breite und Höhe ein. Wenn Sie nur die Breite oder nur
die Höhe einstellen möchten, lassen Sie einfach das entsprechende andere
Feld leer.
4 Klicken Sie in das Feld Beschreibung und geben Sie einen aussagekräftigen
Text für die hinzugefügte Größe ein.
5 Klicken Sie auf OK, um die Änderung zu speichern und zum
Dokumentfenster zurückzukehren.
Beispielsweise können Sie neben dem Eintrag für einen Bildschirm mit
einer Auflösung von 800 x 600 die Beschreibung SVGA oder Standard-PC
eingeben. Ein Bildschirm mit einer Auflösung von 832 x 624 kann
die Beschreibung 17-Zoll-Mac erhalten. Beachten Sie, dass die meisten
Bildschirme auf eine Vielzahl von Pixel-Auflösungen eingestellt werden
können.

Fenster und Paletten minimieren und wiederherstellen


(nur PC)
Sie können alle geöffneten Dreamweaver-Fenster – Dokumentfenster, Inspektoren
und Paletten – minimieren und wiederherstellen.
• Um alle Dreamweaver-Fenster zu minimieren, drücken Sie <Umschalt>+<F4>
oder wählen Sie Fenster > Alle minimieren.
• Um alle Dreamweaver-Fenster wiederherzustellen, drücken Sie
<Alt>+<Umschalt>+<F4>. Wenn Sie mindestens ein Fenster geöffnet haben,
können Sie Fenster > Alle wiederherstellen wählen, um alle Fenster
wiederherzustellen.

Voreinstellungen für die Statusleiste definieren


Mit den Voreinstellungen für die Statusleiste legen Sie die Optionen für die
Statusleiste unten im Dokumentfenster fest. Wählen Sie Bearbeiten >
Voreinstellungen und dann die Kategorie Statusleiste.
Fenstergrößen ermöglicht Ihnen, die Fenstergrößen anzupassen, die im
Popupmenü der Statusleiste angezeigt werden. Weitere Informationen finden Sie
unter Das Dokumentfenster vergrößern oder verkleinern.

78 Kapitel 2
Verbindungsgeschwindigkeit legt die zum Ermitteln der Download-Zeit
verwendete Verbindungsgeschwindigkeit (in Kilobit pro Sekunde) fest. Die
Download-Größe für die Seite wird in der Statusleiste angezeigt. Die Download-
Größe für Bilder und andere Elemente wird im Eigenschafteninspektor angezeigt,
wenn ein Bild ausgewählt ist.
Mini-Launcher in Statusleiste anzeigen bewirkt, dass Dreamweaver die Launcher-
Leiste unten im Dokumentfenster anzeigt. Mit den Schaltflächen der Launcher-
Leiste können Sie Fenster, Paletten und Inspektoren öffnen. Der Mini-Launcher
enthält die gleichen Schaltflächen (mit Text) und Funktionen. Weitere
Informationen finden Sie unter Die Launcher-Leiste benutzerdefiniert anpassen.

Launcher-Leiste verwenden
Mit den Schaltflächen der Launcher-Leiste können Sie verschiedene Paletten,
Fenster und Inspektoren öffnen und schließen. Sie können außerdem den Mini-
Launcher (eine schwebende Palette mit den gleichen Schaltflächen) einblenden.

So blenden Sie den Mini-Launcher ein oder aus:

Wählen Sie Fenster > Launcher.


Wenn die Launcher-Leiste nicht am unteren Rand des Dokumentfensters
eingeblendet wird, markieren Sie in den Voreinstellungen unter der Kategorie
Statusleiste die Option Mini-Launcher in Statusleiste anzeigen.

So ändern Sie die Ausrichtung des Mini-Launchers von horizontal zu vertikal:

Klicken Sie auf das Ausrichtungssymbol in der unteren rechten Ecke.


Informationen zu den Elementen, die Sie mit den standardmäßigen Launcher-
Schaltflächen öffnen können, finden Sie in den folgenden Abschnitten Das
Sitefenster, HTML-Stile zur Formatierung von Text verwenden, CSS-Stilpalette
verwenden, Die Verhaltenspalette verwenden, Tasks automatisieren, Codeansicht
(oder Codeinspektor) verwenden, Elemente verwalten und einfügen, sowie unter
Referenzpalette von Dreamweaver verwenden.

Die Launcher-Leiste benutzerdefiniert anpassen


In den Voreinstellungen für Paletten können Sie festlegen, welche Elemente
auf der Launcher-Leiste und im Mini-Launcher angezeigt werden.

Dreamweaver – Erste Schritte 79


So legen Sie fest, welche Schaltflächen auf der Launcher-Leiste und im Mini-
Launcher angezeigt werden:

1 Wählen Sie Bearbeiten > Voreinstellungen und dann die Kategorie Paletten.
Die Elemente, die im Mini-Launcher und auf der Launcher-Leiste angezeigt
werden, sind im Fenster In Launcher anzeigen aufgeführt.
2 Klicken Sie auf die Schaltfläche mit dem Pluszeichen (+), um dem Mini-
Launcher und der Launcher-Leiste ein Element hinzuzufügen.
3 Markieren Sie ein Element und klicken Sie auf die Schaltfläche mit dem
Minuszeichen (–), um dieses Element aus dem Mini-Launcher und der
Launcher-Leiste zu entfernen.
4 Markieren Sie ein Element in der Liste und klicken Sie auf eine
Pfeilschaltfläche, um die Reihenfolge der Elemente im Mini-Launcher oder
auf der Launcher-Leiste zu ändern.
Wenn Sie ein Element im Launcher z. B. nach rechts verschieben möchten,
verschieben Sie es in der Liste nach unten.
5 Klicken Sie auf OK.
Im Mini-Launcher und auf der Launcher-Leiste werden jetzt die angegebenen
Elemente angezeigt.

Symbolleiste verwenden
Die Symbolleiste von Dreamweaver enthält Schaltflächen, mit denen Sie schnell
zwischen verschiedenen Ansichten eines Dokuments umschalten können.
Zur Verfügung stehen Code- und Entwurfsansicht sowie eine dritte Ansicht
mit kombinierter Code- und Entwurfsansicht. Die Symbolleiste enthält
außerdem einige häufig verwendete Befehle im Zusammenhang mit der von
Ihnen gewählten Ansicht und dem Status des Dokuments. Die Elemente im
Menü Optionen (die Schaltfläche auf der rechten Seite) ändern sich je nach
der Ansicht, die Sie wählen.

Codeansicht Datei- status


Vorschau
Entwurfs-ansicht Dokument-titel in Browser Referenz Menü Option

Code- und Entwurfsansicht Liste aller


Entwurfsansicht aktualisieren Funktionen

• Um die Symbolleiste ein- oder auszublenden, wählen Sie Ansicht >


Symbolleiste.
• Um nur den Code im Dokumentfenster anzuzeigen, klicken Sie auf die
Schaltfläche Codeansicht einblenden.

80 Kapitel 2
• Um eine Ansicht anzuzeigen, die Codeansicht und Entwurfsansicht umfasst,
klicken Sie auf die Schaltfläche Code- und Entwurfsansicht einblenden.
Wenn Sie diese Ansicht auswählen, wird im Menü Ansicht die Option
Entwurfsansicht im Vordergrund verfügbar. Mit dieser Option legen Sie fest,
welche Ansicht an oberster Stelle im Dokumentfenster angezeigt wird.
• Um nur die Entwurfsansicht anzuzeigen, klicken Sie auf die Schaltfläche
Entwurfsansicht anzeigen.
Sie können diese Ansichten auch über das Menü Ansicht auswählen.
• Im Feld Titel können Sie einen Titel für Ihr Dokument eingeben.
Wenn das Dokument bereits einen Titel hat, wird dieser in diesem Feld
angezeigt.
• Klicken Sie auf die Schaltfläche Dateistatusmenü, um das Popupmenü
Dateistatus anzuzeigen.
• Um eine Vorschau des Dokuments in einem Browser anzuzeigen oder das
Dokument im Browser zu testen, klicken Sie auf die Schaltfläche Vorschau/
Debug im Browser und wählen Sie einen der Browser aus dem Popupmenü.
Wählen Sie Browserliste bearbeiten, um die im Menü aufgeführten Browser zu
ändern oder Browser hinzuzufügen.
• Klicken Sie auf die Schaltfläche Entwurfsansicht aktualisieren, um Ihre
Entwurfsansicht zu aktualisieren.
• Klicken Sie auf die Schaltfläche Referenz, um die Referenzpalette zu öffnen.
Die Referenzpalette enthält Informationen zu HTML-, CSS- und JavaScript-
Code. Weitere Informationen finden Sie unter Referenzpalette von
Dreamweaver verwenden.
• Klicken Sie auf die Schaltfläche Liste aller Funktionen, um durch Ihren Code
zu navigieren. Weitere Informationen finden Sie unter JavaScript-Code
debuggen.
• Klicken Sie auf die Schaltfläche Optionsmenü, um das Menü Optionen
anzuzeigen.
Im Menü Optionen werden für jede Ansicht unterschiedliche Optionen
aufgeführt. Weitere Informationen über Optionen für die Codeansicht finden
Sie unter Codeansicht (oder Codeinspektor) verwenden. Weitere
Informationen über Optionen für die Entwurfsansicht finden Sie unter
Seitenlayouts entwerfen.
Anmerkung: Wenn im Dokumentfenster beide Ansichten angezeigt werden, können
Sie auf das jeweilige Menü Optionen zugreifen, indem Sie auf die gewünschte Ansicht
und anschließend auf das Menü Optionen klicken.

Dreamweaver – Erste Schritte 81


Kontextmenüs verwenden
In Dreamweaver stehen Ihnen zahlreiche Kontextmenüs zur Verfügung, mit
denen Sie schnell und einfach die wichtigsten Befehle und Eigenschaften für
das aktuelle Objekt oder Fenster aufrufen können. In Kontextmenüs befinden
sich nur Befehle für die aktuelle Auswahl.

So verwenden Sie ein Kontextmenü:

1 Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter <Strg>-
Taste (Macintosh) auf das Objekt oder Fenster.
Das Kontextmenü für das ausgewählte Objekt oder Fenster wird angezeigt.
2 Wählen Sie den gewünschten Befehl aus dem Kontextmenü aus und lassen Sie
die Maustaste los.

Die Objektpalette
Die Objektpalette enthält Schaltflächen zum Erstellen und Einfügen von
Objekten wie z. B. Tabellen, Ebenen und Bilder. Wählen Sie Fenster > Objekte,
um die Objektpalette ein- oder auszublenden.

So fügen Sie ein Objekt ein:

Klicken Sie in der Objektpalette auf die ensprechende Schaltfläche oder ziehen Sie
das Symbol der Schaltfläche auf das Dokumentfenster. Je nach Objekt wird ein
Dialogfeld zum Einfügen des Objekts angezeigt, in dem Sie aufgefordert werden,
die gewünschte Datei oder das gewünschte Objekt auszuwählen oder einzufügen.

82 Kapitel 2
So überspringen Sie dieses Dialogfeld und fügen ein leeres Platzhalterobjekt ein:

Halten Sie die <Strg>-Taste (Windows) bzw. die Wahltaste (Macintosh) gedrückt,
während Sie das Objekt einfügen. (Wenn Sie beispielsweise einen Platzhalter für
ein Bild einfügen möchten, ohne eine Bilddatei anzugeben, halten Sie die <Strg>-
Taste bzw. die Wahltaste gedrückt und klicken Sie auf die Schaltfläche Bild.)
Anmerkung: Nicht alle Dialogfelder können auf diese Weise übersprungen werden. Für
bestimmte Objekte wie Navigationsleisten, Ebenen, Flash-Schaltflächen, Frames usw.
können keine Platzhalter eingefügt werden.

Die Objektpalette enthält standardmäßig sieben Kategorien: Zeichen, Allgemein,


Formulare, Frames, Head, Unsichtbare Elemente und Spezial. Außerdem finden
Sie in dieser Palette Schaltflächen zum Wechseln zwischen der Standard- und
Layoutansicht.

• Die Kategorie Zeichen enthält Sonderzeichen, wie beispielsweise das


Copyright-Symbol, typographische Anführungszeichen und Symbole für
Marken. Beachten Sie, dass diese Symbole in Browsern (Netscape und IE)
vor Version 3.0 unter Umständen nicht korrekt angezeigt werden.
• Die Kategorie Allgemein enthält Schaltflächen zum Erstellen und Einfügen
der am häufigsten verwendeten Objekte, wie z. B. Bilder, Tabellen und Ebenen.
• Die Kategorie Formulare enthält Schaltflächen zum Erstellen von Formularen
und zum Einfügen von Formularelementen.
• Die Kategorie Frames enthält die üblichsten Frameset-Strukturen.
• Die Kategorie Head enthält Schaltflächen, mit denen Sie verschiedene head-
Elemente hinzufügen können, wie beispielsweise die Tags meta, keywords und
base.

Dreamweaver – Erste Schritte 83


• Die Kategorie Unsichtbare Elemente enthält Schaltflächen, mit denen Sie
Objekte erstellen können, die im Browserfenster nicht sichtbar sind. Dazu
gehören beispielsweise benannte Anker. Wählen Sie Ansicht > Visuelle
Hilfsmittel > Unsichtbare Elemente, um die Symbole anzuzeigen, mit denen
die Position dieser Objekte gekennzeichnet wird. Klicken Sie im
Dokumentfenster auf die Symbole für die unsichtbaren Elemente, um die
Objekte auszuwählen und ihre Eigenschaften zu ändern. Weitere
Informationen finden Sie unter Unsichtbare Elemente.
• Die Kategorie Spezial enthält Schaltflächen zum Einfügen spezieller Elemente
wie z. B. Java-Applets, Plug-Ins und ActiveX-Objekte. Weitere Informationen
finden Sie unter Medien einfügen.
• Im Abschnitt Ansicht der Objektpalette können Sie zwischen Standard-
(Vorgabe) und Layoutansicht wählen. Wenn die Layoutansicht ausgewählt ist,
können Sie auch die Layout-Tools Layoutzelle zeichnen und Layouttabelle
zeichnen auswählen. Weitere Informationen finden Sie in Kapitel 6,
„Seitenlayout entwerfen“.
Über das Popupmenü am oberen Palettenrand können Sie die Kategorie wechseln.
Sie können die Objekte in der Palette ändern oder eigene Objekte erstellen.
Weitere Informationen finden Sie unter Objektpalette modifizieren und Einfache
Objekte erstellen. Genaue Informationen zu den Optionen der einzelnen Paletten
finden Sie in den entsprechenden Themen der Dreamweaver-Hilfe.
Einige Optionen unter den allgemeinen Voreinstellungen wirken sich auf
die Objektpalette aus. Sie können diese Einstellungen ändern, indem Sie
Bearbeiten > Voreinstellungen und anschließend Allgemein wählen.
• Wenn Sie Objekte wie Bilder, Tabellen, Skripte und head-Elemente einfügen,
werden Sie in einem Dialogfeld aufgefordert, zusätzliche Informationen
anzugeben. Soll dieses Dialogfeld nicht angezeigt werden, entfernen Sie die
Markierung im Kontrollkästchen Beim Einfügen von Objekten Dialog
anzeigen,oder halten Sie beim Erstellen des Objekts die <Strg>-Taste gedrückt.
Wenn Sie ein Objekt einfügen, während diese Option deaktiviert ist, erhält das
Objekt die Standardattributwerte. Sie können die Eigenschaften des Objekts
nach dem Einfügen mit dem Eigenschafteninspektor ändern.
• In den Voreinstellungen für die Objektpalette können Sie wählen, ob der
Inhalt der Objektpalette nur mit Text, nur mit Symbolen oder mit Text und
Symbolen angezeigt wird.

Eigenschafteninspektor verwenden
Im Eigenschafteninspektor können Sie die Eigenschaften für das aktuell
ausgewählte Seitenelement aufrufen und bearbeiten. (Ein Seitenelement ist ein
Objekt oder Text.) Seitenelemente können entweder im Dokumentfenster oder
im Codeinspektor ausgewählt werden.

84 Kapitel 2
Wählen Sie Fenster > Eigenschaften, um den Eigenschafteninspektor ein- oder
auszublenden.

Die meisten Änderungen, die Sie an Eigenschaften vornehmen, werden sofort im


Dokumentfenster wiedergegeben. (Bei einigen Eigenschaften werden Änderungen
erst übernommen, wenn Sie auf einen Bereich außerhalb der Textfelder zur
Eigenschaftsbearbeitung klicken oder die Eingabe- oder Tabulatortaste drücken,
um zu einer anderen Eigenschaft zu wechseln.)
Der Inhalt des Eigenschafteninspektors hängt vom ausgewählten Element ab.
Sie können Informationen zu bestimmten Eigenschaften aufrufen, indem Sie
im Dokumentfenster ein Element auswählen und dann oben rechts im
Eigenschafteninspektor auf das Fragezeichen klicken.
Der Eigenschafteninspektor zeigt zunächst nur die am häufigsten verwendeten
Eigenschaften des ausgewählten Elements an. Klicken Sie auf den
Erweiterungspfeil in der unteren rechten Ecke des Eigenschafteninspektors,
um weitere Eigenschaften des Elements zu sehen. (In einigen Fällen werden auch
im erweiterten Eigenschafteninspektor bestimmte verdeckte Eigenschaften nicht
angezeigt. Verwenden Sie dann den Codeinspektor oder die Codeansicht, um den
Code dieser Eigenschaften manuell anzuzeigen.)

Andockbare, schwebende Palettenverwenden


Die meisten Paletten in Dreamweaver können angedockt werden, d. h.,
Sie können sie zu einer einzelnen schwebenden Palette mit mehreren
Registerkarten kombinieren. Dadurch können Sie ganz einfach auf die benötigten
Informationen zugreifen, ohne dass Ihr Arbeitsbereich unübersichtlich wird.
(Launcher, Eigenschafteninspektor und Sitefenster können nicht verankert
werden.) Paletten und Inspektoren werden nun auch automatisch zusammen
an den Bildschirmrändern oder am Dokumentfenster ausgerichtet und verankert.
Dadurch wird es leichter, die verschiedenen schwebenden Paletten und Fenster
in Dreamweaver zu verschieben und anzuordnen.

So kombinieren Sie zwei oder mehr Paletten, um eine Palette im Registerformat


zu erstellen:

1 Ziehen Sie die Registerkarte (nicht die Titelleiste) einer schwebenden Palette
über eine andere schwebende Palette. Wenn um die Zielpalette ein
hervorgehobener Rahmen angezeigt wird, lassen Sie die Maustaste los.

Dreamweaver – Erste Schritte 85


2 Klicken Sie in der Palette auf eine beliebige Registerkarte, um die
entsprechende Palette in den Vordergrund zu bringen.
Registerkarte der Verlaufspalette wird auf die
Verlaufspalette Ebenenpalette gezogen

Da die Objektpalette keine Registerkarten enthält, können Sie sie nicht durch
Ziehen an eine andere Palette andocken. Sie können jedoch die Registerkarte einer
anderen Palette über die Objektpalette ziehen, um beide zu kombinieren.
Sie können Paletten im Registerformat mit dem oben beschriebenen Verfahren
zwischen schwebenden Paletten hin- und herbewegen und so Ihrem Arbeitsablauf
entsprechend anordnen.

So entfernen Sie eine Palette aus einer Palette im Registerformat:

Ziehen Sie die zugehörige Registerkarte aus dem Fenster.

Voreinstellungen für Paletten wählen


In den Voreinstellungen für Paletten können Sie festlegen, welche Paletten und
Inspektoren immer im Vordergrund des Dokument- und Sitefensters angezeigt
werden sollen und welche verdeckt werden dürfen. Außerdem können Sie
festlegen, welche Paletten und Inspektoren im Mini-Launcher und auf der
Launcher-Leiste angezeigt werden sollen.

So legen Sie fest, wo jede Palette im Bezug auf das Dokumentfenster


angezeigt wird:

1 Wählen Sie Bearbeiten > Voreinstellungen und dann die Kategorie Paletten.
Standardmäßig werden alle Fenster, Paletten und Inspektoren vor dem
Dokumentfenster angezeigt.

86 Kapitel 2
2 Heben Sie die Auswahl der Fenster, Paletten und Inspektoren auf, die hinter
dem Dokumentfenster angezeigt werden sollen.
Wenn Sie beispielsweise möchten, dass das Dokumentfenster den
Codeinspektor verdecken soll, entfernen Sie die Markierung vor der Option
Codeinspektor. Der Codeinspektor wird jetzt nur dann vor dem
Dokumentfenster angezeigt, wenn er aktiv ist.
Wenn das Dokumentfenster alle schwebenden Paletten verdecken soll, die
Sie durch benutzerdefinierte Anpassung von Dreamweaver hinzugefügt haben,
entfernen Sie die Markierung vor der Option Alle anderen schwebenden
Fenster.

Die Verlaufspalette
In der Verlaufspalette ist eine Liste mit sämtlichen Schritten enthalten, die Sie im
aktiven Dokument seit dem Erstellen oder Öffnen des Dokuments ausgeführt
haben. (In der Verlaufspalette werden keine Schritte angezeigt, die Sie in anderen
Frames, Dokumentfenstern oder im Sitefenster ausgeführt haben.) Hiermit
können Sie einen oder mehrere Schritte rückgängig machen, Schritte wiederholen
und neue Befehle erstellen, um sich wiederholende Aufgaben zu automatisieren.

Schritte

Schieberegler

Schaltfläche
Abspielen

Schaltfläche Schaltfläche
Schritte kopieren Als Befehl speichern

Der Schieberegler in der Verlaufspalette zeigt zunächst auf den zuletzt


ausgeführten Schritt.

Verlaufspalette verwenden
In der Verlaufspalette wird jeder in Dreamweaver durchgeführte Arbeitsschritt
gespeichert. Über die Verlaufspalette können Sie mehrere Schritte auf einmal
rückgängig machen.
Wenn Sie die zuletzt in einem Dokument durchgeführte Operation rückgängig
machen möchten, wählen Sie Bearbeiten > Rückgängig, genau wie in anderen
Anwendungen. (Im Menü Bearbeiten ändert sich der Name des Befehls
Rückgängig je nach der zuletzt durchgeführten Operation.)

Dreamweaver – Erste Schritte 87


Sie können mit der Verlaufspalette außerdem bereits durchgeführte Schritte
wiederholen und Arbeitsschritte durch das Erstellen neuer Befehle automatisieren.
Weitere Informationen finden Sie unter Tasks automatisieren.

So öffnen Sie die Verlaufspalette:

Wählen Sie Fenster > Verlauf.

So machen Sie den zuletzt ausgeführten Arbeitsschritt rückgängig:

Ziehen Sie den Regler in der Verlaufspalette um einen Arbeitsschritt in der Liste
nach oben. Die Wirkung entspricht dem Wählen von Bearbeiten > Rückgängig.
Der rückgängig gemachte Schritt wird grau angezeigt.

Führen Sie einen der folgenden Schritte aus, um mehrere Schritte gleichzeitig
rückgängig zu machen:

• Ziehen Sie den Regler zu einem Schritt.


• Klicken Sie links von einem Schritt entlang des Reglerpfades. Der Regler
bewegt sich automatisch zu diesem Schritt und die dazwischen liegenden
Schritte werden rückgängig gemacht.
Anmerkung: Wenn Sie die automatische Reglerbewegung zu einem bestimmten Schritt
erreichen möchten, müssen Sie auf eine Stelle links von dem Schritt klicken. Wenn Sie auf
den Schritt selbst klicken, wird er ausgewählt. Durch das Auswählen eines Arbeitsschrittes
gelangen Sie nicht zu diesem Schritt des Rückgängig-Verlaufs zurück.

88 Kapitel 2
Wie beim Rückgängigmachen eines einzelnen Schrittes können Sie auch
nach dem Rückgängigmachen von mehreren Schritten keinen der Schritte
wiederherstellen, wenn Sie nach dem Rückgängigmachen einen Arbeitsschritt
im Dokument durchführen. Die rückgängig gemachten Schritte werden aus
der Verlaufspalette gelöscht.
Mit der Verlaufspalette haben Sie außerdem die Möglichkeit, Schritte aus
dem Schrittverlauf zu wiederholen und Arbeitsvorgänge auf Grundlage der
ausgeführten Schritte zu automatisieren.Weitere Informationen finden Sie unter
Tasks automatisieren.

So legen Sie die Anzahl der in der Verlaufspalette gespeicherten und angezeigten
Schritte fest:

1 Wählen Sie Bearbeiten > Voreinstellungen und wählen Sie die Kategorie
Allgemein.
2 Geben Sie unter Zulässige Höchstzahl der Verlaufsschritte die gewünschte
Zahl ein.
Der Standardwert dürfte für die Anforderungen der meisten Benutzer
ausreichen. Je höher die Zahl ist, desto mehr Speicher ist für die Verlaufspalette
erforderlich. Dies kann die Leistung und Geschwindigkeit Ihres Computers
erheblich beeinträchtigen. Wenn die maximale Anzahl von Schritten in der
Verlaufspalette erreicht ist, werden die ältesten Schritte gelöscht.
Anmerkung: Sie können die Anordnung der Schritte in der Verlaufpalette nicht ändern.
Betrachten Sie die Verlaufspalette nicht als willkürliche Sammlung von Befehlen vor,
sondern als Funktion, die ausgeführten Schritte in der Reihenfolge ihrer Durchführung
anzuzeigen.

So löschen Sie die Verlaufsliste für das aktuelle Dokument:

Wählen Sie aus dem Kontextmenü der Verlaufspalette die Option Verlauf leeren.
Mit diesem Befehl löschen Sie außerdem alle Rückgängig-Informationen für das
aktuelle Dokument: Wenn Sie Verlauf leeren gewählt haben, können Sie keine der
gelöschten Schritte mehr rückgängig machen. (Beachten Sie, dass Sie mit Verlauf
leeren keine Schritte rückgängig machen. Sie entfernen lediglich die Datensätze
dieser Schritte aus dem Speicher von Dreamweaver.)

Andere Dreamweaver-Paletten verwenden


Der Arbeitsbereich von Dreamweaver enthält viele andere Paletten. An dieser
Stelle können nur einige erwähnt werden:
Im Codeinspektor wird der Code angezeigt, mit dem ein Browser das Dokument
als Webseite darstellt. Um den Codeinspektor ein- oder auszublenden, wählen Sie
Fenster > Codeinspektor.

Dreamweaver – Erste Schritte 89


Änderungen, die Sie im Dokumentfenster vornehmen, werden sofort im
Codeinspektor reflektiert. Wenn Sie HTML-Code in den Codeinspektor
eingeben und dann auf eine Stelle außerhalb des Inspektors klicken,
werden die entsprechenden Änderungen im Dokumentfenster angezeigt.
Weitere Informationen finden Sie unter Codeansicht (oder Codeinspektor)
verwenden.
Um kleinere Änderungen an HTML-Tags vorzunehmen, können Sie anstelle des
Codeinspektors den Quick Tag Editor verwenden. Wenn Sie den Quick Tag
Editor anzeigen möchten, drücken Sie <Strg>+<T> (Windows) bzw.
<Befehlstaste>+<T> (Macintosh) oder wählen Sie Modifizieren > Quick Tag
Editor. Weitere Informationen finden Sie unter HTML-Tags in der
Entwurfsansicht bearbeiten.
Die Referenzpalette bietet detaillierte Informationen über das HTML-Tag und
die Tag-Attribute, an dem Sie gerade arbeiten. Sie können die Referenzpalette
über das Menü Fenster, die Launcher-Leiste oder den Codeinspektor öffnen.
Sie können z. B. ein img-Tag auswählen, in der Symbolleiste auf die Schaltfläche
Referenz klicken und so herausfinden, welche Attribute zutreffen (align, border
usw.). Weitere Informationen finden Sie unter Referenzpalette von Dreamweaver
verwenden.
Der Dreamweaver JavaScript-Debugger ermöglicht Ihnen das Debuggen von
Client-seitigem JavaScript. Sie können den JavaScript-Debugger vom Menü
Fenster aus öffnen. Weitere Informationen finden Sie unter JavaScript-Code
debuggen.

Mit Farben arbeiten


Viele Dreamweaver-Dialogfelder sowie der Eigenschafteninspektor für eine Reihe
von Seitenelementen enthalten ein Farbfeld, mit dem ein Farbwähler geöffnet
werden kann. Mit dem Farbwähler wählen Sie eine Farbe für ein Seitenelement.

90 Kapitel 2
So wählen Sie in Dreamweaver eine Farbe:

1 Klicken Sie in einem Dialogfeld oder im Eigenschafteninspektor auf ein


Farbfeld.
Der Farbwähler wird eingeblendet.

Farbfeld im
Eigenschaften-
inspektor

2 Führen Sie einen der folgenden Schritte aus:


• Wählen Sie mit der Pipette ein Farbfeld aus der Palette. Alle Farben in den
Paletten Farbwürfel (Standardeinstellung) und Halbton sind websicher.
Die Farben in anderen Paletten sind nicht websicher.
• Sie können mit der Pipette eine Farbe von einer beliebigen Stelle des
Bildschirms aufnehmen, sogar von Positionen außerhalb der Dreamweaver-
Fenster. (Wenn Sie auf den Desktop oder auf eine andere Anwendung klicken,
wird von Dreamweaver die Farbe aufgenommen, auf die Sie geklickt haben.
Sie wechseln dadurch jedoch möglicherweise zu der anderen Anwendung.
Klicken Sie in diesem Fall auf ein Dreamweaver-Fenster, um die Arbeit in
Dreamweaver fortzusetzen, oder halten Sie beim Wechseln von Dreamweaver
zum Desktop die Maustaste gedrückt, um das Umschalten zur anderen
Anwendung zu verhindern.)
• Mit dem Popupmenü in der oberen rechten Ecke des Farbwählers können Sie
Ihre Farbauswahl erweitern. Sie haben die Wahl zwischen Farbwürfel,
Halbton, Windows OS, Mac OS, Graustufen und Änderung in websicher.
Beachten Sie, dass die Paletten Farbwürfel und Halbton websicher sind,
Windows OS, Mac OS und Graustufen dagegen nicht. Wenn Sie eine nicht
websichere Palette verwenden und Änderung in websicher wählen, wird die
ausgewählte Farbe von Dreamweaver durch die ähnlichste websichere Farbe
ersetzt, Sie erhalten unter Umständen also nicht die Farbe, die Sie sehen.
• Um die aktuelle Farbe zu löschen, ohne eine andere Farbe zu wählen,
klicken Sie auf die durchgestrichene Schaltfläche.
• Um den System-Farbwähler zu öffnen, klicken Sie auf die Schaltfläche
Farbkreis.

Dreamweaver – Erste Schritte 91


Websichere Farben
In HTML werden Farben entweder als Hexadezimalwerte (z. B. #FF0000) oder
als Farbnamen (z. B. red) ausgedrückt. Eine websichere Farbe sieht in Netscape
Navigator und Microsoft Internet Explorer auf Windows- und Macintosh-
Systemen im 256-Farben-Modus gleich aus. Es gibt 216 systemübergreifende
Farben. Alle Hexadezimalwerte, die aus Kombinationen von 00, 33, 66, 99, CC
oder FF (bzw. RGB-Werte 0, 51, 102, 153, 204 und 255) zusammengesetzt sind,
sind websichere Farben.
Tests haben allerdings gezeigt, dass es nur 216 websichere Farben gibt. Die Farben
#0033FF (0,51,255), #3300FF (51,0,255), #00FF33 (0,255,51) und #33FF00
(51,255,0) werden in Internet Explorer unter Windows nicht korrekt dargestellt.
Die Paletten Farbwürfel (Standardeinstellung) und Halbton in Dreamweaver
verwenden die Webpalette mit 216 Farben. Wenn Sie eine Farbe aus diesen
Paletten wählen, wird der Hexadezimalwert der Farbe angezeigt.
Wenn Sie eine Farbe außerhalb des websicheren Bereichs auswählen möchten,
öffnen Sie den System-Farbwähler durch Klicken auf die Schaltfläche Farbkreis
in der oberen rechten Ecke des Dreamweaver-Farbwählers. Der System-
Farbwähler ist nicht auf websichere Farben beschränkt.
UNIX-Versionen von Netscape Navigator verwenden eine andere Farbpalette als
die Windows- und Macintosh-Versionen. Wenn Sie ausschließlich für UNIX-
Browser entwickeln (oder Ihr Zielpublikum Windows- oder Macintosh-Systeme
mit 24-Bit-Monitoren oder UNIX-Systeme mit 8-Bit-Monitoren einsetzt),
sollten Sie evtl. Hexadezimalwerte aus Kombinationen von 00, 40, 80, BF
und FF verwenden, um websichere Farben für SunOS zu erhalten.

Voreinstellungen wählen
Dreamweaver enthält Voreinstellungen, die das allgemeine Erscheinungsbild
der Dreamweaver-Benutzeroberfläche sowie Optionen für bestimmte Funktionen
steuern, wie beispielsweise Ebenen, Stylesheets, HTML- und JavaScript-Code-
Anzeige, externe Editoren und Vorschau von Seiten in Browsern. Informationen
zu bestimmten Voreinstellungen finden Sie in diesem Benutzerhandbuch unter
dem entsprechenden Thema oder der entsprechenden Funktion.
In diesem Handbuch werden nur die gängigsten Voreinstellungen beschrieben.
Informationen zu bestimmten Voreinstellungen, die hier nicht behandelt werden,
finden Sie im entsprechenden Thema in der Dreamweaver-Hilfe.

92 Kapitel 2
Allgemeine Voreinstellungen wählen
In den allgemeinen Voreinstellungen wird das generelle Erscheinungsbild von
Dreamweaver gesteuert. Wenn Sie diese Voreinstellungen ändern möchten,
wählen Sie Bearbeiten > Voreinstellungen und dann die Kategorie Allgemein.
Die allgemeinen Einstellungen sind in die zwei Unterkategorien Dateioptionen
und Bearbeitungsoptionen unterteilt. Nähere Informationen zu diesen
Voreinstellungen finden Sie in der Dreamweaver-Hilfe.

Voreinstellungen für Schriften und Kodierung wählen


In den Einstellungen für Schriften und Kodierung können Sie die
Standardschriftenkodierung für neue Dokumente sowie die Schriften festlegen,
mit denen in Dreamweaver jede Schriftkodierung angezeigt wird. Mit einer
Dokumentkodierung wird festgelegt, wie das Dokument in einem Browser
angezeigt wird. In den Schrifteinstellungen von Dreamweaver können Sie die
Schriftart und Schriftgröße festlegen, mit der Sie arbeiten möchten. Dies hat
jedoch keine Auswirkungen darauf, wie das Dokument später in einem Browser
dargestellt wird.

So ändern Sie die Kodierung des aktuellen Dokuments:

Wählen Sie Modifizieren > Seiteneigenschaften und wählen Sie dann


im Popupmenü Dokumentkodierung eine Kodierung aus.

So ändern Sie die beim Erstellen neuer Dokumente zu verwendende


Standardkodierung:

Wählen Sie Bearbeiten > Voreinstellungen und dann die Kategorie Schriften/
Kodierung. Wählen Sie dann im Popupmenü Standardkodierung eine
Kodierung aus.

So stellen Sie die für jeden Kodierungstyp zu verwendenden Schriften ein:

1 Wählen Sie Bearbeiten > Voreinstellungen und dann die Kategorie Schriften/
Kodierung.
2 Wählen Sie in der Liste Schrifteinstellungen den Kodierungstyp aus
(z. B. Westlich (Latin1) oder Japanisch) und wählen Sie dann in den
Popupmenüs unter der Liste Schrifteinstellungen die Schriften, die für
diese Kodierung verwendet werden sollen.
Weitere Informationen zu Voreinstellungen für Schriften/Kodierung finden Sie
in der Dreamweaver-Hilfe.

Dreamweaver – Erste Schritte 93


Dreamweaver mit anderen Anwendungen
einsetzen
Dreamweaver erleichtert das Webdesign und den Entwicklungsprozess, da es
problemlos mit anderen Anwendungen eingesetzt werden kann. Informationen
zum Arbeiten mit anderen Anwendungen, wie beispielsweise Browsern, HTML-
Editoren, Bildeditoren und Animations-Tools, finden Sie unter folgenden
Themen:
• Informationen über den Einsatz von Dreamweaver zusammen mit anderen
HTML-Editoren, wie beispielsweise HomeSite oder BBEdit, finden Sie unter
Mit externen HTML-Editoren arbeiten.
• Sie können wählen, welche Browser Sie für die Vorschau einer Site verwenden
möchten. Weitere Informationen finden Sie unter Vorschau in Browsern
anzeigen.
• Sie können externe Bildeditoren, wie beispielsweise Macromedia Fireworks,
von Dreamweaver aus starten. Weitere Informationen finden Sie unter Mit
externen Bildeditoren arbeiten.
• Sie können Dreamweaver so konfigurieren, dass für jeden Dateityp ein anderer
Editor gestartet wird. Weitere Informationen finden Sie unter Externe Editoren
starten.
• Informationen über das Einfügen von Animationen mithilfe von Flash-Filmen
in eine Site finden Sie unter Informationen über Flash-Inhalte.
• Informationen darüber, wie Sie eine Site mithilfe von Shockwave-Filmen
interaktiv gestalten, finden Sie unter Shockwave-Filme.

Dreamweaver benutzerdefiniert anpassen


Sie können Dreamweaver mit einigen grundlegenden Techniken an Ihre
Erfordernisse anpassen. Durch das Wählen von Voreinstellungen können Sie
beispielsweise eigene Tastaturkurzbefehle erstellen und durch das Hinzufügen von
Erweiterungen können Sie Ihren Arbeitsbereich einrichten, ohne komplexen
Code beherrschen oder Textdateien bearbeiten zu müssen. Nähere Informationen
zu erweiterten Funktionen der benutzerdefinierten Anpassung finden Sie unter
Dreamweaver anpassen.

Tastaturkurzbefehl-Editor verwenden
Mit dem Tastaturkurzbefehl-Editor erstellen Sie eigene Tastaturkurzbefehle,
bearbeiten vorhandene Tastaturkurzbefehle oder verwenden voreingestellte Sets
mit Tastaturkurzbefehlen.

94 Kapitel 2
So öffnen Sie den Tastaturkurzbefehl-Editor:

Wählen Sie Bearbeiten > Tastaturkurzbefehle.


Das Dialogfeld Tastaturkurzbefehl wird eingeblendet. Es enthält verschiedene
Optionen, die Sie aktivieren können, und Befehle, die Sie bearbeiten können.

Set duplizieren

Set löschen

Als HTML-Datei
speichern

Schaltfläche
umbenennen

Aktuelles Set istein Menü, in dem die Sets mit voreingestellten


Tastaturkurzbefehlen angezeigt werden, die im Lieferumfang von Dreamweaver
enthalten sind. Außerdem werden ggf. von Ihnen definierte Sets angezeigt.
Das aktuelle Set ist standardmäßig das Set, das von Dreamweaver im aktuellen
Dokument verwendet wird. Die voreingestellten Sets werden am Anfang des
Menüs aufgeführt. Wenn Sie mit den Tastaturkurzbefehlen von Dreamweaver 3
vertraut sind, können Sie diese verwenden, indem Sie das voreingestellte Set
Dreamweaver 3 wählen. (In diesem Set enthält das Set Dreamweaver 3 die
Dreamweaver 3-Tastaturkurzbefehle für Dreamweaver 3-Funktionen und die
Dreamweaver 4-Tastaturkurzbefehle für Funktionen, die in Dreamweaver 3
nicht verfügbar waren.
Befehle ist ein Popupmenü, mit dem Sie die Befehlskategorie auswählen können,
die Sie bearbeiten möchten. Sie können z. B. Menübefehle wie Datei öffnen oder
einen der drei Befehle zur Code-Bearbeitung wie Fehlende Klammern einfügen
bearbeiten.

Dreamweaver – Erste Schritte 95


Befehlsliste zeigt die Befehle an, die mit der Kategorie verknüpft sind,
die Sie aus dem Popupmenü Befehle gewählt haben, sowie die zugehörigen
Tastaturkurzbefehle. In den Befehlskategorien Menü und Site-Menü wird
diese Liste als Baumstruktur angezeigt, die die Menüstrukturen nachbildet.
In den übrigen Kategorien werden die Befehle nach Namen aufgeführt
(z. B. Anwendung beenden).
Das Fenster Tastaturkurzbefehlezeigt die Liste der Tastaturkurzbefehle, die mit
dem ausgewählten Befehl verbunden sind.
Taste drücken zeigt die neue Tastenkombination, die Sie eingeben.
Plus fügt dem aktuellen Befehl einen neuen Tastaturkurzbefehl hinzu. Klicken Sie
auf Plus (+), um das Feld Tastaturkurzbefehle zu aktivieren. Geben Sie einen
neuen Tastenbefehl ein und klicken Sie auf Ändern, um einen neuen
Tastaturkurzbefehl für diesen Befehl einzufügen. Sie können jedem Befehl zwei
verschiedene Tastaturkurzbefehle zuweisen.
Minus entferntden ausgewählten Tastaturkurzbefehl aus der Liste der
Tastaturkurzbefehle.
Ändern wendet den neuen Tastaturkurzbefehl auf den Befehl an und fügt ihn
in die Liste der Tastaturkurzbefehle ein.
• Klicken Sie auf die Schaltfläche Duplizieren, um das aktuelle Set zu
duplizieren. Sie können einen Namen für das Set vergeben oder den
Standardnamen (der Name des aktuellen Sets mit dem Zusatz "Kopie")
beibehalten.
• Klicken Sie auf die Schaltfläche Umbenennen, um das aktuelle Set
umzubenennen.
• Klicken Sie auf die Schaltfläche Als HTML-Datei speichern, um das aktuelle
Set zum schnellen und einfachen Anzeigen und Ausdrucken im Format einer
HTML-Tabelle zu speichern. Sie können die HTML-Datei in Ihrem Browser
öffnen und die Tastaturkurzbefehle ausdrucken, um eine praktische Liste zur
Hand zu haben.
• Klicken Sie auf die Schaltfläche Löschen, um Kopien und benutzerdefinierte
Sets zu löschen. (Sie können keine aktiven Sets löschen.)

So entfernen Sie einen Tastaturkurzbefehl aus einem Befehl:

1 Wählen Sie im Popupmenü Befehle die Befehlskategorie aus, die den


Tastaturkurzbefehl enthält, den Sie entfernen möchten, z. B. Site-Menü-
Befehle.
In der Liste Befehl werden die mit dieser Kategorie verknüpften Befehle
angezeigt.

96 Kapitel 2
2 Wählen Sie in der Liste Befehl den Tastaturkurzbefehl aus, den Sie entfernen
möchten.
Es wird eine Liste mit Tastaturkurzbefehlen für diese Befehle angezeigt.
3 Wählen Sie die Tastaturkurzbefehle aus, die Sie entfernen möchten.
4 Klicken Sie auf die Schaltfläche mit dem Minuszeichen (–).

So fügen Sie einem Befehl einen Tastaturkurzbefehl hinzu:

1 Wählen Sie die Befehlskategorie aus, die den gewünschten Befehl enthält.
In der Liste Befehl werden die mit dieser Kategorie verknüpften Befehle
angezeigt.
2 Wählen Sie den Befehl aus der Liste Befehl.
Alle bereits mit dem Befehl verknüpften Tastaturkurzbefehle werden in der
Liste Tastaturkurzbefehle angezeigt.
3 Klicken Sie auf die Schaltfläche mit dem Pluszeichen (+). Das Eingabefeld
Tastaturkurzbefehle wird aktiviert und die Einfügemarke bewegt sich in
das Feld Taste drücken.
4 Drücken Sie die Tastenkombination, die Sie hinzufügen möchten.
Die Tastenkombination wird im Feld Taste drücken angezeigt.
Wenn ein Problem im Zusammenhang mit dem Tastaturkurzbefehl besteht,
z. B. in dem Fall, dass die Tastenkombination bereits einem anderen Befehl
zugewiesen wurde, wird eine Warnmeldung angezeigt und Sie können die
Tastenkombination neu zuweisen oder den Vorgang abbrechen.
5 Klicken Sie auf Ändern. Die neue Tastenkombination wird dem Befehl
zugewiesen.

So bearbeiten Sie einen vorhandenen Tastaturkurzbefehl:

1 Wählen Sie die Befehlskategorie aus, die den gewünschten Befehl enthält.
In der Liste Befehl werden die Befehle in der gewählten Kategorie aufgeführt.
2 Wählen Sie den Befehl aus der Liste Befehl.
Im Feld Neuer Tastaturkurzbefehl sehen Sie die Tastaturkurzbefehle, die dem
Befehl bereits zugewiesen sind. Wenn mit einem Befehl mehrere
Tastaturkurzbefehle verknüpft sind, müssen Sie den Tastaturkurzbefehl
auswählen, den Sie ändern möchten.
3 Klicken Sie in das Feld Taste drücken und geben Sie die gewünschte
Tastenkombination ein.
4 Klicken Sie auf die Schaltfläche Ändern, um den Tastaturkurzbefehl zu ändern.

Dreamweaver – Erste Schritte 97


Anmerkung: Falls bei dieser Tastenkombination ein Problem besteht, wird unter dem Feld
zur Eingabe des neuen Tastaturkurzbefehls eine Meldung mit Einzelheiten angezeigt.
Unter Umständen können Sie den Tastaturkurzbefehl nicht hinzufügen, löschen oder
bearbeiten. Wenn die Tastenkombination z. B. bereits einem anderen Befehl zugewiesen
wurde, wird unter dem Feld zur Eingabe des neuen Tastaturkurzbefehls eine
entsprechende Meldung angezeigt.

Erweiterungen für Dreamweaver hinzufügen


Erweiterungen sind neue Funktionen, die Sie schnell und einfach in
Dreamweaver 4 einfügen können. Sie können zahlreiche Arten von
Erweiterungen verwenden, z. B. Erweiterungen zum Umformatieren von
Tabellen, Verbinden mit Back-End-Datenbanken oder zur Unterstützung beim
Schreiben von Skripten für Browser.
Die aktuellsten Erweiterungen für Dreamweaver finden Sie auf der Macromedia
Exchange-Website unter http://www.macromedia.com/exchange/dreamweaver/.
Sie können sich auf der Website anmelden und Erweiterungen herunterladen
(viele davon kostenlos), sich an Diskussionsforen beteiligen, Bewertungen und
Kritiken von Benutzern lesen und Package Manager installieren und verwenden.
Sie müssen Package Manager installieren, bevor Sie Erweiterungen herunterladen
können.

98 Kapitel 2
Package Manager wird in Verbindung mit Dreamweaver ausgeführt und
ermöglicht Ihnen das Installieren und Verwalten von Erweiterungen.
Nachdem Sie Package Manager von der Exchange-Site heruntergeladen und
installiert haben, starten Sie Package Manager direkt von Dreamweaver aus,
indem Sie im Menü Befehle die Option Erweiterungen verwalten wählen.

So installieren und verwalten Sie Erweiterungen:

1 Klicken Sie auf der Website auf den Hyperlink zum Herunterladen
der gewünschten Erweiterung.
Sie können das Programm wahlweise direkt von der Website öffnen
und installieren oder es auf der Festplatte speichern.
• Wenn Sie es direkt öffnen, erfolgt die Installation von Package Manager
automatisch.
• Wenn Sie die Anwendung auf der Festplatte speichern, speichern Sie die
Extension Package-Datei (.mxp) im Ordner "Downloaded Extensions"
im Dreamweaver-Ordner auf Ihrem Computer. (Beispiel:
c:\Programme\Macromedia\Dreamweaver 4\Configuration\Extensions.)
2 Doppelklicken Sie auf die Extension Package-Datei oder wählen Sie in Package
Manager im Menü Datei die Option Erweiterung installieren.
Die Datei wird in Dreamweaver installiert. Sie können auf einige
Erweiterungen erst zugreifen, nachdem Sie Dreamweaver neu gestartet haben.
Unter Umständen werden Sie also aufgefordert, die Anwendung zu beenden
und neu zu starten.
Mit Package Manager können Sie Erweiterungen entfernen und zusätzliche
Informationen über Erweiterungen anzeigen.

Dreamweaver – Erste Schritte 99


100 Kapitel 2
3

KAPITEL 3
Websites planen und einrichten
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Eine Website enthält verknüpfte Dokumente mit gemeinsamen Attributen,


wie z. B. sinnverwandten Themen, ähnlichem Design oder einem gemeinsamen
Zweck.
Macromedia Dreamweaver ist ein Tool zum Erstellen und Verwalten von
Websites, mit dem Sie sowohl komplette Sites als auch einzelne Dokumente
erstellen können. Die besten Ergebnisse erzielen Sie, wenn Sie zunächst Ihre
gesamte Website entwerfen und planen und erst dann mit der Ausarbeitung der
einzelnen Webseiten beginnen.
Anmerkung: Wenn Sie unbedingt gleich Dokumente erstellen möchten, können Sie die
Dreamweaver-Tools jetzt ausprobieren und ein Probedokument entwerfen. (Siehe
„HTML-Dokumente erstellen, öffnen und speichern“ auf Seite 158.) Mit der „echten“
Entwicklung von Dokumenten sollten Sie jedoch erst beginnen, wenn Sie eine Site
eingerichtet haben.

Der erste Schritt beim Erstellen einer Website ist die Planung. Siehe „Websites
planen und entwerfen“ auf Seite 101. Der nächste Schritt ist das Festlegen einer
Grundstruktur der Site. Siehe „Neue Sites mit Dreamweaver einrichten“ auf
Seite 107. Wenn Sie bereits eine Website auf einem Webserver betreiben und diese
Site nun mit Dreamweaver bearbeiten möchten, lesen Sie die Informationen
„Remote-Sites einrichten“ auf Seite 132.

Websites planen und entwerfen


Der Begriff Site kann in Dreamweaver für eine Website oder einen lokalen
Speicherort für die zu einer Website gehörenden Dokumente verwendet werden.
Damit Ihre Site ein Erfolg wird, sollten Sie bei der Erstellung einer Website von
Anfang an sorgfältig planen. Auch wenn Sie nur eine persönliche Homepage
erstellen möchten, die nur für Freunde und Verwandte gedacht ist, sollten Sie
die Site trotzdem sorgfältig planen.

101
Ziele
Zunächst sollten Sie sich die Ziele bewusst machen, die Sie mit der geplanten
Website verfolgen. Stellen Sie sich selbst oder Ihrem Kunden Fragen zur Website.
Was soll mit der Website erreicht werden? Notieren Sie sich Ihre Ziele, damit Sie
sie während der Entwurfsphase vor Augen haben. Klar definierte Ziele helfen
Ihnen, Ihre Website genau auf die jeweiligen Erfordernisse auszurichten.
Eine Website mit Informationen zu einem bestimmten Thema sollte anders
gestaltet sein und ein anderes Navigationssystem haben als z. B. ein virtuelles
Kaufhaus. Die Komplexität Ihrer Ziele hat Auswirkungen auf die Navigation,
die zu verwendenden Medien (Flash, Director usw.) und auch auf das
Gesamterscheinungsbild der Site.

Zielgruppe
Nachdem Sie definiert haben, was Sie mit Ihrer Website erreichen möchten,
müssen Sie noch die Zielgruppe für Ihre Website definieren. Diese Frage mag
albern klingen, da eigentlich jeder Websitebetreiber möchte, dass seine Website
von „allen“ besucht wird. Es ist jedoch schwierig, eine Website zu erstellen,
die jeder Mensch auf der Welt nutzen kann. Benutzer verwenden verschiedene
Browser, arbeiten mit unterschiedlichen Übertragungsgeschwindigkeiten und
verfügen nicht immer über die entsprechenden Medien-Plug-Ins. Alle diese
Faktoren haben Auswirkungen auf die Verwendbarkeit Ihrer Site. Deshalb
sollten Sie zunächst eine bestimmte Zielgruppe festlegen.
Überlegen Sie sich, wer sich für Ihre Website interessieren könnte bzw. wen Sie
ansprechen wollen. Welches Plattformen verwenden diese potenziellen Besucher
vorwiegend (Macintosh, Windows, Linux usw.)? Wie hoch ist die
durchschnittliche Übertragungsgeschwindigkeit (33,6-Kbit/s-Modem oder DSL)?
Welche Browser und Monitorgrößen werden verwendet? Ist die Site für ein
Intranet gedacht, bei dem jeder das gleiche Betriebssystem und den gleichen
Browser verwendet? All diese Faktoren können einen Einfluss darauf haben,
wie eine Webseite auf dem Monitor des Besuchers aussieht.
Nachdem Sie eine Zielgruppe, Plattformen, Übertragungsgeschwindigkeiten
und Browsertypen identifiziert haben, können Sie Ihre Website entsprechend
gestalten.
Als Beispiel sei angenommen, Ihre Zielgruppe bestehe überwiegend aus
Windows-Benutzern, die mit 17-Zoll-Monitoren und Internet Explorer 3.0
oder höher arbeiten. Bei der Gestaltung Ihrer Webseite sollten Sie in jedem
Fall sicherstellen, dass sie in Microsoft Internet Explorer auf einem Windows-
Computer mit einer Bildschirmauflösung von 800 x 600 Pixel optimal
funktioniert. Die Zahl der Benutzer, die die Site in Netscape Navigator auf einem
Macintosh-Computer besuchen, dürfte zwar deutlich geringer sein, aber Sie
sollten trotzdem dafür sorgen, dass Ihre Site auch auf solchen Plattformen
funktioniert, wenn auch einige Details dort etwas anders dargestellt werden
als bei Ihrer eigentlichen Zielgruppe.

102 Kapitel 3
Browserkompatible Sites erstellen
Beim Erstellen einer Site sollten Sie bedenken, dass Ihre Besucher wahrscheinlich
eine Vielzahl von Webbrowsern verwenden. Gestalten Sie Sites nach Möglichkeit
so, dass maximale Browserkompatibilität gewährleistet ist.
Es gibt zurzeit über zwei Dutzend verschiedene Webbrowser, wobei von vielen
mehrere Versionen verfügbar sind. Selbst wenn Sie nur auf Netscape Navigator
und Microsoft Internet Explorer abzielen, die von den meisten Webbenutzern
verwendet werden, sollten Sie bedenken, dass nicht jeder die neueste Version
dieser Browser einsetzt. Befindet sich eine Site im Web, wird früher oder später
jemand mit Netscape Navigator 2.0, dem AOL-Browser oder einem textbasierten
Browser, wie z. B. Lynx, die Site besuchen.
In einigen Fällen ist es nicht erforderlich, browserübergreifende Sites zu erstellen.
Wenn eine Site beispielsweise nur im Intranet Ihrer Firma verfügbar ist und Sie
wissen, dass alle Mitarbeiter der Firma den gleichen Browser verwenden, können
Sie die Site so optimieren, dass die Funktionen dieses Browsers genutzt werden
können. Ein ähnlicher Fall liegt vor, wenn Sie HTML-Inhalt für die Distribution
auf CD-ROM erstellen und einen Browser auf CD bereitstellen. Hier können Sie
davon ausgehen, dass alle Kunden auf diesen bestimmten Browser Zugriff haben.
In den meisten Fällen sollten Sie jedoch bei Websites, die für eine breite
Öffentlichkeit bestimmt sind, sicherstellen, dass so viele Browser wie möglich die
Site darstellen können. Nehmen Sie ein oder zwei Browser als Zielbrowser und
gestalten Sie die Site für diese Browser. Versuchen Sie aber auch zu testen, ob die
Site in anderen Browsern dargestellt werden kann, damit Sie inkompatiblen Inhalt
möglichst vermeiden. Sie können auch über ein Diskussionsforum andere
Benutzer bitten, Ihre Site zu besuchen. Dies ist oftmals eine gute Möglichkeit,
Feedback von einem breiten Spektrum von Benutzern zu erhalten.
Je anspruchsvoller eine Site ist, d. h. je komplexer Layout, Animation,
Mulitmedia-Inhalt und Interaktion sind, desto unwahrscheinlicher ist es,
dass sie auf allen Browsern dargestellt werden kann. Nicht in allen Browsern
wird beispielsweise JavaScript ausgeführt. Eine Seite mit einfachem Text ohne
Sonderzeichen wird wahrscheinlich problemlos auf allen Browsern dargestellt.
Eine solche Seite ist allerdings nicht so ansprechend wie eine Seite mit Grafiken,
Layouts und Interaktion. Versuchen Sie, einen Kompromiss zwischen maximalem
Effekt und maximaler Browserkompatibilität zu finden.
Eine gute Methode ist das Bereitstellen mehrerer Versionen bestimmter wichtiger
Seiten, wie z. B. der Homepage der Site. Sie können beispielsweise von einer
solchen Seite eine Version mit Frames und eine Version ohne Frames erstellen.
Sie können Ihre Webseite dann mit einem Verhalten ausstatten, durch das die Site
bei Besuchern ohne Frame-Darstellungsmöglichkeit automatisch in ihrer Frame-
losen Version erscheint. Weitere Informationen finden Sie unter „Aktionen für
Verhalten aus dem Dreamweaver-Lieferumfang verwenden“ auf Seite 483.

Websites planen und einrichten 103


Struktur der Website planen
Sie sollten Ihre Site von Anfang an sorgfältig planen, damit Sie später Zeit sparen.
Wenn Sie Dokumente erstellen, ohne sich Gedanken über die Ordnerhierarchie
zu machen, haben Sie möglicherweise am Ende einen riesigen, unübersichtlichen
Ordner mit unzähligen Dateien oder zusammengehörige Dateien, die über ein
halbes Dutzend Ordner mit ähnlichen Namen verstreut sind.
Die normale Vorgehensweise beim Einrichten einer Site besteht darin, einen
Ordner auf der lokalen Festplatte (die so genannte lokale Site) zu erstellen, der alle
Dateien für Ihre Site enthält und dann innerhalb dieses Ordners Dokumente
zu erstellen und zu bearbeiten. Die fertigen Dateien kopieren Sie dann auf einen
Webserver, um sie öffentlich zugänglich zu machen. Diese Methode ist besser
als das Erstellen und Bearbeiten von Dateien auf dem Webserver selbst, denn
sie bietet die Möglichkeit, Änderungen zunächst an der lokalen Site zu testen.
Anschließend brauchen Sie die lokalen Dateien nur noch hochzuladen und
die gesamte öffentliche Site auf einmal zu aktualisieren.
Wie Sie Ihre lokale Site mit Dreamweaver koordinieren, ist unter „Neue Sites mit
Dreamweaver einrichten“ auf Seite 107 beschrieben. Nachdem Sie die lokale Site
mit Dreamweaver eingerichtet haben, können Sie Ihre Sitedateien leicht
verwalten, Hyperlinks verfolgen, Seiten aktualisieren und vieles mehr tun.
Unterteilen Sie Ihre Site in Kategorien. Legen
Sie zusammengehörige Seiten
zusammen in demselben Ordner ab. So könnten Sie beispielsweise in einem
Ordner Pressemitteilungen, Kontaktinformationen und Stellenangebote Ihrer
Firma und in einem anderen Ordner die Seiten Ihres Online-Katalogs ablegen.
Legen Sie gegebenenfalls Unterordner an. Dadurch vereinfachen Sie sich die
Organisation und Navigation auf Ihrer Site erheblich.

104 Kapitel 3
Entscheiden Sie, wo Elemente wie Bilder und Audiodateien abgelegt werden
sollen. Es ist beispielsweise sinvoll, alle Bilder an einem Speicherort abzulegen,
damit Sie wissen, wo Sie ein Bild finden können, wenn Sie es in eine Seite
einfügen möchten. Einige Webdesigner legen alle in einer Site verwendeten
Nicht-HTML-Elemente in einem Ordner mit dem Namen „Elemente“ ab. Dieser
Ordner kann weitere Ordner enthalten, z. B. die Ordner „Bilder“, „Shockwave“
und „Audio“. Oder Sie erstellen je einen Elemente-Ordner für jede Gruppe mit
zusammenghörigen Seiten in der Site, wenn nur wenige Objekte von allen
Gruppen gemeinsam genutzt werden.

Verwenden Sie dieselbe Struktur für die lokale und die Remote-Site. Die lokale
und die Remote-Site sollten am besten dieselbe Struktur aufweisen. Wenn Sie mit
Dreamweaver eine lokale Site erstellen und dann alle Komponenten auf den
Webserver übertragen, stellt Dreamweaver sicher, dass die lokale Struktur in der
Remote-Site dupliziert wird.

Layout entwerfen
Sie sparen sich eine Menge Zeit, wenn Sie Ihr Layout genau planen, bevor Sie mit
der Arbeit in Dreamweaver beginnen. Dazu ist es oft nur nötig, mit Bleistift und
Papier eine Skizze des gewünschten Layouts zu entwerfen. Eine „ausgefeiltere“
Methode ist, eine komplexe Zeichnung Ihrer Site in einer Grafikanwendung wie
Macromedia Freehand oder Fireworks zu entwerfen. In jedem Fall sollten Sie ein
Muster Ihres Layouts vor sich haben, das bei der späteren Gestaltung der Site als
Vorbild dient.
Es ist wichtig, dass die Seiten der Website ein einheitliches Layout und Design
aufweisen. Schließlich möchten Sie ja, dass Benutzer sich problemlos in der Site
zurechtfinden und nicht durch verschiedene Layouts oder eine andere Anordnung
der Naviagtionsleiste verwirrt werden.

Websites planen und einrichten 105


Sitenavigation planen
Ein weiterer Bereich, in dem sich die Planung auszahlt, ist die Navigation. Beim
Gestalten der Site sollten Sie immer daran denken, wie der Besucher die Website
erleben soll. Für Besucher sollen die gewünschten Informationen immer leicht zu
finden sein. Berücksichtigen Sie dabei folgende Punkte:
„Sie sind hier.“ Besucher
sollten sich immer problemlos in der Site zurechtfinden
und wieder zur Hauptseite gelangen können.
Suchfunktionen und Indizes. Für Besucher sollen die gewünschten Informationen
immer leicht zu finden sein.
Feedback. Falls bei der Site Probleme auftreten, sollten die Besucher die
Möglichkeit haben, sich an den Webmaster oder andere Personen zu wenden.
Gestalten Sie die Navigationselemente. Die Navigationselemente sollten auf
der gesamten Website einheitlich gestaltet sein. Wenn Sie auf der Startseite eine
Navigtionsleiste am oberen Bildrand platzieren, sollte diese Leiste möglichst auch
auf allen anderen Seiten an dieser Stelle zu finden sein.
In Dreamweaver gibt es zwei Navigationswerkzeuge, mit denen Sie
Navigationselemente gestalten können. Weitere Informationen hierzu finden Sie
unter „Hyperlinks und Navigation“.

Elemente planen und zusammenstellen


Sobald Sie wissen, wie das Layout aussehen soll, können Sie die benötigten
Elemente gestalten und zusammenstellen. Dies können zum Beispiel Bilder,
Text oder Medien (Flash, Shockwave u. Ä.) sein. Alle diese Elemente sollten Sie
bereits zusammengestellt und zur Hand haben, bevor Sie mit der Entwicklung der
Site beginnen. Andernfalls sind Sie ständig gezwungen, die Entwicklungsarbeit zu
unterbrechen, um nach einem Bild zu suchen oder eine Schaltfläche zu erstellen.
Wenn Sie Bilder und Grafiken von einer Clip-Art-Site verwenden oder von einer
anderen Person erstellen lassen, sollten Sie sie zunächst in einem Ordner Ihrer Site
zusammenstellen (siehe „Struktur der Website planen“ auf Seite 104). Wenn Sie
die Elemente selbst erstellen, sollten Sie dies bereits getan haben, bevor Sie Ihre
Site entwerfen. Dies gilt auch für Bilder, die Sie für Rollovers benötigen.
Organisieren Sie die Elemente dann so, dass Sie beim Erstellen der Site in
Dreamweaver leicht darauf zugreifen können.
Durch Vorlagen und Bibliotheken erleichtert Ihnen Dreamweaver die erneute
Verwendung von Seitenlayouts und -elementen in mehreren Dokumenten.
Es ist allerdings einfacher, neue Seiten mithilfe von Vorlagen und Bibliotheken
zu erstellen, als Vorlagen und Bibliotheken auf vorhandene Dokumente
anzuwenden.

106 Kapitel 3
Verwenden Sie Vorlagen, wenn viele Seiten das gleiche Layout haben sollen.
Planen und entwerfen Sie eine Vorlage für dieses Layout und erstellen Sie dann
neue Seiten auf der Grundlage dieser Vorlage. Wenn Sie beschließen, das Layout
auf allen Seiten zu ändern, brauchen Sie nur die Vorlage zu ändern.
Anmerkung: Bei Dokumenten, die auf Vorlagen basieren, gelten jedoch einige
Einschränkungen hinsichtlich der Änderungen, die Sie daran vornehmen können. Vorlagen
sind vor allem sinnvoll, wenn Sie in einem Team arbeiten. Durch sie wird gewährleistet,
dass alle Beteiligten das gleiche Layout verwenden. Wenn Sie allein arbeiten, bieten
Bibliothekselemente unter Umständen mehr Flexibilität.

Verwenden Sie Bibliothekselemente, wenn Sie wissen, dass ein bestimmtes Bild
oder ein anderer Inhalt auf vielen Seiten der Website erscheinen soll. Solche
Elemente können Sie bereits im Voraus entwerfen und als Bibliothekselement
definieren. Wenn Sie das Element später modifizieren, erscheint die neue Version
auf allen Seiten, in die es eingefügt wurde.
Weitere Informationen zur mehrfachen Verwendung von Seitenlayouts und
-elementen siehe „Inhalte über Vorlagen und Bibliotheken wieder verwenden“.

Neue Sites mit Dreamweaver einrichten


Nachdem Sie die Struktur Ihrer Site angelegt haben (siehe „Struktur der Website
planen“ auf Seite 104), müssen Sie nun die neue Site in Dreamweaver einrichten.
Dies bedeutet, dass Sie Ihre Site mit der FTP-Funktion von Dreamweaver auf den
Webserver hochladen, Ihre Hyperlinks automatisch verfolgen und verwalten
lassen und Dateien in einem Team gemeinsam nutzen können. Am besten richten
Sie zunächst in Dreamweaver Ihre lokale Site ein, bevor Sie mit dem Erstellen
Ihrer Seiten beginnen.
Die lokale Site ist die Struktur, die Sie auf Ihrem Computer zur Ablage
sämtlicher Ordner, Elemente und Dateien für eine bestimmte Website
einrichten (siehe „Struktur der Website planen“ auf Seite 104).
Der lokale Stammordner Ihrer Site sollte der Ordner sein, den Sie speziell für
diese Site einrichten. Eine gute organisatorische Methode ist, einen Ordner mit
dem Namen „Sites“ zu erstellen und in diesem Ordner jeweils einen lokalen
Stammordner für jede Website anzulegen, an der Sie arbeiten.

Websites planen und einrichten 107


So erstellen Sie eine neue Site:

1 Wählen Sie Site > Neue Site.


Im daraufhin erscheinenden Dialogfeld Site-Definition ist die Kategorie
Lokale Infos ausgewählt.

2 Geben Sie die folgenden Optionen ein:


• Geben Sie im Feld Site-Name einen Namen für die Site ein. Der Sitename wird
im Sitefenster und im Untermenü Site > Site öffnen angezeigt. Sie können
einen beliebigen Namen eingeben. Er erscheint nicht im Browser und dient
nur als interner Bezeichner für Sie.
• Geben Sie im Feld Lokaler Stammordner den Ordner auf Ihrer lokalen
Festplatte an, in dem Sitedateien, Vorlagen und Bibliothekselemente
gespeichert werden sollen. Wenn Dreamweaver stammrelative Hyperlinks
auflöst, dient dabei dieser Ordner als Bezugspunkt (siehe „Stammrelative
Pfade“ auf Seite 390). Klicken Sie auf das Ordnersymbol, um den Ordner
zu suchen und auszuwählen, oder geben Sie den entsprechenden Pfad
und Ordnernamen im Textfeld ein. Falls noch kein lokaler Stammordner
vorhanden ist, können Sie ihn von diesem Dialogfeld aus erstellen.

108 Kapitel 3
• Geben Sie unter Liste mit lokalen Dateien automatisch aktualisieren an,
ob die lokale Dateiliste jedes Mal automatisch aktualisiert werden soll, wenn
Sie Dateien in die lokale Site kopieren. Ist diese Option deaktiviert, lassen sich
Dateien zwar schneller kopieren, doch dafür wird der Bereich Lokaler Ordner
des Sitefensters nicht automatisch aktualisiert. Klicken Sie im Sitefenster auf
die Schaltfläche Aktualisieren, um das Sitefenster manuell zu aktualisieren.
Um den Bereich Lokaler Ordner manuell zu aktualisieren, wählen Sie im
Sitefenster Ansicht > Lokal aktualisieren (Windows) bzw. Site > Sitedateien-
Ansicht > Lokal aktualisieren (Macintosh).
• Geben Sie im Feld HTTP-Adresse den URL an, unter dem die fertige Website
zu finden ist, damit Dreamweaver Hyperlinks innerhalb der Site, bei denen
absolute URLs verwendet werden, überprüfen kann. (Siehe „Hyperlinks auf
einer Seite oder einer Site überprüfen“ auf Seite 548.) Die absolute HTTP-
Adresse der Macromedia-Website lautet beispielsweise http://
www.macromedia.com.
• Geben Sie unter Cache an, ob ein lokaler Cache erstellt werden soll, um die
Geschwindigkeit der Hyperlinks zu erhöhen und die Siteverwaltung zu
vereinfachen. Wenn Sie diese Option nicht markieren, fordert Dreamweaver
Sie erneut auf, einen Cache zu erstellen, bevor die Site angelegt wird. Wählen
Sie diese Option auch, weil die Elementpalette nur funktioniert, wenn ein
Cache erstellt wurde. Weitere Informationen zur Elementpalette finden Sie
unter „Elemente verwalten und einfügen“ auf Seite 237.
3 Klicken Sie auf OK.
Das Sitedateien-Fenster wird geöffnet. Weitere Informationen zum Sitefenster
und zur Siteverwaltung finden Sie unter „Siteverwaltung und Teamarbeit“ auf
Seite 113.
Wenn Sie die Site später auf einem Remote-Server veröffentlichen möchten,
müssen Sie zusätzliche, sitespezifische Informationen angeben. Informationen zu
Remote-Sites finden Sie unter „Remote-Sites einrichten“ auf Seite 132.

Vorhandene Websites bearbeiten


Mit Dreamweaver können Sie eine vorhandene Site auf Ihrer lokalen Festplatte
bearbeiten, selbst wenn sie nicht mit Dreamweaver erstellt wurde.

So bearbeiten Sie eine vorhandene Website:

1 Wählen Sie Site > Sites definieren und klicken Sie auf Neu oder wählen Sie
Site > Site öffnen > Sites definieren.
Im daraufhin erscheinenden Dialogfeld Site-Definition ist die Kategorie
Lokale Infos ausgewählt.
2 Geben Sie die folgenden Optionen ein:

Websites planen und einrichten 109


• Geben Sie im Feld Site-Name einen Namen für die Site ein. Der Sitename wird
im Sitefenster und im Untermenü Site > Site öffnen angezeigt. Sie können
einen beliebigen Namen eingeben. Er erscheint nicht im Browser und dient
nur als interner Bezeichner für Sie.
• Geben Sie im Feld Lokaler Stammordner den Ordner auf Ihrer lokalen
Festplatte an, in dem die vorhandenen Sitedateien, Vorlagen und
Bibliothekselemente abgelegt sind. Klicken Sie auf das Ordnersymbol, um den
Ordner zu suchen und auszuwählen, oder geben Sie den entsprechenden Pfad
und Ordnernamen im Textfeld ein.
• Geben Sie unter Liste mit lokalen Dateien automatisch aktualisieren an,
ob die lokale Dateiliste jedes Mal automatisch aktualisiert werden soll, wenn
Sie Dateien in die lokale Site kopieren. Ist diese Option deaktiviert, lassen sich
Dateien zwar schneller kopieren, doch dafür wird der Bereich Lokaler Ordner
des Sitefensters nicht automatisch aktualisiert. Klicken Sie im Sitefenster auf
die Schaltfläche Aktualisieren, um das Sitefenster manuell zu aktualisieren.
Um den Bereich Lokaler Ordner manuell zu aktualisieren, wählen Sie im
Sitefenster Ansicht > Lokal aktualisieren (Windows) bzw. Site > Sitedateien-
Ansicht > Lokal aktualisieren (Macintosh).
• Geben Sie im Feld HTTP-Adresse den URL an, unter dem die fertige Website
zu finden ist, damit Dreamweaver Hyperlinks innerhalb der Site, bei denen
absolute URLs verwendet werden, überprüfen kann. (Siehe „Hyperlinks auf
einer Seite oder einer Site überprüfen“ auf Seite 548.) Die absolute HTTP-
Adresse der Macromedia-Website lautet beispielsweise http://
www.macromedia.com.
• Geben Sie unter Cache an, ob ein lokaler Cache erstellt werden soll, um die
Geschwindigkeit der Hyperlinks zu erhöhen und die Siteverwaltung zu
vereinfachen. Wenn Sie diese Option nicht markieren, fordert Dreamweaver
Sie erneut auf, einen Cache zu erstellen, bevor die Site angelegt wird. Wählen
Sie diese Option auch, weil die Elementpalette nur funktioniert, wenn ein
Cache erstellt wurde. Weitere Informationen zur Elementpalette finden Sie
unter„Elemente verwalten und einfügen“ auf Seite 237.
3 Klicken Sie auf OK.
Das Sitedateien-Fenster wird geöffnet. Weitere Informationen zum Sitefenster
und zur Siteverwaltung Siehe unter „Siteverwaltung und Teamarbeit“ auf
Seite 113.

Remote-Sites bearbeiten
Mit Dreamweaver können Sie eine vorhandene Remote-Site (oder einen
beliebigen Teil einer Remote-Site) auf die lokale Festplatte kopieren und dort
bearbeiten, selbst wenn die ursprüngliche Site nicht mit Dreamweaver erstellt
wurde.

110 Kapitel 3
Selbst wenn Sie nur einen Teil der Remote-Site bearbeiten möchten, müssen Sie
eine lokale Kopie der gesamten Struktur der Remote-Site vom Stamm bis zu den
gewünschten Dateien duplizieren. Wenn beispielsweise der Stammordner der
Remote-Site (mit dem Namen public_html) zwei Ordner enthält (Projekt1 und
Projekt2), und Sie nur mit den HTML-Dateien in Projekt1 arbeiten möchten, ist
es nicht erforderlich, die Dateien aus Projekt2 herunterzuladen. Sie müssen
jedoch den lokalen Stammordner des Ordner public_html und nicht Projekt1
zuordnen.

So bearbeiten Sie eine vorhandene Remote-Site:

1 Erstellen Sie einen lokalen Ordner, der die Site enthalten soll und richten Sie
ihn als lokalen Stammordner ein (siehe „Neue Sites mit Dreamweaver
einrichten“ auf Seite 107).
2 Richten Sie mit den Informationen zur vorhandenen Site eine Remote-Site ein.
Siehe „Remote-Sites einrichten“ auf Seite 132. Achten Sie darauf, dass Sie
dabei den richtigen Stammordner für die Remote-Site wählen.
3 Stellen Sie mit der Schaltfläche Verbinden im Sitefenster eine Verbindung zur
Remote-Site her.
4 Führen Sie einen der folgenden Schritte aus, um die Remote-Site zu
bearbeiten:
• Wenn Sie mit der gesamten Site arbeiten möchten, wählen Sie den
Stammordner der Remote-Site aus. Klicken Sie auf Abrufen, um die gesamte
Site auf die lokale Festplatte herunterzuladen.

Websites planen und einrichten 111


• Wenn Sie nur mit einer Datei oder einem Ordner der Site arbeiten möchten,
suchen Sie die Datei bzw. den Ordner im Bereich Remote-Site des Sitefensters
aus. Klicken Sie auf Abrufen, um diese Datei oder diesen Ordner auf die lokale
Festplatte herunterzuladen. (Dreamweaver dupliziert automatisch den Teil der
Remote-Site-Struktur, der erforderlich ist, um die heruntergeladene Datei im
richtigen Teil der Site-Hierarchie abzulegen.) Wenn Sie nur einen Teil einer Site
bearbeiten, sollten Sie in der Regel auch abhängige Dateien herunterladen.
5 Fahren Sie fort, als würden Sie mit einer leeren Site beginnen: Bearbeiten Sie
Dokumente, betrachten Sie sie in der Vorschau, testen Sie sie und übertragen
Sie sie schließlich wieder auf die Remote-Site.
Weitere Informationen zur Siteverwaltung siehe „Siteverwaltung und Teamarbeit“
auf Seite 113.

Sites aus der Siteliste entfernen


Wenn Sie in Dreamweaver nicht länger mit einer Site arbeiten möchten, können
Sie sie aus der Siteliste entfernen. Die Dateien in der Site werden nicht entfernt.
Anmerkung: Wenn Sie eine Site aus der Liste entfernen, gehen alle Setup-Informationen
über die Site verloren.

So entfernen Sie eine Site aus der Siteliste:

1 Wählen Sie Site > Sites definieren.


2 Wählen Sie einen Sitenamen aus.
3 Klicken Sie auf Entfernen.
Ein Dialogfeld wird eingeblendet, in dem Sie aufgefordert werden,
das Entfernen der Site zu bestätigen.
4 Klicken Sie auf Ja, um die Site aus der Liste zu entfernen.

112 Kapitel 3
4

KAPITEL 4
Siteverwaltung und Teamarbeit
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Über das Sitefenster von Macromedia Dreamweaver können Sie die Dateien Ihrer
lokalen und Remote-Sites verwalten. Sie können damit die Struktur der lokalen
Site auf einem Remote-Server duplizieren, und umgekehrt. Die relativen
Hyperlinks, die Sie in der lokalen Site erstellen, funktionieren nach der
Übertragung der Dateien auch in der Remote-Site, da die Struktur der beiden
Sites identisch ist.
In Dreamweaver können Sie eine lokale Site erstellen, indem Sie mit dem Befehl
Neue Site einen lokalen Stammordner für die Site erstellen (oder indem Sie einen
vorhandenen Ordner zum lokalen Stammordner machen). Weitere Informationen
finden Sie unter „Neue Sites mit Dreamweaver einrichten“ auf Seite 107. Sie
können eine Remote-Site beim Erstellen einer neuen Site definieren oder aber die
entsprechenden Informationen später über den Befehl Sites definieren
hinzufügen. Weitere Informationen finden Sie unter „Remote-Server einer lokalen
Site zuordnen“ auf Seite 132.
Dreamweaver bietet mehrere Funktionen, mit denen Sie eine Site strukturieren
und Dateien an einen oder von einem Remote-Server übertragen können.
Dreamweaver stellt sicher, dass beim Übertragen von Dateien zwischen lokaler
und Remote-Site parallele Datei- und Ordnerstrukturen in beiden Sites
beibehalten werden. Wenn Sie Dateien von einer Site auf eine andere übertragen,
erstellt Dreamweaver automatisch die notwendigen Ordner, sofern diese noch
nicht vorhanden sind. Darüber hinaus können die Dateien zwischen lokaler und
Remote-Site synchronisiert werden, indem Dreamweaver gegebenenfalls Dateien
zwischen den Sites kopiert und nicht mehr benötigte Dateien löscht.

113
Dreamweaver verfügt über mehrere Funktionen, die die Teamarbeit an einer
Website erleichtern. Sie können Dateien auf einem Remote-Server ein- und
auschecken, sodass andere Mitglieder eines Webteams sehen können, wer gerade
an einer bestimmten Datei arbeitet. Sie können Ihre Dateien mit Design Notes
versehen, um anderen Teammitgliedern Informationen über Status und Priorität
einer Datei zu übermitteln. Darüber hinaus können Sie mit der Berichtsfunktion
Berichte über Ihre Site erstellen lassen, um Informationen über den Ein- bzw.
Auscheckstatus anzuzeigen und nach Design Notes zu suchen, die evtl. an Dateien
angefügt worden sind.
Dreamweaver kann in einige der gängigsten Quell- und
Versionskontrollanwendungen integriert werden. Zur Integration der
Quellkontrolle können Sie eine Verbindung zu SourceSafe-Datenbanken
und anderen Quellkontrollsystemen herstellen, die das WebDAV-Protokoll
unterstützen. (Hinweis: Dreamweaver selbst führt keine Versionskontrolle durch.)
Nachdem Sie Ihre Site veröffentlicht haben, können Sie oder ein anderes
Teammittglied die Site weiter mit diesen Tools verwalten. Außerdem ist es
sinnvoll, die Site vor und nach dem Veröffentlichen in regelmäßigen Abständen
auf Fehler zu überprüfen. Weitere Informationen finden Sie unter „Websites
testen und veröffentlichen“ auf Seite 543 .

114 Kapitel 4
Das Sitefenster
Verwenden Sie das Sitefenster für normale Dateiverwaltungsaufgaben, z. B. zum
Erstellen neuer HTML-Dokumente, Anzeigen, Öffnen und Verschieben von
Dateien sowie zum Löschen von Elementen. Mithilfe des Sitefensters können
Sie auch Dateien von der lokalen auf die Remote-Site übertragen, und umgekehrt.
Die Sitemap unterstützt Sie bei der Gestaltung Ihres Navigationssystems (siehe
„Remote-Sites einrichten“ auf Seite 132 und „Sitemap verwenden“ auf Seite 124).

Standardmäßig wird die Remote-Site oder die Sitemap im linken Fensterbereich


angezeigt, die lokale Site im rechten Bereich. Sie können diese Anordnung bei
Bedarf in den Sitevoreinstellungen ändern. Siehe unter „Siteeinstellungen
festlegen“ auf Seite 118.

Steuerelemente des Sitefensters verwenden


Wählen Sie Fenster > Dateien der Site, um das Sitefenster zu öffnen. Mit den
folgenden Schaltflächen und Optionen in der Symbolleiste des Sitefensters
können Sie den Inhalt des Sitefensters definieren und Dateien von der lokalen
auf die Remote-Site übertragen, und umgekehrt:

Siteverwaltung und Teamarbeit 115


Sitedateien zeigt die Dateistruktur der Remote-Site und der lokalen Site in den
zwei Bereichen des Sitefensters. (Welche Site in welchem Fensterbereich – links
oder rechts – angezeigt wird, hängt von den Voreinstellungen ab. Weitere
Informationen finden Sie unter „Siteeinstellungen festlegen“ auf Seite 118.) Die
Sitedateien-Ansicht ist die Standardansicht des Sitefensters.
In der Nur Map-Ansicht erscheint eine grafische Darstellung der Site, die die
Verknüpfung der Dokumente untereinander verdeutlicht. Wenn Sie bei dieser
Schaltfläche die Maustaste gedrückt halten, können Sie Nur Map oder Map
und Dateien aus dem Popupmenü wählen.
Im Site-Popupmenü sind die von Ihnen definierten Sites aufgelistet. Wenn Sie
zu einer anderen Site wechseln möchten, wählen Sie einfach ihren Namen in der
Liste aus. Wählen Sie unten im Menü den Befehl Sites definieren, wenn Sie eine
neue Site hinzufügen oder die Informationen einer vorhandenen Site bearbeiten
möchten (siehe „Remote-Sites einrichten“ auf Seite 132).
Verbinden/Trennen (bei FTP, WebDAV-Protokoll und SourceSafe) stellt eine
Verbindung zur Remote-Site her oder trennt sie. Standardmäßig trennt
Dreamweaver die Verbindung zur Remote-Site, wenn nach 30 Minuten keine
Bewegungen festgestellt wurden (nur bei FTP). Wenn Sie das Zeitlimit ändern
möchten, wählen Sie Bearbeiten > Voreinstellungen und wählen Sie Site-FTP.
Aktualisieren aktualisiertdie Verzeichnislisten der lokalen und der Remote-Site.
Mit dieser Schaltfläche können Sie die Verzeichnislisten manuell aktualisieren,
wenn Sie im Dialogfeld Site-Definition die Option Liste mit lokalen Dateien
automatisch aktualisieren oder Liste mit Remote-Dateien automatisch
aktualisieren deaktiviert haben (siehe „Remote-Server einer lokalen Site
zuordnen“ auf Seite 132). Beispiel: Wenn Sie nach dem Öffnen des Sitefensters
ein Laufwerk mounten, auf dem sich eine Remote-Site befindet, sehen Sie die
Verzeichnisliste dieser Remote-Site erst, wenn Sie auf Aktualisieren klicken.
Abrufen kopiert die ausgewählten Dateien von der Remote-Site in Ihre lokale Site
(wobei eventuell vorhandene lokale Versionen der Dateien überschrieben werden).
Wenn Sie das Kontrollkästchen Ein-/Auschecken von Dateien aktivieren
markiert haben, sind die lokalen Kopien schreibgeschützt, und die Dateien
können von anderen Teammitgliedern auf der Remote-Site ausgecheckt werden.
Ist das Kontrollkästchen Ein-/Auschecken von Dateien aktivieren nicht markiert,
wird die Datei mit Lese- und Schreibberechtigung in die lokale Site kopiert.
Hinweis: Es werden nur die Dateien kopiert, die im momentan aktiven Bereich
des Sitefensters ausgewählt sind. Ist der Remote-Sitebereich aktiv, werden die
ausgewählten Remote-Dateien in die lokale Site kopiert. Ist der Bereich Lokaler
Ordner aktiv, werden die Remote-Versionen der ausgewählten lokalen Dateien
in die lokale Site kopiert. Weitere Informationen finden Sie unter „Dateien von
einem Remote-Server abrufen“ auf Seite 152.

116 Kapitel 4
Bereitstellen kopiert die ausgewählten Dateien von der lokalen Site auf die
Remote-Site. Hinweis: Es werden nur die Dateien kopiert, die im momentan
aktiven Bereich des Sitefensters ausgewählt sind. Ist der Bereich Lokaler Ordner
aktiv, werden die ausgewählten lokalen Dateien in die Remote-Site kopiert.
Ist der Remote-Sitebereich aktiv, werden die lokalen Versionen der ausgewählten
Remote-Dateien in die Remote-Site kopiert. Weitere Informationen finden Sie
unter „Dateien auf einem Remote-Server bereitstellen“ auf Seite 153.
Anmerkung: Wenn Sie eine Datei hinzufügen, die in der Remote-Site noch nicht
vorhanden ist, und die Option Ein-/Auschecken von Dateien aktivieren markiert ist,
wird die Datei als ausgecheckt in die Remote-Site eingefügt. Wählen Sie stattdessen die
Option Einchecken, um eine Datei ohne den Status ausgecheckt hinzuzufügen.

Auschecken überträgt eine Kopie der Datei vom Remote-Server an die lokale Site
(wobei gegebenenfalls die vorhandene lokale Kopie der Datei überschrieben wird)
und markiert die Datei auf dem Server als ausgecheckt. Ist das Kontrollkästchen
Ein-/Auschecken von Dateien aktivieren für die aktuelle Site nicht markiert,
steht diese Option nicht zur Verfügung. Siehe .„Dateien auf einem Remote-Server
ein- und auschecken“ auf Seite 141.
Einchecken überträgt eine Kopie der lokalen Datei an den Remote-Server und
ermöglicht es anderen Mitarbeitern, die Datei zu bearbeiten. Die lokale Datei
wird dadurch schreibgeschützt. Diese Option ist nicht verfügbar, wenn die
Option Ein-/Auschecken von Dateien aktivieren im Dialogfeld Site-Definition
für die aktuelle Site deaktiviert ist. Siehe unter „Dateien auf einem Remote-Server
ein- und auschecken“ auf Seite 141.
Aktuellen Task stoppen bricht die jeweils aktuelle Aktion ab, auch das Abrufen
und Bereitstellen von Dateien. Die Schaltfläche (ein rotes Stoppschild mit einem
weißen X) erscheint nur dann in der unteren rechten Ecke des Fensters, wenn
gerade ein Vorgang ausgeführt wird. Beachten Sie, dass der Server unter
Umständen etwas länger braucht, um die Stoppaufforderung zu verarbeiten. Das
bedeutet, dass die Datenübertragung u. U. nicht sofort unterbrochen wird. Diese
Schaltfläche wird nur angezeigt, wenn gerade ein Vorgang ausgeführt wird.
Mit der Dreieckschaltfläche links unten im Sitefenster können Sie das Sitefenster
auf einen Fensterbereich reduzieren bzw. auf zwei Bereiche erweitern.

Siteverwaltung und Teamarbeit 117


Siteeinstellungen festlegen
Wählen Sie Bearbeiten > Voreinstellungen und anschließend Site-FTP. Legen Sie
mit den folgenden Siteeinstellungen fest, welche Datenübertragungsfunktionen
im Sitefenster verfügbar sind.

Immer anzeigen legt fest, welche Site (lokal oder Remote) immer angezeigt wird
und in welchem Bereich des Sitefensters (links oder rechts) die lokalen Dateien
und Remote-Dateien angezeigt werden sollen. Standardmäßig wird die lokale Site
immer rechts angezeigt. Der nicht ausgewählte Bereich (standardmäßig der linke)
kann nach Belieben verändert werden. In diesem Bereich können entweder die
Sitemap oder die Dateien der anderen Site (standardmäßig die Remote-Site)
angezeigt werden.
Abhängige Dateien zeigt eine Eingabeaufforderung für die Übertragung von
abhängigen Dateien an (beispielsweise Bilder, externe Stylesheets und andere
Dateien, auf die in der HTML-Datei verwiesen wird), die der Browser zusammen
mit der HTML-Datei lädt. Standardmäßig sind Aufforderung bei Abrufen/
Auschecken und Aufforderung bei Bereitstellen/Einchecken markiert.
Anmerkung: Soll die Eingabeaufforderung Abhängige Dateien einschließen auch
angezeigt werden, wenn diese Optionen deaktiviert sind, halten Sie die Alt-Taste
(Windows) bzw. die Wahltaste (Macintosh) gedrückt, während Sie die Befehle Abrufen,
Bereitstellen, Einchecken oder Auschecken wählen.

FTP-Verbindung legtfest, ob die Verbindung zur Remote-Site getrennt wird,


wenn nach der angegebenen Minutenanzahl keinerlei Aktivität aufgetreten ist.

118 Kapitel 4
FTP-Zeitüberschreitung gibt an, wie viele Sekunden lang Dreamweaver versucht,
eine Verbindung zum Remote-Server herzustellen. Reagiert der Server nicht
innerhalb des angegebenen Zeitraums, wird eine entsprechende Warnmeldung
angezeigt.
Firewall-Host gibt die Adresse des Proxy-Servers an, zu dem die Verbindung
hergestellt wird, wenn Sie sich hinter einer Firewall befinden. Wenn Sie keine
Firewall eingerichtet haben, lassen Sie dieses Feld leer.
Anmerkung: Wenn Sie sich hinter einer Firewall befinden, markieren Sie im Dialogfeld
Site-Definition das Kontrollkästchen Firewall verwenden. Weitere Informationen finden
Sie unter „Remote-Server einer lokalen Site zuordnen“ auf Seite 132.

Firewall-Anschluss bestimmt, über welchen Anschluss in der Firewall eine


Verbindung zum Remote-Server hergestellt wird. Der Standardanschluss für
FTP ist 21. Wenn Sie einen anderen Anschluss verwenden möchten, geben Sie
die Nummer in dieses Feld ein.
Bereitstellungsoptionen: Dateien vor Bereitstellen speichern legt
fest, dass nicht
gespeicherte Dateien automatisch gespeichert werden sollen, bevor sie in der
Remote-Site bereitgestellt werden.
Sites definieren öffnet das Dialogfeld Sites definieren, in dem Sie eine neue Site
erstellen oder eine vorhandene Site bearbeiten können. Weitere Informationen
finden Sie unter „Remote-Server einer lokalen Site zuordnen“ auf Seite 132.
Außerdem können Sie festlegen, ob die Dateitypen, die Sie übertragen möchten,
im ASCII-Format (Text) oder binär übertragen werden sollen. Öffnen Sie dazu
die Datei „FTPExtensionMap.txt“ im Ordner „Dreamweaver/Configuration“
(bzw. „FTPExtensionMapMac.txt“ auf dem Mac). Sie können die Liste mit den
Übertragungsformaten der einzelnen Dateitypen modifizieren und Einträge
löschen sowie eigene Dateitypen hinzufügen. Ist in dieser Datei keine
Dateierweiterung angegeben, überträgt Dreamweaver die Datei automatisch im
Binärmodus.
Anmerkung: Beim Macintosh enthält die Datei „FTPExtensionMapMac.txt“ zudem
Informationen über die Zuordnung von Dateierweiterungen zu Macintosh-Creators und
Dateitypen. Mit dieser Zuordnung kann eine übertragene Datei das richtige Symbol
erhalten und mit der richtigen Anwendung geöffnet werden, wenn Sie im Finder auf die
Datei doppelklicken.

Beachten Sie, dass bei einer Dateiübertragung im ASCII-Modus die


Voreinstellungen für Zeilenumbrüche ignoriert werden. Weitere Informationen
finden Sie unter „Einstellungen für die Codeformatierung“ auf Seite 374.

Siteverwaltung und Teamarbeit 119


Dateien im Sitefenster anzeigen und öffnen
Verwenden Sie das Sitefenster zum Anzeigen von lokalen und Remote-Sites,
Hinzufügen und Entfernen von Sitedokumenten oder zum Darstellen der
Navigationsstruktur Ihrer Site in einer Sitemap. Weitere Informationen finden
Sie unter „Das Sitefenster“ auf Seite 115.
Bei beiden Sitefensteransichten können Sie festlegen, dass die lokale Site, die
Remote-Site oder eine grafische Map der lokalen Site angezeigt wird. Sie können
zum Beispiel in einem Fensterbereich die lokale Site und im anderen die Remote-
Site anzeigen oder die lokale Site in einem Fensterbereich in der Sitedateien-
Ansicht und im anderen in der Sitemap-Ansicht anzeigen. (Nähere Informationen
zum Anzeigen von Sitemaps finden Sie unter „Die Sitemap“ auf Seite 124.)

Lokale Sites anzeigen


Im Sitefenster wird der Inhalt von lokalen Sites und Remote-Sites angezeigt.
Lokale Sites können im Sitefenster als Dateiliste, visuelle Map oder in beiden
Darstellungen angezeigt werden. Remote-Sites können nur als Dateiliste angezeigt
werden. (Um eine Remote-Site anzeigen zu können, müssen Sie diese zunächst
einrichten. Weitere Informationen finden Sie unter „Remote-Sites einrichten“ auf
Seite 132.)

Führen Sie einen der folgenden Schritte aus, um Dateien der lokalen Site
anzuzeigen:

• Wählen Sie Fenster > Dateien der Site.


• Wenn im Sitefenster die Sitemap angezeigt wird, klicken Sie auf die
Schaltfläche Sitedateien.

Im Sitefenster werden zwei Gruppen von Dateien angezeigt: Auf der einen
Seite des Fensters werden die Dateien der lokalen Site aufgelistet, auf der
anderen Seite die entsprechenden Remote-Sitedateien.
Anmerkung: Wenn Sie eine lokale Site anzeigen, zu der es keine entsprechende
Remote-Site gibt, bleibt die Remote-Site-Ansicht leer.

120 Kapitel 4
Führen Sie einen der folgenden Schritte aus, um die Sitemap und die Sitedateien
anzuzeigen:

• Wählen Sie Fenster > Sitemap. (Wenn bisher nur die Sitemap ohne die
Sitedateien angezeigt wurde, wird mit diesem Befehl nur die Map angezeigt.)
• Klicken Sie im Sitefenster auf die Schaltfläche Sitemap oder halten Sie die
Maustaste auf der Schaltfläche Sitemap gedrückt und wählen Sie im
Popupmenü die Option Map und Dateien.

Das Sitefenster bietet zwei Ansichten: die lokale Site in Form einer Map mit
der Bezeichnung Site-Navigation und – je nach Ihren Voreinstellungen –
entweder die lokalen Sitedateien (Lokaler Ordner) oder die Dateien der
Remote-Site (Remote-Site).

So zeigen Sie nur die Sitemap an:

Halten Sie die Maustaste auf der Schaltfläche Sitemap gedrückt und wählen Sie
im Popupmenü die Option Nur Map. Weitere Informationen finden Sie unter
„Sitemap verwenden“ auf Seite 124.

Layout des Sitefensters ändern


Standardmäßig wird die Remote-Site (oder die Map der lokalen Site) auf der
linken und die lokale Site auf der rechten Seite des Sitefensters angezeigt.
Sie können diese Anordnung aber auch umkehren.

So ändern Sie das Layout des Sitefensters:

1 Wählen Sie Bearbeiten > Voreinstellungen und dann die Kategorie Site-FTP.
2 Führen Sie einen der folgenden Schritte aus:
• Wählen Sie im Popupmenü Immer anzeigen die Option Lokale Dateien
und legen Sie dann fest, ob die lokalen Dateien rechts oder links im Sitefenster
angezeigt werden sollen.
Die lokale Site erscheint nun auf der gewählten Seite und die Remote-Site
(bzw. die Sitemap) auf der anderen Seite. Wenn Sie diese Option wählen,
wird die lokale Site immer im Sitefenster angezeigt, auch wenn Sie das Fenster
auf einen Fensterbereich reduzieren.

Siteverwaltung und Teamarbeit 121


• Wählen Sie aus dem Popupmenü Immer anzeigen die Option Remote-
Dateien und legen Sie dann fest, ob die Remote-Dateien links oder rechts
angezeigt werden sollen.
Die Remote-Site erscheint auf der gewählten Seite und die lokale Site
(bzw. die Sitemap, die immer lokal ist) auf der anderen Seite. Wenn Sie diese
Option wählen, werden die Dateien der Remote-Site immer im Sitefenster
angezeigt, auch wenn Sie das Fenster auf einen Fensterbereich reduzieren.
3 Klicken Sie auf OK, um die Änderungen anzuwenden und das Dialogfeld
Voreinstellungen zu schließen.

So ändern Sie den Ansichtsbereich:

Führen Sie im Sitefenster einen der folgenden Schritte aus:


• Ziehen Sie den Balken, der die beiden Ansichtsbereiche trennt, nach links
oder rechts, um den linken bzw. rechten Fensterbereich zu verkleinern oder
zu vergrößern.
• Blättern Sie mithilfe der Bildlaufleisten am unteren Rand des Sitefensters durch
den Inhalt der Ansichtsbereiche.
• Ziehen Sie in der Sitemap den Pfeil über einer Datei nach links oder rechts,
um den Abstand zwischen den Dateisymbolen zu ändern.

So reduzieren Sie das Sitefenster auf eine Ansicht:

Klicken Sie auf die kleine weiße Dreieckschaltfläche links unten im Sitefenster.
Anmerkung: Nun ist nur noch die Ansicht zu sehen, die Sie im Dialogfeld
Voreinstellungen als die immer anzuzeigende festgelegt haben.

Nähere Informationen über Site-Voreinstellungen finden Sie unter


„Siteeinstellungen festlegen“ auf Seite 118.

Mit Dateien in der Sitedateien-Ansicht arbeiten


In der Sitedateien-Ansicht können Sie lokale Sites und Remote-Sites als
Dateilisten anzeigen, Dateien öffnen und umbenennen, neue Ordner oder
Dateien in eine Site einfügen oder die Ansicht einer geänderten Site aktualisieren.
Aus der Sitedateien-Ansicht können Sie auch ersehen, welche Dateien (auf beiden
Seiten) seit ihrer letzten Übertragung aktualisiert wurden. Nähere Informationen
zum Synchronisieren der lokalen Site mit der Remote-Site finden Sie unter
„Dateien in der lokalen Site und der Remote-Site synchronisieren“ auf Seite 155.

So zeigen Sie die Dateien einer Site an:

Führen Sie einen der folgenden Schritte aus:

122 Kapitel 4
• Wählen Sie Fenster > Dateien der Site, um das Sitefenster in der Sitedateien-
Ansicht zu öffnen.
• Klicken Sie im Sitefenster auf die Schaltfläche Sitemap.

So öffnen Sie eine Datei über die Sitedateien-Ansicht:

Doppelklicken Sie auf das Symbol der jeweiligen Datei.

So fügen Sie einen neuen Ordner in eine Site ein:

1 Vergewissern Sie sich, dass im Sitefenster eine Datei oder ein Ordner
ausgewählt ist. Der neue Ordner wird im aktuell ausgewählten Ordner bzw. in
dem Ordner mit der aktuell ausgewählten Datei erstellt.
2 Wählen Sie Datei > Neuer Ordner im Sitefenster (Windows) bzw. Site >
Sitedateien-Ansicht > Neuer Ordner (Macintosh).
Diese Option befindet sich auch im Kontextmenü innerhalb des Sitefensters.
3 Geben Sie einen Namen für den neuen Ordner ein.

So fügen Sie eine neue Datei in eine Site ein:

1 Vergewissern Sie sich, dass im Sitefenster eine Datei oder ein Ordner
ausgewählt ist. Die neue Datei wird im aktuell ausgewählten Ordner bzw. in
dem Ordner mit der aktuell ausgewählten Datei erstellt.
2 Wählen Sie Datei > Neue Datei im Sitefenster (Windows) bzw. Site >
Sitedateien-Ansicht > Neue Datei (Macintosh).
Diese Option befindet sich auch im Kontextmenü innerhalb des Sitefensters.
3 Geben Sie einen Namen für die neue Datei ein.

So benennen Sie eine Datei oder einen Ordner einer Site um:

1 Wählen Sie im Sitefenster die Datei oder den Ordner aus, die/den Sie
umbenennen möchten und führen Sie einen der folgenden Schritte aus, um das
Namensfeld neben der Datei oder dem Ordner zu aktivieren:
• Wählen Sie Datei > Umbenennen (Windows) bzw. Site > Umbenennen
(Macintosh)
• Klicken Sie zunächst einmal und nach kurzer Pause noch einmal auf die Datei.
2 Geben Sie den neuen Namen ein und drücken Sie die Eingabetaste.

So aktualisieren Sie die Sitedateien-Ansicht, nachdem Sie außerhalb von


Dreamweaver Änderungen an der Site vorgenommen haben:

Führen Sie einen der folgenden Schritte aus:

Siteverwaltung und Teamarbeit 123


• Wählen Sie Ansicht > Lokal aktualisieren im Sitefenster (Windows) bzw.
Site > Sitedateien-Ansicht > Lokal aktualisieren (Macintosh).
• Wählen Sie Ansicht > Remote aktualisieren im Sitefenster (Windows) bzw.
Site > Sitedateien-Ansicht > Remote aktualisieren (Macintosh).
• Klicken Sie im Sitefenster auf die Schaltfläche Aktualisieren, um beide
Fensterbereiche zu aktualisieren.

So finden Sie ausgecheckte Dateien und wählen sie aus:

Wählen Sie Bearbeiten > Ausgecheckte Dateien auswählen im Sitefenster


(Windows) bzw. Site > Sitedateien-Ansicht > Ausgecheckte Dateien auswählen
(Macintosh).

So finden Sie neuere lokale Dateien und wählen sie aus:

Wählen Sie Bearbeiten > Neuere auswählen (lokal) im Sitefenster (Windows)


bzw. Site > Sitedateien-Ansicht > Neuere auswählen (lokal) (Macintosh).

So finden Sie neuere Remote-Dateien und wählen sie aus:

Wählen Sie Bearbeiten > Neuere auswählen (Remote) im Sitefenster (Windows)


bzw. Site > Sitedateien-Ansicht > Neuere auswählen (Remote) (Macintosh).
Nähere Informationen zum Arbeiten mit lokalen und Remote-Sites finden Sie
unter „Ein- und Auschecken“ auf Seite 140.

Die Sitemap
Mit der Sitemap können Sie eine lokale Site visuell als verknüpfte Symbole
anzeigen, neue Dateien in eine Site einfügen und Hyperlinks hinzufügen,
modifizieren und entfernen. Die Sitemap eignet sich besonders gut zum
Entwerfen einer Sitestruktur. Sie können schnell und einfach die gesamte
Sitestruktur einrichten und anschließend eine grafische Darstellung der
Sitemap erstellen.
Anmerkung: Die Sitemap-Ansicht kann nur für lokale Sites verwendet werden. Wenn Sie
eine Map einer Remote-Site erstellen möchten, kopieren Sie den Inhalt der Remote-Site
in einen Ordner auf Ihrer lokalen Festplatte und definieren Sie die Site mit dem Befehl
Sites definieren als lokale Site.

Sitemap verwenden
Um die Sitemap anzeigen zu können, müssen Sie zunächst eine Homepage
für Ihre Site definieren. Die Homepage der Site bildet den Ausgangspunkt
der Sitemap.

124 Kapitel 4
So definieren Sie eine Homepage für Ihre Site:

1 Wählen Sie Site > Sites definieren.


2 Wählen Sie Neu oder Bearbeiten, um eine neue Site zu definieren bzw. eine
vorhandene zu öffnen.
Das Dialogfeld Site-Definition wird eingeblendet.
3 Wählen Sie Sitemap-Layout.
4 Klicken Sie auf das Ordnersymbol, um eine Homepage für die Site
auszuwählen oder geben Sie in das Feld Homepage einen Dateipfad ein.

Führen Sie einen der folgenden Schritte aus, um eine Sitemap anzuzeigen:

• Wählen Sie Fenster > Sitemap, um das Sitefenster zu öffnen.


• Klicken Sie im Sitefenster auf die Schaltfläche Sitemap.
Anmerkung: Wenn noch keine Homepage definiert wurde oder Dreamweaver in der
aktuellen Site keine Datei mit dem Namen index.html oder index.htm finden kann, die als
Homepage dienen soll, wird ein Dialogfeld angezeigt, das Sie dazu auffordert, über den
Befehl Sites definieren eine Homepage auszuwählen. Wählen Sie die gewünschte Site
und klicken Sie auf Bearbeiten. Wählen Sie dann im Dialogfeld Site-Definition die
Option Sitemap-Layout.

HTML-Dateien und anderer Seiteninhalt werden in der Sitemap durch Symbole


dargestellt. Hyperlinks werden in der Reihenfolge angezeigt, in der sie im HTML-
Quellcode auftreten.
• Roter Text stellt einen fehlerhaften Hyperlink dar.
• Blauer Text mit einem Globus-Symbol kennzeichnet eine Datei, die sich
in einer anderen Site befindet, oder einen besonderen Hyperlink (wie
beispielsweise eine E-Mail-Verknüpfung oder einen Skript-Hyperlink).
• Ein grünes Häkchen kennzeichnet eine Datei, die Sie ausgecheckt haben.
• Ein rotes Häkchen kennzeichnet eine Datei, die von einer anderen Person
ausgecheckt wurde.
• Ein Sperrsymbol in der Form eines Vorhängeschlosses kennzeichnet eine
schreibgeschützte Datei (Windows) oder eine gesperrte Datei (Macintosh).

Siteverwaltung und Teamarbeit 125


Standardmäßig werden in der Sitemap zwei Ebenen der Sitestruktur angezeigt,
wobei die aktuelle Homepage als Ausgangspunkt dient. Klicken Sie auf die Plus-
(+) und Minuszeichen (–) neben den Seiten, um die Seiten unterhalb der zweiten
Ebene ein- oder auszublenden.

Versteckte und abhängige Dateien werden in der Sitemap standardmäßig nicht


angezeigt. Bei versteckten Dateien handelt es sich um HTML-Dateien, die als
versteckt markiert wurden. Abhängige Dateien enthalten keinen HTML-
Seiteninhalt, sondern beispielsweise Bilder, Vorlagen und Shockwave- oder Flash-
Dateien. Siehe unter „Sitemap-Layout modifizieren“ auf Seite 126 und „Sitemap-
Dateien ein- und ausblenden“ auf Seite 129.

Sitemap-Layout modifizieren
Mit den Optionen für das Sitemap-Layout können Sie das Erscheinungsbild einer
Sitemap anpassen. Sie können festlegen, welche Datei als Homepage dient,
wie viele Spalten angezeigt werden, ob die Symbole mit dem Dateinamen oder
dem Seitentitel beschriftet sind und ob auch versteckte und abhängige Dateien
angezeigt werden.

So modifizieren Sie das Sitemap-Layout:

1 Führen Sie einen der folgenden Schritte aus, um das Dialogfeld Site-Definition
zu öffnen:
• Wählen Sie Site > Sites definieren und klicken Sie anschließend auf
Bearbeiten. Wählen Sie links in der Kategorieliste die Option Sitemap-Layout.
• Wählen Sie Ansicht > Layout (Windows) bzw. Site > Sitemap-Ansicht >
Layout (Macintosh).
2 Klicken Sie auf das Ordnersymbol, um eine Homepage für die Site
auszuwählen, oder geben Sie in das Feld Homepage einen Dateipfad ein.
Die Homepage muss in der lokalen Site vorhanden sein.
Wenn Sie keine Homepage angeben und Dreamweaver im Stammordner keine
Datei mit dem Namen index.html oder index.htm finden kann, werden Sie
beim Öffnen der Sitemap aufgefordert, eine Homepage auszuwählen.

126 Kapitel 4
3 Nehmen Sie bei den Spaltenoptionen die gewünschten Einstellungen vor:
• Geben Sie im Feld Anzahl der Spalten eine Zahl ein, um die Anzahl der Seiten
festzulegen, die pro Reihe im Sitemap-Fenster angezeigt werden sollen.
• Geben Sie in das Feld Spaltenbreite eine Zahl ein, um die Breite der Sitemap-
Spalten in Pixel festzulegen.
4 Wählen Sie unter Symbolbeschriftungen, ob die Dokumentsymbole in der
Sitemap mit dem Dateinamen oder dem Seitentitel beschriftet werden sollen.
5 Wählen Sie unter Optionen aus, welche Dateien in der Sitemap angezeigt
werden sollen:
• Markieren Sie die Option Als versteckt markierte Dateien anzeigen, um
HTML-Dateien, die als versteckt markiert wurden, in der Sitemap anzuzeigen.
Name und Hyperlinks einer versteckten Seite werden kursiv dargestellt.
Informationen über versteckte Dateien finden Sie unter „Sitemap-Dateien ein-
und ausblenden“ auf Seite 129.
• Markieren Sie die Option Abhängige Dateien anzeigen, um alle abhängigen
Dateien in der Site-Hierarchie anzuzeigen. Eine abhängige Datei hat keinen
HTML-Inhalt, sondern enthält beispielsweise Bilder. Der Browser lädt den
Inhalt einer abhängigen Datei zusammen mit der Hauptseite.

Mit Seiten in der Sitemap arbeiten


Wenn Sie mit der Sitemap arbeiten, können Sie Seiten auswählen oder zum
Bearbeiten öffnen, neue Seiten in die Site einfügen, Hyperlinks zwischen
Dateien erstellen und den Seitentitel ändern.

Führen Sie einen der folgenden Schritte aus, um mehrere Seiten in der Sitemap
auszuwählen:

• Wenn Sie mehrere aufeinanderfolgende Dateien auswählen möchten,


klicken Sie bei gedrückter Umschalttaste auf diese Dateien.
• Klicken Sie auf einen leeren Bereich der Ansicht und ziehen Sie den Mauszeiger
um die Dateien herum, die Sie auswählen möchten.
• Wenn Sie mehrere Dateien auswählen möchten, die nicht direkt
hintereinander aufgelistet sind, klicken Sie bei gedrückter Strg-Taste
(Windows) bzw. Befehlstaste (Macintosh) auf diese Dateien.

Führen Sie einen der folgenden Schritte aus, um eine Seite zum Bearbeiten
zu öffnen:

• Doppelklicken Sie auf die Datei.


• Wählen Sie die Datei aus und wählen Sie dann Datei > Auswahl öffnen
(Windows) bzw. Site > Öffnen (Macintosh).

Siteverwaltung und Teamarbeit 127


Führen Sie einen der folgenden Schritte aus, um eine vorhandene Datei in eine
Site einzufügen:

• Ziehen Sie eine Datei aus Windows Explorer oder dem Macintosh Finder
auf eine Datei in der Sitemap. Die Seite wird in die Site eingefügt. Dabei
wird ein Hyperlink zwischen der Seite und der Datei, auf der Sie die Seite
gezogen haben, erstellt.
• Wählen Sie Site > Verknüpfen mit bestehender Datei (Windows) bzw. Site >
Sitemap-Ansicht > Verknüpfen mit bestehender Datei (Macintosh).

So erstellen Sie eine neue Datei und fügen einen Hyperlink hinzu:

1 Wählen Sie in der Sitemap eine HTML-Datei aus und führen Sie dann einen
der folgenden Schritte aus:
• Wählen Sie Site > Verknüpfen mit neuer Datei (Windows) bzw. Site >
Sitemap-Ansicht > Verknüpfen mit neuer Datei (Macintosh).
• Wählen Sie im Kontextmenü die Option Verknüpfen mit neuer Datei.
2 Geben Sie im Dialogfeld Verknüpfen mit neuer Datei im Feld Dateiname
einen Dateinamen ein.
3 Geben Sie im Feld Titel einen Seitentitel für die Datei ein.
4 Geben Sie im Feld Text des Hyperlinks den Text für den Hyperlink ein,
der die ausgewählte Datei mit der neuen verbindet. Der Text und der
Hyperlink erscheinen in der ausgewählten Datei.
5 Klicken Sie auf OK.
Die Datei wird im selben Ordner wie die ausgewählte Datei gespeichert. Wenn
Sie eine neue Datei in einen versteckten Teil der Struktur einfügen, ist auch die
neue Datei versteckt. Siehe unter „Sitemap-Dateien ein- und ausblenden“ auf
Seite 129.

So modifizieren Sie den Titel einer Seite:

1 Stellen Sie sicher, dass die Option Seitentitel anzeigen aktiviert ist.
Wählen Sie Ansicht > Seitentitel anzeigen (Windows) bzw. Site > Sitemap-
Ansicht > Seitentitel anzeigen (Macintosh).
2 Führen Sie einen der folgenden Schritte aus:
• Wählen Sie eine Seite aus und klicken Sie auf den Titel. Wenn der Titel als
bearbeitbares Feld dargestellt wird, können Sie einen neuen Dokumenttitel
eingeben.
• Wählen Sie eine Seite aus und wählen Sie dann Datei > Umbenennen
(Windows) bzw. Site > Umbenennen (Macintosh).
Anmerkung: Wenn Sie im Sitefenster arbeiten, aktualisiert Dreamweaver automatisch
alle Hyperlinks zu Dateien, deren Namen sich geändert haben.

128 Kapitel 4
Führen Sie einen der folgenden Schritte aus, um die Homepage zu ändern:

• Klicken Sie im Bereich Lokaler Ordner des Sitefensters auf die Datei, die als
Homepage festgelegt werden soll und wählen Sie im Kontextmenü die Option
Als Homepage festlegen.
• Wählen Sie in der Sitemap eine Datei aus und wählen Sie Site > Neue
Homepage (Windows) bzw. Site > Sitemap-Ansicht > Neue Homepage
(Macintosh), um eine neue Homepage zu erstellen.
• Klicken Sie in der Ansicht Lokaler Ordner des Sitefensters auf die Datei,
die zur Homepage werden soll und wählen Sie Site > Als Homepage
einrichten (Windows) bzw. Site > Sitemap-Ansicht > Als Homepage
einrichten (Macintosh), um eine vorhandene Seite zur Homepage zu machen.
• Wählen Sie Site > Sites definieren und klicken Sie auf Bearbeiten. Wählen Sie
im Dialogfeld Site-Definition die Option Sitemap-Layout.

So aktualisieren Sie die Anzeige der Sitemap, nachdem Änderungen


vorgenommen wurden:

1 Klicken Sie auf eine beliebige Stelle der Sitemap, um die Auswahl aller Dateien
aufzuheben.
2 Wählen Sie Ansicht > Lokal aktualisieren (Windows) bzw. Site > Sitemap-
Ansicht > Lokal aktualisieren (Macintosh).

Sitemap-Dateien ein- und ausblenden


Sie können das Layout der Sitemap modifizieren und sowohl versteckte als auch
abhängige Dateien aus- oder einblenden. Diese Funktion ist nützlich, wenn Sie
wichtige Themen oder Inhalte hervorheben bzw. weniger wichtiges Material nicht
hervorheben möchten.
Um eine Datei in der Sitemap auszublenden, müssen Sie sie zunächst als versteckt
markieren. Wenn Sie eine Datei ausblenden, werden auch die zugehörigen
Hyperlinks ausgeblendet. Blenden Sie eine als versteckt markierte Datei ein,
werden auch das Dateisymbol und die zugehörigen Hyperlinks in der Sitemap-
Ansicht angezeigt, die Namen werden jedoch kursiv dargestellt.

So markieren Sie Dateien als versteckt:

1 Wählen Sie in der Sitemap eine oder mehrere Dateien aus.


2 Wählen Sie Ansicht > Hyperlink einblenden/ausblenden (Windows) bzw.
Site > Sitemap-Ansicht > Hyperlink einblenden/ausblenden (Macintosh).

Führen Sie einen der folgenden Schritte aus, um als versteckt markierte Dateien
ein- oder auszublenden:

• Wählen Sie Ansicht > Als verborgen markierte Dateien anzeigen (Windows)
bzw. Site > Sitemap-Ansicht > Als verborgen markierte Dateien anzeigen
(Macintosh).

Siteverwaltung und Teamarbeit 129


• Wählen Sie Ansicht > Layout (Windows) bzw. Site > Sitemap-Ansicht >
Layout (Macintosh), um das Dialogfeld Site-Definition zu öffnen, und
markieren Sie das Kontrollkästchen Als versteckt markierte Dateien anzeigen.
Abhängige Dateien sind standardmäßig ausgeblendet. Sie können wählen,
ob sie in der Sitemap angezeigt werden sollen.

Führen Sie einen der folgenden Schritte aus, um abhängige Dateien einzublenden:

• Wählen Sie Ansicht > Abhängige Dateien anzeigen (Windows) bzw. Site >
Sitemap-Ansicht > Abhängige Dateien anzeigen (Macintosh).
• Wählen Sie Ansicht > Layout (Windows) oder Site > Sitemap-Ansicht >
Layout (Macintosh), um das Dialogfeld Site-Definition zu öffnen, und
markieren Sie das Kontrollkästchen Abhängige Dateien anzeigen.

So heben Sie bei einer Datei die Markierung „versteckt“ wieder auf:

1 Wählen Sie in der Sitemap eine oder mehrere Dateien aus.


2 Wählen Sie Ansicht > Als verborgen markierte Dateien anzeigen (Windows)
bzw. Site > Sitemap-Ansicht > Als verborgen markierte Dateien anzeigen
(Macintosh).
3 Wählen Sie Ansicht > Hyperlink einblenden/ausblenden (Windows) bzw.
Site > Sitemap-Ansicht > Hyperlink einblenden/ausblenden (Macintosh).

Die Site von einem Zweig der Struktur aus anzeigen


Sie können die Details eines bestimmten Site-Bereichs anzeigen, indem Sie
den Fokus auf einen Zweig der Sitemap richten.

So zeigen Sie einen anderen Zweig an:

Wählen Sie die gewünschte Seite aus und wählen Sie dann Ansicht > Als
Stammordner anzeigen (Windows) bzw. Site > Sitemap-Ansicht > Als
Stammordner anzeigen (Macintosh).
Die Sitemap wird im Fenster so neu gezeichnet, als ob die angegebene Seite der
Stamm der Site wäre. Im Feld Site-Navigation über der Sitemap wird der Pfad
von der Homepage zur angegebenen Seite angezeigt. Sie können ein beliebiges
Element im Pfad auswählen, um die Sitemap von diesem Element aus anzuzeigen.
Klicken Sie dazu einmal auf das gewünschte Element.

So blenden Sie die Zweige ein und aus:

Klicken Sie auf das Plus- (+) oder Minuszeichen (–), um den Zweig zu erweitern
oder zu reduzieren.

130 Kapitel 4
Sitemap speichern
Sie können die Sitemap als Bild speichern und anschließend in einem Bild-Editor
anzeigen und drucken.

So erstellen Sie eine Bilddatei der aktuellen Sitemap:

1 Führen Sie von der Sitemap aus folgende Schritte aus:


• Wählen Sie in Windows Datei > Sitemap speichern. Geben Sie im Dialofeld
Sitemap speichern einen Namen im Feld Dateiname ein. Wählen Sie im
Popupmenü Dateityp die Option .bmp oder .png aus.
• Wählen Sie auf dem Macintosh Site > Sitemap-Ansicht > Sitmap speichern >
Sitemap als Bild speichern oder Site > Sitemap-Ansicht > Sitemap
speichern > Sitemap als JPEG speichern.
2 Wählen Sie einen Speicherort, geben Sie einen Namen für das Bild ein
und klicken Sie auf Speichern.

Dateien im Sitefenster suchen


Sie können im Dokumentfenster oder im Sitefenster nach einer Datei in der
lokalen oder der Remote-Site suchen. Nähere Informationen über das Suchen
und Ersetzen von Dateien finden Sie unter „Text, Tags und Attribute suchen und
ersetzen“ auf Seite 279.
Wählen Sie Fenster > Dateien der Site, um das Sitefenster anzuzeigen.

So suchen Sie eine Datei in der lokalen Site:

1 Wählen Sie die Datei im Bereich Remote-Site des Sitefensters aus oder öffnen
Sie die Datei in einem Dokumentfenster.
2 Wählen Sie Site > Auf lokaler Site lokalisieren. (Nur Windows: Wenn das
Sitefenster aktiv ist, wählen Sie Bearbeiten > Auf lokaler Site lokalisieren.)
Die Datei wird im Bereich Lokaler Ordner des Sitefensters markiert.

So suchen Sie eine Datei in der Remote-Site:

1 Wählen Sie die Datei im Bereich Lokaler Ordner des Sitefensters aus
oder öffnen Sie die Datei in einem Dokumentfenster.
2 Wählen Sie Site > Auf Remote-Site lokalisieren. (Nur bei Windows:
Wenn das Sitefenster aktiv ist, wählen Sie Bearbeiten > Auf Remote-Site
lokalisieren.) Sie können auch die Datei im lokalen Ordner auswählen und mit
der rechten Maustaste (Windows) bzw. bei gedrückter Strg-Taste (Macintosh)
darauf klicken; daraufhin erscheint ein Kontextmenü, aus dem Sie die Option
Auf Remote-Site lokalisieren wählen können.
Die Datei wird in der Remote-Site-Ansicht des Sitefensters markiert.

Siteverwaltung und Teamarbeit 131


Anmerkung: Wenn Sie Site > Auf lokaler Site lokalisieren oder Site > Auf Remote-
Site lokalisieren wählen, während das Dokumentfenster aktiv ist und die aktuelle Datei
nicht Teil der aktuell geöffneten Site ist, versucht Dreamweaver herauszufinden, zu welcher
der lokal definierten Sites die aktuelle Datei gehört. Wenn die aktuelle Datei zu lediglich
einer lokalen Site gehört, öffnet Dreamweaver diese Site und sucht dann die Datei darin.

Remote-Sites einrichten
Bevor Sie eine Remote-Site einrichten, müssen Sie eine lokale Site erstellen
(die dann der Remote-Site zugeordnet wird). Siehe unter „Neue Sites mit
Dreamweaver einrichten“ auf Seite 107.
Im nächsten Schritt legen Sie fest, wo sich die Site befinden soll, also auf welchem
Server die Site eingerichtet werden soll. Ihr Kunde, Arbeitgeber oder Internet-
Service-Provider hat wahrscheinlich schon einen Webserver eingerichtet
(sei es Internet oder Intranet). Fragen Sie einen Systemadministrator oder Ihren
Kunden nach dem Namen dieses Servers und finden Sie heraus, wie Dateien
auf diesen Server übertragen werden.
Finden Sie insbesondere heraus, ob die Verbindung zum Server über FTP
hergestellt werden soll oder ob Sie über den Desktop auf den Server als
Netzlaufwerk zugreifen können. Wenn Sie eine FTP-Verbindung herstellen
möchten, erkundigen Sie sich nach dem Namen des FTP-Servers, dem
Hostverzeichnis, dem Benutzernamen und dem Kennwort.
Wenn Sie diese Informationen haben, können Sie mit dem Befehl Sites definieren
den Server der lokalen Site zuordnen. Treten beim Einrichten der Remote-Site
Probleme auf, lesen Sie unter „Fehlerbehebung beim Einrichten der Remote-Site“
auf Seite 138.
Nachdem eine Remote-Site eingerichtet wurde, können Sie Dateien hochladen
oder herunterladen, wenn sich bereits Dateien in der Site befinden. Siehe unter
„Ein- und Auschecken“ auf Seite 140 und „Dateien abrufen und bereitstellen“ auf
Seite 152.

Remote-Server einer lokalen Site zuordnen


Nachdem Sie eine lokale Site erstellt haben, können Sie mit dem Befehl Sites
definieren Informationen des zugeordneten Remote-Servers sowie
Voreinstellungen für das Ein- oder Auschecken hinzufügen oder ändern.

132 Kapitel 4
So ordnen Sie einen Remote-Server einer vorhandenen lokalen Site zu:

1 Wählen Sie im Popupmenü des aktuellen Sitefensters den Befehl


Sites definieren oder wählen Sie Site > Neue Site.

2 Ein Dialogfeld mit den aktuell definierten Sites wird angezeigt. Wählen Sie
eine vorhandene Site aus und klicken Sie auf Bearbeiten.
Sind keine definierten Sites vorhanden, erstellen Sie eine lokale Site, bevor Sie
fortfahren. Siehe unter „Neue Sites mit Dreamweaver einrichten“ auf Seite 107.
3 Klicken Sie in der Kategorieliste links auf Webserver-Infos.
4 Wählen Sie unter Server-Zugriff eine der folgenden Optionen:
• Wählen Sie Keine, wenn Sie die Site nicht auf einen Server hochladen
möchten. Klicken Sie dann auf OK und überspringen Sie die restlichen hier
beschriebenen Schritte.
• Wählen Sie Lokal/Netzwerk, wenn der Webserver als Netzlaufwerk (Windows)
oder als AppleTalk- oder NFS-Server (Macintosh) zur Verfügung steht oder
wenn Sie einen Webserver auf dem lokalen Computer eingerichtet haben.
Klicken Sie auf das Ordnersymbol, um den Ordner zu suchen und
auszuwählen, in dem die Sitedateien auf dem Server gespeichert sind.
Wenn der Bereich Remote-Site des Sitefensters beim Hinzufügen und
Löschen von Dateien automatisch aktualisiert werden soll, markieren Sie
das Kontrollkästchen Liste mit Remote-Dateien automatisch aktualisieren.
Entfernen Sie die Markierung in diesem Kontrollkästchen, um die
Geschwindigkeit beim Kopieren von Dateien auf die Remote-Site zu erhöhen.
(Sie können jederzeit im Sitefenster auf die Schaltfläche Aktualisieren klicken,
um das Sitefenster manuell zu aktualisieren.) Klicken Sie auf OK und
überspringen Sie die restlichen hier beschriebenen Schritte.
Anmerkung: Möchten Sie den Bereich Remote-Site manuell aktualisieren, wählen
Sie im Sitefenster Ansicht > Remote aktualisieren (Windows) bzw. Site >
Sitedateien-Ansicht > Remote aktualisieren (Macintosh).

• Wählen Sie FTP, wenn die Verbindung zum Webserver über FTP erfolgt.

Siteverwaltung und Teamarbeit 133


So stellen Sie eine FTP-Verbindung zu einem Webserver her:

1 Geben Sie den Hostnamen des FTP-Hosts ein, an den Sie die Dateien für die
Website übertragen.
Der FTP-Hostname ist ein vollständiger Internet-Name eines
Computersystems, wie z. B. „ftp.mindspring.com“. Geben Sie den
vollständigen Hostnamen ohne zusätzlichen Text ein. Setzen Sie keinen
Protokollnamen vor den Hostnamen. Beispiel:
• Richtig: ftp.mindspring.com
• Falsch: ftp://ftp.mindspring.com
• Falsch: mindspring.com
2 Geben Sie den Namen des Hostverzeichnisses der Remote-Site ein, in dem die
öffentlich zugänglichen Dokumente gespeichert sind. Weitere Informationen
finden Sie im Abschnitt „Hostverzeichnis der Remote-Site bestimmen (nur für
FTP)“ auf Seite 135.
3 Geben Sie den Anmeldenamen und das Kennwort ein, mit denen eine
Verbindung zum FTP-Server hergestellt wird.
Dreamweaver speichert dieses Kennwort standardmäßig. Wenn Sie das
Kontrollkästchen Speichern deaktivieren, werden Sie immer aufgefordert,
Ihr Kennwort einzugeben, wenn Sie eine Verbindung zum Remote-Server
herstellen.
4 Wählen Sie die gewünschten Firewall-Optionen für die Site aus:
• Markieren Sie das Kontrollkästchen Firewall verwenden, wenn Sie eine
Firewall eingerichtet haben, die bei der Verbindung zum Remote-Server
berücksichtigt werden muss. Weitere Einzelheiten zu diesen Optionen finden
Sie unter „Remote-Server einer lokalen Site zuordnen“ auf Seite 132.
• Falls für Ihre Firewall-Konfiguration passives FTP erforderlich ist (damit die
FTP-Verbindung von Ihrer lokalen Software statt vom Remote-Server
eingerichtet werden kann), wählen Sie Passiven FTP verwenden. Wendenen
Sie sich im Zweifelsfall an Ihren Systemadministrator.
5 Klicken Sie auf OK.

134 Kapitel 4
Hostverzeichnis der Remote-Site bestimmen (nur für FTP)
Der im Dialogfeld Site-Definition angegebene Host-Ordner sollte mit dem
Stammordner für die Remote-Site identisch sein. Wenn die Struktur der Remote-
Site nicht mit der Struktur der lokalen Site übereinstimmt, werden die Dateien
an die falsche Stelle übertragen und sind für Besucher der Site nicht sichtbar.
Außerdem sind Ihre Bild- und Hyperlinkpfade nicht mehr gültig.

Sollte in diesem Fall nicht der


Host-Ordner sein

nein
ja

nein

Sollte nicht der Host-


Ordner sein

Sollte der Host-Ordner sein

Der Stammordner der Remote-Site muss bereits vorhanden sein, bevor


Dreamweaver eine Verbindung herstellen kann. Ist dies nicht der Fall, müssen
Sie einen Stammordner erstellen, bevor Sie die Verbindung herstellen. Wenn Sie
selbst keinen Stammordner erstellen können, bitten Sie den Administrator des
Servers, dies für Sie zu erledigen.
Wenn Sie sich nicht sicher sind, was Sie in das Feld Host-Ordner eingeben sollen,
lassen Sie es zunächst leer. Auf einigen Servern ist der Stammorder derselbe
Ordner, zu dem Sie über FTP eine Verbindung herstellen. Stellen Sie eine
Verbindung zum Server her, um dies herauszufinden. Wird ein Ordner mit einem
Namen wie „public_html“ oder Ihrem Anmeldenamen im Bereich Remote-Site
angezeigt, ist dies wahrscheinlich der Ordner, den Sie im Feld Host-Ordner
verwenden sollten. Notieren Sie den Ordnernamen und öffnen Sie erneut das
Dialogfeld Site-Definition. Geben Sie dann in das Feld Host-Ordner den
Ordnernamen ein und stellen Sie erneut eine Verbindung her.

WebDAV- und SourceSafe-Integration


In Dreamweaver können Sie vom Sitefenster auf Quell- und
Versionskontrollanwendungen zugreifen. Zu SourceSafe-Datenbanken und
Servern bzw. Quellenkontrollsystemen, die das Protokoll WebDAV verwenden,
kann keine Verbindung hergestellt werden.

Siteverwaltung und Teamarbeit 135


Wählen Sie im Dialogfeld Site-Definition einen Verbindungstyp oder ein
Quellkontrollsystem aus. Sobald eine Verbindung hergestellt ist, können Sie
mithilfe der Dreamweaver-Funktionen zur gemeinsamen Dateinutzung (Ein-/
Auschecken, Aktualisieren, Abrufen und Bereitstellen, Design Notes) auf
entsprechende Funktionen in Ihrem eigenen Quellkontrollsystem zugreifen.
Anmerkung: Um diese Funktion nutzen zu können, muss Visual SourceSafe auf Ihrem
System installiert sein oder eine Zugriffsmöglichkeit auf ein von WebDAV unterstütztes
System bestehen.

Dreamweaver mit dem WebDAV-Protokoll verwenden


Mit Dreamweaver können Sie eine Verbindung unter Verwendung des WebDAV-
Protokolls (Web-based Distributed Authoring and Versioning) herstellen, sofern
Ihr System dieses Protokoll unterstützt. Zwei derzeit verfügbare WebDAV-Server
sind Microsoft Internet Information Server (IIS) 5.0 und Apache Web Server.

So stellen Sie mit dem Protokoll WebDAV eine Verbindung zu einer Site her:

1 Wählen Sie Site > Sites definieren.


2 Klicken Sie im Dialogfeld Sites definieren auf Bearbeiten.
3 Wählen Sie im Dialogfeld Site-Definition die Kategorie Webserver-Infos.
4 Wählen Sie im Popupmenü Zugriff die Option WebDAV.
5 Markieren Sie bei Bedarf die Option Dateien beim Öffnen auschecken,
damit Dateien beim Öffnen automatisch ausgecheckt werden.
6 Klicken Sie auf Info.

Das Dialogfeld WebDAV-Verbindung wird eingeblendet.


7 Geben Sie im Feld URL den vollständigen URL zu dem Verzeichnis auf dem
WebDAV-Server an, zu dem Sie eine Verbindung herstellen möchten.
Zum URL gehört das Protokoll, der Anschluss und das Verzeichnis (sofern
abweichend vom Stammverzeichnis). Beispiel: http://apache1/WebDAV/
meinesite.

136 Kapitel 4
8 Geben Sie Ihren Benutzernamen und Ihr Kennwort in die entsprechenden
Felder ein.
Diese Informationen dienen zur Serverauthentifizierung und haben nichts mit
Dreamweaver zu tun. Falls Sie Ihren Benutzernamen oder Ihr Kennwort nicht
wissen, wenden Sie sich an Ihren Systemadministrator oder Webmaster.
9 Geben Sie im Feld E-Mail Ihre E-Mail-Adresse ein.
Die E-Mail-Adresse wird zur Identifizierung des Eigentumsrechts auf dem
WebDAV-Server benötigt und wird im Sitefenster als Kontaktinformation
angezeigt.
10 Klicken Sie auf Kennwort speichern, wenn Ihr Kennwort nach dem Beenden
von Dreamweaver gespeichert bleiben soll.
Es ist dann bei allen weiteren Sitzungen verfügbar.
11 Klicken Sie auf OK.
12 Wählen Sie Site > Verbinden oder klicken Sie in der Symbolleiste des
Sitefensters auf die Schaltfläche Verbinden, um eine Verbindung zur Remote-
Site herzustellen. Zum Trennen der Verbindung wählen Sie Site > Trennen
oder klicken Sie auf die Symbolleistenschaltfläche Trennen.
Sobald eine Verbindung hergestellt ist, können Sie die Dreamweaver-Funktionen
zur gemeinsamen Dateinutzung verwenden (Dateien abrufen, Dateien
bereitstellen, Design Notes usw).
Sie können Ihre Verbindungsinformationen jederzeit ändern, indem Sie die hier
beschriebenen Schritte ausführen und dann die neuen Informationen im
Dialogfeld WebDAV-Verbindung eingeben.

Dreamweaver mit Visual SourceSafe verwenden


Über das Sitefenster von Dreamweaver können Sie auf eine vorhandene Visual
SourceSafe-(VSS-)Datenbank zugreifen. Sobald Sie eine Verbindung hergestellt
haben, können Sie die Datenübertragungsfunktionen von Dreamweaver
verwenden.
Anmerkung: Um diese Funktion in Windows verwenden zu können, muss Microsoft
Visual SourceSafe Client, Version 6, installiert sein. Um diese Funktion auf einem
Macintosh verwenden zu können, muss MetroWerks SourceSafe 1.1.0 Client installiert
sein. MetroWerks Visual SourceSafe-Benutzer können zwar auf Microsoft SourceSafe-
Datenbanken der Version 5.0, aber nicht der Version 6.0, zugreifen. Wenn es Ihnen darauf
ankommt, dass Ihr gesamtes Team plattformübergreifend auf jede VSS-Datenbank Zugriff
hat, sollten Sie eine Datenbank der Version 5.0 verwenden. Nähere Informationen hierzu
finden Sie in Ihrer SourceSafe-Dokumentation.

So stellen Sie eine Verbindung zu einer SourceSafe-Datenbank her:

1 Wählen Sie im Dialogfeld Site-Definition die Kategorie Webserver-Infos.


2 Wählen Sie im Popupmenü Zugriff die Option SourceSafe-Datenbank.

Siteverwaltung und Teamarbeit 137


3 Markieren Sie bei Bedarf die Option Dateien beim Öffnen auschecken,
damit Dateien beim Öffnen automatisch ausgecheckt werden.
4 Klicken Sie auf Info.

Das Dialogfeld SourceSafe-Datenbank wird eingeblendet.


5 Klicken Sie im Feld Datenbankpfad auf Durchsuchen, um nach der
gewünschten VSS-Datenbank zu suchen oder geben Sie den gesamten
Pfad ein.
Die Datei, die Sie wählen, wird zur Datei srcsafe.ini und dient zur
Initialisierung von SourceSafe.
6 Geben Sie im Feld Projekt das Projekt aus der VSS-Datenbank ein, das Sie
als Stammverzeichnis der Remote-Site verwenden möchten.
7 Geben Sie in den Feldern Benutzername und Kennwort die entsprechenden
Informationen zur Anmeldung in der ausgewählten Datenbank ein.
Falls Sie Ihren Benutzernamen oder Ihr Kennwort nicht kennen, wenden Sie
sich an Ihren Systemadministrator.
8 Klicken Sie auf OK, um zum Sitefenster zurückzukehren.
9 Wählen Sie Site > Verbinden oder klicken Sie in der Symbolleiste des
Sitefensters auf die Schaltfläche Verbinden, um eine Verbindung zur Remote-
Site herzustellen. Zum Trennen der Verbindung wählen Sie Site > Trennen
oder klicken Sie auf die Symbolleistenschaltfläche Trennen.

Fehlerbehebung beim Einrichten


der Remote-Site
Webserver können mit unterschiedlichen Methoden konfiguriert werden.
Dieser Abschnitt enthält Informationen über einige Probleme, die beim
Einrichten einer Remote-Site auftreten können, sowie Lösungsvorschläge
für diese Probleme.

138 Kapitel 4
• Die FTP-Implementierung von Dreamweaver funktioniert unter Umständen
bei bestimmten Proxy-Servern, Multilevel-Firewalls und anderen Formen des
indirekten Server-Zugriffs nicht einwandfrei. Wenn Probleme beim FTP-
Zugriff auftreten, wenden Sie sich an den Systemadministrator vor Ort.
• Die FTP-Implementierung von Dreamweaver unterscheidet sich von der
einiger gängiger FTP-Anwendungen. Der Hauptunterschied besteht darin,
dass Sie bei Dreamweaver eine Verbindung zum Stammordner des Remote-
Systems herstellen müssen und nicht durch das Remote-Dateisystem
navigieren können. (In vielen Anwendungen können Sie zu allen Remote-
Verzeichnissen eine Verbindung herstellen und dann durch das Remote-
Dateisystem navigieren, um nach dem gewünschten Verzeichnis zu suchen.)
• Wenn Sie Schwierigkeiten haben, eine Verbindung herzustellen und Sie
das Hostverzeichnis mit einem einfachen Schrägstrich (/) angegeben haben,
müssen Sie eventuell einen relativen Pfad vom Ausgangsverzeichnis der
Verbindung zum Remote-Stammordner angeben. Ist der Remote-
Stammordner beispielsweise ein übergeordnetes Verzeichnis, müssen Sie
eventuell einen Pfad in der Form ../../ zum Hostverzeichnis angeben.
• Manchmal verursacht der Standardwert von 60 Sekunden für die FTP-
Zeitüberschreitung bei langsamen Verbindungen zu viele
Zeitüberschreitungen. Erhöhen Sie diesen Wert (in den Site-Voreinstellungen),
wenn es zu häufigen Zeitüberschreitungen kommt. Setzen Sie den Wert jedoch
nicht zu hoch, da Sie sonst zu lange warten, wenn eine Verbindung wirklich
nicht hergestellt werden kann. Im Allgemeinen sind Zeitüberschreitungswerte
zwischen 30 und 120 am besten geeignet.
• Dateien und Ordner, deren Namen Leerzeichen und Sonderzeichen enthalten,
verursachen häufig Probleme, wenn sie auf eine Remote-Site übertragen
werden. Verwenden Sie anstelle von Leerzeichen Unterstreichungszeichen und
vermeiden Sie nach Möglichkeit Sonderzeichen in Datei- und Ordnernamen.
Besonders Doppelpunkte, Schrägstriche, Punkte und Apostrophe in Datei-
und Ordnernamen können Probleme verursachen. Dreamweaver kann unter
Umständen keine Sitemap erstellen, wenn Sonderzeichen in Datei- oder
Ordnernamen vorhanden sind.
• Auf dem Macintosh dürfen Dateinamen maximal 31 Zeichen enthalten. Treten
Probleme mit langen Dateinamen auf, geben Sie den Dateien kürzere Namen.
• Beachten Sie, dass viele Server symbolische Hyperlinks (UNIX),
Verknüpfungen (Windows) oder Aliasnamen (Macintosh) verwenden,
um einen Ordner auf einem Teil der Serverfestplatte mit einem Ordner
an einer anderen Stelle zu verbinden. Beispielsweise kann der Unterordner
„public_html“ des Stammordners auf dem Server in Wirklichkeit eine
Verknüpfung mit einem ganz anderen Teil des Servers sein. In den meisten
Fällen haben solche Aliasnamen keine Auswirkung auf die Fähigkeit, eine
Verbindung zum entsprechenden Ordner oder Verzeichnis herzustellen.
Wenn Sie jedoch eine Verbindung zu einem Teil des Servers, nicht aber zu
einem anderen herstellen können, liegt unter Umständen ein Aliasproblem vor.

Siteverwaltung und Teamarbeit 139


• Wenn bei einer FTP-Übertragung ein Problem auftritt, überprüfen Sie das
FTP-Protokoll, indem Sie im Sitefenster Fenster > Site-FTP-Protokoll
(Windows) bzw. Site > FTP-Protokoll (Macintosh) wählen. Tritt eine
Fehlermeldung wie beispielsweise „Datei kann nicht bereitgestellt werden“ auf,
ist unter Umständen kein Speicherplatz mehr auf der Remote-Site vorhanden.
Detaillierte Informationen hierzu finden Sie im FTP-Protokoll.

Ein- und Auschecken


Wenn Sie in einer Teamumgebung arbeiten, können Sie Dateien von lokalen
und Remote-Servern ein- und auschecken und mithilfe von Design Notes
Anmerkungen und Notizen für Ihr Team einfügen. Wenn Sie eine Datei
auschecken, teilen Sie den Mitarbeitern des Teams mit: „Ich arbeite gerade an
dieser Datei – bitte momentan keine Änderungen daran vornehmen!“
Eine ausgecheckte Datei ist im Sitefenster durch ein Häkchen gekennzeichnet.
Ein grünes Häkchen bedeutet, dass Sie selbst die Datei ausgecheckt haben.
Ein rotes Häkchen dagegen heißt, dass die Datei von einem anderen Mitarbeiter
des Teams ausgecheckt wurde. Im Sitefenster wird auch der Name der Person
angezeigt, die die Datei ausgecheckt hat.
Wenn Sie eine Datei wieder einchecken, kann sie von anderen Mitarbeitern des
Teams ausgecheckt und bearbeitet werden. Die lokale Version der Datei ist nun
schreibgeschützt, damit Sie keine Änderungen daran vornehmen können,
während die Datei von einer anderen Person ausgecheckt ist.
Die ausgecheckten Dateien auf dem Remote-Server sind nicht schreibgeschützt.
Wenn Sie Dateien mit einer anderen Anwendung als Dreamweaver übertragen,
könnten Sie ausgecheckte Dateien daher überschreiben. Um dies zu verhindern,
wird in anderen Anwendungen die .lck-Datei neben der ausgecheckten Datei
in der Dateistruktur angezeigt.
Sie können das Ein- und Auschecken von Dateien für bestimmte Sites aktivieren
und für andere Sites deaktivieren. Unter „Dateien von einem Remote-Server
abrufen“ auf Seite 152 und „Dateien auf einem Remote-Server bereitstellen“ auf
Seite 153 wird beschrieben, wie Sie Dateien zwischen lokalen Sites und Remote-
Sites übertragen, ohne sie dabei ein- oder auszuchecken.

Eincheck-/Auschecksystem einrichten
Sie müssen zunächst die lokale Site einem Remote-FTP- oder Netzwerkserver
zuordnen (siehe unter „Remote-Server einer lokalen Site zuordnen“ auf
Seite 132). Danach müssen Sie die nachstehend beschriebenen Optionen
einrichten.

140 Kapitel 4
So legen Sie Eincheck-/Auscheckoptionen fest:

1 Wählen Sie Site > Sites definieren. Wählen Sie dann eine Site aus und klicken
Sie auf Bearbeiten.
2 Klicken Sie in der Kategorieliste links auf Webserver-Infos.
3 Führen Sie einen der folgenden Schritte aus:
• Markieren Sie das Kontrollkästchen Ein-/Auschecken von Dateien aktivieren,
wenn Sie mit anderen Personen an der Website arbeiten (oder wenn Sie allein
an der Website arbeiten, aber mehrere Computer verwenden).
Mit dieser Option können Sie anderen Personen mitteilen, dass Sie eine Datei
zur Bearbeitung ausgecheckt haben. Weiterhin kann diese Option Sie darauf
hinweisen, dass Sie eine neuere Version derselben Datei auf einem anderen
Computer gespeichert haben. Weitere Informationen finden Sie im Abschnitt
„Ein- und Auschecken“ auf Seite 140.
• Wenn Sie das Kontrollkästchen Dateien beim Öffnen auschecken markieren,
werden Dateien automatisch ausgecheckt, wenn Sie sie im Sitefenster durch
Doppelklicken öffnen. (Wenn Sie mit Datei > Öffnen eine Datei öffnen,
wird diese Datei nicht ausgecheckt, selbst wenn dieses Kontrollkästchen
markiert ist.)
• Geben Sie einen Auscheck-Namen ein.
Dieser Name wird im Sitefenster neben den Dateien angezeigt, die Sie
ausgecheckt haben. Auf diese Weise wissen die anderen Teammitglieder,
dass Sie gerade an einer Datei arbeiten, die sie benötigen. Wenn Sie allein
an einer Website arbeiten, aber mehrere Computer verwenden, wählen Sie
für jeden Computer einen anderen Auscheck-Namen (beispielsweise AnnaR-
HeimMac und AnnaR-BüroPC). So können Sie stets feststellen, auf welchem
Computer sich die neueste Version einer Datei befindet, falls Sie vergessen
haben, die Datei wieder einzuchecken.
• Geben Sie eine E-Mail-Adresse ein.
Wenn Sie eine E-Mail-Adresse eingeben und dann eine Datei auschecken,
wird Ihr Name im Sitefenster neben dieser Datei als anklickbarer Hyperlink
angezeigt (blau und unterstrichen). Klickt ein Teammitglied auf diesen
Hyperlink, wird automatisch das Standard-E-Mail-Programm mit einer neuen
Nachricht geöffnet. Das Feld An: enthält dann die E-Mail-Adresse und das
Betreff-Feld enthält den entsprechenden Datei- und Site-Namen.

Dateien auf einem Remote-Server ein- und auschecken


Im Sitefenster oder über das Menü Site im Dokumentfenster können Sie Dateien
auf einem Remote-Server ein- oder auschecken.

Siteverwaltung und Teamarbeit 141


Wenn Sie eine Datei ausgecheckt haben, sie jedoch nicht bearbeiten möchten
(oder sich entschieden haben, die vorgenommenen Änderungen zu verwerfen),
können Sie das Auschecken rückgängig machen, damit andere Teammitglieder
die Datei auf dem Server auschecken können.
Anmerkung: Wenn Sie Site > Einchecken oder Site > Auschecken wählen, während
das Dokumentfenster aktiv ist, und wenn die aktuelle Datei nicht Teil der aktuell geöffneten
Site ist, versucht Dreamweaver herauszufinden, zu welcher der lokal definierten Sites
die aktuelle Datei gehört. Wenn die aktuelle Datei zu lediglich einer lokalen Site gehört,
öffnet Dreamweaver diese Site und führt dann das Einchecken oder Auschecken durch.

So checken Sie Dateien von einem Remote-Server aus:

1 Wählen Sie im Sitefenster oben im Popupmenü der aktuellen Sites die


gewünschte Site aus.
2 Führen Sie einen der folgenden Schritte aus, um die Dateien auszuchecken:
• Wählen Sie eine oder mehrere Dateien aus und klicken Sie oben im Sitefenster
auf die Schaltfläche Auschecken.
• Wählen Sie im Kontextmenü oder im Menü Site die Option Auschecken.
3 Sie werden nun gefragt, ob Sie auch abhängige Dateien herunterladen
möchten. Klicken Sie auf Ja. Klicken Sie auf Nein, um abhängige Dateien
nicht herunterzuladen.

So checken Sie Dateien auf einem Remote-Server ein:

1 Wählen Sie im Sitefenster oben im Popupmenü der aktuellen Sites die


gewünschte Site aus.
2 Wählen Sie im Bereich Lokaler Ordner eine oder mehrere ausgecheckte
oder neue Dateien aus und führen Sie einen der folgenden Schritte aus:
• Klicken Sie oben im Sitefenster auf die Schaltfläche Einchecken.
• Wählen Sie im Kontextmenü oder im Menü Site die Option Einchecken.
Von Ihnen ausgecheckte Dateien sind durch ein grünes Häkchen
gekennzeichnet. Wird neben der Datei ein rotes Häkchen angezeigt, ist diese
Datei momentan von einem anderen Anwender ausgecheckt. Checken Sie
solche Dateien nicht ein.
Ein Sperrsymbol in der Form eines Vorhängeschlosses kennzeichnet eine
schreibgeschützte Datei (Windows) oder eine gesperrte Datei (Macintosh).
Neben neuen Dateien steht weder ein Häkchen noch ein Sperrsymbol.

142 Kapitel 4
3 Sie werden nun gefragt, ob Sie auch abhängige Dateien an den Server
übertragen möchten. Klicken Sie auf Ja. Klicken Sie auf Nein, um abhängige
Dateien nicht hochzuladen. Wenn Sie eine neue Datei einchecken, sollten
Sie auch die abhängigen Dateien an den Server übertragen. Wenn sich die
neuesten Versionen der abhängigen Dateien bereits auf dem Remote-Server
befinden, müssen sie jedoch nicht erneut hochgeladen werden.

So machen Sie das Auschecken einer Datei rückgängig:

Wählen Sie die gewünschte Datei aus und wählen Sie Site > Auschecken
rückgängig oder klicken Sie mit der rechten Maustaste (Windows) bzw. bei
gedrückter Strg-Taste (Macintosh) auf die Datei und wählen Sie im Kontextmenü
die Option Auschecken rückgängig. Die lokale Kopie der Datei ist nun
schreibgeschützt und Änderungen, die Sie bereits vorgenommen haben, gehen
verloren.

So checken Sie eine gerade aktive Datei ein oder aus:

Wählen Sie im Dokumentfenster die Menüoption Site > Einchecken oder Site >
Auschecken oder verwenden Sie die entsprechenden Schaltflächen der
Symbolleiste.
Wenn Sie die gerade aktive Datei auschecken, wird die aktuell geöffnete Version
der Datei mit der neuen ausgecheckten Version überschrieben. Wenn Sie die
gerade aktive Datei einchecken, wird sie eventuell automatisch vor dem
Einchecken gespeichert, je nachdem, welche Voreinstellungen Sie gewählt haben
(siehe unter „Siteeinstellungen festlegen“ auf Seite 118).

Design Notes
Mit dem Befehl Design Notes können Sie die zum Dokument gehörenden
zusätzlichen Dateiinformationen speichern, wie beispielsweise Dateinamen
von Bildquellen und Anmerkungen zum Dateistatus.
Wenn Sie beispielsweise ein Dokument von einer Site auf eine andere kopieren,
können Sie für dieses Dokument Design Notes hinzufügen, die besagen, dass das
ursprüngliche Dokument sich in dem anderen Site-Ordner befindet. Wenn Sie
(oder eine andere Person) dann dieses Dokument aktualisieren, wissen Sie,
dass Sie die ursprüngliche Seite ebenfalls aktualisieren müssen.
Mithilfe von Design Notes können Sie zudem vertrauliche Informationen
speichern, die aus Sicherheitsgründen nicht in einem Dokument enthalten sein
können. Dazu gehören beispielsweise Informationen darüber, wie das Dokument
erstellt wurde, wie ein bestimmter Preis oder eine bestimmte Konfiguration
gewählt wurde oder welche Marketing-Faktoren eine Design-Entscheidung
beeinflusst haben. Im Sitefenster sehen Sie, welche Dateien mit Design Notes
versehen sind, nämlich diejenigen, die in der Spalte Anmerkungen der
Sitedateien-Ansicht mit einem Design Notes-Symbol gekennzeichnet sind.

Siteverwaltung und Teamarbeit 143


Dateiinformationen in Design Notes speichern
Sie können für jedes Dokument oder jede Vorlage in einer Site Design Notes
erstellen. (Beachten Sie, dass Design Notes, die in eine Vorlage eingefügt werden,
nicht von den Dokumenten, die auf der Vorlage basieren, übernommen werden.)
Design Notes können auch für Applets, ActiveX-Steuerelemente, Bilder, Flash-
Filme, Shockwave-Objekte und Bildfelder in Dokumenten erstellt werden.

So richten Sie Design Notes für eine Site ein:

1 Wählen Sie Site > Sites definieren. Wählen Sie dann eine Site aus und klicken
Sie auf Bearbeiten.
2 Klicken Sie links auf die Kategorie Design Notes.
• Markieren Sie das Kontrollkästchen Design Notes verwalten, damit in einer
Site Design Notes eingesetzt werden können.
Wenn Design Notes verwalten markiert ist, können Sie Design Notes für
Dateien in einer Site erstellen. Jedes Mal, wenn Sie eine Datei kopieren,
verschieben, umbenennen oder löschen, wird die zugehörige Design Notes-
Datei ebenfalls kopiert, verschoben, umbenannt oder gelöscht.
• Legen Sie fest, ob die zur Site gehörenden Design Notes zusammen mit den
übrigen Dokumenten hochgeladen werden sollen, indem Sie das
Kontrollkästchen Design Notes für gemeinsame Nutzung bereitstellen
markieren bzw. die Markierung entfernen.
Ist dieses Kontrollkästchen markiert, können Sie Design Notes zusammen mit
den anderen Mitarbeitern des Teams nutzen. Wenn Sie eine Datei bereitstellen
oder abrufen, wird die zugehörige Design Notes-Datei automatisch
bereitgestellt oder abgerufen. Wenn Sie allein an der Site arbeiten, können Sie
diese Option deaktivieren, um die Datenübertragung zu beschleunigen. Ist die
Option deaktiviert, werden Design Notes lokal verwaltet, jedoch nicht mit den
Dateien auf den Server übertragen.
3 Klicken Sie auf OK.

So fügen Sie einem Dokument Design Notes hinzu:

1 Öffnen Sie das jeweilige Dokument im Dokumentfenster und wählen Sie


Datei > Design Notes.
Sie können die Datei auch im Sitefenster auswählen und dann Datei > Design
Notes wählen oder auf die Spalte Anmerkungen doppelklicken. Befindet sich
die Datei in einer Remote-Site, müssen Sie sie zunächst auschecken oder
abrufen und dann im lokalen Ordner auswählen (siehe unter „Dateien auf
einem Remote-Server ein- und auschecken“ auf Seite 141 oder „Dateien
abrufen und bereitstellen“ auf Seite 152).
2 Fügen Sie auf der Registerkarte Basis-Info verschiedene Design Notes hinzu:

144 Kapitel 4
• Wählen Sie im Popupmenü Status den Status des Dokuments.
• Geben Sie im Textfeld Anmerkungen Ihre Anmerkungen ein.
• Klicken Sie auf das Kalendersymbol (direkt über dem Textfeld Anmerkungen),
um das aktuelle Datum einzufügen.
• Wenn die Design Notes-Datei bei jedem Öffnen der Datei angezeigt werden
soll, markieren Sie die Option Anzeigen, wenn Datei geöffnet ist.
3 Fügen Sie auf der Registerkarte Alle Informationen weitere Schlüsselwörter
und Werte hinzu, die für andere Entwickler der Site nützlich sind. Sie können
beispielsweise ein Schlüsselwort Autor (im Feld Name) nennen und als Wert
Heidi (im Feld Wert) definieren. Klicken Sie auf die Schaltfläche mit dem
Pluszeichen (+), um ein neues Schlüsselwort/Wert-Paar hinzuzufügen. Wenn
Sie ein Paar entfernen möchten, wählen Sie es aus und klicken Sie auf die
Schaltfläche mit dem Minuszeichen (–).
4 Klicken Sie auf OK, um die Design Notes zu speichern.
Die eingegebenen Design Notes werden in dem Ordner, in dem sich die
aktuelle Datei befindet, im Unterordner mit dem Namen _notes gespeichert.
Der Dateiname besteht aus dem Dateinamen des Dokuments sowie der
Erweiterung .mno. Wenn der Dateiname beispielsweise index.html lautet,
erhält die zugehörige Design Notes-Datei den Namen index.mno.

So fügen Sie Design Notes in ein Objekt ein:

1 Wählen Sie im Kontextmenü des Objekts die Option Design Notes.


(Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Strg-
Taste (Macintosh) auf das Objekt, um das Kontextmenü des Objekts zu
öffnen.)
2 Führen Sie die oben beschriebenen Schritte 2 bis 4 aus, um einem Dokument
Design Notes hinzufügen.
Beachten Sie, dass die Design Notes eines Objekts in einem Unterordner mit
dem Namen „_notes“ gespeichert werden, der sich im selben Ordner wie die
Quelldatei des Objekts befindet. Dies ist nicht unbedingt derselbe Ordner,
in dem sich das Dokument befindet, das das Objekt enthält.

Führen Sie einen der folgenden Schritte aus, um die mit einer Datei verknüpften
Design Notes zu öffnen:
• Wählen Sie die Datei im Sitefenster aus oder öffnen Sie die Datei selbst.
Wählen Sie dann Datei > Design Notes. Die mit der Datei verknüpften
Design Notes werden geöffnet.
• Doppelklicken Sie in der Spalte Anmerkungen des Sitefensters auf das gelbe
Design Notes-Symbol.

So weisen Sie einen Status zu, der nicht im Popupmenü Status aufgeführt ist:

1 Öffnen Sie die Design Notes für eine Datei oder ein Objekt.

Siteverwaltung und Teamarbeit 145


2 Klicken Sie auf die Registerkarte Alle Informationen.
3 Klicken Sie auf die Schaltfläche mit dem Pluszeichen (+).
4 Geben Sie im Feld Name den Begriff Status ein.
5 Geben Sie im Feld Wert den Status ein.
Wenn bereits ein Statuswert vorhanden war, wird er durch den neuen ersetzt.
6 Klicken Sie auf die Registerkarte Basis-Info. Sie sehen, dass der neue Statuswert
im Popupmenü Status angezeigt wird.
Anmerkung: Im Statusmenü kann jeweils nur ein neuer Wert stehen. Wenn Sie diese
Schritte erneut ausführen, wird der neue Statuswert, den Sie beim ersten Mal
eingegeben haben, durch den neuen Statuswert ersetzt, den Sie beim zweiten Mal
eingeben.

So deaktivieren Sie Design Notes:

1 Wählen Sie Site > Sites definieren.


2 Wählen Sie im Dialogfeld Sites definieren die jeweilige Site aus und klicken Sie
auf Bearbeiten.
3 Klicken Sie im Dialogfeld Site-Definition auf Design Notes.
4 Entfernen Sie die Markierung im Kontrollkästchen Design Notes verwalten.
Hiermit wird die Design Notes-Funktion deaktiviert. Wenn Sie diese Option
deaktivieren und dann auf Entfernen klicken, werden alle lokalen Design
Notes für die Site gelöscht.
5 Klicken Sie auf OK.
Ein Dialogfeld wird angezeigt, in dem Sie gefragt werden, ob Sie die
vorhandenen Design Notes-Dateien löschen möchten. Klicken Sie auf Ja,
wenn Sie die Dateien löschen möchten, oder auf Nein, wenn Sie sie behalten
möchten.

So verwenden Sie Design Notes nur lokal:

1 Wählen Sie Site > Sites definieren.


2 Wählen Sie im Dialogfeld Sites definieren die jeweilige Site aus und klicken Sie
auf Bearbeiten.
3 Wählen Sie im Dialogfeld Site Definition im Feld Design Notes die Option
Design Notes verwalten.

146 Kapitel 4
4 Entfernen Sie die Markierung im Kontrollkästchen Design Notes für
gemeinsame Nutzung bereitstellen.
Die Design Notes werden nicht auf die Remote-Site übertragen, wenn Sie
Dateien einchecken bzw. bereitstellen. Sie können jedoch weiterhin Design
Notes für die Site lokal hinzufügen und modifizieren.

So löschen Sie nicht zugeordnete Design Notes aus der Site:

1 Wählen Sie Site > Sites definieren.


2 Wählen Sie im Dialogfeld Sites definieren die jeweilige Site aus und klicken Sie
auf Bearbeiten.
3 Klicken Sie im Dialogfeld Site-Definition auf Design Notes.
4 Klicken Sie auf Entfernen. Dreamweaver fragt Sie, ob die Design Notes,
die nicht länger einer Datei in der Site zugeordnet sind, wirklich gelöscht
werden sollen. (Wenn Sie mit Dreamweaver eine Datei löschen, die eine
zugeordnete Design Notes-Datei hat, wird die Design Notes-Datei ebenfalls
gelöscht. Deswegen treten verwaiste Design Notes-Dateien normalerweise nur
dann auf, wenn eine Datei außerhalb von Dreamweaver gelöscht oder
umbenannt wird.)
Anmerkung: Wenn Sie die Option Design Notes verwalten deaktiviert haben, bevor
Sie auf Entfernen klicken, löscht Dreamweaver alle Design Notes-Dateien der Site.

Dateiansichtspalten für Design Notes verwenden


Die Spalten, die im Sitefenster in den Listen Lokaler Ordner und Remote-Site
angezeigt werden, können individuell angepasst werden. Sie können Spalten
umordnen, neue Spalten hinzufügen (insgesamt sind 10 Spalten möglich),
Spalten löschen, Spalten ausblenden, Design Notes mit Spaltendaten verknüpfen
und Spalten für die gemeinsame Nutzung durch alle mit der Site verbundenen
Benutzer zugänglich machen. Die Standardspalten sind Name, Anmerkungen,
Größe, Typ, Geändert und Ausgecheckt von. Sie können Spalten umordnen,
indem Sie im Sitefenster auf die jeweilige Spaltenüberschrift klicken.
Durch mehrmaliges Klicken auf eine Spaltenüberschrift wird die
Sortierreihenfolge der Spalteneinträge (aufsteigend oder absteigend) umgekehrt.
Anmerkung: Die vorgegebenen Spalten (Name, Anmerkungen, Größe, Typ,
Geändert, Ausgecheckt von) können nicht gelöscht, umbenannt oder mit Design Notes
verknüpft werden. Sie können jedoch die Sortierreihenfolge und Ausrichtung dieser
Spalten ändern und sie – mit Ausnahme der Spalte Name – bei Bedarf ausblenden.

Führen Sie einen der folgenden Schritte aus, um die Optionen für die
Dateiansichtspalten aufzurufen:

• Wählen Sie Ansicht > Dateiansichtspalten im Sitefenster (Windows) bzw.


Site > Sitedateien-Ansicht > Dateiansichtspalten (Macintosh).

Siteverwaltung und Teamarbeit 147


• Wählen Sie Site > Sites definieren. Wählen Sie eine Site aus und klicken Sie
auf Bearbeiten. Wählen Sie im Dialogfeld Site-Definition die Option
Dateiansichtspalten.
• Klicken Sie im Sitefenster mit der rechten Maustaste (Windows) bzw. bei
gedrückter Strg-Taste (Macintosh) auf eine Spalte und wählen Sie
Dateiansichtspalten.

Es erscheint das Dialogfeld Site-Definition mit den Optionen für


Dateiansichtspalten.

So ändern Sie die Reihenfolge der Spalten:

1 Wählen Sie in der Dateiansichtspalten-Anzeige des Dialogfelds Site-Definition


einen Spaltennamen aus.
2 Klicken Sie auf den Aufwärts- oder Abwärtspfeil, um die Position der
gewählten Spalte zu ändern.
Außer bei der Spalte Name, die immer an erster Stelle erscheint, können Sie
bei allen Spalten die Reihenfolge ändern.

So fügen Sie eine neue Spalte hinzu:

1 Klicken Sie in der Dateiansichtspalten-Anzeige des Dialogfelds Site-Definition


auf das Pluszeichen (+).
2 Geben Sie im Feld Spaltenname einen Namen für die Spalte ein.

148 Kapitel 4
3 Wählen Sie im Popupmenü Mit Design Note verknüpfen einen Wert
oder geben Sie einen Wert ein.
Sie müssen eine neue Spalte mit einer Design Note verknüpfen, damit Daten
vorhanden sind, die im Sitefenster angezeigt werden können.
4 Wählen Sie eine Ausrichtungsoption: links, rechts oder zentriert. Dadurch
bestimmen Sie, wie der Text innerhalb der Spalte ausgerichtet wird.
5 Um die Spalte aus- oder wieder einzublenden, aktivieren bzw. deaktivieren
Sie die Option Zeigen.
6 Um die Spalte allen mit der Site verbundenen Benutzern zur gemeinsamen
Verwendung zugänglich zu machen, wählen Sie die Option Mit allen
Benutzern dieser Site teilen.

So löschen Sie eine hinzugefügte Spalte:

1 Wählen Sie die zu löschende Spalte aus.


2 Klicken Sie auf das Minuszeichen (–).
Anmerkung: Die Spalte wird sofort und ohne Rückfrage gelöscht. Seien Sie sich deshalb
vor dem Klicken auf das Minuszeichen sicher, dass Sie die Spalte löschen wollen.

Design Notes in Fireworks und Dreamweaver verwenden


Wenn Sie eine Grafik in Macromedia Fireworks 4.0 öffnen und in ein
anderes Format exportieren, speichert Fireworks automatisch den Namen der
ursprünglichen Quelldatei in einer Design Notes-Datei. Wenn Sie beispielsweise
meinhaus.png in Fireworks öffnen und in meinhaus.gif exportieren, erstellt
Fireworks automatisch eine Design Notes-Datei mit dem Namen
meinhaus.gif.mno, die den Namen der ursprünglichen Datei als absoluten
URL file: enthält. Die Design Notes für meinhaus.gif können beispielsweise
die folgende Zeile enthalten:
fw_source="file:///MeineFestplatte/sites/anlagen/orig/
meinhaus.png"

Wenn das Bild Hotspots oder Rollovers enthält, wird der HTML-Quellcode
für diese Elemente ebenfalls in die Design Notes-Datei eingefügt.
Wenn Sie die Grafik in Dreamweaver importieren, wird die Design Notes-Datei
automatisch zusammen mit der Grafik in die Site kopiert. Wenn Sie das Bild in
Dreamweaver auswählen und mit Fireworks bearbeiten möchten (siehe unter
„Externe Editoren starten“ auf Seite 324), öffnet Fireworks die Originaldatei zur
Bearbeitung. Nähere Informationen hierzu finden Sie unter „Fireworks und
Dreamweaver verwenden“ auf Seite 305.

Siteverwaltung und Teamarbeit 149


Den Arbeitsablauf durch Berichte
optimieren
Mit dem Befehl Site > Berichte können Sie die Zusammenarbeit zwischen
den Mitgliedern eines Webteams verbessern. Sie können Arbeitsablaufsberichte
ausführen, aus denen hervorgeht, wer eine Datei ausgecheckt hat und welche
Dateien mit Design Notes verknüpft sind. Sie können Design Note-Berichte noch
verfeinern, indem Sie Namens- oder Wertparameter festlegen. Nähere
Informationen zum Ausführen anderer Berichtstypen finden Sie unter „Berichte
zum Testen einer Site verwenden“ auf Seite 552.

Anmerkung: Um die Arbeitsablaufsberichte ausführen zu können, muss eine Verbindung


zur Remote-Site bestehen.

So führen Sie einen Bericht des Typs Ausgecheckt von aus:


1 Wählen Sie Site > Berichte.
Das Dialogfeld Berichte wird eingeblendet.
2 Wählen Sie im Popupmenü Bericht über die gewünschte Option. Sie können
sich über ein Dokument, eine gesamte Site, ausgewählte Dateien einer Site
oder einen bestimmten Ordner einen Bericht erstellen lassen.
3 Wählen sie unter Arbeitsablauf die Option Ausgecheckt von.
4 Klicken Sie auf die Schaltfläche Berichtseinstellungen.
Das Dialogfeld Ausgecheckt von wird angezeigt.
5 Geben Sie den Namen eines Teammitglieds ein und klicken Sie auf OK.

150 Kapitel 4
6 Klicken Sie auf Ausführen.
Der Bericht wird ausgeführt und das Dialogfeld Berichte zeigt eine
Zusammenfassung der Dateien, die von der jeweiligen Person ausgecheckt
wurden.

So führen Sie einen Bericht für bestimmte Design Notes aus:

1 Wählen Sie Site > Berichte.


Das Dialogfeld Berichte wird eingeblendet.
2 Wählen Sie im Popupmenü Bericht über die gewünschte Option. Sie können
sich über ein Dokument, eine gesamte Site, ausgewählte Dateien einer Site
oder einen bestimmten Ordner einen Bericht erstellen lassen.
3 Wählen Sie unter Arbeitsablauf die Option Design Notes.
Die Schaltfläche Berichtseinstellungen ist jetzt verfügbar.
4 Klicken Sie auf die Schaltfläche Berichtseinstellungen.
Das Dialogfeld Design Notes wird eingeblendet.

5 Geben Sie ein oder mehrere Namen-Wert-Paare ein und wählen Sie
Vergleichswerte aus den entsprechenden Popupmenüs aus.
Wenn Sie zum Beispiel „Status enthält Entwurf“ angeben, sucht das
Berichtsprogramm nach Dateien, deren Design Notes den Status „Entwurf“
haben.
6 Klicken Sie auf OK, um zum Dialogfeld Berichte zurückzukehren.
7 Klicken Sie auf Ausführen, um den Bericht auszuführen.

Siteverwaltung und Teamarbeit 151


Dateien abrufen und bereitstellen
Wenn Sie in einem Team arbeiten, können Sie mit Hilfe des Eincheck-/Auscheck-
Systems Dateien zwischen lokalen Sites und Remote-Sites übertragen (siehe unter
„Ein- und Auschecken“ auf Seite 140). Wenn Sie allein an der Remote-Site
arbeiten, können Sie stattdessen mit den Befehlen Bereitstellen und Abrufen
Dateien übertragen, ohne sie ein- bzw. auszuchecken.
Anmerkung: Wenn Sie Site > Abrufen oder Site > Bereitstellen wählen, während das
Dokumentfenster aktiv ist, und wenn die aktuelle Datei nicht Teil der aktuell geöffneten Site
ist, versucht Dreamweaver herauszufinden, zu welcher der lokal definierten Sites die
aktuelle Datei gehört. Wenn die aktuelle Datei zu lediglich einer lokalen Site gehört, öffnet
Dreamweaver diese Site und führt dann das Abrufen oder Bereitstellen durch.

Dateien von einem Remote-Server abrufen


Wenn Sie Dateien abrufen, werden sie von der Remote-Site in die lokale Site
kopiert.
Wenn Sie mit dem Eincheck-/Auscheck-System arbeiten (d. h., die Option Ein-/
Auschecken von Dateien aktivieren ist markiert), erhalten Sie mit dem Befehl
Abrufen nur eine schreibgeschützte Kopie der Datei. Die Datei ist weiterhin in
der Remote-Site für andere Team-Mitglieder zum Auschecken verfügbar. Ist das
Kontrollkästchen Ein-/Auschecken von Dateien aktivieren deaktiviert, wird die
Datei mit Lese- und Schreibberechtigung in die lokale Site kopiert. Siehe unter
„Ein- und Auschecken“ auf Seite 140.
Anmerkung: Wenn Sie in einem Team arbeiten, d. h. andere Mitarbeiter arbeiten an
denselben Dateien, sollte das Kontrollkästchen Ein-/Auschecken von Dateien
aktivieren nicht deaktiviert werden. Besonders wenn andere Personen das Ein-/
Auschecksystem für die Site verwenden, sollten auch Sie dieses System nutzen.

Wenn Sie auf Abrufen klicken, werden die Dateien kopiert, die im gerade aktiven
Bereich des Sitefensters ausgewählt sind. Ist der Bereich Remote-Site aktiv,
werden die ausgewählten Remote-Dateien in die lokale Site kopiert. Ist dagegen
der Bereich Lokaler Ordner aktiv, werden die Remote-Versionen der
ausgewählten lokalen Dateien in die lokale Site kopiert.
Wenn Sie nicht in einem Team, sondern alleine an den Dateien arbeiten und
sowohl Lese- als auch Schreibberechtigung benötigen, deaktivieren Sie das
Kontrollkästchen Ein-/Auschecken von Dateien aktivieren für die Site (siehe
unter „Remote-Server einer lokalen Site zuordnen“ auf Seite 132).
Verwenden Sie den Befehl Synchronisieren, um nur die Dateien abzurufen, deren
Remote-Version aktueller als die lokale Version ist (siehe unter „Dateien in der
lokalen Site und der Remote-Site synchronisieren“ auf Seite 155).

So rufen Sie Dateien von einem Remote-Server ab:

1 Wählen Sie Fenster > Dateien der Site, um das Sitefenster zu öffnen.

152 Kapitel 4
2 Wählen Sie im Sitefenster oben im Popupmenü der aktuellen Sites die
gewünschte Site aus.
3 Wenn Sie Dateien über FTP übertragen, klicken Sie auf Verbinden, um eine
Verbindung zum Remote-Server herzustellen.
Wenn bereits eine Verbindung besteht (daran zu erkennen, dass die
Schaltfläche Trennen angezeigt wird), können Sie diesen Schritt überspringen.
Werden die Remote-Dateien bereits aus einer früheren Verbindung im Bereich
Remote-Site angezeigt, brauchen Sie nicht auf Verbinden zu klicken. Sobald
Sie auf Abrufen klicken, stellt Dreamweaver automatisch eine Verbindung her.
4 Wählen Sie die Dateien aus, die heruntergeladen werden sollen. (In der Regel
wählen Sie diese Dateien im Bereich Remote-Site aus, Sie können die
entsprechenden Dateien aber auch im Bereich Lokaler Ordner auswählen.
5 Klicken Sie auf Abrufen oder wählen Sie im Kontextmenü oder im Menü Site
die Option Abrufen. Ist die Datei gerade in einem Dokumentfenster geöffnet,
können Sie stattdessen im Dokumentfenster Site > Abrufen wählen.
6 Klicken Sie auf Ja, um auch abhängige Dateien herunterzuladen. Andernfalls
klicken Sie auf Nein. (Wenn Sie bereits lokale Kopien der abhängigen Dateien
haben, klicken Sie auf Nein.) Wenn Sie bei zukünftigen Downloads nicht mehr
nach abhängigen Dateien gefragt werden möchten, markieren Sie das
Kontrollkästchen Diese Meldung nicht mehr zeigen.
Anmerkung: Sie können die Dateiübertragung jederzeit stoppen, indem Sie auf die
Schaltfläche Aktuellen Task stoppen (das rote Stoppschild mit dem weißen X in der
unteren linken Ecke des Sitefensters) klicken oder Esc (Windows) bzw. die
Befehlstaste+Punkt (Macintosh) drücken. Die Übertragung wird eventuell nicht sofort
unterbrochen.

Dreamweaver zeichnet alle FTP-Dateiübertragungen auf. Tritt bei der


Übertragung einer Datei über FTP ein Fehler auf, können Sie mit dem Site-FTP-
Protokoll die Problemursache ermitteln. Wenn Sie das Protokoll anzeigen
möchten, wählen Sie im Sitefenster Fenster > Site-FTP-Protokoll (Windows)
bzw. Site > FTP-Protokoll (Macintosh).

Dateien auf einem Remote-Server bereitstellen


Mit dem Befehl Bereitstellen werden Dateien von der lokalen Site in die Remote-
Site kopiert, wobei der Dateistatus „freigegeben“ normalwerweise beibehalten
wird. Es gibt zwei häufige Situationen, in denen Sie statt des Befehls Einchecken
den Befehl Bereitstellen verwenden: wenn Sie allein arbeiten und das Ein-/
Auschecksystem nicht verwenden oder wenn Sie die aktuelle Version der Datei
auf dem Server bereitstellen möchten, die Datei jedoch noch weiter bearbeiten.
Anmerkung: Wenn Sie eine Datei bereitstellen, die noch nicht in der Remote-Site
vorhanden war, und das Eincheck-/Auscheck-System verwenden, wird die Datei in die
Remote-Site kopiert und dann für Sie freigegeben, damit Sie weiter an der Datei arbeiten
können.

Siteverwaltung und Teamarbeit 153


Wenn Sie eine Datei auf einem Remote-Server bereitstellen und gleichzeitig
einchecken möchten, wählen Sie den Befehl Einchecken. Siehe unter „Dateien auf
einem Remote-Server ein- und auschecken“ auf Seite 141.
Wenn Sie nur die Dateien bereitstellen möchten, deren lokale Version aktueller ist
als die Remote-Version, lesen Sie unter „Dateien in der lokalen Site und der
Remote-Site synchronisieren“ auf Seite 155.
Anmerkung: Verwenden Sie keine Sonderzeichen (wie ä, ß oder ¥) oder Satzzeichen
(wie Doppelpunkte, Schrägstriche oder Punkte) für die Namen der Dateien, die Sie auf
einem Remote-Server bereitstellen möchten. Viele Server ändern diese Zeichen beim
Upload, sodass Hyperlinks zu den Dateien nicht mehr funktionieren.

So stellen Sie Dateien auf einem Remote-Server bereit:

1 Wählen Sie Fenster > Dateien der Site, um das Sitefenster zu öffnen.
2 Wählen Sie im Sitefenster oben im Popupmenü der aktuellen Sites die
gewünschte Site aus.
3 Wenn Sie Dateien über FTP übertragen, können Sie auf Verbinden klicken,
um eine Verbindung zum Remote-Server herzustellen. So können Sie sehen,
welche Dateien sich in der Remote-Site befinden, bevor Sie Dateien
übertragen. Es ist jedoch nicht erforderlich, auf Verbinden zu klicken,
da Dreamweaver automatisch eine Verbindung herstellt, wenn Sie auf
Bereitstellen klicken.
4 Wählen Sie die Dateien aus, die hochgeladen werden sollen. (In der Regel
wählen Sie diese Dateien im Bereich Lokaler Ordner aus, Sie können die
entsprechenden Dateien jedoch stattdessen im Bereich Remote-Site auswählen.
5 Klicken Sie auf Bereitstellen oder wählen Sie im Kontextmenü oder im Menü
Site die Option Bereitstellen.
6 Wurde die Datei nicht gespeichert, wird (je nach Ihren Einstellungen in der
Kategorie Site des Dialogfelds Voreinstellungen) ein Dialogfeld angezeigt,
in dem Sie die Datei speichern können, bevor Sie sie auf dem Remote-Server
bereitstellen. Klicken Sie auf Ja, um die Datei zu speichern. Wenn Sie die zuvor
gespeicherte Version auf dem Remote-Server bereitstellen möchten, klicken Sie
auf Nein.
Wenn Sie die Datei nicht speichern, werden Änderungen, die Sie seit dem
letzten Speichern vorgenommen haben, nicht auf dem Remote-Server
bereitgestellt. Die Datei bleibt jedoch weiterhin geöffnet, sodass Sie
gegebenenfalls die Änderungen speichern können, nachdem Sie die Datei
auf dem Server bereitgestellt haben.
7 Klicken Sie auf Ja, um auch abhängige Dateien hochzuladen. Andernfalls
klicken Sie auf Nein. (Enthält die Remote-Site bereits Kopien der abhängigen
Dateien, klicken Sie auf Nein.) Wenn Sie bei zukünftigen Uploads nicht mehr
nach abhängigen Dateien gefragt werden möchten, markieren Sie das
Kontrollkästchen Diese Meldung nicht mehr zeigen.

154 Kapitel 4
Anmerkung: Sie können die Dateiübertragung jederzeit stoppen, indem Sie auf die
Schaltfläche Aktuellen Task stoppen (das rote Stoppschild mit dem weißen X in der
unteren linken Ecke des Sitefensters) klicken oder Esc (Windows) bzw. die
Befehlstaste+Punkt (Macintosh) drücken. Die Übertragung wird eventuell nicht sofort
unterbrochen.

Ist die Datei gerade in einem Dokumentfenster geöffnet, können Sie stattdessen
im Dokumentfenster Site > Bereitstellen wählen.
Dreamweaver zeichnet alle FTP-Dateiübertragungen auf. Tritt bei der
Übertragung einer Datei über FTP ein Fehler auf, können Sie mit dem Site-FTP-
Protokoll die Problemursache ermitteln. Wenn Sie das Protokoll anzeigen
möchten, wählen Sie im Sitefenster Fenster > Site-FTP-Protokoll (Windows)
bzw. Site > FTP-Protokoll (Macintosh).

Dateien in der lokalen Site und der Remote-


Site synchronisieren
Sobald Sie Dateien in der lokalen Site und der Remote-Site erstellt haben, können
Sie sie synchronisieren. Verwenden Sie den Befehl Site > Synchronisieren, um die
neuesten Versionen der Dateien zur und von der Remote-Site zu übertragen.
Ist die Remote-Site ein FTP-Server (und kein Netzwerkserver), werden die
Dateien über FTP synchronisiert. Weitere Informationen über FTP finden Sie
unter „Remote-Server einer lokalen Site zuordnen“ auf Seite 132.
Bevor Sie die Sites synchronisieren, können Sie mit Dreamweaver überprüfen,
welche Dateien Sie auf dem Remote-Server bereitstellen und welche Sie von
abrufen möchten. Dreamweaver bestätigt nach Abschluss der Synchronisierung,
welche Dateien aktualisiert wurden.
Wenn Sie sehen möchten, welche Dateien in der lokalen Site oder in der Remote-
Site neuer sind, ohne die Synchronisierung zu starten, wählen Sie Bearbeiten >
Neuere auswählen (lokal) oder Bearbeiten > Neuere auswählen (Remote)
(Windows, vom Sitefenster aus) bzw. Site > Sitedateien-Ansicht > Neuere
auswählen (lokal) oder Site > Sitedateien-Ansicht > Neuere auswählen (Remote)
(Macintosh).

So synchronisieren Sie Dateien:

1 Wenn Sie statt der gesamten Site nur bestimmte Dateien oder Ordner
synchronisieren möchten, wählen Sie im Bereich Lokaler Ordner oder
Remote-Site des Sitefensters die jeweiligen Dateien oder Ordner aus.
2 Wählen Sie im Sitefenster (Windows) bzw. aus der Menüleiste (Macintosh)
Site > Synchronisieren.

Siteverwaltung und Teamarbeit 155


3 Wenn Sie die gesamte Site synchronisieren möchten, wählen Sie im
Popupmenü Synchronisieren die Option Gesamte Site-Name-Site. Wenn Sie
nur ausgewählte Dateien synchronisieren möchten, aktivieren Sie Nur lokale
Dateien auswählen (oder Nur ausgewählte Remote-Dateien, wenn Sie die
letzte Auswahl im Bereich Remote-Site vorgenommen haben).
4 Legen Sie fest, in welche Richtung die Dateien kopiert werden sollen:
• Wählen Sie Aktuellere Dateien für Remote-Objekt bereitstellen, wenn Sie alle
lokalen Dateien hochladen möchten, deren Änderungsdatum aktueller ist als
das der entsprechenden Remote-Dateien.
• Wählen Sie Aktuellere Dateien von Remote-Objekt beziehen, wenn Sie alle
Remote-Dateien herunterladen möchten, deren Änderungsdatum aktueller ist
als das der entsprechenden lokalen Dateien.
• Wählen Sie Aktuellere Dateien beziehen und bereitstellen, wenn die neuesten
Versionen sämtlicher Dateien sowohl auf der lokalen Site als auch auf der
Remote-Site abgelegt werden sollen.
5 Bestimmen Sie, ob die Dateien in der Ziel-Site, die keine Entsprechung in
der Ursprungs-Site haben, gelöscht werden sollen. (Diese Option ist nicht
verfügbar, wenn Sie Abrufen und Bereitstellen gewählt haben.)
Wenn Sie Aktuellere Dateien für Remote-Objekt bereitstellen wählen und die
Option Löschen aktivieren, löscht Dreamweaver alle Dateien in der Remote-
Site, für die keine entsprechenden lokalen Dateien vorhanden sind. Wenn Sie
Aktuellere Dateien von Remote-Objekt beziehen wählen, löscht
Dreamweaver alle Dateien in der lokalen Site, für die keine entsprechenden
Remote-Dateien vorhanden sind.
6 Klicken Sie auf Vorschau.
Befindet sich die neueste Version jeder ausgewählten Datei bereits an beiden
Stellen, wird gemeldet, dass keine Synchronisierung erforderlich ist.
7 Geben Sie im Dialogfeld Dateien synchronisieren an, welche Dateien gelöscht,
bereitgestellt und abgerufen werden sollen. Soll Dreamweaver eine bestimmte
Datei löschen, bereitstellen oder abrufen, wählen Sie diese Datei aus, indem Sie
auf das Kontrollkästchen links neben der Datei (in der Spalte Aktion) klicken.
8 Klicken Sie auf OK. Die Dateien werden automatisch übertragen
(und gegebenenfalls gelöscht). Dreamweaver aktualisiert im Dialogfeld
Dateien synchronisieren den Status.
9 Wenn Sie die Prüfinformationen in einer lokalen Datei speichern möchten,
klicken Sie auf Protokoll speichern.

156 Kapitel 4
5

KAPITEL 5
Dokumente einrichten
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Nachdem Sie eine lokale Site erstellt haben, können Sie nun die zugehörigen
Dokumente erstellen. (Wenn Sie noch keine Site eingerichtet haben, lesen Sie die
Informationen unter „Neue Sites mit Dreamweaver einrichten“ auf Seite 107.)
Ein Dokument, also eine Seite Ihrer Website, kann Text und Bilder sowie
komplexere Inhalte wie Animationen, Video, Hyperlinks auf andere Dokumente
und Audiodateien enthalten. Während Sie Dokumente erstellen und bearbeiten,
generiert Dreamweaver automatisch den zugrunde liegenden HTML- und
JavaScript-Quellcode. Diesen Code können Sie mit einem der Codeeditoren
von Dreamweaver einsehen oder bearbeiten, und zwar entweder über die
Codeansicht im Dokumentfenster oder über den Codeinspektor.
(Detaillierte Informationen hierzu finden Sie unter „Codeansicht (oder
Codeinspektor) verwenden“ auf Seite 362.)
In Dreamweaver können Sie neue Dokumente aus leeren HTML-Seiten oder
von Vorlagen erstellen. Alternativ können Sie HTML-Dokumente öffnen und
modifizieren, die mit anderen Anwendungen erstellt wurden. (Siehe „HTML-
Dokumente erstellen, öffnen und speichern“ auf Seite 158.)
Wenn Sie ein Dokument einrichten, können Sie zunächst einige Grundelemente
für die Seite definieren. Der Seitentitel dient z. B. als Dokumentbezeichner für
Besucher Ihrer Website. Er erscheint in der Regel in der Titelleiste des
Browserfensters. Hintergrundbilder, Hintergrundfarben sowie Text- und
Hyperlinkfarben können individuell eingerichtet werden und dienen zur
Unterscheidung von normalem Text und Hypertext. Über die Randeigenschaften
können Sie die Breite des oberen und linken Randes der Seite festlegen.
(Siehe „Dokumenteigenschaften festlegen“ auf Seite 160.)
Wenn Sie Inhalte hinzufügen, können Sie Objekte direkt im Dokumentfenster
auswählen und modifizieren. In einigen Fällen müssen Sie Markierungen
auswählen, die im Dokumentfenster als Platzhalter für nicht sichtbare Elemente
auf der Seite angezeigt werden. Dies gilt zum Beispiel für Kommentare und
Skripte. (Siehe „Elemente im Dokumentfenster auswählen“ auf Seite 162.)
Über die Verlaufspalette können Sie beim Erstellen von Dokumenten bestimmte
Tasks mehrmals ausführen. (Siehe „Tasks automatisieren“ auf Seite 168.)
157
HTML-Dokumente erstellen, öffnen
und speichern
Macromedia Dreamweaver bietet mehrere Möglichkeiten zum Erstellen von
Dokumenten. Sie können neue, leere HTML-Dokumente erstellen, ein bereits
vorhandenes HTML-Dokument öffnen, auch wenn es nicht mit Dreamweaver
erstellt wurde, oder ein neues Dokument unter Verwendung einer Vorlage
erstellen.
Darüber hinaus können Sie auch andere Textdateien als HTML-Dateien,
wie z. B. JavaScript-Dateien, reine E-Mail-Textdateien oder Textdateien aus
Textverarbeitungsprogrammen oder Texteditoren öffnen. Auch wenn Sie nicht
alle Dokumentbearbeitungswerkzeuge von Dreamweaver in Textdokumenten
verwenden können, stehen Ihnen in jedem Fall die wichtigsten
Textbearbeitungsfunktionen zur Verfügung. Das Öffnen von Textdokumenten
kann zum Beispiel sinnvoll sein, wenn Sie JavaScript-Code bearbeiten und
debuggen, den Inhalt einer Dreamweaver-Konfigurationsdatei anzeigen oder
eine E-Mail öffnen wollen, die HTML-Code enthält, den Sie in ein anderes
Dokument kopieren möchten.

Führen Sie einen der folgenden Schritte aus, um ein leeres HTML-Dokument
in einem neuen Dokumentfenster zu erstellen:

• Windows: Wählen Sie in einem vorhandenen Dokumentfenster den


Menübefehl Datei > Neu oder wählen Sie im Sitefenster Datei > Neues
Fenster.
• Macintosh: Wählen Sie Datei > Neu.
Wenn Sie die Codeansicht (im Dokumentfenster) oder den Codeinspektor
öffnen, können Sie sehen, dass das neue Dokument nicht ganz leer ist: Es enthält
bereits html-, head- und body-Tags, um Ihnen die Arbeit zu erleichtern. Während
Sie in der Entwurfsansicht des Dokumentfensters Text eingeben oder Objekte
wie Tabellen oder Bilder anzeigen oder einfügen, können Sie einen Codeeditor
geöffnet lassen und mitverfolgen, wie der HTML-Quellcode erstellt wird.
Weitere Informationen über Codeeditoren finden Sie unter „Codeansicht (oder
Codeinspektor) verwenden“ auf Seite 362.

Führen Sie einen der folgenden Schritte aus, um eine vorhandene HTML-Seite
zu öffnen:

• Wählen Sie Datei > Öffnen.


• Wenn die Datei mit Microsoft Word erstellt wurde, wählen Sie Datei >
Importieren > Word-HTML importieren.
Wenn Sie Word-HTML importieren wählen, öffnet Dreamweaver die Datei
und gibt Ihnen die Option, den von Word erstellten, überflüssigen HTML-
Code zu entfernen. (Microsoft Word 97 und spätere Versionen verfügen
über eine Funktion zum Speichern von Dokumenten als HTML-Dateien.
Bei dieser Konvertierung wird jedoch unnötiger HTML-Code hinzugefügt.)
Weitere Informationen finden Sie unter „Microsoft Word-HTML optimieren“
auf Seite 381.

158 Kapitel 5
Anmerkung: Microsoft Word-Dateien (.doc-Dateien) können nicht direkt in
Dreamweaver importiert werden. Wenn Sie den Inhalt einer Word-Datei importieren
möchten, starten Sie Word und speichern Sie die Datei als HTML, bevor Sie die auf
diese Weise erstellte HTML-Datei in Dreamweaver importieren.

So erstellen Sie ein neues Dokument von einer Vorlage:

1 Wählen Sie Datei > Neu von Vorlage.


Es erscheint ein Dialogfeld mit einer Liste aller Vorlagen, die für die aktuelle
Site zur Verfügung stehen. (Um Dokumente von Vorlagen erstellen zu können,
müssen Sie zuerst die Vorlagen erstellen. Siehe „Vorlagen erstellen“ auf
Seite 413.)
Wenn Sie ein Dokument von einer Vorlage erstellen, sind einige Teile
des Dokuments „gesperrt“. Diese gesperrten Bereiche können nicht von
Ihnen bearbeitet werden. (Welche Bereiche bearbeitbar bzw. gesperrt sind,
ist in der Vorlagendatei definiert.) Auf diese Weise wird ein einheitliches
Design gewährleistet, wenn die Vorlage für mehrere Dokumente einer
Site verwendet wird.
2 Wählen Sie eine Vorlage aus und klicken Sie auf Auswählen.
Unter Verwendung der ausgewählten Vorlage wird ein neues Dokument
erstellt. Bearbeitbare Bereiche des neuen Dokuments sind standardmäßig
blau umrandet. Das gesamte Dokument ist standardmäßig von einem gelben
Rahmen umgeben, was darauf hinweisen soll, dass das Dokument auf einer
Vorlage basiert und dass deshalb einige Teile nicht bearbeitet werden können.
(Wie Sie die Farben der Rahmen ändern, erfahren Sie unter „Einstellungen für
Vorlagen festlegen“ auf Seite 420.) Um einen bearbeitbaren Teil einer Vorlage
zu modifizieren, wählen Sie den Platzhalterinhalt im bearbeitbaren Bereich
aus und überschreiben Sie ihn. In manchen Fällen enthält ein bearbeitbarer
Bereich keinen Platzhalterinhalt. Klicken Sie in diesem Fall einfach in den
bearbeitbaren Bereich.
Näheres über den Entwurf und die Verwendung von Vorlagen siehe „Inhalte über
Vorlagen und Bibliotheken wieder verwenden“ auf Seite 411.

So speichern Sie ein Dokument:

1 Wählen Sie Datei > Speichern.


2 Geben Sie einen Namen für die Datei ein und wählen Sie den Ordner,
in dem Sie die Datei speichern möchten.

Dokumente einrichten 159


Anmerkung: Dreamweaver fügt dem Dateinamen automatisch die Erweiterung .htm
(Windows) bzw. .html (Macintosh) hinzu, wenn das Dialogfeld zum ersten Mal
erscheint. (Über eine spezielle Option in den allgemeinen Einstellungen können
Sie definieren, welche Dateinamenerweiterung hinzugefügt werden soll.) Wenn Sie
eine Datei in Windows als reine Textdatei speichern möchten, geben Sie hier als
Erweiterung .txt an. Wenn Sie eine Datei auf dem Macintosh als reine Textdatei
speichern möchten, entfernen Sie die Erweiterung .html aus dem Namen der
Macintosh-Datei. (Damit Dreamweaver die Datei wieder als HTML-Datei
erkennt, speichern Sie die Datei wieder mit der Erweiterung .html bzw. .htm.)
Bei Dateien, die als reine Textdateien gespeichert wurden, interpretiert
Dreamweaver keinen HTML-Code.

Verwenden Sie in Datei- und Ordnernamen möglichst weder Leerzeichen noch


Sonderzeichen. Verwenden Sie insbesondere keine Sonderzeichen (wie ä, ß
oder ¥) und Satzzeichen (wie Punkte, Doppelpunkte oder Schrägstriche) in
Namen von Dateien, die auf einem Remote-Server bereitgestellt werden sollen.
Viele Server wandeln diese Zeichen beim Hochladen um, sodass Hyperlinks zu
diesen Dateien nicht mehr funktionieren. Dateinamen sollten auch nicht mit
einer Ziffer beginnen.
3 Klicken Sie auf die Schaltfläche Speichern, um die Datei zu speichern.

Dokumenteigenschaften festlegen
Seitentitel, Hintergrundbilder und -farben, Text- und Hyperlinkfarben sowie
Seitenränder gehören zu den Grundattributen eines HTML-Dokuments.
Der Seitentitel dient zur Identifizierung und Benennung des Dokuments.
Ein Hintergrundbild oder eine Hintergrundfarbe bestimmt das Erscheinungsbild
eines Dokuments. Anhand der Text- und der Hyperlinkfarbe können Besucher
normalen Text von Hypertext unterscheiden und erkennen, welche Hyperlinks
bereits besucht wurden und welche nicht.

Seitentitel ändern
Der Titel einer HTML-Seite dient als Orientierungshilfe für Besucher Ihrer
Website und als ID der Seite in der Verlaufs- und Lesezeichenliste des Browsers.
Wenn Sie einer Seite keinen Titel geben, wird die Seite im Browserfenster sowie
in der Lesezeichen- und Verlaufsliste als Unbenanntes Dokument bezeichnet.
Hinweis: Der Name, den Sie einer Datei beim Speichern geben, ist nicht
unbedingt derselbe Name wie der Titel einer Seite. Mit dem Befehl Site >
Berichte können Sie herausfinden, welche Dokumente einer Site keinen Titel
haben. Siehe „Berichte erstellen“ auf Seite 552.

So ändern Sie den Titel einer Seite:

1 Führen Sie einen der folgenden Schritte aus:


• Wählen Sie Modifizieren > Seiteneigenschaften.

160 Kapitel 5
• Klicken Sie auf einen leeren Bereich Ihrer Seite, um sicherzugehen, dass nichts
ausgewählt ist. Klicken Sie dann mit der rechten Maustaste (Windows) bzw.
bei gedrückter Strg-Taste (Macintosh) in die Entwurfsansicht des
Dokumentfensters und wählen Sie im Kontextmenü die Option
Seiteneigenschaften.
• Wählen Sie Ansicht > Head-Inhalt, klicken Sie auf die Schaltfläche Titel
und öffnen Sie dann den Eigenschafteninspektor.
• Wählen Sie Ansicht > Symbolleiste.
2 Geben Sie den gewünschten Titel im Feld Titel ein.
3 Klicken Sie auf OK, wenn Sie den Titel im Dialogfeld Seiteneigenschaften
bearbeitet haben.
Der neue Titel erscheint nun in der Titelleiste des Dokumentfensters (sowie in
der Symbolleiste, sofern eingeblendet). Der Dateiname der Seite und der Name
des Ordners, in dem die Datei gespeichert ist, werden in der Titelleiste neben
dem Titel in Klammern angegeben. Ein Sternchen bedeutet, dass das
Dokument Änderungen enthält, die noch nicht gespeichert wurden.

Hintergrundbild oder Seitenfarbe definieren


Im Dialogfeld Seiteneigenschaften können Sie ein Bild oder eine Farbe als
Hintergrund für die Seite festlegen. Wenn Sie sowohl ein Bild als auch eine
Farbe festlegen, erscheint die Farbe nur, während das Bild heruntergeladen wird.
Anschließend „verdeckt“ das Bild die Farbe. Wenn das Hintergrundbild
transparente Pixel enthält, scheint die Hintergrundfarbe an diesen Stellen durch.

So definieren Sie ein Hintergrundbild oder eine Seitenfarbe:

1 Wählen Sie Modifizieren > Seiteneigenschaften oder wählen Sie


Seiteneigenschaften aus dem Kontextmenü in der Entwurfsansicht des
Dokumentfensters.
2 Um ein Hintergrundbild festzulegen, klicken Sie auf die Schaltfläche
Durchsuchen und wählen Sie das gewünschte Bild aus. Alternativ dazu können
Sie den Pfad zu dem Hintergrundbild in das Feld Hintergrundbild eingeben.
Ebenso wie ein Webbrowser ordnet Dreamweaver das Hintergrundbild
mehrmals neben- und untereinander an, wenn es nicht das ganze Fenster füllt.
(Bei Bedarf können Sie diese Bildwiederholung mithilfe von Stylesheets
unterbinden. Siehe „CSS-Stylesheets verwenden“ auf Seite 267.)
3 Um eine Hintergrundfarbe festzulegen, klicken Sie in das Feld für die
Hintergrundfarbe und wählen Sie die gewünschte Farbe im Farbwähler aus.
(Siehe „Mit Farben arbeiten“ auf Seite 90.)

Dokumente einrichten 161


Standardtextfarben festlegen
Definieren Sie im Dialogfeld Seiteneigenschaften eine Standardfarbe für
normalen Text, Hyperlinks, besuchte Hyperlinks und Hyperlinks oder wählen
Sie ein vordefiniertes Farbschema für Seitenhintergrund und Textfarben aus.
(Siehe „Mit Farben arbeiten“ auf Seite 90.)
Anmerkung: Die Farbe des aktiven Hyperlinks ist die Farbe, die ein Hyperlink annimmt,
wenn ein Besucher darauf klickt. Einige Webbrowser verwenden nicht unbedingt die von
Ihnen definierte Farbe.

Führen Sie einen der folgenden Schritte aus, um Standardtextfarben festzulegen:

• Wählen Sie Modifizieren > Seiteneigenschaften und wählen Sie eine Farbe
für Text, Hyperlinks, Besuchte Hyperlinks und Aktive Hyperlinks.
• Wählen Sie Befehle > Farbschema einstellen und wählen Sie dann eine
Hintergrundfarbe und eine Farbe für Text und Hyperlinks.
In der Vorschau sehen Sie, wie das Farbschema im Browser aussehen wird.
Anmerkung: Farbenblinde Benutzer haben unter Umständen Schwierigkeiten,
bestimmte Farbkombinationen zu erkennen. Bedenken Sie dies bei der Wahl Ihrer
Farben.

Elemente im Dokumentfenster auswählen


Um ein Element in der Entwurfsansicht des Dokumentfensters auszuwählen,
müssen Sie ganz generell darauf klicken. Ist ein Element unsichtbar, müssen Sie
es erst sichtbar machen, um es auswählen zu können.

Gehen Sie wie folgt vor, um Elemente auszuwählen:

• Zum Auswählen eines sichtbaren Elements im Dokumentfenster klicken Sie


auf das Element oder ziehen den Mauszeiger über das Element.
• Zum Auswählen eines unsichtbaren Elements wählen Sie Ansicht > Visuelle
Hilfsmittel > Unsichtbare Elemente (wenn diese Menüoption noch nicht
gewählt ist) und klicken dann auf die Markierung des Elements im
Dokumentfenster.
Einige Objekte erscheinen nicht an der Stelle der Seite, an der sich der
zugehörige Code befindet. So kann zum Beispiel eine Ebene an jeder Stelle der
Seite sein, aber der Code, der die Ebene definiert, befindet sich an einer festen
Position. Wenn unsichtbare Elemente eingeblendet sind, zeigt Dreamweaver
im Dokumentfenster Markierungen an, aus denen der Ort des Codes dieser
Elemente hervorgeht. Durch das Auswählen der Markierung wählen Sie das
gesamte Element aus. Wenn Sie also beispielsweise die Markierung einer Ebene
auswählen, wählen Sie die gesamte Ebene aus. (Siehe „Unsichtbare Elemente“
auf Seite 164.)

162 Kapitel 5
• Um ein komplettes Tag (einschließlich seines Inhalts) auszuwählen, klicken Sie
auf den Tag-Selektor links unten im Dokumentfenster. (Der Tag-Selektor ist
nur eingeblendet, wenn die Entwurfsansicht aktiv ist.) Der Tag-Selektor zeigt
die Tags, die dem aktuell ausgewählten Bereich bzw. der Position der
Einfügemarke entsprechen. Das Tag ganz links ist das äußerste Tag, das die
aktuelle Auswahl oder die Einfügemarke enthält. Das nächste Tag ist in diesem
äußersten Tag enthalten usw. Das Tag ganz rechts ist das innerste Tag, das die
aktuelle Auswahl oder die Einfügemarke enthält.

Tag-Selektor

Wenn Sie zum Beispiel einen Hyperlink für ein Bild definieren, sieht der
HTML-Code etwa so aus:
<a href="http://www.macromedia.com"><img src="agraphic.gif"></
a>

Wenn Sie im Dokumentfenster auf ein Bild klicken, zeigt der Tag-Selektor
die Tags für diese Auswahl:
<body><a><img>

Da das Bild ausgewählt ist, wird das Tag <img> im Tag-Selektor fett angezeigt.
Ein Klick auf dieses Tag im Tag-Selektor entspricht dem Auswählen von <img
src="agraphic.gif"> in einem Codeeditor.

Um statt des Bildes den Hyperlink (das a-Tag und seinen gesamten Inhalt)
auszuwählen, klicken Sie im Dokumentfenster auf das Bild und anschließend
im Tag-Selektor auf <a>.

Führen Sie einen der folgenden Schritte aus, um den HTML-Code für eine
ausgewählte Textstelle oder ein ausgewähltes Objekt anzuzeigen:

• Um die Codeansicht im Dokumentfenster zu aktivieren, wählen Sie Ansicht >


Code oder Ansicht > Code und Entwurf. Weitere Informationen über die
Codeansicht finden Sie unter „Codeansicht (oder Codeinspektor) verwenden“
auf Seite 362.
• Um den Codeinspektor zu öffnen (in einem separaten Fenster), wählen Sie
Fenster > Codeinspektor.

Dokumente einrichten 163


Wenn Sie in einem der beiden Codeeditoren (in der Codeansicht oder
im Codeinspektor) eine bestimmte Stelle auswählen, wird diese Stelle im
Allgemeinen auch im Dokumentfenster ausgewählt. Eventuell müssen Sie
die beiden Ansichten synchronisieren, damit die Auswahl erscheint.
Siehe „Codeansicht (oder Codeinspektor) verwenden“ auf Seite 362

Unsichtbare Elemente
Für einige HTML-Code-Informationen gibt es keine sichtbare Entsprechung
in einem Browser. Dies gilt zum Beispiel für comment-Tags. Oftmals ist es jedoch
beim Entwurf einer Seite nützlich, solche unsichtbaren Elemente auswählen,
bearbeiten, verschieben und löschen zu können. In Dreamweaver können Sie
festlegen, ob die Stellen, an der sich unsichtbare Elemente in der Entwurfsansicht
des Dokumentfensters befinden, durch entsprechende Symbole markiert werden
sollen.
Um diese Markierungssymbole ein- oder auszublenden, wählen Sie Ansicht >
Visuelle Hilfsmittel > Unsichtbare Elemente. Wenn Sie unsichtbare Elemente
einblenden, können Sie sie auswählen und ihre Eigenschaften im
Eigenschafteninspektor ändern. Wenn Sie sie ausblenden, sehen Sie die Seite
dagegen in einer Darstellung, die eher der tatsächlichen Darstellung in einem
Browser entspricht. Beachten Sie, dass sich das Layout einer Seite durch das
Einblenden von unsichtbaren Elementen geringfügig verändern kann, da andere
Elemente um ein paar Pixel verschoben werden können. Um das Layout präzise
darzustellen, sollten Sie deshalb die unsichtbaren Elemente ausblenden.
Über die Einstellungen für unsichtbare Elemente können Sie festlegen,
welche Elementmarkierungen erscheinen sollen, wenn Sie Ansicht > Visuelle
Hilfsmittel > Unsichtbare Elemente wählen. Beispielsweise können Sie festlegen,
dass zwar benannte Anker, aber keine Zeilenumbrüche eingeblendet werden
sollen.
Bestimmte unsichtbare Elemente (wie Kommentare, benannte Anker und
Skripte) können Sie über die Schaltflächen in der Kategorie Unsichtbare
Elemente der Objektpalette erstellen (siehe „Die Objektpalette“ auf Seite 82).
Sie können diese Elemente dann im Eigenschafteninspektor modifizieren.

Voreinstellungen für unsichtbare Elemente festlegen


Mit den Voreinstellungen für unsichtbare Elemente legen Sie fest, welche Art von
Elementen eingeblendet werden sollen, wenn Sie Ansicht > Visuelle Hilfsmittel >
Unsichtbare Elemente wählen.

So ändern Sie die Voreinstellungen für unsichtbare Elemente:

1 Wählen Sie Bearbeiten > Voreinstellungen und klicken Sie dann auf
Unsichtbare Elemente.

164 Kapitel 5
2 Wählen Sie die Elemente aus, die eingeblendet werden sollen. Ein Häkchen
neben dem Namen eines Elements im Dialogfeld bedeutet, dass das Element
sichtbar ist, wenn Sie Ansicht > Visuelle Hilfsmittel > Unsichtbare Elemente
wählen.
Eine Erläuterung zu den einzelnen Voreinstellungen für unsichtbare Elemente
finden Sie in der Dreamweaver-Hilfe.

Visuelle Hilfsmittel bei der Gestaltung von


Webseiten verwenden
Dreamweaver bietet verschiedene Hilfsmittel zur leichteren Gestaltung von
Dokumenten und zur (ungefähren) Vorschau auf die Darstellung im Browser.
Folgende Möglichkeiten stehen zur Verfügung:
• Verkleinern oder Vergrößern des Dokumentfensters auf eine bestimmte
Fenstergröße, um zu sehen, wie die einzelnen Elemente auf die Seite passen.
Siehe „Das Dokumentfenster vergrößern oder verkleinern“ auf Seite 77.
• Verwendung von Linealen als visuelle Anhaltspunkte zur Positionierung
und Größenänderung von Ebenen und Tabellen.
• Verwendung eines Tracing-Bildes als Seitenhintergrund zum leichteren
Duplizieren eines Designs, das mit einer Illustrations- oder
Bildbearbeitungsanwendung wie Macromedia Fireworks erstellt wurde.
• Verwendung eines Rasters zur präzisen Positionierung von Ebenen. Auf der
Seite eingeblendete Rasterlinien erleichtern das Ausrichten von Ebenen.
Bei aktivierter Am Raster ausrichten-Funktion werden Ebenen automatisch
am nächstgelegenen Rasterschnittpunkt ausgerichtet, wenn Sie sie verschieben
oder ihre Größe ändern. (Andere Objekte, wie z. B. Bilder oder Absätze,
werden nicht automatisch an den Rasterschnittpunkten ausgerichtet.)
Diese Funktion kann auch dann verwendet werden, wenn die Rasterlinien
ausgeblendet sind. Siehe „Ebenen am Raster ausrichten“ auf Seite 452.

Lineale anzeigen
Lineale können am linken und rechten Rand der Seite eingeblendet werden.
Als Maßeinheit kann Pixel, Zoll oder Zentimeter gewählt werden.

Führen Sie einen der folgenden Schritte aus, um die Linealeinstellungen


zu ändern:

• Um die Lineale ein- und auszublenden, wählen Sie Ansicht > Lineale >
Zeigen.

Dokumente einrichten 165


• Um den Ursprung zu ändern, ziehen Sie das Linealursprungssymbol an eine
beliebige Stelle der Seite. (Dieses Symbol erscheint in der oberen rechten Ecke
der Entwurfsansicht des Dokumentfensters, wenn Lineale eingeblendet sind.)
Um den Ursprung wieder an die Standardposition zurückzusetzen, wählen Sie
Ansicht > Lineale > Ursprung zurücksetzen.
• Um die Maßeinheit zu ändern, wählen Sie im Untermenü Ansicht > Lineale
die Option Pixel, Zoll oder Zentimeter.

Tracing-Bilder verwenden
Tracing-Bilder können als Hilfsmittel zur Reproduktion eines Seitendesigns
verwendet werden, das in einer Grafikanwendung als Muster erstellt wurde.
Ein Tracing-Bild ist ein JPEG-, GIF- oder PNG-Bild, das im Hintergrund
des Dokumentfensters platziert wird. Sie können das Bild ausblenden,
seine Transparenz festlegen und seine Position ändern.
Das Tracing-Bild ist nur in Dreamweaver sichtbar. Es wird niemals in einem
Browser angezeigt. Wenn das Tracing-Bild eingeblendet ist, sind das tatsächliche
Hintergrundbild und die Hintergrundfarbe der Seite nicht im Dokumentfenster,
sondern nur bei der Vorschau der Seite im Browser sichtbar.

So fügen Sie ein Tracing-Bild im Dokumentfenster ein:

1 Führen Sie einen der folgenden Schritte aus:


• Wählen Sie Ansicht > Tracing-Bild > Laden.
• Wählen Sie Modifizieren > Seiteneigenschaften und klicken Sie dann
auf die Schaltfläche Durchsuchen neben dem Feld Tracing-Bild.
2 Wählen Sie im daraufhin erscheinenden Dialogfeld eine Bilddatei aus
und klicken Sie auf Auswählen (Windows) bzw. Wählen (Macintosh).
3 Das Dialogfeld Seiteneigenschaften wird eingeblendet. Legen Sie die
Transparenz des Bildes fest, indem Sie den Schieberegler der Bildtransparenz
nach links oder rechts ziehen. Klicken Sie dann auf OK.
Um zu einem anderen Tracing-Bild zu wechseln oder die Transparenz
des aktuellen Tracing-Bildes zu ändern, können Sie jederzeit Modifizieren >
Seiteneigenschaften wählen.

So blenden Sie das Tracing-Bild ein oder aus:

Wählen Sie Ansicht > Tracing-Bild > Zeigen.

So ändern Sie die Position eines Tracing-Bildes:

Wählen Sie Ansicht > Tracing-Bild > Position einstellen. Führen Sie dann einen
der folgenden Schritte aus:

166 Kapitel 5
• Um die Position eines Tracing-Bildes präzise anzugeben, geben Sie die
entsprechenden Koordinatenwerte in die Felder X und Y ein.
• Um das Bild um je ein Pixel zu verschieben, drücken Sie eine der Pfeiltasten.
• Um das Bild um je fünf Pixel zu verschieben, drücken Sie die Umschalttaste
und eine der Pfeiltasten.

So setzen Sie ein Tracing-Bild auf seine Ausgangsposition zurück:

Wählen Sie Ansicht > Tracing-Bild > Position zurücksetzen. Das Tracing-Bild
kehrt in die obere linke Ecke (0,0) des Dokumentfensters zurück.

So richten Sie das Tracing-Bild an einem ausgewählten Element aus:

1 Wählen Sie ein Element im Dokumentfenster aus.


2 Wählen Sie Ansicht > Tracing-Bild > An Auswahl ausrichten.
Die obere rechte Ecke des Tracing-Bildes wird an der oberen linken Ecke
des ausgewählten Elements ausgerichtet.

Head-Inhalt anzeigen und bearbeiten


HTML-Dateien bestehen aus zwei Hauptbereichen: dem head-Bereich und dem
body-Bereich. Der body-Bereich ist der Hauptteil des Dokuments, also der
sichtbare Teil, der Text, Bilder usw. enthält. Der head-Bereich ist unsichtbar – mit
Ausnahme des Dokumenttitels, der in den Fenstertitelleisten von Browsern und
Dreamweaver angezeigt wird. Geben Sie jeder Seite, die Sie erstellen, einen Titel.
Der head-Bereich enthält noch weitere wichtige Informationen, etwa über den
Dokumenttyp, die Sprachkodierung, JavaScript- und VBScript-Funktionen und -
Variablen, Schlüsselwörter, Inhaltsangaben für Suchmaschinen sowie
Stildefinitionen. Diese Elemente müssen nicht alle auf jeder Seite vorhanden sein.
So brauchen Sie beispielsweise Schlüsselwörter und Inhaltsangaben in der Regel
nur für die Homepage anzugeben. Die Elemente im head-Bereich können Sie
im Menü Ansicht, der Codeansicht des Dokumentfensters oder im
Codeinspektor sichtbar machen.

So zeigen Sie Elemente im head-Bereich eines Dokuments an:

Wählen Sie Ansicht > Head-Inhalt. Für jedes Element des head-Inhalts wird
oben in der Entwurfsansicht des Dokumentfensters ein Symbol angezeigt.
Anmerkung: Wenn Ihr Dokumentfenster so eingestellt ist, dass es nur die Codeansicht
zeigt, kann die Option Ansicht > Head-Inhalt nicht ausgewählt werden.

So fügen Sie ein Element in den head-Bereich eines Dokuments ein:

1 Führen Sie einen der folgenden Schritte aus:

Dokumente einrichten 167


• Wählen Sie im Popupmenü oben in der Objektpalette die Option Head
und klicken Sie auf eine der Objektschaltflächen.
• Wählen Sie im Untermenü Einfügen > Head die gewünschte Option.
2 Geben Sie im daraufhin erscheinenden Dialogfeld oder im
Eigenschafteninspektor entsprechende Optionen für das Element ein.

So bearbeiten Sie ein Element im head-Bereich eines Dokuments:

1 Wählen Sie Ansicht > Head-Inhalt.


2 Klicken Sie auf eines der Symbole im head-Bereich, um es auszuwählen.
3 Legen Sie die gewünschten Eigenschaften des Elements im
Eigenschafteninspektor fest oder modifizieren Sie sie.
Weitere Informationen zu Eigenschaften spezifischer head-Elemente finden Sie
unter den folgenden Themen in der Dreamweaver-Hilfe:
• Meta-Eigenschaften
• Titeleigenschaften
• Schlüsselworteigenschaften
• Beschreibungseigenschaften
• Aktualisierungseigenschaften
• Skripte bearbeiten
• Basiseigenschaften
• Hyperlinkeigenschaften

Tasks automatisieren
Beim Erstellen von Dokumenten ist es oftmals erforderlich, eine bestimmte Task
mehrmals auszuführen. In diesem Abschnitt wird beschrieben, wie Sie solche
häufig wiederkehrenden Aufgaben mithilfe der Verlaufspalette automatisieren
können.
Wenn Sie eine Abfolge von Schritten einmal oder mehrmals wiederholen
möchten, können Sie sie direkt von der Verlaufspalette aus abspielen, in der die
Schritte, die Sie beim Arbeiten an einem Dokument ausführen, aufgezeichnet
werden. (Grundlegende Informationen über die Verlaufspalette finden Sie unter
„Die Verlaufspalette“ auf Seite 87.) Um eine häufig zu erledigende Aufgabe zu
automatisieren, können Sie einen neuen Befehl erstellen, der diese Task
automatisch ausführt.

168 Kapitel 5
Einige Mausaktionen, wie das Auswählen eines Elements im Dokumentfenster
durch Klicken oder Ziehen, können nicht als Teil eines gespeicherten Befehls
abgespielt werden. Wenn Sie eine solche Mausaktion ausführen, erscheint in der
Verlaufspalette eine schwarze Linie (die jedoch erst sichtbar wird, wenn Sie eine
weitere Aktion ausführen). Um nicht abspielbare Aktionen zu vermeiden, sollten
Sie die Einfügemarke im Dokumentfenster möglichst mit den Pfeiltasten statt mit
der Maus verschieben. Um ein Element auszuwählen oder die Auswahl zu
erweitern, drücken Sie die entsprechende Pfeiltaste bei gedrückter Umschalttaste.
Anmerkung: Wenn beim Aufzeichnen einer später benötigten Aufgabe eine schwarze
Mausaktionslinie angezeigt wird, können Sie diesen letzten Schritt rückgängig machen
und stattdessen eine andere Methode wie etwa die Pfeiltasten verwenden.

Bestimmte andere Schritte sind ebenfalls nicht wiederholbar, zum Beispiel das
Ziehen eines Seitenelements an eine andere Stelle der Seite. Wenn Sie einen
solchen Schritt ausführen, erscheint in der Verlaufspalette ein Menübefehlsymbol
mit einem kleinen roten X.
Gespeicherte Schritte werden exakt so wiederholt, wie Sie ursprünglich ausgeführt
wurden, und lassen sich während des Abspielens nicht verändern. Beispiel:
Wenn Sie die Farbe einer Tabellenzelle ursprünglich auf Rot geändert haben,
wird auch eine andere Tabellenzelle auf Rot geändert, wenn Sie den Schritt darauf
anwenden. Sie können keine andere Farbe festlegen, wenn Sie den Schritt auf eine
neue Zelle anwenden.

Schritte wiederholen
Um den letzten Schritt zu wiederholen, den Sie ausgeführt haben, wählen Sie
Bearbeiten > Wiederholen oder verwenden Sie den Tastaturkurzbefehl <Strg>+Y
(Windows) bzw. <Befehlstaste>+Y (Macintosh). Der Name dieses Befehls ändert
sich im Menü Bearbeiten entsprechend dem letzten Schritt, den Sie ausgeführt
haben. Wenn Sie beispielsweise gerade Text eingegeben haben, lautet der
Befehlsname „Wiederholen Texteingabe“. (Der Befehl Wiederholen kann nicht
unmittelbar nach der Operation „Rückgängig“ oder „Wiederherstellen“
ausgeführt werden.)
Wenn Sie einen anderen als den letzten Schritt wiederholen oder mehrere Schritte
auf einmal ausführen möchten, verwenden Sie die Verlaufspalette.
Beachten Sie auch, dass immer der Schritt ausgeführt wird, der gerade ausgewählt
(markiert) ist, und nicht unbedingt derjenige, auf den der Schieberegler zeigt.

So wiederholen Sie einen einzelnen Schritt:

Wählen Sie in der Verlaufspalette einen Schritt aus und klicken Sie auf die
Schaltfläche Abspielen. Der Schritt wird abgespielt und eine Kopie davon
in der Verlaufspalette angezeigt.

Dokumente einrichten 169


So wiederholen Sie eine Reihe von aufeinanderfolgenden Schritten:

1 Wählen Sie die Schritte mit einer der folgenden Methoden aus der
Verlaufspalette aus:
• Ziehen Sie den Mauszeiger von einem Schritt zu einem anderen. (Ziehen Sie
nicht den Schieberegler, sondern ziehen Sie den Mauszeiger mit gedrückter
Maustaste von der Beschriftung eines Schrittes zu der eines anderen.)
• Wählen Sie den ersten Schritt aus und klicken Sie dann bei gedrückter
Umschalttaste auf den letzten Schritt. Oder: Wählen Sie den letzten Schritt aus
und klicken Sie dann bei gedrückter Umschalttaste auf den ersten Schritt.
Anmerkung: Schritte, die eine schwarze Linie für nicht wiederholbare Mausaktionen
enthalten, können Sie zwar auswählen, die entsprechende Mausaktion wird dann
aber beim Abspielen des Schrittes übersprungen.

2 Klicken Sie auf Abspielen.


Die Schritte werden der Reihe nach abgespielt und ein neuer Schritt namens
Schritte erneut abspielen erscheint in der Verlaufspalette.

So wiederholen Sie nicht aufeinanderfolgende Schritte:

1 Wählen Sie einen Schritt aus und klicken Sie dann bei gedrückter Strg-Taste
(Windows) bzw. gedrückter Befehlstaste (Macintosh) auf weitere Schritte.
Durch Klicken mit gedrückter Strg- bzw. Befehlstaste können Sie auch die
Auswahl bereits ausgewählter Schritte wieder aufheben.
2 Klicken Sie auf Abspielen.
Die Schritte werden der Reihe nach abgespielt und ein neuer Schritt mit
dem Namen Schritte erneut abspielen erscheint in der Verlaufspalette.

Schritte auf ein anderes Objekt anwenden


Eine Abfolge von Schritten aus der Verlaufspalette können Sie auf jedes Objekt
im Dokumentfenster anwenden.

So wenden Sie Schritte aus der Verlaufspalette auf ein neues Objekt an:

1 Wählen Sie das Objekt aus.


2 Wählen Sie die entsprechenden Schritte in der Verlaufspalette aus und klicken
Sie dann auf Abspielen.

170 Kapitel 5
Schritte auf mehrere Objekte anwenden
Wenn Sie mehrere Objekte in einem Dokument auswählen und dann Schritte
aus der Verlaufspalette auf diese Objekte anwenden, werden die Objekte als
gruppiert Auswahl betrachtet und Dreamweaver versucht, die Schritte auf diese
Auswahl anzuwenden. Sie können aber beispielsweise nicht fünf Bilder auswählen
und die gleiche Größenänderung auf alle Bilder gleichzeitig anwenden.
Eine Größenänderung ist eine Operation, die auf jedes Bild einzeln angewandt
werden muss.
Um eine Abfolge von Schritten auf jedes Objekt einer Objektgruppe anzuwenden,
müssen Sie dafür sorgen, dass mit dem letzten Schritt der Abfolge das nächste
Objekt der Gruppe ausgewählt wird. Die folgende Vorgehensweise soll dieses
Prinzip für ein konkretes Szenario verdeutlichen, nämlich für das Festlegen
des vertikalen und horizontalen Abstands einer Reihe von Bildern.

So legen Sie den vertikalen und horizontalen Abstand einer Reihe von Bildern fest:

1 Beginnen Sie mit einem Dokument, bei dem jede Zeile aus einem kleinen Bild
(z. B. einem grafischen Aufzählungspunkt oder Symbol), gefolgt von Text
besteht. Das Ziel soll sein, den Abstand zwischen den Bildern und dem Text
sowie zwischen den vertikal aufeinander folgenden Bildern zu vergrößern.

2 Wählen Sie das erste Bild aus.


3 Klicken Sie gegebenenfalls im Eigenschafteninspektor auf die
Erweiterungsschaltfläche (den Pfeil in der unteren rechten Ecke), um alle
Bildeigenschaften einzublenden.
4 Geben Sie Zahlen in die Felder V-Abstand und H-Abstand ein, um den
Abstand des Bildes festzulegen.
5 Klicken Sie auf die Titelleiste des Dokumentfensters (nicht in das Innere
des Dokumentfensters), um das Fenster auszuwählen, ohne die Position
der Einfügemarke zu ändern.
6 Drücken Sie die Pfeil-nach-links-Taste, um die Einfügemarke links neben
das Bild zu setzen. Klicken Sie dann die Pfeil-nach-unten-Taste, um die
Einfügemarke um eine Zeile nach unten zu verschieben, sodass sie sich genau
links neben dem zweiten Bild der Reihe befindet. Drücken Sie dann die
Umschalt- und die Pfeil-nach-rechts-Taste, um das zweite Bild auszuwählen.

Dokumente einrichten 171


Anmerkung: Wählen Sie das Bild nicht durch Anklicken aus, da dieser Schritt später
nicht abgespielt werden kann.

7 Wählen Sie in der Verlaufspalette die Schritte aus, die dem Ändern des
Abstands der Bilder und dem Auswählen des nächsten Bildes entsprechen.
Klicken Sie auf die Schaltfläche Abspielen, um diese Schritte abzuspielen.

Der Abstand des aktuellen Bildes ändert sich und das nächste Bild wird
ausgewählt.
8 Klicken Sie so oft auf Abspielen, bis alle Bilder den richtigen Abstand haben.
Mit der Schaltfläche Schritte kopieren können Sie Schritte auch auf ein Objekt
in einem anderen Dokument anwenden“.

Schritte von einem Dokument in ein anderes kopieren


Jedes geöffnete Dokument hat eine eigene Verlaufsliste. Sie können jedoch
Schritte eines Dokuments kopieren und in ein anderes einfügen.
Anmerkung: Schritte kopieren (eine Schaltfläche in der Verlaufspalette) ist nicht zu
verwechseln mit Kopieren (im Menü Bearbeiten). Der Befehl Bearbeiten > Kopieren
eignet sich nicht zum Kopieren von Schritten, obwohl der Befehl Bearbeiten > Einfügen
zum Einfügen der Schritte dient.

Wenn Sie ein Dokument schließen, wird seine Verlaufsliste gelöscht. Wenn Sie
wissen, dass Sie die Schritte eines Dokuments, nachdem es geschlossen wird, noch
brauchen werden, kopieren Sie die Schritte mit Schritte kopieren (oder speichern
Sie sie als Befehl, siehe „Neue Befehle aus Schritten der Verlaufsliste erstellen“ auf
Seite 173), bevor Sie das Dokument schließen.
Seien Sie vorsichtig beim Kopieren von Schritten, die selbst den Befehl Kopieren
oder Einfügen enthalten:
• Verwenden Sie Schritte kopieren nicht, wenn einer der Schritte der Befehl
Kopieren ist. Solche Schritte lassen sich meist nicht problemlos einfügen.
• Wenn Ihre Schritte den Befehl Einfügen enthalten, können Sie sie nur
kopieren, wenn sie vor diesem Befehl auch den Befehl Kopieren enthalten.

172 Kapitel 5
Wenn Sie Schritte in einen Texteditor, in die Codeansicht oder in den
Codeinspektor kopieren, werden sie als JavaScript-Code angezeigt. Dies kann
nützlich sein, wenn Sie in Zukunft eigene Skripte schreiben möchten. Weitere
Informationen zur Verwendung von JavaScript in Dreamweaver finden Sie unter
„Dreamweaver erweitern: Grundlagen“ auf Seite 578.

So verwenden Sie die Schritte aus einem Dokument für ein anderes Dokument:

1 Beginnen Sie mit dem Dokument, das die gewünschten Schritte enthält.
2 Wählen Sie die Schritte in der Verlaufspalette aus.
3 Klicken Sie in der Verlaufspalette auf die Schaltfläche Schritte kopieren,
um diese Schritte zu kopieren.
4 Öffnen Sie das andere Dokument.
5 Setzen Sie die Einfügemarke an die gewünschte Stelle oder wählen Sie
ein Objekt aus, auf das die Schritte angewandt werden sollen.
6 Wählen Sie Bearbeiten > Einfügen, um die Schritte einzufügen.
Beim Einfügen in die Verlaufspalette des Dokuments werden die Schritte
abgespielt. Die Verlaufspalette zeigt die Schritte als einen einzelnen Schritt
namens „Einfügeschritte“.

Neue Befehle aus Schritten der Verlaufsliste erstellen


Sie können eine Gruppe von Schritten aus der Verlaufsliste als benannten Befehl
speichern, der dann im Menü Befehle zur Verfügung steht.
Erstellen und speichern Sie einen neuen Befehl, wenn damit zu rechnen ist,
dass Sie eine bestimmte Gruppe von Schritten irgendwann – insbesondere bei der
nächsten Dreamweaver-Sitzung – wieder benötigen werden. Gespeicherte Befehle
stehen dauerhaft zur Verfügung (solange Sie sie nicht löschen). Aufgezeichnete
Befehle werden dagegen verworfen, wenn Sie Dreamweaver beenden, und
kopierte Schrittabfolgen werden verworfen, wenn Sie etwas anderes kopieren.
Mit Befehle > Befehlsliste bearbeiten können Sie die Namen dieser im Menü
Befehle aufgelisteten Befehle bearbeiten bzw. die Befehle aus dem Menü löschen.
Das Bearbeiten und Löschen von Befehlen, die standardmäßig im Menü Befehle
vorhanden sind (die Sie also nicht selbst hinzugefügt haben) ist etwas
komplizierter (siehe „Dreamweaver-Menüs anpassen“ auf Seite 559).

So erstellen Sie einen Befehl:

1 Wählen Sie einen Schritt oder eine Gruppe von Schritten in der
Verlaufspalette aus.
2 Klicken Sie auf die Schaltfläche Als Befehl speichern oder wählen Sie im
Kontextmenü der Verlaufspalette die Option Als Befehl speichern.
3 Geben Sie einen Namen für den Befehl ein und klicken Sie auf OK.
Der Befehl wird im Menü Befehle angezeigt.

Dokumente einrichten 173


Anmerkung: Der Befehl wird im Ordner „Dreamweaver/Configuration/Commands“
als JavaScript Datei (in manchen Fällen als HTML-Datei) gespeichert.

So verwenden Sie einen gespeicherten Befehl:

1 Wählen Sie ein Objekt aus, auf das der Befehl angewandt werden soll
oder setzen Sie die Einfügemarke an die gewünschte Stelle.
2 Wählen Sie den Befehl im Menü Befehle.

So bearbeiten Sie die Namen von Befehlen im Menü Befehle:

1 Wählen Sie Befehle > Befehlsliste bearbeiten.


2 Wählen Sie den Befehl aus, für den Sie einen neuen Namen eingeben möchten.
Geben Sie einen neuen Namen ein.
3 Klicken Sie auf Schließen.

So löschen Sie einen Namen aus dem Menü Befehle:

1 Wählen Sie Befehle > Befehlsliste bearbeiten.


2 Wählen Sie einen Befehl.
3 Klicken Sie auf Löschen und anschließend auf Schließen.

Befehle aufzeichnen
In Dreamweaver können Sie einen vorübergehend benötigten Befehl zur
kurzfristigen Verwendung aufzeichnen. Die Hauptunterschiede zwischen dieser
Methode und dem Abspielen von Schritten aus der Verlaufspalette (siehe „Schritte
wiederholen“ auf Seite 169) sind folgende:
• Schritte werden aufgezeichnet, während Sie sie ausführen, sodass Sie sie nicht
in der Verlaufspalette wählen müssen, bevor Sie sie abspielen.
• Während der Aufzeichnung hindert Dreamweaver Sie daran, nicht abspielbare
Mausaktionen aufzuzeichnen (z. B. Anklicken und Auswählen eines Elements
in einem Fenster oder Ziehen eines Elements an eine andere Stelle der Seite).
• Wenn Sie während der Aufzeichnung zu einem anderen Dokument wechseln,
werden die Änderungen, die Sie in dem anderen Dokument vornehmen, nicht
aufgezeichnet. Ob gerade eine Aufzeichnung stattfindet oder nicht, erkennen
Sie an der Form des Mauszeigers.
Dreamweaver „erinnert“ sich immer nur an jeweils einen aufgezeichneten Befehl.
Sobald Sie einen neuen Befehl aufzeichnen, wird der alte gelöscht. Um einen
neuen Befehl zu speichern, ohne einen aufgezeichneten zu verlieren, speichern Sie
den Befehl aus der Verlaufspalette).
Nachdem Sie einen Befehl aufgezeichnet haben, können Sie ihn über die
Verlaufspalette speichern.

174 Kapitel 5
So zeichnen Sie eine Reihe häufig auszuführender Schritte vorübergehend auf:

1 Wählen Sie Befehle > Aufzeichnung starten oder drücken Sie


<Strg>+<Umschalttaste>+X (Windows) bzw.
<Befehlstaste>+<Umschalttaste>+X (Macintosh).
Der Mauszeiger ändert seine Form, um darauf hinzuweisen, dass eine
Aufzeichnung stattfindet.
2 Wenn Sie mit der Aufzeichnung fertig sind, wählen Sie Befehle >
Aufzeichnung stoppen oder drücken Sie <Strg>+<Umschalttaste>+X
(Windows) bzw. <Befehlstaste>+<Umschalttaste>+X (Macintosh).

So spielen Sie einen aufgezeichneten Befehl ab:

Wählen Sie Befehle > Aufgezeichneten Befehl abspielen oder drücken Sie
<Strg>+P (Windows) bzw. <Befehlstaste>+P (Macintosh).

So speichern Sie einen aufgezeichneten Befehl:

1 Wählen Sie Befehle > Aufgezeichneten Befehl abspielen, um den Befehl


abzuspielen.
Ein Schritt mit dem Namen Befehl ausführen erscheint in der Verlaufsliste.
2 Wählen Sie den Schritt Befehl ausführen und klicken Sie auf die Schaltfläche
Als Befehl speichern.
3 Geben Sie einen Namen für den Befehl ein und klicken Sie auf OK.
Der Befehl wird im Menü Befehle angezeigt.

Dokumente einrichten 175


176 Kapitel 5
6

KAPITEL 6
Seitenlayouts entwerfen
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Das Seitenlayout ist ein wichtiger Teil des Webdesigns. Unter Seitenlayout versteht
man die Art und Weise, in der Ihre Seite in einem Browser dargestellt wird,
also z. B. wo sich Menüs und Bilder auf der Seite befinden. In Macromedia
Dreamweaver stehen Ihnen mehrere Möglichkeiten zur Verfügung, um das
Layout Ihrer Webseite zu erstellen und zu kontrollieren.
Häufig wird das Seitenlayout mit HTML-Tabellen erstellt. Die Verwendung
von Tabellen kann jedoch unter Umständen recht kompliziert sein. Tabellen
wurden nämlich nicht für das Layout von Webseiten, sondern ursprünglich
zur tabellarischen Darstellung von Daten entworfen.
Um die Verwendung von Tabellen beim Seitenlayout zu vereinfachen, steht Ihnen
in Dreamweaver die Layoutansicht zur Verfügung. In der Layoutansicht können
Sie für den Entwurf Ihrer Seite Tabellen verwenden, ohne dabei mit den
Hauptschwierigkeiten konfrontiert zu werden, die in der Regel bei der
Verwendung von Tabellen auftreten. So können Sie beispielsweise schnell und
einfach Zellen (Tabellenzellen) auf Ihre Seite zeichnen und sie anschließend nach
Bedarf anpassen oder verschieben. Ihr Layout kann eine feste Breite haben oder
auf die Größe des Browserfensters erweitert werden (siehe „Layoutbreite
einstellen“ auf Seite 190).
Sie können Webseiten auch in der herkömmlichen Weise mit Tabellen entwerfen
(siehe „Tabellen zur Präsentation von Inhalten verwenden“ auf Seite 197) oder das
Layout über Ebenen erstellen, die Sie anschließend in Tabellen konvertieren (siehe
„Tabellen und Ebenen für das Layout verwenden“ auf Seite 458). Mit der
Layoutansicht in Dreamweaver lässt sich das Seitenlayout jedoch am einfachsten
festlegen.
Wenn Sie mit der Layoutansicht arbeiten möchten, müssen Sie zunächst
die Dreamweaver-Standardansicht deaktivieren.

177
So aktivieren Sie die Layoutansicht:

Wählen Sie Ansicht > Tabellenansicht > Layoutansicht oder klicken Sie in der
Objektpalette auf Layoutansicht.

Symbol Layoutzelle zeichnen

Symbol Layouttabelle zeichnen

Symbol Layoutansicht

Die Option Register für Layouttabelle anzeigen ist in der Layoutansicht


automatisch aktiviert. Wenn Sie die Tabellenregister in der Layoutansicht
deaktivieren möchten, wählen Sie Ansicht > Tabellenansicht > Register für
Layouttabelle anzeigen.
Anmerkung: Wenn Sie in Dreamweaver in der Standardansicht eine Tabelle erstellen und
dann in die Layoutansicht wechseln, enthält Ihre Tabelle eventuell leere Layoutzellen, die
gelöscht werden müssen, bevor Sie neue Zellen erstellen können.

178 Kapitel 6
Layoutzellen und Layouttabellen
Wenn Sie sich in der Layoutansicht befinden, können Sie Layoutzellen in
Ihre Seite einfügen. Mit diesen Zellen können Sie Ihr Seitenlayout gestalten.
So könnten Sie beispielsweise ganz oben auf der Seite eine Zelle zeichnen, in der
ein Menü untergebracht werden soll. Eine andere Zelle rechts auf der Seite könnte
für Untermenüs und eine Zelle daneben für Inhalt verwendet werden. Sie können
sich das Layout als Raster aus Zeilen und Spalten vorstellen.

Wenn Sie eine Layoutzelle auf Ihrer Seite erstellen, erstellt Dreamweaver
automatisch eine Layouttabelle als Container für diese Zelle. Layoutzellen müssen
sich innerhalb von Layouttabellen befinden. Zur Erstellung Ihres Seitenlayouts
können Sie mehrere Layoutzellen in einer Layouttabelle verwenden. Bei einem
komplexeren Seitenlayout können Sie ggf. auch mehrere Layouttabellen einsetzen.
Sollten Sie sich für mehrere Layouttabellen entscheiden, werden bestimmte
Bereiche Ihres Layouts isoliert und folglich unabhängig von anderen Bereichen.
Dies ist besonders dann nützlich, wenn der Inhalt einer Layoutzelle variabel ist
und die Zelle größer werden kann. Wenn eine Zelle größer wird, beeinflusst sie
umgebende Zellen, da Zellen sich nicht überlappen können. Wenn Ihr Layout
aus mehreren Layouttabellen besteht, sind alle Tabellen vollkommen unabhängig.
Sie haben auch die Möglichkeit, Layouttabellen zu verschachteln (dabei wird eine
Layouttabelle in eine bereits vorhandene Layouttabelle eingefügt). Die Zellen
in einer verschachtelten Tabelle sind nicht durch die Zeilen und Spalten der
übergeordneten Tabelle begrenzt. Siehe „Verschachtelte Layouttabellen zeichnen“
auf Seite 183.

Seitenlayouts entwerfen 179


Layoutzellen und Layouttabellen zeichnen
In der Layoutansicht können Sie Layoutzellen und Layouttabellen auf Ihrer Seite
zeichnen. Wenn Sie zuerst eine Layoutzelle erstellen, wird automatisch auch eine
Layouttabelle eingefügt, die als Container für die Layoutzelle dient. Layoutzellen
befinden sich grundsätzlich in Layouttabellen.
Anmerkung: Die Layouttabelle, die Dreamweaver automatisch erstellt, hat die Breite
des Dokumentfensters. Sie können sie vergrößern, verkleinern oder die Funktion zum
automatischen Strecken verwenden, um sie auf die erforderliche Größe einzustellen.

So zeichnen Sie eine Layoutzelle:

1 Aktivieren Sie die Layoutansicht und klicken Sie dann auf der Registerkarte
Layout der Objektpalette auf die Schaltfläche Layoutzelle zeichnen.
Der Mauszeiger nimmt daraufhin die Form eines Pluszeichens (+) an.
2 Setzen Sie den Mauszeiger an die Stelle der Seite, an der die Zelle beginnen soll,
und ziehen Sie den Mauszeiger bis zur gewünschten Position, um die
Layoutzelle zu erstellen. Sie können mehrere Layoutzellen erstellen, ohne
jeweils auf die Schaltfläche Layoutzelle zeichnen klicken zu müssen. Halten
Sie dazu einfach die <Strg>-Taste (Windows) bzw. die Befehlstaste (Macintosh)
gedrückt.
Die Zelle wird auf der Seite durch einen blauen Rahmen dargestellt. Blau ist die
Standardfarbe für Rahmen von Layoutzellen. Unter „Voreinstellungen für die
Layoutansicht festlegen“ auf Seite 194 wird beschrieben, wie Sie diese Farbe
ändern können. Die Größe der einzelnen Zellen wird in der Kopfzeile der Spalte
oberhalb der Zelle angezeigt. Weitere Informationen zur Breite finden Sie unter
„Layoutbreite einstellen“ auf Seite 190.

180 Kapitel 6
Ihr Seitenlayout beruht auf einem Raster aus Zeilen und Spalten. Die Zellen
können sich zwar über mehrere Zeilen oder Spalten erstrecken, sie können sich
jedoch auf der Seite grundsätzlich nicht überlappen. In Dreamweaver wird diese
Struktur beibehalten, da neu erstellte Zellen automatisch an anderen Zellen
ausgerichtet werden, sofern Sie eine neue Zelle in direkter Nähe einer
vorhandenen Zelle (in einem Abstand von 8 Pixeln) zeichnen. Wenn Sie Zellen
in der Nähe des Seitenrandes (in einem Abstand von 8 Pixeln) zeichnen, werden
sie automatisch am Seitenrand ausgerichtet. Sie können die Ausrichtfunktion
vorübergehend deaktivieren, indem Sie beim Zeichnen der Zelle die <Alt>-Taste
(Windows) bzw. die Wahltaste (Macintosh) gedrückt halten.

Das soeben Gesagte bedeutet nicht, dass alle Zellen die gleiche Höhe oder Breite
aufweisen müssen. Eine Spalte kann Zellen mit unterschiedlicher Breite enthalten
und eine Zeile Zellen mit unterschiedlicher Höhe.

So zeichnen Sie eine Layouttabelle:

1 Aktivieren Sie die Layoutansicht und klicken Sie dann auf der Registerkarte
Layout der Objektpalette auf die Schaltfläche Layouttabelle zeichnen.
Der Mauszeiger nimmt daraufhin die Form eines Pluszeichens (+) an.

Seitenlayouts entwerfen 181


2 Setzen Sie den Mauszeiger auf die Seite, klicken Sie und ziehen Sie dann
den Mauszeiger bis an die gewünschte Stelle, um die Layouttabelle zu erstellen.
Wenn dies die erste Layouttabelle auf Ihrer Seite ist, wird sie automatisch in der
oberen linken Ecke der Seite angeordnet.
Sie können mehrere Layouttabellen erstellen, ohne jeweils auf die Schaltfläche
Layouttabelle zeichnen klicken zu müssen. Halten Sie dazu einfach die <Strg>-
Taste (Windows) bzw. die Befehlstaste (Macintosh) gedrückt.
Die Tabelle wird auf der Seite durch einen grünen Rahmen dargestellt. Grün ist
die Standardfarbe für Rahmen von Layouttabellen. Unter „Voreinstellungen für
die Layoutansicht festlegen“ auf Seite 194 wird beschrieben, wie Sie diese Farbe
ändern können. Oben auf den gezeichneten Layouttabellen wird je ein Register
angezeigt. Über diese Register können Sie die einzelnen Layouttabellen einfach
unterscheiden und auswählen. Die Größe der einzelnen Tabellen wird in der
Kopfzeile der Spalte oberhalb der Tabelle angezeigt.

Weitere Informationen zur Breite finden Sie unter „Layoutbreite einstellen“ auf
Seite 190.
Tabellen können sich nicht überlappen. Ihr Seitenlayout beruht auf einem Raster
aus Zeilen und Spalten. Die Tabellen können sich zwar über mehrere Zeilen
oder Spalten erstrecken, sie können sich jedoch auf der Seite grundsätzlich nicht
überlappen. In Dreamweaver wird diese Struktur beibehalten, da neu erstellte
Tabellen automatisch an anderen Tabellen oder Zellen ausgerichtet werden, wenn
eine neue Tabelle in der Nähe (in einem Abstand von 8 Pixeln) einer vorhandenen
Tabelle oder Zelle gezeichnet wird. Wenn Sie Tabellen in der Nähe des
Seitenrandes (in einem Abstand von 8 Pixeln) zeichnen, werden sie automatisch
am Seitenrand ausgerichtet. Sie können die Ausrichtfunktion deaktivieren,
indem Sie beim Zeichnen der Tabelle die <Alt>-Taste (Windows) bzw. die
Wahltaste (Macintosh) gedrückt halten.
Sie können Layouttabellen in leeren Bereichen Ihrer Seite erstellen, innerhalb
einer vorhandenen Layouttabelle (Verschachteln) oder um vorhandene
Layoutzellen und Layouttabellen herum. Wenn Sie eine Layouttabelle in einem
leeren Dokument erstellen, wird sie automatisch an der oberen linken Ecke
des Dokumentfensters ausgerichtet.
Anmerkung: Enthält die Seite bereits Inhalt, kann die Layouttabelle nur unterhalb des
vorhandenen Inhalts gezeichnet werden.

So zeichnen Sie eine Layouttabelle um vorhandene Tabellen oder Zellen herum:

1 Aktivieren Sie die Layoutansicht und klicken Sie dann auf der Registerkarte
Layout der Objektpalette auf die Schaltfläche Layouttabelle zeichnen.
Der Mauszeiger nimmt daraufhin die Form eines Pluszeichens (+) an.

182 Kapitel 6
2 Klicken und ziehen Sie den Mauszeiger um vorhandene Layoutzellen oder
Layouttabellen herum. Die Layouttabelle umschließt die vorhandenen Zellen
oder Tabellen.

Verschachtelte Layouttabellen zeichnen


Sie können eine Layouttabelle in einer bereits vorhandenen Layouttabelle
zeichnen (dadurch entsteht eine verschachtelte Tabelle). Die Zellen in einer
verschachtelten Tabelle sind nicht durch die Zeilen und Spalten der
übergeordneten Tabelle begrenzt. Sie können mehrere verschachtelte Tabellen
einfügen.

So zeichnen Sie eine verschachtelte Tabelle:

1 Klicken Sie auf der Registerkarte Layout der Objektpalette auf die Schaltfläche
Layouttabelle zeichnen. Der Mauszeiger nimmt daraufhin die Form eines
Pluszeichens (+) an.
2 Setzen Sie den Mauszeiger in den grauen Bereich einer vorhandenen
Layouttabelle. Klicken und ziehen Sie dann die Maus, um die verschachtelte
Layouttabelle zu erstellen.
Eine verschachtelte Layouttabelle kann nicht größer sein als ihre übergeordnete
Tabelle.

Seitenlayouts entwerfen 183


Das Raster in Dreamweaver verwenden
Sie können das Raster in Dreamweaver aktivieren und beim Zeichnen Ihres
Layouts als Hilfsmittel verwenden. Weiterhin können Sie festlegen, dass das
Layout automatisch am Raster ausgerichtet wird. Über Rastereinstellungen
können Sie das Raster ändern oder das Ausrichtverhalten steuern.

So blenden Sie das Raster im Dokumentfenster ein oder aus:

Wählen Sie Ansicht > Raster > Raster anzeigen oder wählen Sie im Dropdown-
Menü der Optionen in der Symbolleiste den Befehl Raster.

So ändern Sie die Rastereinstellungen:

1 Klicken Sie auf Ansicht > Raster > Raster bearbeiten, um das Dialogfeld
Rastereinstellungen zu öffnen.
2 Führen Sie einen der folgenden Schritte aus:
• Klicken Sie auf den Pfeil neben dem Farbfeld und wählen Sie eine Farbe aus
der Palette aus oder geben Sie in die Zelle den Hexadezimalcode der Farbe ein.
Hierdurch wird die Farbe der Rasterlinien festgelegt.
• Wählen Sie Raster anzeigen, um das Raster im Dokumentfenster
einzublenden.
• Wählen Sie Einrasten an, um die Ausrichtfunktion zu aktivieren.
• Geben Sie den gewünschten Abstand ein und wählen Sie im Popupmenü die
Maßeinheit Pixel, Zoll oder Zentimeter. Hierdurch wird der Abstand zwischen
den Rasterlinien festgelegt.
• Wählen Sie Linien oder Punkte für die Rasterlinien.
3 Klicken Sie auf Anwenden, um die Änderungen anzuzeigen. Klicken Sie dann
auf OK, um das Dialogfeld zu schließen.

Inhalt in Tabellenzellen einfügen


In der Layoutansicht können Sie Text, Bilder und anderes Material in
Layoutzellen einfügen, genau wie in der normalen Anzeige in Dreamweaver
(Standardansicht). Klicken Sie in die Zelle, in die Sie Inhalt einfügen möchten.
Geben Sie dann Text ein oder fügen Sie andere Dateien ein.
Da Inhalt nur in Layoutzellen eingefügt werden kann, müssen Sie zunächst die
Layoutzellen erstellen (siehe „Layoutzellen und Layouttabellen zeichnen“ auf
Seite 180). In die grauen Bereiche auf der Seite kann kein Inhalt eingefügt
werden, es sei denn, Sie erstellen hier zunächst eine Layoutzelle.

184 Kapitel 6
Wenn das hinzugefügte Material größer als die Layoutzelle ist, wird die Zelle
automatisch vergrößert. Die Vergrößerung der Zelle kann auch Auswirkungen
auf umgebende Zellen haben und die Spalte, in der sich die Zelle befindet, wird
ebenfalls vergrößert.

So fügen Sie Text in eine Zelle ein:

Klicken Sie in die Layoutzelle, in die Sie Text einfügen möchten, und führen Sie
dann einen der folgenden Schritte aus:
• Geben Sie Text in die Zelle ein. Die Zelle wird automatisch erweitert,
während Sie den Text eingeben.
• Fügen Sie Text ein, den Sie aus einem anderen Dokument kopiert haben.
Verwenden Sie dazu den Befehl Einfügen. Weitere Informationen finden
Sie unter „Text und Objekte einfügen“ auf Seite 252.

So fügen Sie ein Bild in eine Zelle ein:

1 Klicken Sie in die Layoutzelle, in die Sie das Bild einfügen möchten.
2 Klicken Sie in der Objektpalette auf die Schaltfläche Bild einfügen, wählen Sie
Einfügen > Bild oder ziehen Sie die Schaltfläche Bild einfügen aus der
Objektpalette auf die Seite.
3 Wählen Sie im Dialogfeld Bildquelle auswählen eine Bilddatei aus.
Weitere Informationen finden Sie unter „Bildeigenschaften einstellen“ auf
Seite 291.

Automatische Zellhöhen löschen


Nachdem Sie Inhalt in Ihre Zellen eingefügt haben, können Sie die Zellhöhen
löschen, um die Einstellung auf diese Weise zu entfernen. Dreamweaver erstellt
Zellen automatisch mit einer bestimmten Höhe. Nachdem Sie der Zelle Inhalt
hinzugefügt haben, ist die angegebene Höhe jedoch nicht mehr erforderlich.

Seitenlayouts entwerfen 185


Führen Sie einen der folgenden Schritte aus, um Zellhöhen zu löschen:

• Wählen Sie im Menü der Kopfzeile für Spalten den Befehl Zellhöhen löschen.
Dadurch werden die Höhen gelöscht und einige Zeilen evtl. verkleinert.

• Wählen Sie eine Layouttabelle aus (klicken Sie dazu auf das Register oder
den Rand der Tabelle) und klicken Sie dann im Eigenschafteninspektor auf die
Schaltfläche Zeilenhöhen löschen.

Layoutzellen und Layouttabellen


verschieben, vergrößern und verkleinern
Alle Zellen und Tabellen in Ihrem Layout können verschoben, vergrößert oder
verkleinert werden, sodass Sie Ihr Seitenlayout schnell und einfach modifizieren
können. Wenn Sie Zellen und Tabellen verschieben oder ihre Größe ändern,
können Sie das Raster in Dreamweaver als Hilfsmittel verwenden. Siehe „Das
Raster in Dreamweaver verwenden“ auf Seite 184.

So vergrößern oder verkleinern Sie eine Zelle:

1 Klicken Sie auf den Rand der Zelle oder halten Sie die <Strg>-Taste (Windows)
bzw. die Befehlstaste (Macintosh) gedrückt und klicken Sie dann auf eine
beliebige Stelle in der Zelle.
Daraufhin erscheinen Auswahlgriffe um die Zelle herum.
2 Ziehen Sie die Auswahlgriffe, um die Zelle entsprechend zu verkleinern oder
zu vergrößern.

186 Kapitel 6
Die Zelle wird automatisch an vorhandenen Zellen ausgerichtet (sofern sie sich in
einem Abstand von 8 Pixeln zum Rahmen dieser Zellen befindet). Wenn Sie die
Größe von Zellen ändern, ist zu beachten, dass Zellen sich nicht überlappen und
nicht über den Rahmen der Layouttabelle hinausgehen können. Eine Layoutzelle
ist immer mindestens so groß wie ihr Inhalt.

So verschieben Sie eine Zelle:

1 Klicken Sie auf den Rand der Zelle.


2 Ziehen Sie die Zelle an die gewünschte Stelle auf der Seite oder verschieben Sie
sie mithilfe der Pfeiltasten. Mit den Pfeiltasten wird die Tabelle in 1-Pixel-
Schritten verschoben. Wenn Sie dabei die Umschalttaste gedrückt halten,
wird sie in 10-Pixel-Schritten verschoben.

So vergrößern oder verkleinern Sie eine Tabelle:

1 Klicken Sie auf das Register der Tabelle.


Daraufhin erscheinen Auswahlgriffe um die Layouttabelle herum.
2 Ziehen Sie die Auswahlgriffe, um die Tabelle entsprechend zu verkleinern oder
zu vergrößern.
Die Tabelle wird automatisch an vorhandenen Zellen und Tabellen ausgerichtet
(sofern sie sich in einem Abstand von 8 Pixeln zu diesen Zellen befindet). Wenn
Sie eine Layouttabelle verkleinern, ist darauf zu achten, dass sie nicht kleiner als
die Rahmen der enthaltenen Zellen sein kann. Außerdem kann sie umgebende
Tabellen oder Zellen nicht überlappen.

So verschieben Sie eine Tabelle:

1 Klicken Sie auf das Register der Tabelle.


2 Ziehen Sie die Tabelle an die gewünschte Stelle auf der Seite oder verschieben
Sie sie mithilfe der Pfeiltasten. Mit den Pfeiltasten wird die Tabelle in 1-Pixel-
Schritten verschoben. Wenn Sie dabei die Umschalttaste gedrückt halten, wird
sie in 10-Pixel-Schritten verschoben.

Layoutzellen und -tabellen formatieren


Sie können das Erscheinungsbild von Layoutzellen und Layouttabellen mit dem
Eigenschafteninspektor ändern.

Seitenlayouts entwerfen 187


Layoutzellen formatieren
Im Eigenschafteninspektor können Sie die Ausrichtung von Inhalt, Breite und
Höhe und Hintergrundfarben definieren.

So formatieren Sie Layoutzellen über den Eigenschafteninspektor:

1 Klicken Sie auf den Rand der Zelle oder halten Sie die <Strg>-Taste (Windows)
bzw. die Befehlstaste (Macintosh) gedrückt und klicken Sie dann auf eine
beliebige Stelle in der Zelle.
2 Wählen Sie Fenster > Eigenschaften, um den Eigenschafteninspektor
zu öffnen.
3 Legen Sie die folgenden Optionen für das Erscheinungsbild fest:
• Um die Breite zu ändern, wählen Sie Fest und geben Sie die gewünschte Breite
in Pixeln in das Feld ein. Sie können auch Automatisch strecken wählen
(siehe „Layoutbreite einstellen“ auf Seite 190).
• Um die Höhe zu ändern, geben Sie den gewünschten Wert in Pixeln in das
entspechende Textfeld ein.
• Um eine Hintergrundfarbe für die Layoutzelle festzulegen, wählen Sie eine
Farbe aus dem Dropdown-Farbfeld neben HgF oder geben Sie den
Hexadezimalwert der gewünschten Farbe in das Textfeld ein.
• Um die horizontale Ausrichtung festzulegen, wählen Sie eine Option aus
dem Popupmenü Horiz aus. Der Inhalt der Layoutzelle kann mit einer der
folgenden Optionen ausgerichtet werden: Links, Zentrieren, Rechts und
Standard.
• Um die vertikale Ausrichtung festzulegen, wählen Sie eine Option aus dem
Popupmenü Vert aus. Der Inhalt der Layoutzelle kann mit einer der folgenden
Optionen ausgerichtet werden: Oben, Mitte, Unten, Grundlinie oder
Standard.
• Markieren Sie das Kontrollkästchen Kein Umbruch, um zu verhindern,
dass Wörter umgebrochen werden. Wenn diese Option markiert ist, wird die
Layoutzelle so verbreitert, dass der gesamte Inhalt Platz findet. Dabei wird
der Inhalt nicht auf eine neue Zeile umgebrochen.

188 Kapitel 6
Layouttabellen formatieren
Im Eigenschafteninspektor können Sie Breite und Höhe, Auffüllung, Abstand
und andere Optionen festlegen.

So formatieren Sie eine Layouttabelle:

1 Klicken Sie auf das Register oder auf den Rand der Tabelle.
2 Wählen Sie Fenster > Eigenschaften, um den Eigenschafteninspektor
zu öffnen.
3 Legen Sie die folgenden Optionen für das Erscheinungsbild fest:
• Um die Breite zu ändern, wählen Sie Fest und geben Sie die gewünschte
Breite in Pixeln in das Feld ein. Sie können auch Automatisch strecken wählen
(siehe „Layoutbreite einstellen“ auf Seite 190).
• Um die Höhe zu ändern, geben Sie den gewünschten Wert in Pixeln im
Textfeld ein.
• Um die Zellauffüllung festzulegen, geben Sie die Anzahl der Pixel im Feld
Zellauffüllung ein. Die Zellauffüllung definiert den Abstand zwischen dem
Inhalt einer Layoutzelle und dem Zellrand (oder der Zellwand). Wenn
Sie für diese Option einen höheren Wert als 0 wählen, gilt der festgelegte
Abstand für alle Layoutzellen in der ausgewählten Layouttabelle. Werden im
Kopfzeilenbereich der Spalte zwei Zahlen angezeigt, verwenden Sie Option
zur Anpassung der Spaltenbreiten.
• Um den Zellenabstand festzulegen, geben Sie die Anzahl der Pixel im Feld
Zellenabstand ein. Der Zellenabstand definiert den Abstand zwischen den
einzelnen Layoutzellen. Wenn Sie für diese Option einen höheren Wert als 0
wählen, gilt der festgelegte Abstand für alle Layoutzellen in der ausgewählten
Layouttabelle. Werden im Kopfzeilenbereich der Spalte zwei Zahlen angezeigt,
verwenden Sie Option zur Anpassung der Spaltenbreiten.
• Um die Höheneinstellung aller Zellen in der ausgewählten Layouttabelle
zu löschen, klicken Sie auf die Schaltfläche zum Löschen der Höhenattribute.
Wenn die Tabelle keine Elemente enthält, wird sie auf Minimalgröße reduziert.

Seitenlayouts entwerfen 189


• Wenn Ihr Layout Zellen mit fester Breite enthält, klicken Sie auf die
Schaltfläche zur Anpassung der Spaltenbreiten. Dadurch wird die HTML-
Breite der einzelnen Zellen automatisch so eingestellt, dass sie dem jeweiligen
Zellinhalt entspricht. Wenn Sie die Breite beispielsweise auf 200 Pixel
eingestellt haben und dann Inhalt hinzufügen, der die Zelle auf 250 Pixel
verbreitert, werden die beiden folgenden Zahlen im Kopfzeilenbereich der
Tabelle angezeigt: 250 in Anführungszeichen und 200 in Klammern. Wenn Sie
auf die Schaltfläche zur Anpassung der Spaltenbreiten klicken, wird der Wert
200 Pixel entfernt und nur der Wert 250 beibehalten.
• Um Platzhalterbilder (transparente Bilder, die als Abstandhalter im Layout
eingesetzt werden) aus der Layouttabelle zu entfernen, klicken Sie auf die
Schaltfläche Alle Platzhalter entfernen. (Weitere Informationen finden Sie
unter „Platzhalterbilder verwenden“ auf Seite 193.)
• Wenn die ausgewählte Layouttabelle in einer anderen Layouttabelle
verschachtelt ist, klicken Sie auf Verschachtelung entfernen, um die
verschachtelte Layouttabelle zu entfernen, ohne dabei den Inhalt zu verlieren.
Daraufhin wird die Layouttabelle entfernt und die Layoutzellen mit Inhalt sind
nun Teil der übergeordneten Tabelle.

Layoutbreite einstellen
In der Layoutansicht können Sie mit zwei verschiedenen Breiten arbeiten:
der festen Breite und der Breite durch automatisches Strecken. Die Breite wird
im Kopfzeilenbereich oberhalb der einzelnen Spalten angezeigt. Bei der festen
Breite handelt es sich um einen bestimmten numerischen Wert, wie z. B.
300 Pixel. Diese Breite wird als Zahl angezeigt. Beim automatischen Strecken
wird die Breite automatisch je nach Fenstergröße eingestellt und als Wellenlinie
angezeigt. Wenn Sie die Funktion zum automatischen Strecken verwenden, füllt
das Layout grundsätzlich das ganze Browserfenster aus, unabhängig davon, auf
welche Größe das Fenster vom Viewer eingestellt wurde. Obwohl die feste Breite
die Standardeinstellung ist. werden in der Regel beide Breiten im Layout
kombiniert. Die angegebenen Einstellungen gelten für alle Zellen oder Tabellen
in der entsprechenden Spalte. Es kann nur eine Spalte im Layout automatisch
gestreckt werden.

190 Kapitel 6
Angenommen, Ihr Layout sieht eine Menüleiste links auf der Seite vor, den Titel
oben auf der Seite und den Bereich mit dem Hauptinhalt rechts. In diesem Fall
können Sie die linke Spalte auf eine feste Breite einstellen und die automatische
Streckfunktion für den Bereich mit dem Hauptinhalt verwenden.

Seitenlayouts entwerfen 191


Führen Sie einen der folgenden Schritte aus, um die automatische Streckfunktion
einzustellen:

• Zeigen Sie den oberen Bereich der Spalte an, für die Sie die automatische
Streckfunktion verwenden möchten. Wählen Sie dann im Menü in der
Spaltenkopfzeile den Befehl zum automatischen Strecken der Spalte.
Nur eine Spalte kann automatisch gestreckt werden.

• Wählen Sie die Spalte aus und klicken Sie im Eigenschafteninspektor


auf Automatisch strecken.
Wenn Sie die automatische Streckfunktion für eine Spalte festlegen, fügt
Dreamweaver zur Bewahrung des Layouts Platzhalterbilder in die Spalten
mit fester Breite ein. Ein Platzhalterbild ist ein transparentes Bild, das nicht
im Browserfenster angezeigt wird, sondern als Hilfsmittel zur Bewahrung von
Abstand dient. Weitere Informationen finden Sie unter „Platzhalterbilder
verwenden“ auf Seite 193.

Führen Sie einen der folgenden Schritte aus, um die feste Breite festzulegen:

• Zeigen Sie den oberen Bereich der Spalte an, für die Sie eine feste Breite
festlegen möchten. Wählen Sie dann im Menü in der Spaltenkopfzeile den
Befehl zur Einstellung einer festen Breite für Spalten.
Mit dem Befehl zur Einstellung einer festen Breite für Spalten wird die Breite
der Spalte automatisch so eingestellt, dass sie der Breite des Inhalts entspricht.
• Klicken Sie im Eigenschafteninspektor auf Fest und geben Sie einen
numerischen Wert ein.
Wenn Sie einen numerischen Wert eingeben, der kleiner ist als die Breite des
Inhalts, stellt Dreamweaver die Breite automatisch auf den korrekten Pixelwert
ein.
In manchen Fällen werden im Menü in der Spaltenkopfzeile zwei Zahlen
angezeigt: die tatsächliche Breite der Spalte und die Breite, die im HTML-Code
steht. Dies kann verschiedene Gründe haben. Beispielsweise werden zwei Zahlen
angezeigt, wenn Sie Inhalt einfügen, der breiter ist als die gezeichnete oder
angegebene Breite. Es empfiehlt sich, die Breiten anzugleichen, damit nur eine
Zahl angezeigt wird.

So gleichen Sie die Breite an (damit nur die tatsächliche Breite angegeben wird):

Wählen Sie im Menü in der Spaltenkopfzeile den Befehl Zellenbreite angleichen.

192 Kapitel 6
Platzhalterbilder verwenden
Ein Platzhalterbild ist ein transparentes Bild, das nicht im Browserfenster
angezeigt wird, sondern in Tabellen, die automatisch gestreckt werden, zur
Bewahrung des Abstands dient. Das Platzhalterbild bewirkt, dass die festgelegte
Breite für alle Tabellen und Zellen auf der Seite eingehalten wird. Wenn Sie die
automatische Streckfunktion in Tabellen nutzen, jedoch keine Platzhalterbilder
verwenden, werden Spalten ohne Inhalt eventuell größenmäßig geändert oder
sogar ganz ausgeblendet.
Sie können Platzhalterbilder in die einzelnen Spalten einfügen und daraus
entfernen oder festlegen, dass Dreamweaver sie automatisch hinzufügt,
wenn eine Spalte mit der automatischen Streckfunktion erstellt wird. Spalten,
die Platzhalterbilder enthalten, haben eine doppelte Leiste entlang des oberen
Spaltenrandes.
Wenn Sie ein Platzhalterbild in eine Spalte einfügen oder die automatische
Streckfunktion für eine Spalte verwenden, werden Sie in einem Dialogfeld gefragt,
wie Sie die Datei mit dem Platzhalterbild einrichten möchten. Dieses Dialogfeld
wird nicht angezeigt, wenn Sie in den Voreinstellungen von Dreamweaver bereits
ein Platzhalterbild für die Site festgelegt haben. Siehe „Voreinstellungen für die
Layoutansicht festlegen“ auf Seite 194.

So richten Sie ein Platzhalterbild ein:

1 Legen Sie die automatische Streckfunktion für eine Spalte fest oder wählen
Sie im Menü in der Spaltenkopfzeile den Befehl zum Hinzufügen eines
Platzhalters.

2 Legen Sie im angezeigten Dialogfeld die folgenden Optionen fest:


• Wenn Sie die Option markieren, die besagt, dass Sie Dreamweaver den
Speicherort für die Platzhalterdatei mitteilen, und dann auf OK klicken,
wird ein anderes Dialogfeld angezeigt, in dem Sie das Verzeichnis in Ihrer Site
wählen können, wo die Datei mit dem Platzhalterbild gespeichert werden soll,
z. B. in einem Bildordner. Es wird empfohlen, diese Option zu wählen.
• Wenn Sie bereits eine Datei mit einem Platzhalterbild für Ihre Site erstellt
haben, wählen Sie die Option, um zu einer vorhandenen Datei mit dem
Platzhalterbild zu gelangen. Daraufhin wird ein anderes Dialogfeld angezeigt,
in dem Sie Ihr Platzhalterbild auswählen können. Das Platzhalterbild sollte
ein transparentes GIF-Bild von 1 Pixel x 1 Pixel sein.

Seitenlayouts entwerfen 193


• Wenn Sie die Option auswählen, mit der Platzhalterbilder für Spalten,
die automatisch gestreckt werden, deaktiviert werden, werden Sie in einem
Dialogfeld darauf hingewiesen, dass die anderen Spalten in Ihrem Layout
eventuell auf eine minimale Breite reduziert werden. Wenn Sie keine
Platzhalterbilder verwenden, entspricht die Breite der Spalten dem jeweiligen
Inhalt. Spalten ohne Inhalt werden auf die Breite „Null“ reduziert.
Platzhalterbilder tragen also dazu bei, dass die Struktur Ihres Layouts wie
ursprünglich vorgesehen beibehalten wird.
Sie können Platzhalterbilder in bestimmte Spalten einfügen bzw. daraus entfernen
oder alle Platzhalterbilder aus der Seite entfernen.

So fügen Sie ein Platzhalterbild in eine Spalte ein:

Wählen Sie im Menü in der Spaltenkopfzeile den Befehl Platzhalterbild


hinzufügen. Das Platzhalterbild wird in die Spalte eingefügt. Das Platzhalterbild
selbst ist zwar nicht sichtbar, doch die Spalte kann sich evtl. etwas verschieben und
eine doppelte Leiste wird oberhalb der Spalte angezeigt.

So entfernen Sie ein Platzhalterbild aus einer Spalte:

Wählen Sie im Menü in der Spaltenkopfzeile den Befehl Platzhalterbild


entfernen. Das Platzhalterbild wird entfernt und die Spalte kann sich evtl.
etwas verschieben.

So entfernen Sie alle Platzhalterbilder aus der Seite:

Wählen Sie im Menü in der Spaltenkopfzeile den Befehl Alle Platzhalterbilder


entfernen oder klicken Sie im Eigenschafteninspektor der Layouttabelle auf die
Schaltfläche Alle Platzhalter entfernen. Je nach Inhalt kann sich das gesamte
Layout geringfügig oder auch stark verschieben. Spalten ohne Inhalt können ganz
und gar aus der Anzeige ausgeblendet werden.

Voreinstellungen für die Layoutansicht


festlegen
In der Kategorie Layoutansicht in den Voreinstellungen können Sie Dateien
und Verzeichnisse der Platzhalterbilder festlegen oder ändern, Farben definieren,
mit denen Tabellen und Zellen in der Layoutansicht gezeichnet werden,
und weitere Optionen einstellen.

So öffnen Sie die Voreinstellungen für die Layoutansicht:

Wählen Sie Bearbeiten > Voreinstellungen und dann die Kategorie


Layoutansicht.

194 Kapitel 6
Platzhalter automatisch einfügen definiert, ob Dreamweaver automatisch
Platzhalterbilder einfügt, wenn Sie für eine Tabelle die automatische
Streckfunktion festlegen.
Platzhalterbild legt die Datei mit dem Platzhalterbild für Ihre Sites fest. Wählen
Sie eine Site aus dem Dropdown-Menü aus und erstellen Sie dann ein neues
Platzhalterbild oder suchen Sie ein vorhandenes Platzhalterbild in dieser Site.
Zellrahmen definiert die Farbe, mit der der Zellrahmen gezeichnet wird.
Zellenhervorhebung definiert die Farbe, mit der die Zelle hervorgehoben wird,
wenn Sie sie auswählen oder mit dem Mauszeiger darauf zeigen.
Tabellenrahmen definiert die Farbe, mit der der Tabellenrahmen gezeichnet wird.
Tabellenhintergrund definiert die Hintergrundfarbe des Dokumentfensters.

Seitenlayouts entwerfen 195


196 Kapitel 6
7

KAPITEL 7
Tabellen zur Präsentation von Inhalten
verwenden
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Tabellen sind ideal, um Daten und Bilder in übersichtlicher Form auf HTML-
Seiten zu präsentieren. Mit Tabellen können Sie horizontale und vertikale
Strukturen auf Ihren Webseiten anlegen.
Tabellen bestehen aus den folgenden drei Grundkomponenten:
• Zeilen (horizontaler Abstand)
• Spalten (vertikaler Abstand)
• Zellen (das Feld, das am Schnittpunkt von Zeilen und Spalten entsteht)

197
Mit Tabellen können Sie Daten tabellarisch anordnen, Spalten auf einer Seite
einrichten sowie das Layout von Text und Grafiken auf einer Webseite festlegen.
Nachdem Sie eine Tabelle erstellt haben, können Sie schnell und einfach
Erscheinungsbild und Struktur Ihrer HTML-Tabellen modifizieren. So können
Sie Inhalt hinzufügen, Zeilen und Spalten einfügen, löschen, teilen und
verbinden, die Eigenschaften von Tabellen, Zeilen oder Zellen modifizieren
und dabei Farbe und Ausrichtung definieren und natürlich auch Zellen kopieren
und einfügen.
Anmerkung: Für den Entwurf von Seitenlayouts sollten Sie die Layoutansicht verwenden
(siehe „Seitenlayouts entwerfen“ auf Seite 177. ). In der Layoutansicht können Sie ganz
leicht Webseiten mit Tabellen entwerfen. Fügen Sie tabellarische Daten in Dreamweaver in
Form von Tabellen auf Ihren HTML-Seiten ein.

Tabellen einfügen
Neue Tabellen werden über die Objektpalette bzw. das Menü Einfügen erstellt.

So fügen Sie eine Tabelle ein:

1 Führen Sie einen der folgenden Schritte aus:


• Setzen Sie den Einfügepunkt an die Stelle des Dokumentfensters, an der Sie die
Tabelle einfügen möchten. Klicken Sie dann auf der Registerkarte Allgemein
der Objektpalette auf die Schaltfläche Tabelle einfügen oder wählen Sie
Einfügen > Tabelle.
• Ziehen Sie die Schaltfläche Tabelle aus der Objektpalette an die gewünschte
Stelle auf der Seite.
Das Dialogfeld Tabelle einfügen wird eingeblendet.
2 Übernehmen Sie die vorgegebenen Werte bzw. geben Sie neue Werte ein.
Anmerkung: Im Dialogfeld Tabelle einfügen werden die Einstellungen angezeigt, die
Sie für die letzte Tabelle festgelegt haben.

• Geben Sie im Feld Zeilen die Anzahl der Tabellenzeilen an.


• Geben Sie im Feld Spalten die Anzahl der Tabellenspalten an.

198 Kapitel 7
• Definieren Sie im Feld Zellauffüllung den Abstand in Pixeln zwischen
Zellinhalt und Zellrand (oder Zellwand). Der Standardwert ist 1 Pixel.
Geben Sie 0 ein, wenn die Zellen nicht aufgefüllt werden sollen.
• Geben Sie im Feld Zellenabstand die Anzahl der Pixel zwischen den einzelnen
Tabellenzellen an. Der Standardwert ist 2 Pixel. Geben Sie 0 ein, wenn kein
Zellenabstand eingefügt werden soll.
• Geben Sie im Feld Breite die Breite der Tabelle in Pixeln oder als Prozentsatz
des Browserfensters an.
• Definieren Sie im Feld Rahmen die Breite des Tabellenrahmens in Pixeln.
Geben Sie 0 ein, wenn kein Rahmen angezeigt werden soll.
3 Klicken Sie auf OK, um die Tabelle zu erstellen.
Wenn Sie eine Tabelle einfügen, aber keine dieser Optionen vorab spezifizieren
möchten, deaktivieren Sie unter den allgemeinen Voreinstellungen die Option
Beim Einfügen von Objekten Dialog anzeigen. Siehe „Voreinstellungen wählen“
auf Seite 92.

Tabellenzellen mit Inhalt füllen


Sie können Text und Bilder in die Tabellenzellen einfügen.

So fügen Sie Text in eine Tabelle ein:

1 Klicken Sie in die Zelle, in die Sie Text einfügen möchten, und führen Sie dann
einen der folgenden Schritte aus:
• Geben Sie Text in die Tabelle ein. Dabei werden die Tabellenzellen automatisch
erweitert.
• Fügen Sie Text ein, den Sie aus einem anderen Dokument kopiert haben.
Siehe „Text und Objekte einfügen“ auf Seite 252.
2 Drücken Sie die Tabulatortaste, um zur nächsten Zelle zu springen, bzw.
Umschalt+Tabulatortaste, um zur vorherigen Zelle zu springen. Wenn Sie
sich in der letzten Zelle der Tabelle befinden und die Tabulatortaste drücken,
wird automatisch eine weitere Zeile hinzugefügt.
Sie können auch die Pfeiltasten verwenden, um in andere Zellen zu gelangen.

Tabellen zur Präsentation von Inhalten verwenden 199


So fügen Sie ein Bild in eine Tabelle ein:

1 Klicken Sie in die Zelle, in die Sie ein Bild einfügen möchten.
2 Klicken Sie auf der Registerkarte Allgemein der Objektpalette auf die
Schaltfläche Bild einfügen oder wählen Sie Einfügen > Bild.
3 Wählen Sie im Dialogfeld Bildquelle auswählen eine Bilddatei aus.
Unter „Bildeigenschaften einstellen“ auf Seite 291 wird beschrieben, wie Sie
Eigenschaften für Bilder definieren.

Tabellendaten importieren
Daten, die in einer anderen Anwendung (wie z. B. Microsoft Excel) erstellt
und in einem Format mit Trennzeichen (Tabulatoren, Kommata, Doppelpunkte,
Semikola oder andere) gespeichert wurden, können in Dreamweaver importiert
und als Tabellen formatiert werden.

So importieren Sie Tabellendaten:

1 Führen Sie einen der folgenden Schritte aus:


• Wählen Sie Datei > Importieren > Tabellendaten importieren.
• Wählen Sie Einfügen > Tabellendaten.
Daraufhin wird entweder das Dialogfeld Tabellendaten importieren oder
Tabellendaten einfügen angezeigt. Abgesehen von ihren Titeln sind diese
Dialogfelder identisch.

2 Geben Sie den Namen der zu importierenden Datei in das Feld Datendatei
ein.

200 Kapitel 7
3 Wählen Sie im Popup-Menü Trennzeichen das Trennzeichenformat, das dem
Format des zu importierenden Dokuments entspricht.
Wenn Sie Anderes wählen, wird rechts neben dem Popup-Menü ein Feld
angezeigt. Geben Sie das Trennzeichen ein, das für die Tabellendaten verwendet
wurde.
Anmerkung: Wenn Sie das Trennzeichen, das beim Speichern der Datei verwendet
wurde, nicht auswählen oder angeben, wird die Datei nicht richtig importiert und die
Daten können nicht korrekt als Tabelle formatiert werden. Es wird keine Fehler- oder
Warnmeldung angezeigt, um Sie auf dieses Problem aufmerksam zu machen.

4 Wählen Sie für Tabellenbreite eine der folgenden Optionen:


• Wählen Sie An Daten anpassen, wenn die erstellte Tabelle so angepasst werden
soll, dass Platz für die jeweils längste Textzeichenfolge in einer Spalte
vorhanden ist.
• Wählen Sie Set, wenn Sie die Tabellenbreite als Prozentwert des
Browserfensters oder als bestimmte Pixelanzahl festlegen möchten.
5 Wählen Sie Formatierungsoptionen für die Tabelle aus:
• Definieren Sie im Feld Zellauffüllung den Abstand in Pixeln zwischen
Zellinhalt und Zellrand (oder Zellwand).
• Geben Sie im Feld Zellenabstand die Anzahl der Pixel zwischen den einzelnen
Tabellenzellen an.
• Wählen Sie im Feld Format der Kopfzeile eine der folgenden vier
Formatierungsoptionen aus: Keine Formatierung, Fett, Kursiv oder Fett
und Kursiv.
• Definieren Sie im Feld Rahmen die Breite des Tabellenrahmens in Pixeln.
Geben Sie 0 ein, wenn kein Rahmen angezeigt werden soll.
6 Klicken Sie auf OK.

Tabellenelemente auswählen
Sie können in einem einzigen Arbeitsschritt eine ganze Tabelle, Zeile, Spalte oder
einen zusammenhängenden Zellbereich der Tabelle auswählen. Wenn eine Tabelle
oder einzelne Zellen ausgewählt sind, können Sie Folgendes tun:
• Sie können das Erscheinungsbild der ausgewählten Zellen oder des darin
enthaltenen Textes modifizieren. Siehe „Tabellen und Zellen formatieren“ auf
Seite 203.
• Sie können aneinander grenzende Zellen kopieren und einfügen. Siehe
„Zellen kopieren und einfügen“ auf Seite 213.
Sie können auch mehrere nicht aneinander grenzende Zellen in einer Tabelle
auswählen und ihre Eigenschaften modifizieren. Nicht aneinander grenzende
ausgewählte Zellen können jedoch nicht kopiert und eingefügt werden.

Tabellen zur Präsentation von Inhalten verwenden 201


So wählen Sie die ganze Tabelle aus (zwei Methoden):

• Klicken Sie auf die obere linke Ecke der Tabelle oder klicken Sie auf eine
beliebige Stelle an der rechten oder der unteren Kante.
• Klicken Sie einmal auf die Tabelle und wählen Sie Modifizieren > Tabelle >
Tabelle auswählen.
• Klicken Sie einmal auf die Tabelle und wählen Sie Bearbeiten > Alles
auswählen.
• Setzen Sie die Einfügemarke an eine beliebige Stelle in der Tabelle und wählen
Sie unten links im Dokumentfenster das Tag <table> aus.
Wenn die Tabelle ausgewählt ist, erscheinen an ihren Seiten Auswahlgriffe.

So wählen Sie Zeilen oder Spalten aus:

• Setzen Sie den Einfügepunkt an den linken Rand einer Zeile oder ganz oben
in eine Spalte. Wenn der Auswahlpfeil angezeigt wird, klicken Sie auf die
Maustaste.

• Klicken Sie in eine Zelle und ziehen Sie den Cursor zur Seite oder nach unten,
um mehrere Zeilen oder Spalten auszuwählen.

So wählen Sie eine oder mehrere Zellen aus (zwei Methoden):

• Klicken Sie in eine Zelle und ziehen Sie den Cursor zur Seite oder nach unten
zu einer anderen Zelle.
• Klicken Sie in eine Zelle, halten Sie die Umschalttaste gedrückt und klicken Sie
in eine andere Zelle. Dadurch werden alle Zellen innerhalb des rechteckigen
Bereichs ausgewählt.

202 Kapitel 7
So wählen Sie nicht aneinander grenzende Zellen aus (zwei Methoden):

• Halten Sie die Strg-Taste (Windows) bzw. die Befehlstaste (Macintosh)


gedrückt und klicken Sie in die Tabelle, um der Auswahl weitere Zellen,
Zeilen oder Spalten hinzuzufügen.
• Wählen Sie mehrere Zellen in der Tabelle aus. Halten Sie die Strg-Taste
(Windows) bzw. die Befehlstaste (Macintosh) gedrückt und klicken Sie auf die
jeweiligen Zellen, Zeilen oder Spalten, um sie aus der Auswahl zu entfernen.

Tabellen und Zellen formatieren


Sie können das Erscheinungsbild einer Tabelle ändern, indem Sie Eigenschaften
für die Tabelle und die Tabellenzellen definieren oder indem Sie ein vordefiniertes
Layout auf die Tabelle anwenden. Siehe „Tabelleneigenschaften definieren“ auf
Seite 204, „Eigenschaften für Spalten, Zeilen und Zellen definieren“ auf Seite 206
und „Tabellen mit einem vordefinierten Layout formatieren“ auf Seite 207.
Um Text in Tabellen zu formatieren, können Sie entweder Text auswählen und
anschließend formatieren oder Stile anwenden. Siehe „Text einfügen und
formatieren“ auf Seite 251“.

Tabellen-Tags
Wenn Sie Tabellen im Dokumentfenster formatieren, können Sie Eigenschaften
definieren, die entweder für die ganze Tabelle oder nur für ausgewählte Zeilen,
Spalten oder Zellen gelten. Sie können auch für individuelle Tabellenzellen
andere Eigenschaften definieren als für die ganze Tabelle (beispielsweise
Hintergrundfarbe oder Ausrichtung). Dafür ist es nützlich zu wissen, wie
Dreamweaver HTML-Quellcode interpretiert.
Wenn Sie in der Tabelle eine Eigenschaft mehrmals definieren, wird sie
folgendermaßen interpretiert: Die Zellformatierung, die zum Tag td gehört,
hat Vorrang vor der Zeilenformatierung (Tag tr), die wiederum Vorrang vor
der Tabellenformatierung (Tag table) hat. Angenommen, Sie wählen für eine
Zelle als Hintergrundfarbe Blau und stellen anschließend die Hintergrundfarbe
der ganzen Tabelle auf Gelb ein. In diesem Fall wird die blaue Zelle nicht gelb,
da das Tag td Vorrang vor dem Tag table hat.

Tabellen zur Präsentation von Inhalten verwenden 203


Im folgenden Beispiel gibt das Tag table die Hintergrundfarbe Gelb (#FFFF99)
für die ganze Tabelle vor. Das erste Tag tr definiert für die entsprechenden Zellen
die Farbe Grün (#33FF66), das zweite Tag td definiert für die Zelle, die sich oben
in der Mitte befindet, die Farbe Blau (#333399). Die Tags tr und td in der
unteren Zeile wurden nicht geändert, sodass für diese Zellen als Tabellenfarbe
Gelb gilt.
<table border="1" width="75%" bgcolor="#FFFF99">
<tr bgcolor="#33FF66">
<td> </td>
<td bgcolor="#333399"> </td>
<td> </td>
< <tr> >
< <tr> >
<td> </td>
<td> </td>
<td> </td>
< </tr>>
</table>

Tabelleneigenschaften definieren
Wenn Sie eine Tabelle ausgewählt haben, werden ihre Eigenschaften
im Eigenschafteninspektor angezeigt.
Sie können auch den Befehl Tabelle formatieren verwenden, um schnell und
einfach ein vordefiniertes Layout auf eine ausgewählte Tabelle anzuwenden.
Siehe „Tabellen mit einem vordefinierten Layout formatieren“ auf Seite 207.

So definieren Sie Tabelleneigenschaften:

1 Wählen Sie die Tabelle aus.


2 Wählen Sie Fenster > Eigenschaften, um den Eigenschafteninspektor
zu öffnen. Klicken Sie unten rechts auf den Erweiterungspfeil, um alle
Eigenschaften anzuzeigen.

So benennen Sie eine Tabelle:

• Geben Sie in das Feld Tabellenname einen Namen für die Tabelle ein.

204 Kapitel 7
So wählen Sie Optionen für das Tabellenlayout:

• Geben Sie in die Felder Zeilen und Spalten die Anzahl der Zeilen und Spalten
in der Tabelle ein.
• Geben Sie in die Felder B und H die Breite und Höhe der Tabelle ein, und
zwar entweder als Prozentsatz des Browserfensters oder als feste Pixelzahl.
Die Höhe der Tabelle brauchen Sie in der Regel nicht festzulegen.
• Geben Sie im Feld Ausrichten an, wie die Tabelle an anderen Elementen
im gleichen Absatz, beispielsweise Text oder Bildern, ausgerichtet werden soll.
Mit Links wird die Tabelle linksbündig neben anderen Elementen angeordnet,
mit Rechts rechtsbündig neben anderen Elementen angeordnet. Mit
Zentrieren wird die Tabelle zentriert. Sie können die Tabelle rechtsbündig
oder linksbündig neben anderen Elementen anordnen oder zentrieren.
Weiterhin können Sie die Standardausrichtung des Browsers wählen.
• Mit den Schaltflächen Zeilenhöhen löschen und Spaltenbreiten löschen
können Sie alle Werte für die Zeilenhöhen bzw. die Spaltenbreiten aus der
Tabelle löschen.
• Klicken Sie auf die Schaltfläche Tabellenbreite in Pixel konvertieren, wenn die
Tabellenbreite nicht mehr als Prozentsatz des Browserfensters bemessen,
sondern die aktuelle Breite in Pixeln angegeben werden soll.
• Klicken Sie auf die Schaltfläche Tabellenbreite in Prozent konvertieren,
um die aktuelle Pixelbreite in einen Prozentsatz des Browserfensters zu
konvertieren.

So definieren Sie die Zellauffüllung und den Zellenabstand (zwei Methoden):

• Geben Sie im Feld Zellauffüllung den Abstand in Pixeln zwischen Zellinhalt


und Zellrand (oder Zellwand) an.
• Definieren Sie im Feld Zellenabstand den Abstand in Pixeln zwischen den
einzelnen Zellen einer Tabelle.
Wenn Sie für den Zellenabstand und die Zellauffüllung keine Werte angeben,
gelten in Netscape Navigator, Microsoft Internet Explorer und Dreamweaver
automatisch die Werte 2 für den Zellenabstand und 1 für die Zellauffüllung.

So definieren SieTabellenrahmen:

• Geben Sie im Feld Rahmen die Breite des Tabellenrahmens in Pixeln an.
In den meisten Browsern wird der Rahmen als dreidimensionale Linie
angezeigt.
Wenn Sie die Tabelle zum Layout der Seite verwenden, geben Sie für den
Rahmen den Wert 0 an. Wenn Sie als Wert 0 gewählt haben und die Zell- und
Tabellenränder anzeigen möchten, wählen Sie Ansicht > Visuelle Hilfsmittel >
Tabellenrahmen.
• Verwenden Sie das Feld Rahmenfarbe, um eine Rahmenfarbe für die ganze
Tabelle auszuwählen.

Tabellen zur Präsentation von Inhalten verwenden 205


• Wählen Sie mit den Optionen Hg das Hintergrundbild bzw. die
Hintergrundfarbe für die Tabelle aus.
• Wählen Sie im Feld Hg das Hintergrundbild für die Tabelle aus.

Eigenschaften für Spalten, Zeilen und Zellen definieren


Wählen Sie eine beliebige Kombination von Zellen aus und ändern Sie dann
das Erscheinungsbild individueller Zellen, Zeilen oder Spalten mit dem
Eigenschafteninspektor. Unter „Tabellenelemente auswählen“ auf Seite 201
wird beschrieben, wie Sie Zellen, Zeilen und Spalten auswählen. Unter
„Tabelleneigenschaften definieren“ auf Seite 204 wird beschrieben, wie Sie
ganze Tabellen formatieren.

So formatieren Sie eine Zeile, Spalte oder Zelle:

1 Wählen Sie eine beliebige Kombination von Zellen in der Tabelle aus.
2 Wählen Sie Fenster > Eigenschaften, um den Eigenschafteninspektor
zu öffnen. Klicken Sie unten rechts auf den Erweiterungspfeil, damit alle
Eigenschaften angezeigt werden.

3 Legen Sie die folgenden Optionen für das Erscheinungsbild fest:


• Wählen Sie im Popup-Menü Horiz die horizontale Ausrichtung für den
Inhalt einer Zelle, Zeile oder Spalte aus. Sie können den Inhalt linksbündig,
rechtsbündig oder zentriert ausrichten oder die Standardausrichtung des
Browsers wählen (normalerweise linksbündig für reguläre Zellen und zentriert
für die Zellen der Kopfzeile).
• Wählen Sie im Popup-Menü Vert die vertikale Ausrichtung für den Inhalt einer
Zelle, Zeile oder Spalte aus. Sie können den Inhalt oben, unten, in der Mitte
oder an der Grundlinie ausrichten oder die Standardausrichtung des Browsers
wählen (normalerweise Mitte).
• Legen Sie in den Feldern B und H die Breite und Höhe der ausgewählten
Zellen in Pixeln fest. Möchten Sie Breite und Höhe als Prozentwert angeben,
tragen Sie hinter dem Wert ein Prozentzeichen (%) ein.
• Wenn Sie ein Hintergrundbild für eine Zelle, Spalte oder Zeile festlegen
möchten, verwenden Sie das obere Feld Hg. Klicken Sie auf das Ordnersymbol,
um das gewünschte Bild zu suchen, oder geben Sie den Pfad des Bildes ein.
Sie können auch das Dateizeiger-Symbol verwenden.

206 Kapitel 7
• Wenn Sie eine Hintergrundfarbe für eine Zelle, Spalte oder Zeile festlegen
möchten, verwenden Sie das untere Feld Hg. Wählen Sie dann eine Farbe aus
dem Farbwähler aus oder geben Sie den Hexadezimalcode der gewünschten
Farbe ein.
• Möchten Sie eine Rahmenfarbe für die Zellen festlegen, verwenden Sie die
Option Rahmen.
4 Legen Sie die folgenden Layoutoptionen fest:
• Klicken Sie auf die Schaltfläche Zellen verbinden, um ausgewählte Zellen,
Zeilen oder Spalten zu kombinieren und auf diese Weise eine einzige Zelle
zu erstellen. Siehe „Zellen verbinden und teilen“ auf Seite 212.
• Klicken Sie auf die Schaltfläche Zellen teilen, um eine Zelle zu teilen und
damit zwei Zellen zu erstellen. Siehe „Zellen verbinden und teilen“ auf
Seite 212.
• Markieren Sie das Kontrollkästchen Kein Umbruch, um zu verhindern, dass
Wörter umgebrochen werden. Dadurch werden die Zellen verbreitert, damit
genügend Platz für die Daten vorhanden ist, die Sie in die Zelle eingeben oder
einfügen. (Normalerweise werden die Zellen zunächst breiter, damit das längste
Wort in eine Zeile passt. Anschließend werden sie nach unten verlängert.)
• Markieren Sie das Kontrollkästchen Kopfzeile, um die ausgewählten Zellen
oder Zeilen als Tabellenkopfzeile zu formatieren. Der Inhalt von
Kopfzeilenzellen in Tabellen ist standardmäßig fett und zentriert.

Tabellen mit einem vordefinierten Layout formatieren


Verwenden Sie den Befehl Tabelle formatieren, um schnell und einfach ein
vordefiniertes Layout auf eine ausgewählte Tabelle anzuwenden. Anschließend
können Sie weitere Optionen auswählen, um das Layout entsprechend
anzupassen.

So verwenden Sie ein vordefiniertes Layout:

1 Wählen Sie die Tabelle aus und wählen Sie dann Befehle > Tabelle
formatieren.
2 Wählen Sie aus dem Dialogfeld auf der linken Seite das gewünschte Layout
aus. Die Tabelle wird aktualisiert und Sie sehen eine Vorschau des neuen
Layouts.
3 Passen Sie das Layout nach Bedarf an, indem Sie die Optionen Zeilenfarben,
Oberste Zeile und Linke Spalte entsprechend ändern.
4 Um die Rahmenbreite zu modifizieren, müssen Sie einen Wert in das Feld
Rahmen eingeben. Geben Sie 0 ein, wenn kein Rahmen angezeigt werden soll.

Tabellen zur Präsentation von Inhalten verwenden 207


5 Wenn Sie das Layout nicht auf die Tabellenzeilen (Tags tr), sondern auf die
Tabellenzellen (Tags td) anwenden möchten, markieren Sie das
Kontrollkästchen Optionen: Alle Attribute auf TD-Tags, nicht auf TR-Tags
anwenden.
Die Formatierung der Tabellenzelle setzt alle Formatierungen außer Kraft,
die Sie für die entsprechende Tabellenzeile definiert haben. Wenn Sie alle
Zellen einer Zeile gleich formatieren möchten, empfiehlt es sich, die
Tabellenzeile und nicht die einzelnen Zellen zu formatieren. Dadurch wird
gewährleistet, dass der resultierende HTML-Quellcode präziser und besser
strukturiert ist. Siehe „Tabellen und Zellen formatieren“ auf Seite 203.
6 Klicken Sie auf Anwenden oder auf OK, um das ausgewählte Layout auf die
Tabelle anzuwenden.

Tabellen und Zellen vergrößern oder


verkleinern
Sie können ganze Tabellen oder einzelne Zeilen und Spalten vergrößern oder
verkleinern. Wenn Sie die Größe der ganzen Tabelle ändern, werden alle Zellen
in der Tabelle proportional verändert.

So ändern Sie die Größe der Tabelle:

1 Wählen Sie die Tabelle aus.

208 Kapitel 7
2 Ziehen Sie einen der Auswahlgriffe, um die Tabelle in der entsprechenden
Richtung zu vergrößern oder zu verkleinern. Wenn Sie den Eckgriff ziehen,
wird die Tabelle in beide Richtungen vergrößert oder verkleinert.

So ändern Sie die Größe einer Zeile oder Spalte:

• Ändern der Zeilenhöhe: Ziehen Sie den unteren Zeilenrand.


• Ändern der Spaltenbreite: Ziehen Sie den rechten Spaltenrand.

Spaltenbreite ändern
Der Eigenschafteninspektor bietet Ihnen drei verschiedene Möglichkeiten,
die Spaltenbreite festzulegen.

So legen Sie die Spaltenbreite fest:

1 Klicken Sie in eine beliebige Zelle der Spalte oder wählen Sie die Spalte aus.
2 Wählen Sie Fenster > Eigenschaften, um den Eigenschafteninspektor zu
öffnen.
3 Geben Sie in das Feld B Folgendes ein:
• Geben Sie eine Zahl ein, um die Spaltenbreite in Pixeln festzulegen.
• Geben Sie eine Zahl gefolgt vom Prozentzeichen (%) ein, um die Spaltenbreite
auf einen Prozentsatz der Tabellenbreite einzustellen.
• Lassen Sie das Feld leer (Standardeinstellung), damit die Spaltenbreite je nach
Zellinhalt und der Breite anderer Spalten automatisch von Dreamweaver und
vom Browser eingestellt wird. In der Regel richtet sich die Breite nach der
längsten Zeile oder dem breitesten Bild. Daher kann eine Spalte der Tabelle
wesentlich breiter als andere Spalten werden, wenn Sie Inhalt hinzufügen.

Breite und Höhe neu einstellen


Sie können Spaltenbreiten und Zeilenhöhen schnell und einfach einstellen,
indem Sie den Tabellenrahmen ziehen. Wenn Sie einen Spalten- oder
Zeilenrahmen ziehen, werden automatisch spezifische Werte für alle anderen
Spalten und Zeilen eingestellt, und zwar entweder in Pixeln oder als Prozentsatz
der aktuellen Tabellenabmessungen, je nachdem, wie die Tabellenbreite angegeben
wurde.
Wenn Sie die Tabellenrahmen ziehen, das Ergebnis jedoch nicht wie gewünscht
ausfällt, können Sie die Spaltenbreiten löschen und es noch einmal versuchen.

So ändern Sie Breiten und Höhen (mehrere Methoden):

• Wählen Sie die Tabelle aus. Wählen Sie dann Modifizieren > Tabelle und
anschließend Zellhöhen löschen oder Zellbreiten löschen.

Tabellen zur Präsentation von Inhalten verwenden 209


• Öffnen Sie die Codeansicht (oder den Codeinspektor) und ändern Sie die
Einstellungen für Breite und Höhe direkt im HTML-Code.
• Geben Sie im Eigenschafteninspektor spezifische Werte für Höhe und Breite
in die Felder H und B ein.

Zeilen und Spalten hinzufügen


und entfernen
Mit den Befehlen im Menü Modifizieren > Tabelle oder im Kontextmenü
können Sie Zeilen und Spalten in Tabellen einfügen bzw. aus Tabellen entfernen.

So fügen Sie Zeilen oder Spalten ein:

1 Klicken Sie in die Zelle, wo Sie eine neue Zeile oder Spalte einfügen möchten.
2 Führen Sie einen der folgenden Schritte aus:
• Um eine Zeile hinzuzufügen, wählen Sie Modifizieren > Tabelle > Zeile
einfügen oder wählen Sie im Kontextmenü den Befehl Tabelle > Zeile
einfügen.
• Um eine Spalte hinzuzufügen, wählen Sie Modifizieren > Tabelle > Spalte
einfügen oder wählen Sie im Kontextmenü den Befehl Tabelle > Spalte
einfügen.
• Um sowohl Zeilen als auch Spalten einzufügen, wählen Sie Modifizieren >
Tabelle > Zeilen oder Spalten einfügen oder wählen Sie im Kontextmenü
den Befehl Tabelle > Zeilen oder Spalten einfügen.
3 Geben Sie im daraufhin angezeigten Dialogfeld die Anzahl der Spalten oder
Zeilen ein, die Sie einfügen möchten. Geben Sie auch an, ob die neuen Spalten
oder Zeilen vor oder nach der ausgewählten Zeile oder Spalte eingefügt werden
sollen.
4 Klicken Sie auf OK.

So löschen Sie Zeilen oder Spalten:

1 Klicken Sie in eine Zelle innerhalb der Zeile oder Spalte, die Sie löschen
möchten.
2 Führen Sie einen der folgenden Schritte aus:
• Um eine Zeile zu löschen, wählen Sie Modifizieren > Tabelle > Zeile löschen
oder wählen Sie im Kontextmenü den Befehl Tabelle > Zeile löschen.
• Um eine Spalte zu löschen, wählen Sie Modifizieren > Tabelle > Spalte löschen
oder wählen Sie im Kontextmenü den Befehl Tabelle > Spalte löschen.

210 Kapitel 7
So fügen Sie am unteren oder am rechten Rand der Tabelle Zeilen oder Spalten
ein oder löschen sie:

1 Wählen Sie die ganze Tabelle aus. (Klicken Sie dazu auf die obere linke Ecke
der Tabelle oder klicken Sie einmal in die Tabelle und wählen Sie
Modifizieren > Tabelle > Tabelle auswählen.)
2 Führen Sie im Eigenschafteninspektor einen der folgenden Schritte aus:
• Erhöhen Sie den Wert für die Anzahl der Zeilen oder Spalten.
• Verringern Sie den Wert für die Anzahl der Zeilen oder Spalten.
Zeilen werden in Dreamweaver unten an die Tabelle angefügt bzw. unten von
der Tabelle entfernt. Spalten werden an der rechten Seite der Tabelle eingefügt
bzw. entfernt. In Dreamweaver erscheint keine Warnmeldung, wenn Sie Zeilen
oder Spalten löschen, die Daten enthalten.

Tabellen verschachteln
Bei einer verschachtelten Tabelle handelt es sich um eine Tabelle, die sich
innerhalb einer anderen Tabelle befindet. Sie können eine verschachtelte Tabelle
wie jede andere Tabelle auch konfigurieren. Ihre Breite wird jedoch durch die
Breite der Zelle begrenzt, in der sie sich befindet.

So verschachteln Sie eine Tabelle innerhalb einer Tabellenzelle:

1 Führen Sie einen der folgenden Schritte aus:


• Klicken Sie in die Zelle, in die Sie die zweite Tabelle einfügen möchten,
und wählen Sie Einfügen > Tabelle.
• Klicken Sie in die Zelle, in die Sie die zweite Tabelle einfügen möchten.
• Ziehen Sie die Schaltfläche Tabelle auf der Registerkarte Allgemein der
Objektpalette in die Zelle, in die Sie die zweite Tabelle einfügen möchten.
2 Definieren Sie die Tabelleneigenschaften im Dialogfeld Tabelle einfügen
und klicken Sie auf OK.

Tabellen zur Präsentation von Inhalten verwenden 211


Zellen verbinden und teilen
Mit dem Eigenschafteninspektor oder den Befehlen im Menü Modifizieren >
Tabelle können Sie Zellen verbinden oder teilen. Sie können eine beliebige
Anzahl aneinander grenzender Zellen miteinander verbinden, vorausgesetzt,
die Auswahl hat eine rechteckige Form. Dadurch entsteht eine einzige Zelle,
die sich über mehrere Spalten oder Zeilen erstreckt. Weiterhin können Sie eine
Zelle in eine beliebige Anzahl von Zeilen und Spalten teilen, unabhängig davon,
ob diese Zelle zuvor verbunden war oder nicht. Dabei wird die Tabelle
automatisch umstrukturiert (d. h. die erforderlichen Attribute COLSPAN
oder ROWSPAN werden hinzugefügt), um die gewünschte Tabellenanordnung
zu erstellen.
In der folgenden Abbildung wurden die Zellen in der Mitte der ersten beiden
Zeilen verbunden, sodass sich die daraus entstehende Zelle über zwei Zeilen
erstreckt.

So verbinden Sie zwei oder mehr Zellen in einer Tabelle:

1 Wählen Sie die Zellen aus, die miteinander verbunden werden sollen. Die
ausgewählten Zellen müssen aneinander grenzen und ein Rechteck bilden.

Diese Auswahl hat die Form eines Rechtecks. Die Zellen können daher miteinander
verbunden werden.

Die Auswahl in dieser Tabelle hat nicht die Form eines Rechtecks.
Die Zellen können daher nicht miteinander verbunden werden.

212 Kapitel 7
2 Wählen Sie Modifizieren > Tabelle > Zellen verbinden oder klicken Sie im
Eigenschafteninspektor auf die Schaltfläche Zellen verbinden.
Der Inhalt der einzelnen Zellen wird in die neue, größere Zelle gesetzt.
Dabei gelten die Eigenschaften der Zelle, die zuerst ausgewählt wurde,
für die neue verbundene Zelle.

So teilen Sie eine verbundene Zelle:

1 Klicken Sie in die Zelle oder wählen Sie eine Zelle aus.
2 Wählen Sie Modifizieren > Tabelle > Zelle teilen oder klicken Sie im
Eigenschafteninspektor auf die Schaltfläche Zelle teilen.
3 Geben Sie im Dialogfeld Zelle teilen an, ob Sie die Zelle in Zeilen oder in
Spalten teilen möchten, und legen Sie dann die Anzahl der Zeilen oder Spalten
fest.

Zellen kopieren und einfügen


Sie können mehrere Tabellenzellen gleichzeitig kopieren und einfügen.
Dabei wird die Formatierung der Zellen beibehalten. Sie können jedoch
auch nur den Inhalt der Zelle kopieren und einfügen.
Die Zellen können entweder am Einfügepunkt oder anstelle eines ausgewählten
Bereichs in eine vorhandene Tabelle eingefügt werden. Wenn Sie mehrere
Tabellenzellen einfügen möchten, muss der Inhalt der Zwischenablage mit der
Struktur der Tabelle bzw. der ausgewählten Zellen übereinstimmen, in die die
Zellen eingefügt werden sollen.

Tabellen zur Präsentation von Inhalten verwenden 213


So schneiden Sie Zellen in einer Tabelle aus oder kopieren sie:

1 Wählen Sie eine oder mehrere Zellen in der Tabelle aus.


Die ausgewählten Zellen müssen ein Rechteck bilden, damit sie ausgeschnitten
oder kopiert werden können. (Siehe „Tabellenelemente auswählen“ auf
Seite 201.

Auswahl ist richtig: Die Zellen können ausgeschnitten oder kopiert werden.

Auswahl ist falsch: Diese Zellen können weder ausgeschnitten noch kopiert werden.

2 Verwenden Sie die Befehle im Menü Bearbeiten, um die Zellen


auszuschneiden oder zu kopieren.
Wenn Sie eine ganze Zeile oder eine ganze Spalte auswählen und dann
Bearbeiten > Ausschneiden wählen, wird die Zeile bzw. die Spalte aus
der Tabelle entfernt.

So fügen Sie Tabellenzellen ein:

1 Wählen Sie, an welcher Stelle die Zellen eingefügt werden sollen.


• Wenn Sie die Zellen vor oder über einer bestimmten Zelle einfügen möchten,
klicken Sie in diese Zelle.
• Möchten Sie mit den eingefügten Zellen eine neue Tabelle erstellen, klicken Sie
auf die Stelle, an der die neue Tabelle erscheinen soll (klicken Sie aber nicht
in eine andere Tabelle).
2 Wählen Sie Bearbeiten > Einfügen.
Wenn Sie ganze Zeilen oder Spalten in eine vorhandene Tabelle einfügen,
werden diese Zeilen oder Spalten in die Tabelle eingefügt. Fügen Sie eine
einzelne Zelle ein, wird der Inhalt der ausgewählten Zelle ersetzt. Wenn Sie den
Inhalt der Zwischenablage außerhalb einer vorhandenen Tabelle einfügen,
wird mit den Zeilen, Spalten oder Zellen eine neue Tabelle definiert.

214 Kapitel 7
So entfernen Sie den Inhalt einer Zelle, ohne die Zelle selbst zu ändern:

1 Wählen Sie eine oder mehrere Zellen aus.


2 Wählen Sie Bearbeiten > Löschen oder drücken Sie die Entf-Taste.
Anmerkung: Wenn Sie alle Zellen einer Zeile oder einer Spalte auswählen, wird nicht nur
der Zellinhalt, sondern die ganze Zeile bzw. die ganze Spalte aus der Tabelle entfernt.

Tabellen sortieren
Sie können einen einfachen Sortiervorgang durchführen, indem Sie die Tabelle
nach dem Inhalt einer einzigen Spalte sortieren. Sie können jedoch auch
komplexere Sortiervorgänge durchführen und die Tabelle nach dem Inhalt
von zwei Spalten sortieren.
Sie können keine Tabellen sortieren, die die Attribute COLSPAN oder ROWSPAN
enthalten. Hierbei handelt es sich um Tabellen mit verbundenen Zellen.
(Einzelheiten zu verbundenen Zellen finden Sie unter „Zellen verbinden und
teilen“ auf Seite 212.)

So sortieren Sie Tabellen:

1 Wählen Sie die Tabelle aus. Wählen Sie Befehle > Tabellen sortieren.
2 Legen Sie im angezeigten Dialogfeld die folgenden Optionen fest:
• Geben Sie unter Sortieren nach an, welche Spalte sortiert werden soll.
• Geben Sie unter Reihenfolge an, ob die Spalte alphabetisch oder numerisch
sortiert werden soll.
Diese Option ist wichtig, wenn eine Spalte numerischen Inhalt enthält.
Wenn Sie eine Liste, die ein- und zweistellige Zahlen enthält, alphabetisch
sortieren, erhalten Sie anstelle eines numerischen Sortierergebnisses (wie 1, 2,
3, 10, 20, 30) ein alphanumerisches Sortierergebnis (wie 1, 10, 2, 20, 3, 30).
• Wählen Sie Aufsteigend (A bis Z oder niedrige Zahlen bis hohe Zahlen) oder
Absteigend als Sortierreihenfolge aus.
3 Wenn Sie einen zweiten Sortiervorgang nach einer anderen Spalte durchführen
möchten, definieren Sie die Optionen unter Dann nach.
4 Markieren Sie das Kontrollkästchen Erste Zeile beim Sortieren
berücksichtigen, wenn die erste Zeile beim Sortieren mit berücksichtigt
werden soll. Wenn es sich bei der ersten Zeile um eine Überschriftenzeile
handelt, die ganz oben stehen bleiben soll, darf diese Option nicht markiert
sein.
5 Klicken Sie auf Anwenden oder auf OK, um die Tabelle zu sortieren.

Tabellen zur Präsentation von Inhalten verwenden 215


Tabellendaten exportieren
Wenn Sie Tabellendaten exportieren möchten, die Sie in Dreamweaver erstellt
haben, müssen Sie sie in einem Dateiformat speichern, das Daten mit
Trennzeichen unterstützt. Als Trennzeichen kommen Kommata, Doppelpunkte,
Semikola oder Leerzeichen in Frage.
Bei einem Export wird grundsätzlich die ganze Tabelle exportiert. Ausgewählte
Teile einer Tabelle können nicht exportiert werden. Wenn Sie nur bestimmte
Daten einer Tabelle exportieren möchten, beispielsweise die ersten sechs Zeilen
oder Spalten, gehen Sie wie folgt vor: Erstellen Sie eine neue Tabelle, kopieren
Sie die gewünschten Daten in diese Tabelle und exportieren Sie sie.

So exportieren Sie Tabellen:

1 Setzen Sie den Einfügepunkt in eine beliebige Zelle der Tabelle, die Sie
exportieren möchten.
2 Wählen Sie Datei > Exportieren > Tabellen exportieren.
Das Dialogfeld Tabelle exportieren wird eingeblendet.

3 Wählen Sie im Popup-Menü Trennzeichen das gewünschte Trennzeichen


für die Tabellendaten aus.
4 Wählen Sie im Popup-Menü Zeilenumbrüche den Zeilenumbruch für das
Betriebssystem aus, in das Sie die Datei exportieren (Windows, Macintosh
oder UNIX).
5 Klicken Sie auf Exportieren.
6 Geben Sie im daraufhin erscheinenden Dialogfeld einen Namen für die Datei
ein und klicken Sie auf Speichern.

216 Kapitel 7
8

KAPITEL 8
Frames
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Frames werden verwendet, um eine Webseite in mehrere HTML-Seiten zu


unterteilen. Eine Webseite kann beispielsweise aus drei Frames bestehen:
Ein schmaler Frame an der Seite enthält ein Menü, ein anderer Frame verläuft
oben quer über die Seite und zeigt Logo und Titel der Website und ein dritter
großer Frame nimmt den restlichen Platz auf der Seite ein und enthält den
Hauptinhalt. Bei jedem dieser Frames handelt es sich um eine separate HTML-
Seite. Die Frames werden mithilfe eines oder mehrerer Framesets auf der Seite
verknüpft. Ein Frameset ist eine HTML-Seite, die Struktur und Eigenschaften
der Webseite definiert, wie die Anzahl der Frames auf der Seite, die Größe
der Frames, die Quelle der Seite, die in einen Frame geladen wird, und andere
defnierbare Eigenschaften. Die Frameset-Seite selbst wird nicht im Browser
angezeigt. Sie enthält lediglich Informationen darüber, wie die Frames auf einer
Seite angezeigt werden. (Wenn Sie den Befehl Vorschau in Browser verwenden,
sollten Sie allerdings die Frameset-Seite in der Vorschau anzeigen.)

217
In diesem Beispiel ist der obere Frame statisch, das heißt, er wird auf allen
Seiten der Site unverändert angezeigt. Das Menü im Frame an der Seite enthält
Hyperlinks, durch die der Inhalt in Haupt-Frame geändert wird. Abgesehen
davon ist dieser Frame jedoch ebenfalls statisch. Der Inhalt des Haupt-Frames
ist dynamisch und ändert sich, wenn Sie eine andere Menüoption wählen.
Sie können alle Frames und Framesets Ihrer Seite über den
Eigenschafteninspektor formatieren. So können Sie beispielsweise Rollbalken
aktivieren oder deaktivieren, Breite und Höhe einstellen, die einzelnen Seiten
benennen und so weiter. Weitere Informationen finden Sie unter „Eigenschaften
für Frames und Framesets“ auf Seite 226.
Eine Webseite mit drei Frames besteht aus vier separaten HTML-Seiten: der
Frameset-Datei und den drei Dateien mit dem Inhalt, der in den Frames angezeigt
wird. Wenn Sie beim Seitendesign Framesets einsetzen, müssen Sie alle vier
Dateien speichern, damit die Seite richtig im Browser dargestellt wird.
Unter „Webseiten mit Frames erstellen“ auf Seite 219 wird genauer beschrieben,
wie Sie Webseiten mit Frames erstellen.

Entscheidung für oder gegen Frames


Frames werden hauptsächlich zu Navigationszwecken eingesetzt. So kann eine
Webseite beispielsweise zwei Frames enthalten. In einem dieser Frames wird
das Navigationsmenü untergebracht, im anderen der Seiteninhalt. Da das
Navigationsmenü sich in einem Frame befindet, können Besucher Ihrer Site
auf eine Menüoption klicken, um Textinhalte im Inhaltsbereich anzuzeigen. Das
Navigationsmenü ändert sich dadurch nicht. Auf diese Weise können Sie Ihre
Website für Besucher übersichtlicher gestalten.

218 Kapitel 8
Die Implementierung von Frames ist allerdings etwas kompliziert und oftmals
können Sie ohne Frames die gleichen Ergebnisse erzielen wie mit Frames. Soll sich
der Navigationsbereich beispielsweise links auf der Seite befinden, können Sie Ihre
Seite entweder in zwei Frames aufteilen oder einfach den Navigationsbereich in
alle Seiten Ihrer Site integrieren. Der einzige Unterschied besteht darin, dass Sie
bei einer Verwendung von Frames den Navigationsbereich nur einmal erstellen
müssen. Wenn Sie sich für Frames in Ihrer Website entscheiden, sollten Sie sich
zunächst mit den Grundkonzepten von Frames und Framesets vertraut machen,
da die Verknüpfung von Frames nicht ganz so leicht ist, wie Sie vielleicht meinen.

Webseiten mit Frames erstellen


Frames können sich zwar als hervorragendes Tool für Webdesigner erweisen,
müssen aber richtig erstellt werden, um die gewünschten Ergebnisse zu liefern.
Führen Sie die folgenden Arbeitsschritte aus, damit Ihre Webseite funktioniert
(die Schritte müssen nicht unbedingt in der angegebenen Reihenfolge ausgeführt
werden):
• Erstellen Sie das Frameset und die Frames auf Ihrer Webseite. Siehe unter
„Frames erstellen“ auf Seite 219.
• Speichern Sie alle Dateien, die in der Site verwendet werden. Denken Sie
daran, dass alle Frames und Framesets unabhängige HTML-Seiten sind,
die ebenfalls gespeichert werden müssen. Siehe unter „Frame- und Frameset-
Dateien speichern“ auf Seite 224.
• Definieren Sie die Eigenschaften für die einzelnen Frames und Framesets.
Beispielsweise müssen Sie die Frames und Framesets benennen, Optionen
für Rollbalken festlegen und so weiter. Siehe unter „Eigenschaften für Frames
und Framesets“ auf Seite 226.
• Stellen Sie sicher, dass alle Hyperlinks ein Ziel haben, damit der verknüpfte
Inhalt im jeweils richtigen Bereich angezeigt wird. Siehe unter „Frame-Inhalt
mithilfe von Hyperlinks steuern“ auf Seite 232.

Frames erstellen
Sie haben in Dreamweaver zwei Möglichkeiten, um ein Frameset zu erstellen:
Sie können es selbst entwerfen oder eines der vordefinierten Framesets auswählen.
Wenn Sie ein vordefiniertes Frameset wählen, werden automatisch alle Framesets
und Frames eingerichtet, die für das Layout erforderlich sind. Dies ist die
einfachste Methode, um schnell und problemlos ein Frame-Layout auf Ihre Seite
zu bringen. Frames können nur in der Entwurfsansicht des Dokumentfensters
erstellt werden.

Frames 219
Vordefinierte Framesets einfügen
Mit vordefinierten Framesets können Sie schnell und einfach einen Framesettyp
auswählen, den Sie erstellen möchten.
Aus den Symbolen der vordefinierten Framesets auf der Registerkarte Frames der
Objektpalette wird ersichtlich, wie die einzelnen Framesets aussehen, wenn sie im
ausgewählten Dokument verwendet werden.

Das ausgewählte Frameset umgibt das aktuelle Dokument, also das Dokument,
in dem sich die Einfügemarke befindet. Der blaue Bereich im Symbol des
vordefinierten Framesets stellt die derzeitig ausgewählte Seite oder den
ausgewählten Frame im Dokument dar. Der weiße Bereich zeigt den bzw. die
neuen Frames.

So fügen Sie ein vordefiniertes Frameset ein:

1 Setzen Sie die Einfügemarke an die gewünschte Stelle im Dokument.


2 Führen Sie dann einen der folgenden Schritte aus:
• Wählen Sie auf der Registerkarte Frames der Objektpalette ein vordefiniertes
Frameset aus. Klicken Sie auf ein Symbol oder ziehen Sie ein Symbol direkt
in das Dokument, um das Frameset einzufügen.
• Um ein vordefiniertes Frameset auszuwählen, wählen Sie Einfügen > Frames >
Links, Rechts, Oben, Unten, Links und oben, Links oben, Oben links oder
Teilen.

Framesets entwerfen und einfügen


Bevor Sie ein Frameset erstellen oder mit Frames arbeiten, sollten Sie die Frame-
Rahmen im Dokumentfenster anzeigen.
Sie zeigen die Frame-Rahmen im Dokument an, indem Sie Ansicht > Visuelle
Hilfsmittel >Frame-Rahmen wählen.

220 Kapitel 8
Wenn die Frame-Rahmen angezeigt werden, wird dem Dokumentrand Abstand
hinzugefügt. Dies dient als visuelle Hilfe für die Frame-Bereiche in Ihrem
Dokument.

Führen Sie einen der folgenden Schritte aus, um Framesets zu erstellen:

• Wählen Sie Modifizieren > Frameset > Frame links, rechts, unten bzw. oben
teilen.
• Ziehen Sie einen der Frame-Rahmen in das Dokumentfenster, um das
Dokument vertikal oder horizontal zu teilen. Wenn Sie dabei von einer
der Ecken des Frame-Rahmens aus ziehen, wird das Dokument in vier Frames
unterteilt.

• Halten Sie beim Ziehen die <Alt>-Taste (Windows) bzw. die Wahltaste
(Macintosh) gedrückt, wenn Sie einen inneren Frame teilen.

So löschen Sie Frames:

Ziehen Sie den Frame-Rahmen aus der Seite heraus oder zum Rahmen
des übergeordneten Frames.

Verschachtelte Framesets erstellen


Ein Frameset, das sich innerhalb eines anderen Framesets befindet, wird als
verschachteltes Frameset bezeichnet. Jedes neue Frameset, das Sie erstellen,
enthält ein eigenes Frameset-HTML-Dokument sowie Frame-Dokumente.
Bei den meisten Webseiten mit Frames kommen verschachtelte Frames zum
Einsatz. Auch mehrere der in Dreamweaver vordefinierten Framesets sind
verschachtelt.

Frames 221
Angenommen, Sie erstellen drei Frames für Ihr Dokument. Dabei soll im oberen
Frame das Logo des Unternehmens angezeigt werden. In einem Frame auf der
linken Seite sollen Navigationsschaltflächen eingefügt werden. In einem dritten
Frame soll Textinhalt stehen.

Haupt-Frameset

Menü-Frame
und Inhalt-Frame
sind im Haupt-
Frameset
verschachtelt

So erstellen Sie verschachtelte Framesets:

1 Setzen Sie die Einfügemarke in den Frame, in den Sie ein verschachteltes
Frameset einfügen möchten.
2 Führen Sie einen der folgenden Schritte aus:
• Wählen Sie Modifizieren > Frameset > Frame oben teilen, Frame unten teilen,
Frame links teilen oder Frame rechts teilen.
• Wählen Sie auf der Registerkarte Frames der Objektpalette das Symbol eines
Framesets aus.
• Wählen Sie Einfügen > Frames > Links, Rechts, Oben, Unten, Links und
oben, Links oben, Oben links oder Teilen.

Frames oder Framesets auswählen


Frames und Framesets sind individuelle HTML-Dokumente. Wenn Sie
Änderungen an einem Frame oder Frameset vornehmen möchten, müssen Sie
den jeweiligen Frame bzw. das jeweilige Frameset zunächst auswählen. Sie können
Frames und Framesets im Dokumentfenster oder in der Frames-Palette
auswählen.
Wenn Sie einen Frame oder ein Frameset auswählen, werden in der Frames-Palette
und im Dokumentfenster Auswahllinien angezeigt.

222 Kapitel 8
Die Frames-Palette
Auf der Frames-Palette werden alle Frames in einem Dokument visuell dargestellt.
Wenn Sie in der Frames-Palette auf einen Frame oder ein Frameset klicken,
wird der Frame oder das Frameset im Dokument ausgewählt. Anschließend
können Sie die Eigenschaften des ausgewählten Frames oder Framesets im
Eigenschafteninspektor anzeigen und bearbeiten. Siehe unter „Eigenschaften für
Frames und Framesets“ auf Seite 226.
In der Frames-Palette wird die Hierarchie der Frameset-Struktur übersichtlicher
dargestellt als im Dokumentfenster. In der Frames-Palette wird ein Frameset von
einem dicken dreidimensionalen Rahmen umgeben. Frames werden von einer
dünnen grauen Linie umgeben und jeder Frame hat einen Frame-Namen.

Führen Sie einen der folgenden Schritte aus, um die Frames-Palette


einzublenden:

• Wählen Sie Fenster > Frames.


• Drücken Sie Strg+F10 (Windows) bzw. Befehlstaste+F10 (Macintosh).

So wählen Sie einen Frame über die Frames-Palette aus:

Klicken Sie in der Frames-Palette auf den gewünschten Frame.

So wählen Sie ein Frameset über die Frames-Palette aus:

Klicken Sie auf den Rahmen, der die Frames in der Frames-Palette umgibt.

Frames oder Framesets im Dokumentfenster auswählen


Wenn ein Frame ausgewählt ist, wird sein Rahmen im Dokumentfenster von einer
gepunkteten Linie umgeben. Ist ein Frameset ausgewählt, werden die Rahmen
aller Frames innerhalb des Framesets von einer gepunkteten Linie umgeben.
Wenn Sie die Eigenschaften von Frames oder Framesets ändern möchten, müssen
Sie sie zunächst auswählen. Im Eigenschafteninspektor werden die Eigenschaften
des ausgewählten Frames oder Framesets angezeigt. Siehe unter „Eigenschaften für
Frames und Framesets“ auf Seite 226.

Frames 223
So wählen Sie einen Frame im Dokumentfenster aus:

Halten Sie die <Alt>-Taste (Windows) bzw. die Umschalt- und Wahltaste
(Macintosh) gedrückt und klicken Sie in einen Frame.

So wählen Sie ein Frameset im Dokumentfenster aus:

Klicken Sie im Dokumentfenster auf einen Frame-Rahmen.

Führen Sie einen der folgenden Schritte aus, um einen anderen Frame
auszuwählen:

• So wählen Sie den nächsten Frame aus:


Halten Sie die <Alt>-Taste (Windows) bzw. die Befehlstaste (Macintosh)
gedrückt und drücken Sie dann die Pfeil-nach-links- bzw. die Pfeil-nach-rechts-
Taste.
• So wählen Sie das übergeordnete Frameset aus (das verschachtelte Frames
enthält):
Drücken Sie die <Alt>-Taste und die Pfeil-nach-oben-Taste (Windows) bzw.
die Befehlstaste und die Pfeil-nach-oben-Taste (Macintosh).
• So wählen Sie den untergeordneten Frame aus (der in einem anderen Frame
verschachtelt ist): Drücken Sie die <Alt>-Taste und die Pfeil-nach-unten-Taste
(Windows) bzw. die Befehlstaste und die Pfeil-nach-unten-Taste (Macintosh).

Frame- und Frameset-Dateien speichern


Sie müssen die Frameset-Datei sowie die zugehörigen Frame-Dateien speichern,
bevor Sie die Seite zur Vorschau in einem Browser anzeigen können. Sie können
eine Frameset- oder Frame-Seite individuell speichern oder alle geöffneten Frame-
Dateien und die Frameset-Seite zusammen speichern.
Wenn Sie mit Dreamweaver Frame-Dokumente erstellen, wird jedem neuen
Frame-Dokument ein vorübergehender Dateiname zugewiesen, beispielsweise
„UntitledFrame-1“ für die Frameset-Seite, „Untitled-1“, „Untitled-2“ usw. für
die Frame-Seiten.

224 Kapitel 8
Wenn Sie einen der Befehle zum Speichern wählen, wird das Dialogfeld Speichern
unter angezeigt, in dem das Dokument unter seinem vorübergehenden
Dateinamen gespeichert werden kann. Da die einzelnen Dateien „unbenannt“
sind, ist es eventuell schwierig festzustellen, welche Frame-Datei Sie gerade
speichern. Anhand der Frame-Auswahllinien im Dokumentfenster können Sie
jedoch ganz einfach erkennen, welches Dokument gerade gespeichert wird. Der
ausgewählte Bereich gibt an, welcher Frame gerade im Dialogfeld Speichern unter
angezeigt wird. Der Dateiname des ausgewählten Frames bzw. des Framesets steht
außerdem in der Titelleiste.

So speichern Sie eine Frameset-Datei:

1 Wählen Sie das Frameset in der Frames-Palette oder im Dokumentfenster aus.


2 Führen Sie einen der folgenden Schritte aus:
• Um die Frameset-Datei zu speichern, wählen Sie Datei > Frameset speichern.
• Um die Frameset-Datei als neue Datei zu speichern, wählen Sie Datei >
Frameset speichern unter.

So speichern Sie ein Dokument, das sich in einem Frame befindet:

Klicken Sie in den Frame, um ihn auszuwählen. Wählen Sie dann Datei > Frame
speichern oder Datei > Frame speichern unter.

So speichern Sie alle Dateien in einem Frameset:

Wählen Sie Datei > Alle Frames speichern.


Dadurch werden alle geöffneten Dokumente gespeichert, also alle individuellen
Dokumente, Frame-Dokumente und Frameset-Dokumente.

Frames 225
Anmerkung: Die Frame-Auswahllinien im Dokumentfenster können Ihnen dabei helfen,
die Frame- und Frameset-Dokumente beim Speichern zu identifizieren.

Eigenschaften für Frames und Framesets


Frames und Framesets haben ihren eigenen Eigenschafteninspektor.
• Die Frame-Eigenschaften bestimmen Frame-Namen, Quelldatei, Ränder,
Rahmen sowie Optionen für Rollbalken und Größenänderung für einzelne
Frames innerhalb eines Framesets.
• Die Frameset-Eigenschaften steuern die Abmessungen der Frames sowie
die Farbe und Breite der Rahmen zwischen den Frames.

So zeigen Sie die Frame-Eigenschaften an:

1 Wählen Sie Fenster > Eigenschaften, um den Eigenschafteninspektor


zu öffnen, falls er noch nicht geöffnet ist.
2 Führen Sie einen der folgenden Schritte aus:
• Halten Sie die <Alt>-Taste (Windows) bzw. die Umschalt- und die Wahltaste
(Macintosh) gedrückt und klicken Sie auf einen Frame.
• Klicken Sie in der Frames-Palette auf einen Frame.

Frame-Eigenschaften einstellen
Verwenden Sie den Eigenschafteninspektor, um Frames zu benennen und
um Ränder und Rahmen zu definieren. Eventuell müssen Sie unten rechts
im Eigenschafteninspektor auf den Erweiterungspfeil klicken, damit alle Frame-
Eigenschaften angezeigt werden. Sie müssen alle Frames benennen, damit die
Hyperlinks auf der Seite ordnungsgemäß funktionieren.

So definieren Sie Frame-Eigenschaften:

1 Führen Sie einen der folgenden Schritte aus, um einen Frame auszuwählen:
• Klicken Sie in der Frames-Palette auf einen Frame.
• Klicken Sie bei gedrückter <Alt>-Taste (Windows) bzw. Umschalt- und
Wahltaste (Macintosh) auf einen Frame im Dokumentfenster.

226 Kapitel 8
2 Wählen Sie Fenster > Eigenschaften, um den Eigenschafteninspektor
zu öffnen. Klicken Sie unten rechts auf den Erweiterungspfeil, um alle
Eigenschaften anzuzeigen.

3 Benennen Sie den Frame, indem Sie einen Namen in das Feld Frame-Name
eingeben.
Anmerkung: Der Frame-Name bestimmt den Namen des aktuellen Frames, der für
Hyperlink-Ziele und Skriptreferenzen verwendet werden soll. Ein Frame-Name sollte
aus einem einzigen Wort bestehen. Unterstriche (_) können verwendet werden,
Bindestriche (-), Punkte (.) und Leerzeichen jedoch nicht. Frame-Namen sollten mit
einem Buchstaben (nicht mit einer Zahl) beginnen. Verwenden Sie keine reservierten
JavaScript-Wörter für Frame-Namen (wie top oder navigator).

4 Folgende Frame-Optionen stehen zur Auswahl:


• Quelle gibt das Quelldokument des Frames an. Geben Sie einen Dateinamen
ein oder klicken Sie auf das Ordnersymbol, um die Datei zu suchen und
auszuwählen. Sie können eine Datei auch in einem Frame öffnen, indem
Sie den Mauszeiger in den Frame setzen und dann Datei > Öffnen in Frame
wählen.
• Rollen bestimmt, ob Rollbalken angezeigt werden sollen, wenn nicht genügend
Platz für den Inhalt des aktuellen Frames zur Verfügung steht.
Die Standardeinstellung ist bei den meisten Browsern Auto.
• Keine Größenänderung beschränkt die Größe des aktuellen Frames
und verhindert, dass die Frame-Rahmen gezogen werden können.
Im Dokumentfenster können die Frames grundsätzlich vergrößert oder
verkleinert werden. Wenn diese Option markiert ist, können Anwender
die Frame-Größe allerdings nicht in ihren Browsern ändern.

Frames 227
• Rahmen steuert den Rahmen des aktuellen Frames. Folgende Optionen stehen
zur Auswahl: Ja, Nein und Standard. Wenn Sie eine Option für Rahmen
wählen, werden die Rahmeneinstellungen des Framesets außer Kraft gesetzt.
(Siehe unter „Frameset-Eigenschaften einstellen“ auf Seite 228.) Bei den
meisten Browsern ist die Standardeinstellung Ja. Ein Rahmen kann nur
deaktiviert werden, wenn für alle angrenzenden Frames die Option Nein
gewählt wurde oder die Option Standard sowie die Option Nein für das
übergeordnete Frameset.
• Rahmenfarbe legt die Farbe für alle Rahmen fest, die an den aktuellen Frame
angrenzen. Diese Einstellung hat Vorrang vor der Rahmenfarbe, die für das
Frameset definiert wurde.
5 Legen Sie die folgenden Randoptionen fest (wenn diese Optionen nicht
angezeigt werden, klicken Sie unten rechts auf den Erweiterungspfeil):
Randbreite stellt die Breite des linken und des rechten Randes in Pixeln
ein (dies ist der Abstand zwischen dem Frame-Rahmen und dem Inhalt).
Randhöhe stellt die Höhe des oberen und des unteren Randes in Pixeln
ein dies ist der Abstand zwischen dem Frame-Rahmen und dem Inhalt).

Frameset-Eigenschaften einstellen
Mit den Frameset-Eigenschaften können Sie Rahmen festlegen und die Frame-
Größe definieren. Wenn Sie eine Frame-Eigenschaft festlegen, wird dadurch die
entsprechende Eigenschaft für das Frameset außer Kraft gesetzt. Wenn Sie
beispielsweise die Rahmeneigenschaften eines Frames definieren, haben diese
Vorrang vor den Rahmeneigenschaften des Framesets.
Mit vordefinierten Framesets können Sie schnell und einfach ein Frameset auf
ein Dokument anwenden. Für vordefinierte Framesets gelten die folgenden
Standardeigenschaften: keine Rahmen, keine Rollbalken und keine
Größenveränderung der Frames bei der Anzeige in einem Browser. Wenn Sie
die Standardwerte ändern möchten, wählen Sie die gewünschten Optionen im
Eigenschafteninspektor aus.

So zeigen Sie Frameset-Eigenschaften an:

1 Wählen Sie Fenster > Eigenschaften, um den Eigenschafteninspektor


zu öffnen, falls er nicht bereits geöffnet ist.
2 Führen Sie einen der folgenden Schritte aus:
• Klicken Sie im Dokumentfenster auf einen Rahmen zwischen zwei Frames.
• Klicken Sie auf den Rahmen, der die Frames in der Frames-Palette umgibt.

228 Kapitel 8
3 Eventuell müssen Sie unten rechts im Eigenschafteninspektor auf den
Erweiterungspfeil klicken, damit alle Eigenschaften des Framesets angezeigt
werden.

So definieren Sie Frameset-Eigenschaften:

1 Wählen Sie ein Frameset aus.


2 Geben Sie im Popupmenü Rahmen an, ob die Frames von Rahmen umgeben
werden sollen, wenn das Dokument in einem Browser angezeigt wird.
• Sollen Rahmen angezeigt werden, wählen Sie Ja.
• Sollen keine Rahmen angezeigt werden, wählen Sie Nein.
• Wenn der Browser des Anwenders bestimmen soll, ob Rahmen angezeigt
werden, wählen Sie Standard.
3 Geben Sie im Feld Rahmenbreite einen Wert ein, um die Breite der Rahmen
im aktuellen Frameset festzulegen.
4 Wählen Sie im Feld Rahmenfarbe mit dem Farbwähler eine Farbe für den
Rahmen aus oder geben Sie den Hexadezimalwert der gewünschten Farbe ein.
5 Um Optionen für die Frame-Größe festzulegen, klicken Sie neben Zeilen/
Spalten-Auswahl auf die seitlichen Schaltflächen, um eine Zeile auszuwählen,
oder klicken Sie oben auf die Schaltflächen, um eine Spalte auszuwählen.
Geben Sie dann im Feld Wert eine Zahl ein, um die Größe der ausgewählten
Zeile oder Spalte festzulegen. Wählen Sie im Popupmenü Wert die gewünschte
Maßeinheit für den Wert.

Frames 229
Frameset-Dokumente benennen
Wenn Sie einer Frameset-Seite einen Titel hinzufügen möchten, verwenden
Sie die Option Seiteneigenschaften.

So benennen Sie eine Frameset-Seite:

1 Führen Sie einen der folgenden Schritte aus, um ein Frameset auszuwählen:
• Klicken Sie in der Frames-Palette auf den Rahmen eines Framesets.
• Klicken Sie bei gedrückter <Alt>-Taste (Windows) bzw. Umschalt- und
Wahltaste (Macintosh) auf einen Frame im Dokumentfenster. Eventuell
müssen Sie die <Alt>-Taste und die Pfeil-nach-oben-Taste (Windows) bzw.
die Befehlstaste und die Pfeil-nach-oben-Taste (Macintosh) drücken, um das
Frameset auszuwählen.
2 Wählen Sie Modifizieren > Seiteneigenschaften.
3 Geben Sie im Feld Titel einen Namen für das Dokument ein.

Frame-Größen definieren
Ziehen Sie die Frame-Rahmen im Dokumentfenster, um die ungefähre Größe der
Frames anzugeben. Anschließend können Sie mit dem Eigenschafteninspektor
definieren, wie viel Platz den Frames in einem Browser zugewiesen wird, falls
nicht genügend Platz auf dem Bildschirm vorhanden ist, um die Frames in voller
Größe darzustellen.

So definieren Sie die Frame-Größen:

1 Klicken Sie auf einen Frame-Rahmen, um das Frameset auszuwählen.


Wählen Sie Ansicht > Visuelle Hilfsmittel > Frame-Rahmen, wenn die
Rahmen nicht angezeigt werden.
2 Klicken Sie im Eigenschafteninspektor auf den Erweiterungspfeil, damit alle
Eigenschaften angezeigt werden.
3 Klicken Sie neben Zeilen/Spalten-Auswahl auf die Zeile oder Spalte, die Sie
ändern möchten.

4 Wenn Sie angeben möchten, wie der Platz zugewiesen wird, wenn die Größe
des Browserfensters sich ändert, geben Sie eine Zahl in das Feld Wert ein und
wählen Sie dann aus den folgenden Einheiten:

230 Kapitel 8
• Pixel stellt die Größe der ausgewählten Spalte oder Zeile auf einen absoluten
Wert ein. Wählen Sie diese Option für Frames, die grundsätzlich die gleiche
Größe beibehalten sollen, wie beispielsweise Navigationsleisten. Wenn Sie für
die anderen Frames eine andere Einheit angeben, wird ihnen erst dann Platz
zugewiesen, wenn die in Pixel definierten Frames in voller Größe angezeigt
werden.
• Prozent gibt an, dass dem aktuellen Frame ein bestimmter Prozentsatz der
Frameset-Größe zugewiesen wird. Dreamweaver weist diesen Frames erst nach
den in Pixel definierten Frames Platz zu, jedoch vor Frames, für die eine relative
Größe angegeben wird.
• Relativ bedeutet, dass der Platz, der dem aktuellen Frame zugewiesen wird,
proportional zu den anderen Frames berechnet wird. Dreamweaver weist
den Frames mit relativer Größenangabe erst dann Platz zu, wenn in Pixel und
Prozent definierte Frames auf ihre Größe eingestellt wurden. Frames mit
relativer Größenangabe belegen den gesamten restlichen Platz im
Browserfenster.

Frame- und Frameset-Rahmen definieren


Sie können festlegen, wie Frame- und Frameset-Rahmen in einem Dokument
angezeigt werden. Wenn Sie eine Option für einen Frame-Rahmen definieren,
wird dadurch die entsprechende Frameset-Option außer Kraft gesetzt.

So definieren Sie Frame-Rahmen:

1 Wählen Sie den Frame aus. Halten Sie dazu die <Alt>-Taste (Windows) bzw.
die Umschalt- und die Wahltaste (Macintosh) gedrückt und klicken Sie auf den
Frame oder klicken Sie in der Frame-Palette auf den Frame.
2 Legen Sie im Eigenschafteninspektor die folgenden Optionen fest:
• Rahmen steuert den Rahmen der aktuellen Frames. Folgende Optionen stehen
zur Auswahl: Ja, Nein und Standard. Bei den meisten Browsern ist die
Standardeinstellung Ja. Ein Rahmen kann nur deaktiviert werden, wenn für
alle angrenzenden Frames die Option Nein gewählt wurde (oder die Option
Standard sowie die Option Nein für das übergeordnete Frameset).
• Rahmenfarbe legt die Farbe für alle Rahmen fest, die an den aktuellen Frame
angrenzen.

So definieren Sie Frameset-Rahmen:

1 Wählen Sie das Frameset aus, indem Sie im Dokumentfenster auf einen Frame-
Rahmen klicken. Sie können auch in der Frames-Palette auf den Rahmen
klicken, der die Frames umgibt.
2 Legen Sie im Eigenschafteninspektor die folgenden Optionen fest:

Frames 231
• Rahmen steuert den Rahmen der Frames im aktuellen Frameset. Wenn Sie Ja
wählen, werden dreidimensionale Rahmen angezeigt; bei Nein werden flache
graue Rahmen angezeigt. Wenn Sie Standard wählen, legt der Browser fest, wie
die Rahmen dargestellt werden. Bei den meisten Browsern ist die
Standardeinstellung Ja.
• Rahmenfarbe definiert die Farbe für alle Rahmen im aktuellen Frameset.
Diese Einstellung kann für einen einzelnen Frame außer Kraft gesetzt werden,
indem Sie eine Rahmenfarbe für diesen Frame definieren.
• Rahmenbreite definiert die Breite der Rahmen im aktuellen Frameset.
Geben Sie 0 ein, wenn keine Rahmen angezeigt werden sollen.

Hintergrundfarbe eines Frames ändern


Sie ändern die Hintergrundfarbe eines Frames, indem Sie die Hintergrundfarbe
des Dokuments einstellen, das im Frame enthalten ist.

So ändern Sie die Hintergrundfarbe des Dokuments im Frame:

1 Führen Sie einen der folgenden Schritte aus:


• Setzen Sie den Mauszeiger in den Frame und wählen Sie Modifizieren >
Seiteneigenschaften.
• Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter <Strg>-
Taste (Macintosh) in den Frame und wählen Sie im Kontextmenü den Befehl
Seiteneigenschaften.
2 Klicken Sie auf das Popupmenü Hintergrund, um eine Farbe auszuwählen.

Frame-Inhalt mithilfe von Hyperlinks


steuern
Wenn Sie Hyperlinks in Frames verwenden möchten, müssen Sie ein Ziel für
den Hyperlink angeben. Beim Ziel handelt es sich um den Frame, in dem der
verknüpfte Inhalt geöffnet wird. Angenommen, das Navigationsmenü befindet
sich im linken Frame und das verknüpfte Material soll im Frame des Hauptinhalts
angezeigt werden. In diesem Fall müssen Sie Ziele für alle Hyperlinks des
Navigationsmenüs angeben. Das Ziel entspricht dem Namen des Frames mit dem
Hauptinhalt, beispielsweise „Hauptframe“. Wenn Besucher auf einen Hyperlink
des Navigationsmenüs klicken, wird der Inhalt im Hauptframe geöffnet.

232 Kapitel 8
Sie verwenden das Popupmenü Ziel im Eigenschafteninspektor, um den Frame
auszuwählen, in dem eine Datei angezeigt werden soll. Dabei können Sie
festlegen, dass die Datei in einem neuen Frame geöffnet wird oder den Inhalt
im gleichen Frame, in dem sich der Hyperlink befindet, oder in einem anderen
Frame ersetzt. Weiterhin können Sie festlegen, dass der verknüpfte Inhalt den
aktuellen Frame überschreibt (wenn Sie kein Ziel angeben) oder in einem neuen
Browserfenster angezeigt wird.

So definieren Sie ein Ziel für einen Frame:

1 Wählen Sie eine Textstelle oder ein Objekt aus.


2 Führen Sie im Feld Hyperlink des Eigenschafteninspektors einen der folgenden
Schritte aus:
• Geben Sie den Namen der Datei ein, für die der Hyperlink erstellt werden soll.
• Klicken Sie auf das Ordnersymbol und wählen Sie die Datei aus, für die der
Hyperlink erstellt werden soll.
• Klicken Sie auf das Dateizeiger-Symbol und ziehen Sie es auf die Datei, für die
der Hyperlink erstellt werden soll.
Wenn Sie einen Anker (eine bestimmte Position) in der Datei, auf die der
Hyperlink verweist, angeben möchten, geben Sie vor dem Ankernamen das
Zeichen # ein. Siehe unter „Hyperlinks zu bestimmten Stellen innerhalb eines
Dokuments“ auf Seite 396.
3 Wählen Sie im Popupmenü Ziel aus, wo das verknüpfte Dokument angezeigt
werden soll.
• Wenn Sie die Frames im Eigenschafteninspektor benannt haben, werden die
Frame-Namen in diesem Menü angezeigt. Wählen Sie einen benannten Frame
aus, um das verknüpfte Dokument in diesem Frame zu öffnen.
• _blank öffnet das verknüpfte Dokument in einem neuen Browserfenster.
Das aktuelle Fenster bleibt dabei verfügbar.
• _parent öffnet das verknüpfte Dokument im übergeordneten Frameset
des Hyperlinks.
• _self öffnet das verknüpfte Dokument im aktuellen Frame. Dabei wird
der derzeitige Inhalt des Frames ersetzt.
• _top öffnet das verknüpfte Dokument im äußersten Frameset des aktuellen
Dokuments. Dabei werden alle Frames ersetzt.

Frames 233
Vorgehensweise bei Browsern ohne Frame-
Unterstützung
Sie können Inhalt angeben, der in älteren und textbasierten Browsern angezeigt
werden soll, die keine Frames unterstützen. Der angegebene Inhalt wird mit einer
Anweisung ähnlich der folgenden in das Frameset-Dokument eingefügt:
<noframes><body bgcolor="#FFFFFF">
Dies ist der NoFrames-Inhalt.
</body></noframes>

Wenn die Frameset-Datei in einem Browser geladen wird, der keine Frames
unterstützt, wird nur der Inhalt innerhalb der Tags noframes angezeigt.

So definieren Sie Inhalt für Browser ohne Frame-Unterstützung:

1 Wählen Sie Modifizieren > Frameset > NoFrames-Inhalt bearbeiten.


Der Inhalt des Dokumentfensters wird gelöscht und der Text „NoFrames-
Inhalt“ oben im Hauptteil angezeigt.
2 Führen Sie einen der folgenden Schritte aus, um den NoFrames-Inhalt
zu erstellen:
• Zunächst müssen Sie den Inhalt im Dokumentfenster eingeben oder einfügen.
• Wählen Sie Fenster > Codeinspektor und geben Sie dann zwischen den
noframes-Tags den Inhalt oder den HTML-Code des Inhalts ein.
3 Wählen Sie noch einmal Modifizieren > Frameset > NoFrames-Inhalt
bearbeiten, um zur normalen Ansicht des Frameset-Dokuments
zurückzukehren.

Verhalten mit Frames verwenden


Sie können verschiedene Verhalten zuweisen, die die Funktionsweise der Frames
optimal nutzen. Frames werden in der Regel von Webdesignern verwendet, um zu
steuern, wie der Inhalt auf einer Webseite angezeigt wird. Es stehen verschiedene
Verhalten zur Verfügung, mit denen Sie steuern können, wie der Inhalt in einem
Frame geändert wird.
• Mit der Option Textrahmen festlegen werden Inhalt und Formatierung eines
Frames durch den Inhalt ersetzt, den Sie angeben. Bei diesem Inhalt kann es
sich um beliebigen gültigen HTML-Code handeln. Verwenden Sie diese
Aktion, um Informationen dynamisch anzuzeigen. Siehe unter „Frame-Text
festlegen“ auf Seite 502.

234 Kapitel 8
• Mit der Option Gehe zu URL wird eine neue Seite im aktuellen Fenster oder im
angegebenen Frame geöffnet. Mit dieser Aktion kann der Inhalt von zwei oder
mehr Frames mit einem Mausklick geändert werden. Siehe unter „Gehe zu
URL“ auf Seite 495.
• Die Option Navigationsleiste einfügen wird verwendet, um Besucher zu
bestimmten Seiten in einer Website zu leiten. Sie können den Bildern der
Navigationsleiste Verhalten anfügen und festlegen, welche Bilder bei
bestimmten Benutzeraktionen angezeigt werden sollen. Beispielsweise können
Sie ein Schaltflächenbild mit seinem Up- oder Down-Status anzeigen, damit
die Besucher wissen, welche Seite einer Site angezeigt wird. Siehe unter
„Navigationsleisten einfügen“ auf Seite 406.
• Sprungmenü einfügen ermöglicht es Ihnen, ein Popupmenü mit einer Liste von
Hyperlinks einzurichten. Wenn Besucher auf diese Hyperlinks klicken, werden
Dateien im Browserfenster geöffnet. Sie können auch ein bestimmtes Fenster
oder einen Frame als Ziel angeben. Das Dokument wird dann in diesem
Fenster oder Frame geöffnet. Siehe unter „Sprungmenüs einfügen“ auf
Seite 403.

Frames 235
236 Kapitel 8
9

KAPITEL 9
Elemente verwalten und einfügen
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Elemente sind z. B. Bilder oder Filmdateien, die Sie beim Erstellen einer Seite
oder einer Site verwenden.
Über die Elementpalette lassen sich die Elemente Ihrer Site einfacher verwalten
und organisieren als mit über das Sitefenster. In dieser Palette werden die
Elemente Ihrer Site in folgenden Kategorien angezeigt:
• Bilder
• Farben
• URLs
• Flash-Filme
• Shockwave-Filme
• MPEG- und QuickTime-Filme
• Skripte
• Vorlagen
• Bibliothekselemente
Anmerkung: Die Elementpalette enthält ausschließlich Dateien, die in die oben
genannten Kategorien passen. Andere Dateitypen werden zwar manchmal auch als
Elemente bezeichnet, werden aber nicht in der Elementpalette angezeigt.

Wenn Sie noch keine Elemente für Ihre Site zusammengestellt haben, können
Sie sie aus verschiedenen Quellen erhalten. Beispielsweise können Sie Elemente
in Anwendungen wie Macromedia Fireworks oder Macromedia Flash erstellen,
von Mitarbeitern oder Kunden erhalten oder von einer Clip-Art-CD kopieren.
Weitere Informationen zum Planen und Zusammentragen von Elementen finden
Sie unter „Websites planen und entwerfen“ auf Seite 101.

237
Die Elementpalette kann auf zwei Arten eingesetzt werden: als Liste, die den
einfachen Zugriff auf die Elemente in Ihrer Site ermöglicht (Siteliste), oder zur
Organisation der Elemente, die Sie am häufigsten verwenden (Favoritenliste).
Die Elemente Ihrer Site werden automatisch in die Siteliste der Elementpalette
eingetragen. Die Favoritenliste ist zunächst leer, bis Sie ihr die gewünschten
Elemente hinzufügen.
Im Großen und Ganzen ist die Funktionsweise der Siteliste und der Favoritenliste
der Elementpalette gleich. Einige Tasks können allerdings nur in der Favoritenliste
durchgeführt werden (siehe „Favoritenelemente verwenden“ auf Seite 246).
Vorlagen und Bibliothekselemente werden „Inhalte über Vorlagen und
Bibliotheken wieder verwenden“ auf Seite 411.

Die Elementpalette
Über die Elementpalette können Sie Ihre Elemente auf zwei Arten anzeigen:
in der Siteliste, die alle Elemente Ihrer Site zeigt (sofern der Elementtyp von
der Palette erkannt wird), und in der Favoritenliste, die nur die Elemente enthält,
die Sie ausdrücklich gewählt haben. Der Großteil der folgenden Vorgänge kann
sowohl in der Siteliste als auch in der Favoritenliste ausgeführt werden.
In beiden Listen werden die Elemente in Kategorien unterteilt. Sie können
festlegen, welche Elementkategorie angezeigt wird, indem Sie links in der
Elementpalette auf eine der Schaltflächen klicken. (In der Siteliste und der
Favoritenliste können alle Elementkategorien bis auf Vorlagen und
Bibliothekselemente angezeigt werden.)
Die Siteliste enthält alle Elemente (aus erkannten Kategorien), die als Dateien
in Ihrer Site vorhanden sind (dabei spielt es keine Rolle, ob diese Elemente
tatsächlich in Dokumenten zum Einsatz kommen). Weiterhin enthält die Siteliste
alle Farben und URLs, die in den Dokumenten Ihrer Site verwendet werden.
Sie können folgende Elementkategorien verwenden:
Bildersind Bilddateien im GIF-, JPEG- oder PNG-Format. Weitere
Informationen über Bilder finden Sie „Bilder einfügen“ auf Seite 289
Farben sind Farben, die in Dokumenten und Stylesheets in Ihrer Site verwendet
werden, wie z. B. Farben für Text, Hintergrund und Hyperlinks.
URLs sind die externen URLs der Hyperlinks in den Dokumenten Ihrer Site.
Zu dieser Kategorie gehören die folgenden Hyperlink-Arten: FTP, gopher, HTTP,
HTTPS, JavaScript, E-Mail (mailto) und lokale Dateien (file://).
Flash-Filmesind Dateien, die mit einer beliebigen Version des Flash-Formats von
Macromedia erstellt wurden. In der Elementpalette werden nur SWF-Dateien
(komprimierte Flash-Dateien) angezeigt. FLA-Dateien (Flash-Quelldateien)
werden nicht angezeigt. Siehe „Informationen über Flash-Inhalte“ auf Seite 326.

238 Kapitel 9
Shockwave-Filme sind Dateien, die mit einer beliebigen Version des Shockwave-
Formats von Macromedia erstellt wurden. Siehe „Shockwave-Filme“ auf
Seite 337.
Filme sind Filmdateien im QuickTime- oder MPEG-Format. Siehe „Medien
einfügen“ auf Seite 323.
Skriptesind JavaScript- oder VBScript-Dateien. Beachten Sie, dass Skripte in
HTML-Dateien (im Gegensatz zu unabhängigen JavaScript- oder VBScript-
Dateien) nicht in der Elementpalette angezeigt werden. Siehe „JavaScript-Code
debuggen“ auf Seite 513
Vorlagen bieten die Möglichkeit, mehrere Seiten mit dem gleichen Seitenlayout
zu erstellen und das Layout schnell und einfach für alle Seiten gleichzeitig zu
modifizieren. Siehe „Inhalte über Vorlagen und Bibliotheken wieder verwenden“
auf Seite 411
Bibliothekselemente sind Elemente, die auf mehreren Seiten verwendet werden.
Wenn Sie ein Bibliothekselement modifizieren, werden alle Seiten, die dieses
Element enthalten, aktualisiert. Siehe „Inhalte über Vorlagen und Bibliotheken
wieder verwenden“ auf Seite 411

So öffnen Sie die Elementpalette:

Wählen Sie Fenster > Elemente. Die Elementpalette erscheint auf dem
Bildschirm.

Es kann einige Sekunden dauern, bis die Siteliste in der Elementpalette erstellt
wird, da zunächst der Site-Cache gelesen werden muss.

Elemente verwalten und einfügen 239


Anmerkung: Sie müssen eine Site definieren und den Site-Cache erstellen, bevor Sie mit
der Elementpalette arbeiten können. Siehe „Neue Sites mit Dreamweaver einrichten“ auf
Seite 107.

Bestimmte Änderungen erscheinen nicht sofort in der Elementpalette:


• Wenn Sie ein Element in eine Site einfügen oder ein Element aus der Site
entfernen, werden die Änderungen in der Elementpalette erst dann
widergespiegelt, wenn Sie auf die Schaltfläche Siteliste aktualisieren klicken,
um die Siteliste zu aktualisieren. (Wenn Sie Elemente außerhalb von
Dreamweaver hinzufügen oder entfernen, beispielsweise über Windows-
Explorer oder den Finder, müssen Sie den Site-Cache neu erstellen,
damit die Änderungen in der Elementpalette widergespiegelt werden.)
• Wenn Sie die einzige Instanz einer bestimmten Farbe oder eines URLs aus Ihrer
Site entfernen oder eine neue Datei speichern, die eine bisher nicht verwendete
Farbe oder einen noch nicht verwendeten URL enthält, werden die
Änderungen in der Elementpalette erst wirksam, wenn Sie die Siteliste
aktualisieren.

So aktualisieren Sie die Siteliste manuell:

1 Klicken Sie oben in der Elementpalette auf Site, damit die Siteliste angezeigt
wird.
2 Klicken Sie unten in der Elementpalette auf die Schaltfläche Siteliste
aktualisieren.
Der Site-Cache wird nun erstellt oder aktualisiert. Die Elementpalette wird
aktualisiert und zeigt nun alle erkannten Elemente in Ihrer Site.

So erstellen Sie den Site-Cache manuell neu und aktualisieren die Siteliste:

Halten Sie die <Strg>-Taste (Windows) bzw. die Befehlstaste (Macintosh)


gedrückt und klicken Sie unten in der Elementpalette auf die Schaltfläche Siteliste
aktualisieren.

So zeigen Sie die Favoritenliste an:

Klicken Sie oben in der Elementpalette auf Favoriten.


Die Favoritenliste ist leer, bis Sie ihr explizit Elemente hinzufügen.

So zeigen Sie die Siteliste an:

Klicken Sie oben in der Elementpalette auf Site.


Anmerkung: Für die Kategorien Vorlagen und Bibliothek stehen die Siteliste und die
Favoritenliste nicht zur Verfügung.

240 Kapitel 9
So zeigen Sie die Elemente in einer bestimmten Kategorie an:

Klicken Sie auf das Symbol der gewünschten Kategorie und dann auf Site bzw.
Favoriten. Wenn Sie beispielsweise alle Bilder in Ihrer Site anzeigen möchten,
klicken Sie auf das Symbol Bilder und dann auf Site.

So zeigen Sie ein Element in der Vorschau an:

Wählen Sie das Element in der Elementpalette aus.


Im Vorschaubereich oben in der Palette wird eine visuelle Vorschau des Elements
angezeigt.
Wenn Sie ein Filmelement ausgewählt haben, wird im Vorschaubereich ein
Symbol angezeigt. Sie können sich den Film ansehen, indem Sie oben rechts
im Vorschaubereich auf die Schaltfläche Abspielen (das grüne Dreieck) klicken.

So ändern Sie die Größe des Vorschaubereichs:

Ziehen Sie die Trennleiste (zwischen dem Vorschaubereich und der Elementliste)
nach oben oder unten.

So fügen Sie Elemente in Ihre Favoritenliste ein:

1 Wählen Sie ein oder mehrere Elemente in der Siteliste aus.


2 Klicken Sie auf die Schaltfläche Zu Favoriten hinzufügen.
Daraufhin werden die Elemente in Ihre Favoritenliste eingefügt. Sie können
die Favoritenliste anzeigen, indem Sie oben in der Elementpalette auf Favoriten
klicken.
Sie können in die Favoritenliste auch auf andere Weise Elemente einfügen
(siehe „Favoritenelemente zur Favoritenliste hinzufügen und aus
der Favoritenliste entfernen“ auf Seite 246).
Anmerkung: Für Vorlagen und Bibliothekselemente stehen keine Favoritenlisten
zur Verfügung.

Elemente in eine Seite einfügen


Die meisten Elementtypen werden in das Dokument eingefügt, indem Sie das
jeweilige Element in die Entwurfsansicht des Dokumentfensters ziehen oder
die Schaltfläche Einfügen verwenden. Farben und URLs können Sie entweder
einfügen oder auf ausgewählten Text in der Entwurfsansicht anwenden.
(URLs können auch auf andere Elemente in der Entwurfsansicht angewendet
werden, wie z. B. auf Bilder.) Vorlagen werden auf das ganze Dokument
angewendet.

Elemente verwalten und einfügen 241


So fügen Sie Elemente in ein Dokument ein:

1 Setzen Sie die Einfügemarke in die Entwurfsansicht an die Stelle, an der Sie
das Element einfügen möchten.
2 Wählen Sie Fenster > Elemente, um die Elementpalette zu öffnen, sofern sie
noch nicht geöffnet ist.
3 Wählen Sie die Elementkategorie aus.
Wählen Sie eine beliebige Kategorie außer der Vorlagenkategorie. (Eine Vorlage
kann nur auf das ganze Dokument angewendet werden und nicht in ein
Dokument eingefügt werden.)
4 Wählen Sie entweder Site oder Favoriten und wählen Sie das gewünschte
Element aus.
Für Bibliothekselemente steht weder die Siteliste noch die Favoritenliste zur
Verfügung. Überspringen Sie diesen Schritt, wenn Sie ein Bibliothekselement
einfügen.
5 Führen Sie einen der folgenden Schritte aus:
• Ziehen Sie das Element aus der Elementpalette in die Entwurfsansicht. (Skripte
können in den head-Inhaltsbereich des Dokumentfensters gezogen werden.
Wenn dieser Bereich nicht angezeigt ist, wählen Sie zunächst Ansicht > Head-
Inhalt.)
• Wählen Sie das Element in der Elementpalette aus und klicken Sie auf
Einfügen.
Das Element wird in das Dokument eingefügt. (Wenn es sich bei dem Element
um eine Farbe handelt, gilt diese Farbe ab der Einfügemarke. Neu eingegebener
Text wird also in dieser Farbe angezeigt.)

So ändern Sie die Farbe von ausgewähltem Text im Dokument:

1 Wählen Sie in der Elementpalette die Kategorie Farben aus.


2 Wählen Sie die gewünschte Farbe aus.
3 Klicken Sie auf Anwenden.

So fügen Sie einen Hyperlink in die aktuelle Auswahl im Dokument ein:

1 Wählen Sie in der Elementpalette die Kategorie URLs aus und wählen Sie den
gewünschten URL.
2 Führen Sie einen der folgenden Schritte aus:
• Ziehen Sie den URL aus der Elementpalette in die Auswahl der
Entwurfsansicht.
• Wählen Sie den URL aus und klicken Sie auf die Schaltfläche Anwenden.

242 Kapitel 9
So wenden Sie eine Vorlage auf das aktive Dokument an:

1 Wählen Sie in der Elementpalette die Kategorie Vorlagen aus und wählen
Sie die gewünschte Vorlage.
2 Führen Sie einen der folgenden Schritte aus:
• Ziehen Sie die Vorlage aus der Elementpalette in die Entwurfsansicht.
• Wählen Sie die Vorlage aus und klicken Sie auf die Schaltfläche Anwenden.

Reihenfolge der Elemente ändern


Standardmäßig werden die Elemente einer Kategorie in alphabetischer
Reihenfolge nach dem Namen aufgeführt. Der Elementname kann ein Dateiname
(wie beispielsweise bei Bildern), ein Hexadezimalwert (wie bei Farben) oder ein
URL sein. Sie können die Elemente aber auch nach anderen Kriterien sortieren.

So sortieren Sie Elemente in einer anderen Reihenfolge:

Klicken Sie auf eine Spaltenüberschrift.


Wenn Sie beispielsweise die Liste der Bilder nach dem Typ sortieren möchten,
klicken Sie auf die Spaltenüberschrift Typ. (Dadurch werden alle GIF-Bilder,
JPEG-Bilder und so weiter jeweils untereinander aufgeführt.)

So ändern Sie die Breite einer Spalte:

1 Setzen Sie den Mauszeiger auf die Linie zwischen den Spaltenüberschriften.
2 Ziehen Sie die Linie mit dem Mauszeiger, um die Spaltenbreite zu ändern.

Elemente auswählen und bearbeiten


Über die Elementpalette können Sie mehrere Elemente gleichzeitig auswählen.
Außerdem können Sie über die Elementpalette schnell Elemente bearbeiten.

So wählen Sie mehrere Elemente aus:

1 Klicken Sie auf ein Element, um es auszuwählen. Führen Sie dann einen
der folgenden Schritte aus, um weitere Elemente auszuwählen:
• Klicken Sie mit gedrückter Umschalttaste, um mehrere aufeinander folgende
Elemente auszuwählen.
• Klicken Sie mit gedrückter <Strg>-Taste (Windows) bzw. Befehlstaste
(Macintosh), um ein einzelnes Element auszuwählen (dabei spielt es keine
Rolle, ob das Element sich direkt neben der vorhandenen Auswahl befindet
oder nicht). Halten Sie die <Strg>-Taste (Windows) bzw. die Befehlstaste
(Macintosh) gedrückt und klicken Sie auf ein ausgewähltes Element,
um die Auswahl aufzuheben.

Elemente verwalten und einfügen 243


So bearbeiten Sie ein Element:

1 Führen Sie einen der folgenden Schritte aus:


• Doppelklicken Sie auf das gewünschte Element.
• Wählen Sie das Element aus und klicken Sie dann auf Bearbeiten.
Wenn Sie bestimmte Elemente wie z. B. Bilder bearbeiten, wird eine externe
Anwendung gestartet. Bei der Bearbeitung von Farben und URLs können Sie
die Attribute der Elemente nur in der Favoritenliste ändern. (Farben und URLs
können nicht in der Siteliste bearbeitet werden.) Bei der Bearbeitung von
Vorlagen und Bibliothekselementen können Sie Änderungen innerhalb von
Dreamweaver vornehmen.
Wenn ein externer Editor zu einem Element gehört, aber nicht geöffnet wird,
wählen Sie Bearbeiten > Voreinstellungen und dann die Kategorie
Dateitypen/Editoren. Stellen Sie sicher, dass Sie einen externen Editor für den
Dateityp des Elements definiert haben. Siehe „Externe Editoren starten“ auf
Seite 324.
2 Ändern Sie das Element nach Bedarf.
3 Führen Sie einen der folgenden Schritte aus, wenn Sie das Element bearbeitet
haben:
• Wenn es sich bei dem Element um eine Datei handelt (alle Elemente außer
Farben und URLs), speichern und schließen Sie die Datei mit dem
entsprechenden Editor.
• Ist das Element ein URL, klicken Sie nach Abschluss der Bearbeitung im
Dialogfeld URL bearbeiten auf OK.
Wenn das Element eine Farbe ist, wird der Farbwähler in Dreamweaver
automatisch geschlossen, sobald Sie eine Farbe auswählen. (Wenn Sie keine
Farbe im Farbwähler auswählen möchten, drücken Sie die <Esc>-Taste, um den
Farbwähler zu schließen.)

Elemente und Sites


Unter bestimmten Umständen möchten Sie vielleicht die Datei, die einem
Element in der Elementpalette entspricht, im Sitefenster suchen. Angenommen,
Sie möchten ein Element an eine Remote-Site senden oder von der Remote-Site
empfangen.
Die Elementpalette zeigt alle Elemente erkannter Typen, die in Ihrer aktuellen Site
vorhanden sind. (Die aktuelle Site ist die Site, die das aktive Dokument enthält.)
Wenn Sie ein Element aus der aktuellen Site in einer anderen Site verwenden
möchten, müssen Sie es in die andere Site kopieren. Sie können ein einzelnes
Element, eine Gruppe von Elementen oder einen ganzen Favoritenordner auf
einmal kopieren.

244 Kapitel 9
Anmerkung: Im Sitefenster wird u. U. eine andere Site angezeigt als in der
Elementpalette. Grund hierfür ist, dass die Elementpalette mit dem aktiven Dokument
verknüpft ist. Anhand der Titelleiste der Elementpalette können Sie feststellen, welche Site
in der Elementpalette angezeigt wird.

So suchen Sie die Datei eines Elements im Sitefenster:

Klicken Sie bei gedrückter rechter Maustaste (Windows) bzw. bei gedrückter
<Strg>-Taste (Macintosh) in der Elementpalette auf den Namen oder auf das
Symbol des Elements und wählen Sie dann im Kontextmenü den Befehl In der
Site suchen.
Das Sitefenster erscheint, in dem die Datei des Elements markiert ist.
Der Befehl In der Site suchen steht für Farben und URLs nicht zur Verfügung,
da diese Elemente nicht in Dateien in der Site gespeichert sind.
Beachten Sie, dass der Befehl In der Site suchen die Datei sucht, die dem Element
selbst entspricht, und nicht die Dateien, in denen das Element verwendet wird.

So kopieren Sie Elemente aus der Siteliste oder der Favoritenliste in eine andere
Site:

1 Klicken Sie bei gedrückter rechter Maustaste (Windows) bzw. bei gedrückter
<Strg>-Taste (Macintosh) auf das Symbol oder den Namen des oder der
Elemente, die kopiert werden sollen.
In der Favoritenliste können Sie einen Favoritenordner und einzelne Elemente
kopieren.
2 Wählen Sie im Kontextmenü den Befehl Zur Site kopieren und dann aus dem
Untermenü den Namen der Ziel-Site. (Im Untermenü werden alle definierten
Sites aufgeführt.)
Die Elemente werden nun in die angegebene Site in die entsprechenden
Verzeichnisse kopiert. Dreamweaver erstellt bei Bedarf neue Ordner in der
Ziel-Site.
Die Elemente werden außerdem in die Favoritenliste der angegebenen Site
eingefügt.
Wenn Sie ein Dokument in der Ziel-Site öffnen, wechselt die Elementpalette
zu dieser Site und zeigt die kopierten Elemente.
Anmerkung: Wenn es sich bei dem kopierten Element um eine Farbe oder einen URL
handelt, wird es nur in der Favoritenliste der anderen Site angezeigt und nicht in der
Siteliste. Grund hierfür ist, dass für Farben und URLs keine Dateien vorhanden sind
und daher auch keine Dateien in die andere Site kopiert werden können.

Elemente verwalten und einfügen 245


Favoritenelemente verwenden
Die meisten Operationen der Elementpalette sind mit denen der Siteliste und der
Favoritenliste identisch (siehe „Die Elementpalette“ auf Seite 238). Einige Tasks
können allerdings nur in der Favoritenliste durchgeführt werden.
Da die Siteliste der Elementpalette grundsätzlich alle erkannten Elemente einer
Site anzeigt, kann sie bei großen Sites unübersichtlich werden. Sie können häufig
verwendete Elemente in die Favoritenliste einfügen und in Gruppen
zusammenfassen, ihnen aussagekräftige Kurznamen zuweisen und sie schnell über
die Elementpalette finden.
Anmerkung: Favoritenelemente werden nicht als separate Dateien auf der Festplatte
gespeichert. Sie sind lediglich Verweise auf Elemente in der Siteliste. Dreamweaver
verwaltet die Elemente so, dass immer die korrekten Elemente aus der Siteliste in der
Favoritenliste angezeigt werden.

Favoritenelemente zur Favoritenliste hinzufügen und aus


der Favoritenliste entfernen
Sie haben mehrere Möglichkeiten, um die gewünschten Elemente in die
Favoritenliste Ihrer Site einzufügen.

Führen Sie einen der folgenden Schritte aus, um Elemente in Ihre Favoritenliste
einzufügen:

• Wählen Sie ein oder mehrere Elemente aus der Siteliste aus und klicken Sie
dann auf die Schaltfläche Zu Favoriten hinzufügen.
• Wählen Sie ein oder mehrere Elemente aus der Siteliste aus und wählen Sie
dann im Kontextmenü den Befehl Zu Favoriten hinzufügen.
• Klicken Sie bei gedrückter rechter Maustaste (Windows) bzw. bei gedrückter
<Strg>-Taste (Macintosh) auf ein Element in der Entwurfsansicht des
Dokumentfensters. Wählen Sie dann den Befehl aus dem Kontextmenü,
mit dem das Element in die entsprechende Favoritenkategorie eingefügt wird.
Sie können z. B. ein Bild auswählen und dann den Befehl Zu Bildfavoriten
hinzufügen aus dem Kontextmenü wählen. Das Kontextmenü für Text enthält
entweder den Befehl Zu Farbfavoriten hinzufügen oder Zu URL-Favoriten
hinzufügen, je nachdem, ob ein Hyperlink an den Text angefügt ist oder nicht.
Beachten Sie auch, dass nur Elemente, die einer Kategorie in der
Elementpalette entsprechen, in die Favoritenliste eingefügt werden können.
• Wählen Sie eine oder mehrere Dateien im Sitefenster aus und wählen Sie dann
im Kontextmenü den Befehl Zu Favoriten hinzufügen. Dateien, die keiner
Kategorie in der Elementpalette entsprechen, werden ignoriert.
Die Elemente werden daraufhin in Ihre Favoritenliste eingefügt.
Die Favoritenliste wird in der Elementpalette angezeigt, unabhängig davon,
für welche Methode Sie sich entschieden haben.
Anmerkung: Für Vorlagen und Bibliothekselemente stehen keine Favoritenlisten
zur Verfügung.

246 Kapitel 9
So entfernen Sie Elemente aus der Favoritenliste:

1 Wählen Sie in der Favoritenliste ein oder mehrere Elemente (oder einen
Favoritenordner) aus.
2 Klicken Sie unten in der Elementpalette auf die Schaltfläche Aus Favoriten
entfernen.
Daraufhin werden die Elemente aus der Favoritenliste entfernt. Sie werden
jedoch nach wie vor in der Siteliste aufgeführt. Wenn Sie einen Favoritenordner
entfernen, werden der Ordner und alle darin enthaltenen Elemente aus der
Favoritenliste entfernt.

Kurznamen für Favoritenelemente erstellen


Sie können den Elementen in der Favoritenliste Kurznamen zuweisen.
Der Kurzname wird anstelle des jeweiligen Dateinamens oder Attributs angezeigt.
So können Sie beispielsweise einer Farbe mit dem Namen #999900 einen
aussagekräftigeren Kurznamen zuweisen, wie z. B. „SeitenHintergrundFarbe“
oder „FarbeWichtigerText“.
Sie können nur Elementen in der Favoritenliste Kurznamen zuweisen. In der
Siteliste werden Elemente immer mit ihren echten Dateinamen (bei Farben
und URLs mit ihren Attributen) aufgeführt.

So weisen Sie einem Favoritenelement einen Kurznamen zu:

1 Klicken Sie auf die Kategorie, die das Element enthält.


2 Klicken Sie auf Favoriten, um die Favoritenliste anzuzeigen.
3 Führen Sie einen der folgenden Schritte aus:
• Klicken Sie bei gedrückter rechter Maustaste (Windows) bzw. bei gedrückter
<Strg>-Taste (Macintosh) in der Elementpalette auf den Namen oder das
Symbol des Elements. Wählen Sie dann im Kontextmenü den Befehl
Kurznamen bearbeiten.
• Klicken Sie zwei Mal (mit einer kleinen Pause dazwischen) auf den Namen
des Elements. (Kein Doppelklick.)
4 Geben Sie den Kurznamen für das Element ein und drücken Sie dann
die Eingabetaste.
Der Kurzname wird in der Spalte Kurzname angezeigt.

Elemente in Favoritenordnern gruppieren


Sie können in bestimmten Kategorien der Favoritenliste benannte
Elementgruppen, genannt Favoritenordner, erstellen. Wenn Sie beispielsweise
mehrere Bilder auf zahlreichen Katalogseiten einer E-Commerce-Site verwenden,
könnten Sie sie in einem Ordner namens „Katalogbilder“ gruppieren.

Elemente verwalten und einfügen 247


Anmerkung: Wenn Sie ein Element in einen Favoritenordner einfügen, wird der
Speicherort der entsprechenden Datei auf dem Datenträger dadurch nicht geändert.

So erstellen Sie einen Favoritenordner:

1 Klicken Sie oben in der Elementpalette auf Favoriten, um die Favoritenliste


anzuzeigen.
2 Klicken Sie auf die Schaltfläche Neuer Favoritenordner.
3 Geben Sie einen Namen für den Ordner ein.
4 Ziehen Sie die gewünschten Elemente in den Ordner.

Neue Farben, URLs, Vorlagen oder Bibliothekselemente


erstellen
Sie können über die Elementpalette Farben, URLs, Vorlagen und
Bibliothekselemente erstellen. Beachten Sie, dass Sie keine neuen Farben oder
URLs in die Siteliste einfügen können, da diese ausschließlich Elemente enthält,
die bereits in Ihrer Site verwendet werden.

So erstellen Sie eine neue Farbe:

1 Klicken Sie auf die Schaltfläche für die Kategorie Farben.


2 Klicken Sie auf Favoriten, um die Favoritenliste anzuzeigen.
3 Klicken Sie auf die Schaltfläche Neue Farbe.
4 Wählen Sie mit dem Farbwähler eine Farbe aus.
Wenn Sie den Farbwähler schließen möchten, ohne eine Farbe auszuwählen,
drücken Sie die <Esc>-Taste oder klicken Sie auf die graue Leiste oben im
Farbwähler. (Weitere Informationen zum Farbwähler finden Sie unter
„Mit Farben arbeiten“ auf Seite 90.)
5 Weisen Sie der Farbe ggf. einen Kurznamen zu.

So erstellen Sie einen neuen URL:

1 Klicken Sie auf die Schaltfläche für die Kategorie URLs.


2 Klicken Sie auf Favoriten, um die Favoritenliste anzuzeigen.
3 Klicken Sie auf die Schaltfläche Neuer URL.
4 Geben Sie im Dialogfeld URL hinzufügen einen URL und einen
Kurznamen ein und klicken Sie dann auf OK.

So erstellen Sie eine neue Vorlage:

1 Klicken Sie auf die Schaltfläche für die Kategorie Vorlagen.

248 Kapitel 9
2 Klicken Sie auf die Schaltfläche Neue Vorlage.
Weitere Informationen zum Erstellen neuer Vorlagen finden Sie „Inhalte über
Vorlagen und Bibliotheken wieder verwenden“ auf Seite 411

Führen Sie einen der folgenden Schritte aus, um ein neues Bibliothekselement
zu erstellen:

• Klicken Sie auf die Schaltfläche für die Kategorie Bibliothek und dann auf
die Schaltfläche Neues Bibliothekselement.
• Wählen Sie in der Entwurfsansicht des Dokumentfensters ein Element
oder eine Textstelle aus und ziehen Sie das Element oder den Text in die
Elementpalette. Es wird ein neues Bibliothekselement mit dem Element oder
Text erstellt, unabhängig davon, welche Art von Element Sie mit der Maustaste
in die Elementpalette gezogen haben.
Weitere Informationen zum Erstellen neuer Bibliothekselemente finden Sie
„Inhalte über Vorlagen und Bibliotheken wieder verwenden“ auf Seite 411.

Elemente verwalten und einfügen 249


250 Kapitel 9
10

KAPITEL 10
Text einfügen und formatieren
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Die Formatierungsfunktionen in Dreamweaver sind denen eines normalen


Textverarbeitungsprogramms sehr ähnlich. Mit dem Untermenü Text >
Formatieren oder dem Popupmenü Format im Eigenschafteninspektor können
Sie den Standardstil (Absatz, Vorformatiert, Überschrift 1, Überschrift 2 usw.)
für einen Textblock definieren. Schriftart, Größe, Farbe und Ausrichtung von
ausgewähltem Text können Sie über das Menü Text oder den
Eigenschafteninspektor ändern. Wenn Sie Formatierung wie fett, kursiv, Code,
unterstrichen usw. anwenden möchten, verwenden Sie das Untermenü Text >
Stil.
Es besteht die Möglichkeit, mehrere Standard-HTML-Tags zu einem einzelnen
Stil, einem so genannten HTML-Stil, zusammenzufassen. So können Sie
beispielsweise eine HTML-Formatierung, die aus einer Kombination
verschiedener Tags und Attribute besteht, manuell anwenden und anschließend
als HTML-Stil in der HTML-Stilpalette speichern. Wenn Sie dann mit dieser
Kombination aus HTML-Tags erneut Text formatieren möchten, können Sie
einfach den gespeicherten Stil aus der HTML-Stilpalette auswählen. HTML-Stile
werden von so gut wie allen Webbrowsern unterstützt und sind im Vergleich zur
manuellen Textformatierung weniger zeitaufwendig.
Bei einem anderen Stil, dem CSS-Stil (Cascading Style Sheets), können Sie Text-
und Seitenformatierung anwenden. Diese Stile bieten weiterhin den Vorteil der
automatischen Aktualisierung. CSS-Stile können direkt im Dokument oder
in einem externen Stylesheet gespeichert werden, wo sie mehr Leistung und
Flexibilität bieten. Wenn Sie ein externes Stylesheet an mehrere Webseiten
anfügen, werden alle Änderungen am Stylesheet automatisch in allen Seiten
wiedergegeben. Der Zugriff auf CSS-Stile ist über die CSS-Stilpalette möglich.

251
Bei der manuellen HTML-Formatierung und bei HTML-Stilen werden
Standard-HTML-Tags (wie beispielsweise b, font und code) verwendet, die
von allen gängigen Webbrowsern unterstützt werden. Bei CSS-Stilen wird die
Formatierung für alle Textstellen in einer bestimmten Klasse definiert oder für ein
bestimmtes Tag (wie beispielsweise h1, h2, p oder li) neu definiert. CSS wird nur
von den folgenden Webbrowsern unterstützt: Netscape Navigator ab Version 4.0
und Microsoft Internet Explorer ab Version 4.0.
CSS-Stile, HTML-Stile und manuelle HTML-Formatierungen können innerhalb
derselben Seite verwendet werden. Die manuelle HTML-Formatierung setzt die
durch einen HTML- oder CSS-Stil vorgegebene Formatierung außer Kraft.
Obwohl sie sehr aufwendig ist, bietet sie daher eine gute Möglichkeit, eine durch
HTML- oder CSS-Stile vorgegebene Formatierung zu ändern. CSS-Stile auf
Seitenbasis setzen externe CSS-Stile außer Kraft. Siehe „CSS-Stylesheets
verwenden“ auf Seite 267.

Text und Objekte einfügen


Fügen Sie in Ihre Seiten Inhalte ein, indem Sie Text eingeben oder einfügen
oder Objekte wie Bilder, Tabellen und Ebenen einfügen.

Führen Sie einen der folgenden Schritte aus, um Text in ein Dokument einzufügen:

• Geben Sie Text direkt im Dokumentfenster ein.


• Kopieren Sie Text aus einer anderen Anwendung in die Zwischenablage,
wechseln Sie zu Dreamweaver, setzen Sie die Einfügemarke in die
Entwurfsansicht des Dokumentfensters und wählen Sie Bearbeiten >
Einfügen. Dreamweaver behält die Textformatierung, die in der anderen
Anwendung zugewiesen wurde, nicht bei. Zeilenumbrüche werden jedoch
beibehalten.

Führen Sie einen der folgenden Schritte aus, um Tabellen, Tabellendaten, Bilder
und andere Objekte in ein Dokument einzufügen:

• Verwenden Sie die Befehle im Menü Einfügen, um die angegebenen Objekte


an der Einfügemarke in das Dokument einzufügen.
• Wählen Sie Fenster > Objekte, um die Objektpalette zu öffnen. Suchen Sie
den gewünschten Objekttyp und klicken Sie darauf bzw. ziehen Sie ihn mit
dem Mauszeiger, um das Objekt im Dokumentfenster einzufügen.
Bei den meisten Objekten wird ein Dialogfeld angezeigt, in dem Sie
aufgefordert werden, Optionen oder eine Datei auszuwählen. Um dieses
Dialogfeld nicht anzuzeigen, wählen Sie Bearbeiten > Voreinstellungen
und klicken Sie dann auf Allgemein. Deaktivieren Sie anschließend die Option
Beim Einfügen von Objekten Dialog anzeigen.

252 Kapitel 10
Anmerkung: Um mehrere aufeinander folgende Leerstellen einzufügen, verwenden
Sie den Befehl Einfügen > Sonderzeichen > Geschütztes Leerzeichen
(<Strg>+<Umschalttaste>+<Leertaste>) oder drücken Sie die <Eingabetaste>. (Arbeiten
Sie mit einer Tabelle, wenn Sie mehrere Elemente untereinander anordnen möchten.)

Tabellendaten werden in ein Dokument importiert, indem Sie die entsprechenden


Dateien (beispielsweise Microsoft Excel-Dateien oder eine Datenbank) als
Textdateien mit Trennzeichen speichern.

So importieren Sie Tabellendaten:

1 Wählen Sie Datei > Importieren > Tabellendaten importieren oder wählen Sie
Einfügen > Tabellendaten.
Das Dialogfeld Tabelle importieren wird eingeblendet.
2 Wählen Sie die gewünschte Datei aus oder geben Sie ihren Namen in das
Textfeld ein.
3 Wählen Sie das Trennzeichen aus, das beim Speichern der Datei als Textdatei
mit Trennzeichen verwendet wurde. Zur Wahl stehen Tabulator, Komma,
Semikolon, Doppelpunkt und Anderes.
• Wenn Sie Anderes wählen, wird neben der Option ein leeres Feld eingeblendet.
Geben Sie das Zeichen ein, das als Trennzeichen verwendet wurde.
4 Verwenden Sie die restlichen Optionen, um die Tabelle zu formatieren oder
zu definieren, in die die Daten importiert werden sollen.
5 Klicken Sie anschließend auf OK.

Datumsangaben einfügen
Dreamweaver stellt ein praktisches Datumsobjekt zur Verfügung, mit dem das
aktuelle Datum in Ihrem bevorzugten Format (mit oder ohne Uhrzeit) eingefügt
werden kann. Darüber hinaus haben Sie die Möglichkeit, das Datum jedes Mal
zu aktualisieren, wenn Sie die Datei speichern.
Anmerkung: Beachten Sie, dass das Datum und die Uhrzeit, die im Dialogfeld Datum
einfügen angezeigt werden, nicht das aktuelle Datum darstellen und auch nicht das
Datum und die Uhrzeit sind, die Besucher Ihrer Website sehen. Sie sind lediglich
Beispiele dafür, wie diese Informationen dargestellt werden.

So fügen Sie das aktuelle Datum in ein Dokument ein:

1 Setzen Sie die Einfügemarke im Dokumentfenster an die Stelle, an der Sie


das Datum einfügen möchten.
2 Führen Sie einen der folgenden Schritte aus:
• Wählen Sie Einfügen > Datum.

Text einfügen und formatieren 253


• Öffnen Sie die Objektpalette, indem Sie auf Fenster > Objekte klicken.
Klicken Sie dann auf der Registerkarte Allgemein auf Datum.
3 Wählen Sie in dem daraufhin angezeigten Dialogfeld ein Format für
den Wochentag, für das Datum und für die Uhrzeit aus.
4 Wenn das eingefügte Datum jedes Mal aktualisiert werden soll, wenn Sie das
Dokument speichern, markieren Sie die Option Beim Speichern automatisch
aktualisieren. Wenn Sie das Datum nach dem Einfügen in reinen Text
umwandeln möchten, der nie aktualisiert wird, deaktivieren Sie diese Option.
5 Klicken Sie auf OK, um das Datum einzufügen.
Tipp: Wenn Sie Beim Speichern automatisch aktualisieren markiert haben,
können Sie das Datum nach dem Einfügen in das Dokument bearbeiten, indem Sie auf
den formatierten Text klicken und anschließend im Eigenschafteninspektor
Datumsformat bearbeiten wählen.

Sonderzeichen
Einige Sonderzeichen werden in HTML durch einen Namen oder eine Zahl
dargestellt, die mit Entität bezeichnet wird. HTML enthält Entitätsnamen für
Zeichen wie das Copyright-Symbol (&copy;) das kaufmännische Und-Zeichen
(&) und das Symbol für Marken (&reg;). Jede Entität hat einen Namen (z. B.
&mdash;) und ein numerisches Gegenstück (z. B. &#151;).

Tipp: HTML verwendet spitze Klammern (<>) im Code. Aus diesem Grund müssen Sie u. U.
Sonderzeichen für „größer als“ oder „kleiner als“ verwenden, damit diese Zeichen von
Dreamweaver nicht als Code interpretiert werden. In diesem Fall verwenden Sie > für
„größer als“ (>) und < für „kleiner als“ (<).

Leider zeigen viele Browser (vor allem ältere Versionen und andere Browser
als Navigator und Internet Explorer) viele dieser benannten Entitäten nicht
korrekt an. In den meisten Browsern werden die üblichen numerischen Entitäten
korrekt angezeigt, doch lässt sich die Zahl einer Entität nicht so leicht merken
wie ihr Name.

Sonderzeichen einfügen

Sie können mehrere Sonderzeichen (in Form von HTML-Entitäten) über die
Registerkarte Zeichen im Dropdownmenü der Objektpalette einfügen. So fügen
Sie ein Sonderzeichen in ein Dokument ein:

1 Setzen Sie die Einfügemarke im Dokumentfenster an der Stelle, an der Sie


ein Sonderzeichen einfügen möchten.
2 Führen Sie einen der folgenden Schritte aus:
• Wählen Sie den Namen des Zeichens im Untermenü Einfügen > Zeichen aus.

254 Kapitel 10
• Öffnen Sie die Objektpalette (mit dem Befehl Fenster > Objekte), wählen
Sie die Registerkarte Zeichen aus dem Dropdownmenü aus und wählen Sie das
gewünschte Zeichen aus.
Es stehen zahlreiche weitere Sonderzeichen zur Verfügung. Um eines davon
auszuwählen, klicken Sie auf Einfügen > Zeichen > Weitere, wählen Sie ein
Zeichen aus und klicken Sie auf OK.

HTML-Quellcode kopieren und in Dreamweaver einfügen


Sie können HTML-Quellcode aus einer anderen Anwendung oder aus der
Codeansicht kopieren und einfügen. Dabei können Sie anhand des verwendeten
Kopier- und Einfügeverfahrens wählen, ob der HTML-Code als Text oder als
Code mit intakten Tags kopiert und eingefügt wird.

So kopieren Sie HTML-Quellcode und fügen diesen in die Codeansicht ein:

1 Kopieren Sie den Code aus einer anderen Anwendung (wie z. B. BBEdit oder
HomeSite) oder aus der Codeansicht oder dem Codeinspektor in
Dreamweaver und setzen Sie die Einfügemarke in die Codeansicht.
2 Wählen Sie Bearbeiten > Einfügen und wählen Sie Entwurfsansicht
aktualisieren aus der Symbolleiste.
Kopieren Sie beispielsweise den HTML-Quellcode für eine Tabelle aus BBEdit
und fügen Sie ihn in die Codeansicht von Dreamweaver ein, um ihn als Tabelle
in der Entwurfsansicht anzuzeigen.
Wenn der HTML-Quellcode als Text erscheinen soll, setzen Sie die Einfügemarke
direkt in die Entwurfsansicht und wählen Sie Bearbeiten > Einfügen, um den
Code als Text einzufügen. Sie können dieses Verfahren wählen, wenn Ihr
Dreamweaver-Dokument Anleitungen zum Schreiben von HTML enthält
und Sie den Code als Text in das Dokument einfügen möchten.

So kopieren Sie HTML-Quellcode und fügen diesen als Quellcode wieder ein:

1 Wählen Sie den Text in einer anderen Anwendung aus und kopieren Sie ihn.
2 Setzen Sie die Einfügemarke in die Entwurfsansicht und wählen Sie
Bearbeiten > Als HTML einfügen.
Sie können auch ein Element (beispielsweise eine Tabelle) in der Entwurfsansicht
auswählen und Bearbeiten > Als HTML kopieren wählen. Anschließend können
Sie es als HTML-Quellcode in eine andere Anwendung einfügen. Weitere
Informationen zum Bearbeiten von HTML-Quellcode finden Sie unter
„Code schreiben und bearbeiten“ auf Seite 366.

Text einfügen und formatieren 255


Listen erstellen
Sie können nummerierte (geordnete) Listen, Listen mit Aufzählungspunkten
(ungeordnete Listen) und Definitionslisten aus bereits vorhandenem Text oder aus
Text erstellen, den Sie neu in das Dokumentfenster eingeben. Definitionslisten
verwenden keine vorgestellten Zeichen wie Aufzählungspunkte oder Zahlen und
werden häufig für Glossare und Beschreibungen verwendet. Listen können auch
mit Unterpunkten erstellt werden. Sie können beispielsweise eine geordnete Liste
oder eine Liste mit Aufzählungspunkten innerhalb einer anderen Liste des
gleichen oder eines anderen Listentyps erstellen.

So erstellen Sie eine neue Liste:

1 Setzen Sie die Einfügemarke in der Entwurfsansicht in die Zeile, in der Sie
eine Liste mit neuen Elementen einfügen möchten.
2 Klicken Sie im Eigenschafteninspektor auf die Schaltfläche Ungeordnete Liste
oder Geordnete Liste oder wählen Sie Text > Liste und dann den gewünschten
Listentyp: Ungeordnete Liste (mit Aufzählungspunkten), Geordnete Liste
(nummeriert) oder Definitionsliste.
Sie können eine Liste auch über das Menü Text in die Codeansicht einfügen,
allerdings fügt Dreamweaver in diesem Fall nur das erste und letzte HTML-
Listen-Tag hinzu und Sie müssen den Code der einzelnen Listenelemente
manuell eingeben.
3 Geben Sie Text der Liste ein. Drücken Sie die Eingabetaste, um einen neuen
Listeneintrag zu erstellen.
4 Drücken Sie zwei Mal auf die Eingabetaste, um die Liste fertig zu stellen.

So erstellen Sie eine Liste mit bereits vorhandenem Text:

1 Wählen Sie die Absätze aus, die in eine Liste umgewandelt werden sollen.
2 Klicken Sie im Eigenschafteninspektor auf die Schaltfläche Ungeordnete
Liste oder Geordnete Liste oder wählen Sie Text > Liste und dann den
gewünschten Listentyp: Ungeordnete Liste, Geordnete Liste oder
Definitionsliste.

So erstellen Sie eine Liste mit Unterpunkten:

1 Wählen Sie die Listenelemente aus, die die Unterpunkte bilden sollen.
2 Klicken Sie im Eigenschafteninspektor auf die Schaltfläche Einzug oder wählen
Sie Text > Einzug.
Dreamweaver rückt den Text ein und erstellt eine separate Liste mit den
HTML-Attributen der ursprünglichen Liste.

256 Kapitel 10
3 Weisen Sie dem eingerückten Text einen neuen Listentyp oder Stil zu,
indem Sie nach dem oben beschriebenen Verfahren vorgehen.

Schrift, Stile, Farbe und Ausrichtung


festlegen
Über die Befehle im Menü Text > Formatieren bzw. die Optionen im
Eigenschafteninspektor können Sie HTML-Textformatierungen auf einen
einzelnen Buchstaben anwenden oder eine ganze Site aufbauen. Durch diese
Art der manuellen Formatierung wird die von HTML- oder CSS-Stilen
vorgegebene Formatierung ersetzt oder außer Kraft gesetzt.
Wenn Sie HTML-Textformatierung anwenden, verwenden Sie den
Eigenschafteninspektor und die Befehle unter Text > Formatieren und Text >
Stil.

Schriften und Stile zuweisen und ändern


Über den Eigenschafteninspektor oder das Menü Text werden die Schriftattribute
des ausgewählten Texts geändert.

So definieren oder ändern Sie Schriftattribute:

1 Wählen Sie die Textstelle aus. Wenn Sie keinen Text markieren, wirkt sich
die Änderung auf den Text aus, den Sie anschließend eingeben.
2 Folgende Optionen stehen zur Auswahl:
• Wenn Sie die Schrift ändern möchten, wählen Sie im Eigenschafteninspektor
oder im Menü Text > Schrift eine Schrift aus.
In Browsern wird der Text mit der ersten Schrift in der Kombination angezeigt,
die auf dem jeweiligen Computer installiert ist. Ist keine der Schriften in der
Kombination installiert, wird der Text im Browser mit der Schrift angezeigt,
die in den Browser-Voreinstellungen angegeben ist. (Siehe auch
„Schriftkombinationen ändern“ auf Seite 260.) Wählen Sie Standard, um
bereits angewandte Schriften zu entfernen. Hiermit wird die Standardschrift
auf den ausgewählten Text angewandt (entweder die Standardschrift des
Browsers oder die Schrift, die dem Tag im CSS-Stylesheet zugewiesen wurde).
• Wenn Sie den Schriftstil ändern möchten, klicken Sie im
Eigenschafteninspektor auf Fett oder Kursiv oder wählen Sie im
Untermenü Text > Stil einen Schriftstil (Fett, Kursiv, Unterstrichen usw.).

Text einfügen und formatieren 257


• Wenn Sie die Schriftgröße ändern möchten, wählen Sie im
Eigenschafteninspektor oder im Untermenü Text > Größe die gewünschte
Größe (1 bis 7).
Bei HTML-Schriftgrößen handelt es sich nicht um bestimmte Punktwerte,
sondern um relative Größen. Benutzer stellen die Punktgröße der
Standardschrift für ihren Browser ein. Diese Schriftgröße wird angezeigt,
wenn Sie im Eigenschafteninspektor oder im Untermenü Text > Größe die
Option Standard oder 3 wählen. Die Größen 1 und 2 sind kleiner als die
Standardschriftgröße, 4 bis 7 sind dagegen größer. Zudem werden Schriften
unter Windows normalerweise größer angezeigt als auf dem Macintosh.
Macintosh Internet Explorer 5 verwendet allerdings dieselbe
Standardschriftgröße wie Windows.
• Wenn Sie den ausgewählten Text vergrößern oder verkleinern möchten,
wählen Sie im Eigenschafteninspektor oder im Menü Text > Vergrößern
oder Text > Verkleinern eine relative Größe (+ bzw. -1 bis + bzw. -7).
Tipp: Um eine einheitliche Schriftgröße zu erzielen, können Sie auch CSS-Stile
verwenden, in denen die Schriftgröße in Pixeln angegeben ist. Weitere Einzelheiten
zu CSS-Stilen finden Sie unter „CSS-Stylesheets verwenden“ auf Seite 267.

Diese Zahlen geben die relative Differenz zur basefont-Größe an.


Der Standardwert für basefont ist 3. Mit dem Wert +4 wird also die
Schriftgröße 3 + 4 = 7 erzielt.7 ist die maximale Schriftgröße. Wenn Sie
versuchen, einen größeren Wert einzustellen, wird die Schrift trotzdem als 7
dargestellt. Dreamweaver zeigt das basefont-Tag (das in den head-Bereich
gehört) nicht an. Die Schriftgröße müsste jedoch im Browser korrekt
dargestellt werden. Um dies auszuprobieren, können Sie die Größe von
zwei Textstellen vergleichen, die auf 3 bzw. +3 eingestellt wurden.

Absätze und Überschriften verwenden


Über das Popupmenü Format im Eigenschafteninspektor oder das Menü Text >
Formatieren können Sie Standardabsatz- und Überschriften-Tags anwenden.
(Verwenden Sie CSS-Stylesheets, um das Erscheinungsbild von Absatz- und
Überschriften-Tags neu zu definieren. Siehe „CSS-Stylesheets verwenden“ auf
Seite 267.)

So wenden Sie ein Absatz- oder Überschriften-Tag an:

1 Setzen Sie die Einfügemarke in den Absatz oder wählen Sie eine Textstelle
im Absatz aus.
2 Wählen Sie im Menü Text > Formatieren oder im Popupmenü Format
des Eigenschafteninspektors eine Option aus:

258 Kapitel 10
• Wählen Sie ein Absatzformat (z. B. Überschrift 1, Überschrift 2,
Vorformatierter Text usw.). Das zum ausgewählten Stil gehörende HTML-Tag
(z. B. h1 für Überschrift 1, h2 für Überschrift 2, pre für vorformatierten Text
usw.) wird auf den gesamten Absatz angewandt.
• Wählen Sie Keine, um einen Absatzstil zu entfernen.

Textfarbe ändern
Sie haben die Möglichkeit, die Farbe von ausgewähltem Text zu ändern.
Die neue Farbe hat Vorrang vor der Textfarbe, die in den Seiteneigenschaften
definiert wurde. (Ist keine Textfarbe in den Seiteneigenschaften eingestellt,
ist die Standardtextfarbe Schwarz.)

So ändern Sie die Textfarbe:

1 Wählen Sie die Textstelle aus.


2 Folgende Optionen stehen zur Auswahl:
• Wählen Sie aus der Palette der browsersicheren Farben eine Farbe, indem Sie
im Eigenschafteninspektor auf den Farbwähler klicken.
• Wählen Sie Text > Farbe. Das Dialogfeld Farbe wird eingeblendet. Wählen Sie
eine Farbe aus und klicken Sie auf OK.
• Geben Sie den Namen der Farbe oder einen Hexadezimalwert direkt in das
entsprechende Feld im Eigenschafteninspektor ein.
• Wenn Sie die Standardtextfarbe ändern möchten, wählen Sie Modifizieren >
Seiteneigenschaften. Siehe „Standardtextfarben festlegen“ auf Seite 162.

So weisen Sie dem Text wieder die Standardfarbe zu:

1 Klicken Sie im Eigenschafteninspektor auf das Farbfeld, um die Palette


der browsersicheren Farben zu öffnen.
2 Klicken Sie auf die Schaltfläche Durchgestrichen (das weiße Quadrat mit einer
roten Linie in der rechten oberen Ecke).

Text ausrichten
Wenn Sie Text auf der Seite ausrichten möchten, verwenden Sie den
Eigenschafteninspektor oder das Menü Text > Ausrichtung. Mit dem Befehl
Text > Ausrichtung > Zentrieren können Sie ein beliebiges Element auf der Seite
zentrieren.

So richten Sie Text aus:

1 Wählen Sie die Textstelle aus, die Sie ausrichten möchten oder setzen Sie
die Einfügemarke an den Anfang des Texts.

Text einfügen und formatieren 259


2 Klicken Sie im Eigenschafteninspektor auf eine Ausrichtungsoption
(Linksbündig, Rechtsbündig oder Zentrieren) oder wählen Sie Text >
Ausrichtung und dann die gewünschte Ausrichtung.

So zentrieren Sie Elemente:

1 Wählen Sie das Element aus, das Sie zentrieren möchten (Bild, Plug-In,
Tabelle oder ein anderes Seitenelement).
2 Wählen Sie Text > Ausrichtung > Zentrieren.
Anmerkung: Sie können ganze Textblöcke ausrichten und zentrieren, jedoch nicht einen
Teil einer Überschrift oder eines Absatzes.

So können Sie Texteinzüge einfügen oder den Einzug wieder entfernen:

1 Wählen Sie den gewünschten Text aus.


2 Klicken Sie im Eigenschafteninspektor auf die Schaltfläche Einzug oder
Negativeinzug oder wählen Sie Text > Einzug bzw. Negativeinzug oder wählen
Sie im Kontextmenü die Option Liste > Einzug bzw. Negativeinzug.
Wenn es sich beim ausgewählten Text um einen Absatz oder eine Überschrift
handelt, wird dadurch das blockquote-Tag angewandt bzw. entfernt. Handelt
es sich beim ausgewählten Text um eine Liste, wird ein zusätzliches ul- oder
ol-Tag hinzugefügt bzw. entfernt.

Schriftkombinationen ändern
Mit dem Befehl Schriftliste bearbeiten definieren Sie die Schriftkombinationen,
die im Eigenschafteninspektor und im Untermenü Text > Schrift angezeigt
werden.
Über Schriftkombinationen wird festgelegt, wie der Text einer Webseite in
einem Browser dargestellt wird. In Browsern wird der Text in der ersten Schrift
der Kombination angezeigt, die auf dem jeweiligen Computer installiert ist.
Ist keine der Schriften in der Kombination installiert, wird der Text im Browser
in der Schrift angezeigt, die in den Voreinstellungen des Browsers angegeben ist.

So ändern Sie Schriftkombinationen:

1 Wählen Sie Text > Schrift > Schriftliste bearbeiten.


2 Wählen Sie aus der Schriftliste oben im Dialogfeld die gewünschte
Schriftkombination aus.
Die Schriften, die zur ausgewählten Kombination gehören, sind in der Liste
Ausgewählte Schriften unten links im Dialogfeld aufgeführt. Die Liste rechts
im Dialogfeld enthält alle Schriften, die im System installiert sind.
3 Folgende Optionen stehen zur Auswahl:

260 Kapitel 10
• Wenn Sie Schriften aus einer Schriftkombination entfernen oder hinzufügen
möchten, klicken Sie auf die Schaltfläche << oder >> zwischen den beiden
Listen Ausgewählte Schriften und Verfügbare Schriften.
• Wenn Sie eine Schriftkombination hinzufügen oder entfernen möchten,
klicken Sie oben im Dialogfeld auf die Schaltflächen mit den Plus- (+) bzw.
Minuszeichen (–).
• Wenn Sie eine Schrift hinzufügen möchten, die nicht auf dem Computer
installiert ist, geben Sie im Textfeld unter der Liste Verfügbare Schriften
den Namen der Schrift ein und klicken Sie auf die Schaltfläche <<, um der
Kombination die Schrift hinzuzufügen. Mit dieser Funktion können Sie
beispielsweise eine Windows-spezifische Schrift angeben, wenn Sie eine
Website auf einem Macintosh entwerfen.
• Wenn Sie die Schriftkombination in der Liste nach oben oder nach unten
verschieben möchten, klicken Sie auf die Pfeilschaltflächen oben im Dialogfeld.

So fügen Sie der Schriftliste eine neue Kombination hinzu:

1 Wählen Sie Text > Schrift > Schriftliste bearbeiten.


2 Wählen Sie aus der Liste Verfügbare Schriften eine Schrift aus und klicken
Sie auf die Schaltfläche <<, um die Schrift in die Liste Ausgewählte Schriften
zu verschieben.
3 Wiederholen Sie Schritt 2 für alle weiteren Schriften in der Kombination.
Wenn Sie eine Schrift hinzufügen möchten, die nicht auf dem Computer
installiert ist, geben Sie im Textfeld unter der Liste Verfügbare Schriften
den Namen der Schrift ein und klicken Sie auf die Schaltfläche <<, um der
Kombination die Schrift hinzuzufügen. Mit dieser Funktion können Sie
beispielsweise eine Windows-spezifische Schrift angeben, wenn Sie eine
Website auf einem Macintosh entwerfen.
4 Wenn Sie alle gewünschten Schriften ausgewählt haben, wählen Sie aus der
Liste Verfügbare Schriften eine generische Schriftfamilie aus. Klicken Sie dann
auf die Schaltfläche <<, um die generische Schriftfamilie in die Liste
Ausgewählte Schriften zu verschieben.
Zu den generischen Schriftfamilien gehören Cursive, Fantasy, Monospace,
Sans-Serif und Serif. Wenn keine der Schriften in der Liste Ausgewählte
Schriften im System des Benutzers installiert ist, wird der Text in der
Standardschrift der jeweiligen generischen Schriftfamilie angezeigt.
Beispielsweise ist die Standardschriftart für Monospace auf den meisten
Computern Courier.

Text einfügen und formatieren 261


Horizontale Linien verwenden
Horizontale Linien sind praktisch, um Informationen übersichtlicher auf Ihrer
Webseite anzuordnen. Auf einer Seite können Sie Text und Objekte mit einer
oder mehreren Linien optisch von einander trennen.

So erstellen Sie eine horizontale Linie:

1 Setzen Sie die Einfügemarke im Dokumentfenster an die Stelle, an der Sie eine
horizontale Linie einfügen möchten.
2 Führen Sie einen der folgenden Schritte aus:
• Wählen Sie Einfügen > Horizontale Linie.
• Wählen Sie Fenster > Objekte, um die Objektpalette zu öffnen und klicken Sie
dann auf die Schaltfläche Horizontale Linie einfügen auf der Registerkarte
Allgemein.

So modifizieren Sie eine horizontale Linie:

1 Wählen Sie die horizontale Linie im Dokumentfenster aus.


2 Wählen Sie Fenster > Eigenschaften, um den Eigenschafteninspektor
zu öffnen und modifizieren Sie dann die gewünschten Eigenschaften.

HTML-Stile zur Formatierung von Text


verwenden
Ein HTML-Stil wird durch einen oder mehrere HTML-Tags (z. B. b, i, font
und center) definiert, die für die Formatierung von Text verwendet werden. Die
HTML 4.0-Spezifikation, die das World Wide Web Consortium (W3C) Anfang
1998 herausgegeben hat, empfiehlt, anstelle von HTML-Formatierungs-Tags
CSS-Stylesheets zu verwenden. In der Praxis werden HTML-Formatierungs-Tags
jedoch von mehr Browsern unterstützt als CSS-Stylesheets. Daher ist davon
auszugehen, dass HTML-Tags auch weiterhin für die Entwicklung von Websites
verwendet werden, zumindest solange 3.0- und ältere Browser noch einen
erheblichen Teil des Volumens im Web ausmachen.
Einzelheiten zur Formatierung mit HTML-Tags finden Sie unter den folgenden
Themen:
• „Schriften und Stile zuweisen und ändern“ auf Seite 257
• „Textfarbe ändern“ auf Seite 259
• „Text ausrichten“ auf Seite 259

262 Kapitel 10
HTML-Tags, mit denen die Struktur des Dokuments definiert wird, nicht dessen
Erscheinungsbild, sind weiterhin wichtiger Bestandteil der HTML-Spezifikation.
Dazu gehören beispielsweise Tags für Überschriften, Absätze und Listen.
Wenn Sie die Schrifteigenschaften einer Seite mit CSS-Stylesheets definieren
möchten, sollten Sie unbedingt Standard-Tags für Überschriften verwenden,
damit die Struktur der Seite auch in Browsern beibehalten wird, die keine CSS-
Stylesheets unterstützen. (Sie können ein Beispiel hierfür sehen, indem Sie
versuchen, die Dreamweaver-Hilfe in einem 3.0-Browser anzuzeigen.) Siehe
„Absätze und Überschriften verwenden“ auf Seite 258.

HTML-Stile verwenden
Mit HTML-Stilen können Sie Text- oder Absatzformatierungen speichern,
die Sie an anderen Stellen in Dokumenten verwenden möchten. Sobald Sie einen
HTML-Stil erstellt haben, der auf einem oder mehreren HTML-Tags basiert,
können Sie diese Formatierung über die HTML-Stilpalette auf beliebige
Textstellen in einem beliebigen Dokument erneut anwenden.

Kontextmenü

Stil löschen

Autom. anw, Neuer Stil

Anders als bei CSS-Stilen wirkt sich die HTML-Stilformatierung nur auf Text aus,
auf den Sie diese Formatierung anwenden, oder auf Text, den Sie mit einem
ausgewählten HTML-Stil erstellen. Wenn Sie die Formatierung eines von Ihnen
erstellten HTML-Stils ändern, wird der Text, den Sie ursprünglich mit diesem Stil
formatiert haben, nicht aktualisiert. Wenn Sie die Formatierung ändern und alle
Textstellen mit dieser Formatierung automatisch aktualisieren möchten, sollten
Sie ein CSS-Stylesheet verwenden (siehe „CSS-Stylesheets verwenden“ auf
Seite 267).
Wenn Sie das HTML-Referenzhandbuch von O'Reilly anzeigen möchten,
das mit Dreamweaver geliefert wird, klicken Sie auf die Schaltfläche Referenz
in der Symbolleiste und dann im Dropdownmenü auf O'Reilly HTML-Referenz.
Über die HTML-Stilpalette können Sie HTML-Stile, die Sie in einer Site
verwenden, aufzeichnen und anschließend gemeinsam mit anderen Benutzern,
lokalen Sites oder Remote-Sites nutzen.

Text einfügen und formatieren 263


Führen Sie einen der folgenden Schritte aus, um die HTML-Stilpalette
anzuzeigen:

• Wählen Sie Fenster > HTML-Stile.


• Klicken Sie auf das Symbol HTML-Stile auf der Launcher-Leiste oder
dem Mini-Launcher.

So zeigen Sie einen vorhandenen HTML-Stil an:

1 Wählen Sie über die HTML-Stilpalette einen Stil aus.


Beachten Sie, dass Absatz-Stil entfernen und Auswahl-Stil entfernen für Text
verwendet wird, auf den bereits ein Stil angewandt wurde. Dies sind jedoch
keine Stile und aus diesem Grund können sie weder angezeigt noch bearbeitet
werden.
2 Klicken Sie bei gedrückter rechter Maustaste (Windows) bzw. bei gedrückter
Strg-Taste (Macintosh) auf einen Stil in der HTML-Stilpalette und wählen Sie
im Kontextmenü die Option Bearbeiten oder doppelklicken Sie auf den
HTML-Stil.
3 Legen Sie im Dialogfeld HTML-Stil definieren die Einstellungen für den
Stil fest.
Mit den Optionen unter Anwenden für legen Sie fest, ob der Stil auf den
ausgewählten Text (Auswahl) oder auf den aktuellen Textblock (Absatz)
angewendet wird. Mit den Optionen unter Beim Anwenden legen Sie fest,
ob die Einstellungen des Stils der ursprünglichen Textformatierung
hinzugefügt (Vorhandenem Stil hinzufügen) oder aus der vorhandene
Formatierung gelöscht und durch die neuen Einstellungen ersetzt werden
sollen (Vorhandenen Stil löschen).

So wenden Sie einen vorhandenen HTML-Stil an:

Wählen Sie über die HTML-Stilpalette einen Stil aus.


• Ist das Kontrollkästchen für Automatisch anwenden unten im Fenster
markiert, klicken Sie einmal auf den Stil.
• Ist das Kontrollkästchen für Automatisch anwenden deaktiviert,
klicken Sie auf den Stil und anschließend auf Anwenden.

So löschen Sie Textformatierungen in einem Dokument:

1 Wählen Sie den formatierten Text aus.


2 Klicken Sie auf der HTML-Stilpalette auf Absatz-Stil entfernen bzw. Auswahl-
Stil entfernen.
Mit Absatz-Stil entfernen werden sämtliche Formatierungen aus dem aktuellen
Textblock im Dokument entfernt. Mit Auswahl-Stil entfernen werden
sämtliche Formatierungen aus dem ausgewählten Text entfernt.

264 Kapitel 10
Anmerkung: Sie können mit Absatz-Stil entfernen und Auswahl-Stil entfernen eine
beliebige Formatierung entfernen. Dabei spielt es keine Rolle, wie die ursprüngliche
Formatierung angewandt wurde (ob z. B. über die HTML-Stilpalette oder den
Eigenschafteninspektor).

So entfernen Sie einen Stil aus der HTML-Stilpalette:

1 Deaktivieren Sie auf der HTML-Stilpalette das Kontrollkästchen Automatisch


anwenden.
2 Wählen Sie einen HTML-Stil aus.
3 Klicken Sie auf das Symbol Stil löschen (Papierkorb) in der unteren rechten
Ecke des Fensters.

So erstellen Sie einen neuen HTML-Stil auf Grundlage von vorhandenem Text:

1 Wählen Sie im Dokument die Textstelle aus, auf deren Formatierung der neue
HTML-Stil basieren soll. Sie können den Text auch neu eingeben. Verwenden
Sie den Eigenschafteninspektor, um die Formatierung anzuzeigen und
anzuwenden.
2 Klicken Sie in der HTML-Stilpalette auf das Symbol Neuer Stil
(das Plus Zeichen) in der rechten unteren Ecke.
3 Benennen Sie den Stil im Dialogfeld HTML-Stil definieren und passen
Sie gegebenenfalls die Formatierung an.
• Legen Sie fest, ob der HTML-Stil auf den ausgewählten Text oder den
gesamten Absatz angewandt werden soll. Beachten Sie, dass sich ein Absatzstil
auf den gesamten Textblock auswirkt, in dem sich die Einfügemarke befindet,
unabhängig davon, welcher Text tatsächlich ausgewählt ist.
• Legen Sie fest, ob der HTML-Stil zusätzlich zu dem vorhandenen Stil
(CSS oder HTML) des ausgewählten Textes oder Absatzes angewandt oder ob
die Formatierung der Auswahl oder des Absatzes durch den neuen HTML-Stil
ersetzt werden soll. Beachten Sie dabei die Hierarchie für das Anwenden von
Stilen: HTML-Stile haben Vorrang vor CSS-Stilen und CSS-Stile haben
Vorrang vor externen CSS-Stilen. Siehe „CSS-Stylesheets verwenden“ auf
Seite 267.
Beachten Sie, dass die Formatierungsoptionen in der HTML-Stilpalette
mit denen im Eigenschafteninspektor übereinstimmen.
4 Klicken Sie auf OK.

So erstellen Sie einen neuen HTML-Stil auf Grundlage eines vorhandenen HTML-
Stils:

1 Stellen Sie sicher, dass im Dokumentfenster kein Text ausgewählt ist.


2 Wählen Sie aus der HTML-Stilpalette einen Stil aus und führen Sie dann einen
der folgenden Schritte durch:
• Klicken Sie auf das Dreieck in der rechten oberen Ecke der Palette, um das
Dropdown-Kontextmenü anzuzeigen.

Text einfügen und formatieren 265


• Klicken Sie bei gedrückter rechter Maustaste (Windows) bzw. bei gedrückter
Strg-Taste (Macintosh) auf den Stil und wählen Sie dann im Kontextmenü
die Option Duplizieren.
Das Dialogfeld HTML-Stil definieren wird eingeblendet. Klicken Sie
auf Löschen, um die Standardoptionen wieder einzustellen.
3 Führen Sie die Schritte 3 und 4 aus, die in den Anleitungen zum Erstellen
eines neuen Stils auf Grundlage von vorhandenem Text beschrieben sind.

So erstellen Sie einen völlig neuen HTML-Stil:

1 Klicken Sie in der HTML-Stilpalette auf das Symbol Neuer Stil. Alternativ
können Sie Text > HTML-Stile > Neuer Stil wählen.
Das Dialogfeld HTML-Stil definieren wird eingeblendet.
2 Führen Sie die Schritte 3 und 4 aus, die in den Anleitungen zum Erstellen
eines neuen Stils auf Grundlage von vorhandenem Text beschrieben sind.
Klicken Sie auf Löschen, um die Optionen im Dialogfeld auf ihre
Standardwerte zurückzusetzen.
3 Klicken Sie auf OK.

So bearbeiten Sie einen vorhandenen HTML-Stil:

1 Stellen Sie sicher, dass im Dokumentfenster kein Text ausgewählt ist.


2 Stellen Sie sicher, dass in der HTML-Stilpalette das Kontrollkästchen
für Automatisch anwenden deaktiviert ist.
Ist dies nicht der Fall, wird der HTML-Stil angewendet, wenn Sie ihn
in der HTML-Stilpalette auswählen.
3 Klicken Sie in der HTML-Stilpalette bei gedrückter rechter Maustaste
(Windows) bzw. bei gedrückter Strg-Taste (Macintosh) auf den Stil und wählen
Sie dann im Kontextmenü die Option Bearbeiten.
Das Dialogfeld HTML-Stil definieren wird eingeblendet. Klicken Sie
auf Löschen, um die Standardoptionen wieder einzustellen.
Wenn Sie einen HTML-Stil bearbeiten, führt Dreamweaver keine
automatische Aktualisierung des Textes durch, der zuvor mit dem HTML-Stil
formatiert war.Wenn Sie die mit einem Stil zugewiesene Formatierung
aktualisieren möchten, verwenden Sie ein CSS-Stylesheet. Siehe „CSS-
Stylesheets verwenden“ auf Seite 267.

So nutzen Sie HTML-Stile gemeinsam mit anderen Sites oder Benutzern:

1 Wählen Sie Fenster > Dateien der Site, um das Sitefenster in der Sitedateien-
Ansicht zu öffnen.

266 Kapitel 10
2 Öffnen Sie im rechten Fensterbereich den Stammordner der Site und
anschließend den Ordner Library.
Sie sehen eine Datei mit dem Namen styles.xml. Diese Datei enthält alle
HTML-Stile für die Site. Sie können diese Datei genau wie alle anderen
Dateien in der Site bereitstellen, abrufen, einchecken, auschecken und
kopieren. Darüber hinaus können Sie für die Datei styles.xml Design Notes
erstellen. Beachten Sie, dass Sie die Datei styles.xml zunächst auschecken
müssen, bevor Sie einen Stil für eine Remote-Site erstellen oder bearbeiten
können.
Weitere Informationen über diese Optionen finden Sie unter „Remote-Sites
einrichten“ auf Seite 132.

CSS-Stylesheets verwenden
Ein Stil besteht aus mehreren Formatierungsattributen und steuert das
Erscheinungsbild eines Textbereichs in einem einzelnen Dokument. Mit einem
CSS-Stylesheet können Sie die Attribute mehrerer Dokumente gleichzeitig
steuern. Das Stylesheet enthält sämtliche Stile für ein Dokument. Der Vorteil
bei der Verwendung eines CSS-Stylesheets gegenüber eines HTML-Stils besteht
darin, dass durch die Verknüpfung zu mehreren Dokumenten bei einer
Aktualisierung oder Änderung eines CSS-Stils die Formatierung sämtlicher
Dokumente, die auf diesem Stylesheet basieren, ebenfalls automatisch
aktualisiert wird.
Angenommen, Sie verwalten eine sehr umfangreiche Website wie Yahoo
oder Macromedia.com. Mit CSS-Stylesheets können Sie Schrift- oder
Formatierungsänderungen schnell und präzise der gesamten Site oder vielen
Seiten gleichzeitig zuweisen. Darüber hinaus können Sie mit CSS-Stilen viele
Attribute steuern, die mit reinem HTML-Code nicht gesteuert werden können.
Sie können beispielsweise benutzerspezifische Aufzählungspunkte für Ihre Listen
definieren und unterschiedliche Schriftgrößen und -einheiten (Pixel, Punkt usw.)
verwenden. Wenn Sie CSS-Stile verwenden und Schriftgrößen in Pixeln festlegen,
können Sie ein einheitlicherer Seitenlayout und ein einheitlicheres Aussehen
in den verschiedenen Browsern erzielen.
CSS-Stile gibt es bereits seit geraumer Zeit, doch viele Webdesigner und -autoren
verwenden sie nur ungern, da sie nicht von allen Browsern unterstützt werden.
Wenn die Besucher Ihrer Website jedoch mit Browsern arbeitet, die CSS-Stile
unterstützen (4.0 und höhere Versionen), sollten Sie sich die Leistung und
Kontrolle von CSS-Stilen zu Nutze machen.

Text einfügen und formatieren 267


CSS-Stile werden durch ihren Namen oder durch ein HTML-Tag angegeben,
sodass Sie nach dem Ändern eines Stilattributs die implementierte Änderung
unmittelbar in allen Textstellen sehen können, auf die sich dieser Stil bezieht.
CSS-Stile in HTML-Dokumenten können die meisten der gängigen
Textformatierungsattribute steuern, wie beispielsweise Schriftart, Schriftgröße
und Ausrichtung. Weiterhin können CSS-Stile spezifische HTML-Attribute
definieren, wie Positionierung, Spezialeffekte und Maus-Rollovers.
CSS-Stylesheets werden im head-Abschnitt eines Dokuments angegeben. CSS-
Stile können Folgendes definieren: die Formatierungsattribute für HTML-Tags,
die Textbereiche, die durch ein Attribut class definiert werden, oder Text, der die
CSS-Spezifikation erfüllt. Dreamweaver erkennt Stile, die in vorhandenen
Dokumenten definiert sind, sofern diese Stile den CSS-Richtlinien entsprechen.
CSS-Stylesheets können für 4.0- und neuere Browser eingesetzt werden.
Internet Explorer 3.0 erkennt zwar einige CSS-Stylesheets, bei den meisten
älteren Browsern werden sie jedoch ignoriert.
Drei Typen von CSS-Stylesheets sind in Dreamweaver verfügbar:
• Benutzerdefinierte CSS-Stile entsprechen in etwa den Formatvorlagen in einer
Textverarbeitung. Es gibt jedoch keine Unterscheidung zwischen Zeichen- und
Absatzstilen. Benutzerdefinierte CSS-Stile können auf einen beliebigen
Textbereich oder Textblock angewandt werden. Wird der CSS-Stil auf einen
Textblock (wie z. B. einen ganzen Absatz oder eine ungeordnete Liste)
angewandt, wird dem Block-Tag ein class-Attribut hinzugefügt (z. B. p
class="meinStil" oder ul class="meinStil"). Wird der CSS-Stil auf
einen Textbereich angewandt, werden die span-Tags mit dem class-Attribut
um den ausgewählten Text eingefügt. Siehe „Benutzerdefinierte CSS-Stile
(Class) anwenden“ auf Seite 274.
• Mit HTML-Tag-Stilen wird die Formatierung für ein bestimmtes Tag neu
definiert, z. B. h1. Wenn Sie einen CSS-Stil für das h1-Tag erstellen oder
ändern, werden sämtliche mit dem h1-Tag formatierten Textstellen sofort
aktualisiert.
Anmerkung: Gehen Sie beim Ändern der Definition von Tags in einem verknüpften CSS
umsichtig vor, da sich diese Änderung auf das Layout vieler Seiten auswirken kann. Wenn
Sie beispielsweise das table-Tag neu definieren, um Tabellen ein bestimmtes Aussehen
zu verleihen, wird dabei auch das Layout anderer Seiten geändert, die Tabellen enthalten.

• Mit CSS-Selektorstilen wird die Formatierung für eine bestimmte Tag-


Kombination neu definiert (td h2 gilt beispielsweise, wenn eine h2-Kopfzeile
innerhalb einer Tabellenzelle angezeigt wird) oder für alle Tags, die ein
bestimmtes Attribut id enthalten (beispielsweise gilt #meinStil für alle Tags,
die das Attribut-Wert-Paar ID="meinStil" enthalten).
Durch die manuelle HTML-Formatierung wird die durch einen CSS-
(oder HTML-) Stil vorgegebene Formatierung außer Kraft gesetzt. Damit CSS-
Stile die Formatierung eines Absatzes steuern, müssen Sie alle manuellen HTML-
Formatierungen oder HTML-Stile entfernen.

268 Kapitel 10
Obwohl Sie eine unbegrenzte Anzahl der durch die CSS1-Spezifikation
definierten CSS-Stilattribute in Dreamweaver einstellen können, werden nicht
alle Attribute im Dokumentfenster angezeigt. Die Attribute, die nicht angezeigt
werden, sind im Dialogfeld Stildefinition mit einem Sternchen (*) markiert.
Beachten Sie, dass einige der CSS-Stilattribute, die mit Dreamweaver festgelegt
werden können, in Microsoft Internet Explorer 4.0 und Netscape Navigator 4.0
anders dargestellt und dass manche Stilattribute zurzeit von keinem Browser
unterstützt werden.
Anmerkung: Wenn Sie das CSS-Referenzhandbuch von O'Reilly anzeigen möchten,
das mit Dreamweaver geliefert wird, klicken Sie auf die Schaltfläche Referenz in der
Symbolleiste und klicken Sie dann im Popupmenü auf O'Reilly CSS-Referenz.

CSS-Stileigenschaften
Das World Wide Web Consortium ist für die Cascading Style Sheets-Spezifikation
(CSS1) zuständig. Diese Spezifikation definiert Stileigenschaften, die das
Erscheinungsbild von Elementen in Webseiten steuern (z. B. Schriftart, Farbe,
Auffüllung, Ränder und Wortabstand). Sie können jede CSS1-Eigenschaft in
Dreamweaver einstellen.
In Internet Explorer ab Version 4.0 können Sie mit einer Skriptsprache, wie z. B.
JavaScript oder VBScript, Positionierungs- und CSS-Stileigenschaften von
Elementen ändern, nachdem die Seite geladen wurde. In Netscape Navigator ab
Version 4.0 können Sie zwar die Positionierungseigenschaften ändern, nachdem
die Seite geladen wurde, nicht jedoch die CSS-Stileigenschaften.

Externe CSS-Stylesheets oder Verknüpfungen mit externen


CSS-Stylesheets erstellen
Bei einem CSS-Stylesheet handelt es sich um eine externe Textdatei, die Stil- und
Formatierungsspezifikationen enthält. Wenn Sie ein externes CSS-Stylesheet
bearbeiten, wirken sich die Bearbeitungen auf alle Dokumente aus, die mit dem
CSS-Stylesheet verknüpft sind. Sie können die in einem Dokument enthaltenen
CSS-Stile exportieren, um ein neues CSS-Stylesheet zu erstellen, und ein externes
Stylesheet anfügen bzw. eine Verknüpfung zu einem externen Stylesheet
herstellen, um die darin enthaltenen Stile anzuwenden.

Text einfügen und formatieren 269


Die Dreamweaver-Hilfe besteht aus HTML-Seiten, die ein verknüpftes Stylesheet
namens help.css verwenden. Sie können diese Datei in einem Texteditor öffnen,
um den Code für eine CSS-Stildefinition zu sehen (die Datei befindet sich im
Ordner Help/html). Öffnen Sie eine der Themendateien (diese Dateien beginnen
mit einer Zahl) um zu sehen, wie das CSS-Stylesheet über das link-Tag mit dem
Dokument verknüpft ist und wie bestimmte CSS-Stile angewandt werden. Sie
können die Datei help.css auch in Ihren lokalen Stammordner kopieren und die
darin enthaltenen Stile auf eine Testseite anwenden.

So fügen Sie ein externes CSS-Stylesheet an:

1 Wählen Sie Fenster > CSS-Stile oder klicken Sie im Mini-Launcher auf
das Symbol CSS-Stile.
2 Klicken Sie bei gedrückter rechter Maustaste (Windows) bzw. bei gedrückter
Strg-Taste (Macintosh) in die CSS-Stilpalette und wählen Sie im Kontextmenü
die Option Stylesheet anfügen. Sie können auch auf das Symbol Stylesheet
anfügen unten in der CSS-Stilpalette klicken.
3 Geben Sie im Dialogfeld Stylesheet auswählen den Dateinamen im Feld URL
ein oder wählen Sie die zu verwendende Datei aus.
4 Wählen Sie ein Dokument oder einen Pfad aus (der Pfad wird relativ zum
Stammordner angegeben). Siehe „Speicherorte und Pfade von Dokumenten“
auf Seite 388.
5 Klicken Sie auf Öffnen. Das Stylesheet wird an das Dreamweaver-Dokument
angefügt und die Stile werden in der CSS-Stilpalette angezeigt.

So erstellen Sie ein externes CSS-Stylesheet oder eine Verknüpfung zu einem


externen CSS-Stylesheet:

1 Wählen Sie Fenster > CSS-Stile oder klicken Sie im Mini-Launcher auf
das Symbol CSS-Stile.
2 Klicken Sie bei gedrückter rechter Maustaste (Windows) oder bei gedrückter
Strg-Taste (Macintosh) in die CSS-Stilpalette und wählen Sie im Kontextmenü
die Option Stylesheet bearbeiten.
3 Klicken Sie im Dialogfeld Stylesheet bearbeiten auf Verknüpfen.
4 Das Dialogfeld Externes Stylesheet verknüpfen wird eingeblendet. Führen Sie
einen der folgenden Schritte aus:
• Klicken Sie auf Durchsuchen (Windows) bzw. Wählen (Macintosh), um ein
externes CSS-Stylesheet auszuwählen, oder geben Sie im Feld Datei/URL
den Pfad des Stylesheets ein. (Das Durchsuchen bzw. Wählen der Datei wird
empfohlen, da auf diese Weise gewährleistet ist, dass der korrekte Pfad zum
Stylesheet verwendet wird.)

270 Kapitel 10
• Erstellen Sie ein neues externes CSS-Stylesheet, indem Sie einen neuen
Dateinamen eingeben, der im angegebenen Pfad noch nicht vorhanden ist.
Der Dateiname muss die Erweiterung .css haben.
5 Wählen Sie die Verknüpfungs- oder Importoption, um das Tag festzulegen
und zu erstellen, mit dem das externe CSS-Stylesheet an die Dokumente
angefügt werden soll, und klicken Sie dann auf OK.
Über die Importoption werden die Informationen des externen CSS-
Stylesheets in das aktuelle Dokument integriert, während über die
Verknüpfungsoption auf die Informationen zugegriffen wird und diese
übergeben werden, ohne sie dabei zu übertragen. Sowohl die Import- als auch
die Verknüpfungsoption bewirken, dass alle Stile des externen CSS-Stylesheets
im aktuellen Dokument zur Verfügung stehen. Die Verknüpfungsoption bietet
jedoch mehr Funktionen und kann auch in mehr Browsern eingesetzt werden.
Das externe CSS-Stylesheet wird in der Stilliste im Dialogfeld Stylesheet
bearbeiten angezeigt, wobei der Bezeichner (Verknüpfung oder Import)
hinter dem Namen des Stylesheets steht. Führen Sie die folgenden Schritte aus,
um die Stile im externen CSS-Stylesheet zu erstellen oder zu bearbeiten.
6 Wählen Sie im Dialogfeld Stylesheet bearbeiten den Namen des externen
Stylesheets aus und klicken Sie auf Bearbeiten.
Das Dialogfeld Stylesheet bearbeiten wird für das Stylesheet angezeigt.
7 Klicken Sie auf Neu, um Stile im externen CSS-Stylesheet zu definieren.
8 Definieren Sie den neuen Stil im Dialogfeld Neuer Stil. Siehe „CSS-Stile in
Dreamweaver erstellen“ auf Seite 272.
9 Klicken Sie auf Speichern, wenn Sie den Stil definiert haben.

Externe CSS-Stylesheets bearbeiten


Wenn Sie Stile in einem CSS-Stylesheet ändern, das bereits den Text in einem
Dokument steuert, werden diese Änderungen umgehend an allen Textstellen
vorgenommen, die von diesem CSS-Stylesheet gesteuert werden. Ihre
Änderungen wirken sich auf alle Dokumente aus, die mit dem Stylesheet
verknüpft sind.

So bearbeiten Sie ein externes CSS-Stylesheet:

1 Öffnen Sie eines der Dokumente, das mit dem zu ändernden externen CSS-
Stylesheet verknüpft ist.
2 Führen Sie einen der folgenden Schritte aus:

Text einfügen und formatieren 271


• Wählen Sie Fenster > CSS-Stile oder klicken Sie im Mini-Launcher auf das
Symbol CSS-Stile. Klicken Sie bei gedrückter rechter Maustaste (Windows)
bzw. bei gedrückter Strg-Taste (Macintosh) auf das gewünschte Stylesheet in
die CSS-Stilpalette und wählen Sie im Kontextmenü die Option Stylesheet
bearbeiten.
• Wählen Sie Text > CSS-Stile > Stylesheet bearbeiten.
3 Wählen Sie im Dialogfeld Stylesheet bearbeiten den Namen des externen
Stylesheets aus und klicken Sie auf Bearbeiten.
Daraufhin wird ein zweites Dialogfeld mit dem Namen Stylesheet bearbeiten
angezeigt, in dem die Stile des externen Stylesheets aufgeführt sind. Wählen Sie
den zu bearbeitenden Stil aus.
4 Bearbeiten Sie den Stil. Siehe „CSS-Stile in Dreamweaver erstellen“ auf
Seite 272.
5 Klicken Sie auf Speichern, wenn Sie den Stil bearbeitet haben.

CSS-Stile in Dreamweaver erstellen


Mit CSS-Stilen können Sie die Formatierung von HTML-Tags oder eines durch
das class-Attribut gekennzeichneten Textbereichs automatisieren.

So erstellen Sie einen CSS-Stil:

1 Wählen Sie Fenster > CSS-Stile und klicken Sie bei gedrückter rechter
Maustaste (Windows) bzw. bei gedrückter Strg-Taste (Macintosh) in die CSS-
Stilpalette. Klicken Sie dann im Popupmenü auf Neuer Stil. Sie können auch
auf das Symbol Neuer Stil unten in der CSS-Stilpalette klicken.
2 Wählen Sie einen der folgenden CSS-Stiltypen:
erstellt einen Stil, der als class-
Benutzerdefinierten Stil erstellen (Klasse)
Attribut auf einen Textbereich oder Textblock angewandt werden kann.
HTML-Tag neu definieren definiert die Standardformatierung eines
bestimmten HTML-Tags neu. Beachten Sie, dass Sie das Layout vieler Seiten
ändern können, wenn Sie ein Tag neu definieren.
CSS-Selektor verwenden definiert die Formatierung für eine bestimmte Tag-
Kombination oder für alle Tags, die ein bestimmtes 1d-Attribut enthalten.
3 Geben Sie einen Namen, ein Tag oder einen Selektor für den neuen Stil ein.
• Die Namen benutzerdefinierter CSS-Stile (Classes) müssen mit einem
Punkt beginnen. Wenn Sie den Punkt nicht eingeben, fügt Dreamweaver
ihn automatisch hinzu. Diese Namen können aus einer beliebigen
Kombination von Buchstaben und Ziffern bestehen, doch das erste
Zeichen nach dem Punkt muss ein Buchstabe sein. Beispiel: .meinHead1.

272 Kapitel 10
• Wenn Sie einen HTML-Tag-Stil neu definieren möchten, geben Sie ein
HTML-Tag ein oder wählen Sie im Popupmenü ein Tag aus.
• Geben Sie bei einem CSS-Selektor Kriterien ein, die für einen Selektor gültig
sind (beispielsweise td oder #meinStil), oder wählen Sie im Popupmenü
einen Selektor aus. Die im Menü verfügbaren Selektoren sind a:active, a:hover,
a:link und a:visited.
4 Wählen Sie aus, wo der Stil definiert wird: Neue Stylesheet-Datei (extern)
oder Nur dieses Dokument.
5 Klicken Sie auf OK. Das Dialogfeld Stildefinition wird eingeblendet.
6 Wählen Sie die Formatierungseinstellungen für den neuen CSS-Stil.
Wenn bestimmte Attribute für den Stil nicht relevant sind, lassen Sie die
entsprechenden Felder leer.
Attribute, die nicht im Dokumentfenster angezeigt werden, sind im Dialogfeld
Stildefinition mit einem Sternchen (*) versehen. Einige der CSS-Stilattribute,
die in Dreamweaver festgelegt werden können, werden in Microsoft Internet
Explorer 4.0 und Netscape Navigator 4.0 anders dargestellt und manche
Stilattribute werden zurzeit von keinem Browser unterstützt.
7 Klicken Sie auf OK oder Übernehmen.
Informationen zu bestimmten Einstellungen finden Sie in der Dreamweaver-Hilfe
unter den folgenden Themen:
• Stildefinition für die Kategorie Typ
• Stildefinition für die Kategorie Hintergrund
• Stildefinition für die Kategorie Block
• Stildefinition für die Kategorie Feld
• Stildefinition für die Kategorie Rahmen
• Stildefinition für die Kategorie Liste
• Stildefinition für die Kategorie Positionierung
• Stildefinition für die Kategorie Erweiterungen
Wenn Sie einen benutzerdefinierten Stil (Class) erstellen, wird er in der CSS-
Stilpalette und im Untermenü Text > CSS-Stile angezeigt. HTML-Tag-Stile
und CSS-Selektorstile werden nicht in der CSS-Stilpalette angezeigt, da sie nicht
angewandt werden können. Ihre Auswirkungen werden jedoch automatisch
im Dokumentfenster angezeigt, wenn das Tag oder der Selektor vorkommt.

Text einfügen und formatieren 273


Benutzerdefinierte CSS-Stile (Class) anwenden
Benutzerdefinierte CSS-Stile (Class) sind die einzigen CSS-Stile, die auf einen
beliebigen Text im Dokument angewandt werden können, unabhängig davon,
welche Tags den Text steuern. In der CSS-Stilpalette werden die Namen aller
verfügbaren Stile angezeigt.
Verwechseln Sie benutzerdefinierte Stile nicht mit Optionen wie Fett oder
Variable im Untermenü Text > Stil. Bei diesen Optionen handelt es sich um
vordefinierte Formatierungsattribute, die bestimmten HTML-Tags entsprechen.
Wenn Sie zwei oder mehr CSS-Stile auf eine Textstelle anwenden, kann ein
Konflikt zwischen diesen Stilen entstehen, der zu unerwarteten Ergebnissen
führen kann. Siehe „Konflikte zwischen Stilen“ auf Seite 275.

So wenden Sie einen benutzerdefinierten CSS-Stil an:

1 Wählen Sie Fenster > CSS-Stile.


2 Wählen Sie die Textstelle aus, auf die Sie einen CSS-Stil anwenden möchten.
Setzen Sie die Einfügemarke in einen Absatz, um den Stil auf den ganzen
Absatz anzuwenden.
Wenn der CSS-Stil auf ein bestimmtes Tag angewandt werden soll, wählen Sie
das Tag im Tag-Selektor unten links im Dokumentfenster aus. Sie können auch
das Tag im Tag-Selektor auswählen und mit der rechten Maustaste (Windows)
bzw. bei gedrückter Strg-Taste (Macintosh) klicken, um das Kontextmenü
einzublenden, und anschließend Class einrichten wählen, um eine Liste der
zuzuweisenden CSS-Stile anzuzeigen.
Wenn Sie einen Textbereich innerhalb eines einzigen Absatzes auswählen,
wirkt sich der CSS-Stil nur auf den ausgewählten Textbereich aus.
3 Klicken Sie in der CSS-Stilpalette auf den Namen eines Stils.
Sie können CSS-Stile auch anwenden, indem Sie im Untermenü Text > CSS-Stile
den Namen eines Stils wählen oder indem Sie mit der rechten Maustaste
(Windows) bzw. bei gedrückter Strg-Taste (Macintosh) klicken und dann im
Untermenü CSS-Stile des Kontextmenüs den Namen des Stils wählen. Das Tag
der aktuellen Auswahl wird neben dem Befehl mit dem Namen des
benutzerdefinierten Stils angezeigt.

Stile zum Erstellen eines CSS-Stylesheets exportieren


Sie können Stile aus einem Dokument exportieren, um ein neues CSS-Stylesheet
zu erstellen. Anschließend können Sie andere Dokumente mit diesem Stylesheet
verknüpfen und ihnen diese Stile zuweisen.

274 Kapitel 10
So exportieren Sie CSS-Stile aus einem Dokument, um ein CSS-Stylesheet
zu erstellen:

1 Wählen Sie Datei > Exportieren > CSS-Stile exportieren oder wählen Sie
Text > Stylesheet exportieren. Das Dialogfeld Stile als CSS-Datei exportieren
wird geöffnet.
2 Geben Sie einen Namen für den Stil ein und klicken Sie auf Speichern. Der Stil
wird als CSS-Stylesheet gespeichert.

Konflikte zwischen Stilen


Wenn Sie zwei oder mehr CSS-Stile auf eine Textstelle anwenden, kann ein
Konflikt zwischen diesen Stilen entstehen, der zu unerwarteten Ergebnissen
führen kann. Beim Anwenden von Stilattributen in Browsern gelten die folgenden
Regeln:
• Werden zwei Stile auf denselben Text angewandt, dann werden alle Attribute
beider Stile im Browser angezeigt, es sei denn, bestimmte Attribute stehen
miteinander in Konflikt. Dies ist beispielsweise der Fall, wenn ein Stil die
Textfarbe Rot vorgibt, der andere jedoch Blau.
• Wenn die Attribute von zwei Stilen, die auf denselben Text angewandt werden,
miteinander in Konflikt stehen, wird im Browser das Attribut des innersten
Stils angezeigt (dies ist der Stil, der dem Text selbst am nächsten ist).
• Wenn ein direkter Konflikt vorliegt, haben die Attribute von
benutzerdefinierten Stilen (Stile, die mit dem class-Attribut angewandt
werden), Vorrang vor den Attributen von HTML-Tag-Stilen.
Angenommen, der für h1 definierte Stil im folgenden Beispiel gibt Schrift, Größe
und Farbe für alle h1-Absätze an. Der benutzerdefinierte Stil .Blau, der auf diesen
Absatz angewandt wird, hat jedoch Vorrang vor der Farbeinstellung des Stils h1.
Der zweite benutzerdefinierte Stil .Rot hat wiederum Vorrang vor .Blau, da er
sich innerhalb des Stils .Blau befindet.
<h1><span class="Blau">Dieser Absatz wird vom benutzerdefinierten
Stil .Blau sowie vom HTML-Tag-Stil h1 gesteuert.
<span class="Rot">Dieser Satz wird jedoch vom Stil .Rot gesteuert.
</span>
Hier gilt wieder der Stil .Blau.</span></h1>

Text einfügen und formatieren 275


CSS-Stilpalette verwenden
Mit der CSS-Stilpalette können Sie benutzerdefinierte CSS-Stile auf die
aktuelle Auswahl anwenden. In der CSS-Stilpalette werden ausschließlich
benutzerdefinierte CSS-Stile (Class) angezeigt. HTML-Tag- und CSS-
Selektorstile erscheinen nicht in der CSS-Stilpalette, da diese Stile automatisch auf
alle Textbereiche angewandt werden, die vom angegebenen Tag oder Selektor
gesteuert werden. (Wenn Sie wieder verwendbare, aber nicht aktualisierbare und
anpassbare Stile lediglich ausschneiden und einfügen möchten, müssen Sie die
HTML-Stilpalette verwenden.)
Wählen Sie Fenster > CSS-Stile, um die CSS-Stilpalette anzuzeigen.
Anwenden auf zeigt das Tag der aktuellen Auswahl an. Sie können im Popupmenü
ein anderes Tag auswählen.
Neuer Stilöffnet das Dialogfeld Neuer Stil. Erstellen Sie einen neuen Stil für
ein bestimmtes Dokument oder erstellen Sie ein neues externes Stylesheet.
Stylesheet anfügen öffnet das Dialogfeld Stylesheet-Datei auswählen. Wählen
Sie ein externes Stylesheet aus, das Sie an das aktuelle Dokument anfügen
möchten.
Stylesheet bearbeiten öffnet das Dialogfeld Stylesheet bearbeiten. Mit diesem
Dialogfeld können Sie alle Stile im aktuellen Dokument oder in einem externen
Stylesheet bearbeiten.
Siehe auch „CSS-Stylesheets verwenden“ auf Seite 267.
Anmerkung: Klicken Sie bei gedrückter rechter Maustaste (Windows) bzw. bei
gedrückter Strg-Taste (Macintosh) in die CSS-Stilpalette, um ein Kontextmenü zu öffnen,
in dem sich die Befehle Bearbeiten, Duplizieren, Löschen, Neuen Stil anwenden,
Stylesheet bearbeiten und Stylesheet anfügen befinden.

Einstellungen für CSS-Stile festlegen


Mit den Voreinstellungen für CSS-Stile wird gesteuert, wie Dreamweaver den
Code für die Definition von CSS-Stilen schreibt. CSS-Stile können in einer
Kurzschriftform geschrieben werden, die von einigen „Programmierern“
bevorzugt wird. Einige ältere Browser-Versionen können die Kurzschrift allerdings
nicht korrekt interpretieren. Wenn Sie keine Kurzschrift zum Schreiben von Stilen
verwenden möchten, brauchen Sie die Voreinstellungen für CSS-Stile nicht
zu ändern.
Wählen Sie Bearbeiten > Voreinstellungen und dann die Kategorie CSS-Stile,
um die Voreinstellungen für CSS-Stylesheet-Formate anzuzeigen. Siehe auch
„CSS-Stylesheets verwenden“ auf Seite 267.
Kurzschrift verwenden für legt fest, welche CSS-Stilattribute in Kurzschrift
geschrieben werden.

276 Kapitel 10
Beim Bearbeiten von CSS-Stilen Kurzschrift verwenden: legt fest, ob bereits
vorhandene Stile in Kurzschrift neu geschrieben werden. Wenn Sie Falls Original
in Kurzschrift wählen, bleiben alle Stile unverändert. Wählen Sie dagegen Gemäß
obiger Einstellungen, werden die Stile in Kurzschrift neu geschrieben, allerdings
nur die Attribute, deren Kontrollkästchen unter Kurzschrift verwenden für
markiert sind.

CSS-Stile in HTML-Tags konvertieren


Wenn Sie die Textformatierung (wie Familie, Größe, Farbe und Auszeichnung
der Schrift) mit CSS-Stilen definiert haben und später diese Formatierung in
einem 3.0-Browser anzeigen möchten, können Sie den Befehl Datei >
Konvertieren > 3.0 Browser-kompatibel verwenden, um so viele
Stilinformationen wie möglich in HTML-Tags zu konvertieren.
Anmerkung: Nicht alle CSS-Stile können in HTML konvertiert werden, da mit HTML-
Tags nicht alle Attribute erzielt werden können, die mit CSS möglich sind.

So konvertieren Sie eine auf CSS-Stilen basierende Datei in eine 3.0-Browser-


kompatible Datei:

1 Wählen Sie Datei > Konvertieren > 3.0 Browser-kompatibel.


2 Wählen Sie im angezeigten Dialogfeld die Option CSS-Stile in HTML-
Markup.
Wenn Sie die Option Ebene in Tabelle wählen, werden alle Ebenen durch
eine einzige Tabelle ersetzt, die die ursprüngliche Positionierung beibehält.
Die CSS-Stile werden, sofern möglich, durch HTML-Tags ersetzt, z. B. b
und font. CSS-Markup, das nicht in HTML konvertiert werden kann,
wird entfernt. Unter „CSS-Stile in HTML-Markup – Konvertierungstabelle“
auf Seite 278 wird im Einzelnen beschrieben, welche Stile konvertiert und
welche entfernt werden.
3 Klicken Sie auf OK. Die konvertierte Datei wird in einem neuen, unbenannten
Fenster geöffnet.
Anmerkung: Sie müssen die Konvertierung jedes Mal durchführen, wenn Sie die
Originaldatei ändern, damit die 3.0-kompatible Datei aktualisiert wird. Aus diesem Grund
sollten Sie diese Prozedur erst durchführen, nachdem Sie die Originaldatei fertig gestellt
haben.

Text einfügen und formatieren 277


CSS-Stile in HTML-Markup – Konvertierungstabelle
Wenn Sie Datei > Konvertieren > 3.0 Browser-kompatibel wählen, werden die
CSS-Attribute, die in der folgenden Tabelle aufgeführt sind, in HTML-Markup
konvertiert. (Siehe „CSS-Stile in HTML-Tags konvertieren“ auf Seite 277). Nicht
aufgeführte Attribute werden entfernt.

CSS-Attribut Konvertiert in

color FONT COLOR

font-family FONT FACE

font-size FONT SIZE="[1-7]"

font-style: oblique I

font-style: italic I

font-weight B

list-style-type: square UL TYPE="square"

list-style-type: circle UL TYPE="circle"

list-style-type: disc UL TYPE="disc"

list-style-type: upper-roman OL TYPE="I"

list-style-type: lower-roman OL TYPE="i"

list-style-type: upper-alpha OL TYPE="A"

list-style-type: lower-alpha OL TYPE="a"

list-style UL oder OL mit TYPE,


wie zutreffend

text-align P ALIGN oder DIV ALIGN,


wie zutreffend

text-decoration: underline U

text-decoration: line-through STRIKE

Rechtschreibung prüfen
Mit dem Befehl Rechtschreibung prüfen im Menü Text können Sie die
Rechtschreibung im aktuellen Dokument überprüfen. Dieser Befehl ignoriert
HTML-Tags und Attributwerte.

278 Kapitel 10
Standardmäßig verwendet die Rechtschreibprüfung ein Wörterbuch für
amerikanisches Englisch. Sie können das Wörterbuch jedoch ändern, indem Sie
Bearbeiten > Voreinstellungen > Allgemein wählen und dann im Popupmenü ein
anderes Wörterbuch auswählen. Wörterbücher für andere Sprachen können von
der Website des Dreamweaver Support Centers heruntergeladen werden.

Dialogfeld Rechtschreibprüfung
Mit den folgenden Optionen im Dialogfeld Rechtschreibprüfung können Sie
die Rechtschreibung eines Dokuments überprüfen (wählen Sie Text >
Rechtschreibung prüfen, um das Dialogfeld zu öffnen):
Zu Persönlich hinzufügen fügt das nicht erkannte Wort in das persönliche
Wörterbuch ein. Wenn Sie Wörter aus dem persönlichen Wörterbuch entfernen
möchten, bearbeiten Sie die Datei Personal.dat mit einem Texteditor. Diese Datei
befindet sich im Ordner Dreamweaver 4/Configuration/Dictionaries.
Ignorieren ignoriert dieses Vorkommen des nicht erkannten Wortes.
Alles ignorieren ignoriert alle Vorkommen des nicht erkannten Wortes.
Ändern ersetzt dieses Vorkommen des nicht erkannten Wortes durch den Text,
den Sie in das Feld Ändern in eingeben oder durch die Auswahl in der Liste
Vorschläge.
Alles ändern ersetzt alle Vorkommen des nicht erkannten Worts auf dieselbe
Weise.

Text, Tags und Attribute suchen und


ersetzen
Sie können das aktuelle Dokument, ausgewählte Dateien, einen Ordner oder eine
ganze Site nach den folgenden Elementen durchsuchen: Text, von bestimmten
Tags eingeschlossener Text oder HTML-Tags und -Attribute. Beachten Sie, dass
Sie unterschiedliche Befehle für die Suche nach Dateien und nach Text (und/oder
HTML) in Dateien verwenden müssen: Mit Auf lokaler Site lokalisieren und Auf
Remote-Site lokalisieren wird nach Dateien gesucht, während mit Bearbeiten >
Suchen und ersetzen nach Text und Tags innerhalb von Dateien gesucht wird.

So suchen Sie nach Text und/oder HTML innerhalb von Dokumenten:

1 Folgende Optionen stehen zur Auswahl:


• Klicken Sie in der Entwurfsansicht im Dokument- oder Sitefenster
auf Bearbeiten > Suchen und ersetzen.
• Klicken Sie bei gedrückter rechter Maustaste (Windows) bzw. bei gedrückter
Strg-Taste (Macintosh) in die Codeansicht und dann im Kontextmenü auf
Suchen und ersetzen.

Text einfügen und formatieren 279


2 Daraufhin wird das Dialogfeld Suchen und ersetzen angezeigt. Geben Sie
im Feld Suchen in an, welche Dateien durchsucht werden sollen:
• Wählen Sie Aktuelles Dokument, um den Suchvorgang auf das aktive
Dokument zu beschränken. Diese Option steht nur zur Verfügung, wenn Sie
den Befehl Suchen und ersetzen im Dokumentfenster oder im Kontextmenü
der Codeansicht gewählt haben.
• Wählen Sie Aktuelle Site, um alle HTML-Dokumente, Bibliotheksdateien
und Textdokumente in der aktuellen Site zu durchsuchen. Nachdem Sie
Aktuelle Site gewählt haben, wird der Name der aktuellen Site rechts neben
dem Popupmenü angezeigt. Wenn Sie nicht die angezeigte Site durchsuchen
möchten, wählen Sie im Sitefenster im Popupmenü der aktuellen Sites die
gewünschte Site aus.
• Wählen Sie Ausgewählte Dateien, um den Suchvorgang auf die Dateien und
Ordner zu beschränken, die im Sitefenster ausgewählt sind. Diese Option steht
nur zur Verfügung, wenn Sie den Befehl Suchen und ersetzen wählen, während
das Sitefenster aktiv (d. h. vor dem Dokumentfenster) ist.
• Wählen Sie Ordner, um den Suchvorgang auf eine bestimmte Dateigruppe
zu beschränken. Nachdem Sie Ordner gewählt haben, klicken Sie auf das
Ordnersymbol, um den gewünschten Ordner auszuwählen.
3 Geben Sie unter Suchen nach an, wonach Sie suchen möchten.
• Wählen Sie HTML-Quelle, um nach bestimmten Textzeichenfolgen im
HTML-Quellcode zu suchen. Siehe „HTML-Quellcode-Suchläufe“ auf
Seite 281.
• Wählen Sie Text, um nach bestimmten Textzeichenfolgen im
Dokumentfenster zu suchen. Dabei wird HTML-Code, der die Zeichenfolge
unterbricht, ignoriert. Bei einer Suche nach der schwarze Hund würden also
sowohl der schwarze Hund als auch der <i>schwarze</i> Hund gefunden.
• Wählen Sie Text (erweitert), um nach bestimmten Textzeichenfolgen zu
suchen, die sich entweder innerhalb oder außerhalb von Tags befinden.
Angenommen, Ihr Dokument enthält den nachfolgenden HTML-Code,
dann wird bei der Suche nach der Textzeichenfolge bemüht außerhalb des i-
Tags nur das zweite Auftreten des Wortes bemüht gefunden: Peter
<i>bemüht</i> sich, seine Arbeit pünktlich zu erledigen, aber er
schafft es nicht immer. Er bemüht sich sehr. Siehe „Textstellen
suchen, die in spezifischen Tags enthalten sind“ auf Seite 283.
• Wählen Sie Tag, um nach bestimmten Tags, Attributen und Attributwerten zu
suchen, wie z. B. nach allen td-Tags, deren Attribut valign auf top eingestellt
ist. Siehe „HTML-Tags und -Attribute suchen“ auf Seite 282.

280 Kapitel 10
Anmerkung: Durch Drücken von <Strg>+<Eingabetaste> oder
<Umschalttaste>+<Eingabetaste> (Windows) bzw. <Strg>+<Zeilenschalter>,
<Umschalttaste>+<Zeilenschalter> oder <Befehlstaste>+<Zeilenschalter> (Macintosh)
können Sie Zeilenumbrüche innerhalb der Suchfelder einfügen. Auf diese Weise
können Sie nach einem Absatz marken suchen. Stellen Sie sicher, dass bei dieser
Suche das Kontrollkästchen Unterschiede bei Leerraum ignorieren deaktiviert ist,
wenn Sie keine regulären Ausdrücke verwenden. Beachten Sie, dass hiermit ein
besonderes Zeichen und nicht ein Zeilenumbruch gesucht wird. So wird z. B. das <br>-
Tag oder das <p>-Tag nicht gefunden. Absatzmarken werden in der Entwurfsansicht als
Leerraum und nicht als Zeilenumbrüche dargestellt.

4 Wählen Sie die folgenden Optionen, um die Suche einzuschränken oder


zu erweitern:
• Groß-/Kleinschreibung beachten bewirkt, dass nur Text gefunden wird, dessen
Groß- oder Kleinschreibung dem gesuchten Text genau entspricht. Wenn Sie
beispielsweise den Text das große Rennen suchen, wird der Text Das Große
Rennen nicht gefunden.

Anmerkung: Unterschiede bei Leerraum ignorieren bewirkt, dass alle nicht


druckbaren Zeichen als ein einziges Leerzeichen interpretiert werden. Wenn Sie diese
Option markieren, entspricht dieses Wort zwar der Zeichenfolge dieses Wort,
nicht jedoch der Zeichenfolge diesesWort. Wenn Sie das Kontrollkästchen Reguläre
Ausdrücke verwenden markiert haben, steht diese Option nicht zur Verfügung. Bei
regulären Ausdrücken müssen Sie explizit angeben, dass nicht druckbare Zeichen
ignoriert werden sollen. Beachten Sie, dass die Tags <p> und <br> nicht als Leerraum
gelten.

• Reguläre Ausdrücke verwenden bewirkt, dass bestimmte Zeichen


(beispielsweise ?, *, \w und \b) in der Textzeichenfolge als Operatoren für
reguläre Ausdrücke interpretiert werden. Wenn Sie zum Beispiel nach der
Textzeichenfolge der b\w*\b Hund suchen, wird sowohl der braune Hund als
auch der bellende Hund gefunden. Siehe „Reguläre Ausdrücke“ auf
Seite 285.
Anmerkung: Wenn Sie in der Codeansicht Änderungen am Dokument vornehmen und
anschließend versuchen, andere Elemente als Quellcode zu suchen und zu ersetzen,
erscheint eine Meldung, dass Dreamweaver vor dem Suchvorgang zunächst die beiden
Ansichten synchronisiert. Weitere Informationen zum Synchronisieren von Ansichten
finden Sie unter „Codeansicht (oder Codeinspektor) verwenden“ auf Seite 362.

HTML-Quellcode-Suchläufe
Wählen Sie im Dialogfeld Suchen und ersetzen die Option HTML-Quelle,
um bestimmte Textzeichenfolgen im HTML-Quellcode zu suchen. Wenn Sie
zum Beispiel den Text schwarze Hund suchen, werden im folgenden Code
zwei Entsprechungen gefunden (im Attribut alt und im ersten Satz):
<img src="barnaby.gif" width="100" height="100"
alt="Barnaby, der schwarze Hund."><br>
Wir haben mehrere schwarze Hunde im Park gesehen. Der schwarze
<a href="barnaby.html">Hund</a> heißt Barnaby.

Text einfügen und formatieren 281


Die Zeichenfolge schwarze Hund ist zwar auch im zweiten Satz enthalten,
hier wird sie jedoch von einem Hyperlink unterbrochen und entspricht daher
nicht genau dem gesuchten Text.
Unter „Text, Tags und Attribute suchen und ersetzen“ auf Seite 279 wird Schritt
für Schritt beschrieben, wie Sie eine Suche durchführen.

HTML-Tags und -Attribute suchen


Wählen Sie im Dialogfeld Suchen und ersetzen die Option Tag, um bestimmte
Tags, Attribute oder Attributwerte zu suchen. Sie können beispielsweise nach
allen img-Tags suchen, die nicht das Attribut alt haben. Informationen zu den
verschiedenen Suchvorgängen finden Sie unter „Text, Tags und Attribute suchen
und ersetzen“ auf Seite 279.

So suchen Sie nach bestimmten Tags:

1 Wählen Sie Bearbeiten > Suchen und ersetzen und geben Sie an, welche
Dateien durchsucht werden sollen (siehe „Text, Tags und Attribute suchen und
ersetzen“ auf Seite 279).
2 Klicken Sie im Popupmenü Suchen nach auf Spezifisches Tag.
3 Wählen Sie ein spezifisches Tag im Popupmenü neben dem Popupmenü
Suchen nach aus oder wählen Sie [beliebiges Tag].
Wenn Sie nur nach den Tags des angegebenen Typs suchen möchten, klicken
Sie auf die Schaltfläche mit dem Minuszeichen (–) und lesen Sie bei Punkt 6
weiter. Lesen Sie anderenfallsbei Punkt 4 weiter.
4 Wählen Sie eine der folgenden Optionen, um den Suchvorgang
einzuschränken:
• Wählen Sie Mit Attribut, um ein Attribut auszuwählen, das im Tag enthalten
sein muss. Sie können einen bestimmten Wert für das Attribut angeben oder
[beliebiger Wert] wählen.
• Wählen Sie Ohne Attribut, um ein Attribut auszuwählen, das nicht im Tag
enthalten sein darf. Wählen Sie diese Option, wenn Sie beispielsweise alle IMG-
Tags suchen möchten, die nicht das Attribut ALT enthalten.
• Wählen Sie Mit, um anzugeben, dass das Tag ein bestimmtes Element
enthalten muss. Beim Code <b><font face="Arial">heading 1</font></
b> befindet sich beispielsweise das font-Tag im b-Tag.
• Wählen Sie Ohne, um anzugeben, dass das Tag ein bestimmtes Element nicht
enthalten darf.
• Wählen Sie Innerhalb des Tags, um anzugeben, dass sich das gesuchte Tag
innerhalb eines bestimmten anderen Tags befinden muss.

282 Kapitel 10
• Wählen Sie Außerhalb des Tags, um anzugeben, dass das gesuchte Tag sich
nicht innerhalb eines bestimmten anderen Tags befinden darf.
5 Klicken Sie auf die Schaltfläche mit dem Pluszeichen (+) und wiederholen
Sie Punkt 4, um die Suche noch weiter einzuschränken.
6 Starten Sie die Suche:
• Wählen Sie Weitersuchen, um die nächste Stelle im aktuellen Dokument
zu markieren, an der der gesuchte Text gefunden wird.
• Wenn Sie Alle suchen wählen, wird eine Liste erstellt, die alle Entsprechungen
des gesuchten Textes im aktuellen Dokument enthält.
• Klicken Sie auf Weitersuchen, um das nächste Vorkommen des gesuchten Texts
im aktuellen Dokument hervorzuheben. Wenn kein Vorkommen gefunden
wird, wird das nächste Dokument geöffnet, das den Suchtext enthält.
• Klicken Sie auf Alle suchen, um alle Vorkommen des Suchtexts im aktuellen
Dokument zu finden oder (beim Durchsuchen eines Ordners oder einer Site)
eine Liste der Dokumente zu erstellen, die den Suchtext enthalten.

Textstellen suchen, die in spezifischen Tags enthalten sind


Wählen Sie im Dialogfeld Suchen und ersetzen die Option Text (erweitert),
um Textzeichenfolgen zu suchen, die sich entweder innerhalb oder außerhalb
bestimmter Tags befinden. Wenn Sie beispielsweise nach dem Wort Unbenannt
zwischen den <title>-Tags suchen, werden alle unbenannten Seiten in der Site
gefunden. Informationen zu den verschiedenen Suchvorgängen finden Sie unter
„Text, Tags und Attribute suchen und ersetzen“ auf Seite 279.

So führen Sie eine erweiterte Textsuche durch:

1 Wählen Sie Bearbeiten > Suchen und ersetzen und geben Sie an, welche
Dateien durchsucht werden sollen (siehe „Text, Tags und Attribute suchen und
ersetzen“ auf Seite 279).
2 Wählen Sie im Popupmenü Suchen nach die Option Text (erweitert).
3 Geben Sie im Textfeld neben dem Popupmenü Suchen nach den Text ein,
den Sie suchen möchten.
Geben Sie zum Beispiel Unbenannt ein.
4 Wählen Sie entweder Innerhalb des Tags oder Außerhalb des Tags und
wählen Sie dann im Popupmenü rechts daneben ein Tag aus.
Wählen Sie beispielsweise Innerhalb des Tags und dann das Tag title.

Text einfügen und formatieren 283


5 Klicken Sie auf die Schaltfläche mit dem Pluszeichen (+), wenn Sie die Suche
auf Tags mit bestimmten Attributen beschränken möchten.
Da das <title>-Tag keine Attribute enthält, benötigen Sie diese Option nicht,
um alle unbenannten Seiten der Site zu finden.
6 Klicken Sie auf Weitersuchen, um das nächste Dokument zu öffnen, das den
gesuchten Text enthält, oder auf Alle suchen, um eine Liste der Dokumente
zu erstellen, die den gesuchten Text enthalten.

Suchmuster speichern
Mit der Schaltfläche Abfrage speichern (gekennzeichnet durch ein
Diskettensymbol) im Dialogfeld Suchen und ersetzen können Sie Suchmuster
für die spätere Wiederverwendung speichern. Das Speichern eines Suchlaufs
empfiehlt sich vor allem dann, wenn Sie regelmäßig dieselbe Suche durchführen
und Sie das Suchmuster nicht jedes Mal wieder neu angeben möchten. Sie können
beispielsweise die mit einem anderen visuellen HTML-Editor erstellten nicht-
konformen Tags entfernen oder bestätigen, dass alle Bilder in einer Datei die
Attribute height, width und alt aufweisen, bevor Sie das Dokument für das
Web freigeben.

So speichern Sie ein Suchmuster:

1 Legen Sie die Parameter für den Suchvorgang fest. Informationen hierzu finden
Sie unter „Text, Tags und Attribute suchen und ersetzen“ auf Seite 279.
Wenn Sie eine Tag- oder eine erweiterte Textsuche durchführen, lesen Sie
auch die Abschnitte „HTML-Tags und -Attribute suchen“ auf Seite 282
oder „Textstellen suchen, die in spezifischen Tags enthalten sind“ auf Seite 283.
Hier wird genauer beschrieben, wie Sie zusätzliche Suchparameter definieren.
2 Klicken Sie auf die Schaltfläche Abfrage speichern (diese Schaltfläche ist mit
einer Diskette gekennzeichnet).
Standardmäßig werden Abfragen im Unterordner Configuration/Queries
im Dreamweaver-Anwendungsordner gespeichert.
3 Geben Sie im angezeigten Dialogfeld einen aussagekräftigen Dateinamen
für die Abfrage ein und klicken Sie auf Speichern.
Wenn Sie mit dem Suchmuster beispielsweise alle img-Tags suchen, die nicht
das Attribut alt enthalten, könnten Sie als Dateinamen für die Abfrage
img_kein_alt.dwr eingeben. Suchabfragen erhalten die Erweiterung dwq;
Ersetzungsabfragen erhalten die Erweiterung dwr.

So rufen Sie ein gespeichertes Suchmuster wieder auf:

1 Wählen Sie Bearbeiten > Suchen und ersetzen.

284 Kapitel 10
2 Klicken Sie auf die Schaltfläche Abfrage laden (diese Schaltfläche ist mit einem
Ordnersymbol gekennzeichnet).
Das Dialogfeld Abfrage laden wird geöffnet und zeigt automatisch den Ordner
Configuration/Queries an. Sie können zu einem anderen Ordner wechseln,
wenn Sie die Abfragen nicht im Standardordner gespeichert haben.
3 Wählen Sie eine Abfragedatei aus und klicken Sie auf Öffnen.
Im Dialogfeld Suchen und ersetzen können Sie sowohl .dwq-Dateien als auch
.dwr-Dateien öffnen.
4 Klicken Sie auf Weitersuchen, Alle suchen, Ersetzen oder Alle ersetzen,
um nach der angegebenen Zeichenfolge zu suchen.

Reguläre Ausdrücke
Reguläre Ausdrücke sind Muster, die bestimmte Zeichenkombinationen im Text
beschreiben. Mit regulären Ausdrücken können Sie im Suchvorgang bestimmte
Konzepte definieren, wie beispielsweise „Sätze, die mit dem Wort 'Die' beginnen“
oder „Attributwerte, die eine Zahl enthalten“. In der folgenden Tabelle werden
die Sonderzeichen in regulären Ausdrücken sowie ihre Bedeutung aufgelistet.
Weiterhin enthält die Tabelle konkrete Beispiele.
Wenn Sie eine Textzeichenfolge suchen möchten, die eines der aufgelisteten
Sonderzeichen enthält, stellen Sie dem Sonderzeichen einen Schrägstrich voran.
Angenommen, Sie möchten das Sternchen im folgenden Satz suchen: Dabei
gelten bestimmte Bedingungen*. In diesem Fall könnte das Suchmuster
folgendermaßen aussehen: Bedingungen\*. Wenn Sie dem Sternchen keinen
Schrägstrich voranstellen, werden alle Vorkommen von „Bedingungen“
im Text gefunden, nicht nur die, auf die ein Sternchen folgt (außerdem werden
die Begriffe „Bedingunge“, „Bedingungenn“ und „Bedingungennn“ gefunden).

Zeichen Entspricht Beispiel

^ Anfang der Eingabe oder Zeile ^T entspricht „T“ in „Tanzen und


Singen“, jedoch nicht in „Onkel
Toms Hütte“

$ Ende der Eingabe oder Zeile h$ entspricht „h“ in „hoch“,


nicht jedoch in „Höhe“

* Das voranstehende Zeichen 0 Mal um* entspricht „um“ in „Raum“,


oder mehrmals „umm“ in „summen“ und „u“ in
„Kugel“

+ Das voranstehende Zeichen 1 Mal um+ entspricht „um“ in „Raum“ und


oder mehrmals „umm“ in „summen“, es entspricht
jedoch keiner Zeichenfolge in
„Kugel“

? Das voranstehende Zeichen bl?au entspricht „blau“ in


höchstens 1 Mal (d. h., das „tiefblau“ und „bau“ in „vorbauen“,
voranstehende Zeichen ist es entspricht jedoch keiner
optional). Zeichenfolge in „schlau“ oder
„Umlaut“

Text einfügen und formatieren 285


Zeichen Entspricht Beispiel

. Ein einziges Zeichen außer .ar entspricht „tar“ und „rar“


Zeilenvorschub im Satz „ein Star ist rar“

x|y Entweder x oder y FF0000|0000FF entspricht


„FF0000“ in BGCOLOR=#FF0000
und „0000FF“ in FONT
COLOR=#0000FF
{n} Genau n Vorkommen des e{2} entspricht „ee“ in „leer“ und
voranstehenden Zeichens den beiden ersten „e“ in
„Seeelefant“, es entspricht jedoch
keiner Zeichenfolge in „Geld“

{n,m} Mindestens n und höchstens m F{2,4} entspricht „FF“ in


Vorkommen des voranstehenden „#FF0000“ und den ersten vier
Zeichens „F“ in „#FFFFFF“

[abc] Beliebige der in Klammern [e-g] entspricht „e“ in „Bett“,


eingeschlossenen Zeichen. „f“ in „Fluss“ und „g“ in „ganz“
Verwenden Sie einen Bindestrich,
um einen Zeichenbereich
anzugeben ([a-f] entspricht
beispielsweise [abcdef]).

[^abc] Beliebige nicht in den Klammern [^aeiou] entspricht „r“ in


eingeschlossene Zeichen. „orange“, „b" in „buchen“ und „k“
Verwenden Sie einen Bindestrich, in „ok!“
um einen Zeichenbereich
anzugeben ([^a-f] entspricht
beispielsweise [^abcdef]).

\b Eine Wortabgrenzung \bb entspricht „b“ in „buchen“,


(beispielsweise ein Leerzeichen es entspricht jedoch nichts in
oder ein Zeilenumbruch) „Lorbeer“ oder „Snob“

\B Eine Abgrenzung, jedoch keine \Bb entspricht „b“ in „Lorbeer“,


Wortabgrenzung es entspricht jedoch nichts in
„buchen“

\d Eine beliebige Ziffer. Entspricht [0- \d entspricht „3“ in „C3PO“


9]. und „2“ in „Apartment 2G“

\D Eine beliebiges Zeichen, das keine \D entspricht „S“ in „900S“


Ziffer ist Entspricht [^0-9]. und „Q“ in „Q45“

\f Formularvorschub

\n Zeilenvorschub

\r Zeilenumbruch

\s Ein beliebiges, einzelnes, nicht \sbuchen entspricht „buchen“ in


druckbares Zeichen, „jetzt buchen“, es entspricht jedoch
beispielsweise Leerzeichen, nichts in „verbuchen“
Tabulator, Formularvorschub oder
Zeilenvorschub

\S Ein beliebiges, einzelnes, \Sbuchen entspricht „buchen“ in


druckbares Zeichen „verbuchen“, es entspricht jedoch
nichts in „jetzt buchen“

\t Ein Tabulator

\w Ein beliebiges alphanumerisches g\w* entspricht „graue“ in „der


Zeichen, einschließlich Unterstrich. graue Hund“ und sowohl „große“
Entspricht [A-Za-z0-9_]. als auch „graue“ in „der große
graue Hund“

286 Kapitel 10
Zeichen Entspricht Beispiel

\W Ein beliebiges Zeichen, nicht \W entspricht „&“ in „Hinz & Kunz“


jedoch alphanumerisch. Entspricht und „%“ in „100 %“
[^A-Za-z0-9_].

<Strg+ Absatzmarken Stellen Sie sicher,


Eingabetaste> dass Sie beim Durchführen dieser
oder Suche das Kontrollkästchen
<Umschalttaste Unterschiede bei Leerraum
+Eingabetaste> ignorieren deaktivieren, wenn
(Windows) Sie keine regulären Ausdrücke
bzw. <Strg+ verwenden. Beachten Sie, dass
Zeilenschalter>, dies einem besonderen Zeichen
<Umschalttaste und nicht einem Zeilenumbruch
+Zeilenschalter entspricht. So entspricht es z. B.
> oder nicht dem Tag <br> oder dem Tag
<Befehlstaste+ <p>. Absatzmarken werden im
Zeilenschalter> Dokumentfenster als Leerraum und
(Macintosh) nicht als Zeilenumbrüche
dargestellt.

Verwenden Sie Klammern, um Gruppen innerhalb des regulären


Ausdrucks zu bilden und später aufzurufen. Verwenden Sie $1, $2, $3 usw.
(das Dollarzeichen im Feld Suchen, den Schrägstrich im Feld Ersetzen) um
auf die erste, zweite, dritte usw. eingeklammerte Gruppe zu verweisen. Wenn
Sie beispielsweise nach „(\d+)\/(\d+)\/(\d+)“ suchen und diese Zeichenfolge durch
„$2/$1/$3“ ersetzen, werden Datum und Monat in einem Datum vertauscht,
das Schrägstriche enthält (so wird das amerikanische Datumsformat in das
europäische Datumsformat umgewandelt).

Text einfügen und formatieren 287


288 Kapitel 10
11

KAPITEL 11
Bilder einfügen
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

In Webseiten werden im Allgemeinen drei Grafikdateiformate verwendet: GIF,


JPEG und PNG. Derzeit werden nur die Dateiformate GIF und JPEG von
den meisten Browsern vollständig unterstützt. Microsoft Internet Explorer
ab Version 4.0 und Netscape Navigator ab Version 4.04 unterstützen die Anzeige
von PNG-Grafiken nur teilweise. Wenn sich Ihre Website also nicht nur an
Besucher wendet, deren Browser das PNG-Format unterstützt, sollten Sie GIF-
oder JPEG-Bilder verwenden.
GIF-Dateien (Graphic Interchange Format) verwenden maximal 256 Farben.
Das GIF-Format ist besonders gut für Bilder geeignet, die nicht kontinuierliche
Farbtöne oder große Bereiche mit flachen Farben enthalten, wie es z. B. bei
Navigationsleisten, Schaltflächen, Symbolen, Logos oder anderen Bildern mit
kontinuierlichen Farbtönen und Farben der Fall ist. GIF-Bilder können mit
einem transparenten Hintergrund erstellt werden. Bei Interlaced-GIFs werden
die Bilder beim Laden in den Browser allmählich deutlich. Animierte GIF-
Grafiken bestehen aus einer Folge einzelner GIF-Bilder, die in einer Datei
gespeichert sind.
Das JPEG-Format (Joint Photographic Experts Group) eignet sich am besten
für Fotos und Bilder mit kontinuierlichen Farbtönen, da JPEG-Dateien Millionen
von Farben enthalten können. JPEG-Dateien sind in der Regel größer als GIF-
und PNG-Dateien. Je höher die Qualität des JPEG-Bildes ist, desto größer wird
die Datei und desto länger dauert die Übertragung. Oft kann durch
Komprimieren der JPEG-Datei ein guter Ausgleich zwischen Bildqualität
und Dateigröße erzielt werden.

289
Das PNG-Format (Portable Network Group) ist ein patentfreier Ersatz für GIF-
Dateien. Dateien in diesem Format unterstützen Bilder mit indizierten Farben,
Graustufen und Echtfarben sowie einen Alphakanal zur Transparenzdarstellung.
PNG ist das programmeigene Dateiformat von Macromedia Fireworks. In PNG-
Dateien bleiben alle ursprünglichen Daten für Ebenen, Vektoren, Farben und
Effekte (wie z. B. Schlagschatten) erhalten und alle Elemente sind stets voll
bearbeitbar. Die Dateien müssen die Erweiterung .png haben, damit Macromedia
Dreamweaver sie als PNG-Dateien erkennt.
Sie können GIF-, JPEG- und PNG-Bilder in Dreamweaver-Dokumente
einfügen. Bilder können nicht nur auf einer Seite, sondern auch in eine Tabelle,
ein Formular oder eine Ebene eingefügt werden.
Beim Hinzufügen von Bildern können Sie diese direkt im Dokumentfenster
auswählen und modifizieren. Sie können beispielsweise den
Eigenschafteninspektor verwenden, um ein Bild mit Hyperlinks zu versehen,
einem Bild einen Rahmen hinzuzufügen, die Größe eines Bildes festzulegen,
ein Bild mit Leerraum zu umgeben und die Ausrichtung festzulegen. Wenn Sie
interaktive Grafiken wie beispielsweise Rollover-Bilder, Navigationsleisten oder
Imagemaps erstellen möchten, verwenden Sie Dreamweaver-Verhalten.
Um Arbeistabläufe zu rationalisieren, können Sie im Dialogfeld Voreinstellungen
von Dreamweaver einen bevorzugten Bildeditor (beispielsweise Fireworks)
festlegen. Wenn ein Bildeditor festgelegt ist, können Sie den Editor während der
Arbeit mit Dreamweaver starten und Bilder bearbeiten. Wenn Sie Fireworks als
bevorzugten Editor verwenden, können Sie Bearbeitungen in Fireworks
vornehmen und mit einem einfachen Mausklick das Bild in der Dreamweaver-
Datei aktualisieren. (Weitere Informationen über die Verwendung von Fireworks
und Dreamweaver finden Sie „Integration von Dreamweaver und Fireworks“.)
Neben dem Einfügen von Bildern auf einer Seite können Sie auch ein
Hintergrundbild für eine Seite festlegen. Siehe „Hintergrundbild oder Seitenfarbe
definieren“ auf Seite 161. Wenn Sie überlappende Bilder wünschen, fügen Sie
diese in unterschiedliche Ebenen ein. Siehe „Dynamische Ebenen“.

Bilder einfügen
Wenn Sie ein Bild in ein Dreamweaver-Dokument einfügen, erzeugt
Dreamweaver automatisch im HTML-Quellcode einen Verweis auf die Datei.
Damit dieser Verweis problemlos funktioniert, muss sich die Bilddatei in der
aktuellen Site befinden. Wenn sie sich nicht in der aktuellen Site befindet,
fragt Dreamweaver Sie, ob Sie die Datei in den Stammordner kopieren möchten.

So fügen Sie ein Bild ein:

1 Führen Sie einen der folgenden Schritte aus:

290 Kapitel 11
• Setzen Sie die Einfügemarke an die Stelle, an der das Bild im Dokumentfenster
eingefügt werden soll. Wählen Sie dann Einfügen > Bild oder klicken Sie im
Fenster Allgemein der Objektpalette auf die Schaltfläche Bild einfügen.
• Setzen Sie die Einfügemarke an die Stelle des Dokumentfensters, an der Sie das
Bild einfügen möchten, und drücken Sie <Strg>+<Alt>+<I> (Windows) bzw.
<Befehlstaste>+<Wahltaste>+<I> (Macintosh).
• Klicken Sie in der Objektpalette auf die Schaltfläche Bild einfügen und ziehen
Sie die Einfügemarke an die gewünschte Stelle im Dokumentfenster.
• Ziehen Sie ein Bild aus der Elementpalette an die gewünschte Stelle
im Dokumentfenster. Fahren Sie dann mit Schritt 3 fort.
• Ziehen Sie ein Bild vom Sitefenster an die gewünschte Stelle
im Dokumentfenster. Fahren Sie dann mit Schritt 3 fort.
• Ziehen Sie ein Bild vom Desktop an die gewünschte Stelle
im Dokumentfenster. Fahren Sie dann mit Schritt 3 fort.
2 Klicken Sie im angezeigten Dialogfeld auf Durchsuchen, um die Datei
auszuwählen, oder geben Sie den Pfad für die Bilddatei ein.
Wenn Sie in einem nicht gespeicherten Dokument arbeiten, erstellt
Dreamweaver den Verweis file:// auf die Bilddatei. Wenn Sie das Dokument
in einem beliebigen Ordner in der Site speichern, wandelt Dreamweaver
diesen Verweis in einen dokumentrelativen Pfad um.
3 Legen Sie die Eigenschaften des Bildes im Eigenschafteninspektor fest.
Siehe „Bildeigenschaften einstellen“ auf Seite 291

Bildeigenschaften einstellen
Wählen Sie ein Bild im Dokumentfenster aus, um die folgenden Bildattribute
festzulegen. Klicken Sie anschließend auf Fenster > Eigenschaften, um den
Eigenschafteninspektor anzuzeigen. Der Eigenschafteninspektor zeigt zunächst
nur die am häufigsten verwendeten Attribute an. Um alle Attribute einzublenden,
klicken Sie auf den Erweiterungspfeil in der rechten unteren Ecke.

Verwenden Sie das Textfeld unterhalb der Miniaturansicht, um sich auf das Bild
beziehen zu können, wenn Sie ein Dreamweaver-Verhalten (beispielsweise Bild
vertauschen) oder eine Skript-Sprache wie JavaScript oder VBScript verwenden.

Bilder einfügen 291


B und H reservierenPlatz für das Bild, wenn die Seite in einem Browser geladen
wird. Die ursprüngliche Größe des Bildes wird automatisch in diese Felder
eingetragen. Als Maßeinheit wird standardmäßig Pixel verwendet. Für Werte
ohne Angabe der Maßeinheit gelten also Pixel. Sie können auch folgende
Maßeinheiten festlegen: Pica, Punkt, Zoll, mm und cm. Weiterhin können
Sie verschiedene Maßeinheiten miteinander kombinieren, wie beispielsweise
2Zoll+5mm. Im HTML-Quellcode werden alle Werte in Pixel umgewandelt.
Wenn Sie für B und H Werte festlegen, die nicht der tatsächlichen Breite und
Höhe des Bildes entsprechen, wird das Bild unter Umständen nicht korrekt im
Browser angezeigt. (Sie können die ursprünglichen Werte wiederherstellen, indem
Sie auf die Beschriftungen der Felder klicken.) Sie können Breite und Höhe
ändern, um die Größe dieses Bildes zu skalieren. Dies hat jedoch keine
Auswirkungen auf die Download-Zeit, da der Browser alle Bilddaten herunterlädt
und erst dann das Bild skaliert. Wenn Sie die Download-Zeit verkürzen und
sicherstellen möchten, dass alle Kopien eines Bildes dieselbe Größe haben,
skalieren Sie die Bilder mit einer Bildbearbeitungsanwendung.
Qu.gibt die Quelldatei des Bildes an. Klicken Sie auf das Ordnersymbol,
um die Quelldatei auszuwählen, oder geben Sie den Pfad ein. Informationen
zum Eingeben von Pfaden finden Sie unter „Absolute Pfade“ auf Seite 388.
Hyperlink gibt
einen Hyperlink für das Bild an. Ziehen Sie das Dateizeiger-
Symbol zu einer Datei im Sitefenster, klicken Sie auf das Ordnersymbol,
um ein Dokument in der Site zu suchen, oder geben Sie den URL-Pfad an.
Ausrichten richtet Bild und Text auf derselben Linie aus. Siehe „Elemente
ausrichten“ auf Seite 293.
Alt gibtalternativen Text an, der anstelle des Bildes geladen wird, wenn es sich
um einen Nur-Text-Browser handelt oder wenn im Browser festgelegt wurde,
dass Bilder manuell heruntergeladen werden sollen. Für Benutzer mit
Sehschwierigkeiten, die Nur-Text-Browser zusammen mit Sprach-Synthesizern
verwenden, wird der Text laut vorgelesen. Bei einigen Browsern wird dieser Text
auch angezeigt, wenn der Zeiger sich über dem Bild befindet.
Map ermöglicht Ihnen, Client-Imagemaps zu erstellen. Siehe „Imagemaps
erstellen“ auf Seite 296.
V-Abstand und H-Abstand fügen Leerraum (in Pixeln) entlang den Seiten des
Bilds hinzu. V-Abstand fügt den Leerraum am oberen und unteren Bildrand
hinzu. H-Abstand fügt den Leerraum am linken und rechten Bildrand hinzu.
Ziel gibtden Frame oder das Fenster an, in dem die verknüpfte Seite geladen
werden soll. (Diese Option ist nur verfügbar, wenn das Bild mit einer anderen
Datei verknüpft ist.) Alle Frames im aktuellen Dokument werden namentlich
in der Liste Ziel aufgeführt. Sie können auch einen der folgenden, reservierten
Zielnamen auswählen:
• _blank lädt die verknüpfte Datei in ein neues, unbenanntes Browserfenster.

292 Kapitel 11
• _parent lädt die verknüpfte Datei in das übergeordnete Frameset oder Fenster
des Frames, in dem der Hyperlink enthalten ist. Wenn der Frame, der den
Hyperlink enthält, nicht verschachtelt ist, wird die verknüpfte Datei in das
ganze Browserfenster geladen.
• _self lädt die verknüpfte Datei in denselben Frame oder dasselbe Fenster wie
den Hyperlink. Dies ist das Standardziel, sodass Sie dies normalerweise nicht
ausdrücklich anzugeben brauchen.
• _top lädt die verknüpfte Datei in das ganze Browserfenster, sodass alle Frames
entfernt werden.
Niedr. Qu.gibt das Bild an, das vor dem Hauptbild geladen werden soll.
Viele Website-Designer verwenden eine 2-Bit-Version (in Schwarzweiß) des
Hauptbildes, da es schneller geladen wird und den Besuchern dennoch einen
Überblick über das erwartete Bild gibt.
Rahmen definiert die Breite des Rahmens (in Pixeln), der das Bild umgibt.
Wenn Sie 0 eingeben, wird kein Rahmen angezeigt. Sie können verknüpfte und
unverknüpfte Bilder mit einem Rahmen versehen. Die Farbe für die Hyperlink-
Verknüpfung wird im Dialogfeld Seiteneigenschaften festgelegt. Wenn Sie einen
Rahmen für ein Bild festlegen, das keine Hyperlink-Verknüpfung hat, erhält der
Rahmen dieselbe Farbe wie der Text des Absatzes, in den das Bild eingefügt wird.
Bearbeiten startetden Bildeditor, den Sie unter den Voreinstellungen für externe
Editoren gewählt haben, und öffnet das ausgewählte Bild. Wenn Sie die Bilddatei
speichern und zu Dreamweaver zurückkehren, wird das Dokumentfenster mit
dem geänderten Bild aktualisiert. Siehe „Mit externen Bildeditoren arbeiten“ auf
Seite 300.Größe zurücksetzen setzt den B- und H-Wert wieder auf die
ursprüngliche Größe des Bildes zurück.

Elemente ausrichten
Mit dem Eigenschafteninspektor für Bilder können Sie die Ausrichtung eines
Bildes relativ zu anderen Elementen in derselben Zeile oder demselben Absatz
festzulegen. Mit HTML-Code ist es nicht möglich, Text um die Konturen eines
Bilds fließen zu lassen, wie dies mit einigen Textverarbeitungsprogrammen
möglich ist. Sie können ein Bild am Text, an einem anderen Bild, einem Plug-In
oder an anderen Elementen in derselben Zeile ausrichten. Sie können auch die
Ausrichtungsschaltflächen (linksbündig, rechtsbündig und zentriert) verwenden,
um die horizontale Ausrichtung eines Bilds festzulegen.

Bilder einfügen 293


Standard gibt in der Regel eine Ausrichtung an der Grundlinie vor. (Der Standard
kann variieren, je nachdem, welchen Browser die Besucher Ihrer Website
verwenden.)
Grundlinie und Untenrichten die Grundlinie des Texts (oder eines anderen
Elements) an der Unterseite des ausgewählten Objekts aus.
Oben richtet ein Bild an der Oberseite des höchsten Elements (Bild oder Text)
der aktuellen Zeile aus.
Mitte richtet die Grundlinie des Textes an der Mitte des ausgewählten Objekts aus.

Textoberkante richtet das ausgewählte Objekt an der Oberseite des höchsten


Zeichens in der Textzeile aus.
Absolute Mitte richtet das Objekt an der absoluten Mitte der aktuellen Zeile aus.
Absolut untenrichtet die absolute Unterkante des Textes, einschließlich
Unterlängen (wie beim Buchstaben g), am untersten Punkt des ausgewählten
Objekts aus.
Linksplatziert das ausgewählte Objekt am linken Rand, wobei der Text rechts
um das Objekt herum verläuft. Wenn vor dem Objekt linksbündiger Text steht,
bewirkt diese Option normalerweise, dass links ausgerichtete Objekte in einer
neuen Zeile erscheinen.
Rechts platziert das Objekt am rechten Rand, wobei der Text links um das Objekt
herum verläuft. Wenn vor dem Objekt rechtsbündiger Text steht, bewirkt diese
Option normalerweise, dass rechts ausgerichtete Objekte in einer neuen Zeile
erscheinen.

Bilder und andere Elemente vergrößern oder verkleinern


Sie können Elemente wie Bilder, Plug-Ins, Macromedia Shockwave- oder Flash-
Filme, Applets und ActiveX-Steuerelemente im Dokumentfenster visuell
vergrößern oder verkleinern. Dadurch können Sie feststellen, wie ein Element
das Layout beeinflusst, wenn es unterschiedliche Abmessungen hat.
Wenn Sie die Größe eines Elements ändern, werden dessen Attribute width
und height zurückgesetzt. In den Feldern B und H des Eigenschafteninspektors
werden die aktuelle Breite und Höhe des Elements beim Ändern der Größe
angezeigt. Die Dateigröße des Elements bleibt dabei unverändert.

294 Kapitel 11
Macromedia Flash-Filme und andere vektorbasierte Elemente sind vollständig
skalierbar. Die Qualität dieser Elemente wird also nicht beeinträchtigt, wenn Sie
ihre Größe ändern. Bitmap-Elemente, wie GIF-, JPEG- und PNG-Bilder, werden
dagegen eventuell gröber oder verzerrt, wenn Sie ihre Attribute width und height
zurücksetzen. Wenn Sie dasselbe Seitenverhältnis beibehalten möchten, halten Sie
die <Umschalttaste> gedrückt, während Sie die Größe einer Bitmap ändern. Sie
sollten die Größe dieser Elemente in Dreamweaver jedoch nur visuell ändern, um
das Layout festzulegen. Wenn Sie die optimale Größe der Bilder ermittelt haben,
bearbeiten Sie die Datei in einer Bildbearbeitungsanwendung. Dadurch kann die
Datei eventuell auch kleiner werden, wodurch das Bild schneller übertragen wird.

So verändern Sie die Größe eines Elements:

1 Wählen Sie das Element im Dokumentfenster aus (beispielsweise ein Bild oder
einen Shockwave-Film).
An der unteren und der rechten Seite sowie in der unteren rechten Ecke des
Elements werden Ziehgriffe angezeigt, mit denen Sie die Größe des Elements
ändern können. Werden keine Größenänderungsgriffe angezeigt, klicken Sie
entweder neben das Element, dessen Größe Sie ändern möchten, und wählen
Sie es dann erneut aus. Alternativ können Sie im Tag-Selektor auf <img>
klicken, um das Element auszuwählen.
2 Ändern Sie die Größe des Elements mit einer der folgenden Methoden:
• Ziehen Sie den Griff an der rechten Seite, um die Breite des Elements
zu ändern.
• Ziehen Sie den Griff an der unteren Seite, um die Höhe des Elements
zu ändern.
• Ziehen Sie den Griff an der Ecke, um Höhe und Breite des Elements
gleichzeitig zu ändern.
• Halten Sie die <Umschalttaste> gedrückt und ziehen Sie den Griff an der Ecke,
um das Verhältnis zwischen Breite und Höhe beizubehalten, während Sie die
Größe des Elements ändern.
Elemente können visuell auf eine Mindestgröße von 8 x 8 Pixel verkleinert
werden. Möchten Sie das Element noch weiter verkleinern (auf beispielsweise
1 x 1 Pixel), geben Sie dazu im Eigenschafteninspektor einen numerischen
Wert ein.
Wenn Sie die Originalgröße eines in der Größe geänderten Elements
wiederherstellen möchten, löschen Sie die Werte in den Feldern B und H
oder klicken Sie auf die Schaltfläche Größe ändern.

Bilder einfügen 295


Imagemaps erstellen
Imagemaps sind Bilder, die in Bereiche oder „Hotspots“ unterteilt sind. Wenn Sie
auf einen Hotspot klicken, wird eine Aktion ausgeführt (beispielsweise wird eine
Datei geöffnet). Mit dem Eigenschafteninspektor für Bilder können Sie Client-
Imagemaps grafisch erstellen und bearbeiten.
Bei Client-Imagemaps werden die Hyperlink-Informationen im HTML-
Dokument gespeichert, nicht in einer separaten Map-Datei, wie dies bei Server-
Imagemaps der Fall ist. Wenn ein Besucher Ihrer Site auf einen Hotspot im Bild
klickt, wird der damit verknüpfte URL-Pfad direkt an den Server gesendet.
Dadurch sind Client-Imagemaps schneller als Server-Imagemaps, da der Server
nicht interpretieren muss, auf welche Stelle der Benutzer geklickt hat. Client-
Imagemaps werden von Netscape Navigator ab Version 2.0, NCSA Mosaic 2.1
und 3.0 sowie von allen Microsoft Internet Explorer-Versionen unterstützt.
Dreamweaver ändert keine Referenzen zu Server-Imagemaps in vorhandenen
Dokumenten. Ein Dokument kann Client- und Server-Imagemaps enthalten.
Beachten Sie, dass Browser, die beide Arten von Imagemaps unterstützen, Client-
Imagemaps den Vorrang geben. Wenn Sie eine Server-Imagemap in ein
Dokument einfügen möchten, müssen Sie den entsprechenden HTML-Code
erstellen.

So erstellen Sie Client-Imagemaps:

1 Wählen Sie das Bild aus.


2 Klicken Sie im Eigenschafteninspektor unten rechts auf den Erweiterungspfeil,
um alle Eigenschaften anzuzeigen.
3 Geben Sie im Feld Imagemap einen eindeutigen Namen für die Imagemap-
Datei ein.
Anmerkung: Wenn Sie mehrere Imagemaps in einem Dokument verwenden, stellen
Sie sicher, dass Sie jeder Imagemap einen eindeutigen Namen geben.

4 Definieren Sie die Imagemap-Bereiche mit einer der folgenden Methoden:


• Klicken Sie auf den Kreis und ziehen Sie den Mauszeiger um das Bild,
um einen runden Hotspot zu erstellen.
• Klicken Sie auf das Rechteck und ziehen Sie den Mauszeiger um das Bild,
um einen rechteckigen Hotspot zu erstellen.
• Klicken Sie auf das Polygon und definieren Sie einen unregelmäßig geformten
Hotspot, indem Sie einmal für jeden Eckpunkt klicken. Klicken Sie auf den
Pfeil, um die Form zu schließen.
Nach dem Erstellen eines Hotspots wird der Eigenschafteninspektor für
Hotspots angezeigt. (Informationen über den Eigenschafteninspektor für
Hotspots finden Sie unter „Hotspot-Eigenschaften einstellen“ auf Seite 297.)

296 Kapitel 11
5 Klicken Sie im Feld Hyperlink des Eigenschafteninspektors für Hotspots
auf das Ordnersymbol, um die Datei auszuwählen, die beim Klicken auf den
Hotspot geöffnet werden soll. Alternativ dazu können Sie den entsprechenden
Dateinamen auch eingeben.
6 Wenn Sie festlegen möchten, wo die verknüpfte Datei geöffnet werden soll,
geben Sie im Feld Ziel den Namen des Fensters ein, in dem die Datei geöffnet
wird. Alternativ dazu können Sie einen Frame-Namen aus dem Popup-Menü
Ziel auswählen.
7 Geben Sie im Feld Alt den Text ein, der in Nur-Text-Browsern als alternativer
Text angezeigt werden soll.
In einigen Browsern wird dieser Text als QuickInfo angezeigt, wenn die
Besucher der Website mit dem Mauszeiger auf den Hotspot zeigen.
8 Wiederholen Sie die Schritte 4 bis 7, um weitere Hotspots in der Imagemap
zu definieren.
9 Wenn Sie dem Bild alle gewünschten Verknüpfungen hinzugefügt haben,
klicken Sie auf eine leeren Bereich des Dokuments um den
Eigenschafteninspektor zu ändern.

Hotspot-Eigenschaften einstellen
Die unten aufgeführten Eigenschaften werden im Eigenschafteninspektor
angezeigt, wenn ein Hotspot ausgewählt ist.
Map gibt den Namen der Imagemap an. Geben Sie jeder Imagemap innerhalb
eines Dokuments einen eindeutigen Namen.
Hyperlink gibt die Datei oder den URL-Pfad an, die/der angezeigt werden soll,
wenn der Besucher Ihrer Website auf den Hotspot klickt. Wenn Sie eine
Verknüpfung mit einer Datei derselben Website herstellen, geben Sie einen Pfad
ein, der relativ zum Dokument ist. (Dateinamen, die mit file:// beginnen,
sind nicht relativ).
Ziel gibt
den Frame oder das Fenster an, in dem die verknüpfte Seite geladen
werden soll. Die Option Ziel ist nur verfügbar, wenn der ausgewählte Hotspot
einen Hyperlink enthält.
In der Liste werden die Namen aller Frames aufgelistet, die im aktuellen
Dokument enthalten sind. Wenn Sie einen Frame angeben, der nicht vorhanden
ist, wird das Dokument beim Öffnen in einem Browser in einem neuen Fenster
geladen, das den angegebenen Namen erhält. Sie können auch einen der
folgenden, reservierten Zielnamen auswählen:
• _blank lädt die verknüpfte Datei in ein neues, unbenanntes Browserfenster.

Bilder einfügen 297


• _parent lädt die verknüpfte Datei in das übergeordnete Frameset oder Fenster
des Frames, in dem der Hyperlink enthalten ist. Wenn der Frame, der den
Hyperlink enthält, nicht verschachtelt ist, wird die verknüpfte Datei in das
ganze Browserfenster geladen.
• _self lädt die verknüpfte Datei in denselben Frame oder dasselbe Fenster wie
den Hyperlink. Dies ist das Standardziel, sodass Sie dies normalerweise nicht
ausdrücklich anzugeben brauchen.
• _top lädt die verknüpfte Datei in das ganze Browserfenster, sodass alle Frames
entfernt werden.
Alt gibtalternativen Text an, der anstelle des Bildes geladen wird, wenn es sich
um einen Nur-Text-Browser handelt oder wenn im Browser festgelegt wurde, dass
Bilder manuell heruntergeladen werden sollen.

Imagemaps modifizieren
Sie können die in einer Imagemap erstellten Hotspots problemlos bearbeiten.
Sie können einen Hotspot-Bereich verschieben, die Größe von Hotspots ändern
oder die Ebene eines Hotspots nach vorn oder hinten verlagern.
Sie können auch ein mit Hotspots versehenes Bild von einem Dokument in ein
anderes kopieren oder einen oder mehrere Hotspots kopieren und in ein anderes
Bild einfügen. Die dem Bild zugewiesenen Hotspots werden dabei ebenfalls in das
neue Dokument kopiert.

So wählen Sie mehrere Hotspots in einer Imagemap aus:

1 Wählen Sie einen Hotspot mit dem Tool für Mauszeiger-Hotspots aus.
2 Führen Sie einen der folgenden Schritte aus:
• Klicken Sie bei gedrückter <Umschalttaste> auf die anderen Hotspots, die Sie
auswählen möchten.
• Drücken Sie <Strg>+<A> (Windows) bzw. <Befehlstaste>+<A> (Macintosh),
um alle Hotspots auszuwählen.

So verschieben Sie einen Hotspot:

1 Wählen Sie den zu verschiebenden Hotspot mit dem Tool für Mauszeiger-
Hotspots aus.
2 Führen Sie einen der folgenden Schritte aus:
• Ziehen Sie den Hotspot an eine neue Stelle.
• Verschieben Sie den Hotspot um 10 Pixel in eine bestimmte Richtung,
indem Sie bei gedrückter <Umschalttaste> die entsprechende Pfeiltaste
drücken.

298 Kapitel 11
• Verschieben Sie den Hotspot um 1 Pixel in eine bestimmte Richtung,
indem Sie die entsprechende Pfeiltaste drücken.

So ändern Sie die Größe eines Hotspots:

1 Wählen Sie den Hotspot, dessen Größe Sie ändern möchten, mit dem Tool
für Mauszeiger-Hotspots aus.
2 Ändern Sie die Form des Hotspots durch Ziehen eines Größenänderungsgriffs
des Hotspots.

Rollover-Bilder erstellen
Ein Rollover ist ein Bild, das sich ändert, wenn Sie den Mauszeiger darüber
bewegen. Ein Rollover besteht genau genommen aus zwei Bildern: dem primären
Bild (dieses Bild wird angezeigt, wenn die Seite geladen wird) und dem Rollover-
Bild (dieses Bild erscheint, wenn der Mauszeiger über das primäre Bild bewegt
wird). Wenn Sie ein Rollover erstellen, müssen beide Bilder dieselbe Größe haben.
Haben die Bilder nicht dieselbe Größe, passt Dreamweaver automatisch die
Größe des zweiten Bildes an, damit es den Eigenschaften des ersten Bildes
entspricht.
Rollover-Bilder reagieren automatisch auf das MouseOver-Ereignis. Sie können
ein Bild jedoch auch so konfigurieren, dass es auf andere Ereignisse (beispielsweise
einen Mausklick) reagiert. Informationen hierzu sowie über das Bearbeiten eines
Rollover-Bilds für die Anzeige eines anderen Bilds finden Sie unter
„Bild austauschen“ auf Seite 508.
Eine anspruchsvollere Form eines Rollover-Bilds ist die Navigationsleiste.
Wenn Sie eine Navigationsleiste erstellen möchten, verwenden Sie den Befehl
Einfügen > Interaktive Bilder > Navigationsleiste. Siehe „Navigationsleisten
einfügen“ auf Seite 406.

So erstellen Sie ein Rollover:

1 Setzen Sie die Einfügemarke im Dokumentfenster an die Stelle, an der Sie


das Rollover einfügen möchten.
2 Fügen Sie das Rollover mit einer der folgenden Methoden ein:
• Klicken Sie in der Kategorie Allgemein der Objektpalette auf das Symbol
Rollover-Bild einfügen.
• Ziehen Sie in der Kategorie Allgemein der Objektpalette das Symbol Rollover-
Bild einfügen an die gewünschte Stelle im Dokumentfenster.
• Wählen Sie Einfügen > Interaktive Bilder > Rollover-Bild.
Das Dialogfeld Rollover-Bild einfügen wird eingeblendet.
3 Geben Sie im Feld Bildname einen Namen für das Rollover-Bild ein.

Bilder einfügen 299


4 Klicken Sie im Feld Originalbild auf Durchsuchen und wählen Sie das Bild
aus, das beim Laden der Seite angezeigt werden soll, oder geben Sie den Pfad
des Bilds ein.
5 Klicken Sie im Feld Rollover-Bild auf Durchsuchen und wählen Sie das Bild
aus, das beim Platzieren des Mauszeigers auf das Rollover-Bild angezeigt
werden soll, oder geben Sie den Pfad für dieses Bild ein.
6 Markieren Sie die Option Vorausladen, wenn die Bilder in den Cache des
Browsers vorausgeladen werden sollen, damit sie schneller angezeigt werden.
7 Klicken Sie im Feld Bei Anklicken zu URL wechseln auf Durchsuchen und
wählen Sie das Bild aus, das beim Klicken des Mauszeigers auf dem Rollover-
Bild angezeigt werden soll, oder geben Sie den Pfad für dieses Bild ein.
Anmerkung: Wenn Sie keinen Hyperlink für das Bild festlegen, fügt Dreamweaver
einen Null-Hyperlink (#) in den HTML-Quellcode ein, mit dem das Rollover-Verhalten
verknüpft wird. Wenn Sie den Null-Hyperlink entfernen, funktioniert das Rollover-Bild
nicht mehr.

8 Klicken Sie auf OK, um das Dialogfeld Rollover-Bild einfügen zu schließen.

So testen Sie ein Rollover:

1 Wählen Sie Datei > Vorschau in Browser oder drücken Sie F12.
2 Bewegen Sie den Zeiger im Browser über das Originalbild.
Statt des Originalbildes müsste nun das Rollover-Bild angezeigt werden.

Mit externen Bildeditoren arbeiten


Mit Dreamweaver können Sie Ihre HTML-Seiten problemlos entwerfen und
Bilder in einem Bildeditor bearbeiten. Während Sie in Dreamweaver arbeiten,
können Sie ein ausgewähltes Bild in einem externen Bildeditor öffnen. Wenn Sie
nach dem Speichern des Bildes zu Dreamweaver zurückkehren, werden die ggf.
vorgenommenen Änderungen direkt im Dokumentfenster angezeigt.
Macromedia Fireworks kann als externer Bildeditor verwendet werden. Fireworks
3 und Fireworks 4 verwenden Design Notes, um den Speicherort der Original-
PNG-Datei auf der lokalen Festplatte zu protokollieren.
In Fireworks 2 werden keine Design Notes verwendet. Sie werden jedoch
aufgefordert, den Pfad zur ursprünglichen PNG-Datei anzugeben. Fireworks 1
durchsucht automatisch den Ordner, in dem sich die ausgewählte Datei befindet,
nach einer PNG-Datei mit demselben Namen. Angenommen, Sie haben ein Bild
mit der Quelldatei images/meinFoto.gif ausgewählt und der Ordner images
enthält auch eine Datei namens meinFoto.png. In diesem Fall öffnet Fireworks
die PNG-Datei.

300 Kapitel 11
Weitere Informationen über die gemeinsame „Fireworks und Dreamweaver
verwenden“ auf Seite 305 Sie in , .
Wenn Sie eine andere Bildbearbeitungsanwendung als externen Bildeditor wählen
und von Dreamweaver aus starten, wird die Anwendung gestartet und das
ausgewählte Bild (beispielsweise images/meinFoto.gif ) darin geöffnet.
Modifizieren Sie das Bild im Bildeditor, speichern Sie Ihre Änderungen
und zeigen Sie anschließend das aktualisierte Bild in Dreamweaver an.
Auf Wunsch können Sie die Originaldatei, von der die GIF-Datei erstellt wurde,
auch manuell öffnen (beispielsweise die Fireworks-Datei meinFoto.png),
anschließend die gewünschten Änderungen vornehmen und das geänderte GIF-
Bild speichern. Auch bei dieser Methode wird das Bild im Dokumentfenster
aktualisiert, wenn Sie zu Dreamweaver zurückkehren.
Wenn das aktualisierte Bild nach der Rückkehr zum Dreamweaver-Fenster
nicht angezeigt wird, wählen Sie das Bild aus und klicken Sie im
Eigenschafteninspektor auf die Schaltfläche Aktualisieren.

Voreinstellungen für externe Bildeditoren wählen


Im Dialogfeld Voreinstellungen von Dreamweaver können Sie angeben, welcher
Bildeditor zum Bearbeiten bestimmter Dateierweiterungen gestartet werden soll.
Sie können Dreamweaver beispielsweise so konfigurieren, dass Fireworks beim
Bearbeiten von GIF-Dateien und ein anderer Bildeditor beim Bearbeiten von
JPEG-Dateien gestartet wird.
Sie können einer Dateierweiterung auch mehrere externe Editoren zuweisen.
Wenn Sie das Bild dann bearbeiten möchten, können Sie den jeweiligen Editor
aus dem Kontextmenü auswählen.

Bilder einfügen 301


So legen Sie einen externen Bildeditor für einen vorhandenen Dateityp fest:

1 Führen Sie einen der folgenden Schritte aus, um das Dialogfeld Dateitypen/
Editor zu öffnen:
• Wählen Sie Bearbeiten > Voreinstellungen und anschließend die Kategorie
Dateitypen/Editoren.
• Wählen Sie Bearbeiten > Mit externem Editor bearbeiten und klicken Sie
auf Dateitypen/Editoren.
2 Wählen Sie in der Liste Erweiterungen die Dateierweiterung aus, die Sie
mit einem externen Editor verknüpfen möchten.
3 Klicken Sie auf die Schaltfläche Hinzufügen (+) über der Liste Editoren.
4 Navigieren Sie im Dialogfeld Externen Editor auswählen zu der Anwendung,
die Sie als Editor für diesen Dateityp starten möchten.
5 Klicken Sie im Dialogfeld Voreinstellungen auf Zu primärem Editor machen,
wenn dieser Editor der primäre Editor für diesen Dateityp werden soll.
6 Wenn Sie weitere Editoren für diesen Dateityp festlegen möchten, wiederholen
Sie die Schritte 3 und 4.
Dreamweaver verwendet automatisch den primären Editor, wenn Sie diesen
Bildtyp bearbeiten möchten. Die anderen aufgeführten Editoren können Sie
im Kontextmenü für das Bild im Dokumentfenster wählen.

So fügen einen neuen Dateityp in die Liste Erweiterungen ein:

1 Führen Sie einen der folgenden Schritte aus, um das Dialogfeld Dateitypen/
Editor zu öffnen:
• Wählen Sie Bearbeiten > Voreinstellungen und anschließend die Kategorie
Dateitypen/Editoren.
• Wählen Sie Bearbeiten > Mit externem Editor bearbeiten und klicken Sie
auf Dateitypen/Editoren.
2 Klicken Sie auf die Schaltfläche Hinzufügen (+) über der Liste Erweiterungen.
3 Geben Sie die Dateierweiterung des Bildtyps ein, den Sie bearbeiten möchten
(beispielsweise .JPEG).
4 Klicken Sie auf die Schaltfläche Hinzufügen (+) über der Liste Editoren,
um einen externen Editor zu bestimmen.
5 Ein Dialogfeld wird eingeblendet, in dem Sie die Anwendung auswählen,
mit der dieser Bildtyp bearbeitet werden soll.
6 Klicken Sie auf Zu primärem Editor machen, wenn dieser Editor der primäre
Editor für diesen Bildtyp sein soll.

302 Kapitel 11
So ändern Sie eine vorhandene Editoreinstellung:

1 Klicken Sie in den Voreinstellungen für externe Editoren auf die


Dateierweiterung, deren Editor Sie ändern möchten.
2 Verwenden Sie die Schaltflächen mit dem Plus- (+) bzw. Minuszeichen (–) über
der Liste Editoren, um einen Editor hinzuzufügen oder zu entfernen.
Weitere Informationen zu anderen Optionen in den Voreinstellungen für externe
Editoren finden Sie unter „Externe Editoren starten“ auf Seite 324.

Externe Bildeditoren starten


Wählen Sie Bearbeiten > Voreinstellungen > Dateitypen/Editoren und legen Sie
einen externen Bildeditor für die angegebenen Bilddateitypen fest. Nachdem Sie
einen externen Bildeditor festgelegt haben, können Sie diesen starten und Bilder
bearbeiten, während Sie in Ihrem Dreamweaver-Dokument arbeiten.

Führen Sie einen der folgenden Schritte aus, um den externen Bildeditor
zu starten:

• Doppelklicken Sie auf das Bild, das Sie bearbeiten möchten.


• Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter <Strg>-
Taste (Macintosh) auf das zu bearbeitende Bild und klicken Sie im
Kontextmenü auf Bearbeiten mit, um einen zuvor definierten Editor
auszuwählen, oder klicken Sie auf Durchsuchen und wählen Sie einen Editor
aus.
• Wählen Sie das gewünschte Bild aus und klicken Sie im
Eigenschafteninspektor auf Bearbeiten.
• Doppelklicken Sie im Sitefenster auf die Bilddatei, um den primären Bildeditor
zu starten. Wenn Sie keinen Bildeditor angegeben haben, startet Dreamweaver
den Standardeditor für den Dateityp.
Anmerkung: Wenn Sie ein Bild vom Sitefenster aus öffnen, sind die oben
beschriebenen Fireworks-Integrationsfunktionen nicht wirksam. Fireworks öffnet nicht
die ursprüngliche PNG-Datei. Um die Fireworks-Integrationsfunktionen zu nutzen,
müssen Sie Bilder vom Dokumentfenster aus öffnen.

Bilder mit Verhalten versehen


Sie können ein beliebiges verfügbares Verhalten an ein Bild oder einen Hotspot
anfügen. Wenn Sie ein Verhalten an einen Hotspot anfügen, fügt Dreamweaver
den HTML-Code in das area-Tag ein. Es gibt drei Verhalten, die speziell an
Bilder angefügt werden können: Bilder vorausladen, Bild austauschen und
Vertauschtes Bild wiederherstellen.

Bilder einfügen 303


Bilder vorausladen lädt Bilder, die nicht sofort auf der Seite angezeigt werden,
in den Cache-Speicher des Browsers (z. B. Bilder, die mithilfe von Zeitleisten,
Verhalten, Ebenen oder JavaScript vertauscht werden). Damit werden durch das
Herunterladen verursachte Verzögerungen verhindert, wenn die Bilder angezeigt
werden sollen. Siehe „Bilder vorausladen“ auf Seite 500.
Bild austauschen ersetzt ein Bild durch ein anderes, indem das src-Attribut
des img-Tags geändert wird. Verwenden Sie diese Aktion, um Schaltflächen-
Rollovers und sonstige Bildeffekte zu erstellen. (Sie können damit auch mehrere
Bilder gleichzeitig vertauschen.) Siehe „Bild austauschen“ auf Seite 508.
Vertauschtes Bild wiederherstellen stellt für die letzte Gruppe von vertauschten
Bildern die vorherigen Quelldateien wieder her. Diese Aktion wird immer
automatisch angefügt, wenn Sie die Aktion Bild austauschen an ein Objekt
anfügen. Daher müssen Sie diese Aktion in der Regel nicht manuell auswählen.
Siehe „Vertauschtes Bild wiederherstellen“ auf Seite 509.
Verhalten bieten zudem eine gute Möglichkeit, anspruchsvollere
Navigationssysteme, wie z. B. eine Navigationsleiste oder ein Sprungmenü,
zu erstellen. Siehe „Navigationsleisten erstellen“ auf Seite 405 und „Sprungmenüs
erstellen“ auf Seite 403.

304 Kapitel 11
12

KAPITEL 12
Fireworks und Dreamweaver
verwenden
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Die einzigartigen Integrationsfunktionen von Macromedia Fireworks 4 und


Macromedia Dreamweaver 4 erleichtern das Arbeiten mit Dateien, die zwischen
beiden Anwendungen ausgetauscht werden. Sowohl Fireworks als auch
Dreamweaver enthalten viele gemeinsame Funktionen zum Bearbeiten von
Dateien, einschließlich Änderungen von Verknüpfungen, Imagemaps,
Tabellensegmenten und andere. Beide Anwendungen zusammen stellen eine
höchst effiziente Arbeitsplattform dar, mit der Sie grafische Webdateien
bearbeiten, optimieren und in HTML-Seiten einbinden können.
Wenn Sie die in ein Dreamweaver-Dokument eingefügten Fireworks-Bilder
ändern möchten, können Sie diese Bearbeitungsschritte in Fireworks vornehmen
und dann zum aktualisierten Dreamweaver-Dokument zurückkehren. Falls Sie
eingebundene Fireworks-Bilder und Animationen optimieren möchten, können
Sie die neuen Einstellungen im Bedienfeld Optimieren von Fireworks eingeben.
In beiden Fällen werden die Änderungen sowohl an den in Dreamweaver
eingebetteten Dateien als auch an den Fireworks-Dateien selbst vorgenommen,
falls die entsprechenden Quelldateien geöffnet wurden.

Fireworks-Dateien in Dreamweaver
übernehmen
Es gibt eine ganze Reihe von Möglichkeiten, Fireworks-Bilder und HTML-Code
in Dreamweaver zu übernehmen. Zum einen können Sie in Dreamweaver selbst
die Einfügefunktionen verwenden, um Fireworks-Dateien in Dokumente
einzufügen. Wenn Sie in Fireworks arbeiten, können Sie ihre Dateien direkt in
einen Dreamweaver-Siteordner exportieren oder den betreffenden HTML-Code
kopieren und in das Dreamweaver-Dokument einfügen.

305
Fireworks-Bilder in Dreamweaver plazieren
Sie können in Fireworks erstellte GIF-, JPEG- oder PNG-Bilder unmittelbar
in ein Dreamweaver-Dokument einfügen.

So fügen Sie ein Fireworks-Bild in ein Dreamweaver-Dokument ein:

1 Platzieren Sie im Fenster des Dreamweaver-Dokuments die Einfügemarke


an die gewünschte Position.
2 Führen Sie einen der folgenden Schritte aus:
• Wählen Sie Einfügen > Hotspot.
• Klicken Sie im Bedienfeld Objekte in der Kategorie Allgemein auf die
Schaltfläche Bild einfügen.
3 Suchen Sie die gewünschte Fireworks-Datei und klicken Sie auf Öffnen.
Wenn die Fireworks-Datei auf der aktuellen Dreamweaver-Site nicht
gespeichert ist, wird eine Meldung angezeigt, in der Sie gefragt werden,
ob die Datei in den Stammordner kopiert werden soll.

HTML-Code aus Fireworks in Dreamweaver einfügen


In Dreamweaver können Sie auch den in Fireworks erstellten HTML-Code
einfügen. Sämtliche verknüpften Bilder, Segmente und JavaScript-Elemente
werden dabei ebenfalls mit übernommen. Diese Einfügefunktion erleichtert
es Ihnen, in Fireworks erstellte Tabellen oder Imagemaps einem Dreamweaver-
Dokument hinzuzufügen.

So fügen Sie HTML-Code aus Fireworks in ein Dreamweaver-Dokument ein:

1 Speichern Sie Ihr Dokument in Dreamweaver in einer bestimmten


2 Platzieren Sie im betreffenden Dokument den Einfügepunkt an der Stelle,
an der der eingefügte HTML-Code beginnen soll.
3 Führen Sie einen der folgenden Schritte aus:
• Wählen Sie Einfügen > Interaktive Bilder > Fireworks-HTML.
• Klicken Sie im Bedienfeld Objekte in der Kategorie Allgemein auf die
Schaltfläche Fireworks-HTML einfügen.
4 Klicken Sie im eingeblendeten Dialogfeld auf Durchsuchen und wählen Sie die
gewünschte HTML-Datei aus Fireworks aus.

306 Kapitel 12
5 Aktivieren Sie die Option Datei nach Einfügen löschen, um die HTML-Datei
nach Abschluss des Vorgangs in den Papierkorb zu verschieben.
Verwenden Sie diese Option, wenn Sie die HTML-Datei aus Fireworks nicht
mehr benötigen, sobald Sie diese eingefügt haben. Die mit der HTML-Datei
verknüpfte PNG-Quelldatei wird von dieser Option nicht berührt.
Anmerkung: Wenn die HTML-Datei auf einem Netzlaufwerk gespeichert ist, wird sie
endgültig gelöscht und nicht erst in den Papierkorb verschoben.

6 Klicken Sie auf OK, um den HTML-Code zusammen mit allen verknüpften
Bildern, Segmenten und JavaScript-Elementen in das Dreamweaver-
Dokument einzufügen.

HTML-Code aus Fireworks kopieren und in Dreamweaver


einfügen
Eine schnelle Möglichkeit zum Einfügen von mit Fireworks erstellten Bildern
und Tabellen in Dreamweaver besteht darin, den HTML-Code aus Fireworks
zu kopieren und unmittelbar in das Dreamweaver-Dokument einzufügen.

So kopieren Sie HTML-Code aus Fireworks und fügen diesen in Dreamweaver


ein:

1 Wählen Sie in Fireworks Bearbeiten > HTML-


2 Folgen Sie den Anweisungen des Assistenten, der Sie durch die Einstellungen
für den Export von HTML-Code und Bildern führt. Wenn Sie dazu
aufgefordert werden, geben Sie den Dreamweaver-Siteordner als Ziel für
die exportierten Bilder an.
Der Assistent exportiert die Bilder zum angegebenen Zielordner und kopiert
den HTML-Code in die Zwischenablage.
3 Platzieren Sie in Dreamweaver den Einfügepunkt im Dokument an der Stelle,
an der Sie den HMTL-Code einfügen möchten, und wählen Sie Bearbeiten >
Einfügen.
Alle HTML- und JavaScript-Codes, die mit den von Ihnen exportierten
Fireworks-Dateien verknüpft sind, werden in das Dreamweaver-Dokument
kopiert. Gleichzeitig werden sämtliche Hyperlinks der Bilder aktualisiert.

So exportieren Sie HTML-Code aus Fireworks und fügen diesen in Dreamweaver


ein:

1 Wählen Sie in Fireworks Datei > Exportieren.


2 Geben Sie im Dialogfeld Exportieren den Dreamweaver-Siteordner als Ziel
für die exportierten Bilder an.

Fireworks und Dreamweaver verwenden 307


3 Wählen Sie aus der Dropdownliste Dateityp die Option HTML und Bilder
aus.
4 Wählen Sie aus der Dropdownliste HTML die Option In Zwischenablage
kopieren aus und klicken Sie auf Speichern.
5 Platzieren Sie in Dreamweaver den Einfügepunkt im Dokument an der Stelle,
an der Sie den HMTL-Code einfügen möchten, und wählen Sie Bearbeiten >
Einfügen.
Alle HTML- und JavaScript-Codes, die mit den von Ihnen exportierten
Fireworks-Dateien verknüpft sind, werden in das Dreamweaver-Dokument
kopiert. Gleichzeitig werden sämtliche Hyperlinks der Bilder aktualisiert.

Fireworks-Dateien in Dreamweaver exportieren


Über den Befehl Datei > Exportieren können Sie aus Fireworks optimierte
Bilder und HTML-Dateien exportieren und an einer Position innerhalb des
gewünschten Dreamweaver-Siteordners speichern. Sie können diese Dateien
dann in Dreamweaver öffnen.
Eine andere Möglichkeit besteht darin, die Fireworks-Dateien als CSS
(Cascading Style Sheet)-Ebenen oder als Dreamweaver-Bibliothek zu exportieren.
Dreamweaver-Bibliothekselemente vereinfachen das Bearbeiten und Aktualisieren
häufig verwendeter Website-Komponenten, wie z. B. mehrerer Fußzeilenlinks
oder einer Navigationsleiste. Ein Bibliothekselement ist ein Teil einer HTML-
Datei, der sich im Ordner Bibliothek am Stamm der Site befindet. Sie können
die Kopien der Bibliothekselemente auf jede beliebige Seite Ihrer Website ziehen.

So exportieren Sie Fireworks-Bilder und HTML-Code in Dreamweaver:

1 Wählen Sie in Fireworks Datei > Exportieren.


2 Wählen Sie aus der Dropdownliste Dateityp die Option HTML und Bilder
aus.
3 Wählen Sie aus der Dropdownliste HTML die Option HTML-Datei
exportieren aus.
4 Geben Sie einen Zielordner innerhalb des Dreamweaver-Siteordners an.
5 Klicken Sie auf Speichern, um die Dateien zu exportieren.

So exportieren Sie Fireworks-Dateien als CSS-Ebenen:

1 Wählen Sie in Fireworks Datei > Exportieren.


2 Wählen Sie aus der Dropdownliste Dateityp die Option CSS-
Ebenen (.htm) aus.
3 Geben Sie einen Zielordner innerhalb des Dreamweaver-Siteordners an.

308 Kapitel 12
4 Klicken Sie auf Speichern, um die Dateien zu exportieren.

So exportieren Sie eine Fireworks-Datei als Dreamweaver-Bibliothek:

1 Wählen Sie in Fireworks Datei > Exportieren.


2 Wählen Sie aus der Dropdownliste Dateityp die Option Dreamweaver-
Bibliothek (.lbi) aus.

3 Geben Sie als Zielordner einen Ordner mit dem Namen Library im Stamm
der Dreamweaver-Site sowie einen entsprechenden Dateinamen an.
Gegebenenfalls fordert Fireworks Sie auf, diesen Ordner zu erstellen.
4 Klicken Sie auf Speichern, um die Datei zu exportieren.

Fireworks in Dreamweaver starten


Sie können Fireworks direkt in einem Dreamweaver-Dokument starten, indem
Sie ein eingebundenes Fireworks-Bild, ein Tabellensegment oder eine Tabelle
entweder zum Bearbeiten oder zum Optimieren auswählen. Damit diese
Funktionen zum Starten und Bearbeiten auch ordnungsgemäß funktionieren,
muss Fireworks als primärer externer Bildeditor in Dreamweaver definiert sein.

Fireworks und Dreamweaver verwenden 309


Fireworks als primären externen Bildeditor für Dreamweaver
definieren
Dreamweaver 4 enthält Voreinstellungen für das automatische Starten bestimmter
Anwendungsprogramme zum Bearbeiten bestimmter Dateitypen. Damit Sie die
Funktionen zum Starten und Bearbeiten von Fireworks verwenden können, muss
Fireworks 4 als primärer Editor für GIF-, JPEB- und PNG-Dateien in
Dreamweaver definiert sein.
Sie können natürlich auch ältere Versionen von Fireworks als externe Bildeditoren
verwenden, im Hinblick auf Starten und Bearbeiten bieten diese Versionen
allerdings nur eingeschränkte Funktionen. So unterstützt Fireworks 3 das Starten
und Bearbeiten von platzierten Tabellen und Segmenten innerhalb von Tabellen
nicht vollständig und Fireworks 2 enthält keine Funktionen zum Starten und
Bearbeiten von PNG-Quelldateien bei platzierten Bildern.

So stellen Sie Fireworks 4 als primären externen Bildeditor für Dreamweaver 4


ein:

1 Wählen Sie in Dreamweaver Bearbeiten > Voreinstellungen und wählen


Sie dann Dateitypen/Editoren.
2 Wählen Sie in der Liste Erweiterungen eine Webdatei-Erweiterung
aus (.gif, .jpg oder .png).
3 Wählen Sie in der Liste Editoren die Option Fireworks 4 aus und klicken Sie
auf Zu primärem Editor machen.

4 Wiederholen Sie die Schritte 2 und 3, um Fireworks 4 auch als primären Editor
für andere Webdatei-Erweiterungen zu definieren.

310 Kapitel 12
Informationen zu Designhinweisen und Quelldateien
Wenn Sie eine Fireworks-Datei aus einer gespeicherten PNG-Quelldatei in eine
Dreamweaver-Site exportieren, schreibt Fireworks einen Designhinweis, der
Informationen zu dieser Datei enthält. Wenn Sie z. B. eine Fireworks-Tabelle
exportieren, schreibt Fireworks einen Designhinweis für jede exportierte
Segmentdatei sowie für die HTML-Datei, mit der die Tabellensegmente wieder
zusammengesetzt werden. Diese Designhinweise enthalten Verweise zu der PNG-
Quelldatei, aus der die exportierten Dateien erstellt wurden.
Wenn Sie ein Fireworks-Bild in Dreamweaver starten und bearbeiten, verwendet
Dreamweaver die Designhinweise, um die PNG-Quelldatei dieser Datei ausfindig
zu machen. Sie erzielen die besten Ergebnisse, wenn Sie die PNG-Quelldatei
von Fireworks zusammen mit den exportierten Dateien in der Dreamweaver-
Site speichern. Auf diese Weise stellen Sie sicher, dass jeder Benutzer, der auf
die Site zugreift, die PNG-Quelldatei auch findet, wenn er Fireworks in
Dreamweaver startet.

Voreinstellungen zum Starten und Bearbeiten bei Fireworks-


Quelldateien angeben
Mit den Voreinstellungen zum Starten und Bearbeiten von Fireworks-Dateien
können Sie angeben, auf welche Weise die PNG-Datei verarbeitet wird, wenn Sie
Fireworks in einer anderen Anwendung, wie z. B. Macromedia Director oder
Dreamweaver, starten.
Dreamweaver erkennt die Fireworks-Voreinstellungen zum Starten und
Bearbeiten nur in bestimmten Fällen, nämlich dann, wenn Sie ein Fireworks-Bild
starten und optimieren. Genau gesagt, geht es hier um das Öffnen und
Optimieren von Bildern, die weder Bestandteil einer Fireworks-Tabelle sind noch
einen korrekten Designhinweispfad zur PNG-Quelldatei enthalten. In allen
anderen Fällen, einschließlich dem Starten und Bearbeiten von Fireworks-Bildern,
startet Dreamweaver automatisch die PNG-Quelldatei und fordert Sie zum
Eingeben der Quelldatei auf, wenn diese Datei nicht gefunden werden kann.

So geben Sie die Voreinstellungen zum Starten und Bearbeiten bei Fireworks-
Quelldateien an:

1 Wählen Sie in Fireworks Bearbeiten > Voreinstellungen und klicken Sie auf die
Registerkarte Starten und bearbeiten.

Fireworks und Dreamweaver verwenden 311


2 Geben Sie die Einstellungen der Optionen an, die verwendet werden sollen,
wenn Sie die in einer externen Anwendung platzierten Fireworks-Bilder
bearbeiten bzw. optimieren möchten:
Immer PNG-Quelldatei verwenden startet automatisch die PNG-Datei von
Fireworks, die im Designhinweis als Quelle für das platzierte Bild angegeben
wurde. Aktualisierungen werden sowohl an der PNG-Quelldatei als auch
am entsprechenden platzierten Bild vorgenommen.
PNG-Quelldatei nie verwenden startet automatisch das platzierte Fireworks-
Bild, unabhängig davon, ob eine PNG-Datei vorliegt. Die Aktualisierungen
werden hierbei allerdings auch nur am platzierten Bild vorgenommen.
Beim Start fragen gibt Ihnen die Möglichkeit, bei jedem Start zu bestimmen,
ob eine PNG-Quelldatei gestartet werden soll. Wenn Sie ein platziertes Bild
bearbeiten bzw. optimieren, zeigt Fireworks eine Meldung an, in der Sie
aufgefordert werden, Ihre Entscheidung zum Starten und Bearbeiten
anzugeben. Sie können bei dieser

In Dreamweaver platzierte Fireworks-Datei


bearbeiten
Durch die Integration von Starten und Bearbeiten können Sie die mit Fireworks
erstellten und in ein Dreamweaver-Dokument eingefügten Bilder und Tabellen
später auch in Fireworks bearbeiten. In diesem Fall startet Dreamweaver
automatisch Fireworks und ermöglicht Ihnen, die gewünschten Änderungen
an dem Bild in Fireworks vorzunehmen. Die in Fireworks vorgenommenen
Änderungen werden automatisch auf das in Dreamweaver platzierte Bild
angewendet.
Fireworks erkennt und erhält viele der am Dreamweaver-Dokument
vorgenommenen Änderungen, einschließlich Änderungen an Verknüpfungen,
Bearbeitung von Imagemaps und Korrekturen von Text in Textsegmenten. Der
Eigenschafteninspektor von Dreamweaver hilft Ihnen, die in Fireworks erstellten
Bilder, Tabellensegmente und Tabellen im Dokument wiederzufinden.

Fireworks-Bilder bearbeiten
Sie können Fireworks starten, um einzelne in ein Dreamweaver-Dokument
eingesetzte Bilder zu bearbeiten.

So starten und bearbeiten Sie ein in Dreamweaver platziertes Fireworks-Bild:

1 Wählen Sie in Dreamweaver Fenster > Eigenschaften, um gegebenenfalls


den Eigenschafteninspektor zu öffnen.
2 Führen Sie einen der folgenden Schritte aus:

312 Kapitel 12
• Wählen Sie das gewünschte Bild aus. (Der Eigenschafteninspektor erkennt
die Auswahl als Fireworks-Bild und zeigt den Namen der erkannten PNG-
Quelldatei dieses Bildes an.) Klicken Sie im Eigenschafteninspektor
auf Bearbeiten.

• Halten Sie die Taste Strg gedrückt und doppelklicken Sie auf das Bild, das Sie
bearbeiten möchten.
• Klicken Sie mit der rechten Maustaste auf das gewünschte Bild und wählen Sie
im Kontextmenü Mit Fireworks 4 bearbeiten aus.
Dreamweaver startet Fireworks, falls die Anwendung noch nicht läuft.
3 Wenn Sie dazu aufgefordert werden, geben Sie an, ob Sie für das platzierte Bild
eine Fireworks-Quelldatei starten möchten.
4 Bearbeiten Sie das Bild in Fireworks. Das Dokumentfenster zeigt an, dass Sie
eigentlich ein Dreamweaver-Bild ändern.
Dreamweaver erkennt sämtliche Änderungen, die an dem Bild in Fireworks
vorgenommen wurden und behält diese bei.
5 Wenn Sie alle Änderungen vorgenommen haben, klicken Sie im
Dokumentfenster auf Fertig.
Dadurch wird das Bild mit den aktuellen Optimierungseinstellungen für
die PNG-Quelldatei exportiert. Außerdem werden die von Dreamweaver
verwendeten GIF- bzw. JPEG-Dateien aktualisiert und die PNG-Quelldatei
gespeichert, falls eine Quelldatei ausgewählt wurde.
Anmerkung: Wenn Sie ein Bild im Fenster der Dreamweaver-Site öffnen, sind die
oben beschriebenen Integrationsfunktionen von Fireworks deaktiviert, d. h. Fireworks
öffnet die ursprüngliche PNG-Datei nicht. Um die Integrationsfunktionen von Fireworks
verwenden zu können, müssen Sie das Bild im Dokumentfenster von Dreamweaver
öffnen.

Fireworks und Dreamweaver verwenden 313


Fireworks-Tabellen bearbeiten
Wenn Sie ein Bildsegment starten und bearbeiten, das Bestandteil einer
platzierten Fireworks-Tabelle ist, startet Dreamweaver automatisch die PNG-
Quelldatei der gesamten Tabelle.

So starten und bearbeiten Sie eine in Dreamweaver platzierte Fireworks-Tabelle:

1 Wählen Sie in Dreamweaver Fenster > Eigenschaften, um


2 Führen Sie einen der folgenden Schritte aus:
• Klicken Sie in die Tabelle und klicken Sie dann in der Statusleiste auf das Tag
TABELLE, um die gesamte Tabelle auszuwählen. (Der Eigenschafteninspektor
erkennt die Auswahl als Fireworks-Tabelle und zeigt den Namen der erkannten
PNG-Quelldatei dieser Tabelle an.) Klicken Sie im Eigenschafteninspektor auf
Bearbeiten.
• Klicken Sie auf die linke obere Ecke der Tabelle, um diese auszuwählen,
und klicken Sie dann im Eigenschafteninspektor auf Bearbeiten.
• Wählen Sie das gewünschte Tabellensegment aus und klicken Sie
im Eigenschafteninspektor auf Bearbeiten.
• Halten Sie die Taste Strg gedrückt und doppelklicken Sie auf das Bild, das Sie
bearbeiten möchten.
• Klicken Sie mit der rechten Maustaste auf das gewünschte Tabellensegment
und wählen Sie im Kontextmenü Mit Fireworks 4 bearbeiten aus.
Dreamweaver startet Fireworks, falls die Anwendung noch nicht läuft.
Die PNG-Quelldatei der gesamten Tabelle wird im Dokumentfenster
angezeigt.
3 Bearbeiten Sie das Tabellenbild in Fireworks.
Dreamweaver erkennt sämtliche Änderungen, die an dem Bild in Fireworks
vorgenommen wurden und behält diese bei.
4 Wenn Sie alle Änderungen vorgenommen haben, klicken Sie im
Dokumentfenster auf Fertig.
Dadurch werden die HTML- und die Bildsegmentdatei für die Tabelle mit
den aktuellen Optimierungseinstellungen exportiert. Außerdem wird die von
Dreamweaver platzierte Tabelle aktualisiert und die PNG-Quelldatei
gespeichert. Dabei exportiert Fireworks nur die HTML- und
Bildsegmentdateien, die für das Aktualisieren der Tabelle in Dreamweaver
benötigt werden.

314 Kapitel 12
In Dreamweaver platzierte Fireworks-Bilder
und Animationen optimieren
Sie können Fireworks in Dreamweaver starten, um schnell und einfach
Änderungen an exportierten Fireworks-Bildern bzw. Animationen vorzunehmen,
beispielsweise um die Auflösung oder den Typ einer Datei zu ändern. Fireworks
ermöglicht Ihnen das Ändern der Optimierungs- und Animationseinstellungen
sowie die Größe und die Fläche des exportierten Bildes.

So ändern Sie die Optimierungseinstellungen eines in Dreamweaver plazierten


Fireworks-Bildes:

1 Wählen Sie in Dreamweaver das gewünschte Bild aus und wählen Sie Befehle >
Bild in optimieren aus.
2 Wenn Sie dazu aufgefordert werden, geben Sie an, ob Sie für das platzierte Bild
eine Fireworks-Quelldatei starten möchten.
3 Nehmen Sie in Fireworks die gewünschten Änderungen im Dialogfeld
Optimieren vor:

• Klicken Sie auf die Registerkarte Optionen, um die Optimierungseinstellungen


zu ändern. Weitere Informationen finden Sie unter.For more information, see
Using Fireworks.
• Klicken Sie auf die Registerkarte Datei, um die Größe und die Fläche des
exportierten Bildes zu ändern. Weitere Informationen finden Sie unter „Größe
platzierter Fireworks-Bilder ändern“ auf Seite 316.
• Klicken Sie auf die Registerkarte Animation, um die Animationseinstellungen
des Bildes zu ändern. Weitere Informationen finden Sie unter „Platzierte
Fireworks-Animationen bearbeiten“ auf Seite 317.

Fireworks und Dreamweaver verwenden 315


4 Wenn Sie die gewünschten Änderungen am Bild vorgenommen haben,
klicken Sie auf Aktualisieren.
Dadurch wird das Bild mit den neuen Optimierungseinstellungen exportiert,
das in Dreamweaver platzierte GIF- oder JPEG-Bild wird aktualisiert, und die
PNG-Quelldatei wird gespeichert, falls eine Quelldatei ausgewählt wurde.
Falls Sie das Format des Bildes geändert haben, werden Sie vom Dreamweaver
Hyperlink-Prüfer aufgefordert, die Verweise auf das Bild zu aktualisieren.
Wenn Sie also beispielsweise das Format des Bildes Mein_Bild von GIF in
JPEG geändert haben, werden beim Klicken in dieser Aufforderung auf OK
sämtliche Verweise auf Mein_Bild.gif in der gesamten Site in Mein_Bild.jpg
geändert.

Größe platzierter Fireworks-Bilder ändern


Bei Starten und Optimieren eines Fireworks-Bildes in Dreamweaver können
Sie auch die Größe des Bildes ändern und einen bestimmten Bildausschnitt zum
Exportieren bestimmen.

So geben Sie die Größe eines exportierten Bildes an:

1 Klicken Sie in Fireworks im Dialogfeld Optimieren auf die Registerkarte


Datei.
2 Geben Sie einen bestimmten Prozentsatz oder die gewünschte Breite und Höhe
in Pixel an, um ein Bild beim Exportieren zu skalieren. Klicken Sie auf
Proportionen beibehalten, um das Verhältnis der Breite eines Bildes zu dessen
Höhe zu erhalten.

3 Klicken Sie auf die Option Exportbereich und wählen Sie einen Exportbereich
des Bildes aus, um zu bestimmen, welcher Teil des Bildes exportiert werden
soll:

316 Kapitel 12
• Ziehen Sie die gepunktete Linie im Vorschaubereich so auf das Bild, dass der
gewünschte Exportbereich eingeschlossen ist. (Ziehen Sie den Zeiger in den
Vorschaubereich, um ausgeblendete Bereiche anzuzeigen.)

• Geben Sie die Pixelkoordinaten für die Umrandung des Exportbereichs an.

Platzierte Fireworks-Animationen bearbeiten


Wenn Sie eine platzierte Fireworks-Animation starten und optimieren, können
Sie auch die Animationseinstellungen ändern. Die Animationsoptionen im
Dialogfeld Optimieren sind denen im Bedienfeld Frames von Fireworks sehr
ähnlich.

So bearbeiten Sie ein animiertes Bild:

1 Klicken Sie in Fireworks im Dialogfeld Optimieren auf die Registerkarte


Animation.
2 Mit einem der folgenden Verfahren können Sie die Animations-Frames
jederzeit anzeigen:
• Um einen einzelnen Frame anzuzeigen, wählen Sie den gewünschten Frame
in der Liste auf der linken Seite des Dialogfelds aus oder verwenden Sie die
Frame-Steuerung im Dialogfeld unten rechts.
• Um die Animation abzuspielen, klicken Sie auf die Schaltfläche Wiedergeben/
Stoppen im Dialogfeld unten rechts.
3 Nehmen Sie die gewünschten Änderungen an der Animation vor:
• Wenn Sie eine Löschmethode für einen Frame angeben möchten, wählen Sie
den gewünschten Frame in der Liste aus und wählen Sie im durch den
Papierkorb dargestellten Popupmenü eine Option aus.
• Zum Einstellen der Frame-Verzögerung wählen Sie den gewünschten Frame
in der Liste aus und geben Sie die Verzögerung in hundertstel Sekunden an.

Fireworks und Dreamweaver verwenden 317


• Definieren Sie ein endlos wiederholtes Abspielen, indem Sie auf die
Schaltfläche Animationsschleife klicken und im Popupmenü die gewünschte
Anzahl der Wiederholungen eingeben.
• Mit der Option Autom. zuschneiden schneiden Sie jeden Frame in einen
rechteckigen Bereich zu, sodass nur der Bildbereich ausgegeben wird, der sich
von Frame zu Frame ändert. Durch diese Option können Sie die Dateigröße
reduzieren.
• Wählen Sie die Option Auto-Differenz aus, um nur die Pixel auszugeben,
die sich von Frame zu Frame ändern. Durch diese Option können Sie die
Dateigröße reduzieren.

In Dreamweaver platzierte HTML-Dateien


aus Fireworks aktualisieren
Mit dem Befehl Datei > HTML aktualisieren bietet Fireworks eine weitere
Funktion für das Starten und Bearbeiten von Fireworks-Dateien in Dreamweaver.
Mit diesem Befehl können Sie eine PNG-Quelldatei in Fireworks bearbeiten
und dann automatisch jeden beliebigen exportierten HTML-Code und sämtliche
in ein Dreamweaver-Dokument platzierten Bilddateien aktualisieren. Das heißt,
Sie können auf diese Weise Dreamweaver-Dateien aktualisieren, auch ohne
Dreamweaver zu starten.

So aktualisieren Sie in Dreamweaver platzierte HTML-Dateien aus Fireworks:

1 Wählen Sie in Fireworks Datei > HTML


2 Suchen Sie die Dreamweaver-Datei mit dem HTML-Code, den Sie
aktualisieren möchten, und klicken Sie auf Öffnen.
3 Navigieren Sie zu dem Ordner, in dem die aktualisierten Grafikdateien
gespeichert werden sollen, und klicken Sie auf Durchsuchen.
Fireworks aktualisiert den HTML- und JavaScript-Code im Dreamweaver-
Dokument. Außerdem exportiert Fireworks die mit dem HTML-Code
verknüpften aktualisierten Bilder und legt diese im angegebenen Zielordner ab.
Wenn Fireworks keine übereinstimmenden HTML-Codes zum Aktualisieren
finden kann, erhalten Sie die Möglichkeit, in das festgelegte Dokument neuen
HTML-Code einzufügen. Fireworks fügt den JavaScript-Code am Anfang in
das Dokument ein und platziert die HTML-Tabelle bzw. die Verknüpfung mit
dem Bild am Ende.

318 Kapitel 12
Webfotoalben erstellen
Mit dem Befehl Webfotoalbum erstellen in Dreamweaver können Sie
automatisch eine Website erstellen, in der alle Bilder eines bestimmten Ordners
übersichtlich angezeigt werden. Dieser Befehl ruft mit einer JavaScript-Syntax
die Fireworks-Anwendung auf, die von jedem der Bilder des Ordners ein
Miniaturansicht und ein normales Bild erstellt. Daraufhin erstellt Dreamweaver
eine Webseite mit sämtlichen Piktogrammen und verknüpft diese mit den
größeren Bildern. Damit Sie den Befehl Webfotoalbum erstellen verwenden
können, müssen sowohl Dreamweaver als auch Fireworks auf Ihrem
Computer installiert sein.
Dabei besteht der erste Schritt darin, sämtliche Bilder des Albums in einem
Ordner zusammenzufassen. (Dieser Ordner muss nicht in einer Site gespeichert
sein.) Außerdem sollten Sie sicherstellen, dass die Namen der Bilddateien eine
Erweiterung aufweisen, die der Befehl Webfotoalbum erstellen verarbeiten
kann (.gif, .jpg, .jpeg, .png, .psd, .tif oder .tiff ). Bilder mit unbekannten
Dateinamenerweiterungen werden nicht in das Fotoalbum aufgenommen.

So erstellen Sie ein Webfotoalbum:

1 Wählen Sie in Dreamweaver Befehle > Webfotoalbum erstellen.


2 Geben Sie in das Titeltextfeld des Fotoalbums einen Titel ein. Dieser Titel
wird in einem grauen Rechteck oben auf der Seite mit den Minitiaturansichten
angezeigt.
Wenn Sie möchten, können Sie in die Felder Untertitel und Andere Info bis
zu zwei weitere Zeilen Text eingeben, die dann unmittelbar unter dem Titel
angezeigt werden.
3 Klicken Sie neben dem Textfeld Quellbildordner auf die Schaltfläche
Durchsuchen, um den Ordner mit den Bildern für das Fotoalbum
auszuwählen. Wählen Sie dann einen Zielordner aus bzw. erstellen Sie
einen Zielordner, in dem sämtliche exportierten Bild- und HTML-Dateien
gespeichert werden sollen, indem Sie neben dem Feld Zielordner auf
die Schaltfläche Durchsuchen klicken.
In diesem Zielordner sollte noch kein Fotoalbum enthalten sein, da Sie
andernfalls vorhandene Bilder möglicherweise mit den neuen Miniatur-
und Bilddateien überschreiben, die einen gleichen Namen haben.
4 Geben Sie die Anzeigeoptionen für die Piktogramme an:
• Wählen Sie im Popupmenü Größe der Piktogramme eine Größe für die
Piktogramme aus. Die Bilder werden proportional skaliert. Auf diese Weise
werden Piktogramme erstellt, die in die Rechtecke passen, deren Abmessungen
Sie eingegeben haben.
• Aktivieren Sie Dateinamen anzeigen, um die Dateinamen der ursprünglichen
Bilddateien unter den Piktogrammen anzuzeigen.

Fireworks und Dreamweaver verwenden 319


• Geben Sie die Anzahl der Spalten ein, in der die Piktogramme enthalten
sein sollen.
5 Wählen Sie im Popupmenü Format der Piktogramme ein Format für die
Piktogramme aus.
GIF WebSnap 128 erstellt GIF-Miniaturen, die eine Web-fähige Palette von
bis zu 128 Farben verwenden.
GIF WebSnap 256 erstellt GIF-Miniaturen, die eine Web-fähige Palette
von bis zu 256 Farben verwenden.
JPEG - Höhere Qualitäterstellt JPEG-Miniaturen in relativ hoher Qualität
und dem entsprechend in größeren Dateien.
JPEG - Niedrigere Qualität erstellt JPEG-Miniaturen in relativ niedriger
Qualität und dem entsprechend in kleineren Dateien.
6 Wählen Sie im Popupmenü Format der Fotos ein Format für die normalen
Fotodateien aus. Von jedem der ursprünglichen Bilder wird ein größeres Bild
im angegebenen Format erstellt. Dabei kann sich das Format der größeren
Fotos von dem der Piktogramme unterscheiden.
Anmerkung: Bei dem Befehl Webfotoalbum erstellen werden die ursprünglichen
Bilddateien nicht verwendet, da diese Bilder unter Umständen in Formaten vorliegen,
die im Gegensatz zu GIF und JPEG nicht mit allen Browsern ordnungsgemäß
angezeigt werden können. Beachten Sie, dass die aus Ihren ursprünglichen Bildern
konvertierten JPEG-Dateien möglicherweise größer sind und eine geringere Qualität
aufweisen als die ursprünglichen Bilder.

7 Wählen Sie für die größeren Bilder einen Skalierungsfaktor aus.


Eine Skalierung von 100 % erstellt größere Bilder von der gleichen Größe wie
die jeweiligen Originale. Beachten Sie hierbei, dass dieser Skalierungsfaktor auf
alle Bilder gleichermaßen angewendet wird. Wenn Ihre ursprünglichen Bilder
also nicht alle gleich groß sind, ergibt die Skalierung mit einem bestimmten
Faktor unter Umständen nicht die gewünschten Ergebnisse.
8 Aktivieren Sie Navigationsseite für jedes Foto erstellen, um für jedes Quellbild
eine eigene Webseite zu erstellen, auf der die Navigationsschaltflächen Zurück,
Home und Weiter enthalten sind.
Wenn Sie diese Option aktivieren, werden von den Piktogrammen
Verknüpfungen zu diesen Navigationsseiten hergestellt. Andernfalls weisen
die Verknüpfungen unmittelbar auf die größeren Bilder.
9 Klicken Sie auf OK, um die HTML- und Bilddateien für das Webfotoalbum
zu erstellen.
Ggf. wird Fireworks gestartet und die Piktogramme und größeren Bilder
werden erstellt. Dies kann möglicherweise mehrere Minuten in Anspruch
nehmen, wenn Sie viele Bilder im Quellordner gespeichert haben. Sobald
der Vorgang abgeschlossen ist, wird Dreamweaver erneut aktiviert und
erstellt die Seite mit den Piktogrammen.

320 Kapitel 12
10 Klicken Sie auf OK, sobald eine Meldung angezeigt wird, der zufolge das
Album erstellt wurde. Es dauert möglicherweise noch einige Sekunden, bevor
das Fotoalbum angezeigt wird. Die Piktogramme werden alphabetisch nach
dem Dateinamen angezeigt.

Anmerkung: Wenn Sie nach dem Starten des Erstellungsvorgangs im Dialogfeld


Dreamweaver auf Abbrechen klicken, wird das Erstellen des Fotoalbums nicht
abgebrochen. Dreamweaver zeigt in diesem Fall nur einfach die Hauptseite des
Fotoalbums nicht an.

Fireworks und Dreamweaver verwenden 321


322 Kapitel 12
13

KAPITEL 13
Medien einfügen
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Mit Macromedia Dreamweaver können Sie Audiodateien und Filme schnell


und problemlos in Ihre Website integrieren. Sie können Multimedia-Dateien
und-Objekte wie Java-Applets, QuickTime-, Flash- und Shockwave-Filme sowie
MP3-Audiodateien in die Website einbauen und bearbeiten. Darüber hinaus
können Sie an diese Objekte Design Notes anfügen. Jetzt können Sie auch
direkt in Dreamweaver Schaltflächen- und Textobjekte im Flash-Format einfügen.

Medienobjekte einfügen
Sie können Java-Applets, QuickTime- oder Shockwave-Filme, Flash-Filme oder -
Objekte, ActiveX-Steuerelemente und andere Audio- oder Videoobjekte in eine
Seite einfügen.

Führen Sie einen der folgenden Schritte aus, um Medienobjekte in eine Seite
einzufügen:

• Setzen Sie die Einfügemarke an die Stelle, an der Sie das Objekt einfügen
möchten, und klicken Sie auf die entsprechende Schaltfläche in der
Objektpalette.
Für Shockwave-, ActiveX- und Flash-Objekte stehen definierte Schaltflächen
zur Verfügung. QuickTime-Filme und Audiodateien werden über die
Schaltfläche für Netscape Navigator-Plug-Ins eingefügt. Weitere Informationen
finden Sie unter „Netscape Navigator-Plug-Ins einfügen“ auf Seite 341.
• Ziehen Sie die gewünschte Schaltfläche aus der Objektpalette an die Stelle
im Dokumentfenster, an der das Objekt angezeigt werden soll.
• Setzen Sie die Einfügemarke im Dokumentfenster an die Stelle, an der Sie
das Objekt einfügen möchten, und wählen Sie das entsprechende Objekt
im Untermenü Einfügen > Medien bzw. Einfügen > Interaktive Bilder aus.

323
Bei den meisten Objekten wird ein Dialogfeld angezeigt, in dem Sie eine
Quelldatei auswählen und verschiedene Parameter für das Medienobjekt
festlegen können.
Tipp: Wenn Sie dieses Dialogfeld nicht anzeigen möchten, wählen Sie Bearbeiten >
Voreinstellungen > Allgemein und deaktivieren Sie die Option Beim Einfügen von
Objekten Dialog anzeigen. Um die derzeitige Einstellungen für die Anzeige von
Dialogfeldern außer Kraft zu setzen, halten Sie die <Strg>-Taste (Windows) bzw. die
<Wahltaste> (Macintosh) gedrückt, während Sie das Objekt einfügen. (Wenn Sie
beispielsweise einen Platzhalter für einen Shockwave-Film einfügen möchten, ohne
den Dateinamen anzugeben, halten Sie die <Strg>-Taste bzw. die <Wahltaste> gedrückt,
während Sie auf die Schaltfläche Shockwave klicken.)

Über die Schaltflächen der Objektpalette wird der erforderliche HTML-Code


eingefügt, um das Objekt bzw. den Platzhalter auf der Seite anzuzeigen. Zur
Angabe einer Quelldatei, der Abmessungen und anderer Parameter und Attribute
verwenden Sie den Eigenschafteninspektor des entsprechenden Objekts.

Externe Editoren starten


Sie können auf die meisten Dateien im Sitefenster doppelklicken, um die
entsprechende Datei direkt zu bearbeiten. Wenn es sich um eine HTML-Datei
handelt, wird sie in Dreamweaver geöffnet. Andere Dateitypen wie beispielsweise
Bilddateien werden im jeweiligen externen Editor (zum Beispiel Macromedia
Fireworks) geöffnet.
Dateitypen, die von Dreamweaver nicht direkt bearbeitet werden, können mit
einem oder mehreren externen Editoren, die im System installiert sind, verknüpft
werden. Der Editor, der gestartet wird, wenn Sie im Sitefenster auf eine Datei
doppelklicken, ist der primäre Editor. Unter den Voreinstellungen für
Dateitypen/Editoren legen Sie fest, welcher Dateityp mit welcher Datei verknüpft
ist.
Wenn mehr als ein Editor mit einem bestimmten Dateityp verknüpft ist, können
Sie für Dateien dieses Typs einen sekundären Editor starten. Klicken Sie dazu mit
der rechten Maustaste (Windows) oder mit gedrückter <Strg>-Taste (Macintosh)
auf den Dateinamen im Sitefenster und wählen Sie einen Editor aus dem
Untermenü Öffnen mit des Kontextmenüs.
In der Regel ist der primäre Editor die gleiche Anwendung, die gestartet wird,
wenn Sie auf dem Desktop auf das Symbol der Datei doppelklicken. Sie können
ausdrücklich festlegen, welche externen Editoren für einen bestimmten Dateityp
gestartet werden sollen. Klicken Sie hierzu auf Bearbeiten > Voreinstellungen
und wählen Sie in der Kategorienliste die Kategorie Dateitypen/Editoren.
Auf der linken Seite unter Erweiterungen werden Dateierweiterungen aufgelistet,
wie z. B. .gif, .wav und .mpg. Die verknüpften Editoren für eine ausgewählte
Erweiterung werden rechts unter Editoren aufgeführt.

324 Kapitel 13
Sie können den externen Editor, den Sie zum Bearbeiten der Datei verwenden
möchten, auch selbst auswählen. Klicken Sie hierzu mit der rechten Maustaste
(Windows) bzw. bei gedrückter <Strg>-Taste (Macintosh) in der Entwurfsansicht
des Dokumentfensters auf die jeweilige Datei und wählen Sie Bearbeiten mit >
Durchsuchen oder wählen Sie die Datei aus und klicken Sie auf Bearbeiten > Mit
externem Editor bearbeiten.

So fügen Sie der Liste der Erweiterungen in den Voreinstellungen Dateitypen/


Editoren einen Dateityp hinzu:

1 Klicken Sie auf die Schaltfläche mit dem Pluszeichen (+) über der Liste
Erweiterungen.
2 Geben Sie eine Dateierweiterung ein (einschließlich des Punkts am Anfang
der Erweiterung). Sie können auch mehrere Erweiterungen, durch Leerzeichen
getrennt, eingeben.
Sie können beispielsweise .png .jpg. eingeben.

So fügen Sie einen Editor für einen bestimmten Dateityp hinzu:

1 Wählen Sie die Dateierweiterung in der Liste Erweiterungen aus.


2 Klicken Sie auf die Schaltfläche mit dem Pluszeichen (+) über der Liste
Editoren.
3 Wählen Sie im angezeigten Dialogfeld die Anwendung aus, die der Liste
der Editoren hinzugefügt werden soll.
Wählen Sie beispielsweise das Symbol für Excel aus, um diese Anwendung
der Liste der Editoren hinzuzufügen.

So entfernen Sie einen Dateityp aus der Liste:

1 Wählen Sie den Dateityp in der Liste Erweiterungen aus.


Anmerkung: Das Entfernen eines Dateityps kann nicht wieder rückgängig gemacht
werden. Entfernen Sie einen Dateityp also nur, wenn Sie sich absolut sicher sind.

2 Klicken Sie auf die Schaltfläche mit dem Minuszeichen (–) über der Liste
Erweiterungen.

So definieren Sie einen Editor als den primären Editor für einen Dateityp:

1 Wählen Sie den Dateityp aus.


2 Wählen Sie den Editor aus (oder fügen Sie ihn hinzu, wenn er noch nicht
in der Liste enthalten ist).
3 Klicken Sie auf die Schaltfläche Zu primärem Editor machen.

Medien einfügen 325


So legen Sie fest, dass ein Editor nicht mehr mit einem Dateityp verknüpft ist:

1 Wählen Sie den Dateityp in der Liste Erweiterungen aus.


2 Wählen Sie den Editor in der Liste Editoren aus.
3 Klicken Sie auf die Schaltfläche mit dem Minuszeichen (–) über der Liste
Editoren.

Design Notes mit Medienobjekten


verwenden
Sie können Medienobjekten wie auch anderen Objekten in Dreamweaver
Design Notes hinzufügen.

So fügen Sie einem Medienobjekt Design Notes hinzu:

1 Klicken Sie im Dokumentfenster bei gedrückter rechter Maustaste (Windows)


bzw. bei gedrückter <Strg>-Taste (Macintosh) auf das Objekt.
Anmerkung: Sie müssen Ihre Site definieren, bevor Sie einem Objekt Design Notes
hinzufügen können. Siehe unter „Design Notes“ auf Seite 143.

2 Klicken Sie im Kontextmenü auf Design Notes.


3 Geben Sie die Informationen ein, die Sie in die Design Note aufnehmen
möchten.
Sie können einem Medienobjekt auch über das Sitefenster eine Design Note
zuweisen. Wählen Sie hierzu die Datei aus, öffnen Sie das Kontextmenü
und klicken Sie darin auf Design Notes.
Weitere Informationen finden Sie unter „Design Notes“ auf Seite 143.

Informationen über Flash-Inhalte


Die Flash-Technologie von Macromedia ist eine führende Lösung für
vektorbasierte Grafiken und Animationen. Der Flash Player ist sowohl als
Netscape Navigator-Plug-In als auch als ActiveX-Steuerelement für die Windows-
Version von Microsoft Internet Explorer erhältlich. Darüber hinaus ist er in die
neuesten Versionen von Netscape Navigator, Microsoft Windows und America
Online integriert. Vor der Verwendung der in Dreamweaver verfügbaren Flash-
Befehle empfiehlt es sich, sich mit den drei unterschiedlichen Flash-Dateitypen
vertraut zu machen.

326 Kapitel 13
Die Flash-Datei (.fla) istdie Quelldatei für Projekte und wird im Flash-Programm
erstellt. Dieser Dateityp kann nur in Flash geöffnet werden, nicht in Dreamweaver
oder in Browsern. Sie können die Flash-Datei in Flash öffnen und sie als SWF-
oder SWT-Datei exportieren, um sie in Browsern verwenden zu können. Weitere
Informationen hierzu finden Sie unter „Neue Schaltflächenvorlagen erstellen“ auf
Seite 334.
Die Flash-Filmdatei (.swf) isteine komprimierte Version der Flash-Datei (.fla),
die für die Anzeige im Web optimiert wurde. Diese Datei kann in Browsern
wiedergegeben und in der Vorschau von Dreamweaver angezeigt werden,
kann aber nicht in Flash bearbeitet werden. Sie erstellen diesen Dateityp bei
Verwendung der Schaltfläche Flash und von Textobjekten. Weitere Informationen
hierzu finden Sie unter „Flash-Schaltflächenobjekte verwenden“ auf Seite 327
sowie unter „Flash-Textobjekte verwenden“ auf Seite 331.
Flash-Generator-Vorlagendateien (.swt) ermöglichen das Modifizieren und
Ersetzen von Informationen in einer Flash-Filmdatei. Diese Dateien werden
im Schaltflächenobjekt Flash verwendet, über das Sie die Vorlage modifizieren
können. Sie können beispielsweise eigenen Text oder eigene Hyperlinks
hinzufügen, um eine benutzerspezifische SWF-Datei zu erstellen, die Sie in Ihr
Dokument einfügen können. In Dreamweaver befinden sich diese
Vorlagendateien in den Ordnern Dreamweaver/Configuration/Flash Objects/
Flash Buttons und -/Flash Text.
Wenn Sie Flash verwenden, um eigene Generator-Vorlagendateien zu erstellen
(siehe unter „Neue Schaltflächenvorlagen erstellen“ auf Seite 334), können Sie
diese Vorlagen Kollegen Ihres Web-Designteams zur Verfügung stellen. Ihre
Kollegen können diese Dateien dann im Ordner Configuration/Flash Objects/
Flash Buttons speichern und die Vorlagen über das Schaltflächenobjekt Flash
aufrufen.

Flash-Schaltflächenobjekte verwenden
Mit dem Schaltflächenobjekt Flash können Sie vordefinierte Flash-Schaltflächen
benutzerspezifisch gestalten und einfügen.

Medien einfügen 327


Anmerkung: Sie müssen das Dokument gespeichert haben, bevor Sie ein Flash-
Schaltflächen- oder -Textobjekt einfügen können.

So fügen Sie ein Flash-Schaltflächenobjekt ein:

1 Klicken Sie in der Entwurfsansicht des Dokumentfenstersder Objektpalette


auf Flash-Schaltfläche einfügen oder wählen Sie Einfügen > Interaktive
Bilder > Flash-Schaltfläche. Sie können auch das Symbol für die Flash-
Schaltfläche auf das Dokumentfenster ziehen.
Das Dialogfeld Flash-Schaltfläche einfügen wird eingeblendet.
2 Wählen Sie den gewünschten Schaltflächenstil aus der Liste Stil aus.
Ein Beispiel der Schaltfläche wird im Feld Muster angezeigt. Sie können
auf dieses Muster klicken, um zu sehen, wie die Schaltfläche im Browser
funktioniert. Das Feld Muster wird nicht automatisch aktualisiert, um ggf.
vorgenommene Text- oder Schriftänderungen zu reflektieren. Diese
Änderungen erscheinen lediglich in der Entwurfsansicht.
3 Geben Sie auf Wunsch im Feld Schaltflächentext den anzuzeigenden Text ein.
Geben Sie beispielsweise Hier klicken! ein. Die in dieses Feld eingegebenen
Änderungen können nur übernommen werden, wenn für die ausgewählte
Schaltfläche der Parameter {Schaltflächentext} definiert wurde. Dies wird im
Feld Muster angezeigt. Der eingegebene Text ersetzt bei der Vorschau der Datei
den {Schaltflächentext}.

328 Kapitel 13
4 Geben Sie im Feld Schrift die Schriftgröße an und wählen Sie im Popupmenü
eine Schriftart aus.
Schrift und Schriftgröße müssen nur ausgewählt werden, wenn für die
Schaltfläche Textparameter definiert wurden. Wenn die Standardschrift für
Schaltflächen im System nicht verfügbar ist, wählen Sie im Popupmenü eine
andere Schrift aus. Beachten Sie, dass die ausgewählte Schrift im Feld Muster
nicht angezeigt wird. Sie können jedoch auf Anwenden klicken, um die
Schaltfläche auf der Seite einzufügen und zu sehen, wie der Text aussieht.
5 Geben Sie auf Wunsch im Feld Hyperlink einen dokumentrelativen
oder absoluten Hyperlink für die Schaltfläche ein.
Siterelative Hyperlinks werden nicht unterstützt, da sie von Browsern innerhalb
von Flash-Filmen nicht erkannt werden. Wenn Sie einen dokumentrelativen
Hyperlink verwenden, müssen Sie die SWF-Datei im gleichen Verzeichnis wie
die HTML-Datei speichern. (Nicht alle Browser interpretieren
dokumentrelative Hyperlinks auf dieselbe Weise. Wenn Sie beide Dateien
im gleichen Verzeichnis speichern, können Sie gewährleisten, dass die
Hyperlinks funktionieren.)
6 Geben Sie auf Wunsch im Feld Ziel einen Ziel-Frame oder ein Zielfenster
für den Hyperlink der Flash-Schaltfläche ein.
7 Geben Sie auf Wunsch im Feld HgF die Hintergrundfarbe für den Flash-Film
an. Verwenden Sie den Farbwähler oder geben Sie einen hexadezimalen
Farbwert ein (beispielsweise #FFFFFF).
8 Geben Sie im Feld Speichern unter einen Dateinamen für die neue
SWF-Datei ein.
Sie können den Standardnamen (beispielsweise button1.swf ) verwenden
oder einen neuen Namen eingeben. Wenn die Datei einen dokumentrelativen
Hyperlink enthält, müssen Sie die Datei im gleichen Verzeichnis wie das
aktuelle HTML-Dokument speichern, um den dokumentrelativen Hyperlink
beizubehalten.
9 Klicken Sie auf Weitere Stile, um zur Website von Macromedia Exchange
zu gelangen und weitere Schaltflächenstile herunterzuladen.
Weitere Informationen finden Sie unter „Erweiterungen für Dreamweaver
hinzufügen“ auf Seite 98.
10 Klicken Sie auf Anwenden oder OK, um die Flash-Schaltfläche im
Dokumentfenster einzufügen.
Tipp: Wählen Sie Anwenden, um die Änderungen im Entwurfsfenster anzuzeigen
und gleichzeitig das Dialogfeld geöffnet zu halten, damit Sie weitere Änderungen
an der Schaltfläche vornehmen können.

Medien einfügen 329


So modifizieren Sie ein Flash-Schaltflächenobjekt:

1 Wählen Sie das Flash-Schaltflächenobjekt in der Entwurfsansicht aus.


2 Im Eigenschafteninspektor werden die Eigenschaften der Flash-Schaltfläche
angezeigt. Sie können einige Änderungen im Eigenschafteninspektor
vornehmen. Diese Änderungen beziehen sich allerdings nur auf HTML-
Attribute wie Breite, Höhe oder Hintergrundfarbe.
3 Wenn Sie Änderungen am Inhalt vornehmen möchten, zeigen Sie das
Dialogfeld Flash-Schaltfläche einfügen an. Führen Sie dazu einen
der folgenden Schritte aus:
• Doppelklicken Sie auf das Flash-Schaltflächenobjekt.
• Klicken Sie im Eigenschafteninspektor auf Bearbeiten.
• Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Strg-
Taste (Macintosh) und wählen Sie dann im Kontextmenü die Option
Bearbeiten.
4 Nehmen Sie die gewünschten Änderungen im Dialogfeld Flash-Schaltfläche
einfügen vor, wobei Sie das oben beschriebene Verfahren anwenden.
In der Entwurfsansicht können Sie die Größe des Objekts problemlos ändern,
indem Sie die Größenänderungsgriffe ziehen. Sie können die Originalgröße
des Objekts wiederherstellen, indem Sie im Eigenschafteninspektor die Option
Größe zurücksetzen wählen. Siehe unter „Bilder und andere Elemente
vergrößern oder verkleinern“ auf Seite 294.

So geben Sie den Inhalt einer Flash-Schaltfläche im Dokumentfenster wieder:

1 Wählen Sie das Flash-Schaltflächenobjekt in der Entwurfsansicht aus.


2 Klicken Sie im Eigenschafteninspektor auf die grüne Schaltfläche Abspielen.
3 Klicken Sie auf die rote Schaltfläche Anhalten, um die Vorschau zu beenden.
Anmerkung: Während der Wiedergabe kann das Flash-Schaltflächenobjekt nicht
bearbeitet werden.

Es empfiehlt sich auch, eine Vorschau des Dokuments im Browser anzuzeigen.


Auf diese Weise kann die Flash-Schaltfläche genau wie im Browser dargestellt
werden.

330 Kapitel 13
Flash-Textobjekte verwenden
Mit dem Flash-Textobjekt können Sie Flash-Filme erstellen und einfügen, die aus
reinem Text bestehen. Auf diese Weise können Sie einen kleinen Vektorgrafikfilm
erstellen, der Ihre ganz individuellen Schriften und den Text Ihrer Wahl enthält.

So fügen Sie ein Flash-Textobjekt ein:

1 Klicken Sie in der Designansicht des Dokumentfensters in der Objektpalette


auf Flash-Text einfügen oder wählen Sie Einfügen > Interaktive Bilder >
Flash-Text.
Das Dialogfeld Flash-Text einfügen wird angezeigt.
2 Wählen Sie im Popupmenü Schrift eine Schrift aus.
In diesem Menü werden alle TrueType-Schriften aufgeführt, die derzeit
im System geladen sind.
3 Geben Sie im Feld Größe eine Punktzahl für die Schriftgröße ein.
4 Legen Sie Schriftstilattribute (beispielsweise fett oder kursiv) sowie die
Ausrichtung des Texts fest, indem Sie auf die entsprechenden Schaltflächen
klicken.
5 Legen Sie im Feld Farbe die Textfarbe fest, indem Sie entweder den Farbwähler
verwenden oder einen hexadezimalen Farbwert (beispielsweise #FFFFFF)
eingeben.
6 Legen Sie im Feld Rollover-Farbe die Farbe fest, die angezeigt wird,
wenn sich der Mauszeiger auf dem Flash-Textobjekt befindet. Verwenden
Sie den Farbwähler oder geben Sie einen hexadezimalen Farbwert ein
(beispielsweise #FFFFFF).
7 Geben Sie den gewünschten Text im Feld Text ein.
Wenn die Schrift im Feld Text angezeigt werden soll, wählen Sie Schrift
anzeigen aus.

Medien einfügen 331


8 Wenn Sie das Flash-Textobjekt mit einem Hyperlink verknüpfen möchten,
geben Sie einen dokumentrelativen oder absoluten Hyperlink im Feld
Hyperlink ein.
Siterelative Hyperlinks werden nicht unterstützt, da sie von Browsern innerhalb
von Flash-Filmen nicht erkannt werden. Wenn Sie einen dokumentrelativen
Hyperlink verwenden, müssen Sie die SWF-Datei im gleichen Verzeichnis
wie die HTML-Datei speichern. (Nicht alle Browser interpretieren
dokumentrelative Hyperlinks auf dieselbe Weise. Wenn Sie beide Dateien
im gleichen Verzeichnis speichern, können Sie gewährleisten, dass die
Hyperlinks funktionieren.)
9 Wenn Sie einen Hyperlink eingegeben haben, können Sie im Feld Ziel einen
Ziel-Frame oder ein Zielfenster für diesen Hyperlink angeben.
10 Wählen Sie im Feld HgF eine Hintergrundfarbe für den Text. Verwenden
Sie den Farbwähler oder geben Sie einen hexadezimalen Farbwert ein
(beispielsweise #FFFFFF).
11 Geben Sie im Feld Speichern unter einen Namen für die Datei ein.
Sie können den Standardnamen (beispielsweise text1.swf ) verwenden oder
einen neuen Namen eingeben. Wenn die Datei einen dokumentrelativen
Hyperlink enthält, müssen Sie die Datei im gleichen Verzeichnis wie das
aktuelle HTML-Dokument speichern, um den dokumentrelativen Hyperlink
beizubehalten.
12 Klicken Sie auf Anwenden oder OK, um den Flash-Text im Dokumentfenster
einzufügen.
Wenn Sie auf Anwenden klicken, bleibt das Dialogfeld geöffnet und Sie
können eine Vorschau des Texts im Dokument anzeigen.
Wenn Sie das Flash-Textobjekt modifizieren oder wiedergeben möchten,
verwenden Sie dasselbe Verfahren wie für Flash-Schaltflächen. Siehe unter „Flash-
Schaltflächenobjekte verwenden“ auf Seite 327.

Eigenschaften von Flash-Objekten


festlegen
Der Eigenschafteninspektor für Flash-Objekte zeigt zunächst die am häufigsten
verwendeten Eigenschaften an. Klicken Sie unten rechts auf den
Erweiterungspfeil, um weitere Eigenschaften anzuzeigen.
Im Eigenschafteninspektor befindet sich außerdem die Schaltfläche Abspielen,
mit der Sie ein Flash-Objekt im Dokumentfenster wiedergeben können.
Wenn Sie auf die grüne Schaltfläche Abspielen klicken, können Sie sehen,
wie das Objekt in einem Browser angezeigt wird.

332 Kapitel 13
Name legt den Namen fest, mit dem die Schaltfläche bei der Skriptverarbeitung
identifiziert wird. Geben Sie in das unbeschriftete Feld ganz links im
Eigenschafteninspektor einen Namen ein.
B und H legen die Höhe und Breite des Objekts in Pixeln fest. Sie können auch
folgende Maßeinheiten festlegen: Pica, Punkt, Zoll, mm, cm oder % (Prozentsatz
der Breite oder Höhe des übergeordneten Objekts). Zwischen Abkürzung und
Wert darf kein Leerzeichen stehen. Eine korrekte Eingabe ist zum Beispiel
„3mm“.
Datei legt den Pfad zur Flash-Objektdatei fest. Klicken Sie auf das Ordnersymbol,
um die Datei auszuwählen oder geben Sie den Pfad ein.
Ausrichten legt fest, wie das Objekt auf der Seite ausgerichtet wird. Eine
Beschreibung der einzelnen Optionen finden Sie unter „Elemente ausrichten“ auf
Seite 293.
Hg legt eine Hintergrundfarbe für das Objekt fest.
Bearbeiten ruft das Dialogfeld Flash-Objekt auf.
Größe zurücksetzen setzt die ausgewählte Schaltfläche auf die Größe
des Originalfilms zurück.
Abspielen/Anhalten: Hiermit können Sie eine Vorschau des Flash-Objekts im
Dokumentfenster anzeigen. Klicken Sie auf die grüne Schaltfläche Abspielen,
um das Objekt im Wiedergabemodus anzuzeigen. Klicken Sie auf die rote
Schaltfläche Anhalten, um den Film anzuhalten und das Objekt bearbeiten
zu können.
IDdefiniert den optionalen ActiveX ID-Parameter. Dieser Parameter wird am
häufigsten verwendet, um Informationen zwischen ActiveX-Steuerelementen
weiterzugeben.
V-Abstand und H-Abstand legen die Anzahl der Pixel für den Leerraum oberhalb,
unterhalb und an beiden Seiten der Schaltfläche fest.
Qualität legt den Parameter quality für die Tags object und embed fest,
die die Schaltfläche definieren. Mit der Einstellung Hoch erzielen Sie eine
bessere Filmqualität, doch ist dann für das korrekte Rendern des Films auf dem
Bildschirm ein schnellerer Prozessor erforderlich. Mit der Einstellung Niedrig
erzielen Sie eine höhere Geschwindigkeit auf Kosten des Aussehens, mit der
Einstellung Hoch ein besseres Aussehen auf Kosten der Geschwindigkeit.
Mit Auto-Niedrig wird zunächst eine höhere Geschwindigkeit verwendet.
Später wird das Aussehen verbessert, sofern dies möglich ist. Mit Auto-Hoch wird
zunächst eine höhere Qualität verwendet, doch bei Bedarf wird diese zugunsten
der Geschwindigkeit reduziert.

Medien einfügen 333


Skalierung legt den Parameter scale für die Tags object und embed fest, die das
Schaltflächen- oder Textobjekt definieren. Mit diesem Parameter legen Sie fest,
wie der Film innerhalb des Bereichs angezeigt wird, der mit den Werten Breite
und Höhe definiert wurde. Zur Wahl stehen die Optionen Standard, Kein
Rahmen und Genau passend. Mit Standard wird der gesamte Film im
angegebenen Bereich angezeigt, wobei das Seitenverhältnis des Films beibehalten
wird, um Verzerrungen zu vermeiden. An zwei Seiten des Films kann ein Rahmen
angezeigt werden. Die Einstellung Kein Rahmen ist der Option Standard ähnlich,
nur dass Teile des Films zugeschnitten werden können. Mit Genau passend wird
der gesamte Film im angegebenen Bereich angezeigt, doch wird dabei das
Seitenverhältnis des Films nicht beibehalten, was zu Verzerrungen führen kann.
Parameter öffnet ein Dia