Pengenalan tata letak halaman web DIV+CSS

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 properti lapisan presentasi yang sangat familiar (seperti cellpadding, hspace, align=left, dll.) dan tidak tahu pernyataan CSS apa yang akan diubah menjadi properti 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

Mulailah dengan mempelajari apa itu struktur, yang oleh beberapa penulis disebut juga 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 beberapa bagian seperti ini:

Kami biasanya menggunakan elemen DIV untuk mendefinisikan struktur ini, mirip dengan ini:

<iddiv=header></div>

<div id=konten></div>

<div id=globalnav></div>

<iddiv=subnav></div>

<div id=penelusuran></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.

Menggunakan penyeleksi adalah hal yang luar biasa

Nama id adalah sarana untuk mengontrol blok konten tertentu. Dengan membungkus blok konten ini dengan DIV dan menambahkan id unik, Anda dapat menggunakan pemilih CSS untuk secara tepat menentukan tampilan setiap elemen halaman, termasuk judul, daftar, Gambar , tautan atau paragraf, dll. Misalnya, jika Anda menulis aturan CSS untuk #header, aturan tersebut bisa sangat berbeda dengan aturan gambar di #content.

Contoh lain: Anda dapat menggunakan aturan berbeda untuk menentukan gaya tautan di blok konten berbeda. Sesuatu seperti ini: #globalnav a:link atau #subnav a:link atau #content a:link. Anda juga dapat menentukan gaya berbeda untuk elemen yang sama di blok konten berbeda. Misalnya, tentukan gaya p di #content dan #footer masing-masing melalui #content p dan #footer p. Secara struktural, halaman Anda terdiri dari gambar, tautan, daftar, paragraf, dll. Elemen-elemen ini sendiri tidak memengaruhi perangkat jaringan mana elemen tersebut ditampilkan (PDA, ponsel, atau TV Internet).

Halaman HTML yang terstruktur dengan cermat sangat sederhana, dan setiap elemen digunakan untuk tujuan struktural. Saat Anda ingin membuat indentasi paragraf, Anda tidak perlu menggunakan tag blockquote, cukup gunakan tag p dan tambahkan aturan margin CSS ke p untuk mencapai tujuan indentasi. p adalah tag terstruktur dan margin adalah atribut presentasi. (Ini adalah pemisahan struktur dan ekspresi.)

Halaman HTML yang terstruktur dengan baik hampir tidak memiliki tag atribut. Kode ini sangat bersih dan ringkas. Misalnya, kode asli <table width=80% cellpadding=3 border=2 align=left> sekarang hanya dapat menulis <table> dalam HTML, dan semua hal yang mengontrol kinerja ditulis dalam CSS adalah sebuah tabel, bukan yang lain (seperti digunakan untuk tata letak dan pemosisian).

Berlatihlah menyusun diri sendiri

Di atas hanyalah struktur paling dasar. Dalam aplikasi sebenarnya, Anda dapat menyesuaikan blok konten sesuai kebutuhan Anda. Penyarangan DIV sering terjadi, dan Anda akan melihat ada lapisan lain di lapisan penampung, dengan struktur serupa seperti ini:

<div id=navcontainer>

<iddiv=nav global>

<ul>daftar</ul>

</div>

<div id=subnav>

<ul>daftar lain</ul>

</div>

</div>

Elemen div bertingkat memungkinkan Anda menentukan lebih banyak aturan CSS untuk mengontrol presentasi. Misalnya, Anda dapat memberi #navcontainer aturan untuk memusatkan daftar ke kanan, memberi #globalnav aturan untuk memusatkan daftar ke kiri, dan memberi #subnav aturan lain. aturan untuk memusatkan daftar sepenuhnya.