Documente Academic
Documente Profesional
Documente Cultură
Verwenden von
ENTWURF
Letzte Aktualisierung 19.3.2010
2010 Adobe Systems Incorporated and its licensors. All rights reserved.
Copyright
Verwenden von Adobe Dreamweaver CS5 fr Windows und Mac OS This user guide is protected under copyright law, furnished for informational use only, is subject to change without notice, and should not be construed as a commitment by Adobe Systems Incorporated. Adobe Systems Incorporated assumes no responsibility or liability for any errors or inaccuracies that may appear in the informational content contained in this guide. This user guide is licensed for use under the terms of the Creative Commons Attribution Non-Commercial 3.0 License. This License allows users to copy, distribute, and transmit the user guide for noncommercial purposes only so long as (1) proper attribution to Adobe is given as the owner of the user guide; and (2) any reuse or distribution of the user guide contains a notice that use of the user guide is governed by these terms. The best way to provide notice is to include the following link. To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/3.0/ 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 U.S. 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. Updated Information/Additional Third Party Code Information available at http://www.adobe.com/go/thirdparty. This product includes software developed by the Apache Software Foundation (http://www.apache.org/). This product includes software developed by CollabNet (http://www.Collab.Net/) This product includes software developed by Fourthought, Inc. (http://www.fourthought.com). MPEG Layer-3 audio coding technology licensed by Fraunhofer IIS and Thomson. This software is based in part on the work of the Independent JPEG Group. Speech compression and decompression technology licensed from Nellymoser, Inc. (www.nellymoser.com) Video in Flash Player is powered by On2 TrueMotion video technology. 1992-2005 On2 Technologies, Inc. All Rights Reserved. http://www.on2.com. This product contains either BSAFE and/or TIPEM software by RSA Security, Inc. Sorenson Spark video compression and decompression technology licensed from Sorenson Media, Inc.
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. Unpublished rights 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. Adobe Systems Incorporated, 345 Park Avenue, San Jose, California 95110, USA.
ENTWURF
Letzte Aktualisierung 19.3.2010
iii
Inhalt
Kapitel 1: Neue Funktionen Kapitel 2: Arbeitsbereich Arbeitsablauf und Arbeitsbereich in Dreamweaver Im Dokumentfenster arbeiten CS4-Arbeitsbereich anpassen Tastaturbefehle Erweiterungen
..................................................................... 4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Kapitel 4: Dateien erstellen und verwalten Dokumente ffnen und erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63 Dateien und Ordner verwalten Dateien ein- und auschecken Dateien synchronisieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107 Dateien vom Server abrufen/auf dem Server bereitstellen
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
Frhere Dateiversionen wiederherstellen (Contribute-Benutzer) Dateiinformationen in Design Notes speichern Sites testen
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
Kapitel 5: Elemente und Bibliotheken verwalten Elemente und Bibliotheken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118 Elemente verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126 Liste mit Favoritenelementen erstellen und verwalten Bibliothekselemente verwenden
Kapitel 6: Seiten mit CSS erstellen Grundlegendes zu Cascading Stylesheets CSS erstellen und verwalten Mit Div-Tags arbeiten Seitenlayouts mit CSS gestalten
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167
Kapitel 7: Seitenlayouts mit HTML gestalten Visuelle Hilfsmittel fr das Layout verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184 Inhalte in Tabellen darstellen Frames verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 iv
Inhalt
Kapitel 8: Inhalt in Seiten einfgen Mit Seiten arbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218 Text einfgen und formatieren Bilder hinzufgen und ndern SWF-Dateien einfgen FLV-Dateien einfgen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249
Kapitel 9: Hyperlinks und Navigation Allgemeines zu Hyperlinks und Navigation Hyperlinks erstellen Sprungmens Imagemaps Navigationsleisten
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 301
Kapitel 10: Vorschau von Seiten Seitenvorschau in Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307 Vorschau von Seiten im Browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311 Vorschau von Seiten auf Mobilgerten
Kapitel 11: Mit Seitencode arbeiten Allgemeine Informationen zum Programmieren in Dreamweaver Codeumgebung einrichten Codeeinstellungen festlegen Code schreiben und bearbeiten Code ausblenden Code optimieren und debuggen Mit Head-Inhalt fr Seiten arbeiten Mit Server-Side Includes arbeiten Tag-Bibliotheken verwalten
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 343
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 363
Kapitel 12: JavaScript-Verhalten hinzufgen JavaScript-Verhalten verwenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 369 Integrierte Dreamweaver-Verhalten definieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373
Kapitel 13: Mit anderen Anwendungen arbeiten Anwendungsbergreifende Integration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 385 Fireworks und Dreamweaver verwenden Photoshop und Dreamweaver verwenden Flash und Dreamweaver verwenden Mit Adobe Bridge arbeiten Mit Device Central arbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 386 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 392
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 403
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 404 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 406
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 v
Inhalt
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 408 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 408
AIR-Erweiterung fr Dreamweaver
Kapitel 14: Vorlagen erstellen und verwalten Dreamweaver-Vorlagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 415 Vorlagen und vorlagenbasierte Dokumente erkennen Dreamweaver-Vorlagen erstellen Bearbeitbare Bereiche erstellen Wiederholende Bereiche erstellen Optionale Bereiche verwenden Verschachtelte Vorlagen erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 421 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 423 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 427 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 429 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 431 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 434 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 438 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 442 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 444 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 445 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 435
Vorlagen auf vorhandene Dokumente anwenden oder aus Dokumenten entfernen Inhalte in vorlagenbasierten Dokumenten bearbeiten Vorlagensyntax Voreinstellungen fr Vorlagenbereiche
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 448 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 450
Kapitel 15: Spry-Seiten visuell erstellen Spry-Framework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 452 Spry-Widgets verwenden (allgemeine Anweisungen) Mit dem Akkordeon-Widget arbeiten Mit dem Menleisten-Widget arbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 452 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 454 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 457 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 463 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 470
Mit dem Widget Reduzierbare Palette arbeiten Mit dem QuickInfo-Widget arbeiten
Mit dem Widget berprfung - Optionsschaltergruppe arbeiten Mit dem Widget berprfung - Textfeld arbeiten Mit dem Widget berprfung - Auswahl arbeiten Mit dem Widget berprfung - Kennwort arbeiten Mit dem Widget berprfung - Besttigung arbeiten Daten mit Spry anzeigen Spry-Effekte hinzufgen Mit dem Widget berprfung - Textbereich arbeiten
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 497 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 510
Kapitel 16: Adobe Online-Dienste verwenden Verwalten von Verbindungen zu Adobe-Online-Services BrowserLab Business Catalyst InContext Editing
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 515
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 516 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 517
Kapitel 17: XML-Daten mit XSLT anzeigen XML und XSLT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 525 XSL-Transformationen auf dem Server ausfhren XSL-Transformationen auf dem Client ausfhren Fehlende Zeichenentitten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 532 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 550
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 552
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 vi
Inhalt
Kapitel 18: Erstellen dynamischer Sites vorbereiten Webanwendungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 555 Computer fr die Entwicklung von Anwendungen einrichten Datenbankverbindungen fr ColdFusion-Entwickler Datenbankverbindungen fr ASP-Entwickler Datenbankverbindungen fr PHP-Entwickler Fehler bei Datenbankverbindungen beheben Verbindungsskripts entfernen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 563 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 568
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 586
Kapitel 19: Dynamische Seiten erstellen Arbeitsbereich fr visuelle Entwicklung optimieren Dynamische Seiten entwerfen berblick ber Quellen fr dynamischen Inhalt Bedienfelder fr dynamischen Inhalt Dynamischen Inhalt in Seiten einfgen Dynamischen Inhalt ndern Live-Daten anzeigen Datenbank-Datenstze anzeigen Quellen fr dynamischen Inhalt definieren
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 587
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 631
Kapitel 20: Anwendungen visuell entwickeln Master- und Detailseiten entwickeln . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 646 Such- und Ergebnisseiten erstellen Datensatz-Einfgeseiten erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 654 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 660 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 664 . . . . . . . . . . . . . . . . . . . . . . . . . . . 678 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 670
Seiten zum Aktualisieren von Datenstzen erstellen Seiten zum Lschen von Datenstzen erstellen Registrierungsseiten erstellen Anmeldeseiten erstellen
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 682 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 687
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 685 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 690
Seiten erstellen, auf die nur autorisierte Benutzer zugreifen knnen Ordner in Anwendungen schtzen (ColdFusion) ColdFusion-Komponenten verwenden Kapitel 21: Formulare erstellen Benutzerinformationen sammeln Webformulare erstellen ColdFusion-Formulare erstellen Kapitel 22: Eingabehilfen Dreamweaver und Barrierefreiheit
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 691
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 699 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 718
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 702
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 732
ENTWURF
Letzte Aktualisierung 19.3.2010
1
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 2
Neue Funktionen
Live-Ansicht-Navigation ber die Live-Ansicht-Navigation werden Hyperlinks in der Live-Ansicht aktiviert, sodass Sie serverseitige Anwendungen und dynamische Daten verwenden knnen. ber die Funktion knnen Sie zudem eine URL eingeben, um die ber einen Live-Webserver bereitgestellten Seiten zu prfen und aufgerufene Seiten zu bearbeiten, wenn sie in einer Ihrer lokal definierten Sites vorhanden sind. Weitere Informationen finden Sie unter Seitenvorschau in Dreamweaver auf Seite 307. PHP-Codehinweise fr benutzerdefinierte Klassen Mit PHP-Codehinweisen fr benutzerdefinierte Klassen wird die korrekte Syntax fr PHP-Funktionen, PHP-Objekte und PHP-Konstanten angezeigt, sodass Sie den genauen Code eingeben knnen. Codehinweise knnen auch fr Ihre benutzerdefinierten Funktionen und Klassen sowie fr Frameworks von Drittanbietern (z. B. Zend-Framework) verwendet werden. Vereinfachte Site-Einrichtung Im neu gestalteten Dialogfeld Site-Definition knnen Sie auf einfachere Weise eine lokale Dreamweaver-Site einrichten, sodass Sie sofort danach die ersten Webseiten erstellen knnen. In der Kategorie Remote-Server knnen Sie in einer Ansicht sowohl Remote- als auch Testserver angeben. Siehe Neue Site einrichten auf Seite 40. Site-spezifische Codehinweise Mithilfe der Funktion Site-spezifische Code-Hinweise knnen Sie bei Verwendung von PHP-Bibliotheken und CMS-Frameworks von Drittanbietern (z. B. WordPress, Drupal, Joomla! oder andere Frameworks) die Codeumgebung anpassen. Theme-Dateien fr Blogs und andere benutzerdefinierte PHP-Dateien und PHPVerzeichnisse knnen als Quellen fr Codehinweise einbezogen oder ausgeschlossen werden. Siehe Site-spezifische Codehinweise auf Seite 328. Verbesserte Subversion-Untersttzung Die Untersttzung von Subversion wird in Dreamweaver CS5 erweitert, sodass Sie nun Dateien lokal verschieben, kopieren und lschen und dann die nderungen mit dem SVN-Remote-Repository synchronisieren knnen. Mit dem neuen Befehl Wiederherstellen knnen Sie Hierarchiekonflikte schnell korrigieren oder eine frhere Version einer Datei wiederherstellen. Darber hinaus knnen Sie mit einer neuen Erweiterung angeben, mit welcher Version von Subversion Sie ein bestimmtes Projekt bearbeiten mchten. Weitere Informationen finden Sie unter Dateien mithilfe von Subversion (SVN) abrufen und einchecken auf Seite 95. Veraltete Funktionen Die folgenden Funktionen sind ab Dreamweaver CS5 veraltet:
Barrierefreiheitsprfungsbericht ASP/JavaScript-Serververhalten JavaScript-Verhalten Browser berprfen Verbindung zu einem FTP-/RDS-Server ohne Definieren von Sites herstellen JavaScript-Verhalten Shockwave oder SWF steuern Webfotoalbum erstellen JavaScript-Verhalten Popupmen ausblenden InContext Editing Verfgbare CSS-Klassen verwalten
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 3
Neue Funktionen
FlashPaper einfgen Mark of the Web einfgen/entfernen Microsoft Visual Sourcesafe-Integration Navigationsleisten JavaScript-Verhalten Sound abspielen Men Ereignisse zeigen fr (Bedienfeld Verhalten) JavaScript-Verhalten Popupmen anzeigen JavaScript-Verhalten Zeitleiste Tags berprfen Live Data-Ansicht
ENTWURF
Letzte Aktualisierung 19.3.2010
4
Kapitel 2: Arbeitsbereich
Der Arbeitsbereich von Adobe Dreamweaver CS5 enthlt Symbolleisten, Inspektoren und Bedienfelder, mit denen Sie Webseiten erstellen knnen. Sie haben hier die Mglichkeit, das generelle Erscheinungsbild und das Verhalten des Arbeitsbereichs anzupassen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 5
Arbeitsbereich
Inhalt in Seiten einfgen Fgen Sie Elemente wie Text, Bilder, Rollover-Bilder, Imagemaps, Farben, Filme, Sound, HTML-Links, Sprungmens und andere Medien in Ihre Webseiten ein. Sie knnen die integrierten Seitenerstellungsfunktionen fr solche Elemente wie Seitentitel und Hintergrundbilder verwenden, Eintrge direkt vornehmen oder Inhalte aus anderen Dokumenten importieren. Dreamweaver bietet zudem Verhalten zum Durchfhren von Aufgaben fr bestimmte Ereignisse, z. B. die berprfung von Formulardaten auf ihre Richtigkeit, wenn der Benutzer auf die Schaltflche Senden klickt, oder das ffnen eines zweiten Browserfensters, wenn die Hauptseite vollstndig geladen wurde. Schlielich bietet Dreamweaver noch Werkzeuge zur Maximierung der Website-Performance und zum Testen der Webseite-Kompatibilitt mit unterschiedlichen Browsern. (Siehe dazu den Abschnitt Inhalt in Seiten einfgen auf Seite 218.) Seiten durch manuelle Kodierung erstellen Webseiten knnen auch handcodiert werden. Dreamweaver verfgt sowohl ber benutzerfreundliche visuelle Bearbeitungstools als auch ber eine anspruchsvolle Codeumgebung. Zur Gestaltung und Bearbeitung Ihrer Seiten knnen Sie diese Funktionen einzeln oder gemeinsam einsetzen. (Siehe dazu den Abschnitt Mit Seitencode arbeiten auf Seite 312.) Webanwendungen fr dynamische Inhalte einrichten Viele Websites enthalten dynamische Seiten, auf denen Besucher Informationen anzeigen knnen, die in Datenbanken gespeichert sind. Gewhnlich ermglichen es diese Seiten einigen Besuchern auch, neue Informationen hinzuzufgen und in den Datenbanken enthaltene Informationen zu bearbeiten. Um solche Seiten zu erstellen, mssen Sie zunchst 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 555.) Dynamische Seiten erstellen In Dreamweaver knnen Sie viele verschiedene Quellen fr dynamischen Inhalt definieren, z. B. aus Datenbanken extrahierte Datenstze, Formularparameter und JavaBeans-Komponenten. Um dynamischen Inhalt in eine Seite einzufgen, ziehen Sie ihn einfach auf die Seite. Sie knnen festlegen, dass auf der Seite nur ein einziger Datensatz oder viele Datenstze gleichzeitig angezeigt werden. Sie knnen mehrere Seiten von Datenstzen anzeigen, besondere Hyperlinks zum Navigieren zwischen Datensatzseiten hinzufgen und Datensatzzhler erstellen, mit deren Hilfe die Besucher die Datenstze verfolgen knnen. Sie knnen Anwendungs- oder Geschftslogik mithilfe von Technologien wie Adobe ColdFusion und Webdiensten kapseln. Falls Sie grere Flexibilitt bentigen, knnen Sie eigene Serververhalten und interaktive Formulare erstellen. (Siehe dazu den Abschnitt Dynamische Seiten erstellen auf Seite 587.) Testen und verffentlichen Das Testen Ihrer Seiten gestaltet sich whrend des Entwicklungszyklus als fortlaufender Prozess. Am Ende des Arbeitsablaufs verffentlichen Sie die Website auf einem Server. Viele Entwickler sind auch fr eine regelmige Wartung der Website zustndig, um die Aktualitt des Inhalts und eine korrekte Funktionsweise zu gewhrleisten. (Siehe dazu den Abschnitt Dateien vom Server abrufen/auf dem Server bereitstellen auf Seite 87.) Ein Video-Tutorial zu Verwendungsmglichkeiten von Dreamweaver finden Sie unter www.adobe.com/go/lrvid4040_dw_de.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 6
Arbeitsbereich
Arbeitsbereichlayout
Im Dreamweaver-Arbeitsbereich knnen Sie Dokumente und Objekteigenschaften anzeigen. Im Arbeitsbereich sind viele der gngigsten Vorgnge in Symbolleisten angeordnet, damit Sie nderungen in Dokumenten schnell durchfhren knnen. 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 greren Anwendungsfenster integriert.
A: Anwendungsleiste B: Dokumentsymbolleiste C: Dokumentfenster D: Arbeitsbereichumschalter E: Bedienfeldgruppen F: CS Live G: TagSelektor H: Eigenschafteninspektor I: Bedienfeld Dateien
Auf Mac OS-Computern knnen in Dreamweaver mehrere Dokumente in einem einzigen Fenster mit jeweils einer Registerkarte fr jedes Dokument angezeigt werden. Darber hinaus kann ein schwebender Arbeitsbereich geffnet 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 Grennderung von Bedienfeldern die Gre des Hauptfensters gendert, wie dies auch in Windows der Fall ist.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 7
Arbeitsbereich
A: Anwendungsleiste B: Dokumentsymbolleiste C: Arbeitsbereichumschalter D: Dokumentfenster E: CS Live F: Bedienfeldgruppen G: TagSelektor H: Eigenschafteninspektor I: Bedienfeld Dateien
Ein Tutorial zum Verwenden unterschiedlicher Dreamweaver-Arbeitsbereiche finden Sie unter www.adobe.com/go/lrvid4042_dw_de.
Verwandte Themen
Symbolleisten, Inspektoren und Kontextmens verwenden CS4-Arbeitsbereich anpassen Dokumente mit Registerkarte anzeigen (Dreamweaver Macintosh) Tutorial zum Dreamweaver-Arbeitsbereich
Vom Begrungsbildschirm aus knnen Sie auerdem Nheres ber Dreamweaver erfahren, indem Sie an einer Tour durch das Produkt teilnehmen oder ein Tutorial durcharbeiten.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 8
Arbeitsbereich
Anwendungsleiste befindet sich am oberen Rand des Anwendungsfensters und enthlt einen Arbeitsbereichumschalter, verschiedene Mens (nur unter Windows) und weitere Anwendungssteuerelemente. Dokumentsymbolleiste enthlt Schaltflchen, mit denen Sie verschiedene Ansichten des Dokumentfensters (wie die
Entwurfsansicht und die Codeansicht), diverse Ansichtsoptionen und hufig verwendete Vorgnge, z. B. Anzeigen einer Vorschau im Browser, aufrufen knnen.
Standardsymbolleiste (wird im Standardlayout des Arbeitsbereichs nicht angezeigt) enthlt Schaltflchen fr hufig verwendete Operationen der Mens Datei und Bearbeiten: Neu, ffnen, Bridge durchsuchen, Speichern, Alles Speichern, Code drucken, Ausschneiden, Kopieren, Einfgen, Rckgngig und Wiederholen. Um die Standardsymbolleiste anzuzeigen, whlen Sie Ansicht > Symbolleisten > Standard. Code-Symbolleiste (wird nur in der Codeansicht angezeigt) enthlt Schaltflchen fr zahlreiche
Standardkodieroperationen.
Symbolleiste Stilwiedergabe (in der Standardeinstellung ausgeblendet) enthlt Schaltflchen, mit denen Sie beim
Verwenden von medienabhngigen Stylesheets anzeigen knnen, wie ein Entwurf in verschiedenen Medientypen aussieht. Sie enthlt ferner eine Schaltflche zum Aktivieren oder Deaktivieren von Cascading Style Sheets (CSS)Stilen.
Dokumentfenster zeigt die Dokumente an, whrend Sie sie erstellen und bearbeiten. Eigenschafteninspektor dient zum Anzeigen und ndern diverser Eigenschaften eines ausgewhlten Seiten- oder
Textobjekts. Jedes Objekt verfgt 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 auszuwhlen, klicken Sie in der Hierarchie auf das Tag.
Bedienfelder ermglichen das berprfen Ihrer Arbeit und das Durchfhren von nderungen. Beispiele sind das
Bedienfeld Einfgen, das Bedienfeld CSS-Stile und das Bedienfeld Dateien. Sie knnen ein Bedienfeld erweitern, indem Sie auf die entsprechende Registerkarte doppelklicken.
Bedienfeld Einfgen enthlt Schaltflchen zum Einfgen verschiedener Objekttypen (z. B. Bilder, Tabellen und
Medienelemente) in ein Dokument. Jedes Objekt entspricht einem HTML-Codeabschnitt, in dem Sie beim Einfgen verschiedene Attribute festlegen knnen. Sie knnen beispielsweise eine Tabelle einfgen, indem Sie im Bedienfeld Einfgen auf das Symbol Tabelle klicken. Sie haben auch die Mglichkeit, Objekte stattdessen ber das Men Einfgen einzufgen.
Bedienfeld Dateien ermglicht die Verwaltung der Dateien und Ordner, die Bestandteil einer Dreamweaver-Site
sind oder auf einem Remote-Server gespeichert werden. ber das Bedienfeld Dateien knnen Sie auch auf alle Dateien zugreifen, die sich auf dem lokalen Datentrger befinden, hnlich dem Windows Explorer (Windows) oder dem Finder (Macintosh).
Verwandte Themen
Im Dokumentfenster arbeiten auf Seite 18 Symbolleisten, Inspektoren und Kontextmens verwenden auf Seite 22 Verwalten von Fenstern und Bedienfeldern auf Seite 24
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 9
Arbeitsbereich
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 Bildlufe durchfhren knnen, um
Browser angezeigt wird. Sie knnen mit dem Dokument genauso interagieren, wie dies spter im Browser geschieht. In der Live-Ansicht kann der Code nicht bearbeitet werden. Sie knnen 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 verfgbar. In der Live-Codeansicht
wird der tatschliche Code dargestellt, den ein Browser zum Ausfhren der Seite verwendet. Dieser kann sich dynamisch ndern, whrend 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 geffneten 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. Darber hinaus wird unterhalb der Registerkarte des Dokuments (oder unterhalb der Titelleiste des Dokuments, wenn Dokumente in separaten Fenstern angezeigt werden) die Symbolleiste Zugehrige Dateien angezeigt. Zugehrige Dateien sind Dokumente, die mit der aktuellen Datei verknpft sind, beispielsweise CSS- oder JavaScript-Dateien. Um eine dieser zugehrigen Dateien im Dokumentfenster zu ffnen, klicken Sie auf der Symbolleiste Zugehrige Dateien auf den entsprechenden Dateinamen.
Verwandte Themen
Im Dokumentfenster arbeiten auf Seite 18 Live-Ansicht auf Seite 307 Zugehrige Dateien ffnen auf Seite 73 Allgemeine Informationen zum Programmieren in Dreamweaver auf Seite 312
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 10
Arbeitsbereich
A: Codeansicht anzeigen B: Code- und Entwurfsansicht anzeigen C: Entwurfsansicht anzeigen D: Live-Codeansicht E: Browserkompatibilitt prfen F: Live-Ansicht G: CSS-Prfmodus H: Vorschau/Debug im Browser I: Visuelle Hilfsmittel J: Entwurfsansicht aktualisieren K: Dokumenttitel L: Dateiverwaltung
Hinweis: Wenn Sie mit XML, JavaScript, CSS oder anderen codebasierten Dateitypen arbeiten, knnen Sie die Dateien nicht in der Entwurfsansicht anzeigen. Die Schaltflchen Entwurf und Teilen sind dann abgeblendet.
Live-Ansicht zeigt eine nicht bearbeitbare, interaktive und browserbasierte Ansicht des Dokuments an. Live-Codeansicht zeigt den tatschlichen Code an, der vom Browser zum Ausfhren der Seite verwendet wird. Dokumenttitel ermglicht Ihnen die Eingabe eines Titels fr 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 ermglicht es Ihnen, das Dokument im Browser als Vorschau anzuzeigen oder zu
Hinweis: Bei der Aktualisierung werden auch DOM-abhngige (Document Object Model) Codefunktionen neu angezeigt, wie z. B. die Mglichkeit zur Auswahl der ffnenden oder schlieenden Tags eines Codeblocks.
Ansichtsoptionen ermglicht es Ihnen, Optionen fr 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 ermglicht die Nutzung verschiedener visueller Hilfsmittel zum Entwerfen von Seiten. Markup berprfen ermglicht die berprfung des aktuellen Dokuments oder eines ausgewhlten Tags auf
Gltigkeit.
Browserkompatibilitt prfen ermglicht die berprfung der verwendeten CSS auf Kompatibilitt mit
verschiedenen Browsern.
Verwandte Themen
Symbolleisten anzeigen auf Seite 22 Seitenvorschau in der Live-Ansicht auf Seite 307 Codeeinstellungen festlegen auf Seite 319
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 11
Arbeitsbereich
Head-Inhalt anzeigen und bearbeiten auf Seite 357 Visuelle Hilfsmittel fr das Layout verwenden auf Seite 184
Verwandte Themen
Symbolleisten anzeigen auf Seite 22 Dokumente ffnen und erstellen auf Seite 63
Diese Symbolleiste kann nur bei Dokumenten mit medienabhngigen Stylesheets eingesetzt werden, z. B. dann, wenn in Ihrem Stylesheet eine body-Regel fr Druckmedien und eine andere body-Regel fr Handheld-Gerte festgelegt wurde. Weitere Informationen zur Erstellung medienabhngiger Stylesheets finden Sie auf der Website des World Wide Web Consortium unter www.w3.org/TR/CSS21/media.html. Standardmig zeigt Dreamweaver den Entwurf fr den Bildschirmmedientyp an (d. h., Sie sehen, wie eine Seite auf einem Computerbildschirm wiedergegeben wird). Sie knnen die folgenden Medientypwiedergaben anzeigen, indem Sie auf der Symbolleiste Stilwiedergabe auf die entsprechenden Schaltflchen 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-Gert wie beispielsweise einem
Ein Tutorial zur Entwicklung von Style Sheets fr Drucker und mobile Gerte finden Sie unter www.adobe.com/go/vid0156_de.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 12
Arbeitsbereich
Verwandte Themen
Symbolleisten anzeigen auf Seite 22
Hyperlinks sind standardmig in der Live-Ansicht nicht aktiv. Dadurch dass Hyperlinks nicht aktiv sind, knnen Sie im Dokumentfenster Hyperlinktext auswhlen oder darauf klicken, ohne dass eine andere Seite aufgerufen wird. Zum Testen von Hyperlinks in der Live-Ansicht knnen Sie einmaliges oder kontinuierliches Klicken aktivieren. Klicken Sie dazu im Men Ansichtsoptionenrechts neben der Adresszeile auf Hyperlinks aufrufen oder Hyperlinks fortlaufend aufrufen.
Verwandte Themen
Seitenvorschau in Dreamweaver auf Seite 307
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 13
Arbeitsbereich
Es ist nicht mglich, die Code-Symbolleiste abzudocken oder zu verschieben. Sie knnen sie jedoch ausblenden (Ansicht > Symbolleisten > Kodierung). Sie knnen die Code-Symbolleiste ferner bearbeiten, um weitere Schaltflchen anzuzeigen (z. B. Umbruch, Versteckte Zeichen und Automatischer Einzug) oder nicht verwendete Schaltflchen auszublenden. Dazu mssen Sie die XML-Datei bearbeiten, die die Symbolleiste generiert. Weitere Informationen hierzu finden Sie im Handbuch Dreamweaver erweitern.
Verwandte Themen
Symbolleisten anzeigen auf Seite 22 Code mit der Code-Symbolleiste einfgen auf Seite 330
A: Tag-Selektor B: Werkzeug auswhlen C: Handwerkzeug D: Zoomwerkzeug E: Vergrerung einstellen F: Popupmen Fenstergre G: Dokumentgre und geschtzte Downloadzeit H: Kodierungskennung
Tag-Selektor Zeigt die Hierarchie der Tags an, die die aktuelle Auswahl umgeben. Um ein Tag und seinen gesamten
Inhalt auszuwhlen, klicken Sie in der Hierarchie auf das Tag. Wenn Sie auf <body> klicken, wird der gesamte 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 gedrckter Ctrl-Taste (Macintosh) auf das Tag und whlen Sie im Kontextmen eine Klasse oder eine ID aus.
Werkzeug auswhlen aktiviert bzw. deaktiviert das Handwerkzeug. Handwerkzeug ermglicht es, auf ein Dokument zu klicken und das Dokument in das Dokumentfenster zu ziehen. Zoom-Werkzeug und Popupmen Vergrerung einstellen ermglicht eine vergrerte oder verkleinerte
Verwandte Themen
Fenstergre und Verbindungsgeschwindigkeit festlegen auf Seite 21 Ansicht vergrern und verkleinern auf Seite 230
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 14
Arbeitsbereich
Dokumentfenster vergrern oder verkleinern auf Seite 20 Voreinstellungen fr Downloadzeit und -gre festlegen auf Seite 231
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.
Verwandte Themen
An- und Abdocken von Bedienfeldern auf Seite 25 Eigenschafteninspektor verwenden auf Seite 23
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 15
Arbeitsbereich
Einige Kategorien enthalten Schaltflchen mit Popupmens. Wenn Sie eine Option aus einem Popupmen auswhlen, wird diese zur Standardaktion der entsprechenden Schaltflche. Beispiel: Wenn Sie im Popupmen der Schaltflche Bild die Option Bild-Platzhalter auswhlen, fgt Dreamweaver einen Bild-Platzhalter ein, wenn Sie das nchste Mal auf die Schaltflche Bild klicken. Jedes Mal, wenn Sie im Popupmen eine neue Option auswhlen, wird diese zur Standardaktion der entsprechenden Schaltflche. Das Bedienfeld Einfgen ist in die folgenden Kategorien unterteilt:
Kategorie Allgemein ermglicht das Erstellen und Einfgen der am hufigsten verwendeten Objekte, wie etwa
Widgets.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 16
Arbeitsbereich
Kategorie InContext Editing enthlt Schaltflchen zum Erstellen von InContext Editing-Seiten, einschlielich
Schaltflchen fr bearbeitbare und wiederholende Bereiche, sowie zum Verwalten von CSS-Klassen.
Kategorie Text ermglicht das Einfgen verschiedener Tags zur Text- und Listenformatierung, z. B. b, em, p, h1 und ul. Kategorie Favoriten ermglicht das Gruppieren und Anordnen der Schaltflchen des Bedienfelds Einfgen, die
CFML Basic, CFML Flow, CFML Advanced und PHP. Alle diese Kategorien enthalten Servercode-Objekte, die Sie in der Codeansicht einfgen knnen. Im Gegensatz zu den anderen Bedienfeldern in Dreamweaver knnen Sie das Bedienfeld Einfgen aus der standardmigen 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).
Verwandte Themen
Bedienfeld Einfgen verwenden auf Seite 218 Spry-Seiten visuell erstellen auf Seite 452
Bei der Anzeige von Websites, Dateien oder Ordnern im Bedienfeld Dateien knnen Sie die Gre 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 knnen Sie das Bedienfeld Dateien auch anpassen, indem Sie die Ansicht ndern (fr die lokale Site oder Remote-Site), die standardmig im reduzierten Bedienfeld angezeigt wird.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 17
Arbeitsbereich
Verwandte Themen
Mit Dateien im Bedienfeld Dateien arbeiten auf Seite 81
Sie knnen die Gre eines beliebigen Bereichs durch Ziehen des Rahmens zwischen den Bereichen ndern. Im Modus Aktuell enthlt das Bedienfeld CSS-Stile drei Bereiche: Das Bedienfeld Zusammenfassung fr Auswahl, das die CSS-Eigenschaften fr die aktuelle Auswahl im Dokument enthlt, das Bedienfeld Regeln, das den Speicherort von ausgewhlten Eigenschaften (bzw. je nach der Auswahl die Regelhierarchie fr das ausgewhlte Tag) anzeigt, und das Bedienfeld Eigenschaften, mit dem Sie CSS-Eigenschaften der Regel ndern knnen, die die Auswahl definiert. Im Modus Alle enthlt 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 verknpften Stylesheets definiert wurden. Im Bedienfeld Eigenschaften knnen Sie CSS-Eigenschaften fr eine ausgewhlte Regel im Bedienfeld Alle Regeln bearbeiten. nderungen, die Sie im Bedienfeld Regeln vornehmen, werden sofort bernommen, sodass Sie die nderungen whrend Ihrer Arbeit in einer Vorschau verfolgen knnen.
Verwandte Themen
CSS erstellen und verwalten auf Seite 137
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 18
Arbeitsbereich
Visuelle Hilfsmittel
Dreamweaver bietet verschiedene Hilfsmittel zur leichteren Gestaltung von Dokumenten und zur ungefhren Vorschau auf die Darstellung im Browser. Folgende Mglichkeiten stehen zur Verfgung:
Verkleinern oder Vergrern des Dokumentfensters auf eine bestimmte Fenstergre, 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 fr die genaue
Positionierung und nderung der Gre von Seitenelementen.
Verwendung des Rasters zur genaueren Positionierung und Grennderung 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 nchstgelegenen Rasterschnittpunkt ausgerichtet, wenn Sie sie verschieben oder ihre Gre ndern. (Andere Objekte, wie z. B. Bilder und Abstze, werden nicht am Raster ausgerichtet.) Die Ausrichtung findet auch dann statt, wenn das Raster nicht eingeblendet ist.
Verwandte Themen
Visuelle Hilfsmittel fr das Layout verwenden auf Seite 184
GoLive-Benutzer
Wenn Sie bis jetzt GoLive verwendet haben und auf Dreamweaver umsteigen mchten, dann lesen Sie die OnlineEinfhrung 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.
Verwandte Themen
Dreamweaver-Tutorial fr GoLive-Benutzer
Im Dokumentfenster arbeiten
Zwischen Ansichten im Dokumentfenster umschalten
Dokumente knnen 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 Mglichkeit, die geteilte Codeansicht oder die Code- und Entwurfsansicht horizontal oder vertikal anzuzeigen. (Die horizontale Anzeige ist die Standardeinstellung.)
Whlen Sie Ansicht > Code aus. Klicken Sie in der Dokument-Symbolleiste auf die Schaltflche Codeansicht anzeigen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 19
Arbeitsbereich
Hinweis: Wenn Sie die Gre des Dokument- oder Anwendungsfensters oder das Layout des Arbeitsbereichs ndern, wird das Teilungsverhltnis beibehalten, sodass die beiden Ansichten immer sichtbar sind.
Whlen Sie Ansicht > Entwurf aus. Klicken Sie in der Dokument-Symbolleiste auf die Schaltflche Entwurfsansicht anzeigen.
Whlen Sie Ansicht > Code und Entwurf aus. Klicken Sie in der Dokument-Symbolleiste auf die Schaltflche Code- und Entwurfsansicht anzeigen.
Standardmig wird die Codeansicht im oberen Bereich des Dokumentfensters und die Entwurfsansicht im unteren Bereich angezeigt. Wenn Sie die Entwurfsansicht im oberen Fensterbereich anzeigen mchten, whlen Sie Ansicht > Entwurfsansicht oben aus. Hinweis: Wenn Sie die Gre des Dokument- oder Anwendungsfensters oder das Layout des Arbeitsbereichs ndern, wird das Teilungsverhltnis beibehalten, sodass die beiden Ansichten immer sichtbar sind.
Wenn im Dokumentfenster beide Ansichten angezeigt werden, schalten Sie mit diesem Tastaturbefehl den Fokus von einer Ansicht zur anderen um.
In der Code- und Entwurfsansicht knnen Sie die Entwurfsansicht im linken Bereich anzeigen (Ansicht > Entwurfsansicht links). Hinweis: Wenn Sie die Gre des Dokument- oder Anwendungsfensters oder das Layout des Arbeitsbereichs ndern, wird das Teilungsverhltnis beibehalten, sodass die beiden Ansichten immer sichtbar sind.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 20
Arbeitsbereich
Verwandte Themen
berblick ber das Dokumentfenster auf Seite 9 Seitenvorschau in der Live-Ansicht auf Seite 307
Verwandte Themen
Verwalten von Fenstern und Bedienfeldern auf Seite 24 Dokumente mit Registerkarte anzeigen (Dreamweaver Macintosh) auf Seite 30
Hinweis: (Nur Windows) Dokumente im Dokumentfenster sind standardmig maximiert. Die Gre maximierter Dokumente kann nicht gendert werden. Klicken Sie zum Aufheben der maximierten Darstellung auf die entsprechende Schaltflche in der rechten oberen Ecke des Dokuments.
Die angezeigte Fenstergre ist die innere Abmessung des Browserfensters ohne Rahmen. Die Bildschirmgre steht in Klammern. So sollten Sie beispielsweise die Option 536 x 196 (640 x 480, Standard) als Fenstergre verwenden, wenn Besucher der Site mit groer Wahrscheinlichkeit Microsoft Internet Explorer oder Netscape Navigator mit den Standardeinstellungen auf einem Bildschirm mit einer Auflsung von 640 x 480 verwenden. Eine weniger exakte Grennderung lsst sich auch mit dem jeweiligen Standardverfahren Ihres Betriebssystems erzielen, beispielsweise durch Ziehen der rechten unteren Fensterecke.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 21
Arbeitsbereich
Sie knnen das Dokument auch auf eine bestimmte Breite einstellen und die Hhe unverndert lassen, indem Sie einen der Werte fr die Hhe auswhlen und ihn lschen.
3 Klicken Sie in das Feld Beschreibung und geben Sie einen aussagekrftigen Text fr eine bestimmte Gre ein.
Wenn Sie nur die Breite oder nur die Hhe einstellen mchten, lassen Sie einfach das entsprechende andere Feld leer.
4 Klicken Sie in das Feld Beschreibung und geben Sie einen aussagekrftigen Text fr die hinzugefgte Gre ein.
Geben Sie beispielsweise SVGA oder Durchschnitts-PC neben dem Eintrag fr einen Monitor mit 800 x 600 Pixel bzw. 17 Zoll Mac neben dem Eintrag fr einen Monitor mit 832 x 624 Pixel ein. Die meisten Bildschirme knnen auf eine Vielzahl von Pixel-Auflsungen eingestellt werden.
(Macintosh) aus.
2 Whlen Sie links in der Kategorieliste die Option Statusleiste. 3 Whlen Sie eine der folgenden Optionen:
Fenstergren ermglicht Ihnen, die Fenstergren anzupassen, die im Popupmen der Statusleiste angezeigt
werden.
Verbindungsgeschwindigkeit legt die zum Ermitteln der Downloadzeit verwendete Verbindungsgeschwindigkeit (in Kbit/s) fest. Die Downloadgre fr die Seite wird in der Statusleiste angezeigt. Ist im Dokumentfenster ein Bild ausgewhlt, wird dessen Downloadgre im Eigenschafteninspektor angezeigt.
Verwandte Themen
berblick ber die Statusleiste auf Seite 13 Dokumentfenster vergrern oder verkleinern auf Seite 20
Berichte in Dreamweaver
Zur Inhaltssuche, Fehlersuche und Inhaltsprfung knnen Sie Berichte in Dreamweaver erstellen. Die folgenden Berichtstypen stehen zur Verfgung:
Suchen ermglicht die Suche nach Tags, Attributen und bestimmtem Text in Tags. Referenz ermglicht die Suche nach hilfreichen Referenzinformationen. berprfung ermglicht die Prfung auf Code- bzw. Syntaxfehler. Browserkompatibilitt ermglicht es Ihnen festzustellen, ob der in Dokumenten enthaltene HTML-Code Tags oder Attribute enthlt, die von den Zielbrowsern nicht untersttzt werden.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 22
Arbeitsbereich
Hyperlink-Prfer ermglicht die Suche nach defekten, externen und verwaisten Hyperlinks und ihre Reparatur. Site-Berichte ermglicht die Optimierung des Arbeitsablaufs bzw. die Prfung der auf der Site vorhandenen HTMLAttribute. Arbeitsablaufberichte enthalten Ausgecheckt von- und Krzlich gendert-Eintrge sowie Design Notes, whrend HTML-Berichte Informationen zur Barrierefreiheit sowie Hinweise auf kombinierbare verschachtelte Schrift-Tags, fehlenden ALT-Text, berflssige verschachtelte Tags, entfernbare leere Tags und unbenannte Dokumente enthalten. FTP-Protokoll ermglicht das Anzeigen aller FTP-Dateibertragungen. Serverdebug ermglicht die Anzeige von Informationen zum Debuggen von Adobe ColdFusion-Anwendungen.
Verwandte Themen
Nach Tags, Attributen oder Text im Code suchen auf Seite 340 Referenzmaterial zu Sprachen verwenden auf Seite 342 Sites testen auf Seite 113 Tags berprfen auf Seite 347 Browserkompatibilitt berprfen auf Seite 347 Fehlerhafte, externe und verwaiste Hyperlinks suchen auf Seite 304 Dateien auf einem Remote-Server bereitstellen auf Seite 89 Dateien von einem Remote-Server abrufen auf Seite 88 ColdFusion-Debugger verwenden (nur Windows) auf Seite 348
Whlen Sie Ansicht > Symbolleisten und dann die gewnschte Symbolleiste aus. Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste (Macintosh) auf eine beliebige
Symbolleiste und whlen Sie sie dann im Kontextmen aus. Hinweis: Um die Code-Symbolleiste im Codeinspektor anzuzeigen (Fenster > Codeinspektor) mssen Sie die CodeSymbolleiste im Popupmen Ansicht am oberen Rand des Inspektors whlen.
Verwandte Themen
berblick ber die Dokumentsymbolleiste auf Seite 9 berblick ber die Standardsymbolleiste auf Seite 11
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 23
Arbeitsbereich
berblick ber die Code-Symbolleiste auf Seite 12 berblick ber die Symbolleiste Stilwiedergabe auf Seite 11
Eigenschafteninspektor verwenden
Im Eigenschafteninspektor knnen Sie die gngigsten Eigenschaften des ausgewhlten Seitenelements, z. B. von Text oder eines eingefgten Objekts, anzeigen und ndern. Der Inhalt des Eigenschafteninspektors hngt von den ausgewhlten Elementen ab. Klicken Sie zum Aufrufen der Hilfe fr einen bestimmten Eigenschafteninspektor auf die Hilfeschaltflche in der rechten oberen Ecke des Eigenschafteninspektors oder whlen Sie im Men Optionen eines Eigenschafteninspektors die Option Hilfe aus. Hinweis: Mit dem Tag-Inspektor knnen Sie alle mit den Eigenschaften eines Tags verknpften Attribute anzeigen und bearbeiten.
Verwandte Themen
berblick ber den Eigenschafteninspektor auf Seite 14 Texteigenschaften im Eigenschafteninspektor festlegen auf Seite 242 An- und Abdocken von Bedienfeldern auf Seite 25 Attribute mit dem Tag-Inspektor ndern auf Seite 351
Sie mssen den Eigenschafteninspektor unter Umstnden erweitern, um alle Eigenschaften des ausgewhlten Elements anzuzeigen.
2 ndern Sie die gewnschten Eigenschaften im Eigenschafteninspektor.
Hinweis: Sie knnen Informationen zu bestimmten Eigenschaften aufrufen, indem Sie im Dokumentfenster ein Element auswhlen und dann rechts oben im Eigenschaften-Inspektor auf das Fragezeichen klicken.
3 Sollten Ihre nderungen nicht sofort im Dokumentfenster bernommen werden, besttigen Sie die nderungen
Klicken Sie auerhalb der Textfelder zur Eigenschaftenbearbeitung. Drcken Sie die Eingabetaste (Windows) bzw. Return (Macintosh). Drcken Sie die Tabulatortaste, um zu einer anderen Eigenschaft zu wechseln.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 24
Arbeitsbereich
Kontextmens verwenden
Kontextmens bieten Sofortzugriff auf die wichtigsten Befehle und Eigenschaften fr das aktuelle Objekt oder Fenster. In Kontextmens befinden sich nur Befehle fr die aktuelle Auswahl.
1 Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste (Macintosh) auf das Objekt oder
Fenster.
2 Whlen Sie im Kontextmen einen Befehl aus.
CS4-Arbeitsbereich anpassen
Verwalten von Fenstern und Bedienfeldern
Sie knnen einen individuell angepassten Arbeitsbereich erstellen, indem Sie Dokumentfenster und Bedienfelder verschieben und verndern. Sie haben auch die Mglichkeit, Arbeitsbereiche zu speichern und zwischen ihnen zu wechseln. Bei Fireworks kann die Umbenennung von benutzerdefinierten Arbeitsbereichen zu unerwartetem Verhalten fhren. Hinweis: Beim folgenden Beispiel kommt zu Demonstrationszwecken Photoshop zum Einsatz. Die Funktionsweise des Arbeitsbereichs ist in allen Produkten gleich.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 25
Arbeitsbereich
Wenn Sie die Anordnung der Dokumentfenster ndern mchten, ziehen Sie die Registerkarte eines Fensters an die
gewnschte neue Position in der Gruppe.
Wenn Sie ein Dokumentfenster aus einer Gruppe von Fenstern abdocken (Verankerung lsen) mchten, ziehen
Sie die Registerkarte des Fensters aus der Gruppe heraus. Hinweis: Whlen Sie in Photoshop Fenster > Anordnen > Schwebendes Fenster, um die Verankerung fr ein einzelnes Dokumentfenster aufzuheben bzw. Fenster > Anordnen > Nur schwebende Fenster, um die Verankerung aller Dokumentfenster gleichzeitig aufzuheben. Weitere Informationen finden Sie im technischen Hinweis unter kb405298. Hinweis: In Dreamweaver wird das An- und Abdocken von Dokumentfenstern nicht untersttzt. Klicken Sie im Dokumentfenster auf die Schaltflche Minimieren, um schwebende Fenster zu erstellen, oder whlen Sie Fenster > Nebeneinander, um die Dokumentfenster nebeneinander anzuzeigen. Suchen Sie in der Dreamweaver-Hilfe nach dem Begriff Nebeneinander, um weitere Informationen zu diesem Thema anzuzeigen.
Wenn Sie ein Dokumentfenster an eine separate Gruppe von Fenstern andocken mchten, ziehen Sie das Fenster
in die Gruppe.
Wenn Sie Gruppen von bereinander oder nebeneinander angeordneten Dokumenten erstellen mchten, ziehen
Sie das Fenster in einen der Ablagebereiche am Rand eines anderen Fensters. Sie haben auerdem die Mglichkeit, ber die Schaltflche Layout in der Anwendungsleiste ein Layout fr die Gruppe auszuwhlen. Hinweis: Von einigen Produkten wird diese Funktion nicht untersttzt. Unter Umstnden stehen Ihnen jedoch in den betreffenden Programmen im Men Fenster die Befehle berlappend und Nebeneinander fr das Layout Ihrer Dokumente zur Verfgung.
Wenn Sie beim Ziehen einer Auswahl zu einem anderen Dokument in einer Registerkartengruppe wechseln
mchten, halten Sie die Auswahl einen Moment lang ber die Registerkarte des Dokuments. Hinweis: Von einigen Produkten wird diese Funktion nicht untersttzt.
Um ein Bedienfeld anzudocken, ziehen Sie es an seiner Registerkarte in das Dock ber, unter oder zwischen
andere Bedienfelder.
Um eine Bedienfeldgruppe anzudocken, ziehen Sie ihre Titelleiste (die deckend dargestellte, leere Leiste ber den
Registerkarten) in das Dock.
Um ein Bedienfeld oder eine Bedienfeldgruppe zu entfernen, ziehen Sie die Komponente an der Registerkarte oder
Titelleiste aus dem Dock. Sie knnen die Komponente in ein anderes Dock ziehen oder sie schwebend ber dem Arbeitsbereich platzieren.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 26
Arbeitsbereich
Das Navigatorbedienfeld wird in ein neues Dock gezogen, angezeigt durch die vertikale blaue Linie
Sie knnen verhindern, dass einzelne Bedienfelder den gesamten Platz in einem Dock belegen. Ziehen Sie den unteren Rand des Docks nach oben, sodass er nicht mehr an den Rand des Arbeitsbereichs angrenzt.
Um ein Bedienfeld zu verschieben, ziehen Sie es an seiner Registerkarte. Um eine Bedienfeldgruppe zu verschieben, ziehen Sie die Titelleiste.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 27
Arbeitsbereich
A B
Der schmale blaue Bereich zeigt an, dass das Farbbedienfeld ber der Gruppe des Ebenenbedienfelds separat angedockt wird. A. Titelleiste B. Registerkarte C. Ablagebereich
Drcken Sie die Strg-Taste (Windows) bzw. Befehlstaste (Mac OS), whrend Sie ein Bedienfeld verschieben, um zu verhindern, dass es angedockt wird. Durch Drcken der Esc-Taste beim Verschieben des Bedienfelds knnen Sie den Vorgang abbrechen.
Wenn Sie ein Bedienfeld entfernen mchten klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrckter
Ctrl-Taste (Mac) auf die zugehrige Registerkarte und whlen Sie dann Schlieen. Alternativ knnen Sie das Bedienfeld im Men Fenster deaktivieren.
Um ein Bedienfeld hinzuzufgen, whlen Sie es im Men Fenster aus und verankern Sie es dann an der
gewnschten Position.
Um die Bedienfelder in einer Gruppe anders anzuordnen, ziehen Sie die Registerkarte eines Bedienfelds an eine
andere Stelle in der Gruppe.
Soll das Bedienfeld aus einer Gruppe entfernt werden, damit es ber dem Arbeitsbereich schwebt, ziehen Sie es an
seiner Registerkarte aus der Gruppe.
Um eine Gruppe zu verschieben, ziehen Sie die Titelleiste (oberhalb der Registerkarten).
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 28
Arbeitsbereich
Um schwebende Bedienfelder zu stapeln, ziehen Sie ein Bedienfeld an seiner Registerkarte auf den Ablagebereich
unterhalb eines anderen Bedienfelds.
Um die Stapelreihenfolge zu ndern, ziehen Sie ein Bedienfeld an seiner Registerkarte nach oben oder unten.
Hinweis: Lassen Sie die Registerkarte ber dem schmalen Ablagebereich zwischen Bedienfeldern los, nicht auf dem breiten Ablagebereich in einer Titelleiste.
Um ein Bedienfeld oder eine Bedienfeldgruppe aus dem Stapel zu entfernen, damit die Komponente auf dem
Arbeitsbereich schwebt, ziehen Sie die Komponente an seiner Registerkarte oder Titelleiste aus dem Stapel.
Wenn Sie die Gre eines Bedienfelds verndern mchten, ziehen Sie an einer Seite des Bedienfelds. Die Gre
einiger Bedienfelder z. B. das Farbbedienfeld in Photoshop kann nicht durch Ziehen gendert werden.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 29
Arbeitsbereich
Um alle Bedienfeldsymbole in einer Spalte zu verkleinern oder zu vergrern, klicken Sie auf den Doppelpfeil oben
im Verankerungsbereich.
Klicken Sie auf das Symbol eines Bedienfelds, um nur dieses Bedienfeld einzublenden. Wenn Sie die Gre von Bedienfeldsymbolen so einstellen mchten, dass nur die Symbole (und nicht die
Beschriftungen) angezeigt werden, verndern Sie die Breite des Docks, bis der Text nicht mehr zu sehen ist. Wenn Sie den Symboltext wieder einblenden mchten, verbreitern Sie das Dock.
Soll ein Bedienfeld wieder zum Symbol verkleinert werden, klicken Sie auf seine Registerkarte, sein Symbol oder
den Doppelpfeil in der Titelleiste des Bedienfelds. Bei einigen Programmen knnen Sie in den Voreinstellungen fr die Oberflche bzw. Benutzeroberflche Bedienfelder automatisch auf Symbole minimieren whlen. Ein aus einem Symbol wiederhergestelltes Bedienfeld wird dann automatisch wieder zum Symbol verkleinert, sobald Sie auf eine andere Stelle klicken.
Um ein Bedienfeldsymbol (oder eine Bedienfeldsymbolgruppe) zu verschieben, ziehen Sie das Symbol. Sie knnen
Bedienfeldsymbole im Dock nach oben und unten, in andere Docks (dort werden sie im Bedienfeldstil des betreffenden Docks angezeigt) oder aus dem Dock heraus ziehen (sie werden dann als schwebende, eingeblendete Bedienfelder angezeigt).
(Illustrator) Whlen Sie Fenster > Arbeitsbereich > Arbeitsbereich speichern. (Photoshop, InDesign, InCopy) Whlen Sie Fenster > Arbeitsbereich > Neuer Arbeitsbereich. (Dreamweaver) Whlen Sie Fenster > Arbeitsbereichlayout > Neuer Arbeitsbereich. (Flash) Whlen Sie im Arbeitsbereich-Umschalter auf der Anwendungsleiste die Option Neuer
Arbeitsbereich.
(Fireworks) Whlen Sie im Arbeitsbereich-Umschalter auf der Anwendungsleiste die Option Zustand
speichern.
2 Geben Sie einen Namen fr den Arbeitsbereich ein. 3 (Photoshop, InDesign) Whlen Sie unter Erfassen eine oder mehrere der folgenden Optionen aus:
Bedienfelderpositionen Speichert die aktuellen Bedienfelderpositionen (nur fr InDesign).
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 30
Arbeitsbereich
Tastaturbefehle Speichert die aktuellen Tastaturbefehle (nur Photoshop). Mens Speichert den aktuellen Mensatz.
In Photoshop knnen Sie jedem Arbeitsbereich einen Tastaturbefehl zuweisen, damit sich die verschiedenen Arbeitsbereiche schnell aufrufen lassen.
(Photoshop, InDesign, InCopy) Whlen Sie im Arbeitsbereich-Umschalter die Option Arbeitsbereich lschen. (Illustrator) Whlen Sie Fenster > Arbeitsbereich > Arbeitsbereiche verwalten, whlen Sie den gewnschten
Arbeitsbereich und klicken Sie auf das Papierkorbsymbol.
(Photoshop, InDesign) Whlen Sie Fenster > Arbeitsbereich > Arbeitsbereich lschen. Markieren Sie den
gewnschten Arbeitsbereich, und klicken Sie auf Lschen.
zurcksetzen.
Um einen einzelnen Arbeitsbereich wiederherzustellen, whlen Sie Fenster > Arbeitsbereich > [Name des
Arbeitsbereichs] zurcksetzen.
verschieben aus.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 31
Arbeitsbereich
Dreamweaver zeigt derzeit geffnete Dokumente beim ndern der Voreinstellungen weiterhin unverndert an. Dokumente, die Sie ffnen, nachdem Sie eine neue Voreinstellung gewhlt haben, werden entsprechend dieser Voreinstellung angezeigt.
Farbsymbole aktivieren
In Dreamweaver werden ab Version CS4 standardmig schwarze und weie Symbole verwendet, die sich in farbige Symbole ndern, wenn Sie mit dem Mauszeiger darauf zeigen. Sie knnen die Farbsymbole permanent aktivieren, sodass keine Bewegung mit dem Mauszeiger mehr erforderlich ist.
Fhren Sie einen der folgenden Schritte aus:
Whlen Sie Ansicht > Farbsymbole aus. Wechseln Sie in den Arbeitsbereich Klassisch oder Coder.
Wenn Sie die Farbsymbole wieder deaktivieren mchten, heben Sie die Auswahl der Option Farbsymbole im Men Ansicht auf oder wechseln Sie in einen anderen Arbeitsbereich.
Verwandte Themen
Anzeigen von und Wechseln zwischen Arbeitsbereichen auf Seite 30
Begrungsbildschirm ausblenden
Markieren Sie auf dem Begrungsbildschirm das Kontrollkstchen Nicht mehr anzeigen.
Begrungsbildschirm anzeigen
1 Whlen Sie Bearbeiten > Voreinstellungen (Windows) bzw. Dreamweaver > Voreinstellungen
(Macintosh) aus.
2 Aktivieren Sie in der Kategorie Allgemein die Option Begrungsbildschirm anzeigen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 32
Arbeitsbereich
Dreamweaver verhindert, dass die angepasste Konfiguration eines Benutzers sich auf die angepasste Konfiguration anderer Benutzer auswirkt. Hierzu erstellt die Anwendung automatisch Kopien verschiedener Konfigurationsdateien, wenn Sie Dreamweaver das erste Mal in einem der kompatiblen Mehrbenutzer-Betriebssysteme ausfhren. Diese benutzerspezifischen Konfigurationsdateien werden in einem persnlichen Ordner gespeichert. Beispielsweise werden sie in Windows XP unter C:\Dokumente und Einstellungen\Benutzername\Anwendungsdaten\Adobe\Dreamweaver\de_DE\Configuration gespeichert (dieser Ordner ist standardmig versteckt). Whlen Sie zum Anzeigen versteckter Dateien und Ordner im Windows Explorer die Menoption Extras > Ordneroptionen aus, klicken Sie auf die Registerkarte Ansicht und aktivieren Sie die Option Alle Dateien und Ordner anzeigen. Unter Windows Vista sind die Dateien unter C:\Users\Benutzername\AppData\Roaming\Adobe\Dreamweaver\de_DE\Configuration gespeichert (dieser Ordner ist standardmig versteckt). Whlen Sie zum Anzeigen versteckter Dateien und Ordner im Windows Explorer die Menoption Extras > Ordneroptionen aus, klicken Sie auf die Registerkarte Ansicht und aktivieren Sie die Option Alle Dateien und Ordner anzeigen. In Mac OS X werden sie in Ihrem Stammordner unter Users/Benutzername/Library/Application Support/Adobe/Dreamweaver/Configuration gespeichert. Wenn Sie Dreamweaver aktualisieren oder erneut installieren, erstellt Dreamweaver automatisch Sicherungskopien der vorhandenen Benutzerkonfigurationsdateien, sodass Sie auch weiterhin Zugriff auf durchgefhrte nderungen besitzen, falls Sie die Dateien manuell angepasst haben.
(Macintosh) aus.
2 Whlen Sie eine der folgenden Optionen:
Dokumente als Registerreiter ffnen ffnet alle Dokumente in einem zentralen Fenster. Mithilfe der Registerreiter knnen Sie zwischen den einzelnen Dokumenten wechseln (nur bei Macintosh-Systemen). Begrungsbildschirm zeigt den Begrungsbildschirm von Dreamweaver an, wenn Sie Dreamweaver starten oder
JavaScript-Dateien). Fr jede zugehrige Datei wird im oberen Bereich des Dokuments jeweils eine Schaltflche angezeigt. Wenn Sie darauf klicken, wird die entsprechende Datei geffnet.
Dynamisch zugehrige Dateien suchen Hier knnen Sie auswhlen, ob dynamisch zugehrige Dateien automatisch oder nach manueller Auswahl auf der Symbolleiste Zugehrige Dateien angezeigt werden. Sie knnen zudem festlegen, ob die Suche nach dynamisch zugehrigen Dateien deaktiviert wird. Hyperlinks beim Verschieben von Dateien aktualisieren legt fest, was passiert, wenn Sie ein Dokument Ihrer Site
verschieben, umbenennen oder lschen. Sie knnen die Voreinstellung so whlen, dass Hyperlinks immer automatisch aktualisiert werden, nie aktualisiert werden oder Sie zum Durchfhren einer Aktualisierung aufgefordert werden. (Siehe auch Hyperlinks automatisch aktualisieren auf Seite 297.)
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 33
Arbeitsbereich
Beim Einfgen von Objekten Dialogfeld anzeigen legt fest, ob Sie in Dreamweaver zum Eingeben zustzlicher
Informationen aufgefordert werden, wenn Sie Bilder, Tabellen, Shockwave-Filme und bestimmte andere Objekte mit dem Bedienfeld Einfgen oder dem Men Einfgen hinzufgen. Wenn diese Option nicht markiert ist, wird das Dialogfeld nicht angezeigt, und Sie mssen die Quelldatei fr Bilder, die Anzahl von Zeilen in einer Tabelle usw. ber den Eigenschafteninspektor angeben. Bei Rollover-Bildern und Fireworks-HTML wird immer ein Dialogfeld angezeigt, wenn Sie das Objekt einfgen, unabhngig von der Einstellung fr diese Option. (Sie knnen diese Einstellung vorbergehend auer Kraft setzen, indem Sie bei gedrckter Strg-Taste (Windows) bzw. Befehlstaste (Macintosh) klicken, wenn Sie Objekte erstellen und einfgen.)
Doppelbyte-Inline-Eingabe aktivieren ermglicht die Eingabe von Doppelbyte-Text direkt im Dokumentfenster, wenn Sie eine Entwicklungsumgebung oder ein Language Kit mit Untersttzung fr Doppelbyte-Text verwenden (z. B. fr japanische Schriftzeichen). Wenn diese Option nicht markiert ist, wird ein Texteingabefenster zum Eingeben und Konvertieren von Doppelbyte-Text eingeblendet. Der Text wird nach der bernahme im Dokumentfenster angezeigt. Nach berschrift zu einfachem Absatz wechseln legt fest, dass durch Drcken der Eingabetaste (Windows) bzw. von Return (Macintosh) in der Entwurfsansicht am Ende eines berschriftabsatzes ein neuer Absatz mit dem Tag p erstellt wird. (Ein berschriftabsatz ist ein Absatz mit einem berschrift-Tag, z. B. h1 oder h2.) Wenn die Option deaktiviert ist, wird durch Drcken der Eingabetaste bzw. von Return am Ende eines berschriftabsatzes ein neuer Absatz erstellt, der mit dem gleichen berschrift-Tag versehen ist (Sie knnen also mehrere berschriften in einer Zeile eingeben und die Einzelheiten erst anschlieend eingeben). Mehrere aufeinanderfolgende Leerzeichen zulassen legt fest, dass durch Eingabe von zwei oder mehr
aufeinanderfolgenden Leerzeichen in der Entwurfsansicht geschtzte Leerzeichen erstellt werden, die in einem Browser als mehrere Leerzeichen dargestellt werden. (Beispielsweise knnen Sie zwei Leerzeichen zwischen Stzen eingeben.) Diese Option ist hauptschlich fr Personen vorgesehen, die hufig Textverarbeitungsprogramme verwenden. Ist diese Option deaktiviert, werden mehrere Leerzeichen hintereinander als ein einziges Leerzeichen behandelt (da Browser dies ebenfalls tun).
Verwenden Sie <strong> und <em> anstelle von <b> und <i> gibt an, dass Dreamweaver das Tag <strong> verwendet, wenn Sie eine Aktion durchfhren, bei der normalerweise das Tag <b> eingefgt wrde. Ebenso wird das Tag <em> eingefgt, wenn Sie normalerweise <i> eingeben wrden. Zu solchen Vorgngen zhlt beispielsweise auch das Klicken auf die Schaltflchen Fett oder Kursiv im Eigenschafteninspektor fr Text im HTML-Modus bzw. das Auswhlen von Formatieren > Stil > Fett oder Formatieren > Stil > Kursiv. Wenn die Tags b und i in Ihrem Dokument verwendet werden sollen, deaktivieren Sie diese Option.
Hinweis: Das World Wide Web Consortium rt von der Verwendung der Tags b und i ab. Die Tags strong und em bieten umfassendere semantische Informationen als die Tags b und i.
Warnung beim Platzieren bearbeitbarer Bereiche in <p>- oder <h1>-<h6>-Tags gibt an, ob eine Warnmeldung angezeigt werden soll, wenn Sie eine Dreamweaver-Vorlage mit einem bearbeitbaren Bereich in einem Absatz- oder einem berschrift-Tag speichern mchten. Diese Meldung teilt Ihnen mit, dass Benutzer in dem Bereich keine weiteren Abstze erstellen knnen. Diese Option ist in der Standardeinstellung aktiviert. Zentrieren gibt an, ob Elemente mit divalign="center" oder mit dem center-Tag zentriert werden sollen, wenn
Sie im Eigenschafteninspektor auf die Schaltflche Zentrieren klicken. Hinweis: Diesen beiden Anstze fr das Zentrieren wurden mit der HTML 4.01-Spezifikation offiziell verworfen, daher sollten Sie Text mit CSS-Stilen zentrieren. Beide Verfahren sind in der Spezifikation XHTML 1.0 Transitional nach wie vor technisch zulssig, in der Spezifikation XHTML 1.0 Strict jedoch nicht mehr.
Zulssige Hchstzahl der Verlaufsschritte gibt die Anzahl der im Bedienfeld Verlauf gespeicherten und angezeigten
Schritte an. (Der Standardwert drfte fr die Anforderungen der meisten Benutzer ausreichend sein.) Wenn Sie die im Bedienfeld Verlauf angegebene Anzahl von Schritten berschreiten, werden die ltesten Schritte gelscht.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 34
Arbeitsbereich
Rechtschreibkonventionen (z. B. Amerikanisches bzw. Britisches Englisch) enthlt, werden die Dialekte einzeln im Popupmen Rechtschreibwrterbuch aufgefhrt.
Verwandte Themen
Arbeitsbereichlayout auf Seite 6 Hyperlinks automatisch aktualisieren auf Seite 297
(Macintosh) aus.
2 Whlen Sie links in der Kategorieliste die Option Schriften. 3 Whlen Sie in der Liste Schrifteinstellungen einen Kodierungstyp aus (z. B. Westeuropisch oder Japanisch).
Hinweis: Zur Anzeige von asiatischen Sprachen muss das Betriebssystem Doppelbyte-Schriften untersttzen.
4 Whlen Sie fr jede Kategorie der ausgewhlten Kodierung eine Schrift und eine Schriftgre aus.
Hinweis: In den Popupmens mit Schriften werden nur Schriften angezeigt, die auf Ihrem Computer installiert sind. Wenn Sie also z. B. japanischen Text anzeigen mchten, muss eine japanische Schrift installiert sein.
Proportionalschrift ist die Schrift, mit der in Dreamweaver normaler Text angezeigt wird (beispielsweise Text in
Abstzen, berschriften und Tabellen). Die Standardeinstellung hngt von den auf Ihrem System installierten Schriften ab. Bei den meisten westeuropischen Systemen ist die Standardeinstellung Times New Roman 12 Punkt (mittel) unter Windows und Times 12 Punkt unter Mac OS.
Feste Schrift ist die Schrift, die in Dreamweaver verwendet wird, um Text innerhalb der Tags pre, code und tt
anzuzeigen. Die Standardeinstellung hngt von den auf Ihrem System installierten Schriften ab. Bei den meisten westeuropischen Systemen ist die Standardeinstellung Courier New 10 Punkt (klein) unter Windows und Monaco 12 Punkt unter Mac OS.
Codeansicht ist die Schrift, die fr den Text in der Codeansicht und im Codeinspektor verwendet wird. Die
Standardeinstellung hngt von den auf Ihrem System installierten Schriften ab.
Verwandte Themen
Dokumentkodierung auf Seite 225
Dreamweaver-Markierungsfarben anpassen
Mit den Voreinstellungen fr die Markierung knnen Sie die Farben anpassen, die Dreamweaver zur Kennzeichnung von Vorlagenbereichen, Bibliothekselementen, Drittanbieter-Tags, Layoutelementen und Code verwendet.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 35
Arbeitsbereich
Verwandte Themen
Farbwhler verwenden auf Seite 229 Markierungsfarbe von Div-Tags ndern auf Seite 169
Markierungsfarbe ndern
1 Whlen Sie Bearbeiten > Voreinstellungen und dann die Kategorie Markierung aus. 2 Klicken Sie neben dem Objekt, fr das die Markierungsfarbe gendert werden soll, auf das Farbfeld und whlen Sie
in der Farbauswahl eine neue Farbe aus oder geben Sie einen Hexadezimalwert ein.
Tastaturbefehle
Referenzseiten fr den aktuellen Tastaturbefehlssatz erstellen
Auf einer Referenzseite wird der aktuelle Tastaturbefehlssatz gespeichert. Die Daten werden als HTML-Tabelle gesichert. Sie knnen die Referenzseite in einem Browser anzeigen oder ausdrucken.
1 Whlen Sie Bearbeiten > Tastaturbefehle (Windows) bzw. Dreamweaver > Tastaturbefehle (Macintosh). 2 Klicken Sie auf die Schaltflche Satz als HTML exportieren. Dies ist die dritte der vier Schaltflchen am oberen
Tastaturbefehle anpassen
Mit dem Tastaturbefehl-Editor erstellen Sie eigene Tastaturbefehle, einschlielich Tastaturbefehle fr Codefragmente. Sie knnen damit auch Tastaturbefehle entfernen, vorhandene Tastaturbefehle bearbeiten und voreingestellte Sets aus Tastaturbefehlen auswhlen.
Verwandte Themen
Mit Codefragmenten arbeiten auf Seite 339
Tastenkombinationen erstellen
Erstellen Sie Ihre eigenen Tastaturbefehle, bearbeiten Sie vorhandene Kurzbefehle oder whlen Sie einen bereits festgelegten Satz an Kurzbefehlen aus.
1 Whlen Sie Bearbeiten > Tastaturbefehle (Windows) bzw. Dreamweaver > Tastaturbefehle (Macintosh). 2 Whlen Sie unter den folgenden Optionen aus und klicken Sie auf OK:
Aktueller Satz Erlaubt Ihnen die Auswahl eines Satzes der in Dreamweaver vordefinierten Tastaturbefehle oder eines
von Ihnen definierten Satzes. Die vordefinierten Stze werden im Men zuerst angezeigt. Wenn Sie beispielsweise mit
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 36
Arbeitsbereich
den Stzen aus HomeSite oder BBEdit vertraut sind, knnen Sie diese Tastaturbefehle verwenden, indem Sie den entsprechenden Satz auswhlen.
Befehle Erlaubt die Auswahl einer Kategorie von Befehlen, die bearbeitet werden sollen. Beispielsweise lassen sich
Menbefehle wie ffnen oder Befehle zur Code-Bearbeitung wie Fehlende Klammern einfgen bearbeiten. Whlen Sie im Popupmen Befehle die Option Codefragmente, um einen Tastaturbefehl fr ein Codefragment hinzuzufgen oder zu bearbeiten.
Befehlsliste Hiermit werden die Befehle angezeigt, die mit der Kategorie verknpft sind, die Sie im Popupmen Befehle ausgewhlt haben sowie die zugehrigen Tastenkombinationen. Die Kategorie Menbefehle zeigt diese Liste als Baumstruktur an, die der Struktur der Mens nachgebildet ist. In den anderen Kategorien werden die Befehle nach Namen (z. B. Anwendung beenden) in einer einreihigen Liste aufgefhrt. Verknpfungen Hiermit werden alle Tastenkombinationen angezeigt, die dem ausgewhlten Befehl zugewiesen sind. Tastenkombination hinzufgen (+) Dem aktuellen Befehl wird eine neue Tastenkombination hinzugefgt. Klicken Sie
auf diese Schaltflche, um den Kurzbefehlen eine neue Leerzeile hinzuzufgen. Geben Sie eine neue Tastenkombination ein und klicken Sie auf ndern, um einen neuen Tastaturbefehl fr diesen Befehl einzufgen. Sie knnen jedem Befehl zwei unterschiedliche Tastaturbefehle zuweisen. Existieren bereits zwei Tastaturbefehle fr einen Befehl, hat die Schaltflche Element hinzufgen keine Wirkung.
Tastenkombination entfernen (-) entfernt die ausgewhlte Tastenkombination aus der Liste der
Tastenkombinationen.
Taste drcken zeigt die Tastenkombination an, die Sie beim Hinzufgen oder ndern eines Tastaturbefehls eingeben. ndern fgt der Liste der Kurzbefehle die im Feld Taste drcken angezeigte Tastenkombination hinzu oder ndert
besteht aus dem Namen des Satzes und dem angehngten Wort Kopie.
Satz umbenennen benennt den aktuellen Satz um. Als HTML-Datei exportieren speichert den aktuellen Satz in einem HTML-Tabellenformat, damit er leicht angezeigt und gedruckt werden kann. Sie knnen die HTML-Datei in Ihrem Browser ffnen und die Tastaturbefehle ausdrucken, um eine praktische Liste zur Hand zu haben. Satz lschen lscht einen Satz. (Der aktive Satz kann nicht gelscht werden.)
Whlen Sie im Popupmen Befehle die Option Codefragment aus, um einen Tastaturbefehl fr ein Codefragment hinzuzufgen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 37
Arbeitsbereich
Wenn dem Befehl noch kein oder nur ein Kurzbefehl zugewiesen ist, klicken Sie auf die Schaltflche Element
hinzufgen (+). Im Feld Kurzbefehle wird eine neue leere Zeile angezeigt und die Einfgemarke wechselt in das Feld Taste drcken.
Wenn dem Befehl bereits zwei Kurzbefehle zugewiesen sind, whlen Sie einen von ihnen aus (dieser wird durch
den neuen Kurzbefehl ersetzt). Klicken Sie anschlieend in das Feld Taste drcken.
5 Drcken Sie eine Tastenkombination. Die Tastenkombination wird im Feld Taste drcken angezeigt.
Hinweis: Wenn ein Problem mit der Tastenkombination auftritt (z. B. wenn sie bereits einem anderen Befehl zugewiesen ist), wird direkt unter dem Feld Kurzbefehle eine erklrende Meldung eingeblendet und Sie knnen mglicherweise den Kurzbefehl nicht hinzufgen bzw. ndern.
6 Klicken Sie auf ndern. Die neue Tastenkombination wird dem Befehl zugewiesen.
Hinweis: Wenn ein Problem mit der Tastenkombination auftritt (z. B. wenn sie bereits einem anderen Befehl zugewiesen ist), wird direkt unter dem Feld Kurzbefehle eine erklrende Meldung eingeblendet und Sie knnen mglicherweise den Kurzbefehl nicht hinzufgen bzw. ndern.
Erweiterungen
Erweiterungen in Dreamweaver hinzufgen und verwalten
Erweiterungen sind neue Funktionen, die Sie schnell und einfach in Dreamweaver einfgen knnen. Sie knnen zahlreiche Arten von Erweiterungen verwenden, z. B. Erweiterungen zum Umformatieren von Tabellen, zum Verbinden mit Back-End-Datenbanken oder zur Untersttzung beim Schreiben von Skripts fr Browser. Hinweis: Wenn Sie Erweiterungen installieren mchten, die alle Benutzer in einem Mehrbenutzer-Betriebssystem verwenden knnen, mssen Sie sich als Administrator (Windows) bzw. als Root-Benutzer (Mac OS X) anmelden.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 38
Arbeitsbereich
Die neuesten Erweiterungen fr Dreamweaver finden Sie auf der Adobe Exchange-Website unter www.adobe.com/go/dreamweaver_exchange_de/. Sie knnen sich auf der Website anmelden und Erweiterungen herunterladen (viele davon kostenlos), sich an Diskussionsforen beteiligen, Bewertungen und Kritiken von Benutzern lesen und den Extension Manager installieren und verwenden. Sie mssen den Extension Manager installieren, bevor Sie Erweiterungen installieren knnen. Der Extension Manager ist eine separate Anwendung, mit der Sie Erweiterungen in Adobe-Anwendungen installieren und verwalten knnen. Starten Sie den Extension Manager von Dreamweaver aus, indem Sie Befehle > Erweiterungen verwalten whlen.
1 Klicken Sie auf der Adobe Exchange-Website auf den Hyperlink zum Herunterladen einer Erweiterung.
Mglicherweise knnen Sie in Ihrem Browser whlen, ob die Erweiterung direkt von der Site aus geffnet und installiert oder auf der Festplatte gespeichert werden soll.
Wenn Sie die Erweiterung direkt von der Site aus ffnen, fhrt der Extension Manager die Installation automatisch
durch.
Wenn Sie die Erweiterung auf der Festplatte speichern, sollten Sie die Erweiterungspaketdatei (.mxp oder .mxi) auf
Ihrem Computer im Unterordner Downloaded Extensions des Dreamweaver-Anwendungsordners speichern.
2 Doppelklicken Sie auf die Erweiterungspaketdatei oder ffnen Sie den Extension Manager und whlen Sie
Datei > Erweiterung installieren. (Sie knnen auf einige Erweiterungen erst zugreifen, nachdem Sie die Anwendung neu gestartet haben.) Hinweis: Mit dem Extension Manager knnen Sie Erweiterungen entfernen und zustzliche Informationen ber Erweiterungen anzeigen.
Verwandte Themen
Dreamweaver in Mehrbenutzersystemen anpassen auf Seite 31
ENTWURF
Letzte Aktualisierung 19.3.2010
39
Dreamweaver-Sites einrichten
Dreamweaver-Sites
In Dreamweaver bezieht sich der Begriff Site auf einen lokalen oder externen Speicherort fr die Dokumente, aus denen eine Website besteht. Eine Dreamweaver-Site bietet die Mglichkeit, smtliche Webdokumente zu organisieren und zu verwalten, die Site auf einen Webserver hochzuladen, die Hyperlinks zu prfen und zu korrigieren und Dateien freizugeben und zu verwalten. Sie sollten eine Site definieren, damit Sie die Funktionen von Dreamweaver vollstndig nutzen knnen. Hinweis: Um eine Dreamweaver-Site zu definieren, mssen Sie nur einen lokalen Ordner einrichten. Sie mssen Informationen ber die Remote-Site und den Testserver hinzufgen, um Dateien an einen Webserver bertragen und Webanwendungen entwickeln zu knnen. Je nach Entwicklungsumgebung und Art der von Ihnen entwickelten Website besteht eine Dreamweaver-Site aus bis zu drei Komponenten bzw. Ordnern:
Lokaler Stammordner speichert die Dateien, an denen Sie gerade arbeiten. Fr Dreamweaver ist dieser Ordner Ihre
lokale Site. Er befindet sich blicherweise auf Ihrem lokalen Computer, kann jedoch auch auf einem Netzwerkserver liegen.
Remote-Ordner ist ein Ordner, in dem Sie Ihre Dateien zu Test-, Produktions- und Kollaborationszwecken speichern. Im Bedienfeld Dateien bezeichnet Dreamweaver diesen Ordner als Remote-Site. Normalerweise befindet sich der Remote-Ordner auf demselben Computer, auf dem der Webserver ausgefhrt wird. Der Remote-Ordner enthlt die Dateien, auf die Benutzer im Internet zugreifen.
Mithilfe des lokalen und des Remote-Ordners knnen Sie Dateien zwischen Ihrer lokalen Festplatte und dem Webserver bertragen. Dies erleichtert das Verwalten der Dateien in Ihren Dreamweaver-Sites. Sie bearbeiten die Dateien im lokalen Ordner und verffentlichen sie dann im Remote-Ordner, wenn auch andere in der Lage sein sollen, sie anzuzeigen.
Testserver-Ordner ist der Ordner, in dem Dreamweaver dynamische Seiten verarbeitet.
Ein Tutorial zur Definition einer Dreamweaver-Site finden Sie unter www.adobe.com/go/lrvid4050_dw_de.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 40
Dreamweaver-Sites verwenden
Lokaler Ordner
(Stammordner)
Ja
public_html
(Sollte ein Remote-Ordner sein)
Elemente
Nein
Elemente
(Sollte kein Remote-Ordner sein)
HTML
HTML
Hinweis: Die Abbildung oben zeigt einen lokalen Stammordner auf dem lokalen Rechner und einen RemoteHauptordner auf dem Remote-Webserver. Falls Sie dagegen mehrere Dreamweaver-Sites auf dem lokalen Computer verwalten, bentigen Sie auf dem Remote-Server ebenso viele Remote-Ordner wie auf dem lokalen System. In diesem Fall gilt das Beispiel oben nicht. Statt dessen mssen Sie im Ordner public_html mehrere Remote-Ordner erstellen und diese den entsprechenden Stammordnern auf dem lokalen System zuweisen. Wenn Sie zum ersten Mal eine Remote-Verbindung herstellen, ist der Remote-Ordner auf dem Webserver normalerweise leer. Wenn Sie dann mithilfe von Dreamweaver die Dateien Ihrer lokalen Ordner hochladen, werden die Remote-Ordner mit Ihren Webdateien entsprechend aufgefllt. Die Verzeichnisstrukturen der Remote-Ordner und der lokalen Stammordner sollten immer bereinstimmen. (Es sollte also immer eine direkte Entsprechung der Dateien und Ordner Ihrer lokalen Ordner und der Remote-Ordner gegeben sein.) Wenn die Struktur des RemoteOrdners nicht mit der Struktur des lokalen Ordners bereinstimmt, werden die Dateien von Dreamweaver an die falsche Stelle bertragen und sind fr Besucher der Site mglicherweise nicht sichtbar. Auerdem knnen Bild- und Hyperlinkpfade unter Umstnden nicht mehr funktionieren, wenn die Ordner- und Dateistrukturen nicht mehr bereinstimmen. Der Remote-Ordner muss bereits vorhanden sein, damit Dreamweaver eine Verbindung zu dieser Site herstellen kann. Wenn auf dem Webserver kein entsprechender Remote-Ordner vorhanden ist, mssen Sie diesen erstellen oder den Administrator des Servers bitten, dies fr Sie zu tun.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 41
Dreamweaver-Sites verwenden
Kategorie Site
Im Dialogfeld Site-Definition mssen Sie nur die Kategorie Site ausfllen, um anschlieend die Dreamweaver-Site verwenden zu knnen. Mit dieser Kategorie legen Sie den lokalen Ordner fest, in dem dann alle Site-Dateien gespeichert werden. Der lokale Ordner kann sich auf dem lokalen Computer oder auf einem Netzwerkserver befinden. Nachdem die Vorbereitungen abgeschlossen sind, knnen Sie die anderen Kategorien im Dialogfeld Site-Definition ausfllen, einschlielich der Kategorie Server, mit der Sie einen Remote-Ordner auf dem Remote-Server angeben knnen. Hinweis: Sie brauchen keinen Remote-Ordner angeben, wenn sich Ihr lokaler Stammordner auf demselben System befindet, auf dem auch Ihr Webserver ausgefhrt wird. Dies wrde bedeuten, dass der Webserver auf Ihrem lokalen Computer ausgefhrt wird.
Site-Name Der Name, der im Bedienfeld Dateien und im Dialogfeld Sites verwalten angezeigt wird. Dieser Name ist nicht im Browser zu sehen. Lokaler Site-Ordner Der Name des Ordners auf Ihrer lokalen Festplatte, in dem Sie Site-Dateien, Vorlagen und
Bibliothekselemente speichern. Erstellen Sie einen Ordner auf Ihrer Festplatte oder klicken Sie auf das Ordnersymbol, um den Ordner ber Ihre Dateistruktur auszuwhlen. Wenn in Dreamweaver Site-Stammordner-relative Hyperlinks aufgelst werden, erfolgt dies relativ zu diesem Ordner.
Kategorie Server
Mit der Kategorie Server legen Sie Remote- und Testserver fest. Der Remote-Server ist der Ort, an dem sich der von Ihnen festgelegte Remote-Ordner zum Speichern der Dateien befindet, die in Szenarios wie Produktionseinsatz, Zusammenarbeit, Bereitstellung u. v. m. verwendet werden. Normalerweise befindet sich der Remote-Ordner auf demselben Computer, auf dem der Webserver ausgefhrt wird. Im Bedienfeld Dateien von Dreamweaver wird dieser Ordner als Remote-Site bezeichnet. Beim Festlegen eines Remote-Ordners mssen Sie eine Verbindungsmethode auswhlen, mit der Dreamweaver Dateien zum Webserver hoch- bzw. von diesem herunterldt. Hinweis: Dreamweaver untersttzt Verbindungen zu IPv6-aktivierten Servern. Es werden die Verbindungsarten FTP, SFTP, WebDAV und RDS untersttzt. Weitere Informationen finden Sie unter www.ipv6.org/ Optionen fr FTP-Verbindungen festlegen Verwenden Sie diese Einstellung, wenn Sie die Verbindung zum Webserver ber FTP herstellen.
1 Whlen Sie Site > Sites verwalten. 2 Klicken Sie auf Neu, um eine neue Site einzurichten, oder whlen Sie eine vorhandene Dreamweaver-Site aus und
Klicken Sie auf die Schaltflche Neuen Server hinzufgen, um einen neuen Server hinzuzufgen. Whlen Sie einen vorhandenen Server aus und klicken Sie auf die Schaltflche Vorhandenen Server bearbeiten.
Die folgenden Abbildung zeigt die Registerkarte Einfach der Kategorie Server mit bereits ausgefllten Textfeldern.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 42
Dreamweaver-Sites verwenden
4 Geben Sie im Textfeld Servername einen Namen fr den neuen Server an. Dieser ist beliebig whlbar. 5 Whlen Sie im Popupmen Verbinden ber die Option FTP aus. 6 Geben Sie im Textfeld FTP-Adresse die Adresse des FTP-Servers ein, auf den Sie Dateien fr die Website
hochladen. Die FTP-Adresse ist der vollstndige Internet-Name eines Computersystems, z. B. ftp.mindspring.com. Geben Sie die vollstndige Adresse ohne zustzlichen Text ein. Setzen Sie vor allem keinen Protokollnamen vor die Adresse. Falls Sie die FTP-Adresse nicht kennen, wenden Sie sich an Ihren Webhosting-Dienstanbieter. Hinweis: Port 21 ist der Standardport fr eingehende FTP-Verbindungen. Die Standardportnummer knnen Sie im Textfeld auf der rechten Seite ndern. Dies hat zur Folge, dass der FTP-Adresse beim Speichern der Einstellungen ein Doppelpunkt und die neue Portnummer hinzugefgt werden (z. B. ftp.mindspring.com:29).
7 Geben Sie in den Textfeldern Benutzername und Kennwort den Benutzernamen und das Kennwort ein, mit
Hinweis: Sie mssen die Angaben fr FTP-Adresse, Benutzername und Kennwort beim Systemadministrator des Unternehmens erfragen, bei dem Ihre Site gehostet wird. Niemand sonst hat Zugriff auf diese Informationen. Geben Sie die Werte genauso ein, wie Sie sie vom Systemadministrator erhalten haben.
9 Dreamweaver speichert dieses Kennwort standardmig. Deaktivieren Sie die Option Speichern, falls
Dreamweaver Sie immer zur Eingabe eines Kennworts auffordern soll, wenn Sie eine Verbindung zum RemoteServer herstellen.
10 Geben Sie im Textfeld Stammverzeichnis den Namen des Verzeichnisses (Ordners) auf dem Remote-Server ein,
in dem ffentlich zugngliche Dokumente gespeichert werden. Wenn Sie sich nicht sicher sind, was Sie als Stammverzeichnis eingeben sollen, wenden Sie sich an den Administrator des Servers oder lassen Sie das Textfeld leer. Auf einigen Servern ist der Stammordner derselbe Ordner, zu dem Sie ber FTP eine Verbindung herstellen. Stellen Sie eine Verbindung zum Server her, um dies herauszufinden. Wird im Bereich Remote-Dateien des Bedienfelds Dateien ein Ordner mit einem Namen wie public_html, www oder Ihrem Benutzernamen angezeigt, ist dies wahrscheinlich der Ordner, den Sie in das Textfeld Stammverzeichnis eingeben mssen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 43
Dreamweaver-Sites verwenden
11 Geben Sie im Textfeld Web-URL die URL Ihrer Website ein (z. B. http://www.mysite.com). Die Web-URL
dient in Dreamweaver zum Erstellen von Sitestamm-relativen Hyperlinks und zum berprfen von Hyperlinks bei Verwendung des Hyperlink-Prfers. Eine ausfhrlichere Erklrung dieser Option finden Sie unter Kategorie Erweiterte Einstellungen auf Seite 47.
12 Wenn Sie zustzliche Optionen festlegen mchten, erweitern Sie den Abschnitt Weitere Optionen. 13 Aktivieren Sie die Option Passives FTP verwenden, wenn die Konfiguration Ihrer Firewall passives FTP
erfordert. Durch passives FTP kann die FTP-Verbindung von Ihrer lokalen Software statt vom Remote-Server eingerichtet werden. Falls Sie sich nicht sicher sind, ob Sie passives FTP verwenden, wenden Sie sich an den Systemadministrator oder versuchen Sie, die Option Passives FTP verwenden zu aktivieren und zu deaktivieren. Weitere Informationen finden Sie in TechNote 15220 auf der Adobe-Website unter www.adobe.com/go/tn_15220_de.
14 Aktivieren Sie die Option IPv6-bertragungsmodus verwenden, wenn Sie einen IPv6-fhigen FTP-Server
verwenden. Mit der Bereitstellung von Version 6 des Internet-Protokolls (IPv6) haben EPRT bzw. EPSV die FTP-Befehle PORT bzw. PASV ersetzt. Wenn Sie daher eine Verbindung zu einem IPv6-aktivierten FTP-Server herstellen mchten, mssen Sie den erweiterten passiven (EPSV) und den erweiterten aktiven (EPRT) Befehl fr Ihre Datenverbindung verwenden. Weitere Informationen finden Sie unter www.ipv6.org/.
15 Whlen Sie Proxy verwenden... aus. 16 Klicken Sie auf Speichern, um die Ansicht Einfach zu schlieen. Legen Sie dann in der Kategorie Server fest,
ob es sich bei dem gerade hinzugefgten bzw. bearbeiteten Server um einen Remote-Server, einen Testserver oder beides handelt. Weitere Informationen zu den entsprechenden Optionen finden Sie in TechNote 14834 auf der Adobe-Website unter www.adobe.com/go/tn_14834_de. Optionen fr SFTP-Verbindungen festlegen Aktivieren Sie die Option Secure FTP (SFTP) verwenden, wenn die Konfiguration Ihrer Firewall den Einsatz von Secure FTP erfordert. In SFTP werden Verbindungen zum Testserver mithilfe von Verschlsselung und ffentlichen Schlsseln gesichert. Hinweis: Auf dem Server muss ein SFTP-Dienst ausgefhrt werden, damit diese Option ausgewhlt werden kann. Wenn Sie nicht wissen, ob auf dem Server SFTP ausgefhrt wird, wenden Sie sich an den Systemadministrator.
1 Whlen Sie Site > Sites verwalten. 2 Klicken Sie auf Neu, um eine neue Site einzurichten, oder whlen Sie eine vorhandene Dreamweaver-Site aus und
Klicken Sie auf die Schaltflche Neuen Server hinzufgen, um einen neuen Server hinzuzufgen. Whlen Sie einen vorhandenen Server aus und klicken Sie auf die Schaltflche Vorhandenen Server bearbeiten.
4 Geben Sie im Textfeld Servername einen Namen fr den neuen Server an. Dieser ist beliebig whlbar. 5 Whlen Sie im Popupmen Verbinden ber die Option SFTP aus.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 44
Dreamweaver-Sites verwenden
Die brigen Optionen entsprechen den Einstellungen fr FTP-Verbindungen. Weitere Informationen finden Sie im vorangegangenen Abschnitt. Hinweis: Port 22 ist der Standardport fr eingehende SFTP-Verbindungen. Optionen fr lokale oder Netzwerkverbindungen festlegen Verwenden Sie diese Einstellung zum Herstellen einer Verbindung zu einem Netzwerkordner oder wenn Sie auf Ihrem lokalen Computer Dateien speichern bzw. den Testserver dort ausfhren.
1 Whlen Sie Site > Sites verwalten. 2 Klicken Sie auf Neu, um eine neue Site einzurichten, oder whlen Sie eine vorhandene Dreamweaver-Site aus und
Klicken Sie auf die Schaltflche Neuen Server hinzufgen, um einen neuen Server hinzuzufgen. Whlen Sie einen vorhandenen Server aus und klicken Sie auf die Schaltflche Vorhandenen Server bearbeiten.
4 Geben Sie im Textfeld Servername einen Namen fr den neuen Server an. Dieser ist beliebig whlbar. 5 Whlen Sie im Popupmen Verbinden ber die Option Lokal/Netzwerk aus. 6 Klicken Sie auf das Ordnersymbol neben dem Textfeld Serverordner, um den Ordner zu suchen und
dient in Dreamweaver zum Erstellen von Sitestamm-relativen Hyperlinks und zum berprfen von Hyperlinks bei Verwendung des Hyperlink-Prfers. Eine ausfhrlichere Erklrung dieser Option finden Sie unter Kategorie Erweiterte Einstellungen auf Seite 47.
8 Klicken Sie auf Speichern, um die Ansicht Einfach zu schlieen. Legen Sie dann in der Kategorie Server fest,
ob es sich bei dem gerade hinzugefgten bzw. bearbeiteten Server um einen Remote-Server, einen Testserver oder beides handelt. Optionen fr WebDAV-Verbindungen festlegen Verwenden Sie diese Einstellung, wenn Sie die Verbindung zum Webserver ber das WebDAV-Protokoll (Web-based Distributed Authoring and Versioning) herstellen. Fr diese Verbindungsmethode mssen Sie einen Server besitzen, der dieses Protokoll untersttzt, z. B. Microsoft Internet Information Server (IIS) 5.0 oder eine geeignet konfigurierte Installation des Apache-Webservers. Hinweis: Wenn Sie sich fr die Verbindungsmethode WebDAV entscheiden und Dreamweaver in einer Mehrbenutzerumgebung verwenden, mssen Sie sicherstellen, dass alle Benutzer WebDAV einsetzen. Wenn einige Benutzer WebDAV verwenden und andere eine andere Verbindungsmethode (etwa FTP), wird die Ein/Auscheckfunktion von Dreamweaver nicht so funktionieren wie erwartet, da WebDAV ein eigenes Sperrsystem verwendet.
1 Whlen Sie Site > Sites verwalten. 2 Klicken Sie auf Neu, um eine neue Site einzurichten, oder whlen Sie eine vorhandene Dreamweaver-Site aus und
Klicken Sie auf die Schaltflche Neuen Server hinzufgen, um einen neuen Server hinzuzufgen. Whlen Sie einen vorhandenen Server aus und klicken Sie auf die Schaltflche Vorhandenen Server bearbeiten.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 45
Dreamweaver-Sites verwenden
4 Geben Sie im Textfeld Servername einen Namen fr den neuen Server an. Dieser ist beliebig whlbar. 5 Whlen Sie im Popupmen Verbinden ber die Option WebDAV aus. 6 Geben Sie als URL die vollstndige URL zu dem Verzeichnis auf dem WebDAV-Server an, zu dem Sie eine
Verbindung herstellen mchten. Zur URL gehren das Protokoll, der Anschluss und das Verzeichnis (sofern abweichend vom Stammverzeichnis), z. B. http://webdav.mydomain.net/mysite.
7 Geben Sie Ihren Benutzernamen und das Kennwort ein.
Diese Informationen dienen zur Serverauthentifizierung und haben nichts mit Dreamweaver zu tun. Wenn Sie Ihren Benutzernamen und Ihr Kennwort nicht wissen, wenden Sie sich an den Systemadministrator oder Webmaster.
8 Klicken Sie auf Test, um die Verbindungseinstellungen zu testen. 9 Whlen Sie die Option Speichern aus, wenn Dreamweaver Sie beim Starten einer neuen Sitzung nicht mehr zur
dient in Dreamweaver zum Erstellen von Sitestamm-relativen Hyperlinks und zum berprfen von Hyperlinks bei Verwendung des Hyperlink-Prfers. Eine ausfhrlichere Erklrung dieser Option finden Sie unter Kategorie Erweiterte Einstellungen auf Seite 47.
11 Klicken Sie auf Speichern, um die Ansicht Einfach zu schlieen. Legen Sie dann in der Kategorie Server fest,
ob es sich bei dem gerade hinzugefgten bzw. bearbeiteten Server um einen Remote-Server, einen Testserver oder beides handelt. Optionen fr RDS-Verbindungen festlegen Verwenden Sie diese Einstellung, wenn Sie die Verbindung zum Webserver ber RDS (Remote Development Services) herstellen. Bei dieser Verbindungsmethode muss sich der Remote-Ordner auf einem Computer befinden, auf dem Adobe ColdFusion ausgefhrt wird.
1 Whlen Sie Site > Sites verwalten. 2 Klicken Sie auf Neu, um eine neue Site einzurichten, oder whlen Sie eine vorhandene Dreamweaver-Site aus und
Klicken Sie auf die Schaltflche Neuen Server hinzufgen, um einen neuen Server hinzuzufgen. Whlen Sie einen vorhandenen Server aus und klicken Sie auf die Schaltflche Vorhandenen Server bearbeiten.
4 Geben Sie im Textfeld Servername einen Namen fr den neuen Server an. Dieser ist beliebig whlbar. 5 Whlen Sie im Popupmen Verbinden ber die Option RDS aus. 6 Klicken Sie auf die Schaltflche Einstellungen und machen Sie im Dialogfeld RDS-Server konfigurieren
folgende Angaben:
Geben Sie den Namen des Hostcomputers ein, auf dem der Webserver installiert ist.
Dies ist wahrscheinlich eine IP-Adresse oder eine URL. Wenn Sie sich nicht sicher sind, fragen Sie Ihren Administrator.
Geben Sie die Nummer des Anschlusses an, zu dem Sie eine Verbindung herstellen. Geben Sie als Host-Verzeichnis den Stammordner des Remote-Systems ein.
Zum Beispiel C:\inetpub\wwwroot\myHostDir\.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 46
Dreamweaver-Sites verwenden
Whlen Sie die Option Speichern, wenn Dreamweaver Ihre Einstellungen speichern soll.
7 Klicken Sie auf OK, um das Dialogfeld RDS-Server konfigurieren zu schlieen. 8 Geben Sie im Textfeld Web-URL die URL Ihrer Website ein (z. B. http://www.mysite.com). Die Web-URL
dient in Dreamweaver zum Erstellen von Sitestamm-relativen Hyperlinks und zum berprfen von Hyperlinks bei Verwendung des Hyperlink-Prfers. Eine ausfhrlichere Erklrung dieser Option finden Sie unter Kategorie Erweiterte Einstellungen auf Seite 47.
9 Klicken Sie auf Speichern, um die Ansicht Einfach zu schlieen. Legen Sie dann in der Kategorie Server fest,
ob es sich bei dem gerade hinzugefgten bzw. bearbeiteten Server um einen Remote-Server, einen Testserver oder beides handelt. Optionen fr Verbindungen mit Microsoft Visual SourceSafe festlegen Die Untersttzung fr Microsoft Visual SourceSafe wurde ab Dreamweaver CS5 entfernt. Erweiterte Optionen festlegen 1 Whlen Sie Site > Sites verwalten.
2 Klicken Sie auf Neu, um eine neue Site einzurichten, oder whlen Sie eine vorhandene Dreamweaver-Site aus und
Klicken Sie auf die Schaltflche Neuen Server hinzufgen, um einen neuen Server hinzuzufgen. Whlen Sie einen vorhandenen Server aus und klicken Sie auf die Schaltflche Vorhandenen Server bearbeiten.
4 Legen Sie die gewnschten einfachen Optionen fest und klicken Sie dann auf Erweitert. 5 Aktivieren Sie die Option Synchronisierungsinformationen beibehalten, wenn Dreamweaver Ihre lokalen und
immer auf die Remote-Site bertragen soll, wenn Sie Dateien speichern.
7 Aktivieren Sie die Option Datei-Auschecken aktivieren, wenn das System zum Ein- und Auschecken von Dateien
Weitere Informationen hierzu finden Sie unter Testserver einrichten auf Seite 49. Fehler beim Einrichten des Remote-Ordners beheben Die folgende Liste enthlt Informationen zu hufig vorkommenden Problemen, die auch Ihnen beim Einrichten eines Remote-Ordners begegnen knnen, sowie Lsungsvorschlge fr diese Probleme. Es gibt auerdem auf der Adobe-Website unter www.adobe.com/go/tn_14834_de eine ausfhrliche TechNote, die speziell Informationen zu FTP-Problemen enthlt.
Die FTP-Implementierung von Dreamweaver funktioniert unter Umstnden bei bestimmten Proxy-Servern,
Multilevel-Firewalls und anderen Formen des indirekten Server-Zugriffs nicht einwandfrei. Wenn Probleme beim FTP-Zugriff auftreten, wenden Sie sich an den Systemadministrator vor Ort.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 47
Dreamweaver-Sites verwenden
Bei der FTP-Implementierung von Dreamweaver mssen Sie eine Verbindung zum Stammordner des RemoteSystems herstellen. Stellen Sie sicher, dass Sie das Stammverzeichnis des Remote-Systems als Host-Verzeichnis angegeben haben. Wenn Sie das Hostverzeichnis mit einem einfachen Schrgstrich (/) angegeben haben, mssen Sie eventuell einen relativen Pfad vom Ausgangsverzeichnis der Verbindung zum Remote-Stammordner angeben. Ist der Remote-Stammordner beispielsweise ein bergeordnetes Verzeichnis, mssen Sie eventuell einen Pfad in der Form ../../ zum Hostverzeichnis angeben.
Verwenden Sie anstelle von Leerzeichen Unterstriche und vermeiden Sie nach Mglichkeit Sonderzeichen in
Datei- und Ordnernamen. Doppelpunkte, Schrgstriche, Punkte und Apostrophe in Datei- und Ordnernamen knnen gelegentlich Probleme verursachen.
Treten Probleme mit langen Dateinamen auf, geben Sie den Dateien krzere Namen. Unter Mac OS drfen
Dateinamen maximal 31 Zeichen enthalten.
Beachten Sie, dass auf vielen Servern symbolische Hyperlinks (UNIX), Verknpfungen (Windows) oder
Aliasnamen (Macintosh) verwendet werden, um einen Ordner auf einem Teil der Serverfestplatte mit einem Ordner an einer anderen Stelle zu verknpfen. Solche Aliasnamen haben in der Regel keine Auswirkung auf die Fhigkeit, eine Verbindung zum entsprechenden Ordner oder Verzeichnis herzustellen. Wenn Sie jedoch eine Verbindung zu einem Teil des Servers, nicht aber zu einem anderen herstellen knnen, liegt unter Umstnden ein Aliasproblem vor.
Tritt eine Fehlermeldung wie beispielsweise Datei kann nicht bereitgestellt werden auf, ist unter Umstnden kein
Speicherplatz mehr auf dem Remote-Ordner vorhanden. Detaillierte Informationen hierzu finden Sie im FTPProtokoll. Hinweis: Wenn bei FTP-bertragungen Probleme auftreten, berprfen Sie das FTP-Protokoll, indem Sie Fenster > Ergebnisse (Windows) bzw. Site > FTP-Protokoll (Macintosh) whlen und die Registerkarte FTP-Protokoll ffnen.
Kategorie Versionskontrolle
Zum Abrufen und Einchecken von Dateien knnen Sie Subversion verwenden. Weitere Informationen finden Sie unter Dateien mithilfe von Subversion (SVN) abrufen und einchecken auf Seite 95.
diesem Ordner ein oder klicken Sie auf das Ordnersymbol, um ihn ber die Dateistruktur auszuwhlen. Dieser Pfad wird verwendet, wenn Sie Dokumenten Bilder hinzufgen.
Hyperlinks relativ zu Legt den Typ der Hyperlinks fest, die von Dreamweaver erstellt werden, wenn Sie Hyperlinks zu anderen Elementen oder Seiten in Ihrer Site einfgen. Dreamweaver kann zwei Arten von Hyperlinks erstellen: relativ zum jeweiligen Dokument oder relativ zum Site-Stammordner. Weitere Informationen zu den Unterschieden zwischen diesen beiden Hyperlinktypen finden Sie unter Absolute, zum Dokument relative und zum SiteStammordner relative Pfade auf Seite 289.
Standardmig erstellt Dreamweaver zum Dokument relative Hyperlinks. Wenn Sie die Standardeinstellung zugunsten von zum Site-Stammordner relativen Hyperlinks ndern, stellen Sie sicher, dass im Textfeld Web-URL die korrekte Web-URL der Site eingetragen ist (siehe unten). Wenn Sie diese Einstellung ndern, werden die Pfade vorhandener Hyperlinks nicht automatisch angepasst. Die Einstellung wirkt sich nur auf neue Hyperlinks aus, die Sie grafisch in Dreamweaver erstellen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 48
Dreamweaver-Sites verwenden
Hinweis: In der Vorschau eines Dokuments in einem lokalen Browser werden Inhalte, die durch einen zum SiteStammordner relativen Hyperlink verknpft sind, nur angezeigt, wenn Sie einen Testserver angeben oder unter Bearbeiten > Voreinstellungen > Vorschau in Browser die Option Vorschau mit temporrer Datei auswhlen. Der Grund hierfr ist, dass Browser im Gegensatz zu Servern Site-Stammordner nicht erkennen knnen.
Web-URL Die URL der Website. Die Web-URL dient in Dreamweaver zum Erstellen von Sitestamm-relativen Hyperlinks und zum berprfen von Hyperlinks bei Verwendung des Hyperlink-Prfers.
Site-Stammordner-relative Hyperlinks sind ntzlich, wenn Sie sich noch nicht ber die endgltige Position der gerade bearbeiteten Seite innerhalb der Ordnerstruktur im Klaren sind oder wenn die Mglichkeit besteht, Hyperlinks enthaltende Dateien zu einem spteren Zeitpunkt an eine andere Position zu verschieben bzw. umzustrukturieren. Bei Site-Stammordner-relativen Hyperlinks handelt es sich um Hyperlinks, deren Pfade zu anderen Site-Elementen relativ zum Site-Stammordner angegeben sind, nicht zum jeweiligen Dokument. Dadurch bleiben die Pfade zu den verknpften Elementen gltig, selbst wenn das Dokument spter an eine andere Position verschoben wird. Beispiel: Als Web-URL ist http://www.mysite.com/mycoolsite (das Site-Stammverzeichnis des Remote-Servers) angegeben und im Ordner mycoolsite des Remote-Servers gibt es auch einen Ordner images (http://www.mysite.com/mycoolsite/images). Die Datei index.html befindet sich in diesem Beispiel im Ordner mycoolsite. Wenn Sie einen Site-Stammordner-relativen Hyperlink aus der Datei index.html auf ein Bild im Ordner image erstellen, sieht dieser wie folgt aus:
<img src="/mycoolsite/images/image1.jpg" />
Diese Schreibweise unterscheidet sich von der fr einen Dokument-relativen Hyperlink, die einfach wie folgt wre:
<img src="images/image1.jpg" />
Durch Einfgen von /mycoolsite/ in den Bildpfad wird das Bild relativ zum Site-Stammordner verknpft, nicht relativ zu Dokument. Solange das Bild im Ordner image abgelegt bleibt, ist der Dateipfad zum Bild (/mycoolsite/images/image1.jpg) stets korrekt, selbst wenn Sie die Datei index.html in einen anderen Ordner verschieben. Weitere Informationen finden Sie unter Absolute, zum Dokument relative und zum Site-Stammordner relative Pfade auf Seite 289. Im Hinblick auf die Hyperlink-berprfung ist die Web-URL erforderlich, um zu ermitteln, ob ein Hyperlink Siteintern oder extern ist. Beispiel: Wenn die Web-URL http://www.mysite.com/mycoolsite lautet und der HyperlinkPrfer auf der Seite einen Hyperlink mit der URL http://www.yoursite.com findet, wird davon ausgegangen, dass es sich dabei um einen externen Hyperlink handelt und dies entsprechend gemeldet. Analog dazu verwendet der Hyperlink-Prfer die Web-URL, um zu ermitteln, ob es sich um Site-interne Hyperlinks handelt. Diese werden dann berprft, ob sie noch gltig oder beschdigt sind.
Gro-/Kleinschreibung bei Hyperlinks berprfen Ist diese Option aktiviert, achtet Dreamweaver beim berprfen von Hyperlinks darauf, dass die Gro-/Kleinschreibung der Hyperlinks mit der Schreibung der Dateinamen bereinstimmt. Diese Option ist auf UNIX-Systemen sinnvoll, auf denen die Gro-/Kleinschreibung bei Dateinamen eine Rolle spielt. Cache aktivieren Diese Option gibt an, ob ein lokaler Cache erstellt werden soll, um die Geschwindigkeit der Hyperlinks zu erhhen und die Siteverwaltung zu vereinfachen. Wenn Sie diese Option nicht markieren, fordert Dreamweaver Sie erneut auf, einen Cache zu erstellen, bevor die Site angelegt wird. Sie sollten Sie diese Option auch whlen, weil das Bedienfeld Elemente (in der Bedienfeldgruppe Dateien) nur funktioniert, wenn ein Cache erstellt wurde.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 49
Dreamweaver-Sites verwenden
Cloaking und weitere Kategorien Weitere Informationen zu Cloaking, Design Notes, Dateiansichtsspalten, Contribute, Vorlagen oder Spry-Kategorien erhalten Sie, wenn Sie auf die Schaltflche Hilfe im Dialogfeld klicken.
Um eine Verbindung herzustellen, klicken Sie in der Symbolleiste auf die Schaltflche Stellt Verbindung zum
entfernten Host her.
Um eine Verbindung zu trennen, klicken Sie in der Symbolleiste auf Verbindung zum entfernten Host trennen.
Testserver einrichten
Falls Sie die Absicht haben, dynamische Seiten zu entwickeln, bentigt Dreamweaver die Dienste eines Testservers, um whrend Ihrer Arbeit dynamische Inhalte zu generieren und anzuzeigen. Als Testserver kann der lokale Computer, ein Entwicklungsserver, ein Staging-Server oder ein Produktionsserver verwendet werden.
1 Whlen Sie Site > Sites verwalten. 2 Klicken Sie auf Neu, um eine neue Site einzurichten, oder whlen Sie eine vorhandene Dreamweaver-Site aus und
Klicken Sie auf die Schaltflche Neuen Server hinzufgen, um einen neuen Server hinzuzufgen. Whlen Sie einen vorhandenen Server aus und klicken Sie auf die Schaltflche Vorhandenen Server bearbeiten.
4 Legen Sie die gewnschten einfachen Optionen fest und klicken Sie dann auf Erweitert.
Hinweis: Beim Festlegen eines Testservers mssen Sie im Fenster Einfach eine Web-URL angeben. Weitere Informationen finden Sie im nchsten Abschnitt.
5 Whlen Sie unter Testserver das Servermodell aus, das Sie fr die Webanwendung verwenden mchten.
Hinweis: Ab Dreamweaver CS5 werden ASP.NET-, ASP JavaScript- und JSP-Serververhalten nicht mehr zusammen mit Dreamweaver installiert. Wenn Sie an ASP.NET-, ASP JavaScript- oder JSP-Seiten arbeiten, untersttzt Dreamweaver jedoch fr diese Seiten weiterhin die Live-Ansicht, die farbliche Codehervorhebung und Codehinweise. Es ist nicht erforderlich, im Dialogfeld Site-Definition die Optionen ASP.NET, ASP JavaScript oder JSP auszuwhlen, damit diese Funktionen verfgbar sind.
6 Klicken Sie auf Speichern, um das Fenster Erweitert zu schlieen. Geben Sie dann in der Kategorie Server den
Server an, den Sie gerade als Testserver hinzugefgt oder bearbeitet haben.
Verwandte Themen
Anwendungsserver auswhlen auf Seite 565 Erstellen dynamischer Sites vorbereiten auf Seite 555
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 50
Dreamweaver-Sites verwenden
Ordner, den Sie zur Verarbeitung von dynamischen Seiten verwenden mchten, beispielsweise den Pfad C:\Sites\Firma\ aufweisen und gleichzeitig Ihr Stammverzeichnis sein (d. h. dieser Ordner wird dem Domnennamen Ihrer Site, z. B. www.meinefirma.de, zugeordnet). In diesem Fall lautet das URL-Prfix http://www.meinefirma.de/. Falls es sich bei dem Ordner fr die Verarbeitung dynamischer Seiten um einen Unterordner Ihres Stammverzeichnisses handelt, fgen Sie dem URL einfach den Unterordner hinzu. Angenommen, Ihr Stammverzeichnis lautet c:\sites\firma\, der Domnenname Ihrer Site www.meinefirma.de und der zur Verarbeitung der dynamischen Seiten verwendete Ordner c:\sites\firma\inventar. Geben Sie die folgende Web-URL ein: http://www.meinefirma.de/inventar/ Wenn es sich bei dem Ordner, den Sie zur Verarbeitung von dynamischen Seiten verwenden mchten, nicht um das Stammverzeichnis oder eines seiner Unterverzeichnisse handelt, mssen Sie ein virtuelles Verzeichnis anlegen.
Ein virtuelles Verzeichnis ist ein Ordner, der nicht physisch im Stammverzeichnis auf dem Server enthalten ist, obwohl er im URL enthalten zu sein scheint. Ein virtuelles Verzeichnis wird erstellt, indem Sie ein Alias angeben, der in der URL anstelle des Pfads zum Ordner verwendet wird. Das Stammverzeichnis knnte beispielsweise C:\Sites\Firma lauten und der verarbeitende Ordner D:\Anwdg\Inventar sein. Fr diesen Ordner erstellen Sie ein Alias mit der Bezeichnung Lager. Geben Sie die folgende Web-URL ein:
http://www.meinefirma.de/lager/
Localhost bezeichnet das Stammverzeichnis in Ihren URLs, wenn der Client (normalerweise ein Browser, in diesem
Fall jedoch Dreamweaver) auf demselben System ausgefhrt wird wie der Webserver. Angenommen, Dreamweaver wird auf demselben Windows-System ausgefhrt wie der Webserver. Das Stammverzeichnis ist C:\Sites\Firma und Sie haben eine virtuelles Verzeichnis namens Lager definiert, das auf den Ordner verweist, den Sie zur Verarbeitung von dynamischen Seiten verwenden mchten. Fr bestimmte Webserver mssen Sie jeweils die folgenden Web-URLs eingegeben:
Webserver ColdFusion MX 7 IIS Apache (Windows) Jakarta Tomcat (Windows) Web-URL http://localhost:8500/lager/ http://localhost/lager/ http://localhost:80/lager/ http://localhost:8080/lager/
Hinweis: In der Standardeinstellung wird der ColdFusion MX 7-Webserver auf Port 8500 ausgefhrt, der ApacheWebserver auf Port 80 und der Jakarta Tomcat-Webserver auf Port 8080.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 51
Dreamweaver-Sites verwenden
Fr Macintosh-Benutzer, die den Apache-Webserver verwenden, lautet das Stammverzeichnis: Benutzer/Benutzername/Sites, wobei Benutzername fr den Macintosh-Benutzernamen steht. Wenn Sie Mac OS 10.1 oder hher installieren, wird fr diesen Ordner automatisch ein Alias mit der Bezeichnung ~Benutzername definiert. Die standardmige Web-URL in Dreamweaver lautet daher wie folgt: http://localhost/~Benutzername/ Wenn als Ordner fr die Verarbeitung dynamischer Seiten beispielsweise Benutzer:Benutzername:Sites:inventar verwendet werden soll, lautet die Web-URL folgendermaen: http://localhost/~Benutzername/inventar/
Verwandte Themen
Site-Einstellungen importieren und exportieren auf Seite 52
Hinweis: Sie mssen eine lokale Kopie der gesamten Struktur des jeweiligen Zweigs der vorhandenen Remote-Site erstellen.
2 Richten Sie mit den Remote-Zugriff-Informationen zur vorhandenen Site einen Remote-Ordner ein. Sie mssen
eine Verbindung zur Remote-Site herstellen, um die Dateien auf Ihren Computer herunterzuladen, bevor Sie sie bearbeiten knnen. Achten Sie darauf, dass Sie dabei den richtigen Stammordner fr die Remote-Site whlen.
3 Klicken Sie in der Symbolleiste des Bedienfelds Dateien (Fenster > Dateien) auf die Schaltflche Verbindung
zum Remote-Host herstellen (bei FTP-Zugriff) oder auf die Schaltflche Aktualisieren (bei Netzwerkzugriff), um die Remote-Site anzuzeigen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 52
Dreamweaver-Sites verwenden
Wenn Sie die gesamte Site bearbeiten mchten, whlen Sie im Bedienfeld Dateien den Stammordner der RemoteSite aus. Klicken Sie dann in der Symbolleiste auf Datei(en) abrufen, um die gesamte Site auf die lokale Festplatte herunterzuladen.
Wenn Sie nur eine Datei oder einen Ordner der Site bearbeiten mchten, whlen Sie die Datei bzw. den Ordner in
der Remote-Ansicht des Bedienfelds Site aus. Klicken Sie dann in der Symbolleiste auf Datei(en) abrufen, um diese Datei bzw. diesen Ordner auf die lokale Festplatte herunterzuladen. Dreamweaver kopiert automatisch so viele Strukturelemente der Remote-Site, wie erforderlich sind, um die heruntergeladene Datei im korrekten Pfad der Site-Hierarchie abzulegen. Wenn Sie nur einen einzigen Teil einer Site bearbeiten, sollten Sie abhngige Dateien, wie etwa Bilddateien, normalerweise mit einbeziehen.
Sites exportieren
1 Whlen Sie Site > Sites verwalten. 2 Whlen Sie eine oder mehrere Sites aus, deren Einstellungen Sie exportieren mchten, und klicken Sie auf die
Schaltflche Exportieren:
Um mehrere Sites auszuwhlen, klicken Sie bei bedrckter Strg-Taste (Windows) bzw. bei gedrckter Befehlstaste
(Macintosh) auf die einzelnen Sites.
Um einen Bereich von Sites auszuwhlen, klicken Sie bei gedrckter Umschalttaste auf die erste und letzte Site im
Bereich.
3 Wenn Sie die Site-Einstellungen sichern mchten, whlen Sie im Dialogfeld Site '...' wird exportiert die erste
Option aus und klicken Sie auf OK. Dreamweaver speichert die Anmeldeinformationen des Remote-Servers, d. h. den Benutzernamen und das Kennwort, sowie lokale Pfadinformationen.
4 Wenn Sie die Einstellungen anderen Benutzern zur Verfgung stellen mchten, whlen Sie im Dialogfeld Site '...'
wird exportiert die zweite Option aus und klicken Sie auf OK. (Dreamweaver speichert keine Informationen, die fr andere Benutzer ungeeignet sind, z. B. Ihre Anmeldeinformationen fr den Remote-Server oder lokale Pfade.)
5 Beantworten Sie die eingeblendete Frage, navigieren Sie nacheinander fr jede zu exportierende Site zu dem
Ordner, in dem die Site gespeichert werden soll, und klicken Sie auf Speichern. (Dreamweaver speichert die Site als XML-Datei mit der Dateierweiterung STE.)
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 53
Dreamweaver-Sites verwenden
Hinweis: Speichern Sie die *.ste-Datei im Stammordner Ihrer Site oder auf Ihrem Desktop, damit Sie sie schnell finden. Wenn Sie sich nicht mehr erinnern knnen, wo Sie sie gespeichert haben, fhren Sie auf Ihrem Computer eine Dateisuche durch, in der Sie nach der Erweiterung *.ste suchen.
Sites importieren
1 Whlen Sie Site > Sites verwalten. 2 Klicken Sie auf Importieren. 3 Navigieren Sie zu einer oder mehreren (in Dateien mit der Dateinamenerweiterung .ste definierten) Sites, deren
Einstellungen Sie importieren mchten, und whlen Sie die Dateien aus. Um mehrere Sites auszuwhlen, klicken Sie bei gedrckter Strg-Taste (Windows) bzw. bei gedrckter Befehlstaste (Macintosh) auf jede gewnschte .ste-Datei. Um einen Bereich von Sites auszuwhlen, klicken Sie bei gedrckter Umschalttaste auf die erste und letzte Datei im Bereich.
4 Klicken Sie auf OK und anschlieend auf Fertig.
Nachdem Dreamweaver die Sites importiert hat, wird der Sitename im Dialogfeld Sites verwalten angezeigt.
(Macintosh).
2 Whlen Sie links im Dialogfeld Voreinstellungen in der Kategorieliste die Option Site aus. 3 Legen Sie die Optionen fest und klicken Sie auf OK.
Immer zeigen Legt fest, welche Site (entfernt oder lokal) immer angezeigt wird und in welchem Fensterbereich des Bedienfelds Dateien (links oder rechts) die lokalen Dateien und die Remote-Dateien angezeigt werden sollen.
Standardmig wird die lokale Site immer rechts angezeigt. Der nicht ausgewhlte Fensterbereich (standardmig der linke) kann nach Belieben verndert werden: In diesem Fensterbereich knnen die Dateien der anderen Site (standardmig der Remote-Site) angezeigt werden.
Abhngige Dateien Zeigt eine Eingabeaufforderung fr die bertragung von abhngigen Dateien an (beispielsweise Bilder, externe Stylesheets und andere Dateien, auf die in der HTML-Datei verwiesen wird), die der Browser zusammen mit der HTML-Datei ldt. Standardmig ist sowohl die Option Aufforderung bei Abrufen/Auschecken als auch Aufforderung bei Bereitstellen/Einchecken aktiviert.
Wenn Sie eine neue Datei auschecken, sollten Sie auch die abhngigen Dateien herunterladen. Wenn sich die neuesten Versionen der abhngigen Dateien bereits auf der lokalen Festplatte befinden, mssen sie jedoch nicht erneut heruntergeladen werden. Auch beim Upload und Einchecken von Dateien ist es nicht notwendig, die Dateien zu senden, wenn auf dem Zielsystem bereits aktuelle Dateien vorhanden sind. Wenn Sie diese Optionen deaktivieren, werden Ihre abhngigen Dateien nicht bertragen. Soll daher das Dialogfeld Abhngige Dateien auch angezeigt werden, wenn diese Optionen deaktiviert sind, halten Sie die Alt-Taste (Windows) bzw. die Wahltaste (Macintosh) gedrckt, whrend Sie die Befehle Abrufen, Bereitstellen, Einchecken oder Auschecken whlen.
FTP-Verbindung Legt fest, ob die Verbindung zur Remote-Site getrennt wird, wenn nach der angegebenen
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 54
Dreamweaver-Sites verwenden
FTP-Zeitberschreitung Gibt an, wie viele Sekunden lang Dreamweaver versucht, eine Verbindung zum Remote-
Server herzustellen. Reagiert der Server nicht innerhalb des angegebenen Zeitraums, wird in Dreamweaver eine entsprechende Warnmeldung angezeigt.
FTP-bertragungsoptionen Bestimmt, ob Dreamweaver nach der angegebenen Anzahl an Sekunden die Standardoption auswhlt, wenn whrend der Dateibertragung ein Dialogfeld eingeblendet wird und keine Reaktion des Benutzers erfolgt. Firewall-Host Gibt die Adresse des Proxy-Servers an, zu dem die Verbindung hergestellt wird, wenn Sie sich hinter einer Firewall befinden.
Wenn Sie keine Firewall eingerichtet haben, lassen Sie dieses Feld leer. Wenn Sie sich hinter einer Firewall befinden, markieren Sie im Dialogfeld Site-Definition das Kontrollkstchen Firewall verwenden.
Firewall-Anschluss Bestimmt, ber welchen Anschluss in der Firewall eine Verbindung zum Remote-Server hergestellt wird. Der Standardanschluss fr FTP ist 21. Wenn Sie einen anderen Anschluss verwenden mchten, geben Sie die Nummer in dieses Feld ein. Bereitstellungsoptionen: Dateien vor dem Bereitstellen speichern Legt fest, dass nicht gespeicherte Dateien
automatisch gespeichert werden sollen, bevor sie in der Remote-Site bereitgestellt werden.
Optionen zum Verschieben: Eingabeaufforderung vor dem Verschieben von Dateien auf den Server Zeigt eine
Warnmeldung an, wenn Sie Dateien auf die Remote-Site verschieben mchten.
Sites verwalten ffnet das Dialogfeld Sites verwalten, in dem Sie eine vorhandene Site bearbeiten oder eine neue Site erstellen knnen.
Sie knnen festlegen, ob Ihre Dateien im ASCII-Modus (Text) oder im Binrmodus bertragen werden. Dazu bearbeiten Sie die Datei FTPExtensionMap.txt im Ordner Dreamweaver/Configuration (bzw. FTPExtensionMapMac.txt auf Macintosh-Systemen). Weitere Informationen hierzu finden Sie im Handbuch Dreamweaver erweitern.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 55
Dreamweaver-Sites verwenden
Contribute ergnzt den Funktionsumfang Ihrer Website mit Contribute Publishing Server (CPS), einer Suite von Publishing-Anwendungen und Tools zur Benutzerverwaltung, mit der Sie Contribute in den Benutzerverzeichnisdienst Ihrer Organisation, z. B. Lightweight Directory Access Protocol (LDAP) oder Active Directory, integrieren knnen. Wenn Sie Ihre Dreamweaver-Site als Contribute-Site aktivieren, liest Dreamweaver die Contribute-Verwaltungseinstellungen, wann immer Sie eine Verbindung mit der Remote-Site herstellen. Wenn Dreamweaver feststellt, dass CPS aktiviert ist, erbt es einige Funktionen von CPS, z. B. die Wiederherstellung frherer Dateiversionen und die Ereignisprotokollierung. Sie knnen Dreamweaver dafr verwenden, eine Verbindung zu einer Datei in einer Contribute-Site herzustellen und diese Datei zu modifizieren. Die meisten Dreamweaver-Funktionen sind bei Contribute-Sites genauso aufgebaut wie bei jeder anderen Site. Wenn Sie Dreamweaver allerdings fr Contribute-Sites verwenden, fhrt Dreamweaver bestimmte Dateiverwaltungsoperationen wie z. B. das Speichern mehrfacher Dokumentversionen und Protokollieren bestimmter Ereignisse in der CPS-Konsole automatisch durch. Weitere Informationen hierzu finden Sie in der Contribute-Hilfe.
Halten Sie die Site-Struktur einfach. Achten Sie darauf, dass Ordner nicht zu tief verschachtelt werden. Gruppieren
Sie zusammengehrende Elemente in einem Ordner.
Richten Sie fr die auf dem Server enthaltenen Ordner entsprechende Lese- und Schreibberechtigungen ein. Bei der Erstellung der Ordner sollten ihnen Indexseiten hinzufgen, um Contribute-Benutzern das Ablegen neuer
Seiten in den richtigen Ordnern zu erleichtern. Beispielsweise knnen Sie fr Contribute-Benutzer, die Seiten mit Sitzungsprotokollen bereitstellen, im Site-Stammordner einen Ordner mit der Bezeichnung Sitzungsprotokolle erstellen und darin eine Indexseite anlegen. Richten Sie anschlieend einen Hyperlink von der Hauptseite zur Indexseite fr Sitzungsprotokolle ein. Contribute-Benutzer knnen dann zur Indexseite wechseln und fr das Protokoll einer bestimmten Sitzung eine neue Seite erstellen, die mit dieser Seite verknpft ist.
Stellen Sie auf der Indexseite eines jeden Ordners eine Liste mit Verknpfungen zu den im jeweiligen Ordner
enthaltenen einzelnen Inhaltsseiten und Dokumenten bereit.
Gestalten Sie das Seitendesign mglichst einfach, um verzierte Formatierungen auf ein Minimum zu beschrnken. Die Formatierung sollten Sie besser mit CSS als mit HTML-Tags realisieren und dabei aussagekrftige Namen fr
Ihre CSS-Stile verwenden. Wenn die Contribute-Benutzer Standardformatvorlagen von Microsoft Word verwenden, sollten Sie die Namen dieser Word-Formatvorlagen auch fr Ihre CSS-Stile verwenden, damit Contribute die Formatvorlagen richtig zuordnen kann, wenn Informationen aus einem Word-Dokument kopiert und in eine Contribute-Seite einfgt werden.
Um zu verhindern, dass Contribute-Benutzern ein bestimmter CSS-Stil zur Verfgung steht, ndern Sie den
Namen des Stils, sodass er mit mmhide_ beginnt. Wenn Sie auf einer Seite beispielsweise einen Stil mit der Bezeichnung Rechts_ausgerichtet verwenden, der Contribute-Benutzern nicht zur Verfgung gestellt werden soll, ndern Sie den Namen des Stils in mmhide_Rechts_ausgerichtet. Hinweis: Sie mssen mmhide_ zum Stilnamen in der Codeansicht hinzufgen; diese nderung kann nicht im Bedienfeld CSS-Stile hinzugefgt werden.
Verwenden Sie mglichst wenige CSS-Stile, um die Formatierung einfach und bersichtlich zu gestalten.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 56
Dreamweaver-Sites verwenden
Wenn Server-Side Includes fr HTML-Seitenelemente, wie z. B. Kopf- und Fuzeilen, verwendet werden,
empfiehlt es sich, eine nicht verknpfte HTML-Seite zu erstellen, die Hyperlinks zu den Include-Dateien enthlt. Contribute-Benutzer knnen dann fr diese Seite ein Lesezeichen setzen, um schnell zu den Include-Dateien navigieren und diese bearbeiten zu knnen.
Verwandte Themen
Dreamweaver-Vorlagen erstellen auf Seite 423 CSS erstellen und verwalten auf Seite 137 Mit Server-Side Includes arbeiten auf Seite 361
Verwandte Themen
Dateien ein- und auschecken auf Seite 92
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 57
Dreamweaver-Sites verwenden
Weitere Informationen ber Contribute-Berechtigungen finden Sie in der Contribute-Hilfe unter Contribute verwalten.
Contribute-Sonderdateien
Contribute enthlt eine Reihe von Sonderdateien, die nicht fr die Besucher Ihrer Site vorgesehen sind.
Die Datei fr gemeinsam genutzte Einstellungen, eine Datei mit einem verwirrenden Namen und der Erweiterung
CSI, wird im Stammverzeichnis der Site im Ordner _mm angezeigt und enthlt Informationen, die von Contribute zur Verwaltung der Site verwendet werden.
ltere Versionen von Dateien, in Ordnern mit dem Namen _baks Temporre Seitenversionen, damit Benutzer eine Vorschau der nderungen anzeigen knnen. Temporre Sperrdateien, die darauf hinweisen, dass eine jeweilige Seite bearbeitet oder in der Vorschau angezeigt wird. Design Notes-Dateien, die Metadaten ber die in der Site abgelegten Seiten enthalten.
Generell sollte keine dieser Contribute-Sonderdateien in Dreamweaver bearbeitet werden. Sie werden von Dreamweaver automatisch verwaltet. Wenn diese Contribute-Sonderdateien nicht auf dem ffentlich zugnglichen Server angezeigt werden sollen, knnen Sie einen Testserver einrichten, auf dem Contribute-Benutzer an Seiten arbeiten knnen. Kopieren Sie dann diese Webseiten regelmig vom Testserver auf einen Produktionsserver im Internet. Bei Verwendung eines Testservers kopieren Sie nur die Webseiten auf den Produktionsserver und nicht die oben genannten ContributeSonderdateien. Insbesondere drfen die Ordner _mm und _baks nicht auf den Produktionsserver kopiert werden. Hinweis: In der Contribute-Hilfe finden Sie unter dem Begriff Website-Sicherheit Informationen darber, wie Sie einen Server einrichten knnen, um Besuchern den Zugriff auf Dateien in Ordnern zu verweigern, die mit einem Unterstrich beginnen. Manchmal kann es erforderlich sein, andere Contribute-Sonderdateien manuell zu lschen, z. B. dann, wenn temporre Vorschau-Seiten nach Beendigung der Vorschau von Contribute nicht gelscht werden. Diese temporren Seiten mssen dann manuell gelscht werden. Die Dateinamen temporrer Vorschauseiten beginnen mit TMP. hnlich kann es unter bestimmten Bedingungen dazu kommen, dass eine veraltete Sperrdatei versehentlich nicht vom Server entfernt wird. In diesem Fall mssen Sie die Sperrdatei manuell lschen, damit andere Benutzer die Seite bearbeiten knnen.
Wenn bei der Verbindung zu Ihrer Remote-Site das WebDAV-Protokoll verwendet wird, knnen Sie die
Contribute-Kompatibilitt nicht aktivieren, da diese Quellcode-Versionskontrollsysteme nicht mit den Design Notes- und Eincheck-/Auschecksystemen kompatibel sind, die von Dreamweaver fr Contribute-Sites verwendet werden.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 58
Dreamweaver-Sites verwenden
Wenn Sie eine RDS-Verbindung zur Remote-Site herstellen, knnen Sie die Contribute-Kompatibilitt zwar
aktivieren, mssen aber dann Ihre Verbindung anpassen, bevor Sie sie gemeinsam mit anderen ContributeBenutzern nutzen knnen.
Wenn Ihr lokaler Computer als Webserver eingesetzt wird, mssen Sie die Site ber eine FTP- oder
Netzwerkverbindung (und nicht ber ein lokales Ordnerverzeichnis) einrichten, damit Sie Ihre Verbindung gemeinsam mit anderen -Benutzern nutzen knnen. Wenn Sie die Contribute-Kompatibilitt aktivieren, werden in Dreamweaver automatisch Design Notes (zusammen mit der Option Design Notes fr gemeinsame Nutzung bereitstellen) und das Eincheck-/Auscheck-System aktiviert. Wenn Contribute Publishing Server (CPS) auf der Remote-Site, zu der Sie eine Verbindung hergestellt haben, aktiviert wurde, benachrichtigt Dreamweaver den CPS ber jede von Ihnen ausgefhrte Netzwerkoperation, wie z. B. das Einchecken, Wiederherstellen frherer Dateiversionen oder Verffentlichen einer Datei. Der CPS protokolliert diese Ereignisse und Sie knnen das Protokoll auf der CPS-Verwaltungskonsole anzeigen. (Wenn Sie CPS deaktivieren, werden diese Ereignisse nicht protokolliert.) Mithilfe von Contribute knnen Sie CPS aktivieren. Weitere Informationen hierzu finden Sie in der Adobe Contribute-Hilfe. Hinweis: Sie knnen die Kompatibilitt einer Site mit Contribute herstellen, ohne dass Contribute auf Ihrem Computer installiert ist. Wenn Sie jedoch Contribute Administrator ber Dreamweaver starten mchten, muss Contribute auf demselben Computer installiert sein wie Dreamweaver und Sie mssen eine Verbindung mit der Remote-Site herstellen, bevor Sie die Contribute-Kompatibilitt aktivieren knnen. Andernfalls kann Dreamweaver die AdministratorEinstellungen von Contribute nicht lesen, anhand derer ermittelt wird, ob CPS und Wiederherstellung aktiviert wurden. Wichtig: Stellen Sie sicher, dass die Datei fr gemeinsam genutzte Einstellungen (CSI-Datei), ber die die Site in Contribute verwaltet wird, sich auf dem Remote-Server befindet und nicht beschdigt ist. Diese Datei wird in Contribute automatisch erstellt (zudem werden ltere Versionen der Datei berschrieben), wenn Sie die Site in Contribute Administrator verwalten. Wenn sich die Datei fr gemeinsam genutzte Einstellungen nicht auf dem Server befindet oder beschdigt ist, wird bei jedem Netzwerkvorgang (z. B. Bereitstellen) in Dreamweaver die Fehlermeldung Die fr die Kompatibilitt mit Contribute erforderliche Datei ist auf dem Server nicht vorhanden zurckgegeben. Um sicherzustellen, dass die korrekte Datei auf dem Server vorhanden ist, deaktivieren Sie in Dreamweaver die Verbindung mit dem Server, starten Sie Contribute Administrator, nehmen Sie eine nderung an den Einstellungen vor und stellen Sie dann in Dreamweaver die Verbindung mit dem Server wieder her. Weitere Informationen hierzu finden Sie in der Adobe Contribute-Hilfe.
1 Whlen Sie Site > Sites verwalten. 2 Whlen Sie eine Site aus und klicken Sie dann auf Bearbeiten. 3 Erweitern Sie im Dialogfeld Site-Definition die Option Erweiterte Einstellungen, whlen Sie die Kategorie
eingeblendeten Dialogfeld Ihren Namen und Ihre E-Mail-Adresse ein und klicken Sie auf OK. Der Wiederherstellungsstatus, der CPS-Status, das Textfeld Site-Stamm-URL und die Schaltflche Site in Contribute verwalten werden im Dialogfeld Site-Definition angezeigt. Wenn die Wiederherstellungsfunktion in Contribute aktiviert wurde, knnen Sie frhere Versionen von Dateien wiederherstellen, die Sie in Dreamweaver gendert haben.
6 Prfen Sie die URL im Textfeld Site-Stamm-URL und korrigieren Sie sie bei Bedarf. Dreamweaver erstellt eine
Site-Stamm-URL basierend auf anderen von Ihnen bereitgestellten Site-Definitionsdaten. Manchmal ist die erstellte URL jedoch nicht korrekt.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 59
Dreamweaver-Sites verwenden
7 Klicken Sie auf die Schaltflche Testen, um zu prfen, ob Sie die richtige URL eingegeben haben.
Hinweis: Wenn Sie nun einen Verbindungsschlssel senden oder Contribute-Site-Administrationsaufgaben durchfhren mchten, berspringen Sie die restlichen Schritte.
8 Klicken Sie auf Site in Contribute verwalten, wenn Sie nderungen an den Einstellungen vornehmen mchten.
Beachten Sie, dass Contribute auf demselben Computer installiert sein muss, wenn Sie Contribute Administrator ber Dreamweaver ffnen mchten.
9 Klicken Sie auf Speichern und anschlieend auf Fertig.
Verwandte Themen
Frhere Dateiversionen wiederherstellen (Contribute-Benutzer) auf Seite 107
Contribute aus.
4 Klicken Sie auf die Schaltflche Site in Contribute verwalten.
Hinweis: Diese Schaltflche wird nur dann angezeigt, wenn Sie die Contribute-Kompatibilitt aktiviert haben.
5 Geben Sie das Administratorkennwort ein, wenn Sie dazu aufgefordert werden, und klicken Sie auf OK.
Um die Administator-Einstellungen zu ndern, whlen Sie in der Liste auf der linken Seite eine Kategorie aus und
ndern Sie die Einstellungen nach Bedarf.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 60
Dreamweaver-Sites verwenden
Um die Rolleneinstellungen zu ndern, klicken Sie in der Kategorie fr Benutzer und Rollen auf die Schaltflche
zum Bearbeiten der Rolleneinstellungen und nehmen Sie die gewnschten nderungen vor.
Zur bermittlung eines Verbindungsschlssels fr die Einrichtung von Benutzerverbindungen klicken Sie in der
Kategorie fr Benutzer und Rollen auf die Schaltflche Verbindungsschlssel senden und fhren Sie anschlieend den Verbindungsassistenten aus.
6 Klicken Sie auf Schlieen, dann auf OK und schlielich auf Fertig.
Weitere Informationen zu Administrator-Einstellungen, zum Verwalten von Benutzerrollen und Erstellen eines Verbindungsschlssels finden Sie in der Contribute-Hilfe.
Verwandte Themen
Site-Einstellungen importieren und exportieren auf Seite 52
Sie die Rcktaste (Windows) bzw. die Lschtaste (Macintosh). Besttigen Sie in dem daraufhin eingeblendeten Dialogfeld, ob die Datei gelscht werden soll.
2 Fhren Sie im Besttigungsdialogfeld folgende Schritte aus:
Whlen Sie die Option Frhere Versionen lschen, um alle vorherigen Versionen der Datei sowie die aktuelle
Version zu lschen.
Deaktivieren Sie die Option Frhere Versionen lschen, um vorherige Versionen der Datei auf dem Server zu
belassen.
3 Klicken Sie auf Ja, um die Datei zu lschen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 61
Dreamweaver-Sites verwenden
Bei dieser Methode sollten Sie in den Unterordnern keine Hyperlinks verwenden, die mit dem Site-Stammordner verknpft sind. Mit dem Site-Stammordner verknpfte Hyperlinks beziehen sich auf den Hauptstammordner des Servers und nicht auf den von Ihnen in Dreamweaver definierten Stammordner. Contribute-Benutzer knnen keine Hyperlinks erstellen, die mit dem Site-Stammordner verknpft sind. Wenn Hyperlinks in Contribute-Seiten als fehlerhaft erscheinen, liegt mglicherweise ein Problem mit den Ordnerberechtigungen vor, insbesondere dann, wenn die Hyperlinks mit Seiten auerhalb des Stammverzeichnisses des jeweiligen Contribute-Benutzers verknpft sind. berprfen Sie die Lese- und Schreibberechtigungen fr die auf dem Server vorliegenden Ordner.
Verwandte Themen
Absolute, zum Dokument relative und zum Site-Stammordner relative Pfade auf Seite 289
ffnen Sie die Datei im Dokumentfenster und whlen Sie dann Site > Auschecken rckgngig. Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste (Macintosh) ins Bedienfeld
Dateien (Fenster > Dateien) und whlen Sie dann Auschecken rckgngig. In dem ggf. eingeblendeten Dialogfeld wird angezeigt, von wem die Datei ausgecheckt wurde. Sie werden aufgefordert, das Entsperren der Datei zu besttigen.
2 Wenn das Dialogfeld eingeblendet wird, klicken Sie zur Besttigung auf Ja.
diese URL in einem Browser ffnen, um sicherzustellen, dass die korrekte Seite geffnet wird.
2 Klicken Sie in der Kategorie Remote-Informationen des Dialogfelds Site-Definition auf die Schaltflche
Testen, um sicherzustellen, dass eine Verbindung zur Site hergestellt werden kann.
3 Wenn bei Klicken auf die Schaltflche Testen trotz korrekter URL eine Fehlermeldung angezeigt wird, wenden
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 62
Dreamweaver-Sites verwenden
Fehlerbehebung in Contribute-Administrationstools
1 Vergewissern Sie sich auf dem Server, dass Sie ber die Lese- und Schreibberechtigung und ggf.
CSI hat.
3 Ist dies nicht der Fall, mssen Sie mithilfe des Verbindungsassistenten eine Verbindung zur Site herstellen und Site-
Administrator werden. Die Datei fr gemeinsam genutzte Einstellungen wird automatisch erstellt, wenn Sie Administrator werden. Weitere Informationen dazu, wie Sie den Administratorstatus fr eine bestehende Contribute-Website erlangen, finden Sie in der Contribute-Hilfe unter Contribute verwalten.
ENTWURF
Letzte Aktualisierung 19.3.2010
63
Neue leere Dokumente oder Vorlagen Dokumente, die auf den in Dreamweaver vordefinierten Seitendesigns darunter ber 30 CSS-Designs basieren Dokumente, die auf vorhandenen Vorlagen basieren
Sie knnen auch Voreinstellungen fr Dokumente festlegen. Wenn Sie z. B. grtenteils mit einem bestimmten Dokumenttyp arbeiten, knnen Sie ihn als Standard-Dokumenttyp fr neu zu erstellende Seiten definieren. In der Entwurfsansicht oder der Codeansicht lassen sich auf einfache Weise Dokumenteigenschaften, z. B. MetaTags, Dokumenttitel und Hintergrundfarben, sowie mehrere andere Seiteneigenschaften definieren.
Dreamweaver-Dateitypen
Sie knnen in Dreamweaver eine Vielzahl unterschiedlicher Dateitypen verwenden. Hauptschlich werden Sie mit HTML-Dateien arbeiten. Dateien im HTML-Format (HyperText Markup Language) enthalten die tagbasierten Sprachelemente, die zum Anzeigen von Webseiten in einem Browser verantwortlich sind. Sie knnen HTML-Dateien entweder mit der Erweiterung .html oder .htm speichern. In Dreamweaver wird zum Speichern von HTML-Dateien standardmig die Erweiterung .html verwendet. Es folgen einige der anderen hufig verwendeten Dateitypen, die Sie in Dreamweaver mglicherweise verwenden:
CSS CSS-Dateien (Cascading Style Sheet) haben die Erweiterung .css. Sie werden zum Formatieren von HTML-
Webgrafikformat fr Cartoons, Logos, Grafiken mit transparenten Bereichen und fr Animationen. GIF-Dateien enthalten maximal 256 Farben.
JPEG JPEG-Dateien (Joint Photographic Experts Group nach der Organisation, die dieses Format entwickelt hat)
haben die Erweiterung .jpg und sind in der Regel Fotos oder Bilder mit hoher Farbauflsung. Das JPEG-Format eignet sich am besten fr digitale oder gescannte Fotos, Bilder mit Texturen oder Farbverlaufbergngen und alle Bilder mit mehr als 256 Farben.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 64
Dateien erstellen und verwalten
XML XML-Dateien (eXtensible Markup Language) haben die Erweiterung .xml. Sie enthalten Daten in einer Rohform, die mithilfe von XSL (eXtensible Stylesheet Language) formatiert werden knnen. XSL XSL-Dateien (eXtensible Stylesheet Language) haben die Erweiterung .xsl oder .xslt. Sie werden zum Formatieren
von XML-Daten verwendet, die auf einer Webseite angezeigt werden sollen.
CFML CFML-Dateien (ColdFusion Markup Language) haben die Erweiterung .cfm. Sie werden zum Verarbeiten
verwendet.
Verwandte Themen
XML-Daten mit XSLT anzeigen auf Seite 525 Anwendungen visuell entwickeln auf Seite 646 Grundlegendes zu Cascading Stylesheets auf Seite 132
den Seitentyp aus, den Sie erstellen mchten. Whlen Sie beispielsweise HTML, um eine HTML-Seite zu erstellen, ColdFusion, um eine ColdFusion-Seite zu erstellen usw.
3 Wenn Sie ein CSS-Layout in Ihre neue Seite integrieren mchten, whlen Sie in der Spalte Layout: ein
vordefiniertes CSS-Layout. Andernfalls whlen Sie Keine. Abhngig von Ihrer Auswahl werden auf der rechten Seite des Dialogfelds unter Umstnden eine Vorschau und eine Beschreibung des gewhlten Layouts angezeigt. Die vordefinierten CSS-Layouts enthalten folgende Spaltentypen:
Fest Die Spaltenbreite wird in Pixeln definiert. Die Spalte wird nicht an die Gre des Browserfensters oder die
4 Whlen Sie im Popupmen DocType einen Dokumenttyp aus. In den meisten Fllen knnen Sie die vorgegebene
Auswahl XHTML 1.0 Transitional verwenden. Durch Auswahl einer der XHTML-Dokumenttypdefinitionen (DTD) stellen Sie sicher, dass Ihre Seite XHTMLkompatibel angelegt wird. Sie knnen beispielsweise ein HTML-Dokument XHTML-kompatibel machen, indem Sie im Popupmen XHTML 1.0 Transitional oder XHTML 1.0 Strict auswhlen. Extensible Hypertext Markup Language, abgekrzt XHTML, ist eine Neuformulierung von HTML als XML-Anwendung. Im Allgemeinen knnen Sie mit XHTML die Vorteile von XML nutzen und dabei gleichzeitig sicherstellen, dass Ihre Webdokumente mit lteren und knftigen Browsern kompatibel sind. Hinweis: Weitere Informationen zu XHTML finden Sie auf der Website des World Wide Web Consortium (W3C). Diese Site enthlt die Spezifikationen fr XHTML 1.1 - Module-Based XHTML (www.w3.org/TR/xhtml11/) und XHTML 1.0 (www.w3c.org/TR/xhtml1/). Einschlgige Informationen bieten auch die XHTML-Validator-Sites fr webbasierte Dateien (http://validator.w3.org/) und lokale Dateien (http://validator.w3.org/file-upload.html).
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 65
Dateien erstellen und verwalten
5 Wenn Sie in der Spalte Layout ein CSS-Layout gewhlt haben, whlen Sie im zugehrigen Popupmen den
hinzu.
Neue Datei erstellen Schreibt die die CSS-Layoutinformationen in eine neue, externe CSS-Datei und verknpft das
Layout bentigten CSS-Regeln enthlt. Klicken Sie dazu auf das Symbol Stylesheet anfgen ber dem Teilfenster CSS-Datei anfgen und whlen Sie ein vorhandenes CSS-Stylesheet aus. Diese Option ist besonders praktisch, wenn Sie dasselbe CSS-Layout (d. h. die in einer einzelnen Datei enthaltenen CSS-Regeln) auf mehrere Dokumente anwenden mchten.
6 (Optional) CSS-Stylesheets knnen auch einer Seite zugeordnet werden, die unabhngig vom CSS-Layout neu
erstellt wird. Klicken Sie dazu auf das Symbol Stylesheet anfgen und whlen Sie ein CSS-Stylesheet aus.
Eine detaillierte, schrittweise Anleitung fr diesen Vorgang finden Sie im Artikel von David Powers: Automatically attaching a style sheet to new documents (Stylesheets automatisch an neue Dokumente anfgen).
7 Whlen Sie InContext Editing aktivieren aus, wenn Sie eine Seite erstellen mchten, die nach dem Speichern mit
InContext Editing kompatibel ist. Eine mit InContext Editing kompatible Seite muss mindestens ein div-Tag aufweisen, das als bearbeitbarer Bereich angegeben werden kann. Beim HTML-Seitentyp mssen Sie beispielsweise eines der CSS-Layouts fr die neue Seite auswhlen, da diese Layouts bereits vordefinierte div-Tags enthalten. Der bearbeitbare InContext Editing-Bereich wird automatisch im div-Tag mit der content-ID platziert. Spter knnen Sie der Seite gegebenenfalls weitere bearbeitbare Bereiche hinzufgen.
8 Klicken Sie auf Voreinstellungen, wenn Sie standardmige Dokumentvoreinstellungen festlegen mchten, wie
Verwenden Sie in Datei- bzw. Ordnernamen weder Leerzeichen noch Sonderzeichen. Dateinamen sollten auch nicht mit einer Ziffer beginnen. Verwenden Sie insbesondere keine Sonderzeichen (wie , oder ) und Satzzeichen (wie Punkte, Doppelpunkte oder Schrgstriche) in Namen von Dateien, die auf einem Remote-Server bereitgestellt werden sollen. Viele Server wandeln diese Zeichen beim Hochladen um, sodass Hyperlinks zu diesen Dateien nicht mehr funktionieren.
Verwandte Themen
XHTML-Code auf Seite 313 Seitenlayouts mit CSS gestalten auf Seite 161
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 66
Dateien erstellen und verwalten
Standard-Dokumenttyp und Standardkodierung festlegen auf Seite 70 Business Catalyst InContext Editing auf Seite 517
HTML-Vorlage aus, um eine HTML-Vorlage zu erstellen, oder ColdFusion-Vorlage, um eine ColdFusionVorlage zu erstellen, usw.
4 Wenn Sie ein CSS-Layout in Ihre neue Seite integrieren mchten, whlen Sie in der Spalte Layout: ein
vordefiniertes CSS-Layout. Andernfalls whlen Sie Keine. Abhngig von Ihrer Auswahl werden auf der rechten Seite des Dialogfelds unter Umstnden eine Vorschau und eine Beschreibung des gewhlten Layouts angezeigt. Die vordefinierten CSS-Layouts enthalten folgende Spaltentypen:
Fest Die Spaltenbreite wird in Pixeln definiert. Die Spalte wird nicht an die Gre des Browserfensters oder die
5 Whlen Sie im Popupmen DocType einen Dokumenttyp aus. In den meisten Fllen knnen Sie die vorgegebene
Auswahl XHTML 1.0 Transitional verwenden. Durch Auswahl einer der XHTML-Dokumenttypdefinitionen (DTD) stellen Sie sicher, dass Ihre Seite XHTMLkompatibel angelegt wird. Sie knnen beispielsweise ein HTML-Dokument XHTML-kompatibel machen, indem Sie im Popupmen XHTML 1.0 Transitional oder XHTML 1.0 Strict auswhlen. Extensible Hypertext Markup Language, abgekrzt XHTML, ist eine Neuformulierung von HTML als XML-Anwendung. Im Allgemeinen knnen Sie mit XHTML die Vorteile von XML nutzen und dabei gleichzeitig sicherstellen, dass Ihre Webdokumente mit lteren und knftigen Browsern kompatibel sind. Hinweis: Weitere Informationen zu XHTML finden Sie auf der Website des World Wide Web Consortium (W3C). Diese Site enthlt die Spezifikationen fr XHTML 1.1 - Module-Based XHTML (www.w3.org/TR/xhtml11/) und XHTML 1.0 (www.w3c.org/TR/xhtml1/). Einschlgige Informationen bieten auch die XHTML-Validator-Sites fr webbasierte Dateien (http://validator.w3.org/) und lokale Dateien (http://validator.w3.org/file-upload.html).
6 Wenn Sie in der Spalte Layout ein CSS-Layout gewhlt haben, whlen Sie im zugehrigen Popupmen den
hinzu.
Neue Datei erstellen Schreibt die die CSS-Layoutinformationen in eine neue, externe CSS-Datei und verknpft das
Layout bentigten CSS-Regeln enthlt. Klicken Sie dazu auf das Symbol Stylesheet anfgen ber dem Teilfenster CSS-Datei anfgen und whlen Sie ein vorhandenes CSS-Stylesheet aus. Diese Option ist besonders praktisch, wenn Sie dasselbe CSS-Layout (d. h. die in einer einzelnen Datei enthaltenen CSS-Regeln) auf mehrere Dokumente anwenden mchten.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 67
Dateien erstellen und verwalten
7 (Optional) CSS-Stylesheets knnen auch einer Seite zugeordnet werden, die unabhngig vom CSS-Layout neu
erstellt wird. Klicken Sie dazu auf das Symbol Stylesheet anfgen und whlen Sie ein CSS-Stylesheet aus. InContext Editing kompatibel ist.
8 Whlen Sie InContext Editing aktivieren aus, wenn Sie eine Seite erstellen mchten, die nach dem Speichern mit
Eine mit InContext Editing kompatible Seite muss mindestens ein div-Tag aufweisen, das als bearbeitbarer Bereich angegeben werden kann. Beim HTML-Seitentyp mssen Sie beispielsweise eines der CSS-Layouts fr die neue Seite auswhlen, da diese Layouts bereits vordefinierte div-Tags enthalten. Der bearbeitbare InContext Editing-Bereich wird automatisch im div-Tag mit der content-ID platziert. Spter knnen Sie der Seite gegebenenfalls weitere bearbeitbare Bereiche hinzufgen.
9 Klicken Sie auf Voreinstellungen, wenn Sie standardmige Dokumentvoreinstellungen festlegen mchten, wie
Bereiche hinzugefgt haben, weist ein Dialogfeld darauf hin, dass das Dokument keine bearbeitbaren Bereiche enthlt. Klicken Sie auf OK, um das Dialogfeld zu schlieen.
13 Whlen Sie im Dialogfeld Speichern unter eine Site aus, in der die Vorlage gespeichert wird. 14 Geben Sie im Feld Dateiname einen Namen fr die neue Vorlage ein. Sie brauchen dem Namen der Vorlage keine
Dateierweiterung anzufgen. Wenn Sie auf Speichern klicken, wird die neuen Vorlage automatisch mit der Erweiterung .dwt im Ordner Vorlagen auf Ihrer Site gespeichert. Verwenden Sie in Datei- bzw. Ordnernamen weder Leerzeichen noch Sonderzeichen. Dateinamen sollten auch nicht mit einer Ziffer beginnen. Verwenden Sie insbesondere keine Sonderzeichen (wie , oder ) und Satzzeichen (wie Punkte, Doppelpunkte oder Schrgstriche) in Namen von Dateien, die auf einem Remote-Server bereitgestellt werden sollen. Viele Server wandeln diese Zeichen beim Hochladen um, sodass Hyperlinks zu diesen Dateien nicht mehr funktionieren.
Verwandte Themen
XHTML-Code auf Seite 313 Seitenlayouts mit CSS gestalten auf Seite 161 Vorlagen erstellen und verwalten auf Seite 415 Dreamweaver-Sites einrichten auf Seite 39 Standard-Dokumenttyp und Standardkodierung festlegen auf Seite 70 Business Catalyst InContext Editing auf Seite 517
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 68
Dateien erstellen und verwalten
Verwandte Themen
Vorlagen erstellen und verwalten auf Seite 415 Dreamweaver-Sites einrichten auf Seite 39 Standard-Dokumenttyp und Standardkodierung festlegen auf Seite 70
diese Seite bei jeder nderung der Vorlage, auf der die Seite basiert aktualisiert wird.
5 Klicken Sie auf Voreinstellungen, wenn Sie standardmige Dokumentvoreinstellungen festlegen mchten, wie
der aktuellen Site anzuzeigen. Wenn Sie die zu verwendende Vorlage gerade erst erstellt haben, mssen Sie mglicherweise auf die Schaltflche Aktualisieren klicken, um sie anzuzeigen.
3 Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste (Macintosh) auf die Vorlage, die
Sie anwenden mchten, und whlen Sie dann Neu von Vorlage. Das Dokument wird im Dokumentfenster geffnet.
4 Speichern Sie das Dokument.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 69
Dateien erstellen und verwalten
3 Whlen Sie in der Spalte Beispielordner den Eintrag CSS-Stylesheet oder Frameset und anschlieend in der
Das neue Dokument wird im Dokumentfenster (Code- und Entwurfsansicht) geffnet. Wenn Sie die Option CSSStylesheet gewhlt haben, wird das CSS-Stylesheet in der Codeansicht geffnet.
5 Speichern Sie das Dokument (Datei > Speichern). 6 Wenn das Dialogfeld Abhngige Dateien kopieren angezeigt wird, stellen Sie die Optionen ein und klicken Sie
dann auf Kopieren, um die Elemente in den ausgewhlten Ordner zu kopieren. Sie knnen einen eigenen Pfad fr die abhngigen Dateien whlen oder den von Dreamweaver erzeugten Standardordner verwenden, der auf dem Quellnamen der Beispieldatei basiert.
Verwandte Themen
Grundlegendes zu Cascading Stylesheets auf Seite 132 Frame-Dateien und Frameset-Dateien speichern auf Seite 212
Erstellen.
4 Speichern Sie das Dokument (Datei > Speichern).
Verwandte Themen
Leere Seiten erstellen auf Seite 64
Dokumente speichern
1 Fhren Sie einen der folgenden Schritte aus:
Um die aktuelle Version auf der Festplatte zu berschreiben und vorgenommene nderungen zu speichern,
whlen Sie Datei > Speichern.
Um eine Datei in einem anderen Ordner oder unter einem anderen Namen zu speichern, whlen Sie Datei >
Speichern unter.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 70
Dateien erstellen und verwalten
2 Wechseln Sie im Dialogfeld Speichern unter zu dem Ordner, in dem die Datei gespeichert werden soll. 3 Geben Sie im Textfeld Dateiname einen Namen fr die Datei ein. 4 Klicken Sie auf Speichern, um die Datei zu speichern.
gespeicherte Dokument angezeigt. Wechseln Sie im eingeblendeten Dialogfeld zu dem Ordner, in dem die Datei gespeichert werden soll.
3 Geben Sie im Feld Dateiname einen Namen fr die Datei ein und klicken Sie auf Speichern.
In einem Dialogfeld wird die Frage angezeigt, ob Sie die nderungen verwerfen und die zuletzt gespeicherte Version wiederherstellen mchten.
2 Klicken Sie auf Ja, um die vorherige Version wiederherzustellen, oder auf Nein, um die nderungen
beizubehalten. Hinweis: Wenn Sie ein Dokument speichern und anschlieend Dreamweaver beenden, knnen Sie die vorherige Version eines Dokuments nach einem Neustart von Dreamweaver nicht wiederherstellen.
(Macintosh). Sie knnen auch im Dialogfeld Neues Dokument auf die Schaltflche Voreinstellungen klicken, um neue Dokumentvoreinstellungen festzulegen.
2 Klicken Sie in der Kategorieliste links auf Neues Dokument. 3 Legen Sie die Voreinstellungen fest bzw. nehmen Sie die erforderlichen nderungen vor und speichern Sie Ihre
verwendet werden soll. Hinweis: Diese Option ist fr andere Dateitypen deaktiviert.
Standard-Dokumenttyp (DDT) Whlen Sie eine der XHTML-Dokumenttypdefinitionen (DTD) aus, damit neue Seiten XHTML-kompatibel angelegt werden. Sie knnen beispielsweise ein HTML-Dokument XHTML-kompatibel machen, indem Sie im Popupmen XHTML 1.0 Transitional oder XHTML 1.0 Strict auswhlen. Standardkodierung Legen Sie mit der Standardkodierung fest, welche Kodierung fr neue Dokumente und beim ffnen von Dokumenten verwendet werden soll, in denen keine Kodierung angegeben ist.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 71
Dateien erstellen und verwalten
Wenn Sie Unicode (UTF-8) als Dokumentkodierung auswhlen, sind keine Entittskodierungen mehr erforderlich, da mit UTF-8 alle Zeichen dargestellt werden knnen. Wenn Sie eine andere Dokumentkodierung auswhlen, ist zur Darstellung bestimmter Zeichen mglicherweise eine Entittsreferenz erforderlich. Weitere Informationen zu Zeichenentitten finden Sie unter www.w3.org/TR/REC-html40/sgml/entities.html. Wenn Sie Unicode (UTF-8) als Standardkodierung auswhlen, knnen Sie eine Kennzeichnung der ByteReihenfolge (Byte Order Mark, BOM) in das Dokument einfgen lassen, indem Sie die Option Unicode-Signatur (BOM) einschlieen aktivieren. Eine BOM belegt 2 bis 4 Bytes am Anfang einer Textdatei und identifiziert eine Datei als Unicode-Datei und darber hinaus die Byte-Reihenfolge der nachfolgenden Byte. Da UTF-8 keine Byte-Reihenfolge besitzt, ist fr diese Kodierungsform das Hinzufgen einer UTF-8-BOM optional. Bei UTF-16 und UTF-32 jedoch ist eine BOM obligatorisch.
Unicode-Normalisierungsformular Whlen Sie eine Option in dieser Liste aus, wenn Sie Unicode (UTF-8) als
Standardkodierung gewhlt haben. Es gibt vier Unicode-Normalisierungsformulare. Die wichtigste ist die Normalisierungsform C, denn es ist die im Zeichenmodell fr das World Wide Web am hufigsten verwendete Normalisierungsform. Adobe bietet aus Grnden der Vollstndigkeit darber hinaus drei weitere Unicode-Normalisierungsformulare.
Dialogfeld Neues Dokument mit Strg+N anzeigen Deaktivieren Sie diese Option (mit Befehl+N auf Macintosh-
Systemen), wenn mit dem Tastaturbefehl nicht erst ein Dialogfeld geffnet werden soll, sondern automatisch ein neues Dokument des Standard-Dokumenttyps erstellt werden soll. In Unicode gibt es Zeichen, die sich zwar visuell hneln, im Dokument aber auf unterschiedliche Art und Weise gespeichert werden knnen. So kann beispielsweise das Zeichen durch ein Einzelzeichen (e-Umlaut) oder durch zwei Zeichen (regulres lateinisches Zeichen e + Kombinierungsumlaut) dargestellt werden. Ein UnicodeKombinierungszeichen ist ein Zeichen, das zusammen mit dem davor stehenden Zeichen verwendet wird, damit beispielsweise der Umlaut ber dem lateinischen e angezeigt wird. Beide Formen fhren zum gleichen visuellen Ergebnis, aber die in der Datei gespeicherten Informationen sind unterschiedlich. Beim Normalisieren wird sichergestellt, dass alle Zeichen, die in unterschiedlicher Weise gespeichert werden knnen, immer auf dieselbe Weise gespeichert werden. Dies bedeutet, dass alle -Zeichen in einem Dokument entweder als Einzelzeichen (e mit Umlaut) oder als zwei Zeichen (e + Kombinierungsumlaut) in einem Dokument gespeichert werden, aber nicht in beiden Formen. Weitere Informationen zur Unicode-Normalisierung und den spezifischen verwendbaren Formen finden Sie auf der Unicode-Website unter www.unicode.org/reports/tr15.
Verwandte Themen
XHTML-Code auf Seite 313 Dokumentkodierung auf Seite 225
(Macintosh).
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 72
Dateien erstellen und verwalten
Sie knnen auch im Dialogfeld Neues Dokument auf die Schaltflche Voreinstellungen klicken, um neue Dokumentvoreinstellungen festzulegen.
2 Klicken Sie in der Kategorieliste links auf Neues Dokument. 3 Vergewissern Sie sich, dass im Popupmen Standarddokument die Option HTML ausgewhlt ist. 4 Geben Sie im Feld Standarderweiterung die Dateierweiterung an, die fr neue HTML-Dokumente, die in
Dreamweaver erstellt werden, verwendet werden soll. Auf Windows-Systemen knnen Sie die folgenden Erweiterungen festlegen: .html, .htm, .shtml, .shtm, .stm, .tpl, .lasso, .xhtml. Auf Macintosh-Systemen knnen Sie die folgenden Erweiterungen festlegen: .html, .htm, .shtml, .shtm, .tpl, .lasso, .xhtml, .ssi.
Hinweis: Falls noch nicht geschehen, empfiehlt es sich, zu ffnende und zu bearbeitende Dateien in einer DreamweaverSite anzuordnen, anstatt sie von einer anderen Stelle aus zu ffnen.
3 Klicken Sie auf ffnen.
Das Dokument wird im Dokumentfenster geffnet. JavaScript-, Text- und CSS-Dateien werden standardmig in der Codeansicht geffnet. Sie knnen das Dokument whrend Ihrer Arbeit in Dreamweaver aktualisieren und die nderungen in der Datei speichern.
Verwandte Themen
Code optimieren auf Seite 345 Externe Editoren fr Multimedia-Dateien starten auf Seite 275 Mit Dateien im Bedienfeld Dateien arbeiten auf Seite 81
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 73
Dateien erstellen und verwalten
Client-Skriptdateien Server-Side Includes Spry-Datensatzquellen (XML und HTML) Externe CSS-Stylesheets (einschlielich verschachtelter Stylesheets)
Ein Video des Dreamweaver-Entwicklungsteams mit einem berblick ber die Verwendung zugehriger Dateien finden Sie unter www.adobe.com/go/dw10relatedfiles_de. Ein Video-Tutorial zum Verwenden der Live-Ansicht sowie zu zugehrigen Dateien und zum Code-Navigator finden Sie unter www.adobe.com/go/lrvid4044_dw_de.
Klicken Sie oben im Dokument in der Symbolleiste Zugehrige Dateien auf den Dateinamen der zugehrigen
Datei, die Sie ffnen mchten.
Klicken Sie in der Symbolleiste Zugehrige Dateien mit der rechten Maustaste auf den Dateinamen der
zugehrigen Datei, die Sie ffnen mchten, und whlen Sie dann im Kontextmen die Option Als separate Datei ffnen aus. Wenn Sie eine zugehrige Datei auf diese Weise ffnen, bleibt das Hauptdokument nicht gleichzeitig sichtbar.
Code-Navigator zu ffnen.
3 Bewegen Sie den Mauszeiger ber die Elemente im Code-Navigator, um weitere Informationen zu diesen
Elementen anzuzeigen. Wenn Sie beispielsweise eine bestimmte CSS-Farbeigenschaft ndern mchten, jedoch die entsprechende Regel nicht kennen, knnen Sie die Eigenschaft suchen, indem Sie den Mauszeiger ber die verfgbaren Regeln im Code-Navigator bewegen.
4 Klicken Sie auf das gewnschte Element, um die entsprechende zugehrige Datei zu ffnen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 74
Dateien erstellen und verwalten
Wenn Sie eine zugehrige Datei in der Entwurfsansicht oder in der Code- und Entwurfsansicht (geteilte Ansicht)
ffnen, wird die zugehrige Datei oberhalb der Entwurfsansicht des Hauptfensters in einer geteilten Ansicht angezeigt. Sie knnen Ansicht > Entwurfsansicht oben auswhlen, wenn die zugehrige Datei stattdessen im Dokumentfenster unten angezeigt werden soll.
Wenn Sie eine zugehrige Datei in der vertikal geteilten Code- und Entwurfsansicht (Ansicht > Vertikal teilen)
ffnen, wird die zugehrige Datei neben der Entwurfsansicht des Hauptfensters in einer geteilten Ansicht angezeigt. Sie knnen abhngig von der gewnschten Position der Entwurfsansicht Entwurfsansicht links (Ansicht > Entwurfsansicht links) auswhlen oder die Auswahl aufheben.
Wenn Sie eine zugehrige Datei in der geteilten Codeansicht (Ansicht > Geteilte Codeansicht) oder in der
vertikal geteilten Codeansicht (Ansicht > Vertikal teilen) ffnen, wird die zugehrige Datei abhngig von den ausgewhlten Optionen in einer geteilten Ansicht unter, ber oder neben dem Quellcode des Hauptdokuments angezeigt. Die Codeansicht in der Anzeigeoption bezieht sich auf den Quellcode des Hauptdokuments. Wenn Sie beispielsweise Ansicht > Codeansicht oben auswhlen, wird der Quellcode des Hauptdokuments in Dreamweaver in der oberen Hlfte des Dokumentfensters angezeigt. Wenn Sie Ansicht > Codeansicht links auswhlen, wird der Quellcode des Hauptdokuments im linken Bereich des Dokumentfensters angezeigt.
In der Standardcodeansicht knnen Sie zugehrige Dokumente nicht gleichzeitig mit dem Quellcode des
Hauptdokuments anzeigen.
(Macintosh) aus.
2 Heben Sie in der Kategorie Allgemein die Auswahl von Zugehrige Dateien aktivieren auf.
Verwandte Themen
Zwischen Ansichten im Dokumentfenster umschalten auf Seite 18 Zu zugehrigem Code navigieren auf Seite 336 Seitenvorschau in Dreamweaver auf Seite 307 Tutorial zu zugehrigen Dateien
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 75
Dateien erstellen und verwalten
Zur Verwendung der Funktion Dynamisch zugehrige Dateien mssen Sie Zugriff auf einen lokalen oder RemotePHP-Anwendungsserver haben, auf dem WordPress, Drupal oder Joomla! ausgefhrt wird. Eine gngige Methode zum Testen von Seiten besteht darin, einen localhost-PHP-Anwendungsserver einzurichten und die Seiten lokal zu testen. Vor dem Testen von Seiten mssen Sie die folgenden Schritte ausfhren:
Richten Sie eine Dreamweaver-Site ein. Stellen Sie dabei sicher, dass das Textfeld Web-URL im Dialogfeld SiteDefinition ausgefllt ist.
WordPress-Installation Drupal-Installation Joomla!- Installation Definieren Sie in Dreamweaver einen lokalen Ordner, in den Sie die CMS-Dateien herunterladen und in dem Sie
sie bearbeiten.
Definieren Sie das Verzeichnis der installierten WordPress-, Drupal- oder Joomla!- Dateien als Remote- und
Testordner.
aus.
2 Stellen Sie sicher, dass in der Kategorie Allgemein die Option Zugehrige Dateien aktivieren ausgewhlt ist. 3 Whlen Sie im Popupmen Dynamisch zugehrige Dateien die Option Manuell oder Automatisch aus.
Durch Auswhlen von Deaktiviert knnen Sie zudem die Suche insgesamt deaktivieren.
festgelegt ist, klicken Sie auf den Hyperlink fr die Suche in der Statusleiste, die ber der Seite im Dokumentfenster angezeigt wird. Wenn die Suche nach dynamisch zugehrigen Dateien automatisch aktiviert ist, wird auf der Symbolleiste Zugehrige Dateien eine Liste mit dynamisch zugehrigen Dateien angezeigt.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 76
Dateien erstellen und verwalten
Die zugehrigen und dynamisch zugehrigen Dateien auf der Symbolleiste Zugehrige Dateien sind in der folgenden Reihenfolge aufgefhrt:
statische zugehrige Dateien (d. h. zugehrige Dateien, die keiner dynamischen Verarbeitung bedrfen) externe zugehrige Dateien (d. h. .css- und .js-Dateien), die Server-Include-Dateien mit dynamischen Pfaden
zugeordnet sind
whlen Sie Eigener Filter aus. Im Dialogfeld Eigener Filter knnen nur exakte Dateinamen (style.css), Dateierweiterungen (.php) und Platzhalterausdrcke mit Sternchen (*menu*) gefiltert werden. Sie knnen nach mehreren Platzhalterausdrcken filtern, indem Sie die einzelnen Ausdrcke jeweils durch ein Semikolon trennen (z. B. style.css;*.js;*tpl.php). Hinweis: Filtereinstellungen werden nach dem Schlieen der Datei nicht beibehalten.
Hinweis: Auf Windows-Systemen sollten Sie nun die Datei in Word schlieen, um zu verhindern, dass es zu einer Zugriffsverletzung kommt.
2 ffnen Sie die HTML-Datei in Dreamweaver.
Wechseln Sie in die Codeansicht (Ansicht > Code), um den von Word erzeugten HTML-Code anzuzeigen.
3 Whlen Sie Befehle > Word-HTML optimieren.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 77
Dateien erstellen und verwalten
Hinweis: Wenn Dreamweaver die Word-Version, in der die Datei gespeichert worden ist, nicht bestimmen kann, whlen Sie die richtige Version aus dem Popupmen aus.
4 Aktivieren bzw. deaktivieren Sie die Optionen fr die Optimierung. Die Voreinstellungen, die Sie hier vornehmen,
werden als Standardoptimierungseinstellungen verwendet. Dreamweaver wendet die Optimierungseinstellungen auf das HTML-Dokument an und blendet ein nderungsprotokoll ein (sofern diese Option nicht im Dialogfeld deaktiviert wurde).
Alle Word-spezifischen Markierungen entfernen entfernt den gesamten Microsoft Word-spezifischen HTML-Code, einschlielich XML von HTML-Tags, Word-spezifischer Metadaten und Link-Tags im head-Bereich des Dokuments, Word-XML-Markup, bedingter Tags und deren Inhalt sowie leerer Abstze und Randdefinitionen aus Stilen. Auf der Registerkarte Detailliert knnen Sie die obigen Optionen einzeln auswhlen. CSS optimieren entfernt alle Word-spezifischen CSS-Elemente, einschlielich Inline-CSS-Stile, wenn zulssig (dabei hat der bergeordnete Stil die gleichen Stileigenschaften), Stilattribute, die mit mso beginnen, alle Stildeklarationen, die nicht CSS entsprechen, alle CSS-Stile aus Tabellen sowie alle nicht benutzten Stildefinitionen aus dem HeadBereich. Sie knnen diese Optionen auf der Registerkarte Detailliert genau festlegen. <font>-Tags optimieren entfernt HTML-Tags und wandelt den Standardtextkrper in HTML-Text der Gre 2 um. Ungltig verschachtelte Tags korrigieren entfernt die Font-Tags, die Word auerhalb der Absatz- und berschriften-
Voreinstellungen fr das HTML-Format und in der Datei SourceFormat.txt angeben, auf das Dokument an.
Protokoll nach Abschluss zeigen zeigt abschlieend ein Meldungsfeld an, in dem die nderungen aufgefhrt werden,
spezifischen Markierungen entfernen und CSS optimieren weiter angepasst werden sollen, und klicken Sie danach auf OK.
Verwandte Themen
Code optimieren auf Seite 345 Microsoft Office-Dokumente importieren (nur Windows) auf Seite 241
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 78
Dateien erstellen und verwalten
Sites, einen Server und lokale Laufwerke aufrufen Dateien und Ordner anzeigen Dateien und Ordner im Bedienfeld Dateien verwalten
Whlen Sie bei Dreamweaver-Sites die folgenden Optionen aus, um Dateien anzuzeigen oder zu bertragen:
Optionen im erweiterten Bedienfeld Dateien A: Site-Popupmen B: Verbinden/Trennen C: Aktualisieren D: FTP-Protokoll der Site anzeigen E: Ansicht der Site-Dateien F: Testserver G: Repository-Ansicht H: Datei(en) abrufen I: Datei(en) bereitstellen J: Datei(en) auschecken K: Datei(en) einchecken L: Synchronisieren M: Erweitern/Reduzieren
Hinweis: Die Ansicht Site-Dateien, die Ansicht Testserver und die Schaltflchen fr Synchronisieren werden nur im erweiterten Bedienfeld Dateien angezeigt.
Site-Popupmen Ermglicht die Auswahl einer Dreamweaver-Site und zeigt die Dateien auf dieser Site an. Das SiteMen ermglicht auch den Zugriff auf alle Dateien auf Ihrer lokalen Festplatte hnlich wie der Windows Explorer (Windows) bzw. der Finder (Macintosh). Verbinden/Trennen (FTP, RDS und WebDAV-Protokoll) Stellt eine Verbindung mit der Remote-Site her oder trennt
die Verbindung. Standardmig trennt Dreamweaver die Verbindung zur Remote-Site, wenn nach 30 Minuten keine Bewegungen festgestellt wurden (nur bei FTP). Wenn Sie das Zeitlimit ndern mchten, whlen Sie Bearbeiten > Voreinstellungen (Windows) oder Dreamweaver > Voreinstellungen (Macintosh) und anschlieend in der Kategorieliste links die Option Site.
Aktualisieren Aktualisiert die Verzeichnislisten der lokalen und der Remote-Site. Mit dieser Schaltflche knnen Sie die Verzeichnislisten manuell aktualisieren, wenn Sie im Dialogfeld Site-Definition die Option Liste mit lokalen Dateien automatisch aktualisieren oder Liste mit Remote-Dateien automatisch aktualisieren deaktiviert haben. Ansicht der Site-Dateien Zeigt die Dateistruktur der Remote-Site und der lokalen Site in den zwei Fensterbereichen des Bedienfelds Dateien an. (Mit einer Voreinstellung knnen Sie festlegen, welche Site im linken und welche Site im rechten Fensterbereich angezeigt wird.) Die Ansicht der Site-Dateien ist die Standardansicht fr das Bedienfeld Dateien. Testserver-Ansicht Zeigt die Verzeichnisstruktur des Testservers und der lokalen Site. Repository-Ansicht Zeigt das Subversion-Repository (SVN) an. Abrufen Kopiert die ausgewhlten Dateien von der Remote-Site in Ihre lokale Site (wobei eventuell vorhandene lokale Versionen der Dateien berschrieben werden). Wenn Sie das Kontrollkstchen Ein- und Auschecken von Dateien aktivieren markiert haben, sind die lokalen Kopien schreibgeschtzt und die Dateien knnen von anderen Teammitgliedern auf der Remote-Site ausgecheckt werden. Ist das Kontrollkstchen Ein- und Auschecken von Dateien aktivieren nicht markiert, werden die Dateien mit Lese- und Schreibberechtigung versehen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 79
Dateien erstellen und verwalten
Hinweis: Dreamweaver kopiert die Dateien, die Sie im aktiven Fensterbereich des Bedienfelds Dateien auswhlen. Wenn der Fensterbereich der Remote-Site aktiviert ist, werden die ausgewhlten Remote- oder Testserver-Dateien in die lokale Site kopiert. Ist dagegen der lokale Bereich aktiviert, kopiert Dreamweaver die in der Remote-Site oder auf dem Testserver gespeicherten Versionen der ausgewhlten lokalen Dateien in die lokale Site.
Bereitstellen Kopiert die ausgewhlten Dateien von der lokalen Site in die Remote-Site.
Hinweis: Dreamweaver kopiert die Dateien, die Sie im aktiven Fensterbereich des Bedienfelds Dateien auswhlen. Wenn der lokale Fensterbereich aktiviert ist, werden die ausgewhlten lokalen Dateien in die Remote-Site oder auf den Testserver kopiert. Ist dagegen der Bereich der Remote-Site aktiviert, kopiert Dreamweaver die lokalen Versionen der ausgewhlten Remote-Serverdateien in die Remote-Site. Wenn Sie eine noch nicht auf der Remote-Site vorhandene Datei bereitstellen und die Option Ein- und Auschecken von Dateien aktivieren markiert ist, fgt die Datei der Remote-Site als ausgecheckt hinzu. Klicken Sie auf die Schaltflche Dateien einchecken, wenn die Datei ohne den Status ausgecheckt hinzugefgt werden soll.
Auschecken bertrgt eine Kopie der Datei vom Remote-Server an die lokale Site (wobei gegebenenfalls die
vorhandene lokale Kopie der Datei berschrieben wird) und markiert die Datei auf dem Server als ausgecheckt. Diese Option ist nicht verfgbar, wenn die Option Ein- und Auschecken von Dateien aktivieren im Dialogfeld SiteDefinition fr die aktuelle Site deaktiviert ist.
Einchecken bertrgt eine Kopie der lokalen Datei an den Remote-Server und ermglicht es anderen Mitarbeitern, die Datei zu bearbeiten. Die lokale Datei wird dadurch schreibgeschtzt. Diese Option ist nicht verfgbar, wenn die Option Ein- und Auschecken von Dateien aktivieren im Dialogfeld Site-Definition fr die aktuelle Site deaktiviert ist. Synchronisieren Synchronisiert Dateien zwischen lokalen und Remote-Ordnern. Schaltflche Erweitern/Reduzieren Blendet das Bedienfeld Dateien ein bzw. aus, sodass ein bzw. zwei Teilfenster
angezeigt werden.
Verwandte Themen
berblick ber das Bedienfeld Dateien auf Seite 16 Dateien in einen Remote-Ordner einchecken und aus einem Remote-Ordner auschecken auf Seite 93 Dateien auf einem Remote-Server bereitstellen auf Seite 89 Dateien von einem Remote-Server abrufen auf Seite 88 Dateien synchronisieren auf Seite 102
Verwandte Themen
Testserver einrichten auf Seite 49
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 80
Dateien erstellen und verwalten
Erweitern/Reduzieren
Hinweis: Wenn Sie auf die Schaltflche zum Erweitern/Reduzieren klicken, um das Bedienfeld zu erweitern, whrend es angedockt ist, wird das Bedienfeld maximiert, sodass Sie nicht im Dokumentfenster arbeiten knnen. Sie knnen zum Dokumentfenster zurckkehren, indem Sie erneut auf die Schaltflche zum Erweitern/Reduzieren klicken, um das Bedienfeld zu reduzieren. Wenn Sie auf die Schaltflche zum Erweitern/Reduzieren klicken, um das Bedienfeld zu erweitern, whrend es nicht angedockt ist, knnen Sie weiterhin im Dokumentfenster arbeiten. Sie mssen das Bedienfeld reduzieren, bevor Sie es wieder andocken knnen. Wenn das Bedienfeld Dateien reduziert wurde, wird der Inhalt der lokalen Site, der Remote-Site oder des Testservers in Form einer Dateiliste angezeigt. Wenn das Bedienfeld Dateien erweitert wurde, werden die lokale Site und entweder die Remote-Site oder der Testserver angezeigt.
Ziehen Sie den Balken, der die beiden Ansichtsbereiche trennt, nach links oder rechts, um den linken bzw. rechten
Fensterbereich zu verkleinern oder zu vergrern.
Navigieren Sie mithilfe der Bildlaufleisten am unteren Rand des Bedienfelds Dateien durch den Inhalt der
Ansicht.
Whlen Sie im minimierten Bedienfeld Dateien (Fenster > Dateien) im Popupmen Site-Ansicht die
Option Lokale Ansicht, Remote-Ansicht, Testserver oder Repository-Ansicht aus. Hinweis: Als Standardeinstellung wird im Popupmen Site-Ansicht die lokale Ansicht angezeigt.
Klicken Sie im maximierten Bedienfeld Dateien (Fenster > Dateien) auf die Schaltflche Site-Dateien (fr
die Remote-Site), die Schaltflche Testserver oder die Schaltflche Repository-Dateien.
A B C
Hinweis: Eine Remote-Site, einen Testserver oder ein SVN-Repository knnen Sie erst anzeigen, nachdem Sie sie eingerichtet haben.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 81
Dateien erstellen und verwalten
Windows Explorer (Windows) bzw. vom Finder (Macintosh) her gewohnt sind.
Verwandte Themen
Dateien synchronisieren auf Seite 102 Sites, einen Server und lokale Laufwerke aufrufen auf Seite 84
Dateien ffnen
1 Whlen Sie im Bedienfeld Dateien (Fenster > Dateien) in dem Popupmen, in dem die aktuelle Site, der
aktuelle Server bzw. das aktuelle Laufwerk angezeigt wird, eine Site, einen Server oder ein Laufwerk aus.
2 Wechseln Sie zu der gewnschten Datei, die Sie ffnen mchten. 3 Fhren Sie einen der folgenden Schritte aus:
Doppelklicken Sie auf das Symbol der jeweiligen Datei. Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste (Macintosh) auf das Symbol der
Datei und whlen Sie dann ffnen. Dreamweaver ffnet die Datei im Dokumentfenster.
Dreamweaver erstellt die neue Datei bzw. den neuen Ordner im derzeit ausgewhlten Ordner oder in dem Ordner, in dem sich die ausgewhlte Datei befindet.
2 Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste (Macintosh) und whlen Sie dann
Ordner aus.
2 Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste (Macintosh) und whlen Sie dann
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 82
Dateien erstellen und verwalten
2 Fhren Sie einen der folgenden Schritte aus, um den Namen der Datei bzw. des Ordners zu aktivieren:
Klicken Sie zweimal mit einer kleinen Pause dazwischen auf den Dateinamen. Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste (Macintosh) auf das Symbol der
Datei und whlen Sie dann Bearbeiten > Umbenennen aus.
3 Geben Sie den neuen Namen ber den alten Namen ein. 4 Drcken Sie die Eingabetaste (Windows) bzw. Return (Macintosh).
Kopieren Sie die Datei bzw. den Ordner und fgen Sie sie bzw. ihn am neuen Speicherort ein. Ziehen Sie die Datei bzw. den Ordner an den neuen Speicherort.
3 Aktualisieren Sie das Bedienfeld Dateien, um die Datei bzw. den Ordner am neuen Speicherort zu sehen.
Klicken Sie mit der rechten Maustaste (Windows), bzw. bei gedrckter Ctrl-Taste (Macintosh) auf eine Datei oder
einen Ordner und whlen Sie Aktualisieren.
Nur bei Dreamweaver-Sites: Klicken Sie im Bedienfeld Dateien auf die Schaltflche Aktualisieren (dadurch
werden beide Fensterbereiche aktualisiert). Hinweis: Dreamweaver aktualisiert das Bedienfeld Dateien, wenn Sie nderungen in einer anderen Anwendung vornehmen und dann zu Dreamweaver zurckkehren.
Verwandte Themen
Berichte zum Testen von Sites verwenden auf Seite 115
Die Datei wird in Dreamweaver im Bedienfeld Dateien ausgewhlt. Hinweis: Wenn die geffnete Datei im Dokumentfenster nicht Bestandteil der aktuellen Site im Bedienfeld Dateien ist, versucht Dreamweaver festzustellen, zu welchen Dreamweaver-Sites die Datei gehrt. Wenn die aktuelle Datei nur zu einer lokalen Site gehrt, wird diese Site in Dreamweaver im Bedienfeld Dateien geffnet, und die Datei wird hervorgehoben.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 83
Dateien erstellen und verwalten
Optionen und whlen Sie dann Bearbeiten > Ausgecheckte Dateien auswhlen.
Auf lokaler Site lokalisieren oder Auf Remote-Site lokalisieren (je nachdem, wo die Datei ausgewhlt wurde). Die Datei wird in Dreamweaver im Bedienfeld Dateien ausgewhlt.
Dateien finden und auswhlen, deren lokale Version neuer ist als die Version in der RemoteSite
Klicken Sie im reduzierten Bedienfeld Dateien (Fenster > Dateien) in der oberen rechten Ecke auf das Men
Optionen und whlen Sie dann Bearbeiten > Neuere auswhlen (lokal). Dreamweaver whlt die Dateien im Bedienfeld Dateien aus.
Dateien finden und auswhlen, deren Version in der Remote-Site neuer ist als die lokale Version
Klicken Sie im reduzierten Bedienfeld Dateien (Fenster > Dateien) in der oberen rechten Ecke auf das Men
Optionen und whlen Sie dann Bearbeiten > Neuere auswhlen (entfernt). Dreamweaver whlt die Dateien im Bedienfeld Dateien aus.
Optionen und whlen Sie dann Bearbeiten > Zuletzt bearbeitete auswhlen.
2 Fhren Sie einen der folgenden Schritte aus, um Suchdaten fr die Berichterstellung anzugeben:
Zur Erstellung eines Berichts ber alle in den vergangenen Tagen genderten Dateien whlen Sie Dateien, die
erstellt oder gendert wurden, in den letzten und geben im Feld eine Zahl ein.
Zur Erstellung eines Berichts ber alle innerhalb eines bestimmten Zeitraums genderten Dateien klicken Sie auf den
Optionsschalter Dateien, die erstellt oder gendert wurden, zwischen und geben dann einen Datumsbereich ein.
3 Optional: Geben Sie im Feld Gendert von einen Benutzernamen ein, um die Suche auf Dateien zu beschrnken,
die von einem bestimmten Benutzer im angegebenen Datumsbereich gendert wurden. Hinweis: Diese Option ist nur fr Berichte auf Contribute-Sites verfgbar.
4 Whlen Sie bei Bedarf einen Optionsschalter, um anzugeben, wo die im Bericht enthaltenen Dateien angezeigt
werden sollen:
Lokales System, wenn die Site statische Seiten enthlt. Testserver, wenn die Site dynamische Seiten enthlt.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 84
Dateien erstellen und verwalten
Hinweis: Bei dieser Option wird vorausgesetzt, dass im Dialogfeld Site-Definition ein Testserver definiert wurde (XREF). Wenn Sie ein URL-Prfix fr einen Testserver eingeben, der nicht definiert wurde, oder wenn Sie einen Bericht fr mehr als eine Site ausfhren, ist diese Option nicht verfgbar.
Anderes Speicherverzeichnis, wenn Sie im Textfeld einen Pfad eingeben mchten.
Dreamweaver berprft alle Hyperlinks in der Site und listet fehlerhafte Hyperlinks im Bedienfeld Ergebnisse auf.
2 Whlen Sie im Popupmen des Bedienfelds Hyperlink-Prfer die Option Verwaiste Dateien aus.
Dreamweaver zeigt alle Dateien an, zu denen es keine eingehenden Hyperlinks gibt, d. h., dass keine Dateien in Ihrer Seite mit diesen Dateien verknpft sind.
3 Whlen Sie die zu lschenden Dateien aus und drcken Sie die Entf-Taste (Windows) bzw. Befehl+Lschen
(Macintosh). Wichtig: Auch wenn es in Ihrer Site keine Dateien gibt, die mit diesen Dateien verknpft sind, knnen die aufgefhrten Dateien trotzdem mit anderen Dateien verknpft sein. Gehen Sie daher beim Lschen der Dateien vorsichtig vor.
Verwandte Themen
Site-Cloaking aktivieren und deaktivieren auf Seite 108
aktuelle Server bzw. das aktuelle Laufwerk angezeigt wird, eine Site aus.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 85
Dateien erstellen und verwalten
aktuelle Server bzw. das aktuelle Laufwerk angezeigt wird, einen Server aus.
Hinweis: Fr alle Server, die Sie fr den Betrieb mit Dreamweaver konfiguriert haben, werden die Servernamen angezeigt.
2 Wechseln Sie wie gewohnt zu der gewnschten Datei und bearbeiten Sie diese.
Server bzw. das aktuelle Laufwerk angezeigt werden, die Option Desktop, Lokaler Datentrger oder CDLaufwerk.
2 Wechseln Sie zur gewnschten Datei. Danach stehen folgende Mglichkeiten zur Verfgung:
Dateien in Dreamweaver oder in anderen Anwendungen ffnen Dateien umbenennen Dateien kopieren Dateien lschen Dateien ziehen
Wenn Sie eine Datei von einer Dreamweaver-Site in eine andere oder in einen Ordner ziehen, der nicht zu einer Dreamweaver-Site gehrt, wird die gezogene Datei von Dreamweaver an den Speicherort, an dem Sie die Datei ablegen, kopiert. Wenn Sie eine Datei hingegen innerhalb derselben Dreamweaver-Site an einen anderen Ort ziehen, wird die Datei von Dreamweaver an den neuen Speicherort verschoben. Wenn Sie eine Datei, die nicht zu einer Dreamweaver-Site gehrt, in einen anderen Ordner ziehen, der ebenfalls nicht zu einer Dreamweaver-Site gehrt, wird die Datei von Dreamweaver an den neuen Speicherort verschoben. Hinweis: Um eine Datei zu verschieben, die von Dreamweaver standardmig kopiert wird, halten Sie beim Ziehen die Umschalttaste (Windows) bzw. die Befehlstaste (Macintosh) gedrckt. Um eine Datei zu kopieren, die von Dreamweaver standardmig verschoben wird, halten Sie beim Ziehen die Strg-Taste (Windows) bzw. die Wahltaste (Macintosh) gedrckt.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 86
Dateien erstellen und verwalten
Zum Anpassen von Spalten gibt es die folgenden Mglichkeiten (manche Vorgnge sind nur auf hinzugefgte Spalten und nicht auf Standardspalten anwendbar):
Spalten neu ordnen oder neu ausrichten Neue Spalten hinzufgen (maximal 10 Spalten sind mglich) Spalten ausblenden (auer Spalte Dateiname) Spalten fr die gemeinsame Nutzung durch alle mit der Site verbundenen Benutzer zugnglich machen Spalten lschen (nur benutzerdefinierte Spalten) Spalten umbenennen (nur benutzerdefinierte Spalten) Mit einer Design Note verknpfen (nur benutzerdefinierte Spalten)
Spaltenreihenfolge ndern
Whlen Sie einen Spaltennamen aus und klicken Sie dann auf den Aufwrts- oder Abwrtspfeil, um die Position
der ausgewhlten Spalte zu ndern. Hinweis: Sie knnen die Reihenfolge aller Spalten ndern, mit Ausnahme der Spalte Name. Diese Spalte befindet sich stets am Anfang.
Minuszeichen (), um eine Spalte zu lschen. Hinweis: Die Spalte wird sofort und ohne Rckfrage gelscht. Vergewissern Sie sich deshalb vor dem Klicken auf das Minuszeichen (), dass Sie die Spalte wirklich lschen mchten.
5 Geben Sie im Feld Spaltenname einen Namen fr die Spalte ein. 6 Whlen Sie im Men Mit Design Notes verknpfen einen Wert aus oder geben Sie einen Wert ein.
Hinweis: Sie mssen eine neue Spalte mit einer Design Note verknpfen, damit Daten vorhanden sind, die im Bedienfeld Dateien angezeigt werden knnen.
7 Whlen Sie eine Ausrichtungsoption, um festzulegen, wie Text innerhalb der Spalte ausgerichtet wird. 8 Aktivieren oder deaktivieren Sie die Option Anzeigen, um die Spalte ein- oder auszublenden. 9 Aktivieren Sie die Option An alle Benutzer dieser Site freigeben, damit alle Benutzer, die mit der Remote-Site
Klicken Sie erneut auf die berschrift, um die Reihenfolge (aufsteigend oder absteigend) umzukehren, in der Dreamweaver die Spalteneintrge sortiert.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 87
Dateien erstellen und verwalten
Verwandte Themen
Dateien ein- und auschecken auf Seite 92 Site-Cloaking aktivieren und deaktivieren auf Seite 108
Dateibertragung im Hintergrund
Sie knnen sich beim Bereitstellen oder Abrufen von Dateien anderen Aktivitten zuwenden, die vom Server unabhngig sind. Die Dateibertragung im Hintergrund ist bei allen von Dreamweaver untersttzten bertragungsprotokollen mglich: FTP, SFTP, LAN, WebDAV, Subversion und RDS. Zu den serverunabhngigen Aktivitten gehren das Bedienen der Tastatur, Bearbeiten externer Stylesheets, Erzeugen von Berichten fr die ganze Site und Erstellen neuer Sites. Dreamweaver kann die folgenden serverbezogenen Aktionen nicht ausfhren, whrend Dateien bertragen werden:
Dateien bereitstellen, abrufen, ein- und auschecken Auschecken rckgngig machen Datenbankverbindung erstellen Dynamische Daten binden Seitenvorschau in der Live-Ansicht Webdienst einfgen Remote-Dateien oder -Ordner lschen Vorschau in einem Browser auf einem Testserver anzeigen Dateien auf einem Remote-Server speichern
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 88
Dateien erstellen und verwalten
Bilder von einem Remote-Server einfgen Dateien von einem Remote-Server ffnen Dateien beim Speichern automatisch bereitstellen Dateien zur Remote-Site ziehen Dateien auf der Remote-Site ausschneiden, kopieren oder einfgen Remote-Ansicht aktualisieren
Das Dialogfeld Dateivorgang im Hintergrund ist bei Dateibertragungen standardmig geffnet. Sie knnen das Dialogfeld minimieren, indem Sie in der rechten oberen Ecke auf die Schaltflche Minimieren klicken. Wenn Sie das Dialogfeld whrend einer Dateibertragung schlieen, wird die bertragung abgebrochen.
Verwandte Themen
Dateien ein- und auschecken auf Seite 92 Dateien synchronisieren auf Seite 102
Normalerweise whlen Sie diese Dateien in der Remote-Ansicht aus, Sie knnen sie aber auch in der lokalen Ansicht auswhlen. Wenn die Remote-Ansicht aktiviert ist, kopiert Dreamweaver die ausgewhlten Remote-Dateien in die lokale Site. Ist dagegen die lokale Ansicht aktiviert, kopiert Dreamweaver die Remote-Versionen der ausgewhlten lokalen Dateien in die lokale Site. Hinweis: Verwenden Sie den Befehl Synchronisieren, um nur die Dateien abzurufen, deren Remote-Version aktueller als die lokale Version ist.
2 Fhren Sie einen der folgenden Schritte aus, um die Dateien abzurufen:
Klicken Sie in der Symbolleiste des Bedienfelds Dateien auf die Schaltflche Abrufen. Klicken Sie im Bedienfeld Dateien mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste
(Macintosh) auf die Datei und whlen Sie dann im Kontextmen die Option Abrufen.
3 Klicken Sie im Dialogfeld Abhngige Dateien auf Ja, um abhngige Dateien herunterzuladen. Wenn Sie bereits
Kopien der abhngigen Dateien besitzen, klicken Sie auf Nein. Standard ist, die abhngigen Dateien nicht herunterzuladen. Sie knnen diese Option unter Bearbeiten > Voreinstellungen > Site festlegen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 89
Dateien erstellen und verwalten
Wenn Sie das Eincheck-/Auschecksystem verwenden, erhalten Sie beim Abrufen eine schreibgeschtzte lokale
Kopie der Datei. Die Datei verbleibt in der Remote-Site bzw. auf dem Testserver und kann von anderen Teammitgliedern ausgecheckt werden.
Wenn Sie das Ein- und Auschecksystem nicht verwenden, erhalten Sie beim Abrufen der Datei eine Kopie mit Leseund Schreibberechtigung. Hinweis: Wenn Sie in einem Team arbeiten, d. h., wenn andere Mitarbeiter an denselben Dateien arbeiten, sollten Sie das Kontrollkstchen Ein- und Auschecken von Dateien aktivieren nicht deaktivieren. Wenn andere Personen das Eincheck-/Auschecksystem fr die Site verwenden, sollten auch Sie dieses System nutzen. Sie knnen die Dateibertragung jederzeit beenden, indem Sie im Dialogfeld Dateivorgang im Hintergrund auf die Schaltflche Abbrechen klicken.
Whlen Sie Site > Abrufen. Klicken Sie in der Symbolleiste des Dokumentfensters auf das Symbol fr die Dateiverwaltung, und whlen Sie
dann im Men die Option Abrufen. Hinweis: Wenn die aktuelle Datei kein Bestandteil der aktuellen Site im Bedienfeld Dateien ist, versucht Dreamweaver festzustellen, zu welcher lokal definierten Site die aktuelle Datei gehrt. Wenn die aktuelle Datei nur zu einer lokalen Site gehrt, ffnet Dreamweaver diese Site und ruft die Datei dann ab.
FTP-Protokoll anzeigen
1 Klicken Sie auf das Men Optionen in der oberen rechten Ecke des Bedienfelds Dateien. 2 Whlen Sie Ansicht > Site-FTP-Protokoll aus.
Hinweis: Klicken Sie im erweiterten Bedienfeld Dateien auf die Schaltflche FTP-Protokoll, um das Protokoll anzuzeigen.
Wenn Sie nicht in einem Team arbeiten und das Eincheck-/Auschecksystem nicht verwenden. Wenn Sie die aktuelle Version der Datei auf dem Server bereitstellen, die Datei aber noch weiter bearbeiten
mchten. Hinweis: Wenn Sie eine Datei bereitstellen, die noch nicht in der Remote-Site vorhanden war, und das Eincheck/Auschecksystem aktiviert ist, wird die Datei in die Remote-Site kopiert und dann fr Sie ausgecheckt, damit Sie die Datei weiter bearbeiten knnen. Sie knnen Dateien im Bedienfeld Dateien oder im Dokumentfenster bereitstellen. Dreamweaver erstellt ein Protokoll der Dateivorgnge, die whrend der bertragung stattgefunden haben und die Sie anzeigen und speichern knnen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 90
Dateien erstellen und verwalten
Hinweis: Die Dateibertragung im Hintergrund kann nicht abgeschaltet werden. Wenn das bertragungsprotokoll im Dialogfeld Dateivorgang im Hintergrund geffnet ist, knnen Sie es schlieen, um so die bertragungsleistung zu verbessern. Dreamweaver zeichnet auch alle FTP-Dateibertragungen auf. Tritt bei einer Dateibertragung per FTP ein Fehler auf, knnen Sie mit dem Site-FTP-Protokoll die Problemursache ermitteln. Ein Tutorial zum Bereitstellen von Dateien auf einem Remote-Server finden Sie unter www.adobe.com/go/vid0163_de. Ein Tutorial zum Lsen von Problemen mit der Verffentlichung finden Sie unter www.adobe.com/go/vid0164_de.
Verwandte Themen
Dateien synchronisieren auf Seite 102 Eincheck-/Auschecksystem auf Seite 92 Tutorial Bereitstellen von Dateien Tutorial Probleme mit der Verffentlichung beheben
Dateien ber das Bedienfeld Dateien auf einem Remote- oder Testserver bereitstellen
1 Whlen Sie im Bedienfeld Dateien (Fenster > Dateien) die hochzuladenden Dateien aus.
In der Regel whlen Sie diese Dateien in der lokalen Ansicht aus, Sie knnen die entsprechenden Dateien jedoch auch in der Remote-Ansicht auswhlen. Hinweis: Sie knnen nur die Dateien bereitstellen, deren lokale Version aktueller ist als die Remote-Version.
2 Fhren Sie einen der folgenden Schritte aus, um die Datei auf dem Remote-Server bereitzustellen:
Klicken Sie in der Symbolleiste des Bedienfelds Dateien auf die Schaltflche Bereitstellen. Klicken Sie im Bedienfeld Dateien mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste
(Macintosh) auf die Datei und whlen Sie dann im Kontextmen die Option Bereitstellen.
3 Wurde die Datei nicht gespeichert, wird (je nach Voreinstellungen in der Kategorie Site des Dialogfelds
Voreinstellungen) ein Dialogfeld angezeigt, in dem Sie die Datei speichern knnen, bevor Sie sie auf dem Remote-Server bereitstellen. Wenn ein Dialogfeld angezeigt wird, klicken Sie auf Ja, um die Datei zu speichern, bzw. auf Nein, um die zuvor gespeicherte Version auf dem Remote-Server bereitzustellen. Hinweis: Wenn Sie die Datei nicht speichern, werden nderungen, die Sie seit dem letzten Speichern vorgenommen haben, nicht auf dem Remote-Server bereitgestellt. Die Datei bleibt jedoch weiterhin geffnet, sodass Sie gegebenenfalls die nderungen speichern knnen, nachdem Sie die Datei auf dem Server bereitgestellt haben.
4 Klicken Sie auf Ja, um abhngige Dateien zusammen mit den ausgewhlten Dateien hochzuladen, oder klicken
Sie auf Nein, wenn Sie keine abhngigen Dateien hochladen mchten. Standard ist, die abhngigen Dateien nicht hochzuladen. Sie knnen diese Option unter Bearbeiten > Voreinstellungen > Site festlegen. Hinweis: Beim Einchecken einer neuen Datei empfiehlt es sich in der Regel, auch die abhngigen Dateien auf den Server hochzuladen. Wenn sich die neuesten Versionen der abhngigen Dateien jedoch bereits auf dem Remote-Server befinden, mssen sie nicht erneut hochgeladen werden. Sie knnen die Dateibertragung jederzeit beenden, indem Sie im Dialogfeld Dateivorgang im Hintergrund auf die Schaltflche Abbrechen klicken.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 91
Dateien erstellen und verwalten
Whlen Sie Site > Bereitstellen. Klicken Sie in der Symbolleiste des Dokumentfensters auf das Symbol fr die Dateiverwaltung und whlen Sie dann
im Men die Option Bereitstellen. Hinweis: Wenn die aktuelle Datei kein Bestandteil der aktuellen Site im Bedienfeld Dateien ist, versucht Dreamweaver festzustellen, zu welcher lokal definierten Site die aktuelle Datei gehrt. Wenn die aktuelle Datei nur zu einer lokalen Site gehrt, ffnet Dreamweaver diese Site und stellt die Datei dann bereit.
FTP-Protokoll anzeigen
1 Klicken Sie auf das Men Optionen in der oberen rechten Ecke des Bedienfelds Dateien. 2 Whlen Sie Ansicht > Site-FTP-Protokoll aus.
Hinweis: Klicken Sie im erweiterten Bedienfeld Dateien auf die Schaltflche FTP-Protokoll, um das Protokoll anzuzeigen.
Dateibertragungen verwalten
Sie knnen den Status von Dateibertragungen sowie eine Liste der bertragenen Dateien und das Ergebnis ihrer bertragung (bertragung erfolgreich, bersprungen oder fehlgeschlagen) anzeigen. Auerdem knnen Sie ein Protokoll der Dateivorgnge speichern. Hinweis: In Dreamweaver knnen Sie sich beim bertragen von Dateien an oder von einem Server anderen Aktivitten zuwenden, die vom Server unabhngig sind.
Dateibertragungen abbrechen
Klicken Sie im Dialogfeld Dateivorgang im Hintergrund auf die Schaltflche Abbrechen. Wenn das Dialogfeld
nicht angezeigt wird, klicken Sie unten im Bedienfeld Dateien auf die Schaltflche Dateivorgang.
Hinweis: Die Schaltflche Protokoll lsst sich nicht ausblenden oder entfernen. Sie ist ein permanenter Bestandteil des Bedienfelds.
Hintergrund zu ffnen.
2 Klicken Sie auf den Erweiterungspfeil neben Details.
Hintergrund zu ffnen.
2 Klicken Sie auf die Schaltflche Protokoll speichern und speichern Sie die Informationen als Textdatei.
Sie knnen die Dateivorgnge prfen, indem Sie die Protokolldatei in Dreamweaver oder in einem Texteditor ffnen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 92
Dateien erstellen und verwalten
Verwandte Themen
Dateien vom Server abrufen/auf dem Server bereitstellen auf Seite 87
Eincheck-/Auschecksystem einrichten
Bevor Sie das Eincheck-/Auschecksystem verwenden knnen, mssen Sie die lokale Site zunchst einem RemoteServer zuordnen.
1 Whlen Sie Site > Sites verwalten. 2 Whlen Sie eine Site aus und klicken Sie auf Bearbeiten. 3 Whlen Sie im Dialogfeld Site-Definition die Kategorie Server aus und fhren Sie einen der folgenden Schritte aus:
Klicken Sie auf die Schaltflche Neuen Server hinzufgen, um einen neuen Server hinzuzufgen. Whlen Sie einen vorhandenen Server aus und klicken Sie auf die Schaltflche Vorhandenen Server bearbeiten.
4 Whlen Sie die gewnschten Grundeinstellungen aus und klicken Sie dann auf die Schaltflche Erweitert. 5 Whlen Sie Datei-Auschecken aktivieren aus, wenn Sie mit mehreren Personen (oder allein, jedoch mit
mehreren Computern) arbeiten. Deaktivieren Sie diese Option, wenn fr Ihre Website das Ein- und Auschecken von Dateien nicht bentigt wird. Mit dieser Option knnen Sie anderen Personen mitteilen, dass Sie eine Datei zur Bearbeitung ausgecheckt haben. Weiterhin kann diese Option Sie darauf hinweisen, dass Sie eine neuere Version derselben Datei auf einem anderen Computer gespeichert haben.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 93
Dateien erstellen und verwalten
Wenn die Optionen fr das Ein- und Auschecken nicht angezeigt werden, bedeutet das, dass Sie noch keinen RemoteServer eingerichtet haben.
6 Wenn Sie das Kontrollkstchen Dateien beim ffnen auschecken aktivieren, werden Dateien automatisch
ausgecheckt, wenn Sie sie im Bedienfeld Dateien durch Doppelklicken ffnen. Wenn Sie mit Datei > ffnen eine Datei ffnen, wird diese Datei nicht ausgecheckt, selbst wenn die oben genannte Option aktiviert ist.
7 Legen Sie die restlichen Optionen fest:
Name auschecken Der Auscheck-Name wird im Bedienfeld Dateien neben den ausgecheckten Dateien angezeigt.
So knnen Teammitglieder sich mit der richtigen Person in Verbindung setzen, wenn eine Datei, die sie bentigen, ausgecheckt wurde. Hinweis: Wenn Sie allein an einer Website arbeiten, aber mehrere Computer verwenden, whlen Sie fr jeden Computer einen anderen Auscheck-Namen (beispielsweise AnnaR-HeimMac und AnnaR-BroPC). So knnen Sie stets feststellen, auf welchem Computer sich die neueste Version einer Datei befindet, falls Sie vergessen haben, die Datei wieder einzuchecken.
E-Mail-Adresse Wenn Sie eine E-Mail-Adresse eingeben und dann eine Datei auschecken, wird Ihr Name im
Bedienfeld Dateien neben dieser Datei als Hyperlink angezeigt (blau und unterstrichen). Klickt ein Teammitglied auf diesen Hyperlink, ffnet das Standard-E-Mail-Programm des Teammitglieds automatisch eine neue Nachricht, die die E-Mail-Adresse des Benutzers enthlt. Die Betreffzeile dieser Nachricht entspricht dem Datei- und Site-Namen.
werden sollen. Hinweis: Sie knnen Dateien in der lokalen Ansicht oder in der Remote-Ansicht auswhlen, nicht jedoch in der Testserver-Ansicht. Ein rotes Hkchen kennzeichnet eine Datei, die von einem anderen Teammitglied ausgecheckt wurde. Ein Sperrsymbol bedeutet, dass die Datei schreibgeschtzt (Windows) bzw. gesperrt ist (Macintosh).
2 Fhren Sie einen der folgenden Schritte aus, um die Datei(en) auszuchecken:
Klicken Sie in der Symbolleiste des Bedienfelds Dateien auf die Schaltflche Auschecken. Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste (Macintosh) und whlen Sie dann
im Kontextmen die Option Auschecken.
3 Klicken im Dialogfeld Abhngige Dateien auf Ja, um abhngige Dateien zusammen mit den ausgewhlten
Dateien herunterzuladen, oder klicken Sie auf Nein, wenn Sie keine abhngigen Dateien herunterladen mchten. Standard ist, die abhngigen Dateien nicht herunterzuladen. Sie knnen diese Option unter Bearbeiten > Voreinstellungen > Site festlegen. Hinweis: Wenn Sie eine neue Datei auschecken, sollten Sie auch die abhngigen Dateien herunterladen. Wenn sich die neuesten Versionen der abhngigen Dateien bereits auf der lokalen Festplatte befinden, mssen sie jedoch nicht erneut heruntergeladen werden.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 94
Dateien erstellen und verwalten
Neben dem Symbol der lokalen Datei wird ein grnes Hkchen angezeigt, das darauf hinweist, dass Sie die Datei ausgecheckt haben. Wichtig: Wenn Sie die gerade aktive Datei auschecken, wird die aktuell geffnete Version der Datei mit der neuen ausgecheckten Version berschrieben.
Hinweis: Sie knnen Dateien in der lokalen Ansicht oder in der Remote-Ansicht auswhlen, nicht jedoch in der Testserver-Ansicht.
2 Fhren Sie einen der folgenden Schritte aus, um die Datei(en) einzuchecken:
Klicken Sie in der Symbolleiste des Bedienfelds Dateien auf die Schaltflche Einchecken. Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste (Macintosh) und whlen Sie dann
im Kontextmen die Option Einchecken.
3 Klicken Sie auf Ja, um abhngige Dateien zusammen mit den ausgewhlten Dateien hochzuladen, oder klicken
Sie auf Nein, wenn Sie keine abhngigen Dateien hochladen mchten. Standard ist, die abhngigen Dateien nicht hochzuladen. Sie knnen diese Option unter Bearbeiten > Voreinstellungen > Site festlegen. Hinweis: Wenn Sie eine neue Datei einchecken, sollten Sie auch die abhngigen Dateien an den Server bertragen. Wenn sich die neuesten Versionen der abhngigen Dateien bereits auf dem Remote-Server befinden, mssen sie jedoch nicht erneut hochgeladen werden. Neben dem Symbol der lokalen Datei wird ein Sperrsymbol angezeigt, das darauf hinweist, dass die Datei nun schreibgeschtzt ist. Wichtig: Wenn Sie die gerade aktive Datei einchecken, wird sie eventuell automatisch vor dem Einchecken gespeichert, je nachdem, welche Voreinstellungen Sie gewhlt haben.
Whlen Sie Site > Einchecken. Klicken Sie in der Symbolleiste des Dokumentfensters auf das Symbol fr die Dateiverwaltung und whlen Sie dann
im Men die Option Einchecken. Wenn die aktuelle Datei kein Bestandteil der aktiven Site im Bedienfeld Dateien ist, versucht Dreamweaver festzustellen, zu welcher lokal definierten Site die aktuelle Datei gehrt. Wenn die aktuelle Datei zu einer anderen Site als der im Bedienfeld Dateien aktiven gehrt, ffnet Dreamweaver diese andere Site und fhrt dann die EincheckOperation durch. Wichtig: Wenn Sie die gerade aktive Datei einchecken, wird sie eventuell automatisch vor dem Einchecken gespeichert, je nachdem, welche Voreinstellungen Sie gewhlt haben.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 95
Dateien erstellen und verwalten
Fhren Sie einen der folgenden Schritte aus, um das Auschecken einer Datei rckgngig machen:
ffnen Sie die Datei im Dokumentfenster und whlen Sie dann Site > Auschecken rckgngig. Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste (Macintosh) im Bedienfeld
Dateien (Fenster > Dateien) und whlen Sie dann Auschecken rckgngig. Die lokale Kopie der Datei ist nun schreibgeschtzt, und nderungen, die Sie bereits vorgenommen haben, gehen verloren.
Klicken Sie auf die Schaltflche Neuen Server hinzufgen, um einen neuen Server hinzuzufgen. Whlen Sie einen vorhandenen Server aus und klicken Sie auf die Schaltflche Vorhandenen Server bearbeiten.
4 Whlen Sie im Fenster Einfach im Popupmen Verbinden ber die Option WebDAV und alle weiteren
Geben Sie in das Feld Name auschecken einen Namen ein, an dem andere Teammitglieder Sie erkennen. Geben Sie in das Feld E-Mail-Adresse Ihre E-Mail-Adresse ein.
Anhand des Namens und der E-Mail-Adresse wird das Eigentumsrecht auf dem WebDAV-Server identifiziert, diese Angaben werden auerdem als Kontaktinformationen im Bedienfeld Dateien angezeigt.
7 Klicken Sie auf Speichern.
Dreamweaver konfiguriert die Site fr WebDAV-Zugriff. Wenn Sie den Befehl Einchecken oder Auschecken fr eine beliebige Site-Datei verwenden, wird die Datei mit WebDAV bertragen. Hinweis: Mglicherweise kann WebDAV Dateien mit dynamischen Inhalten (z. B. PHP-Tags oder SSIs) nicht ordnungsgem auschecken, da diese mit dem HTTP-Befehl GET bereits beim Auschecken dargestellt werden.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 96
Dateien erstellen und verwalten
Wichtig: Dreamweaver CS5 verwendet die Subversion-Client-Bibliothek 1.6.6. Sptere Versionen der Subversion-ClientBibliothek sind nicht abwrtskompatibel. Wenn Sie die Client-Anwendung eines Drittanbieters (z. B. TortoiseSVN) aktualisieren, damit die Anwendung mit einer spteren Version von Subversion verwendet werden kann, werden die lokalen Subversion-Metadaten von der aktualisierten Subversion-Anwendung aktualisiert. Dreamweaver kann dann keine Kommunikationsverbindung mehr mit Subversion herstellen. Aktualisierungen des Subversion-Servers sind von diesem Problem nicht betroffen, da diese Aktualisierungen abwrtskompatibel sind. Wenn Sie auf die Client-Anwendung eines Drittanbieters aktualisieren, die mit Subversion ab Version 1.7 verwendet wird, mssen Sie zunchst bei Adobe nach Aktualisierungen suchen, bevor Sie Subversion wieder mit Dreamweaver verwenden knnen. Weitere Informationen zu diesem Problem finden Sie unter www.adobe.com/go/dw_svn_de. Adobe empfiehlt beim Verwenden von mit Subversion verwalteten Dateien den Einsatz eines Drittanbieter-Tools zum Dateivergleich. Beim Vergleich von Dateien auf Unterschiede knnen Sie genau die nderungen feststellen, die andere Benutzer an den Dateien vorgenommen haben. Weitere Informationen ber Tools zum Dateivergleich finden Sie, indem Sie in einer Suchmaschine wie z. B. Google den Suchbegriff Dateivergleich eingeben. Dreamweaver funktioniert mit den meisten Drittanbieter-Tools. Ein Video mit einem berblick zur Verwendung von SVN und Dreamweaver finden Sie unter www.adobe.com/go/lrvid4049_dw_de.
SVN-Verbindung einrichten
Bevor Sie Subversion (SVN) als Versionskontrollsystem mit Dreamweaver einsetzen knnen, mssen Sie eine Verbindung mit einem SVN-Server einrichten. Dies erfolgt in der Kategorie Versionskontrolle des Dialogfelds Site-Definition. Der SVN-Server ist ein Datei-Repository, aus dem mehrere Benutzer Dateien abrufen bzw. diese darin ablegen knnen. Er unterscheidet sich von dem Remote-Server, der normalerweise fr Dreamweaver verwendet wird. Beim Einsatz von SVN ist der Remote-Server auch weiterhin der Internet-Server fr Ihre Webseiten. Die Aufgabe des SVNServers ist es hingegen, das Repository fr die Dateien aufzunehmen, fr die Sie eine Versionskontrolle durchsetzen mchten. Der bliche Arbeitsablauf ist hierbei, Dateien vom SVN-Server abzurufen und genderte Dateiversionen darin abzulegen, und die Dateien dann aus Dreamweaver heraus auf dem Remote-Server zu verffentlichen. Das Einrichten des Remote-Servers ist vollstndig unabhngig vom Einrichten des SVN-Servers. Sie bentigen Zugriff auf einen SVN-Server und ein SVN-Repository, bevor Sie mit dem Einrichten beginnen knnen. Weitere Informationen zu SVN finden Sie auf der Subversion-Website unter http://subversion.tigris.org/. Um die SVN-Verbindung einzurichten, fhren Sie die folgenden Schritte aus:
1 Whlen Sie Sites > Sites verwalten aus, markieren Sie die Site, fr die Sie eine Versionskontrolle einrichten
mchten, und klicken Sie auf die Schaltflche Bearbeiten. Hinweis: Wenn Sie fr eine Dreamweaver-Site noch keinen lokalen und keinen Remote-Ordner eingerichtet haben, mssen Sie vor dem Fortfahren zumindest eine lokale Site definieren. (Die Remote-Site ist in dieser Phase nicht erforderlich, muss jedoch spter ebenfalls eingerichtet werden, bevor Sie die Dateien im Internet verffentlichen.) Weitere Informationen hierzu finden Sie unter Dreamweaver-Sites einrichten auf Seite 39.
2 Whlen Sie im Dialogfeld Site-Definition die Kategorie Versionskontrolle aus. 3 Whlen Sie im Popupmen Zugriff die Option Subversion aus. 4 Legen Sie Zugriffsoptionen wie folgt fest:
Whlen Sie im Popupmen Protokoll das zu verwendende Protokoll aus. Verfgbare Protokolle sind
HTTP, HTTPS, SVN und SVN+SSH. Hinweis: Die Verwendung des Protokolls SVN+SSH erfordert eine spezielle Konfiguration. Weitere Informationen finden Sie unter www.adobe.com/go/learn_dw_svn_ssh_de.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 97
Dateien erstellen und verwalten
Geben Sie im Textfeld Serveradresse die Adresse fr den SVN-Server ein (normalerweise in der Form
servername.domain.com).
Geben Sie im Textfeld Repository-Pfad den Pfad zum gewnschten Repository auf dem SVN-Server an (z. B.
/svn/stammverzeichnis. Der Serveradministrator benennt das Stammverzeichnis fr das SVN-Repository.)
Optional: Wenn Sie einen vom Standardport abweichenden Serverport verwenden mchten, whlen Sie die
Option Nicht-Standard aus und geben Sie im Textfeld daneben die Portnummer ein.
Geben Sie den Benutzernamen und das Kennwort fr den SVN-Server ein.
5 Klicken Sie auf Testen, um die Verbindung zu testen, oder klicken Sie auf OK, um das Dialogfeld zu schlieen.
Klicken Sie anschlieend auf Fertig, um das Dialogfeld Sites verwalten zu schlieen. Nachdem die Verbindung mit dem Server hergestellt wurde, knnen Sie den SVN-Repository-Inhalt im Bedienfeld Dateien anzeigen. Whlen Sie dazu im Popupmen Ansicht die Option Repository-Ansicht aus oder klicken Sie im erweiterten Bedienfeld Dateien auf die Schaltflche Repository-Dateien .
Verwandte Themen
Bedienfeld Dateien verwenden auf Seite 78
Option Repository-Ansicht auswhlen, oder indem Sie im erweiterten Bedienfeld Dateien auf die Schaltflche Repository-Dateien klicken.
3 Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste (Macintosh) auf den Ordner im
SVN-Repository, den Sie bereitstellen mchten, und whlen Sie dann die Option Ordner bereitstellen aus.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 98
Dateien erstellen und verwalten
Zeigen Sie die lokalen Versionen der SVN-Dateien im Bedienfeld Dateien an, indem Sie im Popupmen
Ansicht die Option Lokale Ansicht auswhlen. (Wenn das Bedienfeld Dateien erweitert ist, wird automatisch die Lokale Ansicht angezeigt.) Klicken Sie dann mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste (Macintosh) auf die gewnschte Datei oder den gewnschten Ordner und whlen Sie die Option Versionskontrolle > Neueste Versionen abrufen aus.
Zeigen Sie die SVN-Repository-Dateien an, indem Sie im Popupmen Ansicht des Bedienfelds Dateien die
Option Repository-Ansicht auswhlen, oder indem Sie im erweiterten Bedienfeld Dateien auf die Schaltflche Repository-Dateien klicken. Klicken Sie dann mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste (Macintosh) auf die Datei bzw. den Ordner von Interesse und whlen Sie die Option Neueste Versionen abrufen aus. Hinweis: Sie knnen auch mit der rechten Maustaste auf eine Datei klicken und im Kontextmen die Option Auschecken auswhlen oder die Datei auswhlen und dann auf die Schaltflche Auschecken klicken, um die neueste Version abzurufen. Da SVN jedoch keinen Auscheck-Arbeitsablauf untersttzt, bewirkt dieser Vorgang kein Auschecken der Datei im herkmmlichen Sinn.
Dateien bernehmen
1 Stellen Sie sicher, dass Sie eine funktionierende SVN-Verbindung eingerichtet haben. 2 Fhren Sie einen der folgenden Schritte aus:
Zeigen Sie die lokalen Versionen der SVN-Dateien im Bedienfeld Dateien an, indem Sie im Popupmen
Ansicht die Option Lokale Ansicht auswhlen. (Wenn das Bedienfeld Dateien erweitert ist, wird automatisch die Lokale Ansicht angezeigt.) Markieren Sie dann die zu bernehmende Datei und klicken Sie auf die Schaltflche Einchecken.
Zeigen Sie die SVN-Repository-Dateien an, indem Sie im Popupmen Ansicht des Bedienfelds Dateien die
Option Repository-Ansicht auswhlen, oder indem Sie im erweiterten Bedienfeld Dateien auf die Schaltflche Repository-Dateien klicken. Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste (Macintosh) auf die zu bernehmende Datei und whlen Sie dann Einchecken aus.
3 berprfen Sie im Dialogfeld bernehmen die geplanten Aktionen, nehmen Sie bei Bedarf nderungen vor und
klicken Sie auf OK. Sie knnen Aktionen ndern, indem Sie die entsprechende Datei markieren und auf die Schaltflchen am unteren Rand des Dialogfelds bernehmen klicken. Es stehen zwei Optionen zur Auswahl: bernehmen oder Ignorieren. Hinweis: Ein grnes Hkchen an einer Datei im Bedienfeld Dateien weist auf eine genderte Datei hin, die noch nicht wieder ins Repository bernommen wurde.
Option Repository-Ansicht auswhlen, oder indem Sie im erweiterten Bedienfeld Dateien auf die Schaltflche Repository-Dateien klicken.
3 Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste (Macintosh) auf beliebige Dateien
oder Ordner im Repository und whlen Sie die Option Status aktualisieren aus.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 99
Dateien erstellen und verwalten
Ansicht die Option Lokale Ansicht auswhlen. (Wenn das Bedienfeld Dateien erweitert ist, wird automatisch die Lokale Ansicht angezeigt.)
3 Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste (Macintosh) auf beliebige Dateien
oder Ordner im Bedienfeld Dateien und whlen Sie die Option Status aktualisieren aus.
Dateiversionen anzeigen
1 Stellen Sie sicher, dass Sie eine funktionierende SVN-Verbindung eingerichtet haben. 2 Fhren Sie einen der folgenden Schritte aus:
Zeigen Sie die lokalen Versionen der SVN-Dateien im Bedienfeld Dateien an, indem Sie im Popupmen
Ansicht die Option Lokale Ansicht auswhlen. (Wenn das Bedienfeld Dateien erweitert ist, wird automatisch die Lokale Ansicht angezeigt.) Klicken Sie dann mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste (Macintosh) auf die Datei, deren verschiedene Versionen Sie anzeigen mchten, und whlen Sie die Option Versionskontrolle > Versionen anzeigen aus.
Zeigen Sie die SVN-Repository-Dateien an, indem Sie im Popupmen Ansicht des Bedienfelds Dateien die
Option Repository-Ansicht auswhlen, oder indem Sie im erweiterten Bedienfeld Dateien auf die Schaltflche Repository-Dateien klicken. Klicken Sie dann mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste (Macintosh) auf die Datei, deren verschiedene Versionen Sie anzeigen mchten, und whlen Sie die Option Versionen anzeigen aus.
3 Markieren Sie im Dialogfeld Versionsverlauf die gewnschten Versionen und fhren Sie einen der folgenden
Schritte aus:
Klicken Sie auf Mit lokaler Version vergleichen, um die ausgewhlte Version mit der lokalen Version der
Datei zu vergleichen. Hinweis: Sie mssen ein Drittanbieter-Tool zum Dateivergleich installieren, um Dateien vergleichen zu knnen. Weitere Informationen ber Tools zum Dateivergleich finden Sie, indem Sie in einer Suchmaschine wie z. B. Google den Suchbegriff Dateivergleich eingeben. Dreamweaver funktioniert mit den meisten DrittanbieterTools.
Klicken Sie auf Vergleichen, um zwei ausgewhlte Versionen miteinander zu vergleichen. Klicken Sie bei
gedrckter Strg-Taste auf die Versionen, um zwei Versionen gleichzeitig zu markieren.
Klicken Sie auf Anzeigen, um die ausgewhlte Version anzuzeigen. Bei dieser Aktion wird die aktuelle lokale
Kopie dieser Datei nicht berschrieben. Sie knnen die ausgewhlte Version auf der Festplatte speichern wie jede beliebige andere Datei.
Klicken Sie auf Als aktuelle Version hochstufen, um die ausgewhlte Version im Repository als neueste
Version festzulegen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 100
Dateien erstellen und verwalten
Zeigen Sie die SVN-Repository-Dateien an, indem Sie im Popupmen Ansicht des Bedienfelds Dateien die
Option Repository-Ansicht auswhlen, oder indem Sie im erweiterten Bedienfeld Dateien auf die Schaltflche Repository-Dateien klicken. Klicken Sie dann mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste (Macintosh) auf die Datei bzw. den Ordner von Interesse und whlen Sie die Option Sperren oder Entsperren aus.
Zeigen Sie die lokalen Versionen der SVN-Dateien im Bedienfeld Dateien an, indem Sie im Popupmen
Ansicht die Option Lokale Ansicht auswhlen. (Wenn das Bedienfeld Dateien erweitert ist, wird automatisch die Lokale Ansicht angezeigt.) Klicken Sie dann mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste (Macintosh) auf die gewnschte Datei oder den gewnschten Ordner und whlen Sie die Option Sperren oder Entsperren aus.
Schaltflche Einchecken.
3 Stellen Sie sicher, dass fr die Datei im Dialogfeld bernehmen die Aktion bernehmen ausgewhlt ist, und
Wenn Sie eine Datei kopieren mchten, markieren Sie sie, kopieren Sie sie (Bearbeiten > Kopieren) und fgen
Sie sie dann im neuen Speicherort ein (Bearbeiten > Einfgen). Beim Kopieren und Einfgen einer Datei wird die Datei im neuen Speicherort mit dem Symbol Mit Verlauf hinzufgen gekennzeichnet.
Wenn Sie eine Datei lschen mchten, markieren Sie sie und drcken Sie die Entf-Taste.
In Dreamweaver haben Sie die Mglichkeit, auszuwhlen, ob nur die lokale Version der Datei oder ob die lokale Version und die Version der Datei auf dem SVN-Server gelscht werden sollen. Wenn Sie festlegen, dass nur die lokale Version gelscht werden soll, hat dies keine Auswirkung auf die Datei auf dem SVN-Server. Wenn Sie festlegen, dass auch die Datei auf dem SVN-Server gelscht werden soll, wird die lokale Version der Datei mit dem Symbol Lschen gekennzeichnet und Sie mssen die Datei anwenden, damit der Lschvorgang durchgefhrt wird.
Wenn Sie eine kopierte oder verschobene Datei im ursprnglichen Speicherort wiederherstellen mchten, klicken
Sie mit der rechten Maustaste auf die Datei und whlen Sie Versionskontrolle > Wiederherstellenaus.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 101
Dateien erstellen und verwalten
Dateikonflikte lsen
Wenn zwischen Ihrer Datei und anderen Dateien auf dem Server Konflikte auftreten, knnen Sie die Datei bearbeiten und dann als Konflikt gelst kennzeichnen. Wenn Sie beispielsweise eine Datei einchecken mchten, die im Widerspruch zu nderungen eines anderen Benutzers steht, knnen Sie die Datei nicht einchecken. Sie knnen die neueste Version der Datei aus dem Repository abrufen, manuell nderungen an Ihrer Arbeitskopie vornehmen und die Datei dann als Konflikt gelst kennzeichnen, damit Sie sie einchecken knnen.
1 Stellen Sie sicher, dass Sie eine funktionierende SVN-Verbindung eingerichtet haben. 2 Zeigen Sie die lokalen Versionen der SVN-Dateien im Bedienfeld Dateien an, indem Sie im Popupmen
Ansicht die Option Lokale Ansicht auswhlen. (Wenn das Bedienfeld Dateien erweitert ist, wird automatisch die Lokale Ansicht angezeigt.)
3 Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste (Macintosh) auf die Datei, fr die
ein Konflikt gelst werden soll, und whlen Sie dann Versionskontrolle > Als aufgelst markieren aus.
Offlinemodus
Gegebenenfalls ist es ntzlich, den Repository-Zugriff whrend anderer Dateibertragungsvorgnge zu vermeiden, indem Sie in den Offlinemodus wechseln. Dreamweaver stellt die Verbindung zum SVN-Repository wieder her, sobald Sie einen Vorgang ausfhren, fr den eine Verbindung erforderlich ist (Neueste Versionen abrufen, bernehmen usw.).
1 Stellen Sie sicher, dass Sie eine funktionierende SVN-Verbindung eingerichtet haben. 2 Zeigen Sie die lokalen Versionen der SVN-Dateien im Bedienfeld Dateien an, indem Sie im Popupmen
Ansicht die Option Lokale Ansicht auswhlen. (Wenn das Bedienfeld Dateien erweitert ist, wird automatisch die Lokale Ansicht angezeigt.)
3 Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste (Macintosh) auf beliebige Dateien
oder Ordner im Bedienfeld Dateien und whlen Sie die Option Versionskontrolle > Offlinemodus aus.
Ansicht die Option Lokale Ansicht auswhlen. (Wenn das Bedienfeld Dateien erweitert ist, wird automatisch die Lokale Ansicht angezeigt.)
3 Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste (Macintosh) auf die zu
entfernende Datei und whlen Sie dann Versionskontrolle > Entfernen aus.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 102
Dateien erstellen und verwalten
Dateien und Ordner bleiben auf dem SVN-Server erhalten, bis sie manuell gelscht werden. Wenn Sie also eine Datei in einen anderen Ordner verschieben und erneut einchecken, bleibt die alte Dateiversion am vorherigen Speicherort auf dem Server erhalten. Um Verwirrung zu vermeiden sollten Sie deshalb alte Kopien von verschobenen Dateien und Ordnern lschen. Wenn Sie eine Datei lokal verschieben und wieder an den SVN-Server bermitteln, geht der Versionsverlauf der Datei verloren.
Dateien synchronisieren
Dateien in der lokalen Site und der Remote-Site synchronisieren
Nachdem Sie Dateien in der lokalen Site und der Remote-Site erstellt haben, knnen Sie sie synchronisieren. Hinweis: Ist die Remote-Site ein FTP-Server (und kein Netzwerkserver), werden die Dateien ber FTP synchronisiert. Bevor Sie die Sites synchronisieren, knnen Sie berprfen, welche Dateien Sie bereitstellen, abrufen, lschen oder ignorieren mchten. Dreamweaver besttigt nach Abschluss der Synchronisierung, welche Dateien aktualisiert wurden.
Verwandte Themen
Dateibertragungen verwalten auf Seite 91 Dateien in einen Remote-Ordner einchecken und aus einem Remote-Ordner auschecken auf Seite 93 Dateien von einem Remote-Server abrufen auf Seite 88 Dateien auf einem Remote-Server bereitstellen auf Seite 89 Dateien auf Unterschiede vergleichen auf Seite 104
Ohne Synchronisierung die neuesten Dateien in der lokalen oder Remote-Site ermitteln
Fhren Sie im Bedienfeld Dateien einen der folgenden Schritte aus:
Klicken Sie oben rechts auf das Men Optionen und whlen Sie Bearbeiten > Neuere auswhlen (lokal) oder
Bearbeiten > Neuere auswhlen (entfernt).
Klicken Sie im Bedienfeld Dateien mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste
(Macintosh) und whlen Sie dann Auswhlen > Neuere (lokal) oder Auswhlen > Neuere (Remote).
(Macintosh) auf die Datei, zu der Sie Informationen abrufen mchten, und whlen Sie Synchronisierungsdaten anzeigen. Hinweis: Diese Funktion ist nur verfgbar, wenn Sie im Dialogfeld Site-Definition in der Kategorie RemoteInformationen die Option Synchronisierungsinformationen beibehalten aktiviert haben.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 103
Dateien erstellen und verwalten
Dateien synchronisieren
1 Whlen Sie im Bedienfeld Dateien (Fenster > Dateien) in dem Popupmen, in dem die aktuelle Site, der
aktuelle Server bzw. das aktuelle Laufwerk angezeigt wird, eine Site aus.
2 Optional: Whlen Sie bestimmte Dateien oder Ordner aus oder ffnen Sie den nchsten Schritt, um die gesamte
Site zu synchronisieren.
3 Klicken Sie auf das Men Optionen in der oberen rechten Ecke des Bedienfelds Dateien und whlen Sie Site >
Synchronisieren. Sie knnen auch oben im Bedienfeld Dateien auf die Schaltflche Synchronisieren klicken, um Dateien zu synchronisieren.
4 Fhren Sie im Men Dateien synchronisieren einen der folgenden Schritte aus:
Whlen Sie Gesamte Sitename -Site, um die gesamte Site zu synchronisieren. Wenn Sie nur ausgewhlte Dateien synchronisieren mchten, whlen Sie Nur lokale Dateien auswhlen (oder
Nur Remote-Dateien auswhlen, wenn Sie die letzte Auswahl in der Remote-Ansicht des Bedienfelds Dateien vorgenommen haben).
5 Whlen Sie die Richtung, in die die Dateien kopiert werden sollen:
Aktuellere Dateien fr entferntes Objekt bereitstellen Ldt alle lokalen Dateien hoch, die es auf dem Remote-Server nicht gibt oder die seit dem letzten Upload gendert wurden. Aktuellere Dateien fr entferntes Objekt beziehen Ldt alle Remote-Dateien herunter, die es lokal nicht gibt oder die
werden sollen. (Dies ist nicht mglich, wenn Sie im Popupmen Richtung die Optionen Abrufen und Bereitstellen whlen.) Wenn Sie Aktuellere Dateien fr entferntes Objekt bereitstellen whlen und die Option Lschen aktivieren, werden alle Dateien in der Remote-Site, fr die keine entsprechenden lokalen Dateien vorhanden sind, gelscht. Wenn Sie Aktuellere Dateien von entferntem Objekt beziehen whlen, werden alle Dateien in der lokalen Site, fr die keine entsprechenden Remote-Dateien vorhanden sind, gelscht.
7 Klicken Sie auf Vorschau.
Hinweis: Bevor Sie die Dateien synchronisieren knnen, mssen Sie eine Vorschau der Aktionen anzeigen, die Dreamweaver hierzu ausfhrt. Befindet sich die neueste Version jeder ausgewhlten Datei bereits an beiden Stellen, wird gemeldet, dass keine Synchronisierung erforderlich ist. Andernfalls wird das Dialogfeld Synchronisieren eingeblendet, in dem Sie die Aktionen (Bereitstellen, Abrufen, Lschen und Ignorieren) fr diese Dateien ndern knnen, bevor die Synchronisierung erfolgt.
8 berprfen Sie die fr jede Datei durchzufhrende Aktion. 9 Um die Aktion fr eine bestimmte Datei zu ndern, whlen Sie die Datei aus und klicken Sie auf eines der
installiert und angegeben wurde. Wenn das Aktionssymbol abgeblendet ist, kann die Aktion nicht durchgefhrt werden.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 104
Dateien erstellen und verwalten
Ausgewhlte Dateien als bereits synchronisiert markieren Mit dieser Option knnen Sie angeben, dass die
bzw. Dreamweaver > Voreinstellungen (Macintosh)) und whlen Sie die Kategorie Dateien vergleichen aus.
3 Fhren Sie einen der folgenden Schritte aus:
Klicken Sie in Windows auf die Schaltflche Durchsuchen und whlen Sie eine Anwendung fr den
Dateivergleich aus.
Klicken Sie auf dem Macintosh auf die Schaltflche Durchsuchen und whlen Sie nicht das Tool fr den
Dateivergleich selbst aus, sondern das Tool oder Skript, das das Tool fr den Dateivergleich ber die Befehlszeile startet. Start-Tools oder -Skripts befinden sich auf dem Macintosh in der Regel im Ordner usr/bin. Wenn Sie beispielsweise FileMerge verwenden mchten, navigieren Sie zu usr/bin und whlen Sie opendiff, das Tool zum Starten von FileMerge. In der folgenden Tabelle sind gngige Macintosh-Tools fr den Dateivergleich und der Speicherort der zugehrigen Starttools bzw. -Skripts auf der Festplatte aufgefhrt.
Tool FileMerge BBEdit TextWrangler Auszuwhlende Datei usr/bin/opendiff usr/bin/bbdiff usr/bin/twdiff
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 105
Dateien erstellen und verwalten
Hinweis: Der Ordner usr ist normalerweise im Finder ausgeblendet. Sie knnen in Dreamweaver ber die Schaltflche Durchsuchen darauf zugreifen. Hinweis: Welche Ergebnisse tatschlich angezeigt werden, hngt vom verwendeten Vergleichstool ab. Schlagen Sie im Benutzerhandbuch Ihres Tools nach, wie die Ergebnisse zu interpretieren sind.
(Macintosh) auf die beiden Dateien, um sie auszuwhlen. Um Dateien auerhalb der definierten Site auszuwhlen, whlen Sie den lokalen Datentrger im linken Popupmen im Bedienfeld Dateien und whlen die Dateien aus.
2 Klicken Sie mit der rechten Maustaste auf eine der ausgewhlten Dateien und whlen Sie im Kontextmen Lokale
Dateien vergleichen. Hinweis: Hat Ihre Maus nur eine Taste, klicken Sie stattdessen bei gedrckter Ctrl-Taste auf die ausgewhlten Dateien. Daraufhin wird das Tool fr den Dateivergleich gestartet und die beiden Dateien werden verglichen.
Remote-Dateien vergleichen. Hinweis: Hat Ihre Maus nur eine Taste, klicken Sie stattdessen bei gedrckter Ctrl-Taste auf die ausgewhlten Dateien. Daraufhin wird das Tool fr den Dateivergleich gestartet und die beiden Dateien werden verglichen.
Kontextmen Mit Remote-Dateien vergleichen. Hinweis: Hat Ihre Maus nur eine Taste, klicken Sie stattdessen bei gedrckter Ctrl-Taste auf die lokale Datei. Daraufhin wird das Tool fr den Dateivergleich gestartet und die beiden Dateien werden verglichen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 106
Dateien erstellen und verwalten
2 Klicken Sie mit der rechten Maustaste in das Bedienfeld und whlen Sie im Kontextmen Mit lokalen Dateien
vergleichen. Hinweis: Hat Ihre Maus nur eine Taste, klicken Sie stattdessen bei gedrckter Ctrl-Taste auf die Datei.
Daraufhin wird das Tool fr den Dateivergleich gestartet und die beiden Dateien werden verglichen. Sie knnen stattdessen auch mit der rechten Maustaste am oberen Rand des Dokumentfensters auf die Registerkarte des Dokuments klicken und im Kontextmen Mit Remote-Dateien vergleichen whlen.
Remote-Site bereitstellen. Wenn die Remote-Version der Datei gendert wurde, erhalten Sie eine Benachrichtigung mit der Mglichkeit, die Unterschiede anzuzeigen.
2 Klicken Sie auf die Schaltflche Vergleichen, um die Unterschiede anzuzeigen.
Daraufhin wird das Tool fr den Dateivergleich gestartet und die beiden Dateien werden verglichen. Wenn Sie kein Tool fr den Dateivergleich angegeben haben, werden Sie dazu aufgefordert.
3 Nachdem Sie die nderungen in dem Tool geprft oder zusammengefhrt haben, knnen Sie den
Nachdem Sie auf Vorschau geklickt haben, werden die ausgewhlten Dateien und die Aktionen aufgelistet, die beim Synchronisieren durchgefhrt werden.
3 Whlen Sie in der Liste alle zu vergleichenden Dateien aus und klicken Sie auf die Schaltflche Vergleichen (das
Symbol mit zwei kleinen Seiten). Hinweis: Die Dateien mssen textbasiert sein, wie z. B. HTML- oder ColdFusion-Dateien.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 107
Dateien erstellen und verwalten
Dreamweaver startet das Vergleichstool, das die lokalen und Remote-Versionen jeder ausgewhlten Datei vergleicht.
Verwandte Themen
Dateien synchronisieren auf Seite 102
Wenn es eine frhere Version der Seite gibt, wird das Dialogfeld Wiederherstellen eingeblendet.
3 Whlen Sie die Version der Seite, die wiederhergestellt werden soll, und klicken Sie auf Wiederherstellen.
Verwandte Themen
Site fr die Verwendung von Contribute vorbereiten auf Seite 57 Remote-Dateien in einer Contribute-Site lschen, verschieben oder umbenennen auf Seite 60
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 108
Dateien erstellen und verwalten
Berichte erstellen Neuere lokale und neuere Remote-Dateien suchen Operationen fr die gesamte Site durchfhren, wie etwa das Prfen und ndern von Hyperlinks Synchronisieren Mit dem Inhalt des Bedienfelds Elemente arbeiten Vorlagen und Bibliotheken aktualisieren
Hinweis: Sie knnen weiterhin Vorgnge fr bestimmte ausgeschlossene Ordner oder Dateien durchfhren, indem Sie den Ordner bzw. die Datei im Bedienfeld Dateien auswhlen und dann den gewnschten Vorgang durchfhren. Das Cloaking wird auer Kraft gesetzt, wenn Sie den Vorgang direkt fr eine Datei oder einen Ordner durchfhren. Hinweis: Vorlagen und Bibliothekselemente, fr die das Cloaking aktiviert wurde, werden in Dreamweaver nur vom Bereitstellen und vom Abrufen ausgeschlossen. Dreamweaver schliet diese Elemente nicht von Batch-Operationen aus, da sie sonst mglicherweise nicht mehr mit ihren Instanzen synchronisiert sind.
Whlen Sie Cloaking > (Auswahl aufheben zum Deaktivieren). Whlen Sie Cloaking > Einstellungen aus, um die Kategorie Cloaking des Dialogfelds zum Einrichten der Site
zu ffnen. Aktivieren oder deaktivieren Sie die gewnschten Optionen sowie Cloaking von Dateien mit Erweiterung, um Cloaking fr bestimmte Dateitypen zu aktivieren oder zu deaktivieren. Sie knnen im Textfeld die Suffixe der Dateien eingeben, fr die Sie das Cloaking festlegen mchten. Wenn Sie das Cloaking fr bestimmte Dateien aufheben mchten, lschen Sie die entsprechenden Suffixe aus dem Textfeld.
im Kontextmen Cloaking > Cloaking aktivieren bzw. Cloaking >Cloaking deaktivieren aus.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 109
Dateien erstellen und verwalten
Wenn das Cloaking fr eine Datei oder einen Ordner festgelegt wurde, verluft eine rote Linie durch das Datei- bzw. Ordnersymbol. Diese Linie wird ausgeblendet, wenn das Cloaking fr die Datei oder den Ordner aufgehoben wird. Hinweis: Sie knnen weiterhin Vorgnge fr bestimmte ausgeschlossene Ordner oder Dateien durchfhren, indem Sie die Datei bzw. den Ordner im Bedienfeld Dateien auswhlen und dann den gewnschten Vorgang durchfhren. Das Cloaking wird auer Kraft gesetzt, wenn Sie die Operation direkt fr eine Datei oder einen Ordner ausfhren.
auszuschlieenden Dateitypen ein und klicken Sie auf OK. Sie knnen beispielsweise .jpg eingeben, damit das Cloaking fr alle Dateien in der Site gilt, deren Name mit .jpg endet. Trennen Sie mehrere Dateitypen durch ein Leerzeichen voneinander. Verwenden Sie dazu weder ein Komma noch einen Strichpunkt. Die entsprechenden durch Cloaking ausgeschlossenen Dateien sind im Bedienfeld Dateien durch eine rote Linie gekennzeichnet. Manche Softwareanwendungen erstellen Backupdateien mit einer bestimmten Dateierweiterung, wie z. B. .bak. Auch fr solche Dateien knnen Sie das Cloaking aktivieren. Hinweis: Sie knnen weiterhin Vorgnge fr bestimmte ausgeschlossene Ordner oder Dateien durchfhren, indem Sie die Datei bzw. den Ordner im Bedienfeld Dateien auswhlen und dann den gewnschten Vorgang durchfhren. Das Cloaking wird auer Kraft gesetzt, wenn Sie die Operation direkt fr eine Datei oder einen Ordner ausfhren.
Deaktivieren Sie das Kontrollkstchen Cloaking von Dateien mit Erweiterung, damit das Cloaking fr alle im
Feld angegebenen Dateitypen wieder aufgehoben wird.
Wenn Sie das Cloaking nur fr bestimmte Dateitypen aufheben mchten, lschen Sie diese Dateitypen aus dem Feld.
4 Klicken Sie auf OK.
Die entsprechenden Dateisymbole werden nun wieder ohne die roten Linien angezeigt. Dies weist darauf hin, dass das Cloaking fr die Dateien aufgehoben wurde.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 110
Dateien erstellen und verwalten
Cloaking > Cloaking fr alles deaktivieren. Hinweis: Durch diesen Schritt wird auch die Option Cloaking von Dateien mit Erweiterung in der Kategorie Cloaking des Dialogfelds Site-Definition deaktiviert. Die Ordner- und Dateisymbole werden nun wieder ohne die roten Linien angezeigt. Dies weist darauf hin, dass das Cloaking fr alle Dateien und Ordner in der Site aufgehoben wurde.
In Flash knnte eine hnliche Design Note die folgende Zeile enthalten:
fl_source="file:///Mydisk/sites/assets/orig/myhouse.fla"
Hinweis: Damit Design Notes gemeinsam mit anderen Teammitgliedern genutzt werden knnen, sollte der gleiche SiteStammpfad definiert werden (z. B. sites/assets/orig).
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 111
Dateien erstellen und verwalten
Wenn Sie die Grafik in Dreamweaver importieren, wird die Design Notes-Datei automatisch zusammen mit der Grafik in die Site kopiert. Wenn Sie das Bild in Dreamweaver auswhlen und mit Fireworks bearbeiten mchten, ffnet Fireworks die Originaldatei zur Bearbeitung.
Verwandte Themen
Externe Editoren fr Multimedia-Dateien starten auf Seite 275
Sie die Option, wenn keine Design Notes verwendet werden sollen).
5 Wenn Sie alle lokalen Design Notes-Dateien fr Ihre Site lschen mchten, klicken Sie auf Entfernen und dann
auf Ja. (Wenn Sie Design Notes-Remote-Dateien lschen mchten, mssen Sie sie manuell lschen.) Hinweis: Mit dem Befehl zum Entfernen von Design Notes werden nur MNO-Dateien (Design Notes-Dateien) gelscht. Der Ordner _notes oder die Datei dwsync.xml im Ordner _notes werden dagegen nicht gelscht. Mithilfe der Datei dwsync.xml werden in Dreamweaver die Informationen zur Site-Synchronisierung verwaltet.
6 Whlen Sie Bereitstellen von Design Notes fr gemeinsame Nutzung aktivieren aus, um mit Ihrer Site verknpfte
Design Notes mit den anderen Dokumenten hochzuladen, und klicken Sie auf OK.
Wenn Sie diese Option aktivieren, kann das ganze Team die Design Notes nutzen. Wenn Sie eine Datei bereitstellen
oder abrufen, wird die zugehrige Design Notes-Datei automatisch von Dreamweaver bereitgestellt oder abgerufen.
Wenn Sie diese Option nicht aktivieren, werden die Design Notes lokal von Dreamweaver verwaltet, sie werden
aber nicht zusammen mit Ihren Dateien hochgeladen. Falls Sie alleine an Ihrer Site arbeiten, werden durch die Deaktivierung dieser Option Dateibertragungen beschleunigt. Die Design Notes werden nicht auf die RemoteSite bertragen, wenn Sie Dateien einchecken bzw. bereitstellen. Sie knnen jedoch weiterhin Design Notes fr die Site lokal hinzufgen und modifizieren.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 112
Dateien erstellen und verwalten
Hinweis: Wenn Sie einer Vorlagendatei Design Notes hinzufgen, bernehmen die mit der Vorlage erstellten Dokumente nicht die Design Notes.
1 Fhren Sie einen der folgenden Schritte aus:
ffnen Sie die Datei im Dokumentfenster und whlen Sie dann Datei > Design Notes. Klicken Sie im Bedienfeld Dateien mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste
(Macintosh) und whlen Sie dann die Option Design Notes. Hinweis: Wenn die Datei sich in einer Remote-Site befindet, mssen Sie sie zunchst auschecken oder abrufen und dann im lokalen Ordner auswhlen.
2 Whlen Sie auf der Registerkarte Basis-Info im Popupmen Status einen Status fr das Dokument aus. 3 Klicken Sie auf das Kalendersymbol (rechts ber dem Feld Anmerkungen), um das aktuelle Datum in die
Anmerkungen einzufgen.
4 Geben Sie im Feld Anmerkungen Ihre Anmerkungen ein. 5 Aktivieren Sie die Option Zeigen, wenn Datei geffnet ist, damit die Design Notes-Datei bei jedem ffnen der
Paar hinzuzufgen. Wenn Sie ein Paar entfernen mchten, whlen Sie es aus und klicken Sie auf die Schaltflche mit dem Minuszeichen (-). Sie knnen beispielsweise ein Schlsselwort Autor nennen (im Feld Name) und als Wert Heidi definieren (im Feld Wert).
7 Klicken Sie auf OK, um die Notizen zu speichern.
Dreamweaver speichert die Design Notes in einem Ordner namens _notes. Dieser Ordner wird in dem Ordner angelegt, in dem sich die aktuelle Datei befindet. Der Dateiname besteht aus dem Dateinamen des Dokuments sowie der Erweiterung .mno. Wenn der Dateiname beispielsweise index.html lautet, erhlt die zugehrige Design NotesDatei den Namen index.html.mno.
Verwandte Themen
Dateien vom Server abrufen/auf dem Server bereitstellen auf Seite 87 Dateien in einen Remote-Ordner einchecken und aus einem Remote-Ordner auschecken auf Seite 93
ffnen Sie die Datei im Dokumentfenster und whlen Sie dann Datei > Design Notes. Klicken Sie im Bedienfeld Dateien mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste
(Macintosh) und whlen Sie dann die Option Design Notes.
Doppelklicken Sie in der Spalte Anmerkungen des Bedienfelds Dateien auf das gelbe Design Notes-Symbol.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 113
Dateien erstellen und verwalten
Hinweis: Whlen Sie zum Anzeigen des gelben Symbols fr Design Notes die Optionen Site > Sites verwalten > [Name der Site] > Bearbeiten > Erweiterte Einstellungen > Dateiansichtsspalten aus. Whlen Sie rechts in der Liste den Eintrag Anmerkungen aus und aktivieren Sie die Option Anzeigen. Wenn Sie nun in der Symbolleiste des Bedienfelds Dateien auf Einblenden und lokale Site sowie Remote-Site anzeigen klicken, sehen Sie, dass die lokale Site um die Spalte Anmerkungen erweitert wurde und darin fr jede Datei mit einer Design Note ein gelbes Design NotesSymbol angezeigt wird.
beschrieben).
2 Klicken Sie auf die Registerkarte Alle Informationen. 3 Klicken Sie auf die Schaltflche mit dem Pluszeichen (+). 4 Geben Sie im Feld Name das Wort Status ein. 5 Geben Sie im Feld Wert den Status ein.
Wenn bereits ein Statuswert vorhanden war, wird er durch den neuen ersetzt
6 Klicken Sie auf die Registerkarte Basis-Info. Sie sehen, dass der neue Statuswert im Popupmen Status
angezeigt wird. Hinweis: Als Status kann jeweils nur ein benutzerdefinierter Wert definiert werden. Wenn Sie diese Schritte wiederholen, ersetzt Dreamweaver den zuerst eingegebenen Statuswert durch den neu eingegebenen Statuswert.
Dreamweaver fragt Sie, ob die Design Notes, die nicht lnger einer Datei in der Site zugeordnet sind, wirklich gelscht werden sollen. Wenn Sie mit Dreamweaver eine Datei lschen, die eine zugeordnete Design Notes-Datei hat, lscht Dreamweaver die Design Notes-Datei ebenfalls. Deswegen kommen verwaiste Design Notes-Dateien normalerweise nur dann vor, wenn eine Datei auerhalb von Dreamweaver gelscht oder umbenannt wird. Hinweis: Wenn Sie die Option Design Notes verwalten deaktiviert haben, bevor Sie auf Entfernen klicken, lscht Dreamweaver alle Design Notes-Dateien der Site.
Sites testen
Richtlinien zum Testen von Sites
Bevor Sie eine Site an einen Server bertragen und zur Ansicht freigeben, sollten Sie die Site lokal testen. (Idealerweise sollten Sie die Site whrend ihres Aufbaus hufig testen und auf Fehler berprfen. Dadurch knnen Probleme frhzeitig erkannt werden, und ein erneutes Auftreten des Fehlers lsst sich vermeiden.)
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 114
Dateien erstellen und verwalten
Die Seiten sollten genauso aussehen und funktionieren, wie dies im fr sie vorgesehenen Browser zu erwarten ist. Es sollten keine nicht funktionierenden Hyperlinks enthalten sein, und die Downloadzeit sollte nicht zu lang sein. Sie knnen die gesamte Site auch testen und auf Fehler berprfen, indem Sie einen Sitebericht ausfhren. Die folgenden Richtlinien sollen Ihnen dabei helfen, eine ansprechende und gut strukturierte Site zu erstellen:
1. Stellen Sie sicher, dass die Seiten in den Zielbrowsern funktionieren.
Die Seiten sollten in Browsern, die weder Stile, Ebenen, Plug-Ins noch JavaScript untersttzen, lesbar und funktionsfhig sein. Bei Seiten, die in lteren Browsern nicht angezeigt werden knnen, sollten Sie eventuell das Verhalten Browser berprfen verwenden, um die Besucher der Site automatisch zu einer anderen Seite weiterzuleiten.
2. Zeigen Sie eine Vorschau der Seiten in verschiedenen Browsern und Plattformen an.
Dadurch knnen Sie Unterschiede im Layout, bei Farben, Schriftgren und Standardgren des Browserfensters ermitteln, die bei einer berprfung im Zielbrowser nicht zu erkennen sind.
3. berprfen Sie Ihre Site auf fehlerhafte Hyperlinks und reparieren Sie diese.
Auch andere Sites knnen gendert oder umstrukturiert werden, und die Seiten, auf die Hyperlinks verweisen, knnen zwischenzeitlich eventuell verschoben oder gelscht worden sein. Sie knnen sicherheitshalber eine Hyperlinkprfung durchfhren.
4. berprfen Sie die Dateigre der Seiten und die fr den Download bentigte Zeit.
Wenn eine Seite aus einer einzigen groen Tabelle besteht, wird sie im Browser erst angezeigt, nachdem die ganze Tabelle geladen wurde. Daher sollten Sie groe Tabellen eventuell in kleinere unterteilen. Ist dies nicht mglich, knnen Sie anderen, weniger umfangreichen Inhalt (wie beispielsweise eine Begrung oder ein Werbebanner) oben auf der Seite und auerhalb der Tabelle platzieren. Die Besucher der Site knnen dann diesen Inhalt lesen, whrend die Tabelle heruntergeladen wird.
5. Fhren Sie zum Testen und zur Fehlersuche der ganzen Site mehrere Siteberichte durch.
Sie knnen die gesamte Site auf Fehler berprfen, beispielsweise auf unbenannte Dokumente, leere Tags und berflssige verschachtelte Tags.
6. berprfen Sie den Code, um Tag- oder Syntaxfehler ausfindig zu machen. 7. Aktualisieren und warten Sie eine Site, auch nachdem sie verffentlicht ist.
Eine Site kann auf verschiedene Weise (im Internet) verffentlicht werden. In jedem Fall sind laufende Wartungsarbeiten erforderlich. Das Erstellen und Einsetzen eines Systems zur Versionskontrolle ist von groer Bedeutung. Hierfr knnen Sie entweder die in Dreamweaver enthaltenen Tools oder speziell dafr vorgesehene externe Programme verwenden.
8. Nehmen Sie an den Diskussionsforen teil.
Die Dreamweaver-Diskussionsforen finden Sie auf der Adobe-Website unter www.adobe.com/go/dreamweaver_newsgroup_de. In den Foren finden Sie eine Flle von Informationen zu verschiedenen Browsern, Plattformen usw. Sie knnen auch technische Fragen besprechen und praktische Tipps mit anderen Dreamweaver-Benutzern austauschen. Ein Tutorial zum Lsen von Problemen mit der Verffentlichung finden Sie unter www.adobe.com/go/vid0164_de.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 115
Dateien erstellen und verwalten
Verwandte Themen
Fehlerhafte Hyperlinks reparieren auf Seite 305 Hyperlinks in Dreamweaver testen auf Seite 299 Verhalten Browser berprfen definieren auf Seite 373 Tags berprfen auf Seite 347 Browserkompatibilitt berprfen auf Seite 347 Tutorial Probleme mit der Verffentlichung beheben
Verwandte Themen
Berichte in Dreamweaver auf Seite 21 Hyperlinks in Dreamweaver testen auf Seite 299 Erweiterungen in Dreamweaver hinzufgen und verwalten auf Seite 37
die Berichtstypen aktivieren, die ausgefhrt werden sollen (Arbeitsablauf oder HTML-Berichte). Ein Bericht zu den in der Site gewhlten Dateien kann nur ausgefhrt werden, wenn Sie bereits Dateien im Bedienfeld Dateien ausgewhlt haben.
3 Wenn Sie einen Arbeitsablaufbericht ausgewhlt haben, klicken Sie auf die Schaltflche Berichtseinstellungen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 116
Dateien erstellen und verwalten
Hinweis: Bei Auswahl von mehreren Arbeitsablaufberichten mssen Sie fr jeden Bericht auf die Schaltflche Berichtseinstellungen klicken. Whlen Sie einen Bericht, klicken Sie auf Berichtseinstellungen und geben Sie die Einstellungen ein. Wiederholen Sie diesen Vorgang dann fr jeden weiteren Arbeitsablaufbericht.
Ausgecheckt von Erstellt einen Bericht, der alle von einem bestimmten Teammitglied ausgecheckten Dokumente auflistet. Geben Sie den Namen eines Teammitglieds ein und klicken Sie dann auf OK, um zum Dialogfeld Berichte zurckzukehren. Design Notes Erstellt einen Bericht, der alle Design Notes fr die ausgewhlten Dokumente oder fr die Site auflistet.
Geben Sie ein oder mehrere Name-Wert-Paare ein und whlen Sie in den entsprechenden Popupmens Vergleichswerte aus. Klicken Sie dann auf OK, um zum Dialogfeld Berichte zurckzukehren.
Zuletzt bearbeitete Erstellt einen Bericht, der die whrend eines bestimmten Zeitraums genderten Dateien auflistet. Legen Sie den Zeitraum fest und bestimmen Sie, wo die Dateien angezeigt werden sollen.
Bei reinen Textbrowsern oder Browsern, die so eingestellt wurden, dass sie Bilder manuell herunterladen, wird anstelle der Bilder Alternativtext angezeigt. Der Alternativtext wird von Bildschirmlesegerten gelesen und in manchen Browsern angezeigt, wenn der Besucher die Maus ber das Bild bewegt.
Ausgecheckt von Erstellt einen Bericht, der alle von einem bestimmten Teammitglied ausgecheckten Dokumente
auflistet.
berflssige verschachtelte Tags Erstellt einen Bericht, in dem die zu optimierenden verschachtelten Tags aufgefhrt
sind. Beispielsweise knnte dieser Bericht wie folgt lauten: <i> Es grnt so grn, <i> wenn</i> Spaniens Blten
blhen</i>.
Entfernbare leere Tags Erstellt einen Bericht, in dem alle leeren Tags aufgefhrt werden, die zur Optimierung des
HTML-Codes entfernt werden knnen. Sie knnten beispielsweise in der Codeansicht einen Eintrag oder ein Bild gelscht und dabei die Tags nicht entfernt haben, die damit verbunden sind.
Unbenannte Dokumente Erstellt einen Bericht, in dem alle innerhalb der ausgewhlten Parameter vorgefundenen
unbenannten Dokumente aufgelistet sind. Dreamweaver fhrt in diesem Bericht alle Dokumente mit Standardtiteln, duplizierten Titeln und fehlenden title-Tags auf.
5 Klicken Sie auf Ausfhren, um den Bericht zu erstellen.
Je nachdem, welchen Berichtstyp Sie ausfhren, werden Sie mglicherweise dazu aufgefordert, Ihre Datei zu speichern, Ihre Site zu definieren oder einen Ordner auszuwhlen (falls Sie das nicht bereits getan haben). Eine Ergebnisliste wird im Bedienfeld Site-Berichte (in der Bedienfeldgruppe Ergebnisse) angezeigt.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 117
Dateien erstellen und verwalten
2 Fhren Sie im Bedienfeld Site-Berichte einen der folgenden Schritte aus, um den Bericht anzuzeigen:
Klicken Sie auf die berschrift der Spalte, deren Ergebnisse sortiert werden sollen:
Sie knnen nach Dateiname, Zeilennummer oder Beschreibung sortieren. Darber hinaus knnen Sie mehrere unterschiedliche Berichte ausfhren und diese geffnet lassen.
Whlen Sie eine beliebige Zeile im Bericht aus und klicken Sie links im Bedienfeld Site-Berichte auf die
Schaltflche Weitere Informationen, um eine Problembeschreibung anzuzeigen. Diese Informationen werden im Bedienfeld Referenz angezeigt.
Doppelklicken Sie auf eine beliebige Zeile im Bericht, um den entsprechenden Code im Dokumentfenster
anzuzeigen. Hinweis: Wenn die Entwurfsansicht aktiv ist, ndert Dreamweaver die Anzeige in eine geteilte Ansicht, um das gemeldete Problem im Code anzuzeigen.
3 Klicken Sie auf Bericht speichern, um den Bericht zu speichern.
Wenn Sie einen Bericht speichern, knnen Sie ihn in eine vorhandene Vorlagendatei importieren. Sie knnen diese Vorlagendatei dann in eine Datenbank oder ein Tabellenkalkulationsprogramm importieren und ausdrucken oder den Bericht in einer Website anzeigen. Verwenden Sie nach der Ausfhrung von HTML-Berichten den Befehl zum Bereinigen von HTML, um im Bericht aufgefhrte HTML-Fehler zu korrigieren.
ENTWURF
Letzte Aktualisierung 19.3.2010
118
Verwandte Themen
Dreamweaver-Vorlagen auf Seite 415
Bibliothekselemente
Eine Bibliothek ist eine spezielle Dreamweaver-Datei mit einer Sammlung einzelner Elemente oder Elementkopien, die Sie auf Webseiten einfgen knnen. Die Elemente in einer Bibliothek werden als Bibliothekselemente bezeichnet. Zu den Elementen, die in einer Bibliothek gespeichert werden knnen, zhlen u. a. Bilder, Tabellen, Audiodateien und mit Adobe Flash erstellte Dateien. Nach jeder Bearbeitung eines Bibliothekselements knnen Sie automatisch alle Seiten aktualisieren, in denen das entsprechende Element verwendet wird. Wenn Sie beispielsweise eine umfangreiche Site fr ein Unternehmen erstellen, dessen Slogan auf allen Seiten angezeigt werden soll, knnen Sie ein Bibliothekselement mit dem Slogan erstellen und auf jeder Seite verwenden. Wenn sich der Slogan ndert, knnen Sie das Bibliothekselement ndern und automatisch alle Seiten aktualisieren, in denen das Element verwendet wird. In Dreamweaver werden Bibliothekselemente im Ordner Library im lokalen Stammordner jeder Site gespeichert. Jede Site verfgt ber eine eigene Bibliothek. Ein Bibliothekselement knnen Sie aus jedem Element im body-Abschnitt eines Dokuments erstellen, z. B. aus Text, Tabellen, Formularen, Java-Applets, Plug-Ins, ActiveX-Elementen, Navigationsleisten und Bildern.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 119
Elemente und Bibliotheken verwalten
Bei verknpften Elementen wie Bildern ist in der Bibliothek nur ein Verweis auf das Element gespeichert. Die Originaldateien mssen an dem angegebenen Ort verbleiben, damit die Bibliothekselemente ordnungsgem funktionieren. Dennoch kann es sinnvoll sein, Bilder in einem Bibliothekselement zu speichern. So knnten Sie beispielsweise ein img-Tag in einem Bibliothekselement speichern, wodurch Sie den alt-Text oder gar das src-Attribut des Bilds in der gesamten Site auf einfache Weise ndern knnen. (Sie sollten jedoch mit diesem Verfahren nicht die Attribute fr die Breite und Hhe eines Bildes ndern, soweit Sie nicht die tatschliche Gre des Bildes mithilfe eines Bildeditors kontrollieren knnen.) Hinweis: Beachten Sie, dass bei einem Bibliothekselement mit Hyperlinks diese Hyperlinks auf der neuen Site mglicherweise nicht funktionieren. Zudem werden Bilder in einem Bibliothekselement nicht auf die neue Site kopiert. Bei Verwendung eines Bibliothekselements wird in Dreamweaver auf der Webseite eine Verknpfung mit dem Bibliothekselement und nicht das Element selbst eingefgt. In Dreamweaver wird demnach eine Kopie des HTMLQuellcodes dieses Elements in das Dokument eingefgt und ein HTML-Kommentar mit einem Verweis auf das externe Originalelement hinzugefgt. Dieser externe Verweis ermglicht die automatische Aktualisierung. Wenn Sie ein Bibliothekselement erstellen, das ein Element mit einem angefgten Dreamweaver-Verhalten enthlt, werden durch Dreamweaver das Element und der zugehrige Event-Handler (das Attribut, das angibt, welches Ereignis die Aktion auslst, z. B. onClick, onLoad oder onMouseOver, und welche Aktion beim Auftreten des Ereignisses aufgerufen werden soll) in die Datei des Bibliothekselements kopiert. Dabei werden in Dreamweaver die zugehrigen JavaScript-Funktionen nicht in das Bibliothekselement kopiert. Stattdessen fgt Dreamweaver, wenn Sie das Bibliothekselement in ein Dokument einfgen, automatisch die entsprechenden JavaScript-Funktionen in den head-Abschnitt dieses Dokuments ein (soweit sie dort nicht bereits vorhanden sind). Hinweis: JavaScript-Code, der ohne Verwendung der Dreamweaver-Verhalten erstellt wurde, kann in einem Bibliothekselement eingefgt werden, wenn er ber das Verhalten JavaScript aufrufen ausgefhrt wird. Wenn Sie kein Dreamweaver-Verhalten zum Ausfhren des Codes verwenden, wird dieser nicht als Bestandteil des Bibliothekselements beibehalten. Fr die Bearbeitung der Verhalten in Bibliothekselementen gelten besondere Anforderungen. Bibliothekselemente knnen keine Stylesheets enthalten, da der Code fr diese Objekte zum head-Abschnitt gehrt.
Verwandte Themen
Verhalten in einem Bibliothekselement bearbeiten auf Seite 130
Elemente verwenden
berblick ber das Bedienfeld Elemente
Im Bedienfeld Elemente (Fenster > Elemente) knnen Sie die Elemente in der aktuellen Site verwalten. Im Bedienfeld Elemente werden Elemente der Site angezeigt, die zu dem im Dokumentfenster aktiven Dokument gehrt. Hinweis: Sie mssen eine lokale Site definieren, bevor Sie Elemente im Bedienfeld Elemente anzeigen knnen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 120
Elemente und Bibliotheken verwalten
Bedienfeld Elemente mit angezeigter Siteliste. Die Symbole fr die Kategorien werden links angezeigt. Der Vorschaubereich befindet sich oberhalb der Liste.
ber das Bedienfeld Elemente knnen Elemente auf zwei Arten angezeigt werden:
Siteliste Zeigt alle Elemente der Site an, einschlielich der Farben und URLs, die in den Dokumenten der Site
verwendet werden.
Favoritenliste Zeigt nur die Elemente an, die Sie ausdrcklich ausgewhlt haben.
Wenn Sie zwischen diesen beiden Ansichten wechseln mchten, aktivieren Sie im Vorschaubereich entweder das Optionsfeld Site oder Favoriten. (Die beiden Ansichten sind bei den Kategorien Vorlagen und Bibliothek nicht verfgbar.) Hinweis: Die meisten Vorgnge im Bedienfeld Elemente knnen in beiden Listen durchgefhrt werden. Einige Aufgaben knnen jedoch nur in der Favoritenliste ausgefhrt werden. In beiden Listen sind Elemente einer der folgenden Kategorien zugeordnet:
Bilder
Farben Farben, die in Dokumenten und Stylesheets verwendet werden, darunter Text-, Hintergrund- und Hyperlinkfarben. URLs Externe Hyperlinks in den Dokumenten der aktuellen Site, einschlielich Hyperlinks fr FTP, Gopher, HTTP, HTTPS, JavaScript, E-Mail (mailto) und lokale Dateien (file://).
Dateien in allen Adobe Flash-Versionen. Im Bedienfeld Elemente werden nur SWF-Dateien (mit Flash erstellte, komprimierte Dateien) und keine FLA-Dateien (Flash-Quelldateien) angezeigt.
Flash Shockwave Filme
Skripts JavaScript- oder VBScript-Dateien. Skripts in HTML-Dateien (im Gegensatz zu unabhngigen JavaScript- oder VBScript-Dateien) werden im Bedienfeld Elemente nicht angezeigt. Vorlagen
Masterseiten-Layouts, die auf mehreren Seiten verwendet werden. Beim ndern einer Vorlage werden automatisch alle mit der Vorlage verbundenen Seiten gendert.
Bibliothekselemente
Designelemente, die auf mehreren Seiten verwendet werden. Wenn Sie nderungen an einem Bibliothekselement vornehmen, werden alle Seiten aktualisiert, die dieses Element enthalten.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 121
Elemente und Bibliotheken verwalten
Hinweis: Damit eine Datei im Bedienfeld Elemente angezeigt wird, muss sie einer dieser Kategorien angehren. Einige andere Dateitypen werden zwar manchmal auch als Elemente bezeichnet, werden jedoch nicht im Bedienfeld Elemente angezeigt. In der Standardeinstellung sind Elemente in einer Kategorie alphabetisch nach Namen aufgefhrt, sie knnen jedoch auch nach Typ oder anderen Kriterien sortiert werden. Darber hinaus knnen Sie Elemente in der Vorschau anzeigen sowie die Gre der Spalten und des Vorschaubereichs ndern.
Verwandte Themen
Liste mit Favoritenelementen erstellen und verwalten auf Seite 124 Bibliothekselemente verwenden auf Seite 126
Wenn Sie beispielsweise ein Filmelement auswhlen, wird im Vorschaubereich ein Symbol angezeigt. Sie knnen den Film wiedergeben, indem Sie oben rechts im Vorschaubereich auf die Schaltflche Abspielen (grnes Dreieck) klicken.
Elemente sortieren
Klicken Sie auf eine Spaltenberschrift.
Wenn Sie beispielsweise die Liste der Bilder nach Typ sortieren mchten (sodass alle GIF-Bilder, alle JPEG-Bilder usw. jeweils untereinander aufgefhrt werden), klicken Sie auf die Spaltenberschrift Typ.
, um die Siteliste manuell zu aktualisieren. In Dreamweaver wird der Site-Cache gegebenenfalls erstellt oder aktualisiert.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 122
Elemente und Bibliotheken verwalten
Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrckter Befehlstaste (Macintosh) auf die
Elementliste und klicken Sie dann auf Siteliste aktualisieren, um die Siteliste zu aktualisieren und den Site-Cache neu zu erstellen.
Hinweis: Sie knnen jede Kategorie mit Ausnahme von Vorlagen auswhlen. Eine Vorlage kann nur auf ein gesamtes Dokument angewendet und nicht in ein Dokument eingefgt werden.
3 Whlen Sie im oberen Bereich des Bedienfelds die Option Site oder Favoriten und anschlieend das
einzufgende Element aus. Bei Bibliothekselementen steht weder die Siteliste noch die Favoritenliste zur Verfgung. berspringen Sie diesen Schritt, wenn Sie ein Bibliothekselement einfgen.
4 Fhren Sie einen der folgenden Schritte aus:
Whlen Sie im Bedienfeld das entsprechende Element aus und klicken Sie auf Einfgen.
Wenn es sich bei dem eingefgten Element um eine Farbe handelt, wird diese auf den hinter der Einfgemarke angezeigten Text angewendet.
aus.
3 Whlen Sie die gewnschte Farbe aus und klicken Sie auf Anwenden.
Verwandte Themen
Favoritenelemente hinzufgen oder entfernen auf Seite 125
aus.
Hinweis: In der Standardeinstellung werden die URLs fr die Dateien Ihrer Site in der Ansicht Sites gespeichert. In der Ansicht Favoriten finden Sie die URLs, die Sie selbst hinzugefgt haben.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 123
Elemente und Bibliotheken verwalten
3 Whlen Sie die gewnschte URL aus. 4 Fhren Sie einen der folgenden Schritte aus:
Ziehen Sie die URL aus dem Bedienfeld in die Auswahl der Entwurfsansicht. Whlen Sie die URL aus und klicken Sie dann auf die Schaltflche Einfgen.
Verwandte Themen
Externe Editoren fr Multimedia-Dateien starten auf Seite 275
Klicken Sie bei gedrckter Umschalttaste, um mehrere aufeinanderfolgende Elemente auszuwhlen. Klicken Sie bei gedrckter Strg-Taste (Windows) bzw. Befehlstaste (Macintosh), um ein einzelnes Element
auszuwhlen (dabei spielt es keine Rolle, ob sich das Element direkt neben der vorhandenen Auswahl befindet oder nicht). Halten Sie die Strg-Taste (Windows) bzw. die Befehlstaste (Macintosh) gedrckt und klicken Sie auf ein ausgewhltes Element, um die Auswahl aufzuheben.
Elemente bearbeiten
Beim Bearbeiten eines Elements im Bedienfeld Elemente ndert sich das Verhalten je nach Elementart. Bei einigen Elementen, z. B. Bildern, wird automatisch ein externer Editor geffnet, wenn fr die entsprechende Elementart ein Editor festgelegt wurde. Farben und URLs knnen nur in der Favoritenliste bearbeitet werden. Beim Bearbeiten von Vorlagen und Bibliothekselementen werden die nderungen in Dreamweaver vorgenommen.
1 Fhren Sie im Bedienfeld Elemente einen der folgenden Schritte aus:
Doppelklicken Sie auf das gewnschte Element. Whlen Sie das Element aus und klicken Sie dann auf die Schaltflche Bearbeiten
. Hinweis: Wenn das Element in einem externen Editor bearbeitet werden muss und der Editor nicht automatisch geffnet wird, whlen Sie Bearbeiten > Voreinstellungen (Windows) bzw. Dreamweaver > Voreinstellungen (Macintosh) und anschlieend die Kategorie Dateitypen/Editoren aus. Stellen Sie dann sicher, dass fr diese Elementart ein externer Editor definiert ist.
2 Nehmen Sie die gewnschten nderungen vor. 3 Fhren Sie abschlieend einen der folgenden Schritte aus:
Wenn es sich bei dem Element um eine Datei handelt (alle Elemente auer Farben und URLs), speichern und
schlieen Sie die Datei mit dem entsprechenden Editor.
Wenn das Element eine URL ist, klicken Sie im Dialogfeld URL bearbeiten auf OK.
Hinweis: Wenn das Element eine Farbe ist, wird der Farbwhler nach der Auswahl einer Farbe automatisch geschlossen. Wenn Sie den Farbwhler schlieen mchten, ohne eine Farbe auszuwhlen, drcken Sie die Esc-Taste.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 124
Elemente und Bibliotheken verwalten
Elemente auf den Namen oder das Symbol des Elements und whlen Sie dann im Kontextmen den Befehl In der Site suchen aus. Hinweis: Der Befehl In der Site suchen ist bei Farben und URLs nicht verfgbar, da diese Elemente nicht in Dateien auf der Site gespeichert sind. Im daraufhin geffneten Bedienfeld Dateien wird die Datei des ausgewhlten Elements angezeigt. ber den Befehl In der Site suchen wird die Datei gesucht, die dem Element selbst entspricht. Die Dateien, in denen das Element verwendet wird, werden dagegen nicht gesucht.
Elemente aus dem Bedienfeld Elemente auf eine andere Site kopieren
1 Whlen Sie im Bedienfeld Elemente die Kategorie des zu kopierenden Elements aus. 2 Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste (Macintosh) in der Siteliste oder
Favoritenliste auf eines oder mehrere Elemente, whlen Sie Zur Site kopieren und dann im Untermen mit allen definierten Sites den Namen der Zielsite aus. Hinweis: In der Favoritenliste knnen Sie einen Favoritenordner und einzelne Elemente kopieren. Die Elemente werden in die entsprechenden Speicherorte auf der Zielsite kopiert. In Dreamweaver werden in der Ordnerhierarchie der Zielsite gegebenenfalls neue Ordner erstellt. Die Elemente werden zudem in die Favoritenliste der Zielsite eingefgt. Hinweis: Wenn es sich bei dem kopierten Element um eine Farbe oder URL handelt, wird es nur in der Favoritenliste der Zielsite angezeigt. Da fr Farben und URLs keine Dateien vorliegen, kann keine entsprechende Datei auf die andere Site kopiert werden.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 125
Elemente und Bibliotheken verwalten
Hinweis: Favoritenelemente werden nicht als separate Dateien auf der Festplatte gespeichert. Sie sind nur Verweise auf Elemente in der Siteliste. Dreamweaver verwaltet die Elemente so, dass immer die korrekten Elemente aus der Siteliste in der Favoritenliste angezeigt werden. Die meisten Vorgnge im Bedienfeld Elemente sind in der Favoritenliste und der Siteliste identisch. Einige Tasks knnen allerdings nur in der Favoritenliste durchgefhrt werden.
Verwandte Themen
berblick ber das Bedienfeld Elemente auf Seite 119 Farbwhler verwenden auf Seite 229
Whlen Sie in der Siteliste des Bedienfelds Elemente mindestens ein Element aus und klicken Sie dann auf die
Schaltflche Zu Favoriten hinzufgen .
Whlen Sie in der Siteliste des Bedienfelds Elemente mindestens ein Element aus, klicken Sie mit der rechten
Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste (Macintosh) und whlen Sie dann Zu Favoriten hinzufgen aus.
Whlen Sie im Bedienfeld Dateien mindestens ein Element aus, klicken Sie mit der rechten Maustaste (Windows)
bzw. bei gedrckter Ctrl-Taste (Macintosh) und whlen Sie dann Zu Favoriten hinzufgen aus. In Dreamweaver werden Dateien ignoriert, die keiner Kategorie im Bedienfeld Elemente entsprechen.
Klicken Sie in der Entwurfsansicht des Dokumentfensters mit der rechten Maustaste (Windows) bzw. bei
gedrckter Ctrl-Taste (Macintosh) auf ein Element. Whlen Sie dann im Kontextmen den Befehl aus, ber den das Element in die entsprechende Favoritenkategorie eingefgt wird. Das Kontextmen fr Text enthlt den Befehl Zu Farbfavoriten hinzufgen oder Zu URL-Favoriten hinzufgen, je nachdem, ob an den Text ein Hyperlink angefgt ist oder nicht. Sie knnen nur Elemente hinzufgen, die einer der Kategorien im Bedienfeld Elemente entsprechen.
Whlen Sie mit dem Farbwhler eine Farbe aus und weisen Sie der Farbe dann gegebenenfalls einen Kurznamen zu.
Wenn Sie den Farbwhler schlieen mchten, ohne eine Farbe auszuwhlen, drcken Sie die Esc-Taste oder klicken Sie auf die graue Leiste oben im Farbwhler.
Geben Sie im Dialogfeld URL hinzufgen eine URL und einen Kurznamen ein und klicken Sie dann auf OK.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 126
Elemente und Bibliotheken verwalten
Daraufhin werden die Elemente aus der Favoritenliste, jedoch nicht aus der Siteliste entfernt. Wenn Sie einen Favoritenordner lschen, werden der Ordner und sein gesamter Inhalt entfernt.
Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste (Macintosh) im Bedienfeld
Elemente auf den Namen oder das Symbol des Elements und whlen Sie dann Kurznamen bearbeiten aus.
Klicken Sie auf den Namen des Elements und klicken Sie nach einer Pause erneut auf den Namen. (Doppelklicken
Sie nicht auf den Namen, da dadurch das Element zum Bearbeiten geffnet wird.)
4 Geben Sie den Kurznamen fr das Element ein und drcken Sie dann die Eingabetaste.
Verwandte Themen
berblick ber das Bedienfeld Elemente auf Seite 119
3 Geben Sie den Kurznamen fr den Ordner ein und drcken Sie dann die Eingabetaste (Windows) bzw. Return
(Macintosh).
4 Ziehen Sie die gewnschten Elemente in den Ordner.
Bibliothekselemente verwenden
Bibliothekselemente erstellen
Bibliothekselemente sind Elemente, die auf einer Website wiederverwendet oder hufig aktualisiert werden.
Verwandte Themen
Bibliothekselemente auf Seite 118
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 127
Elemente und Bibliotheken verwalten
. .
Klicken Sie unten in der Kategorie Bibliothek auf die Schaltflche Neues Bibliothekselement Whlen Sie Modifzieren > Bibliothek > Objekt in Bibliothek einfgen aus.
3 Geben Sie einen Namen fr das neue Bibliothekselement ein und drcken Sie dann die Eingabetaste (Windows)
bzw. Return (Macintosh). In Dreamweaver wird jedes Bibliothekselement als separate Datei (mit der Dateinamenerweiterung .lbi) im Ordner Library gespeichert, der sich im lokalen Stammverzeichnis der Site befindet.
Wenn ein Objekt ausgewhlt ist, wird es in das neue Bibliothekselement eingefgt.
2 Whlen Sie im Bedienfeld Elemente die Kategorie Bibliothek
aus. .
3 Klicken Sie im unteren Bereich des Bedienfelds auf die Schaltflche Neues Bibliothekselement
4 Geben Sie fr das noch ausgewhlte Element einen Namen ein und drcken Sie dann die Eingabetaste (Windows)
aus.
Whlen Sie ein Bibliothekselement aus und klicken Sie auf Einfgen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 128
Elemente und Bibliotheken verwalten
Hinweis: Beim Bearbeiten eines Bibliothekselements ist das Bedienfeld CSS-Stile nicht verfgbar, da Bibliothekselemente nur body-Elemente enthalten knnen und CSS-Code im head-Bereich eines Dokuments eingefgt wird. Auerdem ist das Dialogfeld Seiteneigenschaften nicht verfgbar, da Bibliothekselemente keine body-Tags oder deren Attribute enthalten knnen.
Bibliothekselemente bearbeiten
1 Whlen Sie im Bedienfeld Elemente die Kategorie Bibliothek 2 Whlen Sie ein Bibliothekselement aus. 3 Klicken Sie entweder auf die Schaltflche Bearbeiten
aus.
In Dreamweaver wird ein dem Dokumentfenster entsprechendes neues Fenster geffnet, in dem das Bibliothekselement bearbeitet werden kann. Durch den grauen Hintergrund wird angegeben, dass ein Bibliothekselement und kein Dokument bearbeitet wird.
4 Nehmen Sie die gewnschten nderungen vor und speichern Sie sie dann. 5 Geben Sie an, ob die Dokumente auf der lokalen Site aktualisiert werden sollen, auf denen das Bibliothekselement
verwendet wird. Whlen Sie Aktualisieren aus, damit die Dokumente sofort aktualisiert werden. Wenn Sie Nicht aktualisieren auswhlen, werden die Dokumente erst aktualisiert, wenn Sie Modifizieren > Bibliothek > Aktuelle Seite aktualisieren oder Seiten aktualisieren auswhlen.
Aktuelles Dokument zur Verwendung der aktuellen Version aller Bibliothekselemente aktualisieren
Whlen Sie Modifizieren > Bibliothek > Aktuelle Seite aktualisieren aus.
Gesamte Site oder alle Dokumente mit einem bestimmten Bibliothekselement aktualisieren
1 Whlen Sie Modifizieren > Bibliothek > Seite aktualisieren aus. 2 Geben Sie im Popupmen Suchen in die zu aktualisierenden Objekte an:
Wenn alle Seiten der ausgewhlten Site aktualisiert werden sollen, sodass die aktuelle Version aller
Bibliothekselemente verwendet wird, whlen Sie Gesamte Site und anschlieend im daneben angezeigten Popupmen den Namen der Site aus.
Wenn alle Seiten der aktuellen Site aktualisiert werden sollen, in denen das Bibliothekselement verwendet wird,
whlen Sie Dateien mit und anschlieend im daneben angezeigten Popupmen den Namen eines Bibliothekselements aus.
3 Achten Sie darauf, dass unter Aktualisieren das Kontrollkstchen Bibliothekselemente aktiviert ist.
Wenn Sie gleichzeitig Vorlagen aktualisieren mchten, whlen Sie auch Vorlagen aus.
4 Klicken Sie auf Starten.
Die Dateien werden in Dreamweaver entsprechend den Angaben aktualisiert. Wenn die Option Protokoll anzeigen aktiviert ist, wird in Dreamweaver ein Bericht mit den erfolgreich aktualisierten Dateien sowie anderen Informationen generiert.
Bibliothekselemente umbenennen
1 Whlen Sie im Bedienfeld Elemente die Kategorie Bibliothek
aus.
2 Whlen Sie das Bibliothekselement aus und klicken Sie nach einer Pause erneut auf das Element. (Doppelklicken
Sie nicht auf den Namen, da dadurch das Element zum Bearbeiten geffnet wird.)
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 129
Elemente und Bibliotheken verwalten
3 Geben Sie einen neuen Namen ein. 4 Klicken Sie auf eine andere Stelle oder drcken Sie die Eingabetaste (Windows) bzw. Return (Macintosh). 5 Geben Sie an, ob Dokumente aktualisiert werden sollen, in denen das Bibliothekselement verwendet wird. Whlen
aus.
das Element gelscht werden soll. Wichtig: Ein gelschtes Bibliothekselement kann nicht wiederhergestellt werden. Es kann jedoch neu erstellt werden.
Verwandte Themen
Farbwhler verwenden auf Seite 229
(Macintosh) aus.
2 Whlen Sie im linken Bereich des Dialogfelds Voreinstellungen in der Liste die Kategorie Markierung aus. 3 Klicken Sie in das Farbfeld fr Bibliothekselemente und whlen Sie mit dem Farbwhler eine Markierungsfarbe
aus (oder geben Sie den Hexadezimalwert fr die Markierungsfarbe im Textfeld ein).
4 Whlen Sie Anzeigen aus, um die Markierungsfarbe im Dokumentfenster anzuzeigen. 5 Klicken Sie auf OK.
Elemente aus. Wenn die Markierung ausgeblendet werden soll, deaktivieren Sie Unsichtbare Elemente.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 130
Elemente und Bibliotheken verwalten
entsprechenden Quelldatei auf. Das entsprechende Element kann im Dokument bearbeitet werden, es ist jedoch kein Bibliothekselement mehr und wird beim ndern des Originalelements nicht mehr aktualisiert.
Neu erstellen berschreibt das ursprngliche Bibliothekselement mit der aktuellen Auswahl. Mit dieser Option
knnen Sie Bibliothekselemente neu erstellen, wenn das ursprngliche Bibliothekselement fehlt oder versehentlich gelscht wurde.
Notieren Sie sich den Namen des Bibliothekselements und die enthaltenen Tags. Sie bentigen diese Informationen spter.
2 Whlen Sie das Bibliothekselement aus und klicken Sie dann im Eigenschafteninspektor (Fenster >
aus.
7 Notieren Sie den genauen Namen (unter Bercksichtigung der Gro- und Kleinschreibung) des ursprnglichen
Bibliothekselements, whlen Sie es aus und klicken Sie dann auf die Schaltflche Lschen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 131
Elemente und Bibliotheken verwalten
8 Whlen Sie im Dokumentfenster alle Elemente aus, aus denen sich das Bibliothekselement zusammensetzt.
Achten Sie darauf, dass Sie genau die gleichen Elemente auswhlen, die im ursprnglichen Bibliothekselement vorhanden waren.
9 Klicken Sie im Bedienfeld Elemente auf die Schaltflche Neues Bibliothekselement
und geben Sie dem neuen Element den Namen des gelschten Elements. Verwenden Sie dabei die gleiche Schreibweise sowie Ground Kleinschreibung. Modifizieren > Bibliothek > Seiten aktualisieren aus.
10 Wenn Sie das Bibliothekselement in den anderen Dokumenten der Site aktualisieren mchten, whlen Sie 11 Whlen Sie im Popupmen Suchen in die Option Dateien mit aus. 12 Whlen Sie im Popupmen daneben den Namen des soeben neu erstellten Bibliothekselements aus. 13 berprfen Sie, ob unter der Option Aktualisieren das Kontrollkstchen Bibliothekselemente aktiviert ist und
Verwandte Themen
JavaScript-Verhalten verwenden auf Seite 356
ENTWURF
Letzte Aktualisierung 19.3.2010
132
Verwandte Themen
Mit Div-Tags arbeiten auf Seite 167 Seitenlayouts mit CSS gestalten auf Seite 161 Tutorial zum besseren Verstehen von CSS
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 133
Seiten mit CSS erstellen
CSS-Regeln
Eine CSS-Formatierungsregel besteht aus zwei Teilen: dem Selektor und der Deklaration (bzw. meistens einem Block aus mehreren Deklarationen). Der Selektor ist ein Begriff (wie p, h1,ein Klassenname oder ein id-Attribut), mit dem das formatierte Element identifiziert wird. Mit dem Deklarationsblock werden dagegen die Stileigenschaften selbst definiert. Im folgenden Beispiel ist h1 der Selektor, die Elemente in der geschweiften Klammer ({}) bilden den Deklarationsblock:
h1 { font-size: 16 pixels; font-family: Helvetica; font-weight:bold; }
Eine einzelne Deklaration besteht ihrerseits aus zwei Teilen: der Eigenschaft (z. B. font-family) und dem Wert (z. B. Helvetica). In der obigen CSS-Regel wurde ein bestimmter Stil fr h1-Tags erstellt: der Text fr alle mit diesem Stil verknpften h1-Tags hat eine Gre von 16 Pixel, die Schriftart Helvetica und den Schriftschnitt fett. Der Stil wird ber eine oder mehrere Regeln definiert und getrennt von dem eigentlichen Text gespeichert, dessen Formatierung er festlegt entweder in einem externen Stylesheet oder im head-Bereich eines HTML-Dokuments. So lsst sich eine Regel fr h1-Tags gleichzeitig auf viele Tags anwenden. Bei Nutzung externer Stylesheets kann sich die Regel auch auf Tags erstrecken, die sich auf zahlreichen verschiedenen Seiten befinden. Durch das CSS-Konzept wird die Aktualisierung von Websites so erheblich vereinfacht. Eine CSS-Regel braucht nur an einem einzigen Ort gendert zu werden, um die Formatierung aller Elemente, die den in ihr definierten Stil verwenden, automatisch zu aktualisieren.
Where to stay
What to do
main.html
Spring Festival
Externes Stylesheet
events.html
Klassenstile ermglichen die Anwendung von Formatierungseigenschaften auf beliebige Elemente auf der Seite. HTML-Tag-Stile legen die Formatierung fr ein bestimmtes Tag, z. B. fr h1, fest. Wenn Sie einen CSS-Stil fr das
h1-Tag erstellen oder ndern, werden smtliche mit dem h1-Tag formatierten Textstellen sofort aktualisiert.
Erweiterte Stile definieren die Formatierung einer bestimmten Kombination von Elementen oder anderer in CSS
zulssiger Selektorformulare neu (der Selektor td h2 gilt z. B. fr alle h2- Kopfzeilen in einer Tabellenzelle). Erweiterte Stile knnen ferner die Formatierung von Tags neu definieren, die ein bestimmtes id-Attribut enthalten (z. B.gelten die durch #myStyle definierten Stile fr alle Tags, die das Attribut-Wert-Paar id="myStyle" enthalten).
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 134
Seiten mit CSS erstellen
sind (dies ist keine HTML-Datei). Diese Datei wird ber einen Hyperlink im head-Bereich eines Dokuments oder eine @import-Regel mit einer oder mehreren Seiten einer Website verknpft.
Interne (oder eingebettete) CSS-Stylesheets Sammlungen von CSS-Regeln, die sich in einem style-Tag im Head-
Dreamweaver erkennt Stile, die in vorhandenen Dokumenten definiert sind, sofern diese Stile den CSS-Richtlinien entsprechen. Dreamweaver stellt die zugewiesenen Stile zudem direkt in der Entwurfsansicht dar. (Die Dokumentvorschau in einem Browserfenster vermittelt gleichwohl den genauesten Eindruck vom LiveErscheinungsbild der Seite.) Einige CSS-Stile werden in Microsoft Internet Explorer, Netscape, Opera, Apple Safari und anderen Browsern nicht einheitlich dargestellt; andere werden derzeit von keinem Browsertyp untersttzt. Um das mit Dreamweaver gelieferte CSS-Referenzhandbuch von OReilly anzuzeigen, whlen Sie Hilfe > Referenz und anschlieend im Bedienfeld Referenz im Popupmen Buch die Option OReilly CSS Referenz.
Verwandte Themen
Klassenstile zuweisen, entfernen oder umbenennen auf Seite 150
Cascading Styles
Der Begriff cascading (kaskadierend) bezieht sich auf die Art und Weise, in der ein Browser die Stile bestimmter Elemente einer Webseite anzeigt. Die Stile, die auf einer Webseite zu sehen sind, knnen aus drei unterschiedlichen Quellen stammen: Dem Stylesheet, das der Autor der Seite erstellt hat, ggf. den benutzerangepassten Stilen und den Standardstilen des Browsers. In den vorherigen Abschnitten ging es um die Erstellung von Stilen fr eine Webseite, die ein Autor der Webseite und der Stylesheets dieser Seite hinzugefgt hat. Aber die Browser verfgen ebenfalls ber eigene Standard-Stylesheets, mit denen die Anzeige von Webseiten definiert wird. Auerdem knnen auch die Benutzer ihre Browser anpassen und so die Anzeige von Webseiten ndern. Letztendlich hngt die Anzeige einer Webseite von den Regeln ab, die sich aus der berschneidung (Kaskadierung) der Stile dieser drei Quellen ergeben, um die Webseite optimal anzuzeigen. Anhand eines allgemeinen Tags - dem Absatz-Tag <p> - wird dieses Konzept verdeutlicht. In der Standardeinstellung verfgen die Browser ber Stylesheets, mit denen die Schriftart und die Schriftgre von Flietext definiert wird (also von Text, der im HTML-Code zwischen den <p>-Tags enthalten ist). So wird in der Standardeinstellung jeglicher Flietext, einschlielich Absatztext, in Internet Explorer beispielsweise in Times New Roman, mittlere Gre, angezeigt. Als Autor einer Webseite knnen Sie aber natrlich auch ein eigenes Stylesheet anlegen, mit dem der Standardstil des Browsers fr Absatztext und die Schriftgre berschrieben werden. So knnen Sie beispielsweise in einem Stylesheet die folgende Regel definieren:
p { font-family: Arial; font-size: small; }
Sobald ein Benutzer die Seite ldt, berschreiben die von Ihnen als dem Autor der Webseite definierten Absatzschriftart und die Greneinstellungen die Standardeinstellungen des Browsers.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 135
Seiten mit CSS erstellen
Die Benutzer knnen die Browseranzeige so anpassen, wie es Ihrer Nutzung am besten entspricht. In Internet Explorer knnen sie beispielsweise mithilfe von Ansicht > Textgre > Sehr gro die Schriftart der Seite vergrern, falls ihnen die Schrift zu klein erscheint. Letztendlich berschreibt (zumindest in diesem Fall) die vom Benutzer genderte Einstellung sowohl den Standardstil des Browsers als auch den vom Autor der Webseite definierten Absatzstil. Aber auch die als Vererbung bezeichnete bernahme der Eigenschaften von bergeordneten Elementen spielt bei der Kaskadierung eine Rolle. Die Eigenschaften der meisten Elemente einer Webseite werden bernommen (vererbt): Absatz-Tags erben beispielsweise bestimmte Eigenschaften von den body-Tags und die Tags fr Aufzhlungen bernehmen bestimmte Eigenschaften der Absatz-Tags. Wenn Sie also in einem Stylesheet die folgende Regel definieren:
body { font-family: Arial; font-style: italic; }
werden alle Absatz-Tags Ihrer Webseite (sowie der Text, der Eigenschaften von diesen Absatz-Tags bernimmt) in Arial und kursiv angezeigt, da das Absatz-Tag diese Eigenschaften vom body-Tag erbt. Natrlich knnen Sie Ihre Regeln auf differenzierter definieren und Stile erstellen, die z. B. auch die Standardformeln der Vererbung berschreiben. So knnen Sie beispielsweise in einem Stylesheet die folgende Regel definieren:
body { font-family: Arial; font-style: italic; } p { font-family: Courier; font-style: normal; }
Der gesamte Flietext wird in Arial angezeigt - mit Ausnahme von Text in Absatz-Tags und Text, der diese Eigenschaften bernimmt. Dieser wird in einer normalen Courier-Schrift dargestellt. Technisch gesehen erbt der Absatztext zunchst die Eigenschaften, die fr das body-Tag definiert wurden. Aber diese Eigenschaften werden dann ignoriert, da fr den Absatztext ja eigene Eigenschaften festgelegt wurden. Anders ausgedrckt erben die Seitenelemente zwar die Eigenschaften bergeordneter Objekte, wenden dann aber eigene Tag-Eigenschaften an und berschreiben die Standardeinstellungen der Vererbung. Alle oben beschriebenen Faktoren sowie andere Aspekte, wie die CSS-Spezifizierung (ein System, das den einzelnen Arten von CSS-Regeln eine unterschiedliche Gewichtung zuweist) und die Reihenfolge der CSS-Regeln, ergeben eine komplexe berschneidung von Elementen mit hheren und niedrigeren Prioritten. Weitere Informationen zu den Regeln der Kaskadierung, Vererbung und Spezifizierung finden Sie auf der Seite www.w3.org/TR/CSS2/cascade.html.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 136
Seiten mit CSS erstellen
Neben selbst erstellten Stilen und Stylesheets knnen Sie auch die vordefinierten Stylesheets von Dreamweaver auf Ihre Dokumente anwenden. Ein Tutorial zur Textformatierung mit CSS finden Sie unter www.adobe.com/go/vid0153_de.
Verwandte Themen
Text einfgen und formatieren auf Seite 232 Neue CSS-Regeln erstellen auf Seite 141 Tutorial zur Textformatierung mit CSS
CSS-Kurzschrifteigenschaften
Die CSS-Eigenschaften ermglichen die Erstellung von Stilen mithilfe einer abgekrzten Syntax, CSS-Kurzschrift genannt. Mit der CSS-Kurzschrift knnen Sie die Werte zahlreicher Eigenschaften mit einer einzigen Deklaration bestimmen. Die Eigenschaft font ermglicht es Ihnen beispielsweise, mit einer einzigen Syntaxzeile die Eigenschaften zu font-style, font-variant, font-weight, font-size, line-height und font-family einzurichten. Bei der Verwendung von CSS-Kurzschrift ist zu beachten, dass den von einer CSS-Kurzschrifteigenschaft ausgelassenen Werten der Standardwert zugeordnet wird. Dies kann dazu fhren, dass Seiten nicht ordnungsgem angezeigt werden, wenn demselben Tag zwei oder mehr CSS-Regeln zugeordnet werden. Die nachfolgend dargestellte Regel fr h1 verwendet beispielsweise die lange CSS-Syntax. Beachten Sie, dass den Eigenschaften font-variant, font-stretch, font-size-adjust und font-style ihre Standardwerte zugeordnet wurden.
h1 { font-weight: bold; font-size: 16pt; line-height: 18pt; font-family: Arial; font-variant: normal; font-style: normal; font-stretch: normal; font-size-adjust: none }
Bei Verwendung der Kurzschrift werden den ausgelassenen Werten automatisch ihre Standardwerte zugewiesen. Daher werden in obigem Kurzschriftbeispiel die Tags font-variant, font-style, font-stretch und font-sizeadjust ausgelassen Wenn Sie Stile an mehreren Orten definiert haben (z. B. in eine HTML-Seite eingebettet und aus einem externen Stylesheet importiert) und sowohl die lange als auch die kurze Form der CSS-Syntax verwenden, bedenken Sie, dass Eigenschaften, die in einer Kurzschriftregel ausgelassen werden, mglicherweise Eigenschaften auer Kraft setzen (oder berlagern), die an anderer Stelle explizit eingerichtet wurden.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 137
Seiten mit CSS erstellen
Daher verwendet Dreamweaver standardmig die lange Form der CSS-Schreibweise. Auf diese Weise werden Probleme vermieden, die auftreten knnen, wenn eine Kurzschriftregel eine Langschriftregel berschreibt. Wenn Sie eine mit CSS-Kurzschrift codierte Webseite in Dreamweaver ffnen, achten Sie darauf, dass Dreamweaver etwaige neue CSS-Regeln in Langschrift erstellt. Sie knnen bestimmen, wie Dreamweaver CSS-Regeln erstellt und bearbeitet, indem Sie im Dialogfeld Voreinstellungen (Bearbeiten > Voreinstellungen (Windows) bzw. Dreamweaver > Voreinstellungen (Macintosh)) in der Kategorie CSS-Stile die CSS-Bearbeitungsvoreinstellungen ndern. Hinweis: ber das Bedienfeld CSS-Stile werden Regeln nur in Langschrift erstellt. Wenn Sie eine Seite oder ein CSSStylesheet mit dem Bedienfeld CSS-Stile erstellen, bedenken Sie, dass durch Verwendung der Kurzschrift in CSS-Regeln mglicherweise Eigenschaften auer Kraft gesetzt werden, die in Langschrift erstellt wurden. Erstellen Sie Ihre Stile daher in CSS-Langschrift.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 138
Seiten mit CSS erstellen
Sie knnen die Gre eines beliebigen Bereichs durch Ziehen des Rahmens zwischen den Bereichen ndern. Die Gre von Spalten knnen Sie ndern, indem Sie die Trennlinien ziehen. Im Bedienfeld Zusammenfassung fr Auswahl wird eine Zusammenfassung der CSS-Eigenschaften und zugehrigen Werte fr das Element angezeigt, das derzeit im aktuellen Dokument ausgewhlt wurde. Die Zusammenfassung enthlt die Eigenschaften fr alle Regeln, die direkt fr die Auswahl gelten. Es werden nur festgelegte Eigenschaften angezeigt. Die folgenden Regeln erstellen beispielsweise einen Klassenstil und einen Tag-Stil (in diesem Fall paragraph):
.foo{ color: green; font-family: 'Arial'; } p{ font-family: 'serif'; font-size: 12px; }
Wenn Sie im Dokumentfenster Absatztext mit dem Klassenstil .foo auswhlen, werden im Bedienfeld Zusammenfassung fr Auswahl die relevanten Eigenschaften fr beide Regeln angezeigt, da beide Regeln fr die Auswahl gelten. In diesem Fall werden im Bereich Zusammenfassung fr Auswahl folgende Eigenschaften aufgefhrt:
font-size: 12px font-family: 'Arial' color: green
Die Eigenschaften werden im Bedienfeld Zusammenfassung fr Auswahl in aufsteigender Reihenfolge nach Genauigkeit angezeigt. Im obigen Beispiel definiert der Tag-Stil die Schriftgre und der Klassenstil die Schriftfamilie und die Farbe. (Die vom Klassenstil definierte Schriftfamilie setzt die vom Tag-Stil definierte Schriftfamilie auer Kraft, da Klassenselektoren eine hhere Genauigkeit haben als Tag-Selektoren. Weitere Informationen zur CSSGenauigkeit finden Sie unter www.w3.org/TR/CSS2/cascade.html. Im Bedienfeld Regeln werden je nach Auswahl zwei verschiedene Ansichten angezeigt: die Ansicht ber oder die Ansicht Regeln. In der Ansicht ber (Standardansicht) zeigt das Bedienfeld den Namen der Regel an, die die ausgewhlte CSS-Eigenschaft definiert, und den Namen der Datei, die die Regel enthlt. In der Ansicht Regeln zeigt das Bedienfeld eine Hierarchie aller Regeln an, die direkt oder indirekt fr die aktuelle Auswahl gelten. (Das Tag, fr das die Regel direkt gilt, wird in der rechten Spalte angezeigt.) Sie knnen durch Klicken auf die Schaltflchen Informationen ber ausgewhlte Eigenschaft anzeigen und CSS-Regeln fr ausgewhltes Tag anzeigen in der oberen rechten Ecke des Bedienfelds Regeln zwischen den beiden Ansichten umschalten. Wenn Sie im Bedienfeld Zusammenfassung fr Auswahl eine Eigenschaft auswhlen, werden alle Eigenschaften der definierenden Regel im Bedienfeld Eigenschaften angezeigt. (Die definierende Regel wird auch im Bedienfeld Regeln ausgewhlt, sofern diese Ansicht den Fokus besitzt.) Wenn es beispielsweise eine Regel namens .maintext gibt, die eine Schriftfamilie, Schriftgre und Farbe definiert, werden durch Auswhlen einer dieser Eigenschaften im Bedienfeld Zusammenfassung fr Auswahl im Bedienfeld Eigenschaften alle Eigenschaften angezeigt, die von der Regel .maintext definiert werden, und im Bedienfeld Regeln die ausgewhlte Regel .maintext. (Darber hinaus werden im Bedienfeld Regeln ausgewhlte Regeln im Bedienfeld Eigenschaften der betreffenden Regel angezeigt.) Sie knnen das CSS dann problemlos ber das Bedienfeld Eigenschaften modifizieren, ganz gleich, ob das CSS im aktuellen Dokument eingebettet oder ber ein angefgtes Stylesheet verknpft ist. Standardmig werden im Bedienfeld Eigenschaften nur die zuvor festgelegten Eigenschaften (alphabetisch) angezeigt.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 139
Seiten mit CSS erstellen
Sie knnen dieses Bedienfeld ferner in zwei weiteren Ansichten anzeigen. In der Kategorieansicht werden Eigenschaften in Kategorien, wie z. B. Schriftart, Hintergrund, Block, Rand usw., gruppiert und die festgelegten Eigenschaften am oberen Rand jeder Kategorie als blauer Text angezeigt. In der Listenansicht wird eine alphabetische Liste aller verfgbaren Eigenschaften angezeigt. Auch hier werden die festgelegten Eigenschaften so sortiert, dass sie am oberen Rand jeder Kategorie als blauer Text erscheinen. Um zwischen den Ansichten zu wechseln, klicken Sie auf die Schaltflche Kategorieansicht zeigen, Listenansicht anzeigen oder Nur festgelegte Eigenschaften anzeigen, die sich unten links im Bedienfeld Eigenschaften befinden. Die festgelegten Eigenschaften sind in allen Ansichten blau dargestellt, whrend die fr diese Auswahl irrelevanten Eigenschaften rot durchgestrichen sind. Wenn Sie den Mauszeiger (oder Cursor) auf einer irrelevanten Regel positionieren, wird eine Meldung angezeigt, in der erklrt wird, weshalb diese Eigenschaft irrelevant ist. Normalerweise ist eine Eigenschaft irrelevant, weil sie auer Kraft gesetzt oder nicht bernommen wurde. nderungen, die Sie im Bedienfeld Regeln vornehmen, werden sofort bernommen, sodass Sie die nderungen whrend Ihrer Arbeit in einer Vorschau verfolgen knnen.
Verwandte Themen
Bedienfeld CSS-Stile ffnen auf Seite 141
Sie knnen die Gre eines beliebigen Bereichs durch Ziehen des Rahmens zwischen den Bereichen ndern. Die Gre der Eigenschaftenspalten knnen Sie durch Ziehen der Trennlinien ndern. Wenn Sie im Bedienfeld Alle Regeln eine Regel auswhlen, werden alle Eigenschaften, die in dieser Regel definiert sind, im Bedienfeld Eigenschaften angezeigt. Sie knnen das CSS dann problemlos ber das Bedienfeld Eigenschaften modifizieren, ganz gleich, ob das CSS im aktuellen Dokument eingebettet oder ber ein angefgtes Stylesheet verknpft ist. Standardmig werden im Bedienfeld Eigenschaften nur die zuvor festgelegten Eigenschaften (alphabetisch) angezeigt.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 140
Seiten mit CSS erstellen
Sie knnen Eigenschaften ferner in zwei weiteren Ansichten anzeigen. In der Kategorieansicht werden Eigenschaften in Kategorien, wie z. B. Schriftart, Hintergrund, Block, Rand usw., gruppiert und die festgelegten Eigenschaften am oberen Rand jeder Kategorie angezeigt. Die Listenansicht enthlt eine alphabetische Liste aller verfgbaren Eigenschaften und sortiert die Eigenschaften ebenfalls am oberen Rand. Um zwischen den Ansichten zu wechseln, klicken Sie auf die Schaltflche Kategorieansicht zeigen, Listenansicht anzeigen oder Nur festgelegte Eigenschaften anzeigen, die sich unten links im Bedienfeld Eigenschaften befinden. Die festgelegten Eigenschaften werden in allen Ansichten blau angezeigt. nderungen, die Sie im Bedienfeld Regeln vornehmen, werden sofort bernommen, sodass Sie die nderungen whrend Ihrer Arbeit in einer Vorschau verfolgen knnen.
Verwandte Themen
Bedienfeld CSS-Stile ffnen auf Seite 141
Kategorieansicht anzeigen Unterteilt die von Dreamweaver untersttzten CSS-Eigenschaften in acht Kategorien:
Schriftart, Hintergrund, Block, Rahmen, Box, Liste, Positionierung und Erweiterungen. Die Eigenschaften jeder Kategorie sind in einer ausblendbaren Liste aufgefhrt, die Sie durch Klicken auf die Schaltflche mit dem Pluszeichen (+) neben dem Kategorienamen erweitern oder reduzieren knnen. Festgelegte Eigenschaften werden oben in der Liste in Blau angezeigt.
Listenansicht anzeigen Zeigt alle von Dreamweaver untersttzten CSS-Eigenschaften in alphabetischer Reihenfolge
Standardansicht. Sowohl im Modus Alle als auch im Modus Aktuell enthlt das Bedienfeld CSS-Stile die folgenden Schaltflchen:
A: Stylesheet anfgen B: Neue CSS-Regel C: Stil bearbeiten D: CSS-Eigenschaft deaktivieren/aktivieren E: CSS-Regel lschen
Stylesheet anfgen ffnet das Dialogfeld Entferntes Stylesheet hinzufgen. Whlen Sie ein externes Stylesheet aus,
zu dem Sie eine Verknpfung herstellen oder das Sie in Ihr aktuelles Dokument importieren mchten.
Neue CSS-Regel ffnet ein Dialogfeld, in dem Sie die Art des zu erstellenden Stils auswhlen. Um beispielsweise einen
benutzerdefinierten Stil zu erstellen, definieren Sie entweder ein HTML-Tag neu oder definieren Sie einen CSSSelektor.
Stil bearbeiten ffnet ein Dialogfeld, in dem Sie die Stile im aktuellen Dokument oder in einem externen Stylesheet
bearbeiten knnen.
CSS-Regel lschen Entfernt die ausgewhlte Regel oder Eigenschaft aus dem Bedienfeld CSS-Stile und entfernt die Formatierung von allen Elementen, auf die sie angewendet wurde. Klassen- oder Kennungen-Eigenschaften, auf die
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 141
Seiten mit CSS erstellen
der Stil verweist, werden mit dieser Option jedoch nicht entfernt. Die Schaltflche CSS-Regel lschen kann auch verwendet werden, um ein angehngtes CSS-Stylesheet abzutrennen (die Verknpfung zu entfernen). Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste (Macintosh) in das Bedienfeld CSSStile, um ein Kontextmen mit Optionen fr CSS-Stylesheet-Befehle zu ffnen.
Whlen Sie Fenster > CSS-Stile aus. Drcken Sie Umschalt+F11. Klicken Sie im Eigenschafteninspektor fr Bilder auf die Schaltflche CSS.
(Macintosh) und whlen Sie in der Liste Kategorie den Eintrag CSS-Stile.
2 Whlen Sie die gewnschten CSS-Stiloptionen aus:
Beim Erstellen von CSS-Regeln: Kurzschrift verwenden fr Legt fest, welche CSS-Stilattribute in Dreamweaver in
Kurzschrift umwandelt. Wenn Sie Falls Original in Kurzschrift whlen, bleiben alle Stile unverndert. Whlen Sie dagegen Gem obiger Einstellungen, werden die Stile aller Eigenschaften, die Sie unter Kurzschrift verwenden fr ausgewhlt haben, in Kurzschrift umgewandelt.
Beim Doppelklicken im CSS-Bedienfeld Ermglicht die Auswahl eines Werkzeugs fr das Bearbeiten von CSS-Regeln.
Whlen Sie Formatieren > CSS-Stile > Neu aus. Klicken Sie im Bedienfeld CSS-Stile (Fenster > CSS-Stile) rechts unten auf die Schaltflche Neue CSS-Regel (+). Markieren Sie Text im Dokumentfenster und whlen Sie im Popupmen Zielregel des CSSEigenschafteninspektors (Fenster > Eigenschaften) die Option Neue CSS-Regel aus. Klicken Sie dann auf die Schaltflche Regel bearbeiten oder whlen Sie im Eigenschafteninspektor eine Option aus (z. B. die Schaltflche Fett), um eine neue Regel einzurichten.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 142
Seiten mit CSS erstellen
2 Geben Sie im Dialogfeld Neue CSS-Regel den Selektor-Typ fr die zu erstellende CSS-Regel an:
Wenn Sie einen benutzerdefinierten Stil erstellen mchten, der als class-Attribut auf HTML-Elemente
angewendet werden kann, whlen Sie im Popupmen Selektor-Typ die Option Klasse aus und geben Sie dann im Textfeld Selektor-Name einen Namen fr den Stil ein. Hinweis: Die Namen von Klassen mssen mit einem Punkt beginnen und knnen aus einer beliebigen Kombination von Buchstaben und Zahlen bestehen (z. B. .myhead1). Wenn Sie am Anfang keinen Punkt eingeben, fgt Dreamweaver ihn automatisch hinzu.
Wenn Sie die Formatierung fr ein Tag mit einem bestimmten ID-Attribut festlegen mchten, whlen Sie im
Popupmen Selektor-Typ die Option ID aus und geben Sie dann im Textfeld Selektor-Name die eindeutige ID (z. B. containerDIV) ein. Hinweis: IDs mssen mit einem Nummernsymbol (#) beginnen und knnen aus einer beliebigen Kombination von Buchstaben und Ziffern bestehen (z. B. #myID1). Wenn Sie als erstes Zeichen kein Nummernsymbol eingeben, wird das Symbol in Dreamweaver automatisch hinzugefgt.
Wenn Sie die Standardformatierung eines bestimmten HTML-Tags neu definieren mchten, whlen Sie im
Popupmen Selektor-Typ die Option Tag aus. Geben Sie dann im Textfeld Selektor-Name ein HTML-Tag ein oder whlen Sie im Popupmen ein Tag aus.
Wenn Sie eine zusammengesetzte Regel festlegen mchten, die auf mindestens zwei Tags, Klassen oder IDs
gleichzeitig angewendet wird, whlen Sie die Option Zusammengesetzter Ausdruck aus und geben Sie die Selektoren fr die zusammengesetzte Regel ein. Wenn Sie beispielsweise div p eingeben, wirkt sich die Regel auf alle p-Elemente in Div-Tags aus. Beim Hinzufgen oder Lschen von Selektoren wird in einem Textbereich genau beschrieben, auf welche Elemente sich die Regel auswirkt.
3 Whlen Sie die Position aus, an der Sie die Regel definieren mchten, und klicken Sie dann auf OK.
Wenn Sie die Regel in einem Stylesheet ablegen mchten, das bereits mit dem Dokument verknpft ist, whlen Sie
das entsprechende Stylesheet aus.
Wenn Sie ein externes Stylesheet erstellen mchten, whlen Sie Neue Stylesheet-Datei. Wenn Sie den Stil in das aktuelle Dokument einbetten mchten, whlen Sie Nur dieses Dokument.
4 Whlen Sie im Dialogfeld CSS-Regel-Definition die Stiloptionen aus, die Sie fr die neue CSS-Regel festlegen
Hinweis: Wenn Sie auf OK klicken, ohne Formatoptionen festgelegt zu haben, wird eine neue leere Regel erstellt.
CSS-Eigenschaften festlegen
Sie knnen Eigenschaften fr CSS-Regeln festlegen. Hierzu zhlen beispielsweise die Textschriftart, das Hintergrundbild bzw. die Hintergrundfarbe, der Abstand und Layouteigenschaften sowie die Darstellung von Listenelementen. Erstellen Sie zunchst eine neue Regel und legen Sie dann beliebige der folgenden Eigenschaften fest.
CSS-Schrifteigenschaften definieren
In der Kategorie Schrift des Dialogfelds CSS-Regel-Definition definieren Sie grundlegende Schriftart- und Schriftstileigenschaften fr einen CSS-Stil.
1 ffnen Sie das Bedienfeld CSS-Stile (Umschalt+F11), sofern es noch nicht geffnet ist. 2 Doppelklicken Sie im oberen Bereich des Bedienfelds CSS-Stile auf eine vorhandene Regel bzw. auf eine
vorhandene Eigenschaft.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 143
Seiten mit CSS erstellen
3 Whlen Sie im Dialogfeld CSS-Regel-Definition die Kategorie Schrift aus und legen Sie die gewnschten
Stileigenschaften fest. Die folgenden Eigenschaften knnen leer gelassen werden, wenn sie fr den Stil nicht von Bedeutung sind:
Font-family Legt mindestens eine Schriftfamilie fr den Stil fest. In Browsern wird der Text in der ersten Schrift der
Schriftfamilie angezeigt, die auf dem jeweiligen Computer installiert ist. Geben Sie aus Grnden der Kompatibilitt mit Internet Explorer 3.0 an erster Stelle eine Windows-Schrift an. Das Font-family-Attribut wird von beiden Browsern untersttzt.
Font-size Legt die Gre des Texts fest. Sie knnen eine bestimmte Gre whlen, indem Sie die Gre als Zahl und
die entsprechende Maeinheit auswhlen, oder Sie knnen eine relative Gre whlen. Whlen Sie Pixel als Greneinheit, wenn Sie verhindern mchten, dass Browser den Text verzerren. Das Font-size-Attribut wird von beiden Browsern untersttzt.
Font-style Legt den Schriftstil fest (Standard, kursiv oder oblique). Die Standardeinstellung lautet normal. Das
Standardeinstellung fr normalen Text ist none. Die Standardeinstellung fr Hyperlinks ist underline. Wenn Sie fr Hyperlinks die Einstellung none whlen, knnen Sie die Unterstreichung von Hyperlinks entfernen, indem Sie eine spezielle Klasse definieren. Das Font-decoration-Attribut wird von beiden Browsern untersttzt.
Font-weight Weist der Schrift eine spezifische oder relative Strke zu. Eine normale Strke entspricht dem Wert 400,
fett gedruckte Schrift hat den Wert 700. Das Font-weight-Attribut wird von beiden Browsern untersttzt.
Font-variant Formatiert den Text als Kapitlchen. Dreamweaver zeigt dieses Attribut nicht im Dokumentfenster an. Das Font-variant-Attribut wird von Internet Explorer, aber nicht von Netscape Navigator untersttzt. Text-transform Formatiert den ersten Buchstaben jedes Worts in der Auswahl als Grobuchstaben bzw. stellt alle ausgewhlten Wrter vollstndig in Gro- oder Kleinbuchstaben dar. Das Font-transform-Attribut wird von beiden Browsern untersttzt. Color Bestimmt die Textfarbe. Das Color-Attribut wird von beiden Browsern untersttzt.
4 Nachdem Sie die gewnschten Optionen ausgewhlt haben, klicken Sie links im Bedienfeld auf eine andere CSS-
vorhandene Eigenschaft.
3 Whlen Sie im Dialogfeld CSS-Regel-Definition die Kategorie Hintergrund aus und legen Sie die gewnschten
Stileigenschaften fest.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 144
Seiten mit CSS erstellen
Die folgenden Eigenschaften knnen leer gelassen werden, wenn sie fr den Stil nicht von Bedeutung sind:
Background-color Legt die Hintergrundfarbe fr das Element fest. Das Background-color-Attribut wird von beiden
Browsern untersttzt.
Background-image Legt das Hintergrundbild fr das Element fest. Das Background-image-Attribut wird von beiden Browsern untersttzt. Background-repeat Legt fest, ob und wie das Hintergrundbild wiederholt werden soll. Das Background-repeatAttribut wird von beiden Browsern untersttzt.
Mit no-repeat wird das Bild nur einmal am Anfang des Elements angezeigt. Mit repeat wird das Bild mehrmals horizontal und vertikal hinter dem Element angezeigt. Mit repeat-x und repeat-y wird ein horizontales bzw. vertikales Bilderband angezeigt. Die Bilder werden dabei
auf die Gre des Elements zugeschnitten. Hinweis: Mit dem Background-repeat-Attribut knnen Sie die Definition des body-Tags abwandeln und ein Hintergrundbild definieren, das nicht mehrmals neben- oder untereinander angezeigt wird.
Background-attachment Legt fest, ob die Position des Hintergrundbilds fixiert ist oder ob das Hintergrundbild zusammen mit dem Inhalt einen Bildlauf durchfhrt. Beachten Sie, dass einige Browser auch dann einen Bildlauf fr das Hintergrundbild durchfhren, wenn Sie die feste Position gewhlt haben. Dieses Attribut wird von Internet Explorer, aber nicht von Netscape Navigator untersttzt. Background-position (X) und Background-position (Y) Legen die Anfangsposition des Hintergrunds in Relation zum Element fest. Diese Einstellungen knnen verwendet werden, um ein Hintergrundbild auf der Seite vertikal (Y) und horizontal (X) zu zentrieren. Wenn Sie fr das Background-attachment-Attribut die Einstellung fixed ausgewhlt haben, wird die Position relativ zum Dokumentfenster und nicht relativ zum Element aufgefasst.
4 Nachdem Sie die gewnschten Optionen ausgewhlt haben, klicken Sie links im Bedienfeld auf eine andere CSS-
vorhandene Eigenschaft.
3 Whlen Sie im Dialogfeld CSS-Regel-Definition die Kategorie Block und anschlieend ggf. eine der folgenden
Stileigenschaften aus. (Wenn eine Eigenschaft fr den betreffenden Stil nicht relevant ist, lassen Sie das entsprechende Feld leer.)
Word-spacing Legt den Abstand zwischen Wrtern fest. Um einen bestimmten Wert einzustellen, whlen Sie im Popupmen die Option (Wert) aus und geben Sie einen Zahlenwert ein. Whlen Sie im zweiten Popupmen eine Maeinheit aus (z. B. px, pt usw.).
Hinweis: Sie knnen auch negative Werte eingeben. Allerdings hngt die korrekte Anzeige vom Browser ab. Dreamweaver zeigt dieses Attribut nicht im Dokumentfenster an.
Letter-spacing Bestimmt den Abstand zwischen den Buchstaben oder sonstigen Zeichen. Wenn Sie den
Zeichenabstand verringern mchten, geben Sie einen negativen Wert ein (z. B. -4). Die Einstellung fr den Zeichenabstand setzt die Blocksatz-Einstellung eines Textes auer Kraft. Das Letter-spacing-Attribut wird von Internet Explorer ab Version 4 und von Netscape Navigator 6 untersttzt.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 145
Seiten mit CSS erstellen
Vertical-align Bestimmt die vertikale Ausrichtung des Elements, auf das dieses Attribut angewendet wird.
Dreamweaver zeigt dieses Attribut nur dann im Dokumentfenster an, wenn es auf das <img>-Tag angewendet wird.
Text-align Legt fest, wie Text innerhalb des Elements ausgerichtet wird. Das Text-align-Attribut wird von beiden
Browsern untersttzt.
Text-indent Bestimmt, wie weit die erste Textzeile eingerckt wird. Ein negativer Wert kann verwendet werden, um einen hngenden Einzug zu erstellen, die korrekte Anzeige hngt aber vom Browser ab. Dreamweaver zeigt dieses Attribut nur dann im Dokumentfenster an, wenn das Tag auf Elemente der Blockebene angewendet wird. Das Textindent-Attribut wird von beiden Browsern untersttzt. White-space Legt fest, wie Leerrume innerhalb des Elements gehandhabt werden. Drei Optionen stehen zur Auswahl: Mit der Einstellung normal werden Leerrume entfernt. Mit der Einstellung pre wird der Text so behandelt, als stnde er in pre-Tags (d. h. smtliche Leerrume wie Leerzeichen, Tabulatoren und Absatzmarken werden bercksichtigt). Mit nowrap wird festgelegt, dass nur dann ein Textumbruch erfolgen soll, wenn ein br-Tag gefunden wird. Dreamweaver zeigt dieses Attribut nicht im Dokumentfenster an. Das White-space-Attribut wird von Netscape Navigator und von Internet Explorer ab Version 5.5 untersttzt. Display Bestimmt, ob und wie ein Element angezeigt wird. Die Option none bewirkt, dass das Element, auf das sich
CSS-Boxeigenschaften definieren
ber die Kategorie Box des Dialogfelds CSS-Regel-Definition knnen Sie Einstellungen fr Tags und Eigenschaften definieren, die sich auf die Anordnung der Elemente auf der Seite auswirken. Mit entsprechenden Auffllungs- und Randeinstellungen knnen Sie die Eigenschaften der einzelnen Seiten eines Elements festlegen. Mit der Option Fr alle gleich knnen Sie hingegen allen Seiten eines Elements dieselbe Einstellung zuweisen.
1 ffnen Sie das Bedienfeld CSS-Stile (Umschalt+F11), sofern es noch nicht geffnet ist. 2 Doppelklicken Sie im oberen Bereich des Bedienfelds CSS-Stile auf eine vorhandene Regel bzw. auf eine
vorhandene Eigenschaft.
3 Whlen Sie im Dialogfeld CSS-Regel-Definition die Option Box und anschlieend beliebige der folgenden
Stileigenschaften aus. (Wenn eine Eigenschaft fr den betreffenden Stil nicht relevant ist, lassen Sie das entsprechende Feld leer.)
Width und Height Legen die Breite und Hhe des Elements fest. Float Bestimmt, auf welcher Seite andere Elemente wie etwa Text, absolut positionierte <div>-Elemente, Tabellen
usw. um ein Element herumflieen. Andere Elemente werden rund um das schwebende Element in normaler Weise umgebrochen. Das Float-Attribut wird von beiden Browsern untersttzt.
Clear Legt fest, auf welcher Seite keine AP-Elemente zugelassen sind. Wenn auf der freien Seite ein AP-Element enthalten ist, wird das Element mit der Einstellung Clear darunter verschoben. Das Clear-Attribut wird von beiden Browsern untersttzt. Padding Legt den Abstand zwischen dem Inhalt des Elements und seinem Rahmen fest (wenn kein Rahmen verwendet wird, bezieht sich diese Einstellung auf den Abstand zum Seitenrand). Deaktivieren Sie die Option Fr alle gleich, wenn Sie die Auffllung fr einzelne Seiten des Elements individuell einstellen mchten. Fr alle gleich Legt fr die obere, untere, linke und rechte Seite des jeweiligen Elements dieselbe Auffllung fest.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 146
Seiten mit CSS erstellen
Margin Bestimmt den Abstand zwischen dem Rand eines Elements (bzw. dem Seitenrand, wenn kein Rand vorhanden sind) und einem anderen Element. Dreamweaver zeigt dieses Attribut nur dann im Dokumentfenster an, wenn es auf Elemente der Blockebene angewendet wird (Abstze, berschriften, Listen usw.). Deaktivieren Sie die Option Fr alle gleich, wenn Sie den Randabstand fr einzelne Seiten des Elements individuell einstellen mchten. Fr alle gleich Legt fr die obere, untere, linke und rechte Seite des jeweiligen Elements denselben Randabstand fest.
4 Nachdem Sie die gewnschten Optionen ausgewhlt haben, klicken Sie links im Bedienfeld auf eine andere CSS-
vorhandene Eigenschaft.
3 Whlen Sie im Dialogfeld CSS-Regel-Definition die Kategorie Rahmen aus und legen Sie die folgenden
Stileigenschaften fest. (Wenn eine Eigenschaft fr den betreffenden Stil nicht relevant ist, lassen Sie das entsprechende Feld leer.)
List-style-type Bestimmt das Aussehen des Rahmens. Wie der Rahmen tatschlich dargestellt wird, hngt jedoch vom
jeweiligen Browser ab. Deaktivieren Sie die Option Fr alle gleich, wenn Sie den Rahmenstil fr einzelne Seiten des Elements individuell einstellen mchten.
Fr alle gleich Legt fr die obere, untere, linke und rechte Seite des jeweiligen Elements denselben Rahmenstil fest. Width Legt die Breite des Rahmens um ein Element fest. Das Width-Attribut wird von beiden Browsern untersttzt. Deaktivieren Sie die Option Fr alle gleich, wenn Sie die Rahmenbreite fr einzelne Seiten des Elements individuell einstellen mchten. Fr alle gleich Legt fr die obere, untere, linke und rechte Seite des jeweiligen Elements dieselbe Breite fest. Color Legt die Farbe des Rahmens fest. Sie knnen die Farbe jeder Seite separat festlegen, die Anzeige hngt allerdings vom Browser ab. Deaktivieren Sie die Option Fr alle gleich, wenn Sie die Rahmenfarbe fr einzelne Seiten des Elements individuell einstellen mchten. Fr alle gleich Legt fr die obere, untere, linke und rechte Seite des jeweiligen Elements dieselbe Farbe fest.
4 Nachdem Sie die gewnschten Optionen ausgewhlt haben, klicken Sie links im Bedienfeld auf eine andere CSS-
vorhandene Eigenschaft.
3 Whlen Sie im Dialogfeld CSS-Regel-Definition die Kategorie Liste aus und legen Sie beliebige der folgenden
Stileigenschaften fest. (Wenn eine Eigenschaft fr den betreffenden Stil nicht relevant ist, lassen Sie das entsprechende Feld leer.)
List-style-type Legt das Aussehen von Aufzhlungspunkten bzw. der Nummerierung fest. Das List-style-type-
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 147
Seiten mit CSS erstellen
List-style-image Legt ein Bild fest, das als benutzerdefinierter Listenpunkt verwendet werden soll. Klicken Sie auf Durchsuchen (Windows) bzw. Whlen (Macintosh), um ein Bild auszuwhlen, oder geben Sie den Pfad des Bilds ein. List-style-position Bestimmt, ob bei einem Listenelement eine umgebrochene Zeile eingerckt wird (outside) oder
vorhandene Eigenschaft.
3 Whlen Sie im Dialogfeld CSS-Regel-Definition die Option Positionierung aus und legen Sie die gewnschten
Stileigenschaften fest. Die folgenden Eigenschaften knnen leer gelassen werden, wenn sie fr den Stil nicht von Bedeutung sind:
Position Legt fest, wie der Browser die ausgewhlten Elemente positionieren soll. Folgende Optionen sind verfgbar:
Die Option absolute ordnet den Inhalt unter Verwendung der Koordinaten, die Sie in die Felder Platzierung
eingeben, relativ zum nchsten absolut oder relativ positionierten Vorgnger an. Falls kein absolut oder relativ positionierter Vorgnger existiert, wird der Inhalt relativ zur oberen linken Ecke der Seite positioniert.
Die Option relative ordnet den Inhalt unter Verwendung der Koordinaten, die Sie in die Placement-Felder
eingeben, relativ zur Position des Blocks im Textfluss des Dokuments an. Beispiel: Wenn Sie einem Element eine relative Position und obere und linke Koordinaten von je 20px zuweisen, wird das Element von seiner normalen Position im Fluss aus um 20px nach rechts und 20px nach unten verschoben. Elemente knnen auch relativ - mit oder ohne Koordinaten fr oben, links, rechts oder unten - positioniert werden, um einen Kontext fr absolut positionierte Unterelemente zu schaffen.
Die Option fixed ordnet den Inhalt unter Verwendung der Koordinaten, die Sie in die Placement-Felder
eingeben, relativ zur oberen linken Ecke des Browsers an. Der Inhalt bleibt an dieser Position fixiert, whrend der Benutzer durch die Seite blttert.
Die Option static ordnet den Inhalt an seiner Position im Textfluss an. Dies ist die Standardposition aller
positionierbaren HTML-Elemente.
Visibility Legt den Anfangsstatus fr die Sichtbarkeit des Inhalts fest. Wenn Sie keine Sichtbarkeitseigenschaft
festlegen, wird standardmig der Wert des bergeordneten Tags fr den betreffenden Inhalt bernommen. Die vorgegebene Sichtbarkeitseinstellung fr das <body>-Tag ist visible. Whlen Sie eine der folgenden Sichtbarkeitsoptionen aus:
Die Option inherit bernimmt die Sichtbarkeitseigenschaft des bergeordneten Elements. Die Option visible zeigt den Inhalt an, unabhngig davon, welcher Wert fr das bergeordnete Objekt gilt. Die Option hidden blendet den Inhalt aus, unabhngig davon, welcher Wert fr das bergeordnete Objekt gilt.
Z-Index Legt die Stapelreihenfolge fr den Inhalt fest. Elemente mit hherem Z-Index werden oberhalb von
Elementen mit niedrigerem (oder keinem) Z-Index angezeigt. Sie knnen positive und negative Werte eingeben. (Wenn Ihr Inhalt absolut positioniert ist, ndern Sie die Stapelreihenfolge am einfachsten im Bedienfeld APElemente.)
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 148
Seiten mit CSS erstellen
Overflow Legt fest, was geschieht, wenn der Inhalt eines Containers (z. B. eines <div>- oder <p>-Containers) die
Containergre berschreitet. Diese Eigenschaften steuern, wie eine Erweiterung gehandhabt wird:
Die Option visible vergrert den Container, sodass der ganze Inhalt sichtbar ist. Der Container wird nach unten
und nach rechts erweitert.
Die Option hidden behlt die Gre des Containers bei und schneidet den berlaufenden Inhalt ab. Dabei werden
keine Bildlaufleisten angezeigt.
Die Option scroll fgt dem Container Bildlaufleisten hinzu, unabhngig davon, ob der Inhalt die Containergre
berschreitet oder nicht. Sie knnen Bildlaufleisten explizit hinzufgen, damit in einer dynamischen Umgebung keine Verwirrung entsteht, wenn Bildlaufleisten einmal angezeigt und dann wieder nicht angezeigt werden. Diese Option wird im Dokumentfenster nicht angezeigt.
Die Option auto bewirkt, dass Bildlaufleisten nur dann angezeigt werden, wenn der Inhalt des Containers seine
Begrenzung berschreitet. Diese Option wird im Dokumentfenster nicht angezeigt.
Placement Legt die Position und Gre des Inhaltsblocks fest. Wie der Browser die Position interpretiert, hngt von der Einstellung unter Position ab. Die Grenwerte werden auer Kraft gesetzt, wenn der Inhaltsblock die angegebene Gre berschreitet.
Als Maeinheit fr Position und Gre wird standardmig die Einheit Pixel (px) verwendet. Sie knnen aber auch die folgenden Maeinheiten verwenden: Pica (pc), Punkt (pt), Zoll (in), mm, cm, em, ex oder % (Prozentsatz vom Wert des bergeordneten Elements). Zwischen der Abkrzung der Maeinheit und dem Wert darf kein Leerzeichen stehen: Eine korrekte Eingabe ist zum Beispiel 3mm.
Clip Definiert den sichtbaren Teil des Inhalts. Wenn Sie einen Schneidebereich festlegen, knnen Sie auf diesen mit
einer Skriptsprache wie z. B. JavaScript zugreifen und die Eigenschaften bearbeiten, um Spezialeffekte (z. B. Wischeffekte) zu erzielen. Der Wischeffekt kann ber Zeitleisten und das Verhalten Eigenschaft ndern eingerichtet werden.
4 Nachdem Sie die gewnschten Optionen ausgewhlt haben, klicken Sie links im Bedienfeld auf eine andere CSS-
vorhandene Eigenschaft.
3 Whlen Sie im Dialogfeld CSS-Regel-Definition die Option Erweiterungen und anschlieend beliebige der
folgenden Formateigenschaften. (Wenn eine Eigenschaft fr den betreffenden Stil nicht relevant ist, lassen Sie das entsprechende Feld leer.)
Page-break-before Erzwingt beim Drucken den Beginn einer neuen Seite entweder vor oder nach dem Objekt, das von dem Stil beeinflusst wird. Whlen Sie im Popupmen die gewnschte Option aus. Diese Option wird von Browsern der Version 4.0 nicht untersttzt. In spteren Versionen ist dies jedoch mglicherweise der Fall. Cursor ndert das Aussehen des Mauszeigers, wenn dieser sich auf einem Objekt befindet, das von dem Stil gesteuert
wird. Whlen Sie im Popupmen die gewnschte Option aus. Dieses Attribut wird von Internet Explorer ab Version 4.0 sowie von Netscape Navigator 6 untersttzt.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 149
Seiten mit CSS erstellen
Filter Wendet Spezialeffekte wie Unschrfe oder Invertierung auf das Objekt an, das von dem Stil gesteuert wird. Whlen Sie im Popupmen einen Effekt aus.
4 Nachdem Sie die gewnschten Optionen ausgewhlt haben, klicken Sie links im Bedienfeld auf eine andere CSS-
CSS-Regeln bearbeiten
Bei Bedarf knnen Sie sowohl interne als auch externe Regeln, die Sie auf ein Dokument angewendet haben, mhelos ndern. Wenn Sie Stile in einem CSS-Stylesheet ndern, das bereits den Text in einem Dokument steuert, werden diese nderungen umgehend an allen Textstellen vorgenommen, die von diesem CSS-Stylesheet gesteuert werden. nderungen an einem externen Stylesheet wirken sich auf alle Dokumente aus, die mit ihm verknpft sind. Zum Bearbeiten von Stylesheets knnen Sie einen externen Editor festlegen.
Doppelklicken Sie im Bedienfeld Zusammenfassung fr Auswahl auf eine Eigenschaft, um das Dialogfeld CSSRegel-Definition anzuzeigen, und nehmen Sie die nderungen vor.
Whlen Sie im Bedienfeld Zusammenfassung fr Auswahl eine Eigenschaft aus und bearbeiten Sie diese im
darunter angezeigten Bedienfeld Eigenschaften.
Whlen Sie eine Regel im Bedienfeld Regeln aus und bearbeiten Sie beliebige Eigenschaften der Regel im darunter
angezeigten Bedienfeld Eigenschaften. Hinweis: Sie knnen das Doppelklick-Verhalten zum Bearbeiten von CSS durch Modifizieren der DreamweaverVoreinstellungen ndern.
Doppelklicken Sie im Bedienfeld Alle Regeln auf eine Regel, um das Dialogfeld CSS-Regel-Definition
anzuzeigen, und nehmen Sie die nderungen vor.
Whlen Sie eine Regel im Bedienfeld Alle Regeln aus und bearbeiten Sie die Eigenschaften der Regel im darunter
angezeigten Bedienfeld Eigenschaften.
Whlen Sie eine Regel im Bedienfeld Alle Regeln und klicken Sie dann im Bedienfeld CSS-Stile in der unteren
rechten Ecke auf die Schaltflche Stil bearbeiten. Hinweis: Sie knnen das Doppelklick-Verhalten zum Bearbeiten von CSS durch Modifizieren der DreamweaverVoreinstellungen ndern.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 150
Seiten mit CSS erstellen
2 Klicken Sie erneut auf den Selektor, um den Namen bearbeiten zu knnen. 3 Nehmen Sie die nderungen vor und drcken Sie die Eingabetaste (Windows) bzw. Return (Macintosh).
Verwandte Themen
Texteigenschaften im Eigenschafteninspektor festlegen auf Seite 242
oder whlen Sie im Bedienfeld Zusammenfassung fr Auswahl eine Eigenschaft (Modus Aktuell) aus.
2 Fhren Sie einen der folgenden Schritte aus:
Wenn die Ansicht Nur festgelegte Eigenschaften anzeigen im Bedienfeld Eigenschaften ausgewhlt wurde,
klicken Sie auf den Hyperlink Eigenschaften hinzufgen und fgen Sie eine Eigenschaft hinzu.
Wenn die Kategorie- oder Listenansicht im Bedienfeld Eigenschaften ausgewhlt wurde, geben Sie fr die
hinzuzufgende Eigenschaft einen Wert an.
Verwandte Themen
Cascading Stylesheets auf Seite 132 Cascading Styles auf Seite 134
CSS-Klassenstil anwenden
1 Whlen Sie im Dokument den Text aus, auf den Sie einen CSS-Stil anwenden mchten.
Setzen Sie die Einfgemarke in einen Absatz, um den Stil auf den ganzen Absatz anzuwenden. Wenn Sie einen Textbereich innerhalb eines einzigen Absatzes auswhlen, wirkt sich der CSS-Stil nur auf den ausgewhlten Textbereich aus. Wenn der CSS-Stil auf ein bestimmtes Tag angewendet werden soll, whlen Sie das Tag im Tag-Selektor links unten im Dokumentfenster aus.
2 Wenn Sie einen Klassenstil anwenden mchten, fhren Sie einen der folgenden Schritte aus:
Whlen Sie im Bedienfeld CSS-Stile (Fenster > CSS-Stile) den Modus Alle aus, klicken Sie mit der rechten
Maustaste auf den Namen des gewnschten Stils und whlen Sie im Kontextmen die Option Anwenden.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 151
Seiten mit CSS erstellen
Whlen Sie im Eigenschafteninspektor fr HTML im Popupmen Klasse den Klassenstil aus, den Sie anwenden
mchten.
Klicken Sie im Dokumentfenster mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste
(Macintosh) auf den ausgewhlten Text. Whlen Sie dann im Kontextmen den Befehl CSS-Stile und whlen Sie den gewnschten Stil.
Whlen Sie Formatieren > CSS-Stile und dann im Untermen den gewnschten Stil aus.
Klassenstil umbenennen
1 Klicken Sie im Bedienfeld CSS-Stile mit der rechten Maustaste auf den umzubenennenden CSS-Klassenstil und
whlen Sie Klasse umbenennen. Sie knnen eine Klasse auch umbenennen, indem Sie im Optionsmen des Bedienfeldes CSS-Stile die Option Klasse umbenennen auswhlen.
2 Vergewissern Sie sich, dass im Dialogfeld Klasse umbenennen die umzubenennende Klasse im Popupmen
Wenn die umzubenennende Klasse Teil des Head-Bereichs des aktuellen Dokuments ist, ndert Dreamweaver den Klassennamen (auch an smtlichen Fundstellen im aktuellen Dokument). Wenn die umzubenennende Klasse eine externe CSS-Datei ist, ffnet Dreamweaver die Datei und ndert den Namen in der Datei. Dreamweaver ffnet auerdem ein Dialogfeld Suchen und ersetzen, damit Sie die gesamte Site nach Fundstellen des alten Klassennamens durchsuchen knnen.
CSS-Regeln verschieben/exportieren
Die CSS-Verwaltungsfunktionen in Dreamweaver sorgen dafr, dass sich die CSS-Regeln problemlos an andere Orte verschieben oder exportieren lassen. Sie knnen Regeln u. a. von Dokument zu Dokument verschieben, vom HeadBereich eines Dokuments in ein externes Stylesheet sowie zwischen externen CSS-Dateien. Hinweis: Falls die Regel, die Sie verschieben mchten, mit einer Regel im Ziel-Stylesheet in Konflikt steht, zeigt Dreamweaver das Dialogfeld Gleichnamige Regel vorhanden an. Sollten Sie beabsichtigen, die in Konflikt stehende Regel zu verschieben, platziert Dreamweaver die verschobene Regel direkt neben die entsprechende Regel im ZielStylesheet.
Verwandte Themen
Code mit der Code-Symbolleiste einfgen auf Seite 330
Whlen Sie im Bedienfeld CSS-Stile die zu verschiebenden Regeln aus. Klicken Sie anschlieend mit der rechten
Maustaste auf die Auswahl und whlen Sie im Kontextmen die Option CSS-Regeln verschieben... aus. Um mehrere Regeln auszuwhlen, halten Sie die Strg-Taste (Windows) bzw. die Befehlstaste (Macintosh) gedrckt und klicken Sie auf die gewnschten Regeln.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 152
Seiten mit CSS erstellen
Whlen Sie in der Codeansicht die zu verschiebenden Regeln aus. Klicken Sie anschlieend mit der rechten Maustaste
auf die Auswahl und whlen Sie im Kontextmen die Option CSS-Stile > CSS-Regeln verschieben... aus. Hinweis: Auch wenn Sie nur einen Teil der Regel auswhlen, wird die gesamte Regel an den neuen Ort verschoben.
2 Whlen Sie im Dialogfeld In externes Stylesheet verschieben die neue Stylesheet-Option aus und klicken Sie auf
OK.
3 Geben Sie im Dialogfeld Stylesheet-Datei speichern unter einen Namen fr das neue Stylesheet ein und klicken
Sie auf Speichern. Wenn Sie auf Speichern klicken, speichert Dreamweaver ein neues Stylesheet mit den ausgewhlten Regeln und fgt es dem aktuellen Dokument hinzu. Sie knnen Regeln auch mithilfe der Code-Symbolleiste verschieben. Die Code-Symbolleiste steht nur in der Codeansicht zur Verfgung.
Whlen Sie im Bedienfeld CSS-Stile die zu verschiebenden Regeln aus. Klicken Sie anschlieend mit der rechten
Maustaste auf die Auswahl und whlen Sie im Kontextmen die Option CSS-Regeln verschieben... aus. Um mehrere Regeln auszuwhlen, halten Sie die Strg-Taste (Windows) bzw. die Befehlstaste (Macintosh) gedrckt und klicken Sie auf die gewnschten Regeln.
Whlen Sie in der Codeansicht die zu verschiebenden Regeln aus. Klicken Sie anschlieend mit der rechten Maustaste
auf die Auswahl und whlen Sie im Kontextmen die Option CSS-Stile > CSS-Regeln verschieben... aus. Hinweis: Auch wenn Sie nur einen Teil der Regel auswhlen, wird die gesamte Regel an den neuen Ort verschoben.
2 Whlen Sie im Dialogfeld In externes Stylesheet verschieben ein vorhandenes Stylesheet aus dem Popupmen
aus oder navigieren Sie zu einem vorhandenen Stylesheet und klicken Sie auf OK. Hinweis: Das Popupmen zeigt alle mit dem aktuellen Dokument verbundenen Stylesheets an. Sie knnen Regeln auch mithilfe der Code-Symbolleiste verschieben. Die Code-Symbolleiste steht nur in der Codeansicht zur Verfgung.
Regeln innerhalb eines Stylesheets neu anzuordnen oder eine Regel in ein anderes Stylesheet bzw. in den Head-Bereich des Dokuments zu verschieben, whlen Sie die betreffenden Regeln aus und ziehen sie an den gewnschten Ort. Sie knnen mehrere Regeln auf einmal verschieben, indem Sie bei gedrckter Strg-Taste (Windows) bzw. bei gedrckter Befehlstaste (Macintosh) auf mehrere Regeln klicken.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 153
Seiten mit CSS erstellen
Inline-CSS-Stil enthlt.
2 Klicken Sie mit der rechten Maustaste und whlen Sie CSS-Stile > Inline-CSS in Regel konvertieren. 3 Geben Sie im Dialogfeld Inline-CSS konvertieren einen Klassennamen fr die neue Regel ein und fhren Sie
Geben Sie ein Stylesheet an, in dem die neue CSS-Regel angezeigt werden sein soll, und klicken Sie auf OK. Whlen Sie den Head-Bereich des Dokuments als den Ort aus, an dem die neue CSS-Regel angezeigt werden soll,
und klicken Sie auf OK. Sie knnen Regeln auch mithilfe der Code-Symbolleiste konvertieren. Die Code-Symbolleiste steht nur in der Codeansicht zur Verfgung.
Verwandte Themen
Code mit der Code-Symbolleiste einfgen auf Seite 330
Bedienfeld.)
3 Fhren Sie einen der folgenden Schritte aus:
Klicken Sie auf Durchsuchen, um nach einem externen CSS-Stylesheet zu suchen. Geben Sie im Feld Datei/URL den Pfad des Stylesheets ein.
4 Whlen Sie unter Hinzufgen als eine der nachstehenden Optionen:
Um zwischen dem aktuellen Dokument und einem externen Stylesheet eine Verknpfung herzustellen, whlen Sie
Verknpfung. Hierdurch wird im HTML-Code das Verknpfungs-Tag href eingefgt und auf die URL der Datei verwiesen, in der sich das verffentlichte Stylesheet befindet. Diese Methode wird sowohl von Microsoft Internet Explorer als auch von Netscape Navigator untersttzt.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 154
Seiten mit CSS erstellen
Es ist nicht mglich, mit einem <link>-Tag eine Referenz zwischen zwei externen Stylesheets hinzuzufgen. Wenn
Sie Stylesheets verschachteln mchten, mssen Sie eine Import-Direktive verwenden. Die meisten Browser erkennen die Import-Direktive auch innerhalb einer Seite (anstatt nur in Stylesheets). Es gibt kleine Unterschiede in der Art und Weise, das Problem widersprchlicher Eigenschaften zu lsen, wenn die Regeln in verknpften externen Stylesheets und die Regeln in den in eine Seite importierten Stylesheets in Konflikt zueinander stehen. Whlen Sie Import, wenn Sie ein Stylesheet importieren mchten, anstatt eine Verknpfung herzustellen.
5 Geben Sie im Popupmen Medien das Zielmedium fr das Stylesheet an.
Weitere Informationen zu medienabhngigen Stylesheets finden Sie auf der Website des World Wide Web Consortium unter www.w3.org/TR/CSS21/media.html.
6 Klicken Sie auf die Schaltflche Vorschau, um sicherzustellen, dass das Stylesheet der aktuellen Seite die
gewnschten Stile zuweist. Wenn dies nicht der Fall ist, klicken Sie auf Abbrechen, um das Stylesheet zu entfernen. Die Seite wird mit der vorherigen Darstellung wiederhergestellt.
7 Klicken Sie auf OK.
Verwandte Themen
Auf Dreamweaver-Beispieldateien basierende Seiten erstellen auf Seite 68
CSS-Stylesheets bearbeiten
Ein CSS-Stylesheet kann eine oder mehrere Regeln enthalten. Sie knnen eine einzelne Regel in einem CSS-Stylesheet ber das Bedienfeld CSS-Stile bearbeiten oder das CSS-Stylesheet auch direkt bearbeiten.
1 Whlen Sie im Bedienfeld CSS-Stile (Fenster > CSS-Stile) den Modus Alle aus. 2 Doppelklicken Sie im Fensterbereich Alle Regeln auf den Namen des gewnschten Stylesheets. 3 ndern Sie das Stylesheet wie gewnscht im Dokumentfenster und speichern Sie es.
CSS-Code formatieren
Sie knnen Voreinstellungen fr die Steuerung des CSS-Codes festlegen, wenn Sie eine CSS-Regel mithilfe der Dreamweaver-Oberflche erstellen oder bearbeiten. So knnen Sie beispielsweise Voreinstellungen definieren, die dafr sorgen, dass smtliche CSS-Eigenschaften in separate Zeilen platziert werden, Leerzeilen zwischen CSS-Regeln gesetzt werden usw. Wenn Sie Voreinstellungen fr die CSS-Codeformatierung festlegen, werden die ausgewhlten Einstellungen automatisch auf alle CSS-Regeln angewendet, die Sie neu erstellen. Allerdings knnen Sie diese Voreinstellungen auch manuell fr einzelne Dokumente bernehmen. Das knnte sich als hilfreich erweisen, wenn Sie ein lteres HTMLoder CSS-Dokument formatieren mssen. Hinweis: Die Voreinstellungen fr die CSS-Codeformatierung gelten nur fr CSS-Regeln in externen oder eingebetteten Stylesheets (nicht jedoch fr Inline-Stile).
Verwandte Themen
Codeformat ndern auf Seite 320
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 155
Seiten mit CSS erstellen
2 Whlen Sie im Dialogfeld Voreinstellungen die Kategorie Codeformat aus. 3 Klicken Sie neben der Option Erweiterte Formatierung auf die Schaltflche CSS.... 4 Whlen Sie im Dialogfeld CSS-Quellformatoptionen die Optionen aus, die auf den CSS-Quellcode angewendet
werden sollen. Im Fenster Vorschau unten wird angezeigt, wie das CSS gem den von Ihnen ausgewhlten Optionen aussehen wrde.
Eigenschaften einrcken Legt den Einrckwert fr Eigenschaften innerhalb einer Regel fest. Sie knnen Tabulatoren oder Leerzeichen angeben. Jede Eigenschaft in separater Zeile Setzt jede Eigenschaft innerhalb einer Regel in eine separate Zeile ffnende Klammer in separater Zeile Setzt die ffnende Klammer fr eine Regel in eine andere Zeile als den Selektor. Nur wenn mehr als 1 Eigenschaft Setzt Regeln mit einer einzigen Eigenschaft in dieselbe Zeile wie den Selektor. Alle Selektoren fr eine Regel in derselben Zeile Setzt alle Selektoren fr die Regel in dieselbe Zeile. Leerzeile zwischen Regeln Fgt eine Leerzeile zwischen die einzelnen Regeln ein.
Hinweis: Die CSS-Codeformatierung bernimmt auch die Voreinstellung Zeilenumbruch-Typ, die Sie im Dialogfeld Voreinstellungen in der Kategorie Codeformat festlegen.
Die Formatierungsoptionen, die Sie in den Voreinstellungen fr die CSS-Codeformatierung festlegen, werden auf das gesamte Dokument angewendet. Ein einzelne Auswahl kann nicht formatiert werden.
Die Formatierungsoptionen, die Sie in den Voreinstellungen fr die CSS-Codeformatierung festlegen, werden nur auf die CSS-Regeln im head-Bereich des Dokuments angewendet. Hinweis: Sie knnen Befehle > Quellcodeformatierung anwenden auswhlen, um das gesamte Dokument entsprechend den festgelegten Voreinstellungen fr die Codeformatierung zu formatieren.
CSS-Eigenschaft deaktivieren/aktivieren
Mit der Funktion CSS-Eigenschaft deaktivieren/aktivieren knnen Sie CSS-Codeabschnitte aus dem Bedienfeld CSS-Stile auskommentieren, ohne direkt im Code nderungen vornehmen zu mssen. Wenn Sie CSSCodeabschnitte auskommentieren, knnen Sie sehen, welche Auswirkungen bestimmte Eigenschaften und Werte auf Ihre Seite haben. Wenn Sie eine CSS-Eigenschaft deaktivieren, werden ihr CSS-Kommentar-Tags und die Beschriftung [disabled] (deaktiviert) hinzugefgt. Sie knnen die deaktivierte CSS-Eigenschaft dann nach Bedarf problemlos wieder aktivieren oder lschen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 156
Seiten mit CSS erstellen
Ein Video des Dreamweaver-Entwicklungsteams mit einem berblick ber die Verwendung von CSS-Eigenschaft deaktivieren/aktivieren finden Sie unter www.adobe.com/go/dwcs5css_de.
1 Whlen Sie im Bereich Eigenschaften des Bedienfelds CSS-Stile (Fenster > CSS-Stile) die Eigenschaft aus,
deaktivieren/aktivieren. Das Symbol wird auch angezeigt, wenn Sie den Mauszeiger links neben die Eigenschaft bewegen. Nachdem Sie auf das Symbol CSS-Eigenschaft deaktivieren/aktivieren geklickt haben, wird links neben der Eigenschaft das Symbol Deaktiviert angezeigt. Wenn Sie die Eigenschaft wieder aktivieren mchten, klicken Sie auf das Symbol Deaktiviert oder klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrckter Befehlstaste (Macintosh OS) auf die Eigenschaft und whlen Sie Aktivieren aus.
3 (Optional) Um alle deaktivierten Eigenschaften in einer bestimmten Regel zu aktivieren oder zu lschen, klicken
Sie mit der rechten Maustaste (Windows) bzw. bei gedrckter Befehlstaste (Macintosh OS) auf eine Regel oder Eigenschaft, in der Eigenschaften deaktiviert sind, und whlen Sie Alle in der ausgewhlten Regel deaktivierten aktivieren oder Alle in der ausgewhlten Regel deaktivierten lschen aus.
Dokumentsymbolleiste neben der Schaltflche Live-Ansicht). Hinweis: Wenn die Live-Ansicht nicht bereits aktiviert ist, wird sie im Prfmodus automatisch aktiviert.
2 Bewegen Sie den Mauszeiger ber die Elemente auf der Seite, um das CSS-Box-Modell anzuzeigen. Rahmen, Rand,
hervorgehobenen Elements hervorgehoben wird. Drcken Sie die Nach-rechts-Taste, damit wieder die Hervorhebung des untergeordneten Elements angezeigt wird.
4 (Optional) Klicken Sie auf ein Element, um eine hervorgehobene Auswahl zu sperren.
Hinweis: Wenn Sie auf ein Element klicken, um eine hervorgehobene Auswahl zu sperren, wird der Prfmodus deaktiviert.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 157
Seiten mit CSS erstellen
Verwandte Themen
Seitenvorschau in Dreamweaver auf Seite 307 Bedienfeld CSS-Stile auf Seite 137
Ein Fehler bezeichnet CSS-Code, der ein ernsthaftes sichtbares Problem in einem bestimmten Browser verursachen
kann, beispielsweise das Verschwinden von Teilen einer Seite. (Fehler ist die Standardkennzeichnung fr Probleme mit der Browseruntersttzung. Deshalb kann es mitunter vorkommen, dass Code mit unbekannten Auswirkungen als Fehler gekennzeichnet wird.)
Eine Warnung bezeichnet einen CSS-Codeabschnitt, der in einem bestimmten Browser nicht korrekt angezeigt
wird, der jedoch keine ernsten Anzeigeprobleme verursacht.
Eine Informationsmeldung bezeichnet Code, der von einem bestimmten Browser nicht untersttzt wird, ansonsten
aber keine sichtbaren Auswirkungen hat. Browserkompatibilittsprfungen bewirken keinerlei nderungen im Dokument.
Verwandte Themen
Tags berprfen auf Seite 347 CSS Advisor
Browserkompatibilittsprfung ausfhren
Whlen Sie Datei > Seite berprfen > Browserkompatibilitt aus.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 158
Seiten mit CSS erstellen
Browserkompatibilittsprfung.
2 Klicken Sie auf den grnen Pfeil in der oberen linken Ecke des Bedienfeldes Ergebnisse und whlen Sie
Einstellungen aus.
3 Markieren Sie bei jedem Browser, der in die berprfung einbezogen werden soll, das zugehrige
Kontrollkstchen.
4 Whlen Sie fr jeden ausgewhlten Browser eine Mindestversion fr die berprfung aus dem entsprechenden
Popupmen. Um beispielsweise festzustellen, ob Probleme mit der CSS-Wiedergabe im Internet Explorer 5.0 (oder hher) und im Netscape Navigator 7.0 (oder hher) auftreten knnten, markieren Sie die Kontrollkstchen neben den Browsernamen und whlen im Popupmen Internet Explorer die Version 5.0 und im Popupmen Netscape die Version 7.0.
(Macintosh) auf das Problem, das von zuknftigen Prfungen ausgeschlossen werden soll.
3 Klicken Sie im Kontextmen auf Problem ignorieren.
Browserkompatibilittsprfung.
2 Klicken Sie auf den grnen Pfeil in der oberen linken Ecke des Bedienfeldes Ergebnisse und whlen Sie Liste der
Browserkompatibilittsprfungs-Bericht speichern
1 Fhren Sie eine Browserkompatibilittsprfung aus. 2 Klicken Sie auf der linken Seite des Bedienfeldes Ergebnisse auf die Schaltflche Bericht speichern.
Bewegen Sie den Mauszeiger ber die Schaltflchen im Bedienfeld Ergebnisse, um Quickinfos aufzurufen. Hinweis: Berichte werden nicht automatisch gespeichert. Falls Sie die Kopie eines Berichts aufbewahren mchten, mssen Sie die oben beschrieben Vorgehensweise befolgen, um den Bericht zu speichern.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 159
Seiten mit CSS erstellen
2 Klicken Sie auf der linken Seite des Bedienfeldes Ergebnisse auf die Schaltflche Bericht durchsuchen.
Bewegen Sie den Mauszeiger ber die Schaltflchen im Bedienfeld Ergebnisse, um Quickinfos aufzurufen.
Browserkompatibilittsprfung.
2 Klicken Sie unten rechts im Bedienfeld auf den Hyperlink.
Klicken Sie mit der rechten Maustaste in das Bedienfeld CSS-Stile und whlen Sie im Kontextmen die Option
Entwurfszeit.
Um in der Entwurfsphase ein CSS-Stylesheet einzublenden, klicken Sie auf die Schaltflche mit dem
Pluszeichen (+) ber Nur whrend Entwurfszeit anzeigen. Whlen Sie dann im Dialogfeld Stylesheet auswhlen das anzuzeigende CSS-Stylesheet aus.
Um ein CSS-Stylesheet auszublenden, klicken Sie auf die Schaltflche mit dem Pluszeichen (+) ber Whrend
Entwurfszeit ausblenden. Whlen Sie dann im Dialogfeld Stylesheet auswhlen das auszublendende CSSStylesheet aus.
Wenn Sie ein Stylesheet aus beiden Listen entfernen mchten, klicken Sie zunchst auf das betreffende Stylesheet
und anschlieend auf die entsprechende Schaltflche mit dem Minuszeichen ().
3 Klicken Sie auf OK, um das Dialogfeld zu schlieen.
Im Bedienfeld CSS-Stile wird der Name des ausgewhlten Stylesheets aktualisiert und mit dem Indikator Versteckt oder Entwurf versehen.
Verwandte Themen
berblick ber die Symbolleiste Stilwiedergabe auf Seite 11
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 160
Seiten mit CSS erstellen
Dreamweaver-Beispielstylesheets verwenden
Dreamweaver enthlt Muster-Stylesheets, die Sie Seiten zuweisen oder als Ausgangspunkt fr die Entwicklung eigener Stile verwenden knnen.
1 Fhren Sie einen der folgenden Schritte aus, um das Bedienfeld CSS-Stile anzuzeigen:
Bedienfeld.)
3 Klicken Sie im Dialogfeld Entferntes Stylesheet hinzufgen auf Muster-Stylesheets. 4 Whlen Sie im Listenfeld im Dialogfeld Muster-Stylesheets ein Stylesheet aus.
Im Vorschaufeld wird immer die Text- und Farbenformatierung des aktuell von Ihnen ausgewhlten Stylesheets angezeigt.
5 Klicken Sie auf die Schaltflche Vorschau, um das Stylesheet zuzuweisen und festzustellen, ob es die gewnschten
Stile auf die aktuelle Seite anwendet. Wenn es nicht die gewnschten Stile sind, whlen Sie ein anderes Stylesheet aus der Liste aus und klicken Sie auf Vorschau.
6 Dreamweaver speichert das Stylesheet standardmig in einem Ordner namens CSS direkt unter dem
Stammordner der Site, die Sie fr Ihre Seite erstellt haben. Ist dieser Ordner nicht vorhanden, wird er von Dreamweaver erstellt. Sie knnen die Datei an einem anderen Ort speichern, indem Sie auf die Option Durchsuchen klicken und einen anderen Ordner auswhlen.
7 Wenn Sie ein Stylesheet gefunden haben, dessen Formatierungsregeln Ihren Designwnschen entspricht, klicken
verwendet wird. Bearbeiten Sie dann die Seiten und sehen Sie sich das neue Stylesheet an. Sie sollten die folgenden Faktoren beachten, wenn Sie ein Stylesheet fr eine Contribute-Site aktualisieren:
Wenn Sie ein Stylesheet ndern, whrend ein Contribute-Benutzer eine Seite bearbeitet, der dieses Stylesheet
zugewiesen ist, kann der Benutzer die am Stylesheet vorgenommenen nderungen erst sehen, wenn er die Seite verffentlicht.
Wenn Sie einen Stil aus einem Stylesheet lschen, wird der Stilname nicht aus den Seiten gelscht, die dieses
Stylesheet verwenden. Da der zugewiesene Stil aber nicht mehr vorhanden ist, wird er nicht mehr in der Art angezeigt, wie es der Contribute-Benutzer erwartet. Falls nichts passiert, wenn ein Benutzer einen bestimmten Stil zuweisen mchte, kann es daran liegen, dass der Stil aus dem Stylesheet gelscht wurde.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 161
Seiten mit CSS erstellen
Verwandte Themen
Mit Div-Tags arbeiten auf Seite 167 Tutorial zum CSS-Layout
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 162
Seiten mit CSS erstellen
A C
Nachstehend finden Sie den Code fr alle drei Div-Tags auf der HTML-Seite:
<!--container div tag--> <div id="container"> <!--sidebar div tag--> <div id="sidebar"> <h3>Sidebar Content</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p> </div> <!--mainContent div tag--> <div id="mainContent"> <h1> Main Content </h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum.</p> <p>Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p> <h2>H2 level heading </h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.</p> </div> </div>
Im oben genannten Beispiel sind keinem der Div-Tags Stile angehngt worden. Wenn keine CSS-Regeln definiert sind, wird jedes Div-Tag samt seinen Inhalten an einem Standardort auf der Seite positioniert. Wenn jedoch jedes Div-Tag ber eine eindeutige ID verfgt (wie im Beispiel oben), knnen Sie mithilfe der IDs CSS-Regeln erstellen. Wenn diese CSS-Regeln angewendet werden, ndern sie den Stil und die Positionierung der Div-Tags. Die folgende CSS-Regel, die sich im Head-Bereich des Dokuments oder in einer externen CSS-Datei befinden kann, erstellt Stilregeln fr das erste Div-Tag, d. h. das Container-Tag, auf der Seite:
#container { width: 780px; background: #FFFFFF; margin: 0 auto; border: 1px solid #000000; text-align: left; }
Die #container-Regel bewirkt, dass das Div-Tag container eine Breite von 780 Pixel, einen weien Hintergrund, keinen Rand (am linken Rand der Seite) und einen schwarzen, 1 Pixel starken Rahmen besitzt und dass der Text links ausgerichtet ist. Das Anwenden der Regel auf das Div-Tag container hat folgende Auswirkungen:
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 163
Seiten mit CSS erstellen
Div-Tag container, 780 Pixel, kein Rand A: Links ausgerichteter Text B: Weier Hintergrund C: Durchgehender 1 Pixel starker schwarzer Rahmen
Die #sidebar-Regel bewirkt, dass das Div-Tag sidebar (Randleiste) eine Breite von 200 Pixel, eine grauen Hintergrund, eine obere und untere Auffllung von 15 Pixel, eine rechte Auffllung von 10 Pixel und eine linke Auffllung von 20 Pixel hat. (Die Auffllung erfolgt standardmig von oben rechts nach unten links.) Darber hinaus positioniert die Regel das Div-Tag sidebar schwebend: nach links. Diese Eigenschaft schiebt das Div-Tag sidebar auf die linke Seite des Div-Tags container. Das Anwenden der Regel auf das Div-Tag sidebar hat folgende Auswirkungen:
A B
Div-Tag sidebar, links flieend A: Breite von 200 Pixel B: Obere und untere Auffllung von 15 Pixel
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 164
Seiten mit CSS erstellen
Die #mainContent-Regel bewirkt, dass das Div-Tag mainContent ber einen linken Rand von 250 Pixel verfgt. Das bedeutet, dass es fr einen Leerraum von 250 Pixel zwischen der linken Seite des Div-Tags container und der linken Seite des Div-Tags mainContent sorgt. Auerdem sorgt die Regel fr 20 Pixel Abstand auf der rechten, linken und unteren Seite des Div-Tags mainContent. Das Anwenden der Regel auf das Div-Tag mainContent hat folgende Auswirkungen:
A B
Div-Tag mainContent, linker Rand: 250 Pixel A: linke Auffllung von 20 Pixel B: rechte Auffllung von 20 Pixel C: untere Auffllung von 20 Pixel
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 165
Seiten mit CSS erstellen
<div id="container"> <!--sidebar div tag--> <div id="sidebar"> <h3>Sidebar Content</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p> </div> <!--mainContent div tag--> <div id="mainContent"> <h1> Main Content </h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum.</p> <p>Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p> <h2>H2 level heading </h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.</p> </div> </div> </body>
Hinweis: Der oben gezeigte Beispielcode ist eine vereinfachte Version des Codes, der das zweispaltige Layout mit fester linker Randleiste erstellt, wenn Sie ein neues Dokument mithilfe der in Dreamweaver enthaltenen vordefinierten Layouts erstellen.
Verwandte Themen
Grundlegendes zu Cascading Stylesheets auf Seite 132
Verwandte Themen
Leere Seiten erstellen auf Seite 64 Standard-Dokumenttyp und Standardkodierung festlegen auf Seite 70 Link zu einem externen CSS-Stylesheet erstellen auf Seite 153
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 166
Seiten mit CSS erstellen
Hinweis: Sie mssen einen HTML-Seitentyp fr das Layout auswhlen. Sie knnen beispielsweise HTML, ColdFusion, PHP usw. auswhlen. Sie knnen keine ActionScript-, CSS-, Bibliothekselement-, JavaScript-, XML-, XSLT- oder ColdFusion-Seiten mit einem CSS-Layout erstellen. Die Seitentypen in der Kategorie Andere des Dialogfelds Neues Dokument schlieen die Verwendung von CSS-Seitenlayouts ebenfalls aus.
4 Whlen Sie unter Layout das gewnschte CSS-Layout aus. Sie knnen unter 16 verschiedenen Layouts
auswhlen. Das Vorschaufenster zeigt das Layout und enthlt eine kurze Beschreibung des ausgewhlten Layouts. Die vordefinierten CSS-Layouts enthalten folgende Spaltentypen:
Fest Die Spaltenbreite wird in Pixeln definiert. Die Spalte wird nicht an die Gre des Browserfensters oder die
wird angepasst, wenn der Besucher das Browserfenster schmaler oder breiter macht. Die vom Besucher vorgenommenen Texteinstellungen haben jedoch keine Auswirkungen auf die Spaltenbreite.
5 Whlen Sie im Popupmen DocType einen Dokumenttyp aus. 6 Whlen Sie einen Speicherort fr das CSS des Layouts im Popupmen Layout-CSS aus.
Zum Head-Bereich hinzufgen Fgt die CSS-Layoutinformationen dem Head-Bereich der von Ihnen erstellten Seite
hinzu.
Neue Datei erstellen Schreibt die die CSS-Layoutinformationen in ein neues, externes CSS-Stylesheet und verknpft
Layout bentigten CSS-Regeln enthlt. Diese Option ist besonders praktisch, wenn Sie dasselbe CSS-Layout (d. h. die in einer einzelnen Datei enthaltenen CSS-Regeln) auf mehrere Dokumente anwenden mchten.
7 Fhren Sie einen der folgenden Schritte aus:
Wenn Sie im Popupmen Layout-CSS die Standardoption Zum Head-Bereich hinzufgen gewhlt haben,
klicken Sie auf Erstellen.
Wenn Sie im Popupmen Layout-CSS die Option Neue Datei erstellen gewhlt haben, klicken Sie auf
Erstellen und geben dann im Dialogfeld Stylesheet-Datei speichern unter einen Namen fr die neue externe Datei ein.
Wenn Sie im Popupmen Layout-CSS die Option Verknpfen mit bestehender Datei ausgewhlt haben, fgen
Sie die externe Datei dem Textfeld CSS-Datei anfgen hinzu, indem Sie auf das Symbol Stylesheet anfgen klicken, das Dialogfeld Entferntes Stylesheet hinzufgen ausfllen und dann auf OK klicken. Wenn Sie fertig sind, klicken Sie im Dialogfeld Neues Dokument auf Erstellen. Hinweis: Wenn Sie die Option Verknpfen mit bestehender Datei whlen, muss die angegebene Datei bereits ber die Regeln fr die enthaltene CSS-Datei verfgen. Wenn Sie das Layout-CSS in eine neue Datei platzieren oder mit einer bestehenden Datei verknpfen, dann verknpft Dreamweaver die Datei automatisch mit der HTML-Seite, die Sie erstellen. Hinweis: Die bedingten Kommentare im Internet Explorer, die Probleme bei der Wiedergabe in Internet Explorer beheben, bleiben in den Head-Bereich des neuen CSS-Layoutdokuments eingebettet, selbst wenn Sie die Option Neue externe Datei oder Bestehende externe Datei als Speicherort fr das Layout-CSS auswhlen.
8 (Optional) CSS-Stylesheets knnen auch einer Seite zugeordnet werden, die unabhngig vom CSS-Layout neu
erstellt wird. Klicken Sie dazu auf das Symbol Stylesheet anfgen ber dem Teilfenster CSS-Datei anfgen und whlen Sie ein CSS-Stylesheet aus.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 167
Seiten mit CSS erstellen
Eine detaillierte, schrittweise Anleitung fr diesen Vorgang finden Sie im Artikel von David Powers: Automatically attaching a style sheet to new documents (Stylesheets automatisch an neue Dokumente anfgen).
hinzugefgt werden soll. Das CSS fr das Layout muss sich im Head-Bereich der HTML-Seite befinden. Damit das CSS-Layout zu den anderen in Dreamweaver enthaltenen voreingestellten Layouts passt, sollten Sie die HTML-Datei mit der Erweiterung .htm speichern.
2 Fgen Sie die HTML-Seite dem Ordner Adobe Dreamweaver CS4\Configuration\BuiltIn\Layouts hinzu. 3 Optional: Fgen Sie ein Vorschaubild (z. B. eine .gif- oder .png-Datei) zum Ordner Adobe Dreamweaver
CS4\Configuration\BuiltIn\Layouts hinzu. Die in Dreamweaver enthaltenen Standardbilder sind 227 Pixel breite und 193 Pixel hohe PNG-Dateien. Geben Sie dem Vorschaubild denselben Dateinamen wie der HTML-Datei, damit Sie es wieder leicht zuordnen knnen. Wenn Sie Ihre HTML-Datei zum Beispiel meinbenutzerdefiniertesLayout.htm genannt haben, sollte Ihr Vorschaubild als meinbenutzerdefiniertesLayout.png gespeichert werden.
4 Optional: Erstellen Sie eine Datei notes fr das benutzerdefinierte Layout, indem Sie den Ordner Adobe
Dreamweaver CS4\Configuration\BuiltIn\Layouts\_notes ffnen, vorhandene Dateien notes kopieren, im gleichen Ordner einfgen und die Kopien fr das benutzerdefinierte Layout umbenennen. Zum Beispiel knnten Sie die Datei oneColElsCtr.htm.mno kopieren und in meinbenutzerdefiniertesLayout.htm.mno. umbenennen.
5 Optional: Nachdem Sie ein Datei notes fr Ihr benutzerdefiniertes Layout erstellt haben, knnen Sie die Datei
ffnen und den Layoutnamen, die Beschreibung und das Vorschaubild festlegen.
Verwandte Themen
AP-Elemente in Dreamweaver auf Seite 171 Seiten mit einem CSS-Layout erstellen auf Seite 165 Inhalte in Tabellen darstellen auf Seite 188
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 168
Seiten mit CSS erstellen
Div-Tags einfgen
Mithilfe von div-Tags knnen Sie CSS-Layoutblcke erstellen und in Ihrem Dokument platzieren. Dies ist praktisch, wenn das Dokument mit einem vorhandenen CSS-Stylesheet verknpft ist, das Positionierungsstile zuweist. Mit Dreamweaver ist es mglich, ein Div-Tag schnell einzufgen und ihm vorhandene Stile zuzuweisen.
1 Setzen Sie die Einfgemarke im Dokumentfenster an die Stelle, an der Sie das div-Tag einfgen mchten. 2 Fhren Sie einen der folgenden Schritte aus:
Whlen Sie Einfgen > Layout-Objekte > Div-Tag aus. Klicken Sie in der Kategorie Layout des Bedienfelds Einfgen auf die Schaltflche Div-Tag einfgen
3 Whlen Sie eine der folgenden Optionen:
Einfgen Ermglicht die Auswahl der Position fr das div-Tag sowie des Tag-Namens, wenn es sich nicht um ein neues Tag handelt. Klasse Zeigt den Klassenstil an, der dem Tag derzeit zugewiesen ist. Wenn ein Stylesheet angefgt wurde, werden die
darin definierte Klassen in der Liste angezeigt. In diesem Popupmen knnen Sie den Stil auswhlen, den Sie auf das Tag anwenden mchten.
ID Ermglicht das ndern des Namens, mit dem das div-Tag identifiziert wird. Wenn ein Stylesheet angefgt wurde,
werden die darin definierten IDs in der Liste angezeigt. Die IDs von Blcken, die bereits Bestandteil Ihres Dokuments sind, werden nicht aufgefhrt. Hinweis: In Dreamweaver wird eine Warnmeldung angezeigt, wenn Sie eine ID eingeben, die bereits mit einem anderen Tag in Ihrem Dokument verknpft ist.
Neue CSS-Regel ffnet das Dialogfeld Neue CSS-Regel.
Das div-Tag wird in Ihrem Dokument als Feld mit Platzhaltertext angezeigt. Wenn Sie den Zeiger ber das Feld hinaus bewegen, wird dieses in Dreamweaver hervorgehoben. Wenn der div-Tag absolut positioniert ist, wird er zu einem AP-Element. (Nicht absolut positionierte div-Tags knnen bearbeitet werden.)
Verwandte Themen
AP-Elemente in Dreamweaver auf Seite 171 Seiten mit einem CSS-Layout erstellen auf Seite 165
Div-Tags bearbeiten
Nachdem Sie ein div-Tag eingefgt haben, knnen Sie es verndern oder Inhalt hinzufgen. Hinweis: Absolut positionierte Div-Tags werden zu AP-Elementen. Wenn Sie Div-Tags Rahmen zuweisen oder die CSS-Layout-Konturen aktivieren, werden diese Tags mit Rahmen angezeigt. (CSS-Layout-Konturen ist standardmig im Men Ansicht > Visuelle Hilfsmittel ausgewhlt.) Wenn Sie den Zeiger ber ein div-Tag fhren, markiert Dreamweaver das Tag. Sie knnen die Markierungsfarbe ndern oder die Markierungsfunktion deaktivieren. Wenn Sie ein div-Tag auswhlen, knnen Sie Regeln fr dieses im Bedienfeld CSS-Stile anzeigen und bearbeiten. Sie knnen dem div-Tag ferner Inhalte hinzufgen, indem Sie die Einfgemarke im div-Tag positionieren und Inhalt wie bei einer Seite hinzufgen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 169
Seiten mit CSS erstellen
Verwandte Themen
AP-Elemente in Dreamweaver auf Seite 171 Bedienfeld CSS-Stile ffnen auf Seite 141 Auf ein Div-Tag angewendete Regeln anzeigen und bearbeiten 1 Fhren Sie einen der folgenden Schritte aus, um das div-Tag auszuwhlen:
Klicken Sie in das div-Tag und drcken Sie zweimal Strg+A (Windows) oder Befehl+A (Macintosh). Klicken Sie in das div-Tag und whlen Sie das div-Tag im Tag-Selektor unten im Dokumentfenster aus.
2 Whlen Sie ggf. Fenster > CSS-Stile aus, um das Bedienfeld CSS-Stile zu ffnen.
Einfgemarke in einen Div-Tag setzen, um Inhalt hinzuzufgen Klicken Sie auf eine beliebige Stelle innerhalb des Div-Tags. Platzhaltertext in einem Div-Tag ndern Markieren Sie den Text und berschreiben Sie ihn oder drcken Sie die Entf-Taste. Hinweis: Sie knnen dem div-Tag genau wie einer Seite Inhalt hinzufgen.
(Macintosh).
2 Whlen Sie in der Liste links die Kategorie Markierung. 3 Fhren Sie einen der folgenden Schritte aus und klicken Sie auf OK.
Um die Markierungsfarbe fr div-Tags zu ndern, klicken Sie in das Farbfeld Mouse-Over und whlen Sie mit
dem Farbwhler eine Markierungsfarbe aus (oder geben Sie den Hexadezimalwert fr die Markierungsfarbe im Textfeld ein).
Um die Markierung von div-Tags zu aktivieren bzw. zu deaktivieren, aktivieren bzw. deaktivieren Sie das
Kontrollkstchen Anzeigen fr Mouse-Over. Hinweis: Diese Optionen wirken sich auf alle Objekte aus, wie beispielsweise auf Tabellen, die in Dreamweaver hervorgehoben werden, wenn Sie den Zeiger darber bewegen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 170
Seiten mit CSS erstellen
CSS-Layout-Blcke
CSS-Layout-Blcke visualisieren
In der Entwurfsansicht knnen Sie CSS-Layout-Blcke visualisieren. Ein CSS-Layout-Block ist ein HTMLSeitenelement, das Sie an einer beliebigen Stelle auf der Seite positionieren knnen. Genauer gesagt ist ein CSS-LayoutBlock entweder ein div-Tag ohne display:inline oder ein anderes Seitenelement, das die CSS-Deklaration display:block, position:absolute oder position:relative enthlt. Im Folgenden finden Sie einige Beispiele von Elementen, die in Dreamweaver als CSS-Layout-Blcke angesehen werden:
Ein div-Tag Ein Bild, dem eine absolute oder relative Position zugewiesen wurde Ein a-Tag, dem der Stil display:block zugewiesen wurde Ein Absatz, dem eine absolute oder relative Position zugewiesen wurde
Hinweis: Damit CSS-Layout-Blcke visuell wiedergegeben werden knnen, enthalten Sie keine Inline-Elemente (d. h. Elemente, deren Code in einer Textzeile enthalten ist) und auch keine einfachen Blockelemente (wie z. B. Abstze). Dreamweaver bietet eine Auswahl an visuellen Hilfsmitteln zum Anzeigen von CSS-Layout-Blcken. Sie knnen beim Entwerfen z. B. Konturen, Hintergrnde oder das Box-Modell fr CSS-Layout-Blcke aktivieren. Sie knnen auerdem die QuickInfo anzeigen, die Eigenschaften zu einem ausgewhlten CSS-Layout-Block anzeigt, indem Sie den Mauszeiger ber den Layout-Block fhren. Die folgende Liste mit visuellen Hilfsmitteln fr CSS-Layout-Blcke beschreibt, welche Elemente Dreamweaver fr jeden Layout-Block wiedergibt:
CSS-Layout-Konturen Zeigt die Konturen aller CSS-Layout-Blcke auf der Seite an. CSS-Layout-Hintergrnde Zeigt vorbergehend zugewiesene Hintergrundfarben fr einzelne CSS-Layout-Blcke an
und blendet andere Hintergrundfarben oder Bilder aus, die normalerweise auf der Seite angezeigt werden. Wenn Sie das visuelle Hilfsmittel zum Anzeigen der Hintergrnde von CSS-Layout-Blcken aktivieren, weist jedem CSS-Layout-Block Dreamweaver automatisch eine separate Hintergrundfarbe zu. (Dreamweaver whlt die Farben anhand eines Algorithmus aus, d. h., Sie haben keine Mglichkeit, die Farben selbst zuzuweisen.) Die zugewiesenen Farben sind visuell auffllig und sollen Ihnen die Unterscheidung zwischen CSS-Layout-Blcken erleichtern.
CSS-Layout Box-Modell Zeigt das Box-Modell (d. h. Auffllung und Rnder) des ausgewhlten CSS-Layout-Blocks an.
CSS-Layout-Blcke anzeigen
Sie knnen die visuellen Hilfsmittel fr CSS-Layoutblcke nach Bedarf aktivieren oder deaktivieren. Konturen von CSS-Layout-Blcken anzeigen Whlen Sie Ansicht > Visuelle Hilfsmittel > CSS-Layout-Konturen aus. Hintergrnde von CSS-Layout-Blcken anzeigen
Whlen Sie Ansicht > Visuelle Hilfsmittel > CSS-Layout-Hintergrnde aus.
Sie knnen auch durch Klicken auf die Schaltflche Visuelle Hilfsmittel in der Dokumentsymbolleiste auf Optionen fr die visuellen Hilfsmittel fr von CSS-Layout-Blcke zugreifen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 171
Seiten mit CSS erstellen
Visuelle Hilfsmittel fr CSS-Layout-Blcke mit Elementen verwenden, die keine CSS-LayoutBlcke sind
Mithilfe eines Entwurfszeit-Stylesheets knnen Sie die Hintergrnde, die Rahmen oder das Box-Modell von Elementen anzeigen, die normalerweise nicht als CSS-Layout-Blcke angesehen werden. Dazu mssen Sie zunchst ein Entwurfszeit-Stylesheet erstellen, das dem entsprechenden Seitenelement das display:block-Attribut zuweist.
1 Erstellen Sie ein externes CSS-Stylesheet, indem Sie Datei > Neu, in der Spalte Kategorie die Option
Einfache Seite und in der Spalte Einfache Seite die Option CSS auswhlen und auf Erstellen klicken.
2 Erstellen Sie in dem neuen Stylesheet Regeln, die das display:block-Attribut den Seitenelementen zuweisen, die
als CSS-Layout-Blcke angezeigt werden sollen. Wenn Sie beispielsweise eine Hintergrundfarbe fr Abstze anzeigen und Elemente auflisten mchten, knnen Sie ein Stylesheet mit folgenden Regeln erstellen:
p{ display:block; } li{ display:block; }
3 Speichern Sie die Datei. 4 ffnen Sie die Seite, ab der Sie die neuen Stile anhngen mchten, in der Entwurfsansicht. 5 Whlen Sie Formatieren > CSS-Stile > Entwurfsphase aus. 6 Klicken Sie im Dialogfeld Entwurfszeit-Stylesheets auf das Pluszeichen oberhalb des Textfelds Nur whrend
Entwurfszeit anzeigen, whlen Sie das eben erstellte Stylesheet aus und klicken Sie auf OK.
7 Klicken Sie auf OK, um das Dialogfeld Entwurfszeit-Stylesheets zu schlieen.
Das Stylesheet wird an das Dokument angehngt. Wenn Sie mit dem vorstehenden Beispiel ein Stylesheet erstellt htte, wrden alle Abstze und Listenelemente mit dem display:block-Attribut formatiert, sodass Sie die visuellen Hilfsmittel fr CSS-Layout-Blcke fr Abstze und Listenelemente aktivieren oder deaktivieren knnten.
Verwandte Themen
Mit Entwurfszeit-Stylesheets arbeiten auf Seite 159
AP-Elemente verwenden
AP-Elemente in Dreamweaver
Ein AP-Element (absolut positioniertes Element) ist ein HTML-Seitenelement ein div-Tag oder ein beliebiges anderes Tag , dem eine absolute Position zugewiesen wurde. AP-Elemente knnen Text, Bilder oder beliebigen anderen Inhalt enthalten, den Sie in den body-Bereich eines HTML-Dokuments einfgen knnen. In Dreamweaver knnen Sie AP-Elemente zur Seitenlayouterstellung verwenden. Sie haben die Mglichkeit, APElemente vor- und hintereinander zu platzieren, einige AP-Elemente auszublenden und andere zu zeigen und APElemente auf dem Bildschirm zu verschieben. Beispielsweise kann vor ein AP-Element, in das ein Hintergrundbild eingefgt wurde, ein zweites AP-Element gesetzt werden, das Text mit transparentem Hintergrund enthlt. AP-Elemente sind in der Regel absolut positionierte Div-Tags. (Dieser AP-Elementtyp wird von Dreamweaver standardmig eingefgt.) Beachten Sie jedoch, dass Sie jedes HTML Element (beispielsweise ein Bild) als AP-Element klassifizieren knnen, indem Sie ihm eine absolute Position zuweisen. Alle AP-Elemente (nicht nur absolut positionierte Div-Tags) werden im Bedienfeld AP-Elemente angezeigt.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 172
Seiten mit CSS erstellen
HTML-Code fr AP-Div-Elemente
Dreamweaver erstellt AP-Elemente mithilfe des div-Tags. Wenn Sie ein AP-Element mit dem Werkzeug AP Div zeichnen erstellen, fgt Dreamweaver ein div-Tag in das Dokument ein und weist ihm einen id-Wert zu (standardmig Div1 fr das erste Div-Tag, Div2 fr das zweite Div-Tag usw.). Sie knnen das AP-Div-Tag spter mit dem Bedienfeld AP-Elemente oder dem Eigenschafteninspektor wie gewnscht umbenennen. Dreamweaver verwendet ferner eingebettetes CSS im Head-Bereich des Dokuments, um das AP-Div-Tag zu positionieren und seine genauen Abmessungen zu bestimmen. Das folgende Beispiel gibt den HTML-Code fr ein AP-Div-Tag wieder:
<head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Sample AP Div Page</title> <style type="text/css"> <!-#apDiv1 { position:absolute; left:62px; top:67px; width:421px; height:188px; z-index:1; } --> </style> </head> <body> <div id="apDiv1"> </div> </body> </html>
Sie knnen fr AP-Div-Tags (oder andere AP-Elemente) auf Ihrer Seite Eigenschaften festlegen wie die X- und YKoordinaten, den Z-Index (auch Stapelreihenfolge genannt) und die Sichtbarkeit.
AP Div einfgen
Mit Dreamweaver lassen sich AP-Div-Tags bequem erstellen und auf der Seite positionieren. Auch das Erstellen verschachtelter AP-Div-Tags ist mglich. Wenn Sie ein AP-Div-Tag einfgen, zeigt Dreamweaver standardmig dessen Konturen in der Entwurfsansicht an und hebt den Block hervor, sobald Sie den Mauszeiger darber fhren. Sie knnen das visuelle Hilfsmittel deaktivieren, mit dem die Konturen von AP-Div-Tags (oder anderen AP-Elementen) angezeigt werden, indem Sie im Men Ansicht > Visuelle Hilfsmittel die Optionen AP-Element-Konturen und die CSS-Layout-Konturen deaktivieren. Sie knnen auerdem Hintergrnde und das Box-Modell fr AP-Elemente als visuelles Hilfsmittel einblenden, whrend Sie an dem Entwurf arbeiten. Nachdem Sie ein AP-Div-Tag erstellt haben, knnen Sie diesem Inhalt hinzufgen. Setzen Sie dazu die Einfgemarke in das AP-Div-Tag und fgen Sie den Inhalt so hinzu, wie Sie dies bei einer Seite tun wrden.
Verwandte Themen
AP-Elemente auswhlen auf Seite 178 Markierungsfarbe von Div-Tags ndern auf Seite 169 CSS-Layout-Blcke visualisieren auf Seite 170
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 173
Seiten mit CSS erstellen
Einzelnes AP-Div-Tag oder mehrere aufeinanderfolgende AP-Div-Tags zeichnen 1 Klicken Sie in der Kategorie Layout des Bedienfelds Einfgen auf die Schaltflche AP Div zeichnen
2 Fhren Sie in der Entwurfsansicht des Dokumentfensters einen der folgenden Schritte aus:
Zeichnen Sie ein einzelnes AP-Div-Tag durch Ziehen mit der Maus. Drcken Sie die Strg-Taste (Windows) bzw. die Befehlstaste (Macintosh) und zeichnen Sie nacheinander mehrere
AP-Div-Tags durch Ziehen mit der Maus. Solange Sie die Strg-Taste bzw. die Befehlstaste gedrckt halten, knnen Sie weitere neue AP-Div-Tags zeichnen. AP-Div-Tag an einem bestimmten Ort in das Dokument einfgen
Setzen Sie die Einfgemarke in das Dokumentfenster und whlen Sie dann Einfgen > Layout-Objekte > AP
Div aus. Hinweis: Hierbei wird das AP-Div-Tag an der Stelle eingefgt, an der Sie im Dokumentfenster geklickt haben. Die visuelle Darstellung des AP-Div-Tags hat damit Auswirkungen auf andere, es umgebende Seitenelemente (wie z. B. Text). Einfgemarke in ein AP-Div-Tag setzen
Klicken Sie auf eine beliebige Stelle innerhalb des AP-Div-Tags.
Die Begrenzungen des AP-Div-Tags werden markiert und der Auswahlgriff wird eingeblendet. Das AP-Div-Tag selbst ist nicht ausgewhlt. Rahmen der AP-Div-Tags einblenden
Whlen Sie Ansicht > Visuelle Hilfsmittel aus und aktivieren Sie die Konturen fr AP-Div-Tags oder die CSS-
Layout-Konturen. Hinweis: Sie erzielen den gleichen Effekt, wenn Sie beide Optionen gleichzeitig auswhlen. Rahmen der AP-Div-Tags ausblenden Whlen Sie Ansicht > Visuelle Hilfsmittel aus und deaktivieren Sie die Konturen fr AP-Div-Tags oder die CSS-Layout-Konturen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 174
Seiten mit CSS erstellen
In der ersten Gruppe sind beide Div-Tags bereinander auf der Seite positioniert. In der zweiten Gruppe befindet sich das AP-Div-Tag apDiv4 DIV hingegen innerhalb von apDiv3. (Die Stapelreihenfolge der AP-Div-Tags kann im Bedienfeld AP-Elemente gendert werden.) Meist werden AP-Div-Tags durch Verschachteln zu Gruppen zusammengefasst. Ein verschachteltes AP-Div-Tag wird zusammen mit dem bergeordneten AP-Div-Tag verschoben und kann wahlweise auch die Sichtbarkeit vom bergeordneten AP-Div-Tag erben. Wenn die Option Verschachtelung aktiviert ist, werden AP-Div-Tags automatisch verschachtelt, wenn Sie ein APDiv innerhalb eines anderen AP-Div zeichnen. Wenn Sie innerhalb oder ber einem anderen AP-Div-Tag zeichnen, mssen Sie zudem die Option berlappungen verhindern deaktivieren. Verschachtelte AP-Div-Tags zeichnen 1 Vergewissern Sie sich, dass im Bedienfeld AP-Elemente (Fenster > AP-Elemente) die Option berlappungen verhindern deaktiviert ist.
2 Klicken Sie in der Kategorie Layout des Bedienfelds Einfgen auf die Schaltflche AP Div zeichnen
3 Zeichnen Sie in der Entwurfsansicht des Dokumentfensters durch Ziehen mit der Maus ein AP-Div-Tag innerhalb
eines vorhandenen AP-Div-Tags. Wenn die Option Verschachteln in den Voreinstellungen fr AP-Elemente deaktiviert ist, halten Sie die Alt-Taste (Windows) bzw. die Wahltaste (Macintosh) gedrckt, um durch Ziehen mit der Maus ein AP-Div-Tag innerhalb eines vorhandenen AP-Div-Tags zu zeichnen. Verschachtelte AP-Div-Tags werden in verschiedenen Browsern mglicherweise etwas unterschiedlich angezeigt. Wenn Sie verschachtelte AP-Div-Tags erstellen, sollten Sie whrend der Entwurfsphase des fteren das Erscheinungsbild in verschiedenen Browsern berprfen. Verschachtelte AP-Div-Tags einfgen
1 Vergewissern Sie sich, dass die Option berlappungen verhindern deaktiviert ist. 2 Setzen Sie die Einfgemarke in der Entwurfsansicht des Dokumentfensters in ein vorhandenes AP-Div-Tag und
whlen Sie dann Einfgen > Layout-Objekte > AP Div aus. Vorhandene AP-Elemente ber das Bedienfeld AP-Elemente ineinander verschachteln
1 ffnen Sie das Bedienfeld AP-Elemente mit dem Menbefehl Fenster > AP-Elemente. 2 Whlen Sie im Bedienfeld AP-Elemente ein AP-Element aus. Drcken Sie die Strg-Taste (Windows) bzw. die
Befehlstaste (Macintosh) und ziehen Sie das AP-Element mit der Maus auf das Ziel-AP-Element im Bedienfeld AP-Elemente.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 175
Seiten mit CSS erstellen
3 Sobald der Name das Zielelements hervorgehoben angezeigt wird, lassen Sie die Maustaste los.
AP-Div-Tags automatisch verschachteln, wenn ein AP-Div-Tag innerhalb eines anderen gezeichnet wird
Aktivieren Sie in den Voreinstellungen fr AP-Elemente die Option Verschachteln.
(Macintosh).
2 Whlen Sie AP-Elemente aus der Kategorieliste auf der linken Seite aus, legen Sie die nachstehenden
Voreinstellungen nach Bedarf fest und klicken Sie dann auf OK.
Sichtbarkeit Legt fest, ob AP-Elemente standardmig sichtbar sind. Die Optionen sind Standard, bernehmen,
innerhalb eines vorhandenen AP-Div-Tags aus gezeichnet wird, als verschachteltes AP-Div-Tag gilt. Halten Sie die Alt-Taste (Windows) bzw. die Wahltaste (Macintosh) gedrckt, um diese Einstellung beim Zeichnen eines AP-DivTags vorbergehend zu ndern.
Erweiterungspfeil, falls das Bedienfeld noch nicht erweitert ist, um alle Eigenschaften anzuzeigen.
Verwenden Sie nur alphanumerische Standardzeichen und keine Sonderzeichen, wie Leerzeichen, Bindestriche, Schrgstriche oder Punkte. Jedes AP-Element muss eine eigene eindeutige Kennung haben. Hinweis: Der CSS-P-Eigenschafteninspektor prsentiert dieselben Optionen fr relativ positionierte Elemente.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 176
Seiten mit CSS erstellen
L und T (links und oben) Legen Sie die Position der oberen linken Ecke des AP-Elements relativ zur oberen linken Ecke der Seite bzw. (bei verschachtelten Elementen) des bergeordneten AP-Elements fest. B und H Legen Sie Breite und Hhe des AP-Elements fest.
Hinweis: berschreitet der Inhalt des AP-Elements die angegebene Gre, wird der untere Rand des Elements (wie in der Entwurfsansicht in Dreamweaver angezeigt) so verschoben, dass der Inhalt Platz findet. (Bei der Anzeige in einem Browser wird der untere Rand nur dann erweitert, wenn die Eigenschaft berlauf auf Sichtbar eingestellt ist.) Die Standardeinheit fr die Position und die Gre ist Pixel (px). Sie knnen stattdessen folgende Maeinheiten festlegen: Pica, Punkt, Zoll, mm, cm oder % (Prozentsatz vom entsprechenden Wert des bergeordneten APElements). Zwischen Abkrzung und Wert darf kein Leerzeichen stehen: Die korrekte Eingabe fr 3 Millimeter ist beispielsweise 3mm.
Z-Index Legt den Z-Index oder die Stapelreihenfolge des AP-Elements fest.
AP-Elemente mit einem hheren Zahlenwert werden in Browsern vor AP-Elemente mit einem niedrigeren Wert angezeigt. Sie knnen positive und negative Werte eingeben. Statt durch Eingabe spezifischer Z-Index-Werte kann die Stapelreihenfolge von AP-Elementen auch einfacher ber das Bedienfeld AP-Elemente gendert werden.
Sichtb Legt fest, ob das AP-Element anfnglich sichtbar ist oder nicht. Whlen Sie eine der folgenden Optionen:
Standard gibt keine spezifische Sichtbarkeitseigenschaft an. Wenn keine Sichtbarkeit angegeben ist, schalten die
meisten Browser auf bernehmen.
bernehmen bedeutet, dass die Sichtbarkeitseigenschaft des bergeordneten AP-Elements verwendet werden
soll.
Sichtbar zeigt den Inhalt des AP-Elements an, unabhngig davon, welcher Wert fr das bergeordnete Element gilt. Versteckt blendet den Inhalt des AP-Elements aus, unabhngig davon, welcher Wert fr das bergeordnete
Element gilt. Mit einer Skriptsprache wie JavaScript knnen Sie die Sichtbarkeitseigenschaften steuern und den Inhalt der APElemente dynamisch anzeigen.
Hg-Bild Legt ein Hintergrundbild fr das AP-Element fest.
Klicken Sie auf das Ordnersymbol, um eine Bilddatei zu suchen und auszuwhlen.
Hintergrundfarbe Legt eine Hintergrundfarbe fr das AP-Element fest.
Lassen Sie dieses Feld leer, wenn der Hintergrund durchsichtig sein soll.
Klasse Legt die CSS-Klasse fest, die den Stil des AP-Elements bestimmt. berlauf Legt fest, wie AP-Elemente in einem Browser dargestellt werden, wenn der Inhalt die angegebene Gre des AP-Elements berschreitet.
Sichtbar gibt an, dass der zustzliche Inhalt in dem AP-Element angezeigt wird. Das Element wird soweit vergrert, dass der Inhalt darin Platz hat. Versteckt gibt an, dass zustzlicher Inhalt nicht im Browser angezeigt wird. Scrollen bewirkt, dass der Browser das AP-Element mit Bildlaufleisten anzeigt, auch wenn diese nicht bentigt werden. Auto bewirkt, dass der Browser das AP-Element nur dann mit Scrollbalken anzeigt, wenn diese bentigt werden (wenn der Inhalt des AP-Elements dessen Begrenzungen berschreitet). Hinweis: Die Option berlauf wird nicht in allen Browsern einheitlich untersttzt.
Beschneiden Legt den sichtbaren Bereich des AP-Elements fest.
Legen Sie die linken, oberen, rechten und unteren Koordinaten fest, um in dem Koordinatenraum des AP-Elements (bezogen auf dessen obere linke Ecke) ein Rechteck zu definieren. Das AP-Element wird so beschnitten, dass nur das angegebene Rechteck sichtbar ist. Um beispielsweise den Inhalt eines AP-Elements mit Ausnahme eines Rechtecks
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 177
Seiten mit CSS erstellen
unsichtbar zu machen, das 50 Pixel breit und 75 Pixel hoch ist und sich in der linken oberen Ecke des Elements befindet, legen Sie L auf 0, O auf 0, R auf 50 und U auf 75 fest. Hinweis: Auch wenn CSS eine andere Semantik fr clip festlegt, interpretiert Dreamweaver clip doch in der gleichen Weise wie die meisten Browser.
4 Wenn Sie in einem Textfeld einen Wert eingegeben haben, drcken Sie die Tabulatortaste oder die Eingabetaste
Erweiterungspfeil, falls das Bedienfeld noch nicht erweitert ist, um alle Eigenschaften anzuzeigen.
3 Legen Sie die folgenden Eigenschaften fr mehrere AP-Elemente nach Bedarf fest:
L und T (links und oben) Legen Sie die Position der oberen linken Ecke der AP-Elemente relativ zur oberen linken Ecke der Seite bzw. (bei verschachtelten Elementen) des bergeordneten AP-Elements fest. B und H Legen Sie Breite und Hhe der AP-Elemente fest.
Hinweis: berschreitet der Inhalt eines AP-Elements die angegebene Gre, wird der untere Rand des Elements (wie in der Entwurfsansicht in Dreamweaver angezeigt) so verschoben, dass der Inhalt Platz findet. (Bei der Anzeige in einem Browser wird der untere Rand nur dann erweitert, wenn die Eigenschaft berlauf auf Sichtbar eingestellt ist.) Die Standardeinheit fr die Position und die Gre ist Pixel (px). Sie knnen stattdessen folgende Maeinheiten festlegen: Pica, Punkt, Zoll, mm, cm oder % (Prozentsatz vom entsprechenden Wert des bergeordneten APElements). Zwischen Abkrzung und Wert darf kein Leerzeichen stehen: Die korrekte Eingabe fr 3 Millimeter ist beispielsweise 3mm.
Sichtb Legt fest, ob die AP-Elemente anfnglich sichtbar sind oder nicht. Whlen Sie eine der folgenden Optionen:
Standard gibt keine spezifische Sichtbarkeitseigenschaft an. Wenn keine Sichtbarkeit angegeben ist, schalten die
meisten Browser auf bernehmen.
bernehmen bedeutet, dass die Sichtbarkeitseigenschaft des bergeordneten AP-Elements verwendet werden
soll.
Sichtbar zeigt den Inhalt der AP-Elemente an, unabhngig davon, welcher Wert fr das jeweils bergeordnete
Element gilt.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 178
Seiten mit CSS erstellen
Versteckt blendet den Inhalt des AP-Elements aus, unabhngig davon, welcher Wert fr das bergeordnete
Element gilt. Mit einer Skriptsprache wie JavaScript knnen Sie die Sichtbarkeitseigenschaften steuern und den Inhalt der APElemente dynamisch anzeigen.
Tag Legt das zur Definition der AP-Elemente verwendete HTML-Tag fest. Hg-Bild Legt ein Hintergrundbild fr die AP-Elemente fest.
Klicken Sie auf das Ordnersymbol, um eine Bilddatei zu suchen und auszuwhlen.
Hintergrundfarbe Legt eine Hintergrundfarbe fr die AP-Elemente fest. Lassen Sie dieses Feld leer, wenn der
AP-Elemente auswhlen
Whlen Sie ein oder mehrere AP-Elemente aus, um sie zu bearbeiten oder ihre Eigenschaften zu ndern. AP-Elemente im Bedienfeld AP-Elemente auswhlen Klicken Sie im Bedienfeld AP-Elemente (Fenster > AP-Elemente) auf den Namen des AP-Elements. AP-Elemente im Dokumentfenster auswhlen
Fhren Sie einen der folgenden Schritte aus:
Klicken Sie auf den Rand eines AP-Elements. Halten Sie Strg+Umschalt (Windows) bzw. Befehl+Umschalt (Macintosh) gedrckt und klicken Sie in ein APElement.
Klicken Sie in ein AP-Element und drcken Sie Strg+A (Windows) oder Befehl+A (Macintosh), um dessen Inhalt
auszuwhlen. Drcken Sie Strg+A bzw. Befehl+A erneut, um das AP-Element auszuwhlen.
Klicken Sie in ein AP-Element und whlen Sie das Tag im Tag-Selektor aus.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 179
Seiten mit CSS erstellen
Mehrere AP-Elemente auswhlen Fhren Sie einen der folgenden Schritte aus:
Klicken Sie im Bedienfeld AP-Elemente (Fenster > AP-Elemente) bei gedrckter Umschalttaste auf zwei oder
mehr AP-Elementnamen.
Klicken Sie im Dokumentfenster bei gedrckter Umschalttaste in zwei oder mehr AP-Elemente oder klicken Sie
auf die AP-Elementerahmen.
Beim Verschieben des AP-Elements wird die neue Position des Elements durch eine Linie angezeigt. Lassen Sie die Maustaste los, wenn sich diese Linie an der gewnschten Position in der Stapelreihenfolge befindet. Stapelreihenfolge von AP-Elementen im Eigenschafteninspektor ndern
1 ffnen Sie das Bedienfeld AP-Elemente mit dem Menbefehl Fenster > AP-Elemente, um die aktuelle
Stapelreihenfolge anzuzeigen.
2 Whlen Sie im Bedienfeld AP-Elemente oder im Dokumentfenster ein AP-Element aus. 3 Geben Sie im Eigenschafteninspektor (Fenster > Eigenschaften) eine Zahl im Textfeld Z-Index ein.
Geben Sie eine hhere Zahl ein, um das AP-Element in der Stapelreihenfolge hochzusetzen. Geben Sie eine niedrigere Zahl ein, um das AP-Element in der Stapelreihenfolge zurckzusetzen.
Ein geffnetes Auge bedeutet, dass das AP-Element sichtbar ist. Ein geschlossenes Auge bedeutet, dass das AP-Element nicht sichtbar ist.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 180
Seiten mit CSS erstellen
Wenn kein Augensymbol angezeigt wird, bernimmt das AP-Element in der Regel die Sichtbarkeit der
bergeordneten Ebene. (Bei nicht verschachtelten AP-Elementen ist das bergeordnete Element der Hauptteil des Dokuments, der immer sichtbar ist.) Auerdem wird kein Augensymbol angezeigt, wenn keine Sichtbarkeit angegeben ist (diese Option wird im Eigenschafteninspektor als Standardsichtbarkeit angezeigt). Sichtbarkeit aller AP-Elemente gleichzeitig ndern Klicken Sie im Bedienfeld AP-Elemente (Fenster > Ebenen) auf das Augensymbol in der berschriftenzeile ganz oben in der Spalte. Hinweis: Auf diese Weise knnen Sie alle AP-Elemente als sichtbar oder versteckt definieren. Die Option bernehmen ist dabei jedoch nicht verfgbar.
Verwandte Themen
Layoutraster verwenden auf Seite 186 Gre eines AP-Elements ndern 1 Whlen Sie in der Entwurfsansicht ein AP-Element aus.
2 Fhren Sie einen der folgenden Schritte aus, um die Gre des AP-Elements zu verndern:
Um die Gre durch Ziehen zu ndern, ziehen Sie einen der Grennderungsgriffe des AP-Elements. Um die Ebene um je ein Pixel zu verkleinern oder zu vergrern, halten Sie die Strg-Taste (Windows) bzw. die
Wahltaste (Macintosh) gedrckt und drcken dann eine der Pfeiltasten. Die Pfeiltasten verschieben den rechten und den unteren Rand des AP-Elements. Den oberen und den linken Rand knnen Sie auf diese Weise nicht verschieben.
Um die Ebene in Raster-Inkrementen zu verkleinern oder zu vergrern, halten Sie Umschalt+Strg (Windows)
bzw. Umschalt+Wahl (Macintosh) gedrckt und drcken dann eine der Pfeiltasten.
Geben Sie im Eigenschafteninspektor (Fenster > Eigenschaften) Werte fr die Breite (B) und die Hhe (H) ein.
Das ndern der Gre wirkt sich auf die Breite und Hhe eines AP-Elements aus. Dies hat jedoch keinen Einfluss darauf, wie viel vom Inhalt des AP-Elements sichtbar ist. Den sichtbaren Bereich eines AP-Elements knnen Sie in den Voreinstellungen festlegen. Gre mehrerer AP-Elemente gleichzeitig ndern 1 Whlen Sie in der Entwurfsansicht zwei oder mehr AP-Elemente aus.
2 Fhren Sie einen der folgenden Schritte aus:
Whlen Sie Modifizieren > Anordnen > Auf gleiche Breite einstellen bzw. Modifizieren > Anordnen >
Auf gleiche Hhe einstellen aus. Die zuerst ausgewhlten AP-Elemente werden an die Breite oder Hhe des zuletzt ausgewhlten AP-Elements angepasst.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 181
Seiten mit CSS erstellen
Geben Sie im Eigenschafteninspektor (Fenster > Eigenschaften) unter Mehrere CSS-P-Elemente Werte fr
die Breite und die Hhe ein. Die eingegebenen Werte werden auf alle ausgewhlten AP-Elemente angewandt.
AP-Elemente verschieben
In der Entwurfsansicht knnen Sie AP-Elemente verschieben wie Objekte in den meisten Grafikanwendungen. Wenn die Option berlappungen verhindern aktiv ist, knnen Sie ein AP-Element nur so weit verschieben, dass es sich nicht mit einem anderen AP-Element berlappt.
1 Whlen Sie in der Entwurfsansicht, ein oder mehrere AP-Elemente aus. 2 Fhren Sie einen der folgenden Schritte aus:
Um die AP-Elemente durch Ziehen zu verschieben, ziehen Sie den Auswahlgriff des zuletzt ausgewhlten APElements (dieses Element ist schwarz markiert).
Um die Ebenen um je ein Pixel zu verschieben, drcken Sie eine der Pfeiltasten.
Um die AP-Elemente um das aktuelle Inkrement zur Ausrichtung am Raster zu verschieben, halten Sie die Umschalttaste gedrckt, whrend Sie die Pfeiltasten drcken.
Verwandte Themen
Layoutraster verwenden auf Seite 186
AP-Elemente ausrichten
Mit den Befehlen zum Ausrichten von AP-Elementen knnen Sie ein oder mehrere AP-Elemente an einem Rand des zuletzt ausgewhlten AP-Elements ausrichten. Beim Ausrichten von AP-Elementen werden mglicherweise nicht ausgewhlte, untergeordnete AP-Elemente mit verschoben, weil das ihnen bergeordnete AP-Element ausgewhlt und verschoben wird. Wenn Sie dies vermeiden mchten, verwenden Sie keine verschachtelten AP-Elemente.
1 Whlen Sie das AP-Element in der Entwurfsansicht aus. 2 Whlen Sie Modifizieren > Anordnen und anschlieend eine Ausrichtungsoption aus.
Wenn Sie beispielsweise den Befehl Oben ausrichten whlen, werden alle AP-Elemente so verschoben, dass sich ihr oberer Rand in der gleichen vertikalen Position befindet wie der obere Rand des zuletzt ausgewhlten (schwarz markierten) AP-Elements.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 182
Seiten mit CSS erstellen
Sie knnen zwischen AP-Elementen und Tabellen hin- und herwechseln, um das Layout anzupassen und die Seite zu optimieren. (Beachten Sie jedoch, dass Dreamweaver eine Tabelle bei der Rckkonvertierung in AP-Elemente immer zu AP-Div-Tags wandelt unabhngig davon, welche AP-Elementtypen sich vor der Konvertierung in Tabellen auf der Seite befanden.) Es ist nicht mglich, nur bestimmte Tabellen bzw. AP-Elemente auf einer Seite zu konvertieren. Die Umwandlung von AP-Elementen in Tabellen und von Tabellen in AP-Div-Tags kann nur fr die gesamte Seite erfolgen. Hinweis: Bei Vorlagen oder Dokumenten, die auf Vorlagen basieren, ist das Konvertieren von AP-Elementen in Tabellen bzw. von Tabellen in AP-Div-Tags nicht mglich. Erstellen Sie ein stattdessen Ihr Layout in einem vorlagenfreien Dokument und nehmen Sie die Konvertierung vor, bevor Sie das Dokument als Vorlage speichern.
Wenn Sie diese Option auswhlen, hat die resultierende Tabelle weniger leere Zeilen und Spalten, stimmt aber mglicherweise nicht genau mit Ihrem Layout berein.
Durchsichtige GIFs verwenden Bewirkt, dass in die letzte Zeile der Tabelle transparente GIFs eingefgt werden.
Dadurch wird sichergestellt, dass die Tabelle in allen Browsern mit gleicher Spaltenbreite angezeigt wird. Ist diese Option aktiviert, knnen Sie die resultierende Tabelle nicht durch Ziehen der Spalten bearbeiten. Ist diese Option deaktiviert, enthlt die resultierende Tabelle zwar keine transparenten GIFs, die Breite der Spalten wird aber in den verschiedenen Browsern mglicherweise unterschiedlich angezeigt.
Auf Seite zentrieren Bewirkt, dass die resultierende Tabelle auf der Seite zentriert wird. Ist diese Option deaktiviert,
beginnt die Tabelle am linken Seitenrand. Tabellen in AP-Divs konvertieren 1 Whlen Sie Modifizieren > Konvertieren > Tabellen in AP-Divs aus.
2 Legen Sie die folgenden Optionen fest und klicken Sie auf OK.
AP-Elementberlappungen verhindern Beschrnkt die Position der AP-Elemente, sodass sie sich nicht berlappen,
von AP-Elementen zu vereinfachen. Die Tabellen werden in AP-Div-Tags umgewandelt. Leere Zellen werden nur dann in AP-Elemente konvertiert, wenn sie eine Hintergrundfarbe haben.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 183
Seiten mit CSS erstellen
Hinweis: Seitenelemente, die sich auerhalb von Tabellen befinden, werden ebenfalls in AP-Div-Tags eingefgt.
AP-Elementberlappungen verhindern
Da Tabellenzellen sich nicht berlappen knnen, kann Dreamweaver keine Tabelle aus berlappenden AP-Elementen erstellen. Wenn Sie die AP-Elemente in einem Dokument in Tabellen umwandeln mchten, aktivieren Sie die Option berlappungen verhindern. Dies schrnkt die Bewegung und Positionierung der AP-Elemente so ein, dass sie einander nicht berlappen knnen. Ist diese Option aktiviert, knnen AP-Element nicht vor anderen AP-Elementen erstellt oder so verschoben, vergrert oder verkleinert werden, dass sie sich ber anderen AP-Elementen befinden. Weiterhin knnen APElemente nicht in vorhandenen AP-Elementen verschachtelt werden. Wenn Sie bereits berlappende AP-Elemente erstellt haben, bevor Sie diese Option aktivieren, mssen Sie die betreffenden AP-Elemente manuell verschieben, damit sie einander nicht berlappen. Vorhandene AP-Elementberlappungen auf einer Seite werden von Dreamweaver nicht automatisch behoben, wenn Sie die Option berlappungen verhindern aktivieren. Wenn sowohl diese Option als auch die Ausrichtfunktion aktiviert sind, werden AP-Elemente nicht am Raster ausgerichtet, wenn sich dadurch zwei AP-Elemente berlappen wrden. Stattdessen wird ein AP-Element am Rand des nchstgelegenen AP-Elements ausgerichtet. Hinweis: Bei bestimmten Aktionen knnen Sie AP-Elemente berlappen, obwohl die Option berlappungen verhindern aktiviert ist. Wenn Sie ein AP-Element mithilfe des Mens Einfgen hinzufgen, Werte im Eigenschafteninspektor eingeben oder AP-Elemente neu positionieren, indem Sie den HTML-Quellcode bearbeiten, kann es vorkommen, dass AP-Elemente sich auch dann berlappen oder verschachtelt sind, wenn die Option aktiviert ist. In diesem Fall mssen Sie die berlappenden AP-Elemente durch Ziehen in der Entwurfsansicht voneinander trennen.
Whlen Sie im Bedienfeld AP-Elemente (Fenster > AP-Elemente) die Option berlappungen verhindern aus. Whlen Sie im Dokumentfenster Modifizieren > Anordnen > AP-Elementberlappungen verhindern aus.
ENTWURF
Letzte Aktualisierung 19.3.2010
184
Lineale knnen durch Auswahl von Ansicht > Lineale > Zeigen ein- und ausgeblendet werden. Wenn Sie den Ursprung ndern mchten, ziehen Sie das Linealursprungssymbol
linken oberen Ecke des Dokumentfensters) an eine beliebige Stelle der Seite. (in der Entwurfsansicht in der
Wenn Sie den Ursprung wieder an die Standardposition zurcksetzen mchten, whlen Sie Ansicht > Lineale >
Ursprung zurcksetzen aus.
Um die Maeinheit zu ndern, whlen Sie Ansicht > Lineale und dann Pixel, Zoll oder Zentimeter aus.
Layouthilfslinien einrichten
Hilfslinien sind Linien, die Sie aus den Linealen auf das Dokument ziehen. Sie dienen zum genaueren Positionieren und Ausrichten von Objekten. Sie knnen Hilfslinien auerdem zum Messen der Gre von Seitenelementen oder zum Emulieren der sichtbaren Bereiche von Webbrowsern verwenden. Sie knnen Elemente an Hilfslinien und Hilfslinien an Elementen ausrichten. Dies vereinfacht ihre Ausrichtung. (Die Funktion zum Ausrichten kann jedoch nur verwendet werden, wenn Elemente absolut positioniert wurden.) Darber hinaus knnen Sie Hilfslinien sperren, um zu verhindern, dass sie versehentlich von anderen Benutzern verschoben werden.
knnen Sie die Position der Hilfslinie ndern. Hinweis: In der Standardeinstellung werden Hilfslinien als absolute Pixelmae von der oberen oder linken Seite des Dokuments aufgezeichnet und relativ zum Ursprung des Lineals angezeigt. Drcken Sie beim Erstellen oder Verschieben einer Hilfslinie die Umschalttaste, um sie als Prozentsatz aufzuzeichnen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 185
Seitenlayouts mit HTML gestalten
Wenn Sie Hilfslinien an Elementen ausrichten mchten, whlen Sie Ansicht > Hilfslinien > Hilfslinien an
Elementen ausrichten aus. Hinweis: Wenn Sie die Gre von Elementen, z. B. von absolut positionierten (AP-)Elementen, Tabellen oder Bildern, ndern, werden die genderten Elemente an Hilfslinien ausgerichtet.
eine beliebige Stelle zwischen den beiden Hilfslinien. Hinweis: Fr Hilfslinien wird die gleiche Maeinheit wie fr die Lineale verwendet.
Hilfslinien entfernen
Ziehen Sie die Hilfslinie aus dem Dokument.
Hilfslinieneinstellungen ndern
Whlen Sie Ansicht > Hilfslinien > Hilfslinien bearbeiten aus, legen Sie die folgenden Optionen fest und
Farbe aus oder geben Sie im Textfeld den Hexadezimalwert einer Farbe ein.
Abstandsfarbe Gibt die Farbe der Linien an, die als Abstandsanzeigen angezeigt werden, wenn Sie den Mauszeiger zwischen Hilfslinien setzen. Klicken Sie auf das Farbfeld und whlen Sie im Farbwhler eine Farbe aus oder geben Sie im Textfeld den Hexadezimalwert einer Farbe ein. Hilfslinien anzeigen Blendet Hilfslinien in der Entwurfsansicht ein. An Hilfslinien ausrichten Richtet Elemente beim Verschieben auf der Seite an Hilfslinien aus. Hilfslinien sperren Fixiert Hilfslinien an der jeweiligen Position. Hilfslinien an Elementen ausrichten Richtet Hilfslinien beim Ziehen mit der Maus an Elementen auf der Seite aus. Alles lschen Lscht alle Hilfslinien auf der Seite.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 186
Seitenlayouts mit HTML gestalten
Verwandte Themen
AP-Elemente ausrichten auf Seite 181 AP-Elemente verschieben auf Seite 181
Layoutraster verwenden
Mit dem Raster wird im Dokumentfenster ein System aus horizontalen und vertikalen Linien angezeigt. Es ist ntzlich fr die genaue Positionierung von Objekten. Sie knnen absolut positionierte Seitenelemente beim Verschieben automatisch am Raster ausrichten und durch Festlegen der Rastereinstellungen das Ausrichtverhalten oder das Raster selbst ndern. Dabei spielt es keine Rolle, ob das Raster ein- oder ausgeblendet ist.
Verwandte Themen
AP-Elemente ausrichten auf Seite 181 AP-Elemente verschieben auf Seite 181
Rastereinstellungen ndern
1 Whlen Sie Ansicht > Raster > Rastereinstellungen aus. 2 Legen Sie die Optionen fest und klicken Sie auf OK, um die nderungen anzuwenden.
Farbe Gibt die Farbe der Rasterlinien an. Klicken Sie auf das Farbfeld und whlen Sie im Farbwhler eine Farbe aus oder geben Sie im Textfeld den Hexadezimalwert einer Farbe ein. Raster anzeigen Blendet das Raster in der Entwurfsansicht ein. Am Raster ausrichten Richtet die Seitenelemente an den Rasterlinien aus. Abstand Legt den Abstand zwischen den Rasterlinien fest. Geben Sie eine Zahl ein und whlen Sie im Men die Maeinheit Pixel, Zoll oder Zentimeter aus. Anzeige Gibt an, ob die Rasterlinien als durchgehende Linien oder als Punktlinien angezeigt werden.
Hinweis: Wenn die Option Raster anzeigen nicht aktiviert ist, wird das Raster im Dokument nicht eingeblendet. Darber hinaus werden keine nderungen angezeigt.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 187
Seitenlayouts mit HTML gestalten
Tracing-Bilder verwenden
Tracing-Bilder knnen als Hilfsmittel zur Reproduktion eines Seitendesigns verwendet werden, das in einer Grafikanwendung wie Adobe Freehand oder Fireworks erstellt wurde. Ein Tracing-Bild ist ein JPEG-, GIF- oder PNG-Bild, das im Hintergrund des Dokumentfensters platziert wird. Sie knnen das Bild ausblenden, seine Transparenz festlegen und seine Position ndern. Das Tracing-Bild wird nur in Dreamweaver angezeigt. Beim Anzeigen der Seite in einem Browser ist es nicht sichtbar. Wenn das Tracing-Bild eingeblendet ist, sind das tatschliche Hintergrundbild und die Hintergrundfarbe der Seite nicht im Dokumentfenster, sondern nur bei der Vorschau der Seite im Browser sichtbar.
Whlen Sie Ansicht > Tracing-Bild > Laden aus. Whlen Sie Modifizieren > Seiteneigenschaften aus und klicken Sie dann neben dem Textfeld Tracing-Bild
auf Durchsuchen.
2 Whlen Sie im Dialogfeld Bildquelle auswhlen eine Bilddatei aus und klicken Sie auf OK. 3 Legen Sie im Dialogfeld Seiteneigenschaften die Transparenz des Bilds fest, indem Sie den Schieberegler fr die
Bildtransparenz nach links oder rechts ziehen. Klicken Sie dann auf OK. Wenn Sie ein anderes Tracing-Bild auswhlen oder die Transparenz des aktuellen Tracing-Bilds ndern mchten, knnen Sie jederzeit Modifizieren > Seiteneigenschaften auswhlen.
Geben Sie die entsprechenden Koordinatenwerte in den Feldern X und Y ein, um die Position eines TracingBilds przise anzugeben.
ber die Pfeiltasten knnen Sie das Bild um jeweils 1 Pixel verschieben. Drcken Sie die Umschalttaste und eine der Pfeiltasten, um das Bild um jeweils 5 Pixel zu verschieben.
Das Tracing-Bild wird wieder in der oberen linken Ecke (0,0) des Dokumentfensters angezeigt.
Die obere linke Ecke des Tracing-Bilds wird an der oberen linken Ecke des ausgewhlten Elements ausgerichtet.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 188
Seitenlayouts mit HTML gestalten
Verwandte Themen
Seitenlayouts mit CSS gestalten auf Seite 161
Wenn Sie beispielsweise fr eine Zelle als Hintergrundfarbe Blau festlegen und anschlieend als Hintergrundfarbe der ganzen Tabelle Gelb auswhlen, wird die blaue Zelle nicht gelb dargestellt, da die Formatierung der Zelle Vorrang vor der Tabellenformatierung hat. Hinweis: Wenn Sie Eigenschaften fr eine Spalte definieren, ndert Dreamweaver fr jede Zelle der Spalte die Attribute des td-Tags.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 189
Seitenlayouts mit HTML gestalten
angezeigt werden soll. Hinweis: Wenn es sich um ein leeres Dokument handelt, knnen Sie die Einfgemarke nur an den Dokumentanfang setzen.
Whlen Sie Einfgen > Tabelle aus. Klicken Sie in der Kategorie Allgemein des Bedienfelds Einfgen auf Tabelle.
2 Legen Sie die Attribute im Dialogfeld Tabelle fest und klicken Sie auf OK, um die Tabelle zu erstellen.
Zeilen Legt die Anzahl der Tabellenzeilen fest. Spalten Legt die Anzahl der Tabellenspalten fest. Tabellenbreite Gibt die Breite der Tabelle in Pixel oder als Prozentsatz der Fensterbreite des Browsers an. Randstrke Gibt die Breite der Tabellenrnder in Pixel an. Zellabstand Legt den Abstand zwischen aneinander grenzen Tabellenzellen in Pixel fest.
Wenn Sie fr Randstrke, Zellabstand und Zellauffllung nicht ausdrcklich Werte zuweisen, wird in den meisten Browsern fr die Randstrke und die Zellauffllung der Wert 1 und fr den Zellabstand der Wert 2 festgelegt. Legen Sie fr Zellauffllung und Zellabstand den Wert 0 fest, wenn die Tabelle im Browser ohne Rand, Zellauffllung und Zellabstand angezeigt werden soll.
Zellauffllung Gibt den Abstand zwischen den Zellrndern und dem Zellinhalt in Pixel an. Kein Die Spalten- oder Zeilenberschriften in der Tabelle sind nicht aktiviert. Links Macht die erste Spalte der Tabelle zur Spalte fr berschriften, sodass Sie fr jede Zeile der Tabelle eine berschrift eingeben knnen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 190
Seitenlayouts mit HTML gestalten
Oberer Rand Macht die erste Zeile der Tabelle zur Zeile fr berschriften, sodass Sie fr jede Spalte der Tabelle eine
Falls Sie davon ausgehen knnen, dass von den Besuchern Ihrer Website Bildschirmlesegerte verwendet werden, empfiehlt es sich, berschriften einzugeben. Mit Bildschirmlesegerten werden die Tabellenberschriften gelesen, sodass Benutzer sich leichter in der Tabelle zurechtfinden.
Beschriftung Gibt eine Tabellenberschrift an, die auerhalb der Tabelle angezeigt wird. Beschriftung ausrichten Gibt die Stelle an, an der die Tabellenbeschriftung im Verhltnis zur Tabelle angezeigt wird. Zusammenfassung Enthlt eine Beschreibung der Tabelle. Bildschirmlesegerte lesen den Text der
Verwandte Themen
Text einfgen und formatieren auf Seite 232 Bilder hinzufgen und ndern auf Seite 249
Tabellendaten importieren
1 Fhren Sie einen der folgenden Schritte aus:
Whlen Sie Datei > Importieren > Tabellendaten aus. Klicken Sie in der Kategorie Daten des Bedienfelds Einfgen auf das Symbol Tabellendaten importieren Whlen Sie Einfgen > Tabellenobjekte > Tabellendaten importieren aus.
2 Geben Sie die Optionen fr die Tabellendaten an und klicken Sie auf OK.
Datendatei Der Name der zu importierenden Datei. Klicken Sie auf die Schaltflche Durchsuchen, um eine Datei auszuwhlen. Trennzeichen Das in der importierten Datei verwendete Trennzeichen.
Wenn Sie Anderes auswhlen, wird rechts neben dem Popupmen ein Textfeld angezeigt. Geben Sie das in der Datei verwendete Trennzeichen ein. Hinweis: Geben Sie das Trennzeichen an, das beim Speichern der Datendatei verwendet wurde. Andernfalls wird die Datei nicht ordnungsgem importiert und die Daten werden in der Tabelle nicht korrekt formatiert.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 191
Seitenlayouts mit HTML gestalten
Whlen Sie An Daten anpassen aus, damit die Spaltenbreite an die lngste Textzeichenfolge in der Spalte
angepasst wird.
Whlen Sie Festlegen aus, um eine feste Tabellenbreite in Pixel oder als Prozentsatz der Fensterbreite des
Browsers festzulegen.
Rahmen Gibt die Breite der Tabellenrnder in Pixel an. Zellauffllung Der Abstand zwischen Zellinhalt und Zellrndern in Pixel. Zellabstand Der Abstand zwischen aneinander grenzenden Tabellenzellen in Pixel.
Wenn Sie fr Rahmen, Zellabstand und Zellauffllung nicht ausdrcklich Werte zuweisen, wird in den meisten Browsern fr den Rahmen und die Zellauffllung der Wert 1 und fr den Zellabstand der Wert 2 festgelegt. Legen Sie fr Zellauffllung und Zellabstand den Wert 0 fest, wenn die Tabelle im Browser ohne Zellauffllung und Zellabstand angezeigt werden soll. Wenn fr Rahmen der Wert 0 festgelegt ist und die Zell- und Tabellenrnder angezeigt werden sollen, whlen Sie Ansicht > Visuelle Hilfsmittel > Tabellenrahmen aus.
Format der obersten Zeile Gibt gegebenenfalls die Formatierung an, die der obersten Zeile der Tabelle zugewiesen
wird. Es stehen vier Formatierungsoptionen zur Verfgung: Keine Formatierung, Fett, Kursiv oder Fett und Kursiv.
Tabellen exportieren
1 Setzen Sie die Einfgemarke in eine Zelle der Tabelle. 2 Whlen Sie Datei > Exportieren > Tabelle aus. 3 Legen Sie die folgenden Optionen fest:
Trennzeichen Gibt an, welches Trennzeichen zwischen den Elementen in der exportierten Datei verwendet wird. Zeilenumbrche Legt fest, in welchem Betriebssystem die exportierte Datei geffnet wird: Windows, Macintosh oder UNIX. (In den einzelnen Betriebssystemen wird das Ende einer Textzeile unterschiedlich angegeben.)
4 Klicken Sie auf Exportieren. 5 Geben Sie einen Namen fr die Datei ein und klicken Sie auf Speichern.
Tabellenelemente auswhlen
Sie knnen eine ganze Tabelle, Zeile oder Spalte auswhlen. Sie knnen zudem eine oder mehrere einzelne Zellen auswhlen. Wenn Sie den Mauszeiger ber eine Tabelle, Zeile, Spalte oder Zelle bewegen, werden in Dreamweaver alle Zellen der Auswahl markiert, damit Sie wissen, welche Zellen ausgewhlt werden. Dies ist von Vorteil, wenn die jeweiligen Tabellen keine Rahmen aufweisen oder verschachtelt sind oder wenn Zellen mehrere Spalten oder Zeilen umfassen. Sie knnen die Markierungsfarbe in den Voreinstellungen ndern. Wenn Sie den Mauszeiger auf den Rahmen einer Tabelle setzen und dann die Strg-Taste (Windows) bzw. die Befehlstaste (Macintosh) gedrckt halten, wird die gesamte Struktur, d. h. alle Zellen der Tabelle, hervorgehoben. Dies ist ntzlich, wenn Sie bei verschachtelten Tabellen die Struktur einer einzelnen Tabelle anzeigen mchten.
Klicken Sie auf die linke obere Ecke der Tabelle, auf eine beliebige Stelle auf dem oberen oder unteren Tabellenrand
oder auf den Rand einer Zeile oder Spalte.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 192
Seitenlayouts mit HTML gestalten
Hinweis: Wenn der Mauszeiger die Form des Tabellenrastersymbols (sofern Sie nicht auf den Rand einer Zeile oder Spalte klicken).
<table>-Tag aus.
Klicken Sie in eine Tabellenzelle und whlen Sie dann im Tag-Selektor links unten im Dokumentfenster das Klicken Sie in eine Tabellenzelle und whlen Sie dann Modifizieren > Tabelle > Tabelle auswhlen. Klicken Sie in eine Tabellenzelle und dann auf das Kopfzeilenmen und whlen Sie Tabelle auswhlen. Am
unteren und rechten Rand der ausgewhlten Tabelle werden Auswahlziehpunkte angezeigt.
Klicken Sie in die Zelle und whlen Sie dann im Tag-Selektor unten links im Dokumentfenster das Tag <td> aus. Klicken Sie bei gedrckter Strg-Taste (Windows) bzw. Befehlstaste (Macintosh) in die Zelle. Klicken Sie in die Zelle und whlen Sie dann Bearbeiten > Alles auswhlen aus.
Wenn eine Zelle ausgewhlt ist und Sie die gesamte Tabelle auswhlen mchten, whlen Sie erneut Bearbeiten > Alles auswhlen aus.
Ziehen Sie den Mauszeiger von einer Zelle in eine andere Zelle. Klicken Sie in eine Zelle, klicken Sie bei gedrckter Strg-Taste (Windows) bzw. Befehlstaste (Macintosh) in die
gleiche Zelle, um diese auszuwhlen, und klicken Sie dann bei gedrckter Umschalttaste in eine andere Zelle.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 193
Seitenlayouts mit HTML gestalten
Alle Zellen innerhalb der Reihe oder des Rechtecks zwischen den beiden Zellen werden ausgewhlt.
Zeilen oder Spalten. Wenn die entsprechenden Zellen, Zeilen oder Spalten noch nicht ausgewhlt sind, werden sie zur Auswahl hinzugefgt. Ist sie bereits ausgewhlt, wird sie aus der Auswahl entfernt.
(Macintosh).
2 Whlen Sie links in der Kategorieliste die Option Markierung aus, nehmen Sie eine der folgenden nderungen
Um die Markierungsfarbe fr Tabellenelemente zu ndern, klicken Sie auf das Farbfeld Mouse-Over und whlen
Sie mit dem Farbwhler eine Markierungsfarbe aus (oder geben Sie den Hexadezimalwert fr die Markierungsfarbe im Textfeld ein).
Um die Markierung von Tabellenelementen zu aktivieren oder zu deaktivieren, aktivieren oder deaktivieren Sie das
Kontrollkstchen Anzeigen fr Mouse-Over. Hinweis: Diese Optionen wirken sich auf alle Objekte aus, beispielsweise auf absolut positionierte Elemente (APElemente), die in Dreamweaver markiert werden, wenn Sie den Zeiger darber bewegen.
Tabelleneigenschaften festlegen
Tabellen knnen mit dem Eigenschafteninspektor bearbeitet werden.
1 Whlen Sie eine Tabelle aus. 2 ndern Sie im Eigenschafteninspektor (Fenster > Eigenschaften) die Eigenschaften nach Bedarf.
Tabellen-ID Die Identifikationsnummer der Tabelle. Zeilen und Spalten Die Anzahl der Zeilen und Spalten in der Tabelle. B Die Breite der Tabelle in Pixel oder als Prozentsatz der Fensterbreite des Browsers.
Hinweis: Die Hhe einer Tabelle mssen Sie in der Regel nicht festlegen.
Zellauffllung Der Abstand zwischen Zellinhalt und Zellrndern in Pixel. Zellabstand Der Abstand zwischen aneinander grenzenden Tabellenzellen in Pixel. Ausrichten Gibt an, an welcher Stelle die Tabelle relativ zu anderen Elementen im gleichen Absatz, beispielsweise Text
oder Bilder, angezeigt wird. ber Links wird die Tabelle links neben anderen Elementen ausgerichtet (Text im gleichen Absatz wird rechts neben der Tabelle umgebrochen). ber Rechts wird die Tabelle rechts neben anderen Elementen ausgerichtet (Text wird links neben der Tabelle umgebrochen). ber Zentriert wird die Tabelle zentriert (Text wird oberhalb und/oder unterhalb der Tabelle angezeigt). Standard gibt an, dass die Standardausrichtung des Browsers verwendet wird.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 194
Seitenlayouts mit HTML gestalten
Wenn die Ausrichtungsoption Standard ausgewhlt ist, wird neben der Tabelle kein anderer Inhalt angezeigt. Wenn eine Tabelle neben anderen Inhalten angezeigt werden soll, whlen Sie die Ausrichtungsoption Links oder Rechts aus.
Rahmen Gibt die Breite der Tabellenrnder in Pixel an.
Wenn Sie fr Rahmen, Zellabstand und Zellauffllung nicht ausdrcklich Werte zuweisen, wird in den meisten Browsern fr den Rahmen und die Zellauffllung der Wert 1 und fr den Zellabstand der Wert 2 festgelegt. Legen Sie fr Rahmen, Zellauffllung und Zellabstand den Wert 0 fest, wenn die Tabelle im Browser ohne Zellauffllung und Zellabstand angezeigt werden soll. Wenn fr Rahmen der Wert 0 festgelegt ist und die Zell- und Tabellenrnder angezeigt werden sollen, whlen Sie Ansicht > Visuelle Hilfsmittel > Tabellenrahmen aus.
Klasse legt eine CSS-Klasse in der Tabelle fest.
Hinweis: Unter Umstnden mssen Sie den Eigenschafteninspektor fr Tabellen erweitern, damit die folgenden Optionen angezeigt werden. Klicken Sie zum Erweitern des Eigenschafteninspektors fr Tabellen auf den Erweiterungspfeil in der rechten unteren Ecke.
Spaltenbreiten lschen und Zeilenhhen lschen lschen in der Tabelle alle explizit festgelegten Werte fr
Hhe aller Spalten in der Tabelle (sowie die Breite der gesamten Tabelle) in einen Prozentsatz der Breite des Dokumentfensters um. Wenn Sie in einem Textfeld einen Wert eingegeben haben, drcken Sie die Tabulatortaste oder die Eingabetaste (Windows) bzw. Return (Macintosh), um den Wert zu bernehmen.
linksbndig, rechtsbndig oder zentriert ausrichten oder angeben, dass die Standardausrichtung des Browsers verwendet werden soll (normalerweise linksbndig fr normale Zellen und zentriert fr die Zellen der Kopfzeile).
Vert Gibt die vertikale Ausrichtung des Inhalts einer Zelle, Zeile oder Spalte an. Sie knnen den Inhalt oben, unten, in der Mitte oder an der Grundlinie ausrichten oder angeben, dass die Standardausrichtung des Browsers verwendet werden soll (normalerweise in der Mitte). B und H Geben die Breite und Hhe der ausgewhlten Zellen in Pixel oder als Prozentsatz der gesamten Tabellenbreite
oder -hhe an. Wenn Sie Breite und Hhe als Prozentwert angeben mchten, tragen Sie hinter dem Wert ein Prozentzeichen (%) ein. Lassen Sie das Feld leer (Standardeinstellung), wenn die Spaltenbreite oder -hhe entsprechend dem Zellinhalt sowie der Breite und Hhe der anderen Spalten und Zeilen im Browser festgelegt werden soll. In der Standardeinstellung wird im Browser die Zeilenhhe und Spaltenbreite anhand des breitesten Bilds oder der lngsten Zeile einer Spalte ausgewhlt. Daher wird eine Spalte beim Hinzufgen von Inhalt manchmal wesentlich breiter als andere Spalten in der Tabelle. Hinweis: Sie knnen die Hhe als Prozentsatz der gesamten Tabellenhhe angeben, die Zeile wird dann jedoch in Browsern mglicherweise nicht mit dem festgelegten Prozentsatz angezeigt.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 195
Seitenlayouts mit HTML gestalten
Hg Die Hintergrundfarbe einer Zelle, Spalte oder Zeile, die mit der Farbauswahl ausgewhlt wurde. Zellen verbinden Fasst Zellen, Zeilen oder Spalten zu einer Zelle zusammen. Zellen knnen nur verbunden werden,
Wenn Kein Umbruch aktiviert ist, werden die Zellen so verbreitert, dass alle eingegebenen oder eingefgten Daten in einer Zeile angezeigt werden. (Normalerweise werden Zellen zunchst entsprechend dem lngsten Wort oder breitesten Bild horizontal und anschlieend entsprechend dem anderen Inhalt vertikal erweitert.)
Header Formatiert die ausgewhlten Zellen als Kopfzeilenzellen der Tabelle. Der Inhalt von Kopfzeilenzellen in Tabellen ist in der Standardeinstellung fett und zentriert formatiert.
Die Angabe von Hhe und Breite kann entweder in Pixel oder in Prozent erfolgen. Dabei kann auch zwischen diesen beiden Maeinheiten umgerechnet werden. Hinweis: Wenn Sie Eigenschaften fr eine Spalte definieren, ndert Dreamweaver fr jede Zelle der Spalte die Attribute des td-Tags. Wenn Sie jedoch fr eine Zeile bestimmte Eigenschaften festlegen, ndert Dreamweaver die Attribute des tr-Tags, statt die Attribute aller td-Tags in der Zeile zu ndern. Wenn Sie allen Zellen einer Zeile das gleiche Format zuweisen, wird durch Anwenden des Formats auf das tr-Tag gewhrleistet, dass der HTML-Code prziser und besser strukturiert ist.
3 Drcken Sie die Tabulatortaste oder die Eingabetaste (Windows) bzw. Return (Macintosh), um die Werte zu
bernehmen.
Hinweis: Nachdem Sie die gewnschten Elemente ausgewhlt oder die Einfgemarke positioniert haben, sollten Sie wieder den Standardmodus der Entwurfsansicht auswhlen, um dann die Tabelle zu bearbeiten. Bei bestimmten visuellen Arbeitsschritten, beispielsweise beim ndern der Gre, werden im erweiterten Tabellenmodus nicht die erwarteten Ergebnisse erzielt.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 196
Seitenlayouts mit HTML gestalten
Whlen Sie Ansicht > Tabellenmodus > Erweiterter Tabellenmodus aus. Klicken Sie in der Kategorie Layout des Bedienfelds Einfgen auf Erweiterter Tabellenmodus.
Im oberen Bereich des Dokumentfensters wird eine Leiste mit der Bezeichnung Erweiterter Tabellenmodus angezeigt. In Dreamweaver werden die Zellauffllung und der Zellabstand aktiviert sowie die Tabellenrnder vergrert.
Klicken Sie in der Leiste mit der Aufschrift Erweiterter Tabellenmodus am oberen Rand des Dokumentfensters
auf Beenden.
Whlen Sie Ansicht > Tabellenmodus > Standardmodus aus. Klicken Sie in der Kategorie Layout des Bedienfelds Einfgen auf Standardmodus.
Verwandte Themen
Text einfgen und formatieren auf Seite 232
unteren Ecke und nehmen Sie die gewnschten nderungen an den Eigenschaften vor.
3 ndern Sie die Eigenschaften nach Bedarf.
Um weitere Informationen zu den Optionen anzuzeigen, klicken Sie auf die Hilfeschaltflche des Eigenschafteninspektors. Hinweis: Wenn Sie Eigenschaften fr eine Spalte definieren, ndert Dreamweaver fr jede Zelle der Spalte die Attribute des td-Tags. Wenn Sie bestimmte Eigenschaften jedoch fr eine Zeile festlegen, ndert Dreamweaver die Attribute des tr-Tags, statt die Attribute aller td-Tags in der Zeile zu ndern. Wenn Sie allen Zellen einer Zeile das gleiche Format zuweisen, wird durch Anwenden des Formats auf das tr-Tag gewhrleistet, dass der HTML-Code prziser und besser strukturiert ist.
Klicken Sie unten im Dokumentfenster im Tag-Selektor auf die Tabelle und whlen Sie das <table>-Tag aus, um Tags im Code schnell ausfindig zu machen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 197
Seitenlayouts mit HTML gestalten
Setzen Sie zum Bearbeiten der Ausrichtung der Beschriftung die Einfgemarke in die Tabellenbeschriftung, klicken
Sie mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste (Macintosh) und whlen Sie dann die Option Tag-Code bearbeiten aus.
Whlen Sie zum Bearbeiten der Tabellenzusammenfassung die Tabelle aus, klicken Sie mit der rechten Maustaste
(Windows) bzw. bei gedrckter Ctrl-Taste (Macintosh) und whlen Sie dann die Option Tag-Code bearbeiten aus.
Verwandte Themen
Mit Seitencode arbeiten auf Seite 312
Um die Breite der Tabelle zu ndern, ziehen Sie den rechten Auswahlziehpunkt. Um die Hhe der Tabelle zu ndern, ziehen Sie den unteren Auswahlziehpunkt.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 198
Seitenlayouts mit HTML gestalten
Um Hhe und Breite der Tabelle zu ndern, ziehen Sie den Auswahlziehpunkt an der rechten unteren Ecke.
Die Breite der angrenzenden Spalte ndert sich ebenfalls, d. h. im Endeffekt wird die Breite von zwei Spalten gendert. Visuell wird dargestellt, wie die Spalten angepasst werden. Die Gesamtbreite der Tabelle ndert sich nicht.
Hinweis: Wenn Sie bei Tabellen mit relativen (als Prozentualwert und nicht in Pixel definierten) Breiten den rechten Rand der ganz rechts stehenden Spalte ziehen, wird die Breite der gesamten Tabelle gendert und alle Spalten werden proportional verbreitert bzw. verschmlert.
Die Breite dieser Spalte ndert sich. Visuell wird dargestellt, wie die Spalten angepasst werden. Die Gesamtbreite der Tabelle ndert sich und passt sich an die neue Spaltenbreite an.
In Dreamweaver wird die im Code angegebene Breite der sichtbaren Spaltenbreite angepasst.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 199
Seitenlayouts mit HTML gestalten
Whlen Sie Modifizieren > Tabelle > Zellbreiten lschen oder Modifizieren > Tabelle > Zellhhen
lschen aus.
Klicken Sie im Eigenschafteninspektor (Fenster > Eigenschaften) auf die Schaltflche Zeilenhhen
lschen oder Spaltenbreiten lschen .
Klicken Sie auf das Kopfzeilenmen und whlen Sie dann die Option Alle Hhen lschen oder Alle Breiten
lschen aus.
Whlen Sie Modifizieren > Tabelle > Zeile einfgen oder Modifizieren > Tabelle > Spalte einfgen aus.
Eine Zeile wird oberhalb der Einfgemarke und eine Spalte wird links neben der Einfgemarke eingefgt.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 200
Seitenlayouts mit HTML gestalten
Klicken Sie auf das Spaltenberschriftmen und whlen Sie dann Spalte links einfgen oder Spalte rechts
einfgen aus.
Klicken Sie in der zu lschenden Zeile oder Spalte in eine Zelle und whlen Sie dann Modifizieren > Tabelle >
Zeile lschen oder Modifizieren > Tabelle > Spalte lschen aus.
Whlen Sie eine vollstndige Zeile oder Spalte und anschlieend Bearbeiten > Lschen aus.
Wenn Sie Zeilen einfgen oder lschen mchten, erhhen oder verringern Sie den Wert in Zeilen. Wenn Sie Spalten einfgen oder lschen mchten, erhhen oder verringern Sie den Wert in Spalten.
Hinweis: In Dreamweaver wird keine Warnmeldung angezeigt, wenn Sie Zeilen oder Spalten lschen, die Daten enthalten.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 201
Seitenlayouts mit HTML gestalten
In der folgenden Abbildung ist ein Rechteck mit Zellen ausgewhlt. Die Zellen knnen daher verbunden werden.
In der folgenden Abbildung ist die Auswahl kein Rechteck von Zellen. Die Zellen knnen deshalb nicht verbunden werden.
Whlen Sie Modifizieren > Tabelle > Zellen verbinden aus. Klicken Sie im erweiterten HTML-Eigenschafteninspektor (Fenster > Eigenschaften) auf die Schaltflche
Zellen verbinden . Hinweis: Wenn die Schaltflche nicht angezeigt wird, klicken Sie auf den Erweiterungspfeil rechts unten im Eigenschafteninspektor, sodass alle Optionen angezeigt werden. Der Inhalt der einzelnen Zellen wird in die neue verbundene Zelle verschoben. Fr die verbundene Zelle gelten die Eigenschaften der Zelle, die zuerst ausgewhlt wurde.
Zellen teilen
1 Klicken Sie in die Zelle und fhren Sie einen der folgenden Schritte aus:
Whlen Sie Modifizieren > Tabelle > Zelle teilen aus. Klicken Sie im erweiterten HTML-Eigenschafteninspektor (Fenster > Eigenschaften) auf die Schaltflche
Zellen teilen . Hinweis: Wenn die Schaltflche nicht angezeigt wird, klicken Sie auf den Erweiterungspfeil rechts unten im Eigenschafteninspektor, sodass alle Optionen angezeigt werden.
2 Geben Sie im Dialogfeld Zelle teilen an, wie die Zelle geteilt werden soll:
Zelle teilen in Gibt an, ob die Zelle in Zeilen oder Spalten geteilt wird. Anzahl der Zeilen/Anzahl der Spalten Gibt an, in wie viele Zeilen oder Spalten die Zelle geteilt wird.
Anzahl der Zeilen oder Spalten in einer Zelle erhhen oder verringern
Fhren Sie einen der folgenden Schritte aus:
Whlen Sie Modifizieren > Tabelle > Zeilenraum vergrern oder Modifizieren > Tabelle >
Spaltenraum vergrern aus.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 202
Seitenlayouts mit HTML gestalten
Whlen Sie Modifizieren > Tabelle > Zeilenraum verkleinern oder Modifizieren > Tabelle >
Spaltenraum verkleinern aus.
In der folgenden Abbildung ist ein Rechteck mit Zellen ausgewhlt. Die Zellen knnen daher ausgeschnitten oder kopiert werden.
In der folgenden Abbildung ist die Auswahl kein Rechteck von Zellen. Die Zellen knnen deshalb nicht ausgeschnitten oder kopiert werden.
2 Whlen Sie Bearbeiten > Ausschneiden oder Bearbeiten > Kopieren aus.
Hinweis: Wenn Sie eine ganze Zeile oder Spalte und Bearbeiten > Ausschneiden ausgewhlt haben, wird die ganze Zeile oder Spalte (und nicht nur der Inhalt der Zellen) aus der Tabelle entfernt.
Tabellenzellen einfgen
1 Whlen Sie die Stelle aus, an der die Zellen eingefgt werden sollen:
Um vorhandene Zellen durch die eingefgten Zellen zu ersetzen, whlen Sie eine Gruppe vorhandener Zellen aus,
die das gleiche Layout haben wie die Zellen in der Zwischenablage. (Wenn Sie beispielsweise einen Block mit 3 x 2 Zellen kopiert haben, knnen Sie einen anderen Block mit 3 x 2 Zellen auswhlen, der durch Einfgen ersetzt wird.)
Um eine ganze Zeile mit Zellen ber einer bestimmten Zelle einzufgen, klicken Sie in die entsprechende Zelle. Um eine ganze Spalte mit Zellen links neben einer bestimmten Zelle einzufgen, klicken Sie in die entsprechende
Zelle.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 203
Seitenlayouts mit HTML gestalten
Hinweis: Wenn sich in der Zwischenablage keine ganze Tabellenzeile oder -spalte befindet und Sie in eine Zelle klicken und dann die Zellen aus der Zwischenablage einfgen, werden mglicherweise die Zelle, in die Sie geklickt haben, und deren Nachbarzellen (je nach Position der Zelle in der Tabelle) durch die eingefgten Zellen ersetzt.
Um mit den eingefgten Zellen eine neue Tabelle zu erstellen, positionieren Sie die Einfgemarke auerhalb der
Tabelle.
2 Whlen Sie Bearbeiten > Einfgen.
Wenn Sie ganze Zeilen oder Spalten in eine vorhandene Tabelle einfgen, werden diese Zeilen oder Spalten zur Tabelle hinzugefgt. Wenn Sie eine einzelne Zelle einfgen, wird der Inhalt der ausgewhlten Zelle ersetzt. Wenn Sie den Inhalt der Zwischenablage auerhalb einer Tabelle einfgen, wird mit den Zeilen, Spalten oder Zellen eine neue Tabelle definiert.
Hinweis: Vergewissern Sie sich, dass die Auswahl nicht nur aus ganzen Zeilen oder Spalten besteht.
2 Whlen Sie Bearbeiten > Lschen aus oder drcken Sie die Entf-Taste.
Hinweis: Wenn nur ganze Zeilen oder Spalten ausgewhlt sind und Sie Bearbeiten > Lschen auswhlen oder die Entf-Taste drcken, werden die gesamten Zeilen oder Spalten und nicht nur deren Inhalt gelscht.
Tabellen verschachteln
Eine verschachtelte Tabelle ist eine Tabelle in einer Zelle einer anderen Tabelle. Sie knnen eine verschachtelte Tabelle wie jede andere Tabelle formatieren. Die Breite wird jedoch durch die Breite der Zelle begrenzt, in der sich die Tabelle befindet.
1 Klicken Sie in eine Zelle der vorhandenen Tabelle. 2 Whlen Sie Einfgen > Tabelle aus, legen Sie die Optionen unter Tabelle einfgen fest und klicken Sie auf
OK.
Tabellen sortieren
Sie knnen die Zeilen einer Tabelle nach dem Inhalt einer einzelnen Spalte sortieren. Sie knnen jedoch auch komplexere Sortiervorgnge durchfhren und die Tabelle nach dem Inhalt zweier Spalten sortieren. Sie knnen keine Tabellen sortieren, die die Attribute colspan oder rowspan enthalten, d. h. Tabellen mit verbundenen Zellen.
1 Whlen Sie die Tabelle aus oder klicken Sie in eine beliebige Zelle. 2 Whlen Sie Befehle > Tabelle sortieren aus, legen Sie die Optionen im Dialogfeld fest und klicken Sie auf OK.
Sortieren nach Gibt an, nach den Werten welcher Spalte die Zeilen der Tabelle sortiert werden. Reihenfolge Legt fest, ob die Spalte alphabetisch oder numerisch und in aufsteigender (A bis Z, von der kleinsten zur
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 204
Seitenlayouts mit HTML gestalten
Wenn es sich beim Inhalt einer Spalte um Zahlen handelt, whlen Sie Numerisch aus. Wird eine alphabetische Sortierung auf eine Liste mit ein- und zweistelligen Zahlen angewendet, werden die Zahlen so sortiert, als wren sie Wrter (z. B. 3, 30, 10, 20, 2) und nicht Zahlen (z. B.1, 2, 3, 10, 20, 30).
Dann nach/Reihenfolge Legt die Reihenfolge eines zweiten Sortiervorgangs in einer anderen Spalte fest. Geben Sie die
Spalte des zweiten Sortiervorgangs im Popupmen Dann nach an und die entsprechende Reihenfolge in den einzelnen Popupmens fr Reihenfolge.
Erste Zeile beim Sortieren bercksichtigen Gibt an, dass die erste Zeile der Tabelle beim Sortieren bercksichtigt wird.
Whlen Sie diese Option nicht aus, wenn es sich bei der ersten Zeile um eine berschriftenzeile handelt, die nicht verschoben werden soll.
Kopfzeilen sortieren Legt fest, dass alle Zeilen im Abschnitt thead der Tabelle (soweit vorhanden) nach denselben Kriterien sortiert werden wie die Zeilen des Hauptteils. (Beachten Sie, dass die thead-Zeilen im Abschnitt thead verbleiben und auch nach der Sortierung am Anfang der Tabelle angezeigt werden.) Weitere Informationen zum thead-Tag finden Sie im Bedienfeld Referenz (whlen Sie dazu Hilfe > Referenz). Fuzeilen sortieren Legt fest, dass alle Zeilen im Abschnitt tfoot der Tabelle (soweit vorhanden) nach denselben
Kriterien sortiert werden wie die Zeilen des Hauptteils. (Beachten Sie, dass die tfoot-Zeilen im Abschnitt tfoot verbleiben und auch nach der Sortierung am Anfang der Tabelle angezeigt werden.) Weitere Informationen zum tfoot-Tag finden Sie im Bedienfeld Referenz (whlen Sie dazu Hilfe > Referenz).
Alle Zeilenfarben nach dem Sortieren beibehalten Gibt an, dass die Attribute der Tabellenzeilen (z. B. Zeilenfarbe) nach der Sortierung dem gleichen Inhalt zugewiesen sind. Whlen Sie diese Option nicht aus, wenn Tabellenzeilen abwechselnd in zwei Farben formatiert sind. Dadurch wird sichergestellt, dass der Farbwechsel zwischen den Zeilen in der sortierten Tabelle erhalten bleibt. Wenn die Zeilenattribute jeweils fr den Inhalt einzelner Zeilen gelten, whlen Sie diese Option aus, um sicherzustellen, dass diese Attribute in der sortierten Tabelle mit den entsprechenden Zeilen verknpft bleiben.
Frames verwenden
Funktionsweise von Frames und Framesets
Ein Frame ist ein Bereich eines Browserfensters, in dem ein HTML-Dokument unabhngig von den restlichen Fensterinhalten angezeigt werden kann. Frames bieten die Mglichkeit, ein Browserfenster in mehrere Bereiche zu unterteilen und in jedem Bereich ein anderes HTML-Dokument anzuzeigen. Am hufigsten werden Frames so verwendet, dass in einem Frame ein Dokument mit Navigationssteuerelementen angezeigt wird, whrend in einem anderen Frame ein Dokument mit Inhalten angezeigt wird. Ein Frameset ist eine HTML-Datei, die das Layout und die Eigenschaften einer Gruppe von Frames definiert, darunter die Anzahl der Frames, die Gre und Position der Frames sowie die URL der Seite, die anfnglich in den einzelnen Frames angezeigt wird. Das Frameset selbst enthlt keinen HTML-Inhalt, der im Browser zu sehen ist. Eine Ausnahme bildet lediglich der Abschnitt noframes. Die Frameset-Datei liefert dem Browser lediglich Informationen darber, wie die einzelnen Frames angezeigt werden und welche Dokumente sie enthalten sollen. Wenn Sie ein Frameset in einem Browser anzeigen mchten, geben Sie die URL der Frameset-Datei ein. Der Browser ffnet dann die relevanten Dokumente, die in den Frames angezeigt werden. Die Frameset-Datei einer Site hat hufig den Namen index.html, sodass sie automatisch angezeigt wird, wenn der Besucher keinen speziellen Dateinamen angibt.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 205
Seitenlayouts mit HTML gestalten
Im folgenden Beispiel ist ein Frame-Layout mit drei Frames dargestellt: ein schmaler Frame an der Seite mit einer Navigationsleiste, ein Frame im oberen Bereich mit dem Logo und dem Titel der Website und ein groer Frame mit dem Hauptinhalt, der die restliche Seite ausfllt. In jedem dieser Frames wird jeweils ein separates HTML-Dokument angezeigt.
In diesem Beispiel ndert sich das Dokument im oberen Frame nie, wenn der Besucher auf der Site navigiert. Die Navigationsleiste im seitlichen Frame enthlt Hyperlinks. Wenn Sie auf einen der Hyperlinks klicken, ndert sich der Inhalt im Haupt-Frame, der Inhalt des seitlichen Frames bleibt jedoch immer gleich. Im Haupt-Frame rechts wird das jeweilige Dokument angezeigt, auf dessen Hyperlink der Besucher geklickt hat. Ein Frame ist keine Datei. Das in einem Frame angezeigte Dokument wirkt wie ein fester Bestandteil des Frames. Dies ist jedoch nicht der Fall. Der Frame ist der Rahmen fr das Dokument. Hinweis: Der Begriff Seite bezieht sich entweder auf ein einzelnes HTML-Dokument oder auf den gesamten aktuellen Inhalt eines Browserfensters zu einem bestimmten Zeitpunkt, auch wenn mehrere HTML-Dokumente gleichzeitig angezeigt werden. So bezieht sich z. B. der Ausdruck eine Seite mit Frames normalerweise auf ein Frameset sowie auf die Dokumente, die anfnglich in diesen Frames angezeigt werden. Eine Site, die in einem Browser als einzelne Seite mit drei Frames angezeigt wird, besteht in Wirklichkeit aus mindestens vier HTML-Dokumenten: aus der Frameset-Datei und aus den drei Dokumenten, die den anfangs in den Frames angezeigten Inhalt enthalten. Wenn Sie in Dreamweaver eine Seite mit Framesets gestalten, mssen Sie alle vier Dateien speichern, damit die Seite im Browser richtig dargestellt wird. Weitere umfangreiche Informationen zu Frames finden Sie auf der Website von Thierry Koblentz unter www.tjkdesign.com/articles/frames/.
Eine przise grafische Ausrichtung der Elemente in verschiedenen Frames kann schwierig sein.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 206
Seitenlayouts mit HTML gestalten
Das Testen der Navigation kann zeitaufwendig sein. Die URLs der einzelnen Frameseiten werden im Browser nicht angezeigt, sodass es fr einen Besucher oft schwierig
ist, eine bestimmte Seite als Lesezeichen zu speichern (auer Sie sehen einen Servercode vor, mit dem der Besucher die Frameversion einer bestimmten Seite laden kann). Eine umfassende Abhandlung dazu, warum Frames nicht verwendet werden sollten, finden Sie in der Erluterung von Gary White unter http://apptools.com/rants/framesevil.php. Frames werden, wenn Sie sie dennoch verwenden sollten, am hufigsten zur Navigation eingesetzt. Ein Frameset besteht hufig aus einem Frame, der die Navigationsleiste enthlt, und einem anderen Frame zum Anzeigen der Seiten mit dem Hauptinhalt. Diese Verwendung von Frames bringt mehrere Vorteile mit sich:
Der Browser des Besuchers muss die Navigationsgrafiken nicht bei jeder Seite neu laden. Jeder Frame verfgt ber eine eigene Bildlaufleiste (wenn der Inhalt zu gro fr das Fenster ist), sodass der
Besucher jeweils in den einzelnen Frames einen Bildlauf durchfhren kann. Wenn sich die Navigationsleiste in einem separaten Frame befindet, muss ein Besucher, der beispielsweise in einem Frame auf einer langen Seite einen Bildlauf bis zum Ende durchfhrt, keinen Bildlauf zurck zum Anfang der Seite durchfhren, um die Navigationsleiste verwenden zu knnen. In vielen Fllen knnen Sie mit Webseiten ohne Frames die gleiche Wirkung erzielen wie mit einem Frameset. Wenn im linken Bereich einer Seite beispielsweise eine Navigationsleiste angezeigt werden soll, knnen Sie hierzu entweder Frames verwenden oder die Navigationsleiste stattdessen auf jeder Seite der Website einfgen. (Mit Dreamweaver knnen Sie mehrere Seiten mit dem gleichen Layout erstellen.) Das folgende Bild zeigt ein Seitendesign, das vom Layout her wie ein Frame aussieht, obwohl keine Frames verwendet werden.
In schlecht entworfenen Sites werden Frames unntigerweise verwendet, z. B. ein Frameset, mit dem der Inhalt von Navigations-Frames bei jedem Klicken auf eine Navigationsschaltflche neu geladen wird. Bei Sites, auf denen Frames sinnvoll eingesetzt werden (z. B. um Navigationssteuerelemente statisch in einem Frame anzuzeigen, whrend sich der Inhalt eines anderen Frames ndern kann), bietet die Verwendung von Frames durchaus Vorteile.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 207
Seitenlayouts mit HTML gestalten
Nicht alle Browser bieten eine gute Untersttzung von Frames und das Navigieren in Frames kann fr Besucher mit Behinderungen problematisch sein. Wenn Sie also Frames verwenden, stellen Sie im Frameset auch stets einen noframes-Abschnitt fr Besucher bereit, die keine Frames anzeigen knnen. Darber hinaus knnen Sie explizit einen Hyperlink zu einer Version der Site ohne Frames angeben. Weitere umfangreiche Informationen zu Frames finden Sie auf der Website von Thierry Koblentz unter www.tjkdesign.com/articles/frames/.
Verschachtelte Framesets
Ein Frameset, das sich innerhalb eines anderen Framesets befindet, wird als verschachteltes Frameset bezeichnet. Eine einzelne Frameset-Datei kann mehrere verschachtelte Framesets enthalten. Bei den meisten Webseiten mit Frames kommen verschachtelte Frames zum Einsatz und auch die meisten in Dreamweaver vordefinierten Framesets sind verschachtelt. Jede Gruppe von Frames, deren einzelne Spalten oder Zeilen aus unterschiedlich vielen Frames bestehen, basiert auf einem verschachtelten Frameset. So besteht zum Beispiel das blichste Frame-Layout aus einem Frame im oberen Bereich (in dem das Firmenlogo angezeigt wird) und zwei Frames im unteren Bereich (einem Navigations-Frame und einem Inhalts-Frame). Dieses Layout erfordert ein verschachteltes Frameset: ein zweizeiliges Frameset mit einem in der zweiten Zeile verschachtelten zweispaltigen Frameset.
In Dreamweaver werden die erforderlichen verschachtelten Framesets erstellt. Wenn Sie die Teilungsoptionen fr Frames von Dreamweaver verwenden, mssen Sie sich keine Gedanken ber die Einzelheiten der verschachtelten und nicht verschachtelten Frames machen. Es gibt zwei Mglichkeiten, Framesets in HTML zu verschachteln: Das innere Frameset kann entweder in derselben Datei definiert werden wie das externe Frameset oder in einer separaten Datei. Bei allen in Dreamweaver vordefinierten Framesets sind alle Framesets in ein und derselben Datei definiert. Beide Arten der Verschachtelung fhren optisch zum gleichen Ergebnis. Ohne den Code zu lesen, ist es schwer zu erkennen, um welche Art der Verschachtelung es sich handelt. In Dreamweaver kommt eine externe Frameset-Datei am ehesten dann zu Einsatz, wenn Sie mit dem Befehl ffnen in Frame eine Frameset-Datei innerhalb eines Frames ffnen. Dies fhrt mglicherweise zu Problemen beim Festlegen von Hyperlink-Zielen. Im Allgemeinen ist es am einfachsten, alle Framesets in einer einzigen Datei zu definieren.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 208
Seitenlayouts mit HTML gestalten
HTML-Dokument angezeigt wird und dass jedes dieser Dokumente zusammen mit der Frameset-Datei gespeichert werden muss.
3 Legen Sie die Eigenschaften fr die einzelnen Frames und das Frameset fest (z. B. den Namen fr jeden Frame oder
Verwandte Themen
Dreamweaver und Barrierefreiheit auf Seite 732
Whlen Sie Einfgen > HTML > Frames und dann ein vordefiniertes Frameset aus. Frames und whlen Sie ein vordefiniertes Frameset aus.
Klicken Sie in der Kategorie Layout des Bedienfelds Einfgen auf den Dropdownpfeil der Schaltflche
Die Frameset-Symbole ermglichen visuelle Darstellungen aller auf das aktuelle Dokument angewendeten Framesets. Der blaue Bereich eines Frameset-Symbols entspricht dabei dem aktuellen Dokument. Die weien Bereiche stehen fr Frames, in denen andere Dokumente angezeigt werden.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 209
Seitenlayouts mit HTML gestalten
2 Wenn Dreamweaver so eingerichtet ist, dass Sie bei Frames zur Eingabe von Eingabehilfen-Attributen aufgefordert
werden, whlen Sie im Popupmen einen Frame aus, geben Sie einen Namen fr den Frame ein und klicken Sie auf OK. (Bei Benutzern, die Bildschirmlesegerte verwenden, wird der Name vom Bildschirmlesegert vorgelesen, wenn dieses einen Frame auf der Seite erkennt.) Hinweis: Wenn Sie auf OK klicken, ohne einen neuen Namen einzugeben, wird dem Frame in Dreamweaver ein Name zugewiesen, der dessen Position im Frameset entspricht (z. B. linker Frame oder rechter Frame). Hinweis: Wenn Sie auf Abbrechen klicken, wird das Frameset im Dokument angezeigt, ohne dass ihm jedoch in Dreamweaver Eingabehilfen-Tags oder -Attribute zugewiesen werden. Whlen Sie Fenster > Frames aus, um ein Diagramm der zu benennenden Frames anzuzeigen.
Eingabehilfen-Attribute fr Frame-Tag angezeigt. Legen Sie in diesem Dialogfeld die Optionen fr jeden Frame fest und klicken Sie auf OK. Hinweis: Wenn Sie auf Abbrechen klicken, wird das Frameset im Dokument angezeigt, ohne dass ihm jedoch in Dreamweaver Eingabehilfen-Tags oder -Attribute zugewiesen werden.
Framesets erstellen
Whlen Sie Modifizieren > Frameset und anschlieend im Untermen eine Teilungsoption (z. B. Frame links
teilen oder Frame rechts teilen) aus. Dreamweaver teilt das Fenster in Frames. Wenn Sie ein vorhandenes Dokument geffnet haben, wird es in einem der Frames angezeigt.
Um einen Frame mit einem Frame-Rahmen zu teilen, der sich nicht am Rand der Entwurfsansicht befindet, ziehen
Sie bei gedrckter Alt-Taste (Windows) bzw. bei gedrckter Wahltaste (Macintosh) einen Frame-Rahmen.
Um einen Frame in vier Frames zu unterteilen, ziehen Sie einen Frame-Rahmen von einer Ecke der
Entwurfsansicht zur Mitte des Frames. Wenn Sie drei Frames erstellen mchten, erstellen Sie zunchst zwei Frames und teilen Sie dann einen dieser Frames. Zwei nebeneinander liegende Frames zu verbinden ist nicht einfach und erfordert eine nderung des Frameset-Codes. Daher ist es schwieriger, vier Frames zu drei Frames zu verbinden als zwei Frames in drei Frames zu ndern.
Frames lschen
Ziehen Sie einen Frame-Rahmen auf eine Stelle auerhalb der Seite oder auf den Rahmen des bergeordneten
Frames.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 210
Seitenlayouts mit HTML gestalten
Wenn der zu lschende Frame ein Dokument mit nicht gespeichertem Inhalt enthlt, werden Sie von Dreamweaver aufgefordert, das Dokument zu speichern. Hinweis: Das Lschen eines ganzen Framesets ist durch Ziehen des Rahmens nicht mglich. Wenn Sie ein Frameset lschen mchten, schlieen Sie das Dokumentfenster, in dem es angezeigt wird. Wenn die Frameset-Datei gespeichert wurde, lschen Sie diese Datei.
Im Eigenschafteninspektor knnen Sie genaue Gren angeben sowie den Bereich der Zeilen oder Spalten fr
Frames im Browser fr den Fall festlegen, dass die Frames im Browserfenster nicht vollstndig angezeigt werden knnen.
Wenn ein Frame in der Entwurfsansicht des Dokumentfensters ausgewhlt ist, wird sein Rahmen von einer gepunkteten Linie umgeben. Ist ein Frameset ausgewhlt, werden die Rahmen aller Frames innerhalb des Framesets von einer gepunkteten Linie umgeben.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 211
Seitenlayouts mit HTML gestalten
Hinweis: Durch das Platzieren der Einfgemarke in einem Dokument, das in einem Frame angezeigt wird, wird der Frame nicht ausgewhlt. Fr verschiedene Aufgaben (z. B. fr das Festlegen der Frame-Eigenschaften) mssen Sie jedoch den jeweiligen Frame erst auswhlen.
Wenn Sie einen Frame auswhlen mchten, klicken Sie auf den entsprechenden Frame. (Um den Frame wird im
Bedienfeld Frames und in der Entwurfsansicht des Dokumentfensters ein Auswahlrahmen angezeigt.)
Wenn Sie ein Frameset auswhlen mchten, klicken Sie auf den Rahmen des Framesets.
Klicken Sie in der Entwurfsansicht auf eine der inneren Frame-Rahmenlinien des Framesets, um dieses
auszuwhlen. (Hierzu mssen die Frame-Rahmen angezeigt werden. Whlen Sie gegebenenfalls Ansicht > Visuelle Hilfsmittel > Frame-Rahmen aus, um sie einzublenden.) Hinweis: Im Allgemeinen kann ein Frameset im Bedienfeld Frames leichter ausgewhlt werden als im Dokumentfenster. Weitere Informationen finden Sie in den oben stehenden Themen.
Um ein bergeordnetes Frameset auszuwhlen (das Frameset, das die aktuelle Auswahl enthlt), drcken Sie
Alt+Pfeil-nach-oben (Windows) bzw. Befehl+Pfeil-nach-oben (Macintosh).
Zum Auswhlen des ersten untergeordneten Frames oder Framesets im aktuellen Frameset (d. h. in der
Reihenfolge ihrer Definition in der Frameset-Datei) drcken Sie Alt+Pfeil-nach-unten (Windows) bzw. Befehl+Pfeil-nach-unten (Macintosh).
Whlen (Macintosh).
4 (Optional) Um dieses Dokument als Standarddokument festzulegen, das beim ffnen des Framesets im Browser
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 212
Seitenlayouts mit HTML gestalten
Frameset-Dateien speichern
Whlen Sie das Frameset im Bedienfeld Frames oder im Dokumentfenster aus.
Um die Frameset-Datei zu speichern, whlen Sie Datei > Frameset speichern aus. Um die Frameset-Datei als neue Datei zu speichern, whlen Sie Datei > Frameset speichern unter aus.
Hinweis: Wenn die Frameset-Datei noch nicht gespeichert wurde, sind diese beiden Befehle identisch.
Hierdurch werden alle im Frameset geffneten Dokumente gespeichert, darunter auch die Frameset-Datei und alle Frame-Dokumente. Wenn die Frameset-Datei noch nicht gespeichert wurde, wird in der Entwurfsansicht um das Frameset (oder den nicht gespeicherten Frame) ein breiter Rahmen angezeigt. Sie knnen dann einen Dateinamen auswhlen. Hinweis: Wenn Sie ein Dokument mit dem Befehl Datei > ffnen in Frame in einem Frame geffnet haben und dann das Frameset speichern, wird das geffnete Dokument zum Standarddokument, das in diesem Frame angezeigt wird. Wenn Sie nicht mchten, dass dieses Dokument als Standarddokument behandelt wird, verzichten Sie auf das Speichern der Frameset-Datei.
Verwandte Themen
Dreamweaver und Barrierefreiheit auf Seite 732
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 213
Seitenlayouts mit HTML gestalten
Klicken Sie bei gedrckter Alt-Taste (Windows) bzw. bei gedrckter Umschalt- und Wahltaste (Macintosh) in der
Entwurfsansicht des Dokumentfensters auf einen Frame.
Klicken Sie im Bedienfeld Frames (Fenster > Frames) auf einen Frame.
2 Klicken Sie im Eigenschafteninspektor (Fenster > Eigenschaften) auf den Erweiterungspfeil in der rechten
Frame verwiesen wird. Ein Frame-Name muss ein einzelnes Wort sein. Unterstriche (_) sind zulssig, Bindestriche (), Punkte (.) und Leerzeichen drfen dagegen nicht verwendet werden. Frame-Namen mssen mit einem Buchstaben (nicht mit einer Zahl) beginnen. Bei Frame-Namen wird zwischen Gro- und Kleinschreibung unterschieden. Verwenden Sie als Frame-Namen keine Begriffe, die fr JavaScript reserviert sind (z. B. top oder navigator). Damit ein Hyperlink den Inhalt eines anderen Frames ndert, mssen Sie zunchst dem Ziel-Frame einen Namen zuweisen. Um spter leichter Frame-bergreifende Hyperlinks erstellen zu knnen, sollten Sie alle Frames gleich bei der Erstellung benennen.
Quelle Gibt das Quelldokument an, das im Frame angezeigt werden soll. Klicken Sie auf das Symbol des gewnschten
Wert fr das entsprechende Attribut festgelegt, sodass in jedem Browser jeweils der entsprechende Standardwert verwendet werden kann. Bei den meisten Browsern ist die Standardeinstellung Automatisch, d. h., Rollbalken werden nur angezeigt, wenn in einem Browserfenster nicht genug Platz ist, um den gesamten Inhalt des aktuellen Frames anzuzeigen.
Keine Grennderung Verhindert, dass Site-Besucher die Gre eines Frames durch Ziehen der Rahmenlinien im
Browser ndern knnen. Hinweis: In Dreamweaver knnen Sie die Gre des Frames weiterhin ndern. Die Option bezieht sich nur auf die Darstellung der Frames im Browser.
Rahmen Legt fest, ob ein Frame im Browser mit oder ohne Rahmen angezeigt wird. Die fr den Frame gewhlte
Rahmenoption setzt die Rahmeneinstellungen des Framesets auer Kraft. Folgende Rahmenoptionen stehen zur Verfgung: Ja (Rahmen einblenden), Nein (Rahmen ausblenden) und Standard. In den meisten Browsern werden Rahmen in der Standardeinstellung angezeigt, sofern fr das bergeordnete Frameset nicht Nein ausgewhlt wurde. Ein Rahmen wird nur ausgeblendet, wenn fr alle an den Rahmen angrenzenden Frames unter Rahmen die Option Nein ausgewhlt ist oder wenn fr die Eigenschaft Rahmen des bergeordneten Framesets die Option Nein und fr alle an den Rahmen angrenzenden Frames die Option Standard festgelegt ist.
Rahmenfarbe Legt die Farbe fr alle Rahmenlinien des Frames fest. Diese Farbe gilt fr alle Rahmenlinien, die an den
Inhalt) in Pixel fest. Hinweis: Das Festlegen der Randbreite und -hhe eines Rahmens entspricht nicht dem Festlegen der Rnder unter Modifizieren > Seiteneigenschaften.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 214
Seitenlayouts mit HTML gestalten
Die Hintergrundfarbe eines Frames knnen Sie ndern, indem Sie die Hintergrundfarbe des Dokuments im Frame in den Seiteneigenschaften festlegen.
Entwurfsansicht aus.
2 Whlen Sie im Bedienfeld Frames (Fenster > Frames) einen Frame aus, indem Sie die Einfgemarke in den
entsprechenden Frame setzen. In Dreamweaver wird das Tag des Frames im Code markiert.
3 Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste (Macintosh) in den Code und
Klicken Sie in der Entwurfsansicht des Dokumentfensters auf eine Rahmenlinie zwischen zwei Frames des
Framesets.
Klicken Sie im Bedienfeld Frames (Fenster > Frames) auf den Rahmen eines Framesets.
2 Geben Sie in der Dokumentsymbolleiste im Feld Titel einen Namen fr das Frameset-Dokument ein.
Der Titel eines Framesets wird bei einem Browser in dessen Titelleiste angezeigt.
Klicken Sie in der Entwurfsansicht des Dokumentfensters auf eine Rahmenlinie zwischen zwei Frames des
Framesets.
Klicken Sie im Bedienfeld Frames (Fenster > Frames) auf den Rahmen eines Framesets.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 215
Seitenlayouts mit HTML gestalten
2 Klicken Sie im Eigenschafteninspektor (Fenster > Eigenschaften) auf den Erweiterungspfeil in der rechten
aus, damit der Rahmen angezeigt wird, oder Nein, damit kein Rahmen angezeigt wird. Bei der Auswahl von Standard wird im Browser festgelegt, wie der Rahmen angezeigt wird.
Randbreite Gibt die Breite aller Rahmen im Frameset an. Rahmenfarbe Legt eine Farbe fr den Rahmen fest. Whlen Sie mit dem Farbwhler eine Farbe aus oder geben Sie den
links neben oder ber der Zeilen/Spalten-Auswahl auf die gewnschte Registerkarte. Geben Sie dann im Textfeld Wert einen Wert fr die Hhe oder Breite ein.
3 Wenn Sie den Bereich angeben mchten, der den einzelnen Frames im Browser zugewiesen wird, whlen Sie die
Hinweis: Wenn alle Breiten in Pixel angegeben sind, werden die Frames in Browsern, die breiter oder schmaler als das Frameset sind, proportional gedehnt oder gestaucht, sodass sie trotzdem den gesamten Platz einnehmen. Dasselbe gilt auch fr Hhen, die in Pixel angegeben sind. Daher ist es im Allgemeinen ratsam, mindestens eine Breite bzw. Hhe als relativen Wert anzugeben.
Prozent Gibt an, dass die Breite oder Hhe der ausgewhlten Spalte oder Zeile einem bestimmten Prozentsatz der
Breite oder Hhe des Framesets entspricht. Diesen Frames wird erst nach den in Pixel definierten Frames ein Bereich zugewiesen, jedoch vor Frames, fr die eine relative Gre angegeben wurde.
Relativ Legt fest, dass die ausgewhlte Spalte oder Zeile den gesamten restlichen Bereich einnehmen soll, nachdem
den Frames mit Pixel- und Prozentangabe der entsprechende Bereich zugewiesen wurde. Dieser restliche Bereich wird unter allen Frames mit relativer Gre proportional aufgeteilt. Hinweis: Wenn Sie im Men Einheiten die Option Relativ auswhlen, werden alle Angaben gelscht, die Sie im Feld Wert eingegeben haben. Wenn Sie eine Zahl angeben mchten, mssen Sie sie erneut eingeben. Wenn jedoch nur eine Zeile oder Spalte auf Relativ gesetzt ist, muss kein Zahlenwert eingegeben werden, da dieser Zeile oder Spalte nach den anderen Zeilen und Spalten der gesamte restliche Bereich zugewiesen wird. Um sicherzustellen, dass diese Einstellung browserbergreifend gilt, knnen Sie im Feld Wert die Zahl 1 eingeben. Dieser Wert entspricht der Eingabe keines Werts.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 216
Seitenlayouts mit HTML gestalten
Schritte aus:
Klicken Sie auf das Ordnersymbol und whlen Sie die Datei aus, fr die ein Hyperlink erstellt werden soll. Ziehen Sie das Dateizeigersymbol in das Bedienfeld Dateien und whlen Sie die zu verknpfende Datei aus.
3 Whlen Sie im Eigenschafteninspektor im Men Ziel den Frame oder das Fenster aus, in dem das verknpfte
_blank ffnet das verknpfte Dokument in einem neuen Browserfenster. Das aktuelle Fenster bleibt unverndert. _parent ffnet das verknpfte Dokument im bergeordneten Frameset des Frames, der den Hyperlink enthlt, sodass es das gesamte Frameset ersetzt. _self ffnet das verknpfte Dokument im aktuellen Frame. Dabei wird der derzeitige Inhalt des Frames ersetzt. _top ffnet das verknpfte Dokument im aktuellen Browserfenster. Dabei werden alle Frames ersetzt.
Darber hinaus werden in diesem Men Frame-Namen angezeigt. Whlen Sie einen benannten Frame aus, um das verknpfte Dokument in diesem Frame zu ffnen. Hinweis: Frame-Namen werden nur angezeigt, wenn Sie ein Dokument innerhalb eines Framesets bearbeiten. Wenn Sie ein Dokument im zugehrigen Dokumentfenster bearbeiten, werden im Popupmen Ziel jedoch keine Frame-Namen angezeigt. Wenn Sie ein Dokument auerhalb des Framesets bearbeiten, knnen Sie im Textfeld Ziel den Namen des Ziel-Frames eingeben. Wenn Sie einen Hyperlink zu einer Seite auerhalb Ihrer Site bereitstellen, verwenden Sie stets target="_top" oder
target="_blank", um sicherzustellen, dass die Seite nicht als Teil Ihrer Site angezeigt wird.
In Dreamweaver wird der Inhalt der Entwurfsansicht gelscht. Oben in der Entwurfsansicht wird NoFrames-Inhalt angezeigt.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 217
Seitenlayouts mit HTML gestalten
Geben Sie im Dokumentfenster wie bei anderen Dokumenten Inhalte ein oder fgen Sie diese ein. Whlen Sie Fenster > Codeinspektor aus, setzen Sie die Einfgemarke zwischen die body-Tags, die innerhalb
des noframes-Tags angezeigt werden, und geben Sie dann den HTML-Code fr den gewnschten Inhalt ein.
3 Whlen Sie erneut Modifizieren > Frameset > NoFrames-Inhalt bearbeiten aus, um wieder zur normalen
diesen Inhalten kann es sich um beliebigen gltigen HTML-Code handeln. Mit dieser Aktion knnen Informationen in einem Frame dynamisch angezeigt werden.
Gehe zu URL ffnet eine neue Seite im aktuellen Fenster oder im angegebenen Frame. Mit dieser Aktion kann der
Inhalt von mindestens zwei Frames mit einem Mausklick gendert werden.
Sprungmen einfgen Legt eine Menliste mit Hyperlinks fest, ber die Dateien in einem Browserfenster geffnet werden. Sie knnen zudem ein bestimmtes Fenster oder einen bestimmten Frame als Ziel angeben. Das Dokument wird dann in diesem Fenster oder Frame geffnet.
Weitere Informationen finden Sie unter JavaScript-Verhalten hinzufgen auf Seite 369.
Verwandte Themen
Verhalten Text vom Frame einstellen definieren auf Seite 379 Verhalten Gehe zu URL definieren auf Seite 376 Verhalten Navigationsleistenbild festlegen definieren auf Seite 379 Verhalten Sprungmen definieren auf Seite 377
ENTWURF
Letzte Aktualisierung 19.3.2010
218
Verwandte Themen
berblick ber das Bedienfeld Einfgen auf Seite 15 Tags mit Tag-Editoren bearbeiten auf Seite 334 Elemente im Dokumentfenster auswhlen und anzeigen auf Seite 226
Hinweis: Wenn Sie bestimmte Dateitypen wie XML, JavaScript, Java und CSS verwenden, sind das Bedienfeld Einfgen und die Option Entwurfsansicht abgeblendet, da Sie in diese Codedateien keine Elemente einfgen knnen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 219
Inhalt in Seiten einfgen
Objekte einfgen
1 Whlen Sie im Bedienfeld Einfgen im Popupmen Kategorie die entsprechende Kategorie aus. 2 Fhren Sie einen der folgenden Schritte aus:
Klicken Sie auf eine Objektschaltflche oder ziehen Sie das Symbol der Schaltflche ins Dokumentfenster. Klicken Sie auf die Pfeilschaltflche und whlen Sie dann im Men eine Option aus.
Je nach Objekt wird ein Dialogfeld zum Einfgen des Objekts angezeigt, in dem Sie aufgefordert werden, zu einer Datei zu wechseln oder Parameter fr ein Objekt anzugeben. Oder Dreamweaver fgt Code in das Dokument ein oder ffnet einen Tag-Editor bzw. ein Bedienfeld, in dem Sie Informationen angeben knnen, bevor der Code eingefgt wird. Bei einigen Objekten wird beim Einfgen in der Entwurfsansicht kein Dialogfeld eingeblendet, beim Einfgen in der Codeansicht wird jedoch ein Tag-Editor angezeigt. Bei einigen wenigen Objekten fhrt das Einfgen in der Entwurfsansicht dazu, dass Dreamweaver vor dem Einfgen in die Codeansicht wechselt. Hinweis: Manche Objekte, z. B. benannte Anker, sind unsichtbar, wenn die Seite in einem Browserfenster angezeigt wird. Sie knnen in der Entwurfsansicht Symbole als Markierung fr die Position solcher unsichtbaren Objekte anzeigen.
Dialogfeld zum Einfgen von Objekten berspringen und leeres Platzhalterobjekt einfgen
Klicken Sie bei gedrckter Strg-Taste (Windows) bzw. Wahltaste (Macintosh) auf die Schaltflche fr das Objekt.
Wenn Sie beispielsweise einen Platzhalter fr ein Bild einfgen mchten, ohne eine Bilddatei anzugeben, klicken Sie bei gedrckter Strg-Taste bzw. Wahltaste auf die Schaltflche Bild. Hinweis: Mit diesem Verfahren knnen nicht alle Dialogfelder zum Einfgen von Objekten bergangen werden. Fr viele Objekte, darunter AP-Elemente und Framesets, knnen keine Platzhalter oder Objekte mit Standardwerten eingefgt werden.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 220
Inhalt in Seiten einfgen
(Macintosh) aus.
2 Deaktivieren Sie im Dialogfeld Voreinstellungen in der Kategorie Allgemein die Option Beim Einfgen von
Objekten Dialogfeld anzeigen, wenn beim Einfgen von Objekten wie z. B. Bilder, Tabellen, Skripts und HeadElemente keine Dialogfelder angezeigt werden sollen, oder halten Sie whrend der Erstellung des Objekts die StrgTaste (Windows) bzw. die Wahltaste (Macintosh) gedrckt. Wenn Sie ein Objekt einfgen, whrend diese Option deaktiviert ist, erhlt das Objekt die Standardattributwerte. Sie knnen die Eigenschaften des Objekts nach dem Einfgen mit dem Eigenschafteninspektor ndern.
Objekte in der Kategorie Favoriten des Bedienfelds Einfgen hinzufgen, lschen oder verwalten
1 Whlen Sie im Bedienfeld Einfgen eine beliebige Kategorie aus. 2 Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste (Macintosh) in den Bereich, in
dem die Schaltflchen angezeigt werden, und whlen Sie dann Favoriten anpassen aus.
3 Nehmen Sie im Dialogfeld Favoriten anpassen die gewnschten nderungen vor und klicken Sie auf OK.
Wenn Sie ein Objekt hinzufgen mchten, whlen Sie im Bedienfeld Verfgbare Objekte auf der linken Seite ein
Objekt aus und klicken Sie dann auf den Pfeil zwischen den beiden Bedienfeldern oder doppelklicken Sie im Bedienfeld Verfgbare Objekte auf das Objekt. Hinweis: Objekte knnen einzeln hinzugefgt werden. Es ist nicht mglich, einen Kategorienamen wie z. B. Allgemein auszuwhlen und der Favoritenliste eine gesamte Kategorie hinzuzufgen.
Wenn Sie ein Objekt oder ein Trennzeichen lschen mchten, whlen Sie auf der rechten Seite im Feld
Objektfavoriten ein Objekt aus und klicken Sie dann oberhalb des Bedienfelds auf die Schaltflche Ausgewhltes Objekt aus der Liste der Objektfavoriten entfernen.
Wenn Sie ein Objekt verschieben mchten, whlen Sie auf der rechten Seite im Feld Objektfavoriten ein Objekt
aus und klicken Sie dann oberhalb des Felds auf den Aufwrts- bzw. Abwrtspfeil.
Wenn Sie unterhalb eines Objekts eine Trennlinie hinzufgen mchten, whlen Sie auf der rechten Seite im Feld
Objektfavoriten ein Objekt aus und klicken Sie dann unterhalb des Bedienfelds auf die Schaltflche Trennlinie hinzufgen.
4 Wenn die Kategorie Favoriten des Bedienfelds Einfgen nicht bereits eingeblendet ist, whlen Sie diese
dann auf die Schaltflche fr ein hinzugefgtes Objekt vom Typ Favoriten.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 221
Inhalt in Seiten einfgen
Dokumentfensters.
2 Wenn Sie eine horizontale blaue Linie oben im Dokumentfenster sehen, knnen Sie das Bedienfeld Einfgen an
der entsprechenden Position ablegen. Hinweis: Die horizontale Einfgeleiste ist zudem standardmiger Bestandteil des Arbeitsbereichs Klassisch. Wenn Sie zum Arbeitsbereich Klassisch wechseln mchten, whlen Sie im Arbeitsbereichumschalter der Anwendungsleiste die Option Klassisch aus.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 222
Inhalt in Seiten einfgen
horizontalen Einfgeleiste und whlen Sie dann Als Men anzeigen aus.
Seiteneigenschaften festlegen
Fr jede Seite, die Sie in Dreamweaver erstellen, knnen Sie im Dialogfeld Seiteneigenschaften (Modifizieren > Seiteneigenschaften) Layout- und Formatierungseigenschaften definieren. Im Dialogfeld Seiteneigenschaften knnen Sie die Standardeinstellungen fr die Schriftfamilie, Schriftgre, Hintergrundfarbe, Rnder, Hyperlinkstile und viele andere das Seitendesign betreffende Aspekte festlegen. Sie knnen jeder von Ihnen erstellten Seite neue Seiteneigenschaften zuweisen und die Eigenschaften bereits bestehender Seiten modifizieren. Die im Dialogfeld Seiteneigenschaften vorgenommenen nderungen gelten fr die gesamte Seite. In Dreamweaver werden CSS-Regeln fr alle Eigenschaften definiert, die in den Kategorien Erscheinungsbild (CSS), Hyperlinks (CSS) und berschriften (CSS) des Dialogfelds Seiteneigenschaften angegeben sind. Die Regeln sind im head-Bereich der Seite eingebettet. Sie knnen weiterhin Seiteneigenschaften mit HTML-Code festlegen, mssen dazu jedoch im Dialogfeld Seiteneigenschaften die Kategorie Erscheinungsbild (HTML) auswhlen. (In den Dialogfeldern Titel/Kodierung und Tracing-Bild werden die Seiteneigenschaften auch mit HTML-Code festgelegt.) Hinweis: Die ausgewhlten Seiteneigenschaften werden nur auf das aktuelle Dokument angewendet. Wenn fr eine Seite ein externes CSS-Stylesheet verwendet wird, berschreibt Dreamweaver die im Stylesheet festgelegten Tags nicht, da dies Auswirkungen auf alle Seiten haben wrde, denen dieses Stylesheet zugewiesen ist.
1 Whlen Sie Modifizieren > Seiteneigenschaften oder klicken Sie im Eigenschafteninspektor fr Text auf die
Schaltflche Seiteneigenschaften.
2 Bearbeiten Sie die Seiteneigenschaften und klicken Sie auf OK.
Verwandte Themen
CSS-Eigenschaften festlegen auf Seite 142 HTML-Formatierung verwenden auf Seite 245 XHTML-Code auf Seite 313
Schaltflche Seiteneigenschaften.
2 Klicken Sie auf die Kategorie Erscheinungsbild (CSS) und legen Sie die Optionen fest.
Seitenschrift Gibt die auf den Webseiten zu verwendende Standardschriftfamilie an. Dreamweaver verwendet die von
Ihnen definierte Schriftfamilie, es sei denn, fr ein Textelement wurde ausdrcklich eine andere Schrift gewhlt.
Gre Gibt die auf den Webseiten zu verwendende Standardschriftgre an. Dreamweaver verwendet die von Ihnen
definierte Schriftgre, es sei denn, fr ein Textelement wurde ausdrcklich eine andere Schriftgre gewhlt.
Textfarbe Definiert die Standardfarbe der Schrift. Hintergrundfarbe Legt eine Hintergrundfarbe fr die Seite fest. Klicken Sie auf das Farbfeld neben
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 223
Inhalt in Seiten einfgen
Hintergrundbild Legt ein Hintergrundbild fest. Klicken Sie auf die Schaltflche Durchsuchen und whlen Sie das gewnschte Bild aus. Alternativ dazu knnen Sie den Pfad zu dem Hintergrundbild im Feld Hintergrundbild eingeben.
Genau wie ein Browser ordnet Dreamweaver mehrere Exemplare des Hintergrundbilds neben- und untereinander an, wenn dieses nicht das ganze Fenster fllt. (Bei Bedarf knnen Sie diese Bildwiederholung mithilfe von CSS unterbinden.)
Wiederholen Gibt an, wie das Hintergrundbild auf der Seite angezeigt wird:
Whlen Sie nicht wiederholen aus, um das Hintergrundbild nur einmal anzuzeigen. Whlen Sie wiederholen aus, um das Bild horizontal und vertikal zu wiederholen. Whlen Sie wiederholen-x aus, um das Bild horizontal zu wiederholen. Whlen Sie wiederholen-y aus, um das Bild vertikal zu wiederholen.
Linker Rand und Rechter Rand Definieren die Gre des linken und des rechten Seitenrands. Oberer Rand und Unterer Rand Definieren die Gre der oberen und des unteren Seitenrands.
HTML-Seiteneigenschaften festlegen
Wenn Sie Eigenschaften in dieser Kategorie des Dialogfelds Seiteneigenschaften festlegen, wird die Seite mit HTMLCode und nicht mit CSS-Code formatiert.
1 Whlen Sie Modifizieren > Seiteneigenschaften aus oder klicken Sie im Eigenschafteninspektor fr Text auf die
Schaltflche Seiteneigenschaften.
2 Klicken Sie auf die Kategorie Erscheinungsbild (HTML) und legen Sie die Optionen fest.
Hintergrundbild Legt ein Hintergrundbild fest. Klicken Sie auf die Schaltflche Durchsuchen und whlen Sie das gewnschte Bild aus. Alternativ dazu knnen Sie den Pfad zu dem Hintergrundbild im Feld Hintergrundbild eingeben.
Genau wie ein Browser ordnet Dreamweaver mehrere Exemplare des Hintergrundbilds neben- und untereinander an, wenn dieses nicht das ganze Fenster fllt. (Bei Bedarf knnen Sie diese Bildwiederholung mithilfe von CSS unterbinden.)
Hintergrund Legt eine Hintergrundfarbe fr die Seite fest. Klicken Sie auf das Farbfeld neben Hintergrundfarbe und
Schaltflche Seiteneigenschaften.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 224
Inhalt in Seiten einfgen
2 Klicken Sie auf die Kategorie Hyperlinks (CSS) und legen Sie die Optionen fest.
Schriftart fr Hyperlinks Definiert die standardmige Schriftfamilie fr Hyperlinktext. Wenn Sie keine andere
Schrift festgelegt haben, verwendet Dreamweaver standardmig die fr die gesamte Seite definierte Schriftfamilie.
Gre Definiert die standardmige Schriftgre fr Hyperlinktext. Farbe fr Hyperlinks Gibt die Farbe an, die Hyperlinktext zugewiesen werden soll. Besuchte Links Gibt die Farbe an, die besuchten Hyperlinks zugewiesen werden soll. Rollover-Hyperlinks Gibt an, welche Farbe ein Hyperlink annimmt, wenn der Mauszeiger darauf positioniert ist. Aktive Hyperlinks Gibt an, welche Farbe ein Hyperlink annimmt, wenn ein Benutzer darauf klickt. Unterstreichungsstil Definiert den Unterstreichungsstil fr Hyperlinks. Wenn fr Ihre Seite bereits ein Unterstreichungsstil fr Hyperlinks definiert ist (z. B. ber ein externes CSS-Stylesheet), dann wird das Men Unterstreichungsstil standardmig als nicht zu ndernde Option angezeigt. Diese Option macht Sie auf einen definierten Hyperlinkstil aufmerksam. Wenn Sie den Unterstreichungsstil fr Hyperlinks im Dialogfeld Seiteneigenschaften modifizieren, ndert Dreamweaver die vorherige Hyperlinkdefinition.
Schaltflche Seiteneigenschaften.
2 Klicken Sie auf die Kategorie berschriften (CSS) und legen Sie die Optionen fest.
Schrift fr berschriften Gibt die standardmige Schriftfamilie fr berschriften an. Dreamweaver verwendet die von Ihnen definierte Schriftfamilie, es sei denn, fr ein Textelement wurde ausdrcklich eine andere Schrift gewhlt. berschrift 1 bis berschrift 6 Definieren die Schriftgre und die Schriftfarbe fr bis zu sechs Ebenen von
berschriften-Tags.
Schaltflche Seiteneigenschaften.
2 Klicken Sie auf die Kategorie Titel/Kodierung und stellen Sie die Optionen ein.
Titel Legt den Titel der Seite fest, der in der Titelleiste des Dokumentfensters und der meisten Browserfenster
angezeigt wird.
Document Type (DTD) Gibt eine Dokumenttypdefinition an. Sie knnen beispielsweise ein HTML-Dokument XHTML-kompatibel machen, indem Sie XHTML 1.0 Transitional oder XHTML 1.0 Strict im Popupmen auswhlen. Kodierung Bestimmt den Zeichensatz, der in einem Dokument verwendet werden soll.
Wenn Sie Unicode (UTF-8) als Dokumentkodierung auswhlen, sind keine Entittskodierungen mehr erforderlich, da mit UTF-8 alle Zeichen dargestellt werden knnen. Wenn Sie eine andere Dokumentkodierung auswhlen, ist zur
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 225
Inhalt in Seiten einfgen
Darstellung bestimmter Zeichen mglicherweise eine Entittsreferenz erforderlich. Weitere Informationen zu Zeichenentitten finden Sie unter www.w3.org/TR/REC-html40/sgml/entities.html.
Neu laden Konvertiert das vorhandene Dokument oder ffnet es in der neuen Kodierung erneut. Unicode-Normalisierungsformular Nur aktiviert, wenn Sie unter Kodierung die Option Unicode (UTF-8)
auswhlen. Es gibt vier Unicode-Normalisierungsformulare. Die wichtigste ist dabei die Normalisierungsform C, denn sie ist die im Zeichenmodell fr das World Wide Web am hufigsten verwendete Form. Adobe bietet aus Grnden der Vollstndigkeit darber hinaus drei weitere Unicode-Normalisierungsformulare. In Unicode gibt es einige Zeichen, die sich zwar visuell hneln, im Dokument aber auf unterschiedliche Art und Weise gespeichert werden knnen. So kann beispielsweise das Zeichen durch ein Einzelzeichen (e-Umlaut) oder durch zwei Zeichen (regulres lateinisches Zeichen e + Kombinierungsumlaut) dargestellt werden. Ein UnicodeKombinierungszeichen ist ein Zeichen, das zusammen mit dem davor stehenden Zeichen verwendet wird, damit beispielsweise der Umlaut ber dem lateinischen e angezeigt wird. Beide Formen fhren zum gleichen visuellen Ergebnis, aber die in der Datei gespeicherten Informationen sind unterschiedlich. Die Normalisierung gewhrleistet, dass alle Zeichen, die in unterschiedlichen Formen gespeichert werden knnen, in derselben Form gespeichert werden. Dies bedeutet, dass alle -Zeichen in einem Dokument entweder als Einzelzeichen (e mit Umlaut) oder als zwei Zeichen (e + Kombinierungsumlaut) in einem Dokument gespeichert werden, aber nicht in beiden Formen. Weitere Informationen zur Unicode-Normalisierung und den spezifischen verwendbaren Formen finden Sie auf der Unicode-Website unter www.unicode.org/reports/tr15.
Unicode-Signatur (BOM) einschlieen Schliet eine Byte Order Mark (BOM) in das Dokument ein. Eine BOM sind 2 bis 4 Bytes am Anfang einer Textdatei, die eine Datei als Unicode und somit die Byte-Folge der nachfolgenden Byte identifizieren. Da UTF-8 keine Byte-Reihenfolge besitzt, ist fr diese Kodierungsform das Hinzufgen einer UTF-8BOM optional. Bei UTF-16 und UTF-32 jedoch ist eine BOM obligatorisch.
Schaltflche Seiteneigenschaften.
2 Klicken Sie auf die Kategorie Tracing-Bild und stellen Sie die Optionen ein.
Strukturbild Gibt ein Bild an, das als Hilfsmittel zum Kopieren eines Designs verwendet werden soll. Dieses Bild dient nur zur Referenz und ist nicht zu sehen, wenn das Dokument im Browser angezeigt wird. Transparenz Bestimmt die Deckkraft des Tracing-Bildes, die von vollkommen transparent bis vollkommen deckend
reichen kann.
Dokumentkodierung
Die Dokumentkodierung bestimmt den Zeichensatz, der in einem Dokument verwendet werden soll. Die Dokumentkodierung wird in einem meta-Tag im head-Abschnitt der Datei angegeben. Dadurch erkennen der Browser und Dreamweaver, wie das Dokument dekodiert werden soll und welche Schriften fr die Anzeige des dekodierten Textes zu verwenden sind. Wenn Sie beispielsweise Westeuropisch auswhlen, wird folgendes meta-Tag eingefgt:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 226
Inhalt in Seiten einfgen
Dreamweaver zeigt das Dokument mit den Schriften an, die Sie unter Schrifteinstellungen fr die Kodierung Westeuropisch ausgewhlt haben. Ein Browser zeigt das Dokument mit den Schriften an, die der jeweilige Benutzer fr die Kodierung Westeuropisch eingestellt hat. Wenn Sie Japanisch (Shift JIS) auswhlen, wird folgendes meta-Tag eingefgt:
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">.
Dreamweaver zeigt das Dokument mit den Schriften an, die Sie fr die Kodierung Japanisch ausgewhlt haben. Ein Browser zeigt das Dokument mit den Schriften an, die der jeweilige Benutzer fr die Kodierung Japanisch eingestellt hat. Sie haben die Mglichkeit, eine andere Dokumentkodierung fr eine Seite zu whlen. Auerdem knnen Sie die Standardkodierung ndern, die Dreamweaver zum Erstellen neuer Dokumente verwendet, einschlielich der Schriften, die zur Anzeige der einzelnen Kodierungen eingesetzt werden.
Verwandte Themen
Standard-Dokumenttyp und Standardkodierung festlegen auf Seite 70
Verwandte Themen
Code anzeigen auf Seite 317 Bedienfeld Einfgen verwenden auf Seite 218
Elemente auswhlen
Zum Auswhlen eines sichtbaren Elements im Dokumentfenster klicken Sie auf das Element oder ziehen den
Mauszeiger ber das Element.
Zum Auswhlen eines unsichtbaren Elements whlen Sie Ansicht > Visuelle Hilfsmittel > Unsichtbare
Elemente (sofern diese Menoption noch nicht aktiviert ist) und klicken dann auf die Markierung des Elements im Dokumentfenster.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 227
Inhalt in Seiten einfgen
Einige Objekte erscheinen auf der Seite nicht an der Stelle, an der sich der zugehrige Code befindet. Beispielsweise kann sich ein absolut positioniertes Element (AP-Element) in der Entwurfsansicht berall auf der Seite befinden, aber der Code, der das AP-Element definiert, steht in der Codeansicht an einer bestimmten Stelle. Wenn unsichtbare Elemente eingeblendet sind, zeigt Dreamweaver im Dokumentfenster Markierungen an, aus denen hervorgeht, wo der Code dieser Elemente zu finden ist. Durch das Auswhlen einer Markierung whlen Sie das gesamte Element aus. Wenn Sie also beispielsweise die Markierung eines AP-Elements auswhlen, wird das ganze AP-Element ausgewhlt.
Um ein komplettes Tag (einschlielich seines Inhalts) auszuwhlen, klicken Sie im Tag-Selektor links unten im
Dokumentfenster auf das gewnschte Tag. (Der Tag-Selektor wird in der Entwurfsansicht und in der Codeansicht eingeblendet.) Er zeigt immer die Tags an, die dem gegenwrtig ausgewhlten Bereich bzw. der Position der Einfgemarke entsprechen. Das Tag ganz links ist das uerste Tag, das die aktuelle Auswahl oder die Einfgemarke enthlt. Das nchste Tag ist in diesem uersten Tag enthalten usw. Das Tag ganz rechts ist das innerste Tag, das die aktuelle Auswahl oder die Einfgemarke enthlt. Im folgenden Beispiel befindet sich die Einfgemarke in einem Absatz-Tag, <p>. Um die Tabelle auszuwhlen, die den auszuwhlenden Abschnitt enthlt, whlen Sie das Tag <table> links von dem Tag <p> aus.
Klicken Sie in der Dokument-Symbolleiste auf die Schaltflche Codeansicht anzeigen. Whlen Sie Ansicht > Code. Klicken Sie in der Dokument-Symbolleiste auf die Schaltflche Code- und Entwurfsansicht anzeigen. Whlen Sie Ansicht > Code und Entwurf. Whlen Sie Fenster > Codeinspektor.
Wenn Sie in einem der beiden Codeeditoren (Codeansicht oder Codeinspektor) eine bestimmte Stelle auswhlen, wird diese Stelle in der Regel auch im Dokumentfenster ausgewhlt. Eventuell mssen Sie die beiden Ansichten synchronisieren, damit die Auswahl angezeigt wird.
Hinweis: Das Layout einer Seite kann sich durch das Einblenden von unsichtbaren Elementen geringfgig ndern, da andere Elemente mglicherweise um ein paar Pixel verschoben werden. Um das Layout przise darzustellen, sollten Sie die unsichtbaren Elemente ausblenden.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 228
Inhalt in Seiten einfgen
Hinweis: Ein Hkchen neben dem Namen eines Elements im Dialogfeld bedeutet, dass das Element sichtbar ist, wenn Sie Ansicht > Visuelle Hilfsmittel > Unsichtbare Elemente aktiviert haben.
Benannte Anker Zeigt ein Symbol an, das die Position der einzelnen benannten Anker (a name = "") im Dokument
markiert.
Skripts Zeigt ein Symbol an, das die Position von JavaScript- oder VBScript-Code im Body-Bereich des Dokuments markiert. Whlen Sie das Symbol aus, um das Skript im Eigenschafteninspektor zu bearbeiten oder eine Verknpfung zu einer externen Skriptdatei herzustellen. Kommentare Zeigt ein Symbol an, das die Position eines HTML-Kommentars markiert. Whlen Sie das Symbol aus,
standardmig deaktiviert.
Client-Imagemaps Zeigt ein Symbol an, das die Position einer Client-Imagemap im Dokument markiert. Eingebettete Stile Zeigt ein Symbol an, das die Position von CSS-Stilen markiert, die in den Body-Bereich eines
Dokuments eingebettet sind. CSS-Stile, die im head-Bereich eines Dokuments definiert sind, werden nicht im Dokumentfenster angezeigt.
Versteckte Formularfelder Zeigt ein Symbol an, das die Position von Formularfeldern markiert, bei denen das Attribut type auf "hidden" gesetzt ist. Formularbegrenzer Zeigt eine Begrenzungslinie um ein Formular an, damit Sie sehen, wo Sie Formularelemente
einfgen knnen. Die Begrenzungslinie zeigt den Bereich des form-Tags an. Alle Formularelemente, die sich innerhalb der Begrenzungslinie befinden, sind also korrekt im form-Tag eingeschlossen.
Ankerpunkte fr AP-Elemente Zeigt ein Symbol an, das die Position von Code markiert, der ein AP-Element definiert.
Das AP-Element selbst kann sich an einer beliebigen Stelle auf der Seite befinden. (AP-Elemente sind keine unsichtbaren Elemente. Unsichtbar ist nur der Code, der das AP-Element definiert.) Whlen Sie das Symbol aus, um das AP-Element auszuwhlen. Sie knnen dann den Inhalt des AP-Elements sehen, auch wenn das AP-Element als versteckt markiert ist.
Ankerpunkte fr ausgerichtete Elemente Zeigt ein Symbol an, das die Position von HTML-Code fr Elemente
anzeigt, die das Attribut align annehmen knnen. Dies knnen Bilder, Tabellen, ActiveX-Objekte, Plug-Ins und Applets sein. In einigen Fllen wird der Code fr das Element vom sichtbaren Objekt getrennt.
Sichtbare Server-Markup-Tags Zeigt die Position von Server-Markup-Tags (wie ASP- und ColdFusion-Tags) an, deren Inhalt nicht im Dokumentfenster angezeigt werden kann. Mit diesen Tags werden beim Verarbeiten durch einen Server im Allgemeinen HTML-Tags generiert. Mit dem Tag <CFGRAPH> wird beim Verarbeiten durch einen ColdFusion-Server beispielsweise eine HTML-Tabelle generiert. Das Tag wird in Dreamweaver durch ein unsichtbares ColdFusion-Element dargestellt, da die endgltige dynamische Ausgabe der Seite in Dreamweaver nicht ermittelt werden kann. Unsichtbare Server-Markup-Tags Zeigt die Position von Server-Markup-Tags (wie ASP- und ColdFusion-Tags) an, deren Inhalt nicht im Dokumentfenster angezeigt werden kann. Bei diesen Tags handelt es sich in der Regel um Tags fr die Einrichtung oder Verarbeitung oder um logische Tags (z. B. <CFSET>, <CFWDDX> oder <CFXML>), mit denen keine HTML-Tags generiert werden. CSS-Anzeige: Kein Zeigt ein Symbol an, das die Position des versteckten Inhalts markiert:none-Eigenschaft im
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 229
Inhalt in Seiten einfgen
Server-Side Includes Zeigt die tatschlichen Inhalte jeder Server-Side Includes-Datei an.
Websichere Farben
In HTML werden Farben entweder als Hexadezimalwerte (z. B. #FF0000) oder als Farbnamen (z. B. red) ausgedrckt. Eine websichere Farbe sieht in Netscape Navigator und Microsoft Internet Explorer auf Windows- und MacintoshSystemen im 256-Farben-Modus gleich aus. Es gibt 216 systembergreifende Farben. Alle Hexadezimalwerte, die aus Kombinationen von 00, 33, 66, 99, CC oder FF zusammengesetzt sind (entsprechend den RGB-Werten 0, 51, 102, 153, 204 und 255), sind websichere Farben. Tests ergeben jedoch, dass nur 212 und nicht 216 websichere Farben existieren, weil Internet Explorer unter Windows die Farben #0033FF (0,51,255), #3300FF (51,0,255), #00FF33 (0,255,51) und #33FF00 (51,255,0) nicht korrekt darstellt. Als Webbrowser erstmals eingefhrt wurden, konnten die meisten Computer lediglich 256 Farben (8 Bit pro Channel - bpc) darstellen. Heutzutage knnen Computer Tausende oder Millionen Farben (16 und 32 Bit) darstellen, daher ist die Rechtfertigung, die websichere Palette zu verwenden, kaum noch gltig, wenn Sie Ihre Site fr Benutzer mit aktuellen Computersystemen entwickeln. Ein Grund, die websichere Farbpalette zu verwenden, ist gegeben, wenn Sie Anwendungen fr alternative Internetgerte wie beispielsweise PDAs und Mobiltelefone entwickeln. Viele dieser Gerte haben lediglich Schwarzwei-Displays (1 Bit) oder Displays mit 256 Farben (8 Bit). Fr die Paletten Farbwrfel (Standardeinstellung) und Kontinuierlicher Farbton in Dreamweaver wird die websichere Palette mit 216 Farben verwendet. Wenn Sie eine Farbe aus diesen Paletten whlen, wird der Hexadezimalwert der Farbe angezeigt. Wenn Sie eine Farbe auerhalb des websicheren Bereichs auswhlen mchten, ffnen Sie den System-Farbwhler durch Klicken auf die Schaltflche Systemfarben rechts oben im Dreamweaver-Farbwhler. Der System-Farbwhler ist nicht auf websichere Farben beschrnkt. UNIX-Versionen von Netscape Navigator verwenden eine andere Farbpalette als die Windows- und MacintoshVersionen. Wenn Sie ausschlielich fr UNIX-Browser entwickeln (oder Ihre Zielgruppe Windows- oder MacintoshSysteme mit 24-Bit-Monitoren oder UNIX-Systeme mit 8-Bit-Monitoren einsetzt), sollten Sie eventuell Hexadezimalwerte aus Kombinationen von 00, 40, 80, BF und FF verwenden, um websichere Farben fr SunOS zu erhalten.
Farbwhler verwenden
In Dreamweaver enthalten viele Dialogfelder und auch der Eigenschafteninspektor fr viele Seitenelemente ein Farbfeld, ber das ein Farbwhler geffnet werden kann. Mit dem Farbwhler whlen Sie eine Farbe fr ein Seitenelement aus. Auerdem knnen Sie die standardmige Textfarbe fr Seitenelemente festlegen.
1 Klicken Sie in einem Dialogfeld oder im Eigenschafteninspektor auf ein Farbfeld.
Whlen Sie mit der Pipette ein Farbfeld in der Palette aus. Alle Farben in den Farbpaletten Farbwrfel
(Standardeinstellung) und Kontinuierlicher Farbton sind websicher. Die Farben in anderen Paletten sind nicht websicher.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 230
Inhalt in Seiten einfgen
Sie knnen mit der Pipette eine Farbe von einer beliebigen Stelle des Bildschirms aufnehmen, sogar von Positionen
auerhalb der Dreamweaver-Fenster. Um eine Farbe vom Desktop oder einer anderen Anwendung aufzunehmen, klicken Sie mit der Maustaste und halten Sie diese gedrckt; dadurch bleibt die Pipette aktiviert. Whlen Sie daraufhin eine Farbe auerhalb von Dreamweaver aus. Wenn Sie auf den Desktop oder eine andere Anwendung klicken, wird von Dreamweaver die Farbe aufgenommen, auf die Sie zuvor geklickt haben. Wenn Sie jedoch zu einer anderen Anwendung wechseln, mssen Sie mglicherweise auf ein Dreamweaver-Fenster klicken, um die Arbeit in Dreamweaver fortzusetzen.
Mit dem Popupmen in der oberen rechten Ecke des Farbwhlers knnen Sie Ihre Farbauswahl erweitern. Sie
haben die Wahl zwischen Farbwrfel, Kontinuierlicher Farbton, Windows, Mac OS und Graustufen. Hinweis: Die Farbpaletten Farbwrfel und Kontinuierlicher Farbton sind websicher, Windows, Mac OS und Graustufen dagegen nicht.
Um die aktuelle Farbe zu lschen, ohne eine andere Farbe zu whlen, klicken Sie auf die Schaltflche
Standardfarbe . .
Verwandte Themen
berblick ber die Statusleiste auf Seite 13
Klicken Sie an der Stelle, die Sie vergrern mchten, so oft auf der Seite, bis die gewnschte Vergrerungsstufe
erreicht wurde.
Ziehen Sie einen Rahmen ber den Bereich auf der Seite, den Sie nher heranholen mchten, und lassen Sie die
Maustaste los.
Whlen Sie eine voreingestellte Vergrerungsstufe im Popupmen Vergrerung einstellen. Geben Sie eine Vergrerungsstufe in das Textfeld Vergrerung einstellen ein.
Sie knnen die Ansicht auch ohne das Zoomwerkzeug vergrern, indem Sie Strg+= (Windows) bzw. Befehl+= (Macintosh) drcken.
3 Um die Vergrerungsstufe zu verkleinern, whlen Sie das Zoomwerkzeug aus, drcken Sie die Alt-Taste
(Windows) bzw. die Wahltaste (Macintosh) und klicken Sie auf die Seite. Sie knnen die Ansicht auch ohne das Zoomwerkzeug verkleinern, indem Sie Strg+- (Windows) bzw. Befehl+(Macintosh) drcken.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 231
Inhalt in Seiten einfgen
Verwandte Themen
JavaScript-Verhalten verwenden auf Seite 369 Verhalten Browser berprfen definieren auf Seite 373 Verhalten Plug-In berprfen definieren auf Seite 374
(Macintosh).
2 Whlen Sie links in der Kategorieliste die Option Statusleiste. 3 Whlen Sie die Verbindungsgeschwindigkeit, die zur Berechnung der Downloadzeit verwendet werden soll, und
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 232
Inhalt in Seiten einfgen
Verwandte Themen
Fenstergre und Verbindungsgeschwindigkeit festlegen auf Seite 21
Geben Sie Text direkt im Dokumentfenster ein. Kopieren Sie Text aus einer anderen Anwendung in die Zwischenablage, wechseln Sie zu Dreamweaver, setzen Sie
die Einfgemarke in der Entwurfsansicht des Dokumentfensters an die gewnschte Stelle und whlen Sie Bearbeiten > Einfgen oder Bearbeiten > Inhalte einfgen. Wenn Sie Bearbeiten > Inhalte einfgen whlen, wird ein Dialogfeld mit diversen Formatierungsoptionen fr das Einfgen angezeigt. Sie knnen Text auerdem mit den folgenden Tastaturbefehlen einfgen:
Einfgeoption Einfgen Tastaturbefehl Strg+V (Windows) Befehl+V (Macintosh) Inhalte einfgen Strg+Umschalt+V (Windows) Befehl+Umschalt+V (Macintosh)
Sonderzeichen einfgen
Einige Sonderzeichen werden in HTML durch einen Namen oder eine Zahl dargestellt, die als Entitt bezeichnet wird. HTML enthlt Entittsnamen fr Zeichen wie das Copyright-Symbol (©), das Et-Zeichen (&) und das Symbol fr eingetragene Marken (®). Jede Entitt hat einen Namen (z. B. —) und ein numerisches Gegenstck (z. B. —).
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 233
Inhalt in Seiten einfgen
HTML verwendet spitze Klammern (<>) im Code. Aus diesem Grund mssen Sie Sonderzeichen fr grer als oder kleiner als verwenden, damit diese Zeichen von Dreamweaver nicht als Code interpretiert werden. In diesem Fall verwenden Sie > fr grer als (>) und < fr kleiner als (<). Leider zeigen viele Browser (vor allem ltere Browser und verschiedene aktuelle Browser mit Ausnahme von Netscape Navigator und Internet Explorer) viele dieser benannten Entitten nicht korrekt an.
1 Setzen Sie die Einfgemarke im Dokumentfenster an die Stelle, an der Sie ein Sonderzeichen einfgen mchten. 2 Fhren Sie einen der folgenden Schritte aus:
Whlen Sie den Namen des Zeichens im Untermen Einfgen > HTML > Sonderzeichen aus. Klicken Sie in der Kategorie Text des Bedienfelds Einfgen auf die Schaltflche Zeichen und whlen Sie im
Untermen das gewnschte Zeichen aus. Es stehen zahlreiche weitere Sonderzeichen zur Verfgung. Um eines dieser Sonderzeichen auszuwhlen, whlen Sie Einfgen > HTML > Sonderzeichen > Weitere aus oder klicken Sie in der Kategorie Text des Bedienfelds Einfgen auf die Schaltflche Zeichen und whlen Sie die Option Andere Zeichen aus. Whlen Sie im Dialogfeld Anderes Zeichen einfgen ein Zeichen aus und klicken Sie auf OK.
Whlen Sie Einfgen > HTML > Sonderzeichen > Geschtztes Leerzeichen. Drcken Sie Strg+Umschalt+Leertaste (Windows) bzw. Wahltaste+Leertaste (Macintosh). Klicken Sie in der Kategorie Text des Bedienfelds Einfgen auf die Schaltflche Zeichen und whlen Sie das
Symbol Geschtztes Leerzeichen aus.
(Macintosh) aus.
2 Aktivieren Sie in der Kategorie Allgemein die Option Mehrere aufeinanderfolgende Leerzeichen zulassen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 234
Inhalt in Seiten einfgen
Verwandte Themen
CSS-Eigenschaften festlegen auf Seite 142
Klicken Sie im HTML-Eigenschafteninspektor auf die Schaltflche Aufzhlungsliste oder Nummerierte Liste. Whlen Sie Formatieren > Liste und dann den gewnschten Listentyp aus: Ungeordnete Liste (Aufzhlung),
Geordnete Liste (nummeriert) oder Definitionsliste. Der Aufzhlungspunkt bzw. die Nummer des ersten Listenelements wird im Dokumentfenster angezeigt.
2 Geben Sie den Text fr das Listenelement ein und drcken Sie anschlieend die Eingabetaste (Windows) bzw.
oder whlen Sie Formatieren > Liste und dann den gewnschten Listentyp aus: Ungeordnete Liste, Geordnete Liste oder Definitionsliste.
Einzug aus. Dreamweaver rckt den Text ein und erstellt eine separate Liste mit den HTML-Attributen der ursprnglichen Liste.
3 Weisen Sie dem eingerckten Text einen neuen Listentyp oder Stil zu, indem Sie nach dem oben beschriebenen
Verfahren vorgehen.
verwendet werden soll. Dieser Stil wird allen Elementen der Liste zugewiesen, sofern Sie den einzelnen Elementen innerhalb der Liste keinen neuen Stil zuweisen.
Zhler starten Legt den Wert des ersten Elements einer nummerierten Liste fest.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 235
Inhalt in Seiten einfgen
beginnen soll.
4 Klicken Sie auf OK, um die Optionen zu bernehmen.
Verwandte Themen
Code anzeigen auf Seite 317 Regulre Ausdrcke auf Seite 315
zwar nach bestimmten Tags suchen, aber die Option Spezifisches Tag ist hierfr besser geeignet.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 236
Inhalt in Seiten einfgen
Text Dient zur Suche nach bestimmten Textzeichenfolgen im Dokumenttext. Dabei wird HTML-Code ignoriert, der
die Zeichenfolge unterbricht. Bei der Suche nach der schwarze Hund wrden also die beiden folgenden Textstellen gefunden: der schwarze Hund und der <i>schwarze</i> Hund.
Text (erweitert) Dient zur Suche nach bestimmten Textzeichenfolgen, die sich entweder innerhalb oder auerhalb
von Tags befinden. Angenommen, Ihr Dokument enthlt den nachfolgenden HTML-Code, dann wird bei der Suche nach der Textzeichenfolge bemht auerhalb des i-Tags nur das zweite Auftreten des Wortes bemht gefunden:
Peter <i>bemht</i> sich, seine Arbeit pnktlich zu erledigen, aber er schafft es nicht immer. Er bemht sich sehr.
Spezifisches Tag Dient zur Suche nach bestimmten Tags, Attributen und Attributwerten, z. B. nach allen td-Tags, bei
denen valign auf top eingestellt ist. Hinweis: Durch Drcken von Strg+Eingabetaste oder Umschalt+Eingabetaste (Windows) bzw. Ctrl+Return, Umschalt+Return oder Befehl+Return (Macintosh) knnen Sie Zeilenumbrche innerhalb der Suchfelder einfgen. Auf diese Weise knnen Sie nach Absatzmarken suchen. Stellen Sie sicher, dass bei dieser Suche das Kontrollkstchen Unterschiede bei Leerraum ignorieren deaktiviert ist, wenn Sie keine regulren Ausdrcke verwenden. Bei dieser Suche wird explizit eine Absatzmarke gesucht, nicht nur ein ein Zeilenumbruch. So wird z. B. das<br>-Tag oder <p>-Tag nicht gefunden. Absatzmarken werden in der Entwurfsansicht als Leerraum und nicht als Zeilenumbrche dargestellt.
5 Whlen Sie die folgenden Optionen, um die Suche einzuschrnken oder zu erweitern:
Gro-/Kleinschreibung Bewirkt, dass nur Text gefunden wird, dessen Schreibweise dem gesuchten Text genau entspricht. Wenn Sie beispielsweise den Text das groe Rennen suchen, wird der Text Das Groe Rennen nicht gefunden. Leerraum ignorieren Bewirkt, dass alle Leerrume als ein einzelnes Leerzeichen interpretiert werden. Wenn Sie diese Option markieren, entspricht dieses Wort zwar der Zeichenfolge dieses Wort und der Zeichenfolge dieses Wort, nicht jedoch der Zeichenfolge diesesWort. Wenn Sie das Kontrollkstchen Regulren Ausdruck verwenden aktiviert haben, steht diese Option nicht zur Verfgung. Bei regulren Ausdrcken mssen Sie explizit angeben, dass Leerrume ignoriert werden sollen. Beachten Sie, dass die Tags <p> und <br> nicht als Leerraum gelten. Ganzes Wort Bewirkt, dass nur Text gefunden wird, der einem oder mehreren Worten genau entspricht.
Hinweis: Diese Option ist vergleichbar mit dem Suchmuster nach regulren Ausdrcken nach einem Suchbegriff der mit /b, der Wortabgrenzung fr regulre Ausdrcke, anfngt und endet.
Regulren Ausdruck verwenden Bewirkt, dass bestimmte Zeichen und kurze Zeichenfolgen (z. B. ?, *, \w und \b) in
der Suchzeichenfolge als Operatoren fr regulre Ausdrcke interpretiert werden. Wenn Sie zum Beispiel nach der Textzeichenfolge der b\w*\b Hund suchen, wird sowohl der braune Hund als auch der bellende Hund gefunden. Hinweis: Wenn Sie in der Codeansicht nderungen am Dokument vornehmen und anschlieend versuchen, andere Elemente als Quellcode zu suchen und zu ersetzen, erscheint eine Meldung, dass Dreamweaver vor dem Suchvorgang zunchst die beiden Ansichten synchronisiert.
6 Wenn Sie nur suchen und nicht ersetzen mchten, klicken Sie auf die Schaltflchen Weitersuchen oder Alle
suchen.
Weitersuchen Springt immer zur nchsten Stelle des gesuchten Textes oder Tags im aktuellen Dokument. Wenn es keine Fundstellen des gesuchten Tags im aktuellen Dokument mehr gibt, fhrt Dreamweaver mit dem nchsten Dokument fort, wenn Sie in mehreren Dokumenten suchen. Alle suchen ffnet das Bedienfeld Suchen in der Bedienfeldgruppe Ergebnisse. Wenn Sie die Suche nur in einem Dokument durchfhren, zeigt Alle suchen alle Fundstellen des Suchtexts oder Tags mit einem Teil des Kontexts an. Wenn Sie die Suche in einem Verzeichnis oder einer Site durchfhren, zeigt Alle suchen die Liste der Dokumente an, die den gesuchten Text oder das gesuchte Tag enthalten.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 237
Inhalt in Seiten einfgen
7 Um den gefundenen Text bzw. ein Tag zu ersetzen, klicken Sie auf Ersetzen oder Alle ersetzen. 8 Klicken Sie abschlieend auf Schlieen.
Eine weitere Suche durchfhren, ohne das Dialogfeld Suchen und ersetzen anzuzeigen
Drcken Sie F3 (Windows) bzw. Befehl+G (Macintosh).
Wenn Sie die aktuelle Datei durchsuchen, wird im Dokumentfenster die Zeile mit dem Suchergebnis angezeigt. Wenn Sie eine Gruppe von Dateien durchsuchen, wird die Datei mit dem Suchergebnis geffnet.
Suchvorgnge anhalten
Klicken Sie auf die Schaltflche Anhalten.
wenn Sie beispielsweise alle IMG-Tags suchen mchten, die nicht das Attribut ALT enthalten.
Mit Gibt an, dass das gesuchte Tag einen bestimmten Text oder ein spezifisches Tag enthalten muss. In <b><font
size="4">heading 1</font></b> ist beispielsweise das font-Tag im b-Tag eingeschlossen.
Ohne Gibt an, dass das gesuchte Tag einen bestimmten Text oder ein spezifisches Tag nicht enthalten darf. Innerhalb des Tags Gibt an, dass sich das gesuchte Tag innerhalb eines bestimmten anderen Tags befinden muss. Auerhalb des Tags Gibt an, dass sich das gesuchte Tag nicht innerhalb eines bestimmten anderen Tags befinden darf.
5 (Optional) Klicken Sie auf die Schaltflche mit dem Pluszeichen und wiederholen Sie Schritt 3, um die Suche noch
weiter einzuschrnken.
6 Wenn Sie keine der Optionen in Schritt 3 und 4 gewhlt haben, klicken Sie auf die Schaltflche mit dem
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 238
Inhalt in Seiten einfgen
7 Wenn Sie eine Aktion durchfhren mchten, sobald ein Tag gefunden wird (z. B. Entfernen oder Ersetzen des
Tags), whlen Sie die gewnschte Aktion im Popupmen Aktion aus und geben Sie ggf. weitere zum Durchfhren der Aktion notwendige Details an.
daneben ein Tag aus. Whlen Sie beispielsweise Innerhalb des Tags und dann das Tag title.
5 (Optional) Klicken Sie auf die Schaltflche mit dem Pluszeichen (+), um den Suchvorgang mit einer der folgenden
Optionen einzuschrnken:
Mit Attribut Dient zum Auswhlen eines Attributs, das im Tag enthalten sein muss. Sie knnen einen bestimmten Wert fr das Attribut angeben oder [beliebiger Wert] whlen. Ohne Attribut Dient zum Auswhlen eines Attributs, das nicht im Tag enthalten sein darf. Whlen Sie diese Option,
wenn Sie beispielsweise alle IMG-Tags suchen mchten, die nicht das Attribut ALT enthalten.
Mit Gibt an, dass das gesuchte Tag einen bestimmten Text oder ein spezifisches Tag enthalten muss. In <b><font
size="4">heading 1</font></b> ist beispielsweise das font-Tag im b-Tag eingeschlossen.
Ohne Gibt an, dass das gesuchte Tag einen bestimmten Text oder ein spezifisches Tag nicht enthalten darf. Innerhalb des Tags Gibt an, dass sich das gesuchte Tag innerhalb eines bestimmten anderen Tags befinden muss. Auerhalb des Tags Gibt an, dass sich das gesuchte Tag nicht innerhalb eines bestimmten anderen Tags befinden darf.
Akronym.
3 Geben Sie den vollstndigen Text des Akronyms bzw. der Abkrzung ein. 4 Geben Sie die Sprache ein, wobei en fr Englisch, de fr Deutsch oder it fr Italienisch steht.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 239
Inhalt in Seiten einfgen
(Macintosh).
2 Klicken Sie auf die Kategorie Kopieren/Einfgen. 3 Legen Sie die folgenden Optionen wie gewnscht fest und klicken Sie auf OK:
Nur Text Ermglicht das Einfgen von unformatiertem Text. Wenn der Originaltext formatiert ist, werden alle
HTML formatiertem Text (z. B. Abstze und Tabellen sowie Text, der mit dem b-, i-, u-, strong-, em-, hr-, abbr- oder acronym-Tag formatiert wurde).
Text mit Struktur und vollstndiger Formatierung Ermglicht das Einfgen von Text unter Beibehaltung der
vollstndigen Struktur, der HTML-Formatierung und der CSS-Stile. Hinweis: Bei der Option zum Einfgen der vollstndigen Formatierung bleiben allerdings keine CSS-Stile erhalten, die aus einem externen Stylesheet stammen. Ferner bleiben Stile nicht erhalten, wenn die Anwendung, aus der die Stile stammen, Stile beim Einfgen in die Zwischenablage nicht erhlt.
Zeilenumbrche beibehalten Ermglicht die Beibehaltung von Zeilenumbrchen im eingefgten Text. Diese Option
Struktur und einfacher Formatierung aktiviert haben und beim Einfgen von Text zustzliche Abstnde zwischen Abstzen vermeiden mchten.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 240
Inhalt in Seiten einfgen
Hinweis: Mit Dreamweaver kann nur eine Rechtschreibprfung der jeweils im Dokumentfenster geffneten Datei durchgefhrt werden. Eine Rechtschreibprfung aller Dateien einer Site gleichzeitig ist nicht mglich. Bei der Rechtschreibprfung wird standardmig das Wrterbuch Englisch (USA) verwendet. Wenn Sie das Wrterbuch wechseln mchten, whlen Sie Bearbeiten > Voreinstellungen > Allgemein (Windows) bzw. Dreamweaver > Voreinstellungen > Allgemein (Macintosh) und dann im Popupmen Rechtschreibwrterbuch das gewnschte Wrterbuch aus.
1 Whlen Sie Befehle > Rechtschreibprfung aus oder drcken Sie Umschalt+F7.
Wenn Dreamweaver auf ein unbekanntes Wort stt, wird das Dialogfeld Rechtschreibung prfen eingeblendet.
2 Whlen Sie die entsprechende Option fr diese Unstimmigkeit aus.
Zu Persnlich hinzufgen Fgt das nicht erkannte Wort Ihrem persnlichen Wrterbuch hinzu. Ignorieren Ignoriert das nicht erkannte Wort an der gegenwrtigen Fundstelle. ndern Ersetzt das nicht erkannte Wort an der gegenwrtigen Fundstelle durch den Text, den Sie im Feld ndern
in eingeben oder durch den Korrekturvorschlag, den Sie unter Vorschlge auswhlen.
Alle ignorieren Ignoriert das nicht erkannte Wort an smtlichen Fundstellen. Alle ndern Ersetzt das nicht erkannte Wort an smtlichen Fundstellen auf dieselbe Weise.
Hinweis: Eintrge, die in persnliche Wrterbcher eingefgt wurden, knnen in Dreamweaver nicht gelscht werden.
Tabellendaten importieren
Sie knnen Tabellendaten in ein Dokument importieren, indem Sie die entsprechenden Dateien (z. B. Microsoft Excel-Dateien oder Datenbankdateien) als Textdateien mit Trennzeichen speichern. Sie knnen aus Microsoft Word HTML-Dokumenten Tabellendaten importieren und formatieren sowie Text importieren. Darber hinaus knnen Sie Text aus Microsoft Excel-Dokumenten in ein Dreamweaver-Dokument einfgen, indem Sie den Inhalt der Excel-Datei in eine Webseite importieren.
1 Whlen Sie Datei > Importieren > Tabellendaten oder Einfgen > Tabellenobjekte > Tabellendaten
importieren.
2 Whlen Sie die gewnschte Datei aus oder geben Sie ihren Namen in das Textfeld ein. 3 Whlen Sie das Trennzeichen aus, das beim Speichern der Datei als Textdatei mit Trennzeichen verwendet wurde.
Zur Auswahl stehen Tabulator, Komma, Semikolon, Doppelpunkt und Anderes. Wenn Sie Anderes whlen, wird neben der Option ein leeres Feld eingeblendet. Geben Sie das Zeichen ein, das als Trennzeichen verwendet wurde.
4 Verwenden Sie die restlichen Optionen, um die Tabelle zu formatieren oder zu definieren, in die die Daten
Verwandte Themen
Vorhandene Dokumente ffnen und bearbeiten auf Seite 72 Tabellendaten importieren und exportieren auf Seite 190
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 241
Inhalt in Seiten einfgen
Ziehen Sie die Datei von ihrem aktuellen Speicherort zu der Seite, auf der der Dateiinhalt angezeigt werden soll. Whlen Sie Datei > Importieren > Word-Dokument oder Datei > Importieren > Excel-Dokument.
3 Suchen Sie im Dialogfeld zum Importieren von Dokumenten nach der Datei, die Sie hinzufgen mchten, whlen
Sie unten im Dialogfeld aus dem Popupmen mit den Formatierungen eine Formatierungsoption und klicken Sie dann auf ffnen.
Nur Text Fgt unformatierten Text ein. Ist der Originaltext formatiert, werden alle Formatierungen entfernt. Text mit Struktur Ermglicht das Einfgen von Text unter Beibehaltung seiner Struktur. Einfache Formatierungen gehen jedoch verloren. Sie knnen z. B. Text einfgen und die Struktur von Abstzen, Listen und Tabellen beibehalten, ohne Fett-, Kursiv- oder sonstige Formatierungen beizubehalten. Text mit Struktur und einfacher Formatierung Ermglicht das Einfgen von strukturiertem und einfachem mit
HTML formatiertem Text (z. B. Abstze und Tabellen sowie Text, der mit dem b-, i-, u-, strong-, em-, hr-, abbr- oder acronym-Tag formatiert wurde).
Text mit Struktur und vollstndiger Formatierung Ermglicht das Einfgen von Text unter Beibehaltung der
Abstzen zu lschen, wenn Sie die Option Text mit Struktur und einfacher Formatierung ausgewhlt haben. Der Inhalt des Word- oder Excel-Dokuments wird auf Ihrer Seite angezeigt.
Dreamweaver Sie auf, das Dokument in den Stammordner zu kopieren. Durch das Kopieren des Dokuments in den Stammordner gewhrleisten Sie, dass das Dokument beim Verffentlichen der Site verfgbar ist.
5 Achten Sie beim Hochladen der Seite auf den Webserver darauf, auch die Word- oder Excel-Datei hochzuladen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 242
Inhalt in Seiten einfgen
Ihre Seite enthlt nun einen Hyperlink zu dem Word- oder Excel-Dokument. Der Hyperlinktext ist der Name der verknpften Datei. Sie knnen diesen Text bei Bedarf im Dokumentfenster ndern.
Verwandte Themen
Bedienfeld CSS-Stile ffnen auf Seite 141 Grundlegendes zu Cascading Stylesheets auf Seite 132
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 243
Inhalt in Seiten einfgen
Hinweis: Beim Erstellen von CSS-Inline-Stilen wird der Code fr Stilattribute in Dreamweaver direkt in das Body-Tag der Seite eingefgt.
Verwandte Themen
Neue CSS-Regeln erstellen auf Seite 141 CSS-Eigenschaften festlegen auf Seite 142 Eigenschaften fr Zellen, Zeilen und Spalten festlegen auf Seite 194 Allgemeine Voreinstellungen fr Dreamweaver festlegen auf Seite 32 Tutorial fr CSS-Eigenschafteninspektor
Setzen Sie die Einfgemarke in einen Textblock, der mit der zu bearbeitenden Regel formatiert wurde. Die Regel
wird im Popupmen Zielregel angezeigt.
angewendet wird und Sie in den Text auf der Seite klicken, wird die Regel fr das Textformat angezeigt. ber das Popupmen Zielregel knnen Sie darber hinaus neue CSS-Regeln oder neue Inline-Stile erstellen oder vorhandene Klassen auf ausgewhlten Text anwenden. Beim Erstellen einer neuen Regel mssen Sie die Optionen im Dialogfeld Neue CSS-Regel festlegen. Weitere Informationen finden Sie in den Hyperlinks am Ende dieses Themenabschnitts.
Regel bearbeiten ffnet das Dialogfeld CSS-Regel-Definition fr die Zielregel. Wenn Sie ber das Popupmen
Zielregel die Option Neue CSS-Regel auswhlen und auf die Schaltflche Regel bearbeiten klicken, wird stattdessen das Dialogfeld Neue CSS-Regel zum Eingeben der Regeldefinition geffnet.
CSS-Bedienfeld ffnet das Bedienfeld CSS-Stile und zeigt Eigenschaften der Zielregel in der aktuellen Ansicht an. Schrift ndert die Schriftart der Zielregel. Gre Legt die Schriftgre der Zielregel fest. Textfarbe Legt die ausgewhlte Farbe als Schriftfarbe in der Zielregel fest. Whlen Sie eine websichere Farbe aus,
indem Sie auf das Farbfeld klicken, oder geben Sie einen Hexadezimalwert (z. B. #FF0000) in das daneben liegende Textfeld ein.
Fett Fgt der Zielregel die bold-Eigenschaft hinzu. Kursiv Fgt der Zielregel die italic-Eigenschaft hinzu. Linksbndig, Zentrieren und Rechtsbndig Fgen der Zielregel die entsprechende alignment-Eigenschaft hinzu.
Hinweis: Bei den Eigenschaften Schrift, Gre, Textfarbe, Fett, Kursiv und Ausrichtung werden immer die Eigenschaften der Regel angezeigt, die fr die aktuelle Auswahl im Dokumentfenster gilt. Wenn Sie nderungen an diesen Eigenschaften vornehmen, wirkt sich dies auf die Zielregel aus. Ein Video-Tutorial zur Verwendung des CSS-Eigenschafteninspektors finden Sie unter www.adobe.com/go/lrvid4041_dw_de.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 244
Inhalt in Seiten einfgen
Auswahl angewendet wurden, wird im Popupmen Kein CSS-Stil angezeigt. Wenn mehrere Stile auf die Auswahl angewendet wurden, ist das Popupmen leer. Fhren Sie im Men Stil einen der folgenden Schritte aus:
Whlen Sie den Stil aus, den Sie auf die Auswahl anwenden mchten. Whlen Sie Kein, um den derzeit ausgewhlten Stil zu entfernen. Whlen Sie Umbenennen aus, um den Stil umzubenennen. Whlen Sie Stylesheet anfgen aus, um das Dialogfeld zu ffnen, in dem Sie der Seite ein externes Stylesheet
zuordnen knnen.
Fett Weist dem ausgewhlten Text je nach dem in der Kategorie Allgemein des Dialogfelds Voreinstellungen
voreingestellten Stil entweder das Tag <b> oder das Tag <strong> zu.
Kursiv Weist dem ausgewhlten Text je nach dem in der Kategorie Allgemein des Dialogfelds Voreinstellungen
voreingestellten Stil entweder das Tag <i> oder das Tag<em> zu.
Ungeordnete Liste Erstellt anhand des ausgewhlten Textes eine Liste mit Aufzhlungspunkten. Wenn kein Text ausgewhlt ist, wird eine neue Liste mit Aufzhlungspunkten begonnen. Geordnete Liste Erstellt anhand des ausgewhlten Textes eine nummerierte Liste. Wenn kein Text ausgewhlt ist, wird eine neue nummerierte Liste begonnen. Blockzitat und Blockzitat entfernen Dienen zum Ein- und Ausrcken von ausgewhltem Text. Dazu wird das
blockquote-Tag entweder hinzugefgt oder entfernt. Einzge innerhalb einer Liste erzeugen eine Liste mit Unterpunkten. Durch Ausrcken der eingezogenen Listenelemente werden die Unterpunkte wieder aufgehoben.
Hyperlink Macht den ausgewhlten Text zu einem Hyperlink. Klicken Sie auf das Ordnersymbol, um eine Datei auf Ihrer Website auszuwhlen. Geben Sie entweder die URL der Seite ein oder ziehen Sie das Dateizeigersymbol auf eine Datei im Bedienfeld Dateien oder ziehen Sie eine Datei aus dem Bedienfeld Dateien in das Feld. Titel Gibt den QuickInfo-Text fr einen Hypertext-Link an. Ziel Dient zum Festlegen des Frames oder Fensters, in dem das verknpfte Dokument geladen wird:
_blank ldt die verknpfte Datei in ein neues, unbenanntes Browserfenster. _parent ldt die verknpfte Datei in das bergeordnete Frameset oder Fenster des Frames, der den Hyperlink enthlt. Wenn der Frame, der den Hyperlink enthlt, nicht verschachtelt ist, wird die verknpfte Datei in das ganze Browserfenster geladen. _self ldt die verknpfte Datei in denselben Frame oder dasselbe Fenster wie den Hyperlink. Dies ist das
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 245
Inhalt in Seiten einfgen
HTML-Formatierung verwenden
Obwohl CSS als bevorzugte Methode fr die Formatierung von Text eingesetzt werden sollte, knnen Sie in Dreamweaver Text weiterhin mit HTML formatieren.
Abstze formatieren
ber das Popupmen Format im HTML-Eigenschafteninspektor oder ber Formatieren > Absatzformat knnen Sie die Standard-Tags fr Abstze und berschriften anwenden.
1 Setzen Sie die Einfgemarke in den Absatz oder whlen Sie eine Textstelle im Absatz aus. 2 Whlen Sie ber Formatieren > Absatzformat oder im Popupmen Format des Eigenschafteninspektors eine
Option aus:
Whlen Sie ein Absatzformat aus (z. B. berschrift 1, berschrift 2, Vorformatierter Text usw.). Das zum
ausgewhlten Stil gehrende HTML-Tag (z. B. h1 fr berschrift 1, h2 fr berschrift 2, pre fr vorformatierten Text usw.) wird auf den gesamten Absatz angewendet.
Verwandte Themen
Texteigenschaften im Eigenschafteninspektor festlegen auf Seite 242 CSS-Eigenschaften festlegen auf Seite 142
Textfarbe ndern
Sie knnen die Standardfarbe des gesamten Textes auf einer Seite ndern oder Sie knnen die Farbe des auf der Seite ausgewhlten Textes ndern.
Verwandte Themen
Farbwhler verwenden auf Seite 229 Standardtextfarben fr eine Seite definieren Whlen Sie Modifizieren > Seiteneigenschaften > Erscheinungsbild (HTML) oder Hyperlinks (HTML) aus und legen Sie dann unter Textfarbe, Farbe fr Hyperlinks, Besuchte Hyperlinks und Aktive Hyperlinks die gewnschten Farben fest. Hinweis: Die Farbe des aktiven Hyperlinks ist die Farbe, die ein Hyperlink annimmt, wenn ein Besucher darauf klickt. Einige Webbrowser verwenden nicht unbedingt die von Ihnen definierte Farbe. Farbe des ausgewhlten Textes ndern Whlen Sie Formatieren > Farbe aus, whlen Sie im Systemfarbenwhler eine Farbe aus und klicken Sie dann auf OK.
Text ausrichten
ber Formatieren > Ausrichten knnen Sie Text mit HTML ausrichten. Mit dem Befehl Formatieren > Ausrichten > Zentrieren knnen Sie ein beliebiges Element auf einer Seite zentrieren.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 246
Inhalt in Seiten einfgen
Text auf einer Seite ausrichten 1 Whlen Sie die Textstelle aus, die Sie ausrichten mchten, oder setzen Sie die Einfgemarke an den Anfang des Texts.
2 Whlen Sie Formatieren > Ausrichten und dann die gewnschte Ausrichtung aus.
Seitenelemente zentrieren 1 Whlen Sie das Element aus, das Sie zentrieren mchten (Bild, Plug-In, Tabelle oder ein anderes Seitenelement).
2 Whlen Sie Formatieren > Ausrichten > Zentrieren aus.
Hinweis: Sie knnen ganze Textblcke ausrichten und zentrieren, jedoch nicht einen Teil einer berschrift oder eines Absatzes.
Text einrcken
Mit dem Befehl Einzug wird ein Textabsatz mit dem HTML-Tag blockquote versehen, sodass er von beiden Seitenrndern her eingerckt wird.
1 Setzen Sie die Einfgemarke in den einzurckenden Absatz. 2 Whlen Sie Formatieren > Einzug oder Negativeinzug aus bzw. whlen Sie im Kontextmen Liste >
Einzug oder Negativeinzug aus. Hinweis: Sie knnen auch mehrere Einzge auf einen Absatz anwenden. Mit jeder weiteren Auswahl dieses Befehls wird der Text auf beiden Seiten weiter eingerckt.
Schriftstile anwenden
Mit HTML-Code knnen Sie ein Zeichen oder ganze Abstze und Textblcke einer Site formatieren. ber das Men Formatieren knnen Sie die Schriftattribute fr den ausgewhlten Text festlegen oder ndern. Sie knnen die Schriftart, den Schriftstil (z. B. Fett oder Kursiv) und die Schriftgre bestimmen.
1 Whlen Sie die Textstelle aus. Wenn Sie keinen Text markieren, wirkt sich die gewhlte Option auf den Text aus,
Wenn Sie die Schrift ndern mchten, whlen Sie unter Formatieren > Schrift eine Schrift aus. Whlen Sie
Standard aus, um bereits angewendete Schriften zu entfernen. Hiermit wird die Standardschrift auf den ausgewhlten Text angewendet (entweder die Standardschrift des Browsers oder die Schriftart, die dem Tag im CSS-Stylesheet zugewiesen ist).
Wenn Sie den Schriftstil ndern mchten, whlen Sie unter Formatieren > Stil einen Schriftstil aus (Fett,
Kursiv, Unterstrichen usw.).
Verwandte Themen
Seiten mit CSS erstellen auf Seite 132 Neue CSS-Regeln erstellen auf Seite 141
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 247
Inhalt in Seiten einfgen
2 Whlen Sie im Popupmen Stil umbenennen den umzubenennenden Stil aus. 3 Geben Sie unter Neuer Name einen neuen Namen ein und klicken Sie auf OK.
Absatzabstnde hinzufgen
Dreamweaver funktioniert hnlich wie viele Textverarbeitungsprogramme: Durch Drcken der Eingabetaste (Windows) bzw. von Return (Macintosh) erstellen Sie einen neuen Absatz. Webbrowser fgen zwischen Abstzen automatisch eine Leerzeile ein. Eine einzelne Leerzeile knnen Sie hinzufgen, indem Sie einen Zeilenumbruch einfgen.
Zeilenumbruch einfgen
Fhren Sie einen der folgenden Schritte aus:
Drcken Sie Umschalt+Eingabetaste (Windows) bzw. Umschalt+Return (Macintosh). Whlen Sie Einfgen > HTML > Sonderzeichen > Zeilenumbruch. Klicken Sie in der Kategorie Text des Bedienfelds Einfgen auf die Schaltflche Zeichen und whlen Sie das
Symbol Zeilenumbruch aus.
gewnschten Eigenschaften:
Textfeld ID Hier knnen Sie eine ID fr die horizontale Linie angeben. B und H Geben die Breite und Hhe der Linie in Pixel oder als Prozentsatz der Seitengre an. Ausrichten Legt die Ausrichtung der Linie fest (Standard, Links, Zentriert oder Rechts). Diese Einstellung
kann nur gendert werden, wenn die Linie schmaler als das Browserfenster ist.
Schattierung Legt fest, ob die Linie eine Schattierung erhalten soll. Deaktivieren Sie diese Option, wenn die Linie in einer Volltonfarbe erstellt werden soll. Klasse Hier knnen Sie ein Stylesheet anfgen oder eine Klasse aus einem bereits angefgten Stylesheet anwenden.
Schriftkombinationen ndern
Mit dem Befehl Schriftliste bearbeiten knnen Sie die Schriftkombinationen festlegen, die im Eigenschafteninspektor und unter Formatieren > Schrift angezeigt werden.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 248
Inhalt in Seiten einfgen
ber Schriftkombinationen bestimmen Sie, wie der Text einer Webseite in einem Browser dargestellt wird. In Browsern wird der Text in der ersten Schrift der Kombination angezeigt, die auf dem jeweiligen Computer installiert ist. Ist keine der Schriften der Kombination installiert, wird der Text im Browser in der Schrift angezeigt, die in den Voreinstellungen des Browsers angegeben ist.
Schriftkombinationen ndern
1 Whlen Sie Formatieren > Schrift > Schriftliste bearbeiten aus. 2 Whlen Sie in der Schriftliste oben im Dialogfeld die gewnschte Schriftkombination aus.
Die Schriften, die zur ausgewhlten Kombination gehren, sind in der Liste Ausgewhlte Schriften unten links im Dialogfeld aufgefhrt. Die rechte Liste enthlt alle Schriften, die im System installiert sind.
3 Fhren Sie einen der folgenden Schritte aus:
Wenn Sie Schriften einer Schriftkombination hinzufgen bzw. daraus entfernen mchten, klicken Sie auf die
Schaltflche << oder >> zwischen den beiden Listen Ausgewhlte Schriften und Verfgbare Schriften.
Wenn Sie eine Schriftkombination hinzufgen oder entfernen mchten, klicken Sie oben im Dialogfeld auf die
Schaltflche mit dem Pluszeichen (+) bzw. Minuszeichen ().
Wenn Sie eine Schrift hinzufgen mchten, die nicht auf dem Computer installiert ist, geben Sie im Textfeld unter
der Liste Verfgbare Schriften den Namen der Schrift ein und klicken Sie auf die Schaltflche <<, um der Kombination die Schrift hinzuzufgen. Mit dieser Funktion knnen Sie beispielsweise eine Windows-spezifische Schrift angeben, wenn Sie eine Website auf einem Macintosh entwerfen.
Wenn Sie die Schriftkombination in der Liste nach oben oder nach unten verschieben mchten, klicken Sie auf die
Pfeilschaltflchen oben im Dialogfeld.
Wenn Sie eine Schrift hinzufgen mchten, die nicht auf dem Computer installiert ist, geben Sie im Textfeld unter der Liste Verfgbare Schriften den Namen der Schrift ein und klicken Sie auf die Schaltflche <<, um der Kombination die Schrift hinzuzufgen. Mit dieser Funktion knnen Sie beispielsweise eine Windows-spezifische Schrift angeben, wenn Sie eine Website auf einem Macintosh entwerfen.
4 Wenn Sie alle gewnschten Schriften ausgewhlt haben, whlen Sie in der Liste Verfgbare Schriften eine
generische Schriftfamilie aus. Klicken Sie dann auf die Schaltflche <<, um die generische Schriftfamilie in die Liste Ausgewhlte Schriften zu verschieben. Zu den generischen Schriftfamilien gehren Cursive, Fantasy, Monospace, Sans-Serif und Serif. Wenn keine der Schriften in der Liste Ausgewhlte Schriften im System des Benutzers installiert ist, wird der Text in der Standardschrift der jeweiligen generischen Schriftfamilie angezeigt. Beispielsweise ist die Standardschriftart fr Monospace auf den meisten Computern Courier.
Datumsangaben einfgen
Dreamweaver stellt ein praktisches Datumsobjekt zur Verfgung, mit dem das aktuelle Datum in Ihrem bevorzugten Format (mit oder ohne Uhrzeit) eingefgt werden kann. Darber hinaus haben Sie die Mglichkeit, das Datum jedes Mal zu aktualisieren, wenn Sie die Datei speichern.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 249
Inhalt in Seiten einfgen
Hinweis: Das Datum und die Uhrzeit, die im Dialogfeld Datum einfgen angezeigt werden, sind weder aktuell, noch entsprechen sie dem Datum und der Uhrzeit, die Besucher Ihrer Website sehen. Sie sind lediglich Beispiele dafr, wie diese Informationen dargestellt werden.
1 Setzen Sie die Einfgemarke im Dokumentfenster an die Stelle, an der Sie das Datum einfgen mchten. 2 Fhren Sie einen der folgenden Schritte aus:
Whlen Sie Einfgen > Datum. Klicken Sie in der Kategorie Allgemein des Bedienfelds Einfgen auf die Schaltflche Datum.
3 Whlen Sie in dem daraufhin angezeigten Dialogfeld ein Format fr den Wochentag, fr das Datum und fr die
Uhrzeit aus.
4 Wenn das eingefgte Datum jedes Mal aktualisiert werden soll, wenn Sie das Dokument speichern, markieren Sie
die Option Beim Speichern automatisch aktualisieren. Wenn Sie das Datum nach dem Einfgen in reinen Text umwandeln mchten, der nie automatisch aktualisiert wird, deaktivieren Sie diese Option.
5 Klicken Sie auf OK, um das Datum einzufgen.
Wenn Sie Beim Speichern automatisch aktualisieren markiert haben, knnen Sie das Datum nach dem Einfgen in das Dokument bearbeiten, indem Sie auf den formatierten Text klicken und anschlieend im Eigenschafteninspektor Datumsformat bearbeiten whlen.
die Anzeige von Bildern, die keine ineinander verlaufenden Farbtne oder groen Bereiche mit einander sehr hnlichen Farben enthalten (z. B. Navigationsleisten, Schaltflchen, Symbole, Logos oder andere Bilder mit einheitlichen Farben und Farbtnen).
JPEG (Joint Photographic Experts Group) Das JPEG-Dateiformat eignet sich insbesondere fr Fotos und Bilder mit
kontinuierlichen Farbtnen, da JPEG-Dateien Millionen von Farben enthalten knnen. Je hher die Qualitt des JPEG-Bildes ist, desto grer wird die Datei und desto lnger dauert die bertragung. Oft kann durch Komprimieren der JPEG-Datei ein guter Ausgleich zwischen Bildqualitt und Dateigre erzielt werden.
Das PNG-Dateiformat (Portable Network Group) Das PNG-Dateiformat ist eine patentfreie Alternative zu GIFDateien. Es untersttzt Bilder mit indizierten Farben, Graustufen und Echtfarben sowie einen Alphakanal zur Transparenzdarstellung. PNG ist das programmeigene Dateiformat von Adobe Fireworks. In PNG-Dateien bleiben alle ursprnglichen Daten fr Ebenen, Vektoren, Farben und Effekte (wie z. B. Schlagschatten) erhalten und alle Elemente sind stets voll bearbeitbar. Die Dateien mssen die Erweiterung .png haben, damit Dreamweaver sie als PNG-Dateien erkennt.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 250
Inhalt in Seiten einfgen
Bilder einfgen
Wenn Sie ein Bild in ein Dreamweaver-Dokument einfgen, wird im HTML-Quellcode ein Verweis auf die Datei erstellt. Damit dieser Verweis problemlos funktioniert, muss sich die Bilddatei in der aktuellen Site befinden. Falls sich die Datei nicht in der aktuellen Site befindet, fragt Dreamweaver Sie, ob Sie die Datei in die Site kopieren mchten. Sie knnen Bilder auch dynamisch einfgen. Dynamische Bilder ndern sich hufig. So mssen zum Beispiel Rotationssysteme fr Werbebanner einzelne Banner nach dem Zufallsprinzip aus einer Liste potentieller Banner auswhlen und das ausgewhlte Banner dynamisch anzeigen, wenn eine Seite angefordert wird. Nachdem Sie ein Bild eingefgt haben, knnen Sie fr das Bild-Tag Eingabehilfen-Attribute festlegen, die von Bildschirmlesegerten fr sehbehinderte Benutzer gelesen werden knnen. Diese Attribute knnen im HTML-Code bearbeitet werden. Ein Tutorial zum Einfgen von Bildern finden Sie unter www.adobe.com/go/vid0148_de.
1 Setzen Sie die Einfgemarke im Dokumentfenster an die Stelle, an der das Bild erscheinen soll. Fhren Sie
Klicken Sie in der Kategorie Allgemein des Bedienfelds Einfgen auf das Symbol Bilder
Klicken Sie in der Kategorie Allgemein des Bedienfelds Einfgen auf die Schaltflche Bilder und whlen Sie
das Symbol Bild aus. Wenn das Symbol Bild im Bedienfeld Einfgen angezeigt wird, knnen Sie das Symbol in das Dokumentfenster ziehen (bzw. in die Codeansicht, wenn Sie den Code bearbeiten).
Whlen Sie Einfgen > Bild aus. Ziehen Sie ein Bild aus dem Bedienfeld Elemente (Fenster > Elemente) an die gewnschte Stelle im
Dokumentfenster. Fahren Sie dann mit Schritt 3 fort.
Ziehen Sie ein Bild aus dem Bedienfeld Dateien an die gewnschte Stelle im Dokumentfenster. Fahren Sie dann
mit Schritt 3 fort.
Ziehen Sie ein Bild vom Desktop an die gewnschte Stelle im Dokumentfenster. Fahren Sie dann mit Schritt 3 fort.
2 Fhren Sie im daraufhin erscheinenden Dialogfeld einen der folgenden Schritte aus:
Whlen Sie Dateisystem, um eine Bilddatei auszuwhlen. Whlen Sie Datenquellen, um eine dynamische Bildquelle auszuwhlen. Klicken Sie auf die Schaltflche Sites und Server, um in einem Remote-Ordner einer Ihrer Dreamweaver-Sites
eine Bilddatei zu whlen.
3 Whlen Sie in der Verzeichnisstruktur das Bild oder die Bildquelle aus, das bzw. die Sie einfgen mchten.
Wenn Sie in einem nicht gespeicherten Dokument arbeiten, erstellt Dreamweaver den Verweis file:// auf die Bilddatei. Wenn Sie das Dokument in einem beliebigen Ordner in der Site speichern, wandelt Dreamweaver diesen Verweis in einen dokumentrelativen Pfad um. Hinweis: Beim Einfgen von Bildern knnen Sie auch absolute Pfade zu Bildern auf Remote-Servern verwenden (d. h. zu Bildern, die sich nicht auf der lokalen Festplatte befinden). Wenn Sie bei der Arbeit jedoch Leistungsprobleme feststellen, empfiehlt es sich unter Umstnden, die Anzeige der Bilder in der Entwurfsansicht zu deaktivieren, indem Sie die Auswahl von Befehle > Externe Dateien anzeigen aufheben.
4 Klicken Sie auf OK. Das Dialogfeld Eingabehilfen-Attribute fr Image-Tag wird eingeblendet, sofern Sie das
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 251
Inhalt in Seiten einfgen
5 Geben Sie Werte in die Textfelder Alternativtext und Lange Beschreibung ein und klicken Sie anschlieend auf
OK.
Geben Sie im Textfeld Alternativer Text einen Namen oder eine kurze Beschreibung fr das Bild ein. Die
Informationen, die Sie hier eingeben, werden spter vom Bildschirmlesegert vorgelesen. Diese Informationen sollten nicht lnger als etwa 50 Zeichen sein. Fr lngere Beschreibungen knnen Sie im Textfeld Lange Beschreibung einen Hyperlink auf eine Datei angeben, die nhere Informationen ber das Bild enthlt.
Geben Sie im Feld Lange Beschreibung den Speicherort einer Datei ein, die angezeigt werden soll, wenn der
Benutzer auf das Bild klickt. Sie knnen auch auf das Ordnersymbol klicken und die Datei aus der Verzeichnisstruktur auswhlen. Dieses Feld enthlt einen Hyperlink auf eine Datei, die sich auf das Bild bezieht oder nhere Informationen darber bietet. Hinweis: Je nach Bedarf knnen Sie in nur einem der Textfelder Text eingeben oder in beiden Textfeldern. Das Bildschirmlesegert liest dann das alt-Attribut des Bildes. Hinweis: Wenn Sie auf Abbrechen klicken, wird das Bild in das Dokument eingefgt, ohne jedoch von Dreamweaver mit Eingabehilfen-Tags oder -Attributen versehen zu werden.
6 Legen Sie im Eigenschafteninspektor (Fenster > Eigenschaften) die gewnschten Eigenschaften des Bildes fest.
Verwandte Themen
Bilder dynamisch gestalten auf Seite 616 Imagemaps auf Seite 301 Arbeitsbereich fr barrierefreies Seitenlayout optimieren auf Seite 733 Seiteneigenschaften festlegen auf Seite 222 Bilder-Tutorial einfgen
Bildeigenschaften festlegen
Mit dem Eigenschafteninspektor fr Bilder knnen Sie die Eigenschaften eines Bildes festlegen. Wenn nicht alle Bildeigenschaften angezeigt werden, klicken Sie unten rechts auf den Erweiterungspfeil.
1 Whlen Sie Fenster > Eigenschaften, um den Eigenschafteninspektor fr ein ausgewhltes Bild anzuzeigen. 2 Geben Sie in das Textfeld unterhalb des Piktogramms einen Namen ein, damit Sie sich auf das Bild beziehen
knnen, wenn Sie ein Dreamweaver-Verhalten (beispielsweise Bild vertauschen) oder eine Skriptsprache wie JavaScript oder VBScript verwenden.
3 Stellen Sie die gewnschten Bildoptionen ein.
B und H Legen die Breite und Hhe des Bildes in Pixel fest. Dreamweaver aktualisiert diese Felder automatisch und gibt darin die ursprnglichen Mae an, wenn Sie ein Bild in eine Seite einfgen.
Wenn Sie fr B und H Werte festlegen, die nicht der tatschlichen Breite und Hhe des Bildes entsprechen, wird das Bild unter Umstnden nicht korrekt im Browser angezeigt. (Um die ursprnglichen Werte wiederherzustellen,
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 252
Inhalt in Seiten einfgen
klicken Sie auf die Feldbeschriftungen B und H oder rechts neben den Textfeldern B und H auf die Schaltflche Gre zurcksetzen.) Hinweis: Sie knnen die Breite und Hhe ndern, um die Gre des jeweiligen Bildes zu skalieren. Dies hat jedoch keine Auswirkungen auf die Downloadzeit, da der Browser zunchst alle Bilddaten herunterldt und erst dann das Bild skaliert. Wenn Sie die Downloadzeit verkrzen und sicherstellen mchten, dass alle Instanzen eines Bildes dieselbe Gre haben, skalieren Sie die Bilder mit einem Bildbearbeitungsprogramm.
Quelle Gibt die Quelldatei des Bildes an. Klicken Sie auf das Ordnersymbol, um die Quelldatei auszuwhlen, oder
wenn im Browser festgelegt wurde, dass Bilder manuell heruntergeladen werden sollen. Fr Benutzer mit Sehschwierigkeiten, die reine Textbrowser zusammen mit Sprach-Synthesizern verwenden, wird der Text laut vorgelesen. Bei einigen Browsern wird dieser Text auch angezeigt, wenn der Zeiger sich ber dem Bild befindet.
Map und Hotspot-Tools Damit knnen Sie eine clientseitige Imagemap beschriften und erstellen. V-Abstand und H-Abstand Fgen an den Kanten des Bildes Leerrume ein (in Pixel angegeben). V-Abstand fgt
einen Leerraum am oberen und unteren Bildrand hinzu. H-Abstand fgt einen Leerraum am linken und rechten Bildrand hinzu.
Ziel Gibt den Frame oder das Fenster an, in dem die verknpfte Seite geladen werden soll. (Diese Option ist nur
verfgbar, wenn das Bild mit einer anderen Datei verknpft ist.) Alle Frames im aktuellen Dokument werden namentlich in der Liste Ziel aufgefhrt. Sie knnen auch einen der folgenden reservierten Zielnamen auswhlen:
_blank ldt die verknpfte Datei in ein neues, unbenanntes Browserfenster. _parent ldt die verknpfte Datei in das bergeordnete Frameset oder Fenster des Frames, in dem der Hyperlink
enthalten ist. Wenn der Frame, der den Hyperlink enthlt, nicht verschachtelt ist, wird die verknpfte Datei in das ganze Browserfenster geladen.
_self ldt die verknpfte Datei in denselben Frame oder dasselbe Fenster wie den Hyperlink. Dies ist das
Rahmen Gibt die Breite des Bildrahmens in Pixel an. Standardmig wird kein Rahmen verwendet. Bearbeiten Startet den Bildeditor, den Sie in den Voreinstellungen fr externe Editoren gewhlt haben, und ffnet das
ausgewhlte Bild.
Bildeinstellungen bearbeiten Zuschneiden
ffnet das Dialogfeld Bildvorschau und ermglicht das Optimieren des Bildes.
Dient zum Zuschneiden der Bildgre, wobei unerwnschte Bereiche aus dem ausgewhlten Bild
entfernt werden.
Neu auflsen
Ermglicht es Ihnen, ein in der Gre gendertes Bild neu aufzulsen, wobei dessen Qualitt in der neuen Gre und Form verbessert wird. ndert die Helligkeits- und Kontrasteinstellungen eines Bildes.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 253
Inhalt in Seiten einfgen
Gre zurcksetzen
Setzt die Werte unter B und H auf die ursprnglichen Bildmae zurck. Dieses Symbol wird neben den Feldern B und H angezeigt, wenn Sie die Werte des ausgewhlten Bilds einstellen.
Bearbeiten Sie die jeweiligen Bildattribute in der Codeansicht. Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste (Macintosh) und whlen Sie dann
Tag bearbeiten.
Bilder ausrichten
Sie knnen ein Bild an Text, an einem anderen Bild, einem Plug-In oder an anderen Elementen in derselben Zeile ausrichten. Auerdem knnen Sie die horizontale Ausrichtung eines Bildes festlegen.
1 Whlen Sie das Bild in der Entwurfsansicht aus. 2 Legen Sie die Ausrichtungsattribute des Bildes im Eigenschafteninspektor anhand des Popupmens Ausrichten fest.
Sie knnen die Ausrichtung eines Bildes relativ zu anderen Elementen in derselben Zeile oder demselben Absatz festlegen. Hinweis: Mit HTML-Code ist es nicht mglich, Text um die Konturen eines Bildes flieen zu lassen, wie dies bei einigen Textverarbeitungsprogrammen mglich ist. Folgende Ausrichtungsoptionen stehen zur Auswahl:
Standard Gibt eine Ausrichtung an der Grundlinie vor. (Der Standard kann variieren, je nachdem, welchen Browser
Zeile aus.
Mitte Richtet die Bildmitte an der Grundlinie der aktuellen Zeile aus. Oberlnge Richtet die Oberkante des Bildes an der Oberkante des hchsten Zeichens in der Textzeile aus. Absolute Mitte Richtet die Bildmitte an der Mitte des Textes in der aktuellen Zeile aus. Absolut unten Richtet die Unterkante des Bildes an der Unterkante der Textzeile aus (wobei auch Unterlngen wie
linksbndiger Text steht, bewirkt diese Option normalerweise, dass links ausgerichtete Objekte in einer neuen Zeile erscheinen.
Rechts Platziert das Bild am rechten Rand und der Text fliet links um das Bild. Wenn vor dem Objekt rechtsbndiger Text steht, bewirkt diese Option normalerweise, dass rechts ausgerichtete Objekte in einer neuen Zeile erscheinen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 254
Inhalt in Seiten einfgen
Verwandte Themen
Bilder in Dreamweaver bearbeiten auf Seite 257
An der unteren und der rechten Seite sowie in der unteren rechten Ecke des Elements werden Ziehgriffe angezeigt, mit denen Sie die Gre des Elements ndern knnen. Werden keine Grennderungsgriffe angezeigt, klicken Sie neben das Element, dessen Gre Sie ndern mchten, und whlen Sie es dann erneut aus. Alternativ dazu knnen Sie im Tag-Selektor auf das entsprechende Tag klicken, um das Element auszuwhlen.
2 ndern Sie die Gre des Elements mit einer der folgenden Methoden:
Ziehen Sie den Griff an der rechten Seite, um die Breite des Elements zu ndern. Ziehen Sie den Griff an der unteren Seite, um die Hhe des Elements zu ndern. Ziehen Sie den Griff an der Ecke, um Hhe und Breite des Elements gleichzeitig zu ndern. Halten Sie die Umschalttaste gedrckt und ziehen Sie den Griff an der Ecke, um das Verhltnis zwischen Breite und
Hhe beizubehalten, whrend Sie die Gre des Elements ndern.
Mchten Sie die Breite und Hhe auf eine bestimmte Gre einstellen (z. B. 1 x 1 Pixel), geben Sie dazu im Eigenschafteninspektor einen numerischen Wert ein. Elemente knnen visuell auf eine Mindestgre von 8 x 8 Pixel verkleinert werden. Eigenschafteninspektor die Werte in den Feldern B und H oder klicken Sie auf die Schaltflche Gre zurcksetzen.
3 Wenn Sie die Originalmae eines in der Gre genderten Elements wiederherstellen mchten, lschen Sie im
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 255
Inhalt in Seiten einfgen
Hinweis: Bildplatzhalter und andere Elemente mit Ausnahme von Bitmapbildern knnen nicht neu aufgelst werden.
Bild-Platzhalter einfgen
Ein Bild-Platzhalter ist eine Grafik, die Sie vorbergehend einsetzen, bis die endgltigen Grafiken fr die Webseite bereitstehen. Sie knnen Gre und Farbe des Platzhalters bestimmen und ihn mit einer Beschriftung versehen.
1 Setzen Sie die Einfgemarke im Dokumentfenster an die Stelle, an der Sie eine Platzhaltergrafik einfgen mchten. 2 Whlen Sie Einfgen > Grafikobjekte > Bild-Platzhalter aus. 3 Optional: Geben Sie unter Name den Text ein, der als Beschriftung des Bild-Platzhalters dienen soll. Wenn Sie
keine Beschriftung wnschen, lassen Sie das Feld einfach leer. Der Name muss mit einem Buchstaben beginnen und darf nur Buchstaben und Ziffern enthalten. Leerzeichen und ASCII-Sonderzeichen sind nicht zulssig.
4 Erforderlich: Geben Sie in die Felder Breite und Hhe Maangaben fr das Bild in Pixel ein. 5 Optional: Fhren Sie unter Farbe einen der folgenden Schritte aus, um eine Farbe anzuwenden:
Whlen Sie im Farbwhler eine Farbe aus. Geben Sie den Hexadezimalwert fr die gewnschte Farbe ein (z. B. #FF0000). Geben Sie einen websicheren Farbnamen ein (z. B. red).
6 Optional: Geben Sie unter Alternativtext eine Beschreibung des Bildes fr Benutzer an, die einen reinen
Textbrowser verwenden. Hinweis: Im HTML-Code wird dabei automatisch ein Bild-Tag mit dem undefinierten Attribut src eingefgt.
7 Klicken Sie auf OK.
Die Farbe, die Grenattribute und die Beschriftung eines Platzhalters werden folgendermaen angezeigt:
In einem Browserfenster sind die Beschriftung und die Grenangaben nicht sichtbar.
Verwandte Themen
Gre von Bildern visuell ndern auf Seite 254 Fireworks zum ndern von Dreamweaver-Bildplatzhaltern verwenden auf Seite 388
Bild-Platzhalter ersetzen
Ein Bild-Platzhalter ist kein Bild, das in einem Browser angezeigt wird. Bevor Sie eine Site verffentlichen, sollten Sie alle verwendeten Bild-Platzhalter durch browserkompatible Bilddateien wie GIF- oder JPEG-Bilder ersetzen. Wenn Sie ber Fireworks verfgen, knnen Sie direkt aus dem Dreamweaver-Bild-Platzhalter heraus eine neue Grafik erstellen. Das neue Bild erhlt dabei dieselben Mae wie der Platzhalter. Sie knnen das Bild in einem Bildeditor bearbeiten und dann wieder in Dreamweaver einfgen.
1 Fhren Sie im Dokumentfenster einen der folgenden Schritte aus:
Doppelklicken Sie auf den Bild-Platzhalter. Klicken Sie auf den Bild-Platzhalter, um ihn auszuwhlen, und klicken Sie dann im Eigenschafteninspektor
(Fenster > Eigenschaften) auf das Ordnersymbol neben Quelle.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 256
Inhalt in Seiten einfgen
2 Whlen Sie im Dialogfeld Bildquelle das Bild aus, durch das Sie den Bild-Platzhalter ersetzen mchten, und
Verwandte Themen
Fireworks zum ndern von Dreamweaver-Bildplatzhaltern verwenden auf Seite 388
Im Eigenschafteninspektor fr Platzhalter sind das graue Textfeld und das Textfeld Ausrichten deaktiviert. Sie knnen diese Eigenschaften im Eigenschafteninspektor fr Bilder festlegen, wenn Sie den Platzhalter durch ein Bild ersetzen.
Whlen Sie eine der folgenden Optionen: B und H Legen die Breite und Hhe des Bild-Platzhalters in Pixel fest. Quelle Gibt die Quelldatei des Bildes an. Bei Bild-Platzhaltern ist dieses Feld leer. Klicken Sie auf Durchsuchen, um
wenn im Browser festgelegt wurde, dass Bilder manuell heruntergeladen werden sollen. Fr Benutzer mit Sehschwierigkeiten, die reine Textbrowser zusammen mit Sprach-Synthesizern verwenden, wird der Text laut vorgelesen. Bei einigen Browsern wird dieser Text auch angezeigt, wenn der Zeiger sich ber dem Bild befindet.
Erstellen Dient zum Starten von Fireworks, um ein Ersatzbild zu erstellen. Die Schaltflche Erstellen ist nur dann
Verwandte Themen
Fireworks zum ndern von Dreamweaver-Bildplatzhaltern verwenden auf Seite 388
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 257
Inhalt in Seiten einfgen
Bildbearbeitungsfunktionen
Dreamweaver enthlt allgemeine Bildbearbeitungsfunktionen, mit denen Sie Bilder ndern knnen, ohne eine externe Bildbearbeitungsanwendung wie Fireworks oder Photoshop verwenden zu mssen. Die Bildbearbeitungsfunktionen von Dreamweaver sind so ausgelegt, dass Sie ohne Probleme mit Inhaltsdesignern zusammenarbeiten knnen, um Bilddateien fr Websites zu erstellen. Hinweis: Sie knnen die Bildbearbeitungsfunktionen von Dreamweaver auch verwenden, wenn Fireworks oder andere Bildbearbeitungsanwendungen nicht auf Ihrem Computer installiert sind.
Whlen Sie Modifizieren > Bild aus. Sie knnen beliebige dieser Dreamweaver-Bildbearbeitungsfunktionen
auswhlen:
Neu auflsen Fgt einer in der Gre genderten JPEG- oder GIF-Bilddatei Pixel hinzu bzw. entfernt Pixel, um das
Erscheinungsbild des Originals weitgehend zu reproduzieren. Die Neuauflsung eines Bildes fhrt zu einer kleineren Dateigre und einer krzeren Downloadzeit. Wenn Sie die Gre eines Bildes in Dreamweaver ndern, knnen Sie es neu auflsen, um seinen neuen Maen Rechnung zu tragen. Wenn ein Bitmapobjekt neu aufgelst wird, werden Pixel dem Bild hinzugefgt oder daraus entfernt, um es grer oder kleiner zu machen. Die Neuauflsung eines Bildes in eine hhere Auflsung geht im Allgemeinen mit geringen Qualittsverlusten einher. Bei einer Neuberechnung in eine niedrigere Auflsung gehen jedoch immer Daten verloren und dies fhrt in der Regel zu Qualittseinbuen.
Zuschneiden Ermglicht Ihnen das Bearbeiten des Bildes durch Reduzieren des Bildbereichs. Im Allgemeinen wird ein Bild zugeschnitten, um das Motiv mehr in den Mittelpunkt zu stellen und unerwnschte Bereiche zu entfernen, von denen das zentrale Motiv im Bild umgeben ist. Helligkeit und Kontrast ndert den Kontrast oder die Helligkeit der Pixel eines Bildes. Dies wirkt sich auf die Lichter,
Tiefen und Mitteltne eines Bildes aus. Normalerweise wird die Option Helligkeit/Kontrast zur Korrektur von zu dunklen oder zu hellen Bildern verwendet.
Scharf stellen Stellt den Fokus eines Bildes ein, indem der Kontrast der im Bild gefundenen Kanten erhht wird. Wenn Sie ein Bild scannen oder eine Aufnahme mit einer Digitalkamera machen, werden die Objektkanten im Bild von den meisten Bilderfassungsprogrammen standardmig weichgezeichnet. Auf diese Weise wird verhindert, dass extrem feine Details in den Pixeln verloren gehen, aus denen Digitalbilder bestehen. Um jedoch die Details in einem Digitalbild herauszuarbeiten, ist es oftmals erforderlich, das Bild scharf zu zeichnen. Dabei wird der Kantenkontrast erhht und das Bild wirkt schrfer.
Hinweis: Die Bildbearbeitungsfunktionen von Dreamweaver knnen nur auf JPEG- und GIF-Bilder angewendet werden. Andere Bitmap-Bilddateiformate knnen mit diesen Bildbearbeitungsfunktionen nicht bearbeitet werden.
Bilder zuschneiden
In Dreamweaver knnen Sie Bitmapdateibilder zuschneiden. Hinweis: Beim Zuschneiden eines Bildes wird die Quellbilddatei auf der Festplatte gendert. Aus diesem Grund sollten Sie eine Sicherungskopie der Bilddatei fr den Fall anlegen, dass Sie das Originalbild wiederherstellen mssen.
1 ffnen Sie die Seite, die das zuzuschneidende Bild enthlt, whlen Sie es aus und fhren Sie einen der folgenden
Schritte aus:
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 258
Inhalt in Seiten einfgen
beibehalten mchten.
3 Doppelklicken Sie in den Begrenzungsrahmen oder drcken Sie die Eingabetaste, um die Auswahl zuzuschneiden. 4 Ein Dialogfeld informiert Sie darber, dass die zuzuschneidende Bilddatei auf der Festplatte gendert wird. Klicken
Sie auf OK. Smtliche Pixel des ausgewhlten Bitmaps, die auerhalb des Begrenzungsrahmens liegen, werden entfernt, aber die anderen Objekte im Bild bleiben erhalten.
5 berprfen Sie in der Vorschau, ob das Bild Ihren Erwartungen entspricht. Whlen Sie Bearbeiten >
Rckgngig Zuschneiden, um das Originalbild wiederherzustellen. Hinweis: Sie knnen die Auswirkungen des Befehls Zuschneiden so lange rckgngig machen (und die Originalbilddatei wiederherstellen), bis Sie Dreamweaver beenden oder die Datei in einem externen Bildbearbeitungsprogramm bearbeiten.
Bilder optimieren
Sie knnen Bilder in Ihren Webseiten in Dreamweaver optimieren.
1 ffnen Sie die Seite, die das zu optimierende Bild enthlt, whlen Sie es aus und fhren Sie einen der folgenden
Schritte aus:
Klicken Sie im Eigenschafteninspektor des Bildes auf die Schaltflche Bildeinstellungen im Vorschaufenster
bearbeiten .
Schritte aus:
Klicken Sie im Eigenschafteninspektor fr Bilder auf die Schaltflche Scharf stellen Whlen Sie Modifizieren > Bild > Scharf stellen.
2 Sie knnen den Schrfegrad bestimmen, den Dreamweaver auf das Bild anwendet. Bettigen Sie hierzu den
Schieberegler oder geben Sie im Textfeld einen Wert zwischen 0 und 10 ein. Whrend Sie die Schrfe des Bildes im Dialogfeld Scharf stellen einstellen, knnen Sie die nderungen am Bild in einer Vorschau betrachten.
3 Klicken Sie auf OK, wenn Sie mit dem Ergebnis zufrieden sind. 4 Speichern Sie die nderungen mit Datei > Speichern oder stellen Sie das Originalbild wieder her, indem Sie
Bearbeiten > Rckgngig Scharf stellen whlen. Hinweis: Nach dem Speichern der Seite mit dem Bild knnen Sie die Auswirkungen des Befehls Scharf stellen nicht mehr rckgngig machen (und das Originalbild wiederherstellen). Wenn Sie die Seite speichern, werden die am Bild vorgenommenen nderungen unwiderruflich gespeichert.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 259
Inhalt in Seiten einfgen
Schritte aus:
Klicken Sie im Eigenschafteninspektor fr Bilder auf die Schaltflche Helligkeit/Kontrast Whlen Sie Modifizieren > Bild > Helligkeit/Kontrast.
2 Ziehen Sie an den Schiebereglern fr Helligkeit und Kontrast, um die Einstellungen anzupassen. Die gltigen
Rollover-Bilder erstellen
Sie knnen Rollover-Bilder in eine Seite einfgen. Ein Rollover ist ein Bild, das sich im Browser ndert, wenn Sie den Mauszeiger darber bewegen. Sie bentigen zwei Bilder, um ein Rollover zu erstellen: das primre Bild (wird angezeigt, wenn die Seite geladen wird) und das sekundre Bild (wird angezeigt, wenn der Mauszeiger ber das primre Bild bewegt wird). Die beiden Bilder eines Rollovers mssen dieselbe Gre haben. Ist dies nicht der Fall, passt Dreamweaver die Gre des zweiten Bildes an die Gre des ersten Bildes an. Rollover-Bilder werden automatisch so eingerichtet, dass sie auf das onMouseOver-Ereignis reagieren. Sie knnen ein Bild auch so konfigurieren, dass es auf andere Ereignisse (beispielsweise einen Mausklick) reagiert, sowie ein RolloverBild austauschen. Ein Tutorial zum Erstellen von Rollovers finden Sie unter www.adobe.com/go/vid0159_de.
1 Setzen Sie die Einfgemarke im Dokumentfenster an die Stelle, an der Sie das Rollover einfgen mchten. 2 Fgen Sie das Rollover mit einer der folgenden Methoden ein:
Klicken Sie in der Kategorie Allgemein des Bedienfelds Einfgen auf die Schaltflche Bilder und whlen Sie
das Symbol Rollover-Bild aus. Wenn das Symbol Rollover-Bild im Bedienfeld Einfgen angezeigt wird, knnen Sie es direkt in das Dokumentfenster ziehen.
klicken Sie auf Durchsuchen und whlen Sie das Bild aus.
Rollover-Bild Das Bild, das angezeigt werden soll, wenn der Zeiger ber das Originalbild bewegt wird. Geben Sie den
Pfad ein oder klicken Sie auf Durchsuchen, um das Bild auszuwhlen.
Rollover-Bild vorausladen Ldt die Bilder vorab in den Cache des Browsers, sodass es nicht zu Verzgerungen
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 260
Inhalt in Seiten einfgen
Hinweis: Wenn Sie keinen Hyperlink fr das Bild festlegen, fgt Dreamweaver einen Null-Hyperlink (#) in den HTMLQuellcode ein, mit dem das Rollover-Verhalten verknpft wird. Wenn Sie den Null-Hyperlink entfernen, funktioniert das Rollover-Bild nicht mehr.
4 Whlen Sie Datei > Vorschau in Browser oder drcken Sie F12. 5 Bewegen Sie den Zeiger im Browser ber das Originalbild, um das Rollover-Bild anzuzeigen.
Hinweis: Die Wirkung eines Rollover-Bildes ist in der Entwurfsansicht nicht sichtbar.
Verwandte Themen
Verhalten Bild austauschen definieren auf Seite 382 Rollover-Tutorial
Verwandte Themen
Photoshop und Dreamweaver verwenden auf Seite 392 Fireworks und Dreamweaver verwenden auf Seite 386 Externe Editoren fr Multimedia-Dateien starten auf Seite 275
Doppelklicken Sie auf das Bild, das Sie bearbeiten mchten. Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste (Macintosh) auf das zu
bearbeitende Bild. Whlen Sie dann Bearbeiten mit > Durchsuchen und whlen Sie einen Editor aus.
Whlen Sie das zu bearbeitende Bild aus und klicken Sie im Eigenschafteninspektor auf Bearbeiten. Doppelklicken Sie im Bedienfeld Dateien auf die Bilddatei, um den primren Bildeditor zu starten. Wenn Sie
keinen Bildeditor angegeben haben, startet Dreamweaver den Standardeditor fr den Dateityp. Hinweis: Wenn Sie ein Bild vom Bedienfeld Dateien aus ffnen, sind die oben beschriebenen FireworksIntegrationsfunktionen nicht aktiv. Fireworks ffnet nicht die ursprngliche PNG-Datei. Um die FireworksIntegrationsfunktionen zu nutzen, mssen Sie Bilder vom Dokumentfenster aus ffnen. Wenn das aktualisierte Bild nach der Rckkehr zum Dreamweaver-Fenster nicht angezeigt wird, whlen Sie das Bild aus und klicken Sie im Eigenschafteninspektor auf die Schaltflche Aktualisieren.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 261
Inhalt in Seiten einfgen
Voreinstellungen zu ffnen:
Whlen Sie Bearbeiten > Voreinstellungen bzw. Dreamweaver > Voreinstellungen (Macintosh) und
klicken Sie links auf die Kategorie Dateitypen/Editoren.
Whlen Sie Bearbeiten > Bearbeiten mit externem Editor und whlen Sie Dateitypen/Editoren aus.
2 Whlen Sie in der Liste Erweiterungen die Dateierweiterung aus, fr die Sie einen externen Editor festlegen
mchten.
3 Klicken Sie auf die Schaltflche Hinzufgen (+) ber der Liste Editoren. 4 Navigieren Sie im Dialogfeld Externen Editor auswhlen zu der Anwendung, die Sie als Editor fr diesen
Dreamweaver verwendet automatisch den primren Editor, wenn Sie diesen Bildtyp bearbeiten. Die anderen aufgefhrten Editoren knnen Sie im Kontextmen fr das Bild im Dokumentfenster whlen.
Voreinstellungen zu ffnen:
Whlen Sie Bearbeiten > Voreinstellungen bzw. Dreamweaver > Voreinstellungen (Macintosh) und
klicken Sie links auf die Kategorie Dateitypen/Editoren.
Whlen Sie Bearbeiten > Bearbeiten mit externem Editor und whlen Sie Dateitypen/Editoren aus.
2 Klicken Sie im Dialogfeld Voreinstellungen in der Kategorie Dateitypen/Editoren auf die Schaltflche
Hinzufgen (+) oberhalb der Liste Erweiterungen. In der Liste Erweiterungen wird ein Textfeld angezeigt.
3 Geben Sie die Dateinamenerweiterung fr den Dateityp ein, bei dem ein Editor gestartet werden soll. 4 Um einen externen Editor fr den Dateityp anzugeben, klicken Sie auf die Schaltflche Hinzufgen (+) oberhalb
werden soll.
6 Klicken Sie auf Zu primrem Editor machen, wenn dieser Editor der primre Editor fr diesen Bildtyp sein soll.
Voreinstellungen zu ffnen:
Whlen Sie Bearbeiten > Voreinstellungen bzw. Dreamweaver > Voreinstellungen (Macintosh) und
klicken Sie links auf die Kategorie Dateitypen/Editoren.
Whlen Sie Bearbeiten > Bearbeiten mit externem Editor und whlen Sie Dateitypen/Editoren aus.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 262
Inhalt in Seiten einfgen
den zu ndernden Dateityp aus, um den bzw. die vorhandenen Editor(en) anzuzeigen.
3 Whlen Sie in der Liste Editoren den Editor aus, auf den sich die nderung beziehen soll, und fhren Sie dann
Verwenden Sie die Schaltflche Hinzufgen (+) oder Entfernen () ber der Liste Editoren, um einen Editor
hinzuzufgen oder zu entfernen.
Klicken Sie auf die Schaltflche Zu primrem Editor machen, um einen neuen Editor festzulegen, der
standardmig zum Bearbeiten gestartet wird.
mithilfe von Verhalten, AP-Elementen oder JavaScript ausgetauscht werden). Damit werden durch das Herunterladen verursachte Verzgerungen verhindert, wenn die Bilder angezeigt werden sollen.
Bild austauschen Ersetzt ein Bild durch ein anderes, indem das SRC-Attribut des img-Tags gendert wird. Verwenden
Sie diese Aktion, um Schaltflchen-Rollover und sonstige Bildeffekte zu erstellen. (Sie knnen damit auch mehrere Bilder gleichzeitig austauschen.)
Bildaustausch wiederherstellen Stellt fr die letzte Gruppe von vertauschten Bildern die vorherigen Quelldateien
wieder her. Diese Aktion wird immer automatisch angefgt, wenn Sie die Aktion Bild austauschen an ein Objekt anfgen. Daher mssen Sie diese Aktion in der Regel nicht manuell auswhlen. Mithilfe von Verhalten knnen Sie auch anspruchsvollere Navigationssysteme (z. B. Sprungmens) erstellen.
Verwandte Themen
Sprungmens einfgen auf Seite 300 Verhalten Bild austauschen definieren auf Seite 382 Verhalten Bilder vorausladen definieren auf Seite 379
SWF-Dateien einfgen
FLA-, SWF- und FLV-Dateitypen
Vor dem Einfgen der mit Adobe Flash erstellten Inhalte mithilfe von Dreamweaver sollten Sie sich mit den folgenden Dateitypen vertraut machen.
FLA-Datei (.fla) Dies ist die Quelldatei fr alle Projekte. Sie wird im Flash-Authoring-Tool erstellt. Dieser Dateityp kann nur in Flash geffnet werden (nicht in Dreamweaver oder in Browsern). Sie knnen die FLA-Datei in Flash ffnen und als SWF- oder SWT-Datei verffentlichen, um sie in Browsern verwenden zu knnen. SWF-Datei (.swf) Dies ist eine komprimierte Version der FLA-Datei (.fla), die fr die Anzeige im Web optimiert
wurde. Diese Datei kann in Browsern wiedergegeben und in der Vorschau von Dreamweaver angezeigt, jedoch nicht in Flash bearbeitet werden.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 263
Inhalt in Seiten einfgen
FLV-Datei (.flv) Dies ist eine Videodatei, die kodierte Audio- und Videodaten fr die Wiedergabe ber Flash Player enthlt. QuickTime- oder Windows Media-Videodateien knnen beispielsweise mit einem Kodierprogramm (z. B. Flash CS4 Video Encoder oder Sorensen Squeeze) in FLV-Dateien umgewandelt werden. Weitere Informationen finden Sie im Video Technology Center unter www.adobe.com/go/flv_devcenter_de.
Verwandte Themen
Flash und Dreamweaver verwenden auf Seite 403 FLV-Dateien einfgen auf Seite 266
Verwandte Themen
Flash und Dreamweaver verwenden auf Seite 403 Bearbeiten einer SWF-Datei aus Dreamweaver in Flash auf Seite 403 SWF-Dateien und DHTML-Ebenen Shockwave-Filme einfgen auf Seite 277 FLV-Dateien einfgen auf Seite 266 Mit Flash-Tutorials arbeiten
SWF-Dateien einfgen
1 Setzen Sie die Einfgemarke in der Entwurfsansicht des Dokumentfensters an die Stelle, an der Sie den Inhalt
einfgen mchten. Fhren Sie anschlieend einen der folgenden Schritte aus:
Whlen Sie in der Kategorie Allgemein des Bedienfelds Einfgen die Option Medien aus und klicken Sie auf
das Symbol SWF .
Der Platzhalter wird mit blauer Kontur und einem Register angezeigt. Auf dem Register sind der Elementtyp (SWFDatei) und die ID der SWF-Datei angegeben. Darber hinaus wird auf dem Register ein Symbol mit einem Auge angezeigt. ber dieses Symbol kann zwischen der SWF-Datei und den Downloadinformationen gewechselt werden, die Benutzern angezeigt werden, wenn sie nicht die korrekte Version von Flash Player verwenden.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 264
Inhalt in Seiten einfgen
Daraufhin wird eine Meldung darber angezeigt, dass die beiden abhngigen Dateien expressInstall.swf und swfobject_modified.js im Ordner Scripts Ihrer Site gespeichert werden. Denken Sie daran, dass auch diese Dateien hochgeladen werden mssen, wenn Sie die SWF-Datei auf Ihren Webserver hochladen. Die SWF-Datei kann in Browsern nur korrekt angezeigt werden, wenn auch diese abhngigen Dateien hochgeladen wurden. Hinweis: Microsoft Internet Information Server (IIS) verarbeitet keine verschachtelten object-Tags. Fr ASP-Seiten verwendet Dreamweaver beim Einfgen von SWF- oder FLV-Dateien verschachtelten object/embed-Code anstelle von verschachteltem object-Code.
Sie knnen auch Strg+] drcken, um zur Anzeige des alternativen Inhalts zu wechseln. Um zur Ansicht der SWF- oder FLV-Datei zurckzukehren, drcken Sie Strg+[, bis der gesamte alternative Inhalt ausgewhlt ist. Drcken Sie dann erneut Strg+[.
3 Sie knnen den Inhalt wie jeden anderen Inhalt in Dreamweaver bearbeiten.
Hinweis: Sie knnen keine SWF- oder FLV-Dateien als alternativen Inhalt einfgen.
4 Klicken Sie erneut auf das Symbol mit dem Auge, um in die Ansicht der SWF- oder FLV-Datei zurckzukehren.
auf Stopp, um die Vorschau zu beenden. Sie knnen eine Vorschau der SWF-Datei auch in einem Browser anzeigen, indem Sie die Taste F12 drcken. Um eine Vorschau aller SWF-Dateien einer Seite anzuzeigen, drcken Sie Strg+Alt+Umschalt+P (Windows) bzw. Befehl+Wahl+Umschalt+P (Macintosh). Alle SWF-Dateien werden in den Wiedergabemodus versetzt.
Eigenschafteninspektor (Fenster > Eigenschaften) fest. Um alle Eigenschaften anzuzeigen, klicken Sie auf den Erweiterungspfeil in der unteren rechten Ecke des Eigenschafteninspektors.
ID Gibt eine eindeutige ID fr die SWF-Datei an. Geben Sie im unbeschrifteten Textfeld ganz links im
Eigenschafteninspektor eine ID ein. Ab Dreamweaver CS4 ist eine eindeutige ID zwingend erforderlich.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 265
Inhalt in Seiten einfgen
B und H Legen die Breite und Hhe des Filmes in Pixel fest. Datei Gibt den Pfad zur SWF- oder Shockwave-Datei an. Klicken Sie auf das Ordnersymbol, um die Datei
installiert sind. Um eine SWF-Datei zu bearbeiten, aktualisieren Sie das Quelldokument des Films.
Hg Legt eine Hintergrundfarbe fr den Filmbereich fest. Diese Farbe wird auch angezeigt, wenn der Film nicht
Option ist deaktiviert, wenn Flash nicht auf Ihrem Computer installiert ist.
Klasse Ermglicht das Anwenden einer CSS-Klasse auf den Film. Schleife Der Film wird in einer Endlosschleife wiedergegeben. Wenn Schleife nicht ausgewhlt ist, wird der Film einmal wiedergegeben und dann beendet. Automatisch abspielen Spielt den Film automatisch ab, whrend die Seite geladen wird. V-Abstand und H-Abstand Legen die Anzahl der Pixel fr den Leerraum oberhalb, unterhalb und an beiden Seiten des
Films fest.
Qualitt Steuert das Anti-Aliasing whrend der Wiedergabe des Films. Durch hohe Einstellungen verbessert sich
die Wiedergabe von Filmen. Bei Filmen mit hohen Einstellungen ist jedoch ein schneller Prozessor erforderlich, damit die Filme korrekt wiedergegeben werden. Mit der Einstellung Niedrig erzielen Sie eine hhere Geschwindigkeit auf Kosten der Darstellung und mit der Einstellung Hoch eine bessere Darstellung auf Kosten der Geschwindigkeit. Bei Auto-Niedrig hat zunchst die Geschwindigkeit einen hheren Stellenwert, die Darstellung wird jedoch nach Mglichkeit verbessert. Bei Auto-Hoch haben Darstellung und Geschwindigkeit den gleichen Stellenwert, die Darstellung wird jedoch gegebenenfalls zugunsten der Geschwindigkeit reduziert.
Skalierung Legt fest, wie der Film in die Abmessungen eingepasst wird, die in die Felder fr die Breite und Hhe
eingegeben wurden. Bei der Einstellung Standard (Alles zeigen) wird der gesamte Film angezeigt.
Ausrichten Legt fest, wie der Film auf der Seite ausgerichtet wird. wMode Legt den fr die SWF-Datei wMode-Parameter fest, um Konflikte mit DHTML-Elementen (z. B. Spry-
Widgets) zu vermeiden. Der Standardwert ist opaque. Bei diesem Wert werden DHTML-Elemente in einem Browser ber SWF-Dateien angezeigt. Wenn die SWF-Datei transparente Bereiche enthlt und DHTML-Elemente hinter diesen Bereichen angezeigt werden sollen, whlen Sie die Option transparent aus. Whlen Sie die Option window aus, damit der wMode-Parameter aus dem Code entfernt und die SWF-Datei ber anderen DHTMLElementen angezeigt wird.
Abspielen Gibt den Film im Dokumentfenster wieder. Parameter ffnet ein Dialogfeld, in dem Sie zustzliche Parameter eingeben knnen, die an den Film bergeben
werden sollen. Der Film muss fr den Erhalt dieser zustzlichen Parameter konfiguriert worden sein.
FlashPaper-Dokumente einfgen
Die Funktion FlashPaper einfgen ist ab Dreamweaver CS5 veraltet.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 266
Inhalt in Seiten einfgen
FLV-Dateien einfgen
FLV-Dateien einfgen
Sie knnen FLV-Videos auf einfache Weise ohne das Flash-Authoring-Tool in Webseiten einfgen. Dazu bentigen Sie zunchst eine kodierte FLV-Datei. Dreamweaver fgt eine SWF-Komponente ein, mit der die FLV-Datei angezeigt wird. Bei der Ansicht in einem Browser werden ber diese Komponente die ausgewhlte FLV-Datei sowie mehrere Steuerelemente fr die Wiedergabe angezeigt.
In Dreamweaver haben Sie folgende Mglichkeiten zum Bereitstellen von FLV-Videos fr die Besucher Ihrer Website:
Progressiver Video-Download Ldt die FLV-Datei auf die Festplatte des Besuchers herunter und gibt danach das
Video wieder. Im Gegensatz zu herkmmlichen Download-und-Abspielen-Methoden kann das Abspielen der Videodatei beim progressiven Download bereits gestartet werden, bevor die Datei vollstndig heruntergeladen wurde.
Streaming-Video Ermglicht die Wiedergabe des Videos im Streaming-Verfahren, sodass es nach einer kurzen
Zwischenspeicherung fr die unterbrechungsfreie Wiedergabe in der Webseite wiedergegeben wird. Um StreamingVideo fr Ihre Webseiten zu aktivieren, bentigen Sie jedoch Adobe Flash Media Server. Der Film muss als kodierte FLV-Datei vorliegen, bevor Sie ihn in Dreamweaver verwenden knnen. Sie knnen Videodateien einfgen, die mit zwei Arten von Codecs erstellt wurden: Sorenson Squeeze und On2. Wie bei herkmmlichen SWF-Dateien wird beim Einfgen einer FLV-Datei Code eingefgt, mit dem erkannt wird, ob der Benutzer fr die Wiedergabe des Videos die richtige Version von Flash Player verwendet. Wenn dies nicht der Fall ist, wird auf der Seite alternativer Inhalt angezeigt und der Benutzer aufgefordert, die neueste Version von Flash Player herunterzuladen. Hinweis: Zum Anzeigen von FLV-Dateien mssen Benutzer Flash Player ab Version 8 auf ihrem Computer installiert haben. Wenn ein Benutzer nicht die erforderliche Version, jedoch Flash Player ab Version 6.0 r65 verwendet, wird im Browser statt des alternativen Inhalts die Express-Installation fr Flash Player angezeigt. Wenn der Benutzer die ExpressInstallation nicht ausfhrt, wird auf der Seite der alternative Inhalt angezeigt. Weitere Informationen zum Verwenden von Videodateien finden Sie im Video Technology Center unter www.adobe.com/go/flv_devcenter_de.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 267
Inhalt in Seiten einfgen
FLV-Dateien einfgen
1 Whlen Sie Einfgen > Medien > FLV aus. 2 Whlen Sie im Dialogfeld FLV einfgen im Popupmen Videotyp die Option Progressiver Video-Download
Hinweis: Microsoft Internet Information Server (IIS) verarbeitet keine verschachtelten object-Tags. Fr ASP-Seiten verwendet Dreamweaver beim Einfgen von SWF- oder FLV-Dateien verschachtelten object/embed-Code anstelle von verschachteltem object-Code.
mypath/myvideo.flv), klicken Sie auf Durchsuchen, navigieren Sie zu der FLV-Datei und whlen Sie sie aus. Um einen absoluten Pfad anzugeben, geben Sie die URL (z. B. http://www.example.com/myvideo.flv) der FLV-Datei ein.
Skin Legt die Darstellung der Videokomponente fest. Eine Vorschau der ausgewhlten Skin wird unterhalb des
Dreamweaver die genaue Breite der FLV-Datei ermitteln kann. Wenn Dreamweaver die Breite nicht ermitteln kann, mssen Sie einen Wert eingeben.
Hhe Gibt die Hhe der FLV-Datei in Pixel an. Klicken Sie auf die Schaltflche Gre erkennen, damit Dreamweaver die genaue Hhe der FLV-Datei ermitteln kann. Wenn Dreamweaver die Hhe nicht ermitteln kann, mssen Sie einen Wert eingeben.
Hinweis: Gesamtgre einschlielich Skin gibt die Breite und Hhe der FLV-Datei zuzglich der Breite und Hhe der ausgewhlten Skin an.
Beschrnkung Bewirkt, dass das Verhltnis zwischen Breite und Hhe der Videokomponente beibehalten wird. Diese
4 Klicken Sie auf OK, um das Dialogfeld zu schlieen und die FLV-Datei in die Webseite einzufgen.
Mit dem Befehl FLV einfgen werden eine SWF-Datei zum Wiedergeben von Videos und eine SWF-Skin-Datei erstellt. Mithilfe dieser Dateien wird das Videomaterial in der Webseite angezeigt. (Mglicherweise mssen Sie im Bedienfeld Dateien auf die Schaltflche Aktualisieren klicken, damit die neuen Dateien angezeigt werden.) Diese Dateien werden im gleichen Verzeichnis gespeichert wie die HTML-Datei, der Sie das Videomaterial hinzufgen. Wenn Sie die HTML-Seite hochladen, die die FLV-Datei enthlt, ldt Dreamweaver diese Dateien als abhngige Dateien hoch (sofern Sie im Dialogfeld Abhngige Dateien bereitstellen die Option Ja aktiviert haben).
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 268
Inhalt in Seiten einfgen
Dreamweaver die genaue Breite der FLV-Datei ermitteln kann. Wenn Dreamweaver die Breite nicht ermitteln kann, mssen Sie einen Wert eingeben.
Hhe Gibt die Hhe der FLV-Datei in Pixel an. Klicken Sie auf die Schaltflche Gre erkennen, damit
Dreamweaver die genaue Hhe der FLV-Datei ermitteln kann. Wenn Dreamweaver die Hhe nicht ermitteln kann, mssen Sie einen Wert eingeben. Hinweis: Gesamtgre einschlielich Skin gibt die Breite und Hhe der FLV-Datei zuzglich der Breite und Hhe der ausgewhlten Skin an.
Beschrnkung Bewirkt, dass das Verhltnis zwischen Breite und Hhe der Videokomponente beibehalten wird. Diese
Flash Player eine von Flash Media Server gestreamte Live-Videoeinspielung wiedergegeben. Der Name der LiveVideoeinspielung ist der Name, der im Textfeld Streamname angegeben wurde. Hinweis: Wenn Sie Live-Videoeinspielung auswhlen, wird auf der Skin der Komponente nur der Lautstrkeregler angezeigt, weil Live-Video nicht manipuliert werden kann. Auerdem sind die beiden Optionen Automatisch abspielen und Automatisch zurckspulen wirkungslos.
Autom. Wiedergabe Gibt an, ob das Video beim ffnen der Webseite abgespielt werden soll. Automatisch zurckspulen Bestimmt, ob die Wiedergabesteuerung an die Startposition zurckgesetzt werden soll,
Zwischenspeicherung von Videomaterial erforderlich ist. Die Zwischenspeicherzeit wird standardmig auf 0 eingestellt; das heit, die Videowiedergabe beginnt, sobald auf die Schaltflche Abspielen geklickt wurde. (Wenn Automatisch abspielen ausgewhlt wurde, beginnt die Videowiedergabe, sobald eine Verbindung zum Server hergestellt wurde.) Das Festlegen einer Zwischenspeicherzeit empfiehlt sich, wenn Sie Videomaterial bereitstellen mchten, das eine hhere Bitrate als die Verbindungsgeschwindigkeit der Website-Besucher hat oder wenn der Internetverkehr zu Engpssen bei der Bandbreite oder zu Verbindungsproblemen fhren knnte. Wenn Sie 15 Sekunden Videomaterial an die Webseite senden mchten, bevor die Seite das Material abspielt, stellen Sie die Zwischenspeicherzeit auf 15 ein.
3 Klicken Sie auf OK, um das Dialogfeld zu schlieen und die FLV-Datei in die Website einzufgen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 269
Inhalt in Seiten einfgen
Mit dem Befehl FLV einfgen werden eine SWF-Datei zum Wiedergeben von Videos und eine SWF-Skin-Datei erstellt. Mithilfe dieser Dateien wird das Video in der Webseite angezeigt. Der Befehl erstellt auerdem eine main.ascDatei, die Sie auf den Flash Media Server hochladen mssen. (Mglicherweise mssen Sie im Bedienfeld Dateien auf die Schaltflche zum Aktualisieren klicken, um die neuen Dateien zu sehen.) Diese Dateien werden im gleichen Verzeichnis gespeichert wie die HTML-Datei, der Sie das Videomaterial hinzufgen. Wenn Sie die HTML-Seite hochladen, die die FLV-Datei enthlt, mssen Sie auch diese SWF-Dateien auf den Webserver und die Datei main.asc auf den Flash Media Server hochladen. Hinweis: Wenn sich auf dem Server bereits eine Datei main.asc befindet, laden Sie die mit dem Befehl FLV einfgen erstellte Datei main.asc nur nach vorheriger Rcksprache mit Ihrem Serveradministrator hoch. Sie knnen alle erforderlichen Mediendateien problemlos hochladen, indem Sie im Dreamweaver-Dokumentfenster den Platzhalter fr die Videokomponente auswhlen und dann im Eigenschafteninspektor (Fenster > Eigenschaften) auf die Schaltflche Medien hochladen klicken. Um die Liste der erforderlichen Dateien anzuzeigen, klicken Sie auf Erforderliche Dateien anzeigen. Hinweis: ber die Schaltflche Medien hochladen wird nicht die HTML-Datei hochgeladen, die das Videomaterial enthlt.
Sie knnen auch Strg+] drcken, um zur Anzeige des alternativen Inhalts zu wechseln. Um zur Ansicht der SWF- oder FLV-Datei zurckzukehren, drcken Sie Strg+[, bis der gesamte alternative Inhalt ausgewhlt ist. Drcken Sie dann erneut Strg+[.
3 Sie knnen den Inhalt wie jeden anderen Inhalt in Dreamweaver bearbeiten.
Hinweis: Sie knnen keine SWF- oder FLV-Dateien als alternativen Inhalt einfgen.
4 Klicken Sie erneut auf das Symbol mit dem Auge, um in die Ansicht der SWF- oder FLV-Datei zurckzukehren.
Fehlerbehebung fr FLV-Dateien
In diesem Abschnitt werden einige der hufigsten Grnde fr Probleme mit FLV-Dateien errtert. Anzeigeprobleme aufgrund fehlender zugehriger Dateien Der von Dreamweaver CS4 erzeugte Code bentigt neben der eigentlichen FLV-Datei vier abhngige Dateien:
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 270
Inhalt in Seiten einfgen
Beachten Sie, dass fr Dreamweaver CS4 zwei abhngige Dateien mehr erforderlich sind als fr Dreamweaver CS3. Die ersten beiden dieser Dateien (swfobject_modified.js und expressInstall.swf) werden in einem Ordner mit dem Namen Scripts installiert, der von Dreamweaver im Stammverzeichnis der Site angelegt wird, sofern er noch nicht vorhanden ist. Die anderen beiden Dateien (FLVPlayer_Progressive.swf und die Skin-Datei) werden im gleichen Ordner wie die Seite installiert, in die die FLV-Datei eingebettet ist. Die Skin-Datei enthlt die Steuerelemente fr die FLV-Datei. Ihr Name ist abhngig von der Skin, die in den in der DW CS4-Hilfe beschriebenen Optionen ausgewhlt wurde. Wenn Sie beispielsweise Clear Skin auswhlen, lautet der Name der Datei Clear_Skin_1.swf. Alle vier abhngigen Dateien MSSEN auf den Remote-Server hochgeladen sein, damit die FLV-Datei korrekt angezeigt wird. Der hufigste Grund fr das Fehlschlagen der Ausfhrung von FLV-Dateien auf einer Webseite ist, dass vergessen wurde, diese Dateien hochzuladen. Wenn eine der Dateien fehlt, wird auf der Webseite ein weies Rechteck angezeigt. Um sicherzustellen, dass alle abhngigen Dateien hochgeladen werden, verwenden Sie zum Hochladen der Seite mit der FLV-Datei das Dreamweaver-Bedienfeld Dateien. Beim Hochladen der Seite werden Sie gefragt, ob Sie auch abhngige Dateien hochladen mchten (falls Sie diese Option nicht deaktiviert haben). Klicken Sie auf Ja, um die abhngigen Dateien hochzuladen. Anzeigeproblem bei der lokalen Vorschau von Seiten Aufgrund von Sicherheitsaktualisierungen in Dreamweaver CS4 knnen Seiten mit eingebetteter FLV-Datei nicht mehr mit dem Befehl Vorschau im Browser getestet werden, es sei denn Sie definieren einen lokalen Testserver in der Dreamweaver Site-Definition und verwenden den Testserver fr die Vorschau der Seite. Normalerweise wird ein Testserver nur bentigt, wenn Sie Seiten mit ASP, ColdFusion oder PHP entwickeln (siehe Computer fr die Entwicklung von Anwendungen einrichten auf Seite 563). Wenn Sie Websites erstellen, die nur HTML verwenden, und keinen Testserver definiert haben, drcken Sie F12 (Windows) bzw. Option+F12 (Macintosh). Daraufhin wird eine groe Auswahl von Skin-Steuerelementen angezeigt. Zum Umgehen dieses Problems knnen Sie entweder einen Testserver definieren und ihn dann zur Seitenvorschau einsetzen oder Ihre Dateien auf einen Remote-Server hochladen und sie von dort anzeigen. Hinweis: Es ist mglich, dass auch Sicherheitseinstellungen dafr verantwortlich sind, wenn eine Vorschau lokaler FLVInhalte nicht mglich ist. Adobe konnte dies jedoch nicht besttigen. Sie knnen versuchen, Ihre Sicherheitseinstellungen zu ndern und das Problem so zu beheben. Weitere Informationen zum ndern der Sicherheitseinstellungen finden Sie in TechNote 117502. Weitere mgliche Ursachen fr Probleme mit FLV-Dateien
Stellen Sie bei Problemen mit der lokalen Vorschau sicher, dass die Option Vorschau mit temporrer Datei
deaktiviert ist. Diese Optopn finden Sie unter Bearbeiten > Voreinstellungen > Vorschau im Browser.
Stellen Sie sicher, dass das neueste FlashPlayer-Plugin installiert ist. Vermeiden Sie nach Mglichkeit, Dateien und Ordner auerhalb von Dreamweaver zu verschieben. Wenn Sie
Dateien und Ordner auerhalb von Dreamweaver verschieben, ist nicht mehr gewhrleistet, dass fr FLVabhngige Dateien die korrekten Pfade eingetragen sind.
Sie knnen die Probleme verursachende FLV-Datei vorbergehend durch eine andere ersetzen, von der Sie wissen,
dass sie funktioniert. Wenn die ersetzte FLV-Datei korrekt angezeigt wird, dann liegt das Problem an der ursprnglichen FLV-Datei und nicht am Browser oder am Computer.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 271
Inhalt in Seiten einfgen
FLV-Komponenten bearbeiten
1 Whlen Sie den Platzhalter fr die Videokomponente im Dreamweaver-Dokumentfenster aus, indem Sie in der
nderungen vor. Hinweis: Der Videotyp kann nicht mit dem Eigenschafteninspektor gendert werden (z. B. von Progressiver VideoDownload in Streaming-Video). Wenn Sie den Videotyp ndern mchten, lschen Sie die FLV-Komponente und fgen Sie dann ber Einfgen > Medien > FLV die genderte Komponente wieder ein.
FLV-Komponenten lschen
Whlen Sie den Platzhalter fr die FLV-Komponente im Dreamweaver-Dokumentfenster aus und drcken Sie die
Entf-Taste.
FLV-Erkennungscode entfernen
Ab Dreamweaver CS4 wird Flash Player-Erkennungscode direkt in das object-Tag eingefgt, das die FLV-Datei enthlt. In Dreamweaver bis Version CS3 befindet sich Erkennungscode hingegen auerhalb des object-Tags der FLVDatei. Aus diesem Grund mssen Sie beim Lschen von FLV-Dateien aus Seiten, die mit Dreamweaver bis Version CS3 erstellt wurden, zunchst die FLV-Dateien lschen und dann mit dem Befehl FLV-Erkennung entfernen auch den Erkennungscode entfernen.
Whlen Sie Befehle > FLV-Erkennung entfernen aus.
Web-Widgets hinzufgen
Bei einem Web-Widget handelt es sich um eine Webseitenkomponente aus HTML-, CSS- und JavaScript-Code. Beispiele fr Web-Widgets sind Akkordeons, Paletten mit Registerkarten und Kalender. Ihre eigene Auswahl von Web-Widgets in Dreamweaver knnen Sie mithilfe des Adobe Widget-Browsers festlegen. Der Adobe Widget-Browser ist eine grafische Benutzeroberflche, ber die Sie Widgets durchsuchen, konfigurieren und in einer Vorschau anzeigen knnen. Weitere Informationen zur Verwendung des Adobe Widget-Browsers finden Sie unter http://help.adobe.com/de_DE/WidgetBrowser/.
1 Whlen Sie Einfgen > Widget aus. 2 Whlen Sie im Dialogfeld Widget ein Widget aus, legen Sie (gegebenenfalls) die Vorgabe fest und klicken Sie auf
OK.
Verwandte Themen
Spry-Widgets verwenden (allgemeine Anweisungen) auf Seite 452
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 272
Inhalt in Seiten einfgen
Audiomaterial hinzufgen
Audiodateiformate
Sie knnen Audiodateien in eine Webseite integrieren. Es gibt verschiedene Arten von Audiodateien und -formaten, z. B. .wav, .midi und .mp3. Bevor Sie sich fr ein Format und eine Methode zum Hinzufgen einer Audiodatei entscheiden, sollten Sie sich mit Faktoren wie Zweck der Audiodatei, Zielgruppe, Dateigre, Audioqualitt und Unterschiede zwischen den einzelnen Browsern beschftigen. Hinweis: Audiodateien werden von unterschiedlichen Browsern auf sehr unterschiedliche Weise verarbeitet. Sie knnen einer SWF-Datei eine Audiodatei hinzufgen und dann die SWF-Datei einbetten, um eine bessere Konsistenz zu gewhrleisten. In der folgenden Liste werden die gngigen Audiodateiformate samt ihrer Vor- und Nachteile beim Entwickeln von Websites beschrieben.
.midi oder .mid (Musical Instrument Digital Interface) Dieses Dateiformat wird fr Instrumentalmusik verwendet.
MIDI-Dateien werden von vielen Browsern untersttzt und erfordern kein Plug-In. Die Klangqualitt ist zwar generell sehr gut, kann aber je nach der verwendeten Soundkarte schwanken. Eine kleine MIDI-Datei kann einen langen Audio-Clip enthalten. MIDI-Dateien knnen nicht aufgezeichnet werden, sondern werden mithilfe eines Computers mit spezieller Hard- und Software synthetisiert.
.wav (Waveform Extension) Diese Dateien haben eine gute Klangqualitt, werden von vielen Browsern untersttzt und erfordern kein Plug-In Sie knnen Ihre eigenen WAV-Dateien von CDs oder Kassetten berspielen oder mit einem Mikrofon aufnehmen. Aufgrund des Umfangs dieser Dateien ist die Lnge der Audio-Clips, die Sie auf Webseiten verwenden knnen, ziemlich begrenzt. .aif (Audio Interchange File Format oder AIFF) Dateien im AIFF-Format haben wie WAV-Dateien eine gute Klangqualitt, werden von vielen Browsern untersttzt und bentigen kein Plug-In. Sie knnen Ihre eigenen AIFFDateien von CDs oder Kassetten berspielen oder mit einem Mikrofon aufnehmen. Aufgrund des Umfangs dieser Dateien ist die Lnge der Audio-Clips, die Sie auf Webseiten verwenden knnen, ziemlich begrenzt. .mp3 (Motion Picture Experts Group Audio oder MPEG-Audio Layer-3) Dies ist ein komprimiertes Format, das Audiodateien erheblich verkleinert. Die Klangqualitt ist sehr gut: Wenn eine MP3-Datei korrekt aufgenommen und komprimiert ist, kann CD-Qualitt erreicht werden. Mit der MP3-Technologie knnen Sie die Datei im StreamingVerfahren abspielen, sodass die Besucher Ihrer Website nicht zuerst die ganze Datei herunterladen mssen, bevor die Datei abgespielt werden kann. Die Datei ist jedoch grer als eine Real Audio-Datei, daher kann das Herunterladen eines ganzen Musiktitels ber eine gngige Modem-DF-Verbindung (Telefonleitung) trotzdem eine ganze Weile dauern. Fr die Wiedergabe von MP3-Dateien mssen Besucher Ihrer Website eine Hilfsanwendung oder ein Plug-In wie QuickTime, Windows Media Player oder RealPlayer installiert haben. .ra, .ram, .rpm oder Real Audio Dieses Format zeichnet sich durch eine sehr starke Komprimierung und somit kleinere Dateien als bei MP3 aus. Ganze Musikdateien knnen in einer akzeptablen Zeit heruntergeladen werden. Da diese Dateien im Streaming-Verfahren von einem normalen Webserver heruntergeladen werden knnen, ist das Anhren der Audiodatei bereits mglich, bevor die Datei vollstndig bertragen wurde. Besucher Ihrer Website mssen das RealPlayer-Plug-In herunterladen und installieren, bevor sie diese Dateien wiedergeben knnen. .qt, .qtm, .mov oder QuickTime Dies ist sowohl ein Audio- als auch ein Videoformat, das von Apple Computer
entwickelt wurde. QuickTime ist in Apple Macintosh-Betriebssystemen enthalten und wird von den meisten Macintosh-Anwendungen mit Audio, Video oder Animation verwendet. PCs knnen Dateien im QuickTime-Format ebenfalls abspielen; hierfr ist jedoch ein spezieller QuickTime-Treiber erforderlich. QuickTime untersttzt die meisten Kodierformate einschlielich Cinepak, JPEG und MPEG.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 273
Inhalt in Seiten einfgen
Hinweis: Zustzlich zu den oben angefhrten gngigeren Formaten gibt es zahlreiche verschiedene Audio- und VideoDateiformate, die zur Verwendung im Internet zur Verfgung stehen. Wenn Sie auf ein Mediendateiformat treffen, mit dem Sie nicht vertraut sind, bitten Sie den Ersteller des Formats um Informationen dazu, wie Sie es am besten verwenden und nutzen knnen.
Verwandte Themen
Medienobjekte einfgen und bearbeiten auf Seite 274
auszuwhlen, oder geben Sie den Pfad und den Namen der Datei im Feld Hyperlink ein.
Audiodateien einbetten
Beim Einbetten von Audiodateien wird der Sound direkt in die Seite integriert. Die Audiodatei wird allerdings nur wiedergegeben, wenn Besucher der Website das entsprechende Plug-In fr die Audiodatei installiert haben. Betten Sie Audiodateien ein, wenn Sie sie als Hintergrundmusik verwenden, die Lautstrke ndern bzw. die Darstellung auf der Seite oder den Anfang und das Ende der Audiodatei festlegen mchten. Beim Einfgen von Audiodateien in Ihre Webseiten sollten Sie darauf achten, dass die Dateien in der Site auf eine sinnvolle Weise eingesetzt werden. Auerdem sollten Sie die Prferenzen der Site-Besucher hinsichtlich der Nutzung dieser Medienressourcen bercksichtigen. Stellen Sie immer ein Steuerelement zum Aus- oder Stummschalten des Sounds bereit, falls die Besucher ihn nicht hren mchten.
1 Setzen Sie die Einfgemarke in der Entwurfsansicht an die Stelle, an der Sie die Datei einbetten mchten. Fhren
Klicken Sie in der Kategorie Allgemein des Bedienfelds Einfgen auf die Schaltflche Medien und whlen Sie
im Popupmen das Symbol Plug-In aus.
Eigenschafteninspektor eingeben oder die Gre des Plug-In-Platzhalters im Dokumentfenster ndern. Diese Werte legen die Gre fest, in der die Audio-Steuerelemente im Browser angezeigt werden.
Verwandte Themen
Inhalte fr Netscape Navigator-Plug-Ins einfgen auf Seite 277
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 274
Inhalt in Seiten einfgen
Klicken Sie in der Kategorie Allgemein des Bedienfelds Einfgen auf die Schaltflche Medien und whlen Sie
das Symbol fr den einzufgenden Objekttyp aus.
Whlen Sie das entsprechende Objekt im Untermen Einfgen > Medien aus. Wenn das einzufgende Objekt kein Shockwave-, Applet- oder ActiveX-Objekt ist, whlen Sie Einfgen >
Medien > Plug-In aus. Daraufhin wird ein Dialogfeld angezeigt, in dem Sie eine Quelldatei auswhlen und verschiedene Parameter fr das Medienobjekt festlegen knnen. Wenn Sie festlegen mchten, dass dieses Dialogfeld nicht angezeigt wird, whlen Sie Bearbeiten > Voreinstellungen > Allgemein (Windows) bzw. Dreamweaver > Voreinstellungen > Allgemein (Macintosh) aus und deaktivieren Sie die Option Beim Einfgen von Objekten Dialogfeld zeigen. Um die derzeitigen Einstellungen fr die Anzeige von Dialogfeldern auer Kraft zu setzen, halten Sie die Strg-Taste (Windows) bzw. die Wahltaste (Macintosh) gedrckt, whrend Sie das Objekt einfgen. (Um beispielsweise einen Platzhalter fr einen Shockwave-Film ohne Angabe der Datei einzufgen, klicken Sie bei gedrckter Strg-Taste bzw. Wahltaste in der Kategorie Allgemein des Bedienfelds Einfgen im Popupmen Medien auf die Schaltflche Shockwave oder whlen Sie Einfgen > Medien > Shockwave aus.)
3 Nehmen Sie im Dialogfeld Datei auswhlen die gewnschten Einstellungen vor und klicken Sie dann auf OK.
Hinweis: Das Dialogfeld Eingabehilfen-Attribute wird angezeigt, wenn Sie unter Bearbeiten > Voreinstellungen festgelegt haben, dass beim Einfgen von Medien Attribute angezeigt werden sollen.
4 Legen Sie die Eingabehilfen-Attribute fest.
Hinweis: Sie knnen Medienobjektattribute auch bearbeiten, indem Sie das Objekt auswhlen und den HTML-Code in der Codeansicht bearbeiten, oder indem Sie mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste (Macintosh) klicken und Tag-Code bearbeiten whlen.
Titel Geben Sie fr das Medienobjekt einen Titel ein. Zugriffstaste Geben Sie im Textfeld eine Taste (einen Buchstaben) ein, mit der das Formularobjekt im Browser
ausgewhlt werden kann. Die Besucher der Site knnen dann durch Drcken der Strg-Taste (Windows) zusammen mit der Zugriffstaste auf das Objekt zugreifen. Wenn Sie zum Beispiel B als Zugriffstaste definieren, knnen Sie das Objekt im Browser mit Strg+B auswhlen.
Tabulator-Index Geben Sie eine Zahl fr die Tabulatorreihenfolge des Formularobjekts an. Das Festlegen einer
Reihenfolge ist sinnvoll, wenn eine Seite weitere Hyperlinks und Formularobjekte enthlt. Der Benutzer gelangt dann in einer bestimmten Reihenfolge mithilfe der Tabulatortaste von einem Element zum nchsten. Wenn Sie fr ein Objekt eine Reihenfolgenposition festlegen, sollten Sie dies auch bei allen anderen Objekten tun.
5 Klicken Sie auf OK, um das Medienobjekt einzufgen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 275
Inhalt in Seiten einfgen
Hinweis: Wenn Sie auf Abbrechen klicken, wird im Dokument ein Medienobjekt-Platzhalter angezeigt, der jedoch von Dreamweaver nicht mit Eingabehilfen-Tags oder -Attributen versehen wird. Zur Angabe einer Quelldatei, der Abmessungen und anderer Parameter und Attribute verwenden Sie den Eigenschafteninspektor des entsprechenden Objekts. Sie knnen die Eingabehilfen-Attribute eines Objekts bearbeiten.
Verwandte Themen
Arbeitsbereich fr barrierefreies Seitenlayout optimieren auf Seite 733 Inhalte fr Netscape Navigator-Plug-Ins einfgen auf Seite 277
Um herauszufinden, welcher Editor mit dem Dateityp verbunden ist, whlen Sie in Dreamweaver Bearbeiten > Voreinstellungen und dann in der Liste Kategorie den Eintrag Dateitypen/Editoren. Klicken Sie in der Spalte Erweiterungenauf die Erweiterung der Datei, damit alle verbundenen Editoren in der Spalte Editoren angezeigt werden. Sie knnen den mit einem Dateityp verbundenen Editor ndern.
2 Doppelklicken Sie im Bedienfeld Dateien auf die Mediendatei, um sie im externen Editor zu starten.
Der Editor, der gestartet wird, wenn Sie im Bedienfeld Dateien auf eine Datei doppelklicken, wird als primrer Editor bezeichnet. Wenn Sie beispielsweise auf eine Bilddatei doppelklicken, startet Dreamweaver die Datei im primren externen Bildeditor, z. B. in Adobe Fireworks.
3 Wenn Sie die Datei nicht mit dem primren externen Editor bearbeiten mchten, knnen Sie mit einem der
folgenden Schritte einen anderen Editor im System zum Bearbeiten der Datei verwenden:
Klicken Sie im Bedienfeld Dateien mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste
(Macintosh) auf den Dateinamen und whlen Sie im Kontextmen ffnen mit.
Klicken Sie in der Entwurfsansicht mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste
(Macintosh) auf das Medienelement in der aktuellen Seite und whlen Sie Bearbeiten mit aus dem Kontextmen.
Przise festlegen, welche externen Editoren fr einen bestimmten Dateityp gestartet werden sollen
1 Whlen Sie Bearbeiten > Voreinstellungen und whlen Sie in der Liste Kategorie den Eintrag
Dateitypen/Editoren aus. Auf der linken Seite unter Erweiterungen werden Dateierweiterungen aufgelistet, wie z. B. .gif, .wav und .mpg. Die verknpften Editoren fr eine ausgewhlte Erweiterung werden rechts unter Editoren aufgefhrt.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 276
Inhalt in Seiten einfgen
2 Whlen Sie die Dateityperweiterung in der Liste Erweiterungen aus und fhren Sie einen der folgenden Schritte aus:
Klicken Sie zum Verknpfen eines neuen Editors mit dem Dateityp auf die Schaltflche mit dem Pluszeichen (+)
ber der Liste Editoren und nehmen Sie im angezeigten Dialogfeld die erforderlichen Einstellungen vor. Whlen Sie beispielsweise das Anwendungssymbol fr Acrobat aus, um diese Anwendung mit dem Dateityp zu verbinden.
Whlen Sie den Editor in der Liste Editoren aus und klicken Sie auf Zu primrem Editor machen, wenn Sie
einen Editor als primren Editor fr einen Dateityp festlegen mchten (also als den Editor, der geffnet wird, wenn Sie im Bedienfeld Dateien auf den Dateityp doppelklicken).
Sie lsen die Verbindung zwischen einem Editor und einem Dateityp, indem Sie den Editor in der Liste der
Editoren auswhlen und auf die Schaltflche mit dem Minuszeichen () ber dieser Liste klicken.
Dateityperweiterung (einschlielich des Punkts vor der Erweiterung) oder mehrere verwandte Erweiterungen (jeweils durch ein Leerzeichen getrennt) ein. Sie knnen beispielsweise .xml .xsl eingeben, um diese Dateitypen mit einem im System installierten XML-Editor zu verbinden.
2 Whlen Sie einen Editor fr den Dateityp aus, indem Sie auf die Schaltflche mit dem Pluszeichen (+) ber der Liste
Dateitypen entfernen
Whlen Sie den Dateityp in der Liste Erweiterungen aus und klicken Sie auf die Schaltflche mit dem
Minuszeichen (-) ber dieser Liste. Hinweis: Das Entfernen eines Dateityps kann nicht wieder rckgngig gemacht werden. Entfernen Sie einen Dateityp also nur, wenn Sie sich absolut sicher sind.
(Macintosh) auf das Objekt. Hinweis: Sie knnen einem Objekt erst dann Design Notes hinzufgen, nachdem Sie die Site definiert haben.
2 Klicken Sie im Kontextmen auf Design Notes fr Seite. 3 Geben Sie die Informationen ein, die Sie in die Design Note aufnehmen mchten.
Sie knnen einem Medienobjekt auch ber das Bedienfeld Dateien eine Design Note zuweisen. Whlen Sie hierzu die Datei aus, ffnen Sie das Kontextmen und klicken Sie darin auf Design Notes.
Verwandte Themen
Design Notes fr eine Site aktivieren und deaktivieren auf Seite 111 Dateiinformationen in Design Notes speichern auf Seite 110
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 277
Inhalt in Seiten einfgen
Shockwave-Filme einfgen
Mit Dreamweaver knnen Sie Shockwave-Filme in Ihre Dokumente einfgen. Adobe Shockwave ist ein Standard fr interaktive Multimedia-Inhalte im Internet. Hierbei handelt es sich um ein komprimiertes Format, mit dem Mediendateien, die in Adobe Director erstellt wurden, schnell heruntergeladen und von den meisten gngigen Browsern wiedergegeben werden knnen.
1 Setzen Sie die Einfgemarke im Dokumentfenster an die Stelle, an der Sie einen Shockwave-Film einfgen
Klicken Sie in der Kategorie Allgemein des Bedienfelds Einfgen auf die Schaltflche Medien und whlen Sie
im Popupmen das Symbol Shockwave aus.
Verwandte Themen
Eigenschaften fr SWF-Dateien festlegen auf Seite 264
Geben Sie zum Erstellen des Hyperlinks zu dem Clip einen Text wie z. B. Clip-Download ein, whlen Sie den Text aus und klicken Sie im Eigenschafteninspektor auf das Ordnersymbol. Whlen Sie die Videodatei aus. Hinweis: Zum Anzeigen gngiger Streaming-Formate wie Real Media, QuickTime und Windows Media muss eine Hilfsanwendung (ein Plug-In) heruntergeladen werden.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 278
Inhalt in Seiten einfgen
Der Eigenschafteninspektor zeigt zunchst nur die am hufigsten verwendeten Attribute an. Klicken Sie unten rechts auf den Erweiterungspfeil, um alle Eigenschaften anzuzeigen.
einfgen mchten. Fhren Sie anschlieend einen der folgenden Schritte aus:
Klicken Sie in der Kategorie Allgemein des Bedienfelds Einfgen auf die Schaltflche Medien und whlen Sie
im Men das Symbol Plug-In aus.
OK.
3 Nehmen Sie im Eigenschafteninspektor die gewnschten Einstellungen fr das Plug-In vor.
Name Legt einen Namen fest, um das Plug-In bei der Skriptverarbeitung zu identifizieren. Geben Sie in dem unbeschrifteten Feld ganz links im Eigenschafteninspektor einen Namen ein. B und H Legen die Werte fr Breite und Hhe in Pixel fest, die dem Objekt auf der Seite zugewiesen werden. Quelle Gibt die Datenquelldatei an. Klicken Sie auf das Ordnersymbol, um die Datei auszuwhlen, oder geben Sie
Benutzer das Plug-In herunterladen knnen. Wenn ein Benutzer, der die Seite anzeigt, nicht ber das Plug-In verfgt, versucht der Browser, das Plug-In von dieser URL herunterzuladen.
Ausrichten Legt fest, wie das Objekt auf der Seite ausgerichtet wird. V-Abstand und H-Abstand Legen die Anzahl der Pixel fr den Leerraum oberhalb, unterhalb und an beiden Seiten des
Plug-Ins fest.
Rahmen Legt die Breite des Rahmens fest, der das Plug-In umgibt. Parameter ffnet ein Dialogfeld, in dem Sie zustzliche Parameter eingeben knnen, die an das Netscape NavigatorPlug-In bergeben werden sollen. Viele Plug-Ins reagieren auf Sonderparameter.
Sie knnen die Attribute des ausgewhlten Plug-Ins auch anzeigen, indem Sie auf die Schaltflche Attribut klicken. In dem daraufhin angezeigten Dialogfeld knnen Sie Attribute wie die Breite und Hhe bearbeiten, hinzufgen und lschen.
Whlen Sie eines der eingefgten Medienelemente aus und whlen Sie Ansicht > Plug-Ins > Wiedergeben
oder klicken Sie im Eigenschafteninspektor auf die Schaltflche Abspielen.
Whlen Sie Ansicht > Plug-Ins > Alle wiedergeben, um alle Medienelemente auf der ausgewhlten Seite
abzuspielen, fr die Plug-Ins erforderlich sind. Hinweis: Der Befehl Alle wiedergeben wirkt sich nur auf das aktuelle Dokument aus und beispielsweise nicht auf andere Dokumente innerhalb des Framesets.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 279
Inhalt in Seiten einfgen
Eigenschafteninspektor auf die Schaltflche Stoppen. Sie knnen auch Ansicht > Plug-Ins > Alle stoppen whlen, um die Wiedergabe aller Plug-In-Inhalte zu stoppen.
Stellen Sie sicher, dass das entsprechende Plug-In auf Ihrem Computer installiert ist und dass der Inhalt mit Ihrer
Version des Plug-Ins kompatibel ist.
ffnen Sie die Datei Configuration/Plugins/UnsupportedPlugins.txt in einem Texteditor und prfen Sie, ob das
problematische Plug-In darin aufgefhrt ist. Diese Datei enthlt eine Liste der Plug-Ins, die in Dreamweaver zu Problemen fhren und daher nicht untersttzt werden. (Wenn bei einem bestimmten Plug-In Probleme auftreten, sollten Sie es dieser Datei hinzufgen.)
berprfen Sie, ob gengend Speicherplatz vorhanden ist. Einige Plug-Ins bentigen 2 bis 5 MB zustzlichen
Speicher, damit sie ausgefhrt werden knnen.
ActiveX-Steuerelemente einfgen
Sie knnen ein ActiveX-Steuerelement in die Seite einfgen. ActiveX-Steuerelemente (frher OLE-Steuerelemente genannt) sind Komponenten, die wieder verwendet werden knnen. Sie sind mit einer Miniaturanwendung vergleichbar und funktionieren in etwa wie ein Browser-Plug-In. Diese Steuerelemente knnen in Internet Explorer mit Windows verwendet werden, nicht jedoch auf einem Macintosh oder in Netscape Navigator. Mit dem ActiveXObjekt von Dreamweaver knnen Sie Attribute und Parameter fr ActiveX-Steuerelemente in den Browsern Ihrer Website-Besucher angeben. Nachdem Sie ein ActiveX-Objekt eingefgt haben, legen Sie mit dem Eigenschafteninspektor Attribute fr dasobject-Tag sowie Parameter fr die ActiveX-Steuerelemente fest. Klicken Sie im Eigenschafteninspektor auf die Schaltflche Parameter, um Namen und Werte fr Eigenschaften einzugeben, die nicht im Eigenschafteninspektor angezeigt werden. Es gibt kein allgemein gltiges Standardformat fr die Parameter der ActiveX-Steuerelemente. Schlagen Sie in der Dokumentation des jeweiligen ActiveX-Steuerelements nach, welche Parameter verwendet werden sollten.
Setzen Sie die Einfgemarke im Dokumentfenster an die Stelle, an der Sie den Inhalt einfgen mchten. Fhren Sie
Klicken Sie in der Kategorie Allgemein des Bedienfelds Einfgen auf die Schaltflche Medien und whlen Sie
das Symbol ActiveX aus.
Klicken Sie in der Kategorie Allgemein des Bedienfelds Einfgen auf die Schaltflche Medien und whlen Sie
das Symbol ActiveX aus. Wenn das Symbol ActiveX im Bedienfeld Einfgen angezeigt wird, knnen Sie es direkt in das Dokumentfenster ziehen.
Whlen Sie Einfgen > Medien > ActiveX. Ein Symbol zeigt an, wo das ActiveX-Steuerelement auf der Seite
in Internet Explorer angezeigt wird.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 280
Inhalt in Seiten einfgen
ActiveX-Eigenschaften
Der Eigenschafteninspektor zeigt zunchst nur die am hufigsten verwendeten Attribute an. Klicken Sie unten rechts auf den Erweiterungspfeil, um alle Eigenschaften anzuzeigen.
Name Legt einen Namen fest, um das ActiveX-Objekt bei der Skriptverarbeitung zu identifizieren. Geben Sie in dem unbeschrifteten Feld ganz links im Eigenschafteninspektor einen Namen ein. B und H Legen die Breite und Hhe des Objekts in Pixel fest. Klassen-ID Identifiziert das ActiveX-Steuerelement fr den Browser. Geben Sie entweder einen Wert ein oder whlen Sie im Popupmen einen Wert aus. Wenn die Seite geladen wird, verwendet der Browser die Klassen-ID, um das ActiveX-Steuerelement zu finden, das fr das jeweilige ActiveX-Objekt erforderlich ist. Kann der Browser das angegebene ActiveX-Steuerelement nicht finden, versucht er, es von der Site herunterzuladen, die unter Basis angegeben ist. Einbetten Fgt ein embed-Tag im object-Tag fr das ActiveX-Steuerelement ein. Wenn das ActiveX-Steuerelement
eine Netscape Navigator-Plug-In-Entsprechung enthlt, aktiviert das Tag embed das Plug-In. Dreamweaver ordnet die von Ihnen als ActiveX-Eigenschaften eingegebenen Werte ihren Plug-In-Entsprechungen in Netscape Navigator zu.
Ausrichten Legt fest, wie das Objekt auf der Seite ausgerichtet wird. Parameter ffnet ein Dialogfeld, in dem Sie zustzliche Parameter eingeben knnen, die an das ActiveX-Objekt
Einbetten aktiviert ist. Wenn Sie keinen Wert angeben, versucht Dreamweaver, den Wert anhand der bereits eingegebenen ActiveX-Eigenschaften zu ermitteln.
V-Abstand und H-Abstand Legen die Anzahl der Pixel fr den Leerraum oberhalb, unterhalb und an beiden Seiten des
Objekts fest.
Basis Legt die URL fest, die das ActiveX-Steuerelement enthlt. Internet Explorer ldt das ActiveX-Steuerelement von
dieser Site herunter, wenn es noch nicht im System des Besuchers installiert ist. Wenn Sie den Parameter Basis nicht angeben und der Besucher Ihrer Website nicht ber das erforderliche ActiveX-Steuerelement verfgt, kann der Browser das ActiveX-Objekt nicht anzeigen.
ALT-Bild Legt ein Bild fest, das angezeigt werden soll, wenn der Browser das object-Tag nicht untersttzt. Diese Option steht nur zur Verfgung, wenn die Option Einbetten deaktiviert ist. Daten Legt eine zu ladende Datendatei fr das ActiveX-Steuerelement fest. Viele ActiveX-Steuerelemente, wie
Java-Applets einfgen
Mit Dreamweaver knnen Sie ein Java-Applet in ein HTML-Dokument einfgen. Java ist eine Programmiersprache, mit der kleine Anwendungen (Applets) entwickelt werden knnen. Diese Anwendungen knnen in Webseiten eingebettet werden. Nachdem Sie ein Java-Applet eingefgt haben, knnen Sie im Eigenschafteninspektor Parameter festlegen. Whlen Sie ein Java-Applet aus, damit die folgenden Eigenschaften im Eigenschafteninspektor angezeigt werden.
1 Setzen Sie die Einfgemarke im Dokumentfenster an die Stelle, an der Sie das Applet einfgen mchten. Fhren
Klicken Sie in der Kategorie Allgemein des Bedienfelds Einfgen auf die Schaltflche Medien und whlen Sie
das Symbol Applet aus.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 281
Inhalt in Seiten einfgen
Java-Applet-Eigenschaften
Der Eigenschafteninspektor zeigt zunchst nur die am hufigsten verwendeten Attribute an. Klicken Sie unten rechts auf den Erweiterungspfeil, um alle Eigenschaften anzuzeigen.
Name Legt einen Namen fest, um das Applet bei der Skriptverarbeitung zu identifizieren. Geben Sie in dem unbeschrifteten Feld ganz links im Eigenschafteninspektor einen Namen ein. B und H Legen die Breite und Hhe des Applets in Pixel fest. Code Bezeichnet die Datei, in der sich der Java-Code des Applets befindet. Klicken Sie auf das Ordnersymbol, um die
automatisch ausgefllt.
Ausrichten Legt fest, wie das Objekt auf der Seite ausgerichtet wird. Alt Legt den alternativen Inhalt fest (in der Regel ein Bild), der angezeigt werden soll, wenn der Browser des Benutzers
keine Java-Applets untersttzt oder wenn Java deaktiviert ist. Wenn Sie Text eingeben, fgt Dreamweaver den Text als Wert des Applet-Attributs alt ein. Wenn Sie ein Bild whlen, fgt Dreamweaver ein img-Tag zwischen dem ffnenden und dem schlieenden applet-Tag ein. Hinweis: Um alternativen Inhalt festzulegen, der sowohl in Netscape Navigator (wenn Java deaktiviert ist) als auch Lynx (einem textbasierten Browser) zu sehen ist, whlen Sie ein Bild aus und fgen ein alt-Attribut dem img-Tag im Codeinspektor manuell hinzu.
V-Abstand und H-Abstand Legen die Anzahl der Pixel fr den Leerraum oberhalb, unterhalb und an beiden Seiten des
Applets fest.
Parameter ffnet ein Dialogfeld, in dem Sie zustzliche Parameter eingeben knnen, die an das Applet bergeben werden sollen. Viele Applets reagieren auf Sonderparameter.
Verwandte Themen
Verhalten Shockwave oder SWF steuern definieren auf Seite 374 Verhalten Sound abspielen definieren auf Seite 378 Verhalten Plug-In berprfen definieren auf Seite 374
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 282
Inhalt in Seiten einfgen
einen Shockwave-Film, ein ActiveX-Steuerelement, ein Netscape Navigator-Plug-In oder ein Java-Applet).
2 ffnen Sie das Dialogfeld mit einer der folgenden Methoden:
Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste (Macintosh) auf das Objekt und
whlen Sie dann im Kontextmen die Option Parameter.
ffnen Sie den Eigenschafteninspektor, falls er nicht bereits geffnet ist, und klicken Sie in der unteren Hlfte des
Eigenschafteninspektors auf die Schaltflche Parameter. (Vergewissern Sie sich, dass der Eigenschafteninspektor erweitert ist.)
3 Klicken Sie auf die Schaltflche mit dem Pluszeichen (+) und geben Sie den Namen und den Wert des Parameters
Parameter entfernen
Whlen Sie einen Parameter aus und klicken Sie auf die Schaltflche mit dem Minuszeichen ().
Aufgaben automatisieren
Aufgabenautomatisierung
Im Bedienfeld Verlauf werden die beim Ausfhren von Aufgaben ausgefhrten Schritte aufgezeichnet. Automatisieren Sie eine hufig ausgefhrte Aufgabe, indem Sie die entsprechenden Schritte im Bedienfeld Verlauf wiederholen oder indem Sie einen neuen Befehl erstellen, mit dem diese Schritte automatisch ausgefhrt werden. Bestimmte Mausaktionen wie das Auswhlen durch Klicken im Dokumentfenster knnen nicht wiederholt oder gespeichert werden. Wenn Sie eine solche Mausaktion ausfhren, wird im Bedienfeld Verlauf eine schwarze Linie angezeigt (die erst sichtbar wird, wenn Sie eine andere Aktion ausfhren). Um dies zu vermeiden, sollten Sie die Einfgemarke im Dokumentfenster mglichst mit den Pfeiltasten und nicht mit der Maus verschieben. Einige andere Schritte knnen ebenfalls nicht wiederholt werden, z. B. das Ziehen eines Seitenelements an eine andere Stelle der Seite. Wenn Sie einen solchen Schritt ausfhren, wird im Bedienfeld Verlauf ein Symbol mit einem kleinen roten X angezeigt.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 283
Inhalt in Seiten einfgen
Gespeicherte Befehle stehen dauerhaft zur Verfgung (sofern Sie sie nicht lschen). Aufgezeichnete Befehle werden dagegen entfernt, wenn Sie Adobe Dreamweaver CS5 beenden. Kopierte Folgen von Schritten werden entfernt, wenn Sie andere Objekte kopieren.
A: Schieberegler B: Schritte C: Schaltflche Wiedergabe D: Schaltflche Schritte kopieren E: Schaltflche Als Befehl speichern
Der Schieberegler im Bedienfeld Verlauf zeigt anfnglich auf den zuletzt ausgefhrten Schritt. Hinweis: Sie knnen die Anordnung der Schritte im Bedienfeld Verlauf nicht ndern. Betrachten Sie das Bedienfeld Verlauf nicht als willkrliche Sammlung von Befehlen, sondern als Funktion, die ausgefhrten Schritte in der Reihenfolge ihrer Ausfhrung anzuzeigen.
Whlen Sie Bearbeiten > Rckgngig aus. Ziehen Sie den Schieberegler im Bedienfeld Verlauf um einen Bearbeitungsschritt in der Liste nach oben.
Hinweis: Wenn Sie die automatische Reglerbewegung zu einem bestimmten Schritt erreichen mchten, mssen Sie auf eine Stelle links von dem Schritt klicken. Wenn Sie auf den Schritt selbst klicken, wird er ausgewhlt. Das Auswhlen eines Schritts entspricht nicht dem Zurckwechseln zu diesem Schritt im Rckgngig-Verlauf.
Schritt. Der Schieberegler bewegt sich automatisch zu diesem Schritt und die dazwischen liegenden Schritte werden rckgngig gemacht. Hinweis: Wie beim Rckgngigmachen eines einzelnen Schritts knnen Sie auch nach dem Rckgngigmachen mehrerer Schritte keinen der Schritte wiederherstellen, nachdem Sie einen anderen Vorgang im Dokument durchgefhrt haben. Die rckgngig gemachten Schritte werden aus dem Bedienfeld Verlauf entfernt.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 284
Inhalt in Seiten einfgen
(Macintosh) aus.
2 Whlen Sie links in der Kategorieliste die Option Allgemein aus. 3 Geben Sie unter Zulssige Hchstzahl der Verlaufsschritte die gewnschte Zahl ein.
Wenn die maximale Anzahl der Schritte im Bedienfeld Verlauf erreicht ist, werden die ltesten Schritte gelscht.
Mit diesem Befehl werden zudem alle Rckgngig-Informationen fr das aktuelle Dokument gelscht. Nach dem Auswhlen von Verlauf leeren knnen die in der Liste gelschten Schritte nicht mehr angezeigt werden. Mit Verlauf leeren werden keine Schritte rckgngig gemacht, sondern lediglich die Aufzeichnungen der Schritte aus dem Speicher entfernt.
Schritte wiederholen
Im Bedienfeld Verlauf knnen Sie den letzten ausgefhrten Schritt, mehrere aufeinanderfolgende Schritte oder mehrere nicht aufeinanderfolgende Schritte wiederholen. Wiederholen Sie die Schritte direkt im Bedienfeld Verlauf.
Whlen Sie Bearbeiten > Wiederholen aus. Whlen Sie im Bedienfeld Verlauf einen Schritt aus und klicken Sie auf die Schaltflche Wiedergabe. Daraufhin
wird der Schritt wiederholt und im Bedienfeld Verlauf eine Kopie des Schritts angezeigt.
Um aufeinanderfolgende Schritte auszuwhlen, ziehen Sie den Mauszeiger von einem Schritt zu einem anderen.
(Ziehen Sie nicht den Schieberegler, sondern ziehen Sie den Mauszeiger von der Beschriftung eines Schritts zu der eines anderen.) Sie knnen auch den ersten Schritt auswhlen und dann bei gedrckter Umschalttaste auf den letzten Schritt klicken.
Um nicht aufeinanderfolgende Schritte auszuwhlen, whlen Sie einen Schritt aus und klicken Sie dann bei
gedrckter Strg-Taste (Windows) bzw. gedrckter Befehlstaste (Macintosh) auf weitere Schritte. Es werden die ausgewhlten (markierten) Schritte wiederholt und nicht unbedingt der Schritt, auf den der Schieberegler zeigt. Hinweis: Sie knnen eine Folge von Schritten, die eine schwarze Linie zur Angabe eines nicht aufzeichenbaren Schritts enthalten, zwar auswhlen, der entsprechende Schritt wird beim Wiederholen der Schritte jedoch bersprungen.
2 Klicken Sie auf Wiedergabe.
Die Schritte werden der Reihe nach wiederholt. Im Bedienfeld Verlauf wird ein neuer Schritt mit der Bezeichnung Schritte wiederholen angezeigt.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 285
Inhalt in Seiten einfgen
Wenn beim Ausfhren einer Aufgabe, die spter wiederholt werden soll, eine schwarze Linie fr nicht wiederholbare Mausaktionen angezeigt wird, knnen Sie alle Schritte bis zu dieser Aufgabe rckgngig machen und stattdessen eine andere Methode wie etwa die Pfeiltasten verwenden.
Aufzhlungspunkt oder Symbol), gefolgt von Text, besteht. Das Ziel soll sein, den Abstand zwischen den Bildern und dem Text sowie zwischen den vertikal aufeinanderfolgenden Bildern zu vergrern.
2 ffnen Sie den Eigenschafteninspektor (Fenster > Eigenschaften), wenn er noch nicht geffnet ist. 3 Whlen Sie das erste Bild aus. 4 Geben Sie im Eigenschafteninspektor in den Feldern V-Abstand und H-Abstand Zahlen ein, um den Abstand
sich genau links neben dem zweiten Bild der Reihe befindet.
8 Drcken Sie Umschalt+Pfeil-nach-rechts, um das zweite Bild auszuwhlen.
Hinweis: Whlen Sie das Bild nicht durch Klicken aus, da dieser Schritt spter nicht wiederholt werden kann.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 286
Inhalt in Seiten einfgen
9 Whlen Sie im Bedienfeld Verlauf die Schritte aus, die dem ndern des Abstands fr das Bild und dem
Auswhlen des nchsten Bilds entsprechen. Klicken Sie auf Wiedergabe, um diese Schritte zu wiederholen.
Der Abstand fr das aktuelle Bild ndert sich und das nchste Bild wird ausgewhlt.
10 Klicken Sie so oft auf Wiedergabe, bis alle Bilder den richtigen Abstand haben.
Hinweis: Die Schaltflche Schritte kopieren im Bedienfeld Verlauf entspricht nicht dem Befehl Kopieren im Men Bearbeiten. ber Bearbeiten > Kopieren knnen Sie keine Schritte kopieren, obwohl Sie sie ber Bearbeiten > Einfgen einfgen. Vorsicht beim Kopieren von Schritten, die den Befehl Kopieren oder Einfgen enthalten:
Verwenden Sie Schritte kopieren nicht, wenn einer der Schritte der Befehl Kopieren ist. Diese Schritte lassen
sich meist nicht problemlos einfgen.
Wenn die Schritte den Befehl Einfgen enthalten, knnen Sie sie nur einfgen, wenn sie vor diesem Befehl auch
den Befehl Kopieren enthalten.
3 ffnen Sie das andere Dokument. 4 Setzen Sie die Einfgemarke an die gewnschte Stelle oder whlen Sie ein Objekt aus, auf das die Schritte
Beim Einfgen in das Bedienfeld Verlauf des Dokuments werden die Schritte wiederholt. Im Bedienfeld Verlauf werden die Schritte nur als ein Schritt mit der Bezeichnung Schritte einfgen angezeigt. Wenn Sie Schritte in einen Texteditor, in die Codeansicht oder in den Codeinspektor einfgen, werden sie als JavaScript-Code angezeigt. Dies kann ntzlich sein, wenn Sie in Zukunft eigene Skripts schreiben mchten.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 287
Inhalt in Seiten einfgen
Verwandte Themen
Code schreiben und bearbeiten auf Seite 325
Befehle erstellen
1 Whlen Sie im Bedienfeld Verlauf einen Schritt oder eine Gruppe von Schritten aus. 2 Klicken Sie auf die Schaltflche Als Befehl speichern oder whlen Sie im Kontextmen des Bedienfelds Verlauf
Der Befehl wird im Men Befehle angezeigt. Hinweis: Der Befehl wird im Ordner Dreamweaver/Configuration/Commands als JavaScript-Datei (in manchen Fllen als HTML-Datei) gespeichert. Wenn Sie Dreamweaver auf einem Mehrbenutzer-Betriebssystem installiert haben, wird die Datei im Ordner Commands des entsprechenden Benutzers gespeichert.
Befehlsnamen bearbeiten
1 Whlen Sie Befehle > Befehlsliste bearbeiten aus. 2 Whlen Sie den Befehl aus, den Sie umbenennen mchten, geben Sie den neuen Namen ein und klicken Sie dann
auf Schlieen.
Befehl+Umschalt+X (Macintosh). Der Mauszeiger ndert seine Form. Dies weist darauf hin, dass eine Aufzeichnung stattfindet.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 288
Inhalt in Seiten einfgen
2 Wenn die Aufzeichnung abgeschlossen ist, whlen Sie Befehle > Aufzeichnung stoppen aus oder drcken Sie
und klicken Sie dann auf die Schaltflche Als Befehl speichern.
3 Geben Sie einen Namen fr den Befehl ein und klicken Sie auf OK.
ENTWURF
Letzte Aktualisierung 19.3.2010
289
Verwandte Themen
Hyperlinks in Dreamweaver testen auf Seite 299
Absolute Pfade (z. B. http://www.adobe.com/support/dreamweaver/contents.html) Dokumentrelative Pfade (z. B. dreamweaver/contents.html) Zum Site-Stammordner relative Pfade (z. B. /support/dreamweaver/contents.html)
In Dreamweaver knnen Sie auf einfache Weise den Typ des Dokumentpfads auswhlen, der fr die Hyperlinks erstellt werden soll. Hinweis: Es empfiehlt sich, den Hyperlink-Typ zu verwenden, den Sie bevorzugen und mit dem Sie am besten vertraut sind (entweder relativ zum Site-Stammordner oder dokumentrelativ). Wenn Sie die Zieldateien von Hyperlinks suchen, anstatt den Pfad direkt einzugeben, stellen Sie sicher, dass der Pfad korrekt ist.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 290
Hyperlinks und Navigation
Verwandte Themen
Relativen Pfad neuer Hyperlinks festlegen auf Seite 294
Absolute Pfade
Absolute Pfade enthalten die vollstndige URL des verknpften Dokuments und das zu verwendende Protokoll (fr Webseiten in der Regel http://), beispielsweise http://www.adobe.com/support/dreamweaver/contents.html. Fr ein Bildelement kann die vollstndige URL z. B. wie folgt lauten: http://www.adobe.com/support/dreamweaver/images/bild1.JPG. Absolute Pfade sind erforderlich, wenn Sie einen Hyperlink zu einem Dokument oder einem Element auf einem anderen Server erstellen. Sie knnen absolute Pfade zwar auch fr lokale Hyperlinks (d. h. fr Hyperlinks zu Dokumenten auf derselben Site) verwenden, davon wird jedoch abgeraten. Wenn Sie die Site in eine andere Domne verlagern, werden alle lokalen absoluten Pfade ungltig. Die Verwendung relativer Pfade fr lokale Hyperlinks bietet zudem eine grere Flexibilitt, wenn Sie die Dateien innerhalb der Website verschieben mssen. Hinweis: Beim Einfgen von Bildern (nicht Hyperlinks) knnen Sie absolute Pfade zu Bildern auf Remote-Servern verwenden (d. h. zu Bildern, die sich nicht auf der lokalen Festplatte befinden).
Dokumentrelative Pfade
Fr die meisten Websites eignen sich in der Regel dokumentrelative Pfade am besten. Sie sind besonders dann geeignet, wenn sich das aktuelle Dokument und das zu verknpfende Dokument bzw. Element im gleichen Ordner befinden und wahrscheinlich nicht verschoben werden. Darber hinaus knnen Sie mit einem dokumentrelativen Pfad einen Hyperlink zu einem Dokument bzw. Element in einem anderen Ordner erstellen, indem Sie den Pfad durch die Ordnerhierarchie vom aktuellen Dokument zum verknpften Dokument angeben. Wenn Sie einen dokumentrelativen Pfad angeben, lassen Sie den Teil des absoluten Pfads weg, der fr das aktuelle Dokument und das verknpfte Dokument bzw. Element identisch ist. Nur der Teil, der sich unterscheidet, wird angegeben. Angenommen, Sie haben eine Site mit folgender Struktur:
my_site (Stammordner) support contents.html hours.html Ressourcen tips.html Produkte catalog.html
index.html (Homepage)
Wenn Sie einen Hyperlink von contents.html zu hours.html (beide im gleichen Ordner) erstellen mchten,
verwenden Sie den relativen Pfad hours.html.
Wenn Sie einen Hyperlink von contents.html zu tips.html (im Unterordner resources) erstellen mchten,
verwenden Sie den relativen Pfad resources/tips.html. Mit jedem Schrgstrich (/) wird eine Ebene weiter unten in der Ordnerhierarchie angegeben.
Wenn Sie einen Hyperlink von contents.html zu index.html (im bergeordneten Ordner, eine Ebene ber
contents.html) erstellen mchten, verwenden Sie den relativen Pfad ../index.html. Mit zwei Punkten und einem Schrgstrich (../) wird eine Ebene weiter oben in der Ordnerhierarchie angegeben.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 291
Hyperlinks und Navigation
Wenn Sie einen Hyperlink von contents.html zu catalog.html (in einem anderen Unterordner des
bergeordneten Ordners) erstellen mchten, verwenden Sie den relativen Pfad ../products/catalog.html. In diesem Fall wird durch ../ die hhere Ebene des bergeordneten Ordners und durch products/ die tiefere Ebene des Unterordners products angegeben. Wenn Sie mehrere Dateien als Gruppe verschieben (z. B. beim Verschieben eines ganzen Ordners, bei dem alle im Ordner enthaltenen Dateien denselben relativen Pfad zueinander beibehalten), mssen Sie dokumentrelative Hyperlinks zwischen diesen Dateien nicht aktualisieren. Wenn Sie jedoch eine einzelne Datei mit dokumentrelativen Hyperlinks verschieben oder eine Datei, die durch einen dokumentrelativen Pfad verknpft ist, mssen Sie diese Hyperlinks aktualisieren. (Wenn Sie Dateien im Bedienfeld Dateien verschieben oder umbenennen, werden alle entsprechenden Hyperlinks in Dreamweaver automatisch aktualisiert.)
Hyperlinks erstellen
Hyperlinks zwischen Dateien und Dokumenten erstellen
Machen Sie sich vor dem Erstellen von Hyperlinks mit der Funktionsweise von absoluten, dokumentrelativen und zum Site-Stammordner relativen Pfaden vertraut. Sie knnen in einem Dokument verschiedene Typen von Hyperlinks erstellen:
Hyperlinks zu einem anderen Dokument oder einer anderen Datei, z. B. einer Grafik-, Film-, PDF- oder
Audiodatei
Hyperlinks mit einem benannten Anker, mit denen der Besucher zu einer bestimmten Stelle in einem Dokument
springt
E-Mail-Verknpfungen, mit denen eine leere E-Mail-Nachricht erstellt wird, wobei die Adresse des Empfngers
bereits eingetragen ist
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 292
Hyperlinks und Navigation
Null- und Skript-Hyperlinks, mit denen Sie einem Objekt ein Verhalten zuweisen oder einen Hyperlink erstellen
knnen, der JavaScript-Code ausfhrt Mit dem Eigenschafteninspektor und dem Dateizeigersymbol knnen Sie Hyperlinks von Bildern, Objekten oder Textpassagen zu einem anderen Dokument oder einer anderen Datei erstellen. In Dreamweaver werden Hyperlinks zu anderen Seiten auf der Site mithilfe dokumentrelativer Pfade erstellt. Sie knnen Dreamweaver auch so konfigurieren, dass neue Hyperlinks mit zum Site-Stammordner relativen Pfaden erstellt werden. Wichtig: Dokumentrelative Pfade sind ohne einen festen Ausgangspunkt nicht gltig. Daher sollten Sie eine neue Datei erst speichern und dann einen dokumentrelativen Pfad erstellen. Wenn Sie einen dokumentrelativen Pfad vor dem Speichern der Datei erstellen, verwendet Dreamweaver zunchst einen absoluten Pfad, der mit file:// beginnt. Beim Speichern der Datei wandelt Dreamweaver den Pfad mit file:// in einen relativen Pfad um. Ein Tutorial zur Erstellung von Hyperlinks finden Sie unter www.adobe.com/go/vid0149_de.
Verwandte Themen
Absolute, zum Dokument relative und zum Site-Stammordner relative Pfade auf Seite 289 Tutorial zur Erstellung von Hyperlinks
festlegen, einschlielich des Namens, der Gre und der Attribute (ob die Gre des Fensters gendert werden kann, ob es eine Menleiste hat usw.).
Sprungmen bearbeitet ein Sprungmen. Sie knnen die Menleiste ndern, eine andere verknpfte Datei angeben
oder den Ort im Browser whlen, an dem das verknpfte Dokument geffnet wird.
Verwandte Themen
Integrierte Dreamweaver-Verhalten definieren auf Seite 373
Der Pfad zum verknpften Dokument wird im Feld URL angezeigt. Geben Sie im Popupmen Relativ zu des Dialogfelds HTML-Datei auswhlen an, ob der Pfad dokumentrelativ oder stammrelativ ist. Klicken Sie dann auf Auswhlen. Der ausgewhlte Pfadtyp gilt nur fr den aktuellen Hyperlink. (Sie knnen die Standardeinstellung des Felds Relativ zu fr die Site ndern.)
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 293
Hyperlinks und Navigation
Geben Sie den Pfad und Dateinamen des Dokuments im Feld Hyperlink ein.
Wenn Sie einen Hyperlink zu einem Dokument auf der Site erstellen mchten, geben Sie einen dokumentrelativen oder einen zum Site-Stammordner relativen Pfad ein. Wenn Sie einen Hyperlink zu einem Dokument auerhalb Ihrer Site erstellen mchten, geben Sie einen absoluten Pfad samt Protokoll ein (z. B. http://). Dieses Verfahren eignet sich fr Hyperlinks zu Dateien, die noch nicht erstellt wurden.
3 Whlen Sie im Popupmen Ziel einen Ort aus, in dem das Dokument geffnet werden soll:
_blank ldt das verknpfte Dokument in ein neues, unbenanntes Browserfenster. _parent ldt das verknpfte Dokument in das bergeordnete Frameset oder Fenster des Frames, in dem der Hyperlink enthalten ist. Wenn der Frame, der den Hyperlink enthlt, nicht verschachtelt ist, wird das verknpfte Dokument in das ganze Browserfenster geladen. _self ldt das verknpfte Dokument in denselben Frame oder dasselbe Fenster wie den Hyperlink. Dies ist das
Wenn fr alle Hyperlinks auf der Seite das gleiche Ziel verwendet werden soll, knnen Sie dieses Ziel einmal angeben, indem Sie auf Einfgen > HTML > Head-Tags > Basis klicken und anschlieend die Zielinformationen auswhlen. Weitere Informationen zur Verwendung von Frames als Ziele finden Sie unter Frame-Inhalte durch Hyperlinks steuern auf Seite 216.
Verwandte Themen
Absolute, zum Dokument relative und zum Site-Stammordner relative Pfade auf Seite 289
(Zielsymbol) rechts neben dem Feld Hyperlink im Eigenschafteninspektor und zeigen Sie auf einen sichtbaren Anker im aktuellen Dokument, auf einen sichtbaren Anker in einem anderen geffneten Dokument, auf ein Element mit einer eindeutigen ID oder auf ein Dokument im Bedienfeld Dateien. einen sichtbaren Anker in einem anderen geffneten Dokument, auf ein Element mit einer eindeutigen ID oder auf ein Dokument im Bedienfeld Dateien.
Ziehen Sie den Mauszeiger bei gedrckter Umschalttaste auf einen sichtbaren Anker im aktuellen Dokument, auf
Hinweis: Sie knnen nur dann einen Hyperlink zu einem anderen geffneten Dokument erstellen, wenn im Dokumentfenster keine Dokumente maximiert sind. Um Dokumentfenster nebeneinander anzuordnen, whlen Sie Fenster > berlappend oder Fenster > Nebeneinander aus. Wenn Sie auf ein geffnetes Dokument zeigen, wird es in den Vordergrund des Bildschirms verschoben, whrend Sie die Auswahl vornehmen.
Verwandte Themen
Hyperlinks zu bestimmten Stellen in einem Dokument erstellen auf Seite 295
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 294
Hyperlinks und Navigation
2 Fhren Sie einen der folgenden Schritte aus, um das Dialogfeld Hyperlink einfgen anzuzeigen:
Whlen Sie Einfgen > Hyperlink aus. Klicken Sie in der Kategorie Allgemein des Bedienfelds Einfgen auf die Schaltflche Hyperlink.
3 Geben Sie den Text des Hyperlinks und im Textfeld Hyperlink den Namen der Datei ein, zu der ein Hyperlink
erstellt werden soll (oder klicken Sie auf das Ordnersymbol Namen ein.
4 Whlen Sie im Popupmen Ziel das Fenster aus, in dem die Datei geffnet werden soll, oder geben Sie dessen
Im Listenfeld sind die Namen aller Frames aufgefhrt, die Sie im aktuellen Dokument benannt haben. Wenn Sie einen Frame angeben, der nicht vorhanden ist, wird die verknpfte Seite in einem neuen Fenster geffnet, das den angegebenen Namen erhlt. Sie knnen auch einen der folgenden reservierten Zielnamen auswhlen:
_blank ldt die verknpfte Datei in ein neues, unbenanntes Browserfenster. _parent ldt die verknpfte Datei in das bergeordnete Frameset oder Fenster des Frames, in dem der Hyperlink enthalten ist. Wenn der Frame, der den Hyperlink enthlt, nicht verschachtelt ist, wird die verknpfte Datei in das ganze Browserfenster geladen. _self ldt die verknpfte Datei in denselben Frame oder dasselbe Fenster wie den Hyperlink. Dies ist das
5 Geben Sie im Feld Reihenfolgenposition eine Zahl ein. 6 Geben Sie im Feld Titel einen Titel fr den Hyperlink ein. 7 Geben Sie im Feld Zugriffstaste eine Tastaturtaste (einen Buchstaben) zum Auswhlen des Hyperlinks im
Browser ein.
8 Klicken Sie auf OK.
auswhlen. Der Pfad vorhandener Hyperlinks wird nicht gendert, wenn Sie nach dem ndern dieser Einstellung auf OK klicken. Die Einstellung gilt nur fr neue Hyperlinks, die Sie mit Dreamweaver erstellen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 295
Hyperlinks und Navigation
Hinweis: In der Vorschau eines Dokuments in einem lokalen Browser wird Inhalt, der mit einem zum Site-Stammordner relativen Pfad verknpft ist, nur angezeigt, wenn Sie entweder einen Testserver angeben oder unter Bearbeiten > Voreinstellungen > Vorschau in Browser die Option Vorschau mit temporrer Datei auswhlen. Der Grund hierfr ist, dass Browser im Gegensatz zu Servern Sitestmme nicht erkennen knnen. Wenn Sie eine Vorschau des Inhalts anzeigen mchten, der durch stammrelative Pfade verknpft ist, bertragen Sie die Datei an einen Remote-Server und whlen Sie dann Datei > Vorschau in Browser aus.
5 Klicken Sie auf Speichern.
Verwandte Themen
Absolute, zum Dokument relative und zum Site-Stammordner relative Pfade auf Seite 289
Whlen Sie Einfgen > Benannter Ankerpunkt aus. Drcken Sie Strg+Alt+A (Windows) bzw. Befehl+Wahl+A (Macintosh). Klicken Sie in der Kategorie Allgemein des Bedienfelds Einfgen auf die Schaltflche Benannter Anker.
3 Geben Sie im Feld Ankername einen Namen fr den Anker ein und klicken Sie auf OK. (Der Ankername darf
keine Leerzeichen enthalten.) Das Ankersymbol wird an der Einfgemarke eingeblendet. Hinweis: Wenn das Ankersymbol nicht angezeigt wird, whlen Sie Ansicht > Visuelle Hilfsmittel > Unsichtbare Elemente aus.
beispielsweise im aktuellen Dokument einen Hyperlink zu einem Anker mit der Bezeichnung #top zu erstellen, geben Sie Folgendes ein: Um einen Hyperlink zu einem Anker namens top in einem anderen Dokument im selben Ordner herzustellen, geben Sie Dateiname.html#top ein. Hinweis: Bei Ankernamen wird die Gro- und Kleinschreibung bercksichtigt.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 296
Hyperlinks und Navigation
Hinweis: Wenn der Anker nicht angezeigt wird, knnen Sie ihn mit Ansicht > Visuelle Hilfsmittel > Unsichtbare Elemente sichtbar machen.
2 Whlen Sie in der Entwurfsansicht des Dokumentfensters den Text oder das Bild aus, von dem Sie den Hyperlink
erstellen mchten. (Wenn sich der Text oder das Bild in einem anderen geffneten Dokument befindet, mssen Sie zu diesem Dokument wechseln.)
3 Fhren Sie einen der folgenden Schritte aus:
Klicken Sie im Eigenschafteninspektor rechts neben dem Feld Hyperlink auf das Dateizeigersymbol
(Zielsymbol) und ziehen Sie es auf den Anker, zu dem Sie den Hyperlink erstellen mchten entweder im gleichen oder in einem anderen geffneten Dokument.
Ziehen Sie den ausgewhlten Text oder das ausgewhlte Bild im Dokumentfenster bei gedrckter Umschalttaste
auf den Anker, zu dem der Hyperlink erstellt werden soll. Das ist entweder ein Anker im gleichen oder in einem anderen geffneten Dokument.
E-Mail-Verknpfungen erstellen
Wenn Sie auf eine E-Mail-Verknpfung klicken, wird ein neues Nachrichtenfenster in dem E-Mail-Programm geffnet, das mit dem Browser des Benutzers verknpft ist. Im Feld An im Fenster der E-Mail-Nachricht wird die im E-Mail-Hyperlink angegebene Adresse automatisch eingefgt.
Verknpfung eingefgt werden soll, oder whlen Sie den Text oder das Bild aus, die als E-Mail-Verknpfung angezeigt werden sollen.
2 Fhren Sie einen der folgenden Schritte aus, um die Verknpfung einzufgen:
Whlen Sie Einfgen > E-Mail-Verknpfung aus. Klicken Sie in der Kategorie Allgemein des Bedienfelds Einfgen auf die Schaltflche E-Mail-Verknpfung.
3 Geben Sie im Feld Text den Text der E-Mail ein oder bearbeiten Sie ihn. 4 Geben Sie im Feld E-Mail die E-Mail-Adresse ein und klicken Sie auf OK.
Geben Sie keine Leerzeichen zwischen dem Doppelpunkt und der E-Mail-Adresse ein.
geben Sie nach dem Gleichheitszeichen einen Betreff an. Geben Sie zwischen dem Fragezeichen und dem Ende der E-Mail-Adresse keine Leerzeichen ein. Der vollstndige Text sieht etwa folgendermaen aus:
mailto:jemand@IhreSite.com?subject=E-Mail von unserer Site
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 297
Hyperlinks und Navigation
Verwandte Themen
Verhalten definieren auf Seite 371
Null-Hyperlinks erstellen
1 Whlen Sie in der Entwurfsansicht des Dokumentfensters eine Textstelle, ein Objekt oder ein Bild aus. 2 Geben Sie im Eigenschafteninspektor im Feld Hyperlink die Zeichenkette javascript:; ein (d. h. das Wort
Skript-Hyperlinks erstellen
1 Whlen Sie in der Entwurfsansicht des Dokumentfensters eine Textstelle, ein Objekt oder ein Bild aus. 2 Geben Sie im Eigenschafteninspektor im Feld Hyperlink javascript:, gefolgt von JavaScript-Code oder einem
Funktionsaufruf, ein. (Geben Sie keine Leerzeichen zwischen dem Doppelpunkt und dem Code oder dem Funktionsaufruf ein.)
(Macintosh) aus.
2 Whlen Sie links im Dialogfeld Voreinstellungen in der Kategorieliste die Option Allgemein aus. 3 Whlen Sie im Bereich Dokumentoptionen der allgemeinen Voreinstellungen eine Option im Popupmen
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 298
Hyperlinks und Navigation
Nie Aktualisiert nicht automatisch alle Hyperlinks zu und von einem ausgewhlten Dokument, wenn Sie dieses
Klicken Sie auf Aktualisieren, um die Hyperlinks in diesen Dateien zu aktualisieren, oder auf Nicht aktualisieren, wenn die Dateien nicht gendert werden sollen.
4 Klicken Sie auf OK.
Wenn Sie nach dem Starten von Dreamweaver zum ersten Mal Hyperlinks zu Dateien im lokalen Ordner ndern oder lschen, werden Sie in Dreamweaver aufgefordert, den Cache zu laden. Wenn Sie auf Ja klicken, wird der Cache geladen, und Dreamweaver aktualisiert alle Hyperlinks zu den gerade genderten Dateien. Wenn Sie auf Nein klicken, wird die nderung zwar im Cache aufgezeichnet, der Cache wird in Dreamweaver jedoch nicht geladen und die Hyperlinks werden nicht aktualisiert. Das Laden des Caches kann bei umfangreicheren Sites einige Minuten dauern, da in Dreamweaver ermittelt werden muss, ob der Cache die aktuellen Daten enthlt, indem die Zeitstempel der Dateien der lokalen Site mit den im Cache aufgezeichneten Zeitstempeln verglichen werden. Wenn Sie die Dateien nicht in anderen Anwendungen auerhalb von Dreamweaver bearbeitet haben, knnen Sie ohne Weiteres auf die Schaltflche Stopp klicken, wenn diese Schaltflche eingeblendet wird.
Hinweis: Wenn Sie einen E-Mail-, FTP-, Null- oder Skript-Hyperlink ndern, mssen Sie keine Datei auswhlen.
2 Whlen Sie Site > Hyperlink fr ganze Site ndern aus. 3 Legen Sie die folgenden Optionen im Dialogfeld Hyperlink fr ganze Site ndern fest:
ndern aller Hyperlinks zu Klicken Sie auf das Ordnersymbol
, um die Zieldatei zu suchen und auszuwhlen, fr die Hyperlinks entfernt werden sollen. Wenn Sie E-Mail-, FTP-, Null- oder Skript-Hyperlinks ndern, mssen Sie den vollstndigen Text des zu ndernden Hyperlinks eingeben.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 299
Hyperlinks und Navigation
, um die neue zu verknpfende Datei zu suchen und auszuwhlen. Wenn Sie E-Mail-, FTP-, Null- oder Skript-Hyperlinks ndern, mssen Sie den vollstndigen Text des neuen Hyperlinks eingeben.
Dreamweaver aktualisiert alle Dokumente, die mit der ausgewhlten Datei verknpft sind, sodass sie auf die neue Datei verweisen. Dabei wird das Pfadformat des Dokuments bernommen (wenn der alte Pfad z. B. dokumentrelativ ist, ist auch der neue Pfad dokumentrelativ). Nachdem ein Hyperlink auf der gesamten Site gendert wurde, ist die ausgewhlte Datei verwaist (d. h., keine Dateien auf dem lokalen Datentrger verweisen auf diese Datei). Sie knnen diese Datei daher bedenkenlos lschen, da dadurch keine Hyperlinks der lokalen Dreamweaver-Site beschdigt werden. Wichtig: Da diese nderungen nur lokal durchgefhrt werden, mssen Sie die entsprechende verwaiste Datei im RemoteOrdner manuell lschen und Dateien mit genderten Hyperlinks hochladen oder einchecken. Andernfalls sind die nderungen fr Besucher der Website nicht sichtbar.
Markieren Sie den Hyperlink und whlen Sie dann Modifizieren > Verknpfte Seite ffnen aus. Drcken Sie die Strg-Taste (Windows) bzw. die Befehlstaste (Macintosh) und doppelklicken Sie auf den Hyperlink.
Hinweis: Das verknpfte Dokument muss sich auf dem lokalen Datentrger befinden.
Verwandte Themen
Fehlerhafte, externe und verwaiste Hyperlinks suchen auf Seite 304 Fehlerhafte Hyperlinks reparieren auf Seite 305
Sprungmens
Informationen zu Sprungmens
Ein Sprungmen ist ein Popupmen in einem Dokument, mit dem Besuchern der Website Hyperlinks zu Dokumenten oder Dateien angezeigt werden. Sie knnen Hyperlinks zu Dokumenten auf der Website, zu Dokumenten auf anderen Websites, E-Mail-Verknpfungen, Hyperlinks zu Grafiken oder zu allen Dateitypen erstellen, die in einem Browser geffnet werden knnen. Jeder Option in einem Sprungmen ist eine URL zugeordnet. Wenn Benutzer eine Option auswhlen, erfolgt die Weiterleitung (der Sprung) zur zugeordneten URL. Sprungmens werden im Formularobjekt Sprungmen eingefgt. Ein Sprungmen kann drei Komponenten enthalten:
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 300
Hyperlinks und Navigation
Erforderlich: Eine Liste verknpfter Menoptionen. Ein Benutzer whlt eine Option aus und ein verknpftes
Dokument oder eine verknpfte Datei wird geffnet.
Verwandte Themen
Verhalten Sprungmen definieren auf Seite 377 Verhalten Sprungmen Gehe zu definieren auf Seite 377
Sprungmens einfgen
1 ffnen Sie ein Dokument und setzen Sie dann die Einfgemarke in das Dokumentfenster. 2 Fhren Sie einen der folgenden Schritte aus:
Whlen Sie Einfgen > Formular > Sprungmen aus. Klicken Sie in der Kategorie Formulare des Bedienfelds Einfgen auf die Schaltflche Sprungmen.
3 Legen Sie die Optionen im Dialogfeld Sprungmen einfgen fest und klicken Sie auf OK. Es folgt eine
weiterer Elemente erneut auf +. Um ein Element zu lschen, markieren Sie es und klicken Sie auf .
Pfeilschaltflchen Whlen Sie ein Element aus und klicken Sie auf die Pfeile, um es in der Liste nach oben oder nach
unten zu verschieben.
Text Geben Sie den Namen fr ein unbenanntes Element ein. Wenn das Men eine Auswahlaufforderung enthalten
soll (z. B. Whlen Sie eine Option aus), geben Sie diese hier als erstes Menelement ein. (Sie mssen in diesem Fall ebenfalls unten die Option Erstes Objekt nach URL-nderung auswhlen aktivieren.)
Wenn ausgewhlt, gehe zu Navigieren Sie zur Zieldatei oder geben Sie ihren Pfad ein. ffne URLs in Geben Sie an, ob die Datei im gleichen Fenster oder in einem Frame geffnet werden soll. Wenn der Ziel-Frame nicht im Men angezeigt wird, schlieen Sie das Dialogfeld Sprungmen einfgen und benennen Sie den Frame. Schaltflche Gehe zu hinter Men einfgen Whlen Sie diese Option aus, damit anstelle einer
Verwandte Themen
Eigenschaften und Attribute fr Frames anzeigen und festlegen auf Seite 212
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 301
Hyperlinks und Navigation
3 Klicken Sie im Eigenschafteninspektor auf die Schaltflche Listenwerte. 4 Nehmen Sie im Dialogfeld Listenwerte die gewnschten nderungen an den Menelementen vor und klicken
Verwandte Themen
Verhalten Sprungmen definieren auf Seite 377
Verwenden Sie eine Menauswahlaufforderung, z. B. eine Kategorie oder eine Benutzeraufforderung wie Whlen
Sie eine Option aus:. Menauswahlaufforderungen werden nach jeder Menauswahl automatisch erneut ausgewhlt.
Verwenden Sie eine Schaltflche Gehe zu, ber die Besucher der Website den aktuellen ausgewhlten Hyperlink
erneut aufrufen knnen. Wenn die Schaltflche Gehe zu mit einem Sprungmen verwendet wird, gelangt der Benutzer ausschlielich ber diese Schaltflche zu der URL des im Men ausgewhlten Eintrags. Wenn ein Benutzer im Sprungmen ein Menelement auswhlt, wird er nicht mehr automatisch auf eine andere Seite oder in einen anderen Frame umgeleitet. Hinweis: Verwenden Sie im Dialogfeld Sprungmen einfgen in jedem Sprungmen nur eine dieser Optionen, da sie sich auf das gesamte Sprungmen auswirken.
Navigationsleisten
Informationen zu Navigationsleisten
Die Funktion Navigationsleiste ist ab Dreamweaver CS5 veraltet. Zum Erstellen von Navigationsleisten wird die Verwendung des Menleisten-Widgets empfohlen.
Verwandte Themen
Mit dem Menleisten-Widget arbeiten auf Seite 457
Imagemaps
Informationen zu Imagemaps
Imagemaps sind Bilder, die in Bereiche oder Hotspots unterteilt sind. Wenn ein Besucher auf einen Hotspot klickt, wird eine Aktion ausgefhrt (beispielsweise wird eine neue Datei geffnet).
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 302
Hyperlinks und Navigation
Bei clientseitigen Imagemaps werden die Hyperlinkinformationen im HTML-Dokument gespeichert und nicht in einer separaten Mapdatei wie bei serverseitigen Imagemaps. Wenn ein Besucher auf einen Hotspot im Bild klickt, wird die zugeordnete URL direkt an den Server gesendet. Dadurch sind clientseitige Imagemaps schneller als ServerImagemaps, da der Server nicht interpretieren muss, auf welche Stelle der Benutzer geklickt hat. Clientseitige Imagemaps werden in Netscape Navigator ab Version 2.0, NCSA Mosaic 2.1 und 3.0 sowie in allen Microsoft Internet Explorer-Versionen untersttzt. Dreamweaver ndert keine Verweise auf Server-Imagemaps in vorhandenen Dokumenten. Ein Dokument kann client- und serverseitige Imagemaps enthalten. Beachten Sie, dass Browser, die beide Arten von Imagemaps untersttzen, clientseitigen Imagemaps den Vorrang geben. Wenn Sie eine Server-Imagemap in ein Dokument einfgen mchten, mssen Sie den entsprechenden HTML-Code erstellen.
Eigenschaften einzublenden.
3 Geben Sie im Feld Imagemap einen eindeutigen Namen fr die Imagemap-Datei ein. Wenn Sie mehrere
Imagemaps in einem Dokument verwenden, stellen Sie sicher, dass Sie jeder Imagemap einen eindeutigen Namen zuweisen.
4 Definieren Sie die Imagemap-Bereiche mit einem der folgenden Schritte:
und ziehen Sie den Mauszeiger um das Bild, um einen runden Hotspot zu und ziehen Sie den Mauszeiger um das Bild, um einen rechteckigen
und definieren Sie einen unregelmig geformten Hotspot, indem Sie einmal fr jeden Eckpunkt klicken. Klicken Sie auf das Pfeilsymbol, um die Form zu schlieen.
Nach dem Erstellen eines Hotspots wird der Eigenschafteninspektor fr Hotspots angezeigt.
5 Klicken Sie im Feld Hyperlink des Eigenschafteninspektors fr Hotspots auf das Ordnersymbol
, um die zu ffnende Datei auszuwhlen, die beim Klicken auf den Hotspot geffnet werden soll oder geben Sie den Pfad direkt ein. Namen ein.
6 Whlen Sie im Popupmen Ziel das Fenster aus, in dem die Datei geffnet werden soll, oder geben Sie dessen
Im Listenfeld sind die Namen aller Frames aufgefhrt, die Sie im aktuellen Dokument benannt haben. Wenn Sie einen Frame angeben, der nicht vorhanden ist, wird die verknpfte Seite in einem neuen Fenster geladen, das den angegebenen Namen erhlt. Sie knnen auch einen der folgenden reservierten Zielnamen auswhlen:
_blank ldt die verknpfte Datei in ein neues, unbenanntes Browserfenster. _parent ldt die verknpfte Datei in das bergeordnete Frameset oder Fenster des Frames, in dem der Hyperlink enthalten ist. Wenn der Frame, der den Hyperlink enthlt, nicht verschachtelt ist, wird die verknpfte Datei in das ganze Browserfenster geladen. _self ldt die verknpfte Datei in denselben Frame oder dasselbe Fenster wie den Hyperlink. Dies ist das
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 303
Hyperlinks und Navigation
_top ldt die verknpfte Datei in das ganze Browserfenster, wodurch alle Frames entfernt werden.
Hinweis: Die Option Ziel ist nur verfgbar, wenn der ausgewhlte Hotspot einen Hyperlink enthlt.
7 Geben Sie im Feld Alt den alternativen Text ein, der in reinen Textbrowsern oder in Browsern angezeigt wird,
bei denen Bilder manuell heruntergeladen werden. In einigen Browsern wird dieser Text als QuickInfo angezeigt, wenn die Besucher der Website den Mauszeiger ber den Hotspot bewegen.
8 Wiederholen Sie die Schritte 4 bis 7, um weitere Hotspots in der Imagemap zu definieren. 9 Wenn Sie dem Bild alle gewnschten Verknpfungen hinzugefgt haben, klicken Sie auf einen leeren Bereich im
Imagemap-Hotspots ndern
Sie knnen die in einer Imagemap erstellten Hotspots problemlos bearbeiten. Sie knnen Hotspot-Bereiche verschieben, Hotspots vergrern bzw. verkleinern oder Hotspots innerhalb eines absolut positionierten Elements (AP-Element) vor- und zurckverschieben. Sie knnen auch ein Bild mit Hotspots von einem Dokument in ein anderes kopieren oder einen oder mehrere Hotspots kopieren und in ein anderes Bild einfgen. Die dem Bild zugewiesenen Hotspots werden dabei ebenfalls in das neue Dokument kopiert.
Klicken Sie bei gedrckter Umschalttaste auf die anderen Hotspots, die Sie auswhlen mchten. Drcken Sie Strg+A (Windows) bzw. Befehl+A (Macintosh), um alle Hotspots auszuwhlen.
Hotspots verschieben
1 Whlen Sie den Hotspot mit dem Tool fr Mauszeiger-Hotspots aus. 2 Fhren Sie einen der folgenden Schritte aus:
Ziehen Sie den Hotspot an eine neue Stelle. Verschieben Sie den Hotspot um 10 Pixel in eine bestimmte Richtung, indem Sie bei gedrckter Strg-Taste die
entsprechende Pfeiltaste drcken.
Verschieben Sie den Hotspot um 1 Pixel in eine bestimmte Richtung, indem Sie die entsprechende Pfeiltaste
drcken.
aus.
2 ndern Sie die Gre oder Form des Hotspots durch Ziehen eines Ziehpunkts zur Grennderung von Hotspots.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 304
Hyperlinks und Navigation
Verwandte Themen
Nicht verwendete Dateien identifizieren und lschen auf Seite 84
Der Bericht Fehlerhafte Hyperlinks wird im Bedienfeld Hyperlink-Prfer (in der Bedienfeldgruppe Ergebnisse) angezeigt.
3 Whlen Sie im Bedienfeld Hyperlink-Prfer im Popupmen Anzeigen die Option Externe Hyperlinks aus,
um einen anderen Bericht anzuzeigen. Der Bericht Externe Hyperlinks wird im Bedienfeld Hyperlink-Prfer (in der Bedienfeldgruppe Ergebnisse) angezeigt. Sie knnen nach verwaisten Dateien suchen, wenn Sie Hyperlinks auf der ganzen Site berprfen.
4 Wenn Sie den Bericht speichern mchten, klicken Sie im Bedienfeld Hyperlink-Prfer auf die Schaltflche
Bericht speichern. Der Bericht ist eine temporre Datei. Er wird gelscht, wenn Sie ihn nicht speichern.
Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste (Macintosh) auf eine der
ausgewhlten Dateien und whlen Sie dann im Kontextmen die Optionen Hyperlinks berprfen > Ausgewhlte Dateien/Ordner aus.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 305
Hyperlinks und Navigation
Der Bericht Externe Hyperlinks wird im Bedienfeld Hyperlink-Prfer (in der Bedienfeldgruppe Ergebnisse) angezeigt. Sie knnen nach verwaisten Dateien suchen, wenn Sie Hyperlinks auf der ganzen Site berprfen.
5 Wenn Sie einen Bericht speichern mchten, klicken Sie im Bedienfeld Hyperlink-Prfer auf die Schaltflche
Bericht speichern.
Der Bericht Fehlerhafte Hyperlinks wird im Bedienfeld Hyperlink-Prfer (in der Bedienfeldgruppe Ergebnisse) angezeigt.
3 Whlen Sie im Bedienfeld Hyperlink-Prfer im Popupmen Anzeigen die Option Externe Hyperlinks oder
Verwaiste Dateien aus, um einen anderen Bericht anzuzeigen. Im Bedienfeld Hyperlink-Prfer wird eine Liste der Dateien angezeigt, die dem ausgewhlten Berichtstyp entsprechen. Hinweis: Wenn Sie den Berichtstyp Verwaiste Dateien auswhlen, knnen Sie verwaiste Dateien direkt im Bedienfeld Hyperlink-Prfer lschen. Whlen Sie dazu eine Datei in der Liste aus und drcken Sie die Entf-Taste.
4 Wenn Sie einen Bericht speichern mchten, klicken Sie im Bedienfeld Hyperlink-Prfer auf die Schaltflche
Bericht speichern.
Bedienfelds Hyperlink-Prfer (in der Bedienfeldgruppe Ergebnisse) aus. Neben dem fehlerhaften Hyperlink wird ein Ordnersymbol angezeigt.
3 Klicken Sie auf das Ordnersymbol
neben dem fehlerhaften Hyperlink, um die entsprechende Datei auszuwhlen, oder geben Sie den korrekten Pfad und Dateinamen ein.
4 Drcken Sie die Tabulatortaste oder die Eingabetaste (Windows) bzw. Return (Macintosh).
Wenn weitere fehlerhafte Verweise zu derselben Datei vorhanden sind, werden Sie aufgefordert, auch die Verweise in den anderen Dateien zu reparieren. Klicken Sie auf Ja, damit in Dreamweaver alle aufgelisteten Dokumente aktualisiert werden, die auf diese Datei verweisen. Klicken Sie auf Nein, wenn in Dreamweaver nur der aktuelle Verweis aktualisiert werden soll. Hinweis: Wenn Ein- und Auschecken von Dateien aktivieren fr die Site aktiviert ist, versucht Dreamweaver, Dateien auszuchecken, die gendert werden mssen. Wenn eine Datei nicht ausgecheckt werden kann, wird in Dreamweaver eine Warnmeldung angezeigt und die fehlerhaften Verweise werden nicht gendert.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 306
Hyperlinks und Navigation
der Spalte Dateien. Daraufhin ffnet Dreamweaver das Dokument, whlt das fehlerhafte Bild oder den fehlerhaften Hyperlink aus und markiert im Eigenschafteninspektor den Pfad und den Dateinamen. (Wenn der Eigenschafteninspektor nicht angezeigt wird, whlen Sie Fenster > Eigenschaften aus, um ihn zu ffnen.)
3 Legen Sie im Eigenschafteninspektor einen neuen Pfad und Dateinamen fest, indem Sie auf das Ordnersymbol
klicken, um die Datei auszuwhlen, oder indem Sie den markierten Text berschreiben. Wenn Sie einen Bildverweis aktualisieren und das neue Bild nicht in der korrekten Gre angezeigt wird, klicken Sie im Eigenschafteninspektor auf B und H oder klicken Sie auf die Schaltflche Aktualisieren, um die Werte fr Breite und Hhe zurckzusetzen.
4 Speichern Sie die Datei.
Die reparierten Hyperlinks werden aus der Liste im Hyperlink-Prfer entfernt. Wenn Sie im Hyperlink-Prfer einen neuen Pfad und Dateinamen eingegeben haben (oder die nderungen im Eigenschafteninspektor gespeichert haben), der Hyperlink jedoch weiterhin in der Liste angezeigt wird, bedeutet dies, dass die neue Datei inDreamweaver nicht gefunden wird und der Hyperlink weiterhin als fehlerhaft angezeigt wird.
ENTWURF
Letzte Aktualisierung 19.3.2010
307
Seitenvorschau in Dreamweaver
Live-Ansicht
Die Live-Ansicht unterscheidet sich von der herkmmlichen Dreamweaver-Entwurfsansicht dadurch, dass sie eine nicht bearbeitbare, realistischere Darstellung Ihrer Seite in einem Browser bietet. Die Live-Ansicht ersetzt nicht den Befehl Vorschau in Browser, sondern bietet vielmehr eine weitere Mglichkeit, die Darstellung Ihrer Seite live zu prfen, ohne dazu den Dreamweaver-Arbeitsbereich verlassen zu mssen. Wenn Sie sich in der Entwurfsansicht befinden, knnen Sie jederzeit zur Live-Ansicht wechseln. Der Wechsel zur Live-Ansicht ist jedoch nicht mit dem Wechsel zwischen den anderen herkmmlichen Dreamweaver-Ansichten (Codeansicht/Geteilte Ansicht/Entwurfsansicht) vergleichbar. Beim Wechseln aus der Entwurfsansicht zur LiveAnsicht wird die Entwurfsansicht lediglich zwischen den beiden Zustnden bearbeitbar und live umgeschaltet. Nach dem Wechsel zur Live-Ansicht ist die Entwurfsansicht zwar fixiert, die Codeansicht bleibt jedoch bearbeitbar. Sie knnen also Codenderungen vornehmen und dann die Live-Ansicht aktualisieren, um die nderungen zu bernehmen. In der Live-Ansicht besteht die zustzliche Mglichkeit, zur Live-Codeansicht zu wechseln. Die LiveCodeansicht entspricht insofern der Live-Ansicht, dass eine Version des Codes angezeigt wird, den der Browser zum Darstellen der Seite ausfhrt. Wie die Live-Ansicht ist auch die Live-Codeansicht nicht bearbeitbar. Ein zustzlicher Vorteil der Live-Ansicht ist die Mglichkeit, JavaScript anzuhalten. Sie knnen beispielsweise zur Live-Ansicht wechseln und den Mauszeiger ber Spry-basierte Tabellenzeilen fhren, deren Farbe sich in Abhngigkeit von der Benutzerinteraktion ndert. Wenn Sie dann JavaScript anhalten, wird die Seite in der LiveAnsicht in ihrem aktuellen Zustand fixiert. Sie knnen nun den CSS- bzw. JavaScript-Code bearbeiten und die Seite aktualisieren, um die nderungen zu berprfen. Das Anhalten von JavaScript in der Live-Ansicht ist hilfreich, wenn Sie Eigenschaften fr die verschiedenen Zustnde von Popupmens oder anderen interaktiven Elementen prfen und ndern mchten, die in der herkmmlichen Entwurfsansicht nicht dargestellt werden. Ein Video des Dreamweaver-Entwicklungsteams mit einem berblick ber die Verwendung der Live-Ansicht finden Sie unter www.adobe.com/go/dw10liveview_de. Ein Video des Dreamweaver-Entwicklungsteams mit einem berblick ber die Navigation in der Live-Ansicht finden Sie unter www.adobe.com/go/dwcs5livenav_de. Ein Video-Tutorial zum Verwenden der Live-Ansicht sowie zu zugehrigen Dateien und zum Code-Navigator finden Sie unter www.adobe.com/go/lrvid4044_dw_de.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 308
Vorschau von Seiten
3 Optional: Nehmen Sie nderungen in der Entwurfsansicht, im Bedienfeld CSS-Stile, in einem externen CSS-
Stylesheet oder in einer anderen zugehrigen Datei vor. Obwohl Codenderungen in der Live-Ansicht nicht mglich sind, ndern sich beim Klicken in der Live-Ansicht die Optionen fr nderungen in anderen Bereichen (z. B. im Bedienfeld CSS-Stile oder in der Codeansicht). Sie knnen zugehrige Dateien (wie CSS-Stylesheets) bearbeiten, whrend der Fokus in der Live-Ansicht bleibt, indem Sie die zugehrige Datei mithilfe der Symbolleiste Zugehrige Dateien am oberen Rand des Dokuments ffnen.
4 Klicken Sie nach nderungen in der Codeansicht oder in einer zugehrigen Datei in der Symbolleiste Dokument
auf die Schaltflche Aktualisieren bzw. drcken Sie F5, um die Live-Ansicht zu aktualisieren.
5 Klicken Sie erneut auf die Schaltflche Live-Ansicht, um zur bearbeitbaren Entwurfsansicht zurckzukehren.
Dreamweaver zeigt live den Code an, der vom Browser zum Ausfhren der Seite verwendet wird. Der Code ist gelb markiert und kann nicht bearbeitet werden. Beim Interagieren mit interaktiven Elementen auf der Seite werden die dynamischen nderungen im Code hervorgehoben.
3 Wenn Sie die Hervorhebung der nderungen in der Live-Codeansicht deaktivieren mchten, whlen Sie
Wenn Sie die Voreinstellungen fr den Live-Code ndern mchten, whlen Sie Bearbeiten > Voreinstellungen (Windows) oder Dreamweaver > Voreinstellungen (Macintosh OS) und dann die Kategorie Farbe fr Code aus.
JavaScript anhalten
Fhren Sie einen der folgenden Schritte aus:
Drcken Sie F6. Whlen Sie aus dem Popupmen der Schaltflche Live-Ansicht die Option JavaScript anhalten aus.
Eine Statusleiste am oberen Rand des Dokuments informiert darber, dass JavaScript angehalten ist. Klicken Sie zum Schlieen der Statusleiste auf die entsprechende Verknpfung.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 309
Vorschau von Seiten
Live-Ansicht-Optionen
Neben der Option JavaScript anhalten stehen im Popupmen der Schaltflche Live-Ansicht oder im Men Ansicht > Live-Ansicht-Optionen noch einige andere Optionen zur Auswahl.
JavaScript anhalten Von JavaScript beeinflusste Elemente werden in ihrem aktuellen Zustand fixiert. JavaScript deaktivieren JavaScript wird deaktiviert und die Seite erneut so dargestellt, als wre JavaScript im Browser
nicht aktiviert.
Plug-Ins deaktivieren Plug-Ins werden deaktiviert und die Seite erneut so dargestellt, als wren Plug-Ins im Browser
nicht aktiviert.
nderungen in Live-Code hervorheben Die Hervorhebung von nderungen im Live-Code wird deaktiviert oder
aktiviert.
Live-Ansicht-Seite auf einer neuen Registerkarte bearbeiten Sie knnen neue Registerkarten fr Site-Dokumente
ffnen, die Sie mithilfe der Symbolleiste Browser-Navigation oder der Funktion Hyperlink(s) aufrufen aufrufen. Dazu mssen Sie zunchst zum entsprechenden Dokument wechseln und dann Live-Ansicht-Seite auf einer neuen Registerkarte bearbeiten auswhlen, um eine neue Registerkarte fr das Dokument zu erstellen.
Hyperlink aufrufen Der nchste Hyperlink, auf den Sie klicken, wird in der Live-Ansicht aktiv. Alternativ dazu knnen
Sie bei gedrckter Strg-Taste bzw. Befehlstaste in der Live-Ansicht auf einen Hyperlink klicken, damit er aktiv wird.
Hyperlinks fortlaufend aufrufen Hyperlinks sind in der Live-Ansicht permanent aktiv, bis Sie sie wieder deaktivieren
ColdFusion-Seiten) verwendet und ist fr dynamische Seiten standardmig aktiviert. Wenn diese Option aktiviert ist, verwendet Dreamweaver die Dateiversion auf dem Testserver der Site als Quelle fr die Anzeige in der LiveAnsicht.
Lokale Dateien fr Dokumentverknpfungen verwenden Dies ist die Standardeinstellung fr nicht-dynamische Sites.
Wenn diese Option fr dynamische Sites auf einem Testserver aktiviert wird, verwendet Dreamweaver die lokalen Versionen der mit dem Dokument verknpften Dateien (z. B. CSS- und JavaScript-Dateien) und nicht die Dateien auf dem Testserver. Sie knnen dann lokal nderungen an den zugehrigen Dateien vornehmen und die Ergebnisse berprfen, bevor Sie sie auf dem Testserver ablegen. Wenn diese Option deaktiviert ist, verwendet Dreamweaver die Versionen der zugehrigen Dateien auf dem Testserver.
Einstellungen fr HTTP-Anforderungen Es wird ein Dialogfeld mit erweiterten Einstellungen angezeigt, in dem Sie Werte zum Anzeigen von Live-Daten eingeben knnen. Weitere Informationen erhalten Sie auch, wenn Sie im Dialogfeld auf die Hilfeschaltflche klicken.
Verwandte Themen
berblick ber die Symbolleiste Browser-Navigation auf Seite 12 Zwischen Ansichten im Dokumentfenster umschalten auf Seite 18 Zugehrige Dateien ffnen auf Seite 73 Live-Daten anzeigen auf Seite 631 Video-Tutorial zur Live-Ansicht
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 310
Vorschau von Seiten
Whlen Sie Datei > Vorschau in Browser und anschlieend einen der aufgefhrten Browser.
Hinweis: Wenn keine Browser aufgefhrt sind, whlen Sie Bearbeiten > Voreinstellungen oder Dreamweaver > Voreinstellungen (Macintosh). Whlen Sie anschlieend die Kategorie Vorschau im Browser auf der linken Seite, um einen Browser auszuwhlen.
Drcken Sie F12 (Windows) oder Wahl+F12 (Macintosh), um die Vorschau des aktuellen Dokuments im
Primrbrowser anzuzeigen.
Drcken Sie Strg>+F12 (Windows) bzw. Befehl+F12 (Macintosh), um die Vorschau des aktuellen Dokuments im
Sekundrbrowser anzuzeigen.
2 Klicken Sie auf die Hyperlinks und testen Sie den Inhalt Ihrer Seite.
Hinweis: In der Vorschau eines Dokuments in einem lokalen Browser wird Inhalt, der mit einem zum Site-Stammordner relativen Pfad verknpft ist, nur angezeigt, wenn Sie entweder einen Testserver angeben oder unter Bearbeiten > Voreinstellungen > Vorschau in Browser die Option Vorschau mit temporrer Datei auswhlen. Der Grund hierfr ist, dass Browser im Gegensatz zu Servern Sitestmme nicht erkennen knnen. Wenn Sie eine Vorschau des Inhalts anzeigen mchten, der durch stammrelative Pfade verknpft ist, bertragen Sie die Datei an einen Remote-Server und whlen Sie dann Datei > Vorschau in Browser, um sie anzuzeigen.
3 Schlieen Sie die Seite im Browser, wenn Sie den Test abschlieen.
Verwandte Themen
Zum Site-Stammordner relative Pfade auf Seite 291
Dialogfeld Browser hinzufgen die erforderlichen Details ein und klicken dann auf OK.
3 Um einen Browser aus der Liste zu lschen, whlen Sie ihn aus und klicken dann auf die Schaltflche mit dem
Minuszeichen ().
4 Um die Einstellungen fr einen ausgewhlten Browser zu ndern, klicken Sie auf die Schaltflche Bearbeiten,
fhren die nderungen im Dialogfeld Browser bearbeiten durch und klicken dann auf OK.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 311
Vorschau von Seiten
5 Mit den Optionen Primrbrowser und Sekundrbrowser knnen Sie angeben, ob es sich beim gewhlten
Browser um den primren oder den sekundren Browser handelt. Mit F12 (Windows) bzw. Wahl+F12 (Macintosh) wird der Primrbrowser geffnet und mit Strg+F12 (Windows) bzw. Befehl+F12 (Macintosh) der Sekundrbrowser.
6 Aktivieren Sie die Option Vorschau mit temporrer Datei, um fr Vorschau und Serverdebuggen eine temporre
Kopie zu erstellen. (Deaktivieren Sie die Option, wenn Sie das Dokument direkt aktualisieren mchten.)
Whlen Sie Datei > Vorschau im Browser > Device Central. Klicken Sie auf der Symbolleiste des Dokumentfensters auf die Schaltflche Vorschau/Debuggen im
Browser , halten Sie die Maustaste gedrckt und whlen Sie Vorschau in Device Central. Die Datei wird auf der Registerkarte Device Central Emulator angezeigt. Zum Fortfahren des Tests doppelklicken Sie in den Listen Gertegruppen oder Verfgbare Gerte auf den Namen eines anderen Gerts.
Verwandte Themen
Mit Device Central arbeiten auf Seite 406
ENTWURF
Letzte Aktualisierung 19.3.2010
312
Untersttzte Sprachen
Neben Textbearbeitungsfunktionen bietet Adobe Dreamweaver CS5 verschiedene Features wie z. B. Codehinweise, die die Kodierungsarbeit in den folgenden Sprachen erleichtern:
HTML XHTML CSS JavaScript ColdFusion Markup Language (CFML) VBScript (fr ASP) C# und Visual Basic (fr ASP.NET) JSP PHP
Andere Sprachen, wie etwa Perl, werden von den sprachspezifischen Kodierungsfunktionen in Dreamweaver nicht untersttzt. Beispielsweise knnen Sie Perl-Dateien erstellen und bearbeiten, aber Codehinweise funktionieren bei dieser Sprache nicht.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 313
Mit Seitencode arbeiten
Ungltiger Markup
Wenn Ihr Dokument ungltigen Code enthlt, wird dieser in Dreamweaver in der Entwurfsansicht angezeigt und optional in der Codeansicht hervorgehoben. Sobald Sie den Code in einer der Ansichten auswhlen, werden im Eigenschafteninspektor Informationen dazu angezeigt, warum der Code ungltig ist und wie er repariert werden kann. Hinweis: Die Option zum Hervorheben von ungltigem Code in der Codeansicht ist standardmig deaktiviert. Wechseln Sie zum Aktivieren dieser Option in die Codeansicht (Ansicht > Code) und whlen Sie dann Ansicht > Codeansichtsoptionen > Ungltigen Code hervorheben aus. Sie knnen auch Voreinstellungen fr das automatische Korrigieren verschiedener Arten von ungltigem Code beim ffnen von Dokumenten festlegen.
Automatische Codenderung
Sie knnen Dreamweaver durch Aktivieren verschiedener Optionen anweisen, Ihren handgeschriebenen Code anhand bestimmter Kriterien automatisch zu bereinigen. Ihr Code wird jedoch nur dann umgeschrieben, wenn die Optionen fr das Umschreiben von Code aktiviert sind oder Sie eine Aktion durchfhren, durch die der Code verndert wird. Beispielsweise werden von Dreamweaver keine Leerrume aus dem Code entfernt und die Gro/Kleinschreibung von Attributen bleibt unverndert, sofern Sie nicht den Befehl Quellenformatierung bernehmen einsetzen. Einige dieser Codeumschreibungsoptionen sind standardmig aktiviert. Durch die Roundtrip-HTML-Funktionen in Dreamweaver knnen Sie Ihre Dokumente in Dreamweaver und in textbasierten HTML-Editoren ffnen, ohne dass dadurch der Inhalt oder die Struktur des ursprnglichen HTMLQuellcodes wesentlich beeinflusst wird. Zu diesen Funktionen gehren die folgenden:
Mit dem Texteditor eines Drittanbieters knnen Sie bei Bedarf das aktuelle Dokument bearbeiten. Dreamweaver nimmt standardmig keine nderungen in Code vor, der in anderen HTML-Editoren erstellt oder
bearbeitet wurde, selbst wenn er ungltig ist. Hierfr mssen Sie erst die Optionen zur Codeumschreibung aktivieren.
Dreamweaver ndert keine Tags, die nicht erkannt werden. Dies gilt auch fr XML-Tags, denn Dreamweaver
stehen keine Kriterien zur Verfgung, die eine Beurteilung unbekannter Tags erlauben wrden. Wenn ein unerkanntes Tag ein anderes Tag berlappt (z. B. <MyNewTag><em>text</MyNewTag></em>), markiert Dreamweaver dies zwar als Fehler, schreibt den Code aber nicht um.
Auf Wunsch knnen Sie festlegen, dass Dreamweaver ungltigen Code in der Codeansicht hervorhebt (in Gelb).
Wenn Sie einen so hervorgehobenen Abschnitt auswhlen, werden im Eigenschafteninspektor Anweisungen zur Korrektur des Fehlers angezeigt.
XHTML-Code
Dreamweaver erstellt neuen XHTML-Code und optimiert bereits vorhandenen XHTML-Code so, dass er den meisten XHTML-Anforderungen entspricht. Darber hinaus stehen Ihnen in die Werkzeuge zur Verfgung, die Sie bentigen, um die wenigen verbleibenden XHTML-Anforderungen zu erfllen. Hinweis: Einige dieser Anforderungen gelten auch fr verschiedene HTML-Versionen. In der folgende Tabelle sind die XHTML-Anforderungen aufgefhrt, die Dreamweaver automatisch erfllt:
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 314
Mit Seitencode arbeiten
XHTML-Anforderung
Vor dem Stammelement muss eine DOCTYPE-Deklaration vorhanden Fgt einem XHTML-Dokument eine XHTML-DOCTYPE-Deklaration sein, die auf eine der drei DTD-Dateien (DTD = Document Type hinzu: Definition) fr XHTML (strict, transitional oder frameset) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 verweist.
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
Das Stammelement des Dokuments muss html sein und das htmlElement muss den XHTML-Namensbereich (namespace) ausweisen.
Fgt das Attribut namespace in folgender Weise dem Element html hinzu:
<html xmlns="http://www.w3.org/1999/xhtml">
Ein Standarddokument muss die Strukturelemente head, title und In Standarddokumente werden die Elemente head, title und body body aufweisen. Ein Frameset-Dokument muss die Strukturelemente integriert. In Frameset-Dokumente werden die Elemente head, head, title und frameset aufweisen. title und frameset integriert. Alle Elemente des Dokuments mssen richtig ineinander verschachtelt sein:
<p>So ist es <i>falsch.</p></i> <p>So ist es <i>richtig.</i></p>
Erzeugt korrekt verschachtelten Code und korrigiert beim Optimieren von XHTML falsch verschachtelten Code, der nicht mit Dreamweaver erstellt wurde.
Schreibt bei selbst erzeugtem und optimiertem XHTML-Code die Namen von HTML-Elementen und -Attributen automatisch in Kleinbuchstaben, unabhngig davon, welche Schreibweise Sie fr Tags und Attribute eingestellt haben.
Jedes Element muss ein schlieendes Tag haben, sofern es in der DTD Versieht selbst erzeugten und optimierten XHTML-Code mit nicht als EMPTY (leer) deklariert wurde. schlieenden Tags. Fgt bei selbst erzeugtem und optimiertem XHTML-Code ein Leere Elemente mssen ein schlieendes Tag haben oder das Leerzeichen vor dem Schluss-Schrgstrich von leeren Elementen ein. ffnende Tag muss mit /> enden. Beispielsweise ist <br> ungltig. Die korrekte Form lautet <br></br> oder <br/>. Die folgenden Elemente sind leer: area, base, basefont, br, col, frame, hr, img, input, isindex, link, meta und param. Zur Gewhrleistung der Abwrtskompatibilitt mit nicht XMLfhigen Browsern muss vor /> ein Leerzeichen stehen (z. B. <br />, nicht <br/>). Attribute drfen nicht minimiert sein. Beispielsweise ist <td nowrap> ungltig. Die korrekte Form lautet <td nowrap="nowrap">. Dies betrifft die folgenden Attribute: checked, compact, declare, defer, disabled, ismap, multiple, noresize, noshade, nowrap, readonly und selected. Alle Attributwerte mssen in Anfhrungszeichen stehen. Versieht selbst erzeugten und optimierten XHTML-Code mit vollwertigen Attribut-Wert-Paaren. Hinweis: Wenn ein HTML-Browser HTML 4 nicht untersttzt, kann es sein, dass er diese booleschen Attribute in ihrer vollwertigen Form nicht interpretieren kann.
Setzt Attributwerte bei selbst erzeugtem und optimiertem XHTMLCode in Anfhrungszeichen. Stellt die Attribute name und id auf den gleichen Wert ein, wenn das Attribut name von einem Eigenschafteninspektor festgelegt wurde. Dies gilt fr den von Dreamweaver erzeugten Code und beim Optimieren von XHTML.
Die folgenden Elemente mssen die Attribute id und name aufweisen: a, applet, form, frame, iframe, img und map. Beispielsweise ist <a name="intro">Introduction</a> ungltig. Die korrekte Form lautet
<a id="intro">Introduction</a> oder <a id="section1" name="intro"> Introduction</a>.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 315
Mit Seitencode arbeiten
XHTML-Anforderung
Bei Attributen mit Werten eines Aufzhlungstyps mssen die Werte in Schreibt bei selbst erzeugtem und optimiertem XHTML-Code die Werte eines Aufzhlungstyps automatisch in Kleinbuchstaben. Kleinbuchstaben geschrieben werden. Ein Wert eines Aufzhlungstyps ist ein Wert aus einer bestimmten Liste von zulssigen Werten. So sind zum Beispiel beim Attribut align folgende Werte zulssig: center, justify, left und right. Alle Skript- und Stilelemente mssen das Attribut type aufweisen. (Das Attribut type des Elements script ist seit der Einfhrung von HTML 4 erforderlich, durch die das Attribut language seine Bedeutung verloren hat.) Alle img- und area-Elemente mssen das Attribut alt aufweisen. Verwendet bei selbst erzeugtem Code und optimierten XHTML-Code die Attributetype und language in script-Elementen und das Attribut type in style-Elementen.
Fgt bei selbst erzeugtem Code diese Attribute hinzu und weist beim Optimieren von XHTML-Code auf fehlende alt-Attribute hin.
Regulre Ausdrcke
Regulre Ausdrcke sind Muster, die bestimmte Zeichenkombinationen im Text beschreiben. Mit regulren Ausdrcken knnen Sie bei der Codesuche bestimmte Konzepte definieren, beispielsweise Zeilen, die mit dem Wort var beginnen oder Attributwerte, die eine Zahl enthalten. In der folgenden Tabelle werden die Sonderzeichen in regulren Ausdrcken mit den zugehrigen Bedeutungen aufgelistet. Darber hinaus enthlt die Tabelle konkrete Beispiele. Wenn Sie eine Textzeichenfolge suchen mchten, die eines der aufgelisteten Sonderzeichen enthlt, stellen Sie dem Sonderzeichen einen Schrgstrich voran. Angenommen, Sie mchten das Sternchen im folgenden Satz suchen: Dabei gelten bestimmte Bedingungen*. In diesem Fall knnte das Suchmuster folgendermaen aussehen: Bedingungen\*. Wenn Sie dem Sternchen keinen Schrgstrich voranstellen, werden alle Vorkommen von Bedingungen im Text gefunden, nicht nur die, auf die ein Sternchen folgt (auerdem werden die Begriffe Bedingunge, Bedingungenn und Bedingungennn gefunden).
Zeichen ^ Entsprechung Anfang der Eingabe oder Zeile Beispiel
^T entspricht T in Tanzen und Singen, jedoch nicht in Onkel Toms Htte. h$ entspricht h in Koch, jedoch nicht in kochen. um* entspricht um in Raum, umm in summen und u
$ *
Ende der Eingabe oder Zeile Das voranstehende Zeichen 0 Mal oder mehrmals Das voranstehende Zeichen 1 Mal oder mehrmals Das voranstehende Zeichen hchstens 1 Mal (d. h., das voranstehende Zeichen ist optional) Ein einziges Zeichen auer Zeilenvorschub Entweder x oder y
in Kugel.
um+ entspricht um in Raum und umm in summen,
. x|y
{n}
Genau n Vorkommen des voranstehenden Zeichens Mindestens n und hchstens m Vorkommen des voranstehenden Zeichens
{n,m}
in #FFFFFF.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 316
Mit Seitencode arbeiten
Zeichen [abc]
Entsprechung Beliebige der in Klammern eingeschlossenen Zeichen. Verwenden Sie einen Bindestrich, um einen Zeichenbereich anzugeben ([a-f] entspricht beispielsweise [abcdef]). Beliebige, nicht in den Klammern angegebene Zeichen. Verwenden Sie einen Bindestrich, um einen Zeichenbereich anzugeben ([^a-f] entspricht beispielsweise [^abcdef]). Eine Wortabgrenzung (beispielsweise ein Leerzeichen oder ein Zeilenumbruch) Alle Zeichen, ausgenommen Wortabgrenzungen Eine beliebige Ziffer. Entspricht [0-9]. Ein beliebiges Zeichen, das keine Ziffer ist. Entspricht [^0-9]. Formularvorschub Zeilenvorschub Zeilenumbruch
Beispiel
[e-g] entspricht e in Bett, f in Fluss und g in ganz.
[^abc]
in ok!.
\b
\bb entspricht b in buchen, jedoch keiner Zeichenfolge in Lorbeer oder Snob. \Bb entspricht b in Lorbeer, jedoch keiner Zeichenfolge in buchen. \d entspricht 3 in C3PO und 2 in Apartment 2G. \D entspricht S in 900S und Q in Q45.
\B
\d \D
\f \n \r \s
Ein beliebiges, einzelnes, nicht druckbares \sbook entspricht buchen in jetzt buchen, jedoch keiner Zeichen, beispielsweise Leerzeichen, Tabulator, Zeichenfolge in verbuchen. Seitenvorschub oder Zeilenvorschub Ein beliebiges einzelnes, druckbares Zeichen
\Sbook entspricht buchen in verbuchen, keiner
\S
Zeichenfolge in jetzt buchen. \t \w Ein Tabulator Ein beliebiges alphanumerisches Zeichen, einschlielich Unterstrich. Entspricht [A-Za-z09_]. Ein beliebiges Zeichen, nicht jedoch alphanumerisch. Entspricht [^A-Za-z0-9_]. Absatzmarken. Stellen Sie sicher, dass Sie beim Durchfhren dieser Suche das Kontrollkstchen Unterschiede bei Leerraum ignorieren deaktivieren, wenn Sie keine regulren Ausdrcke verwenden. Beachten Sie, dass dies einem besonderen Zeichen und nicht einem Zeilenumbruch entspricht. So entspricht es z. B. nicht dem Tag<br> oder dem Tag <p>. Absatzmarken werden in der Entwurfsansicht als Leerrume und nicht als Zeilenumbrche dargestellt. b\w* entspricht bellende in der bellende Hund und sowohl bellende als auch braune in der bellende braune Hund. \W entspricht & in Hinz & Kunz und % in 100 %.
\W
Strg+Eingabe oder Umschalt+Eingabe (Windows) bzw. Ctrl+Return, Umschalt+Return oder Befehl+Return (Macintosh)
Verwenden Sie Klammern, um Gruppen innerhalb des regulren Ausdrucks zu bilden und spter aufzurufen. Verwenden Sie anschlieend im Feld Ersetzen durch die Operatoren $1, $2, $3 usw., um auf die erste, zweite, dritte usw. eingeklammerte Gruppe zu verweisen. Hinweis: Wenn Sie im Feld Suchen nach auf eine eingeklammerte Gruppe an einer frheren Stelle im regulren Ausdruck verweisen mchten, verwenden Sie statt $1, $2, $3 nun \1, \2, \3.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 317
Mit Seitencode arbeiten
Wenn Sie beispielsweise nach (\d+)\/(\d+)\/(\d+) suchen und diese Zeichenfolge durch $2/$1/$3 ersetzen, werden Datum und Monat in einem Datum vertauscht, das Schrgstriche enthlt, um so das amerikanische Datumsformat in das europische Datumsformat umzuwandeln.
Code fr Serververhalten
Wenn Sie eine dynamische Seite erstellen und im Bedienfeld Serververhalten ein Serververhalten auswhlen, fgt Dreamweaver in die Seite Codeblcke ein, um die Funktion des Serververhaltens zu ermglichen. Wenn Sie den Code in einem Codeblock manuell ndern, knnen Sie das Serververhalten nicht mehr mit Bedienfeldern wie Bindungen und Serververhalten bearbeiten. Dreamweaver sucht im Seitencode nach bestimmten Mustern, um Serververhalten zu erkennen und im Bedienfeld Serververhalten anzuzeigen. Wenn der Code in einem Codeblock auch nur geringfgig gendert wird, kann Dreamweaver das Serververhalten nicht mehr erkennen und im Bedienfeld Serververhalten anzeigen. Das Serververhalten ist jedoch weiterhin auf der Seite vorhanden und kann in der Codeumgebung von Dreamweaver bearbeitet werden.
Codeumgebung einrichten
Programmiererfreundliche Arbeitsbereiche verwenden
Sie knnen die Codeumgebung in Dreamweaver an Ihre Arbeitsweise anpassen. So knnen Sie zum Beispiel die Art der Codedarstellung ndern, verschiedene Tastaturbefehle festlegen oder Ihre bevorzugte Tag-Bibliothek importieren und anwenden. Dreamweaver enthlt mehrere Arbeitsbereichlayouts, die fr optimale Codeerstellung konzipiert sind. ber den Arbeitsbereichumschalter auf der Anwendungsleiste haben Sie die Auswahl zwischen den Arbeitsbereichen Anwendungsentwickler, Anwendungsentwickler Plus, Coder und Coder Plus. In allen diesen Arbeitsbereichen wird standardmig die Codeansicht (entweder im gesamten Dokumentfenster oder als geteilte Ansicht) angezeigt. Die Bedienfelder sind auf der linken Seite angedockt. Mit Ausnahme von Anwendungsentwickler Plus wird in allen Arbeitsbereichen der Eigenschafteninspektor in der Standardansicht nicht angezeigt. Wenn keiner der vorkonfigurierten Arbeitsbereiche Ihren Anforderungen entspricht, knnen Sie das Arbeitsbereichlayout entsprechend anpassen. ffnen Sie dazu Bedienfelder und docken Sie sie an der gewnschten Position an. Speichern Sie dann den Arbeitsbereich als benutzerdefinierten Arbeitsbereich.
Verwandte Themen
Verwalten von Fenstern und Bedienfeldern auf Seite 24 Speichern von und Wechseln zwischen Arbeitsbereichen auf Seite 29 Tastaturbefehle anpassen auf Seite 35 Tag-Bibliotheken verwalten auf Seite 363
Code anzeigen
Der Quellcode des aktuellen Dokuments kann auf unterschiedliche Weise angezeigt werden: Sie knnen ihn im Dokumentfenster anzeigen, indem Sie die Codeansicht aktivieren, Sie knnen das Dokumentfenster teilen, sodass sowohl die Seite als auch der zugehrige Code angezeigt werden oder Sie knnen im Codeinspektor, einem separaten Codefenster, arbeiten. Er funktioniert genau wie die Codeansicht. Sie knnen ihn sich daher als ablsbare Codeansicht fr das aktuelle Dokument vorstellen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 318
Mit Seitencode arbeiten
Verwandte Themen
Codeformat ndern auf Seite 320 Einstellungen fr Codehinweise festlegen auf Seite 327 Codefarben festlegen auf Seite 323
gewnschte Position. Die Trennleiste befindet sich zwischen den beiden Fensterbereichen. Die Codeansicht wird automatisch aktualisiert, wenn Sie in der Entwurfsansicht nderungen vornehmen. Wenn Sie jedoch in der Codeansicht nderungen vorgenommen haben, mssen Sie das Dokument in der Entwurfsansicht manuell aktualisieren, indem Sie auf die Entwurfsansicht klicken oder F5 drcken.
einem Browser.
Entwurfsansicht aktualisieren aktualisiert das Dokument in der Entwurfsansicht anhand der von Ihnen vorgenommenen Codenderungen. Am Code vorgenommene nderungen werden nicht automatisch in der Entwurfsansicht angezeigt, sondern erst dann, wenn Sie bestimmte Aktionen durchfhren, z. B. die Datei speichern oder auf diese Schaltflche klicken. Referenz ffnet das Bedienfeld Referenz. Siehe Referenzmaterial zu Sprachen verwenden auf Seite 342. Code-Navigation ermglicht die schnelle Fortbewegung durch den Code. Siehe Zu JavaScript- oder VBScriptFunktionen navigieren auf Seite 337. Ansichtsoptionen dient zur Angabe, wie der Code angezeigt werden soll. Siehe Erscheinungsbild des Codes
festlegen auf Seite 319. Wie Sie die an der linken Fensterseite befindliche Code-Symbolleiste verwenden, erfahren Sie unter Code mit der Code-Symbolleiste einfgen auf Seite 330.
Tastaturbefehle anpassen
In Dreamweaver knnen Sie Tastaturbefehle nach Ihren Wnschen definieren. Wenn Sie an bestimmte Tastaturbefehle gewhnt sind, beispielsweise an Umschalttaste+Eingabetaste zum Einfgen eines Zeilenumbruchs oder Strg+G zum Wechseln zu einer bestimmten Position im Code, knnen Sie diese Befehle in Dreamweaver ber den Tastaturbefehl-Editor festlegen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 319
Mit Seitencode arbeiten
Anweisungen hierzu finden Sie unter Tastaturbefehle anpassen auf Seite 35.
Verwandte Themen
Mit Codefragmenten arbeiten auf Seite 339
(Macintosh).
2 Whlen Sie links in der Kategorieliste die Option Dateitypen/Editoren. 3 Geben Sie im Feld In Codeansicht ffnen die Erweiterungen der Dateitypen ein, die automatisch in der
Codeansicht geffnet werden sollen. Fgen Sie zwischen den einzelnen Dateinamenerweiterungen jeweils ein Leerzeichen ein. Sie knnen beliebig viele Erweiterungen hinzufgen.
Verwandte Themen
Mit externen Editoren arbeiten auf Seite 324 Codefehler mit dem Validator suchen auf Seite 345
Codeeinstellungen festlegen
Voreinstellungen fr Code
Sie knnen Codeeinstellungen Ihren Anforderungen entsprechend festlegen, z. B. Codeformatierung oder Codeeinfrbung. Hinweis: Weitere Einstellungen knnen Sie im Tag-Bibliothek-Editor festlegen (siehe Tag-Bibliotheken verwalten auf Seite 363).
Whlen Sie Ansicht > Codeansichtsoptionen aus. Klicken Sie in der Codeansicht oder im Codeinspektor oben in der Symbolleiste auf die Schaltflche
Ansichtsoptionen .
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 320
Mit Seitencode arbeiten
einen Punkt reprsentiert, ein doppeltes Steuerzeichen ersetzt Tabulatoren und jeder Zeilenumbruch wird mit einer Absatzmarke gekennzeichnet. Hinweis: Die in Dreamweaver fr den Umbruch verwendeten Zeilenwechsel werden nicht durch eine Absatzmarke gekennzeichnet.
Ungltigen Code hervorheben bewirkt, dass ungltiger HTML-Code in Dreamweaver gelb markiert wird. Wenn Sie ein ungltiges Tag auswhlen, werden im Eigenschafteninspektor Anweisungen zur Korrektur des Fehlers angezeigt. Syntaxfarbcodierung aktiviert bzw. deaktiviert die farbige Codehervorhebung. Informationen zum ndern des Farbschemas finden Sie unter Codefarben festlegen auf Seite 323. Automatischer Einzug rckt den Code automatisch ein, wenn Sie bei der Codeeingabe die Eingabetaste drcken. Die neue Codezeile wird auf die Stufe der vorherigen Zeile eingerckt. Informationen zum ndern von Einzgen finden Sie in den Ausfhrungen zur Option Tabulatorgre unter Codeformat ndern auf Seite 320.
Verwandte Themen
Code anzeigen auf Seite 317 berblick ber die Code-Symbolleiste auf Seite 12 Einstellungen fr Codehinweise festlegen auf Seite 327
Codeformat ndern
Sie knnen das Erscheinungsbild des Codes ndern, indem Sie Formateinstellungen wie Einzug, Zeilenlnge und Gro- oder Kleinschreibung von Tag- und Attributnamen festlegen. Alle Codeformatoptionen mit Ausnahme von Schreibweise auer Kraft setzen von werden nur auf neue Dokumente oder auf Ergnzungen zu Dokumenten automatisch angewendet, die Sie anschlieend erstellen. Wenn Sie vorhandene HTML-Dokumente neu formatieren mchten, ffnen Sie das gewnschte Dokument und whlen Sie Befehle > Quellenformatierung bernehmen.
1 Whlen Sie Bearbeiten > Voreinstellungen. 2 Whlen Sie links in der Kategorieliste die Option Codeformat. 3 Whlen Sie eine der folgenden Optionen:
Einzug gibt an, ob von Dreamweaver erstellter Code eingerckt werden soll (gem den Einzugsregeln, die in diesen Voreinstellungen festgelegt sind).
Hinweis: Die meisten Einzugsoptionen in diesem Dialogfeld gelten nur fr Code, der von Dreamweaver erstellt wurde, nicht fr Code, den Sie eingeben. Wenn jede von Ihnen eingegebene neue Codezeile auf die Stufe der vorherigen Zeile eingerckt werden soll, whlen Sie Ansicht > Codeansichtsoptionen > Automatischer Einzug. Weitere Informationen hierzu finden Sie unter Erscheinungsbild des Codes festlegen auf Seite 319.
mit (Textfeld und Popupmen) zeigt an, wie viele Leerzeichen oder Tabulatoren Dreamweaver zum Einrcken des
von ihm generierten Codes verwenden soll. Wenn Sie beispielsweise im Textfeld den Wert 3 eingeben und
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 321
Mit Seitencode arbeiten
Tabulatoren im Popupmen whlen, wird der von Dreamweaver generierte Code fr jede Einrckungsstufe um drei Tabulatorzeichen eingerckt.
Tabulator-Schrittweite bestimmt, wie viele Zeichen ein Tabulatorzeichen in der Codeansicht umfasst. Ist die
Tabulatorgre z. B. auf 4 eingestellt, dann wird jeder Tabulator in der Codeansicht als ein vier Zeichen breiter Leerraum dargestellt. Ist darber hinaus Einzug mit auf 3 eingestellt, wird der von Dreamweaver generierte Code bei jeder Einrckungsstufe um drei Tabulatorzeichen eingerckt. In der Codeansicht wird folglich ein zwlf Zeichen breiter Leerraum angezeigt. Hinweis: Die Einrckung erfolgt in Dreamweaver entweder mit Leerstellen oder mit Tabulatoren. Aufeinanderfolgende Leerstellen werden beim Einfgen von Code nicht in einen Tabulator umgewandelt.
Automatischer Umbruch fgt eine Absatzmarke (also einen harten Zeilenumbruch) ein, wenn eine Zeile die angegebene Spaltenbreite erreicht. (Dreamweaver fgt Absatzmarken nur dann ein, wenn dadurch das Erscheinungsbild des Dokuments in Browsern nicht gendert wird. Einige Zeilen knnen daher lnger sein als durch die Option Automatischer Umbruch vorgegeben.) Die Option Umbruch in der Codeansicht bewirkt dagegen, dass lange Zeilen (die ber die Fensterbreite hinausgehen) so angezeigt werden, als enthielten sie Absatzmarken, es werden jedoch keine Absatzmarken eingefgt. Zeilenumbruch-Typ definiert den Typ des Remote-Servers (Windows, Macintosh oder UNIX), der als Host fr die Remote-Site dient. Durch die Wahl der korrekten Steuerzeichenfolge fr den Zeilenumbruch wird gewhrleistet, dass der HTML-Quellcode auf dem Remote-Server richtig angezeigt wird. Diese Einstellung bietet sich auch an, wenn Sie mit einem externen Texteditor arbeiten, der nur bestimmte Zeilenumbrche erkennt. Wenn Sie Notepad als externen Editor verwenden, whlen Sie CR LF (Windows), und wenn Sie SimpleText verwenden, whlen Sie CR (Macintosh).
Hinweis: Bei Servern, auf die Sie ber FTP zugreifen, bezieht sich diese Option nur auf den binren bertragungsmodus. Beim ASCII-bertragungsmodus von Dreamweaver wird diese Option ignoriert. Wenn Sie Dateien im ASCII-Modus herunterladen, fgt Dreamweaver die Zeilenumbrche ein, die dem Betriebssystem Ihres Computers entsprechen. Beim Hochladen von Dateien im ASCII-Modus werden alle Zeilenumbrche auf CR LF eingestellt.
Standardschreibweise fr Tag-Namen und Standardschreibweise fr Attributnamen legt die Gro- und
Kleinschreibung von Tag- und Attributnamen fest. Diese Optionen gelten fr Tags und Attribute, die Sie in die Entwurfsansicht einfgen oder dort bearbeiten, nicht jedoch fr Tags und Attribute, die Sie direkt in der Codeansicht eingeben. Die Optionen werden auch nicht beim ffnen eines Dokuments auf die darin bereits enthaltenen Tags und Attribute angewandt (es sei denn, Sie aktivieren mindestens eines der beiden Kontrollkstchen unter Schreibweise auer Kraft setzen von). Hinweis: Diese Voreinstellungen gelten ausschlielich fr HTML-Seiten. Dreamweaver ignoriert sie bei XHTML-Seiten, weil Tags und Attribute in Grobuchstaben in XHTML ungltig sind.
Schreibweise auer Kraft setzen: Tags und Attribute gibt an, ob die festgelegte Schreibweise grundstzlich
angewendet werden soll, unter anderem auch beim ffnen eines bereits vorhandenen HTML-Dokuments. Wenn Sie eines dieser Kontrollkstchen aktivieren und auf OK klicken, um das Dialogfeld zu schlieen, werden alle Tags oder Attribute im aktuellen Dokument unmittelbar so gendert, dass sie der Einstellung fr die Schreibweise entsprechen. Auch die Tags oder Attribute in Dokumenten, die Sie zuknftig ffnen, werden angepasst (bis Sie das Kontrollkstchen wieder deaktivieren). Die Tags oder Attribute, die Sie in der Codeansicht und im Quick Tag Editor eingeben oder im Bedienfeld Einfgen hinzufgen, werden ebenfalls an die gewhlte Schreibweise angepasst. Wenn Tag-Namen beispielsweise immer in Kleinbuchstaben umgewandelt werden sollen, legen Sie unter Standardschreibweise fr Tags die Option Kleinbuchstaben fest und aktivieren dann das Kontrollkstchen Schreibweise auer Kraft setzen: Tags. Wenn Sie anschlieend ein Dokument ffnen, das Tag-Namen in Grobuchstaben enthlt, werden diese von Dreamweaver in Kleinbuchstaben konvertiert.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 322
Mit Seitencode arbeiten
Hinweis: In lteren HTML-Versionen waren Tag- und Attributnamen in Klein- und auch in Grobuchstaben zulssig, bei XHTML sind fr Tag- und Attributnamen jedoch Kleinbuchstaben erforderlich. Der Trend im Web geht zu XHTML, daher ist es in der Regel am besten, Tag- und Attributnamen in Kleinbuchstaben zu verwenden.
TD-Tag: Keinen Umbruch im TD-Tag einschlieen behebt ein Wiedergabeproblem, das bei einigen lteren Browsern auftritt, wenn direkt nach dem Tag <td> bzw. direkt vor dem Tag </td> ein Leerraum oder Zeilenumbruch steht. Wenn Sie diese Option aktivieren, fgt Dreamweaver nach einem <td>-Tag bzw. vor einem </td>-Tag keine Zeilenumbrche ein, selbst wenn dies gem den Formatierungsangaben in der Tag-Bibliothek erforderlich wre. Erweiterte Formatierung dient zum Festlegen von Formatierungsoptionen fr CSS-Code (Cascading Style Sheets)
Verwandte Themen
CSS-Code formatieren auf Seite 154 Einstellungen fr Codehinweise festlegen auf Seite 327
(Macintosh).
2 Whlen Sie links in der Kategorieliste die Option Codeumschreibung. 3 Whlen Sie eine der folgenden Optionen:
Falsch verschachtelte und nicht geschlossene Tags reparieren schreibt berlappende Tags um. Beispielsweise wird
<b><i>Text</b></i> umgeschrieben in <b><i>Text</i></b>. Diese Option fgt auch fehlende schlieende
vergeben werden. Diese Option ist standardmig aktiviert. Hinweis: Im Unterschied zu den brigen Optionen in diesem Voreinstellungen-Dialogfeld wird diese Option nicht angewendet, wenn Sie ein Dokument ffnen, sondern nur wenn Sie ein Formularelement kopieren und einfgen.
berzhlige Schluss-Tags entfernen lscht schlieende Tags, fr die es keine entsprechenden ffnenden Tags gibt. Beim Reparieren oder Entfernen von Tags Warnmeldung zeigen zeigt eine Zusammenfassung des technisch
ungltigen HTML-Codes an, fr den Dreamweaver einen Korrekturversuch unternommen hat. Dabei wird die Position des fehlerhaften Codes (Zeilen- und Spaltennummer) angegeben, sodass Sie die Korrektur berprfen knnen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 323
Mit Seitencode arbeiten
Code niemals umschreiben: In Dateien mit den Erweiterungen verhindert, dass Dreamweaver den Code in Dateien
mit den angegebenen Dateierweiterungen umschreibt. Diese Option ist besonders hilfreich bei Dateien mit Tags von Drittanbietern.
<, >, & und " in Attributwerten mit & kodieren stellt sicher, dass Attributwerte, die Sie mit Dreamweaver-Werkzeugen
wie dem Eigenschafteninspektor eingeben oder bearbeiten, nur zulssige Zeichen enthalten. Diese Option ist standardmig aktiviert. Hinweis: Diese Option und die folgenden Optionen werden nicht auf URLs angewendet, die Sie in der Codeansicht eingeben. Auch Code, der bereits in einer Datei vorhanden ist, wird dadurch nicht verndert.
Sonderzeichen nicht kodieren verhindert, dass URLs in Dreamweaver so verndert werden, dass nur zulssige Zeichen enthalten sind. Diese Option ist standardmig aktiviert. Sonderzeichen in URLs mit &# kodieren stellt sicher, dass URLs, die Sie mit Dreamweaver-Werkzeugen wie dem
Verwandte Themen
Microsoft Word-HTML-Dateien optimieren auf Seite 76 Einstellungen fr Codehinweise festlegen auf Seite 327
Codefarben festlegen
Mit den Farbeinstellungen fr Code knnen Sie Farben fr allgemeine Kategorien von Tags und Code-Elementen wie Formular-Tags oder JavaScript-Bezeichner festlegen. Wenn Sie fr ein bestimmtes Tag eine andere Farbe einstellen mchten, ndern Sie die Tag-Definition im Tag-Bibliothek-Editor entsprechend.
1 Whlen Sie Bearbeiten > Voreinstellungen (Windows) bzw. Dreamweaver > Voreinstellungen
(Macintosh).
2 Whlen Sie links in der Kategorieliste die Option Farbe fr Code. 3 Whlen Sie in der Liste Dokumenttyp einen Dokumenttyp aus. Alle nderungen, die Sie an den Code-
Farbeinstellungen vornehmen, wirken sich auf alle Dokumente dieses Typs aus.
4 Klicken Sie auf die Schaltflche Farbschema bearbeiten. 5 Whlen Sie im Dialogfeld Farbschema bearbeiten in der Liste Stile fr ein Code-Element aus und legen Sie
Textfarbe, Hintergrundfarbe und (optional) Stil (Fett, Kursiv oder Unterstrichen) fr dieses Code-Element fest. Der Beispielcode im Vorschaufeld wird mit den neuen Farben und Stilen angezeigt. Klicken Sie auf OK, um die nderungen zu speichern, und schlieen Sie das Dialogfeld Farbschema bearbeiten.
6 Whlen Sie die gewnschten Optionen in den Code-Farbeinstellungen aus und klicken Sie auf OK.
Standardhintergrund legt die Farbe des Standardhintergrunds fr die Codeansicht und den Codeinspektor fest. Versteckte Zeichen legt die Farbe fr versteckte Zeichen fest. Live-Code-Hintergrund legt die Hintergrundfarbe fr die Live-Codeansicht fest. Die Standardfarbe ist gelb. Live-Code-nderungen legt die Markierungsfarbe des Codes fest, der sich in der Live-Codeansicht ndert. Die
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 324
Mit Seitencode arbeiten
Verwandte Themen
Code-Farbeinstellungen fr Vorlagen anpassen auf Seite 450 Bibliotheken, Tags und Attribute bearbeiten auf Seite 365 Vorschau von Live-Code auf Seite 308 Einstellungen fr Codehinweise festlegen auf Seite 327
Verwandte Themen
Dateien standardmig in der Codeansicht ffnen auf Seite 319
werden sollen.
Externer Codeeditor legt den zu verwendenden Texteditor fest. Genderte Dateien neu laden gibt an, wie Dreamweaver sich verhlt, wenn festgestellt wird, dass an einem in
speichern soll oder ob Sie bei jedem Start des externen Editors gefragt werden, ob das Dokument gespeichert werden soll.
Fireworks dient zum Festlegen von Editoren fr verschiedene Mediendateitypen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 325
Mit Seitencode arbeiten
HTML CSS DOM (Document Object Model) JavaScript (einschlielich Codehinweise fr benutzerdefinierte Klassen) Ajax Spry Adobe ColdFusion JSP PHP MySQL ASP JavaScript ASP VBScript ASP.NET C# ASP.NET VB
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 326
Mit Seitencode arbeiten
ffnende spitze Klammer (<) ein. Setzen Sie zum Einfgen eines Attributs die Einfgemarke direkt hinter einen Tag-Namen und drcken Sie die Leertaste. Eine Liste mit Elementen (z. B. Tag-Namen oder Attributnamen) wird angezeigt. Sie knnen die Liste jederzeit schlieen, indem Sie die Esc-Taste drcken.
2 Durchlaufen Sie die Liste mit dem Rollbalken oder mit der Nach-oben- bzw. Nach-unten-Taste. 3 Wenn Sie ein Element aus der Liste einfgen mchten, doppelklicken Sie auf das Element oder whlen Sie es aus
und drcken Sie dann die Eingabetaste (Windows) bzw. Return (Macintosh). Falls ein krzlich erstellter CSS-Stil nicht in einer Codehinweisliste mit CSS-Stilen erscheint, whlen Sie aus der Liste der Codehinweise die Option Stil-Liste aktualisieren. In der Entwurfsansicht wird nach dem Auswhlen von StilListe aktualisieren manchmal ungltiger Code angezeigt. Diesen ungltigen Code knnen Sie aus der Entwurfsansicht entfernen, indem Sie nach dem Eingeben des Stils die Taste F5 zum Aktualisieren drcken.
4 Zum Einfgen eines schlieenden Tags geben Sie </ (Schrgstrich) ein.
Hinweis: Dreamweaver ermittelt standardmig, an welcher Stelle ein schlieendes Tag erforderlich ist und fgt dieses Tag automatisch ein. Sie knnen dieses Standardverhalten ndern, sodass Dreamweaver ein schlieendes Tag einfgt, nachdem Sie die schlieende spitze Klammer (>) des ffnenden Tags eingegeben haben. Darber hinaus knnen Sie das Standardverhalten auch so festlegen, dass berhaupt kein schlieendes Tag eingefgt wird. Whlen Sie Bearbeiten > Voreinstellungen > Codehinweise und anschlieend eine der Optionen unter Schlieende Tags aus.
Wenn Sie einen Wert ndern mchten, lschen Sie den Wert und fgen Sie dann entsprechend der Beschreibung
im vorherigen Abschnitt einen Wert ein.
JavaScript-Codehinweise aktualisieren
Beim Bearbeiten von JavaScript-Dateien wird die Liste der verfgbaren Codehinweise in Dreamweaver automatisch aktualisiert. Beispiel: Sie bearbeiten eine HTML-Datei und wechseln zu einer JavaScript-Datei, um eine nderung vorzunehmen. Diese nderung ist in der Liste der Codehinweise aufgefhrt, wenn Sie wieder zur HTML-Datei wechseln. Die automatische Aktualisierung wird jedoch nur durchgefhrt, wenn Sie die JavaScript-Dateien in Dreamweaver bearbeiten. Wenn Sie die JavaScript-Dateien auerhalb von Dreamweaver bearbeiten, drcken Sie Strg+Punkt (.), um die JavaScript-Codehinweise zu aktualisieren.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 327
Mit Seitencode arbeiten
Codehinweis an.
Mens ermglicht die Angabe, welche Art von Codehinweisen beim Eingeben von Code angezeigt werden sollen.
Verwandte Themen
Men mit Codehinweisen im Quick Tag Editor verwenden auf Seite 353 W3C Document Object Model Tutorial zu Codehinweisen
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 328
Mit Seitencode arbeiten
Site-spezifische Codehinweise
In Dreamweaver CS5 knnen Entwickler mithilfe von Joomla, Drupal, Wordpress oder anderen Frameworks beim Programmieren in der Codeansicht PHP-Codehinweise anzeigen. Um diese Codehinweise anzeigen zu knnen, mssen Sie im Dialogfeld Site-spezifische Code-Hinweise zunchst eine Konfigurationsdatei erstellen. Die Konfigurationsdatei beschreibt, an welcher Stelle Dreamweaver die fr Ihre Site spezifischen Codehinweise finden kann.
Konfigurationsdatei erstellen
Erstellen Sie im Dialogfeld Site-spezifische Code-Hinweise die Konfigurationsdatei, die zum Anzeigen von Codehinweisen in Dreamweaver erforderlich ist. Die Konfigurationsdatei wird in Dreamweaver standardmig im Verzeichnis Adobe Dreamweaver CS5\configuration\Shared\Dinamico\Presets gespeichert. Hinweis: Die Codehinweise, die Sie erstellen, gelten speziell fr die im Dreamweaver-Bedienfeld Dateien ausgewhlte Site. Damit die Codehinweise angezeigt werden, muss sich die Seite, die Sie bearbeiten, in der aktuell ausgewhlten Site befinden.
1 Whlen Sie Site > Site-spezifische Code-Hinweise aus.
Die Funktion Site-spezifische Code-Hinweise analysiert automatisch Ihre Site, um festzustellen, welches CMSFramework (Content Management System) Sie verwenden. Dreamweaver untersttzt standardmig die drei Frameworks Drupal, Joomla und Wordpress. ber die vier Schaltflchen rechts neben dem Popupmen Struktur knnen Sie Framework-Strukturen importieren, speichern, umbenennen oder lschen. Hinweis: Die vorhandenen Framework-Standardstrukturen knnen Sie nicht lschen oder umbenennen.
2 Geben Sie im Textfeld Ordner im Stammordner den Ordner im Stammordner an, in dem Sie die Framework-
Dateien speichern. Sie knnen auf das Ordnersymbol neben dem Textfeld klicken, um zum Verzeichnis der Framework-Dateien zu wechseln. In Dreamweaver wird eine Dateistruktur der Ordner angezeigt, die Ihre Framework-Dateien enthalten. Wenn alle Ordner und/oder Dateien, die Sie analysieren mchten, angezeigt werden, klicken Sie auf OK, um die Analyse durchzufhren. Wenn Sie die Analyse anpassen mchten, fahren Sie mit den nchsten Schritten fort.
3 Klicken Sie auf die Schaltflche mit dem Pluszeichen (+) ber dem Fenster Dateien, um eine Datei oder einen
Ordner auszuwhlen, die bzw. den Sie der Analyse hinzufgen mchten. Im Dialogfeld Datei/Ordner hinzufgen knnen Sie bestimmte Dateierweiterungen angeben, die in die Analyse einbezogen werden sollen. Hinweis: Durch die Angabe bestimmter Dateierweiterungen wird der Analysevorgang beschleunigt.
4 Wenn Sie Dateien aus der Analyse entfernen mchten, whlen Sie die entsprechenden Dateien aus und klicken Sie
dann auf die Schaltflche mit dem Minuszeichen (-) ber dem Fenster Dateien. Hinweis: Wenn Drupal oder Joomla als Framework verwendet werden, wird im Dialogfeld Site-spezifische CodeHinweise ein zustzlicher Pfad zu einer Datei in Ihrem Dreamweaver-Konfigurationsordner angezeigt. Lschen Sie diese Datei nicht, sie ist bei Verwendung dieser Frameworks zwingend erforderlich.
5 Um festzulegen, wie eine bestimmte Datei oder ein bestimmter Ordner mithilfe der Funktion Site-spezifische
Code-Hinweise verarbeitet wird, whlen Sie die Datei bzw. den Ordner in der Liste aus und fhren Sie einen der folgenden Schritte aus:
Whlen Sie Diesen Ordner analysieren aus, um den ausgewhlten Ordner in die Analyse einzubeziehen. Whlen Sie Rekursiv aus, um alle Dateien und Unterordner in einem ausgewhlten Verzeichnis
einzubeziehen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 329
Mit Seitencode arbeiten
Klicken Sie auf die Schaltflche Erweiterungen, um das Dialogfeld Erweiterung(en) suchen zu ffnen, in
dem Sie die Dateierweiterungen angeben knnen, die fr eine bestimmte Datei oder einen bestimmten Ordner in die Analyse einbezogen werden sollen.
Site-Struktur speichern
Sie knnen benutzerdefinierte Site-Strukturen im Dialogfeld Site-spezifische Code-Hinweise speichern.
1 Erstellen Sie die gewnschte Struktur mit Dateien und Ordnern, indem Sie Dateien und Ordner nach Bedarf
Hinweis: Wenn der angegebene Name bereits vorhanden ist, werden Sie aufgefordert, einen anderen Namen einzugeben oder zu besttigen, dass Sie die Struktur mit dem gleichen Namen berschreiben mchten. Die FrameworkStandardstrukturen knnen jedoch nicht berschrieben werden.
Site-Strukturen umbenennen
Beachten Sie beim Umbenennen der Site-Struktur, dass Sie die Namen der drei Framework-Standardstrukturen sowie das Wort benutzerdefiniert nicht verwenden knnen.
1 Zeigen Sie die Struktur an, die Sie umbenennen mchten. 2 Klicken Sie auf die Symbolschaltflche Struktur umbenennen oben rechts im Dialogfeld. 3 Geben Sie einen neuen Namen fr die Struktur an und klicken Sie auf Umbenennen.
Hinweis: Wenn der angegebene Name bereits vorhanden ist, werden Sie aufgefordert, einen anderen Namen einzugeben oder zu besttigen, dass Sie die Struktur mit dem gleichen Namen berschreiben mchten. Die FrameworkStandardstrukturen knnen jedoch nicht berschrieben werden.
hinzufgen mchten. Sie knnen auch auf das Ordnersymbol neben dem Textfeld klicken, um zu einer Datei oder einem Ordner zu wechseln.
3 Klicken Sie auf die Schaltflche mit dem Pluszeichen (+) ber dem Fenster Erweiterungen, um die
Dateierweiterungen der Dateien anzugeben, die analysiert werden sollen. Hinweis: Durch die Angabe bestimmter Dateierweiterungen wird der Analysevorgang beschleunigt.
4 Klicken Sie auf Hinzufgen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 330
Mit Seitencode arbeiten
Symbolleiste aus. Um die Funktion der verschiedenen Schaltflchen zu ermitteln, platzieren Sie den Mauszeiger auf einer Schaltflche, bis die zugehrige QuickInfo angezeigt wird. In der Standardeinstellung werden die folgenden Schaltflchen in der Symbolleiste Code angezeigt:
Geffnete Dokumente listet die geffneten Dokumente auf. Wenn Sie hier ein Dokument auswhlen, wird es im
Dokumentfenster angezeigt.
Code-Navigator anzeigen zeigt den Code-Navigator an. Weitere Informationen finden Sie unter Zu zugehrigem Code navigieren auf Seite 336. Vollstndiges Tag ausblenden blendet den Inhalt zwischen einem ffnenden und dem zugehrigen schlieenden Tag aus (z. B. den Inhalt zwischen <table> und </table>). Sie mssen die Einfgemarke in das ffnende oder schlieende Tag setzen und dann auf die Schaltflche Vollstndiges Tag ausblenden klicken, um den Inhalt auszublenden.
Sie knnen den Code auerhalb eines vollstndigen Tags auch ausblenden, indem Sie eine Einfgemarke in ein ffnendes oder schlieendes Tag setzen und bei gedrckter Alt-Taste (Windows) bzw. der Wahltaste (Macintosh) auf die Schaltflche Vollstndiges Tag ausblenden klicken. Darber hinaus knnen Sie das intelligente Ausblenden aktivieren, damit Dreamweaver den auerhalb vollstndiger Tags ausgeblendeten Inhalt nicht anpasst. Dazu klicken Sie bei gedrckter Strg-Taste bzw. Ctrl auf diese Schaltflche. Weitere Informationen ber die Codeansicht finden Sie im Abschnitt Informationen zum Ausblenden von Code auf Seite 343.
Auswahl ausblenden blendet den ausgewhlten Code aus.
Sie knnen den Code auerhalb einer Auswahl auch ausblenden, indem Sie bei gedrckter Alt-Taste (Windows) bzw. Wahltaste (Macintosh) auf die Schaltflche Auswahl ausblenden klicken. Wenn Sie bei gedrckter Strg-Taste bzw. Ctrl-Taste auf diese Schaltflche klicken, knnen Sie ferner das intelligente Ausblenden deaktivieren, sodass Sie genau die Auswahl ausblenden, ohne dass diese von Dreamweaver manipuliert wird. Weitere Informationen ber die Codeansicht finden Sie im Abschnitt Informationen zum Ausblenden von Code auf Seite 343.
Alles einblenden stellt den ausgeblendeten Code wieder her. bergeordnetes Tag auswhlen whlt den Inhalt sowie die umgebenden ffnenden und schlieenden Tags der Zeile
aus, in der sich die Einfgemarke befindet. Wenn Sie mehrmals auf diese Schaltflche klicken und Ihre Tags paarweise vorhanden sind, whlt Dreamweaver schlielich das uerste Tag-Paar aus, also html und /html.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 331
Mit Seitencode arbeiten
Klammern ausgleichen whlt den Inhalt sowie die umgebenden Klammern der Zeile aus, in der sich die Einfgmarke
befindet. Wenn Sie mehrmals auf diese Schaltflche klicken und die umgebenden Symbole paarweise vorhanden sind, whlt Dreamweaver schlielich das uerste Klammerpaar im Dokument aus.
Zeilennummern ermglicht das Ausblenden oder Anzeigen von Zeilennummern am Anfang jeder Codezeile. Ungltigen Code hervorheben markiert ungltigen Code gelb. Syntaxfehlermeldungen auf der Statusleiste aktiviert bzw. deaktiviert eine Statusleiste im oberen Bereich der Seite,
auf der Syntaxfehler angezeigt werden. Wenn in Dreamweaver ein Syntaxfehler erkannt wird, wird auf der Statusleiste fr Syntaxfehler die Codezeile mit dem Fehler angegeben. Darber hinaus wird in der Codeansicht die Nummer der Zeile mit dem Fehler im linken Bereich des Dokuments hervorgehoben. Die Statusleiste ist standardmig aktiviert, wird jedoch nur angezeigt, wenn auf einer Seite Syntaxfehler ermittelt werden.
Kommentar anwenden umgibt den ausgewhlten Code mit Tags oder ffnet ein neues Kommentar-Tag.
Bei HTML-Kommentar anwenden wird der ausgewhlte Code mit den Tags <!-- und --> umschlossen. Wenn
kein Code ausgewhlt ist, wird ein neues Tag geffnet.
//-Kommentar anwenden fgt // am Anfang jeder Zeile des ausgewhlten CSS- oder JavaScript-Codes hinzu
bzw. fgt ein einzelnes //-Tag ein, wenn kein Code ausgewhlt ist.
/* */-Kommentar anwenden umgibt den ausgewhlten CSS- oder JavaScript-Code mit /* und */. '-Kommentar anwenden ist fr Visual Basic gedacht. Diese Option fgt ein Apostroph am Anfang jeder Visual
Basic-Skriptzeile oder, wenn kein Code ausgewhlt ist, an der Einfgemarke ein.
Wenn Sie an einer ASP-, ASP.NET-, JSP-, PHP- oder ColdFusion-Datei arbeiten und die Option
Serverkommentar anwenden auswhlen, ermittelt Dreamweaver das richtige Kommentar-Tag automatisch und weist es der Auswahl zu.
Kommentar entfernen entfernt Kommentar-Tags aus dem ausgewhlten Code. Bei einer Auswahl, die verschachtelte Kommentare enthlt, werden nur die ueren Kommentar-Tags entfernt. Tag um Objekt legen kapselt den ausgewhlten Code mit dem im Quick Tag Editor ausgewhlten Tag. Zuletzt verwendete Codefragmente ermglicht das Einfgen des zuletzt verwendeten Codefragments im Bedienfeld Codefragmente. Weitere Informationen finden Sie im Abschnitt Mit Codefragmenten arbeiten auf Seite 339. CSS verschieben oder konvertieren ermglicht die bernahme von CSS an einer anderen Stelle bzw. die Konvertierung von Inline-CSS in CSS-Regeln. Weitere Informationen finden Sie unter CSS-Regeln verschieben/exportieren auf Seite 151 und Inline-CSS einer CSS-Regel hinzufgen auf Seite 153. Code einrcken verschiebt die Auswahl nach rechts. Code ausrcken verschiebt die Auswahl nach links. Quellcode formatieren weist dem ausgewhlten Code zuvor angegebene Codeformate zu. Wenn kein Code
ausgewhlt ist, werden die Formate der gesamten Seite zugewiesen. Sie knnen Voreinstellungen fr die Codeformatierung im Handumdrehen festlegen, indem Sie ber die Schaltflche Quellcode formatieren die Option Codeformateinstellungen auswhlen, oder Tag-Bibliotheken bearbeiten, indem Sie auf Tag-Bibliotheken bearbeiten klicken. Die Anzahl der in der Symbolleiste Code verfgbaren Schaltflchen ist von der Gre der Codeansicht im Dokumentfenster abhngig. Um alle verfgbaren Schaltflchen anzuzeigen, knnen Sie die Codeansicht vergrern oder auf den Erweiterungspfeil unten in der Symbolleiste Code klicken. Sie knnen die Symbolleiste Code ferner bearbeiten, um weitere Schaltflchen anzuzeigen (z. B. Umbruch, Versteckte Zeichen und Automatischer Einzug) oder nicht verwendete Schaltflchen auszublenden. Dazu mssen
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 332
Mit Seitencode arbeiten
Sie die XML-Datei bearbeiten, die die Symbolleiste generiert. Weitere Informationen hierzu finden Sie im Handbuch Dreamweaver erweitern. Hinweis: Sie knnen ber das Men Ansicht auf die Option zum Anzeigen versteckter Zeichen zugreifen, die keine Standardschaltflche der Code-Symbolleiste ist (Ansicht > Codeansichtsoptionen > Versteckte Zeichen).
Verwandte Themen
berprfen, ob Tags und Klammern paarweise vorhanden sind auf Seite 347 berblick ber die Code-Symbolleiste auf Seite 12 Symbolleisten anzeigen auf Seite 22
eine Option aus. Wenn Sie auf ein Symbol klicken, wird der Code entweder sofort auf der Seite angezeigt oder Sie werden in einem Dialogfeld dazu aufgefordert, weitere Informationen einzugeben, damit der Code vervollstndigt werden kann. Um die Funktion der verschiedenen Schaltflchen zu ermitteln, platzieren Sie den Mauszeiger auf einer Schaltflche, bis die zugehrige QuickInfo angezeigt wird. Die Anzahl und Art der im Bedienfeld Einfgen verfgbaren Schaltflchen hngt vom aktuellen Dokumenttyp ab. Darber hinaus spielt es eine Rolle, ob Sie in der Codeansicht oder der Entwurfsansicht arbeiten. Obwohl das Bedienfeld Einfgen eine Sammlung hufig verwendeter Tags bietet, enthlt diese Sammlung nicht alle verfgbaren Tags. Eine umfangreichere Tag-Sammlung knnen Sie ber die Tag-Auswahl aufrufen.
Verwandte Themen
Bedienfeld Einfgen verwenden auf Seite 218
(Windows) bzw. bei gedrckter Ctrl-Taste (Macintosh) und whlen Sie Tag einfgen. Die Tag-Auswahl wird eingeblendet. Der linke Bereich enthlt eine Liste der untersttzten Tag-Bibliotheken, der rechte Bereich zeigt die einzelnen Tags im ausgewhlten Tag-Bibliothek-Ordner.
2 Whlen Sie in der Tag-Bibliothek eine Tag-Kategorie aus oder erweitern Sie die Kategorie und whlen Sie eine
Unterkategorie aus.
3 Whlen Sie im rechten Bereich ein Tag aus. 4 Wenn Sie in der Tag-Auswahl Informationen zur Syntax und Verwendung des Tags anzeigen mchten, klicken Sie
auf die Schaltflche Tag-Info. Sofern Information ber das Tag zur Verfgung stehen, werden sie angezeigt.
5 Wenn Sie dieselben Informationen ber das Tag im Bedienfeld Referenz anzeigen mchten, klicken Sie auf das
Symbol <?>. Sofern Information ber das Tag zur Verfgung stehen, werden sie angezeigt.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 333
Mit Seitencode arbeiten
6 Klicken Sie auf Einfgen, um das ausgewhlte Tag in den Code einzufgen.
Bei Tags, die im rechten Bereich in spitzen Klammern angezeigt werden (z. B. <title></title>), sind keine zustzlichen Informationen erforderlich. Sie werden unmittelbar an der Einfgemarke in das Dokument eingefgt. Wenn fr das Tag zustzliche Informationen notwendig sind, wird ein Tag-Editor eingeblendet.
7 Wenn ein Tag-Editor geffnet wird, geben Sie die zustzlich erforderlichen Informationen ein und klicken Sie auf
OK.
8 Klicken Sie auf die Schaltflche Schlieen.
Verwandte Themen
Dreamweaver-Tag-Bibliotheken auf Seite 363
HTML-Kommentare einfgen
Ein Kommentar ist Text, den Sie als Beschreibung oder Zusatzinformation in HTML-Code einfgen. Die Kommentare werden lediglich in der Codeansicht angezeigt und sind im Browser nicht sichtbar.
In der Codeansicht wird ein Kommentar-Tag eingefgt und die Einfgemarke wird in die Mitte des Tags gesetzt. Geben Sie Ihren Kommentar ein. In der Entwurfsansicht wird das Dialogfeld Kommentar angezeigt. Geben Sie Ihren Kommentar ein und klicken Sie auf OK.
Achten Sie darauf, dass in den Voreinstellungen in der Kategorie Unsichtbare Elemente die Option Kommentare ausgewhlt ist; andernfalls wird die Kommentarmarkierung nicht angezeigt.
Einfgen.
Verwandte Themen
Ausgeblendete Codefragmente einfgen und verschieben auf Seite 344
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 334
Mit Seitencode arbeiten
Codeansicht oder auf ein Objekt in der Entwurfsansicht und whlen Sie im Popupmen die Option Tag bearbeiten. (Der Inhalt dieses Dialogfelds hngt vom jeweils ausgewhlten Tag ab.)
2 Definieren oder bearbeiten Sie Attribute fr das Tag und klicken Sie auf OK.
Wenn Sie weitere Informationen ber das Tag im Tag-Editor anzeigen mchten, klicken Sie auf Tag-Info.
schlieenden Tags aus (z. B. den Inhalt auerhalb von <table> und </table>).
Alles einblenden stellt den ausgeblendeten Code wieder her. HTML-Kommentar anwenden umgibt den ausgewhlten Code mit den Tags <!-- und --> umschlossen. Wenn kein Code ausgewhlt ist, wird ein neues Tag geffnet. /* */-Kommentar anwenden umgibt den ausgewhlten CSS- oder JavaScript-Code mit /* und */. //-Kommentar anwenden fgt // am Anfang jeder Zeile des ausgewhlten CSS- oder JavaScript-Codes hinzu bzw. fgt ein einzelnes //-Tag ein, wenn kein Code ausgewhlt ist. '-Kommentar anwenden fgt ein Apostroph am Anfang jeder Visual Basic-Skriptzeile oder, wenn kein Code
ASP.NET-, JSP-, PHP- oder ColdFusion-Datei arbeiten und die Option Serverkommentar anwenden auswhlen, ermittelt Dreamweaver das richtige Kommentar-Tag automatisch und weist es der Auswahl zu.
Hack mit Backslash und Kommentar anwenden umgibt den ausgewhlten CSS-Code mit Kommentar-Tags, die
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 335
Mit Seitencode arbeiten
Caio-Hack entfernen entfernt Kommentar-Tags aus dem ausgewhlten CSS-Code. Bei einer Auswahl, die
Leerzeichen, wie in den Voreinstellungen in der Kategorie Codeformat fr die Einstellung Tabulatorgre angegeben. Weitere Informationen hierzu finden Sie unter Codeformat ndern auf Seite 320.
Leerzeichen in Tabulatoren konvertieren konvertiert Leerzeichenfolgen innerhalb der Auswahl in Tabulatoren. Jede Leerzeichenfolge, die aus so vielen Leerstellen besteht, wie als Tabulatorgre definiert ist, wird in einen Tabulator umgewandelt. Einzug rckt die Auswahl nach rechts ein. Weitere Informationen finden Sie unter Codeblcke einrcken auf Seite 335. Negativeinzug verschiebt die Auswahl nach links. Alle Tags entfernen entfernt alle Tags innerhalb der Auswahl. Zeilen in Tabelle konvertieren umgibt die Auswahl mit einem table-Tag ohne Attribute. Zeilenumbrche hinzufgen fgt am Ende jeder Zeile der Auswahl ein br-Tag hinzu. In Groschreibung konvertieren konvertiert alle Buchstaben innerhalb der Auswahl (einschlielich Tag- und
Auswahl in Grobuchstaben.
Tags in Kleinschreibung konvertieren konvertiert alle Tag- und Attributnamen sowie Attributwerte innerhalb der
Auswahl in Kleinbuchstaben.
Verwandte Themen
Codefragmente aus- und einblenden auf Seite 343
Verwandte Themen
Computer fr die Entwicklung von Anwendungen einrichten auf Seite 563
Codeblcke einrcken
Beim Schreiben und Bearbeiten von Code in der Codeansicht oder im Codeinspektor knnen Sie die Einrckungsstufe eines ausgewhlten Codeblocks oder einer Codezeile ndern und den Code so um einen Tabulator nach rechts oder links verschieben.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 336
Mit Seitencode arbeiten
Code-Navigator ffnen
Klicken Sie bei gedrckter Alt-Taste (Windows) oder bei der Tastenkombination Befehlstaste+Wahltaste
(Macintosh) auf eine Stelle auf der Seite. Im Code-Navigator werden Hyperlinks zum Code fr den Bereich angezeigt, auf den Sie geklickt haben. Klicken Sie auf eine Stelle auerhalb des Code-Navigators, um diesen zu schlieen. Hinweis: Sie knnen den Code-Navigator auch ffnen, indem Sie auf den entsprechenden Indikator klicken. Dieses Anzeigeelement wird neben der Einfgemarke auf der Seite angezeigt, wenn das Mausgert 2 Sekunden nicht verwendet wird.
Die zugehrigen Codequellen werden im Code-Navigator nach Dateien gruppiert und die Dateien sind in alphabetischer Reihenfolge aufgefhrt. Beispiel: CSS-Regeln in drei externen Dateien wirken sich auf die Auswahl in Ihrem Dokument aus. In diesem Fall sind diese drei Dateien sowie die fr die Auswahl relevanten CSS-Regeln im Code-Navigator aufgefhrt. Fr CSS-Regeln, die sich auf eine bestimmte Auswahl beziehen, nimmt der CodeNavigator die gleiche Funktion ein wie das Bedienfeld CSS-Stile im Modus Aktuell.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 337
Mit Seitencode arbeiten
Wenn Sie den Mauszeiger ber Hyperlinks zu CSS-Regeln bewegen, werden im Code-Navigator QuickInfos zu den Eigenschaften der Regeln angezeigt. Diese QuickInfos sind ntzlich bei der Unterscheidung mehrerer Regeln mit dem gleichen Namen.
Um den Indikator fr den Code-Navigator erneut zu aktivieren, klicken Sie bei gedrckter Alt-Taste (Windows) oder bei gedrckter Tastenkombination Befehlstaste+Wahltaste (Macintosh) mit der linken Maustaste, um den CodeNavigator zu ffnen. Heben Sie dann die Auswahl der Option zum Deaktivieren des Indikators auf.
Verwandte Themen
Zugehrige Dateien ffnen auf Seite 73 Tutorial zum Code-Navigator
Codeinspektor) an.
2 Fhren Sie einen der folgenden Schritte aus:
Klicken Sie in der Codeansicht mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste (Macintosh)
an einer beliebigen Stelle und whlen Sie das Untermen Funktionen im Kontextmen aus. Das Untermen Funktionen wird in der Entwurfsansicht nicht angezeigt. Wenn der Code JavaScript- oder VBScript-Funktionen enthlt, werden diese im Untermen aufgefhrt. Um die Funktionen in alphabetischer Reihenfolge anzuzeigen, klicken Sie bei gedrckter Strg-Taste mit der rechten Maustaste (Windows) bzw. bei gedrckter Tastenkombination Wahl+Ctrl (Macintosh) in der Codeansicht und whlen Sie das Untermen Funktionen.
Klicken Sie im Codeinspektor in der Symbolleiste auf die Schaltflche Liste aller Funktionen ({ }).
3 Whlen Sie einen Funktionsnamen aus, um in Ihrem Code zu dieser Funktion zu springen.
JavaScript extrahieren
Mit dem JavaScript Extractor (JSE) wird der JavaScript-Code vollstndig oder grtenteils aus einem DreamweaverDokument entfernt, in eine externe Datei exportiert sowie eine Verknpfung zwischen der externen Datei und dem Dokument erstellt. Mit dem JSE knnen zudem Event-Handler wie z. B. onclick und onmouseover aus dem Code entfernt werden. Anschlieend kann der mit diesen Event-Handlern verknpfte JavaScript-Code unauffllig an das Dokument angefgt werden.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 338
Mit Seitencode arbeiten
Beachten Sie vor der Verwendung die folgenden Beschrnkungen des JavaScript Extractor:
Mit dem JSE werden keine Skript-Tags im Body-Bereich des Dokuments extrahiert (mit Ausnahme von SpryWidgets). Es ist mglich, dass das Externalisieren dieser Skript-Tags zu unerwarteten Ergebnissen fhrt. Standardmig sind diese Skript-Tags in Dreamweaver im Dialogfeld JavaScript externalisieren aufgefhrt, sie werden jedoch nicht zur Extraktion ausgewhlt. (Bei Bedarf knnen Sie sie manuell auswhlen.)
Mit dem JSE wird JavaScript-Code nicht aus bearbeitbaren Bereichen von DWT-Dateien (DreamweaverVorlagendateien), aus nicht bearbeitbaren Bereichen von Vorlageninstanzen oder aus DreamweaverBibliothekselementen extrahiert.
Nach dem Extrahieren von JavaScript ber die Option JavaScript externalisieren und als "unaufflliges
(unobtrusive) JavaScript" anfgen knnen Dreamweaver-Verhalten nicht mehr im Bedienfeld Verhalten bearbeitet werden. Das Bedienfeld Verhalten kann nicht berprft und mit Verhalten gefllt werden, die unauffllig angefgt wurden.
Nach dem Schlieen der Seite knnen Sie Ihre nderungen nicht mehr rckgngig machen. Sie knnen die
nderungen jedoch whrend derselben Bearbeitungssitzung jederzeit rckgngig machen. Whlen Sie dazu Bearbeiten > Rckgngig > JavaScript externalisieren aus.
Einige sehr komplexe Seiten werden mglicherweise nicht wie erwartet ausgefhrt. Bedenken Sie dies beim
Extrahieren von JavaScript aus Seiten mit document.write() im Body-Bereich und mit globalen Variablen. Ein Video des Dreamweaver-Entwicklungsteams mit einem berblick ber die JavaScript-Untersttzung in Dreamweaver finden Sie unter www.adobe.com/go/dw10javascript_de. Verwenden des JavaScript Extractor:
1 ffnen Sie eine Seite, die JavaScript-Code enthlt (z. B. eine Spry-Seite). 2 Whlen Sie Befehle > JavaScript externalisieren aus. 3 Bearbeiten Sie im Dialogfeld JavaScript externalisieren gegebenenfalls die Standardoptionen.
Whlen Sie Nur JavaScript externalisieren aus, wenn JavaScript in eine externe Datei verschoben und im
aktuellen Dokument auf diese Datei verwiesen werden soll. Mit dieser Option werden Event-Handler wie onclick und onload im Dokument beibehalten und Verhalten im Bedienfeld Verhalten bleiben sichtbar.
Whlen Sie JavaScript externalisieren und als "unaufflliges (unobtrusive) JavaScript" anfgen aus, wenn 1)
JavaScript in eine externe Datei verschoben und im aktuellen Dokument auf diese Datei verwiesen werden soll und 2) Event-Handler aus dem HTML-Code entfernt und zur Laufzeit mithilfe von JavaScript eingefgt werden sollen. Wenn Sie diese Option auswhlen, knnen Sie im Bedienfeld Verhalten keine Verhalten mehr bearbeiten.
Heben Sie in der Spalte Bearbeiten die Auswahl der nderungen auf, die Sie nicht vornehmen mchten, oder
whlen Sie nderungen aus, die in Dreamweaver nicht standardmig ausgewhlt sind. In Dreamweaver sind standardmig die folgenden nderungen aufgefhrt, jedoch nicht ausgewhlt:
Skriptblcke im Body-Tag des Dokuments mit Ausnahme von Skriptblcken, die nur Konstruktoren fr
Spry-Widgets oder Spry-Datenstze enthalten
In Dreamweaver werden Elementen, die ber keine ID verfgen, automatisch IDs zugewiesen. Sie knnen diese
IDs im jeweiligen Textfeld ID ndern.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 339
Mit Seitencode arbeiten
Im Dialogfeld Zusammenfassung wird eine bersicht ber die Extraktionen angezeigt. berprfen Sie die Extraktionen und klicken Sie dann auf OK.
5 Speichern Sie die Seite.
In Dreamweaver werden die Datei SpryDOMUtils.js sowie eine weitere Datei erstellt, die den extrahierten JavaScript-Code enthlt. Die Datei SpryDOMUtils.js wird im Ordner SpryAssets in der Site gespeichert und die zweite Datei auf der gleichen Ebene wie die Seite, aus der der JavaScript-Code extrahiert wurde. Denken Sie daran, dass beim Hochladen der Ausgangsdatei auf den Webserver auch diese abhngigen Dateien hochgeladen werden mssen.
Verwandte Themen
Spry-Seiten visuell erstellen auf Seite 452
Codefragmente einfgen
1 Setzen Sie die Einfgemarke an die Stelle, an der Sie das Codefragment einfgen mchten, oder whlen Sie den
Codefragment. Sie knnen auch mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste (Macintosh) auf das Codefragment klicken und dann im Popupmen den Befehl Einfgen whlen.
Codefragmente erstellen
1 Klicken Sie unten im Bedienfeld Codefragmente auf das Symbol Neues Codefragment. 2 Geben Sie einen Namen fr das Codefragment ein.
Hinweis: Codefragmentnamen drfen keine Zeichen enthalten, die auch in Dateinamen ungltig wren, beispielsweise Schrgstriche (/ oder \), Sonderzeichen und Anfhrungszeichen (").
3 (Optional) Geben Sie fr das Codefragment eine Textbeschreibung ein. Dies erleichtert anderen Teammitgliedern
Wenn Sie einen Standardabstand fr die Blcke festlegen mchten, verwenden Sie Zeilenumbrche: Drcken Sie innerhalb der Textfelder die Eingabetaste (Windows) bzw. Return (Macintosh).
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 340
Mit Seitencode arbeiten
Hinweis: Da Codefragmente als Anfangs- und Endblcke erstellt werden knnen, ist es mglich, sie um andere Tags und Inhalte zu legen. Dies ist besonders beim Einfgen von speziellen Formatierungen, Links, Navigationselementen und Skriptblcken von Vorteil. Heben Sie einfach den Inhalt hervor, um den Sie den Code legen mchten, und fgen Sie dann das Codefragment ein.
b Wenn Sie Block einfgen gewhlt haben, geben oder fgen Sie den gewnschten Code ein. 5 (Optional) Whlen Sie einen Vorschautyp: Code oder Entwurf.
Entwurf setzt den Code um und zeigt das Ergebnis im Vorschaubereich des Bedienfelds Codefragmente an. Code zeigt den Code im Vorschaubereich an.
(Macintosh) und whlen Sie Tastenkombinationen bearbeiten. Der Editor fr Tastaturbefehle wird geffnet.
2 Whlen Sie im Popupmen Befehle die Option Codefragmente.
Weitere Informationen finden Sie unter Tastaturbefehle anpassen auf Seite 35.
Netzwerkcomputer.
3 Fordern Sie die anderen Teammitglieder auf, die Codefragment-Datei in ihren eigenen Ordner
Configuration/Snippets zu kopieren.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 341
Mit Seitencode arbeiten
Sie knnen auch nach bestimmten Textzeichenfolgen suchen, die sich innerhalb oder auerhalb von Container-Tags befinden. Wenn Sie beispielsweise nach dem Wort Unbenannt in einem title-Tag suchen, werden alle unbenannten Seiten in der Site gefunden.
1 ffnen Sie das Dokument, das durchsucht werden soll, oder whlen Sie im Bedienfeld Dateien mehrere
Sie den gesuchten Text bzw. die gesuchten Tags an. Falls gewnscht, knnen Sie auch Ersatztext festlegen. Klicken Sie dann auf eine der Suchen-Schaltflchen oder auf eine der Ersetzen-Schaltflchen.
4 Klicken Sie auf die Schaltflche Schlieen. 5 Um eine weitere Suche durchzufhren, ohne das Dialogfeld Suchen und ersetzen anzuzeigen, drcken Sie F3
Verwandte Themen
Regulre Ausdrcke auf Seite 315 Text suchen und ersetzen auf Seite 235
Verwandte Themen
Regulre Ausdrcke auf Seite 315 Text suchen und ersetzen auf Seite 235
Suchmuster speichern
1 Stellen Sie im Dialogfeld Suchen und ersetzen (Bearbeiten > Suchen und ersetzen) die Suchparameter ein. 2 Klicken Sie auf die Schaltflche Abfrage speichern (das Diskettensymbol). 3 Wechseln Sie im eingeblendeten Dialogfeld zu dem Ordner, in dem Abfragen gespeichert werden sollen. Geben Sie
dann einen Dateinamen ein, um die Suche zu kennzeichnen, und klicken Sie auf Speichern. Wenn Sie mit dem Suchmuster beispielsweise alle img-Tags suchen, die nicht das Attribut alt enthalten, knnten Sie als Dateinamen fr die Abfrage img_kein_alt.dwr eingeben. Hinweis: Gespeicherte Abfragen haben die Dateierweiterung .dwr. Einige gespeicherte Abfragen aus lteren Dreamweaver-Versionen knnen auch die Erweiterung .dwq aufweisen.
Suchmuster aufrufen
1 Whlen Sie Bearbeiten > Suchen und ersetzen. 2 Klicken Sie auf das Symbol Abfrage laden (das Ordnersymbol). 3 Wechseln Sie zu dem Ordner, in dem Ihre Abfragen gespeichert sind. Whlen Sie dann eine Abfragedatei aus und
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 342
Mit Seitencode arbeiten
Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste (Macintosh) auf ein Tag, ein
Attribut oder ein Schlsselwort und whlen Sie im Kontextmen die Option Referenz.
Setzen Sie die Einfgemarke in ein Tag, ein Attribut oder ein Schlsselwort und drcken Sie die
Tastenkombination Umschalt+F1. Das Bedienfeld Referenz wird geffnet und zeigt Informationen ber das Tag, Attribut oder Schlsselwort an, auf das Sie geklickt haben.
2 Wenn Sie die Textgre im Bedienfeld Referenz ndern mchten, klicken Sie im Optionsmen (das Sie durch
Klicken auf den kleinen Pfeil rechts oben im Bedienfeld ffnen) auf Groe Schrift, Mittlere Schrift oder Kleine Schrift.
Buch aus.
2 Um Informationen zu einem bestimmten Element anzuzeigen, whlen Sie dieses (je nach dem ausgewhlten Buch)
im Popupmen neben dem Popupmen Tag, Objekt, Stil oder CFML aus. Dieses Men enthlt die Liste der Attribute fr das von Ihnen ausgewhlte Element. Mit der Standardauswahl Beschreibung wird eine Beschreibung des ausgewhlten Elements angezeigt.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 343
Mit Seitencode arbeiten
Code drucken
Sie knnen den Code drucken, um ihn offline zu bearbeiten, zu archivieren oder Dritten zur Verfgung zu stellen.
1 ffnen Sie eine Seite in der Codeansicht. 2 Whlen Sie Datei > Code drucken. 3 Geben Sie die Druckoptionen an und klicken Sie dann auf OK (Windows) bzw. Drucken (Macintosh).
Code ausblenden
Informationen zum Ausblenden von Code
Sie knnen Codefragmente aus- und einblenden, damit andere Bereiche des Dokuments sichtbar werden, ohne dass Sie die Bildlaufleiste verwenden mssen. Wenn Sie z. B. alle CSS-Regeln im head-Tag anzeigen mchten, die fr ein div-Tag weiter unten auf der Seite relevant sind, knnen Sie den gesamten Code zwischen dem head-Tag und dem div-Tag ausblenden. Anschlieend werden beide relevanten Codefragmente gleichzeitig auf dem Bildschirm angezeigt. Codefragmente knnen zwar sowohl in der Entwurfsansicht als auch in der Codeansicht ausgewhlt werden, aber Sie knnen Code nur in der Codeansicht ausblenden. Hinweis: Aus Dreamweaver-Vorlagen erstellte Dateien werden mit vollstndig eingeblendetem Code angezeigt, auch wenn die Vorlagendatei (.dwt) ausgeblendete Codefragmente enthlt
Verwandte Themen
Ausgeblendete Codefragmente einfgen und verschieben auf Seite 344 Code mit der Code-Symbolleiste einfgen auf Seite 330 Code optimieren auf Seite 345
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 344
Mit Seitencode arbeiten
2 Whlen Sie Bearbeiten > Code ausblenden und whlen Sie eine der Optionen.
Verwandte Themen
Code ber das Kontextmen Kodierung bearbeiten auf Seite 334 Code mit der Code-Symbolleiste einfgen auf Seite 330
Hinweis: Wenn Sie in der Entwurfsansicht eine Auswahl vornehmen, die ein ausgeblendetes Codefragment teilweise enthlt, wird das Fragment automatisch in der Codeansicht eingeblendet. Wenn Sie in der Entwurfsansicht eine Auswahl vornehmen, die ein vollstndiges Codefragment umfasst, bleibt das Fragment in der Codeansicht ausgeblendet.
Verwandte Themen
Code mit der Code-Symbolleiste einfgen auf Seite 330 Code optimieren auf Seite 345
Hinweis: Beim Einfgen in andere Anwendungen bleibt das Codefragment nicht ausgeblendet.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 345
Mit Seitencode arbeiten
Um eine Kopie der Auswahl zu ziehen, ziehen Sie sie bei gedrckter Strg-Taste (Windows) bzw. bei gedrckter AltTaste (Macintosh) Hinweis: Sie knnen die Auswahl nicht in andere Dokumente ziehen.
(Macintosh).
2 Whlen Sie links in der Kategorieliste die Option Validator. 3 Whlen Sie die Tag-Bibliotheken aus, die fr die berprfung herangezogen werden sollen.
Es ist nicht mglich, mehrere Versionen derselben Tag-Bibliothek oder Sprache auszuwhlen. Wenn Sie also z. B. HTML 4.0 whlen, knnen Sie nicht auch HTML 3.2 oder HTML 2.0 whlen. Whlen Sie die frheste Version aus, die fr die berprfung herangezogen werden soll. Enthlt ein Dokument beispielsweise gltigen HTML 2.0-Code, handelt es sich dabei auch um gltigen HTML 4.0-Code.
4 Klicken Sie auf Optionen, um Optionen fr diese Bibliotheken einzustellen. 5 Whlen Sie Anzeigeoptionen fr die Arten von Fehlern und Warnungen, die im Validator-Bericht aufgefhrt
werden sollen.
6 Whlen Sie die Elemente aus, nach denen der Validator suchen soll.
Anfhrungszeichen im Text gibt an, dass Dreamweaver bei jeder Verwendung von Anfhrungszeichen im Text des
Dokuments eine Warnmeldung anzeigen soll. Sie mssen im Text von HTML-Dokumenten statt Anfhrungszeichen die Entitt " verwenden.
Entitten im Text gibt an, dass Dreamweaver empfehlen soll, bestimmte Zeichen, z. B. Et-Zeichen (&), kleiner als (<) und grer als (>), in die entsprechenden HTML-Entitten zu ndern.
7 Klicken Sie auf OK, um das Dialogfeld Validator-Optionen zu schlieen. Klicken Sie dann erneut auf OK,
Verwandte Themen
Tags berprfen auf Seite 347
Code optimieren
Sie knnen automatisch leere Tags entfernen, verschachtelte font-Tags kombinieren und unleserlichen oder unbersichtlichen HTML- bzw. XHTML-Code besser strukturieren.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 346
Mit Seitencode arbeiten
Wie Sie aus einem Microsoft Word-Dokument generierte HTML-Dokumente optimieren, erfahren Sie unter Vorhandene Dokumente ffnen und bearbeiten auf Seite 72.
1 ffnen Sie ein Dokument.
Wenn das Dokument im HTML-Code geschrieben ist, whlen Sie Befehle > HTML-Code optimieren. Wenn das Dokument im XHTML-Code geschrieben ist, whlen Sie Befehle > XHTML-Code optimieren.
ber HTML-Optimierungen hinaus werden bei einem XHTML-Dokument mit dem Befehl XHTML-Code optimieren XHTML-Syntaxfehler behoben, Grobuchstaben in Tag-Attributen durch Kleinbuchstaben ersetzt und fehlende (erforderliche) Attribute eines Tags hinzugefgt bzw. gemeldet.
2 Aktivieren Sie im angezeigten Dialogfeld die gewnschten Optionen und klicken Sie auf OK.
Hinweis: Dieser Vorgang kann mehrere Sekunden dauern, je nachdem, wie gro Ihr Dokument ist und wie viele Optionen Sie ausgewhlt haben.
Entfernen: Leere Container-Tags entfernt alle Tags, zwischen denen keine Inhalte stehen. Beispielsweise sind <b></b> und <font color="#FF0000"></font> leere Tags, das <b>-Tag in <b>Beispieltext</b> ist dagegen nicht leer. Entfernen: berflssige verschachtelte Tags entfernt alle nicht bentigten Instanzen eines Tags. Beispielsweise sind in
dem Code <b>Das wollte ich <b>wirklich</b> sagen</b> die b-Tags um das Wort wirklich berflssig und werden daher entfernt.
Entfernen: HTML-Kommentare, nicht Dreamweaver entfernt alle Kommentare, die nicht von Dreamweaver eingefgt
wurden. Zum Beispiel wrde <!--begin body text--> entfernt werden. Der Kommentar <!-- TemplateBeginEditable name="doctitle" --> aber nicht, da es sich hierbei um einen DreamweaverKommentar handelt, der den Anfang eines bearbeitbaren Bereichs in einer Vorlage markiert.
Entfernen: Spezielles Dreamweaver-Markup entfernt Kommentare, die Dreamweaver dem Code hinzufgt, damit Dokumente bei der Aktualisierung von Vorlagen und Bibliothekselementen automatisch aktualisiert werden knnen. Wenn Sie diese Option beim Optimieren von Code in einem Dokument aktivieren, das auf einer Vorlage basiert, wird das Dokument von der Vorlage gelst. Weitere Informationen finden Sie unter Dokument von einer Vorlage lsen auf Seite 445. Entfernen: Spezifische(s) Tag(s) entfernt die Tags, die im angrenzenden Textfeld angegeben werden. Lschen Sie mit dieser Option benutzerdefinierte Tags, die von anderen visuellen Editoren eingefgt wurden, und andere Tags, die nicht in der Site erscheinen sollen (beispielsweise blink). Mehrere Tags mssen durch Kommas voneinander getrennt werden (z. B. font,blink). Verschachtelte <font>-Tags, wenn mglich kombinieren vereinigt zwei oder mehr font-Tags, die denselben Textbereich steuern. So wrde beispielsweise <font size="7"><font color="#FF0000">big red</font></font> in <font size="7" color="#FF0000">big red</font> gendert. Protokoll nach Abschluss zeigen zeigt abschlieend ein Meldungsfeld an, in dem die nderungen aufgefhrt werden,
Verwandte Themen
Codeformat ndern auf Seite 320 Codefarben festlegen auf Seite 323
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 347
Mit Seitencode arbeiten
Die den Abschnitt umgebenden Tag-Paare (und der zugehrige Inhalt) werden im Code ausgewhlt. Wenn Sie den Befehl Bearbeiten > bergeordnetes Tag auswhlen mehrmals ausfhren und Ihre Tags paarweise vorhanden sind, whlt Dreamweaver schlielich das uerste Tag-Paar aus, also html und /html.
Prfen, ob Klammern, geschweifte Klammern und eckige Klammern paarweise vorhanden sind
1 ffnen Sie das Dokument in der Codeansicht. 2 Setzen Sie die Einfgemarke in den Code, den Sie prfen mchten. 3 Whlen Sie Bearbeiten > Fehlende Klammern einfgen.
Der gesamte Code zwischen den umgebenden Klammern, geschweiften Klammern bzw. eckigen Klammern wird ausgewhlt. Wenn Sie erneut Bearbeiten > Fehlende Klammern einfgen whlen, wird der gesamte Code innerhalb der Klammern, geschweiften Klammern bzw. eckigen Klammern ausgewhlt, die die neue Auswahl umgeben.
Browserkompatibilitt berprfen
Mithilfe der Funktionen fr die Browserkompatibilittsprfung knnen Sie Kombinationen von HTML und CSS aufspren, die Browserfehler auslsen knnen. Darber hinaus testet diese Funktion den Code Ihrer Dokumente auf smtliche CSS-Eigenschaften oder -Werte, die von den Zielbrowsern nicht untersttzt werden. Hinweis: Diese Funktion ersetzt die frhere Funktion Zielbrowser-Prfung, bietet aber weiterhin deren CSSFunktionalitt.
Verwandte Themen
Browserbergreifende Probleme bei der CSS-Wiedergabe berprfen auf Seite 157
Tags berprfen
Die Funktion Tags berprfen (Datei > berprfen) ist ab Dreamweaver CS5 veraltet.
Verwandte Themen
XHTML-Code auf Seite 313
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 348
Mit Seitencode arbeiten
(Dokumenttypdefinitionen) aus und klicken Sie auf Erstellen. Sie knnen beispielsweise ein HTML-Dokument XHTML-kompatibel machen, indem Sie XHTML 1.0 Transitional oder XHTML 1.0 Strict im Popupmen auswhlen. Hinweis: Nicht alle Dokumenttypen knnen XHTML-kompatibel gemacht werden.
XHTML-DTDs (Dokumenttypdefinitionen) aus. Klicken Sie auf OK. Sie knnen beispielsweise ein HTML-Dokument XHTML-kompatibel machen, indem Sie XHTML 1.0 Transitional oder XHTML 1.0 Strict im Popupmen auswhlen.
Whlen Sie fr ein Dokument ohne Frames Datei > Konvertieren und anschlieend eine der XHTMLDokumenttypdefinitionen aus. Sie knnen beispielsweise ein HTML-Dokument XHTML-kompatibel machen, indem Sie XHTML 1.0 Transitional oder XHTML 1.0 Strict im Popupmen auswhlen.
Whlen Sie fr ein Dokument mit Frames einen Frame aus. Whlen Sie dann Datei > Konvertieren und
anschlieend eine der XHTML-Dokumenttypdefinitionen aus.
2 Um das gesamte Dokument zu konvertieren, wiederholen Sie diesen Schritt fr jeden Frame sowie fr das
Frameset-Dokument. Hinweis: Es ist nicht mglich, eine Instanz einer Vorlage zu konvertieren, da sie in derselben Sprache vorliegen muss wie die Vorlage, auf der sie basiert. So ist zum Beispiel ein auf einer XHTML-Vorlage basierendes Dokument immer in XHTML kodiert. Ein auf einer nicht XHTML-kompatiblen HTML-Vorlage basierendes Dokument ist immer in HTML kodiert und kann nicht in XHTML oder eine andere Sprache konvertiert werden.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 349
Mit Seitencode arbeiten
Stellen Sie auerdem sicher, dass auf Dreamweaver-Testserver ColdFusion ausgefhrt wird. Weitere Informationen hierzu finden Sie unter Testserver einrichten auf Seite 49. Um sicherzustellen, dass die Debug-Informationen immer aktualisiert werden, wenn die Seite im internen Browser angezeigt wird, sorgen Sie dafr, dass Internet Explorer immer nach der neuesten Version sucht, wenn die Datei angefordert wird. Whlen Sie hierzu im Internet Explorer die Option Extras > Internetoptionen, whlen Sie die Registerkarte Allgemein und klicken Sie im Bereich Temporre Internetdateien auf die Schaltflche Einstellungen. Whlen Sie im Dialogfeld Einstellungen die Option Bei jedem Zugriff auf die Seite.
1 ffnen Sie die ColdFusion-Seite in Dreamweaver. 2 Klicken Sie auf das Serverdebug-Symbol
in der Dokument-Symbolleiste.
Dreamweaver fordert die Seite vom ColdFusion-Server an und zeigt sie im internen Internet Explorer-Browserfenster an. Wenn die Seite Fehler enthlt, werden mgliche Fehlerursachen im unteren Bereich der Seite angezeigt. Gleichzeitig wird das Bedienfeld Serverdebug geffnet. Das Bedienfeld liefert eine Menge ntzlicher Informationen. Es nennt beispielsweise alle Seiten, die der Server verarbeitet hat, um die Seite darzustellen, alle fr die Seite durchgefhrten SQL-Abfragen und alle Servervariablen, ggf. mit den jeweiligen Werten. berdies bietet das Bedienfeld eine bersicht ber alle Ausfhrungszeiten.
3 Wenn im Bedienfeld Serverdebug die Kategorie Ausnahmen angezeigt wird, klicken Sie auf das Pluszeichen
(+), um die Kategorie zu erweitern. Die Kategorie Ausnahmen wird angezeigt, wenn der Server ein oder mehrere Probleme in der Seite gefunden hat. Erweitern Sie die Kategorie, um Einzelheiten zu dem Problem anzuzeigen.
4 Wechseln Sie zurck in die Codeansicht (Ansicht > Code) oder in die Entwurfsansicht (Ansicht >
Dreamweaver stellt die Seite erneut im internen Browser dar und aktualisiert die Informationen im Bedienfeld Serverdebug. Wenn die Seite keine Fehler mehr aufweist, wird die Kategorie Ausnahmen nicht mehr im Bedienfeld angezeigt.
6 Zum Verlassen des Debug-Modus wechseln Sie in die Codeansicht (Ansicht > Code) oder in die
Verwandte Themen
ColdFusion-Komponenten verwenden auf Seite 691
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 350
Mit Seitencode arbeiten
Der Eigenschafteninspektor fr den Text oder das Objekt wird unterhalb des Dokumentfensters eingeblendet. Sollte der Eigenschafteninspektor nicht zu sehen sein, whlen Sie Fenster > Eigenschaften.
2 Nehmen Sie im Eigenschafteninspektor die gewnschten Attributnderungen vor.
Inhalt, um ihn zu bearbeiten. Die Schaltflche Inhalt wird nur angezeigt, wenn das ausgewhlte Tag kein leeres Tag ist (d. h., wenn sowohl das Anfangs- als auch das Schluss-Tag vorhanden ist).
3 Wenn das Tag einen bedingten Ausdruck enthlt, ndern Sie diesen bei Bedarf im Feld Ausdruck.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 351
Mit Seitencode arbeiten
Klicken Sie in der Codeansicht (oder im Codeinspektor) auf eine beliebige Stelle im Namen oder Inhalt eines Tags. Whlen Sie in der Entwurfsansicht ein Objekt aus oder whlen Sie im Tag-Selektor ein Tag aus.
2 ffnen Sie den Tag-Inspektor (Fenster > Tag-Inspektor) und whlen Sie die Registerkarte Attribute aus.
Im Tag-Inspektor werden die Attribute der Auswahl und ihre aktuellen Werte angezeigt.
3 Fhren Sie im Tag-Inspektor einen der folgenden Schritte durch:
Wenn die Attribute nach Kategorien geordnet angezeigt werden sollen, klicken Sie auf die Schaltflche
Kategorieansicht zeigen zeigen . .
Wenn die Attribute alphabetisch geordnet angezeigt werden sollen, klicken Sie auf die Schaltflche Listenansicht Wenn Sie den Wert eines Attributs ndern mchten, whlen Sie den Wert aus und bearbeiten Sie ihn. Wenn Sie einem Attribut ohne Wert einen Wert hinzufgen mchten, klicken Sie rechts neben dem Attribut auf
die Spalte mit den Attributwerten und fgen Sie einen Wert ein.
Wenn fr das Attribut vordefinierte Werte zur Verfgung stehen, whlen Sie im Popupmen (bzw. im Farbwhler)
rechts neben der Spalte mit den Attributwerten einen Wert aus.
Wenn das Attribut einen URL-Wert annehmen soll, klicken Sie auf die Schaltflche Durchsuchen, verwenden Sie
zur Auswahl einer Datei das Dateiverweissymbol oder geben Sie im Feld die URL ein.
Wenn das Attribut einen Wert aus einer Quelle fr dynamischen Inhalt (z. B. eine Datenbank) annehmen soll,
klicken Sie rechts neben der Spalte mit den Attributwerten auf die Schaltflche Dynamische Daten. Whlen Sie dann eine Quelle aus.
Wenn Sie einen Attributwert lschen mchten, whlen Sie den Wert aus und drcken Sie die Rcktaste (Windows)
bzw. die Lschtaste (Macintosh).
Wenn Sie den Namen eines Attributs ndern mchten, whlen Sie ihn aus und bearbeiten Sie ihn.
Hinweis: Wenn Sie den Namen eines Standardattributs ndern und anschlieend einen Wert fr dieses Attribut hinzufgen, wird das Attribut mit dem neuen Wert in die entsprechende Kategorie verschoben.
Wenn Sie ein neues Attribut hinzufgen mchten, das bisher nicht aufgelistet wird, klicken Sie auf den leeren Raum
unter dem letzten Attributnamen in der Liste und geben Sie einen neuen Attributnamen ein.
4 Aktualisieren Sie das Tag im Dokument, indem Sie die Eingabetaste (Windows) bzw. Return (Macintosh) drcken
Verwandte Themen
JavaScript-Verhalten verwenden auf Seite 369 CSS erstellen und verwalten auf Seite 137 Quellen fr dynamischen Inhalt definieren auf Seite 599
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 352
Mit Seitencode arbeiten
HTML einfgen wird zum Einfgen von neuem HTML-Code verwendet Tag bearbeiten dient zur Bearbeitung vorhandener Tags. Tag um Objekt legen wird verwendet, um ein neues Tag um die aktuelle Auswahl zu legen.
Hinweis: In welchem Modus der Quick Tag Editor geffnet wird, hngt von der aktuellen Auswahl in der Entwurfsansicht ab. Unabhngig vom Modus mssen Sie bei der Arbeit mit dem Quick Tag Editor die folgenden Arbeitsschritte ausfhren: Zuerst ffnen Sie den Editor, anschlieend knnen Sie Tags und Attribute eingeben oder bearbeiten und dann schlieen Sie den Editor. Sie knnen zwischen den Modi umschalten, indem Sie Strg+T (Windows) bzw. Befehl+T (Macintosh) drcken, whrend der Quick Tag Editor aktiv ist.
Verwandte Themen
Men mit Codehinweisen im Quick Tag Editor verwenden auf Seite 353
Verwandte Themen
Skripts in der Entwurfsansicht schreiben und bearbeiten auf Seite 355
HTML-Tags einfgen
1 Klicken Sie in die Entwurfsansicht, um die Einfgemarke an die Stelle zu setzen, an der Sie Code einfgen mchten. 2 Drcken Sie Strg+T (Windows) bzw. Befehl+T (Macintosh).
3 Geben Sie das HTML-Tag ein und drcken Sie die Eingabetaste.
Das Tag wird in den Code eingefgt, ggf. mit dem entsprechenden Schluss-Tag.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 353
Mit Seitencode arbeiten
4 Drcken Sie Esc, wenn Sie den Editor schlieen mchten, ohne nderungen vorzunehmen.
HTML-Tags bearbeiten
1 Whlen Sie in der Entwurfsansicht ein Objekt aus.
Sie knnen das zu bearbeitende Tag auch im Tag-Selektor unten im Dokumentfenster auswhlen. Weitere Informationen hierzu finden Sie unter Code mit dem Tag-Selektor bearbeiten auf Seite 354.
2 Drcken Sie Strg+T (Windows) bzw. Befehl+T (Macintosh).
um zum vorherigen Attribut zurckzukehren. Hinweis: Standardmig treten die nderungen in Kraft, wenn Sie Tab oder Umschalt+Tab drcken.
5 Um den Quick Tag Editor zu schlieen und alle nderungen in Kraft zu setzen, drcken Sie die Eingabetaste. 6 Um den Quick Tag Editor zu beenden, ohne weitere nderungen vorzunehmen, drcken Sie Esc.
Hinweis: Wenn Sie Text oder ein Objekt auswhlen, der bzw. das ein ffnendes oder schlieendes HTML-Tag enthlt, wird der Quick Tag Editor im Modus Tag bearbeiten statt im Modus Tag um Objekt legen geffnet.
2 Drcken Sie Strg+T (Windows) bzw. Befehl+T (Macintosh) oder klicken Sie im Eigenschafteninspektor auf die
Schaltflche fr den Quick Tag Editor. Der Quick Tag Editor wird im Modus Tag um Objekt legen geffnet.
3 Geben Sie ein einzelnes ffnendes Tag ein, z. B. strong, und drcken Sie die Eingabetaste (Windows) bzw. Return
(Macintosh). Das Tag wird am Anfang der aktuellen Auswahl und das entsprechende Schluss-Tag am Ende eingefgt.
4 Um den Quick Tag Editor zu beenden, ohne nderungen vorzunehmen, drcken Sie Esc.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 354
Mit Seitencode arbeiten
Verwandte Themen
berblick ber den Quick Tag Editor auf Seite 352
Beginnen Sie damit, einen Tag- oder Attributnamen einzugeben. Die Auswahl im Men mit Codehinweisen
springt zum ersten Element, das mit den von Ihnen eingegebenen Buchstaben beginnt.
Whlen Sie ein Element mit der Pfeil-nach-oben- bzw. Pfeil-nach-unten-Taste aus. Verwenden Sie den Rollbalken, um ein Element zu finden.
2 Drcken Sie die Eingabetaste, um das ausgewhlte Element einzufgen, oder doppelklicken Sie auf ein Element,
(Macintosh) aus und klicken Sie dann auf Codehinweise. Das Dialogfeld Voreinstellungen fr Codehinweise wird angezeigt.
2 Wenn Sie das Men fr Codehinweise deaktivieren mchten, deaktivieren Sie die Option Code-Hinweise
aktivieren.
3 Wenn Sie die Wartezeit ndern mchten, nach der das Men eingeblendet wird, stellen Sie den Schieberegler
Die Tags, die an der Einfgemarke in Frage kommen, werden im Tag-Selektor angezeigt.
2 Klicken Sie im Tag-Selektor mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste (Macintosh) auf
ein Tag.
3 Um ein Tag zu bearbeiten, whlen Sie im Men die Option Tag bearbeiten. Nehmen Sie die gewnschten
nderungen im Quick Tag Editor vor. Weitere Informationen finden Sie unter Code mit dem Quick Tag Editor bearbeiten auf Seite 352.
4 Um ein Tag zu lschen, whlen Sie im Men die Option Tag entfernen.
Die Tags, die an der Einfgemarke in Frage kommen, werden im Tag-Selektor angezeigt.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 355
Mit Seitencode arbeiten
Das durch das Tag dargestellte Objekt wird auf der Seite ausgewhlt. Mit dieser Technik knnen Sie einzelne Tabellenzeilen (tr-Tags) oder Zellen (td-Tags) auswhlen.
Schreiben Sie fr Ihre Seite ein JavaScript- oder VBScript-Skript, ohne die Entwurfsansicht zu verlassen. Erstellen Sie in Ihrem Dokument einen Hyperlink zu einer externen Skriptdatei, ohne die Entwurfsansicht zu
verlassen.
Wenn Sie mit JavaScript arbeiten, jedoch nicht genau wissen, mit welcher Version, whlen Sie JavaScript anstelle von JavaScript1.1 oder JavaScript1.2.
4 Geben oder fgen Sie den Skriptcode im Feld Inhalt ein.
nicht untersttzen, wird das Skript nicht ausgefhrt und stattdessen dieser Code angezeigt.
6 Klicken Sie auf OK.
Skripts bearbeiten
1 Whlen Sie die Skriptmarkierung aus. 2 Klicken Sie im Eigenschafteninspektor auf die Schaltflche Bearbeiten.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 356
Mit Seitencode arbeiten
Wenn Sie einen Hyperlink zu einer externen Skriptdatei erstellt haben, wird die Datei in der Codeansicht geffnet, wo Sie die gewnschten nderungen vornehmen knnen. Hinweis: Wenn sich zwischen den beiden script-Tags Code befindet, wird das Dialogfeld Skripteigenschaften geffnet, auch wenn auerdem ein Hyperlink zu einer externen Skriptdatei vorhanden ist.
3 Geben Sie im Feld Sprache entweder JavaScript oder VBScript als Sprache des Skripts an. 4 Geben Sie im Popupmen Typ die Art des Skripts an, Client-seitig oder Server. 5 (Optional:) Geben Sie im Feld Quelle eine externe Skriptdatei an, auf die ber einen Hyperlink verwiesen wird.
Klicken Sie auf das Ordnersymbol geben Sie den Pfad ein.
im Feld Sprache den Namen einer Sprache ein. Hinweis: Wenn Sie mit JavaScript arbeiten, jedoch nicht genau wissen, mit welcher Version, whlen Sie JavaScript anstelle von JavaScript1.1 oder JavaScript1.2.
2 Geben Sie im Popupmen Typ die Art des Skripts an, Client-seitig oder Server. 3 (Optional:) Geben Sie im Feld Quelle eine externe Skriptdatei an, auf die ber einen Hyperlink verwiesen wird.
Verwandte Themen
Skripts in der Entwurfsansicht schreiben und bearbeiten auf Seite 355
JavaScript-Verhalten verwenden
ber die Registerkarte Verhalten im Tag-Inspektor knnen Sie Seitenelementen schnell und einfach JavaScriptVerhalten (clientseitig) hinzufgen. Weitere Informationen finden Sie unter Integrierte Dreamweaver-Verhalten definieren auf Seite 373.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 357
Mit Seitencode arbeiten
Rand des Dokumentfensters eine Markierung angezeigt. Hinweis: Wenn Ihr Dokumentfenster so eingestellt ist, dass es nur die Codeansicht zeigt, kann die Option Ansicht > Head-Inhalt nicht aktiviert werden.
Element ein.
meta-Tags hinzufgen
1 Whlen Sie Einfgen > HTML > Head-Tags > Meta. 2 Geben Sie die Eigenschaften im angezeigten Dialogfeld an.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 358
Mit Seitencode arbeiten
meta-Tag-Eigenschaften
Legen Sie dabei folgende meta-Tag-Eigenschaften fest: Attribut gibt an, ob das meta-Tag beschreibende Informationen ber die Seite (name) oder HTTP-Header-
und refresh, sind bereits recht genau definiert (und haben jeweils eigene Eigenschafteninspektoren in Dreamweaver), aber Sie knnen praktisch jeden beliebigen Wert angeben (z. B. erstelldatum, dokumentID oder niveau).
Content (Inhalt) enthlt die eigentliche Information. Wenn Sie als Wert z. B. niveau angegeben haben, knnen Sie
Seitentitel festlegen
Beim Titel ist nur eine Eigenschaft mglich: der Titel der Seite. Der Titel wird in der Titelleiste des Dokumentfensters in Dreamweaver angezeigt sowie spter in der Titelleiste der meisten Browser. Auerdem wird er in der Symbolleiste des Dokumentfensters angezeigt.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 359
Mit Seitencode arbeiten
Seite unmittelbar nach dem Laden aktualisiert, geben Sie in diesem Feld 0 ein.
Aktion bzw. URL gibt an, ob der Browser nach der angegebenen Verzgerung eine andere URL aufrufen oder die aktuelle Seite aktualisieren soll. Wenn eine andere URL aufgerufen (und nicht die aktuelle Seite aktualisiert) werden soll, klicken Sie auf die Schaltflche Durchsuchen und whlen Sie die zu ladende Seite aus.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 360
Mit Seitencode arbeiten
Basis-meta-Tag hinzufgen
1 Whlen Sie Einfgen > HTML > Head-Tags > Basis. 2 Legen Sie im angezeigten Dialogfeld die meta-Tag-Eigenschaften der Basis fest.
Basis-meta-Tag bearbeiten
1 Whlen Sie Ansicht > Head-Inhalt aus. 2 Whlen Sie die Basis-Markierung aus, die am oberen Rand des Dokumentfensters angezeigt wird. 3 Legen Sie im Eigenschafteninspektor die Eigenschaften des Basis-meta-Tags fest.
einen der Frames im aktuellen Frameset oder einen der folgenden fr diesen Zweck reservierten Namen aus:
_blank ldt das verknpfte Dokument in ein neues, unbenanntes Browserfenster. _parent ldt das verknpfte Dokument in das bergeordnete Frameset oder das Fenster des Frames, der den Hyperlink enthlt. Wenn der Frame, der den Hyperlink enthlt, nicht verschachtelt ist, entspricht dieses Ziel dem Ziel _top. Das verknpfte Dokument wird in das ganze Browserfenster geladen. _self ldt das verknpfte Dokument in denselben Frame oder dasselbe Fenster wie den Hyperlink. Dies ist das
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 361
Mit Seitencode arbeiten
Datei zu suchen und auszuwhlen, oder geben Sie in das Feld einen Pfad ein. Beachten Sie, dass dieses Attribut keine Datei angibt, zu der Sie im blichen HTML-Sinne eine Verknpfung herstellen. Die in einem link-Element festgelegten Beziehungen sind komplexer.
ID ist ein eindeutiger Bezeichner fr den Hyperlink. Titel beschreibt die Beziehung. Dieses Attribut hat eine spezielle Bedeutung fr verknpfte Stylesheets. Nhere
Informationen hierzu finden Sie im Abschnitt External Style Sheets der HTML-Spezifikation 4.0 auf der Website des World Wide Web Consortium unter www.w3.org/TR/REC-html40/present/styles.html#style-external.
Rel bestimmt die Beziehung zwischen dem aktuellen Dokument und dem im Textfeld Href angegebenen Dokument. Mgliche Werte sind Alternate, Stylesheet, Start, Next, Prev, Contents, Index, Glossary, Copyright, Chapter, Section, Subsection, Appendix, Help und Bookmark. Wenn Sie mehrere Beziehungen festlegen mchten, fgen Sie ein Leerzeichen zwischen den einzelnen Werten ein. Rev legt eine umgekehrte Beziehung (das Gegenteil von Rel) zwischen dem aktuellen Dokument und dem im
Textfeld Href angegebenen Dokument fest. Die mglichen Werte sind hierbei dieselben wie bei Rel.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 362
Mit Seitencode arbeiten
Wenn Sie in ein Dokument ein Server-Side Include einfgen, wird in das aktuelle Dokument lediglich ein Verweis auf eine externe Datei eingefgt und nicht der Inhalt der angegebenen Datei. Die angegebene Datei sollte nur die von Ihnen vorgesehenen Inhalte enthalten. Das heit, die Include-Datei darf keine head-Tags, body-Tags oder html-Tags (gemeint ist nur das Tag <html>; HTML-Formatierungstags wie p-Tags, div-Tags usw. sind zulssig) enthalten. Wenn die Datei diese Tags enthlt, treten bei den Tags im Ursprungsdokument Probleme auf und die Seite wird in Dreamweaver nicht ordnungsgem angezeigt. Sie knnen die eingeschlossene Datei allerdings nicht direkt in einem Dokument bearbeiten. Wenn Sie den Inhalt eines Server-Side Includes bearbeiten mchten, mssen Sie die eingeschlossene Datei direkt bearbeiten. nderungen an der externen Datei werden automatisch in allen Dokumenten wirksam, die diese Datei enthalten. Es gibt zwei Arten von Server-Side Includes: Virtuell und Datei. Dreamweaver fgt standardmig IncludeDateien vom Typ Datei ein. Sie knnen jedoch im Eigenschafteninspektor auch den fr den verwendeten Webserver geeigneten Typ auswhlen:
Wenn Sie einen Apache-Webserver verwenden, whlen Sie Virtuell. In Apache funktioniert Virtuell in allen,
Datei hingegen nur in einigen Fllen.
Wenn Sie einen Microsoft IIS-Server verwenden, whlen Sie Datei. (Virtuell funktioniert mit IIS nur unter
bestimmten Umstnden.) Hinweis: Leider knnen Sie mit IIS nur dann Dateien in einen dem aktuellen Ordner bergeordneten Ordner einschlieen, wenn auf dem Server eine spezielle Software installiert wurde. Wenn Sie eine Datei aus einem bergeordneten Ordner in der Ordnerhierarchie eines IIS-Servers einschlieen mssen, fragen Sie den Systemadministrator, ob die hierzu bentigte Software installiert ist.
Verwenden Sie andere Servertypen oder ist Ihnen der Servertyp nicht bekannt, fragen Sie den Systemadministrator
nach der richtigen Option. Manche Server sind so konfiguriert, dass sie alle Dateien auf Server-Side Includes hin untersuchen. Andere Server untersuchen dagegen nur Dateien mit einer bestimmten Erweiterung, wie .shtml, .shtm oder .inc. Sollte ein ServerSide Include bei Ihnen nicht funktionieren, erkundigen Sie sich bei Ihrem Administrator, ob die Datei mit dem Include eine bestimmte Erweiterung haben muss. (Lautet der Dateiname beispielsweise canoe.html, mssen Sie ihn mglicherweise in canoe.shtml ndern.) Sollen die Dateien die Erweiterungen .html oder .htm beibehalten, lassen Sie den Server vom Systemadministrator so konfigurieren, dass alle Dateien (und nicht nur Dateien mit einer bestimmten Erweiterung) auf Server-Side Includes berprft werden. Fr das Durchsuchen einer Datei auf ServerSide Includes wird zustzliche Zeit bentigt, sodass Seiten, die der Server durchsucht, etwas langsamer bereitgestellt werden als andere Seiten. Einige Systemadministratoren vermeiden daher, das Durchsuchen aller Dateien einzurichten.
Wenn Sie einen Apache-Webserver verwenden, whlen Sie Virtuell. In Apache funktioniert Virtuell in allen,
Datei hingegen nur in einigen Fllen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 363
Mit Seitencode arbeiten
Wenn Sie einen Microsoft IIS-Server verwenden, whlen Sie Datei. (Virtuell funktioniert mit IIS nur unter
bestimmten Umstnden.) Hinweis: Leider knnen Sie mit IIS nur dann Dateien in einen dem aktuellen Ordner bergeordneten Ordner einschlieen, wenn auf dem Server eine spezielle Software installiert wurde. Wenn Sie eine Datei aus einem bergeordneten Ordner in der Ordnerhierarchie eines IIS-Servers einschlieen mchten, fragen Sie den Systemadministrator, ob die hierzu bentigte Software installiert ist.
Verwenden Sie andere Servertypen oder ist Ihnen der Servertyp nicht bekannt, fragen Sie den Systemadministrator
nach der richtigen Option.
Klicken Sie auf das Ordnersymbol, wechseln Sie in den entsprechenden Ordner und whlen Sie eine neue
einzufgende Datei aus.
Geben Sie im Feld den Pfad und den Dateinamen der neu einzufgenden Datei ein.
Eigenschafteninspektor auf Bearbeiten. Die eingeschlossene Datei wird in einem neuen Dokumentfenster geffnet.
2 Bearbeiten Sie die Datei und speichern Sie sie anschlieend.
Die nderungen werden sofort im aktuellen Dokument wiedergegeben sowie in allen Dokumenten, die Sie anschlieend ffnen und die diese Datei enthalten.
3 Laden Sie, falls notwendig, die Include-Datei auf die Remote-Site hoch.
Tag-Bibliotheken verwalten
Dreamweaver-Tag-Bibliotheken
Eine Tag-Bibliothek in Dreamweaver ist eine Sammlung von Tags einer bestimmten Art. Sie enthlt auch Informationen dazu, wie die Tags von Dreamweaver formatiert werden sollen. Tag-Bibliotheken bieten die Informationen zu Tags, die in Dreamweaver fr Codehinweise und Zielbrowserprfungen, fr die Tag-Auswahl und fr andere Kodierungsfunktionen verwendet werden. Mit dem Tag-Bibliothek-Editor knnen Sie Tag-Bibliotheken, Tags, Attribute und Attributwerte hinzufgen und lschen, Eigenschaften fr eine Tag-Bibliothek festlegen, einschlielich des Formats (zur leichteren Identifizierung im Code) sowie Tags und Attribute bearbeiten.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 364
Mit Seitencode arbeiten
Verwandte Themen
Benutzerdefinierte Tags in Dreamweaver importieren auf Seite 366 Codeeinstellungen festlegen auf Seite 319
Das Dialogfeld Tag-Bibliothek-Editor wird angezeigt. (Die Anzeige der Optionen in diesem Dialogfeld hngt vom jeweils ausgewhlten Tag ab.)
2 Zum Schlieen des Tag-Bibliothek-Editors fhren Sie einen der folgenden Schritte aus:
Um nderungen zu speichern, klicken Sie auf OK. Um den Tag-Bibliothek-Editor zu schlieen, ohne nderungen zu speichern, klicken Sie auf Abbrechen.
Hinweis: Wenn Sie auf Abbrechen klicken, werden alle nderungen verworfen, die Sie im Tag-Bibliothek-Editor vorgenommen haben. Falls Sie ein Tag oder eine Tag-Bibliothek gelscht haben, wird das betreffende Element wiederhergestellt.
Verwandte Themen
Codeeinstellungen festlegen auf Seite 319 Benutzerdefinierte Tags in Dreamweaver importieren auf Seite 366
Tag-Bibliotheken hinzufgen
1 Klicken Sie im Tag-Bibliothek-Editor (Bearbeiten > Tag-Bibliotheken) auf die Plusschaltflche (+) und whlen
Tag-Namen durch ein Komma und ein Leerzeichen (z. B. cfgraph, cfgraphdata).
4 Wenn die neuen Tags entsprechende Schluss-Tags haben (</...>), aktivieren Sie die Option Passende Schluss-
Tags.
5 Klicken Sie auf OK.
Tag-Attribute hinzufgen
1 Klicken Sie im Tag-Bibliothek-Editor (Bearbeiten > Tag-Bibliotheken) auf die Plusschaltflche (+) und whlen
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 365
Mit Seitencode arbeiten
2 Whlen Sie im Popupmen Tag-Bibliothek eine Tag-Bibliothek aus. 3 Whlen Sie im Popupmen Tag ein Tag aus. 4 Geben Sie den Namen des neuen Attributs ein. Wenn Sie mehrere Attribute hinzufgen mchten, trennen Sie die
einzelnen Attributnamen durch ein Komma und ein Leerzeichen (z. B. width, height).
5 Klicken Sie auf OK.
Verwandte Themen
Codeeinstellungen festlegen auf Seite 319
(kein Tag) aus. Hinweis: Die Eigenschaften fr Tag-Bibliotheken werden nur angezeigt, wenn eine Tag-Bibliothek ausgewhlt wurde. Tag-Bibliotheken werden durch die Ordner der obersten Ebene in der Liste Tags dargestellt. Beispielsweise reprsentiert der Ordner HTML-Tags eine Tag-Bibliothek und der Ordner abbr im Ordner HTML-Tags ein Tag.
2 Whlen Sie in der Liste Verwendet in alle Dokumenttypen aus, bei denen die Tag-Bibliothek verwendet werden soll.
Mit den hier ausgewhlten Dokumenttypen legen Sie fest, welche Dokumenttypen Codehinweise fr die angegebene Tag-Bibliothek bieten. Wird beispielsweise fr eine bestimmte Tag-Bibliothek die Option HTML nicht ausgewhlt, werden in HTML-Dateien keine Codehinweise fr diese Tag-Bibliothek angezeigt.
3 Optional: Geben Sie im Feld Tag-Prfix das Prfix fr die Tags ein.
Hinweis: Anhand des Prfixes knnen Sie ein Tag im Code als Bestandteil einer bestimmten Tag-Bibliothek erkennen. Bei einigen Tag-Bibliotheken werden keine Prfixe verwendet.
4 Klicken Sie auf OK.
Wahl zwischen Standard, Kleinbuchstaben, Grobuchstaben und Gemischte Gro- und Kleinschreibung. Wenn Sie Gemischte Gro- und Kleinschreibung whlen, wird das Dialogfeld Gemischte Gro- und Kleinschreibung des Tag-Namens angezeigt. Geben Sie das Tag in der Schreibweise ein, die in Dreamweaver beim Einfgen des Tags verwendet werden soll (z. B. getProperty) und klicken Sie auf OK.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 366
Mit Seitencode arbeiten
Standardeinstellung festlegen legt die Standardschreibweise fr alle Tags fest. Whlen Sie im Dialogfeld
Standardschreibweise fr Tag-Namen die Option <GROSSBUCHSTABEN> oder <kleinbuchstaben> und klicken Sie auf OK. Im Zweifelsfall sollten Sie Kleinbuchstaben als Standardschreibweise whlen. Dadurch ist die Kompatibilitt mit dem XML- und dem XHTML-Standard gewhrleistet.
Tag-Attribute bearbeiten
1 Erweitern Sie im Tag-Bibliothek-Editor (Bearbeiten > Tag-Bibliotheken) in der Liste Tags eine Tag-
Bibliothek. Erweitern Sie dann ein Tag und whlen Sie ein Tag-Attribut aus.
2 Whlen Sie im Popupmen Attribut-Schreibweise die Option Standard, Kleinbuchstaben,
Grobuchstaben oder Gemischte Gro- und Kleinschreibung aus. Wenn Sie Gemischte Gro- und Kleinschreibung whlen, wird das Dialogfeld Attributname in Gro- und Kleinschreibung angezeigt. Geben Sie das Attribut in der Schreibweise ein, die in Dreamweaver beim Einfgen des Tags verwendet werden soll (z. B. onClick) und klicken Sie auf OK. Klicken Sie auf den Hyperlink Als Standard festlegen, um die Standardschreibweise fr alle Attributnamen festzulegen.
3 Whlen Sie im Popupmen Attribut-Typ den gewnschten Typ des Attributs.
Wenn Sie Nummeriert whlen, geben Sie anschlieend im Feld Werte alle Werte ein, die fr das Attribut zulssig sein sollen. Trennen Sie die Werte durch Kommas und fgen Sie keine Leerzeichen ein. Beispielsweise werden die aufgezhlten Werte des showborder-Attributs des cfchart-Tags als yes,no aufgefhrt.
Verwandte Themen
Codeeinstellungen festlegen auf Seite 319
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 367
Mit Seitencode arbeiten
importieren aus.
3 Geben Sie den Dateinamen oder die URL der DTD- oder Schemadatei ein. 4 Geben Sie das Prfix ein, das bei den Tags verwendet werden soll.
Hinweis: Anhand des Prfixes knnen Sie ein Tag im Code als Bestandteil einer bestimmten Tag-Bibliothek erkennen. Bei einigen Tag-Bibliotheken werden keine Prfixe verwendet.
5 Klicken Sie auf OK.
Wenn Sie alle benutzerdefinierten ASP.NET-Tags vom Anwendungsserver importieren mchten, whlen Sie
ASPNet > Alle benutzerdefinierten ASPNet-Tags importieren.
Wenn Sie nur bestimmte benutzerdefinierte Tags vom Anwendungsserver importieren mchten, whlen Sie
ASPNet > Ausgewhlte benutzerdefinierte ASPNet-Tags importieren aus. Klicken Sie bei gedrckter StrgTaste (Windows) bzw. bei gedrckter Befehlstaste (Macintosh) auf die gewnschten Tags in der Liste.
JSP-Tags aus einer Datei oder von einem Server importieren (web.xml)
JSP-Tag-Bibliotheken knnen aus vielen verschiedenen Dateitypen oder von einem JSP-Server in Dreamweaver importiert werden.
1 ffnen Sie in Dreamweaver eine JSP-Seite. 2 ffnen Sie den Tag-Bibliothek-Editor (Bearbeiten > Tag-Bibliotheken). 3 Klicken Sie auf die Plusschaltflche (+) und whlen Sie JSP > Name der zu importierenden Datei (*.tld, *.jar,
*.zip).
4 Klicken Sie auf die Schaltflche Durchsuchen oder geben Sie den Namen der Datei ein, die die Tag-Bibliothek
enthlt.
5 Geben Sie einen URI zur Identifizierung der Tag-Bibliothek ein.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 368
Mit Seitencode arbeiten
Der URI (Uniform Resource Identifier) besteht oftmals aus der URL der Organisation, die die Tag-Bibliothek verwaltet. Die URL dient hierbei nicht zum Anzeigen der Website der Organisation, sondern lediglich als Kennung der Tag-Bibliothek.
6 (Optional) Geben Sie das Prfix ein, das bei den Tags verwendet werden soll. Einige Tag-Bibliotheken verwenden
ein Prfix, um ein Tag im Code als Bestandteil einer bestimmten Tag-Bibliothek zu identifizieren.
7 Klicken Sie auf OK.
JRun-Tags importieren
Wenn Sie Adobe JRun verwenden, knnen Sie JRun-Tags in Dreamweaver importieren.
1 ffnen Sie in Dreamweaver eine JSP-Seite. 2 ffnen Sie den Tag-Bibliothek-Editor (Bearbeiten > Tag-Bibliotheken). 3 Klicken Sie auf die Plusschaltflche (+) und whlen Sie JSP > JRUN-Server-Tags aus Ordner importieren. 4 Geben Sie den Namen des Ordners ein, der die JRun-Tags enthlt. 5 Geben Sie einen URI zur Identifizierung der Tag-Bibliothek ein.
Der URI (Uniform Resource Identifier) besteht oftmals aus der URL der Organisation, die die Tag-Bibliothek verwaltet. Die URL dient hierbei nicht zum Anzeigen der Website der Organisation, sondern lediglich als Kennung der Tag-Bibliothek.
6 (Optional) Geben Sie das Prfix ein, das bei den Tags verwendet werden soll. Einige Tag-Bibliotheken verwenden
ein Prfix, um ein Tag im Code als Bestandteil einer bestimmten Tag-Bibliothek zu identifizieren.
7 Klicken Sie auf OK.
ENTWURF
Letzte Aktualisierung 19.3.2010
369
JavaScript-Verhalten verwenden
JavaScript-Verhalten
Mit Adobe Dreamweaver CS5-Verhalten wird JavaScript-Code in Dokumente eingefgt, damit Besucher Webseiten auf unterschiedliche Weise ndern oder bestimmte Aufgaben starten knnen. Ein Verhalten stellt eine Kombination eines Ereignisses mit einer durch dieses Ereignis ausgelsten Aktion dar. Im Bedienfeld Verhalten knnen Sie einer Seite ein Verhalten hinzufgen, indem Sie eine Aktion angeben und anschlieend die Ereignisse angeben, die diese Aktion auslsen. Hinweis: Verhaltenscode ist clientseitiger JavaScript-Code, d. h., er wird in Browsern ausgefhrt und nicht auf Servern. Ereignisse sind von Browsern generierte Meldungen, die angeben, dass ein Besucher der Seite einen bestimmten Vorgang durchgefhrt hat. Wenn ein Besucher beispielsweise den Mauszeiger auf einen Hyperlink setzt, generiert der Browser fr diesen Hyperlink ein onMouseOver-Ereignis. Anschlieend berprft der Browser, ob in diesem Fall ein bestimmter (auf der angezeigten Seite angegebener) JavaScript-Code ausgefhrt werden muss. Fr die verschiedenen Seitenelemente sind unterschiedliche Ereignisse definiert. Bei den meisten Browsern sind beispielsweise die Ereignisse onMouseOver und onClick Hyperlinks zugeordnet, whrend das Ereignis onLoad Bildern und dem body-Abschnitt des Dokuments zugeordnet ist. Eine Aktion besteht aus zuvor geschriebenem JavaScript-Code, ber den eine Aufgabe ausgefhrt wird, z. B. ffnen eines Browserfensters, Anzeigen oder Ausblenden eines AP-Elements, Wiedergeben von Audiodateien oder Anhalten eines Adobe Shockwave-Films. Die zum Lieferumfang von Dreamweaver gehrenden Aktionen bieten eine maximale browserbergreifende Kompatibilitt. Nachdem Sie fr ein Seitenelement ein Verhalten definiert haben, ruft das Verhalten die einem Ereignis zugeordnete Aktion (den JavaScript-Code) auf, wenn das Ereignis fr dieses Element eintritt. (Die Ereignisse zum Auslsen von Aktionen sind je nach Browser verschieden.) Wenn Sie beispielsweise die Aktion Popup-Meldung mit einem Hyperlink verknpfen und festlegen, dass sie durch das Ereignis onMouseOver ausgelst wird, wird die Meldung angezeigt, sobald der Mauszeiger auf diesen Hyperlink gesetzt wird. Ein einzelnes Ereignis kann mehrere verschiedene Aktionen auslsen. Sie knnen festlegen, in welcher Reihenfolge diese Aktionen ausgefhrt werden. Dreamweaver verfgt ber etwa zwei Dutzend Verhaltensaktionen. Weitere Aktionen finden Sie auf der ExchangeWebsite unter www.adobe.com/go/dreamweaver_exchange_de sowie auf den Websites von Drittanbietern. Wenn Sie gute Kenntnisse in JavaScript haben, knnen Sie auch benutzerdefinierte Aktionen schreiben. Hinweis: Die Begriffe Verhalten und Aktion sind Dreamweaver-spezifisch und keine HTML-Begriffe. Aus Sicht des Browsers ist eine Aktion ganz normaler JavaScript-Code.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 370
JavaScript-Verhalten hinzufgen
in client- und serverseitige Kategorien unterteilt. Die Ereignisse der einzelnen Kategorien sind in einer ausblendbaren Liste aufgefhrt. Festgelegte Ereignisse anzeigen ist die Standardansicht.
Alle Ereignisse zeigen Zeigt alle Ereignisse fr eine bestimmte Kategorie in alphabetischer Reihenfolge an. Verhalten hinzufgen (+) Zeigt ein Men mit Aktionen an, die mit dem aktuellen ausgewhlten Element verbunden werden knnen. Wenn Sie in dieser Liste eine Aktion auswhlen, wird ein Dialogfeld angezeigt, in dem Sie Parameter fr die Aktion angeben knnen. Wenn alle Aktionen abgeblendet sind, knnen vom ausgewhlten Element keine Ereignisse generiert werden. Ereignis entfernen () Entfernt das ausgewhlte Ereignis samt Aktion aus der Verhaltenliste. Pfeil-nach-oben und Pfeil-nach-unten Verschieben die ausgewhlte Aktion in der Verhaltenliste fr ein bestimmtes
Ereignis nach oben oder nach unten. Die Reihenfolge der Aktionen kann nur fr ein bestimmtes Ereignis gendert werden. Beispielsweise knnen Sie die Reihenfolge ndern, in der verschiedene Aktionen fr das onLoad-Ereignis auftreten. Alle onLoad-Aktionen bleiben aber in der Verhaltenliste. Bei Aktionen, die in der Liste nicht nach oben oder unten verschoben werden knnen, sind die Pfeilschaltflchen deaktiviert.
Ereignisse Zeigt ein Popupmen mit allen Ereignissen an, die die Aktion auslsen knnen. Das Popupmen wird nur
angezeigt, wenn ein Ereignis ausgewhlt ist. (Dieses Men wird angezeigt, wenn Sie auf die Pfeilschaltflche neben dem Namen des ausgewhlten Ereignisses klicken.) Je nach dem ausgewhlten Objekt werden verschiedene Ereignisse angezeigt. Wenn die erwarteten Ereignisse nicht angezeigt werden, berprfen Sie, ob das richtige Seitenelement oder Tag ausgewhlt ist. (Verwenden Sie zum Auswhlen eines bestimmten Tags den Tag-Selektor in der linken unteren Ecke des Dokumentfensters.) Hinweis: In Klammern stehende Ereignisnamen sind nur fr Hyperlinks verfgbar. Wenn Sie einen dieser Ereignisnamen auswhlen, wird dem ausgewhlten Seitenelement automatisch ein Null-Hyperlink hinzugefgt, und das Verhalten wird diesem Hyperlink zugeordnet (und nicht dem Element selbst). Im HTML-Code wird ein Null-Hyperlink wie folgt angegeben: href="javascript:;"
Ereignisse
Jeder Browser verfgt ber eine Gruppe von Ereignissen, die Sie den im Men Aktionen (+) des Bedienfelds Verhalten aufgefhrten Aktionen zuordnen knnen. Wenn ein Besucher einer Webseite bestimmte Vorgnge auf der Seite durchfhrt und beispielsweise auf ein Bild klickt, generiert der Browser Ereignisse. Mit diesen Ereignissen knnen JavaScript-Funktionen aufgerufen werden, die eine Aktion ausfhren. Dreamweaver beinhaltet zahlreiche gngige Aktionen, die mit diesen Ereignissen ausgelst werden knnen. Die Namen und Beschreibungen der Ereignisse der einzelnen Browser finden Sie im Dreamweaver Support Center unter www.adobe.com/go/dreamweaver_support_de.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 371
JavaScript-Verhalten hinzufgen
Je nach ausgewhltem Objekt werden im Men Ereignisse unterschiedliche Ereignisse angezeigt. Wenn Sie herausfinden mchten, welche Ereignisse ein bestimmter Browser fr ein bestimmtes Seitenelement untersttzt, knnen Sie das Seitenelement in ein Dokument einfgen und ein Verhalten definieren. berprfen Sie dann im Bedienfeld Verhalten das Men Ereignisse. (Ereignisse werden standardmig aus der HTML 4.01-Ereignisliste abgerufen und von den meisten modernen Browsern untersttzt.) Ereignisse sind mglicherweise abgeblendet (hellgrau angezeigt), wenn die jeweiligen Objekte noch nicht auf der Seite vorhanden sind oder wenn das ausgewhlte Objekt keine Ereignisse empfangen kann. Wenn die erwarteten Ereignisse nicht angezeigt werden, stellen Sie sicher, dass das richtige Objekt ausgewhlt ist. Wenn Sie fr ein Bild ein Verhalten definieren, werden manche Ereignisse (wie onMouseOver) in Klammern angezeigt. Diese Ereignisse stehen nur fr Hyperlinks zur Verfgung. Wenn Sie eines dieser Ereignisse auswhlen, setzt Dreamweaver die Bildreferenz zwischen <a>-Tags, um einen Null-Hyperlink zu definieren. Der Null-Hyperlink wird im Eigenschafteninspektor im Textfeld Hyperlink durch javascript:; angegeben. Sie knnen den Wert des Null-Hyperlinks ndern und so einen richtigen Hyperlink zu einer anderen Seite erstellen. Wenn Sie den JavaScriptHyperlink lschen, ohne ihn durch einen anderen Hyperlink zu ersetzen, wird das Verhalten entfernt. Angaben zur Verwendung eines bestimmten Ereignisses in einem bestimmten Browser finden Sie, indem Sie das entsprechende Ereignis in den Dateien des Ordners Dreamweaver/Configuration/Behaviors/Events suchen.
Verhalten definieren
Sie knnen fr ein ganzes Dokument (d. h. fr das <body>-Tag), Hyperlinks, Bilder, Formularelemente oder eine Reihe weiterer HTML-Elemente Verhalten definieren. Die fr ein bestimmtes Element untersttzten Ereignisse hngen vom ausgewhlten Zielbrowser ab. Sie knnen fr jedes Ereignis mehrere Aktionen festlegen. Aktionen werden in der Reihenfolge ausgefhrt, in der sie in der Spalte Aktionen des Bedienfelds Verhalten aufgefhrt sind.
1 Whlen Sie ein Element auf der Seite aus, z. B. ein Bild oder einen Hyperlink.
Soll ein Verhalten fr eine ganze Seite definiert werden, klicken Sie im Tag-Selektor unten links im Dokumentfenster auf das Tag <body>.
2 Whlen Sie Fenster > Verhalten aus. 3 Klicken Sie auf die Schaltflche mit dem Pluszeichen (+) und whlen Sie eine Aktion im Men Verhalten
hinzufgen aus. Aktionen, die in diesem Men abgeblendet sind, knnen nicht ausgewhlt werden. Wenn sie abgeblendet sind, fehlt im aktuellen Dokument mglicherweise ein erforderliches Objekt. Die Aktion Shockwave oder SWF steuern ist beispielsweise abgeblendet, wenn das Dokument keine Shockwave- oder SWF-Dateien enthlt. Wenn Sie eine Aktion auswhlen, wird ein Dialogfeld mit Parametern und Anweisungen fr die Aktion angezeigt.
4 Geben Sie Parameter fr die Aktion ein und klicken Sie auf OK.
Alle Aktionen, die in Dreamweaver zur Verfgung stehen, knnen in modernen Browsern eingesetzt werden. Einige Aktionen funktionieren nicht in lteren Browsern, aber sie verursachen keine Fehler. Hinweis: Zielelemente mssen eine eindeutige ID aufweisen. Wenn Sie z. B. einem Bild das Verhalten Bild austauschen zuweisen mchten, muss das Bild eine ID haben. Wenn fr das Element keine ID festgelegt wurde, wird eine solche ID automatisch von Dreamweaver erstellt.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 372
JavaScript-Verhalten hinzufgen
5 Das Standardereignis, das die Aktion auslst, wird in der Spalte Ereignisse angezeigt. Wenn es sich hierbei nicht
um das gewnschte auslsende Ereignis handelt, whlen Sie im Popupmen Ereignisse ein anderes Ereignis aus. (Um das Men Ereignisse zu ffnen, whlen Sie im Bedienfeld Verhalten ein Ereignis oder eine Aktion aus und klicken Sie dann zwischen dem Namen des Ereignisses und dem Namen der Aktion auf den nach unten zeigenden schwarzen Pfeil.)
Um die Parameter einer Aktion zu bearbeiten, doppelklicken Sie auf den entsprechenden Namen oder whlen Sie
die Aktion aus. Drcken Sie dann die Eingabetaste (Windows) bzw. Return (Macintosh). ndern Sie anschlieend im Dialogfeld die Parameter und klicken Sie auf OK.
Um die Reihenfolge der Aktionen fr ein bestimmtes Ereignis zu ndern, whlen Sie das Verhalten aus und klicken
Sie auf den Pfeil nach oben oder unten. Sie knnen zudem die Aktion markieren und ausschneiden und dann an der gewnschten Position zwischen den anderen Aktionen einfgen.
Um ein Verhalten zu lschen, whlen Sie es aus und klicken Sie auf die Schaltflche mit dem Minuszeichen () oder
drcken Sie die Entf-Taste.
Verhalten aktualisieren
1 Whlen Sie ein Element aus, fr das ein Verhalten definiert ist. 2 Whlen Sie Fenster > Verhalten aus und doppelklicken Sie auf das Verhalten. 3 Nehmen Sie im Dialogfeld des Verhaltens die gewnschten nderungen vor und klicken Sie auf OK.
Daraufhin werden alle Vorkommen des Verhaltens auf der entsprechenden Seite aktualisiert. Wenn dieses Verhalten fr andere Seiten der Site definiert ist, mssen Sie es auf jeder Seite einzeln aktualisieren.
Weitere Informationen finden Sie unter Erweiterungen in Dreamweaver hinzufgen und verwalten auf Seite 37.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 373
JavaScript-Verhalten hinzufgen
Wenn Sie beispielsweise eine Zurck-Schaltflche erstellen mchten, geben Sie Folgendes ein:
if (history.length > 0){history.back()}. Wenn Sie den Code in eine Funktion integriert haben, geben Sie
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 374
JavaScript-Verhalten hinzufgen
Feld den genauen Namen des Plug-Ins ein. Sie mssen fr das Plug-In genau den Namen verwenden, der in Netscape Navigator auf der Registerkarte ber PlugIns in Fettformatierung angegeben ist. (Whlen Sie unter Windows den Navigator-Befehl Hilfe > ber Plug-Ins und auf Macintosh-Systemen im Men Apple die Option ber Plug-Ins aus.)
3 Geben Sie im Feld Wenn gefunden, gehe zu URL eine URL fr Besucher an, die ber das Plug-In verfgen.
Wenn Sie eine Remote-URL eingeben, mssen Sie zustzlich zur Adresse auch das Prfix http:// angeben. Wenn Sie das Feld leer lassen, bleiben Besucher auf derselben Seite.
4 Geben Sie im Feld Sonst gehe zu URL eine alternative URL fr Besucher an, die nicht ber das Plug-In verfgen.
Wenn Sie das Feld leer lassen, bleiben Besucher auf derselben Seite.
5 Legen Sie fest, welche Seite angezeigt werden soll, wenn eine Plug-In-Erkennung nicht mglich ist. Wenn die Plug-
Ins nicht ermittelt werden knnen, werden Besucher in der Standardeinstellung zu der URL umgeleitet, die im Feld Sonst gehe zu URL angegeben ist. Wenn die Besucher stattdessen zu der ersten im Feld Wenn gefunden, gehe zu URL angegebenen URL umgeleitet werden sollen, aktivieren Sie die Option Immer zum ersten URL wechseln, wenn keine Erkennung mglich. Wenn diese Option aktiviert ist, wird davon ausgegangen, dass das Plug-In vorhanden ist, es sei denn, im Browser wird explizit angegeben, dass das Plug-In nicht vorhanden ist. Sie sollten diese Option in der Regel dann auswhlen, wenn der Inhalt des Plug-Ins integraler Bestandteil der Seite ist. Lassen Sie sie andernfalls deaktiviert. Hinweis: Diese Option gilt nur fr Internet Explorer. Netscape Navigator kann Plug-Ins immer ermitteln.
6 Klicken Sie auf OK und berprfen Sie, ob das Standardereignis korrekt ist.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 375
JavaScript-Verhalten hinzufgen
Das Verhalten AP-Element ziehen muss aufgerufen werden, bevor der Besucher das AP-Element ziehen kann. Es empfiehlt sich daher, AP-Element ziehen an das body-Objekt anzufgen (mit dem onLoad-Ereignis).
1 Whlen Sie Einfgen > Layoutobjekte > AP Div aus oder klicken Sie im Bedienfeld Einfgen auf die
Schaltflche AP Div zeichnen und zeichnen Sie dann in der Entwurfsansicht des Dokumentfensters ein AP-Div.
2 Klicken Sie im Tag-Selektor unten links im Dokumentfenster auf <body>. 3 Whlen Sie im Men Verhalten hinzufgen des Bedienfelds Verhalten die Option AP-Element ziehen aus.
Wenn AP-Element ziehen nicht verfgbar ist, ist wahrscheinlich ein AP-Element ausgewhlt.
4 Whlen Sie im Popupmen AP-Element das AP-Element aus. 5 Whlen Sie im Popupmen Bewegung entweder Beschrnkt oder Unbeschrnkt aus.
Eine unbeschrnkte Bewegung eignet sich fr Puzzles und andere Drag & Drop-Spiele. Whlen Sie fr Schieberegler und bewegliche Objekte wie Schubladen, Vorhnge und Jalousien eine beschrnkte Bewegung aus.
6 Wenn Sie eine beschrnkte Bewegung auswhlen, geben Sie Werte in den Feldern O, U, L und R ein (in
Pixel). Die Werte sind relativ zur Anfangsposition des AP-Elements. Wenn Sie die Bewegung auf einen rechteckigen Bereich beschrnken mchten, geben Sie in allen vier Feldern einen positiven Wert ein. Um nur eine vertikale Bewegung zuzulassen, geben Sie in den Feldern O und U einen positiven Wert und in den Feldern L und R den Wert 0 ein. Um nur eine horizontale Bewegung zuzulassen, geben Sie in den Feldern L und R einen positiven Wert und in den Feldern O und U den Wert 0 ein.
7 Geben Sie in den Feldern Links und Oben die Werte fr das Ablageziel ein (in Pixel).
Beim Ablageziel handelt es sich um die Stelle, an die der Besucher das AP-Element ziehen soll. Ein AP-Element befindet sich am Ablageziel, wenn seine linke und obere Koordinate mit den Werten in den Feldern Links und Oben bereinstimmt. Die Werte sind relativ zur oberen linken Ecke des Browserfensters. Klicken Sie auf Aktuelle Pos. abrufen, damit die aktuelle Position des AP-Elements automatisch in die Felder eingetragen wird.
8 Geben Sie im Feld Einrasten, falls innerhalb von einen Wert (in Pixel) ein, um festzulegen, wie nahe der Besucher
das AP-Element an das Ablageziel ziehen muss, damit das AP-Element am Ziel ausgerichtet wird. Wenn Sie hhere Werte eingeben, kann der Besucher das Ablageziel leichter finden.
9 Bei einfachen Puzzle- und Hintergrundbearbeitungen mssen keine weiteren Schritte ausgefhrt werden. Wenn
Sie auf die Registerkarte Erweitert klicken, knnen Sie den Ziehpunkt fr das AP-Element definieren, die Bewegung des AP-Elements beim Ziehen verfolgen und festlegen, dass eine Aktion ausgelst wird, wenn das APElement abgelegt wird.
10 Sie knnen festlegen, dass der Besucher auf einen bestimmten Bereich des AP-Elements klicken muss, damit das
AP-Element gezogen werden kann. Whlen Sie dazu im Men Ziehgriff die Option Bereich im Element aus und geben Sie die linke und obere Koordinate sowie die Breite und Hhe des Ziehpunkts in den entsprechenden Feldern ein. Diese Option ist ntzlich, wenn das Bild im AP-Element ein Element enthlt, das sich zum Ziehen eignet, beispielsweise eine Titelleiste oder der Griff einer Schublade. Legen Sie diese Option nicht fest, wenn Sie wnschen, dass ein Besucher auf eine beliebige Stelle im AP-Element klicken kann, um dieses Element zu ziehen.
11 Whlen Sie unter Beim Ziehen die gewnschten Optionen aus:
Aktivieren Sie Element nach vorn bringen, dann, wenn das AP-Element beim Ziehen an die erste Position
innerhalb der Stapelreihenfolge verschoben werden soll. Wenn Sie diese Option aktivieren, geben Sie im Popupmen an, ob das AP-Element im Vordergrund bleiben oder an seine ursprngliche Position in der Stapelreihenfolge zurckgesetzt werden soll.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 376
JavaScript-Verhalten hinzufgen
Geben Sie JavaScript-Code oder einen Funktionsnamen (z. B. monitorAPelement()) im Feld JavaScript
aufrufen ein, damit der Code oder die Funktion beim Ziehen des AP-Elements wiederholt ausgefhrt wird. Sie knnen beispielsweise eine Funktion schreiben, die die Koordinaten des AP-Elements verfolgt und in einem Textfeld Hinweise anzeigt, wie z. B. Sie kommen nher oder Sie sind weit vom Ablageziel entfernt.
12 Geben Sie JavaScript-Code oder einen Funktionsnamen (z. B. evaluateAPelementPos()) im zweiten Feld
JavaScript aufrufen ein, damit der Code oder die Funktion beim Ablegen des AP-Elements ausgefhrt wird. Aktivieren Sie Nur wenn eingerastet, wenn der JavaScript-Code nur ausgefhrt werden soll, wenn sich das APElement am Ablageziel befindet.
13 Klicken Sie auf OK und berprfen Sie, ob das Standardereignis korrekt ist.
Die Werte von MM_UPDOWN oder MM_LEFTRIGHT knnen nicht nur in einem Formularfeld angezeigt werden, sondern auch anderweitig verwendet werden. Sie knnen beispielsweise eine Funktion schreiben, die abhngig davon, wie nahe der Wert am Ablagebereich ist, eine entsprechende Meldung im Formularfeld anzeigt. Sie knnen zudem eine andere Funktion aufrufen, um je nach Wert ein AP-Element ein- oder auszublenden. Die Eigenschaft MM_SNAPPED enthlt ntzliche Informationen fr den Fall, dass eine Seite mehrere AP-Elemente enthlt, die sich alle am Ablageziel befinden mssen, bevor der Besucher zur nchsten Seite oder zur nchsten Aufgabe bergehen kann. Sie knnen beispielsweise eine Funktion schreiben, mit der gezhlt wird, wie viele AP-Elemente fr MM_SNAPPED den Wert true haben, und diese Funktion jedes Mal aufrufen, wenn ein AP-Element abgelegt wird. Wenn so viele AP-Elemente ausgerichtet sind, dass der angegebene Zhlwert erreicht ist, knnen Sie den Besucher auf die nchste Seite weiterleiten oder eine Meldung mit Glckwnschen einblenden.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 377
JavaScript-Verhalten hinzufgen
In der Liste ffnen in sind automatisch alle Frames im aktuellen Frameset sowie das Hauptfenster aufgefhrt. Wenn keine Frames vorhanden sind, ist nur das Hauptfenster aufgefhrt. Hinweis: Dieses Verhalten kann zu unerwarteten Ergebnissen fhren, wenn ein Frame den Titel top, blank, self oder parent hat. In Browsern werden diese Namen manchmal mit den Namen reservierter Ziele verwechselt.
3 Klicken Sie auf Durchsuchen, um ein zu ffnendes Dokument auszuwhlen, oder geben Sie im Feld URL den
Sie knnen Menelemente bearbeiten und neu anordnen, die aufzurufenden Dateien und das Fenster ndern, in
dem diese Dateien geffnet werden, indem Sie im Bedienfeld Verhalten auf ein vorhandenes SprungmenVerhalten doppelklicken.
Sie knnen die Elemente im Men wie in anderen Mens bearbeiten, indem Sie das Men auswhlen und im
Eigenschafteninspektor auf die Schaltflche Listenwerte klicken.
1 Erstellen Sie ein Sprungmen, falls noch keins in Ihrem Dokument vorhanden ist. 2 Markieren Sie das Objekt und whlen Sie im Men Verhalten hinzufgen des Bedienfelds Verhalten die Option
Sprungmen aus.
3 Nehmen Sie im Dialogfeld Sprungmen die gewnschten nderungen vor und klicken Sie dann auf OK.
Verwandte Themen
Sprungmens auf Seite 299 Dynamisches HTML-Formularmen einfgen oder ndern auf Seite 712
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 378
JavaScript-Verhalten hinzufgen
Hinweis: Wenn die Schaltflche Gehe zu mit einem Sprungmen verwendet wird, gelangt der Benutzer ausschlielich ber diese Schaltflche zu der URL des im Men ausgewhlten Eintrags. Wenn ein Benutzer im Sprungmen ein Menelement auswhlt, wird er nicht mehr automatisch auf eine andere Seite oder in einen anderen Frame umgeleitet.
1 Whlen Sie ein Objekt fr die Schaltflche Gehe zu (in der Regel ein Schaltflchenbild) und dann im Men
Verhalten hinzufgen des Bedienfelds Verhalten die Option Sprungmen Gehe zu aus.
2 Whlen Sie im Men Whlen Sie ein Sprungmen aus das Men aus, das durch die Schaltflche Gehe zu
Bildlaufleisten, Ziehpunkte zur Grennderung usw. fest. Weisen Sie dem Fenster einen Namen zu (ohne Leerzeichen oder Sonderzeichen), wenn Sie mit Hyperlinks darauf verweisen oder es mit JavaScript steuern mchten.
4 Klicken Sie auf OK und berprfen Sie, ob das Standardereignis korrekt ist.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 379
JavaScript-Verhalten hinzufgen
The URL for this page is {window.location}, and today is {new Date()}.
Hinweis: Die Darstellung der Warnmeldung wird im Browser gesteuert. Wenn Sie Optionen zur Darstellung festlegen mchten, knnen Sie das Verhalten Browserfenster ffnen verwenden.
1 Markieren Sie ein Objekt und whlen Sie im Men Verhalten hinzufgen des Bedienfelds Verhalten die Option
Popup-Meldung aus.
2 Geben Sie die Meldung im Feld Meldung ein. 3 Klicken Sie auf OK und berprfen Sie, ob das Standardereignis korrekt ist.
vorausladen hinzuzufgen.
4 Wiederholen Sie die Schritte 2 und 3 fr alle weiteren Bilder, die Sie auf der aktuellen Seite vorausladen mchten. 5 Wenn Sie ein Bild aus der Liste Bilder vorausladen entfernen mchten, whlen Sie es aus und klicken Sie auf die
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 380
JavaScript-Verhalten hinzufgen
Beispiel:
The URL for this page is {window.location}, and today is {new Date()}.
1 Markieren Sie ein Objekt und whlen Sie im Men Verhalten hinzufgen des Bedienfelds Verhalten die Option
Frames zu kopieren.
4 Geben Sie im Feld Neue HTML eine Meldung ein. 5 Klicken Sie auf OK und berprfen Sie, ob das Standardereignis korrekt ist.
Verwandte Themen
Frames und Framesets erstellen auf Seite 208
1 Markieren Sie ein Objekt und whlen Sie im Men Verhalten hinzufgen des Bedienfelds Verhalten den Befehl
Verwandte Themen
AP Div einfgen auf Seite 172
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 381
JavaScript-Verhalten hinzufgen
Hinweis: Wenn Sie das Verhalten Statusleistentext festlegen in Dreamweaver verwenden, ist nicht gewhrleistet, dass sich der Statusleistentext in einem Browser tatschlich ndert. Die nderung von Statusleistentext ist in einigen Browsern nur mglich, wenn Sie spezifische Anpassungen vornehmen. In Firefox mssen Sie beispielsweise eine Erweitert-Option ndern, die die nderung des Statusleistentexts durch JavaScript zulsst. Weitere Informationen finden Sie in der Dokumentation zu Ihrem Browser. Sie knnen in den Text alle gltigen Funktionsaufrufe, Eigenschaften, globalen Variablen oder andere Ausdrcke von JavaScript einbetten. Wenn Sie einen JavaScript-Ausdruck einbetten mchten, schlieen Sie ihn in geschweiften Klammern ({}) ein. Wenn Sie geschweifte Klammern anzeigen mchten, stellen Sie ihnen einen umgekehrten Schrgstrich (\{) voran. Beispiel:
The URL for this page is {window.location}, and today is {new Date()}.
1 Markieren Sie ein Objekt und whlen Sie im Men Verhalten hinzufgen des Bedienfelds Verhalten die Option
Whlen Sie eine mglichst kurze Meldung. Wenn die Meldung fr die Statusleiste zu lang ist, wird sie abgeschnitten.
3 Klicken Sie auf OK und berprfen Sie, ob das Standardereignis korrekt ist.
Wenn Sie in Dreamweaver aufgefordert werden, ein form-Tag hinzuzufgen, klicken Sie auf Ja.
2 Geben Sie im Eigenschafteninspektor einen Namen fr das Textfeld ein. Achten Sie darauf, dass der Name auf der
Seite nur einmal vorkommt (verwenden Sie nicht den gleichen Namen fr mehrere Elemente auf der gleichen Seite, selbst wenn sich diese Elemente in unterschiedlichen Formularen befinden).
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 382
JavaScript-Verhalten hinzufgen
Elemente ein-/ausblenden aus. Wenn Elemente ein-/ausblenden nicht verfgbar ist, ist wahrscheinlich ein AP-Element ausgewhlt. Da APElemente in keinem der beiden 4.0-Browser Ereignisse zulassen, mssen Sie ein anderes Objekt auswhlen, z. B. das <body>-Tag oder ein Hyperlink-Tag (<a>).
2 Whlen Sie in der Liste Elemente das gewnschte Element aus und klicken Sie auf Einblenden, Ausblenden
Popupmens formatieren
Dieses Verhalten ist ab Dreamweaver CS5 veraltet.
Popupmens ndern
Dieses Verhalten ist ab Dreamweaver CS5 veraltet.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 383
JavaScript-Verhalten hinzufgen
Hinweis: Da von diesem Verhalten nur das src-Attribut beinflusst wird, sollten Sie fr den Ersetzungsvorgang ein Bild mit denselben Abmessungen (Hhe und Breite) wie das Original verwenden. Andernfalls wird das ausgetauschte Bild verkleinert oder vergrert, damit es den Abmessungen des ursprnglichen Bilds entspricht. Mit dem Verhalten Bildaustausch wiederherstellen werden fr die letzte Gruppe ausgetauschter Bilder die vorherigen Quelldateien wiederhergestellt. Dieses Verhalten wird immer automatisch hinzugefgt, wenn Sie fr ein Objekt das Verhalten Bild austauschen definieren. Wenn unter Bild austauschen die Option Wiederherstellen aktiviert ist, mssen Sie dieses Verhalten normalerweise nicht manuell auswhlen.
1 Whlen Sie Einfgen > Bild aus oder klicken Sie im Bedienfeld Einfgen auf die Schaltflche Bild, um ein
Bild einzufgen.
2 Geben Sie im Eigenschafteninspektor im Textfeld ganz links einen Namen fr das Bild ein.
Bildern muss nicht zwingend ein Name zugewiesen werden. Sie werden automatisch benannt, wenn Sie das Verhalten fr ein Objekt definieren. Sie knnen die Bilder im Dialogfeld Bild austauschen jedoch einfacher identifizieren, wenn Sie zuvor alle Bilder benannt haben.
3 Wiederholen Sie die Schritte 1 und 2, um weitere Bilder einzufgen. 4 Markieren Sie ein Objekt (in der Regel das auszutauschende Bild) und whlen Sie im Men Verhalten hinzufgen
Verhalten Bild austauschen fr alle Bilder, die gleichzeitig gendert werden sollen. Andernfalls knnen nicht alle Bilder mit dem entsprechenden Verhalten Bildaustausch wiederherstellen wiederhergestellt werden.
8 Aktivieren Sie die Option Bilder vorausladen, damit die neuen Bilder beim Laden der Seite zwischengespeichert
werden. Damit werden die beim Herunterladen verursachten Verzgerungen verhindert, wenn die Bilder angezeigt werden sollen.
9 Klicken Sie auf OK und berprfen Sie, ob das Standardereignis korrekt ist.
Schaltflche Textfeld, um ein Textfeld einzufgen. Wiederholen Sie diesen Schritt, um weitere Textfelder einzufgen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 384
JavaScript-Verhalten hinzufgen
Um einzelne Felder zu berprfen, whrend der Benutzer das Formular ausfllt, whlen Sie ein Textfeld und dann
Fenster > Verhalten aus.
Um mehrere Felder zu berprfen, wenn der Benutzer das Formular sendet, klicken Sie im Tag-Selektor in der
linken unteren Ecke des Dokumentfensters auf das <form>-Tag. Whlen Sie dann Fenster > Verhalten aus.
4 Whlen Sie im Men Verhalten hinzufgen die Option Formular berprfen aus. 5 Fhren Sie einen der folgenden Schritte aus:
Whlen Sie beim berprfen einzelner Felder in der Liste Felder das gleiche Feld aus, das Sie im
Dokumentfenster ausgewhlt haben.
Wenn Sie mehrere Felder berprfen, whlen Sie in der Liste Felder ein Textfeld aus.
6 Aktivieren Sie die Option Erforderlich, wenn das Feld Daten enthalten muss. 7 Whlen Sie unter Akzeptieren eine der folgenden Optionen aus:
Alles berprft, ob das erforderliche Feld Daten enthlt. Es kann sich um beliebige Datentypen handeln. E-Mail-Adresse berprft, ob das Feld das Zeichen @ enthlt. Zahl berprft, ob das Feld nur Zahlenwerte enthlt. Zahl zwischen berprft, ob das Feld eine Zahl in einem bestimmten Bereich enthlt.
8 Wenn Sie mehrere Felder berprfen mchten, wiederholen Sie die Schritte 6 und 7 fr alle weiteren zu
berprfenden Felder.
9 Klicken Sie auf OK.
Falls Sie mehrere Felder berprfen, wenn der Benutzer das Formular sendet, wird das Ereignis onSubmit automatisch im Men Ereignisse angezeigt.
10 Wenn Sie einzelne Felder berprfen, stellen Sie sicher, dass als Standardereignis onBlur oder onChange festgelegt
ist. Whlen Sie andernfalls eines dieser Ereignisse aus. Beide Ereignisse lsen das Verhalten Formular berprfen aus, wenn der Benutzer den Mauszeiger vom Feld wegbewegt. Sie unterscheiden sich jedoch folgendermaen: onBlur tritt unabhngig davon auf, ob der Benutzer Text in das Feld eingegeben hat. Dagegen tritt onChange nur dann auf, wenn der Benutzer den Feldinhalt gendert hat. Bei erforderlichen Feldern sollte das Ereignis onBlur verwendet werden.
ENTWURF
Letzte Aktualisierung 19.3.2010
385
Anwendungsbergreifende Integration
Integration mit Photoshop, Flash und Fireworks
Photoshop, Fireworks und Flash sind leistungsstarke Webentwicklungs-Tools zum Erstellen und Verwalten von Grafiken und SWF-Dateien. Dreamweaver lsst sich nahtlos mit diesen Tools integrieren und vereinfacht so den Arbeitsablauf beim Webdesign. Hinweis: Es ist ferner eine Teilintegration mit einigen anderen Anwendungen gegeben. Beispielsweise knnen Sie eine InDesign-Datei in das XHTML-Format exportieren und in Dreamweaver weiterbearbeiten. Ein Tutorial zu diesem Arbeitsablauf finden Sie unter www.adobe.com/go/vid0202_de. Bilder und mit Adobe Flash erstellte Inhalte (SWF- und FLV-Dateien) knnen ganz einfach in ein DreamweaverDokument eingefgt werden. Auerdem knnen Sie Bilder oder SWF-Dateien nach dem Einfgen in ein Dreamweaver-Dokument im ursprnglichen Editor bearbeiten. Hinweis: Die Zusammenarbeit zwischen Dreamweaver und diesen Adobe-Anwendungen ist nur mglich, wenn diese Anwendungen auf Ihrem Computer installiert sind. Die Produktintegration erfolgt bei Fireworks und Flash durch die Roundtrip-Bearbeitung. Durch die RoundtripBearbeitung wird sichergestellt, dass Code-Aktualisierungen korrekt zwischen Dreamweaver und den anderen Anwendungen bertragen werden (um beispielsweise Rollover-Verhalten oder Hyperlinks zu anderen Dateien beizubehalten). Die Produktintegration von Dreamweaver basiert zudem auf Design Notes. Design Notes sind kleine Dateien, die es Dreamweaver ermglichen, das entsprechende Quelldokument einer exportierten Bild- oder SWF-Datei zu ermitteln. Wenn Sie Dateien aus Fireworks, Flash oder Photoshop direkt in eine mit Dreamweaver definierte Site exportieren, werden automatisch zusammen mit der webfhigen Datei (GIF, JPEG, PNG oder SWF) auch Design Notes mit Verweisen auf die ursprngliche PSD-Datei, PNG-Datei oder Flash-Authoringdatei (FLA) in die Site exportiert. Design Notes enthalten nicht nur Informationen ber Speicherorte, sondern auch weitere Einzelheiten zu exportierten Dateien. Wenn Sie beispielsweise eine Fireworks-Tabelle exportieren, schreibt Fireworks fr jede exportierte Bilddatei in der Tabelle eine Design Note. Falls die exportierte Datei Hotspots oder Rollovers enthlt, enthalten die Design Notes Informationen ber die zugehrigen Skripts. Whrend des Exportvorgangs wird in dem Ordner, in dem auch das exportierte Element gespeichert wird, der Ordner _notes erstellt. Dieser Ordner enthlt die Design Notes, die von Dreamweaver fr die Integration in Photoshop, Flash oder Fireworks bentigt werden.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 386
Mit anderen Anwendungen arbeiten
Hinweis: Wenn Sie mit Design Notes arbeiten mchten, mssen Sie sicherstellen, dass sie nicht fr Ihre DreamweaverSite deaktiviert sind. Design Notes sind standardmig aktiviert. Doch selbst wenn sie deaktiviert sind, erstellt Dreamweaver eine Design Note, wenn Sie eine Photoshop-Bilddatei einfgen. Auf diese Weise wird der Speicherort der PSD-Quelldatei gespeichert. Ein Tutorial zur Integration von Dreamweaver und Fireworks finden Sie unter www.adobe.com/go/vid0188_de. Ein Tutorial zur Integration von Dreamweaver und Photoshop finden Sie unter www.adobe.com/go/lrvid4043_dw_de.
Verwandte Themen
Design Notes auf Seite 110 Design Notes fr eine Site aktivieren und deaktivieren auf Seite 111 Tutorial zu Dreamweaver InDesign
Whlen Sie Einfgen > Bild aus. Klicken Sie in der Kategorie Allgemein des Bedienfelds Einfgen auf die Schaltflche Bild oder ziehen Sie die
Schaltflche in das Dokument.
2 Whlen Sie die gewnschte, aus Fireworks exportierte Datei und klicken Sie auf OK (Windows) bzw. ffnen
(Macintosh). Hinweis: Wenn sich die Fireworks-Datei nicht in der aktuellen Dreamweaver-Site befindet, werden Sie in einer Meldung gefragt, ob Sie die Datei in den Stammordner kopieren mchten. Klicken Sie auf Ja.
Verwandte Themen
Integration mit Photoshop, Flash und Fireworks auf Seite 385
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 387
Mit anderen Anwendungen arbeiten
Hinweis: Dabei wird vorausgesetzt, dass Fireworks als primrer externer Bildeditor fr PNG-Dateien festgelegt wurde. Fireworks wird oft auch als Standardeditor fr JPEG- und GIF-Dateien definiert. Fr diese Dateitypen knnen Sie allerdings auch Photoshop als Standardeditor festlegen. Wenn das Bild einer Fireworks-Tabelle angehrt, knnen Sie die gesamte Fireworks-Tabelle zur Bearbeitung ffnen, vorausgesetzt, der HTML-Code enthlt den Kommentar <!--fw table-->. Wurde die PNG-Quelldatei mit der Dreamweaver-Einstellung HTML und Bilder aus Fireworks in eine Dreamweaver-Site exportiert, wird der Fireworks-Tabellenkommentar automatisch in den HTML-Code eingefgt.
1 ffnen Sie in Dreamweaver den Eigenschafteninspektor (Fenster > Eigenschaften), falls er noch nicht geffnet ist. 2 Whlen Sie das Bild oder das Bildsegment aus, indem Sie darauf klicken.
Wenn Sie ein aus Fireworks exportiertes Bild auswhlen, erkennt der Eigenschafteninspektor die Auswahl als Fireworks-Bild oder -Tabelle und zeigt den Namen der PNG-Quelldatei an.
3 Fhren Sie einen der folgenden Schritte aus, um Fireworks fr die Bearbeitung zu starten:
Klicken Sie im Eigenschafteninspektor auf Bearbeiten. Halten Sie die Strg-Taste (Windows) bzw. die Befehlstaste (Macintosh) gedrckt und doppelklicken Sie auf das
ausgewhlte Bild.
Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste (Macintosh) auf das ausgewhlte
Bild und whlen Sie aus dem Kontextmen Mit Fireworks bearbeiten aus. Hinweis: Falls Fireworks die PNG-Quelldatei nicht finden kann, werden Sie aufgefordert, sie manuell zu suchen. Wenn Sie mit der Fireworks-Quelldatei arbeiten, werden die nderungen sowohl in der Quelldatei als auch in der exportierten Datei gespeichert. Andernfalls wird nur die exportierte Datei aktualisiert.
4 Bearbeiten Sie die PNG-Datei in Fireworks und klicken Sie auf Fertig.
Fireworks speichert die nderungen in der PNG-Datei und exportiert das aktualisierte Bild (oder HTML und Bilder). Sie kehren dann zu Dreamweaver zurck. Das aktualisierte Bild bzw. die aktualisierte Tabelle wird in Dreamweaver angezeigt. Ein Tutorial zur Integration von Dreamweaver und Fireworks finden Sie unter www.adobe.com/go/vid0188_de.
Verwandte Themen
Mit externen Bildeditoren arbeiten auf Seite 260 Tutorial zu Dreamweaver Fireworks
Whlen Sie Befehl > Bild optimieren aus. Klicken Sie im Eigenschafteninspektor auf die Schaltflche Bildeinstellungen bearbeiten.
2 Nehmen Sie im Dialogfeld Bildvorschau die gewnschten nderungen vor:
Um die Optimierungseinstellungen zu bearbeiten, klicken Sie auf die Registerkarte Optionen. Um Gre und Bereich des exportierten Bildes zu bearbeiten, klicken Sie auf die Registerkarte Datei.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 388
Mit anderen Anwendungen arbeiten
Verwandte Themen
Optionen des Dialogfelds Bildvorschau festlegen auf Seite 400
Klicken Sie im Eigenschafteninspektor auf Erstellen. Halten Sie die Strg-Taste (Windows) bzw. die Befehlstaste (Macintosh) gedrckt und doppelklicken Sie dann auf
den Bild-Platzhalter.
Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste (Macintosh) auf den BildPlatzhalter und whlen Sie anschlieend Bild in Fireworks erstellen.
4 Entwerfen Sie das Bild mit den gewnschten Fireworks-Optionen.
Fireworks erkennt folgende Bild-Platzhaltereinstellungen, die Sie mglicherweise bei der Arbeit mit dem BildPlatzhalter in Dreamweaver festgelegt haben: die Bildgre, die mit der Gre der Fireworks-Arbeitsflche in Beziehung steht, die Bild-ID, die in Fireworks als Standarddokumentname der erstellten Quelldatei und Exportdatei verwendet wird, sowie die Textausrichtung. Fireworks erkennt auerdem Hyperlinks und bestimmte Verhalten (z. B. Bild austauschen, Popupmen und Text definieren), die Sie dem Bild-Platzhalter beim Arbeiten in Dreamweaver hinzugefgt haben. Hinweis: Die Hyperlinks, die Sie einem Bild-Platzhalter hinzugefgt haben, sind in Fireworks zwar nicht sichtbar, werden aber trotzdem beibehalten. Wenn Sie in Fireworks einen Hotspot zeichnen und einen Hyperlink hinzufgen, wird der Hyperlink, den Sie dem Bild-Platzhalter in Dreamweaver hinzugefgt haben, nicht gelscht. Wenn Sie jedoch in Fireworks im neuen Bild ein Segment erstellen, wird der Hyperlink im Dreamweaver-Dokument beim Ersetzen des BildPlatzhalters gelscht. Die folgenden Einstellungen fr Bild-Platzhalter werden von Fireworks nicht erkannt: Bildausrichtung, Farbe, VAbstand und H-Abstand sowie Maps. Sie sind im Eigenschafteninspektor fr Bild-Platzhalter deaktiviert.
5 Wenn Sie fertig sind, klicken Sie auf Fertig, um die Speicheraufforderung anzuzeigen. 6 Whlen Sie im Feld Speichern in den Ordner aus, den Sie als lokalen Site-Ordner fr Dreamweaver definiert
haben. Wenn Sie den Bild-Platzhalter beim Einfgen in das Dreamweaver-Dokument benannt haben, trgt Fireworks diesen Namen in das Feld Dateiname ein. Sie knnen den Namen ndern.
7 Klicken Sie auf Speichern, um die PNG-Datei zu speichern.
Das Dialogfeld Exportieren wird eingeblendet. Mit diesem Dialogfeld knnen Sie das Bild als GIF- oder JPEG-Datei exportieren. Bei segmentierten Bildern werden Sie aufgefordert, sie als HTML- und Bilddatei zu exportieren.
8 Whlen Sie unter Speichern in den lokalen Site-Ordner von Dreamweaver aus.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 389
Mit anderen Anwendungen arbeiten
Im Feld Name wird automatisch der Name angezeigt, den Sie fr die PNG-Datei verwendet haben. Sie knnen den Namen ndern.
9 Whlen Sie im Bereich Dateityp den gewnschten Dateityp fr den Export aus, wie beispielsweise Nur Bilder
Die Datei wird gespeichert und Sie kehren zu Dreamweaver zurck. Der Bild-Platzhalter im Dreamweaver-Dokument wird durch die exportierte Datei oder Fireworks-Tabelle ersetzt.
Verwandte Themen
Mit externen Bildeditoren arbeiten auf Seite 260 Bilder einfgen auf Seite 250
Fireworks-Popupmens
Mit Fireworks knnen Sie schnell und einfach CSS-basierte Popupmens erstellen. Abgesehen davon, dass sich die mit Fireworks erstellten Popupmens einfach erweitern und schnell herunterladen lassen, bieten sie darber hinaus folgende Vorteile:
Die Menelemente knnen von Suchmaschinen indiziert werden. Die Menelemente knnen von Bildschirmlesegerten gelesen werden, sodass Ihre Seiten wesentlich zugnglicher sind. Der von Fireworks erzeugte Code ist mit Standards konform und kann berprft werden.
Sie knnen Fireworks-Popupmens mit Dreamweaver oder Fireworks, aber nicht mit beiden Programmen gleichzeitig bearbeiten. In Dreamweaver vorgenommene nderungen bleiben in Fireworks nicht erhalten.
Verwandte Themen
Fireworks-Popupmens in Dreamweaver bearbeiten auf Seite 389
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 390
Mit anderen Anwendungen arbeiten
Wenn Sie ein Popupmen in Fireworks MX 2004 oder frher erstellt haben, knnen Sie es in Dreamweaver im Dialogfeld Popupmen anzeigen bearbeiten, das ber das Bedienfeld Verhalten aufgerufen wird.
Verwandte Themen
Fireworks-Popupmens auf Seite 389
Verwandte Themen
Verhalten Popupmen anzeigen definieren auf Seite 382
und klicken Sie dann auf die Registerkarte Starten und bearbeiten (Windows) bzw. whlen Sie im Popupmen die Option Starten und bearbeiten (Macintosh).
2 Whlen Sie die Optionen, die gelten sollen, wenn Sie in externen Anwendungen platzierte Fireworks-Bilder
Design Note als Quelldatei des platzierten Bildes angegeben ist. nderungen werden an der PNG-Quelldatei und am zugehrigen platzierten Bild vorgenommen.
PNG-Quelldatei nie verwenden bewirkt, dass das platzierte Fireworks-Bild automatisch geffnet wird, unabhngig davon, ob eine PNG-Quelldatei vorhanden ist. nderungen werden nur am platzierten Bild vorgenommen. Beim Start fragen zeigt eine Meldung an, in der Sie gefragt werden, ob die PNG-Quelldatei geffnet werden soll. Sie
haben hier auch die Mglichkeit, globale Voreinstellungen zum ffnen und Bearbeiten festzulegen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 391
Mit anderen Anwendungen arbeiten
einfgen mchten.
2 Fhren Sie einen der folgenden Schritte aus:
Whlen Sie Einfgen > Grafikobjekte > Fireworks-HTML. Klicken Sie in der Kategorie Allgemein des Bedienfelds Einfgen auf die Schaltflche Bilder und whlen Sie
im Popupmen die Option Fireworks-HTML einfgen aus.
3 Klicken Sie auf Durchsuchen und whlen Sie eine Fireworks-HTML-Datei aus. 4 Wenn Sie die Datei nicht anderweitig verwenden mchten, aktivieren Sie die Option Datei nach Einfgen
lschen. Die Aktivierung dieser Option hat keine Auswirkungen auf die mit der HTML-Datei verknpfte PNGQuelldatei. Hinweis: Wenn sich die HTML-Datei auf einem Netzlaufwerk befindet, wird sie nicht in den Papierkorb verschoben, sondern endgltig gelscht.
5 Klicken Sie auf OK, um den HTML-Code mit allen zugehrigen Bildern, Segmenten und JavaScript-
Wenn Sie zur Eingabe eines Zielordners fr die exportierten Bilder aufgefordert werden, geben Sie den Dreamweaver-Site-Ordner an. Der Assistent exportiert die Bilder in den angegebenen Zielordner und kopiert den HTML-Code in die Zwischenablage.
3 Setzen Sie die Einfgemarke im Dreamweaver-Dokument an die Stelle, an der Sie den HTML-Code einfgen
mchten. Whlen Sie dann Bearbeiten > Fireworks-HTML einfgen aus. Der gesamte HTML- und JavaScript-Code, der zu den exportierten Fireworks-Dateien gehrt, wird in das Dreamweaver-Dokument kopiert und alle Hyperlinks zu Bildern werden aktualisiert.
Exportieren.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 392
Mit anderen Anwendungen arbeiten
5 Setzen Sie die Einfgemarke im Dreamweaver-Dokument an die Stelle, an der der exportierte HTML-Code
eingefgt werden soll. Whlen Sie dann Bearbeiten > Fireworks-HTML Einfgen. Der gesamte HTML- und JavaScript-Code, der zu den exportierten Fireworks-Dateien gehrt, wird in das Dreamweaver-Dokument kopiert und alle Hyperlinks zu Bildern werden aktualisiert.
ffnen.
5 Whlen Sie den Ordner aus, in dem Sie die aktualisierten Bilddateien ablegen mchten, und klicken Sie auf
Auswhlen (Windows) bzw. Whlen (Macintosh). Daraufhin aktualisiert Fireworks den HTML- und JavaScript-Code im Dreamweaver-Dokument. Auerdem exportiert Fireworks die zum HTML-Code gehrigen aktualisierten Bilder und platziert sie in den angegebenen Zielordner. Wenn Fireworks keinen passenden HTML-Code fr die Aktualisierung finden kann, haben Sie die Mglichkeit, neuen HTML-Code in das Dreamweaver-Dokument einzufgen. Der JavaScript-Abschnitt des neuen Codes wird am Dokumentanfang platziert, die HTML-Tabelle oder der Hyperlink zum Bild am Dokumentende.
Webfotoalben erstellen
Die Funktion Webfotoalbum erstellen ist ab Dreamweaver CS5 veraltet.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 393
Mit anderen Anwendungen arbeiten
Hinweis: Wenn Sie diese Integrationsfunktion hufig verwenden, empfiehlt es sich, die Photoshop-Dateien in der Dreamweaver-Site zu speichern, um leichter auf sie zugreifen zu knnen. In diesem Fall sollten Sie fr die entsprechenden Dateien unbedingt das Cloaking aktivieren, um die Bereitstellung der ursprnglichen Elemente sowie unntige bertragungen der Bilder zwischen der lokalen Site und dem Remote-Server zu vermeiden. Ein Tutorial zum Smart Objekt-Workflow in Photoshop und Dreamweaver finden Sie unter www.adobe.com/go/lrvid4043_dw_de.
Verwandte Themen
Cloaking fr bestimmte Dateitypen festlegen und aufheben auf Seite 109
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 394
Mit anderen Anwendungen arbeiten
Smart-Objekt
Wenn das Webbild (also das Bild auf der Dreamweaver-Seite) nicht mit der Photoshop-Originaldatei bereinstimmt, erkennt Dreamweaver, dass die Originaldatei aktualisiert wurde, und zeigt einen der Smart-Objekt-Symbolpfeile in Rot an. Wenn Sie in der Entwurfsansicht das Webbild auswhlen und im Eigenschafteninspektor auf die Schaltflche Von Original aktualisieren klicken, wird das Bild automatisch aktualisiert, um die von Ihnen an der PhotoshopOriginaldatei vorgenommenen nderungen zu reflektieren. Wenn Sie den Smart-Objekte-Workflow verwenden, brauchen Sie Photoshop zum Aktualisieren eines Webbilds nicht zu ffnen. Darber hinaus sind alle Aktualisierungen, die Sie an Smart-Objekten in Dreamweaver vornehmen, nicht destruktiv. Das bedeutet, dass Sie nderungen an der Webversion des Bilds auf Ihrer Seite vornehmen knnen und die Photoshop-Originaldatei hierbei intakt bleibt. Sie knnen ein Smart-Objekt auch aktualisieren, ohne das Webbild in der Entwurfsansicht auszuwhlen. ber das Elementebedienfeld lassen sich alle Smart-Objekte (auch Bilder, die sich im Dokumentfenster eventuell nicht auswhlen lassen, z. B. CSS-Hintergrundbilder) aktualisieren. Bildoptimierungseinstellungen Fr den Kopieren/Einfgen- und den Smart-Objekte-Workflow knnen Sie im Dialogfeld Bildvorschau Optimierungseinstellungen festlegen. In diesem Dialogfeld knnen Optionen wie Dateiformat, Bildqualitt usw. festgelegt werden. Wenn Sie ein Slice oder eine Ebene zum ersten Mal kopieren oder eine Photoshop-Datei zum ersten Mal als Smart-Objekt einfgen, zeigt Dreamweaver dieses Dialogfeld an, damit Sie das Webbild ganz leicht erstellen knnen. Wenn Sie eine Aktualisierung eines bestimmten Slice bzw. einer bestimmten Ebene kopieren und einfgen, wendet Dreamweaver die ursprnglichen Einstellungen an und erstellt das Webbild anhand dieser Einstellungen neu. Ebenso verwendet Dreamweaver bei der Aktualisierung eines Smart-Objekts ber den Eigenschafteninspektor dieselben Einstellungen, die Sie beim erstmaligen Einfgen des Bilds verwendet haben. Sie knnen die Einstellungen eines Bilds jederzeit ndern, indem Sie das Webbild in der Entwurfsansicht auswhlen und dann im Eigenschafteninspektor auf die Schaltflche Bildeinstellungen bearbeiten klicken.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 395
Mit anderen Anwendungen arbeiten
Speichern von Photoshop-Dateien Wenn Sie ein Webbild eingefgt haben und die Photoshop-Originaldatei nicht in Ihrer Dreamweaver-Site gespeichert haben, erkennt Dreamweaver den Pfad zur Originaldatei als absoluten lokalen Dateipfad. (Dies gilt sowohl fr den Kopieren/Einfgen- als auch fr den Smart-Objekte-Workflow.) Wenn beispielsweise der Pfad zu Ihrer Dreamweaver-Site C:\Sites\meineSite lautet und die Photoshop-Datei unter C:\Bilder\Photoshop abgespeichert ist, erkennt Dreamweaver die Originaldatei nicht als Teil der Site meineSite. Dies fhrt zu Problemen, wenn Sie die Photoshop-Datei fr andere Team-Mitglieder freigeben mchten, da Dreamweaver die Datei lediglich als auf einer bestimmten lokalen Festplatte verfgbar erkennt. Wenn Sie die Photoshop-Datei jedoch in Ihrer Site speichern, richtet Dreamweaver einen Site-relativen Pfad zur Datei ein. Alle Benutzer, die Zugriff auf die Site haben, knnen den richtigen Pfad zur Datei aufbauen, vorausgesetzt, Sie haben auch die Originaldatei fr sie zum Herunterladen bereitgestellt. Einen Videolehrgang zum Smart-Objekte-Workflow in Photoshop und Dreamweaver finden Sie unter www.adobe.com/go/lrvid4043_dw_de.
Sie knnen die PSD-Datei zudem aus dem Bedienfeld Dateien auf die Seite ziehen, wenn die Photoshop-Dateien in der Website gespeichert sind. In diesem Fall knnen Sie den nchsten Schritt berspringen.
3 Whlen Sie im Dialogfeld Bildquelle auswhlen die Photoshop-Bilddatei im PSD-Format aus, indem Sie auf die
Dreamweaver erstellt das Smart Objekt entsprechend den ausgewhlten Optimierungseinstellungen und fgt eine webfhige Version des Bilds auf der Seite ein. Mit dem Smart Objekt besteht eine Live-Verbindung zum ursprnglichen Bild und Sie werden informiert, wenn die beiden Bilder nicht mehr synchron sind. Hinweis: Wenn Sie zu einem spteren Zeitpunkt die Optimierungseinstellungen fr ein Bild in Ihren Seiten ndern mchten, whlen Sie das Bild aus und klicken Sie im Eigenschafteninspektor auf die Schaltflche Bildeinstellungen bearbeiten. Im Dialogfeld Bildvorschau knnen Sie dann die gewnschten nderungen an dem Bild vornehmen. nderungen im Dialogfeld Bildvorschau werden angewendet, ohne dass negative Auswirkungen auf die Originaldatei entstehen. Die ursprngliche Photoshop-Datei wird in Dreamweaver niemals gendert. Stattdessen wird das Webbild immer anhand der Originaldaten neu erstellt. Ein Video-Tutorial zur Verwendung von Photoshop-Smart Objekten finden Sie unter www.adobe.com/go/lrvid4043_dw_de.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 396
Mit anderen Anwendungen arbeiten
Verwandte Themen
Dreamweaver und Barrierefreiheit auf Seite 732 Optionen des Dialogfelds Bildvorschau festlegen auf Seite 400
das Smart Objekt im Dokumentfenster aus und klicken dann im Eigenschafteninspektor auf die Schaltflche Von Original aktualisieren. Hinweis: Fr diese Aktualisierung in Dreamweaver muss Photoshop nicht installiert sein.
in der oberen linken Ecke des Bilds das Smart Objekt-Symbol angezeigt. Bei normalen Bildern wird dieses Symbol nicht angezeigt.
4 Klicken Sie bei jedem Smart Objekt, das Sie aktualisieren mchten, mit der rechten Maustaste auf den
entsprechenden Dateinamen und whlen Sie Von Original aktualisieren aus. Sie knnen beim Klicken auch die Strg-Taste gedrckt halten, um mehrere Dateinamen auszuwhlen und die entsprechenden Bilder gleichzeitig zu aktualisieren. Hinweis: Fr diese Aktualisierung in Dreamweaver muss Photoshop nicht installiert sein.
die Gre des Bilds. Sie knnen das Verhltnis von Breite und Hhe beibehalten, indem Sie beim Ziehen die Umschalttaste gedrckt halten.
2 Klicken Sie im Eigenschafteninspektor auf die Schaltflche Von Original aktualisieren.
Beim Aktualisieren des Smart Objekts wird das Webbild entsprechend dem aktuellen Inhalt der ursprnglichen Datei und den ursprnglichen Optimierungseinstellungen ohne negative Auswirkungen auf das Originalbild mit der neuen Gre dargestellt.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 397
Mit anderen Anwendungen arbeiten
aktualisieren. Hinweis: Wenn Sie die Gre des Bilds in Photoshop gendert haben, mssen Sie die Gre des Webbilds in Dreamweaver zurcksetzen. Smart Objekte werden in Dreamweaver nur entsprechend den Inhalten der ursprnglichen Photoshop-Datei und nicht entsprechend ihrer Gre aktualisiert. Um die Gre eines Webbilds mit der Gre der ursprnglichen Photoshop-Datei zu synchronisieren, klicken Sie mit der rechten Maustaste auf das Bild und whlen Gre auf Original zurcksetzen aus.
Verwandte Themen
Bilder in Dreamweaver bearbeiten auf Seite 257 Mit externen Bildeditoren arbeiten auf Seite 260 Optionen des Dialogfelds Bildvorschau festlegen auf Seite 400
Smart Objekt-Statuswerte
In der folgenden Tabelle sind die verschiedenen Statuswerte von Smart Objekten aufgefhrt.
Smart Objekt-Status Bilder sind synchronisiert Beschreibung Das Webbild ist mit den aktuellen Inhalten der ursprnglichen Photoshop-Datei synchronisiert. Die Attribute fr Breite und Hhe im HTML-Code entsprechen den Abmessungen des Webbilds. Die ursprngliche Photoshop-Datei wurde nach dem Erstellen des Webbilds in Dreamweaver gendert. Empfohlene Aktion Keine
ber die Schaltflche Von Original aktualisieren im Eigenschafteninspektor knnen Sie die beiden Bilder synchronisieren.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 398
Mit anderen Anwendungen arbeiten
Smart Objekt-Status Abmessungen des Webbilds weichen von der ausgewhlten HTML-Breite und -Hhe ab
Beschreibung Die Attribute fr Breite und Hhe im HTML-Code unterscheiden sich von den Abmessungen fr Breite und Hhe des Webbilds, das in Dreamweaver beim Einfgen erstellt wurde. Wenn die Abmessungen des Webbilds kleiner sind als die ausgewhlten Werte fr die Breite und Hhe im HTML-Code, wird das Webbild mglicherweise verpixelt angezeigt.
Empfohlene Aktion ber die Schaltflche Von Original aktualisieren im Eigenschafteninspektor knnen Sie das Webbild aus der ursprnglichen Photoshop-Datei neu erstellen. Beim Neuerstellen des Bilds in Dreamweaver werden die aktuell festgelegten Abmessungen fr Breite und Hhe verwendet. Erstellen Sie keine Webbilder, deren Abmessungen grer sind als die Abmessungen der ursprnglichen Photoshop-Datei. Korrigieren Sie den Dateipfad im Textfeld Original des Eigenschafteninspektors oder verschieben Sie die Photoshop-Datei in den derzeit angegebenen Speicherort.
Abmessungen des Originalelements sind zu klein fr die ausgewhlte HTML-Breite und -Hhe Originalelement wurde nicht gefunden
Die Attribute fr Breite und Hhe im HTML-Code sind grer als die Abmessungen fr Breite und Hhe der ursprnglichen Photoshop-Datei. Das Webbild wird mglicherweise verpixelt dargestellt. Die im Textfeld Original des Eigenschafteninspektors angegebene ursprngliche Photoshop-Datei kann in Dreamweaver nicht gefunden werden.
Kopieren Sie eine einzelne Ebene ganz oder teilweise, indem Sie mithilfe des Auswahlrechteck-Werkzeugs den zu
kopierenden Bereich und dann Bearbeiten > Kopieren auswhlen. Auf diese Weise wird nur die aktive Ebene des ausgewhlten Bereichs in die Zwischenablage kopiert. Falls in dem Bild ebenenbasierte Effekte enthalten sind, werden diese nicht kopiert.
Kopieren und reduzieren Sie mehrere Ebenen, indem Sie mithilfe des Auswahlrechteck-Werkzeugs den zu
kopierenden Bereich und dann Bearbeiten > Auf eine Ebene reduziert kopieren auswhlen. Dadurch werden alle aktiven und niedrigeren Ebenen des ausgewhlen Bereichs auf eine Ebene reduziert und in die Zwischenablage kopiert. Falls mit manchen dieser Ebenen ebenenbasierte Effekte verknpft sind, werden diese ebenfalls kopiert.
Kopieren Sie ein Bildsegment, indem Sie mithilfe des Segmentauswahlwerkzeugs das entsprechende Segment und
dann Bearbeiten > Kopieren auswhlen. Dadurch werden alle aktiven und darunter liegenden Ebenen des Bildsegments auf eine Ebene reduziert und in die Zwischenablage kopiert. ber Auswhlen > Alles auswhlen knnen Sie schnell ein gesamtes Bild zum Kopieren auswhlen.
2 Setzen Sie die Einfgemarke in Dreamweaver (Entwurfs- oder Codeansicht) an die Stelle auf Ihrer Seite, an der das
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 399
Mit anderen Anwendungen arbeiten
Dreamweaver definiert das Bild gem Ihren Optimierungseinstellungen und platziert eine webfhige Version des Bildes in Ihrer Seite. Informationen zu dem Bild wie z. B. der Speicherort der ursprnglichen PSD-Quelldatei werden in einer Design Note gespeichert, unabhngig davon, ob Sie Design Notes fr Ihre Site aktiviert haben. Die Design Note ermglicht es Ihnen, aus Dreamweaver zu Ihrer ursprnglichen Photoshop-Datei zurckzukehren, um diese zu bearbeiten. Ein Tutorial zum Kopieren und Einfgen zwischen unterschiedlichen Anwendungen einschlielich Dreamweaver und Photoshop finden Sie unter www.adobe.com/go/vid0193_de.
Verwandte Themen
Integration mit Photoshop, Flash und Fireworks auf Seite 385 Optionen des Dialogfelds Bildvorschau festlegen auf Seite 400 Dreamweaver und Barrierefreiheit auf Seite 732 Tutorial zum anwendungsbergreifenden Kopieren/Einfgen
Klicken Sie im Eigenschafteninspektor des Bildes auf die Schaltflche Bearbeiten. Drcken Sie die Strg-Taste (Windows) bzw. die Befehlstaste (Macintosh) und doppelklicken Sie auf die Datei. Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste (Macintosh) auf ein Bild, whlen
Sie im Kontextmen die Option Original bearbeiten mit aus und klicken Sie dann auf Photoshop. Hinweis: Dabei wird vorausgesetzt, dass Photoshop als primrer externer Bildeditor fr PNG-Dateien festgelegt wurde. Sie sollten auch in Erwgung ziehen, Photoshop als Standardeditor fr JPEG-, GIF- und PNG-Dateien festzulegen.
2 Bearbeiten Sie die Datei in Photoshop. 3 Wechseln Sie wieder zu Dreamweaver und fgen Sie das aktualisierte Bild oder die aktualisierte Auswahl in die
Seite ein. Wenn Sie das Bild zu einem anderen Zeitpunkt erneut optimieren mchten, whlen Sie das Bild aus und klicken Sie im Eigenschafteninspektor auf die Schaltflche Bildeinstellungen bearbeiten.
Verwandte Themen
Bilder in Dreamweaver bearbeiten auf Seite 257 Mit externen Bildeditoren arbeiten auf Seite 260 Optionen des Dialogfelds Bildvorschau festlegen auf Seite 400
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 400
Mit anderen Anwendungen arbeiten
Hinweis: Die ausgewhlten Einstellungen wirken sich nur auf die exportierte Version der Bilddatei aus. Die ursprngliche Photoshop-Datei im PSD-Format oder Fireworks-Datei im PNG-Format wird hingegen nie gendert. Das Dialogfeld Bildvorschau besteht aus drei Abschnitten:
Auf der Registerkarte Optionen knnen Sie das zu verwendende Dateiformat definieren und Voreinstellungen
festlegen, beispielsweise die Farbe.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 401
Mit anderen Anwendungen arbeiten
Auf der Registerkarte Datei knnen Sie den Skalierungsfaktor und die Gre der Zieldatei des Bilds festlegen. Im Bedienfeld Vorschau wird eine Version des Bilds mit den aktuellen Einstellungen angezeigt.
Auf der Registerkarte Optionen stehen zahlreiche Optionen zur Verfgung, die sich je nach dem ausgewhlten Dateiformat unterscheiden. Im Popupmen Gespeicherte Einstellungen stehen mehrere Gruppen von GIF- und JPEG-Bildoptionen zur Auswahl. JPEG-Bildoptionen Sie knnen ein JPEG-Bild optimieren, indem Sie Komprimierungs- und Glttungsoptionen festlegen. Sie knnen seine Farbpalette nicht bearbeiten.
Qualitt Mit dem Schieberegler knnen Sie die Qualitt des Bildes verbessern oder reduzieren. Eine bessere Qualitt
enthalten sind.
Fr Dateigre optimieren Legt die Bildgre in KB fest. Bei 8-bpc-Bildern versucht der Assistent, die gewnschte
Dateigre durch Anpassung der Farbanzahl oder durch Rastern (Dithering) zu erzielen. GIF- und PNG-Bildoptionen Auf der Registerkarte Optionen knnen Sie einen Transparenzwert fr einzelne Farben in GIF- und PNG 8-Bildern festlegen, damit der Hintergrund der Webseite durch Bereiche mit solchen Farben hindurch sichtbar ist. Diesen Effekt knnen Sie durch Anpassen der Farbpalette auf der linken Seite der Registerkarte Optionen erzielen. PNG-Bilder im 32-bpc-Format (PNG 32) verfgen automatisch ber Tranzparenz, auch wenn im Bedienfeld Optimieren keine Transparenz-Option fr PNGs im 32-bpc-Format angezeigt wird.
Palette Ist standardmig auf Adaptiv gesetzt. Whlen Sie im Popupmen eine der gespeicherten
Farbpaletteneinstellungen aus, wenn Sie eine Gruppe vordefinierter Optionen verwenden mchten.
Verlust Ist standardmig auf 0 eingestellt. Kann nicht auf PNG-Bilder angewendet werden. Rastern Erzeugt in der aktuellen Farbpalette nicht enthaltene Farben durch Mischen hnlichfarbiger Pixel. Die
Funktion Rastern (Dithering) ist besonders beim Exportieren von Bildern mit komplexen Mischungen oder Farbverlufen bzw. beim Exportieren von Fotografien in ein 8-bpc-Grafikformat wie GIF ntzlich. Ist standardmig nicht ausgewhlt. Hinweis: Durch Rastern kann die Dateigre erheblich zunehmen.
Liste mit der Anzahl der Farben Ist standardmig auf 256 eingestellt. Die Anzahl der Farben ist vom aktuellen
Verhalten der Farbpalette abhngig. Die Palette Web 216 enthlt beispielsweise nur 216 Farben.
Farbpalette Die angezeigten Farben variieren je nach ausgewhltem Palettenverhalten und maximaler Farbanzahl.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 402
Mit anderen Anwendungen arbeiten
Palettenwerkzeuge Klicken Sie auf ein beliebiges Pixel in der Palette und dann auf diese Symbole, um eine Farbe zu ndern, hinzuzufgen oder zu lschen bzw. transparent oder websicher zu machen oder zu sperren. Transparenzfarbsymbole auswhlen Mit diesen Schaltflchen knnen Sie eine Palettenfarbe auswhlen, hinzufgen
oder entfernen. Wenn Sie die Option Transparenzfarbe auswhlen aktivieren, knnen Sie beispielsweise auf jedes Pixel in der Palette oder auf einen Farbpunkt im Bedienfeld Vorschau klicken. Die entsprechende Farbe wird dadurch transparent.
Transparenz-Popupmen Legt Index-, Alpha- oder keine Transparenz fest. Ein grau-weies Schachbrettmuster im Dokument zeigt eine Vorschau der transparenten Bereiche. Um anzuzeigen, wie sich die ausgewhlten Einstellungen auf das Bild auswirken, whlen Sie in der Bildvorschau die zwei- oder viergeteilte Ansicht aus und klicken dann auf ein anderes Bild als das Original.
Indextransparenz Verwenden Sie die Indextransparenz, wenn Sie GIF-Bilder exportieren, die transparente Bereiche enthalten. Mit Indextransparenz legen Sie fest, dass bestimmte Farben beim Exportieren transparent sind. Die Indextransparenz schaltet Pixel mit bestimmten Farbwerten ein oder aus. Alphatransparenz Verwenden Sie die Alphatransparenz, wenn Sie PNG-Bilder im 8-bpc-Format exportieren, die transparente Bereiche enthalten. Alphatransparenz gestattet abgestufte Transparenz und halbundurchsichtige Pixel.
Matt Legt den Hintergrund des Bilds fest. Sie knnen die Transparenz eines PNG-Bildes im 32-bpc-Format beibehalten, indem Sie auf das Transparenzsymbol im Dialogfeld Matt klicken. Matt dient auch dem Gltten von Objekten mit abgerundeten Konturen, die sich direkt ber der Arbeitsflche befinden: Dabei wird die Farbe dem Zielhintergrund angepasst. Nicht verwendete Farben entfernen Reduziert die Dateigre durch Entfernen von Farben, die im Bild nicht
enthalten sind.
Browseranzeige mit Zeilensprung Zeigt zunchst ein Bild mit Zeilensprung mit geringer Auflsung an. Whrend des
Downloads wird die Auflsung jedoch fortlaufend bis zum hchsten Wert gesteigert. Ist standardmig nicht ausgewhlt.
Fr Dateigre optimieren ermglicht die Angabe der Bildgre in Kilobyte. Bei 8-bpc-Bildern versucht der
Assistent, die gewnschte Dateigre durch Anpassung der Farbanzahl oder durch Rastern (Dithering) zu erzielen. Gespeicherte Einstellungen Dreamweaver bietet Ihnen mehrere umkomplizierte Optionseinstellungen. Je nach den ausgewhlten gespeicherten Einstellungen, knnen die oben beschriebenen dateityp-spezifischen Bildoptionen variieren.
GIF-Web 216 Macht alle Farben websicher. Die Farbpalette enthlt bis zu 216 Farben. GIF-WebSnap 256 Wandelt eine nicht websichere Farbe in die hnlichste websichere Farbe um. Die Farbpalette enthlt bis zu 256 Farben. GIF-WebSnap 128 Wandelt eine nicht websichere Farbe in die hnlichste websichere Farbe um. Die Farbpalette enthlt bis zu 128 Farben. GIF Adaptiv 256 Ist eine Farbpalette, die nur die in der Grafik tatschlich verwendeten Farben enthlt. Die Farbpalette
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 403
Mit anderen Anwendungen arbeiten
Optional: Optionen fr die Bildgre oder den Exportbereich auf der Registerkarte Datei ndern
1 Whlen Sie die Registerkarte Datei. 2 Verkleinern oder vergrern Sie das Bild, indem Sie eine der folgenden Aktionen ausfhren:
Geben Sie einen Skalierungsprozentsatz an. Geben Sie absolute Pixelwerte fr Breite oder Hhe ein.
3 Whlen Sie Beschrnken, um die ursprnglichen Proportionen des Bildes beizubehalten, whrend Sie es neu
skalieren.
4 ndern Sie die Form des platzierten Bildes, indem Sie die Option Bereich exportieren whlen und eine der
Ziehen Sie den gepunkteten Rahmen nach Bedarf um das Vorschaubild. Sie knnen das Bild innerhalb des
Rahmens ziehen, um versteckte Bereiche sichtbar zu machen.
Optional: Vorschau von Bildern im Bedienfeld Vorschau anzeigen und Bildparameter festlegen
1 Whlen Sie im Dialogfeld Bildvorschau die Option Vorschau aus, um das Bild mit den ausgewhlten
Einstellungen anzuzeigen. Wenn die Leistung beeintrchtigt ist, sollten Sie diese Option deaktivieren.
2
Whlen Sie im Popupmen Gespeicherte Einstellungen eine der gespeicherten Farbpaletteneinstellungen aus, wenn Sie eine Gruppe vordefinierter Optionen verwenden mchten. verschieben, um unterschiedliche Ausschnitte anzuzeigen.
3 Wenn das Bild grer als der Vorschaubereich ist, knnen Sie es mit dem Auswahlwerkzeug im Fenster 4 Mit dem Zuschneidewerkzeug knnen Sie das Bild verkleinern. Unter Umstnden mssen Sie zuerst auszoomen,
verkleinern. Sie knnen die Ansicht zudem durch Auswahl des Zoomwerkzeugs und Klicken vergrern oder durch Klicken bei gedrckter Alt-Taste (Windows) bzw. bei gedrckter Wahltaste (Macintosh) verkleinern.
6 Sie knnen zwei oder vier unterschiedliche Optimierungen in der Vorschau anzeigen, indem Sie unten im
Vorschaubedienfeld auf die zwei- bzw. viergeteilte Schaltflche klicken und unterschiedliche Farbpaletten fr jedes Feld auswhlen. Hinweis: Bei Photoshop-Bildern sind die Animationssteuerelemente im Dialogfeld Bildvorschau deaktiviert.
Klicken Sie auf den Platzhalter fr die SWF-Datei und anschlieend im Eigenschafteninspektor auf Bearbeiten.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 404
Mit anderen Anwendungen arbeiten
Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste (Mac OS) auf den Platzhalter fr
die SWF-Datei und whlen Sie aus dem Kontextmen die Option Bearbeiten mit Flash aus. Dreamweaver wechselt zu Flash und Flash versucht, die Flash-Authoringdatei (.FLA) fr die ausgewhlte SWF-Datei zu finden. Wenn Flash die Flash-Authoringdatei nicht finden kann, werden Sie aufgefordert, sie manuell zu suchen. Hinweis: Wenn die FLA- oder SWF-Datei gesperrt ist, checken Sie die Datei in Dreamweaver aus.
3 Bearbeiten Sie die FLA-Datei in Flash. Im Flash-Dokumentfenster wird angezeigt, dass Sie gerade eine Datei aus
Dreamweaver bearbeiten.
4 Klicken Sie auf Fertig, wenn Sie alle gewnschten nderungen vorgenommen haben.
Flash aktualisiert die FLA-Datei und exportiert sie dann erneut als SWF-Datei. Anschlieend wird Flash geschlossen und die Anwendung wechselt wieder zum Dreamweaver-Dokument zurck. Hinweis: Wenn Sie die SWF-Datei aktualisieren mchten und Flash geffnet bleiben soll, whlen Sie in Flash Datei > Aktualisieren fr Dreamweaver.
5 Sie knnen die aktualisierte Datei im Dokument anzeigen, indem Sie im Dreamweaver-Eigenschafteninspektor auf
Abspielen klicken. Wenn Sie eine Vorschau der Seite in einem Browserfenster anzeigen mchten, drcken Sie die Taste F12.
Suchen, Sortieren, Verarbeiten und Anzeigen einer Vorschau von Dateien, ohne die jeweilige Creative SuiteAnwendung zu ffnen. Auerdem knnen Sie Metadaten fr Dateien bearbeiten und ber Adobe Bridge Dateien in Ihren Dokumenten, Projekten und Kompositionen platzieren.
Importieren und Bearbeiten von Fotos auf der Speicherkarte einer Digitalkamera, Gruppieren von thematisch
zusammenhngenden Fotos in Stapeln sowie ffnen und Bearbeiten von Kamera-Rohdatendateien, ohne Photoshop zu starten
Verwandte Themen
Creative Suite 5 - Bridge
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 405
Mit anderen Anwendungen arbeiten
Whlen Sie Datei > Bridge durchsuchen. Klicken Sie in der Standardsymbolleiste auf die Schaltflche Bridge durchsuchen. Drcken Sie auf der Tastatur den Kurzbefehl fr Bridge durchsuchen: Strg+Alt+O (Windows) bzw.
Befehl+Wahl+O (Macintosh). Adobe Bridge wird im Modus File Browser geffnet und zeigt den Inhalt des zuletzt in Dreamweaver geffneten Ordners an. Wenn Adobe Bridge bereits geffnet war, wird es das aktive Fenster. Hinweis: Wenn Sie Adobe Bridge nicht installiert haben, wird eine Fehlermeldung angezeigt. Sie mssen die Anwendung zunchst installieren, um diese Funktionen nutzen zu knnen.
Wenn Sie ein webfhiges Bild (JPEG, GIF oder PNG) einfgen, dann fgt Dreamweaver die Bilddateien direkt in
Ihre Seite ein und speichert eine Kopie im Standardbildordner Ihrer Website.
Beim Einfgen einer Photoshop-Datei im PSD-Format mssen Sie zunchst die Optimierungseinstellungen der
Datei festlegen, damit die Datei in Dreamweaver in der Seite platziert werden kann.
Wenn Sie eine Nicht-Bild-Datei einfgen, beispielsweise eine MP3- oder PDF-Datei bzw. einen unbekannten
Dateityp, dann fgt Dreamweaver einen Hyperlink zur Quelldatei ein.
Wenn Sie eine HTML-Datei einfgen, dann fgt Dreamweaver einen Hyperlink zur Quelldatei ein. Nur in Windows: Wenn auf Ihrem Rechner Microsoft Office installiert ist und Sie eine Microsoft Word- oder
Excel-Datei einfgen, mssen Sie angeben, ob die Datei selbst oder ein Hyperlink zur Quelldatei eingefgt werden soll. Wenn Sie die Datei einfgen mchten, knnen Sie angeben, wie viel von der Formatierung der Datei erhalten bleiben soll.
Verwandte Themen
Smart Objekte erstellen auf Seite 395 Photoshop und Dreamweaver verwenden auf Seite 392
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 406
Mit anderen Anwendungen arbeiten
4 Wenn Sie unter Bearbeiten > Voreinstellungen > Eingabehilfen das Anzeigen der Attribute beim Einfgen
von Bildern aktiviert haben, wird das Dialogfeld Eingabehilfen-Attribute fr Image-Tag eingeblendet, wenn Sie webfhige Bilder (beispielsweise JPEG- oder GIF-Dateien) einfgen. Hinweis: Wenn sich die Einfgemarke in der Codeansicht befindet, wird Adobe Bridge wie gewhnlich gestartet, die Datei kann jedoch nicht platziert werden. Sie knnen Dateien nur in der Entwurfsansicht platzieren.
kopieren.
5 Wenn Sie in Bearbeiten > Voreinstellungen > Eingabehilfen das Anzeigen der Attribute beim Einfgen
aktiviert haben, wird das Dialogfeld Eingabehilfen-Attribute fr Image-Tag eingeblendet, wenn Sie webfhige Bilder (beispielsweise JPEG- oder GIF-Dateien) einfgen. Hinweis: Wenn sich die Einfgemarke in der Codeansicht befindet, wird Adobe Bridge wie gewhnlich gestartet, die Datei kann jedoch nicht platziert werden. Sie knnen Dateien nur in der Entwurfsansicht platzieren.
Whlen Sie Datei > ffnen mit > Adobe Dreamweaver. Klicken Sie mit der rechten Maustaste (drcken Sie Ctrl in Macintosh) und whlen Sie dann im Kontextmen
ffnen mit > Adobe Dreamweaver. Hinweis: Wenn Dreamweaver bereits gestartet wurde, wird das Programm durch diese Aktion aktiviert. Wenn Dreamweaver noch nicht geffnet ist, wird es von Adobe Bridge unter Umgehung des Begrungsbildschirms gestartet.
Verwandte Themen
Adobe Device Central-Hilfe
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 407
Mit anderen Anwendungen arbeiten
Vorschau auf mobile Inhalte mit Adobe Device Central und Dreamweaver
Verwenden Sie Device Central mit integrierter Small-Screen Rendering-Funktion von Opera, um eine Vorschau von mit Dreamweaver erstellten Seiten auf unterschiedlichen mobilen Gerten anzuzeigen. Auf unterschiedlichen Gerte sind unterschiedliche Browser installiert, die Vorschau vermittelt jedoch eine gute Vorstellung dessen, wie der Inhalt auf einem bestimmten Gert aussehen und funktionieren wird.
1 Starten Sie Dreamweaver. 2 ffnen Sie eine Datei. 3 Fhren Sie einen der folgenden Schritte aus:
Whlen Sie Datei > Vorschau im Browser > Device Central. Klicken Sie auf der Symbolleiste des Dokumentfensters auf die Schaltflche Vorschau/Debuggen im
Browser , halten Sie die Maustaste gedrckt und whlen Sie Vorschau in Device Central. Die Datei wird auf der Registerkarte Device Central Emulator angezeigt. Zum Fortfahren des Tests doppelklicken Sie in den Listen Gertegruppen oder Verfgbare Gerte auf den Namen eines anderen Gerts.
Wenn Sie Adobe Spry Framework fr die Inhaltsentwicklung verwenden, fgen Sie Ihren Seiten die folgende
HTML-Zeile hinzu, damit sie in Device Central CSS rendern und JavaScript ordnungsgem ausfhren knnen:
<link href="SpryAccordion.css" media="screen" rel="stylesheet" type="text/css"/> <link href="SpryAccordion2.css" media="handheld" rel="stylesheet" type="text/css"/>
Die Small Screen Rendering-Funktion von Opera untersttzt keine Frames, Popups, Unterstreichungen,
Durchstreichungen, berstreichungen, blinkenden Objekte oder Laufschrift. Vermeiden Sie diese Elemente nach Mglichkeit.
Halten Sie Websites fr mobile Gerte simpel. Verwenden Sie insbesondere ein Minimum an Schriftarten,
Schriftgren und Farben.
Verkleinern der Bildgre und Reduzieren der Anzahl erforderlicher Farben steigern die Chance, dass das Bild wie
gewnscht angezeigt wird. Verwenden Sie CSS oder HTML, um eine exakte Hhe und Breite fr jedes Bild festzulegen. Stellen Sie fr alle Bilder Alt-Text zur Verfgung. Hinweis: Die Website von Opera Software liefert weitere hilfreiche Informationen zur Optimierung von Websites fr mobile Gerte. Weitere Tipps und Techniken zum Erstellen von Inhalten fr Mobiltelefone und mobile Gerte finden Sie unter www.adobe.com/go/learn_cs_mobilewiki_de.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 408
Mit anderen Anwendungen arbeiten
klicken Sie dann auf Anmelden. Wenn Sie keine Adobe-ID mit zugehrigem Kennwort haben, klicken Sie oben im Dialogfeld auf den Link zum Erstellen einer kostenlosen Adobe-ID.
3 Wenn Sie den auf Ihrem Bildschirm angezeigten Inhalt prsentieren mchten, klicken Sie in der Mitte des
ConnectNow-Anwendungsfensters auf die Schaltflche Eigenen Bildschirm freigeben. Eine umfassende Anleitung zum Gebrauch von ConnectNow finden Sie unter http://help.adobe.com/de_DE/Acrobat.com/ConnectNow/index.html. Einen Videolehrgang ber die Verwendung von ConnectNow finden Sie hier: Using ConnectNow to share your screen (7:12). (Dieser Lehrgang wird in Dreamweaver prsentiert.)
AIR-Erweiterung fr Dreamweaver
Mit der Adobe AIR-Erweiterung fr Dreamweaver knnen Sie webbasierte Anwendungen in Desktopanwendungen umwandeln. Benutzer knnen die entsprechende Anwendung dann auf ihrem PC und in bestimmten Fllen auch ohne Internetverbindung ausfhren. Die Erweiterung kann ab Dreamweaver CS3 eingesetzt werden. Sie ist nicht mit Dreamweaver 8 kompatibel. Hinweis: Adobe InContext Editing wird von Adobe AIR nicht untersttzt. Wenn Sie mithilfe der AIR-Erweiterung fr Dreamweaver eine Anwendung exportieren, die InContext Editing-Bereiche enthlt, knnen die InContext EditingFunktionen nicht ausgefhrt werden.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 409
Mit anderen Anwendungen arbeiten
Dynamische Seiten wie Adobe ColdFusion- und PHP-Seiten knnen nicht in Adobe AIR ausgefhrt werden. Die Laufzeitumgebung ist nur mit HTML und JavaScript kompatibel. Sie knnen in Ihren Seiten jedoch JavaScript verwenden, um beliebige im Internet bereitgestellte Webdienste inklusive ColdFusion oder PHP-erzeugte Dienste mit Ajax-Methoden wie XMLHTTPRequest oder mit Adobe AIR-spezifischen APIs aufzurufen.
Systemanforderungen
Zum Verwenden der Adobe AIR-Erweiterung fr Dreamweaver muss die folgende Software installiert und korrekt konfiguriert sein:
Dreamweaver CS3 oder neuer Adobe Extension Manager CS3 oder neuer Java JRE 1.4 oder neuer (wird zum Erstellen der Adobe AIR-Datei bentigt) Die Java-JRE ist unter
http://java.sun.com/ verfgbar. Die genannten Anforderungen sind nur zum Erstellen und zur Vorschau von Adobe AIR-Anwendungen in Dreamweaver erforderlich. Um Adobe AIR-Anwendungen auf dem Desktop installieren und ausfhren zu knnen, mssen Sie auf dem Computer Adobe AIR installieren. Die Laufzeitumgebung knnen Sie unter www.adobe.com/go/air_de herunterladen.
http://www.adobe.com/products/air/tools/ajax/.
2 Doppelklicken Sie im Windows-Explorer (Windows) bzw. im Finder (Macintosh) auf die Datei mit der
Erweiterung .mxp.
3 Befolgen Sie die Anweisungen auf dem Bildschirm, um die Erweiterung zu installieren. 4 Starten Sie anschlieend Dreamweaver neu.
Weitere Informationen zum Einsatz der Adobe AIR-Erweiterung fr Dreamweaver finden Sie im Abschnitt zum Verwenden der Adobe AIR-Erweiterung fr Dreamweaver.
Datei erstellen. Weitere Informationen finden Sie bei den nachstehend aufgefhrten Dialogfeldoptionen. Wenn Sie zum ersten Mal eine Adobe AIR-Datei erstellen, wird im entsprechenden Stammordner der Site die Datei application.xml angelegt. Diese Datei dient als Manifestdatei, in der verschiedene Eigenschaften der Anwendung festgelegt sind.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 410
Mit anderen Anwendungen arbeiten
Im Folgenden werden die Optionen des Dialogfelds AIR-Anwendungs- und Installationseinstellungen beschrieben:
Dateiname der Anwendung Dies ist der Dateiname der Programmdatei der Anwendung. In der
Standardeinstellung wird als Dateiname der Name der Dreamweaver-Site verwendet. Sie knnen den Namen bei Bedarf ndern. Er darf jedoch nur aus Zeichen bestehen, die fr Datei- und Ordnernamen zulssig sind. (Das heit, er darf nur Zeichen des ASCII-Zeichensatzes enthalten und darf nicht mit einem Punkt enden.) Diese Einstellung ist erforderlich.
Name der Anwendung Dies ist der Name, der beim Installieren der Anwendung in den Installationsdialogfeldern angezeigt wird. Auch hier wird standardmig der Name der Dreamweaver-Site vorgegeben. Fr diesen Wert gibt es keine Einschrnkungen hinsichtlich des Zeichensatzes und seine Angabe ist nicht zwingend erforderlich. ID der Anwendung Kennzeichnet die Anwendung mit einer eindeutigen ID. Sie knnen die Standard-ID bei
Bedarf ndern. Verwenden Sie in der ID keine Leerzeichen oder Sonderzeichen. Die einzig gltigen Zeichen sind 0 bis 9, a bis z, A bis Z, . (Punkt) und - (Bindestrich). Diese Einstellung ist erforderlich.
Version Legt fr die Anwendung eine Versionsnummer fest. Diese Einstellung ist erforderlich. Anfangsinhalt Legt die Startseite der Anwendung fest. Klicken Sie auf die Schaltflche Durchsuchen, um zur
gewnschten Startseite zu wechseln und sie auszuwhlen. Die ausgewhlte Datei muss sich innerhalb des Stammordners der Site befinden. Diese Einstellung ist erforderlich.
Beschreibung Hier knnen Sie eine Beschreibung der Anwendung angeben, die beim Installieren der Anwendung angezeigt wird. Copyright Hier knnen Sie einen Urheberrechtsvermerk eintragen, der im Info-Bereich von auf dem Macintosh
installierten AIR-Anwendungen angezeigt wird. Bei unter Windows installierten Anwendungen werden diese Informationen nicht verwendet.
Fensterstil Legt den zu verwendenden Fensterstil (sogenanntes Chrome) fest, wenn der Benutzer die
Anwendung auf seinem Computer ausfhrt. Mit dem System-Fensterstil wird die Anwendung mit dem Standardwert fr Fensterstile des entsprechenden Betriebssystems dargestellt. Mit dem benutzerdefinierten undurchsichtigen Fensterstil wird der System-Standardfensterstil entfernt und Sie knnen fr die Anwendung einen eigenen Fensterstil erstellen. (Den benutzerdefinierten Fensterstil erstellen Sie direkt im HTMLSeitenpaket.) Der benutzerdefinierte transparente Fensterstil entspricht dem undurchsichtigen Fensterstil, fgt an den Seitenrndern jedoch Tranzparenzeigenschaften hinzu. Dies ermglicht Anwendungsfenster, die eine andere als die Rechteckform haben.
Fenstergre Gibt die Abmessungen des Anwendungsfensters beim ffnen an. Symbol Hier knnen Sie benutzerdefinierte Bilder als Anwendungssymbole auswhlen. (Als Standardbilder
werden die mit der Adobe AIR-Erweiterung gelieferten Bilder verwendet.) Klicken Sie zum Verwenden benutzerdefinierter Bilder auf die Schaltflche Symbolbilder auswhlen. Klicken Sie im daraufhin angezeigten Dialogfeld Symbolbilder fr jede Symbolgre auf das entsprechende Ordnersymbol und whlen Sie die gewnschte Symboldatei aus. In AIR werden als Dateien fr Anwendungssymbolbilder nur PNG-Dateien untersttzt. Hinweis: Ausgewhlte benutzerdefinierte Bilder mssen sich auf der Anwendungswebsite befinden und mit einem relativen Pfad zum Stammordner der Website angegeben werden.
Verknpfte Dateitypen Hier knnen Sie einer Anwendung bestimmte Dateitypen zuordnen. Weitere
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 411
Mit anderen Anwendungen arbeiten
Anwendungsinstallationsprogramm durchgefhrt. Wenn die Anwendung gegebenenfalls notwendige Aktualisierungen selbst durchfhren soll, deaktivieren Sie dieses Kontrollkstchen. Beachten Sie hierbei jedoch, dass Sie dann eine Anwendung programmieren mssen, die Aktualisierungen durchfhren kann.
Enthaltene Dateien Gibt an, welche Dateien und Ordner in die Anwendung aufgenommen werden sollen. Sie knnen HTML- und CSS-Dateien, Bilddateien und JavaScript-Bibliotheksdateien hinzufgen. Klicken Sie auf die Schaltflche mit dem Plussymbol (+), um Dateien hinzuzufgen, und auf die Schaltflche mit dem Ordnersymbol, um Ordner hinzuzufgen. Bestimmte Dateien wie _mmServerScripts, _notes usw. sollten nicht hinzugefgt werden. Um eine Datei oder einen Ordner aus der Liste zu lschen, whlen Sie die Datei oder den Ordner aus und klicken Sie auf die Schaltflche mit dem Minussymbol (-). Digitale Signatur Klicken Sie auf Festlegen, um die Anwendung mit einer digitalen Signatur zu versehen. Diese
standardmige Speicherort ist der Stammordner der Website. Klicken Sie auf die Schaltflche Durchsuchen, um einen anderen Speicherort auszuwhlen. Der Standarddateiname ist der Name der Site, ergnzt um die .airDateierweiterung. Diese Einstellung ist erforderlich. Es folgt ein Beispiel fr dieses Dialogfeld mit einigen einfachen Einstellungen:
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 412
Mit anderen Anwendungen arbeiten
Wenn Sie eine Anwendung mit einem vorab erworbenen digitalen Zertifikat signieren mchten, klicken Sie auf
die Schaltflche Durchsuchen, whlen Sie das Zertifikat aus, geben Sie das entsprechende Kennwort ein und klicken Sie auf OK.
Wenn Sie ein eigenes, selbst signiertes digitales Zertifikat erstellen mchten, klicken Sie auf Erstellen und
geben Sie im Dialogfeld die erforderlichen Informationen ein. Die Option fr den Zertifikatstyp bezieht sich auf die Sicherheitsstufe: 1024-RSA verwendet einen 1024-Bit-Schlssel (geringere Sicherheit), whrend 2048-RSA einen 2048-Bit-Schlssel (hhere Sicherheit) verwendet. Klicken Sie abschlieend auf OK. Geben Sie im Dialogfeld Digitale Signatur das entsprechende Kennwort ein und klicken Sie auf OK.
Whlen Sie die Option AIRI-Paket vorbereiten, das spter signiert wird aus und klicken Sie auf OK. Mit
dieser Option knnen Sie eine AIRI-Anwendung (AIR Intermediate) ohne digitale Signatur erstellen. Benutzer knnen die Anwendung jedoch erst installieren, wenn Sie eine digitale Signatur hinzufgen.
Informationen zu Zeitstempeln
Wenn Sie eine Adobe AIR-Anwendung mit einem digitalen Zertifikat signieren, ruft das Pakettool vom Server vertrauenswrdige Zeitstempelinformationen ab, um unabhngig verifizierbare Angaben fr Datum und Uhrzeit beim Signieren zu erhalten. Der empfangene Zeitstempel wird in die AIR-Datei integriert. Solange das Signierungszertifikat zum Zeitpunkt der Signatur gltig war, kann die AIR-Anwendung spter auch dann installiert werden, wenn das Zertifikat inzwischen abgelaufen ist. Wenn jedoch kein Zeitstempel abgerufen werden konnte, kann die AIR-Datei nicht mehr installiert werden, falls das Zertifikat abluft oder zurckgezogen wird. In der Standardeinstellung wird von der AIR-Erweiterung fr Dreamweaver beim Erstellen der Adobe AIRAnwendung ein Zeitstempel abgerufen. Sie knnen dies jedoch deaktivieren, indem Sie im Dialogfeld Digitale Signatur die Option Zeitstempel deaktivieren. (Gegebenenfalls ist dies notwendig, wenn kein Zeitstempel-Dienst verfgbar ist.) Adobe empfiehlt, dass alle ffentlich zugnglich gemachten AIR-Dateien einen Zeitstempel enthalten. Die vom AIR-Pakettool standardmig verwendete Zeitstempel-Vertrauensstelle ist Geotrust. Weitere Informationen zu Zeitstempeln und digitalen Zertifikaten finden Sie unter AIR-Dateien digital signieren.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 413
Mit anderen Anwendungen arbeiten
2 Fhren Sie im Dialogfeld Verknpfte Dateitypen einen der folgenden Schritte aus:
Whlen Sie einen Dateityp aus und klicken Sie auf die Schaltflche mit dem Minussymbol (-), um den Dateityp
zu entfernen.
Klicken Sie auf die Schaltflche mit dem Plussymbol (+), um einen Dateityp hinzuzufgen.
Wenn Sie auf das Plussymbol klicken, um einen Dateityp hinzuzufgen, wird das Dialogfeld Dateitypeinstellungen angezeigt. Tragen Sie im Dialogfeld die gewnschten Angaben ein und klicken Sie zum Schlieen auf OK. Es folgt eine Liste der Dialogfeldoptionen:
Name Gibt den Namen des Dateityps an, der in der Liste der verknpften Dateitypen angezeigt wird. Die Angabe dieses Werts ist zwingend erforderlich. Der Name darf nur Buchstaben und Ziffern des ASCIIZeichensatzes (a-z, A-Z, 0-9) und Punkte (.) enthalten (Beispiel: adobe.VideoFile). Das erste Zeichen des Namens muss ein Buchstabe sein. Die maximal zulssige Lnge betrgt 38 Zeichen. Erweiterung Gibt die Erweiterung des Dateityps an. Tragen Sie diesen Wert ohne fhrenden Punkt ein. Die Angabe dieses Werts ist zwingend erforderlich. Die Erweiterung darf nur Buchstaben und Ziffern des ASCIIZeichensatzes (a-z, A-Z, 0-9) enthalten. Die maximal zulssige Lnge betrgt 38 Zeichen. Beschreibung Hier knnen Sie optional eine Beschreibung des Dateityps eingeben. Inhaltstyp Gibt den MIME-Typ oder den Medientyp der Datei an (z. B. text/html, image/gif usw.). Speicherorte fr Symboldateien Hier knnen Sie fr den verknpften Dateityp benutzerdefinierte Bilder auswhlen. (Als Standardbilder werden die mit der Adobe AIR-Erweiterung gelieferten Bilder verwendet.)
Option Vorschau in AIR aus. Sie knnen auch Strg+Umschalt+F12 (Windows) oder Befehl+Umschalt+F12 (Macintosh) drcken.
ffnen Sie eine HTML- oder JavaScript-Datei in der Codeansicht und geben Sie Adobe AIR-Programmcode ein.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 414
Mit anderen Anwendungen arbeiten
Hinweis: Das Anzeigen von Codehinweisen funktioniert nur innerhalb von <script>-Tags oder in .js-Dateien. Weitere Informationen zu den Adobe AIR-Sprachelementen finden Sie in der Entwicklerdokumentation im folgenden Bereich dieser Anleitung.
ENTWURF
Letzte Aktualisierung 19.3.2010
415
Dreamweaver-Vorlagen
Grundlegendes zu Dreamweaver-Vorlagen
Eine Vorlage ist ein spezieller Dokumenttyp fr die Erstellung eines festen Seitenlayouts. Sie knnen dann auf dieser Vorlage basierende Dokumente erstellen, wobei das Layout der Vorlage bernommen wird. Bei der Erstellung einer Vorlage legen Sie bearbeitbare Inhalte fest, d. h. Inhalte, die die Benutzer in einem auf der Vorlage basierenden Dokument bearbeiten knnen. Mithilfe von Vorlagen kann der Autor einer Vorlage festlegen, welche Seitenelemente von Benutzern der Vorlage, beispielsweise von Programmierern, Grafikern und anderen Webentwicklern, bearbeitet werden knnen. Es gibt mehrere Arten von Vorlagenbereichen, die der Autor der Vorlage in ein Dokument aufnehmen kann. Hinweis: Mithilfe von Vorlagen knnen Sie einen groen Designbereich kontrollieren und komplette Layouts wieder verwenden. Wenn Sie individuelle Designelemente, wie Copyright-Informationen einer Website oder ein Logo, wieder verwenden mchten, erstellen Sie Bibliothekselemente. Die Verwendung von Vorlagen ermglicht die Aktualisierung mehrerer Seiten in einem Arbeitsgang. Ein Dokument, das auf der Basis einer Vorlage erstellt wurde, bleibt mit dieser Vorlage verknpft (es sei denn, Sie lsen die Verbindung). Sie knnen eine Vorlage ndern und sofort das Design aller Dokumente aktualisieren, die auf dieser Vorlage basieren. Hinweis: Vorlagen in Dreamweaver unterscheiden sich von Vorlagen in einigen anderen Produkten der Adobe Creative Suite insofern, dass Seitenbereiche von Dreamweaver-Vorlagen standardmig festgelegt sind (d. h. nicht bearbeitbar sind).
Verwandte Themen
Elemente und Bibliotheken verwalten auf Seite 118 Dreamweaver-Vorlagen erstellen auf Seite 423
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 416
Vorlagen erstellen und verwalten
den Benutzern der Vorlage bearbeitet werden kann. Der Autor der Vorlage kann jeden beliebigen Bereich der Vorlage als bearbeitbaren Bereich definieren. Vorlagen sollten mindestens einen bearbeitbaren Bereich enthalten, um von Nutzen zu sein; andernfalls knnen die Seiten, die auf der Vorlage basieren, nicht bearbeitet werden.
Ein sich wiederholender Bereich ist ein Bereich des Dokumentlayouts, der so eingestellt ist, dass die Vorlagenbenutzer
in einem auf der Vorlage basierenden Dokument Kopien des wiederholenden Bereichs einfgen und lschen knnen. Sie knnen beispielsweise eine Tabellenzeile als wiederholenden Bereich einstellen. Wiederholende Bereiche sind bearbeitbar, sodass die Vorlagenbenutzer den Inhalt im wiederholenden Element bearbeiten knnen, whrend das Design selbst vom Autor der Vorlage festgelegt ist. Sie knnen in eine Vorlage zwei Arten wiederholender Bereiche einfgen, und zwar Wiederholender Bereich und Wiederholende Tabelle.
Ein optionaler Bereich ist ein Bereich in einer Vorlage mit Inhalten etwa Texte oder Bilder , die im Dokument angezeigt oder nicht angezeigt werden knnen. Auf einer Seite, die auf einer Vorlage basiert, legt normalerweise der Benutzer der Vorlage fest, ob der Inhalt angezeigt wird. Ein bearbeitbares Tag-Attribut ermglicht die Freigabe eines Tag-Attributs in einer Vorlage, sodass das Attribut in einer Seite, die auf der Vorlage basiert, bearbeitet werden kann. Sie knnen beispielsweise festlegen, welches Bild im Dokument angezeigt wird, und gleichzeitig die Wahl der Ausrichtung (linksbndig, rechtsbndig oder zentriert) dem Benutzer der Vorlage berlassen.
Verwandte Themen
Inhalte in vorlagenbasierten Dokumenten bearbeiten auf Seite 445 Bearbeitbare Bereiche erstellen auf Seite 427 Wiederholende Bereiche erstellen auf Seite 429 Optionale Bereiche verwenden auf Seite 431 Bearbeitbare Tag-Attribute definieren auf Seite 434
Hyperlinks in Vorlagen
Wenn Sie eine Vorlagendatei erstellen, indem Sie eine vorhandene Seite als Vorlage speichern, werden die neue Vorlage im Vorlagenordner sowie vorhandene Hyperlinks in der Datei aktualisiert, sodass ihre dokumentrelativen Pfade stimmen. Wenn Sie spter ein Dokument erstellen, das auf der Vorlage basiert, und das neue Dokument speichern, werden alle dokumentrelativen Hyperlinks wiederum aktualisiert, sodass sie sich weiterhin auf die korrekten Dateien beziehen. Wenn Sie allerdings in eine Vorlagendatei einen neuen dokumentrelativen Hyperlink einfgen und den Pfad im Eigenschafteninspektor in das Hyperlinktextfeld eingeben, knnen sich durch Schreibfehler leicht fehlerhafte Pfadangaben ergeben. Der korrekte Pfad in einer Vorlagendatei ist der Pfad vom Vorlagenordner zum verknpften Dokument und nicht der Pfad vom Ordner des auf der Vorlage basierenden Dokuments zum verknpften Dokument. Sie knnen sicherstellen, dass fr Hyperlinks in Vorlagen die korrekten Pfade verwendet werden, indem Sie beim Erstellen der Hyperlinks entweder das Ordnersymbol oder das Dateizeigersymbol im Eigenschafteninspektor verwenden.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 417
Vorlagen erstellen und verwalten
Voreinstellung fr Hyperlinkaktualisierungen in Dreamweaver 8.01 Vor Dreamweaver 8 (also in Dreamweaver MX 2004 und in frheren Versionen) hat Dreamweaver Hyperlinks zu Dateien im Vorlagenordner nicht aktualisiert. (Wenn sich im Vorlagenordner z. B. eine Datei mit dem Namen main.css befindet und die Vorlagendatei den Hyperlink href="main.css" enthlt, wird dieser Hyperlink beim Erstellen einer auf einer Vorlage basierenden Seite in Dreamweaver nicht aktualisiert.) Manche Benutzer haben die Art und Weise, wie Dreamweaver Hyperlinks zu Dateien im Vorlagenordner behandelte, zu ihrem Vorteil genutzt, denn sie verwendeten diese Inkonsistenz absichtlich dazu, Hyperlinks zu erstellen, die nicht aktualisiert werden sollten. Angenommen, Sie arbeiten mit Dreamweaver MX 2004 und haben eine Site mit unterschiedlichen Ordnern fr verschiedene Anwendungen Dreamweaver Flash und Photoshop. Jeder Produktordner enthlt eine vorlagenbasierte index.html-Seite und, auf derselben Ebene, eine eigene Version der Datei main.css. Wenn die Vorlagendatei den dokumentbezogenen Hyperlink href="main.css" (Hyperlink zu einer Version der Datei main.css im Vorlagenordner) enthlt und Sie festlegen mchten, dass Ihre vorlagenbasierten index.htmlSeiten diesen Hyperlink ebenfalls genau wie angegeben enthalten, knnen Sie die vorlagenbasierten index.html-Seiten erstellen, ohne dass diese Hyperlinks in Dreamweaver aktualisiert werden. Wenn Dreamweaver MX 2004 die vorlagenbasierten index.html-Seiten erstellt, verweisen die (nicht aktualisierten) href="main.css"-Hyperlinks auf die main.css-Dateien, die sich in den Dreamweaver-, Flash- und Photoshop-Ordnern befinden, und nicht auf die main.css-Datei im Vorlagenordner. In Dreamweaver 8 jedoch ist dieses Verhalten gendert worden, sodass beim Erstellen von Seiten, die auf Vorlagen basieren, alle dokumentrelativen Hyperlinks aktualisiert werden, und zwar ungeachtet des offensichtlichen Speicherorts der verknpften Dateien. In diesem Szenario untersucht Dreamweaver den Hyperlink in der Vorlagendatei (href="main.css") und erstellt einen Hyperlink in der vorlagenbasierten Seite, der relativ zum Speicherort des neuen Dokuments ist. Wenn Sie beispielsweise ein vorlagenbasiertes Dokument eine Ebene ber dem Vorlagenordner erstellen, schreibt Dreamweaver den Hyperlink im neuen Dokument in der Form href="Templates/main.css". Diese Aktualisierung in Dreamweaver 8 machte Hyperlinks in Seiten von Designern unbrauchbar, die die zuvor in Dreamweaver bliche Praxis zu ihrem Vorteil nutzen wollten (nmlich Hyperlinks zu Dateien im Vorlagenordner nicht zu aktualisieren). Dreamweaver 8.01 wurde um eine Voreinstellung erweitert, die es Ihnen erlaubt, das Verhalten, relative Hyperlinks zu aktualisieren, an- und abzuschalten. (Diese spezielle Voreinstellung gilt nur fr Hyperlinks zu Dateien im Vorlagenordner und nicht generell fr alle Hyperlinks.) Das Standardverhalten ist, diese Hyperlinks nicht zu aktualisieren (wie in Dreamweaver MX 2004 und den Vorgngerversionen). Wenn Sie es jedoch vorziehen, dass Dreamweaver beim Erstellen vorlagenbasierender Seiten diese Art von Hyperlinks aktualisiert, knnen Sie diese Voreinstellung deaktivieren. (Dies wrde jedoch nur Sinn ergeben, wenn Sie beispielsweise eine CSS-Seite (Cascading Stylesheets) wie main.css im Vorlagenordner gespeichert haben und ein vorlagenbasiertes Dokument den Hyperlink href="Templates/main.css" enthalten soll. Von dieser Vorgehensweise wird jedoch abgeraten, da im Vorlagenordner nur Dreamweaver-Vorlagendateien (DWT-Dateien) abgelegt werden sollten.) Damit in Dreamweaver dokumentrelative Pfade zu Dateien, die keine Vorlagen sind, im Ordner Templates aktualisiert werden, whlen Sie im Dialogfeld Site-Definition (unter Erweiterte Einstellungen) die Kategorie Vorlagen aus und deaktivieren Sie die Option Relative Dokumentpfade nicht umschreiben. Weitere Informationen finden Sie in der Dreamweaver-TechNote auf der Adobe-Website unter www.adobe.com/go/f55d8739_de.
Verwandte Themen
Hyperlinks zu Dokumenten mit dem Dateizeigersymbol erstellen auf Seite 293 Dokumentrelative Pfade auf Seite 290
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 418
Vorlagen erstellen und verwalten
Wenn sich dieser Code in einer Vorlage befindet, werden nderungen an Skripts, die sich vor dem Tag <html> oder hinter dem Tag </html> befinden, in die Dokumente kopiert, die auf der entsprechenden Vorlage basieren. Allerdings knnen diese Skripts in den Dokumenten, die auf der Vorlage basieren, nicht mehr bearbeitet werden. Sie mssen sich also entscheiden, ob Sie diese Skripts in der Vorlage oder in den auf der Vorlage basierenden Dokumenten bearbeiten mchten; beide Mglichkeiten gleichzeitig stehen nicht zur Verfgung.
Vorlagenparameter
Mit Vorlagenparametern knnen Werte angegeben werden, die den Inhalt von Dokumenten steuern, welche auf einer Vorlage basieren. Verwenden Sie Vorlagenparameter fr optionale Bereiche oder bearbeitbare Tag-Attribute oder legen Sie die Werte fest, die an ein angefgtes Dokument bergeben werden sollen. Fr jeden Parameter definieren Sie einen Namen, einen Datentyp und einen Standardwert. Jeder Parameter muss einen eindeutigen Namen haben, wobei zwischen Gro- und Kleinschreibung unterschieden wird. Sie mssen einen der folgenden fnf erlaubten Datentypen besitzen: Text, Boolean, Farbe, URL oder Zahl. Vorlagenparameter werden an das Dokument als Instanzparameter bergeben. In den meisten Fllen kann der Benutzer der Vorlage den Standardwert des Parameters bearbeiten und somit das Dokument, das auf der Vorlage basiert, anpassen. In anderen Fllen kann der Autor der Vorlage deren Inhalt basierend auf dem Wert eines Vorlagenausdrucks festlegen. Hinweis: Einen Artikel, der darauf Bezug nimmt, finden Sie online unter www.adobe.com/devnet/dreamweaver/articles/template_parameters.html.
Verwandte Themen
Optionale Bereiche verwenden auf Seite 431 Bearbeitbare Tag-Attribute definieren auf Seite 434
Vorlagenausdrcke
Vorlagenausdrcke sind Anweisungen, die einen Wert berechnen oder auswerten. Sie knnen einen Ausdruck verwenden, um einen Wert zu speichern und in einem Dokument anzuzeigen. Ausdrcke knnen einfach oder komplex sein: Sie knnen den einfachen Wert eines Parameters enthalten, wie beispielsweise @@(Param)@@, jedoch auch eine Berechnung von Werten, mit denen beispielsweise die Hintergrundfarbe von Tabellenzeilen gendert wird, wie @@((_index & 1) ? red : blue)@@.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 419
Vorlagen erstellen und verwalten
Sie knnen auch Vorlagenausdrcke mit einer oder mehreren If-Bedingung(en) definieren. Ein Ausdruck in einer bedingten Anweisung wird von Dreamweaver entweder als true (wahr) oder false (falsch) ausgewertet. Wenn die Bedingung wahr ist, wird der optionale Bereich im auf der Vorlage basierten Dokument angezeigt; wenn sie unwahr ist, wird der Bereich nicht angezeigt. Sie knnen Ausdrcke in der Codeansicht oder im Dialogfeld Optionaler Bereich definieren, wenn Sie einen optionalen Bereich einfgen. In der Codeansicht knnen Vorlagenausdrcke auf zwei Arten definiert werden. Verwenden Sie den Kommentar <!- TemplateExpr expr="Ihr Ausdruck"--> oder @@(Ihr Ausdruck)@@. Wenn Sie den Ausdruck in den Vorlagencode einfgen, wird in der Entwurfsansicht eine Ausdrucksmarkierung angezeigt. Beim Anwenden der Vorlage wertet Dreamweaver den Ausdruck aus und zeigt den Wert im Dokument an, das auf der Vorlage basiert.
Verwandte Themen
Verwendete Sprache fr Vorlagenausdrcke auf Seite 419 Mehrfache If-Bedingung in Vorlagencodes auf Seite 420
Numerische Literale, String-Literale (Anfhrungszeichen in der Syntax erforderlich), Boolesche Literale (true und
false)
Variable Bezge (siehe die Liste definierter Variablen weiter unten in diesem Abschnitt) Feldbezge (der Punkt-Operator) Unre Operatoren: +, -, ~, ! Binre Operatoren: +, -, *, /, %, &, |, ^, &&, ||, <, <=, >, >=, ==, !=, <<, >> Bedingungsoperatoren: ?: Klammern: ()
Folgende Datentypen werden untersttzt: Boolean, 64-Bit-Fliekomma (IEEE), String und Object. In Dreamweaver-Vorlagen werden die JavaScript-Datentypen null und undefined nicht untersttzt. Darber hinaus ist es in Vorlagen nicht mglich, Skalar-Datentypen implizit in Objekte zu konvertieren; daher wrde der Ausdruck "abc".length zu einem Fehler fhren und nicht den Wert 3 zurckgeben. Die einzigen verfgbaren Objekte sind die durch das Ausdrucksobjektmodell definierten. Folgende Variablen sind definiert:
_document Enthlt die Vorlagendaten der Dokumentebene und fr jeden Parameter in der Vorlage ein Feld. _repeat Ist nur fr Ausdrcke definiert, die sich innerhalb eines wiederholenden Bereichs befinden. Zeigt integrierte Informationen ber den Bereich an. _index Numerischer Index des aktuellen Eintrags (der Index beginnt bei 0). _numRows Gesamtzahl der Eintrge in diesem wiederholenden Bereich.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 420
Vorlagen erstellen und verwalten
_isFirst Wahr, wenn der aktuelle Eintrag der erste Eintrag in seinem wiederholenden Bereich ist. _isLast Wahr, wenn der aktuelle Eintrag der letzte Eintrag in seinem wiederholenden Bereich ist. _prevRecord Das _repeat-Objekt des vorherigen Eintrags. Der Zugriff auf diese Eigenschaft im ersten Eintrag des
umschlieenden (ueren) wiederholenden Bereich angegeben. Der Aufruf dieser Eigenschaft auerhalb eines verschachtelten wiederholenden Bereichs fhrt zu einem Fehler. Bei der Auswertung des Ausdrucks sind alle Felder der Objekte _document und _repeat implizit verfgbar. Sie knnen beispielsweise title anstelle von _document.title eingeben, um Zugriff auf den title-Parameter des Dokuments zu erhalten. Wenn ein Konflikt der Feldnamen auftreten sollte, haben die Felder des _repeat-Objekts Vorrang vor den Feldern des _document-Objekts. Daher bentigen Sie wahrscheinlich keine expliziten Bezge auf _document oder _repeat, es sei denn, _document ist innerhalb eines repeat-Bereichs zur Bezugnahme auf Dokumentparameter erforderlich, die in wiederholenden Bereichsparametern versteckt sind. Bei der Verwendung verschachtelter wiederholender Bereiche sind nur die Felder der innersten wiederholenden Bereiche implizit verfgbar. Die ueren Bereiche mssen ber _parent explizit aufgerufen werden.
Die folgende bedingte Anweisung prft den Wert, der dem Parameter Dept zugewiesen wird. Wenn die Bedingung wahr ist oder zutrifft, wird das entsprechende Bild angezeigt.
<!-- TemplateBeginMultipleIf --> <!-- checks value of Dept and shows appropriate <!-- TemplateBeginIfClause cond="Dept == 1" --> TemplateEndIfClause --> <!-- TemplateBeginIfClause cond="Dept == 2" --> TemplateEndIfClause--> <!-- TemplateBeginIfClause cond="Dept == 3" --> TemplateEndIfClause --> <!-- TemplateBeginIfClause cond="Dept != 3" --> TemplateEndIfClause --> <!-- TemplateEndMultipleIf --> image--> <img src=".../sales.gif"> <!-<img src=".../support.gif"> <!-<img src=".../hr.gif"> <!-<img src=".../spacer.gif"> <!--
Wenn Sie ein auf einer Vorlage basierendes Dokument erstellen, werden die Vorlagenparameter automatisch an das Dokument bergeben. Der Benutzer der Vorlage legt fest, welches Bild angezeigt wird.
Verwandte Themen
Vorlageneigenschaften ndern auf Seite 446
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 421
Vorlagen erstellen und verwalten
Mit den Farbeinstellungen knnen Sie Ihr eigenes Farbschema festlegen, sodass Vorlagenbereiche bei der Anzeige eines Dokuments in der Codeansicht leicht zu unterscheiden sind. Der gesamte Inhalt zwischen diesen beiden Kommentaren kann in den Dokumenten, die auf der Vorlage basieren, bearbeitet werden. Der HTML-Quellcode fr einen bearbeitbaren Bereich sieht daher mglicherweise so aus:
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 422
Vorlagen erstellen und verwalten
<table width="75%" border="1" cellspacing="0" cellpadding="0"> <tr bgcolor="#333366"> <td>Name</td> <td><font color="#FFFFFF">Address</font></td> <td><font color="#FFFFFF">Telephone Number</font></td> </tr> <!-- TemplateBeginEditable name="LocationList" --> <tr> <td>Enter name</td> <td>Enter Address</td> <td>Enter Telephone</td> </tr> <!-- TemplateEndEditable --> </table>
Hinweis: Vermeiden Sie bei der Bearbeitung von Vorlagencode in der Codeansicht jegliche nderungen der vorlagenbezogenen Kommentar-Tags, auf die Dreamweaver bei der Verarbeitung von Vorlagen angewiesen ist.
Verwandte Themen
Code-Farbeinstellungen fr Vorlagen anpassen auf Seite 450
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 423
Vorlagen erstellen und verwalten
Verwandte Themen
Markierungseinstellungen fr Vorlagenbereiche festlegen auf Seite 450
Der gesamte Inhalt zwischen diesen beiden Kommentaren kann in den Dokumenten, die auf der Vorlage basieren, bearbeitet werden. Der HTML-Quellcode fr einen bearbeitbaren Bereich sieht daher mglicherweise so aus:
<body bgcolor="#FFFFFF" leftmargin="0"> <table width="75%" border="1" cellspacing="0" cellpadding="0"> <tr bgcolor="#333366"> <td>Name</td> <td><font color="#FFFFFF">Address</font></td> <td><font color="#FFFFFF">Telephone Number</font></td> </tr> <!-- InstanceBeginEditable name="LocationList" --> <tr> <td>Enter name</td> <td>Enter Address</td> <td>Enter Telephone</td> </tr> <!-- InstanceEndEditable --> </table> </body>
Standardmig wird der nicht bearbeitbare Text grau dargestellt, doch Sie knnen im Dialogfeld Voreinstellungen eine andere Farbe fr die bearbeitbaren und nicht bearbeitbaren Bereiche festlegen.
Verwandte Themen
Code-Farbeinstellungen fr Vorlagen anpassen auf Seite 450
Dreamweaver-Vorlagen erstellen
Grundstzliches zum Erstellen von Dreamweaver-Vorlagen
Sie knnen eine Vorlage aus einem vorhandenen Dokument (beispielsweise aus einem Dokument im Format HTML, Adobe ColdFusion oder Microsoft Active Server Pages) oder aus einem neuen Dokument erstellen. Sobald Sie eine Vorlage erstellt haben, knnen Sie Bereiche einfgen und Einstellungen fr Codefarbe und Markierungsfarbe der Bereiche festlegen. Sie knnen zustzliche Informationen zu einer Vorlage, beispielsweise ber den Autor, ber die letzte nderung oder ber den Grund fr bestimmte Layoutentscheidungen in einer Design Notes-Datei fr die Vorlage speichern. Die Dokumente, die auf Grundlage der Vorlage erstellt werden, erhalten nicht die Design Notes der Vorlage.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 424
Vorlagen erstellen und verwalten
Hinweis: Vorlagen in Adobe Dreamweaver unterscheiden sich von Vorlagen in einigen anderen Produkten der Adobe Creative Suite insofern, dass Seitenbereiche von Dreamweaver-Vorlagen standardmig festgelegt sind (d. h. nicht bearbeitbar sind). Ein Tutorial zur Erstellung von Vorlagen finden Sie unter www.adobe.com/go/vid0157_de. Ein Tutorial zur Verwendung von Vorlagen finden Sie unter www.adobe.com/go/vid0158_de.
Verwandte Themen
Arten von Vorlagenbereichen auf Seite 415 Voreinstellungen fr Vorlagenbereiche auf Seite 450 Design Notes mit Dateien verknpfen auf Seite 111 Tutorial zur Erstellung von Vorlagen Tutorial zur Verwendung von Vorlagen
Whlen Sie Datei > Als Vorlage speichern. Klicken Sie in der Kategorie Allgemein des Bedienfelds Einfgen auf die Schaltflche Vorlagen und whlen
Sie dann im Popupmen die Option Vorlage erstellen aus. Hinweis: Wenn Sie die Option Diese Warnung nicht mehr anzeigen nicht deaktiviert haben, wird in einer Warnmeldung angezeigt, dass das zu speichernde Dokument keine bearbeitbaren Bereiche enthlt. Klicken Sie auf OK, um das Dokument als Vorlage zu speichern, oder auf Abbrechen, um das Dialogfeld zu schlieen, ohne eine Vorlage zu erstellen.
3 Whlen Sie eine Site im Popupmen Site aus, um die Vorlage darin zu speichern, und geben Sie im Feld
Ordner Vorlagen im lokalen Stammordner der Site. Wenn der Ordner Vorlagen in der Site noch nicht vorhanden ist, wird er von Dreamweaver automatisch erstellt, sobald Sie eine neue Vorlage speichern. Hinweis: Speichern Sie Vorlagen nicht auerhalb des Ordners Vorlagen und legen Sie keine anderen Dateien in diesem Ordner ab. Der Ordner muss im lokalen Stammverzeichnis bleiben und darf nicht verschoben werden. Andernfalls entstehen fehlerhafte Pfadangaben in den Vorlagen.
Verwandte Themen
Leere Vorlagen erstellen auf Seite 66 Dokumente ffnen und erstellen auf Seite 63
aus.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 425
Vorlagen erstellen und verwalten
Daraufhin wird eine neue, unbenannte Vorlage in die Vorlagenliste des Bedienfelds eingefgt.
3 Geben Sie einen Namen fr die Vorlage ein, whrend sie noch ausgewhlt ist. Drcken Sie die Eingabetaste
(Windows) bzw. Return (Macintosh). Dreamweaver erstellt eine leere Vorlage im Bedienfeld Elemente und im Ordner Vorlagen.
Vorlagen fr Contribute-Sites
Mit Dreamweaver knnen Sie Vorlagen erstellen, die Adobe Contribute-Benutzer beim Erstellen neuer Seiten untersttzen und gleichzeitig ein einheitliches Erscheinungsbild Ihrer Site gewhrleisten. Auerdem knnen Sie das Layout mehrerer Seiten gleichzeitig aktualisieren. Wenn Sie eine Vorlage erstellen und zum Server hochladen, wird diese fr alle mit Ihrer Site verbundenen ContributeBenutzer verfgbar, die eine Verbindung zu Ihrer Site herstellen, soweit Sie keine Einschrnkungen fr die Vorlagennutzung fr bestimmte Contribute-Rollen festgelegt haben. Wenn Sie Einschrnkungen fr die Vorlagennutzung festgelegt haben, mssen Sie eventuell ber die Liste der Vorlagen bestimmen, welche Vorlagen ein Contribute-Benutzer verwenden kann. Weitere Informationen finden Sie unter Adobe Contribute verwalten. Hinweis: Stellen Sie sicher, dass es sich beim in der Site-Definition eines jeden Contribute-Benutzers definierten SiteStammordner um den gleichen handelt wie den in Ihrer Site-Definition in Dreamweaver angegebenen. Wenn der SiteStammordner eines Benutzers nicht mit Ihrem bereinstimmt, kann dieser Benutzer keine Vorlagen verwenden. Zustzlich zu Dreamweaver-Vorlagen knnen Sie mit den Tools der Contribute-Verwaltung auch NichtDreamweaver-Vorlagen erstellen. Eine Nicht-Dreamweaver-Vorlage ist eine bestehende Seite, mit der ContributeBenutzer neue Seiten erstellen knnen. Die Seite hnelt einer Dreamweaver-Vorlage, die auf ihr basierenden Seiten werden aber nicht aktualisiert, wenn Sie die Vorlage verndern. Auerdem knnen Seiten, die keine DreamweaverVorlagen sind, keine Dreamweaver-Vorlagenelemente wie bearbeitbare, gesperrte, sich wiederholende oder optionale Bereiche enthalten.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 426
Vorlagen erstellen und verwalten
Wenn ein Contribute-Benutzer ein neues Dokument innerhalb einer Site mit Dreamweaver-Vorlagen erstellt, listet Contribute die verfgbaren Vorlagen (sowohl Dreamweaver-Vorlagen als auch Nicht-Dreamweaver-Vorlagen) im Dialogfeld Neue Seite auf.
Um Seiten auf Ihrer Site einzubinden, die auer Latin 1 noch andere Kodierungen verwenden, mssen Sie vielleicht Vorlagen (entweder Dreamweaver- oder Nicht-Dreamweaver) erstellen. Mit Contribute knnen die Benutzer Seiten mit beliebigen Kodierungen bearbeiten. Erstellt ein Contribute-Benutzer allerdings eine neue leere Seite, wird dafr die Kodierung Latin 1 verwendet. Contribute-Benutzer knnen Seiten mit einer anderen Kodierung erstellen, indem sie eine Kopie einer bestehenden Seite anfertigen, die eine andere Kodierung verwendet, oder eine Vorlage mit einer anderen Kodierung verwenden. Wenn es in der Site keine Seiten oder Vorlagen gibt, die eine andere Kodierung verwenden, mssen Sie zuerst eine Seite oder Vorlage in Dreamweaver erstellen, die eine andere Kodierung verwendet.
Whlen Sie die Option Contribute-Kompatibilitt aktivieren und geben Sie eine Stammordner-URL ein.
5 Klicken Sie auf Site in Contribute verwalten. 6 Geben Sie das Administratorkennwort ein, wenn Sie dazu aufgefordert werden, und klicken Sie auf OK. 7 Whlen Sie in der Kategorie fr Benutzer und Rollen eine Rolle aus und klicken Sie auf die Schaltflche zum
Seite durch Kopieren einer Seite aus dieser Liste erstellen hinzu.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 427
Vorlagen erstellen und verwalten
Verwandte Themen
Site fr die Verwendung von Contribute vorbereiten auf Seite 57
Sie knnen eine ganze Tabelle oder eine einzelne Tabellenzelle, nicht jedoch mehrere Zellen gleichzeitig als einen
einzelnen bearbeitbaren Bereich markieren. Wenn ein <td>-Tag ausgewhlt ist, umfasst der bearbeitbare Bereich die Region um die Zelle, andernfalls gehrt nur der Zelleninhalt zum bearbeitbaren Bereich.
AP-Elemente und AP-Elementinhalt sind separate Elemente. Wenn Sie ein AP-Element als bearbeitbar definieren,
knnen Sie sowohl die Position des AP-Elements als auch dessen Inhalt ndern. Wenn Sie dagegen den Inhalt eines AP-Elements bearbeitbar machen, knnen Sie nur den Inhalt des AP-Elements ndern, nicht seine Position.
1 Fhren Sie im Dokumentfenster einen der folgenden Schritte aus, um den Bereich auszuwhlen:
Whlen Sie den Text oder Inhalt aus, den Sie als bearbeitbaren Bereich definieren mchten. Setzen Sie die Einfgemarke an die Stelle, an der Sie einen bearbeitbaren Bereich einfgen mchten.
2 Fhren Sie einen der folgenden Schritte aus, um einen bearbeitbaren Bereich einzufgen:
Whlen Sie Einfgen > Vorlagenobjekte > Bearbeitbarer Bereich. Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste (Macintosh) und whlen Sie dann
Vorlagen > Neuer bearbeitbarer Bereich.
Klicken Sie in der Kategorie Allgemein des Bedienfelds Einfgen auf die Schaltflche Vorlagen und whlen
Sie dann im Popupmen die Option Bearbeitbarer Bereich aus.
3 Geben Sie im Feld Name einen eindeutigen Namen fr den Bereich ein. (Innerhalb einer Vorlage kann dieser
Name dann nicht fr weitere bearbeitbare Bereiche verwendet werden.) Hinweis: Geben Sie im Feld Name keine Sonderzeichen ein.
4 Klicken Sie auf OK. Der bearbeitbare Bereich ist in der Vorlage durch einen rechteckigen Rahmen
hervorgehoben, wobei die in den Voreinstellungen festgelegte Markierungsfarbe verwendet wird. In der linken oberen Ecke des Bereichs wird dessen Name angezeigt. Wenn Sie einen leeren bearbeitbaren Bereich in das Dokument eingefgt haben, wird auch der Bereichsname innerhalb des Bereichs angezeigt.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 428
Vorlagen erstellen und verwalten
Verwandte Themen
Dreamweaver-Vorlagen erstellen auf Seite 423 Markierungseinstellungen fr Vorlagenbereiche festlegen auf Seite 450
unteren Rand des Untermens aus. Hinweis: Bearbeitbare Bereiche innerhalb eines wiederholenden Bereichs werden im Men nicht aufgefhrt. Sie mssen diese Bereiche anhand der mit Registern versehenen Rnder im Dokumentfenster selbst finden. Der bearbeitbare Bereich wird im Dokument ausgewhlt.
Whlen Sie Modifizieren > Vorlagen > Vorlagen-Markup lschen. Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste (Macintosh) und whlen Sie dann
Vorlagen > Vorlagen-Markup lschen. Der Bereich kann nicht mehr bearbeitet werden.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 429
Vorlagen erstellen und verwalten
Verwandte Themen
Arten von Vorlagenbereichen auf Seite 415
Whlen Sie den Text oder Inhalt aus, den Sie als wiederholenden Bereich definieren mchten. Klicken Sie auf das Dokument, in das Sie einen wiederholenden Bereich einfgen mchten.
2 Fhren Sie einen der folgenden Schritte aus:
Whlen Sie Einfgen > Vorlagenobjekte > Wiederholender Bereich. Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste (Macintosh) und whlen Sie dann
Vorlagen > Neuer wiederholender Bereich.
Klicken Sie in der Kategorie Allgemein des Bedienfelds Einfgen auf die Schaltflche Vorlagen und whlen
Sie dann im Popupmen die Option Wiederholender Bereich aus.
3 Geben Sie im Feld Name einen eindeutigen Namen fr den Vorlagenbereich ein. (Innerhalb einer Vorlage kann
der Name dann nicht fr mehrere Wiederholende Bereiche verwendet werden.) Hinweis: Bei der Eingabe des Namens fr einen Bereich drfen keine Sonderzeichen verwendet werden.
4 Klicken Sie auf OK.
Verwandte Themen
Bearbeitbare Bereiche einfgen auf Seite 427
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 430
Vorlagen erstellen und verwalten
Whlen Sie Einfgen > Vorlagenobjekte > Wiederholende Tabelle. Klicken Sie in der Kategorie Allgemein des Bedienfelds Einfgen auf die Schaltflche Vorlagen und whlen
Sie dann im Popupmen die Option Wiederholende Tabelle aus.
3 Legen Sie die folgenden Optionen fest und klicken Sie auf OK:
Zeilen legt die Anzahl der Zeilen in der Tabelle fest. Spalten legt die Anzahl der Spalten in der Tabelle fest. Zellauffllung legt den Abstand zwischen dem Zellinhalt und den Zellrndern in Pixel fest. Zellabstand legt den Abstand zwischen aneinander grenzen Tabellenzellen in Pixel fest.
Wenn Sie fr Zellabstand und Zellauffllung nicht ausdrcklich Werte zuweisen, wird eine Tabelle in den meisten Browsern mit einer Zellauffllung von 1 Pixel und einem Zellabstand von 2 Pixeln angezeigt. Legen Sie fr Zellauffllung und Zellabstand den Wert 0 fest, wenn die Tabelle im Browser ohne Zellauffllung und Zellabstand angezeigt werden soll.
Breite gibt die Breite der Tabelle in Pixel oder als Prozentsatz der Fensterbreite des Browsers an. Rahmen gibt die Breite der Tabellenrnder in Pixel an.
Wenn Sie fr den Rahmen nicht ausdrcklich einen Wert zuweisen, wird die Tabelle in den meisten Browsern mit einem Rahmen von 1 Pixel angezeigt. Legen Sie fr Rahmen den Wert 0 fest, wenn die Tabelle im Browser ohne Rahmen angezeigt werden soll. Wenn fr Rahmen der Wert 0 festgelegt ist und die Zell- und Tabellenrnder angezeigt werden sollen, whlen Sie Ansicht > Visuelle Hilfsmittel > Tabellenrahmen aus.
Tabellenzeilen wiederholen legt fest, welche Zeilen der Tabelle in den wiederholenden Bereich aufgenommen werden
sollen.
Anfang bei Zeile legt die Zeilennummer der ersten Zeile fest, die in den wiederholenden Bereich aufgenommen
werden soll.
Ende bei Zeile legt die Zeilennummer der letzten Zeile fest, die in den wiederholenden Bereich aufgenommen werden soll. Bereichsname definiert einen eindeutigen Namen fr den wiederholenden Bereich.
sodass Sie Zugriff auf den HTML-Code der gewnschten Tabellenzeile erhalten.
3 Bearbeiten Sie das <tr>-Tag in der Codeansicht, sodass es den folgenden Code enthlt:
<tr bgcolor="@@( _index & 1 ? '#FFFFFF' : '#CCCCCC' )@@">
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 431
Vorlagen erstellen und verwalten
Sie knnen die Hexadezimalwerte #FFFFFF und #CCCCCC durch andere Farbwerte ersetzen.
4 Speichern Sie die Vorlage.
Durch den folgenden Code wird eine Tabelle mit abwechselnden Hintergrundfarben fr die Tabellenzeilen erstellt:
<table width="75%" border="1" cellspacing="0" cellpadding="0"> <tr><th>Name</th><th>Phone Number</th><th>Email Address</th></tr> <!-- TemplateBeginRepeat name="contacts" --> <tr bgcolor="@@(_index & 1 ? '#FFFFFF' : '#CCCCCC')@@"> <td> <!-- TemplateBeginEditable name="name" --> name <!-- TemplateEndEditable --> </td> <td> <!-- TemplateBeginEditable name="phone" --> phone <!-- TemplateEndEditable --> </td> <td> <!-- TemplateBeginEditable name="email" --> email <!-- TemplateEndEditable --> </td> </tr> <!-- TemplateEndRepeat --> </table>
Verwandte Themen
Vorlageneigenschaften ndern auf Seite 446 Arten von Vorlagenbereichen auf Seite 415
Nicht bearbeitbare optionale Bereiche, die es Benutzern der Vorlage ermglichen, speziell markierte Bereiche einund auszublenden, ohne dass sie den Inhalt bearbeiten knnen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 432
Vorlagen erstellen und verwalten
Der Registerreiter eines optionalen Bereichs wird vom Wort if eingeleitet. Je nach der in der Vorlage eingestellten Bedingung knnen die Benutzer der Vorlage definieren, welcher Bereich in den von ihnen erstellten Seiten sichtbar ist.
Bearbeitbare optionale Bereiche, die es Benutzern der Vorlage ermglichen, festzulegen, ob der Bereich ein- oder
ausgeblendet ist, und den Inhalt in diesem Bereich zu bearbeiten. Wenn der optionale Bereich beispielsweise ein Bild oder Text enthlt, kann der Benutzer der Vorlage festlegen, ob der Inhalt angezeigt wird, und kann auf Wunsch auch nderungen am Inhalt vornehmen. Bearbeitbare Bereiche werden durch eine bedingte Anweisung gesteuert.
Verwandte Themen
Vorlageneigenschaften ndern auf Seite 446
Whlen Sie Einfgen > Vorlagenobjekte > Optionaler Bereich. Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste (Macintosh) auf den
ausgewhlten Inhalt und whlen Sie Vorlagen > Neuer optionaler Bereich.
Klicken Sie in der Kategorie Allgemein des Bedienfelds Einfgen auf die Schaltflche Vorlagen und whlen
Sie dann im Popupmen die Option Optionaler Bereich aus.
3 Geben Sie fr den optionalen Bereich einen Namen ein, klicken Sie auf die Registerkarte Erweitert, wenn Sie
Werte fr den optionalen Bereich festlegen mchten, und klicken Sie dann auf OK.
mchten. Sie knnen eine Auswahl nicht um ein Objekt legen, um einen bearbeitbaren optionalen Bereich zu erstellen. Fgen Sie den Bereich ein und fgen Sie dann Inhalt in den Bereich ein.
2 Fhren Sie einen der folgenden Schritte aus:
Whlen Sie Einfgen > Vorlagenobjekte > Bearbeitbarer optionaler Bereich. Klicken Sie in der Kategorie Allgemein des Bedienfelds Einfgen auf die Schaltflche Vorlagen und whlen
Sie dann im Popupmen die Option Bearbeitbarer optionaler Bereich aus.
3 Geben Sie fr den optionalen Bereich einen Namen ein, klicken Sie auf die Registerkarte Erweitert, wenn Sie
Werte fr den optionalen Bereich festlegen mchten, und klicken Sie auf OK.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 433
Vorlagen erstellen und verwalten
Auf der Registerkarte Erweitert knnen Sie mehrere optionale Bereiche mit einem benannten Parameter verknpfen. In Dokumenten, die auf der Vorlage basieren, werden beide Bereiche als Einheit angezeigt oder ausgeblendet. Sie knnen beispielsweise fr Produkte, die gerade im Sonderangebot sind, ein Bild namens Angebot und einen Preisnachlass-Textbereich anzeigen. Darber hinaus knnen Sie mithilfe der Registerkarte Erweitert einen Vorlagenausdruck erstellen, der einen Wert fr den optionalen Bereich auswertet und diesen Bereich je nach Wert entweder anzeigt oder ausblendet.
1 Fhren Sie im Dokumentfenster einen der folgenden Schritte aus:
Klicken Sie in der Entwurfsansicht auf den Registerreiter des optionalen Bereichs, den Sie ndern mchten. Setzen Sie in der Entwurfsansicht die Einfgemarke in den Vorlagenbereich. Links unten in der Statusleiste des
Dokumentfensters befindet sich der Tag-Selektor. Whlen Sie dort das Vorlagen-Tag <mmtemplate:if> aus.
Klicken Sie in der Codeansicht auf das Kommentar-Tag des zu modifizierenden Vorlagenbereichs.
2 Klicken Sie im Eigenschafteninspektor (Fenster > Eigenschaften) auf Bearbeiten. 3 Geben Sie auf der Registerkarte Grundlagen im Feld Name einen Namen fr den Parameter ein. 4 Aktivieren Sie die Option Standardmig anzeigen, wenn der ausgewhlte Bereich im Dokument angezeigt
werden soll. Deaktivieren Sie die Option, um den Bereich standardmig nicht anzuzeigen. Hinweis: Wenn Sie den Wert des Parameters ndern mchten, knnen Sie auch in der Codeansicht im head-Abschnitt des Dokuments den Parameter suchen und dort einen anderen booleschen Wert eingeben.
5 Optional: Klicken Sie auf die Registerkarte Erweitert und legen Sie die folgenden Optionen fest:
Wenn Sie die Parameter optionaler Bereiche verknpfen mchten, aktivieren Sie die Option Parameter
verwenden. Whlen Sie anschlieend im Popupmen die bestehenden Parameter aus, die mit dem ausgewhlten Inhalt verknpft werden sollen.
Wenn Sie Vorlagenausdrcke erstellen mchten, um die Anzeige eines optionalen Bereichs zu steuern, aktivieren
Sie die Option Geben Sie einen Ausdruck ein und geben Sie anschlieend den Ausdruck im Feld ein. Hinweis: Dreamweaver setzt den eingegebenen Text in Anfhrungszeichen.
6 Klicken Sie auf OK.
Wenn Sie das Vorlagenobjekt Optionaler Bereich verwenden, fgt Dreamweaver Vorlagenkommentare in den Code ein. Der Vorlagenparameter wird im head-Abschnitt wie im folgenden Beispiel definiert:
<!-- TemplateParam name="departmentImage" type="boolean" value="true" -->
An der Stelle, an der Sie den optionalen Bereich einfgen, wird Code eingefgt, der in etwa dem folgenden hnelt:
<!-- TemplateBeginIf cond="departmentImage" --> <p><img src="/images/airfare_on.gif" width="85" height="22"> </p> <!-- TemplateEndIf -->
Im vorlagebasierten Dokument knnen Sie auf Vorlagenparameter zugreifen und diese bearbeiten.
Verwandte Themen
Vorlageneigenschaften ndern auf Seite 446 Vorlagenausdrcke auf Seite 418
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 434
Vorlagen erstellen und verwalten
Wenn das Attribut, das Sie bearbeitbar machen mchten, im Popupmen Attribut aufgefhrt wird, whlen Sie
es aus.
Wenn das Attribut, das Sie bearbeitbar machen mchten, im Popupmen Attribut nicht aufgefhrt wird, klicken
Sie auf Hinzufgen, geben Sie dann im angezeigten Dialogfeld den Namen des Attributs ein und klicken Sie auf OK.
4 Achten Sie darauf, dass die Option Attribut bearbeitbar machen aktiviert ist. 5 Geben Sie im Feld Beschriftung einen eindeutigen Namen fr das Attribut ein.
Um ein spezifisches bearbeitbares Tag-Attribut zu einem spteren Zeitpunkt problemlos wieder finden zu knnen, sollten Sie eine Beschriftung eingeben, die das Element und das Attribut aussagekrftig beschreibt. Sie knnen beispielsweise ein Bild, dessen Quelle bearbeitbar ist, LogoQuelle nennen, oder die bearbeitbare Hintergrundfarbe eines body-Tags mit der Beschriftung bodyHGFarbe versehen.
6 Whlen Sie im Popupmen Typ den Typ des Wertes aus, der fr dieses Attribut zulssig ist, indem Sie eine der
Wenn Sie dem Benutzer die Eingabe eines Textwerts fr das Attribut ermglichen mchten, whlen Sie Text. Sie
knnen beispielsweise Text mit dem align-Attribut verwenden. Der Benutzer kann dann den Wert des Attributs auf left, right oder center einstellen.
Wenn Sie einen Hyperlink in ein Element einfgen mchten (beispielsweise den Dateipfad zu einem Bild), whlen
Sie URL. Diese Einstellung aktualisiert automatisch den in einem Hyperlink verwendeten Pfad. Wenn der Benutzer das Bild in einen neuen Ordner verschiebt, wird das Dialogfeld Hyperlinks aktualisieren eingeblendet.
Wenn Sie den Farbwhler fr die Auswahl eines Wertes verfgbar machen mchten, whlen Sie Farbe.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 435
Vorlagen erstellen und verwalten
Wenn Sie einem Benutzer auf der Seite die Auswahl eines Wahrheitswerts wahr oder falsch ermglichen
mchten, whlen Sie Wahr/Falsch aus.
Wenn Sie dem Benutzer der Vorlage die Eingabe eines numerischen Wertes ermglichen mchten, damit er ein
Attribut aktualisieren kann (um beispielsweise die Hhe oder Breite eines Bildes zu ndern), whlen Sie Zahl.
7 Im Feld Standard wird der Wert des ausgewhlten Tag-Attributs in der Vorlage angezeigt. Geben Sie in diesem
Feld einen neuen Wert ein, wenn Sie fr auf Vorlagen basierende Dokumente einen anderen Anfangswert fr den Parameter festlegen mchten.
8 Optional: Wenn Sie ein weiteres Attribut eines ausgewhlten Tags ndern mchten, whlen Sie das Attribut aus
Verwandte Themen
Vorlageneigenschaften ndern auf Seite 446
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 436
Vorlagen erstellen und verwalten
Im folgenden Beispiel beinhaltet die Vorlage trioHome drei bearbeitbare Bereiche: Body, NavBar und Footer.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 437
Vorlagen erstellen und verwalten
Zum Erstellen einer verschachtelten Vorlage wurde ein neues Dokument auf Basis der Vorlage erstellt, das Dokument anschlieend als Vorlage gespeichert und die Vorlage TrioNested genannt. Der verschachtelten Vorlage wurden im bearbeitbaren Bereich Body zwei bearbeitbare Bereiche hinzugefgt.
Wenn Sie innerhalb eines bearbeitbaren Bereichs, der an eine verschachtelte Vorlage bertragen wird, einen neuen bearbeitbaren Bereich hinzufgen, wird der Markierungsrahmen des bearbeitbaren Bereichs in orange dargestellt. Auerhalb eines bearbeitbaren Bereichs hinzugefgte Inhalte (beispielsweise die Grafik in editableColumn) sind in Dokumenten, die auf der verschachtelten Vorlage basieren, nicht mehr bearbeitbar. Die blau markierten bearbeitbaren Bereiche, die entweder in der verschachtelten Vorlage hinzugefgt oder von der Basisvorlage bernommen wurden, bleiben in Dokumenten, die auf der verschachtelten Vorlage basieren, weiterhin bearbeitbar. Vorlagenbereiche ohne bearbeitbare Bereiche werden in die auf der Vorlage basierenden Dokumente als bearbeitbare Bereiche bernommen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 438
Vorlagen erstellen und verwalten
Hinweis: Sie knnen ein Vorlagen-Markup in einen bearbeitbaren Bereich einfgen, sodass dieser Bereich nicht bergeben wird und in Dokumenten bearbeitet werden kann, die auf dieser verschachtelten Vorlage basieren. Diese Bereiche haben einen orangefarbigen Rahmen anstelle eines blauen.
1 Erstellen Sie ein Dokument basierend auf der Vorlage, die Sie fr die verschachtelte Vorlage verwenden mchten.
Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste (Macintosh) in der Kategorie
Vorlagen des Bedienfelds Elemente auf die Vorlage, auf deren Basis Sie ein neues Dokument erstellen mchten. Whlen Sie dann im Kontextmen die Option Neu von Vorlage.
Whlen Sie Datei > Neu. Whlen Sie im Dialogfeld Neues Dokument die Kategorie Seite aus Vorlage und
dann die Site, in der sich die gewnschte Vorlage befindet. Doppelklicken Sie dann in der Vorlagenliste auf die Vorlage, um ein neues Dokument zu erstellen.
2 Whlen Sie Datei > Als Vorlage speichern, um das neue Dokument als verschachtelte Vorlage zu speichern: 3 Geben Sie im Feld Speichern unter einen Namen ein und klicken Sie auf OK.
Verwandte Themen
Serverskripts in Vorlagen und vorlagenbasierten Dokumenten auf Seite 418
Dieser Vorlagencode kann an beliebiger Stelle innerhalb der <!-- InstanceBeginEditable --><!-InstanceEndEditable -->-Tags positioniert werden, die den bearbeitbaren Bereich einschlieen. Zum Beispiel:
<!-- InstanceBeginEditable name="EditRegion1" --> <p>@@("")@@ Editable 1 </p> <!-- InstanceEndEditable -->
Weitere Informationen finden Sie in TechNote 16416 auf der Adobe-Website unter www.adobe.com/go/16416_de.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 439
Vorlagen erstellen und verwalten
Hinweis: Sie knnen eine Vorlage fr eine Contribute-Site nur mit Dreamweaver bearbeiten. Es ist nicht mglich, Vorlagen in Contribute zu bearbeiten. Verwenden Sie die Kategorie Vorlagen des Bedienfelds Elemente, um vorhandene Vorlagen zu verwalten und Vorlagendateien umzubenennen oder zu lschen. Sie knnen mit diesem Bedienfeld folgende Aufgaben hinsichtlich der Vorlagenverwaltung ausfhren:
Vorlagen erstellen Vorlagen bearbeiten und aktualisieren Vorlagen auf vorhandene Dokumente anwenden oder aus Dokumenten entfernen
Zwar berprft Dreamweaver die Vorlagensyntax, wenn Sie eine Vorlage speichern, dennoch empfiehlt es, sich die Vorlagensyntax manuell zu berprfen, whrend Sie eine Vorlage bearbeiten.
Verwandte Themen
Dreamweaver-Vorlagen erstellen auf Seite 423 Vorlagensyntax berprfen auf Seite 449 Vorlagen auf vorhandene Dokumente anwenden oder aus Dokumenten entfernen auf Seite 444
Verwandte Themen
Vorlagensyntax berprfen auf Seite 449
aus.
Im Bedienfeld Elemente werden alle fr Ihre Site verfgbaren Vorlagen aufgefhrt sowie eine Vorschau der ausgewhlten Vorlage angezeigt.
2 Fhren Sie in der Liste der verfgbaren Vorlagen einen der folgenden Schritte aus:
Doppelklicken Sie auf den Namen der Vorlage, die Sie bearbeiten mchten. Whlen Sie die zu bearbeitende Vorlage aus und klicken Sie unten im Bedienfeld Elemente auf die Schaltflche
Bearbeiten .
3 ndern Sie den Inhalt der Vorlage.
Um die Seiteneigenschaften der Vorlage zu ndern, whlen Sie Modifizieren > Seiteneigenschaften. (Dokumente, die auf einer Vorlage basieren, bernehmen die Seiteneigenschaften der Vorlage.)
4 Speichern Sie die Vorlage. Dreamweaver fordert Sie auf, die auf der Vorlage basierenden Seiten zu aktualisieren.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 440
Vorlagen erstellen und verwalten
5 Klicken Sie auf Aktualisieren, um alle auf der genderten Vorlage basierenden Dokumente zu aktualisieren.
Klicken Sie auf Nicht aktualisieren, wenn die auf der modifizierten Vorlage basierenden Dokumente nicht aktualisiert werden sollen. Dreamweaver zeigt ein Protokoll an, aus dem hervorgeht, welche Dateien aktualisiert wurden.
Whlen Sie Modifizieren > Vorlagen > Angefgte Vorlage ffnen. Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste (Macintosh) und whlen Sie dann
Vorlagen > Angefgte Vorlage ffnen.
3 ndern Sie den Inhalt der Vorlage.
Um die Seiteneigenschaften der Vorlage zu ndern, whlen Sie Modifizieren > Seiteneigenschaften. (Dokumente, die auf einer Vorlage basieren, bernehmen die Seiteneigenschaften der Vorlage.)
4 Speichern Sie die Vorlage. Dreamweaver fordert Sie auf, die auf der Vorlage basierenden Seiten zu aktualisieren. 5 Klicken Sie auf Aktualisieren, um alle auf der genderten Vorlage basierenden Dokumente zu aktualisieren.
Klicken Sie auf Nicht aktualisieren, wenn die auf der modifizierten Vorlage basierenden Dokumente nicht aktualisiert werden sollen. Dreamweaver zeigt ein Protokoll an, aus dem hervorgeht, welche Dateien aktualisiert wurden.
Vorlagen umbenennen
1 Whlen Sie im Bedienfeld Elemente (Fenster > Elemente) auf der linken Seite die Kategorie Vorlagen 2 Klicken Sie auf den Namen der Vorlage, um sie auszuwhlen. 3 Klicken Sie erneut auf den Namen, sodass der Text ausgewhlt werden kann, und geben Sie einen neuen Namen ein.
aus.
Dieses Verfahren zum Umbenennen entspricht dem Umbenennen einer Datei im Windows-Explorer (Windows) bzw. im Finder (Macintosh). Ebenso wie im Windows-Explorer bzw. im Finder mssen Sie zwischen den beiden Mausklicks kurz warten. Doppelklicken Sie nicht auf den Namen, da hierdurch die Vorlage zum Bearbeiten geffnet wird.
4 Klicken Sie auf einen anderen Bereich im Bedienfeld Elemente oder drcken Sie die Eingabetaste (Windows)
bzw. Return (Macintosh), um die nderung zu bernehmen. Sie werden jetzt gefragt, ob Sie die Dokumente aktualisieren mchten, die auf dieser Vorlage basieren.
5 Klicken Sie auf Aktualisieren, um alle Dokumente zu aktualisieren, die auf dieser Vorlage basieren. Klicken Sie
auf Nicht aktualisieren, wenn Sie keines der auf dieser Vorlage beruhenden Dokumente aktualisieren mchten.
Verwandte Themen
Dreamweaver-Vorlagen erstellen auf Seite 423 Vorlagen auf vorhandene Dokumente anwenden oder aus Dokumenten entfernen auf Seite 444
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 441
Vorlagen erstellen und verwalten
Vorlagenbeschreibungen ndern
Die Vorlagenbeschreibung wird im Dialogfeld Neues Dokument angezeigt, wenn Sie aus einer vorhandenen Vorlage eine Seite erstellen.
1 Whlen Sie Modifizieren > Vorlagen > Beschreibung aus. 2 Bearbeiten Sie im Dialogfeld Vorlagenbeschreibung den Beschreibungstext und klicken Sie auf OK.
Verwandte Themen
Dreamweaver-Vorlagen erstellen auf Seite 423
Gesamte Site oder alle Dokumente, die eine bestimmte Vorlage verwenden, aktualisieren
Sie knnen alle Seiten einer Site oder nur die Seiten fr eine bestimmte Vorlage aktualisieren.
1 Whlen Sie Modifizieren > Vorlagen > Seiten aktualisieren. 2 ffnen Sie das Popupmen Suchen in und gehen Sie vor wie folgt:
Um alle Dateien einer Site entsprechend der angefgten Vorlagen zu aktualisieren, whlen Sie Gesamte Site und
whlen Sie anschlieend im daneben liegenden Popupmen den Namen der Vorlage aus.
Um Dateien fr eine bestimmte Vorlage zu aktualisieren, whlen Sie Dateien mit... aus und whlen Sie
anschlieend im daneben angezeigten Popupmen den Namen der Vorlage aus.
3 Achten Sie darauf, dass im Bereich Aktualisieren die Option Vorlagen aktiviert ist. 4 Wenn Sie ein Protokoll der Dateien, die von Dreamweaver aktualisiert werden, anzeigen mchten, aktivieren Sie
Protokoll zeigen ausgewhlt haben, liefert Dreamweaver Informationen zu den Dateien, die aktualisiert werden. Die erfolgreiche Aktualisierung wird ebenfalls gemeldet.
6 Klicken Sie auf Schlieen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 442
Vorlagen erstellen und verwalten
Folgende Punkte sollten Sie sich merken, wenn Sie Vorlagen in einer Contribute-Site aktualisieren:
Contribute ruft neue und genderte Vorlagen nur beim Programmstart von der Site ab und wenn ein ContributeBenutzer die Verbindungsinformationen ndert. Wenn Sie nderungen an einer Vorlage vornehmen, whrend ein Contribute-Benutzer eine auf dieser Vorlage basierende Datei bearbeitet, sind die nderungen an der Vorlage fr den Benutzer erst nach einem Neustart von Contribute sichtbar.
Wenn Sie einen bearbeitbaren Bereich aus einer Vorlage entfernen, kann das fr einen Contribute-Benutzer, der
eine auf dieser Vorlage basierende Seite bearbeitet, verwirrend sein und er wei nicht, was mit dem Inhalt aus diesem bearbeitbaren Bereich passieren soll. Um eine Vorlage auf einer Contribute-Site zu aktualisieren, fhren Sie folgende Schritte aus.
1 ffnen Sie die Contribute-Vorlage in Dreamweaver, bearbeiten und speichern Sie sie. Anweisungen dazu finden
mssen.
Vorlagendateien lschen
1 Whlen Sie im Bedienfeld Elemente (Fenster > Elemente) auf der linken Seite die Kategorie Vorlagen 2 Klicken Sie auf den Namen der Vorlage, um sie auszuwhlen. 3 Klicken Sie unten im Bedienfeld auf die Schaltflche Lschen
aus.
Vorlage gelscht werden soll. Wichtig: Eine gelschte Vorlagendatei kann nicht wiederhergestellt werden. Die Vorlagendatei wird aus Ihrer Site gelscht. Dokumente, die mit einer gelschten Vorlage erstellt worden sind, werden nicht von der Vorlage gelst. Sie behalten die Struktur und die bearbeitbaren Bereiche so bei, wie sie in der gelschten Vorlagendatei vorgelegen haben. Sie knnen ein solches Dokument in eine normale HTML-Datei ohne bearbeitbare oder gesperrte Bereiche umwandeln.
Verwandte Themen
Dokument von einer Vorlage lsen auf Seite 445 Vorlagen auf vorhandene Dokumente anwenden oder aus Dokumenten entfernen auf Seite 444 Dreamweaver-Vorlagen erstellen auf Seite 423
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 443
Vorlagen erstellen und verwalten
Wenn das Dokument wiederholende Bereiche oder Vorlagenparameter enthlt, whlen Sie Dreamweaver
Standard-XML-Tags verwenden.
Bei Vorlagen, die keine wiederholenden Bereiche oder Vorlagenparameter enthalten, whlen Sie Namen
bearbeitbarer Bereiche als XML-Tags verwenden.
4 Klicken Sie auf OK. 5 Whlen Sie im eingeblendeten Dialogfeld einen Ordner aus, geben Sie einen Namen fr die XML-Datei ein und
klicken Sie auf Speichern. Mit dem Material aus den Parametern und bearbeitbaren Bereichen des Dokuments, einschlielich der bearbeitbaren Bereiche innerhalb von wiederholenden oder optionalen Bereichen, wird eine XML-Datei erzeugt. Diese XML-Datei enthlt den Namen der ursprnglichen Vorlage sowie den Namen und Inhalt jedes Vorlagenbereichs. Hinweis: Der Inhalt nicht bearbeitbarer Bereiche wird nicht in die XML-Datei exportiert.
XML-Inhalte importieren
1 Whlen Sie Datei > Importieren > XML als Vorlage. 2 Whlen Sie die XML-Datei aus und klicken Sie auf ffnen.
Dreamweaver erstellt ein neues Dokument basierend auf der in der XML-Datei angegebenen Vorlage. Dabei wird der Inhalt der einzelnen bearbeitbaren Bereiche in diesem Dokument unter Verwendung der Daten in der XML-Datei aufgefllt. Das resultierende Dokument wird in einem neuen Dokumentfenster angezeigt. Beachten Sie, dass der Import fehlschlagen kann, wenn die XML-Datei nicht genau so konfiguriert ist, wie es Dreamweaver erwartet. Um eine XML-Datei mit der richtigen Struktur zu erhalten, knnen Sie eine XMLMusterdatei aus Dreamweaver exportieren. Kopieren Sie die Daten anschlieend aus der ursprnglichen XML-Datei in die exportierte XML-Datei. Das Ergebnis ist eine XML-Datei mit der richtigen Struktur, die auch die richtigen Daten enthlt und importiert werden kann.
Sie auf Durchsuchen und whlen Sie dann den Ordner aus. Hinweis: Sie mssen einen Ordner auerhalb der aktuellen Site auswhlen.
3 Wenn Sie eine XML-Version des exportierten, auf der Vorlage basierenden Dokuments speichern mchten,
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 444
Vorlagen erstellen und verwalten
Vorlagen mithilfe des Bedienfensters Elemente auf ein vorhandenes Dokument anwenden
1 ffnen Sie das Dokument, auf das die Vorlage angewendet werden soll. 2 Whlen Sie im Bedienfeld Elemente (Fenster > Elemente) auf der linken Seite die Kategorie Vorlagen 3 Fhren Sie einen der folgenden Schritte aus:
aus.
Ziehen Sie die Vorlage, die Sie anwenden mchten, aus dem Bedienfeld Elemente auf das Dokumentfenster. Whlen Sie die Vorlage aus, die Sie anwenden mchten. Klicken Sie unten im Bedienfeld Elemente auf die
Schaltflche Anwenden. Wenn das Dokument Inhalte enthlt, die keinem Vorlagenbereich automatisch zugeordnet werden knnen, wird das Dialogfeld Inkonsistente Bereichsnamen eingeblendet.
4 Whlen Sie ein Ziel fr den Inhalt, indem Sie das Popupmen Inhalt in neuen Bereich verschieben ffnen und
Whlen Sie einen Bereich in der neuen Vorlage aus, um den vorhandenen Inhalt dorthin zu verlagern. Whlen Sie Nirgends, um den Inhalt aus dem Dokument zu lschen.
5 Wenn Sie smtliche nicht zuweisbaren Inhalte in den ausgewhlten Bereich verschieben mchten, klicken Sie auf
Fr alle verwenden.
6 Klicken Sie auf OK, um die Vorlage anzuwenden, oder klicken Sie auf Abbrechen, wenn Sie die Vorlage dem
Dokument nicht zuweisen mchten. Wichtig: Wenn Sie eine Vorlage auf ein vorhandenes Dokument anwenden, wird der Inhalt des Dokuments durch die Bausteine der Vorlage ersetzt. Erstellen Sie auf jeden Fall immer eine Sicherungskopie des Seiteninhalts, bevor Sie eine Vorlage auf den Inhalt anwenden.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 445
Vorlagen erstellen und verwalten
2 Whlen Sie Modifizieren > Vorlagen > Vorlage auf Seite anwenden.
Wenn das Dokument Inhalte enthlt, die keinem Vorlagenbereich automatisch zugeordnet werden knnen, wird das Dialogfeld Inkonsistente Bereichsnamen eingeblendet.
4 Whlen Sie ein Ziel fr den Inhalt, indem Sie das Popupmen Inhalt in neuen Bereich verschieben ffnen und
Whlen Sie einen Bereich in der neuen Vorlage aus, um den vorhandenen Inhalt dorthin zu verlagern. Whlen Sie Nirgends, um den Inhalt aus dem Dokument zu lschen.
5 Wenn Sie smtliche nicht zuweisbaren Inhalte in den ausgewhlten Bereich verschieben mchten, klicken Sie auf
Fr alle verwenden.
6 Klicken Sie auf OK, um die Vorlage anzuwenden, oder klicken Sie auf Abbrechen, wenn Sie die Vorlage dem
Dokument nicht zuweisen mchten. Wichtig: Wenn Sie eine Vorlage auf ein vorhandenes Dokument anwenden, wird der Inhalt des Dokuments durch die Bausteine der Vorlage ersetzt. Erstellen Sie auf jeden Fall immer eine Sicherungskopie des Seiteninhalts, bevor Sie eine Vorlage auf den Inhalt anwenden.
Das Dokument wird in den Zustand vor dem Anwenden der Vorlage zurckgesetzt.
Das Dokument wird von der Vorlage gelst und smtlicher HTML-Code, der sich auf Vorlagen bezieht, wird gelscht.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 446
Vorlagen erstellen und verwalten
Vorlagenbenutzer knnen in einem wiederholenden Bereich eines Dokuments, das auf einer Vorlage basiert, auch Eigenschaften ndern und Eintrge bearbeiten.
Verwandte Themen
Seiten basierend auf einer vorhandenen Vorlage erstellen auf Seite 67 Dreamweaver-Vorlagen auf Seite 415 Bearbeitbare Bereiche auswhlen auf Seite 428
Vorlageneigenschaften ndern
Wenn der Autor einer Vorlage in einer Vorlage Parameter erstellt, werden fr die auf der Vorlage basierenden Dokumente automatisch diese Parameter sowie deren Anfangswerte bernommen. Der Benutzer der Vorlage kann bearbeitbare Tag-Attribute und andere Vorlagenparameter (beispielsweise die Einstellungen fr optionale Bereiche) aktualisieren.
Verwandte Themen
Vorlagenparameter auf Seite 418 Optionale Bereiche verwenden auf Seite 431 Bearbeitbare Tag-Attribute definieren auf Seite 434
Das Dialogfeld Vorlageneigenschaften wird geffnet und zeigt eine Liste der verfgbaren Eigenschaften an. Das Dialogfeld zeigt optionale Bereiche und bearbeitbare Tag-Attribute an.
3 Whlen Sie in der Liste Name eine Eigenschaft aus.
Der untere Teil des Dialogfelds wird aktualisiert und zeigt nun die Beschriftung der ausgewhlten Eigenschaft und den ihr zugewiesenen Wert an.
4 Bearbeiten Sie den Wert im Feld rechts neben der Eigenschaftenbeschriftung, um die Eigenschaft im Dokument zu
modifizieren. Hinweis: Der Feldname und die aktualisierbaren Werte werden in der Vorlage definiert. Es knnen nur die in der Liste Name aufgefhrten Attribute in dem auf einer Vorlage basierenden Dokument bearbeitet werden.
5 Aktivieren Sie die Option Zulassen, dass verschachtelte Vorlagen diese Eigenschaft steuern, um die bearbeitbare
Eigenschaft an die Dokumente zu bergeben, die auf dieser verschachtelten Vorlage basieren.
Das Dialogfeld Vorlageneigenschaften wird geffnet und zeigt eine Liste der verfgbaren Eigenschaften an. Das Dialogfeld zeigt optionale Bereiche und bearbeitbare Tag-Attribute an.
3 Whlen Sie in der Liste Name eine Eigenschaft aus.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 447
Vorlagen erstellen und verwalten
Das Dialogfeld wird aktualisiert und zeigt nun die Beschriftung der ausgewhlten Eigenschaft und den ihr zugewiesenen Wert an.
4 Aktivieren Sie die Option Anzeigen, um den optionalen Bereich im Dokument anzuzeigen, oder deaktivieren Sie
sie, wenn der optionale Bereich nicht angezeigt werden soll. Hinweis: Der Feldname und die Standardwerte werden in der Vorlage definiert.
5 Aktivieren Sie die Option Zulassen, dass verschachtelte Vorlagen diese Eigenschaft steuern, um die bearbeitbare
Eigenschaft an die Dokumente zu bergeben, die auf dieser verschachtelten Vorlage basieren.
Verwandte Themen
Wiederholende Bereiche erstellen auf Seite 429
Klicken Sie auf das Plussymbol (+), um einen wiederholenden Bereich unterhalb des derzeit ausgewhlten Eintrags
hinzuzufgen.
Klicken Sie auf das Minussymbol (-), um den ausgewhlten Eintrag des wiederholenden Bereichs zu entfernen. Klicken Sie auf die Schaltflche mit dem Abwrtspfeil, um den ausgewhlten Eintrag um eine Position nach unten
zu verschieben.
Klicken Sie auf die Schaltflche mit dem Aufwrtspfeil, um den ausgewhlten Eintrag um eine Position nach oben
zu verschieben. Hinweis: Sie knnen auch Modifizieren > Vorlagen whlen und unten im Untermen eine der Optionen fr wiederholende Eintrge auswhlen. Mit diesem Men knnen Sie einen neuen wiederholenden Eintrag einfgen oder die Position des ausgewhlten Eintrags ndern.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 448
Vorlagen erstellen und verwalten
Whlen Sie Bearbeiten > Wiederholende Eintrge > Wiederholenden Eintrag ausschneiden, um einen
wiederholenden Eintrag auszuschneiden.
Whlen Sie Bearbeiten > Wiederholende Eintrge > Wiederholenden Eintrag kopieren, um einen
wiederholenden Eintrag zu kopieren.
Whlen Sie Bearbeiten > Wiederholende Eintrge > Wiederholenden Eintrag lschen, um einen
wiederholenden Eintrag zu entfernen.
Vorlagensyntax
Allgemeine Syntaxregeln
Dreamweaver verwendet HTML-Kommentar-Tags zur Festlegung von Bereichen in Vorlagen und vorlagenbasierten Dokumenten. Auf Vorlagen basierende Dokumente sind daher weiterhin gltige HTML-Dateien. Wenn Sie ein Vorlagenobjekt einfgen, werden Vorlagen-Tags in den Code eingefgt. Die allgemeinen Syntaxregeln sind wie folgt:
Leere Bereiche knnen durch eine beliebige Anzahl von Leerstellen, Tabulatorzeichen oder Neue-Zeile-Zeichen
ersetzt werden. Leere Bereiche mssen verwendet werden; nur ganz am Anfang oder Ende eines Kommentars sind sie nicht erforderlich.
Attribute knnen in beliebiger Reihenfolge angegeben werden. Bei Vorlagenparametern knnen Sie beispielsweise
den Typ vor dem Namen angeben.
Im Namen von Kommentaren und Attributen wird zwischen Gro- und Kleinschreibung unterschieden. Alle Attribute sind in Anfhrungszeichen zu setzen. Hierbei knnen normale Anfhrungszeichen oder
Hochkommas verwendet werden.
Vorlagen-Tags
Dreamweaver verwendet die folgenden Vorlagen-Tags:
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 449
Vorlagen erstellen und verwalten
<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!-<!--
TemplateBeginEditable name="..." --> TemplateEndEditable --> TemplateParam name="..." type="..." value="..." --> TemplateBeginRepeat name="..." --> TemplateEndRepeat --> TemplateBeginIf cond="..." --> TemplateEndIf --> TemplateBeginPassthroughIf cond="..." --> TemplateEndPassthroughIf --> TemplateBeginMultipleIf --> TemplateEndMultipleIf --> TemplateBeginPassthroughMultipleIf --> TemplateEndPassthroughMultipleIf --> TemplateBeginIfClause cond="..." --> TemplateEndIfClause --> TemplateBeginPassthroughIfClause cond="..." --> TemplateEndPassthroughIfClause --> TemplateExpr expr="..." --> (equivalent to @@...@@) TemplatePassthroughExpr expr="..." --> TemplateInfo codeOutsideHTMLIsLocked="..." -->
Instanz-Tags
Dreamweaver verwendet die folgenden Instanz-Tags:
<!-<!-<!-<!-<!-<!-<!-<!-<!-InstanceBegin template="..." codeOutsideHTMLIsLocked="..." --> InstanceEnd --> InstanceBeginEditable name="..." --> InstanceEndEditable --> InstanceParam name="..." type="..." value="..." passthrough="..." --> InstanceBeginRepeat name="..." --> InstanceEndRepeat --> InstanceBeginRepeatEntry --> InstanceEndRepeatEntry -->
Vorlagensyntax berprfen
Dreamweaver berprft die Vorlagensyntax, wenn Sie eine Vorlage speichern. Sie knnen die Vorlagensyntax jedoch auch manuell, vor dem Speichern der Vorlage, berprfen. Wenn Sie beispielsweise einen Vorlagenparameter oder Ausdruck in der Codeansicht manuell hinzufgen, knnen Sie prfen, ob der Code die korrekte Syntax verwendet.
1 ffnen Sie das Dokument, das Sie berprfen mchten, im Dokumentfenster. 2 Whlen Sie Modifizieren > Vorlagen > Vorlagensyntax berprfen.
Eine Fehlermeldung wird eingeblendet, wenn die Syntax nicht korrekt ist. Die Fehlermeldung enthlt eine Beschreibung des Fehlers und einen Verweis auf die spezifische Zeile im HTML-Code, in der sich der Fehler befindet.
Verwandte Themen
Vorlagen und vorlagenbasierte Dokumente erkennen auf Seite 421 Vorlagenausdrcke auf Seite 418
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 450
Vorlagen erstellen und verwalten
Voreinstellungen fr Vorlagenbereiche
Code-Farbeinstellungen fr Vorlagen anpassen
Mit den Farbeinstellungen knnen Sie die Darstellung des Texts, der Hintergrundfarbe und der Stilattribute des Texts in der Codeansicht whlen. Sie knnen Ihr eigenes Farbschema festlegen, sodass Sie beim Anzeigen eines Dokuments in der Codeansicht die einzelnen Vorlagenbereiche auf den ersten Blick unterscheiden knnen.
1 Whlen Sie Bearbeiten > Voreinstellungen (Windows) bzw. Dreamweaver > Voreinstellungen
(Macintosh).
2 Whlen Sie links in der Kategorieliste die Option Farbe fr Code. 3 Whlen Sie aus der Liste den Dokumenttyp HTML und klicken Sie auf die Schaltflche Farbschema bearbeiten. 4 Whlen Sie aus der Liste Stile fr die Option Template tags aus. 5 Fhren Sie folgende Schritte aus, um Attribute fr die Farbe, die Hintergrundfarbe und den Stil von Text in der
Codeansicht festzulegen:
Wenn Sie die Textfarbe ndern mchten, geben Sie im Feld Textfarbe den Hexadezimalwert der Farbe ein, die
Sie dem ausgewhlten Text zuweisen mchten, oder whlen Sie die gewnschte Textfarbe mit dem Farbwhler aus. Fhren Sie dasselbe im Feld Hintergrund durch, wenn Sie die Hintergrundfarbe des ausgewhlten Texts ndern bzw. eine Hintergrundfarbe hinzufgen mchten.
Um Schriftauszeichnungen fr den ausgewhlten Code festzulegen, klicken Sie auf die Schaltflchen B (Fett), I
(Kursiv) oder U (Unterstrichen).
6 Klicken Sie auf OK.
Hinweis: Um globale nderungen vorzunehmen, knnen Sie die Quelldatei bearbeiten, in der Ihre Voreinstellungen gespeichert werden. Unter Windows XP befindet sich diese unter C:\Dokumente und Einstellungen\%Benutzername%\Anwendungsdaten\Adobe\Dreamweaver 9\Configuration\CodeColoring\Colors.xml . Unter Windows Vista befindet sich diese unter C:\Benutzer\%Benutzername%\Application Data\Adobe\Dreamweaver 9\Configuration\CodeColoring\Colors.xml.
Verwandte Themen
Vorlagenbasierte Dokumente in der Entwurfsansicht erkennen auf Seite 422 Vorlagen in der Entwurfsansicht erkennen auf Seite 421
(Macintosh).
2 Whlen Sie in der Liste links die Kategorie Markierung. 3 Klicken Sie in das Farbfeld fr Bearbeitbare Bereiche, Verschachtelt, editierbar oder Gesperrte Bereiche und
whlen Sie mit dem Farbwhler eine Markierungsfarbe aus (oder geben Sie den Hexadezimalwert der Markierungsfarbe in das Feld ein).
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 451
Vorlagen erstellen und verwalten
Weitere Informationen zur Verwendung des Farbwhlers finden Sie unter Farbwhler verwenden auf Seite 229.
4 Optional: Wiederholen Sie diesen Vorgang bei Bedarf fr andere Arten von Vorlagenbereichen. 5 Klicken Sie auf das Kontrollkstchen in der Spalte Anzeigen, um die Anzeige von Farben im Dokumentfenster
zu aktivieren bzw. zu deaktivieren. Hinweis: Fr verschachtelte Bereiche in der Spalte Anzeigen kein Kontrollkstchen verfgbar, da deren Anzeige ber die Option Bearbeitbare Bereiche festgelegt wird.
6 Klicken Sie auf OK.
Markierungsfarben werden nur im Dokumentfenster angezeigt, wenn Ansicht > Visuelle Hilfsmittel > Unsichtbare Elemente markiert ist und in den Markierungseinstellungen die entsprechenden Optionen aktiviert sind. Hinweis: Wenn unsichtbare Elemente angezeigt werden, Markierungsfarben jedoch nicht, whlen Sie Bearbeiten > Voreinstellungen (Windows) bzw. Dreamweaver > Voreinstellungen (Macintosh) und anschlieend die Kategorie Hervorheben aus. Vergewissern Sie sich, dass in der Spalte Anzeigen das Kontrollkstchen neben der zutreffenden Markierungsfarbe aktiviert ist. Achten Sie zudem darauf, dass die gewhlte Farbe gegenber der Hintergrundfarbe der Seite sichtbar ist.
ENTWURF
Letzte Aktualisierung 19.3.2010
452
Spry-Framework
Das Spry-Framework ist eine JavaScript-Bibliothek, mit der Webdesigner Webseiten erstellen knnen, die eine hherwertige Benutzererfahrung bieten. Mit Spry knnen Sie HTML, CSS und einen geringen Anteil an JavaScript XML-Daten in Ihre HTML-Dokumente integrieren, Widgets wie z. B. Akkordeons und Menleisten erstellen und Seitenelemente mit verschiedenen Effekten anreichern. Das Spry-Framework bietet ein benutzerfreundliches Markup, das auch fr Anwender mit grundlegenden Kenntnissen in HTML, CSS und JavaScript geeignet ist. Es ist allerdings primr fr Webdesign-Profis bzw. erfahrene Amateur-Webdesigner gedacht. Als vollstndiges Webanwendungs-Framework fr die Webentwicklung auf Unternehmensebene ist es nicht geeignet (kann aber zusammen mit anderen auf Unternehmensebene erstellten Seiten verwendet werden). Weitere Informationen zum Spry-Framework finden Sie unter www.adobe.com/go/learn_dw_spryframework_de.
Verwandte Themen
Spry-Entwicklerhandbuch
Das Spry-Framework untersttzt einen Satz wiederverwendbarer, in standardmigem HTML, CSS und JavaScript geschriebener Widgets. Diese Widgets lassen sich kinderleicht einfgen (der Code ist einfaches HTML und CSS) und mit eigenem Stil anpassen. Die Verhalten im Framework beinhalten Funktionen, mit denen Benutzer Seiteninhalte einbzw. ausblenden, das Erscheinungsbild (wie die Farbe) ndern oder mit Mens interagieren knnen und vieles mehr.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 453
Spry-Seiten visuell erstellen
Alle Widgets im Spry-Framework sind mit eindeutigen CSS- und JavaScript-Dateien verknpft. Die CSS-Datei enthlt alles Notwendige fr den Widget-Stil, whrend die JavaScript-Datei ihre Funktionalitt bestimmt. Wenn Sie ein Widget ber die Dreamweaver Benutzeroberflche einfgen, verknpft Dreamweaver diese Dateien automatisch mit Ihrer Seite. Ihr Widget erhlt dadurch Funktionalitt und Stil. Die mit einem Widget verknpften CSS- und JavaScript-Dateien werden nach dem Widget benannt. So wissen Sie immer, welche Dateien zu welchem Widget gehren (So heien die mit dem Akkordeon-Widget verknpften Dateien folgerichtig SpryAccordion.css und SpryAccordion.js). Wenn Sie ein Widget in eine gespeicherte Seite einfgen, erstellt Dreamweaver einen Ordner mit Namen SpryAssets auf Ihrer Site, in dem die dazugehrigen JavaScript- und CSS-Dateien gespeichert werden.
Verwandte Themen
Grundlegendes zu Cascading Stylesheets auf Seite 132
Spry-Widget einfgen
Whlen Sie Einfgen > Spry und dann das einzufgende Widget aus.
Bei diesem Vorgang fgt Dreamweaver beim Speichern der Seite automatisch die bentigten Spry JavaScript- und CSS-Dateien hinzu. Hinweis: Sie knnen Spry-Widgets auch ber die Kategorie Spry im Bedienfeld Einfgen hinzufgen.
Spry-Widget auswhlen
1 Zeigen Sie mit dem Mauszeiger auf das Widget. Daraufhin wird sein blau gestrichelter Rahmen angezeigt. 2 Klicken Sie oben links auf das Widget-Register.
Spry-Widget bearbeiten
Whlen Sie das zu bearbeitende Widget aus und nehmen Sie Ihre nderungen im Eigenschafteninspektor
(Fenster > Eigenschaften) vor. Genaue Informationen zum Bearbeiten bestimmter Widgets finden Sie im jeweiligen Abschnitt.
Ihren Vorstellungen. Genaue Informationen zum Stil bestimmter Widgets finden Sie im jeweiligen Abschnitt.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 454
Spry-Seiten visuell erstellen
Sie knnen das Format eines Widgets auch anpassen, indem Sie ihn ber das Bedienfeld CSS bearbeiten, genau so, wie Sie das fr andere Seitenelemente tun wrden.
Weitere Widgets
Neben den mit Dreamweaver installierten Spry-Widgets sind viele weitere Web-Widgets verfgbar. Adobe Exchange bietet Web-Widgets, die von anderen kreativen Profis entwickelt wurden.
Whlen Sie im Men Dreamweaver erweitern
Ein Video des Dreamweaver-Entwicklungsteams mit einem berblick ber die Verwendung von Web-Widgets finden Sie unter www.adobe.com/go/dw10widgets_de.
Spry aus.
4 Geben Sie den Pfad des Ordners an, in dem Sie die Spry-Elemente speichern mchten, und klicken Sie dann auf
OK. Sie knnen diesen Ordner auch mithilfe des Ordnersymbols suchen.
Verwandte Themen
Dreamweaver-Sites einrichten auf Seite 39
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 455
Spry-Seiten visuell erstellen
Das Standard-HTML fr das Akkordeon-Widget besteht aus einem ueren div-Tag mit allen Paletten, einem divTag fr jede Palette sowie einem Header-div- und einem Inhalts-div innerhalb des Tags fr jede Palette. Ein Akkordeon-Widget kann eine beliebige Anzahl an einzelnen Paletten enthalten. Der HTML-Code fr das AkkordeonWidget enthlt auerdem script-Tags im Kopf des Dokuments und unterhalb des HTML-Markups fr das Akkordeon. Eine ausfhrliche Erluterung der Funktionsweise von Akkordeon-Widgets, einschlielich der vollstndigen CodeStruktur, finden Sie unter www.adobe.com/go/learn_dw_spryaccordion_de. Ein Tutorial zum Verwenden des Akkordeon-Widgets finden Sie unter www.adobe.com/go/vid0167_de.
Hinweis: Sie knnen Akkordeon-Widgets auch ber die Kategorie Spry im Bedienfeld Einfgen hinzufgen.
Paletten (+).
3 Optional: ndern Sie den Namen, indem Sie in der Entwurfsansicht den Titel auswhlen und bearbeiten.
lschenden Palette aus und klicken Sie auf das Minussymbol (-).
Deuten Sie mit dem Mauszeiger auf die Titelleiste der jeweiligen Palette, um es in der Entwurfsansicht zu ffnen.
Klicken Sie dann auf das Augensymbol, das rechts im Register angezeigt wird.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 456
Spry-Seiten visuell erstellen
Whlen Sie ein Akkordeon-Widget im Dokumentfenster aus und klicken Sie dann im Bedienfeldmen des
Eigenschafteninspektors (Fenster > Eigenschaften) auf den Namen der zu bearbeitenden Palette.
Akkordeonpalette aus.
3 Klicken Sie auf den Rechts- bzw. Linkspfeil, um die Palette nach oben oder unten zu verschieben.
Akkordeon-Widget anpassen
Sie knnen mit dem Eigenschafteninspektor zwar einfache nderungen an einem Akkordeon-Widget vornehmen, benutzerdefinierte Stilaufgaben werden allerdings nicht untersttzt. Der Stil des Akkordeons lsst sich ber die CSSRegeln fr das Akkordeon-Widget individuell anpassen. Eine Kurzanleitung zum ndern der Farben des Akkordeon-Widgets finden Sie im Artikel von David Powers Quick guide to styling Spry tabbed panels, accordions, and collapsible panels (Kurzanleitung zum ndern des Stils von SpryWidgets wie Paletten mit Registerkarten, Akkordeons und reduzierbare Paletten). Eine erweiterte Liste mit Stilaufgaben finden Sie unter www.adobe.com/go/learn_dw_spryaccordion_custom_de. Alle CSS-Regeln der folgenden Themen beziehen sich auf die Standardregeln in der Datei SpryAccordion.css. Jedes Mal, wenn Sie in Akkordeon-Widget erstellen, speichert Dreamweaver die Datei SpryAccordion.css im Ordner SpryAssets Ihrer Site. Diese Datei enthlt auerdem kommentierte Informationen zu verschiedenen Stilen fr das jeweilige Widget und bietet damit eine ntzliche Informationsquelle. Sie knnen die Regeln fr das Akkordeon-Widget entweder schnell und einfach in der CSS-Datei oder mit dem Bedienfeld CSS-Stile bearbeiten. Dieses Bedienfeld vereinfacht, speziell bei Verwendung des Modus Aktuell, das Auffinden der CSS-Klassen, die den verschiedenen Bereichen des Widgets zugewiesenen sind.
Verwandte Themen
Bedienfeld CSS-Stile im Modus Aktuell auf Seite 137
Textstil fr Akkordeon-Widgets
Sie knnen den Textstil eines Akkordeon-Widgets bearbeiten, indem Sie Eigenschaften fr den gesamten WidgetContainer bzw. die der Widget-Komponenten einzeln konfigurieren.
Um den Textstil eines Akkordeon-Widgets zu bearbeiten, suchen Sie in folgender Tabelle die richtige CSS-Regel
Text im gesamten Akkordeon (inklusive Tittelleiste und Inhaltsfenster) Nur der Text in der Titelleiste der Akkordeonpalette Nur der Text im Inhaltsfenster der Akkordeonpalette
.AccordionPanelTab
.AccordionPanelContent
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 457
Spry-Seiten visuell erstellen
Tabelle die richtige CSS-Regel und fgen Sie Ihre eigenen Eigenschaften und Werte fr die Hintergrundfarben hinzu:
Zu ndernder Widget-Bereich Dazugehrige CSS-Regel Beispiel fr hinzuzufgende/zu ndernde Eigenschaften/Werte background-color: #CCCCCC (dies ist der Standardwert) background-color: #CCCCCC
Hintergrundfarbe der Titelleisten der Akkordeonpaletten Hintergrundfarbe der Inhaltsfenster des Akkordeons Hintergrundfarbe der geffneten Akkordeonpalette
.AccordionPanelTab
.AccordionPanelContent
.AccordionPanelOpen .AccordionPanelTab
background-color: #EEEEEE (dies ist der Standardwert) color: #555555 (dies ist der Standardwert) color: #555555 (dies ist der Standardwert)
Hintergrundfarbe der Hover-Palettenregister .AccordionPanelTabHover Hintergrundfarbe des geffneten HoverPalettenregisters .AccordionPanelOpen .AccordionPanelTabHover
Eigenschaften fr das Haupt-Containerlement des Akkordeon-Widgets. Sie knnen die Regel auch suchen, indem Sie das Akkordeon-Widget auswhlen und das Bedienfeld CSS-Stile (Fenster > CSS-Stile) anzeigen. Dazu muss sich das Bedienfeld im Modus Aktuell befinden.
2 Fgen Sie eine Breiteneigenschaft und einen Wert zur Regel hinzu, wie z. B. width: 300px;.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 458
Spry-Seiten visuell erstellen
Menleisten-Widget (besteht aus den Tags <ul>, <li> und <a>) A: Das Menelement hat ein Untermen B: Das Untermenelement hat ein weiteres Untermen
Das HTML fr das Menleisten-Widget besteht aus einem ueren ul-Tag mit je einem li-Tag fr die Menelemente der obersten Ebene. Diese Menelemente (li-Tags) verfgen ihrerseits ber ul- und li-Tags zur Definition ihrer jeweiligen Untermens. Diese wiederum knnen ebenfalls Untermens enthalten. Mens und Untermens der obersten Ebene knnen eine beliebige Anzahl an Untermens aufweisen. Eine ausfhrliche Erluterung der Funktionsweise von Menleisten-Widgets, einschlielich der vollstndigen CodeStruktur, finden Sie unter www.adobe.com/go/learn_dw_sprymenubar_de. Ein Tutorial zum Erstellen von Spry-Menleisten finden Sie unter www.adobe.com/go/vid0168_de.
Verwandte Themen
Tutorial zu Spry-Menleisten
Hinweis: Sie knnen Menleisten-Widgets auch ber die Kategorie Spry im Bedienfeld Einfgen hinzufgen. Hinweis: Das Spry-Menleisten-Widget verwendet DHTML-Ebenen zur Anzeige von HTML-Bereichen ber anderen Regionen. Bei Seiten mit in Adobe Flash erstellten Inhalten knnen Probleme auftreten, da SWF-Dateien immer ber allen anderen DHTML-Ebenen und damit mglicherweise auch ber den Untermens angezeigt werden. Sie knnen dieses Problem umgehen, indem Sie als Parameter der SWF-Datei wmode="transparent" angeben. Whlen Sie dazu einfach die SWF-Datei im Dokumentfenster aus und setzen Sie im Eigenschafteninspektor die Option wmode auf transparent. Weitere Informationen finden Sie unter www.adobe.com/go/15523_de.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 459
Spry-Seiten visuell erstellen
hinzufgen mchten.
3 Klicken Sie auf das Plussymbol (+) ber der zweiten Spalte. 4 Optional: Benennen Sie das neue Untermenelement um, indem Sie den Standardtext im Dokumentfenster bzw.
dem Textfeld des Eigenschafteninspektors ndern. Um einem Untermen ein Untermen hinzuzufgen, whlen Sie den Namen aus und klicken im Eigenschafteninspektor auf das Plussymbol (+) ber der dritten Spalte. Hinweis: Dreamweaver untersttzt in der Entwurfsansicht lediglich zwei Ebenen von Untermens. In der Codeansicht knnen Sie allerdings so viele Untermens hinzufgen, wie Sie mchten. Elemente aus Haupt- oder Untermens lschen
1 Whlen Sie ein Menleisten-Widget im Dokumentfenster aus. 2 Whlen Sie im Eigenschafteninspektor den Namen des zu lschenden Haupt- oder Untermenelements aus und
Menelements aus.
3 Klicken Sie auf den Nach-oben- bzw. Nach-unten-Pfeil, um das Men nach oben oder unten zu verschieben.
Menelement verlinken
1 Whlen Sie ein Menleisten-Widget im Dokumentfenster aus. 2 Whlen Sie im Eigenschafteninspektor (Fenster > Eigenschaften) den Namen des Menelements aus, das Sie
verlinken mchten.
3 Geben Sie den Link in das entsprechende Textfeld ein oder klicken Sie auf das Ordnersymbol, um eine Datei
auszuwhlen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 460
Spry-Seiten visuell erstellen
Frame oder Frameset, wird die Seite innerhalb dieses Frames geladen.
_parent ldt das verlinkte Dokument in das bergeordnete Frameset des Dokuments. _top ldt die verlinkte Seite in das oberste Fenster des Framesets.
Stile deaktivieren
Sie knnen die Stilfunktion eines Menleisten-Widgets deaktivieren, damit seine HTML-Struktur in der Entwurfsansicht besser zu sehen ist. In diesem Fall werden Menleistenelemente auf der Seite als Liste mit Aufzhlungspunkten und nicht als Menelemente mit Stilen angezeigt.
1 Whlen Sie ein Menleisten-Widget im Dokumentfenster aus. 2 Klicken Sie im Eigenschafteninspektor (Fenster > Eigenschaften) auf Stile deaktivieren.
Seite. Damit stellen Sie sicher, dass fr Ihre Seite die korrekte CSS-Datei fr eine vertikale Menleiste eingefgt wird. Hinweis: Ihre Site verfgt bereits ber ein vertikales Menleisten-Widget, weshalb Sie kein weiteres mehr einfgen mssen. So mssen Sie lediglich die Datei SpryMenuBarVertical.css mit der Seite verknpfen. Klicken Sie dazu im Bedienfeld CSS-Stile (Fenster > CSS-Stile) auf die Schaltflche Stylesheet anfgen.
3 Lschen Sie die vertikale Menleiste. 4 Suchen Sie in der Codeansicht (Ansicht > Code) die Klasse MenuBarHorizontal und ndern Sie sie in
MenuBarVertical. Die Klasse MenuBarHorizontal ist im Container ul-Tag fr die Menleiste (<ul
id="MenuBar1" class="MenuBarHorizontal">) definiert.
6 Entfernen Sie die Vorausladeoption imgDown (nebst Komma) aus dem Konstruktor:
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 461
Spry-Seiten visuell erstellen
Hinweis: Wenn Sie von einer vertikalen in eine horizontale Menleiste konvertieren, fgen Sie die Vorausladeoption imgDown nebst Komma hinzu.
7 Optional: Wenn Ihre Seite keine weiteren horizontalen Menleisten-Widgets enthlt, lschen Sie den Link zur
Menleisten-Widget anpassen
Sie knnen mit dem Eigenschafteninspektor zwar einfache nderungen an einem Menleisten-Widget vornehmen, benutzerdefinierte Stilaufgaben werden allerdings nicht untersttzt. Sie knnen die CSS-Regeln fr MenleistenWidgets ndern und ihren Stil individuell anpassen. Eine erweiterte Liste mit Stilaufgaben finden Sie unter www.adobe.com/go/learn_dw_sprymenubar_custom_de. Ein Tutorial zum Durchfhren der hufigsten Stilaufgaben finden Sie im Artikel von David Powers Customizing a Spry Menu Bar (Spry-Menleiste anpassen). Weitere Webressourcen zum Anpassen des Menleiste-Widgets finden Sie im Artikel von Ryan Grabenstein Customizing Spry Menu Bars in Dreamweaver (Spry-Menleisten in Dreamweaver anpassen). Alle CSS-Regeln in den nachfolgenden Themen beziehen sich auf die Standardregeln der Datei SpryMenuBarHorizontal.css bzw. SpryMenuBarVertical.css (je nach Auswahl). Jedes Mal, wenn Sie ein SpryMenleisten-Widget erstellen, speichert Dreamweaver diese CSS-Dateien im Ordner SpryAssets Ihrer Site. Diese Dateien enthalten auerdem ntzliche kommentierte Informationen zu verschiedenen Stilen fr das jeweilige Widget. Sie knnen die Regeln fr das Menleisten-Widget entweder schnell und einfach in der CSS-Datei oder mit dem Bedienfeld CSS-Stile bearbeiten. Dieses Bedienfeld vereinfacht, speziell bei Verwendung des Modus Aktuell, das Auffinden der CSS-Klassen, die den verschiedenen Bereichen des Widgets zugewiesenen sind.
Verwandte Themen
Bedienfeld CSS-Stile im Modus Aktuell auf Seite 137
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 462
Spry-Seiten visuell erstellen
Zu ndernder Stil
CSS-Regel fr eine vertikale bzw. horizontale Menleiste ul.MenuBarVertical a:focus, ul.MenuBarHorizontal a:focus ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemHover ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
Textfarbe im Fokus
Farbe des Menleistenelements beim Zeigen mit der Maus Farbe des Untermenelements beim Zeigen mit der Maus
color: #FFF;
color: #FFF;
Hintergrundfarbe im Fokus
background-color: #33C;
Farbe des Menleistenelements beim Zeigen ul.MenuBarVertical a.MenuBarItemHover, mit der Maus ul.MenuBarHorizontal a.MenuBarItemHover Farbe des Untermenelements beim Zeigen mit der Maus ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-color: #33C;
background-color: #33C;
feste Breite zu entfernen, und fgen Sie der Regel die Eigenschaft/den Wert white-space: nowrap; hinzu).
3 Suchen Sie nach der Regel ul.MenuBarVertical ul bzw. ul.MenuBarHorizontal ul: 4 ndern Sie die Eigenschaft Breite in den gewnschten Wert (oder ndern Sie die Eigenschaft in auto, um eine
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 463
Spry-Seiten visuell erstellen
Untermens positionieren
Die Position der Untermens in der Spry-Menleiste wird mittels der Randoption in den ul-Tags der Untermens gesteuert.
1 Suchen Sie nach der Regel ul.MenuBarVertical ul bzw. ul.MenuBarHorizontal ul: 2 ndern Sie die Standardwerte fr margin: -5% 0 0 95%; in die gewnschten Werte.
A: Erweitert B: Reduziert
Der HTML-Code fr Widgets vom Typ Reduzierbare Palette besteht aus einem ueren div-Tag mit dem div-Tag des Inhalts und dem div-Tag des Titelcontainers. Es enthlt auerdem Skript-Tags im Kopf des Dokuments und unterhalb des HTML-Markups der reduzierbaren Palette. Eine ausfhrliche Erluterung der Funktionsweise von Widgets vom Typ Reduzierbare Palette, einschlielich der vollstndigen Code-Struktur, finden Sie unter www.adobe.com/go/learn_dw_sprycollapsiblepanel_de.
Hinweis: Sie knnen Widgets vom Typ Reduzierbare Palette auch ber die Kategorie Spry im Bedienfeld Einfgen hinzufgen.
Deuten Sie mit dem Mauszeiger auf den Titel der Palette, um sie in der Entwurfsansicht zu ffnen. Klicken Sie dann
auf das Augensymbol, das rechts im Titel angezeigt wird.
Whlen Sie ein Widget vom Typ Reduzierbare Palette im Dokumentfenster aus und dann im Popupmen
Anzeige des Eigenschafteninspektors (Fenster > Eigenschaften) die Option Geffnet bzw. Geschlossen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 464
Spry-Seiten visuell erstellen
aktivieren.
Verwandte Themen
Bedienfeld CSS-Stile im Modus Aktuell auf Seite 137
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 465
Spry-Seiten visuell erstellen
Zu ndernder Stil
Dazugehrige CSS-Regel
Beispiel fr hinzuzufgende/zu ndernde Eigenschaften/Werte font: Arial; font-size:medium; font: bold 0.7em sans-serif (dies ist der Standardwert) font: Arial; font-size:medium;
Text in der gesamten reduzierbaren Palette Nur Text im Palettenregister Nur Text im Inhaltsfenster
nach der richtigen CSS-Regel und fgen Sie Ihre eigenen Eigenschaften und Werte fr die Hintergrundfarben hinzu:
Zu ndernde Farbe Dazugehrige CSS-Regel Beispiel fr hinzuzufgende/zu ndernde Eigenschaften/Werte background-color: #DDD (dies ist der Standardwert) background-color: #DDD; background-color: #EEE (dies ist der Standardwert) background-color: #CCC (dies ist der Standardwert)
.CollapsiblePanelTab
Hintergrundfarbe des Inhaltsfensters Hintergrundfarbe des Registers bei geffneter Palette Hintergrundfarbe des geffneten Palettenregisters beim Zeigen mit der Maus
die Eigenschaften fr das Haupt-Containerelement des Widgets Reduzierbare Palette. Sie knnen die Regel auch suchen, indem Sie das Widget auswhlen und das Bedienfeld CSS-Stile (Fenster > CSS-Stile) anzeigen. Dazu muss sich das Bedienfeld im Modus Aktuell befinden.
2 Fgen Sie eine Breiteneigenschaft und einen Wert zur Regel hinzu, wie z. B. width: 300px;.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 466
Spry-Seiten visuell erstellen
Der HTML-Code fr dieses Widget besteht aus einem ueren div-Tag mit allen Paletten, einer Liste der Register, einem div-Tag fr die Inhaltsfenster sowie einem div-Tag fr jedes einzelne Inhaltsfenster. Der HTML-Code fr dieses Widget enthlt auerdem Skript-Tags im Kopf des Dokuments und unterhalb des HTML-Markups des Widgets. Eine ausfhrliche Erluterung zur Funktionsweise von Widgets vom Typ Paletten mit Registerkarten, einschlielich der vollstndigen Code-Struktur, finden Sie unter www.adobe.com/go/learn_dw_sprytabbedpanels_de.
Hinweis: Sie knnen Widgets vom Typ Paletten mit Registerkarten auch ber die Kategorie Spry im Bedienfeld Einfgen hinzufgen.
Paletten (+).
3 Optional: ndern Sie den Registernamen, indem Sie ihn in der Entwurfsansicht auswhlen und bearbeiten.
lschenden Palette aus und klicken Sie auf das Minussymbol (-).
Deuten Sie mit dem Mauszeiger auf das Register der jeweiligen Palette, um es in der Entwurfsansicht zu ffnen.
Klicken Sie dann auf das Augensymbol, das rechts im Register angezeigt wird.
Whlen Sie ein Widget vom Typ Paletten mit Registerkarten im Dokumentfenster aus und klicken Sie dann im
Bedienfeldmen des Eigenschafteninspektors (Fenster > Eigenschaften) auf den Namen der zu bearbeitenden Palette.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 467
Spry-Seiten visuell erstellen
Verwandte Themen
Bedienfeld CSS-Stile im Modus Aktuell auf Seite 137
Text im gesamten Widget Nur Text in Palettenregistern Nur Text in den Inhaltsfenstern
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 468
Spry-Seiten visuell erstellen
der richtigen CSS-Regel und fgen Sie Ihre eigenen Eigenschaften und Werte fr die Hintergrundfarben hinzu:
Zu ndernde Farbe Dazugehrige CSS-Regel Beispiel fr hinzuzufgende/zu ndernde Eigenschaften/Werte background-color: #DDD (dies ist der Standardwert) background-color: #EEE (dies ist der Standardwert) background-color: #EEE (dies ist der Standardwert) background-color: #CCC (dies ist der Standardwert)
Eigenschaften fr das Haupt-Containerelement des Widgets Paletten mit Registerkarten. Sie knnen die Regel auch suchen, indem Sie das Widget auswhlen und das Bedienfeld CSS-Stile (Fenster > CSS-Stile) anzeigen. Dazu muss sich das Bedienfeld im Modus Aktuell befinden.
2 Fgen Sie eine Breiteneigenschaft und einen Wert zur Regel hinzu, wie z. B. width: 300px;.
QuickInfo-Container. Diese Komponente enthlt die Meldung oder die Inhalte, die angezeigt werden sollen, wenn
der Benutzer die QuickInfo aktiviert.
Seitenelemente, mit denen die QuickInfo aktiviert wird. Konstruktor-Skript. Dabei handelt es sich um JavaScript-Code, mit dem Spry angewiesen wird, die QuickInfoFunktionalitt zu erstellen. Wenn Sie ein QuickInfo-Widget einfgen, wird in Dreamweaver mithilfe von div-Tags ein QuickInfo-Container angelegt und das Auslserelement (das die QuickInfo aktivierende Seitenelement) in span-Tags eingeschlossen. Diese Tags werden in Dreamweaver standardmig verwendet. Als Tags fr die QuickInfo und den Auslser knnen jedoch beliebige Tags verwendet werden, solange sie sich innerhalb des body-Tags der Seite befinden.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 469
Spry-Seiten visuell erstellen
Eine geffnete QuickInfo wird geschlossen, bevor die nchste QuickInfo geffnet wird. Eine QuickInfo wird angezeigt, solange der Benutzer den Mauszeiger ber den Auslsebereich hlt. Es bestehen keine Einschrnkungen hinsichtlich der Art der Tags, die als Auslser oder fr QuickInfo-Inhalte
verwendet werden knnen. (Es empfiehlt sich jedoch immer die Verwendung von Codeblockelementen, um mgliche Darstellungsprobleme mit unterschiedlichen Browsern zu vermeiden.)
Standardmig wird die QuickInfo je 20 Pixel rechts und unterhalb des Mauszeigers angezeigt. ber die Optionen
fr den horizontalen und vertikalen Offset im Eigenschafteninspektor knnen Sie eine benutzerdefinierte Einblendposition festlegen.
Derzeit besteht keine Mglichkeit, eine QuickInfo anzuzeigen, wenn eine Seite im Browser geladen wird.
Das QuickInfo-Widget erfordert sehr wenig CSS-Code. Spry verwendet JavaScript zum Anzeigen, Ausblenden und Positionieren der QuickInfo. Alle weiteren Formatierungen der QuickInfo knnen je nach Bedarf mit herkmmlichen CSS-Techniken umgesetzt werden. Mit der einzigen Regel in der CSS-Standarddatei wird ein Problem mit Internet Explorer 6 umgangen, damit QuickInfos ber Formularelementen oder Flash-Objekten angezeigt werden. Eine ausfhrliche Erluterung zur Funktionsweise von Spry-QuickInfo-Widgets, einschlielich der vollstndigen Code-Struktur, finden Sie unter www.adobe.com/go/learn_dw_sprytooltip_de. Ein Video-Tutorial zur Verwendung von Spry-QuickInfo-Widgets finden Sie unter www.adobe.com/go/lrvid4046_dw_de.
QuickInfo-Widgets einfgen
Whlen Sie Einfgen > Spry > Spry-QuickInfo aus.
Hinweis: Sie knnen QuickInfo-Widgets auch ber die Kategorie Spry im Bedienfeld Einfgen hinzufgen. Dadurch werden ein neues QuickInfo-Widget mit einem Container fr den QuickInfo-Inhalt sowie ein Platzhaltersatz als QuickInfo-Auslser eingefgt. Sie knnen zudem ein bereits auf der Seite vorhandenes Element (z. B. ein Bild) markieren und dann die QuickInfo einfgen. In diesem Fall fungiert das markierte Element als neuer QuickInfo-Auslser. Sie mssen ein vollstndiges Tag-Element markieren (z. B. ein img-Tag oder ein p-Tag), damit diesem in Dreamweaver gegebenenfalls eine ID zugewiesen werden kann, falls noch keine vorhanden ist.
ein Platzhaltersatz eingefgt, der in span-Tags eingeschlossen ist. Es kann jedoch jedes Seitenelement mit einer eindeutigen ID verwendet werden.
Dem Mauszeiger folgen Wenn dieses Kontrollkstchen aktiviert ist, folgt die QuickInfo der Bewegung des Mauszeigers, solange dieser sich ber dem Auslserelement befindet.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 470
Spry-Seiten visuell erstellen
Beim Herausbewegen des Mauszeigers ausblenden Wenn dieses Kontrollkstchen aktiviert ist, bleibt die QuickInfo geffnet, solange der Mauszeiger darauf zeigt (selbst wenn dieser das Auslserelement verlsst). Dies ist hilfreich, wenn sich Hyperlinks oder andere interaktive Elemente innerhalb der QuickInfo befinden. Wenn das Kontrollkstchen nicht aktiviert ist, wird das QuickInfo-Element geschlossen, sobald der Mauszeiger den Auslsebereich verlsst. Horizontaler Offset Legt die horizontale Position der QuickInfo relativ zum Mauszeiger fest. Der Offsetwert wird in
ffnende oder schlieende Fensterjalousie, die das Element anzeigt oder verbirgt. Mit Ausblenden wird die QuickInfo allmhlich ein- oder ausgeblendet. Der Standardwert ist Kein.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 471
Spry-Seiten visuell erstellen
Das Widget berprfung - Optionsschaltergruppe hat neben dem Anfangszustand drei weitere mgliche Zustnde: Gltig, Ungltig und Erforderlich. Sie knnen die Eigenschaften fr diese Zustandswerte ndern, indem Sie je nach gewnschtem berprfungsergebnis die entsprechende CSS-Datei (SpryValidationRadio.css) bearbeiten. Mit einem Widget vom Typ berprfung - Optionsschaltergruppe knnen Eingabedaten zu unterschiedlichen Zeitpunkten berprft werden, z. B. wenn der Benutzer auf eine Stelle auerhalb des Widgets klickt, Optionen auswhlt oder das Formular sendet.
Zustand Anfnglich Die Seite wird im Browser geladen, oder der Benutzer setzt das Formular zurck. Zustand Gltig Der Benutzer trifft eine Auswahl. Das Formular kann danach gesendet werden. Zustand Erforderlich Der Benutzer hat eine erforderliche Option nicht aktiviert. Zustand Ungltig Der Benutzer hat eine Optionsschaltflche ausgewhlt, deren Wert nicht zulssig ist.
Wenn ein Widget vom Typ berprfung - Optionsschaltergruppe durch eine Benutzeraktion in einen dieser Zustnde wechselt, wendet die Programmlogik des Spry-Frameworks zur Laufzeit eine bestimmte CSS-Klasse auf den HTML-Container des Widgets an. Wenn der Benutzer beispielsweise ein Formular sendet, jedoch keine Optionen aktiviert hat, wendet Spry eine Klasse auf das Widget an, durch die die Fehlermeldung Nehmen Sie eine Auswahl vor angezeigt wird. Die Regeln fr Stil und Anzeigezustnde von Fehlermeldungen sind in der Datei SpryValidationRadio.css abgelegt, die dem Widget zugeordnet ist. Der HTML-Standardcode fr das normalerweise in einem Formular verwendete Widget berprfung Optionsschaltergruppe besteht aus einem span-Container-Tag, das das input type="radio"-Tag der Optionsschaltergruppe umgibt. Der HTML-Code fr das Widget berprfung - Optionsschaltergruppe enthlt auerdem script-Tags im Kopf des Dokuments und nach dem HTML-Code des Widgets. Eine ausfhrlichere Erluterung der Funktionsweise von Widgets vom Typ berprfung - Optionsschaltergruppe (einschlielich der vollstndigen Code-Struktur) finden Sie unter www.adobe.com/go/learn_dw_spryradio_de.
bearbeiten zu knnen, und weisen Sie jeder Optionsschaltflche einen eindeutigen Namen zu.
5 Klicken Sie in der Spalte Wert auf den jeweiligen Wert, um diesen bearbeiten zu knnen, und weisen Sie jeder
auszuwhlen, und dann auf den Pfeil nach oben oder unten, um die Optionsschaltflche jeweils eine Zeile nach oben bzw. nach unten zu verschieben.
7 Whlen Sie einen Layouttyp fr die Optionsschaltergruppe aus.
Zeilenumbrche Platziert jede Optionsschaltflche mithilfe von Zeilenumbrchen (br-Tags) auf einer separaten
Zeile.
Tabelle Platziert jede Optionsschaltflche mithilfe von Tabellenzeilen (tr-Tags) auf einer separaten Zeile.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 472
Spry-Seiten visuell erstellen
Hinweis: Sie knnen Widgets vom Typ berprfung - Optionsschaltergruppe auch ber die Kategorie Spry im Bedienfeld Einfgen hinzufgen.
berprfungszeitpunkt aus. Sie knnen entweder alle Optionen oder nur die bermittlung auswhlen.
OnBlur berprfung erfolgt, wenn der Benutzer auerhalb der Optionsschaltergruppe klickt. OnChange berprfung erfolgt bei der Benutzerauswahl. OnSubmit berprfung erfolgt, wenn der Benutzer das Formular abschickt. Die Option onSubmit ist standardmig ausgewhlt und kann nicht deaktiviert werden.
Zustandsvorschau anzeigen mchten. Whlen Sie beispielsweise Anfnglich aus, um das Widget in seinem Ursprungszustand anzuzeigen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 473
Spry-Seiten visuell erstellen
1 Whlen Sie im Widget berprfung - Optionsschaltergruppe die Optionsschaltflche aus, die fr leere oder
ungltige Werte verwendet werden soll. Wenn Sie fr das Widget leere oder ungltige Werte angeben, mssen zugehrige Optionsschaltflchen vorhanden sein, denen diese Werte zugeordnet sind.
2 Weisen Sie im Eigenschafteninspektor (Fenster > Eigenschaften) der Optionsschaltflche den Status
Aktiviert zu. Geben Sie zum Erstellen einer Optionsschaltflche mit einem leeren Wert im Textfeld Aktivierter Wert die Zeichenfolge Kein ein. Geben Sie zum Erstellen einer Optionsschaltflche mit einem ungltigen Wert im Textfeld Aktivierter Wert die Zeichenfolge Ungltig ein.
3 Whlen Sie das gesamte Widget berprfung - Optionsschaltergruppe aus, indem Sie auf die blaue Registerkarte
eines Widgets, das fr leere Werte die Fehlermeldung Nehmen Sie eine Auswahl vor anzeigt, im Textfeld Leerer Wert die Zeichenfolge Kein ein. Geben Sie zum Erstellen eines Widgets, das fr ungltige Werte die Fehlermeldung Whlen Sie einen gltigen Wert aus anzeigt, im Textfeld Ungltiger Wert die Zeichenfolge Ungltig ein. Beachten Sie, dass sowohl fr die entsprechende Optionsschaltflche als auch fr das Widget berprfung Optionsschaltergruppe die leeren und ungltigen Werte zugewiesen sein mssen, damit die Fehlermeldungen ordnungsgem angezeigt werden.
Verwandte Themen
Bedienfeld CSS-Stile im Modus Aktuell auf Seite 137
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 474
Spry-Seiten visuell erstellen
2 Suchen Sie die CSS-Regel fr den zu ndernden Bereich des Widgets. Wenn Sie beispielsweise die
Hintergrundfarbe fr den Zustand Erforderlich des Widgets berprfung - Optionsschaltergruppe ndern mchten, bearbeiten Sie die Regel radioRequiredState in der Datei SpryValidationRadio.css.
3 Nehmen Sie die gewnschten nderungen an der CSS-Regel vor und speichern Sie die Datei.
Die Datei SpryValidationRadio.css enthlt ausfhrliche Kommentare, in denen der Code und der Zweck bestimmter Regeln erlutert wird. Weitere Informationen finden Sie in den Kommentaren in der Datei.
bearbeiten, suchen Sie in der folgenden Tabelle die entsprechende CSS-Regel und ndern Sie dann die Standardeigenschaften oder fgen Sie benutzerdefinierte Eigenschaften und Werte fr den Textstil hinzu.
Text fr Stilerstellung Text der Fehlermeldung Dazugehrige CSS-Regel .radioRequiredState .radioRequiredMsg, .radioInvalidState .radioInvalidMsg Zu ndernde dazugehrige Regeln color: #CC3333; border: 1px solid #CC3333;
Ungltiges Format
A: Textfeld-Widget mit aktivierter Eingabehilfe B: Textfeld-Widget, gltiger Zustand C: Textfeld-Widget, ungltiger Zustand D: TextfeldWidget, erforderlicher Zustand
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 475
Spry-Seiten visuell erstellen
Das Widget berprfung - Textfeld beinhaltet mehrere Zustnde (z. B. Gltig, Ungltig, Erforderlich usw.). Sie knnen die Eigenschaften fr diese Zustnde, je nach dem gewnschten berprfungsergebnis, mit dem Eigenschafteninspektor anpassen. Mit einem Widget berprfung - Textfeld lassen sich unterschiedliche Aspekte berprfen, z. B. wenn der Besucher auerhalb des Widgets klickt, bei der Eingabe von Text oder beim Abschicken des Formulars.
Anfangszustand Der Widget-Zustand, in dem die Seite in den Browser geladen wird oder der Benutzer das Formular
zurcksetzt.
Fokuszustand Der Widget-Zustand, in dem der Besucher im Widget einen Einfgepunkt setzt. Gltig-Zustand Der Widget-Zustand, in dem der Besucher Informationen korrekt eingegeben hat und das Formular abgeschickt werden kann. Ungltig-Zustand Der Widget-Zustand, in dem der Besucher Text in einem ungltigen Format eingegeben hat. (Zum
eingegeben hat.
Mindestwert-Zustand Der Widget-Zustand, in dem der Besucher eine Angabe gemacht hat, die unter dem
Mindestwert des Textfelds liegt. (gilt fr berprfungen von Ganzzahlen, reellen Zahlen und Daten)
Hchstwert-Zustand Der Widget-Zustand, in dem der Besucher eine Angabe gemacht hat, die ber dem Hchstwert des Textfelds liegt. (gilt fr berprfungen von Ganzzahlen, reellen Zahlen und Daten)
Wenn ein Widget berprfung - Textfeld durch eine Benutzeraktion in einen dieser Zustnde versetzt wird, wendet die Logik des Spry-Frameworks zur Laufzeit eine bestimmte CSS-Klasse auf den HTML-Container des Widgets an. Wenn der Benutzer beispielsweise ein Formular abschickt, aber nicht alle Pflichtfelder ausgefllt hat, wendet Spry eine Klasse auf das Widget an, die zur Anzeige der Meldung Es muss ein Wert angegeben werden fhrt. Die Regeln fr Stil und Anzeige von Fehlermeldungen sind in der CSS-Regel fr das Widget, hier SpryValidationTextField.css, enthalten. Das Standard-HTML fr das Widget berprfung - Textfeld, normalerweise in einem Formular, enthlt ein <span>-Container-Tag, das das <input>-Tag des Textfelds umgibt. Das HTML fr das Widget berprfung Textfeld enthlt auerdem Skript-Tags im Kopf des Dokuments und unterhalb des HTML-Markups des Widgets. Eine ausfhrliche Erluterung zur Funktionsweise von Widgets vom Typ berprfung - Textfeld, einschlielich der vollstndigen Code-Struktur, finden Sie unter www.adobe.com/go/learn_dw_sprytextfield_de.
Hinweis: Sie knnen Widgets vom Typ berprfung - Textfeld auch ber die Kategorie Spry im Bedienfeld Einfgen hinzufgen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 476
Spry-Seiten visuell erstellen
Verwandte Themen
Barrierefreie HTML-Formulare erstellen auf Seite 716
Bei den meisten berprfungstypen wird fr das Textfeld die Standard-Formatoption eingestellt. Wenn Sie beispielsweise den berprfungstyp Ganzzahl auf ein Textfeld anwenden, erfolgt die berprfung erst bei der Eingabe von Zahlen. Bei manchen berprfungstypen knnen Sie allerdings ein Format fr das Textfeld whlen. In der folgenden Tabelle sind die ber den Eigenschafteninspektor verfgbare berprfungstypen und Formate aufgelistet:
berprfungstyp Kein Ganzzahl E-Mail-Adresse Format Kein bestimmtes Format erforderlich. Das Textfeld akzeptiert nur Zahlen. Das Textfeld akzeptiert E-Mail-Adressen mit dem @-Symbol und einem Punkt (.), dem mindestens ein Buchstabe vorausgehen bzw. folgen muss. Die Formate knnen variieren. Treffen Sie ein Auswahl aus dem Men Format des Eigenschafteninspektors. Die Formate knnen variieren. Treffen Sie ein Auswahl aus dem Men Format des Eigenschafteninspektors. (tt steht fr das 12- und t fr das 24-Std.-Format) Die Formate knnen variieren. Treffen Sie ein Auswahl aus dem Men Format des Eigenschafteninspektors. Sie knnen entweder alle Kreditkarten zulassen oder eine bestimmte Art von Kreditkarten (MasterCard, Visa usw.) vorschreiben. Das Textfeld erlaubt bei Kreditkartennummern keine Leerschritte (z. B. 4321 3456 4567 4567). Die Formate knnen variieren. Treffen Sie ein Auswahl aus dem Men Format des Eigenschafteninspektors. Es knnen Telefonnummern im Format (000) 000-0000 (USA und Kanada) oder in benutzerdefinierten Formaten eingegeben werden. Wenn Sie die Option Benutzerdefiniertes Muster auswhlen, geben Sie im Textfeld Muster ein Format ein, z. B. 000.00(00). Im Textfeld knnen Sozialversicherungsnummern im Format 000-00-0000 eingegeben werden. Wenn Sie ein anderes Format verwenden mchten, whlen Sie den berprfungstyp Benutzerdefiniert aus und geben Sie das gewnschte Format ein. Bei der berprfung des Formatmusters werden nur ASCII-Zeichen untersttzt. Es werden Whrungen im Format 1,000,000.00 oder 1.000.000,00 akzeptiert. Zur berprfung verschiedener Zahlentypen: Ganzzahlen (z. B. 1); Fliewerte (z. B. 12.123) und Fliewerte aus der Exponentialschreibweise (z. B. 1.212e+12, 1.221e-12 wobei e als 10er-Potenz verwendet wird).
Datum
Uhrzeit
Kreditkarte
PLZ
Telefonnummer
US-Sozialversicherungsnummer
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 477
Spry-Seiten visuell erstellen
berprfungstyp IP-Adresse
Format Die Formate knnen variieren. Treffen Sie ein Auswahl aus dem Men Format des Eigenschafteninspektors. Es werden URLs im Format http://xxx.xxx.xxx oder ftp://xxx.xxx.xxx akzeptiert. ermglicht die Angabe eines benutzerdefinierten berprfungstyps und -formats. Geben Sie im Eigenschafteninspektor das Formatmuster (ggf. mit Eingabehinweis) ein. Bei der berprfung des Formatmusters werden nur ASCII-Zeichen untersttzt.
URL Benutzerdefiniert
berprfungszeitpunkt aus. Sie knnen entweder alle Optionen oder nur die bermittlung auswhlen.
OnBlur berprfung erfolgt, wenn der Benutzer auerhalb des Textfelds klickt. OnChange berprfung erfolgt, wenn der Benutzer Text im Feld ndert. OnSubmit berprfung erfolgt, wenn der Benutzer das Formular abschickt. Die Option onSubmit ist standardmig ausgewhlt und kann nicht deaktiviert werden.
Zeichen max. ein. Wenn Sie beispielsweise unter Zeichen min. eine 3 eingeben, erfolgt nur dann eine berprfung, wenn der Benutzer drei oder mehr Zeichen eingibt.
Hchstwert ein. Wenn Sie beispielsweise im Feld Mindestwert eine 3 eingeben, erfolgt nur dann eine berprfung, wenn der Benutzer die Zahl 3 oder einen hheren Wert (4, 5, 6 usw.) eingibt.
Zustandsvorschau anzeigen mchten. Wenn Sie beispielsweise das Widget in seinem gltigen Zustand anzeigen mchten, whlen Sie die Option Gltig.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 478
Spry-Seiten visuell erstellen
Option Erforderlich.
Verwandte Themen
Bedienfeld CSS-Stile im Modus Aktuell auf Seite 137
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 479
Spry-Seiten visuell erstellen
entsprechende CSS-Regel und ndern Sie dann die Standardeigenschaften oder fgen Sie benutzerdefinierte Eigenschaften und Werte fr den Textstil hinzu:
Zu ndernder Text Dazugehrige CSS-Regel Zu ndernde dazugehrige Regeln
.textfieldRequiredState .textfieldRequiredMsg, .textfieldInvalidFormatState color: #CC3333; border: 1px solid .textfieldInvalidFormatMsg, .textfieldMinValueState #CC3333; .textfieldMinValueMsg, .textfieldMaxValueState .textfieldMaxValueMsg, .textfieldMinCharsState .textfieldMinCharsMsg, .textfieldMaxCharsState .textfieldMaxCharsMsg
input.textfieldRequiredState, .textfieldRequiredState input, background-color: #FF9F9F; input.textfieldInvalidFormatState, .textfieldInvalidFormatState input, input.textfieldMinValueState, .textfieldMinValueState input, input.textfieldMaxValueState, .textfieldMaxValueState input, input.textfieldMinCharsState, .textfieldMinCharsState input, input.textfieldMaxCharsState, .textfieldMaxCharsState input .textfieldFocusState input, input.textfieldFocusState background-color: #FFFFCC;
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 480
Spry-Seiten visuell erstellen
B
Die maximal zulssige Zeichenanzahl wurde berschritten
D
Es muss ein Wert angegeben werden
A: Zhler fr die restlichen Zeichen B: Textbereich-Widget im Fokus, Zeichen max.-Zustand C: Textbereich-Widget im Fokus, gltiger Zustand D: Textbereich-Widget, erforderlicher Zustand E: Zhler fr die eingegebenen Zeichen
Das Widget berprfung - Textbereich beinhaltet mehrere Zustnde (z. B. Gltig, Ungltig, Erforderlich usw.). Sie knnen die Eigenschaften fr diese Zustnde, je nach gewnschtem berprfungstyp, mit dem Eigenschafteninspektor anpassen. Mit diesem Widget lassen sich unterschiedliche Aspekte berprfen, z. B. wenn der Besucher auerhalb des Widgets klickt, bei der Texteingabe oder beim Abschicken des Formulars.
Anfangszustand Der Widget-Zustand, in dem die Seite in den Browser geladen wird oder der Benutzer das Formular
zurcksetzt.
Fokuszustand Der Widget-Zustand, in dem der Besucher im Widget einen Einfgepunkt setzt. Gltig-Zustand Der Widget-Zustand, in dem der Besucher Informationen korrekt eingegeben hat und das Formular abgeschickt werden kann. Erforderlich-Zustand Der Widget-Zustand, in dem der Besucher keinen Text eingegeben hat. Zeichen min.-Zustand Der Widget-Zustand, in dem der Besucher weniger Zeichen als die Mindestanzahl im Textbereich eingegeben hat. Zeichen max.-Zustand Der Widget-Zustand, in dem der Benutzer im Textbereich mehr Zeichen als die Hchstanzahl
zulssiger Zeichen eingegeben hat. Wenn ein Widget berprfung - Textbereich durch eine Benutzeraktion in einen dieser Zustnde versetzt wird, wendet die Logik des Spry-Frameworks zur Laufzeit eine bestimmte CSS-Klasse auf den HTML-Container des Widgets an. Wenn der Benutzer beispielsweise ein Formular abschickt, aber keinen Text im Textbereich eingegeben hat, wendet Spry eine Klasse auf das Widget an, die zur Anzeige der Meldung Es muss ein Wert angegeben werden fhrt. Die Regeln fr Stil und Anzeige von Fehlermeldungen sind in der CSS-Regel fr das Widget, hier SpryValidationTextArea.css, enthalten. Das Standard-HTML fr das Widget berprfung - Textbereich, normalerweise in einem Formular, enthlt ein <span>-Container-Tag, das das <textarea>-Tag des Textbereichs umgibt. Das HTML fr das Widget enthlt auerdem Skript-Tags im Kopf des Dokuments und unterhalb des HTML-Markups des Widgets. Eine ausfhrliche Erluterung der Funktionsweise von Widgets vom Typ berprfung - Textbereich, einschlielich der vollstndigen Code-Struktur, finden Sie unter www.adobe.com/go/learn_dw_sprytextarea_de.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 481
Spry-Seiten visuell erstellen
Hinweis: Sie knnen Widgets vom Typ berprfung - Textbereich auch ber die Kategorie Spry im Bedienfeld Einfgen hinzufgen.
Verwandte Themen
Barrierefreie HTML-Formulare erstellen auf Seite 716
berprfungszeitpunkt aus. Sie knnen entweder alle Optionen oder nur die bermittlung auswhlen.
OnBlur berprfung erfolgt, wenn der Benutzer auerhalb des Textfelds klickt. OnChange berprfung erfolgt, wenn der Benutzer Text im Feld ndert. OnSubmit berprfung erfolgt, wenn der Benutzer das Formular abschickt. Die Option onSubmit ist standardmig ausgewhlt und kann nicht deaktiviert werden.
Zeichen max. ein. Wenn Sie beispielsweise im Feld Zeichen min. 20 eingeben, erfolgt nur dann eine berprfung, wenn der Benutzer 20 oder mehr Zeichen im Textbereich eingibt.
Zeichenzhler hinzufgen
Sie knnen einen Zeichenzhler hinzufgen, damit der Benutzer wei, wie viele Zeichen er bereits eingegeben hat bzw. wie viele er noch eingeben muss. Ein solcher Zhler wird standardmig neben der rechten unteren Ecke des Widgets angezeigt.
1 Whlen Sie ein Widget vom Typ berprfung - Textbereich im Dokumentfenster aus. 2 Whlen Sie im Eigenschafteninspektor (Fenster > Eigenschaften) die Option Zeichenanzahl oder
Verbleibende Zeichen aus. Hinweis: Die Option Verbleibende Zeichen ist nur verfgbar, wenn Sie bereits eine maximale Anzahl Zeichen festgelegt haben.
Zustandsvorschau anzeigen mchten. Wenn Sie beispielsweise das Widget in seinem gltigen Zustand anzeigen mchten, whlen Sie die Option Gltig.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 482
Spry-Seiten visuell erstellen
Option Erforderlich.
Verwandte Themen
Bedienfeld CSS-Stile im Modus Aktuell auf Seite 137
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 483
Spry-Seiten visuell erstellen
entsprechende CSS-Regel und ndern Sie dann die Standardeigenschaften oder fgen Sie benutzerdefinierte Eigenschaften und Werte fr den Textstil hinzu:
Zu ndernder Text Text der Fehlermeldung Dazugehrige CSS-Regel .textareaRequiredState .textareaRequiredMsg, .textareaMinCharsState .textareaMinCharsMsg, .textareaMaxCharsState .textareaMaxCharsMsg Zu ndernde dazugehrige Regeln color: #CC3333; border: 1px solid #CC3333;
Hintergrundfarbe des Widgets im Gltig-Zustand .textareaValidState textarea, textarea.textareaValidState Hintergrundfarbe des Widgets im UngltigZustand textarea.textareaRequiredState, .textareaRequiredState textarea, textarea.textareaMinCharsState, .textareaMinCharsState textarea, textarea.textareaMaxCharsState, .textareaMaxCharsState textarea .textareaFocusState textarea, textarea.textareaFocusState
background-color: #FF9F9F;
background-color: #FFFFCC;
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 484
Spry-Seiten visuell erstellen
C
Whlen Sie ein Element aus
D
Whlen Sie einen gltigen Staat aus
A: Widget berprfung Auswahl B: Auswahlwidget, gltiger Zustand C: Auswahlwidget, erforderlicher Zustand D: Auswahlwidget, ungltiger Zustand
Das Widget berprfung - Auswahl beinhaltet mehrere Zustnde (z. B. Gltig, Ungltig, Erforderlich usw.). Sie knnen die Eigenschaften fr diese Zustnde, je nach gewnschtem berprfungstyp, mit dem Eigenschafteninspektor anpassen. Mit einem Widget vom Typ berprfung - Auswahl knnen verschiedene Aspekte berprft werden, z. B. ob der Benutzer auf eine Stelle auerhalb des Widgets klickt, Optionen auswhlt oder das Formular sendet.
Anfangszustand Der Widget-Zustand, in dem die Seite in den Browser geladen wird oder der Benutzer das Formular
zurcksetzt.
Fokuszustand Der Widget-Zustand, in dem der Benutzer das Widget angeklickt hat. Gltig-Zustand Der Widget-Zustand, in dem der Besucher ein gltiges Element ausgewhlt hat und das Formular abgeschickt werden kann. Ungltig-Zustand Der Widget-Zustand, in dem der Besucher ein ungltiges Element ausgewhlt hat. Erforderlich-Zustand Der Widget-Zustand, in dem der Besucher kein gltiges Element ausgewhlt hat.
Wenn ein Widget vom Typ berprfung - Anzeige durch eine Benutzeraktion in einen dieser Zustnde versetzt wird, wendet die Logik des Spry-Frameworks zur Laufzeit eine bestimmte CSS-Klasse auf den HTML-Container des Widgets an. Wenn der Benutzer beispielsweise ein Formular abschickt, aber kein Element aus dem Men gewhlt hat, wendet Spry eine Klasse auf das Widget an, die zur Anzeige der Meldung Whlen Sie ein Element aus fhrt. Die Regeln fr Stil und Anzeige von Fehlermeldungen sind in der CSS-Regel fr das Widget, hier SpryValidationSelect.css, enthalten. Das Standard-HTML fr das Widget berprfung - Auswahl, normalerweise in einem Formular, enthlt ein <span>-Container-Tag, das das <select>-Tag des Textbereichs umgibt. Das HTML fr das Widget berprfung Auswahl enthlt auerdem Skript-Tags im Kopf des Dokuments und unterhalb des HTML-Markups des Widgets. Eine ausfhrliche Erluterung der Funktionsweise von Widgets vom Typ berprfung - Auswahl, einschlielich der vollstndigen Code-Struktur, finden Sie unter www.adobe.com/go/learn_dw_spryselect_de.
Aktion nicht automatisch durch. Weitere Informationen finden Sie im vorausgegangenen Thema.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 485
Spry-Seiten visuell erstellen
Hinweis: Sie knnen Widgets vom Typ berprfung - Auswahl auch ber die Kategorie Spry im Bedienfeld Einfgen hinzufgen.
Verwandte Themen
Barrierefreie HTML-Formulare erstellen auf Seite 716
berprfungszeitpunkt aus. Sie knnen entweder alle Optionen oder nur die bermittlung auswhlen.
OnBlur berprfung erfolgt, wenn der Benutzer auerhalb des Widgets klickt. OnChange berprfung erfolgt bei der Benutzerauswahl. OnSubmit berprfung erfolgt, wenn der Benutzer das Formular abschickt. Die Option onSubmit ist standardmig ausgewhlt und kann nicht deaktiviert werden.
Zustandsvorschau anzeigen mchten. Wenn Sie beispielsweise das Widget in seinem gltigen Zustand anzeigen mchten, whlen Sie die Option Gltig.
1 Whlen Sie ein Widget vom Typ berprfung - Auswahl im Dokumentfenster aus. 2 Geben Sie im Eigenschafteninspektor (Fenster > Eigenschaften) im Feld Ungltiger Wert einen ungltigen
Wert ein.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 486
Spry-Seiten visuell erstellen
Verwandte Themen
Bedienfeld CSS-Stile im Modus Aktuell auf Seite 137
entsprechende CSS-Regel und ndern Sie dann die Standardeigenschaften oder fgen Sie benutzerdefinierte Eigenschaften und Werte fr den Textstil hinzu:
Text fr Stilerstellung Text der Fehlermeldung Dazugehrige CSS-Regel Zu ndernde dazugehrige Regeln
.selectRequiredState .selectRequiredMsg, .selectInvalidState color: #CC3333; border: 1px solid #CC3333; .selectInvalidMsg
Hintergrundfarbe des Widgets im GltigZustand Hintergrundfarbe des Widgets im UngltigZustand Hintergrundfarbe des Widgets im Fokus
background-color: #FF9F9F;
background-color: #FFFFCC;
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 487
Spry-Seiten visuell erstellen
A: Widgetgruppe berprfung - Kontrollkstchen, Auswahl min.-Zustand B: Widget berprfung - Kontrollkstchen, erforderlicher Zustand
Das Widget berprfung - Kontrollkstchen beinhaltet mehrere Zustnde (z. B. Gltig, Ungltig, Erforderlich usw.). Sie knnen die Eigenschaften fr diese Zustnde, je nach gewnschtem berprfungstyp, mit dem Eigenschafteninspektor anpassen. Mit einem Widget berprfung - Kontrollkstchen lassen sich unterschiedliche Aspekte berprfen, z. B. wenn der Besucher auerhalb des Widgets klickt, bei der Texteingabe oder beim Abschicken des Formulars.
Anfangszustand Der Widget-Zustand, in dem die Seite in den Browser geladen wird oder der Benutzer das Formular
zurcksetzt.
Gltig-Zustand Der Widget-Zustand, in dem der Besucher eine oder mehrere Optionen korrekt ausgewhlt hat und das Formular abgeschickt werden kann. Erforderlich-Zustand Der Widget-Zustand, in dem der Besucher keine gltige Option ausgewhlt hat. Auswahl min.-Zustand Der Widget-Zustand, in dem der Benutzer weniger als die erforderliche Anzahl Kontrollkstchen ausgewhlt hat. Auswahl max.-Zustand Der Widget-Zustand, in dem der Benutzer mehr als die maximal zulssige Anzahl von Kontrollkstchen ausgewhlt hat.
Wenn ein Widget vom Typ berprfung - Kontrollkstchen durch eine Benutzeraktion in einen dieser Zustnde versetzt wird, wendet die Logik des Spry-Frameworks zur Laufzeit eine bestimmte CSS-Klasse auf den HTMLContainer des Widgets an. Wenn der Benutzer beispielsweise ein Formular abschickt, aber keine Optionen ausgewhlt hat, wendet Spry eine Klasse auf das Widget an, die zur Anzeige der Meldung Nehmen Sie eine Auswahl vor fhrt. Die Regeln fr Stil und Anzeige von Fehlermeldungen sind in der CSS-Regel fr das Widget, hier SpryValidationCheckbox.css, enthalten.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 488
Spry-Seiten visuell erstellen
Das Standard-HTML fr das Widget berprfung - Kontrollkstchen, normalerweise in einem Formular, enthlt ein <span>-Container-Tag, das das <input type="checkbox">-Tag des Textbereichs umgibt. Das HTML fr dieses Widget enthlt auerdem Skript-Tags im Kopf des Dokuments und unterhalb des HTML-Markups des Widgets. Eine ausfhrliche Erluterung der Funktionsweise von Widgets vom Typ berprfung - Kontrollkstchen, einschlielich der vollstndigen Code-Struktur, finden Sie unter www.adobe.com/go/learn_dw_sprycheckbox_de.
Hinweis: Sie knnen Widgets vom Typ berprfung - Kontrollkstchen auch ber die Kategorie Spry im Bedienfeld Einfgen hinzufgen.
Verwandte Themen
Barrierefreie HTML-Formulare erstellen auf Seite 716
berprfungszeitpunkt aus. Sie knnen entweder alle Optionen oder nur die bermittlung auswhlen.
OnBlur berprfung erfolgt, wenn der Benutzer auerhalb des Kontrollkstchens klickt. OnChange berprfung erfolgt bei der Benutzerauswahl. OnSubmit berprfung erfolgt, wenn der Benutzer das Formular abschickt. Die Option onSubmit ist standardmig ausgewhlt und kann nicht deaktiviert werden.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 489
Spry-Seiten visuell erstellen
2 Whlen Sie im Eigenschafteninspektor (Fenster > Eigenschaften) den Zustand aus, den Sie im Popupmen
Zustandsvorschau anzeigen mchten. Whlen Sie beispielsweise Anfnglich, um das Widget in seinem Ursprungszustand anzuzeigen.
Jedes Mal, wenn Sie ein Widget vom Typ berprfung - Kontrollkstchen erstellen, speichert Dreamweaver die Datei SpryValidationCheckbox.css im Ordner SpryAssets Ihrer Site. Diese Datei enthlt auerdem ntzliche kommentierte Informationen zu verschiedenen Stilen fr das Widget.
2 Suchen Sie in der folgenden Tabelle die entsprechende CSS-Regel und ndern Sie dann die Standardeigenschaften
oder fgen Sie benutzerdefinierte Eigenschaften und Werte fr den Textstil hinzu:
Text fr Stilerstellung Dazugehrige CSS-Regel Zu ndernde dazugehrige Regeln color: #CC3333; border: 1px solid #CC3333;
Sie knnen die Regeln fr dieses Widget entweder schnell und einfach in der CSS-Datei oder mit dem Bedienfeld CSSStile bearbeiten. Dieses Bedienfeld vereinfacht, speziell bei Verwendung des Modus Aktuell, das Auffinden der CSS-Klassen, die den verschiedenen Bereichen des Widgets zugewiesenen sind.
Verwandte Themen
Bedienfeld CSS-Stile im Modus Aktuell auf Seite 137
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 490
Spry-Seiten visuell erstellen
Wert erforderlich.
A: Kennwortwidget, Zustand fr Mindestanzahl von Zeichen B: Kennwortwidget, Zustand fr Hchstanzahl von Zeichen C: Kennwortwidget, Zustand Erforderlich
Das Widget berprfung - Kennwort beinhaltet mehrere Zustnde (z. B. Gltig, Ungltig, Zeichen min. usw.). Sie knnen die Eigenschaften fr diese Zustandswerte ndern, indem Sie je nach gewnschtem berprfungsergebnis die entsprechende CSS-Datei (SpryValidationPassword.css) bearbeiten. Mit einem Widget vom Typ berprfung - Kennwort knnen Eingabedaten zu unterschiedlichen Zeitpunkten berprft werden, z. B. wenn der Besucher der Website auf eine Stelle auerhalb des Textfelds klickt, Text eingibt oder das Formular sendet.
Zustand Anfnglich Die Seite wird im Browser geladen, oder der Benutzer setzt das Formular zurck. Zustand Fokus Der Benutzer setzt die Einfgemarke in das Widget. Zustand Gltig Der Benutzer gibt Informationen korrekt ein. Das Formular kann dann abgeschickt werden. Zustand Ungltige Strke Der Benutzer gibt im Feld Text ein, der nicht den Kriterien fr die Kennwortstrke
entspricht. (Wenn Sie beispielsweise festgelegt haben, dass ein Kennwort mindestens zwei Grobuchstaben enthalten muss und das eingegebene Kennwort keinen oder nur einen Grobuchstaben enthlt.)
Zustand Erforderlich Der Benutzer gibt im Textfeld nicht den erforderlichen Text ein. Zustand Zeichen min. Der Benutzer gibt im Textfeld fr das Kennwort weniger Zeichen als die erforderliche
Mindestanzahl ein.
Zustand Zeichen max. Der Benutzer gibt im Textfeld fr das Kennwort mehr Zeichen als die zulssige Hchstanzahl ein.
Eine ausfhrliche Erluterung der Funktionsweise von Widgets des Typs berprfung - Kennwort sowie zustzliche Informationen zur Widget-Struktur finden Sie unter www.adobe.com/go/learn_dw_sprypassword_de.
Verwandte Themen
Beispiele fr Widgets vom Typ berprfung - Kennwort
Hinweis: Sie knnen Widgets vom Typ berprfung - Kennwort auch ber die Kategorie Spry im Bedienfeld Einfgen hinzufgen.
Verwandte Themen
Barrierefreie HTML-Formulare erstellen auf Seite 716
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 491
Spry-Seiten visuell erstellen
Kontrollkstchen Erforderlich.
Zustandsvorschau anzeigen mchten. Wenn Sie beispielsweise das Widget in seinem gltigen Zustand anzeigen mchten, whlen Sie die Option Gltig.
berprfungszeitpunkt aus. Sie knnen entweder alle Optionen oder nur die bermittlung auswhlen.
OnBlur berprfung erfolgt, wenn der Benutzer auerhalb des Textfelds fr das Kennwort klickt. OnChange berprfung erfolgt, wenn der Benutzer Text im Textfeld fr das Kennwort ndert. OnSubmit berprfung erfolgt, wenn der Benutzer das Formular abschickt. Die Option onSubmit ist standardmig ausgewhlt und kann nicht deaktiviert werden.
Kennwortstrke festlegen
Kennwortstrke bezeichnet den Grad, in dem Kombinationen bestimmter Zeichen den Anforderungen an ein im Textfeld eingegebenes Kennwort entsprechen. Wenn Sie beispielsweise ein Formular erstellt haben, in dem Benutzer ein Kennwort festlegen, empfiehlt es sich unter Umstnden den Benutzern vorzuschreiben, im Kennwort eine bestimmte Anzahl von Grobuchstaben, Sonderzeichen usw. zu verwenden. Hinweis: Standardmig sind fr das Kennwortwidget keine der verfgbaren Optionen festgelegt.
1 Klicken Sie auf die blaue Registerkarte des Widgets berprfung - Kennwort, um es auszuwhlen. 2 Legen Sie im Eigenschafteninspektor (Fenster > Eigenschaften) die gewnschten Optionen fest. Die jeweilige
Anzahl, die Sie in den entsprechenden Optionsfeldern eingeben, stellt die fr das Widget erforderliche Anzahl von Zeichen dar, damit die berprfung erfolgreich ist. Wenn Sie z. B. im Feld Zeichen min. den Wert 8 eingeben, ist die berprfung nur erfolgreich, wenn im Textfeld fr das Kennwort mindestens acht Zeichen eingegeben werden.
Zeichen min./Zeichen max. Gibt die Mindest- und Hchstanzahl von Zeichen an, die fr eine erfolgreiche Gltigkeitsprfung des Kennworts erforderlich sind.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 492
Spry-Seiten visuell erstellen
Buchstaben min./Buchstaben max. Gibt die Mindest- und Hchstanzahl von Buchstaben (a, b, c usw.) an, die fr eine erfolgreiche Gltigkeitsprfung des Kennworts erforderlich sind. Zahlen min./Zahlen max. Gibt die Mindest- und Hchstanzahl von Ziffern (1, 2, 3 usw.) an, die fr eine erfolgreiche
Wenn Sie eine der oben aufgefhrten Optionen leer lassen, berprft das Widget nicht auf dieses Kriterium. Wenn Sie z. B. die Optionen fr die Hchst- und Mindestanzahl von Ziffern leer lassen, berprft das Widget nicht auf Ziffern im Kennwort.
Verwandte Themen
Bedienfeld CSS-Stile im Modus Aktuell auf Seite 137
Hintergrundfarbe fr den Zustand Erforderlich des Widgets berprfung - Kennwort ndern mchten, bearbeiten Sie die Regel input.passwordRequiredState in der Datei SpryValidationPassword.css.
3 Nehmen Sie die gewnschten nderungen an der CSS-Regel vor und speichern Sie die Datei.
Die Datei SpryValidationPassword.css enthlt ausfhrliche Kommentare, in denen der Code und der Zweck bestimmter Regeln erlutert wird. Weitere Informationen finden Sie in den Kommentaren in der Datei.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 493
Spry-Seiten visuell erstellen
folgenden Tabelle die entsprechende CSS-Regel und ndern Sie dann die Standardeigenschaften oder fgen Sie benutzerdefinierte Eigenschaften und Werte fr den Textstil hinzu.
Zu ndernder Text Dazugehrige CSS-Regel Zu ndernde dazugehrige Regeln color: #CC3333; border: 1px solid #CC3333;
.passwordRequiredState .passwordRequiredMsg, .passwordMinCharsState .passwordMinCharsMsg, .passwordMaxCharsState .passwordMaxCharsMsg, .passwordInvalidStrengthState .passwordInvalidStrengthMsg, .passwordCustomState .passwordCustomMsg
folgenden Tabelle die entsprechende CSS-Regel und ndern Sie die Standardfarbwerte.
Zu ndernde Farbe Dazugehrige CSS-Regel Zu ndernde dazugehrige Eigenschaft background-color: #B8F5B1;
input.passwordRequiredState, .passwordRequiredState input, input.passwordInvalidStrengthState, .passwordInvalidStrengthState input, input.passwordMinCharsState, .passwordMinCharsState input, input.passwordCustomState, .passwordCustomState input, input.passwordMaxCharsState, .passwordMaxCharsState input .passwordFocusState input, input.passwordFocusState
background-color: #FF9F9F;
background-color: #FFFFCC;
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 494
Spry-Seiten visuell erstellen
Hinweis: Sie sollten mit Spry-berprfungswidgets vertraut sein, bevor Sie das Besttigungswidget verwenden. Wenn dies noch nicht der Fall ist, lesen Sie die Informationen unter Mit dem Widget berprfung - Textfeld arbeiten auf Seite 474 oder andere berblicksinformationen zu berprfungswidgets, bevor Sie fortfahren. Dieser berblick enthlt nicht alle Grundkonzepte von berprfungswidgets. In der folgenden Abbildung ist eine typische Verwendung eines Besttigungswidgets dargestellt:
A
Das Widget berprfung - Besttigung beinhaltet mehrere Zustnde (z. B. Gltig, Ungltig, Erforderlich usw.). Sie knnen die Eigenschaften fr diese Zustandswerte ndern, indem Sie je nach gewnschtem berprfungsergebnis die entsprechende CSS-Datei (SpryValidationConfirm.css) bearbeiten. Mit einem Widget vom Typ berprfung - Besttigung knnen Eingabedaten zu unterschiedlichen Zeitpunkten berprft werden, z. B. wenn der Besucher der Website auf eine Stelle auerhalb des Textfelds klickt, Text eingibt oder das Formular sendet.
Zustand Anfnglich Die Seite wird im Browser geladen, oder der Benutzer setzt das Formular zurck. Zustand Fokus Der Benutzer setzt die Einfgemarke in das Widget. Zustand Gltig Der Benutzer gibt Informationen korrekt ein. Das Formular kann dann abgeschickt werden. Zustand Ungltig Der Benutzer gibt Text ein, der nicht mit dem in das vorherige Textfeld, in das Widget berprfung - Textfeld oder das Widget berprfung - Besttigung eingegebenen Text bereinstimmt. Zustand Erforderlich Der Benutzer gibt im Textfeld nicht den erforderlichen Text ein.
Eine ausfhrliche Erluterung der Funktionsweise von Widgets des Typs berprfung - Besttigung sowie zustzliche Informationen zur Widget-Struktur finden Sie unter www.adobe.com/go/learn_dw_spryconfirm_de.
Verwandte Themen
Beispiele fr Widgets vom Typ berprfung - Besttigung
Hinweis: Sie knnen Widgets vom Typ berprfung - Besttigung auch ber die Kategorie Spry im Bedienfeld Einfgen hinzufgen.
Verwandte Themen
Barrierefreie HTML-Formulare erstellen auf Seite 716
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 495
Spry-Seiten visuell erstellen
Kontrollkstchen Erforderlich.
verglichen werden soll, indem Sie im Popupmen berprfen auf ein Textfeld auswhlen. Im Popupmen werden alle Textfelder angezeigt, denen eine eindeutige ID zugewiesen ist.
Zustandsvorschau anzeigen mchten. Wenn Sie beispielsweise das Widget in seinem gltigen Zustand anzeigen mchten, whlen Sie die Option Gltig.
berprfungszeitpunkt aus. Sie knnen entweder alle Optionen oder nur die bermittlung auswhlen.
OnBlur berprfung erfolgt, wenn der Benutzer auerhalb des Besttigungstextfelds klickt. OnChange berprfung erfolgt, wenn der Benutzer Text im Besttigungstextfeld ndert. OnSubmit berprfung erfolgt, wenn der Benutzer das Formular abschickt. Die Option onSubmit ist standardmig ausgewhlt und kann nicht deaktiviert werden.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 496
Spry-Seiten visuell erstellen
Sie knnen die CSS-Regeln fr das Widget berprfung - Besttigung entweder schnell und einfach in der zugehrigen CSS-Datei oder im Bedienfeld CSS-Stile bearbeiten. Dieses Bedienfeld vereinfacht, speziell bei Verwendung des Modus Aktuell, das Auffinden der CSS-Klassen, die den verschiedenen Bereichen des Widgets zugewiesenen sind.
Verwandte Themen
Bedienfeld CSS-Stile im Modus Aktuell auf Seite 137
Hintergrundfarbe fr den Zustand Erforderlich des Widgets berprfung - Besttigung ndern mchten, bearbeiten Sie die Regel input.confirmRequiredState in der Datei SpryValidationConfirm.css.
3 Nehmen Sie die gewnschten nderungen an der CSS-Regel vor und speichern Sie die Datei.
Die Datei SpryValidationConfirm.css enthlt ausfhrliche Kommentare, in denen der Code und der Zweck bestimmter Regeln erlutert wird. Weitere Informationen finden Sie in den Kommentaren in der Datei.
folgenden Tabelle die entsprechende CSS-Regel und ndern Sie dann die Standardeigenschaften oder fgen Sie benutzerdefinierte Eigenschaften und Werte fr den Textstil hinzu.
Zu ndernder Text Dazugehrige CSS-Regel Zu ndernde dazugehrige Regeln color: #CC3333; border: 1px solid #CC3333;
folgenden Tabelle die entsprechende CSS-Regel und ndern Sie die Standardwerte fr die Hintergrundfarbe.
Zu ndernde Farbe Dazugehrige CSS-Regel Zu ndernde dazugehrige Eigenschaft background-color: #B8F5B1;
Hintergrundfarbe des Widgets im Gltig-Zustand Hintergrundfarbe des Widgets im UngltigZustand Hintergrundfarbe des Widgets im Fokus
background-color: #FF9F9F;
background-color: #FFFFCC;
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 497
Spry-Seiten visuell erstellen
Spry-Datenstze erstellen
Spry-HTML-Datenstze erstellen
1 Wenn Sie nur einen Datensatz erstellen, mssen Sie sich keine Gedanken ber die Position der Einfgemarke
machen. Wenn Sie einen Datensatz erstellen und gleichzeitig ein Layout einfgen mchten, stellen Sie sicher, dass sich die Einfgemarke an der Position befindet, an der das Layout auf der Seite eingefgt werden soll.
2 Whlen Sie Einfgen > Spry > Spry-Datensatz aus. 3 Fhren Sie im Dialogfeld Datenquelle angeben die folgenden Schritte aus:
Whlen Sie im Popupmen Datentyp auswhlen die Option HTML aus. (Diese Option ist standardmig
ausgewhlt.)
Legen Sie einen Namen fr den neuen Datensatz fest. Der Standardname fr den ersten erstellten Datensatz ist
ds1. Der Datensatzname kann nur Buchstaben, Ziffern und den Unterstrich enthalten und darf nicht mit einer Ziffer beginnen.
Geben Sie die HTML-Elemente der Datenquelle an, die Dreamweaver erkennen soll. Wenn Sie die Daten
beispielsweise innerhalb eines div-Tags angeordnet haben und Dreamweaver anstelle von Tabellen div-Tags erkennen soll, whlen Sie aus dem Popupmen Ermitteln die Option DIVs aus. Mit der Option Benutzerdefiniert knnen Sie beliebige Tagnamen eingeben, die erkannt werden sollen.
Geben Sie den Pfad zur Datei mit der HTML-Datenquelle an. Der Pfad kann sowohl relativ als Verweis auf eine
lokale Datei der Site (z. B. data/html_data.html) als auch als absolute URL auf einer (per HTTP oder HTTPS) verfgbaren Webseite angegeben werden. Sie knnen auf die Schaltflche Durchsuchen klicken, um zu einer lokalen Datei zu wechseln und diese dann auszuwhlen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 498
Spry-Seiten visuell erstellen
Dreamweaver stellt die HTML-Datenquelle im Dialogfeldbereich Datenauswahl dar und zeigt Markierungen fr die Elemente an, die als Container fr den Datensatz verwendet werden knnen. Dem zu verwendenden Element muss bereits eine eindeutige ID zugeordnet sein. Wenn dies nicht der Fall ist, wird in Dreamweaver eine Fehlermeldung angezeigt, und Sie mssen erneut die Datenquellendatei ffnen und eine eindeutige ID zuweisen. Darber hinaus drfen in der Datenquellendatei auswhlbare Elemente nicht in Spry-Bereichen abgelegt sein oder andere Datenverweise enthalten. Alternativ knnen Sie auch einen Entwurfsphasen-Feed als Datenquelle angeben. Weitere Informationen finden Sie unter Entwurfsphasen-Feeds verwenden auf Seite 506.
Whlen Sie das fr den Datencontainer gewnschte Element aus, indem Sie auf einen der gelben Pfeile klicken,
die im Dialogfeldbereich Datenauswahl angezeigt werden, oder indem Sie aus dem Popupmen Datencontainer eine ID auswhlen.
Bei umfangreichen Dateien knnen Sie auf den Pfeil zum Aus- und Einblenden unterhalb des Dialogfeldbereichs Datenauswahl klicken, damit mehr Daten angezeigt werden. Nachdem Sie das Containerelement fr den Datensatz ausgewhlt haben, wird im Dialogfeldbereich Datenvorschau eine Vorschau des Datensatzes angezeigt.
Optional: Aktivieren Sie das Kontrollkstchen Erweiterte Datenauswahl, wenn Sie fr den Datensatz CSSDatenselektoren angeben mchten. Wenn Sie beispielsweise im Textfeld Zeilenselektoren den Wert .product und im Textfeld Spaltenselektoren den Wert .boximage angegeben haben, enthlt der Datensatz nur die Zeilen, denen die Klasse .product zugewiesen ist, und nur die Spalten, denen die Klasse .boximage zugewiesen ist. Wenn Sie in eins der Textfelder mehrere Selektoren eingeben mchten, trennen Sie diese mit einem Komma.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 499
Spry-Seiten visuell erstellen
Wenn Sie im Dialogfeld Datenquelle angeben alle Eingaben vorgenommen haben, klicken Sie auf Fertig, um
direkt im Anschluss den Datensatz zu erstellen, oder auf Weiter, um mit dem Dialogfeld Datenoptionen festlegen fortzufahren. Wenn Sie auf Fertig klicken, steht der Datensatz im Bedienfeld Bindungen (Fenster > Bindungen) zur Verfgung.
4 Fhren Sie im Dialogfeld Datenoptionen festlegen die folgenden Schritte aus:
Optional: Legen Sie den Typ von Datensatzspalten fest, indem Sie eine Spalte markieren und im Popupmen
Typ einen Spaltentyp auswhlen. Wenn beispielsweise eine Spalte des Datensatzes Zahlenwerte enthlt, markieren Sie diese Spalte und whlen Sie im Popupmen Typ den Spaltentyp Zahl aus. Diese Option ist nur von Bedeutung, wenn der Benutzer die Mglichkeit haben soll, die Daten nach dieser Spalte zu sortieren. Sie knnen eine Datensatzspalte markieren, indem Sie auf die entsprechende Kopfzeile klicken, die Spalte im Popupmen Spaltenname auswhlen oder sie mit den Pfeilen nach links und rechts in der linken oberen Ecke des Dialogfelds anwhlen.
Optional: Legen Sie fest, wie die Daten sortiert werden sollen, indem Sie im Popupmen Spalte sortieren die
Spalte auswhlen, nach der sortiert werden soll. Nach dem Auswhlen der entsprechenden Spalte knnen Sie festlegen, ob die Sortierung aufsteigend oder absteigend erfolgen soll.
Optional (nur Tabellen): Deaktivieren Sie das Kontrollkstchen Erste Zeile als Kopfzeile verwenden, wenn Sie
anstelle der in der HTML-Datenquelle angegebenen Spaltennamen generische Spaltennamen (d. h. column0, column1, column2 usw.) verwenden mchten. Hinweis: Wenn Sie fr das Containerelement des Datensatzes keine Tabelle ausgewhlt haben, sind diese und die nchste Option nicht verfgbar. Dreamweaver verwendet automatisch als Spaltennamen von nicht auf Tabellen beruhenden Datenstzen die Werte column0, column1, column2 usw.
Optional (nur Tabellen): Aktivieren Sie das Kontrollkstchen Spalten als Zeilen verwenden, um die
horizontale und vertikale Ausrichtung der Daten im Datensatz umzukehren. Wenn Sie dieses Kontrollkstchen aktivieren, werden Spalten als Zeilen verwendet.
Optional: Aktivieren Sie das Kontrollkstchen Doppelte Zeilen herausfiltern, um doppelte Datenzeilen aus
dem Datensatz auszuschlieen.
Optional: Aktivieren Sie das Kontrollkstchen Datencache deaktivieren, wenn Sie stets Zugriff auf die
aktuellsten Daten im Datensatz wnschen. Wenn die Daten automatisch aktualisiert werden sollen, aktivieren Sie das Kontrollkstchen Daten automatisch aktualisieren und geben Sie das Aktualisierungsintervall in Millisekunden ein.
Wenn Sie im Dialogfeld Datenoptionen festlegen alle Eingaben vorgenommen haben, klicken Sie auf Fertig,
um direkt im Anschluss den Datensatz zu erstellen, oder auf Weiter, um mit dem Dialogfeld Einfgeoptionen auswhlen fortzufahren. Wenn Sie auf Fertig klicken, steht der Datensatz im Bedienfeld Bindungen (Fenster > Bindungen) zur Verfgung.
5 Fhren Sie im Dialogfeld Einfgeoptionen auswhlen einen der folgenden Schritte aus:
Whlen Sie ein Layout fr den neuen Datensatz aus und legen Sie die gewnschten Einrichtungsoptionen fest.
Weitere Informationen hierzu finden Sie unter Datensatzlayout auswhlen auf Seite 502.
Whlen Sie die Option Kein HTML einfgen aus. Wenn Sie diese Option auswhlen, wird der Datensatz in
Dreamweaver erstellt, der Seite jedoch kein entsprechender HTML-Code hinzugefgt. Der Datensatz steht im Bedienfeld Bindungen (Fenster > Bindungen) zur Verfgung und Sie knnen einzelne Daten manuell aus dem Datensatz auf die Seite ziehen.
6 Klicken Sie auf Fertig.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 500
Spry-Seiten visuell erstellen
Der Datensatz wird von Dreamweaver erstellt. Wenn Sie eine Layoutoption ausgewhlt haben, werden auf der Seite das Layout und Platzhalter fr die Daten angezeigt. In der Codeansicht ist zu erkennen, dass Dreamweaver den Headerinformationen Verweise auf die Dateien SpryData.js und SpryHTMLDataSet.js hinzugefgt hat. Diese Dateien sind wichtige Elemente von Spry, die fr das Funktionieren der Seite erforderlich sind. Achten Sie darauf, den entsprechenden Code nicht aus der Seite zu entfernen, sonst ist der Datensatz nicht funktionsfhig. Beim Hochladen der Seite auf einen Server mssen auch diese Dateien als abhngige Dateien hochgeladen werden.
Spry-XML-Datenstze erstellen
1 Wenn Sie nur einen Datensatz erstellen, mssen Sie sich keine Gedanken ber die Position der Einfgemarke
machen. Wenn Sie einen Datensatz erstellen und gleichzeitig ein Layout einfgen mchten, stellen Sie sicher, dass sich die Einfgemarke an der Position befindet, an der das Layout auf der Seite eingefgt werden soll.
2 Whlen Sie Einfgen > Spry > Spry-Datensatz aus. 3 Fhren Sie im Dialogfeld Datenquelle angeben die folgenden Schritte aus:
Whlen Sie im Popupmen Datentyp auswhlen die Option XML aus. Legen Sie einen Namen fr den neuen Datensatz fest. Der Standardname fr den ersten erstellten Datensatz ist
ds1. Der Datensatzname kann nur Buchstaben, Ziffern und den Unterstrich enthalten und darf nicht mit einer Ziffer beginnen.
Geben Sie den Pfad zur Datei mit der XML-Datenquelle an. Der Pfad kann sowohl relativ als Verweis auf eine
lokale Datei der Site (z. B. datafiles/data.xml) als auch als absolute URL auf einer (per HTTP oder HTTPS) verfgbaren Webseite angegeben werden. Sie knnen auf die Schaltflche Durchsuchen klicken, um zu einer lokalen Datei zu wechseln und diese dann auszuwhlen. Dreamweaver stellt die XML-Datenquelle im Dialogfeldbereich Zeilenelement dar. Dabei wird die XMLStruktur der zur Auswahl verfgbaren Datenelemente angezeigt. Wiederholende Elemente sind mit einem Plussymbol (+) gekennzeichnet und untergeordnete Elemente sind eingerckt. Alternativ knnen Sie auch einen Entwurfsphasen-Feed als Datenquelle angeben. Weitere Informationen hierzu finden Sie unter Entwurfsphasen-Feeds verwenden auf Seite 506.
Whlen Sie das Element aus, das die anzuzeigenden Daten enthlt. Dabei handelt es sich in der Regel um ein
sich wiederholendes Element wie <menu_item> mit mehreren untergeordneten Elementen wie <item>, <link>, <description> usw.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 501
Spry-Seiten visuell erstellen
Nachdem Sie das Containerelement fr den Datensatz ausgewhlt haben, wird im Dialogfeldbereich Datenvorschau eine Vorschau des Datensatzes angezeigt. Das Textfeld XPath zeigt einen Ausdruck, der die Position des gewhlten Knotens in der XML-Quelldatei angibt. Hinweis: XPath (XML Path Language) ist eine Syntax zum Adressieren bestimmter Bereiche eines XMLDokuments. Normalerweise wird XPath hnlich wie SQL fr Datenbanken als Abfragesprache fr XML-Daten eingesetzt. Weitere Informationen zu XPath enthalten die XPath-Spezifikationen in der W3C-Website unter www.w3.org/TR/xpath.
Wenn Sie im Dialogfeld Datenquelle angeben alle Eingaben vorgenommen haben, klicken Sie auf Fertig, um
direkt im Anschluss den Datensatz zu erstellen, oder auf Weiter, um mit dem Dialogfeld Datenoptionen festlegen fortzufahren. Wenn Sie auf Fertig klicken, steht der Datensatz im Bedienfeld Bindungen (Fenster > Bindungen) zur Verfgung.
4 Fhren Sie im Dialogfeld Datenoptionen festlegen die folgenden Schritte aus:
Optional: Legen Sie den Typ von Datensatzspalten fest, indem Sie eine Spalte markieren und im Popupmen
Typ einen Spaltentyp auswhlen. Wenn beispielsweise eine Spalte des Datensatzes Zahlenwerte enthlt, markieren Sie diese Spalte und whlen Sie im Popupmen Typ den Spaltentyp Zahl aus. Diese Option ist nur von Bedeutung, wenn der Benutzer die Mglichkeit haben soll, die Daten nach dieser Spalte zu sortieren. Sie knnen eine Datensatzspalte markieren, indem Sie auf die entsprechende Kopfzeile klicken, die Spalte im Popupmen Spaltenname auswhlen oder sie mit den Pfeilen nach links und rechts in der linken oberen Ecke des Dialogfelds anwhlen.
Optional: Legen Sie fest, wie die Daten sortiert werden sollen, indem Sie im Popupmen Spalte sortieren die
Spalte auswhlen, nach der sortiert werden soll. Nach dem Auswhlen der entsprechenden Spalte knnen Sie festlegen, ob die Sortierung aufsteigend oder absteigend erfolgen soll.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 502
Spry-Seiten visuell erstellen
Optional: Aktivieren Sie das Kontrollkstchen Doppelte Zeilen herausfiltern, um doppelte Datenzeilen aus
dem Datensatz auszuschlieen.
Optional: Aktivieren Sie das Kontrollkstchen Datencache deaktivieren, wenn Sie stets Zugriff auf die
aktuellsten Daten im Datensatz wnschen. Wenn die Daten automatisch aktualisiert werden sollen, aktivieren Sie das Kontrollkstchen Daten automatisch aktualisieren und geben Sie das Aktualisierungsintervall in Millisekunden ein.
Wenn Sie im Dialogfeld Datenoptionen festlegen alle Eingaben vorgenommen haben, klicken Sie auf Fertig,
um direkt im Anschluss den Datensatz zu erstellen, oder auf Weiter, um mit dem Dialogfeld Einfgeoptionen auswhlen fortzufahren. Wenn Sie auf Fertig klicken, steht der Datensatz im Bedienfeld Bindungen (Fenster > Bindungen) zur Verfgung.
5 Fhren Sie im Dialogfeld Einfgeoptionen auswhlen einen der folgenden Schritte aus:
Whlen Sie ein Layout fr den neuen Datensatz aus und legen Sie die gewnschten Einrichtungsoptionen fest.
Weitere Informationen hierzu finden Sie unter Datensatzlayout auswhlen auf Seite 502.
Whlen Sie die Option Kein HTML einfgen aus. Wenn Sie diese Option auswhlen, wird der Datensatz in
Dreamweaver erstellt, der Seite jedoch kein entsprechender HTML-Code hinzugefgt. Der Datensatz steht im Bedienfeld Bindungen (Fenster > Bindungen) zur Verfgung und Sie knnen einzelne Daten manuell aus dem Datensatz auf die Seite ziehen.
6 Klicken Sie auf Fertig.
Der Datensatz wird in Dreamweaver erstellt. Wenn Sie eine Layoutoption ausgewhlt haben, werden auf der Seite das Layout und Platzhalter fr die Daten angezeigt. In der Codeansicht ist zu erkennen, dass Dreamweaver den Headerinformationen Verweise auf die Dateien xpath.js und SpryData.js hinzugefgt hat. Diese Dateien sind wichtige Elemente von Spry, die fr das Funktionieren der Seite erforderlich sind. Achten Sie darauf, den entsprechenden Code nicht aus der Seite zu entfernen, sonst ist der Datensatz nicht funktionsfhig. Beim Hochladen der Seite auf einen Server mssen auch diese Dateien als abhngige Dateien hochgeladen werden.
Datensatzlayout auswhlen
Im Dialogfeld Einfgeoptionen auswhlen knnen Sie unterschiedliche Optionen fr die Anzeige der Datensatzdaten auf der Seite auswhlen. Daten knnen in einer dynamischen Spry-Tabelle, einem Master/Detaillayout, einem Layout mit gestapelten Containern (einspaltig) oder als Layout gestapelter Container mit Spotlight-Bereich (zweispaltig) dargestellt werden. Das Dialogfeld Einfgeoptionen auswhlen enthlt Miniaturansichten der jeweiligen Layouts. Layout mit dynamischer Tabelle Whlen Sie die Option Tabelle einfgen aus, wenn die Daten in einer dynamischen Spry-Tabelle angezeigt werden sollen. Spry-Tabellen ermglichen dynamische Spaltensortierung und weitere interaktive Verhalten. Klicken Sie nach der Auswahl dieser Option auf die Schaltflche Einrichten, um das Dialogfeld Tabelle einfgen zu ffnen, und fhren Sie dann die folgenden Schritte aus:
1 Passen Sie im Dialogfeldbereich Spalten die Spalten fr Ihre Tabelle wie folgt an:
Markieren Sie einen Spaltennamen und klicken Sie auf das Minussymbol (-), um die Spalte aus der Tabelle zu
lschen. Klicken Sie auf das Plussymbol (+) und whlen Sie einen Spaltennamen aus, um der Tabelle neue Spalten hinzuzufgen.
Markieren Sie einen Spaltennamen und klicken Sie auf den Pfeil nach oben bzw. unten, um die Spalte zu
verschieben. Wenn Sie eine Spalte nach oben verschieben, bewegen Sie sie in der angezeigten Tabelle nach links, im anderen Fall nach rechts.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 503
Spry-Seiten visuell erstellen
2 Damit eine Spalte sortiert werden kann, whlen Sie sie im Dialogfeldbereich Spalten aus und aktivieren Sie dann
das Kontrollkstchen Spalte beim Klicken auf berschrift sortieren. Standardmig sind alle Spalten sortierbar. Wenn das Sortieren einer Spalte nicht mglich sein soll, whlen Sie den Spaltennamen im Dialogfeldbereich Spalten aus und deaktivieren Sie dann das Kontrollkstchen Spalte beim Klicken auf berschrift sortieren.
3 Wenn CSS-Stile mit Ihrer Seite als angehngtes Stylesheet oder als Gruppe einzelner Stile in der HTML-Seite
verknpft sind, knnen Sie eine CSS-Klasse fr eine oder mehrere der folgenden Optionen anwenden:
Ungerade-Zeilen-Klasse ndert die Darstellung der Zeilen mit ungerader Zeilennumber in der dynamischen
wenn Sie darauf klicken. Hinweis: Die Reihenfolge der Klassen fr ungerade und gerade Zeilen sowie Hover und Auswahl in Ihrem Stylesheet ist von entscheidender Bedeutung. Die Regeln mssen in genau dieser Reihenfolge (ungerade, gerade, Hover und Auswahl) angegeben sein. Wenn sich die Regel fr die Hover-Klasse im Stylesheet unterhalb der Regel fr die Auswahl-Klasse befindet, wird kein Hover-Effekt dargestellt, bis der Benutzer den Mauszeiger ber eine andere Zeile hlt. Wenn sich die Regeln fr die Hover- und Auswahl-Klasse im Stylesheet oberhalb der Regeln fr ungerade und gerade Zeilen befinden, funktionieren die Effekte fr ungerade und gerade Zeilen berhaupt nicht. Sie knnen Regeln im Bedienfeld CSS mit der Maus ziehen und verschieben, um sie korrekt anzuordnen, oder Sie knnen den CSSCode direkt bearbeiten.
4 Wenn die zu erstellende Tabelle eine dynamische Spry-Mastertabelle werden soll, aktivieren Sie das
Kontrollkstchen Detailbereiche beim Klicken auf Zeile aktualisieren. Weitere Informationen finden Sie unter Dynamische Spry-Mastertabellen und Aktualisierung von Detailbereichen auf Seite 506.
5 Klicken Sie auf OK, um das Dialogfeld zu schlieen, und klicken Sie dann im Dialogfeld Einfgeoptionen
auswhlen auf Fertig. Wenn Sie sich in der Entwurfsansicht befinden, sehen Sie, dass die Tabelle nun mit einer Kopfzeile und einer Zeile mit Datenverweisen angezeigt wird. Die Datenverweise sind hervorgehoben und in geschweifte Klammern ({}) eingeschlossen. Master-/Detaillayout Whlen Sie die Option Master-/Detaillayout einfgen aus, wenn Sie die Daten in einem Master-/Detaillayout anzeigen mchten. Bei einem Master-/Detaillayout werden durch Klicken auf ein Element im Masterbereich (links) die Informationen im Detailbereich (rechts) aktualisiert. Der Masterbereich enthlt blicherweise eine lange Liste mit Namen, z. B. eine Liste verfgbarer Produkte. Wenn der Benutzer auf einen der Produktnamen klickt, werden im Detailbereich ausfhrlichere Informationen ber das ausgewhlte Produkt angezeigt. Klicken Sie nach der Auswahl dieser Option auf die Schaltflche Einrichten, um das Dialogfeld Master/Detaillayout einfgen zu ffnen, und fhren Sie dann die folgenden Schritte aus:
1 Passen Sie im Dialogfeldbereich Masterspalten den Inhalt des Masterbereichs wie folgt an:
Markieren Sie einen Spaltennamen und klicken Sie auf das Minussymbol (-), um die Spalte aus dem
Masterbereich zu lschen. Klicken Sie auf das Plussymbol (+) und whlen Sie einen Spaltennamen aus, um dem Masterbereich neue Spalten hinzuzufgen. Standardmig wird in Dreamweaver der Masterbereich mit Daten aus der ersten Spalte des Datensatzes gefllt.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 504
Spry-Seiten visuell erstellen
Markieren Sie einen Spaltennamen und klicken Sie auf den Pfeil nach oben bzw. unten, um die Spalte zu
verschieben. Durch das Verschieben einer Spalte im Dialogfeldbereich Masterspalten nach oben oder unten wird die Anordnung der Datendarstellung im Masterbereich der Seite festgelegt.
2 Wiederholen Sie die oben aufgefhrten Schritte fr den Dialogfeldbereich Detailspalten. Standardmig wird in
Dreamweaver der Detailbereich mit allen Daten gefllt, die nicht im Masterbereich angezeigt werden (d. h. alle Spalten des Datensatzes auer der ersten).
3 Optional: Legen Sie fr Daten im Detailbereich unterschiedliche Containertypen fest. Markieren Sie dazu den
Namen einer Detailspalte und whlen Sie im Popupmen Containertyp den dafr zu verwendenden Container aus. Sie knnen zwischen den Tags DIV, P, SPAN oder H1-H6 auswhlen.
4 Klicken Sie auf OK, um das Dialogfeld zu schlieen, und klicken Sie dann im Dialogfeld Einfgeoptionen
auswhlen auf Fertig. Wenn Sie sich in der Entwurfsansicht befinden, sehen Sie, dass nun die Master- und Detailbereiche angezeigt werden und mit den von Ihnen ausgewhlten Datenverweisen gefllt sind. Die Datenverweise sind hervorgehoben und in geschweifte Klammern ({}) eingeschlossen. Layout mit gestapelten Containern Whlen Sie die Option Gestapelte Container einfgen aus, wenn Sie die Daten auf der Seite in einer sich wiederholenden Containerstruktur anzeigen mchten. Wenn sich im Datensatz beispielsweise 4 Datenspalten befinden, kann jeder Container alle vier Spalten enthalten und die Containerstruktur wiederholt sich fr jede Datensatzzeile. Klicken Sie nach der Auswahl dieser Option auf die Schaltflche Einrichten, um das Dialogfeld Gestapelte Container einfgen zu ffnen, und fhren Sie dann die folgenden Schritte aus:
1 Passen Sie im Dialogfeldbereich Spalten den Inhalt der gestapelten Container wie folgt an:
Markieren Sie einen Spaltennamen und klicken Sie auf das Minussymbol (-), um die Spalte aus den gestapelten
Containern zu lschen. Klicken Sie auf das Plussymbol (+) und whlen Sie einen Spaltennamen aus, um den Containern neue Spalten hinzuzufgen. Standardmig werden in Dreamweaver gestapelte Container mit Daten aus jeder Spalte des Datensatzes gefllt.
Markieren Sie einen Spaltennamen und klicken Sie auf den Pfeil nach oben bzw. unten, um die Spalte zu
verschieben. Durch das Verschieben einer Spalte im Dialogfeldbereich Spalten nach oben oder unten wird die Anordnung der Datendarstellung fr die gestapelten Container auf der Seite festgelegt.
2 Optional: Legen Sie fr Daten in den gestapelten Containern unterschiedliche Containertypen fest. Markieren Sie
dazu den Namen einer Datensatzspalte und whlen Sie im Popupmen Containertyp den dafr zu verwendenden Container aus. Sie knnen zwischen den Tags DIV, P, SPAN oder H1-H6 auswhlen.
3 Klicken Sie auf OK, um das Dialogfeld zu schlieen, und klicken Sie dann im Dialogfeld Einfgeoptionen
auswhlen auf Fertig. Wenn Sie sich in der Entwurfsansicht befinden, sehen Sie, dass nun die Container angezeigt werden und mit den von Ihnen ausgewhlten Datenverweisen gefllt sind. Die Datenverweise sind hervorgehoben und in geschweifte Klammern ({}) eingeschlossen. Layout mit gestapelten Containern mit Spotlight-Bereich Whlen Sie die Option Gestapelte Container mit Spotlight-Bereich einfgen aus, wenn Sie die Daten auf der Seite in einer sich wiederholenden Containerstruktur mit einem Spotlight-Bereich fr jeden Container anzeigen mchten. Der Spotlight-Bereich enthlt in der Regel ein Bild. Das Layout mit Spotlight-Bereich hnelt dem Layout mit gestapelten Containern. Der Unterschied besteht darin, dass die Datenanzeige beim Layout mit Spotlight-Bereich in zwei getrennte Spalten (innerhalb desselben Containers) unterteilt ist.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 505
Spry-Seiten visuell erstellen
Klicken Sie nach der Auswahl dieser Option auf die Schaltflche Einrichten, um das Dialogfeld Spotlight-BereichLayout einfgen zu ffnen, und fhren Sie dann die folgenden Schritte aus:
1 Passen Sie im Dialogfeldbereich Spotlight-Spalten den Inhalt des Spotlight-Bereichs wie folgt an:
Markieren Sie einen Spaltennamen und klicken Sie auf das Minussymbol (-), um die Spalte aus dem SpotlightBereich zu lschen. Klicken Sie auf das Plussymbol (+) und whlen Sie einen Spaltennamen aus, um dem Spotlight-Bereich neue Spalten hinzuzufgen. Standardmig wird in Dreamweaver der Spotlight-Bereich mit Daten aus der ersten Spalte des Datensatzes gefllt.
Markieren Sie einen Spaltennamen und klicken Sie auf den Pfeil nach oben bzw. unten, um die Spalte zu
verschieben. Durch das Verschieben einer Spalte im Dialogfeldbereich Spotlight-Spalten nach oben oder unten wird die Anordnung der Datendarstellung im Spotlight-Bereich der Seite festgelegt.
2 Optional: Legen Sie fr Daten im Spotlight-Bereich unterschiedliche Containertypen fest. Markieren Sie dazu den
Namen einer Datensatzspalte und whlen Sie im Popupmen Containertyp den dafr zu verwendenden Container aus. Sie knnen zwischen den Tags DIV, P, SPAN oder H1-H6 auswhlen.
3 Wiederholen Sie die oben aufgefhrten Schritte fr den Dialogfeldbereich Gestapelte Spalten. Standardmig
werden in Dreamweaver die gestapelten Spalten mit allen Daten gefllt, die nicht im Spotlight-Bereich angezeigt werden (d. h. alle Spalten des Datensatzes auer der ersten).
4 Klicken Sie auf OK, um das Dialogfeld zu schlieen, und klicken Sie dann im Dialogfeld Einfgeoptionen
auswhlen auf Fertig. Wenn Sie sich in der Entwurfsansicht befinden, sehen Sie, dass nun die Spotlight-Bereiche und daneben die gestapelten Containern angezeigt werden und mit den von Ihnen ausgewhlten Datenverweisen gefllt sind. Die Datenverweise sind hervorgehoben und in geschweifte Klammern ({}) eingeschlossen. Kein HTML einfgen Whlen Sie diese Option aus, wenn Sie einen Datensatz erstellen mchten, Dreamweaver jedoch kein HTML-Layout fr den Datensatz einfgen soll. Der Datensatz steht im Bedienfeld Bindungen (Fenster > Bindungen) zur Verfgung und Sie knnen einzelne Daten des Datensatzes manuell auf die Seite ziehen. Auch wenn Sie einen Datensatz zuerst ohne Einfgen von Layout-Code erstellen, knnen Sie spter jederzeit eins der verfgbaren Layouts einfgen. Doppelklicken Sie dazu im Bedienfeld Bindungen auf den Namen des Datensatzes, navigieren Sie durch die angezeigten Dialogfelder bis zum Dialogfeld Einfgeoptionen auswhlen, whlen Sie das gewnschte Layout aus und klicken Sie auf Fertig. Hinweis: Sie knnen auch den Namen des Datensatzes aus dem Bedienfeld Bindungen an den gewnschten Einfgepunkt auf der Webseite ziehen. Dabei ffnet sich das Dialogfeld Einfgeoptionen auswhlen. Nehmen Sie die gewnschte Layoutauswahl vor und klicken Sie auf Fertig.
Datenstze bearbeiten
Nachdem Sie einen Spry-Datensatz erstellt haben, knnen Sie ihn jederzeit bearbeiten.
Doppelklicken Sie im Bedienfeld Bindungen (Fenster > Bindungen) auf den Namen des Datensatzes und
nehmen Sie die gewnschten nderungen vor. Hinweis: Wenn Sie einen Datensatz bearbeiten und im Dialogfeld Einfgeoptionen auswhlen ein neues Layout auswhlen, ersetzt Dreamweaver nicht das Layout auf der Seite sondern fgt stattdessen ein neues Layout ein.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 506
Spry-Seiten visuell erstellen
Entwurfsphasen-Feeds verwenden
Wenn Sie mit in der Entwicklung befindlichen Daten arbeiten, kann sich der Einsatz eines Entwurfsphasen-Feeds als ntzlich erweisen. Wenn beispielsweise der Server-Entwickler die Datenbank fr Ihre XML-Datendatei noch nicht fertig gestellt hat, knnen Sie Ihre Seite unabhngig vom Entwicklungsstand mit einer Testversion der Datei erstellen. Wenn Sie einen Entwurfsphasen-Feed verwenden, fllt Dreamweaver nur Ihre Arbeitsumgebung mit Daten aus diesem Feed. Im Seitencode vorhandene Verweise auf die Datenquelle verweisen weiter auf die tatschlich zu verwendende Datenquelle.
1 Beginnen Sie mit dem Erstellen eines Spry-Datensatzes (entsprechende Anweisungen finden Sie in den
vorangegangenen Abschnitten).
2 Klicken Sie im Dialogfeld Datenquelle angeben auf den Hyperlink Entwurfsphasen-Feed. 3 Klicken Sie auf die Schaltflche Durchsuchen, um den Entwurfsphasen-Feed zu suchen, und klicken Sie dann auf
OK.
Spry-Datensatzselektoren
Wenn Sie einen Spry-Datensatz mit Dreamweaver erstellen, werden standardmig alle Daten im ausgewhlten Container eingefgt. Sie knnen diese Auswahl durch die Verwendung von CSS-Datenselektoren verfeinern. Mit CSSDatenselektoren ist es mglich, nur Teile der Daten einer Datenquelle aufzunehmen, indem Sie CSS-Regeln angeben, die bestimmten Daten zugeordnet sind. Wenn Sie beispielsweise im Textfeld Zeilenselektoren des Dialogfelds Datenquelle angeben den Wert .product angeben, erstellt Dreamweaver einen Datensatz, der nur die Zeilen enthlt, denen die Klasse .product zugewiesen ist. Sie mssen im Dialogfeld Datenquelle angeben das Kontrollkstchen Erweiterte Datenauswahl aktivieren, damit auf die Datenselektor-Textfelder zugegriffen werden kann. Wenn Sie Datenselektoren eingeben und dann das Kontrollkstchen deaktivieren, bleibt der in die Textfelder eingegebene Inhalt zwar erhalten, wird jedoch nicht mehr zum Filtern des Datensatzes verwendet.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 507
Spry-Seiten visuell erstellen
In Dreamweaver werden Master-/Detaillayouts automatisch erstellt, sodass alle Zuordnungen zwischen Master- und Detailbereich korrekt eingerichtet sind. Wenn Sie jedoch selbst eine dynamische Mastertabelle erstellen mchten, besteht die Mglichkeit, sie fr die sptere Zuordnung zu einem Detailbereich vorzubereiten. Wenn Sie (im Dialogfeld Tabelle einfgen) das Kontrollkstchen Detailbereiche beim Klicken auf Zeile aktualisieren aktivieren, fgt Dreamweaver innerhalb des Tags fr die sich wiederholende Zeile der dynamischen Tabelle ein Tag spry:setrow ein. Mit diesem Attribut wird die Tabelle als Mastertabelle vorbereitet, mit der die aktuelle Zeile des Datensatzes in Abhngigkeit von Benutzerinteraktionen mit der Tabelle neu festgelegt werden kann. Weitere Informationen zum manuellen Erstellen von Master- und Detailbereichen finden Sie im SpryEntwicklerhandbuch unter www.adobe.com/go/learn_dw_sdg_masterdetail_de.
Spry-Bereiche erstellen
Fr das Spry-Framework werden zwei Bereichstypen verwendet. Einer davon ist der Spry-Bereich, der Datenobjekte wie Tabellen und Wiederholungslisten umschliet, der andere ist der Spry-Detailbereich, der zusammen mit Mastertabellenobjekten verwendet wird und die dynamische Aktualisierung von Daten auf einer Dreamweaver Seite ermglicht. Alle Spry-Datenobjekte mssen in einem Spry-Bereich eingeschlossen sein. (Wenn Sie noch keinen Spry-Bereich erstellt haben und ein Spry-Datenobjekt zu einer Seite hinzufgen wollen, werden Sie von Dreamweaver aufgefordert, zunchst einen Spry-Bereich zu erstellen.) Spry-Bereiche befinden sich standardmig in HTML-<div>-Containern. Sie knnen Sie vor dem Erstellen von Tabellen hinzufgen, automatisch beim Einfgen von Tabellen oder Wiederholungslisten erstellen oder bestehende Tabellen oder Wiederholungslistenobjekte darin einschlieen. Beim Hinzufgen von Detailbereichen beginnen Sie normalerweise mit dem Mastertabellenobjekt und aktivieren dann das Kontrollkstchen Detailbereiche beim Klicken auf Zeile aktualisieren (siehe Layout mit dynamischer Tabelle auf Seite 502). Der einzige Wert, der fr einen Detailbereich typisch ist, ist die Option Typ im Dialogfeld Spry-Bereich einfgen.
1 Whlen Sie Einfgen > Spry > Spry-Bereich.
Sie knnen auch in der Kategorie Spry des Bedienfelds Einfgen auf die Schaltflche Spry-Bereich klicken.
2 Fr den Objektcontainer whlen Sie die Option <DIV> oder <SPAN>. Standardmig wird ein <div>-
Container verwendet.
3 Whlen Sie eine der folgenden Optionen aus:
Um einen Spry-Bereich zu erstellen, whlen Sie unter Typ die Option Bereich. Um einen Spry-Detailbereich zu erstellen, whlen Sie die Option Detailbereich. Das sollten Sie nur tun, wenn Sie
dynamische Daten binden wollen, die bei sich verndernden Daten in einem anderen Spry-Bereich aktualisiert werden. Wichtig: Detailbereiche mssen in einem anderen <div> als dem des Mastertabellenbereichs eingefgt werden. Um den Einfgepunkt przise zu setzen, empfiehlt es sich, in die Codeansicht zu wechseln.
4 Whlen Sie Ihren Spry-Datensatz aus dem Men. 5 Wenn Sie den definierten Bereich fr ein Objekt erstellen bzw. ndern mchten, whlen Sie zunchst das Objekt
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 508
Spry-Seiten visuell erstellen
6 Wenn Sie auf OK klicken, fgt Dreamweaver einen Bereichsplatzhalter mit dem Text Inhalt fr Spry-Bereich
hier einfgen in Ihre Seite ein. Sie knnen diesen Platzhaltertext durch ein Spry-Datenobjekt, z. B. eine Tabelle oder Wiederholungsliste, oder durch dynamische Daten aus dem Bedienfeld Bindungen (Fenster > Bindungen) ersetzen.
Hinweis: Das Bedienfeld Bindungen beinhaltet einige integrierte Spry-Elemente, darunter auch ds_RowID, ds_CurrentRowID und ds_RowCount. Anhand dieser Elemente kann in Spry die Zeile ermittelt werden, auf die der Benutzer geklickt hat, um dann die dynamischen Detailbereiche aktualisieren zu knnen.
7 Klicken Sie dazu in der Kategorie Spry des Bedienfelds Einfgen auf die Schaltflche fr das entsprechende
Spry-Datenobjekt.
8 Um den Platzhaltertext mit dynamischen Daten zu ersetzen, whlen Sie eine der folgenden Mglichkeiten:
Ziehen Sie ein oder mehrere Elemente aus dem Bedienfeld Bindungen ber den ausgewhlten Text. Geben Sie in der Codeansicht den Code fr ein oder mehrere Elemente ein. Verwenden Sie folgendes Format:
{dataset-name::element-name}, wie in {ds1::category}. oder {dsProducts::desc}. Wenn Sie in Ihrer Datei nur einen Datensatz oder Datenelemente aus dem fr Ihren Bereich verwendeten Satz benutzen, knnen Sie den Namen des Datensatzes weglassen und dafr {category} oder {desc} schreiben.
Welche Methode Sie fr die Definition der Inhalte Ihres Bereichs auch verwenden, in jedem Fall werden folgende Zeilen zu Ihrem HTML-Code hinzugefgt:
<div spry:region="ds1">{name}{category}</div> <div spry:region="ds2">{ds1::name}{ds1::descheader}</div>
Spry-Wiederholungsbereiche erstellen
Sie knnen Wiederholungsbereiche zur Anzeige Ihrer Daten hinzufgen. Bei einem Wiederholungsbereich handelt es sich um eine einfache Datenstruktur, die Sie beliebig fr die Anzeige Ihrer Daten formatieren knnen. So knnen Sie beispielsweise mithilfe eines Wiederholungsbereichs mehrere Fotominiaturansichten nacheinander in einem Seitenlayoutobjekt (z. B. in einem AP-div-Element) anzeigen.
1 Whlen Sie Einfgen > Spry > Spry-Wiederholung.
Sie knnen auch in der Kategorie Spry des Bedienfelds Einfgen auf die Schaltflche Spry-Wiederholung klicken.
2 Fr den Objektcontainer whlen Sie je nach gewnschtem Tag-Typ die Option <DIV> oder <SPAN>.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 509
Spry-Seiten visuell erstellen
Um flexibel zu bleiben, whlen Sie die Option Untergeordnete Elemente wiederholen. Dadurch wird die Datenberprfung in jeder Listenzeile auf der untergrordneten Ebene durchgefhrt. Angenommen, Sie haben eine <ul>-Liste und die Daten werden auf <li>-Ebene eingecheckt. Wenn Sie die Option Wiederholen whlen, werden die Daten auf der <ul>-Ebene eingecheckt. Die Option Untergeordnete Elemente wiederholen kann sich als besonders ntzlich erweisen, wenn Sie in Ihrem Code bedingte Ausdrcke verwenden.
4 Whlen Sie Ihren Spry-Datensatz aus dem Men. 5 Wenn bereits ein Text oder Element ausgewhlt ist, knnen Sie ihn/es umschlieen oder ersetzen. 6 Klicken Sie auf OK, um einen Wiederholungsbereich auf Ihrer Seite anzuzeigen.
Hinweis: Alle Spry-Datenobjekte mssen sich in entsprechenden Bereichen befinden, um sicherzustellen, dass Sie vor dem Einfgen eines wiederholenden Bereichs einen Spry-Bereich auf der Seite erstellt haben.
7 Wenn Sie auf OK klicken, fgt Dreamweaver einen Bereichsplatzhalter mit dem Text Inhalt fr Spry-Bereich
hier einfgen in Ihre Seite ein. Sie knnen diesen Platzhaltertext durch ein Spry-Datenobjekt, z. B. eine Tabelle oder Wiederholungsliste, oder durch dynamische Daten aus dem Bedienfeld Bindungen (Fenster > Bindungen) ersetzen.
Hinweis: Das Bedienfeld Bindungen beinhaltet einige integrierte Spry-Elemente, darunter auch ds_RowID, ds_CurrentRowID und ds_RowCount. Anhand dieser Elemente kann in Spry die Zeile ermittelt werden, auf die der Benutzer geklickt hat, um dann die dynamischen Detailbereiche aktualisieren zu knnen.
8 Klicken Sie dazu in der Kategorie Spry des Bedienfelds Einfgen auf die Schaltflche fr das entsprechende
Spry-Datenobjekt.
9 Um den Platzhaltertext mit einem oder mehreren dynamischen Datenstzen zu ersetzen, whlen Sie eine der
folgenden Mglichkeiten:
Ziehen Sie ein oder mehrere Elemente aus dem Bedienfeld Bindungen ber den ausgewhlten Text. Geben Sie in der Codeansicht den Code fr ein oder mehrere Elemente ein. Verwenden Sie folgendes Format:
{dataset-name::element-name}, wie in {ds1::category}. oder {dsProducts::desc}. Wenn Sie in Ihrer Datei nur einen Datensatz oder Datenelemente aus dem fr Ihren Bereich verwendeten Satz benutzen, knnen Sie den Namen des Datensatzes weglassen und dafr {category} oder {desc} schreiben.
Welche Methode Sie fr die Definition der Inhalte Ihres Bereichs auch verwenden, in jedem Fall werden folgende Codezeilen zu Ihrem HTML-Code hinzugefgt:
<div spry:region="ds1">{name}{category}</div> <div spry:region="ds2">{ds1::name}{ds1::descheader}</div>
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 510
Spry-Seiten visuell erstellen
Spry-Wiederholungslistenbereiche erstellen
Sie knnen Wiederholungslisten zur Anzeige Ihrer Daten als geordnete oder ungeordnete (mit Aufzhlungszeichen) Listen, Definitionslisten oder Dropdown-Listen hinzufgen.
1 Whlen Sie Einfgen > Spry > Spry-Wiederholungsliste.
Sie knnen auch in der Kategorie Spry des Bedienfelds Einfgen auf die Schaltflche Spry-Wiederholungsliste klicken.
2 Whlen Sie das Container-Tag aus, das Sie verwenden wollen: UL, OL, DL oder SELECT. Die anderen Optionen
variieren je nach ausgewhltem Container. Wenn Sie SELECT whlen, mssen Sie folgende Felder definieren:
Spalte anzeigen: Dieser Seiteninhalt wird dem Benutzer im Browser angezeigt. Wertespalte Dies ist der an den Background-Server gesendete Wert.
So knnen Sie beispielsweise eine Liste der US-Bundesstaaten erstellen und dem Benutzer Namen wie Alabama und Alaska anzeigen. An den Server wird allerdings AL bzw. AK gesendet. Oder Sie verwenden SELECT als Navigationsleiste und zeigen dem Benutzer Produktnamen wie Adobe Dreamweaver und Adobe Acrobat an, senden aber URLs wie support/products/dreamweaver.html und support/products/acrobat.html an den Server.
3 Whlen Sie Ihren Spry-Datensatz aus dem Men. 4 Whlen Sie die anzuzeigenden Spalten. 5 Klicken Sie auf OK, um eine Wiederholungsliste auf Ihrer Seite anzuzeigen. In der Codeansicht sehen Sie, dass
<ul>-, <ol>-, <dl>-HTML- oder FORM-Auswahl-Tags in Ihre Datei eingefgt wurden. Hinweis: Wenn noch kein Bereich vorhanden ist und Sie eine Wiederholungsliste hinzufgen wollen, werden Sie von Dreamweaver aufgefordert, zunchst einen Bereich zu erstellen. Alle Spry-Datenobjekte mssen in Bereichen enthalten sein.
Spry-Effekte hinzufgen
Spry-Effekte
Spry-Effekte sind optische Verbesserungen, die Sie mithilfe von JavaScript auf praktisch alle Elemente einer HTMLSeite anwenden knnen. Solche Effekte werden oft zum Hervorheben von Informationen, Erstellen von animierten bergngen oder temporre nderungen des Erscheinungsbilds eines Seitenelements verwendet. Sie knnen Effekte auf HTML-Elemente anwenden, ohne spezielle zustzliche Tags zu bentigen. Hinweis: Um einen Effekt auf ein Element anwenden zu knnen, muss dieses ausgewhlt sein oder eine ID besitzen. Wenn Sie beispielsweise ein nicht ausgewhltes div-Tag markieren mchten, muss dieses einen gltigen ID-Wert besitzen. Wenn das Element nicht schon eines besitzt, mssen Sie eines zum HTML-Code hinzufgen. Effekte knnen die Transparenz, Skalierung, Position oder Stil, z. B. die Hintergrundfarbe, eines Elements beeinflussen. Durch die Kombination zweier oder mehrerer Effekte lassen sich interessante optische Effekte erzielen. Da diese Effekte auf Spry basieren, wird beim Klicken auf ein Objekt, auf das ein Effekt angewendet wurde, nur das Objekt und nicht die gesamte HTML-Seite aktualisiert. Spry verfgt ber folgende Effekte:
Einblenden/Ausblenden Blendet Elemente ein oder aus. Markieren ndert die Hintergrundfarbe eines Elements.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 511
Spry-Seiten visuell erstellen
Jalousie Simuliert eine Fensterjalousie, die das Element beim ffnen bzw. Schlieen verbirgt oder zeigt. Schieben Verschiebt das Element nach oben bzw. unten. Vergrern/Verkleinern Vergrert bzw. verkleinert das Element. Schtteln Simuliert das Schtteln eines Elements von links nach rechts. Quetschen Lsst das Element an der oberen linken Seitenecke verschwinden.
Wichtig: Wenn Sie Effekte verwenden, werden mehrere Zeilen Code zu Ihrer Datei in der Codeansicht hinzugefgt. Eine Zeile steht fr die Datei SpryEffects.js, die fr das Hinzufgen von Effekten erforderlich ist. Wenn Sie diese Zeile entfernen, knnen die Effekte nicht funktionieren. Einen umfassenden berblick ber die Effekte des Spry-Frameworks finden Sie unter www.adobe.com/go/learn_dw_spryeffects_de.
Ein-/Ausblendeffekte anwenden
Hinweis: Sie knnen diesen Effekt mit allen HTML-Elementen auer applet, body, iframe, object, tr, tbody und th verwenden.
1 Optional: Whlen Sie den Inhalt oder das Layoutelement aus, auf den bzw. das Sie den Effekt anwenden mchten. 2 Klicken Sie im Bedienfeld Verhalten (Fenster > Verhalten) auf das Plussymbol (+) und whlen Sie im Men
haben soll.
7 Im Feld Ausblenden bis bestimmen Sie den Prozentsatz fr die Transparenz, auf den ausgeblendet werden soll. 8 Whlen Sie die Option Effekt umkehren, wenn der Effekt umkehrbar sein soll, also bei wiederholtem Klicken ein-
Jalousieeffekte anwenden
Hinweis: Diesen Effekt knnen Sie nur mit den HTML-Elementen address, dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6, p, ol, ul, li, applet, center, dir, menu oder pre verwenden.
1 Optional: Whlen Sie den Inhalt oder das Layoutelement aus, auf den bzw. das Sie den Effekt anwenden mchten. 2 Klicken Sie im Bedienfeld Verhalten (Fenster > Verhalten) auf das Plussymbol (+) und whlen Sie im Men
Prozent bzw. Pixel fest. Diese Werte werden ab dem Anfangspunkt des Elements berechnet.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 512
Spry-Seiten visuell erstellen
7 Legen Sie mit der Option Jalousie nach oben bis oder Jalousie nach unten bis den Endpunkt der Jalousie in
Prozent oder Pixel fest. Diese Werte werden ab dem Anfangspunkt des Elements berechnet.
8 Whlen Sie die Option Effekt umkehren, wenn der Effekt umkehrbar sein soll, also die Jalousie bei wiederholtem
Vergrern/Verkleinern-Effekte anwenden
Hinweis: Diesen Effekt knnen Sie mit den HTML-Elementen address, dd, div, dl, dt, form, p, ol, ul, applet, center, dir, menu und pre verwenden.
1 Optional: Whlen Sie den Inhalt oder das Layoutelement aus, auf den bzw. das Sie den Effekt anwenden mchten. 2 Klicken Sie im Bedienfeld Verhalten (Fenster > Verhalten) auf das Plussymbol (+) und whlen Sie im Men
Dabei handelt es sich um eine prozentuale Gre oder einen Wert in Pixel.
7 Legen Sie im Feld Vergrern auf oder Verkleinern auf die Gre des Elements am Ende des Effekts fest. Zur
angezeigt. Je nach der gewhlten Option wird das Element proportional verkleinert bzw. vergrert.
9 Entscheiden Sie, ob Sie das Element zur oberen linken Ecke oder zur Mitte der Seite hin vergrern bzw.
verkleinern mchten.
10 Whlen Sie die Option Effekt umkehren, wenn der Effekt umkehrbar sein soll, also bei wiederholtem Klicken
Hervorhebungseffekte anwenden
Hinweis: Dieser Effekt kann mit allen HTML-Elementen auer applet, body, frame, frameset oder noframes verwendet werden.
1 Optional: Whlen Sie den Inhalt oder das Layoutelement aus, auf den bzw. das Sie den Effekt anwenden mchten. 2 Klicken Sie im Bedienfeld Verhalten (Fenster > Verhalten) auf das Plussymbol (+) und whlen Sie im Men
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 513
Spry-Seiten visuell erstellen
Schtteleffekte anwenden
Hinweis: Diesen Effekt knnen Sie mit den HTML-Elementen address, blockquote, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, iframe, img, object, p, ol, ul, li, applet, dir, hr, menu, pre und table verwenden.
1 Optional: Whlen Sie den Inhalt oder das Layoutelement aus, auf den bzw. das Sie den Effekt anwenden mchten. 2 Klicken Sie im Bedienfeld Verhalten (Fenster > Verhalten) auf das Plussymbol (+) und whlen Sie im Men
Verschiebungseffekte anwenden
Damit Verschiebungseffekte korrekt ausgefhrt werden knnen, muss das Zielelement in einem Container-Tag mit einer eindeutigen ID eingeschlossen sein. Bei dem Container-Tag, in den das Zielelement eingeschlossen ist, muss es sich um ein blockquote-, dd-, form-, div- oder center-Tag handeln. Beim Tag fr das Zielelement muss es sich um eines der folgenden Tags handeln: blockquote, dd, div, form, center, table, span, input, textarea, select oder image.
1 Optional: Whlen Sie das Container-Tag des Inhalts aus, auf den der Effekt angewendet werden soll. 2 Klicken Sie im Bedienfeld Verhalten (Fenster > Verhalten) auf das Plussymbol (+) und whlen Sie im Men
Quetscheffekte anwenden
Hinweis: Diesen Effekt knnen Sie nur mit den HTML-Elementen address, dd, div, dl, dt, form, img, p, ol, ul, applet, center, dir, menu und pre verwenden.
1 Optional: Whlen Sie den Inhalt oder das Layoutelement aus, auf den bzw. das Sie den Effekt anwenden mchten. 2 Klicken Sie im Bedienfeld Verhalten (Fenster > Verhalten) auf das Plussymbol (+) und whlen Sie im Men
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 514
Spry-Seiten visuell erstellen
2 Klicken Sie im Bedienfeld Verhalten (Fenster > Verhalten) auf das Plussymbol (+) und whlen Sie im Men
Effekte lschen
Sie knnen ein oder mehrere Effektverhalten aus einem Element entfernen.
1 Optional: Whlen Sie den Inhalt oder das Layoutelement aus, auf den bzw. das Sie den Effekt anwenden mchten. 2 Klicken Sie im Bedienfeld Verhalten (Fenster > Verhalten) auf den Effekt, den Sie aus der Liste der Verhalten
entfernen mchten.
3 Fhren Sie einen der folgenden Schritte aus:
Klicken Sie auf die Schaltflche mit dem QuickInfo Ereignis entfernen (-) oberhalb der Effektliste. Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste (Macintosh) und whlen Sie
Verhalten lschen.
ENTWURF
Letzte Aktualisierung 19.3.2010
515
Review-Umgebung frei und speichern Sie Dateien per Remote-Zugriff. Sie mssen sich keine Gedanken ber Plattformkompatibilitt, sich berschneidende Firewalls oder die Installation von Software machen.
Adobe BrowserLab Erstellen Sie Bildschirmfotos Ihrer Webseiten, die in verschiedenen Browsern und
CS Live Services umfasst die folgenden vier Online-Services: ConnectNow, BrowserLab, CS Review und Acrobat.com. Weitere Informationen zum Verwalten Ihrer Services finden Sie auf der Adobe-Website unter www.adobe.com/go/learn_creativeservices_de. Einige Anwendungen der Creative Suite 5 umfassen individuelle Services.
zugehrige Kennwort ein. Klicken Sie dann auf Anmelden. Hinweis: Die Anwendung, in der Sie gerade arbeiten, bernimmt fr Sie die Anmeldung, falls Sie bei der Installation Ihre Adobe-ID und das Kennwort eingegeben haben.
3 (Optional) Wenn Sie beim Neustarten der Anwendung angemeldet bleiben mchten, aktivieren Sie die Option
Angemeldet bleiben.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 516
Adobe Online-Dienste verwenden
BrowserLab
Mit Adobe BrowserLab knnen Sie eine Vorschau lokaler Webinhalte innerhalb von Dreamweaver anzeigen, ohne diese zuvor auf einem ffentlich zugnglichen Server ablegen zu mssen. Sie knnen ein Vorschau der lokalen Dreamweaver-Site oder auch der Site von einem Remote- bzw. Testserver anzeigen. Ein Video des Dreamweaver-Entwicklungsteams mit einem berblick ber die Verwendung von BrowserLab finden Sie unter www.adobe.com/go/dwcs5browserlab_de.
Hinweis: Die von Ihnen vorgenommene Auswahl des Speicherorts bleibt bestehen, bis Sie diese wieder ndern.
Lokal Weist BrowserLab an, eine Vorschau der Dateien der lokalen Site anzuzeigen. Beim Anzeigen der Vorschau
einer Datei aus der Entwurfs- oder Code-Ansicht verwendet BrowserLab die lokale Datei als Quelle fr Screenshots. Beim Anzeigen der Vorschau einer Datei aus der Live-Ansicht verwendet BrowserLab die von WebKit (die Rendering-Engine fr die Live-Ansicht) gerenderte Seite als Quelle fr Screenshots.
Server Weist BrowserLab an, eine Vorschau der Dateien auf dem aktiven Server anzuzeigen.
Beim Anzeigen der Vorschau von Dateien mithilfe der Serverkonfiguration (d. h. keine Dateien in der lokalen Dreamweaver-Site) ist der von BrowserLab verwendete Server der gerade in Dreamweaver aktive Server. Der aktive Server ist der Server, den Sie zuletzt im erweiterten oder reduzierten Bedienfeld Dateien aus dem ###Ansichtsmen ###Server ausgewhlt haben. Wenn Sie z. B. Dateien aus der lokalen Site an einen festgelegten Testserver hochgeladen haben, verwendet BrowserLab fr Screenshots die angegebene Datei auf dem Testserver. Diese Einstellung wird in Dreamweaver beibehalten, bis Sie den aktiven Server manuell ndern. Um anzuzeigen, welches gerade Ihr aktiver Server ist, klicken Sie im Bedienfeld Dateien auf die Schaltflche Erweitern. Der dort ausgewhlte Server (Test- oder Remote-Server) ist der aktive Server. Wichtig: Wenn es sich bei dem aktiven Server um einen Remote-Server (z. B. einen Remote-Bereitstellungsserver) oder einen Testserver handelt, muss in der Bearbeitungsansicht Einfach des Servers das Textfeld Web-URL ausgefllt werden. Die Web-URL muss dem angegebenen Remote- oder Testserver-Standort entsprechen (FTPAdresse fr FTP-Sites, Remote-Ordner fr Lokal/Netzwerk-Sites usw.).
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 517
Adobe Online-Dienste verwenden
Eine Vorschau der Seite wird in BrowserLab angezeigt, ohne dass Sie die lokalen nderungen zuvor speichern mssen.
Verwandte Themen
Seitenvorschau in Dreamweaver auf Seite 307 Testserver einrichten auf Seite 49 Web-URL fr den Testserver auf Seite 50
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 518
Adobe Online-Dienste verwenden
In dieser Dokumentation erfahren Sie mehr zum Umgang mit bearbeitbaren InContext Editing-Bereichen in Dreamweaver. Adobe bietet auerdem eine Reihe weiterer Ressourcen fr das Arbeiten mit InContext Editing:
Ein Video mit einem berblick ber Adobe InContext Editing finden Sie unter
www.adobe.com/go/lrvid4045_dw_de.
Weitere Ressourcen zu den ersten Schritten mit InContext Editing (einschlielich Tutorials) finden Sie unter
www.adobe.com/go/incontextediting_getstarted_de.
Eine Dokumentation zum Verwenden von InContext Editing fr das Bearbeiten von Seiten in einem Browser
finden Sie unter www.adobe.com/go/learn_dw_incontextediting_browser_de.
Eine Dokumentation zum Arbeiten mit dem Verwaltungsbedienfeld fr InContext Editing finden Sie unter
www.adobe.com/go/learn_dw_incontextediting_administration_guide_de. Hinweis: Adobe Business Catalyst InContext Editing wird unter bestimmten Bedingungen nicht korrekt ausgefhrt. Eine Aufstellung spezifischer Netzwerk-, Browser-, Seiten- und Bearbeitungseinschrnkungen finden Sie unter www.adobe.com/go/incontextediting_limitations_de. Hinweis: Adobe Business Catalyst InContext Editing wird von Adobe AIR nicht untersttzt. Wenn Sie mithilfe der AIRErweiterung fr Dreamweaver eine Anwendung exportieren, die InContext Editing-Bereiche enthlt, knnen die InContext Editing-Funktionen nicht ausgefhrt werden.
Markieren Sie ein div-, th- oder td-Tag, das Sie in einen bearbeitbaren Bereich umwandeln mchten. Setzen Sie die Einfgemarke an die Stelle, an der Sie einen neuen bearbeitbaren Bereich auf der Seite einfgen
mchten.
Whlen Sie genau einen bearbeitbaren Bereich in einer Dreamweaver-Vorlage (DWT-Datei) aus. Whlen Sie weitere Seiteninhalte aus, die bearbeitbar sein sollen (beispielsweise ein Textblock).
2 Whlen Sie Einfgen > InContext Editing > Bearbeitbaren Bereich erstellen aus. 3 Je nach Ihrer Auswahl stehen Ihnen verschiedene Optionen zur Verfgung.
Bei Auswahl eines div-, th- oder td-Tags wandelt Dreamweaver das Tag automatisch und ohne weitere Schritte
in einen bearbeitbaren Bereich um.
Wenn Sie einen neuen, leeren bearbeitbaren Bereich einfgen, fhren Sie einen der folgenden Schritte aus: Whlen Sie die Option Neuen bearbeitbaren Bereich an aktueller Einfgemarke einfgen aus und klicken
Sie auf OK. Dreamweaver fgt in den Code ein div-Tag mit dem Attribut ice:editable fr das ffnende Tag ein.
Whlen Sie die Option bergeordnetes Tag in einen bearbeitbaren Bereich umwandeln aus, wenn
Dreamweaver das bergeordnete Tag der Auswahl in das Containerelement fr den Bereich umwandeln soll. Nur bestimmte HTML-Tags knnen umgewandelt werden: div, th und td.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 519
Adobe Online-Dienste verwenden
Hinweis: Die zweite Option steht nur zur Verfgung, wenn der bergeordnete Knoten exakt den Umwandlungskriterien entspricht. Es muss sich beispielsweise um eines der aufgefhrten Tags handeln, die umgewandelt werden knnen. Darber hinaus darf das Tag keinen der Fehler hervorrufen, die unter InContext Editing-Fehlermeldungen auf Seite 522 aufgefhrt sind.
Wenn Sie einen bearbeitbaren Bereich der Dreamweaver-Vorlage ausgewhlt haben, klicken Sie im Dialogfeld
Bearbeitbaren Bereich erstellen auf OK. Der bearbeitbare Bereich der Vorlage wird in Dreamweaver in ein div-Tag eingeschlossen, das als Container fr den neuen bearbeitbaren InContext Editing-Bereich dient.
Wenn Sie andere Inhalte markiert haben, die zur Bearbeitung eingerichtet werden sollen, fhren Sie einen der
folgenden Schritte aus:
Whlen Sie die Option Aktuelle Auswahl in einen DIV-Tag einschlieen und dann umwandeln aus, wenn
der markierte Inhalt in div-Tags eingeschlossen und in einen bearbeitbaren Bereich umgewandelt werden soll. Das div-Tag, in das Dreamweaver den Inhalt einschliet, dient als Container fr den bearbeitbaren Bereich. Hinweis: Durch Einfgen von div-Tags in Seiten ndern sich unter Umstnden die Seitendarstellung und die Effekte der CSS-Regeln. Wenn beispielsweise mit einer CSS-Regel festgelegt wird, dass div-Tags mit einem roten Rahmen angezeigt werden, wird die aktuelle Auswahl mit einem roten Rahmen angezeigt, wenn sie in ein divTag eingeschlossen und umgewandelt wird. Wenn Sie dies vermeiden mchten, knnen Sie die CSS-Regeln, die sich auf die aktuelle Auswahl auswirken, neu definieren oder die Umwandlung aufheben (Bearbeiten > Rckgngig) und dann ein untersttztes Tag auswhlen und umwandeln, das in Dreamweaver nicht in ein div-Tag eingeschlossen werden muss.
Whlen Sie die Option bergeordnetes Tag in einen bearbeitbaren Bereich umwandeln aus, wenn
Dreamweaver das bergeordnete Tag der Auswahl in das Containerelement fr den bearbeitbaren Bereich umwandeln soll. Nur bestimmte HTML-Tags knnen umgewandelt werden: div, th und td.
4 Klicken Sie in der Entwurfsansicht auf die blaue Registerkarte des bearbeitbaren Bereichs, um ihn auszuwhlen,
falls dies nocht nicht geschehen ist. Hinweis: Beachten Sie bei Verwendung einer Dreamweaver-Vorlage unbedingt, dass Sie den bearbeitbaren InContext Editing-Bereich (den Containerbereich) und nicht den bearbeitbaren Bereich der Dreamweaver-Vorlage auswhlen mssen.
5 Aktivieren oder deaktivieren Sie die gewnschten Optionen im Eigenschafteninspektor des bearbeitbaren Bereichs.
Die ausgewhlten Optionen stehen dann Benutzern zur Verfgung, wenn sie den Inhalt des bearbeitbaren Bereichs in einem Browser bearbeiten. Wenn Sie beispielsweise das Kontrollkstchen Fett aktivieren, knnen Benutzer fr den Text Fettdruck festlegen. Wenn Sie das Kontrollkstchen Nummerierte Liste und Aufzhlungsliste aktivieren, knnen Benutzer nummerierte Listen und Aufzhlungslisten erstellen. Wenn Sie das Kontrollkstchen Hyperlink aktivieren, knnen Benutzer Hyperlinks erstellen usw. Zeigen Sie mit dem Mauszeiger auf das jeweilige Symbol oberhalb der Kontrollkstchen, damit eine QuickInfo zur entsprechenden aktivierbaren Option angezeigt wird.
6 Speichern Sie die Seite.
Wenn dies das erste Mal ist, dass Sie einer Seite InContext Editing-Funktionalitt hinzufgen, informiert Sie Dreamweaver darber, dass Ihrer Site Untersttzungsdateien fr InContext Editing hinzugefgt werden: ice.conf.js, ice.js und ide.html. Stellen Sie sicher, diese Dateien zusammen mit der Seite auf den Server hochzuladen, sonst steht die InContext Editing-Funktionalitt im Webbrowser nicht zur Verfgung.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 520
Adobe Online-Dienste verwenden
berschrift 1
berschrift 2
berschrift 3
Bearbeitbare wiederholende Bereiche in einem InContext Editing-Browserfenster. Der untere Bereich ist markiert und kann erneut dupliziert, gelscht oder nach oben bzw. unten verschoben werden.
Zustzlich zum Hinzufgen wiederholender Bereiche auf der Grundlage eines Originalbereichs knnen Sie Benutzern auch erlauben, Bereiche zu lschen, vllig neue Bereiche (die nicht auf den Inhalten des Originalbereichs basieren) hinzuzufgen und Bereiche nach oben bzw. unten zu verschieben. Wenn Sie einen wiederholenden Bereich erstellen, fasst Dreamweaver ihn in einen anderen Container ein, der als Gruppe wiederholender Bereiche bezeichnet wird. Dieser Container, ein div-Tag mit dem Attribut ice:repeatinggroup im ffnenden Tag, dient als Container fr alle bearbeitbaren wiederholenden Bereiche, die Benutzer der Gruppe hinzufgen. Sie knnen wiederholende Bereiche nicht auerhalb der jeweils zugehrigen Gruppe wiederholender Bereiche verschieben. Zudem sollten Sie keine Tags fr eine Gruppe wiederholender Bereiche manuell in die Seite einfgen. Dreamweaver fgt diese Tags bei Bedarf automatisch ein. Hinweis: Beim Erstellen eines wiederholenden Bereichs aus einer Tabellenzeile (tr-Tag) wird in Dreamweaver das Attribut fr die Gruppe wiederholender Bereiche auf das bergeordnete Tag (z. B. das table-Tag) angewendet und kein div-Tag eingefgt. Wenn Sie eine Seite bearbeiten, die bereits eine Gruppe wiederholender Bereiche enthlt und Sie direkt nach der vorhandenen Gruppe einen wiederholenden Bereich einfgen mchten, wird in Dreamweaver ermittelt, dass dem Bereich, den Sie einfgen mchten, eine Gruppe wiederholender Bereiche vorangestellt ist. Sie haben dann die Mglichkeit, den neuen Bereich der bereits vorhandenen Gruppe hinzuzufgen. Sie knnen festlegen, dass der neue wiederholende Bereich der vorhandenen Gruppe hinzugefgt wird, oder Sie knnen eine vllig neue Gruppe wiederholender Bereiche erstellen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 521
Adobe Online-Dienste verwenden
Hinweis: Wenn Sie einen wiederholenden InContext Editing-Bereich in einer Seite einfgen, die auf einer DreamweaverVorlage basiert, muss sich der neue wiederholende InContext Editing-Bereich in einem Bereich befinden, der bereits bearbeitbar ist. Um in Dreamweaver einen wiederholenden Bereich zu erstellen, fhren Sie die folgenden Schritte aus.
1 Fhren Sie einen der folgenden Schritte aus:
Markieren Sie ein Tag, das Sie in einen wiederholenden Bereich umwandeln mchten. Die Liste der mglichen
Tags ist sehr umfangreich: a, abbr, acronym, address, b, big, blockquote, center, cite, code, dd, dfn, dir, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, img, ins, kbd, label, li, menu, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, tr, tt, u, ul und var. Hinweis: Nur div-Tags knnen gleichzeitig das Attribut fr einen bearbeitbaren Bereich und das Attribut fr einen wiederholenden Bereich enthalten.
Setzen Sie die Einfgemarke an die Stelle, an der Sie einen neuen wiederholenden Bereich auf der Seite einfgen
mchten.
Whlen Sie genau einen wiederholenden Bereich in einer Dreamweaver-Vorlage (DWT-Datei) aus. Whlen Sie weitere Seiteninhalte aus, die wiederholbar sein sollen (beispielsweise eine berschrift und ein
Textblock).
2 Whlen Sie Einfgen > InContext Editing > Wiederholenden Bereich erstellen aus. 3 Je nach Ihrer Auswahl stehen Ihnen verschiedene Optionen zur Verfgung.
Bei Auswahl eines Tags, das umgewandelt werden kann, wandelt Dreamweaver das Tag automatisch und ohne
weitere Schritte in einen wiederholenden Bereich um.
Wenn Sie einen neuen, leeren wiederholenden Bereich einfgen, fhren Sie einen der folgenden Schritte aus: Whlen Sie die Option Neuen wiederholenden Bereich an aktueller Einfgemarke einfgen aus und
klicken Sie auf OK.
Whlen Sie die Option bergeordnetes Tag in einen wiederholenden Bereich umwandeln aus, wenn
Dreamweaver das bergeordnete Tag der Auswahl in das Containerelement fr den Bereich umwandeln soll. Nur bestimmte HTML-Tags knnen umgewandelt werden: a, abbr, acronym, address, b, big, blockquote, center, cite, code, dd, dfn, dir, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, img, ins, kbd, label, li, menu, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, tr, tt, u, ul und var. Hinweis: Die zweite Option steht nur zur Verfgung, wenn der bergeordnete Knoten exakt den Umwandlungskriterien entspricht. Es muss sich beispielsweise um eines der aufgefhrten Tags handeln, die umgewandelt werden knnen. Darber hinaus darf das Tag keinen der Fehler hervorrufen, die unter InContext Editing-Fehlermeldungen auf Seite 522 aufgefhrt sind.
Wenn Sie einen wiederholenden Bereich der Dreamweaver-Vorlage ausgewhlt haben, klicken Sie im
Dialogfeld Wiederholenden Bereich erstellen auf OK. Der wiederholende Bereich der Vorlage wird in Dreamweaver in ein div-Tag eingeschlossen, das als Container fr den neuen wiederholenden InContext Editing-Bereich dient.
Wenn Sie andere Inhalte markiert haben, die als wiederholbar eingerichtet werden sollen, fhren Sie einen der
folgenden Schritte aus:
Whlen Sie die Option Aktuelle Auswahl in einen DIV-Tag einschlieen und dann umwandeln aus, wenn
der markierte Inhalt in div-Tags eingeschlossen und in einen wiederholenden Bereich umgewandelt werden soll. Das div-Tag, in das Dreamweaver den Inhalt einschliet, dient als Container fr den wiederholenden Bereich.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 522
Adobe Online-Dienste verwenden
Whlen Sie die Option bergeordnetes Tag in einen wiederholenden Bereich umwandeln aus, wenn
Dreamweaver das bergeordnete Tag der Auswahl in das Containerelement fr den wiederholenden Bereich umwandeln soll. Nur bestimmte HTML-Tags knnen umgewandelt werden: a, abbr, acronym, address, b, big, blockquote, center, cite, code, dd, dfn, dir, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, img, ins, kbd, label, li, menu, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, tr, tt, u, ul und var.
4 Klicken Sie in der Entwurfsansicht auf die blaue Registerkarte des wiederholenden Bereichs, um ihn auszuwhlen,
falls dies nocht nicht geschehen ist. Beachten Sie, dass Dreamweaver dabei die Auswahl der Registerkarte fr die Gruppe wiederholender Bereiche erzwingt. Der Grund hierfr ist, dass sich alle wiederholenden Bereiche innerhalb einer Gruppe wiederholender Bereiche befinden und Sie Optionen fr die gesamte Gruppe festlegen mssen, wenn Sie die Optionen fr einzelne wiederholende Bereiche einstellen mchten.
5 Aktivieren oder deaktivieren Sie die gewnschten Optionen im Eigenschafteninspektor fr die Gruppe des
wiederholenden Bereichs. Es sind zwei Optionen verfgbar: Neu anordnen und Hinzufgen/Entfernen. Beim Aktivieren von Neu anordnen knnen Benutzer beim Bearbeiten im Browser wiederholende Bereiche nach oben oder unten verschieben. Beim Aktivieren von Hinzufgen/Entfernen knnen Benutzer beim Bearbeiten im Browser wiederholende Bereiche hinzufgen oder entfernen. In der Standardeinstellung sind beide Optionen aktiviert. Mindestens eine dieser Optionen muss immer aktiviert sein.
6 Speichern Sie die Seite.
Wenn dies das erste Mal ist, dass Sie einer Seite InContext Editing-Funktionalitt hinzufgen, informiert Sie Dreamweaver darber, dass Ihrer Site Untersttzungsdateien fr InContext Editing hinzugefgt werden: ice.conf.js, ice.js und ide.html. Stellen Sie sicher, diese Dateien zusammen mit der Seite auf den Server hochzuladen, sonst steht die InContext Editing-Funktionalitt im Webbrowser nicht zur Verfgung.
Bereich lschen
Am besten lschen Sie einen Bereich mit dem zugehrigen Eigenschafteninspektor. Durch das Verwenden des Eigenschafteninspektors fr den Bereich wird sichergestellt, dass Sie den gesamten dem Bereich zugeordneten Code lschen.
1 Markieren Sie einen bearbeitbaren Bereich, einen wiederholenden Bereich oder eine Gruppe wiederholender
Bereiche.
2 Klicken Sie im Eigenschafteninspektor des Bereichs auf die Schaltflche Bereich entfernen.
InContext Editing-Fehlermeldungen
InContext Editing kann nicht auf Tags angewendet werden, die Script-Tags oder Blcke serverseitigen Codes enthalten.
Wenn Ihre Auswahl serverseitigen Code enthlt, kann sie nicht mit Dreamweaver in einen bearbeitbaren oder wiederholenden Bereich umgewandelt werden. Dies wird durch die Art und Weise verursacht, mit der beim InContext Editing bearbeitbare Seiten gespeichert werden, wenn der Benutzer im Browser arbeitet. Wenn ein Benutzer die Seite nach dem Bearbeiten speichert, wird beim InContext Editing serverseitiger Code aus dem Bereich entfernt.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 523
Adobe Online-Dienste verwenden
Die aktuelle Auswahl kann nicht umgewandelt oder in ein DIV-Tag eingeschlossen werden, da der bergeordnete Knoten kein DIV-Tag als untergeordnetes Tag zulsst.
Wenn die Auswahl, die auf der Seite umgewandelt werden soll, nicht direkt umgewandelt werden kann, muss sie in div-Tags eingeschlossen werden, die als Container fr den neuen bearbeitbaren oder wiederholenden Bereich dienen. Aus diesem Grund mssen fr die bergeordneten Tags der Auswahl, die umgewandelt werden soll, div-Tags als untergeordnete Tags zulssig sein. Wenn das bergeordnete Tag des Tags, das Sie umwandeln mchten, keine divTags als untergeordnete Tags zulsst, kann die Umwandlung in Dreamweaver nicht durchgefhrt werden.
Die Auswahl enthlt bereits einen bearbeitbaren Bereich oder befindet sich innerhalb eines bearbeitbaren Bereichs. Verschachtelte bearbeitbare Bereiche sind nicht zulssig.
Wenn sich Ihre Auswahl innerhalb eines bearbeitbaren Bereichs befindet oder es innerhalb der Auswahl einen bearbeitbaren Bereich gibt, lsst Dreamweaver eine enstprechende Umwandlung nicht zu. Beim InContext Editing werden keine verschachtelten bearbeitbaren Bereiche untersttzt.
Bearbeitbare Bereiche drfen keine wiederholenden Bereiche oder Gruppen wiederholender Bereiche enthalten.
Bearbeitbare InContext Editing-Bereiche drfen keine weiteren InContext Editing-Funktionen enthalten. Wenn Sie versuchen, einem bearbeitbaren Bereich einen wiederholenden Bereich oder eine Gruppe wiederholender Bereiche hinzuzufgen, lsst Dreamweaver die entsprechende Umwandlung nicht zu.
Wiederholende Bereiche drfen sich nicht innerhalb von bearbeitbaren Bereichen befinden oder Gruppen wiederholender Bereiche enthalten.
Bearbeitbare InContext Editing-Bereiche drfen keine weiteren InContext Editing-Funktionen enthalten. Wenn Sie versuchen, einem bearbeitbaren Bereich einen wiederholenden Bereich oder eine Gruppe wiederholender Bereiche hinzuzufgen, lsst Dreamweaver die entsprechende Umwandlung nicht zu. Auerdem knnen Sie in Dreamweaver keine Elemente in einen bearbeitbaren oder wiederholenden Bereich umwandeln, wenn diese bereits eine Gruppe wiederholender Bereiche enthalten.
Die Auswahl enthlt bereits einen wiederholenden Bereich oder befindet sich innerhalb eines wiederholenden Bereichs. Verschachtelte wiederholende Bereiche sind nicht zulssig.
Wenn sich Ihre Auswahl innerhalb eines wiederholenden Bereichs befindet oder es innerhalb der Auswahl einen wiederholenden Bereich gibt, lsst Dreamweaver eine enstprechende Umwandlung nicht zu. Beim InContext Editing werden keine verschachtelten wiederholenden Bereiche untersttzt.
Die Auswahl darf nur genau eine Dreamweaver-Vorlage fr bearbeitbare/wiederholende Bereiche enthalten oder muss sich innerhalb einer beliebigen Dreamweaver-Vorlage fr bearbeitbare Bereiche befinden.
Beim Verwenden von Dreamweaver-Vorlagendateien (DWT-Dateien) mssen bestimmte Regeln beachtet werden. Um eine Dreamweaver-Vorlage fr bearbeitbare/wiederholende Bereiche in einen bearbeitbaren/wiederholenden InContext Editing-Bereich umzuwandeln, drfen Sie auf der Seite nur genau eine Dreamweaver-Vorlage fr bearbeitbare/wiederholende Bereiche auswhlen und mssen diese dann umwandeln. Zum Umwandeln einer weiteren Auswahl auf der Seite (z. B. ein Textblock) muss sich die Auswahl innerhalb einer Dreamweaver-Vorlage fr bearbeitbare Bereiche befinden.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 524
Adobe Online-Dienste verwenden
Nur DIV-Tags kann gleichzeitig Funktionalitt fr bearbeitbare und fr wiederholende Bereiche zugeordnet werden.
Wenn es sich bei Ihrer Auswahl nicht um ein div-Tag handelt und bereits ein Attribut fr einen wiederholenden Bereich zugewiesen wurde, lsst Dreamweaver nicht zu, dass Sie dem Tag auch noch das Attribut fr einen bearbeitbaren Bereich zuordnen. Nur div-Tags kann gleichzeitig das Attribut fr einen bearbeitbaren Bereich und das Attribut fr einen wiederholenden Bereich zugewiesen werden.
Dreamweaver hat ein dem wiederholenden Bereich vorangehendes Tag fr eine Gruppe wiederholender Bereiche erkannt.
Alle wiederholenden InContext Editing-Bereiche mssen sich innerhalb einer Gruppe wiederholender Bereiche befinden. Wenn Sie der Seite einen neuen wiederholenden Bereich hinzufgen, erkennt Dreamweaver, ob sich direkt davor bereits eine Gruppe wiederholender Bereiche befindet. In diesem Fall bietet Ihnen Dreamweaver die Auswahl, den neuen wiederholenden Bereich der Gruppe wiederholender Bereiche hinzuzufgen oder eine neue Gruppe wiederholender Bereiche zu erstellen, die den neuen wiederholenden Bereich enthlt.
ENTWURF
Letzte Aktualisierung 19.3.2010
525
In diesem Beispiel enthlt jedes bergeordnete <book>-Tag drei untergeordnete Tags: <pubdate>, <title> und <author>. Jedes <book>-Tag ist aber seinerseits ein untergeordnetes Tag des Tags <mybooks>, das im Schema die nchsthhere Ebene bildet. Sie knnen XML-Tags in beliebiger Weise benennen und strukturieren, sofern die Verschachtelung korrekt vorgenommen und jedem ffnenden ein schlieendes Tag zugeordnet wird. XML-Dokumente enthalten keinerlei Formatierung, sondern dienen einfach als Container fr strukturierte Daten. Sobald ein XML-Schema definiert ist, knnen Sie XSL (Extensible Stylesheet Language) zum Anzeigen der Daten nutzen. XSL ermglicht die Formatierung von XML-Daten in hnlicher Weise wie CSS (Cascading Style Sheets) bei HTML-Daten. Sie knnen Stile, Seitenelemente, Layout usw. in einer XSL-Datei definieren und diese an eine XMLDatei anhngen, damit die XML-Daten bei der Anzeige in einem Browser entsprechend der Definition in der XSLDatei formatiert werden. Inhalt (die XML-Daten) und Prsentation (durch die XSL-Datei definiert) sind vollstndig voneinander getrennt, sodass Sie mehr Kontrolle ber die Art der Darstellung von Daten auf einer Webseite besitzen. In Grunde genommen ist XSL eine Prsentationstechnologie fr XML, bei der die Hauptausgabe eine HTML-Seite darstellt.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 526
XML-Daten mit XSLT anzeigen
XSLT (Extensible Stylesheet Language Transformations) ist eine Teilmenge von XSL, mit der die Anzeige von XMLDaten auf einer Webseite gesteuert wird. In Verbindung mit XSL-Stilen werden die Daten in lesbare und formatierte Informationen in Form von HTML umgewandelt. Mit Dreamweaver knnen Sie XSLT-Seiten erstellen, um die XSLTransformationen unter Verwendung eines Anwendungsservers oder Browsers durchfhren zu lassen. Wenn Sie eine serverseitige XSL-Transformation durchfhren, bernimmt der Server die eigentliche Transformation der XML- und XSL-Daten und zeigt die Ergebnisse auf der Seite an. Bei einer clientseitigen Transformation bernimmt ein Browser (wie etwa Internet Explorer) die eigentliche Arbeit. Fr welchen Ansatz Sie sich letztendlich entscheiden (serverseitige oder clientseitige Transformationen), hngt von dem gewnschten Endergebnis, den verfgbaren Technologien, dem Zugriff auf XML-Quelldateien sowie von weiteren Faktoren ab. Beide Anstze haben sowohl Vor- als auch Nachteile. Serverseitige Transformationen sind beispielsweise fr alle Browser geeignet, whrend clientseitige Transformationen auf moderne Browser (Internet Explorer 6, Netscape 8, Mozilla 1.8 und Firefox 1.0.2) beschrnkt sind. Mit serverseitigen Transformationen knnen Sie XML-Daten dynamisch von Ihrem eigenen Server oder von einem beliebigen Server im Web anzeigen. Bei clientseitigen Transformationen mssen Sie dagegen XML-Daten verwenden, die lokal auf Ihrem eigenen Webserver gespeichert sind. Schlielich mssen Sie die Seiten bei serverseitigen Transformationen auf einem konfigurierten Anwendungsserver bereitstellen, wohingegen bei clientseitigen Transformationen lediglich der Zugriff auf einen Webserver erforderlich ist. Ein Tutorial zu den Grundlagen von XML finden Sie unter www.adobe.com/go/vid0165_de.
Verwandte Themen
XML-Tutorial
Serverseitige XSL-Transformationen
Dreamweaver stellt Methoden zum Erstellen von XSLT-Seiten bereit, die serverseitige XSL-Transformationen untersttzen. Wenn ein Anwendungsserver die XSL-Transformation durchfhrt, kann die Datei mit den XML-Daten auf Ihrem eigenen Server oder an einem beliebigen anderen Ort im Web gespeichert sein. Darber hinaus knnen die konvertierten Daten in einem beliebigen Browser angezeigt werden. Das Bereitstellen von Seiten fr serverseitige Transformationen ist allerdings relativ komplex und setzt den Zugang zu einem Anwendungsserver voraus. Wenn Sie mit serverseitigen XSL-Transformationen arbeiten, knnen Sie Dreamweaver dazu verwenden, ganze XSLT-Seiten zu erstellen, die vollstndige HTML-Dokumente generieren oder XSLT-Fragmente, die einen Teil eines HTML-Dokuments generieren. Eine ganze XSLT-Seite entspricht einer regulren HTML-Seite. Sie enthlt ein <body>-Tag und ein <head>-Tag und erlaubt die Anzeige einer Kombination von HTML- und XML-Daten auf der Seite. Ein XSLT-Fragment ist eine Codekomponente in einem separaten Dokument und zeigt formatierte XML-Daten an. Im Unterschied zu einer ganzen XSLT-Seite handelt es sich um eine unabhngige Datei, die kein <body>- oder <head>-Tag enthlt. Wenn Sie XML-Daten auf einer eigenen Seite anzeigen mchten, mssen Sie eine ganze XSLTSeite erstellen und die XML-Daten an diese anbinden. Wenn Sie XML-Daten dagegen in einem bestimmten Abschnitt einer bestehenden dynamischen Seite anzeigen mchten, z. B. auf einer dynamischen Homepage fr ein Sportgeschft, bei der auf einer Seite dieser Homepage aus einem RSS-Datenstrom etwa der Spielstand der Champions League angezeigt werden soll, mssen Sie ein XSLT-Fragment erstellen und auf der dynamischen Seite einen Verweis auf das XSLT-Fragment einfgen. Das Erstellen von XSLT-Fragmenten und deren Verwendung mit anderen dynamischen Seiten zum Anzeigen von XML-Daten ist eine gngigere Verfahrensweise.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 527
XML-Daten mit XSLT anzeigen
Beim Erstellen dieser Art von Seiten mssen Sie zunchst das XSLT-Fragment erstellen. Hierbei handelt es sich um eine separate Datei, die Layout, Formatierung usw. der XML-Daten enthlt, die in der dynamischen Seite angezeigt werden sollen. Nachdem Sie das XSLT-Fragment erstellt haben, fgen Sie einen Verweis auf dieses in Ihre dynamische Seite ein (z. B. eine PHP- oder ColdFusion-Seite). Der eingefgte Verweis auf das XSLT-Fragment funktioniert hnlich wie ein SSI (Server-Side Include). Die formatierten XML-Daten (das Fragment) befinden sich in einer separaten Datei und in der Entwurfsansicht wird auf der dynamischen Seite ein Platzhalter angezeigt. Wenn ein Browser die dynamische Seite mit dem Verweis auf das Fragment anfordert, verarbeitet der Server die enthaltene Anweisung und erstellt ein neues Dokument, in dem anstelle des Platzhalters der formatierte Inhalt angezeigt wird.
WEBSERVER Anwendungsserver
<xsl:>
3
</xsl:>
XML
Webbrowser
1. Der Browser fordert eine dynamische Seite an. 2. Der Webserver sucht die Seite und bergibt sie an den Anwendungsserver. 3. Der Anwendungsserver analysiert die Anweisungen auf der Seite und ruft das XSLT-Fragment ab. 4. Der Anwendungsserver fhrt die Transformation durch (liest das XSLT-Fragment, ruft die XML-Daten ab und formatiert sie). 5. Der Anwendungsserver fgt das umgewandelte Fragment in die Seite ein und gibt die Seite wieder an den Webserver zurck. 6. Der Webserver sendet die fertiggestellte Seite an den Browser.
Mit dem Serververhalten XSL-Transformation knnen Sie einen Verweis auf ein XSLT-Fragment in eine dynamische Seite einfgen. Wenn Sie den Verweis einfgen, generiert Dreamweaver im Stammordner der Site einen Ordner namens includes/MM_XSLTransform/, in dem sich eine Laufzeitbibliothek befindet. Der Anwendungsserver verwendet die in dieser Datei definierten Funktionen beim Konvertieren der angegebenen XMLDaten. Diese Datei ist verantwortlich fr das Abrufen der XML-Daten und XSLT-Fragmente, Durchfhren der XSLTransformation und Ausgeben der Ergebnisse auf einer Webseite. Die Datei mit dem XSLT-Fragment, die XML-Datei mit den Daten und die generierte Laufzeitbibliotheksdatei mssen sich auf dem Server befinden, damit die Seite richtig angezeigt wird. Wenn Sie eine Remote-Version einer XML-Datei als Datenquelle verwenden (z. B. aus einem RSS-Datenstrom), befindet sich diese Datei natrlich an anderer Stelle im Internet. Mit Dreamweaver knnen Sie auerdem ganze XSLT-Seiten fr die Verwendung mit serverseitigen Transformationen erstellen. Eine vollstndige XSLT-Seite funktioniert genau wie ein XSLT-Fragment, nur dass beim Einfgen des Verweises auf die ganze XSLT-Seite mithilfe des Serververhaltens XSL-Transformation der vollstndige Inhalt einer HTML-Seite eingefgt wird. Daher mssen Sie alle HTML-Daten aus der dynamischen Seite (der ColdFusion-, PHPoder ASP-Seite, die als Container-Seite fungiert) entfernen, bevor Sie den Verweis einfgen. Dreamweaver untersttzt XSL-Transformationen fr ColdFusion-, ASP- und PHP-Seiten.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 528
XML-Daten mit XSLT anzeigen
Hinweis: Bevor Sie serverseitige Transformationen durchfhren knnen, mssen Sie Ihren Server entsprechend konfigurieren. Weitere Informationen erhalten Sie von Ihrem Serveradminstrator oder online unter www.adobe.com/go/dw_xsl_de.
Verwandte Themen
XSL-Transformationen auf dem Server ausfhren auf Seite 532
Clientseitige XSL-Transformationen
XSL-Transformationen knnen auch ohne Nutzung eines Anwendungsservers vom Client durchgefhrt werden. Mit Dreamweaver knnen Sie eine ganze XSLT-Seite erstellen, die diese Transformation durchfhrt. Bei clientseitigen Transformationen muss jedoch die XML-Datei mit den anzuzeigenden Daten gendert werden. Zudem sind clientseitige Transformationen nur in modernen Browsern (Internet Explorer 6, Netscape 8, Mozilla 1.8 und Firefox 1.0.2) mglich. Weitere Informationen zu Browsern, die XSL-Transformationen untersttzen, und solchen, die sie nicht untersttzen, finden Sie online unter www.w3schools.com/xsl/xsl_browsers.asp. Als Erstes erstellen Sie eine ganze XSLT-Seite und hngen eine XML-Datenquelle an. (Dreamweaver fordert Sie beim Erstellen der neuen Seite auf, die Datenquelle anzuhngen.) Sie knnen eine XSLT-Seite von Grund auf neu erstellen oder eine vorhandene HTML-Seite in eine XSLT-Seite konvertieren. Wenn Sie sich fr die zweite Methode entscheiden, mssen Sie mit dem Bedienfeld Bindungen (Fenster > Bindungen) eine XML-Datenquelle anhngen. Nachdem Sie die XSLT-Seite erstellt haben, mssen Sie sie mit der XML-Datei verknpfen, die die XML-Daten enthlt. Dazu mssen Sie einen Verweis auf die XSLT-Seite in die XML-Datei selbst einfgen (und dabei hnlich vorgehen wie beim Einfgen eines Verweises auf ein externes CSS-Stylesheet in den <head>-Bereich einer HTMLSeite). Die Besucher der Website mssen die XML-Datei (und nicht die XSLT-Seite) in einem Browser anzeigen. Wenn Besucher die Seite anzeigen, fhrt der Browser die XLS-Transformation durch und zeigt die XML-Daten an, die von der verknpften XSLT-Seite formatiert werden. Die Beziehung zwischen den verknpften XSLT- und XML-Seiten ist konzeptionell gesehen hnlich, unterscheidet sich jedoch von dem Modell, bei dem externe CSS-Stylesheets auf HTML-Seiten verwendet werden. Wenn eine HTML-Seite vorliegt, die Inhalt (z. B. Text) enthlt, wird dieser Inhalt mithilfe eines externen Stylesheets formatiert. Die HTML-Seite bestimmt den Inhalt und der externe CSS-Code, den der Benutzer nie zu Gesicht bekommt, bestimmt die Prsentation. Bei XSLT und XML ist es umgekehrt. Die XML-Datei (die der Benutzer nie in ihrer Grundform sieht) bestimmt den Inhalt, whrend die XSLT-Seite fr die Prsentation verantwortlich ist. Die XSLTSeite enthlt die Tabellen, das Layout, die Grafiken usw., die die Standard-HTML-Daten normalerweise enthalten. Wenn ein Benutzer die XML-Datei in einem Browser anzeigt, wird der Inhalt von der XSLT-Seite formatiert.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 529
XML-Daten mit XSLT anzeigen
5 Webbrowser 1
<XML> <directive>
WEBSERVER
XSLT
4
1. Der Browser fordert die XML-Datei an. 2. Der Server antwortet, indem er die XML-Datei an den Browser sendet. 3. Der Browser liest die XML-Anweisung und ruft die XSLT-Datei ab. 4. Der Server sendet die XSLT-Datei an den Browser. 5. Der Browser wandelt die XML-Daten um und zeigt sie an.
Wenn Sie Dreamweaver zum Verknpfen einer XSLT-Seite mit einer XML-Seite verwenden, fgt Dreamweaver den entsprechenden Code oben in der XML-Seite ein. Wenn Sie die XML-Seite besitzen, die Sie verknpfen (d. h., wenn die XML-Datei ausschlielich auf Ihrem Webserver vorhanden ist) mssen Sie den Code, der die beiden Seiten verknpft, nur mit Dreamweaver einfgen. Wenn Sie die XML-Datei besitzen, erfolgen die vom Client durchgefhrten XSL-Transformationen vollstndig dynamisch. Wenn Sie die Daten in der XML-Datei aktualisieren, wird daher eine beliebige HTML-Ausgabe, die die verknpfte XSLT-Seite verwendet, automatisch anhand der neuen Informationen aktualisiert. Hinweis: Die fr clientseitige Transformationen verwendeten XML- und XSL-Seiten mssen im gleichen Verzeichnis abgelegt werden. Andernfalls liest der Browser die XML-Datei und sucht nach der XSLT-Seite fr die Transformation, kann aber die von relativen Links in der XSLT-Seite definierten Elemente (Stylesheets, Bilder usw.) nicht finden. Wenn Sie die XML-Seite, mit der Sie verknpfen, nicht besitzen (z. B. bei der Verwendung von XML-Daten aus einem RSS-Datenstrom im Web), ist der Arbeitsablauf ein wenig komplizierter. Um clientseitige Transformationen mit XML-Daten aus einer externen Quelle vorzunehmen, mssen Sie zunchst die XML-Quelldatei in das Verzeichnis herunterladen, in dem Ihre XSLT-Seiten abgelegt sind. Wenn sich die XML-Seite in Ihrer lokalen Website befindet, knnen Sie mit Dreamweaver den notwendigen Code hinzufgen, durch den sie mit der XSLT-Seite verknpft wird, und beide Seiten (die heruntergeladene XML-Datei und die verknpfte XSLT-Seite) an Ihren Webserver senden. Wenn der Benutzer die XML-Seite in einem Browser anzeigt, formatiert die XSLT-Seite den Inhalt genau wie im obigen Beispiel. Das Durchfhren clientseitiger XSL-Transformationen an XML-Daten aus einer externen Quelle hat den Nachteil, dass die XML-Daten nur teilweise dynamisch sind. Die heruntergeladene und genderte XML-Datei ist nur ein Schnappschuss der Datei, die sich woanders im Web befindet. Wenn sich die Original-XML-Datei im Web ndert, mssen Sie sie erneut herunterladen, mit der XSLT-Seite verknpfen und auf Ihrem Webserver verffentlichen. Der Browser gibt nur die Daten wieder, die er von der XML-Datei auf Ihrem Webserver erhlt, nicht die Daten, die in der Original-XML-Datei enthalten sind.
Verwandte Themen
XSL-Transformationen auf dem Client ausfhren auf Seite 550
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 530
XML-Daten mit XSLT anzeigen
Wenn Sie ein XSLT-Objekt fr wiederholende Bereiche im Dokumentfenster anwenden, wird der wiederholte Bereich von einer dnnen, gestrichelten grauen Linie umgeben. Zeigen Sie Ihre Arbeit dagegen in der Browservorschau an (Datei > Vorschau in Browser), wird der graue Umriss ausgeblendet und die Auswahl wird erweitert, damit die angegebenen wiederholten Elemente in der XML-Datei angezeigt werden (siehe Abbildung oben). Wenn Sie das XSLT-Objekt fr wiederholende Bereiche in die Seite einfgen, wird die Lnge des XML-DatenPlatzhalters im Dokumentfenster verkrzt. Das liegt daran, dass Dreamweaver den XPath (XML-Pfadsprache) fr die XML-Daten-Platzhalter aktualisiert, sodass er einen relativen Pfad des wiederholten Elements darstellt. Der folgende Code gilt beispielsweise fr eine Tabelle mit zwei dynamischen Platzhaltern, der kein XSLT-Objekt fr wiederholende Bereiche zugewiesen wurde:
<table width="500" border="1"> <tr> <td><xsl:value-of select="rss/channel/item/title"/></td> </tr> <tr> <td><xsl:value-of select="rss/channel/item/description"/></td> </tr> </table>
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 531
XML-Daten mit XSLT anzeigen
Der folgende Code gilt fr die gleiche Tabelle, wenn ihr ein XSLT-Objekt fr wiederholende Bereiche zugewiesen wurde:
<xsl:for-each select="rss/channel/item"> <table width="500" border="1"> <tr> <td><xsl:value-of select="title"/></td> </tr> <tr> <td><xsl:value-of select="description"/></td> </tr> </table> </xsl:for-each>
Im obigen Beispiel hat Dreamweaver den XPath der Elemente, die in den wiederholten Bereich fallen (Title und Description) so aktualisiert, dass sie nicht relativ zum vollstndigen Dokument sind, sondern zum XPath in den umschlieenden <xsl:for-each>-Tags. Dreamweaver generiert auch in anderen Fllen kontextrelative XPath-Ausdrcke. Wenn Sie z. B. einen XML-DatenPlatzhalter zu einer Tabelle ziehen, der bereits ein XSLT-Objekt fr wiederholende Bereiche zugewiesen wurde, zeigt Dreamweaver einen XPath an, der relativ zu dem von <xsl:for-each>-Tags umgebenen XPath ist.
Verwandte Themen
Wiederholte XML-Elemente anzeigen auf Seite 537
Die folgenden Themen enthalten Anleitungen, mit denen Sie die passenden Vorschaumethoden anhand Ihres Bedarfs ermitteln knnen. Vorschau von Seiten fr serverseitige Transformationen anzeigen Bei serverseitigen Transformationen werden die fr den Besucher einer Website sichtbaren Inhalte von Ihrem Anwendungsserver umgewandelt. Beim Erstellen von XSLT- und dynamischen Seiten, die bei serverseitigen Transformationen verwendet werden sollen, empfiehlt es sich, eine Vorschau der dynamischen Seite anzuzeigen, die das XSLT-Fragment enthlt und nicht das XSLT-Fragment selbst. In diesem Fall nutzen Sie den Anwendungsserver und stellen somit sicher, dass die Vorschau mit den Inhalten bereinstimmt, die Website-Besucher sehen knnen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 532
XML-Daten mit XSLT anzeigen
Wenn Sie stattdessen eine Vorschau des XSLT-Fragments anzeigen, wird die Transformation von Dreamweaver ausgefhrt, was zu leicht abweichenden Ergebnissen fhren kann. Sie knnen Dreamweaver verwenden, um eine Vorschau des XSLT-Fragments whrend seiner Erstellung anzuzeigen. Um beim Darstellen der Daten jedoch ganz przise Ergebnisse zu erhalten, mssen Sie mithilfe des Anwendungsservers eine Vorschau der dynamischen Seite anzeigen, nachdem Sie das XSLT-Fragment eingefgt haben. Vorschau von Seiten fr clientseitige Transformationen anzeigen Bei clientseitigen Transformationen werden die fr den Besucher einer Website sichtbaren Inhalte von Ihrem Browser umgewandelt. Um dies zu erzielen, mssen Sie einen Hyperlink von der XML-Datei zur XSLT-Seite hinzufgen. Wenn Sie die XML-Datei in Dreamweaver ffnen und in einem Browser anzeigen, zwingen Sie den Browser, die XMLDatei zu laden und die Transformation durchzufhren. Damit sehen Sie genau das Gleiche wie ein Website-Besucher. Diese Methode erschwert jedoch das Debuggen der Seite, da der Browser die XML-Daten umwandelt und die HTMLDaten intern generiert. Wenn Sie die generierten HTML-Daten mit der Browser-Option zum Anzeigen der Quelle debuggen, werden nur die ursprnglichen XML-Daten angezeigt, die der Browser erhalten hat, nicht jedoch die vollstndigen HTML-Daten (Tags, Stile usw.), die fr die Darstellung der Seite verantwortlich sind. Um beim Anzeigen des Quellcodes die vollstndigen HTML-Daten sehen zu knnen, mssen Sie stattdessen eine Vorschau der XSLT-Seite in einem Browser anzeigen. Vorschau der XSLT-Seiten und -Fragmente anzeigen Es empfiehlt sich, beim Erstellen von ganzen XSLT-Seiten und von XSLT-Fragmenten eine Vorschau der Arbeit anzuzeigen, um sicherzustellen, dass die Daten richtig angezeigt werden. Wenn Sie eine ganze XSLT-Seite oder ein XSLT-Fragment mit der Option Vorschau in Browser anzeigen, fhrt Dreamweaver die Transformation mittels einer integrierten Transformations-Engine durch. Diese Methode fhrt schnell zu einem Ergebnis und erleichtert das schrittweise Erstellen und Debuggen der Seite. Darber hinaus gibt sie Ihnen die Mglichkeit, die vollstndigen HTML-Daten (Tags, Stile usw.) anzuzeigen, indem Sie im Browser die Option zum Anzeigen der Quelle auswhlen. Hinweis: Diese Vorschaumethode wird in der Regel eingesetzt, wenn Sie mit dem Erstellen der XSLT-Seiten beginnen, und zwar unabhngig davon, ob Sie die client- oder serverseitige Transformation der Daten verwenden.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 533
XML-Daten mit XSLT anzeigen
1. Richten Sie eine Dreamweaver-Site ein. 2. Whlen Sie eine Servertechnologie und richten Sie einen Anwendungsserver ein. 3. Testen Sie den Anwendungsserver.
Erstellen Sie dazu beispielsweise eine Seite, die verarbeitet werden muss, und achten Sie darauf, das der Anwendungsserver die Seite verarbeitet. Ein Tutorial mit Anleitungen, wie Sie dabei vorgehen mssen, finden Sie online unter www.adobe.com/go/dw_xsl_de.
4. Erstellen Sie ein XSLT-Fragment oder eine XSLT-Seite oder konvertieren Sie eine HTML-Seite in eine XSLTSeite.
Erstellen Sie in der Dreamweaver-Site ein XSLT-Fragment oder eine ganze XSLT-Seite. Wandeln Sie eine bestehende HTML-Seite in eine ganze XSLT-Seite um.
5. Eine XML-Datenquelle an die Seite anhngen 6. Zeigen Sie die XML-Daten an, indem Sie die Daten an das XSLT-Fragment oder an die ganze XSLT-Seite binden. 7. Fgen Sie bei Bedarf ein XSLT-Objekt fr wiederholende Bereiche zur Tabelle oder Tabellenzeile hinzu, die die XML-Daten-Platzhalter enthlt. 8. Fgen Sie Verweise ein.
Um einen Verweis auf das XSLT-Fragment in Ihre dynamische Seite einzufgen, verwenden Sie das
Serververhalten XSL-Transformation.
Um einen Verweis auf die ganze XSLT-Seite in Ihre dynamische Seite einzufgen, lschen Sie den gesamten
HTML-Code aus einer dynamischen Seite und verwenden Sie dann das Serververhalten XSL-Transformation.
9. Senden Sie die Seite und das Fragment.
Senden Sie sowohl die dynamische Seite als auch das XSLT-Fragment (bzw. die ganze XSLT-Seite) an den Anwendungsserver. Wenn Sie eine lokale XML-Datei verwenden, mssen Sie diese ebenfalls an den Anwendungsserver senden.
10. Zeigen Sie die dynamische Seite in einem Browser an.
Bei diesem Vorgang konvertiert der Anwendungsserver die XML-Daten, fgt sie in die dynamische Seite ein und zeigt sie im Browser an.
Verwandte Themen
Dreamweaver-Sites einrichten auf Seite 39 Anwendungsserver auswhlen auf Seite 565 XML und XSL mit Webseiten verwenden auf Seite 525 Clientseitige XSL-Transformationen auf Seite 528 Serverseitige XSL-Transformationen auf Seite 526
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 534
XML-Daten mit XSLT anzeigen
XSLT-Seiten erstellen
Sie knnen XSLT-Seiten erstellen, mit denen XML-Daten auf Webseiten angezeigt werden. Dabei knnen Sie entweder eine vollstndige XSLT-Seite erstellen, die ein <body>- und ein <head>-Tag enthlt, oder alternativ ein XSLT-Fragment. Wenn Sie ein XSLT-Fragment erstellen, wird eine unabhngige Datei ohne body- oder head-Tag erstellt. Diese Codekomponente wird dann in eine dynamische Seite eingefgt. Hinweis: Wenn Sie eine bestehende XSLT-Seite als Ausgangspunkt nehmen, mssen Sie eine XML-Datenquelle an diese anfgen.
1 Whlen Sie Datei > Neu. 2 Gehen Sie zur Kategorie Leere Seite des Dialogfelds Neues Dokument und whlen Sie in der Spalte Seitentyp
XSLT (Ganze Seite), um eine ganze XSLT-Seite zu erstellen. XSLT (Fragment), um ein XSLT-Fragment zu erstellen.
3 Klicken Sie auf Erstellen und fhren Sie im Dialogfeld XML-Quelle suchen einen der folgenden Schritte aus:
Whlen Sie Lokale Datei anhngen aus, klicken Sie auf die Schaltflche Durchsuchen, navigieren Sie zu einer
XML-Datei auf Ihrem Computer und klicken Sie auf OK.
Whlen Sie Remote-Datei anhngen aus, geben Sie die URL einer XML-Datei im Internet ein (z. B. eine Datei
aus einem RSS-Datenstrom) und klicken Sie auf OK. Hinweis: Durch Klicken auf die Schaltflche Abbrechen wird eine neue XSLT-Seite ohne angefgte XML-Datenquelle erstellt. Das Bedienfeld Bindungen wird mit dem Schema Ihrer XML-Datenquelle gefllt.
In der folgenden Tabelle werden die verschiedenen Elemente im Schema erklrt, die mglicherweise angezeigt werden:
Element <> Bedeutung Nicht wiederholtes XML-Element erforderlich Wiederholtes XML-Element Details Ein Element, das im bergeordneten Code genau einmal vorkommt Ein Element, das im bergeordneten Code ein- oder mehrmals vorkommt Ein Element, das im bergeordneten Code nicht, einmal oder mehrmals vorkommt Normalerweise das wiederholte Element, wenn die Einfgemarke sich in einem wiederholten Bereich befindet
<>+
<>+
Optionales XML-Element
Aktuelles Kontextelement
XML-Attribut
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 535
XML-Daten mit XSLT anzeigen
4 Speichern Sie die neue Seite (Datei > Speichern) mit der Erweiterung .xsl oder .xslt (.xsl ist die
Standarderweiterung).
Eine Kopie der Seite wird im Dokumentfenster geffnet. Die neue Seite ist ein XSL-Stylesheet, das mit der Erweiterung .xsl gespeichert wird.
XML-Datenquellen anhngen
Wenn Sie eine bestehende XSLT-Seite als Grundlage verwenden oder beim Erstellen einer neuen XSLT-Seite mit Dreamweaver keine XML-Datenquelle angehngt haben, mssen Sie mithilfe des Bedienfelds Bindungen eine XMLDatenquelle anhngen.
1 Klicken Sie im Bedienfeld Bindungen (Fenster > Bindungen) auf den XML-Hyperlink.
Hinweis: Sie knnen auch auf den Quellenhyperlink oben rechts im Bedienfeld Bindungen klicken, um eine XMLDatenquelle hinzuzufgen.
2 Fhren Sie einen der folgenden Schritte aus:
Whlen Sie Lokale Datei anhngen aus, klicken Sie auf die Schaltflche Durchsuchen, navigieren Sie zu einer
XML-Datei auf Ihrem Computer und klicken Sie auf OK.
Whlen Sie Remote-Datei anhngen aus und geben Sie die URL einer XML-Datei im Internet ein (z. B. eine Datei
aus einem RSS-Datenstrom).
3 Klicken Sie auf OK, um das Dialogfeld XML-Quelle suchen zu schlieen.
Das Bedienfeld Bindungen wird mit dem Schema Ihrer XML-Datenquelle gefllt.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 536
XML-Daten mit XSLT anzeigen
Hinweis: In den meisten Fllen werden Sie ein XSLT-Objekt fr wiederholende Bereiche verwenden, um wiederholte XML-Elemente auf einer Seite anzuzeigen. Sie knnen dann eine einzeilige Tabelle mit mindestens einer Spalte oder eine zweizeilige Tabelle erstellen, wenn Sie eine Kopfzeile definieren mchten.
3 Whlen Sie im Bedienfeld Bindungen ein XML-Element aus und ziehen Sie es auf der Seite an die Position, an
Ein Platzhalter fr XML-Daten wird auf der Seite angezeigt. Der Platzhalter wird hervorgehoben und in geschweiften Klammern dargestellt. Er verwendet die XPath-Syntax (XML-Adressierungssprache), um die hierarchische Struktur des XML-Schemas zu beschreiben. Wenn Sie z. B. das untergeordnete Element title auf die Seite ziehen und dieses Element die bergeordneten Elemente rss, channel und item aufweist, lautet die Syntax fr den Platzhalter fr dynamische Inhalte {rss/channel/item/title}. Doppelklicken Sie auf der Seite auf den Platzhalter fr die XML-Daten, um den XPATH-Ausdrucksgenerator zu ffnen. Der XPATH-Ausdrucksgenerator ermglicht das Formatieren ausgewhlter Daten oder das Auswhlen anderer Elemente aus dem XML-Schema.
4 Optional: Weisen Sie den XML-Daten Stile zu, indem Sie einen XML-Daten-Platzhalter auswhlen und ihm, wie
anderen Inhalten auch, mithilfe des Eigenschafteninspektors oder des Bedienfelds CSS-Stile Stile zuweisen. Stattdessen knnen Sie XSLT-Fragmenten auch mit Entwurfszeit-Stylesheets Stile zuweisen. Jede dieser Methoden hat sowohl Vor- als auch Nachteile.
5 Zeigen Sie das Ergebnis in der Browservorschau an (Datei > Vorschau in Browser).
Hinweis: Wenn Sie Ihre Seite in einer Browservorschau anzeigen, fhrt Dreamweaver eine interne XSL-Transformation ohne Rckgriff auf einen Anwendungsserver durch.
Verwandte Themen
Vorschau der XML-Daten anzeigen auf Seite 531 Inhalte in Tabellen darstellen auf Seite 188
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 537
XML-Daten mit XSLT anzeigen
Dies kann ein beliebiges Objekt wie etwa eine Tabelle, eine Tabellenzeile oder ein Textabsatz sein.
Sie knnen den Tag-Selektor links unten im Dokumentfenster verwenden, um einen Bereich auf der Seite przise auszuwhlen. Handelt es sich bei dem Bereich z. B. um eine Tabelle, klicken Sie auf der Seite in der Tabelle. Klicken Sie dann im Tag-Selektor auf das <table>-Tag.
2 Fhren Sie einen der folgenden Schritte aus:
Whlen Sie Einfgen > XSLT-Objekte > Bereich wiederholen. Klicken Sie in der Kategorie XSLT des Bedienfelds Einfgen auf die Schaltflche Wiederholender Bereich.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 538
XML-Daten mit XSLT anzeigen
3 Whlen Sie das wiederholte, durch ein Pluszeichen gekennzeichnete Element im XPATH-Ausdrucksgenerator aus.
Der wiederholte Bereich ist nun im Dokumentfenster von einer dnnen, grauen, gestrichelten Linie umgeben. Wenn Sie Ihre Arbeit in der Browservorschau anzeigen (Datei > Vorschau in Browser), verschwindet der graue Umriss und die Auswahl wird erweitert, damit die angegebenen wiederholten Elemente in der XML-Datei angezeigt werden. Wenn Sie das XSLT-Objekt fr wiederholende Bereiche in die Seite einfgen, wird der XML-Daten-Platzhalter im Dokumentfenster verkrzt. Das liegt daran, dass Dreamweaver den XPath fr die XML-Daten-Platzhalter krzt, sodass er einen relativen Pfad des wiederholten Elements darstellt.
Verwandte Themen
Mithilfe des XPATH-Ausdrucksgenerators Ausdrcke fr XML-Daten hinzufgen auf Seite 546 XML-Daten und wiederholte Elemente auf Seite 530
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 539
XML-Daten mit XSLT anzeigen
2 Klicken Sie im Eigenschafteninspektor (Fenster > Eigenschaften) auf das Symbol neben dem Textfeld
Auswhlen.
3 Nehmen Sie die gewnschten nderungen im XPATH-Ausdrucksgenerator vor und klicken Sie auf OK.
Hinweis: Beim Einfgen von XSLT-Fragmenten sollten Sie immer auf die Schaltflche Code- und Entwurfsansicht anzeigen klicken, nachdem Sie die Einfgemarke auf die Seite gesetzt haben, um sicherzustellen, dass sich diese an der richtigen Stelle befindet. Ist dies nicht der Fall, mssen Sie in der Codeansicht auf eine andere Stelle klicken, um die Einfgemarke an der gewnschten Position zu platzieren.
3 ffnen Sie das Bedienfeld Serververhalten (Fenster > Serververhalten), klicken Sie auf die Schaltflche mit
4 Klicken Sie im Dialogfeld XSL-Transformation auf die Schaltflche Durchsuchen und navigieren Sie zu einem
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 540
XML-Daten mit XSLT anzeigen
Dreamweaver fllt das nchste Textfeld mit dem Dateipfad oder der URL der XML-Datei, die an das angegebene Fragment angehngt ist. Sie knnen die Datei wechseln, indem Sie auf die Schaltflche Durchsuchen klicken und zu der gewnschten Datei navigieren.
5 Optional: Klicken Sie auf die Schaltflche mit dem Pluszeichen (+), um einen XSLT-Parameter hinzuzufgen. 6 Klicken Sie auf OK, um einen Verweis auf das XSLT-Fragment in die Seite einzufgen. Das Fragment kann nicht
bearbeitet werden. Sie knnen auf das Fragment doppelklicken, um die Quelldatei des Fragments zu bearbeiten. Im Stammordner der Site wird auerdem ein Ordner namens includes/MM_XSLTransform/ angelegt, der eine Laufzeitbibliotheksdatei enthlt. Der Anwendungsserver verwendet die in dieser Datei definierten Funktionen zum Durchfhren der Transformation.
7 Laden Sie die dynamische Seite zum Server hoch (Site > Bereitstellen) und klicken Sie auf Ja, um abhngige
Dateien einzuschlieen. Die Datei mit dem XSLT-Fragment, die XML-Datei mit den Daten und die generierte Laufzeitbibliotheksdatei mssen sich auf dem Server befinden, damit die Seite richtig angezeigt wird. (Wenn Sie eine Remote-Version einer XML-Datei als Datenquelle verwenden, muss die Datei sich an einer anderen Position im Internet befinden.)
Verwandte Themen
XSLT-Seiten erstellen auf Seite 534 Serverseitige XSL-Transformationen auf Seite 526
XSL-Transformation aus.
2 Klicken Sie auf das Minuszeichen ().
Hinweis: Sie sollten Serververhalten immer auf diese Weise entfernen. Beim manuellen Lschen des generierten Codes wird das Serververhalten nur teilweise entfernt, auch wenn das Serververhalten nicht mehr im Bedienfeld Serververhalten angezeigt wird.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 541
XML-Daten mit XSLT anzeigen
Als Erstes hngen Sie ein externes Stylesheet an die dynamische Seite an. (Dies ist eine der besten Methoden, um
Stile auf den Inhalt einer beliebigen Webseite anzuwenden.)
Als Nchstes hngen Sie das gleiche externe Stylesheet als Entwurfszeit-Stylesheet an das XSLT-Fragment an. Wie
der Name vermuten lsst, knnen Sie nur in der Dreamweaver-Entwurfsansicht mit Entwurfszeit-Stylesheets arbeiten. Nachdem Sie die ersten beiden Schritte ausgefhrt haben, knnen Sie anhand des Stylesheets, das Sie bereits an die dynamische Seite angehngt haben, in Ihrem XSLT-Fragment neue Stile erstellen. Das Resultat ist eine bersichtlichere HTML-Ausgabe (da der Verweis auf das Stylesheet nur whrend der Arbeit in Dreamweaver gltig ist) und das Fragment zeigt die entsprechenden Stile weiterhin in der Entwurfsansicht an. Darber hinaus werden alle Stile sowohl auf das Fragment als auch auf die dynamische Seite angewendet, wenn Sie die dynamische Seite in der Entwurfsansicht oder eine Vorschau dieser in einem Browser anzeigen. Hinweis: Bei der Anzeige des XSLT-Fragments in einem Browser werden die Stile nicht angezeigt. Sie sollten stattdessen die dynamische Seite im Browser anzeigen, um das XSLT-Fragment im Kontext dieser anzuzeigen. Weitere Informationen zum Verwenden von CSS zum Formatieren von XSLT-Fragmenten finden Sie unter www.adobe.com/go/dw_xsl_styles_de.
Verwandte Themen
Mit Entwurfszeit-Stylesheets arbeiten auf Seite 159
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 542
XML-Daten mit XSLT anzeigen
Serververhalten (Fenster > Serververhalten) auf ein Serververhalten fr die XSL-Transformation oder fgen Sie ein neues Serververhalten fr die XSL-Transformation hinzu.
2 Klicken Sie im Dialogfeld XSL-Transformation auf das Plussymbol (+) neben XSLT-Parameter.
3 Geben Sie im Dialogfeld Parameter hinzufgen im Feld Name einen Namen fr den Parameter ein. Der Name
darf ausschlielich aus alphanumerischen Zeichen bestehen. Leerzeichen sind nicht zulssig.
4 Fhren Sie einen der folgenden Schritte aus:
Wenn Sie einen statischen Wert verwenden mchten, geben Sie ihn in das Feld Wert ein. Um einen dynamischen Wert zu verwenden, klicken Sie auf das entsprechende Symbol neben dem Feld Wert,
fllen Sie das Dialogfeld Dynamische Daten aus und klicken Sie auf OK. Um weitere Informationen anzuzeigen, klicken Sie im Dialogfeld Dynamische Daten auf die Schaltflche Hilfe.
5 Geben Sie in das Feld Standardwert den Wert ein, der fr den Parameter gelten soll, wenn zur Laufzeit kein Wert
XSLT-Parameter bearbeiten
1 ffnen Sie das Dialogfeld XSL-Transformation. Doppelklicken Sie zu diesem Zweck im Bedienfeld
Serververhalten (Fenster > Serververhalten) auf ein Serververhalten fr die XSL-Transformation oder fgen Sie ein neues Serververhalten fr die XSL-Transformation hinzu.
2 Whlen Sie einen Parameter in der XSLT-Parameterliste aus. 3 Klicken Sie auf die Schaltflche Bearbeiten. 4 Nehmen Sie die gewnschten nderungen vor und klicken Sie auf OK.
XSLT-Parameter lschen
1 ffnen Sie das Dialogfeld XSL-Transformation. Doppelklicken Sie zu diesem Zweck im Bedienfeld
Serververhalten (Fenster > Serververhalten) auf ein Serververhalten fr die XSL-Transformation oder fgen Sie ein neues Serververhalten fr die XSL-Transformation hinzu.
2 Whlen Sie einen Parameter in der XSLT-Parameterliste aus. 3 Klicken Sie auf das Minuszeichen ().
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 543
XML-Daten mit XSLT anzeigen
Im folgenden Beispiel soll berprft werden, ob das @available-Attribut des Knotens den Wert true besitzt.
Hinweis: Sie mssen String-Werte wie beispielsweise true in Anfhrungszeichen setzen. Dreamweaver verschlsselt die Anfhrungszeichen ('), damit sie als gltige HTML-Daten eingegeben werden.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 544
XML-Daten mit XSLT anzeigen
Sie knnen Knoten nicht nur auf Werte testen, sondern eine beliebige untersttzte XSLT-Funktion in einer beliebigen bedingten Anweisung verwenden. Die Bedingung wird fr den aktuellen Knoten in Ihrer XML-Datei getestet. Im folgenden Beispiel soll der letzte Knoten in der Ergebnismenge getestet werden:
Weitere Informationen und Beispiele zum Schreiben von bedingten Ausdrcken finden Sie im Abschnitt <xsl:if> des Bedienfelds Referenz (Hilfe > Referenz).
XSLT des Bedienfelds Einfgen auf das Symbol Mehrere bedingte Bereiche.
2 Geben Sie die erste Bedingung in das Dialogfeld Mehrere bedingte Bereiche ein.
Im folgenden Beispiel soll berprft werden, ob das price-Teilelement des Kontextknotens einen Wert hat, der kleiner ist als 5.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 545
XML-Daten mit XSLT anzeigen
<xsl:choose> <xsl:when test="price<5"> Content goes here </xsl:when> <xsl:otherwise> Content goes here </xsl:otherwise> </xsl:choose>
4 Um eine weitere Bedingung einzufgen, positionieren Sie die Einfgemarke in der Codeansicht zwischen
<xsl:when>-Tagpaaren oder unmittelbar vor dem <xsl:otherwise>-Tag und fgen Sie dann einen bedingten
Bereich ein (Einfgen > XSLT-Objekte > Bedingter Bereich). Nachdem Sie die Bedingung eingefgt und auf OK geklickt haben, wird ein weiteres <xsl:when>-Tag in den
<xsl:choose>-Block eingefgt.
Weitere Informationen und Beispiele zum Schreiben von bedingten Ausdrcken finden Sie im Abschnitt
<xsl:choose> des Bedienfelds Referenz (Hilfe > Referenz).
XSL-Kommentare einfgen
Sie knnen einem Dokument XSL-Kommentar-Tags hinzufgen oder eine Auswahl in XSL-Kommentar-Tags setzen.
Whlen Sie in der Entwurfsansicht Einfgen > XSLT-Objekte > XSL-Kommentar aus, geben Sie den
Kommentar ein (oder lassen Sie das Feld leer) und klicken Sie auf OK.
Whlen Sie in der Codeansicht Einfgen > XSLT-Objekte > XSL-Kommentar aus.
Sie knnen auch in der Kategorie XSLT des Bedienfelds Einfgen auf das Symbol XSL-Kommentar klicken.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 546
XML-Daten mit XSLT anzeigen
ffnen.
2 Whlen Sie im Dialogfeld XPATH-Ausdrucksgenerator (Dynamischer Text) einen beliebigen Knoten in der
XML-Schemastruktur aus. Der korrekte XPath-Ausdruck zur Identifikation des Knotens wird in das Feld Ausdruck geschrieben. Hinweis: Wenn Sie einen anderen Knoten in der XML-Schemastruktur auswhlen, wird der Ausdruck entsprechend gendert. Im folgenden Beispiel soll das Teilelement price des item-Knotens angezeigt werden:
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 547
XML-Daten mit XSLT anzeigen
Mit dieser Auswahl wrde der folgende Code in Ihre XSLT-Seite eingefgt:
<xsl:value-of select="price"/>
3 Whlen Sie bei Bedarf eine Formatierungsoption aus dem Popupmen Format. Dieser Schritt ist optional.
Das Formatieren einer Auswahl ist ntzlich, wenn der Wert des Knotens eine Zahl zurckgibt. Dreamweaver bietet eine vordefinierte Liste mit Formatierungsfunktionen. Eine vollstndige Liste der verfgbaren Formatierungsfunktionen und -beispiele finden Sie im Bedienfeld Referenz. Im folgenden Beispiel soll das Teilelement price als Whrung mit zwei Dezimalstellen formatiert werden:
Mit diesen Optionen wrde der folgende Code in Ihre XSLT-Seite eingefgt:
<xsl:value-of select="format-number(provider/store/items/item/price,'$#.00')"/>
4 Klicken Sie auf OK. 5 Um den Wert jedes Knotens in der XML-Datei anzuzeigen, wenden Sie einen wiederholten Bereich auf das
Element mit dem dynamischen Text (z. B. eine HTML-Tabellenzeile oder ein Absatz) an. Weitere Informationen und Beispiele zum Auswhlen von Knoten, um einen Wert zurckzugeben, finden Sie im Abschnitt <xsl:value-of> des Bedienfelds Referenz.
ffnen.
2 Whlen Sie im Dialogfeld XPATH-Ausdrucksgenerator (Bereich wiederholen) das Element, das wiederholt
werden soll, in der XML-Schemastruktur aus. Der korrekte XPath-Ausdruck zur Identifikation des Knotens wird in das Feld Ausdruck geschrieben. Hinweis: Wiederholte Elemente sind in der XML-Schemastruktur durch ein Plussymbol (+) gekennzeichnet.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 548
XML-Daten mit XSLT anzeigen
Beim Klicken auf OK wird der folgende Code in die XSLT-Seite eingefgt:
<xsl:for-each select="provider/store/items/item"> Content goes here </xsl:for-each>
In einigen Fllen mchten Sie mit einer Teilmenge der wiederholten Knoten arbeiten, z. B. wenn Sie nur Elemente wnschen, bei denen ein Attribut einen bestimmten Wert aufweist. In diesem Fall mssen Sie einen Filter erstellen.
die XSLT-Seite dynamische Parameter definiert wurden, knnen Sie einen Parameter im Popupmen auswhlen.
5 Klicken Sie erneut auf das Plussymbol (+), um einen anderen Filter anzugeben.
Beim Eingeben der Werte und Auswhlen von Optionen in den Popupmens, ndern sich die XPath-Ausdrcke im Feld Ausdruck.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 549
XML-Daten mit XSLT anzeigen
Im folgenden Beispiel soll die Ergebnismenge auf die item-Knoten beschrnkt werden, bei denen das @availableAttribut den Wert true hat.
Beim Klicken auf OK wird der folgende Code in die XSLT-Seite eingefgt:
<xsl:for-each select="provider/store/items/item[@available = 'true']"> Content goes here </xsl:for-each>
Hinweis: Sie mssen String-Werte wie beispielsweise true in Anfhrungszeichen setzen. Dreamweaver verschlsselt die Anfhrungszeichen ('), damit sie als gltige HTML-Daten eingegeben werden.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 550
XML-Daten mit XSLT anzeigen
Sie knnen auch komplexere Filter erstellen, mit denen Sie im Rahmen der Filterkriterien bergeordnete Knoten angeben knnen. Im folgenden Beispiel soll die Ergebnismenge auf die item-Knoten beschrnkt werden, bei denen das @id-Attribut von store den Wert 1 hat und der price-Knoten von item grer als 5 ist.
Beim Klicken auf OK wird der folgende Code in die XSLT-Seite eingefgt:
<xsl:for-each select="provider/store[@id = 1]/items/item[price > 5]"> Content goes here </xsl:for-each>
Weitere Informationen und Beispiele zu wiederholten Bereichen finden Sie im Abschnitt <xsl:for-each> des Bedienfelds Referenz.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 551
XML-Daten mit XSLT anzeigen
1. Richten Sie eine Dreamweaver-Site ein. 2. Erstellen Sie eine XSLT-Seite oder konvertieren Sie eine HTML-Seite in eine XSLT-Seite.
Erstellen Sie in der Dreamweaver-Site eine vollstndige XSLT-Seite. Wandeln Sie eine bestehende HTML-Seite in eine ganze XSLT-Seite um.
3. Hngen Sie der Seite eine XML-Datenquelle an (falls Sie dies nicht bereits getan haben).
Die angefgte XML-Datei muss sich im gleichen Verzeichnis befinden wie die XSLT-Seite.
4. Binden Sie die XML-Daten an die XSLT-Seite an. 5. Zeigen Sie die XML-Daten an, indem Sie die Daten an das XSLT-Fragment oder an die ganze XSLT-Seite binden. 6. Fgen Sie bei Bedarf ein XSLT-Objekt fr wiederholende Bereiche zur Tabelle oder Tabellenzeile hinzu, die die XML-Daten-Platzhalter enthlt. 7. Hngen Sie XSLT-Seite an eine XML-Seite an. 8. Senden Sie die XML-Seite und die verknpfte XSLT-Seite an Ihren Webserver. 9. Zeigen Sie die XML-Seite in einem Browser an.
Dabei wandelt der Browser die XML-Daten um, formatiert sie mit der XSLT-Seite und zeigt die formatierte Seite im Browser an.
Verwandte Themen
Dreamweaver-Sites einrichten auf Seite 39 Anwendungsserver auswhlen auf Seite 565 XSLT-Seite mit einer XML-Seite verknpfen auf Seite 552 XML und XSL mit Webseiten verwenden auf Seite 525 Clientseitige XSL-Transformationen auf Seite 528 Serverseitige XSL-Transformationen auf Seite 526
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 552
XML-Daten mit XSLT anzeigen
1. Erstellen Sie die XSLT-Seite. 2. Zeigen Sie die Daten in der XSLT-Seite an. 3. Zeigen Sie die wiederholten Elemente in der XSLT-Seite an. 4. Beheben Sie ggf. auftretende Probleme.
Verwandte Themen
XSLT-Seiten erstellen auf Seite 534 XML-Daten in XSLT-Seiten anzeigen auf Seite 535 Wiederholte XML-Elemente anzeigen auf Seite 537 Fehler bei XSL-Transformationen beheben auf Seite 550
XSLT-Seite, whlen Sie sie aus und klicken Sie auf OK.
4 Das Dialogfeld wird geschlossen und der Verweis auf die XSLT-Seite wird oben in das XML-Dokument eingefgt.
Fehlende Zeichenentitten
Fehlende Zeichenentitten angeben
In XSLT sind einige Zeichen in bestimmten Kontexten nicht zulssig. So knnen Sie beispielsweise das Zeichen fr kleiner als (<) und das Et-Zeichen (&) nicht in den Text zwischen zwei Tags oder in einem Attributwert verwenden. Die XSLT-Transformations-Engine meldet einen Fehler, wenn diese Zeichen flschlicherweise verwendet wurden. Um das Problem zu lsen, knnen Sie die Sonderzeichen durch Zeichenentitten ersetzen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 553
XML-Daten mit XSLT anzeigen
Eine Zeichenentitt ist eine Zeichenfolge, die andere Zeichen reprsentiert. Zeichenentitten sind entweder benannt oder nummeriert. Eine benannte Entitt beginnt mit einem Et-Zeichen (&), auf das der Name oder Zeichen folgen, und endet mit einem Semikolon (;). < stellt beispielsweise die linke spitze Klammer (<) dar. Nummerierte Entitten beginnen und enden ebenfalls auf die gleiche Weise, nur wird das Zeichen hier durch ein Hash-Zeichen (#) und eine Zahl angegeben. In XSLT gibt es die folgenden fnf vordefinierten Entitten:
Zeichen < (kleiner als) & (Et-Zeichen) > (grer als) " (Anfhrungszeichen) (Apostroph) Entittscode < & > " '
Wenn Sie andere Zeichenentitten in einer XSL-Datei verwenden, mssen Sie diese im DTD-Abschnitt der XSL-Datei definieren. Dreamweaver stellt mehrere Definitionen fr Standardentitten bereit, die oben in einer in Dreamweaver erstellten XSL-Datei angezeigt werden. Diese Standardentitten decken eine breite Auswahl der gngigsten Zeichen ab. Wenn Sie die XSL-Datei in einem Browser anzeigen, berprft Dreamweaver die XSL-Datei auf nicht definierte Entitten und informiert Sie darber, falls eine gefunden wird. Wenn Sie eine Vorschau einer an eine XSLT-Datei angehngten XML-Datei oder einer serverseitigen Seite mit einer XSLT-Transformation anzeigen, informiert Sie der Server oder Browser (anstelle von Dreamweaver) ber die undefinierte Entitt. Im Folgenden sehen Sie ein Beispiel fr eine Meldung, die in Internet Explorer angezeigt wird, wenn Sie eine XML-Datei anfordern, die von einer XSL-Datei mit einer fehlenden Entittsdefinition transformiert wurde.
Reference to undefined entity 'auml'. Error processing resource 'http://localhost/testthis/list.xsl'. Line 28, Position 20 <p class=''test''>ä</p> -------------------^
Um den Fehler in Ihrer Seite zu korrigieren, mssen Sie die Entittsdefinition manuell zur Seite hinzufgen.
unter www.w3.org/TR/REC-html40/sgml/entities.html. Diese Seite enthlt die 252 zulssigen Entitten in HTML 4 und XHTML 1.0. Wenn beispielsweise die Zeichenentitt Egrave fehlt, suchen Sie auf der W3C-Webseite nach Egrave. Dies fhrt Sie zu dem folgenden Eintrag:
<!ENTITY Egrave CDATA "È" -- latin capital letter E with grave, U+00C8 ISOlat1 -->
2 Notieren Sie den im Eintrag enthaltenen Namen und Code der Entitt.
In diesem Beispiel ist Egrave der Name der Entitt und È ihr Code.
3 Wechseln Sie dann in die Codeansicht und geben Sie oben in Ihrer XSL-Datei (im Anschluss an die DOCTYPE-
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 554
XML-Daten mit XSLT anzeigen
Wenn Sie die gleichen Zeichenentitten wiederholt verwenden, empfiehlt es sich, ihre Definitionen permanent in die XSL-Dateien einzufgen, die von Dreamweaver standardmig erstellt werden, wenn Sie Datei >Neu whlen.
3 Geben Sie die neuen Entitts-Tags wie folgt in der Liste der Entitts-Tags ein:
<!ENTITY entityname "entitycode;">
ENTWURF
Letzte Aktualisierung 19.3.2010
555
Webanwendungen
Grundlagen zu Webanwendungen
Eine Webanwendung ist eine Website, deren Seiteninhalt noch nicht oder nur zum Teil festgelegt ist. Der endgltige Inhalt einer Seite wird erst festgelegt, wenn der Besucher die Seite vom Webserver anfordert. Da sich der endgltige Inhalt der Seite je nach den Aktionen des Besuchers von Anforderung zu Anforderung ndern kann, wird eine solche Seite als dynamische Seite bezeichnet. Webanwendungen werden gezielt zur Bewltigung verschiedener Herausforderungen und Problemstellungen erstellt. In diesem Abschnitt werden hufige Verwendungszwecke fr Webanwendungen beschrieben. Sie finden hier auch ein einfaches Beispiel.
Die von Besuchern der Site eingegebenen Daten knnen erfasst, gespeichert und analysiert werden.
Frher wurden Daten, die in HTML-Formulare eingegeben wurden, zur Verarbeitung per E-Mail an Mitarbeiter oder CGI-Anwendungen gesendet. Mit Webanwendungen knnen Formulardaten direkt in einer Datenbank gespeichert werden. Zudem knnen Daten extrahiert und webbasierte Berichte zu Analysezwecken erstellt werden. Beispiele sind Seiten fr Online-Banking oder Online-Bestellungen, Umfragen und Formulare fr KundenFeedback.
Websites, deren Inhalt sich hufig ndert, knnen schneller aktualisiert werden.
Durch den Einsatz von Webanwendungen mssen Webdesigner den HTML-Code einer Site nicht stndig aktualisieren. Inhaltsanbieter wie z. B. Nachrichtenredaktionen liefern der Webanwendung Inhalte, und die Webanwendung aktualisiert die Site automatisch. Beispiele sind die Zeitschrift Economist (www.economist.com) sowie CNN (www.cnn.com).
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 556
Erstellen dynamischer Sites vorbereiten
Die Mitarbeiter knnen ihre Kilometeranzahl auf einer Webseite in ein einfaches HTML-Formular eingeben. Die Kilometeranzahl der Mitarbeiter wird in einer Datenbank gespeichert. Die Fitnesspunkte werden auf Grundlage der Kilometeranzahl berechnet. Die Mitarbeiter knnen ihre monatliche Leistung verfolgen. Am Monatsende kann Chris dann mit einem einfachen Mausklick die Gesamtanzahl der Punkte anzeigen.
Julia verwendet Dreamweaver, um die Webanwendung schnell und einfach zu erstellen. Noch vor der Mittagspause ist sie damit fertig.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 557
Erstellen dynamischer Sites vorbereiten
<html> <head> <title>Trio Motors Information Page</title> </head> <body> <h1>About Trio Motors</h1> <p>Trio Motors is a leading automobile manufacturer.</p> </body> </html>
Der gesamte HTML-Code der Seite wird vom Designer geschrieben, bevor die Seite auf dem Server abgelegt wird. Da der HTML-Code sich nicht mehr ndert, wenn die Seite einmal auf dem Server abgelegt wurde, bezeichnet man eine solche Seite als statisch. Hinweis: Genau genommen kann eine statische Seite alles andere als statisch sein. Sie kann beispielsweise durch ein Rollover-Bild oder einen Flash-Inhalt (eine SWF-Datei) beraus lebendig wirken. In dieser Dokumentation wird eine Seite jedoch als statisch bezeichnet, wenn sie ohne nderungen an den Browser gesendet wird. Wenn eine statische Seite vom Webserver angefordert wird, liest der Server zunchst die Anforderung. Anschlieend sucht er die Seite und sendet sie an den Browser. Dies wird im folgenden Beispiel veranschaulicht:
3
Antwort
Webserver
2
Anforderung
1 1. Der Webbrowser fordert eine statische Seite an. 2. Der Webserver sucht die Seite. 3. Der Webserver sendet die Seite an den Browser.
Bei Webanwendungen stehen bestimmte Codezeilen noch nicht fest, wenn die Seite vom Besucher angefordert wird. Diese Zeilen mssen durch einen bestimmten Mechanismus festgelegt werden, bevor die Seite an den Browser gesendet werden kann. Dieser Mechanismus wird im folgenden Abschnitt beschrieben.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 558
Erstellen dynamischer Sites vorbereiten
Webserver
5
Antwort
4
<HTML> <p>H1 </HTML>
Anwendungsserver Webbrowser
Anforderung
1. Der Webbrowser fordert eine dynamische Seite an. 2. Der Webserver sucht die Seite und bergibt sie an den Anwendungsserver. 3. Der Anwendungsserver analysiert die Anweisungen auf der Seite und stellt die Seite fertig. 4. Der Anwendungsserver gibt die fertiggestellte Seite an den Webserver zurck. 5. Der Webserver sendet die fertiggestellte Seite an den Browser.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 559
Erstellen dynamischer Sites vorbereiten
Mit dieser Anweisung wird eine Datensatzgruppe mit drei Spalten erstellt, deren Zeilen den Nachnamen, den Vornamen und die Fitnesspunkte aller Mitarbeiter enthalten, die in der Datenbank gespeichert sind. Weitere Informationen finden Sie unter www.adobe.com/go/learn_dw_sqlprimer_de. Das folgende Beispiel zeigt, wie eine Datenbankabfrage durchgefhrt wird und Daten an den Browser zurckgegeben werden:
WEBSERVER
9
Antwort
8
<HTML> <p>data </HTML>
7 6
Datensatzgruppe
Anwendungsserver Webbrowser
Datenbanktreiber
Datenbank
Anforderung
Abfrage
4 2 3
1. Der Webbrowser fordert eine dynamische Seite an. 2. Der Webserver sucht die Seite und bergibt sie an den Anwendungsserver. 3. Der Anwendungsserver analysiert die Anweisungen auf der Seite. 4. Der Anwendungsserver sendet die Abfrage an den Datenbanktreiber. 5. Der Treiber fhrt die Datenbankabfrage aus. 6. Die Datensatzgruppe wird an den Treiber zurckgegeben. 7. Der Treiber bergibt die Datensatzgruppe an den Anwendungsserver. 8. Der Anwendungsserver fgt Daten in die Seite ein und bergibt die Seite dann an den Webserver. 9. Der Webserver sendet die fertiggestellte Seite an den Browser.
Mit Ihrer Webanwendung knnen Sie praktisch jede Datenbank verwenden, sofern auf dem Server der entsprechende Datenbanktreiber installiert ist. Wenn Sie kleine, kostengnstige Anwendungen erstellen mchten, knnen Sie eine Datenbank auf Dateibasis verwenden, die beispielsweise in Microsoft Access erstellt wurde. Wenn Sie robuste Anwendungen fr kritische Geschftsablufe erstellen mchten, knnen Sie eine Datenbank auf Serverbasis verwenden, die beispielsweise in Microsoft SQL Server, Oracle 9i oder MySQL erstellt wurde. Wenn sich Ihre Datenbank nicht auf demselben System wie der Webserver befindet, mssen Sie sicherstellen, dass zwischen den beiden Systemen eine schnelle Verbindung besteht, damit die Webanwendung zgig und rationell arbeiten kann.
Verwandte Themen
Einfhrung in Datenbanken
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 560
Erstellen dynamischer Sites vorbereiten
Die eingebetteten Anweisungen auf dieser Seite bewirken die folgenden Aktionen:
1 Eine Variable namens department wird erstellt, der die Zeichenfolge "Sales" zugewiesen wird. 2 Der Wert "Sales" der Variablen wird in den HTML-Code geschrieben.
Der Webserver sendet die Seite an den Browser zurck, in dem sie folgendermaen angezeigt wird: About Trio Motors Trio Motors is a leading automobile manufacturer. Be sure to visit our Sales page. Sie whlen eine Skript- oder tagbasierte Sprache entsprechend der auf dem Server vorhandenen Servertechnologie. Im Folgenden sind die gebruchlichsten Programmiersprachen fr die von Dreamweaver untersttzten Servertechnologien aufgefhrt:
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 561
Erstellen dynamischer Sites vorbereiten
PHP
PHP
Dreamweaver kann die serverseitigen Skripts oder Tags schreiben, die fr funktionsfhige Seiten erforderlich sind. Sie knnen sie jedoch auch manuell in der Dreamweaver-Codeumgebung schreiben.
Verwandte Themen
Anwendungsserver auswhlen auf Seite 565
Terminologie fr Webanwendungen
In diesem Abschnitt werden hufig verwendete Begriffe in Bezug auf Webanwendungen erlutert.
Ein Anwendungsserver ist Software, die einen Webserver bei der Verarbeitung von Webseiten untersttzt, die
serverseitige Skripts oder Tags enthalten. Wenn eine solche Seite vom Server angefordert wird, bergibt der Webserver die Seite zur Verarbeitung an den Anwendungsserver, bevor sie an den Browser gesendet wird. Weitere Informationen finden Sie unter Funktionsweise einer Webanwendung auf Seite 556. Zu den hufig verwendeten Anwendungsservern gehren ColdFusion und PHP.
Eine Datenbank ist eine in Tabellen gespeicherte Datensammlung. Jede Zeile der Tabelle bildet einen Datensatz, und
Ein Datenbanktreiber ist Software mit der Funktion eines Vermittlers zwischen dem Anwendungsserver und der
Datenbank. Die Daten in einer Datenbank werden in einem speziellen Format gespeichert. Mithilfe eines Datenbanktreibers kann die Webanwendung Daten lesen und bearbeiten, die sonst nicht lesbar sind.
Ein Datenbankmanagementsystem (DBMS oder Datenbanksystem) ist Software, die zur Erstellung und Bearbeitung von Datenbanken dient. Hufig verwendete Datenbanksysteme sind beispielsweise Microsoft Access, Oracle 9i und MySQL. Eine Datenbankabfrage ist ein Vorgang, bei dem eine Datensatzgruppe aus einer Datenbank extrahiert wird. Eine
Abfrage besteht aus Suchkriterien, die in einer Datenbanksprache namens SQL ausgedrckt werden. In der Abfrage kann beispielsweise vorgegeben werden, dass nur bestimmte Spalten oder Datenstze in die Datensatzgruppe aufgenommen werden.
Eine dynamische Seite ist eine Webseite, die zur Laufzeit von einem Anwendungsserver angepasst und erst dann an den Browser gesendet wird.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 562
Erstellen dynamischer Sites vorbereiten
Eine Datensatzgruppe ist eine Datenteilmenge, die aus Tabellen einer Datenbank extrahiert wird, wie im folgenden
Beispiel gezeigt:
Number LastName FirstName Position Goals
Datenbanktabelle
Datensatzgruppen-Tabelle
Eine relationale Datenbank ist eine Datenbank mit mehreren Tabellen, deren Daten von den Tabellen gemeinsam
verwendet werden. Die folgende Datenbank ist relational, da die Spalte DepartmentID von zwei Tabellen genutzt wird.
Eine Servertechnologie wird von einem Anwendungsserver verwendet, um dynamische Seiten zur Laufzeit zu
Adobe ColdFusion Microsoft Active Server Pages (ASP) PHP: Hypertext Preprocessor (PHP)
Mit der Code-Entwicklungsumgebung von Dreamweaver knnen Sie auch Seiten fr beliebige andere Servertechnologien entwickeln, die nicht in der Liste aufgefhrt sind.
Eine statische Seite ist eine Webseite, die zur Laufzeit nicht von einem Anwendungsserver angepasst, sondern
unmittelbar an den Browser gesendet wird. Weitere Informationen finden Sie unter Statische Webseiten verarbeiten auf Seite 556.
Eine Webanwendung ist eine Website, deren Seiteninhalt noch nicht oder nur zum Teil festgelegt ist. Der endgltige
Inhalt dieser Seiten wird erst festgelegt, wenn der Besucher die Seite vom Webserver anfordert. Da sich der endgltige Inhalt der Seite je nach den Aktionen des Besuchers von Anforderung zu Anforderung ndern kann, wird eine solche Seite als dynamische Seite bezeichnet.
Ein Webserver ist Software, die von Webbrowsern angeforderte Webseiten bereitstellt. Eine Seitenanforderung wird
generiert, wenn der Besucher auf einen Hyperlink auf einer Webseite klickt, in einem Browser ein Lesezeichen whlt oder eine URL im Adresstextfeld des Browsers eingibt.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 563
Erstellen dynamischer Sites vorbereiten
Gngige Webserver sind beispielsweise Microsoft Internet Information Server (IIS) und Apache HTTP Server.
Verwandte Themen
ColdFusion-Entwicklungsumgebung einrichten auf Seite 566 PHP-Entwicklungsumgebung einrichten auf Seite 566 ASP-Entwicklungsumgebung einrichten auf Seite 566
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 564
Erstellen dynamischer Sites vorbereiten
Wenn Sie Webanwendungen mithilfe von Internet Information Server (IIS) entwickeln, entspricht der Standardname des Webservers dem Namen Ihres Computers. Sie knnen den Servernamen ndern, indem Sie Ihrem Computer einen anderen Namen geben. Falls Ihr Computer keinen Namen hat, lautet der Servername localhost. Der Servername entspricht dem Stammordner des Servers, der (bei Windows-Rechnern) normalerweise C:\Inetpub\wwwroot lautet. Sie knnen beliebige im Stammordner gespeicherte Webseiten ffnen, indem Sie die folgende URL in einem Browser eingeben, der auf Ihrem Computer ausgefhrt wird: http://Ihr_Servername/Ihr_Dateiname Angenommen, der Servername lautet mer_noire, und im Stammordner C:\Inetpub\wwwroot\ befindet sich eine Webseite namens soleil.html. Sie knnen diese Seite ffnen, indem Sie in einem Browser auf dem lokalen Computer die folgende URL eingeben: http://mer_noire/soleil.html Hinweis: Verwenden Sie in URLs normale Schrgstriche (/), keine umgekehrten (\\). Sie knnen auch Webseiten ffnen, die in einem Unterordner des Stammordners gespeichert sind. Dazu geben Sie den Pfad des Unterordners in der URL an. Angenommen, die Datei soleil.html befindet sich im Unterordner gamelan. Der Pfad lautet daher: C:\Inetpub\wwwroot\gamelan\soleil.html Sie knnen diese Seite ffnen, indem Sie die folgende URL in einem Browser auf Ihrem Computer eingeben: http://mer_noire/gamelan/soleil.html Wenn der Webserver auf Ihrem Computer ausgefhrt wird, knnen Sie den Servernamen durch localhost ersetzen. Durch Eingabe der folgenden URLs wird beispielsweise die gleiche Seite in einem Browser geffnet: http://mer_noire/gamelan/soleil.html http://localhost/gamelan/soleil.html Hinweis: Anstelle des Servernamens oder des Worts localhost knnen Sie auch den Ausdruck 127.0.0.1 verwenden (beispielsweise http://127.0.0.1/gamelan/soleil.html).
Verwandte Themen
ColdFusion-Entwicklungsumgebung einrichten auf Seite 566 PHP-Entwicklungsumgebung einrichten auf Seite 566 ASP-Entwicklungsumgebung einrichten auf Seite 566
Webserver auswhlen
Fr das Entwickeln und Testen von Webanwendungen steht eine Reihe gebruchlicher Webserver zur Auswahl, darunter auch Microsoft Internet Information Server (IIS) und Apache HTTP Server. Wenn Sie keinen Web-Hosting-Dienst verwenden, whlen Sie einen Webserver aus und installieren Sie ihn auf Ihrem lokalen Computer. Windows- und Macintosh-Benutzer, die ColdFusion-Webanwendungen entwickeln mchten, knnen dazu den Webserver verwenden, der in der Entwicklerversion des ColdFusion 8-Anwendungsservers enthalten ist und der kostenlos installiert und genutzt werden kann.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 565
Erstellen dynamischer Sites vorbereiten
Andere Windows-Benutzer knnen einen Webserver auf ihrem lokalen Computer ausfhren, indem sie IIS installieren. Dieser Webserver ist mglicherweise bereits auf Ihrem System installiert. berprfen Sie, ob Ihre Ordnerstruktur den Ordner C:\Inetpub oder D:\Inetpub enthlt. Dieser Ordner wird bei der Installation von IIS erstellt. Mac OS-Benutzer knnen den lokalen Apache-Webserver verwenden, der mit dem Betriebssystem installiert wird. Wenn Sie Informationen zum Installieren und Konfigurieren anderer Webserver bentigen, schlagen Sie in der Dokumentation des Serveranbieters nach oder wenden Sie sich an Ihren Systemadministrator.
Anwendungsserver auswhlen
Bei einem Anwendungsserver handelt es sich um Software, die einem Webserver bei der Verarbeitung dynamischer Seiten hilft. Bei der Wahl eines Anwendungsservers sind mehrere Faktoren zu bercksichtigen. Dazu gehren unter anderem Ihr Budget, die zu verwendende Servertechnologie (ColdFusion, ASP oder PHP) und der Typ des Webservers.
Budget Einige Anbieter verkaufen Highend-Anwendungsserver, die in Anschaffung und Administration kostspielig
sind. Andere Anbieter liefern einfachere und kostengnstigere Lsungen (z. B. ColdFusion). Einige Anwendungsserver sind in Webserver integriert (z. B. Microsoft IIS), andere knnen kostenlos im Internet heruntergeladen werden (z. B. PHP).
Servertechnologie Anwendungsserver verwenden unterschiedliche Technologien. Dreamweaver untersttzt drei
Servertechnologien: ColdFusion, ASP und PHP. In der folgenden Tabelle sind gngige Anwendungsserver fr die von Dreamweaver untersttzten Servertechnologien aufgefhrt:
Servertechnologie ColdFusion ASP PHP Anwendungsserver Adobe ColdFusion 8 Microsoft IIS PHP Server
Weitere Informationen zu ColdFusion finden Sie in der ColdFusion-Hilfe, die Sie ber das Men Hilfe aufrufen knnen. Weitere Informationen zu ASP finden Sie auf der Microsoft-Website unter http://msdn.microsoft.com/library/default.asp?url=/library/de-de/dnanchor/html/activeservpages.asp. Weitere Informationen zu PHP finden Sie auf der PHP-Website unter www.php.net/.
Datenbank auswhlen
Datenbanken knnen je nach Menge und Komplexitt der zu speichernden Daten in vielen Variationen vorliegen. Bei der Auswahl einer Datenbank sind mehrere Faktoren zu bercksichtigen, darunter beispielsweise Ihr Budget und die geschtzte Anzahl der Benutzer, die auf die Datenbank zugreifen.
Budget Einige Anbieter vertreiben Highend-Datenbankserver, deren Anschaffung und Verwaltung kostspielig sind.
Andere bieten einfachere und kostengnstigere Lsungen an, z. B. Microsoft Access oder die Open-SourceDatenbank MySQL.
Benutzer Wenn Sie davon ausgehen, dass sehr viele Benutzer auf die Site zugreifen, sollten Sie eine Datenbank
verwenden, die die geplante Benutzeranzahl der Site untersttzen kann. Bei Websites, die ein hheres Ma an Flexibilitt der Datenmodelle sowie die Untersttzung einer groen Anzahl gleichzeitiger Benutzer erfordern, sollten
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 566
Erstellen dynamischer Sites vorbereiten
Sie serverbasierte relationale Datenbanken (meist als RDBMS bezeichnet) wie Microsoft SQL Server und Oracle verwenden.
ColdFusion-Entwicklungsumgebung einrichten
Ausfhrliche Anweisungen zum Einrichten einer ColdFusion-Entwicklungsumgebung fr Dreamweaver auf einem Windows- oder Mac-Computer finden Sie auf der Adobe-Website unter www.adobe.com/go/learn_dw_cfsetup_de. Sowohl Windows- als auch Macintosh-Benutzer knnen eine kostenlose voll funktionsfhige Entwicklerversion des ColdFusion-Anwendungsservers von der Adobe-Website unter www.adobe.com/go/coldfusion_de/ herunterladen und installieren. Hinweis: Die Entwicklerversion ist zum nicht kommerziellen Gebrauch gedacht und dient zum Entwickeln und Testen von Webanwendungen. Sie ist nicht zur geschftlichen Nutzung lizenziert und untersttzt Anfragen vom lokalen Host sowie zwei Remote-IP-Adressen. Sie knnen Ihre Webanwendungen mit dieser Software auf unbegrenzte Zeit entwickeln und testen. Die Nutzungsdauer der Software ist nicht eingeschrnkt. Weitere Informationen finden Sie in der ColdFusion-Hilfe (Hilfe > ColdFusion-Hilfe). Bei der Installation knnen Sie ColdFusion so konfigurieren, dass der in ColdFusion integrierte Webserver oder ein anderer im System installierter Webserver verwendet wird. Im Allgemeinen empfiehlt es sich, die Entwicklungsumgebung auf die Produktionsumgebung abzustimmen. Wenn auf Ihrem Entwicklungscomputer bereits ein Webserver wie Microsoft IIS vorhanden ist, sollten Sie diesen anstelle des integrierten ColdFusionWebservers verwenden.
PHP-Entwicklungsumgebung einrichten
Ausfhrliche Anweisungen zum Einrichten einer PHP-Entwicklungsumgebung fr Dreamweaver auf einem Windows- oder Mac-Computer finden Sie auf der Adobe-Website unter www.adobe.com/go/learn_dw_phpsetup_de. Der PHP-Anwendungsserver ist fr Windows-, Linux-, UNIX-, HP-UX-, Solaris- und Mac OS X-Systeme erhltlich. Weitere Informationen zum Anwendungsserver finden Sie in der PHP-Dokumentation, die Sie ebenfalls von der PHP-Website unter www.php.net/download-docs.php herunterladen knnen.
ASP-Entwicklungsumgebung einrichten
Ausfhrliche Anweisungen zum Einrichten einer ASP-Entwicklungsumgebung fr Dreamweaver auf einem Windows- oder Mac-Computer finden Sie auf der Adobe-Website unter www.adobe.com/go/learn_dw_aspsetup_de. Zum Ausfhren von ASP-Seiten ist ein Anwendungsserver erforderlich, der Microsoft Active Server Pages 2.0 untersttzt. Dazu gehrt beispielsweise Microsoft IIS (Internet Information Services), das mit Windows 2000 und Windows XP Professional bereitgestellt wird. Windows XP Professional-Benutzer knnen IIS auf ihrem lokalen Computer installieren und ausfhren. Macintosh-Benutzer knnen einen Web-Hosting-Dienst mit ASP-Angebot verwenden oder IIS auf einem Remote-Computer installieren.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 567
Erstellen dynamischer Sites vorbereiten
Der Webserver kann in diesem Ordner bzw. in dessen Unterordnern beliebige Dateien bereitstellen, die ber eine HTTP-Anforderung von einem Webbrowser abgerufen werden. Beispielsweise knnen auf einem Computer, auf dem ColdFusion 8 ausgefhrt wird, alle Dateien, die sich im Ordner \ColdFusion8\wwwroot oder in einem seiner Unterordner befinden, fr andere Webbrowser bereitgestellt werden. Hier eine Liste der Standardpfade fr Stammordner bei ausgewhlten Webservern:
Webserver ColdFusion 8 IIS Apache (Windows) Apache (Macintosh) Standardmiger Stammordner \ColdFusion8\wwwroot \Inetpub\wwwroot \apache\htdocs Benutzer:[Benutzername]:Sites
Legen Sie zum Testen des Webservers eine HTML-Testseite im standardmigen Stammordner ab und versuchen Sie, diese Seite zu ffnen, indem Sie die URL der Seite in einem Browser eingeben. Die URL setzt sich aus dem Domnennamen und dem Dateinamen der HTML-Seite zusammen, wie im folgenden Beispiel gezeigt: www.beispiel.com/testseite.htm. Wenn der Webserver auf dem lokalen Computer ausgefhrt wird, knnen Sie anstelle eines Domnennamens localhost verwenden. Geben Sie eine der folgenden localhost-URLs fr Ihren Webserver ein:
Webserver ColdFusion 8 IIS Apache (Windows) Apache (Macintosh) localhost-URL http://localhost:8500/testseite.htm http://localhost/testseite.htm http://localhost:80/testseite.htm http://localhost/~Benutzername/testseite.htm (wobei Benutzername Ihrem MacintoshBenutzernamen entspricht)
Hinweis: Der ColdFusion-Webserver wird standardmig ber Port 8500 ausgefhrt und der Apache-Webserver fr Windows ber Port 80. Wenn die Seite nicht wie erwartet geffnet wird, prfen Sie, ob einer der folgenden Fehler vorliegt:
Der Webserver wurde nicht gestartet. Lesen Sie die Anweisungen zum Starten in der Dokumentation des
Webservers.
Die Datei hat nicht die Erweiterung .htm oder .html. Sie haben im Adressfeld des Browsers den Dateipfad der Seite eingegeben (z. B.
C:\ColdFusion8\wwwroot\testseite.htm) und nicht ihre URL (z. B. http://localhost:8500/testseite.htm).
Die URL enthlt einen Schreibfehler. Prfen Sie, ob Ihnen ein Schreibfehler unterlaufen ist, und achten Sie darauf,
dass Sie hinter dem Dateinamen keinen Schrgstrich eingeben (wie bei http://localhost:8080/testseite.htm/). Definieren Sie, nachdem Sie einen Stammordner fr Ihre Anwendung erstellt haben, eine Dreamweaver-Site zur Verwaltung der Dateien.
Verwandte Themen
Grundlagen zum Webserver auf Seite 563 Dreamweaver-Sites einrichten auf Seite 39
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 568
Erstellen dynamischer Sites vorbereiten
Dreamweaver-Site definieren
Nachdem Sie Ihr System fr die Entwicklung von Webanwendungen konfiguriert haben, mssen Sie eine Dreamweaver-Site zur Verwaltung der Dateien definieren. Vergewissern Sie sich zunchst, dass die folgenden Voraussetzungen erfllt sind:
Sie haben Zugriff auf einen Webserver. Der Webserver kann auf einem lokalen Computer, einem RemoteComputer (z. B. Entwicklungsserver) oder einem von einem Web-Host-Dienstanbieter verwalteten Server ausgefhrt werden.
In dem System, auf dem der Webserver ausgefhrt wird, wurde ein Anwendungsserver installiert, und dieser Server
wird ausgefhrt.
Sie haben in dem System, auf dem der Webserver ausgefhrt wird, einen Stammordner fr die Webanwendung
angelegt. Das Definieren einer Dreamweaver-Site fr eine Webanwendung umfasst drei Einzelschritte: 1. Lokalen Ordner definieren Der lokale Ordner ist der Ordner, in dem Sie Arbeitskopien der Site-Dateien auf Ihrer Festplatte ablegen. Sie knnen fr jede von Ihnen neu erstellte Webanwendung einen eigenen lokalen Ordner definieren. Lokale Ordner erleichtern nicht nur die Dateiverwaltung, sondern auch die bertragung der Dateien von und zum Webserver. 2. Remote-Ordner definieren Definieren Sie einen Ordner auf dem Computer, auf dem der Webserver ausgefhrt wird, als Remote-Ordner fr Dreamweaver. Bei dem Remote-Ordner handelt es sich um den Ordner, den Sie fr Ihre Webanwendung auf dem Webserver erstellt haben. 3. Testordner definieren Dreamweaver verwendet diesen Ordner, um whrend der Bearbeitung dynamische Inhalte zu erstellen und anzuzeigen sowie Verbindungen zu Datenbanken herzustellen. Als Testserver kann der lokale Computer, ein Entwicklungsserver, ein Staging-Server oder ein Produktionsserver verwendet werden. Sofern der Server die Art der von Ihnen entwickelten dynamischen Seiten verarbeiten kann, spielt die Wahl keine Rolle. Nachdem die Dreamweaver-Site definiert wurde, knnen Sie mit dem Erstellen der Webanwendung beginnen.
Verwandte Themen
Dreamweaver-Sites einrichten auf Seite 39
Datenbankverbindungen fr ColdFusion-Entwickler
Verbindungen mit ColdFusion-Datenbanken herstellen
Beim Entwickeln einer ColdFusion-Webanwendung in Dreamweaver stellen Sie eine Datenbankverbindung her, indem Sie eine ColdFusion-Datenquelle auswhlen, die in Dreamweaver oder in der Verwaltungskonsole des Servers, dem ColdFusion-Administrator, definiert ist. Die Herstellung einer Datenbankverbindung setzt voraus, dass Sie eine ColdFusion-Webanwendung eingerichtet haben. Auerdem mssen Sie auf dem lokalen Computer oder in einem System, auf das Sie Netzwerk- oder FTPZugriff haben, eine Datenbank einrichten.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 569
Erstellen dynamischer Sites vorbereiten
Achten Sie darauf, dass Dreamweaver den Speicherort der ColdFusion-Datenquellen kennt. Um ColdFusionDatenquellen in der Entwurfsphase abrufen zu knnen, speichert Dreamweaver Skripts in einem Ordner auf dem Computer, auf dem ColdFusion ausgefhrt wird. Diesen Ordner mssen Sie in der Kategorie Testserver des Dialogfelds Site-Definition angeben. Als Nchstes mssen Sie in Dreamweaver oder im ColdFusion-Administrator eine ColdFusion-Datenquelle erstellen (falls noch nicht vorhanden). Mithilfe der eben erstellten ColdFusion-Datenquelle knnen Sie nun in Dreamweaver eine Verbindung zur Datenbank herstellen.
Verwandte Themen
Testserver einrichten auf Seite 49 ColdFusion-Erweiterungen aktivieren auf Seite 718
ColdFusion-Datenquelle erstellen oder ndern, wenn ColdFusion MX 7 oder eine sptere Version ausgefhrt wird
1 Stellen Sie sicher, dass fr Ihre Site ein Computer als Testserver definiert ist, auf dem ColdFusion MX 7 oder eine
die Schaltflche mit dem Pluszeichen (+) und geben Sie die fr den Datenbanktreiber relevanten Parameterwerte ein. Hinweis: Die Schaltflche mit dem Pluszeichen (+) wird in Dreamweaver nur angezeigt, wenn Sie ColdFusion MX 7 oder eine sptere Version ausfhren.
4 Doppelklicken Sie zum ndern einer Datenquelle im Bedienfeld Datenbanken auf die Datenbankverbindung
und nehmen Sie die gewnschten nderungen vor. Sie knnen jeden Parameter auer dem Namen der Datenquelle bearbeiten. Weitere Informationen finden Sie in der Treiberdokumentation des Herstellers oder fragen Sie Ihren Systemadministrator.
ColdFusion-Datenquelle erstellen oder ndern, wenn ColdFusion MX 6.1 oder 6.0 ausgefhrt wird
1 ffnen Sie eine ColdFusion-Seite in Dreamweaver. 2 Klicken Sie im Bedienfeld Datenbanken (Fenster > Datenbanken) von Dreamweaver in der Symbolleiste des
Die Anleitung dazu finden Sie in der ColdFusion-Hilfe (Hilfe > ColdFusion-Hilfe). Zum Erstellen der ColdFusion-Datenquelle mssen Sie bestimmte Parameterwerte angeben. Die Parameterwerte fr Ihren speziellen Datenbanktreiber knnen Sie der Dokumentation des Treiberherstellers entnehmen oder bei Ihrem Systemadministrator erfragen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 570
Erstellen dynamischer Sites vorbereiten
Nachdem Sie eine ColdFusion-Datenquelle erstellt haben, knnen Sie sie in Dreamweaver einsetzen.
Verwandte Themen
Fehler bei Datenbankverbindungen beheben auf Seite 580
Datenbankverbindungen fr ASP-Entwickler
ASP-Datenbankverbindungen
Eine ASP-Anwendung muss ber einen ODBC-Treiber (ODBC = Open DataBase Connectivity) oder ber einen OLE DB-Anbieter (OLE DB = Object Linking and Embedding DataBase) mit einer Datenbank verbunden werden. Der Treiber oder Anbieter dient dabei als Dolmetscher, der die Kommunikation zwischen der Webanwendung und der Datenbank ermglicht. In der folgenden Tabelle sind einige Treiber aufgefhrt, die fr Datenbanken von Microsoft Access, Microsoft SQL Server und Oracle verwendet werden knnen:
Datenbank Microsoft Access Datenbanktreiber Microsoft Access-Treiber (ODBC) Microsoft Jet-Anbieter fr Access (OLE DB) Microsoft SQL Server Microsoft SQL Server-Treiber (ODBC) Microsoft SQL Server-Anbieter (OLE DB) Oracle Microsoft Oracle-Treiber (ODBC) Oracle-Anbieter fr OLE DB
Eine Datenbankverbindung kann ber einen DSN (Data Source Name = Datenquellenname) oder ber eine Verbindungszeichenfolge hergestellt werden. Sie mssen eine Verbindungszeichenfolge verwenden, wenn Sie die Verbindung ber einen OLE DB-Anbieter oder einen ODBC-Treiber herstellen, der nicht in einem Windows-System installiert ist. Ein DSN ist eine aus einem Wort (z. B. myConnection) bestehende Kennung, die auf die Datenbank verweist und alle Informationen enthlt, die fr die Verbindung ntig sind. Der DSN wird in Windows definiert. Die Verwendung eines DSN kommt in Frage, wenn Sie die Verbindung ber einen ODBC-Treiber herstellen, der in einem WindowsSystem installiert ist. Eine Verbindungszeichenfolge ist ein manuell kodierter Ausdruck, der als Kennung der Datenbank dient und alle Informationen enthlt, die zum Herstellen der Verbindung ntig sind. Dazu ein Beispiel:
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 571
Erstellen dynamischer Sites vorbereiten
Hinweis: Sie knnen eine Verbindungszeichenfolge auch verwenden, wenn Sie die Verbindung ber einen ODBCTreiber herstellen, der in einem Windows-System installiert ist. Die Verwendung eines DSN ist hierfr jedoch einfacher.
Verwandte Themen
Auf Datenbanken zugreifen auf Seite 558
OLE DB-Verbindungen
Die Kommunikation mit Ihrer Datenbank kann ber einen OLE >DB-Anbieter erfolgen (OLE DB ist nur unter Windows NT, Windows 2000 und Windows XP verfgbar). Das Erstellen einer direkten datenbankspezifischen OLE DB-Verbindung kann die Geschwindigkeit der Verbindung optimieren, da die ODBC-Ebene zwischen der Webanwendung und der Datenbank wegfllt. Wenn Sie keinen OLE DB-Anbieter fr Ihre Datenbank angeben, verwendet ASP den standardmigen OLE DBAnbieter fr ODBC-Treiber fr die Kommunikation mit einem ODBC-Treiber, der seinerseits mit der Datenbank kommuniziert. Fr verschiedene Datenbanken sind verschiedene OLE DB-Anbieter vorhanden. OLE DB-Anbieter fr Microsoft Access und SQL Server knnen Sie einrichten, indem Sie die MDAC-Pakete 2.5 und 2.7 (MDAC = Microsoft Data Access Components) herunterladen und auf dem Windows-Computer installieren, auf dem IIS ausgefhrt wird. Sie knnen die MDAC-Pakete kostenlos von der Microsoft-Website unter http://msdn.microsoft.com/data/mdac/downloads/ herunterladen. Hinweis: Beachten Sie, dass zuerst MDAC 2.5 und dann MDAC 2.7 installiert werden muss. OLE DB-Anbieter fr Oracle-Datenbanken knnen Sie von der Oracle-Website unter www.oracle.com/technology/software/tech/windows/ole_db/index.html herunterladen (Registrierung erforderlich). Eine OLE DB-Verbindung wird in Dreamweaver durch Aufnahme eines Provider-Parameters in eine Verbindungszeichenfolge erstellt. Hier sind die Parameter fr gngige OLE DB-Anbieter fr Access-, SQL Server- und Oracle-Datenbanken:
Provider=Microsoft.Jet.OLEDB.4.0;... Provider=SQLOLEDB;... Provider=OraOLEDB;...
Den Parameterwert Ihres OLE DB-Anbieters knnen Sie der Dokumentation des entsprechenden Anbieters entnehmen oder von Ihrem Systemadministrator erfragen.
Verbindungszeichenfolgen
Eine Verbindungszeichenfolge enthlt alle Informationen, die die Webanwendung bentigt, um eine Verbindung mit der Datenbank herzustellen. Dreamweaver fgt diese Zeichenfolge zur spteren Verarbeitung durch den Anwendungsserver in die serverseitigen Skripts Ihrer Seite ein. Verbindungszeichenfolgen fr Microsoft Access- und SQL Server-Datenbanken bestehen aus einer Kombination der folgenden Parameter, die jeweils durch Semikola voneinander getrennt werden:
Provider gibt den OLE DB-Anbieter fr die Datenbank an. Hier sind die Parameter fr gngige OLE DB-Anbieter fr
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 572
Erstellen dynamischer Sites vorbereiten
Den Parameterwert Ihres OLE DB-Anbieters knnen Sie der Dokumentation des entsprechenden Anbieters entnehmen oder von Ihrem Systemadministrator erfragen. Wenn Sie keinen Anbieter-Parameter angeben, wird der standardmige OLE DB-Anbieter fr ODBC verwendet und Sie mssen einen geeigneten ODBC-Treiber fr Ihre Datenbank angeben.
Treiber legt fest, welcher ODBC-Treiber verwendet werden soll, wenn Sie keinen OLE DB-Anbieter fr Ihre
Datenbank angeben.
Server gibt den Server an, auf dem sich die SQL Server-Datenbank befindet, falls Ihre Webanwendung auf einem anderen Server ausgefhrt wird. Datenbank ist der Name einer SQL Server-Datenbank. DBQ gibt den Pfad zu einer dateibasierten Datenbank an, z. B. eine Microsoft Access-Datenbank. Hierbei handelt es sich um den Pfad auf dem Server, der als Host fr die Datenbankdatei fungiert. UID gibt den Benutzernamen an. PWD gibt das Benutzerkennwort an. DSN ist der Datenquellenname (falls einer verwendet wird). Je nach der Definition des DSN auf dem Server knnen Sie die anderen Parameter der Verbindungszeichenfolge weglassen. So kann zum Beispiel DSN=Results eine gltige Verbindungszeichenfolge sein, wenn Sie die anderen Parameter beim Erstellen des DSN definieren.
Verbindungszeichenfolgen fr andere Datenbanken drfen die oben aufgefhrten Parameter nicht verwenden bzw. haben andere Namen oder Verwendungszwecke fr die Parameter. Weitere Informationen finden Sie in der Dokumentation des Datenbankherstellers oder fragen Sie Ihren Systemadministrator. Hier ist ein Beispiel fr eine Verbindungszeichenfolge, mit der eine ODBC-Verbindung mit der Access-Datenbank trees.mdb hergestellt wird:
Driver={Microsoft Access Driver (*.mdb)}; DBQ=C:\Inetpub\wwwroot\Research\trees.mdb
Hier ist ein Beispiel fr eine Verbindungszeichenfolge, die eine OLE DB-Verbindung mit einer SQL Server-Datenbank namens Mothra auf dem Server Gojira herstellt:
Provider=SQLOLEDB;Server=Gojira;Database=Mothra;UID=jsmith; PWD=orlando8
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 573
Erstellen dynamischer Sites vorbereiten
In Dreamweaver knnen Datenbankverbindungen ber einen lokal definierten DSN erstellt werden.
1 Definieren Sie einen DSN auf dem Windows-Computer, auf dem Dreamweaver ausgefhrt wird.
Anweisungen hierzu finden Sie in den folgenden Artikeln auf der Microsoft-Website:
Wenn auf dem Computer Windows 2000 ausgefhrt wird, lesen Sie Microsoft Knowledge Base-Artikel 300596
unter http://support.microsoft.com/default.aspx?scid=kb;de-de;300596.
Wenn auf dem Computer Windows XP ausgefhrt wird, lesen Sie Microsoft Knowledge Base-Artikel 305599 unter
http://support.microsoft.com/default.aspx?scid=kb;de-de;305599.
2 ffnen Sie in Dreamweaver eine ASP-Seite und dann das Bedienfeld Datenbanken (Fenster > Datenbanken). 3 Klicken Sie im Bedienfeld auf die Schaltflche mit dem Pluszeichen (+) und whlen Sie im Men die Option Data
gewnschten DSN aus. Wenn Sie einen lokalen DSN verwenden mchten, aber noch keinen definiert haben, klicken Sie auf Definieren, um den ODBC-Datenquellen-Administrator von Windows zu ffnen.
6 Fllen Sie die Felder Benutzername und Kennwort aus. 7 Sie knnen die von Dreamweaver whrend der Entwurfsphase abgerufenen Datenbankelemente einschrnken,
indem Sie auf Erweitert klicken und den Namen eines Schemas oder Katalogs angeben. Hinweis: Das Erstellen eines Schemas oder Katalogs ist in Microsoft Access nicht mglich.
8 Klicken Sie auf Testen, um eine Verbindung mit der Datenbank herzustellen. Klicken Sie dann auf OK. Kommt
keine Verbindung zustande, berprfen Sie die Verbindungszeichenfolge oder die Einstellungen fr den Testordner, den Dreamweaver zur Verarbeitung dynamischer Seiten verwendet.
Verwandte Themen
Anzeige der Datenbankinformationen in Dreamweaver eingrenzen auf Seite 589 Computer fr die Entwicklung von Anwendungen einrichten auf Seite 563 Fehler bei Datenbankverbindungen beheben auf Seite 580
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 574
Erstellen dynamischer Sites vorbereiten
Anweisungen hierzu finden Sie in den folgenden Artikeln auf der Microsoft-Website:
Wenn auf dem Remote-Computer Windows 2000 ausgefhrt wird, lesen Sie Microsoft Knowledge Base-Artikel
300596 unter http://support.microsoft.com/default.aspx?scid=kb;de-de;300596.
Wenn auf dem Remote-Computer Windows XP ausgefhrt wird, lesen Sie Microsoft Knowledge Base-Artikel
305599 unter http://support.microsoft.com/default.aspx?scid=kb;de-de;305599.
2 ffnen Sie in Dreamweaver eine ASP-Seite und anschlieend das Bedienfeld Datenbanken (Fenster >
Datenbanken).
3 Klicken Sie im Bedienfeld auf die Schaltflche mit dem Pluszeichen (+) und whlen Sie im Men die Option Data
Hinweis: Macintosh-Benutzer knnen diesen Schritt ignorieren, da alle Datenbankverbindungen ber DSNs auf dem Anwendungsserver erfolgen.
6 Geben Sie den DSN ein oder klicken Sie auf die Schaltflche DSN, um eine Verbindung zum Server herzustellen.
Whlen Sie dann den DSN fr die gewnschte Datenbank aus und stellen Sie die brigen Optionen ein.
7 Fllen Sie die Felder Benutzername und Kennwort aus. 8 Sie knnen die von Dreamweaver whrend der Entwurfsphase abgerufenen Datenbankelemente einschrnken,
indem Sie auf Erweitert klicken und den Namen eines Schemas oder Katalogs angeben. Hinweis: Das Erstellen eines Schemas oder Katalogs ist in Microsoft Access nicht mglich.
9 Klicken Sie auf Testen, um eine Verbindung mit der Datenbank herzustellen. Klicken Sie dann auf OK. Kommt
keine Verbindung zustande, berprfen Sie die Verbindungszeichenfolge oder die Einstellungen fr den Testordner, den Dreamweaver zur Verarbeitung dynamischer Seiten verwendet.
Verwandte Themen
Computer fr die Entwicklung von Anwendungen einrichten auf Seite 563 Anzeige der Datenbankinformationen in Dreamweaver eingrenzen auf Seite 589 Fehler bei Datenbankverbindungen beheben auf Seite 580
OLE DB-Anbieter angeben (wenn Sie den Parameter Provider nicht verwenden), verwendet ASP automatisch den OLE DB-Anbieter fr ODBC-Treiber. In diesem Fall mssen Sie einen geeigneten ODBC-Treiber fr die Datenbank angeben. Wenn Ihre Site von einem ISP gehostet wird und Sie den vollstndigen Pfad zur Datenbank nicht kennen, bauen Sie die Methode MapPath des ASP-Serverobjekts in Ihre Verbindungszeichenfolge ein.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 575
Erstellen dynamischer Sites vorbereiten
5 Falls der in der Verbindungszeichenfolge angegebene Datenbanktreiber nicht auf demselben Computer wie
Dreamweaver installiert ist, aktivieren Sie die Option Mithilfe des Treibers auf dem Testserver. Hinweis: Macintosh-Benutzer knnen diesen Schritt ignorieren, da alle Datenbankverbindungen den Anwendungsserver verwenden.
6 Sie knnen die von Dreamweaver whrend der Entwurfsphase abgerufenen Datenbankelemente einschrnken,
indem Sie auf Erweitert klicken und den Namen eines Schemas oder Katalogs angeben. Hinweis: Das Erstellen eines Schemas oder Katalogs ist in Microsoft Access nicht mglich.
7 Klicken Sie auf Testen, um eine Verbindung mit der Datenbank herzustellen. Klicken Sie dann auf OK. Kommt
keine Verbindung zustande, berprfen Sie die Verbindungszeichenfolge oder die Einstellungen fr den Testordner, den Dreamweaver zur Verarbeitung dynamischer Seiten verwendet.
Verwandte Themen
Verbindungen mit ColdFusion-Datenbanken herstellen auf Seite 568 Anzeige der Datenbankinformationen in Dreamweaver eingrenzen auf Seite 589 Fehler bei Datenbankverbindungen beheben auf Seite 580
Dieser Pfad wird als physischer Pfad zu Ihrer Datei bezeichnet. Die URL zum ffnen der Datei hat jedoch nichts mit diesem physischen Pfad zu tun. Sie setzt sich vielmehr aus dem Namen des Servers bzw. der Domne sowie einem virtuellen Pfad zusammen, wie in folgendem Beispiel:
www.plutoserve.com/jsmith/index.htm
Der virtuelle Pfad /jsmith/index.htm ersetzt also den physischen Pfad c:\Inetpub\wwwroot\accounts\users\jsmith\index.htm.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 576
Erstellen dynamischer Sites vorbereiten
Angenommen, der virtuelle Pfad einer Datei lautet /jsmith/index.htm. Der folgende Ausdruck gibt dann den zugehrigen physischen Pfad zurck:
Server.MapPath("/jsmith/index.htm")
3 Bestimmen Sie mit der Methode MapPath einen Wert fr das Argument stringvariable.
Beispiel:
<% Response.Write(Server.MapPath("/jsmith/index.htm")) %>
4 Wechseln Sie zur Live-Ansicht (Ansicht > Live-Ansicht), um die Seite anzuzeigen.
Der physische Pfad der Datei auf dem Anwendungsserver wird auf der Seite angezeigt. Beispiel:
c:\Inetpub\wwwroot\accounts\users\jsmith\index.htm
Weitere Informationen zur MapPath-Methode finden Sie in der Online-Dokumentation von Microsoft IIS.
Wenn Ihnen der physische Speicherort Ihrer Dateien auf dem Remote-Server nicht bekannt ist, knnen Sie den entsprechenden Pfad mithilfe der MapPath-Methode im Verbindungsstring abrufen.
1 Laden Sie die Datenbankdatei auf den Remote-Server hoch und notieren Sie sich ihren virtuellen Pfad, z. B.
/jsmith/data/statistics.mdb.
2 ffnen Sie in Dreamweaver eine ASP-Seite und anschlieend das Bedienfeld Datenbanken (Fenster >
Datenbanken).
3 Klicken Sie im Bedienfeld auf die Schaltflche mit dem Pluszeichen (+) und whlen Sie im Men die Option
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 577
Erstellen dynamischer Sites vorbereiten
4 Geben Sie fr die neue Verbindung einen Namen ohne Leerzeichen oder Sonderzeichen ein. 5 Geben Sie die Verbindungszeichenfolge ein und verwenden Sie die Methode MapPath zur Ermittlung des DBQ-
Parameters. Angenommen, der virtuelle Pfad zu Ihrer Microsoft Access-Datenbank lautet /jsmith/data/statistics.mdb. Wenn Sie VBScript als Skriptsprache verwenden, kann die Verbindungszeichenfolge folgendermaen aussehen:
"Driver={Microsoft Access Driver (*.mdb)};DBQ=" & Server.MapPath ("/jsmith/data/statistics.mdb")
Das Und-Zeichen (&) dient dabei zur Verkettung (Kombination) zweier Zeichenfolgen. Die erste Zeichenfolge steht in Anfhrungszeichen, die zweite wird durch den Ausdruck Server.MapPath zurckgegeben. Durch eine Kombination der beiden Zeichenfolgen ergibt sich folgende Zeichenfolge:
Driver={Microsoft Access Driver (*.mdb)}; DBQ=C:\Inetpub\wwwroot\accounts\users\jsmith\data\statistics.mdb
In JavaScript lautet der Ausdruck genauso; allerdings werden die beiden Zeichenfolgen nicht mit einem UndZeichen (&) verkettet, sondern mit einem Pluszeichen (+):
"Driver={Microsoft Access Driver (*.mdb)};DBQ=" + Server.MapPath ("/jsmith/data/statistics.mdb")
6 Aktivieren Sie Mithilfe des Treibers auf dem Testserver. Klicken Sie dann auf Testen und anschlieend auf
OK. Hinweis: Macintosh-Benutzer knnen diesen Schritt ignorieren, da alle Datenbankverbindungen den Anwendungsserver verwenden. Hinweis: Falls keine Verbindung zustande kommt, berprfen Sie die Verbindungszeichenfolge oder fragen Sie bei Ihrem ISP nach, ob der Datenbanktreiber, den Sie in der Verbindungszeichenfolge angegeben haben, tatschlich auf dem Remote-Server installiert ist. Vergewissern Sie sich auerdem, dass der ISP ber die aktuelle Version des Treibers verfgt. Eine in Microsoft Access 2000 erstellte Datenbank funktioniert beispielsweise nicht mit dem Microsoft Access-Treiber 3.5. Sie bentigen mindestens Version 4.0 des Microsoft Access-Treibers.
7 Aktualisieren Sie die Datenbankverbindung der vorhandenen dynamischen Seiten. ffnen Sie dazu die Seite in
Dreamweaver, doppelklicken Sie im Bedienfeld Bindungen oder Serververhalten auf den Namen der Datensatzgruppe und whlen Sie im Men Verbindung die eben erstellte Verbindung aus. Verwenden Sie die neue Verbindung fr jede neue Seite.
Verbindungen bearbeiten
1 ffnen Sie in Dreamweaver eine ASP-Seite und dann das Bedienfeld Datenbanken (Fenster > Datenbanken). 2 Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste (Macintosh) auf die Verbindung
Dreamweaver aktualisiert die Include-Datei, die ihrerseits alle Seiten der Website aktualisiert, die diese Verbindung nutzen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 578
Erstellen dynamischer Sites vorbereiten
Verbindungen lschen
1 ffnen Sie in Dreamweaver eine ASP-Seite und dann das Bedienfeld Datenbanken (Fenster > Datenbanken). 2 Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste (Macintosh) auf die Verbindung
Hinweis: Wenn Sie eine Verbindung gelscht haben, mssen Sie jede Datensatzgruppe aktualisieren, die noch die alte Verbindung verwendet. Doppelklicken Sie dazu im Bedienfeld Bindungen auf den Namen der entsprechenden Datensatzgruppe und whlen Sie eine neue Verbindung aus.
Datenbankverbindungen fr PHP-Entwickler
PHP-Datenbankverbindungen
Fr die PHP-Entwicklung untersttzt Dreamweaver nur das Datenbanksystem MySQL. Andere Datenbanksysteme, z. B. Microsoft Access oder Oracle, werden nicht untersttzt. MySQL ist eine Open-Source-Software, die Sie fr nicht kommerzielle Zwecke kostenfrei aus dem Internet herunterladen knnen. Weitere Informationen finden Sie auf der MySQL-Website unter http://dev.mysql.com/downloads/. In diesem Abschnitt wird davon ausgegangen, dass Sie eine PHP-Anwendung eingerichtet haben. Auerdem wird vorausgesetzt, dass auf Ihrem lokalen Computer oder einem System, auf das Sie Netzwerk- oder FTP-Zugriff haben, eine MySQL-Datenbank eingerichtet ist. Sie knnen die Windows Essentials-Version des MySQL-Datenbankservers zu Entwicklungszwecken herunterladen und installieren.
Verwandte Themen
PHP-Entwicklungsumgebung einrichten auf Seite 566
Datenbankverbindungen herstellen
Wenn Sie im Rahmen der Entwicklung einer PHP-Anwendung in Dreamweaver eine Verbindung zu einer Datenbank herstellen mchten, mssen Sie ber mindestens eine MySQL-Datenbank verfgen, und der MySQL-Server muss ausgefhrt werden.
1 ffnen Sie in Dreamweaver eine PHP-Seite und dann das Bedienfeld Datenbanken (Fenster >
Datenbanken).
2 Klicken Sie im Bedienfeld auf die Schaltflche mit dem Pluszeichen (+), whlen Sie im Men den Eintrag MySQL-
Verbindung aus und legen Sie die brigen Optionen des Dialogfelds fest.
Geben Sie fr die neue Verbindung einen Namen ohne Leerzeichen oder Sonderzeichen ein. Geben Sie im Feld MySQL-Server die IP-Adresse oder den Servernamen des Computers an, der als Host fr
MySQL fungiert. Wenn MySQL auf demselben Computer wie PHP ausgefhrt wird, knnen Sie localhost eingeben.
Geben Sie Ihren MySQL-Benutzernamen und Ihr Kennwort ein. Geben Sie im Feld Datenbank den Namen der Datenbank ein oder klicken Sie auf Auswhlen und whlen Sie
die Datenbank aus der Liste der MySQL-Datenbanken. Klicken Sie dann auf Testen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 579
Erstellen dynamischer Sites vorbereiten
Dreamweaver versucht, eine Verbindung zur Datenbank aufzubauen. Wenn die Verbindung nicht hergestellt werden kann, berprfen Sie den Servernamen, Ihr Kennwort und Ihren Benutzernamen. Bleibt auch der nchste Versuch erfolglos, berprfen Sie die Einstellungen fr den Testordner, den Dreamweaver zur Verarbeitung dynamischer Seiten verwendet. In Dreamweaver wird versucht, den Wert fr das URL-Prfix in der Kategorie Testserver des Dialogfelds SiteDefinition mglichst genau automatisch einzutragen. In einigen Fllen mssen Sie jedoch das URL-Prfix ndern, damit die Verbindung hergestellt werden kann. Vergewissern Sie sich, dass das URL-Prfix der um den Dateinamen (oder die Startseite) verkrzten URL der Anwendung entspricht, die Benutzer zum ffnen der Webanwendung im Browser eingeben.
3 Klicken Sie auf OK.
Hinweis: Wenn die Fehlermeldung Client does not support authentication protocol requested. Consider upgrading MySQL client beim Testen einer PHP-Datenbankverbindung mit MySQL 4.1 angezeigt wird, lesen Sie MySQL-Fehler beheben auf Seite 585.
Verbindungen bearbeiten
1 ffnen Sie in Dreamweaver eine PHP-Seite und dann das Bedienfeld Datenbanken (Fenster >
Datenbanken).
2 Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste (Macintosh) auf die Verbindung
Dreamweaver aktualisiert die Include-Datei, die ihrerseits alle Seiten der Website aktualisiert, die diese Verbindung nutzen.
Verbindungen lschen
1 ffnen Sie in Dreamweaver eine PHP-Seite und dann das Bedienfeld Datenbanken (Fenster >
Datenbanken).
2 Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste (Macintosh) auf die Verbindung
Hinweis: Wenn Sie eine Verbindung gelscht haben, mssen Sie jede Datensatzgruppe aktualisieren, die noch die alte Verbindung verwendet. Doppelklicken Sie dazu im Bedienfeld Bindungen auf den Namen der entsprechenden Datensatzgruppe und whlen Sie im Dialogfeld Datensatzgruppe eine neue Verbindung aus.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 580
Erstellen dynamischer Sites vorbereiten
der rechten Maustaste auf die Datei oder den Ordner und whlen Sie Eigenschaften.
3 Whlen Sie die Registerkarte Sicherheit.
Hinweis: Sie brauchen diesen Schritt nur auszufhren, wenn Sie mit einem NTFS-Dateisystem arbeiten. Bei einem FATDateisystem enthlt das Dialogfeld keine Registerkarte namens Sicherheit.
4 Wenn das Konto IUSR_computername in der Liste der Gruppen oder Benutzernamen fehlt, klicken Sie auf die
einzublenden.
8 Whlen Sie das Konto IUSR_computernameund klicken Sie auf OK. Klicken Sie dann erneut auf OK, um das
Dialogfeld zu schlieen.
9 Whlen Sie Vollzugriff aus und klicken Sie auf OK, um dem IUSR-Konto volle Berechtigungen zuzuweisen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 581
Erstellen dynamischer Sites vorbereiten
der rechten Maustaste auf die Datei oder den Ordner und whlen Sie Eigenschaften.
3 Whlen Sie die Registerkarte Sicherheit.
Hinweis: Sie brauchen diesen Schritt nur auszufhren, wenn Sie mit einem NTFS-Dateisystem arbeiten. Bei einem FATDateisystem enthlt das Dialogfeld keine Registerkarte namens Sicherheit.
4 Wenn das Konto IUSR_computername im Dialogfeld Dateiberechtigungen nicht in der Liste der Windows-
Konten enthalten ist, klicken Sie auf die Schaltflche Hinzufgen, um das Konto hinzuzufgen.
5 Whlen Sie im Dialogfeld zum Auswhlen von Benutzern, Computern oder Gruppen unter Suchen in den
Namen des Computers aus, um eine Liste der mit dem Computer verbundenen Kontonamen einzublenden.
6 Whlen Sie das Konto IUSR_computernameund klicken Sie auf Hinzufgen. 7 Whlen Sie im Men Zugriffsart die Option Vollzugriff und klicken Sie auf OK, um dem IUSR-Konto volle
Berechtigungen zuzuweisen. Sie knnen die Sicherheit erhhen, indem Sie die Leseberechtigung fr den Webordner deaktivieren, der die Datenbank enthlt. Dies bewirkt, dass der Ordner nicht durchsucht werden kann. Die Webseiten knnen jedoch nach wie vor auf die Datenbank zugreifen. Weitere Informationen ber das IUSR-Konto und Webserver-Berechtigungen finden Sie in den folgenden TechNotes im Adobe Support Center:
Understanding anonymous authentication and the IUSR account unter www.adobe.com/go/authentication_de Setting IIS web server permissions unter www.adobe.com/go/server_permissions_de
Microsoft-Fehler beheben
Die nachfolgend aufgefhrten Microsoft-Fehlermeldungen werden mglicherweise angezeigt, wenn Sie Internet Information Server (IIS) mit einem Microsoft-Datenbanksystem wie Access oder SQL Server einsetzen und eine dynamische Seite vom Server anfordern. Hinweis: Adobe bietet keine technische Untersttzung fr Software von anderen Herstellern wie Microsoft Windows und IIS. Wenn sich das Problem nicht mit den Informationen in diesem Abschnitt beheben lsst, wenden Sie sich an den technischen Support von Microsoft oder besuchen Sie die Support-Website von Microsoft unter http://support.microsoft.com/. Weitere Informationen ber 80004005-Fehler finden Sie unter INFO: Anleitung zur Behebung von Fehlern des Typs 80004005 bei Active Server Pages und Microsoft Data Access Components (Q306518) auf der Microsoft-Website unter http://support.microsoft.com/default.aspx?scid=kb;de-de;Q306518.
[Reference]80004005 Data source name not found and no default driver specified (Datenquellenname nicht gefunden und kein Standardtreiber angegeben)
Dieser Fehler tritt auf, wenn Sie versuchen, eine dynamische Seite in einem Webbrowser oder in der Live-Ansicht anzuzeigen. Der genaue Wortlaut der Fehlermeldung richtet sich nach Ihrer Datenbank und Ihrem Webserver. Weitere Varianten der Fehlermeldung sind unter anderem:
80004005 Driver's SQLSetConnectAttr failed (SQLSetConnectAttr des Treibers fehlgeschlagen) 80004005 General error Unable to open registry key 'DriverId' (Allgemeiner Fehler. Registrierungsschlssel
'DriverId' kann nicht geffnet werden)
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 582
Erstellen dynamischer Sites vorbereiten
Die Seite kann den DSN nicht finden. Stellen Sie sicher, dass sowohl auf dem Webserver als auch auf dem lokalen
Computer ein DSN erstellt wurde.
Der DSN wurde mglicherweise nicht als System-DSN, sondern als Benutzer-DSN erstellt. Lschen Sie in diesem
Fall den Benutzer-DSN und erstellen Sie stattdessen einen System-DSN. Hinweis: Wenn Sie den Benutzer-DSN nicht lschen, verursachen die doppelten DSN-Namen einen neuen ODBCFehler. Wenn Sie Microsoft Access verwenden, ist die Datenbankdatei (.mdb) mglicherweise gesperrt. Die Sperre kann darauf zurckzufhren sein, dass ein anderer DSN auf die Datenbank zugreift. Suchen Sie in Windows Explorer die Sperrdatei (.ldb). Sie befindet sich im gleichen Ordner wie auch die Datenbankdatei (.mdb). Lschen Sie dann die .ldbDatei. Wenn ein anderer DSN auf die gleiche Datenbankdatei verweist, lschen Sie den DSN, um den Fehler in Zukunft zu vermeiden. Sie mssen den Computer neu starten, nachdem Sie diese nderungen vorgenommen haben.
[Reference]80004005 Couldnt use (unknown); file already in use (Verwendung von (unbekannt) nicht mglich; die Datei wird bereits verwendet)
Dieser Fehler tritt auf, wenn Sie eine Microsoft Access-Datenbank verwenden und versuchen, eine dynamische Seite in einem Webbrowser oder in der Live-Ansicht anzuzeigen. Eine weitere Variante dieser Fehlermeldung lautet 80004005 Microsoft Jet database engine cannot open the file (unknown) (Microsoft Jet Datenbank-Engine kann die Datei (unbekannt) nicht ffnen). Der Fehler wird wahrscheinlich durch unzureichende Berechtigungen verursacht. Im Folgenden werden spezifische Ursachen und Lsungen erlutert:
Das von Internet Information Server verwendete Konto (normalerweise IUSR) verfgt mglicherweise nicht ber
die korrekten Windows-Berechtigungen fr eine dateibasierte Datenbank oder fr den Ordner, in dem sich die Datei befindet. berprfen Sie im Benutzer-Manager die Berechtigungen des IIS-Kontos (IUSR).
Mglicherweise sind Sie nicht zum Erstellen oder Lschen temporrer Dateien berechtigt. berprfen Sie die
Berechtigungen fr die Datei und den Ordner, und stellen Sie sicher, dass Sie zum Erstellen und Lschen temporrer Dateien berechtigt sind. Temporre Dateien werden normalerweise im gleichen Ordner erstellt wie auch die Datenbank. Die Datei kann jedoch auch in anderen Ordnern angelegt werden, wie beispielsweise in /Winnt.
In Windows 2000 muss der Zeitlimitwert fr den Access Datenbank-DSN mglicherweise gendert werden.
Whlen Sie dazu Start > Einstellungen > Systemsteuerung > Verwaltung > Datenquellen (ODBC). Klicken Sie auf die Registerkarte System, markieren Sie den korrekten DSN und klicken Sie dann auf die Schaltflche Konfigurieren. Klicken Sie auf die Schaltflche Optionen und ndern Sie den Wert fr das SeitenZeitlimit in 5000. Wenn das Problem dadurch nicht behoben wird, lesen Sie die folgenden Artikel in der Microsoft Knowledge Base:
PRB: Microsoft Access 97-Datenbank-Verbindung kann in Active Server Pages nicht ausgefhrt werden unter
http://support.microsoft.com/default.aspx?scid=kb;de-de;Q253604.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 583
Erstellen dynamischer Sites vorbereiten
Wenn Sie die Standardsicherheit verwenden, sind Kontoname und Kennwort mglicherweise nicht korrekt.
Versuchen Sie es mit dem Konto und Kennwort des Systemadministrators (UID= sa, kein Kennwort). Diese Angaben mssen in der Zeile mit der Verbindungszeichenfolge definiert werden. (DSNs speichern keine Benutzernamen und Kennwrter.)
Wenn Sie die integrierte Sicherheit verwenden, berprfen Sie das Windows-Konto, das die Seite aufruft, und
suchen Sie das zugeordnete SQL-Konto (falls vorhanden).
SQL-Kontonamen drfen in SQL Server keinen Unterstrich enthalten. Wenn das Windows-Konto
IUSR_computername manuell einem SQL-Konto mit dem gleichen Namen zugeordnet wurde, fhrt dies zu einem Fehler. Ordnen Sie jegliche Konten, deren Namen einen Unterstrich enthalten, einem SQL-Kontonamen ohne Unterstrich zu.
[Reference]80004005 Operation must use an updateable query (Operation muss eine aktualisierbare Abfrage verwenden)
Dieser Fehler tritt auf, wenn ein Ereignis eine Datensatzgruppe aktualisiert oder Daten in eine Datensatzgruppe einfgt. Im Folgenden werden mgliche Ursachen und Lsungen erlutert:
Fr den Ordner, der die Datenbank enthlt, wurden keine ausreichenden Berechtigungen festgelegt. Die IUSRBerechtigungen mssen auf Lesen/Schreiben eingestellt sein.
Fr die Datenbankdatei selbst gelten keine ausreichenden Lese-/Schreibberechtigungen. Die Datenbank befindet sich eventuell nicht im Verzeichnis Inetpub/wwwroot. Wenn die Datenbank sich nicht
im Verzeichnis wwwroot befindet, knnen Sie Daten zwar anzeigen und durchsuchen, aber unter Umstnden nicht aktualisieren.
Die Datensatzgruppe basiert auf einer nicht aktualisierbaren Abfrage. Verknpfungen sind ein gutes Beispiel fr
nicht aktualisierbare Abfragen innerhalb einer Datenbank. Strukturieren Sie Ihre Abfragen so um, dass sie aktualisiert werden knnen. Weitere Informationen ber diesen Fehler finden Sie im Artikel PRB: ASP Error The Query Is Not Updateable When You Update Table Record in der Microsoft Knowledge Base unter http://support.microsoft.com/default.aspx?scid=kb;de-de;Q174640.
[Reference]80040e07 Data type mismatch in criteria expression (Datentyp im Kriterienausdruck stimmt nicht berein)
Dieser Fehler tritt auf, wenn der Server eine Seite zu verarbeiten versucht, die das Serververhalten Datensatz einfgen oder Datensatz aktualisieren enthlt, und das Serververhalten versucht, den Wert einer Datum/UhrzeitSpalte in einer Microsoft Access-Datenbank auf eine leere Zeichenfolge ("") einzustellen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 584
Erstellen dynamischer Sites vorbereiten
In Microsoft Access gelten fr Datentypen strenge Kriterien, und die Werte fr bestimmte Spalten unterliegen rigorosen Regeln. Die leere Zeichenfolge in der SQL-Abfrage kann in Access nicht in einer Spalte Datum/Uhrzeit gespeichert werden. Dieses Problem lsst sich derzeit nur umgehen, indem in Access keine Datum/Uhrzeit-Spalten mit leeren Zeichenfolgen ("") eingefgt oder aktualisiert werden. Auch andere Werte, die nicht dem gltigen Wertebereich des Datentyps entsprechen, sind zu vermeiden.
[Reference]80040e14 Syntax error in INSERT INTO statement (Syntaxfehler in Anweisung INSERT INTO)
Dieser Fehler tritt auf, wenn der Server eine Seite zu verarbeiten versucht, die das Serververhalten Datensatz einfgen enthlt. Der Fehler ist in der Regel auf mindestens eines der folgenden Probleme in Bezug auf den Namen eines Feldes, eines Objekts oder einer Variablen in der Datenbank zurckzufhren:
Ein reserviertes Wort wird als Name verwendet. Bei den meisten Datenbanken sind bestimmte Wrter reserviert.
So ist beispielsweise date ein reserviertes Wort. Es kann daher nicht als Spaltenname in einer Datenbank verwendet werden.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 585
Erstellen dynamischer Sites vorbereiten
[Reference]80040e21 ODBC error on Insert or Update (ODBC-Fehler beim Einfgen oder Aktualisieren)
Dieser Fehler tritt auf, wenn der Server eine Seite zu verarbeiten versucht, die das Serververhalten Datensatz aktualisieren oder Datensatz einfgen enthlt. Die Datenbank kann den Einfge- oder Aktualisierungsvorgang des Serververhaltens nicht verarbeiten. Im Folgenden werden mgliche Ursachen und Lsungen erlutert:
Das Serververhalten versucht, ein Feld fr die automatische Nummerierung in der Datenbanktabelle zu
aktualisieren oder einen Datensatz in ein solches Feld einzufgen. Da Felder fr die automatische Nummerierung automatisch vom Datenbanksystem ausgefllt werden, ist es nicht mglich, extern einen Wert in diese Felder einzutragen.
Die Daten, die vom Serververhalten eingefgt oder aktualisiert werden, entsprechen nicht dem Typ des
Datenbankfelds. Beispielsweise wird versucht, ein Datum in ein boolesches Ja-/Nein-Feld, eine Zeichenfolge in ein numerisches Feld oder eine fehlerhaft formatierte Zeichenfolge in ein Datum/Uhrzeit-Feld einzufgen.
[Reference]800a0bcd Either BOF or EOF is true (BOF oder EOF ist wahr)
Dieser Fehler tritt auf, wenn Sie versuchen, eine dynamische Seite in einem Webbrowser oder in der Live-Ansicht anzuzeigen. Das Problem entsteht, wenn versucht wird, Daten aus einer leeren Datensatzgruppe auf der Seite anzuzeigen. Sie knnen das Problem beheben, indem Sie dem auf der Seite anzuzeigenden dynamischen Inhalt das Serververhalten Bereich zeigen zuweisen. Gehen Sie dazu folgendermaen vor:
1 Markieren Sie den dynamischen Inhalt auf der Seite. 2 Klicken Sie im Bedienfeld Serververhalten auf die Schaltflche mit dem Pluszeichen (+) und whlen Sie Bereich
MySQL-Fehler beheben
Die folgende Fehlermeldung tritt beim Testen einer PHP-Datenbankverbindung mit MySQL 4.1 hufig auf: Client does not support authentication protocol requested. Consider upgrading MySQL client. Sie mssen mglicherweise zu einer frheren Version von MySQL zurckkehren oder PHP 5 installieren und einige DLLs (Dynamic Link Libraries) kopieren. Detaillierte Anweisungen finden Sie unter PHP-Entwicklungsumgebung einrichten auf Seite 566. Lesen Sie auch die folgenden TechNotes:
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 586
Erstellen dynamischer Sites vorbereiten
Verbindungsskripts entfernen
Befehl Verbindungsskripts entfernen verwenden
Mit dem Befehl Verbindungsskripten entfernen knnen Sie Skripts entfernen, die Dreamweaver fr den Zugriff auf Datenbanken in einem Remote-Ordner ablegt. Diese Skripts werden nur zur Entwurfszeit in Dreamweaver bentigt. Wenn Sie die Option Mithilfe des Treibers auf dem Testserver oder Mithilfe des DSN auf dem Testserver im Dialogfeld Datenbankverbindung auswhlen, ldt Dreamweaver eine MMHTTPDB-Skriptdatei zum Testserver hoch. Damit kann Dreamweaver den Remote-Datenbanktreiber via HTTP-Protokoll manipulieren und so die Datenbankinformationen abrufen, die zum Erstellen der Site in Dreamweaver bentigt werden. Allerdings knnen mit dieser Datei die im System definierten Datenquellennamen (DSN) angezeigt werden. Wenn die DSNs und Datenbanken nicht durch ein Kennwort geschtzt sind, knnen potenzielle Angreifer ber dieses Skript SQL-Befehle in der Datenbank ausfhren lassen. Die MMHTTPDB-Skriptdateien befinden sich im Ordner _mmServerScripts, der sich seinerseits im Stammverzeichnis der Website befindet. Hinweis: Im Dreamweaver-Dateibrowser (Bedienfeld Dateien) wird der Ordner _mmServerScripts nicht angezeigt. Sie knnen diesen Ordner aber im FTP-Client eines Drittanbieters anzeigen. In vielen Konfigurationen werden diese Skripts nicht bentigt. Sie werden nicht eingesetzt, wenn Besucher auf Seiten in Ihrer Website zugreifen, und sollten daher nicht auf einem Produktionsserver abgelegt werden. Falls Sie die Skriptdatei MMHTTPDB auf einen Produktionsserver hochgeladen haben, sollten Sie sie vom Server lschen. Der Befehl Verbindungsskripten entfernen entfernt die Skriptdateien automatisch. Weitere Informationen finden Sie in TechNote 19214 auf der Adobe-Website unter www.adobe.com/go/19214_de.
ENTWURF
Letzte Aktualisierung 19.3.2010
587
Whlen Sie das Bedienfeld Bindungen (Fenster > Bindungen), wenn Sie fr eine Seite Quellen mit
dynamischem Inhalt definieren und den Inhalt der Seite hinzufgen mchten.
Whlen Sie das Bedienfeld Serververhalten (Fenster > Serververhalten), wenn Sie dynamischen Seiten
serverseitige Logikfunktionen hinzufgen mchten.
Whlen Sie das Bedienfeld Datenbanken (Fenster > Datenbanken), wenn Sie Datenbanken durchsuchen
oder Datenbankverbindungen erstellen mchten.
Whlen Sie das Bedienfeld Komponenten (Fenster > Komponenten) aus, wenn Sie Code fr ColdFusionKomponenten berprfen, hinzufgen oder ndern mchten. Hinweis: Das Bedienfeld Komponenten ist nur aktiviert, wenn Sie eine ColdFusion-Seite ffnen. Ein Serververhalten ist ein Satz Anweisungen, der zur Entwurfszeit in eine dynamische Seite eingefgt und zur Laufzeit auf dem Server ausgefhrt wird. Ein Tutorial zum Einrichten des Entwicklungs-Arbeitsbereichs finden Sie unter www.adobe.com/go/vid0144_de.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 588
Dynamische Seiten erstellen
Verwandte Themen
Bedienfeld Bindungen auf Seite 597 Bedienfeld Serververhalten auf Seite 598 Bedienfeld Datenbanken auf Seite 598 Bedienfeld Komponenten auf Seite 599 Tutorial zum Entwicklungs-Arbeitsbereich
Im Bedienfeld Datenbanken werden smtliche Datenbanken aufgefhrt, fr die Sie Verbindungen erstellt haben. Wenn Sie eine ColdFusion-Site entwickeln, enthlt das Bedienfeld eine Liste der Datenbanken, fr die im ColdFusionAdministrator Datenquellen definiert wurden. Hinweis: Dreamweaver fragt den ColdFusion-Server ab, den Sie fr die aktuelle Site definiert haben. Werden im Bedienfeld keine Datenbanken angezeigt, mssen Sie eine Datenbankverbindung erstellen.
2 Wenn Sie die Tabellen, gespeicherten Prozeduren und Ansichten in der Datenbank anzeigen mchten, klicken Sie
neben einer Verbindung in der Liste auf die Schaltflche mit dem Pluszeichen (+).
3 Um die Spalten in der Tabelle anzuzeigen, klicken Sie auf einen Tabellennamen.
Die Spaltensymbole kennzeichnen den Datentyp und geben den Primrschlssel der Tabelle an.
4 Wenn Sie die Daten in einer Tabelle anzeigen mchten, klicken Sie mit der rechten Maustaste (Windows) bzw. bei
gedrckter Ctrl-Taste (Macintosh) auf den Tabellennamen in der Liste und whlen im Popupmen den Befehl Daten anzeigen.
Verwandte Themen
ColdFusion-Entwicklungsumgebung einrichten auf Seite 566 PHP-Entwicklungsumgebung einrichten auf Seite 566 ASP-Entwicklungsumgebung einrichten auf Seite 566
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 589
Dynamische Seiten erstellen
Durch den Befehl Vorschau im Browser werden weder verknpfte Seiten (z. B. Ergebnis- oder Detailseiten) noch abhngige Dateien (z. B. Bilddateien) oder Server-Side Includes hochgeladen. Wenn Sie eine fehlende Datei hochladen mchten, whlen Sie Fenster > Site, um das Bedienfeld Site zu ffnen. Whlen Sie die Datei unter Lokaler Ordner aus und klicken Sie in der Symbolleiste auf den blauen, nach oben gerichteten Pfeil, um die Datei in den Webserver-Ordner zu kopieren.
Verwandte Themen
Testserver einrichten auf Seite 49
Datenbanken).
Falls die Datenbankverbindung vorhanden ist, klicken Sie mit der rechten Maustaste (Windows) bzw. bei
gedrckter Ctrl-Taste (Macintosh) auf die Verbindung in der Liste und whlen Sie im Popupmen die Option Verbindung bearbeiten.
Ist keine Verbindung vorhanden, klicken Sie auf die Schaltflche mit dem Pluszeichen (+) oben im Bedienfeld und
erstellen eine Verbindung.
2 Klicken Sie im Dialogfeld fr die Verbindung auf Erweitert. 3 Geben Sie das Schema oder den Katalog an und klicken Sie auf OK.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 590
Dynamische Seiten erstellen
Verwandte Themen
Dynamischen Inhalt bearbeiten auf Seite 619
Eingabenamen-Optionen
Wenn Dreamweaver auf einen unbekannten Eingabetyp stt, wird dieser Eigenschafteninspektor angezeigt. Dies geschieht meist aufgrund eines Tipp- oder Dateneingabefehlers. Sobald Sie im Eigenschafteninspektor fr den Feldtyp einen Wert festlegen, den Dreamweaver erkennt (wenn Sie beispielsweise den Tippfehler korrigieren), wird der Eigenschafteninspektor aktualisiert und die Eigenschaften des nun bekannten Feldtyps werden angezeigt. Stellen Sie im Eigenschafteninspektor die folgenden Optionen nach Bedarf ein:
Eingabename weist dem Feld einen Namen zu. Dieses Feld muss ausgefllt werden. Der Name muss eindeutig sein. Typ legt den Eingabetyp des Feldes fest. Der Inhalt dieses Feldes reflektiert den Eingabetyp, der gegenwrtig im
Das grafische Design der Seite ist beim Entwerfen jeder Website ob statisch oder dynamisch eine der wichtigsten Aufgaben. Wenn einer Webseite dynamische Elemente hinzugefgt werden, ist das gewhlte Design fr die Benutzerfreundlichkeit der Seite entscheidend. Sie sollten sorgfltig berlegen, wie Benutzer mit einzelnen Seiten und mit der Website als Ganzes interagieren. Ein gngiges Verfahren zum Einbauen dynamischen Inhalts in eine Website ist das Erstellen einer Tabelle, die den Inhalt vorstellt, und das Importieren des dynamischen Inhalts in eine oder mehrere Tabellenzellen. Mit dieser Methode lassen sich verschiedenartige Informationen in einem strukturierten Format prsentieren.
2 Erstellen Sie eine Quelle fr dynamischen Inhalt.
Dynamische Websites mssen die Daten, die auf einer Webseite angezeigt werden sollen, aus einer Inhaltsquelle extrahieren. Wenn Sie in einer Webseite Inhaltsquellen nutzen mchten, mssen Sie die folgenden Schritte ausfhren:
Stellen Sie eine Verbindung zu der Quelle des dynamischen Inhalts (z. B. einer Datenbank) und zu dem
Anwendungsserver her, der die Seite verarbeitet. Erstellen Sie die Datenquelle mithilfe des Bedienfelds Bindungen; anschlieend knnen Sie die Datenquelle auswhlen und in die Seite einfgen.
Geben Sie durch Erstellen einer Datensatzgruppe an, welche Informationen der Datenbank angezeigt werden
oder welche Variablen auf der Seite enthalten sein sollen. Sie knnen die Abfrage auch im Dialogfeld Datensatzgruppe testen und nach Bedarf anpassen, bevor Sie sie dem Bedienfeld Bindungen hinzufgen.
Whlen Sie dynamische Inhaltselemente aus, und fgen Sie sie in der gewnschten Seite ein.
3 Fgen Sie einer Webseite dynamischen Inhalt hinzu.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 591
Dynamische Seiten erstellen
Nachdem Sie eine Datensatzgruppe bzw. eine andere Datenquelle definiert und dem Bedienfeld Bindungen hinzugefgt haben, knnen Sie den dynamischen Inhalt, den die Datensatzgruppe reprsentiert, in die Seite einfgen. Die mengesteuerte Benutzeroberflche von Dreamweaver erleichtert das Hinzufgen von dynamischen Inhaltselementen: Whlen Sie im Bedienfeld Bindungen eine Quelle fr dynamischen Inhalt aus und fgen Sie sie in ein geeignetes Text-, Bild- oder Formularobjekt auf der aktuellen Seite ein. Wenn Sie ein dynamisches Inhaltselement oder ein anderes Serververhalten in eine Seite einfgen, fgt Dreamweaver ein serverseitiges Skript in den Quellcode der Seite ein. Dieses Skript weist den Server an, Daten aus der definierten Datenquelle abzurufen und auf der Webseite anzuzeigen. Sie haben folgende Mglichkeiten, dynamischen Inhalt auf einer Webseite zu platzieren:
Sie platzieren ihn an der Einfgemarke in der Code- oder in der Entwurfsansicht. Sie ersetzen eine Textzeichenfolge oder einen anderen Platzhalter.
Sie fgen ihn in ein HTML-Attribut ein. Dynamischer Inhalt kann beispielsweise das Attribut src eines Bildes oder das Attribut value eines Formularfelds definieren.
4 Fgen Sie einer Seite Serververhalten hinzu.
Sie knnen Webseiten nicht nur dynamischen Inhalt hinzufgen, sondern auch auf einfache Weise komplexe Anwendungslogik einbauen. Dazu verwenden Sie Serververhalten. Serververhalten sind vom Hersteller definierte Teile von serverseitigem Code, die Webseiten Anwendungslogik hinzufgen und damit die Interaktion und die Funktionalitt erweitern knnen. Mit den Dreamweaver-Serververhalten knnen Sie einer Website Anwendungslogik hinzufgen, ohne den Code selbst schreiben zu mssen. Die mit Dreamweaver gelieferten Serververhalten untersttzen die Dokumenttypen ColdFusion, ASP und PHP. Sie wurden in Hinblick auf Schnelligkeit, Sicherheit und Robustheit verfasst und getestet. Die integrierten Serververhalten untersttzen plattformbergreifende Webseiten fr alle Browser. Dreamweaver verfgt ber eine mausgesteuerte Benutzeroberflche, die das Anwenden von dynamischem Inhalt und komplexen Verhalten auf eine Seite so einfach macht wie das Einfgen von Text- und Entwurfselementen. Es stehen folgende Serververhalten zur Verfgung:
Datensatzgruppe aus einer bereits vorhandenen Datenbank definieren. Die von Ihnen definierte
Datensatzgruppe wird anschlieend im Bedienfeld Bindungen gespeichert.
Mehrere Datenstze auf einer einzigen Seite anzeigen. Sie whlen eine gesamte Tabelle oder einzelne Zellen bzw.
Zeilen mit dynamischem Inhalt aus und geben die Anzahl der in der jeweiligen Seitenansicht anzuzeigenden Datenstze an.
Dynamische Tabelle erstellen und in eine Seite einfgen sowie die Tabelle mit einer Datensatzgruppe
verknpfen. Sie knnen das Erscheinungsbild und den wiederholenden Bereich der Tabelle spter mithilfe des Eigenschafteninspektors und des Serververhaltens Wiederholender Bereich ndern.
Dynamisches Textobjekt in eine Seite einfgen. Das eingefgte Textobjekt ist ein Element aus einer
vordefinierten Datensatzgruppe, dem Sie ein beliebiges Datenformat zuweisen knnen.
Mehrere Datenstze aus einem Datenbank-Datensatz anzeigen. Datensatzgruppen-Navigationslinks erstellen, mit denen Benutzer den nchsten bzw. vorherigen Datensatz
einer Datenbank anzeigen knnen.
Einen Datensatzzhler hinzufgen, damit Benutzer die Anzahl der zurckgegebenen Datenstze und die Stelle
verfolgen knnen, an der sie sich in den zurckgegebenen Ergebnissen befinden.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 592
Dynamische Seiten erstellen
Sie knnen die Dreamweaver-Serververhalten auch erweitern, indem Sie eigene Serververhalten verfassen oder von Drittanbietern verfasste Serververhalten installieren.
5 Testen und debuggen Sie die Seite.
Bevor Sie eine dynamische Seite oder eine gesamte Website verfgbar machen, sollten Sie ihre Funktionalitt testen. Sie sollten auch bedenken, welche Auswirkungen die Funktionalitt Ihrer Anwendung auf behinderte Benutzer haben kann. Ein Tutorial zum Erstellen von dynamischen Seiten finden Sie unter www.adobe.com/go/learn_dw_webapp_de.
Verwandte Themen
Inhalte in Tabellen darstellen auf Seite 188 Text einfgen und formatieren auf Seite 232 Bilder hinzufgen und ndern auf Seite 249 SWF-Dateien einfgen auf Seite 262
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 593
Dynamische Seiten erstellen
Datensatzgruppen
Webseiten knnen nicht direkt auf die in einer Datenbank gespeicherten Daten zugreifen. Stattdessen interagieren sie mit einer Datensatzgruppe. Eine Datensatzgruppe ist eine Teilmenge der Informationen oder Datenstze, die mithilfe einer Abfrage aus der Datenbank extrahiert wurden. Eine Datenbankabfrage ist eine Suchanweisung, mit der bestimmte Informationen in einer Datenbank gesucht und aus ihr extrahiert werden sollen. Wenn Sie eine Datenbank als Inhaltsquelle fr eine dynamische Webseite verwenden, mssen Sie zunchst eine Datensatzgruppe erstellen, in der die abgerufenen Daten gespeichert werden knnen. Datensatzgruppen dienen als Mittler zwischen der Datenbank, in der die Inhalte gespeichert sind, und dem Anwendungsserver, mit dem die Seite erstellt wird. Datensatzgruppen werden vorbergehend im Arbeitsspeicher des Anwendungsservers gespeichert, damit die Daten schneller abgerufen werden knnen. Wenn eine Datensatzgruppe nicht mehr bentigt wird, wird sie auf dem Server wieder gelscht. Eine Abfrage kann eine Datensatzgruppe generieren, die nur bestimmte Spalten, nur bestimmte Datenstze oder nur bestimmte Spalten und Datenstze enthlt. Eine Datensatzgruppe kann auch alle Datenstze und Spalten einer Datenbanktabelle enthalten. Da eine Anwendung jedoch selten alle Daten einer Datenbank bentigt, sollten Sie die Datensatzgruppen mglichst klein halten. Eine kleine Datensatzgruppe erfordert weniger Speicher und kann die Serverleistung verbessern, da der Webserver die Datensatzgruppe vorbergehend im Arbeitsspeicher speichert. Datenbankabfragen werden in SQL (Structured Query Language) geschrieben, einer einfachen Sprache, ber die Sie Daten in einer Datenbank abrufen, hinzufgen und lschen knnen. Mit dem in Dreamweaver integrierten SQLBuilder knnen Sie einfache Abfragen erstellen, ohne weitere Kenntnisse in SQL zu haben. Grundkenntnisse in dieser Sprache ermglichen dagegen das Erstellen komplexerer SQL-Abfragen und somit eine grere Flexibilitt beim Entwerfen dynamischer Seiten. Bevor Sie eine Datensatzgruppe zur Verwendung in Dreamweaver definieren, mssen Sie zunchst eine Verbindung zu einer Datenbank erstellen und, falls die Datenbank noch leer ist, die entsprechenden Daten eingeben. Sofern Sie fr Ihre Site noch keine Datenbankverbindung definiert haben, lesen Sie das Kapitel ber Datenbankverbindungen der jeweiligen Servertechnologie, fr die Sie Ihre Seiten entwickeln, und folgen Sie dort der Anleitung zum Erstellen einer Datenbankverbindung.
Verwandte Themen
Datensatzgruppen ohne manuelle SQL-Eingabe definieren auf Seite 599
Verwandte Themen
URL-Parameter auf Seite 700 Formularparameter definieren auf Seite 607
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 594
Dynamische Seiten erstellen
Sitzungsvariablen
Mit Sitzungsvariablen knnen Sie Daten whrend der gesamten Sitzung (d. h. whrend der gesamten Sitzung eines Besuchers Ihrer Site) speichern und anzeigen. Der Server erstellt fr jeden Besucher ein eigenes Sitzungsobjekt, das entweder ber einen definierten Zeitraum oder bis zum expliziten Ablauf des Objekts beibehalten wird. Da Sitzungsvariablen die gesamte Sitzung ber beibehalten werden und auch nach dem Wechseln der Seite innerhalb der Website noch vorhanden sind, eignen sie sich hervorragend zum Speichern von Besuchereinstellungen. Mit Sitzungsvariablen knnen Sie einen Wert auch in den HTML-Code der Seite einfgen, einer lokalen Variablen zuweisen oder zur Auswertung eines bedingten Ausdrucks bereitstellen. Bevor Sie Sitzungsvariablen fr eine Seite definieren, mssen Sie sie zunchst im Quellcode erstellen. Nachdem Sie im Quellcode der Webanwendung eine Sitzungsvariable erstellt haben, knnen Sie ihren Wert in Dreamweaver abrufen und in einer Webseite verwenden.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 595
Dynamische Seiten erstellen
Ein typisches Beispiel fr das Speichern von URL-Parametern in Sitzungsvariablen ist ein Produktkatalog, der fest kodierte, mithilfe eines Hyperlinks erstellte URL-Parameter speichert, um Produktinformationen zurck an den Server zu senden, auf dem sie in einer Sitzungsvariablen gespeichert werden. Wenn ein Benutzer auf den Hyperlink klickt, ber den Produkte in den Warenkorb gelegt werden, wird die Produkt-ID in einer Sitzungsvariablen gespeichert, whrend der Benutzer weiter einkauft. Wenn der Benutzer zur Kassenseite wechselt, wird die in der Sitzungsvariablen gespeicherte Produkt-ID abgerufen. Ein typisches Beispiel fr eine Seite, die Formularparameter in Sitzungsvariablen speichert, ist eine formularbasierte Umfrage. Das Formular sendet die ausgewhlten Informationen an den Server zurck. Dort wird die Umfrage in einer Anwendungsseite ausgewertet, und die Antworten werden in einer Sitzungsvariablen gespeichert und anschlieend an eine Anwendung bergeben, in der die gesammelten Antworten aller Teilnehmer ausgewertet werden. Die Daten knnen auch fr die sptere Verwendung in einer Datenbank gespeichert werden. Nachdem die Informationen an den Server gesendet wurden, speichern Sie sie in Sitzungsvariablen, indem Sie der durch den URL- bzw. Formularparameter angegebenen Seite den entsprechenden Code fr Ihr Servermodell hinzufgen. Diese Zielseite wird entweder im Attribut action des HTML-Formulars oder im Attribut href des Hyperlinks auf der Startseite festgelegt. Nachdem Sie einen Wert in einer Sitzungsvariablen gespeichert haben, knnen Sie ihn mit Dreamweaver abrufen und in einer Webanwendung verwenden. Nachdem Sie eine Sitzungsvariable in Dreamweaver definiert haben, knnen Sie ihren Wert in eine Seite einfgen. Die HTML-Syntax lautet jeweils wie folgt:
<form action="destination.html" method="get" name="myform"> </form> <param name="href"value="destination.html">
Die Servertechnologie und die Methode, mit der Sie die Informationen beschaffen, bestimmen den Code, mit dem die Informationen in einer Sitzungsvariablen gespeichert werden. Die Grundsyntax lautet fr die jeweilige Servertechnologie wie folgt: ColdFusion
<CFSET session.variable_name = value>
ASP
<% Session("variable_name") = value %>
Der Ausdruck value ist gewhnlich ein Serverausdruck, z. B. Request.Form("lastname"). Wenn Sie beispielsweise mit dem URL-Parameter product (oder einem HTML-Formular mit der Methode GET und dem Textfeld product) Informationen sammeln, speichern die folgenden Anweisungen die Informationen in der Sitzungsvariablen prodID: ColdFusion
<CFSET session.prodID = url.product>
ASP
<% Session("prodID") = Request.QueryString("product") %>
Wenn Sie ein HTML-Formular mit der Methode post und dem Textfeld txtProduct Informationen sammeln, speichern die folgenden Anweisungen die Informationen in der Sitzungsvariablen: ColdFusion
<CFSET session.prodID = form.txtProduct>
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 596
Dynamische Seiten erstellen
ASP
<% Session("prodID") = Request.Form("txtProduct") %>
Jeder Hyperlink verfgt ber den URL-Parameter fontsize, der die Textvoreinstellung des Benutzers an den Server sendet, wie im folgenden Adobe ColdFusion-Beispiel dargestellt:
<a href="resort.cfm?fontsize=large">Larger Text</a><br> <a href="resort.cfm?fontsize=small">Normal Text</a>
Speichern Sie die Textvoreinstellung des Benutzer in einer Sitzungsvariablen und legen Sie mit ihr die Schriftgre auf jeder Seite fest, die der Benutzer anfordert. Geben Sie im oberen Bereich der Zielseite folgenden Code ein, um eine Sitzung mit dem Bezeichner font_pref zu erstellen, die die Benutzervoreinstellung fr die Schriftgre speichert. ColdFusion
<CFSET session.font_pref = url.fontsize>
ASP
<% Session("font_pref") = Request.QueryString("fontsize") %>
Wenn der Benutzer auf den Hyperlink klickt, sendet die Seite die Textvoreinstellung des Benutzers in einem URLParameter an die Zielseite. Der Code auf der Zielseite speichert den URL-Parameter in der Sitzungsvariablen font_pref. Fr die Dauer der Benutzersitzung rufen alle Seiten der Anwendung diesen Wert ab und werden in der ausgewhlten Schriftgre angezeigt.
Verwandte Themen
Dynamischen Inhalt in Seiten einfgen auf Seite 615 Sitzungsvariablen definieren auf Seite 608
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 597
Dynamische Seiten erstellen
ASP-Servervariablen
Sie knnen die folgenden ASP-Servervariablen als Quellen fr dynamischen Inhalt definieren: Request.Cookie, Request.QueryString, Request.Form, Request.ServerVariables und Request.ClientCertificates.
Verwandte Themen
Servervariablen definieren auf Seite 610
ColdFusion-Servervariablen
Sie knnen die folgenden ColdFusion-Servervariablen definieren:
Client-Variablen verknpfen Daten mit einem bestimmten Client. Clientvariablen werden verwendet, um den Status
der Anwendung beizubehalten, wenn der Besucher der Site in der Anwendung von einer Seite zur nchsten wechselt. Der Status kann auch von einer Sitzung zur nchsten gespeichert werden. Unter Beibehalten des Status versteht man, dass die Informationen von einer Seite (oder einer Sitzung) zur nchsten gespeichert werden. Die Anwendung merkt sich also den Besucher und seine zuvor getroffene Auswahl.
Cookie-Variablen greifen auf Cookies zu, die vom Browser an den Server bergeben werden. CGI-Variablen liefern Informationen ber den Server, auf dem ColdFusion ausgefhrt wird, ber den Browser, der
Verwandte Themen
Servervariablen definieren auf Seite 610
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 598
Dynamische Seiten erstellen
Quellen fr dynamischen Inhalt definieren auf Seite 599 Dynamischen Inhalt in Seiten einfgen auf Seite 615 Inhaltsquellen bearbeiten oder lschen auf Seite 614 Vordefinierte Datenformate verwenden auf Seite 630 XML-Datenquellen anhngen auf Seite 535 XML-Daten in XSLT-Seiten anzeigen auf Seite 535 URL-Parameter auf Seite 700 Sitzungsvariablen definieren auf Seite 608 Anwendungsvariablen fr ASP und ColdFusion definieren auf Seite 608 Servervariablen definieren auf Seite 610 Inhaltsquellen zwischenspeichern auf Seite 614 Datensatzgruppen von einer Seite auf eine andere kopieren auf Seite 614 HTML-Attribute dynamisch gestalten auf Seite 617
Bedienfeld Serververhalten
Mit dem Bedienfeld Serververhalten knnen Sie einer Seite Dreamweaver-Serververhalten hinzufgen sowie Serververhalten bearbeiten und erstellen. Sie knnen mit diesem Bedienfeld folgende Aufgaben ausfhren:
Datenbank-Datenstze anzeigen auf Seite 621 Quellen fr dynamischen Inhalt definieren auf Seite 599 Master- und Detailseiten in einem Durchgang erstellen auf Seite 652 Such- und Ergebnisseiten erstellen auf Seite 654 Datensatz-Einfgeseiten erstellen auf Seite 660 Seiten zum Aktualisieren von Datenstzen erstellen auf Seite 664 Seiten zum Lschen von Datenstzen erstellen auf Seite 670 Seiten erstellen, auf die nur autorisierte Benutzer zugreifen knnen auf Seite 687 Registrierungsseiten erstellen auf Seite 682 Anmeldeseiten erstellen auf Seite 685 Seiten erstellen, auf die nur autorisierte Benutzer zugreifen knnen auf Seite 687 Gespeicherte Prozeduren hinzufgen (ColdFusion) auf Seite 680 Dynamischen Inhalt lschen auf Seite 619 Benutzerdefinierte Serververhalten hinzufgen auf Seite 633
Bedienfeld Datenbanken
Mit dem Bedienfeld Datenbanken knnen Sie Datenbankverbindungen erstellen, Datenbanken berprfen und datenbankbezogenen Code in Ihre Seiten einfgen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 599
Dynamische Seiten erstellen
Mit diesem Bedienfeld knnen Sie Ihre Datenbank anzeigen und eine Verbindung zur Datenbank herstellen:
Datenbanken in Dreamweaver anzeigen auf Seite 588 Datenbankverbindungen fr ColdFusion-Entwickler auf Seite 568 Datenbankverbindungen fr ASP-Entwickler auf Seite 570 Datenbankverbindungen fr PHP-Entwickler auf Seite 578
Bedienfeld Komponenten
Mit dem Bedienfeld Komponenten knnen Sie Komponenten erstellen und berprfen sowie Komponentencode in Ihre Seiten einfgen. Hinweis: Das Bedienfeld funktioniert nicht in der Entwurfsansicht. Sie knnen mit diesem Bedienfeld folgende Aufgaben ausfhren:
Datensatzgruppe (Abfrage) im Popupmen aus. Das einfache Dialogfeld Datensatzgruppe wird angezeigt. Wenn Sie eine ColdFusion-Site erstellen, sieht das Dialogfeld Datensatzgruppe etwas anders aus. (Wenn stattdessen das erweiterte Dialogfeld Datensatzgruppe angezeigt wird, klicken Sie auf die Schaltflche Einfach, um zum einfachen Dialogfeld umzuschalten.)
4 Fllen Sie das Dialogfeld Datensatzgruppe fr Ihren Dokumenttyp aus.
gewnschten Informationen abgerufen werden. Wenn Sie einen Filter definiert haben, der von Benutzern eingegebene Parameter verwendet, geben Sie in das Feld Testwert einen Wert ein und klicken Sie auf OK. Wenn eine Instanz der Datensatzgruppe erfolgreich erstellt wurde, wird eine Tabelle mit den aus der Datensatzgruppe extrahierten Daten angezeigt.
6 Klicken Sie auf OK, um die Datensatzgruppe der Liste der verfgbaren Inhaltsquellen im Bedienfeld
Bindungen hinzuzufgen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 600
Dynamische Seiten erstellen
blicherweise werden Namen von Datensatzgruppen mit dem Prfix rs versehen, um sie von anderen Objektnamen im Code zu unterscheiden, wie z. B. rsPressReleases. Namen von Datensatzgruppen drfen nur aus Buchstaben, Ziffern und dem Unterstrich (_) bestehen. Sonderzeichen und Leerzeichen sind nicht zulssig.
2 Whlen Sie im Popupmen Verbindung eine Verbindung aus.
Wird in der Liste keine Verbindung aufgefhrt, klicken Sie auf Definieren, um eine Verbindung zu erstellen.
3 Whlen Sie im Popupmen Tabelle die Datenbanktabelle aus, die die Daten fr die Datensatzgruppe liefern soll.
dann die gewnschten Spalten aus, indem Sie bei gedrckter Strg-Taste (Windows) bzw. Befehlstaste (Macintosh) auf die jeweiligen Listeneintrge klicken.
5 Wenn Sie die Anzahl der aus der Tabelle zurckgegebenen Datenstze weiter einschrnken mchten, nehmen Sie
Whlen Sie im ersten Popupmen eine Spalte in der Datenbanktabelle aus, die mit einem von Ihnen definierten
Testwert verglichen werden soll.
Whlen Sie im zweiten Popupmen einen bedingten Ausdruck aus, anhand dessen der ausgewhlte Wert in
jedem Datensatz mit dem Testwert verglichen werden soll.
Whlen Sie im dritten Popupmen die Option Eingegebener Wert. Geben Sie den Testwert in das Feld ein.
Wenn der festgelegte Wert in einem Datensatz Ihre Filterbedingung erfllt, wird dieser Datensatz in die Datensatzgruppe aufgenommen.
6 (Optional) Wenn Sie die Datenstze sortieren mchten, whlen Sie eine Spalte aus, auf der die Sortierung basieren
soll, und geben Sie dann an, ob die Datenstze in aufsteigender (1, 2, 3... bzw. A, B, C...) oder in absteigender Reihenfolge sortiert werden sollen.
7 Klicken Sie auf Testen, um eine Verbindung zur Datenbank herzustellen und eine Instanz der Datenquelle zu
erstellen. Klicken Sie dann auf OK, um die Datenquelle zu schlieen. Es wird eine Tabelle angezeigt, in der die zurckgegebenen Daten enthalten sind. Jede Zeile enthlt einen Datensatz, und jede Spalte entspricht einem Feld in diesem Datensatz.
8 Klicken Sie auf OK. Die neu definierte Datensatzgruppe wird im Bedienfeld Bindungen angezeigt.
blicherweise werden Namen von Datensatzgruppen mit dem Prfix rs versehen, um sie von anderen Objektnamen im Code zu unterscheiden. Beispiel: rsPressReleases Namen von Datensatzgruppen drfen nur aus Buchstaben, Ziffern und dem Unterstrich (_) bestehen. Sonderzeichen und Leerzeichen sind nicht zulssig.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 601
Dynamische Seiten erstellen
2 Wenn Sie eine Datensatzgruppe fr eine ColdFusion-Komponente definieren (d. h. wenn in Dreamweaver gerade
eine CFC-Datei geffnet ist), whlen Sie eine vorhandene CFC-Funktion im Popupmen Funktion aus oder klicken Sie auf Neue Funktion, um eine neue Funktion zu erstellen. Hinweis: Das Popupmen Funktion ist nur verfgbar, wenn das aktuelle Dokument eine CFC-Datei ist und Sie Zugriff auf einen Computer haben, auf dem ColdFusion MX 7 oder eine aktuellere Version ausgefhrt wird. Die Datensatzgruppe wird in der Funktion definiert.
3 Whlen Sie im Popupmen Datenquelle eine Datenquelle aus.
Wenn im Popupmen keine Datenquelle aufgefhrt wird, mssen Sie eine ColdFusion-Datenquelle erstellen.
4 Geben Sie, falls erforderlich, in die Felder Benutzername und Kennwort den Benutzernamen und das
Kennwort fr den ColdFusion-Anwendungsserver ein. Fr den Zugriff auf Datenquellen ist in ColdFusion unter Umstnden die Eingabe eines Benutzernamens und eines Kennworts erforderlich. Wenn Sie nicht ber diese Zugangsdaten verfgen, wenden Sie sich an den ColdFusionAdministrator Ihrer Firma.
5 Whlen Sie im Popupmen Tabelle die Datenbanktabelle aus, die die Daten fr die Datensatzgruppe liefern soll.
dann die gewnschten Spalten aus, indem Sie bei gedrckter Strg-Taste (Windows) bzw. Befehlstaste (Macintosh) auf die jeweiligen Listeneintrge klicken.
7 Wenn Sie die Anzahl der aus der Tabelle zurckgegebenen Datenstze weiter einschrnken mchten, nehmen Sie
Whlen Sie im ersten Popupmen eine Spalte in der Datenbanktabelle aus, die mit einem von Ihnen definierten
Testwert verglichen werden soll.
Whlen Sie im zweiten Popupmen einen bedingten Ausdruck aus, anhand dessen der ausgewhlte Wert in
jedem Datensatz mit dem Testwert verglichen werden soll.
Whlen Sie im dritten Popupmen die Option Eingegebener Wert. Geben Sie den Testwert in das Feld ein.
Wenn der festgelegte Wert in einem Datensatz Ihre Filterbedingung erfllt, wird dieser Datensatz in die Datensatzgruppe aufgenommen.
8 (Optional) Wenn Sie die Datenstze sortieren mchten, whlen Sie eine Spalte aus, auf der die Sortierung basieren
soll, und geben Sie dann an, ob die Datenstze in aufsteigender (1, 2, 3... bzw. A, B, C...) oder in absteigender Reihenfolge sortiert werden sollen.
9 Klicken Sie auf Testen, um eine Verbindung zur Datenbank herzustellen und eine Instanz der Datenquelle zu
erstellen. Es wird eine Tabelle angezeigt, in der die zurckgegebenen Daten enthalten sind. Jede Zeile enthlt einen Datensatz, und jede Spalte entspricht einem Feld in diesem Datensatz. Klicken Sie auf OK, um die Testdatensatzgruppe zu schlieen.
10 Klicken Sie auf OK. Die neu definierte ColdFusion-Datensatzgruppe wird im Bedienfeld Bindungen angezeigt.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 602
Dynamische Seiten erstellen
Datensatzgruppe (Abfrage) im Popupmen aus. Das erweiterte Dialogfeld Datensatzgruppe wird eingeblendet. Wenn Sie eine ColdFusion-Site erstellen, sieht das Dialogfeld Datensatzgruppe etwas anders aus. (Wird stattdessen das einfache Dialogfeld Datensatzgruppe angezeigt, knnen Sie zum erweiterten Dialogfeld wechseln, indem Sie auf die Schaltflche Erweitert klicken.)
4 Nehmen Sie im erweiterten Dialogfeld Datensatzgruppe die gewnschten Einstellungen vor.
gewnschten Informationen abgerufen werden. Wenn Sie einen Filter definiert haben, der von Benutzern eingegebene Parameter verwendet, wird mit der Schaltflche Testen das Dialogfeld Testwert eingeblendet. Geben Sie einen Wert in das Feld Testwert ein und klicken Sie auf OK. Wenn eine Instanz der Datensatzgruppe erfolgreich erstellt wurde, wird eine Tabelle mit den aus der Datensatzgruppe extrahierten Daten angezeigt.
6 Klicken Sie auf OK, um die Datensatzgruppe der Liste der verfgbaren Inhaltsquellen im Bedienfeld
Bindungen hinzuzufgen.
Verwandte Themen
SQL-Abfragen mithilfe der Strukturansicht Datenbankelemente erstellen auf Seite 605 Datenbankverbindungen fr ASP-Entwickler auf Seite 570 Datenbankverbindungen fr PHP-Entwickler auf Seite 578 Quellen fr dynamischen Inhalt definieren auf Seite 599 Gespeicherte Prozeduren hinzufgen (ColdFusion) auf Seite 680 Einfhrung in SQL
blicherweise werden Namen von Datensatzgruppen mit dem Prfix rs versehen, um sie von anderen Objektnamen im Code zu unterscheiden. Beispiel: rsPressRelease Namen von Datensatzgruppen drfen nur aus Buchstaben, Ziffern und dem Unterstrich (_) bestehen. Sonderzeichen und Leerzeichen sind nicht zulssig.
2 Whlen Sie im Popupmen Verbindung eine Verbindung aus.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 603
Dynamische Seiten erstellen
3 Geben Sie eine SQL-Anweisung in den SQL-Textbereich ein oder erstellen Sie mithilfe der Strukturansicht
Datenbankelemente unten im Dialogfeld eine SQL-Anweisung anhand der ausgewhlten Datensatzgruppe. Wenn Sie die SQL-Anweisung mithilfe der Strukturansicht Datenbankelemente erstellen mchten, gehen Sie folgendermaen vor:
Vergewissern Sie sich, dass der SQL-Textbereich leer ist. Erweitern Sie die Strukturansicht, bis Sie das gewnschte Datenbankobjekt finden, z. B. eine bestimmte
Tabellenspalte oder eine gespeicherte Prozedur in der Datenbank.
Whlen Sie das Datenbankobjekt aus und klicken Sie auf eine der Schaltflchen rechts neben der Struktur.
Wenn Sie beispielsweise eine Tabellenspalte auswhlen, stehen die Schaltflchen SELECT, WHERE und ORDER BY zur Verfgung. Klicken Sie auf eine der Schaltflchen, um Ihrer SQL-Anweisung den entsprechenden Ausdruck hinzuzufgen. Sie knnen auch eine vordefinierte SQL-Anweisung in einer gespeicherten Prozedur verwenden, indem Sie die gespeicherte Prozedur in der Strukturansicht Datenbankelemente auswhlen und auf die Schaltflche Prozedur klicken. Die Bereiche SQL und Variablen werden automatisch von Dreamweaver ausgefllt.
4 Wenn die SQL-Anweisung Variablen enthlt, definieren Sie deren Werte im Bereich Variablen, indem Sie auf die
Schaltflche mit dem Plussymbol (+) klicken. Geben Sie dann jeweils den Namen der Variable, den Typ (Ganzzahl, Text, Datum oder Gleitkommazahl), den Standardwert (den Wert der Variable, wenn kein Laufzeitwert zurckgegeben wird) und den Laufzeitwert ein. Hinweis: Bei Verwendung von Variablen in einer SQL-Anweisung in PHP fgt Dreamweaver dem Variablennamen automatisch ein fhrendes Dollarzeichen hinzu. Sie selbst drfen also kein Dollarzeichen angeben (z. B. colname statt $colname). Wenn die SQL-Anweisung Variablen enthlt, muss die Spalte Standardwert des Feldes Variablen gltige Testwerte enthalten. Der Laufzeitwert ist normalerweise ein URL- oder Formularparameter, der von einem Benutzer in ein HTMLFormularfeld eingegeben wird. URL-Parameter in der Spalte Laufzeitwert:
Servermodell ASP PHP Laufzeitwertausdrcke fr URL-Parameter Request.QueryString("formFieldName") $_GET['formFieldName']
5 Klicken Sie auf Testen, um eine Verbindung zur Datenbank herzustellen und eine Instanz der Datensatzgruppe
zu erstellen. Wenn die SQL-Anweisung Variablen enthlt, vergewissern Sie sich zuerst, dass in der Spalte Standardwert des Feldes Variablen gltige Testwerte angezeigt werden. Klicken Sie dann auf Testen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 604
Dynamische Seiten erstellen
Kann dies erfolgreich ausgefhrt werden, wird eine Tabelle mit den Daten Ihrer Datensatzgruppe angezeigt. Jede Zeile enthlt einen Datensatz, und jede Spalte entspricht einem Feld in diesem Datensatz. Klicken Sie auf OK, um die Datensatzgruppe zu lschen.
6 Wenn Sie mit dem Ergebnis zufrieden sind, klicken Sie auf OK.
blicherweise werden Namen von Datensatzgruppen mit dem Prfix rs versehen, um sie von anderen Objektnamen im Code zu unterscheiden. Beispiel: rsPressReleases Namen von Datensatzgruppen drfen nur aus Buchstaben, Ziffern und dem Unterstrich (_) bestehen. Sonderzeichen und Leerzeichen sind nicht zulssig. Wenn Sie eine Datensatzgruppe fr eine ColdFusion-Komponente definieren (d. h. wenn in Dreamweaver gerade eine CFC-Datei geffnet ist), whlen Sie eine vorhandene CFC-Funktion im Popupmen Funktion aus oder klicken Sie auf Neue Funktion, um eine neue Funktion zu erstellen. Hinweis: Das Popupmen Funktion ist nur verfgbar, wenn das aktuelle Dokument eine CFC-Datei ist und Sie Zugriff auf einen Computer haben, auf dem ColdFusion MX 7 oder eine aktuellere Version ausgefhrt wird. Die Datensatzgruppe wird in der Funktion definiert.
2 Whlen Sie im Popupmen Datenquelle eine Datenquelle aus.
Wenn im Popupmen keine Datenquelle aufgefhrt wird, mssen Sie zunchst eine ColdFusion-Datenquelle erstellen.
3 Geben Sie, falls erforderlich, in die Felder Benutzername und Kennwort den Benutzernamen und das
Kennwort fr den ColdFusion-Anwendungsserver ein. Fr den Zugriff auf Datenquellen ist in ColdFusion unter Umstnden die Eingabe eines Benutzernamens und eines Kennworts erforderlich. Wenn Sie nicht ber diese Zugangsdaten verfgen, wenden Sie sich an den ColdFusionAdministrator Ihrer Firma.
4 Geben Sie eine SQL-Anweisung in den SQL-Textbereich ein oder erstellen Sie mithilfe der Strukturansicht
Vergewissern Sie sich, dass der SQL-Textbereich leer ist. Erweitern Sie anschlieend die Struktur der Datenbankelemente, bis Sie zu dem gewnschten Datenbankobjekt
gelangen, z. B. zu einer Spalte in einer Tabelle.
Whlen Sie das Datenbankobjekt aus und klicken Sie auf eine der Schaltflchen rechts neben der Struktur.
Wenn Sie beispielsweise eine Tabellenspalte auswhlen, stehen die Schaltflchen Select, Where und Order by zur Verfgung. Klicken Sie auf eine der Schaltflchen, um Ihrer SQL-Anweisung den entsprechenden Ausdruck hinzuzufgen. Wenn die SQL-Anweisung Parameter enthlt, definieren Sie die entsprechenden Werte im Bereich Parameter. Klicken Sie dazu auf die Schaltflche mit dem Pluszeichen (+) und geben Sie den Namen sowie den Standardwert des Parameters (den Wert, den der Parameter annehmen soll, wenn kein Laufzeitwert zurckgegeben wird) ein.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 605
Dynamische Seiten erstellen
Wenn die SQL-Anweisung Parameter enthlt, muss die Spalte Standardwert des Feldes Parameter gltige Testwerte enthalten. Mithilfe der Seitenparameter knnen Sie in Ihren SQL-Anweisungen Standardwerte fr Laufzeitwert-Verweise vorgeben. So wird zum Beispiel bei der folgenden SQL-Anweisung ein Mitarbeiterdatensatz anhand der Kennnummer des Mitarbeiters ausgewhlt. Indem Sie diesem Parameter einen Standardwert zuweisen, stellen Sie sicher, dass immer ein Laufzeitwert zurckgegeben wird. In diesem Beispiel verweist formFieldName auf ein Formularfeld, in dem der Benutzer eine Mitarbeiter-Kennnummer eingibt.
SELECT * FROM Employees WHERE EmpID = + (Request.Form(#FormFieldName#))
Das Dialogfeld Seitenparameter hinzufgen wrde dann etwa folgendes Name/Wert-Paar enthalten:
Name Formularfeldname Standardwerte
0001
Der Laufzeitwert ist normalerweise ein URL- oder Formularparameter, der von einem Benutzer in ein HTMLFormularfeld eingegeben wird.
6 Klicken Sie auf Testen, um eine Verbindung zur Datenbank herzustellen und eine Instanz der Datensatzgruppe
zu erstellen. Wenn die SQL-Anweisung Laufzeitverweise enthlt, vergewissern Sie sich zuerst, dass in der Spalte Standardwert des Feldes Seitenparameter gltige Testwerte angezeigt werden. Klicken Sie dann auf Testen. Kann dies erfolgreich ausgefhrt werden, wird eine Tabelle mit den Daten Ihrer Datensatzgruppe angezeigt. Jede Zeile enthlt einen Datensatz, und jede Spalte entspricht einem Feld in diesem Datensatz. Klicken Sie auf OK, um die Datensatzgruppe zu lschen.
7 Wenn Sie mit dem Ergebnis zufrieden sind, klicken Sie auf OK.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 606
Dynamische Seiten erstellen
Anhand der folgenden beiden Beispiele wird erlutert, wie Sie SQL-Anweisungen ber die Strukturansicht Datenbankelemente des erweiterten Dialogfelds Datensatzgruppe erstellen.
1 Erweitern Sie den Zweig Tabellen, sodass alle Tabellen der ausgewhlten Datenbank angezeigt werden. Erweitern
Sie dann die Tabelle Employees, sodass die einzelnen Tabellenzeilen zu sehen sind.
2 Stellen Sie die SQL-Anweisung folgendermaen zusammen:
Whlen Sie emplNo und klicken Sie auf SELECT. Whlen Sie emplName und klicken Sie auf SELECT. Whlen Sie emplJob und klicken Sie auf WHERE. Whlen Sie emplName und klicken Sie auf ORDER BY.
3 Setzen Sie die Einfgemarke im SQL-Textbereich hinter WHERE emplJob und geben Sie ='varJob' ein
(einschlielich Gleichheitszeichen).
4 Definieren Sie die Variable 'varJob', indem Sie im Bereich Variablen auf die Schaltflche mit dem
Pluszeichen (+) klicken und in die Spalten Name, Standardwert und Laufzeitwert folgende Werte eingeben: varJob, CLERK, Request("job").
5 Klicken Sie auf OK, um die Datensatzgruppe dem Bedienfeld Bindungen hinzuzufgen.
URL-Parameter definieren
URL-Parameter dienen zum Speichern der abgerufenen Informationen, die von Benutzern eingegeben wurden. Bevor Sie beginnen, mssen Sie zunchst einen Formular- oder URL-Parameter an den Server bergeben. Nachdem Sie die URL-Variable definiert haben, knnen Sie ihren Wert in der aktuell ausgewhlten Seite verwenden.
1 ffnen Sie im Dokumentfenster die Seite, in der die Variable verwendet werden soll. 2 Whlen Sie Fenster > Bindungen, um das Bedienfeld Bindungen einzublenden.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 607
Dynamische Seiten erstellen
3 Klicken Sie im Bedienfeld Bindungen auf die Schaltflche mit dem Pluszeichen (+) und whlen Sie im
4 Geben Sie im Dialogfeld URL-Variable den Namen der URL-Variablen in das Feld ein und klicken Sie auf OK.
Der Name der URL-Variablen entspricht normalerweise dem Namen des HTML-Formularfelds oder -Objekts, das zum Einlesen des Werts verwendet wird.
5 Die URL-Variable wird im Bedienfeld Bindungen angezeigt.
Verwandte Themen
URL- und Formularparameter auf Seite 593 Dynamischen Inhalt in Seiten einfgen auf Seite 615 URL-Parameter auf Seite 700 ColdFusion-Servervariablen auf Seite 597
Formularparameter definieren
Formularparameter dienen zum Speichern von abgerufenen Informationen, die in der HTTP-Anforderung fr eine Webseite enthalten sind. Wenn Sie ein Formular erstellen, das die Methode POST verwendet, werden die vom Formular bermittelten Daten an den Server bergeben. Bevor Sie beginnen, mssen Sie zunchst einen Formularparameter an den Server bergeben. Nachdem Sie den Formularparameter als Inhaltsquelle definiert haben, knnen Sie seinen Wert in Ihrer Seite verwenden.
1 ffnen Sie im Dokumentfenster die Seite, in der die Variable verwendet werden soll. 2 Whlen Sie Fenster > Bindungen, um das Bedienfeld Bindungen einzublenden. 3 Klicken Sie im Bedienfeld Bindungen auf die Schaltflche mit dem Pluszeichen (+) und whlen Sie im
4 Geben Sie im Dialogfeld Formularvariable den Namen der Formularvariablen ein und klicken Sie auf OK. Der
Name der Formularvariablen entspricht normalerweise dem Namen des HTML-Formularfelds oder -Objekts, das zum Einlesen des Wertes verwendet wird.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 608
Dynamische Seiten erstellen
Verwandte Themen
Quellen fr dynamischen Inhalt auf Seite 592 URL- und Formularparameter auf Seite 593 Servervariablen definieren auf Seite 610
Sitzungsvariablen definieren
Mit Sitzungsvariablen knnen Sie Daten whrend der gesamten Sitzung (d. h. whrend der gesamten Sitzung eines Besuchers Ihrer Site) speichern und anzeigen. Der Server erstellt fr jeden Besucher ein eigenes Sitzungsobjekt, das entweder ber einen definierten Zeitraum oder bis zum expliziten Ablauf des Objekts beibehalten wird. Bevor Sie Sitzungsvariablen fr eine Seite definieren, mssen Sie sie zunchst im Quellcode erstellen. Nachdem Sie im Quellcode der Webanwendung eine Sitzungsvariable erstellt haben, knnen Sie ihren Wert in Dreamweaver abrufen und in einer Webseite verwenden.
1 Erstellen Sie eine Sitzungsvariable im Quellcode und weisen Sie ihr einen Wert zu.
Im folgenden ColdFusion-Beispiel wird eine Sitzung namens username instanziiert und anschlieend wird ihr der Wert Cornelius zugewiesen:
<CFSET session.username = Cornelius>
2 Whlen Sie Fenster > Bindungen, um das Bedienfeld Bindungen einzublenden. 3 Klicken Sie auf die Schaltflche mit dem Pluszeichen (+) und whlen Sie im Popupmen den Eintrag
Sitzungsvariable aus.
4 Geben Sie den Namen der Variablen ein, den Sie im Quellcode der Anwendung definiert haben. Klicken Sie dann
auf OK.
Verwandte Themen
Benutzerinformationen sammeln auf Seite 699 Funktionsweise von Sitzungsvariablen auf Seite 594 Informationen mit Sitzungsvariablen sammeln, speichern und abrufen auf Seite 594
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 609
Dynamische Seiten erstellen
Anwendungsvariable aus.
4 Geben Sie den Namen der Variablen so ein, wie er im Quellcode der Anwendung definiert wurde. Klicken Sie dann
auf OK. Die Anwendungsvariable wird im Bedienfeld Bindungen unter dem Anwendungssymbol angezeigt.
Verwandte Themen
Dynamischen Inhalt hinzufgen auf Seite 615 Servervariablen definieren auf Seite 610
Im Dialogfeld Datensatzgruppe wird die Variable zusammen mit den ColdFusion-Datenquellen auf dem Server im Popupmen Datenquelle angezeigt.
5 Nehmen Sie im Dialogfeld Datensatzgruppe die gewnschten Einstellungen vor und klicken Sie auf OK. 6 Initialisieren Sie die Variable.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 610
Dynamische Seiten erstellen
Die Variable wird nicht von Dreamweaver initialisiert, d. h., Sie haben die Mglichkeit, die Variable auf die gewnschte Weise und an der gewnschten Stelle zu initialisieren. Sie knnen die Variable im Seitencode (vor dem Tag cfquery), in einer Include-Datei oder in einer anderen Datei als Sitzungs- oder Anwendungsvariable initialisieren.
Servervariablen definieren
Servervariablen knnen als Quellen fr dynamischen Inhalt zur Verwendung innerhalb einer Webanwendung definiert werden. Servervariablen unterscheiden sich je nach Dokumenttyp. Es wird zwischen Formularvariablen, URL-Variablen, Sitzungsvariablen und Anwendungsvariablen unterschieden. Zugriff auf Servervariablen haben alle Clients, die auf den Server zugreifen, sowie alle Anwendungen, die auf dem Server ausgefhrt werden. Die Variablen bleiben erhalten, bis der Server beendet wird.
Verwandte Themen
Dynamischen Inhalt in Seiten einfgen auf Seite 615 URL-Parameter auf Seite 700 Parameter von HTML-Formularen auf Seite 699 ColdFusion-Servervariablen auf Seite 597
ColdFusion-Servervariablen definieren
1 ffnen Sie das Bedienfeld Bindungen (Fenster > Bindungen). Geben Sie im Dialogfeld Servervariable den
Bedienfeld Bindungen angezeigt. In der folgenden Tabelle sind die integrierten ColdFusion-Servervariablen aufgefhrt:
Variable Server.ColdFusion.ProductName Server.ColdFusion.ProductVersion Server.ColdFusion.ProductLevel Server.ColdFusion.SerialNumber Server.OS.Name Server.OS.AdditionalInformation Server.OS.Version Server.OS.BuildNumber Beschreibung ColdFusion-Produktname. ColdFusion-Versionsnummer. ColdFusion-Edition (Enterprise, Professional). Seriennummer der aktuell installierten Version von ColdFusion. Name des Betriebssystems auf dem Server (Windows NT, Windows 2000, Linux). Zusatzinformationen ber das installierte Betriebssystem (Service-Packs, Updates). Version des installierten Betriebssystems. Build-Nummer des installierten Betriebssystems.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 611
Dynamische Seiten erstellen
ASP-Servervariablen definieren
Sie knnen die folgenden ASP-Servervariablen als Quellen fr dynamischen Inhalt definieren: Request.Cookie, Request.QueryString, Request.Form, Request.ServerVariables und Request.ClientCertificates.
1 ffnen Sie das Bedienfeld Bindungen (Fenster > Bindungen). 2 Klicken Sie auf die Schaltflche mit dem Pluszeichen (+) und whlen Sie im Popupmen den Eintrag
Anforderungsvariable aus.
3 Whlen Sie im Dialogfeld Anforderungsvariable eine der folgenden Anforderungssammlungen im Popupmen
Typ aus:
Die QueryString-Sammlung ruft Informationen ab, die an die URL der bertragenden Seite angehngt wurden. Dies ist beispielsweise der Fall, wenn die Seite ein HTML-Formular enthlt, auf dem die Methode GET verwendet wird. Die Abfragezeichenfolge besteht aus einem oder mehreren Name/Wert-Paaren (beispielsweise last=Smith, first=Winston), die mit einem Fragezeichen an die URL angehngt sind (?). Wenn die Abfragezeichenfolge mehrere Name/Wert-Paare hat, werden diese mit dem Und-Zeichen (&) verknpft. Die Formular-Sammlung ruft Formularinformationen aus dem Hauptteil einer HTTP-Anforderung ab, die von einem
Mit Request.ServerVariables("HTTP_USER_AGENT") werden beispielsweise Informationen ber den verwendeten Browser abgerufen. Das Ergebnis Mozilla/4.07 [en] (WinNT; I) bedeutet beispielsweise, dass Netscape Navigator 4.07 verwendet wird. Eine vollstndige Liste der ASP-Server-Umgebungsvariablen finden Sie in der Online-Dokumentation, die zusammen mit dem Microsoft Personal Web Server (PWS) oder Internet Information Server (IIS) installiert wurde.
Die Cookies-Sammlung ruft die Werte der Cookies ab, die in einer HTTP-Anforderung bertragen wurden.
Angenommen, Ihre Seite liest ein Cookie namens readMe im System des Benutzers. Auf dem Server werden die Werte des Cookies in der Variablen Request.Cookies("readMe") gespeichert.
Die ClientCertificate-Sammlung ruft die Zertifizierungsfelder aus der vom Browser bertragenen HTTP-Anforderung
Wenn Sie beispielsweise auf die Informationen in der Variable Request.ServerVariables("HTTP_USER_AGENT") zugreifen mchten, geben Sie das Argument HTTP_USER_AGENT ein. Wenn Sie auf die Daten in der Variablen Request.Form("lastname") zugreifen mchten, geben Sie das Argument lastname ein. Die Anforderungsvariable wird im Bedienfeld Bindungen angezeigt.
PHP-Servervariablen definieren
Servervariablen als Quelle fr dynamische Inhalte von PHP-Seiten definieren Die PHP-Servervariablen werden im Bedienfeld Bindungen angezeigt.
1 ffnen Sie das Bedienfeld Bindungen (Fenster > Bindungen). 2 Klicken Sie auf die Schaltflche mit dem Pluszeichen (+) und whlen Sie im Popupmen die Variable aus. 3 Geben Sie im Dialogfeld Anforderungsvariable den Namen der Variablen (z. B. REQUEST_METHOD) ein und
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 612
Dynamische Seiten erstellen
Weitere Informationen finden Sie ber das Schlsselwort $_SERVER in der PHP-Dokumentation.
ColdFusion-Clientvariablen definieren
Eine ColdFusion-Clientvariable kann als Quelle dynamischer Inhalte fr die Seite definiert werden. Die neu erstellten ColdFusion-Clientvariablen werden im Bedienfeld Bindungen angezeigt.
Geben Sie im Dialogfeld Clientvariable den Namen der Variablen ein und klicken Sie auf OK.
Um beispielsweise auf die Informationen in der ColdFusion-Variable Client.LastVisit zuzugreifen, geben Sie
LastVisit ein.
Clientvariablen sind Variablen, die im Code zum Verknpfen von Daten mit einem bestimmten Client erstellt wurden. Sie werden verwendet, um den Status der Anwendung beizubehalten, wenn der Besucher der Site in der Anwendung von einer Seite zur nchsten wechselt. Der Status kann auch von einer Sitzung zur nchsten gespeichert werden. Clientvariablen sind entweder benutzerdefiniert oder integriert. In der folgenden Tabelle sind die integrierten ColdFusion-Clientvariablen aufgefhrt:
Variable Client.CFID Client.CFTOKEN Client.URLToken Beschreibung Automatisch weitergezhlte Kennnummer fr jeden Client, der eine Verbindung zum Server herstellt. Zufallsgenerierte Nummer zur eindeutigen Identifizierung eines bestimmten Clients. Kombination aus CFID und CFTOKEN, die zwischen Vorlagen bergeben werden soll, wenn keine Cookies verwendet werden. Zeichnet den Zeitstempel des letzten Besuchs durch einen Client auf. Anzahl der Seitenanforderungen bei einem einzelnen Client (Zhlung anhand von CFID und CFTOKEN). Zeichnet den Zeitstempel der ersten Erstellung von CFID und CFTOKEN fr einen bestimmten Client auf.
ColdFusion-Cookie-Variablen definieren
Cookie-Variablen werden im Code erstellt und dienen zum Zugriff auf Informationen in Cookies, die von einem Browser an den Server bergeben werden. Die definierten Cookie-Variablen werden im Bedienfeld Bindungen angezeigt.
Geben Sie im Dialogfeld Cookie-Variable den Namen der Cookie-Variablen ein und klicken Sie auf OK.
ColdFusion-CGI-Variablen definieren
Die definierte CGI-Variable wird im Bedienfeld Bindungen angezeigt.
Geben Sie im Dialogfeld CGI-Variable den Namen der Variablen ein und klicken Sie auf OK.
Wenn Sie beispielsweise auf die Informationen in der Variable CGI.HTTP_REFERER zugreifen mchten, geben Sie
HTTP_REFERER ein.
In der folgenden Tabelle sind die gngigsten ColdFusion-CGI-Variablen aufgelistet, die auf dem Server erstellt werden:
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 613
Dynamische Seiten erstellen
Variable SERVER_SOFTWARE
Beschreibung Name und Version der Informationsserver-Software, die die Anforderung beantwortet (und das Gateway ausfhrt). Format: Name/Version. Hostname, DNS-Alias oder IP-Adresse des Servers, wie sie in selbst referenzierenden URLs angegeben sind. Version der CGI-Spezifikation, der der Server entspricht. Format: CGI/Version. Name und Version des Informationsprotokolls, mit dem die Anforderung eingereicht wurde. Format: Protokoll/Revision. Nummer des Anschlusses, an den die Anforderung gesendet wurde. Methode, mit der die Anforderung durchgefhrt wurde. Bei HTTP kann dies Get, Head, Post usw. sein. Vom Client zustzlich bereitgestellte Pfadinformationen. Auf Skripts kann ber ihren virtuellen Pfad, gefolgt von zustzlichen Informationen, zugegriffen werden. Die zustzlichen Informationen werden als PATH_INFO gesendet. Der Server liefert eine bersetzte Version von PATH_INFO, bei der alle etwaigen virtuellen Pfadinformationen in physische umgewandelt werden. Ein virtueller Pfad zu dem auszufhrenden Skript. Dient zur Selbstreferenzierung von URLs. Die Abfrageinformationen, die in der URL, die auf dieses Skript verweist, auf das Fragezeichen (?) folgen. Name des Hosts, der die Anforderung durchfhrt. Wenn dem Server diese Informationen nicht zur Verfgung stehen, setzt er statt REMOTE_HOST die Variable REMOTE_ADDR. IP-Adresse des Remote-Hosts, der die Anforderung durchfhrt. Wenn der Server Benutzerauthentifizierung untersttzt und das Skript geschtzt ist, ist dies die protokollspezifische Methode zur Prfung der Identitt des Benutzers. Wenn der Server Benutzerauthentifizierung untersttzt und das Skript geschtzt ist, ist dies der Benutzername zur Identifizierung. (Auch als AUTH_USER verfgbar.) Wenn der HTTP-Server die RFC 931-Identifizierung untersttzt, wird diese Variable auf den Namen des Remote-Benutzers gesetzt, der vom Server abgerufen wird. Verwenden Sie diese Variable nur zur Protokollzwecken. Bei Abfragen, an die Informationen angehngt sind (z. B. HTTP POST und PUT), ist dies der Inhaltstyp der Daten. Die Lnge des Inhalts, wie vom Client vorgegeben.
SERVER_NAME
GATEWAY_INTERFACE SERVER_PROTOCOL
SERVER_PORT REQUEST_METHOD
PATH_INFO
PATH_TRANSLATED
SCRIPT_NAME QUERY_STRING
REMOTE_HOST
REMOTE_ADDR AUTH_TYPE
REMOTE_USER AUTH_USER
REMOTE_IDENT
CONTENT_TYPE
CONTENT_LENGTH
In der folgenden Tabelle sind die gngigsten CGI-Variablen aufgelistet, die vom Browser erstellt und an den Server bergeben werden:
Variable HTTP_REFERER Beschreibung Das verweisende Dokument. Dies ist das Dokument, das einen Hyperlink zu Formulardaten verwendet oder diese Daten abgeschickt hat. Der Browser, ber den der Client gerade die Anforderung sendet. Format: Software/Version Bibliothek/Version. Zeitpunkt der letzten nderung der Seite. Diese Variable wird nach eigenen Kriterien des Browsers gesendet (normalerweise nachdem der Server den Header LAST_MODIFIED HTTP gesendet hat). Sie dient zur Nutzung der Zwischenspeicherung seitens des Browsers.
HTTP_USER_AGENT
HTTP_IF_MODIFIED_SINCE
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 614
Dynamische Seiten erstellen
Inhaltsquellen zwischenspeichern
Quellen fr dynamischen Inhalt knnen in einer Design Note zwischengespeichert werden. So knnen Sie auch dann an einer Site arbeiten, wenn Sie keinen Zugriff auf die Datenbank oder den Anwendungsserver haben, auf dem die Quellen fr dynamischen Inhalt gespeichert sind. Durch Zwischenspeicherung knnen Sie auch Zeit bei der Entwicklung einsparen, da ein wiederholtes Zugreifen ber ein Netzwerk auf die Datenbank und den Anwendungsserver berflssig wird.
Klicken Sie auf den Pfeil rechts oben im Bedienfeld Bindungen und aktivieren Sie im Popupmen die Option
Cache. Wenn Sie nderungen an einer Ihrer Inhaltsquellen vornehmen, sollten Sie den Cache aktualisieren, indem Sie im Bedienfeld Bindungen rechts oben auf die Schaltflche Aktualisieren (das Symbol mit dem umlaufenden Pfeil) klicken. (Erweitern Sie das Bedienfeld, wenn die Schaltflche nicht angezeigt wird.)
bearbeiten mchten.
2 Nehmen Sie die gewnschten nderungen im angezeigten Dialogfeld vor. 3 Wenn Sie mit dem Ergebnis zufrieden sind, klicken Sie auf OK.
Kopieren.
3 ffnen Sie die Seite, auf die Sie die Datensatzgruppe kopieren mchten. 4 Klicken Sie mit der rechten Maustaste auf das Bedienfeld Bindungen oder die Symbolleiste Serververhalten und
Verwandte Themen
Quellen fr dynamischen Inhalt auf Seite 592 Inhaltsquellen bearbeiten oder lschen auf Seite 614
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 615
Dynamische Seiten erstellen
Verwandte Themen
Quellen fr dynamischen Inhalt definieren auf Seite 599 Navigationsleiste fr Datensatzgruppen erstellen auf Seite 622 Mehrere Datensatzgruppen-Ergebnisse anzeigen auf Seite 625 Formatierungs- und Seitenlayout-Elemente auf dynamische Daten anwenden auf Seite 622 Vordefinierte Datenformate verwenden auf Seite 630
Dynamischer Text
Dynamischer Text bernimmt alle Formatierungen, die auf den bereits bestehenden Text oder die Einfgemarke angewendet wurden. Ist fr den ausgewhlten Text beispielsweise ein CSS-Stil (Cascading Style Sheet) definiert, weist auch der ihn ersetzende dynamische Text diesen Stil auf. Sie knnen Textformate fr dynamische Inhalte mit den Textformatierungswerkzeugen von Dreamweaver hinzufgen oder ndern. Sie knnen auf dynamischen Text auch Datenformate anwenden. Wenn Sie beispielsweise mit Datumsangaben arbeiten, knnen Sie diesen spezielle Formate zuweisen, z. B. fr amerikanische Besucher das Format MM/TT/JJ und fr deutsche Besucher das Format TT/MM/JJ.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 616
Dynamische Seiten erstellen
Verwandte Themen
Datensatzgruppen auf Seite 593 Vordefinierte Datenformate verwenden auf Seite 630
eine Datensatzgruppe whlen, geben Sie die gewnschte Spalte in der Datensatzgruppe an. Die Inhaltsquelle muss einfachen Text (ASCII-Text) enthalten. Dazu gehrt auch HTML. Falls in der Liste keine Inhaltsquellen enthalten sind oder die vorhandenen nicht Ihren Anforderungen entsprechen, klicken Sie auf die Schaltflche mit dem Pluszeichen (+), um eine neue Inhaltsquelle zu definieren.
3 (Optional) Whlen Sie ein Datenformat fr den Text aus. 4 Klicken Sie auf Einfgen oder ziehen Sie die Inhaltsquelle mit der Maus auf die Seite.
Ein Platzhalter fr dynamische Inhalte wird angezeigt. (Wenn Sie Text auf der Seite ausgewhlt haben, ersetzt der Platzhalter diesen Text.) Beim Platzhalter fr den Inhalt einer Datensatzgruppe gilt die folgende Syntax: {RecordsetName.ColumnName}. RecordsetName ist der Name der Datensatzgruppe und ColumnName der Name der Spalte, die Sie in der Datensatzgruppe ausgewhlt haben. Manchmal verflscht die Lnge der Platzhalter fr dynamischen Text das Seitenlayout im Dokumentfenster. Sie knnen dieses Problem lsen, indem Sie leere, geschweifte Klammern als Platzhalter verwenden (siehe folgendes Thema).
Bei der Inhaltsquelle sollte es sich um eine Datensatzgruppe handeln, welche die Pfade zu den Bilddateien enthlt. Je nach der Dateistruktur Ihrer Site sind die Pfade absolut, dokumentrelativ oder zum Site-Stammordner relativ.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 617
Dynamische Seiten erstellen
Hinweis: Dreamweaver untersttzt derzeit keine binren Bilddateien, die in Datenbanken gespeichert sind. Falls in der Liste keine Datensatzgruppen enthalten sind oder die vorhandenen nicht Ihren Bedrfnissen entsprechen, knnen Sie eine neue Datensatzgruppe definieren.
Verwandte Themen
Datensatzgruppen ohne manuelle SQL-Eingabe definieren auf Seite 599
mchten. Die Inhaltsquelle muss Daten enthalten, die fr das zu verbindende HTML-Attribut geeignet sind. Falls in der Liste keine Inhaltsquellen enthalten sind oder die vorhandenen nicht Ihren Anforderungen entsprechen, klicken Sie auf die Schaltflche mit dem Pluszeichen (+), um eine neue Inhaltsquelle zu definieren.
3 Whlen Sie in der Entwurfsansicht ein HTML-Objekt aus.
Wenn Sie beispielsweise eine HTML-Tabelle auswhlen mchten, klicken Sie in die Tabelle und dann auf das Tag
<table> im Tag-Selektor links unten im Dokumentfenster.
4 Whlen Sie im Bedienfeld Bindungen eine Inhaltsquelle in der Liste aus. 5 Whlen Sie im Feld Verbinden mit ein HTML-Attribut im Popupmen aus. 6 Klicken Sie auf Verbinden.
Wenn diese Seite das nchste Mal auf dem Anwendungsserver ausgefhrt wird, wird der Wert der Datenquelle dem HTML-Attribut zugewiesen.
Eigenschaften). Wenn Sie beispielsweise eine HTML-Tabelle auswhlen mchten, klicken Sie in die Tabelle und dann auf das Tag
<table> im Tag-Selektor links unten im Dokumentfenster.
2 Wie Sie eine Quelle fr dynamischen Inhalt mit dem HTML-Attribut verbinden, hngt vom jeweiligen Speicherort ab.
Wenn neben dem zu verbindenden Attribut im Eigenschafteninspektor ein Ordnersymbol angezeigt wird, klicken
Sie auf dieses Symbol. Daraufhin wird ein Dialogfeld zur Dateiauswahl geffnet. Klicken Sie nun auf Datenquellen, um eine Liste der Datenquellen anzuzeigen.
Wenn kein Ordnersymbol neben dem zu verbindenden Attribut angezeigt wird, klicken Sie auf die Registerkarte
Listen (die untere der beiden Registerkarten) auf der linken Seite des Eigenschafteninspektors. Nun wird die Listenansicht des Eigenschafteninspektors angezeigt.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 618
Dynamische Seiten erstellen
Falls das zu verbindende Attribut nicht in der Listenansicht aufgefhrt ist, klicken Sie auf die Schaltflche mit dem
Pluszeichen (+). Geben Sie dann den Namen des Attributs ein oder klicken Sie auf die Pfeilschaltflche, um das Attribut im Popupmen auszuwhlen.
3 Um den Wert das Attributs dynamisch zu gestalten, klicken Sie zunchst auf das Attribut und dann auf das
Blitzsymbol oder das Ordnersymbol am Ende der Attributzeile. Wenn Sie auf das Blitzsymbol klicken, wird eine Liste der Datenquellen angezeigt. Wenn Sie auf das Ordnersymbol klicken, wird ein Dialogfeld zur Dateiauswahl angezeigt. Whlen Sie die Option Datenquellen, um eine Liste der Inhaltsquellen anzuzeigen.
4 Whlen Sie in der Liste eine Inhaltsquelle aus und klicken Sie auf OK.
Die Inhaltsquelle muss Daten enthalten, die fr das zu verbindende HTML-Attribut geeignet sind. Falls in der Liste keine Inhaltsquellen enthalten sind oder die vorhandenen nicht Ihren Anforderungen entsprechen, knnen Sie eine neue Inhaltsquelle definieren. Wenn diese Seite das nchste Mal auf dem Anwendungsserver ausgefhrt wird, wird der Wert der Datenquelle dem HTML-Attribut zugewiesen.
Pluszeichen (+) und geben Sie in die Spalte Parameter einen Parameternamen ein.
4 Klicken Sie auf die Spalte mit den Parameterwerten und anschlieend auf das Blitzsymbol, um einen dynamischen
Die Datenquelle muss Daten enthalten, die fr den zu verbindenden Objektparameter geeignet sind. Falls in der Liste keine Datenquellen enthalten sind oder die vorhandenen nicht Ihren Bedrfnissen entsprechen, knnen Sie eine neue Datenquelle definieren.
Verwandte Themen
Quellen fr dynamischen Inhalt definieren auf Seite 599
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 619
Dynamische Seiten erstellen
Wenn Sie Ihrer Seite eine weitere Datensatzgruppe hinzufgen, werden die beiden Gruppen im Bedienfeld Serververhalten folgendermaen aufgefhrt:
Recordset(mySecondRecordset)Recordset(myRecordset)
Bedienfeld Serververhalten auf das gewnschte Serververhalten. Nun wird das Dialogfeld angezeigt, in dem Sie die ursprngliche Datenquelle definiert haben.
3 Nehmen Sie im Dialogfeld die gewnschten nderungen vor und klicken Sie auf OK.
lschen:
Markieren Sie den dynamischen Inhalt auf der Seite und drcken Sie die Entf-Taste. Whlen Sie den dynamischen Inhalt im Bedienfeld Serververhalten aus und klicken Sie auf die Schaltflche mit
dem Minuszeichen (). Hinweis: Durch diesen Vorgang wird das serverseitige Skript aus der Seite entfernt, das den dynamischen Inhalt aus der Datenbank abruft. Die Daten in der Datenbank werden dadurch nicht gelscht.
Das Layout der Seite mit den Seitenentwurfswerkzeugen anpassen Dynamischen Inhalt hinzufgen, bearbeiten oder lschen Serververhalten hinzufgen, bearbeiten oder lschen
1 Klicken Sie auf die Schaltflche Live-Ansicht, um den dynamischen Inhalt anzuzeigen. 2 Nehmen Sie die gewnschten nderungen an der Seite vor. Sie mssen zwischen der Live-Ansicht und der
Entwurfs- oder Codeansicht wechseln, um nderungen vorzunehmen und deren Auswirkungen anzuzeigen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 620
Dynamische Seiten erstellen
Verwandte Themen
Parameter von HTML-Formularen auf Seite 699 URL-Parameter auf Seite 700 Funktionsweise von Sitzungsvariablen auf Seite 594
Sie in einem Dialogfeld gefragt, ob Sie diese Optionen aktivieren mchten. Klicken Sie auf OK, um die Optionen zu aktivieren und die Kompatibilitt mit Contribute herzustellen.
3 Geben Sie das Administratorkennwort ein, wenn Sie dazu aufgefordert werden, und klicken Sie auf OK.
Formularen.
6 Klicken Sie auf OK, um das Dialogfeld zu schlieen. 7 Klicken Sie auf Schlieen, um das Dialogfeld Website verwalten zu schlieen.
Verwandte Themen
Contribute-Sites mit Dreamweaver verwalten auf Seite 54 Vorlagen fr Contribute-Sites erstellen auf Seite 426
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 621
Dynamische Seiten erstellen
2 Bearbeiten Sie beliebige Optionen. Wenn Sie im Eigenschafteninspektor eine neue Option auswhlen, wird die
Verwandte Themen
Dynamischen Inhalt bearbeiten auf Seite 619
Datenbank-Datenstze anzeigen
Datenbank-Datenstze
Bei der Anzeige von Datenbank-Datenstzen werden Daten, die in einer Datenbank oder in einer anderen Inhaltsquelle gespeichert sind, abgerufen und auf einer Webseite dargestellt. Dreamweaver verfgt ber zahlreiche Methoden zur Anzeige von dynamischen Inhalten. Auerdem enthlt das Programm mehrere integrierte Serververhalten, mit denen die Prsentation von dynamischen Inhalten verbessert wird und die es den Benutzern ermglichen, einfacher durch die von der Datenbank zurckgegebenen Daten zu navigieren und die gewnschten Informationen zu suchen. Datenbanken und andere Quellen fr dynamischen Inhalt bieten eine leistungsstarke und flexible Basis fr das Suchen, Sortieren und Anzeigen groer Datenmengen. Datenbanken eignen sich vor allem dann zum Speichern von Website-Inhalten, wenn Sie groe Datenmengen speichern und dann strukturiert abrufen und anzeigen mchten. Mit den Tools und integrierten Serververhalten von Dreamweaver knnen Sie die Daten, die in einer Datenbank gespeichert sind, auf effiziente Weise abrufen und anzeigen.
Angenommen, der Preis eines in einer Datensatzgruppe enthaltenen Artikels betrgt 10,989. Sie knnen angeben, dass dieser Preis auf der Seite im Format Euro 10,99 angezeigt werden soll, indem Sie das Dreamweaver-Format Whrung - zwei Dezimalstellen whlen. Dieses Format bewirkt, dass eine Zahl mit zwei Dezimalstellen angezeigt wird. Wenn die Zahl mehr als zwei Dezimalstellen hat, wird sie entweder auf- oder abgerundet. Hat die Zahl keine Dezimalstellen, werden das Dezimaltrennzeichen und zwei Nullen hinzugefgt.
Wiederholender Bereich Mit diesen Serververhalten knnen Sie mehrere von einer Datenbankabfrage zurckgegebene Elemente anzeigen. Zudem knnen Sie festlegen, wie viele Datenstze pro Seite angezeigt werden. Datensatzgruppen-Navigation Mit diesen Serververhalten knnen Sie Navigationselemente einfgen, mit denen
Benutzer die nchste bzw. die vorige von der Datensatzgruppe zurckgegebene Datensatzmenge anzeigen knnen. Wenn Sie beispielsweise mit dem Serverobjekt Bereich wiederholen festlegen, dass pro Seite 10 Datenstze angezeigt werden sollen und die Datensatzgruppe 40 Datenstze zurckgibt, knnen Sie durch jeweils 10 Datenstze navigieren.
Statusleiste fr Datensatzgruppe Mit diesen Serververhalten knnen Sie einen Zhler einfgen, der zeigt, an welcher
Stelle innerhalb einer Datensatzmenge der Benutzer sich befindet, und zwar relativ zur Gesamtanzahl der zurckgegebenen Datenstze.
Bereich zeigen Mit diesen Serververhalten knnen Sie whlen, ob Elemente auf der Seite ein- oder ausgeblendet
werden, wobei die Relevanz der derzeit angezeigten Datenstze als Grundlage dient. Wenn beispielsweise der letzte
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 622
Dynamische Seiten erstellen
Datensatz einer Datensatzgruppe angezeigt wird, kann der Hyperlink Weiter ausgeblendet werden, sodass nur der Hyperlink fr die vorigen Datenstze (Zurck) angezeigt wird.
Verwandte Themen
Inhalte in Tabellen darstellen auf Seite 188 Text einfgen und formatieren auf Seite 232
Eine Datensatzgruppe, durch die navigiert werden soll Dynamischer Inhalt auf der Seite, um die Datenstze anzuzeigen Text oder Bilder auf der Seite, die als Navigationsleiste dienen und auf Mausklicks reagieren Eine Gruppe von Verschieben zu Datensatz-Serververhalten, die die Navigation durch die Datensatzgruppe
ermglichen Die letzten beiden Elemente knnen Sie entweder mit dem Serverobjekt Navigationsleiste fr Datensatzgruppe oder separat mit den Entwurfstools und dem Bedienfeld Serververhalten hinzuzufgen.
Eine HTML-Tabelle mit Text- oder Bild-Hyperlinks Eine Gruppe von Verschieben zu-Serververhalten Eine Gruppe von Bereich anzeigen-Serververhalten
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 623
Dynamische Seiten erstellen
Bevor Sie die Navigationsleiste auf der Seite platzieren, stellen Sie sicher, dass die Seite ber eine Datensatzgruppe fr die Navigation und ber ein Seitenlayout zur Anzeige der Datenstze verfgt. Nachdem Sie die Navigationsleiste auf der Seite platziert haben, knnen Sie sie mit den Entwurfstools beliebig anpassen. Sie knnen auch die Serververhalten Verschieben zu und Bereich zeigen bearbeiten, indem Sie im Bedienfeld Serververhalten darauf doppelklicken. Dreamweaver erstellt eine Tabelle mit Text- oder Bildhyperlinks, auf die der Benutzer klicken kann, um durch die ausgewhlte Datensatzgruppe zu navigieren. Bei der Anzeige des ersten Datensatzes der Datensatzgruppe sind die Hyperlinks Erster und Vorheriger bzw. die entsprechenden Bilder ausgeblendet. Bei der Anzeige des letzten Datensatzes der Datensatzgruppe sind die Hyperlinks Nchster und Letzter bzw. die entsprechenden Bilder ausgeblendet. Sie knnen das Layout der Navigationsleiste mit den Entwurfstools und dem Bedienfeld Serververhalten anpassen.
1 Setzen Sie in der Entwurfsansicht die Einfgemarke an die Stelle auf der Seite, wo Sie die Navigationsleiste anzeigen
mchten.
2 ffnen Sie das Dialogfeld Navigationsleiste fr Datensatzgruppe (Einfgen > Datenobjekte >
durch andere Bilddateien ersetzen, nachdem Sie die Navigationsleiste auf der Seite platziert haben.
Erstellen Sie Navigationshyperlinks in Text oder Bildern. Platzieren Sie die Hyperlinks in der Entwurfsansicht auf der Seite. Weisen Sie jedem Navigationshyperlink ein spezifisches Serververhalten zu.
Im folgenden Verfahren wird beschrieben, wie Sie den Navigationshyperlinks ein spezifisches Serververhalten zuweisen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 624
Dynamische Seiten erstellen
fr diesen Hyperlink geeignetes Serververhalten aus. Wenn die Datensatzgruppe eine groe Zahl von Datenstzen enthlt, kann das Ausfhren des Serververhaltens Zum letzten Datensatz verschieben lngere Zeit in Anspruch nehmen.
4 Whlen Sie im Popupmen Datensatzgruppe die Datensatzgruppe, die die gewnschten Datenstze enthlt.
Klicken Sie dann auf OK. Das Serververhalten wird dem Navigationshyperlink zugewiesen.
Hinweis: Wenn die Datensatzgruppe eine groe Zahl von Datenstzen enthlt, kann das Ausfhren des Serververhaltens Zum letzten Datensatz verschieben lngere Zeit in Anspruch nehmen.
Nachdem Sie der Seite eine Datensatzgruppe hinzugefgt und eine Navigationsleiste erstellt haben, mssen Sie den einzelnen Navigationselementen individuelle Serververhalten zuweisen. Eine typische Navigationsleiste fr Datensatzgruppen enthlt beispielsweise Navigationselemente fr die folgenden Hyperlinks, die bestimmten Verhalten entsprechen:
Navigationshyperlink Zur ersten Seite gehen Zur vorherigen Seite gehen Zur nchsten Seite gehen Zur letzten Seite gehen Serververhalten Zur ersten Seite verschieben Zur vorherigen Seite verschieben Zur nchsten Seite verschieben Zur letzten Seite verschieben
Verwandte Themen
Datensatzgruppen auf Seite 593
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 625
Dynamische Seiten erstellen
Anzeigen, wenn Datensatzgruppe leer ist Anzeigen, wenn Datensatzgruppe nicht leer ist Anzeigen, wenn erste Seite Anzeigen, wenn nicht erste Seite Anzeigen, wenn letzte Seite Anzeigen, wenn nicht letzte Seite
1 Whlen Sie in der Entwurfsansicht den Bereich auf der Seite aus, den Sie ein- oder ausblenden mchten. 2 Klicken Sie im Bedienfeld Serververhalten (Fenster > Serververhalten) auf die Schaltflche mit dem
Pluszeichen (+).
3 Whlen Sie im Popupmen die Option Bereich zeigen und whlen Sie eines der Serververhalten in der Liste aus.
Verwandte Themen
Datenbank-Datenstze auf Seite 621 Dynamische Tabellen erstellen auf Seite 627
Dies kann ein beliebiges Objekt wie etwa eine Tabelle, eine Tabellenzeile oder ein Textabsatz sein. Sie knnen den Tag-Selektor links unten im Dokumentfenster verwenden, um einen Bereich auf der Seite przise auszuwhlen. Handelt es sich bei dem Bereich z. B. um eine Tabellenzeile, klicken Sie auf der Seite in die Zeile. Klicken Sie dann auf das ganz rechts stehende Tag <tr> im Tag-Selektor, um die Tabellenzeile auszuwhlen.
2 Whlen Sie Fenster > Serververhalten, um das Bedienfeld Serververhalten einzublenden. 3 Klicken Sie auf die Schaltflche mit dem Pluszeichen (+) und whlen Sie Bereich wiederholen. 4 Whlen Sie im Popupmen die zu verwendende Datensatzgruppe aus. 5 Geben Sie an, wie viele Datenstze pro Seite angezeigt werden sollen. Klicken Sie dann auf OK.
Der wiederholende Bereich ist nun im Dokumentfenster von einer dnnen, grauen, gestrichelten Linie umgeben.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 626
Dynamische Seiten erstellen
Verwandte Themen
Datenbank-Datenstze auf Seite 621 Dynamischen Inhalt bearbeiten auf Seite 619
Name des wiederholenden Bereichs Datensatzgruppe, aus der die Datenstze fr den wiederholenden Bereich stammen Anzahl der angezeigten Datenstze
Wenn Sie eine neue Option auswhlen, aktualisiert Dreamweaver die Seite.
Wiederholenden Bereich zum Anzeigen mehrerer Datenstze auf einer Seite hinzufgen
1 Geben Sie die Datensatzgruppe an, in der sich die Daten befinden, die im wiederholenden Bereich angezeigt
werden sollen.
2 Geben Sie an, wie viele Datenstze pro Seite angezeigt werden sollen. Klicken Sie dann auf OK.
Wenn Sie die Anzahl der auf einer Seite anzuzeigenden Datenstze beschrnken, die Anzahl der tatschlich angeforderten Datenstze jedoch eventuell grer ist, fgen Sie Navigationshyperlinks hinzu, mit denen die Besucher der Site auch die brigen Datenstze anzeigen knnen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 627
Dynamische Seiten erstellen
Um eine solche Tabelle anzulegen, mssen Sie eine Tabelle mit dynamischem Inhalt erstellen und dann das Serververhalten Bereich wiederholen auf die Tabellenzeile anwenden, die den dynamischen Inhalt enthlt. Wenn der Anwendungsserver die Seite verarbeitet, wird die Zeile so oft wiederholt, wie vom Serverobjekt Bereich wiederholen angegeben. Dabei wird in jede neue Zeile ein anderer Datensatz eingefgt.
1 Fhren Sie einen der folgenden Schritte aus, um eine dynamische Tabelle einzufgen:
Whlen Sie Einfgen > Anwendungsobjekte > Dynamische Daten > Dynamische Tabelle, um das
Dialogfeld Dynamische Tabelle einzublenden.
Klicken Sie in der Kategorie Daten des Bedienfelds Einfgen auf die Schaltflche Dynamische Daten und
whlen Sie im Popupmen das Symbol Dynamische Tabelle aus.
2 Whlen Sie im Popupmen Datensatzgruppe die Datensatzgruppe aus. 3 Geben Sie an, wie viele Datenstze pro Seite angezeigt werden sollen. 4 (Optional) Geben Sie Werte fr den Tabellenrahmen, die Zellauffllung und den Zellabstand ein.
Die Werte, die Sie fr den Tabellenrahmen, die Zellauffllung und den Zellabstand eingeben, werden im Dialogfeld Dynamische Tabelle gespeichert.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 628
Dynamische Seiten erstellen
Hinweis: Wenn Sie an einem Projekt arbeiten, fr das mehrere dynamische Tabellen mit demselben Erscheinungsbild erforderlich sind, geben Sie die Werte fr das Tabellenlayout ein. Dadurch wird die Entwicklung der Seite zustzlich erleichtert. Sie knnen diese Werte im Eigenschafteninspektor fr Tabellen auch nach dem Einfgen der Tabelle noch ndern.
5 Klicken Sie auf OK.
Daraufhin werden eine Tabelle und Platzhalter fr den dynamischen Inhalt, der in der zugehrigen Datensatzgruppe definiert ist, in die Seite eingefgt.
In diesem Beispiel enthlt die Datensatzgruppe vier Spalten: AUTHORID, FIRSTNAME, LASTNAME und BIO. Die berschriftszeile der Tabelle enthlt die Namen der einzelnen Spalten. Sie knnen die berschriften durch Beschreibungen oder entsprechende Bilder ersetzen.
Datensatzzhler erstellen
Mithilfe von Datensatzzhlern knnen Benutzer sich bei der Navigation durch eine Datensatzmenge orientieren. In der Regel zeigen Datensatzzhler die Gesamtanzahl der zurckgegebenen Datenstze sowie die derzeit angezeigten Datenstze an. Wenn eine Datensatzgruppe beispielsweise 40 einzelne Datenstze zurckgegeben hat und 8 Datenstze pro Seite angezeigt werden, lautet der Datensatzzhler auf der ersten Seite Anzeige der Datenstze 1-8 von 40. Wenn Sie einen Datensatzzhler fr eine Seite erstellen mchten, mssen Sie zunchst eine Datensatzgruppe fr die Seite, ein passendes Seitenlayout fr den dynamischen Inhalt und eine Navigationsleiste fr Datensatzgruppen erstellen.
Verwandte Themen
Datensatzgruppen auf Seite 593 Navigationsleiste fr Datensatzgruppen erstellen auf Seite 622 Mehrere Datensatzgruppen-Ergebnisse anzeigen auf Seite 625 Dynamische Tabellen erstellen auf Seite 627
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 629
Dynamische Seiten erstellen
2 Whlen Sie Einfgen > Anwendungsobjekte > Anzahl der Datenstze anzeigen > Navigationsstatus fr
Datensatzgruppe. Whlen Sie die Datensatzgruppe im Popupmen Datensatzgruppe aus und klicken Sie auf OK. Das Serverobjekt Navigationsstatus fr Datensatzgruppe fgt einen textbasierten Datensatzzhler ein, der in etwa folgendermaen aussieht:
In der Live-Ansicht wird der Zhler hnlich wie im folgenden Beispiel dargestellt:
die Navigation erfolgen soll, und klicken Sie dann auf OK.
2 Setzen Sie die Einfgemarke an das Ende der Textzeichenfolge. 3 ffnen Sie das Bedienfeld Serververhalten (Fenster > Serververhalten). 4 Klicken Sie oben links auf die Schaltflche mit dem Pluszeichen (+) und whlen Sie die Option Anzahl der
Datenstze anzeigen. Whlen Sie dann im Untermen die Option Datenstze gesamt anzeigen. Das Verhalten Datenstze gesamt anzeigen wird der Seite hinzugefgt, und an der Position der Einfgemarke wird ein Platzhalter eingefgt. Die Textzeichenfolge sieht nun folgendermaen aus:
Displaying records thru of {Recordset1.RecordCount}.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 630
Dynamische Seiten erstellen
5 Setzen Sie die Einfgemarke hinter das Wort records und whlen Sie die Nummer des anzuzeigenden Start-
Datensatzes im Bedienfeld Serververhalten > Plussymbol-Schaltflche (+) > Datensatzzhler aus. Die Textzeichenfolge sieht nun folgendermaen aus:
Displaying records {StartRow_Recordset1} thru of {Recordset1.RecordCount}.
6 Setzen Sie dann die Einfgemarke zwischen die Wrter through und of und whlen Sie die Nummer des
anzuzeigenden End-Datensatzes im Bedienfeld Serververhalten > Plussymbol-Schaltflche (+) > Datensatzzhler aus. Die Textzeichenfolge sieht nun folgendermaen aus:
Displaying records {StartRow_Recordset1} thru {EndRow_Recordset1} of{Recordset1.RecordCount}.
7 berprfen Sie, ob der Zhler korrekt funktioniert, indem Sie die Seite in der Live-Ansicht anzeigen. Der Zhler
Wenn die Ergebnisseite einen Navigationshyperlink enthlt, mit dem die nchste Datensatzgruppe angezeigt werden kann, sieht der Zhler folgendermaen aus, nachdem Sie auf den Navigationshyperlink geklickt haben:
Showing records 9 thru 16 of 40.
Wenn der Abwrtspfeil nicht sichtbar ist, erweitern Sie das Bedienfeld.
4 Whlen Sie im Popupmen Format die gewnschte Kategorie fr das Datenformat aus.
Achten Sie darauf, dass das Datenformat fr die zu formatierenden Daten geeignet ist. Die Whrungsformate funktionieren zum Beispiel nur dann, wenn die dynamischen Daten numerisch sind. Beachten Sie auch, dass die Daten nur mit jeweils einem Format belegt werden knnen.
5 berprfen Sie, ob das Format korrekt angewendet wurde, indem Sie die Vorschau der Seite in der Live-Ansicht
anzeigen.
Datenformate anpassen
1 ffnen Sie eine Seite, die dynamischen Inhalt enthlt, in der Entwurfsansicht. 2 Whlen Sie die dynamischen Daten aus, deren Format Sie anpassen mchten.
Das gebundene Datenelement, dessen dynamischen Text Sie ausgewhlt haben, wird im Bedienfeld Bindungen (Fenster > Bindungen) hervorgehoben. In diesem Bedienfeld werden fr das ausgewhlte Element zwei Spalten angezeigt, nmlich Bindung und Format. Falls die Spalte Format nicht sichtbar ist, verbreitern Sie das Bedienfeld Bindungen entsprechend.
3 Klicken Sie im Bedienfeld Bindungen in der Spalte Format auf den Abwrtspfeil, um das Popupmen der
verfgbaren Datenformate anzuzeigen. Wenn der Abwrtspfeil nicht sichtbar ist, verbreitern Sie das Bedienfeld entsprechend.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 631
Dynamische Seiten erstellen
4 Whlen Sie im Popupmen den Befehl Formatliste bearbeiten. 5 Nehmen Sie im Dialogfeld die gewnschten Einstellungen vor und klicken Sie auf OK. a Whlen Sie in der Liste das Format aus und klicken Sie auf Bearbeiten. b ndern Sie beliebige der folgenden Parameter in den daraufhin angezeigten Dialogfeldern fr Whrung, Ziffer
Legen Sie die Anzahl der Dezimalstellen fest. Legen Sie fest, ob bei Dezimalzahlen eine Null vorangestellt werden soll. Legen Sie fest, ob fr negative Werte ein Minuszeichen oder Klammern verwendet werden sollen. Legen Sie fest, ob Ziffern gruppiert werden sollen.
c Um ein Datenformat zu lschen, klicken Sie in der Liste auf das Format und dann auf die Schaltflche mit dem
Minuszeichen ().
Format auf den Pfeil nach unten. Wenn der Abwrtspfeil nicht sichtbar ist, erweitern Sie das Bedienfeld.
4 Whlen Sie im Popupmen den Befehl Formatliste bearbeiten. 5 Klicken Sie auf die Schaltflche mit dem Pluszeichen (+) und whlen Sie einen Formattyp aus. 6 Definieren Sie das Format und klicken Sie auf OK. 7 Geben Sie einen Namen fr das neue Format in die Spalte Name ein. Klicken Sie auf OK.
Hinweis: Obwohl in Dreamweaver nur Datenformate fr ASP-Seiten erstellt werden knnen, ist es fr Benutzer von ColdFusion und PHP mglich, von anderen Entwicklern erstellte Formate herunterzuladen oder Serverformate zu erstellen und auf Dreamweaver Exchange bereitzustellen. Weitere Informationen zur Serverformat-API finden Sie in Dreamweaver erweitern (Hilfe > Dreamweaver erweitern > Serverformate).
Live-Daten anzeigen
Die Funktion fr die Live Data-Ansicht ist ab Dreamweaver CS5 veraltet. Sie wurde durch die optimierte Funktion fr die Live-Ansicht ersetzt. Damit Sie Live-Daten in der Live-Ansicht anzeigen knnen, mssen Sie folgende Schritte ausfhren:
Definieren Sie einen Ordner zum Verarbeiten dynamischer Seiten (z. B. einen Stammordner auf einem
ColdFusion-Server auf Ihrem Computer oder einem Remote-Computer). Wenn beim ffnen der Live-Ansicht auf der Seite eine Fehlermeldung angezeigt wird, berprfen Sie, ob im Dialogfeld Site-Definition das richtige URL-Prfix angegeben ist.
Kopieren Sie zugehrige Dateien (soweit vorhanden) in den Ordner. Geben Sie fr die Seite alle Parameter an, die sonst ein Benutzer angeben wrde.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 632
Dynamische Seiten erstellen
fr HTTP-Anforderungen).
2 Klicken Sie im Bereich URL-Anforderung auf die Schaltflche mit dem Pluszeichen (+) und geben Sie einen
oder GET.
5 Geben Sie im Textbereich Initialisierungsskript gegebenenfalls den Quellcode ein, den Sie oben auf der Seite
einfgen mchten, bevor diese ausgefhrt wird. Initialisierungsskripts bestehen in der Regel aus Code, der die Sitzungsvariablen festlegt.
6 Um die Einstellungen fr die aktuelle Seite zu speichern, whlen Sie Einstellungen fr dieses Dokument
speichern aus und klicken Sie dann auf OK. Hinweis: Die Einstellungen knnen nur gespeichert werden, wenn Design Notes aktiviert ist (Datei > Design Notes).
Verwandte Themen
Zwischen Ansichten im Dokumentfenster umschalten auf Seite 18 Seitenvorschau in der Live-Ansicht auf Seite 307 Vorschau dynamischer Seiten in einem Browser anzeigen auf Seite 588
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 633
Dynamische Seiten erstellen
Whlen Sie Hilfe > Dreamweaver Exchange. Whlen Sie Fenster > Serververhalten, klicken Sie auf die Schaltflche mit dem Pluszeichen (+) und whlen Sie
Weitere Verhalten. Die Dreamweaver Exchange-Webseite wird im Browser geffnet.
2 Melden Sie sich mit Ihrer Adobe-ID bei Exchange an. Falls Sie noch keine Dreamweaver Exchange-ID fr sich
erstellt haben, befolgen Sie die Anweisungen zum Erffnen eines Adobe-Kontos.
Schreiben Sie einen oder mehrere Codeblcke, die die erforderliche Aktion durchfhren. Legen Sie fest, wo der Codeblock in den HTML-Code der Seite eingefgt werden soll. Falls das Serververhalten erfordert, dass ein Wert fr einen Parameter angegeben wird: Erstellen Sie ein Dialogfeld,
in dem der Webentwickler, der das Verhalten anwendet, aufgefordert wird, einen entsprechenden Wert zu liefern.
Testen Sie ein Serververhalten, bevor es anderen Personen zur Verfgung gestellt wird.
Verwandte Themen
Parameter fr das Serververhalten anfordern auf Seite 641 Serververhalten testen auf Seite 644
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 634
Dynamische Seiten erstellen
Serververhalten-Erstellung verwenden
Mit der Serververhalten-Erstellung knnen Sie die Codeblcke hinzufgen, die vom Serververhalten in eine Seite eingefgt werden.
1 ffnen Sie das Bedienfeld Serververhalten (Fenster > Serververhalten), klicken Sie auf die Schaltflche mit
Sie gerade arbeiten, whlen Sie die Option Vorhandenes Serververhalten kopieren aus und dann im Popupmen Zu kopierendes Verhalten das gewnschte Serververhalten. Klicken Sie auf OK. Das Dialogfeld Serververhalten-Erstellung wird angezeigt.
5 Um einen neuen Codeblock hinzuzufgen, klicken Sie auf die Schaltflche mit dem Pluszeichen (+), geben Sie
einen Namen fr den Codeblock ein und klicken Sie anschlieend auf OK. Der von Ihnen eingegebene Name wird in der Serververhalten-Erstellung angezeigt, wobei die entsprechenden SkriptTags im Feld Codeblock sichtbar sind.
6 Geben Sie im Feld Codeblock den Laufzeit-Code ein, der zum Implementieren des Serververhaltens erforderlich ist.
Hinweis: Wenn Sie im Feld Codeblock Code eingeben, knnen Sie fr jeden benannten Codeblock (z. B. myBehavior_block1, myBehavior_block2, myBehavior_blockn usw.) jeweils nur ein Tag oder einen Codeblock einfgen. Wenn mehrere Tags oder Codeblcke einzugeben sind, mssen Sie fr jedes Tag und jeden Codeblock einen separaten Codeblock erstellen. Sie knnen Code auch von anderen Seiten kopieren und einfgen.
7 Setzen Sie die Einfgemarke an die Stelle im Codeblock, an der Sie den Parameter einfgen mchten, oder whlen
Sie eine Zeichenfolge aus, die durch einen Parameter ersetzt werden soll.
8 Klicken Sie auf die Schaltflche Parameter in Codeblock einfgen. 9 Geben Sie im Feld Parametername einen Namen fr den Parameter (z. B. Sitzung) ein und klicken Sie auf OK.
Der Parameter wird in den Codeblock an der Stelle eingefgt, an der Sie die Einfgemarke vor dem Definieren des Parameters platziert haben. Wenn Sie eine Zeichenfolge markiert haben, werden alle Fundstellen dieser Zeichenfolge im Codeblock durch eine Parametermarkierung ersetzt (z. B. @@Session@@).
10 Whlen Sie im Popupmen Code einfgen eine Option aus, die angibt, an welcher Stelle die Codeblcke
Schaltflche Erweitert.
12 Wenn Sie weitere Codeblcke erstellen mssen, wiederholen Sie die Schritte 5 bis 11. 13 Wenn das Serververhalten die Eingabe von Parametern erfordert, mssen Sie ein Dialogfeld erstellen, das
Parameter von der Person entgegennimmt, die das Verhalten anwendet. Siehe nachstehender Link.
14 Nachdem Sie alle erforderlichen Arbeitsschritte zum Erstellen des Serververhaltens ausgefhrt haben, klicken Sie
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 635
Dynamische Seiten erstellen
Verwandte Themen
Codeblcke mit der Schleifenanweisung wiederholen auf Seite 639 Richtlinien fr die Kodierung auf Seite 643 Parameter fr das Serververhalten anfordern auf Seite 641 Benutzerdefinierte Serververhalten hinzufgen auf Seite 633
Erweiterte Optionen
Nachdem Sie fr jeden Codeblock den Quellcode und eine Einfgeposition festgelegt haben, ist das Serververhalten vollstndig definiert. In den meisten Fllen brauchen Sie keine zustzlichen Informationen anzugeben. Fortgeschrittene Benutzer knnen die folgenden Optionen einstellen:
Kennzeichner Hiermit legen Sie fest, ob der Codeblock als Kennzeichner behandelt werden soll.
Standardmig ist jeder Codeblock ein Kennzeichner. Wenn Dreamweaver einen Kennzeichner-Codeblock an einer beliebigen Stelle innerhalb eines Dokuments findet, wird das Verhalten im Bedienfeld Serververhalten aufgelistet. Mit der Option Kennzeichner geben Sie an, ob der Codeblock als Kennzeichner behandelt werden soll. Mindestens einer der Codeblcke eines Serververhaltens muss ein Kennzeichner sein. Ein Codeblock sollte kein Kennzeichner sein, wenn eine der folgenden Bedingungen erfllt ist: Derselbe Block wird von einem anderen Serververhalten verwendet oder der Codeblock ist so einfach, dass er auf der Seite bereits zufllig enthalten sein kann.
Serververhalten-Titel Hiermit legen Sie den Titel des Verhaltens im Bedienfeld Serververhalten fest.
Wenn der Autor der Webseite im Bedienfeld Serververhalten auf die Schaltflche mit dem Pluszeichen (+) klickt, wird der Titel des neuen Serververhaltens im Popupmen angezeigt. Wenn der Autor eine Instanz eines Serververhaltens auf ein Dokument anwendet, wird das Verhalten in der Liste der angewandten Verhalten im Bedienfeld Serververhalten angezeigt. Im Feld Serververhalten-Titel legen Sie den Inhalt des PlusPopupmens (+) und der Liste der angewandten Verhalten fest. Der in diesem Feld ursprnglich angezeigte Wert ist der Name, den Sie im Dialogfeld Neues Serververhalten angegeben haben. Beim Definieren von Parametern wird der Name automatisch aktualisiert, und die Parameter werden in Klammern nach dem Namen des Serververhaltens angezeigt.
Set Session Variable (@@Name@@, @@Value@@)
Wenn der Benutzer den Standardwert bernimmt, werden alle Angaben, die sich vor den Klammern befinden, im Plus-Popupmen (+) angezeigt (z. B. Set Session Variable). Der Name und die Parameter werden in der Liste der angewandten Verhalten angezeigt, z. B. Set Session Variable ("abcd", "5").
Auszuwhlender Codeblock Hiermit legen Sie fest, welcher Codeblock ausgewhlt wird, wenn das Verhalten im
Bedienfeld Serververhalten ausgewhlt wird. Wenn Sie ein Serververhalten anwenden, wird einer der Codeblcke innerhalb des Verhaltens als auszuwhlender Codeblock gekennzeichnet. Wenn Sie das Serververhalten anwenden und anschlieend das Verhalten im Bedienfeld Serververhalten auswhlen, wird der gekennzeichnete Block im Dokumentfenster ausgewhlt. Standardmig whlt Dreamweaver den ersten Codeblock aus, der sich nicht oberhalb des Tags html befindet. Wenn sich alle Codeblcke oberhalb des Tags html befinden, wird der erste Block ausgewhlt. Fortgeschrittene Benutzer knnen festlegen, welcher Codeblock ausgewhlt wird.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 636
Dynamische Seiten erstellen
Codeblcke erstellen
Die Codeblcke, die Sie in der Serververhalten-Erstellung einrichten, werden in ein Serververhalten integriert, das im Bedienfeld Serververhalten angezeigt wird. Bei dem Code kann es sich um einen beliebigen Laufzeit-Code fr das angegebene Servermodell handeln. Wenn Sie beispielsweise ColdFusion als Dokumenttyp fr Ihr benutzerdefiniertes Serververhalten whlen, muss der von Ihnen geschriebene Code ein gltiger ColdFusion-Code sein, der auf einem ColdFusion-Anwendungsserver ausfhrbar ist. Sie knnen die Codeblcke direkt in der Serververhalten-Erstellung einrichten oder den Code aus anderen Quellen kopieren und einfgen. Jeder Codeblock, den Sie in der Serververhalten-Erstellung einrichten, muss ein einzelnes Tag oder ein einzelner Skriptblock sein. Wenn Sie mehrere Tagblcke einfgen mssen, teilen Sie diese in separate Codeblcke auf. Bedingungen in Codeblcken In Dreamweaver knnen Sie Codeblcke mit Steueranweisungen entwickeln, die bedingt ausgefhrt werden. Die Serververhalten-Erstellung verwendet die Anweisungen if, elseif und else und kann Serververhaltensparameter enthalten. Dadurch knnen Sie wechselnde Textblcke basierend auf den OR-Beziehungen der Serververhaltensparameter eingeben. Das folgende Beispiel zeigt die Anweisungen if, elseif und else. Die eckigen Klammern ([ ]) bezeichnen optionalen Code; das Sternchen (*) bezeichnet null oder mehr Instanzen. Soll ein Teil eines Codeblocks bzw. der gesamte Codeblock nur dann ausgefhrt werden, wenn eine oder mehrere bestimmte Bedingungen erfllt sind, verwenden Sie die folgende Syntax:
<@ if (expression1) @>conditional text1[<@ elseif (expression2) @>conditional text2]*[<@ else @> conditional text3]<@ endif @>
Als Bedingungsausdruck kann jeder JavaScript-Ausdruck dienen, der mit der JavaScript-Funktion eval() ausgewertet werden kann. Der Ausdruck kann einen Serververhalten-Parameter enthalten, der durch die Zeichenfolge @@ gekennzeichnet ist. (Die Zeichenfolge @@ dient zum Unterscheiden des Parameters von JavaScript-Variablen und -Schlsselwrtern.) Bedingte Anweisungen effektiv verwenden Wenn Sie die Anweisungen if, else und elseif im XML-Tag insertText verwenden, wird der Mitgliedertext vorverarbeitet, um die if-Anweisungen aufzulsen und zu bestimmen, welcher Text in das Ergebnis aufgenommen werden soll. Die Anweisungen if und elseif verwenden als Argument den Ausdruck. Der Bedingungsausdruck ist der gleiche wie derjenige fr JavaScript-Bedingungsausdrcke und kann auch Serververhaltensparameter enthalten. Mit Anweisungen wie dieser knnen Sie zwischen alternativen Codeblcken basierend auf den Werten von bzw. den Beziehungen zwischen Serververhaltensparametern whlen. Beispielsweise stammt der nachstehende JSP-Code aus einem Dreamweaver-Serververhalten, das einen bedingten Codeblock verwendet:
@@rsName@@.close(); <@ if (@@callableName@@ != '') @> @@callableName@@.execute(); @@rsName@@ = @@callableName@@.getResultSet();<@ else @> @@rsName@@ = Statement@@rsName@@.executeQuery(); <@ endif @> @@rsName@@_hasData = @@rsName@@.next();
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 637
Dynamische Seiten erstellen
Der bedingte Codeblock beginnt mit <@ if (@@callableName@@ != '') @> und endet mit <@ endif @>. Wenn also ein Benutzer bei diesem Code im Dialogfeld Serververhalten fr den Parameter @@callableName@@ einen Wert eingibt, der Parameterwert von @@callableName@@ also nicht leer ist oder den Wert null reprsentiert ((@@callableName@@ != ''), dann wird der bedingte Codeblock durch die folgende Anweisung ersetzt:
@@callableName@@.execute(); @@rsName@@ = @@callableName@@.getResultSet();
Verwandte Themen
Codeblcke mit der Schleifenanweisung wiederholen auf Seite 639
Codeblcke positionieren
Beim Erstellen von Codeblcken mit der Serververhalten-Erstellung mssen Sie festlegen, an welcher Stelle ein Codeblock im HTML-Code der Seite eingefgt werden soll. Wenn Sie beispielsweise einen Codeblock oberhalb des ffnenden <html>-Tags einfgen, mssen Sie anschlieend die Position des Codeblocks relativ zu anderen Tags, Skripts und Serververhalten in diesem Abschnitt des HTML-Codes der Seite angeben. Hufig werden Verhalten entweder vor oder nach Datensatzgruppenabfragen eingefgt, die sich mglicherweise ebenfalls im Seitencode vor dem Anfangs-Tag <html> befinden. Wenn Sie im Popupmen Code einfgen eine Positionierungsoption whlen, ndern sich die im Popupmen Relative Position verfgbaren Optionen, sodass nur die fr den entsprechenden Teil der Seite relevanten Optionen zur Auswahl stehen. Wenn Sie beispielsweise im Popupmen Code einfgen die Option Vor dem Tag <html> gewhlt haben, werden im Popupmen Relative Position nur die Optionen angezeigt, die auf diesen Teil der Seite zutreffen. Die folgende Tabelle zeigt die verfgbaren Einfgeoptionen fr Codeblock und die jeweils verfgbaren relativen Positionierungsoptionen:
Optionen fr Code einfgen Vor dem Tag <html> Optionen fr Relative Position
Am Anfang der Datei Unmittelbar vor den Datensatzgruppen Unmittelbar nach den Datensatzgruppen Direkt oberhalb des Tags <html> Benutzerdefinierte Position
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 638
Dynamische Seiten erstellen
Vor dem Ende der Datei Vor dem Ende der Datensatzgruppe Nach dem Ende der Datensatzgruppe Nach dem Tag </html> Benutzerdefinierte Position
Whlen Sie im Popupmen Tag ein Tag aus und dann eine der Positionierungsoptionen fr das Tag. Vor der Auswahl Nach der Auswahl Auswahl ersetzen Um die Auswahl legen
Wenn Sie eine benutzerdefinierte Position festlegen mchten, mssen Sie dem Codeblock eine Gewichtung zuweisen. Verwenden Sie die Option Benutzerdefinierte Position, wenn Sie mehrere Codeblcke in einer bestimmten Reihenfolge einfgen mssen. Wenn Sie beispielsweise nach den Codeblcken, die Datensatzgruppen ffnen, eine geordnete Reihe von drei Codeblcken hinzufgen mchten, weisen Sie dem ersten Block die Gewichtung 60, dem zweiten Block die Gewichtung 65 und dem dritten Block die Gewichtung 70 zu. Standardmig wird mit Dreamweaver allen Datensatz-ffnenden Codeblcken, die oberhalb des<html>-Tags eingefgt werden, eine Gewichtung von 50 zugeordnet. Wenn mehrere Blcke dieselbe Gewichtung haben, legt Dreamweaver die Reihenfolge der Blcke auf Zufallsbasis fest.
Verwandte Themen
Parameter fr das Serververhalten anfordern auf Seite 641 Richtlinien fr die Kodierung auf Seite 643 Benutzerdefinierte Serververhalten auf Seite 633 Codeblcke erstellen auf Seite 636 Serververhalten testen auf Seite 644
Das Serververhalten wird im Bedienfeld Serververhalten (Fenster > Serververhalten) aufgefhrt. Klicken Sie auf die Schaltflche mit dem Pluszeichen (+) um das Serververhalten anzuzeigen.
5 Testen Sie das Serververhalten und vergewissern Sie sich, dass es ordnungsgem funktioniert.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 639
Dynamische Seiten erstellen
Wenn Sie ein Tag eingeben, lassen Sie die spitzen Klammern (<>) weg.
3 Geben Sie eine Position relativ zu dem Tag an, indem Sie im Popupmen Relative Position eine Option whlen.
Codeblcke relativ zu einem vom Autor der Seite gewhlten Tag positionieren
1 Whlen Sie im Popupmen Code einfgen die Option Relativ zur Auswahl. 2 Geben Sie eine Position relativ zur Auswahl an, indem Sie im Popupmen Relative Position eine Option whlen.
Sie knnen den Codeblock direkt vor oder direkt nach der Auswahl einfgen. Sie knnen die Auswahl auch durch Ihren Codeblock ersetzen oder den Codeblock um die Auswahl legen. Wenn Sie den Codeblock um die Auswahl legen mchten, darf die Auswahl lediglich aus einem Anfangs-Tag und einem Schluss-Tag bestehen (ohne Text zwischen den beiden Tags), wie im folgenden Beispiel:
<CFIF Day="Monday"></CFIF>
Fgen Sie den Startteil des Codeblocks vor dem Anfangs-Tag der Auswahl ein und den Schlussteil des Codeblocks nach dem Schluss-Tag der Auswahl.
Wenn Sie Serververhalten erstellen, knnen Sie mithilfe von Schleifenkonstruktionen einen Codeblock eine bestimmte Anzahl von Malen wiederholen.
<@ loop (@@param1@@,@@param2@@,@@param3@@,@@param_n@@) @>code block <@ endloop @>
Die Schleifenanweisung akzeptiert eine durch Kommas getrennte Liste von Parameter-Arrays als Argumente. In diesem Fall ermglichen Parameter-Array-Argumente es dem Benutzer, mehrere Werte fr einen Parameter anzugeben. Der sich wiederholende Text wird n Mal dupliziert, wobei n die Lnge der Parameter-Array-Argumente ist. Falls mehrere Parameter-Array-Argumente angegeben werden, mssen alle Arrays die gleiche Lnge besitzen. Bei der i-ten Auswertung der Schleife, ersetzt das i-te Element des Parameter-Arrays die verknpften Instanzen im Codeblock. Wenn Sie ein Dialogfeld fr das Serververhalten erstellen, knnen Sie dem Dialogfeld ein Steuerelement hinzufgen, mit dem der Autor der Seite Parameter-Arrays erstellen kann. Dreamweaver enthlt ein einfaches ArraySteuerelement, mit dem Sie Dialogfelder erstellen knnen. Es lautet Textfeldliste mit Kommatrennzeichen und ist in der Serververhalten-Erstellung verfgbar. Um komplexere Benutzeroberflchenelemente zu erstellen, lesen Sie in der API-Dokumentation nach, wie ein Dialogfeld mit einem Steuerelement zum Erstellen von Arrays (z. B. ein Rastersteuerelement) erstellt wird. In einer bedingten Anweisung knnen Sie eine beliebige Anzahl von Bedingungen oder eine Schleifenanweisung verschachteln. Beispielsweise knnen Sie festlegen, dass eine Schleife ausgefhrt wird, wenn ein Ausdruck wahr ist. Im folgenden Beispiel wird dargestellt, wie mithilfe solcher sich wiederholender Codeblcke Serververhalten erstellt werden knnen (es handelt sich dabei um ein Beispiel eines ColdFusion-Verhaltens fr den Zugriff auf eine gespeicherte Prozedur):
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 640
Dynamische Seiten erstellen
<CFSTOREDPROC procedure="AddNewBook" datasource=#MM_connection_DSN# username=#MM_connection_USERNAME# password=#MM_connection_PASSWORD#> <CFPROCPARAM type="IN" dbvarname="@CategoryId" value="#Form.CategoryID#" cfsqltype="CF_SQL_INTEGER"> <CFPROCPARAM type="IN" dbvarname="@ISBN" value="#Form.ISBN#" cfsqltype="CF_SQL_VARCHAR"> </CFSTOREDPROC>
In diesem Beispiel kann das Tag CFSTOREDPROC null oder mehr CFPROCPARAM-Tags enthalten. Ohne Untersttzung der Schleifenanweisung besteht jedoch keine Mglichkeit, die CFPROCPARAM-Tags in das eingefgte CFSTOREDPROCTag einzubeziehen. Wenn dies als Serververhalten ohne Verwendung der Schleifenanweisung erstellt werden sollte, mssten Sie dieses Beispiel in die folgenden zwei Mitglieder aufteilen: ein CFSTOREDPROC-Haupt-Tag und ein CFPROCPARAM-Tag, dessen Mitgliedertyp mehrfach ist. Unter Verwendung der Schleifenanweisung knnen Sie die gleiche Prozedur wie folgt schreiben:
<CFSTOREDPROC procedure="@@procedure@@" datasource=#MM_@@conn@@_DSN# username=#MM_@@conn@@_USERNAME# password=#MM_@@conn@@_PASSWORD#> <@ loop (@@paramName@@,@@value@@,@@type@@) @> <CFPROCPARAM type="IN" dbvarname="@@paramName@@" value="@@value@@" cfsqltype="@@type@@"> <@ endloop @> </CFSTOREDPROC>
Hinweis: Zeilenschaltungen nach @> werden ignoriert. Angenommen, der Benutzer hat die folgenden Parameterwerte in das Dialogfeld Serververhalten eingegeben:
procedure = "proc1" conn = "connection1" paramName = ["@CategoryId", "@Year", "@ISBN"] value = ["#Form.CategoryId#", "#Form.Year#", "#Form.ISBN#"] type = ["CF_SQL_INTEGER", "CF_SQL_INTEGER", "CF_SQL_VARCHAR"]
In diesem Fall wrde das Serververhalten den folgenden Laufzeitcode in die Seite einfgen:
<CFSTOREDPROC procedure="proc1" datasource=#MM_connection1_DSN# username=#MM_connection1_USERNAME# password=#MM_connection1_PASSWORD#> <CFPROCPARAM type="IN" dbvarname="@CategoryId" value="#Form.CategoryId#" cfsqltype="CF_SQL_INTEGER"> <CFPROCPARAM type="IN" dbvarname="@Year" value="#Form.Year#" cfsqltype="CF_SQL_INTEGER"> <CFPROCPARAM type="IN" dbvarname="@ISBN" value="#Form.ISBN#" cfsqltype="CF_SQL_VARCHAR"> </CFSTOREDPROC>
Hinweis: Parameter-Arrays drfen auerhalb einer Schleifenanweisung nur als Teil eines bedingten Anweisungsausdrucks verwendet werden.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 641
Dynamische Seiten erstellen
Variablen _length und _index der Schleifenanweisung verwenden Die Schleifenanweisung besitzt zwei integrierte Variablen, die Sie fr eingebettete if-Bedingungen verwenden knnen. Es handelt sich um die Variablen _length und _index. Die Variable _length wertet die Lnge der von der Schleifenanweisung verarbeiteten Arrays aus, whrend die Variable _index den aktuellen Index der Schleifenanweisung auswertet. Um sicherzustellen, dass die Variablen nur als Anweisungen und nicht als die Parameter, erkannt werden, die der Schleife zu bergeben sind, schlieen Sie keine von beiden in @@-Zeichen ein. Ein Beispiel fr den Einsatz integrierter Variablen ist ihre Anwendung auf das Attribut import der Seitenanweisung. Bei dem Attribut import mssen Pakete durch Kommas voneinander getrennt werden. Wenn sich die loopAnweisung ber das gesamte Attribut import erstreckt, wrden Sie den Attributnamen import= nur bei der ersten Iteration der Schleife ausgeben (dabei wren die schlieenden Anfhrungszeichen (") enthalten), und kein Komma bei der letzten Iteration. Mit der integrierten Variablen knnen Sie dies wie folgt ausdrcken:
<@loop (@@Import@@)@> <@ if(_index == 0)@>import=" <@endif@>@@Import@@<@if (_index == _length-1)@>"<@else@>, <@ endif @> <@endloop@>
Wenn der Autor der Seite zur Angabe des Werts fr Form_Object_Name aufgefordert werden soll, schlieen Sie die Zeichenfolge in Parametermarkierungen (@@) ein:
<% Session("lang_pref") = Request.Form("@@Form_Object_Name@@"); %>
Sie knnen auch die Zeichenfolge markieren und anschlieend auf die Schaltflche Parameter in Codeblock einfgen klicken. Geben Sie einen Parameternamen ein und klicken Sie auf OK. Dreamweaver ersetzt jedes Vorkommen der hervorgehobenen Zeichenfolge durch den in Parametermarkierungen eingeschlossenen Parameternamen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 642
Dynamische Seiten erstellen
Dreamweaver verwendet die in Parametermarkierungen eingeschlossenen Zeichenfolgen zur Beschriftung der Steuerelemente in dem von ihm erstellten Dialogfeld (siehe nachfolgendes Verfahren). Im Beispiel oben erstellt Dreamweaver ein Dialogfeld mit folgender Beschriftung:
Hinweis: Parameternamen im Code von Serververhalten drfen keine Leerzeichen enthalten. Deshalb knnen auch die Beschriftungen des Dialogfelds keine Leerzeichen enthalten. Wenn Sie Leerzeichen in die Beschriftung einfgen mchten, knnen Sie den erzeugten HTML-Code bearbeiten.
klicken dann auf den nach oben bzw. nach unten gerichteten Pfeil.
3 Um das Steuerelement eines Parameters zu ndern, whlen Sie zuerst den Parameter und dann in der Spalte
Dreamweaver erzeugt ein Dialogfeld mit einem beschrifteten Steuerelement fr jeden von Ihnen definierten Parameter, den der Autor der Seite angegeben muss.
Dialogfeld anzeigen
Klicken Sie im Bedienfeld Serververhalten (Fenster > Serververhalten) auf die Schaltflche mit dem
Pluszeichen (+) und whlen Sie dann im Popupmen das benutzerdefinierte Serververhalten aus.
Pluszeichen (+) und whlen Sie im Popupmen die Option Serververhalten bearbeiten.
2 Whlen Sie das Serververhalten in der Liste aus und klicken Sie auf ffnen. 3 Klicken Sie auf Weiter.
In dem nun eingeblendeten Dialogfeld werden alle vom Autor der Webseite bereitzustellenden Parameter, die Sie im Code definiert haben, aufgelistet.
4 Um die Reihenfolge der im Dialogfeld angezeigten Steuerelemente zu ndern, whlen Sie einen Parameter aus und
klicken dann auf den nach oben bzw. nach unten gerichteten Pfeil.
5 Um das Steuerelement eines Parameters zu ndern, whlen Sie zuerst den Parameter und dann in der Spalte
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 643
Dynamische Seiten erstellen
Verwandte Themen
Serververhalten-Erstellung verwenden auf Seite 634 Codeblcke positionieren auf Seite 637
Pluszeichen (+), whlen Sie Neues Serververhalten und erstellen Sie eine Kopie des alten Serververhaltens.
Pluszeichen (+) und whlen Sie im Popupmen die Option Serververhalten bearbeiten. Im Dialogfeld Serververhalten bearbeiten werden alle Verhalten fr die aktuelle Servertechnologie angezeigt.
2 Whlen Sie das Serververhalten aus und klicken Sie auf Bearbeiten. 3 Whlen Sie den entsprechenden Codeblock aus und bearbeiten Sie dann den Code, die Parametermarkierungen
oder die Position des Codeblocks, der bzw. die in die Seiten eingefgt werden soll(en).
4 Wenn der modifizierte Code keine Parameter vom Autor der Webseite enthlt, klicken Sie auf OK.
Dreamweaver erstellt das Serververhalten ohne Dialogfeld neu. Das neue Serververhalten wird im PlusPopupmen (+) des Bedienfelds Serververhalten angezeigt.
5 Wenn der modifizierte Code Parameter vom Autor der Webseite enthlt, klicken Sie auf Weiter.
Dreamweaver fragt Sie, ob Sie ein neues Dialogfeld erstellen und das vorhandene Dialogfeld berschreiben mchten. Nehmen Sie die gewnschten nderungen vor und klicken Sie auf OK. Dreamweaver speichert alle nderungen in der EDML-Datei des Serververhaltens.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 644
Dynamische Seiten erstellen
knnen. Versuchen Sie, alle mglichen Flle abzudecken. Zum Beispiel: Was geschieht, wenn die Anforderung eines Parameters nicht erfolgreich ist? Was geschieht, wenn von einer Abfrage keine Datenstze zurckgegeben werden?
Eindeutige Namen Eindeutige Namen tragen dazu bei, dass der Programmcode leicht zu identifizieren ist und keine
Konflikte mit vorhandenem Code auftreten. Wenn Ihre Seite beispielsweise eine Funktion mit dem Namen
hideLayer() und eine globale Variable mit dem Namen ERROR_STRING enthlt und das Serververhalten Code mit
denselben Namen einfgt, knnen Konflikte zwischen Serververhalten und bereits vorhandenem Code auftreten.
Programmcode-Prfixe Sie ermglichen es, eigene Laufzeitfunktionen und globale Variablen auf einer Seite leicht
wiederzuerkennen. Sie knnen beispielsweise Ihre Initialen verwenden. Verwenden Sie nicht das Prfix MM_, da es zur Verwendung in Dreamweaver reserviert ist. Alle Funktionen und globalen Variablen von Dreamweaver beginnen mit dem Prfix MM_, um Konflikte mit benutzerdefiniertem Code zu vermeiden.
var MM_ERROR_STRING = "..."; function MM_hideLayer() {
Gleichartige Codeblcke Vermeiden Sie gleichartige Codeblcke, damit Ihr Code dem Programmcode in anderen
Blcken nicht zu stark hnelt. Wenn ein Codeblock zu stark mit einem anderen Codeblock auf derselben Seite bereinstimmt, kann der erste Codeblock vom Bedienfeld Serververhalten flschlicherweise fr eine Instanz des zweiten Codeblocks (oder umgekehrt) gehalten werden. Eine einfache Lsung fr dieses Problem besteht darin, einem Codeblock einen Kommentar hinzuzufgen, um ihn eindeutig zu machen.
Verwandte Themen
Benutzerdefinierte Serververhalten auf Seite 633 Arbeitsablauf fr benutzerdefinierte Serververhalten auf Seite 633
Serververhalten testen
Dreamweaver Exchange empfiehlt, fr jedes von Ihnen erstellte Serververhalten die folgenden Tests durchzufhren:
Wenden Sie das Verhalten vom Bedienfeld Serververhalten aus an. Wenn das Verhalten ein Dialogfeld hat, geben
Sie in jedes Feld gltige Daten ein und klicken Sie auf OK. Stellen Sie sicher, dass beim Anwenden des Verhaltens keine Fehler auftreten. Vergewissern Sie sich, dass der Laufzeitcode fr das Serververhalten im Codeinspektor angezeigt wird.
Wenden Sie das Serververhalten erneut an und geben Sie dabei in jedes Feld des Dialogfelds ungltige Daten ein.
Lassen Sie Felder leer oder geben Sie groe oder negative Zahlen, ungltige Zeichen (beispielsweise /, ?, :, *) oder Buchstaben in numerische Felder ein. Sie knnen berprfungsroutinen zur Behandlung ungltiger Daten schreiben. (berprfungsroutinen mssen manuell programmiert werden, was jedoch ber den Rahmen dieses Handbuchs hinausgeht.) Nachdem Sie das Serververhalten erfolgreich auf die Seite angewandt haben, berprfen Sie Folgendes:
Vergewissern Sie sich im Bedienfeld Serververhalten, dass der Name des Serververhaltens in der Liste der
Verhalten steht, die der Seite hinzugefgt wurden.
Vergewissern Sie sich, dass Symbole fr serverseitige Skripts auf der Seite angezeigt werden (falls zutreffend). Die
generischen Symbole fr serverseitige Skripts sind goldene Schilde. Um die Symbole einzublenden, aktivieren Sie die Option Unsichtbare Elemente (Ansicht > Visuelle Hilfsmittel > Unsichtbare Elemente).
Vergewissern Sie sich in der Codeansicht (Ansicht > Code), dass kein ungltiger Code erzeugt wird.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 645
Dynamische Seiten erstellen
Wenn Ihr Serververhalten Code in das Dokument einfgt, um eine Verbindung mit einer Datenbank herzustellen, sollten Sie auerdem eine Testdatenbank erstellen, um den in das Dokument eingefgten Code zu testen. berprfen Sie die Verbindung, indem Sie Abfragen erstellen, die unterschiedliche Gruppen von Daten und unterschiedlich groe Datengruppen zurckgeben. bertragen Sie zum Schluss die Seite an den Server und ffnen Sie sie in einem Browser. Sehen Sie sich den HTMLQuellcode der Seite an und stellen Sie sicher, dass von den serverseitigen Skripts kein ungltiger HTML-Code generiert wurde.
ENTWURF
Letzte Aktualisierung 19.3.2010
646
Masterseite
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 647
Anwendungen visuell entwickeln
Detailseite
Sie knnen Master- und Detailseiten erstellen, indem Sie ein Datenobjekt zum Erstellen einer Master- und einer Detailseite in einem Durchgang einfgen oder indem Sie individualisierte Master- und Detailseiten mithilfe von Serververhalten erstellen. Wenn Sie Master- und Detailseiten via Serververhalten erstellen, erstellen Sie zunchst eine Masterseite, in der die Datenstze aufgelistet werden, und fgen Sie dann Hyperlinks zu den Detailseiten ein.
Verwandte Themen
Such- und Ergebnisseiten auf Seite 654
Masterseiten erstellen
Bevor Sie beginnen, mssen Sie eine Datenbankverbindung fr Ihre Site definieren.
1 Um eine leere Seite zu erstellen, whlen Sie Datei > Neu > Leere Seite aus. Whlen Sie dann einen Seitentyp
aus und klicken Sie auf Erstellen. Diese Seite wird als Masterseite verwendet.
2 Definieren Sie eine Datensatzgruppe.
Klicken Sie im Bedienfeld Bindungen (Fenster > Bindungen) auf die Schaltflche mit dem Pluszeichen (+). Whlen Sie dann die Option Datensatzgruppe und anschlieend die gewnschten Optionen aus. Wenn Sie eine eigene SQL-Anweisung eingeben mchten, klicken Sie auf Erweitert. Sorgen Sie dafr, dass der Datensatz alle Tabellenspalten enthlt, die Sie fr die Masterseite bentigen. Der Datensatz muss auch die Datenspalte mit dem eindeutigen Schlssel fr den jeweiligen Datensatz enthalten, also die DatensatzID-Spalte. Im folgenden Beispiel enthlt die Spalte CODE Daten, die jeden Datensatz eindeutig kennzeichnen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 648
Anwendungen visuell entwickeln
In der Regel werden mit der Datensatzgruppe auf der Masterseite nur einige Spalten aus einer Datenbanktabelle extrahiert, whrend mit der Datensatzgruppe auf der Detailseite aus der gleichen Tabelle weitere Spalten extrahiert werden, um die zustzlichen Detailinformationen bereitzustellen. Die Datensatzgruppe kann vom Benutzer zur Laufzeit definiert werden. Weitere Informationen finden Sie unter Such- und Ergebnisseiten erstellen auf Seite 654.
3 Fgen Sie eine dynamische Tabelle ein, um die Datenstze anzuzeigen.
Setzen Sie die Einfgemarke auf der Seite an die Stelle, an der die dynamische Tabelle erscheinen soll. Whlen Sie Einfgen > Datenobjekte > Dynamische Daten > Dynamische Tabelle, nehmen Sie die gewnschten Einstellungen vor und klicken Sie auf OK. Wenn Sie die Datensatz-IDs den Benutzern nicht offen legen mchten, knnen Sie die betreffende Spalte aus der dynamischen Tabelle lschen. Klicken Sie auf die Seite, um den Fokus auf die Seite zu legen. Verschieben Sie den Cursor an den oberen Spaltenrand in der dynamischen Tabelle, bis die Spaltenzellen rot umrandet dargestellt werden, und klicken Sie dann, um die Tabellenspalte auszuwhlen. Drcken Sie die Entf-Taste, um die Spalte aus der Tabelle zu lschen.
Verwandte Themen
Datensatzgruppen ohne manuelle SQL-Eingabe definieren auf Seite 599 Erweiterte Datensatzgruppen durch manuelle SQL-Eingabe definieren auf Seite 602 Dynamische Tabellen erstellen auf Seite 627
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 649
Anwendungen visuell entwickeln
Verwandte Themen
Seiten zum Aktualisieren von Datenstzen erstellen auf Seite 664
2 Klicken Sie im Eigenschafteninspektor auf das Ordnersymbol unter dem Feld Hyperlink. 3 Klicken Sie auf Durchsuchen und whlen Sie die Detailseite aus. Die Detailseite wird im Eigenschafteninspektor
im Feld Hyperlink angezeigt. In der dynamischen Tabelle wird der ausgewhlte Text als Hyperlink angezeigt. Wenn die Seite auf dem Server ausgefhrt wird, wird der Hyperlink auf den Text in jeder Tabellenzeile angewendet.
4 Whlen Sie in der dynamischen Tabelle auf der Masterseite den Hyperlink aus. 5 (ColdFusion) Fgen Sie im Eigenschafteninspektor im Feld Hyperlink die folgende Zeichenfolge am Ende der
URL ein:
?recordID=#recordsetName.fieldName#
Das Fragezeichen zeigt dem Server an, dass ein oder mehrere URL-Parameter folgen. Der Ausdruck recordID ist der Name des URL-Parameters. (Sie knnen einen beliebigen Namen whlen.) Schreiben Sie sich den Namen des URLParameters auf. Sie bentigen ihn spter fr die Detailseite. Der Ausdruck nach dem Gleichheitszeichen ist der Wert des Parameters. In diesem Fall wird der Wert durch einen ColdFusion-Ausdruck generiert, der eine Datensatz-ID aus der Datensatzgruppe zurckgibt. Fr jede Zeile in der dynamischen Tabelle wird eine andere ID generiert. Ersetzen Sie im ColdFusion-Ausdruck recordsetName durch den Namen Ihrer Datensatzgruppe und fieldName durch den Namen des Felds in der Datensatzgruppe, das den jeweiligen Datensatz eindeutig kennzeichnet. Normalerweise besteht das Feld aus einer Datensatz-ID. Im folgenden Beispiel besteht das Feld aus eindeutigen Standortcodes.
locationDetail.cfm?recordID=#rsLocations.CODE#
Wenn die Seite ausgefhrt wird, werden die Werte des Datensatzgruppenfelds CODE in die entsprechenden Zeilen der dynamischen Tabelle eingefgt. Wenn zum Beispiel ein Mietobjekt im australischen Canberra den Code CBR besitzt, wird in der dynamischen Tabelle in der Zeile Canberra die folgende URL verwendet:
locationDetail.cfm?recordID=CBR
6 (PHP) Fgen Sie im Eigenschafteninspektor im Feld Hyperlink die folgende Zeichenfolge am Ende der URL ein:
?recordID=<?php echo $row_recordsetName['fieldName']; ?>
Das Fragezeichen zeigt dem Server an, dass ein oder mehrere URL-Parameter folgen. Der Ausdruck recordID ist der Name des URL-Parameters. (Sie knnen einen beliebigen Namen whlen.) Schreiben Sie sich den Namen des URLParameters auf. Sie bentigen ihn spter fr die Detailseite.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 650
Anwendungen visuell entwickeln
Der Ausdruck nach dem Gleichheitszeichen ist der Wert des Parameters. In diesem Fall wird der Wert durch einen PHP-Ausdruck generiert, der eine Datensatz-ID aus der Datensatzgruppe zurckgibt. Fr jede Zeile in der dynamischen Tabelle wird eine andere ID generiert. Ersetzen Sie im PHP-Ausdruck recordsetName durch den Namen Ihrer Datensatzgruppe und fieldName durch den Namen des Felds in der Datensatzgruppe, die den jeweiligen Datensatz eindeutig kennzeichnet. Normalerweise besteht das Feld aus einer Datensatz-ID. Im folgenden Beispiel besteht das Feld aus eindeutigen Standortcodes.
locationDetail.php?recordID=<?php echo $row_rsLocations['CODE']; ?>
Wenn die Seite ausgefhrt wird, werden die Werte des Datensatzgruppenfelds CODE in die entsprechenden Zeilen der dynamischen Tabelle eingefgt. Wenn zum Beispiel ein Mietobjekt im australischen Canberra den Code CBR besitzt, wird in der dynamischen Tabelle in der Zeile Canberra die folgende URL verwendet:
locationDetail.php?recordID=CBR
Pluszeichen (+) und whlen Sie im Popupmen die Option Zu Detailseite wechseln aus.
3 Klicken Sie im Feld Detailseite auf Durchsuchen und whlen Sie die Seitendatei aus. 4 Geben Sie an, welchen Wert Sie an die Detailseite bergeben mchten, indem Sie eine Datensatzgruppe und eine
Spalte in den Popupmens Datensatzgruppe bzw. Spalte auswhlen. In der Regel ist dieser Wert spezifisch fr den Datensatz, wie z. B. die eindeutige Schlssel-ID des Datensatzes.
5 Gegebenenfalls knnen an die Detailseite vorhandene Seitenparameter bergeben werden, indem die Optionen
Ein spezieller Hyperlink umschliet den ausgewhlten Text. Wenn der Besucher auf den Hyperlink klickt, bergibt das Serververhalten Zu Detailseite wechseln einen URL-Parameter, der die Datensatz-ID fr die Detailseite enthlt. Lautet der URL-Parameter beispielsweise id und der Name der Detailseite kundendetails.asp, kann die URL wie folgt aussehen, wenn der Besucher auf den Hyperlink klickt: http://www.meinesite.com/kundendetails.asp?id=43 Mit dem ersten Teil der URL, http://www.meinesite.com/kundendetails.asp, wird die Detailseite geffnet. Der zweite Teil, ?id=43, ist der URL-Parameter. Er teilt der Detailseite mit, welcher Datensatz aufzurufen und anzuzeigen ist. Die Bezeichnung id ist der Name des URL-Parameters, und 43 ist dessen Wert. Bei diesem Beispiel enthlt der URLParameter mit dem Wert 43 die ID-Nummer des Datensatzes.
und whlen Sie im Popupmen die Option Datensatzgruppe (Abfrage) oder Datensatz (Abfrage).
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 651
Anwendungen visuell entwickeln
Das einfache Dialogfeld Datensatzgruppe bzw. Datensatz wird angezeigt. Wird stattdessen das erweiterte Dialogfeld geffnet, klicken Sie auf Einfach.
3 Benennen Sie die Datensatzgruppe und whlen Sie eine Verbindung und eine Datenquelle aus sowie die
Datenbanktabelle, ber die die Daten fr Ihre Datensatzgruppe bereitgestellt werden sollen.
4 Whlen Sie im Spaltenbereich die Tabellenspalten, die in die Datensatzgruppe bernommen werden sollen.
Die Datensatzgruppe kann identisch zur Datensatzgruppe auf der Masterseite oder anderslautend sein. In der Regel hat eine Datensatzgruppe fr die Detailseite eine grere Anzahl von Spalten, um mehr Details anzuzeigen. Wenn die Datensatzgruppen verschieden sind, muss die Datensatzgruppe auf der Detailseite mindestens eine Spalte aufweisen, die mit dem Datensatz auf der Masterseite bereinstimmt. Die gemeinsame Spalte ist in der Regel die Datensatz-ID-Spalte, sie kann aber auch das Verknpfungsfeld verbundener Tabellen sein. Um nur einige Spalten der Tabelle in die Datensatzgruppe einzubeziehen, klicken Sie auf Ausgewhlt. Whlen Sie dann die gewnschten Spalten aus, indem Sie bei gedrckter Strg-Taste (Windows) bzw. Befehlstaste (Macintosh) auf die jeweiligen Listeneintrge klicken.
5 Fllen Sie den Abschnitt Filter aus, um den Datensatz zu suchen und anzuzeigen, der in dem von der Masterseite
Whlen Sie im ersten Popupmen im Bereich Filter die Spalte in der Datensatzgruppe aus, deren Werte mit dem
Wert des von der Masterseite bermittelten URL-Parameters bereinstimmen. Wenn der URL-Parameter beispielsweise eine Datensatz-ID-Nummer bergibt, whlen Sie die Spalte aus, die Datensatz-ID-Nummern enthlt. Im vorangegangenen Beispiel enthlt die Spalte CODE der Datensatzgruppe die Werte, die mit dem von der Masterseite bergebenen URL-Parameter bereinstimmen.
Whlen Sie im Popupmen neben dem ersten Men das Gleichheitszeichen aus (es msste bereits ausgewhlt
sein).
Whlen Sie im dritten Popupmen die Option URL-Parameter aus. Die Masterseite bergibt Informationen
mittels eines URL-Parameters an die Detailseite.
Geben Sie im vierten Textfeld den Namen des URL-Parameters ein, der von der Masterseite bermittelt wird.
6 Klicken Sie auf OK. Die Datensatzgruppe wird im Bedienfeld Bindungen angezeigt. 7 Verbinden Sie die Spalten der Datensatzgruppe mit der Detailseite, indem Sie die Spalten im Bedienfeld
Bindungen (Fenster > Bindungen) auswhlen und auf die Seite ziehen. Nachdem Sie die Masterseite und die Detailseiten auf den Server geladen haben, knnen Sie die Masterseite mit einem Browser ffnen. Wenn Sie auf einen Detail-Hyperlink auf der Masterseite klicken, wird die Detailseite geffnet, die genauere Informationen zum ausgewhlten Datensatz enthlt.
Verwandte Themen
Testserver einrichten auf Seite 49
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 652
Anwendungen visuell entwickeln
Eine Datensatz-ID, enthalten in einem URL-Parameter, der von einer anderen Seite an die aktuelle Seite
bermittelt wird. Auf der anderen Seite knnen Sie URL-Parameter mit HTML-Hyperlinks oder einem HTMLFormular erstellen. Weitere Informationen finden Sie unter Benutzerinformationen sammeln auf Seite 699.
Eine fr die aktuelle Seite definierte Datensatzgruppe. Das Serververhalten extrahiert die Datensatzdetails aus
dieser Datensatzgruppe. Anweisungen hierzu finden Sie unter Datensatzgruppen ohne manuelle SQL-Eingabe definieren auf Seite 599 oder Erweiterte Datensatzgruppen durch manuelle SQL-Eingabe definieren auf Seite 602.
Datensatzgruppen-Spalten, die an die Seite gebunden sind. Der betreffende Datensatz muss auf der Seite angezeigt
werden. Weitere Informationen finden Sie unter Texte dynamisch gestalten auf Seite 615.
2 Fgen Sie das Serververhalten zum Suchen des im URL-Parameter angegebenen Datensatzes hinzu. Klicken Sie
dazu im Bedienfeld Serververhalten (Fenster > Serververhalten) auf die Schaltflche mit dem Pluszeichen (+) und whlen Sie dann Seitenerstellung fr Datensatzgruppe > Zu bestimmtem Datensatz verschieben aus.
3 Whlen Sie im Popupmen Verschieben zu Datensatz in die Datensatzgruppe aus, die Sie fr die Seite festgelegt
haben.
4 Whlen Sie im Popupmen In Spalte die Spalte aus, die den von der anderen Seite bermittelten Wert enthlt.
Wenn die andere Seite beispielsweise eine Datensatz-ID-Nummer bermittelt, whlen Sie die Spalte aus, die Datensatz-IDs enthlt.
5 Geben Sie im Feld Entspricht URL-Parameter den Namen des URL-Parameters ein, der von der anderen Seite
bertragen wird. Lautet die von der anderen Seite zum ffnen der Detailseite verwendete URL beispielsweise id=43, geben Sie im Feld Entspricht URL-Parameter den Namen id ein.
6 Klicken Sie auf OK.
Wird die Seite das nchste Mal von einem Browser angefordert, liest das Serververhalten die Datensatz-ID aus dem von der anderen Seite bergebenen URL-Parameter und wechselt zu dem angegebenen Datensatz in der Datensatzgruppe.
der Liste der Seitentypen eine dynamische Seite aus und klicken Sie dann auf Erstellen. Diese Seite wird als Masterseite verwendet.
2 Definieren Sie einen Datensatz fr die Seite.
Vergewissern Sie sich, dass die Datensatzgruppe alle fr die Master- und die Detailseiten bentigten Spalten enthlt. In der Regel extrahiert die Datensatzgruppe auf der Masterseite nur einige Spalten aus einer Datenbanktabelle, whrend die Datensatzgruppe auf der Detailseite aus der gleichen Tabelle weitere Spalten extrahiert, um die zustzlichen Detailinformationen bereitzustellen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 653
Anwendungen visuell entwickeln
3 ffnen Sie die Masterseite in der Entwurfsansicht und whlen Sie Einfgen > Datenobjekte > Master-
Detailseitensatz.
4 Vergewissern Sie sich, dass im Popupmen Datensatzgruppe die Datensatzgruppe ausgewhlt ist, die die auf der
angezeigt werden sollen. Standardmig werden alle Spalten in der Datensatzgruppe ausgewhlt. Enthlt Ihre Datensatzgruppe eine Spalte fr einen eindeutigen Schlssel, z. B. recordID, whlen Sie diese aus und klicken Sie auf die Schaltflche mit dem Minuszeichen (), damit sie auf der Seite nicht angezeigt wird.
6 Um die Reihenfolge zu ndern, in der die Spalten auf der Masterseite angezeigt werden, whlen Sie eine Spalte in
der Liste aus und klicken Sie auf den nach oben bzw. nach unten gerichteten Pfeil. Auf der Masterseite werden die Spalten der Datensatzgruppe horizontal in einer Tabelle angeordnet. Durch Klicken auf den nach oben gerichteten Pfeil wird die Spalte nach links verschoben, durch Klicken auf den nach unten gerichteten Pfeil nach rechts.
7 Whlen Sie im Popupmen Verknpfen mit Detail von die Spalte in der Datensatzgruppe aus, deren angezeigter
Wert auch als Hyperlink auf die Detailseite dient. Soll beispielsweise jeder Produktname auf der Masterseite einen Hyperlink zur Detailseite haben, whlen Sie die Spalte der Datensatzgruppe aus, die die Produktnamen enthlt.
8 Whlen Sie im Popupmen Eindeutigen Schlssel bergeben die Spalte in der Datensatzgruppe aus, deren Werte
die Datenstze kennzeichnen. In der Regel enthlt die ausgewhlte Spalte die Datensatz-ID. Dieser Wert wird an die Detailseite bermittelt, um den vom Besucher ausgewhlten Datensatz zu kennzeichnen.
9 Deaktivieren Sie die Option Numerisch, wenn die Spalte fr den eindeutigen Schlssel nicht numerisch ist.
Hinweis: Diese Option ist standardmig aktiviert, sie wird jedoch nicht fr alle Servermodelle angezeigt.
10 Geben Sie an, wie viele Datenstze auf der Masterseite angezeigt werden sollen. 11 Klicken Sie im Feld Name der Detailseite auf Durchsuchen und whlen Sie die von Ihnen erstellte
Detailseitendatei aus, oder geben Sie einen Namen ein und lassen Sie durch das Datenobjekt eine Seitendatei erstellen.
12 Whlen Sie im Bereich Felder in der Detailseite die auf der Detailseite anzuzeigenden Spalten aus.
Standardmig werden alle Spalten in der Datensatzgruppe der Masterseite ausgewhlt. Enthlt die Datensatzgruppe eine Spalte fr einen eindeutigen Schlssel, z. B. recordID, whlen Sie diese aus und klicken Sie auf die Schaltflche mit dem Minuszeichen (), damit sie auf der Detailseite nicht angezeigt wird.
13 Um die Reihenfolge zu ndern, in der die Spalten auf der Detailseite angezeigt werden, whlen Sie eine Spalte in
der Liste aus und klicken auf den nach oben bzw. nach unten gerichteten Pfeil. Auf der Detailseite werden die Spalten der Datensatzgruppe vertikal in einer Tabelle angeordnet. Durch Klicken auf den nach oben gerichteten Pfeil wird die Spalte nach oben verschoben, durch Klicken auf den nach unten gerichteten Pfeil nach unten.
14 Klicken Sie auf OK.
Das Datenobjekt erstellt eine Detailseite (soweit Sie nicht bereits selbst eine erstellt haben) und fgt der Master- und der Detailseite dynamische Inhalte und Serververhalten hinzu.
15 Passen Sie das Layout der Master- und Detailseiten Ihren Anforderungen entsprechend an.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 654
Anwendungen visuell entwickeln
Mit den Seitenentwurfswerkzeugen von Dreamweaver knnen Sie das Layout der einzelnen Seiten beliebig bearbeiten. Sie knnen auch die Serververhalten bearbeiten, indem Sie darauf im Bedienfeld Serververhalten doppelklicken. Nachdem Sie die Master- und Detailseiten mit dem Datenobjekt erstellt haben, bearbeiten Sie die verschiedenen Bausteine, die das Datenobjekt in die Seiten einfgt, mit dem Bedienfeld Serververhalten (Fenster > Serververhalten).
Verwandte Themen
Dynamischen Inhalt bearbeiten auf Seite 619 Quellen fr dynamischen Inhalt definieren auf Seite 599
Lesen der ber die Suchseite bermittelten Suchparameter Herstellen der Verbindung mit der Datenbank und Suchen der Datenstze Erstellen einer Datensatzgruppe aus den gefundenen Datenstzen Anzeigen des Inhalts der Datensatzgruppe
Gegebenenfalls knnen Sie auch noch eine Detailseite hinzufgen. Eine Detailseite liefert dem Besucher zustzliche Informationen zu einem bestimmten, auf der Ergebnisseite aufgefhrten Datensatz. Wenn Sie nur einen Suchparameter verwenden, knnen Sie in Dreamweaver Ihre Webanwendung mit Suchfunktionen ausstatten, ohne dass Sie sich mit SQL-Abfragen und Variablen befassen mssen. Sie entwerfen dann einfach Ihre Seiten und fgen einige Dialogfelder hinzu. Wenn Sie mehr als einen Suchparameter verwenden, mssen Sie eine SQL-Anweisung schreiben und dazu mehrere Variablen definieren. Dreamweaver fgt die SQL-Abfrage in Ihre Seite ein. Wenn die Seite auf dem Server ausgefhrt wird, wird jeder Datensatz in der Datenbanktabelle berprft. Erfllt das angegebene Feld in einem Datensatz die SQLAbfragebedingung, wird dieser Datensatz in die Datensatzgruppe einbezogen. Die SQL-Abfrage erstellt somit eine Datensatzgruppe, die nur die Suchergebnisse enthlt. Angenommen, Ihre Auendienstmitarbeiter haben Informationen darber, bei welchen Kunden in einer bestimmten Region das Einkommen ein Mindestniveau berschreitet. In einem Formular auf einer Suchseite kann der Mitarbeiter eine geographische Region und ein Mindesteinkommen angeben. Anschlieend kann er durch Klicken auf die Schaltflche Senden beide Werte an den Server bermitteln. Auf dem Server werden die Werte in die SQL-Anweisung der Ergebnisseite bertragen. Diese Anweisung erstellt anschlieend eine Datensatzgruppe, die nur die Kunden aus der angegebenen Region enthlt, deren Einkommen ber dem angegebenen Niveau liegt.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 655
Anwendungen visuell entwickeln
Verwandte Themen
Quellen fr dynamischen Inhalt definieren auf Seite 599 Such- und Ergebnisseiten erstellen auf Seite 654
Suchseiten erstellen
Im Web enthlt eine Suchseite in der Regel Formularfelder, in die der Besucher Suchparameter eingibt. Ihre Suchseite muss mindestens ber ein HTML-Formular mit einer Schaltflche zum Senden verfgen. Um ein HTML-Formular in eine Suchseite einzubinden, fhren Sie die folgenden Arbeitsschritte aus:
1 ffnen Sie die Suchseite oder eine neue Seite und whlen Sie Einfgen > Formular > Formular.
Daraufhin wird ein leeres Formular auf der Seite erstellt. Eventuell mssen Sie die unsichtbaren Elemente aktivieren (Ansicht > Visuelle Hilfsmittel > Unsichtbare Elemente), damit die Formularrnder durch schmale rote Linien angezeigt werden.
2 Whlen Sie im Men Einfgen den Befehl Formular aus, um Formularobjekte hinzuzufgen, ber die die
Besucher ihre Suchparameter eingeben knnen. Formularobjekte sind Textfelder, Mens, Optionen und Optionsschalter. Sie knnen beliebig viele Formularobjekte hinzufgen, um dem Besucher bei der Angabe der Suchkriterien eine entsprechende Auswahl zu bieten. Bedenken Sie jedoch, dass mit zunehmender Anzahl der Suchparameter auf der Suchseite auch die Komplexitt der SQL-Anweisung steigt.
3 Fgen Sie dem Formular eine Schaltflche zum Senden hinzu (Einfgen > Formular > Schaltflche). 4 Optional: ndern Sie die Beschriftung der Schaltflche zum Senden. Whlen Sie dazu die Schaltflche aus, ffnen
Sie den Eigenschafteninspektor (Fenster > Eigenschaften) und geben Sie im Wertfeld Beschriftung einen neuen Wert ein. Anschlieend legen Sie fr das Formular fest, wohin die Suchparameter gesendet werden, wenn der Besucher auf die soeben von Ihnen erstellte Schaltflche klickt.
5 Whlen Sie das Formular aus, indem Sie im Tag-Selektor am unteren Rand des Dokumentfensters das Tag <form>
6 Geben Sie im Eigenschafteninspektor des Formulars im Feld Aktion den Dateinamen der Ergebnisseite ein, die
Bei der Methode GET werden die Formulardaten gesendet, indem sie als Zeichenfolge an die URL angehngt
werden. Da URLs maximal aus 8192 Zeichen bestehen knnen, knnen Sie die Methode GET nur fr kurze Formulare verwenden.
Bei der Methode POST werden die Formulardaten als Text einer E-Mail gesendet. Bei der Methode Standard wird die Standardmethode des jeweiligen Browsers verwendet (blicherweise GET).
Die Erstellung der Suchseite ist damit abgeschlossen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 656
Anwendungen visuell entwickeln
Verwandte Themen
Such- und Ergebnisseiten auf Seite 654 Webformulare erstellen auf Seite 702
Verwandte Themen
Such- und Ergebnisseiten auf Seite 654 Suchseiten erstellen auf Seite 655 Detailseiten fr die Ergebnisseiten erstellen auf Seite 659
Wenn Sie noch nicht ber eine Ergebnisseite verfgen, erstellen Sie eine leere dynamische Seite (Datei > Neu > Leere Seite).
2 Erstellen Sie eine neue Datensatzgruppe, indem Sie das Bedienfeld Bindungen ffnen (Fenster > Bindungen),
auf die Schaltflche mit dem Pluszeichen (+) klicken und im Popupmen die Option Datensatzgruppe whlen.
3 Vergewissern Sie sich, dass das einfache Dialogfeld Datensatzgruppe angezeigt wird.
Wird stattdessen das erweiterte Dialogfeld angezeigt, knnen Sie zum einfachen Dialogfeld wechseln, indem Sie auf die Schaltflche Einfach klicken.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 657
Anwendungen visuell entwickeln
4 Geben Sie einen Namen fr die Datensatzgruppe ein und whlen Sie eine Verbindung aus.
Die Verbindung muss auf die Datenbank verweisen, die die vom Besucher zu durchsuchenden Daten enthlt.
5 Whlen Sie im Popupmen Tabelle die Tabelle aus, die in der Datenbank durchsucht werden soll.
Hinweis: Bei einer Suche mit einem Parameter knnen Sie nur in einer einzigen Tabelle nach Datenstzen suchen. Um mit einer Suche mehrere Tabellen zu durchsuchen, mssen Sie im erweiterten Dialogfeld Datensatzgruppe eine SQLAbfrage definieren.
6 Um nur einige Spalten der Tabelle in die Datensatzgruppe einzubeziehen, klicken Sie auf Ausgewhlt. Whlen
Sie dann die gewnschten Spalten aus, indem Sie bei gedrckter Strg-Taste (Windows) bzw. Befehlstaste (Macintosh) auf die jeweiligen Listeneintrge klicken. Sie sollten nur die Spalten den mit Informationen auswhlen, die Sie auf der Ergebnisseite anzeigen mchten. Lassen Sie das Dialogfeld Datensatzgruppe geffnet. Sie bentigen das Dialogfeld noch, um die von der Suchseite gesendeten Parameter abzurufen und einen Datensatzgruppenfilter zu erstellen, mit dem Datenstze, die den Parametern nicht entsprechen, ausgeschlossen werden.
Datensatzgruppenfilter erstellen
1 Whlen Sie im ersten Popupmen im Bereich Filter eine Spalte in der Datenbanktabelle aus, in der nach einer
bereinstimmung gesucht werden soll. Ist der von der Suchseite gesendete Wert beispielsweise ein Ortsname, whlen Sie in Ihrer Tabelle die Spalte mit den Ortsnamen aus.
2 Whlen Sie im Popupmen neben dem ersten Men das Gleichheitszeichen aus (es sollte die Standardoption sein). 3 Whlen Sie im dritten Popupmen den Befehl Formularvariable aus, wenn das Formular auf der Suchseite die
Methode POST verwendet, bzw. URL-Parameter, wenn es die Methode GET verwendet. Die Seite bergibt die Daten entweder ber eine Formularvariable oder einen URL-Parameter an die Ergebnisseite.
4 Geben Sie im vierten Feld den Namen des Formularobjekts ein, das die Suchparameter auf der Suchseite
bernimmt. Der Name des Objekts dient gleichzeitig als Name der Formularvariablen bzw. des URL-Parameters. Sie erhalten den Namen, indem Sie auf die Suchseite umschalten und im Formular auf das Formularobjekt klicken, um es auszuwhlen. berprfen Sie den Namen des Objekts im Eigenschafteninspektor. Angenommen, Sie mchten eine Datensatzgruppe erstellen, die nur Reiseangebote fr ein bestimmtes Land enthlt, und Ihre Tabelle enthlt eine Spalte mit dem Namen TRIPLOCATION (Reiseziel). Auerdem sei angenommen, dass das HTML-Formular auf der Suchseite die Methode GET verwendet, ein Menobjekt mit dem Namen Location (Ziel) enthlt und eine Lnderliste anzeigt. Nachfolgend eine Abbildung der Filtereinstellungen in diesem Beispiel:
5 Optional: Klicken Sie auf Testen, geben Sie einen Testwert ein und klicken Sie auf OK, um eine Verbindung
zur Datenbank herzustellen und ein Exemplar der Datensatzgruppe zu erstellen. Der Testwert simuliert den Wert, der andernfalls von der Suchseite zurckgegeben worden wre. Klicken Sie auf OK, um die Testdatensatzgruppe zu schlieen.
6 Wenn Sie mit der Datensatzgruppe zufrieden sind, klicken Sie auf OK.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 658
Anwendungen visuell entwickeln
Auf der Seite wird ein Serverskript eingefgt, das bei der Ausfhrung auf dem Server jeden Datensatz in der Datenbanktabelle berprft. Erfllt das angegebene Feld in einem Datensatz die Filterbedingung, wird dieser Datensatz in die Datensatzgruppe einbezogen. Das Skript erstellt also eine Datensatzgruppe, die nur die Suchergebnisse enthlt. Der nchste Schritt ist das Anzeigen der Datensatzgruppe auf der Ergebnisseite. Weitere Informationen finden Sie unter Suchergebnisse anzeigen auf Seite 659.
das Bedienfeld Bindungen ffnen (Fenster > Bindungen), auf die Schaltflche mit dem Pluszeichen (+) klicken und im Popupmen die Option Datensatzgruppe whlen.
2 Vergewissern Sie sich, dass das erweiterte Dialogfeld Datensatzgruppe angezeigt wird.
Das erweiterte Dialogfeld enthlt einen Textbereich zur Eingabe von SQL-Anweisungen. Wird stattdessen das einfache Dialogfeld angezeigt, knnen Sie zum erweiterten Dialogfeld wechseln, indem Sie auf die Schaltflche Erweitert klicken.
3 Geben Sie einen Namen fr die Datensatzgruppe ein und whlen Sie eine Verbindung aus.
Die Verbindung muss auf die Datenbank verweisen, die die vom Besucher zu durchsuchenden Daten enthlt.
4 Geben Sie im SQL-Textbereich eine SELECT-Anweisung ein.
Vergewissern Sie sich, dass die Anweisung eine WHERE-Klausel mit Variablen zur Aufnahme der Suchparameter enthlt. Im folgenden Beispiel lauten die Variablennamen varLastName und varDept:
SELECT EMPLOYEEID, FIRSTNAME, LASTNAME, DEPARTMENT, EXTENSION FROM EMPLOYEE WHERE LASTNAME LIKE 'varLastName' AND DEPARTMENT LIKE 'varDept'
Um die Eingabe zu vereinfachen, knnen Sie die Struktur mit den Datenbankelementen im unteren Bereich des erweiterten Dialogfelds Datensatz verwenden. Eine Anleitung hierzu finden Sie unter Erweiterte Datensatzgruppen durch manuelle SQL-Eingabe definieren auf Seite 602. Weitere Informationen zur SQL-Syntax finden Sie unter www.adobe.com/go/learn_dw_sqlprimer_de.
5 Weisen Sie den SQL-Variablen die Werte der Suchparameter zu, indem Sie im Bereich Variablen auf die
Schaltflche mit dem Pluszeichen (+) klicken und den Namen der Variablen, den Standardwert (den Wert, den eine Variable annehmen soll, wenn kein Laufzeitwert zurckgegeben wird) und den Laufzeitwert (normalerweise ein Serverobjekt, das einen Wert enthlt, der von einem Browser gesendet wird, z. B. eine Anforderungsvariable) eingeben.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 659
Anwendungen visuell entwickeln
Im folgenden ASP-Beispiel verwendet das HTML-Formular auf der Suchseite die Methode GET und enthlt ein Textfeld mit der Bezeichnung LastName sowie ein weiteres mit der Bezeichnung Department:
In ColdFusion lauten die entsprechenden Laufzeitwerte #LastName# und #Department#. In PHP lauten die entsprechenden Laufzeitwerte $_REQUEST["LastName"] und $_REQUEST["Department"].
6 Optional: Klicken Sie auf die Schaltflche Testen, um eine Instanz der Datensatzgruppe unter Verwendung der
Standard-Variablenwerte zu erstellen. Der Testwert simuliert den Wert, der andernfalls von der Suchseite zurckgegeben worden wre. Klicken Sie auf OK, um die Testdatensatzgruppe zu schlieen.
7 Wenn Sie mit der Datensatzgruppe zufrieden sind, klicken Sie auf OK.
Die SQL-Abfrage wird in Ihre Seite eingefgt. Der nchste Schritt ist das Anzeigen der Datensatzgruppe auf der Ergebnisseite.
Suchergebnisse anzeigen
Nach dem Erstellen einer Datensatzgruppe zur Aufnahme der Suchergebnisse sollten Sie die Informationen auf der Ergebnisseite anzeigen. Das Anzeigen der Datenstze kann durch einfaches Ziehen der einzelnen Spalten aus dem Bedienfeld Bindungen auf die Ergebnisseite erfolgen. Sie knnen Hyperlinks zur Navigation hinzufgen, mit denen Sie in beiden Richtungen durch die Datensatzgruppe blttern knnen, oder Sie knnen einen wiederholten Bereich erstellen, um mehr als einen Datensatz auf der Seite anzuzeigen. Auerdem knnen Sie Hyperlinks in eine Detailseite hinzufgen. Informationen zu anderen Anzeigemethoden fr dynamischen Inhalt auf einer Seite finden Sie unter DatenbankDatenstze anzeigen auf Seite 621.
1 Setzen Sie die Einfgemarke an die gewnschte Position der dynamischen Tabelle auf der Ergebnisseite und whlen
Sie Einfgen > Datenobjekte > Dynamische Daten > Dynamische Tabelle.
2 Fllen Sie das Dialogfeld Dynamische Tabelle aus und whlen Sie den Datensatz aus, den Sie fr das Suchergebnis
festgelegt haben.
3 Klicken Sie auf OK. Es wird eine dynamische Tabelle in die Ergebnisseite eingefgt, in der die Suchergebnisse
angezeigt werden.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 660
Anwendungen visuell entwickeln
Verwandte Themen
Master- und Detailseiten in einem Durchgang erstellen auf Seite 652 Suchseiten erstellen auf Seite 655 Einfache Suchseiten erstellen auf Seite 656
entsprechenden Seite aus. Wenn die aktuelle Seite Daten an sich selbst sendet, geben Sie den Dateinamen der aktuellen Seite ein.
2 Stammen die zu bergebenden Parameter direkt aus einem HTML-Formular, das die Methode GET verwendet,
oder sind sie in der URL der Seite aufgefhrt, whlen Sie die Option URL-Parameter.
3 Stammen die zu bergebenden Parameter direkt aus einem HTML-Formular, das die Methode POST verwendet,
Klickt der Besucher auf den neuen Hyperlink, bergibt die Seite die Parameter unter Verwendung einer Abfragezeichenfolge an die Seite mit den ergnzenden Themen.
Verwandte Themen
Benutzerinformationen sammeln auf Seite 699
Datensatz-Einfgeseiten erstellen
Datensatz-Einfgeseiten erstellen
Ihre Anwendung kann eine Seite enthalten, mit der Besucher neue Datenstze in eine Datenbank einfgen knnen. Ein Tutorial zum Erstellen von Datensatzeinfgeseiten finden Sie unter www.adobe.com/go/learn_dw_webapp_de. Eine Einfgeseite besteht aus zwei Bausteinen:
Einem HTML-Formular, ber das Besucher Daten eingeben knnen Einem Serververhalten Datensatz einfgen, mit dem die Datenbank aktualisiert wird
Wenn ein Benutzer in einem Formular auf die Schaltflche zum Senden klickt, fgt das Serververhalten Datenstze in eine Datenbanktabelle ein.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 661
Anwendungen visuell entwickeln
Mit dem Anwendungsobjekt Einfgeformular fr Datenstze knnen Sie diese Bausteine in einem Arbeitsschritt hinzufgen. Sie knnen jedoch auch die Formularwerkzeuge und das Bedienfeld Serververhalten von Dreamweaver verwenden, um sie separat hinzuzufgen. Hinweis: Die Einfgeseite kann jeweils nur ein Serververhalten zur Datensatzbearbeitung enthalten. Beispielsweise ist es nicht mglich, der Einfgeseite das Serververhalten Datensatz aktualisieren oder Datensatz lschen hinzuzufgen.
Verwandte Themen
Webformulare erstellen auf Seite 702
den Dreamweaver-Entwurfswerkzeugen.
2 Fgen Sie ein HTML-Formular hinzu, indem Sie die Einfgemarke an die gewnschte Position setzen und die
Option Einfgen > Formular > Formular whlen. Daraufhin wird ein leeres Formular auf der Seite erstellt. Eventuell mssen Sie die unsichtbaren Elemente aktivieren (Ansicht > Visuelle Hilfsmittel > Unsichtbare Elemente), damit die Formularrnder durch schmale rote Linien angezeigt werden.
3 Benennen Sie das HTML-Formular. Klicken Sie dazu unten im Dokumentfenster auf das Tag form, um das
Formular auszuwhlen, ffnen Sie dann den Eigenschafteninspektor (Fenster > Eigenschaften) und geben Sie den Namen im Feld Formularname ein. Es ist nicht erforderlich, die Attribute action oder method festzulegen, um das Formular anzuweisen, wie und wohin die Datensatzdaten geschickt werden sollen, wenn der Benutzer auf die Schaltflche zum Senden klickt. Diese Attribute werden vom Serververhalten Datensatz einfgen automatisch festgelegt.
4 Fgen Sie fr alle Spalten der Datenbanktabelle, in die Datenstze eingefgt werden sollen, ein Formularobjekt wie
beispielsweise ein Textfeld hinzu (Einfgen > Formular > Textfeld). Die Formularobjekte sind fr die Dateneingabe vorgesehen. Meistens werden zu diesem Zweck Textfelder verwendet, Sie knnen jedoch auch Mens, Kontrollkstchen und Optionsschalter einfgen.
5 Fgen Sie dem Formular eine Schaltflche zum Senden hinzu (Einfgen > Formular > Schaltflche).
Auf Wunsch knnen Sie die Beschriftung der Schaltflche zum Senden ndern. Whlen Sie dazu die Schaltflche aus, ffnen Sie den Eigenschafteninspektor (Fenster > Eigenschaften) und geben Sie im Feld Beschriftung einen neuen Wert ein.
Pluszeichen (+) und whlen Sie im Popupmen die Option Datensatz einfgen.
2 Whlen Sie im Popupmen Werte senden aus ein Formular aus. 3 Whlen Sie im Popupmen Datenquelle eine Verbindung zu der Datenbank aus. 4 Geben Sie Ihren Benutzernamen und Ihr Kennwort ein.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 662
Anwendungen visuell entwickeln
5 Whlen Sie im Popupmen In Tabelle einfgen die Datenbanktabelle aus, in die der Datensatz eingefgt werden soll. 6 Geben Sie eine Datenbankspalte an, in die der Datensatz eingefgt werden soll, whlen Sie im Popupmen Wert
das Formularobjekt aus, das den Datensatz einfgt und whlen Sie dann im Popupmen Senden als einen Datentyp fr das Formularobjekt aus. Beim Datentyp handelt es sich um die Datenart, die von der Spalte in der Datenbanktabelle erwartet wird (Text, numerisch, boolesche Werte). Wiederholen Sie die Prozedur fr jedes Formularobjekt im Formular.
7 Geben Sie im Textfeld Nach dem Einfgen hierher gehen die Seite an, die geffnet werden soll, nachdem der
Datensatz in die Tabelle eingefgt wurde, oder klicken Sie auf die Schaltflche Durchsuchen und whlen Sie die Datei aus.
8 Klicken Sie auf OK.
Dreamweaver fgt der Seite ein Serververhalten hinzu, mit dem Besucher Datenstze in eine Datenbanktabelle einfgen knnen, indem sie das HTML-Formular ausfllen und auf die Schaltflche zum Senden klicken.
Pluszeichen (+) und whlen Sie im Popupmen die Option Datensatz einfgen.
2 Whlen Sie im Popupmen Verbindung eine Verbindung zur Datenbank aus.
Klicken Sie auf die Schaltflche Definieren, wenn Sie eine Verbindung definieren mssen.
3 Whlen Sie im Popupmen In Tabelle einfgen die Datenbanktabelle aus, in die der Datensatz eingefgt werden soll. 4 Geben Sie im Textfeld Nach dem Einfgen hierher gehen die Seite an, die geffnet werden soll, nachdem der
Datensatz in die Tabelle eingefgt wurde, oder klicken Sie auf Durchsuchen und whlen Sie die Datei aus.
5 Whlen Sie im Popupmen Werte abrufen aus das HTML-Formular aus, das zur Eingabe der Daten verwendet
werden soll. Dreamweaver whlt automatisch das erste Formular auf Ihrer Seite aus.
6 Geben Sie eine Datenbankspalte an, in die der Datensatz eingefgt werden soll, whlen Sie im Popupmen Wert
das Formularobjekt aus, das den Datensatz einfgt, und whlen Sie dann im Popupmen Senden als einen Datentyp fr das Formularobjekt aus. Beim Datentyp handelt es sich um die Datenart, die von der Spalte in der Datenbanktabelle erwartet wird (Text, numerisch, boolesche Werte). Wiederholen Sie die Prozedur fr jedes Formularobjekt im Formular.
7 Klicken Sie auf OK.
Dreamweaver fgt der Seite ein Serververhalten hinzu, mit dem Besucher Datenstze in eine Datenbanktabelle einfgen knnen, indem sie das HTML-Formular ausfllen und auf die Schaltflche zum Senden klicken. Wenn Sie das Serververhalten bearbeiten mchten, ffnen Sie das Bedienfeld Serververhalten (Fenster > Serververhalten). Doppelklicken Sie dann auf das Verhalten Datensatz einfgen.
Pluszeichen (+) und whlen Sie im Popupmen die Option Datensatz einfgen.
2 Whlen Sie im Popupmen Werte senden aus ein Formular aus.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 663
Anwendungen visuell entwickeln
3 Whlen Sie im Popupmen Verbindung eine Verbindung zur Datenbank aus. 4 Whlen Sie im Popupmen Tabelle einfgen die Datenbanktabelle aus, in die der Datensatz eingefgt werden soll. 5 Geben Sie eine Datenbankspalte an, in die der Datensatz eingefgt werden soll, whlen Sie im Popupmen Wert
das Formularobjekt aus, das den Datensatz einfgt, und whlen Sie dann im Popupmen Senden als einen Datentyp fr das Formularobjekt aus. Beim Datentyp handelt es sich um die Datenart, die von der Spalte in der Datenbanktabelle erwartet wird (Text, numerisch, boolesche Werte). Wiederholen Sie die Prozedur fr jedes Formularobjekt im Formular.
6 Geben Sie im Textfeld Nach dem Einfgen hierher gehen die Seite an, die geffnet werden soll, nachdem der
Datensatz in die Tabelle eingefgt wurde, oder klicken Sie auf die Schaltflche Durchsuchen und whlen Sie die Datei aus.
7 Klicken Sie auf OK.
Dreamweaver fgt der Seite ein Serververhalten hinzu, mit dem Besucher Datenstze in eine Datenbanktabelle einfgen knnen, indem sie das HTML-Formular ausfllen und auf die Schaltflche zum Senden klicken.
Datensatz in die Tabelle eingefgt wurde, oder klicken Sie auf die Schaltflche Durchsuchen und whlen Sie die Datei aus.
6 Geben Sie im Bereich Formularfelder an, welche Formularobjekte in das HTML-Formular der Einfgeseite
aufgenommen werden sollen und welche Spalten in der Datenbanktabelle durch die einzelnen Formularobjekte aktualisiert werden. Standardmig erstellt Dreamweaver ein Formularobjekt fr jede Spalte in der Datenbanktabelle. Wenn Ihre Datenbank automatisch eine eindeutige Schlssel-ID fr jeden neu erstellten Datensatz generiert, entfernen Sie das Formularobjekt fr die Schlsselspalte, indem Sie es in der Liste auswhlen und dann auf die Schaltflche mit dem Minuszeichen () klicken. Dadurch wird verhindert, dass Besucher einen bereits vorhandenen ID-Wert eingeben. Sie knnen auch die Reihenfolge der Formularobjekte im HTML-Formular ndern. Whlen Sie dazu ein Formularobjekt in der Liste aus und klicken Sie dann rechts im Dialogfeld auf den nach oben bzw. nach unten gerichteten Pfeil.
7 Geben Sie nun an, wie die einzelnen Dateneingabefelder im HTML-Formular dargestellt werden sollen. Klicken Sie
auf eine Zeile der Tabelle Formularfelder und geben Sie dann die folgenden Informationen in die Felder unterhalb der Tabelle ein:
Geben Sie im Feld Beschriftung eine aussagekrftige Beschreibung ein, die neben dem Dateneingabefeld
angezeigt wird. Standardmig zeigt Dreamweaver den Namen der Tabellenspalte als Beschriftung an.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 664
Anwendungen visuell entwickeln
Whlen Sie im Popupmen Anzeigen als das Formularobjekt aus, das als Dateneingabefeld dienen soll. Folgende
Optionen stehen zur Auswahl: Textfeld, Textbereich, Men, Kontrollkstchen, Optionsschaltergruppe und Text. Wenn es sich um schreibgeschtzte Eintrge handelt, whlen Sie Text. Sie knnen auch die Optionen Feld fr Kennwort, Dateifeld und Verstecktes Feld whlen. Hinweis: Versteckte Felder werden am Ende des Formulars eingefgt.
Whlen Sie im Popupmen Senden als das passende Datenformat fr Ihre Datenbanktabelle aus. Wenn
beispielsweise nur numerische Daten in die Tabellenspalte eingegeben werden knnen, whlen Sie Numerisch.
Legen Sie die Eigenschaften des Formularobjekts fest. Die verfgbaren Optionen richten sich danach, welches
Formularobjekt Sie als Dateneingabefeld auswhlen. Fr Textfelder, Textbereiche und Text knnen Sie einen Anfangswert eingeben. Bei Mens und Optionsschaltergruppen ffnen Sie ein weiteres Dialogfeld, um die Eigenschaften festzulegen. Wenn es sich um Kontrollkstchen handelt, whlen Sie die Option Aktiviert oder Nicht aktiviert.
8 Klicken Sie auf OK.
Dreamweaver fgt Ihrer Seite nun ein HTML-Formular und das Serververhalten Datensatz einfgen hinzu. Die Formularobjekte sind in einer einfachen Tabelle angeordnet, die Sie mit den Dreamweaver-Entwurfswerkzeugen bearbeiten knnen. (Achten Sie jedoch darauf, dass sich alle Formularobjekte innerhalb der Formularrnder befinden.) Wenn Sie das Serververhalten bearbeiten mchten, ffnen Sie das Bedienfeld Serververhalten (Fenster > Serververhalten). Doppelklicken Sie dann auf das Verhalten Datensatz einfgen.
Verwandte Themen
Such- und Ergebnisseiten erstellen auf Seite 654
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 665
Anwendungen visuell entwickeln
Mit dem gleichen Verfahren, mit dem Sie eine Detailseite geffnet und eine Datensatz-ID bergeben haben, ffnen Sie auch die Aktualisierungsseite und bergeben ihr eine Datensatz-ID. Weitere Informationen finden Sie im Abschnitt Hyperlinks zur Detailseite erstellen auf Seite 648.
Verwandte Themen
URL-Parameter auf Seite 700
und whlen Sie die Option Datensatzgruppe. Wird das erweiterte Dialogfeld geffnet, klicken Sie auf Einfach. Das erweiterte Dialogfeld enthlt im Gegensatz zum einfachen Dialogfeld einen Textbereich zur Eingabe von SQL-Anweisungen.
3 Benennen Sie die Datensatzgruppe und geben Sie ber die Popupmens Verbindung und Tabelle an, wo sich
entspricht, der von der Ergebnisseite bermittelt wurde. Ein solcher Filter erstellt eine Datensatzgruppe, die nur den auf der Ergebnisseite angegebenen Datensatz enthlt. Wenn Ihre Schlsselspalte beispielsweise Datensatz-ID-Informationen enthlt und PRID heit und die Ergebnisseite die entsprechenden Datensatz-ID-Informationen in einem URL-Parameter mit dem Namen id bermittelt, sollte der Bereich Filter folgendermaen aussehen:
Wenn der Besucher einen Datensatz auf der Ergebnisseite auswhlt, generiert die Aktualisierungsseite eine Datensatzgruppe, die nur den ausgewhlten Datensatz enthlt.
Eine gefilterte Datensatzgruppe, um den Datensatz aus einer Datenbanktabelle abzurufen Ein HTML-Formular, mit dem Besucher die Daten des Datensatzes modifizieren knnen Ein Serververhalten des Typs Datensatz aktualisieren, mit dem die Datenbanktabelle aktualisiert wird
Sie knnen die beiden letzten grundlegenden Bausteine einer Aktualisierungsseite auch separat hinzufgen. Dazu verwenden Sie die Formularwerkzeuge und das Bedienfeld Serververhalten.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 666
Anwendungen visuell entwickeln
Verwandte Themen
Zu aktualisierende Datenstze abrufen auf Seite 665 Webformulare erstellen auf Seite 702
Option Einfgen > Formular > Formular whlen. Daraufhin wird ein leeres Formular auf der Seite erstellt. Eventuell mssen Sie die unsichtbaren Elemente aktivieren (Ansicht > Visuelle Hilfsmittel > Unsichtbare Elemente), damit die Formularrnder durch schmale rote Linien angezeigt werden.
4 Benennen Sie das HTML-Formular. Klicken Sie dazu unten im Dokumentfenster auf das Tag form, um das
Formular auszuwhlen, ffnen Sie dann den Eigenschafteninspektor (Fenster > Eigenschaften) und geben Sie den Namen im Feld Formularname ein. Es ist nicht erforderlich, die Attribute action oder method festzulegen, um das Formular anzuweisen, wie und wohin die Datensatzdaten geschickt werden sollen, wenn der Benutzer auf die Schaltflche zum Senden klickt. Diese Attribute werden vom Serververhalten Datensatz aktualisieren automatisch festgelegt.
5 Fgen Sie fr alle Spalten, die in der Datenbanktabelle aktualisiert werden sollen, ein Formularobjekt wie
beispielsweise ein Textfeld hinzu (Einfgen > Formular > Textfeld). Die Formularobjekte sind fr die Dateneingabe vorgesehen. Meistens werden zu diesem Zweck Textfelder verwendet, Sie knnen jedoch auch Mens, Kontrollkstchen und Optionsschalter einfgen. Die Datensatzgruppe, die Sie in einem frheren Schritt definiert haben, sollte eine Spalte fr jedes Formularobjekt enthalten. Eine Ausnahme bildet die Spalte fr eindeutige Schlssel, zu der kein Formularobjekt gehren sollte.
6 Fgen Sie dem Formular eine Schaltflche zum Senden hinzu (Einfgen > Formular > Schaltflche).
Auf Wunsch knnen Sie die Beschriftung der Schaltflche zum Senden ndern. Whlen Sie dazu die Schaltflche aus, ffnen Sie den Eigenschafteninspektor (Fenster > Eigenschaften) und geben Sie im Feld Beschriftung einen neuen Wert ein.
Weitere Informationen finden Sie im Abschnitt Zu aktualisierende Datenstze abrufen auf Seite 665.
2 Verbinden Sie jedes Formularobjekt mit Daten aus der Datensatzgruppe, wie in den folgenden Themen
beschrieben:
Dynamischen Inhalt in HTML-Textfeldern anzeigen auf Seite 713 HTML-Kontrollkstchen dynamisch im Voraus aktivieren auf Seite 714 HTML-Optionsschalter dynamisch im Voraus aktivieren auf Seite 714 Dynamisches HTML-Formularmen einfgen oder ndern auf Seite 712 Vorhandene HTML-Formularmens dynamisch gestalten auf Seite 713
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 667
Anwendungen visuell entwickeln
Pluszeichen (+) und whlen Sie im Popupmen die Option Datensatz aktualisieren. Das Dialogfeld Datensatz aktualisieren wird angezeigt.
2 Whlen Sie im Popupmen Werte senden aus ein Formular aus. 3 Whlen Sie im Popupmen Datenquelle oder Verbindung eine Verbindung zu der Datenbank aus. 4 Geben Sie bei Bedarf Ihren Benutzernamen und Ihr Kennwort ein. 5 Whlen Sie im Popupmen Tabelle aktualisieren die Datenbanktabelle mit dem Datensatz aus, den Sie gerade
aktualisieren.
6 (ColdFusion, PHP) Geben Sie eine zu aktualisierende Datenbankspalte an und whlen Sie im Popupmen Wert
das Formularobjekt aus, das den Datensatz aktualisiert. Whlen Sie im Popupmen Senden als einen Datentyp fr das Formularobjekt aus und whlen Sie die Option Primrschlssel aus, wenn Sie diese Spalte als Primrschlssel kennzeichnen mchten. Beim Datentyp handelt es sich um die Datenart, die von der Spalte in der Datenbanktabelle erwartet wird (Text, numerisch, boolesche Werte). Wiederholen Sie die Prozedur fr jedes Formularobjekt im Formular.
7 (ASP) Geben Sie im Popupmen Datensatz auswhlen in die Datensatzgruppe mit dem Datensatz an, der im
HTML-Formular angezeigt wird. Whlen Sie im Popupmen Spalte fr eindeutigen Schlssel eine Schlsselspalte aus (in der Regel die Datensatz-ID-Spalte), um den Datensatz in der Datenbanktabelle zu finden. Whlen Sie die Option Numerisch, wenn der Wert eine Zahl ist. In Schlsselspalten knnen meistens nur numerische Werte, in manchen Fllen jedoch auch Textzeichenfolgen eingegeben werden.
8 Geben Sie im Feld Nach dem Aktualisieren hierher gehen oder Bei Erfolg hierher gehen die Seite an, die
geffnet werden soll, nachdem der Datensatz in der Tabelle aktualisiert wurde, oder klicken Sie auf die Schaltflche Durchsuchen und whlen Sie die Datei aus.
9 (ASP) Geben Sie eine zu aktualisierende Datenbankspalte an und whlen Sie im Popupmen Wert das
Formularobjekt aus, das den Datensatz aktualisiert. Whlen Sie dann im Popupmen Senden als einen Datentyp fr das Formularobjekt aus. Beim Datentyp handelt es sich um die Datenart, die von der Spalte in der Datenbanktabelle erwartet wird (Text, numerisch, boolesche Werte). Wiederholen Sie die Prozedur fr jedes Formularobjekt im Formular.
10 Klicken Sie auf OK.
Dreamweaver fgt der Seite ein Serververhalten hinzu, mit dem Besucher Datenstze in einer Datenbanktabelle aktualisieren knnen, indem sie die in dem HTML-Formular angezeigten Informationen ndern und auf die Schaltflche zum Senden klicken. Wenn Sie das Serververhalten bearbeiten mchten, ffnen Sie das Bedienfeld Serververhalten (Fenster > Serververhalten). Doppelklicken Sie auf das Verhalten Datensatz aktualisieren.
Eine gefilterte Datensatzgruppe, um den Datensatz aus einer Datenbanktabelle abzurufen Ein HTML-Formular, mit dem Besucher die Daten des Datensatzes modifizieren knnen Ein Serververhalten des Typs Datensatz aktualisieren, mit dem die Datenbanktabelle aktualisiert wird
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 668
Anwendungen visuell entwickeln
Mit dem Datenobjekt Aktualisierungsformular fr Datenstze knnen Sie die beiden letzten Bausteine einer Aktualisierungsseite in einem Arbeitsschritt hinzufgen. Mit diesem Datenobjekt wird der Seite nicht nur ein HTMLFormular, sondern auch das Serververhalten Datensatz aktualisieren hinzugefgt. Bevor Sie das Datenobjekt verwenden knnen, muss Ihre Webanwendung den zu aktualisierenden Datensatz finden knnen. Auerdem muss die Aktualisierungsseite diesen Datensatz abrufen knnen. Nachdem das Datenobjekt die Bausteine auf der Seite platziert hat, knnen Sie das Formular mithilfe der Dreamweaver-Entwurfswerkzeuge beliebig anpassen oder das Serververhalten Datensatz aktualisieren mit dem Bedienfeld Serververhalten bearbeiten. Hinweis: Die Aktualisierungsseite kann jeweils nur ein Serververhalten zur Datensatzbearbeitung enthalten. So ist es nicht mglich, der Aktualisierungsseite das Serververhalten Datensatz einfgen oder Datensatz lschen hinzuzufgen.
1 ffnen Sie die Seite in der Entwurfsansicht und whlen Sie Einfgen > Datenobjekte > Datensatz
aktualisieren > Assistent Aktualisierungsformular fr Datenstze aus. Das Dialogfeld Aktualisierungsformular fr Datenstze wird angezeigt.
2 Whlen Sie im Popupmen Verbindung eine Verbindung zur Datenbank aus.
Klicken Sie auf die Schaltflche Definieren, wenn Sie eine Verbindung definieren mssen.
3 Whlen Sie im Popupmen Zu aktualisierende Tabelle die Datenbanktabelle aus, die den zu aktualisierenden
Datensatz enthlt.
4 Geben Sie im Popupmen Datensatz auswhlen aus die Datensatzgruppe an, die den Datensatz enthlt, der im
ID-Spalte), um den Datensatz in der Datenbanktabelle zu finden. Whlen Sie die Option Numerisch, wenn der Wert eine Zahl ist. In Schlsselspalten knnen meistens nur numerische Werte, in manchen Fllen jedoch auch Textzeichenfolgen eingegeben werden.
6 Geben Sie im Feld Nach dem Aktualisieren hierher gehen die Seite ein, die geffnet werden soll, nachdem der
Formularobjekten aktualisiert werden sollen. Standardmig erstellt Dreamweaver ein Formularobjekt fr jede Spalte in der Datenbanktabelle. Wenn Ihre Datenbank automatisch eine eindeutige Schlssel-ID fr jeden neu erstellten Datensatz generiert, entfernen Sie das Formularobjekt fr die Schlsselspalte, indem Sie es in der Liste auswhlen und dann auf die Schaltflche mit dem Minuszeichen () klicken. Dadurch wird verhindert, dass Besucher einen bereits vorhandenen ID-Wert eingeben. Sie knnen auch die Reihenfolge der Formularobjekte im HTML-Formular ndern. Whlen Sie dazu ein Formularobjekt in der Liste aus und klicken Sie dann rechts im Dialogfeld auf den nach oben bzw. nach unten gerichteten Pfeil.
8 Geben Sie nun an, wie die einzelnen Dateneingabefelder im HTML-Formular dargestellt werden sollen. Klicken Sie
auf eine Zeile der Tabelle Formularfelder und geben Sie dann die folgenden Informationen in die Felder unterhalb der Tabelle ein:
Geben Sie im Feld Beschriftung eine aussagekrftige Beschreibung ein, die neben dem Dateneingabefeld
angezeigt wird. Standardmig zeigt Dreamweaver den Namen der Tabellenspalte als Beschriftung an.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 669
Anwendungen visuell entwickeln
Whlen Sie im Popupmen Anzeigen als das Formularobjekt aus, das als Dateneingabefeld dienen soll. Folgende
Optionen stehen zur Auswahl: Textfeld, Textbereich, Men, Kontrollkstchen, Optionsschaltergruppe und Text. Wenn es sich um schreibgeschtzte Eintrge handelt, whlen Sie Text. Sie knnen auch die Optionen Feld fr Kennwort, Dateifeld und Verstecktes Feld whlen. Hinweis: Versteckte Felder werden am Ende des Formulars eingefgt.
Whlen Sie im Popupmen Senden als das passende Datenformat fr Ihre Datenbanktabelle aus. Wenn
beispielsweise nur numerische Daten in die Tabellenspalte eingegeben werden knnen, whlen Sie Numerisch.
Legen Sie die Eigenschaften des Formularobjekts fest. Die verfgbaren Optionen richten sich danach, welches
Formularobjekt Sie als Dateneingabefeld auswhlen. Fr Textfelder, Textbereiche und Text knnen Sie einen Anfangswert eingeben. Bei Mens und Optionsschaltergruppen ffnen Sie ein weiteres Dialogfeld, um die Eigenschaften festzulegen. Wenn es sich um Kontrollkstchen handelt, whlen Sie die Option Aktiviert oder Nicht aktiviert.
9 Legen Sie die Eigenschaften der anderen Formularobjekte fest, indem Sie unter Formularfelder eine andere Zeile
auswhlen und eine Beschriftung sowie unter Anzeigen als und unter Senden als einen Wert eingeben. Bei Mens und Optionsschaltergruppen ffnen Sie ein weiteres Dialogfeld, um die Eigenschaften festzulegen. Fr Optionen definieren Sie einen Vergleich zwischen dem Wert des aktuellen Datensatzes fr die Option und einem gegebenen Wert, um zu bestimmen, ob die Option aktiviert oder nicht aktiviert ist, wenn der Datensatz angezeigt wird.
10 Klicken Sie auf OK.
Dreamweaver fgt Ihrer Seite nun ein HTML-Formular und das Serververhalten Datensatz aktualisieren hinzu. Mit dem Datenobjekt wird der Seite nicht nur ein HTML-Formular, sondern auch das Serververhalten Datensatz aktualisieren hinzugefgt. Die Formularobjekte sind in einer einfachen Tabelle angeordnet, die Sie mit den Dreamweaver-Entwurfswerkzeugen bearbeiten knnen. (Achten Sie jedoch darauf, dass sich alle Formularobjekte innerhalb der Formularrnder befinden.) Wenn Sie das Serververhalten bearbeiten mchten, ffnen Sie das Bedienfeld Serververhalten (Fenster > Serververhalten). Doppelklicken Sie auf das Verhalten Datensatz aktualisieren.
Verwandte Themen
Zu aktualisierende Datenstze abrufen auf Seite 665 Dynamisches HTML-Formularmen einfgen oder ndern auf Seite 712
Formularelement-Eigenschaften
Im Dialogfeld Formularelement-Eigenschaften knnen Sie die Eigenschaften von Formularelementen auf Seiten festlegen, mit denen Besucher Datenstze in einer Datenbank aktualisieren knnen.
1 Whlen Sie entweder Manuell oder Aus Datenbank, abhngig davon, wie Sie das Formularelement erstellen
mchten.
2 Klicken Sie auf die Schaltflche mit dem Pluszeichen (+), um ein Element hinzuzufgen. 3 Geben Sie fr das Element eine Beschriftung und einen Wert ein. 4 Soll ein bestimmtes Element ausgewhlt sein, wenn die Seite in einem Browser geffnet oder wenn ein Datensatz
im Formular angezeigt wird, geben Sie im Feld Wert auswhlen, der gleich einen Wert ein, der mit dem Elementwert bereinstimmt.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 670
Anwendungen visuell entwickeln
Sie knnen einen statischen Wert eingeben oder Sie knnen auf das Blitzsymbol klicken und dann aus der Liste der Datenquellen einen dynamischen Wert auswhlen. In beiden Fllen muss der angegebene Wert mit einem der Menelementwerte bereinstimmen.
Verwandte Themen
Such- und Ergebnisseiten erstellen auf Seite 654
Verwandte Themen
URL-Parameter auf Seite 700
Sie in die letzte Tabellenspalte klicken und Modifizieren > Tabelle > Zeilen oder Spalten einfgen whlen.
2 Aktivieren Sie die Optionen Spalten und Nach aktueller Spalte und klicken Sie auf OK.
Registerreiter) eingeben. Sie knnen auch ein Bild, ein Wort oder ein Symbol zum Lschen einfgen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 671
Anwendungen visuell entwickeln
4 Whlen Sie die Zeichenfolge Lschen aus, um sie mit einem Hyperlink zu versehen. 5 Geben Sie im Eigenschafteninspektor die Besttigungsseite im Feld Hyperlink ein. Sie knnen einen beliebigen
Dateinamen eingeben. Klicken Sie auf eine Stelle auerhalb des Felds Hyperlink. Die Zeichenfolge Lschen wird in der Tabelle angezeigt. In der Live-Ansicht sehen Sie, dass derselbe Text in jeder Tabellenzeile mit dem Hyperlink unterlegt ist.
6 Whlen Sie auf der Ergebnisseite den Hyperlink zum Lschen aus. 7 (ColdFusion) Fgen Sie im Eigenschafteninspektor im Feld Hyperlink die folgende Zeichenfolge am Ende der
URL ein:
?recordID=#recordsetName.fieldName#
Das Fragezeichen zeigt dem Server an, dass ein oder mehrere URL-Parameter folgen. Der Ausdruck recordID ist der Name des URL-Parameters. (Sie knnen einen beliebigen Namen whlen.) Schreiben Sie sich den Namen des URLParameters auf. Sie bentigen ihn spter fr die Lschseite. Der Ausdruck nach dem Gleichheitszeichen ist der Wert des Parameters. In diesem Fall wird der Wert durch einen ColdFusion-Ausdruck generiert, der eine Datensatz-ID aus der Datensatzgruppe zurckgibt. Fr jede Zeile in der dynamischen Tabelle wird eine andere ID generiert. Ersetzen Sie im ColdFusion-Ausdruck recordsetName durch den Namen Ihrer Datensatzgruppe und fieldName durch den Namen des Felds in der Datensatzgruppe, die den jeweiligen Datensatz eindeutig kennzeichnet. Normalerweise besteht das Feld aus einer Datensatz-ID. Im folgenden Beispiel besteht das Feld aus eindeutigen Standortcodes:
confirmDelete.cfm?recordID=#rsLocations.CODE#
Wenn die Seite ausgefhrt wird, werden die Werte des Datensatzgruppenfelds CODE in die entsprechenden Zeilen der dynamischen Tabelle eingefgt. Wenn zum Beispiel ein Mietobjekt im australischen Canberra den Code CBR besitzt, wird in der dynamischen Tabelle in der Zeile Canberra die folgende URL verwendet:
confirmDelete.cfm?recordID=CBR
8 (PHP) Fgen Sie im Eigenschafteninspektor im Feld Hyperlink die folgende Zeichenfolge am Ende der URL ein:
?recordID=<?php echo $row_recordsetName['fieldName']; ?>
Das Fragezeichen zeigt dem Server an, dass ein oder mehrere URL-Parameter folgen. Der Ausdruck recordID ist der Name des URL-Parameters. (Sie knnen einen beliebigen Namen whlen.) Schreiben Sie sich den Namen des URLParameters auf. Sie bentigen ihn spter fr die Lschseite. Der Ausdruck nach dem Gleichheitszeichen ist der Wert des Parameters. In diesem Fall wird der Wert durch einen PHP-Ausdruck generiert, der eine Datensatz-ID aus der Datensatzgruppe zurckgibt. Fr jede Zeile in der dynamischen Tabelle wird eine andere ID generiert. Ersetzen Sie im PHP-Ausdruck recordsetName durch den Namen Ihrer Datensatzgruppe und fieldName durch den Namen des Felds in der Datensatzgruppe, die den jeweiligen Datensatz eindeutig kennzeichnet. Normalerweise besteht das Feld aus einer Datensatz-ID. Im folgenden Beispiel besteht das Feld aus eindeutigen Standortcodes:
confirmDelete.php?recordID=<?php echo $row_rsLocations['CODE']; ?>
Wenn die Seite ausgefhrt wird, werden die Werte des Datensatzgruppenfelds CODE in die entsprechenden Zeilen der dynamischen Tabelle eingefgt. Wenn zum Beispiel ein Mietobjekt im australischen Canberra den Code CBR besitzt, wird in der dynamischen Tabelle in der Zeile Canberra die folgende URL verwendet:
confirmDelete.php?recordID=CBR
9 (ASP) Fgen Sie im Eigenschafteninspektor im Feld Hyperlink die folgende Zeichenfolge am Ende der URL ein:
?recordID=<%=(recordsetName.Fields.Item("fieldName").Value)%>
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 672
Anwendungen visuell entwickeln
Das Fragezeichen zeigt dem Server an, dass ein oder mehrere URL-Parameter folgen. Der Ausdruck recordID ist der Name des URL-Parameters. (Sie knnen einen beliebigen Namen whlen.) Schreiben Sie sich den Namen des URLParameters auf. Sie bentigen ihn spter fr die Lschseite. Der Ausdruck nach dem Gleichheitszeichen ist der Wert des Parameters. In diesem Fall wird der Wert durch einen ASP-Ausdruck generiert, der eine Datensatz-ID aus der Datensatzgruppe zurckgibt. Fr jede Zeile in der dynamischen Tabelle wird eine unterschiedliche ID generiert. Ersetzen Sie im ASP-Ausdruck recordsetName durch den Namen Ihrer Datensatzgruppe und fieldName durch den Namen des Felds in der Datensatzgruppe, das den jeweiligen Datensatz eindeutig kennzeichnet. Normalerweise besteht das Feld aus einer Datensatz-ID. Im folgenden Beispiel besteht das Feld aus eindeutigen Standortcodes:
confirmDelete.asp?recordID=<%=(rsLocations.Fields.Item("CODE").Value)%>
Wenn die Seite ausgefhrt wird, werden die Werte des Datensatzgruppenfelds CODE in die entsprechenden Zeilen der dynamischen Tabelle eingefgt. Wenn zum Beispiel ein Mietobjekt im australischen Canberra den Code CBR besitzt, wird in der dynamischen Tabelle in der Zeile Canberra die folgende URL verwendet:
confirmDelete.asp?recordID=CBR
Sie in die letzte Tabellenspalte klicken und Modifizieren > Tabelle > Zeilen oder Spalten einfgen whlen.
2 Aktivieren Sie die Optionen Spalten und Nach aktueller Spalte und klicken Sie auf OK.
Sie knnen auch ein Bild, ein Wort oder ein Symbol zum Lschen einfgen.
4 Whlen Sie die Zeichenfolge Lschen aus, um sie mit einem Hyperlink zu versehen. 5 Klicken Sie im Bedienfeld Serververhalten (Fenster > Serververhalten) auf die Schaltflche mit dem
Pluszeichen (+) und whlen Sie im Popupmen die Option Zu Detailseite wechseln aus.
6 Klicken Sie im Feld Detailseite auf Durchsuchen und whlen Sie die Lschseite aus. 7 Geben Sie im Feld URL-Parameter bergeben den Namen des Parameters an, beispielsweise recordID.
Sie knnen einen beliebigen Namen angeben. Notieren Sie ihn jedoch, da Sie ihn spter auf der Lschseite eingeben mssen.
8 Geben Sie an, welchen Wert Sie an die Lschseite bergeben mchten, indem Sie in den Popupmens
Datensatzgruppe und Spalte eine Datensatzgruppe und eine Spalte auswhlen. In der Regel ist dieser Wert fr den Datensatz spezifisch, beispielsweise die eindeutige Schlssel-ID des Datensatzes.
9 Whlen Sie die Option URL-Parameter aus. 10 Klicken Sie auf OK.
Ein spezieller Hyperlink umschliet den ausgewhlten Text. Wenn der Benutzer auf den Hyperlink klickt, bergibt das Serververhalten Zu Detailseite wechseln einen URL-Parameter, der die Datensatz-ID fr die angegebene Lschseite enthlt. Wenn der URL-Parameter beispielsweise recordID und der Name der Lschseite confirmdelete.asp lautet, wird beim Klicken des Benutzers auf den Hyperlink eine URL wie die folgende gebildet: http://www.meinesite.com/confirmdelete.asp?recordID=43
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 673
Anwendungen visuell entwickeln
Mit dem ersten Teil der URL, http://www.meinesite.com/confirmdelete.asp, wird die Lschseite geffnet. Der zweite Teil, ?recordID=43, ist der URL-Parameter. Mit diesem Parameter wird der Lschseite mitgeteilt, welcher Datensatz aufzurufen und anzuzeigen ist. Dabei ist die Bezeichnung recordID der Name und 43 der Wert des URLParameters. In diesem Beispiel enthlt der URL-Parameter mit dem Wert 43 die ID-Nummer des Datensatzes.
Lschseiten erstellen
Nachdem Sie die Seite mit den Datenstzen vervollstndigt haben, wechseln Sie zur Lschseite. Die Lschseite zeigt den Datensatz an und der Benutzer wird gefragt, ob er ihn lschen mchte. Wenn der Benutzer die Lschanweisung mit der Formularschaltflche besttigt, lscht die Webanwendung den Datensatz aus der Datenbank. Zum Erstellen dieser Seite legen Sie zunchst ein HTML-Formular an. Anschlieend rufen Sie den im Formular anzuzeigenden Datensatz ab, zeigen den Datensatz im Formular an und fgen den Code zum Lschen des Datensatzes aus der Datenbank hinzu. Um den Datensatz abzurufen und anzuzeigen, definieren Sie eine Datensatzgruppe, die nur einen Datensatz enthlt (den Datensatz, den der Benutzer lschen mchte), und verbinden Sie die Spalten der Datensatzgruppe mit dem Formular. Hinweis: Die Lschseite kann jeweils nur ein Serververhalten zur Datensatzbearbeitung enthalten. Beispielsweise ist es nicht mglich, der Lschseite das Serververhalten Datensatz aktualisieren oder Datensatz einfgen hinzuzufgen.
festgelegt haben. Im letzten Abschnitt haben Sie den Hyperlink Delete erstellt und dabei eine Lschseite angegeben. Verwenden Sie den dabei verwendeten Namen (z. B. deleteConfirm.cfm), wenn Sie die Datei zum ersten Mal speichern.
2 Fgen Sie auf der Seite ein HTML-Formular ein (Einfgen > Formular > Formular). 3 Fgen Sie dem Formular ein verborgenes Formularfeld hinzu.
Das verborgene Formularfeld wird fr die Datensatz-ID bentigt, die der URL-Parameter bergibt. Um ein verborgenes Feld hinzuzufgen, setzen Sie die Einfgemarke in das Formular und whlen Sie Einfgen > Formular > Verstecktes Feld.
4 Fgen Sie dem Formular eine Schaltflche hinzu.
Der Besucher klickt auf die Schaltflche, um das Lschen des angezeigten Datensatzes zu besttigen. Um eine Schaltflche hinzuzufgen, setzen Sie die Einfgemarke in das Formular und whlen Sie Einfgen > Formular > Schaltflche.
5 Bearbeiten Sie das Layout der Seite nach Belieben und speichern Sie sie.
und whlen Sie im Popupmen die Option Datensatzgruppe (Abfrage). Das einfache Dialogfeld Datensatzgruppe bzw. Datensatz wird angezeigt. Wird stattdessen das erweiterte Dialogfeld Datensatzgruppe geffnet, klicken Sie auf Einfach.
2 Benennen Sie die Datensatzgruppe und whlen Sie eine ColdFusion-Datenquelle aus sowie die Datenbanktabelle,
die die Datenstze enthlt, die von Besuchern gelscht werden knnen.
3 Whlen Sie im Spaltenbereich die Tabellenspalten (Datensatzfelder) aus, die auf der Seite angezeigt werden sollen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 674
Anwendungen visuell entwickeln
Um nur einige Felder des Datensatzes anzuzeigen, klicken Sie auf Ausgewhlt. Whlen Sie dann die gewnschten Felder aus, indem Sie bei gedrckter Strg-Taste (Windows) bzw. Befehlstaste (Macintosh) auf die jeweiligen Listeneintrge klicken. Achten Sie darauf, dass auch das Feld fr die Datensatz-ID gewhlt werden muss, auch wenn es nicht angezeigt werden soll.
4 Fllen Sie den Abschnitt Filter wie im Folgenden beschrieben aus, um den Datensatz zu suchen und anzuzeigen,
Whlen Sie im ersten Popupmen im Bereich Filter die Spalte in der Datensatzgruppe aus, deren Werte mit dem
Wert des von der Masterseite bermittelten URL-Parameters bereinstimmen. Wenn der URL-Parameter beispielsweise eine Datensatz-ID-Nummer bergibt, whlen Sie die Spalte aus, die Datensatz-ID-Nummern enthlt. Im vorangegangenen Beispiel enthlt die Spalte CODE der Datensatzgruppe die Werte, die mit dem URL-Parameter bereinstimmen, der von der Seite mit den Lsch-Hyperlinks bergeben wurde.
Whlen Sie im Popupmen neben dem ersten Men das Gleichheitszeichen aus (soweit noch nicht geschehen). Whlen Sie im dritten Popupmen die Option URL-Parameter aus. Die Seite mit den Lsch-Hyperlinks bergibt
Informationen mithilfe eines URL-Parameters an die Lschseite.
Geben Sie im vierten Textfeld den Namen des URL-Parameters ein, der von der Seite mit den Lsch-Hyperlinks
bermittelt wird.
auf die Lschseite. Achten Sie darauf, dass dieser schreibgeschtzte dynamische Inhalt innerhalb der Begrenzungen des Formulars eingefgt wird. Weitere Informationen zum Einfgen dynamischer Inhalte auf einer Seite finden Sie unter Texte dynamisch gestalten auf Seite 615. Jetzt mssen Sie die Spalte mit der Datensatz-ID mit dem verborgenen Formularfeld verbinden.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 675
Anwendungen visuell entwickeln
2 Sorgen Sie dafr, dass die unsichtbaren Elemente aktiviert sind (Ansicht > Visuelle Hilfsmittel > Unsichtbare
Elemente) und klicken Sie auf das gelbe Schutzschild-Symbol, das fr das verborgene Formularfeld steht. Das verborgene Formularfeld ist ausgewhlt.
3 Klicken Sie im Eigenschafteninspektor auf das Blitzsymbol neben dem Feld Wert. 4 Whlen Sie im Dialogfeld Dynamische Daten die Datensatz-ID-Spalte in der Datensatzgruppe aus.
Ausgewhlte Datensatz-ID-Spalte
Fertige Lschseite
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 676
Anwendungen visuell entwickeln
Vorgehensweise zum Hinzufgen von Serververhalten zum Lschen von Datenstzen (ColdFusion, PHP)
1 Achten Sie darauf, dass die ColdFusion- oder PHP-Lschseite in Dreamweaver geffnet ist. 2 ffnen Sie das Bedienfeld Serververhalten (Fenster > Serververhalten), klicken Sie auf die Schaltflche mit
damit das Serververhalten die Verbindung zur betreffenden Datenbank herstellen kann.
5 Whlen Sie im Popupmen Tabelle die Datenbanktabelle aus, die die zu lschenden Datenstze enthlt. 6 Whlen Sie im Popupmen Primrschlsselspalte die Tabellenspalte mit den Datensatz-IDs aus.
Das Serververhalten Datensatz lschen sucht in dieser Spalte nach bereinstimmungen. Die Spalte msste dieselbe Datensatz-ID enthalten wie die Spalte der Datensatzgruppe, mit der Sie das verborgene Formularfeld auf der Seite verbunden haben. Wenn die Datensatz-ID numerisch ist, whlen Sie die Option Numerisch.
7 (PHP) Whlen Sie im Popupmen Primrschlsselwert die Variable auf Ihrer Seite aus, die die Datensatz-ID des
zu lschenden Datensatzes enthlt. Die Variable wird durch das verborgene Formularfeld erstellt. Sie trgt den gleichen Namen wie das Namensattribut des versteckten Feldes und ist entweder ein Formular- oder ein URL-Parameter, je nach Attribut der Formularmethode.
8 Geben Sie im Feld Nach dem Lschen zu URL wechseln oder Bei Erfolg hierher gehen die Seite an, die geffnet
werden soll, nachdem der Datensatz aus der Tabelle gelscht wurde. Sie knnen eine Seite angeben, die eine kurze Erfolgsmeldung fr den Benutzer enthlt, oder eine Seite, die die verbleibenden Datenstze auflistet, damit der Benutzer berprfen kann, ob der Datensatz gelscht wurde.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 677
Anwendungen visuell entwickeln
Vorgehensweise zum Hinzufgen von Serververhalten zum Lschen von Datenstzen (ASP)
1 Achten Sie darauf, dass die ASP-Lschseite in Dreamweaver geffnet ist. 2 Klicken Sie im Bedienfeld Serververhalten (Fenster > Serververhalten) auf die Schaltflche mit dem
Serververhalten eine Verbindung mit der betreffenden Datenbank hergestellt werden kann. Klicken Sie auf die Schaltflche Definieren, wenn Sie eine Verbindung definieren mchten.
4 Whlen Sie im Popupmen Lschen aus Tabelle die Datenbanktabelle aus, die die zu lschenden Datenstze
enthlt.
5 Geben Sie im Popupmen Datensatz auswhlen in die Datensatzgruppe an, die die zu lschenden Datenstze
enthlt.
6 Whlen Sie im Popupmen Spalte fr eindeutigen Schlssel eine Schlsselspalte aus (in der Regel die Datensatz-
ID-Spalte), um den Datensatz in der Datenbanktabelle zu finden. Whlen Sie die Option Numerisch, wenn der Wert eine Zahl ist. In Schlsselspalten knnen meistens nur numerische Werte, in manchen Fllen jedoch auch Textzeichenfolgen eingegeben werden.
7 Geben Sie im Popupmen Durch Senden lschen das HTML-Formular an, das die Schaltflche Senden enthlt,
Datensatz aus der Datenbanktabelle gelscht wurde. Sie knnen eine Seite angeben, die eine kurze Erfolgsmeldung fr den Benutzer enthlt, oder eine Seite, auf der die restlichen Datenstze aufgefhrt sind, damit der Benutzer berprfen kann, ob der Datensatz gelscht wurde.
9 Klicken Sie auf OK und speichern Sie die Eingaben.
Lschseiten testen
1 Laden Sie die Such-, Ergebnis- und Lschseiten auf den Webserver hoch, ffnen Sie einen Browser und suchen Sie
einen Testdatensatz, der gelscht werden kann. Wenn Sie auf der Ergebnisseite auf einen Hyperlink zum Lschen klicken, wird die Lschseite angezeigt.
2 Klicken Sie auf die Schaltflche Besttigen, um den Datensatz aus der Datenbank zu lschen. 3 berprfen Sie, ob der Datensatz gelscht wurde, indem Sie ihn erneut suchen. Der Datensatz sollte nicht mehr
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 678
Anwendungen visuell entwickeln
Wenn Sie wissen, dass der Befehl hufiger ausgefhrt wird, kann die Verwendung einer einzelnen kompilierten Version des Objekts die Effizienz von Datenbankoperationen erhhen. Hinweis: Prepared-Befehle werden nicht von allen Datenbankherstellern untersttzt. Gehrt Ihre Datenbank dazu, wird sie mglicherweise eine Fehlermeldung ausgeben, wenn Sie diese Eigenschaft auf true setzen. Mglicherweise wird sogar die Anforderung, den Befehl vorzubereiten, ignoriert und die Eigenschaft Prepared auf false gesetzt. Ein Befehlsobjekt wird von Skripts in einer ASP-Seite erstellt. In Dreamweaver knnen Sie jedoch Befehlsobjekte auch erstellen, ohne eine Zeile ASP-Code schreiben zu mssen.
bearbeitenden Datenstze enthlt, und whlen Sie die gewnschte Bearbeitungsoperation aus, die der Befehl ausfhren soll Einfgen, Aktualisieren oder Lschen. Dreamweaver startet die SQL-Anweisung automatisch, basierend auf dem Typ der von Ihnen gewhlten Operation. Wenn Sie beispielsweise Einfgen auswhlen, sieht das Dialogfeld folgendermaen aus:
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 679
Anwendungen visuell entwickeln
Informationen zum Schreiben von SQL-Anweisungen fr die Bearbeitung von Datenbanken finden Sie in einem Handbuch ber SQL-Transaktionen.
5 Im Bereich Variablen knnen Sie eventuelle SQL-Variablen definieren. Geben Sie den Namen und den
Laufzeitwert an. Durch die Angabe von Typ und Gre der einzelnen Variablen werden Injizierungsangriffe verhindert. Das nachfolgende Beispiel zeigt eine INSERT-Anweisung, die drei SQL-Variablen enthlt. Die Werte dieser Variablen werden von URL-Parametern bereitgestellt, die wie in der Spalte Laufzeitwert des Bereichs Variablen definiert an die Seite bergeben werden.
Den Wert fr die Gre knnen Sie ber das Dreamweaver-Bedienfeld Datenbank abrufen. Suchen Sie Ihre Datenbank im Bedienfeld Datenbank und erweitern Sie sie. Suchen Sie als Nchstes die Tabelle, mit der Sie gerade arbeiten, und erweitern Sie auch diese. In der Tabelle sind die Gren Ihrer Felder aufgelistet. Sie finden dort beispielsweise einen Eintrag wie ADRESSE (WChar 50). In diesem Beispiel bezeichnet 50 die Gre. Sie finden die Gre auch in Ihrer Datenbankanwendung. Hinweis: Die Datentypen Numerisch, Boolean und Datum/Uhrzeit verwenden immer die Gre -1. Die Werte fr den Datentyp finden Sie in der folgenden Tabelle aufgelistet:
In der Datenbank verwendeter Typ In Dreamweaver verwendeter Typ Double-Gleitkommazahl Double-Gleitkommazahl DBTimeStamp LongVarChar Gre
Numeric (MS Access, MS SQL Server, MySQL) Boolean, Ja/Nein (MS Access, MS SQL Server, MySQL) Date/Time (MS Access, MS SQL Server, MySQL) Alle sonstigen Textfelder, einschlielich der MySQL-Datentypen char, varchar und longtext Text (MS Access) und nvarchar, nchar (MS SQL Server)
VarWChar
Memo (MS Access), ntext (MS SQL Server) und Felder, die groe Textmengen untersttzen.
LongVarWChar
Weitere Informationen zu Datentyp und Gre von SQL-Variablen finden Sie unter www.adobe.com/go/4e6b330a_de.
6 Schlieen Sie das Dialogfeld.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 680
Anwendungen visuell entwickeln
Dreamweaver fgt ASP-Code in Ihre Seite ein, der bei Ausfhrung auf dem Server einen Befehl erstellt, der in der Datenbank Datenstze einfgt, aktualisiert oder lscht. Standardmig setzt der Code die Eigenschaft Prepared des Befehlsobjekts auf true. Dies bewirkt die Wiederverwendung einer einzelnen kompilierten Version des Objekts durch den Anwendungsserver bei jeder Ausfhrung des Befehls. Um diese Einstellung zu ndern, wechseln Sie in die Codeansicht und ndern die Eigenschaft Prepared in false.
7 Erstellen Sie eine Seite mit einem HTML-Formular, damit die Besucher Datensatzdaten eingeben knnen. Fgen
Sie in das HTML-Formular drei Felder (txtCity, txtAddress und txtPhone) und eine Schaltflche zum Senden ein. Das Formular verwendet die Methode GET und sendet die Werte der Textfelder an die Seite, die Ihren Befehl enthlt.
Gespeicherte Prozeduren
Seiten, die Datenbanken verndern, knnen Sie nicht nur mithilfe von Serververhalten erstellen, sondern auch mit Verarbeitungsobjekten, z. B. mit gespeicherten Prozeduren oder ASP-Befehlsobjekten. Eine gespeicherte Prozedur ist ein wiederverwendbares Datenbankelement, das eine bestimmte Datenbankoperation durchfhrt. Eine gespeicherte Prozedur enthlt SQL-Code, der unter anderem Datenstze einfgen, aktualisieren oder lschen kann. Gespeicherte Prozeduren knnen auch die Struktur der Datenbank selbst ndern. Mithilfe einer gespeicherten Prozedur knnen Sie beispielsweise eine Tabellenspalte hinzufgen oder sogar eine Tabelle lschen. Eine gespeicherte Prozedur kann auch eine weitere gespeicherte Prozedur aufrufen, Eingabeparameter verarbeiten und als Ausgangsparameter diverse Werte an die aufrufende Prozedur zurckgeben. Eine gespeicherte Prozedur ist wiederverwendbar, d. h., Sie knnen mit einer einzelnen kompilierten Version der Prozedur eine Datenbankoperation mehrere Male ausfhren. Sobald Sie eine Datenbankoperation hufiger oder in verschiedenen Anwendungen ausfhren mchten, ist eine gespeicherte Prozedur ein geeignetes und effizientes Mittel. Hinweis: Die Datenbankprogramme MySQL und Microsoft Access untersttzen keine gespeicherten Prozeduren.
enthlt.
4 Geben Sie den Benutzernamen und das Kennwort fr die ColdFusion-Datenquelle ein. 5 Whlen Sie im Popupmen Prozeduren eine gespeicherte Prozedur aus.
durchfhren mssen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 681
Anwendungen visuell entwickeln
Das Dialogfeld Gespeicherte Prozedur-Variable bearbeiten wird angezeigt. Der Name der Variablen, die Sie bearbeiten, wird im Feld Name angezeigt. Hinweis: Sie mssen Testwerte fr alle Eingabeparameter von gespeicherte Prozeduren eingeben.
7 Nehmen Sie die erforderlichen nderungen vor:
Whlen Sie im Popupmen eine Richtung aus. Eine gespeicherte Prozedur kann Eingabewerte oder Ausgabewerte
oder Eingabe- und Ausgabewerte aufweisen.
Whlen Sie im Popupmen einen SQL-Typ aus. Geben Sie eine Rckgabevariable, einen Laufzeitwert und einen
Testwert ein.
8 Wenn die gespeicherte Prozedur Parameter akzeptiert, klicken Sie auf die Schaltflche mit dem Pluszeichen (+),
um einen Seitenparameter hinzuzufgen. Hinweis: Sie mssen fr alle Parameter-Rckgabewerte von gespeicherten Prozeduren die entsprechenden Seitenparameter eingeben. Fgen Sie nur dann Seitenparameter hinzu, wenn die entsprechenden Rckgabewerte vorhanden sind. Klicken Sie erneut auf die Schaltflche mit dem Pluszeichen (+), um bei Bedarf einen weiteren Seitenparameter hinzuzufgen.
9 Um einen Seitenparameter wieder zu lschen, whlen Sie ihn aus und klicken Sie auf die Schaltflche mit dem
Datensatzgruppe ein, wenn die gespeicherte Prozedur eine Datensatzgruppe zurckgibt. Klicken Sie dann auf die Schaltflche Testen, um die von der gespeicherten Prozedur zurckgegebene Datensatzgruppe anzuzeigen. Dreamweaver fhrt die gespeicherte Prozedur aus und zeigt die Datensatzgruppe an, soweit vorhanden. Hinweis: Wenn die gespeicherte Prozedur eine Datensatzgruppe zurckgibt und Parameter verarbeitet, mssen Sie im Feld Variablen in der Spalte Standardwert einen Wert eingeben, um die gespeicherte Prozedur zu testen. Sie knnen andere Testwerte verwenden, um andere Datensatzgruppen zu generieren. Um die Testwerte zu ndern, klicken Sie fr Parameter auf die Schaltflche Bearbeiten und ndern den Testwert. Fr Seitenparameter klicken Sie auf die Schaltflche Bearbeiten und ndern dann den Standardwert.
11 Aktivieren Sie die Option Gibt Statuscode zurck namens und geben Sie einen Namen fr den Statuscode ein,
wenn die gespeicherte Prozedur einen Statuscode-Rckgabewert zurckgibt. Klicken Sie auf OK. Nachdem Sie das Dialogfeld geschlossen haben, fgt Dreamweaver ColdFusion-Code in Ihre Seite ein, der bei Ausfhrung auf dem Server eine gespeicherte Prozedur in der Datenbank aufruft. Die gespeicherte Prozedur wiederum fhrt eine Datenbankoperation aus, wie beispielsweise das Einfgen eines Datensatzes. Wenn die gespeicherte Prozedur Parameter verarbeitet, knnen Sie eine Seite erstellen, die die Parameterwerte erfasst und an die Seite mit der gespeicherten Prozedur sendet. Sie knnen beispielsweise eine Seite erstellen, auf der die Benutzer mithilfe von URL-Parametern oder eines HTML-Formulars Parameterwerte eingeben knnen.
Verwandte Themen
Erweiterte Datensatzgruppen durch manuelle SQL-Eingabe definieren auf Seite 602
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 682
Anwendungen visuell entwickeln
2 Klicken Sie im Bedienfeld Bindungen (Fenster > Bindungen) auf die Schaltflche mit dem Pluszeichen (+)
und whlen Sie dann die Option Befehl (gespeicherte Prozedur). Nun wird das Dialogfeld Befehl angezeigt.
3 Geben Sie einen Namen fr den Befehl ein, whlen Sie die Verbindung zur Datenbank, die die gespeicherte
Prozedur enthlt, und whlen Sie dann im Popupmen Typ die Option Gespeicherte Prozedur.
4 Whlen Sie die gespeicherte Prozedur aus, indem Sie im Feld Datenbankelemente den Zweig Gespeicherte
Prozeduren erweitern, die gespeicherte Prozedur in der Liste auswhlen und auf die Schaltflche Prozedur klicken.
5 Geben Sie erforderliche Parameter in die Tabelle Variablen ein.
You dont need to enter any parameters for any RETURN_VALUE variable.
6 Klicken Sie auf OK.
Nachdem Sie das Dialogfeld geschlossen haben, wird der ASP-Code in Ihre Seite eingefgt. Wenn der Code auf dem Server ausgefhrt wird, erstellt er ein Befehlsobjekt, das in der Datenbank eine gespeicherte Prozedur ausfhrt. Die gespeicherte Prozedur wiederum fhrt eine Datenbankoperation aus, wie beispielsweise das Einfgen eines Datensatzes. Standardmig setzt der Code die Eigenschaft Prepared des Befehlsobjekts auf true. Dies bewirkt die Wiederverwendung einer einzelnen kompilierten Version des Objekts durch den Anwendungsserver bei jeder Ausfhrung der gespeicherten Prozedur. Wenn Sie wissen, dass der Befehl hufiger ausgefhrt wird, kann die Verwendung einer einzelnen kompilierten Version des Objekts die Effizienz von Datenbankoperationen erhhen. Wird der Befehl jedoch nur ein ein- oder zweimal ausgefhrt, fhrt dies eher zu einer Verlangsamung der Webanwendung, weil das System zur Kompilierung des Befehls zustzliche Zeit aufwenden muss. Um die Einstellung zu ndern, wechseln Sie in die Codeansicht und ndern die Eigenschaft Prepared in false. Hinweis: Prepared-Befehle werden nicht von allen Datenbankherstellern untersttzt. Ist dies bei Ihrer Datenbank der Fall, wird mglicherweise eine Fehlermeldung ausgegeben, wenn Sie die Seite ausfhren. Wechseln Sie in die Codeansicht und ndern Sie die Eigenschaft Prepared in false. Wenn die gespeicherte Prozedur Parameter verarbeitet, knnen Sie eine Seite erstellen, die die Parameterwerte erfasst und an die Seite mit der gespeicherten Prozedur sendet. Sie knnen beispielsweise eine Seite erstellen, auf der die Benutzer mithilfe von URL-Parametern oder eines HTML-Formulars Parameterwerte eingeben knnen.
Registrierungsseiten erstellen
Registrierungsseiten
Ihre Webanwendung kann eine Seite enthalten, auf der Benutzer sich registrieren mssen, wenn sie Ihre Site zum ersten Mal besuchen. Fr eine Registrierungsseite sind die folgenden Bausteine erforderlich:
Eine Datenbanktabelle, in der Anmeldeinformationen zu den Besuchern gespeichert werden Ein HTML-Formular, in dem Besucher einen Benutzernamen und ein Kennwort whlen knnen
ber das Formular knnen Sie auch weitere Personendaten von Besuchern anfordern.
Ein Serververhalten Datensatz einfgen, mit dem die Datenbanktabelle der Sitebesucher aktualisiert wird
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 683
Anwendungen visuell entwickeln
Ein Serververhalten Neuen Benutzernamen berprfen, mit dem sichergestellt wird, dass der eingegebene
Benutzername nicht bereits von einem anderen Besucher verwendet wird
Verwandte Themen
HTML-Formulare fr die Auswahl von Benutzername und Kennwort hinzufgen auf Seite 683 Datenbanktabellen der Benutzer aktualisieren auf Seite 684 Serververhalten fr eindeutige Benutzernamen hinzufgen auf Seite 684
Achten Sie darauf, dass die Datenbanktabelle eine Spalte fr den Benutzernamen sowie eine Spalte fr das
Kennwort enthlt. Sollen die angemeldeten Besucher ber unterschiedliche Zugriffsrechte verfgen, muss die Tabelle auerdem eine Spalte fr die Zugriffsrechte enthalten.
Wenn Sie fr alle Besucher der Site ein gemeinsames Kennwort festlegen mchten, konfigurieren Sie Ihre
Datenbankanwendung (Microsoft Access, Microsoft SQL Server, Oracle usw.) so, dass das Kennwort standardmig in alle neuen Benutzerdatenstze eingetragen wird. In den meisten Datenbankanwendungen ist es mglich, eine Spalte fr alle neu erstellten Datenstze auf einen Standardwert einzustellen. Legen Sie dazu das Kennwort als Standardwert fest.
In der Datenbanktabelle knnen auch andere wichtige Personendaten ber Besucher gespeichert werden.
Im nchsten Schritt bei der Erstellung der Registrierungsseite fgen Sie ein HTML-Formular hinzu, damit Besucher gegebenenfalls einen Benutzernamen und ein Kennwort whlen knnen (soweit erforderlich).
Verwandte Themen
Zugriffsrechte in der Benutzerdatenbank speichern auf Seite 689
Men Einfgen den Befehl Formular whlen. Daraufhin wird ein leeres Formular auf der Seite erstellt. Eventuell mssen Sie die unsichtbaren Elemente aktivieren (Ansicht > Visuelle Hilfsmittel > Unsichtbare Elemente), damit die Formularrnder durch schmale rote Linien angezeigt werden.
3 Benennen Sie das HTML-Formular. Klicken Sie dazu unten im Dokumentfenster auf das Tag form, um das
Formular auszuwhlen, ffnen Sie dann den Eigenschafteninspektor (Fenster > Eigenschaften) und geben Sie den Namen im Feld Formularname ein.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 684
Anwendungen visuell entwickeln
Es ist nicht erforderlich, die Attribute action oder method festzulegen, um das Formular anzuweisen, wie und wohin die Datensatzdaten geschickt werden sollen, wenn der Benutzer auf die Schaltflche zum Senden klickt. Diese Attribute werden vom Serververhalten Datensatz einfgen automatisch festgelegt.
4 Fgen Sie Textfelder hinzu (Einfgen > Formular > Textfeld), in die Besucher einen Benutzernamen und ein
Kennwort eingeben knnen. Sie knnen dem Formular noch weitere Formularobjekte hinzufgen, in denen zustzliche Personendaten aufgezeichnet werden knnen. Es empfiehlt sich, neben den einzelnen Formularobjekten Beschriftungen hinzuzufgen (in Form von Text oder Bildern), um den Zweck der Formularobjekte zu verdeutlichen. Auch sollten Sie die Formularobjekte korrekt anordnen, indem Sie sie in einer HTML-Tabelle platzieren. Weitere Informationen zu Formularobjekten finden Sie unter Webformulare erstellen auf Seite 702.
5 Fgen Sie dem Formular eine Schaltflche zum Senden hinzu (Einfgen > Formular > Schaltflche).
Auf Wunsch knnen Sie die Beschriftung der Schaltflche zum Senden ndern. Whlen Sie dazu die Schaltflche aus, ffnen Sie den Eigenschafteninspektor (Fenster > Eigenschaften) und geben Sie im Feld Wert eine neue Beschriftung ein. Im nchsten Schritt zur Erstellung der Registrierungsseite fgen Sie das Serververhalten Datensatz einfgen hinzu, mit dem Datenstze in die Benutzertabelle der Datenbank eingefgt werden.
Pluszeichen (+) und whlen Sie im Popupmen die Option Datensatz einfgen. Das Dialogfeld Datensatz einfgen wird angezeigt.
2 Fllen Sie dieses Dialogfeld aus. Geben Sie dabei unbedingt die Benutzertabelle in der Datenbank an, in die die
Benutzerdaten eingefgt werden sollen. Klicken Sie auf OK. Schlielich mssen Sie noch sicherstellen, dass der Benutzername noch nicht von einem anderen registrierten Besucher verwendet wird, um die Erstellung der Registrierungsseite abzuschlieen.
Verwandte Themen
Einfgeseiten Schritt fr Schritt erstellen auf Seite 661
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 685
Anwendungen visuell entwickeln
Wenn der Besucher auf der Registrierungsseite auf die Schaltflche zum Senden klickt, vergleicht das Serververhalten den eingegebenen Benutzernamen mit den Benutzernamen, die in der Datenbanktabelle der registrierten Besucher gespeichert sind. Wenn der Benutzername nicht in der Datenbanktabelle vorhanden ist, fhrt das Serververhalten den Vorgang zum Einfgen des Datensatzes auf regulre Weise durch. Ist der Benutzername dagegen bereits vorhanden, bricht das Serververhalten den Vorgang zum Einfgen des Datensatzes ab und ffnet eine neue Seite (in der Regel wird der Besucher auf dieser Seite darauf hingewiesen, dass der Benutzername bereits verwendet wird).
1 Klicken Sie im Bedienfeld Serververhalten (Fenster > Serververhalten) auf die Schaltflche mit dem
Pluszeichen (+) und whlen Sie im Popupmen die Option Benutzeranmeldung > Neuen Benutzernamen berprfen.
2 Whlen Sie im Popupmen Feld fr Benutzername das Formulartextfeld aus, in das die Besucher Ihrer Site einen
Benutzernamen eingeben.
3 Geben Sie im Feld Wenn bereits vorhanden, hierher gehen die Seite an, die geffnet werden soll, wenn ein
bereinstimmender Benutzername in der Datenbanktabelle gefunden wird, und klicken Sie auf OK. In dieser Seite sollte der Besucher darauf hingewiesen werden, dass der Benutzername bereits vergeben ist. Auch sollte der Besucher die Mglichkeit erhalten, den Vorgang erneut zu versuchen.
Anmeldeseiten erstellen
Anmeldeseiten
Ihre Webanwendung kann eine Seite enthalten, mit der registrierte Besucher sich bei der Site anmelden knnen. Fr eine Registrierungsseite sind die folgenden Bausteine erforderlich:
Eine Datenbanktabelle der registrierten Besucher Ein HTML-Formular, in das Besucher einen Benutzernamen und ein Kennwort eingeben knnen Ein Serververhalten Benutzer anmelden, mit dem sichergestellt wird, dass die eingegebene Kombination aus
Benutzername und Kennwort gltig ist Wenn die Anmeldung erfolgreich ist, wird eine Sitzungsvariable fr den Besucher erstellt. Diese Variable besteht aus dem Benutzernamen.
Verwandte Themen
HTML-Formulare fr die Benutzeranmeldung hinzufgen auf Seite 686 Benutzernamen und Kennwort berprfen auf Seite 686
finden Sie unter dem folgenden Hyperlink zum verwandten Thema. Fgen Sie als nchsten Schritt beim Erstellen der Anmeldeseite ein HTML-Formular hinzu, mit dem sich Benutzer anmelden knnen. Anweisungen hierzu finden Sie im nchsten Thema.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 686
Anwendungen visuell entwickeln
Verwandte Themen
Registrierungsseiten erstellen auf Seite 682
Men Einfgen den Befehl Formular auswhlen. Daraufhin wird ein leeres Formular auf der Seite erstellt. Eventuell mssen Sie die unsichtbaren Elemente aktivieren (Ansicht > Visuelle Hilfsmittel > Unsichtbare Elemente), damit die Formularrnder durch schmale rote Linien angezeigt werden.
3 Benennen Sie das HTML-Formular. Klicken Sie dazu unten im Dokumentfenster auf das Tag form, um das
Formular auszuwhlen, ffnen Sie dann den Eigenschafteninspektor (Fenster > Eigenschaften) und geben Sie den Namen im Feld Formularname ein. Es ist nicht erforderlich, die Attribute action oder method festzulegen, um das Formular anzuweisen, wie und wohin die Datensatzdaten geschickt werden sollen, wenn der Benutzer auf die Schaltflche zum Senden klickt. Diese Attribute werden vom Serververhalten Benutzer anmelden automatisch festgelegt.
4 Fgen Sie dem Formular Textfelder fr den Benutzernamen und das Kennwort hinzu (Einfgen > Formular >
Textfeld). Fgen Sie neben den einzelnen Textfeldern Beschriftungen hinzu (in Form von Text oder Bildern) und ordnen Sie die Textfelder korrekt an, indem Sie sie in einer HTML-Tabelle platzieren und das Tabellenattribut border auf 0 einstellen.
5 Fgen Sie dem Formular eine Schaltflche zum Senden hinzu (Einfgen > Formular > Schaltflche).
Auf Wunsch knnen Sie die Beschriftung der Schaltflche zum Senden ndern. Whlen Sie dazu die Schaltflche aus, ffnen Sie den Eigenschafteninspektor (Fenster > Eigenschaften) und geben Sie im Feld Beschriftung einen neuen Wert ein. Als nchsten Schritt bei der Erstellung der Anmeldeseite fgen Sie das Serververhalten Benutzer anmelden hinzu, damit berprft wird, ob der eingegebene Benutzername und das eingegebene Kennwort gltig sind.
Pluszeichen (+) und whlen Sie im Popupmen die Option Benutzeranmeldung > Benutzer anmelden.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 687
Anwendungen visuell entwickeln
2 Geben Sie das Formular und die Formularobjekte an, in die die Besucher der Site ihren Benutzernamen und ihr
Kennwort eingeben.
3 (ColdFusion) Geben Sie bei Bedarf Ihren Benutzernamen und Ihr Kennwort ein. 4 Geben Sie die Datenbanktabelle und die Spalten an, in denen die Benutzernamen und die Kennwrter aller
registrierten Besucher gespeichert werden. Das Serververhalten vergleicht die Angaben des Besuchers zu Benutzernamen und Kennwort auf der Anmeldeseite mit den Werten in diesen Spalten.
5 Geben Sie die Seite an, die geffnet werden soll, wenn die Anmeldung erfolgreich ist.
Auf dieser Seite wird der Besucher in der Regel darauf hingewiesen, dass die Anmeldung nicht erfolgreich war. Auch sollte der Besucher die Mglichkeit erhalten, die Anmeldung erneut zu versuchen.
7 Sollen Benutzer, die nach dem Versuch, auf eine zugriffsbeschrnkte Seite zuzugreifen, zur Anmeldeseite
weitergeleitet wurden, nach erfolgter Anmeldung wieder zu der zugriffsbeschrnkten Seite umgeleitet werden, whlen Sie die Option Zum vorherigen URL gehen. Wenn ein Besucher versucht, auf Ihre Site zuzugreifen, indem er eine zugriffsbeschrnkte Seite ohne vorherige Anmeldung ffnet, kann die zugriffsbeschrnkte Seite den Besucher zur Anmeldeseite weiterleiten. Nachdem sich der Besucher erfolgreich angemeldet hat, leitet ihn die Anmeldeseite zu der zugriffsbeschrnkten Seite um, die ihn zuvor zur Anmeldeseite weitergeleitet hat. Wenn Sie auf diesen Seiten das Dialogfeld fr das Serververhalten Zugriff auf Seite beschrnken ausfllen, mssen Sie im Textfeld Bei verweigertem Zugriff hierher gehen Ihre Anmeldeseite angeben.
8 Geben Sie an, ob der Zugriff auf die Seite nur auf Basis des Benutzernamens und des Kennworts erfolgen soll oder
ob dabei auch Berechtigungsebenen bercksichtigt werden sollen, und klicken Sie auf OK. Der Anmeldeseite wird ein Serververhalten hinzugefgt, das berprft, ob die von einem Besucher eingegebene Kombination aus Benutzername und Kennwort gltig ist.
Verwandte Themen
Unberechtigte Benutzer zu einer anderen Seite umleiten auf Seite 688 Seiten erstellen, auf die nur autorisierte Benutzer zugreifen knnen auf Seite 687
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 688
Anwendungen visuell entwickeln
Berechtigungsebenen knnen auch eingesetzt werden, um neu registrierte Besucher zu berprfen, bevor Sie ihnen uneingeschrnkten Zugriff auf die Site gewhren. So knnen Sie beispielsweise festlegen, dass Besucher erst dann auf die Mitgliedsseiten einer Site zugreifen knnen, wenn eine entsprechende Zahlung eingegangen ist. Dazu richten Sie fr die Mitgliedsseiten die Autorisierungsebene Mitglied ein und gewhren neu registrierten Besuchern lediglich Gastzugriffsrechte. Sobald ein Besucher die erforderliche Zahlung geleistet hat, knnen Sie seine Zugriffsrechte ndern und ihm die Berechtigung Mitglied gewhren (in der Datenbanktabelle der registrierten Besucher). Wenn Sie keine Berechtigungsebenen verwenden mchten, knnen Sie beliebige Seiten Ihrer Site schtzen, indem Sie ihnen das Serververhalten Zugriff auf Seite beschrnken hinzufgen. Dieses Serververhalten bewirkt, dass alle nicht erfolgreich angemeldeten Besucher zu einer anderen Seite umgeleitet werden. Wenn Sie keine Berechtigungsebenen verwenden mchten, knnen Sie beliebige Seiten Ihrer Site mit den folgenden Bausteinen schtzen:
Serververhalten Zugriff auf Seite beschrnken, mit dem unberechtigte Besucher zu einer anderen Seite umgeleitet
werden
Zustzliche Spalte in der Besucher-Datenbanktabelle, um die Zugriffsrechte der einzelnen Besucher zu speichern
Unabhngig davon, ob Sie Berechtigungsebenen verwenden, knnen Sie der geschtzten Seite einen Hyperlink hinzufgen, mit dem der Besucher sich abmelden kann und durch den eventuell vorhandene Sitzungsvariablen gelscht werden.
Verwandte Themen
Ordner in Anwendungen schtzen (ColdFusion) auf Seite 690
Pluszeichen (+) und whlen Sie im Popupmen die Option Benutzeranmeldung > Zugriff auf Seite beschrnken.
3 Whlen Sie die Zugriffsebene fr die Seite aus. Damit nur Besucher mit bestimmten Zugriffsrechten die Seite
anzeigen knnen, whlen Sie die Option Benutzername, Kennwort und Zugriffsebene und geben dann die Berechtigungsebenen fr die Seite an. So knnen Sie beispielsweise festlegen, dass nur Besucher mit der Administratorberechtigung die Seite anzeigen knnen, indem Sie in der Berechtigungsebenenliste die Option Administrator auswhlen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 689
Anwendungen visuell entwickeln
4 Wenn Sie der Liste Berechtigungsebenen hinzufgen mchten, klicken Sie auf Definieren. Geben Sie in der Liste
Zugriffsebenen definieren eine neue Berechtigungsebene ein und klicken Sie auf die Schaltflche mit dem Pluszeichen (+). Die neue Berechtigungsebene wird gespeichert, sodass sie auch fr andere Seiten verwendet werden kann. Vergewissern Sie sich, dass die Zeichenfolge fr die Berechtigungsebene genau mit der in Ihrer Benutzerdatenbank gespeicherten Zeichenfolge bereinstimmt. Enthlt die Autorisierungsspalte in Ihrer Datenbank beispielsweise den Wert Administrator", dann mssen Sie auch Administrator und nicht etwa Admin im Feld Name eingeben.
5 Um mehrere Berechtigungsebenen fr eine Seite festzulegen, halten Sie die Strg-Taste (Windows) bzw. die
Befehlstaste (Macintosh) gedrckt, wenn Sie in der Liste auf die Berechtigungsebenen klicken. Sie knnen beispielsweise festlegen, dass alle Besucher, die ber Gast-, Mitglieds- oder Administratorberechtigungen verfgen, die Seite anzeigen knnen.
6 Geben Sie die Seite an, die geffnet werden soll, wenn ein unberechtigter Besucher versucht, auf die geschtzte Seite
zuzugreifen. Achten Sie darauf, dass fr diese Seite kein Zugriffsschutz gilt.
7 Klicken Sie auf OK.
Zugriffsrechte einer Seite kopieren und in andere Seiten der Site einfgen
1 ffnen Sie die geschtzte Seite und whlen Sie im Bedienfeld Serververhalten (nicht in dem Popupmen mit dem
Kopieren. Das Serververhalten Zugriff auf Seite beschrnken wird in die Zwischenablage kopiert.
3 ffnen Sie eine andere Seite, die auf die gleiche Weise geschtzt werden soll. 4 Klicken Sie im Bedienfeld Serververhalten (Fenster > Serververhalten) auf die Pfeilschaltflche oben rechts
Datenbanktabelle eine Spalte enthalten, in der die Zugriffsrechte der einzelnen Besucher angegeben werden (Gast, Besucher, Administrator usw.). Es ist Aufgabe des Siteadministrators, die Zugriffsrechte der einzelnen Benutzer in die Datenbank einzugeben. In den meisten Datenbankanwendungen ist es mglich, eine Spalte fr alle neu erstellten Datenstze auf einen Standardwert einzustellen. Geben Sie die hufigste Zugriffsberechtigung Ihrer Site (beispielsweise Gast) als Standardwert an und legen Sie die Ausnahmen manuell fest (indem Sie beispielsweise Gast zu Administrator ndern). Der Besucher kann nun auf alle Administratorseiten zugreifen.
2 Stellen Sie sicher, dass alle Besucher in der Datenbank nur ber eine Zugriffsberechtigung verfgen, wie
beispielsweise Gast oder Administrator, nicht aber ber mehrere Berechtigungen, wie Besucher, Administrator. Wenn Sie mehrere Zugriffsrechte fr Ihre Seiten festlegen mchten (damit beispielsweise alle Gste und Administratoren eine bestimmte Seite anzeigen knnen), legen Sie diese Berechtigungen nicht auf Datenbank-, sondern auf Seitenebene fest.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 690
Anwendungen visuell entwickeln
Benutzer abmelden
Wenn ein Besucher sich erfolgreich angemeldet hat, wird eine Sitzungsvariable erstellt, die aus dem Benutzernamen besteht. Wenn der Besucher die Site wieder verlsst, knnen Sie das Serververhalten Benutzer abmelden verwenden, um die Sitzungsvariable zu lschen und den Besucher zu einer anderen Seite umzuleiten (in der Regel zu einer Abschieds- oder Dankesseite). Das Serververhalten Benutzer abmelden kann aufgerufen werden, wenn der Besucher auf einen Hyperlink klickt oder wenn eine bestimmte Seite geladen wird.
Pluszeichen (+) und whlen Sie Benutzerauthentifizierung > Benutzer abmelden aus.
3 Geben Sie die Seite an, die geffnet werden soll, wenn der Besucher auf den Hyperlink klickt, und klicken Sie auf
OK. Dabei handelt es sich in der Regel um eine Abschieds- oder Dankesseite.
geffnet ist.
2 Fhren Sie die Schritte im ColdFusion-Anmeldeassistenten aus. a Geben Sie den vollstndigen Pfadnamen des zu schtzenden Ordners an und klicken Sie auf Weiter. b Whlen Sie im nchsten Bildschirm einen der folgenden Authentifizierungstypen aus:
Einfache Authentifizierung Schtzt die Anwendung mit einem einzelnen Benutzernamen und einem Kennwort fr
alle Benutzer.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 691
Anwendungen visuell entwickeln
Windows NT-Authentifizierung Schtzt Ihre Anwendung mit NT-Benutzernamen und -Kennwrtern. LDAP-Authentifizierung Schtzt Ihre Anwendungen mit Benutzernamen und Kennwrtern, die auf einem LDAP-
Wenn Sie Einfache Authentifizierung ausgewhlt haben, geben Sie den Benutzernamen und das Kennwort fr
jeden Benutzer an.
Wenn Sie Windows NT-Authentifizierung ausgewhlt haben, geben Sie die NT-Domne an, die zu
berprfungszwecken herangezogen wird.
Wenn Sie LDAP-Authentifizierung ausgewhlt haben, geben Sie den LDAP-Server an, der zu
berprfungszwecken herangezogen wird.
3 Laden Sie die neuen Dateien zur Remote-Site hoch. Die Dateien befinden sich im lokalen Site-Ordner.
Verwandte Themen
ColdFusion-Erweiterungen aktivieren auf Seite 718 Seiten erstellen, auf die nur autorisierte Benutzer zugreifen knnen auf Seite 687 Ordner in Anwendungen schtzen (ColdFusion) auf Seite 690
ColdFusion-Komponenten verwenden
ColdFusion-Komponenten
Mit ColdFusion-Komponentendateien (CFCs) knnen Sie Anwendungs- und Geschftslogik in separate, wiederverwendbare Einheiten einschlieen. CFCs bieten auch eine Mglichkeit zur schnellen und einfachen Erstellung von Webdiensten. Eine CFC ist eine wiederverwendbare Software-Einheit, die in CFML (ColdFusion Markup Language) geschrieben ist und die Wiederverwendung und Wartung Ihres Codes erleichtert. Sie knnen CFCs in Dreamweaver bearbeiten. Weitere Informationen ber CFC-Tags und die CFC-Syntax finden Sie in der ColdFusion-Dokumentation in der Dreamweaver-Hilfe (Hilfe > ColdFusion verwenden). Hinweis: CFCs knnen nur mit ColdFusion MX oder spteren Versionen eingesetzt werden. CFCs werden in ColdFusion 5 nicht untersttzt. CFCs sollen Entwicklern eine einfache, aber leistungsstarke Methode bieten, um Elemente ihrer Websites einzuschlieen. Im Allgemeinen werden diese Komponenten fr Anwendungs- oder Geschftslogik empfohlen. Verwenden Sie benutzerdefinierte Tags fr Prsentationselemente wie angepasste Begrungen, dynamische Mens usw. Wie bei zahlreichen Konstruktionsarten knnen austauschbare Teile auch fr dynamische Sites hufig von groem Nutzen sein. Beispielsweise kann eine dynamische Site dieselbe Abfrage wiederholt ausfhren oder den Gesamtpreis fr die Artikel auf Warenkorb-Seiten berechnen, wobei der Gesamtpreis jedes Mal neu berechnet wird, wenn dem Warenkorb ein Artikel hinzugefgt wird. Diese Aufgaben knnen von Komponenten bewltigt werden. Sie knnen Komponenten reparieren, verbessern, erweitern und sogar austauschen, ohne dass dies den Rest der Anwendung wesentlich beeinflusst.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 692
Anwendungen visuell entwickeln
Angenommen, in einem Online-Shop werden die Versandkosten auf Grundlage des Bestellwerts berechnet. Bei einem Bestellwert von weniger als 20 Euro betragen die Versandkosten 4 Euro. Bei einem Bestellwert zwischen 20 und 40 Euro fallen Versandkosten von 6 Euro an usw. Sie knnen die Logik fr die Berechnung der Versandkosten sowohl in die Warenkorb-Seite als auch in die Kassen-Seite einfgen. Dadurch wrde jedoch eine Mischung von HTMLPrsentationscode und CFML-Logikcode entstehen. Zudem wre der Code nur schwer zu verwalten und wiederzuverwenden. Hier empfiehlt es sich, eine CFC namens Preisberechnung zu erstellen, die unter anderem eine Funktion mit dem Namen Versandkosten enthlt. Dieser Funktion wird ein Preis als Argument bergeben, und anschlieend gibt sie den Versandkostenbetrag zurck. Wenn das Argument beispielsweise den Wert 32,80 hat, gibt die Funktion 6 zurck. Sie fgen sowohl in die Warenkorb-Seite als auch in die Kassen-Seite ein besonderes Tag ein, das die Funktion
Versandkosten aufruft. Wenn ein Browser die Seite anfordert, wird die Funktion aufgerufen, und der
Versandkostenbetrag wird an die Seite zurckgegeben. Zu einem spteren Zeitpunkt gibt der Online-Shop ein Sonderangebot bekannt: Kostenloser Versand fr alle Bestellungen ber 100 Euro. Sie ndern die Versandkosten nur an einer Stelle, und zwar in der Funktion Versandkosten der Komponente Preisberechnung. Auf allen Seiten, die diese Funktion verwenden, werden nun die korrekten Versandkosten angezeigt.
Verwandte Themen
Webseiten erstellen, die CFCs verwenden auf Seite 695
Komponenten aus.
3 Klicken Sie auf die Schaltflche mit dem Pluszeichen (+), fllen Sie das Dialogfeld Komponente erstellen aus und
verfgbaren Optionen:
Name In diesem Feld legen Sie den Dateinamen der Komponente fest. Der String darf nur alphanumerische Zeichen und Unterstriche (_) enthalten. Lassen Sie bei der Eingabe des Namens die Dateierweiterung .cfc weg. Komponentenverzeichnis Hier legen Sie fest, wo die Komponente gespeichert wird. Whlen Sie den Stammordner der
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 693
Anwendungen visuell entwickeln
b Um eine oder mehrere Funktionen fr die Komponente zu definieren, whlen Sie ganz links in der Liste
Abschnitt die Option Funktionen aus, klicken auf die Schaltflche mit dem Pluszeichen (+) und geben dann die Details einer neuen Funktion ein. Im Feld Rckgabetyp mssen Sie den Typ des Werts angeben, der von der Funktion zurckgegeben wird. Wenn Sie im Men Zugriff die Option remote auswhlen, steht die Funktion als Webdienst zur Verfgung.
c Um eines oder mehrere Argumente fr die Funktion zu definieren, whlen Sie links in der Liste Abschnitt die
Option Argumente aus, whlen Sie im Popupmen die Funktion aus, klicken Sie auf die Schaltflche mit dem Pluszeichen (+) und geben Sie dann die Details des neuen Arguments ein.
4 Wenn Sie mit einem Remote-Entwicklungsserver arbeiten, bertragen Sie die CFC-Datei und alle abhngigen
Dateien (wie Include-Dateien oder Dateien, mit denen eine Funktion implementiert wird) an den Remote-Server. Dadurch wird gewhrleistet, dass Dreamweaver-Funktionen wie die Live Data-Ansicht oder die Vorschau im Browser korrekt funktionieren. Dreamweaver erstellt eine CFC-Datei und speichert sie im angegebenen Ordner. Die neue Komponente wird auch im Bedienfeld Komponenten angezeigt, nachdem Sie auf Aktualisieren geklickt haben.
5 Wenn Sie eine Komponente entfernen mchten, mssen Sie die CFC-Datei manuell vom Server lschen.
Verwandte Themen
Webseiten erstellen, die CFCs verwenden auf Seite 695 ColdFusion-Komponenten auf Seite 691
Alle auf dem Server definierten ColdFusion-Komponenten auflisten. Wenn Sie ColdFusion MX 7 oder eine sptere Version ausfhren, knnen Sie die Liste filtern, damit nur die CFCs
im Site-Ordner angezeigt werden.
Die Funktionen und Argumente der einzelnen Komponenten untersuchen. Die Eigenschaften der Funktionen berprfen, die Webdienste zur Verfgung stellen.
Um CFCs im Stammordner des Servers mithilfe von Dreamweaver zu berprfen, whrend Sie gleichzeitig Ihre SiteDateien im Stammordner einer anderen Website verwalten, knnen Sie zwei Dreamweaver-Sites definieren. Richten Sie die erste Site so ein, dass Sie auf den Stammordner des Servers verweist, und die zweite so, dass Sie auf den Stammordner der Website verweist. Mithilfe des Popupmens im Bedienfeld Dateien knnen Sie schnell zwischen den beiden Sites wechseln.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 694
Anwendungen visuell entwickeln
Komponenten aus.
3 Klicken Sie im Bedienfeld auf die Schaltflche Aktualisieren, um die Komponenten abzurufen.
Das Komponentenpaket wird auf dem Server angezeigt. Bei einem Komponentenpaket handelt es sich um einen Ordner, der CFC-Dateien enthlt. Wenn keine vorhandenen Komponentenpakete angezeigt werden, klicken Sie in der Symbolleiste des Bedienfelds auf die Schaltflche Aktualisieren.
4 Um nur die im Site-Ordner befindlichen CFCs anzuzeigen, klicken Sie in der Symbolleiste des Bedienfelds
Komponenten auf die Schaltflche Nur CFCs der aktuellen Site anzeigen. Hinweis: Diese Funktion ist nur verfgbar, wenn Sie einen Computer als Testserver fr Dreamweaver definiert haben, auf dem ColdFusion MX 6 oder eine sptere Version ausgefhrt wird. Hinweis: Wenn die aktuelle Site in einem virtuellen Ordner auf dem Remote-Server aufgelistet ist, funktioniert das Filtern nicht.
5 Klicken Sie auf die Schaltflche mit dem Pluszeichen (+) neben einem Paketnamen, um die im Paket enthaltenen
Komponenten anzuzeigen.
Klicken Sie auf die Schaltflche mit dem Pluszeichen (+) neben einem Komponentennamen, um die Funktionen
dieser Komponente aufzulisten.
ffnen Sie den Zweig einer Funktion in der Strukturansicht, um die Argumente sowie die Argumenttypen dieser
Funktion anzuzeigen. So knnen Sie auch feststellen, ob die Argumente erforderlich oder optional sind. Neben Funktionen, fr die es keine Argumente gibt, wird kein Pluszeichen (+) angezeigt.
Um rasch Einzelheiten ber ein Argument, eine Funktion, eine Komponente oder ein Paket anzuzeigen, whlen
Sie das entsprechende Element in der Strukturansicht aus und klicken Sie dann in der Symbolleiste des Bedienfelds auf die Schaltflche Details abrufen. Sie knnen auch mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste (Macintosh) auf das Element klicken und dann im Popupmen Details abrufen whlen. Einzelheiten ber das Element werden in einem Meldungsfeld angezeigt.
Verwandte Themen
Testserver einrichten auf Seite 49 ColdFusion-Erweiterungen aktivieren auf Seite 718 Webseiten erstellen, die CFCs verwenden auf Seite 695
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 695
Anwendungen visuell entwickeln
Im erweiterten Dreamweaver-Dialogfeld Site-Definition muss in der Kategorie Testserver unter Zugriff die
Option Lokal/Netzwerk festgelegt sein.
Im erweiterten Dialogfeld Site-Definition muss der Pfad des lokalen Stammordners mit dem Pfad des TestserverOrdners bereinstimmen (beispielsweise C:\Inetpub\wwwroot\cf_projects\MeineNeueAnwendung\). Whlen Sie Site > Sites verwalten, um diese Pfade zu berprfen und zu ndern.
Die Komponenten mssen im lokalen Site-Ordner oder in einem seiner Unterordner auf Ihrer Festplatte
gespeichert werden. ffnen Sie eine beliebige ColdFusion-Seite in Dreamweaver und zeigen Sie die Komponenten im Bedienfeld Komponenten an. Um die Komponenten anzuzeigen, ffnen Sie das Bedienfeld Komponenten (Fenster > Komponenten), whlen Sie im Popupmen die Option CF-Komponenten aus und klicken Sie dann im Bedienfeld auf die Schaltflche Aktualisieren. Da ColdFusion lokal ausgefhrt wird, zeigt Dreamweaver die Komponentenpakete auf Ihrer Festplatte an. Um eine Komponente zu bearbeiten, fhren Sie die folgenden Schritte aus:
1 ffnen Sie eine beliebige ColdFusion-Seite in Dreamweaver und zeigen Sie die Komponenten im Bedienfeld
die Schaltflche Aktualisieren. Da ColdFusion lokal ausgefhrt wird, zeigt Dreamweaver die Komponentenpakete auf Ihrer Festplatte an. Hinweis: Um die CFC-Datensatzgruppe interaktiv zu bearbeiten, doppelklicken Sie im Bedienfeld Bindungen auf die Datensatzgruppe.
3 Um eine Komponentendatei allgemein zu bearbeiten, ffnen Sie das Paket und doppelklicken in der
Strukturansicht auf den Komponentennamen. Die Komponentendatei wird in der Codeansicht geffnet.
4 Um bestimmte Funktionen, Argumente oder Eigenschaften zu bearbeiten, doppelklicken Sie in der Strukturansicht
Verwandte Themen
CFCs in Dreamweaver anzeigen auf Seite 693
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 696
Anwendungen visuell entwickeln
3 ffnen Sie das Bedienfeld Komponenten (Fenster > Komponenten) und whlen Sie im Popupmen die
Ziehen Sie eine Funktion aus der Strukturansicht in die Seite. Code zum Aufrufen der Funktion wird in die Seite
eingefgt.
Whlen Sie die Funktion im Bedienfeld aus und klicken Sie in der Symbolleiste des Bedienfelds auf die Schaltflche
Einfgen (die zweite Schaltflche rechts). Dreamweaver fgt den Code an der Einfgemarke in die Seite ein.
5 Wenn die eingefgte Funktion ber Argumente verfgt, stellen Sie den Code fr die Argumente manuell fertig.
Weitere Informationen finden Sie in der ColdFusion-Dokumentation in der Dreamweaver-Hilfe (Hilfe > ColdFusion verwenden).
6 Speichern Sie die Seite (Datei > Speichern).
und whlen Sie im Popupmen die Option Datensatzgruppe (Abfrage). Das Dialogfeld Datensatzgruppe wird angezeigt. Sie knnen in der einfachen oder der erweiterten Version des Dialogfelds Datensatzgruppe arbeiten.
3 Um eine existierende Funktion in der CFC zu verwenden, whlen Sie diese im Popupmen Funktionen aus und
fahren mit Schritt 5 fort. Die Datensatzgruppe wird in der Funktion definiert.
4 Um eine neue Funktion in der CFC zu definieren, klicken Sie auf die Schaltflche Neue Funktion, geben einen
Namen fr die Funktion in das Dialogfeld ein und klicken dann auf OK. Der String darf nur alphanumerische Zeichen und Unterstriche (_) enthalten.
5 Um eine Datensatzgruppe fr die Funktion zu definieren, fllen Sie die Optionen des Dialogfelds
Datensatzgruppe aus. Die neue Funktion wird in die CFC eingefgt, die den Datensatz definiert.
Verwandte Themen
CFCs in Dreamweaver erstellen oder lschen auf Seite 692
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 697
Anwendungen visuell entwickeln
Hinweis: Diese Funktion ist nur verfgbar, wenn Sie Zugriff auf einen Computer besitzen, auf dem ColdFusion MX 7 oder eine sptere Version ausgefhrt wird. Weitere Informationen finden Sie unter ColdFusion-Erweiterungen aktivieren.
1 ffnen Sie eine ColdFusion-Seite in Dreamweaver. 2 Klicken Sie im Bedienfeld Bindungen (Fenster > Bindungen) auf die Schaltflche mit dem Pluszeichen (+)
und whlen Sie im Popupmen die Option Datensatzgruppe (Abfrage). Das Dialogfeld Datensatzgruppe wird angezeigt. Sie knnen in der einfachen oder der erweiterten Version des Dialogfelds Datensatzgruppe arbeiten.
3 Klicken Sie auf die Schaltflche CFC-Abfrage. 4 Fllen Sie das Dialogfeld CFC-Abfrage aus und klicken Sie auf OK. Klicken Sie dann noch einmal auf OK,
um die CFC-Datensatzgruppe der Liste der verfgbaren Inhaltsquellen im Bedienfeld Bindungen hinzuzufgen.
5 Verwenden Sie das Bedienfeld Bindungen, um die Datensatzgruppe an verschiedene Seitenelemente zu binden.
Weitere Informationen finden Sie unter Dynamischen Inhalt in Seiten einfgen auf Seite 615.
blicherweise werden Namen von Datensatzgruppen mit dem Prfix rs versehen, um sie von anderen Objektnamen im Code zu unterscheiden, wie z. B. rsPressRelease. Datensatzgruppennamen drfen nur alphanumerische Zeichen und Unterstriche (_) enthalten. Sonderzeichen und Leerzeichen sind nicht zulssig.
2 Whlen Sie eines der bereits auf dem Server definierten Pakete aus.
Wenn das Paket nicht im Popupmen angezeigt wird, knnen Sie die Liste der Pakete aktualisieren, indem Sie auf die Schaltflche Aktualisieren neben dem Popupmen klicken. Stellen Sie sicher, dass Sie die CFCs zunchst zum Testserver hochladen. Es werden nur CFCs auf dem Testserver angezeigt.
3 Whlen Sie eine der im aktuell ausgewhlten Paket definierten Komponenten aus.
Wenn das Popupmen Komponenten keine oder keine der zuvor erstellten Komponenten enthlt, mssen Sie die CFC-Dateien zum Testserver hochladen.
4 Optional: Um eine Komponente zu erstellen, klicken Sie auf die Schaltflche Neue Komponente erstellen. a Geben Sie im Feld Name einen Namen fr die neue CFC ein. Der String darf nur alphanumerische Zeichen und
Ordner ber die Dateistruktur. Hinweis: Der Ordner muss relativ zum Stammordner der Site angegeben werden.
5 Whlen Sie im Popupmen Funktionen die Funktion aus, die die Datensatzgruppendefinition enthlt.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 698
Anwendungen visuell entwickeln
Das Popupmen Funktionen enthlt nur die Funktionen, die in der aktuell ausgewhlten Komponente definiert sind. Wenn in diesem Popupmen keine Funktion angezeigt wird oder Ihre letzten nderungen in der Liste nicht bercksichtigt werden, berprfen Sie, ob die betreffenden nderungen gespeichert und zum Server hochgeladen wurden. Hinweis: Die Textfelder Verbindung und SQL sind schreibgeschtzt.
6 Geben Sie alle Parameter (Typ, Wert und Standardwert) ein, die als Funktionsargument bergeben werden
und den Wert in das Feld auf der rechten Seite eingeben. Der Wertetyp kann ein URL-Parameter, eine Formularvariable, ein Cookie, eine Sitzungsvariable, eine Anwendungsvariable oder ein eingegebener Wert sein.
b Geben Sie im Feld Standardwert einen Standardwert fr den Parameter ein.
Sie knnen die Datenbankverbindung und die SQL-Abfrage fr die Datensatzgruppe nicht ndern. Diese Felder sind immer deaktiviert: Verbindung und SQL-Abfrage werden nur zu Informationszwecken angezeigt.
7 Klicken Sie auf Testen, um eine Verbindung zur Datenbank herzustellen und eine Instanz der Datensatzgruppe
zu erstellen. Wenn die SQL-Anweisung Seitenparameter enthlt, muss die Spalte Standardwert des Felds Parameter gltige Testwerte enthalten, bevor Sie auf Testen klicken. Wenn die Abfrage erfolgreich ausgefhrt wurde, wird eine Tabelle mit der Datensatzgruppe angezeigt. Jede Zeile enthlt einen Datensatz, und jede Spalte entspricht einem Feld in diesem Datensatz. Klicken Sie auf OK, um die CFC-Abfrage zu lschen.
8 Klicken Sie auf OK.
ENTWURF
Letzte Aktualisierung 19.3.2010
699
Benutzerinformationen sammeln
Allgemeines zum Sammeln von Benutzerinformationen
Mithilfe von Webformularen oder Hypertext-Links knnen Sie Benutzerinformationen erfassen, diese Informationen im Arbeitsspeicher des Servers speichern und anhand dieser Daten anschlieend eine dynamische Antwort auf die Eingabe des Benutzers erstellen. Die gngigsten Werkzeuge zum Sammeln von Benutzerinformationen sind HTMLFormulare und Hypertext-Verknpfungen (auch Hyperlinks genannt).
HTML-Formulare ermglichen Ihnen, Informationen von Benutzern zu sammeln und im Arbeitsspeicher des Servers
zu speichern. Ein HTML-Formular kann die Informationen entweder als Formularparameter oder als URL-Parameter senden.
Hypertext-Verknpfungen ermglichen Ihnen, Informationen von Benutzern zu sammeln und im Arbeitsspeicher des Servers zu speichern. Werte, die bertragen werden sollen, wenn ein Benutzer auf einen Hyperlink klickt, z. B. Werte einer bestimmten Option, geben Sie an, indem Sie sie an die im Anker-Tag festgelegte URL anhngen. Wenn ein Benutzer auf den Hyperlink klickt, sendet der Browser die URL und den angehngten Wert an den Server.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 700
Formulare erstellen
Formularparameter erhalten die Namen von ihren entsprechenden Formularobjekten. Wenn Ihr Formular beispielsweise ein Textfeld mit dem Namen txtLastName enthlt, wird der folgende Formularparameter an den Server gesendet, wenn der Benutzer auf die Schaltflche zum Senden klickt:
txtLastName=enteredvalue
In den Fllen, in denen eine Webanwendung einen genauen Parameterwert erwartet (z. B. wenn eine Aktion basierend auf einer von mehreren Optionen durchgefhrt wird), steuern Sie die Werte, die ein Benutzer senden kann, mit einem Optionsfeld-, Kontrollkstchen- oder Listen-/Menformularobjekt. Auf diese Weise wird verhindert, dass der Benutzer Informationen falsch eingibt und einen Anwendungsfehler verursacht. Im folgenden Beispiel ist ein Popupmenformular mit drei Auswahlmglichkeiten dargestellt:
Jede Menoption entspricht einem fest kodiertem Wert, der als Formularparameter an den Server gesendet wird. Im Dialogfeld Listenwerte im folgenden Beispiel wird jedes Listenelement einem Wert (Add, Update oder Delete) zugeordnet:
Nachdem ein Formularparameter erstellt wurde, kann Dreamweaver den Wert abrufen und in einer Webanwendung verwenden. Nachdem Sie den Formularparameter in Dreamweaver definiert haben, knnen Sie den entsprechenden Wert in eine Seite einfgen.
Verwandte Themen
Webformulare erstellen auf Seite 702 Dynamischen Inhalt in Seiten einfgen auf Seite 615 Auf Datenbanken zugreifen auf Seite 558
URL-Parameter
Mit URL-Parametern knnen Sie die vom Benutzer gelieferten Daten vom Browser an den Server senden. Wenn ein Server eine Anforderung empfngt und der URL der Anforderung Parameter angehngt sind, stellt der Server die Parameter der angeforderten Seite zur Verfgung, bevor er die Seite an den Browser zurckgibt.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 701
Formulare erstellen
Ein URL-Parameter ist ein an eine URL angehngtes Name-Wert-Paar. Der Parameter beginnt mit einem Fragezeichen (?) und hat den Aufbau name=value. Wenn mehrere URL-Parameter vorhanden sind, werden sie jeweils durch ein Et-Zeichen (&) voneinander getrennt. Im folgenden Beispiel ist ein URL-Parameter mit zwei Name-WertPaaren dargestellt:
http://server/path/document?name1=value1&name2=value2
In diesem Beispielarbeitsablauf handelt es sich bei der Anwendung um einen Online-Shop. Da die Entwickler der Site eine mglichst breite Zielgruppe erreichen mchten, untersttzt die Site unterschiedliche Whrungen. Wenn Benutzer sich an der Site anmelden, knnen sie die Whrung auswhlen, in der die Preise der verfgbaren Artikel angezeigt werden sollen.
1 Der Browser fordert vom Server die Seite report.cfm an. Die Anforderung enthlt den URL-Parameter
Currency="euro". Die Variable Currency="euro" legt fest, dass alle abgerufenen Geldbetrge in Euro angezeigt werden.
2 Der Server speichert den URL-Parameter vorbergehend im Arbeitsspeicher. 3 Die Seite report.cfm verwendet den Parameter, um die Preise der Artikel in Euro abzurufen. Diese Geldbetrge
knnen entweder in einer Datenbanktabelle unterschiedlicher Whrungen gespeichert oder aus einer einzelnen Whrung umgerechnet werden, die mit dem jeweiligen Artikel verknpft ist. Dabei kann es sich um jede von der Anwendung untersttzte Whrung handeln.
4 Der Server sendet die Seite report.cfm an den Browser und zeigt den Wert der Artikel in der angeforderten
Whrung an. Wenn dieser Benutzer die Sitzung beendet, lscht der Server den Wert des URL-Parameters und gibt so Serverspeicher fr neue Benutzeranforderungen frei.
WEBSERVER
http://www.mysite.com/ report.cfm?Currency="" Currency=""
Webbrowser
<HTML> <code> </HTML>
report.cfm
URL-Parameter werden zudem erstellt, wenn die HTTP-Methode GET in Verbindung mit einem HTML-Formular verwendet wird. Die Methode GET legt fest, dass der Parameterwert beim Absenden des Formulars an die URLAnfrage angehngt wird. Zu hufigen Einsatzgebieten von URL-Parametern zhlen personalisierte Websites, die auf Benutzervoreinstellungen beruhen. Beispielsweise knnen mithilfe eines aus Benutzername und Kennwort bestehenden URL-Parameters Benutzer authentifiziert und anschlieend nur die Informationen angezeigt werden, die der jeweilige Benutzer abonniert hat. Gngige Beispiele hierfr sind Finanzwebsites, die einzelne Aktienkurse basierend auf Brsensymbolen anzeigen, die der Benutzer zuvor gewhlt hat. Entwickler von Webanwendungen bergeben mit URL-Parametern hufig Werte an Variablen innerhalb einer Anwendung. Beispielsweise knnen Sie Suchbegriffe an SQL-Variablen in einer Webanwendung bergeben, um Suchergebnisse zu erzeugen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 702
Formulare erstellen
Dieselben URL-Parameter knnen Sie mit dem Eigenschafteninspektor (Fenster > Eigenschaften) erstellen. Whlen Sie hierzu den Hyperlink aus und fgen Sie die URL-Parameterwerte an das Ende der Hyperlink-URL im Feld Hyperlink des Eigenschafteninspektors an.
Nachdem ein URL-Parameter erstellt wurde, kann Dreamweaver den Wert abrufen und in einer Webanwendung verwenden. Nachdem Sie den URL-Parameter in Dreamweaver definiert haben, knnen Sie den entsprechenden Wert in eine Seite einfgen.
Verwandte Themen
URL- und Formularparameter auf Seite 593 Hyperlinks erstellen auf Seite 291 Formularparameter definieren auf Seite 607 Dynamischen Inhalt in Seiten einfgen auf Seite 615 Auf Datenbanken zugreifen auf Seite 558
Webformulare erstellen
Webformulare
Wenn ein Besucher in einem Browser Informationen in einem Webformular eingibt und auf die Schaltflche zum Senden klickt, werden die Informationen an einen Server gesendet, auf dem sie von einem serverbasierten Skript oder einer serverbasierten Anwendung verarbeitet werden. Der Server reagiert, indem die verarbeiteten Informationen zurck an den Benutzer (oder Client) gesendet oder andere Aktionen ausgefhrt werden, die auf dem Inhalt des Formulars basieren.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 703
Formulare erstellen
Sie knnen Formulare erstellen, die Daten an die meisten Anwendungsserver (einschlielich PHP, ASP und ColdFusion) bermitteln. Wenn Sie ColdFusion verwenden, knnen Sie Formularen zudem ColdFusion-spezifische Formularsteuerelemente hinzufgen. Hinweis: Sie knnen Formulardaten auch direkt an einen E-Mail-Adressaten senden.
Verwandte Themen
Benutzerinformationen sammeln auf Seite 699 ColdFusion-Formulare erstellen auf Seite 718
Formularobjekte
Formulareingabetypen werden in Dreamweaver als Formularobjekte bezeichnet. Formularobjekte ermglichen Benutzern das Eingeben von Daten. Sie knnen die folgenden Formularobjekte in ein Formular aufnehmen:
Textfelder akzeptieren beliebige alphanumerische Texteingaben. Der Text kann einzeilig, mehrzeilig oder als
Kennwortfeld angezeigt werden, in welchem der eingegebene Text durch Sternchen oder Punkte ersetzt wird, damit Auenstehende den Text nicht mitlesen knnen.
Hinweis: Kennwrter und andere Informationen, die ber ein Kennwortfeld an den Server gesendet werden, sind nicht verschlsselt. Die bertragenen Daten knnen abgefangen und als alphanumerischer Text gelesen werden. Aus diesem Grund sollten Sie Daten, die vertraulich bleiben sollen, immer verschlsseln.
Versteckte Felder ermglichen es Ihnen, vom Besucher eingegebene Informationen zu speichern. Hierzu zhlen z. B.
der Name, die E-Mail-Adresse und Anzeigeprferenzen. Diese Daten knnen dann beim nchsten Site-Besuch des Benutzers verwendet werden.
Schaltflchen fhren Aktionen aus, wenn ein Benutzer darauf klickt. Sie knnen einer Schaltflche einen
benutzerdefinierten Namen bzw. eine benutzerdefinierte Beschriftung geben oder eine der vordefinierten Beschriftungen (Senden oder Zurcksetzen) verwenden. Verwenden Sie zum Senden von Formulardaten an den Server oder zum Zurcksetzen des Formulars eine Schaltflche. Sie knnen auch andere Verarbeitungsaufgaben zuweisen, die Sie in einem Skript definieren. Beispielsweise kann eine Schaltflche die Gesamtkosten ausgewhlter Artikel basierend auf zugewiesenen Werten berechnen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 704
Formulare erstellen
Kontrollkstchen ermglichen mehrere Antworten innerhalb einer Gruppe von Optionen. Der Benutzer kann so viele Optionen auswhlen, wie zutreffen. Im folgenden Beispiel sind drei Kontrollkstchen aktiviert: Surfing, Mountain Biking und Rafting.
Optionsschalter reprsentieren Optionen, die sich gegenseitig ausschlieen. Wird eine Schaltflche innerhalb einer
Optionsschaltergruppe gewhlt, werden dadurch alle anderen Schaltflchen in der Gruppe deaktiviert (eine Gruppe besteht aus zwei oder mehr Schaltflchen gleichen Namens). Im Beispiel unten ist die Option Rafting ausgewhlt. Wenn der Benutzer auf Surfing klickt, wirdRafting automatisch deaktiviert.
Liste/Men zeigt Optionswerte in einer Liste mit Rollbalken an, in welcher der Besucher mehrere Optionen auswhlen
kann. Die Option Liste zeigt die Optionswerte in einem Men an, in welchem der Benutzer nur eine Auswahl treffen kann. Verwenden Sie Mens, wenn Sie nur ber einen begrenzten Platz verfgen, jedoch viele Elemente anzeigen mssen, oder wenn Sie die an den Server zurckgegebenen Werte steuern mchten. Anders als bei Textfeldern, in die der Benutzer beliebige Zeichenfolgen eingibt, die sogar ungltig sein knnen, legen Sie die Werte genau fest, die vom Men zurckgegeben werden. Hinweis: Ein Popupmen in einem HTML-Formular ist nicht mit einem grafischen Popupmen identisch. Informationen zum Erstellen, Bearbeiten, Anzeigen und Ausblenden eines grafischen Popupmens finden Sie unter dem Hyperlink am Ende dieses Abschnitts.
Sprungmens sind Navigationslisten oder Popupmens, die es Ihnen ermglichen, ein Men einzufgen, in dem jede
Schaltflchen wie Senden oder Zurcksetzen zu erstellen. Wenn Sie zur Ausfhrung bestimmter Aufgaben (mit Ausnahme des Absendens von Daten) ein Bild verwenden, muss an das Formularobjekt ein Verhalten angehngt werden.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 705
Formulare erstellen
Verwandte Themen
Verhalten Popupmen anzeigen definieren auf Seite 382
HTML-Formulare erstellen
1 ffnen Sie eine Seite und setzen Sie die Einfgemarke an die Stelle, an der das Formular angezeigt werden soll. 2 Whlen Sie Einfgen > Formular aus oder whlen Sie im Bedienfeld Einfgen die Kategorie Formulare aus
und klicken Sie auf das Symbol Formular. In der Entwurfsansicht sind Formulare durch einen rot gepunkteten Rahmen gekennzeichnet. Wenn der Rahmen nicht sichtbar ist, whlen Sie Ansicht > Visuelle Hilfsmittel > Unsichtbare Elemente.
3 Legen Sie die Eigenschaften des HTML-Formulars im Eigenschafteninspektor (Fenster > Eigenschaften) fest: a Klicken Sie im Dokumentfenster auf den Formularrahmen, um das Formular auszuwhlen. b Geben Sie im Feld Formularname einen eindeutigen Namen fr das Formular ein.
Wenn Sie ein Formular benennen, knnen Sie es mit einer Skriptsprache, wie z. B. JavaScript oder VBScript, steuern oder darauf verweisen. Wenn Sie dem Formular keinen Namen geben, erzeugt Dreamweaver anhand der Syntax formn einen Namen und erhht den Wert von n bei jedem der Seite hinzugefgten Formular.
c Geben Sie im Feld Aktion die Seite oder das Skript zur Verarbeitung der Formulardaten an. Geben Sie entweder
den Pfad ein oder klicken Sie auf das Ordnersymbol, um zur gewnschten Seite bzw. zum gewnschten Skript zu navigieren. Beispiel: processorder.php.
d Legen Sie im Popupmen Methode die Methode fest, die zum bertragen der Formulardaten zum Server
Verwenden Sie die Methode GET nicht zum Senden langer Formulare. URLs drfen maximal 8192 Zeichen lang sein. Falls die Menge der gesendeten Daten zu gro ist, werden Daten abgeschnitten, wodurch unerwartete oder fehlerhafte Verarbeitungsergebnisse entstehen. Dynamische Seiten, die von den Parametern der Methode GET generiert werden, knnen mit einem Lesezeichen versehen werden, da die URL in der Adresszeile des Browsers alle Werte enthlt, die zu einem erneuten Aufbau der Seite bentigt werden. Fr Lesezeichen ungeeignet sind dynamische Seiten, die aus den Parametern der Methode POST erzeugt werden. Wenn Sie vertrauliche Benutzernamen und Kennwrter, Kreditkartennummern und andere vertrauliche Informationen erfassen, mag die Methode POST sicherer als die Methode GET erscheinen. Allerdings sind die Daten, die mit der MethodePOST gesendet werden, unverschlsselt und knnen von einem Hacker ohne groen Aufwand mitgelesen werden. Wenn es auf Sicherheit ankommt, sollten Sie unbedingt eine sichere Verbindung zu einem sicheren Server einsetzen.
e (Optional) Legen Sie im Popupmen Kod.-Typ den MIME-Kodierungstyp der Daten fest, die zur Verarbeitung
an den Server gesendet werden. Die Standardeinstellung fr application/x-www-form-urlencode ist blicherweise die Methode POST . Wenn Sie ein Feld zum bertragen einer Datei erstellen, geben Sie multipart/form-data als MIME-Typ an.
f
(Optional) Geben Sie im Popupmen Ziel das Fenster an, in welchem die vom aufgerufenen Programm zurckgegebenen Daten angezeigt werden sollen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 706
Formulare erstellen
Wenn das angegebene Fenster nicht bereits geffnet ist, wird ein neues Fenster mit diesem Namen geffnet. Whlen Sie einen der folgenden Zielwerte:
_blank ffnet das Zieldokument in einem neuen, unbenannten Fenster. _parent ffnet das Zieldokument im bergeordneten Fenster des Fensters, in dem das aktuelle Dokument angezeigt
wird.
_self ffnet das Zieldokument in dem Fenster, in welchem das Formular abgeschickt wurde. _top ffnet das Zieldokument im Hauptteil des aktuellen Fensters. Mit diesem Wert lsst sich sicherstellen, dass das Zieldokument das gesamte Fenster einnimmt, auch wenn das ursprngliche Dokument in einem Rahmen angezeigt wurde.
4 Fgen Sie Formularobjekte auf der Seite ein: a Setzen Sie die Einfgemarke an die Stelle im Formular, an welcher das Formularobjekt stehen soll. b Whlen Sie das Objekt unter Einfgen > Formular oder in der Kategorie Formulare des Bedienfelds
Einfgen aus.
c Fllen Sie das Dialogfeld Eingabehilfen-Attribute fr Input-Tag aus. Weitere Informationen erhalten Sie auch,
wenn Sie im Dialogfeld auf die Hilfeschaltflche klicken. Hinweis: Wenn das Dialogfeld Eingabehilfen-Attribute fr Input-Tag nicht angezeigt wird, befand sich die Einfgemarke mglicherweise in der Codeansicht, als Sie versucht haben, das Formularobjekt einzufgen. Stellen Sie sicher, dass sich die Einfgemarke in der Entwurfsansicht befindet, und wiederholen Sie den Vorgang. Weitere Informationen zu diesem Thema finden Sie im Artikel von David Powers Creating HTML forms in Dreamweaver (in englischer Sprache).
d Legen Sie die Eigenschaften der Objekte fest. e Geben Sie im Eigenschafteninspektor einen Namen fr das Objekt ein.
Alle Objekte des Typs Textfeld, verstecktes Feld, Kontrollkstchen und Liste/Men mssen einen eindeutigen Namen haben, anhand dessen sich diese Objekte im Formular identifizieren lassen. Namen von Formularobjekten drfen weder Leerzeichen noch Sonderzeichen enthalten. Alphanumerische Zeichen und der Unterstrich (_) knnen in beliebiger Kombination verwendet werden. Die Beschriftung, die Sie dem Objekt zuweisen, ist der Variablenname, unter welchem der Wert (die eingegebenen Daten) des Feldes gespeichert wird. Dies ist der Wert, der zur Verarbeitung an den Server gesendet wird. Hinweis: Alle Optionsschalter einer Gruppe mssen denselben Namen haben.
f
Wenn Sie das Textfeld, das Kontrollkstchen oder den Optionsschalter auf der Seite beschriften mchten, klicken Sie neben dem Objekt und geben Sie die Beschriftung ein.
Zur Gestaltung Ihrer Formulare knnen Sie Zeilenumbrche, Absatzumbrche, vorformatierten Text und Tabellen einsetzen. Sie knnen ein Formular nicht in ein anderes Formular einfgen (d. h. die Tags drfen sich nicht berschneiden). Eine Seite kann aber mehrere Formulare enthalten. Achten Sie bei der Gestaltung von Formularen darauf, den Formularfeldern eine eindeutige Beschreibung zu geben. Dann wissen die Besucher, was von ihnen erwartet wird. Geben Sie beispielsweise Bitte Namen eingeben an, wenn ein Besucher seinen Namen eingeben soll. Mit Tabellen knnen Sie Formularobjekten und Feldbeschriftungen eine Struktur verleihen. Achten Sie bei der Verwendung von Tabellen in Formularen darauf, dass sich alle table-Tags innerhalb der form-Tags befinden. Ein Tutorial zum Erstellen von Formularen finden Sie unter www.adobe.com/go/vid0160_de.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 707
Formulare erstellen
Ein Tutorial zum Gestalten von Formularen mit CSS finden Sie unter www.adobe.com/go/vid0161_de.
Verwandte Themen
Benutzerinformationen sammeln auf Seite 699 Formularparameter definieren auf Seite 607 URL-Parameter definieren auf Seite 606 ColdFusion-Formulare erstellen auf Seite 718 Spry-Seiten visuell erstellen auf Seite 452 Tutorial Formulare erstellen Tutorial Formulare gestalten
der Option Zeichen max. knnen Sie z. B. Postleitzahlen auf 5 Stellen und Kennwrter auf 10 Zeichen begrenzen. Wenn Sie das Feld Zeichen max. leer lassen, knnen Benutzer beliebig viel Text eingeben. berschreitet der Text die Zeichenbreite des Feldes, so wird ein Bildlauf durchgefhrt. Sobald der Besucher die Hchstzahl an Zeichen berschreitet, wird ein Warnton ausgegeben.
Anz. Zeilen bestimmt die Hhe des Feldes fr mehrzeilige Textfelder. (Diese Option ist verfgbar, wenn die Option
Einzeilig definiert ein input-Tag, dessen type-Attribut auf text eingestellt ist. Die Einstellung fr Zeichenbreite wird dem Attribut size zugeordnet die Einstellung fr Zeichen max. dem Attribut maxlength. Mehrere Zeilen definiert ein textarea-Tag. Die Einstellung fr Zeichenbreite wird dem Attribut cols zugeordnet und die Einstellung fr Anz. Zeilen dem Attribut rows. Kennwort definiert ein input-Tag, dessen type-Attribut auf password eingestellt ist. Die Einstellungen fr Zeichenbreite und Zeichen max. werden denselben Attributen zugeordnet wie bei einzeiligen Textfeldern. Wenn ein Besucher ein Kennworttextfeld ausfllt, werden die eingegebenen Zeichen in Form von Punkten oder Sternchen angezeigt, damit andere sie nicht sehen knnen.
Anfangswert weist den im Feld angezeigten Wert beim ersten Laden des Formulars zu. Beispielsweise knnen Sie deutlich machen, dass der Benutzer Informationen im Feld eingeben soll, indem Sie einen Hinweis oder einen Beispielwert eintragen. Klasse ermglicht das Definieren von CSS-Regeln fr das Objekt.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 708
Formulare erstellen
Optionen fr Schaltflchenobjekte
Schaltflchenname weist der Schaltflche einen Namen zu. Zwei Namen sind bereits belegt: Senden und Zurcksetzen. Mit Senden wird das Formular angewiesen, die Formulardaten an die verarbeitende Anwendung bzw. das verarbeitende Skript zu senden. Mit Zurcksetzen werden alle Formularfelder auf ihre Ausgangswerte zurckgesetzt. Wert legt den Text fest, der auf der Schaltflche angezeigt wird. Aktion legt fest, welcher Vorgang beim Klicken auf die Schaltflche ausgefhrt wird.
Formular senden sendet die Formulardaten zur Verarbeitung, wenn der Benutzer auf die Schaltflche klickt. Die Daten werden an die Seite oder das Skript gesendet, die bzw. das in der Eigenschaft Aktion des Formulars angegeben ist. Formular zurcksetzen lscht den Inhalt des Formulars, wenn der Besucher auf die Schaltflche klickt. Kein ermglicht es Ihnen, die Aktion anzugeben, die durchgefhrt werden soll, wenn der Besucher auf die Schaltflche klickt. Sie knnen zum Beispiel ein JavaScript-Verhalten hinzufgen, das eine weitere Seite ffnet, wenn der Benutzer auf die Schaltflche klickt.
Klasse wendet CSS-Regeln auf das Objekt an.
Optionen fr Kontrollkstchenobjekte
Aktivierter Wert legt den Wert fest, der an den Server gesendet werden soll, wenn das Kontrollkstchen aktiviert ist.
In einer Umfrage knnten Sie beispielsweise den Wert 4 fr eine klare Zustimmung und den Wert 1 fr eine eindeutige Ablehnung festlegen.
Anfangsstatus legt fest, ob das Kontrollkstchen beim ffnen des Formulars in einem Browser aktiviert ist. Dynamisch lsst den Anfangsstatus des Kontrollkstchens dynamisch durch den Server bestimmen. Sie knnen
Kontrollkstchen z. B. zur visuellen Darstellung der Ja/Nein-Informationen verwenden, die in einem Datensatz der Datenbank enthalten sind. Beim Entwerfen der Seite kennen Sie diese Informationen noch nicht. Zur Laufzeit liest der Server den Datensatz aus und markiert das Kontrollkstchen, wenn der Wert Ja lautet.
Klasse wendet CSS (Cascading Stylesheets)-Regeln auf das Objekt an.
knnten Sie beispielsweise im Textfeld Aktivierter Wert das Wort Skifahren eingeben, um darauf hinzuweisen, dass ein Besucher Skifahren gewhlt hat.
Anfangsstatus legt fest, ob der Optionsschalter beim ffnen des Formulars in einem Browser aktiviert ist. Dynamisch lsst den Anfangsstatus des Optionsschalters dynamisch durch den Server bestimmen. Sie knnen
Optionsschalter zum Beispiel zur visuellen Darstellung der Informationen verwenden, die in einem Datensatz der Datenbank enthalten sind. Beim Entwerfen der Seite kennen Sie diese Informationen noch nicht. Zur Laufzeit liest der Server den Datensatz aus und aktiviert den Optionsschalter, wenn der Wert mit dem von Ihnen angegebenen Wert bereinstimmt.
Klasse wendet CSS-Regeln auf das Objekt an.
Menoptionen
Liste/Men weist dem Men einen Namen zu. Der Name muss eindeutig sein. Typ gibt an, ob das Men nach unten aufklappt, wenn der Benutzer darauf klickt (Option Men), oder eine
Optionsliste mit Bildlauf angezeigt wird (Option Liste). Whlen Sie die Option Men, wenn bei der Anzeige des
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 709
Formulare erstellen
Formulars in einem Browser nur eine Option sichtbar sein soll. Um die anderen Optionen anzuzeigen, muss der Benutzer auf den abwrts gerichteten Pfeil klicken. Whlen Sie die Option Liste, wenn bei der Anzeige des Formulars in einem Browser einige oder alle Optionen sichtbar sein sollen, damit der Benutzer mehrere Eintrge auswhlen kann.
Hhe bestimmt die Anzahl der Optionen, die im Men angezeigt werden (nur bei Typ Liste). Auswahl gibt an, ob der Besucher mehrere Optionen aus der Liste whlen kann (nur bei Typ Liste). Listenwerte ffnet ein Dialogfeld, mit dem Sie einem Formularmen die Elemente hinzufgen knnen:
1 Mithilfe der Schaltflchen mit dem Pluszeichen (+) und dem Minuszeichen () knnen Sie Elemente in die Liste
Jedes Element der Liste hat eine Beschriftung bzw. ein Label (der Text, der in der Liste angezeigt wird) und einen Wert (der Wert, der bei Auswahl des Elements an die verarbeitende Anwendung gesendet wird). Sollte kein Wert angegeben sein, wird stattdessen das Label an die verarbeitende Anwendung gesendet.
3 Mit den nach oben und nach unten gerichteten Pfeilen knnen Sie die Elemente der Liste neu anordnen.
Im Men werden die Optionen in derselben Reihenfolge wie im Dialogfeld Listenwerte aufgefhrt. Das erste in der Liste aufgefhrte Element wird ausgewhlt, wenn die Seite in einem Browser geladen wird.
Dynamisch gestattet es dem Server, beim ersten ffnen des Mens dynamisch ein Element auszuwhlen. Klasse ermglicht das Definieren von CSS-Regeln fr das Objekt. Zuerst ausgewhlt legt die Elemente fest, die in der Liste standardmig ausgewhlt werden. Klicken Sie in der Liste
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 710
Formulare erstellen
5 Geben Sie im Feld Aktion das serverseitige Skript oder die Seite an, das bzw. die die hochgeladene Datei
verarbeiten kann.
6 Setzen Sie die Einfgemarke in den Formularrahmen und whlen Sie Einfgen > Formular > Dateifeld. 7 Stellen Sie im Eigenschafteninspektor die folgenden Optionen nach Bedarf ein:
Dateifeldname legt den Namen des Dateifeldobjekts fest. Zeichenbreite gibt an, wie viele Zeichen maximal im Feld angezeigt werden knnen. Zeichen max. legt fest, wie viele Zeichen das Feld maximal enthalten kann. Falls der Benutzer die Datei ber
Durchsuchen auswhlt, knnen Dateiname und Pfad den in Zeichen max. angegebenen Wert berschreiten. Falls der Benutzer jedoch den Dateinamen und den Pfad manuell eingibt, kann das Feld nur die in Zeichen max. festgelegte Anzahl an Zeichen enthalten.
Bildschaltflche einfgen
Als Schaltflchensymbole lassen sich auch Bilder verwenden. Wenn Sie zur Ausfhrung bestimmter Aufgaben (mit Ausnahme des Absendens von Daten) ein Bild verwenden, muss an das Formularobjekt ein Verhalten angehngt werden.
1 Setzen Sie im Dokument die Einfgemarke in den Formularrahmen. 2 Whlen Sie Einfgen > Formular > Bildfeld.
Senden wird das Formular angewiesen, die Formulardaten an die verarbeitende Anwendung bzw. das verarbeitende Skript zu senden. Mit Zurcksetzen werden alle Formularfelder auf ihre Ausgangswerte zurckgesetzt.
Quelle gibt das Bild an, das Sie fr die Schaltflche verwenden mchten. Alt ermglicht die Eingabe von beschreibendem Text, der angezeigt wird, wenn das Bild nicht in den Browser geladen
werden kann.
Ausrichten stellt das Attribut align des Objekts ein. Bild bearbeiten startet den Standardeditor fr Bilder und ffnet die Bilddatei zur Bearbeitung. Klasse ermglicht das Definieren von CSS-Regeln fr das Objekt.
5 Sie ein JavaScript-Verhalten an die Schaltflche anhngen, indem Sie das Bild auswhlen und dann das Verhalten
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 711
Formulare erstellen
3 Nehmen Sie im Dialogfeld die gewnschten Einstellungen vor und klicken Sie auf OK. a Geben Sie im Feld Name einen Namen fr die Optionsschaltergruppe ein.
Wenn Sie angeben, dass die Optionsschalter Parameter zurck an den Server bergeben sollen, werden die Parameter mit dem Namen verknpft. Wenn Sie beispielsweise die Gruppe myGroup nennen und GET als Formularmethode festlegen (d. h., das Formular soll URL-Parameter und keine Formularparameter bergeben, wenn der Benutzer auf die Schaltflche zum Senden klickt), wird in der URL der Ausdruck myGroup="CheckedValue" an den Server bermittelt.
b Klicken Sie auf die Schaltflche mit dem Pluszeichen (+), um der Gruppe einen Optionsschalter hinzuzufgen.
Geben Sie fr den neuen Schalter eine Beschriftung und einen aktivierten Wert an.
c Klicken Sie auf den Aufwrts- oder Abwrtspfeil, um die Reihenfolge der Schalter zu ndern. d Wenn beim ffnen der Seite in einem Browser ein bestimmter Optionsschalter ausgewhlt sein soll, geben Sie den
Wert ein, der dem Optionsschalterwert im Feld Wert auswhlen, der gleich entspricht. Geben Sie einen statischen Wert ein oder legen Sie einen dynamischen Wert fest, indem Sie neben dem Feld auf das Blitzsymbol klicken und eine Datensatzgruppe auswhlen, die mgliche aktivierte Werte enthlt. In beiden Fllen sollte der angegebene Wert dem aktivierten Wert eines Optionsschalters in der Gruppe entsprechen. Um die aktivierten Werte der Optionsschalter anzuzeigen, whlen Sie den jeweiligen Optionsschalter aus und ffnen Sie seinen Eigenschafteninspektor (Fenster > Eigenschaften).
e Whlen Sie das Format aus, in dem Dreamweaver die Schalter anordnen soll.
Die Schalter knnen mithilfe von Zeilenumbrchen oder Tabellen angeordnet werden. Wenn Sie sich fr eine Tabelle entscheiden, erstellt Dreamweaver eine einspaltige Tabelle und platziert die Optionsschalter links und die Beschriftungen rechts. Sie knnen die Eigenschaften auch im Eigenschafteninspektor oder direkt in der Codeansicht festlegen.
Kontrollkstchengruppe einfgen
1 Setzen Sie die Einfgemarke in den Formularrahmen. 2 Whlen Sie Einfgen > Formular > Kontrollkstchengruppe aus. 3 Nehmen Sie im Dialogfeld die gewnschten Einstellungen vor und klicken Sie auf OK. a Geben Sie im Feld Name einen Namen fr die Kontrollkstchengruppe ein.
Wenn Sie fr die Kontrollkstchen festlegen, dass Parameter an den Server zurckgegeben werden, erfolgt eine Zuordnung der Parameter zum entsprechenden Namen. Wenn Sie beispielsweise die Gruppe myGroup nennen und GET als Formularmethode festlegen (d. h., das Formular soll URL-Parameter und keine Formularparameter bergeben, wenn der Benutzer auf die Schaltflche zum Senden klickt), wird in der URL der Ausdruck myGroup="CheckedValue" an den Server bermittelt.
b Klicken Sie auf die Schaltflche mit dem Pluszeichen (+), um der Gruppe ein Kontrollkstchen hinzuzufgen.
Geben Sie fr das neue Kontrollkstchen eine Beschriftung ein und legen Sie fest, ob es aktiviert ist.
c Klicken Sie auf den entsprechenden Pfeil nach oben oder unten, um die Reihenfolge der Kontrollkstchen zu
ndern.
d Wenn beim ffnen der Seite in einem Browser ein bestimmtes Kontrollkstchen aktiviert sein soll, geben Sie im
Feld Wert auswhlen, der gleich: einen Wert ein, der dem Wert des Kontrollkstchens entspricht.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 712
Formulare erstellen
Geben Sie einen statischen Wert ein oder legen Sie einen dynamischen Wert fest, indem Sie neben dem Feld auf das Blitzsymbol klicken und eine Datensatzgruppe auswhlen, die mgliche Aktivierungswerte enthlt. In beiden Fllen sollte der angegebene Wert dem Aktivierungswert eines Kontrollkstchens in der Gruppe entsprechen. Um die Aktivierungswerte der Kontrollkstchen anzuzeigen, whlen Sie die einzelnen Kontrollkstchen aus und ffnen Sie jeweils den entsprechenden Eigenschafteninspektor (Fenster > Eigenschaften).
e Whlen Sie das Format aus, in dem die Kontrollkstchen in Dreamweaver angeordnet werden sollen.
Die Kontrollkstchen knnen mithilfe von Zeilenumbrchen oder Tabellen angeordnet werden. Wenn Sie sich fr eine Tabelle entscheiden, erstellt Dreamweaver eine einspaltige Tabelle und platziert die Kontrollkstchen links und die Beschriftungen rechts. Sie knnen die Eigenschaften auch im Eigenschafteninspektor oder direkt in der Codeansicht festlegen.
Dynamische Formularobjekte
Ein dynamisches Formularobjekt ist ein Formularobjekt, dessen Anfangsstatus durch den Server bei Anforderung der Seite vom Server bestimmt wird und nicht bereits durch den Ersteller des Formulars. Wenn ein Besucher zum Beispiel eine PHP-Seite anfordert, die ein Formular mit einem Men enthlt, kann ein PHP-Skript auf der Seite das Men automatisch mit Werten versehen, die in einer Datenbank gespeichert sind. Der Server sendet dann die vervollstndigte Seite an den Browser des Besuchers. Dynamische Formularobjekte knnen die Verwaltung der Site vereinfachen. Auf vielen Sites stehen den Besuchern zum Beispiel Mens mit einer Reihe von Optionen zur Verfgung. Wenn ein Men dynamisch ist, knnen Sie Menoptionen zentral an einer Stelle hinzufgen, entfernen oder bearbeiten nmlich in der Datenbanktabelle, in der die Elemente gespeichert sind und dadurch alle Instanzen desselben Mens in der Site aktualisieren.
Verwandte Themen
Quellen fr dynamischen Inhalt definieren auf Seite 599
Whlen Sie ein neues oder vorhandenes HTML Liste/Men-Formularobjekt aus und klicken Sie anschlieend im
Eigenschafteninspektor auf die Schaltflche Dynamisch.
Whlen Sie Einfgen > Datenobjekte > Dynamische Daten > Dynamische Auswahlliste aus.
3 Nehmen Sie im Dialogfeld Dynamische(s) Liste/Men die gewnschten Einstellungen vor und klicken Sie auf
OK.
a Whlen Sie im Popupmen Optionen aus Datensatzgruppe die Datensatzgruppe aus, die als Inhaltsquelle dienen
soll. Mit diesem Men knnen Sie spter auch statische und dynamische Liste/Men-Elemente bearbeiten.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 713
Formulare erstellen
b Geben Sie im Bereich Statische Optionen ein Standardelement in die Liste bzw. das Men ein. Mit dieser Option
knnen Sie auch statische Eintrge in einem Liste/Men-Formularobjekt bearbeiten, nachdem dynamischer Inhalt hinzugefgt wurde.
c (Optional) Mithilfe der Schaltflche mit dem Pluszeichen (+) bzw. dem Minuszeichen () knnen Sie Elemente in
die Liste einfgen oder aus der Liste entfernen. Die Elemente werden in derselben Reihenfolge aufgefhrt wie im Dialogfeld Listenwerte. Das erste in der Liste aufgefhrte Element wird ausgewhlt, wenn die Seite in einem Browser geladen wird. Mit den nach oben und nach unten gerichteten Pfeilen knnen Sie die Elemente der Liste neu anordnen.
d Whlen Sie im Popupmen Werte das Feld aus, das die Werte fr die Menelemente enthlt. e Whlen Sie im Popupmen Beschriftungen das Feld aus, das die Beschriftungen fr die Menelemente enthlt. f
(Optional) Soll ein bestimmtes Menelement ausgewhlt sein, wenn die Seite in einem Browser geffnet oder ein Datensatz im Formular angezeigt wird, geben Sie im Feld Wert auswhlen, der gleich einen Wert ein, der mit dem Menelementwert bereinstimmt.
Sie knnen einen statischen Wert eingeben oder Sie knnen neben dem Feld auf das Blitzsymbol klicken und aus der Liste der Datenquellen einen dynamischen Wert auswhlen. In beiden Fllen muss der angegebene Wert mit einem der Menelementwerte bereinstimmen.
OK.
Datenquelle aus und klicken Sie auf OK. Die Datenquelle muss Informationen in Textform enthalten. Falls in der Liste keine Datenquellen enthalten sind oder die vorhandenen Datenquellen nicht Ihren Bedrfnissen entsprechen, klicken Sie auf die Schaltflche mit dem Pluszeichen (+), um eine neue Datenquelle zu definieren.
Verwandte Themen
Quellen fr dynamischen Inhalt definieren auf Seite 599
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 714
Formulare erstellen
auf OK.
Klicken Sie neben dem Textfeld Markieren wenn auf die Schaltflche mit dem Blitzsymbol und whlen Sie das
Feld in der Liste der Datenquellen aus. Die Datenquelle muss boolesche Daten wie Ja und Nein bzw. wahr und falssch enthalten. Falls in der Liste keine Datenquellen enthalten sind oder die vorhandenen Datenquellen nicht Ihren Bedrfnissen entsprechen, klicken Sie auf die Schaltflche mit dem Pluszeichen (+), um eine neue Datenquelle zu definieren.
Geben Sie im Textfeld Gleich den Wert ein, den das Feld haben muss, damit das Kontrollkstchen aktiviert wird.
Soll beispielsweise das Kontrollkstchen aktiviert werden, wenn ein bestimmtes Feld in einem Datensatz den Wert Ja hat, geben Sie im Textfeld Gleich den Wert Ja ein. Hinweis: Dieser Wert wird auch an den Server zurckgegeben, wenn der Benutzer auf die Senden-Schaltflche des Formulars klickt.
Im Feld Optionsschalterwerte werden die Werte aller Optionsschalter der Gruppe aufgefhrt.
2 Whlen Sie in der angezeigten Werteliste einen Wert aus, der dynamisch im Voraus aktiviert werden soll. Dieser
aus, die mgliche aktivierte Werte fr die Optionsschalter der Gruppe enthlt.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 715
Formulare erstellen
Die ausgewhlte Datensatzgruppe enthlt Werte, die den aktivierten Werten der Optionsschalter entsprechen. Um die aktivierten Werte der Optionsschalter anzuzeigen, whlen Sie den jeweiligen Optionsschalter aus und ffnen Sie seinen Eigenschafteninspektor (Fenster > Eigenschaften).
4 Klicken Sie auf OK.
wird.
4 Klicken Sie auf OK, um das Dialogfeld Dynamische Optionsschaltergruppe zu schlieen und den Platzhalter
HTML-Formulardaten berprfen
Dreamweaver kann JavaScript-Code einfgen, der den Inhalt von bestimmten Textfeldern prft, um sicherzustellen, dass der Benutzer den richtigen Datentyp eingegeben hat. Sie knnen Spry-Formular-Widgets verwenden, um Formulare zu erstellen und den Inhalt bestimmter Formularelemente zu berprfen. Weitere Informationen finden Sie in der nachstehenden Themenbersicht zu Spry. Sie knnen in Dreamweaver auerdem ColdFusion-Formulare erstellen, die den Inhalt bestimmter Felder berprfen. Weitere Informationen finden Sie im folgenden Kapitel zu ColdFusion.
1 Erstellen Sie ein HTML-Formular, das mindestens ein Textfeld und eine Senden-Schaltflche enthlt.
Achten Sie darauf, dass jedes Textfeld, das berprft werden soll, einen eindeutigen Namen hat.
2 Whlen Sie die Senden-Schaltflche aus. 3 Klicken Sie im Bedienfeld Verhalten (Fenster > Verhalten) auf die Schaltflche mit dem Pluszeichen (+) und
Sie knnen zum Beispiel festlegen, dass ein Textfeld, in dem das Alter eines Besuchers eingetragen werden soll, nur Zahlen annimmt. Hinweis: Das Verhalten Formular berprfen ist nur dann verfgbar, wenn in das Dokument ein Textfeld eingefgt wurde.
Verwandte Themen
Mit dem Widget berprfung - Textfeld arbeiten auf Seite 474 Mit dem Widget berprfung - Textbereich arbeiten auf Seite 479 Mit dem Widget berprfung - Auswahl arbeiten auf Seite 483 Mit dem Widget berprfung - Kontrollkstchen arbeiten auf Seite 487 ColdFusion-Formulardaten berprfen auf Seite 730
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 716
Formulare erstellen
Schaltflche ausgefhrt werden soll. Klicken Sie dann auf OK. Sie knnen auch den Namen einer noch nicht vorhandenen Funktion eingeben, beispielsweise processMyForm().
4 Wenn die JavaScript-Funktion im Abschnitt head des Dokuments noch nicht vorhanden ist, fgen Sie sie jetzt
hinzu. Beispielsweise knnen Sie im Abschnitt head die folgende JavaScript-Funktion hinzufgen, die eine Meldung einblendet, wenn der Benutzer auf die Senden-Schaltflche klickt:
function processMyForm(){ alert('Thanks for your order!'); }
Verwandte Themen
Verhalten JavaScript aufrufen definieren auf Seite 373
Formularobjekte hinzufgen (siehe Arbeitsbereich fr visuelle Entwicklung optimieren auf Seite 587). Diesen Schritt mssen Sie nur einmal ausfhren.
2 Setzen Sie die Einfgemarke im Dokument an die Stelle, an der das Formularobjekt stehen soll. 3 Whlen Sie Einfgen > Formular und dann das einzufgende Formularobjekt.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 717
Formulare erstellen
4 Nehmen Sie im Dialogfeld die gewnschten Einstellungen vor und klicken Sie auf OK. Es folgt eine
unvollstndige Liste der verfgbaren Optionen: Hinweis: Das Bildschirmlesegert liest den Namen, den Sie fr das Objekt als Label-Attribut eingeben.
ID weist dem Feld eine ID zu. Dieser Wert kann in JavaScript fr Verweise auf das Feld verwendet werden. Er wird
auerdem als Wert fr das for-Attribut verwendet, wenn Sie in den Stiloptionen die Option Label-Tag mit forAttribut anhngen whlen.
Umbruch mit Label-Tag bewirkt, dass das Formularobjekt wie folgt in Label-Tags eingeschlossen wird:
<label> <input type="radio" name="radiobutton" value="radiobutton"> RadioButton1</label>
Label-Tag mit for-Attribut anhngen Mithilfe des for-Attributs wird das Formularelement in Label-Tags
eingeschlossen:
<input type="radio" name="radiobutton" value="radiobutton" id="radiobutton"> <label for="radiobutton">RadioButton2</label>
Die Auswahl dieser Option bewirkt, dass der mit einem Kontrollkstchen oder Optionsschalter verbundene Text im Browser in einem Fokusrechteck angezeigt wird. Der Benutzer kann dann auf eine beliebige Stelle in diesem Text klicken und muss nicht unbedingt genau auf das Kontrollkstchen oder den Optionsschalter klicken. Hinweis: Diese Mglichkeit empfiehlt sich als Eingabehilfe. Die Funktionalitt kann jedoch je nach Browser variieren.
Kein Label-Tag bewirkt, dass kein Label-Tag verwendet wird:
<input type="radio" name="radiobutton" value="radiobutton"> RadioButton3
Zugriffstaste bewirkt, dass das Formularobjekt im Browser ber eine Taste (einen Buchstaben) und die Alt-Taste
(Windows) bzw. Ctrl (Macintosh) ausgewhlt werden kann. Wenn Sie beispielsweise B als Zugriffstaste definieren, knnen Macintosh-Benutzer das Formularobjekt im Browser mit Ctrl+B auswhlen.
Reihenfolgenposition gibt eine Tabulatorreihenfolge fr die Formularobjekte an. Wenn Sie fr ein Objekt eine
Reihenfolgenposition festlegen, mssen Sie dies auch bei allen anderen Objekten tun. Das Festlegen einer Reihenfolge ist sinnvoll, wenn eine Seite weitere Hyperlinks und Formularobjekte enthlt. Der Benutzer gelangt dann in einer bestimmten Reihenfolge mithilfe der Tabulatortaste von einem Element zum nchsten.
5 Klicken Sie auf Ja, um ein Formular-Tag einzufgen.
Das Formularobjekt wird im Dokument angezeigt. Hinweis: Wenn Sie auf Abbrechen klicken, wird das Formularobjekt zwar in das Dokument eingefgt, aber es wird nicht von Dreamweaver mit Eingabehilfen-Tags oder -Attributen verknpft.
Bearbeiten Sie die jeweiligen Attribute in der Codeansicht. Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrckter Ctrl-Taste (Macintosh) und whlen Sie dann
Tag bearbeiten.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 718
Formulare erstellen
ColdFusion-Formulare erstellen
ColdFusion-Formulare
ColdFusion-Formulare enthalten mehrere integrierte Funktionen zum berprfen von Formulardaten. So knnen Sie beispielsweise berprfen, ob ein Benutzer ein gltiges Datum eingegeben hat. Einige Formularsteuerelemente verfgen ber zustzliche Funktionen. Einige Steuerelemente haben keine genaue HTML-Entsprechung, bei anderen wiederum wird das dynamische Fllen aus Datenquellen direkt untersttzt. Dreamweaver enthlt eine Reihe von Erweiterungen fr ColdFusion-Entwickler, die ColdFusion MX 7 oder eine sptere Version als Entwicklungsserver einsetzen. Zu diesen Erweiterungen gehren zustzliche Schaltflchen im Bedienfeld Einfgen, Menelemente und Eigenschafteninspektoren, damit Sie ColdFusion-Formulare schnell erstellen und die entsprechenden Eigenschaften problemlos festlegen knnen. Auerdem knnen Sie Programmcode generieren, der die von den Benutzern eingegebenen Daten berprft. Beispielsweise knnen Sie berprfen, ob die vom Benutzer eingegebene E-Mail-Adresse ein @-Symbol oder ob ein erforderliches Textfeld einen Wert eines bestimmten Typs enthlt.
ColdFusion-Erweiterungen aktivieren
Einige dieser Erweiterungen setzen voraus, dass Sie einen Computer mit ColdFusion MX 7 oder einer spteren Version als Testserver fr Dreamweaver definieren. Die Eigenschafteninspektoren fr Formularsteuerelemente sind beispielsweise nur verfgbar, wenn Sie den richtigen Testserver angeben. Einen Testserver definieren Sie nur einmal. Dreamweaver erkennt dann automatisch die Testserverversion und macht die Erweiterungen verfgbar, wenn ColdFusion MX 7 erkannt wird.
1 Definieren Sie eine Dreamweaver-Site fr Ihr ColdFusion-Projekt, wenn dies noch nicht geschehen ist. 2 Whlen Sie Site > Sites verwalten aus, whlen Sie in der Liste Ihre Site aus und klicken Sie auf Bearbeiten. 3 Whlen Sie die Kategorie Server aus und geben Sie einen Computer an, auf dem ColdFusion MX 7 oder eine
sptere Version als Testserver fr Ihre Dreamweaver-Site ausgefhrt wird. Stellen Sie dabei sicher, dass Sie eine gltige Web-URL angeben.
4 ffnen Sie ein ColdFusion-Dokument.
nderungen des Dreamweaver-Arbeitsbereichs werden erst nach dem ffnen eines ColdFusion-Dokuments sichtbar.
Verwandte Themen
Ordner in Anwendungen schtzen (ColdFusion) auf Seite 690 Dreamweaver-Sites einrichten auf Seite 39 Testserver einrichten auf Seite 49
ColdFusion-Formulare erstellen
Mithilfe einer Reihe von Schaltflchen im Bedienfeld Einfgen, Menelementen und Eigenschafteninspektoren knnen Sie in Dreamweaver schnell ColdFusion-Formulare erstellen und die entsprechenden Eigenschaften festlegen. Hinweis: Diese Erweiterungen sind nur verfgbar, wenn Sie Zugriff auf einen Computer besitzen, auf dem ColdFusion MX 7 oder eine sptere Version ausgefhrt wird.
1 ffnen Sie eine ColdFusion-Seite und setzen Sie die Einfgemarke an die gewnschte Position im ColdFusion-
Formular.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 719
Formulare erstellen
2 Whlen Sie Einfgen > ColdFusion-Objekte > CFForm > CFForm aus oder whlen Sie im Bedienfeld
Einfgen die Kategorie CFForm aus und klicken Sie dann auf das Symbol CF-Formular. Dreamweaver fgt ein leeres ColdFusion-Formular ein. In der Entwurfsansicht wird das Formular durch einen gepunkteten roten Umriss gekennzeichnet. Vergewissern Sie sich, dass Ansicht > Visuelle Hilfsmittel > Unsichtbare Elemente ausgewhlt ist, falls Sie diesen Rahmen nicht sehen knnen.
3 Legen Sie mithilfe des Eigenschafteninspektors die folgenden Formulareigenschaften fest. Das Formular muss
POST sendet die Daten mit der HTTP-Methode post. Diese Methode sendet die Daten in einer separaten Nachricht an den Server. GET sendet die Daten mit der HTTP-Methode get. Dabei wird der Inhalt des Formularfelds in den URLAbfragestring eingefgt.
Ziel ermglicht das ndern des Werts im Attribut target des Tags cfform. Kodierungstyp gibt die Kodierungsmethode zum bertragen der Formulardaten an.
Hinweis: Der Kodierungstyp bezieht sich nicht auf die Zeichenkodierung. Dieses Attribut gib den Inhaltstyp an, der zum Senden des Formulars an den Server verwendet wird (wenn der Wert der Methode post ist). Der Standardwert fr dieses Attribut ist application/x-www-form-urlencoded.
Format bestimmt die Art des zu erstellenden Formats:
HTML generiert ein HTML-Formular und sendet es an den Client. Die untergeordneten Steuerelemente cfgrid und cftree knnen im Flash- oder im Applet-Format vorliegen. Flash generiert ein Flash-Formular und sendet es an den Client. Alle Steuerelemente liegen im Flash-Format vor. XML generiert XForms-XML-Code und fgt die Resultate in eine Variable mit dem Namen des ColdFusionFormulars ein. Es werden keine Daten an den Client gesendet. Die untergeordneten Steuerelemente cfgrid und cftree knnen im Flash- oder im Applet-Format vorliegen.
Stil ermglicht das Angeben eines Stils fr das Formular. Weitere Informationen enthlt die ColdFusionDokumentation. Flash/XML-Skin ermglicht das Angeben einer Halofarbe zur Gestaltung der Ausgabe. Die Skin bestimmt die Farbe fr hervorgehobene und ausgewhlte Elemente. Daten beibehalten bestimmt, ob die anfnglichen Steuerelementwerte mit gesendeten Werten berschrieben werden sollen, wenn das Formular an sich selbst sendet (Post).
Wenn der Wert false ist, werden die in den Tag-Attributen des Steuerelements angegebenen Werte verwendet. Wenn der Wert true ist, werden gesendete Werte verwendet.
Skriptquelle gibt die URL der JavaScript-Datei mit dem Clientcode fr das Tag und seine untergeordneten Tags relativ zum Web-Stammverzeichnis an. Dieses Attribut ist hilfreich, wenn sich die Datei nicht im Standardordner befindet. Das Attribut muss in einigen Host-Umgebungen und -Konfigurationen angegeben werden, die den Zugriff auf das Verzeichnis /CFIDE sperren. Der Standardordner wird in ColdFusion-Administrator definiert. Standardmig handelt es sich um /CFIDE/scripts/cfform.js. Archiv gibt die URL der herunterladbaren Java-Klassen fr die Applet-Steuerelemente cfgrid, cfslider und cftree
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 720
Formulare erstellen
Hhe gibt die Hhe des Formulars an. Breite gibt die Breite des Formulars an. Tag-Editor fr cfform anzeigen ermglicht die Bearbeitung von Eigenschaften, die im Eigenschafteninspektor nicht
aufgefhrt werden.
4 Fgen Sie ColdFusion-Formularsteuerelemente ein.
Setzen Sie die Einfgemarke an die Stelle im ColdFusion-Formular, an der das ColdFusion-Formularsteuerelement eingefgt werden soll. Whlen Sie dann das gewnschte Steuerelement im Men Einfgen (Einfgen > ColdFusion-Objekte > CFForm) oder in der Kategorie CFForm des Bedienfelds Einfgen aus.
5 Stellen Sie, falls erforderlich, die Eigenschaften des Steuerelements im Eigenschafteninspektor ein.
Das Steuerelement muss in der Entwurfsansicht ausgewhlt sein, damit Sie die Eigenschaften im Eigenschafteninspektor einstellen knnen. Um weitere Informationen zu den Eigenschaften anzuzeigen, klicken Sie auf die Hilfeschaltflche des Eigenschafteninspektors.
6 Passen Sie das Layout des ColdFusion-Formulars an.
Beim Erstellen eines HTML-Formulars knnen Sie Zeilenumbrche, Absatzumbrche, vorformatierten Text und Tabellen zur Formatierung einsetzen. Sie knnen ein ColdFusion-Formular nicht in ein anderes ColdFusionFormular einfgen (d.h. die Tags drfen sich nicht berschneiden). Eine Seite kann aber mehrere ColdFusionFormulare enthalten. Wenn Sie ein Flash-Formular erstellen, knnen Sie das Layout mit CSS (Cascading Style Sheets)-Stilen steuern. ColdFusion ignoriert HTML-Code im Formular. Benennen Sie die ColdFusion-Formularfelder mit beschreibendem Text, damit Benutzer wissen, was sie eingeben mssen. Verwenden Sie z. B. Bitte Namen eingeben, um zur Eingabe eines Namens aufzufordern.
Verwandte Themen
ColdFusion-Formulardaten berprfen auf Seite 730 HTML-Formulare erstellen auf Seite 705
ColdFusion-Formularsteuerelemente einfgen
Im Bedienfeld Einfgen oder ber das Men Einfgen knnen Sie ColdFusion-Formularsteuerelemente schnell in ein ColdFusion-Formular einfgen. Sie erstellen zunchst ein leeres ColdFusion-Formular und fgen dann Steuerelemente ein. Hinweis: Diese Erweiterungen sind nur verfgbar, wenn Sie Zugriff auf einen Computer besitzen, auf dem ColdFusion MX 7 oder eine sptere Version ausgefhrt wird.
1 Setzen Sie in der Entwurfsansicht die Einfgemarke in den Formularrahmen. 2 Whlen Sie das Steuerelement im Men Einfgen (Einfgen > ColdFusion-Objekte > CFForm) oder in der
dessen Eigenschaften fest. Weitere Informationen zu den Eigenschaften bestimmter Steuerelemente finden Sie in den jeweiligen Themen zu diesen Steuerelementen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 721
Formulare erstellen
Verwandte Themen
ColdFusion-Formularsteuerelemente ndern auf Seite 730 ColdFusion-Formulardaten berprfen auf Seite 730
ColdFusion-Textfelder einfgen
Sie knnen ein ColdFusion-Textfeld oder -Kennwortfeld interaktiv in ein Formular einfgen und dann die Optionen einstellen. Hinweis: Diese Erweiterung ist nur verfgbar, wenn Sie Zugriff auf einen Computer besitzen, auf dem ColdFusion MX 7 oder eine sptere Version ausgefhrt wird.
Einfgen > ColdFusion-Objekte > CFForm > CFtextfield aus. Ein Textfeld wird im Formular angezeigt.
3 Whlen Sie das Textfeld aus und legen Sie dessen Eigenschaften im Eigenschafteninspektor fest. 4 Wenn Sie das Textfeld auf der Seite beschriften mchten, klicken Sie neben das Textfeld und geben die Beschriftung ein.
CFTextField-Optionen (ColdFusion)
Um die Optionen eines ColdFusion-Textfelds oder -Kennwortfelds einzustellen, setzen Sie eine der folgenden Optionen im CFTextField-Eigenschafteninspektor:
CFtextfield stellt das Attribut id des Tags cfinput ein. Wert ermglicht die Angabe des Texts, der im Feld angezeigt werden soll, wenn die Seite das erste Mal in einem
Browser geffnet wird. Die Daten knnen statisch oder dynamisch sein. Um einen dynamischen Wert anzugeben, klicken Sie auf das Blitzsymbol neben dem Feld Wert. Whlen Sie dann im Dialogfeld Dynamische Daten eine Datensatzgruppenspalte aus. Die Datensatzgruppenspalte bergibt einen Wert an das Textfeld, wenn Sie das Formular in einem Browser anzeigen.
Textmodus ermglicht das Umschalten zwischen einem Standardeingabefeld fr Text und einem Kennwortfeld. Das mit diesem Steuerelement genderte Attribut ist type. Schreibgeschtzt ermglicht die Anzeige von Text, der vom Benutzer nicht gendert werden kann. Max. Lnge bestimmt die maximale Anzahl der Zeichen, die in das Textfeld eingegeben werden drfen. Maske ermglicht das Definieren einer Maske fr den angeforderten Text. Anhand dieser Eigenschaft knnen Sie die
Benutzereingabe berprfen. Das Maskenformat besteht aus den Zeichen A, 9, X und ? . Hinweis: Im Tag cfinput type="password" wird das Attribut mask ignoriert.
berprfen gibt den berprfungstyp fr das aktuelle Feld an.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 722
Formulare erstellen
berprfen bei gibt an, wann das Feld berprft wird: onSubmit, onBlur oder onServer. Beschriftung ermglicht die Angabe einer Beschriftung fr das Textfeld. Muster ermglicht die Angabe eines regulren JavaScript-Ausdrucks zum berprfen von Eingaben. Lassen Sie voran- und nachgestellte Schrgstriche aus. Weitere Informationen enthlt die ColdFusion-Dokumentation. Hhe ermglicht die Angabe der Steuerelementhhe in Pixel. Breite ermglicht die Angabe der Steuerelementbreite in Pixel. Gre dient der Angabe der Steuerelementgre. erforderlich gibt an, ob das Textfeld Daten enthalten muss, damit das Formular an den Server gesendet werden kann. Tag-Editor anzeigen ermglicht die Bearbeitung von Eigenschaften, die im Eigenschafteninspektor nicht aufgefhrt
werden.
Eine Markierung wird im ColdFusion-Formular angezeigt. Wenn die Markierung nicht sichtbar ist, whlen Sie Ansicht > Visuelle Hilfsmittel > Unsichtbare Elemente.
3 Whlen Sie das versteckte Feld auf der Seite aus und stellen Sie im Eigenschafteninspektor die folgenden Optionen ein:
Cfhiddenfield ermglicht die Angabe eines eindeutigen Namens fr das versteckte Feld. Wert ermglicht die Angabe eines Werts fr das versteckte Feld. Die Daten knnen statisch oder dynamisch sein.
Um einen dynamischen Wert anzugeben, klicken Sie auf das Blitzsymbol neben dem Feld Wert. Whlen Sie dann im Dialogfeld Dynamische Daten eine Datensatzgruppenspalte aus. Die Datensatzgruppenspalte bergibt einen Wert an das Textfeld, wenn Sie das Formular in einem Browser anzeigen.
berprfen gibt den berprfungstyp fr das aktuelle Feld an. berprfen bei gibt an, wann das Feld berprft wird: onSubmit, onBlur oder onServer. Beschriftung ermglicht die Angabe einer Beschriftung fr das Steuerelement. Diese Eigenschaft wird zur Laufzeit
Server ignoriert.
Gre dient der Angabe der Steuerelementgre. Diese Eigenschaft wird zur Laufzeit vom ColdFusion-Server
ignoriert.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 723
Formulare erstellen
erforderlich gibt an, ob das versteckte Feld Daten enthalten muss, damit das Formular an den Server gesendet werden kann. Tag-Editor anzeigen ermglicht die Bearbeitung von Eigenschaften, die im Eigenschafteninspektor nicht aufgefhrt
werden.
Verwandte Themen
ColdFusion-Formularsteuerelemente ndern auf Seite 730
ColdFusion-Textbereiche einfgen
Sie knnen ColdFusion-Textbereiche in Formulare einfgen und ihre Eigenschaften einstellen. Ein Textbereich ist ein Eingabeelement, das aus mehreren Textzeilen besteht. Hinweis: Diese Erweiterung ist nur verfgbar, wenn Sie Zugriff auf einen Computer besitzen, auf dem ColdFusion MX 7 oder eine sptere Version ausgefhrt wird.
1 Setzen Sie die Einfgemarke in den Formularrahmen. 2 Klicken Sie in der Kategorie CFForm des Bedienfelds Einfgen auf das Symbol CF-Textbereich.
Server ignoriert.
Tag-Editor anzeigen ermglicht die Bearbeitung von Eigenschaften, die im Eigenschafteninspektor nicht aufgefhrt
werden.
4 Wenn Sie den Textbereich beschriften mchten, klicken Sie neben das Textfeld und geben Sie die Beschriftung ein.
Verwandte Themen
ColdFusion-Formulardaten berprfen auf Seite 730 ColdFusion-Formularsteuerelemente ndern auf Seite 730
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 724
Formulare erstellen
ColdFusion-Schaltflchen einfgen
Sie knnen ColdFusion-Schaltflchen in Formulare einfgen und ihre Eigenschaften einstellen. ColdFusionSchaltflchen steuern ColdFusion-Formularoperationen. Schaltflchen knnen zum Senden von ColdFusionFormulardaten an den Server oder zum Zurcksetzen des ColdFusion-Formulars verwendet werden. ColdFusionStandardschaltflchen sind beispielsweise mit Zurcksetzen oder Senden beschriftet. Sie knnen auch andere Aufgaben zuweisen, die in einem Skript definiert wurden. Beispielsweise kann eine Schaltflche die Gesamtkosten ausgewhlter Artikel basierend auf zugewiesenen Werten berechnen. Hinweis: Diese Erweiterung ist nur verfgbar, wenn Sie Zugriff auf einen Computer besitzen, auf dem ColdFusion MX 7 oder eine sptere Version ausgefhrt wird.
1 Platzieren Sie die Einfgemarke im Rahmen des ColdFusion-Formulars. 2 Klicken Sie in der Kategorie CFForm des Bedienfelds Einfgen auf das Symbol CF-Schaltflche.
werden. Die anderen Eigenschaften werden zur Laufzeit vom ColdFusion-Server ignoriert.
Verwandte Themen
ColdFusion-Formularsteuerelemente ndern auf Seite 730
ColdFusion-Auswahlfelder einfgen
Sie knnen ColdFusion-Kontrollkstchen in Formulare einfgen und ihre Eigenschaften einstellen. Verwenden Sie Kontrollkstchen, um die Besucher mehrere Optionen in einer Gruppe von Optionen auswhlen zu lassen. Hinweis: Diese Erweiterung ist nur verfgbar, wenn Sie Zugriff auf einen Computer besitzen, auf dem ColdFusion MX 7 oder eine sptere Version ausgefhrt wird.
1 Setzen Sie die Einfgemarke in den Formularrahmen. 2 Klicken Sie in der Kategorie CFForm des Bedienfelds Einfgen auf das Symbol CF-Kontrollkstchen.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 725
Formulare erstellen
Hhe ermglicht die Angabe der Steuerelementhhe in Pixel. Diese Eigenschaft wird zur Laufzeit vom ColdFusionServer ignoriert. Breite ermglicht die Angabe der Steuerelementbreite in Pixel. Diese Eigenschaft wird zur Laufzeit vom ColdFusion-
Server ignoriert.
Gre dient der Angabe der Steuerelementgre. Diese Eigenschaft wird zur Laufzeit vom ColdFusion-Server
ignoriert.
erforderlich gibt an, ob das Kontrollkstchen aktiviert sein muss, damit das Formular an den Server gesendet werden kann. Tag-Editor anzeigen ermglicht die Bearbeitung von Eigenschaften, die im Eigenschafteninspektor nicht aufgefhrt
werden.
4 Beschriften Sie das Kontrollkstchen, indem Sie neben dem Kontrollkstchen auf die Seite klicken und den
Beschriftungstext eingeben.
Verwandte Themen
ColdFusion-Formularsteuerelemente ndern auf Seite 730 ColdFusion-Formulardaten berprfen auf Seite 730
ColdFusion-Optionsschalter einfgen
Sie knnen ColdFusion-Optionsschalter in Formulare einfgen und ihre Eigenschaften einstellen. Wenn der Besucher aus verschiedenen Optionen eine einzige Auswahl treffen muss, sollten Sie Optionsschalter verwenden. Optionsschalter werden normalerweise in Gruppen eingesetzt. Alle Optionsschalter einer Gruppe mssen denselben Namen haben. Hinweis: Diese Erweiterung ist nur verfgbar, wenn Sie Zugriff auf einen Computer besitzen, auf dem ColdFusion MX 7 oder eine sptere Version ausgefhrt wird.
1 Setzen Sie die Einfgemarke in den Formularrahmen. 2 Whlen Sie Einfgen > ColdFusion-Objekte > CFForm > CFradiobutton aus.
Optionen ein:
Cfradiobutton ermglicht die Angabe eines eindeutigen Namens fr das Steuerelement. Aktivierter Wert gibt den Wert an, der vom Optionsschalter bei seiner Aktivierung zurckgegeben wird. Anfangsstatus legt fest, ob der Optionsschalter beim ffnen der Seite in einem Browser aktiviert ist. berprfen gibt den berprfungstyp fr den Optionsschalter an. berprfen bei gibt an, wann der Optionsschalter berprft wird: onSubmit, onBlur oder onServer. Beschriftung ermglicht die Angabe einer Beschriftung fr den Optionsschalter. Muster ermglicht die Angabe eines regulren JavaScript-Ausdrucks zum berprfen von Eingaben. Lassen Sie voran- und nachgestellte Schrgstriche aus. Weitere Informationen enthlt die ColdFusion-Dokumentation. Hhe ermglicht die Angabe der Steuerelementhhe in Pixel. Diese Eigenschaft wird zur Laufzeit vom ColdFusionServer ignoriert. Breite ermglicht die Angabe der Steuerelementbreite in Pixel. Diese Eigenschaft wird zur Laufzeit vom ColdFusion-
Server ignoriert.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 726
Formulare erstellen
Gre dient der Angabe der Steuerelementgre. Diese Eigenschaft wird zur Laufzeit vom ColdFusion-Server
ignoriert.
erforderlich gibt an, ob der Optionsschalter aktiviert sein muss, wenn das Formular an den Server gesendet wird. Tag-Editor anzeigen ermglicht die Bearbeitung von Eigenschaften, die im Eigenschafteninspektor nicht aufgefhrt
werden.
4 Wenn Sie den Optionsschalter auf der Seite beschriften mchten, klicken Sie neben dem Optionsschalter auf die
Verwandte Themen
ColdFusion-Formularsteuerelemente ndern auf Seite 730 ColdFusion-Formulardaten berprfen auf Seite 730
ColdFusion-Auswahlfelder einfgen
Sie knnen ColdFusion-Auswahlfelder in Formulare einfgen und ihre Eigenschaften einstellen. In einem Auswahlfeld kann der Benutzer ggf. mehrere Elemente in einer Liste auswhlen. Auswahlfelder sind ntzlich, wenn Sie nur ber begrenzten Platz verfgen, jedoch viele Elemente anzeigen mssen. Sie sind auch dann sinnvoll, wenn Sie die Werte kontrollieren mchten, die an den Server zurckgemeldet werden. Anders als bei Textfeldern, in die der Benutzer beliebige Zeichenfolgen eingibt, die sogar ungltig sein knnen, legen Sie exakte Werte fest, die von einem solchen Auswahlmen zurckgegeben werden. Sie knnen zwei Arten von Auswahlfeldern in ein Formular einfgen: Mens, die nach unten aufklappen, wenn der Besucher darauf klickt, oder Mens mit einer bildlauffhigen Liste von Optionen, die der Benutzer auswhlen kann. Hinweis: Diese Erweiterung ist nur verfgbar, wenn Sie Zugriff auf einen Computer besitzen, auf dem ColdFusion MX 7 oder eine sptere Version ausgefhrt wird.
1 Setzen Sie die Einfgemarke in den Formularrahmen. 2 Klicken Sie in der Kategorie CFForm des Bedienfelds Einfgen auf das Symbol CF-Auswahl.
Liste verfgbar.
Mehrfache Listenauswahl zulassen legt fest, ob der Besucher gleichzeitig mehr als eine Option aus der Liste auswhlen kann. Diese Option ist nur fr den Typ Liste verfgbar. Werte bearbeiten ffnet ein Dialogfeld, mit dem Sie Optionen fr das Auswahlfeld hinzufgen, bearbeiten oder
entfernen knnen.
Zuerst ausgewhlt gibt an, welche Option standardmig ausgewhlt ist. Sie knnen mehr als eine Option auswhlen,
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 727
Formulare erstellen
Spalte anzeigen gibt die Datensatzgruppenspalte an, der die Anzeigebeschriftungen fr die Listenelemente
ColdFusion-Server ignoriert.
Flash-Breite ermglicht die Angabe der Steuerelementbreite in Pixel. Diese Eigenschaft wird zur Laufzeit vom ColdFusion-Server ignoriert. Meldung gibt die Meldung an, die angezeigt werden soll, wenn die Eigenschaft Erforderlich den Wert Ja hat und
der Besucher vor dem Senden des Formulars keine Auswahl vorgenommen hat.
erforderlich gibt an, ob ein Menelement ausgewhlt werden muss, bevor das Formular an den Server gesendet wird. Tag-Editor anzeigen ermglicht die Bearbeitung von Eigenschaften, die im Eigenschafteninspektor nicht aufgefhrt
werden.
Verwandte Themen
ColdFusion-Formularsteuerelemente ndern auf Seite 730 ColdFusion-Formulardaten berprfen auf Seite 730
ColdFusion-Bildfelder einfgen
Sie knnen ColdFusion-Bildfelder in Formulare einfgen und ihre Optionen einstellen. Mit Bildfeldern knnen Sie benutzerdefinierte Schaltflchen erstellen. Hinweis: Diese Erweiterung ist nur verfgbar, wenn Sie Zugriff auf einen Computer besitzen, auf dem ColdFusion MX 7 oder eine sptere Version ausgefhrt wird.
1 Setzen Sie in der Entwurfsansicht die Einfgemarke in den Formularrahmen. 2 Klicken Sie in der Kategorie CFForm des Bedienfelds Einfgen auf das Symbol CF-Bildfeld. Durchsuchen Sie
das Dateisystem, um das einzufgende Bild auszuwhlen, und klicken Sie auf OK. Sie knnen den Pfad der Bilddatei auch im Feld Quelle eingeben. Hinweis: Wenn sich das Bild nicht im Stammordner der Site befindet, sollten Sie Bild in den Stammordner kopieren. Auf Bilder auerhalb des Stammordners kann nach dem Verffentlichen der Site mglicherweise nicht mehr zugegriffen werden.
3 Whlen Sie das Bildfeld auf der Seite aus und stellen Sie im Eigenschafteninspektor die folgenden Optionen ein:
Cfimagefield ermglicht die Angabe eines eindeutigen Namens fr das Steuerelement. Quelle ermglicht die Angabe der URL des eingefgten Bilds. Alt ermglicht die Angabe einer Meldung, die anstelle des Bilds erscheint, wenn sich das Bild nicht anzeigen lsst. Ausrichten ermglicht die Angabe einer Ausrichtung fr das Bild. Rahmen ermglicht die Einstellung der Breite des Bildrahmens. Bild bearbeiten ffnet das Bild im Standardeditor fr Bilder.
Den Standardeditor fr Bilder definieren Sie mit Bearbeiten > Voreinstellungen > Dateitypen/Editoren. Ansonsten lst die Schaltflche Bild bearbeiten keine Aktion aus.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 728
Formulare erstellen
berprfen gibt den berprfungstyp fr das Bildfeld an. berprfen bei gibt an, wann das Feld berprft wird: onSubmit, onBlur oder onServer. Beschriftung ermglicht die Angabe einer Beschriftung fr den Optionsschalter. Muster ermglicht die Angabe eines regulren JavaScript-Ausdrucks zum berprfen von Eingaben. Lassen Sie voran- und nachgestellte Schrgstriche aus. Weitere Informationen enthlt die ColdFusion-Dokumentation. Hhe ermglicht die Angabe der Steuerelementhhe in Pixel. Breite ermglicht die Angabe der Steuerelementbreite in Pixel. Gre dient der Angabe der Steuerelementgre. Diese Eigenschaft wird zur Laufzeit vom ColdFusion-Server
ignoriert.
erforderlich gibt an, ob das Steuerelement Daten enthalten muss, damit das Formular an den Server gesendet werden kann. Tag-Editor anzeigen ermglicht die Bearbeitung von Eigenschaften, die im Eigenschafteninspektor nicht aufgefhrt
werden.
Verwandte Themen
ColdFusion-Formularsteuerelemente ndern auf Seite 730 ColdFusion-Formulardaten berprfen auf Seite 730
ColdFusion-Dateifelder einfgen
Sie knnen ColdFusion-Dateifelder in Formulare einfgen und ihre Eigenschaften einstellen. Verwenden Sie ein Dateifeld, damit Benutzer eine Datei (z. B. eine Textverarbeitungs- oder Grafikdatei) auf ihrem Computer auswhlen und zum Server hochladen knnen. ColdFusion-Dateifelder sehen wie Textfelder aus und unterscheiden sich von diesen nur dadurch, dass sie die Schaltflche Durchsuchen enthalten. Die Benutzer geben den Pfad der hochzuladenden Datei entweder manuell ein oder suchen die Datei mithilfe der Schaltflche Durchsuchen und whlen sie aus. Bei Dateifeldern mssen Sie zum Senden der Dateien vom Browser an den Server die Methode POST verwenden. Die Datei wird an die Adresse geschickt, die Sie im Feld Aktion des Formulars angeben. Fragen Sie Ihren Serveradministrator, ob Dateien anonym hochgeladen werden drfen, bevor Sie ein Dateifeld im Formular verwenden. Dateifelder setzen auerdem voraus, dass multipart/form als Formularkodierung ausgewhlt wurde. Dreamweaver aktiviert diesen Kodierungstyp automatisch, wenn Sie ein Dateifeld-Steuerelement einfgen. Hinweis: Diese Erweiterung ist nur verfgbar, wenn Sie Zugriff auf einen Computer besitzen, auf dem ColdFusion MX 7 oder eine sptere Version ausgefhrt wird.
1 Whlen Sie in der Entwurfsansicht das ColdFusion-Formular aus, um den zugehrigen Eigenschafteninspektor
anzuzeigen. Um das Formular schnell auszuwhlen, klicken Sie auf eine beliebige Stelle im Formularrahmen und anschlieend unten im Dokumentfenster auf das <cfform>-Tag im Tag-Selektor.
2 Aktivieren Sie im Eigenschafteninspektor die Formularmethode POST. 3 Whlen Sie multipart/form-data im Popupmen Kod.-Typ aus. 4 Setzen Sie die Einfgemarke auf die Stelle im Formularrahmen, an der das Dateifeld angezeigt werden soll. 5 Whlen Sie Einfgen > ColdFusion-Objekte > CFForm > CFfilefield aus.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 729
Formulare erstellen
Server ignoriert.
Gre dient der Angabe der Steuerelementgre. erforderlich ermglicht die Angabe, ob das Dateifeld Daten enthalten muss, damit das Formular an den Server
werden.
Verwandte Themen
ColdFusion-Formularsteuerelemente ndern auf Seite 730 ColdFusion-Formulardaten berprfen auf Seite 730
ColdFusion-Datumsfelder einfgen
Zwar knnen ColdFusion-Datumsfelder in Dreamweaver nicht interaktiv eingefgt werden, Sie knnen aber deren Eigenschaften interaktiv einstellen. Ein ColdFusion-Datumsfeld ist ein spezielles Textfeld: Benutzer knnen ein Datum in einem Popupkalender auswhlen und dann in das Textfeld einfgen. Hinweis: Diese Erweiterung ist nur verfgbar, wenn Sie Zugriff auf einen Computer besitzen, auf dem ColdFusion MX 7 oder eine sptere Version ausgefhrt wird.
1 Whlen Sie in der Entwurfsansicht das ColdFusion-Formular aus, um den zugehrigen Eigenschafteninspektor
anzuzeigen. Um das Formular schnell auszuwhlen, klicken Sie auf eine beliebige Stelle im Formularrahmen und anschlieend unten im Dokumentfenster auf das <cfform>-Tag im Tag-Selektor.
2 Weisen Sie im Eigenschafteninspektor des Formulars der Eigenschaft Format den Wert Flash zu.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 730
Formulare erstellen
4 Wechseln Sie zur Entwurfsansicht, whlen Sie das Datumsfeld auf der Seite aus und stellen Sie im
Browser geffnet wird. Das Datum kann statisch oder dynamisch sein. Um einen dynamischen Wert anzugeben, klicken Sie auf das Blitzsymbol neben dem Feld Wert. Whlen Sie dann im Dialogfeld Dynamische Daten eine Datensatzgruppenspalte aus. Die Datensatzgruppenspalte bergibt einen Wert an das Datumsfeld, wenn Sie das Formular in einem Browser anzeigen.
berprfen gibt den berprfungstyp fr das Feld an. berprfen bei gibt an, wann das Feld berprft wird: onSubmit, onBlur oder onServer. Beschriftung ermglicht die Angabe einer Beschriftung fr das Feld. Muster ermglicht die Angabe eines regulren JavaScript-Ausdrucks zum berprfen von Eingaben. Lassen Sie
voran- und nachgestellte Schrgstriche aus. Weitere Informationen enthlt die ColdFusion-Dokumentation.
Hhe ermglicht die Angabe der Steuerelementhhe in Pixel. Breite ermglicht die Angabe der Steuerelementbreite in Pixel. Gre dient der Angabe der Steuerelementgre. erforderlich ermglicht die Angabe, ob das Datumsfeld einen Wert enthalten muss, damit das Formular an den Server
werden.
Verwandte Themen
ColdFusion-Formulardaten berprfen auf Seite 730
ColdFusion-Formularsteuerelemente ndern
Sie knnen die Eigenschaften von ColdFusion-Formularsteuerelementen in der Entwurfs- und in der Codeansicht einstellen. Hinweis: Diese Erweiterung ist nur verfgbar, wenn Sie Zugriff auf einen Computer besitzen, auf dem ColdFusion MX 7 oder eine sptere Version ausgefhrt wird.
1 Whlen Sie in der Entwurfsansicht das Formularsteuerelement auf der Seite aus oder klicken Sie in der Codeansicht
auf eine beliebige Stelle innerhalb des Steuerelement-Tags. Im Eigenschafteninspektor werden die Eigenschaften des Formularsteuerelements angezeigt.
2 ndern Sie die Eigenschaften des Steuerelements im Eigenschafteninspektor.
Um weitere Informationen anzuzeigen, klicken Sie auf die Hilfeschaltflche des Eigenschafteninspektors.
3 Wenn Sie weitere Eigenschaften festlegen mchten, klicken Sie im Eigenschafteninspektor auf die Schaltflche
Tag-Editor anzeigen und stellen Sie die Eigenschaften im eingeblendeten Tag-Editor ein.
ColdFusion-Formulardaten berprfen
In Dreamweaver knnen Sie ColdFusion-Formulare erstellen, die den Inhalt der angegebenen Felder daraufhin berprfen, ob der Benutzer den richtigen Datentyp verwendet hat.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 731
Formulare erstellen
Hinweis: Diese Erweiterung ist nur verfgbar, wenn Sie Zugriff auf einen Computer besitzen, auf dem ColdFusion MX 7 oder eine sptere Version ausgefhrt wird.
1 Erstellen Sie ein ColdFusion-Formular, das mindestens ein Eingabefeld und die Schaltflche Senden enthlt.
Beachten Sie, dass jedes ColdFusion-Feld, das Sie auswerten mchten, einen eindeutigen Namen bentigt.
2 Whlen Sie ein auszuwertendes Feld im Formular aus. 3 Geben Sie im Eigenschafteninspektor an, wie das Feld ausgewertet werden soll.
Im unteren Teil der Eigenschafteninspektoren befinden sich Steuerelemente, mit denen Sie Auswertungsregeln definieren knnen. Sie knnen z. B. festlegen, dass ein Textfeld eine Telefonnummer enthalten soll. Whlen Sie zu diesem Zweck im Popupmen Wert des Eigenschafteninspektors den Wert Telefonnummer aus. Sie knnen den Auswertungszeitpunkt im Popupmen berprfen bei angeben.
ENTWURF
Letzte Aktualisierung 19.3.2010
732
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 733
Eingabehilfen
Dialog- und Bedienfelder werden in den systemweit festgelegten Farben angezeigt. Wenn Sie z. B. die Einstellung
Wei auf Schwarz auswhlen, werden alle Dialog- und Bedienfelder in Dreamweaver mit weiem Vordergrund und schwarzem Hintergrund angezeigt.
In der Codeansicht werden die System- und Fenstertextfarben verwendet. Wenn Sie beispielsweise als Systemfarbe
Wei auf Schwarz auswhlen und dann die Textfarben unter Bearbeiten > Voreinstellungen > Farbe fr Code ndern, werden diese Farbeinstellungen in Dreamweaver ignoriert und der Codetext wird mit weiem Vordergrund und schwarzem Hintergrund angezeigt.
In der Entwurfsansicht werden die Hintergrund- und Textfarben verwendet, die Sie unter Modifizieren >
Seiteneigenschaften festgelegt haben, sodass die Farben auf den erstellten Seiten wie in einem Browser dargestellt werden.
(Macintosh) aus.
2 Whlen Sie links in der Kategorieliste die Option Eingabehilfen aus, whlen Sie ein Objekt aus, legen Sie die
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 734
Eingabehilfen
Externe Wiedergabe Aktivieren Sie diese Option bei Verwendung eines Bildschirmlesegerts.
Hinweis: Im Dialogfeld Tabelle einfgen werden automatisch Eingabehilfen-Attribute angezeigt, wenn Sie eine neue Tabelle einfgen.
Dreamweaver-Barrierefreiheitsprfungsbericht
Der Dreamweaver-Barrierefreiheitsprfungsbericht ist ab Dreamweaver CS5 veraltet.
Navigation in Bedienfeldern
1 Drcken Sie im Dokumentfenster die Tasten Strg+F6, um den Fokus auf ein Bedienfeld zu setzen.
Eine gepunktete Linie um die Titelleiste des Bedienfelds gibt an, dass sich das Bedienfeld im Fokus befindet. Die Bildschirmlesegerte lesen die Titelleiste des im Fokus befindlichen Bedienfelds.
2 Drcken Sie Strg+F6 erneut, bis das gewnschte Bedienfeld den Fokus erhlt. (Mit Strg+Umschalt+F6 wird in das
entsprechende Bedienfeld auf. Drcken Sie dann Strg+F6. Wenn das gewnschte Bedienfeld bereits geffnet, jedoch nicht erweitert ist, aktivieren Sie die Titelleiste des Bedienfelds und drcken Sie dann die Leertaste. Durch erneutes Drcken der Leertaste reduzieren Sie das Bedienfeld wieder.
4 Durch Drcken der Tabulatortaste gelangen Sie im Bedienfeld von einer Option zur nchsten. 5 Verwenden Sie bei Bedarf die Pfeiltasten:
Wenn eine Option mehrere Wahlmglichkeiten aufweist, knnen Sie diese mit den Pfeiltasten durchgehen. Mit der
Leertaste whlen Sie dann die gewnschte Mglichkeit aus.
Wenn ein Bereich des Bedienfelds Registerkarten aufweist, ber die weitere Bedienfelder geffnet werden knnen,
setzen Sie den Fokus auf die geffnete Registerkarte und ffnen Sie dann die anderen Registerkarten mithilfe der Taste Pfeil-nach-links oder Pfeil-nach-rechts. Nachdem Sie eine neue Registerkarte geffnet haben, knnen Sie mit der Tabulatortaste durch deren Optionen navigieren.
Im Eigenschafteninspektor navigieren
1 Drcken Sie Strg+F3, um den Eigenschafteninspektor anzuzeigen, wenn dieser nicht angezeigt wird. 2 Drcken Sie Strg+F6 (nur Windows), bis der Fokus auf dem Eigenschafteninspektor liegt. 3 Durch Drcken der Tabulatortaste gelangen Sie im Eigenschafteninspektor von einer Option zur nchsten. 4 Gehen Sie mit den entsprechenden Pfeiltasten die verschiedenen Wahlmglichkeiten einer Option durch. 5 Drcken Sie Strg+Nach-unten/oben (Windows) bzw. Befehlstaste+Nach-unten/oben (Macintosh), um den
erweiterten Bereich des Eigenschafteninspektors nach Bedarf zu ffnen oder zu schlieen, oder setzen Sie den Fokus rechts unten auf den Erweiterungspfeil und drcken Sie die Leertaste.
ENTWURF
Letzte Aktualisierung 19.3.2010
VERWENDEN VON DREAMWEAVER CS5 735
Eingabehilfen
Hinweis: Der Tastaturfokus muss sich im Eigenschafteninspektor (und nicht auf dem Bedienfeldtitel) befinden, damit das Erweitern und Reduzieren funktioniert.
In Dialogfeldern navigieren
1 Durch Drcken der Tabulatortaste gelangen Sie im Dialogfeld von einer Option zur nchsten. 2 Mit den Pfeiltasten knnen Sie die einzelnen Wahlmglichkeiten einer Option durchgehen. 3 Weist ein Dialogfeld eine Kategorienliste auf, drcken Sie Strg+Tab, um den Fokus auf die Kategorienliste zu
setzen. Durchlaufen Sie die Liste dann mit den Pfeiltasten nach oben oder unten.
4 Drcken Sie Strg+Tab erneut, um in die Optionen einer Kategorie zu wechseln. 5 Drcken Sie die Eingabetaste, um das Dialogfeld zu schlieen.
In Frames navigieren
Wenn Ihr Dokument Frames enthlt, knnen Sie den Fokus mit den Pfeiltasten auf einen bestimmten Frame
setzen.
Frames auswhlen
1 Mit Alt+Pfeil-nach-unten setzen Sie die Einfgemarke in das Dokumentfenster. 2 Drcken Sie Alt+Pfeil-nach-oben, um den Frame auszuwhlen, der sich gerade im Fokus befindet. 3 Durch wiederholtes Drcken von Alt+Pfeil-nach-oben setzen Sie den Fokus auf das Frameset und bei
in einem Frameset.
5 Wenn der Fokus auf einem einzelnen Frame liegt, gelangen Sie mit Alt+Pfeil-nach-links bzw. Alt+Pfeil-nach-
In Tabellen navigieren
1 Mit den Pfeiltasten oder mit der Tabulatortaste gelangen Sie von einer Zelle zur nchsten.
Wenn Sie in der uersten rechten Zelle die Tabulatortaste drcken, wird eine neue Zeile in die Tabelle eingefgt.
2 Zum Auswhlen einer Zelle drcken Sie Strg+A (nur in Windows), whrend sich die Einfgemarke in der Zelle
befindet.
3 Wenn Sie die gesamte Tabelle auswhlen mchten, drcken Sie die Tasten Strg+A zweimal, wenn sich die
Einfgemarke in einer Zelle befindet, oder einmal, wenn eine Zelle ausgewhlt ist.
4 Wenn Sie eine Tabelle schlieen mchten, drcken Sie die Tasten Strg+A dreimal, wenn sich die Einfgemarke in
einer Zelle befindet, zweimal, wenn die Zelle ausgewhlt ist, und einmal, wenn die Tabelle ausgewhlt ist. Drcken Sie dann Pfeil-nach-oben, Pfeil-nach-links oder Pfeil-nach-rechts.