Rheinwerk Design < openbook > Rheinwerk Design - Know-how für Kreative.
Know-how für Kreative

Inhaltsverzeichnis
1 Einleitung
2 Projektablauf für die Buchwebsite
3 Programmgrundlagen
4 Dreamweaver erweitern
5 Eine Site erstellen
6 Grundlegende Dokumenteinstellungen
7 Tabellen in Dreamweaver
8 Bilder im Web
9 Framesets
10 Aktionen
11 Die Zeitleiste
12 CSS in Dreamweaver
13 Ebenen
14 Hyperlinks
15 Vorlagen und Bibliotheken
16 Formulare
17 Quelltext de Luxe
18 Dreamweaver und Flash
19 Office-Daten einfügen
20 Dynamische Websites – eine Einführung
21 Einführung in PHP
22 Lokalen Webserver installieren
23 Dynamische Sites in Dreamweaver einrichten
24 MySQL-Grundlagen
25 Datenbanken mit Dreamweaver anbinden
26 PHP und Dreamweaver
27 Datenbanken abfragen
28 Daten einfügen und dynamische Formulare
29 Datensätze bearbeiten
30 Benutzer authentifizieren und Zugriffsrechte festlegen
31 Fortgeschrittene Techniken
32 Dreamweaver 8 und XML
33 Menüs für dynamische Verhalten
Stichwort
Ihre Meinung?

Spacer
 <<   zurück
Dreamweaver 8 von Richard Beer, Susann Gailus
Webseiten entwickeln mit HTML, CSS, XML, PHP und MySQL
Buch: Dreamweaver 8

Dreamweaver 8
mit CD
639 S., 39,90 Euro
Rheinwerk Design
ISBN 978-3-89842-739-5
gp 7 Tabellen in Dreamweaver
  gp 7.1 Einfügen von Tabellen
    gp 7.1.1 Hilfsmittel für Tabellen
    gp 7.1.2 Arbeiten im erweiterten Modus
  gp 7.2 Tabelleneigenschaften einstellen
    gp 7.2.1 Zelleneigenschaften einstellen
    gp 7.2.2 Fehler vermeiden
  gp 7.3 Verschachtelte Tabellen
    gp 7.3.1 Spezialfall Netscape 4.7
    gp 7.3.2 Der Trick mit den transparenten GIFs
    gp 7.3.3 Tabellenumrandungen erstellen
  gp 7.4 Zentrieren mit Tabellen


Rheinwerk Computing

7.3 Verschachtelte Tabellen  downtop

Viele Layouts lassen sich mit einfachen Tabellen nicht umsetzen. Um auch komplexeren Layoutanforderungen gerecht zu werden, müssen Sie Tabellen verschachteln.

Das Verschachteln von Tabellen ist denkbar einfach. Klicken Sie in eine bestehende Tabellenzelle und fügen Sie eine weitere Tabelle ein. Die neu erstellte Tabelle wird dann in der ausgewählten Tabellenzelle platziert. In Abbildung 7.10 sehen Sie eine verschachtelte Tabelle in der erweiterten Ansicht.

Wenn Sie jetzt bedenken, dass jede Tabelle und jede Zelle über eine andere Hintergrundgrafik verfügen kann, ahnen Sie, welche Möglichkeiten Ihnen diese Vorgehensweise eröffnet.

Abbildung 7.10 Verschachtelte Tabellen in der erweiterten Ansicht


Rheinwerk Computing

7.3.1 Spezialfall Netscape 4.7  downtop

Häufig wird bei Tabellen mit Hintergrundbildern gearbeitet. Dabei kommt es unter Umständen zu einem Darstellungsfehler in Netscape 4.7. Dieser Browser nimmt zwar Tabellenhintergründe an, doch wenn die Tabelle aus mehreren Zellen besteht und ein Tabellenhintergrund angegeben ist, beginnt er, diesen Tabellenhintergrund in jeder Zelle von neuem darzustellen. Die Tabelle aus Abbildung 7.11 sieht in Netscape 4.7 daher so aus wie Abbildung 7.12 zeigt.


Abbildung 7.11 Tabelle im Internet Explorer

Abbildung 7.12 Tabelle in Netscape 4.78

Abbildung 7.13 Tabelle in Netscape 4.78 mit Spacer und Tabellenzelle


Man kann diesen Fehler durch einen kleinen Trick vermeiden. Legen Sie Ihre Tabelle in eine weitere Tabelle, die aus einer einzelnen Zelle besteht. Dieser äußeren Tabelle weisen Sie den gewünschten Hintergrund zu. Die Tabelle mit mehreren Zellen legen Sie als Inhalt in die erste Tabelle und weisen dieser als Hintergrund ein transparentes GIF (Spacer) zu. Gehen Sie auf diese Weise vor, wird Netscape das transparente GIF darstellen. Der eigentliche Hintergrund scheint hindurch. Das Ergebnis sehen Sie in Abbildung 7.13.

Abbildung 7.14 Tabellenschema der Lösung für Netscape: Die transparente Tabelle liegt auf der Tabelle mit dem Hintergrundbild.


Rheinwerk Computing

7.3.2 Der Trick mit den transparenten GIFs  downtop

Wohl keine Grafikdatei ist so häufig im Web vertreten wie das transparente 1 Pixel große GIF. Tabellen bekommen durch den Einsatz dieser Grafik zusätzliche Gestaltungsmöglichkeiten und eine bessere Konsistenz der gesamten Abmessungen. Viele Layouts lassen sich nur unter Einsatz dieser transparenten Bilder umsetzen.

Mit HTML ist es möglich, jedes im Dokument platzierte Bild auf eine beliebige Größe zu skalieren. Wir nutzen dies, um 1 x 1 Pixel große Bilder auf das gewünschte Maß zu skalieren.

Abbildung 7.15 Transparentes GIF skaliert

Abbildung 7.15 zeigt ein 1 x 1 Pixel großes GIF, das auf die Abmessungen 100 x 50 Pixel skaliert wurde. Wie Sie sehen können, wird die Tabellenzelle auf die entsprechende Größe »gedrückt«.

Tabellenhöhen einstellen | Einer der Hauptvorteile dieser Technik ist es, Tabellenhöhen genau einstellen zu können. Tabellenhöhen sind mit standardkonformem HTML nicht möglich.

Wenn Sie eine gesamte Tabellenreihe auf eine Höhe von zum Beispiel 10 Pixeln einstellen wollen, müssen Sie dieses GIF in jeder der Tabellenzellen innerhalb dieser einzustellenden Tabellenreihe einfügen.

Geschützte Leerzeichen ersetzen | Wenn Sie eine Tabellenzelle im Quelltext ansehen, werden Sie feststellen, dass Dreamweaver 8 automatisch in jede Zelle ein geschütztes Leerzeichen (&nbsp;) einfügt. Dies ist notwendig, da leere Tabellenzellen in manchen Browsern nicht dargestellt werden. Da jedoch ein Leerzeichen nichts anderes als ein normales Zeichen mit einer Zeichenhöhe ist – auch wenn Sie diese nicht sehen –, hat dies die Auswirkung, dass Tabellenzellen immer die Standardzeichenhöhe Ihres Dokuments haben. Um dies zu vermeiden, müssen beim Einstellen geringer Zellenhöhen die geschützten Leerzeichen durch transparente GIFs ersetzt werden.


Rheinwerk Computing

7.3.3 Tabellenumrandungen erstellen  toptop

Wie weiter oben bereits erwähnt, werden die mit HTML möglichen Tabellenrahmen nicht in allen Browsern korrekt angezeigt. Mit den zur Verfügung stehenden Möglichkeiten von Zellabständen, Hintergrundfarbe und verschachtelten Tabellen ist ein wesentlich genaueres Arbeiten möglich.

Abbildung 7.16 Exakte Tabellenrahmen einstellen

In Abbildung 7.16 sehen Sie eine Tabelle mit 1 Pixel breitem Zellrahmen. Erstellen Sie zunächst eine Tabelle mit den gewünschten Spalten und Reihen. Weisen Sie dieser Tabelle dann die gewünschte Hintergrundfarbe zu. Bei dieser Tabelle müssen Sie den Zellraum auf 1 oder einen anderen von Ihnen gewünschten Wert einstellen.

Legen Sie dann eine weitere Tabelle mit einer Reihe und einer Spalte in exakt den gleichen Abmessungen an . Der Hintergrund dieser Tabelle wird mit der gewünschten Rahmenfarbe versehen. Zellraum und Zellauffüllung werden auf 0 eingestellt.

Abschließend wird Tabelle in Tabelle verschoben. Das Ergebnis ist die untere Tabelle .



Ihre Meinung

Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de.

 <<   zurück
  
  Zum Rheinwerk-Shop
Zum Rheinwerk-Shop: Adobe Dreamweaver CS3
Die Neuauflage:
Adobe Dreamweaver CS3
Jetzt bestellen


 Ihre Meinung?
Wie hat Ihnen das Openbook gefallen?
Ihre Meinung

 Buchtipps
Zum Rheinwerk-Shop: Adobe Dreamweaver CC






 Adobe
 Dreamweaver CC


Zum Rheinwerk-Shop: Adobe Dreamweaver CC Einstieg






 Adobe Dreamweaver
 CC Einstieg


Zum Rheinwerk-Shop: Responsive Webdesign






 Responsive Webdesign


Zum Rheinwerk-Shop: Suchmaschinen-Optimierung






 Suchmaschinen-
 Optimierung


Zum Rheinwerk-Shop: Schrödinger lernt HTML5, CSS3 und JavaScript






 Schrödinger lernt
 HTML5, CSS3
 und JavaScript


 Lieferung
Versandkostenfrei bestellen in Deutschland, Österreich und der Schweiz
InfoInfo




Copyright © Rheinwerk Verlag GmbH 2006
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das Openbook denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt.
Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.


Nutzungsbestimmungen | Datenschutz | Impressum

Rheinwerk Verlag GmbH, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de

Cookie-Einstellungen ändern