Kuinka Tehdä Taustakuva Verkkosivustolta

Sisällysluettelo:

Kuinka Tehdä Taustakuva Verkkosivustolta
Kuinka Tehdä Taustakuva Verkkosivustolta

Video: Kuinka Tehdä Taustakuva Verkkosivustolta

Video: Kuinka Tehdä Taustakuva Verkkosivustolta
Video: miten tehdä taustakuva koneelle! 2024, Joulukuu
Anonim

Voit oppia sivuston rakentamisen perusteet itse; Internetissä ja kirjoissa on tarpeeksi tietoa tästä aiheesta. Alkuvaiheessa kuitenkin usein ilmenee vaikeuksia yhden tai toisen tunnisteen käytössä. Todellakin, yleisimmät komponentit muistetaan parhaiten, koska ne ovat välttämättömiä kirjoitettaessa mitään verkkosivustoa.

Kuinka tehdä taustakuva verkkosivustolta
Kuinka tehdä taustakuva verkkosivustolta

Ohjeet

Vaihe 1

Valitse kuva, jota haluat käyttää taustakuvana. Jos aiot lisätä tekstiä kuvan päälle, tässä tapauksessa on suositeltavaa rajoittaa vaihtoehtoja ilman liiallista kirjoa, joissa käytetään useita luonteeltaan lähellä olevia värejä. Periaatteessa aaltoilun poistamiseksi voit luoda "taustan" sisällölle - ja ongelma ratkaistaan onnistuneesti.

Vaihe 2

Korjaa kuva Adobe Photoshopilla. Kun olet valmis, valitse Tiedosto-valikosta Tallenna Webille -komento ja valitse haluamasi kansio. Jos tämä on ensimmäinen sivustossa käytetty kuva, "Kuvat" -kansio luodaan automaattisesti.

Vaihe 3

Kirjoita tagiin background = "polku kuvaan" -attribuutti. Tallennusesimerkki: tai. Samalla pidä mielessä, että tagin tulisi näkyä vain kerran koodissa, sitä ei tule kertoa.

Vaihe 4

Tallenna muutokset muistiinpanoon, napsauta selaimen "Päivitä" -painiketta. Taustakuva ilmestyy näytölle. Jos kuvan mitat ovat pienemmät kuin verkkosivun parametrit, kuva kopioidaan niin monta kertaa kuin tarvitaan koko tilan täyttämiseksi. On kaksi tapaa korjata tämä puute:

• aseta tarvittavat kuvaparametrit pikseleinä Adobe Photoshop -ohjelmalla ("Kuva" - "Kuvan koko");

• aseta tarvittavat mitat html-koodiin.

Jos esimerkiksi leveys on 1250 pikseliä ja korkeus 650 pikseliä, sinun on lisättävä tarvittavat määritteet taulukkosolulle, johon kuva sijoitetaan.

Et voi asettaa kokoa tagissa - kuva näytetään aina täysikokoisena.

Vaihe 5

Kopioiden analogia taustakuvan lisäämiseksi:

taustakuva

RUNKO {

taustakuva: url (images / bg.jpg);

}

Attribuutti "background-image: url (images / bg.jpg)" on polku taustakuvaan.

Suositeltava: