Bab 10 Pemakaian Frame

Bab 10 Pemakaian Frame

Webmaster Pro Front Page XP Daftar Isi Bab 10 1 Pendahuluan...305 1.1 Sekilas tentang frame... 305 1.2 Latar belakang... 305 1.3 Membuat frame... 306 2 Membuat Frame...307 2.1 Membuat frameset... 307 2.2 Membuat halaman pengisi... 310 2.3 Membuat link halaman pengisi... 310 3 Mengganti halaman pengisi...312 4 Mengatur Frame...317 4.1 Menambah frame... 317 4.2 Mengubah ukuran frame... 318 4.3 Frame dari halaman... 319 4.4 Membuat komentar... 319 4.5 Menghapus frame... 320 304

Bab 10 Pemakaian Frame 1 Pendahuluan 1.1 Sekilas tentang frame Frame itu menyenangkan. Frame mudah. Namun Frame dapat juga menjengkelkan. Frame sebenarnya sangat praktis, tetapi terlalu banyak pengarang web yang menggunakan monitor beresolusi sangat tinggi dan tidak mempertimbangkan monitor komputer para pengunjung web. Frame dapat membuat sebuah situs menjadi sia-sia untuk orang yang menggunakan monitor resolusi rendah, sebab tidak bisa menampilkannya. Ada kecenderungan untuk memakai berulang-ulang sarana yang menyenangkan, lalu tanpa disadari ternyata hasilnya malah amburadul karena terlalu banyak menggunakan alat tersebut. Conothnya adalah pemakaian font dan pemakaian printer warna. Dan gejala ini juga berlaku untuk frame. Jadi sebelum Anda menggunakan frame, terutama untuk frame berjumlah lebih dari dua buah di dalam sebuah frameset, pikirkan apakah hal ini memang berguna untuk para pengunjung situs atau hanya menuruti kesenangan Anda saja. 1.2 Latar belakang Hyperteks telah ada bertahun-tahun, dan sebenarnya merupakan media yang cukup berkembang. World Wide Web, baru digunakan secara luas pada pertengahan tahun 1994. Waktu itu pemakaian Web terbatas hanya pada penampilan data. Klik sebuah link akan mengganti tampilan dengan dokumen yang dirujuk oleh link tersebut. Klik link lainnya akan mengganti dokumen tersebut dengan rujukan lainnya. Masalah utama dengan hyperteks adalah kehilangan arah, pengunjung tidak yakin sedang berada di mana dan bagaimana sampai ke sana. Untuk mengatasi masalah tersebut, beberapa perancang sistem hyperteks mencoba membangun metode-metode alternatif. Prinsip dasarnya adalah Jangan membawa pergi pengunjung jika tidak benar-benar perlu. Jadi, sedapat mungkin membawa informasi ke pengunjung. Bukan sebaliknya, membawa pengunjung ke informasi. Mengapa tidak membiarkan dokumen utama dan mengambil dokumen rujukan link ke dokumen utama. Hal ini dapat dilakukan dengan berbagai cara, misalnya dengan 305

Webmaster Pro Front Page XP pop-up, namun sayangnya pop-up hanya cocok untuk menampilkan sedikit informasi, misalnya tentang definisi sebuah kata. Cara lainnya untuk membawa informasi ke pemakai ada lah menggunakan bidang yang berbeda; yaitu membagi windows menjadi beberapa bagian, lalu membiarkan dokumen awal (utama) pada satu bagian dan menampilkan dokumen referensinya pada bagian lainnya. Keduanya masih satu halaman. 1.3 Membuat frame Pada bab ini akan dibahas sebuah fasilitas yang dikenal dalam dunia HTML sebagai frame. Frame adalah bingkai atau bidang khusus pada tampilan bowser yang menampilkan halaman lain. Sedangkan yang dimaksud dengan frameset adalah susunan beberapa frame. Dan dokumen frame-de finition adalah dokumen yang menyimpan informasi tentang berbagai hal seperti cara mengatur frame, dokumen pengisi frame dan sebagainya. Proses pemakaian frame adalah: 1. pada saat suatu link di-klik maka proses pertama kali adalah pengiriman dokumen frame-definition ke browser. 2. Lalu akan dibuat frame-frame di dalam window browser, kemudian proses transfer dokumen-dokumen pengisi ke masing-masing frame. Jika Anda membuat dua frame, Anda harus membuat tiga dokumen, yaitu sebuah dokumen frame-definition, dan dua dokumen yang ingin Anda tempatkan di dalam masing-masing frame. Selanjutnya, tiga frame membutuhkan empat dokumen, lima frame membutuhkan enam dokumen dan seterusnya. Anda harus selalu memiliki dokumen frame-definition yang tidak dapat dilihat pemakai. Jangan kuatir repot, FrontPage akan membantu Anda membuat dokumen frame-definiton, sehingga akan memudahkan Anda. Ketika Anda membuat frameset, FrontPage akan membuat sebuah halaman khusus yang menampilkan pesan bagi browser yang tidak mendukung frame. Sebab saat ini mungkin lima persen browser yang ada dipasaran masih belum mendukung frame. Tentunya kalimat dalam pesan itu bisa Anda ubah sesuai kebutuhan. 306

Bab 10 Pemakaian Frame Gambar 10.1 Pesan tidak mendukung frame 2 Membuat Frame Membuat frame pada HTML dapat membingungkan, namun untungnya itu bukan masalah bagi Anda sebab tidak menggunakan HTML. FrontPage akan melakukan semua pembuatan kode HTML untuk Anda. Tahapan pembuatan frame adalah: 1. Membuat halaman baru untuk digunakan sebagai frameset. 2. Membuat frameset, menggunakan template. 3. Membuat halaman pengisi. 4. Membuat link halaman pengisi frame. 2.1 Membuat frameset Beginilah cara membuat frameset menggunakan template FrontPage XP: 1. Aktifkan perintah File fi New fi Page or Web. Task pane akan muncul di bidang kanan jika belum tampil. 2. Buatlah sebuah situs kosong baru bernama Web10. 3. Kemudian buatlah halaman baru yang akan dipasang dengan frameset. Pada task pane klik icon Pages Templates, tampil kotak dialog Page Templates. Gambar 10.2. 307

Webmaster Pro Front Page XP Gambar 10.2 Kotak dialog Page Templates 4. Klik tab Frame Pages lalu pilih salah satu icon, misalnya Contents (Lihat Gambar 10.2 di atas). Perhatikan hasil sementara-nya pada kotak Preview, kemudian klik OK. Hasilnya berupa sebuah frameset dengan dua buah frame pada halaman, seperti ditampilkan seperti Gambar 10.3. Gambar 10.3 Frameset baru 5. Klik kanan frame sebelah kiri dan klik Properties. Muncul kotak dialog Frame Properties. 308

Bab 10 Pemakaian Frame Gambar 10.4 Kotak dialog Frame Properties 6. Pada kotak isian Name tuliskan nama untuk frame kiri, misalnya Daftar. Lalu klik tombol OK. 7. Klik kanan frame sebelah kanan dan klik Properties. Muncul kotak dialog Frame Properties. 8. Pada kotak isian Name tuliskan nama untuk frame kanan, misalnya Isi. Lalu klik tombol OK. 9. Simpanlah halaman sebagai Default.htm. Kalau Anda perhatikan Gambar 10.3, tampak bahwa masing-masing frame memiliki dua buah tombol, yaitu Set Initial Page, dan New Page. Tombol Set Initial Page untuk menentukan halaman awal yang harus dibuka oleh frame. Sarananya adalah kotak dialog Insert Hyperlink. Gambar 10.5 Kotak dialog Insert Hyperlink New Page untuk membuat halaman isi frame pada saat frameset dibuka. 309

Webmaster Pro Front Page XP 2.2 Membuat halaman pengisi Setelah frameset terbentuk, selanjutnya perlu membuat halaman pengisi. 1. Klik tombol Create a new normal page, terbentuk sebuah halaman. 2. Ubahlah warna latarbelakang halaman menjadi biru. Caranya: klik kanan halaman, lalu klik Properties. Pada Background Color pilihlah biru, lalu OK. 3. Tuliskan teks: Halaman Satu, jangan lupa mengubah warna font menjadi putih agar kontras dengan warna latar belakang. 4. Simpanlah sebagai Satu.htm. 5. Ulangi untuk pembuatan halaman Dua.htm dan Tiga.htm. 6. Simpanlah web, dengan File Save. 2.3 Membuat link halaman pengisi Kini saatnya menugaskan halaman agar mengisi frame yang disediakan. Langkah yang diperlukan adalah: 1. Pada frame kiri (Daftar) klik tombol Set Initial Page, muncul kotak dialog Insert Hyperlink. Gambar 10.6 Pemilihan Satu.htm sebagai pengisi frame Daftar 2. Klik icon halaman Satu.htm, lalu klik OK. Hasilnya pada halaman adalah: 310

Bab 10 Pemakaian Frame Gambar 10.7 Halaman Satu.htm pada frame Daftar 3. Kemudian Anda bisa meneruskan dengan frame Isi. Klik kanan frame Isi lalu pada kotak dialog Insert Hyperlink pilihlah icon Dua.htm, dan klik OK. Hasilnya akan seperti berikut ini: Gambar 10.8 Halaman Dua.htm mengisi frame Isi 4. Untuk mencoba tampilan halaman di browser, klik tombol Preview in browser. 311

Webmaster Pro Front Page XP Gambar 10.9 Tampilan halaman pada browser 3 Mengganti halaman pengisi Kita bisa menggunakan frame Daftar (kiri) sebagai frame daftar isi, yang mengandung daftar link-link ke dokumen tersendiri. Kemudian pada frame Isi (kanan) kita atur agar bisa menampilkan halaman sesuai link yang di-klik pada frame Daftar. Hal seperti ini sering dijumpai, yaitu frame kiri (Daftar) bertugas sebagai link bar vertikal dan frame kanan (Isi) bertugas menampilkan halaman atau dokumen yang dipilih dari frame kiri. Baiklah, mari kita buat susunan seperti itu: 1. Klik kanan frame kanan (Isi), lalu klik Properties. Muncul Kotak dialog Properties. 2. Pada kotak isian Initial Page, hapuslah nama halaman tujuan. Lihat Gambar 10.10 berikut: 312

Bab 10 Pemakaian Frame Gambar 10.10 Hapus halaman tujuan 3. Klik OK. Kotak dialog Frame Properties menutup dan frame Isi sekarang kosong. Gambar 10.11 Frame Isi kosong 4. Tuliskan teks: Halaman dua pada frame Daftar. 5. Sorotlah teks tersebut lalu klik tombol Insert Hyperlink. Muncul kotak dialog Insert Hyperlink. 313

Webmaster Pro Front Page XP Gambar 10.12 Pilihan halaman Dua.htm 6. Pilihlah icon halaman Dua.htm, lihat Gambar 10.12. 7. Lalu klik tombol Target Frames, muncul kotak dialog Target Frames. Gambar 10.13 Kotak dialog Target Frames 8. Pada kotak Current frames page, klik frame kanan (Isi), lihat Gambar 10.13, lalu klik OK. Kembali ke kotak dialog Insert Hyperlink. Klik OK. 9. Ulangi membuat teks, kali ini: Halaman Tiga. Lalu sorotlah teks tersebut dan klik tombol Insert Hyperlink. Muncul kotak dialog Insert Hyperlink. 314

Bab 10 Pemakaian Frame Gambar 10.14 Pilihan halaman Tiga.htm 10. Pilihlah icon halaman Tiga.htm, lihat Gambar 10.14. 11. Lalu klik tombol Target Frames, muncul kotak dialog Target Frames. 12. Pada kotak Current frames page, klik frame kanan (Isi), lalu klik OK. Kembali ke kotak dialog Insert Hyperlink. Klik OK. 13. Barangkali Anda perlu mengganti warna font kedua teks link agar lebih kontras dengan warna latar belakang biru. 14. Simpanlah situs dengan File Save. Gambar 10.15 Hasil pemasangan link pada FrontPage XP Hasilnya tidak bisa Anda lihat langsung pada FrontPage XP, bukalah lewat browser dengan klik tombol Preview in browser. Setelah terbuka di browser, tampak bahwa frame Isi masih kosong. 315

Webmaster Pro Front Page XP Gambar 10.16 Frame Isi masih kosong Klik link Halaman Dua, maka frame Isi akan menampilkan halaman Dua.htm. Gambar 10.17 Halaman dua tampil di frame Isi Klik link Halaman tiga, maka frame Isi akan menampilkan halaman Tiga.htm. 316

Bab 10 Pemakaian Frame Gambar 10.18 Halaman tiga tampil di frame Isi 4 Mengatur Frame Seperti halnya obyek lainnya pada FrontPage, frame masih memung-kinkan untuk diatur, di antaranya adalah diubah ukurannya, dipisah/split, dan tentu saja dihapus. 4.1 Menambah frame Frame memang dirancang dengan posisi berjajar seperti ubin, sehingga tidak ada ruangan kosong untuk penambahan frame baru. Namun sebenarnya kita bisa membuat frame baru yang berasal dari frame yang ada, yaitu membagi frame tersebut menjadi dua buah frame baru yang lebih kecil. Langkah pemakaiannya adalah: 1. Klik frame yang Anda inginkan. 2. Dari menu Frame klik perintah Split Frame. Tampil kotak dialog Split Frame. 317

Webmaster Pro Front Page XP Gambar 10.19 Kotak dialog Split Frame 3. Anda bisa membaginya menjadi dua bagian berdasarkan kolom ataupun berdasarkan baris. 4. Kemudian klik OK, frame akan terbagi dua sama besar. 5. Untuk menggagalkan proses, klik tombol Undo atau dari menu Edit klik perintah Undo. 4.2 Mengubah ukuran frame Untuk mengubah ukuran frame, langkahnya adalah: 1. Pilihlah frame yang Anda inginkan dengan klik pada frame tersebut. 2. Klik kanan frame tersebut lalu klik perintah Frame Properties. Tampil kotak dialog Frame Properties. Gambar 10.20 Frame Properties 3. Kemudian ubahlah ukuran panjang dan lebar sesuai yang Anda inginkan pada kotak isian Frame Size. 318

Bab 10 Pemakaian Frame 4. Dengan kotak dialog ini pula Anda bisa mengubah ukuran margin. 5. Setelah pengisian ukuran, klik OK. 4.3 Frame dari halaman Anda bisa juga mengatur properti frame, khususnya spasi frame dari kotak dialog Page Properties. 1. Dari menu Frame klik perintah Frame Page Properties. Tampil kotak dialog Frame Page Properties. Gambar 10.21Frame Page Properties 2. Pada kotak dialog tersebut Anda bisa mengatur ukuran spasi frame dan pilihan untuk menampilkan atau menyembunyikan frame. 3. Klik OK. 4.4 Membuat komentar Seperti telah disebutkan di bagain awal bab ini, bahwa tidak semua browser bisa menampilkan frame. Oleh karenanya kita harus membuat halaman komentar untuknya. Langkah pembuatannya adalah: 1. Aktifkan halaman yang mengandung frameset, misalnya Default.htm. 2. Klik tab bawah yang berjudul No Frames, lihat Gambar 10.22. 319

Webmaster Pro Front Page XP Gambar 1. 3. Kemudian ubahlah komentar yang ada dengan kalimat Anda sendiri. 4. Klik tombol Save. 4.5 Menghapus frame Untuk menghapus frame, langkahnya sederhana, yaitu: 1. Klik frame yang akan dihapus. 2. Lalu dari menu Frame klik perintah Delete Frame. 320