WMP FrontPageXP Bab 13 Link Bar

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 1.2

2

Langkah membuat link bar............................................................................. 379 Mengedit Link Bar......................................................................................... 387

Membuat Link Bar Next - Back .................................................................390

2.1 2.2 2.3

3

Mengatur halaman dua.................................................................................. 394 Halaman tiga ................................................................................................ 397 Tampilan di browser..................................................................................... 401

Membuat Link Bar berdasarkan Struktur ................................................403

3.1 3.2 3.3 3.4

Memasang link bar Home Page...................................................................... 406 Membuat link bar lapisan pertama ................................................................. 409 Membuat link bar lapisan kedua..................................................................... 411 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


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:


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.


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.


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


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.


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.


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


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 .


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.


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.


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.


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.


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.


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.


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.


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.


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.


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.


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.


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.


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.


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.


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.


3 Membuat Link Bar berdasarkan Struktur Jadi begitulah pemakaian Web Component untuk membuat link bar, baik custom maupun Back-Next. Kalau Anda perhatikan, pembuatan halaman.

link bar sangat tergantung dengan struktur

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.


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.


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.


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:


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.


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.


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


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.


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.


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.


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:


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 tomboltombol untuk mengakses halaman lapisan kedua, yaitu anak-anaknya. Perhatikan bahwa memang tidak disediakan akses ke halaman yang bukan anaknya.


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.


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


WMP FrontPageXP Bab 13 Link Bar

Recommend Documents