5. Plaatsen van afbeeldingen

Om eerste de eenvoudige elementen te plaatsen op het scherm is het nu een goed moment om het logo en eventueel andere afbeeldingen te plaatsen. Afbeeldingen die gebruikt worden op websites zullen doorgaans voorbereid worden in Adobe Photoshop. Photoshop maakt het mogelijk afbeeldingen te verkleinen, uit te knippen, transparant te maken en, niet geheel onbelangrijk, Photoshop kan afbeeldingen geschikt maken voor het web m.b.t. de bestandsgrootte. De afbeelding die u kunt plaatsen in de onderstaande oefening is al voorbereid in Photoshop. Wilt u meer informatie over het gebruik van Photoshop dan is het mogelijk om contact op te nemen met Learnit om de mogelijkheden te bespreken; we hebben trouwens ook een gratis cursus Photoshop.

5.1 Een logo invoegen

Het voorbereide logo (juiste afmetingen, kleur en aantal kilobytes) kunt u hier downloaden. Na het downloaden van de afbeelding plaatst u het logo in de map pic, die zich bevind in de map www op het bureaublad. Wanneer de afbeelding in de juiste map staat is het invoegen van de afbeeldingen op de website redelijk eenvoudig. U klikt op het kader in Dreamweaver waar u het logo wilt hebben om het kader te selecteren. (Er komt een gele lijn om het object waarmee wordt aangegeven dat het geselecteerd is.) Nu kunt u onderin het palet eigenschappen in het veld bron een verwijzing maken naar de afbeelding. De verwijzing maken kan op verschillende manieren. Een manier is door de volgende tekst te typen pic/logo.png in het veld bron, een andere manier is om op het map-icoon te klikken rechts van het invoerveld. Via een navigatiescherm wat tevoorschijn komt kunt u de juiste afbeelding selecteren. Een derde manier is om met een ingedrukte muis-knop een streep te trekken vanaf het vizier-icoon (meteen rechts na het bron-invoerveld) naar de betreffende afbeelding in het palet bestanden. Op de onderstaande afbeelding ziet u een voorbeeld van de derde manier.

Als u voor de tweede manier kiest dan zal er na het selecteren van de afbeelding nog een 'alt'-tekst moeten worden ingevuld. Deze 'alt'-tekst staat voor alternatieve tekst. Deze tekst wordt o.a. gebruikt door programma's die de website voorlezen aan gehandicapten. Wanneer u kiest voor manier drie, dan kunt u deze 'alt'-tekst òòk invullen in het palet eigenschappen.

Learnit screenshot voor Online Gratis Dreamweaver cursus