Hogyan készítsünk egy egyszerű gördülőképet a Dreamweaverben

Az átgörgetés olyan népszerű funkció, hogy a Dreamweaver tartalmaz egy speciális párbeszédpanelt, amely csak az átgörgetéshez használható: az Insert Rollover Image párbeszédpanel. A görgetős képek, ahogy a neve is sugallja, úgy vannak kialakítva, hogy reagáljanak, ha valaki a kurzort egy kép fölé viszi. A hatás lehet olyan drámai, mint egy kutyát ábrázoló kép helyett egy oroszlán kép, vagy olyan finom, mint egy szó színének változása.

A Viselkedések panelen található Képcsere opcióval összetettebb átverési képeffektusokat hozhat létre. A Képcsere opció lehetővé teszi több kép egyidejű megváltoztatását.

A Dreamweaver Képátgörgetés beszúrása párbeszédpanelével egyszerű átgörgetési effektus létrehozásához kövesse az alábbi lépéseket:

Vigye a kurzort arra az oldalra, ahol meg szeretné jeleníteni az egérmutatót.

Az átgörgetési effektusoknak legalább két képre van szükségük: egy a kezdeti állapothoz és egy az átgörgetési állapothoz. Használhat két különböző képet vagy két hasonlót, de mindkettőnek azonos méretűnek kell lennie. Ellenkező esetben furcsa méretezési effektusokat lát, mert mindkét képet pontosan ugyanazon a helyen kell megjeleníteni az oldalon.

Válassza a Beszúrás → Kép → Áthúzó kép menüpontot.

Alternatív megoldásként használhatja a Közös beszúrás panel Képek ikonjáról elérhető legördülő listát, és válassza a Kép átgörgetése lehetőséget.

Megjelenik az Insert Rollover Image párbeszédpanel.

A Kép neve mezőben adja meg a kép nevét.

Mielőtt viselkedést alkalmazna egy elemre, például egy képre, az elemnek nevet kell adnia, hogy a viselkedési szkript hivatkozhasson rá. Bármit elnevezhet az elemeknek, amíg nem használ szóközöket vagy speciális karaktereket.

Az Eredeti kép mezőben adja meg az első látható képet. A Tallózás gombbal keresse meg és válassza ki a képet.

Ha a képek még nincsenek a helyi webhely mappájában, a Dreamweaver átmásolja őket a webhelyére, amikor létrehozza az átgörgetést.

Az Áthelyezett kép mezőbe írja be azt a képet, amelyet láthatóvá szeretne tenni, amikor a látogató az első kép fölé viszi a kurzort.

Ismét használhatja a Tallózás gombot a kép megkereséséhez és kiválasztásához.

Jelölje be az Átgörgetési kép előtöltése jelölőnégyzetet, ha az oldal első betöltésekor az összes átgörgetési képet a böngésző gyorsítótárába szeretné betölteni.

Ha nem választja ezt a lépést, a látogatók késést tapasztalhatnak, mivel a második kép nem töltődik le, amíg a kurzort az eredeti kép fölé nem viszi.

Az Alternatív szöveg mezőbe írja be a képek leírását.

Az alternatív szöveg nem kötelező, de ajánlott, mert a kulcsszavak használata javíthatja a keresőoptimalizálást. Hasonlóképpen, az alternatív szöveg kulcsfontosságú része a webes kisegítő lehetőségeknek, mivel ezt a szöveget speciális böngészők, az úgynevezett képernyőolvasók olvassák fel, amelyeket vakok és korlátozottan látó vagy mozgásukban korlátozottak használnak. Alternatív szöveg csak akkor jelenik meg a böngészőben, ha a képek nem láthatók.

A Ha rákattint, Ugrás az URL-re mezőbe írjon be egy webcímet, vagy tallózással keressen meg egy másik oldalt a webhelyén, amelyre hivatkozni szeretne.

Ha nem ad meg URL-t, a Dreamweaver automatikusan beszúrja a # jelet helyőrzőként a kódba.

A # jel egy elterjedt technika olyan hivatkozások létrehozására, amelyek nem hivatkoznak sehova. Mivel az átgörgetéses képeknek, amelyek nem hivatkoznak másik oldalra, számos nagyszerű felhasználási lehetőség van, ez a technika hasznos. Ne feledje, hogy ha azt szeretné, hogy az egérmutató mutatója hivatkozzon, le kell cserélnie a # jelet egy másik oldalra mutató hivatkozásra.

Kattintson az OK gombra.

A képek automatikusan átkerülnek.

Az átgörgetés működés közbeni megtekintéséhez mentse el a fájlt, majd kattintson a munkaterület tetején lévő földgömb ikonra az oldal előnézetének megtekintéséhez a webböngészőben.

Megtekintheti, hogyan működik az átgörgetés a Dreamweaver Tervező nézetében vagy az Élő nézet opció használatával. Ha a munkaterület bal felső sarkában található Élő gombra kattint, a Dreamweaver lényegében webböngészővé változtatja, amely a Chrome böngészőhöz hasonló oldalakat jelenít meg.

Amikor olyan oldal előnézetét tekinti meg számítógépén, amelyen átgörgetési kép szerepel, néhány webböngésző figyelmeztetést jelenít meg, amely szerint engedélyeznie kell az ActiveX-vezérlők számára az oldal megtekintéséhez. Ez egy biztonsági figyelmeztetés, amely csak akkor jelenik meg, ha az oldalt ugyanazon a számítógépen nyitják meg, ahol az oldalt menti.

Ha közzéteszi az oldalt egy webszerveren, majd internetkapcsolaton keresztül tekinti meg, akkor Ön és webhelye látogatói nem fogják látni ezt a hibát.

Köszönet: Az istockphoto.com alkotása