Layout dapat diartikan sebagai tata letak bagian bagian halaman body web, bagian bagian halaman web dapat berupa Header, banner, menu Navigasi, Halaman Utama/Content, Menubar, Footer, dan lain lain
Dengan desain Layout yang baik akan memudahkan pengunjung web anda memahami apa yang harus dia lakukan pada halaman anda. sebaliknya, desain yang buruk adalah apabila seorang pengunjung bingung apa yang harus dilakukan pada halaman tersebut. Untuk mendesain sebuah Layout, Anda dapat menerapkan 3 metode, yaitu, Tabel, Frame, dan Layer
Bagian yang paling penting agar sebuah halaman website terlihat rapi, indah, dan teratur adalah pengaturan tata letak bagian bagian halaman web.
Mengatur Layout Halaman Wb dengan metode Table
Metode Tble sering digunakan karena bagian bagian web akan terlihat lebih rapi dan simetris.
Membuat Table
> Buka kotak Dialog Table melalui salah satu cara berikut
- Melalui > Panel Insert > Common > Table
- Melalui > Panel Insert > Layout > Table
- Melalui > Menubar > Insert > Table
- Melalui Shorcut Keyboard > CTRL+ALT+T
> Setelah kotak dialog Table muncul, Masukkan parameter berikut
- Rows > 4 ( jumlah baris )
- Columns > 2 ( jumlah kolom )
- Table Width > 90% ( lebar table )
- Border Thickness > 1 ( ketebalan garis table )
- Cell Padding > 0 ( jarak antara teks dengan garis tepi Cell )
- Cel Spacing > 0 ( jarak antar Cell )
- Header > Top ( Menjadikan baris paling atas sebagai Header yang ditandai dengan penulisan teks secara tebal. Dalam mode Code Header adalah tag th )
- Caption > Kosongkan ( Judul sebuah Tabel )
- Summary > Kosongkan ( Deskripsi tentang Tabel )
> Klik > OK
Panel Properti Table
Untuk mengelola tabel, Anda akan sering berhadapan dengan panel properties table untuk mengatur atribut atribut tabel dan sel. Terdapat 2 jenis properti yang digunakan untuk mengelola tabel, yaitu properti tabel dan properti sel.
Properti Tabel
Properti tabel digunakan untuk mengatur properti keseluruhan tabel. Untuk menampilkan properti tabel, seleksi salah satu garis, baik baris maupun kolom atau dengan menyeleksi tag <table> pada tag inspector
Table : menampilkan dan memberi ID tabel
Rows : menampilkan dan mengubah banyak baris tabel
Cols : menampilkan dan mengubah banyak kolom tabel
Widht : menampilkan dan mengubah lebar tabel
Cellpad : menampilkan dan mengubah jarak antara teks dengan garis tepi Cell
CellSpace : menampilkan dan mengubah jarak antar Cell dalam table
Align : posisi relatif tabel pada halaman web
Align : posisi relatif tabel pada halaman web
Border : ketebalan garis pembentuk table
Class : menyisipkan aturan kelas CSS
Clear Columns Widths : menghapus lebar kolom tabel dan menyesuaikan dengan content dalam tabel
Clear Rows Heights : menghapus tinggi baris tabel dan menyesuaikan dengan content dalam tabel
Convert Table Widths to pixels : mengubah lebar tabel dalam satuan pixel
Convert Table Widths to Percents : mengubah lebar tabel dalam satuan Percent
Tidak ada komentar:
Posting Komentar