Dreamweaver CS5 - Grundlagen · Wurde Dreamweaver auf Ihrem Rechner schon einmal ausge- führt, befindet sich im linken Bereich des Startmenüs eventuell ein entsprechender Eintrag

Dreamweaver CS5 Grundlagen

DRWCS5

Isolde Kommer

1. Ausgabe, September 2010

I Dreamweaver CS5 - Grundlagen

2 © HERDT-Verlag

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

Inhalt I

© HERDT-Verlag 3

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

2 Dreamweaver CS5 - Grundlagen

10 © HERDT-Verlag

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 ausge-

fü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 Web-seite 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 Dokument-arten erstellen bzw. eine Dreamweaver-Site an-legen ,

Videos zu verschiedenen Funktionen in Dream-weaver in einem Browser öffnen und abspielen ,

auf Online-Informationen über Dreamweaver zu-greifen .

Möchten Sie, dass die Startseite künftig nicht mehr angezeigt wird, aktivieren Sie das Kontroll-feld .

Das erste Projekt mit Dreamweaver 2

© HERDT-Verlag 11

Das Anwendungsfenster

Standardmäßig wird das Anwendungsfenster mit dem Arbeitsbereich DESIGNER und in der Entwurfsansicht geöffnet.

Element Beschreibung

Anwendungsleiste Die Anwendungsleiste enthält die Menüs , die Anwendungssteuerelemente (FENSTER - ANWENDUNGSLEISTE), den Arbeitsbereichumschalter und das Such-feld der Hilfefunktion .

Dokumentfenster In diesem Bereich erstellen und bearbeiten Sie den Inhalt Ihrer Dokumente. Die Dokumentsymbolleiste bietet häufig verwendete Einstellungen und Befehle.

Ansichtssteuerung Hier können Sie schnell zwischen den verschiedenen Ansichten wechseln. Stan-dardmäßig ist die Entwurfsansicht aktiviert, in der Sie beim Gestalten Ihrer Web-seiten 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.

Tag-Selektor Alle Elemente auf Webseiten werden im Code durch sogenannte HTML-Tags defi-niert. Wenn Sie ein Element im Dokumentfenster markieren, werden die entspre-chenden HTML-Tags im Tag-Selektor angezeigt.

Seitenregister Jede geöffnete Webseite wird in einem sepa-raten Seitenregister angezeigt. Über die Sei-tenregister können Sie zwischen den geöffne-ten Webseiten wechseln. Ein Sternchen neben dem Dateinamen im Seitenregister kennzeich-net, dass die Webseite ungespeicherte Inhalte aufweist.

Drei geöffnete Webseiten

Bedienfeldgruppen Im Verankerungsbereich stellt Dreamweaver alle wesentlichen Befehle für die Gestaltung und Bearbeitung Ihrer Webseiten zur Verfügung. Einige Bedienfeld-gruppen werden automatisch eingeblendet und andere können Sie über die entsprechenden Einträge im Menü FENSTER einblenden. Die Befehle der Bedien-feldgruppe 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.

Eigenschaften-inspektor

Über dieses Bedienfeld können Sie sich die HTML-Eigenschaften des aktuell mar-kierten Objekts anzeigen lassen und bearbeiten. Über die Schaltfläche CSS können Sie das Aussehen des Objekts mit CSS-Regeln definieren.

Eigenschafteninspektor

Verankerungsbereich mit Bedienfeldern

Ansichtssteuerung

Dokumentfenster

Seitenregister

Statusleiste


12 © HERDT-Verlag

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 zusammen-gefasst. Eine Bedienfeldgruppe lässt sich wie jedes andere Fenster ver-schieben, in der Größe ändern oder schließen. Bei Änderungen passen sich die übrigen Bedienfelder automatisch an. Die Anordnung der Bedienfeld-gruppen bleibt für künftige Sitzungen erhalten.

Sie möchten …

aus einer Gruppe ein anderes Bedienfeld im Vordergrund anzeigen lassen

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

Klicken Sie am oberen Rand des Verankerungsbereichs auf einen Doppelpfeil bzw. .

eine Bedienfeldgruppe frei platzieren

Ziehen Sie die Leiste auf die gewünschte Stelle.

ein Bedienfeld bzw. eine Bedienfeldgruppe verankern

Ziehen Sie das Register bzw. die Leiste auf ein Be-dienfeld oder unter- bzw. oberhalb einer Bedienfeld-gruppe in den Verankerungsbereich.

Eine blaue Umrandung zeigt an, in welcher Bedien-feldgruppe das Element verankert wird. Eine blaue Linie zeigt eine Ankerposition außerhalb einer Bedien-feldgruppe 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 Schalt-flä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 Ele-mente, zum Beispiel von Tabellen , Bildern und Medien . Über das Pfeilsymbol können Sie andere Kategorien auswählen.

Bedienfeld DATEIEN

Kategorie wechseln


© HERDT-Verlag 13

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 Arbeitsbereichs-umschalter ersichtlich.

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 Stamm-ordners 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.

In der Regel wird der Bildordner images genannt. Sie können dem Bildordner jedoch einen beliebigen Namen geben.

Arbeitsbereichlayout speichern und auswählen

Stammordner erstellen


14 © HERDT-Verlag

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öffne-ten 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 mit-hilfe des Symbols zum bereits erstellten Stamm-ordner 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 Bil-derordner images und betätigen Sie die Schalt-flächen ÖFFNEN und 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 unmit-telbar 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 ge-wünschte Site aus, um deren Ordner und Dateien im Bedien-feld anzeigen zu lassen bzw. zu bearbeiten.

Site erstellen


© HERDT-Verlag 15

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-Datei erstellen

Markieren Sie den Ordner, in dem Sie die Datei erstellen möchten.

Ö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ünsch-ten Namen und betätigen Sie RETURN .

eine Datei öffnen Klicken Sie doppelt auf den Dateinamen der Webseite.

Ordner/Dateien löschen

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.

Ordner/Dateien umbenennen

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 .


16 © HERDT-Verlag

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 Ordner-struktur 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 Kleinschrei-bung 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.


© HERDT-Verlag 17

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ück-frage (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 Start-seite ein, um diese optisch ansprechend zu gestalten.

Öffnen Sie über die Bedien-feldgruppe DATEIEN die Start-seite, 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 ge-wünschte Bild.

Hier benutzen Sie die für dieses Buch bereitgestellte Beispieldatei homepagebild.

Bild einfügen


18 © HERDT-Verlag

Geben Sie im Dialogfenster EINGABEHILFEN-ATTRIBUTE FÜR

IMAGE-TAG im Feld eine Be-schreibung 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 bereit-zustellen.

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 Hyper-links 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.


© HERDT-Verlag 19

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 eingeblen-deten Farbwähler aus.

Bestätigen Sie mit OK. 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.

Hintergrundfarbe bestimmen


20 © HERDT-Verlag

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.

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 Browservorschau-liste aufnehmen.

Rufen Sie den Menü-punkt DATEI - VOR-SCHAU IN BROWSER - BROWSERLISTE BEARBEI-TEN auf.

Klicken Sie im Dialog-fenster VOREINSTELLUNGEN auf das Symbol .

Geben Sie im Dialog-fenster 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.

Liste installierter Browser

Einen weiteren Browser hinzufügen


© HERDT-Verlag 21

Browser verwalten

Sie möchten …

die am häufigsten benö-tigten Browser schnell aufrufen

Legen Sie die zwei am häufigsten benötigten Browser über die entsprechenden Kontrollfelder als Primär- bzw. Sekundär-browser fest.

Durch Betätigen von F12 bzw. STRG F12 lassen Sie sich die aktu-elle Webseite schnell im Primär- bzw. Sekundärbrowser anzeigen.

die Einstellungen eines Browsers ändern

Markieren Sie im Dialogfenster VOREINSTELLUNGEN den zu ändern-den Eintrag und betätigen Sie die Schaltfläche BEARBEITEN.

einen Browser aus der Liste entfernen

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 entspre-chenden 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.


22 © HERDT-Verlag

2.9 Schnellübersicht

Sie möchten …

Dreamweaver starten Startschaltfläche , im Suchfeld die Anfangsbuchstaben des Programmnamens eingeben, Eintrag ADOBE DREAMWEAVER CS5

ein Arbeitsbereichlayout speichern 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 DATEI - SPEICHERN oder STRG S

Webseiten schließen DATEI - SCHLIESSEN oder

Webseiten öffnen DATEI - ÖFFNEN oder im Bedienfeld DATEIEN Doppelklick auf die Datei

ein Bild in eine Webseite einfügen EINFÜGEN - BILD oder STRG ALT I

einen Hyperlink erstellen Text markieren, Eigenschafteninspektor, Feld HYPERLINK, an-klicken und auf Zieldatei im Bedienfeld DATEIEN ziehen

eine Hintergrundfarbe wählen MODIFIZIEREN - SEITENEIGENSCHAFTEN, Kategorie ERSCHEINUNGS-BILD, Farbfeld HINTERGRUNDFARBE oder STRG J

die aktuelle Webseite im Browser testen

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.


© HERDT-Verlag 23

Site-Struktur und Navigationsleiste erstellen Öffnen Sie die Startseite und erstellen Sie die aus der Abbildung zu entnehmende Hyperlink-

leiste.

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.

Documents

Dreamweaver CS5 - Grundlagen · Wurde Dreamweaver auf Ihrem Rechner schon einmal ausge- führt, befindet sich im linken Bereich des Startmenüs eventuell ein entsprechender Eintrag