Hoe om uw eigen Picture Scroll Box Maak

Voeg een scroll box naar uw website met behulp van HTML. beeld De muis van Du ... ¡een Zidar uit Fotolia.com

Veel websites hebben een fotogalerij waar meerdere foto's op een enkele pagina kunnen worden weergegeven.Er zijn verschillende manieren om een ​​fotogalerij te presenteren.Een manier om foto's te tonen zou zijn om ze op te nemen in een scroll doos.Bezoekers kunnen elke foto in de collectie bekijken door de schuifbalk te selecteren en deze in de richting ze willen bewegen.Met behulp van HTML-code, kunt u een foto scroll box aan verschillende beelden weer te geven te creëren.

wat je nodig hebt

  • pc of Macintosh computer
  • Kennis van HTML
  • Een van de volgende: Notepad (PC), TextEdit (Mac) of Dreamweaver 8.0 of hoger

instructies

  1. Maak een lege pagina met HTML-code.De code moet alle essentiële elementen zoals de HTML, hoofd, titel en body-tags bevatten.Een voorbeeld is hieronder weergegeven.Als het vakje afbeelding scroll is een functie in een bestaande pagina op te nemen, kan deze eerste stap

    overgeslagen.

    & lt; html & gt;
    & lt; head & gt;
    & lt; title & gt; titel van Document & lt; / title & gt;
    & lt; / head & gt;
    & lt; body & gt;
    & lt; / body & gt;
    & lt; / html & gt;

  2. Nu de pagina is gemaakt, zal er moeten een aangewezen voor het vak foto scroll gebied.Om dit te doen, maakt u een tabel in het lichaam tags van de HTML-code.

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

    & amp; lt; td & gt;

    & lt; / td & gt;
    & lt; / tr & gt;
    & lt; / table & gt;

  3. De tabel moet een bepaalde breedte.In dit voorbeeld zal de breedte 400 pixels.Wijzen de breedte in de bovenste tabel tag zoals hieronder weergegeven.

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

  4. Met de tafel gecreëerd, de foto scroll box heeft nu een gebied in te verblijven. Nu is de doos scroll moet worden gemaakt.Het creëren van div-tags, maken het gebied voor het vak foto scroll.Wijzen de hoogte en breedte van de doos scrollen.

  5. andere stijl moet worden toegevoegd aan de functie scroll te creëren.Typt u de stijl "overflow: scroll;"in de div tag naast de breedte en hoogte-instellingen.Als u liever een grens, type "border: geen grens" niet op te nemen.De nieuwe stijl kenmerken van de doos scroll eruit moet zien de onderstaande code.

    & lt; div style = "height: 250px; width: 400px; overflow: scroll; border: no-grens;" & gt;& lt; / div & gt;

  6. afbeeldingen moeten worden toegevoegd aan de foto scroll doos compleet te maken.Als een afbeelding map nog niet bestaat voor uw website, een maken.Neem beelden die in de doos scroll zal worden geplaatst en ze bewerken met een fotobewerkingsprogramma.Houd in gedachten niet om de beelden groter is dan de totale breedte van het vak scroll hebben.Hier zouden beelden niet een ander groter zijn dan 400 pixels.

  7. Maak een afbeelding tag in het & lt; td & gt;& lt; / td & gt;labels.Plaats zoveel foto's als je wilt en omvatten breken één of twee labels tussen elke afbeelding.Hierdoor kan de ruimte tussen de afbeeldingen.Een voorbeeld van de afbeelding code wordt hieronder weergegeven.

    & lt; img src = "uw afbeelding naam gaat hier" / & gt; & lt; br / & gt; & lt; br / & gt; & lt; img src = "uw afbeelding naam gaat hier" / & gt;

  8. Wanneer alle beelden zijn geplaatst, de foto scroll doos is voltooid.Een voorbeeld van de gerede tabelcode wordt hieronder weergegeven.

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

    & amp; lt; td & gt;

    & lt; div style = "height: 250px; width: 400px; overflow: scroll; border: no-grens;" & gt;
    & lt; img src = "uw afbeelding naam gaat hier" / & gt; & lt; br / & gt; & lt; br / & gt; & lt; img src = "uw afbeelding naam gaat hier" / & gt; & lt; br / & gt; & lt; br / & gt; & lt; / div & gt;
    & lt; / td & gt;
    & lt; / tr & gt;
    & lt; / table & gt;

Tips & amp;Waarschuwingen

  • Extra stijlen kunnen worden toegevoegd aan het vak foto scroll.De stijlen hierboven gekenmerkt bevatten alleen de basics.
320
0
1
Web Design