Dreamweaver 8 Homepage erstellen Teil 2

Transkript

1 Dreamweaver 8 Homepage erstellen Teil 2 Voraussetzungen Das vorliegende Skriptum knüpft an folgende Skripten an und setzt voraus, dass du diese bereits durchgearbeitet hast. Dreamweaver_Einführung.pdf Dreamweaver_Homepage_erstellen_Teil1 Fireworks_Einführung.pdf Fireworks_Bildleiste.pdf Fireworks_Navigation.pdf Rückblick Am Ende von Teil 1 hast du folgende HTML-Seite erstellt: Die Grafiken, die du nun benötigst, hast du mit Hilfe der Skripten zu Fireworks inzwischen erstellt. DW_Homepage_erstellen_Teil2 Seite 1 von 8 SC 2006

2 Seiteneigenschaften festlegen Klicke in der Eigenschaftenleiste auf die Schaltfläche Seiteneigenschaften : Wähle nun in der Kategorie Erscheinungsbild bei Seitenschrift den Eintrag Arial, Helvetica, sans-serif wie in der Abbildung dargestellt: Klicke anschließend auf OK Du hast damit festgelegt, dass als Schrift für deine Seite Arial gewählt werden soll. Falls die Schrift Arial auf dem Zielrechner wider erwarten nicht vorhanden sein sollte, wird die Schrift Helvetica verwendet, sollte auch diese nicht vorhanden sein, wählt der Internetbrowser aus allen Schriften eine serifenlose (=sans-serif) aus. Genauere Informationen zum Thema Schriften findest du im Skriptum Farbe, Typografie, Grafik unter der Adresse DW_Homepage_erstellen_Teil2 Seite 2 von 8 SC 2006

3 In Dreamweaver Image-Ordner anlegen Klicke in der Fensterleiste Site Meine_Homepage mit der rechten Maustaste an und wähle den Befehl Neuer Ordner. Nenne diesen neuen Ordner images : In diesen Ordner speicherst du nun alle Grafikdateien, die für die Homepage benötigt werden. Bilder in Dreamweaver einfügen Klicke zunächst doppelt auf den Bildplatzhalter Logo. Es erscheint nun folgendes Dialogfenster: Verzweige in dein Übungsverzeichnis, um die benötigten Grafikdateien zu öffnen. Suche die Datei logo.gif und klicke sie doppelt an. DW_Homepage_erstellen_Teil2 Seite 3 von 8 SC 2006

4 Bestätige die folgende Meldung mit JA : Speichere nun die Datei logo.gif in den so eben erstellten Ordner images : Drücke nun die Taste F5 oder auf die Schaltfläche Aktualisieren in der Fensterleiste (siehe Abbildung rechts): Wenn du nun auf das + vor dem Ordner images klickst, sollte die Datei logo.gif angezeigt werden. Klicke nun doppelt auf den Bildplatzhalter Bildleiste und wiederhole die eben beschriebenen Schritte mit der Datei bildleiste.jpg. Klicke wiederum auf die Schaltfläche Aktualisieren oder die Taste F5 und kontrolliere, ob die Datei in der Fensterleiste aufscheint. DW_Homepage_erstellen_Teil2 Seite 4 von 8 SC 2006

5 Schaltflächen austauschen Für die Grafiken der Navigationsleiste wählst du nun einen anderen weg. Öffne den Windows-Explorer mit Rechtsklick auf die Schaltfläche Start und verzweige in deinen Übungsordner. Kopiere nun die Dateien navigation_up1.gif bis navigation_up6.gif sowie die Dateien navigation_over1.gif bis navigation_over5.gif in den Ordner images und klicke F5 dieser Weg ist schlicht schneller. Diesmal fügst du die Grafiken aber nicht durch Doppelklick auf den Bildplatzhalter ein, sondern markierst zuerst den Platzhalter und drückst anschließend die Taste Entf damit ist die Ebene Navigation wieder leer. Wähle nun im Menü Einfügen Grafikobjekte den Befehl Rollover-Bild. Gib nun im erscheinenden Dialogfeld folgende Informationen und Pfade ein: Wiederhole diese Schritte mit den restlichen Dateien. Achtung, du musst das natürlich nur bis zur Datei navigation_up5.gif bzw. navigation_over5.gif tun, da die letzte Datei ja keinen Text enthält. Bei URL gib bereits jetzt schon den Namen der html-seiten an, die später angesprungen werden sollen. Auch wenn diese Seiten noch nicht existieren, kannst du die Adresse schon eingeben. Verwende folgende Namen: steckbrief.html, hobbys.html, links.html, kontakt.html. DW_Homepage_erstellen_Teil2 Seite 5 von 8 SC 2006

6 Achtung: Bei der letzten Grafik musst du nun einen anderen Weg gehen. Wähle das Menü Einfügen Bild und wähle aus dem Image-Ordner die Datei navigation_up6.gif. Möglicherweise wird das Bild jetzt nicht exakt zu den anderen passen, weil Dreamweaver auch dieses Bild als Rollover-Bild interpretiert. Du musst daher folgendes tun: Markiere das letzte Bild und entferne in der Eigenschaftenleiste den enthaltenen Link Die Meldung,die erscheint, kannst du mit OK bestätigen. Hier den Hyperlink löschen, falls Probleme auftauchen. Drücke nun auf der Tastatur die Taste F12 speichere die Seite und betrachte nun in der Browser-Vorschau das Ergebnis. Fahre mit der Maus über die Texte und du wirst sehen, wie sich die Farbe von rot in grau ändert. Du erkennst außerdem, dass im Internet-Explorer der Alternativtext angezeigt wird, wenn du über die Schaltfläche fährst. Der Alternativtext ist vor allem für Sehbehinderte von Vorteil, da diese spezielle Software verwenden, die ihnen diese Texte vorliest denn sehen können sie die Grafiken nicht darum ist es wichtig, diesen Alternativtext immer anzugeben Stichwort: Barrierefreiheit. DW_Homepage_erstellen_Teil2 Seite 6 von 8 SC 2006

7 Schreibe nun in die Ebene Inhalt den Text Willkommen auf meiner Homepage und nimm in der Eigenschaftenleiste folgende Einstellungen vor: Format: Überschrift 1 Schriftart: müsste schon richtig eingestellt sein (Arial, Helvetica, sans-serif) Stil: Stil 1 Schriftfarbe: # Ausrichtung: zentriert Bevor du den nächsten Schritt ausführst, speichere unbedingt die Seite index.html!!!!! Seiten kopieren Um zu testen, ob deine Schaltflächen auch funktionieren, erzeugst du nun einige html- Seiten. Um dir Arbeit zu ersparen, klickst du als nächstes die Datei index.html mit der rechten Maustaste an und wählst den Befehl Bearbeiten Kopieren. Dann wiederhole den Schritt und wähle diesmal den Befehl Bearbeiten Einfügen. Benenne nun die Datei Kopievonindex.html in steckbrief.html um. Wiederhole diese Schritte, bis du insgesamt folgende Seiten in der Fensterleiste siehst Vergleiche Abbildung auf der nächsten Seite: DW_Homepage_erstellen_Teil2 Seite 7 von 8 SC 2006

8 Öffne der Reihe nach die Dateien durch Doppelklick und ändere die Überschriften jeweils auf den Seitennamen ab, also die Datei hobbys.html bekommt die Überschrift Hobbys usw. Schließe alle Seiten, bis auf die index.html, speichere die Änderungen und klicke abschließend F12 Nun teste in aller Ruhe die Funktion deiner Homepage. Was jetzt noch fehlt ist der Inhalt aber das ist eine andere Geschichte und einzig und allein von deiner Fantasie abhängig. P. S. Vergiss nicht, auch den Titel deiner Seiten zu ändern: DW_Homepage_erstellen_Teil2 Seite 8 von 8 SC 2006