Operation Manual

Pagina's met CSS opmaken
Naar boven
Naar boven
Over de CSS-paginalay-out
Over de structuur van de CSS-paginalay-out
Een pagina met een CSS-lay-out maken
Over de CSS-paginalay-out
Voor de indeling van een CSS-pagina wordt de indeling Cascading Style Sheet gebruikt in plaats van HTML-tabellen of frames voor het ordenen
van de inhoud van een webpagina. Het basiselement van de CSS-lay-out is de div-tag, een HTML-tag die in de meeste gevallen fungeert als een
container voor tekst, afbeeldingen en andere pagina-elementen. Wanneer u een CSS-lay-out maakt, plaatst u div-tags op de pagina, voegt u er
informatie aan toe en plaatst u ze in bepaalde posities. In tegenstelling tot cellen in een tabel die ergens binnen de rijen of kolommen van een
tabel moeten bestaan, kunnen div-tags over op een webpagina worden aangebracht U kunt div-tags absoluut plaatsen (door x- en y-coördinaten
op te geven) of relatief plaatsen (door de positie ten opzichte van de huidige positie op te geven). U kunt div-tags ook plaatsen door floats,
opvullingen en marges op te geven; de voorkeursmethode volgens de moderne webstandaarden.
Het maken van CSS-lay-outs uit niets kan moeilijk zijn omdat er zoveel manieren bestaan om het te doen. U kunt een eenvoudige CSS-lay-out
met twee kolommen maken door de tekst, marges, vullingen en andere CSS-eigenschappen in te stellen in bijna een oneindig aantal combinaties.
Verder kunnen zich weergaveproblemen voordoen met CSS-lay-outs die correct worden weergegeven in sommige browsers maar niet in andere.
Dreamweaver maakt het eenvoudig om pagina's samen te stellen met CSS-lay-outs dankzij zestien voorgedefinieerde lay-outs die voor
verschillende browsers kunnen worden gebruikt.
Gebruiken van de vooraf ontworpen CSS-lay-outs die bij Dreamweaver worden meegeleverd, is de eenvoudigste manier om een pagina met een
CSS-lay-out te maken. Maar u kunt ook CSS-lay-outs maken met Dreamweaver met elementen die absoluut zijn gepositioneerd (AP-elementen;
Absolutely-Positioned elements). Een AP-element in Dreamweaver is een HTML-pagina-element—in het bijzonder een div-label, of een
willekeurige andere label—waaraan een absolute positie is toegewezen. Het nadeel van de AP-elementen van Dreamweaver is echter dat deze
absoluut gepositioneerd zijn en daarom nooit hun positie aanpassen naargelang de grootte van het browservenster.
Geavanceerde gebruikers kunnen eveneens handmatig div-elementen aanbrengen en er CSS-positiestijlen op toepassen voor het maken van
paginalay-outs.
Over de structuur van de 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 de div-tag, een HTML-tag die in de meeste gevallen fungeert als een container voor tekst, afbeeldingen
en andere pagina-elementen. 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>
262