Web stranice također imaju svoj kostur. Ali beskorisno je pitati doktore o njegovim karakteristikama. A ni veterinari nisu upoznati sa strukturom lokacije. Za ovo znaju samo dizajneri izgleda. Od njih ovisi struktura kostura budućeg resursa. A glavni način stvaranja kostiju njegovog skeleta je raspored blokova.
Izgled web stranice je zanat za inicirane
Postoji nešto misteriozno u izgledu stranice. Ali to je sve dok bolje ne upoznate ovaj zanat. Počinjemo našu posvećenost:
Sljedeća faza u razvoju stranice nakon kreiranja njenog izgleda je izgled. Zadatak dizajnera izgleda je da prenese kostur buduće stranice u virtualni svijet koristeći html kod i css tabele. Jednostavno rečeno, prenesite dimenzije i proporcije resursa u oblik koji je razumljiv pretraživaču.
U procesu layouta sa html kodom, "kostur" sajta se razlaže na delove. I koristeći css ( kaskadni listovi stilova) postavlja veličinu svojih "kosti", boju i lokaciju.
Postoji nekoliko tipova rasporeda:
I. Tabelarni - nekada je bio glavni tip izgleda. U izgledu tabele, oznaka se koristi za postavljanje strukture sajta
i njegove podređene oznake. Raspored pomoću tabela omogućava vam da rasporedite sve elemente dizajna na najproporcionalniji način jedan prema drugom. Ali u isto vrijeme, ovaj kod se ispostavlja previše obimnim:
Takođe, glavni nedostaci koda tabele uključuju njegovo dugo vreme učitavanja i loše indeksiranje sadržaja od strane pretraživača.
Sadržaj stranice zasnovane na tabeli neće biti prikazan dok se svi podaci ne učitaju. Blok raspored vam omogućava da prikažete svaki učitani element zasebno.
Loše indeksiranje stranica tabele je zbog velikih praznina između blokova teksta koji se nalaze u različitim ćelijama tabele.
Sada se tabelarni verst rijetko koristi kao glavna metoda za kreiranje web lokacija. Sada se koristi samo za strukturiranje tabelarnih podataka i lokaciju grafičkih slika.
II. Blok - trenutno glavni način rasporeda. Za razliku od tabelarnog rasporeda blokova, on ima niz prednosti:
Odvajanje stilova elemenata od html koda;
Mogućnost preklapanja jednog sloja na drugi - ova sposobnost uvelike olakšava pozicioniranje elemenata.
Bolje indeksiranje od strane pretraživača;
Velika brzina učitavanja stranice koja se sastoji od međusobno nezavisnih elemenata;
Glavni nedostatak rasporeda blokova je određeni " dvosmislenost»Razumijevanje njegovog koda od strane različitih pretraživača. Zbog toga se html stranice često moraju "oplemeniti" upotrebom posebnih hakova.
Sa pojavom blok rasporeda, rođen je koncept kao što je "kompatibilnost među pretraživačima". Zbog razlike u prikazu istog elementa u različitim pretraživačima, dizajneri izgleda moraju umetnuti cijele komade koda (hakove) u glavni html.
Hak je visoko specijalizovan i rešava problem netačnog prikaza samo u jednom pretraživaču.
Glavni element koji se koristi u blok rasporedu je oznaka
... Odjeljak koda odvojen ovom oznakom naziva se sloj. Sve odluke o stilu su premještene izvan granica html koda u kaskadne tablice stilova. Pristupa im se preko ID-ova ili css klasa:
Kako funkcionira raspored blokova?
Prije pokretanja izgleda, gotovi psd izgled stranice se u grafičkom editoru izrezuje na blokove (slojeve). Izrezane pozadinske slike stavljaju se u zasebnu mapu, koja će biti priložena posebno za svaki sloj:
Na primjer, uzmimo ovaj izgled web stranice, kreiran u Photoshopu. Prvo, u uređivaču teksta, koristeći div, postavljamo strukturu budućeg resursa i svakom sloju dodjeljujemo vlastiti id selektor. Ispada sljedeća struktura:
Zatim na gotovu strukturu stranice u html-u sa linijom priložite css fajl. Zatim mu dodajemo opis stila svakog sloja, pozicioniranje u odnosu na druge elemente i njegove dimenzije.
Više o svim css svojstvima možete saznati iz tehničke dokumentacije za jezik.
Ovako izgleda naš primjer rasporeda web mjesta zasnovanog na blokovima u prozoru pretraživača.
Ova lekcija se preporučuje onima koji tek počinju da savladavaju mudrost kreiranja sajtova. Sadrži osnovni koncepti O HTML i CSS... Slijedeći upute u ovoj lekciji korak po korak, kreirat ćete predložak za svoju web stranicu za nekoliko minuta.
Napravit ćemo predložak web stranice koristeći blok raspored, koristim oznaku - " DIV».
Korak 1 - Označavanje web stranice pomoću HTML oznaka
Prije svega, moramo označiti našu web stranicu pomoću HTML oznaka. Tek nakon toga možete nastaviti s dizajnom stranice pomoću kaskadnih CSS stilova.
Html- to jezik za označavanje hiperteksta... To stvara struktura web stranice. U ove svrhe se koriste HTML oznake. One su date u zagradama"<" и ">".
Oznake, u pravilu, slijede u paru - otvaranje i zatvaranje. Potonji se razlikuje po tome što ima "/" iza prve zagrade. (Na primjer:
). Uz pomoć tagova definišete šta će se pojaviti na vašoj web stranici.
Kaskadni listovi stilovaCSS primijenjen kasnije. Oni su neophodni kako bi se sadržaj tagova smjestio na određena mjesta na stranici, kao i da bi se ovom sadržaju dao željeni izgled.
Najjednostavniji tagovi web stranice su:
Nakon toga, nalazi se između oznaka postavit ćete druge oznake za označavanje elemenata web stranice.
Važna oznaka za strukturiranje stranice je oznaka
... Koristeći ga, možete podijeliti svoju stranicu na blokove.
Unutar ove oznake možete postaviti druge HTML oznake koje su vam potrebne za kreiranje sadržaja vaše stranice (linkovi, tekst, slike, itd.). Svi ovi elementi će kasnije biti stilizovani pomoću CSS kaskadnih listova stilova.
Sada, koristeći grafički uređivač (Photoshop na primjer), nacrtajte blokove naše web stranice:
HTML kod za ovu stranicu će izgledati ispod. Ovo je primjer korištenja oznake div:
Kao što vidite, svaka oznaka div dali smo određeni ID selektor... To jest, dali smo svakom zasebnom bloku naše stranice vlastito ime. Ovo je neophodno kako bismo kasnije, stiliziranjem blokova u CSS datoteci, mogli razlikovati jedan blok od drugog.
Postoje dvije vrste selektori. ID- koristi se za jedinstvene blokove, koji se ne ponavljaju nigdje drugdje na stranici. Dok je selektor CLASS- koristi se za označavanje blokova koji se ponavljaju.
Takođe, zatvorili smo sve blokove unutar bloka " kontejner". Ovo se radi kako bismo kasnije mogli postaviti cijelu našu stranicu kako želimo.
Korak 2 - pričvršćivanje CSS stilova
Kao što je već spomenuto, CSS stilska tablica definira dizajn elemenata web stranice. Možete ga postaviti ili u svoj html dokument ili priložiti eksterni fajl. U ovom vodiču ćemo koristiti potonju opciju.
Ako ste već otvorili svoju web stranicu u pretraživaču, tamo nećete pronaći ništa. To je zato što svoje blokove niste ispunili nikakvim sadržajem, niti ste im dali bilo kakav oblik ili boju. Možete dodati sadržaj za blokove između odgovarajućih oznaka. Ali mi ćemo postaviti oblik, lokaciju, boju i druge vanjske manifestacije blokova koristeći CSS datoteku.
Ali prvo ga morate kreirati. Nazovimo ga style.css i smjestimo ga u isti folder kao i html dokument. Nakon toga, u html datoteci dodajte sljedeći red između oznaka:
Na ovaj način povezujemo dva fajla zajedno. Sada, kada prikazuje web stranicu, pretraživač će koristiti odgovarajuću tablicu stilova.
Korak 3 - postavite stil
CSS sintaksa se sastoji od selektora, svojstva i vrijednosti. Selektor je oznaka za koju želite da definišete izgled dajući joj različita svojstva. Svojstvo se postavlja pomoću različitih atributa, koji zauzvrat mogu poprimiti različite vrijednosti.
Za pisanje selektora osim oznake tijelo, koriste se znakovi " #
"bilo" .
". dolaze ispred imena selektora. Prvi se koristi za označavanje selektorID, drugi, odnosno na selektorCLASS... Selektor može imati bilo koji broj svojstava. Koje su zatvorene u vitičaste zagrade " {}
".
#selektor (
svojstvo: vrijednost;
svojstvo: vrijednost;
svojstvo: vrijednost;
}
.selektor (
svojstvo: vrijednost;
svojstvo: vrijednost;
svojstvo: vrijednost;
}
Imamo sljedeće selektore:
tijelo kontejner header navigacija meni sadržaja footer
CSS svojstva i moguće vrijednosti:
Pozadina (pozadini) može se odrediti slikom ili bojom, ili oboje u isto vrijeme. Da biste prikazali sliku, morate registrirati putanju do nje. Ako je pozadina postavljena na boju, tada se koristi heksadecimalni sistem (#ffffff za bijelu, itd.).
Svojstvo boje koristi se za definiranje boje teksta.
font-family - ovo svojstvo definira porodicu fontova s kojom će se tekst prikazati. U pravilu se određuju tri vrste fontova odjednom. Stoga, ako pretraživač nije bio u mogućnosti da prikaže prvi, ima mnogo toga da bira (Trebuchet MS, Arial, Times New Roman).
veličina slova- veličina teksta, postavljena u različitim sistemima mjerenja, ovdje ćemo koristiti piksele.
margina- definira lokaciju bloka. U ovom slučaju, i prozor pretraživača i granice drugih elemenata web stranice mogu djelovati kao referentna tačka. Pošto želimo da našu stranicu postavimo u sredinu prozora pretraživača, za ovo svojstvo ćemo napisati sledeće vrednosti: 0px auto 0px auto. Unos bi mogao izgledati jednostavnije 0px auto. Odbrojavanje u slučaju postavljanja ovih vrijednosti ide u smjeru kazaljke na satu: gore - desno - dolje - lijevo. Budući da se gornje - dolje, desno - lijevo poklapamo, nema potrebe da ih duplirate.
širina- širina bloka.
visina- visina.
float je svojstvo koje nam omogućava da elemente selektora pozicioniramo prvenstveno lijevo ili desno.
Sada dodajmo neki kod u naš style.css fajl (već ste ga kreirali, zar ne?):
tijelo ( pozadina: # f3f2f3; boja: # 000000; porodica fontova: Trebuchet MS, Arial, Times New Roman; veličina fonta: 12px; }
U vrijeme pisanja ovog teksta, nisu svi pretraživači ispravno prikazali generiranu web stranicu. Da biste uklonili ovaj nedostatak, možete koristiti dodatni blok, koji treba postaviti odmah iza bloka. sadržaja.
Evo njegovog HTML koda:
#clear ( jasno: oba; }
I između oznaka glava zapišite koje kodiranje pretraživač treba da koristi ako iznenada pokušate dodati ruski tekst u svoje blokove:
Konačni HTML kod:
Osnove HTML-a i CSS-a
Zaglavlje stranice
Navigaciona jedinica
Meni
Sadržaj
tijelo (
pozadina: # f3f2f3;
boja: # 000000;
porodica fontova: Trebuchet MS, Arial, Times New Roman;
veličina fonta: 12px;
}
#kontejner (
pozadina: #FFFFFF;
margina: 30px auto;
širina: 900px;
visina: 1000px;
}
#header (
pozadina: # 838283;
visina: 200px;
širina: 900px;
}
#navigacija (
pozadina: # a2a2a2;
širina: 900px;
visina: 20px;
}
#meni (
pozadina: # 333333;
float: lijevo;
širina: 200px;
visina: 600px;
}
#content (
pozadina: # d2d0d2;
float: desno;
širina: 700px;
visina: 600px;
}
#clear (
jasno: oba;
}
#footer (
pozadina: # 838283;
visina: 180px;
širina: 900px;
}
Nadamo se da vam je ovaj vodič pomogao da shvatite osnove rada sa HTML-om i CSS-om.
Ovako to izgleda u pretraživaču:
Layout počinje svoj put od dana kada je kod napisan u HTML-u, a označavanje je vršeno pomoću tabela. Vremenom smo se udaljili od ovoga i prebacili oznake na CSS. Sada postoji nekoliko tipova rasporeda. Flex-box, Bootstrap toolbox i najnoviji Grid, koji daju veliku moć kreatorima, mogu se smatrati modernim. Jedna od prijelaznih opcija u razvoju Weba je blok raspored. Ranije se koristio za kreiranje oznaka za cijelu stranicu, sada se smatra zastarjelim, ali ipak nalazi široku upotrebu u posebnim slučajevima.
Šta je raspored blokova?
Zamijenio je zastarjeli i nesavršeni tabelarni. Stranica se sastoji od takozvanih slojeva ili blokova, a završna oznaka služi kao gradivni blok za to.
... To je blok oznaka koja se proteže cijelom širinom roditeljskog elementa i visinom kako bi odgovarala sadržaju. Kasnije je ovo slaganje nazvano "čudesno". Osnova za orijentaciju stranice su takozvane klase.
Trenutno je ovaj tip izgleda značajno zastario, a sam tag
treba koristiti samo za predviđenu svrhu. Postoji mnogo semantički ispravnih oznaka koje olakšavaju navigaciju kroz kod. Na primjer, postoji posebna oznaka za navigacijski meni
