Fotogalleri 2 from Petter Andresen

Enkelt fotogalleri med Dreamweaver og Javascript

Dette har jeg gjort på forhånd: Jeg har valgt ut 24 bilder og laget web-versjoner for “thumbnails” og stor visning. De store har jeg lagret i en folder som jeg kaller gallery. Disse bildene har en fast bredde på 800 px. Thumbnailene har jeg lagret i en folder kalt “th”, og alle er skalert til 180 x 120 px. Disse to folderne har jeg lagt i en folder kalt “fotogalleri_2”. Den videre teksten forholder seg til slides'ene ovenfor, med samme nummer rekkefølge. Merk deg at du kan klikke på knappen for fullskjermsvisning om du ikke ser alle detaljene. “esc”-knappen på tastaturet forminsker til opprinnelig størrelse.

  1. Åpne et nytt Dreamweaver-dokument. Lag en site for dette prosjektet med folderen med “th” og “gallery”-folderene inne i. Lag en stilark (CSS) og kople det til HTML-dokumentet. (index.html og screen.css).
  2. Lag først følgende DIV'er i tillegg til body og img: #wrapper, #image og #footer.
  3. I body setter du tekst-variant (verdana etc) og størrelse = 100%. Align = center. Wrapper kan være 850 px med auto-margin på left/right, samt text-align = left. Modifiser fontsørrelsen til 0.8 em på 1.6 em linjeavstand
  4. Sett inn alle de andre DIV'ene i wrapper
  5. Sett inn det første stor bildet i #image som du nå endrer til 800 px bredde med auto-margin left/right. Sett høyden til 550. Gi bildet en ID=alphaimage.
  6. Gjør om DIV'en #thumbs til class (endre først i CSS: #thumbs til .thumbs, og så i HTML: <div id= til div class=). Dett er for at vi skal bruke den fire ganger.
  7. Sett inn den første thumbnailen i .thumbs, kopier og lim inn så du har en rekke på seks.
  8. Lag en Compound; #wrapper .thumbs img hvor du legger margins på bildene, på høyre og venstre side samt under så de får luft mellom og tangerer høyre og venstre side av hovedbildet.
  9. Kopier og lim inn hele DIV'en .thumbs så du har fire rader.
  10. Bytt ut thumbnailen (th/1.jpg) suksessivt så alle 24 fylles av bilderekka og gi dem jukselinker (a href="#")
  11. Marker den første thumbnailen. Fra Tag Inspector/Behaviors velger du Swap Image. Marker bildet med ID=alphaimage og sett source til tilsvarende stort bilde fra gallery-folderen. Fjern check for preload og restore. Sett betingelsen for hendelsen til OnClick.
  12. Fortsett med dette til alle thumbs har fått en tilpasset Behavior.
  13. Dett gjør du enklest i kodemodus. Men du må rydde opp litt så linjene står like ens under hverandre.
  14. Så setter du litt tekst under, i footer-DIV'en. Justér og tilpass.
  15. Så tester du albumet. Litt kjedelig med hvit bakgrunn. så jeg finer et bilde som er 1920 x 1200 px. Jeg bruker Save For Web & Devices å komprimerer til low. NB! Sørg for at du bruker et bilde som tåler dette.
  16. Legg bildet som bakgrunnsbilde i body. No-repeat, sentrert og fixed. Kombiner gjerne med en bakgrunnsfarge. 1920 x 1200 px tilsvarer en 23" widescreen. Brukere med større skjerm enn det får svart utenfor bildet på hver side. med det får greie seg. Du bør kanskje endre tekstfargen i #footer til hvit.

    Dette oppsettet krever sannsynligvis scrolling på små skjermer – så fire rader er kanske i meste laget. Kan hende du bare bør bruke en, og heller fordel dette på fire sider …