Membuat Web Statis
Membuat Web Statis
- FREE E-BOOK -
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
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.
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.
Style
Font (huruf)
Ukuran huruf
Bold
Underline Italic
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.
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).
Gambar 2.5 Pewarnaan Huruf dan Efek Stabilo 13. Bloklah teks Nagaya Affiliate System (NAS). Kemudian klik toolbar warna biru tua. 14. Selanjutnya klik toolbar memberikan efek stabilo. berilah
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. 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
29. Sebagai latihan isikan bagian rows dengan 1, dan bagian column dengan 2 30. Klik OK.
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.
10
11
37. Silakan ganti bagian Borders, sizenya 0 (nol). Bagian Background, color dengan warna putih. 38. Akhiri dengan klik tombol OK.
Gambar 2.11 Menyisipkan hyperlink ke halaman lain 42. Pada kotak yang muncul isikan degan daftar-template-gratis.htm. Klik OK.
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.
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.
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 nagayacover.jpg. Akhiri dengan klik tombol Open.
Gambar 2.17 Jendela Picture 70. Selanjutnya atur lebar tabel dengan menggeser splitter table
16
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
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
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
20
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
Nur Sahid