Hvordan at oprette din egen Picture Scroll Box

Tilføj en rulle boks til dit websted ved hjælp af HTML . mus billede af Du ... ¡en Zidar fra Fotolia.com

Mange websites har et fotogalleri, hvor flere billeder kan vises på en enkelt side.Der er flere måder at præsentere et billede galleri.En måde at vise billeder ville være at medtage dem i en rulle kassen.Besøgende kan se hvert billede i samlingen ved at vælge rullepanelet og flytte den i den retning, de gerne vil.Ved hjælp af HTML-kode, kan du oprette et billede scroll boks til at vise forskellige billeder.

hvad du har brug

  • PC eller Macintosh-computer
  • Kendskab til HTML
  • En af følgende: Notepad (PC), TextEdit (Mac) eller Dreamweaver 8.0 eller højere

Instruktioner

  1. Opret en tom side ved hjælp af HTML-kode.Koden skal omfatte alle væsentlige elementer som HTML, hoved, titel og krop tags.Et eksempel er vist nedenfor.Hvis billedet scroll boks er en funktion, skal indarbejdes i en eksisterende side kan dette første skridt springes over.

    & lt; html & gt;
    & lt; head & gt;
    & lt; title & gt; Titel Dokum

    ent & lt; / title & gt;
    & lt; / head & gt;
    & lt; body & gt;
    & lt; / body & gt;
    & lt; / html & gt;

  2. nu, at siden er oprettet, vil der nødt til at være et område, der er udpeget til billedet scroll kassen.For at gøre dette, skal du oprette en tabel inden kroppen tags i HTML-kode.

    & lt; table cellspacing = "2" cellpadding = "0" & ​​gt;
    & lt; tr & gt;

    & amp; lt; td & gt;

    & lt; / td & gt;
    & lt; / tr & gt;
    & lt; / bord & gt;

  3. Tabellen skal være en bestemt bredde.I dette eksempel vil bredden være 400 pixels.Udpege den bredde i øverste tabel tag, da det er vist nedenfor.

    & lt; table width = "400px" cellspacing = "2" cellpadding = "0" & ​​gt;

  4. Med bordet oprettet, billedet scroll boksen nu har et område at opholde sig i. Nu rulleboksen skal gøres.Oprettelse div tags, gør området til billedet scroll kassen.Udpege den højde og bredde for rulleboksen.

  5. anden stil skal tilføjes at skabe scroll funktion.Indtast stil "overflow: rul;"inde i div tag ved siden af ​​bredde og højde indstillinger.Hvis du foretrækker ikke at medtage en grænse, skriv "kant: ingen grænse".De nye stil funktioner i rulleboksen skal se ud koden nedenfor.

    & lt; div style = "height: 250px; width: 400px; overflow: rul, kant: nej grænserne;" & gt;& lt; / div & gt;

  6. billeder skal tilføjes for at gøre billedet scroll boks komplet.Hvis en billedmappe ikke allerede findes til din hjemmeside, oprette en.Tag billeder, der vil blive placeret i rulleboksen og redigere dem med et foto-redigering program.Husk ikke at have billederne er større end den samlede bredde af rulleboksen.Her vil billederne ikke være noget større end 400 pixel.

  7. Opret et billede tag inde i & lt; td & gt;& lt; / td & gt;tags.Placer så mange billeder, som du gerne vil og omfatte en eller to break tags mellem hvert billede.Dette vil skabe plads mellem billederne.Et eksempel på billedet koden er vist nedenfor.

    & lt; img src = "dit billede navn går her" / & gt; & lt; br / & gt; & lt; br / & gt; & lt; img src = "dit billede navn går her" / & gt;

  8. Når alle billeder er blevet placeret, billedet scroll boksen er afsluttet.Et eksempel på den færdige tabel koden er vist nedenfor.

    & lt; table width = "400px" cellspacing = "2" cellpadding = "0" & ​​gt;
    & lt; tr & gt;

    & amp; lt; td & gt;

    & lt; div style = "height: 250px; width: 400px; overflow: rul, kant: nej grænserne;" & gt;
    & lt; img src = "dit billede navn går her" / & gt; & lt; br / & gt; & lt; br / & gt; & lt; img src = "dit billede navn går her" / & gt; & lt; br / & gt; & lt; br / & gt; & lt; / div & gt;
    & lt; / td & gt;
    & lt; / tr & gt;
    & lt; / bord & gt;

Tips & amp;Advarsler

  • Ekstra stilarter kan føjes til billedet rulle kassen.De stilarter fremhævede ovenfor indeholder kun de grundlæggende.
567
0
1
Webdesign