Beknopte Handleiding Dreamweaver

76
1 Dreamweaver CS3 en CSS Een inleiding op CSS met Dreamweaver Peter Harmsen Ruud Koortens

description

Beknopte handleiding XHTML, CSS

Transcript of Beknopte Handleiding Dreamweaver

Page 1: Beknopte Handleiding Dreamweaver

1

Dreamweaver CS3 en CSS Een inleiding op CSS met Dreamweaver

Peter Harmsen Ruud Koortens

Page 2: Beknopte Handleiding Dreamweaver

2

Inleiding Na het doorwerken van deze handleiding heb je een redelijk zicht op CSS. Je weet ook goed hoe je met behulp van Dreamweaver de CSS in een webpagina of een website kunt implementeren. Het is wel noodzakelijk dat je een basiskennis HTML hebt. Bij het maken van deze handleiding is gebruik gemaakt van de cursus “XHTML en CSS” van Ruud Koortens en Frans Peeters. Uiteraard zijn opmerkingen van harte welkom! Oktober 2008, Peter Harmsen Ruud Koortens

Page 3: Beknopte Handleiding Dreamweaver

3

1 Kennismaking met Dreamweaver Je staat aan het begin van een cursus die je enigszins wegwijs zal maken in Adobe’s Dreamweaver. Dreamweaver is een professioneel programma’s dat door zeer veel webdesigners wordt gebruikt. Het is eigenlijk de standaard in webdesign-land. In principe kun je een hele mooie site maken met Dreamweaver, zonder het tikken van een enkele regel HTML-code. Toch is het verstandig om er voor te zorgen dat je kennis van HTML hebt. Soms gebeuren er onverwachte dingen en dan is het goed om in de HTML-code te kijken. Het programma heeft ongelofelijk veel mogelijkheden en deze handleiding laat je daarom ook maar beperkt kennis maken met het programma. Er is veel materiaal gemaakt om je te verder te verdiepen in het programma. Dit eerste hoofdstukje is bedoeld om je kennis te laten maken met de belangrijkste onderdelen van het programma. Sommige schermen kunnen afwijken van je eigen versie van Dreamweaver. Dreamweaver is ook beschikbaar in het Nederlands. In deze handleiding gaan we uit van de Engelse versie. Na het starten van het programma krijg je meestal eerst het welkomsscherm:

Indien je dit scherm niet wilt, kun je door Edit>Preferences en dan bij de categorie General Show Welcome Screen aan of af te vinken. We kiezen nu voor Create New HTML en krijgen dan de standaard werkruimte:

Page 4: Beknopte Handleiding Dreamweaver

4

Knoppenbalk

Docum ent werkbalk

Tag selector

Properties-panel

Lineaal

Panels

De werkruimte is erg flexibel. Voor een demonstratie:www.peterharmsen.nl/cursus_dreamweaver/panels.swf

Voor het ontwerp is het erg handig om een rasterachtergrond te hebben. Dit stel je in volgens de schermfoto zoals hiernaast. Er is nog meer in te stellen maar voor het begin voldoen de standaardinstellingen goed. De knoppenbalk is een ander belangrijk onderdeel van de werkruimte:

Standaard staan de knoppen uit het Common-menu vooraan. Indien je met je muis over de knoppen gaat, licht kort de functie van de knop op. Sommige knoppen, zoals Image, hebben een menu waar mee je de verschillende mogelijkheden dan kunt kiezen. Voorlopig is het het handigst om de knoppen met Common zo te laten staan. De knoppenbalk is vooral bedoeld om elementen toe te voegen. Het gedeelte dat informatie geeft over eigenschappen van elementen is het Properties Panel:

Page 5: Beknopte Handleiding Dreamweaver

5

Indien je een element selecteert op een pagina, zie je de eigenschappen van dat element in het Properies Panel en kun je die eigenschappen wijzigen.

Open het bestand kennismaking.html Indien je met de muis in de kop gaat staan zie je in het Properties-panel dat het Format Heading 1 is en de rest van de tekst is Paragraph.

Je kunt in het Properties panel allerlei dingen instellen. In deze handleiding ligt sterk de nadruk op CSS. We gebruiken het Properties panel daarom zeer terughoudend als het om het opmaken van een pagina gaat. De Document werkbalk heeft een aantal belangrijke onderdelen:

Bij het bekijken van je webpagina heb je steeds de mogelijkheid om te kiezen tussen Code View en Design View. Indien je de pagina kennismaking.html bekijkt in Code View, zie je de gegenereerde HTML-code. Dreamweaver genereert dus automatisch de juiste tags voor het DOCTYPE, xml-namespace en de karakterset. De standaardinstelling voor DOCTYPE is transitional. We laten dit voorlopig zo. Je hebt altijd de mogelijkheid om ook rechtstreeks in de HTML-code te werken. Je kunt in de document werkbalk rechtstreeks de titel van je webpagina invoeren. De document werkbalk bevat nog meer opties. Deze zullen we in deze handleiding niet gebruiken. Bij het navigeren door je webpagina is de Tag Selector erg handig:

Indien je met je muis in de kop van de pagina klikt (kennismaking.html) dan geeft de Tag Selector aan waar je bent: in de body bij heading 1. Bij het gebruik van CSS zal duidelijk worden hoe handig de Tag Selector is! Een eenvoudig voorbeeld Het definiëren van een site We lopen de belangrijkste stappen voor het maken van een site in Dreamweaver door.

1. Het is verstandig om als eerste je site een naam te geven. Dreamweaver maakt dan een map aan waarin alle bestanden die onderdeel zijn van de site, worden opgeslagen. Klik op Site>Manage Sites

Page 6: Beknopte Handleiding Dreamweaver

6

Klik op in het menu vervolgens op Unnamed Site 1, je krijgt dan het venster met de instellingenvoor je site:

Wijzig voorlopig alleen de sitenaam en de map waar de bestanden moeten worden opgeslagen. overleg met je docent over de plaats van de map. In deze handleiding wordt de site “Dreamweaver_cursus” genoemd.

2. We gaan met behulp van de juist besproken onderdelen een zeer eenvoudige webpagina maken. Maak een

nieuwe webpagina aan: File>New File. Je krijgt dan het volgende scherm:

Kies HTML en bij Layout <none> en kies Create. Je hebt nu een blanco pagina. Geef met File>Save As index de pagina een naam. Je hoeft de extensie niet op te geven.

Page 7: Beknopte Handleiding Dreamweaver

7

Je ziet nu aan de rechterkant in het panel>files het volgende:

Er is een bestand aangemaakt in de site met de naam index.html. Je hebt zo dus meteen een goed overzicht over welke bestanden er deel uitmaken van je site

3. Geef de pagina een titel door in de Document Werkbalk het veld title te vullen. Tik op de pagina: Welkom op mijn webpagina! Ga naar de volgende regel en tik: In deze cursus gaan we nader kennismaken met Dreamweaver. Selecteer de eerste regel en geef met behulp van het Properties panel deze als eigenschap Heading 1.

4. Ga weer een regel naar beneden en kies uit de knoppenbalk de knop Hyperlink. Je krijgt het scherm:

Text: de tekst die de link vormt; tik KNMI Link: de bron waar naar toe gelinkt moet worden: http://www.knmi.nl (vergeet http:// niet!) Target: hier kun je eventueel kiezen voor _blank om een nieuw venster te openen als op de link wordt geklikt. De rest mag je leeg laten. Indien je naar een andere bron wilt linken binnen je site dan kun je met de map browser, naast Link, ook een koppeling maken. Download van www.peterharmsen.nl/cursus_dreamweaver het bestand knmi.jpg. Sla dit op in de map images van je site. Klik op de knop Images. Je krijgt het scherm:

Page 8: Beknopte Handleiding Dreamweaver

8

Klik op knmi.jpg, je zie dan meteen een Image preview. Klik op OK, je krijgt dan nog het volgende scherm:

Maak er een gewoonte van om het veld Alternate text in te vullen. Dit is wat oplicht als een bezoeker op de pagina met de muis over het plaatje gaat. Tik: logo KNMI en klik op OK. Je plaatje staat in de pagina. We maken nu van het plaatje ook een link naar de site van het KNMI. Indien je het plaatje selecteert kun je in het Properties panel de eigenschappen zien:

Je kunt nu bij Link de volledige link naar het KNMI invullen.

Indien je nu in de Code View kijkt, zie je de HTML-code die bij de pagina hoort! Natuurlijk wil je ook weten hoe de pagina er uiteindelijk uitziet. Een eerste indruk van de pagina krijg je door de Design View te gebruiken. Het is altijd erg verstandig om een Preview in Browser te doen. Kies File> Preview in Browser of druk op F12. Er wordt eerst nog gevraagd of je wijzigingen wilt opslaan. Doe dit. Je ziet vervolgens de gemaakte pagina in je favoriete browser.

Page 9: Beknopte Handleiding Dreamweaver

9

Dreamweaver en een locale webserver Indien je de beschikking hebt over een locale webserver, zoals Xampp, Wamp etc., dan kun je de sitedefinitie daar mee uitbreiden. Kies uit het menu Site>Manage Sites, kies daar de sitenaam die je eerder gekozen hebt en klik op Edit. Je krijgt dan het volgende scherm:

Kies daar voor Local?network en kies voor de Remote folder de plaats van de map htdocs (voor Xampp) of www (voor Wamp). Je kunt nu je bestanden lokaal uploaden door Site>Upload te kiezen. In je broeser kies je vervolgens voor localhost/bestaandsnaam

Page 10: Beknopte Handleiding Dreamweaver

10

Rechtstreeks in de Code View werken

1. Maak een nieuwe pagina aan en geeft deze en naam. 2. Klik op Code View om de webpagina in de html-opmaak te zien. We gaan nu kort wat toevoegen in de

Code View. 3. We geven de pagina even een titel en zetten in de body even wat tekst. Geef de pagina een titel door iets

te tikken tussen de title-tags. Als je in de body een <h1> probeert te maken reageert Dreamweaver ogenblikkelijk met een menu:

Dit wordt code completion genoemd; het programma helpt je met aanvullen. Tik een tekst en sluit de h1-tag. Je merkt dat Dreamweaver meteen weet dat de <h1> afgesloten moet worden bij de code completion! Het werken met de code-editor is niet waarom je met Dreamweaver wilt werken. De kracht van het programma zit in de visuele opmaak: What You See Is What You Get (WYSWYG). Het is hetzelfde principe als bij een tekstverwerker. De opmaak op het scherm, is de opmaak op papier. Bij Dreamweaver is de opmaak op het scherm, de opmaak op de webpagina. Soms lukt dat niet altijd omdat er soms onverwachte dingen gebeuren als je je pagina in een browser ziet. Het bekijken van je pagina in Code View helpt je dan met het oplossen van het probleem. Een ander probleem kan zijn dat de onverwachte weergave komt door de browser. Niet alle browsers niet reageren dezelfde manier op HTML en CSS. We gaan dat nog uitgebreid bekijken!

Page 11: Beknopte Handleiding Dreamweaver

11

2

Scheiding tussen structuur, inhoud en opmaak. Een theoretische beschouwing.

Een uitgewerkt voorbeeld CSS met Dreamweaver

De structuur (en de inhoud) van een document regel je met (X)HTML en de opmaak leg je vast in CSS. Die opmaakbeschrijving, de CSS, leg je vast in een stylesheet. Dit stylesheet is vooralsnog een onderdeel van de webpagina. We zullen later zien dat je er ook een apart bestand van kunt maken dat dan door een of meerdere webpagina’s van je site wordt aangeroepen. Zo kun je centraal een groot aantal zaken rond de opmaak van je webpagina regelen. Alles wat mogelijk was met HTML kan met CSS, maar alles wat je met CSS kunt, was lang niet mogelijk in HTML. Bij een goed ontworpen site wordt vaak onderstaande driehoek gehanteerd. Met (X)HTML regel je de structuur van je webpagina, met CSS regel je de opmaak van je elementen en het gedrag van je pagina wordt met DOM (Document Object Model) geregeld. We gaan in deze handleiding niet in op DOM; het gedrag.

Wat moet je er nu concreet bij voorstellen? Onderstaande code is een voorbeeld van een stylesheet: <style type="text/css"> body { font-family: Arial, Helvetica, sans-serif; } h1 { font-family: Verdana; } </style>

In dit stylesheet hebben we opgenomen wat het lettertype voor de body is en wat het lettertype voor de h1 is. Vooralsnog zetten we deze code dus in de head van de webpagina. Je kunt het ook als een apart bestand opnemen en er binnen de webpagina naar laten verwijzen. Je kunt zo meerdere webpagina’s van je website naar hetzelfde stylesheet laten verwijzen. Het grote voordeel is nu dat als je besluit om het lettertype van de body te wijzigen dat je dat maar op een plek in het styleheet hoeft te doen en vervolgens wordt in alle gekoppelde webpagina’s het lettertype van de body gewijzigd! CSS moet volgens een bepaalde set van regels worden vastgelegd. Het is te vergelijken met de grammatica oftewel de syntaxis van een taal. De regels zijn als volgt:

• Eerst wordt een selector genoemd. • Vervolgens staat er een accolade. • Dan komt er een attribuut. • Na de attribuutnaam volgt een dubbele punt. • Daarna volgt de waarde van het attribuut. • Elke declaratie wordt afgesloten met een puntkomma. • Het blok met declaraties wordt afgesloten met een accolade.

Page 12: Beknopte Handleiding Dreamweaver

12

Een grafische weergave:

Je geeft eerst de selector aan: in dit geval gaat het over de tag h1 en daarna de declaratie die uit 2 onderdelen bestaat: het attribuut en de waarde. Wil je bijvoorbeeld iets vastleggen over de achtergrondkleur dan gaat dat als volgt: body { background-color: #FFFF66; }

De achtergrond is een kenmerk van de body (de selector) dus de background-color is het attribuut dat als waarde een kleur heeft (#FFFF66) Let er op dat elke declaratie wordt afgesloten met een puntkomma. In het de volgende pagina’s wordt uitgebreid uitgelegd hoe je met CSS je webpagina’s kunt opmaken. Om CSS te kunnen begrijpen is het noodzakelijk dat je goed begrijpt hoe CSS werkt. We beginnen daarom eerst met wat theorie rond CSS. Overerving en cascade De afkorting CSS staat voor Cascading Style Sheets. Een cascade is letter vertaald een waterval, de term slaat eigenlijk op een waterval met verschillende plateaus en soms wordt daarom cascade ook wel vertaald als trapsgewijs. De naam is gekozen omdat stylesheets elkaar kunnen aanvullen, overrulen via overerving of er zijn meerdere stijlregels van toepassing op een element. Het kan zo zijn dat er voor een element meer dan een stijlregel van toepassing is. Er zijn duidelijke regels omtrent welke regel het belangrijkste is. Zo wet je altijd vooraf wat het effect is van meer dan 1 regel op een element in je webpagina. Elementen kunnen ook eigenschappen erven van het bovenliggende element. In CSS heet dit inheritance of in het Nederlands, overerving. Het betekent dat een kindelement de waarde van een bepaalde eigenschap overneemt van het ouderelement. Een systeem dat is afgekeken van de natuur. Je ziet dat dan ook in de biologie: kinderen erven ook eigenschappen van hun ouders, denk aan haarkleur, ogen etc.

Page 13: Beknopte Handleiding Dreamweaver

13

Boomstructuur van overerving Hieronder zie je de boomstructuur van een document. Hier spelen de begrippen als parent, child en afstammeling een belangrijke rol.

De bijbehorende HTML code is: <html> <head> <title>Een voorbeeld</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link href="opmaak.css" rel="stylesheet" type="text/css" media="all" /> </head> <body> <h1>Een kop</h1> <p>Een alinea met <em>nadruk</em> op een woord.</p> <div> <ul> <li>een item van een opsomming</li> <li>nog een item</li> </ul> </div> </body> </html>

• html is het hoofdelement of de root • alle andere elementen zijn afstammelingen van html • h1, p, div zijn kinderen van body • em is een child van p • ul is een child van div • li is een child van ul en afstammeling van div en body

Met andere woorden: het element HTML bevat de elementen <head> en <body>, deze elementen bevatten op hun beurt andere elementen die weer elementen kunnen bevatten. Bijvoorbeeld de genoemde div(ision) bevat een ul-element. De division is hier het bovenliggende element ten opzichte van ul. Het ul-element (ongeordende lijst) bevat twee op zijn beurt lijstitem elementen, het em- element is in de paragraaf (<p>) geplaatst en benadrukt het stukje tekst dat daar weer in is geplaatst (<em>).

Page 14: Beknopte Handleiding Dreamweaver

14

De boomstructuur van het document heeft gevolgen voor het stijlblad. Zie het voorbeeld uit een denkbeeldig stijlblad: body { font-family: Arial, Helvetica; } h1 { font-family: Verdana; } p { } em { } div { font-family: Verdana; } ul { } li { }

Alle tekst in het body-element heeft Arial, Helvetica als lettertype definitie. Het lettertype in h1 is niet hetzelfde lettertype maar wordt overschreven (overruled) door de eigen definitie. Het p-element krijgt toch weer Arial, Helvetica, net als em. Het ul- en li-element krijgen echter Verdana als lettertype toegewezen omdat deze in de bovenliggende division is vastgelegd. Een kritische lezer zou nu overigens kunnen opmerken dat het in dit geval zinloos is om het p-element in het stijlblad te definiëren, er is immers niets nieuws in de definitie van p. Indien je de HTML-code in Dreamweaver plakt (in de Code View) geeft dat in de Design View het volgende resultaat:

Er was ook een stylesheet opgegeven. Deze moet in de header van de webpagina staan: ……… <style type="text/css"> <!-- body { font-family: Arial, Helvetica, sans-serif; } h1 { font-family: Verdana; } p { } em { } div { font-family: Verdana; } ul { } li { } --> </style> </head> ………

Page 15: Beknopte Handleiding Dreamweaver

15

Enige opmerkingen • Het stylesheet staat dus tussen <style> en </style> • Aan het STYLE element wordt minimaal het TYPE attribuut toegevoegd, dat het Internet Media (MIME) type

definieert van het bestand waarnaar verwezen wordt. Voor Cascading Style Sheets is dat "text/css. We gaan hier verder niet op in.

• Een browser die het STYLE element niet kent, zou de inhoud moeten negeren. Zeker bij oudere browsers is

dat niet altijd het geval en bestaat er de kans dat de stijlregels als normale tekst worden weergegeven. Om dat te voorkomen, kunnen bij Cascading Style Sheets de stijlregels binnen de code voor commentaar geplaatst worden. Dreamweaver doet dit overigens automatisch.

We zullen zien hoe Dreamweaver de CSS-code vrijwel automatisch genereert.

Page 16: Beknopte Handleiding Dreamweaver

16

3 Het CSS-panel van Dreamweaver In het voorgaande heb je kennis gemaakt met CSS. Dreamweaver heeft een panel waarmee je volledige controle over je stylesheet hebt. Laat het CSS-Panel uitklappen door op CSS te klikken:

Zorg dat de modus All is geselecteerd. Je ziet dan alle elementen staan met hun eigenschappen. In de All modus zie je dus alle stijlregels die op de pagina betrekking hebben. Als je op een element klikt zie je in het properties-venster (van het CSS-Panel!) de definiëring zoals die in het stylesheet staat. Een andere prachtige optie is dat je per element kunt overzien wat de eigenschappen zijn en hoe die samenhangen met andere stijlregels. In het voorgaande boomdiagram zag je al het van groot belang is dat je de structuur van het document goed in je hoofd moet hebben. De cascade (waterval) kan mede ontstaan omdat er voor sommige elementen meerdere regels zijn. Klik in de Design Mode op het stukje tekst “nog een item”. Zorg er voor dat tag-selector (zie rode pijl) de <li> selecteert. In het CSS-Panel kies je voor Current. Je krijgt dan de eigenschappen van je tag-selectie:

Page 17: Beknopte Handleiding Dreamweaver

17

We bekijken het CSS-Panel wat nauwkeuriger. Zorg er voor dat je “Show cascade of rules for selected tag” hebt geselecteerd, je ziet dan de samenhang tussen de regels.

Je ziet als eerste een samenvatting voor de selectie; de <li>. De font-family is Verdana! Logisch want deze werd gedefinieerd in de <div> waar <li> een afstammeling van is. Als je met je muis over font-family gaat, komt er een melding:

en dat klopt uiteraard! In het gedeelte van de Rules kun je zien welke regels betrekking hebben op <li>. Eigenlijk in tekstvorm het boomdiagram. Een mooi voorbeeld van een cascade!

Page 18: Beknopte Handleiding Dreamweaver

18

Indien je in de rules nu de <body> selecteert lijkt er iets eigenaardigs te gebeuren. De regel over font-family is doorgestreept! Dreamweaver lijkt aan te geven dat de style-regel over font-family die li van de body erft niet kan! Toch is dat logisch omdat we in de <div> een ander font gekozen hebben (Verdana) en Dreamweaver meldt dat dan ook keurig als je met je muis over de doorgestreepte font-family gaat:

Door

de style-regel in de <div> wordt de regel van de <body> overruled! Zo kun je dus goed greep houden over je regels in het stylesheet!. Wil je nu bijvoorbeeld alle regels zien die betrekking hebben op <div> dan

moet je dus eerst je cursor in de <div>op je webpagina zetten! Om te beginnen is het aan te raden om in de ALL mode te werken. Indien je verrast bent over bepaalde lay-out dan kan de Current mode uit het CSS-Panel soms zeer verhelderend werken Er zit nog een aantal buttons op het CSS-Panel. Deze worden in kleine stapjes in het vervolg besproken.

Page 19: Beknopte Handleiding Dreamweaver

19

4

1. Tag selector

Soorten Selectors Er zijn 3 hoofdsoorten selectors te onderscheiden

2. Class selector 3. Advanced selector, met als belangrijkste: ID-selector, Pseudo selector en Descendant selector

Met behulp van Dreamweaver zullen we ze gaan bekijken. Tagselector Deze wordt gebruikt om de opmaak van een tag te verfijnen. Stel we willen de <h1> een oranje kleur geven. We gaan dan als volgt te werk:

1. Open vanaf www.peterharmsen.nl/cursus_dreamweaver/voorbeeld2.html. 2. Geef als titel: een pagina met CSS gemaakt. 3. Kies in Dreamweaver de Design mode en plak de gegeneerde tekst in de pagina.

Je hebt dan onderstaand beeld:

Een aardig detail is overigens dat je als bestandsnaam nu voorbeeld2.html* ziet. Het * duidt er op dat je de laatste wijzigingen nog niet opgeslagen hebt. Probeer steeds tussentijds op te slaan! Selecteer Inleiding en geef deze met behulp van Format in het Properties-Panel het kenmerk Heading1. In de Code view zie je nu het volgende: <body> <h1>Inleiding </h1> <p>Lorem ipsum dolor sit amet,……

Je ziet dat de inleiding nu een h1-tag heeft. We gaan de h1-tag met behulp van CSS oranje maken. Zorg dat het CSS-Panel uitgeklapt is en klik op New CSS Rule (zie onderstaande figuur)

Page 20: Beknopte Handleiding Dreamweaver

20

Je krijgt dan de gelegenheid om de stijlregel te maken:

Kies voor Tag en dan h1 en voor This document only; we hebben dan gekozen voor de opmaak van de h1 en de opmaakt geldt alleen voor deze pagina. We hebben nu dus de selector gedaan. Nu moet de declaratie (attribuut met waarde) gemaakt worden. Klik op OK om de declaratie te maken.

Page 21: Beknopte Handleiding Dreamweaver

21

We willen nu alleen de kleur wijzigen dus zetten we Color, (het attribuut) op oranje (de waarde): #FF6600. Je begrijpt dat hier erg veel mogelijkheden liggen voor de opmaak van deze tag (en uiteraard vele anderen!) Klik op OK om de declaratie af te ronden en te bekijken hoe de kop er nu uitziet! In de Code View zie je dat in de head van het document het stylesheet terug ziet met de regel: <style type="text/css"> <!-- h1 { color: #FF6600; } --> </style>

Het is geheel in overeenstemming met de structuur zoals aangegeven is in de inleiding: selector { declaratie } In het CSS-Panel zie je de stijlregel ook terug: Opdracht

Page 22: Beknopte Handleiding Dreamweaver

22

Geef de body tag de volgende declaratie: body { font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 14px; background-color: #FFFF99; }

Controleer met CSS-Panel of het gelukt is: Je ziet overigens dat de inleiding ook de opmaakkenmerken heeft gekregen van de body. Dat is logisch omdat de h1-tag ook “in” de body zit. De h1-tag erft de kenmerken van de body; het is een afstammeling van de body. Dit is een ander belangrijk aspect van CSS. Voor beginnende CSS-ers leidt dat nog wel eens tot verwarring. Het aspect erven (overerving) wordt nog uitgebreid besproken.

Page 23: Beknopte Handleiding Dreamweaver

23

De Class selector De class selector wordt eigenlijk gebruikt voor het inrichten van de basiselementen op je webpagina. Het grote kenmerk is dat je ze meerdere keren kunt gebruiken. Je kunt het vergelijken met een opmaakstijl in Word. Stel dat we boven elke alinea van de webpagina een kopje willen zetten. Dit is een mooi voorbeeld van het gebruik van een klasse (class) Zet boven elk alinea nu deel1, deel2, deel3:

We maken nu een klasse tussenkop. De stappen verlopen vergelijkbaar als bij de h1-tag. Kies weer New CSS Rule uit het CSS-Panel. Kies nu voor class in het volgende venster:

Maak voor deze klasse de volgende kenmerken aan:

Kijk nu met de Codeview naar de uitbreiding van het stylesheet:

Page 24: Beknopte Handleiding Dreamweaver

24

.tussenkop { font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 18px; font-weight: bold; color: #000000; }

Een klassennaam begin dus altijd met een punt (in het Engels meestal een period genoemd). Kies herkenbare namen voor een klasse! Ook in het CSS-Panel zie je de nieuwe stijlregel terug. Nu moeten we nog de tussenkopjes de stijlkenmerken meegeven. Het snelst gaat dat door met de muis in het kopje te klikken en vervolgens in het Properties-Panel de style toe te wijzen:

In de Codeview kun je nu zien dat er een klasse tussenkop wordt gebruikt : <p class="tussenkop">deel 1</p>

Deze klasse heeft dus betrekking op alle tekst die tussen <p> en </p> staat.

Page 25: Beknopte Handleiding Dreamweaver

25

De Advanced selector De eerste advanced selector die we bekijken is de identifier ofwel id. Deze worden meestel gebruikt om een bepaald gedeelte van de pagina aan te geven (een division, div); de bouwstenen van de pagina. Het is enigszins te vergelijken met het maken van een sjabloon. Een veel gebruikte structuur bij een webpagina is de volgende:

Er is een koptekst, vaak met een logo of een plaatje, links staat de navigatie en rechts de hoofdinhoud van een pagina. De divisions (div) zijn zeer geschikt om deze verschillende onderdelen van de pagina te benoemen. Er zijn 2 manieren om een pagina van div’s te voorzien. Indien je al tekst hebt is de volgende manier het handigst:

1. Open vanaf www.peterharmsen.nl/cursus_dreamweaver/voorbeeld2.html. 2. Klik in de bovenste alinea 3. Selecteer met de tagselector de gehele alinea:

Page 26: Beknopte Handleiding Dreamweaver

26

4. Kies uit de knoppenbalk (Common) de knop Insert Div Tag:

5. Vul de gegevens volgens onderstaand scherm in:

Je kies voor Wrap around selection omdat je wilt dat de div geopend wordt aan het begin van de selectie en gesloten wordt na het laatste teken van de selectie. De div wordt gebruikt als een soort “verpakking”; vandaar de term wrap, Engels voor verpakken. Je ziet het ook terug in de Codeview: <div id="koptekst">

<p>Proin….. elit. </p> </div>

Je kunt nu vervolgens de tweede alinea als div navigatie geven, de derde alinea als div hoofdinhoud en de vierde alinea als div footer. De werkwijze is exact dezelfde als bij de eerste alinea. Na afloop kun je goed zien dat Dreamweaver keurig een gestippeld kader zet om de verschillende divisions. Indien je in een div klikt zie je dat de tagselector keurig de betreffende div met naam laat zien. Dit is straks bijzonder handig bij het opmaken. We zullen namelijk nog wel wat aan de layout moeten doen om het wat te gaan lijken op de indeling van de pagina zoals aan het begin getoond! Indien je een kale pagina hebt, kun je ook beginnen door eerst divisions te maken. Maak een nieuwe pagina aan en kies weer uit de knoppenbalk (Common) de knop Insert Div Tag:

Page 27: Beknopte Handleiding Dreamweaver

27

In de Design View geeft dat als resultaat:

Kies weer uit de knoppenbalk de knop Insert Div Tag:

De divisions moeten achterelkaar komen dus moet je voor het invoegpunt (insert) kiezen voor na de sluittag van de eerste division “koptekst”. Je voert de stappen ook nog een keer uit voor de div “hoofdinhoud”. Het uiteindelijke resultaat is dan het onderstaande:

Je kunt nu in de verschillende divisions tekst plakken of tikken Pseudo selector We bekijken een aantal voorbeelden van de pseudo-class selector. Deze zullen we alleen inzetten om de links in een pagina te stylen. We geven eerst een opsomming: :hover hoe ziet een link eruit als je met je muis er over heen gaat :active hoe ziet een link eruit als deze actief wordt :focus hoe ziet de link eruit als deze de focus heeft :visited hoe ziet een bezochte link eruit In Dreamweaver kun je de instellingen van elk van de elementen snel instellen. Open het bestand: www.peterharmsen.nl/cursus_dreamweaver/links.html. We gaan de links vormgeven. Klik op New CSS Rule in het CSS-Panel. Tik in het veld Selector een : Je krijgt dan het volgende als je daarna op het pijltje klikt:

Page 28: Beknopte Handleiding Dreamweaver

28

We kiezen voor :link en klikken op OK. Je krijgt dan vervolgens de opmaakmogelijkheden voor dit element:

Voor een link is vooral de Decoration van belang: willen we onderstrepen (underline), boven een streepje (overline), doorstrepen (line-through, knipperen (blink) of niets (none). Het is ook mogelijk meerdere effecten tegelijk toe te passen. Realiseer je dat bij het aanbrengen van een link, de standaardinstelling is dat er een streepje wordt aangebracht! Een voorbeeld van een link zonder streepjes, ook niet bij aangeklikte links en met een achtergrond is bijvoorbeeld deze: <!-- a:link { background-color: #FFFF99; text-decoration: none; } a:hover { color: #FF9966; } a:visited { text-decoration: none; } --> </style>

Page 29: Beknopte Handleiding Dreamweaver

29

De descendant selector Bij een descendant selector wordt de stijldeclaratie alleen toegepast wanneer het element een descendant (afstammeling) is van een of meerdere andere elementen. Stel je hebt in een webpagina de volgende structuur:

Stel nu dat je alleen de opmaak wilt wijzigen van de gekleurde em-tags. Dit kun je niet doen door in je stylesheet op te nemen: em {color:#FFC000;}. Alle em-tags krijgen dan deze kleur en dat willen we niet. Alleen de <em> die afstamt van <li> moet deze opmaak krijgen. We gebruiken nu een descendante selector, alleen geldig dus voor een bepaalde afstammeling: li em {color:#FFC000;} Nu krijgt de em-tag alleen de opmaak als deze afstamt van <li>. Het is verplicht om een spatie te gebruiken tussen li en em. Er zijn natuurlijk veel meer mogelijkheden. Stel dat je besluit om voor de em-tag in de <div id=”inhoud”> ook een bepaalde opmaak te kiezen, dan doe je dat op de volgende wijze: #inhoud em{color:#FF9000;} In Dreamweaver is dat natuurlijk gewoon te doen met het CSS-Panel en dan New CSS Rule:

Page 30: Beknopte Handleiding Dreamweaver

30

Let er goed op dat je zelf de spatie aanbrengt! Ook voor een class Je kunt dit ook voor een class selector gebruiken. Stel we hebben de volgende regel in ons stylesheet staan: p.intro a {color: #00ABED;} Dit betekent dus dat elke link (a) die een afstammeling is van een paragraph (p) en die deel uitmaakt van de klasse intro, de kleur lichtblauw krijgt. Je kunt deze stijlregel nog wat flexibeler maken door het als volgt te doen: .intro a {color: #00ABED;} Nu kun je deze van toepassing laten zijn op elke tag die je van toepassing laat zijn binnen de klasse intro: Bijvoorbeeld door het op de volgende manier in je html-code op te nemen: <h1 class=”intro”> Dreamweaver heeft geen enkel probleem met bovenstaande constructie:

1. Maak een nieuwe pagina aan en zet daarin wat tekst Lorem Ipsum 2. Maak met het CSS-Panel de stijlregel aan voor de klasse intro:

Page 31: Beknopte Handleiding Dreamweaver

31

3. Selecteer de eerste alinea en geef deze met behulp van het Properties Panel het formaat Heading1 (h1):

4. Vervolgens kun je bij style de gewenste styl intro kiezen:

5. Als je nu in Code View kijkt, zie je het gebruik van de klasse:

Page 32: Beknopte Handleiding Dreamweaver

32

<style type="text/css"> <!-- .intro { color: #00ABED; } --> </style> </head> <body> <h1 class="intro">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus volutpat tortor vitae libero. Suspendisse sodales velit eu libero. Praesent egestas ipsum in risus. Donec sed quam. Mauris eu massa. Aenean consectetuer, nulla sit amet vulputate faucibus, augue leo adipiscing mi, sit amet vulputate lectus metus ut diam. Vestibulum ut leo. Donec a lorem eget turpis pharetra vulputate. Fusce ultricies, libero in sagittis tempus, quam massa rhoncus nulla, nec ultricies sem lacus et diam. Etiam lobortis porttitor ante. Nullam vel turpis id elit posuere porta. </p>

</h1>

Page 33: Beknopte Handleiding Dreamweaver

33

Hiërarchie van de regels Er bestaan duidelijke regels over de volgorde van belangrijkheid (hiërarchie of cascade) als er meerdere regels van toepassing zijn op een element in de webpagina. Dreamweaver is zeer goed in staat om de volgorde van de regels te tonen. Het valt een beetje buiten het bestek van deze handleiding om daar heel uitgebreid op in te gaan maar de hoofdlijnen vermelden we toch. Allereerst is er de volgende volgorde van belangrijkheid:

• Browser (stylesheet van de browser) • Extern stylesheet • Ingesloten stylesheet • Inline style

De laatstgenoemde is dus de belangrijkste! Maar wat nu als er een stylesheet is van waaruit meerdere stijlregels betrekking hebben op hetzelfde element? Welke regel gaat dan voor? Je moet dan gaan kijken naar de waarde (specificatie) van de selector. De selector met de hoogste waarde gaat dan voor (“wint”). De waarde is als volgt bepaald:

• Een tag selector 1 punt • Een class selector 10 punten • Een ID selector 100 punten • Een inline style 1000 punten

Een voorbeeld maakt het puntensysteem duidelijk: selector id class tag totaal p 0 0 1 1 .intro 0 1 0 10 #kop 1 0 0 100 #kop p 1 0 1 101 p.intro 0 1 1 11 #kop #logo 2 0 0 200 #kop p.intro 1 1 1 111 Dreamweaver laat deze drie getallen zien als je met je muis over een stijlregel gaat in het CSS-Panel. Open vanaf www.peterharmsen.nl/cursus_dreamweaver/ het bestand hierarchie.html Zorg dat je in de mode Current staat en controleer of “Show cascade of rules for selected tag” is geselecteerd. Als je klikt in de tekst “Voorbeeld site” dan zie je dat er twee regels betrekking hebben op de div kop: #container en #kop dan zie voor beide regels de volgende pop-up:

Volgens de “rekenregels” inderdaad correct! Klik je nu in de tekst “Dreamweaver is een webdesign programma” dan zie je in de stijlregels er weer twee staan. Ga je met je muis over de stijlregel #kop #logo dan zie je de volgende pop-up:

Dit klopt, uiteraard, ook; de betreffende stijlregel heeft betrekking op twee ID’s! Zo kun je dus bij eventuele conflicten makkelijk terugvinden welke regel de doorslag geeft.

Page 34: Beknopte Handleiding Dreamweaver

34

5 Het box-model Een belangrijk onderdeel in CSS is het box-model. Voor elke webdesigner is het een absolute voorwaarde dat deze kennis heeft van het boxmodel. Elk element op een webpagina genereert een denkbeeldige rechthoek om dat element: de box

De afmetingen van de binnenste rechthoek zijn dus de afmetingen die je opgeeft met width en heigh. In werkelijkheid is er natuurlijk geen binnenste rand; het is een fictieve grens van de afmetingen van een element De padding is de ruimte tussen een element en de eventuele rand. Het is niet verplicht om een padding op te geven. De border kun je zichtbaar maken door deze een opmaak kenmerk mee te geven. Dit zijn kenmerken voor een lijn, dus lijndikte en type lijn en de kleur. Het is niet verplicht om de border op te geven. De marge is de hoeveelheid ruimte aan de buitenkant van de border (dus tot de buitenste rand) De buitenste rand geeft dan uiteindelijk de hoeveelheid ruimte aan die een element uiteindelijk inneemt. Indien je geen padding en margin opgeeft is dat dus hetzelfde als de binnenste rand! Bij margin en padding kun je vier verschillende maten opgeven, waarbij je begint bij de top en met de wijzers van de klok meegaat. Een ezelsbruggetje dat hiervoor vaak gebruikt wordt is TRBL (trouble). Een padding van 15px 20px 30px 25px wil dus zeggen dat de top-padding 15 pixels bedraagt, de right-padding 20 pixels, de bottom-padding 30 pixels en de left-padding 25 pixels. Met padding: 15 px 25 px geef je aan dat de boven- en onderkant een padding hebben van 15 pixels en de linker- en rechterkant 25 pixels. Met padding: 20px bepaal je dat de padding aan alle kanten 20 pixels bedraagt. Voor de border geldt ook dat je vier verschillende kenmerken kunt instellen. Soort lijn, dikte van de lijn en de kleur.

Page 35: Beknopte Handleiding Dreamweaver

35

. Een belangrijke regel is dat als je de breedte en de hoogte opgeeft van een element dat dit alleen van toepassing op de afmetingen van de binnenste rechthoek (content) Stel je voor dat je voor de content 200 pixels opgeeft, voor de padding 10 pixels, een border van 1 pixel en 20 pixels voor de marge dat de totale breedte voor het element dus: 20+1+20+200+10+1+20=262 (pixels) We laten even kort zien hoe de padding, margin en border in Dreamweaver ingesteld kunnen worden. Maak een nieuw document aan. Noem dit border.html. Zet op deze pagina een division, we noemen deze demo met de volgende kenmerken: width 200 px, margin 20 px, padding 10 px en border 1 px met kleur #FFCC66. In Dreamweaver gaat als volgt. Insert>Layout Objects>Div Tag.

Geef de div de naam:

Page 36: Beknopte Handleiding Dreamweaver

36

Vervolgens kunnen voor de div een aantal stijlregels vastleggen:

We stellen de box in:

Page 37: Beknopte Handleiding Dreamweaver

37

Vervolgens de border:

Je kunt in de Design View prachtig zien hoe de box van deze div er nu uit ziet. Indien je op de rand (border) klikt van de div, ontstaat onderstaand beeld:

Indien je nu je muis over de div beweegt krijg je de verschillende instellingen in beeld. We bespreken nu padding, margin en border wat uitgebreider.

Page 38: Beknopte Handleiding Dreamweaver

38

De padding We maken een nieuwe pagina aan met de volgende stijlkenmerken: <style type="text/css"> h1 { font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; color:#000000; background-color: #FF0000; } </style>

Zet deze kenmerken in de nieuwe pagina die je boxmodel.html noemt. Je maakt het stylesheet weer met behulp van New CSS Rule uit het CSS-Panel. Zie onderstaande schermvoorbeelden:

Indien we nu aan de linkerkant een padding geven, schuift de tekst dus op en blijft de achtergrond staan:

De tekst schuift nu keurig naar links op. Je kunt ook de padding in procenten opgeven; je werkt dan met relatieve maten. Het voordeel daar van is dat de verhoudingen tussen de verschillende elementen op je pagina beter blijft. Je loopt echter wel het risico dat je browser geforceerd probeert verhoudingen te behouden. Indien je veel tekst op een pagina hebt, is em vaak een goede eenheid om padding in op te geven. De padding is dus bijvoorbeeld geschikt om tekst beter op een achtergrond te laten uitlijnen.

Page 39: Beknopte Handleiding Dreamweaver

39

LET OP! Indien je eerst 20 pixels hebt opgegeven en daarna wil je nog eens 10 pixels opgeven, dan maakt Dreamweaver 2 keer een stijlregel aan. Dat is natuurlijk voor het overzicht niet zo handig toch heeft het wel een voordeel.Het is geheel in overeenstemming met de regels omtrent CSS. Indien de browser van boven naar beneden door het stylesheet gaat en deze komt twee keer een regel over de padding tegen, die gelijkwaardig zijn, dan geldt de laatste en alleen de laatste wordt uitgevoerd! Uiteraard geldt dit ook als je een waarde in procenten opgeeft. <style type="text/css"> <!-- h1 { font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; color: #000000; background-color: #FF0000; } h1 { padding-left: 20px; } h1 { padding-left: 10px; } --> </style>

In je CSS panel wordt dit overigens keurig gemeld! Indien je met je tagselector de <h1> selecteert dan zie je in je CSS-panel twee keer de regel over h1. De bovenste regel staat keurig doorgestreept en er wordt gemeld dat deze overridden door de tweede rul voor h1!

Page 40: Beknopte Handleiding Dreamweaver

40

De margin De margin(marge) is de hoeveelheid ruimte aan de buitenkant van de rand(border) van een element. De margin is daarom erg geschikt om te gebruiken als elementen elkaar ongewenst dreigen te raken of als je te dicht op de rand van je venster zit. We gebruiken weer even het bestand border.html, maak m.b.v. het CSS-panel het volgende stylesheet: <style type="text/css"> <!-- #kop { margin: 20px; width: 200px; background-color: #FF0000; } --> </style>

Je ziet dat nu de gehele tekst, inclusief de achtergrond naar rechts verschoven is. LET OP! Een misvatting is, dat je de marge van aangrenzende elementen gewoon bij elkaar kunt optellen! Het onderstaande voorbeeld maakt het duidelijk. We maken een nieuwe pagina aan met 2 divisions, deel1 en deel2 en het volgende stylesheet: <style type="text/css"> <!-- #deel1 { font-family: Arial, Helvetica, sans-serif; background-color: #FFFF99; width: 500px; border: thin dotted #FF0000; padding: 2%; margin-bottom:20px; } #deel2 { font-family: Arial, Helvetica, sans-serif; background-color: #FFFF99; width: 500px; border: thin dotted #FF3300; padding: 2% } --> </style>

Zet in de beide div’s even wat tekst zodat onderstaand beeld verschijnt in de browser:

Page 41: Beknopte Handleiding Dreamweaver

41

De bovenste division heeft nu een marge aan de onderkant van 20 pixels. Indien we nu besluiten om de tweede division aan de bovenkant ook nog een marge te geven van bijvoorbeeld 40 pixels, dan wordt de totale marge geen 60 pixels maar 40 pixels! Op zich logisch omdat de onderste div 40 pixels “omhoog” duwt en de bovenste div 20 pixels “omlaag” duwt. De marges botsen met elkaar. In deze situatie wordt daarom de hoogste marge genomen. De border Border heeft drie eigenschappen: style, width en color. De style eigenschap van border is standaard none, dat wil zeggen; er wordt geen rand getoond. De breedte is standaard medium. De kleur is gelijk aan de tekstkleur van het element. De style eigenschap kent de volgende mogelijkheden: none, solid, dashed, dotted, dot-dash, dot-dot-dash, wave, double, groove, ridge, inset, outset, hidden en none. Hidden lijkt op none maar werkt in combinatie met tabellen op een andere wijze. Daar gaan we hier niet verder op in.

De breedte van een rand kan via vier verschillende declaraties (border-top-width, border-right-width, border-bottom-width en border-left width) worden gegeven of kort met border-width worden genoteerd. De mogelijke waarden kunnen absoluut of relatief zijn (bijvoorbeeld px, ems, percentage) en kunnen ook een beschrijvende waarde zijn (thin, medium, thick).

Page 42: Beknopte Handleiding Dreamweaver

42

Je kunt in Dreamweaver via het CSS-panel alle eigenschappen van de border instellen:

Page 43: Beknopte Handleiding Dreamweaver

43

6 De float van een element Met de float van een element wordt de natuurlijke “uitrol” over de pagina bedoeld. In principe is het zo dat de elementen achterelkaar op de pagina worden gezet door de browser. Het laatste voorbeeld, met de tekst, laat dat uitstekend zien. De verschillende div’s worden in volgorde op het scherm geplaatst. We willen dat niet. We kunnen met behulp van CSS de natuurlijke float beinvloeden. We beginnen met div navigatie, deze moet naar links en smaller. Indien je de float gaan beinvloeden dan MOET je minstens de breedte ook aangeven. Open het bestand: www.peterharmsen.nl/cursus_dreamweaver/float1.html Maak een nieuwe styleregel aan met behulp van het CSS-panel:

en:

We hebbben de div navigatie nu een “uitrol” naar links gegeven en de breedte mag maar 20% zijn van de totale breedte. Je mag ook een breedte in een andere eenheid opgeven. Het voordeel van o.a. % is dat het een relatieve maat is waardoor verhoudingen tussen de verschillende elementen op je pagina goed behouden blijven.

Page 44: Beknopte Handleiding Dreamweaver

44

Je hebt het volgende beeld gekregen (in Design View):

De navigatie zit op de gewenste plaats maar verder is het nog niet geheel prettig! De inhoud van de div hoofdinhoud loopt rond de navigatie div. Dit is het normale gedrag! De division(s) die volgen op de div waarvoor de float is ingesteld, zijn de verpakking van de ingestelde div! We kunnen dat verhelpen door er voor te zorgen dat de voettekst niet meer rond de navigatie uitrolt. In CSS hebben we de mogelijkheid om de float te “clearen”. De voettekst mag niet meer gevoellig zijn voor de float van de navigatie. We lossen dat als volgt op: #footer { clear: left; }

Opmerking:Een CSS-regel voor een div begint dus met een # We maken nu een nieuwe stijlregel voor de div footer aan:

Nu start de div footer keurig onder de div navigatie. Indien je meer inhoud toevoegt aan de div navigatie schuift de voettekst keurig verder naar onderen. Met behulp van clear float stop je dus de float. Je moet welsteeds aangeven welke float (left, right en both)

Page 45: Beknopte Handleiding Dreamweaver

45

Het is overigens handig om in je stylesheet een klasse clearfloat aan te maken. Je kunt dan op elke gewenst moment een float stoppen: .clearfloat { margin: 0px; clear: both; height: 0px; }

dus:

Voor de fijnproevers: We zetten de marge (margin) en de hoogte op nul zodat we er zeker van zijn deze klasse alleen de float beëindigt en geen ongewenste veranderingen in de layout aanbrengt doordat de browser deze klasse afmetingen gaat geven. Een andere omissie in deze layout is dat de hoofdtekst wel erg dicht tegen de navigatie aanzit. Het zou prettig zijn als er enige ruimte ofwel marge zit tussen de beide div’s. Hiervoor gebruiken we de volgende stijlregel: #hoofdinhoud { margin-left: 21%; }

Met margin-left geef je aan hoeveel “witruimte” er aan de linkerkant van de div hoofdinhoud moet zitten. Omdat de div navigatie een breedte heeft van 20%, is een waarde van 21% wel goed. Bij een marge ga je dus uit van de natuurlijke float! Indien je bijvoorbeeld 1% had gekozen dan zie je dat de div hoofdinhoud door die van de navigatie heenloopt:

Je hebt nu een eerste vorm van een webpagina zoals veel gebruikt. Helaas reageren niet alle browsers op dezelfde wijze op een stylesheet. Met name Internet Explorer 6 en lager geven soms onbedoelde effecten. Hiervoor zul je toch maatregelen moeten nemen. We zullen later in deze handleiding daar nog aandacht aan besteden.

Page 46: Beknopte Handleiding Dreamweaver

46

We laten nog een basislayout zien. Deze heeft als voordeel dat het horizontaal scrollen niet kan ontstaan; een verschijnsel dat de webdesigner niet wil! Een centrale rol is hier weggelegd voor de zogenaamde container. We plaatsen alle elementen in een alles omvattende division. Al snel zal blijken waarom dat erg handig is! Open bestand float2.html. Klik met behulp van de tagselector op de body tag; hiermee selecteer je uiteraard alle elementen. Kies voor Insert Div Tag en vul het vervolgscherm in:

Weer is er gekozen voor Wrap around selection omdat je alles wil laten verpakken door de nieuwe container. We gaan vervolgens de container stylen:

Het scherm heeft nu een vaste breedte. Door 785 pixels te kiezen weten we zeker dat het op een scherm van 800 bij 600 goed te zien is. Je hoeft niet horizontaal te scrollen. Je hebt nu bijvoorbeeld ook de mogelijkheid om de achtergrondkleur van de container te kiezen. Vaak is een contrast met de body een fraai effect.

Page 47: Beknopte Handleiding Dreamweaver

47

opdracht Wijzig nu met behulp van het CSS-panel het stylesheet zodanig dat er uiteindelijk de volgende regels staan: <style type="text/css"> <!-- #navigatie { float: left; width: 15%; } body { background-color: #6699CC; } #hoofdinhoud { margin-left: 16%; } #container { width: 785px; margin-right: auto; margin-left: auto; background-color: #FFFF66; } #footer { clear: left; } --> </style>

Page 48: Beknopte Handleiding Dreamweaver

48

Afsluitende theorie over float en clear Met de float eigenschap kan een element zwevend worden gemaakt. Je zorgt er hiermee voor dat een element als het ware zweeft op de pagina, de rest van de inhoud sluit er rondom op aan. Float is naast absolute positionering de enige manier om elementen te plaatsen waar je wilt. Wetenswaardigheden:

• Block-elementen zoals p, table en h2 worden gewoonlijk onder elkaar geplaatst. Met float (zweven) kunnen we block-elementen naast elkaar plaatsen.

• Je kunt ieder element zwevend maken, het element wordt dan altijd een block element. • Bij float moet de breedte en de hoogte van het element worden opgegeven. • Het zwevend gemaakte element wordt uit de normale HTML document structuur gehaald maar dit gebeurt

altijd na het voorgaande element. • Tekst zal altijd rond een zwevend element vloeien. • Zwevende elementen zullen een afbeelding of tekst niet afdekken, absoluut gepositioneerde elementen

kunnen dat wel. • Twee opeenvolgende zwevende elementen (float: left of right) zullen langs elkaar komen te liggen zolang

de totale breedte de breedte van het omvattende element (het element waar de twee opeenvolgende zwevende elementen in geplaatst zijn) niet overschrijdt.

• Een element met float: left doe je teniet met clear: left, een element met float : left met clear: right; • Voorgaande zwevende elementen met float: left en float: right doe je teniet met clear: both.

De combinatie van float en clear gaan we bij de voorbeeld lay-outs gebruiken om een pagina in te delen. De combinatie is belangrijk bij het vormgeven van sites die in bijvoorbeeld Explorer, Firefox en Safari weergegeven worden. Tussendoor: de ‘natuurlijke flow’ van een pagina. Het is goed te realiseren dat een web pagina een vastgestelde hiërarchie kent. Elementen op een pagina hebben allemaal hun eigen plaats. Die plaats hangt af van de eigenschappen van het element en van de plaats waar jij ze in de html hebt geplaatst. Met de natuurlijke flow van een web pagina wordt de manier bedoeld waarop een pagina verwerkt wordt. Je beïnvloedt met behulp van CSS de gang van zaken bij het verwerken van de pagina: Je gaat m.a.w. de natuurlijke flow van de pagina beïnvloeden. In feite wordt een element dat de eigenschap float krijgt als het ware boven de flow van de pagina uitgetild. De float eigenschap is een veel gebruikte CSS eigenschap. Float kent maar drie waarden: left, right en none. Float (left of right) drukt het element uit zijn natuurlijke positie en verschuift het naar links of naar rechts. Float vervangt de align eigenschap van het img element en heeft precies hetzelfde effect. Er is een voordeel van float ten opzichte van align: float kan ook voor andere elementen worden gebruikt. Bij het onderstaande voorbeeld wordt de afbeelding naar links verplaatst door de eigenschap float met als waarde left te gebruiken. De tekst wordt daardoor rechts geplaatst.

Page 49: Beknopte Handleiding Dreamweaver

49

Bij het bovenstaande voorbeeld wordt de afbeelding naar rechts verplaatst door de eigenschap float met als waarde rechts te gebruiken. De tekst wordt daardoor links geplaatst. Er is bij de stijldefinitie van het img element ook gebruik gemaakt van respectievelijk margin-right en margin-left om een afstand van 5 pixels te maken tussen de tekst en de afbeelding.

Page 50: Beknopte Handleiding Dreamweaver

50

h1 { font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; color:#000000; background-color: #FFFF66; margin-left:50px; margin-right: 100px; } p { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; color:#000000; background-color: #FFFF66; margin-left:50px; margin-right: 100px; } .data { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; color: red; background-color: #ffffff; margin-left:50px; margin-right: 100px; } img { float: left; margin-right: 5px; }

<body> <h1>Schilderbeurt voor Watertoren</h1> <span class="data">nieuwsbericht, 16 augustus 2006</span> <p><img src="images/watertoren.jpg" alt="Watertoren" width="206" height="121" />De Watertoren in Heemstede is aan een schilderbeurt toe. De steigers zijn ... enzovoort</p> </body>

Als je de eigenschap float niet gebruikt, ziet het resultaat er als hiernaast uit!

Page 51: Beknopte Handleiding Dreamweaver

51

De eigenschap float kun je op elk blokelement toepassen, hieronder zie je een voorbeeld waarbij de foto verwijderd is en er een kopregel in de tekst is geplaatst.

.p_kop { font-family: Arial, Helvetica, sans-serif; font-size: 36px; float: left; font-weight: bold; margin-right: 10px; margin-top: 10px; }

<p><span class="p_kop">Watertoren</span> in Heemstede is aan een schilderbeurt toe. De steigers zijn al geplaatst … enzovoort</p>

Met de clear eigenschap wordt aangegeven of er links en/of rechts van het element wel of geen zwevende elementen mogen voorkomen. De mogelijke waarden zijn none, left, right en both. De beginwaarde none van de clear eigenschap bepaalt dat zwevende elementen wel zijn toegestaan naast het element waaraan de eigenschap wordt toegevoegd. Er mogen dan ook wél zwevende elementen naast het element komen staan. clear: left geeft aan dat aan de linkerkant geen zwevende elementen mogen staan clear: right geeft aan dat aan de rechterkant geen zwevende elementen mogen staan clear: both geeft aan dat er géén elementen naast het element mogen staan

Page 52: Beknopte Handleiding Dreamweaver

52

7

R

Enige andere CSS kenmerken 7.1 De font-family eigenschap Je kunt het lettertype voor een element als een verzameling van fonts geven door middel van de font-family eigenschap. De leden van een font familie hebben – net als bij een echte familie - zaken gemeenschappelijk. Een schreefloos lettertype is heel geschikt voor het gebruik op een beeldscherm. Schreven zijn de kleine zijstreepjes aan de letters van fonts zoals Times New Roman. Bij lage resolutie worden lettertypen met schreven op een beeldscherm wat onscherp of gekarteld. Voor weergave op een beeldscherm hebben schreefloze lettertypen daarom de voorkeur. Schreefloze lettertypen geven we aan met de term sans-serif, dat is Frans voor “zonder schreef”.

R

Times New Roman Arial (met schreef) (schreefloos)

(serif)

(sans-serif)

De hieronder gegeven fonts zijn allemaal zonder schreef. h1 { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; }

In ons geval wordt dus gezocht in de volgorde Verdana, Arial, Helvetica. Als geen van alle gevonden wordt, dan wordt in ieder geval een generiek sans-serif (schreefloos) lettertype gebruikt. Andere generieke lettertypes die je op kunt geven zijn serif, monospace, cursive en fantasy. Bij fantasy zijn de resultaten onvoorspelbaar en dat lettertype kun je beter niet gebruiken. 7.2 De font-size eigenschap Het instellen van de lettergrootte voor een webpagina is problematisch omdat browsers op verschillende manieren het formaat van letters afhandelen. De aanduidingen voor het bepalen van de grootte van een lettertype voor een webpagina zijn de volgende: xx-small, x-small, small, medium, large, x-large en xx-large Deze absolute sleutelwoorden definiëren niet een exacte grootte in punten of pixels die in elke situatie en voor elke browser en elk lettertype gelijk is. Ze verwijzen echter naar een tabel met lettergroottes die door de browser berekend wordt en per lettertype kan verschillen. Deze definitie is niet zo absoluut als het op het eerste gezicht lijkt. Je kunt absolute waarden voor de lettergrootte ook in eenheden als pixels of points uitdrukken. De wijze waarop absoluut opgegeven lettergrootten worden weergegeven door de verschillende browsers verschilt helaas. Het is onvermijdelijk dat het ontwerp er in de ene browser wat anders uit zal zien dan in de ander. Je kunt de grootte van het lettertype ook uitdrukken in relatieve eenheden. Dit kunnen percentages zijn, ems of de relatieve sleutelwoorden larger en smaller. Hoe meten we? Je hebt al gezien dat je met verschillende waarden kunt meten. Als iets 0 is, hoef je uiteraard niet op te geven met welke maat je meet. Maar de volgende voorbeelden zullen allemaal hetzelfde resultaat opleveren:

Page 53: Beknopte Handleiding Dreamweaver

53

font-size: 1in; font-size: 2.54cm; font-size: 24.4mm; font-size: 72pt; font-size: 6pc;

Een overzicht van de maten:

Afkorting Betekenis Uitleg in inch 2.54 cm cm centimeter mm millimeter pt point 1/72 inch pc pica 12 point (1/6 inch) px pixel één puntje van je scherm

Dit zijn absolute maten. Er is ook nog de mogelijkheid een relatieve maat op te geven met em. Als je bijvoorbeeld line-height: 1.1em gebruikt, dan betekent dit dat je vanaf dat moment de regelhoogte met 1.1 van het huidige font moet vermenigvuldigen. Of stel dat je een marge instelt van 1em, dan betekent dit dat er een witruimte komt ter grootte van de font-size die daar ingesteld is. De term em is oorspronkelijk de breedte of hoogte van de hoofdletter M in het huidige font. Het gebruik van een relatieve maat maakt het voor de gebruiker mogelijk om de weergave van de pagina op het beeldscherm zelf in te stellen. Dat is van belang voor mensen met een verminderd zichtvermogen. Het toepassen van relatieve maten verhoogt dan ook de bruikbaarheid en toegankelijkheid van de site en heeft de voorkeur. 7.3 De font-style eigenschap De font-style eigenschap kun je gebruiken om te bepalen of de tekst normaal, cursief of schuin naar rechts hellend moet worden weergegeven. De waarde voor de laatste twee mogelijkheden is italic respectievelijk oblique. Bij schreefloze lettertypen (sans-serif) zijn italic en oblique over het algemeen hetzelfde. Bij lettertypen met schreef (serif) kan er verschil tussen zitten en wordt oblique wel gezien als een schuin geplaatste normale letter. In de praktijk blijkt de weergave door browsers van de waarden italic en oblique echter hetzelfde te zijn. Een voorbeeldje uit een CSS regel: font-style: italic;

7.4 De font-weight eigenschap Weight geeft de ‘vetheid’ van de lettertekens aan. Weight kan een relatieve waarde krijgen: bolder en lighter, absolute waarden variëren van 100 tot 900 (het vetst). De stappen worden per honderd gedaan (100, 200, … 900). Je kunt hier ook de absolute waarde normal (gelijk aan 400) of bold (700) gebruiken. De ervaring leert dat je deze eigenschap beter niet kunt toepassen omdat de meeste browsers er weinig of niets mee doen. De font shorthand eigenschap Met de shorthand eigenschap kun je op verkorte wijze alle eigenschappen van de font declaratie in de CSS regel plaatsen, bijvoorbeeld: h3 { font: bold italic 13px Arial, “Lucida Console”, sans-serif; }

Neem altijd de font-size en de font-family op in een dergelijke definitie. De volgorde is belangrijk! De grootte en de familie komen achteraan en ook in die volgorde, dus eerst de grootte en dan de famlie. Als je een lettertype hebt dat uit meerdere woorden bestaat, is het verstandig dat lettertype tussen quotes te plaatsen.

Page 54: Beknopte Handleiding Dreamweaver

54

Lorem ipsum dolor sit amet Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute Irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor Sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit In voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

7.5 Tekstuitlijning Goed ontwerp bevat naast positieve ruimte (bezette ruimte) ook negatieve ruimte (lege ruimte). Bij een goed ontwerp is er een afweging tussen positieve en negatieve ruimte (gebruikte en ongebruikte ruimte). Je kunt op een webpagina negatieve ruimte maken door middel van het uitlijnen van de tekst. Met CSS heb je vier mogelijkheden om de tekst uit te lijnen: left, center, right en justify. De laatste eigenschap zorgt er voor dat de tekst uitgevuld wordt. Met gebruik van deze eigenschappen kun je van een te volle pagina een pagina met lucht en ruimte maken. h1 { text-align: center; } h2 { text-align: right; }

De uitlijning kan een groot verschil maken, vergelijk de onderstaande tekstblokken eens:

Lorem ipsum dolor sit amet Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute Irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor Sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit In voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Page 55: Beknopte Handleiding Dreamweaver

55

Je kunt met behulp van CSS de eerste regel van een paragraaf ook laten inspringen. De mate van inspringen kan opgegeven worden: p { text-indent: 3em; }

Page 56: Beknopte Handleiding Dreamweaver

56

8

1. Beschrijvende kleurnamen

Kleur Er zijn verschillende manieren om kleuren vast te leggen. In onderstaand voorbeeld is blauw gemaakt op verschillende manieren. color : blue; color : AppWorkspace; color : rgb(0, 0, 255); color : rgb(0%, 0%, 100%); color : #0000ff; color : #00f;

h1 { color: #0000ff; }

Je kunt kleuren vast leggen door middel van:

2. Systeemkleurnamen 3. RGB decimale kleurwaarden 4. RGB percentage waarden 5. Hexadecimale kleurwaarden 6. Hexadecimale kleurwaarden (afgekort)

1. Er zijn 17 officiële beschrijvende kleurnamen die door HTML en CSS ondersteund worden. Momenteel

worden door de meeste browsers 140 beschrijvende kleurnamen ondersteund. De 17 officiële namen zijn: black, white, aqua, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal en yellow. De andere 133 namen worden niet door W3C ondersteund. Door de kleurnamen te gebruiken heb je vooraf een aardig idee van hoe de kleur er uit zal zien.

2. Er zijn 28 systeemkleurnamen. Deze kleurnamen komen overeen met kleurnamen die door het besturingssysteem worden gebruikt. De kleurnamen zijn specifiek voor het bedoelde besturingssysteem. Je kunt deze kleurnamen gebruiken om web interfaces te maken die overeen komen met het besturingssysteem van de gebruiker. Zie http://w3.org/TR/CSS21/ui.html voor een overzicht van de kleurnamen (system colors).

3. Kleuren die op een computerscherm worden getoond worden samengesteld uit drie basiskleuren, rood, groen en blauw. Deze drie kleuren kunnen gemengd worden tot een bijna eindeloze reeks kleurschakeringen. De RGB functie kan gebruikt worden door voor iedere kleur een waarde op te geven, gescheiden door een komma (van 0 tot en met 255).

4. Je kunt de RGB kleurwaarden ook in percentages opgeven.

5. De hexadecimale notatiewijze loopt van zwart (#000000) tot wit (#ffffff). De eerste twee tekens achter # staan voor rood, de tweede voor groen, de derde voor blauw. #0000ff staat voor géén rood, géén blauw, maximaal blauw. De hexadecimale notatie geeft de grootste controle over de kleurspecificatie, webdesigners zullen deze notatiewijze het liefst gebruiken. Als je echter snel een eenvoudige site wilt maken kies je wellicht liever voor de beschrijvende kleurnamen.

6. De afkorting kan alleen gebruikt worden wanneer de hexadecimale cijfers per paar gelijk zijn (#0000ff = #00f).

Wij zullen vooral de mogelijkheden van Dreamweaver gebruiken. De kleurenkaart biedt de mogelijkheid om de kleur op zicht te kiezen maar heeft ook de mogelijkheid om de hexadecimale notatiewijze te gebruiken. Indien je bijvoorbeeld een achtergrondkleur wilt instellen voor de body dan kan dat uiteraard via het CSS-Panel:

Page 57: Beknopte Handleiding Dreamweaver

57

Indien je nu op de System Color Picker klikt, heb je nog veel meer mogelijkheden om een kleur te kiezen:

Je kunt hier feitelijk een eigen kleur maken en deze opslaan bij Aangepaste kleuren.

Het gebruik van kleuren bij het ontwerp van een website Het kiezen van een combinatie van kleuren die goed werken is een vak apart. Vooral het gebruik van kleur van de tekst in combinatie met een gekleurde achtergrond kan de leesbaarheid van de tekst bemoeilijken. Kies daarvoor in beginsel kleurenparen die complementair zijn aan elkaar. Je kunt daarvoor een kleurenwiel gebruiken. Je kunt het kleurenwiel ook gebruiken om kleuren te zoeken die goed bij elkaar passen. Dit doe je door kleurcombinaties voor de vormgeving van de site te kiezen die dicht bij elkaar liggen. Kies twee of drie bij elkaar liggende kleuren en gebruik deze voor grote gebieden als achtergronden en bijvoorbeeld menu’s. Zo kun je zorgen voor een mooie site met esthetische effecten. Houdt bij het kiezen van kleuren ook rekening met bezoekers die kleurenblind zijn. Tip: Kijk op www.color-wheel-pro. Daar vind je een programma met een handig kleurenwiel en met informatie over kleurentheorie en kleurenschema’s.

.

Page 58: Beknopte Handleiding Dreamweaver

58

Color Wheel Pro met een complementair kleurenschema en het helpbestand (kleurentheorie) Het kiezen van een geschikte kleurencombinatie (denk bijvoorbeeld aan tekst boven een gekleurde achtergrond) kan lastig zijn. Probeer verschillende combinaties uit. Dit kost tijd maar is de moeite waard. Je kunt hulp zoeken op het internet. Gebruik bijvoorbeeld Pixy’s Color Scheme Generator. Dit programma bevat ook een lijst van verschillende soorten kleurenblindheid. Je kunt zien hoe jouw schema er uit ziet voor bezoekers van je website die een bepaalde soort kleurenblindheid hebben. Zorg er ook voor dat – naast onbruikbaarheid van de site door verkeerde kleurencombinaties – de site niet alleen begrepen kan worden door de kleurencombinaties. Zorg er voor dat er naast gekleurde knoppen of afbeeldingen ook tekstuele informatie is.

Het zoeken naar een geschikt en fraai kleurenschema voor je site is een leuk en creatief proces. Zoek naar nieuwe combinaties, laat je niet uitsluitend leiden door dat wat gebruikelijk is. De kleur van de body instellen Je kunt de kleur van de body tekst door middel van een extern stijlblad instellen met: body { color: red; }

Een betere manier is: body { color: white; background-color: maroon }

Verklaring: als je een voorgrondkleur (body tekst) instelt, stel dan ook een achtergrond kleur in. Je weet immers niet of de bezoeker de browser zo heeft ingesteld dat er een andere standaard achtergrond kleur getoond wordt, door via het stijlblad de achtergrondkleur in te stellen, voorkom je dat je pagina er mogelijk niet goed uit ziet. Wetenswaardigheden over kleur en achtergrondafbeeldingen Je kunt op een webpagina de aandacht van de bezoeker voor bepaalde secties op de pagina trekken door middel van kleur. Je kunt in je stijlblad klasse definities opnemen als: .waarschuwing of .gevaar. Een dergelijke klasse definieert een achtergrondkleur, lettertype en voorgrondkleur en eventueel een kader, zo gekozen dat de aandacht van de bezoeker getrokken wordt. .gevaar { font-size: 1.3em; text-align: center; background-color: red;

Page 59: Beknopte Handleiding Dreamweaver

59

font-weight: bold; color: white; border: 2px solid black; }

Je kunt rijen in een tabel afwisselende kleuren geven om de leesbaarheid en aantrekkelijkheid van de tabel te bevorderen. In de stijldefinitie neem je op: .even { background-color: lightgrey; } .oneven { background-color: yellow;}

En in de html code: <table> <tr class =”oneven”> <td> rij 1, cel 1</td> <td> rij 1, cel 2</td> <td> rij 1, cel 1</td> </tr> <tr class =”even”> <td> rij 2, cel 1</td> <td> rij 2, cel 2</td> <td> rij 2, cel 1</td> </tr> <tr class =”oneven”> <td> rij 3, cel 1</td> <td> rij 3, cel 2</td> <td> rij 3, cel 1</td> </tr><table>

Als je een achtergrond afbeelding voor de body gebruikt, stel dan ook een achtergrondkleur in. Als de pagina geladen wordt, zal eerst de achtergrondkleur getoond worden, daarna de afbeelding. De achtergrondafbeelding zal zich (standaard effect) horizontaal en verticaal herhalen. Je kunt met CSS er ook voor zorgen dat de afbeelding zich niet herhaalt. Je kunt er ook voor zorgen dat de achtergrondafbeelding op een vaste plaats blijft, ook tijdens het scrollen. De tekst zal dan over de afbeelding heen schuiven bij het scrollen.

Page 60: Beknopte Handleiding Dreamweaver

60

CSS: body { background-color: white; color: red; background-image: url(plaatje.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: left top; }

Je kunt background-repeat ook zó instellen:

• repeat-x: de afbeelding zal horizontaal herhaald worden. • repeat-y: de afbeelding zal verticaal herhaald worden.

De background-position gebruikt twee waarden: de eerste voor de horizontale positie, de tweede voor de verticale positie. De mogelijke waarden zijn: left, right, center en top, center en bottom. Je kunt ook een percentage gebruiken voor elk van deze waarden, bijvoorbeeld:

background-position: 50% 50%;

Page 61: Beknopte Handleiding Dreamweaver

61

9 Een uitgebreid voorbeeld van een 2 kolommen lay-out met CSS We beginnen, uiteraard, met het aanmaken van de webpagina. Maak een nieuw bestand aan, noemt het tweekolommen.html We gaan beginnen om in een extern stylesheet alle benodigde CSS vast te leggen. Voor de body hebben we al de volgende stijlkenmerken:

body { font-family: Arial, Helvetica, sans-serif; font-size: small; background-color: #000059; margin: 0px; padding: 0px; }

We gaan deze kenmerken vast verwerken in het externe stylesheet. Maak met behulp van het CSS-Panel (New CSS Rule) een nieuw stylesheet aan

Let er nu op dat je nu kiest voor New Style Sheet File! Je moet dan je nieuwe stylesheet eerst opslaan. Geef het stylesheet de naam opmaak:

Daarna kun je de kenmerken voor de body gaan invullen. We laten een aantal schermen zien:

Page 62: Beknopte Handleiding Dreamweaver

62

Je kunt de waarde voor de kleur rechtstreeks invoeren. Dit is vooral handig als je vooraf de kleurencode al weet.

Page 63: Beknopte Handleiding Dreamweaver

63

Je kunt op elk gewenst moment opmaak.css openen. Zo zie je hoe je stylesheet er uit ziet en je kunt natuurlijk ook altijd rechtstreeks stijlkenmerken in het stylesheet zetten. Voor het gemak wordt er meestal een division gemaakt waarin alle andere elementen worden geplaatst. Deze division krijgt een achtergrondkleur, een voorgrondkleur en marges. Een dergelijke division wordt vaak een container genoemd. We hebben dit al eens gezien bij de bespreking van de float. We maken in het stylesheet de opmaakkenmerken van de div container aan.

#container { color: #000000; background-color: #fdf8f2; padding-top: 30px; padding-right: 40px; padding-bottom: 30px; padding-left: 40px; }

Met een nieuwe stijlregel zetten we dit in het stylesheet er bij:

Vervolgens moet de container ook geplaatst worden. Deze komt uiteraard in de body van je pagina. We gebruiken de knoppenbalk om de div container toe te voegen. Je knoppenbalk moet wel in de mode lay-out staan. Kies van de knoppenbalk de knop Insert Div Tag:

Page 64: Beknopte Handleiding Dreamweaver

64

Je krijgt dan:

De container moet in de body komen dus je moet kiezen voor After start of tag <body>. Het is een div die eenmalig gebruikt wordt dus deze krijgt een ID (het is geen Class). Je ziet dan als je op het pijltje klikt dat Dreamweaver al “ziet” dat de container bedoeld wordt! Je krijgt dan in de Design View keurig de container in beeld:

We gaan nu in de container een tweedelige kop aanbrengen. In het bovenste deel komt een logo te staan en in het onderste deel een titel en een eenvoudige navigatie. We doen dat in de vorm van 2 div’s, kopregel en kopregel_onder. De kopregel_onder zit dan in de div kopregel. We krijgen dan, schematisch, het volgende plaatje:

Div container wordt geopend

Div kopregel wordt geopend

Div kopregel_onder wordt geopend

Div kopregel_onder wordt gesloten

Div kopregel wordt gesloten

Div container wordt gesloten

Page 65: Beknopte Handleiding Dreamweaver

65

Bij het aanbrengen van de div’s in Dreamweaver is het belangrijk dat je daar rekening mee houdt. Zie naast het schema de volgorde waarin de HTML-code voor de div’s aangebracht moet worden! We plaatsen de div’s. We beginnen met de div kopregel. Deze moet in de container zitten, dus begint deze na de begin-tag van de container (After start of tag):

De div kopregel_onder zit in de div kopregel dus begint div kopregel_onder na de begin-tag van de kopregel.

Indien je nu in de Code View kijkt, zie je de door Dreamweaver aangemaakte code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>2 kolommen</title> <link href="opmaak.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="kopregel"> <div id="kopregel_onder">Content for id "kopregel_onder" Goes Here</div> Content for id "kopregel" Goes Here</div> Content for id "container" Goes Here</div> </body> </html>

De div container wordt geopend, de div kopregel wordt geopend en als laatste de div kopregel_onder. Als eerste wordt div kopregel_ondergesloten, daarna de div kopregel en als laatste de div container. Het is geheel in overeenstemming met het eerdere schema! Dit is dus een mooi voorbeeld van het nesten van div’s: de laatste div die geopend wordt, wordt weer als eerste geloten. Enigszins verwarrend is de tekst”Content for….” Deze lijkt op de verkeerde plaats te staan. Verwijder deze! We voegen in de div kopregel een logo toe. Download van www.peterharmsen.nl/cursus_dreamweaver, het bestand Dreamweaver CS3.png. Dit gaan we in de div kopregel zetten.

Page 66: Beknopte Handleiding Dreamweaver

66

Klik hier voor met de cursor in de div. Met de tagselector kun je vervolgens gemakkelijk de div kopregel selecteren:

Omdat Div kopregel_onderdeel is van kopregel moeten we er voor zorgen dat het plaatje op de juiste plek komt. Schakel nu over naar Code View. Je ziet dan dat de volledige code van alles wat in de div kopregel zit, geselecteerd is. Klik nu met je cursor naast de openingstag van de div kopregel. Je kunt vervolgens weer terugschakelen naar Design View. Nu zoeken we het logo erbij: Insert>Image>DreamweaverCS3.png. Geef ook nog even de alternatieve tekst op als dat gevraagd wordt. Je krijgt vervolgens het volgende beeld:

Indien je op het logo klikt zie je nu bij de Tagselector dat het klopt: <body><div#container><div#kopregel><img> Het plaatje staat nu keurig in de bedoelde div! Voor de vormgeving geven we onder het logo nog een horizontale lijn: Insert>HTML>Horizontal Rule In de div kopregel_onder moet nu een titel en links komen. Deze brengen we nu aan. We selecteren eerst de div door even naar de Code View te gaan en daar te klikken in de div kopregel_onder. Nu kunnen we tekst toevoegen: Welkom op deze site Met behulp van Enter komen we in de volgende paragraph en kunnen we de links aangeven: Home, Sitemap en Contract. We scheiden de links met een vertikaal streepje. We besluiten nu ook weer met een horizontale lijn:

Page 67: Beknopte Handleiding Dreamweaver

67

Het logo is naar verhouding erg groot; we maken het wat kleiner door er op te klikken en vanuit de een van de hoekpunten naar binnen te slepen waarbij de Ctrl-toets ingedrukt houdt. Indien de breedte 160 is, heb je een betere verhouding. De afmetingen kun je zien in het Properties Panel onderaan. De links moeten natuurlijk ook wel links worden. Dit doen we eerst. Selecteer Home met je muis, in het Properities Panel kunnen we nu een link opgeven, we kiezen voor index.html. Selecteer vervolgens Sitemap en geef deze de link naar map.html en tenslotte Contact linken we naar contact.html. Het is op dit moment niet belangrijk dat de pagina’s naar waar gelinkt wordt, niet bestaan. We gaan de links in de div kopregel_onder wat mooier maken dan de standaard links. We passen hiervoor het stylesheet aan. Klik in een van de links; de tagselector geeft direct aan welk deel je geselecteerd hebt:

Klik op de <a> en maak een New CSS-Rule aan door achter #container #kopregel #kopregel_onder a te tikken :link

We maken dan de link op. We kiezen voor decoration none. Bij een bezochte link willen we ook geen onderstreping dus herhalen we bovenstaande stappen door nu #container #kopregel #kopregel_onder a:visited te kiezen. De titel is ook nog weinig opvallend dus wijzigen we dit volgens onderstaande stijlkenmerken: #kopregel_onder h1 { color: #333333; font-size:14px;

Page 68: Beknopte Handleiding Dreamweaver

68

font-style:oblique; font-weight: bold;}

Deze zetten we ook in het stylesheet. Kies met de tagselector nu <div#kopregel_onder>. Maak een nieuwe styleregel aan voor de h1:

Geef vervolgens de style kenmerken aan:

We moeten nu alleen nog de titel een h1-tag geven. Selecteer de titel en geef deze met behulp van het Properties Panel Heading1 (Format). De stijlkenmerken worden direct toegepast. De hoofdsectie wordt na de kopregel geplaatst. De hoofdsectie bevat een zijbalk en een sectie voor de inhoud van de pagina. Na de inhoud-definitie wordt nog een voettekst geplaatst. Het stijlblad wordt uitgebreid met:

Page 69: Beknopte Handleiding Dreamweaver

69

#zijbalk { float: left; border: 1px solid #000059; width: 230px; background-color: #FFFFFF; color: #000000; margin: 0; padding: 0; } #inhoud { margin: 0 0 0 240px; padding: 0; border: 1px solid #000059; background-color: #FFFFFF; color: #000000; } #voettekst { clear: both; border: 1px solid #000059; margin-top: 10px; }

We voegen eerst de nieuwe elementen aan het stylesheet toe. Daarvoor maken voor de zijbalk de stijlregels aan:

Page 70: Beknopte Handleiding Dreamweaver

70

Voor de div inhoud en voettekst doen we dit ook. Hier zijn geen schermfoto’s van. Het is overigens een goede gewoonte om de padding en margin toch op te geven. Dit dwingt de browser om de stijlregels te volgen en biedt het automatisme van de browsers geen kansen. Browsers werken zelf ook met stylesheets die bij het niet opgeven van waarden soms eigen interpretaties geven. Nu moeten de div’s nog op de pagina geplaatst worden. De indeling wordt als volgt:

We kunnen de div’s achter elkaar invoeren omdat de zijbalk een float naar links heeft. De rest van de div’s heeft een natuurlijke uitrol. De div inhoud moet komen na het sluiten van de div kopregel (zie tekening eerder!) Kies van de knoppenbalk Insert Div Tag, de div moet beginnen na sluiten div kopregel en dus voor sluiten van de div container, alleen dit laatste kunnen we rechtstreeks kiezen:

Page 71: Beknopte Handleiding Dreamweaver

71

In de hoofdsectie komen nu achtereenvolgens de div zijbalk, div inhoud en div voettekst. Zijbalk:

Inhoud:

Voettekst:

Met behulp van lorem ipsum plakken we even wat tekst in de verschillende div’s:

Page 72: Beknopte Handleiding Dreamweaver

72

Dit ontwerp is uiteraard nog verder te verbeteren. Door het toevoegen van padding bijvoorbeeld, komt de tekst wat verder van de rand(border) te staan. Denk er wel aan dat de totale breedte van de div’s wel toeneemt! Verwerking Maak een webpagina met 3 kolommen en een kop en voettekst, dit geheel binnen een container. Maak de container iets minder dan 800 pixels breed

Onderzoek wat het effect is van een vaste breedte voor de container en een automatische breedte

Page 73: Beknopte Handleiding Dreamweaver

73

10 De layouts van Dreamweaver zelf Dreamweaver heft zelf een groot aantal layouts op basis van CSS meegeleverd. Deze zijn zeer interessant om te bekijken daar ze goede voorbeelden zijn van zeer goed CSS gebruik. Door File>New te kiezen en vervolgens Blank Page zie een groot aantal voorbeelden:

Page 74: Beknopte Handleiding Dreamweaver

74

11 Het automatisme van Dreamweaver In de standaardinstelling van Dreamweaver wordt er automatisch een stylesheet aangemaakt als je de pagina gaat opmaken met behulp van het Properties-panel. We zullen dat gaan bekijken: Maak een nieuwe pagina aan, noem deze automatisch.html en gebruik de Design-mode Klik in de pagina en tik: De kop van de pagina Deze gaan we opmaken met behulp van het Properties-panel.

We wijzigen het font en het formaat door Format:Heading1 te kiezen en Font: Arial, Helvetica, sans-serif De tekst ziet er dan als volgt uit:

Wat heeft Dreamweaver voor code aangemaakt? We bekijken dat in de Code View:

Je ziet dat Dreamweaver zelf een stylesheet heeft aangemaakt. Je ziet een klasse kop met de bijbehorende kenmerken. Dit automatisme is de standaardinstelling van Dreamweaver. In deze handleiding proberen we dit automatisme zoveel mogelijk te vermijden. Vooral de onhandige namen als style1, style2 etc. geeft snel verwarring. Maak een stylesheet aan volgens de methode zoals die hiervoor is besproken.

Page 75: Beknopte Handleiding Dreamweaver

75

12

Positionering (Engels)

Naslag en literatuur Er is inmiddels erg veel geschreven over CSS. Even googelen levert al snel veel informatie op. We maken een kleine selectie van boeken en websites die zeer de moeite waard zijn. Boeken Learning Web Design (Engels) Jennifer Niederst Robbins 978-0-596-52752-5 Webdesin met webstandaarden Jeffrey zeldman 90-430-1372-2 CSS-Mastery (Engels) Andy Budd 978-1-59059-614-2 Dreamweaver8, certified developer Hove/Booth 0-321-33628-3 study guide (Engels) Dreamweaver CS3, classroom in a book Adobe 978-90-430-1478-6 Handboek Dreamweaver CS3 Peter Kassenaar 978-90-5940-300-0 Mastering CSS with Dreamweaver CS3 (Engels) Stephanie Sullivan/Greg Rewis 978—0-321-50897-3 Websites Handleiding HTML en CSS http://www.handleidinghtml.nl/

http://www.brainjar.com/css/positioning/ cssZen Garden, demonstratie van CSS http://www.csszengarden.com/tr/dutch/ Online cursus CSS http://www.websitemaken.be/index.php?page=show_item&id=107 Forum Adobe over CSS: http://www.adobe.com/cfusion/communityengine/index.cfm?event=homepage&productId=1

Page 76: Beknopte Handleiding Dreamweaver

76