Hvordan gjøre et bilde Roll i Dreamweaver CS3

Hvordan gjøre et bilde Roll i Dreamweaver CS3


Du kan bruke rollover bilder på websidene dine for å øke interaktivitet, og trekke brukerens oppmerksomhet til områder av betydning, for eksempel et bilde brukt som en knapp. En visuell roll effekt bekrefter for brukeren at bildet er interaktiv, og vil utføre en handling når du klikker. Ofte Webdesignere legge til 3D-effekter for å gi knappen en illusjon av dybde når trykket, eller et høydepunkt rundt knappene kanten. Selv roll bilder kan forbedre brukeropplevelsen, er det viktig å ikke gå over og bare bruke dem når det er nødvendig, eller de raskt miste sin effekt.

Bruksanvisning

1 Start Adobe Dreamweaver CS3, og klikk deretter på "File" -menyen og velg "New". Dobbeltklikk på "HTML" fra "Sidetype" -menyen for å åpne en ny HTML-side.

2 Klikk på det stedet der du vil at rollover bilde lagt ved hjelp av Dreamweaver kode eller design visning. Klikk på "Insert" -menyen, og klikk deretter på "Bilde Objects" og "Roll bilde».

3 Skriv inn et unikt navn på bildet i "Bildenavn" boksen. Klikk på "Browse" -knappen ved siden av "Original image" boksen for å velge plasseringen av den opprinnelige bildet for å vise. Klikk på "Browse" -knappen ved siden av "Roll bilde" boksen for å velge plasseringen av roll bildet. Skriv inn en beskrivelse av bildet i "Alternativ tekst" boksen for brukere som ikke kan se bildene i nettleseren. Til slutt klikker du på "Browse" -knappen ved siden av "Gå til URL" boksen for å velge hvilken side du vil omdirigere brukeren til etter at hun klikker på bildet.

4 Klikk på "OK" -knappen for å sette inn roll bildet. Dreamweaver legger automatisk HTML og Javascript-kode for bildet rollover.

5 Lagre siden og last opp til webserveren. Du bør også laste opp de relevante bildefiler for velt. Åpne siden i nettleseren, og du vil se det første bildet som vises. Beveg musen over bildet for å se roll bildet, og klikk deretter på bildet for å gå til den koblede siden.

Hint

  • Dreamweaver CS3 setter Javascript er nødvendig for bildet roll inn i hodet på siden. Som denne koden er ofte nødvendig på flere sider, kan du klippe og lime inn Javascript inn en ekstern fil for å få fart siden lasting ganger.
  • Hold filstørrelser av rollover bilder små, som du legger i to bilder i stedet for én, som vil legge til side lasting tid.