Selecteer Bestand > Nieuw.
Laatst bijgewerkt op
25 apr. 2024
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 aanwezig moeten zijn, kunnen div-tags overal op een webpagina worden geplaatst. 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
Voordat je verdergaat met dit gedeelte, moet je bekend zijn met de basisconcepten van CSS.
De basisbouwblok van de CSS-lay-out is de div-tag—een HTML-tag die in de meeste gevallen fungeert als container voor tekst, afbeeldingen en andere pagina-elementen.Het volgende voorbeeld toont een HTML-pagina die drie afzonderlijke div-tags bevat: één grote 'container'-tag, en twee andere tags—een zijbalk-tag en een hoofdinhoud-tag—binnen de container-tag.
A. Container div 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">
<!--zijbalk div-tag-->
<div id="sidebar">
<h3>Zijbalkinhoud</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> Hoofdinhoud </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-kop </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 'styling' gekoppeld aan een van de div-tags.Zonder gedefinieerde CSS-regels vallen elke div tag en de inhoud ervan in een standaardlocatie op de pagina. Als elke div tag echter een unieke id heeft (zoals in bovenstaand voorbeeld), kun je de id's gebruiken om CSS-regels te maken die, wanneer toegepast, de stijl en positionering van de div tags wijzigen.
De volgende CSS-regel, die kan staan in de head van het document of in een extern CSS-bestand, maakt stylingregels voor de eerste, of "container" div tag op de pagina:
#container {
width: 780px;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
De #container-regel stijlt de container div tag zodat deze een Breedte heeft van 780 pixels, een witte Achtergrond, geen marge (vanaf de linkerkant van de pagina), een stevige, zwarte, 1‑pixel rander en tekst die links is uitgelijnd. De resultaten van het toepassen van de regel op de container-div-tag zijn 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;
}
De #sidebar-regel stijlt de sidebar div tag om een breedte van 200 pixels te hebben, een grijze achtergrond, een boven- en onderopvulling van 15 pixels, een rechteropvulling van 10 pixels en een linkeropvulling van 20 pixels. (De standaardvolgorde voor opvulling is van rechtsboven naar linksonder.) Daarnaast positioneert de regel de sidebar div-tag met float: left—een eigenschap die de sidebar div-tag naar de linkerkant van de container div-tag duwt.De resultaten van het toepassen van de regel op de sidebar div tag zijn als volgt:
A. Breedte 200 pixels B. Celopvulling boven en onder, 15 pixels
Ten slotte voltooit de CSS-regel voor de hoofdcontainer-div-tag de lay-out:
#mainContent {
margin: 0 0 0 250px;
padding: 0 20px 20px 20px;
}
De #mainContent regel stijlt de hoofd content div met een linkermarge van 250 pixels, wat betekent dat het 250 pixels ruimte plaatst tussen de linkerkant van de container div en de linkerkant van de hoofd content div. Daarnaast voorziet de regel in 20 pixels ruimte aan de rechter-, onder- en linkerkant van de hoofd content div. De resultaten van het toepassen van de regel op de mainContent div zijn als volgt:
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>Naamloos 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>Zijbalkinhoud</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> Hoofdinhoud </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>Kop op H2-niveau</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>
Notitie
De bovenstaande voorbeeldcode is een vereenvoudigde versie van de code die de indeling met twee kolommen en vaste linkerzijbalk maakt wanneer je een nieuw document maakt met de vooraf ontworpen indelingen 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 in het dialoogvenster Nieuw document de categorie Lege pagina.(Dit is de standaardkeuze.)
Als Paginatype selecteert u het soort pagina dat u wilt maken.
Notitie
U moet een HTML-paginatype kiezen voor de lay-out. Je kunt bijvoorbeeld HTML, ColdFusion®, PHP enzovoort selecteren. Je kunt geen ActionScript™-, CSS-, bibliotheekitem-, JavaScript-, XML-, XSLT- of ColdFusion Component- pagina maken met een CSS-indeling. Paginatypen in de categorie Overige van het dialoogvenster Nieuw document kunnen ook geen CSS-pagina-indelingen bevatten.
Bij Lay-out kiest u de CSS-lay-out die u wilt gebruiken. Je
kunt kiezen uit zestien verschillende indelingen. Het voorvertoningsvenster toont de
indeling en geeft een korte beschrijving van de geselecteerde indeling.
De voorontworpen CSS-lay-outs bieden de volgende typen kolommen:
Vast
De kolombreedte wordt opgegeven in pixels. De kolom wordt niet van formaat gewijzigd op basis van de grootte van de browser of de tekst instellingen van de websitebezoekers.
Vloeibaar
Kolombreedte wordt opgegeven als een percentage van de browserbreedte van de websitebezoekers. Het ontwerp past zich aan als de websitebezoeker de browser breder of smaller maakt, maar wijzigt niet op basis van de tekst instellingen van de websitebezoeker.
Selecteer een documenttype in het pop-upmenu DocType.
Selecteer een locatie voor de CSS van de lay-out in het pop-upmenu Layout CSS.
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 nieuw extern CSS-stylesheet en koppelt het nieuwe stylesheet aan de pagina die je maakt.
Koppeling naar bestaand bestand
Hiermee kun je een bestaand CSS-bestand opgeven dat al de CSS-regels bevat die nodig zijn voor de lay-out. Deze optie is bijzonder handig wanneer je dezelfde CSS-lay-out (waarvan de CSS-regels in een enkel bestand zitten) voor meerdere documenten wilt gebruiken.
Voer een van de volgende handelingen uit:
- Als je Toevoegen aan kop hebt geselecteerd in het pop‑up menu Layout CSS in (de standaardoptie), klik op Maken.
- Als je Nieuw bestand maken hebt geselecteerd in het pop-upmenu Layout CSS, klik op Maken en geef vervolgens een naam op voor het nieuwe externe bestand in het dialoogvenster Stylesheetbestand opslaan als.
- Als je Koppelen aan bestaand bestand hebt geselecteerd in het pop‑up menu Layout CSS in, voeg je het externe bestand toe aan het tekstvak CSS-bestand koppelen door op het pictogram Stylesheet toevoegen te klikken, het dialoogvenster Extern stylesheet koppelen in te vullen en op OK te klikken. Wanneer je klaar bent, klik op Maken in het dialoogvenster Nieuw document.
Notitie
Wanneer je de optie Koppelen aan bestaand bestand selecteert, moet het bestand dat je opgeeft al de regels voor het CSS-bestand bevatten.
Wanneer je de lay-out CSS in een nieuw bestand plaatst of koppelt aan een bestaand bestand, koppelt Dreamweaver automatisch het bestand aan de HTML-pagina die je maakt.
Notitie
Internet Explorer voorwaardelijke opmerkingen (CC's), die helpen bij het omzeilen van IE-renderingsproblemen, blijven ingesloten in de kop van het nieuwe CSS-lay-outdocument, zelfs als je Nieuw extern bestand of Bestaand extern bestand selecteert als locatie voor je lay-out CSS.
(Optioneel) Je kunt ook CSS-stylesheets koppelen aan je
nieuwe pagina (niet gerelateerd aan de CSS-lay-out) wanneer je de pagina maakt.
Klik hiervoor op het pictogram Stylesheet koppelen boven het paneel CSS-bestand koppelen
en selecteer een CSS-stylesheet.
Voor een gedetailleerde uitleg van dit proces, zie David Powers zijn artikel, Automatisch een stylesheet koppelen aan nieuwe documenten.
Aangepaste CSS-lay-outs toevoegen aan de lijst met opties
Maak een HTML-pagina die de
CSS-lay-out bevat die je wilt toevoegen aan de lijst van keuzes in het dialoogvenster Nieuw document
. De CSS voor de lay-out moet zich in de kop van de
HTML-pagina bevinden.
Notitie
Om je aangepaste CSS-lay-out consistent te maken met de andere lay-outs die bij Dreamweaver worden geleverd, moet je je HTML-bestand opslaan met de .htm-extensie.
Voeg de HTML-pagina toe aan de map Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts.
(Optioneel) Voeg een voorvertoning van je lay-out (bijvoorbeeld een .gif- of .png-bestand) toe aan de map Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts.De standaard afbeeldingen die bij Dreamweaver worden geleverd zijn 227 pixels
brede x 193 pixels hoge PNG-bestanden.
Notitie
Geef je voorvertoning dezelfde bestandsnaam als je HTML-bestand zodat je het gemakkelijk kunt bijhouden. Als je HTML-bestand bijvoorbeeld myCustomLayout.htm heet, noem je voorvertoning dan myCustomLayout.png.
(Optioneel) Maak een opmerkingenbestand voor je aangepaste lay-out
door de map Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts\_notes
te openen, een van de bestaande opmerkingenbestanden in dezelfde
map te kopiëren en plakken, en de kopie een nieuwe naam te geven voor je aangepaste lay-out. Je kunt bijvoorbeeld
het bestand oneColElsCtr.htm.mno kopiëren en het hernoemen naar myCustomLayout.htm.mno.
(Optioneel) Nadat je een opmerkingenbestand voor je aangepaste lay-out hebt gemaakt, kun je het bestand openen en de lay-outnaam, beschrijving en voorvertoning opgeven.
Prachtige websites ontwerpen in Dreamweaver
Ontwerp, codeer en beheer dynamische websites in een krachtige alles-in-één tool.
