Ako sa stavia Picture Show Image Gallery v Dreamweaver CS3

A " Picture Show " alebo " galériu obrazu , " predstavuje fotografie v portfóliu , rovnako ako webové stránky . Kým obrazovej galérie môže mať mnoho konfigurácií , populárny formát zobrazenia náhľadov obrázkov pozdĺž bočnej , hornej alebo dolnej časti stránky . Ako užívateľ klikne na každú miniatúru , zodpovedajúce full - size verzii sa zobrazí fotografia v strede stránky . Dreamweaver CS3 podporuje niekoľko spôsobov , ako vytvoriť obrazovej galérie . Jeden z jednoduchších a viac spoločných metód je použitie " rámcov " . Rámcov je HTML webové stránky kontajner sa skladá z dvoch alebo viacerých " rámcov " . Každá snímka sa zobrazia jednotlivé stránky alebo URL . Veci , ktoré budete potrebovať
Adobe Dreamweaver CS3 alebo novší
Adobe Photoshop , Apple iPhoto , Windows Maľovanie , alebo nejaký iný editor obrázkov
Zobraziť ďalšie inštrukcie
Príprava vaše fotky

1

Zmena veľkosti fotografií vo vašej image - editačný softvér . Budete potrebovať dve verzie každej snímky --- full - size verzia ( povedzme , 400 od 300 pixelov , alebo čokoľvek funguje najlepšie pre tvar a veľkosť vašich fotografií ) a verzia s náhľadmi ( povedzme , 100 x 75 pixelov ) .
2

Nastavte rozlíšenie pre každý snímok do " 72 " bodov ( pixelov ) , alebo na palec ( alebo " 96 " pre monitory s vysokým rozlíšením ) .
3

Uložiť každý obrázok v sub - adresára do adresára , kde máte v pláne vytvoriť galériu obrazu webovej stránky . Pomenujte sub - adresára " obrázky " . Uložiť obrazy ako JPEG . Názov je " foto1 " , " foto2 , " a tak ďalej , vymenovať príslušné miniatúry " thumb1 , " " thumb2 , " atď
Vytvorenie Your Image Gallery v Dreamweaver
4

Otvoriť Dreamweaver , a potom kliknite na tlačidlo " Súbor " na paneli ponúk . Zvoľte " Nový " sa zobrazí dialógové okno Nový dokument .
5

v ľavom stĺpci dialógového okna kliknite na " Stránka z Sample " , a potom kliknite na tlačidlo " frameset " v " Sample Folder " stĺpci . Tým sa zobrazí zoznam vzorových rámcov v treťom stĺpci v dialógovom okne . Vybral " Fixed vľavo . "
6

Kliknite na " Vytvoriť " . Dreamweaver zobrazí " Frame Tag Dostupnosť Atribúty " dialógové okno . Kliknite na tlačidlo " OK " . Rámy sú pomenované podľa ich umiestnenia na stránke . Ľavý rám sa volá " leftFrame , " a hlavný rám sa volá " mainframe " .
7

Kliknite na " Súbor " na paneli ponúk a zvoľte " Uložiť všetko . " Dreamweaver vás vyzve na pomenovanie tri súbory , jeden po druhom : " . Galéria " Po prvé , rámcov sám --- názov je Po druhé , hlavný rám --- pomenujte ju " foto1 . " Po tretie , ľavý rám --- názov " miniatúry " .
8

Vložte " photo1.jpg " v hlavnej ( vpravo ) rám , a potom kliknite na tlačidlo " Súbor " na paneli ponúk a vyberte " Save Frame . "
9

Vytvoriť nový HTML súbor v hlavnom ráme pre každú fotografiu a uložiť ju , takto : Odstrániť " photo1.jpg " z hlavného rámu . Vložte " photo2.jpg " do hlavného rámu . Kliknite na " Súbor " na paneli ponúk a zvoľte " Uložiť rám ako . " Názov súboru " photo2 " a uložte ho . Opakujte tento postup pre každú z vašich fotografií , pomenovanie každý súbor HTML s príslušným názvom fotografiu .
10

Vložte svoje miniatúry v ľavom ráme . Umiestnite obraz zvisle v ráme v poradí , v akom je pomenovaný --- " foto1 " prvý " , foto2 " druhý atď
11

Vyberte prvú miniatúru . Prejdite na panel Vlastnosti a zadajte názov a cestu k súboru pre prvý full - size stránky fotografie vo formáte HTML v poli " odkaz " , ako je tento : " images/photo1.html " ( bez úvodzoviek )
12.

Kliknite na " Target " drop - down v paneli Vlastnosti a zvoľte " mainframe " . To hovorí , že prehliadač užívateľa načítať photo1.html v hlavnom ráme , keď sa klikne na miniatúru .
13

Opakujte predchádzajúce dva kroky pre každú z vašich miniatúry a sád obrázkov v plnej veľkosti .

14

Kliknite na " File " na paneli ponúk a zvoľte " Uložiť snímku " zachrániť " thumbnails.html . "
15

Otvorte " gallery.html " v prehliadači otestovať váš fotogalérie .

• Predchádzajúca strana: Ako previesť JPEG do Adobe PDF 
• Ďalšia strana: Adobe 3.0 Systémové požiadavky