Inimesed, kes töötavad veebidisain tööstus võrdleb esiotsa veebisaidi väljatöötamist kolme jalaga väljaheitega. Need kolm osa - veebiarenduse kolm kihti - hõlmavad saidi struktuuri, stiili ja käitumist.
Miks peaksite kihid lahutama?
Veebilehe loomisel tuleks selle struktuur viia HTML-i, visuaalsed stiilid CSS-ija skriptide käitumine. Mõned kihtide eraldamise eelised on:
- Jagatud ressursid: Kui kirjutate välise CSS- või JavaScripti faili, võib seda faili kasutada mis tahes saidi leht. Kui peate selles failis muudatusi tegema, võib-olla ka värskendage mõnda tüpograafilist stiili veebisaidil saavad muudatused kõik lehed, mis seda stiililehte kasutavad. Pole vaja muuta kõiki veebisaidi lehti eraldi, mis võib olla suure veebisaidi jaoks kurnav ettevõtmine.
- Kiirem allalaadimine: Kui klient on skripti või stiililehe esimest korda alla laadinud, salvestab see veebibrauser vahemällu. Kuna need jagatud ressursid on nüüd brauseri vahemälu, laaditakse teisi brauseris nõutavaid lehti kiiremini, mis parandab lehe üldist kiirust ja jõudlust.
- Mitme inimese meeskonnad: Kui teil töötab veebisaidil korraga rohkem kui üks inimene, kasutage versioonikontrollisüsteeme, mis võimaldavad faile sisse ja välja kontrollida, et kõik töötaksid uusimad versioonid. Seda protsessi on palju raskem teha, kui stiilid ja käitumine on põimitud struktuuridokumentidega.
- SEO: Sait, mis näitab stiili ja struktuuri selget eraldamist, toimib otsingumootorite jaoks tõenäoliselt paremini, kuna need oskab seda sisu tõhusamalt roomata ja lehte mõista, ilma et jääksite visuaalsesse stiili ja käitumisse takerdumata teavet.
- Juurdepääsetavus: Välised stiililehed ja skriptifailid on inimestele ja brauseritele paremini ligipääsetavad. Tarkvara nagu ekraanilugejad suudab struktuurikihi sisu lihtsamalt töödelda, tegemata stiili, mida nad niikuinii kasutada ei saa.
- Tagasiühilduvus: Sait, mis on kavandatud eraldi arenduskihtidega, on tõenäoliselt tagasiühilduv, kuna brauserid ja seadmed, mis ei saa kasutada teatud CSS-i stiile või millel on JavaScripti keelatud, saavad siiski vaadata HTML. Seejärel saate oma veebisaiti järk-järgult täiendada neid toetavate brauserite funktsioonidega.
HTML: Struktuurikiht
Veebilehe struktuur või sisukiht on aluseks HTML selle lehe kood. Nii nagu maja raam loob tugeva aluse, millele ülejäänud maja ehitatakse, loob HTML-i kindel alus platvormi, millele saab veebisaidi luua.
Struktuurikiht on koht, kuhu salvestate kogu sisu, mida teie kliendid soovivad lugeda või vaadata. HTML-struktuur võib koosneda tekstist ja piltidest ning see sisaldab hüperlingid mida külastajad kasutavad veebisaidil navigeerimiseks. See teave on kodeeritud standarditele vastavaks HTML5 ja see võib sisaldada teksti, pilte ja multimeediat (video, heli jne).
Saidi sisu kõik aspektid peaksid olema struktuurikihil esindatud. See eraldamine võimaldab klientidel, kellel on JavaScripti välja lülitatud või kes ei saa CSS-i vaadata, juurdepääs kogu veebisaidile, kui mitte kogu selle funktsioonile.
CSS: stiilikiht
See kiht dikteerib, kuidas struktureeritud HTML-dokument saidi külastajatele välja näeb, ja selle määratleb CSS (Kaskaadiga stiililehed). Need failid sisaldavad stiililisi juhiseid, kuidas dokumenti veebibrauseris kuvada. Stiilikiht sisaldab tavaliselt meediapäringud mis muudavad saidi kuvamist selle põhjal ekraani suurus ja seade.
Kõik veebisaidi visuaalsed stiilid peaksid asuma välises stiililehes. Võite kasutada mitut stiililehte, kuid iga CSS-faili toomiseks on vaja HTTP-päringut, mõjutavad saidi toimivust.
JavaScript: käitumiskiht
Käitumiskiht muudab veebisaidi interaktiivseks, võimaldades lehel reageerida kasutaja toimingutele või muuta tingimuste alusel. JavaScripti keel on käitumiskihi jaoks kõige sagedamini kasutatav keel, kuid CGI ja PHP kasutatakse ka väga sageli.
Kui arendajad viitavad käitumiskihile, tähendab enamik neist kihti, mis aktiveeritakse otse veebibrauseris. Selle kihi abil saate otse dokumendi objektimudeliga suhelda. Kehtiva HTML-i kirjutamine sisukihis on käitumiskihi DOM-i interaktsioonide jaoks oluline. Käitumiskihi loomisel peaksite kiiruse ja jõudluse optimeerimiseks kasutama väliseid skriptifaile, nagu ka CSS-i puhul.