Galileo Design < openbook > Galileo 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

Download:
- ZIP, ca. 33 MB
Neuauflage bestellen
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
Galileo 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


Galileo Computing

7.4 Zentrieren mit Tabellen  toptop

Mit Tabellen können Websites zentriert dargestellt werden. Dieses Layout ist im Internet mittlerweile recht verbreitet und stellt eine echte Alternative zum klassischen Stil »Navigation links – Logo oben« dar. Für Websites mit vielen Inhalten ist es ohne weitere Hilfsmittel wie scrollbaren Bereichen etc. jedoch nicht geeignet.

Abbildung 7.17 Zentrierte Darstellung mit Tabellen

Erstellen Sie eine Tabelle, die nur aus einer Zelle besteht, und geben Sie ihr in Höhe und Breite eine Abmessung von 100 %. Richten Sie dann den Zellinhalt dieser Tabelle horizontal und vertikal mittig aus.

Dieses Vorgehen funktioniert jedoch nicht, wenn Sie einen DOC- Type angegeben haben, wie es an sich ja sein sollte. Tabellenhöhen gehören nicht zu den Standardattributen von HTML. Wenn Sie ein in jedem Browser konsistentes Layout Und den DOC-Type benötigen, müssen Sie eine andere Layouttechnik anwenden, zum Beispiel Frames. Diese Technik wird in Kapitel 9 über Frames beschrieben.

Schritt für Schritt: Aufbau der Tabellen für die Buchwebsite

Abbildung

1 Tabelle einfügen

Klicken Sie in das Dokument dummy.html und legen Sie eine Tabelle mit den in den Abbildungen gezeigten Parametern an.

2 Tabelle rechts oben

Fügen Sie jetzt in der rechten oberen Zelle die Tabelle für die Navigation mit den angegebenen Parametern ein.

Wundern Sie sich nicht, wenn Ihre Tabellen zunächst machen, was sie wollen, und nicht so aussehen, wie Sie es erwarten. Erst wenn bei einem Tabellenlayout alle Abmessungen eingegeben sind, werden diese auch korrekt angezeigt.

3 Tabelle links unten

Gehen Sie nach dem gleichen Schema jetzt auch bei der Tabelle in der linken unteren Tabellenzelle vor. Die Einstellungen entnehmen Sie bitte der folgenden Abbildung ...

4 Tabelle rechts unten

. und fügen Sie gleich die Tabelle auf der rechten unteren Seite ein.

   Klicken Sie danach in die Zelle links oben und tragen Sie im Eigenschafteninspektor eine Breite von 361 Pixel ein.

5 Zellbreite der rechten unteren Tabelle

Klicken Sie jeweils in die linke und rechte Spalte der soeben eingefügten Tabellen und stellen Sie eine Zellbreite von 10 Pixel ein. Langsam nimmt unsere Tabelle Form an, und man kann zumindest Ähnlichkeiten mit dem zukünftigen Layout erkennen.

6 Transparente GIFs einfügen

Damit die Tabellen auch zuverlässige Höhen und Breiten aufweisen, fügen Sie jetzt bitte in die – in unserer Abbildung weiß gekennzeichneten Flächen – die Grafik spacer.gif ein und stellen Sie die Breite und Höhe der Grafik auf die richtigen Abmessungen.

Abbildung

Die Abmessungen können Sie aus der Screenbemaßung (PDF auf CD-ROM) erkennen. Die Grafik ist bei Ihnen nicht weiß, sondern transparent. Wir haben in unserem Beispiel ein weißes Pixel verwendet, um zu zeigen, an welchen Stellen das spacer.gif eingebunden wird.

7 Weitere Tabelle einfügen

Fügen Sie als nächsten Schritt die Tabelle rechts ein, wie in der Abbildung gezeigt.

8 Tabelle weiter verschachteln

Versehen Sie nun die neue Zelle gleich mit einer weiteren Tabelle. An dieser Stelle sind jetzt 4 Tabellen ineinander gelegt.

9 Hintergrundfarbe einstellen

Stellen Sie jetzt noch die Hintergründe der Zellen auf die Farbe Weiß und den Hintergrund der Hauptzelle rechts auf die Farbe #EBEBEB.

Abbildung

An diesem Punkt angelangt, haben Sie eine ganze Menge geschafft. Verzweifeln Sie nicht, falls es nicht auf Anhieb funktioniert. Für den Notfall finden Sie jeden einzelnen Arbeitsschritt auch auf der CD-ROM.



Ihr Kommentar

Wie hat Ihnen das <openbook> gefallen? Wir freuen uns immer über Ihre freundlichen und kritischen Rückmeldungen.






 <<   zurück
  
  Zum Katalog
Zum Katalog: Adobe Dreamweaver CS3
Die Neuauflage:
Adobe Dreamweaver CS3
Jetzt bestellen


 Ihre Meinung?
Wie hat Ihnen das <openbook> gefallen?
Ihre Meinung

 Buchtipps
Zum Katalog: Adobe Dreamweaver CS3 - Der praktische Einstieg






 Adobe Dreamweaver
 CS3 - Der praktische
 Einstieg


Zum Katalog: Adobe Dreamweaver CS3 - Videotraining






 Adobe Dreamweaver
 CS3 - Videotraining


Zum Katalog: Adobe Flash CS3 - Videotraining






 Adobe Flash CS3 -
 Videotraining


Zum Katalog: Adobe Photoshop CS3






 Adobe Photoshop CS3


 Shopping
Versandkostenfrei bestellen in Deutschland und Österreich
InfoInfo




Copyright © Galileo Press 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.


[Galileo Design]
[Schulungen direkt von den Autoren: firstART- Agentur für Design und Consulting]
Galileo Press, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, info@galileo-press.de