ADOBE Dreamweaver CS4 User Manual [de]

ADOBE® DREAMWEAVER® CS4

verwenden

® Dreamweaver® CS4 für Windows® und Mac OS verwenden

Adobe

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 – elektronisch, mechanisch, auf Tonträgern oder 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 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, the Adobe logo, ActionScript, ColdFusion, Contribute, Creative Suite, Director, Dreamweaver, Fireworks, Flash, FlashPaper, FreeHand, HomeSite, Illustrator, InDesign, JRun, Shockwave, and Version Cue are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.

ActiveX, Microsoft, Windows, and Windows Vista are either registered trademarks or trademarks of Microsoft Corporation in the United States and/or other countries. Apple, Macintosh, and Mac OS are trademarks of Apple Inc., registered in the United States and other countries. Java, Solaris, and SunOS are trademarks or registered trademarks of Sun Microsystems, Inc. in the United States and other countries. Linux is the registered trademark of Linus Torvalds in the U.S. and other countries. UNIX is a registered trademark of The Open Group in the US and other countries. Arial is a trademark of The Monotype Corporation registered in the U.S. Patent and Trademark Office and certain other jurisdictions. Times New Roman is a registered trademark of The Monotype Corporation registered in the U.S. Patent and Trademark Office and may be registered in certain other jurisdictions. All other trademarks are the property of their respective owners.

This product includes software developed by the Apache Software Foundation (

The Graphics Interchange Format © is the Copyright property of CompuServe Incorporated. GIF(sm) is a Service Mark property of CompuServe Incorporated.

MPEG Layer-3 audio compression technology licensed by Fraunhofer IIS and Thomson Multimedia ( compressed audio within the Software for real time or live broadcasts. If you require an MP3 decoder for real time or live broadcasts, you are responsible for obtaining this MP3 technology license.

Speech compression and decompression technology licensed from Nellymoser, Inc. (

This product includes software developed by the OpenSymphony Group (

Sorenson Spark

™ video compression and decompression technology licensed from Sorenson Media, Inc.

http://www.apache.org/).

http://www.mp3licensing.com). You cannot use the MP3

www.nellymoser.com)

http://www.on2.com.

http://www.opensymphony.com/)

1994. All Rights Reserved. Proximity Technology Inc. The Proximity/Merriam-Webster Inc./Franklin Electronic Publishers Inc. © 1990 Williams Collins Sons & Co. Ltd. © 1997 - All rights reserved Proximity Technology Inc. © 1990 Williams Collins Sons & Co. Ltd. © 1990 - All rights reserved Proximity Technology Inc. © Oxford University Press © 2000. All rights reserved Proximity Technology Inc. © 1990 IDE a.s. © 1990 - All rights reserved Proximity Technology Inc.

This product includes software developed by Fourthought, Inc. (

This product includes software developed by CollabNet (

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. Consistent with 48 C.F.R. §12.212 or 48 C.F.R. §§227.7202-1 through 227.7202-4, as applicable, the Commercial Computer Software and Commercial Computer Software Documentation are being licensed to U.S. Government end users (a) only as Commercial Items and (b) with only those rights as are granted to all other end users pursuant to the terms and conditions herein. Unpublishedrights reserved under the copyright laws of the United States. Adobe Systems Incorporated, 345 Park Avenue, San Jose, CA 95110-2704, USA. For U.S. Government End Users, Adobe agrees to comply with all applicable equal opportunity laws including, if appropriate, the provisions of Executive Order 11246, as amended, Section 402 of the Vietnam Era Veterans Readjustment Assistance Act of 1974 (38 USC 4212), and Section 503 of the Rehabilitation Act of 1973, as amended, and the regulations at 41 CFR Parts 60-1 through 60-60, 60-250, and 60-741. The affirmative action clause and regulations contained in the preceding sentence shall be incorporated by reference.

http://www.fourthought.com).

http://www.Collab.Net/)

Inhalt

Kapitel 1: Ressourcen

Aktivierung und Registrierung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Hilfe und Support . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

Dienste, Downloads und Extras . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

Neue Funktionen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

Kapitel 2: Arbeitsbereich

Arbeitsablauf und Arbeitsbereich in Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

Im Dokumentfenster arbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

Symbolleisten, Inspektoren und Kontextmenüs verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

CS4-Arbeitsbereich anpassen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

Tastaturbefehle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36

Erweiterungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

Kapitel 3: Dreamweaver-Sites verwenden

Dreamweaver-Sites einrichten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

Contribute-Sites mit Dreamweaver verwalten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

Dateien ohne Definieren von Sites bearbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64

Optionen der Registerkarte „Grundeinstellungen“ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65

iii

Kapitel 4: Dateien erstellen und verwalten

Dokumente öffnen und erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71

Dateien und Ordner verwalten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84

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

Dateien ein- und auschecken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98

Dateien synchronisieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108

InContext Editing-Dateien erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110

Dateien auf Unterschiede vergleichen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117

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

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

Dateiinformationen in Design Notes speichern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124

Sites testen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127

Kapitel 5: Elemente und Bibliotheken verwalten

Elemente und Bibliotheken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132

Elemente verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133

Liste mit Favoritenelementen erstellen und verwalten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138

Bibliothekselemente verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140

Kapitel 6: Seiten mit CSS erstellen

Grundlegendes zu Cascading Stylesheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146

CSS erstellen und verwalten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151

Seitenlayouts mit CSS gestalten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174

Mit Div-Tags arbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193

DREAMWEAVER CS4 VERWENDEN

Inhalt

Kapitel 7: Seitenlayouts mit HTML gestalten

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

Inhalte in Tabellen darstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202

Frames verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218

Kapitel 8: Inhalt in Seiten einfügen

Mit Seiten arbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233

Text einfügen und formatieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247

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

SWF-Dateien einfügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277

FLV-Dateien einfügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281

Audiomaterial hinzufügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286

Andere Medienobjekte hinzufügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 288

Aufgaben automatisieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296

Kapitel 9: Hyperlinks und Navigation

Allgemeines zu Hyperlinks und Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303

Hyperlinks erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305

Sprungmenüs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314

Navigationsleisten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316

Imagemaps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 318

Fehler in Hyperlinks beheben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320

Kapitel 10: Vorschau von Seiten

Seitenvorschau in Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323

Vorschau von Seiten im Browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325

Vorschau von Seiten auf Mobilgeräten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327

Kapitel 11: Mit Seitencode arbeiten

Allgemeine Informationen zum Programmieren in Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328

Codeumgebung einrichten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333

Codeeinstellungen festlegen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335

Code schreiben und bearbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340

Code ausblenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 356

Code optimieren und debuggen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 358

Code in der Entwurfsansicht bearbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 363

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

Mit Server-Side Includes arbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 374

Tag-Bibliotheken verwalten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 377

Benutzerdefinierte Tags in Dreamweaver importieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 380

Kapitel 12: JavaScript-Verhalten hinzufügen

JavaScript-Verhalten verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 382

Integrierte Dreamweaver-Verhalten definieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 386

Kapitel 13: Mit anderen Anwendungen arbeiten

Anwendungsübergreifende Integration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 404

Mit Fireworks arbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 405

DREAMWEAVER CS4 VERWENDEN

Inhalt

Mit Photoshop arbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 413

Mit Flash arbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 423

Mit Bridge arbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 424

Mit Device Central arbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 426

Mit ConnectNow arbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 428

Verwalten von Verbindungen zu Web Services . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 428

Kapitel 14: Vorlagen erstellen und verwalten

Dreamweaver-Vorlagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 430

Vorlagen und vorlagenbasierte Dokumente erkennen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 436

Dreamweaver-Vorlagen erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 438

Bearbeitbare Bereiche erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 442

Wiederholende Bereiche erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 444

Optionale Bereiche verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 446

Bearbeitbare Tag-Attribute definieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 449

Verschachtelte Vorlagen erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 450

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

Vorlageninhalte exportieren und importieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 457

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

Inhalte in vorlagenbasierten Dokumenten bearbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 460

Vorlagensyntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 463

Voreinstellungen für Vorlagenbereiche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465

Kapitel 15: Spry-Seiten visuell erstellen

Spry-Framework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 467

Spry-Widgets verwenden (allgemeine Anweisungen) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 467

Mit dem Akkordeon-Widget arbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 469

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

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

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

Mit dem QuickInfo-Widget arbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 482

Mit dem Widget „Überprüfung - Optionsschaltergruppe“ arbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 484

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

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

Mit dem Widget „Überprüfung - Auswahl“ arbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 496

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

Mit dem Widget „Überprüfung - Kennwort“ arbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 502

Mit dem Widget „Überprüfung - Bestätigung“ arbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 506

Daten mit Spry anzeigen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 510

Spry-Effekte hinzufügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 523

Kapitel 16: XML-Daten mit XSLT anzeigen

XML und XSLT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 528

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

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

Fehlende Zeichenentitäten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 555

DREAMWEAVER CS4 VERWENDEN

Inhalt

Kapitel 17: Erstellen dynamischer Sites vorbereiten

Webanwendungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 558

Computer für die Entwicklung von Anwendungen einrichten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 566

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

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

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

Fehler bei Datenbankverbindungen beheben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 583

Verbindungsskripts entfernen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 589

Kapitel 18: Dynamische Seiten erstellen

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

Dynamische Seiten entwerfen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 593

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

Bedienfelder für dynamischen Inhalt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 601

Quellen für dynamischen Inhalt definieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 602

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

Dynamischen Inhalt ändern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 622

Datenbank-Datensätze anzeigen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 624

Live-Daten anzeigen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 635

Benutzerdefinierte Serververhalten hinzufügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 639

Kapitel 19: Anwendungen visuell entwickeln

Master- und Detailseiten entwickeln . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 652

Such- und Ergebnisseiten erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 660

Datensatz-Einfügeseiten erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 666

Seiten zum Aktualisieren von Datensätzen erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 670

Seiten zum Löschen von Datensätzen erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 676

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

Registrierungsseiten erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 689

Anmeldeseiten erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 692

Seiten erstellen, auf die nur autorisierte Benutzer zugreifen können . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 694

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

ColdFusion-Komponenten verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 698

Kapitel 20: Formulare erstellen

Benutzerinformationen sammeln . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 706

Webformulare erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 709

ColdFusion-Formulare erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 724

Kapitel 21: Eingabehilfen

Dreamweaver und Barrierefreiheit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 739

Stichwortverzeichnis ...............................................................................................743

Kapitel 1: Ressourcen

Nehmen Sie sich vor der Verwendung der Software einen Moment Zeit und lesen Sie diesen Überblick, um sich mit der Aktivierung und den zahlreichen Ressourcen vertraut zu machen, die Ihnen zur Verfügung stehen. Ihnen stehen Video-Tutorials, Zusatzmodule, Vorlagen, Benutzercommunities, Seminare, Tutorials, RSS-Feeds und vieles mehr zur Verfügung.

Aktivierung und Registrierung

Installationshilfe

Für Hilfe bei Installationsproblemen wenden Sie sich an das Installation Support Center unter

www.adobe.com/go/cs4install_de.

Lizenzaktivierung

Während des Installationsverfahrens stellt die Adobe-Software eine Verbindung zu Adobe her, um die Lizenzaktivierung abzuschließen. Bei diesem Vorgang werden keine personenbezogenen Daten übermittelt. Weitere Informationen zur Produktaktivierung finden Sie unter www.adobe.com/go/activation_de auf der Website von Adobe.

Bei einer Einzelbenutzerlizenz werden zwei Computer für die Aktivierung unterstützt. Sie können das Produkt beispielsweise auf einem Desktop-Computer im Büro und einem Laptop-Computer zu Hause installieren. Wenn Sie die Software auf einem dritten Computer installieren möchten, deaktivieren Sie sie zunächst auf einem der beiden anderen Computer. Wählen Sie „Hilfe“ > „Deaktivieren“.

Registrierung

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 der Software

angezeigt wird.

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

Adobe Product Improvement Program

Nachdem Sie die Adobe-Software einige Male verwendet haben, wird u. U. ein Dialogfeld angezeigt, in dem Sie gefragt werden, ob Sie am Adobe-Produktverbesserungsprogramm teilnehmen möchten.

Wenn Sie sich zur Teilnahme entschließen, werden Daten zur Verwendung der Adobe-Software an Adobe gesendet. Es werden keine personenbezogenen Daten aufgezeichnet oder übermittelt. Das AdobeProduktverbesserungsprogramm erfasst ausschließlich Informationen zu den Funktionen und Tools, die Sie in der Software verwenden, und darüber, wie oft Sie diese verwenden.

DREAMWEAVER CS4 VERWENDEN

Ressourcen

Sie können dem Programm jederzeit beitreten bzw. die Teilnahme am Programm beenden.

• Um teilzunehmen, wählen Sie „Hilfe“ > „Adobe Product Improvement Program“ und klicken Sie dann auf die

Option „Ja, teilnehmen“.

• Wenn Sie die Teilnahme beenden möchten, wählen Sie „Hilfe“ > „Adobe Product Improvement Program“ und

klicken Sie dann auf „Nein, danke“.

Bitte-lesen-Datei

Eine Bitte-lesen-Datei zu Ihrer Software steht online und auf dem Installationsdatenträger zur Verfügung. Öffnen Sie die Datei. Darin finden Sie u. a. zu folgenden Themen wichtige Informationen:

• Systemanforderungen

• Installation (und Deinstallation der Software)

• Aktivierung und Registrierung

• Schriftinstallation

• Fehlerbehebung

• Kundendienst

• Impressum

Hilfe und Support

Community-Hilfe

Die Community-Hilfe ist eine integrierte Umgebung auf adobe.com, über die Sie Zugriff auf Inhalte erhalten, die von der Benutzer-Community beigetragen und von Experten von Adobe und aus der Branche allgemein moderiert werden. Kommentare anderer Benutzer helfen Ihnen, die geeignete Antwort zu finden. Durchsuchen Sie die Community-Hilfe nach den besten Web-Inhalten zu Produkten und Technologien von Adobe. Dazu zählen auch die folgenden Ressourcen:

• Videos, Lehrgänge, Tipps und Techniken, Blogs, Artikel und Beispiele für Designer und Entwickler.

• Vollständige Online-Hilfe, die regelmäßig aktualisiert wird und vollständiger ist, als die Hilfe, die mit Ihrem

Produkt geliefert wird. Wenn Sie beim Zugriff auf die Hilfe mit dem Internet verbunden sind, wird automatisch anstelle der mitgelieferten Hilfe die vollständige Online-Hilfe aufgerufen.

• Weitere Inhalte auf adobe.com umfassen Knowledgebase-Artikel, Downloads und Updates, die Developer

Connection und vieles mehr.

Verwenden Sie das Suchfeld in der Hilfe Ihres Programms, um Zugang zur Community-Hilfe zu erhalten. Ein Video zur Community-Hilfe finden Sie unter www.adobe.com/go/lrvid4117_xp_de.

Weitere Ressourcen

Druckfassungen der vollständigen Online-Hilfe sind gegen Versandkosten erhältlich unter

www.adobe.com/go/store_de. Die Online-Hilfe umfasst außerdem eine Verknüpfung zur vollständigen und

aktualisierten PDF-Fassung der Hilfe.

Auf der Support-Website von Adobe unter www.adobe.com/de/support finden Sie Informationen zu kostenlosen und kostenpflichtigen Support-Angeboten.

DREAMWEAVER CS4 VERWENDEN

Ressourcen

Dienste, Downloads und Extras

Sie können Ihr Produkt durch Integration vielfältiger Dienste, Zusatzmodule und Erweiterungen ausbauen. Zudem haben Sie die Möglichkeit, Muster und andere Elemente herunterzuladen, die Ihnen die Arbeit erleichtern können.

Creative Online-Services von Adobe

Die Adobe® Creative Suite® 4 bietet neue Online-Funktionen, mit denen Sie das Potenzial des Internets auch lokal vollständig nutzen können. Mit diesen Funktionen können Sie an der Community teilhaben, mit anderen Benutzern zusammenarbeiten und so Ihre Adobe-Tools noch optimaler nutzen. Mit leistungsstarken Kreativdiensten können Sie online Farben abstimmen und Datenkonferenzen organisieren. Die Dienste lassen sich nahtlos in DesktopAnwendungen integrieren, sodass Sie bestehende Arbeitsabläufe damit schnell optimieren können. Manche Services bieten auch im Offline-Modus volle oder beschränkte Funktionalität.

Welche Dienste verfügbar sind, erfahren Sie auf adobe.com. Einige Anwendungen der Creative Suite 4 umfassen die folgenden Dienste:

Kuler™-Bedienfeld Schnelles Erstellen, Austauschen und Erkunden von Farbschemata im Internet.

Adobe® ConnectNow Zusammenarbeiten mit Teams an unterschiedlichen Standorten per Web durch Austausch von

Sprachinformationen, Daten und Multimediainhalten.

Resource Central Unmittelbares Zugreifen auf Lernprogramme, Beispieldateien und Erweiterungen für

Digitalvideoanwendungen von Adobe.

Weitere Informationen zum Verwalten Ihrer Dienste finden Sie auf der Adobe-Website unter

www.adobe.com/go/learn_creativeservices_de.

Adobe Exchange

Besuchen Sie Adobe Exchange unter www.adobe.com/go/exchange_de, um Beispiele sowie Tausende Zusatzmodule und Erweiterungen von Adobe und Drittentwicklern herunterzuladen. Mit diesen Zusatzmodulen und Erweiterungen können Sie u. a. Aufgaben automatisieren, Workflows anpassen und professionelle Spezialeffekte erzeugen.

Adobe-Downloads

Besuchen Sie www.adobe.com/go/downloads_de, wenn Sie kostenlose Updates, Probeversionen und andere nützliche Software suchen.

Adobe Labs

Bei den Adobe Labs unter www.adobe.com/go/labs_de können Sie neue und sich entwickelnde Technologien und Produkte von Adobe ausprobieren. In den 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

• Foren, Wikis und andere Ressourcen unterstützen die Interaktion mit gleichgesinnten Benutzern.

Die Adobe Labs ermöglichen eine kollaborative Software-Entwicklung. Durch diese Unterstützung sind Kunden schnell in der Lage, neue Produkte und Technologien produktiv einzusetzen. Die Adobe Labs bieten außerdem ein Forum für frühes Feedback. Anhand dieses Feedbacks erstellen die Entwicklungsteams von Adobe Software, die den Anforderungen und Erwartungen der Community entspricht.

DREAMWEAVER CS4 VERWENDEN

Ressourcen

Adobe TV

Auf Adobe TV unter http://tv.adobe.com finden Sie lehrreiche und inspirierende Videos.

Extras

Auf dem Installationsdatenträger finden Sie verschiedene Extras, mit denen Sie Ihre Adobe-Software optimal nutzen können. Einige Extras werden beim Setup auf Ihrem Computer installiert, andere stehen über den Datenträger zur Verfügung.

Wenn Sie sich die beim Setup installierten Extras ansehen möchten, öffnen Sie den Anwendungsordner auf Ihrem Computer.

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

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

Zum Anzeigen der Extras auf dem Datenträger öffnen Sie den Ordner „Zugaben“ im Ordner für Ihre Sprache. Beispiel:

• /Deutsch/Zugaben/

Neue Funktionen

Es folgt eine Liste der wichtigsten neuen Funktionen in Adobe® Dreamweaver® CS4.

Live-Ansicht

In Dreamweaver CS4 können Sie Ihre Webseiten mithilfe der neuen Live-Ansicht unter realen Browserbedingungen entwerfen, während Sie weiterhin direkten Zugriff auf den Code haben. Codeänderungen wirken sich sofort auf die Seitendarstellung aus. Weitere Informationen finden Sie unter „Seitenvorschau in Dreamweaver“ auf Seite 323.

Codehinweise für Ajax- und JavaScript-Frameworks

Sie können JavaScript nun schneller und genauer mit verbesserter Unterstützung für JavaScript-Kernobjekte und elementare Datentypen programmieren. Sie können außerdem die erweiterten Programmierfunktionen von Dreamweaver nutzen, indem Sie beliebte JavaScript-Frameworks wie jQuery, Prototype und Adobe Spry integrieren. Weitere Informationen finden Sie unter „Codehinweise verwenden“ auf Seite 340.

Zugehörige Dateien und Code-Navigator

Mit Dreamweaver CS4 können Sie effizient die verschiedenen Dateien verwalten, aus denen moderne Webseiten bestehen. Klicken Sie auf eine beliebige zugehörige Datei, um sowohl ihren Quelltext in der Codeansicht als auch die übergeordnete Seite in der Entwurfsansicht anzuzeigen. Mit der neuen Funktion „Code-Navigator“ werden alle Codequellen angezeigt, die Auswirkungen auf Ihre aktuelle Auswahl haben, unter anderem CSS-Regeln (Cascading Style Sheets), Server-Side Includes, externe JavaScript-Funktionen, Dreamweaver-Vorlagen und iFrameQuelldateien. Weitere Informationen finden Sie unter „Zugehörige Dateien öffnen“ auf Seite 81 und „Zu zugehörigem

Code navigieren“ auf Seite 349.

InContext Editing

Sie können es Endbenutzern ermöglichen, einfache Änderungen ihrer Webseiten ohne Ihre Hilfe bzw. ohne zusätzliche Software vorzunehmen. Als Dreamweaver-Designer können Sie schnell und unkompliziert Änderungen auf bestimmte Seiten, klar umgrenzte Bereiche und sogar benutzerdefinierte Formatierungsoptionen beschränken. Weitere Informationen finden Sie unter „InContext Editing-Dateien erstellen“ auf Seite 110.

DREAMWEAVER CS4 VERWENDEN

Ressourcen

Best Practices für CSS

Mit dem Eigenschafteninspektor von Dreamweaver CS4 können Sie neue CSS-Regeln erstellen. Er bietet verständliche und einfache Erläuterungen, an welcher Stelle die jeweilige Eigenschaft in die Stilkaskade eingeordnet ist. Weitere Informationen finden Sie unter „Texteigenschaften im Eigenschafteninspektor festlegen“ auf Seite 257.

HTML-Datensätze

Sie können die Leistungsfähigkeit dynamischer Daten in Ihre Webseiten integrieren, ohne sich zuvor das entsprechende Wissen zu Datenbanken und XML-Code (eXtensible Markup Language) aneignen zu müssen. SpryDatensätze können Inhalte einfacher HTML-Tabellen als interaktive Datenquellen verwenden. Weitere Informationen finden Sie unter „Spry-HTML-Datensätze erstellen“ auf Seite 510.

Adobe Photoshop-Smart Objekte

Durch Einfügen eines Adobe®-Photoshop-Dokuments im PSD-Format (Photoshop-Datendatei) in Dreamweaver können Sie ein Smart Objekt erstellen. Smart Objekte sind eng mit der jeweiligen Quelldatei verknüpft. Sie können in Dreamweaver beliebige Änderungen am Quellbild vornehmen und Ihr Bild aktualisieren, ohne Photoshop zu öffnen. Weitere Informationen finden Sie unter „Mit Photoshop arbeiten“ auf Seite 413.

Subversion-Integration

In Dreamweaver CS4 ist die Software Subversion® (ein quelloffenes Versionskontrollsystem) integriert, um ein zuverlässigeres Ein- und Auschecken zu ermöglichen. Aktualisieren Sie Ihre Site und checken Sie Änderungen direkt in Dreamweaver ein. Weitere Informationen finden Sie unter „Dateien mithilfe von Subversion (SVN) abrufen und

einchecken“ auf Seite 102.

Neue Benutzeroberfläche

Mithilfe der vereinheitlichten Benutzeroberfläche können Sie schneller und intelligenter mit allen Komponenten von Adobe Creative Suite® 4 arbeiten. Mit dem Arbeitsbereichumschalter können Sie schnell zwischen den verschiedenen Arbeitsumgebungen wechseln. Weitere Informationen finden Sie unter „Arbeitsbereich“ auf Seite 6.

Veraltete Funktionen

Die folgenden Funktionen sind mit Dreamweaver CS4 veraltet:

• Zeitleisten

• Webdienste

• Layoutmodus

• Sitemap-Ansicht

• Java Bean-Unterstützung

• Adobe® Flash-Elemente (Bild-Viewer)

• Adobe® Flash-Text und Adobe® Flash-Schaltflächen

• Serververhalten und Datensatzgruppen für ASP.NET und JSP

Kapitel 2: Arbeitsbereich

Der Arbeitsbereich von Adobe® Dreamweaver® CS4 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.

Arbeitsablauf und Arbeitsbereich in Dreamweaver

Überblick über den Dreamweaver-Arbeitsablauf

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

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

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 RemoteServer, 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 verschiedene Aspekte von Adobe® Contribute®-Sites verwalten. (Siehe dazu die Abschnitte „Dateien und Ordner verwalten“ auf Seite 84 und „Elemente und Bibliotheken verwalten“ auf Seite 132.)

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 „Seiten mit CSS erstellen“ auf Seite 146 und „Seitenlayouts mit HTML gestalten“ auf Seite 198.)

DREAMWEAVER CS4 VERWENDEN

Arbeitsbereich

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 zum Durchführen von Aufgaben für bestimmte Ereignisse, z. B. die Überprüfung von Formulardaten auf ihre Richtigkeit, wenn der Benutzer auf die Schaltfläche „Senden“ 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 zum Testen der Webseite-Kompatibilität mit unterschiedlichen Browsern. (Siehe dazu den Abschnitt „Inhalt in Seiten einfügen“ auf Seite 233.)

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 „Mit Seitencode arbeiten“ auf Seite 328.)

Webanwendungen für dynamische Inhalte einrichten

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 „Erstellen dynamischer Sites

vorbereiten“ auf Seite 558.)

Dynamische Seiten erstellen

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- oder Geschäftslogik mithilfe von Technologien wie Adobe® ColdFusion® und Webdiensten kapseln. 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 590.)

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

Ein Video-Tutorial zu Verwendungsmöglichkeiten von Dreamweaver finden Sie unter

www.adobe.com/go/lrvid4040_dw_de.

DREAMWEAVER CS4 VERWENDEN

Arbeitsbereich

Arbeitsbereichlayout

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, in dem alle Funktionen in einem einzigen Fenster zusammenfasst sind. Im integrierten Arbeitsbereich unter Windows sind alle Fenster und Bedienfelder in einem einzigen größeren Anwendungsfenster integriert.

A: Anwendungsleiste B: Dokumentsymbolleiste C: Dokumentfenster D: Bedienfeldgruppen E: Arbeitsbereichumschalter F: Tag-Selektor G: Eigenschafteninspektor H: Bedienfeld „Dateien“

Auf Mac OS®-Computern können in Dreamweaver mehrere Dokumente in einem einzigen Fenster mit jeweils einer Registerkarte für jedes Dokument angezeigt werden. Darüber hinaus kann ein schwebender Arbeitsbereich geöffnet werden, in dem jedes Dokument in einem gesonderten Fenster angezeigt wird. Bedienfeldgruppen sind anfangs aneinander gedockt, lassen sich jedoch abdocken und in eigenen Fenstern anzeigen. Wenn Bedienfeldgruppen angedockt sind und der Dokumentbereich maximiert ist, wird durch Ein- und Ausblenden sowie Größenänderung von Bedienfeldern die Größe des Hauptfensters geändert, wie dies auch in Windows der Fall ist.

DREAMWEAVER CS4 VERWENDEN

Arbeitsbereich

A: Anwendungsleiste B: Dokumentsymbolleiste C: Dokumentfenster D: Arbeitsbereichumschalter E: Bedienfeldgruppen F: Tag-Selektor G: Eigenschafteninspektor H: Bedienfeld „Dateien“

Ein Tutorial zum Verwenden unterschiedlicher Dreamweaver-Arbeitsbereiche finden Sie unter

www.adobe.com/go/lrvid4042_dw_de.

Siehe auch

Symbolleisten, Inspektoren und Kontextmenüs verwenden

CS4-Arbeitsbereich anpassen

Dokumente mit Registerkarte anzeigen (Dreamweaver Macintosh)

Tutorial zum Dreamweaver-Arbeitsbereich

Überblick über die Elemente des Arbeitsbereichs

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.

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

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

Anwendungsleiste befindet sich am oberen Rand des Anwendungsfensters und enthält einen

Arbeitsbereichumschalter, verschiedene Menüs (nur unter Windows) und weitere Anwendungssteuerelemente.

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

Entwurfsansicht und die Codeansicht), diverse Ansichtsoptionen und häufig verwendete Vorgänge, z. B. Anzeigen einer Vorschau im Browser, aufrufen können.

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“, „Bridge durchsuchen“, „Speichern“,

DREAMWEAVER CS4 VERWENDEN

Arbeitsbereich

„Alles Speichern“, „Code drucken“, „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.

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

Verwenden von medienabhängigen Stylesheets anzeigen 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. Jedes Objekt 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.

Bedienfelder ermöglichen das Überprüfen Ihrer Arbeit und das Durchführen von Änderungen. Beispiele sind das

Bedienfeld „Einfügen“, das Bedienfeld „CSS-Stile“ und das Bedienfeld „Dateien“. Sie können ein Bedienfeld erweitern, indem Sie auf die entsprechende Registerkarte doppelklicken.

Bedienfeld „Einfügen“ enthält Schaltflächen zum Einfügen verschiedener Objekttypen (z. B. Bilder, Tabellen und

Medienelemente) 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 im Bedienfeld „Einfügen“ auf das Symbol „Tabelle“ klicken. Sie haben auch die Möglichkeit, Objekte stattdessen über das Menü „Einfügen“ einzufügen.

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

Siehe auch

„Im Dokumentfenster arbeiten“ auf Seite 19

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

„Verwalten von Fenstern und Bedienfeldern“ auf Seite 25

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

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

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

Geteilte Codeansicht ist eine geteilte Version der Codeansicht, in der Sie Bildläufe durchführen können, um

gleichzeitig verschiedene Abschnitte eines Dokuments zu bearbeiten.

DREAMWEAVER CS4 VERWENDEN

Arbeitsbereich

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

einem Fenster anzuzeigen.

Live-Ansicht ähnelt der Entwurfsansicht und bietet eine realistischere Darstellung, wie Ihr Dokument in einem

Browser angezeigt wird. Sie können mit dem Dokument genauso interagieren, wie dies später im Browser geschieht. In der Live-Ansicht kann der Code nicht bearbeitet werden. Sie können ihn jedoch in der Codeansicht bearbeiten und dann die Live-Ansicht aktualisieren, damit die Änderungen angezeigt werden.

Live-Codeansicht ist nur beim Anzeigen eines Dokuments in der Live-Ansicht verfügbar. In der Live-Codeansicht

wird der tatsächliche Code dargestellt, den ein Browser zum Ausführen der Seite verwendet. Dieser kann sich dynamisch ändern, während Sie in der Live-Ansicht mit der Seite interagieren. In der Live-Codeansicht kann der Code nicht bearbeitet werden.

In einem maximierten Dokumentfenster (Standardeinstellung) werden im oberen Bereich Registerkarten mit den Dateinamen aller geöffneten Dokumente angezeigt. Hinter dem Dateinamen wird in Dreamweaver ein Sternchen (*) angezeigt, wenn Sie Änderungen vorgenommen und diese noch nicht gespeichert haben.

Um zu einem Dokument zu wechseln, klicken Sie auf die entsprechende Registerkarte.

Darüber hinaus wird unterhalb der Registerkarte des Dokuments (oder unterhalb der Titelleiste des Dokuments, wenn Dokumente in separaten Fenstern angezeigt werden) die Symbolleiste „Zugehörige Dateien“ angezeigt. Zugehörige Dateien sind Dokumente, die mit der aktuellen Datei verknüpft sind, beispielsweise CSS- oder JavaScript-Dateien. Um eine dieser zugehörigen Dateien im Dokumentfenster zu öffnen, klicken Sie auf der Symbolleiste „Zugehörige Dateien“ auf den entsprechenden Dateinamen.

Siehe auch

„Im Dokumentfenster arbeiten“ auf Seite 19

„Live-Ansicht“ auf Seite 323

„Zugehörige Dateien öffnen“ auf Seite 81

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

„Allgemeine Informationen zum Programmieren in Dreamweaver“ auf Seite 328

Überblick über die Dokumentsymbolleiste

Die Dokumentsymbolleiste enthält Schaltflächen, mit denen Sie schnell zwischen verschiedenen Ansichten des Dokuments wechseln können. Außerdem befinden sich auf der Symbolleiste einige häufig verwendete Befehle und Optionen zum Anzeigen und Übertragen von Dokumenten zwischen der lokalen Site und Remote-Sites. In der folgenden Abbildung ist die erweiterte Dokumentsymbolleiste dargestellt.

A: Codeansicht anzeigen B: Code- und Entwurfsansicht anzeigen C: Entwurfsansicht anzeigen D: Live-Ansicht E: Live-Codeansicht F: Dokumenttitel G: Dateiverwaltung H: Vorschau/Debug im Browser I: Entwurfsansicht aktualisieren J: Ansichtsoptionen K: Visuelle Hilfsmittel L: Markup überprüfen M: 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 CS4 VERWENDEN

Arbeitsbereich

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.

Live-Ansicht zeigt eine nicht bearbeitbare, interaktive und browserbasierte Ansicht des Dokuments an.

Live-Codeansicht zeigt den tatsächlichen Code an, der vom Browser zum Ausführen der Seite verwendet wird.

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 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-abhängige (Document Object Model) 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.

Siehe auch

„Symbolleisten anzeigen“ auf Seite 23

„Seitenvorschau in der Live-Ansicht“ auf Seite 323

„Codeeinstellungen festlegen“ auf Seite 335

„Head-Inhalt anzeigen und bearbeiten“ auf Seite 370

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

Überblick über die Standardsymbolleiste

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

DREAMWEAVER CS4 VERWENDEN

Arbeitsbereich

Siehe auch

„Symbolleisten anzeigen“ auf Seite 23

„Dokumente öffnen und erstellen“ auf Seite 71

Überblick über die Statusleiste

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

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 H: Kodierungskennung

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 Hauptteil des Dokuments markiert. Um die

class- oder id-Attribute eines Tags im Tag-Selektor festzulegen, klicken

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

<body> klicken, wird der gesamte

Werkzeug auswählen aktiviert bzw. deaktiviert das Handwerkzeug.

Handwerkzeug ermöglicht es, 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“ (in der Codeansicht nicht verfügbar) 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 andere Mediendateien.

Kodierungskennung zeigt die Textkodierung des aktuellen Dokuments an.

Siehe auch

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

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

„Dokumentfenster vergrößern oder verkleinern“ auf Seite 21

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

DREAMWEAVER CS4 VERWENDEN

Arbeitsbereich

Überblick über die Code-Symbolleiste

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. Die Code-Symbolleiste wird links im Dokumentfenster vertikal angezeigt und ist nur in der Codeansicht sichtbar.

Es ist nicht möglich, die Code-Symbolleiste abzudocken oder zu verschieben. Sie können sie jedoch ausblenden („Ansicht“ > „Symbolleisten“ > „Kodierung“).

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 XML-Datei bearbeiten, die die Symbolleiste generiert. Weitere Informationen hierzu finden Sie im Handbuch

Dreamweaver erweitern.

Siehe auch

„Symbolleisten anzeigen“ auf Seite 23

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

Überblick ü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“ > „Symbolleisten“ > „Stilwiedergabe“.

DREAMWEAVER CS4 VERWENDEN

Arbeitsbereich

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 www.w3.org/TR/CSS21/media.html.

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.

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.

Entwurfsphasen-Stylesheets ermöglicht die Angabe eines Stils für die Entwurfsphase.

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

www.adobe.com/go/vid0156_de.

Siehe auch

„Symbolleisten anzeigen“ auf Seite 23

Überblick über den 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.).

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

Siehe auch

„An-und Abdocken von Bedienfeldern“ auf Seite 26

„Eigenschafteninspektor verwenden“ auf Seite 24

DREAMWEAVER CS4 VERWENDEN

Arbeitsbereich

Überblick über das Bedienfeld „Einfügen“

Das Bedienfeld „Einfügen“ enthält Schaltflächen zum Erstellen und Einfügen von Objekten, z. B. von Tabellen, Bildern und Hyperlinks. Die Schaltflächen sind in mehreren Kategorien zusammengefasst. Sie können zwischen diesen Kategorien wechseln, indem Sie im Popupmenü „Kategorie“ die gewünschte Kategorie auswählen. Weitere Kategorien werden angezeigt, wenn das aktuelle Dokument Servercode enthält, z. B. bei ASP- oder CFMLDokumenten.

Einige Kategorien enthalten Schaltflächen mit Popupmenüs. 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.

Das Bedienfeld „Einfügen“ ist in die folgenden Kategorien unterteilt:

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

Bilder und Tabellen.

Kategorie „Layout“ ermöglicht das Einfügen von Tabellen, Tabellenelemente, 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.

DREAMWEAVER CS4 VERWENDEN

Arbeitsbereich

Kategorie „InContext Editing“ enthält Schaltflächen zum Erstellen von „InContext Editing“-Seiten, einschließlich

Schaltflächen für bearbeitbare und wiederholende Bereiche, sowie zum Verwalten von CSS-Klassen.

Kategorie „Text“

Kategorie „Favoriten“ ermöglicht das Gruppieren und Anordnen der Schaltflächen des Bedienfelds „Einfügen“, die

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

von Ihnen am häufigsten verwendet werden.

Servercode-Kategorien sind nur für Seiten verfügbar, die eine bestimmte Codesprache verwenden, darunter ASP,

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

Im Gegensatz zu den anderen Bedienfeldern in Dreamweaver können Sie das Bedienfeld „Einfügen“ aus der standardmäßigen Andockposition in eine horizontale Position oberhalb des Dokumentfensters ziehen. Dabei ändert sich das Bedienfeld in eine Symbolleiste (die jedoch nicht wie andere Symbolleisten ein- und ausgeblendet werden kann).

Siehe auch

„Bedienfeld „Einfügen“ verwenden“ auf Seite 233

„Spry-Seiten visuell erstellen“ auf Seite 467

Ü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 ist, wird der Inhalt der lokalen Site, der Remote-Site, des Testservers oder des SVN-Repository in Form einer Dateiliste angezeigt. Im erweiterten Bedienfeld werden die lokale Site und entweder die Remote-Site, der Testserver oder das SVN-Repository angezeigt.

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.

DREAMWEAVER CS4 VERWENDEN

Arbeitsbereich

Siehe auch

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

Überblick über das Bedienfeld „CSS-Stile“

In diesem Bedienfeld können Sie die CSS-Regeln und -Eigenschaften verfolgen, die sich auf ein derzeit ausgewähltes Seitenelement auswirken (Modus „Aktuell“), oder die Regeln und Eigenschaften, die sich auf das gesamte Dokument auswirken (Modus „Alle“). Ü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 „Alle“ 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.

Siehe auch

„CSS erstellen und verwalten“ auf Seite 151

DREAMWEAVER CS4 VERWENDEN

Arbeitsbereich

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.

• 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, werden nicht am Raster ausgerichtet.) Die Ausrichtung findet auch dann statt, wenn das Raster nicht eingeblendet ist.

Siehe auch

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

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.

Siehe auch

Dreamweaver-Tutorial für GoLive-Benutzer

Im Dokumentfenster arbeiten

Zwischen Ansichten im Dokumentfenster umschalten

Dokumente können im Dokumentfenster in der Codeansicht, der geteilten Codeansicht, der Entwurfsansicht oder in der Code- und Entwurfsansicht (geteilte Ansicht) bzw. in der Live-Ansicht angezeigt werden. Sie haben zudem die Möglichkeit, die geteilte Codeansicht oder die Code- und Entwurfsansicht horizontal oder vertikal anzuzeigen. (Die horizontale Anzeige ist die Standardeinstellung.)

Zur Codeansicht wechseln

❖ Führen Sie einen der folgenden Schritte aus:

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

• Klicken Sie in der Dokumentsymbolleiste auf die Schaltfläche „Codeansicht anzeigen“ .

DREAMWEAVER CS4 VERWENDEN

Arbeitsbereich

Zur geteilten Codeansicht wechseln

In der geteilten Codeansicht wird das Dokument in zwei Bereiche unterteilt, sodass Sie gleichzeitig zwei Abschnitte des Codes bearbeiten können.

❖ Wählen Sie „Ansicht“ > „Codeteilung“ aus.

Hinweis: Wenn Sie die Größe des Dokument- oder Anwendungsfensters oder das Layout des Arbeitsbereichs ändern, wird das Teilungsverhältnis beibehalten, sodass die beiden Ansichten immer sichtbar sind.

Zur Entwurfsansicht wechseln

❖ Führen Sie einen der folgenden Schritte aus:

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

• 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“ aus.

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

Standardmäßig wird die Codeansicht im oberen Bereich des Dokumentfensters und die Entwurfsansicht im unteren Bereich angezeigt. Wenn Sie die Entwurfsansicht im oberen Fensterbereich anzeigen möchten, wählen Sie „Ansicht“ > „Entwurfsansicht oben“ aus.

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.

Ansichten vertikal teilen

Diese Option ist nur in der geteilten Codeansicht sowie der Code- und Entwurfsansicht (geteilte Ansicht) verfügbar. In der Codeansicht und der Entwurfsansicht ist sie dagegen deaktiviert.

1 Stellen Sie sicher, dass die geteilte Codeansicht („Ansicht > „Codeteilung“) oder die Code- und Entwurfsansicht

(„Ansicht“ > „Code und Entwurf“) ausgewählt ist.

2 Wählen Sie „Ansicht“ > „Vertikal teilen“ aus.

In der Code- und Entwurfsansicht können Sie die Entwurfsansicht im linken Bereich anzeigen („Ansicht“ > „Entwurfsansicht links“).

Siehe auch

„Überblick über das Dokumentfenster“ auf Seite 10

„Seitenvorschau in der Live-Ansicht“ auf Seite 323

DREAMWEAVER CS4 VERWENDEN

Arbeitsbereich

Dokumentfenster überlappend oder nebeneinander anordnen

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

Siehe auch

„Verwalten von Fenstern und Bedienfeldern“ auf Seite 25

„Dokumente mit Registerkarte anzeigen (Dreamweaver Macintosh)“ auf Seite 31

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

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.

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 Windows) Dokumente im Dokumentfenster sind standardmäßig maximiert. Die Größe maximierter Dokumente kann nicht geändert werden. Klicken Sie zum Aufheben der maximierten Darstellung auf die entsprechende Schaltfläche in der rechten oberen Ecke des Dokuments.

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.

Im Popupmenü „Fenstergröße“ aufgeführte 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.

DREAMWEAVER CS4 VERWENDEN

Arbeitsbereich

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.

Neue Größe zum Popupmenü „Fenstergröße“ hinzufügen

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.

Geben Sie beispielsweise SVGA oder Durchschnitts-PC neben dem Eintrag für einen Monitor mit 800 x 600 Pixel bzw. 17 Zoll Mac neben dem Eintrag für einen Monitor mit 832 x 624 Pixel ein. Die meisten Bildschirme können auf eine Vielzahl von Pixel-Auflösungen eingestellt werden.

Fenstergröße und Verbindungsgeschwindigkeit festlegen

1 Wählen Sie „Bearbeiten“ > „Voreinstellungen“ (Windows) bzw. „Dreamweaver“ > „Voreinstellungen“

(Macintosh) aus.

2 Wählen Sie links in der Kategorieliste die Option „Statusleiste“.

3 Wählen Sie eine der folgenden Optionen:

Fenstergrößen ermöglicht Ihnen, die Fenstergrößen anzupassen, die im Popupmenü der Statusleiste angezeigt

werden.

Verbindungsgeschwindigkeit legt die zum Ermitteln der Downloadzeit verwendete Verbindungsgeschwindigkeit (in

Kbit/s) fest. Die Downloadgröße für die Seite wird in der Statusleiste angezeigt. Ist im Dokumentfenster ein Bild ausgewählt, wird dessen Downloadgröße im Eigenschafteninspektor angezeigt.

Siehe auch

„Überblick über die Statusleiste“ auf Seite 13

„Dokumentfenster vergrößern oder verkleinern“ auf Seite 21

Berichte in Dreamweaver

Zur Inhaltssuche, Fehlersuche und Inhaltsprüfung können Sie Berichte in Dreamweaver erstellen. Die folgenden Berichtstypen stehen zur Verfügung:

Suchen ermöglicht die Suche nach Tags, Attributen und bestimmtem Text in Tags.

Referenz ermöglicht die Suche nach hilfreichen Referenzinformationen.

Überprüfung ermöglicht die Prüfung auf Code- bzw. Syntaxfehler.

Browserkompatibilität ermöglicht es Ihnen festzustellen, ob der in Dokumenten enthaltene HTML-Code Tags oder

Attribute enthält, die von den Zielbrowsern nicht unterstützt werden.

Hyperlink-Prüfer ermöglicht die Suche nach defekten, externen und verwaisten Hyperlinks und ihre Reparatur.

Site-Berichte ermöglicht die Optimierung des Arbeitsablaufs bzw. die Prüfung der auf der Site vorhandenen HTML-

Attribute. Arbeitsablaufberichte enthalten „Ausgecheckt von“- und „Kürzlich geändert“-Einträge sowie Design Notes,

DREAMWEAVER CS4 VERWENDEN

Arbeitsbereich

während HTML-Berichte Informationen zur Barrierefreiheit sowie Hinweise auf kombinierbare verschachtelte Schrift-Tags, fehlenden ALT-Text, überflüssige verschachtelte Tags, entfernbare leere Tags und unbenannte Dokumente enthalten.

FTP-Protokoll ermöglicht das Anzeigen aller FTP-Dateiübertragungen.

Serverdebug ermöglicht die Anzeige von Informationen zum Debuggen von Adobe® ColdFusion®-Anwendungen.

Siehe auch

„Nach Tags, Attributen oder Text im Code suchen“ auf Seite 354

„Referenzmaterial zu Sprachen verwenden“ auf Seite 355

„Sites testen“ auf Seite 127

„Tags überprüfen“ auf Seite 361

„Browserkompatibilität überprüfen“ auf Seite 360

„Fehlerhafte, externe und verwaiste Hyperlinks suchen“ auf Seite 320

„Dateien auf einem Remote-Server bereitstellen“ auf Seite 96

„Dateien von einem Remote-Server abrufen“ auf Seite 94

„ColdFusion-Debugger verwenden (nur Windows)“ auf Seite 362

Symbolleisten, Inspektoren und Kontextmenüs verwenden

Symbolleisten anzeigen

Verwenden Sie die Dokument- und Standardsymbolleiste für Dokument- und Standardbearbeitungsvorgänge, die Code-Symbolleiste zum schnellen Einfügen von Code und die Symbolleiste „Stilwiedergabe“, um die Seite so anzuzeigen, wie sie in verschiedenen Medientypen wiedergegeben wird. Sie können die Symbolleisten nach Bedarf ein- oder ausblenden.

• Wählen Sie „Ansicht“ > „Symbolleisten“ und dann die gewünschte Symbolleiste aus.

• Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) auf eine beliebige

Symbolleiste und wählen Sie sie dann im Kontextmenü aus.

Hinweis: Um die Code-Symbolleiste im Codeinspektor anzuzeigen („Fenster“ > „Codeinspektor“) müssen Sie die CodeSymbolleiste im Popupmenü „Ansicht“ am oberen Rand des Inspektors wählen.

Siehe auch

„Überblick über die Dokumentsymbolleiste“ auf Seite 11

„Überblick über die Standardsymbolleiste“ auf Seite 12

„Überblick über die Code-Symbolleiste“ auf Seite 14

„Überblick über die Symbolleiste „Stilwiedergabe““ auf Seite 14

DREAMWEAVER CS4 VERWENDEN

Arbeitsbereich

Eigenschafteninspektor verwenden

Klicken Sie zum Aufrufen der Hilfe für einen bestimmten Eigenschafteninspektor auf die Hilfeschaltfläche in der rechten oberen Ecke des Eigenschafteninspektors oder wählen Sie im Menü „Optionen“ eines Eigenschafteninspektors die Option „Hilfe“ aus.

Hinweis: Mit dem Tag-Inspektor können Sie alle mit den Eigenschaften eines Tags verknüpften Attribute anzeigen und bearbeiten.

Siehe auch

„Überblick über den Eigenschafteninspektor“ auf Seite 15

„Texteigenschaften im Eigenschafteninspektor festlegen“ auf Seite 257

„An-und Abdocken von Bedienfeldern“ auf Seite 26

„Attribute mit dem Tag-Inspektor ändern“ auf Seite 364

Eigenschafteninspektor ein- bzw. ausblenden

❖ Wählen Sie „Fenster“ > „Eigenschaften“.

Eigenschafteninspektor erweitern bzw. reduzieren

❖ Klicken Sie in der unteren rechten Ecke des Eigenschafteninspektors auf den Erweiterungspfeil.

Eigenschaften von Seitenelementen anzeigen bzw. ändern

1 Wählen Sie das Seitenelement im Dokumentfenster aus.

Sie müssen den Eigenschafteninspektor unter Umständen erweitern, um alle Eigenschaften des ausgewählten Elements anzuzeigen.

2 Ändern Sie die gewünschten Eigenschaften im Eigenschafteninspektor.

Hinweis: Sie können Informationen zu bestimmten Eigenschaften aufrufen, indem Sie im Dokumentfenster ein Element auswählen und dann rechts oben im Eigenschaften-Inspektor auf das Fragezeichen klicken.

3 Sollten Ihre Änderungen nicht sofort im Dokumentfenster übernommen werden, bestätigen Sie die Änderungen

mit einem der folgenden Schritte:

• Klicken Sie außerhalb der Textfelder zur Eigenschaftenbearbeitung.

• Drücken Sie die Eingabetaste (Windows) bzw. Return (Macintosh).

• Drücken Sie die Tabulatortaste, um zu einer anderen Eigenschaft zu wechseln.

Kontextmenüs verwenden

Kontextmenüs bieten Sofortzugriff auf die wichtigsten Befehle und Eigenschaften für das aktuelle Objekt oder Fenster. In Kontextmenüs befinden sich nur Befehle für die aktuelle Auswahl.

1 Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) auf das Objekt oder

Fenster.

+ 737 hidden pages