Apakah Anda mempelajari tata letak CSS? Apakah Anda masih belum bisa sepenuhnya menguasai tata letak CSS murni? Biasanya ada dua situasi yang menghambat pembelajaran Anda:
Kemungkinan pertama adalah Anda belum memahami prinsip pemrosesan CSS halaman. Sebelum mempertimbangkan kinerja laman secara keseluruhan, Anda harus terlebih dahulu mempertimbangkan semantik dan struktur konten, lalu menambahkan CSS untuk semantik dan struktur. Artikel ini akan memberi tahu Anda cara menyusun HTML.
Alasan lainnya adalah Anda bingung dengan atribut lapisan presentasi yang sangat familiar (seperti cellpadding, hspace, align="left", dll.) dan tidak tahu pernyataan CSS apa yang akan diubah menjadi atribut tersebut. Setelah Anda memecahkan masalah pertama dan mengetahui cara menyusun HTML Anda, saya akan memberi Anda daftar yang merinci CSS apa yang akan digunakan untuk menggantikan atribut presentasi asli.
HTML terstruktur
Saat pertama kali mempelajari produksi halaman web, kami selalu mempertimbangkan cara mendesainnya terlebih dahulu, dengan mempertimbangkan gambar, font, warna, dan rencana tata letak. Kemudian kita menggunakan Photoshop atau Fireworks untuk menggambarnya dan memotongnya menjadi gambar kecil. Terakhir, edit HTML untuk mengembalikan semua desain ke halaman.
Jika Anda ingin halaman HTML Anda ditata dengan CSS (ramah CSS), Anda harus kembali dan memulai dari awal. Jangan memikirkan "penampilan" terlebih dahulu, tetapi pikirkan dulu tentang semantik dan struktur konten halaman Anda.
Penampilan bukanlah hal yang terpenting. Halaman HTML yang terstruktur dengan baik dapat disajikan dalam tampilan apa pun, dan CSS Zen Garden adalah contoh klasiknya. CSS Zen Garden akhirnya membantu kita menyadari kekuatan CSS.
HTML tidak hanya untuk dibaca di layar komputer. Gambar Anda yang dirancang dengan cermat di Photoshop tidak boleh ditampilkan di PDA, ponsel, dan pembaca layar. Namun halaman HTML yang terstruktur dengan baik dapat ditampilkan di mana saja dan di perangkat jaringan apa pun melalui definisi CSS yang berbeda.
mulai berpikir
Hal pertama yang harus dipelajari adalah apa itu "struktur", yang oleh beberapa penulis juga disebut "semantik". Maksud dari istilah ini adalah Anda perlu menganalisis blok konten Anda dan tujuan dari setiap konten, lalu membangun struktur HTML yang sesuai berdasarkan tujuan konten tersebut.
Jika Anda duduk dan menganalisis serta merencanakan struktur halaman dengan cermat, Anda mungkin akan mendapatkan hasil seperti ini:
Logo dan nama situs
Konten halaman utama
Navigasi Situs (Menu Utama)
submenu
kotak pencarian
Area fungsional (misalnya keranjang belanja, kasir)
Footer (hak cipta dan pemberitahuan hukum terkait)
Kami biasanya menggunakan elemen DIV untuk mendefinisikan struktur ini, mirip dengan ini:
＜div id="tajuk"＞＜/div＞
＜div id="konten"＞＜/div＞
＜div id="globalnav"＞＜/div＞
＜div id="subnav"＞＜/div＞
＜div id="pencarian"＞＜/div＞
＜div id="toko"＞＜/div＞
＜div id="footer"＞＜/div＞
Bukan tata letaknya, tapi strukturnya. Ini adalah deskripsi semantik dari blok konten. Ketika Anda memahami struktur Anda, Anda dapat menambahkan ID yang sesuai ke DIV. Blok konten apa pun dapat ditampung dalam wadah DIV, dan DIV lain dapat disarangkan di dalamnya. Blok konten dapat berisi elemen HTML apa pun --- judul, paragraf, gambar, tabel, daftar, dll.
Berdasarkan penjelasan di atas, Anda sudah mengetahui cara menyusun HTML, dan sekarang Anda dapat menentukan tata letak dan gaya. Setiap blok konten dapat ditempatkan di mana saja pada halaman, dan warna, font, batas, latar belakang, properti perataan, dll. dari blok dapat ditentukan.