Tata Letak Tableless Buka Barisan Reka Bentuk Baru
Terdapat banyak sebab untuk tidak menggunakan jadual untuk susun atur . Salah satu sebab yang paling kerap orang memberi untuk meneruskan penggunaannya adalah kerana sukar untuk melakukan susunatur dengan CSS. Walaupun skrip CSS tidak melibatkan keluk pembelajaran, apabila anda memahami cara membuat susunan CSS, anda mungkin terkejut betapa mudahnya itu. Dan apabila anda belajar, anda akan menangani masalah kedua yang paling umum yang diberikan orang untuk tidak menggunakan CSS- "Ia lebih pantas untuk menulis jadual." Ia lebih cepat kerana anda tahu jadual, tetapi sebaik sahaja anda mempelajari CSS, anda mungkin seperti pantas dengan itu.
Sokongan Penyemak Imbas Kedudukan CSS
Kedudukan CSS disokong dengan baik dalam semua pelayar moden . Kecuali anda membina tapak untuk Netscape 4 atau Internet Explorer 4, pembaca anda tidak sepatutnya menghadapi masalah melihat laman web CSS yang diposisikan.
Memikirkan semula Bagaimana Anda Membina Laman
Apabila anda membina tapak menggunakan jadual, anda perlu berfikir dalam format jadual . Dengan kata lain, anda berfikir dari segi sel dan baris dan lajur. Halaman Web anda akan mencerminkan pendekatan ini. Apabila anda berpindah ke reka bentuk kedudukan CSS, anda akan mula memikirkan halaman anda dari segi kandungan, kerana kandungan itu boleh diletakkan di mana-mana sahaja yang anda suka dalam susun atur-walaupun berlapis di atas kandungan lain.
Laman web yang berbeza mempunyai struktur yang berbeza. Untuk membina halaman yang berkesan, menilai struktur mana-mana halaman sebelum anda memberikan kandungan kepadanya. Halaman contoh mungkin termasuk lima bahagian yang berbeza:
- Header . Di rumah untuk iklan spanduk, nama tapak, pautan navigasi, tajuk artikel dan juga beberapa perkara lain.
- Lajur kanan . Ini adalah sebelah kanan halaman dengan kotak carian, iklan, kotak video, dan kawasan membeli-belah.
- Kandungan . Teks artikel, pos blog atau keranjang belanja-daging dan kentang halaman.
- Iklan dalam talian . Iklan tersebut dalam baris dalam kandungan.
- Footer . Navigasi bawah, maklumat pengarang, maklumat hak cipta, iklan banner yang lebih rendah, dan pautan yang berkaitan.
Daripada meletakkan lima elemen di dalam jadual, gunakan elemen seksyen HTML5 untuk menentukan bahagian yang berlainan kandungan, dan kemudian gunakan kedudukan CSS untuk meletakkan elemen kandungan pada halaman.
Mengenalpasti Seksyen Kandungan Anda
Selepas anda menentukan bidang kandungan yang berbeza di tapak anda, anda perlu menulisnya ke dalam HTML anda. Walaupun anda boleh, pada amnya, letakkan bahagian anda dalam apa jua pesanan, adalah idea yang baik untuk meletakkan bahagian paling penting dari halaman anda terlebih dahulu. Pendekatan ini akan membantu pengoptimuman enjin gelintar, juga.
Untuk menunjukkan kedudukan, membayangkan halaman dengan tiga lajur tetapi tidak ada header atau footer. Anda boleh menggunakan kedudukan untuk membuat apa-apa jenis susun atur yang anda suka.
Untuk susun atur tiga lajur, tentukan tiga bahagian: lajur kiri, lajur kanan, dan kandungan.
Bahagian ini akan diterapkan menggunakan elemen ARTIKEL untuk kandungan dan dua elemen SEKSYEN untuk kedua-dua lajur. Semuanya juga akan mempunyai atribut yang mengenalinya. Apabila anda menggunakan atribut id, anda mesti menganggap nama unik untuk setiap id.
Menetapkan Kandungan
Menggunakan CSS, tentukan kedudukan untuk elemen ID anda. Simpan maklumat kedudukan anda dalam panggilan gaya seperti ini:
#kandungan {
}
Kandungan dalam unsur-unsur ini akan mengambil sebanyak mungkin ruang, iaitu 100 peratus dari lebar lokasi semasa atau halaman. Untuk menjejaskan lokasi seksyen tanpa memaksanya pada lebar tetap, ubah padding atau sifat margin.
Untuk susun atur ini, tetapkan kedua-dua lajur pada lebar tetap dan kemudian tetapkan kedudukan mereka mutlak, supaya mereka tidak akan terjejas oleh mana ia dijumpai dalam HTML.
# left-column {
kedudukan: mutlak;
kiri: 0;
lebar: 150px;
margin-left: 10px;
margin-top: 20px;
warna: # 000000;
padding: 3px;
}
# lajur kanan {
kedudukan: mutlak;
kiri: 80%;
atas: 20px;
lebar: 140px;
padding-left: 10px;
z-indeks: 3;
warna: # 000000;
padding: 3px;
}
Kemudian untuk kawasan kandungan, tetapkan margin di sebelah kanan dan kiri supaya kandungan tidak akan bertindih ke dua lajur luar.
#kandungan {
atas: 0px;
margin: 0px 25% 0 165px;
padding: 3px;
warna: # 000000;
}
Menentukan halaman anda menggunakan CSS dan bukannya jadual HTML memerlukan sedikit kemahiran teknikal, tetapi hasilnya adalah dari reka bentuk yang lebih fleksibel dan responsif dan memudahkan pengubahsuaian struktur pada halaman anda kemudian.