Adobe Dreamweaver CS5

Transkript

1

2 Hussein Morsy Adobe Dreamweaver CS5 Der praktische Einstieg

3 Liebe Leserin, lieber Leser, mit Dreamweaver haben Sie sich für ein Werkzeug entschieden, mit dem Sie auf komfortable Art und Weise professionelle Webseiten erstellen und gestalten können. Es bietet Funktionen für alle Anwendungszwecke und ist auch noch besonders benutzerfreundlich. Dieses Buch möchte Sie bei Ihrem Einstieg in zweierlei Hinsicht unterstützen: Zunächst einmal werden Sie in praktischen Workshops Schritt für Schritt alle wichtigen Funktionen der Software kennenlernen, so dass Sie bereits nach kurzer Zeit das nötige Handwerkszeug beherrschen, um Webseiten aller Arten entwickeln zu können. Sie werden Texte und Bilder einfügen, Navigationen erstellen, Ihre Seiten mit CSS gestalten, einen Blog integrieren u. v. m. Darüber hinaus werden Sie aber z. B. auch erfahren, wie Sie einen Provider für Ihre Website finden, welche grundsätzlichen Designprinzipien Sie beachten sollten, damit Ihre Website selbst professionellen Ansprüchen genügt, und wie Sie sie für die Google-Suche optimieren können. Damit bietet Ihnen dieses Buch nicht nur einen Einstieg in Dreamweaver, sondern gleich auch in das Erstellen von Websites allgemein. Damit Sie die Workshops direkt praktisch nachvollziehen können, stehen alle Beispieldateien auf der Website zum Buch zum Download für Sie bereit. Dort finden Sie außerdem fertige CSS-Layouts, die Sie als Orientierung für Ihre eigene Website verwenden können. Dieses Buch wurde mit großer Sorgfalt geschrieben, geprüft und produziert. Sollte dennoch einmal etwas nicht so funktionieren, wie Sie es erwarten, freue ich mich, wenn Sie sich mit mir in Verbindung setzen. Ihre Kritik und konstruktiven Anregungen sind uns jederzeit herzlich willkommen! Viel Spaß beim Erstellen Ihrer Webseiten wünscht Ihnen nun Ihre Christine Siedle Lektorat Galileo Design Galileo Press Rheinwerkallee Bonn

4 Auf einen Blick Teil I Einführung Ein Platz im Internet Die Sprachen des Web Dreamweaver im Vergleich Dreamweaver CS5 los geht s Die Arbeitsumgebung Teil II Ein Websiteprojekt Eine neue Website Eine Vorlage anlegen Seiten mit Inhalten füllen Erstellen einer Navigation Das Design festlegen Websites testen, veröffentlichen und verwalten Teil III Dreamweaver im Detail Texte eingeben und strukturieren Arbeiten mit CSS Bilder einfügen Tabellen erstellen Hyperlinks einsetzen Interaktivität mit JavaScript Formulare erstellen Teil IV Über Dreamweaver hinaus Dreamweaver und die Creative Suite Bloggen mit WordPress Gesucht und gefunden bei Google Mashups die Welt in Ihre Website einbinden

5 Der Name Galileo Press geht auf den italienischen Mathematiker und Philosophen Galileo Galilei ( ) zurück. Er gilt als Gründungsfigur der neuzeitlichen Wissenschaft und wurde berühmt als Verfechter des modernen, heliozentrischen Weltbilds. Legendär ist sein Ausspruch Eppur se muove (Und sie bewegt sich doch). Das Emblem von Galileo Press ist der Jupiter, umkreist von den vier Galileischen Monden. Galilei entdeckte die nach ihm benannten Monde Lektorat Christine Siedle Korrektorat Marlis Appel Herstellung Steffi Ehrentraut Einbandgestaltung NIESNER DESIGN, Neuss Satz SatzPro, Krefeld Druck Bercker Graphischer Betrieb, Kevelaer Dieses Buch wurde gesetzt aus der Linotype Syntax (9,25 pt/13 pt) in Adobe InDesign CS4. Gedruckt wurde es auf chlorfrei gebleichtem Offsetpapier (90 g/m²). Gerne stehen wir Ihnen mit Rat und Tat zur Seite: bei Fragen und Anmerkungen zum Inhalt des Buches für versandkostenfreie Bestellungen und Reklamationen für Rezensions- und Schulungsexemplare Bibliografische Information der Deutschen Nationalbibliothek Die Deutsche Nationalbibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte bibliografische Daten sind im Internet über abrufbar. ISBN Galileo Press, Bonn Auflage 2010 Das vorliegende Werk ist in all seinen Teilen urhe berrechtlich geschützt. Alle Rechte vorbehalten, insbesondere das Recht der Übersetzung, des Vortrags, der Reproduktion, der Vervielfältigung auf foto mechanischem oder anderen Wegen und der Speicherung in elektronischen Medien. Ungeachtet der Sorgfalt, die auf die Erstellung von Text, Abbildungen und Programmen verwen det wurde, können weder Verlag noch Autor, Herausgeber oder Übersetzer für mögliche Fehler und deren Folgen eine juristische Verantwortung oder irgendeine Haftung übernehmen. Die in diesem Werk wiedergegebenen Ge brauchsnamen, Handels namen, Warenbezeichnungen usw. können auch ohne besondere Kenn zeichnung Marken sein und als solche den gesetz lichen Bestimmungen unterliegen.

6 Inhalt Teil I Einführung Ein Platz im Internet Wie kommt meine Site ins Internet? Was ist eine Website? Ein Platz im Die eigene Domain Was ist eine Domain? Subdomains Top-Level-Domains Ist meine Domain noch frei? Domains registrieren Einen Provider finden Auswahl eines Webhosters Das passende Angebot finden Braucht man einen eigenen Webserver? Wie konfigurieren Sie Ihren Webspace? Die Sprachen des Web Welche Sprachen gibt es? Hypertext Markup Language Strukturieren von Inhalten Tag-Attribute HTML-Entities Header und Body Darstellung im Browser Extensible Hypertext Markup Language HTML Cascading Style sheets Externe CSS-Datei JavaScript Ajax PHP und MySQL Webbrowser und Rendering Engines

7 Inhalt 3 Dreamweaver im Vergleich Die Geschichte von Dreamweaver Dreamweaver Ultradev Dreamweaver MX und MX Dreamweaver 8 und die Übernahme von Macromedia durch Adobe Neues in Dreamweaver CS CS-Live-Services und BrowserLab Widgets Neue Site Verbesserte Live- und LiveCode-Ansicht CSS-Eigenschaften deaktivieren CSS-Prüfmodus Verbesserungen für PHP-Programmierer Detailverbesserungen Die Konkurrenz im Vergleich RapidWeaver Coda Microsoft Expression Web Reine Texteditoren Dreamweaver CS5 los geht s Dreamweaver installieren und aktualisieren Updates Der Programmstart Die erste HTML-Seite Eine Website mit Hyperlinks und Bildern Die Arbeitsumgebung Dokumentenfenster Entwurfs-Ansicht Live-Ansicht Code-Ansicht Teilen-Ansicht Statuszeile Der Code-Navigator Der Eigenschaftsinspektor Texteigenschaften

8 Inhalt CSS-Eigenschaften Bildeigenschaften Weitere Eigenschaften Eigenschaftsfenster in zwei Darstellungen Paletten Die»Einfügen«-Palette Rubriken Anpassen der Arbeitsumgebung Arbeitsbereiche Voreinstellungen HTML5 voreinstellen Teil II Ein Websiteprojekt Eine neue Website Unser Beispielprojekt Beispielwebsite herunterladen Lokaler Site-Ordner Neue Site anlegen und konfigurieren Site für fertige Website erstellen Wechseln zwischen Sites Eine Vorlage anlegen Vorlage entwerfen Was ist eine Vorlage? Beispiele im Web Vorlage planen Ein Layout erstellen Beispielinhalte erstellen Eine Vorlage mit bearbeitbaren Bereichen erstellen Seiten mit Inhalten füllen Neue Webseite erstellen Neue Dateien aus Vorlage erzeugen Seitentitel vergeben Seiteninhalte einfügen Texte erstellen Überschriften

9 Inhalt Listen erstellen Bilder einfügen Tabellen erstellen Erstellen einer Navigation Hauptnavigation Menüeinträge bearbeiten Fußzeilennavigation Vorlage speichern und auf Seiten anwenden Das Design festlegen Erstellen von Grafik-Segmenten Das Kopf-Segment Das Inhalts-Segment Das Fuß-Segment Aufbau von CSS-Dateien CSS-Datei bearbeiten CSS-Regeln für das Layout der Beispielwebsite Die CSS-Regel "body" Die CSS-Regel ".container" Die CSS-Regel ".header" Die CSS-Regel "h1" Die CSS-Regel ".content" Die CSS-Regel ".sidebar1" Die CSS-Regel ".footer" CSS-Regel für die Links in der Fußzeile erstellen CSS-Regeln für die Navigation Websites testen, veröffentlichen und verwalten Website im Browser testen Browservielfalt Browsershots Browservorschau einstellen Website im Browser testen Webseite im Adobe BrowserLab testen Alle Hyperlinks testen Browserkompatibilität und Zugänglichkeit prüfen FTP-Übertragung konfigurieren

10 Inhalt 11.3 Übertragen der Site auf den Server Übertragen über das Fenster»Dateien« Übertragung im Dokumentenfenster Website synchronisieren Website verwalten CMS mit Adobe InContext Editing Teil III Dreamweaver im Detail Texte eingeben und strukturieren Textinhalte erstellen Text eingeben Sonderzeichen eingeben Leerzeichen eingeben Inhalte strukturieren Überschriften Absätze Einrückungen Vorformatierte Absätze Listen Hervorhebungen Importieren aus Word Word-HTML optimieren Texte aus der Zwischenablage einfügen Style sheets und Word Arbeiten mit CSS Was sind Cascading Style sheets? Externe und interne CSS CSS in Vorlagen einsetzen Methoden zur CSS-Erstellung CSS für Einsteiger CSS über Seiteneigenschaften CSS über Eigenschaftsinspektor Fortgeschrittene Techniken Das Fenster»CSS-Stile« Neuen CSS-Stil erstellen CSS-Stile bearbeiten CSS-Stile-Eigenschaften

11 Inhalt Überprüfen-Modus CSS-Regeln löschen CSS-Regeln deaktivieren Klassen-Selektoren umbenennen CSS-Stile Texten zuweisen Externe Style sheets verknüpfen Style sheets verschieben Bilder einfügen Bilder bearbeiten Bildformate für das Web GIF JPEG PNG Bilder, Platzhalter und Hintergründe Bilder einfügen Bild-Platzhalter einsetzen Bilder oder Platzhalter austauschen Rollover-Bilder einsetzen Bildeinstellungen Bild ausrichten Alternativtext eingeben Bildgröße einstellen Bilder zuschneiden Helligkeit, Kontrast und Schärfe Tabellen erstellen Sonderfall Webtabellen Verschiedene Tabellenansichten Standard-Ansicht Erweiterte Ansicht Erstellen einer Tabelle Eigenschaften von Gesamttabellen Tabellen markieren Einstellungen für ganze Tabellen Höhe und Breite anpassen Eigenschaften von Tabellenbereichen Spalten, Zeilen und Zellen auswählen Einstellungen für Tabellenbereiche

12 Inhalt Tabellenzellen gruppieren Spalten und Zeilen hinzufügen Tabellen sortieren Hyperlinks einsetzen Navigieren mit Hyperlinks Funktionsweise von Hyperlinks Das Wichtigste: die URL Hyperlinks anlegen in Dreamweaver Externe und interne Hyperlinks Links innerhalb einer Webseite Löschen von Hyperlinks Spezielle Hyperlinks anlegen Leere Links Links Imagemaps Download-Links Automatische Weiterleitung Interaktivität mit JavaScript Wie funktioniert JavaScript? JavaScript im Eigenschaftsinspektor JavaScript über Menüs einfügen Rollover-Bilder Funktionsweise eines Verhaltens Ein Verhalten einfügen Wichtige Verhalten im Überblick Aktionen hinzufügen Aktionen bearbeiten Aktionen entfernen Ereignis festlegen Das JavaScript-Framework Spry Widgets Formulare erstellen Eigenschaften von Formularen Formulare mit Dreamweaver

13 Inhalt 18.3 Funktionsweise einrichten Formulare layouten Formularelemente einfügen Einfache Textfelder Mehrzeilige Textfelder Kontrollkästchen Optionsschalter Auswahllisten Schaltflächen Versteckte Felder Weitere Elemente Formularüberprüfung einbauen mit Spry Felder überprüfen Eigene Fehlermeldungen festlegen Spry-Überprüfungen bearbeiten Ein Kontaktformular anlegen Teil IV Über Dreamweaver hinaus Dreamweaver und die Creative Suite Die Creative Suite Adobe Photoshop CS Photoshop-Dateien in Dreamweaver importieren Bilder aus der Zwischenablage einfügen Bilder in Photoshop bearbeiten Einstellungen Adobe Fireworks CS Fireworks-Dateien in Dreamweaver importieren Bilder in Fireworks bearbeiten Adobe Flash CS5 und Flash Catalyst CS So funktioniert Flash Plugin erforderlich Flash-Filme integrieren Eigenschaften von Flash Contribute CS Adobe Bridge

14 Inhalt 20 Bloggen mit WordPress Was sind Weblogs? Leistungsmerkmale von WordPress WordPress installieren WordPress administrieren Einloggen im Administrationsbereich Schreiben von Beiträgen Verwalten von Beiträgen WordPress-Templates Themes anpassen Gesucht und gefunden bei Google Ihre Website mit Google bekannt machen Tipps zur Suchmaschinen-Optimierung Verwenden Sie Titel und alt-attribute Meta-Tags Meta-Tags bearbeiten Website von anderen Websites verlinken Was Sie unbedingt vermeiden sollten Besucher-Statistiken mit Google Analytics Google Analytics einrichten Anzeigen mit Google AdWords Geld verdienen mit Google AdSense Mashups die Welt in Ihre Website einbinden YouTube-Videos integrieren Google Maps integrieren Twitter integrieren Index

15

16 Workshops Dreamweaver CS5 los geht s»hallo-welt«-seite erstellen Seite auf Basis einer gestalteten Webseite erstellen Die Arbeitsumgebung Eine neue Website Leere Site erstellen Eine Vorlage anlegen Das Layout für die Vorlage definieren Inhalte festlegen Vorlage erstellen Seiten mit Inhalten füllen Neue Webseite aus der Vorlage erstellen Bilder einfügen Tabelle erstellen Erstellen einer Navigation Spry-Menüleiste in Vorlage einfügen Ändern der Menüeinträge Links im Fußbereich hinzufügen Vorlage speichern Das Design festlegen CSS-Datei bearbeiten CSS-Regel "body" CSS-Regel ".container" bearbeiten CSS-Regel ".header" bearbeiten CSS-Regel "h1" bearbeiten CSS-Regel ".sidebar1" bearbeiten CSS-Regel ".footer" bearbeiten Neue CSS-Regel für Links in der Fußzeile erstellen CSS-Regeln für Navigation anpassen

17 Workshops Websites testen, veröffentlichen und verwalten Weitere Browser in die Vorschaufunktion einbinden Webseite in Adobe BrowserLab anzeigen lassen Links überprüfen FTP-Server in Dreamweaver einrichten Gesamte Website übertragen Einzelne Webseite übertragen Website synchronisieren InContext Editing für Ihre Website einrichten Inhalte online bearbeiten Texte eingeben und strukturieren Erstellung einer Liste Arbeiten mit CSS Seiteneigenschaften festlegen Neuen Stil im Eigenschafts -inspektor erstellen Bereits angelegten CSS-Stil anwenden Neuen CSS-Stil erstellen Externe CSS-Datei in Seite einbinden Bilder einfügen Bild einfügen Bild-Platzhalter einfügen Größe eines Bildes in Dreamweaver verändern Bild zuschneiden Tabellen erstellen Neue Tabelle erstellen Tabellenzellen gruppieren Hyperlinks einsetzen Ankerpunkte anlegen und darauf verlinken Eine Imagemap erstellen Interaktivität mit JavaScript Rollover-Bild einfügen Seite in neuem Fenster öffnen Formulare erstellen Skript für Kontaktformular einbauen

18 Workshops Dreamweaver und die Creative Suite Photoshop-Datei in Dreamweaver importieren PNG-Datei importieren und umwandeln Flash-Film in Webseite einfügen Bloggen mit WordPress WordPress installieren Installation eines Themes Gesucht und gefunden bei Google Ihre Website in Google eintragen Meta-Tags hinzufügen Website bei Google Analytics anmelden Werbeanzeigen mit Google AdSense integrieren Mashups die Welt in Ihre Website einbinden YouTube-Video in die eigene Webseite einbetten Google Maps in Ihre Webseite einbinden

19

20 Vorwort Der erste Webbrowser erblickte 1990 das Licht der Welt. Er wurde von Tim Berners-Lee entwickelt, der auch als Erfinder des World Wide Web gilt. Lange gab es nur Experten und Techniker im Web, die ihre eigenen Seiten noch per Hand programmieren mussten. Das WWW hat sich seitdem jedoch enorm weiterentwickelt genauso wie die Technologien und Programme, mit denen man Websites erstellt wurde z. B. bekannt gegeben, dass die Arbeit am Standard XHTML 2 eingestellt wurde und dass stattdessen HTML5 der neue Standard sein wird. Google, Apple und viele andere Websites setzten bereits HTML5 ein. HTML5 wird in Zukunft vermutlich sogar Flash ablösen, da mit HTML5 und JavaScript vieles möglich ist, was vorher nur Flash vorbehalten war. Im Jahre 1997 hat Macromedia die erste Version von Dreamweaver veröffentlicht. Seitdem wurde Dreamweaver stets weiterentwickelt. Die neueste Version ist Dreamweaver CS5 (Version 11), die zum ersten Mal bei Adobe veröffentlicht wurde. Kein anderes Webdesign-Programm bietet so viele Funktionen, die sowohl Designer als auch Programmierer in gleicher Weise in ihrer Arbeit unterstützen. In 14 Jahren Entwicklungszeit ist der Funktionsumfang von Dreamweaver natürlich enorm gestiegen. Besonders der Einsteiger sieht schnell den Wald vor lauter Bäumen nicht. Ziel dieses Buches ist es daher, Sie als angehenden Webdesigner an die Hand zu nehmen und sicher durch den Dschungel der Funktionen zu führen. Im ersten Teil,»Einführung«, lernen Sie nicht nur die vollständige Arbeitsumgebung von Dreamweaver genau kennen, Sie erfahren auch, welche Vorbereitungen Sie treffen sollten, um Ihre erste eigene Website ins Internet zu bringen. Im zweiten Teil,»Ein Websiteprojekt«, lernen Sie, wie Sie mit Dreamweaver CS5 eine erste eigene Site aufbauen und im WWW veröffentlichen. Sie werden dabei erfahren, wie Sie mit Vorlagen arbeiten und darin eine komplette Navigation integrieren, die aussieht, als hätte sie ein Profi programmiert. Im dritten Teil,»Dreamweaver im Detail«, werden wir uns das Einfügen und Bearbeiten der wichtigsten Elemente in einer Website mit Dreamweaver CS5 genauer anschauen. Die Kapitel sind hier weitgehend unabhängig voneinander aufgebaut. Sie müssen diesen Teil daher nicht von vorn bis hinten durchlesen, sondern können auch einfach einzelne Themen nachschlagen. Einige Bonbons finden Sie im vierten Teil,»Über Dreamweaver hinaus...«. Dort erfahren Sie, wie Sie ganz leicht einen eigenen Weblog erstellen, ohne auch nur eine Codezeile dafür programmieren zu müssen, und wie Sie Ihre 19