Panduan Frontpage

PPaanndduuaann SSiinnggkkaatt MMeemmbbuuaatt WWeebbssiittee SSttaattiiss DDeennggaann MMiiccrroossoofftt FFrroonnttPPaaggee

Oleh : Nur Sahid

Tehnik Ringkas Membuat Website

Dengan Microsoft FrontPage

- FREE E-BOOK -

Panduan Membuat Website Statis dengan Ms. FrontPage

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

1

DDAAFFTTAARR IISSII 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



2

BBAABB 11 MMEENNGGEENNAALL FFRROONNTTPPAAGGEE

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



3

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.

Gambar 1.2 FrontPage Mode HTML



4

BBAABB 22 BBEEKKEERRJJAA DDEENNGGAANN FFRROONNTTPPAAGGEE

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



5

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

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.

Style Font (huruf) Ukuran huruf Bold Underline

Italic

Perataan Kiri, tengah, kanan, dan

justify



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.

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

Gambar 2.6 Penomoran dan Bullet 15. Ketik teks “Fitur-fitur Script Nagaya Affiliate”.

Gambar 2.4 Memilih Style

Warna hurufEfek Stabilo

Bullet Penomoran



7

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



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.



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 E-Gold. 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.



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



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.



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



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.

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.

Gambar 2.14 Task Pane Template



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…



15

Gambar 2.16 Jendela Picture Properti

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

Gambar 2.17 Jendela Picture

70. Selanjutnya atur lebar tabel dengan menggeser splitter table



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.



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



18

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



19

BBAABB 33 SSUUMMBBEERR OONNLLIINNEE

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/



20

BBAABB 44 PPEENNUUTTUUPP

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

Documents

Panduan Frontpage