Seminar DWMX DW Session 003

Transkript

1 Seminar DWMX 2004 DW Session 003

2 Eigene Site fertigstellen Erstellen einer eigenen Site für das Seminar Projekt Anlegen folgender Ordner: - pages - images - styles - cgi-bin - js - flash - Templates (optional*) - Library (optional*) * wird bei erstem Gebrauch von DW angelegt Anlegen folgender Seiten (Dokument XHTML-kompatibel machen! Titel vergeben!): - index.htm im Verzeichnis / (root oder Stammverzeichnis) - uebermich.htm im Verzeichnis / (root oder Stammverzeichnis) - kontakt.htm im Verzeichnis / (root oder Stammverzeichnis)

3 Arbeiten mit Dokumenten Die folgenden Arbeiten sollten mit einem geteilten Dokumentenfenster durchgeführt werden, um die Aktionen von Dreamweaver besser verfolgen zu können! Öffnen der Seite index.htm Eingeben eines beliebigen Textes Speichern der Seite index.htm Datei/Öffnen!Bei Sonderzeichen auf den Code achten! Datei/Speichern Inhalt auch bei uebermich.htm und kontakt.htm einfügen Einrichten der Seite index.htm als Homepage In die Sitemap-Ansicht wechseln Zurück zur Dateiansicht Site/Sites verwalten Site anwählen Bearbeiten.../Sitemap-Layout Wert für Homepage setzen Optionsmenü Bedienfeld Dateien Ansicht/Sitemap Optionsmenü Bedienfeld Dateien Ansicht/Site-Dateien

4 Hyperlinkorganisation Öffnen der Seite uebermich.htm Erstellen eines Hyperlinks auf die Seite index.htm Speichern der Seite uebermich.htm Maximieren des Bedienfeldes Dateien Anzeigen der Sitemap Datei/Öffnen Einfügeleisten - Allgemein Hyperlink Datei/Speichern Symbol maximieren/minimieren Ansicht/Sitemap Frage Warum wird an dieser Stelle der Hyperlink der Seite Über mich auf die index.htm nicht angezeigt?

5 Hyperlinkorganisation Antwort Der Hyperlink ist nicht von der index.htm ausgehend (hierarchisch) angelegt worden Erstellen eines Hyperlinks von der index.htm zur Seite Über mich durch das Hilfsmittel Auf Datei zeigen Überprüfen des Rücklinks auf der Seite Über mich in der Sitemap das Pluszeichen anklicken In die Dateiansicht wechseln Ansicht/Site-Dateien Duplizieren der Datei uebermich.htm Optionsmenü Dateien Bearbeiten/Duplizieren Kopieren der Dateien uebermich.htm und kontakt.htm in das Verzeichnis /pages - index.htm wird aktualisiert obwohl nicht verschoben - uebermich.htm und kontakt.htm werden aktualisiert weil verschoben - KopievonueberMich.htm wird nicht aktualisiert, da kein Link vorhanden

6 Hyperlinkorganisation Probleme beim Kopieren im Explorer/Finder keine Aktualisierung von HTML-Links Aufgabe: Ergänzen der Hyperlinkstruktur auf allen Seiten (ohne Redundanz) damit eine geschlossene Navigationskette entsteht Umbenennen der Seite uebermich.htm in produkte.htm Aktualisieren des Titels Optionsmenü Dateien Datei/Umbenennen Überprüfen der Hyperlinks auf den anderen Seiten Problem?!

7 Aktualisierungsproblem Problem Dreamweaver aktualisiert zwar die Referenzen der Hyperlinks korrekt, nicht aber die Bezeichner Lösung Verwendung von Vorlagen!

8 Dateiorganisation mit Vorlagen Snapshot Vorlagen Eine oder mehrere Vorlagendateien Vorlagen können bearbeitbare und gesperrte Bereiche beinhalten Auf Basis der Vorlage können Seiten erzeugt werden Änderungen an der Vorlage haben Einfluss auf alle auf der Vorlage basierenden Seiten Probleme Für eine Aktualisierung ist Dreamweaver notwendig Der Aufbau kann sehr komplex werden

9 Vorlageneinführung Erstellen einer neuen HTML-Seite Datei/Neu/Einfache Seite/ HTML-Vorlage Einfügen von drei Hyperlinks: - auf die index.htm - auf die produkte.htm - auf die kontakte.htm Speichern unter dem Namen MainTemplate Löschen der Seiten index.htm und KopievonueberMich.htm

10 Vorlageneinführung Erstellen einer neuen Homepage auf Basis der Vorlage Datei/Neu Reiter Vorlagen MainTemplate -> Erstellen Das Optionsfeld Seite bei Vorlagenänderung aktualisierten muss aktiviert sein! Datei speichern unter index.htm Problem?!

11 Vorlageneinführung Problem Die Seite kann nicht bearbeitet werden! Lösung Einfügen von bearbeitbaren Bereichen in der Vorlage! Öffnen der Datei MainTemplate.dwt im Verzeichnis Templates Datei/Öffnen Einfügen eines bearbeitbaren Bereiches unterhalb der Navigation Einfügeleiste - Allgemein Vorlagen: Bearbeitbarer Bereich Vergeben eines beliebigen Namens (Bsp. Content)

12 Vorlagenorganisation Aktualisierung abhängiger Dateien akzeptieren MainTemplate.dwt speichern Ok Datei/Speichern index.htm öffnen und beliebigen Text einfügen index.htm speichern und schließen produkte.htm öffnen Verknüpfen der Datei Produkte mit der Vorlage Modifizieren/Vorlagen/Vorlage auf Seite anwenden Vorlagen -> MainTemplate Dokumenttext in Content verschieben Das gleiche für die Seite Kontakte Site testen...

13 Dateiorganisation mit Frames Snapshot Frames Unterschiedliche HTML-Dateien können in einem Browser-Fenster angezeigt werden Jeder Bereich (Frame) kann eine bestimmte Größe haben Alle Bereiche zusammen ergeben die Seite Eine HTML-Datei bildet Container für alle anderen Dateien Per HTML kann immer nur ein Frame (eine Datei) neu geladen werden Per Scripting können mehrere geladen werden Probleme Schlechte/keine Suchmaschinenunterstützung Navigationsprobleme wenn Scripting deaktiviert ist

14 Framegrundlagen Alle offenen Seiten schließen Erstellen eines entsprechenden Framesets Den oberen Frame als navigation.htm, den unteren als home.htm unter /pages speichern Das Frameset (der Container) als index2.htm speichern Datei/Neu/Framesets/Oben fest Erstellen Den Frame per Klick auswählen Datei/Frame speichern unter... Auf den umgebenden Rand klicken Datei/Frameset speichern unter... Erstellen einer HTML-Seite produkt_fr.htm Erstellen einer HTML-Seite kontakt_fr.htm Öffnen der Datei navigation.htm

15 Framegrundlagen Erstellen von Hyperlinks zu home.htm, produkt_fr.htm und kontakt_fr.htm Speichern/Schließen von navigation.htm produkt_fr.htm und kontakt_fr.htm mit Inhalt füllen index2.htm im Browser testen

16 Schaubild Dieses Schaubild stellt noch einmal die verschiedenen Organisationsformen visuell dar.