Prvi tekst

Drugi tekst

U ovom postu ću vam reći, kao i obično postavite pozadinu stranice koristeći HTML kod.

Pokazat ću vam i odličnu inostranu uslugu za odabir besprijekornih pozadina.
Sada su podešavanja sajta lakša i praktičnija putem CMS konzola kao što je WordPress.
Ponekad je potrebno promijeniti šablone prodajnih stranica, a ovaj članak će vam pomoći u tome.

Ako ne znaš šta je HTML, onda se može općenito nazvati jezikom web-mjesta ili skupom pravila po kojima se web stranice generiraju.

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

Postavlja jednobojnu boju pozadine stranice.

Da bi se instalirao jednobojna pozadina, potrebno je označiti dodati atribut bgcolor.

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

< body bgcolor = "#ffcc00" >

Možete zalijepiti ovaj kod u tekstualnu datoteku i spremiti ga sa ekstenzijom .html. Zatim otvorite bilo kojim pretraživačem i pogledajte rezultat.

Kao što ste mogli pretpostaviti, boja pozadine dolazi iz koda boje u atributu bgcolor="value" koje možete pronaći klikom na ovaj link.

Postavljanje slike na pozadinu HTML stranice.

Da bi postavite pozadinsku sliku, možete koristiti atribut pozadini u oznaci .

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

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

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

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

Da biste saznali prethodni put, potrebno je da na stranici sa slikom kliknete desnim tasterom miša na sliku i kliknete na "Kopiraj URL slike". na ovaj način ćete vidjeti naziv slike/pozadine. Tada možete jednostavno zamijeniti staru sliku svojom, koristeći isti naziv datoteke.

Ovo su bile osnove za postavljanje. pozadina u html-u, sada najzanimljivije. 🙂

Moderni pretraživači vam omogućavaju da elementu dodate proizvoljan broj pozadinskih slika, navodeći parametre svake pozadine odvojene zarezima. Dovoljno je koristiti svojstvo univerzalne pozadine i navesti jednu pozadinu za nju prvo, a drugu odvojenu zarezom.

Kako rastegnuti pozadinu na punu širinu prozora?

Svojstvo background-size je namijenjeno za skaliranje pozadine, 100% je navedeno kao njegova vrijednost, tada će pozadina zauzeti cijelu širinu prozora pretraživača. Za starije pretraživače treba koristiti specifična svojstva prefiksa, kao što je prikazano u primjeru 1.

Kako dodati pozadinsku sliku na web stranicu?

Da biste dodali pozadinsku sliku na web stranicu, navedite putanju do slike unutar url vrijednosti svojstva pozadine stila, koja se zauzvrat dodaje selektoru tijela.

Da li je moguće napraviti animiranu pozadinu?

Animacija je dovoljno moćna tehnika koja može oživjeti svaki dokument, pa ne čudi ogromnu popularnost Flash tehnologija koja na web stranice, osim interaktivnih, dodaje i crtane filmove. GIF grafički format također podržava najjednostavniju animaciju kroz sekvencijalne promjene kadrova. Dakle, koristeći sliku u ovom formatu, dozvoljeno je animirati ne samo pojedinačne slike, već i pozadinu web stranice ili određenog elementa.

Prvo morate napraviti animiranu sliku u GIF formatu, za koju možete koristiti Adobe Photoshop ili drugi odgovarajući program 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 postaviti pozadinu u donjem desnom uglu stranice?

Za kontrolu položaja pozadinske slike na stranici koristi se svojstvo stila background-position, koje istovremeno postavlja horizontalne i vertikalne koordinate slike. Da biste zaustavili ponavljanje pozadinske slike, koristite svojstvo background-position sa vrijednošću no-repeat .

Kako učiniti da se pozadina ne ponavlja?

Podrazumevano, pozadinska slika se ponavlja vodoravno i okomito, popločavajući cijelo polje web stranice. Međutim, ovakvo ponašanje pozadine nije uvijek potrebno, posebno u slučaju jedne slike, tako da vrijednost bez ponavljanja dodana svojstvu stila pozadine dolazi u pomoć.

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

Ponavljanje u pozadini obično je potrebno za stvaranje ukrasnih linija ili preliva vezanih za visinu elementa ili prozora na web stranici. U takvim slučajevima, vertikalno ponavljanje pozadine daje čvrstu sliku bez obzira na veličinu elemenata. Samo u početku treba voditi računa da se pozadinska slika ponavlja bez spojeva.

Zdravo! Vaš ponizni sluga je u kontaktu s vama s dijelom korisnog i praktičnog materijala o tome kako postaviti pozadinu za web lokaciju. Ovo je sam početak u html izgledu, a ovdje ću na primjeru jasno demonstrirati kako možete napraviti prekrasnu pozadinu za web stranicu koja će sigurno privući korisnika interneta i dodati originalnost.

Ako ste primijetili, većina internet kompanija koristi jedinstvenu pozadinu na svojim stranicama za prodaju i registraciju. Danas ćemo analizirati tehničku komponentu ovog procesa.

Dakle, za početak, potrebna nam je, naravno, slika. Postoji jedna jako dobra stranica na stranom internetu gdje možete preuzeti razne pozadinske slike web stranice. Samo ih je ogroman broj. Stranica se zove Subtle Patterns.

Prvo se prikazuje na listi Google pretraživača, pa ga preporučujem u svom radu. Također možete pronaći veliki broj drugih web lokacija ako u tražilicu unesete fraze kao što su "obrasci pozadinske slike", "preuzmite pozadinsku sliku za web lokaciju" i tako dalje.

Ko nema problema sa engleskim, onda će razumeti bez poteškoća.

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

Evo kako to izgleda u maloj verziji na sajtu

Prvo kreirajte novi dokument u programu

I obavezno ga sačuvajte pod imenom prije nego što ga uredite, na primjer index.html i kreirajte folder na svom računaru, na primjer, možete kreirati folder "My site" i u njega smjestiti naš indeksni fajl (index.html). Bolje je kreirati folder na engleskom kako pretraživač ne bi zbunio i neispravno prikazati stranicu.

Osim toga, u glavnom folderu "moja stranica" trebate kreirati 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 stavite tu datoteku style.css

Sada možemo raditi na našem dokumentu. Sljedeći korak je umetanje praznog html koda, takozvanog glavnog okvira od kojeg sve počinje. Možete ga direktno preuzeti. Zatim kopirajte sve iz ove datoteke i prenesite u naš programski fajl. Krajnji rezultat bi trebao biti nešto poput sljedećeg

Pored naziva datoteke primijetit ćete crvenu disketu. Dakle, ako je crvena, onda datoteka nije sačuvana, obavezno kliknite na dugme sačuvaj tako da disketa postane plava.

U oznaci naslova možete promijeniti naziv dokumenta, na primjer, možete napraviti "Moja prva web stranica". I provjerite je li vaša stranica sačuvana u kodiranju UTF-8

U suprotnom, ako postoji neko drugo kodiranje, na primjer windows-1251, tada će se tekst dokumenta u pretraživaču prikazati u hijeroglifima. Kodiranje možete promijeniti u odjeljku "Kodiranja - Kodiranje u Utf-8 (bez BOM)" na traci sa alatkama programa.

I ne zaboravite da sačuvate svaku našu akciju.

Sada krenimo da kreiramo 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 koje se nazivaju CSS, odnosno napravit ćemo okvir u html-u, a pomoću CSS-a ćemo ga dovesti do lijepog stila i izgleda .

Tako ćete se naviknuti na ispravan redoslijed radnji. Nije potrebno baviti se stilovima direktno u html dokumentu, bolje ih je izvaditi u poseban dokument.

Da bismo to uradili, u našem programu Notepad ++ kreiraćemo drugu datoteku i nazvati je Style.css i sačuvati je u novoj css fascikli, koja će se nalaziti u deljenoj fascikli „Moja stranica“.

Fino! Da bi naš pretraživač ispravno prikazao stranicu, moramo uključiti stilski list u naš html dokument. Evo kako se to radi

Direktno unesite cijeli red iznad. Uz ovu liniju uključujemo naš stilski list.
Sada ćemo definirati pozadinsku sliku za našu oznaku tijela kroz stilski list. Da bismo to učinili, kreiramo sljedeću strukturu u style.css dokumentu (također je uzimate direktno i upisujete u 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 //(repliciranje vodoravno i okomito) REPEAT-X // (rastezanje samo vodoravno) PONAVLJANJE-Y //(razvlačenje samo okomito) NO-REPEAT //(nemojte ponavljati pozadinsku sliku)

U našem slučaju, mi repliciramo našu malu sliku i vertikalno i horizontalno. Kao rezultat, cijela stranica je ispunjena našom slikom. Evo kako to izgleda u pretraživaču:

Takođe, posebno za vas, napravio sam izbor sajtova na kojima možete preuzeti prelepu pozadinu za sajt

Vlad Merzhevich

Zbog specifičnosti web stranica, pozadinske slike zauzimaju značajnu ulogu u rasporedu dokumenata web stranice. Istovremeno, oni su aktivno uključeni u razne aktivnosti, na primjer, automatiziranje procesa pričvršćivanja slika na tekst, kreiranje prijelaza gradijenta i, naravno, dodavanje pozadine ispod sadržaja. Slijede neki aspekti korištenja pozadinskih slika.

Pozadina na web stranici

Postavljanje pozadinske slike na web stranici se tradicionalno vrši preko pozadinskog atributa oznake . Takav obrazac se ponavlja horizontalno i okomito, ispunjavajući na taj način cijeli prozor pretraživača. Jasno je da ovde nema posebnih opcija za kreativnost, pa hajde da se okrenemo stilovima i vidimo šta možemo da uradimo sa CSS-om.

U CSS-u postoji pet atributa koji kontrolišu pozadinsku sliku: njeno umetanje, položaj i ponavljanje. Međutim, svi ovi parametri su zamijenjeni jednim univerzalnim svojstvom background i koristit ćemo ga u budućnosti.

Dodavanje pozadinske slike

Dodavanje slike se vrši postavljanjem adrese slike preko ključne riječi url. Argumenti bez ponavljanja (bez ponavljanja), repeat-x (horizontalno ponavljanje) i repeat-y (vertikalno ponavljanje) se koriste za kontrolu načina na koji se slika ponavlja. Ovo rezultira web stranicom prikazanom na sl. jedan.

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

Primjer 1. Pozadinska slika

U ovom primjeru, grafički target.gif je definiran kao pozadina web stranice bez ponavljanja slike. Kako bi se spriječilo da slika bude pripijena uz rubove pretraživača, pomaknuta je 30 piksela udesno i 20 piksela dolje od prvobitne pozicije.

ponavljanje šablona

Uz mogućnost postavljanja pozadinske slike da se ponavlja horizontalno ili okomito, dostupno je nekoliko opcija dizajna web stranice. Na primjer, da biste napravili vertikalnu traku duž lijeve ivice (slika 2), potrebna vam je slika prikazana na sl. 3.

Crtež treba da bude takav da stane okomito bez vidljivih šavova, a da čini jedinstvenu celinu sa navedenom bojom pozadine web stranice. Primjer 2 pokazuje kako se kreira takva pozadinska slika, opet koristeći svojstvo pozadine i njegovu vrijednost repeat-y.

Primjer 2: Ponovite pozadinu okomito

Slično, možete ponoviti pozadinu horizontalno, na primjer, kreiranjem 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 zavisi od namjene dokumenta i predviđene visine sadržaja web stranice. Također, 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 na kraju će usporiti prikaz pozadine. Za ovaj slučaj je sasvim prikladna slika veličine 30x200 piksela (slika 5).

Primjer 3 prikazuje HTML kod za kreiranje gradijenta pozadine.

Primjer 3: Horizontalno ponavljanje pozadine

Uzorak gradijenta 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 pozadinsko univerzalno svojstvo, koje se primjenjuje na željeni selektor. Kao vrijednost navedite putanju do slike i, kako se ne bi ponavljala, argument bez ponavljanja (primjer 4).

Primjer 4: Dodavanje slike

header

Glavni tekst

Kao što je prikazano u ovom primjeru, slika se može pomicati vodoravno i okomito od prvobitne pozicije, po defaultu je to gornji lijevi kut elementa bloka. Pomeranje pozadine vam omogućava da postavite sliku u odnosu na tekst na željeni način. Da biste spriječili da se tekst preklapa sa slikom, obavezno dodajte svojstvo padding-left, zbog čega se tekst pomiče udesno za određenu udaljenost. On je u svakom slučaju individualan i obično je jednak širini slike plus željeni razmak između slike i teksta.