Kuidas luua veebisait ühest pildist

Tõhus veebisait ei pea olema keeruline ja täis pilte. Kui teil on üks pilt, mida soovite oma veebisaidi keskele keskendada, minge selle juurde. Võite seda kasutada div-i taustelemendina, või saate paigutada tekstielemente selle lähedale või selle lähedusse. Kui teie pildil on navigatsioonielementide tekst, saate pildi kaardiga neid elemente klõpsata. See on tõenäoliselt lihtne veebisait, kuid "lihtne" ei tähenda tingimata "halba".

1.

Pane oma pilt lehele. Kui soovite pildi keskele lehele koondada, seadke kogu veebileht keskele, muutes joondust stiilitabeli jaotises "keha", nt

keha {text-align: center; }

2.

Looge tekstisisu jaoks div. Pange tähele, et div on sisu sisaldav kast. Unstyled, see sobib lihtsalt külastaja ekraani laiusega. CSS-iga saate siiski seda suurust muuta, värvida, paigutada ja isegi virnastada nii, et see mängib teie pildiga kena.

3.

Kasutage CSS-i, et paigutada oma pilt siiski soovitud pildiga. Näiteks kui soovisite, et pilt ilmuks teie divist vasakule, võite kasutada järgmist CSS-i:

img {float: left;}

sisu {laius: 500 px; polsterdus: 5px; }

Ühendage see HTML-iga:

Teksti sisu

Kui aga soovid pildi veidi divi all asendada, võiksite seda kasutada. Ütle, et teie pilt on 600 pikslit pikk ja 800 pikslit lai. Sa määraksid div-i suhtelise positsiooni kõrgemale kui see, kus see loomulikult lehele lendab. Teie CSS näeb välja selline:

sisu {

positsioon: suhteline; top: -550px; kõrgus: 600 px; laius: 800 px; ülevoolu-x: peidetud; ülevoolu-y: kerige; }

Tundub, et see on palju, kuid see seab divi nii, et see katab kõik teie pildi 50 pikslit, kuid horisontaalne kerimisriba on peidetud ja vertikaalne kerimisriba lubatud. See, mis teil sisuliselt on, on inline-kaadri funktsionaalne ekvivalent, ilma et oleks ebamugav kasutada sisemist raami.

Saate seda muuta läbipaistmatuse abil edasi. Näiteks võimaldavad RGBa värviväärtused määrata värvi läbipaistvaks. Kui soovite, et valge taust oleks 70% läbipaistev, lisaksite:

taust: RGBA (250, 250, 250, 0, 7);

Olge siiski ettevaatlik; RGBa väärtused ei tööta Internet Exploreris 8 ja varem. IE-s pole teie veebisaidil üldse taustavärvi.

4.

Kasutage pildikaarti, kui soovite, et teie pildi teatud osad oleksid klõpsatavad lingid. Piltide kaardid kasutavad linkide loomiseks pildi koordinaate. Saate oma pildikaardi käsitsi kirjutada, saades iga ala koordinaadid oma eelistatud pilditöötlusprogrammiga, või saate kasutada kaardi genereerimiseks võrgutööriista. Kaardi rakendamiseks oma pildile peate lisama atribuudi "usemap":

Seejärel lisage kaart oma lehele, näiteks:

5.

Lisage veebisaidi sidumiseks muud elemendid. Lihtne ei ole vähearenenud. Kasutage kõik muu jaoks peen tausta või värvi, et muuta see vähem teravaks. Lisage piirid, kui sulle meeldib esteetiline. Ärge kartke katsetada selliseid elemente nagu varjud ja CSS3 teisendused,

6.

Salvestage oma leht ja avage see oma brauseris. Teil võib tekkida vajadus muuta oma laiuse ja kõrguse seadeid ning pildi läbipaistmatust, kuni olete lõpptoodanguga rahul.

Nõuanded

  • Pildi seadmiseks jagamise taustaks lisage see lihtsalt oma div CSS-i: taust: url ('URL');
  • Mitme elemendi jaoks saate leheküljel kasutada mitut divs. Näiteks saate navigatsiooni ja sisu loomiseks kasutada sisu div ja külgriba div.
  • Vaadake @ font-face CSS3 tööriista, mis võimaldab teil kasutada kohandatud fonte veebisaidil ilma pilti kasutamata.
 

Jäta Oma Kommentaar