Das sind die Schritte für Übung 01:
Als weitere Hilfe können die Artikel Adobe Dreamweaver und und Teile von Eine Website programmieren – Schritte heranzgehogen werden.
- Im Windows-Dateiexplorer den lokalen Stammordner für die Übung 01 anlegen: \uebung01
- Im Ordner \uebung01 den Unterordner \fotos anlegen
- Auf gleicher Ebene wie \uebung01 den Materialien-Ordner anlegen: \uebung01_materialien
(Er dient dazu, Materialien für die Website zunächst zu sammeln, z. B. Fotos und Texte. Erst die vorbereiteten Fotos werden später im Ordner \fotos gespeichert.
- Adobe Dreamweaver starten
- Im Hauptmenü Site / Neue Site wählen
- Unter Site-Name Übung01 eintragen
- Unter Lokaler Site-Ordner mit dem Symbol Ordner suchen den Ordner \uebung01 auswählen und bestätigen und Speichern.
Jetzt speichert DW automatisch im Ordner \uebung01.
- Im Startfenster von DW eine leere HTML-Seite erstellen
- Mit Strg+S sofort speichern/Namen vergeben: index.html
Es muss darauf geachtet werden, dass die Dateiendung .html auch dort steht. - Text eingeben bzw. kopieren:
Willkommen! – Enter für neuen Absatz
Ein paar Sätze Dummy-Text einfügen (von der Website blindtextgenerator.com kopieren) – Enter für neuen Absatz - Namen für die Hyperlinks eingeben:
Home | Über mich | Kontakt - Willkommen! als Überschrift 1 formatieren: im Eigenschaftsfenster unten links unter Format Überschrift 1 auswählen
- In der Symbolleiste unter Titel den Titel der Seite eintragen: Willkommen!
- Speichern nicht vergessen.
- Die Seite uebermich.html erstellen
- Überschrift: eigener Name (als Überschrift 1 formatieren)
- Einen Einleitungssatz zu den eigenen Hobbies schreiben
- Eine Aufzählung mit einigen Hobbies machen:
Im Eigenschaftsfenster unten Ungeordnete Liste wählen und schreiben - Am Ende der Liste mit zweimaligem Enter die Liste beenden und so zum nächsten Absatz gelangen
- Ein paar Sätze Dummy-Text einfügen
- Die Namen für die Navigation einfügen
- Die Seite kontakt.html erstellen
- Überschrift: Kontakt
- Dann Kontaktdaten einfügen: Name, Strasse, PLZ Ort, Telefon, Email
Zwischen Strasse und PLZ Ort kommt eine neue Zeile: Umschalt+Enter, ebenso zwischen Telefon und Email - Schließlich wieder die Namen für die Hyperlinks
Verlinkung der drei Seiten
- Mit der Seite index.html beginnen
- Das Wort Home exakt markieren
- Im Eigenschaftsfenster mit dem Symbol Auf Datei zeigen (Spule) auf die Datei index.html rechts im Dateien-Fenster ziehen und loslassen
- Im Eigenschaftsfenster bei Ziel _self einstellen
- Über mich markieren und mit der Spule zu uebermich.html ziehen und als Ziel _self auswählen
- Schließlich noch Kontakt
- Speichern nicht vergessen
- Das Gleiche ist mit den zwei weiteren Seiten uebermich.html und kontakt.html zu tun