Hvordan bygge en Picture Show Bildegalleri i Dreamweaver CS3
En "bilde show," eller "bildegalleri," presenterer fotografier i en portefølje lignende webside. Mens bildegallerier kan ha mange konfigurasjoner, et populært format viser miniatyrbilder langs siden, øverst eller nederst på siden. Når brukeren klikker på hvert miniatyrbilde, et tilsvarende full-size versjon av bildeskjermer i midten av siden. Dreamweaver CS3 støtter flere måter å lage bildegallerier. En av de lettere og mer vanlige metoder er å bruke en "ramme". En ramme er en HTML-nettside beholder som består av to eller flere «rammer». Hver ramme viser en enkelt side eller URL.
Bruksanvisning
Forbereder dine bilder
1 Resize bildene i et bilderedigeringsprogram. Du trenger to versjoner av hvert bilde --- en full-size versjon (si 400 av 300 piksler, eller hva som fungerer best for den formen og størrelsen på bildene dine) og en miniatyrversjon (si, 100 med 75 piksler) .
2 Angi oppløsningen for hvert bilde til "72" prikker (eller piksler) per tomme (eller "96" for HD-skjermer).
3 Lagre hvert bilde i en underkatalog til katalogen der du har tenkt å lage bildegalleriet nettsted. Gi navn til underkatalogen "bilder". Lagre bildene som JPEG. Navngi dem "photo1", "photo2," og så videre; nevne de tilsvarende miniatyrene "thumb1", "thumb2," etc.
Oppretting Bildegalleri i Dreamweaver
4 Åpne Dreamweaver, og klikk deretter på "File" på menylinjen. Velg "New" for å vise dialogboksen Nytt dokument.
5 Klikk "Page fra Sample" i venstre kolonne i dialogboksen, og klikk deretter "Ramme" i "Sample Folder" kolonnen. Dette viser en liste over testramme i tredje kolonne i dialogboksen. Velg "Fast Venstre."
6 Klikk på "Create". Dreamweaver viser "Frame Tag Accessibility attributter" i dialogboksen. Klikk på "OK". Rammene er navngitt i henhold til deres plassering på siden. Den venstre rammen heter "leftFrame", og hovedrammen heter "mainframe".
7 Klikk "Fil" på menylinjen og velg "Lagre alle". Dreamweaver vil be deg om å nevne tre filer, den ene etter den andre: ". Galleri" Først selve rammesettet --- name it For det andre, den viktigste rammen --- name it "photo1." Tredje, den venstre rammen --- endre navn til "miniatyrbilder".
8 Sett "photo1.jpg" i hoved (til høyre) ramme, og klikk deretter på "File" på menylinjen og velg "Lagre Frame".
9 Opprett en ny HTML-fil i hovedrammen for hvert bilde og lagre det, som dette: Slett "photo1.jpg" fra hovedrammen. Sett "photo2.jpg" inn i hovedrammen. Klikk "Fil" på menylinjen og velg "Lagre ramme som." Gi filen navnet "photo2" og lagre den. Gjenta denne prosedyren for hver av dine bilder, navngi hver HTML-fil med tilsvarende bilde navn.
10 Sett inn dine miniatyrbilder i venstre ramme. Plasser bildene vertikalt i rammen i den rekkefølgen du kalte dem --- "photo1" først, "photo2" andre, etc.
11 Velg det første miniatyrbildet. Gå til Egenskaper-panelet, og skriv inn filnavnet og banen for første full-size bilde HTML-side i "Link" feltet, som dette: "images / photo1.html" (uten anførselstegn).
12 Klikk på "Target" drop-down i Properties panelet og velg "mainframe". Dette forteller brukerens nettleser for å laste photo1.html i hovedrammen når hun klikker på miniatyrbildet.
1. 3 Gjenta de to foregående trinnene for hver av dine miniatyr og full-størrelse bildesett.
14 Klikk "Fil" på menylinjen og velg "Lagre Frame" for å lagre "thumbnails.html."
15 Open "gallery.html" i en nettleser for å teste bildegalleriet.
Hint
- Hvis du heller vil plassere miniatyr over bunnen eller toppen av siden din, velger du riktig ramme fra dialogboksen Nytt dokument, for eksempel "Fixed Bottom" for å plassere bilderammen over bunnen.
- Når du laster opp bildet galleriet til en webserver, sørg for å inkludere alle HTML-filene og "bilder" sub-katalogen.