Sådan oprettes swaps med flere billeder i Dreamweaver - dummies

Før du begynder at oprette et mere komplekst sidedesign med Dreamweaver's Swap Image-adfærd, skal du se på en færdig side. Med swap-billedadfærden kan du erstatte alle eller alle billeder på en side.

Når du bruger swap-billedadfærd, er det vigtigt at lave alle billeder, som du vil bytte i samme størrelse (højde og bredde) Hvis billederne ikke er af samme størrelse, vil alle billeder undtagen den første blive strakt eller komprimeret for at passe til det rum, der er taget op af det første billede, der er indsat i siden.

Hvis du bruger swapbilledadfærd med en række billeder, der ikke har samme højde og bredde, har du nogle få muligheder:

Beskær de større, så alle billeder har samme størrelse.

Gør horisontale og vertikale billeder op til det samme rum i dit design ved at kombinere to vertikale billeder for hver vandret. Opret blot en fil I et program som Photoshop indsætter du to vertikale billeder i den samme fil ved siden af ​​hinanden og derefter størrelsen på billedet, så filen er den samme størrelse som et vandret billede.

Opret en billedfil, størrelsen af ​​dit største billede, sæt baggrunden til en neutral farve, f.eks. Sort eller hvid, og indsæt alle andre billeder på baggrunden, så du kan gemme dem alle med samme filstørrelse.

Følg disse trin for at bruge swap-billedadfærd:

1Opret et sidedesign med alle de billeder, du vil have vist i starten.

Hvert af de tre billeder i sidedesignet til Tower Bridge i London har to kopier: en miniature og en større version. Når siden først indlæses i en webbrowser, er alle tre miniaturebilleder placeret nederst på siden, hvor den første af de tilsvarende større versioner vises i hovedområdet lige over miniaturerne.

2Naam dine billeder i ejendomsinspektøren.

For at målrette dine billeder med JavaScript, hvilket er hvordan adfærd fungerer, skal du først give hvert billede et unikt id. Billed-id'et er ikke det samme som billedfilen eller teksttaggen, selvom du kan bruge samme eller lignende navne. Billed-id'er må ikke have mellemrum eller specialtegn.

3Vælg vinduet → Behaviors.

Panelet Behavior åbnes. Du kan trække panelet Behaviors andetsteds på siden, og du kan udvide det ved at trække bunden eller siden. Du kan også lukke alle andre åbne paneler for at gøre mere plads ved at klikke på den mørke grå bjælke øverst på et panel.

4Vælg et billede.

Vælg billedet på siden, der vil fungere som udløseren til handlingen.

5Vælg swap billedadfærd.

Med det udløsningsbillede, der er valgt i arbejdsområdet, skal du klikke på plustegnet i panelet Behaviors for at åbne rullemenuen over handlinger og vælge den handling, du vil anvende.

6Vælg de billeder, der skal bytes i dialogboksen Byt billede.

I billedlisten skal du vælge id'et for det billede, der skal udskiftes. Klik på knappen Gennemse for at vælge det billede, der erstatter hovedbilledet. Hvis billedet ikke allerede er gemt i lokalmappen, tilbyder Dreamweaver at kopiere det der for dig.

7 I bunden af ​​dialogboksen Byt billede skal du vælge indstillingen Preload Images for at instruere browseren til at indlæse alle billeder i cachen, når siden er indlæst.

Hvis du ikke vælger denne indstilling, kan der ske en forsinkelse, når billedswapen bruges.

8 Hvis du vil, skal du fravælge indstillingen Gendan billeder OnMouseOut.

Funktionen Gendan billeder OnMouseOut betyder, at når en begivenhed er fuldført (f.eks. Når musen flyttes ud af den udløsende miniature), erstattes det originale billede. Som standard vælger Dreamweaver denne mulighed for swap-billedadfærd. Du kan muligvis fravælge denne indstilling, hvis du finder, at udskiftning af det originale billede hver gang du ruller markøren over en anden miniature, er distraherende.

9Når du angiver alle indstillingerne for adfærden, skal du klikke på OK.

Den nye opførsel vises i panelet Behaviors.

10Vælg en begivenhed for opførelsen.

Når handlingen er gennemført, kan du gå tilbage og angive, hvilken begivenhed der vil udløse handlingen. Som standard anvender Dreamweaver OnMouseOver-begivenheden, når du bruger swap-billed-handlingen, men du kan ændre den pågældende begivenhed til enhver tilgængelig, f.eks. OnClick, som kræver, at brugeren klikker på billedet for at udløse swap-billed-handlingen.

11Apply yderligere behaviors.

Hvis du vil anvende Swap Image-adfærd til andre billeder på en side, skal du gentage trin 5-10, klikke for at vælge det billede, du vil tjene som udløser, og derefter angive det tilsvarende billede, der skal byttes.

12Test dit arbejde i en browser.

Du kan ikke se virkningerne af adfærd som denne, før du klikker på knappen Live visning øverst til venstre i arbejdsområdet i Dreamweaver eller for eksempel din side i en webbrowser.