Miks kõik veebisaidid on ehitatud koos struktuuri, stiili ja käitumisega
Üldine analoogia, mida kasutatakse esiotsa veebisaidi arendamiseks, on see, et see on nagu 3-jalaga väljaheide. Need 3 jalad, mida tuntakse ka kui kolme kihti veebiarendust, on struktuur, stiil ja käitumine.
Veebiarenduse kolm kihti
- Struktuur või sisu kiht
- Veebilehe struktuur või sisu kiht on selle lehe aluseks olev HTML-kood. Nagu maja raamistik loob tugeva aluse, millele ülejäänud maja on ehitatud, loob ka HTML tugeva aluse platvorm, millele saab luua veebisaidi. HTML-struktuur võib koosneda tekstist või piltidest ja see sisaldab hüperlingi, mida külastajad selle veebisaidi navigeerimiseks kasutavad.
- Stiili või esituskiht
- Stiili- või esitluskiht määrab, kuidas struktureeritud HTML-dokument kuvatakse saidi külastajatele. See kiht on määratud CSS-iga (Cascading Style Sheets). Need failid sisaldavad stiile, mis näitavad, kuidas seda dokumenti veebibrauseris kuvada. Tänapäeva veebis võib stiilikiht sisaldada ka meediumipäringuid, mis võivad muuta saidi kuva erinevate ekraanisuuruste ja seadmete alusel .
- Käitumine
- Käitumise kiht on veebisaidi kiht, mis vastab erinevatele kasutajatele mõeldud toimingutele või muudab lehte sõltuvalt tingimuste komplektist. Enamiku veebisaitide puhul on käitumise tase lehel JavaScript- interaktsioon.
Miks peaksite kihid eraldama?
Veebilehe loomise korral on soovitav, et kihid oleksid võimalikult eraldatud. Struktuur peab olema konfidentsiaalne teie HTML-ile, visuaalsed stiile CSS-ile ja kõikide skriptide käitumist, mida see sait kasutab.
Mõned kihtide eraldamise eelised on:
- Jagatud ressursid
- Kui kirjutad välist CSS-faili või JavaScripti faili, saate seda faili kasutada mis tahes teie veebisaidi lehel. Kui peate selle faili muutma, võib-olla värskendada mõnda tüpograafilist stiili veebisaidil, muutub see iga leht, kus seda stiililaiti kasutatakse. Veebilehe iga lehekülge eraldi muuta ei pea, mistõttu suuremale saidile võiks olla kohutav ettevõtmine.
- Kiirem allalaadimine
- Kui teie klient on esimest korda alla laadinud skripti või laaditabeli, on veebibrauser vahemällu vahemällu salvestanud. Kuna need jagatud ressursid on nüüd vahemällu, laaditakse brauseris palutud muud lehed kiiremini, mis parandab lehe üldist kiirust ja jõudlust.
- Mitmekülalised meeskonnad
- Kui teil on veebisaidil korraga töötanud rohkem kui üks inimene, saate kasutada süsteeme, mis võimaldavad faile registreerida ja kontrollida, et kõik meeskond töötaks nende failide uusimate versioonidega. Seda on palju keerulisem teha, kui stiilid ja käitumine on struktuuride dokumente omavahel põimunud.
- SEO
- Veebileht, millel on stiili ja struktuuri selge eraldamine, tõenäoliselt hakkab otsingumootorites paremini toimima, sest need saidid saavad selle sisu paremini indekseerida ja lehte mõista, ilma et see oleks visuaalse stiili või käitumisega seotud teavet.
- Juurdepääsetavus
- Välised stiililehed ja skriptifailid on inimestele ja brauseritele juurdepääsetavad. Kuna selline stiili ja struktuuri eraldamine on selline, nagu ekraanilugejad, saab kergemini töödelda struktuurkihist pärinevat sisu ilma, et need ei satuks stiile, mida nad ikkagi kasutada ei saa.
- Tagasiulatuv ühilduvus
- Kui teil on arenduskattega kujundatud sait, on see rohkem tagasiühilduv, kuna brauserid või seade, mis ei saa kasutada teatud CSS-i stiile või millel võib olla keelatud JavaScript, võivad HTML-i endiselt vaadata. Seejärel saab veebisaiti järk-järgult täiustada neid toetavate brauseritega.
HTML - Struktuurkiht
Konstruktsioonikiht on see, kus salvestate kogu sisu, mida teie kliendid soovivad lugeda või vaadata. See kodeeritakse standarditele vastava HTML5-ga ja see võib sisaldada nii teksti kui ka pilte ning multimeedium (video, heli jne). Oluline on veenduda, et struktuuri kihis on esindatud teie saidi sisu kõik aspektid. See võimaldab kõigil klientidel, kellel on JavaScript välja lülitatud või kes ei saa CSS-i vaadata, et neil on kogu veebisaiti veel juurdepääs, kui mitte kõik selle saidi funktsioonid.
CSS - stiilide kiht
Sa loovad oma veebisaidile kõik oma visuaalsed stiilid välisel stiililehel. Võite kasutada mitut stiililaiti, kuid pidage meeles, et iga eraldi CSS-fail nõuab HTTT-i päringut, mis mõjutab saidi jõudlust.
JavaScript - käitumise kiht
JavaScript on käitumise kihi jaoks kõige sagedamini kasutatav keel, kuid nagu ma varem mainisin, võib ka CGI ja PHP luua veebilehe käitumise. Sellest võib öelda, et kui enamik arendajaid viitab käitumismallile, tähendab see seda kihti, mis aktiveeritakse otse veebibrauseris - nii et JavaScript on peaaegu alati valitud keel. Seda kihti kasutate otse DOM-i või dokumendiobjekti mudeli abil. Sisukihis kehtiva HTML-i kirjutamine on oluline ka käitumiskilbi DOM-i interaktsioonide jaoks.
Kui loote käitumismustrisse, peaksite kasutama väliseid skriptifaile, nagu ka CSS-i puhul. Te saate kasutada väliseid stiililehti kasutades kõiki eeliseid.