Bab V MEMBUAT WEB DENGAN LAYOUT TABLE Anda dapat

Front Page XP
Bab V
MEMBUAT WEB DENGAN LAYOUT TABLE
Anda dapat membuat tampilan web professional dengan menggunakan layout table dan layout cell. Layout table adalah
sebuah kerangkan table untuk tampilah halaman web Anda.Layout cell adalah bagian dari kerangka table sebagai tempat
untuk isi halaman web, termasuk teks, gambar, bagian web dan elemen yang lain. Secara bersama-sama, layout table
dan sel mewakili wilayah horizontal yang dapat ditambahkan oleh pengguna ke dalam halaman web, yang mana dapat
membuat susunan yang lebih variatif untuk isi dari web Anda.
Gambar Salah satu contoh bentuk Layout Table and cells
Gambar di atas menunjukan sebuah layout table dan sel, dimana layout table ditunjukan dengan background yang lebih
terang dan layout sel ditunjukan dengan kotak dengan warna yang lebih gelap di dalam table. Anda dapat menggunakan
tampilan layout table pada task pane Layout Tables and Cells untuk membantu Anda mengawali pembuatan halaman
web dengan cepat. Sebagai tambahan, Anda dapat mengubah halaman web yang berisi layout dan sel yang dapat
ditambahkan sendiri dengan Front Page atau program-program yang lain yang membantu dalam pembuatan tampilan
halaman web, termasuk Macromedia Dreamweaver.
Anda dapat menggambar sebuah layout table yang berisi sel pada sepanjang tepi atas halaman untuk tempat header
dengan gambar, sebuah sel pada tepi kiri halaman sebagai tempat link bar, dan sel lainnya yang berposisi sebagai isi
halaman utama web biasanya terlentak di sebelah kanan atas halaman. Anda dapat membuat kerangka table layout yang
sederhana maupun yang kompleks sesuai kebutuhan.
Cara Menggunakan Layout Table dan Sel
Anda dapat menggunakan layout table dan sel pada halaman web dengan Layout Tool yang tersedia dalam task pane
Layout Tables and Cells. Jika Layout Tables and Cells belum tampil maka pilih menu Table – Layout Tables and
Cells untuk menampilkannya. Anda dapat memilih kerangka sementara dari template layout table, atau membuatnya
sendiri, mengatur lebar dan tingginya, mengatur perataan, margin halaman dan memberi warna dan bingkai tertentu.
Saat Anda mengklik bingkai layout table atau layout sel untuk mengaktifkannya, akan muncul label yang berisi nilai lebar
kolom dan tinggi baris pada tiap sisinya. Pada bagian label terdapat kotak drop down yang berfungsi menampilkan daftar
pilihan untuk mengatur pilihan ukuran kolom dan baris.
Contoh gambar berikut ini menunjukan bagaimana sebuah layout table dan sel saat diklik bingkainya untuk mengaktifkan
layout table dan sel.
Tampilan saat Layout
Tool aktif
Gambar Layout tables and cells dengan bingkai aktif
Anda dapat memilih satu kolom atau baris pada table dan mengubah ukuran table dan mengubah ukuran table secara
otomatis sesuai ukuran jendela browser. Saat Anda mengklik drop down lebar kolom atau tinggi baris, dan mengklik
Make Column Autostrech atau LakeRow Autostrech, ukuran sel secara otomoatis akan menyesuaikan ukuran jendela
browser.
SMPK TM
Front Page XP
Task Pane Layout Tabel and Cells
Pada task pane ini, Anda dapat membuat Layout table, menyisipkan layout cell, mengatur lebar dan tinggi table / sel,
mengatur margin halaman, mengatur peralatan layout table atau sel, mengaktifkan dan menon aktifkan layout tools dan
memilih tampilan- tampilan layout table.
Layout Tables and Cells
Daftar pilihan layout table
Gambar Task pane Layout Tables and Cells
Memformat Layout Cell
Setelah menambahkan layout table and cells di dalamnya untuk menyusun tampilan web maka Anda dapat
menambahkan format seperti warna, bingkai, bayangan dan efek-efek dekoratif lainnya. Saat Anda menambahkan
sebuah layout table, secara otomatis Layout tools akan diaktifkan
Jika layout table and cells dalam keaadaan mati atau non aktif, Anda dapat mengaktifkannya lagi sewaktu-waktu dengan
mengklik tombol Show Layout Tool
 Prosedur untuk menambah / membuat layout table dari daftar template adalah:
1. Pilih menu Table – Layout Tables and cells
2. Pada task pane Layout Tables and Cells, pilih sebuah layout table dari daftar template.
 Prosedur untuk membuat table dengan Draw Layout Tabel adalah:
1. Pada New tables and cells, klik Draw Layout Table
2. Pindahkan mouse ke sudut kiri atas jendeladokumen, kemudian geser ke bawah untuk membuat table.

Prosedur untuk membagi sel pada layout table adalah:
1. Pada task pane Layout Tables and cells, pada bagian New tables and cells, klik Draw Layout cell
2. Pindahkan mouse ke sudut kiri atas jendela dokumen, geser ke bawah untuk membuat table. Kemudian,
ketik DATA SISWA dan perhatikan gambar berikut:
3. Pada salah satu kotak handle (kotak di sekitar object table), geser mouse untuk membagi sel. Untuk
membuat dua sel atau lebih adalah, klik Draw Layout Cell , tekan CTRL sambil menggeser mouse.
4. Untuk mengatur property dari sel terpilih, pada task pane Layout Tabels and cells, klik Cell Formatting
kemudian atur propertinya sesuai keinginan.
Mengatur Ukuran Layout Tabel dan Sel
Untuk mengatur ukuran layout table dan sel, lakukan salah satu perintah berikut:
 Prosedur untuk mengatur ukuran layout table atau sel adalah:
1. Klik bingkai layout table atau sel.
2. Tekan tombol ALT, dan geser bingkai untuk mengatur ukurannya.
 Prosedur untuk mengatur ukuran layout table atau sel dengan Autostrech adalah:
1. Untuk mengaktifkan layout table atau sel, klik bingkai layout table dan sel.
2. Pada label lebar kolom atau tinggi baris, klik anak panah untuk menampilkan menu drop down, pilih
perintah Make Row Autostretch atau Make Column Autostretch.
3. Prosedur untuk mengatur property layout table adalah:
 Klik bingkai table untuk mengaktifkan layout table yang ingin diatur propertinya.
 Pada taskpane Layout Tables and Cells, pada Table Properties, atur property sesuai
keinginan
Untuk mengatur margin default dari halaman web dan membiarkan layout table melebar sampai tepi
jendela dokumen, atur nilai property margin menjadi 0 (nol)
 Prosedur untuk mengatur property sudut dan bayangan sebuah layout sel adalah:
1. Klik bingkai sel di mana property sudut dan bayangannya akan diatur.
2. Pilih Cell Formatting pada task pane Layout Tables and Cells. Klik Cell Corners and Shadows.
SMPK TM
Front Page XP
3. Atur property sudut sebuah layout cell pada bagian Corners.
 Untuk menambahkan gambar pada sebuah sel, klik Use custom image, klik Browse untuk
mencari file gambar yang akan digunakan sebagai gambar sudut layout sel.
 Untuk mengatur lebar maupun tinggi sudut sel, atur nilai pada bagian Width dan Height
 Untuk memberi warna pada sudut sel, klik salah satu warna pada bagian Color.
 Untuk memberikan warna bingkai sudut sel, klik warna pada bagian Border Color
 Untuk menerapkan sebuah sudut pada sisi, pada bagian Apply, klik pilihan yang diinginkan.
Atur property bayangan dari sebuah layout sel pada bagian Shadows
 Untuk mengatur lebar bayangan, ketik nilai pada bagian Width
 Untuk mengatur intensitas bayangan, ketik nilai pada bagian Softness.
 Untuk member warna bayangan, klik warna pada bagian Color.
 Untuk menambahkan warna bingkai sel, klik warna pada bagian Border Color
 Untuk mengatur posisi jatuhnya bayangan, klik salah satu pilihan pada bagian Apply
Mengatur Properti Layout dan Bingkai Layout Sel
Untuk mengatur property layout dan bingkai layout sel, lakukan:
1. Klik bingkai sel dimana property layout dan bingkainya akan diatur.
2. Pada task pane Layout Tables and Cells, klik Cell Formatting
3. Pada Task Pane Cell Formatting klik Cell properties and Borders
SMPK TM
Front Page XP
4. Atur property layout sel pada bagian Layout Cell properties
5. Atur property dan bingkai layout sel pada bagian Border
Menghapus Layout Table and Cells
Prosedur untuk menghapus sel tunggal adalah:
1. Klik garis bingkai dari layout cell, kemudian tekan tombol Delete pada keyboard.
2. Klik garis bingkai, Klik kanan, dan pilih perintah Delete Layout Cell
Prosedur untuk menghapus sebuah layout table adalah:
1. Jika Layout Tool dan keseluruhan table dalam keaadaan aktif, tekan tombol Delete pada keyboard.
2. Jika Layout Tool atau layout table dalam keaadaan tidak aktif, pada task pane Layout Tables and Cells, klik
Show Layout Tool untuk mengaktifkannya, dan tekan tombol Delete pada keyboard.
Menyisipkan Inline Frame
Inline frame adalah sebuah halaman web yang berada dalam suatu halaman web yang lain, dalam hal ini kita dapat
menggunakan inline frame ini untuk menampilkan isi dari halaman-halaman web yang sudah dibuat hyperlink. Dengan
kata lain Inline frame sebagai target frame.
Langkah-langkah untuk membuat Inline frame
1. Taruh kursor pada tempat/ sel yang diinginkan
2. Klik menu Insert > Inline Frame
3. Halaman web inline frame akan muncul berbentuk kotak yang harus disesuaikan luasnya sesuai kebutuhan. D I
dalam halaman ini juga memiliki dua tombol, yaitu Set Initial Page dan New Page.
a. Klik Set Initial Page apabila Anda menggunakan halaman web yang sudah pernah Anda buat.
b. Klik New Page apabila Anda ingin membuat halaman baru.
4. Simpan halaman ini.
SMPK TM