Navigationsstruktur erstellen mit Dreamweaver CS5

Anhand des Projektes Perücken Lexikon müssen eine Navigation mit Menüüberschriften erstellt werden. Das sind alle Texte, die innerhalb von Boxen stehen und denen eine Klasse mit Farbnamen zugewiesen wurde, mit Ausnahme derer die für die Platzierung der Hyperlinks gedacht sind.

Stellen Sie den Cursor zunächst in die Box hellbraun oben links und schreiben Sie den Text Perücken News. Das Gleiche muss nun natürlich für alle eben angelegten Boxen durchgeführt werden - reine Fleißarbeit.

Nachdem Sie Ihre Texte auf der linken Seite eingefügt haben, stellen Sie fest, dass die Boxen nicht die richtige Breite haben.

Nun ja, genau gesagt wurden noch gar keine Angaben hierzu hinterlegt. Das erledigen Sie später in der CSS-Datei und kümmern sich jetzt nicht weiter darum. Es ist allerdings wieder notwendig, die rechte Seite über den Quellcode zu erstellen, damit Sie den Cursor überhaupt innerhalb der rechten Box platzieren können.

Wenn Sie alle Texte für die Überschriften und Hyperlinks eingegeben haben, stellt sich die Struktur in der Entwurf-Ansicht so dar.

Container positionieren mit Dreamweaver CS5

Eine Struktur ist schon erkennbar, wenn auch noch nicht mit dem endgültigen Inhalt. Zeit, ein wenig zu layouten und allgemeine Regeln für Schriften und Farben festzulegen. Zunächst werden Sie die Boxen für die Navigation nach links und rechts bewegen. Die goldene Mitte soll dem Inhalt vorbehalten sein. Die linke Box soll eine Hintergrundfarbe erhalten, auf der linken Seite stehen bleiben und relative Positionierung und Außenabstände bekommen.

1. Wählen Sie den Menübefehl Formatieren/CSS-Stile/Neu.

Zwar haben Sie bereits IDs im HTML-Dokument vergeben, Dreamweaver scheint davon aber nichts mitbekommen zu haben.

Wählen Sie als Selektor-Typ eine id aus und schreiben Sie als Bezeichnung #links in das Feld Selektor-Name. Im Feld Regel-Definition wählen Sie peruecken.css und bestätigen mit OK.

2. Es öffnet sich das Dialogfeld CSS-Regel-Definition für #links in peruecken.css.

Hier erstellen Sie die CSS-Regel. Tragen Sie in der Kategorie Hintergrund die Farbe #fff1e8 von Hand in das Feld neben der Farbauswahlbox ein.

Wechseln Sie zur Kategorie Box und stellen Sie die Werte entsprechend der Abbildung ein.

3. Nun wechseln Sie noch zur Kategorie Positionierung und stellen die Art der Positionierung auf relative.

Klicken Sie auf die Schalftfläche Anwenden, um das Ergebnis zu begutachten, bevor Sie das Fenster schließen.

Noch ist nicht viel zu sehen. Im Gegenteil: Die linke Box scheint verschwunden zu sein. Wiederholen Sie nun den beschriebenen Vorgang für die rechte Box. Wählen Sie die CSS-Datei aus, denn wir wollen diesmal kopieren und anschließend die Werte ändern.

4. Markieren Sie den ganzen Bereich von #links bis zur dazugehörigen geschweiften schließenden Klammer.

Kopieren Sie ihn und fügen Sie den Inhalt eine Zeile tiefer wieder ein. Löschen Sie #links und schreiben Sie stattdessen #rechts.

Folgende Werte müssen geändert werden:

Ganzen Artikel lesen...

margin-right:-176px;
margin-left:1px;
float:right;

5. Die Box ist genauso breit wie die linke, bei der Positionierung und den Abständen ist das Ganze für die rechte Seite angepasst.

Hier fängt das Problem mit Dreamweaver an, denn die Entwurf-Ansicht zeigt nun nicht mehr das richtige Ergebnis an. In der Browser-Vorschau sowie in der Live-Ansicht ist die Anzeige jedoch in Ordnung.

Das ist natürlich ärgerlich, doch dadurch lassen wir uns jetzt nicht ausbremsen.

Es hat auch sein Gutes, direkt im Quellcode zu arbeiten. Man arbeitet in der Regel sorgfältiger und testet auch öfter im Webbrowser. Die Arbeit in der Entwurf-Ansicht verführt oft dazu, den Browsertest zu vergessen.

6. Als Nächstes erstellen Sie die Formatierung für die Box mit der id #inhalt, in der unser Platzhaltertext liegt. Legen Sie folgende Auszeichnungen fest:

#inhalt{
background-color:#FFFFFF;
position: relative;
margin: 0px; }

Danach formatieren Sie die Box #perueckenbanner mit folgenden Werten:

#perueckenbanner {
height:196px;
text-align: right;
background-color: #e1ddd9;
padding: 0px;
margin: 0px;
margin-bottom:10px;

Diese Box soll zusätzlich ein Hintergrundbild erhalten. Natürlich hätten wir das jetzt auch direkt machen können, doch Ziel dieses Buches ist es natürlich auch, Ihnen die unterschiedlichen Fenster näherzubringen. Von Zeit zu Zeit weichen wir deshalb ein wenig von unserer tatsächlichen Arbeit ab.

7. Möchten Sie später bereits bestehenden Regeln weitere Angaben hinzufügen, bietet sich das Fenster CSS-Stile an. Klicken Sie irgendwo in die Entwurf-Ansicht Ihres HTML-Dokuments. Öffnen Sie das Fenster mit der Gruppe, in der sich auch die CSS-Stile befinden, falls es sich noch nicht auf Ihrem Bildschirm befindet. Wie alle Fenster kann man es im gleichnamigen Menüeintrag (de)aktivieren. Das Fenster zeigt entweder die Regeln des ausgewählten Elements oder alle Regeln, die im Dokument oder in externen verknüpften Dateien abgelegt wurden.

8. Wählen Sie die Schaltfläche Alle und markieren Sie den Eintrag #perueckenbanner.

Sie sehen jetzt darunter die abgelegten Regeln, die Sie in diesem Fenster modifizieren können. Sie können aber auch neue Regeln festlegen. Klicken Sie dazu auf den letzten Eintrag Eigenschaft hinzufügen.

9. Wählen Sie die Eigenschaft background-image, um ein Hintergrundbild zuzuweisen.

Klicken Sie auf das Ordnersymbol, um die Bildquelle auszuwählen. Das Bild sollte sich innerhalb der Site befinden, am besten in einem separaten Ordner. Bei uns heißt der Ordner perueckenbilder. In ihm liegen alle Bilder der Site. Wählen Sie Ihr Bild für den Hintergrund aus. Danach zeigt sich das Bild der Seite wie in der Abbildung.

10. Wie man dem grafischen Entwurf entnehmen kann, soll der Hintergrund der kompletten Seite um die äußere Box herum auch eingefärbt werden. Der <body>-Tag repräsentiert den kompletten sichtbaren Teil einer Seite. Er wird genutzt, um ein paar generelle Einstellungen festzulegen. Es wäre besser, wieder über das Menü Formatieren zu gehen und dort einen neuen Stil für den <body>-Tag zu definieren. Wir möchten jedoch an dieser Stelle zeigen, wie man aus einer nicht so gelungenen Variante wieder eine optimale macht.

11. Klicken Sie deshalb im Eigenschaften-Bedienfeld auf die Schaltfläche Seiteneigenschaften.

Achtung: Die Schaltfläche befindet sich im unteren Teil des Bedienfelds und ist nur sichtbar, wenn kein anderes Seitenelement markiert ist, das diesen Platz im Fenster selbst benötigt. Klicken Sie im Zweifelsfall vorher irgendwo in Ihr Dokument. Nach dem Klick auf die Schaltfläche öffnet sich das Dialogfeld Seiteneigenschaften. Übernehmen Sie die hier eingetragenen Werte.

12. Bestätigen Sie Ihre Eingaben.

Leider hat Dreamweaver die Einträge nicht in der CSSDatei vorgenommen und nicht nur Regeln für den <body>-Tag abgelegt, sondern auch für Tabellenzellen. Sie finden die Auszeichnungen innerhalb eines CSS-Blocks im Dokumentenkopf der Code-Ansicht.

13. Kein Problem, das lässt sich schnell optimieren. Zunächst markieren Sie die drei Zeilen mit den Eigenschaften font-family, font-size und color. Schneiden Sie diese Zeilen aus und fügen Sie sie hinter der Zeile für den margin-bottom wieder ein. Statt in vier Zeilen anzugeben, dass wir auf keiner Seite einen Abstand brauchen, verwenden wir die Kurzschreibweise mit einer Zeile und fügen noch eine weitere Zeile für Innenabstände hinzu. Stellen Sie nun den Cursor mitten in die festgelegten Regeln und klicken Sie auf die rechte Maustaste. Wählen Sie CSS-Stile und anschließend CSS-Regeln verschieben.

14. Geben Sie im folgenden Dialogfeld die externe CSS-Datei als Zielort für die Stile an. Die im HTML-Dokument übriggebliebenen Reste können Sie nun löschen. Das ist der ganze <style>-Block. Ordnung muss sein, deshalb verschieben Sie die Regeln zum <body>-Tag im CSS-Dokument nach ganz oben. Gehen Sie grundsätzlich so vor, dass erst die Stile für Tags, dann die für IDs und schließlich die Klassen und Pseudoklassen abgelegt werden.

Die passende Ergänzung zu diesem Artikel: