Seperti yang saya ilustrasikan dbawah.
Jadi kita bisa liad di warna merah yaitu headernya, hijau coklat ungu itu bodinya, kemudian kuning itu footernya :D Pertama-tama kita hanya akan membagi 5 wilayah itu saja :D Langkah-langkahnya akan dijelaskan dbawah. Kita akan menggunakan adobe dreamweaver cs5.
- Pertama-tama buatlah new document blank HTML. setelah itu jangan lupa melakukan save terlebih dahulu. Untuk HTML beri saja nama index.html, Setelah itu buatlah document CSS. Guna dari documment CSS ini adalah untuk menyimpan semua style. Agar bisa digunakan di page lain kita dibutuhkan ;) Dan jangan lupa disave juga ;) kita beri saja nama webStyle.css
- Setelah itu kita akan mememasukkan CSS kedalam HTML. ketikkan pada bagian head kode berikut yang terdapat pada gambar dbawah.
- Karena kita sudah punya design yang akan kita kerjakan pertama-tama kita bisa membuat CSSnya terlebih dahulu. Pada bagian CSS buatlah style seperti berikut ini. Oh iya dalam pemanggilan CSS ada 2 tipe selektor yang bisa digunakan yaitu dot / titik (.) untuk class dan hash tag / pagar (#) untuk id. Pada tutorial ini tidak ada perbedaan kalian ingin memakai yang mana.
- Setelah kalian membuat CSSnya kita bisa memulai membuat index.htmlnya ;) pada <body> masukkan code berikut ini.
- Setelah itu coba lihat di sebelah kiri atas pada dream weaver anda. Tekan tombol design disana Nanti akan muncul gambar seperti berikut ;)
- Nah sekarang kerangka dari index kita sudah selesai tinggal diberi warna saja. Nah skarang saya akan menjelaskan fungsi2 dari CSS dan HTMLnya. Pada Header kita memberi width dan height, anda juga pasti sudah tau apa itu width dan height. dalam bahasa inggris width adalah lebar dan height adalah tinggi. sementara margin fungsinya adalah mengatur jarak margin, kita set auto pada left & right untuk menyesuaikan dengan layar pc atau desktop agar membuatnya selalu brada di tengah. Disini saya menggunakan class body untuk membuat wadah untuk 3 body yang berada di tengah, sementara float berfungsi untuk membuat object itu menempel disebelah tergantung float yang digunakan. Disini saya menggunakan float left untuk membuat body berada di tempat yang tepat. Hilangkan saja float jika anda ingin tau fungsi sebenarnya ;) Nah untuk pewarnaan berikan saja code berikut di setiap head, body dan footer kecuali body utamanya ya ;) Outline melakukan style pada line yang terluar ;)
Tidak ada komentar:
Posting Komentar