Modul 2 PPA I InternetMenggunakan Tool Microsoft Front Page

…:::Copyleft by samsonasik:::…samsonasik@gmail.com

1. Pendahuluan Seperti halnya Macromedia Dreamweaver, Microsoft Front Page bisa digunakan untuk merancang design sebuah web. Dalam hal ini kita memakai Microsoft Front Page 2003, walaupun dalam implementasi di laboratorium, pada dasarnya hampir sama. Berikut User Interface-nya :

Gambar 1.1Di bagian bawah Front Page 2003, terlihat ada Design, split, code, dan preview, sedang dalam

Front 2000 kita hanya akan melihat Design, code/html, dan preview-nya saja.

2. FramePenerapan dasar design pada Dreamweaver telah kita pelajari, sekarang kita akan mencoba

membangun web dengan Frame. Frame pada intinya adalah pembagian web di mana dalam satu web kita memanggil beberapa file, tapi tetap tampil pada satu halaman, bukan berpindah halaman.

Caranya klik Filenewmore page templates, sehingga akan tampil seperti berikut :

Gambar 2.1Setelah itu pilih Frames Pages¸ sebagai contoh kita pilih Header, footer, and contents seperti berikut :

Gambar 2.2Klik new page pada tiap frame.

Gambar 2.3

Coba save (Ingat!!!, simpan file pada folder yang sama, jika tidak pada akhirnya nanti akan merepotkan kita sendiri) , dan terlihat tampilan :

Gambar 2.4Dialog box tersebut menunjukkan konfirmasi untuk menyimpan file paling atas,ganti namanya

menjadi atas.htm(terlihat bagian paling atas terblok hijau tua), klik save, dan akan muncul konfirmasi baru, berupa :

Gambar 2.5Dialog box tersebut menunjukkan konfirmasi untuk menyimpan file yang ada di sisi kiri,ganti

namanya menjadi kiri.htm(terlihat bagian paling atas terblok hijau tua), klik save, dan akan muncul konfirmasi baru, berupa :

Gambar 2.6Dialog box tersebut menunjukkan konfirmasi untuk menyimpan file yang ada di sisi tengah,ganti

namanya menjadi tengah.htm(terlihat bagian paling atas terblok hijau tua), klik save, dan akan muncul konfirmasi baru, berupa :

Gambar 2.7Dialog box tersebut menunjukkan konfirmasi untuk menyimpan file yang ada di sisi bawah,ganti namanya menjadi bawah.htm(terlihat bagian paling atas terblok hijau tua), klik save, dan akan muncul konfirmasi baru, berupa :

Gambar 2.8Nah, dialog box ini menunjukkan halaman utama web yang kita rancang yang nantinya kita hanya perlu memanggil halaman ini saja. Klik save.

3. Mengisi Frame dan Metode Target a. Isi Frame Tiap frame, tentunya dengan berbeda-beda file, yaitu kiri.htm, tengah.htm, atas.htm, dan bawah.htm dapat kita isi dengan cara klik frame yang ingin kita isi, dan kita tinggal menambahkan tulisan atau komponen yang akan kita tambahkan/tampilkan.

Gambar 3.1

Untuk merapikan frame agar tidak terlihat seperti dibagi-bagi menjadi lima bagian(padahal sebenarnya dibagi 5), klik kanan di area kosong, dan klik Frame Properties.

Gambar 3.2

Gambar 3.3(Klik Frame Page)

Yang kita lakukan selanjutnya unclick show borders pada Frame Spacing seperti pada gambar.

Gambar 3.4

Sehingga tampilannya sebagai berikut:

Kalau di Dreamweaver, kita bisa menambahkan flash button, di Front Page 2000 kita dapat menambahkan Hover Button, untuk Front Page 2003 bisa pakai interactive button.

Gambar 3.2

Gambar 3.3(Untuk di Front Page 2000, kita pakai Hover Button)

b. Target Frame Kita anggap kiri.htm adalah bagian menu, dan tengah.htm adalah bagian isi. Kita mulai dengan membuat file baru yang nantinya akan dipanggil di dalam tengah.htm.(Klik Filenewblank page).Kita buat file yang namanya profil.htm

Gambar 3.4

Langkah Selanjutnya adalah menampilkan profil.htm pada tengah.htm. Kita buka lagi index.htm dan kita double click button profil.

Gambar 3.5Untuk mengisi link, kita klik Browse, dan kita pilih profil.htm, setelah itu kita klik Target Frame.

Gambar 3.6

Setelah itu, kita klik pada preview Frame yang bagian tengah, dan akan terlihat Target setting-nya tertulis main. Klik ok.

Gambar 3.7Akan tampil di Browser :

Gambar 3.8

Pada profil.htm¸ tambahkan button kembali, link-kan ke index.htm, dengan Target Frame-nya Parent Frame

Gambar 3.9Sehingga ketika dijalankan di browser, ketika diklik kembali, maka akan tampil halaman utama, begitu seterusnya.