Dreamweaver CS5 - Grundlagen - HERDT
Werbung
Dreamweaver CS5 Isolde Kommer Grundlagen 1. Ausgabe, September 2010 DRWCS5 I Dreamweaver CS5 - Grundlagen Zu diesem Buch .......................................................... 4 5.7 5.8 5.9 Rollover-Bilder einbinden .............................53 Schnellübersicht ............................................54 Übung............................................................55 1 Einstieg in Dreamweaver........................6 1.1 1.2 1.3 1.4 Webdesign mit Dreamweaver ....................... 6 Im Web auftreten........................................... 7 Aufbau des Webauftritts planen ................... 8 Übung ............................................................. 9 2 Das erste Projekt mit Dreamweaver ...10 2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8 2.9 2.10 Dreamweaver starten und benutzen .......... 10 Sites anlegen ................................................ 13 Startseite und Ordnerstruktur erstellen ...... 15 Webseiten speichern, schließen und öffnen.................................................... 17 Webseiten mit Bildern und Hyperlinks versehen ....................................................... 17 Hintergrundfarbe bestimmen...................... 19 Webseiten im Browser betrachten .............. 20 Dreamweaver beenden................................ 21 Schnellübersicht ........................................... 22 Übung .......................................................... 22 6 Tabellen gestalten ................................. 56 6.1 6.2 6.3 6.4 6.5 6.6 6.7 7 Letzte Schritte vor der Veröffentlichung ................................... 66 7.1 7.2 7.3 7.4 7.5 7.6 7.7 3 Text gestalten ........................................24 3.1 3.2 3.3 3.4 3.5 3.6 Text für das Web aufbereiten...................... 24 Die Struktur des Texts definieren ................ 27 Das Aussehen des Texts gestalten ............... 29 Schriftlisten erstellen.................................... 32 Schnellübersicht ........................................... 33 Übung ........................................................... 33 4 Webseiten mit Hyperlinks verbinden................................................34 4.1 4.2 4.3 4.4 4.5 4.6 4.7 4.8 4.9 Verbindungen mithilfe von Hyperlinks schaffen ........................................................ 34 Text-Hyperlinks erstellen ............................. 35 Hyperlinks testen, bearbeiten und entfernen .............................................. 36 Bild-Hyperlinks erstellen .............................. 37 E-Mail-Hyperlinks erstellen .......................... 38 Textmarken-Hyperlinks verwenden............. 38 Hyperlinks verwalten ................................... 40 Schnellübersicht ........................................... 41 Übung ........................................................... 41 Tabellen erstellen..........................................56 Tabellen formatieren ....................................57 Tabellen, Zeilen und Spalten bearbeiten .....60 Tabellen importieren ....................................62 Tabellendaten sortieren ...............................63 Schnellübersicht ............................................64 Übung............................................................65 7.8 7.9 Einen Domain-Namen registrieren...............66 Einen geeigneten Provider finden ...............67 Webseiten für Suchmaschinen vorbereiten....................................................68 Webauftritt überprüfen ...............................70 Code überprüfen...........................................70 Hyperlinks testen ..........................................72 Einen Webauftritt mit Berichten überprüfen ....................................................72 Schnellübersicht ............................................73 Übung............................................................73 8 Webauftritte veröffentlichen............... 74 8.1 8.2 8.3 8.4 Webspace reservieren ...................................74 Einen Webauftritt veröffentlichen...............75 Schnellübersicht ............................................79 Übung............................................................79 9 Direkt im Code arbeiten ....................... 80 9.1 9.2 9.3 9.4 9.5 9.6 9.7 9.8 Den Code Ihrer Webseiten anzeigen lassen .............................................80 HTML-Code verstehen...................................82 Codehilfen in der Codeansicht verwenden.....................................................83 HTML-Tags einfügen und bearbeiten ..........85 Codefragmente verwenden..........................86 HTML-Code aus anderen Programmen optimieren.....................................................87 Schnellübersicht ............................................89 Übung............................................................89 5 Bilder einbinden.....................................42 5.1 5.2 5.3 5.4 5.5 5.6 2 Bilder im Web............................................... 42 Hintergrundbilder verwenden..................... 44 Bilder skalieren und positionieren............... 45 Bilder aus Photoshop einfügen ................... 46 Layout-Hilfen verwenden ............................ 47 Bilder bearbeiten ......................................... 50 10 Divs (Ebenen) und CSS .......................... 90 10.1 10.2 10.3 10.4 Div-Tags einfügen, positionieren und formatieren............................................90 CSS effektiv einsetzen...................................93 CSS-Regeln definieren und ändern ..............93 CSS-Regeln bearbeiten..................................98 © HERDT-Verlag I Inhalt 10.5 10.6 10.7 10.8 Mit der CSS-Prüfung arbeiten ...................... 99 Externe Stylesheets verwenden.................. 100 Schnellübersicht .......................................... 105 Übung ......................................................... 106 11 Spry, Live-Ansichten und CodeNavigator..............................................108 11.1 11.2 11.3 11.4 11.5 11.6 11.7 Grundlegendes zu Spry-Widgets................ 108 Spry-Widgets einfügen und bearbeiten .... 109 Weitere Spry-Widgets erstellen.................. 111 Interaktive Inhalte mit Spry-Datensätzen erzeugen ..................................................... 113 Quelldaten und Spry-Datensätze bearbeiten................................................... 119 Schnellübersicht .......................................... 121 Übung ......................................................... 121 14 Frametechnik einsetzen...................... 134 14.1 14.2 14.3 14.4 14.5 14.6 14.7 Eine Website mit Frames unterteilen......... 134 Frameset erstellen ...................................... 135 Webauftritt mit Frames aufbauen ............. 137 Hyperlinks für das Frameset festlegen....... 138 Framesets individuell anpassen.................. 139 Schnellübersicht.......................................... 142 Übung ......................................................... 142 15 JavaScript und Flash-Inhalte einbinden ............................................. 144 15.1 15.2 15.3 15.4 15.5 15.6 JavaScript einbinden................................... 144 Interaktivität mit Verhalten einbinden ..... 145 Beispiele für den Einsatz von Aktionen..... 148 Flash-Inhalte einbinden.............................. 151 Schnellübersicht.......................................... 154 Übungen ..................................................... 154 12 Mit Vorlagen arbeiten.........................122 12.1 12.2 12.3 12.4 Webseiten mithilfe von Vorlagen erstellen....................................................... 122 Dynamische Vorlagen verwenden ............. 124 Schnellübersicht .......................................... 128 Übung ......................................................... 128 13 Sites verwalten ....................................130 13.1 13.2 13.3 13.4 Sites umbenennen, entfernen und exportieren .......................................... 130 Arbeitsvorgänge annullieren und wiederherstellen.................................. 132 Schnellübersicht .......................................... 133 Übung ......................................................... 133 © HERDT-Verlag 16 Formulare erstellen............................. 156 16.1 16.2 16.3 16.4 16.5 Formulare anlegen ..................................... 156 Formularfelder einfügen und bearbeiten ........................................... 158 Formulardaten versenden .......................... 162 Schnellübersicht.......................................... 164 Übung ......................................................... 164 Stichwortverzeichnis ............................... 166 3 2 Dreamweaver CS5 - Grundlagen 2 Das erste Projekt mit Dreamweaver In diesem Kapitel erfahren Sie D D D D D 2.1 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 Dreamweaver starten und benutzen Dreamweaver über die Startschaltfläche starten f Klicken Sie auf die Startschaltfläche zu öffnen. f 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 . , um das Startmenü 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: f 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 … D D auf zuletzt geöffnete Dateien zugreifen bzw. vorhandene Dateien öffnen , verschiedene Dokumentarten erstellen bzw. eine Dreamweaver-Site anlegen , D Videos zu verschiedenen Funktionen in Dreamweaver in einem Browser öffnen und abspielen , D 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 2 Das erste Projekt mit Dreamweaver Das Anwendungsfenster Standardmäßig wird das Anwendungsfenster mit dem Arbeitsbereich DESIGNER und in der Entwurfsansicht geöffnet. Seitenregister Ansichtssteuerung Verankerungsbereich mit Bedienfeldern Dokumentfenster Statusleiste Eigenschafteninspektor Element Beschreibung Anwendungsleiste Die Anwendungsleiste enthält die Menüs , die Anwendungssteuerelemente (FENSTER - ANWENDUNGSLEISTE), den Arbeitsbereichumschalter und das Suchfeld 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. 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. Tag-Selektor 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. Seitenregister 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 Bedienfeldgruppen 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. Eigenschafteninspektor Ü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. Bedienfeld DATEIEN Sie möchten … aus einer Gruppe ein anderes Bedienfeld im Vordergrund anzeigen lassen f Klicken Sie auf das betreffende Register. eine Bedienfeldgruppe minimieren f Klicken Sie doppelt auf die Leiste neben den Registern. ein Bedienfeld frei platzieren f Ziehen Sie das Register auf die gewünschte Stelle. Bedienfelder erweitern bzw. zu Symbolen verkleinern f Klicken Sie am oberen Rand des Verankerungsbereichs auf einen Doppelpfeil bzw. . eine Bedienfeldgruppe frei platzieren f Ziehen Sie die Leiste auf die gewünschte Stelle. ein Bedienfeld bzw. eine Bedienfeldgruppe verankern f 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 f Blenden Sie das Bedienfeld EINFÜGEN über den Menüpunkt FENSTER - EINFÜGEN aus bzw. wieder ein. f 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 2 Das erste Projekt mit Dreamweaver 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: f f f 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 D Wechseln Sie zwischen Arbeitsbereichen über den Arbeitsbereichsumschalter bzw. über den Menüpunkt FENSTER - ARBEITSBEREICHLAYOUT - Arbeitsbereichname. D Nicht mehr benötigte Arbeitsbereiche können Sie über den Menüpunkt FENSTER - ARBEITSBEREICHLAYOUT - 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. f f f f 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. f Rufen Sie den Menüpunkt SITE - NEUE SITE auf. Alternative: NEUE SITE f Wechseln Sie im geöffneten Dialogfenster links auf den Eintrag SITE und geben Sie in das Feld SITENAME den Namen des Webauftritts ein, z. B. kick. f Wechseln Sie im Feld LOKALER SITE-ORDNER mithilfe des Symbols zum bereits erstellten Stammordner und betätigen Sie die Schaltflächen ÖFFNEN und AUSWÄHLEN. f Klicken Sie links auf den Eintrag ERWEITERTE EINSTELLUNGEN und wählen Sie den Eintrag LOKALE INFO. f , Eintrag 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. f Aktivieren Sie das Kontrollfeld , sodass die Groß- und Kleinschreibung bei der HyperlinkPrüfung beachtet wird. Dies ist wichtig, weil viele Webserver zwischen Groß- und Kleinschreibung unterscheiden. f 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. f 14 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. © HERDT-Verlag 2 Das erste Projekt mit Dreamweaver 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. f Geben Sie im Anwendungsfenster einen beliebigen Text in die Webseite ein, z. B. Willkommen! f Rufen Sie den Menüpunkt DATEI - SPEICHERN auf. Alternative: STRG S Beim erstmaligen Speichern wird das Dialogfenster SPEICHERN Stammordner der Site wird im Feld UNTER eingeblendet. Der SPEICHERN IN angezeigt. f Geben Sie im Feld DATEINAME den Namen Ihrer Startseite ein, z. B. index. f 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 f Erstellen Sie Ordner wie beschrieben, vgl. Abschnitt 2.2. eine neue HTMLDatei erstellen f f Markieren Sie den Ordner, in dem Sie die Datei erstellen möchten. f Überschreiben Sie den vorgegebenen Dateinamen mit dem gewünsch. ten Namen und betätigen Sie RETURN eine Datei öffnen f Klicken Sie doppelt auf den Dateinamen der Webseite. Ordner/Dateien löschen f Falls zu löschende Dateien geöffnet sind, schließen Sie diese über den Menüpunkt DATEI - SCHLIESSEN bzw. DATEI - ALLE SCHLIESSEN. f Markieren Sie den zu löschenden Ordner bzw. die zu löschende Datei und betätigen Sie ENTF . f Bestätigen Sie die Rückfrage mit JA. f Falls umzubenennende Dateien geöffnet sind, schließen Sie diese über den Menüpunkt DATEI - SCHLIESSEN. f Markieren Sie den gewünschten Ordner bzw. die gewünschte Datei und wählen Sie den Befehl DATEI - UMBENENNEN. f Überschreiben Sie den markierten Namen mit dem neuen Namen und . betätigen Sie RETURN Ordner/Dateien umbenennen © HERDT-Verlag Öffnen Sie das Menü des Bedienfelds DATEIEN und wählen Sie den Befehl DATEI - NEUE DATEI aus. 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: D 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. D Verwenden Sie keine Sonderzeichen, Leerzeichen oder Umlaute, da nicht alle Webserver mit diesen richtig umgehen können. D Statt Leerzeichen können Sie den Unterstrich ( optisch zu unterteilen, z. B. kurse_von_kick. × UMSCHALTEN - ) verwenden, um längere Dateinamen 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. f Öffnen Sie den Windows-Explorer, klicken Sie auf die Schaltfläche ORGANISIEREN und wählen Sie den Eintrag ORDNER- UND SUCHOPTIONEN. f Wechseln Sie im Dialogfenster ORDNEROPTIONEN zum Register ANSICHT. f Deaktivieren Sie im Listenfeld ERWEITERTE EINSTELLUNGEN das Kontrollfeld ERWEITERUNGEN BEI BEKANNTEN DATEITYPEN AUSBLENDEN . f Betätigen Sie die Schaltfläche FÜR ORDNER ÜBERNEHMEN bzw. FÜR ALLE ÜBERNEHMEN und bestätigen Sie die Rückfrage mit JA. f Klicken Sie auf OK. 16 © HERDT-Verlag 2 Das erste Projekt mit Dreamweaver 2.4 Webseiten speichern, schließen und öffnen Webseiten speichern f 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 f 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 f f 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. f f f Ö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. © HERDT-Verlag Bild einfügen 17 2 Dreamweaver CS5 - Grundlagen f 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. f 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. 18 f Erstellen Sie eine neue Webseite, geben Sie einen beliebigen Text in die Webseite ein und speichern Sie sie unter dem Namen team.html. f Wechseln Sie zur Webseite index.html, geben Sie den Text Unser Team ein und markieren Sie den Text. f 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. f Ö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. f Speichern Sie beide Dateien. © HERDT-Verlag 2 Das erste Projekt mit Dreamweaver 2.6 Hintergrundfarbe bestimmen Hintergrundfarbe festlegen Sie können Ihre Webseite mit einer Hintergrundfarbe versehen. f Rufen Sie den Menüpunkt MODIFIZIEREN - SEITENEIGENSCHAFTEN auf. Alternative: STRG J Das Dialogfenster SEITENEIGENSCHAFTEN wird angezeigt. f Klicken Sie in der Kategorie ERSCHEINUNGSBILD (CSS) auf das Farbfeld HINTERGRUNDFARBE . f Wählen Sie eine Farbe mit der Pipette aus dem eingeblendeten Farbwähler aus. f 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 bestätigen. FFF bzw. die englische Bezeichnung white) und mit RETURN 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: f f 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. f f f Ö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. Liste installierter Browser 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 Browservorschauliste aufnehmen. f f f f f 20 Rufen Sie den Menüpunkt DATEI - VORSCHAU IN BROWSER BROWSERLISTE BEARBEITEN auf. Klicken Sie im Dialogfenster VOREINSTELLUNGEN auf das Symbol . Geben Sie im Dialogfenster BROWSER HINZUFÜGEN im Feld NAME den Browsernamen ein. Wechseln Sie über die Schaltfläche DURCHSUCHEN zur Startdatei des Browsers. Klicken Sie auf OK. Einen weiteren Browser hinzufügen © HERDT-Verlag 2 Das erste Projekt mit Dreamweaver Browser verwalten Sie möchten … f 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ärbrowser fest. Durch Betätigen von F12 bzw. STRG F12 lassen Sie sich die aktuelle Webseite schnell im Primär- bzw. Sekundärbrowser anzeigen. die Einstellungen eines Browsers ändern f Markieren Sie im Dialogfenster VOREINSTELLUNGEN den zu ändernden Eintrag und betätigen Sie die Schaltfläche BEARBEITEN. einen Browser aus der Liste entfernen f 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. f Rufen Sie den Menüpunkt BEARBEITEN - VOREINSTELLUNGEN auf. Alternative: STRG U f Aktivieren Sie in der Kategorie ALLGEMEIN des Dialogfensters das Kontrollfeld DOKUMENT BEIM START ERNEUT ÖFFNEN. f 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 f 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 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 eine neue Site anlegen SITE - NEUE SITE oder eine neue Webseite erstellen DATEI - NEU, Schaltfläche ERSTELLEN oder Bedienfeld DATEIEN DATEI - NEUE DATEI Webseiten speichern DATEI - SPEICHERN oder 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 einen Hyperlink erstellen Text markieren, Eigenschafteninspektor, Feld HYPERLINK, klicken und auf Zieldatei im Bedienfeld DATEIEN ziehen eine Hintergrundfarbe wählen MODIFIZIEREN - SEITENEIGENSCHAFTEN, Kategorie ERSCHEINUNGSBILD, Farbfeld HINTERGRUNDFARBE oder STRG J die aktuelle Webseite im Browser testen DATEI - VORSCHAU IN BROWSER, Browser wählen Dreamweaver beenden DATEI - BEENDEN oder 2.10 , DATEI - NEUER ORDNER , NEUE SITE STRG STRG , S ALT I oder STRG an- Q Übung Eine Site mit Hyperlinks, Hintergrundfarbe und einem Bild versehen Übungsdateien: kontaktbild.jpg, kick_k02 22 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 2 Das erste Projekt mit Dreamweaver 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
