Operation Manual
157
DREAMWEAVER GEBRUIKEN
Pagina's maken met CSS
Laatst bijgewerkt 2/5/2011
Info structuur CSS-paginalay-out
Alvorens met deze sectie verder te gaan, dient u bekend te zijn met de basisideeën van CSS.
Het basiselement van de CSS-lay-out is het label voor de div-tag, een HTML-element dat in de meeste gevallen
fungeert als een container voor text, afbeeldingen en andere paginaelementen. Het volgende voorbeeld toont een
HTML-pagina met drie aparte div-tags: één groot “containerelement” en twee andere elementen, een zijvak-element
en een element voor de hoofdinformatie binnen het containerelement.
A. Containerelement B. Sidebar div C. Element Hoofdinformatie (Main Content)
Hier volgt de codering voor alle drie div-tags in de HTML:
<!--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>
In het bovenstaande voorbeeld is er geen “stijl” verbonden aan de div-tags. Als er geen CSS-regels zijn opgegeven,
worden alle div-tags met hun informatie op de standaard plaats op de pagina aangebracht. Als echter elke div-tag van
een unieke id is voorzien (zoals in het bovenstaand voorbeeld), kunt u de id's gebruiken om CSS-regels te maken zodat
deze (als ze worden toegepast) de stijl en de positionering van de div-tags kunnen wijzigen.
De volgende CSS-regel, die zich in de kop van een document of in een extern CSS-bestand kan bevinden, geeft de
stijlregels voor de eerste div-tag (het “containerelement”) op de pagina:
A
B
C