Panduan Membuat Website Bisnissakti.com

117
© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

description

Panduan Membuat Website Bisnissakti.com dan Panduan Membuat Website Bisnissakti.com

Transcript of Panduan Membuat Website Bisnissakti.com

Page 1: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Page 2: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Panduan Lengkap Membuat Website untuk Pemula

Bagaimana Cara Membuat Website sederhana khusus untuk Anda seorang Pemula

by Freddy Iriawan

Ebook ini dipersembahkan oleh

-8-tulis nama anda disini-8-

Klik Link di bawah untuk mengunjungi websitenya

http://-8-tulis website affiliasi anda disini-8-

Mau dapat duit hanya dengan membagikan ebook Gratis?

Tutorial/Panduan menghasilkan uang dari ebook Gratis, segera klik http://bisnissakti.com/signup.php

Untuk Panduan Rebranding bisa klik : http://bisnissakti.com/Rebrand.pdf

Page 3: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

PERHATIAN: Anda MEMILIKI hak penuh untuk memperbanyak

panduan ini

Anda juga BOLEH membagikan dan memberikan isi dari panduan

ini pada siapa saja

© Copyright 2011 BisnisSakti.com

Page 4: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

ALL RIGHTS RESERVED

Tidak ada bagian dalam produk ini yang boleh diperbanyak,disebarkan, disiarkan atau diproduksi ulang dalam berbagai cara apapun, termasuk tetapi tidak terbatas secara elektronik atau mekanik. Dilarang keras untuk penggunaan tanpa izin tertulis dari penulis untuk mencetak ulang, atau menyebarluaskan penerbitan ini. Penyebaran panduan ini hanya melalui metode rebrand dengan tetap mencantumkan sumbernya yaitu bisnissakti.com.

Dengan membaca ebook ini, berarti Anda sudah membaca, mengerti dan setuju dengan semua pernyataan yang kami buat.

DISCLAIMER AND/OR LEGAL NOTICES

Segala usaha telah dibuat seakurat mungkin untuk menggambarkan produk ini dan potensinya. Contoh dalam produk ini tidak dapat di anggap sebagai janji atau garansi untuk mendapatkan penghasilan. Potensi untuk mendapat penghasilan sepenuhnya tergantung pada pribadi masing-masing yang menggunakan produk kami, ide kami, teknik dan usaha yang di lakukan. Kami tidak mengatakan bahwa produk ini adalah “cara cepat kaya”

Tingkat kesuksesan Anda dalam menggunakan materi dari kami tergantung dari waktu yang Anda curahkan untuk menjalankan program, menggunakan ide dan teknik yang telah dijabarkan, pengetahuan dan bermacam-macam keahlian. Kami tidak dapat menggaransi kesuksesan dan tingkat pendapatan Anda selama factor-faktor di atas tergantung dari kemampuan dari masing-masing individu.

Materi dari produk kami dan website kami memuat informasi yang berdasarkan pandangan kedepan. Pandangan kedepan memberikan kami harapan atau ramalan pada kejadian di masa yang akan datang.

Setiap pandangan kedepan pada setiap materi yang kami jual kami bermaksud untuk mengungkapkan pendapat kami tentang potensi untuk mendapatkan penghasilan. Banyak faktor yang akan mempengaruhi penghasilan Anda sebenarnya dan tidak ada garansi bahwa Anda akan menerima hasil yang sama seperti kami atau orang lain. Tidak ada garansi bahwa Anda akan meraih penghasilan dari ide dan teknik kami.

Page 5: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Hasil setiap orang berbeda-beda, dan seperti produk yang memberikan informasi untuk berkesempatan menghasilkan uang yang lain, Anda dapat menghasilkan uang lebih atau kurang, bahkan tidak sama sekali. Sukses dalam program ini adalah hasil dari kerja keras, waktu dan banyak faktor lain yang mempengaruhi. Tidak ada pernyataan garansi apapun tentang pendapatan Anda.

Page 6: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

OK! masih semangat dalam belajarnya kan? Selanjutnya saya akan tunjukkan cara termudah bagaimana membuat website sederhana khusus untuk pemula.

Kita awali dengan pemahaman bahasa HTML dulu ya.

Dewasa ini, hampir semua dokumen web dibuat dengan bahasa HTML (Hypertext Mark-up Language).

Meskipun Anda bisa saja membuat web page (halaman web) tanpa mengerti sedikitpun HTML, yakni dengan menggunakan editor HTML berjenis WYSIWYANG seperti Microsoft FrontPage, Adobe PageMill atau Netscape Composer.

Namun sangat disarankan bahkan nyaris diharuskan, agar Anda mengerti bahasa HTML.

Terutama agar Anda bisa memanfaatkan secara optimal berbagai fasilitas browser dan mengingat sejumlah kelemahan yang terdapat pada editor WYSIWYANG seperti di atas.

Untuk itu langkah pertama bagi Anda yang bercita-cita memiliki website sendiri adalah belajar HTML.

HTML (Hypertext Markup Language) adalah bahasa program yang digunakan untuk menulis format dokumen yang dapat digunakan dalam Web.

Dengan HTML, teks ASCII (file *.txt) dapat dipoles (di-mark-up) dengan kode-kode tertentu yang disebut tag untuk menjadi dokumen HTML (file *.htm atau *.html).

Page 7: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Oleh karena itu, untuk membuat dokumen HTML, Anda bisa menggunakan semua program teks editor biasa, mulai dari Notepad hingga MS Word. Untuk mudahnya, kita gunakan program Notepad.

Bukalah program Notepad. Bila Anda belum tahu caranya, klik Start > Programs > Accessories lalu Notepad. Sekarang ikutilah dengan seksama latihan-latihan berikut satu demi satu.

I. Membuat halaman Web dengan menggunakan program MS Word

A. MEMBUAT TABEL

Tabel pada halaman web bisa memperjelas keterangan karena keteraturannya dan tiap cell (tiap kotak pada tabel) bisa diberikan warna background yang berbeda agar penjelasan lebih mudah terlihat dan lebih terfokus.

Cara membuatnya Tabel : Klik "Table --> Insert --> Table" dan tentukan berapa banyak Row (baris) serta Column (kolom) nya; atau langsung klik icon Table di Toolbar (panah merah) dan drag (seret) berapa banyak cell ke bawah dan ke samping.

Gambar (2) : Icon Table

Page 8: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Mengatur Tampilan Tabel :

Sementara kursor berada pada tabel yang dimaksud, klik kanan pilih "Borders and Shading" (atau pilih dari Toolbar : Table -->Tabel Properties--> "Borders and Shading".

Selanjutnya silakan pilih Tab "Borders" (atas kiri), terdapat beberapa pilihan :

- None : Border (garis tepi keliling tabel) tidak akan terlihat

- Box : border hanya disekeliling (paling luar) dari tabel, sedangkan garis-garis kolom (column) dan baris (row) di dalamnya tidak akan terlihat.

- All : memperlihatkan semua garis kolom dan baris dengan ketebalan dan jenis garis yang sama

Gambar (3) Borders : All

- Grid : memperlihatkan border keliling paling luar dengan ketebalan dan jenis garis sesuai pengaturan Anda, sedangkan garis-garis kolom dan baris di dalamnya hanya tipis saja.

Page 9: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Gambar (4) Borders : Grid

Geser dan sesuaikan Lebar Tabel / Cell (dengan menggeser seperti yang ditunjukkan gambar diatas).

Atau tempelkan saja kursor Anda pada garis yang diinginkan untuk digeser (begitu juga untuk mengatur Tinggi Tabel /Cell ) sampai berbentuk panah kecil ke kiri kanan ( | ), dan geser.

Pada window pengaturan: “Border and Shading” itu juga Anda dapat memilih jenis garis (apakah putus-putus, dobel, dsb) , warna (Color) dan ketebalannya (1/4 pt, 1/2 pt, 3/4 pt, 1 pt ..., dst).

Fasilitas Preview di sebelah kanan memudahkan Anda melihat hasilnya.

Anda dapat juga mewarnai setiap cell dengan warna yang sama atau berbeda.

Page 10: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Pada window “Border and Shading", pilih Tab "Shading" kemudian pilih warna (untuk pilihan warna lebih banyak klik "More Colors") dan juga pilih "Apply To" apakah warna tersebut akan diterapkan pada Tabel (Table) atau Cell.

Gambar (5) Borders & Shading window

Anda juga bisa memilih Style dari Pattern bila menginginkan.

**Cobalah Klik Kanan pada Cell /Tabel untuk "Delete Cells" (Menghapus), "Split Cells" (Membagi Cell jadi beberapa bagian), "Cell Alignment" (Mengatur Letak Teks) ataupun "Merge Cells" (ini hanya tampil bila Anda mem-blok lebih dahulu cell-cell yang ingin disatukan).

Page 11: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

B. MEMBERI BACKGROUND PADA HALAMAN

Pada kebanyakan web bisnis warna dasarnya adalah putih.

Ini memudahkan Anda bila memakai gambar, karena pada umumnya gambar-gambar yang tersedia untuk web mempunyai dasar (background) putih. Hal ini akan dibahas lebih lanjut dalam materi lain.

Namun demikian bila Anda ingin warna background berbeda, silakan melakukannya.

Klik "Format --> Background". Ada beberapa pilihan yang disediakan :

a. Langsung klik warna yang dikehendaki, atau

Page 12: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

b. Klik "More Colors" untuk pilihan warna yang lebih banyak.

Bila masih tidak ada yang sesuai dengan keinginan, klik warna yang mendekati (misalnya biru), lalu klik tab "Custom".

Gambar (7) More Colors & Custom

Setelah itu akan tampil jendela berikut dimana Anda bisa menggeser 'slider' segitiga hitam untuk membuat warna lebih terang atau gelap; ataupun langsung memilih warna dari kotak di sebelahnya (klik dimana saja).

Page 13: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Namun berhati-hati dengan pilihan ini sebab warna-warna "Custom" kebanyakan bukan "Web Safe Color" (warna yang aman untuk web).

Karena web Anda akan dilihat oleh banyak orang dengan menggunakan

perangkat komputer yang berbeda kemampuannya ( kartu grafis, resolusi di monitor, dsb) maka bisa jadi apa yang tampil monitor Anda tidaklah sama dengan di monitor orang lain.

Gambar (8) Custom Color

Pilihan warna pada Microsoft Word sangat banyak karena aplikasi ini lebih banyak ditujukan untuk pengguna offline yang hendak mencetak (print) halaman tersebut.

Namun tidak ada salahnya Anda bereksperimen dengan opsi-opsi yang lain.

Page 14: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

c. Pilihan ke3 dari background ini ialah "Fill Effects" dimana terdapat 4 Tab yangdapat dipilih (Gradient, Texture, Pattern dan Picture). Pilihan "Pattern" hampir tidak pernah digunakan untuk halaman web.

Gambar (9) Fill Effects

Keterangan :

- Gradient : Bila Anda menginginkan warna gradasi.

Anda bisa memilih "One Color", "Two Color"(gradasi peralihan dari warna satu ke yang lainnya) atau pun "Preset" dimana warna-warna sudah dipilihkan untuk Anda.

Page 15: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Begitu pula letak warna bisa diatur apakah Horisontal, vertikal, diagonal dsb.

Contoh dibawah adalah pilihan "Two Color" dengan perletakan "Diagonal Up". Klik salah satu dari 4 pilihan tata letak dan gradasi warna yang terdapat di kotak di sebelahnya.

- Texture : Bila menginginkan background berupa Tekstur

- Picture : Bila menginginkan background dari gambar yang sudah Anda punya di komputer Anda. Pilih "Select Picture" dan arahkan ke direktori atau folder tempat Anda menyimpan gambar tersebut.

Bila gambar berukuran besar mungkin akan memenuhi seluruh halaman web, tetapi bila berukuran kecil, gambar akan berjejer banyak (tiles).

Untuk kebutuhan web bisnis online, diperlukan kecepatan membuka gambar, maka pilihlah gambar dengan size kecil.

C. MEMASUKKAN LINK

Berhubung cara memasukkan Link pada MS Word sangat mirip dengan di MS Frontpage, maka pembahasan mengenai ini bisa lihat pada butir III.C. Memasukkan Link (pada Microsoft Frontpage)

D. MENYERTAKAN IMAGE

Pilih image dengan size kecil agar tidak membebani download. Cara memasukkan / insert sangat mudah, yaitu : klik "Insert --->Picture --> From File".

Page 16: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Carilah gambar yang Anda maksud dan dimana tempatnya. Perkecil dan perbesar gambar dengan drag sisi-sisinya.

Bila posisi gambar terletak pada tempat yang tidak Anda inginkan, klik gambar tersebut dan akan muncul toolbar ini :

Bila toolbar ini tidak muncul juga klik kanan pada gambar dan klik "Format Picture" --> pilih tab "Layout".

Klik icon bergambar 'anjing dalam kotak bergaris-garis". Anda bisa mengatur tata letak gambar dengan memilih :

IN LINE : gambar dianggap sebagai teks (yang sangat besar) menyelip diantara teks/tulisan lainnya.

SQUARE : gambar menempati ruang bagai segi empat. Sisi kiri teks yang

bersebelahan dengan gambar akan rata kiri. Bila Anda pindahkan gambar ke tengah paragraf, juga akan tetap membentuk ruang segi 4.

Page 17: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

TIGHT : ruang sekitar gambar mengikuti bentuk image/ gambar.

Contoh di bawah, bentuk gambar adalah bundar (format GIF, bila format JPG akan menjadi square).

BEHIND TEXT : gambar terletak dibelakang Teks

IN FRONT OF : gambar terletak di depan / menutupi Teks

Page 18: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Gambar (10) Layout Picture

E. SAVE AS “WEB PAGE”

Setelah halaman web selesai dibuat, simpan (save) seperti biasa dengan format doc, namun save juga sebagai Web Page.

Inilah yang kemudian menjadi halaman web (ber-ekstensi htm atau html).

Bila kemudian Anda buka (dobel klik) halaman web yang barusan terbentuk tersebut , dan ternyata gambar-gambar yang Anda sertakan pada halaman tersebut tidak muncul.

Coba ulangi kembali proses di atas dengan File à Save As à Web Page, Filtered. Akan muncul tulisan "Saving in this format will remove ..." --> Klik "Yes" atau "Continue".

Gambar akan muncul di halaman web Anda sehingga Anda bisa melihat seperti apa halama web Anda bila sudah online.

Akan terbentuk juga folder yang berisi image/gambar yang ada pada halaman web tersebut.

Page 19: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Contohnya : file bernama produk.doc dimana pada halamannya di insert gambar buku.jpg dan button.gif.

Kemudian di Save As à Web Page, Filtered menjadi produk.htm dan folder produk_files di mana di dalam folder tersebut berisi gambar buku.jpg dan button.gif

!! Perlu diingat : Pada saat upload, masing-masing gambar itu harus di upload tersendiri ke server (misalnya : buku.jpg ; button.gif )!!. Bila hanya file halaman web saja yang di upload, yang muncul hanya tulisan tanpa gambar. Lihat juga bab V. Mengupload Web

** Kumpulkan halaman web, image, file-fle yang berhubungan pada satu folder yang sama sehingga memudahkan Anda untuk mengelola dan mengupload-nya.. Ingat!! Untuk halaman muka harus diberi nama index.htm (ekstensi .htm akan terbentuk otomatis)

Cara Optimasi Image

Setiap pengunjung website menginginkan halaman web yang dibuka terbuka dengan cepat seluruhnya.

Terlebih bila web bisnis (bukan website pribadi/komunitas sendiri) maka Anda harus menggunakan gambar seperlunya. Berikut beberapa tips :

a. Pakailah format gambar : JPG atau GIF. Format ini sangat irit space (terutama JPG, meski adakalanya GIF lebih hemat, Anda dapat mencoba dan bandingkan).

Format GIF digunakan pada animasi (image bergerak) atau bila menginginkan background image yang transparan. Image GIF yang di konversi ke JPG akan diberi bentuk/ bingkai segi empat.

Page 20: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Contohnya, image gif transparan berbentuk bintang warna kuning bila di-insert pada halaman web hitam, maka bintang kuning akan langsung berhubungan (di atas) bidang hitam.

Bila di konversi ke jpg, maka gambar bintang secara otomatis (default) akan mendapat background putih segi empat di sekelilingnya.

bintang.gif di insert pada halaman web berlatar hitam.

Bintang.gif di konversi menjadi bintang.jpg dan diberi latar hitam insert pada halaman web

b. Untuk mengubah Format gambar (misalnya dari BMP ke JPG), dapat menggunakan software "Adobe Photoshop" bila punya, atau software yang sederhana yaitu "Paint" dari Microsoft Windows" (sudah terinstal langsung pada saat menginstall Windows Me/Xp, yaitu di : Start --> All Programs--> Accessories --> Paint.

Menggunakan "Paint" untuk mengubah format sangat mudah : File --> Open, dan cari gambar yang diinginkan. Ubah format dengan cara "File --> Save As" (cari format yang diinginkan).

Page 21: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Kelemahannya software ini tidak bisa mengubah resolusi maupun mengubah ukuran gambar.

Software yang sekaligus dapat mengubah ukuran dan resolusi serta dapat didownload gratis adalah : Photo Resize Magic , silakan download di :

http://www.freedownloadscenter.com/Multimedia_and_Graphics/Graphics_Palette_and_Compression_Tools/Photo_Resize_Magic.html.

Nah disini kita akan lanjutkan cara membuat web dengan microsoft frontpage.

Meski langkah-langkah dalam panduan ini menggunakan Frontpage XP, namun sangat sedikit perbedaannya bila Anda menggunakan Frontpage 2000 atau dengan versi-versi sebelumnya.

Bagi pemakai Word yang belum pernah memakai Frontpage, Anda tidak usah ragu untuk mencoba-coba karena Fungsi dan Letak ToolBar pada Microsoft Frontpage mirip dengan Microsoft Word.

A. MEMULAI FRONTPAGE dan MEMBUAT HALAMAN

Software Frontpage sudah termasuk ketika Anda menginstall Microsoft Office.

Bila belum terinstall masukkan kembali CD Microsoft Office dan pilih “Add or Remove Features”, Next dan pilih Microsoft Frontpage dan ikuti petunjuk selanjutnya.

Setelah itu bukalah software ini, baik melalui shortcut ataupun “Start—All Programs-- Microsoft Frontpage”. Klik pada Menu bar : File New Page or Web. Akan tampil pada kolom kanan pilihan-pilihan. Pilih: New – Empty Web.

Page 22: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Kita akan membuat halaman Web tanpa frame, tanpa template. Bila Anda sudah menguasai “Empty Web” akan mudah untuk mencoba membuat pilihan-pilihan lainnya.

Setelah itu akan tampil jendela/window seperti berikut :

Jangan ubah apa-apa. Hanya klik saja “Browse” untuk menempatkan folder Web Anda. Terserah Anda menempatkannya pada direktori mana.

Tapi ketika sudah browse direktori yang dikehendaki, buat dulu Folder yang akan menampung semua file pada web tersebut.

Gambar (12) Web site Template

Page 23: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Gambar (13) Menempatkan Lokasi Web

Misalnya Anda ingin menempatkan Web Anda pada direktori C:\ klik icon “New Folder” (ditandai panah merah) kemudian pada jendela kecil berikutnya isikan nama yang dikehendaki (misalnya : Websaya ); dan klik OK, jendela kecil tertutup. Kembali ke jendela “New Web Location”, kini sudah tampil folder Websaya dan klik “Open”.

Jendela “New Web Location” menutup, pada jendela yang ada (Web Site

Template) klik saja “OK”.

Program segera membentuk direktori : C:\Websaya (gambar icon yang diberi panah merah) yang Anda bisa lihat dengan windows explorer pada (C:), dimana pada Tiles View folder web akan mempunyai lingkaran biru-hijau di tengahnya.

Page 24: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Gambar (14) Windows explorer drive (C:)

Gambar (15) Folder List & Toogle Pane

Sedangkan pada layar Frontpage, Anda akan melihat di sebelah kiri pada Folder List terdapat direktori C:\Websaya, dan Folder : _private dan image .

Page 25: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Bila Folder List belum muncul, klik Icon “Toogle Pane” (ditAndai panah merah). Ketika nanti Anda menutup program “Frontpage” dan kemudian ingin membuka lagi di lain waktu, biasanya akan segera diarahkan ke projek web terakhir yang Anda buat.

Bila tidak demikian, klik File à Open (atau klik icon gambar folder yang terbuka, di kiri atas Menu Bar).

Untuk membuat halaman baru, caranya mirip Microsoft Word, klik saja icon pada Menu Bar atau bisa juga klik File à New à Page or Web. Pilih: New – Page.

Untuk mengisi halaman, selain mengetik, Anda juga bisa copy dan paste dari halaman web page lain (html) ataupun dari file.doc (Microfoft Word) ataupun dari Notepad (file txt).

Selain copy dan paste, dapat juga dengan cara klik “Insert” pada Toolbar dan pilih “File”. Pastikan Files of Type terisi dengan All Files (*.*) agar Anda bisa melihat semua format files. [All Files (*.*) berada persis di atas HTML Files (*.htm, *.html).

Untuk insert file.doc sebaiknya tidak menggunakan cara ini (memerlukan converter), atau klik saja “No” ketika Anda diminta menginstallnya [Microsoft Frontpage needs a converter to display the file correctly. This feature is not currently installed. Would you like to install it now?)

Untuk save / simpan halaman web tersebut, klik saja gambar disket pada Menu Bar atau “File Save”. Akan muncul window dimana Anda bisa mengisi nama file (File name).

Silakan beri nama sesuka Anda, tentunya yang mencirikan halaman tersebut (kecuali halaman muka harus bernama index).

Page 26: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Jangan lupa untuk memberi Judul (Title) pada tiap halaman. Klik “Change” pada Page Title (persis di atas isian untuk nama File) untuk mengubahnya.

Page Title akan muncul pada jendela browser Anda (misalnya Internet Explorer di paling atas kiri).

Halaman muka/depan (home-page) dari Web, harus diberi nama index (htm atau html). Atau bila Toogle Pane aktif, pada Folder List pilih file yang akan dijadikan homepage.

Klik kanan pada file tersebut dan pilih “Set as Homepage”.

Halaman-halaman web yang Anda buat akan ditempatkan di dalam C:\Websaya (atau sesuai direktori Frontpage yang Anda buat dan buka), sedangkan images (gambargambar) akan dimasukkan ke dalam folder image.

Lebih jauh mengenai image akan dibahas dalam butir IIIE.

**Bila nama file terdiri dari 2 (dua kata) hendaknya jangan diberi spasi, tapi dihubungkan dengan middlescore (-) atau underscore ( _ ), contoh bonus-utama.htm atau bonus_utama.htm

**Bila ada banyak sekali halaman web yang Anda buat, bisa dikelompokkan dalam folder-folder baru agar tersusun rapih. Untuk membuat folder baru, klik kanan pada C:\Websaya dan pilih “New à Folder”.

**Pada komputer, apakah Frontpage atau Word, tidak dibedakan nama file huruf besar dan huruf kecil (non case sensitif), tetapi pada server tidak demikian. Jika suatu saat Anda

Page 27: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

hendak mem-format hard-disk dan memback up web Anda tersebut pada CD, pastikan agar huruf kecil tidak berubah menjadi huruf besar.

Halaman web yang terbentuk oleh Frontpage akan langsung terlihat berbentuk webpage (tidak seperti pada Microsoft Word yang mana harus pilih “ View à Web Page” dulu) dan halaman langsung mempunyai format htm.

Pada saat Anda sedang membuka suatu halaman, pada tab bagian bawah halaman, Frontpage memberikan pilihan 3 macam tampilan (lihat “Page View Tabs pada gambar di bawah ini) : Normal, HTML dan Preview.

Secara default (bila tidak Anda ubah) Anda bekerja pada modus “Normal”. Bila ingin melihat kode HTML yang terbentuk bisa menekan tab HTML.

Dan “Preview” untuk melihat tampilan halaman sebenarnya (bisa juga klik “Preview in Browser” (gambar kaca pembesar pada toolbar di atas di sebelah icon “print”).

Untuk dapat “Preview” Anda harus sudah menginstall Internet Explorer.

Pada menu Views Bar yang memanjang ke bawah (Page, Folders, Reports, Navigation, Hyperlinks, Tasks).

Dua menu yang terutama bagi Anda, pertama adalah Folders (diberi panah merah) dimana Anda bisa mengatur file-file Anda dan melihat keterangan dari halaman-halaman web yang Anda buat (nama file, judul, size, dsb).

Page 28: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Gambar (16) Views bar

Bila ingin memindahkan sekaligus beberapa file ke dalam suatu folder : sambil memijit tombol Shift (tahan terus) klik file yang dimaksud, maka file-file tersebut akan terblok warna biru.

Lepas Shift dan drag (klik kiri sekali dan seret ) ke folder yang diinginkan.

Klik pada File name ataupun Title bila ingin mengganti nama File ataupun judul halaman.

Menu penting yang kedua pada Views Bar adalah menu “Report” (dapat juga dengan cara “View à Report à Site Summary”) dimana Anda bisa melihat berapa banyak halaman web, gambar (pictures) beserta size keseluruhannya; dan yang terlebih penting lagi adalah untuk memeriksa Hyperlinks, apakah ada broken Hyperlinks (link yang tidak jalan karena salah menempatkannya).

Page 29: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Gambar (17) Reports views

Bila pada Site Summary terdapat Broken Hyperlink, klik saja untuk melihat link-link yang mana. Anda akan diperlihatkan sejumlah hyperlink. Klik halaman yang berstatus “Broken” tersebut untuk memperbaikinya.

Pembahasan mengenai Hyperlink terdapat pada butir IIIC. Memasukkan Link

B. MEMBUAT TABEL

Fungsi Tabel pada MS Frontpage mirip dengan MS Word, untuk memperjelas dan memperbandingkan serangkaian data, memberikan keteraturan dan juga mengatur layout halaman (misalkan hendak membagi homepage menjadi 2 atau 3 kolom utama).

Caranya seperti pada Microsoft Word, klik pada icon Table atau “Insert à Table à pilih berapa banyak kolom (column) dan baris (row).

Page 30: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Untuk memperbesar dan memperkecil tabel, langsung “drag” garis tepi/ batasbatas dari tabel tersebut.

Untuk mengatur tampilan warna, garis, dsb dari Tabel ataupun Cell, klik kanan pada Tabel atau Cell yang dimaksud dan pilih “Table Properties” (untuk mengatur Tabel) atau “Cell Properties” (untuk mengatur Cell).

Pada window yang keluar akan tampil seperti berikut :

Gambar 18 Table Properties

Borders : Untuk mengatur ketebalan garis paling luar dari tabel. Silakan pilih size (ketebalan) border. Bila tak ingin ada border maka size = 0. Warna border bisa Anda pilih, ataupun bila ingin dua warna, Anda bisa memilih Light dan Dark.

Page 31: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Background : Bisa memilih warna dengan langsung pilih dibagian Color. Bila memilih gambar maka centang “Use background picture, kemudian klik “Browse”, cari dan pilih file gambar Anda (format JPG atau GIF).

Bila gambar terlalu kecil, maka akan tersusun berbaris “tile”.

Pada Frontpage tidak ada pilihan jenis garis (putus-putus, titik-titik, dobel, dsb) seperti pada Microsoft Word.

C. MEMASUKKAN LINK

Satu hal yang sering dipakai dalam halaman web adalah Link (hubungan), yaitu bagaimana suatu kata/frasa/image bisa berhubungan dengan bagian lain/halaman lain/file lainnya.

Untuk membuatnya, bisa dilakukan dengan cara : Blok kata tersebut (klik kiri, tahan dan seret), kemudian "Klik Kanan" pada kata-kata yang di blok dan pilih "Hyperlink".

Page 32: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Gambar (19) Insert Link Internal

Terlihat di atas bahwa secara default sudah terpilih (warna biru ) Existing File / Web Page dan "Current Folder".

Pada bagian atas terdapat "Text to Display", masukkan "Judul atau kata-kata" yang Anda ingin muncul di caption web.

Ini tidak sama dengan nama file. Contoh nama file: produk (html) sedangkan Text to display: "Baca Keterangan Produk".

Selanjutnya pilih beberapa hal ini :

a. Untuk Link Internal

Link Internal adalah Link ke Halaman Web Lain dalam Satu proyek Web.

[Setiap halaman web adalah satu file (satu nama file). Sedangkan untuk format .doc (MS Word) maka satu file bisa mempunyai banyak halaman.]

Page 33: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Dari apa yang sudah terpilih secara default (Existing File / Web Page dan "Current Folder"), Anda tinggal memilih file mana yang hendak dihubungan.

Contoh kata-kata "Baca Keterangan Produk" hendak di link dengan file

produk.htm (lihat gambar 19 di atas). Anda tinggal klik file tersebut dari jendela yang muncul. Jangan link dengan halaman web pada direktori lain (pada contoh direktori adalah C:\Websaya) akan membuat link tidak jalan nantinya.

Bila Anda akan link ke halaman yang belum ada (baru akan dibuat) bisa pilih "Create New Document". Akan keluar seperti ini :

Gambar (20) Hyperlink ke New Document

Tinggal Anda mengisi nama dokumen tersebut (Name of new document), dan dimana akan ditempatkan (klik "Change" bila tidak ingin disimpan di direktori yang sudah muncul).

Page 34: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Juga Anda bisa pilih akan mengedit documen itu sekarang atau nanti (later). Bila pilih "Now" maka documen kosong akan ditampilkan, siap Anda kerjakan.

Sebaliknya bila pilih "Later" tidak akan ditampilkan tetapi tersimpan di tempat yang sudah Anda tentukan.

Dokumen yang dihasilkan sudah langsung berupa halaman web (html).

**Kata (atau frasa/kata-kata) yang sudah diberi Link akan secara default berwarna biru dengan underlined (Anda bebas merubah warna, size, font, tanpa underline, dsb).

**Untuk semua halaman yang terdapat dalam 1(satu) web yang Anda buat, sebaiknya memakai Link Internal, agar seAndainya Anda perlu mengganti nama domain, hal ini tidak bermasalah. (Untuk lebih jelasnya baca mengenai “Link Eksternal”)

b. Untuk Link Eksternal

Link Eksternal adalah Link ke Halaman Web dari situs-situs lain. Setelah klik "Hyperlink" pilih "Browsed Pages" di bawah dari "Current Folder" (lihat Gambar 19 Insert Hyperlink).

Akan terlihat daftar dari halaman-halaman web yang sudah Anda buka (browsed). Bila belum ada, dapat langsung ketik URL halaman yang dimaksud di bagian "Address" misalnya http://www.bisnissakti.com/index.htm atau cukup http://bisnissakti.com

Anda juga dapat membuat Link ke halaman web Anda sendiri dengan cara eksternal. CONTOHnya domain Anda adalah situstop.com.

Page 35: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Pada halaman muka (http://situstop.com/index.htm) terdapat link melalui kata-kata Silakan Lihat Di Sini ke halaman produk.htm. Setelah di blok kata-kata Silakan Lihat Di Sini dan klik kanan, pilih Hyperlink, Anda menekan Browsed Pages dan kemudian mengisi Address nya http://situstop.com/produk.htm .

Keterangan :

Bila memakai Link Internal untuk CONTOH di atas, caranya adalah memilih Existing File / Web Page dan "Current Folder", kemudian pilih file langsung dari list/daftar yang muncul di jendela tersebut) URL biasanya bisa disingkat nama domainnya saja (tanpa www).

c. Untuk Link ke Email

Setelah klik "Hyperlink" pilih "E-mail Address" kemudian akan tampil window dimana Anda dapat mengisi email address Anda.

Sehingga bila seorang mengklik kata yang sudah diberi Link ke email address, program akan langsung membuka "Microsoft Outlook" atau "Outlook Express" (tergantung setting dari komputer pengunjung tersebut) dimana pada kolom tujuan (To:) sudah terisi alamat email address Anda.

Begitu juga "Subject" bisa Anda isikan agar seragam. Hal ini berguna terutama bila Anda membuat banyak Link ke alamat email Anda dengan maksud yang berbeda-beda. Dengan subject yang sudah Anda tentukan, hal ini tidak membingungkan lagi dibanding Anda menerima email dengan tanpa subject atau dengan subject yang tidak Anda mengerti.

(Karena pada umumnya bila seseorang hendak berlangganan newsletter / join mailing list/milis, mereka membiarkan bagian "body" (isi surat) kosong.

Page 36: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Dengan demikian Anda harus dapat menerka maksud pengirim hanya dari subject.

d. Untuk Link ke File Download (Bukan Halaman Web)

Untuk file yang berukuran besar dan tak bisa dibuka dengan browser (file exe, video, ebook, dsb) maka Anda harus meminta pengunjung untuk mendownload dan save pada komputer mereka.

Dengan demikian mereka bisa melihatnya secara offline nantinya. Sebab itu sebaiknya beri keterangan untuk pengunjung/member yang ingin mendownload: Klik kanan pada Link yang dimaksud dan pilih "Save Target As".

Dengan demikian File yang dimaksud akan disimpan ke komputer dan tidak langsung dibuka di web browser.

Cara membuat Link sama dengan membuat Link internal. Anda harus

memasukkan dulu file tersebut pada direktori Web Anda.

Page 37: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Gambar (21) File sukses.exe di copy–paste ke Folder List pada Frontpage

Contoh direktori Web Anda adalah C:\Websaya dan Anda ingin memberi

link pada kata-kata Download Di Sini ke file sukses.exe yang mana masih terletak pada direktori lain (misalnya di C:\Documents and Settings \namakomputer\My Documents).

Copy file sukses.exe tersebut dan paste ke dalam direktori C:\Websaya (bisa paste pada Folder List yang muncul di Frontpage ataupun dengan Windows Explorer).

Page 38: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Gambar (22) File sukses.exe di copy– paste langsung ke direktori C:\Websaya melalui Windows Explorer.

Setelah itu buat Link Internal, dengan blok kata-kata Download Di Sini, klik kanan dan pilih Hyperlink.

Arahkan ke File sukses.exe (lihat gambar 23 di bawah).

Gambar (23) Membuat Link antara kata Download Di sini dengan file sukses.exe agar file dapat didownload.

Page 39: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

** Anda juga bisa memberi Link pada Gambar/Image. Caranya sama dengan di atas, seperti memberi Link pada kata/kumpulan kata. Gambar/ Image bisa di link ke halaman web, file ataupun Email address.

**Untuk mengedit atau pun menghapus Link, klik kanan pada kata-kata

ataupun image yang diberi link tersebut dan Anda bisa memilih "Edit", "Select", "Open", "Copy" ataupun "Remove" Hyperlink.

e. Untuk Link ke Bagian lain dari Halaman Yang Sama

Biasanya ini disebut "BookMark"; yaitu Link yang bila di klik akan menuju bagian lain (misalnya bagian bawah) tapi masih pada file/halaman yang sama.

Khususnya ini berguna bila Anda membuat daftar FAQ (Tanya Jawab), dimana daftar pertanyaan dikumpulkan menjadi satu di bagian atas, sedangkan semua jawabannya di bagian bawah; semua pada satu halaman yang sama.

Contoh : Daftar Isi pada halaman 3 dari eBook ini dibuat dengan menggunakan bookmark. Ingat bahwa file pdf ini dibuat dari file doc (Word) bukan webpage, sehingga satu nama file terdiri dari banyak halaman. Pada webpage, tiap halaman mempunyai nama sendiri-sendiri.

Jadi anggap saja semua halaman dalam ebook “Panduan Sakti Bisnis Online” adalah satu halaman yang panjang. Ketika Anda klik pada Daftar Isi, misalnya butir Cara Optimasi Image maka kursor Anda dan halaman pada monitor akan mengarah ke bagian isi pembahasan mengenai “Cara Optimasi Image” di halaman tersebut.

Page 40: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Untuk ini Anda harus membuat "BookMark" terlebih dahulu pada frasa:

Cara Optimasi Image. Anda bisa blok seluruh judul ataupun sebagian, kemudian pada Toolbar klik “Insert” pilih “Bookmark” (lihat gambar 24 di bawah).

Gambar 24 di atas ini memperlihatkan cara memberi Book Mark dengan

memakai Microsoft Word. Pada Mirosoft Frontpage caranya sama.

Lihat, teks yang akan diberi Bookmark di blok hitam lebih dahulu (yaitu OPTIMASI IMAGE), baru kemudian klik “Insert à Bookmark”.

Page 41: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Segera muncul window kecil seperti di bawah :

Gambar (25) Memberi tAnda untuk Bookmark.

Pada Bookmark name” isikan nama yang Anda kehendaki (dapat diganti bila Bookmark name sudah terisi nama lain).

Nama apa saja yang penting Anda dapat mengenali Link yang dimaksud (bisa nama yang sama misalnya Optimasi Image, atau Optimasi saja , atau lebih ringkas “Optim”, atau apa saja). Kemudian klik “Add”, maka nama yang Anda ketikkan akan masuk ke kolom di bawahnya.

Page 42: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Kemudian kembali ke daftar Isi dimana terdapat : Cara Optimasi Image Blok kata-kata tersebut dan beri hyperlink dengan cara seperti yang sudah-sudah di atas (klik kanan à hyperlink). Dan pada jendela yang muncul pilih "Place in the Document" (lihat gambar 26 di bawah).

Gambar (26) Memberi Link pada kata-kata yang sudah ditAndai sebagai

Bookmark.

Lihat bahwa di bawah tulisan “Bookmarks” pada kotak putih di atas telah terdapat beberapa kata yang dijadikan Bookmark name.

Pilih dan klik nama yang telah Anda buat sebelum-nya untuk bookmark name (misalnya Optimasi, yang merupakan Bookmark name dari frasa: Cara Optimasi Image) Lalu klik OK.

Selanjutnya cobalah Link yang telah dibuat dengan klik

Page 43: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Cara Optimasi Image pada Daftar Isi, lihat apakah akan mengarah ke bab Cara Optimasi Image.

** Untuk mencoba atau mengetes Link, sebaiknya dalam tampilan Preview

atau Preview in Browser agar muncul gambar ‘tangan’. Atau kalau Anda sedang bekerja dalam Page View Normal, Anda harus tekan tuts Control pada keyboard sambil klik link tersebut (gambar tangan akan muncul). Hal yang sama berlaku bila bekerja pada MS Word.

**Hyperlink yang Anda buat dapat diubah warnanya (secara default adalah biru dengan underlined). Dengan MS Frontpage hyperlink bisa diberi Rollover efek (efek-efek tertentu bila mouse di arahkan / di taruh di atas kata-kata yang diberi Hyperlink). Hal ini akan dibahas pada butir dibawah “ Mengatur Background”.

D. Mengatur Background

Untuk memberi background (warna atau gambar) pada halaman web, pilih “Format” pada Menu bar dan kemudian pilih “Background”; atau klik kanan di bagian mana saja pada halaman tersebut dan pilih “Page Properties”.

Kemudian pilih tab “Background”. Bila ingin background berupa gambar/picture, pada jendela yang muncul, di bagian :

Formatting, centang “Background picture” kemudian “Browse” cari dan pilih gambar yang dimaksud.

Page 44: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Gambar (26) jendela Page Properties untuk mengatur Background.

Pilihan Watermark juga akan aktif jika Anda menggunakan Background Picture, yang bila Anda centang akan membuat gambar Anda tetap di tempat meski Anda scroll monitor atau mouse Anda.

Cobalah copy / insert artikel yang cukup panjang pada halaman tersebut. Kemudian “Preview” maka yang akan bergeser adalah tulisan dari artikel, sedangkan gambar background tetap diam.

Bila ingin memberi warna pada background, ubah pada bagian : Colors – Background – ubah “Automatic” dengan warna yang diinginkan.

Disebelah dari Colors ada pilihan untuk warna Hyperlink. Secara default warna hyperlink adalah biru. Untuk hyperlink yang Visited (sudah pernah diklik/dikunjungi) akan berwarna : ungu.

Page 45: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Sedangkan hyperlink yang Active (ditempel oleh kursor sebelum di klik) akan berwarna merah.

Tapi yang terakhir ini baru akan bereaksi bila Anda centang “Enable hyperlink rollover effects” di bagian “Formatting”.

Silakan coba dan lihat hasilnya pada Preview atau “Preview in Browser” (save lebih dulu).

Tip :

** Sesudah Anda centang “Enable hyperlink rollover effects” maka tombol “Rollover style” akan aktif. Yang bila di klik akan muncul jendela lagi, dimana terdapat “Effects” dimana Anda dapat memilih opsi-opsi lain untuk efek rollover. Silakan Anda mencobanya dan melihat hasilnya pada Preview di bawahnya.

** Bila Anda mengubah warna backgroud, perhatikan agar jangan sama dengan warna hyperlink, karena membuat hyperlink menjadi tidak jelas. Atau bila terpaksa, Anda harus mengubah lagi warna-warna pada hyperlink, visited dan active.

Untuk halaman-halaman berikutnya bila Anda memakai background yang sama, agar memudahkan (tidak usah mengatur warna hyperlink lagi bila berubah), centang saja “Get background information from another page” dan pilih halaman yang akan dijadikan patokan.

Memakai “Theme”

Untuk web bisnis sebaiknya Anda menghindari theme karena dalam bisnis yang diutamakan adalah kecepatan membuka halaman, informasi yang jelas dan mengarah, serta mendorong terjadinya pembelian.

Page 46: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Background yang terdapat dalam Theme umumnya berukuran besar. Namun demikian bila Anda ingin mencoba, sekilas kami sajikan di sini. Silakan klik pada menu bar : Format à Theme.

Theme akan mengatur bukan saja background, tapi juga jenis Font dan warnanya, warna hyperlink, banner image, dsb.

Bila memakai Theme, maka Anda tidak bisa mengatur background secara manual lagi seperti yang dibahas sebelumnya (Pada Page Properties, tidak ada lagi tab Background).

Gambar (27) memakai dan memilih Theme untuk halaman.

Page 47: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Ada serangkaian theme sudah terinstall, Anda bisa klik pada bagian kiri dan melihat contohnya di sebelah kanan. Pilih yang Anda inginkan, dan Anda bisa memilih apakah Theme akan dipakai pada halaman tertentu saja atau semua halaman web.

Bila hanya akan dipakai pada halaman yang sedang Anda buka, centang pada Selected (pages) di sebelah kiri atas. Klik OK.

E. MENYERTAKAN IMAGE

Caranya sama dengan Microsoft Word. Pada toolbar : Insertà Pictureà From File. Cari dan pilih dimana gambar berada. Atau Anda dapat langsung “copy dan paste” gambar tersebut dari folder di tempat lain ke halaman web yang sedang dibuka pada Frontpage.

Ketika nanti halaman web di “save” maka secara default gambar tersebut akan tersimpan di folder “image/” yang terbentuk otomatis oleh Frontpage (lihat bahasan di butir IIIA dimana pada direktori C:\Websaya terbentuk Folder : _private dan image). Folder dan isinya dapat dilihat pada Folder List .

Bila Anda hendak menyimpannya di folder lain, Anda bisa klik “Change Folder”.

Misalkan Anda membut folder baru dengan nama: picture untuk menyimpan gambargambar tertentu, maka pada kolom folder dari jendela yang muncul akan tertera tulisan: picture/ yang berarti gambar di simpan dalam folder picture tersebut.

Page 48: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Gambar (28) pada kolom Folder tidak terdapat tulisan yang berarti

gambar disimpan pada folder default yaitu image/

**Pada versi Frontpage yang lebih rendah dari Office XP (misalnya Office 2000). Image harus lebih dulu di copy dan paste ke Folder image tersebut (yang terdapat di Frontpage), karena perintah “Insertà Pictureà From File” hanya dapat mengarah ke Folder image tersebut (tidak bisa browse ke direktori lain).

Bila gambar yang sudah di-insert kemudian diklik akan muncul Tool bar dimana Anda bisa mengatur lagi gelap terang gambar, kontras, memberi bevel, dsb; Bila Toolbar yang dimaksud tak muncul : klik pada Menu Bar : View à Toolbarsà centang Pictures.

Gambar (29) Tool Bar Pictures

1 : Untuk menambahkan teks pada image (image akan diubah menjadi format gif)

Panduan Sakti Bisnis

Page 49: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

2 : Membuat thumbnail (gambar kecil) yang langsung mempunyai link dengan gambar dalam ukuran sesungguhnya. Bila Anda mempunyai sejumlah gambar di satu halaman, Anda bisa menampilkanberupa thumbnails sehingga pengunjung dapat melihat secara garis besar semua gambar yang ada. Dan bila ingin melihat detail, klik gambar yang dimaksud.

3 : Mengatur posisi bila gambar bertindihan

4 : Memutar atau membalikkan gambar

5 : Mengatur “Contras” dan “Brightness” (Terang – gelap).

6 : Memotong gambar

7 : Klik perlahan : grayscale (hitam-putih-abu-abu) dan washout (menjadi keputihan, seperti dicuci)

8 : Diberi bingkai bevel

9 : Resample : menyesuaikan besaran (kb) dari gambar yang sudah diubah. Bila gambar yang diinsert tidak sesuai ukurannya Anda tinggal drag sisi-sisinya untuk memperbesar dan memperkecil.

Namun meski ukuran file diperkecil, size (berapa kilobytes) gambar tersebut akan tetap. Agar supaya size kb juga diperkecil, maka klik resample.

Page 50: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Tool selanjutnya (disebelah 9) adalah untuk Image Maps (membuat link dari bagian sebuah gambar) yang umumnya jarang dipakai.

**Bila Anda hendak membuat tulisan di atas image, dapat Anda lakukan dengan cara membuat Tabel lebih dahulu (pilih Borders Size = 0, agar tidak terlihat). Masukkan image sebagai background dari tabel. Maka Anda dapat memberi tulisan di dalam tabel tersebut, dimana gambar tadi adalah backgroundnya.

F. MENYERTAKAN BANNER

Banner (panji) dapat berupa gambar ataupun tulisan yang besar, yang menjadi pengenal web Anda; bisa berisi nama domain, Logo, Slogan web Anda.

Agar tiap halaman mempunyai Banner yang sama, tanpa Anda harus meng-insertnya pada setiap halaman; buka saja index.htm dan klik Format à Shared Borders ..

Pada window kecil yang tampil, pilih All pages, kemudian centang letak banner tersebut (apakah Top, Left, Right, Bottom). Setelah klik OK, maka pada semua halaman web Anda, akan terdapat tulisan :

Comment : This border appears in all pages of your Web. Replace this banner with your own content.

Tulisan di atas adalah komentar/keterangan, silakan di edit atau hapus saja.

Komentar atau keterangan ini hanya terlihat bila Anda membuka halaman web tersebut dengan Frontpage.

Page 51: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Kalau Anda buka langsung dari Windows Explorer ataupun lewat browser (on line) maka komentar tidak akan tampak. Silakan coba di Preview.

Untuk mengganti Comment : klik kanan pada tulisan tersebut dan pilih “Comment Properties”.

Untuk memasukkan gambar banner, klik (kiri) sekali pada tulisan tersebut dan tarik ke luar dari tempatnya (tarik ke mana saja). Pada kotak yang kini kosong, klik kanan dan pilih Border Properties.

Pada window kecil yang muncul Anda bisa mencentang picture dan pilih gambar banner Anda (gambar tersebut harus dimasukkan lebih dulu ke direktori tempat Anda menyimpan web Anda, karena Browse hanya bisa ke direktori tersebut).

Bila banner Anda hanya muncul sebagian (sebagian lagi tertutup), aturlah dengan cara klik kanan dan pilih Paragraf.

Kemudian Anda perbesar angka Before dan After pada pengaturan Spacing (lihat gambar).

Page 52: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Gambar (30) Mengatur Paragraf

Banner Anda harus cukup panjang. Bila sulit mendapatkan image yang demikian, gunakan banner tulisan Anda bisa memberi latar belakang warna (pada Border Properties pilih Color).

Keterangan :

**Paragraph juga dipakai untuk mengatur “Indentation” pada suatu halaman ataupun tabel /cell. “Before text” adalah jarak huruf paling kiri ke tepi halaman/ tabel, sedangkan“After Text” adalah jarak huruf paling kanan ke tepi halaman/tabel.

Page 53: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

G. MENAMBAH WEB TOOLS dan FORMS

Anda dapat melengkapi Website dengan fasilitas Buku tamu, Tell a friend, Hit counter, Forum/message board, dsb.

Untuk fasilitas Buku Tamu (Guest book) dan Hit counter sudah tersedia pula di Frontpage.

Sedangkan fasilitas lainnya ada banyak disediakan secara gratis di internet, salah satunya yang cukup lengkap menyediakan Web Tools adalah www.bravenet.com.

Untuk memasang Web Tools dari Bravenet.com (dan situs lain pada umumnya) Anda harus mendapatkannya kode html dari Web Tool yang ingin Anda pasang.

Pada situs Bravenet.com Anda perlu mendaftar dulu sebagai member secara gratis (pilih user id dan password). Para penyedia free web hosting lain, pada umumnya telah menyediakan pula tools Hit Counter dan Buku Tamu.

Page 54: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Gambar (31) http://www.bravenet.com

Untuk daftar menjadi Member : klik tombol “Join Now – It’s FREE” (panah merah).

Berikutnya Anda diminta mengisi form (isi yang bertanda * bintang saja), dan akan ada surat dikirim ke email Anda.

Buka surat tersebut dan klik link yang diberikan untuk konfirmasi. Selesai…

Anda sudah menjadi Member dan bisa memakai semua fasilitas yang disediakan.

Page 55: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

1. Memasukkan Kode HTML

Untuk Login berikutnya silakan isi user id dan password Anda (lihat panah oranye), pilih webtools (panah biru) dan klik webtools yang Anda inginkan, misalnya “Tell-A-Friend” (lingkaran hijau).

(Tampilan website Bravenet saat ini dapat berbeda dengan gambar 31 di atas). Tool “Tell-A-Friend” berguna jika seorang pengunjung hendak memberitahu temannya tentang suatu website yang bagus, ia dapat memasukkan nama dan emailnya sendiri (sebagai orang yang mengundang) dan emailnya kawannya.

Dimana Bravenet nanti akan mengirimkan email pada kawan tersebut tentang website yang direkomendasikan, agar kawan tersebut mengunjungi pula.

Anda akan mendapat kode html untuk memasukkan webtool “Tell-A-Friend” ini (yang juga akan terkirim ke email Anda).

Gambar (32) kode html webtool dari Bravenet

Page 56: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Copy kode html yang terdapat pada box ini ke Notepad, apa adanya tanpa ditambah ataupun dikurangi. Setelah itu Save dan beri nama apa

saja, misalnya “tell”. File yang terbentuk adalah tell.txt.

(Notepad dapat Anda buka dari Start à All Programs à Accessories à

Notepad.)

Gambar (33) mengcopy-paste kode html ke program Notepad.

Kemudian buka Frontpage dan buka halaman yang hendak kita masukkan tool “Tell-A-Friend” tersebut.

Page 57: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Letakkan kursor pada tempat yang kita inginkan dimana tool “Tell-A-Friend” muncul (panah biru). Kemudian klik “Insert à File”. Muncul window dimana kita dapat mencari file tempat kita menyimpan kode html tadi (misalnya tell.txt)

Gambar (34) insert web tool dalam halaman Frontpage

Agar file terlihat pastikan Files of Type terisi dengan Text Files (*.txt) atau All Files (*.*). Bila Files of Type masih terisi dengan HTML Files (*.htm, *.html), maka file.txt Anda tidak akan terlihat (lihat panah merah)

Page 58: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Setelah file ditemukan, dobel klik tell.txt tersebut. (atau klik sekali, dan pada window klik “Open”).

Gambar (35) Menginsert Text File (.txt) yang berisi kode HTML.

Pada window yang muncul ini, pilih HTML dan OK. Maka tools tersebut akan ter-insert pada halaman web [kadangkala image baru dapat terlihat dalam keadaan online/ setelah di upload]

Akan tampak seperti ini tool “Tell-A-Friend” yang sudah di insert ke halaman Frontpage (gambar 36 dengan lingkaran oval merah).

Page 59: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Page 60: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Gambar (37)

Form yang muncul bila “Tell-A-Friend” (paling kiri) di klik, setelah tentunya halaman web yang memuatnya di upload lebih dulu.

Silakan insert Tool / kode html lainnya dengan cara seperti ini. Untuk insert Hit Counter dan Guest Book, Anda bisa langsung gunakan tool di Ms Frontpage.

2. Hit Counter

Terdapat pada Menu Bar : Insert à Web Component à Hit Counter. Dan pilih tampilan angka yang Anda inginkan à Finish.

Page 61: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Gambar (38) Insert Hit Counter

Gambar (39) Setting Hit Counter

Page 62: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Pada window selanjutnya Anda masih dapat mengubah pilihan tampilan Hit Counter.

Klik (beri titik) pada pilihan Anda dan juga beri centang pada “Fixed number of digits”. Isikan berapa banyak digit/angka yang tampil (5 digit berarti maksimum tampilan adalah 99999).

Anda juga dapat mereset counter (mulai dari angka berapa) dengan centang “Reset counter to”.

3. Guest Book / Form

Yang dimaksud dengan Buku Tamu (Guest Book) adalah satu halaman web yang berisi Formulir isian untuk mengumpulkan kesan dan pesan dari para tamu (pengunjung), juga bisa ditambah dengan beberapa pertanyaan lain.

Hasil isian pengunjung akan ditampilkan di halaman lain, bisa di setting untuk umum ataupun pribadi saja.

Anda juga bisa menyediakan halaman ucapan terima kasih setelah pengunjung mengirimkan formulir yang telah diisi.

Page 63: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Contoh form pada halaman Guest Book :

Cara membuat form di atas sangat mudah, yaitu dengan klik “Insert à Form à Pilih yang sesuai.

Page 64: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Gambar (41) Insert Form

Anda dapat mencoba semua pilihan yang ada untuk mengetahui bentuk bentuk form yang Anda inginkan. Jangan takut mencoba karena semua

dapat dihapus (delete) dan tidak berpengaruh apa-apa.

Berikut adalah keterangan dari beberapa bentuk Form.

Text Box :

Submit Reset biasanya untuk mengisi nama atau alamat email.

Page 65: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Text Area :

Submit Reset untuk isian yang agak banyak.

Misalnya : kesan dan pesan, pertanyaan dan saran untuk Pengelola di halaman “Kontak Kami”.

Check Box :

Submit Reset untuk memilih dengan centang

Option Button :

Submit Reset untuk memilih dengan memberi “titik”. Kadang disebut juga “Radio Button”.

Memperkecil/memperbesar Text Box atau Text Area hanya dengan klik (kiri) sekali pada Box/Area tersebut (bukan pada tombol Sumbit /Reset) dan tariklah sampai ukurannya sesuai dengan keinginan Anda.

Tombol (button) “Submit” dan “Reset” :

- bila ingin ganti tulisannya (misalnya “Submit” diganti dengan “Kirim”). Klik kanan tombol yang dimaksud dan pilih “Form Field Properties” atau dobel klik tombol tersebut. Pada window berikutnya Anda dapat mengganti tulisan “Submit” pada Value/Tabel (Button Type jangan diganti).

- besar kecilnya button (tombol) dapat Anda atur dengan klik dan drag (tarik)/

- pindahkan tempatnya (geser dengan space bar atau “Enter” untuk pindahkan ke bawah)

Page 66: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

4. Latihan Membuat Form

Membuat Form Pemesanan seperti di bawah ini (gbr 42) :

Langkah-langkahnya :

1. Anda harus ingat, bahwa dalam form bisa terdapat beberapa kolom isian dan pilihan.

Tetapi agar Pemesan cukup 1 (satu) kali saja mengirim form (Submit) maka tombol “Submit” dan “Reset” cukup hanya satu saja.

2. Setiap Anda membuat form, apakah berupa “Option Button” atau “Textbox”, Frontpage akan menampilkan tombol “Submit” dan “Reset” pada setiap form KECUALI Anda memasukkan form tersebut dalam 1 (satu) kelompok yang ditandai dengan garis batas abu-abu (titik-titik halus).

3. Langkah pertama : Insertà Form à Option Button. Lalu tekan “Enter” (ketika kursor masih berkedip-kedip persisi di sebelah kiri tombol Submit) agar kedua tombol pindah ke bawah.

Tekan “Enter” beberapa kali sampai area garis batas membesar sesuai yang diperlukan.

4. Disebelah Option Button (lingkaran kecil) yang terbentuk ketik : Member.

Page 67: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

5. Geser kursor dengan space bar ataupun Tab agar menjauh ke kanan, dan buat lagi dengan cara yang sama untuk “Option Button” dan ketik “Non Member”.

Perhatikan, karena Anda membuat dalam satu area garis batas, maka Frontpage tidak memunculkan tombol “Submit” dan “Reset” lagi.

6. Selanjutnya dibawah dari kedua option button tersebut. Ketik “Nama :” dan klik “Insertà Formà Textbox”.

Buat lagi dengan cara yang sama di bawahnya untuk Email.

7. Di bawah “Email” ketik “Pilihan Produk” dan insert form “Drop-Down Box”. Anda sudah membuat seperti apa yang tampil pada gambar di atas.

8. Untuk mengisi “Drop-Down Box” dari Pilihan Produk”, dobel klik pada “Drop-Down Box” tersebut dan akan muncul window “Drop-Down Box Properties”. Klik “Add” maka akan muncul window seperti ini :

Gambar (43) Mengisi Pilihan pada Drop Down Box

Page 68: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Pada Choice isi : Paket 1.

Centang Specify Value bila Anda ingin keterangan nilai (Value) berbeda dari apa yang tertulis pada Drop-Down Box Properties.

Value akan muncul pada halaman web (atau email) yang menyimpan hasil order.

Pada Initial State, pilih Selected bila Anda ingin mengunjung ketika membuka form Order tersebut langsung melihat pilihan/tulisan “Paket 1”. Klik “OK”.

Setelah klik OK, window “Modify Choice” akan menutup dan kembali ke window sebelumnya (Drop-Down Box Properties) dimana sudah terisi keterangan “Paket 1”.

Tambahkan lagi beberapa pilihan (misalnya Paket 2 dan Paket 3) dengan cara menekan tombol “Add” kembali. Sehingga terlihat seperti ini :

Page 69: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Gambar (44) Daftar pilihan-pilihan yang ada pada Drop Down Box.

Bila pilihan paket sudah cukup, klik “OK”. Save halaman yang berisi Form Order tersebut. Bila Anda klik “Preview in Browser” pada Menu Bar atas akan terlihat bahwa Drop-Down Box sudah berjalan :

Gambar (45)

Sampai di sini pembuatan Form selesai.

Lalu bagaimana kita membaca hasilnya bila ada pengunjung memesan ? Di halaman berikut disajikan 2 cara untuk membaca hasil (Result), yaitu melalui Halaman Web dan Melalui Email.

Page 70: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

5a. Membaca Result Form melalui Halaman Web

Anda dapat membaca Result (input yang ditulis/ dipilih oleh pengunjung yang mengisi form) melalui halaman web. Caranya :

<> Buat dulu halaman web untuk menyimpan Result tersebut (seperti membuat halaman web biasa).

Beri nama yang Anda inginkan (nama harus satu kata atau dihubungkan dengan underscrore).

Pilih nama yang unik bila halaman penyimpan result ini tidak ingin diketahui orang lain (misalnya: reslt-05.htm)

<> Pada form yang sudah dibuat, klik kanan pada tombol Submit dan pilih Form Properties.

<> Pada Form Properties pilih Send to, kemudian isikan File name dari halaman Result yang sudah Anda buat tadi. Atau klik Browse untuk memilihnya.

<> Masih pada window Form Properties klik Option (kiri bawah window) yang mana kemudian akan muncul window berikutnya (Saving Result):

Page 71: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Gambar (46) Menyimpan Result.

Pada tab File Results Anda akan melihat nama file dari halaman web yang Anda pilih untuk menyimpan Result tadi. Dibawahnya, pada File Format pilih HTML. Klik “OK”.

**Bila Result bersifat pribadi/rahasia, untuk keamanan Anda dapat mengganti nama file dari halaman Result tersebut secara berkala.

**Pada Guest Book, bila Anda ingin para pengunjung bisa melihat semua kesanpesan pengunjung, berilah Link dari halaman Guest Book ke halaman Result.

**!! Halaman yang menyimpan Result hanya ada di web server (dibaca on line) dan tidak ada di komputer Anda. Bila Anda meng-upload ulang seluruh halaman web seperti dari

Page 72: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

awal maka Hit Counter akan kembali ke nol dan Halaman Result akan kosong kembali !! **

5b. Membaca Result Form melalui Email

Pada hosting [Pemilihan hosting akan dibahas pada Bab 4] yang mendukung CGI, Anda bisa menyimpan result pada email (pemberitahuan lewat email bila ada yang memesan atau “submit”).

Ini bisa dilakukan dengan: Pada form yang sudah terbentuk, klik kanan pada Tombol “Submit” dan pilih Form Properties.

Pada Where to store results pilih Send to other. Kemudian klik Option, akan tampil window Options for Custom Form Handler.

Page 73: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Gambar (47) Form Properties untuk memproses Result

Gambar (48)

Pada kolom Action isikan: /cgi/formmail. Method : POST Klik “OK”.

Page 74: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Kembali ke Form Properties (gambar 38) klik Advance (disebelah tombol Option), tampil Advance Form Properties. Klik Add. Muncul window Name/Value Pair. Pada Name ketik recipient. Pada Value ketik alamat email Anda misalnya [email protected]. Klik OK. Selesai.

6. Membuat halaman Konfirmasi / Terima kasih (Thank You Page)

Fasilitas untuk memproses Form yang minimal adalah halaman yang berisi Form dan Halaman Result.

Namun kurang lengkap bila tidak ada halaman Konfirmasi (menyatakan bahwa Form yang diisi sudah berhasil dikirim) atau Thank You page (terima kasih atas pesanan atau kesediaan mengisi).

Seperti membuat Result, halaman Konfirmasi ini juga terdiri dari 2 cara :

1. Bila Result dari Form disimpan pada Halaman Web

Buat dulu halaman yang berisi Konfirmasi atau Terima kasih.

Misalnya selain ucapan terima kasih juga berisi berapa lama permohonan akan ditanggapi.

Pada dialog box /window SavingResult (lihat gambar sebelumnya) klik Tab Confirmation Page. Pada URL confirmation page, klik Browse dan cari halaman yang telah Anda buat tadi.

Page 75: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

2. Bila Result dari Form dikirim melalui Email

Pada cara ini berarti Anda sudah memilih Send to other pada Form Properties. Klik Advance. Pada Advanced Form Properties klik Add.

Kemudian pada window kecil yang muncul ketik : redirect pada Name, dan pada Value ketikkan URL lokasi dari halaman Konfirmasi / Terima kasih (hendaknya Anda telah membuat dulu sebelumnya) misalnya : http://situssaya.com/thankyou.html

7. Fasilitas Tambahan Untuk Form

Di bawah ini ada 3 hal lagi yang bisa ditambahkan untuk membuat Form Anda lebih baik lagi, yaitu Mengisi Value dan Name serta memakai Rules.

a. Mengisi Value dan Name untuk memudahkan membaca Result.

Agar tidak sulit bagi Anda untuk membaca result, isilah Value untuk Option Button dan Name pada Textbox.

Page 76: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Gambar (49) Form Pemesanan

Dobel klik pada lingkaran Option Button satu persatu (Pastikan klik pada lingkarannya bukan pada tulisannya, lihat panah merah).

Pertama pada Option Button untuk Member. Muncul window Option Button Properties. Pada Value ketik : Member .

Dengan mengetik Value maka tulisan “Member” atau Non Member” akan muncul pada halaman Result, ketika pengunjung memilihnya.

Bila Value tidak diganti (sesuai default) maka yang muncul adalah kode, misalnya R1 atau R2.

Ini mungkin akan sedikit mengganggu Anda ketika membaca Result. Lakukan yang sama pada Option Button yang kedua, ketik Non Member pada Value.

Page 77: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Selanjutnya dobel klik pada kotak /Box dari Nama, akan muncul Text Box Properties, dimana pada Name ketik Nama. Lakukan yang serupa pada Textbox untuk Email (ketik Email pada Name).

2. Memakai Rules

Untuk mencegah pengunjung tidak mengisi dengan baik, Anda dapat mengatur rules sebagai berikut (berlaku pada Textbox ataupun Text Area).

1. Dobel klik Textbox yang ingin diberikan rules. Misalnya textbox dari Nama

(jangan tulisan atau tombol Submit /Resert).

2. Pada Text Area Properties atau Text Box Properties, klik Validate.

3. Kemudian pada Text Box Validation lakukan satu atau lebih cara di bawah ini

Page 78: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Gambar (50) Validasi untuk Pengaruran Rules

a. Untuk menyeleksi macam/tipe data yang diijinkan untuk dimasukkan Pada Data type, pilih salah satu dari drop-down box :

o Pilih No Constraints bila tidak ingin ada aturan yang dibuat (bebas).

o Pilih Text untuk mengatur macam huruf (alfabet) yang diijinkan. Pilihan pada Text Format akan menjadi aktif, silakan pilih : Letters, Digits, Whitespace (mengijinkan spasi, tabs), atau Other (karakter lainnya, seperti koma, tAnda hubung, dsb ).

Page 79: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Jika pilih Other, ketikkan karakter yang diijinkan tersebut pada kotak di sebelahnya. .

o Pilih Integer untuk memilih format dari sekelompok bilangan. Pilihan ini akan mengaktifkan Numeric Format (brada di bawah Text Format).

Pilih format yang diijinka apakah memakai koma, titik (period) atau spasi (silakan coba dan lihat Example-nya). Misalnya 123,456,789 atau

123.456.789 atau 123 456 789

o Pilih Number untuk memilih karakter bagi sekelompok bilangan

(Grouping) dan juga karakter untuk Decimal. Pilihan Anda pada

Grouping dan Decimal tidak bisa sama (1,123.456 atau 1.123,456)

b. Untuk memastikan pengunjung mengisi textbox tersebut :

o Pada Data length, centang Required.

o Bila ada pembatasan minimum karakter yang boleh dimasukkna, ketik

nilainya pada Min length box (misalnya 10 karakter).

o Begitu juga dengan maksimum karakter yang diijinkan, ketik nilainya pada Max length box.

Page 80: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

c. Untuk pengaturan nilai yang lebih ketat lagi, lakukan ini :

o Di bawah Data value, centang Field must be.

o Pilih syarat yang diinginkan dari drop-down list ( kurang dari, kurang dari dan sama dengan, lebih besar dari, lebih besar dan sama dengan, dsb)

o Ketik nilai patokannya pada Value box.

o Anda masih bisa memberi syarat kedua/ tambahan, dengan centang And must be, dan ketikkan nilainya.

Agar muncul keterangan jika pengunjung tidak mengisi textbox (padahal

persyaratan harus diisi).

Ketik keterangan pada Display Name (masih pada window Text Box Validation, gambar 41). Anda bisa mengisinya kalau Data Length telah dipilih Required.

Contoh untuk textbox Email, Anda ketikkan Email. Maka bila pengunjung men-submit tanpa mengisi, akan muncul keterangan "Please enter a value for the Email field."

Untuk menerapkan kondisi yang sama pada Option Button :

1. Dobel klik (lingkaran) option button tersebut

2. Pada Option Button Properties klik Validate.

Page 81: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

3. Untuk memastikan pengunjung memilih salah satu option button :

Centang Data required. Pada Display name ketikkan keterangan (dalam

bahasa Inggris), misalnya Member/Non Member. Sehingga keterangan yang muncul bila pengunjung tidak memilih satupun : "Please select one of the Member-Non Member options."

3. Memakai Template

Anda juga dapat membuat Form dengan menggunakan template yang sudah disediakan Frontpage.

Pada Menu bar pilih File à New Page/Web. Pilih Page Templates dari menu di sebelah kanan (pada versi office yang lain agak berbeda sedikit).

Akan terbuka Window dimana terdapat banyak pilihan template untuk halaman (Page Templates) antara lain : Confirmation Forms, Feedback Forms, Form Page Wizard, Frequently Asked Questions, Guest Book, dsb.

<> Coba pilih Form Page Wizard.

<> Pada window berikutnya (hanya terdapat pilihan : Cancel, Next, Finish) pilih Next.

Berikutnya terdapat box putih yang masih kosong, klik tombol Add di kiri atas nya.

Dari pilihan yang ada, klik account information. Anda dapat mengedit keterangan pada Edit the prompt for this question: (default terisi dengan : Please provide your account information) atau dapat pula mengeditnya nanti. Klik “Next”.

Page 82: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

<> Berikutnya Anda dapat memilih apakah akan memunculkan User Name, Password dan dapat mengedit nama variabel. Bila sudah klik “Next”. Box putih yang semula kosong kini sudah terisi dan bila masih ingin menambahform, klik kembali Add.

Cobalah kali ini memilih product information, lanjutkan dengan cara yang sama dan klik Next.

<> Anda bisa menambah form sebanyak yang Anda inginkan dengan Add, daftar dari form akan tertera semua di box putih. Bila sudah selesai klik Next.

<> Berikutnya pilih presentasi / tampilan form. Klik Next.

<> Pada Output Option, Anda bisa memilih cara menyimpan Result (input dari pengunjung yang mengisi Form tersebut).

Bila memilih save results to a web page, isikan/ ganti nama file sesuai yang Anda inginkan pada “Enter the base name of the results file:”.

Klik Finish

Page 83: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Gambar (51) Contoh Form yang terbentuk dengan memakai Template.

Form yang sudah terbentuk ini dapat Anda edit (langsung tempatkan kursor pada kata yang hendak diubah) dan sesuaikan kembali baik tampilan form (dapat menghapus sebagian form) ataupun kata-kata pada tombol Submit dan Reset (cara sudah diterangkan di atas).

Page 84: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Saatnya Peluncuran Website

Agar dapat dilihat oleh semua orang yang mengakses internet, web Anda perlu dipublikasikan dan di tempatkan pada web server.

Komputer server dimana web Anda disimpan, akan berjalan terus 24 jam sehari sehingga kapan pun orang mengaksesnya mereka akan bisa melihat website Anda.

Untuk keperluan ini, ada 2 hal utama yang harus Anda miliki :

1. Domain Name Server (DNS)

Domain name atau Nama domain adalah alamat dari website kita.

Alamat tersebut (dikenal sebagai URL) dapat diketikkan pada browser (Internet Explorer, Netscape Navigator, dsb) yang akan membuka halaman web Anda.

Anda dapat memilih memakai Nama Domain internasional (.com–untuk komersial, .org–untuk organisasi, .biz–untuk bisnis, .net-untuk penyedia layanan internet, .ac untuk pendidikan) atau Nama Domain Domestik.

Kode domain untuk Indonesia adalah .id, sehingga menjadi : .co.id; .or.id; net.id; .ac.id, dsb).

Pilihlah yang benar-benar sesuai karena bila berganti di kemudian hari tentu akan membingungkan pengunjung.

Page 85: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Biaya untuk nama domain dihitung per tahun.

2. Host

Host adalah tempat dimana website kita disimpan. Jika Nama Domain diibaratkan alamat rumah, maka Host adalah kapling dimana rumah itu berdiri.

Besarnya kapling tentu disesuaikan dengan besarnya rumah /ruangan-ruangan yang kita butuhkan.

Dengan demikian semakin banyak/ besar file-file web Anda, memerlukan kapasitas hosting semakin besar pula.

Pada umumnya penyedia layanan web hosting juga melayani pembelian nama domain, kadang tersedia dalam bentuk paket-paket dengan fasilitas yang berbeda-beda.

Anda bisa membeli secara paket ataupun terpisah, yaitu mendaftar untuk domain saja atau hosting saja.

Anda juga dapat berpindah hosting bila layanan yang sebelumnya dianggap kurang baik (biaya hosting dihitung per bulan) dengan tetap menggunakan alamat (nama domain) yang sama.

Pilihlah penyedia layanan hosting yang baik bagi dari segi komputer yang dijadikan server, fasilitas contol panel nya, maupun pelayann terhadap customernya.

Page 86: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Bagaimana membuat website tanpa mengeluarkan uang dahulu ?

Ebook ini disediakan untuk mereka yang benar-benar berangkat dari 0 (nol).

Sebab itu bila Anda masih dalam tahap belajar, ataupun hanya memerlukan website pribadi; sebaiknya Anda mendaftar yang gratis dahulu.

Setelah Anda memahami dan berhasil menayangkan website Anda dengan baik, silakan memakai layanan berbayar.

Ada banyak penyedia layanan gratis webhosting. Untuk memudahkan Anda, kami sudah menyediakan dua situs yang menampilkan sederetan daftar penyedia hosting gratis :

http://www.absolutely-free-hosting.com/

http://www.free-webhosts.com/webhosting-01.php

Carilah layanan yang sesuai dengan kebutuhan Anda, baik space (besaran ruang) yang disediakan, scripting-nya (apakah mendukung Frontpage, CGI, dsb), cara upload-nya (dengan FTP atau browser/web), tempat & besarnya iklan (apakah bisa disesuaikan) dan fasilitas tambahan (apakah disediakan webmail atau pop mail).

Jika Anda mendaftar pada webhosting gratis, juga akan sekaligus mendapat URL

(umumnya berupa http://IDAnda.namadomaintempatmendaftar.com

atau http://namadomaintempatmendaftar.com/IDAnda).

Sehingga Anda dapat meluncurkan website dengan benar-benar gratis.

Page 87: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

**Tips :

Perhatikan jangan sampai Anda mendaftar nama domain sendiri (www.domain-pilihanAnda.com/net/biz/info) bila ingin benar-benar gratis, karena penyedia hosting juga menawarkan jika Anda ingin memiliki nama domain sendiri (bayar) namun dengan hosting gratis di tempat mereka.

Bila Anda sudah serius berbisnis, hindari yang gratisan sebab akan menurunkan kredibilitas Anda. Selain memuat iklan, layanan hosting gratis juga kemungkinan kecil melayani komplain Anda bila terjadi suatu masalah. Sedangkan yang berbayar pun, jangan sampai pelayanannya kurang baik (server sering bermasalah, email tidak jalan, dsb). Sadari bahwa Website adalah “toko” Anda dan email adalah pengganti telepon Anda.

Untuk file yang dibuat dari Microsoft Word, upload dapat menggunakan software FTP (Cute FTP, Flash FXP, WS FTP, dsb).

Ini adalah software khusus untuk upload dan menata file-file web. Biasanya software tersebut dapat di download gratis (versi trial/shareware).

Program dan tutorial (bahasa Inggris) dari WS FTP dapat diperoleh di http://www.ftpplanet.com/tutorial/ atau situs yang lainnya (dapat Anda search di Google atau Yahoo).

Bila Anda masih merasa sulit untuk upload menggunakan FTP, banyak webhosting menyediakan fasilitas upload langsung menggunakan browser/lewat website (a.l. Yahoo Geocities).

Cara ini sangat praktis namun Anda harus login dulu pada situs dimana Anda mendaftar dan kadang ada pembatasan maksimum untuk sebuah file.

Page 88: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Halaman web yang dibuat dengan Frontpage juga bisa di upload dengan menggunakan fasilitas browser yang disediakan web hosting.

Tapi akan sayang sekali karena Frontpage sudah menyediakan fasilitas upload yang dapat langsung dilakukan dari program Frontpage sendiri.

Anda dapat me-manage file-file Anda langsung dari Frontpage, tanpa harus login ke File Manager. Pada Bab berikutnya Anda akan lebih jelas mengenai hal ini.

Namun satu hal yang perlu diingat bila hendak upload menggunakan program MS Frontpage, Server dimana kita akan hosting harus mempunyai "Frontpage Extention".

Beberapa contoh penyedia hosting gratis yang mempunyai fasilitas Frontpage Extention : http://www.100webspace.com/freeplan.html; http://www.netfirms.com/hostingbasic;

http://www.tripod.com; http://www.angelfire.com (tidak semua layanan hosting gratis menyediakan Frontpage Extention). Dan Anda perlu mengaktifkannya dulu (login ke Control Panel ataupun Account Anda, dan cari menu untuk Aktifkan Frontpage Extention).

Mengenai meng-upload web memakai fasilitas webhosting gratis, Anda akan dipandu langkah-langkahnya dalam Bab berikutnya.

Cara Mengupload Website

Meng”upload” adalah kebalikan dari “download”. Jika “download” adalah proses mengambil file dari server untuk masuk ke komputer Anda, maka “upload” adalah proses mengirim file dari komputer Anda ke server agar terpampang di dunia maya. Di bawah ini

Page 89: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

kami memberikan contoh cara upload dengan menggunakan Web Browser dan menggunakan Frontpage, pada web hosting yang gratis.

1. Mendaftar di Geocities

Geocities (http://geocities.yahoo.com)

Fasilitas gratis mendapat:

- Disk space : 15 MB

- Web Address : www.geocities.com/your-Yahoo!-ID

- Data Transfer bandwith : 3 GB/month (mis. pengunjung download file)

- Tidak mempunyai Frontpage extention

- Menyertakan iklan

Geocities mempunyai pelayanan yang cukup baik, termasuk bagian dari Yahoo! yang sudah dikenal bobotnya di dunia international.

Keuntungannya website Anda dapat dimasukkan dalam direktori Member Pages mereka. Iklannya pun hanya kecil dibanding layanan hosting gratis lainnya. Dapat menambahkan Guest Book, Hit Counter, Site statistic, dsb.

Kunjungi http://geocities.yahoo.com

Karena kita inginkan yang gratis, pilih GeoCities FREE Web Hosting (sebelah kiri). Klik Sign Up

Page 90: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Gambar (52) Mendaftar di Geocities

Jika Anda seorang pengguna email Yahoo, tentunya sudah mempunyai Yahoo User ID. Anda bisa gunakan User ID tersebut dan langsung Sign In di sebelah kanan.

Namun bila Anda menganggap itu kurang cocok (karena UserID akan menjadi bagian dari alamat website Anda), maka Anda dapat mendaftar kembali.

Halaman selanjutnya setelah klik Sign Up adalah seperti berikut :

Page 91: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Gambar (53) Sign In ke Geocities

Bila di halaman sebelumnya Anda tadi sudah Sign In, akan muncul halaman berikut seperti di bawah ini (gambar 54).

Tapi bila belum silakan Sign In saat ini.

Jika belum mempunyai User ID, Anda harus mendaftar dulu dengan klik tulisan biru “Sign Up” di kanan bawah. Selanjutnya Anda akan dibawa ke halaman pendaftaran. Mengenai pembahasan tentang pendaftaran user ID, silakan Anda lihat dalam LAMPIRAN.

Misalkan UserID Anda adalah wirausaha. Setelah Anda Sign In pada halaman selanjutnya bagian paling atas Anda akan lihat “Welcome wirausaha” .

Dan pada jalur biru di bawahnya adalah URL /alamat web site Anda, yaitu http://geocities.com/wirausaha

Page 92: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Gambar (54) Mengisi keterangan Web

Kemudian pada butir 1. Anda harus menentukan jenis/kategori web Anda.

Butir 2 adalah dari mana Anda mengetahui layanan gratis GeoCities ini. Pertanyaan no 2 tidak harus dijawab dengan tepat.

Beda dengan no 1, Anda harus mengisi dengan tepat, agar Yahoo bisa meng-index web Anda dalam kategori yang tepat pula.

Page 93: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Pada butir 3, ketik ulang kode yang tampil di kotak hitam, ke kotak putih (di sebelah tulisan “Enter the code shown”). Terakhir klik “Submit”. Selesai sudah proses pendaftaran.

Pada halaman berikutnya klik saja “Build your website now”.

2. Mengupload File

Pada halaman selanjutnya, jangan Anda dibingungkan dengan banyaknya fasilitas dan informasi. Lihat saja di sebelah kanan halaman, dimana terdapat Advanced Toolbox dengan 4 fasilitas :

Gambar ( 5 5)

1. File Manager, dimana Anda dapat melihat file-file yang sudah di upload, mengedit maupun menyusunnya.

2. Easy Upload, untuk upload file-file Anda ke web tanpa menggunakan FTP.

3. HTML Editor, untuk melihat dan mengedit kode html pada tiap halaman

4. Site Statistics, Anda dapat melihat berapa kali web Anda dibuka pengunjung.

Untuk upload maka kita pilih “Easy Upload”. Akan tampil halaman berikut :

Page 94: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Gambar (56)

Klik tombol Browse, dimana kemudian Anda akan dapat mencari file yang ingin di upload.

Karena ada 5 (lima) tombol Browse, maka Anda dapat mengupload maksimum 5 file sekaligus. Setelah itu klik “Upload Files”.

Perhatikan bahwa nama file harus menyambung atau diberi (-) atau (_) diantara 2 kata, jangan ada spasi.

Total upload yang diperbolehkan (dalam 1 kali klik upload) adalah 5 MB.

Sebab itu kompress-lah file-file yang besar dengan WinZip (bila Wnzip sudah terinstall, hanya tinggal klik kanan pada file yang diinginkan dan pilih Add to namafile.zip).

Page 95: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Bila ada banyak sekali file yang ingin di upload sekaligus, Anda dapat ubah “Number of Files to Upload” misalnya menjadi 10, dan klik Display. *)

Bila perlu Anda dapat mencentang “Automatically convert filenames to lowercase”, dimana nama file akan diubah semua ke huruf kecil.

Nama file pada server adalah “case sensitif” (membedakan huruf besar dan kecil).

Jika Anda mengupload nama file yang sama namun yang satu dengan huruf besar, satu lagi dengan huruf kecil atau gabungannya; misalnya carakerja.htm dan CaraKerja.html (atau CARAKERJA.htm, dan sebagainya).

Server akan menerimanya sebagai 2 file yang berbeda (menjadi dobel).

Jika ada halaman yang link ke file carakerja.html tapi kemudian Anda mengedit isi file tsb dan mengubah nama menjadi CaraKerja.html, lalu menguploadnya.

Maka ketika link tersebut di klik pengunjung, akan tetap mengarah ke file yang lama, yaitu carakerja.html.

Sebab itu jangan lupa mengedit juga hyperlink agar mengarah ke nama file yang baru (CaraKerja.html) dan delete-lah file yang lama (carakerja.html)

*)Untuk Automatically change “.htm” extentions to “.html” sebaiknya tidak usah Anda centang; kecuali Anda ingat untuk selalu mencentangnya setiap kali upload.

Page 96: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Setelah upload akan muncul pemberitahuan apakah file Anda sukses di upload. Anda pun dapat melihat file-file yang sudah di upload pada File Manager.

Gambar (57) Uplaod Results

Bila Anda tidak ingin upload lagi, silakan Logut. Dan suatu waktu nanti Anda ingin upload kembali, silakan buka halaman http://geocities.yahoo.com/ dan Sign In.

Kembali Anda akan menemukan Advanced Toolbox di halaman berikutnya, selanjutnya tinggal klik Easy Upload kembali.

3. EDIT WEB

Masuklah ke halaman http://geocities.yahoo.com/. Bila Anda sudah Sign In maka di kiri atas akan muncul sapaan “Welcome, wirausaha” (sesuai UserID yahoo). Klik File Manager pada Advanced Toolbox.

Page 97: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Gambar (58) Masuk File Manager

Klik Open File Manager.

Di sini Anda dapat melihat file-file yang ada pada server.

(Gambar 59)

Bila terdapat 2 halaman muka: index.html (yang baru di upload) dan index.htm (default dari geocities), hapuslah (delete) yang tidak terpakai.

Anda tinggal centang file-file yang ingin di edit dan klik tombol “Edit”. Demikian juga caranya bila ingin Copy file, Rename maupun Delete. Untuk New, Anda akan mendapat halaman yang baru.

Jadi untuk menambah halaman baru, bisa langsung dari File Manager ini ataupun menggunakan Microsoft Word (membuat web page) yang kemudian di upload.

Page 98: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Begitu pula untuk Edit isi halaman web yang sebelumnya sudah dibuat dengan Ms.Word, Anda bisa edit melalui Microsoft Word (dalam format .doc kemudian di save menjadi web page) baru kemudian upload.

Bila Anda mengupload nama file yang persis sama, secara otomatis file yang sudah ada di File Manager ini akan terganti dengan yang baru.

Bila ada halaman web yang tidak keluar gambarnya, berarti Anda belum upload gambar-gambar yang ada di halaman web tersebut.

Agar bisa muncul lakukan 8 (delapan) langkah sebagai berikut :

1. Pastikan halaman web tersebut di save (dari MS Word) dengan memilih “Save As à Web Page, Filtered” dan klik “Yes” (Lihat kembali bab I E. Save As Web Page).

2. Akan terbentuk HTML document dan folder files. Agar mudah, sebagai contoh file bernama produk.doc dimasukkan gambar buku.jpg dan button.gif .

Setelah di save dengan cara di atas (no 1) terbentuk product.htm + produk_files (yang berisi buku.jpg dan button.gif).

3. Upload product.htm, buku.jpg dan button.gif.

4. Pada File Manager klik New dibawah Subdirectories, agar terbentuk folder baru di dalam direktoriyan sudah ada.

Page 99: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Gambar (60)

Pada halaman berikutnya isi nama folder : produk_files

5. Setelah terbentuk folder produk_files, centang buku.jpg dan button.gif kemudian klik “Move” (tombol ini baru muncul bila sudah ada Subdirectori).

6. Berikutnya Anda akan diminta memilih folder/subdirektori ke mana kedua file gambar tersebut akan dipindahkan. Pilih produk_files .

7. Sekarang pada File Manager Anda klik View pada file produk.htm, maka gambar sudah muncul.

8. Intinya, hyperlink/URL dari file pada komputer Anda harus sama dengan hyperlink /URL pada file di server.

Untuk melihatnya, pada web page yang ada di komputer Anda, klik kanan pada gambar dan pilih Properties. Misalkan keluar seperti ini :

file:///C:/Documents%20and%20Settings/order_files/image001.gif.

Maka pada server, file image001.gif juga harus tersimpan di folder order_files.

Silakan lihat halaman-halaman yang sudah Anda upload dengan klik “View” pada File Manager (gambar 59). Alamat website atau URL Anda adalah : http://www.geocities.com/Yahoo-ID-Anda

Page 100: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

4. Membuat Buku Tamu (Guest Book) di Geocities

Dari halaman File Manager, klik Add Ons, pada sebelah kanan halaman agak bawah.

Gambar (61) Menambah fasilitas/tool lain pada web

Pada halaman berikutnya pilih Guest Book.

Gambar (62)

Selanjutnya terdapat keterangan dan feature Guest Book yang disediakan oleh Geocities.

- Guest Book Setup : membuat dan mengatur Guest Book Anda

-Approve Submissions : melihat hasil isian pengunjung sebelum dimuat, Anda bisa menerima (post) atau menolaknya (delete). Anda harus mengaktifkan pilihan Review entries before posting (Lihat pada Guest Book Setup butir 8 di bawah).

- Current Posts : Entri (hasil isian) pengunjung yang telah dimuat, dapat Anda lihat semua dan hapus yang tidak ingin dimuat lagi.

Page 101: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

- Install Links to Your Guestbook : Link yang dapat di klik pengunjung agar mereka bisa mengisi Buku Tamu atau melihatnya (bila pilihan di–set untuk publik).

Dibagian bawah (setelah Guest Book Setup) dijelaskan lebih detail mengenai ini.

Pilih Guest Book Setup

Anda akan diminta mengeset (Set up) untuk fasilitas Buku Tamu ini. Umumnya fasilitas Guest Book terdiri dari 3 halaman :

a. Halaman Guest Book, yang berisi Form untuk diisi Pengunjung

b. Halaman Entry, yang memperlihatkan input (hasil isian) Pengunjung

c. Halaman Konfirmasi/Terima kasih, muncul setelah Pengunjung klik tombol untuk mengirim /menyerahkan form yang sudah diisi.

Berikut yang bisa Anda Set-up.

1. Guest book name :

beri nama sesuai yang diinginkan

2. Guestbook appearance :

klik warna yang diinginkan untuk Font maupun background.

3. Introduction :

isi dengan kata-kata yang meminta kesediaan pengunjung mengisi dan juga ucapan terima kasih.

Page 102: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

4. Questions:

Anda bisa mengganti First name dengan Nama, Comment dengan Komentar, dan isikan hal lainnya lagi yang Anda ingin dapatkan dari pengunjung.

Pilih Entry style : Text Entry hanya bisa membuat karakter yang terbatas (seperti Text Box pada pembuatan Form dengan Frontpage); sedangkan Comment Box bisa memuat banyak kata-kata (gunakan untuk komentar pengunjung).

5. Enter the text the Submit button will display :

Setelah pengunjung mengisi form, mereka harus klik tombol yang Anda bisa beri nama sesuai keinginan Anda, apakah Kirim, atau Tulis Buku Tamu, dsb (default : Sign my Guestbook).

6. Customize your View Entries Page :

untuk mengubah tampilan halaman Entry sesuai selera Anda.

Tentukan berapa banyak entry dalam 1 halaman ( 1 entry adalah keseluruhan isi form yang di-isi pengunjung). Akan ada halaman kedua, ketiga, dsb.

Tentukan pula tampilan garis pemisah, antara satu entri dengan entri berikutnya.

7. Customize Links on the Confirmation Page

Terlebih dahulu Anda sudah membuat halaman Konfirmasi / Terima kasih, dan upload ke webserver.

Page 103: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Lalu isikan URL nya (lokasi/alamat halaman tersebut). Bisa pilih apakah halaman itu akan ditampilkan langsung (setelah pengunjung klik untuk menyerahkan form, atau hanya tampil link nya).

8. Options

- Send notification email : Bila ada yang mengisi Buku tamu akan ada pemberitahuan melalui email Anda di yahoo (yang menggunakan User ID yang sama)

- Review entries before posting : Melihat hasil isian pengunjung sebelum

dimuat, dan dapat menolaknya untuk tidak dimuat.

- Privacy Option : Untuk umum (pilih Public), untuk pribadi/hanya Anda yang dapat melihat (pilih Private).

Sewaktu-waktu Anda dapat klik Preview untuk melihat hasilnya dan memperbaiki bila belum sesuai. Bila sudah, klik Finish; dan Anda akan mendapat halaman seperti di bawah ini :

Gambar (63) Kode HTML untuk Link masuk Guest Book

Page 104: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Kode HTML dalam kotak harus di copy dan paste ke halaman dimana Anda inginkan terdapat Link masuk ke Buku Tamu. Bila Anda memilih Buku Tamu bisa dilihat pengunjung (pilih Privacy Option pada butir 8 : Public), maka Link yang akan muncul adalah sbb :

Sign Guestbook View Guestbook

Bila pada Privacy Option Anda memilih Private, Link View Guestbook tidak akan muncul. Kode HTML yang akan Anda dapat seperti berikut :

<a href="http://geocities.yahoo.com/gb/sign?member=wirausaha">Sign Guestbook</a> Your GB is private

Anda tidak usah copy kata-kata Your GB is private.

Cara Memasukkan Kode HTML ke Halaman Web

Cara Pertama, yaitu mengikuti cara di Geocities.

1. Blok dan Copy kode HTML yang dimaksud; dan masuk Step 2 klik Go To File Manager.

2. Pada File Manager, beri centang pada kotak di depan file atau halaman web yang Anda ingin masukkan Link Buku Tamu ini (misalnya pada halaman index.htm) kemudian klik Edit.

3. Setelah itu akan ditampilkan halaman yang aka di edit itu dalam bentuk kode HTML. Anda tidak usah bingung melihatnya.

Bila ingin menaruh Link Buku Tamu di paling bawah, Paste saja di paling bawah (apakah sebelum/sesudah </body> atau sebelum/sesudah </html>).

Maka di paling bawah halaman yang dimaksud akan terdapat : Sign Guestbook View Guestbook .

Page 105: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Klik Preview untuk melihatnya sebelum Save. Yang agak sulit adalah bila Anda ingin menaruh Link tersebut agak di tengah halaman, misalnya sesudah kalimat atau gambar tertentu.

Maka Anda harus mencari kalimat atau nama file gambar yang dimaksud tersebut di antara kode-kode html pada halaman itu, dan kemudian paste di sana.

4. Jika memang menghendaki, Anda bisa menaruh Link Buku Tamu di beberapa halaman. Lakukan dengan cara yang sama.

Jika Anda tidak suka cara ini, silakan lakukan Cara Kedua sebagai berikut :

1. Anda tidak usah copy & paste kode HTML.

Perhatikan contoh di atas, bahwa Link untuk member masuk ke halaman Buku Tamu (yang berisi form untuk di isi) adalah http://geocities.yahoo.com/gb/sign?member=wirausaha.

Sedangkan Link untuk member melihat entry (hasil isian) pengunjung, maka Link nya : http://geocities.yahoo.com/gb/view?member=wirausaha.

Wirausaha hanyalah User ID contoh, gantilah dengan User ID Anda di Yahoo.

2. Bukalah halaman yang Anda ingin masukkan Link tersebut dengan Microsoft Word. Misalkan, Anda ingin memasukkannya pada halaman index.htm, maka bukalah file index.doc .

3. Ketiklah pada tempat yang Anda kehendaki, kata-kata yang akan menjadi Link untuk masuk ke Buku Tamu dan Link untuk melihat entri.

Page 106: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Misalkan Silakan Isi Buku Tamu dan Lihat Buku Tamu. Beri hyperlink pada kata-kata Silakan Isi Buku Tamu, menuju ke

http://geocities.yahoo.com/gb/sign?member=USER-ID .

Sedangkan pada Lihat Buku Tamu beri hyperlink ke http://geocities.yahoo.com/gb/view?member=USER-ID

4. Setelah itu save dan upload kembali halaman yang telah Anda ubah / beri Link tadi.

** Meski tidak copy dan paste kode HTML, seluruh setting yang sudah Anda buat di GuestBook Setup tetap berjalan semestinya.

Coba isi buku Tamu Anda, maka akan ada pemberitahuan via email Anda di Yahoo, bahwa ada seseorang yang mengisi buku tamu Anda Yahoo (tentunya bila Anda memilih Send Notification Email pada Options).

Pada email tersebut ada pemberitahuan cara untuk approve (terima) atau reject (tolak) untuk tampil pada Entri; ataupun bila sudah terlanjur ditampilkan bisa Anda hapus.

5. Memasukkan Hit Counters.

Hit Counter adalah fasilitas/ penghitung yang menampilkan berapa banyak hit (klik) dari pengunjung yang masuk ke web Anda.

Caranya mirip dengan men-setup Guest Book, bahkan lebih sederhana dan mudah, karena tidak memerlukan form, konfirmasi, dsb.

Page 107: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Kembali Anda masuk halaman File Manager dan klik Adds On di sebelah kanan agak bawah dan pada halaman berikutnya Anda bisa klik “Add Counter To Your Page” seperti gambar di bawah ini :

Gambar (64) Pilih Counters

Pilih model / tampilan Counter. Bila sudah selesai Anda akan kembali diberikan kode HTML.

Masukkan kode HTML tersebut pada halaman yang dikehendaki. Caranya sama dengan memasukkan Link Guest Book pada Cara Pertama (Cara kedua dengan Mengedit halaman lewat Word, tidak bisa dilakukan untuk Counter).

B. Contoh Kedua : Menggunakan MS Frontpage

Untuk contoh upload dengan menggunakan Frontpage, kita akan hosting di Netfirms.

Bila Anda sudah menguasai ini, maka untuk web hosting lainnya umumnya hampir sama.

Netfirms (http://www.netfirms.com)

Page 108: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Fasilitas gratis yang didapat :

FREE Website Starter CD * (perlu ongkos kirim)

25 MB of Disk Space

1 GB Monthly Data Transfer

1 WebMail Account (with Domain Name)

Optional Free Sub-domain (www.yourname.netfirms.com)

Microsoft FrontPage Exts. & Perl (CGI-Bin)

24/7 FTP Access (24 jam sehari, 7 jam seminggu)

Technical Support via E-mail

Karena gratis maka tentu mereka menyertakan iklan di halaman web Anda. Kunjungi http://www.netfirms.com/web-hosting-free dan Sign Up untuk Basic Hoting ( Price : $ 0.00 /mo).

Page 109: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Gambar (65) Daftar di Netfirms

Pada halaman selanjutnya ada beberapa Opsi (Additional Options) yang bisa dipilih :

Secara default sudah terpilih : New Registration, yaitu dimana Anda memilih dan membayar untuk nama domain baru pilihan Anda (com /net /org /biz) dan host di Netfirms (hosting saja yang gratis).

Page 110: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Bila Anda memilih ini, tentu Anda harus membayar. Bila ingin sama sekali gratis, maka ubah pilihan ke Netfirms Subdomain (panah merah).

Anda tidak mendapat nama domain sendiri, tetapi berupa subdomain dari Netfirms.com (http://myname.netfirms.com).

Bila ID Anda : wirausaha ;maka alamat website Anda menjadi http://wirausaha.netfirms.com

Isikan Nama atau ID yang Anda pilih pada Enter a Domain Name. Klik SEARCH.

Selanjutnya akan diproses apakah pilihan Anda masih tersedia atau sudah dipakai orang lain.

Bila sudah mendapat ID (member name), lanjutkan dengan mengisi datadata lainnya.

Dan bila sudah menyelesaikan seluruh pendaftaran, Anda akan mendapat keterangan yang akan dikirimkan ke email yang Anda pakai untuk mendaftar.

Loginlah ke Contol Panel (Anda bisa klik Link yang diberikan pada email).

Password dikirimkan juga oleh Netfirms ke email Anda.

Bila ingin menggantinya, setelah Login ke Control Panel, pilih Change Password (pada deretan menu di sebelah kiri).

Agar Anda bisa upload menggunakan Frontpage, aktifkan lebih dahulu Frontpage ekstenstion. Klik Site Tools (pada Menu Bar atas).

Page 111: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Kemudian pada deretan Link/ menu di sebelah kiri halaman, klik Frontpage Extention.

Pada halaman berikutnya Anda kana menemukan tombol : Reset Frontpage, klik saja.

Selanjutnya bukalah program Frontpage dan buka web Anda.

Jika ada halaman yang ingin di edit, silakan edit dahulu dan jangan lupa “save”.

Kemudian untuk upload, harus Anda ingat/ catat User name dan password Anda.

Gambar (66) “Publish” pada Menu bar Frontpage

Klik Publish Web (lihat panah merah). Jika Anda baru pertama kali upload (atau memiliki beberapa Web yang sudah di upload/publish) akan muncul window seperti di bawah ini yang minta Anda mengisi atau memastikan alamat/ tujuan publish.

Page 112: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Gambar (67) Mengisi alamat untuk publish

Pada “Enter publish destination” masukkan URL yang Anda dapatkan

sebelumnya. Ada contoh ini adalah http://wirausaha.netfirms.com atau http://www.wirausaha.netfirms.com

(www boleh tidak usah disertakan, malah pada beberapa webhosting misalnya tripod, tidak memakai www untuk subdomainnya).

Kemudian klik OK.

Kadang pula bila Anda sering upload, window seperti di atas tidak muncul lagi tetapi akan langsung keluar window seperti berikut :

Gambar (68) User name & Password

Isi User name yang sudah Anda daftarkan (misalnya wirausaha) dan isikan password. Klik OK.

Page 113: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Bila kemudian muncul window seperti ini, klik saja tombol Publish.

Jika Anda sudah pernah upload maka pada kotak sebelah kanan (yang sekarang masih putih) akan sudah tertera file-file yang sudah ada di server.

Gambar (69) Fila yang ada di komputer dibandingkan dengan yang ada di server.

Setelah itu proses upload akan dimulai :

Gambar (70) Proses Upload

Akan muncul kotak-kotak biru memperlihatkan kemajuan proses upload.

Page 114: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Bila web ini sudah pernah di upload sebelumnya, Frontpage akan membandingkan file yang akan di upload dengan yang di server, bila ada perbedaan akan muncul pertanyaan-pertanyaan konfirmasi (file has been changed, remove file, dsb).

Anda bisa pilih Yes untuk melihat satu per satu atau Yes to All untuk langsung mengkonfirmasi semua perubahan.

TIP :

Pada Tools à Options à (Tab) Publish bisa Anda tentukan bagaiamna Frontpage menentukan perubahan (Changes).

- Untuk publish satu file tertentu saja : pada Folder List (Toogle Pane

diaktifkan), klik kanan file yang dimaksud dan pilih “Publish selected file”

- Bila ada file yang tak ingin di publish/upload namun file masih terdapat di web (tidak di-delete) : klik kanan file yang dimaksud dan pilih “Don’t Publish”.

Setelah selesai Publish akan muncul window :

Gambar (71) Proses Upload selesai

Page 115: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Klik “Done” untuk menutup window; atau “Click here to view your publish website” untuk langsung melihat website Anda yang barusan di

publish.

Tip :

Jika webhosting yang Anda gunakan tidak memiliki Frontpage extention, Anda masih bisa upload File-file yang sudah Anda buat dengan Frontpage ini.

Caranya :

login ke Control Panel dari webhosting tersebut.

Alamat login biasanya dikirimkan ke email Anda tidak lama setelah Anda mendaftar (atau membayar kalau Anda memakai webhosting yang tidak gratis *). Anda juga akan mendapat user ID dan password, setelah login carilah File Manager.

Umumnya pada File Manager terdapat tool untuk upload mirip seperti yang terdapat di Geocities.

Hanya sayangnya dengan cara ini, Web-Tools / Web-Component dan Form (juga Theme) yang Anda buat menggunakan Frontpage tidak dapat berjalan. Jadi hanya bisa menampilkan halaman-halaman biasa.

*Beberapa webhosting lokal yang dapat digunakan (lebih murah dibanding dengan penyedia ISP) :

http://www.masterweb.net.com

http://www.techscape.co.id

http://www.rumahweb.com

Dengan demikian pelajaran Anda sudah selesai. Jangan takut mencoba dan terus berlatih maka pasti Anda akan mahir.

Page 116: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

J

Page 117: Panduan Membuat Website Bisnissakti.com

© 2011 Freddy Iriawan– All Rights Reserved Panduan Sakti Bisnis Online http://www.BisnisSakti.com

Untuk mendapatkan Panduan GRATIS lainnya, silakan Anda klik link di bawah ini :

Ebook ini dipersembahkan oleh

-8-tulis nama anda disini-8-

Klik Link di bawah untuk mengunjungi websitenya

http://-8-tulis website affiliasi anda disini-8-

Mau dapat duit hanya dengan membagikan ebook Gratis?

Tutorial/Panduan menghasilkan uang dari ebook Gratis, segera klik http://bisnissakti.com/signup.php

Untuk Panduan Rebranding bisa klik : http://bisnissakti.com/Rebrand.pdf

Jangan lupa Gabung di Facebook BisnisSakti:

http://www.facebook.com/pages/Bisnissakticom/216033765090845

Twitter :

http://twitter.com/Bisnissakticom