U prošlom članku jesmo okvir našeg HTML predložak, koji je spreman za popunjavanje i registraciju. Danas ću ti reći kako napraviti lijepo zaglavlje web stranice(gornji dio) i jednostavan jelovnik. Danas ćemo također unijeti neke promjene u stilove drugih blokova.
Dakle, što imamo na ovaj trenutak? Sada imamo ove stilove:
Postavio sam fiksnu širinu - širinu bloka, veličine 1024 piksela, sam blok poravnao prema sredini, a tekst u njemu ulijevo koristeći text-align: left. Blok možemo poravnati prema sredini koristeći stil margine, postavljajući gornju i donju marginu na 0, a širinu na auto. Nažalost, to ne funkcionira uvijek u Internet Explorer 6, pa sam u tijelu napisao text-align: center; i zato sam morao poravnati tekst u bloku za omatanje i podnožje ulijevo. Također sam naveo margin:0 u tijelu, čime sam postavio margine od rubova na 0 piksela. Kao rezultat toga, Body je završio sa sljedećim stilovima:
Html, tijelo (visina:100%; boja: #000; pozadina: #FFFFFF; prelom riječi: break-word; veličina fonta: 12px; obitelj fonta: Verdana, Arial, Sans-Serif; margina: 0; tekst - poravnaj: sredina; )
Ovdje je sve slično bloku omotača: postavite širinu na 1024px, poravnajte blok u sredini i poravnajte tekst ulijevo. Također sam dodao margin-top u spremnik: margin-top: 20px; i uklonili minimalnu širinu, budući da imamo fiksnu širinu omotanja.
Pa, pripremili smo predložak, vrijeme je da prijeđemo na zaglavlje stranice. Stilovi će biti ovakvi:
Visina bloka je 140px, pozadina je bijela, a margina od gornjeg ruba je 40 piksela. To su sve promjene u stilovima zaglavlja. Što? Ovo je sve? I postoji cijeli članak nazvan po ovome? Naravno da ne. Zaglavlje stranice sastojat će se od ostalih elemenata: logotipa i izbornika, koji će biti posebno dizajnirani.
Registrirajmo se HTML kod predloška Unutar bloka zaglavlja nalazi se ovaj redak: Ovo je u biti poveznica na početna stranica bez teksta, ali mu je dodijeljena klasa class="logo". Sada ga trebate stilizirati u css stilovima.
Napravio sam blok elementa, dao mu širinu i visinu, a također sam napravio sliku logotipa kao pozadinu koju sam stavio u direktorij slika. Sve slike predložaka nalazit će se u ovom direktoriju. Veličina slike je 388*100 piksela, pa zašto je veličina bloka malo drugačija? Napravio sam visinu od 104 piksela tako da između budućeg izbornika i loga na dnu ostane razmak od slike loga, a širinu sam uzeo dva piksela više za svaki slučaj, jer sam se par puta susreo da je Mozilla krivo odredila veličinu slike i malo je izrezao. To je to, gotovi smo s logotipom. Izbornik u
Od autora: Dobrodošli na naš blog o izradi web stranica. Svako mjesto ima nešto što ga obično čini nezaboravnim i što ga izdvaja od ostalih. Obično je ovo zaglavlje stranice. CSS vam omogućuje da ga napravite onako kako želite.
Zaglavlje web stranice - kakvo je
Nevjerojatno je koliko toga danas može ovisiti samo o dizajnu web izvora. Ali što posebno odvaja web izvor od ostalih? U pravilu, ovo je zaglavlje web mjesta s logotipom tvrtke i jedinstvenim dizajnom. Obično se tako ljudi sjećaju neke vrste internetskog projekta. Ovo je jako dobro zapamćeno u narodnom sjećanju.
Na primjer, ako vidite bijelo slovo "B" na plavoj pozadini, vjerojatno ćete odmah zaključiti da je to ikona društvena mreža U kontaktu s. I svi odmah asociraju sliku goluba pismonoše na Twitter. Sve je to postalo moguće jer su te stranice imale upravo takve slike u zaglavljima i ljudi su ih jako dobro zapamtili.
U redu, to je bila misao, a sad prijeđimo ravno na tehnički dio.
Kako možete dizajnirati zaglavlje web stranice u CSS-u?
Općenito, šeširi su različiti. Ovisno o širini, mogu se podijeliti u dvije skupine: one postavljene u sredini i one koje se protežu cijelom širinom web stranice.
Ranije se zaglavlje izrađivalo na isti način kao i svaki drugi blok - dana je uobičajena oznaka div potrebni identifikator, nakon čega su u nju upali svi potrebni sadržaji, a potom je sve to formalizirano. Danas je već uobičajeno pisati na drugačiji način. Pojavio se posebno za izradu zaglavlja web stranice u HTML5 uparena oznaka- Zaglavlje Potiče se njegova upotreba, omogućuje preglednicima da razumiju što je ovaj dio predloška i čemu služi. Usput, ako želite naučiti osnove HTML5, onda imate izravan put do našeg, gdje možete gledati lekcije o ovoj tehnologiji.
Stoga, da biste stvorili jednostavno zaglavlje, samo napišite sljedeći kod u html:
<
header
>
<
/
header
>
Naravno, na stranici se još ništa neće pojaviti - još joj trebamo dodati sadržaj i dizajnirati je. No, recimo, napravimo blok koji se proteže cijelom širinom ekrana i još ga malo ukrasimo.
Općenito, ako je sve učinjeno ispravno, bloku treba dati neku vrstu klase ili čak identifikator (budući da je ovo važan element web stranice), ali za sada ćemo element jednostavno zvati oznakom.
Svojstvo width: 100% omogućuje da se naš blok rasteže do pune širine, bez obzira na veličinu zaslona. Ako pak dimenzije treba na neki način ograničiti, upotrijebite dodatno svojstvo max-width, gdje je apsolutna veličina zapisana u pikselima, nakon čijeg dostizanja se spremnik više neće širiti.
Sada imamo samo traku ispred sebe, obojenu u odabranu boju. Visina obično nije navedena - određuje se automatski na temelju elemenata koji će biti u zaglavlju.
<
div
id
=
"wrap"
>
<
header
>
<
/
header
>
<
/
div
>
Na taj način će naš vrh stranice biti točno u sredini. Ostaje ga samo napuniti.
Riža. 1. Za sada je ovo samo spremnik u koji će biti sav sadržaj.
Što se obično nalazi u šeširu?
Tamo se obično umeću logotip, naziv i opis stranice. Možda ih također ima Podaci za kontakt, navigacija stranicama ili čak oglašavanje.
Logotip se obično umeće kao pozadinska slika. Recimo, na primjer, ovo:
Da biste to učinili, samo dodajte neka pravila u pozadinu:
pozadina: #D8E3AB url(logo.png) bez ponavljanja 5% 50%;
pozadina: #D8E3AB url(logo.png) bez ponavljanja 5% 50%;
Odnosno, osim pune boje, dajemo i pozadinsku sliku (u našem slučaju logo.png) i prvo je stavljam u isti folder u kojem je style file. Zabranjujemo ponavljanje logotipa i određujemo njegov položaj u bloku - lagano ga pomaknite ulijevo i okomito u sredini.
Dodajmo malo sadržaja u zaglavlje. Na primjer, zaglavlje i izbornik.
Dizajniranje elemenata zaglavlja web stranice s CSS stilovima
Pozdrav dragi posjetitelju!
Danas ćemo pomoću CSS stilova dizajnirati postojeće elemente zaglavlja: favicon, naslov naziva stranice, ključnu frazu i na taj način predstaviti izgled zaglavlja web stranice u skladu s izgledom dizajna.
S obzirom na to da je namjena CSS stilovi treba temeljiti na izgledu dizajna, tada će se dosta pažnje posvetiti dobivanju potrebnih podataka pomoću grafičkog uređivača.
U skladu s izgledom web stranice, zaglavlje je podijeljeno na dva glavna dijela. Prvo je područje u kojem se nalazi favicon, naslov naziva stranice i ključna fraza, a koji su kombinirani elementom
s razredom "hdr-naslov". Drugi dio je izbornik koji oblikuje element
