Professional Documents
Culture Documents
- FREE E-BOOK -
Panduan Membuat Website Statis dengan Ms. FrontPage 1
DAFTAR ISI
DAFTAR ISI....................................................................................... 1
BAB 1 MENGENAL FRONTPAGE............................................................... 2
BAB 2 BEKERJA DENGAN FRONTPAGE ..................................................... 4
A. LANGKAH AWAL ................................................................ 4
B. MENYIMPAN NASKAH HTML ................................................... 4
C. MEMBUAT HYPERLINK OTOMATIS ............................................ 5
D. MENGGANTI MODEL HURUF................................................... 5
E. MENGGANTI STYLE ............................................................. 5
F. EFEK HURUF .................................................................... 6
G. PEWARNAAN TEKS DAN EFEK STABILO ...................................... 6
H. MEMBUAT NOMOR URUT ...................................................... 6
I. MEMBUAT BULLET.............................................................. 7
J. MENGGANTI WARNA LATAR................................................... 7
K. MEMBUAT TABEL DAN EFEKNYA.............................................. 8
L. MENYISIPKAN GAMBAR......................................................... 9
M. MENGATUR PROPERTI TABLE ................................................ 10
N. HYPERLINK KE HALAMAN LAIN .............................................. 11
O. HYPERLINK KE HALAMAN LAIN .............................................. 11
P. MEMBUAT FILE BARU ......................................................... 12
Q. MEMANFAATKAN TEMPLATE ................................................. 13
R. MENGGANTI GAMBAR ......................................................... 14
S. UJI COBA WEBSITE ............................................................ 16
T. OPTIMASI MESIN PENCARI .................................................... 17
U. MENYISIPKAN JAVASCRIPT ................................................... 18
BAB 3 SUMBER ONLINE ...................................................................... 19
A. SUMBER TEMPLATE GRATIS .................................................. 19
B. SUMBER GAMBAR GRATIS .................................................... 19
B. SUMBER JAVASCRIPT GRATIS ................................................ 19
BAB 4 PENUTUP .............................................................................. 20
BAB 1
MENGENAL FRONTPAGE
FrontPage adalah sebuah program web Authoring berbasis WYSIWYG (What You See Is
What You Get), artinya apa yang kita buat desainnya maka hasilnya di browser persis
seperti desain kita. FrontPage merupakan salah satu program yang dikeluarkan oleh
perusahaan Software Raksasa bernama Microsoft. Jadi jangan heran kalau program ini
biasa disebut Microsoft FrontPage.
FrontPage sangat hemat untuk urusan pembuatan website statis, yaitu website yang
bersifat satu arah, tidak memiliki sarana komunikasi antara pengunjung dengan pemilik
situs. Itu dikarenakan kemudahan dalam pemakaiannya, serta Anda tidak perlu
dipusingkan dengan urusan pembuatan kode-kode HTML dalam mendesain sebuah
website sebab FrontPage secara otomatis akan membuatnya.
Struktur layar FrontPage, bisa Anda lihat pada gambar di bawah ini :
Selain mode WYSIWYG (mode Normal), Anda bisa mendesain menggunakan tampilan HTML.
Mode ini berguna saat Anda ingin menyisipkan kode JavaScript. Ini salah satu kekurangan
FrontPage, yaitu tidak memiliki fasilitas dukungan penuh JavaScript.
BAB 2
BEKERJA DENGAN FRONTPAGE
A. LANGKAH AWAL
1. Sebelum memulai proyek pembuatan website statis, sebaiknya Anda persiapkan
sebuah folder di drive (C) dan berilah nama “Websiteku”.
2. Buat pula sub folder dengan nama “images”. Kopikan semua gambar yang akan Anda
gunakan untuk website pada folder ini.
3. Selanjutnya ketiklah teks di bawah ini :
Nagaya Affiliate System Script (NAS) adalah script yang dibuat dalam bahasa PHP.
Dirancang khusus untuk memenuhi kebutuhan sistem bisnis berbasis afiliasi. Memiliki
fasilitas control panel admin, control panel untuk afiliasi, control ordering process,
konfirmasi pembayaran, control affiliate signup dan autoresponder.
Script ini merupakan turunan dari Post Affiliate System versi 1.3 yang dimodifikasi
menyesuaikan iklim bisnis di Indonesia dan sekitarnya.
Para pengguna script ini hanya perlu menyesuaikan bahasa yang digunakan (standarnya
Inggris dan Indonesia), merubah logo dan mendesain sales letter menggunakan
frontpage atau Dreamweaver. Pengguna juga dapat merubah desain tampilan awal situs
ini menggunakan berbagai model template gratis yang tersebar di internet. Lihat
contohnya di www.protheme.master-bisnis.com
8. Tugas Anda sekarang adalah merubah seluruh teks kecuali judul menjadi berjenis font
Arial dan ukurannya 10 pt.
9. Blok judul dan ubah ukurannya menjadi 18 pt.
E. MENGGANTI STYLE
10. Bloklah judul naskah. Kemudian klik tombal style, pada toolbar style pilih Heading 1.
F. EFEK HURUF
Untuk merubah teks berefek tebal (Bold) atau miring (Italic) atau bergaris bawah
(Underline), cukup gunakan toolbar dibawah ini.
13. Bloklah teks “Nagaya Affiliate System (NAS)”. Kemudian klik toolbar berilah
warna biru tua.
14. Selanjutnya klik toolbar , pilih warna kuning. Toolbar ini digunakan untuk
memberikan efek stabilo.
Penomoran Bullet
I. MEMBUAT BULLET
19. Ketik teks di bawah ini :
Secara garis besar struktur script Nagaya Affiliate System terbagi menjadi 4 bagian,
yaitu:
23. Tambahkan teks “Nagaya Affiliate System” pada akhir bullet. Akhiri dengan menekan
ENTER
Pada jendela Insert Table, isikan data sesuai prosedur di bawah ini:
• Rows isikan dengan jumlah baris yang Anda kehendaki
• Columns isikan dengan banyaknya kolom
• Aligment perataan table
• Border size ukuran besarnya garis pinggir
• Cell padding jarak sel dengan isinya
• Cell spacing spasi untuk sel
29. Sebagai latihan isikan bagian rows dengan 1, dan bagian column dengan 2
30. Klik OK.
31. Pada bagian kolom sebelah kanan pada tabel ketik teks di bawah ini:
Nagaya Affiliate System, adalah script berbahasa PHP dan menggunakan database
MySQL yang dirancang khusus untuk bisnis afiliasi di Indonesia. Mendukung format Multi
Bahasa. Menyediakan 3 jenis sistem pembayaran, yaitu Wesel, transfer Bank dan E-
Gold. script ini bisa anda peroleh secara gratis di www.IlmuKomputer.com dan versi
fullnya bisa anda beli di www.NagayaAffiliate.co.cc
L. MENYISIPKAN GAMBAR
32. Pada bagian kolom sebelah kiri akan disisipkan gambar sampul Nagaya Affiliate.
Anda bisa mendapatkan contoh covernya pada halaman depan situs
www.NagayaAffiliate.co.cc. Cukup kli kanan kemudian save picture. Jangan lupa
letakkan gambar tersebut pada folder images.
37. Silakan ganti bagian Borders, sizenya 0 (nol). Bagian Background, color dengan
warna putih.
38. Akhiri dengan klik tombol OK.
Selain menggunakan desain dasar situs, andapun dengan mudah merubah merubah
desain situs menggunakan template gratis yang tersebar di internet.
Untuk mengetahui daftar alamat situs yang menyediakan template gratis silakan klik link
ini.
41. Kemudian tekan CTRL+K atau toombar atau pilih menu Insert >> Hyperlink …
42. Pada kotak yang muncul isikan degan “daftar-template-gratis.htm”. Klik OK.
47. Selanjutnya kembalilah ke akhir naskah, kemudian buat baris baru dan ketik “Back to
Top”.
48. Blok teks tersebut, tekan CTRL+K.
49. Pada kotak isian Insert Hyperlink, temukan tombol Bookmark. Lalu klik tombol
tersebut.
50. Pilih top kemudian, klik OK. Pada kotak Insert Hyperlink muncul “#top”.
51. Lalu OK lagi.
52. Tekan Kombinasi tombol keyaboard CTRL+N. maka seketika muncul lembar baru yang
masih kosong.
53. Ketikkan teks berikut ini :
Dibawah ini adalah daftar beberapa situs penyedia template gratis yang bisa Anda
manfaatkan untuk desain situs bisnis Anda.
• http://www.freesitetemplates.com
• http://www.templatespro.com
• http://www.DollarTemplates.com
• http://www.templatesforyou.com
• http://www.steves-templates.com
54. Blok teks Kembali ke halaman depan, kemudian buatlah hyperlink-nya menuju file
index.htm.
55. Simpan dengan CTRL+S dan berilah nama daftar-template-gratis.htm.
Q. MEMANFAATKAN TEMPLATE
56. Tugas Anda sekarang adalah membuat sebuah file HTML yang berisi keterangan detail
tentang script Nagaya Affiliate. Caranya : File >> New >> Page or Web.
57. Muncul disebelah kanan Anda sebuah Task Pane, pilih Page templates.
58. Pada jendela Page Templates yang muncul pilih Narrow, Right-aligned Body pada
daftar templates yang disediakan, kemudian klik OK. Lihat gambar untuk lebih
memperjelas.
59. Seketika muncul lebar file baru yang sudah berisi gambar dan teks. Simpan file tersebut
dengan nama detail.htm.
60. Kembalilah ke table Anda, disana terdapat kalimat “Klik disini untuk keterangan
detail”.
61. Silakan blok kalimat tersebut dan buat sebuah hyperlink dengan mengarah kepada file
“detail.htm”.
62. Tambahkan satu kalimat pada bagian bawah naskah :
R. MENGGANTI GAMBAR
65. Buka file detail.htm Anda.
66. Klik dua kali gambar yang ada.
67. Seketika muncul jendela Picture Properties.
68. klik Browse…
69. Muncul jendela Picture, klik dua kali folder images, kemudian pilih file gambar nagaya-
cover.jpg. Akhiri dengan klik tombol Open.
73. Untuk menguji coba hasil kerja Anda, silakan dua kali klik file index.htm
74. Lihat hasilnya di bawah ini. File index.htm ditampilkan dengan browser Internet
Explorer.
75. Silakan buka mode HTML pada program FrontPage Anda. Perhatikan yang saya beri
warna merah pada tag HTML dibawah ini :
<html><head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Judul Situs Anda Disini</title>
<meta name="Description" content="tehnik mudah mendapatkan rupiah dalam waktu 10 hari
saja, rahasia abad ini”>
<meta http-equiv="Content-Language" content="en-us">
<meta name="Keywords" content=" ecommerce,finance,mobile,jobs,lowongan
kerja,bisnis,multilevel,network, network marketing, viral marketing,free money,mlm, paid to
surf, home base business, home base businesses”>
Penjelasan
U. MENYISIPKAN JAVASCRIPT
76. Untuk menyisipkan kode JavaScript Anda harus membuka FrontPage dalam mode HTML.
77. Buka mode HTML, kemudian sisipkan kode ini sebelum tag </body>
BAB 3
SUMBER ONLINE
BAB 4
PENUTUP
Saya sangat bergembira bila ebook ini bermanfaat buat bangsa Indonesia, khususnya
anak Sulawesi Tengah.
Sebagai akhir dari pekerjaan Anda mendesain HTML adalah memperkenalkannya kepada
publik. Salah satu caranya adalah dengan memiliki domain dan hosting untuk memasang
file-file HTML Anda.
Tutorial cara memperoleh domain dan hosting gratis bisa Anda download di alamat ini :
www.master-bisnis.com/download.php?f=free_domain_hosting.zip
Selamat Belajar
Affiliate Manager
www.Master-Bisnis.com
Nur Sahid