Handboek Annuleren

Informatie over hoe u uw pagina met CSS kunt opmaken

Zoeken

Laatst bijgewerkt op

Verken de basisstructuur van een CSS-lay-out en leer hoe u in Dreamweaver pagina's en inhoud ontwerpt met behulp van CSS.

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 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.

Over de structuur van de CSS-paginalay-out

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.

A. Containerelement B. Sidebar div C. Main Content div

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:

#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

Met de volgende CSS-regel worden stijlregels gemaakt voor de sidebar div-tag:

#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

Tot slot voltooid de CSS-regel voor de container div-tag de lay-out:

#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:

Main Content div, linkermarge van 250 pixels

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.

Een pagina met een CSS-lay-out maken

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.

Een pagina met een CSS-lay-out maken

Selecteer Bestand > Nieuw.
In het dialoogvenster Nieuw document selecteert u de categorie Lege pagina. (Dit is de standaardkeuze.)
Als Paginatype selecteert u het soort pagina dat u wilt maken.

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.

De vooraf ontworpen CSS-indelingen bieden de volgende typen kolommen:

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.
Selecteer een documenttype in het pop-upmenu DocType.
Selecteer een locatie voor de CSS van de lay-out uit Lay-out CSS in het pop-upmenu.

Toevoegen aan kop

Hiermee wordt CSS voor de indeling toegevoegd aan de kop van de pagina die u maakt.

Nieuw bestand maken

Voegt CSS voor de lay-out toe aan een nieuwe externe CSS stylesheet en voegt de nieuwe stylesheet bij de pagina die u maakt.

Koppeling naar bestaand bestand

Hiermee kunt u een bestaand CSS-bestand opgeven dat reeds de CSS-regels bevat die nodig zijn voor de indeling. Deze optie is vooral handig wanneer u dezelfde CSS-indeling (de CSS-regels die zich in één bestand bevinden) voor meerdere documenten wilt gebruiken.
Voer een van de volgende handelingen uit:
- 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.

Eigen CSS-lay-outs toevoegen aan de keuzelijst

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.
Voeg de HTML-pagina toe aan de map CS5\Configuration\BuiltIn\Layouts van Adobe Dreamweaver.
(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.
(Optioneel) Nadat u een opmerkingenbestand hebt gemaakt voor uw eigen lay-out, kunt u het bestand openen en geeft u de lay-outnaam, de omschrijving en het afdrukvoorbeeld aan.

Verwante informatie

Aanmelden bij je account

Informatie over hoe u uw pagina met CSS kunt opmaken

Over de CSS-paginalay-out

Over de structuur van de CSS-paginalay-out

Een pagina met een CSS-lay-out maken

Een pagina met een CSS-lay-out maken

Eigen CSS-lay-outs toevoegen aan de keuzelijst

Verwante informatie

Vraag het de community

Contact met ons opnemen