Manualshelf

Operation Manual

ManualsBrandsAdobe ManualsSoftwareDREAMWEAVER CS5.5
171172173174175176177178179180
Table Of Contents
166
VERWENDEN VON DREAMWEAVER
Seiten mit CSS erstellen
Last updated 10.4.2012
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-Tags. 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: Das folgende Beispiel zeigt eine HTML-Seite, die drei separate Div-Tags enthält:
ein großes „Container“-Tag sowie zwei weitere Tags. Innerhalb des Container-Tags befinden sich ein Randleisten-Tag
und ein Hauptinhalts-Tag.
A: Div-Tag „container“ B: Div-Tag „sidebar“ C: Div-Tag „mainContent“
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
convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.</p>
</div>
</div>
Im oben genannten Beispiel sind keinem der Div-Tags Stile angehängt worden. Wenn keine CSS-Regeln definiert sind,
wird jedes Div-Tag samt seinen Inhalten an einem Standardort auf der Seite positioniert. Wenn jedoch jedes Div-Tag
über eine eindeutige ID verfügt (wie im Beispiel oben), können Sie mithilfe der IDs CSS-Regeln erstellen. Wenn diese
CSS-Regeln angewendet werden, ändern sie den Stil und die Positionierung der Div-Tags.
A
B
C