Bab III Web Component Untuk membuat halaman web Anda lebih

Bab III
Web Component
Untuk membuat halaman web Anda lebih lengkap dan nampak lebih indah ada beberapa komponen
yang dapat disisipkan pada halaman web tersebut.
Horizontal Line
Sesuai dengan namanya fungsi ini akan membuat garis mendatar pada posisi yang Anda inginkan.
Letakkan cursor pada posisi yang Anda inginkan. Pilihlah: Insert-Horizontal Line. Jika Anda sudah
pernah menentukan theme maka garis yang terbentuk akan otomatis mengikuti pola pada theme
tersebut.
Tanggal dan Jam
Fungsi ini menambahkan tampilan tanggal dan jam pada web. Letakkan cursor pada posisi yang Anda
inginkan. Pilihlah: Insert-Date and Time. Model tampilan dapat Anda tentukan sesuai kebutuhan.
 Date this page was last edited
 Date this page was last automatically updated
 Date format
 Time format
Simbol
Apakah Anda pernah melihat susunan hyperlink seperti di bawah ini?
Garis-garis tegak yang memisahkan masing-masing hyperlink pada menu tersebut dibuat dengan
menyisipkan simbol. Letakkan cursor pada posisi yang diinginkan. Click insert-symbol, lalu pilih symbol
yang diinginkan. Atau dengan menekan tombol keyboard
+
Interactive button
Komponen interactive button juga disebut komponen hover button, tetapi pada Microsoft Frontpage 2003
ini kita sebut Interactive Button. Perbedaannya,di sini sudah langsung disediakan berbagai pilihan tombol
yang dapat digunakan. Fungsinya masih sama, yaitu memberikan sebuah link pada tombol yang
menampilkan efek visual apabila mouse ditempatkan di atasnya dan pada waktu ditekan. Prosedur
membuat interactive button adalah sebagai berikut:
1. Aktifkan salah satu halaman dan kemudian klik menu Insert – Web Component atau Anda
dapat langsung mengklik menu Interactive Button yang ada.
Gambar Kotak dialog Insert Web Component
2. Jika Anda pilih Web Component maka akan muncul kotak dialog seperti gambar di atas.
Pastikan Dinamic Effects yang terpilih pada bagian Component Type dan pada bagian Choose
an Effect, pilih Intercative Button, kemudian Finish. Tetapi, jika Anda pilih menu Interactive
Button maka akan tampil kotak dialog seperti pada gambar berikut:
Gambar Kotak dialog Interactive Button
3. Pada tabulasi Button, Anda dapat mengatur property-properti sebagai berikut:
Properti
Preview
Buttons
Text
Link
Fungsi
Untuk melihat contoh efek yang terdapat pada tombol terpilih. Arahkan pointer mouse ke
tombol tersebut untuk melihat tombol tersebut untuk melihat efek interactive yang dimiliki dan
klik untuk melihat efek tombol saat diklik
Berisi berbagai macam pilihan tombol yang dapat Anda gunakan.
Menentukan judul tombol/ teks yang akan ditampilkan pada tombol.
Menentukan halaman target. Anda dapat langsung mengetikan nama halaman tujuan atau
juga dengan klik Browse untuk mencari letak halaman target.
4. Anda dapat mengubah jenis huruf dan beberapa ketentuan lain yang dapat Anda berikan, di
antarannya:
Properti
Preview
Font
Font Style
Size
Original Font Color
Hovered Font Color
Pressed Font Color
Horizontal Alignment
Vertical Alignment
Fungsi
Melihat contoh efek yang terdapat pada tombol terpilih. Arahkan pointer mouse ke tombol
tersebut untuk melihat efek interactive yang dimiliki dan klik untuk melihat efek tombol saat
ditekan atau diklik
Mengatur jenis atau bentuk huruf
Mengatur gaya pencetakan huruf, dengan pilihan cetak tebal, cetak miring, dan garis bawah.
Mengatur ukuran huruf
Menentukan warna dasar huruf tombol
Menentukan warna huruf saat pointer mouse menunjuk atau berada di atas tombol tersebut
Menentukan warna huruf pada saat tombol ditekan
Menentukan posisi teks atau perataan teks terhadap tombol secara horizontal
Menentukan posisi teks atau perataan teks terhadap tombol secara vertical.
5. Pada tabulasi Image, Anda dapat mengatur property-properti berikut:
Properti
Preview
Width
Height
Maintain Propotion
Create hover image
Create pressed image
6. Klik OK
Fungsi
Melihat contoh efek yang terdapat pada tombol terpilih. Arahkan pointer mouse ke tombol
tersebut untuk melihat efek interactive yang dimiliki dan klik untuk melihat efek tombol saat
diklik
Mengatur lebar tombol
Mengatur tinggi tombol
Ababila check box dalam keadaan tercentang maka nilai width dan height akan berubah
secara proporsional
Apabila check box diaktifkan maka efek hover yang sudah Anda berikan akan ditampilkan.
Demikian juga sebaliknya apabila check box dimatikan maka efek hover tidak akan
ditampilkan.
Apabila check box diaktifkan maka efek pada image hover akan ditampilkan. Demikian juga
sebaliknya
Marquee
Barangkali Anda pernah melihat pada sebuah web ada serangkaian kalimat yang bergerak secara
scrolling dan berulang terus menerus. Teks seperti itu dibuat dengan fasilitas marquee.
Teks bergerak secara horisontal
Cara pembuatannya:
[1]
Letakkan cursor pada posisi yang diinginkan
[2]
Click insert-web component
[3]
Pada Component type pilihlah dynamic effects
[4]
Pada Chose an effect pilihlah marquee
[5]
Click Finish
[6]
[7]
[8]
[9]
[10]
[11]
Pada Text ketikkan teks yang akan ditampilkan
Pilih Direction untuk menentukan arah pergerakan
Tentukan speed untuk menentukan kecepatan gerakan
Tentukan Behavior untuk menentukan sifat gerakan (Scroll: berputar berulang-ulang, Slide:
bergerak ke satu arah lalu berhenti, Alternate: bergerak bolak-balik)
Bacground Color untuk menentukan warna latar teks
Click OK
Teks bergerak secara Vertikal
Cara membuatnya
1. Langkah awalnya sama dengan langkah diatas
2. Pilih objek marquee
3. Lakukan editing pada kode dengan mengaktifkan Quick tag editor melalui menu edit
Lakukan pengeditan dengan menaruk kursor pada kata terakhir dalam kode tersebut, tekan
space bar pilih sub menu Diriction, kemudian ketik tanda sama dengan(=) pilih lagi sub menu up
(untuk bergerak naik) atau down (untuk bergerak turun. Setelah selesai klik tanda ()
Keterangan Kotak dialog Marquee Properties
 Direction berfungsi menentukan arah munculnya teks, tersedia dua pilihan dari sebelah kiri atau
kanan.




Speed. Nilai delay untuk mengatur kecepatan, sedangkan Amount untuk mengatur kuantitas dari
jalannya teks yang dipasang. Semakin tinggi nilai pada masing-masing kotak maka semakin
lambat component marquee berjalan.
Behavior. Berfungsi mengatur model atau jenis marquee. Apabila anda memilih Scroll, teks akan
berjalan dari kanan ke kiri berulang- ulang. Apabila Anda memilih Slide maka teks akan berhenti
apabila sudah sampai pada batas kiri halaman. Pada pilihan Alternate, teks akan berjalan ke kiri
kemudian ke kanan kemudian ke kiri lagi begitu seterusnya.
Repeat Beri tanda check pada pilihan continuaously untuk memberikan pengulangan secara
terus menerus. Atau dengan mengatur sendiri jumlah pengulangan yang diinginkan dengan
mengetikan nilai pada kotak yang telah disediakan.
Background color Untuk memperindah tampilan. Anda dapat menambah warna latar belakang
dengan memilih daftar warna pada bagian background color.