Modul 2 PPA I Internet Menggunakan Tool Microsoft Front Page

Posted by : Unknown Kamis, 11 April 2013

Modul 2 PPA I Internet

Menggunakan Tool Microsoft Front Page

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

Di 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. Frame

Penerapan 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 Fileènewèmore page templates, sehingga akan tampil seperti berikut :

Gambar 2.1

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

Gambar 2.2

Klik 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.4

Dialog 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.5

Dialog 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.6

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

Dialog 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.8

Nah, 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 Fileènewèblank page).Kita buat file yang namanya profil.htm