Hvordan bygge en Picture Show Bildegalleri i Dreamweaver CS3

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.