Hvordan skrive en kode for en enkel Photo Gallery

January 21

Du ønsker å dele bildene dine fra reiser, arrangementer eller sammenkomster med venner og familie. Du har et nettsted, og kan enkelt laste opp og skrive grunnleggende HTML-kode. Enten du er en profesjonell fotograf eller artist legge ut bilder for salg, eller noen som rett og slett ønsker å arrangere bilder av ditt arbeid, familie eller hobbyer, er kodingen relativt enkelt og innebærer en grunnleggende forståelse av tabeller. Du kan få mer avansert med Flash skjermer eller lysbildefremvisninger, men å holde det enkelt, koden ved hjelp av HTML.

Bruksanvisning

1 Samle og koordinere alle bildene i en stor mappe med tittelen "Mine bilder" eller oppkalt etter emne. Hvis du bruker fotografier av blomster, ville det være hovedmappen tittelen. Deretter kan du gjøre undermapper for roser, iris, wysteria, tulipaner og så videre, eller gruppere dem som stauder, ettårige og sesong. Bare sortere gjennom dem alle og navngi hvert bilde på riktig måte: blue_iris1.jpg, marys_garden_spring.jpg, og så videre.

2 Størrelse alle bildene og lagre dem i deres store versjon - vanligvis en filstørrelse på mindre enn 5 megabyte per bilde er vanlig for web. Gå tilbake gjennom hvert bilde og lagre filene som miniatyrbilder. Noen programmer har en enkel måte å gjøre dette en masse, men det er også enkelt gjøres ved å endre alle bildene til en høyde på 2 inches og lagre dem med et nytt navn. Du får en ensartet utseende for din eventuelle bildegalleri hvis de er alle i samme høyde, snarere enn samme bredde. Ikke gå for stor, som 5 inches høyde per bilde, eller vil du ha en overfylt utseende. Hold miniatyr liten. De nye navnene vil nå være blue_iris1_thumb.jpg og marys_garden_spring_thumb.jpg. Du vil ha en stor og en miniatyr for hvert bilde.

3 Meld på ditt nettsted og laste opp bilder. Dette gjøres rent og på en organisert måte hvis du oppretter to bildemapper under hoved bildene holder området. Lag en (blomster) thumbnail mappe og en annen mappe for de større blomsterbilder. Last opp de riktige bildene til sin mappe. Sjekk listen når de er alle i og sørge for at det er riktig, uten tommelen i den store mappen og vice versa. Det vil komme godt med senere.

4 Bruk din vanlige side mal for å opprette en ny HTML-side med tittelen Gallery1 eller noe lignende. I kroppen, opprette en tabell. <TABLE width = "800" border = "0"> Endre bredden til hva du foretrekker for visning. Deretter legger <tr> og <td> attributter. Dette er de tabellrader og data for å gå i den. Noen ganger trenger du bare å inkludere bredde, men følg din vanlige tabling for området.

5 Gjør den første raden. Dette vil være en liste over bildene gruppert i fem eller seks på tvers, med plass over og under. Paragraphing noen ganger holder ting klart. <Tr> <td> <p> deretter bildene for denne linjen </ p>

Skriv inn bildelisten ved å bruke miniatyrbilder som klikkbare lenker. Kopier og lim inn den første, og overskrive

for hvert bilde.

og så videre. Deretter lukker nevnte punkt </ p> og </ td> </ tr>.

6 Legg noen bestemt image attributter som høyde og bredde pluss ALT info hvis du vil. Dette er ikke nødvendig, men er et nyttig detalj. Du vil bare legge til denne informasjonen for miniatyrbilde som vil være synlig på siden. To svært nyttige egenskaper til stedet er vspace og vspace, som gir et litt åpent område rundt hvert bilde horisontalt og vertikalt. Gjør vspace det samme for hvert bilde på rad eller vil du ha en merkelig matrise.

7 Gjenta for opp til fire eller fem rader per galleriside med fem eller seks bilder på tvers av hver rad. (Noen mennesker velger mange flere rader men utseendet er ikke alltid innbydende og kan se sjuskete.)

8 Last opp og teste gallerisiden. Radene bør ha samme antall bilder med mindre du hadde flere store funn. Fem eller seks portrett utsikt over, eller tre portretter og utsikt en eller to liggende vanligvis fungerer. Endre oppsettet ved å løfte (kutting) hele linjen for hvert bilde og flytte den til et ønsket sted. Kontroller oppsettet for appell. </ Td> </ tr> </ TABLE> nederst i koden, før du lukker ut kroppen og HTML>.

9 Kontroller alle miniatyr arbeid. Klikk på hvert miniatyr i hver rad på hver side. Den større versjon av den aktuelle en skal åpnes. Hvis man ikke åpnes, dobbeltsjekke koden din.

Hint

Du kan få en litt mer avansert ved å sette hvert bilde på sin egen side og linke til siden i stedet for bildet. Gjør som lar deg klikk gjennom bilder, som i "neste" og "forrige". Bare sørg for en grunnleggende mal side og satt i koden for ett bilde per side med en tidligere og neste metode (link eller knapp). Skrive navnet på hvert bilde og lagre dem som sine egne filnavn, deretter laste gruppen.
Lær CSS for noen raske malalternativer, også.
Bruk aldri bildene er beskyttet av opphavsrett eller eid av en annen person eller nettside.