Membuat Table dengan Div
Buka dreamweavernya lalu pilih HTML.
Disini kita ingin membuat web dengan menggunakan div (division) dimana nama div nya adalah main dan didalam main ada lagi div header, navigator, conten, dan footer. Gambar sederhananya seperti dibawah ini :
MAIN
|-------------------------------------------------------|
| |
| |
| HEADER |
| |
| |
|-------------------------------------------------------|
| NAVIGATOR |
|-------------------------------------------------------|
| |
| |
| |
| |
| |
| CONTEN |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
|-----------------------------------------------------|
| FOOTER |
|-----------------------------------------------------|
| |
| |
| HEADER |
| |
| |
|-------------------------------------------------------|
| NAVIGATOR |
|-------------------------------------------------------|
| |
| |
| |
| |
| |
| CONTEN |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
|-----------------------------------------------------|
| FOOTER |
|-----------------------------------------------------|
Pertama kita ganti background dengan warna yang kita inginkan sebagai warna dasar.
kemudian buat div main dengan menggunakan insert div. Lalu pada ID masukan main.
Kemudian pilih Ok pada tampilan dibawah ini
Kemudian pada window CSS Rule definition atur warna background lalu positioning untuk mengatur lebar dan tinggi kemudian OK
maka hasilnya akan seperti dibawah ini :
Lalu anda buat div lagi untuk header, navigator, content dan footer dengan div insert. Tetapi jika anda ingin menulis manual di code form nya maka kode nya akan seperti ini :
Lalu anda panggil div yang anda telah buat hingga seperti ini :
Maka jika anda liat layout Design anda akan seperti ini :
Kemudian kita masukan Gambar(Banner) kedalam div headernya.
Kemudian kita buat navigatornya. Untuk navigatornya ada sedikit sulit jadi tolong ikuti.
Pertama buat list pada link anda seperti dibawah ini :
Kemudian kita hilangkan list nya dengan menggunakan CSS.
lalu buat tampilan link kita menjadi menyamping.
Kemudian buat tampilan link menjadi block kemudian hilangkan underlinenya.
Kemudian atur CSS untuk warna linknya.
Terakhir kita atur warna link ketika kursor bergerak kedalam link anda.
Maka anda bisa lihat hasilnya ketika dijalan kan pada browser anda.
Kemudian isi div Conten dengan apa yang ingin kalian isi dalam web anda.
Atur div Conten hingga lebih rapih.
Kemudian footernya kita isi seperti dibawah ini
Lalu atur hingga seperti ini
Kemudian atur posisi hingga ketengah dan hasilnya jika dijalankan ke browser akan seperti ini :
7 komentar:
Permisi saya mau tanya gimana sih cara masukin divtag nya biar kekanan saya sudah bikin sidebar terus saya mau bikin konten nah saya taro kusor dibelakang /div pas saya udah buat kok kotak content nya ada dibawah nya padahal float nya sudah right
klo floatnya sudah di atur ke sebelah kanan coba lihat width nya~
apakah udah sma blm kya ukuran div mainnya jadi widht konten = width main - width sidebar~
Oh oke deh saya coba eh iya lupa gimana si cara bikin semua cssnya ketengah biar hasilnya kayak screenshot yang terakhir soalnya pas pembuatan desain div cssnya letaknya berada pada dikiri.???
tambah'n aj center. di bawah body. sama tutup /center. diatas tutup /body.~
Saya sudah coba memasang center seperti yang anda bilang hasilnya yang kena hanya header saja kemudian footer saya yang tadinya dibawah pindah ke kanan konten adakah jalan keluar yang lain??
mungkin anda tidak membuat header, navigator, conten dan footer tidak dalam 1 divisi~
coba lihat lagi lebih teliti dari awal~
top cer put cakep output keluar keren
Posting Komentar