Izgled stranice je proces razvoja strukture HTML dokumenta čiji je rezultat web stranica. Struktura web stranice određena je odgovarajućim HTML oznakama. Oznake - pravougaoni blokovi kontejnera za sadržaj - se ne pojavljuju u prozoru pretraživača. Oni govore pretraživaču o vrsti sadržaja, a pretraživač na osnovu tih informacija prikazuje njihov sadržaj – tekstualne ili medijske datoteke.

Kako kreirati strukturu stranice koristeći blokove (izgled bloka)

1. Kako razbiti izgled vaše stranice na sekcije

Da biste kreirali izgled stranice, potrebno je odabrati glavne odjeljke (odjeljke) dokumenta. Više o elementima sekcije možete pročitati u članku.

Standardna web stranica sadrži sljedeće odjeljke:

Rice. 1. Glavni dijelovi stranice

Nećemo koristiti element jer ga ne podržavaju svi pretraživači.

elementi,

i bazirani su na blokovima, tako da će zauzeti cijelu širinu svog kontejnerskog bloka - elementa. Stranica s ovim izgledom izgledat će dobro na malim ekranima, ali na uređajima visoke rezolucije tekst na takvim stranicama će biti teško čitljiv. Stoga je potrebno dodati oznaku kontejnera za sadržaj - sadržaj svake sekcije:

Rice. 2. Glavni dijelovi stranice sa oznakom kontejnera

i postavite za njega maksimalnu širinu, interni padding, koji će odvojiti sadržaj od ivica ekrana uređaja niske rezolucije, kao i eksterni padding, koji vam omogućava da poravnate kontejner u sredini roditeljskog bloka:

Kontejner ( širina: 100%; maksimalna širina: 1024px; /*maksimalna širina može imati drugačiju vrijednost*/ padding: 0 15px; margina: 0 auto; )

Tako smo dobili okvir za našu stranicu (visina sekcija u ovom slučaju je virtuelna, jer bez sadržaja sekcije imaju nultu visinu).

2. Izgled zaglavlja sajta i pozicioniranje njegovih elemenata

Počnimo označavati prvi dio, takozvano zaglavlje web stranice. Element je dizajniran da grupiše uvodne informacije i navigaciona pomagala na stranici/sajtu. Dodajmo logo stranice i navigacijske veze unutar oznake:

Rice. 3. Zaglavlje web stranice sa dodanim logom i linkovima

Logo ( float: lijevo; ) nav ( float: desno; ) nav ul ( margina: 0; padding: 0; stil liste: nijedan; ) nav li ( display: inline-block; /*jedan način postavljanja elemenata u linija */ )

Postoji nekoliko načina za postavljanje blok elemenata u niz. Svi su dati u lekciji.

Rice. 4. Efekat urušavanja bloka kontejnera

Primijetite da je nakon što smo nanijeli omotač, zaglavlje nestalo. To se dogodilo zato što su plutajući elementi (oni koji imaju postavljeno svojstvo float) uklonjeni iz normalnog toka i roditeljski kontejner više ne vidi njihovu visinu, tako da su i element i element unutar njega sa klasom .container srušeni. Da popravimo ovu situaciju, koristimo čišćenje toka za element s .container klasom:

Kontejner:nakon (sadržaj: ""; prikaz: tabela; brisanje: oba; )

Također ćemo mu dodati vertikalni padding, odvajajući elemente unutar njega od rubova zaglavlja. Kao rezultat toga, stilovi će izgledati ovako:

Kontejner (širina: 100%; maksimalna širina: 1024px; padding: 15px; margina: 0 auto; )

Rice. 5. Čišćenje toka

Razmotrimo situaciju u kojoj slika služi kao logo. Može se dodati direktno unutar oznake ili kao pozadinska slika. Slika će imati svoju visinu, koja može biti veoma različita od visine navigacionog menija, pa ćemo se suočiti sa problemom vertikalnog poravnanja elemenata zaglavlja.

Rice. 6. Logo slika

U našem primjeru, visina logotipa je 38px, tako da da biste poravnali veze menija sa sredinom zaglavlja, morate ih postaviti na odgovarajuću visinu linije:

Nav a (dekoracija teksta: nema; visina linije: 38px; ) Sl. 7. Poravnanje linkova menija zaglavlja

3. Kreirajte mrežu za glavni dio stranice

Glavni dio stranice najčešće je mreža blokova različitih širina. Pozicioniranje takvih blokova se također vrši korištenjem svojstva float. Umotat ćemo svaki red blokova dodatnim blokom sa .row klasom:

Rice. 7. Mreža glavnog dijela stranice.col-1-2 (širina: 50%; float: lijevo; ) .col-1-3 (širina: 33,3333333333%; float: lijevo; ) .col-1-4 ( širina: 25 %; plutajući: lijevo; ) .col-2-3 ( širina: 66.6666666667%; plutajući: lijevo; )

Za element s klasom .row također primjenjujemo čišćenje toka:

Kontejner:posle, .red:posle (sadržaj: ""; prikaz: tabela; brisanje: oba; )

Da odvojite redove jedan od drugog, možete dodati donju marginu:

Red ( margin-bottom: 15px; )

Visina blokova rešetke određena je visinom njihovog sadržaja, tako da može biti različita:

Rice. 8. Različite visine elemenata mreže

Visina blokova se može fiksirati eksplicitnim navođenjem, na primjer, .row div (visina: 100px) . Ali u ovom slučaju, morate biti sigurni da prilikom dodavanja prilagodljivosti rasporedu sadržaj blokova neće proteći dalje od ruba bloka.

Ako trebate postaviti boju pozadine za blokove reda, to se može učiniti na sljedeći način: za element s .row klasom, dodajte novu klasu koja će vam omogućiti da stilizirate samo ovaj red (ispada . red red-jedan), odredite za njega boju pozadine manjeg bloka po visini, a za visoki blok ćemo postaviti svoju boju, odnosno na taj način ćemo napraviti pozadinu.

Lorem ipsum dolor sit amet.

Duis lobortis tempor tortor vel iaculis. Fusce volutpat commodo lacus, eget vestibulum lorem semper at.

Red-one (pozadina: svijetloplava; ) .col-2-3 (širina: 66,6666666667%; plutajući: lijevo; pozadina: školjka; )

Rice. 9. Pozadina mat

Ako glavni dio stranice sadrži samo dva bloka, tada se dodatni red omota ne može dodati:

4. Izgled podnožja stranice

Podnožje stranice, ili podnožje, obično sadrži informacije o autorskim pravima, dodatne veze itd. Sve ove informacije se takođe nalaze u kolonama, koje mogu biti iste ili različite širine.

Mislim da su mnogi od vas već primijetili da trend sada uključuje sve više i više ljepljivih dizajnerskih elemenata koji ostaju vidljivi dok korisnik skroluje stranicu. Po mom mišljenju, ovo je vrlo zgodno, posebno ako je u pitanju navigacija po sajtu. To je upravo primjer koji ćemo učiniti danas. Naučit ćemo kako napraviti animirano zaglavlje web stranice koristeći JQuery i CSS3 sa animacijom.

Kao i obično, ispostavilo se da se ovo radi u minimalnom broju linija koda i vrlo je jednostavno, a u isto vrijeme i vrlo efikasno. Pa, hajde da počnemo sa lekcijom.

Ali prvo bih želio da se zahvalim http://www.webdesignerdepot.com, a sada da počnemo.

Ι

HTML

HTML kod je vrlo, vrlo jednostavan, samo trebamo postaviti oznake za, a zatim između njih napisati sadržaj stranice:

Priloženo zaglavlje stranice

Budući da je ovo najjednostavniji primjer, ovdje smo samo dodali tekst između h1 tagova, ali možete koristiti i slike, ili, na primjer, navigaciju po stranici.

jQuery kod

CSS je danas najbolji način za implementaciju animacija i prijelaza. Dakle, koristićemo minimum skripti, i to samo da bismo definisali pokretanje animacije prilikom pomeranja stranice.

Kada je vrijednost pozicije pomicanja stranice veća od 1, to znači da je korisnik skrolovao po stranici i morate dodati "ljepljivu" klasu u oznaku zaglavlja stranice. Ovako se pokreće i popravlja zaglavlje stranice.

A evo i samog koda:

$(window).scroll(function() ( if ($(this).scrollTop() > 1)( $("header").addClass("sticky"); ) else( $("header").removeClass ("ljepljivo"); ) ));

Važno je napomenuti da njegova upotreba u ovom primjeru nije baš dobra ideja, jer ako je korištenje skripti onemogućeno u pregledniku, onda će zaglavlje stranice jednostavno biti popravljeno i to je to.

CSS

CSS kod će se sastojati od 2 dijela. Prvi kod će biti odgovoran za standardno zaglavlje stranice, koje je na zadanoj poziciji. Drugi kod će biti odgovoran za prikaz zaglavlja kada korisnik skroluje stranicu. Pogledajmo kako izgleda zadani kod:

Header( pozicija: fiksna; širina: 100%; poravnanje teksta: centar; veličina fonta: 72px; visina linije: 108px; visina: 108px; pozadina: #335C7D; boja: #fff; porodica fontova: "PT Sans ", sans-serif; )

Sada zanimljivi dio: kada korisnik skroluje niz stranicu, tada će se primijeniti klasa .sticky, kojoj možemo dati potpuno drugačiji prikaz za koji je sposoban samo CSS. Također ćemo postaviti fiksnu poziciju tako da zaglavlje naše stranice uvijek bude vidljivo.

Koristeći ova CSS pravila u nastavku, želimo smanjiti površinu samog zaglavlja prilikom pomicanja, promijeniti boju i naravno smanjiti font. Evo samog koda:

Header.sticky (veličina fonta: 24px; visina linije: 48px; visina: 48px; pozadina: #efc47D; text-align: lijevo; padding-left: 20px; )

Ovo je najjednostavniji primjer s kojim biste trebali razumjeti suštinu posla. Sve zavisi od dizajna vaše stranice.

Pa, sada dodajmo malo animacije našem prijelazu koristeći. Evo koda:

Prijelaz: sve 0,4s lakoća;

Ι

Zaključak

Nadam se da će ova metoda riješiti mnoga pitanja u vezi s implementacijom zgodne i jednostavne navigacije za web stranicu. Osim toga, ova implementacija je vrlo jednostavna i razumljiva.

Glavna poteškoća s fluidnim rasporedom je osigurati ispravan prikaz na različitim rezolucijama, od visoke do niske. S obzirom da smo širinu sadržaja ograničili na 760 piksela, zaglavnu sliku treba postaviti tako da važniji dio slike stane u ovu veličinu. Na sl. 6.3 pokazuje kako se to radi. Središnji dio širine 760px istaknut je tamnom bojom, a slovo A označava preostale fragmente jednake širine.

Rice. 6.3. Širina kape

Stvarno dodavanje slike u zaglavlje vrši se preko pozadinske slike, koja mora biti poravnata sa središtem elementa.

Zaglavlje (prikaz: blok; /* Za starije pretraživače */ visina: 405px; /* Visina zaglavlja */ pozadina: url(images/header-bg.png) bez ponavljanja središnje dno; )

U idealnom slučaju, slika bi trebala imati veliku širinu od 2000 piksela, tada će pri gotovo svakoj rezoluciji monitora slika prikazati središnji dio, odsijecajući sve što ne stane u prozor. Ali problem je u tome što slika u početku nije tako široka i ne želite crtati crne pruge koje se beskrajno protežu sa strane. Jedno rješenje je omogućiti horizontalno ponavljanje pozadine. Oni sa rezolucijom od 1280 piksela širine ili manje videće jednu sliku, dok će vlasnici širokih monitora moći da se dive nekoliko životinja i suncu na zalasku u isto vreme. Ovdje je važno urediti crtež tako da stane vodoravno sam sa sobom bez spojeva (slika 6.4). Gradijent je skriven radi jasnoće.

Rice. 6.4. Poravnavanje slike horizontalno

Na ovoj slici, lokacija spoja je označena strelicom i razmakom tako da se spoj može vidjeti. Ako pravilno uredite desni i lijevi dio pozadinske slike, ponovit će se horizontalno bez vidljivih spojeva, kao jedan kontinuirani uzorak. Ostaje samo malo ispraviti stil zamjenom vrijednosti no-repeat (bez ponavljanja) sa repeat-x (ponovi horizontalno).

Zaglavlje (prikaz: blok; visina: 405px; pozadina: url(images/header-bg.png) repeat-x središnje dno; )

Rice. 6.5. Pozadinska slika za zaglavlje

U formatu PNG-24, datoteka s pozadinom veličine 1325x405 piksela zauzima oko 32 KB, a u PNG-8 sa paletom od 256 boja, gdje je kvalitet gradijenta nešto lošiji - oko 15 KB. Pozadinu možete podijeliti na dvije komponente - gradijent i sliku i svaku sliku sačuvati u svom formatu, što bi trebalo dovesti do povećanja kvalitete prikaza gradijenta. Međutim, 32 KB za tako veliku sliku nije puno i neki će razmotriti dodatnu optimizaciju „štedeći na utakmicama“. Međutim, nekim ljudima ovaj alternativni pristup kreiranju zaglavlja web stranice može biti koristan i možete ga preskočiti ako želite.

Optimizacija zaglavlja

Budući da se gradijent u zaglavlju ponavlja horizontalno, može se izrezati iz izgleda i postaviti kao pozadinska slika. Na sl. Slika 6.6 prikazuje visoko gradijent od 405 piksela pripremljen za ovu svrhu. PNG-24 format ne iskrivljuje sliku, a dobro komprimira gradijente (konačni volumen je 402 bajta), tako da ga u ovom slučaju svakako trebate koristiti. Dodan je okvir oko slike radi jasnoće.

Rice. 6.6. Crtanje gradijenta (header-gradient.png)

Slika sa siluetom životinja je napravljena na prozirnoj pozadini i visine 198 piksela, nema smisla praviti je cijelom visinom zaglavlja, jer zauzima samo dio. Fragment slike je prikazan na sl. 6.7. Šahovnica označava transparentnost.

Rice. 6.7. Pozadinska slika sa prozirnošću (header-animal.png)

S obzirom da je ova slika sačuvana u formatu PNG-8, koji ima samo jedan nivo transparentnosti, za razliku od 256 nivoa PNG-24 formata, važno je osigurati ispravan preklapanje na pozadinu gradijenta. Da biste to učinili, prilikom spremanja u Photoshopu, morate odrediti boju rubova (mat) blizu srednjeg dijela gradijenta, gdje je prekrivena silueta. Ovo je otprilike boja #9de1f0. U ovom slučaju neće biti prljavih obrisa oko drveća i životinja, a slika će se, kada se postavi na gradijent, percipirati kao jedinstvena cjelina.

Pripremljene su dvije slike za pozadinu zaglavlja, pišemo HTML kod.

I stil za header-bg element i sloj.

Zaglavlje (pozadina: #00b0d8 url(images/header-gradient.png) repeat-x; ) .header-bg (pozadina: url(images/header-animal.png) repeat-x središnje dno; visina: 405px; )

Kao rezultat toga, ispostavilo se da je veličina datoteke 12,5 KB, što je čak i manje od očekivanog.

Naziv stranice

Naslov je napisan na oblaku sa pernatim rubovima, što bi trebalo otežati primjenu na gradijent. Postoje dva načina da ih zaobiđete.

1. Koristite PNG-24 format uz održavanje transparentnosti.
2. Sačuvajte sliku u GIF ili PNG-8 formatu sa fragmentom gradijenta, a zatim preklopite sliku na gradijent tako da podudaranje bude tačno u pikselu.

Očigledno, druga metoda ima niz nedostataka - slika se ne može pomjeriti ni za par piksela, vezana je za gradijent, a ako se promijeni njen gradijent, slika će se morati promijeniti. Dakle, čuvamo zaglavlje u PNG-24 formatu. HTML kod će ostati isti, ali će stilovi biti prošireni.

Zaglavlje (pozadina: #00b0d8 url(images/header-gradient.png) repeat-x; ) .header-bg (pozadina: url(images/header-animal.png) repeat-x središnje dno; visina: 405px; /* Visina zaglavlja */ text-align: centar; /* Poravnanje po sredini */ ) .header-bg img ( pozicija: relativna; /* Relativno pozicioniranje */ vrh: 40px; /* Pomeranje slike nadole */ )

Poravnanje po sredini se vrši putem svojstva text-align dodanog roditelju oznake , i pomaknite se prema dolje kroz gornje svojstvo. Da bi ovo svojstvo radilo, morate postaviti relativno pozicioniranje za sliku koristeći svojstvo položaja sa vrijednošću relativno.

Na glavnoj stranici sajta slika sa naslovom se prikazuje kao i obično, a na ostalim stranicama služi kao link na glavnu stranicu. Da biste to učinili, samo malo promijenite kod:

/y vrijednost atributa href ukazuje na početnu stranicu i radi samo na web serveru, a ne lokalno.

Konačni kod za zaglavlje prikazan je u primjeru 6.14.

Primjer 6.14. Zaglavlje stranice

HTML5 CSS 2.1 IE Cr Op Sa Fx

Kako uhvatiti lava u pustinji?

Često, naizgled jednostavni zadaci izgleda zahtijevaju složenu HTML strukturu označavanja i korištenje CSS trikova. Centriranje elemenata ili poravnavanje sadržaja može biti vrlo zamorno. Jedan takav zadatak je poravnavanje elemenata na vrhu stranice tako da se logo nalazi na lijevoj strani, a stavke menija na desnoj strani. Možete koristiti float i position:apsolute, a za vertikalno poravnanje možete dodati margine i padding različitim elementima. Čini se da nije ništa komplikovano. Ali ako se stranica mora ispravno prikazati na mobilnim uređajima, nastaju mnogi problemi.

Ispod je sažet način rješavanja ovog problema.

HTML oznaka je što je moguće jednostavnija:

Super Bad

First Link Second Link Third Link

Visina zaglavlja je fiksna, dodajte text-align: justify, za podređene elemente:

Zaglavlje (poravnanje teksta: justify; razmak između slova: 1px; visina: 8em; padding: 2em 10%; pozadina: #2c3e50; boja: #fff; )

Dodati prikaz: inline-block za sve elemente nav tako da ih možete poredati jednu za drugom:

Zaglavlje h1, navigacija zaglavlja (prikaz: inline-block; )

Za atribuciju text-align: justify radili onako kako želimo, moramo upotrijebiti mali trik s pseudo-elementima, koji je pronađen u članku Savršeno opravdana CSS grid tehnika korištenjem inline-block-a, autora Jelmera de Maata:

Header::after (sadržaj: ""; prikaz: inline-block; širina: 100%; )

Rezultat je bilo horizontalno poravnanje, bez korištenja float I pozicija:apsolutna. Sada morate poravnati elemente okomito. Koristeći vertikalno poravnanje za elemente nav postojaće zavisnost od visine roditeljskog bloka - zaglavlja. A ovo nije baš tačno. Primjeri korištenja vertical-align: top i vertical-align: middle na jsbin. Ispod je možda najprikladnija metoda za vertikalno poravnanje.

Koristimo ponovo pseudo elemente. koristeći primjer iz članka Centring in the Unknown, koji spominje Michał Czernow:

Zaglavlje h1 (visina: 100%; ) zaglavlje h1::before (sadržaj: ""; prikaz: inline-block; vertikalno poravnanje: sredina; visina: 100%; )
Rezultat je ono što vam treba:

Preostala su dva problema za rješavanje: ispravan prikaz kada postoji velika količina teksta u zaglavlju i prilagodljivost. Ako je naslov stranice predugačak, izgled će početi kliziti:

Koristeći trik s pseudoelementima header:

CSS kod

zaglavlje (poravnanje teksta: justify; visina: 15em; padding: 2em 5%; pozadina: #2c3e50; boja: #fff; ) header::after ( sadržaj: ""; prikaz: inline-block; širina: 100%; ) zaglavlje > div, zaglavlje nav, zaglavlje div h1 (prikaz: inline-blok; okomito poravnanje: sredina; ) zaglavlje > div (širina: 50%; visina: 100%; poravnanje teksta: lijevo; ) zaglavlje > div: :before (sadržaj: ""; prikaz: inline-block; vertikalno poravnanje: sredina; visina: 100%; )

Izgleda mnogo bolje:

Sada pređimo na prilagodljivost. Postoji nekoliko načina za rješavanje ovog problema; jednostavno ne možete postaviti visinu zaglavlja, a svi unutrašnji elementi će biti prilagodljivi visini. Ovo neće zahtijevati drugi trik sa pseudo-elementima, živi primjer na jsbin-u.

CSS kod

zaglavlje ( text-align: justify; padding: 2em 5%; pozadina: #2c3e50; boja: #fff; ) header::after ( sadržaj: ""; prikaz: inline-block; širina: 100%; ) zaglavlje h1, navigacija zaglavlja (prikaz: umetnuti blok; vertikalno poravnanje: sredina; ) zaglavlje h1 (širina: 50%; poravnanje teksta: lijevo; padding-top: 0,5em; ) navigacija zaglavlja ( padding-top: 1em; )

Ako trebate postaviti visinu zaglavlja, morat ćete upotrijebiti drugi trik s pseudo-elementima i dodati medijski upit za ekrane različitih veličina:

@media ekran i (max-width: 820px)( header (visina: auto; ) header > div, header >

Rezultat je prilagodljiv i izgleda ovako na mobilnim uređajima:

U primjeru se koristi 820px radi jasnoće; na živoj stranici vrijednost bi naravno trebala biti drugačija, u skladu sa zahtjevima. Da biste podržali Internet Explorer 8, morate koristiti “:” za pseudoelemente umjesto “::”.

Konačni CSS kod

@import url(http://fonts.googleapis.com/css?family=Lato:400,700italic); * ( padding: 0; margina: 0; ) tijelo ( pozadina: #1abc9c; font-family: "Lato", sans-serif; text-transform: velika slova; razmak između slova: 1px;) zaglavlje ( text-align: justify ; visina: 8em; padding: 2em 5%; pozadina: #2c3e50; boja: #fff; ) header::after (sadržaj: ""; prikaz: inline-block; širina: 100%; ) header > div, header > div::pre, zaglavlje nav, zaglavlje > div h1 (prikaz: umetnuti blok; okomito poravnanje: sredina; poravnanje teksta: lijevo; ) zaglavlje > div (visina: 100%; ) zaglavlje > div::prije ( sadržaj : ""; visina: 100%; ) zaglavlje > div h1 (veličina fonta: 3em; stil fonta: kurziv; ) zaglavlje nav a ( padding: 0 0.6em; razmak: nowrap; ) nav zaglavlja a: posljednji -dijete ( padding-desno: 0; ) @medijski ekran i (maks. širina: 720px)( zaglavlje (visina: auto; ) zaglavlje > div, zaglavlje > div h1, zaglavlje nav (visina: auto; širina: auto; prikaz : blok; poravnanje teksta: centar; ) )

rezultat:

Zdravo svima. Danas sam pogledao statistiku upita za pretraživanje po kojima ljudi idu na blog i otkrio da postoji nekoliko koji uopće nisu relevantni. Ne, ne blog, već članci.

Jedan od njih kako popraviti zaglavlje stranice? Odmah sam odlučio da ispravim situaciju i napišem članak, jer je tema relevantna i ima pitanja u ovoj oblasti.

Općenito, postoji nekoliko načina za pomicanje po stranici. Možete koristiti javascript, ali ja nisam baš jak u ovoj temi i tek je učim. Stoga ćemo se za sada zadovoljiti CSS-om. Nazdravlje, popravite zaglavlje stranice(i to ne samo šešir, već bilo koji drugi element), možete to učiniti sa "malo krvi" :)

Zapravo, način popravljanja elementa prilikom pomicanja stranice je vrlo jednostavan, a iznenadit ćete se koliko se ovaj problem lako rješava.

Popravljanje zaglavlja prilikom pomeranja stranice

Da biste popravili zaglavlje, morat ćete kreirati dva bloka. Jedan - da biste mogli centrirati kapu. I u njemu je dijete, koje će biti snimljeno. Počnimo...

Ovo je tako jednostavna html struktura! Sada dodajmo stilove!

#headerMain ( width:920px; visina: 195px; margin:0px auto; z-index:0; ) #header ( width:920px; visina: 195px; background: url(../img/bg-header.jpg) ne -ponavljanje; pozicija: fiksna; z-indeks: 9999; )

Sada će zaglavlje biti fiksirano na vrhu ekrana i neće se pomicati prilikom pomicanja.

U ovom članku ćemo pogledati kako napraviti zaglavlje stranice i postaviti naslov i opis stranice na njega.

Prije svega, potrebna vam je slika za zaglavlje stranice. Najbolje je to uraditi u Photoshopu.

A za one koji ne posjeduju ovaj uređivač, predlažem najlakši način, u Paintu, koji je po defaultu dostupan na svim Windowsima.

Napravimo širinu slike 900px, širinu stranice, a visinu - 200px. Naravno, možete imati svoje dimenzije, sve dok širina slike odgovara širini stranice (omata), visina je po vašem nahođenju

Čim je slika spremna i stavljena u mapu slika, uzmite onu kreiranu na prethodnoj stranici i nastavite s instalacijom zaglavlja na stranicu.

U biraču #header uklonite visinu koja je određena za njega i odredite širinu i visinu snimljene slike.

#header (
širina: 900px; - širina
visina: 200px; - visina
boja pozadine : #25B33f ; - pozadina
margin-bottom: 10px; - donja uvlaka
}

Zatim ubacujemo samu sliku.

#header (
širina: 900px;
visina: 200px;
boja pozadine : #25B33f ;
margin-bottom: 10px;
background-image : url(images/i8.png) - slika
}

Svojstvo background-color je naznačeno u slučaju da se slika iznenada, u pretraživaču bilo kojeg posjetitelja, ne prikaže.

Ako je slika postavljena sa bilo kojim pomakom, a vi je trebate ispraviti, svojstvo se dodaje ovdje

Sada je vrijeme za naslov i opis stranice. Da bismo to učinili, pišemo div blok sa identifikatorom id="header" u body tag, a u njemu se nalaze dva naslova h1 i h3, u koje ubacujemo naziv stranice i njen opis

Hajde da vidimo šta možemo da uradimo.

Sada, pogledajmo naslov i opis. Za njih kreiramo dva selektora i specificiramo sljedeća svojstva:

Za h3 ćemo postaviti širinu na 200 piksela tako da se ne proteže preko cijele slike. Uvlakama se može manipulirati ovisno o tome gdje će u zaglavlju biti zgodnije smjestiti tekst.

Da vidimo rezultat.

Po mom mišljenju, veoma je sladak.

Hajde da sumiramo kod za ovu stranicu.

Есть ещё один вариант вставки картинки в шапку сайта. Можно вставить адрес картинки в блок