Molti siti Web dispongono di una galleria fotografica dove più immagini possono essere visualizzati su una singola pagina. Ci sono diversi modi di presentare una galleria di foto. Un modo di mostrare le immagini sarebbe includerle all'interno di una casella di scorrimento. Visitatori possono visualizzare ogni immagine nella raccolta selezionando la barra di scorrimento e spostandolo nella direzione che vorrebbero. Utilizzando il codice HTML, è possibile creare una casella di scorrimento foto per visualizzare le varie immagini.

Istruzioni

1

Creare una pagina vuota utilizzando il codice HTML. Il codice dovrebbe includere tutti gli elementi essenziali come l'HTML, head, title e body tag. Di seguito è riportato un esempio. Se la casella di scorrimento foto è una caratteristica ad essere incorporati in una pagina esistente, questo primo passaggio può essere ignorato.

< html >
< head >
< title > titolo di documento < / title >
< / head >
< corpo >
< / body >
< / html >

2

Ora che la pagina è creata, ci dovrà essere una zona designata per la casella di scorrimento foto. A tale scopo, creare una tabella all'interno del tag body del codice HTML.

< table cellspacing = "2" cellpadding = "0" >
< tr >

<td>

< /td >
< /tr >
< / tabella >

3

La tabella deve essere una particolare larghezza. In questo esempio, la larghezza sarà di 400 pixel. Designare la larghezza nel tag di tabella in alto come indicato sotto.

< table width = "400px" cellspacing = "2" cellpadding = "0" >

4

Con la tabella creata, la casella di scorrimento foto ora ha una superficie di risiedere in. Ora la casella di scorrimento deve essere fatto. Creazione di tag div, rendono la zona per la casella di scorrimento foto. Designare l'altezza e la larghezza per la casella di scorrimento.

5

Un altro stile deve essere aggiunto per creare la funzionalità di scorrimento. Digitare lo stile "overflow: scroll;" all'interno del tag div accanto le impostazioni di larghezza e altezza. Se non si desidera includere un bordo, digitare "confine: nessun bordo". Le nuove caratteristiche di stile della casella di scorrimento dovrebbero essere simile al codice riportato di seguito.

< div style = "altezza: 250px; Larghezza: 400px; overflow: scroll; bordo: no-frontiera; " >< / div >

6

Immagini devono essere aggiunti per rendere la pergamena foto scatola completa. Se una cartella di immagini non esiste già per il tuo sito, crearne uno. Prendere immagini che verranno inserite nella casella di scorrimento e modificarli con un programma di fotoritocco. Tenete a mente di non avere le immagini più grandi rispetto alla larghezza totale della casella di scorrimento. Qui, le immagini non sarebbe più grandi di 400 pixel.

7

Creare un tag di immagine all'interno di < td >< /td > Tag. Inserire immagini come molti come si desidera e includere uno o due rompere tag tra ogni immagine. Questo creerà lo spazio tra le immagini. Seguito è riportato un esempio del codice immagine.

< img / >< br / >< br / >< img / >

8

Una volta che tutte le immagini sono state collocate, la casella di scorrimento foto è completata. Seguito è riportato un esempio del codice della tabella completato.

< table width = "400px" cellspacing = "2" cellpadding = "0" >
< tr >

<td>

< div style = "altezza: 250px; Larghezza: 400px; overflow: scroll; bordo: no-frontiera; " >
< img / >< br / >< br / >< img / >< br / >< br / >< / div >
< /td >
< /tr >
< / tabella >

Consigli & Avvertenze

• Gli stili aggiuntivi possono essere aggiunti alla casella di scorrimento foto. Gli stili consigliati sopra contengono solo le basi.