ADOBE Dreamweaver CS3 User Manual [de]

ADOBE® DREAMWEAVER® CS3

BENUTZERHANDBUCH

Adobe® Dreamweaver® CS3 Benutzerhandbuch für Windows® und Macintosh

Wenn dieses Handbuch mit Software vertrieben wird, die eine Endbenutzer-Lizenzvereinbarung umfasst, werden dieses Handbuch sowie die darin beschriebene Software unter Lizenz bereitgestellt und dürfen nur entsprechend den Bedingungen der Lizenz verwendet oder vervielfältigt werden. Kein Teil dieser Dokumentation darf ohne vorherige schriftliche Genehmigung von Adobe Systems Incorporated reproduziert, in Datenbanken gespeichert oder in irgendeiner Form auf irgendeine andere Weise

– übertragen werden, es sei denn, die Lizenz gestattet dies ausdrücklich. Beachten Sie, dass der Inhalt dieses Handbuchs urheberrechtlich geschützt

– elektronisch, mechanisch, auf Tonträgern oder

ist, auch wenn er nicht zusammen mit Software vertrieben wird, die eine Endbenutzer-Lizenzvereinbarung umfasst.

Der Inhalt dieses Handbuchs dient lediglich Informationszwecken, kann jederzeit ohne Vorankündigung geändert werden und stellt keinerlei Verpflichtung seitens Adobe Systems Incorporated dar. Adobe Systems Incorporated übernimmt keine Verantwortung oder Haftung für Fehler oder Ungenauigkeiten in den in diesem Handbuch enthaltenen Informationen.

Bitte beachten Sie, dass Bildmaterial oder Bilder, die Sie in Ihr Projekt aufnehmen möchten, eventuell urheberrechtlich geschützt sind. Die nicht genehmigte Verwendung von solchem Material in Ihrer Arbeit kann eine Verletzung der Urheberrechte des Inhabers der Rechte bedeuten. Bitte denken Sie daran, die entsprechenden Genehmigungen vom Inhaber des Urheberrechts einzuholen.

Alle in den Abbildungen erwähnten Firmennamen dienen lediglich zur Veranschaulichung und nehmen keinerlei Bezug auf tatsächlich bestehende Unternehmen.

Adobe, das Adobe-Logo, ActionScript, ColdFusion, Creative Suite, Director, Dreamweaver, Fireworks, Flash, FlashPaper, HomeSite, JRun, Photoshop, Shockwave und Version Cue sind entweder eingetragene Marken oder Marken von Adobe Systems Incorporated in den USA und/oder anderen Ländern.

ActiveX, Microsoft und Windows sind Marken oder eingetragene Marken der Microsoft Corporation in den USA und/oder anderen Ländern. Apple und Mac OS sind Marken von Apple Inc., eingetragen in den USA und anderen Ländern. Java und Solaris sind Marken oder eingetragene Marken von Sun Microsystems, Inc. in den USA und anderen Ländern. Linux ist eine eingetragene Marke von Linus Torvalds in den USA und anderen Ländern. UNIX ist eine Marke in den USA und anderen Ländern mit exklusiver Lizenzvergabe durch X/Open Company Ltd. Alle anderen Marken sind Eigentum der jeweiligen Inhaber.

Dieses Produkt enthält Software, die von der Apache Software Foundation entwickelt wurde http://www.apache.org/). Das Graphics Interchange Format © ist urheberrechtlich geschütztes Eigentum der Firma CompuServe Incorporated. GIF(sm) ist eine Dienstleistungsmarke der Firma CompuServe Incorporated. Die Audiokomprimierungsstechnologie MPEG Layer-3 ist lizenziert von Fraunhofer IIS und Thomson Multimedia (

http://www.mp3licensing.com). MP3-komprimierte Audiodaten können innerhalb der Software nicht für Echtzeit- oder Live-Ausstrahlungen verwendet werden. Wenn Sie einen MP3-Decoder für Echtzeit- oder Live-Ausstrahlungen benötigen, sind sie selbst für den Erwerb der Lizenz für diese MP3-Technologie verantwortlich. Sprachkomprimierungs- und -dekomprimierungsstechnologien stehen unter der Lizenz der Firma Nellymoser, Inc. (

www.nellymoser.com). Flash CS3 Video wird von der On2 TrueMotion-Videotechnologie betrieben. © 1992-2005 On2 Technologies, Inc. Alle Rechte vorbehalten. http://www.on2.com. Dieses Produkt enthält Software, die von der OpenSymphony Group entwickelt wurde (http://www.opensymphony.com/). Sorenson SparkTM-Videokomprimierungs- und -dekomprimierungsstechnologien stehen unter der Lizenz der Firma Sorenson Media, Inc.

Adobe Systems Incorporated, 345 Park Avenue, San Jose, California 95110, USA.

Notice to U.S. Government End Users. The Software and Documentation are “Commercial Items,” as that term is defined at 48 C.F.R. §2.101, consisting of “Commercial Computer Software” and “Commercial Computer Software Documentation,” as such terms are used in 48 C.F.R. §12.212 or 48 C.F.R. §227.7202, as applicable. In Übereinstimmung mit 48 C.F.R. §12,212 bzw 48 C.F.R. §§227.7202-1 bis 227.7202-4 (sofern anwendbar) werden „Commercial Computer Software“ und „Commercial Computer Software Documentation“ Endbenutzern im Dienste der US-Regierung (a) nur als „Commercial Items“ und (b) nur mit den Rechten ausgestattet zur Verfügung gestellt, die allen anderen Endbenutzern gemäß den hier vorliegenden Bedingungen zukommen. Unveröffentlichte Rechte bleiben gemäß den Gesetzen zum Urheberrecht der Vereinigten Staaten vorbehalten. Adobe Systems Incorporated, 345 Park Avenue, San Jose, CA 95110-2704, USA. Für Endbenutzer der US-Regierung: Adobe erklärt hiermit, alle anwendbaren Gesetze zur Chancengleichheit zu beachten, darunter, soweit zutreffend, die Bestimmungen der Executive Order 11246 (geänderte Fassung), Paragraph 402 des Vietnam Era Veterans Readjustment Assistance Act von 1974 (38 USC 4212), Paragraph 503 des Rehabilitation Act von 1973 (geänderte Fassung) sowie die Bestimmungen in 41 CFR Abschnitt 60-1 bis 60-60, 60-250 und 60-741. Die im vorangestellten Satz genannten Bestimmungen und aktiven Förderungsmaßnahmen zugunsten von Minderheiten werden per Verweis eingebunden.

Inhalt

Kapitel 1: Erste Schritte

Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Adobe Hilfe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Ressourcen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

Neue Funktionen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .10

Kapitel 2: Arbeitsbereich

Dreamweaver Arbeitsablauf und -bereich . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .12

Im Dokumentfenster arbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .23

Symbolleisten, Inspektoren, Kontextmenüs und Bedienfelder verwenden . . . . . . . . . . . . . . . . . .26

Arbeitsbereich von Dreamweaver CS3 anpassen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .32

Kapitel 3: Dreamweaver-Sites verwenden

Dreamweaver-Sites einrichten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .38

Graﬁsche Darstellung der Site verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .50

Contribute-Sites mit Dreamweaver verwalten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .54

Dateien ohne das Deﬁnieren von Sites bearbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .61

Optionen der Registerkarte „Grundeinstellungen“ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .62

iii

Kapitel 4: Dateien erstellen und verwalten

Dokumente öffnen und erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .67

Dateien und Ordner verwalten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76

Dateien vom Server abrufen/auf dem Server bereitstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .85

Dateien ein- und auschecken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90

Dateien synchronisieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93

Dateien auf Unterschiede vergleichen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .95

Frühere Dateiversionen wiederherstellen (Contribute-Benutzer) . . . . . . . . . . . . . . . . . . . . . . . . . . .97

Dateien und Ordner in Ihrer Site von Operationen ausschließen (Cloaking) . . . . . . . . . . . . . . . . .98

Dateiinformationen in Design Notes speichern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .101

Sites testen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .103

Kapitel 5: Elemente und Bibliotheken verwalten

Elemente und Bibliotheken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .108

Elemente verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .109

Liste mit Favoritenelementen erstellen und verwalten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .114

Bibliothekselemente verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .116

Kapitel 6: Seiten mit CSS erstellen

Cascading Stylesheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .120

CSS erstellen und verwalten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .124

Seitenlayouts mit CSS gestalten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .144

Mit Div-Tags arbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .161

AP-Elemente animieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .164

Kapitel 7: Seitenlayouts mit HTML gestalten

Visuelle Hilfsmittel für das Layout verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .171

Inhalte in Tabellen darstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .174

Seitenlayouts im Layoutmodus gestalten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .188

Frames verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .199

Kapitel 8: Inhalt in Seiten einfügen

Mit Seiten arbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .211

Text einfügen und formatieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .223

Bilder hinzufügen und ändern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .240

Flash-Inhalt einfügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .252

Flash-Videomaterial hinzufügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .261

Audiomaterial hinzufügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .265

Andere Medienobjekte hinzufügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .267

Kapitel 9: Hyperlinks und Navigation

Hyperlinks und Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .275

Hyperlinks erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .277

Sprungmenüs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .285

Navigationsleisten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .287

Imagemaps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .289

Fehler in Hyperlinks beheben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .291

Kapitel 10: Vorschau von Seiten

Vorschau von Seiten im Browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .294

Vorschau von Seiten auf mobilen Geräten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .296

Kapitel 11: Mit Seitencode arbeiten

Code erstellen in Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .297

Die Codeumgebung einrichten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .303

Die Codeumgebung individuell anpassen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .304

Code schreiben und bearbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .310

Code ausblenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .319

Code optimieren und debuggen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .321

Code in der Entwurfsansicht bearbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .326

Mit Head-Inhalt für Seiten arbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .332

Mit Server-Side Includes arbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .336

Tag-Bibliotheken verwalten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .337

Benutzerdeﬁnierte Tags in Dreamweaver importieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .340

Kapitel 12: JavaScript-Verhalten hinzufügen

JavaScript-Verhalten verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .342

Integrierte Dreamweaver-Verhalten deﬁnieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .345

Kapitel 13: Mit anderen Anwendungen arbeiten

Anwendungsübergreifende Integration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .361

Mit Fireworks arbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .362

Mit Photoshop arbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .368

Mit Flash arbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .376

Mit Bridge arbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .377

Mit Device Central arbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .379

Kapitel 14: Vorlagen erstellen und verwalten

Dreamweaver-Vorlagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .381

Vorlagen und vorlagenbasierte Dokumente erkennen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .386

Dreamweaver-Vorlagen erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .388

Bearbeitbare Bereiche erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .391

Wiederholende Bereiche erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .392

Optionale Bereiche verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .394

Bearbeitbare Tag-Attribute deﬁnieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .397

Verschachtelte Vorlagen erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .398

Vorlagen bearbeiten, aktualisieren oder löschen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .401

Vorlageninhalte exportieren und importieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .404

Vorlagen auf vorhandene Dokumente anwenden oder aus Dokumenten entfernen . . . . . . .405

Inhalte in vorlagenbasierten Dokumenten bearbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .406

Vorlagensyntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .409

Voreinstellungen für Vorlagenbereiche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .410

Kapitel 15: XML-Daten anzeigen

XML und XSLT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .412

XSL-Transformationen auf dem Server ausführen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .419

XSL-Transformationen auf dem Client ausführen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .435

Fehlende Zeichenentitäten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .437

Kapitel 16: Spry-Seiten visuell erstellen

Über das Spry-Framework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .439

Spry-Widgets hinzufügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .439

Mit dem Akkordeon-Widget arbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .441

Mit dem Menüleisten-Widget arbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .443

Mit dem Widget „Reduzierbare Palette“ arbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .448

Mit dem Widget „Paletten mit Registerkarten“ arbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .450

Mit dem Widget „Überprüfung - Textfeld“ arbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .452

Mit dem Widget „Überprüfung - Textbereich“ arbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .457

Mit dem Widget „Überprüfung - Wählen“ arbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .460

Mit dem Widget „Überprüfung - Kontrollkästchen“ arbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .463

Daten mit Spry anzeigen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .466

Spry-Effekte hinzufügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .474

Kapitel 17: Erstellen dynamischer Sites vorbereiten

Webanwendungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .478

Lokale Webserver installieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .485

Webanwendungen einrichten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .488

Datenbankverbindungen für ColdFusion-Entwickler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .495

Datenbankverbindungen für ASP-Entwickler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .496

Datenbankverbindungen für PHP-Entwickler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .504

Datenbankverbindungen für ASP.NET-Entwickler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .505

Datenbankverbindungen für JSP-Entwickler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .508

Fehler bei Datenbankverbindungen beheben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .512

Verbindungsskripts entfernen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .517

Kapitel 18: Datenquellen für Webanwendungen

Datenbanken zum Speichern von Inhalt verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .518

Von Benutzern übertragene Daten sammeln . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .519

Auf Daten in Sitzungsvariablen zugreifen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .522

Kapitel 19: Dynamische Seiten erstellen

Arbeitsbereich für visuelle Entwicklung optimieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .525

Dynamische Seiten entwerfen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .528

Überblick über Quellen für dynamischen Inhalt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .530

Bedienfelder für dynamischen Inhalt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .533

Quellen für dynamischen Inhalt deﬁnieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .534

Dynamischen Inhalt in Seiten einfügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .550

Dynamischen Inhalt ändern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .554

Datenbank-Datensätze anzeigen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .556

Live-Daten anzeigen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .565

Webdienste verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .569

Benutzerdeﬁnierte Serververhalten hinzufügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .575

Formulare erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .585

Kapitel 20: Anwendungen visuell entwickeln

Master- und Detailseiten erstellen (alle Server) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .599

Such- und Ergebnisseiten erstellen (ColdFusion, ASP, JSP, PHP) . . . . . . . . . . . . . . . . . . . . . . . . . . . .608

Suchseiten für die Datenbank erstellen (ASP.NET) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .613

Datensatz-Einfügeseiten erstellen (alle Server) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .617

Seiten zur Aktualisierung von Datensätzen erstellen (alle Server) . . . . . . . . . . . . . . . . . . . . . . . . . .621

Seiten zum Löschen von Datensätzen erstellen (alle Server) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .627

Seiten mit erweiterten Objekten für die Datenbankverarbeitung erstellen (ColdFusion, ASP,

ASP.NET, JSP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .634

Registrierungsseiten erstellen (ColdFusion, ASP, JSP, PHP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .641

Eine Anmeldeseite erstellen (ColdFusion, ASP, JSP, PHP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .644

Seiten mit Zugriffsautorisierung erstellen (ColdFusion, ASP, JSP, PHP) . . . . . . . . . . . . . . . . . . . . . .646

Ordner in Anwendungen schützen (ColdFusion) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .648

ColdFusion-Komponenten verwenden (ColdFusion) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .649

JavaBeans (JSP) verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .656

Kapitel 21: ASP.NET- und ColdFusion-Formulare erstellen

ColdFusion MX 7-Formulare erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .658

ASP.NET-Formulare erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .670

ASP.NET-Websteuerelemente „DataGrid“ und „DataList“ erstellen . . . . . . . . . . . . . . . . . . . . . . . . .675

Kapitel 22: Aufgaben automatisieren

Aufgaben automatisieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .682

Kapitel 23: Barrierefreiheit

Dreamweaver und Barrierefreiheit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .688

Dreamweaver-Eingabehilfen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .689

Barrierefreie Seiten entwerfen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .691

Kapitel 24: Kurzbefehle und Erweiterungen

Tastaturbefehle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .692

Erweiterungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .694

Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .696

Kapitel 1: Erste Schritte

Falls Sie Ihre neue Software noch nicht installiert haben, sollten Ihre ersten Schritte aus dem Lesen der Informationen zur Installation sowie anderen vorbereitenden Maßnahmen bestehen. Bevor Sie also mit Ihrer Software arbeiten, nehmen Sie sich einige Augenblicke Zeit und lesen Sie die Übersicht zur Adobe-Hilfe und zu den zahlreichen verfügbaren Ressourcen. So erhalten Sie Zugang zu Einführungsvideos, Plug-Ins, Vorlagen, Benutzer-Communities, Seminaren, Tutorials, RSSFeeds und vielen anderen hilfreichen Daten.

Installation

Anforderungen

❖ Die vollständigen Systemanforderungen sowie die Systemempfehlungen für Ihre Adobe®-Software finden Sie in der

Datei „Bitte lesen“ auf der Installations-DVD.

Installieren der Software

1 Schließen Sie alle Adobe-Anwendungen, die auf dem Computer ausgeführt werden.

2 Legen Sie den Installationsdatenträger in das DVD-Laufwerk, und befolgen Sie die angezeigten Anweisungen.

Hinweis: Weitere Informationen finden Sie in der Datei „Bitte lesen“ auf der Installations-DVD.

Aktivieren der Software

Wenn Sie eine Einzelbenutzerlizenz für die Adobe-Software besitzen, werden Sie aufgefordert, Ihre Software zu aktivieren. Dabei handelt es sich um einen einfachen anonymisierten Vorgang, der innerhalb von 30 Tagen nach dem Starten der Software durchgeführt werden muss.

Weitere Informationen zur Produktaktivierung finden Sie in der Datei „Bitte lesen“ auf der Installations-DVD oder auf der Adobe-Website

1 Wenn das Fenster „Aktivierung“ nicht geöffnet ist, wählen Sie „Hilfe“ > „Aktivieren“.

2 Befolgen Sie die Anweisungen auf dem Bildschirm.

Hinweis: Soll die Software auf einem anderen Computer installiert werden, müssen Sie sie zunächst auf dem bisherigen Computer deaktivieren. Wählen Sie „Hilfe“ > „Deaktivieren“.

www.adobe.com/go/activation_de.

Registrieren

Registrieren Sie das Produkt, damit Sie Installationssupport und andere Dienste nutzen können sowie über Updates benachrichtigt werden.

❖ Befolgen Sie zum Registrieren die Anweisungen im Fenster „Registrierung“, das nach dem Installieren und Aktivieren

der Software angezeigt wird.

Wenn Sie die Registrierung verschieben, können Sie sie später jederzeit mit „Hilfe“ > „Registrierung“ durchführen.

Adobe Hilfe

Adobe-Hilfequellen

Die Dokumentation zur Adobe-Software ist in verschiedenen Formaten verfügbar.

DREAMWEAVER CS3

Benutzerhandbuch

Integrierte und LiveDocs-Hilfe

Die integrierte Hilfe bietet Zugriff auf alle Dokumentationen und Schulungsmaterialien, die zum Zeitpunkt der Auslieferung der Software verfügbar waren. Sie können über das Menü „Hilfe“ in Ihrer Adobe-Software darauf zugreifen.

Die LiveDocs-Hilfe umfasst die gesamte integrierte Hilfe des Produkts und zusätzlich Updates sowie Verknüpfungen zu Schulungsmaterialien, die im Web verfügbar sind. Bei einigen Produkten können Sie Kommentare zu den Themen der LiveDocs-Hilfe einfügen. Die LiveDocs-Hilfe für Ihr Produkt finden Sie im Adobe Help Resource Center unter

www.adobe.com/go/documentation_de.

Die meisten Versionen der integrierten und der LiveDocs-Hilfe unterstützen das Durchsuchen der Hilfesysteme mehrerer Produkte. Themen können Verknüpfungen zu relevanten Inhalten im Web oder Hilfethemen anderer Produkte enthalten.

Insgesamt repräsentiert die im Produkt und im Web verfügbare Hilfe einen Ausgangspunkt für den Zugriff auf weiterführende Informationen sowie Informationen von Benutzercommunitys. Die aktuelle und umfassendste Version der Hilfe ist immer im Web verfügbar.

PDF-Dokumentation

Die integrierte Hilfe ist zusätzlich als für die Druckausgabe optimiertes PDF-Dokument verfügbar. Andere Dokumente – Installationshandbücher, White Paper usw. – werden ggf. auch als PDF-Dateien bereitgestellt.

Alle PDF-Dokumentationen sind im Adobe Help Resource Center unter www.adobe.com/go/documentation_de verfügbar. Die mit der Software gelieferte PDF-Dokumentation finden Sie im Ordner „Documents“ auf der Installationsbzw. Inhalts-DVD.

Gedruckte Dokumentation

Gedruckte Ausgaben der integrierten Hilfe eines Produkts können Sie im Adobe Store unter www.adobe.com/go/store_de erwerben. Im Adobe Store finden Sie zudem Bücher, die von Partnerverlagen von Adobe veröffentlicht wurden.

In allen Adobe Creative Suite® 3 -Produkten ist ein gedrucktes Workflow-Handbuch enthalten. Eigenständige AdobeProdukte enthalten unter Umständen auch ein gedrucktes Handbuch „Erste Schritte“.

Verwenden der Hilfe im Produkt

Die integrierte Hilfe wird mit dem Menü „Hilfe“ aufgerufen. Klicken Sie nach dem Öffnen des Adobe-Hilfefensters auf „Durchsuchen“, um die Hilfe der anderen auf dem Computer installierten Adobe-Produkte anzuzeigen.

DREAMWEAVER CS3

Benutzerhandbuch

Diese Hilfe-Funktionen erleichtern die produktübergreifende Einarbeitung:

• Themen können Links zu Hilfesystemen anderer Adobe-Produkte oder zu ergänzenden Informationen im Internet

enthalten.

• Einige Themen beziehen sich auf zwei oder mehr Produkte. Wenn ein Hilfethema z. B. mit einem Adobe Photoshop®-

Symbol und einem Adobe After Effects®-Symbol angezeigt wird, beschreibt das Thema entweder eine Funktion, die beiden Produkten gemeinsam ist, oder produktübergreifende Workflows.

• Sie können die Hilfesysteme von mehreren Produkten durchsuchen.

Geben Sie gesuchte Wortfolgen wie „ursprüngliche Form“ in Anführungszeichen an, damit nur die Themen angezeigt werden, die alle Wörter in der Wortfolge enthalten.

Adobe-Hilfe A. Schaltfläche „Zurück“/„Vorwärts“ (zuvor besuchte Verknüpfungen) B. Unterthemen, die eingeblendet werden können C. Symbole, die ein für mehrere Produkte gültiges Thema kennzeichnen D. Schaltfläche „Vorherige“/„Weiter“ (Themen der Reihe nach)

Eingabehilfen

Die Adobe-Hilfe ist so konzipiert, dass sie auch von Menschen mit Behinderungen wie eingeschränktem Seh- oder Bewegungsvermögen genutzt werden kann. In der Produkt-Hilfe werden die folgenden standardmäßigen Ausgabehilfen unterstützt:

• Die Textgröße lässt sich über standardmäßige Kontextmenübefehle ändern.

• Verknüpfungen werden zur Hervorhebung unterstrichen.

• Wenn Verknüpfungstext nicht dem Titel des Zielinhalts entspricht, wird der Titel im title-Attribut des Anker-Tags

referenziert. Beispielsweise wird bei den Links „Zurück“ und „Weiter“ der Titel des vorherigen bzw. nächsten Themas einbezogen.

• Die Inhalte unterstützen den High-Contrast-Modus (Anzeige mit hohem Kontrastverhältnis).

• Grafiken ohne Beschriftung enthalten alternativen Text.

• Jeder Frame hat einen Titel zur Kennzeichnung des Einsatzzwecks.

• Mit Standard-HTML-Tags wird die Inhaltsstruktur für das Lesen am Bildschirm und für Text-zu-Sprache-

Umwandlungen definiert.

• Formatvorlagen steuern die Formatierung, es gibt also keine eingebetteten Schriften.

DREAMWEAVER CS3

Benutzerhandbuch

Tastaturbefehle für Steuerelemente in der Symbolleiste der Hilfe (Windows)

Schaltfläche „Zurück“ Alt + Nach-links-Taste

Schaltfläche „Weiter“ Alt + Nach-rechts-Taste

Drucken Strg+P

Schaltfläche „Info“ Strg+I

Menü „Durchsuchen“ Alt+Nach-unten-Taste oder Alt+Nach-oben-Taste, um die Hilfe für eine andere Anwendung

anzuzeigen

Suchfeld Strg+S, um die Einfügemarke im Suchfeld zu platzieren

Tastaturbefehle für die Navigation in der Hilfe (Windows)

• Mit Strg+Tab (vorwärts) und Umschalt+Strg+Tab (rückwärts) navigieren Sie zu den verschiedenen Fensterbereichen.

• Mit Tab (vorwärts) und Umschalt + Tab (rückwärts) navigieren Sie zu den verschiedenen Verknüpfungen in einem

Fensterbereich.

• Drücken Sie die Eingabetaste, um eine hervorgehobene Verknüpfung aufzurufen.

• Drücken Sie zum Vergrößern von Text die Strg-Taste und das Gleichheitszeichen.

• Drücken Sie Strg+Bindestrich, um den Text kleiner darzustellen.

Auswahl der richtigen Hilfe-Dokumente

Die folgende Liste fasst die im Hilfemenü zur Verfügung stehende Dokumentation zusammen. Anhand dieser Liste können Sie das Hilfesystem durchsuchen und Ihre Fragen beantworten.

• Die Dreamweaver-Hilfe (mit dem Titel Dreamweaver verwenden), für alle Benutzer, bietet umfassende Informationen zu

allen Funktionen von Adobe® Dreamweaver® CS3.

• Dreamweaver erweitern beschreibt das Dreamweaver-Framework und die API (Application Programming Interface)

und richtet sich an erfahrene Benutzer, die Erweiterungen zur Dreamweaver-Oberfläche erstellen oder diese anpassen möchten.

• In der Dreamweaver API-Referenz werden die Dienstprogramm- und die JavaScript-API dokumentiert, mit denen

erfahrene Benutzer Erweiterungen erstellen und die Oberfläche anpassen können.

• Spry-Framework-Hilfe dokumentiert die Erstellung von Ajax-Datensätzen und -Widgets sowie die Effekte des Spry-

Frameworks. Dieser Bereich enthält auch Codebeispiele und Anleitungen für den schnellen Einstieg. Diese Dokumente sind nicht Dreamweaver-spezifisch. Auf Dreamweaver finden Sie in Dreamweaver verwenden.

• Bei der ColdFusion-Hilfe handelt es sich um eine Auswahl an Büchern aus der Dokumentation von Macromedia®

ColdFusion® von Adobe (die vollständige Dokumentation steht bei LiveDocs zur Verfügung). Diese Hilfedokumente eignen sich sowohl für Anfänger als auch für fortgeschrittene Entwickler, die sich für ColdFusion interessieren.

• Mit der Referenz erhalten Sie Zugang zu Referenzhandbüchern über HTML, Servermodelle und anderen Themen. Diese

richten sich an alle Benutzer, die weitere Informationen zur Codesyntax, zu Codekonzepten usw. wünschen.

Ressourcen

Adobe Video Workshop

Adobe Creative Suite 3 Video Workshop umfasst über 200 Schulungsvideos zu verschiedenen Themenbereichen für Druck-, Web- und Videoprofis.

DREAMWEAVER CS3

Benutzerhandbuch

Mit Adobe Video Workshop können Sie die Benutzung jedes Creative Suite 3-Produkts erlernen. In zahlreichen Videos wird die parallele Verwendung mehrerer Adobe-Anwendungen demonstriert.

Wenn Sie Adobe Video Workshop starten, können Sie auswählen, an welchen Produkten und Themen Sie interessiert sind. Dank der Details zu den einzelnen Videos können Sie Ihr Schulungsprogramm nach Bedarf zusammenstellen.

Moderatoren-Community

Bei dieser Produktversion hat Adobe Systems die Benutzercommunity dazu aufgefordert, in einem Forum eigene Erfahrungen und Erkenntnisse mit anderen auszutauschen. Adobe und lynda.com präsentieren Tutorials, Tipps und Tricks von führenden Designern und Entwicklern wie Joseph Lowery, Katrin Eismann und Chris Georgenes. Sehen und hören Sie Adobe-Experten wie Lynn Grillo, Greg Rewis und Russell Brown. Mehr als 30 Produktexperten teilen ihr Fachwissen.

DREAMWEAVER CS3

Benutzerhandbuch

Tutorials und Quelldateien

Adobe Video Workshop enthält Schulungen für Anfänger und erfahrene Benutzer. Es gibt außerdem Videos zu neuen Funktionen und Techniken. Jedes Video befasst sich mit einem einzelnen Gegenstand und besitzt eine Laufzeit von 3–5 Minuten. Zu den meisten Videos gehört ein illustriertes Tutorial sowie Quelldateien, so dass Sie die einzelnen Arbeitsschritte ausdrucken und selbstständig nachvollziehen können.

Verwenden von Adobe Video Workshop

Über die in Ihrem Creative Suite 3-Produkt enthaltene DVD können Sie auf Adobe Video Workshop zugreifen. Adobe Video Workshop ist auch online unter neue Videos online in Video Workshop bereitstellen, achten Sie also auf Neuigkeiten.

www.adobe.com/go/learn_videotutorials_de verfügbar. Adobe wird regelmäßig

Dreamweaver CS3-Videos

Adobe Video Workshop deckt eine breite Palette von Themen zu Adobe Dreamweaver® CS3 ab:

• Verwenden und Anpassen CSS-basierter Layouts

• Spry-Widgets

• Formulare mit CSS formatieren

• Fehlerbehebung bei Veröffentlichungsproblemen

• Erstellen von Rollovern

Die Videos zeigen auch, wie Sie Dreamweaver CS3 zusammen mit anderer Adobe-Software einsetzen können:

• Websites mit Dreamweaver und Photoshop entwerfen

• Verwenden von Dreamweaver-Vorlagen mit Contribute®

• Kopieren und Einfügen zwischen Webanwendungen

Zugriff auf die Adobe Creative Suite 3-Videotutorials erhalten Sie über den Adobe Video Workshop unter

www.adobe.com/go/learn_videotutorials_de.

Extras

Es stehen zahlreiche Ressourcen zur Verfügung, die Sie bei der Arbeit mit Ihrer Adobe-Software unterstützen. Einige dieser Ressourcen werden während der Installation auf Ihrem Computer installiert. Zusätzliche hilfreiche Beispiele und Dokumente befinden sich auf der Installations-DVD oder auf der DVD mit Inhalten. Die Adobe Exchange-Community bietet online unter folgender Adresse besondere Extras an:

Installierte Ressourcen

Während der Installation werden verschiedene Ressourcen in den Anwendungsordner kopiert. Um diese Dateien anzuzeigen, navigieren Sie auf dem Computer zum Anwendungsordner.

• Windows®: [Startlaufwerk]\Programme\Adobe\Adobe [Anwendung]

• Mac OS®: [Startlaufwerk]/Programme/Adobe [Anwendung]

Der Anwendungsordner enthält unter Umständen die folgenden Ressourcen:

Zusatzmodule Zusatzmodule sind kleine Programme, die vorhandene Anwendungen um neue Funktionen ergänzen.

Installierte Zusatzmodule werden als Optionen in den Menüs „Importieren“ oder „Exportieren“, als Dateiformate in den Dialogfeldern „Öffnen“, „Speichern unter“ und „Original exportieren“ oder als Filter in den entsprechenden Untermenüs angezeigt. Im Ordner für Zusatzmodule, der sich im Anwendungsordner von Photoshop CS3 befindet, werden beispielsweise automatisch einige Zusatzmodule für Spezialeffekte installiert.

www.adobe.com/go/exchange_de.

Vorgaben Vorgaben umfassen eine Vielzahl nützlicher Werkzeuge, Voreinstellungen, Effekte und Bilder. Zu den

Produktvorgaben gehören Pinsel, Farbfelder, Farbgruppen, Symbole, benutzerspezifische Formen, Grafik- und Ebenenformate, Muster, Texturen, Aktionen, Arbeitsbereiche usw. Vorgabeninhalte finden sich in der gesamten Benutzeroberfläche. Einige Vorgaben (z. B. Photoshop-Pinselbibliotheken) werden erst verfügbar, wenn Sie das

DREAMWEAVER CS3

Pelletir

Inc

l illu

ore

giat

lla

fac

ilis

at vero

acc

l illu

lore

giat

lla

fac

ilis

at vero

accu

r In

nt c

ate

;

ent

in i

i fa

ritate

Inve

ation

trave

nt le

ctore

us. C

rit

proce

ent

ritate

;

ent

in iis

ritate

Inve

tig

trave

nt lectore

us.

rit

t e

proce

CHE

ero

dio

iam

t ad

lorp

m a

$ 4

agiam

t ad

atin

t et

ero d

che

agaim

et ad e

lla

$25

r p

sum

iam

t ad

eri

vero d

eum nu

l lam

$35

VEROS

sucicve

o dio

vero d

e u

e s

$15

nul

lam

ero dio

che

a g

aim

e t

d e

u l

lam

eum n

l la

$35

VERO

cicver

o d

ero d

e sum

ullam

o dio

c he

agaime

d e

llam

$35

Benutzerhandbuch

entsprechende Werkzeug auswählen. Wenn Sie Effekte oder Bilder nicht völlig neu erstellen wollen, lassen Sie sich von den Vorgabenbibliotheken inspirieren.

Vorlagen Vorlagendateien können in Adobe Bridge geöffnet und angezeigt, im Begrüßungsbildschirm geöffnet oder direkt

über das Menü „Datei“ geöffnet werden. In Abhängigkeit vom Produkt beschreiben die Vorlagendateien Briefköpfe, Rundschreiben oder Websites, aber auch DVD-Menüs und Video-Schaltflächen. Jede Vorlage genügt professionellen Ansprüchen und demonstriert den optimalen Einsatz der betreffenden Produktfunktionen. Vorlagen sind eine wertvolle Ressource, wenn Sie ein neues Projekt schnell implementieren müssen.

Travel Earth

Best 100 places to see on the planet in your lifetime

Vel: Ad : Vulputate:

volute ipsummy , commy re eugiarud tem

eraes-

exer n ullutet

Beispiele Beispieldateien enthalten komplexere Designs und demonstrieren den Einsatz neuer Funktionen. Diese Dateien

zeigen Ihnen die kreativen Möglichkeiten auf, die Ihnen zur Verfügung stehen.

Schriftarten Mit Ihrem Creative Suite-Produkt werden verschiedene OpenType®-Schriften und Schriftfamilien geliefert.

Im Rahmen der Installation werden Schriften auf den Computer kopiert:

• Windows: [Startlaufwerk]\Windows\Fonts

• Mac OS X: [Startlaufwerk]/Library/Fonts

Informationen zum Installieren von Schriften finden Sie in der Datei „Bitte lesen“ auf der Installations-DVD.

DVD-Inhalt

Die mit dem Produkt gelieferte Installations-DVD bzw. die DVD mit Inhalten enthält zusätzliche Ressourcen, die Sie in Verbindung mit der Software einsetzen können. Der Ordner „Goodies“ enthält produktspezifische Dateien wie Vorlagen, Bilder, Vorgaben, Aktionen, Zusatzmodule und Effekte sowie die Unterordner für Schriften und Stock Photography. Der Ordner „Documentation“ enthält eine PDF-Version der Hilfe, technische Informationen und andere Dokumente wie Beispielformulare, Referenzhandbücher und Informationen zu speziellen Funktionen.

Adobe Exchange

Weitere kostenlose Inhalte finden Sie unter www.adobe.com/go/exchange_de. Diese Website stellt eine Onlinecommunity dar, in der Benutzer tausende kostenloser Aktionen, Erweiterungen, Zusatzmodule usw. für Adobe-Produkte bereitstellen bzw. herunterladen können.

Bridge Home

Bridge Home, eine neue Komponente in Adobe Bridge CS3, stellt aktuelle Informationen zur gesamten Adobe Creative Suite 3-Software an einem zentralen Ort bereit. Starten Sie Adobe Bridge und klicken Sie dann auf das Symbol „Bridge Home“ oben im Bedienfeld „Favoriten“, um auf aktuelle Tipps, Nachrichten und Ressourcen für Ihre Creative SuiteWerkzeuge zuzugreifen.

Hinweis: Bridge Home ist möglicherweise nicht in allen Sprachen verfügbar.

DREAMWEAVER CS3

Benutzerhandbuch

Adobe Design Center

Adobe Design Center bietet Artikel, Inspiration und Instruktionen von Branchenexperten, Topdesignern und AdobePartnerverlagen. Monatlich werden neue Inhalte hinzugefügt.

Hier gibt es hunderte Tutorials zum Entwerfen von Produkten sowie Tipps und Techniken in Videos, dazu HTML-Tutorials und Beispielkapitel.

Neue Ideen bilden das Herz der Kategorien „Denkfabrik“, „Dialogfeld“ und „Galerie“:

• Die Artikel in der Kategorie „Denkfabrik“ erläutern den Einsatz moderner Techniken auf Seiten der Designer und

untersuchen, was ihre Erfahrungen für Design, Designwerkzeuge und die Gesellschaft insgesamt bedeuten.

• In der Kategorie „Dialogfeld“ veröffentlichen Experten neue Ideen in den Bereichen animierte Grafik und digitales

Design.

• Die „Galerie“ demonstriert, wie Künstler animierte Grafik umsetzen.

DREAMWEAVER CS3

Benutzerhandbuch

Adobe Design Center ist auch online unter http://www.adobe.com/de/designcenter verfügbar.

Adobe Developer Center

Adobe Developer Center stellt Beispiele, Tutorials, Artikel und Community-Ressourcen für Entwickler bereit, die komplexe Internetanwendungen, Websites, Inhalte für Mobilfunkgeräte und andere Projekte mit Adobe-Produkten umsetzen. Das Developer Center enthält außerdem Ressourcen für Entwickler, die Zusatzmodule für Adobe-Produkte programmieren.

Außer Beispielcode und Tutorials gibt es RSS-Feeds, Onlineseminare, SDKs, Handbücher zur Skripterstellung und weitere technische Ressourcen.

Adobe Developer Center ist online unter www.adobe.com/go/developer_de verfügbar.

Kundendienst

Besuchen Sie die Adobe Support-Website unter www.adobe.com/de/support, wenn Sie produktspezifische Informationen zur Fehlerbehebung bzw. Informationen zu kostenlosen und kostenpflichtigen Supportoptionen suchen. Über den Link „Schulung“ haben Sie Zugriff auf Bücher von Adobe Press, verschiedene Schulungsressourcen, Adobe-SoftwareZertifizierungsprogramme und vieles mehr.

Downloads

Besuchen Sie www.adobe.com/go/downloads_de, wenn Sie kostenlose Updates, Probeversionen und andere nützliche Software suchen. Zudem erhalten Sie im Adobe Store (unter www.adobe.com/go/store_de) Zugriff auf tausende von Zusatzmodulen von Drittanbietern, mit denen Sie typische Arbeiten automatisieren, Workflows konfigurieren, spezielle Effekte in Profiqualität erstellen können usw.

Adobe Labs

Adobe Labs bietet Ihnen die Möglichkeit, neue und in der Entwicklung befindliche Technologien und Produkte von Adobe auszuprobieren und zu bewerten.

In Adobe Labs sind z. B. die folgenden Ressourcen verfügbar:

• Prerelease-Software und -Technologien

• Codebeispiele und bewährte Verfahren, die die Einarbeitung beschleunigen

• Frühe Versionen von Produkt- und technischen Dokumentationen

DREAMWEAVER CS3

Benutzerhandbuch

• Foren, Inhalte auf Wiki-Basis und andere Ressourcen unterstützen die Interaktion mit gleichgesinnten Entwicklern

Adobe Labs begünstigt eine kollaborative Software-Entwicklung. Durch diese Unterstützung sind Kunden schnell in der Lage, neue Produkte und Technologie produktiv einzusetzen. Adobe Labs ist außerdem ein Forum für frühzeitige Rückmeldungen. Sie helfen den Adobe-Teams, Software zu entwickeln, die den Bedürfnissen und Erwartungen der Nutzer gerecht wird.

Besuchen Sie Adobe Labs unter www.adobe.com/go/labs_de.

Benutzercommunitys

Den Benutzern stehen Foren, Blogs und andere Möglichkeiten zum Austauschen von Technologien, Tools und Informationen zur Verfügung. Benutzer können Fragen stellen und erfahren, wie andere ihre Software bestmöglich einsetzen. Benutzerforen stehen in deutscher, englischer, französischer und japanischer Sprache zur Verfügung; Blogs werden in zahlreichen Sprachen verfasst.

Besuchen Sie www.adobe.com/de/communities, um an Foren oder Blogs teilzunehmen.

Neue Funktionen

Die wichtigsten neuen Funktionen von Adobe Dreamweaver CS3

Spry-Framework für Ajax

In Adobe® Dreamweaver® CS3 können Sie mithilfe des Spry-Frameworks für Ajax dynamische Benutzeroberflächen visuell entwerfen, entwickeln und bereitstellen. Bei dem Spry-Framework für Ajax handelt es sich um eine JavaScript-Bibliothek für Webdesigner, mit der Entwickler Webseiten erstellen können, die eine höherwertige Benutzererfahrung bieten. Im Unterschied zu anderen Ajax-Frameworks eignet sich Spry für Designer und Entwickler gleichermaßen, da es zu 99% auf HTML aufbaut. Siehe hierzu auch den Abschnitt

Spry-Widgets

Spry-Widgets sind vorgefertigte allgemeine Komponenten für Benutzeroberflächen, die Sie mithilfe von CSS anpassen und dann Ihren Webseiten hinzufügen können. In Dreamweaver können Sie Ihren Webseiten mehrere Spry-Widgets hinzufügen, wie z. B. XML-gesteuerte Listen und Tabellen, Akkordeon-Menüs, Registerkarten sowie Formularelemente mit Überprüfungen. Siehe hierzu auch den Abschnitt

Spry-Effekte

Spry-Effekte stellen eine einfache und elegante Möglichkeit dar, das Aussehen Ihrer Website zu verbessern. Sie können auf beinahe jedes Element einer HTML-Seite angewendet werden. Mithilfe von Spry-Effekten können Sie Elemente vergrößern, verkleinern, ausblenden und hervorheben. Außerdem können Sie Seitenelemente für eine bestimmte Zeit optisch verändern und andere besondere Effekte hinzufügen. Siehe hierzu auch den Abschnitt auf Seite 474.

Erweiterte Photoshop CS3-Integration

Dreamweaver ermöglicht die erweiterte Integration von Photoshop CS3. Jetzt können die Designer einfach einen beliebigen auch aus mehreren Ebenen bestehenden Teil eines Designs in Photoshop auswählen und ohne Weiteres in eine Dreamweaver-Seite einfügen. Dreamweaver stellt ein Dialogfeld bereit, in dem Optimierungsmöglichkeiten für Bilder angeboten werden. Sollten Sie ein Bild bearbeiten müssen, brauchen Sie nur auf das Bild doppelzuklicken und können die ursprüngliche PSD-Datei mit allen Ebenen in Photoshop bearbeiten. Siehe hierzu auch den Abschnitt arbeiten“ auf Seite 368.

„Spry-Seiten visuell erstellen“ auf Seite 439.

„Spry-Widgets hinzufügen“ auf Seite 439.

„Spry-Effekte hinzufügen“

„Mit Photoshop

DREAMWEAVER CS3

Benutzerhandbuch

Browserkompatibilitätsprüfung

Mit der neuen Browserkompatibilitätsprüfung können Sie in Dreamweaver Berichte erstellen, in denen die CSS-bezogenen Darstellungsprobleme in mehreren Browsern dokumentiert werden können. So werden Problembereiche in der Codeansicht mit einer grünen Fläche unterlegt, so dass Sie genau erkennen können, wo das Problem zu suchen ist. Nach der Feststellung eines Problems können Sie dieses entweder schnell beheben (sofern Sie die Lösung kennen) oder, falls Sie weitere Informationen benötigen, zum Adobe CSS Advisor wechseln. Siehe hierzu auch den Abschnitt „Browserübergreifende Probleme bei der CSS-Wiedergabe überprüfen“ auf Seite 141.

Adobe CSS Advisor

Auf der Website „Adobe CSS Advisor“ erhalten Sie Informationen zu aktuellen CSS-Problemen. Sie können während der Browserkompatibilitätsprüfung von der Benutzeroberfläche von Dreamweaver unmittelbar auf diese Webseite zugreifen. Im CSS Advisor können Sie besser als in einem Forum, einer Wiki-Seite oder einer Diskussionsgruppe vorhandene Inhalte kommentieren oder mit Vorschlägen oder Verbesserungen versehen, oder auch neue Probleme einstellen, von deren Kenntnis die gesamte Benutzer-Community profitiert. Siehe hierzu auch den Abschnitt

„Browserübergreifende Probleme

bei der CSS-Wiedergabe überprüfen“ auf Seite 141.

CSS-Layouts

Dreamweaver bietet eine Reihe vorgefertigter CSS-Layouts zur schnellen Aufbereitung Ihrer Seite. Durch die umfangreichen im Code integrierten Kommentare erfahren Sie viel Neues über das Layout von CSS-Seiten. Die gängigsten Website-Designs sind ein-, zwei- oder dreispaltige Layouts, die um zusätzliche Elemente erweitert wurden, wie beispielsweise Kopf- und Fußzeilen. Dreamweaver bietet jetzt eine umfassende Liste der wichtigsten Layouts, die Sie an Ihre Zwecke anpassen können. Weitere Hinweise finden Sie im Abschnitt

„Eine Seite mit einem CSS-Layout erstellen“ auf

Seite 148.

CSS verwalten

Das Feature „CSS verwalten“ erleichtert Ihnen unter anderem die Übertragung von CSS-Regeln von einem Dokument auf ein anderes, vom Kopf eines Dokuments auf ein externes Blatt und auch zwischen externen CSS-Dateien. Darüber hinaus können Sie Inline-CSS in CSS-Regeln umwandeln und diese durch Ziehen und Ablegen an jeder beliebigen Stelle wiederverwenden. Weitere Informationen finden Sie in den Abschnitten

„CSS-Regeln verschieben“ auf Seite 137 und

„Inline-CSS einer CSS-Regel hinzufügen“ auf Seite 139.

Adobe Device Central

In Dreamweaver sowie in allen Produkten der Creative Suite 3 integriert ist auch die Funktion Adobe Device Central, welche die Erstellung von Inhalten für tragbare Geräte vereinfacht. Sie erhalten schnell und einfach Zugang zu wesentlichen technischen Daten jedes Geräts sowie die Möglichkeit, Texte und Bilder einer HTML-Seite so zu verkleinern, dass sie genauso angezeigt werden, wie später auf dem tragbaren Gerät selbst. Weitere Informationen finden Sie im Abschnitt „Vorschau von Seiten auf mobilen Geräten“ auf Seite 296.

Adobe Bridge CS3

Mithilfe von Adobe Bridge CS3 können Sie in Dreamweaver schnell und konsistent Ihre Bilder und Elemente verwalten. Adobe Bridge bietet einen zentralen Zugang zu allen Projektdateien, Anwendungen und Einstellungen und ermöglicht das Tagging von XMP-Metadaten sowie die Suche nach bestimmten Inhalten und Informationen. Die Organisations- und Freigabefunktionen dieses Produkts sowie der Zugang zu Adobe Stock Photos gewährleisten einen effizienteren Kreativablauf und die ständige Übersicht über alle Druck-, Web-, Video- und Mobilgerätprojekte. Siehe hierzu auch den Abschnitt

„Mit Bridge arbeiten“ auf Seite 377.

Kapitel 2: Arbeitsbereich

Der Arbeitsbereich von Adobe® Dreamweaver® CS3 enthält Symbolleisten, Inspektoren und Bedienfelder, mit denen Sie Webseiten erstellen können. Sie haben hier die Möglichkeit, das generelle Erscheinungsbild und das Verhalten des Arbeitsbereichs anzupassen.

Dreamweaver Arbeitsablauf und -bereich

Überblick über den Dreamweaver-Arbeitsablauf

Für die Erstellung von Websites stehen verschiedene Methoden zur Verfügung, darunter folgende:

Sites planen und einrichten

Bestimmen Sie den Zielort für die Dateien, und prüfen Sie Ressourcen, Zielgruppe sowie den Bestimmungszweck. 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. Sobald Sie Ihre Informationen gegliedert und eine geeignete Struktur ausgearbeitet haben, können Sie mit der Erstellung der Website beginnen. (Siehe dazu den Abschnitt

„Dreamweaver-Sites verwenden“ auf Seite 38.

Site-Dateien strukturieren und verwalten

Im Bedienfeld „Dateien“ lassen sich Dateien und Ordner bequem hinzufügen, löschen und umbenennen. Es bietet außerdem viele Tools zum Verwalten von Websites, Übertragen von Dateien zwischen lokalem Server und Remote-Server, Einchecken und Auschecken von Dateien sowie für den Schutz vor unbeabsichtigtem Überschreiben und zum Synchronisieren von Dateien zwischen der lokalen Site und der Remote-Site. Mithilfe des Bedienfelds „Elemente“ können Sie die Elemente einer Website ganz leicht verwalten. Die meisten Elemente können direkt aus dem Bedienfeld in ein Dreamweaver-Dokument gezogen werden. Mithilfe von Dreamweaver können Sie zudem bestimmte Aspekte von Adobe®Contribute®-Sites verwalten. (Siehe dazu die Abschnitte „Elemente und Bibliotheken verwalten“ auf Seite 108.

Webseiten-Layout gestalten

Wählen Sie das von Ihnen bevorzugte Layoutverfahren, oder verwenden Sie eine Kombination aus DreamweaverLayoutoptionen, um Ihr Seitenlayout zu gestalten. Sie können AP-Elemente, CSS-Positionierungsstile oder vordefinierte CSS-Layouts in Dreamweaver für die Erstellung Ihres Layouts verwenden. Mit den Tabellenwerkzeugen können Sie Webseiten ohne großen Zeitaufwand erstellen und anschließend die Seitenstruktur verändern. Falls in einem Webbrowser mehrere Elemente gleichzeitig angezeigt werden sollen, können Sie das Dokument-Layout mithilfe von Frames erstellen. Schließlich können Sie aufbauend auf einer Dreamweaver-Vorlage neue Seiten erstellen und deren Layout anschließend automatisch aktualisieren, wenn sich die Vorlage ändert. (Siehe dazu die Abschnitte und „Seitenlayouts mit HTML gestalten“ auf Seite 171.

Inhalt in Seiten einfügen

Fügen Sie Elemente wie Text, Bilder, Rollover-Bilder, Imagemaps, Farben, Filme, Sound, HTML-Links, Sprungmenüs und andere Medien in Ihre Webseiten ein. Sie können die integrierten Seitenerstellungsfunktionen für solche Elemente wie Seitentitel und Hintergrundbilder verwenden, Einträge direkt vornehmen oder Inhalte aus anderen Dokumenten importieren. Dreamweaver bietet zudem Verhalten für die Durchführung von Aufgaben für bestimmte Ereignisse, wie z. B. die Überprüfung von Formulardaten auf ihre Richtigkeit, wenn der Benutzer auf die Senden-Schaltfläche klickt, oder das Öffnen eines zweiten Browserfensters, wenn die Hauptseite vollständig geladen wurde. Schließlich bietet Dreamweaver noch Werkzeuge zur Maximierung der Website-Performance und das Testen der Webseite-Kompatibilität mit unterschiedlichen Browsern. (Siehe dazu den Abschnitt

„Dateien und Ordner verwalten“ auf Seite 76 und

„Seiten mit CSS erstellen“ auf Seite 120

„Inhalt in Seiten einfügen“ auf Seite 211.

DREAMWEAVER CS3

Benutzerhandbuch

Seiten durch manuelle Kodierung erstellen

Webseiten können auch handcodiert werden. Dreamweaver verfügt sowohl über benutzerfreundliche visuelle Bearbeitungstools als auch über eine anspruchsvolle Codeumgebung. Zur Gestaltung und Bearbeitung Ihrer Seiten können Sie diese Funktionen einzeln oder gemeinsam einsetzen. (Siehe dazu den Abschnitt

Webanwendungen für dynamische Inhalte einrichten

„Mit Seitencode arbeiten“ auf Seite 297.

Viele Websites enthalten dynamische Seiten, auf denen Besucher Informationen anzeigen können, die in Datenbanken gespeichert sind. Gewöhnlich ermöglichen es diese Seiten einigen Besuchern auch, neue Informationen hinzuzufügen und in den Datenbanken enthaltene Informationen zu bearbeiten. Um solche Seiten zu erstellen, müssen Sie zunächst einen Web- und einen Anwendungsserver einrichten, eine Dreamweaver-Site erstellen oder bearbeiten und die Verbindung zu einer Datenbank herstellen. (Siehe dazu den Abschnitt

Dynamische Seiten erstellen

„Erstellen dynamischer Sites vorbereiten“ auf Seite 478.

In Dreamweaver können Sie viele verschiedene Quellen für dynamischen Inhalt definieren, z. B. aus Datenbanken extrahierte Datensätze, Formularparameter und JavaBeans-Komponenten. Um dynamischen Inhalt in eine Seite einzufügen, ziehen Sie ihn einfach auf die Seite.

Sie können festlegen, dass auf der Seite nur ein einziger Datensatz oder viele Datensätze gleichzeitig angezeigt werden. Sie können mehrere Seiten von Datensätzen anzeigen, besondere Hyperlinks zum Navigieren zwischen Datensatzseiten hinzufügen und Datensatzzähler erstellen, mit deren Hilfe die Besucher die Datensätze verfolgen können. Sie können Anwendungs- und Geschäftslogik mithilfe von Technologien wie Macromedia® ColdFusion® von Adobe® und bestimmten Webdiensten integrieren. Falls Sie größere Flexibilität benötigen, können Sie eigene Serververhalten und interaktive Formulare erstellen. (Siehe dazu den Abschnitt

„Dynamische Seiten erstellen“ auf Seite 525.

Testen und veröffentlichen

Das Testen Ihrer Seiten gestaltet sich während des Entwicklungszyklus als fortlaufender Prozess. Am Ende des Arbeitsablaufs veröffentlichen Sie die Website auf einem Server. Viele Entwickler sind auch für eine regelmäßige Wartung der Website zuständig, um die Aktualität des Inhalts und eine korrekte Funktionsweise zu gewährleisten. (Siehe dazu den Abschnitt

„Dateien vom Server abrufen/auf dem Server bereitstellen“ auf Seite 85.

Arbeitsbereich

Im Dreamweaver-Arbeitsbereich können Sie Dokumente und Objekteigenschaften anzeigen. Im Arbeitsbereich sind viele der gängigsten Vorgänge in Symbolleisten angeordnet, damit Sie Änderungen in Dokumenten schnell durchführen können.

Unter Windows® bietet Dreamweaver ein integriertes Layout, das alle Funktionen in einem einzigen Fenster zusammenfasst. Im integrierten Arbeitsbereich unter Windows sind alle Fenster und Bedienfelder in einem einzigen größeren Anwendungsfenster integriert.

DREAMWEAVER CS3

Benutzerhandbuch

A B C D

E F G

A: Einfügeleiste B: Dokument (Symbolleiste) C: Dokumentfenster D: Bedienfeldgruppen E: Tag-Selektor F: Eigenschafteninspektor G: Bedienfeld „Dateien“

Auf Mac OS®-Computern kann Dreamweaver mehrere Dokumente in einem einzelnen Fenster anzeigen. Jedes Dokument wird dann über eine eigene Registerkarte verwaltet. Dreamweaver kann zudem als Teil eines schwebenden Arbeitsbereichs dargestellt werden, in dem jedes Dokument in einem eigenen Fenster angezeigt wird. Bedienfeldgruppen sind anfangs aneinander gedockt, lassen sich jedoch abdocken und in eigenen Fenstern anzeigen. Fenster werden automatisch aneinander, an den Seiten des Bildschirms und am Dokumentfenster „eingerastet“, wenn Sie sie ziehen oder ihre Größe ändern.

A B C D

E F G

A: Einfügeleiste B: Dokument (Symbolleiste) C: Dokumentfenster D: Bedienfeldgruppen E: Tag-Selektor F: Eigenschafteninspektor G: Bedienfeld „Dateien“

Ein Tutorial zum Einrichten des Entwicklungs-Arbeitsbereichs finden Sie unter www.adobe.com/go/vid0143_de.

DREAMWEAVER CS3

Benutzerhandbuch

Verwandte Themen

„Symbolleisten, Inspektoren, Kontextmenüs und Bedienfelder verwenden“ auf Seite 26

„Arbeitsbereichslayout auswählen (Windows)“ auf Seite 32

„Arbeitsbereichslayout auswählen (Macintosh)“ auf Seite 32

„Dokumente mit Registerkarte anzeigen (Macintosh)“ auf Seite 32

Arbeitsbereich

Der Arbeitsbereich enthält die folgenden Elemente.

Hinweis: Dreamweaver enthält viele weitere Bedienfelder, Inspektoren und Fenster. Die Bedienfelder, Inspektoren und Fenster werden über das Menü „Fenster“ geöffnet. Falls ein Bedienfeld, Inspektor oder Fenster als geöffnet markiert, aber nicht zu sehen ist, wählen Sie „Fenster“ > „Fenster anordnen“, um alle geöffneten Fenster geordnet darzustellen.

Begrüßungsbildschirm ermöglicht das Öffnen eines kürzlich bearbeiteten oder das Erstellen eines neuen Dokuments. Von

der Hauptseite aus können Sie außerdem Näheres über Dreamweaver erfahren, indem Sie an einer Tour durch das Produkt teilnehmen oder ein Tutorial durcharbeiten.

Einfügeleiste enthält Schaltflächen zum Einfügen verschiedener Objekttypen, wie Bilder, Tabellen und AP-Elemente, in

ein Dokument. Jedes Objekt entspricht einem HTML-Codeabschnitt, in dem Sie beim Einfügen verschiedene Attribute festlegen können. Sie können beispielsweise eine Tabelle einfügen, indem Sie in der Einfügeleiste auf das Symbol „Tabelle“ klicken. Wenn Sie es vorziehen, können Sie zum Einfügen von Objekten anstelle der Einfügeleiste auch das Menü „Einfügen“ verwenden.

Dokumentsymbolleiste enthält Schaltflächen, mit denen Sie verschiedene Ansichten des Dokumentfensters (wie die

Entwurfsansicht und die Codeansicht), diverse Ansichtsoptionen und häufig verwendete Operationen wie das Anzeigen einer Vorschau im Browser aufrufen können.

Die Standardsymbolleiste (wird im Standardlayout des Arbeitsbereichs nicht angezeigt) enthält Schaltflächen für häufig

verwendete Operationen der Menüs „Datei“ und „Bearbeiten“: „Neu“, „Öffnen“, „Speichern“, „Alles Speichern“, „Ausschneiden“, „Kopieren“, „Einfügen“, „Rückgängig“ und „Wiederholen“. Um die Standardsymbolleiste anzuzeigen, wählen Sie „Ansicht“ > „Symbolleisten“ > „Standard“.

Code-Symbolleiste (wird nur in der Codeansicht angezeigt) enthält Schaltflächen für zahlreiche

Standardkodieroperationen.

Die Symbolleiste „Stilwiedergabe“ (in der Standardeinstellung ausgeblendet) enthält Schaltflächen, mit denen Sie sich

beim Verwenden von medienabhängigen Stylesheets ansehen können, wie ein Entwurf in verschiedenen Medientypen aussieht. Sie enthält ferner eine Schaltfläche zum Aktivieren oder Deaktivieren von Cascading Style Sheets (CSS)-Stilen.

Dokumentfenster zeigt die Dokumente an, während Sie sie erstellen und bearbeiten.

Eigenschafteninspektor dient zum Anzeigen und Ändern diverser Eigenschaften eines ausgewählten Seiten- oder

Textobjekts. Jeder Objekttyp verfügt über spezifische Eigenschaften. Der Eigenschafteninspektor wird im ArbeitsbereichLayout „Coder“ in der Standardeinstellung reduziert angezeigt.

Tag-Selektor

befindet sich in der Statusleiste am unteren Rand des Dokumentfensters. Zeigt die Hierarchie der Tags an, die

die aktuelle Auswahl umgeben. Um ein Tag und seinen gesamten Inhalt auszuwählen, klicken Sie in der Hierarchie auf das Tag.

Bedienfeldgruppen sind Gruppen verwandter Bedienfelder, die unter einer Überschrift zusammengefasst sind. Um eine

Bedienfeldgruppe zu erweitern, klicken Sie auf den Erweiterungspfeil links neben dem Gruppennamen. Um eine Bedienfeldgruppe abzudocken, ziehen Sie das Grifffeld auf der linken Seite der Titelleiste der Gruppe.

Bedienfeld „Dateien“ ermöglicht die Verwaltung der Dateien und Ordner, die Bestandteil einer Dreamweaver-Site sind

oder auf einem Remote-Server gespeichert werden. Über das Bedienfeld „Dateien“ können Sie auch auf alle Dateien zugreifen, die sich auf dem lokalen Datenträger befinden, ähnlich dem Windows Explorer (Windows) oder dem Finder (Macintosh).

DREAMWEAVER CS3

Benutzerhandbuch

Verwandte Themen

„Im Dokumentfenster arbeiten“ auf Seite 23

„Symbolleisten, Inspektoren, Kontextmenüs und Bedienfelder verwenden“ auf Seite 26

„Bedienfeldgruppen“ auf Seite 29

Überblick über das Dokumentfenster

Im Dokumentfenster wird das aktuelle Dokument angezeigt. Die folgenden Ansichten stehen zur Auswahl:

Entwurfsansicht ist eine Entwurfsumgebung für grafisches Seitenlayout, grafisches Bearbeiten und schnelle

Anwendungsentwicklung. In dieser Ansicht kann das Dokument in Dreamweaver vollständig bearbeitet werden und wird grafisch ähnlich der Darstellung in einem Browser angezeigt. Die Entwurfsansicht lässt sich so konfigurieren, dass dynamischer Inhalt angezeigt wird, während Sie das Dokument bearbeiten.

Codeansicht ist eine Umgebung zum manuellen Verfassen und Bearbeiten von HTML, JavaScript und

Serversprachencode, wie z. B. PHP oder ColdFusion Markup Language (CFML) sowie anderen Arten von Code.

Code- und Entwurfsansicht ermöglicht es, sowohl die Codeansicht als auch die Entwurfsansicht eines Dokuments in einem

Fenster anzuzeigen.

Wenn das Dokumentfenster eine Titelleiste besitzt, werden darin der Titel der Seite und in Klammern Pfad und Name der Datei angezeigt. Hinter dem Dateinamen zeigt Dreamweaver ein Sternchen (*) an, falls Sie Änderungen vorgenommen und diese noch nicht gespeichert haben.

Ist das Dokumentfenster im integrierten Arbeitsbereichlayout maximiert (nur Windows), besitzt es keine Titelleiste. In diesem Fall werden Seitentitel sowie Pfad und Name der Datei in der Titelleiste des Hauptfensters des Arbeitsbereichs angezeigt.

In einem maximierten Dokumentfenster werden am oberen Rand Registerkarten mit den Dateinamen aller geöffneten Dokumente angezeigt. Um zu einem Dokument zu wechseln, klicken Sie auf seine Registerkarte.

Verwandte Themen

„Im Dokumentfenster arbeiten“ auf Seite 23

„Code erstellen in Dreamweaver“ auf Seite 297

„Live-Daten in der Entwurfsansicht anzeigen“ auf Seite 565

Überblick über die Symbolleiste des Dokuments

enthält Schaltflächen, mit denen Sie zwischen verschiedenen Ansichten des Dokuments schnell umschalten können: Codeansicht, Entwurfsansicht und eine geteilte Ansicht, in der Sie Code- und Entwurfsansicht gleichzeitig sehen können.

Außerdem befinden sich in der Symbolleiste einige häufig verwendete Befehle und Optionen zur Dokumentanzeige und zur Übertragung des Dokuments zwischen lokaler Site und Remote-Sites.

A B C D E F G H I J K

A: Codeansicht anzeigen B: Code- und Entwurfsansicht anzeigen C: Entwurfsansicht anzeigen D: Dokumenttitel E: Dateiverwaltung F: Vorschau/Debug im Browser G: Entwurfsansicht aktualisieren H: Ansichtsoptionen I: Visuelle Hilfsmittel J: Markup überprüfen K: Browserkompatibilität prüfen

In der Dokumentsymbolleiste werden die folgenden Optionen angezeigt:

Codeansicht anzeigen zeigt ausschließlich die Codeansicht im Dokumentfenster an.

Code- und Entwurfsansicht anzeigen teilt das Dokumentfenster in einen Code- und einen Entwurfsbereich. Wenn Sie

diese kombinierte Ansicht auswählen, wird im Menü „Ansichtsoptionen“ die Option „Entwurfsansicht im Vordergrund“ verfügbar.

DREAMWEAVER CS3

Benutzerhandbuch

Entwurfsansicht anzeigen zeigt ausschließlich die Entwurfsansicht im Dokumentfenster an.

Hinweis: Wenn Sie mit XML, JavaScript, CSS oder anderen codebasierten Dateitypen arbeiten, können Sie die Dateien nicht in der Entwurfsansicht anzeigen. Die Schaltflächen „Entwurf“ und „Teilen“ sind dann abgeblendet.

Dokumenttitel ermöglicht Ihnen die Eingabe eines Titels für das Dokument, der in der Titelleiste des Browsers angezeigt

wird. Wenn das Dokument bereits einen Titel hat, wird er in diesem Feld angezeigt.

Dateiverwaltung öffnet das Popupmenü „Dateiverwaltung“.

Vorschau/Debug im Browser ermöglicht es Ihnen, das Dokument im Browser als Vorschau anzuzeigen oder zu debuggen.

Wählen Sie hierzu im Popupmenü einen Browser aus.

Entwurfsansicht aktualisieren aktualisiert die Entwurfsansicht des Dokuments, nachdem Sie es in der Codeansicht

geändert haben. In der Codeansicht vorgenommene Änderungen werden nicht automatisch in der Entwurfsansicht angezeigt, sondern erst dann, wenn Sie bestimmte Aktionen durchführen, z. B. die Datei speichern oder auf diese Schaltfläche klicken.

Hinweis: Bei der Aktualisierung werden auch DOM (Document Object Model)-abhängige Codefunktionen neu angezeigt, wie z. B. die Möglichkeit zur Auswahl der öffnenden oder schließenden Tags eines Codeblocks.

Ansichtsoptionen ermöglicht es Ihnen, Optionen für die Code- und die Entwurfsansicht festzulegen, z. B. welche Ansicht

im Vordergrund angezeigt werden soll. Die im Menü enthaltenen Optionen beziehen sich auf die aktuelle Ansicht: Entwurfsansicht, Codeansicht oder beide Ansichten.

Visuelle Hilfsmittel ermöglicht die Nutzung verschiedener visueller Hilfsmittel zum Entwerfen von Seiten.

Markup überprüfen ermöglicht die Überprüfung des aktuellen Dokuments oder eines ausgewählten Tags auf Gültigkeit.

Browserkompatibilität prüfen ermöglicht die Überprüfung der verwendeten CSS auf Kompatibilität mit verschiedenen

Browsern.

Verwandte Themen

„Symbolleisten anzeigen“ auf Seite 26

„Die Codeumgebung individuell anpassen“ auf Seite 304

„Head-Inhalt anzeigen und bearbeiten“ auf Seite 332

„Visuelle Hilfsmittel für das Layout verwenden“ auf Seite 171

Die Standardsymbolleisten

Die Standardsymbolleiste enthält Schaltflächen für häufig verwendete Operationen der Menüs „Datei“ und „Bearbeiten“: „Neu“, „Öffnen“, „Speichern“, „Alles Speichern“, „Ausschneiden“, „Kopieren“, „Einfügen“, „Rückgängig“ und „Wiederholen“. Diese Schaltflächen haben dieselben Funktionen wie die entsprechenden Menübefehle.

Verwandte Themen

„Symbolleisten anzeigen“ auf Seite 26

„Dokumente öffnen und erstellen“ auf Seite 67

Überblick über die Statusleiste

Die Statusleiste am unteren Rand des Dokumentfensters enthält zusätzliche Informationen über das Dokument, das Sie gerade erstellen.

DREAMWEAVER CS3

Benutzerhandbuch

A B C D E F G

A: Tag-Selektor B: Werkzeug auswählen C: Handwerkzeug D: Zoomwerkzeug E: Vergrößerung einstellen F: Popupmenü „Fenstergröße“ G: Dokumentgröße und geschätzte Downloadzeit

Tag-Selektor Zeigt die Hierarchie der Tags an, die die aktuelle Auswahl umgeben. Um ein Tag und seinen gesamten Inhalt

auszuwählen, klicken Sie in der Hierarchie auf das Tag. Wenn Sie auf Dokuments markiert. Um die

class- oder id-Attribute eines Tags im Tag-Selektor festzulegen, klicken Sie mit der rechten

<body> klicken, wird der gesamte Hauptteil des

Maustaste (Windows) bzw. bei gedrückter Taste <Ctrl> (Macintosh) auf das Tag, und wählen Sie im Kontextmenü eine Klasse oder eine ID aus.

Werkzeug auswählen aktiviert bzw. deaktiviert das Handwerkzeug.

Handwerkzeug Es ermöglicht auf ein Dokument zu klicken und das Dokument in das Dokumentfenster zu ziehen.

Zoom-Werkzeug und Popupmenü „Vergrößerung einstellen“ ermöglicht eine vergrößerte oder verkleinerte Darstellung

Ihres Dokuments.

Popupmenü „Fenstergröße“ (wird nur in der Entwurfsansicht angezeigt) ermöglicht die Anpassung der Größe des

Dokumentfensters an fest definierte oder eigene Maße.

Dokumentgröße und Downloadzeit zeigt die geschätzte Dateigröße und Downloadzeit für die Seite einschließlich aller zu

diesem Dokument gehörenden Dateien an, z. B. Bild- und anderen Mediendateien.

Verwandte Themen

„Fenstergröße und Verbindungsgeschwindigkeit festlegen“ auf Seite 25

„Ansicht vergrößern und verkleinern“ auf Seite 220

„Das Dokumentfenster vergrößern oder verkleinern“ auf Seite 24

„Voreinstellungen für Downloadzeit und -größe festlegen“ auf Seite 222

Einfügeleiste - ein Überblick

Die Einfügeleiste enthält Schaltflächen zum Erstellen und Einfügen von Objekten wie z. B. Tabellen, AP-Elementen und Bildern. Wenn Sie mit dem Mauszeiger über eine Schaltfläche fahren, wird der Name der Schaltfläche als QuickInfo angezeigt.

Die Schaltflächen sind in mehreren Kategorien zusammengefasst. Zwischen diesen Kategorien können Sie wechseln, indem Sie am oberen Rand der Einfügeleiste auf eine der Registerkarten klicken. Weitere Kategorien werden angezeigt, wenn das aktuelle Dokument Servercode enthält, wie z. B. bei ASP- oder CFML-Dokumenten. Wenn Sie Dreamweaver starten, wird die zuletzt aktive Kategorie geöffnet.

Einige Kategorien weisen Schaltflächen mit Popupmenüs auf. Wenn Sie eine Option aus einem Popupmenü auswählen, wird diese zur Standardaktion der entsprechenden Schaltfläche. Beispiel: Wenn Sie im Popupmenü der Schaltfläche „Bild“ die Option „Bild-Platzhalter“ auswählen, fügt Dreamweaver einen Bild-Platzhalter ein, wenn Sie das nächste Mal auf die Schaltfläche „Bild“ klicken. Jedes Mal, wenn Sie im Popupmenü eine neue Option auswählen, wird diese zur Standardaktion der entsprechenden Schaltfläche.

Die Einfügeleiste ist nach den folgenden Kategorien unterteilt:

Kategorie „Allgemein“ ermöglicht das Erstellen und Einfügen der am häufigsten verwendeten Objekte, wie etwa Bilder

und Tabellen.

DREAMWEAVER CS3

Benutzerhandbuch

Kategorie „Layout“ ermöglicht das Einfügen von Tabellen, div-Tags, Frames und Spry-Widgets. Bei der Bearbeitung von

Tabellen können Sie zwischen zwei Ansichten auswählen: „Standard“ (Voreinstellung) und „Erweitert“.

Kategorie „Formulare“ enthält Schaltflächen zum Erstellen von Formularen und zum Einfügen von Formularelementen,

einschließlich Spry-Überprüfungs-Widgets.

Kategorie „Daten“ ermöglicht das Einfügen von dynamischen Elementen, wie z. B. Datensatzgruppen, wiederholten

Bereichen sowie Formularen zum Einfügen und Aktualisieren von Datensätzen.

Kategorie „Spry“ enthält Schaltflächen zum Entwurf von Spry-Seiten, einschließlich Spry-Datenobjekten und -Widgets.

Kategorie „Text“ ermöglicht das Einfügen verschiedener Tags zur Text- und Listenformatierung, z. B. b, em, p, h1 und ul.

Kategorie „Favoriten“ ermöglicht die Gruppierung und Organisierung der Schaltflächen der Einfügeleiste, die Sie am

häufigsten benutzen.

Servercode-Kategorien sind nur für Seiten verfügbar, die eine bestimmte Codesprache verwenden. Zu ihnen zählen ASP,

ASP.NET, CFML Basic, CFML Flow, CFML Advanced, JSP und PHP. Alle diese Kategorien enthalten Servercode-Objekte, die Sie in der Codeansicht einfügen können.

Verwandte Themen

„Die Einfügeleiste verwenden“ auf Seite 26

„Spry-Seiten visuell erstellen“ auf Seite 439

Code-Symbolleiste - ein Überblick

Die Code-Symbolleiste enthält Schaltflächen zum Ausführen zahlreicher Kodieroperationen wie z. B. Reduzieren und Erweitern von Codeauswahlen, Hervorheben von ungültigem Code, Anwenden und Entfernen von Kommentaren, Einziehen von Code und Einfügen kürzlich verwendeter Codefragmente. Diese Symbolleiste ist nur in der Code-Ansicht enthalten und wird vertikal entlang der linken Seite des Dokumentfensters angezeigt.

Es ist nicht möglich, die Code-Symbolleiste abzudocken oder zu verschieben, Sie können sie allerdings ausblenden.

Sie können die Code-Symbolleiste ferner bearbeiten, um weitere Schaltflächen anzuzeigen (z. B. „Umbruch“, „Versteckte Zeichen“ und „Automatischer Einzug“) oder nicht verwendete Schaltflächen auszublenden. Dazu müssen Sie die XMLDatei bearbeiten, die die Symbolleiste generiert. Weitere Informationen hierzu finden Sie im Handbuch Dreamweaver

erweitern.

DREAMWEAVER CS3

Benutzerhandbuch

Verwandte Themen

„Symbolleisten anzeigen“ auf Seite 26

„Code mit der Code-Symbolleiste einfügen“ auf Seite 312

Übersicht über die Symbolleiste „Stilwiedergabe“

Die (standardmäßig ausgeblendete) Symbolleiste „Stilwiedergabe“ enthält Schaltflächen, mit denen Sie sich beim Verwenden von medienabhängigen Stylesheets ansehen können, wie ein Entwurf in verschiedenen Medientypen aussieht. Sie enthält ferner eine Schaltfläche zum Aktivieren oder Deaktivieren von CSS-Stilen. Um diese Symbolleiste anzuzeigen, wählen Sie „Ansicht“

Diese Symbolleiste kann nur bei Dokumenten mit medienabhängigen Stylesheets eingesetzt werden, z. B. dann, wenn in Ihrem Stylesheet eine body-Regel für Druckmedien und eine andere body-Regel für Handheld-Geräte festgelegt wurde. Weitere Informationen zur Erstellung medienabhängiger Stylesheets finden Sie auf der Website des World Wide Web Consortium unter

Standardmäßig zeigt Dreamweaver den Entwurf für den Bildschirmmedientyp an (d. h., Sie sehen, wie eine Seite auf einem Computerbildschirm wiedergegeben wird). Sie können die folgenden Medientypwiedergaben anzeigen, indem Sie auf der Symbolleiste „Stilwiedergabe“ auf die entsprechenden Schaltflächen klicken.

> „Symbolleisten“ > „Stilwiedergabe“.

www.w3.org/TR/CSS21/media.html.

Bildschirmmedientyp wiedergeben zeigt, wie die Seite auf einem Computerbildschirm angezeigt wird.

Druckmedientyp wiedergeben zeigt an, wie die Seite auf Papier gedruckt aussehen wird.

Handheld-Medientyp wiedergeben zeigt, wie die Seite auf einem Handheld-Gerät wie beispielsweise einem Mobiltelefon

oder einem BlackBerry-Gerät aussieht.

Projektionsmedientyp wiedergeben zeigt, wie die Seite mit einem Projektionsgerät wiedergegeben wird.

TTY-Medientyp wiedergeben zeigt, wie die Seite mit einem Fernschreiber wiedergegeben wird.

TV-Medientyp wiedergeben zeigt, wie die Seite auf einem Fernsehbildschirm angezeigt wird.

Anzeige der CSS-Stile ein/aus ermöglicht das Aktivieren und Deaktivieren von CSS-Stilen. Diese Schaltfläche ist von den

anderen Medienschaltflächen unabhängig.

Ein Tutorial zur Entwicklung von Style Sheets für Drucker und mobile Geräte finden Sie unter

www.adobe.com/go/vid0156_de.

Verwandte Themen

„Symbolleisten anzeigen“ auf Seite 26

Der Eigenschafteninspektor

Im Eigenschafteninspektor können Sie die gängigsten Eigenschaften des ausgewählten Seitenelements, z. B. von Text oder eines eingefügten Objekts, anzeigen und ändern. Der Inhalt des Eigenschafteninspektors hängt vom ausgewählten Element ab. Wenn Sie beispielsweise ein Bild auf Ihrer Seite markieren, ändert sich die Anzeige des Eigenschafteninspektors, um die Eigenschaften des Bildes darzustellen (Dateipfad zum Bild, Breite, Höhe und ggf. Rand des Bildes usw.).

DREAMWEAVER CS3

Benutzerhandbuch

Der Eigenschafteninspektor befindet sich in der Standardeinstellung am unteren Rand des Arbeitsbereichs, kann aber auch am oberen Rand angedockt oder als schwebendes Bedienfeld auf dem Arbeitsbereich positioniert werden.

Verwandte Themen

„Bedienfelder und Bedienfeldgruppen andocken und abdocken“ auf Seite 30

„Den Eigenschafteninspektor verwenden“ auf Seite 28

Überblick über das Bedienfeld „Dateien“

Sie verwenden das Bedienfeld „Dateien“ zum Anzeigen und Verwalten der Dateien Ihrer Dreamweaver-Website.

Bei der Anzeige von Websites, Dateien oder Ordnern im Bedienfeld „Dateien“ können Sie die Größe des Anzeigebereichs ändern sowie das Bedienfeld „Dateien“ erweitern bzw. reduzieren. Wenn das Bedienfeld „Dateien“ reduziert wurde, wird der Inhalt der lokalen Site, der Remote-Site oder des Testservers in Form einer Dateiliste angezeigt. Wenn das Bedienfeld „Dateien“ erweitert wurde, wird die lokale Site und die Remote-Site bzw. der Testserver angezeigt. Im Bedienfeld „Dateien“ kann auch eine übersichtliche Sitemap der lokalen Site angezeigt werden.

Bei Dreamweaver-Sites können Sie das Bedienfeld „Dateien“ auch anpassen, indem Sie die Ansicht ändern (für die lokale Site oder Remote-Site), die standardmäßig im reduzierten Bedienfeld angezeigt wird.

Verwandte Themen

„Mit Dateien im Bedienfeld „Dateien“ arbeiten“ auf Seite 79

DREAMWEAVER CS3

Benutzerhandbuch

Das Bedienfeld „CSS-Stile“

In diesem Bedienfeld können Sie die CSS-Regeln und -Eigenschaften, die sich auf ein momentan ausgewähltes Seitenelement auswirken (Modus „Aktuell“), oder die Regeln und Eigenschaften, die sich auf das gesamte Dokument auswirken (Modus „Alle“), verfolgen. Über eine Umschalttaste oben im Bedienfeld „CSS-Stile“ können Sie zwischen den beiden Modi wechseln. Im Bedienfeld „CSS-Stile“ können Sie außerdem CSS-Eigenschaften im Modus „Alle“ und „Aktuell“ ändern.

Sie können die Größe eines beliebigen Bereichs durch Ziehen des Rahmens zwischen den Bereichen ändern.

Im Modus „Aktuell“ enthält das Bedienfeld „CSS-Stile“ drei Bereiche: Das Bedienfeld „Zusammenfassung für Auswahl“, das die CSS-Eigenschaften für die aktuelle Auswahl im Dokument enthält, das Bedienfeld „Regeln“, das den Speicherort von ausgewählten Eigenschaften (bzw. je nach der Auswahl die Regelhierarchie für das ausgewählte Tag) anzeigt, und das Bedienfeld „Eigenschaften“, mit dem Sie CSS-Eigenschaften der Regel ändern können, die die Auswahl definiert.

Im Modus „Aktuell“ enthält das Bedienfeld „CSS-Stile“ zwei Bereiche: „Alle Regeln“ (oben) und „Eigenschaften“ (unten). Im Bedienfeld „Alle Regeln“ wird eine Liste der Regeln angezeigt, die im aktuellen Dokument definiert sind, sowie alle Regeln, die in den mit dem aktuellen Dokument verknüpften Stylesheets definiert wurden. Im Bedienfeld „Eigenschaften“ können Sie CSS-Eigenschaften für eine ausgewählte Regel im Bedienfeld „Alle Regeln“ bearbeiten.

Änderungen, die Sie im Bedienfeld „Regeln“ vornehmen, werden sofort übernommen, sodass Sie die Änderungen während Ihrer Arbeit in einer Vorschau verfolgen können.

Verwandte Themen

„CSS erstellen und verwalten“ auf Seite 124

Visuelle Hilfsmittel

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.

• Verwendung eines Tracing-Bilds als Seitenhintergrund zum leichteren Duplizieren eines Designs, das mit einer

Illustrations- oder Bildbearbeitungsanwendung wie Adobe® Photoshop® oder Adobe® Fireworks® erstellt wurde.

DREAMWEAVER CS3

Benutzerhandbuch

• Verwendung von Linealen und Hilfslinien zur Bereitstellung eines visuellen Anhaltspunkts für die genaue

Positionierung und Änderung der Größe von Seitenelementen.

• Verwendung des Rasters zur genaueren Positionierung und Größenänderung von absolut positionierten Elementen

(AP-Elementen).

Auf der Seite eingeblendete Rasterlinien erleichtern das Ausrichten von AP-Elementen. Bei aktivierter Funktion „Am Raster ausrichten“ werden die AP-Elemente automatisch am nächstgelegenen Rasterschnittpunkt ausgerichtet, wenn Sie sie verschieben oder ihre Größe ändern. (Andere Objekte, wie z. B. Bilder und Absätze, sind nicht am Raster ausgerichtet.) Die Ausrichtung findet auch dann statt, wenn das Raster nicht eingeblendet ist.

Verwandte Themen

„Visuelle Hilfsmittel für das Layout verwenden“ auf Seite 171

GoLive-Benutzer

Wenn Sie bis jetzt GoLive verwendet haben und auf Dreamweaver umsteigen möchten, dann lesen Sie die OnlineEinführung zum Arbeitsbereich/-ablauf von Dreamweaver und die Abhandlung zur effektiven Migration Ihrer Site zu Dreamweaver. Weitere Informationen finden Sie unter

www.adobe.com/go/learn_dw_golive_de.

Im Dokumentfenster arbeiten

Zwischen Ansichten im Dokumentfenster umschalten

Dokumente können im Dokumentfenster in der Entwurfsansicht, in der Codeansicht oder in beiden Ansichten angezeigt werden.

Verwandte Themen

„Überblick über das Dokumentfenster“ auf Seite 16

Zur Codeansicht wechseln

❖

Führen Sie einen der folgenden Schritte aus:

• Wählen Sie „Ansicht“ > „Code“.

• Klicken Sie in der Dokument-Symbolleiste auf die Schaltfläche „Codeansicht anzeigen“ .

Zur Entwurfsansicht wechseln

❖

Führen Sie einen der folgenden Schritte aus:

• Wählen Sie „Ansicht“ > „Entwurf“.

• Klicken Sie in der Dokument-Symbolleiste auf die Schaltfläche „Entwurfsansicht anzeigen“ .

Code- und Entwurfsansicht anzeigen

❖

Führen Sie einen der folgenden Schritte aus:

• Wählen Sie „Ansicht“ > „Code und Entwurf“.

• Klicken Sie in der Dokument-Symbolleiste auf die Schaltfläche „Code- und Entwurfsansicht anzeigen“ .

Zwischen Code- und Entwurfsansicht umschalten

❖

Drücken Sie <Strg>+<'> (Apostroph).

Wenn im Dokumentfenster beide Ansichten angezeigt werden, schalten Sie mit diesem Tastaturbefehl den Fokus von einer Ansicht zur anderen um.

DREAMWEAVER CS3

Benutzerhandbuch

Dokumentfenster überlappend oder nebeneinander anordnen

Wenn zahlreiche Dokumente gleichzeitig angeordnet sind, können Sie diese überlappend oder nebeneinander anordnen.

Verwandte Themen

„Arbeitsbereichslayout auswählen (Windows)“ auf Seite 32

„Dokumente mit Registerkarte anzeigen (Macintosh)“ auf Seite 32

„Benutzerdefinierte Arbeitsbereichslayouts speichern“ auf Seite 33

Dokumentfenster überlappend anordnen

❖

Wählen Sie „Fenster“ > „Überlappend“ aus.

Dokumentfenster nebeneinander anordnen

• Wählen Sie in Windows „Fenster“ > „Untereinander“ oder „Fenster“ > „Nebeneinander“.

• Wählen Sie auf dem Macintosh „Fenster“ > „Tile“ (Nebeneinander).

Das Dokumentfenster vergrößern oder verkleinern

In der Statusleiste werden die aktuellen Abmessungen des Dokumentfensters (in Pixel) angezeigt. 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.

Das Dokumentfenster auf eine voreingestellte Größe ändern

❖

Wählen Sie im Popupmenü „Fenstergröße“ am unteren Rand des Dokumentfensters eine Größe aus.

Hinweis: (Nur in Windows) Sie können ein Dokumentfenster maximieren, sodass es den gesamten Dokumentbereich des integrierten Anwendungsfensters ausfüllt. Ist ein Dokumentfenster maximiert, lässt sich seine Größe nicht ändern.

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

Eine weniger exakte Größenänderung lässt sich auch mit dem jeweiligen Standardverfahren Ihres Betriebssystems erzielen, beispielsweise durch Ziehen der rechten unteren Fensterecke.

Die im Popupmenü „Fenstergröße“ aufgeführten Werte ändern

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.

3 Klicken Sie in das Feld „Beschreibung“, und geben Sie einen aussagekräftigen Text für eine bestimmte Größe ein.

+ 692 hidden pages