Roll Over effekter i Dreamweaver CS5

En rull effekt fører til en webside design element for å endre når brukeren beveger musa over den. Dette brukes til å markere knapper og bytte ut bilder for å gjøre nettsteder mer dynamisk og lydhør overfor brukerens input. Dreamweaver CS5, Adobe high-end HTML editor, har en rekke måter å sette opp denne typen effekt. Hvilken du skal velge avhenger av hvilken nettleser du målretter.

Obligatoriske komponenter

En rull effekt krever minst to bilder. Det første bildet er det første bildet som vises på websiden når det lastes, og det andre bildet blir byttet inn når markøren er satt over det første bildet. En valgfri tredje bildet kan brukes som en erstatning for når brukeren klikker på selve bildet. Disse bildene kan gjøres i Photoshop eller et annet bilderedigeringsprogram, som et sett, slik at eventuelle tekstelementer eller grafiske elementer er fordelt likt på hvert bilde.

Ved hjelp av Javascript

Dreamweaver standard måte å gjøre rulle over bildene er med Javascript. Du definerer en atferd knyttet til et bestemt element på siden, og at atferd har konkrete handlinger den reagerer på. Disse atferd og handlinger er forenklede versjoner av Javascript-kode som vanligvis brukes; se på Dreamweaver er "kodevisning" for å se Java satt på plass på websiden din som du gjør dette. Den spesifikke atferd som blir lagt for en Javascript-bilde rulle over effekten er den Bytt bilde Behavior.

Ved hjelp av CSS

Cascading Style Sheets, eller CSS, er en måte å skille utseende på tekst og posisjon aspekter av ulike elementer i en nettside fra selve teksten selv. CSS kan også brukes til å generere bilde roll overs og drop-down menyer i Dreamweaver, men det krever hånd-redigering kode for å gjøre det. Fordelen med å gjøre dette med CSS er at det fungerer selv når en bruker kjører sin nettleser med Javascript. Ulempen er at det ikke er så fleksibel og litt vanskeligere å sette opp første gang. Den lar deg også til å definere roll overs for en hel nettside som er lastet gang, i stedet for hver gang en side lastes.

Advarsel

Hver gang du bruker et bilde rulle over med Javascript, du forårsaker websiden for å laste to eller tre bilder. Dette kan forsinke lasting tid på websiden for nye besøkende og potensielt føre dem til å trykke "Back" -knappen. Som med mange Web designelementer, er det et spørsmål om en lavere innlastings er verdt den ekstra attraktivitet på nettstedet.