Anda di halaman 1dari 40

Bab 13

Link Bar

ABIMANYU PUTRA RAMADHAN


Tecnical Director Programer Smart Online School
" Sekolah Khusus Netter Indonesia "
Daftar Isi Bab 13

1 Membuat Link Bar .......................................................................................379


1.1 Langkah membuat link bar............................................................................. 379
1.2 Mengedit Link Bar......................................................................................... 387
2 Membuat Link Bar Next - Back .................................................................390
2.1 Mengatur halaman dua.................................................................................. 394
2.2 Halaman tiga ................................................................................................ 397
2.3 Tampilan di browser..................................................................................... 401
3 Membuat Link Bar berdasarkan Struktur ................................................403
3.1 Memasang link bar Home Page...................................................................... 406
3.2 Membuat link bar lapisan pertama ................................................................. 409
3.3 Membuat link bar lapisan kedua..................................................................... 411
3.4 Membuat tombol Next dan Back ..................................................................... 413

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.

Gambar 13.1 Contoh Link bar

1.1 Langkah membuat link bar


Langkah pemasangan link bar adalah:
1. Buatlah sebuah situs bernama Web13a dengan jenis web satu halaman (One
Page Site). Caranya: Aktifkan File è New Page or Site. Klik icon One Page
Site pada task pane.
2. Tampilkan navigation View. Dengan cara klik icon Navigation.
3. Buatlah tiga halaman di bawah Home Page.
4. Namailah dengan Satu, Dua dan Tiga. Lihat Gambar 13.2.

Gambar 13.2 Strutur navigasi 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.

Gambar 13.3 Pilihan pada kotak dialog Themes


7. Gantilah Page Banner menjadi Ini Home Page . Caranya: aktifkan Insert è
Page Banner. Pada kotak dialog, klik pilihan Picture dan tulislah: Ini Home
Page , lalu klik OK.

Gambar 13.4 Kotak dialog Page Banner Properties


8. Pada halaman, di bawah Page Banner tuliskan teks: Contoh Link Bar – Bar
custom link:

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.

Gambar 13.5 Posisi kursor


10. Aktifkan pilihan Insert _ Web Component. Kotak dialog Insert Web
Component terbuka.
11. Pada bidang kiri pilih Link Bars dan pada bidang kanan pilihlah Bar With
custom links.

Gambar 13.6 Pilihan Link Bar


12. Klik Next, muncul kotak dialog untuk pemilihan jenis tombol.

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.

Gambar 13.8 Pilihan posisi link bar


14. Misalnya klik pilihan pertama (horisontal), lalu klik Finish, muncul kotak
dialog penamaan 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.

Gambar 13.10 Kotak dialog Link Bar Properties


16. Klik tombol Add link, muncul kotak dialog Add to Link Bar. Gambar
13.11.

Gambar 13.11 Pengaturan link ke halaman tujuan


17. Tuliskan judul tombol pada kotak isian Text to display, misalnya Halaman
Dua. Lalu klik halaman tujuan link, misalnya Dua.htm. Klik OK, kembali

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:

Gambar 13.12 Link Halaman Dua


18. Untuk membuat tombol kedua, klik tombol add link, muncul kotak dialog
Add to Link Bar.

Gambar 13.13 Pengaturan link ke halaman tiga


19. Tuliskan judul untuk tombol kedua pada kotak isian Text to display,
misalnya Halaman Tiga. Lalu klik halaman tujuan link, misalnya Tiga.htm.
Lalu klik OK, kembali ke kotak dialog Link Bar Properties yang kini
menampilkan dus link, yaitu Halaman Dua dan Halaman Tiga. Gambar
13.14.

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.

Gambar 13.17 Halaman yang dibuka oleh tombol Link Bar

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.

Gambar 13.18 Kotak dialog Link Bar Properties


2. Untuk modifikasi link, klik salah satu link lalu klik tombol Modify link….
Muncul kotak dialog Modify Link.

Gambar 13.19 Kotak dialog Modify Link


3. Gunakan kotak dialog tersebut untuk memodifikasi link. Lalu OK. Kembali ke
kotak dialog Link Bar Properties.
4. Untuk menghapus link, klik nama link pada daftar Link lalu klik tombol
Remove Link .

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 .

Gambar 13.20 Pilihan tombol Network Blitz


7. Untuk mengubah style menjadi Link bar Vertical, klik pilihan Vertical, lihat
Gambar 13.21.

Gambar 13.21 Pilihan Vertical


8. Setelah selesai melakukan pengeditan link bar, klik OK untuk menutup kotak
dialog Link Bar Properties.

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.

Gambar 13.24 Pilihan Bar With back and next links


11. Pada bidang kiri pilih Link Bars dan pada bidang kanan pilihlah Bar With
back and next links. Klik Next, muncul kotak dialog Link Bar Properties.
Gambar 13.25.

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).

Gambar 13.26 Pilihan jenis link bar


13. Jangan ubah pilihan pertama (horisontal) yang sudah aktif. Klik Next, muncul
kotak dialog pengaturan link.

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.

Gambar 13.28 Tombol Home dan Next muncul pada halaman


Perhatikan tombol yang muncul, hanya dua, yaitu Home (hasil pengaktifan pilihan
Home Page) dan Next. Tidak ada Back, sebab ini adalah halaman pertama dalam
kelompoknya.

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.

Gambar 13.29 Lokasi penyisipan kursor


7. Aktifkan pilihan Insert _ Web Component. Kotak dialog Insert Web
Component terbuka.
8. Pada bidang kiri pilih Link Bars dan pada bidang kanan pilihlah Bar With
back and next links. Klik Next, muncul kotak dialog Link Bar Properties.
Gambar 13. 30.

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.

Gambar 13.31Pilihan Waves


10. Klik Next, muncul kotak dialog pemilihan jenis link bar, apakah horisontal
(yang pertama) atau yang vertikal (pilihan kedua). Gambar 13.32.

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.

Gambar 13.33 Kotak dialog pengaturan link


12. Klik kotak cek Home Page, lalu klik tombol OK. Hasilnya pada halaman seperti
Gambar 13.34.

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).

2.2 Halaman tiga


Kini saatnya mengatur halaman terakhir.
1. Klik ganda halaman Tiga sehingga terbuka.
2. Gantilah warna latar belakang halaman menajdi merah muda (Klik kanan è
Properties. Klik Background dan pilihlah warna merah muda).
3. Tuliskan teks: “Saya halaman terakhir, 3”. Dan Contoh Link Bar – Bar with
custom links.
4. Formatlah warna font sehingga sesuai dengan warna merah muda.
5. Tambahkan garis horisontal (Insert è Horisontal Line ).
6. Klik lokasi penyisipan Link Bar - Back dan Next, misalnya seperti Gambar
13.35.

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.

Gambar 13.36 Pilihan Bar With back and next links


8. Pada bidang kiri pilih Link Bars dan pada bidang kanan pilihlah Bar With
back and next links. Klik Next, muncul kotak dialog Link Bar Properties.
Gambar 13.36.

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).

Gambar 13.38 Pilihan Horisontal


10. Jangan ubah pilihan pertama (horis\ontal) yang sudah aktif. Klik Next, muncul
kotak dialog pengaturan link. Gambar 13.39.

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:

Gambar 13.40 Hasil pemasangan Link bar


Perhatikan tombol yang muncul, hanya dua, yaitu Home (hasil pengaktifan pilihan
Home Page) dan Back. Tidak ada Next, sebab ini adalah halaman terakhir di dalam
kelompoknya.

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.

Gambar 13.41 Home page


Kemudian klik tombol Hala man Satu, muncul Halaman Satu seperti Gambar 13.42
Klik tombol Home, kembali ke Home Page.

Gambar 13.42 Halaman Satu


Pada Home Page klik tombol Halaman Dua, muncul Halaman Dua seperti Gambar
13.43. Klik tombol Home, kembali ke Home Page.

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.

Gambar 13.44 Halaman Tiga


Pada halaman Satu, jika Anda klik tombol Next, akan muncul halaman Dua. Pada
halaman Dua Anda klik Next akan muncul halaman Tiga.
Selanjutnya pada halaman Tiga jika Anda klik Back, muncul halaman Dua. Pada
halaman Dua Anda klik Back akan muncul halaman Satu.

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.

Gambar 13.45 Pembuatan situs web13b


2. Setelah terbentuk web tersebut, tampilkan mode Navigation. Caranya: klik icon
Navigation di bidang kiri.
3. Buatlah lapis pertama di bawah Home Page (klik kanan dan pilih New è
Page), misalnya lapis pertama ini terdiri dari dua halaman bernama Lapis1_a ,
Lapis1_b dan .
4. Buatlah lapis kedua di bawah Lapis1_a, misalnya dua halaman bernama
Lapis2_c dan Lapis2_d.
5. Kemudian buatlah lapis kedua juga namun di bawah Lapis1_b, misalnya dua
halaman bernama Lapis2_e dan Lapis2_f. Hasilnya seperti Gambar 13.46.

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.

Gambar 13.47 Aktifkan All page(s) dan Balance


8. Pasangkan banner, Isertè Page Banner. Dan klik Picture serta tuliskan Home
Page. Gambar 13.48.

404
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
Gambar 13.48 Pengaturan Page Banner
9. Klik OK, hasilnya seperti Gambar 13.49.

Gambar 13.49 Hasil pengaturan Home Page


10. Bukalah halaman lapis1_a.htm.
11. Pasangkan banner dengan teks nama halaman itu sendiri. Caranya: Isertè Page
Banner. Lalu klik Picture dan tuliskan Lapis1_a.

Gambar 13.50 Pengaturan pege Banner halaman pertama, lapisan pertama


12. Klik OK, hasilnya akan seperti Gambar 13.51.

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).

3.1 Memasang link bar Home Page


1. Aktifkan Home Page.
2. Klik lokasi di bawah Page Banner.
3. Jalankan perintah Insert è Navigation

Gambar 13.52 Pilihan Bar based on navigation structure


4. Pada bidang kiri klik Link Bars , pada bidang kanan klik pilihan Bar based on
navigation structure. Lalu klik Next, muncul pilihan style bar:

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.

Gambar 13.54 Pilihan style link bar


6. Klik Finish. Muncul kotak dialog yang menampilkan diagram struktur situs,
seperti Gambar 13.55.

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.

Gambar 13.58 Tampilan Lapis1_a

3.2 Membuat link bar lapisan pertama


Nah kini saatnya untuk membuat link bar bagi lap;isan pertama.
1. Bukalah salah satu halaman di lapisan 1, misalnya lapis_1a.
2. Klik lokasi tepat di bawah Page Banner, klik Center untuk menengahkan
letaknya.
3. Jalankan perintah Insert è Navigation

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.

Gambar 13.59 Kotak dialog Link Bar Properties


7. Selain pilihan Child Level, klik pilihan Home Page . Lihat Gambar 13.59. Icon
halaman yang terpilih pada diagram akan berwarna biru tua.
8. Klik OK, hasilnya pada halaman akan tampak pada Gambar 13.60.

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.

3.3 Membuat link bar lapisan kedua


Sekarang saat membuat navigasi untuk halaman lapisan kedua, kita mulai dari
halaman Lapis2_C.
1. Aktifkan halaman tersebut.
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.

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.

Gambar 13.62 Tombol muncul di halaman


9. Perhatikan 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 langkah di atas untuk halaman Lapis2_d dan Lapis2_e.

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.

Gambar 13.65 Halaman Home Page di browser


Kalau Anda klik tombol Lapis1_a maka halaman anak pertama akan ditampilkan
seperti Gambar 13.66. Kini Anda turun ke lapisan pertama.
Pada hala man ini terdapat tombol Home untuk mengakses Home Page dan tombol-
tombol untuk mengakses halaman lapisan kedua, yaitu anak-anaknya. Perhatikan
bahwa memang tidak disediakan akses ke halaman yang bukan anaknya.

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.

Gambar 13.67Halaman pertama lapisan kedua


Pada lapisan terbawah ini Anda bisa kembali Home Page dengan klik tombol Home.
Untuk naik ke lapisan satu Anda bisa klik tombol Up, yaitu menampilkan induk
halaman ini (Lapis1_a), Anda tidak bisa naik ke halaman Lapis_b sebab bukan
induknya.
Selain itu, pada halaman lapis terbawah ini juga ada tombol yang berwarna lain
(merah, sementara yang lain hijau). Tombol tersebut tidak berfungsi untuk membuka
halaman, namun sebagai penanda halaman ini, perhatikan label tombolnya sama
dengan label Page Banner.

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.

Gambar 13.68 Halaman kedua lapis pertama


Selanjutnya Anda bisa menggunakan tombol yang ada untuk mengakses halamn lain
di dalam kelompknya, misalnya anak pertamanya atau cucu keempat home page.,
yaitu Lapis2_f. Tampilannya seperti Gambar 13.69.

Gambar 13.69 Tampilan halaman Lapis2_f

416
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "

Anda mungkin juga menyukai