Panduan Singkat

Membuat
Website Statis Dengan
Microsoft FrontPage
Oleh : Achmad Mufti

Tehnik Ringkas Membuat Website

Dengan Microsoft FrontPage

- FREE E-BOOK -
DAFTAR ISI
Panduan Membuat Website Statis dengan Ms. FrontPage 1

DAFTAR ISI ................................................................................................ 0

BAB 1 MENGENAL FRONTPAGE ........................................................................ 1
BAB 2 BEKERJA DENGAN FRONTPAGE ............................................................... 3
A. LANGKAH AWAL ........................................................................... 3
B. MENYIMPAN NASKAH HTML .............................................................. 4
C. MEMBUAT HYPERLINK OTOMATIS ....................................................... 4
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................................................................................ 18
A. SUMBER TEMPLATE GRATIS ............................................................. 19
B. SUMBER GAMBAR GRATIS ............................................................... 19
B. SUMBER JAVASCRIPT GRATIS .......................................................... 19
BAB 4 PENUTUP ....................................................................................... 19

BAB 1 MENGENAL FRONTPAGE

www.master-bisnis.com - Rahasia Sang Jutawan INTERNET

Panduan Membuat Website Statis dengan Ms. FrontPage 2

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.

Keunggulan FrontPage adalah mudah penggunaannya, memiliki tampilan yang mirip

Microsoft Word. Bila Anda terbiasa menggunakan Microsoft Word, tidak terlalu mengalami
kesulitan dalam menggunakan program ini.

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 :

Gambar 1.1 Layar Microsoft FrontPage

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.

www.master-bisnis.com - Rahasia Sang Jutawan INTERNET

Panduan Membuat Website Statis dengan Ms. FrontPage 3

Gambar 1.2 FrontPage Mode HTML

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 :

MENGENAL SCRIPT NAGAYA AFFILIATE SYSTEM

www.master-bisnis.com - Rahasia Sang Jutawan INTERNET

Panduan Membuat Website Statis dengan Ms. FrontPage 4

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.

B. MENYIMPAN NASKAH HTML

4. Untuk menyimpan naskah cukup tekan CTRL+S, kemudian simpan pada foder
“Websiteku”. Berilah nama index.htm. Penamaan index,html atau index.htm adalah
mutalak, sebab ketika Anda membuka sebuah situs, maka yang Anda akses
sesungguhnya file yang bernama index.html, index.htm, index.php atau index.asp.
5. Jangan lupa klik tombol “Save”.

Gambar 2.1 Menyimpan Naskah HTML

C. MEMBUAT HYPERLINK OTOMATIS
Hyperlink adalah fasilitas yang digunakan untuk meloncat ke halaman lain atau
mengunjungi situs lain, atau meloncat ke bab tertentu pada satu halaman.

6. Ketiklah teks berikut:

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

7. Perhatkan saat Anda mengetikkan www.protheme.master-bisnis.com, kemudian

spasi, maka secara otomatis akan berubah menjadi hyperlink dengan ciri teks berwarna

www.master-bisnis.com - Rahasia Sang Jutawan INTERNET

Panduan Membuat Website Statis dengan Ms. FrontPage 5

biru dan bergaris, bila pointer Anda arahkan padanya, muncul tulisan “Use Ctrl+Click
to follow a hyperlink”. Lihat contohnya di bawah ini.

Gambar 2.2 contoh hyperlink

D. MENGGANTI MODEL HURUF

Untuk mengganti model dan ukuran huruf sama dengan saat Anda mengganti huruf pada
program Microsoft Word. Cukup Anda blok huruf yang bersangkutan kemudian pilih jenis
huruf dan ukurannya pada toolbar.

Style Font (huruf) Ukuran huruf Bold Underline Perataan

Kiri, tengah,
kanan, dan
Italic justify

Gambar 2.3 Toolbar huruf dan efeknya

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.

Gambar 2.4 Memilih Style

www.master-bisnis.com - Rahasia Sang Jutawan INTERNET

Panduan Membuat Website Statis dengan Ms. FrontPage 6

F. EFEK HURUF
Untuk merubah teks berefek tebal (Bold) atau miring (Italic) atau bergaris bawah
(Underline), cukup gunakan toolbar dibawah ini.

11. Berilah efek miring teks “Nagaya Affiliate Script” 12.

Berilah efek tebal teks “(NAS)”.

G. PEWARNAAN TEKS DAN EFEK STABILO

Dibawah ini adalah toolbar yang digunakan untuk memberikan efek stabilo dan pewarnaan
teks.
Efek Stabilo Warna huruf

Gambar 2.5 Pewarnaan Huruf dan Efek Stabilo

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.

H. MEMBUAT NOMOR URUT

Dibawah ini adalah toolbar yang digunakan untuk memberikan penomoran urut dan bullet

Penomoran Bullet

Gambar 2.6 Penomoran dan Bullet

15. Ketik teks “Fitur-fitur Script Nagaya Affiliate”.

16. Kemudian ketik teks “Fast Loading”.

17. Klik toolbar numbering

18. Seketika muncul angka satu kemudian klik enter dan lanjutkan dengan teks di bawah ini:

2. Easy to use (mudah digunakan)

3. Multi Language Support (multi bahasa)
4. Build in autoresponder. Dengan alat ini anda dapat menggunakan pesan berkelanjutan
dengan cara otomatis.
5. Promotion Tools, yang terdiri atas banner, teks link, teks ad, email ad
6. Sales Statistics Control, yang akan membantu pengelola bisnis mengontrol penjualan
para afiliasinya.
7. Clickthoughs, yang berfungsi menghitung banyaknya kunjungan situs anda dan dari
referensi siapa.

www.master-bisnis.com - Rahasia Sang Jutawan INTERNET

Panduan Membuat Website Statis dengan Ms. FrontPage 7

8. Site Configuration, untuk konfigurasi situs yang terdiri atas data bank dan data egold
anda, data member default, serta konfigurasi SEO situs anda, seperti judul,kata kunci,
deskripsi, Google dan Yahoo meta.
9. Affiliate Management, untuk mengatur para afiliasi anda, seprti menghapus,afiliasi
yang terbanyak kunjungannya, dan melihat hasil penjualan mereka.
10. Customer Management, halaman khusus customer anda untuk mendowload produk
atau bonus produk yang anda jual.
11. Site Contact, untuk kontak anda dengan afiliasi, customer dan pengunjung situs anda.
12. Order via bank, Wesel Pos dan egold. PayPal masih dalam proses.

I. MEMBUAT BULLET
19. Ketik teks di bawah ini :

Secara garis besar struktur script Nagaya Affiliate System terbagi menjadi 4 bagian, yaitu:

20. Selanjutnya ketik teks “Control Panel Admin (Pengelola Situs)”.

21. Kemudian klik toolbar .

22. Lanjutkan dengan mengetik teks di bawah ini :

• Control Panel Customer (pembeli produk)

• Control Panel Affiliate (member yang bergabung sebagai sales produk)
• Sales Letter Page (Halaman Surat Penawaran)

23. Tambahkan teks “Nagaya Affiliate System” pada akhir bullet. Akhiri dengan menekan
ENTER

J. MENGGANTI WARNA LATAR

24. Klik kanan lembar kerja Anda, pilih menu Format >> Background … .
25. Muncul jendela “Page Properties”.
26. Pilih warna kesukaan Anda pada bagian Background.
27. Klik OK. Lihat gambar dibawah ini.

www.master-bisnis.com - Rahasia Sang Jutawan INTERNET

Panduan Membuat Website Statis dengan Ms. FrontPage 8

Gambar 2.7 Mengganti Warna Latar

K. MEMBUAT TABEL DAN EFEKNYA

28. Pili menu Table >> Insert >> Table…

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.

www.master-bisnis.com - Rahasia Sang Jutawan INTERNET

Panduan Membuat Website Statis dengan Ms. FrontPage 9

Gambar 2.8 Menyisipkan Tabel

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 EGold.
script ini bisa anda peroleh secara gratis di www.IlmuKomputer.com dan versi fullnya bisa
anda beli di www.NagayaAffiliate.co.cc

Klik disini untuk keterangan detail

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.

33. Klik menu Insert >> Picture >> From File

34. Jendela Picture terbuka. Carilah file “nagaya-cover.jpg” di folder images Anda.
35. Lanjutkan dengan klik tombol Insert. Lihat gambar.

www.master-bisnis.com - Rahasia Sang Jutawan INTERNET

Panduan Membuat Website Statis dengan Ms. FrontPage 10

Gambar 2.9 Menyisipkan Gambar

M. MENGATUR PROPERTI TABLE

36. Silakan blok tabel Anda, kemudian klik kanan pilih Table Properties.

Gambar 2.10 Tabel Properti

www.master-bisnis.com - Rahasia Sang Jutawan INTERNET

Panduan Membuat Website Statis dengan Ms. FrontPage 11

37. Silakan ganti bagian Borders, sizenya 0 (nol). Bagian Background, color dengan warna
putih.
38. Akhiri dengan klik tombol OK.

N. HYPERLINK KE HALAMAN LAIN

39. Ketiklah teks di bawah ini :

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.

40. Silakan blok teks “klik link ini”.

41. Kemudian tekan CTRL+K atau toombar atau pilih menu Insert >> Hyperlink …

Gambar 2.11 Menyisipkan hyperlink ke halaman lain

42. Pada kotak yang muncul isikan degan “daftar-template-gratis.htm”. Klik OK.

O. HYPERLINK KE HALAMAN LAIN

Untuk meloncat ke atas halaman, pertama yang harus Anda kerjakan adalah membuat daftar
Bookmark, kemudian baru menyisipkan hyperlinknya

43. Silakan kembali ke judul website Anda.

44. Kemudian klik menu Insert >> Bookmark. Atau CTRL+G.

www.master-bisnis.com - Rahasia Sang Jutawan INTERNET

Panduan Membuat Website Statis dengan Ms. FrontPage 12

Gambar 2.12 Membuat Bookmark

45. Ketik nama bookmark “top”. Kemudian klik OK.

46. Maka akan muncul gambar bendera seperti dibawah ini.

Gambar 2.13 Hasil dari Bookmark

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.

P. MEMBUAT FILE BARU

Masih ingatkan pada praktek sebelumnya, bahwa Anda telah membuat sebuah hyperlink yang
menuju file bernama daftar-template-gratis.htm padahal file tersebut belum ada. Jadi,
tugas Anda sekarang adalah membuat file baru

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

www.master-bisnis.com - Rahasia Sang Jutawan INTERNET

Panduan Membuat Website Statis dengan Ms. FrontPage 13

• http://www.steves-templates.com

Kembali ke halaman depan

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.

Gambar 2.14 Task Pane Template

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.

www.master-bisnis.com - Rahasia Sang Jutawan INTERNET

Panduan Membuat Website Statis dengan Ms. FrontPage 14

Gambar 2.15 Jendela Page Template

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 :

Kembali ke halaman depan

63. Buat hyperlinknya menuju file index.htm.

64. Jangan lupa untuk menyimpannya.

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…

www.master-bisnis.com - Rahasia Sang Jutawan INTERNET

Panduan Membuat Website Statis dengan Ms. FrontPage 15

Gambar 2.16 Jendela Picture Properti

69. Muncul jendela Picture, klik dua kali folder images, kemudian pilih file gambar
nagayacover.jpg. Akhiri dengan klik tombol Open.

Gambar 2.17 Jendela Picture

70. Selanjutnya atur lebar tabel dengan menggeser splitter table

www.master-bisnis.com - Rahasia Sang Jutawan INTERNET

Panduan Membuat Website Statis dengan Ms. FrontPage 16

Gambar 2.18 Mengatur Spliter Tabel

S. UJI COBA WEBSITE

71. Buka folder “C:\Websiteku”.
72. Maka Anda akan mendapatkan isinya seperti gambar dibawah ini.

Gambar 2.17 Daftar file

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.

www.master-bisnis.com - Rahasia Sang Jutawan INTERNET

Panduan Membuat Website Statis dengan Ms. FrontPage 17

Gambar 2.18 Hasil Akhir dibuka dengan Internet Explorer

T. OPTIMASI MESIN PENCARI

Ini merupakan materi tingkat lanjut. Tugas Anda kali ini adalah optimasi mesin pencari. Tujuan
utama dari tehnik optimasi ini adalah agar desain situs Anda ini bisa diindex oleh software
mesin pencari.
Tehnik yang Anda terapkan ini merupakan tehnik lawas yang masih digunakan sampai
sekarang.

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">

www.master-bisnis.com - Rahasia Sang Jutawan INTERNET

Panduan Membuat Website Statis dengan Ms. FrontPage 18

<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”>
<meta content="7days" name="revisit-after">
<meta content="index, follow" name="robots">
</head>
………… dst ……

Penjelasan

1) Title (judul) website Anda

Judul website Anda harus menggambarkan website anda. Buatlah judul website
semenarik mungkin.
<title>judul</title>

2) Description (keterangan singkat situs anda)

Description atau keterangan singkat situs Anda terletak pada tag dibawah ini.
<meta name="Description" content="Penjelasan singkat situs Anda disini”>

3) Keyword (kata kunci)

Memilih kata kunci yang tepat untuk website anda sangat penting sebagai alat bantu
untuk memusatkan semua aktivitas optimisasi mesin pencari ke arah yang diinginkan.
<meta name="Keywords" content="kata kunci1, kata kunci2, dst”>

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>

<font face="Verdana" color="#CCC" size="1">Copyright

<script language="Javascript">
var aceDate=new Date() var
aceYear=aceDate.getYear() if
(aceYear < 1000)
aceYear+=1900
document.write("<font color='CCC' face='Arial' size='1'><b>"
+aceYear+"</b></font></small>")
//--></script>

Script ini adalah JavaScript untuk menampilkan CopyRight.

BAB 3 SUMBER ONLINE

www.master-bisnis.com - Rahasia Sang Jutawan INTERNET

Panduan Membuat Website Statis dengan Ms. FrontPage 19

A. SUMBER TEMPLATE GRATIS

• http://www.freesitetemplates.com
• http://www.templatespro.com
• http://www.DollarTemplates.com
• http://www.templatesforyou.com
• http://www.steves-templates.com

B. SUMBER GAMBAR GRATIS

• http://www.zyris.com
• http://www.free-graphics.com
• http://www.iconbazaar.com
• http://www.quickbanner.com
• http://www.media-graphics.net
• http://www.animationonline.com
• http://www.animationonline.com
• http://www.free-clip-images,com
• http://www.clipart.com
• http://www.absolutely-free-clipart.com

B. SUMBER JAVASCRIPT GRATIS

• http://www.java-scripts.com
• http://www.javascripts.com
• http://www.js-planet.com
• http://www.jonesdom.com
• http://www.java-resources.com • http://www.javagoodies.com
• http://www.dynamicdrive.com/

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 - Rahasia Sang Jutawan INTERNET

Panduan Membuat Website Statis dengan Ms. FrontPage 20

www.master-bisnis.com/download.php?f=free_domain_hosting.zip

Selamat Belajar Tetap Semangat & Mantap 48

www.master-bisnis.com - Rahasia Sang Jutawan INTERNET