Einführung. Übersicht: Was Sie brauchen, bevor Sie anfangen Projekt in Dreamweaver anlegen. Austauschen der Logos Logo oben

Transkript

1 Einführung Willkommen. Auf den nächsten Seiten erfahren Sie, wie Sie das bestehende Template Lernpfad benutzen, um Ihren eigenen Lernpfad zu erstellen. Sie werden Ihren Lernpfad in Dreamweaver anlegen, Ihr eigenes Logo einbinden, um dann die Seiten mit Ihrem Text und den dazugehörigen Grafiken und Bildern zu füllen. Sie erhalten Hinweise, wie Sie das Seitenlayout sowie die Seitenanzahl und die Navigation verändern können. Übersicht: Seite 2: Seite 3: Seite 4: Seite 5: Seite 6: Seite 7: Seite 8: Seite 9: Seite 10: Seite 11: Seite 12: Was Sie brauchen, bevor Sie anfangen Projekt in Dreamweaver anlegen Titel vergeben Austauschen der Logos Logo links Austauschen der Logos Logo oben Eigene Bilder verwenden Eigenen Text verwenden Text formatieren Seitenlayout ändern Seitenanzahl verkürzen Navigation anpassen 1

2 Was brauchen Sie, bevor Sie anfangen? 1. Die Logos Ihres Instituts als Gif-Datei für links: kv_institutsname.gif für oben: institutsname_logo.gif 2. Die Bilder, die Sie verwenden wollen, als xxx.jpg und Grafiken als xxx.gif Bildgröße der Platzhalter: Aufmacher Foto = 168 * 90 Clickable Image = 168 * 90 Bild = 112 * Den Titel Ihres Lernpfades müssen Sie als geglättetes Gif-Bild erzeugen. Verwenden Sie dazu in Photoshop die Schrift Frutiger 65 Bold, Schriftgrad 24 Pixel, Zeilenabstand 24 Pixel, Laufweite 0, Schriftfarbe RGB (153,153,153) geglättet (Auflösung 72dpi) 4. Diese Dateien kopieren Sie in den folgenden Ordner Ihres entzippten Lernpfad- Templates: Lernpfad / Templates / Images / eigene Bilder 5. Ihren vorstrukturierten Text (z.b. als txt-datei). Sie können Ihren Text aber auch direkt in Dreamweaver eingeben. 6. In Ihrem downgeloadeten Lernpfadordner finden Sie zwei Lernpfadversionen: Der Ordner lpf_seiten_kurz umfasst 5 HTML-Seiten. Dies entspricht der idealtypischen Gliederung eines Kapitels: Einführung; Vermittlung; Vertiefung; Abfrage; Zusammenfassung. Der Ordner lpf_seiten_lang umfasst 12 HTML-Seiten zur Gestaltung eines längeren Lernpfades. Entscheiden Sie sich für eine Version. 7. Wenn Sie in Ihrem Lernpfad eine Wissensabfrage integrieren wollen, finden Sie unter unter WBT - Inhaltsmuster Muster für Interaktive Tests zum Downloaden, die Sie mit Macromedia Coursebuilder bearbeiten können. 2

3 Projekt in Dreamweaver anlegen 1. Klicken Sie in der Menüleiste von Dreamweaver den Menüpunkt Site / Neue Site an. Es erscheint das Site-Definitions-Fenster. 2. Geben Sie in das Feld Site-Name den Namen Ihres Lernpfads ein. 3. In dem Feld Lokaler Stammordner wird das Verzeichnis auf der Festplatte angegeben, in dem alle zum Lernpfad gehörigen Dateien gespeichert werden. Benutzen Sie dazu den kleinen gelben Ordner (Durchsuchen), indem Sie darauf klicken. 4. Wählen Sie in dem erscheinenden Auswahlfenster Ihr lokales Verzeichnis aus, in dem sich der extrahierte Ordner Template Lernpfad mit der Template Lernpfad befindet, und bestätigen Sie mit Auswählen. 5. Alle weiteren Einstellungen im Site-Definitions-Fenster können Sie auf ihren Standard-Werten belassen und Ihre Einstellungen mit OK bestätigen. 6. Nachdem Sie nun Ihre Site definiert haben, können Sie im aktualisierten Site-Fenster alle Dateien und Ordner sehen, die zu Ihrem Lernpfad gehören. 3

4 Titel vergeben In dem Template Lernpfad sind die Seiten neutral benannt. Damit in der Titelleiste des Browserfensters die korrekte Bezeichnung Ihres Lernpfades erscheint und Suchmaschinen darauf zugreifen können, sollten Sie den Titel Ihrer Index-Seite umbenennen. Gehen Sie folgendermaßen vor: 1. Wählen Sie im Site-Fenster entweder den Ordner lpf_seiten_kurz (5 Seiten) oder lpf_seiten_lang (12 Seiten). (vgl. S.2.6) Klicken Sie auf das +. Die einzelnen Seiten des Ordners werden angezeigt. 2. Öffnen Sie durch Doppelklick die lpf_index.html -Datei. 3. Wählen Sie aus dem Hauptmenü Fenster / Frames. 4. Das Frames-Fenster erscheint. Klicken Sie auf den äußersten Rand, der alle angezeigten Frames umgibt. Wenn dieser Rahmen schwarz wird und im Eigenschafts-Fenster links oben Frameset steht, haben Sie getroffen. Screenshot 5. Ändern Sie nun in der Menüleiste des Hauptfensters im weißen Eingabefeld neben Titel den bestehenden Titel in einen aussagekräftigen für Ihren Lernpfad. 6. Speichern Sie das Frameset ab (Datei / Frameset speichern) ohne einen neuen Namen zu vergeben, da es sonst zu Problemen bei der Verlinkung führen kann. 7. Schließen Sie die Datei. 4

5 Austauschen der Logos Logo links Wenn Sie Ihr eigenes Logo verwenden wollen, haben Sie die Möglichkeit, die im Template verwendeten auszutauschen. Dazu benötigen Sie Ihr Logo als Gif-Datei (kv_institutsname.gif). 1. Öffnen Sie durch Doppelklick im Site-Fenster die Datei lpf_nav.html. 2. Wählen Sie aus der Menüleiste Modifizieren / Seiteneigenschaften" 3. Klicken Sie bei Hintergrundbild" auf Durchsuchen" 4. Wählen Sie den Ordner templates/images/eigene Bilder" und klicken Sie Ihr Logo (kv_institutsname.gif) an. 5. Klicken Sie auf Auswählen" und bestätigen Sie dann im Seiteneigenschaften-Fenster mit OK. 6. Speichern Sie die veränderte Datei ab, ohne einen neuen Namen zu vergeben. 7. Schließen Sie die Datei. Mehr müssen Sie nicht tun. 5

6 Austauschen der Logos Logo oben Das Logo am Bildschirmkopf tauschen Sie direkt auf den zu bearbeitenden Seiten aus. Öffnen Sie im Sitefenster den Ordner lpf_seiten_kurz" bzw. lang". Die folgenden Schritte müssen Sie auf alle in diesem Ordner befindlichen Seiten anwenden. Beginnen Sie mit der Seite lpf_start, ändern Sie dann die Seiten lpf_seite_xx und bearbeiten Sie als letztes die Seite lpf_ende. 1. Öffnen Sie die Seite durch Doppelklick im Site-Fenster. 2. Klicken Sie im oberen Bereich auf das logo_oben"- Logo. 3. Öffnen Sie, falls noch nicht geöffnet, das Eigenschaften-Fenster 4. In der Mitte oben im Eigenschaften-Fenster finden Sie das Eingabefeld Qu." 5. Klicken Sie auf das gelbe Ordnersymbol rechts neben dem Eingabefeld. 6. Wählen Sie den Ordner templates/images/eigene Bilder" und klicken Sie Ihr Logo (institutsname_logo.gif) an. 7. Klicken Sie auf Auswählen". Das Logo ist ausgetauscht. 8. Klicken Sie nun auf Motto : Hier steht das Motto und verfahren Sie genau wie oben, um Ihre Gif-Datei mit dem Titel (vgl. S.2.3) einzusetzen. 9. Speichern Sie die veränderte Seite ab, ohne den Namen der Datei zu ändern. 10. Schließen Sie die Datei. 6

7 Eigene Bilder verwenden Um Ihre eigenen Bilder bzw. Grafiken zu verwenden gehen Sie wie folgt vor: 1. Öffnen Sie Ihre zu bearbeitende Seite in Dreamweaver. 2. Markieren Sie den Platzhalter für Bild_ Öffnen Sie, falls noch nicht geöffnet, das Eigenschaften-Fenster" 4. In der Mitte oben im Eigenschaften-Fenster finden Sie das Eingabefeld Qu." 5. Klicken Sie auf das gelbe Ordnersymbol rechts neben dem Eingabefeld. 6. Wählen Sie den Ordner templates/images/eigene Bilder" und klicken Sie Ihr Bild an. 7. Klicken Sie auf Auswählen". Das Bild ist ausgetauscht. 8. Verfahren Sie genauso mit Bild_02" oder wenn Sie eine Grafik einbinden wollen. 9. Speichern Sie die Seite ab, ohne den Namen der Datei zu ändern. 10. Schließen Sie die Datei. 7

8 Eigenen Text verwenden Falls Ihr Text nur als Word-Dokument vorliegt, speichern Sie ihn nochmals unter Dateityp: Nur Text + Zeilenwechsel (txt-datei). Dadurch verhindern Sie Probleme beim Einfügen des Textes, weil Dreamweaver die Formatierungen nicht erkennen kann. 1. Markieren Sie den Teil des Textes, den Sie auf einer Seite Ihres Lernpfades verwenden wollen. 2. Kopieren Sie diesen Teil in die Zwischenablage (Strg + C). 3. Öffnen Sie Ihre zu bearbeitende Seite in Dreamweaver (z.b. lpf_seite_02 ). 4. Klicken Sie in das bearbeitbare Feld Inhalt_01 5. Markieren Sie den Blindtext (Strg + A) und 6. fügen Sie Ihren kopierten Text an dieser Stelle ein (Strg + V). Sie können aber auch direkt in Dreamweaver Ihren Text an entsprechender Stelle schreiben. 8

9 Text formatieren Um Ihren Text zu formatieren, verwenden Sie das Fenster CSS-Stile. Falls es nicht geöffnet ist, finden Sie es im Hauptmenue unter Fenster. 1. Markieren Sie den Text, den Sie formatieren wollen mit der Maus, und klicken Sie im CSS-Stile -Fenster auf eines der angebotenen Formate. (z.b.: Inhalt1 = normal Inhalt2 = grau Inhalt3 = klein Inhalt4 = klein und grau) Im Hauptfenster können Sie die Veränderungen sehen. 2. Speichern Sie die Seite ab, ohne den Namen der Datei zu ändern. 3. Schließen Sie die Datei. 9

10 Seitenlayout ändern Sie haben die Möglichkeit, verschiedene Seitenlayouts in Ihrem Lernpfad zu verwenden. Die Vorlagen dafür befinden sich im Ordner templates/vorlagen LPF/kurz bzw. lang. 1. Öffnen Sie die HTML-Seite, auf die Sie das neue Seitenlayout anwenden wollen. 2. Klicken Sie in der Menüleiste von Dreamweaver den Menüpunkt Fenster / Vorlagen an. Daraufhin öffnet sich das Elementefenster mit allen Vorlagen dieser Site. Vorlagenvorschau Für die Startseite sowie für die Endseite stehen Ihnen 3 unterschiedliche Vorlagen zur Verfügung: lpf_start_v1; lpf_start_v2; lpf_start_v3. Für die normalen Seiten stehen Ihnen 6 Versionen zur Verfügung: lpf_seite_v1; lpf_seite_v2; lpf_seite_v3; lpf_seite_v4; lpf_seite_v5; lpf_seite_v6. Die Seitenvorlagen für die kurze Lernpfadvorlage besitzen den Zusatz..._kurz. Wenn Sie sich entschieden haben, klicken Sie am unteren Rand links auf den Button Anwenden oder ziehen Sie das Icon per Drag and Drop auf das geöffnete Dreamweaverfenster Ihrer HTML-Seite. Den erscheinenden Warnhinweis können Sie mit OK bestätigen. Dreamweaver übernimmt die zuvor bearbeiteten Bereiche in die neue Vorlage. Achtung: Beim Anwenden von Vorlagen, die z.b. nur den bearbeitbaren Bereich Inhalt_01 haben, gehen Ihre Eingaben in den Bereichen Inhalt_02 und Inhalt_03 verloren. Daher: Sollten Sie mit Ihrer Auswahl nicht zufrieden sein, verwenden Sie Bearbeiten / Rückgängig oder schließen Sie einfach die Datei ohne zu speichern und öffnen Sie Ihre HTML-Datei erneut. So gehen Sie sicher, dass keine Inhalte verloren gehen. 10

11 Seitenanzahl verkürzen Wenn Sie die Anzahl der Seiten Ihres Lernpfads verkürzen wollen, müssen Sie 1. auf allen Lernpfad-Seiten die Anzahl der Seiten in der Navigationsleiste verkürzen und 2. die Navigation anpassen. 1. Wählen Sie im Site-Fenster den Ordner lpf_seiten_lang und öffnen Sie die Datei lpf-ende.htm. 2. Markieren Sie in der Navigationsleiste das vorletzte Kästchen und drücken Sie Entfernen. Screenshot 3. Speichern Sie die veränderte Datei ab, ohne einen neuen Namen zu vergeben. 4. Schließen Sie die Datei. 5. Wählen Sie nun im Site-Fenster die Datei lpf_seite_10.htm und löschen Sie auch dort das vorletzte Kästchen. 6. Speichern und schließen Sie die Datei, ohne einen neuen Namen zu vergeben. 7. Wiederholen Sie diese Schritte für die Dateien lpf_seite_09.htm bis lpf_seite_02.htm und für die Seite lpf_start.htm. 11

12 Navigation anpassen Nachdem Sie die Anzahl der Seiten auf diese Weise verkürzt haben, müssen Sie nun die Navigation anpassen. 1. Wählen Sie im Site-Fenster den Ordner lpf_seiten_lang und öffnen Sie die Datei lpf_ende.htm. 2. Markieren Sie in der Navigationsleiste den Zurückbutton. Screenshot 3. Klicken Sie im Eigenschaftsfenster neben dem Hyperlink-Feld auf das gelbe Ordnersymbol um den Datei suchen -Modus zu starten und wählen Sie die Datei lpf_seite_10.htm aus. 4. Klicken Sie auf Auswählen. 5. Speichern Sie die veränderte Datei ab, ohne einen neuen Namen zu vergeben. 6. Schließen Sie die Datei. 7. Wählen Sie nun im Site-Fenster den Ordner lpf_seiten_lang und öffnen Sie die Datei lpf_seite_10.htm. 8. Markieren Sie in der Navigationsleiste den Weiterbutton. 9. Klicken Sie im Eigenschaftsfenster neben dem Hyperlink-Feld auf das gelbe Ordnersymbol um den Datei suchen -Modus zu starten und wählen Sie die Datei lpf_ende.htm aus. 10. Klicken Sie auf Auswählen. 11. Speichern Sie die veränderte Datei ab, ohne einen neuen Namen zu vergeben. 12. Schließen Sie die Datei. Jetzt haben Sie Ihren Lernpfad von 12 auf 11 Seiten verkürzt, die Navigation ist angepasst. Die Verwendung der Seiten-Vorlagen funktioniert nach wie vor, wie oben beschrieben. (vgl. S.10) Sie sind am Ende des Lernpfades Template Lernpfad verwenden angekommen und sind nun in der Lage, mit Hilfe der Template Lernpfad Ihren eigenen Lernpfad zu erstellen. 12