Memilih Efek
Masing- masing event mempunyai efek yang bisa anda pilih :
1. Blend – efek perubahan berupa pengaburan halaman saat ini menuju ke halaman baru.
2. Blinds (vertikal / horisontal) – efek ini seperti membuka pancaran sinar ke dalam halaman, baikvertikal maupun
horisontal.
3. Box (In / Out) – efek ini menggambarkan perubahan berbentuk kotak simetri dari sisi pinggir browser ke center,
ini untuk yang In. Sedangkan untuk yang Out, dari tengah ke sisi pinggir browser.
4. Checkerboard ( Across / Down ) – efek ini, membagi screen menjadi luas yg kecil-kecil yang kemudin terhapus.
5. Circle ( In / Out ) – hampir sama dengan efek box, tetapi berbentuk lingkaran.
6. Random – efek perubahannya random.
7. Random Bars – efek ini membagi screen menjadi batang-batang kecil yang masing-masing bergerak ke
atas/bawah atau kanan/kiri.
8. Split – efek ini memecah halaman menjadi dua bagian.
Membuat page transition.
Transition, adalah efek yang dapat dilihat ketika terjadi perubahan tampilan halaman web.
Untuk membuat efek dari page transition, berikut ini akan diuraikan sedikit langkahnya, yaitu :
1. Buat dua halaman yang berbeda, misal, coba.htm dan testing.htm.
2. Buat link dari halaman coba.htm ke halaman testing.htm.
3. Pada halaman coba.htm, pilih menu Format, Page transition kemudian pilih Page Enter, durasi 5, dan pilih
Box In.
4. Simpan kedua halaman tersebut, dan lihat perubahannya.
DHTML Effect Toolbar
DHTML Effect toolbar adalah toolbar untuk membuat efek – efek dhtml pada halaman web. Untuk menampilkan
toolbar ini, pilih menu Format, Dynamic Html effects, maka akan muncul toolbar di bawah ini.
DHTML effects toolbar
Ada tiga bagian pop up menu seperti yang terlihat di atas. Bagian pertama adalah On, merupakan kumpulan
event yang bisa anda pilih untuk halaman web anda. Bagian kedua adalah Apply, untuk memilih efek yang
anda inginkan dari elemen yang anda pilih. Dan bagian ketiga merupakan pemilihan efek yang lebih detil.
Remove Effects, untuk menghapus efek dhtml.
1. Pada bagian Apply, pilih Formatting dan di set choose font.
2. Pilihlah jenis font, warna font dan efek font sebagai efek perubahan event mouse over.
3. Lihat efek dhtml tersebut di layar preview atau browser, maka ketika mouse over atau melewati teks Musi
Riverside, maka teks tersebut akan berubah sesuai dengan perubahan yang kita pilih pada saat setting fontnya.
12
Untuk aplikasi event – event yang lain silahkan dicoba sendiri sebagai bahan latihan.
FRONTPAGE COMPONENT
Frontpage Component adalah penambahan html dasar yang akan memberikan fungsi tambahan dan style pada
halaman web anda. Beberapa component tersebut, diantaranya yang akan dibahas pada modul ini adalah hover
button, hit counter, marquee, navigation bars.
Hover Button
Hover button adalah button/tombol yang mempunyai hyperlink dan animasi sederhana. Ketika di klik atau mouse
over di atas tombol tersebut maka akan ada perubahan seperti warna tombol berubah atau tombol berganti gambar.
Membuat hover button
Untuk membuat hover button, ikuti langkah berikut ini :
1. Pada page view letakkan kursor sesuai yang diinginkan.
2. Pilih menu Insert, Component, Hover button, maka akan muncul kotak dialog hover button properties seperti
pada gambar.
3. Pada Button text, tulis label button
yang diinginkan. Jika anda ingin
menggunakan gambar button yang
sudah ada, anda tidak perlu
memasukkan label pad Button
textnya, anda kosongi saja.
4. Pada Link to, isikan alamat URL
halaman yang akan di link-kan.
5. Pada button color, pilih warna buttonnya.
Jika anda menggunakan gambar
( custom ) warna ini tidak akan
memberi efek.
6. Pada effect, pilih efek hover yang
diinginkan.
7. Pilih ukuran tombolnya, width dan height.
8. Pilih background color untuk button.
9. Pilih effect color, untuk perubahan warna button.
10. Jika ingin mengganti jenis dan besr kecil font, klik font.
11. Klik OK.
Untuk memodifikasi tampilan hover button, dapat anda lakukan pada
kotak dialog hover button properties dengan cara klik kanan pada hover
button, pilih hover button properties.
Hit Counters
Hit counter berfungsi sebagai pencatat jumlah user yang mengakses
web. Dihitung berdasarkan jumlah ‘hit’ user ke suatu web.
Hit counter ini akan jalan jika pada komputer anda diinstall Frontpage
extensions.
Membuat Hit Counters
Untuk membuat hit counters ikuti langkah beikut ini :
1. Pada page view, letakkan kursor sesuai letak hit counters yang
akan anda buat.
2. Pilih menu Insert, Component, Hit Counter, maka akan muncul
kotak dialog hit counter properties, seperti pada gambar di bawah.
3. Pada counter style, pilih style counter yang anda inginkan, jika anda mempunyai gambar sendiri pilih custom
picture, masukkan path relative letak dari gambar tsb.
4. Masukkan angka awal yang diinginkan pada Reset counter to
Masing- masing event mempunyai efek yang bisa anda pilih :
1. Blend – efek perubahan berupa pengaburan halaman saat ini menuju ke halaman baru.
2. Blinds (vertikal / horisontal) – efek ini seperti membuka pancaran sinar ke dalam halaman, baikvertikal maupun
horisontal.
3. Box (In / Out) – efek ini menggambarkan perubahan berbentuk kotak simetri dari sisi pinggir browser ke center,
ini untuk yang In. Sedangkan untuk yang Out, dari tengah ke sisi pinggir browser.
4. Checkerboard ( Across / Down ) – efek ini, membagi screen menjadi luas yg kecil-kecil yang kemudin terhapus.
5. Circle ( In / Out ) – hampir sama dengan efek box, tetapi berbentuk lingkaran.
6. Random – efek perubahannya random.
7. Random Bars – efek ini membagi screen menjadi batang-batang kecil yang masing-masing bergerak ke
atas/bawah atau kanan/kiri.
8. Split – efek ini memecah halaman menjadi dua bagian.
Membuat page transition.
Transition, adalah efek yang dapat dilihat ketika terjadi perubahan tampilan halaman web.
Untuk membuat efek dari page transition, berikut ini akan diuraikan sedikit langkahnya, yaitu :
1. Buat dua halaman yang berbeda, misal, coba.htm dan testing.htm.
2. Buat link dari halaman coba.htm ke halaman testing.htm.
3. Pada halaman coba.htm, pilih menu Format, Page transition kemudian pilih Page Enter, durasi 5, dan pilih
Box In.
4. Simpan kedua halaman tersebut, dan lihat perubahannya.
DHTML Effect Toolbar
DHTML Effect toolbar adalah toolbar untuk membuat efek – efek dhtml pada halaman web. Untuk menampilkan
toolbar ini, pilih menu Format, Dynamic Html effects, maka akan muncul toolbar di bawah ini.
DHTML effects toolbar
Ada tiga bagian pop up menu seperti yang terlihat di atas. Bagian pertama adalah On, merupakan kumpulan
event yang bisa anda pilih untuk halaman web anda. Bagian kedua adalah Apply, untuk memilih efek yang
anda inginkan dari elemen yang anda pilih. Dan bagian ketiga merupakan pemilihan efek yang lebih detil.
Remove Effects, untuk menghapus efek dhtml.
1. Pada bagian Apply, pilih Formatting dan di set choose font.
2. Pilihlah jenis font, warna font dan efek font sebagai efek perubahan event mouse over.
3. Lihat efek dhtml tersebut di layar preview atau browser, maka ketika mouse over atau melewati teks Musi
Riverside, maka teks tersebut akan berubah sesuai dengan perubahan yang kita pilih pada saat setting fontnya.
12
Untuk aplikasi event – event yang lain silahkan dicoba sendiri sebagai bahan latihan.
FRONTPAGE COMPONENT
Frontpage Component adalah penambahan html dasar yang akan memberikan fungsi tambahan dan style pada
halaman web anda. Beberapa component tersebut, diantaranya yang akan dibahas pada modul ini adalah hover
button, hit counter, marquee, navigation bars.
Hover Button
Hover button adalah button/tombol yang mempunyai hyperlink dan animasi sederhana. Ketika di klik atau mouse
over di atas tombol tersebut maka akan ada perubahan seperti warna tombol berubah atau tombol berganti gambar.
Membuat hover button
Untuk membuat hover button, ikuti langkah berikut ini :
1. Pada page view letakkan kursor sesuai yang diinginkan.
2. Pilih menu Insert, Component, Hover button, maka akan muncul kotak dialog hover button properties seperti
pada gambar.
3. Pada Button text, tulis label button
yang diinginkan. Jika anda ingin
menggunakan gambar button yang
sudah ada, anda tidak perlu
memasukkan label pad Button
textnya, anda kosongi saja.
4. Pada Link to, isikan alamat URL
halaman yang akan di link-kan.
5. Pada button color, pilih warna buttonnya.
Jika anda menggunakan gambar
( custom ) warna ini tidak akan
memberi efek.
6. Pada effect, pilih efek hover yang
diinginkan.
7. Pilih ukuran tombolnya, width dan height.
8. Pilih background color untuk button.
9. Pilih effect color, untuk perubahan warna button.
10. Jika ingin mengganti jenis dan besr kecil font, klik font.
11. Klik OK.
Untuk memodifikasi tampilan hover button, dapat anda lakukan pada
kotak dialog hover button properties dengan cara klik kanan pada hover
button, pilih hover button properties.
Hit Counters
Hit counter berfungsi sebagai pencatat jumlah user yang mengakses
web. Dihitung berdasarkan jumlah ‘hit’ user ke suatu web.
Hit counter ini akan jalan jika pada komputer anda diinstall Frontpage
extensions.
Membuat Hit Counters
Untuk membuat hit counters ikuti langkah beikut ini :
1. Pada page view, letakkan kursor sesuai letak hit counters yang
akan anda buat.
2. Pilih menu Insert, Component, Hit Counter, maka akan muncul
kotak dialog hit counter properties, seperti pada gambar di bawah.
3. Pada counter style, pilih style counter yang anda inginkan, jika anda mempunyai gambar sendiri pilih custom
picture, masukkan path relative letak dari gambar tsb.
4. Masukkan angka awal yang diinginkan pada Reset counter to
ConversionConversion EmoticonEmoticon