Dreamweaver Arbeiten mit HTML-Vorlagen

Transkript

1 Publizieren auf dem NiBiS Kersten Feige Nicole Y. Männl , Uhr , Uhr Dreamweaver Arbeiten mit HTML-Vorlagen Voraussetzungen zum Arbeiten mit HTML-Vorlagen Starten Sie Ihren Browser und rufen Sie die Website auf. Klicken Sie auf Download und speichern Sie die Datei vorlagen.zip in C:\Eigene Dateien. Schließen Sie den Browser. Starten Sie den Windows Explorer (rechte Maustaste auf Start, Explorer) Erstellen Sie ein neues Verzeichnis www unter C:\Eigene Dateien. Entpacken Sie das vorlagen.zip in das Verzeichnis C:\Eigene Dateien\www Dieses lokale Verzeichnis www auf Ihrer Festplatte ist später mit Ihrem Startordner auf dem Server zu synchronisieren. Schließen Sie den Windows Explorer. Programm Dreamweaver starten Start -> Programme -> Macromedia Dreamweaver -> Dreamweaver 4 (bei Testversion: Ausprobieren ) Grundeinstellungen (Empfehlung) Einstellung in der Menüleiste: Fenster: Häkchen sind sichtbar bei o Eigenschaften o CSS-Stile Andere Fenster werden momentan nicht im Anzeigemodus benötigt. Nicole Y. Maennl Seite 1 letzte Änderung:

2 Einstellungen in der Menüleiste: Bearbeiten -> Voreinstellungen -> Allgemein o Häkchen sollten (wie nach der Installation eingestellt) belassen werden o Als Erweiterung beim Speichern empfiehlt sich.html Einstellungen in der Menüleiste: Bearbeiten -> Voreinstellungen -> unsichtbare Elemente Häkchen bei o Zeilenumbruch alle anderen Elemente können deaktiviert werden (Häkchen wegklicken). HTML-Vorlagen einsetzen Menüleiste: Datei -> Öffnen Suchen Sie die BSPvorlage600.html in Ihrem Verzeichnis C:\Eigene Dateien\www und öffnen Sie diese. Menüleiste: Datei -> Speichern unter Speichern Sie diese unter einem frei wählbaren Namen (ohne Sonderzeichen und Leerzeichen), z. B. unter dem Namen startseite.html in dem Verzeichnis C:\Eigene Dateien\www ab. So können Sie die Vorlagen mehrmals benutzen! HTML-Seite einrichten (hier startseite.html) Titel der Seite ändern Ändern Sie das umrandete Feld in einen passenden Titel. Nicole Y. Maennl Seite 2 letzte Änderung:

3 HTML -Seite einrichten (hier startseite.html) Fortsetzung Inhalte ändern: markieren Sie die Überschrift und schreiben Sie eine passende Überschrift (möglichst kurz und aussagekräftig) in das Dokument. Desgleichen ändern Sie o Fliesstext beachten Sie den folgenden Hinweis für Fließtexte in Tabellen o Vorname o Nachname o beachten Sie dabei die zweifache Änderung, wie unter adresse anpassen erklärt: o Datum Fließtexte in Tabellen: Es empfiehlt sich, bei Zeilenumbrüchen das <br> - hier gelb dargestellt - einzusetzen. Sie erreichen dieses, indem Sie die Umschalt-Taste und Enter gleichzeitig drücken. Wenn Sie nur Enter gedrückt haben, dann erhalten Sie einen Absatz, den Sie meistens nur im Quelltext wieder entfernen können. adresse anpassen: Klicken Sie auf die adresse. Das ist der Text, der für die Besucher sichtbar ist. Passen Sie den Text Ihren Wünschen an. Für die Besucher unsichtbar sind die Eigenschaften des Hyperlinks; diese sehen Sie im Fenster Eigenschaften. Belassen Sie das mailto: und ändern Sie die adresse in die gewünschte ab. Nicole Y. Maennl Seite 3 letzte Änderung:

4 Neue adresse erstellen: Klicken Sie an die Stelle, wo Sie die adresse platzieren möchten. Klicken Sie auf Menüleiste: Einfügen -> adresse; Füllen Sie die Angaben im sich öffnenden Fenster aus und bestätigen Sie mit OK. Text-Link erstellen und anpassen: Schreiben Sie den Text, der verlinkt werden soll. Markieren Sie den Text. Klicken Sie im Fenster Eigenschaften in das Textfeld Hyperlink. Geben Sie die externe Internetadresse komplett an, z. B. und stellen Sie das Ziel (den Target ) ein: hier: _blank. Bild einfügen und ggf. verlinken Kopieren Sie das gewünschte Bild in den Ordner C:\Eigene Dateien\www Klicken Sie auf Menüleiste: Einfügen -> Bild und suchen Sie im Ordner www Ihr gewünschtes Bild, markieren es durch Mausklick und bestätigen mit Auswählen. Beachten Sie dabei, dass in der unteren Zeile Relativ zu: Dokument startseite.html (in diesem Fall) ausgewählt ist. Verlinken Sie ggf. das Bild (z. B. sinnvoll bei Logos von Fremdseiten), indem Sie die Grafik (durch Klick) markieren, so dass ein schwarzer Rahmen zu sehen ist und tragen Sie im Fenster Eigenschaften den Hyperlink und das Ziel (wie beim Text-Link) ein. Vergeben Sie auch einen Alt-Text, das ist der Alternativtext, der die Grafik in einer kurzen Zusammenfassung beschreibt oder eine Bezeichnung wiedergibt. Nicole Y. Maennl Seite 4 letzte Änderung:

5 Zur Kontrolle, wie die Änderungen im Browser angezeigt werden, drücken Sie F12 und eine temporäre Vorschau öffnet sich im Browser. Das erkennen Sie am Dateinamen in der Browserzeile, z. B. C:\Eigene Dateien\www\TMPiv5595s69x.htm. Diese temporäre Vorschau im Browser schließen Sie bitte gleich wieder, da eine neue Änderung hier nicht angezeigt wird, sondern nur eine Momentaufnahme darstellt wird. Die 2. Möglichkeit zur Vorschau: Sie öffnen im Browser die Datei startseite.html: Browser-Menüleiste: Datei -> Öffnen -> Durchsuchen Nach einer Änderung und Abspeichern in Dreamweaver: in diesem Modus können Sie durch F5 im Browser die Änderungen immer weiter im selben Browserfenster verfolgen. Nachdem Sie alle Änderungen durchgeführt haben, speichern Sie die Datei startseite.html: Menüleiste: Datei -> Speichern und schliessen Sie die Datei Menüleiste: Datei -> Schliessen HTML -Seite Infospalte einrichten (hier info.html) Fortsetzung Menüleiste: Datei -> Öffnen Suchen Sie die BSPinfo.html in Ihrem Verzeichnis C:\Eigene Dateien\www und öffnen Sie diese. Menüleiste: Datei -> Speichern unter Speichern Sie diese unter einem frei wählbaren Namen (ohne Sonderzeichen und Leerzeichen), z. B. unter dem Namen info.html in dem Verzeichnis C:\Eigene Dateien\www ab. So können Sie die Vorlagen mehrmals benutzen! Titel der Seite ändern Inhalte ändern: Markieren Sie die Überschrift und ersetzen Sie diese durch eine eigene. Löschen Sie nicht benötigte Links. Doch lassen Sie mindestens eine Zeile Text in dieser Zelle stehen. Ändern Sie die Inhalte. Falls Dreamweaver die untere Zelle zu groß anzeigt, klicken Sie einmal außerhalb der Tabelle im Dokument an eine beliebige Stelle, z. B. hier oder aktualisieren Sie mit der Taste F5. Für die Vorschau im Browser klicken Sie auf F12. Nach Beendigung Ihrer Änderungen: Speichern und Schließen Sie die Datei. Nicole Y. Maennl Seite 5 letzte Änderung:

6 Targets (Ziele) für Links im NiBiS-System: 1. Links vom Info-Frame, die im Haupt-Frame erscheinen sollen: <a href= index.html target= haupt >Link</a> 2. Links (Info-Frame und Haupt-Frame), die einen NiBiS-Menüpunkt aufrufen: einen NiBiS-Menüpunkt, der verlinkt werden soll, im NiBiS-Auftritt auswählen, mit der rechten Maustaste die Verknüpfung(sadresse) kopieren und in Dreamweaver entsprechend einbinden. <a href= target= _top >NLI</a> Nicole Y. Maennl Seite 6 letzte Änderung: