Dreamweaver für Einsteiger

Die Dreamweaver Programmoberfläche
Texte und Bilder formatieren
Seitenlayout mit Tabellen
Bilder und Farben
Einführung in einfache Javascripte
HTML Quellcode
Veröffentlichen von Webprojekten
Gifanimationen, Hintergrundbilder und Imagemaps
Über die Grundlagen hinaus
Literaturhinweise und weiterführende Informationen

Die Layoutmöglichkeiten, die uns HTML anbietet sind begrenzt und nicht zu vergleichen mit DTP-Programmen wie Quark X-Press oder Adobe InDesign. Eine Lösung für dieses Problem sind Tabellen. Diese werden in der HTML-Programmierung genutzt, um Texte, Bilder und andere Objekte auf der Seite anzuordnen. Tabellen werden von allen gängigen Browsern korrekt angezeigt.

Technik

Tabellen formatieren

Eine Tabelle besteht aus mehreren Tabellenzellen. Diese formatieren Sie über die Eigenschaftenpalette.

Die obenstehende Abbildung erhalten Sie, wenn die Tabelle selbst markiert ist, der Cursor (Mauszeiger) aber nicht in der Tabelle steht.
Die Zellauffüllung bezieht sich auf den Abstand in Pixeln zwischen Zellinhalt und Zellrand. Der Begriff Zellraum beschreibt den Abstand in Pixeln zwischen den einzelnen Zellen einer Tabelle. Geben Sie im Eingabefeld Ausrichten an, wie die Tabelle an anderen Elementen im gleichen Absatz, beispielsweise Text oder Bildern, ausgerichtet werden soll. Der Wert "0" in Eingabefeld Rahmen sorgt dafür, dass die Tabelle ohne Rand dargestellt wird.

Diese Abbildung erhalten Sie, wenn Sie Elemente innerhalb einer Tabelle markiert haben, der Mauscursor also in einer Tabellenzelle blinkt. Hier können Sie die Inhalte der Tabellenzelle ändern. Die vertikale Ausrichtung benutzen Sie z.B. dazu, Zellinhalte an den oberen Rand der Zelle zu setzen.

Aufgabe

Erstellen Sie eine einfache Seite mit Hilfe von Tabellen.
Bauen Sie die Vorlage tabellenuebung_vorlage.html nach.

Schritt für Schritt

1. Erstellen Sie sich für diese Aufgabe einen neuen Ordner, nennen Sie den Ordner "Tabellenübung".

2. Kopieren Sie die Bilder und Rohtexte von Ihrer Schulungs-CD oder dem sfk-Supportserver aus dem Verzeichnis "dreamweaver1/tabellen/material" in den soeben erstellten Ordner.

3. Erstellen Sie in Dreamweaver eine neue Datei und sichern Sie die Datei unter dem Namen "tabellenuebung.html" in den Ordner Tabellenübung.

4. Die Tabelle fügen Sie über Menü Einfügen > Tabelle ein.
Geben Sie der Tabelle nun 4 Zeilen, 2 Spalten, Breite = 700 Pixel, Rahmen = 1. Zellauffüllung und Zellenabstand lassen Sie zunächst leer.

5. Klicken Sie in der Tabelle in die linke obere Zelle und ziehen Sie den Cursor mit gedrückter Maustatste nach unten bis zur unteren Zelle. Sie sehen nun, dass die linke Spalte aktiviert ist. Geben Sie in der Eigenschaftenpalette im Feld Breite (links unten neben Horizontal) einen Wert von 150 ein. Dieser Wert bedeutet 150 Pixel.

6. Sie können die Tabelle komplett oder auch einzelne Tabellenzellen in der Eigenschaftenpalette einfärben. Die linke Spalte soll nun auch eine Farbe bekommen. Im aktivierten Zustand geben Sie in der Eigenschaftenpalette unter "Hgf" (Hintergrundfarbe) den Wert "#990000" ein. Sie können auch in das kleine Fenster klicken und sich dort Ihre Lieblingsfarbe aussuchen.

7. Eine Grafik einfügen: Klicken Sie in die obere Zelle der zweiten Spalte. Über Einfügen > Bild laden Sie die Grafik "ruh.gif".

8. In die zweite Zelle soll Text eingefügt werden, laden Sie ihn mit Kopieren und Einfügen über die Zwischenablage in die Tabelle. Damit der Text am oberen Rand der Tabellenzelle steht, stellen Sie die vertikale Ausrichtung innerhalb dieser Tabellenzelle auf "oben".

9. Die dritte Zelle erhält zwei Grafiken "kind.gif" und "schoen.gif". Sie sollen untereinander liegen. Dazu laden Sie zunächst die erste Grafik, dann drücken Sie die Returntaste um einen Absatz zu erzeugen. Jetzt laden Sie die zweite Grafik. Diese Grafik wird zentriert ausgerichtet.

10. Die vierte Zelle soll Text und einen farbigen Hintergrund erhalten. Den Text kopieren Sie sich in die Zelle, den Hintergrund stellen Sie auf Farbe "cccccc" ein, nachdem Sie die Zelle aktiviert haben.

11. Sie sehen, dass Texte und Bilder sehr eng zusammen liegen. Um dies zu verhindern, stellen Sie eine Zellauffüllung von "10" ein. Dafür müssen Sie die gesamte Tabelle aktivieren.

12. Ihre Seite ist so gut wie fertig! Sie werden sie jetzt noch mit zwei Folgeseiten verlinken. Erstellen Sie die Seiten "kind.html" und "schoen.html". Die Seite "kind.html" erhält die Grafik "kind.gif" und den Text aus der Rohtext-Datei. Tabellen etc. sparen wir uns hier, es geht nur um das Verlinken Ihrer Seiten. Am Ende des Textes geben Sie den Text "zurück zur Startseite" ein und verlinken ihn mit der Seite "tabellenuebung.html". Genauso verfahren Sie mit der Seite "schoen.html".
Auf der Startseite setzen Sie nun die Links zu den Folgeseiten. Dies geschieht nicht wie in der vorherigen Übung im Text, sondern auf der Grafik. Klicken Sie die Grafik "kind.gif" an und setzen wie gewohnt in der Eigenschaftenpalette den Link. Das gleiche gilt für "schoen.gif".

13. Sie haben sich jetzt ein richtige kleine Website erstellt. Betrachten Sie sie mit der Funktionstaste F12 im Browser. Sie werden feststellen, dass der Rahmen und die einzelnen Zellen der Tabelle sichtbar sind. Dies können Sie verhindern, indem Sie den Rahmen in der Eigenschaftentabelle auf "0" setzen. Probieren Sie verschiedene Größen des Rahmens und der Zellauffüllung aus.

Tipps

Tabellen können Sie auch erzeugen, indem Sie auf das Tabellensymbol in der Objektepalette klicken (die Objektepalette rufen Sie sich über das Menü Fenster auf den Bildschirm). Eine Übersicht der wichtigsten Paletten finden Sie hier.
In der Objektepalette könnten Sie theoretisch zwischen der Standardansicht und einer Layoutansicht hin und herwechseln um mit sogenannten Layouttabellen zu arbeiten. Das ist im Moment nicht sinnvoll, bitte arbeiten Sie ausschließlich in der Standardansicht.
Die Breite und Höhe einer Tabelle bzw. Tabellenzelle lässt sich nicht nur in Pixel angeben. Sie können stattdessen auch einen Prozentwert eingeben.
Eine Alternative zu Tabellen-Layouts sind CSS-Layouts. Dazu später mehr.

Kontrollfragen und weitere Übungen

Wie versehen Sie eine Tabelle mit einem 2 Pixel breiten Rahmen?
Wie stellen Sie Text an die Oberkante einer Tabellenzelle?
Wogegen hilft ein kalter Halswickel mit Essig?

Letzte Aktualisierung dieser Datei am: 23.1.2006
Autor: Stephan Franke · Impressum und Hinweise zu diesen Seiten · Suche
Diese Seiten wurden produziert von: sfk

Haben Sie Anregungen, Kritik oder Ideen zu dieser Seite? Sie können hier einen Kommentar schreiben.
Ihr Kommentar wird am Ende dieser Seite angefügt.

Bislang wurden zu dieser Seite keine Kommentare geschrieben