Si të krijoni shkëmbime me imazhe të shumta në Dreamweaver

Përpara se të filloni të krijoni një dizajn faqeje më komplekse me sjelljen e imazhit të ndërrimit të Dreamweaver, shikoni një faqe të përfunduar. Me sjelljen Swap Image, mund të zëvendësoni një ose të gjitha imazhet në një faqe.

Kur përdorni sjelljen Swap Image, është e rëndësishme që të gjitha imazhet që do t'i ndërroni të kenë të njëjtën madhësi (lartësi dhe gjerësi). Nëse imazhet nuk kanë të njëjtën madhësi, të gjitha imazhet përveç të parës do të shtrihen ose kompresohen për t'iu përshtatur hapësirës së zënë nga imazhi i parë i futur në faqe.

Nëse jeni duke përdorur sjelljen Swap Image me një seri imazhesh që nuk janë të gjitha të njëjtat lartësi dhe gjerësi, ju keni disa opsione:

Pritini ato më të mëdha në mënyrë që të gjitha imazhet të kenë të njëjtën madhësi.

Bëni që imazhet horizontale dhe vertikale të zënë të njëjtën hapësirë ​​në dizajnin tuaj duke kombinuar dy imazhe vertikale për çdo horizontale. Thjesht krijoni një skedar në një program të tillë si Photoshop, futni dy imazhe vertikale në të njëjtin skedar krah për krah dhe më pas përmasoni atë imazh në mënyrë që skedari të ketë të njëjtën madhësi si një imazh horizontal.

Krijoni një skedar imazhi me madhësinë e imazhit tuaj më të madh, vendosni sfondin në një ngjyrë neutrale, si e zezë ose e bardhë, dhe më pas futni të gjitha imazhet e tjera në sfond në mënyrë që t'i ruani të gjitha me të njëjtën madhësi skedari.

Ndiqni këto hapa për të përdorur sjelljen Swap Image:

1 Krijoni një dizajn faqe me të gjitha imazhet që dëshironi të shfaqen fillimisht.

Secila nga tre fotot në dizajnin e faqes për Tower Bridge në Londër ka dy kopje: një miniaturë dhe një version më të madh. Kur faqja ngarkohet për herë të parë në një shfletues uebi, të tre imazhet e miniaturës pozicionohen në fund të faqes, me versionin e parë përkatës më të madh që shfaqet në zonën kryesore pikërisht mbi miniaturat.

2 Emërtoni imazhet tuaja në inspektorin e pronës.

Për të synuar imazhet tuaja me JavaScript, e cila është mënyra se si funksionojnë sjelljet, fillimisht jepini çdo imazhi një ID unike. ID-ja e imazhit nuk është e njëjtë me emrin e skedarit të imazhit ose etiketën e tekstit, megjithëse mund të përdorni emra të njëjtë ose të ngjashëm. ID-të e imazheve nuk duhet të kenë hapësira ose ndonjë karakter të veçantë.

3 Zgjidhni Dritarja→ Sjelljet.

Hapet paneli i sjelljeve. Mund ta tërhiqni panelin "Sjelljet" diku tjetër në faqe dhe mund ta zgjeroni duke zvarritur pjesën e poshtme ose anësore të tij. Ju gjithashtu mund të dëshironi të mbyllni çdo panel tjetër të hapur për të krijuar më shumë hapësirë ​​duke klikuar shiritin gri të errët në krye të çdo paneli.

4 Zgjidhni një imazh.

Zgjidhni imazhin në faqen që do të shërbejë si shkas për veprimin.

5 Zgjidhni sjelljen Swap Image.

Me imazhin e aktivizimit të zgjedhur në hapësirën e punës, klikoni shenjën plus në panelin e sjelljeve për të hapur listën rënëse të veprimeve dhe zgjidhni veprimin që dëshironi të aplikoni.

6 Specifikoni imazhet që do të ndërrohen në kutinë e dialogut Swap Image.

Në listën e imazheve, zgjidhni ID-në për imazhin që do të zëvendësohet. Klikoni butonin Browse për të zgjedhur imazhin që zëvendëson imazhin kryesor. Nëse imazhi nuk është ruajtur tashmë në dosjen e faqes lokale, Dreamweaver do të ofrojë ta kopjojë atje për ju.

7Në fund të kutisë së dialogut Swap Image, zgjidhni opsionin Preload Images për të udhëzuar shfletuesin që të ngarkojë të gjitha imazhet në cache kur faqja të ngarkohet.

Nëse nuk e zgjidhni këtë opsion, mund të ndodhë një vonesë kur përdoret shkëmbimi i imazhit.

8 Nëse dëshironi, çaktivizoni opsionin Restore Images OnMouseOut.

Opsioni Restore Images OnMouseOut do të thotë që kur përfundon një ngjarje (si p.sh. kur miu zhvendoset nga miniaturë e ndezjes), imazhi origjinal zëvendësohet. Si parazgjedhje, Dreamweaver parazgjedh këtë opsion për sjelljen Swap Image. Ju mund të dëshironi ta çaktivizoni këtë opsion nëse zbuloni se zëvendësimi i imazhit origjinal sa herë që rrotulloni kursorin mbi një miniaturë tjetër është shpërqendruese.

9 Pasi të keni specifikuar të gjitha cilësimet për sjelljen, klikoni OK.

Sjellja e re shfaqet në panelin e sjelljeve.

10 Specifikoni një ngjarje për sjelljen.

Pasi të zbatohet veprimi, mund të ktheheni dhe të specifikoni se cila ngjarje do të aktivizojë veprimin. Si parazgjedhje, Dreamweaver zbaton ngjarjen OnMouseOver kur përdorni veprimin Swap Image, por ju mund ta ndryshoni atë ngjarje në çdo të disponueshme, si OnClick, e cila kërkon që përdoruesi të klikojë imazhin për të aktivizuar veprimin Swap Image.

11 Aplikoni sjellje shtesë.

Për të aplikuar sjelljen Swap Image në imazhe të tjera në një faqe, përsëritni hapat 5–10, duke klikuar për të zgjedhur imazhin që dëshironi të shërbeni si shkas dhe më pas duke specifikuar imazhin përkatës që duhet të ndërrohet.

12Testoni punën tuaj në një shfletues.

Ju nuk mund t'i shihni efektet e sjelljeve si kjo derisa të klikoni butonin Live View në pjesën e sipërme të majtë të hapësirës së punës në Dreamweaver ose të shikoni paraprakisht faqen tuaj në një shfletues ueb.