Prvi tekst

Drugi tekst

U ovom postu ću vam reći kao i obično postavite pozadinu stranice korištenjem HTML kodirati.

Također ću vam pokazati izvrsnu inozemnu uslugu za odabir besprijekornih pozadina.
Sada su postavke web-mjesta lakši i praktičniji putem CMS konzola kao što je WordPress.
Događa se da trebate promijeniti predloške prodajnih stranica, ovaj će vam članak pomoći u tome.

Ako ne znaš što je HTML, onda se može sažeti kao jezik web-mjesta ili skup pravila prema kojima se web stranice generiraju.

Na primjer, vidite sliku na web mjestu, kada u HTML kodu stranice može izgledati ovako:

Postavljanje čvrste boje na pozadinu stranice.

Kako bi se instalirao jednobojna pozadina, potrebno u oznaci dodati atribut bgcolor.

< html >
< head >
< title >Naslov stranice.

< body bgcolor = "#ffcc00" >

Ovaj kod možete zalijepiti u tekstualnu datoteku i spremiti ga s nastavkom .html. Zatim otvorite bilo kojim preglednikom i pogledajte rezultat.

Kao što ste vjerojatno pogodili, boja pozadine pojavljuje se zbog koda boje u atributu bgcolor = "vrijednost", koji se može odabrati klikom na ovu poveznicu.

Postavljanje slike na pozadinu HTML stranice.

Do postaviti na pozadinsku sliku, možete koristiti atribut pozadini u oznaci .

< html >
< head >
< title >Naslov stranice.

< body background = "http://сайт/images/mlmsecret.jpg" >Bok. Ovo je moja prva stranica.

Možda ćete primijetiti da atribut pozadini jednak je putu datoteke koja se koristi kao pozadina.

Da biste brzo promijenili pozadinu ili bilo koju sliku na stranici, samo navedite novi put do datoteke pomoću uređivača teksta.

Da biste saznali prethodni put, na stranici sa slikom kliknite desnom tipkom miša na sliku i kliknite na "Kopiraj URL slike". na ovaj način vidjet ćete naziv slike/pozadine. Tada možete jednostavno zamijeniti staru sliku svojom, koristeći isti naziv datoteke.

To su bile najjednostavnije osnove postavljanja. pozadina u html-u, sada dolazi zabavni dio. 🙂

Moderni preglednici omogućuju dodavanje proizvoljnog broja pozadinskih slika elementu, navodeći opcije za svaku pozadinu, odvojene zarezima. Dovoljno je upotrijebiti univerzalno svojstvo background i navesti jednu pozadinu za nju prvo, a drugu odvojenu zarezima.

Kako da rastegnem pozadinu na punu širinu prozora?

Svojstvo background-size namijenjeno je skaliranju pozadine, 100% je navedeno kao njegova vrijednost, tada će pozadina zauzeti cijelu širinu prozora preglednika. Za starije verzije preglednika treba koristiti određena svojstva s prefiksima, kao što je prikazano u primjeru 1.

Kako mogu dodati pozadinsku sliku na web stranicu?

Za dodavanje pozadinske slike na web-stranicu, postavite put do slike unutar vrijednosti url-a svojstva stila pozadine, koja se zauzvrat dodaje izborniku tijela.

Mogu li napraviti animiranu pozadinu?

Animacija je dovoljno jaka tehnika koja može oživjeti svaki dokument, pa ne čudi ogromnu popularnost Flash tehnologija koja na web stranice dodaje animirane crtiće, štoviše, interaktivne. GIF grafički format također podržava osnovnu animaciju kroz uzastopne promjene okvira. Dakle, korištenjem slike u ovom formatu dopušteno je animirati ne samo pojedinačne slike, već i pozadinu web stranice ili određeni element.

Prvo morate izraditi animiranu sliku u GIF formatu, za koju možete koristiti program Adobe Photoshop ili drugi prikladan za tu svrhu. Postoje i biblioteke gotovih animiranih datoteka koje se mogu koristiti kao pozadinska slika. Zatim se slika dodaje kao pozadina koristeći svojstvo stila pozadine, kao što je prikazano u primjeru 1.

Kako uklopiti pozadinsku sliku u donji desni kut stranice?

Svojstvo stila background-position koristi se za kontrolu položaja pozadinske slike na stranici; istovremeno postavlja horizontalne i okomite koordinate slike. Da biste poništili ponavljanje pozadinske slike, koristite svojstvo background-position s vrijednošću bez ponavljanja.

Kako spriječiti ponavljanje pozadine?

Prema zadanim postavkama, pozadinska slika se ponavlja vodoravno i okomito, nižući se u mozaik preko cijelog polja web stranice. Međutim, ovakvo ponašanje pozadine nije uvijek potrebno, osobito u slučaju postavljanja jedne slike, pa u pomoć dolazi vrijednost bez ponavljanja dodana svojstvu stila pozadine.

Kako mogu učiniti da se pozadina ponavlja samo okomito?

Ponavljanje u pozadini obično je potrebno za stvaranje ukrasnih linija ili gradijenta koji su usidreni na visinu elementa ili prozora web stranice. U takvim slučajevima, vertikalno ponavljanje pozadine daje besprijekornu sliku bez obzira na veličinu elemenata. Samo na početku, trebali biste biti zabrinuti da se pozadinska slika ponavlja bez šavova.

Pozdrav svima! Vaš ponizni sluga je u kontaktu s vama s dijelom korisnog i praktičnog materijala na temu kako postaviti pozadinu za stranicu. Ovo je sam početak u html izgledu i ovdje ću na primjeru zorno demonstrirati kako možete napraviti prekrasnu pozadinu za web stranicu koja će zasigurno privući korisnika interneta i dati originalnost.

Ako ste primijetili, većina internetskih poduzetnika koristi jedinstvenu pozadinu na svojim prodajnim stranicama i stranicama za pretplatu. Danas ćemo analizirati tehničku komponentu ovog procesa.

Dakle, prvo nam treba, naravno, slika. Na inozemnom internetu postoji jedna jako dobra stranica na kojoj možete preuzeti različite slike za pozadinu stranice... Samo ih ima puno. Stranica se zove Suptilni uzorci.

Na prvom mjestu se prikazuje na popisu Google tražilice, pa ga preporučujem u svom radu. Također možete pronaći veliki broj drugih web-mjesta ako u tražilicu upišete nešto poput "pozadinske slike uzoraka", "preuzmite pozadinsku sliku za web mjesto" i tako dalje.

Tko nema problema s engleskim jezikom, onda to može shvatiti bez poteškoća.

U ovom članku odabrao sam temu i zove se tweed. Možete ga preuzeti.

Ovako to izgleda u maloj verziji na stranici.

Prvo stvaramo novi dokument u programu

I svakako ga spremite pod imenom prije, na primjer, uređivanja index.html i napravite mapu na svom računalu, na primjer, možete napraviti mapu "Moja stranica" i staviti našu indeksnu datoteku (index.html) u nju. Bolje je napraviti mapu na engleskom kako ne bi bilo zabune u preglednik i netočan prikaz stranice.

Osim toga, u glavnoj mapi "moja stranica" trebate stvoriti još dvije podmape, u jednu ćemo staviti sve naše slike i ona će se zvati "slike", a drugu ćemo dati naziv "CSS" (kaskadni stil listovi) i tamo stavite datoteku style.css

Sada možete raditi na našem dokumentu. U sljedećem koraku trebamo umetnuti prazan html kod, takozvani glavni okvir od kojeg sve počinje. Možete ga preuzeti izravno. Zatim ćemo sve kopirati iz ove datoteke i prenijeti u datoteku našeg programa. Trebali biste završiti s nečim poput sljedećeg

Primijetit ćete crvenu disketu pored naziva datoteke. Dakle, ako je crvena, onda datoteka nije spremljena, svakako pritisnite gumb za spremanje tako da disketa postane plava.

U oznaci title možete promijeniti naslov dokumenta, na primjer, možete ga učiniti "Moja prva web stranica". I provjerite je li vaša stranica kodirana UTF - 8

Inače, ako postoji drugačije kodiranje, na primjer windows-1251, tada će se tekst dokumenta u pregledniku prikazati u hijeroglifima. Kodiranje možete promijeniti u odjeljku "Kodiranja - Kodiranje u Utf-8 (bez BOM)" na alatnoj traci programa.

I ne zaboravite sačuvati svaku našu akciju.

Sada krenimo stvarati pozadinu u našem dokumentu. Moram odmah reći da će se sve naše radnje na dizajnu web stranice odvijati pomoću kaskadnih stilskih tablica zvanih CSS, odnosno izradit ćemo okvir u html-u, a pomoću CSS-a ćemo ga dovesti do lijepog stila i izgleda .

Na taj način ćete se naviknuti na ispravan tijek radnje. Nije potrebno baviti se stilovima izravno u html dokumentu, bolje ih je staviti u poseban dokument.

Da biste to učinili, u našem programu Notepad ++ stvorite drugu datoteku i nazovite je Style.css i spremite je u novu css mapu, koja će se nalaziti u općoj mapi "Moja stranica"

Fino! Da bi naš preglednik ispravno prikazao stranicu, moramo uključiti stilsku tablicu u naš html dokument. Ovako se to radi

Izravno unosimo cijeli red iznad. S ovom linijom uključujemo našu tablicu stilova.
Sada ćemo definirati pozadinsku sliku za našu oznaku tijela putem tablice stilova. Da bismo to učinili, stvaramo sljedeću strukturu u style.css dokumentu (samo uzmite i upišite programski kod)

Ovdje ću malo objasniti. Atribut pozadine ima mnogo vrijednosti, od kojih je jedna background-repeat, koja je odgovorna za rastezanje naše pozadinske slike za web dokument.

POZADINA-PONAVLJANJE:

PONAVLJANJE // (ponovi vodoravno i okomito) REPEAT-X // (rastezanje samo vodoravno) REPEAT-Y // (razvlačenje samo okomito) NO-REPEAT // (ne ponavljaj pozadinsku sliku)

U našem slučaju, mi repliciramo našu malu sliku i okomito i vodoravno. Kao rezultat, cijela stranica je ispunjena našom slikom. Ovako to na kraju izgleda u pregledniku:

Također, posebno za vas, napravio sam izbor stranica na kojima možete preuzeti prekrasnu pozadinu za stranicu.

Vlad Merzhevich

Zbog posebnosti web stranica, pozadinske slike dobivaju značajnu ulogu u izgledu dokumenata web stranice. Istodobno, aktivno su uključeni u razne aktivnosti, na primjer, automatiziraju proces pričvršćivanja slika na tekst, stvaraju gradijentne prijelaze i, naravno, dodaju pozadinu ispod sadržaja. Neki aspekti upotrebe pozadinskih slika razmatraju se u nastavku.

Pozadina na web stranici

Postavljanje pozadinske slike na web stranici tradicionalno se događa putem pozadinskog atributa oznake ... Takav se uzorak ponavlja vodoravno i okomito, ispunjavajući na taj način cijeli prozor preglednika. Jasno je da ovdje nema posebnih opcija za kreativnost, pa se okrenimo stilovima i vidimo što možete učiniti s CSS-om.

U CSS-u postoji pet atributa koji kontroliraju pozadinsku sliku: njezino dodavanje, položaj i ponavljanje. Međutim, svi ovi parametri su zamijenjeni jednim univerzalnim svojstvom pozadine, a mi ćemo ga koristiti u budućnosti.

Dodavanje pozadinske slike

Dodavanje slike vrši se postavljanjem adrese slike pomoću ključne riječi url. Za kontrolu ponavljanja slike koriste se argumenti no-repeat (bez ponavljanja), repeat-x (horizontalno ponavljanje) i repeat-y (vertikalno ponavljanje). To vam omogućuje da dobijete web stranicu prikazanu na sl. 1.

Da biste postavili sliku na web stranicu, dodajte svojstvo stila pozadine biraču TIJELO, kao što je prikazano u primjeru 1.

Primjer 1. Tapeta

U ovom primjeru, grafički target.gif definiran je kao pozadina web stranice bez ponavljanja slike. Kako bi se spriječilo da se slika priljubi uz rubove preglednika, ona je pomaknuta 30 piksela udesno i 20 piksela prema dolje od svoje izvorne pozicije.

Ponavljanje uzorka

Zbog činjenice da možete postaviti pozadinu da se ponavlja vodoravno ili okomito, dostupno je nekoliko opcija za dizajn web stranica. Na primjer, da biste stvorili okomitu traku duž lijevog ruba (slika 2), potrebna vam je slika prikazana na slici. 3.

Crtež treba biti takav da se uklapa okomito bez vidljivih šavova, te da čini jedinstvenu cjelinu s navedenom bojom pozadine web stranice. Primjer 2 pokazuje kako stvoriti takvu pozadinsku sliku, opet koristeći svojstvo pozadine i njegovu vrijednost ponavljanja.

Primjer 2. Ponavljanje pozadine okomito

Slično, možete ponoviti pozadinu vodoravno, na primjer, stvaranjem gradijenta i postavljanjem kao pozadinsku sliku (slika 4).

Da biste dobili web stranicu prikazanu na sl. 4, prvo ćete morati napraviti sliku s prijelazom gradijenta. Širina je dovoljna za navođenje 20-40 piksela, a visina slike ovisi o namjeni dokumenta i očekivanoj visini sadržaja web stranice. Ne zaboravite da će veliki crtež dovesti do povećanja veličine grafičke datoteke. A to će negativno utjecati na brzinu njegovog učitavanja i, u konačnici, dovesti do usporavanja prikaza pozadine. Za ovaj slučaj sasvim je prikladna slika veličine 30x200 piksela (slika 5.).

Primjer 3 prikazuje HTML kod za stvaranje gradijenta pozadine.

Primjer 3. Ponavljanje pozadine vodoravno

Gradijentna grafika dobro funkcionira s blokom pune boje, tako da ovaj primjer dodaje sloj za prikaz sadržaja web stranice.

Dodavanje slike u tekst

Pomoću pozadinske slike možete automatizirati proces dodavanja slika određenom tekstu, kao što su naslovi. Da biste to učinili, koristite generičko svojstvo pozadine koje se primjenjuje na željeni birač. Kao vrijednost navedite put do slike i, kako se ne bi ponavljala, argument zabrane ponavljanja (primjer 4).

Primjer 4. Dodavanje slike

Naslov

Glavni tekst

Kao što je prikazano u ovom primjeru, slika se može pomaknuti vodoravno i okomito od svog izvornog položaja, prema zadanim postavkama ovo je gornji lijevi kut elementa bloka. Pomicanje pozadine omogućuje vam da postavite sliku u odnosu na tekst po želji. Kako biste spriječili da se tekst preklapa sa slikom, svakako dodajte svojstvo padding-left, zbog čega se tekst pomiče udesno za navedenu udaljenost. On je u svakom slučaju individualan i obično je jednak širini slike plus željeni razmak između slike i teksta.