A " picture show ", eller " bildgalleri ", presenteras fotografier i en portfölj - liknande webbsida . Medan bildgallerier kan ha många konfigurationer , visar ett populärt format miniatyrbilder längs sidan , upp eller längst ned på sidan . När användaren klickar på varje miniatyrbild , visas en motsvarande full storlek version av fotot i mitten av sidan . Dreamweaver CS3 stöder flera sätt att skapa bildgallerier . En av de enklare och mer vanligt sätt är att använda ett " frameset . " En ramuppsättningen är en HTML- webbsida behållare som består av två eller flera " ramar ". Varje bildruta visar en enskild sida eller webbadress . Saker du behöver
Adobe Dreamweaver CS3 eller senare
Adobe Photoshop , Apple iPhoto , Windows Paint , eller någon annan bildredigerare
Visa fler instruktioner
Förbereda Bilder från
1
Ändra storlek på bilder i din bildredigeringsprogram . Du behöver två versioner av varje bild --- en full storlek ( säg, 400 300 pixlar , eller vad som fungerar bäst för den formen och storleken på dina bilder ) och en miniatyr version ( säg, 100 med 75 pixlar ) .
2
Ange upplösning för varje bild " 72 " punkter ( eller pixlar ) per tum ( eller " 96 " för HD- skärmar ) .
3
Spara varje bild i en underkatalog till den katalog där du planerar att skapa din webbplats bildgalleri . Namnge sub - katalogen "bilder . " Spara bilderna som JPEG . Namnge dem " photo1 , " " photo2 , " och så vidare, namn motsvarande miniatyrer " thumb1 , " " thumb2 , " etc. Addera Skapa din Bildgalleri i Dreamweaver
4
Öppna Dreamweaver , och klicka sedan på " File " i menyraden . Välj " Ny " för att visa dialogrutan Nytt dokument .
5
Klicka på " Sida från Sample " i den vänstra kolumnen i dialogrutan och klicka sedan på " Frameset " i " Sample Folder " kolumnen . Detta visar en lista med exempel ramuppsättningar i den tredje kolumnen i dialogrutan . Valde " Fast vänster . "
6
Klicka på " Skapa ". Dreamweaver visar " Frame Tag Tillgänglighet Egenskaper " i dialogrutan . Klicka på " OK . " Ramarna är namngivna enligt deras placering på sidan . Den vänstra ramen benämns " leftFrame , " och huvudramen heter " mainFrame . "
7
Klicka på " File " i menyraden och välj " Spara allt . " Dreamweaver kommer att uppmana dig att ange tre filer , den ena efter den andra : " . Galleri " första, frameset själv --- name it Andra huvudramen --- name it " photo1 . " Tredje , den vänstra ramen --- den namnet " miniatyrbilder . "
8
Insert " foto1.jpg " i huvud ( höger ) ram , och klicka sedan på " File " i menyraden och välj " Spara ram . "
9
Skapa en ny HTML- fil i karmen för varje bild och spara den , så här : Ta bort " foto1.jpg " från huvudramen . Sätt " photo2.jpg " i huvudramen. Klicka på " File " i menyraden och välj " Spara ram som . " Döp filen till " photo2 " och spara den . Upprepa denna procedur för alla dina bilder , namnge varje HTML-fil med motsvarande foto namnet .
10
Sätt dina miniatyrbilder i vänster ram . Placera bilderna vertikalt i ramen i den ordning du namngav dem --- " photo1 " först , " photo2 " andra osv
11
Välj den första miniatyren . Gå till panelen Egenskaper och ange filnamn och sökväg för den första fullskaliga foto HTML- sida i " Link " fältet , så här : . " Images/photo1.html " ( inga citationstecken )
12
Klicka på " Target " drop -down i panelen Egenskaper och välj " mainFrame . " Detta talar om användarens webbläsare att ladda photo1.html i huvudramen när hon klickar på miniatyren .
13
Upprepa de två föregående stegen för varje tumnageln och full - size set image .
14
Klicka på " File " i menyraden och välj " Spara ram " för att spara " thumbnails.html . "
15
Open " gallery.html " i en webbläsare för att testa ditt bildgalleri .
