Verken de basisstructuur van een CSS-lay-out en leer hoe u in Dreamweaver pagina's en inhoud ontwerpt met behulp van CSS.
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.
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:
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>
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.
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.
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.
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.
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.
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.
Raadpleeg het artikel Automatisch een stijlpagina toevoegen aan nieuwe documenten (Engels) van David Powers voor een gedetailleerd overzicht van dit proces.
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.
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.
Aanmelden bij je account