WMP FrontPageXP Bab 13 Link Bar -...

40
Bab 13 Link Bar

Transcript of WMP FrontPageXP Bab 13 Link Bar -...

Page 1: WMP FrontPageXP Bab 13 Link Bar - jak-stik.ac.idjak-stik.ac.id/saefudin/files/microsoft-frontpage-xp[12].pdf18. Untuk membuat tombol kedua, klik tombol add link, muncul kotak dialog

Bab 13

Link Bar

Page 2: WMP FrontPageXP Bab 13 Link Bar - jak-stik.ac.idjak-stik.ac.id/saefudin/files/microsoft-frontpage-xp[12].pdf18. Untuk membuat tombol kedua, klik tombol add link, muncul kotak dialog

Webmaster Pro Front Page XP

378

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

Page 3: WMP FrontPageXP Bab 13 Link Bar - jak-stik.ac.idjak-stik.ac.id/saefudin/files/microsoft-frontpage-xp[12].pdf18. Untuk membuat tombol kedua, klik tombol add link, muncul kotak dialog

Bab 13 Link Bar

379

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

Page 4: WMP FrontPageXP Bab 13 Link Bar - jak-stik.ac.idjak-stik.ac.id/saefudin/files/microsoft-frontpage-xp[12].pdf18. Untuk membuat tombol kedua, klik tombol add link, muncul kotak dialog

Webmaster Pro Front Page XP

380

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:

Page 5: WMP FrontPageXP Bab 13 Link Bar - jak-stik.ac.idjak-stik.ac.id/saefudin/files/microsoft-frontpage-xp[12].pdf18. Untuk membuat tombol kedua, klik tombol add link, muncul kotak dialog

Bab 13 Link Bar

381

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.

Page 6: WMP FrontPageXP Bab 13 Link Bar - jak-stik.ac.idjak-stik.ac.id/saefudin/files/microsoft-frontpage-xp[12].pdf18. Untuk membuat tombol kedua, klik tombol add link, muncul kotak dialog

Webmaster Pro Front Page XP

382

Gambar 13.7 Pilihan tombol 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.

Page 7: WMP FrontPageXP Bab 13 Link Bar - jak-stik.ac.idjak-stik.ac.id/saefudin/files/microsoft-frontpage-xp[12].pdf18. Untuk membuat tombol kedua, klik tombol add link, muncul kotak dialog

Bab 13 Link Bar

383

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

Page 8: WMP FrontPageXP Bab 13 Link Bar - jak-stik.ac.idjak-stik.ac.id/saefudin/files/microsoft-frontpage-xp[12].pdf18. Untuk membuat tombol kedua, klik tombol add link, muncul kotak dialog

Webmaster Pro Front Page XP

384

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.

Page 9: WMP FrontPageXP Bab 13 Link Bar - jak-stik.ac.idjak-stik.ac.id/saefudin/files/microsoft-frontpage-xp[12].pdf18. Untuk membuat tombol kedua, klik tombol add link, muncul kotak dialog

Bab 13 Link Bar

385

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.

Page 10: WMP FrontPageXP Bab 13 Link Bar - jak-stik.ac.idjak-stik.ac.id/saefudin/files/microsoft-frontpage-xp[12].pdf18. Untuk membuat tombol kedua, klik tombol add link, muncul kotak dialog

Webmaster Pro Front Page XP

386

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

Page 11: WMP FrontPageXP Bab 13 Link Bar - jak-stik.ac.idjak-stik.ac.id/saefudin/files/microsoft-frontpage-xp[12].pdf18. Untuk membuat tombol kedua, klik tombol add link, muncul kotak dialog

Bab 13 Link Bar

387

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 .

Page 12: WMP FrontPageXP Bab 13 Link Bar - jak-stik.ac.idjak-stik.ac.id/saefudin/files/microsoft-frontpage-xp[12].pdf18. Untuk membuat tombol kedua, klik tombol add link, muncul kotak dialog

Webmaster Pro Front Page XP

388

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.

Page 13: WMP FrontPageXP Bab 13 Link Bar - jak-stik.ac.idjak-stik.ac.id/saefudin/files/microsoft-frontpage-xp[12].pdf18. Untuk membuat tombol kedua, klik tombol add link, muncul kotak dialog

Bab 13 Link Bar

389

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.

Page 14: WMP FrontPageXP Bab 13 Link Bar - jak-stik.ac.idjak-stik.ac.id/saefudin/files/microsoft-frontpage-xp[12].pdf18. Untuk membuat tombol kedua, klik tombol add link, muncul kotak dialog

Webmaster Pro Front Page XP

390

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.

Page 15: WMP FrontPageXP Bab 13 Link Bar - jak-stik.ac.idjak-stik.ac.id/saefudin/files/microsoft-frontpage-xp[12].pdf18. Untuk membuat tombol kedua, klik tombol add link, muncul kotak dialog

Bab 13 Link Bar

391

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.

Page 16: WMP FrontPageXP Bab 13 Link Bar - jak-stik.ac.idjak-stik.ac.id/saefudin/files/microsoft-frontpage-xp[12].pdf18. Untuk membuat tombol kedua, klik tombol add link, muncul kotak dialog

Webmaster Pro Front Page XP

392

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.

Page 17: WMP FrontPageXP Bab 13 Link Bar - jak-stik.ac.idjak-stik.ac.id/saefudin/files/microsoft-frontpage-xp[12].pdf18. Untuk membuat tombol kedua, klik tombol add link, muncul kotak dialog

Bab 13 Link Bar

393

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.

Page 18: WMP FrontPageXP Bab 13 Link Bar - jak-stik.ac.idjak-stik.ac.id/saefudin/files/microsoft-frontpage-xp[12].pdf18. Untuk membuat tombol kedua, klik tombol add link, muncul kotak dialog

Webmaster Pro Front Page XP

394

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.

Page 19: WMP FrontPageXP Bab 13 Link Bar - jak-stik.ac.idjak-stik.ac.id/saefudin/files/microsoft-frontpage-xp[12].pdf18. Untuk membuat tombol kedua, klik tombol add link, muncul kotak dialog

Bab 13 Link Bar

395

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.

Page 20: WMP FrontPageXP Bab 13 Link Bar - jak-stik.ac.idjak-stik.ac.id/saefudin/files/microsoft-frontpage-xp[12].pdf18. Untuk membuat tombol kedua, klik tombol add link, muncul kotak dialog

Webmaster Pro Front Page XP

396

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.

Page 21: WMP FrontPageXP Bab 13 Link Bar - jak-stik.ac.idjak-stik.ac.id/saefudin/files/microsoft-frontpage-xp[12].pdf18. Untuk membuat tombol kedua, klik tombol add link, muncul kotak dialog

Bab 13 Link Bar

397

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.

Page 22: WMP FrontPageXP Bab 13 Link Bar - jak-stik.ac.idjak-stik.ac.id/saefudin/files/microsoft-frontpage-xp[12].pdf18. Untuk membuat tombol kedua, klik tombol add link, muncul kotak dialog

Webmaster Pro Front Page XP

398

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.

Page 23: WMP FrontPageXP Bab 13 Link Bar - jak-stik.ac.idjak-stik.ac.id/saefudin/files/microsoft-frontpage-xp[12].pdf18. Untuk membuat tombol kedua, klik tombol add link, muncul kotak dialog

Bab 13 Link Bar

399

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.

Page 24: WMP FrontPageXP Bab 13 Link Bar - jak-stik.ac.idjak-stik.ac.id/saefudin/files/microsoft-frontpage-xp[12].pdf18. Untuk membuat tombol kedua, klik tombol add link, muncul kotak dialog

Webmaster Pro Front Page XP

400

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.

Page 25: WMP FrontPageXP Bab 13 Link Bar - jak-stik.ac.idjak-stik.ac.id/saefudin/files/microsoft-frontpage-xp[12].pdf18. Untuk membuat tombol kedua, klik tombol add link, muncul kotak dialog

Bab 13 Link Bar

401

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

Page 26: WMP FrontPageXP Bab 13 Link Bar - jak-stik.ac.idjak-stik.ac.id/saefudin/files/microsoft-frontpage-xp[12].pdf18. Untuk membuat tombol kedua, klik tombol add link, muncul kotak dialog

Webmaster Pro Front Page XP

402

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.

Page 27: WMP FrontPageXP Bab 13 Link Bar - jak-stik.ac.idjak-stik.ac.id/saefudin/files/microsoft-frontpage-xp[12].pdf18. Untuk membuat tombol kedua, klik tombol add link, muncul kotak dialog

Bab 13 Link Bar

403

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.

Page 28: WMP FrontPageXP Bab 13 Link Bar - jak-stik.ac.idjak-stik.ac.id/saefudin/files/microsoft-frontpage-xp[12].pdf18. Untuk membuat tombol kedua, klik tombol add link, muncul kotak dialog

Webmaster Pro Front Page XP

404

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.

Page 29: WMP FrontPageXP Bab 13 Link Bar - jak-stik.ac.idjak-stik.ac.id/saefudin/files/microsoft-frontpage-xp[12].pdf18. Untuk membuat tombol kedua, klik tombol add link, muncul kotak dialog

Bab 13 Link Bar

405

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.

Page 30: WMP FrontPageXP Bab 13 Link Bar - jak-stik.ac.idjak-stik.ac.id/saefudin/files/microsoft-frontpage-xp[12].pdf18. Untuk membuat tombol kedua, klik tombol add link, muncul kotak dialog

Webmaster Pro Front Page XP

406

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:

Page 31: WMP FrontPageXP Bab 13 Link Bar - jak-stik.ac.idjak-stik.ac.id/saefudin/files/microsoft-frontpage-xp[12].pdf18. Untuk membuat tombol kedua, klik tombol add link, muncul kotak dialog

Bab 13 Link Bar

407

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.

Page 32: WMP FrontPageXP Bab 13 Link Bar - jak-stik.ac.idjak-stik.ac.id/saefudin/files/microsoft-frontpage-xp[12].pdf18. Untuk membuat tombol kedua, klik tombol add link, muncul kotak dialog

Webmaster Pro Front Page XP

408

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.

Page 33: WMP FrontPageXP Bab 13 Link Bar - jak-stik.ac.idjak-stik.ac.id/saefudin/files/microsoft-frontpage-xp[12].pdf18. Untuk membuat tombol kedua, klik tombol add link, muncul kotak dialog

Bab 13 Link Bar

409

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

Page 34: WMP FrontPageXP Bab 13 Link Bar - jak-stik.ac.idjak-stik.ac.id/saefudin/files/microsoft-frontpage-xp[12].pdf18. Untuk membuat tombol kedua, klik tombol add link, muncul kotak dialog

Webmaster Pro Front Page XP

410

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.

Page 35: WMP FrontPageXP Bab 13 Link Bar - jak-stik.ac.idjak-stik.ac.id/saefudin/files/microsoft-frontpage-xp[12].pdf18. Untuk membuat tombol kedua, klik tombol add link, muncul kotak dialog

Bab 13 Link Bar

411

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.

Page 36: WMP FrontPageXP Bab 13 Link Bar - jak-stik.ac.idjak-stik.ac.id/saefudin/files/microsoft-frontpage-xp[12].pdf18. Untuk membuat tombol kedua, klik tombol add link, muncul kotak dialog

Webmaster Pro Front Page XP

412

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.

Page 37: WMP FrontPageXP Bab 13 Link Bar - jak-stik.ac.idjak-stik.ac.id/saefudin/files/microsoft-frontpage-xp[12].pdf18. Untuk membuat tombol kedua, klik tombol add link, muncul kotak dialog

Bab 13 Link Bar

413

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:

Page 38: WMP FrontPageXP Bab 13 Link Bar - jak-stik.ac.idjak-stik.ac.id/saefudin/files/microsoft-frontpage-xp[12].pdf18. Untuk membuat tombol kedua, klik tombol add link, muncul kotak dialog

Webmaster Pro Front Page XP

414

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

Page 39: WMP FrontPageXP Bab 13 Link Bar - jak-stik.ac.idjak-stik.ac.id/saefudin/files/microsoft-frontpage-xp[12].pdf18. Untuk membuat tombol kedua, klik tombol add link, muncul kotak dialog

Bab 13 Link Bar

415

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.

Page 40: WMP FrontPageXP Bab 13 Link Bar - jak-stik.ac.idjak-stik.ac.id/saefudin/files/microsoft-frontpage-xp[12].pdf18. Untuk membuat tombol kedua, klik tombol add link, muncul kotak dialog

Webmaster Pro Front Page XP

416

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