Layout
Dalam dunia desain, Layout berbicara mengenai bagaimana penataan elemen-elemen dalam sebuah halaman dengan benar. Sama seperti tipografi, terdapat sangat banyak elemen-elemen pada layout, yang tentunya tidak akan dapat dibahas pada bagian ini sendiri. Pembahasan layout secara menyeluruh akan memerlukan bukunya tersendiri. Kita akan hanya melihat elemen-elemen layout yang umumnya ditemukan pada dokumen web, dan bagaimana membuat elemen-elemen tersebut dengan HTML dan CSS.Contohnya pada Twitter memiliki elemen-elemen sebagai berikut:
- Elemen Header
- Seperti namanya, merupakan elemen yang berisi judul dan penjelasan lain dokumen. Biasanya elemen ini diisikan dengan logo website, menu-menu global (seperti login dan logout), maupun nama halaman yang sedang ditampilkan.
- Elemen Box
- Elemen pendukung box, yaitu dapat berupa foto, atau pun hal yang lainnya.
- Elemen Sidebar / left side
- Elemen pendukung konten, dapat berupa pembantu navigasi konten, ataupun berbagai hal lain seperti daftar konten lain, iklan, atau menu tambahan. Sidebar dapat berada di kiri atau kanan konten, atau bahkan di kiri dan kanan konten, sesuai dengan kreatifitas perancangnya.
- Elemen Konten
- Isi utama dari dokumen web. Pengguna biasanya datang ke web untuk melihat teks yang berada pada bagian ini.
- Elemen Footer
- Bagian penutup dari website, yang dapat saja berisi informasi lain tentang website, seperti lisensi pengunaan, sitemap, ataupun link ke website lain.
Disini saya menggunakan pemanggilan file.nya css. Caranya simpan saja script tersebut dalam satu forder.
Dan dibawah ini adalah Script - script nya
HALAMAN Simpan dengan format Q2_header.html
HEADER Simpan dengan format header1.css
BOX 1 Simpan dengan format box1.css
BOX 3 Simpan dengan format box3.css
BOX 4 Simpan dengan format box4.css
CONTENT Simpan dengan format content1.css
LEFTSIDE Simpan dengan format leftside1.css
FOOTER Simpan dengan format footer1.css
Dan selesai ,... ^_^ Semoga bermanfaat ,... selamat mencoba ,.. semoga sukses ...
Sampai jumpa di Artikel saya yang selanjutnya .. ^_^ .
0 komentar:
Posting Komentar