Hur man skapar swappar med flera bilder i Dreamweaver - dummies

Innan du börjar skapa en mer komplex siddesign med Dreamweaver's Swap Image beteende, titta på en färdig sida. Med bytet Bildbeteende kan du ersätta alla eller alla bilder på en sida.

När du använder Byt bildbeteende är det viktigt att göra alla bilder som du byter i samma storlek (längd och bredd) Om bilderna inte är lika stora kommer alla bilder utom den första att sträckas eller komprimeras för att passa utrymmet som tas upp av den första bilden som sätts in på sidan.

Om du använder swapbildsbeteendet med en serie bilder som inte har samma höjd och bredd har du några alternativ:

Beskär de större så att alla bilder är lika stora.

Gör horisontella och vertikala bilder upp till samma utrymme i din design genom att kombinera två vertikala bilder för varje horisontell. Skapa bara en fil I ett program som Photoshop lägger du in två vertikala bilder i samma fil sida vid sida och sedan förstorar du bilden så att filen är lika stor som en horisontell bild.

Skapa en bildfil, storleken på din största bild, sätt bakgrunden till en neutral färg, till exempel svart eller vitt, och lägg sedan in alla andra bilder i bakgrunden så att du kan spara dem alla med samma filstorlek.

Följ dessa steg för att använda byt bildbeteende:

1 Skapa en siddesign med alla bilder du vill visa först.

Varje av de tre bilderna i siddesignen för Tower Bridge i London har två kopior: en miniatyrbild och en större version. När sidan först laddas i en webbläsare placeras alla tre miniatyrbilderna längst ner på sidan, med den första av motsvarande större versioner som visas i huvudområdet strax ovanför miniatyrerna.

2Name dina bilder i egenskapsinspektören.

Att rikta dina bilder med JavaScript, vilket är hur beteenden fungerar, ger först varje bild ett unikt ID. Bild-id är inte detsamma som bildfilnamnet eller texttaggen, även om du kan använda samma eller liknande namn. Bild-ID-skivor får inte ha mellanslag eller specialtecken.

3Välj fönster → Beteenden.

Panelen Behavior öppnas. Du kan dra panelen Behavior någon annanstans på sidan, och du kan expandera den genom att dra ner eller nedåt. Du kan också vilja stänga alla andra öppna paneler för att göra mer utrymme genom att klicka på den mörkgråstången längst upp på en panel.

4Välj en bild.

Välj bild på sidan som ska fungera som utlösare för åtgärden.

5Välj byt bildbeteende.

Med den utlösande bilden som valts i arbetsytan klickar du på plustecknet i panelet Behavior för att öppna listrutan med åtgärder och väljer den åtgärd du vill tillämpa.

6 Ange de bilder som ska bytas i dialogrutan Byt bild.

Välj ID för bilden som ska ersättas i listan Bilder. Klicka på knappen Bläddra för att välja den bild som ersätter huvudbilden. Om bilden inte redan är sparad i den lokala webbplatsmappen, kommer Dreamweaver att erbjuda att kopiera det där för dig.

7 I nedre delen av dialogrutan Byt bild väljer du alternativet Preload Images för att instruera webbläsaren att ladda alla bilder i cacheminnet när sidan laddas.

Om du inte väljer det här alternativet kan en fördröjning inträffa när bildbytet används.

8 Om du vill, avmarkera alternativet Återställ bilder OnMouseOut.

Alternativet Återställ bilder OnMouseOut innebär att när en händelse är klar (till exempel när musen flyttas av den utlösande miniatyrbilden), ersätts originalbilden. Som standard väljer Dreamweaver det här alternativet för byt bildbeteende. Du kanske vill avmarkera det här alternativet om du upptäcker att byta ut originalbilden varje gång du rullar markören över en annan miniatyrbild är störande.

9After du anger alla inställningar för beteendet, klicka på OK.

Det nya beteendet visas på panelen Behavior.

10 Ange en händelse för beteendet.

När åtgärden har tillämpats kan du gå tillbaka och ange vilken händelse som kommer att utlösa åtgärden. Som standard använder Dreamweaver OnMouseOver-händelsen när du använder funktionen Byt bild, men du kan ändra den händelsen till vilken som helst tillgänglig, till exempel OnClick, vilket kräver att användaren klickar på bilden för att utlösa byt bildåtgärden.

11Apply ytterligare beteenden.

Om du vill använda byt bildbeteende till andra bilder på en sida, upprepa steg 5-10, klicka för att välja den bild som du vill fungera som en utlösare och ange sedan motsvarande bild som ska bytas ut.

12Test ditt arbete i en webbläsare.

Du kan inte se effekterna av beteenden som den här tills du klickar på knappen Live view längst upp till vänster i arbetsytan i Dreamweaver eller förhandsgranskar din sida i en webbläsare.