Žmonės, kurie dirba interneto svetainės dizainas pramonė interneto svetainės kūrimą lygina su trijų kojų išmatomis. Šios trys kojos - trys interneto kūrimo sluoksniai - apima svetainės struktūrą, stilių ir elgesį.
Kodėl turėtumėte atskirti sluoksnius?
Kai kuriate tinklalapį, jo struktūra turėtų būti nukreipta į jūsų HTML, vaizdinius stilius į CSSir scenarijų elgesys. Kai kurie sluoksnių atskyrimo pranašumai yra šie:
- Bendri ištekliai: Kai rašote išorinį CSS arba „JavaScript“ failą, bet kuris svetainės puslapis gali naudoti tą failą. Jei jums reikia pakeisti tą failą, galbūt atnaujinti kai kuriuos tipografinius stilius svetainėje kiekvienas puslapis, kuriame naudojamas tas stilių lapas, pasikeis. Nereikia redaguoti kiekvieno svetainės puslapio atskirai, o tai gali būti varginanti didelė svetainės svetainė.
- Greitesnis atsisiuntimas: Kai klientas pirmą kartą atsisiuntė scenarijų ar stilių suvestinę, jį talpina žiniatinklio naršyklė. Kadangi šie bendri ištekliai dabar yra naršyklės talpykla, kiti puslapiai, kurių prašoma naršyklėje, įkeliami greičiau, o tai pagerina bendrą puslapio greitį ir našumą.
- Kelių asmenų komandos: Jei svetainėje vienu metu dirba daugiau nei vienas žmogus, naudokite versijų valdymo sistemas, leidžiančias tikrinti failus ir įsitikinti, kad visi dirba su naujausias versijas. Šį procesą yra daug sunkiau atlikti, jei stiliai ir elgesys yra susipynę su struktūros dokumentais.
- SEO: Svetainė, kurioje aiškiai atskirtas stilius ir struktūra, greičiausiai bus geresnė paieškos varikliams, nes jie gali efektyviau tikrinti tą turinį ir suprasti puslapį, neįsigilindamas į vizualų stilių ir elgesį informacija.
- Prieinamumas: Išoriniai stiliaus lapai ir scenarijų failai yra labiau prieinami žmonėms ir naršyklėms. Programinė įranga, tokia kaip ekrano skaitytuvai gali lengviau apdoroti struktūros sluoksnio turinį nesusitvarkydamas su stiliais, kurių jie vis tiek negali naudoti.
- Atgalinis suderinamumas: Svetainė, sukurta su atskirais kūrimo sluoksniais, greičiausiai bus suderinama su atgaline, nes naršyklės ir įrenginiai, kuriuose negalima naudoti tam tikrų CSS stilių arba kuriuose išjungta „JavaScript“, vis tiek gali peržiūrėti HTML. Tada galite palaipsniui tobulinti savo svetainę naudodami jas palaikančių naršyklių funkcijas.
HTML: Struktūros sluoksnis
Pagrindinė yra tinklalapio struktūra ar turinio sluoksnis HTML to puslapio kodas. Kaip namo rėmas sukuria tvirtą pagrindą, ant kurio pastatyta likusi namo dalis, tvirtas HTML pagrindas sukuria platformą, ant kurios galima sukurti svetainę.
Struktūros sluoksnis yra tas, kur saugote visą turinį, kurį klientai nori perskaityti ar į kurį žiūrėti. HTML struktūrą gali sudaryti tekstas ir vaizdai, o ji apima hipersaitai kurią lankytojai naudos naršydami svetainėje. Ši informacija užkoduota laikantis standartų HTML5 ir gali apimti tekstą, atvaizdus ir daugialypę terpę (vaizdo, garso ir kt.).
Kiekvienas svetainės turinio aspektas turėtų būti pateiktas struktūros sluoksnyje. Šis atskyrimas leidžia klientams, kuriems išjungta „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 jį apibrėžia CSS (Kaskados stiliaus lapai). Šiuose failuose yra stilistinės instrukcijos, kaip dokumentas turėtų būti rodomas žiniatinklio naršyklėje. Į stiliaus sluoksnį paprastai įeina žiniasklaidos užklausos kurie keičia svetainės vaizdą pagal ekrano dydis ir įrenginys.
Visi svetainės vaizdiniai stiliai turėtų būti išoriniame stilių lape. Galite naudoti kelis stiliaus lapus, tačiau norint jį gauti, kiekvienam CSS failui reikalinga HTTP užklausa, įtakos svetainės našumui.
„JavaScript“: elgesio sluoksnis
Elgesio sluoksnis daro svetainę interaktyvią, leidžiančią puslapiui reaguoti į vartotojo veiksmus arba pasikeisti atsižvelgiant į sąlygų rinkinį. „JavaScript“ yra dažniausiai naudojama elgesio sluoksnio kalba, tačiau CGI ir PHP taip pat naudojami labai dažnai.
Kai kūrėjai nurodo elgesio sluoksnį, dauguma jų reiškia tą sluoksnį, kuris aktyvuojamas tiesiai žiniatinklio naršyklėje. Naudokite šį sluoksnį, norėdami tiesiogiai bendrauti su dokumento objekto modeliu. Rašyti galiojantį HTML turinio sluoksnyje yra svarbus DOM sąveikai elgesio sluoksnyje. Kai kuriate elgsenos sluoksnį, turėtumėte naudoti išorinius scenarijaus failus, kaip ir CSS, kad optimizuotumėte greitį ir našumą.