Kuinka Asettaa Tausta Verkkosivustolle

Sisällysluettelo:

Kuinka Asettaa Tausta Verkkosivustolle
Kuinka Asettaa Tausta Verkkosivustolle

Video: Kuinka Asettaa Tausta Verkkosivustolle

Video: Kuinka Asettaa Tausta Verkkosivustolle
Video: Kuinka Asettaa ja Käyttää Green Screeniä! 2017 2024, Saattaa
Anonim

Minkä tahansa sivuston suunnittelu perustuu taustakuviin ja väreihin, kuten talon perusta. Jos haluat korvata Internet-resurssisi tyypillisen perustan jollakin yksilöllisemmällä, sinun on aloitettava suunnittelun kehittämisestä. Ja kun se on valmis, puhtaasti tekninen osa säilyy, eli se korvaa sivun lähdekoodissa määritetyn sivuston taustan vanhan mallin uudella. Tämän toteuttamiseksi käytännössä on useita tapoja.

Kuinka asettaa tausta verkkosivustolle
Kuinka asettaa tausta verkkosivustolle

Ohjeet

Vaihe 1

Ensin on selvitettävä, millä tavoin tausta asetetaan sivuston nykyisessä versiossa. Voit tehdä tämän avaamalla sivun HTML-koodin. Voit tehdä tämän yksinkertaisella tekstieditorilla lataamalla tiedoston palvelimelta etukäteen. Tai voit käyttää sisällönhallintajärjestelmän sivujen muokkausohjelmaa, jos sellaista käytät. Sivunmuokkausohjelma ei vaadi tiedoston lataamista, mutta muokkaa sitä suoraan palvelimella käyttämällä selainta käyttöliittymänä. Avaamasi sivun HTML-koodi (HyperText Markup Language) koostuu selaimen ohjeista. Ne kuvaavat verkkosivun kunkin elementin tyyppejä, ulkonäköä ja sijaintia. Näitä ohjeita kutsutaan yleisesti "tunnisteiksi". Tunnisteiden järjestys sivukoodissa noudattaa myös HTML-kielen sääntöjä - ne on jaettu lohkoihin, joista ensimmäisen on oltava otsikkolohko, joka alkaa tunnisteella ja päättyy. Sen jälkeen tulisi olla lohko, joka kiinnostaa sinua nyt enemmän - asiakirjan runko. Se on rajoitettu tunnisteisiin ja. Tämän lohkon alkutunnisteeseen () voit laittaa tietoja sivun taustasta. Tällaisia tunnisteiden tietoja kutsutaan "attribuuteiksi". Taustavärin asettavan runkotunnisteen määritteeksi merkitään bgcolor ja koodissa se voi näyttää tältä: Tässä asetamme sivun taustaväriksi hopean. Selain tunnistaa osan väreistä nimensä perusteella, mutta jotta ei erehdy, on parempi ilmoittaa niiden heksadesimaalikoodit. Tämä versio, jossa on hopeanvärinen heksadesimaalilauseke, näyttää tältä: Joten sinun on löydettävä sivun koodista <body alkava tagi ja tarkistettava, onko sillä taustaväri. Jos näin on, korvaa siinä oleva värimerkintä uudella versiollasi ja tallenna muutokset sivulle.

Vaihe 2

Sivustosi nykyisen suunnittelun taustaa ei voi määrittää värin, vaan kuvan perusteella. Vastaavaa runkotunnisteen määritettä kutsutaan taustaksi, ja se voi näyttää tältä koodissa: Tässä tausta on bg.jpg-kuva palvelimesi img-kansiosta. Jos tämä attribuutti on läsnä, korvaa kuvatiedoston nimi uuden kuvan nimellä muistamalla ladata se palvelimelle. Jos haluat korvata kuvan värillä, korvaa taustamääritte kuvatulla bgcolor-attribuutilla. edellä.

Vaihe 3

Kun kuvaat suhteellisen monimutkaisen sivun ulkoasua, käytä "CSS-tyylitaulukoita" - CSS (Cascading Style Sheets). CSS-koodilohkot voidaan sisällyttää suoraan sivukoodiin tai ulkoiseen tiedostoon, jossa on "css" -laajennus. Sivukoodin otsikko-osasta (ja -tagien väliltä) on etsittävä tyylillä kuvaus, joka alkaa <tyylillä. Jos se sisältää linkin ulkoiseen tiedostoon, se näyttää tältä: @import "style.css"; Tässä on linkki tyylitaulukkoon nimeltä style.css. Sinun on avattava määritetty tiedosto muokkausta varten. Ja jos linkkiä ei ole, ja avaavan <tyylitagin jälkeen on tyyliohjeita, sinun on muokattava niitä täällä. Molemmissa vaihtoehdoissa, tyylien kuvausten joukossa, sinun on etsittävä niitä, jotka liittyvät asiakirjan runkoon (body). Tämä lohko kuvauksia voi näyttää tältä: body {

taustaväri: hopea;

väri musta;

} Täällä sinun on korvattava taustaväri-parametrin arvo uuden värisi arvolla ja parempi samoilla heksadesimaaliarvoilla. CSS-ohjeiden taustakuvan vaihtoehdon tulisi näyttää tältä: body {

tausta: # C0C0C0-URL (img / bg.jpg) toista-y;

väri musta;

} Tässä linkki kuvaan on samanlainen kuin edellä käsiteltiin, ja # C0C0C0 ennen linkkiä tarkoittaa, että sivutilalla, jota taustakuva ei ole, on hopeanvärinen tausta. "Repeat-y" osoittaa, että taustakuva tulisi kertoa Y (pysty) -akselilla."Repeat-y" voidaan korvata "repl-x" (vaakasuora replikointi) tai "no-repeat" (älä replikoi). Jos et määritä toistoa lainkaan, taustakuva kaakeloidaan sivun taustatilaan kaikkiin suuntiin.

Suositeltava: