Dreamweaver MX Arbeiten mit HTML-Vorlagen

Transkript

1 Publizieren auf dem NiBiS Kersten Feige Nicole Y. Männl , Uhr , Uhr Dreamweaver MX 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 MX starten Start -> Programme -> Macromedia -> Dreamweaver MX (Testversion) 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 nicht verändert werden (Einstellungen wie nach der Installation beibehalten). 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 Voraussetzung: Sie haben eine Site angelegt (siehe Dokument Dreamweaver MX - Siteverwaltung). Stellen Sie sicher, dass Sie die Site in der Lokalen Ansicht angezeigt bekommen Tipp: F8 ist die Taste zum Einschalten der Site-Ansicht wie auch zum Ausschalten. Duplizieren einer HTML-Seite (Vorlage kopieren) Um die Vorlagen mehrmals zu benutzen, klicken Sie mit der rechten Maustaste auf die HTML-Datei (hier: BSPvorlage600.html), damit sich das Kontextmenü öffnet und dort klicken Sie auf Duplizieren. Nicole Y. Maennl Seite 2 letzte Änderung:

3 duplizierte Datei umbenennen Sie erhalten durch den Vorgang des Duplizierens immer eine Datei, die mit Kopievon anfängt und mit dem Ursprungsdateinamen endet.: Klicken Sie hierfür mit der rechten Maustaste auf die HTML-Datei, damit sich das Kontextmenü öffnet und dort klicken Sie auf Umbenennen. Vergeben Sie einen aussagekräftigen Dateinamen (ohne Sonderzeichen, ohne Leerzeichen, möglichst in Kleinbuchstaben und mit der Dateiendung.html ) und benennen Sie die KopievonBSPvorlage600.html in einen Dateinamen Ihrer Wahl um (z. B. startseite.html). HTML-Seite einrichten (hier startseite.html) Titel der Seite ändern Ändern Sie das umrandete Feld und setzen Sie einen passenden Titel ein. 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 und Nachname o beachten Sie dabei die zweifache Änderung, wie unter adresse anpassen erklärt: o Datum (optional, wenn nicht benötigt, dann ganz weglöschen) Nicole Y. Maennl Seite 3 letzte Änderung:

4 HTML -Seite einrichten (hier startseite.html) Fortsetzung Fließtexte in Tabellen: Es empfiehlt sich, bei Zeilenumbrüchen das <br> - (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 (anders als in Word!). 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 (zunächst) 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. 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: Stellen Sie den Cursor an die Textposition, an der ein Link eingefügt werden soll. Menüleiste: Einfügen -> Hyperlink. Füllen Sie die Eingabemaske aus: - Text: das ist der sichtbare Linktext - Hyperlink: die Internetadresse, die immer mit beginnt oder eine eigene HTML-Seite, die sich innerhalb Ihrer Site befindet. - Ziel: wie der Link geöffnet werden soll _blank = Verweis in neuem Fenster öffnen (für externe Links), _self = Verweis im selben Fenster/Rahmen öffnen (für eigene HTML-Seite innerhalb der Site), _top = alle Framesets beim Ausführen des Verweises sprengen (Link auf einen NiBiS-Menüpunkt). Nicole Y. Maennl Seite 4 letzte Änderung:

5 Text-Link anpassen (vorhandener Text): Markieren Sie genau den zu verlinkenden 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. Text-Link (vorhandener Text) zu einer eigenen HTML-Seite: Voraussetzung: die Siteverwaltung muss angezeigt werden (F8).Markieren Sie genau den zu verlinkenden Text. Im Fenster Eigenschaften gehen Sie mit dem Mauszeiger auf das Dateizeigersymbol und mit gedrückter Maustaste zeigen Sie auf eine andere Datei in der Site-Ansicht. Lassen Sie erst jetzt die Maustaste los. Stellen Sie das Ziel (den Target ) ein (hier: _self) 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, von denen Sie die Erlaubnis zur Veröffentlichung vorher eingeholt haben), indem Sie die Grafik (durch Klick) markieren, so dass eine schwarze Rahmenmarkierung zu sehen ist und tragen Sie im Nicole Y. Maennl Seite 5 letzte Änderung:

6 Fortsetzung: Bild einfügen und ggf. verlinken 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. Tragen Sie eine 0 (Null) als Wert für das Feld Rahmen ein (ansonsten wird die verlinkte Grafik mit rotem Rahmen angezeigt). Tabelle: Zeilen hinzufügen Markieren Sie die Zelle, unter der Sie eine Zeile einfügen möchten und klicken Sie mit der rechten Maustaste in diese Zelle. Wählen Sie - Tabelle, - Zeilen oder Spalten einfügen Es öffnet sich ein Fenster, das Sie mit den gewünschten Änderungsdaten ausfüllen. Bestätigen Sie mit OK. Aufzählungen: Listpunkte Klicken Sie in die neu erstellte Zeile (siehe oben: Tabelle: Zeilen hinzufügen ) und im Fenster Eigenschaften auf dieses Symbol Es erscheint ein Listpunkt, hinter dem Sie Text eingeben können. Mit der Enter-Taste erzeugen Sie einen weiteren Listpunkt, einen Zeilenumbruch innerhalb dieses Listpunktes erreichen Sie indem Sie die Umschalt-Taste und Enter gleichzeitig drücken. Nicole Y. Maennl Seite 6 letzte Änderung:

7 Vorschau 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 schliessen 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 (Internet Explorer, Netscape etc.) die Datei startseite.html: Browser-Menüleiste: Datei -> Öffnen -> Durchsuchen Nach einer Änderung und Abspeichern in Dreamweaver MX: 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 Dreamweaver MX: Datei -> Speichern und schliessen Sie die Datei Menüleiste Dreamweaver MX: Datei -> Schliessen HTML -Seite Infospalte einrichten (hier info.html) Sitemap: Vorlage duplizieren, umbenennen Suchen Sie die BSPinfo.html in Ihrem Verzeichnis C:\Eigene Dateien\www und duplizieren Sie diese (rechte Maustaste, duplizieren). Benennen Sie diese um mit einem frei wählbaren Namen (ohne Sonderzeichen und Leerzeichen), z. B. in dem Namen info.html. 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 mit einem Link in dieser Zelle stehen. Ändern Sie jeweils Text und Links. Falls Dreamweaver die untere Zelle zu gross 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 Schliessen Sie die Datei. Nicole Y. Maennl Seite 7 letzte Änderung:

8 Targets (Ziele) für Links im NiBiS-System: 1. Links vom Info-Frame, die im Haupt-Frame erscheinen sollen (Ziel=haupt): <a href= startseite.html target= haupt >Link</a> 2. Links (Info-Frame und Haupt-Frame), die einen NiBiS-Menüpunkt aufrufen(ziel=_top): 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 8 letzte Änderung: