Figuren
Hoe kan ik een figuur invoegen?
HEEL BELANGRIJK: vooraleer je een figuur invoegt, moet je steeds je webpagina opslaan! Indien dit niet gebeurt, kan er geen link gelegd worden vanuit
de webpagina naar de figuur.
Wanneer je je pagina niet opslaat, heeft deze namelijk nog geen plaats.
Zorg er ook altijd voor dat je figuren in dezelfde map OF een submap staan als je webpagina's. Indien dit niet het geval is, zal er geen goede link gelegd worden naar je figuur en krijg je problemen als je de site op internet wil plaatsen.
Voeg een figuur
(<IMG>) in door te kiezen voor Invoegen - Afbeelding of
klik op de knop 
in de Invoegbalk.
Je kan nu je figuur zoeken in eender welke map.
In de rechterkant van het venster, kan je een preview zien van de figuur.
Ook staat de grootte en bestandsgrootte van de figuur vermeld.
Wanneer je met figuren werkt, mag je enkel figuren met extensie jpg - gif en png gebruiken. Zorg er steeds voor dat deze figuren niet té groot zijn. Zo is 100 KB de limiet.
Selecteer een figuur en kies voor OK.
Indien je vergeten bent je webpagina op te slaan, vooraleer je de figuur trachtte in te voegen, krijg je onderstaande mededeling.
Kies voor OK en sla je webpagina alsnog op.
Indien je figuur niet in dezelfde map als je webpagina’s staat, krijg je onderstaande melding. Kies voor Nee. Verplaats je figuur en voeg deze opnieuw in.
De figuur verschijnt in je ontwerpvenster.
Wanneer je nu je Sitevenster bekijkt, zal je opmerken dat er een bestand bijgekomen is in je lijst.
Hoe kan ik een figuur bewerken?
Wanneer je een figuur selecteert, zal automatisch je eigenschappenvenster te voorschijn komen. Bovenaan links zie je de bestandsgrootte van een figuur. Deze is erg belangrijk. Hoe kleiner een figuur is, hoe sneller deze op je webpagina zal komen. Probeer je figuur steeds onder de 100 kb te houden. We leren zo dadelijk de bestandsgrootte te verminderen.
1 breedte (<WIDTH>): hier zie je hoe breed je figuur is (in pixels). Je kan dit getal wijzigen.
2 hoogte (<HEIGHT>): hier zie je hoe hoog je figuur is (in pixels). Je kan dit getal wijzigen.
Opmerking: je kan de grootte van je figuur ook wijzigen door de rand van de figuur te verslepen. (gebruik de SHIFT-toets om de figuur niet te vervormen)
Wijzig nooit de breedte EN de hoogte van een figuur. De kans bestaat er dan in dat je de figuur zal vervormen.
3 bron (<SRC>): hier zie je waar je figuur zich bevindt en welke bestandsnaam + extensie de figuur heeft. Indien er geen map vermeld staat, zit de figuur in dezelfde map als het html-bestand.
Met het gele mapje kan je terug bladeren en alsnog een andere figuur invoegen. Deze figuur zal dan de bestaande vervangen.
4 alt: hier kan je een beschrijving van de figuur intypen. Mocht de figuur niet geladen kunnen worden, dan weet de gebruiker welke figuur daar hoort te staan.
5 gelinkt programma. Hier staat het icoon van Photoshop of Fireworks, indien u hierover beschikt. Wanneer je op dit icoon klikt, opent zich bijhorend programma en kan je de figuur dadelijk bewerken.
6 afbeeldingsinstellingen: hiermee kan je enkele belangrijke instellingen van je figuur wijzigen.
Klik op het tabblad Bestand.
Je kan bij B een breedte intypen. Klik vervolgens bij H. Het getal past zichzelf aan. Kies voor OK. Je hebt zonet de figuur geoptimaliseerd. Je hebt niet enkel de grootte aangepast, ook de bestandsgrootte heeft zich aangepast!.
7 v-ruimte: hiermee kan je een figuur een verticale marge/ruimte geven. Je tekst zal vervolgens niet meer tegen je figuur plakken.
8 h-ruimte: hiermee kan je een figuur een horizontale marge/ruimte geven. Je tekst zal vervolgens niet meer tegen je figuur plakken.
9 rand: hiermee kan je een figuur een rand geven.
10 croptool. Hiermee kan je een stukje van de figuur ‘afsnijden’. Druk op de knop en selecteer een stuk van de figuur. Dubbelklik op de figuur. Enkel de selectie blijft over. De rest verdwijnt.
Naderhand krijg je nog de melding dat je deze actie de figuur onherroepelijk zal wijzigen. Enkel via Edit – Undo kan je de actie nog ongedaan maken.
11 Contract – Helderheid: Hier kan je de figuur helderder maken of het contrast tussen de lichte en donkere kleuren wijzigen door met de indicatoren te schuiven of door een waarde in te typen.
12 Scherpte: hier kan je de scherpte van de figuur wijzigen.
13 uitlijning (<ALIGN>): hier kan je de uitlijning van je
figuur wijzigen (links, rechts, midden), ten opzichte van je tekst (!). Indien
je de figuur zelf wil uitlijnen, doe je dat met de knoppen waarmee je ook tekst
kan uitlijnen.
Deze optie geeft je de mogelijkheid tevens de tekst naast de figuur uit te
lijnen (top, bottom, middle)
9 rand (<BORDER>): hier kan je een rand toevoegen rondom je figuur. Voer een getal in (in pixels).
10 uitlijning (<ALIGN>): hier kan je de uitlijning van je
tekst t.o.v. je figuur wijzigen (boven, onder, midden, ...).
In bovenstaand voorbeeld is gekozen voor de optie Boven.
Opmerking: Op dit moment kan je een figuur enkel nog maar links, midden of rechts uitlijnen. Wanneer we met tabellen leren werken, zal hier verandering in komen.
-> de opties die nog niet besproken zijn, worden besproken in het volgende hoofdstuk ("hyperlinks").
Een nieuwe functie in Dreamweaver CS4 (ten opzichte van Dreamweaver 8) is dat je schermafdrukken rechtstreeks in het programma kan plakken. Zo kan je op elk moment een schermafdruk nemen met de Prt Scrn-toets en deze plakken in het programma via Bewerken – Plakken.
Je kan zelfs nog een stukje van de schermafdruk snijden met de “exportgebied”-toets.
