Jak převést obrázky do aplikace Dreamweaver CS5

Krok 1

Stáhněte si předdefinovaný soubor lightbox podle svého výběru a rozbalte jej. Najdete sérii čtyř složek a souboru index.html. Složky jsou "css", které mají soubory s kaskádovými styly, "fotky", které obsahují dvě kopie každé z fotografií, kterou použijete, jedna s miniaturou, druhá s plným rozlišením, "obrázky" Obsahuje ikony použité pro tlačítka a ovládací prvky a "JS", který obsahuje soubory Javascriptu, které budete používat.

Krok 2

Zkopírujte vlastní obrázky a miniatury do složky "fotografie", ujistěte se, že v miniaturách předpíšete název obrázku pomocí "thumb_". Například "car.jpg" by měl náhled "thumb_car.jpg". Ujistěte se, že každý obrázek má odpovídající miniaturu.

Krok 3

Zkopírujte lightbox do pracovního adresáře a vytvořte místní kopii svých webových stránek a otevřete webovou stránku v aplikaci Dreamweaver. Pomocí možnosti "odkaz obrázků" propojte miniatury své webové stránky s místy, kde chcete být.

Krok 4

Klikněte na každý obrázek miniatury a podívejte se na oblast vlastností položky aplikace Dreamweaver, najdete možnost vytvořit odkaz kolem této miniatury. Vedle tohoto textového pole je ikona "přímý k souboru". Klikněte tam a přetáhněte šipku, která zvětšuje obrázek na obrázku miniatury. Opakujte tento postup, dokud nezadáte miniaturu každého obrázku.

Krok 5

Klikněte na okno kódu souboru HTML a přejděte na záhlaví. Uvnitř hlavy a napište štítek, který vypadá takto:

Krok 6

Přidat druhou značku skriptu takto:

Značka skriptu, kterou přidáte, zobrazí panel nástrojů "jQuery" a zastaví konkrétní javascript kód. Název kódu se může lišit v závislosti na světelné krabici, kterou používáte.

Krok 7

Nastavte funkci "háček" ve vašem lightboxu z daného zdrojového kódu, uvnitř funkce JavaScriptu, která vypadá takto:

Krok 8

Posuňte dolů a vyhledejte každý štítek, který obklopuje štítek , Do každé značky zadejte následující text:

class = "lightbox"

těsně před uzavřením spony značky. Mohlo by to být například takto:

Krok 9

Propojte soubor CSS, který doprovází lightbox do hlavičky vašeho dokumentu HTML, můžete to provést pomocí funkce "Připojit styl listu" aplikace Dreamweaver v panelu Soubory. Najděte soubor jQuery.css a propojte jej.