Dreamweaver MX 2004 Fortgeschrittene Funktionen

Transkript

1 Dreamweaver MX 2004 Fortgeschrittene Funktionen Inhalt: Aufbau und Strukturierung komplexer Webseiten Webseitengestaltung mit Hilfe von Tabellen Arbeiten mit Vorlagen und Bibliothekselementen Cascading Style Sheets CSS Imagemaps

2 Seite 2 1 Einführung Aufbau des Bildschirms Die Planung einer Website Inhaltliche Struktur Überlegungen zur Webseitengestaltung Aufteilung der Webseite Stylesheets - Grundsätzliches Das Layout der Webseite in einem Template erstellen Layout Site anlegen Ein Template anlegen Tabellenlayout die Rahmentabelle Tabellenlayout die Hauptnavigation Tabellenlayout Unternavigation und Inhalt Tabellenlayout- Fußzeile Stylesheet Style für die gesamte Seite Formatierung der Hauptnavigation Formatieren der Unternavigation Formatieren der Fußzeile Formatieren des Inhaltsfeldes Mögliche Fehlerquellen bei der Formatierung Bearbeitbare Bereiche einfügen Eine Verzeichnisstruktur aufbauen Styles für die Links der Hauptnavigation festlegen Die Unternavigation erstellen / Bibliothekselemente verwenden Die Unternavigation anlegen Formatierung der Unternavigation im Stylesheet Bibliothekselemente erzeugen Bibliothekselemente bearbeiten Die restlichen Unternavigationen erstellen Die Unternavigation Personen Unternavigation Aktuelles und alle weiteren Inhalt einfügen Ein Imagemap erstellen Die Startseite gestalten das Stylesheet erweitern Impressum Das Template ändern... 35

3 Seite 3 1 Einführung Dieses Skript setzt Grundkenntnisse im Umgang mit dem Programm Macromedia Dreamweaver MX 2004 voraus. Dieses Grundwissen können Sie sich mit Hilfe des Selbstlernmaterials Dreamweaver MX 2004 Grundlagen oder in einem Kurs am Pädagogischen Institut aneignen: URL des Selbstlernmaterials: Mit Hilfe dieses Selbstlernmaterials erstellen Sie die Grundstruktur für einen umfangreichen Webauftritt. Als Beispiel dient hier die Webseite einer Klasse (Klassenweb), auf der alles, was für die Schülerinnen und Schüler einer Klasse wichtig und interessant ist, zu finden sein soll. Selbstverständlich werden die Seiten im Beispiel nicht alle mit Inhalten gefüllt; das ist dann die Arbeit, die im Laufe der Zeit von vielen verschiedenen Personen erledigt wird. Falls Sie ein anderes Projekt umsetzen möchten, können Sie dies tun. Sie werden an den entsprechenden Stellen dann aufmerksam gemacht, dass Sie die verwendeten Inhalte einer Seite durch die Ihren ersetzen sollten. 2 Aufbau des Bildschirms Menüleiste Einfügen-Leiste Dokumente-Leiste Bedienfeldgruppe Dokumente Eigenschaften-Fenster Dateien-Fenster

4 Seite 4 3 Die Planung einer Website 3.1 Inhaltliche Struktur Unter einer Website versteht man eine Sammlung von verschiedenen Webseiten, die unter einer Webadresse zu finden sind und die durch eine Navigation untereinander verlinkt sind. Eine gute Website zeichnet sich in erster Line durch eine schnell verständliche Navigation und eine gute Verlinkung aus. Der Seitenbesucher sollte in der Regel mit max. 3 Klicks jede einzelne Webseite eines Webauftritts erreichen können. Das erfordert eine genaue Planung der Navigation und der Inhalte. Erster Schritt sollte aus diesem Grund ein Brainstorming sein, das alle möglichen Inhalte der Webseite zusammenstellt. Dafür eignet sich am besten ein Mindmapping-Programm, zu dem Sie auch Selbstlernmaterialien auf muc.kobis finden. Die Mindmap für das Klassenweb sollte im Idealfall mit der ganzen Klasse erstellt werden und sieht im ersten Schritt zum Beispiel so aus: (Falls Sie ein eigenes Projekt gestalten möchten, sollten Sie jetzt die passende Mindmap anfertigen)

5 Seite 5 In einem zweiten Schritt sucht man nach Gruppierungen und Überbegriffen: Beachten sie dabei, dass Sie nach der Sortierung nicht mehr als 6 Hauptäste plus Impressum (das ist Pflicht auf jeder Webseite) haben sollten. Für die Klassenhomepage reicht eine zweistufige Gliederung. Weitere Untergliederungen werden nicht in der Navigation abgebildet. Nach diesen Vorüberlegungen steht eigentlich auch schon die Navigation für die Webseite fest. Hauptnavigationspunkte sind: Aktuelles, Organisation, Privates, Unterricht, Linklisten, Personen, Impressum. Zu jedem dieser Hauptnavigationspunkte gibt es mehrere Begriffe für die Unternavigation. Die inhaltliche Struktur ist damit fertig. 3.2 Überlegungen zur Webseitengestaltung Der nächste Schritt bei der Entwicklung einer Webseite sind Überlegungen zur Gestaltung der Webseite Aufteilung der Webseite Eine Webseite mit Navigation und Unternavigation wird üblicherweise mit Frames (siehe Selbstlernmaterial: Dreamweaver MX Frames) oder mit Tabellen realisiert. Auf den ersten Blick komplizierter, aber mit vielen Vorteilen für die Webseitennutzer und beim Design, ist die Gestaltung von Webseiten mit Tabellen. Dies ist inzwischen eine der meist verwendetsten Methoden.

6 Seite 6 Grob aufgeteilt, könnte die Webseite so gestaltet sein: Logo Hauptnavigation Unternavigation Text / Inhalt Fußzeile Die Hauptnavigation hat immer den gleichen Inhalt. In unserem Mindmap sind die Bezeichnungen der Hauptäste gleich die Linktexte der Hauptnavigation. Für jeden dieser Hautnavigationspunkte gibt es Unterpunkte, die dann in der Unternavigation angezeigt werden können. Beim Webseitendesign geht man momentan davon aus, dass jedem Nutzer mindestens eine freie Fensterbreite von ca. 760 Pixel zur Verfügung steht, d.h. dass jeder Bildschirm mindestens eine Auflösung von 800*600 Pixel hat Stylesheets - Grundsätzliches Um eine einheitliche Gestaltung zu garantieren, ist es nötig, die verwendeten Formatierungen in einem Stylesheet festzulegen. Ein Stylesheet kann entweder nur für eine Webseite gültig sein (internes Stylesheet) oder als externes Stylesheet mit vielen Dateien verknüpft werden. Stylesheets sind vergleichbar mit Formatvorlagen bei Word. Testen Sie die Möglichkeiten von Stylesheets an einem Beispiel. Starten Sie Dreamweaver und erstellen Sie eine neue HTML-Seite. Erstellen Sie einen Text, den Sie nur mit Hilfe des Format-Feldes und der Aufzählungs-Buttons formatieren. und Speichern Sie die Datei unter dem Namen testseite.htm in einem neuen Verzeichnis dreamweaver_uebung ab.

7 Seite 7 Mit Hilfe von HTML können Texte einfach und schnell strukturiert werden. Jede Formatierung wird im Quelltext von HTML durch sogenannte Tags gekennzeichnet. Ein Tag ist in spitze Klammern eingeschlossen und wird vom Browser nicht angezeigt. Um den Quelltext anzuzeigen, klicken Sie auf den Code- Button in der Dokumenten- Leiste. Jetzt können Sie den HTML-Quelltext sehen. Sie sehen, dass die einzelnen Elemente von Tags umgeben sind. Am Anfang eines Textelementes steht das Anfang-Tag (z.b. <h1> für Überschrift1) und am Ende das Ende-Tag (z.b. </h1>). Für diese Tags können Sie in einem Stylesheet Formatvorlagen definieren. Um eine Formatvorlage definieren zu können, müssen Sie zuerst ein Stylesheet erstellen. Wählen Sie im Menü Text / CSS Stile/ Neu... Wählen Sie als Selektor-Typ Tag. Im Drop-Down-Feld können Sie jetzt ein Tag auswählen. Wählen wir als erstes body für die Einstellungen, die die ganze Seite betreffen. Bei Definieren wählen Sie (Neue Stylesheet-Datei). Im folgenden Dialog werden Sie aufgefordert den Namen der Stylesheet-Datei anzugeben. Wählen Sie style.css und speichern Sie sie im gleichen Verzeichnis wie die HTML- Seite. Hier finden Sie eine Auflistung der wichtigsten Tags, die durch ein Stylesheet formatiert werden können Bezeichnung Dreamweaver Überschrift 1 Überschrift 2 Überschrift 3 Überschrift 4 Überschrift 5 Überschrift 6 Absatz Vorformatiert Aufzählung Tabellenzeile Tabellenzelle nach Tag H1 H2 H3 H4 H5 H6 P PRE LI TR TD

8 Seite 8 Jetzt können Sie die grundsätzlichen Einstellungen für die gesamte Seite vornehmen. Bei der Seiteneinstellung sollten die Schriftart, die Schriftgröße und die Hintergrundfarbe festgelegt werden. Alle anderen Einstellungen sind hier noch nicht sinnvoll. Wählen Sie Ihre Lieblingsschriftart, eine Schriftgröße (10 Pixel) und eine helle Hintergrundfarbe. Bestätigen Sie Ihre Wahl mit OK. Jetzt wird die Seite in dem gewählten Format angezeigt. Falls Sie noch die Codeansicht eingestellt haben, klicken Sie auf Entwurf in der Dokumente-Leiste. Jetzt können Sie noch die anderen Tags mit Formaten versehen. Öffnen Sie die Bedienfeldgruppe CSS- Stile (Menü: Fenster / CSS-Stile), falls sie noch nicht angezeigt wird. Sie sehen, dass in Ihrem Stylesheet schon ein Stil für das Body-Tag definiert ist. Klicken Sie auf den Button, um einen neuen Stil hinzuzufügen. Wählen Sie jetzt das Tag h 1 und geben Sie die Schriftgröße (18 Pixel ) und eine Schriftfarbe an. Bestätigen Sie mit OK. Definieren Sie jetzt noch h2 (16 Pixel) und h3 (14 Pixel) mit Schriftgröße und Schriftfarbe. Wie Sie sehen, wurde die Schriftart von der Seiteneinstellung übernommen.

9 Seite 9 Testen Sie die Formatierung noch für die anderen Tags: <ul> für die Liste mit den Punkten <ol> für die Liste mit der Numerierung. Sie können auch Formatierungen unabhängig von Tags bestimmen. Klicken Sie dafür auf im Style- Fenster und wählen Sie den Selektor- Typ Klasse. Jetzt können Sie einen freien Namen wählen. Geben Sie fett ein. Wählen Sie die Stärke fett und eine andere Textfarbe. Nach dem Klick auf OK steht Ihnen das neue Format fett zur Verfügung. Markieren Sie jetzt den Text, der mit dem Format fett versehen werden soll und wählen Sie im Drop-Down-Menü des Eigenschaften-Fensters den Stil fett. Wenn Sie einen Text über das Eigenschaften-Fenster formatieren, wird auch ein Stil festgelegt. Probieren Sie es einmal aus: Schreiben Sie einen neuen Text, und formatieren Sie diesen mit einer neuen Farbe und Schriftart über das Eigenschaften-Fenster. Es wird ein neuer Stil Stil1 angezeigt. Dieser Stil wird nicht in der Datei style.css abgespeichert. Er ist nur dieser Webseite zugeordnet. In der Bedienfeldgruppe CSS ist er auch extra aufgeführt.

10 Seite 10 Die Stile in der Datei style.css können Sie jetzt auch in anderen Dokumenten verwenden. Erstellen Sie ein neue HTML- Seite mit dem Namen testseite2.htm. Klicken Sie jetzt in der Bedienfeldgruppe CSS auf und wählen Sie über den Durchsuchen-Button das Styleshett style.css aus. Wenn Sie jetzt Text eingeben, wird dieser wie in style.css angegeben formatiert. Der Stil Stil1 ist aber nicht mehr vorhanden, er war nur für das andere Dokument definiert. Probieren Sie es aus... Änderungen am Stylesheet werden sich immer auf alle Dokumente auswirken, die mit dem Stylesheet verknüpft sind. Ändern Sie die Schriftart, die Sie im <body> gewählt haben. Markieren Sie body im CSS-Bedienfeld und klicken Sie auf. Jetzt können Sie über das bereits bekannte Menü die Schriftart ändern. Sie können sehen, dass sich die Schriftart sowohl in der Datei testseite.htm als auch in der Datei testseite2.htm geändert hat. Aus diesem Grund ist es sinnvoll, eine umfangreiche Website mit Hilfe von externen css-stylesheets zu gestalten, da eine Designänderung so wesentlich einfacher umzusetzen ist. Mit Hilfe von Stylesheets sind noch viele weitere Formatierungen möglich. Das würde allerdings den Umfang dieses Kurses sprengen. Eine gute und umfangreiche Anleitung zu Stylesheets und HTML finden Sie bei Selfhtml im Internet unter der Adresse: Weiter unten werden wir auf die Stylesheets zurückkommen.

11 Seite 11 4 Das Layout der Webseite in einem Template erstellen Templates sind Vorlagen für Webseiten, die immer wieder verwendet werden können (vgl. Dokumentvorlagen in Word). Templates in Dreamweaver enthalten sowohl Bereiche, die in den Dokumenten, die das Template (Vorlage) verwenden, nicht verändert werden können als auch editierbare Bereiche. Für die oben erstellte Aufteilung der Seite sollen das Logo, die Hauptnavigation und die Fußzeile auf jeder Seite gleich sein. Die Unternavigation und der Text werden sich auf jeder Seite ändern. 4.1 Layout Site anlegen Erstellen Sie als erstes eine neue Site (Menü Site / Sites verwalten / Neu),. Wählen Sie ein neues, leeres Verzeichnis, in das dann alle Dateien der Website gespeichert werden.

12 Seite Ein Template anlegen Erstellen Sie ein neues Template über das Menü Datei / Neu. Wählen Sie Vorlagenseite / HTML-Vorlage. Speichern Sie die neue Datei gleich unter dem Namen hauptseite ab. Die Frage, ob die Seite auch ohne bearbeitbare Bereiche gespeichert werden soll, bestätigen Sie mit ja, denn darum kümmern wir uns erst später Tabellenlayout die Rahmentabelle Die Aufteilung der Vorlage erfolgt durch ineinander geschachtelte Tabellen. Beginnen Sie jetzt mit der ersten Tabelle. Diese Tabelle teilt das Fenster in 4 Zeilen auf: Die Logozeile, die Hauptnavigation, die Inhalte und die Fußzeile. Weitere Unterteilungen der Inhalte und der Hauptnavigation erfolgt später. Erstellen Sie eine Tabelle, mit 1 Spalte und 4 Zeilen, die eine Breitevon 760 Pixel hat und die Werte für Randstärke, Zellauffüllung und Zellabstand auf 0 setzt. Die erste Zeile soll eine Hintergrundfarbe und ein Logo in der Größe 150x50 Pixel enthalten. Das Logo ist als Beispieldatei (klassenlogo.gif) vorhanden, Sie können aber mit Hilfe eines Bildbearbeitungsprogramms (z.b. Fireworks) auch ein eigenes Logo erstellen. Die Randstärke gibt an, wie breit der Rand einer Tabelle ist, Zellauffüllung gibt den Abstand von Rand zum Text an und Zellabstand den Abstand der Zellen zueinander. Alle Angaben erfolgen in Pixel. Kopieren Sie das Bild in einen neuen Unterordner bilder auf Ihrer Site. Im Bedienfeld Dateien finden Sie das Logo und das Template. Alle Templates werden von Dreamweaver automatisch in das Unterverzeichnis Templates der Site kopiert.

13 Seite 13 Fügen Sie jetzt das Logo in die oberste Zeile ein und platzieren Sie es rechtsbündig. Wählen Sie über das Eigenschaftsfenster für diese Zelle eine Hintergrundfarbe Tabellenlayout die Hauptnavigation Im zweiten Schritt wird die Zeile für das Hauptmenü durch eine Tabelle unterteilt. Es sind 7 Hauptmenüpunkte vorgesehen.deshalb muss die Tabelle 7 Spalten haben (die 8. Spalte ist für den restlichen Platz). Für die Festlegung der Spaltenbreiten benötigen wir eine eigene Zeile. Erstellen Sie also in der 2. Zeile der Rahmentabelle eine neue Tabelle mit 2 Zeilen und 8 Spalten. Legen Sie die Tabellenbreite nicht fest. Alle anderen Angaben bleiben wie oben. Die neue Tabelle kann jetzt formatiert werden. Wenn Tabellen für Layouts verwendet werden, legt man normalerweise die Zellhöhen und Zellbreiten über ein blind.gif fest. Diese Minibilder bestehen aus nur einem durchsichtigen Pixel. Sie sorgen dafür, dass die Tabellenzelle eine Mindestbreite erhält. Die Angabe der Breite für die einzelnen Zellen im Eigenschaftsfenster führt bei komplizierten Tabellen immer zu Chaos und kann in diesem Fall nicht empfohlen werden. Die Datei blind.gif steht für diese Übung zur Verfügung. Kopieren Sie die Datei blind.gif in den Bilderordner und fügen Sie das blind.gif in die Zelle in der ersten Spalte / ersten Zeile ein. Wie gewünscht, ist das Bild unsichtbar. Aus diesem Grund empfiehlt es sich, jetzt mit einem anderen Anzeigemodus zu arbeiten. Wählen Sie in der Einfügen-Leiste den Menüpunkt Layout und dann den Button Erweitert. Jetzt werden die Tabellen etwas größer angezeigt und die Positionierung des Cursors wird einfacher. Die Anzeige entspricht aber nicht mehr dem tastächlichen Layout.

14 Seite 14 Markieren Sie jetzt das unsichtbare Bild in der ersten Zelle und setzen Sie im Eigenschaftenfenster die Bildbreite auf 100 Pixel. Jetzt erscheint ein 100 Pixel breiter Strich. Kopieren Sie den Strich in jede Spalte der ersten Zeile. Verändern Sie die Bildbreite in der letzten Spalte auf 60. Insgesamt ist die Tabelle dann 760 Pixel breit. Sie erkennen, dass das Bild markiert ist an der Änderung des Eigenschaften-Fensters. Nur wenn das Bild markiert ist, können Sie die Breite und die Höhe des Bildes festlegen. Wenn Sie jetzt in den Standard- Anzeigemodus wechseln, sehen Sie die erste Zeile nicht mehr. Sie dient nur der Festlegung der Zellenbreite. Geben Sie jetzt die Titel der Hauptnavigationspunkte ein. Kümmern Sie sich dabei nicht um die Textformatierung. Das erledigen wir mit Hilfe eines Stylesheets Tabellenlayout Unternavigation und Inhalt Jetzt wird das Inhaltsfeld unterteilt. Fügen Sie eine Tabelle mit 3 Spalten und 2 Zeilen ein. Die erste Zeile dient wieder zur Festlegung der Spaltenbreiten, die anderen beiden Zeilen sind für Unternavigation und Inhalt. Schalten Sie in den erweiterten Anzeigemodus. Fügen Sie in der ersten Zeile in Spalte1 ein blind.gif mit der Breite 1 Pixel, in Spalte2 ein blind.gif mit der Breite 150 Pixel und in der Spalte3 ein blind.gif mit der Breite 609 Pixel ein. Die Höhe beträgt jeweils 1. Fügen Sie dann in der Spalte1 Zeile2 ein blind.gif mit der Höhe 500 Pixel und der Breite 1 ein.

15 Seite 15 Schalten Sie zurück in den Standard- Anzeigemodus. Die Größe der Inhaltszeile und deren Aufteilung ist jetzt festgelegt. Beschriften Sie die linke verbliebene Zelle noch mit Unternavigation. Sorgen Sie mit Hilfe des Eigenschaften- Feldes dafür, dass die Beschriftung links oben angezeigt wird. Die Zelle mit dem eigentlichen Inhalt muss noch einmal aufgeteilt werden, um den Abstand des Textes von den Navigationszellen festzulegen. Fügen Sie eine neue Tabelle mit 2 Spalten und 2 Zeilen ein und schalten Sie dann in den erweiterten Anzeigemodus. Mit Hilfe von blind.gif können sie jetzt den Abstand des Textes (2. Zeile, 2. Spalte) vom Rand festlegen. Fügen Sie in der 1.Zeile 1. Spalte ein blindgif mit 10*10 Pixeln ein und in die 2.Spalte ein blind.gif mit 599*10 Pixeln. Schalten Sie zurück in den Standardmodus und geben Sie in das Inhaltsfeld (2. Zeile, 2. Spalte) das Wort Inhalt ein Tabellenlayout- Fußzeile In der Fußzeile soll das Copyright und das Datum der letzten Änderung angezeigt werden. Geben Sie einen entsprechenden Text ein. Das aktuelle Datum fügen Sie über den Menüpunkt Einfügen / Datum, das Copyrightzeichen über den Menüpunkt Einfügen/HTML/Sonderzeichen ein. Jedesmal, wenn Sie die Datei speichern, wird das Datum automatisch aktualisiert.

16 Seite Stylesheet Mit Hilfe eines externen Stylesheets wird nun die Gestaltung der Seite verbessert Style für die gesamte Seite Erstellen Sie zu dem Template ein Stylesheet. Wählen Sie dazu im Menü Text/CSS-Stile/Neu. Erstellen Sie einen Style für das body-tag. Speichern Sie die Datei unter dem Namen style.css in Ihrer Site im neuen Unterverzeichnis style im Wurzelverzeichnis Ihrer Site. Legen Sie für das gewählten body-tag die Schriftart und Schriftgröße (12 Pixel) fest und bestätigen Sie mit OK. Jetzt hat sich in Ihrem Template die Schriftart verändert Formatierung der Hauptnavigation Als nächstes wird das Format für die Hauptnavigationsleiste festgelegt. Dafür soll zuerst eine Klasse hauptnavigation erstellt werden.klicken Sie auf im Bedienfeld CSS und erstellen Sie eine neue Klasse hauptnavigation. Legen Sie für die Hauptnavigation die Schriftfarbe und die Hintergrundfarbe fest. Wählen Sie zusätzlich im Unterpunkt Block die Textausrichtung Mitte. Anmerkung: Die Stile des Typs Klasse können jedem beliebigen Tag in einem HTML-Dokument zugeordnet werden. Die Textgröße und Schriftart ist schon über das body-tag für die gesamte Seite festgelegt und vererbt sich auf alle untergeordneten Tags.

17 Seite 17 Markieren Sie alle 16 Tabellenzellen der Hauptnavigation (am besten im erweiterten Modus) und weisen Sie über das Eigenschaftsfeld das Format hauptnavigation zu. Später werden wir das Format noch ergänzen. Jetzt hat die Navigationszeile im Template das neue Format Formatieren der Unternavigation Für die Unternavigation soll ein weiterer Stil unternavigation angelegt werden. Gehen Sie wie bei der Hauptnavigation vor. Legen Sie im ersten Schritt nur die Hintergrundfarbe fest. Veränderungen können jederzeit vorgenommen werden. Das Format unternavigation soll der Tabellenzelle mit der Unternavigation zugeordnet werden. Um diese zu markieren klicken Sie einfach irgendwo in die betreffende Zelle und danach am unteren Rand auf das betreffende Tag im Tag-Selektor. In diesem Fall wäre es das Tag <td>. Markieren Sie die Zelle für die Unternavigation und weisen Sie dieser den Stil unternavigation zu. <tr> kennzeichnet die Zeile in der die Tabellenzelle ist, <table> die Tabelle. ( Davor befinden sich das <td> Tag der Zelle, in die die ganze Tabelle in der übergeordneten Tabelle eingebunden ist, etc. ) Testen Sie die Zuordnung durch Anklicken der einzelnen Tags Formatieren der Fußzeile Erstellen Sie einen Stil fusszeile mit der geleichen Hintergrundfarbe wie die Unternavigation und weisen Sie diesen der Tabellenzelle mit der Fußzeile zu.

18 Seite Formatieren des Inhaltsfeldes Erstellen Sie einen Stil inhalt (sehr helles grau als Hintergrundfarbe) und weisen Sie diesen der Tabellenzelle mit dem Inhalt zu. 4.3 Mögliche Fehlerquellen bei der Formatierung Sehen Sie sich die Seite in der Browservorschau an. Es gibt einige Punkte, an denen die Formatierung scheitern kann: Wichtig ist, dass bei der Formatierung mit blind.gifs bei den Tabellen weder Breite noch Höhe angegeben ist. Bei der Arbeit mit Tabellen ergibt sich aber oft, dass man durch Verziehen der Tabellenrahmen automatisch Tabellenbreiten bzw. Tabellenhöhen festlegt. Sie können diese Festlegungen löschen, indem Sie die betreffende Tabelle markieren (am leichtesten über den Tag- Selektor s.o.) und dann im Eigenschaften- Fenster die Buttons für Breite löschen und Höhe löschen anklicken. In den meisten Fällen ist damit das Problem behoben. Eine andere Fehlerquelle sind Tabellenzellen, die unbeabsichtigt Leerzeichen (HTML-Code: ) oder Absatztags enthalten (<p>,</p>). Diese können nur in der Code-Ansicht gelöscht werden.

19 Seite Bearbeitbare Bereiche einfügen Jetzt werden die Bereiche festgelegt, die später auf den Seiten, die über das Template erstellt werden, verändert werden können. Alle nicht freigegebenen Bereiche können bei den aus den Templates abgeleiteten Seiten nicht verändert werden. Markieren Sie das Wort Inhalt und wählen Sie dann im Menü Einfügen/ Vorlagenobjekte Bearbeitbarer Bereich. Wählen Sie für den Bereich den Namen Inhalt. Wiederholen Sie den Vorgang für die Unternavigation. Die beiden bearbeitbaren Bereiche sind jetzt blau gekennzeichnet. 4.5 Eine Verzeichnisstruktur aufbauen Eine umfangreiche Website, wie die hier geplante Klassenhomepage, muss auch auf Dateiebene gut organisiert sein. Es empfiehlt sich die Verzeichnisstruktur wie die Navigation aufzubauen. In diesem Beispiel werden also 7 Unterverzeichnisse benötigt. Erzeugen Sie diese Unterverzeichnisse und benennen Sie diese wie in der Hauptnavigation. Schreiben Sie Verzeichnis- und Dateinamen immer klein und verwenden Sie keine Sonderzeichen oder Umlaute.

20 Seite 20 Erstellen Sie im Verzeichnis aktuelles die Startseite für diesen Bereich: Wählen Sie hierfür im Menü Datei/Neu und im folgenden Dialog das Register Vorlagen und dort die zuvor erstellte Vorlage hauptseite. Klicken Sie auf OK. Jetzt wird die Seite anhand der Vorlage erstellt. Sie enthält automatisch alle Elemente, die auch die Vorlage enthält. Speichern Sie die neue Seite im Verzeichnis aktuelles unter dem Namen aktuelles.htm. In der neuen Datei können Sie nur die beiden bearbeitbaren Bereiche verändern. Geben Sie im Inhalt-Bereich einen kurzen Text ein, der die Seite als Startseite für aktuelles erkennbar macht. Wiederholen Sie diesen Vorgang für alle anderen Bereiche. Benennen Sie die erstellten Seiten jeweils nach dem Bereich. Öffnen Sie jetzt das Template hauptseite.dwt wieder. Jetzt können Sie die Links in der Hauptnavigation ergänzen. Verlinken Sie Aktuelles mit aktuelles.htm, Personen mit personen.htm etc. Speichern Sie die Änderungen. Dreamweaver teilt Ihnen jetzt mit, dass durch die Änderungen des Templates die zuvor erstellten Webseiten angepasst werden sollten. Bestätigen Sie durch Anklicken des Buttons Aktualisieren. Das folgende Fenster zeigt Ihnen den Status der Aktualisierung an. Sie können es am Ende des Vorganges einfach schließen.

21 Seite 21 Öffnen Sie die Datei aktuelles.htm. Jetzt sind auch dort die Links eingetragen. Gehen Sie in die Browservorschau und testen Sie die Funktion. Die Navigation funktioniert! 5 Styles für die Links der Hauptnavigation festlegen Für die Gestaltung von Links müssen mehrere Formate beschrieben werden: a:link a:hover a:visited a:active Format für einen noch nicht besuchten Link Format für einen Link, über dem gerade der Mauszeiger ist Format für einen bereits besuchten Link Format für momentan angeklickte Links Die Hauptnavigation und die Unternavigation werden für diese Formattypen jeweils unterschiedliche Formate bekommen. Beginnen wir mit der Hauptnavigation. Öffnen Sie die Datei unterricht.htm. Sie können auch jede andere Seite verwenden, die das Stylsheet und das Template verwendet. Die Veränderungen werden sich auf alle diese Seiten auswirken. Erstellen Sie einen neuen Stil.hauptnavigation a:link. Klicken Sie dazu auf im Stile-Fenster und wählen Sie den Selektor-Typ erweitert. Geben Sie hauptnavigation a:link als Selektor ein. (der Punkt am Anfang ist wichtig!). Fügen Sie den neuen Stil in der Datei style.css ein. Jetzt können Sie das Format für einen noch nicht besuchten Link in der Hauptnavigation festlegen. Wählen Sie die Schriftfarbe schwarz. Erzeugen Sie auf die gleiche Weise die folgenden Formate:.hauptnavigation a:hover Hintergrund schwarz, Schriftfarbe: gelb.hauptnavigation a:visited Schriftfarbe: grau.hauptnavigation a:active Hintergrundfarbe: hellgelb Sie können selbstverständlich eigene Farben wählen. Achten Sie nur darauf, dass sich bei a:hover die Hintergrundfarbe deutlich ändert. Testen Sie die neuen Formate in der Browservorschau.

22 Seite 22 6 Die Unternavigation erstellen / Bibliothekselemente verwenden 6.1 Die Unternavigation anlegen Der Hauptnavigationspunkt Unterricht hat laut der Mindmap, die dieser Website zugrunde liegt (siehe Seite 4), viele Unterpunkte, die in einer Unternavigation auswählbar sein sollen. Da diese Unternavigation auf allen Webseiten zum Hauptnavigationspunkt Unterricht enthalten sein sollen, lohnt es sich ein Bibliothekselement mit dieser Unternavigation zu erstellen. Öffnen Sie zunächst die Datei unterricht.htm. Löschen Sie das Wort Unternavigation und fügen Sie in den bearbeitbaren Bereich unternavigation eine neue Tabelle mit 2 Spalten und 10 Zeilen ( Anzahl der Menüpunkte +3 ) ein. Wählen Sie für die Ausrichtung der Tabelle im Eigenschaftsfenster rechts. Gehen Sie dann in den erweiterten Modus für Tabellen Und fügen Sie folgende blind.gifs ein: 1. Spalte, alle Zeilen: Höhe 25, Breite 1 2. Spalte, 1. Zeile: Höhe 1 Breite 130

23 Seite 23 Jetzt geben Sie in der 2. Zeile, 2. Spalte die Überschrift Unterricht und ab der 4. Zeile die einzelnen Unternavigationspunkte (in diesem Beispiel: Deutsch, Englisch, Mathematik, Physik, Religion, Sport und Projekte) ein. Jetzt fehlen noch die zu den jeweiligen Punkten passenden Seiten, die verlinkt werden sollen. Erstellen Sie dazu im Verzeichnis Unterricht je ein Unterverzeichnis mit dem entsprechenden Namen (am besten in Kleinbuchstaben). Erstellen Sie dann in jedem Unterordner eine Datei mit gleichem Namen (Extension.htm) über das Menü Datei / Neu verwenden Sie jeweils die Vorlage hauptseite.dwt. Schreiben Sie in das Inhaltsfeld jeweils einen passenden Text. Auf den Seiten fehlt natürlich noch die Unternavigation. Sie werden sehen, dass diese später ganz leicht eingefügt werden kann. Sie können auch die zuerst erstellte Seite unter anderen Namen immer wieder abspeichern. Dreamweaver passt dann die in der Vorlage enthaltenen Links entsprechend an (es wird nachgefragt). Öffnen Sie jetzt wieder die Seite unterricht.htm und verlinken Sie in der neuen Unternavigation die soeben erstellten Seiten unter den passenden Stichwörtern. Testen Sie die Funktion Ihrer Website in der Vorschau. Die Seiten sport.htm etc. haben noch keine Unternavigation; das erledigen wir gleich.

24 Seite Formatierung der Unternavigation im Stylesheet Legen Sie jetzt die Formate.unternavigation a:link.unternavigation a:active.unternavigation a:hover.unternavigation a:visited als erweiterte Stile fest. Wählen Sie auch hier für a:hover eine Farbe, die sich deutlich von der ursprünglichen Hintergrundfarbe unterscheidet. Gehen Sie vor wie bei der Hauptnavigation beschrieben. (Kapitel 5). Legen Sie noch einen erweiterten Stil.unternavigation h1 fest, mit dem Sie die Überschrift 1 der Navigation formatieren. Wählen Sie eine Schriftgröße von 14 Pixel und die Stärke fett. Markieren Sie dann die Überschrift Unterricht in der Unternavigation und weisen Sie dem Text das Format Überschrift 1 zu. Nachdem die ganze Tabelle dem Stil unternavigation zugeordnet ist, wird damit auch das erweiterte Format.unternavigation h1 für diese Überschrift verwendet (ist kein Stil zugewiesen wird das Standardformat h1 verwendet).

25 Seite Bibliothekselemente erzeugen Die soeben erstellte Tabelle sollte jetzt in alle anderen Webseiten zum Thema Unterricht eingefügt werden. Wenn Sie die Tabelle durch Kopieren und Einfügen auf die anderen Webseiten bringen, müssten Änderungen an der Tabelle auf jeder einzelnen Seite wiederholt werden. Das ist sehr fehleranfällig und vor allem eine nicht wirklich sinnvolle Arbeit. Besser ist es, dies mit Hilfe von Bibliothekselementen zu realisieren. Markieren Sie die gesamte Tabelle (am besten über die Tag-Leiste am unteren Seitenrand) und wählen Sie dann im Menü Modifizieren/ Bibliothek Objekt in Bibliothek einfügen. Achtung: Bestätigen Sie die Warnung, dass die Gestaltung von einem Stylesheet abhängt, das nicht mit dem Bibliothekselement gespeichert wird, mit OK. Die erwähnten Nachteile werden später erläutert. Im Elementefenster der Bedienfeldgruppe erscheint ein neues Bibliothekselement. Das Bibliothekselement soll den Namen untermenue_unterricht erhalten. Geben Sie diesen ein. Alle Bibliothekselemente für die aktuelle Site finden Sie in der Bedienfeldgruppe Dateien im Fenster Elemente. Klicken Sie auf den Button. Die Tabelle ist jetzt grau hinterlegt und kann so nicht mehr bearbeitet werden. Öffnen Sie jetzt eine weitere Seite aus dem Bereich Unterricht, z.b. englisch.htm. Löschen Sie den Text Unternavigation und ziehen Sie statt dessen mit der Maus das neue Bibliothekselement in den bearbeitbaren Bereich. Alternativ können Sie auch den Cursor in dem bearbeitbaren Bereich positionieren, das Bibliothekselement markieren und dann über den Button einfügen. Wiederholen Sie den Vorgang für alle bereits im Ordner unterricht angelegten Webseiten: deutsch.htm, mathematik.htm, physik.htm, religion.htm, sport.htm, projekte.htm

26 Seite 26 Speichern Sie Ihre Änderungen und testen Sie das Ergebnis in der Browservorschau. Schließen Sie dann im Dreamweaver alle Webseiten. 6.4 Bibliothekselemente bearbeiten Trotz sorgfältiger Planung ergeben sich für die Navigation einer Website im Lauf der Zeit Änderungen. Nehmen wir einmal an, dass der Fachbereich Chemie auch Informationen ins Netz stellen möchte. Dazu muss die Unternavigation erweitert werden. Erstellen Sie eine neue Webseite aus unserer Vorlage hauptseite und speichern Sie diese im neuen Unterverzeichnis unterricht\chemie. Ergänzen Sie das Untermenü durch das Bibliothekselement untermenue_unterricht. Gehen Sie vor wie unter 6.3 beschrieben. Jetzt fehlt noch der Link auf die neue Seite im Untermenü. Markieren Sie das Bibliothekselement untermenue_unterricht im Elementefenster der Bedienfeldgruppe Dateien. Klicken Sie auf den Bearbeiten-Button am unteren Ende des Fensters.

27 Seite 27 Jetzt wird das Bibliothekselement im Editor angezeigt. Wie Sie sehen, sind alle Formatierungen verschwunden. Das liegt daran, dass das Stylesheet mit der Vorlage und nicht mit dem Bibliothekselement verbunden ist. Auf diesen Effekt wurde schon beim Abspeichern des Bibliothekselements hingewiesen. Es ist aber sinnvoll, das Bibliothekselement nicht mit einem eigenen Stylesheet zu verknüpfen, um ein Überschreiben von Styles zu verhindern. Sobald das Element in eine Seite eingebunden wird, werden die dort definierten Stile angewandt. Ignorieren Sie die Formatierung und fügen Sie am Ende der Tabelle eine neue Zeile ein. Setzen Sie in der ersten Spalte ein blind.gif mit der Höhe 25 und der Breite 1 und schreiben Sie in der zweiten Spalte das Wort Chemie. Verlinken Sie Chemie mit der neu erstellten Seite chemie.htm. Speichern Sie das Bibliothekselement. Jetzt durchsucht Dreamweaver alle Dateien der Site nach diesem Element und bietet an, alle Dateien zu aktualisieren. Erlauben Sie das durch Klicken auf den Button Aktualisieren. Die Änderungen werden auf allen Seiten übernommen. Testen Sie das Ergebnis in der Browservorschau. Aktivieren Sie dafür das Fenster mit der Datei chemie.htm und klicken Sie dann auf Browservorschau.

28 Seite 28 Die Unternavigation ist auf allen Seiten ergänzt. Wie Sie sehen, ist durch die Verknüpfung mit dem Stylesheet auf den Seiten auch die Unternavigation wieder korrekt formatiert. 7 Die restlichen Unternavigationen erstellen 7.1 Die Unternavigation Personen Legen Sie wie in Kapitel 6.1 beschrieben eine weitere Unternavigation für den Bereich Personen mit den in der Mindmap aufgelisteten Unterpunkten an. Hier in Kürze noch einmal die Schritte: Tabelle im Untermenü der Datei personen.htm anlegen Stichpunkte und Überschrift eintragen Startseiten für die einzelnen Unterpunkte anlegen Die Seiten in der Tabelle verlinken Die Tabelle als Bibliothekselement untermenue_personen abspeichern Das Bibliothekselement auf allen Seiten einfügen Die Formatierung der Unternavigation (Kapitel 6.2) muss nicht noch einmal erfolgen.

29 Seite 29 So sollte das Ergebnis in der Browservorschau aussehen. Tipp: Wenn Sie sich die Arbeit bei der Erstellung der Tabelle zur Unternavigation erleichtern möchten, gehen Sie wie folgt vor. Öffnen Sie die Seite, in der Sie die Unternavigation erstellen möchten, und fügen Sie das Bibliothekselement unternavigation_unterricht ein. Markieren Sie dann das Element und klicken Sie auf den Button von Original trennen. Jetzt ist die Tabelle von der Bibliothek getrennt (d.h. sie wird auch nicht mehr aktualisiert) und kann dadurch verändert werden. Geben Sie Ihre neuen Menüpunkte ein und verlinken Sie diese. Anschließend können Sie aus dieser Tabelle ein neues Bibliothekselement erstellen. 7.2 Unternavigation Aktuelles und alle weiteren Auch für die Unternavigation der anderen Hauptnavigationspunkte kann der Vorgang wiederholt werden. Allerdings ist es beim Unterpunkt aktuelles nicht unbedingt sinnvoll, jeweils ein neues Verzeichnis zu erstellen, da die einzelnen Unterpunkte in den meisten Fällen mit einer Webseite abgehandelt werden können. Zur Vereinfachung können alle Webseiten im Verzeichnis aktuelles abgespeichert werden. Erstellen Sie die Unternavigation für die restlichen Hauptnavigationspunkte.

30 Seite 30 8 Inhalt einfügen Beachten Sie beim Einfügen der Inhalte bitte, dass Urheberrecht und Persönlichkeitsschutz auch für Schulwebseiten gelten und beachtet werden müssen. So dürfen Sie nur mit schriftlicher Genehmigung der betroffenen Personen bzw. deren Erziehungsberechtigten Fotos und persönliche Daten (auch Namen) ins Internet einstellen. Genauere Informationen finden Sie zu diesem Thema auf muc.kobis unter Ein Imagemap erstellen Zu jedem Schüler / jeder Schülerin könnte unter dem Unterpunkt SchülerInnen im Untermenü Personen ein Steckbrief verlinkt sein. Das kann über eine Namensliste erfolgen oder auch über ein Bild. Für diese Seite wird ein Klassenfoto (siehe Vorlagen klassenfoto.jpg) verwendet. Es könnte aber auch ein eingescanntes Blatt mit den Unterschriften der SchülerInnen oder ähnliches verwendet werden. Kopieren Sie das Bild in einen neuen Ordner personen/bilder. Öffnen Sie die Seite schueler.htm und setzen Sie das Klassenfoto in den Inhaltsbereich. Da im Unterpunkt Personen u.u. sehr viele Bilder eingesetzt werden, wird für diese im Untermenü ein eigener Bilderordner angelegt. Bevor wir die einzelnen SchülerInnensteckbriefe verlinken können, müssen die entsprechenden Seiten erstellt werden. Hier ist es sinnvoll, das Template nicht zu verwenden, um den SchülerInnen freie Gestaltungsmöglichkeiten zu lassen. Im Allgemeinen werden diese Seiten wohl außerhalb der Site als Einzelseiten von den SchülerInnen entworfen und dann in das schueler-verzeichnis kopiert. Für unseren Test erzeugen Sie bitte 4 SchülerInnenseiten ohne Template (Einfache HTML-Seite) mit den Namen: giselameier.htm ulfmueller.htm korbinianhuber.htm elfriedeklinger.htm im Verzeichnis personen/schueler. Schreiben Sie gleich die Namen auf die Webseite, damit Sie die Seiten unterscheiden können.

31 Seite 31 Jetzt können Sie Bildausschnitte des Klassenfotos mit den neuen Dateien verknüpfen. Lassen Sie sich die Datei schueler.htm wieder anzeigen und markieren Sie das Bild. Im Eigenschaften-Fenster finden Sie 3 Werkzeuge, um Bildbereiche zu markieren: kreisförmige Markierung Rechteckige Markierung Polygonmarkierung Diese Markierungen werden Hotspots genannt. Aktivieren Sie das Polygonwerkzeug durch Anklicken des Buttons und markieren Sie ein Mädchen auf dem Klassenfoto indem Sie die Randpunkte nacheinander anklicken. Markierungen können durch Verziehen der Randpunkte verändert werden. Eine Markierung kann gelöscht werden, indem Sie den Button zum Auswählen von Hotspots und dann die Taste Entf betätigen. Jetzt können Sie den neuen Hotspot mit einem Link versehen. Verlinken Sie den markierten Hotspot im Eigenschaftsfenster mit der Datei giselameier.htm. Nachdem die Schülerseiten nicht mit der Navigation versehen sind und die Seiten auch eigentlich private Seiten sind, empfiehlt es sich, mit der Seite ein neues Browserfenster öffnen zu lassen. Wählen Sie hierfür als Ziel _blank.

32 Seite 32 Wiederholen Sie den Vorgang für weitere 3 SchülerInnen und verknüpfen Sie diese mit den anderen Schülerseiten. Vergessen Sie nicht, jeweils das Ziel _blank anzugeben. Speichern Sie alle Seiten (Datei / alles speichern ) und testen Sie die Funktion in der Browservorschau. Sobald sich die Maus über die Hotspots bewegt, wird der Mauszeiger zu der Hand, die einen Link anzeigt. Wenn Sie auf den Hotspot klicken, öffnet sich ein neues Fenster mit der verlinkten Seite. Jetzt soll noch der Name der Person erscheinen, über deren Hotspot gerade der Mauszeiger steht. Leider funktioniert die Anzeige des Namens nur im Internet Explorer. Markieren Sie hierfür nacheinander alle Hotspots und geben Sie im Eigenschaften- Fenster den jeweiligen Namen im Feld Alt ein.

33 Seite 33 Testen Sie die neue Funktion in der Browservorschau mit dem Internet Explorer. Jetzt wird, wenn die Maus über einem Hotspot ist, der Name angezeigt. 8.2 Die Startseite gestalten das Stylesheet erweitern Für die Startseite einer Homepage empfiehlt es sich, immer aktuelle Informationen bereit zu stellen. Eine Website wird umso besser genutzt je mehr sich auf den ersten Blick von Besuch zu Besuch ändert. Im Fall der Klassenwebsite könnten dies aktuelle Projektergebnisse oder Hinweise auf aktuelle Termine und Ereignisse sein. Nehmen wir das Beispiel Skilager. Die Klasse soll in 2 Wochen ins Skilager fahren. Auf der Startseite der Klassenhomepage findet man jetzt alle Informationen dazu. Legen Sie eine Seite index.htm im Rootverzeichnis des Projektes an. Verwenden Sie dafür das Template hauptseite. Geben Sie erste Informationen zum Skilager ein. Formatieren Sie den Text ausschließlich mit Standardformaten, die Dreamweaver im Eigenschaften-Fenster unter Format anbietet. Wenn das Format nicht Ihren Wünschen entspricht, können Sie dies gleich mit Hilfe des Stylesheets ändern.

34 Seite 34 Sie sehen, dass die Überschrift im Verhältnis zum Text sehr groß ist. Erstellen Sie für die von Ihnen verwendeten Überschriftformate (Überschrift 1-6) sinnvolle Stile. Zur Erinnerung: Einen neuen Stil können Sie durch einen Klick auf den Button im Stile-Fenster der Bedienfeldgruppe erstellen. Wählen Sie den Selector-Typ Erweitert und dann in der Auswahl.inhalt h1 (Format für die Überschrift 1 im Kontext inhalt). Die Bedeutung der einzelnen, hier nicht erklärten Tags können Sie in der Dreamweaver-Online-Hilfe oder bei selfhtml finden: Jetzt geben Sie das neue Format für H1 an. Wählen Sie die Schriftgröße 14 Pixel, die Stärke fett und eine Farbe für die Schrift aus. Das Ergebnis können Sie nach der Bestätigung Ihrer Eingabe mit OK sofort sehen. Da Sie für die Unternavigation H1 extra definiert haben, ändern sich dort die Einstellungen nicht. Testen Sie in der Browservorschau.

35 Seite Impressum Ein Impressum ist auf allen Webseiten von öffentlichen Einrichtungen Pflicht. Das Impressum muss zwar nicht auf jeder Webseite angebracht werden, jedoch muss es deutlich erkennbar und leicht zugänglich sein. Dies ist gewährleistet, wenn von der Startseite auf eine entsprechende Unterseite direkt verlinkt wird, die die entsprechenden Angaben enthält. Enthalten sein müssen: die Postanschrift und elektronische Anschrift der Schule, die Schulleitung, der Schulträger und dessen Anschriften (Postanschrift und ); auch die die Klassenhomepage betreuende Lehrkraft muss angegeben werden. Öffnen Sie die Seite Impressum und geben Sie die erforderlichen Daten ein. Verlinken Sie in der Unternavigation die Startseite. Anmerkung: Für die Unternavigation können Sie eines der Bibliothekselemente verwenden, dieses dann vom Orginal trennen und verändern. 9 Das Template ändern Wie Sie vielleicht festgestellt haben, gibt es keinen Link auf die Startseite in der Hauptnavigation. Um diesen Link einfügen zu können, muss das Template hauptseite geändert werden. Öffnen Sie das Template entweder über das Dateien-Fenster in der Bedienfeldgruppe (Unterverzeichnis Templates ) oder Über die Elemente-Übersicht im Dateien- Fenster durch Anklicken des Buttons Templates, Auswählen des Templates und Anklicken des Bearbeiten-Buttons.

36 Seite 36 Jetzt können Sie den Link einfügen. Markieren Sie das Klassenlogo und verlinken Sie es mit der Startseite. Speichern Sie das Template. Jetzt sucht Dreamweaver alle Webseiten, die das Template verwenden und bietet an, diese zu aktualisieren. Klicken Sie auf Aktualisieren. Speichern Sie alle Änderungen über den Menüpunkt Datei / alles Speichern. In der Browservorschau können Sie das Ergebnis testen. Ein Klick auf das Klassenlogo (egal welche Seite gerade angezeigt wird) lässt die Startseite erscheinen. Sollte die Aktualisierung einmal aus Versehen nicht vorgenommen worden sein, können Sie jederzeit über den Menüpunkt Modifizieren / Vorlagen /Seiten aktualisieren die Aktualisierung von Hand anstoßen. Die Änderungen in der Vorlage müssen zuvor gespeichert sein. Jetzt sollten Sie in der Lage sein, die in diesem Selbstlernmaterial aufgebaute Website zu pflegen. Für die einzelnen Arbeitsschritte können Sie immer auf die entsprechenden Kapitel dieses Skripts zurückgreifen. Für den Bereich Unterricht könnte es nötig werden, Unter-Unternavigationen für jedes Fach einzurichten. Gehen Sie dabei wie für Unternavigationen beschrieben vor. Falls Sie Ungereimtheiten oder Fehler im Skript entdecken oder andere Anregungen haben, schicken Sie mir bitte eine uta.conrad@pi.musin.de