Tie, kurie dirba interneto dizaino industrijoje, linkę sukurti interneto svetainių kūrimą į trikampį išmatą. Šios trys kojos - trys interneto svetainių kūrimo sluoksniai - apima struktūrą, stilių ir elgseną.
Kodėl turėtumėte atskirti sluoksnius?
Kai kuriate tinklalapį, jo struktūra turi būti nukreipta į jūsų HTML, vizualinius stiliaus elementus į CSS ir elgesį su scenarijais. Kai kurie sluoksnių atskyrimo privalumai:
- Pasidalinti ištekliais: Kai rašote išorinį CSS arba "JavaScript" failą, bet kuris svetainės puslapis gali naudoti tą failą. Jei norite pakeisti tą failą, galbūt atnaujinti kai kuriuos tipografijos stilius svetainėje, kiekvienas puslapis, kuriame naudojama tokia stiliaus lentelė, pakeis. Nebūtina kiekvieną svetainės puslapį redaguoti atskirai, o tai gali būti gana didelė svetainė.
- Greitesnis atsisiuntimas: Kai klientas pirmą kartą atsisiųsti scenarijų ar stilių, jis yra talpykloje žiniatinklio naršyklėje. Kadangi šie bendrai naudojami ištekliai dabar yra naršyklės talpykloje, kiti naršyklėje užpildyti puslapiai įkeliami greičiau, o tai pagerina puslapio greitį ir našumą.
- Daugialypės komandos: Jei vienu metu svetainėje dirba daugiau nei vienas asmuo, galite naudoti sistemas, leidžiančias patikrinti failus ir iš jų, kad užtikrintų, jog visi dirba su naujausiomis versijomis. Tai daug sunkiau padaryti, jei stiliai ir elgsena yra susipynę su struktūros dokumentais.
- SEO: Svetainė, aiškiai atskirianti stilių ir struktūrą, greičiausiai pagerins paieškos sistemas, nes jie gali veiksmingiau nuskaityti šį turinį ir suprasti puslapį, neapsiribdydami vizualiu stiliumi ir elgesio informacija.
- Prieinamumas: Išoriniai stilius ir scenarijų failai yra labiau prieinami žmonėms ir naršyklėms. Programinė įranga, pvz., Ekrano skaitytuvai, gali lengviau apdoroti turinį iš struktūros sluoksnio, neatsižvelgiant į stilių, kuriuos jie bet kuriuo atveju negali naudoti.
- Atgalinis suderinamumas: Svetainė, kuri yra sukurta su atskirais plėtros sluoksniais, greičiausiai bus atgaliniu būdu suderinama, nes naršyklės ir įrenginiai, kurie negali naudoti tam tikrų CSS stilių arba kurie išjungiami JavaScript, vis tiek gali peržiūrėti HTML. Tada galite palaipsniui didinti savo svetainę naudodamiesi juos palaikančiomis naršyklėmis.
HTML: struktūros sluoksnis
Tinklalapio struktūra arba turinio sluoksnis yra pagrindinis to puslapio HTML kodas. Kaip namo rėmas sukuria tvirtą pagrindą, ant kurio pastatytas likęs namas, tvirtas HTML pagrindas sukuria platformą, kuria galima sukurti svetainę.
Struktūrinis sluoksnis yra kur saugomas visas turinys, kurį klientai nori perskaityti ar pažvelgti. HTML struktūra gali būti sudaryta iš teksto ir atvaizdų, ir ji apima nuorodas, kurias lankytojai naudosis naršyti po svetainę. Tai yra koduota standarto HTML5 ir gali apimti tekstą, atvaizdus ir daugialypės terpės (vaizdo, garso ir tt).
Kiekvienas svetainės turinio aspektas turėtų būti pateiktas struktūros sluoksnyje. Tai leidžia klientams, kuriems išjungtas "JavaScript" arba kurie negali peržiūrėti CSS prieigos prie visos svetainės, jei ne visos jos funkcijos.
CSS: stilių sluoksnis
Šis sluoksnis nurodo, kaip struktūrizuotas HTML dokumentas atrodys svetainės lankytojams ir yra apibrėžtas CSS (kaskadinio stiliaus lapai). Šie failai turi stilistines instrukcijas, kaip dokumentas turėtų būti rodomas žiniatinklio naršyklėje. Stilius paprastai apima žiniasklaidos užklausas, kurios keičia svetainės rodymą, atsižvelgiant į ekrano dydį ir įrenginį.
Visi svetainės vizualiniai stiliai turi būti išorinėje lentelėje stilių. Galite naudoti kelias stilių lenteles, bet nepamirškite, kad kiekvienam CSS failui reikia HTTP užklausos, kad gautumėte jį, tai turi įtakos svetainės našumui.
"JavaScript": elgesio sluoksnis
Elgesio sluoksnis daro svetainę interaktyvia, leidžiančia puslapiui atsakyti į naudotojo veiksmus arba keistis atsižvelgiant į sąlygų rinkinį. "JavaScript" yra dažniausiai vartojama elgsenos sluoksnio kalba, tačiau labai dažnai naudojama ir CGI ir PHP.
Kai kūrėjai nurodo elgesio sluoksnį, dauguma jų reiškia sluoksnį, kuris aktyvuojamas tiesiai žiniatinklio naršyklėje. Jūs naudojate šį sluoksnį tiesiogiai bendrauti su DOM (Document Object Model). Tinkamo lygio HTML rašymas turinio sluoksnyje yra svarbus DOM sąveikoms elgsenos sluoksnyje. Kai sukursite elgesio slenkstį, turėtumėte naudoti išorinius scenarijų failus, kaip ir CSS, kad optimizuotumėte greitį ir našumą.
