Unser Online-Tipp für noch mehr Wissen.... aktuelles Fachwissen rund um die Uhr zum Probelesen, Downloaden oder auch auf Papier.

Transkript

1 Dreamweaver MX 1

2 Unser Online-Tipp für noch mehr Wissen... aktuelles Fachwissen rund um die Uhr zum Probelesen, Downloaden oder auch auf Papier.

3 Enno Ladwig 2Dreamweaver MX An imprint of Pearson Education München Boston San Francisco Harlow, England Don Mills, Ontario Sydney Mexico City Madrid Amsterdam

4 Bibliografische Information Der Deutschen Bibliothek Die Deutsche Bibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte bibliografische Daten sind im Internet über abrufbar. Die Informationen in diesem Produkt werden ohne Rücksicht auf einen eventuellen Patentschutz veröffentlicht. Warennamen werden ohne Gewährleistung der freien Verwendbarkeit benutzt. Bei der Zusammenstellung von Texten und Abbildungen wurde mit größter Sorgfalt vorgegangen. Trotzdem können Fehler nicht vollständig ausgeschlossen werden. Verlag, Herausgeber und Autoren können für fehlerhafte Angaben und deren Folgen weder eine juristische Verantwortung noch irgendeine Haftung übernehmen. Für Verbesserungsvorschläge und Hinweise auf Fehler sind Verlag und Herausgeber dankbar. Alle Rechte vorbehalten, auch die der fotomechanischen Wiedergabe und der Speicherung in elektronischen Medien. Die gewerbliche Nutzung der in diesem Produkt gezeigten Modelle und Arbeiten ist nicht zulässig. Fast alle Hardware- und Softwarebezeichnungen, die in diesem Buch erwähnt werden, sind gleichzeitig auch eingetragene Marken oder sollten als solche betrachtet werden. Umwelthinweis: Dieses Buch wurde auf chlorfrei gebleichtem Papier gedruckt. Die Einschrumpffolie zum Schutz vor Verschmutzung ist aus umweltverträglichem und recyclingfähigem PE-Material ISBN by Addison-Wesley Verlag, ein Imprint der Pearson Education Deutschland GmbH Martin-Kollar-Straße 10 12, D München/Germany Alle Rechte vorbehalten Einbandgestaltung: Lektorat: Korrektorat: Herstellung: CD Mastering: Satz und Layout: Druck und Verarbeitung: Barbara Thoben, Köln Klaus Hofmann, khofmann@pearson.de Simone Meißner, Fürstenfeldbruck Philipp Burkart, pburkart@pearson.de Gregor Kopietz, gkopietz@pearson.de mediaservice, Siegen ( MediaPrint, Paderborn Printed in Germany

5 Inhaltsverzeichnis 5 1Inhaltsverzeichnis 1 Vorwort 13 Basics 2 Einleitung Was ist Dreamweaver? Die Voraussetzungen 18 3 Erste Schritte mit Dreamweaver Systemvoraussetzungen Dreamweaver installieren Installation unter OS X Installation unter XP Problembewältigung Dreamweaver das erste Mal öffnen Die Oberfläche Dreamweavers Das Dokumentfenster Die Einfügen-Leiste Der Eigenschaften-Inspektor Die Bedienfeldgruppen 40 4 Planen eines Internetauftritts Die Grundidee Inhalte recherchieren An wen richtet sich die Site? Wichtige Hinweise zur Gestaltung für das Web Navigation Layout Ein paar Design-Tipps Die häufigsten Fehler im Webdesign Checkliste Planung Dateien für Web speichern 56

6 6 Inhaltsverzeichnis 4.6 Farben Hexadezimal-Farben Websichere Farben Farben wählen Dithering Mehr über Farben 60 5 Die Hilfen von Dreamweaver Dreamweaver-Hilfe F Das Fragezeichen Hilfe-Schaltflächen Das Dreamweaver Support Center Referenz Visuelle Hilfen Lineale Raster HTML Codierungsfarben Weitere Hilfsmittel Verlauf Elemente-Bedienfeld Eingabehilfen Suchen und Ersetzen Voreinstellungen modifizieren 73 take off 6 Dokument erstellen Site definieren Text einfügen und formatieren Absatz und Zeilenumbruch Geschütztes Leerzeichen Links, rechts und zentriert ausrichten Weitere Formatierungen Schriftarten und Schriftgrößen Text einfärben <html> Quick Tag Editor Seiteneigenschaften ändern Bilder in Webseiten GIF JPEG oder JPG PNG Bild in Webseite einfügen Bildeigenschaften verändern 93

7 Inhaltsverzeichnis 6.6 Verknüpfungen erstellen Lokale Verknüpfungen Externe Verknüpfungen Anker-Verknüpfungen innerhalb einer Seite Link Speichern Dokument überprüfen Tabellen Funktionstabelle erstellen <table> Tabellen modifizieren Tabellen automatisch füllen Tabelleninhalte formatieren Tabellen sortieren Layout-Tabelle Platzhalterbilder Spalte automatisch strecken Hinweise zu Tabellen Verschachtelte Tabellen Nachteile von Tabellen Als Vorlage speichern Bereiche Bearbeitbare Bereiche Wiederholende Bereiche Optionale Bereiche Bearbeitbares Tag-Attribut Neu von Vorlage Von Vorlage lösen Ohne Markup exportieren Vorlage aktualisieren Die Bibliothek Frames <FRAMESET> Frames erstellen Frameset im Dialogfeld Neues Dokument erstellen Frames mit der Einfügen-Leiste hinzufügen Frameset ändern Frameset ziehen Verschachtelte Frames 153

8 8 Inhaltsverzeichnis 9.4 Frames löschen Frame-Bedienfeld Eigenschaften des Framesets Frame-Eigenschaften Rollbalken Größenveränderung von Frames Abstand Inhalte einfügen Frames speichern Target Frames benennen Ziele setzen No-Frames Hinweise zu Frames Webseiten publizieren Fortgeschrittenes Webdesign Ebenen Formulare Verhaltensweisen Zeitleisten Dynamische Webseitengestaltung Internet-Publikation vorbereiten Ordnung Code optimieren Verweise Rechtschreibung Zielbrowser überprüfen Site hochladen Entfernte Site einstellen Dateien bereitstellen (hochladen) Website online überprüfen Weitere Hilfsmittel für die Arbeitsteilung 176 Advanced 11 Vorwort 179 take off 12 Fortgeschrittene Praxis Rollover-Bilder Animierte Flash-Schaltflächen Flash-Text 186

9 Inhaltsverzeichnis 12.4 Web-Fotoalbum Medien einbinden Fireworks HTML importieren Image Maps Stile HTML-Stile HTML-Stile anzeigen Neuen Stil erstellen HTML-Stil anwenden Vorhandene Stile editieren Cascading Style Sheets CSS anzeigen CSS hinzufügen CSS-Stil anwenden CSS-Stile editieren Formulare Funktionsweise Formularobjekte Benennung der Formularobjekte Formular einfügen Formularrahmen Textfelder Kontrollkästchen Optionsschalter Menü & Liste Schaltflächen Bildfeld Versteckte Felder Dateifeld Formular-Einstellungen Formulare und Verhaltensweisen Das Sprungmenü Ebenen <DIV> und <SPAN> Ebene zeichnen Verschachtelte Ebenen Ebenen-Bedienfeld Ebenen im Eigenschaften-Inspektor einstellen Ebenen anordnen 228

10 10 Inhaltsverzeichnis 15.7 Ebenen konvertieren Ebenen in Tabellen konvertieren Tabellen in Ebenen konvertieren Verhaltensweisen Funktionsweise Objekt Aktion Ereignisse Verhaltensweisen-Bedienfeld Verhaltensweisen hinzufügen Verhaltensweisen editieren Einzelne Verhaltensweisen in Aktion Audio steuern Bild austauschen Bilder vorausladen Browser überprüfen Browserfenster öffnen Ebene ziehen Ebenen ein-/ausblenden Eigenschaften ändern Formular überprüfen Gehe zu URL JavaScript aufrufen Plug-In überprüfen Popup-Meldung Popup-Menü einblenden Shockwave oder Flash steuern Sprungmenü Text vom Frame einstellen Text in der Statusleiste Zeitleisten Weitere Verhaltensweisen 260 take off 17 Zeitleisten Zeitleisten-Bedienfeld Zeitleiste erstellen Objekt in Zeitleiste einfügen Objekt aus Zeitleiste löschen Gesamte Zeitleiste löschen Weitere Zeitleisten 265

11 Inhaltsverzeichnis 17.3 Schlüsselbilder Weitere Schlüsselbilder Schlüsselbilder verschieben Zeitleisten verlängern oder verkürzen Objekte animieren Ebenen bewegen Pfad aufzeichnen Ebenen in Zeitleisten ein- und ausblenden Stapelreihenfolge verändern Dimensionen verändern Bilddateien austauschen Zeitleisten wiedergeben Zeitleisten abspielen und stoppen Schleife Zeitleiste spulen Weitere Verhaltensweisen hinzufügen Hinweise zu Zeitleisten Dynamische Webseiten Statische und dynamische Seiten Webanwendung Technologien CGI (Common Gateway Interface) ASP (Active Server Pages) PHP (PHP Hypertext Preprocessor) Coldfusion JSP (JavaServer Pages) Dynamische Seitenerstellung mit Dreamweaver MX Arbeitsablauf Live Data-Ansicht Einfügen-Leiste Alternative Wege zu dynamischen Inhalten ForumRomanum Kostenlos Dreamweaver anpassen und erweitern Eigene Befehle erstellen Menü bearbeiten Einfügen-Leiste einrichten Tastaturkurzbefehle anpassen 291

12 take off 12 Inhaltsverzeichnis 20 Site-Promotion Suchmaschinen Arbeitsweise Meta-Tags Weitere Publikationsmöglichkeiten 297 Referenz 21 Referenz 301 A Anhang 341 A.1 Bibliografie 341 A.2 Ressourcen 342 A.3 JavaScript-Ereignisse & kompatible Browser 343 Danke 347 Index 349 Farbteil F Farbteil des Buches III F.1 Bilder für Web speichern III F.1.1 GIF III F.1.2 JPEG oder JPG V F.2 Wann benutze ich welches Format? VI F.2.1 Beispiel für die Verwendung eines JPEG VI F.2.2 Beispiel für die Verwendung eines GIF VII F.3 Farbpaletten VIII F.3.1 Hexadezimal-Farben VIII F.3.2 Websichere Farben VIII F.3.3 Farben wählen IX

13 1Vorwort 1 KAPITEL Willkommen zu Dreamweaver MX. Dieses Buch gliedert sich in drei Abschnitte: Basics, Advanced und Referenz. Im einführenden Teil (Basics) werden Sie die wichtigsten Fenster und Bedienfelder im Umgang mit Dreamweaver kennen lernen. Dabei werden wir gelegentlich auch einen kurzen Blick in den HTML-Code werfen und Ausflüge in andere Themenbereiche machen, die für die Erstellung von Internetseiten wichtig sind. Anhand eines Beispiels werden Sie Stück für Stück in die Materie Dreamweavers eingeführt, so dass Sie am Ende des ersten Teils dieses Buches eigene Basis-Seiten für das Internet erstellen werden können. Mit Dreamweaver, eigenständig und ohne Handbuch! Im Advanced-Teil werden wir uns komplexeren Themen wie beispielsweise Ebenen, Formularen, Verhaltensweisen (JavaScript) und Zeitleisten zuwenden. Dort werden wir die in der Einleitung erstellten Beispielseiten um diese Themengebiete erweitern, so dass Sie am Ende des zweiten Teils auch die komplexeren Teile Dreamweavers beherrschen. Des Weiteren werde ich Ihnen dort eine kurze Einführung in die dynamische Webseiten-Erstellung geben und Webanwendungsentwicklern die hierfür in Dreamweaver integrierten Tools aufzeigen. Der finale Referenzteil soll Ihnen als fortgeschrittenen Dreamweaver-Nutzer die Möglichkeit geben, bei eventuell auftretenden Problemen nachzuschlagen. Eine kurze Zusammenfassung wichtiger Stichworte und Programmteile wird Ihnen bei der Lösung Ihres Problems weiterhelfen oder Sie auf den ausführlicheren Teil des Buches verweisen.

14 take off 14 Vorwort Sämtliche der in diesem Buch verwendeten Beispieldateien befinden sich auch auf der beigelegten CD-ROM. Immer dann, wenn Sie dieses Icon sehen, lohnt es sich, einen Blick auf die CD-ROM zu werfen. Auf dieser finden Sie eine mit index.html betitelte Datei, die Sie bitte in einem Browser wie Internet Explorer öffnen. Im Browserfenster können Sie dann über ein Popup-Menü zu der jeweiligen Beispieldatei navigieren. Auf der CD finden Sie außerdem eine Buchliste mit Tipps zu weiterführender Literatur und eine Auswahl an Demosoftware. Für weitere aktuelle Informationen und ein Leserforum besuchen Sie bitte auch meine Website, die Sie über die Adresse aufrufen können. Dort finden Sie selbstverständlich ebenfalls die auf der CD-ROM befindlichen Beispiele. An dieser Stelle möchte ich noch kurz auf die weiteren Konventionen in diesem Buch zu sprechen kommen. Dieses Icon verwende ich im Buch für nützliche Hintergrund-Informationen. Dieses Icon weist Sie stets auf Fehlerquellen oder Probleme hin. Und schließlich soll dieses Icon einige Tipps geben, beispielsweise darüber, wie sich ein Problem möglicherweise schneller lösen lässt. So Sie Fragen oder Anregungen zu diesem Buch haben, können Sie eine an oder an schreiben. Ich wünsche Ihnen viel Spaß und Erfolg beim Arbeiten mit Dreamweaver. Enno Ladwig im September 2002