Jak vytvořit záměny s více obrázky v Dreamweaveru

Než začnete vytvářet složitější návrh stránky pomocí chování Zaměnit obrázek aplikace Dreamweaver, podívejte se na hotovou stránku. Pomocí chování Zaměnit obrázek můžete nahradit kterýkoli nebo všechny obrázky na stránce.

Když použijete chování Zaměnit obrázek, je důležité, aby všechny obrázky, které budete zaměňovat, měly stejnou velikost (výšku a šířku). Pokud obrázky nemají stejnou velikost, všechny obrázky kromě prvního budou roztaženy nebo zkomprimovány, aby se vešly do prostoru, který zabírá první obrázek vložený na stránku.

Pokud používáte chování Zaměnit obrázek se sérií obrázků, které nemají stejnou výšku a šířku, máte několik možností:

Větší ořízněte tak, aby všechny obrázky měly stejnou velikost.

Zajistěte, aby horizontální a vertikální obrázky zabíraly ve vašem návrhu stejný prostor, a to kombinací dvou vertikálních obrázků pro každý horizontální. Jednoduše vytvořte soubor v programu, jako je Photoshop, vložte dva svislé obrázky do stejného souboru vedle sebe a poté upravte velikost obrázku tak, aby měl soubor stejnou velikost jako jeden vodorovný obrázek.

Vytvořte jeden soubor obrázku o velikosti vašeho největšího obrázku, nastavte pozadí na neutrální barvu, například černou nebo bílou, a poté vložte všechny ostatní obrázky na pozadí, abyste je mohli uložit se stejnou velikostí souboru.

Chcete-li použít chování Zaměnit obrázek, postupujte takto:

1Vytvořte návrh stránky se všemi obrázky, které chcete na začátku zobrazit.

Každá ze tří fotografií v návrhu stránky pro Tower Bridge v Londýně má dvě kopie: jednu miniaturu a jednu větší verzi. Když se stránka poprvé načte ve webovém prohlížeči, všechny tři miniatury se umístí do spodní části stránky, přičemž první z odpovídajících větších verzí se zobrazí v hlavní oblasti těsně nad miniaturami.

2Pojmenujte své obrázky v Inspektoru vlastností.

Chcete-li své obrázky zacílit pomocí JavaScriptu, což je způsob, jakým funguje chování, nejprve každému obrázku přidělte jedinečné ID. ID obrázku není stejné jako název souboru obrázku nebo textová značka, i když můžete použít stejné nebo podobné názvy. ID obrázků by nemělo obsahovat mezery ani žádné speciální znaky.

3Vyberte Okno→Chování.

Otevře se panel Chování. Panel Chování můžete přetáhnout jinam na stránku a můžete jej rozbalit přetažením za jeho spodní část nebo stranu. Můžete také chtít zavřít všechny ostatní otevřené panely, abyste získali více místa, kliknutím na tmavě šedý pruh v horní části libovolného panelu.

4Vyberte obrázek.

Vyberte obrázek na stránce, který bude sloužit jako spouštěč akce.

5 Zvolte chování Zaměnit obrázek.

S obrazem spouštěče vybraným na pracovní ploše klikněte na znaménko plus na panelu Chování, abyste otevřeli rozevírací seznam akcí a vyberte akci, kterou chcete použít.

6V dialogovém okně Zaměnit obrázek zadejte obrázky, které chcete vyměnit.

V seznamu Obrázky vyberte ID obrázku, který bude nahrazen. Klepnutím na tlačítko Procházet vyberte obrázek, který nahradí hlavní obrázek. Pokud obrázek ještě není uložen ve složce místního webu, Dreamweaver vám nabídne jeho zkopírování.

7V dolní části dialogového okna Zaměnit obrázek vyberte možnost Předběžně načíst obrázky, abyste dali prohlížeči pokyn, aby při načtení stránky načetl všechny obrázky do mezipaměti.

Pokud tuto možnost nevyberete, může při použití výměny obrazu dojít ke zpoždění.

8Pokud chcete, zrušte výběr možnosti Restore Images OnMouseOut.

Možnost Restore Images OnMouseOut znamená, že když je událost dokončena (např. když se myš přesune mimo spouštěcí miniaturu), původní obrázek bude nahrazen. Ve výchozím nastavení Dreamweaver předem vybere tuto volbu pro chování Zaměnit obraz. Možná budete chtít zrušit výběr této možnosti, pokud zjistíte, že nahrazení původního obrázku pokaždé, když přejedete kurzorem na jinou miniaturu, působí rušivě.

9Po zadání všech nastavení chování klepněte na OK.

Nové chování se objeví na panelu Chování.

10Určete událost pro chování.

Po použití akce se můžete vrátit zpět a určit, která událost spustí akci. Ve výchozím nastavení aplikace Dreamweaver použije událost OnMouseOver, když použijete akci Zaměnit obraz, ale tuto událost můžete změnit na jakoukoli dostupnou událost, například Při klepnutí, což vyžaduje, aby uživatel klikl na obraz, aby se spustila akce Zaměnit obraz.

11Použijte další chování.

Chcete-li použít chování Zaměnit obrázek na jiné obrázky na stránce, opakujte kroky 5–10, kliknutím vyberte obrázek, který chcete použít jako spouštěč, a poté určete odpovídající obrázek, který má být zaměněn.

12 Otestujte svou práci v prohlížeči.

Účinky chování, jako je toto, neuvidíte, dokud neklepnete na tlačítko Živé zobrazení v levé horní části pracovní plochy v Dreamweaveru nebo si neprohlédnete stránku ve webovém prohlížeči.