Link Bar
378
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
1 Membuat Link Bar
Link Bar adalah bar yang terletak di bagain atas halaman dan bertugas menampung
link-link yang ada. Link bar sering disbut juga dengan Navigator. Komponen ini
akan muncul pada seluruh halaman di dalam situs.
379
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
5. Klik ganda icon Home Page sehingga halaman tersebut terbuka.
6. Pasangkan tema Arcs pada Home Page. Aktifkan Format è Theme…Pada
kotak dialog Themes, aktifkan palihan Selected page(s) dan Arcs , lalu OK.
380
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
9. Tempatkan kursor di bawah teks tersebut atau pada lokasi lain yang Anda
inginkan. Lihat Gambar 13.5 di bawah.
381
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
Gambar 13.7 Pilihan to mbol tema
13. Klik salah satu pilihan, misalnya Blocks , seperti Gambar di atas. Lalu klik
Next. Muncul pemilihan posisi link bar.
382
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
Gambar 13.9 Penamaan link bar
15. Tuliskan namanya, misalnya Alamiah lalu klik OK. Muncul kotak dialog
Link Bar Properties.
383
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
ke kotak dialog Link Bar Properties. Di sana terdapat sebuah link bernama
Halaman Dua, lihat Gambar 13.12 berikut ini:
384
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
Gambar 13.14 Link Halaman Tiga
20. Ulangi cara di atas untuk halaman Satu.
21. Lalu klik tombol OK, pada halaman akan muncul tiga tombol berjudul
Halaman Satu, Halaman Dua dan Halaman Tiga. Seperti Gambar 13.15.
Gambar 13.15 Link bar terdiri dari tiga tombol terpasang pada halaman
Kemudian klik tombol Preview in Browser, tampilan link bar pada browser tampak
pada Gambar 13.16.
385
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
Gambar 13.16 Tampilan Link bar pada browser
Kemudian klik tombol pertama (Halaman Satu), maka browser akan membuka
Halaman Satu, seperti Gambar 13.17 sebelah kiri. Klik Back pada browser, muncul
halaman Home Page .
Kemudian klik tombol kedua (Halaman Dua), maka browser akan membuka
Halaman Dua, seperti Gambar 13.17 tengah.
Kemudian klik tombol ketiga (Halaman Tiga), maka browser akan membuka
Halaman Tiga, seperti Gambar 13.17 kanan.
386
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
1.2 Mengedit Link Bar
Untuk mengedit link bar yang sudah terbentuk, caranya:
1. Pada halaman klik ganda link bar , muncul kotak dialog Link Bar Properties.
387
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
5. Untuk menambah link, klik tombol Add Link. Dan gunakan kotak dialog Add
Link, lalu OK.
6. Untuk mengganti style tombol, klik tab Style lalu pilihlah jenis tombol pada
daftar Choose a style ., misalnya Network Blitz .
388
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
Gambar 13.22 berikut ini menunjukkan hasil pengeditan tombol dan style, yaitu
menggunakan Network Blitz dan style Link bar Vertical.
Gambar 13.22 Tombol Network Blitz dan style Link bar Vertical
9. Setelah link bar terpasang di halaman, untuk menampilkan halaman tujuan link,
klik salah satu tombol sambil menekan tombol CTRL pada keyboard. Hal ini
sangat membantu untuk memeriksa koneksi dan tujuan link.
10. Untuk memindah link bar yang sudah terpasang ke lokasi lain di halaman, klik
link bar lalu drag ke lokasi baru dan lepaskan drag di tempat baru tersebut.
11. Anda juga bisa menggunakan cara cut – paste untuk memindahkan link bar, hal
ini cocok untuk lokasi asal dan lokasi tujuan yang berjauhan dan tidak bisa
ditampilkan salam satu tampilan layar. Cara ini juga sangat sesuai untuk
memindah link bar dari satu halaman ke halaman lain. Jadi, caranya adalah klik
kanan link bar lalu klik perintah Cut. Pada lokasi baru, klilk kanan dan klik
Paste, maka link bar berpindah ke lokasi tersebut.
12. Untuk menghapus link bar yang telah terpasang, klik kanan link bar lalu klik
Delete. Atau bisa juga menggunakan cara yang lebih praktis, yaitu klik link bar
lalu tekan DELETE pada keyboard. Pada waktu Anda klik link bar, jika muncul
kotak dialog Add to link bar, tekanlah Cancel untuk menutupnya.
389
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
2 Membuat Link Bar Next - Back
Link bar Next – Back sebenarnya masih terkait dengan jenis link bar Custom Link.
Bedanya terletak pada posisi halaman dan posisi tujuan link.
Link bar Custom Link, yang telah kita bahas sebelumnya, cocok untuk Home Page.
Sedangkan link bar Next – Back cocok untuk halaman yang memiliki “teman
setingkat”. Misalnya untuk perpindahan antara halaman Anak dengan Anak lainnya.
Atau perpindahan antara halaman Cucu dengan Cucu lainnya.
Baiklah, mari kita menyusun link bar Next – Back.
1. Tampilkan navigatiion View.
2. Buatlah tiga halaman di bawah Home Page.
3. Namailah dengan Satu, Dua dan Tiga.
4. Klik ganda halaman Satu sehingga terbuka.
5. Gantilah warna latar belakang halaman menjadi biru (Klik kanan è Properties.
Pada kotak dialog klik Background dan pilihlah warna biru).
6. Tambahkan teks yang sesuai pada halaman. Misalnya tentang judul halaman,
“Halo aku halaman 1”.
7. Formatlah warna font sehingga sesuai dengan warna biru, misalnya putih, biru
muda, merah muda, kuning atau warna terang lainnya.
8. Untuk mempertegas tampilan, tambahkan garis horisontal pada lokasi tertentu.
Caranya, aktifkan perintah Insert è Horisontal Line .
9. Klik lokasi penyisipan Link Bar, misalnya seperti Gambar 13.23.
390
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
Gambar 13.23 Penampatan kursor
10. Aktifkan pilihan Insert _ Web Component. Kotak dialog Insert Web
Component terbuka.
391
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
Gambar 13.25 Pilihan Blank
12. Pilihlah jenis tombol yang cocok dengan warna halaman biru, misalnya Blank.
Gambar 13.25. Klik Next, muncul kotak dialog pemilihan jenis link bar, apakah
horisontal (yang pertama) atau yang vertikal (pilihan kedua).
392
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
Gambar 13.27 Pengaturan link
14. Klik kotak cek Home Page, lalu klik tombol OK. Hasilnya pada halaman seperti
Gambar 13.28.
393
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
2.1 Mengatur halaman dua
Setelah mengatur halaman Home Page dan halaman Satu, berikutnya kita akan
mengatur halaman Dua.
1. Klik ganda halaman Dua sehingga terbuka.
2. Gantilah warna latar belakang halaman menjadi biru muda (Klik kanan lalu klik
perintah Properties. Pada kotak dialog Page Properties klik Background dan
pilihlah warna biru muda).
3. Tambahkan teks yang sesuai pada halaman. Misalnya tentang judul halaman,
“Ini halaman 2”.
4. Formatlah warna font sehingga sesuai dengan warna biru muda.
5. Tambahkan garis horisontal (Insert è Horisontal Line ) pada lokasi tertentu
untuk mengatur komposisi.
6. Klik lokasi penyisipan Link Bar - Back dan Next, misalnya seperti Gambar
13.29.
394
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
Gambar 13.30 Pengaturan
9. Pilihlah jenis tombol yang cocok dengan warna halaman biru muda, misalnya
Waves. Gambar 13.31.
395
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
Gambar 13.32 Pilihan Horisontal
11. Jangan ubah pilihan pertama (horis\ontal) yang sudah aktif. Klik Next, muncul
kotak dialog pengaturan link.
396
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
Gambar 13.34 Hasli pemasangan pada halaman
Perhatikan tombol yang muncul, kini berjumlah tiga, yaitu Back, Home (hasil
pengaktifan pilihan Home Page) dan Next. Muncul tombol Back, sebab ini adalah
halaman kedua di dalam kelompoknya (sehingga masih ada halaman sebelumnya)
Dan muncul tombol Next sebab masih ada halaman berikutnya (ketiga).
397
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
Gambar 13.35 Lokasi kursor
7. Aktifkan pilihan Insert _ Web Component. Kotak dialog Insert Web
Component terbuka.
398
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
Gambar 13.37 Pilihan Axis
9. Pilihlah jenis tombol yang cocok, misalnya Axis . Gambar 13.37. Klik Next,
muncul kotak dialog pemilihan jenis link bar, apakah horisontal (yang pertama)
atau yang vertikal (pilihan kedua).
399
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
Gambar 13.39 Kotak dialog Link Bar Properties
11. Klik Kotak cek Home Page, lalu OK. Hasilnya:
400
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
2.3 Tampilan di browser
Nah, sampai di sini kita berhasil menyusun dan mem-format keempat halaman. Kini
saatnya untuk mengujinya di browser.
Aktifkan halaman Home Page lalu klik tombol Preview in Browser. Tampilannya
tampak seperti Gambar 13.42.
401
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
Gambar 13.43 Halaman Dua
Pada Home Page klik tombol Halaman Tiga, muncul Halaman Tiga seperti Gambar
13.44. Klik tombol Home, kembali ke Home Page.
402
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
3 Membuat Link Bar berdasarkan Struktur
Jadi begitulah pemakaian Web Component untuk membuat link bar, baik custom
maupun Back-Next.
Kalau Anda perhatikan, pembuatan link bar sangat tergantung dengan struktur
halaman.
Jika Anda menggunakan situs dengan banyak halaman, maka akan lebih mudah jika
Anda memanfaatkan fasilitas terakhir yang disediakan FrontPage XP dalam
membuat link bar, yaitu dengan menggunakan struktur.
Langkah yang diperlukan adalah:
1. Buatlah situs web baru, misalnya web13b. Caranya: aktifkan File à New Page
or Site. Lalu klik ganda One Page Web. Lihat Gambar 13.45.
403
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
Gambar 13.46 Susunan web13b
6. Klik ganda Home Page, sehingga terbuka.
7. Terapkan tema Balance untuk seluruh halaman di dalam situs. Caranya, pada
kotak dialog Themes aktifkan All page(s) dan Balance . Gambar 13.47.
404
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
Gambar 13.48 Pengaturan Page Banner
9. Klik OK, hasilnya seperti Gambar 13.49.
405
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
Gambar 13.51 Halaman Lapis1_a
13. Ulangilah lamgkah di atas untuk halaman selanjutnya (lapis1_b, lapis2_c,
lapis2_d, lapis2_e, lapis2_f, lapis2_g dan lapis2_h).
406
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
Gambar 13.53 Pilihan mengikuti tema
5. Jangan ubah pilihan (menggunakan tema situs), lihat Gambar 13.53. Kemudian
klik Next, muncul pilihan style link bar.
407
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
Gambar 13.55 Diagram struktur situs
7. Jangan ubah pilihan (Child level), kemudian klik OK. Hasilnya seperti Gambar
13.56.
Gambar 13.56
8. Pada Home Page muncul Link bar dengan dua tombol berjudul Lapis1_a dan
Lapis1_b. Lihat Gambar 13.56. Jika posisinya tidak tepat ditengah, Anda bisa
menggunakan tombol Center pada toolbar Formatting untuk membawanya ke
tengah.
9. Cobalah jalankan di browser, tampilannya seperti Gambar 13.57.
408
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
Gambar 13.57 Home Page tampil di browser
Perhatikan, kalau kursor Anda tempatkan tepat di atas tombol, maka gambarnya
akan berubah yang menandakan bahwa tombol tersebut sedang tersorot.
Jika Anda menempatkan kursor selama beberapa saat, maka akan muncul hint, yaitu
keterangan singkat yang dikaitkan dengan tombol tersebut.
Klik masing-masing tombol, akan membuka halaman yang bersesuaian. Misalnya
tombol Lapis1_a akan membuka halaman Lapis1_a, seperti Gambar 13.58.
409
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
4. Kiri Link Bars, kanan Bar based on navigation structure. Lalu klik Next, muncul
pilihan style bar:
5. Jangan ubah pilihan (menggunakan theme situs), klik Next. Muncul pilihan
posisi link bar.
6. Jangan ubah pilihan horizontal, klik Finish. Muncul kotak dialog Link Bar
Properties untuk memilih jenis tombol.
410
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
Gambar 13.60 Tombol muncul pada halaman
9. Ulangi langkah di atas untuk halaman Lapis1_b.
411
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
Gambar 13.61 Pilihan jenis struktur
7. Pilihlah Same Level dan Home Page dan Parent Home.
8. Klik OK, hasilnya seperti Gambar 13.62.
412
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
3.4 Membuat tombol Next dan Back
Setelah membuat tombol untuk link turun-naik, kini kita akan menyusun tombol
untuk link horisontal, yaitu Next dan Back.
Langkah yang diperlukan adalah:
1. Kemudian untuk anak-anak dari Lapis1_b, kita akan menggunakan tombol
Next dan Back. Bukalah halaman Lapis2_f
2. Klik lokasi tepat di bawah Page Banner, klik Center untuk menengahkan
letaknya.
3. Jalankan perintah Insert è Navigation
4. Kiri Link Bars, kanan Bar based on navigation structure. Lalu klik Next, muncul
pilihan style bar:
5. Jangan ubah pilihan (menggunakan theme situs), klik Next. Muncul pilihan
posisi link bar.
6. Jangan ubah pilihan horizontal, klik Finish.
Gambar 13.63 Pilihan Back and Next, Home Page dan Parent page
7. Pilihlah Same Level dan Home Page dan Parent Home.
8. Klik OK, hasilnya:
413
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
Gambar 13.64 Tombol Home, Up dan Next
9. Perhatikan Gambar 13.64 di atas, untuk “naik” ke lapisan atasnya (Parent Level),
FrontPage XP menggunakan tombol Up. Berarti itu link ke halaman Lapis1_a
yang merupakan induk halaman Lapis2_c ini.
10. Jangan lupa menyimpan hasil pemasangan ini.
11. Ulangi untuk halaman Lapis2_g, dan Lapis2_h.
Setelah semuanya terpasang, Anda bisa mencobanya di browser (klik tombol
Preview in Browser), akan seperti Gambar 13.65.
414
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
Gambar 13.66 Halaman anak pertama
Kalau Anda klik salah satu tombol anak maka muncul halaman cucu atau halaman
lapis kedua, misalnya Lapis2_c yang merupakan cucu pertama.
Anda kini turun di lapisan kedua atau lapisan paling bawah di dalam situs ini.
Gambar 13.67.
415
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
Pada halaman Lapis2_c ini karena tidak memiliki anak, maka hanya tersedia akses
ke saudara-saudaranya, yaitu halaman setingkat namun masih dalam satu induk,
yaitu Lapis2_c, Lapis2_d dan Lapis2_e.
Bagaimana dengan anak kedua (Lapis1_b) dan anak-anaknya (Lapis2_f, Lapis2_g,
Lapis2_h)?
Pada prinsipnya memiliki perilaku yang sama sebab memiliki struktur dan jumlah
yang sama persis dengan kelompok anak pertama yang telah kita bahas di atas.
Baiklah, untuk mengakses kelompok kedua, sebaiknya Anda berangkat dari Home
Page. Klik tombol Home, di manapun Anda sedang berada. Kemudian klik tombol
Lapis1_b, tampilannya seperti Gambar 13.68.
416
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "