Kaip sukurti apsikeitimo sandorius su keliais vaizdais „Dreamweaver“.

Prieš pradėdami kurti sudėtingesnį puslapio dizainą naudodami „Dreamweaver“ vaizdo mainų funkciją, pažiūrėkite į baigtą puslapį. Sukeisti vaizdą galite pakeisti bet kurį arba visus puslapio vaizdus.

Kai naudojate funkciją Keisti vaizdą, svarbu, kad visi vaizdai, kuriuos keisite, būtų tokio paties dydžio (aukštis ir plotis). Jei vaizdai nėra vienodo dydžio, visi vaizdai, išskyrus pirmąjį, bus ištempti arba suspausti, kad tilptų į vietą, kurią užima pirmasis į puslapį įterptas vaizdas.

Jei naudojate veiksmą Keisti vaizdą su vaizdų serijomis, kurios nėra vienodo aukščio ir pločio, turite keletą parinkčių:

Apkarpykite didesnius, kad visi vaizdai būtų vienodo dydžio.

Padarykite, kad horizontalūs ir vertikalūs vaizdai užimtų tą pačią vietą jūsų dizaine, sujungdami po du vertikalius vaizdus kiekvienam horizontaliam. Tiesiog sukurkite failą programoje, pvz., „Photoshop“, įdėkite du vertikalius vaizdus į tą patį failą vienas šalia kito, tada nustatykite vaizdo dydį, kad failas būtų tokio pat dydžio kaip vienas horizontalus vaizdas.

Sukurkite vieną didžiausio vaizdo dydžio vaizdo failą, nustatykite neutralios spalvos foną, pvz., juodą arba baltą, tada įdėkite visus kitus vaizdus į foną, kad galėtumėte juos visus išsaugoti tokio paties dydžio failais.

Atlikite šiuos veiksmus, kad galėtumėte naudoti vaizdo keitimo funkciją:

1Sukurkite puslapio dizainą su visais vaizdais, kuriuos norite rodyti iš pradžių.

Kiekviena iš trijų Londono Tauerio tilto puslapio dizaino nuotraukų turi dvi kopijas: vieną miniatiūrą ir vieną didesnę versiją. Kai puslapis pirmą kartą įkeliamas žiniatinklio naršyklėje, visi trys miniatiūrų vaizdai yra puslapio apačioje, o pirmoji iš atitinkamų didesnių versijų rodoma pagrindinėje srityje, tiesiai virš miniatiūrų.

2 Pavadinkite savo vaizdus nuosavybės inspektoriuose.

Jei norite taikyti savo vaizdus su „JavaScript“, kaip veikia elgsena, pirmiausia kiekvienam vaizdui suteikite unikalų ID. Vaizdo ID nėra toks pat kaip vaizdo failo pavadinimas arba teksto žyma, nors galite naudoti tuos pačius arba panašius pavadinimus. Vaizdo ID neturi turėti tarpų ar specialių simbolių.

3Pasirinkite Langas → Elgesys.

Atsidaro skydelis Elgesys. Galite vilkti skydelį „Elgsena“ į kitą puslapio vietą, o išplėsti – vilkdami jo apačią arba šoną. Taip pat galite uždaryti visas kitas atidarytas plokštes, kad būtų daugiau vietos, spustelėdami tamsiai pilką juostą bet kurio skydelio viršuje.

4 Pasirinkite vaizdą.

Puslapyje pasirinkite vaizdą, kuris veiks kaip veiksmas.

5 Pasirinkite veiksmą Keisti vaizdą.

Darbo srityje pasirinkę aktyviklio vaizdą, skydelyje Elgesys spustelėkite pliuso ženklą, kad atidarytumėte išskleidžiamąjį veiksmų sąrašą ir pasirinkite veiksmą, kurį norite taikyti.

6 Dialogo lange Keisti vaizdą nurodykite vaizdus, ​​kuriuos norite keisti.

Vaizdų sąraše pasirinkite vaizdo, kuris bus pakeistas, ID. Spustelėkite mygtuką Naršyti, kad pasirinktumėte vaizdą, kuris pakeičia pagrindinį vaizdą. Jei vaizdas dar nėra išsaugotas vietiniame svetainės aplanke, „Dreamweaver“ pasiūlys jį nukopijuoti.

7 Dialogo lango Sukeisti vaizdą apačioje pasirinkite parinktį Iš anksto įkelti vaizdus, ​​kad nurodytumėte naršyklei įkelti visus vaizdus į talpyklą, kai įkeliamas puslapis.

Jei nepasirinksite šios parinkties, naudojant vaizdo keitimą gali atsirasti delsa.

8Jei norite, panaikinkite parinkties Restore Images OnMouseOut žymėjimą.

Parinktis Atkurti vaizdus OnMouseOut reiškia, kad pasibaigus įvykiui (pvz., kai pelė nukeliama nuo suaktyvinančios miniatiūros), pakeičiamas pradinis vaizdas. Pagal numatytuosius nustatymus „Dreamweaver“ iš anksto pasirenka šią parinktį „Swap Image“ veikimui. Galbūt norėsite atšaukti šios parinkties pasirinkimą, jei pastebėsite, kad pradinio vaizdo pakeitimas kiekvieną kartą, kai užvedate žymeklį ant kitos miniatiūros, blaško dėmesį.

9 Nurodę visus veikimo parametrus, spustelėkite Gerai.

Nauja elgsena rodoma Elgesio skydelyje.

10 Nurodykite elgesio įvykį.

Pritaikę veiksmą galite grįžti atgal ir nurodyti, kuris įvykis suaktyvins veiksmą. Pagal numatytuosius nustatymus „Dreamweaver“ taiko „OnMouseOver“ įvykį, kai naudojate veiksmą Keisti vaizdą, tačiau galite pakeisti tą įvykį į bet kurį galimą, pvz., „OnClick“, kuri reikalauja, kad vartotojas spustelėtų vaizdą, kad suaktyvintų veiksmą Keisti vaizdą.

11 Taikykite papildomą elgesį.

Norėdami pritaikyti Keisti vaizdą kitiems vaizdams puslapyje, pakartokite 5–10 veiksmus, spustelėdami, kad pasirinktumėte vaizdą, kurį norite naudoti kaip aktyviklį, ir tada nurodykite atitinkamą vaizdą, kurį reikia pakeisti.

12Išbandykite savo darbą naršyklėje.

Negalite matyti tokio elgesio poveikio, kol nepaspustelėsite tiesioginio vaizdo mygtuko viršutiniame kairiajame Dreamweaver darbo srities kampe arba neperžiūrėsite puslapio žiniatinklio naršyklėje.