Hvordan legge til Lightbox til iWeb uten å måtte oppdatere hver gang

October 15

iWeb er en web-publisering program utviklet av Apple som lar deg lage oppsett ved hjelp av dra-og-slipp-metoden. Du trenger ikke å være flytende i programmering for å lage en enkel nettside, fordi iWeb genererer HTML-koden automatisk. Men du må gjøre endringer i koden hvis du ønsker å legge til detaljer til ditt nettsted, for eksempel en lysboks, en kreativ måte å vise et enkelt bilde eller et galleri av bilder ved hjelp av iWeb programmet.

Bruksanvisning

1 Sett bildene du ønsker å legge til din nettside på skrivebordet for å gjøre det lettere å finne dem.

2 Åpne iWeb. Åpne en ny blank side. Name it "Galleri".

3 Endre størrelsen på bilder til miniatyrbilder. Ordne bildene på siden.

4 Open "Inspector". Klikk på "link" -kategorien. Sett en hake i boksen ved siden av «Aktiver som hyperkobling». Velg "En fil" fra drop-down boksen ved siden av "Link til". Klikk på "Velg" og velg plasseringen av Deskop mappen med bildene. Legg en hyperkobling til hvert bilde.

5 Publiser iWeb nettstedet til "Sites" mappen på "Home" mappe på datamaskinen for å lagre endringene.

6 Last ned "lightbox.zip" filen (se Resource) og pakke ut filene inn i din webside - ikke "Galleri" side - mappen.

7 Høyreklikk på "Galleri" siden og velg en tekst / HTML editor, slik som TextWrangler, for å åpne den.

8 Bla ned til </ head> og sett inn følgende kode på linjen over det:

9 Bla ned til onload = "onPageLoad ();" og skriv initLightbox () rett etter semikolon slik at den ser slik ut:

onload = "onPageLoad (); initLightbox ()"

10 Bla ned til bilde lenker, atskilt med <div> og etterfulgt av <a href = "mappenavn / image_name.png", der "mappenavn" og "image_name" viser plasseringen og navnet på bildene dine. Legg rel = "lightbox" etter bilde-koden slik at den ser slik ut:

a href = "mappenavn / image_name.png" rel = "lightbox"

Fortsett med å legge inn koden på hvert bilde link.

11 Legg til en tittel til hvert bilde av på hvert bilde link hvor det står title = "...... slik at den ser slik ut:

title = "Image Title"

12 Lagre siden i HTML-editor. Åpne nettsiden mappen. Dobbeltklikk på "Galleri" for å åpne den i nettleseren din og se endringene.