Operation Manual

Gestalten von Seitenlayouts mit CSS
Nach oben
Nach oben
CSS-Seitenlayout
Struktur des CSS-Seitenlayouts
Seiten mit einem CSS-Layout erstellen
CSS-Seitenlayout
Bei einem CSS-Seitenlayout handelt es sich um ein Layout, das den Inhalt einer Webseite mithilfe des CSS-Formats organisiert anstatt mithilfe
herkömmlicher HTML-Tabellen oder Frames. Der Grundbaustein des CSS-Layouts ist das div-Tag. Dabei handelt es sich um ein HTML-Tag, das
in den meisten Fällen als Container für Text, Bilder oder sonstige Seitenelemente dient. Wenn Sie ein CSS-Layout erstellen, fügen Sie div-Tags in
die Seite ein, fügen ihren Inhalt ein und positionieren die div-Tags an unterschiedlichen Stellen. Im Gegensatz zu Tabellenzellen, die nur innerhalb
der Zeilen und Spalten einer Tabelle vorkommen dürfen, können div-Tags überall auf einer Webseite platziert werden. Sie können div-Tags
absolut positionieren (durch Angabe von x- und y-Koordinaten) oder relativ positionieren (durch Angabe ihrer Position in Bezug auf den aktuellen
Speicherort). div-Tags lassen sich auch durch Angabe von Floats, Auffüllungen und Rändern positionieren. Gemäß der modernen Webstandards
ist dies die bevorzugte Methode.
Das Erstellen von CSS-Layouts aus dem Nichts kann sich als schwierig erweisen, weil es so viele Vorgehensweisen dafür gibt. Sie können
einfache zweispaltige CSS-Layouts erstellen, indem Sie schwebende Elemente, Ränder, Auffüllungen und sonstige CSS-Eigenschaften in nahezu
endlosen Kombinationen festlegen. Darüber hinaus sorgt das Problem der browserübergreifenden Wiedergabe dafür, dass bestimmte CSS-
Layouts in manchen Browsern ordnungsgemäß angezeigt werden, in anderen dagegen nicht. Dreamweaver erleichtert das Erstellen von Seiten mit
CSS-Layouts erheblich, denn es enthält bereits 16 vordefinierte Layoutvorlagen, die in den verschiedenen Browsern eingesetzt werden können.
Die in Dreamweaver enthaltenen vordefinierten CSS-Layoutvorlagen bieten die einfachste Möglichkeit, eine Seite mit einem CSS-Layout zu
erstellen. Es ist allerdings auch möglich, CSS-Layouts mithilfe absolut positionierter Elemente (AP-Elemente) zu erstellen. In Dreamweaver ist ein
AP-Element (absolut positioniertes Element) ein HTML-Seitenelement – also ein div-Tag oder ein beliebiges anderes Tag –, dem eine absolute
Position zugewiesen wurde. Eine Einschränkung der AP-Elemente in Dreamweaver besteht jedoch darin, dass sie absolut positioniert sind. Ihre
Positionen auf der Seite lassen sich nicht an die Größe des Browserfensters anpassen.
Als erfahrener Benutzer können Sie div-Tags manuell einfügen und mit CSS-Positionierungsstilen versehen, um Seitenlayouts zu erstellen.
Struktur des CSS-Seitenlayouts
Bevor Sie mit diesem Abschnitt weitermachen, sollten Sie mit den grundlegenden CSS-Konzepten vertraut sein.
Der Grundbaustein des CSS-Layouts ist das div-Tag. Dabei handelt es sich um ein HTML-Tag, das in den meisten Fällen als Container für Text,
Bilder oder sonstige Seitenelemente dient. Das folgende Beispiel zeigt eine HTML-Seite, die drei separate div-Tags enthält: ein großes
„container“-div-Tag sowie zwei weitere Tags. Innerhalb des Container-Tags befinden sich ein div-Tag für die Randleiste (sidebar) sowie ein div-
Tag für den Hauptinhalt (mainContent).
A. „container“-div-Tag B. „sidebar“-div-Tag C. „mainContent“-div-Tag
Nachstehend finden Sie den Code für alle drei div-Tags auf der HTML-Seite:
<!--container div tag--> <div id="container"> <!--sidebar div tag--> <div id="sidebar"> <h3>Sidebar
Content</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <p>Maecenas urna purus,
fermentum id, molestie in, commodo porttitor, felis.</p> </div> <!--mainContent div tag--> <div
id="mainContent"> <h1> Main Content </h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Praesent aliquam, justo convallis luctus rutrum.</p> <p>Phasellus tristique purus a augue condimentum
adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p> <h2>H2
level heading </h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo
189