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 overal 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.
Alvorens met deze sectie verder te gaan, dient u bekend te zijn met de basisconcepten 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.
<!--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:
#container {
width: 780px;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
De regel #container past een stijl toe op de container-div-tag waardoor het een breedte krijgt van 780 pixels, een witte achtergrond, geen marge (vanaf de linkerkant van de pagina), een doorgetrokken zwarte rand van 1 pixel en tekst die links is uitgelijnd. Het resultaat van toepassing van de regel op de container-div-tag is als volgt:
A. Tekst links uitgelijnd B. Witte achtergrond C. Ononderbroken zwarte rand van 1 pixel
#sidebar {
float: left;
width: 200px;
background: #EBEBEB;
padding: 15px 10px 15px 20px;
}
Volgens de regel #sidebar krijgt de sidebar div-tag een breedte van 200 pixels, een grijze achtergrond, een opvulling boven en onder van 15 pixels, een opvulling rechts van 10 pixels en een opvulling links van 20 pixels. (De standaardvolgorde voor padding is van rechtsboven naar linksonder.) Daarnaast wordt de sidebar div-tag gepositioneerd met float: left, een eigenschap waardoor de sidebar div-tag naar de linkerkant van de container div-tag wordt geduwd. Het toepassen van de regel op de sidebar div-tag heeft het volgende resultaat:
A. Breedte 200 pixels B. Celopvulling boven en onder, 15 pixels
#mainContent {
margin: 0 0 0 250px;
padding: 0 20px 20px 20px;
}
Volgens de regel #mainContent krijgt de main content-div een linkermarge van 250 pixels, wat betekent dat er een ruimte van 250 pixels wordt geplaatst tussen de linkerkant van de container-div en de linkerkant van de main content-div. Daarnaast zorgt de regel voor een ruimte van 20 pixels aan de rechter-, onder- en linkerkant van de main content-div. Het toepassen van de regel op de mainContent-div heeft het volgende resultaat:
De volledige code ziet er zo uit:
A. 20 pixels opvulling links B. 20 pixels opvulling rechts C. 20 pixels opvulling onder
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#container {
width: 780px;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
#sidebar {
float: left;
width: 200px;
background: #EBEBEB;
padding: 15px 10px 15px 20px;
}
#mainContent {
margin: 0 0 0 250px;
padding: 0 20px 20px 20px;
}
</style>
</head>
<body>
<!--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>
</body>
Opmerking:
De voorbeeldcode hierboven is een vereenvoudigde versie van de code waarmee de lay-out met twee kolommen en vaste zijbalk wordt gemaakt als u een nieuw document maakt met de vooraf ontworpen lay-outs die bij Dreamweaver worden geleverd.
Bij het maken van een nieuwe pagina in Dreamweaver kunt u een pagina maken met een CSS-lay-out. Dreamweaver wordt geleverd met zestien verschillende CSS-lay-outs waaruit u kunt kiezen. Bovendien kunt u eigen CSS-lay-outs maken en deze opnemen in de configuratiemap zodat ze verschijnen als lay-outkeuze in het dialoogvenster Nieuw document.
-
Opmerking:
U moet een HTML-paginatype kiezen voor de lay-out. U kunt bijvoorbeeld HTML, ColdFusion®, PHP, enzovoort selecteren. U kunt geen ActionScript™-, CSS-, Library Item-, JavaScript-, XML-, XSLT- of ColdFusion Component-pagina met een CSS-indeling maken. De paginatypes in Andere categorie van het dialoogvenster Nieuw document kunnen eveneens geen CSS-paginalay-outs bevatten.
-
Bij Lay-out kiest u de CSS-lay-out die u wilt gebruiken. U kunt kiezen uit zestien verschillende lay-outs. Het venster Beeld toont de lay-out en geeft een korte omschrijving van de gekozen lay-out.
Vast
De kolombreedte wordt opgegeven in pixels. De kolom wordt niet groter of kleiner op basis van de grootte van de browser of de tekstinstellingen van de bezoeker van de site.
Vloeibaar
De kolombreedte wordt opgegeven als een percentage van de breedte van het browservenster van de bezoeker van de site. De kolombreedte wordt automatisch aangepast als de bezoeker van de site de browser breder of smaller maakt, maar wordt niet aangepast als de bezoeker van de site de tekstinstellingen wijzigt.
-
- Als u in het pop-upvenster CSS-lay-out hebt gekozen voor Toevoegen aan kopgebied (de standaardoptie), klikt u op Maken.
- Als u in het pop-upvenster Lay-out CSS hebt gekozen voor Nieuw bestand maken, klikt u op Maken en voert u de naam in van het nieuwe externe bestand in het dialoogvenster Stijlpaginabestand opslaan als.
- Als u in het pop-upvenster CSS-lay-out hebt gekozen voor Koppeling naar bestaand bestand, voegt u het externe bestand toe in het tekstvak CSS-bestand koppelen door op het pictogram Stijlpagina toevoegen te klikken, het dialoogvenster Externe stijlpagina koppelen in te vullen en op OK te klikken. Wanneer u klaar bent, klikt u in het dialoogvenster Nieuw document op Maken.
Opmerking:
Wanneer u de optie Koppeling naar bestaand bestand selecteert, moet het bestand dat u opgeeft reeds de regels bevatten voor het CSS-bestand dat erin is opgenomen.
Wanneer u de CSS-lay-out in een nieuw bestand plaatst of koppelt naar een bestaand bestand, koppelt Dreamweaver het bestand automatisch aan de HTML-pagina die u aan het maken bent.
Opmerking:
Voorwaardelijk commentaar voor Internet Explorer (CC's, conditional comments), dat kan helpen om weergaveproblemen in IE op te lossen, blijft ingesloten in het kopgebied van de nieuwe CSS-lay-out, ook als u Nieuw extern bestand of Bestaand extern bestand selecteert als locatie voor uw CSS-lay-out.
-
(Optioneel) U kunt ook CSS-stijlpagina's aan uw nieuwe pagina koppelen (los van de CSS-indeling) wanneer u de pagina maakt. Klik hiertoe op het pictogram Stijlpagina koppelen boven het deelvenster CSS-bestand koppelen en selecteer een CSS-stijlpagina.
Raadpleeg het artikel Automatisch een stijlpagina toevoegen aan nieuwe documenten (Engels) van David Powers voor een gedetailleerd overzicht van dit proces.
-
Maak een HTML-pagina die de CSS-lay-out bevat die u wilt toevoegen aan de keuzelijst in het dialoogvenster Nieuw document. De CSS voor de lay-out moet zijn opgenomen in de kopregel van de HTML-pagina.
Opmerking:
Om uw eigen CSS-lay-out consistent te houden met de andere lay-outs die worden geleverd bij Dreamweaver, moet u uw HTML-bestand opslaan met een extensie .htm.
-
(Optioneel) Voeg een afdrukvoorbeeld van uw lay-out (bijvoorbeeld een .gif- of een .png-bestand) toe aan de map CS5\Configuration\BuiltIn\Layouts van Adobe Dreamweaver. De standaard afbeeldingen die bij Dreamweaver zijn meegeleverd zijn .png-bestanden van 227 pixels breed op 193 pixels hoog.
Opmerking:
Geef uw afdrukvoorbeeld dezelfde bestandsnaam als u HTML-bestand zodat u ze gemakkelijk kunt terugvinden. Als u HTML-bestand bijvoorbeeld mijnLayout.htm is genoemd, sla uw afdrukvoorbeeld dan op onder de naam mijnLayout.png.
-
(Optioneel) Maak een opmerkingenbestand voor uw eigen lay-out door de map CS5\Configuration\BuiltIn\Layouts\_notes van Adobe Dreamweaver te openen. Kopieer en plak een bestaand opmerkingenbestand en dezelfde map en hernoem de kopie voor uw eigen lay-out. Zo kunt u bijvoorbeeld het bestand oneColElsCtr.htm.mno kopiëren en het hernoemen naar mijnLayout.htm.mno.
De voorwaarden van Creative Commons zijn niet van toepassing op Twitter™- en Facebook-berichten.