Tabellenbearbeitung in Dreamweaver

Ganz wichtig ist, dass ich in Dreamweaver im Register Layout den Ansichtsmodus auf Standard setze, sonst steht mir die Tabellenfunktion nicht zur Verfügung:

Wir empfehlen:
Dreamweaver-Video-Training

 

Jetzt kann ich entweder durch Menü>Einfügen>Tabelle oder durch einen Klick auf das Tabellensymbol eine neue Tabelle einfügen:

 

Ein Dialog-Fenster öffnet sich:

 

Unter Beschriftung und Zusammenfassung ist es nicht notwendig, etwas einzutragen. Beides kann von nicht visuellen Lesegeräten erfasst und ausgewertet werden, jedoch spielt das für eine normale Webseite keine Rolle. Danach klicke ich auf OK und sehe in Dreamweaver eine kleine – noch nicht so toll gestaltete – Tabelle:

 

Ein Klick auf den unteren Pfeil öffnet eine kleine Optionsbox, worin ich mehrere Möglichkeiten habe, die Tabelle zu verändern. Noch mehr Möglichkeiten für die Tabellenbearbeitung bietet die Layout-Einstellung: Erweitert an:

 

Im Register Eigenschaften kann ich die Optionen der Tabelle bzw. der aktivierten Zelle genau einstellen:

 

Um jetzt die Tabelle links, rechts oder zentriert auszurichten, ist es notwendig, die Tabelle vorher auszuwählen, damit Dreamweaver die neue Positionierung übernehmen kann:

 

Auch kann jetzt hier z. B. die Rahmendicke und Farbe sowie, wenn gewünscht, das Hintergrundbild der Tabelle ausgewählt werden. Unter anderem lassen sich in den Eigenschaftseinstellungen auch die Größe der Tabelle pixelgenau definieren bzw., wenn gewünscht, in Prozent angeben.

Zellraum und Zellauffüllung sind sehr wichtig für das Layout mit Tabellen, wobei der Zellraum den Abstand einzelner Zellen zueinander und die Zellauffüllung den Abstand des Zellinhaltes zum Rand definiert. Mit der Kombination beider Eigenschaften kann ich die Abstände in Tabellen genau einstellen. Klicke ich jetzt eine Zelle an, kann ich diese mit den Eigenschaftsoptionen genau definieren:

 

Hat die Tabelle zu wenige Zeilen, fügt Dreamweaver automatisch neue ein, sobald ich mit der Tabulator-Taste in der letzten Zeile und davon in der letzten Zelle bin. Das ist äußerst bequem. Anders geht es natürlich auch: rechte Maustaste>Tabelle und dann Zeile einfügen.

Richtig interessant wird es, wenn ich eine oder mehrere Tabellen in eine vorhandene Tabelle einfüge. Denn erst so habe ich die Möglichkeit, eine komplette Homepage zu designen, die grafisch auch ansprechend ist:

 

Ich brauche dazu in Dreamweaver nur die entsprechende Zelle anzuklicken und dann eine neue Tabelle darin einzufügen. Leider lassen sich Tabellenzellen von der Höhe her nicht perfekt positionieren. Darum gibt es schon seit langem diverse Tricks, um dieses Problem im Griff zu bekommen: transparente GIF-Dateien:

 

Eine transparente GIF-Datei ist in Photoshop schnell angelegt. Dazu erstelle ich einfach eine neue 1×1 Pixel große Datei, worin ich den Hintergrund als Transparent einstelle. Danach als transparente Gif-Datei abgespeichert … das war’s! Jetzt kann ich diese Datei – wie ein normales Bild – in eine Tabellenzelle positionieren und die Größe einstellen. Die Zelle der Tabelle wird dann automatisch in der Größe angepasst.

Tabellen bieten auch die Optionen an, wie z. B.von Word gewohnt, Tabellenzellen zu verbinden. Dazu reicht es, die Zellen, die verbunden werden sollen, zu markieren und dann mit der rechten Maustaste auf Tabelle>Zellen verbinden zu klicken:

 

Danach kann ich bequem z. B. zentriert eine Unterüberschrift in der Zelle eintragen:

 

In meinem Beispiel sehen natürlich die Tabellen nicht gerade toll aus. Mit den entsprechenden Hintergrundbildern und CSS Definitionen werden daraus jedoch richtig stylische Tabellen. Wie eine komplett fertige Homepage, die nur mit Tabellen aufgebaut wurde, aussehen kann, sieht man hier in diesem Beispiel:


So, jetzt hoffe ich sehr, dass ihr mit der Tabellenbearbeitung in Dreamweaver besser zurechtkommt und entsprechende Webseiten gestalten könnt.

Im nächsten Workshop werde ich erklären, welche Bilder sich im Web eignen und wo die Unterschiede sind bzw. welches Format sich für welchen Zweck am besten eignet.

Wir empfehlen:
PHP-Workshop-DVD - Basics & Tricks

Unsere Empfehlung für dich

Grundlagen HTML, CSS und JavaScript

Grundlagen HTML, CSS und JavaScript

Die drei wichtigsten Säulen des Webs – HTML, CSS und JavaScript. Wer die Grundlagen kennt, navigiert mit klarer Sicht durchs Netz und ist zudem in der Lage, ganz einfach selbst in die Programmzeilen einzugreifen.

  • 62 Lektionen in über acht Stunden Video-Training zum Einstieg in HTML, CSS und JavaScript
  • Einfach Grundlagenkenntnisse erwerben und in inklusiven Übungen direkt ausprobieren
  • Von Jan Brinkmann, einem Web-Entwickler aus Leidenschaft mit über 15 Jahren Erfahrung

Zum Training