Come scrivere un codice per un semplice Photo Gallery

October 19

Come scrivere un codice per un semplice Photo Gallery


Si desidera condividere le immagini da viaggi, eventi o incontri con gli amici e le famiglie. Hai un sito web e può facilmente caricare e scrivere il codice HTML di base. Che tu sia un fotografo professionista o immagini artista distacco in vendita, o qualcuno che vuole semplicemente organizzare le immagini del vostro lavoro, la famiglia o gli hobby, la codifica è relativamente facile e comporta una consapevolezza di base delle tabelle. È possibile ottenere più elaborato con display Flash o presentazioni, ma per mantenerlo semplice, codice utilizzando HTML.

istruzione

1 Raccogliere e coordinare tutte le immagini in una cartella principale dal titolo "Le mie immagini" o nominato dal soggetto. Se si utilizza fotografie di fiori, che sarebbe il titolo della cartella principale. Poi si può fare sottocartelle per le rose, iris, tulipani Wysteria, e così via, o gruppo come perenni, annuali e stagionali. Basta ordinare attraverso tutti e nome di ogni immagine in modo appropriato: blue_iris1.jpg, marys_garden_spring.jpg, e così via.

2 Dimensioni tutte le immagini e salvarle nella loro versione più grande - di solito un file di dimensioni inferiori a 5 megabyte per immagine è comune per il web. Torna attraverso ogni immagine e salvare i file come miniature. Alcuni programmi hanno un modo semplice di fare questo in massa, ma è anche facilmente fatto cambiando tutte le fotografie ad un'altezza di 2 pollici e salvandoli con un nuovo nome. Otterrete un aspetto uniforme per la vostra galleria fotografica eventuale se sono tutti della stessa altezza, piuttosto che la stessa larghezza. Non andare troppo grande, come 5 pollici di altezza per immagine o avrete un aspetto affollata. Mantenere le miniature di piccole dimensioni. I nuovi nomi saranno ora blue_iris1_thumb.jpg e marys_garden_spring_thumb.jpg. Avrete una grande e una miniatura per ogni immagine.

3 Iscriviti al tuo sito web e caricare le immagini. Questo viene fatto in modo pulito e in maniera organizzata se si creano due cartelle di immagini sotto le principali immagini un'area di attesa. Fare un (fiori) Cartella delle miniature e un'altra cartella per le immagini di fiori più grandi. Carica le immagini appropriate nella relativa cartella. Controllare la lista una volta che sono tutto e assicurarsi che sia corretto, senza i pollici nella cartella di grandi dimensioni e viceversa. Ciò sarà utile in seguito.

4 Usa il tuo modello di pagina normale per creare una nuova pagina HTML intitolato gallery1 o qualcosa di simile. All'interno del corpo, creare una tabella. <TABLE WIDTH = "800" border = "0"> modificare la larghezza a tutto ciò che si preferisce per la visualizzazione. Quindi aggiungere le <tr> e <td> attributi. Questa è le righe della tabella e dei dati di andare all'interno di esso. A volte hai solo bisogno di includere la larghezza, ma seguire il consueto presentazione per il sito.

5 Effettuare la prima fila. Questo sarà un elenco delle immagini raggruppate in 5 o 6 di tutti, con spazio sopra e sotto. Paragraphing a volte mantiene le cose chiare. <Tr> <td> <p> poi le immagini per tale riga </ p>

Inserire l'elenco delle immagini utilizzando le miniature come link cliccabili. Copiare e incollare il primo e sovrascrivere

per ogni fotografia.

<A HREF="images/flowers/blue_iris.jpg" target="_blank"> <img src = "/ immagini / fiori / blue_iris1_thumb.jpg"> </A>

<A HREF="images/flowers/pink_iris.jpg" target="_blank"> <img src = "/ immagini / fiori / pink_iris1_thumb.jpg"> </A>

<A HREF="images/flowers/yellow_iris.jpg" target="_blank"> <img src = "/ immagini / fiori / yellow_iris1_thumb.jpg"> </A>

e così via. Quindi chiudere questo paragrafo </ p> e </ td> </ tr>.

6 Aggiungere attributi qualsiasi immagine specifica come l'altezza e la larghezza più informazioni ALT, se si desidera. Ciò non è essenziale, ma è un dettaglio utile. Sarà solo aggiungere queste informazioni per l'immagine in miniatura che sarà visibile sulla pagina. Due attributi molto utili al posto sono il hspace e vspace, che danno un po 'di spazio libero attorno ad ogni immagine in orizzontale e in verticale. Rendere la vspace la stessa per ogni immagine sulla riga o avrete una matrice dispari.

<A HREF="images/flowers_large/blue_iris.jpg" target="_blank"> <img src = "/ images / flowers_thumbs / blue_iris1_thumb.jpg" height = "160" width = "85" hspace = "10" vpace = "20" alt = "Blue Iris"> </A>

7 Ripetere l'operazione fino a circa quattro o cinque righe per pagina galleria con cinque o sei immagini attraverso ogni riga. (Alcune persone scelgono molte più righe, ma l'aspetto non è sempre invitante e può guardare sciatta.)

8 Carica e testare la pagina della galleria. Le righe devono avere lo stesso numero di immagini a meno che non si aveva diversi quelli di larghezza. Cinque o sei viste ritratto tutto, o tre ritratti e vedute di uno o due di paesaggio di solito funziona. Riorganizzare il layout sollevando (taglio) l'intera linea per ogni immagine e lo spostamento in una posizione preferita. Controllare nuovamente il layout per il ricorso. </ TD> </ TR> </ TABLE> nella parte inferiore del codice, prima di chiudere il corpo e HTML>.

9 Verificare che tutto il lavoro miniature. Clicca su ogni miniatura in ogni riga in ogni pagina. La versione più grande di quello appropriato dovrebbe aprire. Se uno non aperto, fare doppio controllare il codice.

Consigli e avvertenze

  • È possibile ottenere un po 'di fantasia mettendo ogni immagine su di essa la propria pagina e il collegamento alla pagina, piuttosto che l'immagine. Facendo che consente di fare clic-attraverso le immagini, come in "next" e "precedente". Basta fare una pagina di modello di base e mettere nel codice per un'immagine per pagina con un metodo precedente e successiva (link o pulsante). Sovrascrivere il nome di ogni immagine e salvarli come i loro nomi di file, quindi caricare il gruppo.
  • Imparare i CSS per alcune opzioni dei modelli veloci, troppo.
  • Non utilizzare immagini protette da copyright o di proprietà di un'altra persona o un sito web.

Articoli Correlati