Webpagina's maken is iets van deze tijd en niet zo gemakkelijk als het soms lijkt. Als je echter een goed programma gebruikt kun je een heel eind komen om je homepage een professionele look te geven. Macromedia Dreamweaver is zo'n programma dat automatisch de HTML code genereert terwijl je grafisch aan het werk bent. Het is dus een zogenaamd WYSIWYG programma, hetgeen staat voor What You See Is What You Get. De meeste commerciële sites die je op internet ziet zijn met dit programma gemaakt, of met een soortgelijk programma van bijvoorbeeld Adobe, of Allaire. In deze cursus gaan we een voorbeeld van een homepage namaken. Deze homepage vind je hier. Wat je wel nodig hebt om deze cursus te volgen, is de trial versie van dertig dagen.

Doelgroep en inhoud
Deze cursus is voor mensen bedoeld die graag hun eigen homepage willen maken, nog niet bekend zijn met HTML of Dreamweaver. In deze cursus zullen we hele elementaire handelingen laten zien, zoals het invoegen van plaatjes, tabellen en links. Verder gaan we in op het werken met kleuren en verschillende lettertypen, achtergrondkleuren, het betitelen van je pagina en het zetten van alt teksten.Tot slot ga je een roll-over plaatje maken, en leer het invoegen van een layer en het laten verschijnen en verdwijnen van zo'n layer. Na deze cursus zul je in staat zijn om met Dreamweaver een simpele pagina te maken zoals de postzegel pagina.

Benodigdheden en startinfo
1) Haal eerst de trial versie van dreamweaver op bij Macromedia en installeer deze op je PC
2) Maak in je verkenner een nieuwe map Cursus aan, b.v. C:Mijn DocumentenCursus
3) Klik nu hier om het zip bestand met plaatjes te downloaden die je nodig hebt bij het bouwen van de site. Bewaar dit bestand op bijvoorbeeld het bureaublad. Open het zipbestand dreamcursus.zip en selecteer alle bestanden. Klik nu op extract en selecteer de bovengenoemde Cursusmap. In de Cursusmap moeten nu 21 plaatjes en 3 tekst bestanden staan. Als dit allemaal gelukt is start je Dreamweaver op en kun je met de cursus beginnen.

Tabellen
Als je Dreamweaver start wordt automatisch een nieuw venster geopend.Helemaal onderaan zie je het Properties-panel. Als dit Properties-panel niet zichtbaar is, kun je op Window / Properties in de menu balk klikken. Het Properties-panel komt dan tevoorschijn. Het Properties-venster is een van de meest gebruikte vensters in Dreamweaver, want erg handig om bepaalde eigenschappen te geven aan een stukje tekst, een plaatje, of een layer.


Klik nu in de invoegbalk (bovenin meteen onder de menubalk) op het tabelletje. In het venstertje dat je nu ziet vul je het volgende in:


Je hebt nu een tabel met drie rijen en een kolom gemaakt die 750 pixels breed is en geen ruimte tussen de cellen en geen rand heeft. De breedte van 750 pixels is niet voor niets, want ongeveer de helft van de mensen kijkt nog met een resolutie van 800 bij 600 pixels. Zo kunnen zij de pagina ook bekijken zonder naar rechts te hoeven scrollen. Selecteer nu
de tabel door erin te gaan staan en op de rechter muisknop te drukken en vervolgens Table / Select Table te kiezen. Klik nu in het Properties-panel op Bg color voor de achtergrond kleur. Zorg dat dit de code #0066CC wordt. Ga nu met de muis in de middelste van de drie rijen staan en doe hierbij het zelfde, alleen nu met de kleur #000066. Dit vul je in het veld rechts naast het Bg-vierkantje met kleurenkiezer in. (Erboven zie je Bg staan, dit is om een afbeelding in te voegen.) Ga nu in de bovenste rij staan en selecteer in het Properties-panel "Center" naast Horz (horizontal align). De cursor staat nu in het midden. Type nu: "WELKOM OP MIJN POSTZEGEL HOMEPAGE"
Selecteer de tekst en selecteer daarna "Verdana" in het Properties-panel bij Default Font. Vervolgens vul je in: "12px" bij size en wit als kleur in het vierkantje daarnaast. Klik ten slotte op de B om het geheel vet te maken.
Doe precies hetzelfde in de onderste rij.

Ga nu in de middelste rij staan en voeg binnen deze rij een nieuwe tabel in van 1 rij, 3 kolmmen, 750 pixels, geen rand (border = 0), een cellpadding van 1 en een cellspacing van 2 op dezelfde manier als je hierboven gedaan hebt.
Maak de linker kolom 150 pixels breed, de middelste 440 pixels breed en de rechter kolom 160 pixels breed door deze getallen achter de W in het Properties-panel te zetten. Geef de linker en de middelste kolom een witte achtergrondkleur, door er met je cursor in te staan en bij Bg met het palletje op het witte vierkantje te klikken, of typ #FFFFFF in naast het vierkantje (zie afbeelding).

Ga nu in de linker kolom staan en zorg dat de cursor in het midden van die kolom komt, dus selecteer "center" bij Horz "Default" in het Properties-panel. Selecteer daaronder "Top" bij Vert "Default". Je gaat nu plaatjes invoegen.

Eerst moet je het document nog even opslaan. Doe dit door op File / Save As te drukken in de menubalk. Noem het bestand index.html.

Plaatjes invoegen
Plaatjes invoegen is eigenlijk het makkelijkst wat er is in Dreamweaver. Klik op de invoegbalk op het boompje. Je krijgt nu een bladerschermpje. Blader naar de cursusmap en selecteer het plaatje stamp1.gif en klik op OK.
Geef nu een Break door op Shift Enter te drukken voor een nieuwe regel. Een gewone enter begint een nieuwe alinea, die heb je niet nodig. Voeg nu de plaatjes Stamp2.gif, Stamp3.gif, Stamp4.gif en Stamp5.gif onder elkaar in, dus steeds met een Break ertussen. Ga nu met de cursor voor het bovenste plaatje staan en geef nogmaals een Break.
Als je op de plaatjes klikt kun je er in het Properties-venster een alt tekst aan geven. Klik op het eerste plaatje en vul in het Properties-panel bij alt bijvoorbeel zegel 1 in. Herhaal dit bij de andere plaatjes.
Als je nu op F12 drukt start je browser op en opent het html bestand waarin je bezig bent. Op die manier kun je zien hoe het bestand dat je maakt er op internet uit komt te zien.

roll-over plaatje

Nu ga je een roll-over plaatje invoegen. Ga met je cursor rechts van het onderste plaatje staan en geef nog een Break. Klik nu in invoegbalk rechts naast het image-icoontje op het pijltje naar beneden. Je krijgt een uitklapmenu, selecteer hierin Roll-over Image (zie afbeelding).


Er opent zich nu een scherm waarin je als eerste een naam kunt geven aan de roll-over. Dit mag je zelf verzinnen. Nu moet je in het volgende veld het originele plaatje selecteren. Selecteer hier het plaatje reacties1.gif. Bij roll-over Image selecteer je het plaatje reacties2.gif. Dit is het plaatje dat verschijnt als je er met de muis over heen gaat. Als laatste vul je in het onderste vel een link in. Vul hier in:
"mailto:je eigen mailadres", zodat de gebruiker gelijk een mailtje naar je kan sturen als hij erop klikt. Sla het bestand tussentijds op en druk weer op F12 om te kijken of hij het doet. Haal zonodig het voorbeeld erbij.

Ga nu in de middelste kolom staan en voeg hier een tabel in van 3 rijen, 1 kolom, een breedte van 100 % (table width=percent in plaats van pixels), een cellpadding en cellspacing van allebei 2 en border=0. Maak de bovenste en de onderste rij de kleurcode #FFF0F0. Pak nu het voorbeeld erbij. Dit resultaat krijg je door de drie stukjes tekst die je hebt gekregen in het Zipbestand, in de drie rijen te plaatsen die je net hebt ingevoegd. Bij de onderste rij zit een plaatje. Voeg eerst de teksten in. Ga daarna helemaal aan het begin van je tekst staan in de onderste rij. Voeg het plaatje zegellinks.gif in, zoals je al eerder hebt gedaan. Je krijgt dan onder je document de properties van de afbeelding te zien. Selecteer hierin bij Align "left". Zorg ervoor dat alle tekst het font Verdana krijgt, dat de size op 12px staat en dat de kopjes vet zijn en blauwgekleurd. Geef achter elk kopje een Break.


Layers
We gaan nu een viertal layers invoegen. Layers drijven als het ware op een webpagina. In zo'n layer kun je bijvoorbeeld een plaatje of een stukje tekst zetten. Het leuke van layers is dat je ze kunt laten verdwijnen en verschijnen als je met je muis over een plaatje heen gaat. Het nadeel van layers is dat ze op je webpagina vaak op een iets andere plaats komen te staan dan dat je in dreamweaver aangeeft. Ook kan dit per browser nogal verschillen. Het is dan vaak een kwestie van schuiven en proberen en vervolgens met de F12 toets kijken of de layer de juiste plaats heeft aangenomen. Je kunt natuurlijk ook in het Properties-panel de marges aangeven. Voor het gemak kun je deze het best even overnemen van die uit het voorbeeld, zoals je zometeen zult zien.
Ga nu eerst in de rechter kolom staan en klik op je rechter muisknop. Ga hier naar Table / Split cell, en maak er drie rijen van. Geef de bovenste cel een witte achtergrondkleur, de middelste cel de kleur #B0E6FF en de onderste cel de achtergrondkleur #0099CC met behulp van het Properties-panel. Geef nu de bovenste cel een hoogte van 110, door in de cel te gaan staan en in het Properties-panel 110 achter de H te zetten. Als je in de bovenste cel staat, ga je in de menubalk naar Insert / Layout Objects / Layer. Je ziet nu een Layer verschijnen. Als je de Layer nu selecteert, door linksbovenaan die layer op het vierkantje te drukken zie je dat het Properties-panel zich aanpast aan de layer. In het Porperties-scherm zie je "Layer ID" staan. Zo weet je zeker dat je de layer bewerkt en niet de tabel.
Als eerste ga je de layer een naam geven. Waar nu layer1 staat zet je "home" neer. Daarna neem je de volgende waarden over:
L: 596px, T: 37px, W: 161px, H: 110px. Tenslotte ga je de zichtbaarheid van de layer op verborgen zetten, door bij Vis. hidden te selecteren. Je Properties-panel moet er nu als volgt uitzien:



Als je nu even buiten de tabel klikt zie je de layer verdwijnen. De zichtbaarheid van de layer staat op 'hidden', dat is niet handig om mee te werken. We zetten hem voorlopig dus even op 'visible'.
Klik op Window in de menubalk en zorg dat er een vinkje staat voor Layers. Nu zie je rechts in beeld een venster met de zichtbare en verborgen layers (zie afbeelding).



Klik op het 'gesloten oog' voor de layer "Home"; de layer wordt nu weer zichtbaar.
Nu kun je de layer makkelijker kopieren. Klik op de naam van de layer ("Home"). Onderin verschijnt het properties-venster van de layer. Druk nu op Ctrl C of druk op de rechter muisknop en vervolgens op kopiëren. Klik vervolgens weer even buiten de tabel om de layer te doen verdwijnen. Houd nu de Ctrl toets in en druk drie maal op de V of plak je klembord gewoon drie keer.
Er staan nu in totaal vier identieke layers, zoals je rechtsbovein ziet staan. Het enige wat je moet doen is de naam van de andere drie layers veranderen. De eerste heet home. Druk nu op de tweede layer 'Home' en vul in het Properties-panel waar nu home staat "catalogus" in. Selecteer de derde Layer. Noem deze "link". Noem de vierde layer "zegels".
Selecteer nu weer de eerste layer (home) en ga met de cursor in de layer staan. Controleer in het Properties-venster dat er geen 'Later ID' staat, maar alleen Properties. Voeg hier nu het plaatje layerhome.gif in met behulp van Insert / Image. Voeg in de tweede layer (catalogus) het plaatje layercatalogus.gif in, in de derde (link) het plaatje layerlinks.gif en in de vierde(zegels) het plaatje layerzegels.gif op dezelfde manier. Je gaat deze Layers straks besturen met vier nieuwe roll-over plaatjes die je nu in de cel daaronder gaat invoegen.

Ga nu met je cursor in de cel staan die je eerder de kleur #B0E6FFhebt gegeven, dus de middelste cel van de rechter kolom. Zorg dat de cursor in het midden bovenaan in de cel staat, door Horz op "center" te zetten en Vert (Vert) op "top" in het Properties-panel. Geef nu een Break (Shift Enter).
Voeg hier nu een roll-over plaatje in zoals je al eerder hebt gedaan. Neem hiervoor de plaatjes home1.gif en home2.gif, link dit plaatje naar "postzegel.html" (vul in bij "When clicked, go to URL"). Geef nu weer een Break en maak het tweede roll-over plaatje met als plaatjes catalogus1.gif en catalogus2.gif en link dit plaatje naar http://www.krokol.nl/. Geef weer een Break en maak de derde roll-over met links1.gif en links2.gif. Daaronder doe je de laatste met zegels1.gif en zegels2.gif. Sluit af met nog een Break. Selecteer nu het roll-over plaatje LINKS en vul bij Link in het Properties-panel in: http://postzegels.pagina.nl. Het # teken mag er dan niet meer in staan. Selecteer daarna bij target "_blank". Dit betekent dat de link zich in een nieuw venster opent.

Behaviors
We gaan nu aan deze roll-over plaatjes zogenaamde behaviors meegeven. Dat zijn acties die uitgevoerd worden bij zogenaamde events. Events zijn handelingen die de gebruiker verricht met zijn muis of met zijn toetsenbord zoals onMouseOver, of onClick. Eigenlijk is een roll-over plaatje ook een behaviour. Bij het event onMouseOver, dus als je er met de muis overheen gaat, wordt het tweede plaatje getoond. Bij het event onMouseOut, dus als je er met de muis van af gaat, wordt het eerste plaatje weer getoond. Selecteer maar eens een van je roll-over plaatjes en klik dan op Window / Behaviors. Rechts gaat het behaviors-panel open. Je ziet nu de behaviors staan die bij dat plaatje horen. Bij de laatste vier roll-over plaatjes die je net hebt gemaakt gaan we nog wat behaviors toevoegen. Selecteer het roll-over plaatje HOME en open het Behavior-panel. Klik nu in dit panel op het + teken en selecteer uit het lijstje de behavior "Show-Hide Layers". Je krijgt nu een schermpje waarin jouw vier layers staan genoemd met daaronder een knop show en een knop hide. Selecteer de Layer "Home" en druk op Show. Selecteer daarna de layer "Catalogus" en druk op Hide. Doe dit ook bij de layers "Link" en "Zegels". Het moet er nu zo uit zien:



Druk nu op OK. Je ziet nu in het behaviors panel de behavior "Show-Hide Layers" staan. Selecteer de behavior in dit venster (er staat nu onLoad), druk vervolgens op het pijltje naar beneden voor een keuzemenu. Selecteer uit de lijst onMouseOver. Laat het behavior venster open staan!
Selecteer nu het volgende roll-over plaatje (CATALOGUS). Doe hierbij precies hetzelfde, maar druk nu bij de tweede layer (catalogus) op Show en bij de andere drie op Hide. Zorg weer dat het de onMouseOver event mee krijgt zoals boven beschreven. Doe hetzelfde voor de resterende twee roll-over plaatjes en zorg hierbij dat je bij de juiste layer op Show drukt.
Zet nu de zichtbaarheid van alle layer op 'hidden' behalve de layer "Home". Zet deze layer op 'visible'. Die layer is nu zichtbaar wanneer de pagina voor het eerst wordt geladen. Klik op het oog voor elke layer rechtsboven in je beeldscherm om de (on)zichtbaarheid aan te geven. Het moet er nu zo uitzien:


Sla nu tussentijds op door op File / Save te drukken in de menu balk. Druk nu op F 12 om te kijken of de layers het doen. Als je over het roll-over plaatje HOME heen gaat moet je rechtsbovenin de pagina de layer home zien verschijnen. Ga nu met je muis over de andere roll-over plaatjes heen. Als het goed is moeten de juiste layers bij de juiste plaatjes verschijnen.
Ga terug naar je Dreamweaver-scherm.
We gaan tenslotte bij het roll-over plaatje ZEGELS nog een extra behavior toevoegen. Selecteer dit roll-over plaatje en open het behavior-panel. Klik weer op het + teken en selecteer Popup Message. Vul hier nu in: Dit deel van de site is nog niet klaar!
Zorg nu dat deze behaviour de event onClick meekrijgt op dezelfde manier waarop je eerder de onMouseOver event aan de andere behaviors hebt gegeven.

Tot slot
Ga nu in de onderste cel van de rechter kolom staan die je de kleur #0099CC hebt gegeven, zorg dat Horz op "center" staat en Vert op "top" en geef een Break. Vul nu je persoonlijke gegevens in. Geef daaronder weer een Break en Voeg als laatste het plaatje nederland.gif in. Sla je pagina weer op met File / Save in de menubalk. Je bent nu klaar met je pagina. Druk op F 12 en test alles uit wat je gemaakt hebt. Als je in Dreamweaver op het Code-knopje linksboven je document drukt, zie je de HTML code die Dreamweaver gemaakt heeft (zie afbeelding).


Het Code-knopje is het meest linker knopje van de drie knoppen waarmee je tussen de verschillende manieren waarmee Dreamweaver het resultaat toont, kunt switchen. Het rechter knopje toont het ontwerpscherm en het middelste knopje toont het code- en ontwerpscherm samen.

Je zult zien dat als je een tijdje met Dreamweaver werkt de handelingen steeds sneller verlopen. Centraal in deze handelingen staat toch wel het properties panel. Als je op F1 (of Shift-F1 voor het Reference-panel) drukt start de zeer uitgebreide help-functie automatisch op. Het is aan te bevelen zelf te kijken wat er allemaal mogelijk is door alle functies eens door te lopen en de helpfunctie goed door te nemen. In het volgende deel zullen we dieper ingaan op het "fine tunen" van de code en het maken van stylesheets. Ook zullen we in het volgende deel ingaan op het overzetten van de site.