Kodėl visos svetainės yra pastatytos struktūros, stiliaus ir elgesio deriniu
Bendra analogija, naudojama siekiant apibūdinti interneto svetainių kūrimą, yra tokia, kad ji yra kaip trijų kojų taburetė. Šios 3 kojos, kurios taip pat žinomos kaip 3 svetainių kūrimo sluoksniai, yra Struktūra, Stilius ir Elgesys.
Trys interneto kūrimo sluoksniai
- Struktūra arba turinio 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, taip pat tvirtas HTML pagrindas sukuria platformą, kuria galima sukurti svetainę. HTML struktūra gali būti sudaryta iš teksto ar vaizdų, ir ji apima nuorodas, kurias lankytojai naudos naršydami aplink tą tinklalapį.
- Stilius arba pateikimo sluoksnis
- Stilius ar pateikimo lygis nurodo, kaip struktūrizuotas HTML dokumentas atrodys svetainės lankytojams. Šis sluoksnis apibrėžiamas CSS (kaskadinio stiliaus lapai). Šiuose failuose yra stilių, nurodančių, kaip dokumentas turėtų būti rodomas žiniatinklio naršyklėje. Šiandienos žiniatinklyje stiliaus sluoksnis taip pat gali apimti žiniasklaidos užklausas, kurios gali keisti svetainės vaizdą, atsižvelgiant į skirtingus ekrano dydžius ir įrenginius .
- Elgesys
- Elgesio sluoksnis - tai tinklalapio sluoksnis, kuris gali reaguoti į skirtingus naudotojo veiksmus arba keisti puslapius, atsižvelgiant į sąlygų rinkinį. Daugumoje tinklalapių elgesio lygis būtų " JavaScript" sąveika puslapyje.
Kodėl turėtumėte atskirti sluoksnius?
Kai kuriate tinklalapį, pageidautina, kad sluoksniai būtų kuo labiau atskirti. Struktūra turi būti susieta su jūsų HTML, vizualiniais stiliais su CSS ir elgesiu su bet kokiais scenarijais, kuriuos naudoja svetainė.
Kai kurie sluoksnių atskyrimo privalumai:
- Pasidalinti ištekliais
- Kai rašote išorinį CSS failą arba "JavaScript" failą, galite naudoti tą failą bet kuriame jūsų svetainės puslapyje. 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 didesniame tinklalapyje tai gali būti varginanti įmonė.
- Greitesnis parsisiuntimas
- Kai scenarijus arba stilių lapą pirmą kartą buvo atsisiųstas jūsų kliento, jis yra išsaugotas talpykloje žiniatinklio naršyklėje. Kadangi šie bendri ištekliai dabar yra talpykloje, kiti naršyklėje užpildyti puslapiai įkeliami greičiau, o tai pagerina puslapio greitį ir našumą.
- Daugiafunkcinės komandos
- Jei vienu metu dirbate daugiau nei vienam asmeniui, dirbančiam tinklalapyje, galite naudoti sistemas, skirtas "patikrinti" ir "patikrinti" failus, kad užtikrintų, jog visi komanda dirba su naujausiomis šių failų 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 šios svetainės gali veiksmingiau nuskaityti šį turinį ir suprasti puslapį, neapsiribdamos vizualiu stiliumi ar elgesio informacija.
- Prieinamumas
- Išoriniai stilius ir scenarijų failai yra labiau prieinami žmonėms ir naršyklėms. Kadangi yra stiliaus ir struktūros atskyrimas, programinė įranga, pvz., Ekrano skaitytuvai, gali lengviau apdoroti turinį iš struktūros sluoksnio, neapsiribojant stiliais, kuriuos jie vis tiek negalėtų naudoti.
- Atgalinis suderinamumas
- Jei turite svetainę, kuri suprojektuota kartu su kūrimo sluoksniais, ji bus labiau suderinta, nes naršyklės ar įrenginys, kuris negali naudoti tam tikrų CSS stilių arba kurie gali būti neįjungti JavaScript, vis tiek gali peržiūrėti HTML. Tada jūsų svetainė gali būti palaipsniui plečiama, naudojant naršykles, kurios jas palaiko.
HTML - struktūros sluoksnis
Struktūrinis sluoksnis yra kur saugomas visas turinys, kurį klientai nori perskaityti ar pažvelgti. Tai bus koduojama standartuose atitinkančiu HTML5 ir gali apimti tekstą bei atvaizdus, taip pat daugialypės terpės (vaizdo, garso ir tt). Svarbu įsitikinti, kad kiekvienas svetainės turinio aspektas yra pateiktas struktūros lygyje. Tai leidžia bet kuriems klientams, kurie išjungė "JavaScript" arba kurie negali peržiūrėti CSS, kad vis tiek galėtų naudotis visomis svetainėmis, jei ne visais tos svetainės funkcijomis.
CSS - stilių sluoksnis
Jūs sukursite visus savo vizualiuosius stilius savo interneto svetainėje išorinio stiliaus lape. Galite naudoti keletą stilių lentelių, bet nepamirškite, kad kiekvienam atskiram CSS failui reikia HTTP užklausos, kad būtų galima išgauti, paveikdama svetainės našumą.
JavaScript - elgesio sluoksnis
"JavaScript" yra dažniausiai vartojama elgsenos sluoksnio kalba, tačiau, kaip minėjau anksčiau, CGI ir PHP taip pat gali sukurti interneto puslapio elgseną. Tai sakant, kai dauguma kūrėjų nurodo elgesio sluoksnį, tai reiškia, kad sluoksnis, kuris tiesiogiai suaktyvinamas žiniatinklio naršyklėje, todėl "JavaScript" yra beveik visada pasirinkta kalba. Jūs naudojate šį sluoksnį tiesiogiai bendrauti su DOM ar dokumento objektų modeliu. Tinkamo lygio HTML rašymas taip pat svarbus DOM sąveikoms elgsenos sluoksnyje.
Sukūrę elgesio sluoksnį, turėtumėte naudoti išorinius scenarijų failus kaip ir CSS. Jūs gaunate visas tas pačias pranašumus, kaip naudoti išorinį stiliaus lapą.