Op deze pagina wordt beschreven hoe je met CSS in Dreamweaver een pagina
met 3 kolommen (en een kop-vak) maakt. De breedte van het middelste vak zal
in deze beschrijving zich aanpassen aan de breedte van het venster, terwijl
de linker-kolom en de rechterkolom een vaste breedte krijgen. Voor een pagina
met 3 kolommen zijn echter ook andere oplossingen denkbaar.
Ga ervan uit dat de pagina nog geen opmaak heeft.
een externe stylesheet koppelen door body gegevens op te geven
- Druk in het venster CSS Styles op de tweede knop met het plusteken.
Met de optie Use
CSS Selector vul je in en vakje Selector body
in en na de OK-knop geef je een naam aan de nieuw gemaakte stylesheet.
- In het palet dat nu komt, kies je
- bij Type een font en fontkleur en fontgroote dat
je als uitgangspunt in je site wilt.
- bij Background achtergrondkleur van je site
- bij Box de marges en de padding beide op nul. dit
laatste maakt het mogelijk de pagina helemaal vanaf de rand op te bouwen.
met de div-tag in het html-document de verschillende inhoud-blokken een
naam geven
- Omdat het duidelijk moet worden welke pagina-onderdelen in een bepaald
blok moeten komen moet je ze namen geven. Dit gebeurt met de div-tag. (div
betekent waarschijnlijk division oftewel afdeling) Ga in het HTML-document
over naar de code-weergave. Het gaat natuurlijk om de inhoud tussen de <body>
en de </body> tags. Er is bijvoorbeeld een navigatie-menu dat lin
de linkerkolom moet komen, een basistekst in het midden en wat tekst dat
in de rechterkolom kan. Je moet voor die blokken wat logische namen bedenken
zoals navi voor het navigatiemenu; inhoud voor het mdiielste
vak en rechts voor het rechtervak. Omdat de inhoud tussen het rechter
en linkervak door moet stromen moeten de teksten van linker- en rechter-
vakken boven die van het middenvak inhoud staan. Zorg daarvoor.
( In dit voorbeeld staat de tekst van navigatiemenu boven dat van het rechtervak,
maar dat kan ook andersom.)
- Voeg handmatig in de code de volgende code toe:
<body>
<div id="navi">
.
.
hier komt de tekst en tags van het navigatie-menu
.
.
</div>
<div id="rechts">
.
.
.
hier komt de tekst van de rechterkolom
.
.
</div>
<div id="inhoud">
.
.
.
hier komt de tekst van de middelste kolom
.
.
</div>
</body>
elk vak apart met de stylesheet vormgeven
- Ga terug naar de designweergave in Dreamweaver.
- Klik in venster CSS Styles op de tweede knop met het plusteken.
De optie Use Style Selector staat nog aan en vul in het vakje Selector
#navi in. Let erop dat het woord navi met een
# vooraf gegegaan wordt. Dit geeft een unieke identificatie
voor een selector aan, die op een pagina maar een keer mag voorkomen.
- In het palet kies je nu bijvoorbeeld
- een eigen achtergrond bij Background
- in ieder geval bij Box 9 pixels padding; een breedte
van 100 pixels; een hoogte van 100%
en zet het vakje Float op left. Dit laatste
zorgt ervoor dat de inhoud die na dit div-vak komt er rechts van stroomt;
bij de tab Positioning is er nu ook al wat ingevuld,
maar vul bij Type fixed in. Dit zorgt ervoor
dat bij scrolling het navigatievenster blijft staan (alsof het een frameset
is!) Dit fixed is niet te selecteren, je moet het met de hand invullen.
- bij Border speel je eventueel wat met de drie waarden
voor een randje.
- Na dit afgerond te hebben zie je al enig effect in de design-weergave,
al moet je er niet vanuit gaan dat het een precieze weergave is. Daarvoor
moet je dat pagina wel testen met F12. Let wel dat sommige
webbrowsers zoals Safari een externe style-sheet in het cache-geheugen opslaat.
Bij een wijziging in de style-sheet zie de wijziging niet doorgevoerd in
de webbrowser. Daarvoor moet je eerst wel het cache-geheugen legen, voor
dat je het effect opnieuw in de browser terugziet.
- Maakt zo ook een #rechts aan ook met een hoogte: 100%;
float: right; achtergrondkleur en een vaste breedte in pixels.
- Ook een #inhoud die geen vastgestelde hoogte krijgt maar
waarvan de linkermarge breder is dan de breedte van het linkervak (inclusief
twee keer de padding en de randbreedte) bijvoorbeeld 1+9+100+9+1+15=135
pixels (linkerrand_navi + linkerpadding_navi + breedte_navi + rechterpadding_navi
+ rechterrand_navi + marge_inhoud).
De rechtermarge van #inhoud is groter dan de totale breedte van de rechterkolom.
Op deze pagina waar je nu naar kijkt, is er nog een rand links en een rand
rechts toegevoegd.
- Als de inhoud met een <h1>-kop begint, kun je die natuurlijk ook
gewoon van een stijl-selector voorzien met een aparte achtergrondkleur.
Je moet dan wel negatieve waarden voor de linker en rechtermarge aangeven
om hem helemaal links of rechts te laten beginnen. Je kunt daarna door de
linkerpadding in te stellen de positie van de tekst weer aanpassen.
Er zijn ook mogelijkheden om een pagina met tabellen of frames vorm te geven.
Hier
lees je een discussie wat de kracht van vormgeven met style-sheets kan zijn:
Thinking outside the grid. De techniek die daar gebruikt wordt maakt
naar min eerste gezicht gebruik van de categorie
Positioning waarbij
Type: absolute waarbij je de waarden van de linkerbovenhoek van het
vak met
top en
left kunt instellen. Het levert bijvoorbeeld
de volgende code op:
#vak {
position: absolute;
top: 60px;
left: 303px;
}
Hier gaan we nader op in met een PhotShop-oefening. In de oefening hierboven
is er echter een meer "liquid" ontwerp. de grootte van de kolom en
tekst past zich aan de venstergrootte aan: een vloeibaar ontwerp. Dit is ook
zo met de pgina waar je nu naar kijkt. de breedte van dit witte vlak past zich
aan aan de breedte van het browser-venster.
