Hvordan du lager swaps med flere bilder i Dreamweaver - dummies

Før du begynner å lage et mer komplisert sidedesign med Dreamweaver's Swap Image atferd, se på En ferdig side. Med byttebildeadferd kan du erstatte alle eller alle bildene på en side.

Når du bruker swap-bildeadferdigheten, er det viktig å lage alle bildene du vil bytte i samme størrelse (høyde og bredde). Hvis bildene ikke er like store, vil alle bilder unntatt den første bli strukket eller komprimert for å passe plass til det første bildet som er lagt inn i siden.

Hvis du bruker bytte bildeadferd med en rekke bilder som ikke har samme høyde og bredde, har du noen få alternativer:

Beskjær de større, slik at alle bilder har samme størrelse.

Lag horisontale og vertikale bilder tar opp samme plass i designet ved å kombinere to vertikale bilder for hver horisontal. Bare lag en fil I et program som Photoshop, sett inn to vertikale bilder i samme fil ved siden av, og formater deretter bildet slik at filen har samme størrelse som ett horisontalt bilde.

Lag en bildefil størrelsen på ditt største bilde, sett bakgrunnen til en nøytral farge, for eksempel svart eller hvitt, og sett deretter alle andre bilder inn i bakgrunnen slik at du kan lagre dem alle med samme filstørrelse.

Følg disse trinnene for å bruke Bytte bildeadferd:

1Opprett et sidedesign med alle bildene du vil ha vist i utgangspunktet.

Hver av de tre bildene i sidedesignet for Tower Bridge i London har to kopier: en miniatyr og en større versjon. Når siden først lastes i en nettleser, er alle tre miniatyrbildene plassert nederst på siden, med den første av de tilsvarende større versjoner som vises i hovedområdet rett over miniatyrbildene.

2Name bildene dine i eiendomsinspektøren.

For å målrette bildene dine med JavaScript, som er hvordan atferd fungerer, må du først gi hvert bilde et unikt ID. Bildet ID er ikke det samme som bildet filnavn eller tekstetiketten, selv om du kan bruke samme eller lignende navn. Bild ID-er må ikke ha mellomrom eller spesielle tegn.

3Velg vindu → Behaviors.

Behavior panelet åpnes. Du kan dra panelet Behaviors andre steder på siden, og du kan utvide den ved å dra bunnen eller siden. Du vil kanskje også lukke noen andre åpne paneler for å få mer plass ved å klikke på den mørkegrå linjen øverst på hvilket som helst panel.

4Velg et bilde.

Velg bildet på siden som vil fungere som utløseren for handlingen.

5Velg bytte bildeadferd.

Med utløserbildet valgt i arbeidsområdet, klikker du på plustegnet i Behaviors-panelet for å åpne rullegardinlisten over handlinger, og velg handlingen du vil bruke.

6Specifiser bildene som skal byttes i dialogboksen Bytt bilde.

I ID-listen velger du ID-en for bildet som skal byttes ut. Klikk på Bla gjennom-knappen for å velge bildet som erstatter hovedbildet. Hvis bildet ikke allerede er lagret i lokalmappen, vil Dreamweaver tilby å kopiere den der for deg.

7 I bunnen av dialogboksen Bytt bilde velger du alternativet Preload Images for å instruere nettleseren til å laste alle bildene i hurtigbufferen når siden er lastet inn.

Hvis du ikke velger dette alternativet, kan det oppstå forsinkelse når bildet byttes ut.

8 Hvis du vil, avmarker alternativet Gjenopprett bilder OnMouseOut.

Alternativet Gjenopprett bilder OnMouseOut betyr at når et arrangement er fullført (for eksempel når musen flyttes av utløsende miniatyrbildet), blir det originale bildet erstattet. Som standard forvalter Dreamweaver dette alternativet for bytte bildeadferd. Du vil kanskje velge fra dette alternativet hvis du finner ut at erstatning av det opprinnelige bildet hver gang du ruller markøren over et annet miniatyrbilde, er distraherende.

9After du angir alle innstillingene for oppførselen, klikker du OK.

Den nye oppførselen vises i panelet Behaviors.

10Specifisere en hendelse for oppførselen.

Etter at handlingen er brukt, kan du gå tilbake og angi hvilken hendelse som vil utløse handlingen. Som standard bruker Dreamweaver OnMouseOver-hendelsen når du bruker swap-bilde-handlingen, men du kan endre den aktuelle hendelsen til en hvilken som helst tilgjengelig, for eksempel OnClick, som krever at brukeren klikker på bildet for å utløse swap-bilde-handlingen.

11Apply ytterligere atferd.

For å bruke Swap Image-oppførselen til andre bilder på en side, gjenta trinn 5-10, klikk for å velge bildet du vil tjene som en utløser og deretter angi det tilsvarende bildet som skal byttes.

12Test arbeidet ditt i en nettleser.

Du kan ikke se effektene av atferd som denne før du klikker på Live-visning-knappen øverst til venstre i arbeidsområdet i Dreamweaver eller forhåndsviser siden din i en nettleser.