Hvordan lage ditt eget bilde Bla Box

Hvordan lage ditt eget bilde Bla Box


Mange nettsteder har et fotogalleri der flere bilder kan vises på en enkelt side. Det er flere måter å presentere et bildegalleri. En måte å vise bilder ville være å inkludere dem inne i en rulleboksen. Besøkende kan se hvert bilde i samlingen ved å velge rullefeltet og flytte det i den retningen de ønsker. Ved hjelp av HTML-kode, kan du skape et bilde rulleboksen for å vise forskjellige bilder.

Bruksanvisning

1 Lag en blank side ved hjelp av HTML-kode. Koden bør omfatte alle viktige elementer som HTML, hode, tittel og kropp koder. Et eksempel er vist nedenfor. Hvis bildet rulleboksen er en funksjon for å bli innlemmet i en eksisterende side, kan dette første trinnet hoppes over.

<Html>
<Head>
<Title> Tittel på Document </ title>
</ Head>
<Body>
</ Body>
</ Html>

2 Nå som siden er opprettet, vil det trenger å være et område definert for bildet rulleboksen. For å gjøre dette ved å opprette en tabell i body-taggene i HTML-koden.

<Table cellspacing = "2" cellpadding = "0">
<Tr>

&lt;td>

</ Td>
</ Tr>
</ Table>

3 Tabellen må være en bestemt bredde. I dette eksemplet vil bredden være 400 piksler. Utpeke bredden i toppen tabellen tag som det er vist nedenfor.

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

4 Med bordet opprettet, har bilderulleboksen nå et område å oppholde seg i. Nå rulleboksen må gjøres. Opprette div koder, gjør området til bildet rulleboksen. Utpeke høyden og bredden for rulleboksen.

5 En annen stil må legges for å skape rullefunksjonen. Skriv inn stil "overløp: bla;" inne i div tag ved siden av innstillingene for bredde og høyde. Hvis du foretrekker å ikke inkludere en grense, skriver "border: nei grensen". De nye stil funksjoner av rulleboksen skal se ut koden under.

<Div style = "height: 250px; width: 400px; overflow: bla; border: no-grensen;"> </ div>

6 Bilder må legges for å gjøre bildet rulleboksen fullført. Hvis et bilde mappen ikke allerede finnes for nettstedet ditt, opprette en. Ta bilder som vil bli plassert i rulleboksen og redigere dem med et bildebehandlingsprogram. Husk å ikke ha bildene større enn den totale bredden på rulleboksen. Her bildene ville ikke være noe større enn 400 piksler.

7 Opprett en bildekode inne i <td> </ td> koder. Plassere så mange bilder du ønsker og ta med en eller to break koder mellom hvert bilde. Dette vil skape mellomrom mellom bildene. Et eksempel på det bilde-koden er vist nedenfor.

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

8 Når alle bildene er plassert, vil bildet rulleboksen fullført. Et eksempel på det ferdige bord koden er vist nedenfor.

<Table width = "400px" cellspacing = "2" cellpadding = "0">
<Tr>

&lt;td>

<Div style = "height: 250px; width: 400px; overflow: bla; border: no-grensen;">
<Img /> <br /> <br /> <img /> <br /> <br /> </ div>
</ Td>
</ Tr>
</ Table>

Hint

  • Andre stiler kan legges til bildet rulleboksen. Stilene omtalt ovenfor inneholder bare grunnleggende.