Memanfaatkan Wizard
82
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
Pada bab sebelumnya telah dibahas sekilas tentang cara membangun suatu situs. Bab
3 ini akan membahas juga cara membangun situs dengan cara yang lebih mudah lagi,
yaitu menggunakan wizard atau template. FrontPage XP telah menyediakan wizard
atau template yang kaya dan variatif. Mulai dari situs pribadi sampai situs
perusahaan yang profesional.
1 Personal Web
Jenis situs pertama yang akan kita susun adalah Personal Web, yaitu situs tentang
pribadi seseorang. Situs semacam ini diperlukan oleh mereka yang memiliki status
pekerjaan sebagai professional, seperti dokter, pengacara, konsultan free lance,
penyanyi, pengarang, dan sebagainya. Pekerjaan mereka tidak terlalu menuntut
kelembagaan, seperti instansi, kantor ataupun perusahaan. Mereka dibutuhkan
masyarakat karena keahlian yang merekan kuasai.Situs pribadi semacam ini juga
diperlukan oleh para remaja yang beranjak dewasa, dimana mereka memerlukan
media aktualisasi diri, untuk menunjukkan kepada dunia luas bahwa dia telah
memiliki prestasi tersendiri sehingga diasumsikan akan mampu hidup secara
mandiri. Baiklah, mari kita menyusun situs pribadi ini.
1. Aktifkan File _ New _ Page or Web …Task Pane aktif, membuka topik
New Page or Web.
83
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
2. Klik icon Web site Templates. Muncul kotak dialog Web site Templates.
84
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
Gambar 3.4 Tampilan Home Page
6. Untuk melihat hasil sebenarnya di internet atau intranet, aktifkan File _
Preview in Browser…Situs tersebut akan tampak peda browser seperti
Gambar 3.5.
85
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
Gambar 3.6 Halaman Photo Gallery dan Feedback
8. Tutuplah kembali browser dan kembali ke FrontPage XP. Selanjutnya Anda
bisa mengedit isi halaman-halaman tersebut sesuai keperluan Anda.
86
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
Gambar 3.7 Icon Corporate Presence Wizard
3. Klik icon Corporate Presence Wizard. Lalu pada kotak isian Specify the
location of the new web, tuliskan URL web site Anda. Dalam contoh ini,
http://master/web2Corporate.
4. Klik OK, wizard dijalankan dengan kotak dialog pertama seperti Gambar 2.8
sebelah kiri.
87
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
Item-item tersebut antara lain What’s new, Product/Service, Table of
Contents, Feedback Form dan Search Form. Berikut ini keterangan masing-
masing item:
• What’s new. Untuk menampilkan fasilitas baru produk perusahaan kita.
• Product/Service. Untuk menampilkan keterangan tentang produk atau
layanan perusahaan kita seperti informasi, spesifikasi, model, harga dan
sebagainya.
• Table of Contents. Untuk membuat daftar isi halaman situs yang sedang
kita susun.
• Feedback Form. Menyediakan formulir umpan balik dari pemakai produk
kita.
• Search Form. Menyediakan sarana pencarian teks pada situs yang meliputi
ke seluruh halaman.
6. Klik pilihan Anda lalu klik Next, tampil kotak dialog ketiga (Gambar 3.9).
88
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
• Company Profile. Menampilkan informasi tentang perusahaan kita,
meliputi bidang usaha, jenis produk, riwayat perusahaan, personil, asset
perusahaan dan lain lain.
• Contact Informtion. Untuk menampilkan nama, alamat, metode, sarana dan
data-data untuk mengakses perusahaan.
7. Klik pilihan yang ingin Anda sertakan ke halaman web. Lalu klik Next, tampil
kotak dialog keempat (Gambar 3.10).
89
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
Gambar 3.11 Kotak dialog kelima
Kotak dialog kelima menyediakan sarana pengisian jumlah halaman untuk
produk perusahaan Anda dan jumlah halaman untuk servis yang diberikan
perusahaan.
9. Isikan jumlah halaman untuk masing-masing item tersebut. Lalu klik Next,
tampil kotak dialog keenam (Gambar 3.12).
90
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
Sarana penulisan image produk yang sangat berperanan dalam pemsaran
produk
• Pricing information
Untuk menampilkan daftar harga dan paket-paket produk perusahaan
• Information request form
Menyediakan form untuk umpan balik bagi perusahaan
• Capabilities list
Daftar kemampuan produk
• Reference accounts
daftar account yang bisa diakses untuk keperluan transfer
• Information request form
Menyediakan form untuk umpan balik bagi perusahaan
10. Tentukan pilihan Anda, lalu klik Next. Tampil kotak dialog ketujuh (Gambar
3.13).
91
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
Gambar 3.14 Kotak dialog kedelapan
Kotak dialog kedelapan berguna untuk penentuan apakah form umpan balik bisa
kompatibel dengan program database (misalnya MS Acces) atau program
spreadsheet (misalnya MS Excel). Fasilitas ini sangat berguna untuk pengaturan
umpan balik yang seringkali berjumlah amat besar.
12. Jangan mengubah pilihan dari Yes, use tab-delimited format, lalu klik Next.
Tampil kotak dialog kesembilan (Gambar 3.15).
92
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
Gambar 3.16 Kotak dialog kesepuluh
Kotak dialog kesepuluh menanyakan item yang akan dipakai sebagai header dan
footer tiap halaman.
14. Tentukan pilihan Anda, klik Next. Tampil dialog kesebelas.
93
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
Gambar 3. 18 Kotak dialog keduabelas
16. Kotak dialog keduabelas menyediakan sarana untuk pengisian nama perusahaan
dan alamatnya.. Isikan data-data dan informasi tersebut pada kotak isian yang
bersangkutan. Tentu saja data yang sesuai dengan keinginan Anda. Lalu klik
Next, tampil kotak dialog ketigabelas.
.
Gambar 3.19 Kotak dialog ketigabelas
17. Kotak dialog ketigabelas untuk pengisian telepon, fax dan e-mail. Isikan
datanya sesuai kondisi pada perusahaan Anda. Kik Next akan membuka kotak
dialog keempat belas untuk penentuan tema tampilan (Web Theme).
94
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
Gambar 3.20 Kotak dialog keempat belas
18. Klik tombol Choose Web Theme , tampil pemilihan Theme (Gambar 3.21).
95
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
Gambar 3. 22 Kotak dialog terakhir
20. Klik Finish, FrontPage XP akan bekerja keras mewujudkan keinginan kita
(berdasarkan pilihan-pilihan tersebut), sementara kita tinggal santai menunggu
hasilnya. Setelah selesai, FrontPage XP akan menampilkan susunan folder
maupun halaman situs. Klik ganda halaman default.htm yang merupakan
halaman Home Page situs tersebut. Home Page adalah halaman yang akan
ditampilkan pertama kali di dalam situs. Hasilnya seperti Gambar 3.23.
96
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
Pekerjaan selanjutnya adalah mengdit isinya, baik teks, gambar atau objek
lainnya, disesusaikan dengan data-data dan informasi perusahaan kita.
Seperti tampak pada Folder List, terlihat bahwa situs web yang dihasilkan
memiliki 16 halaman, yaitu Home, Feedback, Contents, Search, News,
Products, Services, Products (1,2,3), Services (1,2,3) dan Press Release (1,2,3).
Berikut ini keterangan beberapa halaman yang penting:
• Home
Menampilkan indormasi singkat tentang layanan yang disediakan oleh
perusahaan Anda. Tentu saja tersedia tombol-tombol navigasi dan daftar
halaman lain yang bisa dibuka.
• Feedback
Adalah semacam kotak saran yang menyediakan sarana umpan balik
terhadap produk kita.
• Contents
Adalah daftar isi halaman-halaman dalam situs perusahaan kita.
• Search
Halaman yang menediakan sarana pencarian data teks tertentu yang ada pada
situs perusahaan kita.
• News
Menyampaikan daftar perubahan atau perbaikan fasilitas layanan yang ada
pada versi terakhir. Cara memperbarui, jadwal produk baru, dan problem
serta pemecahannya.
• Products dan Services
Adalah halaman yang menyampaikan informasi tentang produk dan layanan
yang disediakan perusahaan kita.
Berikut ini dua tampilan halaman pada browser:
97
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
Gambar 3.24 Halaman Contents dan Products
98
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
4. Klik OK. Wizard dimulai dengan munculnya kotak dialog pertama Discussion
Web Wizard.
99
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
Gambar 3.27 Kotak dialog ketiga
7. Pada kotak dialog ketiga tersedia kotak pengisian judul diskusi dan nama
folder penyimpan hasil diskusi. Klik Next, tampil dialog keempat. Gambar
3.28.
100
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
Gambar 3.29 Kotak dialog kelima
9. Kotak dialog kelima menanyakan apakah diskusi yang akan dilangsungkan perlu
diproteksi atau tidak. Setelah menentukan pilihan, klik Next. Tampil dialog
keenam. Gambar 3.30.
101
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
Gambar 3.31 Kotak dialog ketujuh
11. Selanjutnya kotak dialog ketujuh menanyakan apakah daftar isi akan digunakan
sebagai halaman utama (Home Page).
102
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
Gambar 3.33 Kotak dialog kesembilan
13. Kotak dialog kesembilan menyediakan sarana pemilihan tema web. Tema yang
kita perlukan telah disediakan oleh FrontPage XP pada Gallery Theme sehingga
kita tinggal memilihnya saja. Klik tombol Choose Web Theme , tampil kotak
dialog pemilihan tema seperti Gambar 3.34.
103
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
Gambar 3.35 Kotak dialog kesepuluh
15. Pada kotak dialog kesepuluh pilihlah komposisi frame yang Anda sukai pada
kotak dialog kesepuluh. Lalu klik Next, tampil kotak dialog terakhir seperti
Gambar 3.36.
104
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
Gambar 3.37 Hasil Discussion Wizard
17. Selanjutnya Anda tin ggal mengganti teks yang ada sesuai dengan kebutuhan
Anda.
105
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
Kedua: tentukan pemakaian daftar isi,
form pencarian, kumpulan
usulan dan form konfirmasi
106
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
Kedelapan tentukan komposisi pencarian
dengan item judul, ukuran,
tanggal dan nilai item.
Tidak ada keharusan untuk menyelesaikan wizard sampai kotak dialog kesebelas,
pada kotak dialog manapun Anda bisa menghentikan proses jika Anda inginkan,
yaitu dengan klik tombol Finish. Atau, Anda ingin menggagalkan pemakaian wizard,
klik tombol Cancel.
Anda juga bisa melompati kotak dialog tertentu dengan tidak mengaktifkan pilihan
apapun pada kotak dialog tersebut.
107
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
4 Ringkasan Situs Web
Sampai di sini kita telah merasakan kecanggihan dan kemudahan pemakaian tiga
macam wizard yang disediakan FrontPage XP.
Tanpa harus memformat satu-persatu, tanpa harus memilih dan memasang gambar-
gambar, tanpa perlu membuat link, bahkan tanpa perlu penulisan script ataupun tag
HTML.
Semuanya tinggal pilih lalu edit teks-nya, mudah sekali. Hasilnya? Benar-benar
mengesankan, canggih dan indah.
Hanya itu? Tidak, masih ada beberapa web site lagi yang langkah-langkahnya
sengaja tidak kita ulas di sini, silahkan mencoba sendiri.
Berikut ini penulis sampaikan ringkasan masing-masing web site tersebut.
108
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
Berikut ini keterangan singkat masing-masing halaman:
• Wellcome
Menampilkan indormasi singkat tentang layanan yang disediakan oleh
perusahaan Anda. Tentu saja tersedia tombol-tombol navigasi dan daftar
halaman lain yang bisa dibuka.
• What’s New
Menyampaikan daftar perubahan atau perbaikan fasilitas layanan yang ada
pada versi terakhir. Cara memperbarui, jadwal produk baru, dan problem
serta pemecahannya.
• FAQ (Frequently Asked Question)
Menampilkan daftar pasangan pertanyaan-jawaban atas produk atau layanan
yang diberikan perusahaan.
• Bugs
Menyampaikan kekurangan atau kelemahan produk yang dijumpai terhadap
produk denga versi terbaru. Pemakai bisa menyampaikan ke perusahaan kita
mengenai bug atau kekurangan atas produk perusahaan kita, dengan cara
klik tombol Submit yangtelah disediakan.
• Suggestion
Adalah semacam kotak saran yang menyediakan sarana umpan balik
terhadap produk kita.
• Download
Menyediakan link melalui jalur FTP atau HTTP sehingga pengunjung situs
perusahaan kita bisa melakukan download.
• Discussion
Menyediakan teks link yang menghubungkan antar host pengunjung
sehingga bisa membentuk jaringan diskusi tentang produk perusahaan.
109
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
Gambar 3.39 Empty web
Direktori tersebut ada dua yaitu _Private, untuk penampung file -file sisipan dan
merupakan file hidden.
Direktori yang satunya adalah images, seperti namanya, direktori ini bertugas
menyimpan seluruh gambar yang digunakan oleh halaman- halaman di seluruh web.
110
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
Komposisi minimal tersebut terdiri dari sebuah halaman Default.htm yang masinh
kosong dan dua direktori yaitu _Private, untuk penampung file -file sisipan dan
merupakan file hidden.
Direktori yang satunya adalah images, seperti namanya, direktori ini bertugas
menyimpan seluruh gambar yang digunakan oleh halaman- halaman di seluruh web.
111
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
• Home. Menampilkan indormasi singkat tentang layanan yang disediakan
oleh perusahaan Anda. Tentu saja tersedia tombol-tombol navigasi dan
daftar halaman lain yang bisa dibuka.
• Members. Adalah halaman yang menyampaikan daftar keanggotaan
kelompok.
• Schedule. Menampilkan daftar acara diskusi, yang mencakup toik, jadwal,
pelaksana dan sebagainya.
• Archive. Menyediakan teks link yang menghubungkan antar host
pengunjung sehingga bisa membentuk jaringan diskusi tentang produk
perusahaan kita.
• Search. Adalah halaman yang berfungsi sebagai sarana pencarian teks yang
ada pada situs
5 Template halaman
Setelah membahas cara pembuatan situs web secara mudah (namun lengkap),
berikutnya akan kita kupas secara lebih detil tentang pembuatan halaman.
Kita bisa membuat sendiri suatu halaman, dari nol atau menggunakan template.
Meskipun kita bisa membuat halaman sendiri dari nol, namun penulis sarankan
untuk selalu memanfaatkan template.
112
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
isinya. Hapus halaman yang tidak perlu, atau buatlah halaman baru lalu pasangkan
sendiri isi halaman. Inilah pola yang sebaiknya Anda gunakan dengan FrontPage XP
(dan software aplikasi pada umumnya).
Kemudian, masalah yang paling menonjol pada tahap ini adalah bagaimana cara
membuat isi halaman, seperti membuat tabel, membuat frame dan seterusnya.
Itulah dasar penyusunan bab-bab yang akan kita bahas selanjutnya. Dimulai dari
bagian ini, akan dibahas template halaman yang telah disediakan FrontPage XP.
Template-template tersebut dihasilkan dari kotak dialog Pages Templates (lihat
Gambar 3.42).
Kotak dialog tersebut bisa ditampilkan dengan perintah File → New Page or site.
Lalu pada task pane klik ganda Pages templates. Muncul kotak dialog Pages
Templates, lihat Gambar 3.42.
Secara garis besar, kumpulan template tersebut bisa dipilah menjadi tiga jenis, yaitu
template halaman interaktif, template halaman pasif dan wizard.
Wizard sebenarnya juga akan menghasilkan beberapa halaman interaktif, namun
isinya bisa disesuai dengan keperluan kita.
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
Tentu saja Anda dapat mengubah form itu untuk keperluan lain dengan melakukan
modifikasi di sana sini. Yang paling mudah dimodifikasi adalah teks, editlah sesuai
keperluan.
114
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
Nemun kita tidak bisa meremehkan kemampuannya untuk mengumpulkan nama-
nama dan alamat-alamat e-mail (dengan beberapa modifikasi tentunya).
Pemakai akan mengetikkan sebuah komentar pada kotak area (kotak teks dengan
ukuran besar). Selanjutnya komentar ini akan ditambahkan ke bagian bawah
halaman dengan menggunakanan Include WebBot.
Selain kotak teks area, terdapat dau buah tombol, yaitu untuk mengirimkan komentar
(Submit Comments ) dan untuk membersihkan kotak area sehingga Anda bisa
menuliskan komentar baru (tombol Clear Comments ).
115
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
6.4 User Registration
Membuat sebuah form self-registration. Pemakai memasukkan nama dan password.
Kedua data ini dapat digunakan untuk konfirmasi identitas pemakai pada saat
pemakai tersebut mengakses site ini.
7 Wizard halaman
Template-template yang disediakan bisa jadi tidak memenuhi keinginan Anda.
Kalau memang demikian, cobalah menggunakan Form Page Wizard. Cara
pemakaiannya sama dengan wizard pada pembuatan situs, seperti telah dibahas di
bab 2 yang lalu.
Pada dasarnya Form Page Wizard akan membantu Anda membuat form dengan
cara, memilih informasi yang ingin Anda kumpulkan dari pengunjung situs Anda
kelak. Lalu
Anda juga bisa menentukan cara penyimpanan informasi yang diperoleh tersebut.
Data yang ada dapat disimpan ke sebuah halaman Web, atau disimpan sebagai
sebuah file teks, atau bisa juga dikirimkan ke sebuah CGI Script.
Secara detil, bisa Anda coba sendiri, berikut ini beberapa contoh kotak dialog Form
Page wizard:
116
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
Gambar 3.47 Kotak kotak dialog Form Page Wizard
Contoh halaman yang dihasilkan seperti tampak pada Gambar 3.7.
117
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
Gambar 3.48 Contoh halaman hasil wizard
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
8.2 Bibliography
Bibliography adalah sebuah halaman yang menampilkan daftar sumber referensi.
Bisa Anda gunakan untuk melengkapi situs yang banyak menggunakan pustaka
acuan atau banyak nara sumber. Seperti terlihat pada Gambar 3.50, Anda tinggal
mengedit teks yang Anda dengan teks Anda sendiri. Dan tentu saja Anda bisa
mengubah format teks sesuai dengan gaya Anda sendiri.
119
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
8.4 Table of Contents
Halaman ini menerapkan penggunaan Table of Contents WebBot dalam membuat
daftar isi halaman situs web Anda. Caranya, Anda cukup menentukan halaman mana
yang akan digunakan sebagai titik awal, senjutnya WebBot akan membuat daftar
semua dokumen yang terhubung ke dokumen tersebut.
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
8.6 Photo Gallery
Photo Gallery adalah halaman yang cocok untuk Anda para fotografer atau hobi
koleksi foto.
121
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
Tabel 3.2 Beberapa contoh komposisi gambar dan teks
Narrow Left Aligned Body Narrow Right Aligned Body One-Column Body (OCB)
OCB with content and side bar OCB with content on left OCB with content on right
OCB with Staggered SideBar OCB with Two SideBar OCB with Two Column
SideBar
122
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "