Hoe u rollovers in Adobe Dreamweaver CS6 - dummies

In Adobe Dreamweaver CS6 kunt u afbeeldingsobjecten invoegen, inclusief tijdelijke aanduidingen voor afbeeldingen, rollover -afbeeldingen (afbeeldingen die veranderen wanneer een kijker rolt de muis boven de afbeelding), navigatiebalken en Fireworks HTML. U opent deze afbeeldingsobjecten door Invoegen → Afbeeldingobjecten te kiezen.

Ga als volgt te werk om een ​​rollover-afbeelding te maken:

1 Maak de afbeeldingen die moeten worden gebruikt als rollover.

U kunt deze afbeeldingen genereren in Fireworks, Illustrator, Photoshop of elke andere toepassing waarmee u afbeeldingen kunt opslaan die zijn geoptimaliseerd voor internet. Voor de beste resultaten maakt u afbeeldingen met exact dezelfde breedte en hoogte.

2 Plaats de cursor op de pagina waar u de rollover wilt laten verschijnen en kies Invoegen → Afbeeldingobjecten → Rollover afbeelding of klik op de knop Afbeelding omdraaien in het paneel Invoegen.

Het dialoogvenster Rollover-afbeelding invoegen verschijnt.

3Typ een afbeeldingsnaam zonder spaties in het tekstveld Afbeeldingsnaam.

Deze naam wordt gebruikt in het script dat de rollover maakt.

4Klik op de bladerknoppen rechts van de tekstvelden Originele afbeelding en Rollover afbeelding om de afbeelding te zoeken die u standaard op de pagina wilt weergeven.

De afbeelding wordt alleen weergegeven als iemand de muisaanwijzer over de afbeelding beweegt.

5Verwijder het selectievakje Vooraf laden van rollover-afbeelding geselecteerd.

Deze optie downloadt de rollover-afbeelding wanneer de pagina wordt gedownload om vertragingen in rollovers te voorkomen.

6Typ geschikt beschrijvende alt-tekst.

Natuurlijk typt u het in het Alt-tekstveld.

7Zoek Dreamweaver waar kijkers worden geleid wanneer ze op uw rollover-afbeelding klikken in het tekstvak Wanneer geklikt, ga naar URL.

U kunt op de knop Bladeren klikken om een ​​andere pagina op uw site te zoeken of een URL in te voeren.

Als u een koppeling naar een andere website maakt, moet u het voorvoegsel // aan het begin van de URL vermelden. Als u dit veld leeg laat, voegt Dreamweaver automatisch een dode link (#) toe.

8Klik op OK.

De rolloverafbeelding wordt op de pagina gemaakt.

9Om een ​​voorbeeld van de nieuwe rolloverafbeelding te bekijken, kiest u Bestand → Voorvertoning in browser of klikt u op de knop Liveweergave op de werkbalk Document.

Als u nog geen echte koppeling voor een knop of hyperlink heeft, kunt u een hekje (#) invoeren om een ​​dode link te maken. De link of knop lijkt klikbaar maar gaat nergens heen als erop wordt geklikt. Deze optie is beter dan op de spatiebalk te drukken om een ​​lege ruimte als een link te maken, omdat die link een pagina niet gevonden-fout toont wanneer erop wordt geklikt.