Kuidas luua oma pilt kerimisboksi

Lisa kerimisboksi veebisaidile kasutades HTML . hiire pildi Du ... ¡Zidar alates Fotolia.com

Paljud veebilehed funktsioon fotogalerii, kus mitu pilti saab kuvada ühel lehel.On mitmeid viise, kuidas esitada pildigaleriist.Üks võimalus näidata pilte oleks ka need sees kerimisboksi.Külastajad saavad vaadata iga pilt kogumise valides kerimisriba ja liigub ta suunas nad tahaksid.Kasutades HTML kood, saate luua pilt kerimisboksi näidata erinevaid pilte.

, mida te vajate

  • PC või Macintosh arvuti
  • Teadmised HTML
  • üks järgmistest: Notepad (PC), TextEdit (Mac) või Dreamweaver 8,0 või suurem

juhised

  1. Loo tühi leht kasutades HTML kood.Kood peaks sisaldama kõiki olulisi sätteid, nagu HTML, pea, pealkiri ja keha sildid.Üks näide on toodud allpool.Kui pildi kerimisboksi on funktsioon tuleb lisada olemasolevat lehekülge, seda esimest saab vahele jätta.

    & lt; html & gt;
    & lt; head & gt;
    & lt; title & gt; Dokumendi pealkiri & lt; / title & gt;
    & lt; / head & gt;
    & lt; body & gt;
    & lt; / body & gt;
    & lt; / html & gt;

  2. Nüüd, kui leht on loodud, siis peab olema määratud ala jaoks pilt kerimisboksi.Selleks, luua tabel kehas sildid HTML kood.

    & lt; tabel Cellspacing = "2" cellpadding = "0" & ​​gt;
    & lt; tr & gt;

    & amp; lt; td & gt;

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

  3. tabel peab olema konkreetne laius.Selles näites laius on 400 pikslit.Määrata laius laua tag, nagu see on toodud allpool.

    & lt; laua laius = "400px" Cellspacing = "2" cellpadding = "0" & ​​gt;

  4. tabelile loodud pilt kerimisboksi nüüd on ala elada. Nüüd kerimisboksi tuleb teha.Loomine div sildid, muudab piirkonna jaoks pilt kerimisboksi.Määrata kõrgus ja laius kerimisboksi.

  5. Teine stiil tuleb lisada, et luua Leidke funktsioon.Sisestage stiilis "overflow: Leidke;"sees div tag kõrval laiuse ja kõrguse seaded.Kui te ei soovi lisada piiri, tüüp "border: no piiri".Uue stiili tunnused kerimisboksi peaks nägema turvakood.

    & lt; div style = "height: 250px; laius: 400px; overflow: Leidke; piiri: no-piiri;" & gt;& lt; / div & gt;

  6. Images tuleb lisada, et pilt kerimisboksi täielik.Kui pildi kausta ei eksisteeri oma veebilehel, luua üks.Pildistage mis paigutatakse liugurit ja muuta neid foto-redigeerimise programm.Pea meeles, et ei ole pilte suurem kogulaius kerimisboksi.Siin pildid ei oleks mingeid suurem kui 400 pikslit.

  7. Loo pilti tag sees & lt; td & gt;& lt; / td & gt;sildid.Pane nii palju pilte kui soovid ja lisada üks või kaks vaheaega sildid omavahel pilti.See loob ruumi vahel pilte.Näitena pildi kood on näidatud allpool.

    & lt; img src = "oma pildi nimi läheb siia" / & gt; & lt; br / & gt; & lt; br / & gt; & lt; img src = "oma pildi nimi läheb siia" / & gt;

  8. Kui kõik pildid on pandud pilt kerimisboksi on lõpetatud.Üks näide lõppenud tabeli koodi on toodud allpool.

    & lt; laua laius = "400px" Cellspacing = "2" cellpadding = "0" & ​​gt;
    & lt; tr & gt;

    & amp; lt; td & gt;

    & lt; div style = "height: 250px; laius: 400px; overflow: Leidke; piiri: no-piiri;" & gt;
    & lt; img src = "oma pildi nimi läheb siia" / & gt; & lt; br / & gt; & lt; br / & gt; & lt; img src = "oma pildi nimi läheb siia" / & gt; & lt; br / & gt; & lt; br / & gt; & lt; / div & gt;
    & lt; / td & gt;
    & lt; / tr & gt;
    & lt; / table & gt;

Tips & amp;Hoiatused

  • Täiendav stiile saab lisada pildi kerimisboksi.Stiilid Objekte eespool sisaldavad ainult põhitõdesid.
343
0
1
Web Design