Бүх вэбсайтууд нь бүтэц, хэв маяг, зан үйлийн хослолоор бүтээгдсэн байдаг
Өмнөх вэбсайтын хөгжлийг тодорхойлоход хэрэглэгддэг нийтлэг анализ бол 3 хөлтэй өтгөн шиг юм. Вэб хөгжүүлэх 3 давхарга гэж нэрлэгдэх эдгээр 3 хөл нь Structure, Style, Behavior гэсэн үг юм.
Вэб хөгжүүлэлтийн гурван давхарга
- Бүтэц эсвэл агуулгын давхарга
- Вэб хуудсын бүтэц эсвэл контент давхарга нь тухайн хуудасны HTML код юм. Гэрийнхээ нэгэн адил байшингийн үлдсэн хэсэг нь бүтээн байгуулалтын хүчтэй суурийг бий болгодог. HTML-ийн хатуу суурь нь вэбсайт үүсгэх платформыг бий болгодог. HTML бүтэц нь текст эсвэл дүрсээс бүрдэх ба энэ нь вэбсайтыг тойрон гарахын тулд зочдын ашиглах холбоосууд орно.
- Үзүүлэн эсвэл толилуулгын давхарга
- Хэв маяг эсвэл танилцуулгын давхарга нь бүтэцлэгдсэн HTML баримтыг сайтын зочдод хэрхэн харуулахыг заадаг. Энэ давхаргыг CSS (Cascading Style Sheets) тодорхойлно. Эдгээр файлууд нь веб хөтөч дээр баримт бичиг хэрхэн үзүүлэхийг зааж байгаа загваруудыг агуулдаг. Өнөөгийн Вэб дээр хэв маягийн давхарга нь Медиа Асуултууд нь дэлгэцийн төрөл, төхөөрөмж дээр суурилсан сайтын дэлгэцийг өөрчлөх боломжтой .
- Зан төлөв байдал
- Зан төлөвийн давхарга нь янз бүрийн хэрэглэгчийн үйлдэлүүдэд хариулах, эсвэл янз бүрийн нөхцөлд суурилсан хуудсанд өөрчлөлт хийх боломжтой вэб хуудасны давхарга юм. Ихэнх вэб хуудсын хувьд зан байдлын түвшин нь хуудасны JavaScript харилцан үйлдэл болно.
Яагаад та давхаргыг ялгах ёстой вэ?
Хэрэв та вэб хуудас үүсгэж байгаа бол давхрагаыг аль болох тусгаарлах нь зүйтэй. Бүтэц нь HTML-тэй, CSS-ийн визуал хэлбэрүүд, сайт дээр ашиглагддаг дурын скриптүүдтэй байх ёстой.
Давхаргыг тусгаарлах зарим давуу талууд нь:
- Хуваалцсан эх үүсвэр
- Та гадны CSS файл эсвэл JavaScript файлын талаар бичихдээ, уг файлыг өөрийн вэбсайт дээрх аль ч хуудсанд ашиглаж болно. Хэрэв та энэ файлд өөрчлөлт оруулах хэрэгтэй бол магадгүй вэбсайт дахь зарим хэв загварын хэв маягийг өөрчлөхийн тулд энэ загварыг ашиглаж буй хуудас бүрийн өөрчлөлтийг авах болно. Вэб хуудас бүрийн хуудас бүрийг нэг бүрчлэн засах шаардлагагүй бөгөөд том сайтын хувьд хүнд хэцүү байж болох юм.
- Хурдан татаж авна
- Эхний удаа скрипт эсвэл загварчилсан хуудсыг татаж авсан бол вэбсайт хөтөчөөр нь хуулж авдаг. Эдгээр хуваалцсан нөөцүүд нь одоо кэшд агуулагдаж байдаг учраас вэб хөтчийн хүсэлтийг бусад хуудсууд илүү хурдан ачаалж, хуудасны хурд болон гүйцэтгэлийг сайжруулдаг.
- Олон хүн багууд
- Хэрвээ танд нэгээс олон хүн вэбсайт дээр ажиллаж байгаа бол эдгээр багийн бүх хүмүүс эдгээр файлуудын хамгийн сүүлийн хувилбартай ажиллаж байгааг баталгаажуулахын тулд файлуудыг "шалгах" ба "шалгах" системийг ашиглаж болно. Загвар, зан үйлүүд нь бүтцийн баримттай харилцан уялдаатай байвал хийхэд илүү хэцүү.
- SEO
- Загвар, бүтэц нь тодорхой тусгаарлалттай сайт нь хайлтын системд илүү сайн ажиллаж чаддаг сайтууд нь эдгээр сайтуудыг илүү сайн үр дүнтэйгээр мөлхөж, хуудсыг ойлгох боломжтой байдаг.
- Хүртээмжтэй байдал
- Гадаад стилийн хуудас, скрипт файл нь хүмүүст болон хөтчүүдэд илүү хүртээмжтэй байдаг. Загвар, бүтцийг тусгаарладаг учраас дэлгэцийн уншигч гэх мэт програмууд нь ямар ч байсан хэрэглэх боломжгүй стиль хэлбэрээр бүтээхийн тулд бүтэц давхаргын контентыг илүү амархан боловсруулах боломжтой байдаг.
- Нөхцөл байдал
- Хэрэв та хөгжүүлэлтийн давхаргуудаар бүтээгдсэн вэбсайттай бол энэ нь илүү найдвартай байх болно. Жишээ нь зарим төрлийн CSS стилийг ашиглахгүй, эсвэл JavaScript-г идэвхжүүлж чадахгүй байгаа хөтчүүд эсвэл төхөөрөмж HTML-г харж болно. Дараа нь таны вэбсайтыг дэмждэг хөтчүүдэд зориулж функцүүдтэйгээр сайжруулж болно.
HTML - Бүтцийн давхарга
Бүтцийн давхарга нь таны хэрэглэгчид уншиж эсвэл харахыг хүссэн бүх агуулгыг хадгалж байдаг газар юм. Энэ нь стандартад нийцсэн HTML5 кодчилогдох бөгөөд текст, зураг, мультимедиа (видео, дуу, гэх мэт) оруулж болно. Сайтынхаа бүх талбайн бүтэц нь бүтцийн давхаргад байгаа эсэхийг шалгах нь чухал юм. Энэ нь JavaScript-г идэвхжүүлсэн эсвэл CSS-ээр харж чадахгүй байгаа хэрэглэгчид вэб сайтын бүх хандалт байхгүй байхыг зөвшөөрдөг.
CSS - Styles Layer
Та вэбсайтаа бүх хэв маягийн хуудсан дээрээ бүх визуал стилийг үүсгэх болно. Та олон загварыг ашиглаж болно, гэхдээ тус тусад нь CSS файл нь HTTP хүсэлтийг хүлээн авахыг шаарддаг, энэ нь сайтын гүйцэтгэлд нөлөөлдөг гэдгийг санаарай.
JavaScript - Behavior Layer
JavaScript гэдэг нь зан байдлын давхаргын хамгийн өргөн хэрэглэгддэг хэл юм. Гэсэн хэдий ч CGI болон PHP нь вэб хуудсын зан төлөвийг үүсгэдэг. Ихэнх хөгжүүлэгчид зан төлөвийн давхарга гэж нэрлэгддэг бол энэ нь вэб хөтөч дээр шууд идэвхжүүлсэн давхарга гэсэн үг бөгөөд ингэхлээр JavaScript нь бараг л үргэлжлэх сонголт байдаг. Та энэ давхаргыг ашиглан DOM эсвэл Document Object Model-тэй шууд харилцах боломжтой. Агуулгын давхарга дахь хүчинтэй HTML бичих нь зан байдлын давхаргад DOM харилцан ажиллагаанд чухал ач холбогдолтой.
Хэрэв та зан төлөвийн түвшинд бүтээхэд CSS-ийн адил гадаад скрипт файлыг ашиглах хэрэгтэй. Та гаднах загварын хуудсыг ашиглахдаа ижил давуу талтай.