Mereka yang bekerja dalam industri reka bentuk web menyamakan pembangunan laman web front-end ke bangku tiga kaki. Tiga kaki ini - tiga lapisan pembangunan web - terdiri daripada struktur, gaya, dan tingkah laku.
Mengapa Anda Perlu Mengasingkan Lapisan?
Apabila anda membuat halaman web, strukturnya harus diturunkan ke HTML anda, gaya visual ke CSS, dan tingkah laku pada skrip. Beberapa manfaat memisahkan lapisan ialah:
- Sumber yang dikongsi: Apabila anda menulis fail CSS atau JavaScript luaran, mana-mana halaman di tapak boleh menggunakan fail itu. Jika anda perlu membuat perubahan kepada fail itu, mungkin untuk mengemas kini beberapa gaya percetakan di laman web, setiap halaman yang menggunakan lembaran gaya itu akan mendapat perubahan. Tidak perlu mengedit setiap halaman laman web secara individu, yang boleh menjadi usaha yang melelahkan untuk laman web yang besar.
- Muat turun pantas: Sebaik sahaja skrip atau helaian gaya telah dimuat turun oleh pelanggan anda untuk kali pertama, ia di-cache oleh penyemak imbas web. Kerana sumber-sumber yang dikongsi ini kini terkandung dalam cache penyemak imbas, halaman lain yang diminta dalam beban penyemak imbas lebih cepat, yang meningkatkan kelajuan dan kinerja halaman secara keseluruhan.
- Pasukan berbilang orang: Sekiranya anda mempunyai lebih daripada satu orang yang bekerja di laman web sekaligus, anda boleh menggunakan sistem yang membolehkan fail diperiksa masuk dan keluar untuk memastikan semua orang bekerja dengan versi terkini. Ini lebih sukar dilakukan jika gaya dan tingkah laku dikaitkan dengan dokumen struktur.
- SEO: Satu laman web yang mempunyai pemisahan gaya dan struktur yang jelas mungkin lebih baik untuk enjin carian kerana mereka boleh merangkak kandungan itu dengan lebih berkesan dan memahami halaman tanpa mendapat kesilapan dalam gaya visual dan maklumat tingkah laku.
- Kebolehcapaian: Lembaran gaya luaran dan fail skrip lebih mudah diakses oleh orang dan penyemak imbas. Perisian seperti pembaca skrin boleh memproses kandungan dari lapisan struktur dengan lebih mudah tanpa berurusan dengan gaya yang tidak dapat digunakan.
- Keserasian ke belakang: Satu laman web yang direka bentuk dengan lapisan pembangunan berasingan lebih cenderung untuk menjadi serasi mundur kerana penyemak imbas dan peranti yang tidak dapat menggunakan gaya CSS tertentu atau yang tidak berfungsi dengan JavaScript masih dapat melihat HTML. Anda kemudian dapat meningkatkan laman web anda secara progresif dengan ciri-ciri untuk penyemak imbas yang menyokongnya.
HTML: Lapisan Struktur
Lapisan struktur atau kandungan halaman web adalah kod HTML yang mendasari laman tersebut. Sama seperti bingkai rumah mewujudkan asas yang kuat di mana seluruh rumah dibina, asas yang kukuh HTML mewujudkan platform di mana sebuah laman web boleh diwujudkan.
Lapisan struktur adalah tempat anda menyimpan semua kandungan yang ingin dibaca atau dilihat oleh pelanggan anda. Struktur HTML boleh terdiri daripada teks dan imej, dan termasuk hiperpautan yang akan digunakan pengunjung untuk menavigasi laman web. Ini dikodkan dalam HTML5 mematuhi standard dan boleh memasukkan teks, imej, dan multimedia (video, audio, dll.).
Setiap aspek kandungan tapak harus diwakili dalam lapisan struktur. Ini membolehkan pelanggan yang telah mematikan JavaScript atau yang tidak dapat melihat akses CSS ke seluruh laman web, jika tidak semua fungsinya.
CSS: The Styles Layer
Lapisan ini menentukan bagaimana dokumen HTML berstruktur akan dilihat pada pelawat tapak dan ditakrifkan oleh CSS (Cascading Style Sheets). Fail-fail ini mengandungi arahan gaya untuk bagaimana dokumen harus dipaparkan dalam pelayar web. Lapisan gaya biasanya termasuk pertanyaan media yang menukar paparan tapak berdasarkan saiz skrin dan peranti.
Semua gaya visual untuk laman web harus berada dalam gaya gaya luaran. Anda boleh menggunakan pelbagai stylesheet, tetapi ingat bahawa setiap fail CSS memerlukan permintaan HTTP untuk mengambilnya, yang mempengaruhi prestasi laman web.
JavaScript: Lapisan Kelakuan
Lapisan tingkah laku membuat laman web interaktif, membolehkan halaman untuk bertindak balas kepada tindakan pengguna atau menukar berdasarkan satu set syarat. JavaScript adalah bahasa yang paling sering digunakan untuk lapisan tingkah laku, tetapi CGI dan PHP sangat kerap digunakan juga.
Apabila pemaju merujuk kepada lapisan tingkah laku, kebanyakannya bermakna lapisan yang diaktifkan secara langsung dalam penyemak imbas web. Anda menggunakan lapisan ini untuk berinteraksi terus dengan DOM (Model Objek Dokumen). Menulis HTML yang sah dalam lapisan kandungan adalah penting untuk interaksi DOM dalam lapisan tingkah laku. Apabila anda membina lapisan tingkah laku, anda harus menggunakan fail skrip luaran, sama seperti CSS, untuk mengoptimumkan kelajuan dan prestasi.
