Hoe maak je een... Opmaak
Gepubliceerd op 19 mei 2006
Functie
Iedere webpagina heeft een opmaak nodig. Met lettertypen, lettergrootte, kleur en randen kun je je webpagina goed leesbaar maken. Een goede opmaak is van essentieel belang.
Algemene werking:
- De beste manier om een of meerdere webpagina's op te maken is gebruik te maken van een los CSS (Cascading Style Sheet) bestand.
- Dit bestand bevat definities (styles) die het uiterlijk van de HTML tags bepalen of van speciale elementen als classes of 'id's'
- Het programma Dreamweaver helpt je bovenstaande taken uit te voeren zonder dat je de CSS code hoeft te kennen!
Gerelateerde kennis:
Lay-out (Hoe maak je een..)
Website Express: Zo snel mogelijk online!
Versiering met CSS (Hoe maak je een..)
Methode 1: CSS met behulp van Dreamweaver (aangeraden)
Download hier
[Onbekend
10 Kb
]
Bekijk hier
Cascading Style Sheets Algemeen
In de begindagen van internet werd de opmaak van een HTML pagina direct in dit bestand zelf geregeld, bijvoorbeeld met ‘tags’ als en ‘attributes’ zoals align="left". Met de komst van ‘Cascading Style Sheets‘ werd duidelijk hoeveel nadelen deze oude methode kent.
Het meest belangrijke aspect van CSS opmaak is dat deze gescheiden wordt van de inhoud, ofwel in een apart bestand geplaatst kan worden (zie illustratie). In dit losse bestand kan de opmaak (ofwel ‘style’) van standaard ‘tags’ worden bepaald (zoals , < ul>, < li>, ) en van specifieke onderdelen (classes of id’s). Meerdere HTML pagina’s kunnen gebruik maken van dit CSS bestand voor hun opmaak.
Voordelen van de CSS methode zijn:
- Minder en duidelijke HTML code
- Als je een onderdeel wilt aanpassen die in een serie webpagina’s allemaal aanwezig zijn, bijvoorbeeld de grootte van een titel, hoef je alleen het CSS bestand aan te passen.
- Meer opmaakmogelijkheden
- Ondersteuning van browsers met minder capaciteiten (bijvoorbeeld ‘text-only’) maar ook printers.
Net als HTML kent ook CSS een bepaalde codering. Natuurlijk typen ‘de experts’ die code zelf in, maar andere mensen, die deze codes niet uit hun hoofd kennen, gebruiken een programma als Dreamweaver.
Het maken van een opmaakstijl (‘style’) in Dreamweaver
Ga naar ‘Text’>’CSS Styles’>’New…’ in het horizontale uitklapmenu helemaal bovenin. Je krijgt een nu een menu met enkele opties:
- Selector type: dit is de manier waarop in de HTML verwezen wordt naar een bepaalde ‘style’.
- ‘Class’ (‘’) – gebruikt voor terugkerende elementen, die niet altijd dezelfde ‘tag’ hebben
- ‘Tag’- direct de opmaak van een ‘tag’ bepalen [dit is het beste voor de simpelste zaken als een titel, tekst, afbeelding etc.]
- ‘Advanced (IDs) ’ – voor speciale unieke elementen
- Name/ Tag / Selector: vul hier de naam in van de ‘class’ naam, tagnaam of ID naam
- Define In..: Kies hier altijd voor (‘New Style Sheet’) als je nog geen CSS bestand hebt, ander kies je de bestaande. Nooit ‘This document only’!
Nadat je eventueel een nieuw CSS bestand hebt gemaakt, kun je de stijl gaan definiëren in het menu ‘CSS Style Definition’. Er zijn ontzettend veel opties als lettertype (‘Font’), lettergrootte (‘Size’), dikte/cursief (‘Style’), achtergrond afbeelding (‘Background image’) en verder uitlijningsmogelijkheden (in ‘Block’), grootte en marges (in ‘Box’) en allerlei randen (in ‘Border’) etc.
Belangrijk is dat je daarbij onthoudt dat alle HTML elementen door CSS als blokken gezien worden (dus ook tekstregels)!
Als je bij het creëren van de ‘style’ bij ‘Selector Type’ ‘Çlass’ of ‘Advanced’ gekozen hebt moet je deze nog toewijzen aan een HTML element. Dit doe je door deze te selecteren en bij ‘Properties’ onderaan het scherm de gemaakt ‘style’ uit de ‘stylelijst’ te kiezen.
Wil je een overzicht zien van alle ‘styles’ die hebt gemaakt ga je naar ‘Text’>’CSS Styles’>’Manage Styles’. Hier kun je ‘styles’ toevoegen, verwijderen en veranderen.
TIP: Veel recente versies van Dreamweaver (vanaf MX 2004) gebruiken alleen nog maar styles en geen tags meer. Controleer toch altijd in je code of je webpagina editor deze toevallig niet stiekem heeft toegevoegd!
CSS is toch vrij moeilijk om totaal te beheersen, het belangrijkste is dat je het gebruikt – want het bespaart je uiteindelijk veel werk!
Meer informatie
uitgebreide Nederlandse uitleg
Officiële webpagina (in het Engels)
|
ThinkQuest Lounge