telah dibahas mengenai layout halaman web, akan tetapi di tutorial kali ini kita akan membahas desain layout yang responsif menggunakan CSS. Sebuah situs web sering dibagi menjadi header, menu, konten dan footer. Berikut merupakan contoh layout halaman web yang sederhana: Struktur di atas, adalah salah satu yang paling umum digunakan. Header Sebuah header biasanya terletak di bagian atas website, tapi ada juga yang penempatan header berada tepat di bawah menu navigasi bagian atas. Dalam header, sering mengandung logo atau nama website. Contoh
Hasilnya:
Menu atau navigasi merupakan tempat atau wadah untuk link yang memberikan akses ke halaman-halaman lain dalam suatu web. Contoh
Hasilnya:
Tata letak di bagian ini, sering tergantung pada target pengguna. Tata letak yang paling umum adalah satu (atau menggabungkan semua konten) sebagai berikut:
Pada contoh ini kita akan membuat layout 3-kolom, dan mengubahnya ke layout 1-kolom pada layar yang lebih kecil. Contoh
Hasilnya: Tips: Untuk membuat layout 2-kolom, ubah lebar menjadi 50%. Untuk membuat layout 4-kolom, gunakan 25%, dll. Tips: Cara yang lebih modern membuat layout kolom adalah dengan menggunakan CSS flexbox. Namun, tidak didukung di Internet Explorer 10 dan versi sebelumnya. Jika kita memerlukan dukungan IE6-10, gunakan float (seperti yang ditunjukkan di atas).
footer ditempatkan di bagian bawah halaman website. Pada bagian footer ini sering berisi informasi seperti hak cipta dan info kontak. Contoh
Hasilnya:
Dengan menggunakan beberapa kode CSS di atas, kita akan membuat tata letak situs web responsif, yang bervariasi antara dua kolom dan kolom yang memiliki lebar penuh (full-width) tergantung pada lebar layar. |