Dreamweaver CS5. Grundlagen. Isolde Kommer 1. Ausgabe, September 2010 DRWCS5

Dreamweaver CS5 Isolde Kommer 1. Ausgabe, September 2010 Grundlagen DRWCS5

I Dreamweaver CS5 - Grundlagen Zu diesem Buch... 4 1 Einstieg in Dreamweaver...6 1.1 Webdesign mit Dreamweaver... 6 1.2 Im Web auftreten... 7 1.3 Aufbau des Webauftritts planen... 8 1.4 Übung... 9 2 Das erste Projekt mit Dreamweaver...10 2.1 Dreamweaver starten und benutzen... 10 2.2 Sites anlegen... 13 2.3 Startseite und Ordnerstruktur erstellen... 15 2.4 Webseiten speichern, schließen und öffnen... 17 2.5 Webseiten mit Bildern und Hyperlinks versehen... 17 2.6 Hintergrundfarbe bestimmen... 19 2.7 Webseiten im Browser betrachten... 20 2.8 Dreamweaver beenden... 21 2.9 Schnellübersicht... 22 2.10 Übung... 22 3 Text gestalten...24 3.1 Text für das Web aufbereiten... 24 3.2 Die Struktur des Texts definieren... 27 3.3 Das Aussehen des Texts gestalten... 29 3.4 Schriftlisten erstellen... 32 3.5 Schnellübersicht... 33 3.6 Übung... 33 4 Webseiten mit Hyperlinks verbinden...34 4.1 Verbindungen mithilfe von Hyperlinks schaffen... 34 4.2 Text-Hyperlinks erstellen... 35 4.3 Hyperlinks testen, bearbeiten und entfernen... 36 4.4 Bild-Hyperlinks erstellen... 37 4.5 E-Mail-Hyperlinks erstellen... 38 4.6 Textmarken-Hyperlinks verwenden... 38 4.7 Hyperlinks verwalten... 40 4.8 Schnellübersicht... 41 4.9 Übung... 41 5 Bilder einbinden...42 5.1 Bilder im Web... 42 5.2 Hintergrundbilder verwenden... 44 5.3 Bilder skalieren und positionieren... 45 5.4 Bilder aus Photoshop einfügen... 46 5.5 Layout-Hilfen verwenden... 47 5.6 Bilder bearbeiten... 50 5.7 Rollover-Bilder einbinden...53 5.8 Schnellübersicht...54 5.9 Übung...55 6 Tabellen gestalten... 56 6.1 Tabellen erstellen...56 6.2 Tabellen formatieren...57 6.3 Tabellen, Zeilen und Spalten bearbeiten...60 6.4 Tabellen importieren...62 6.5 Tabellendaten sortieren...63 6.6 Schnellübersicht...64 6.7 Übung...65 7 Letzte Schritte vor der Veröffentlichung... 66 7.1 Einen Domain-Namen registrieren...66 7.2 Einen geeigneten Provider finden...67 7.3 Webseiten für Suchmaschinen vorbereiten...68 7.4 Webauftritt überprüfen...70 7.5 Code überprüfen...70 7.6 Hyperlinks testen...72 7.7 Einen Webauftritt mit Berichten überprüfen...72 7.8 Schnellübersicht...73 7.9 Übung...73 8 Webauftritte veröffentlichen... 74 8.1 Webspace reservieren...74 8.2 Einen Webauftritt veröffentlichen...75 8.3 Schnellübersicht...79 8.4 Übung...79 9 Direkt im Code arbeiten... 80 9.1 Den Code Ihrer Webseiten anzeigen lassen...80 9.2 HTML-Code verstehen...82 9.3 Codehilfen in der Codeansicht verwenden...83 9.4 HTML-Tags einfügen und bearbeiten...85 9.5 Codefragmente verwenden...86 9.6 HTML-Code aus anderen Programmen optimieren...87 9.7 Schnellübersicht...89 9.8 Übung...89 10 Divs (Ebenen) und CSS... 90 10.1 Div-Tags einfügen, positionieren und formatieren...90 10.2 CSS effektiv einsetzen...93 10.3 CSS-Regeln definieren und ändern...93 10.4 CSS-Regeln bearbeiten...98 2 HERDT-Verlag

Inhalt I 10.5 Mit der CSS-Prüfung arbeiten...99 10.6 Externe Stylesheets verwenden... 100 10.7 Schnellübersicht... 105 10.8 Übung... 106 11 Spry, Live-Ansichten und Code- Navigator...108 11.1 Grundlegendes zu Spry-Widgets... 108 11.2 Spry-Widgets einfügen und bearbeiten... 109 11.3 Weitere Spry-Widgets erstellen... 111 11.4 Interaktive Inhalte mit Spry-Datensätzen erzeugen... 113 11.5 Quelldaten und Spry-Datensätze bearbeiten... 119 11.6 Schnellübersicht... 121 11.7 Übung... 121 12 Mit Vorlagen arbeiten...122 12.1 Webseiten mithilfe von Vorlagen erstellen... 122 12.2 Dynamische Vorlagen verwenden... 124 12.3 Schnellübersicht... 128 12.4 Übung... 128 13 Sites verwalten...130 13.1 Sites umbenennen, entfernen und exportieren... 130 13.2 Arbeitsvorgänge annullieren und wiederherstellen... 132 13.3 Schnellübersicht... 133 13.4 Übung... 133 14 Frametechnik einsetzen... 134 14.1 Eine Website mit Frames unterteilen... 134 14.2 Frameset erstellen... 135 14.3 Webauftritt mit Frames aufbauen... 137 14.4 Hyperlinks für das Frameset festlegen... 138 14.5 Framesets individuell anpassen... 139 14.6 Schnellübersicht... 142 14.7 Übung... 142 15 JavaScript und Flash-Inhalte einbinden... 144 15.1 JavaScript einbinden... 144 15.2 Interaktivität mit Verhalten einbinden... 145 15.3 Beispiele für den Einsatz von Aktionen... 148 15.4 Flash-Inhalte einbinden... 151 15.5 Schnellübersicht... 154 15.6 Übungen... 154 16 Formulare erstellen... 156 16.1 Formulare anlegen... 156 16.2 Formularfelder einfügen und bearbeiten... 158 16.3 Formulardaten versenden... 162 16.4 Schnellübersicht... 164 16.5 Übung... 164 Stichwortverzeichnis... 166 HERDT-Verlag 3

2 Dreamweaver CS5 - Grundlagen 2 Das erste Projekt mit Dreamweaver In diesem Kapitel erfahren Sie wie Sie Dreamweaver starten und beenden welche Elemente das Anwendungsfenster enthält wie Sie eine neue Site anlegen und deren Struktur festlegen wie Sie Webseiten mit Bildern, Hyperlinks und Hintergrundfarben versehen wie Sie Webseiten in der Browservorschau testen 2.1 Dreamweaver starten und benutzen Dreamweaver über die Startschaltfläche starten Klicken Sie auf die Startschaltfläche, um das Startmenü zu öffnen. Geben Sie im Suchfeld die Anfangsbuchstaben des Programmnamens ein (z. B. dre) und wählen Sie in der anschließend eingeblendeten Liste den Eintrag ADOBE DREAMWEAVER CS5. Wurde Dreamweaver auf Ihrem Rechner schon einmal ausgeführt, befindet sich im linken Bereich des Startmenüs eventuell ein entsprechender Eintrag, über den sich das Programm schnell starten lässt. Die Startseite öffnet sich: Klicken Sie auf der Startseite im Abschnitt NEU ERSTELLEN auf HTML, um eine neue Webseite zu erstellen und sich das Dreamweaver-Anwendungsfenster anzeigen zu lassen. Von der Startseite können Sie auf zuletzt geöffnete Dateien zugreifen bzw. vorhandene Dateien öffnen, verschiedene Dokumentarten erstellen bzw. eine Dreamweaver-Site anlegen, Videos zu verschiedenen Funktionen in Dreamweaver in einem Browser öffnen und abspielen, auf Online-Informationen über Dreamweaver zugreifen. Möchten Sie, dass die Startseite künftig nicht mehr angezeigt wird, aktivieren Sie das Kontrollfeld. 10 HERDT-Verlag

Das erste Projekt mit Dreamweaver 2 Das Anwendungsfenster Standardmäßig wird das Anwendungsfenster mit dem Arbeitsbereich DESIGNER und in der Entwurfsansicht geöffnet. Seitenregister Ansichtssteuerung Dokumentfenster Verankerungsbereich mit Bedienfeldern Statusleiste Eigenschafteninspektor Element Anwendungsleiste Dokumentfenster Ansichtssteuerung Tag-Selektor Seitenregister Bedienfeldgruppen Eigenschafteninspektor Beschreibung Die Anwendungsleiste enthält die Menüs, die Anwendungssteuerelemente (FENSTER - ANWENDUNGSLEISTE), den Arbeitsbereichumschalter und das Suchfeld der Hilfefunktion. In diesem Bereich erstellen und bearbeiten Sie den Inhalt Ihrer Dokumente. Die Dokumentsymbolleiste bietet häufig verwendete Einstellungen und Befehle. Hier können Sie schnell zwischen den verschiedenen Ansichten wechseln. Standardmäßig ist die Entwurfsansicht aktiviert, in der Sie beim Gestalten Ihrer Webseiten deren Inhalte so betrachten können, wie sie später im Browser aussehen werden. Über die Schaltflächen CODE bzw. TEILEN können Sie den HTML-Quellcode Ihrer Webseiten überprüfen und bearbeiten. Alle Elemente auf Webseiten werden im Code durch sogenannte HTML-Tags definiert. Wenn Sie ein Element im Dokumentfenster markieren, werden die entsprechenden HTML-Tags im Tag-Selektor angezeigt. Jede geöffnete Webseite wird in einem separaten Seitenregister angezeigt. Über die Seitenregister können Sie zwischen den geöffneten Webseiten wechseln. Ein Sternchen neben dem Dateinamen im Seitenregister kennzeichnet, dass die Webseite ungespeicherte Inhalte aufweist. Drei geöffnete Webseiten Im Verankerungsbereich stellt Dreamweaver alle wesentlichen Befehle für die Gestaltung und Bearbeitung Ihrer Webseiten zur Verfügung. Einige Bedienfeldgruppen werden automatisch eingeblendet und andere können Sie über die entsprechenden Einträge im Menü FENSTER einblenden. Die Befehle der Bedienfeldgruppe werden in der Regel auf mehrere Register (Bedienfelder) aufgeteilt. Einige Bedienfeldgruppen werden unten im Anwendungsfenster angezeigt. Standardmäßig sind die Bedienfelder EINFÜGEN, CSS-STILE, DATEIEN und EIGENSCHAFTEN (der sogenannte Eigenschafteninspektor) bereits eingeblendet. Über dieses Bedienfeld können Sie sich die HTML-Eigenschaften des aktuell markierten Objekts anzeigen lassen und bearbeiten. Über die Schaltfläche CSS können Sie das Aussehen des Objekts mit CSS-Regeln definieren. HERDT-Verlag 11

2 Dreamweaver CS5 - Grundlagen Mit Bedienfeldern arbeiten Bedienfelder werden über das Menü FENSTER ein- und ausgeblendet. Jedes Bedienfeld bietet ein Menü, das über das Symbol geöffnet wird und jeweils spezifische Befehle enthält. Oft sind mehrere Bedienfelder zu einer Gruppe mit Registern zusammengefasst. Eine Bedienfeldgruppe lässt sich wie jedes andere Fenster verschieben, in der Größe ändern oder schließen. Bei Änderungen passen sich die übrigen Bedienfelder automatisch an. Die Anordnung der Bedienfeldgruppen bleibt für künftige Sitzungen erhalten. Sie möchten aus einer Gruppe ein anderes Bedienfeld im Vordergrund anzeigen lassen Bedienfeld DATEIEN Klicken Sie auf das betreffende Register. eine Bedienfeldgruppe minimieren Klicken Sie doppelt auf die Leiste neben den Registern. ein Bedienfeld frei platzieren Ziehen Sie das Register auf die gewünschte Stelle. Bedienfelder erweitern bzw. zu Symbolen verkleinern eine Bedienfeldgruppe frei platzieren ein Bedienfeld bzw. eine Bedienfeldgruppe verankern Klicken Sie am oberen Rand des Verankerungsbereichs auf einen Doppelpfeil bzw.. Ziehen Sie die Leiste auf die gewünschte Stelle. Ziehen Sie das Register bzw. die Leiste auf ein Bedienfeld oder unter- bzw. oberhalb einer Bedienfeldgruppe in den Verankerungsbereich. Eine blaue Umrandung zeigt an, in welcher Bedienfeldgruppe das Element verankert wird. Eine blaue Linie zeigt eine Ankerposition außerhalb einer Bedienfeldgruppe an. Um während der Arbeit schnell mehr Platz für die Anzeige des Dokuments zu schaffen, können Sie die Bedienfelder aus- und anschließend wieder einblenden. Betätigen Sie hierzu F4. Das Bedienfeld Einfügen benutzen Blenden Sie das Bedienfeld EINFÜGEN über den Menüpunkt FENSTER - EINFÜGEN aus bzw. wieder ein. Alternative: STRG F2. Hier befinden sich thematisch gruppierte Schaltflächen, mit denen Sie häufig verwendete Elemente in Ihre Webseite einfügen können. Standardmäßig ist die Kategorie ALLGEMEIN gewählt. Diese Kategorie enthält Schaltflächen zum Einfügen unterschiedlicher Elemente, zum Beispiel von Tabellen, Bildern und Medien. Über das Pfeilsymbol können Sie andere Kategorien auswählen. Kategorie wechseln 12 HERDT-Verlag

Das erste Projekt mit Dreamweaver 2 Benutzerdefinierte Arbeitsbereichlayouts speichern Standardmäßig ist in Dreamweaver das Arbeitsbereichlayout DESIGNER eingestellt. Ein Arbeitsbereichlayout stellt eine Anordnung von Bedienfeldgruppen zur Verfügung, die für eine bestimmte Aktivität optimiert ist. Sie können andere vordefinierte Arbeitsbereichlayouts über den Arbeitsbereichsumschalter auswählen. Sie können auch eigene Arbeitsbereichlayouts speichern und verwenden. Gehen Sie wie folgt vor: Ordnen Sie die Bedienfeldgruppen wie gewünscht an. Rufen Sie den Menüpunkt FENSTER - ARBEITSBEREICHLAYOUT - NEUER ARBEITSBEREICH auf. Geben Sie im eingeblendeten Dialogfenster einen Namen für den Arbeitsbereich ein und betätigen Sie OK. Das Layout bleibt für künftige Sitzungen erhalten. Der Name des aktuellen Arbeitsbereichlayouts ist im Arbeitsbereichsumschalter ersichtlich. Arbeitsbereichlayout speichern und auswählen Wechseln Sie zwischen Arbeitsbereichen über den Arbeitsbereichsumschalter bzw. über den Menüpunkt FENSTER - ARBEITSBEREICHLAYOUT - Arbeitsbereichname. Nicht mehr benötigte Arbeitsbereiche können Sie über den Menüpunkt FENSTER - ARBEITSBEREICH- LAYOUT - ARBEITSBEREICHE VERWALTEN löschen bzw. umbenennen. 2.2 Sites anlegen Eine Beispielsite erstellen Im Laufe der Arbeit mit diesem Buch werden Sie einen Webauftritt für die Beispielfirma Kick erstellen. Kick ist ein Schulungsunternehmen, das verschiedene Kurse zum Thema Web anbietet. Als ersten Schritt legen Sie eine neue Site an. Einen Stamm- und einen Bildordner anlegen Bevor Sie die Dateien für Ihren Webauftritt erstellen, benötigen Sie einen lokalen Ordner (den sogenannten Stammordner) auf Ihrem Dateisystem, in dem Sie Ihre Dateien ablegen und lokal bearbeiten werden. Bei der Erstellung des Stammordners ist es sinnvoll, darin einen Standardordner für die Bilder Ihres Webauftritts zu erzeugen. Wechseln Sie im Bedienfeld DATEIEN zum gewünschten Speicherort für Ihren Webauftritt, hier C:\websites. Öffnen Sie das Bedienfeldmenü ( ) und wählen Sie den Befehl DATEI - NEUER ORDNER. Ein neuer Ordner erscheint im Bedienfeld DATEIEN. Überschreiben Sie den Namen UNBENANNT mit dem gewünschten Ordnernamen, z. B. kick, und betätigen Sie RETURN. Markieren Sie den bereits erstellten Stammordner und erstellen Sie hier einen Unterordner für die Bilder des Webauftritts, z. B. mit dem Namen images. Stammordner erstellen In der Regel wird der Bildordner images genannt. Sie können dem Bildordner jedoch einen beliebigen Namen geben. HERDT-Verlag 13

2 Dreamweaver CS5 - Grundlagen Eine neue Site anlegen Nachdem Sie einen lokalen Stammordner angelegt haben, können Sie Ihre Site anlegen. Hierdurch teilen Sie Dreamweaver mit, wo Sie die Dateien des Webauftritts ablegen möchten. Rufen Sie den Menüpunkt SITE - NEUE SITE auf. Alternative:, Eintrag NEUE SITE Wechseln Sie im geöffneten Dialogfenster links auf den Eintrag SITE und geben Sie in das Feld SITE- NAME den Namen des Webauftritts ein, z. B. kick. Wechseln Sie im Feld LO- KALER SITE-ORDNER mithilfe des Symbols zum bereits erstellten Stammordner und betätigen Sie die Schaltflächen ÖFFNEN und AUSWÄHLEN. Klicken Sie links auf den Eintrag ERWEITERTE EIN- STELLUNGEN und wählen Sie den Eintrag LOKALE INFO. Wechseln Sie im Feld STANDARD-BILDERORDNER zum bereits erstellten Bilderordner images und betätigen Sie die Schaltflächen ÖFFNEN und Site erstellen AUSWÄHLEN. Im Feld WEB-URL können Sie die Webadresse (URL) für Ihre Site eintragen, falls Sie schon eine besitzen. Diese Eingabe kann aber auch zunächst übersprungen werden und erst unmittelbar vor der Veröffentlichung erfolgen. Aktivieren Sie das Kontrollfeld, sodass die Groß- und Kleinschreibung bei der Hyperlink- Prüfung beachtet wird. Dies ist wichtig, weil viele Webserver zwischen Groß- und Kleinschreibung unterscheiden. Bestätigen Sie Ihre Einstellungen mit SPEICHERN. Zwischen Sites wechseln Wenn Sie mehrere Sites in Dreamweaver anlegen, können Sie mithilfe des Bedienfelds DATEIEN zwischen den Sites wechseln. Klicken Sie auf die Schaltfläche und wählen Sie die gewünschte Site aus, um deren Ordner und Dateien im Bedienfeld anzeigen zu lassen bzw. zu bearbeiten. 14 HERDT-Verlag

Das erste Projekt mit Dreamweaver 2 2.3 Startseite und Ordnerstruktur erstellen Eine Webseite als Startseite speichern Die Startseite Ihres Webauftritts muss direkt im Stammordner abgelegt werden und darf sich nicht in einem Unterordner befinden. Informieren Sie sich bei Ihrem Webspace-Provider, welchen Dateinamen Sie für Ihre Startseite verwenden müssen, beispielsweise index.html bzw. default.html. Nur wenn Ihre Startseite den verlangten Dateinamen erhält, kann sie vom Webserver als Startseite Ihres Webauftritts erkannt werden. Geben Sie im Anwendungsfenster einen beliebigen Text in die Webseite ein, z. B. Willkommen! Rufen Sie den Menüpunkt DATEI - SPEICHERN auf. Alternative: STRG S Beim erstmaligen Speichern wird das Dialogfenster SPEICHERN UNTER eingeblendet. Der Stammordner der Site wird im Feld SPEICHERN IN angezeigt. Geben Sie im Feld DATEINAME den Namen Ihrer Startseite ein, z. B. index. Klicken Sie auf die Schaltfläche SPEICHERN. Der Dateiname erhält automatisch die Endung.html und ist sofort im Seitenregister ersichtlich. Site-Struktur weiter ausbauen Bevor Sie Ihre Webseiten gestalten, ist es ratsam, die Ordnerstruktur des Webauftritts zu planen und die benötigten Ordner und Dateien zu erstellen. So erhalten Sie die Übersicht über Ihre Dateien und ersparen sich nachträgliche Arbeit. Über das Bedienfeld DATEIEN können Sie Ordner und Dateien erstellen, umbenennen, öffnen und löschen. Sie möchten Ordner erstellen Erstellen Sie Ordner wie beschrieben, vgl. Abschnitt 2.2. eine neue HTML- Markieren Sie den Ordner, in dem Sie die Datei erstellen möchten. Datei erstellen Öffnen Sie das Menü des Bedienfelds DATEIEN und wählen Sie den Befehl DATEI - NEUE DATEI aus. Überschreiben Sie den vorgegebenen Dateinamen mit dem gewünschten Namen und betätigen Sie RETURN. eine Datei öffnen Klicken Sie doppelt auf den Dateinamen der Webseite. Ordner/Dateien löschen Ordner/Dateien umbenennen Falls zu löschende Dateien geöffnet sind, schließen Sie diese über den Menüpunkt DATEI - SCHLIESSEN bzw. DATEI - ALLE SCHLIESSEN. Markieren Sie den zu löschenden Ordner bzw. die zu löschende Datei und betätigen Sie ENTF. Bestätigen Sie die Rückfrage mit JA. Falls umzubenennende Dateien geöffnet sind, schließen Sie diese über den Menüpunkt DATEI - SCHLIESSEN. Markieren Sie den gewünschten Ordner bzw. die gewünschte Datei und wählen Sie den Befehl DATEI - UMBENENNEN. Überschreiben Sie den markierten Namen mit dem neuen Namen und betätigen Sie RETURN. HERDT-Verlag 15

2 Dreamweaver CS5 - Grundlagen Webseiten können auch über den Menüpunkt DATEI - NEU erstellt werden (Eintrag LEERE SEITE, Eintrag HTML, Schaltfläche ERSTELLEN). Beachten Sie, dass auf diese Weise erstellte HTML-Dateien erst dann in die Ordnerstruktur aufgenommen bzw. im Bedienfeld DATEIEN angezeigt werden, wenn Sie diese speichern. Sollte eine neu erstellte und gespeicherte Datei jedoch nicht im Bedienfeld DATEIEN angezeigt werden, öffnen Sie das Menü des Bedienfelds und wählen Sie den Befehl ANSICHT - AKTUALISIEREN (Taste F5 ). Wichtige Hinweise zu Ordner- und Dateinamen Informieren Sie sich bei Ihrem Webspace-Provider bzw. Intranet-Administrator, welche Konventionen Sie bei der Benennung Ihrer Ordner und Dateien einhalten müssen. Die folgenden Hinweise sollten Sie auf jeden Fall beachten: Viele Webserver werden mit dem Betriebssystem UNIX betrieben, das zwischen Groß- und Kleinschreibung unterscheidet. Die Dateinamen index.html, Index.html und INDEX.HTML werden beispielsweise als drei verschiedene Namen behandelt. Bei der Benennung Ihrer Ordner und Dateien ist es deshalb ratsam, auf Großbuchstaben zu verzichten. Verwenden Sie keine Sonderzeichen, Leerzeichen oder Umlaute, da nicht alle Webserver mit diesen richtig umgehen können. Statt Leerzeichen können Sie den Unterstrich ( UMSCHALTEN - ) verwenden, um längere Dateinamen optisch zu unterteilen, z. B. kurse_von_kick. Dateinamenserweiterungen aller Dateien in Windows anzeigen lassen Standardmäßig blendet Windows die Dateinamenserweiterungen bekannter Dateitypen aus. Es ist jedoch hilfreich bei der Bearbeitung Ihrer Webseiten, wenn Sie alle Dateinamenserweiterungen sehen. Öffnen Sie den Windows-Explorer, klicken Sie auf die Schaltfläche ORGANISIEREN und wählen Sie den Eintrag ORDNER- UND SUCHOPTIONEN. Wechseln Sie im Dialogfenster ORDNEROPTIONEN zum Register ANSICHT. Deaktivieren Sie im Listenfeld ERWEITERTE EINSTELLUNGEN das Kontrollfeld ERWEITERUNGEN BEI BEKANNTEN DATEITYPEN AUSBLENDEN. Betätigen Sie die Schaltfläche FÜR ORDNER ÜBERNEHMEN bzw. FÜR ALLE ÜBERNEHMEN und bestätigen Sie die Rückfrage mit JA. Klicken Sie auf OK. 16 HERDT-Verlag

Das erste Projekt mit Dreamweaver 2 2.4 Webseiten speichern, schließen und öffnen Webseiten speichern Rufen Sie den Menüpunkt DATEI - SPEICHERN auf. Alternative: STRG S Alle geöffneten Dateien speichern Sie in einem Schritt, indem Sie den Menüpunkt DATEI - ALLES SPEICHERN aufrufen. Webseiten schließen Holen Sie gegebenenfalls die Webseite über das Seitenregister in den Vordergrund und rufen Sie den Menüpunkt DATEI - SCHLIESSEN auf. Alternative: im Seitenregister Wurde die Datei in ihrer aktuellen Fassung noch nicht gespeichert, können Sie dies auf Rückfrage (Dialogfenster) nachholen. Sie können alle geöffneten Webseiten in einem Schritt schließen, indem Sie den Menüpunkt DATEI - ALLE SCHLIESSEN aufrufen. Webseiten öffnen Rufen Sie den Menüpunkt DATEI - ÖFFNEN auf. Wechseln Sie im Dialogfenster ÖFFNEN zum Speicherort der Webseite, markieren Sie diese und betätigen Sie die Schaltfläche ÖFFNEN. Zuletzt bearbeitete Dateien wieder öffnen Kürzlich bearbeitete Dateien öffnen Sie wieder über den Menüpunkt DATEI - LETZTE DATEIEN ÖFFNEN. 2.5 Webseiten mit Bildern und Hyperlinks versehen Ein Bild in die Startseite einfügen Zunächst fügen Sie ein Bild in die Startseite ein, um diese optisch ansprechend zu gestalten. Öffnen Sie über die Bedienfeldgruppe DATEIEN die Startseite, hier index.html. Rufen Sie den Menüpunkt EINFÜGEN - BILD auf. Alternative: STRG ALT I Wechseln Sie im Dialogfenster BILDQUELLE AUSWÄHLEN zum Speicherort der Bilddatei und klicken Sie doppelt auf das gewünschte Bild. Hier benutzen Sie die für dieses Buch bereitgestellte Beispieldatei homepagebild. Bild einfügen HERDT-Verlag 17

2 Dreamweaver CS5 - Grundlagen Geben Sie im Dialogfenster EINGABEHILFEN-ATTRIBUTE FÜR IMAGE-TAG im Feld eine Beschreibung des Bilds ein und klicken Sie auf OK. Dieser Schritt ist wichtig für barrierefreies Webdesign, um beispielsweise sehbehinderten Besuchern Informationen über den Inhalt der Bilder bereitzustellen. Speichern Sie die Webseite. Die Bilddatei wird automatisch in dem von Ihnen festgelegten Bildordner abgelegt. Wenn Sie ein eingefügtes Bild markieren, wird der Pfad zur Bilddatei im Eigenschafteninspektor im Feld QUELLE angezeigt. Der Alternativtext wird im Eigenschafteninspektor im Feld ALT. angezeigt und kann hier auch nachträglich geändert werden. Mehrere Bilder schnell einfügen Wenn Sie mehrere Bilder in eine Webseite einfügen möchten, kopieren Sie die Bilddateien mithilfe Ihres Datei-Browsers in Ihren Bildordner. Die Bilder können Sie dann aus dem Bedienfeld DATEIEN direkt auf Ihr Dokument ziehen. Die ersten Hyperlinks einfügen Erzeugen Sie eine zweite Webseite für Ihren Webauftritt und erstellen Sie auf der Webseite index.html einen Hyperlink, der zu der neuen Webseite führt. Erstellen Sie eine neue Webseite, geben Sie einen beliebigen Text in die Webseite ein und speichern Sie sie unter dem Namen team.html. Wechseln Sie zur Webseite index.html, geben Sie den Text Unser Team ein und markieren Sie den Text. Klicken Sie im Eigenschafteninspektor neben dem Feld HYPERLINK auf das Symbol und ziehen Sie den angezeigten Pfeil auf die Datei im Bedienfeld DATEIEN, die als Ziel des Hyperlinks dienen soll, in diesem Fall auf die Datei team.html. Der Hyperlinktext wird blau und unterstrichen dargestellt. Öffnen Sie die Datei team.html, geben Sie den Text Zurück zur Startseite ein und erstellen Sie auf die gleiche Weise einen Hyperlink zur Startseite. Speichern Sie beide Dateien. 18 HERDT-Verlag

Das erste Projekt mit Dreamweaver 2 2.6 Hintergrundfarbe bestimmen Hintergrundfarbe festlegen Sie können Ihre Webseite mit einer Hintergrundfarbe versehen. Rufen Sie den Menüpunkt MODIFIZIEREN - SEITEN- EIGENSCHAFTEN auf. Alternative: STRG J Das Dialogfenster SEITENEIGEN- SCHAFTEN wird angezeigt. Klicken Sie in der Kategorie ERSCHEINUNGSBILD (CSS) auf das Farbfeld HINTERGRUNDFARBE. Wählen Sie eine Farbe mit der Pipette aus dem eingeblendeten Farbwähler aus. Bestätigen Sie mit OK. Hintergrundfarbe bestimmen Hexadezimalwerte verwenden Im Dialogfenster SEITENEIGENSCHAFTEN wird neben dem Feld HINTERGRUNDFARBE der (für das Web benötigte) Hexadezimalwert der ausgewählten Farbe angezeigt. Falls Sie mit Hexadezimalwerten bzw. mit englischen Farbbezeichnungen vertraut sind, können Sie diese direkt im Feld WERT eingeben (z. B. den Hexadezimalwert FFF bzw. die englische Bezeichnung white) und mit RETURN bestätigen. Wenn Sie dieselbe Farbe auf mehreren Webseiten verwenden möchten, können Sie durch Verwendung des Hexadezimalwerts sicherstellen, dass Sie genau denselben Farbton verwenden. Farbeinstellungen entfernen Möchten Sie ein Element auf dessen Standardfarbe zurücksetzen, gehen Sie wie folgt vor: Markieren Sie gegebenenfalls das Element auf der Webseite. Entfernen Sie im Dialogfenster SEITENEIGENSCHAFTEN den angezeigten Farbwert im entsprechenden Eingabefeld. HERDT-Verlag 19

2 Dreamweaver CS5 - Grundlagen 2.7 Webseiten im Browser betrachten Webseiten in verschiedenen Browsern testen Die Entwurfsansicht von Dreamweaver stellt Ihre Dokumente meist so dar, wie sie später in einem Browser aussehen. (Dynamische Inhalte, wie z. B. Flash-Videos oder JavaScript, werden in dieser Ansicht als Platzhalter dargestellt.) Da jedoch jeder Browser Ihre Webseiten etwas anders wiedergeben kann, ist es ratsam, Ihre Webseiten zwischendurch in allen gängigen Browsern zu testen, z. B. im Firefox, Internet Explorer, Opera und Safari. Mithilfe der Browservorschau können Sie die Funktionsweise Ihrer Webseiten in jedem auf Ihrem Rechner installierten Browser überprüfen. Beispielsweise testen Sie hiermit, ob die Hyperlinks richtig funktionieren. Öffnen Sie die zu testende Webseite. Rufen Sie den Menüpunkt DATEI - VORSCHAU IN BROWSER auf und wählen Sie den gewünschten Browser. Falls die Datei ungespeicherte Änderungen aufweist, werden Sie aufgefordert, diese zu speichern. Bestätigen Sie gegebenenfalls die Speicherungsrückfrage mit JA. Der gewählte Browser wird geöffnet und die aktuelle Webseite wird geladen. Liste installierter Browser Weitere Browser hinzufügen In der Liste der zur Verfügung stehenden Browser befinden sich alle Browser, die vor Dreamweaver installiert wurden. Sollten Sie später neue Browser installieren, können Sie diese nachträglich in die Browservorschauliste aufnehmen. Rufen Sie den Menüpunkt DATEI - VOR- SCHAU IN BROWSER - BROWSERLISTE BEARBEI- TEN auf. Klicken Sie im Dialogfenster VOREINSTELLUNGEN auf das Symbol. Geben Sie im Dialogfenster BROWSER HINZU- FÜGEN im Feld NAME den Browsernamen ein. Wechseln Sie über die Schaltfläche DURCH- SUCHEN zur Startdatei des Browsers. Klicken Sie auf OK. Einen weiteren Browser hinzufügen 20 HERDT-Verlag

Das erste Projekt mit Dreamweaver 2 Browser verwalten Sie möchten die am häufigsten benötigten Browser schnell aufrufen die Einstellungen eines Browsers ändern einen Browser aus der Liste entfernen Legen Sie die zwei am häufigsten benötigten Browser über die entsprechenden Kontrollfelder als Primär- bzw. Sekundärbrowser fest. Durch Betätigen von F12 bzw. STRG F12 lassen Sie sich die aktuelle Webseite schnell im Primär- bzw. Sekundärbrowser anzeigen. Markieren Sie im Dialogfenster VOREINSTELLUNGEN den zu ändernden Eintrag und betätigen Sie die Schaltfläche BEARBEITEN. Markieren Sie den nicht mehr benötigten Browser und klicken Sie auf das Symbol. 2.8 Dreamweaver beenden Dokumente beim nächsten Programmstart automatisch öffnen Möchten Sie Ihre Arbeit mit den geöffneten Dateien später fortsetzen, können Sie diese automatisch beim nächsten Programmstart öffnen lassen. Rufen Sie den Menüpunkt BEARBEITEN - VOREINSTELLUNGEN auf. Alternative: STRG U Aktivieren Sie in der Kategorie ALLGEMEIN des Dialogfensters das Kontrollfeld DOKUMENT BEIM START ERNEUT ÖFFNEN. Bestätigen Sie mit OK. Beim Programmstart werden stets alle Dokumente geöffnet, die beim Verlassen des Programms noch offen waren. Diese Einstellung können Sie durch erneuten Aufruf des Menüpunkts und Deaktivieren des entsprechenden Kontrollfelds wieder ausschalten. Das Arbeiten mit Dreamweaver beenden Rufen Sie den Menüpunkt DATEI - BEENDEN auf. Alternativen: bzw. STRG Q Sofern Sie noch Webseiten geöffnet haben, deren Änderungen nicht gespeichert sind, erscheint an dieser Stelle eine Speicherungsrückfrage. HERDT-Verlag 21

2 Dreamweaver CS5 - Grundlagen 2.9 Schnellübersicht Sie möchten Dreamweaver starten ein Arbeitsbereichlayout speichern Startschaltfläche, im Suchfeld die Anfangsbuchstaben des Programmnamens eingeben, Eintrag ADOBE DREAMWEAVER CS5 FENSTER - ARBEITSBEREICHLAYOUT - NEUER ARBEITSBEREICH einen neuen Ordner erstellen Bedienfeld DATEIEN, DATEI - NEUER ORDNER eine neue Site anlegen SITE - NEUE SITE oder, NEUE SITE eine neue Webseite erstellen DATEI - NEU, Schaltfläche ERSTELLEN oder Bedienfeld DATEIEN, DATEI - NEUE DATEI Webseiten speichern Webseiten schließen Webseiten öffnen ein Bild in eine Webseite einfügen DATEI - SPEICHERN oder STRG S DATEI - SCHLIESSEN oder DATEI - ÖFFNEN oder im Bedienfeld DATEIEN Doppelklick auf die Datei EINFÜGEN - BILD oder STRG ALT I einen Hyperlink erstellen Text markieren, Eigenschafteninspektor, Feld HYPERLINK, anklicken und auf Zieldatei im Bedienfeld DATEIEN ziehen eine Hintergrundfarbe wählen die aktuelle Webseite im Browser testen MODIFIZIEREN - SEITENEIGENSCHAFTEN, Kategorie ERSCHEINUNGS- BILD, Farbfeld HINTERGRUNDFARBE oder STRG J DATEI - VORSCHAU IN BROWSER, Browser wählen Dreamweaver beenden DATEI - BEENDEN oder oder STRG Q 2.10 Übung Eine Site mit Hyperlinks, Hintergrundfarbe und einem Bild versehen Übungsdateien: kontaktbild.jpg, kick_k02 Ergebnisdatei: kick_k02-e Starten Sie Dreamweaver. Öffnen Sie die in diesem Kapitel erstellte Beispiel-Site kick oder die Übungsdatei kick_k02. Erstellen Sie die der Abbildung zu entnehmenden Ordner und Webseiten. 22 HERDT-Verlag

Das erste Projekt mit Dreamweaver 2 Site-Struktur und Navigationsleiste erstellen Öffnen Sie die Startseite und erstellen Sie die aus der Abbildung zu entnehmende Hyperlinkleiste. Tipp: Das Zeichen wird durch Betätigen der Tastenkombination ALT GR < erstellt. Markieren Sie alle Hyperlinks und kopieren Sie diese ( STRG C ). Öffnen Sie nacheinander alle mit der Startseite verknüpften Webseiten und fügen Sie die Hyperlinks oben auf jeder Webseite ein ( STRG V ). Testen Sie die Hyperlinks. Wechseln Sie über die Seitenregister zur Webseite kontakt. Legen Sie dieselbe Hintergrundfarbe fest, die Sie für die Startseite verwendet haben. Tipp: Verwenden Sie den Hexadezimalwert. Fügen Sie die Übungsdatei kontaktbild.jpg in die Webseite kontakt ein. Speichern Sie alle Webseiten. Testen Sie die Webseiten in der Browservorschau. Schließen Sie alle Webseiten. Beenden Sie Dreamweaver. HERDT-Verlag 23