- blok, tako da bodo zavzeli celotno širino svojega vsebnega bloka - elementa . Stran s takšno oznako bo videti dobro na majhnih zaslonih, na napravah z višjo ločljivostjo pa bo besedilo takšnih strani neprijetno za branje. Zato morate za vsebino dodati oznako vsebnika - vsebino vsakega razdelka:
in zanj nastavite največjo širino, oblazinjenje, ki bo ločilo vsebino od robov zaslona naprav z nizko ločljivostjo, pa tudi zunanje oblazinjenje, ki omogoča, da se vsebnik poravna na sredini nadrejenega bloka:
Vsebnik (širina: 100 %; največja širina: 1024 slikovnih pik; /*največja širina se lahko razlikuje*/ oblazinjenje: 0 15 slikovnih pik; rob: 0 samodejno; )
Tako smo dobili okvir za našo stran (višina razdelkov je v tem primeru virtualna, saj imajo razdelki brez vsebine višino nič).
2. Postavitev glave strani in pozicioniranje njenih elementov
Začnimo označevati prvi del, tako imenovano glavo spletne strani. Element je zasnovan za združevanje uvodnih informacij in navigacijskih pripomočkov na strani/strani. Dodajte notranjo oznako logotip spletnega mesta in navigacijske povezave:
Logo ( float: levo; ) nav ( float: desno; ) nav ul ( rob: 0; oblazinjenje: 0; slog seznama: brez; ) nav li ( prikaz: inline-block; /*en način za poravnavo elementov * /)
Obstaja več načinov za postavitev blokovnih elementov na črto. Vsi so podani v lekciji.
Upoštevajte, da po nanosu ovoja pokrovček ni več. To je zato, ker so plavajoči elementi (ki imajo nastavljeno lastnost float) odstranjeni iz običajnega toka in nadrejeni vsebnik ne vidi več njihove višine, zato element in element v njem z razredom .container se je sesul. Če želite popraviti to situacijo, uporabimo čiščenje toka za element z razredom .container:
Vsebnik:po (vsebina: ""; prikaz: tabela; počisti: oboje; )
Dodali mu bomo tudi navpično oblazinjenje, ki loči elemente v njem od robov glave. Kot rezultat bodo slogi izgledali takole:
Vsebnik (širina: 100 %; največja širina: 1024 slikovnih pik; oblazinjenje: 15 slikovnih pik; rob: 0 samodejno; )
Poglejmo si situacijo, ko slika deluje kot logotip. Lahko ga dodate neposredno v oznako ali kot sliko ozadja. Slika bo imela svojo višino, ki se lahko zelo razlikuje od višine navigacijskega menija, zato se bomo soočili s problemom navpične poravnave elementov glave.
V našem primeru je višina logotipa 38px, zato moramo za poravnavo povezav menija na sredini glave zanje nastaviti ustrezno višino vrstice:
Nav a (besedilna dekoracija: brez; višina vrstice: 38px; ) 7. Poravnajte povezave menija glave
3. Ustvarite mrežo za glavni del strani
Glavni del strani je najpogosteje mreža blokov različnih širin. Pozicioniranje takšnih blokov se izvede tudi s pomočjo lastnosti float. Vsaka vrstica blokov bo zavita z dodatnim blokom z razredom .row:
Za element z razredom .row lahko uporabimo tudi čiščenje toka:
Vsebnik:potem, .vrstica:po (vsebina: ""; prikaz: tabela; počisti: oboje; )
Če želite ločiti vrstice drug od drugega, lahko dodate spodnji rob:
Vrstica (rob-spodaj: 15px;)
Višina mrežnih blokov je določena z višino njihove vsebine, zato je lahko različna:
Višino blokov lahko določite tako, da jo izrecno določite, na primer .row div (height: 100px) . Toda v tem primeru morate biti prepričani, da pri dodajanju prilagodljivosti postavitvi vsebina blokov ne bo presegla roba bloka.
Če morate nastaviti barvo ozadja za bloke vrstic, lahko to storite na naslednji način: za element z razredom .row dodajte nov razred, ki vam bo omogočil oblikovanje samo te vrstice (izkazalo se bo vrstica .row -one), zanj določimo barvo ozadja manjšega bloka, za visok blok pa bomo postavili svojo barvo, torej bomo na ta način naredili substrat ozadja.
Lorem ipsum dolor sit amet.
Duis lobortis tempor tortor vel iaculis. Fusce volutpat commodo lacus, eget vestibulum lorem semper at.
.row-one (ozadje: svetlo modro; ) .col-2-3 (širina: 66,6666666667%; float: levo; ozadje: školjka; ) Če glavni del strani vsebuje samo dva bloka, lahko izpustite dodatno vrstico ovoja:
4. Postavitev noge strani
Noga strani ali noga običajno vsebuje informacije o avtorskih pravicah, dodatne povezave in podobno. Vse te informacije so postavljene tudi v stolpce, ki so lahko enake ali različne širine.
Razlikujte med logičnim označevanjem in predstavitvenim (fizičnim). na primer ležeče besedilo lahko dobite kot z uporabo oznake , in s pomočjo oznake . V prvem primeru je poševni tisk določen izrecno, v drugem pa je na besedilu uporabljen logični poudarek, ki je običajno prikazan v poševnem tisku. Z drugimi besedami, v prvem pristopu jih vodi videz, v drugem pa logični namen. Prednost drugega pristopa je neodvisnost postavitve od vrste uporabljenih naprav in oblikovanja spletnih strani. Če se držite logične postavitve, lahko uporabite isto postavitev za zaslon, tiskanje in dlančnik ter prilagodite videz z ločenimi datotekami slogov.
Postavitev s plastmi Sloji so strukturni elementi, ki jih je mogoče postaviti na spletno stran tako, da jih zložite drug na drugega z natančnostjo slikovnih pik. Skripti vam omogočajo dinamično spreminjanje parametrov plasti. To omogoča ustvarjanje različnih učinkov na strani, kot so spustni meniji, igre, razgrnjene pasice, plavajoča okna in drugo. Do nedavnega so bili okvirji in mize glavna orodja za postavitev. Okvirji zaradi nekaterih svojih težav postajajo preteklost: standard HTML 5 na primer ne vključuje več podpore za okvirje.
Tabele se pogosto uporabljajo v različnih primerih: uporabljajo se za izdelavo okvirjev, nastavitev modularnih mrež, ustvarjanje barvnega ozadja, poravnavo elementov itd.
Takšne tehnike ne le zapletajo razvoj univerzalnih spletnih strani, temveč vodijo tudi do zmanjšanja hitrosti nalaganja dokumenta. Brskalnik mora v tem primeru prenesti elemente, ki uporabniku niso vidni in jih pravzaprav ne potrebuje, so pa vključeni v celoten promet spletnega mesta.
Skladalec
Oblikovalci postavitve se ukvarjajo s postavitvijo spletnih strani. V splošnem primeru naloge oblikovalca postavitve vključujejo:
generiranje kode spletne strani z ustreznim označevalnim jezikom. To so lahko na primer HTML , XHTML , XML .
oblikovanje predhodno ustvarjene kode strani z uporabo vgrajenih orodij za označevalni jezik ali z uporabo kaskadnih slogovnih listov CSS
Vendar pogosto uporablja naslednjo programsko opremo:
urejevalnik besedil ali urejevalnik HTML za pisanje in urejanje kode
grafični program za tako imenovano "rezanje" grafične postavitve, ki ga oblikovalec postavitve prejme od spletnega oblikovalca
In včasih se zatečejo k pomoči:
WYSIWYG urejevalniki, v katerih uporabnik z grafičnim uporabniškim vmesnikom uredi vse elemente, ki naj bi bili generirani z uporabo HTML. Program nato pretvori vizualno predstavo v kodo HTML. V tem primeru avtorju ni treba, da ima izčrpno znanje HTML.
samodejni programi za postavitev spletnega mesta, ki iz oblikovne postavitve, ustvarjene v grafičnem urejevalniku Adobe Photoshop, izvlečejo plasti s slikami in besedilom in iz teh plasti oblikujejo kodo HTML. Tako ustvarite osnovno okostno spletno stran, pripravljeno za nadaljnji razvoj.
Poglej tudi
Opombe
Splet in spletna mesta
globalno
Lokalno
Vrste spletnih mest
Ustvarjanje in
vrste postavitve,
Tehnični
Trženje
Družba in kultura
Pravilna izdelava spletne strani je zapleten večstopenjski proces. Postavitev spletnega mesta je sestavni del procesa razvoja spletne strani. Kaj je postavitev spletnega mesta, je postopek oblikovanja spletne strani po že pripravljeni postavitvi. Ta postopek vključuje kodiranje strani z brskalnikom prijaznim hiperbesedilnim označevalnim jezikom html in oblikovanje s pomočjo kaskadnih slogovnih listov (CSS). Ni vam treba poskušati sami sestaviti spletnega mesta, bolj smiselno je naročiti storitve oblikovalca postavitve. Navsezadnje mora upoštevati številne funkcije, tako pravila postavitve kot parametre za prikaz dokumentov v različnih brskalnikih.
Izdelava spletnega mesta ob upoštevanju osnovnih pravil dobrega okusa
Oblikovanje postavitve in širine strani
Pri razvoju spletnega mesta, da ne bi porušili prvotno zamišljenega dizajna, je treba upoštevati dejstvo, da imajo uporabniki interneta monitorje z različnimi ločljivostmi. V tem primeru obstajata dve možnosti za načrtovalno postavitev mesta: mesto s fiksno širino in tekoče mesto. Širina fiksnega mesta je določena na podlagi dejstva, da po statističnih podatkih večina uporabnikov uporablja monitorje z ločljivostjo 1024x768 slikovnih pik. Zato morate vzeti povprečno širino postavitve približno 800-990 slikovnih pik, da se izognete pojavu vodoravnega drsnega traku in izkrivljanju dizajna. Pomanjkljivost te metode postavitve je neučinkovita uporaba prostega prostora. Gumijasta postavitev spletnega mesta je pridobljena zaradi dejstva, da so merske enote v postavitvi dizajna večinoma odstotki, kar vam omogoča, da raztegnete postavitev na celotno širino okna brskalnika. Postavitev in zasnova postavitve gume sta najbolj zaželena.
Postavitev spletnih mest ob upoštevanju združljivosti med brskalniki
Danes obstaja veliko priljubljenih brskalnikov, ki jih ljudje uporabljajo za brskanje po internetu. Sem spadajo: Internet Explorer, Opera, Mozilla Firefox, Google Chrome, Netscape Navigator, Safari in drugi. Vsak od njih ima več različic in vsak lahko različno prikaže isto stran, upodobljeno v obliki html. Vsi ustvarjalci brskalnikov si prizadevajo doseči enoten standard za uporabo označevalnega jezika hiperbesedila, vendar še vedno obstajajo nesoglasja, zato mora postavitev spletnih mest upoštevati združljivost med brskalniki.
Kompetentna postavitev spletnih mest s čisto kodo
Drugo pravilo dobre oblike pri postavitvi spletnega mesta je čista in lepa koda. Kaj to pomeni? To pomeni, da je html koda oznake strani lepo oblikovana, vsebuje komentarje in poudarjene logične bloke. Uporaba kaskadnih slogovnih listov (CSS) vam bo omogočila, da očistite kodo od nepotrebnih oznak in znatno zmanjšate težo spletnega mesta kot celote. Postavitev spletnih mest z vsemi temi manipulacijami je potrebna za poenostavitev kode, pri popravljanju, spreminjanju in dokončanju pa se bodo soočila z najmanj težavami. Pravilna kompaktna koda bo olajšala indeksiranje spletnega mesta s strani iskalnikov, majhna teža pa bo skrajšala čas nalaganja vašega spletnega mesta.
Tablična in blokovna postavitev spletnih mest
Obstajata dva bistveno različna načina izdelave spletne strani. Prvi način je z mizami. Tabelarna postavitev uporablja označevalne elemente, ki ne ustrezajo semantiki, ki jo nosijo, da bi dosegli zunanje učinke, v kolikor tabele prvotno niso bile namenjene izdelavi okvirja strani, ampak so služile za standardni vnos podatkov. Za postavitev mesta s tabelarno postavitvijo je pogosto potrebno uporabiti veliko ugnezdenih tabel. Ta pristop brskalniku pogosto zelo oteži obdelavo strani, poveča velikost dokumenta in upočasni nalaganje datotek ter lahko povzroči napake v kodi. Z vidika prepričanj o ločevanju vsebine in oblikovanja je bolj priročno in pravilno spletno mesto sestaviti s plastmi (bloki). Blokovna postavitev spletnih mest daje več priložnosti, omogoča, da naredite kodo bolj kompaktno in povečate hitrost nalaganja spletne strani. Z uporabo CSS so lastnosti plasti veliko bolj priročne za nastavitev. S pomočjo plasti postavitve lahko veliko bolj učinkovito razvijete spletno mesto, ki bo pravilno prikazano v brskalnikih.
Postavitev spletne strani je stvar strokovnjakov
Bolje je naročiti spletno mesto pri strokovnjaku. Profesionalno oblikovana spletna stran ima enoten slog in prikazuje vse elemente oblikovalskega koncepta. Ima dobre lastnosti uporabnosti za navigacijo in omogoča tudi neizkušenemu uporabniku enostavno krmarjenje po spletnem mestu. Postavitev mesta včasih upošteva potrebo po določenih delovnih orodjih: zmogljiv računalnik z veliko zalogo RAM-a. In končno, samo strokovnjak z izkušnjami razume zapletenosti obnašanja različnih brskalnikov in pravilno uporablja različne slogovne elemente za natančen prikaz zasnove strani spletnega mesta.
Pogosto se pojavi vprašanje, kaj je postavitev? Preprosto povedano, postavitev je razporeditev sestavnih elementov (besedilo, naslovi, slike, tabele) na strani dokumenta. Postavitev je naslednjih vrst:
knjiga
Časopis in revija
Postavitev spletnega dokumenta
Opis prvih dveh bomo izpustili in šli naravnost na postavitev spletnih strani. Če želite bolje razumeti, kaj je, razmislite o postopku ustvarjanja spletnega mesta. Najprej ustvarijo oblikovno postavitev: narišite vsako stran in vse njene elemente. Posledično dobijo podobo spletnega mesta, vendar je to le "slika".
Nato je treba nastalo postavitev prikazati v brskalniku, tako da vsi elementi "oživijo" in se odzovejo na dejanja uporabnika. Na tej stopnji nastopi oblikovalec postavitve. Z uporabo označevalnega jezika html ustvarja dokumente, ki jih brskalnik razume, in jih prikaže kot znane spletne strani.
Metode postavitve
Pri postavitvi spletnih strani obstajata dva glavna načina:
Tablična postavitev
Postavitev bloka
Tablična postavitev prej je bil glavni. Prednost postavitve z uporabo tabel je enostavna izvedba in skoraj enak prikaz v različnih brskalnikih. Slabosti - zapletena in obsežna struktura, ki včasih poveča količino kode (v primerjavi z blokom). Če želite spremeniti postavitev tabele, morate porabiti veliko časa in truda, da se dolgo časa poglobite v obstoječo strukturo.
Do danes še naprej sestavljajo spletna mesta s tabelarno postavitvijo, vendar so strokovnjaki že zdavnaj prešli na bolj prilagodljiv - blok. Tabelno postavitev priporočamo samo za prikaz tabel.
Postavitev bloka je glavni v okolju spletnega razvoja. V blokovni postavitvi je okvir dokumenta sestavljen iz oznak
. Njegova glavna prednost je koncept pomenske postavitve, torej ločitev vsebine in oblikovanja.
Majhen primer kode:
Tablična postavitev
Koda postavitve bloka
Rezultat je enak:
Tudi pri najpreprostejši postavitvi je razlika v kodi že vidna in ko se elementi povečajo, bo razlika eksponentno rasla.
Programi za postavitev
Če želite narediti preprosto spletno stran, se lahko znebite navadne beležnice. Za bolj zapletene projekte ne morete brez posebnih urejevalnikov html. Poudarijo kodo, kar močno poenostavi postopek postavitve. V profesionalnem okolju se uporabljajo naslednji programi:
Notepad++
Macromedia Dreamweaver
Microsoftova naslovna stran
Coffee Cup HTML urejevalnik
NetBeans
Urejevalnike strani HTML delimo na običajne in vizualne. Z vizualnim urejevalnikom lahko tudi neizkušen uporabnik sestavi stran. Vendar je treba razumeti, da vizualni urejevalnik doda veliko dodatne kode (smeti) in oblikovalcu postavitve prikrajša možnost uporabe prilagodljivosti jezika html za 100%.
Katere težave nastanejo pri postavitvi?
Glavna težava pri postavitvi spletnega mesta ni enak prikaz istega dokumenta v različnih brskalnikih. Ko smo naredili visokokakovostno stran za Firefox, jo je mogoče v Operi prikazati nekoliko drugače in v Internet Explorerju popolnoma razpršiti.
Razlog je v tem, da vsak brskalnik razvijajo različna podjetja in uporablja različne tehnologije in pravila. Poskusi priti do enotnega standarda se že izvajajo, a do končnega rezultata je še daleč.
Pogosto se postavitvi ne posveča ustrezne pozornosti. S tem pristopom se lahko uniči tudi najbolj kreativen dizajn in kompleksna funkcionalnost spletnega mesta. Če vam bodo obiskovalci vašega osebnega bloga oprostili, bo sesuta postavitev korporativne spletne strani ali trgovine resno vplivala na podobo podjetja. Najboljša rešitev je, da delo zaupate strokovnjakom.
Prej je bila na internetu razširjena tabelarna vrsta postavitve, na katero . Vendar je sčasoma ta pristop k ustvarjanju strukture spletnega mesta zastarel in ga je nadomestila blokovna postavitev.
Razlike med blokovno postavitvijo in tabelarno
Če postavitev tabele pomeni, da je vsebina strani znotraj oznake
, potem koncept postavitve blokov temelji na aktivni uporabi univerzalnih oznak
, znotraj katerega je postavljena vsebina, vključno z drugimi oznakami.
Bločna postavitev je brez slabosti tabele - iskalniki jo bolje indeksirajo, njena koda ni tako razpršena in bloki
, ki jih tako radi imenujejo "plasti", so bili prvotno zasnovani kot univerzalni, torej "za vse", medtem ko
je tabela, ki jo je treba uporabiti za prikaz tabelarnih podatkov in nič več.
Edina oprijemljiva pomanjkljivost blokovne postavitve je, da se spletna mesta, narejena na njej, lahko v brskalnikih prikažejo drugače. Da bi se temu izognili, morate narediti postavitev "navzkrižno", torej enako prikazano vsem brskalnikom.
Bistvo postavitve blokov
V grafičnem urejevalniku je ustvarjena postavitev spletnega mesta: označeno je, kje se bo nahajalo katero področje strani (glava, dno, stranska vrstica, glavna vsebina) in koliko prostora bo zavzelo, pripravljene so slike, ozadja.
Vsak del strani je postavljen v svoj blok
: vrh spletnega mesta - v prvem, meni - v drugem, vsebina - v tretjem itd. Vsak blok je napolnjen z vsebino s pomočjo HTML-ja, poleg tega pa je pozicioniran in oblikovan z uporabo oznake CSS.
Končni dokument HTML je niz blokov
z vsebino v notranjosti. Slog je pogosto v ločeni datoteki CSS, ki je povezana s stranjo z oznako
riž. 1. Glavni deli strani