običajno, besedilni dokumenti so ustvarjeni na navadnem belem ozadju. Toda včasih je treba dokumentu dodati nenavadno ozadje. To je morda potrebno, če na primer ustvarjate plakat, knjižico, brošuro ali oglas.

Na srečo razvijalci urejevalnik besedil Word je predvidel podobno situacijo in vgradil ustrezno funkcijo. V tem gradivu bomo govorili o tem, kako narediti katero koli sliko, sliko ali fotografijo kot ozadje v Wordu.

Če želite nastaviti sliko kot ozadje v Wordu 2007, 2010, 2013 ali 2016, morate iti na zavihek »Postavitev strani«, tam klikniti gumb »Barva strani« in izbrati možnost »Načini polnjenja«.

Če uporabljate Word 2003, morate za to odpreti meni »Oblika - Ozadje - Metode polnjenja«.

Po tem se odpre okno »Načini polnjenja« z nastavitvami ozadja strani. V tem oknu morate iti na zavihek »Slika«, tam klikniti gumb »Slika« in v oknu, ki se prikaže, izbrati sliko, ki jo želite narediti za ozadje dokumenta.

Ko se želena slika prikaže v oknu »Načini polnjenja«, ga morate zapreti z gumbom »V redu«.

Posledično bo slika, ki jo izberete, uporabljena kot ozadje vašega Wordovega dokumenta.

Druge možnosti oblikovanja ozadja strani

Poleg slike lahko kot ozadje dokumenta uporabite gradient, teksturo ali vzorec. Če želite uporabiti ozadje kot gradient, morate odpreti okno »Fill Method«, kot je opisano zgoraj, pojdite na zavihek »Gradient« in tam izberite ustrezne nastavitve gradienta. Za gradient lahko uporabite eno ali dve barvi ali pa uporabite enega od že pripravljenih gradientov.

Če želite uporabiti teksturo kot ozadje, morate iti na zavihek »Tekstura« in izbrati eno od predlaganih tekstur. Prav tako lahko naložite svojo teksturo. Če želite to narediti, uporabite gumb »Druga tekstura«.

Če želite ustvariti ozadje z vzorcem, morate iti na zavihek »Vzorec«, izbrati enega od predlaganih vzorcev in nastaviti tudi barvo vzorca in barvo glavnega ozadja strani.

Za ozadje strani lahko uporabite tudi enotno polnilo ene barve. Če želite to narediti, morate samo klikniti gumb »Barva strani« na zavihku »Postavitev strani« in izbrati eno od predlaganih barv.

Če želite odstraniti katero koli ozadje strani, morate klikniti gumb »Barva strani« in izbrati »Brez barve«.

Pri postavitvi katere koli spletne strani je poleg funkcionalnosti zelo pomemben dizajn. To je tisto, kar določa lasten slog in dizajn določenega podjetja ali osebe, za katero se spletna stran izdeluje. Prilagajanje barve ozadja in slike je preprosto, če sledite navodilom v tem članku.

Odprite datoteko HTML z Beležnico ali katerim koli drugim urejevalnikom besedil, ki ste ga vajeni. Na primer, vzemimo primitivno stran spletnega mesta z najmanj besedila. Datoteko lahko odprete s katerim koli brskalnikom.

Najprej spremenite barvo ozadja, saj ljudje s počasno internetno povezavo ne bodo mogli takoj videti slike ozadja spletnega mesta. Nekaj ​​časa, ko se bo slika nalagala, bodo lahko videli samo barvo vaše strani.
Vnesite oznako parameter bgcolor=”*****”, kjer je ***** koda barve. Barve za HTML lahko najdete v katerem koli grafični urejevalnik z izbiro možnosti »za splet« ali na spletnem mestu https://colorscheme.ru/color-names

Samo izbrati morate barvo v paleti kroga in dodeliti njeno intenzivnost znotraj kvadrata. Na desni boste videli dve kodi za html. Kopirajte jih in prilepite v beležnico.

Ko izberete barvo in jo vstavite v kodo, preverite, ali ste vse naredili pravilno, tako da si spletno stran ogledate v brskalniku.

Zdaj lahko začnete vstavljati sliko ozadja. Za večjo priročnost postavite želeno sliko v mapo s kodo. Dajte mu ime z latinskimi črkami.

Zdaj poiščite lokacijo datoteke tako, da jo kliknete z desno tipko miške, izberete »Odpri z« in kliknete kateri koli brskalnik, nameščen v vašem računalniku.

Kopirajte naslov iz iskalni niz vaš brskalnik.

Zdaj v oznaki vnesite vrstico:

• style=”background-image: url(‘file:///C:/Users/FILE_PATH.jpg’)”

Shranite datoteko.

Preverite svojo spletno stran. Videli boste, da je bilo vaše besedilo zamenjano z ozadjem.

Upoštevajte, da bo pri uporabnikih z višjo ločljivostjo zaslona vaša slika podvojena navzdol in na desno. Ne bo videti dobro, če slika ni enobarvna. Za popravljanje tega parametra obstajajo posebni ukazi.

• background-repeat : "Vrednost." Možnosti za vašo vrednost so lahko: »ponovi-x« – ponovi sliko ozadja vodoravno in navpično. “repeat-y” – ponavljanje samo navpično. “no-repeat” – slika je zamrznjena na mestu in se ne ponavlja. “presledek” – celotna stran bo zapolnjena z največjim številom kopij slike, najbolj oddaljene bodo obrezane. "okroglo" - enaka možnost, vendar bodo robovi slike skrbno pomanjšani;
• ozadje-priponka: "Vrednost." Če zamenjate oznako »scroll« namesto besede Value, se bo slika pomikala skupaj s spletnim mestom. “fiksno” – ozadje med drsenjem ostane nespremenjeno;
• velikost ozadja: Vrednost Vrednost2. Tukaj morajo vrednosti imeti vrednost v slikovnih pikah. Na primer: 100px 200px. Poleg slikovnih pik so sprejete tudi odstotne vrednosti. To je možnost zapolnitve strani s sliko. Poleg številk lahko vnesete dva parametra: »contain« – zapolni stran s sliko po dolgi strani in »cover« – zapolni stran s sliko po širini.

Ko poznate osnove polnjenja strani z ozadjem v HTML, ste pripravljeni na ustvarjanje svojega prvega spletnega mesta.

V zadnjem članku smo govorili o tem, kako spremeniti barvo ozadja na spletnem mestu z uporabo atributov oznak telo in slogi CSS: . Ta članek bo govoril o uporabi slik kot ozadja na spletnem mestu, o tem, kako raztegniti ozadje na celotno širino strani in ga popraviti.

Slika kot ozadje strani - HTML

Najprej razmislimo, kako nastaviti sliko ozadja na spletnem mestu z uporabo atributa ozadje oznaka telo:

Tukaj je slika ozadja nastavljena z uporabo atributa ozadja oznake body.

Kot v zgornjem primeru je priporočljivo, da poleg slike določite tudi barvo ozadja (prikazana bo na spletnem mestu med nalaganjem strani), ki se bo najbolje ujemala s sliko ozadja in ustvarila kontrast z besedilom. na strani. Na primer, če na svojem spletnem mestu uporabljate belo barvo besedila, morate določiti temno barvo ozadja in nastaviti temno sliko ozadja. V tem primeru bo besedilo lahko berljivo.

Opomba: Priporočljivo je, da sliko ozadja in barvo ozadja nastavite ne z uporabo HTML-ja, ampak z uporabo z uporabo CSS. V tem primeru bo koda veljavna in bolj pravilna.

Slika kot ozadje strani - CSS

V CSS je mogoče barvo ozadja in sliko ozadja nastaviti v eni lastnosti ozadje:

Tukaj je slika ozadja nastavljena z lastnostjo CSS ozadja.

Tukaj uporabljamo lastnino ozadje-priponka ozadje strani je določeno in z uporabo lastnosti ozadje-ponovitev nastavljena je horizontalna ponovitev slike. Vendar je vredno upoštevati, da mora biti slika ozadja dobro "zašita" po robovih.

Če želite sliko ozadja raztegniti na polno velikost okna brskalnika, uporabite lastnost velikost ozadja: 100 %;

V graditelju spletnih strani Nubex lahko uporabite veliko sliko kot ozadje katere koli spletne strani in jo pripnete.

Sodobni brskalniki vam omogočajo, da elementu dodate poljubno število slik ozadja, pri čemer navedete parametre vsakega ozadja, ločene z vejicami. Dovolj je, da uporabite univerzalno lastnost ozadja in zanj najprej določite eno ozadje in drugo, ločeno z vejico.

Kako raztegniti ozadje na celotno širino okna?

Za spreminjanje velikosti ozadja uporabite lastnost velikosti ozadja; nastavite njeno vrednost na 100 %, potem bo ozadje zavzelo celotno širino okna brskalnika. Za starejše različice brskalnikov bi morali uporabiti posebne lastnosti s predponami, kot je prikazano v 1. primeru.

Kako dodati sliko za ozadje na spletno stran?

Če želite spletni strani dodati sliko ozadja, nastavite pot do slike znotraj vrednosti url lastnosti sloga ozadja, ki je nato dodana izbirniku telesa.

Ali je mogoče narediti animirano ozadje?

Animacija je dokaj zmogljiva tehnika, ki lahko oživi vsak dokument, zato ni presenetljivo, da je tehnologija Flash, ki na spletne strani dodaja risanke, in to interaktivne, postala izjemno priljubljena. Grafični format GIF podpira tudi preprosto animacijo z zaporedno menjavo sličic. Z uporabo slike v tem formatu je torej mogoče animirati ne samo posamezne slike, ampak tudi ozadje spletne strani ali določen element.

Najprej morate ustvariti animirano sliko format GIF za kaj lahko program uporabljate Adobe Photoshop ali drugo primerno za ta namen. Obstajajo tudi knjižnice že pripravljenih animiranih datotek, ki jih lahko uporabite kot sliko za ozadje. Nato je slika dodana kot ozadje z uporabo lastnosti sloga ozadja, kot je prikazano v 1. primeru.

Kako postaviti sliko za ozadje v spodnji desni kot strani?

Za nadzor položaja slike ozadja na strani se uporablja lastnost sloga položaja ozadja, ki hkrati nastavi vodoravne in navpične koordinate slike. Če želite preklicati ponavljanje slike v ozadju, uporabite lastnost background-position z vrednostjo no-repeat.

Kako lahko preprečim ponavljanje ozadja?

Privzeto se slika ozadja ponavlja vodoravno in navpično ter tvori mozaik po celotnem polju spletne strani. Vendar pa to vedenje ozadja ni vedno potrebno, zlasti pri postavitvi ene same slike, zato bo v pomoč dodajanje vrednosti brez ponavljanja lastnosti sloga ozadja.

Kako naj se ozadje ponavlja samo navpično?

Ponavljanje ozadja je običajno potrebno za ustvarjanje okrasnih linij ali prelivov, ki so vezani na višino elementa spletne strani ali okna. V takšnih primerih navpično ponavljanje ozadja zagotavlja skladno sliko, ne glede na velikost elementov. Samo najprej se prepričajte, da se slika ozadja ponovi brez šivov.

Vsaka soba bo videti veliko bolje, če bo njena tla prekrita z drago perzijsko preprogo. Zakaj je torej vaše spletno mesto slabše? Morda je čas, da tla »pokrijete« z drago, elegantno ročno izdelano preprogo. Oglejmo si podrobneje, kako narediti ozadje za spletno stran:

Ozadje za spletno stran

Zgodi se, da stari dizajn Saj sem se že naveličal. In želim nekaj novega in okusnega. A nov dizajn tako bo, če ga skuhate z lastnimi rokami.

Toda popolnoma spremeniti celotno zasnovo vira na lastno pest je nehvaležna naloga. In roke vseh niso ustrezno usposobljene za to nalogo. Zato je najlažji način za osvežitev stare predloge tako, da spremenite barvo ozadja vira ali njegovo sliko ozadja.

Ozadje spletnega mesta lahko spremenite na več načinov. Za to se uporabljajo zmogljivosti CSS ali html. Toda številne lastnosti za delo z ozadjem imajo isto ime in način uporabe v teh spletnih tehnologijah.

Osnove dela z ozadji v html

Kot ozadje lahko uporabite več elementov:

• barva;
• Slika ozadja;
• Slika teksture.

Oglejmo si uporabo vsakega od njih podrobneje.

Če želite nastaviti barvo ozadja za spletno mesto, uporabite lastnost barve ozadja atributa style. Če želite nastaviti glavno barvo spletne strani, jo morate napisati znotraj oznake . Na primer:

Ozadje spletne strani #55D52B

Poleg šestnajstiške barvne kode je podprta vrednost v obliki ključne besede ali RGB. Primeri:

Ozadje spletne strani rgb(23,113,44)

Zeleno ozadje spletne strani

Nastavite barvo ozadja z ključne besede ima številne omejitve v primerjavi z drugima dvema metodama.

HTML podpira le 16 ključnih besed za nastavitev barv. Tukaj je nekaj izmed njih: bela, rdeča, modra, črna, rumena in drugi.

Zato je za nastavitev ozadja za spletno mesto html bolje uporabiti šestnajstiško ali RGB obliko.

Poleg izbire barv so na voljo tudi druge možnosti prilagajanja. Če je lastnost barve ozadja nastavljena na transparentno, bo ozadje strani postalo prosojno. Ta vrednost je tej lastnosti privzeto dodeljena.

Zdaj pa si poglejmo zmožnosti jezika hiperteksta za nastavitev slike ozadja za spletno mesto. To lahko storite z lastnostjo slike ozadja.

Kot lahko vidite iz kode, je slika povezana prek poti url, navedene v oklepajih. Vendar niso vse slike tako velike, da bi njihova velikost zapolnila celotno površino zaslona. Poglejmo, kako bo prikazana manjša slika.

Recimo, da razvijamo spletno stran o poeziji in moramo za ozadje uporabiti sliko Pegaza. Krilati konj bo poosebljal svobodo pesnikove ustvarjalne misli!

Potrebujemo, da se slika enkrat prikaže na sredini zaslona. Toda na žalost brskalnik ne razume naših visokih želja. In prikaže manjšo sliko za ozadje spletnega mesta tolikokrat, kolikor lahko zaslon sprejme:

Morda bodo štirje nasmejani konji s krili prevelik navdih za pesnike. Zato prepovedujemo kloniranje našega Pegaza. To naredimo z lastnostjo ponavljanja v ozadju. Možne vrednosti:

• repeat-x – ponovi sliko ozadja vodoravno;
• repeat-y – navpično;
• ponovitev - na obeh oseh;
• brez ponavljanja – ponavljanje je prepovedano.

Med naštetimi možnostmi nas zanima zadnja. Preden spremenimo ozadje spletnega mesta, ga uporabimo v naši kodi:

Seveda pa bi bilo bolje, če bi naš letak stal na sredini ekrana. Lastnost background-position je namenjena ravno pozicioniranju slike ozadja na strani. Lokacijske koordinate lahko nastavite na več načinov:

• Ključna beseda ( zgoraj, spodaj, sredina, levo, desno);
• Odstotek – štetje se začne od zgornjega levega kota;
• V merskih enotah (piksli).

Uporabimo najpreprostejšo možnost centriranja:

Zgodi se, da morate med drsenjem popraviti položaj slike. Zato, preden naredite sliko kot ozadje spletnega mesta, uporabite posebno lastnost background-attachment. Vrednosti, ki jih sprejema, so:

• zvitek;


• fiksno.

Potrebujemo zadnjo vrednost. Zdaj bo naš primer kode videti takole:

Ozadje teksture spletne strani

V prvem primeru smo za ozadje uporabili veliko in lepo puščavsko pokrajino. Toda za takšno lepoto morate v celoti plačati. Teža slike, izdelane v visoka kvaliteta, lahko doseže več megabajtov.

Ta obseg na noben način ne vpliva na hitrost nalaganja strani v brskalniku s hitro internetno povezavo. Ampak kaj pa mobilni internet, ki bo trajalo dolgo časa za nalaganje več "metrov"?

Vse te težave se rešijo s pomočjo teksturiranega ozadja. Kot vzorec teksture uporablja majhno sliko. Tudi če se večkrat ponovi, se risba naloži le enkrat.