Friday, December 7, 2012

Membuat Layout Menggunakan Table

By : princess amma di 6:09 PM
Hay guys .. kali ini gw bakal bahas tetang Blog ..
smua pasti udah kenal apa itu blog, di era informasi dan teknologi ini, punya blog adalah hal biasa dan wajib adanya. Bagi yang senang internet tentu sudah sering melihat blog para blogger baik dalam negeri maupun luar negri. Secara umum blog adalah aplikasi berupa tulisan maupun gambar yang dimuat dalam sebuah posting. Tapiiii gak Cuma itu, kita juga bisa memodifikasi blog sesuai dengan keinginan kita guys. Seperti tamplate atau tampilan blog, kita dapat mengubahnya sesuai dengan keinginan kita. Hanya dengan sedikit bantuan dari Dreamweaver kita dapat mengubah semua tampilan, baik bentuk, tata letak, warna, juga gambar-gambarnya. Gini nih caranya ..



Fistly .. buat rencana design blog yang kamu mau (sketsa layoutnya). Dari sketsa yang udah dibuat,kita bisa tau ukuran layout dan jumlah coloumn yang akan digunakan. Setelah kita menentukan sketsa layout, dan menghitung jumlah coloumn blog yang akan kita buat, selanjutnya layout dapat dibuat dengan bantuan table. Caranya gini :
Arahkan kursor pada kolom design, lalu klik menu insert > table akan tampil kotak dialognya. Isi seperti contoh, setelah itu, tabel dapat diedit sendiri sesuai keinginan, dengan menggunakan bantuan kotak properties yang berada dibawah.

Atau dengan mengetikkan listing dibawah ini pada kolom code :

Keterangan:
  • Table width : tinggi tabel atau layout yang diinginkan
  • Colspan : penyatuan kolom-kolom menjadi satu
  • Rowspan : sama dengan colspan, bedanya ini menyatukan baris-baris 
  • Valign : perataan ke arah vertikal 
  • Align : perataan ke arah horisontal 
  • Bgcolor : mengubah warna sesuai yang diinginkan 
Dan djang ... jang ... Hasilnya kaya gini nih guys :
Untitled Document
HEADER
MENU ATAS
SLIDE JQUERY MENU KANAN 1
MENU KANAN 2
MENU KANAN 3
NAVIGASI 1 NAVIGASI 2 WIDGETS
ISI KIRI ISI TENGAH
FOOTER

1 komentar on "Membuat Layout Menggunakan Table"

Jefcenter on October 8, 2012 at 9:01 AM said...

Excellent

Post a Comment

 

Princess Amma Copyright © 2009 Paper Girl is Designed by Ipietoon Sponsored by Online Business Journal