BENGKEL MINISITE
PENGENALAN KEPADA MINISITE
SLOT 1 : ASAS MEMBINA MINISITE
- Pengenalan Kepada HTML Editor - Pengenalan Kepada CSS
SLOT 2 : PEMBINAAN MINISITE
- Elemen-Elemen Minisite - FTP & Site Manager
SLOT 3 : ELEMEN TAMBAHAN
- Membina Borang Tempahan - Membina Ruang Download - Sistem Autoresponder
SLOT 4 : TEMPLATE & GRAFIK TAMBAHAN
- Cover & Imej - Template Minisite
PENGENALANKEPADAMINISITE
PENGENALAN KEPADA MINISITE
04Bengkel Minisite 2009 MajalahIM.com
1.1 Apa Itu MiniSite?
Secara mudahnya minisite adalah laman web ringkas yang mempunyai be-berapa page sahaja. Konsep minisite adalah ringkas, kemas dan tersusun.
1.2 Konsep Asas Minisite
Sebenarnya ramai orang yang “memandang rendah” terhadap keupayaan minisite. Jika kita lihat laman-laman web company yang besar, semuanya tidak menggunakan minisite. Jadi oleh sebab itu, ramai yang menganggap minisite adalah sejenis laman web yang “low class”.
Hakikat sebenarnya tidak begitu, ramai usahawan internet di seluruh dunia ter-masuk kami sendiri menggemari minisite kerana ia mempunyai banyak kele-bihan terutama jika web yang di bina adalah bertujuan untuk menjual sesuatu produk.
Antara kelebihan minisite adalah :
Fokus dan spesifik kepada sesuatu topikMempengaruhi pelangganMudah diuruskanKos yang rendah
1.2.1 Fokus & Spesifik
Faktor utama ramai usahawan internet menggunakan minisite adalah kera-na ia fokus terhadap sesuatu topik sahaja. Ini merupakan satu aspek penting dalam penjualan dimana kita ingin pelawat minisite kita hanya fokus dan spesifik terhadap sesuatu topik sahaja. Jika mereka hilang minat ataupun lebih tertarik kepada benda lain, maka kita dianggap GAGAL menjual.
1.2.2 Mempengaruhi Pelanggan
Seterusnya, bila mereka sudah fokus terhadap sesuatu topik sahaja, tugas anda seterusnya adalah mempengaruhi mereka untuk melakukan sesuatu. Ia boleh jadi klik kepada sesuatu link, mengisi borang, melihat video dan sebagainya. Disini, susunan ayat-ayat ataupun dalam istilah lain, surat jualan anda hendaklah berupaya mempengaruhi mereka atau dalam istilah perniagaan internet ia disebut sebagai “killer salesletter”. Anda boleh merujuk kepada vid-eo bonus tentang cara-cara untuk membina “killer salesletter tersebut.
••••
PENGENALAN KEPADA MINISITE
05Bengkel Minisite 2009 MajalahIM.com
1.2.3 Mudah Diuruskan
Selain itu, minisite juga mudah diuruskan. Jadi, bagi newbie yang baru mengenali dunia internet dan komputer, mereka tidak perlu belajar banyak perkara untuk mahir membina dan menguruskan minisite. Ia berbeza sekali dengan shopping cart kerana ia agak kompleks dan tidak ramai yang mampu mengusai kemahiran membina dan menguruskan shopping cart ini.
1.2.4 Kos Yang Rendah
Berita baik untuk anda, kos untuk membina ataupun mengupah designer untuk membuat minisite adalah rendah dan tidak semahal membina shopping cart. Boleh dikatakan semua mampu. Biasanya seseorang designer akan mengenakan caj sebanyak RM100-RM300 untuk satu minisite. Tapi sebagai peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk anda kerana anda akan memiliki kemahiran membina minisite setelah tamat bengkel ini.
1.3 Susunatur & Rekabentuk Minisite
Secara asasnya, minisite terbahagi kepada 3 elemen utama iaitu header, con-tent dan footer. Elemen-elemen kecil adalah seperti headline, box, list dab seb-againya. Anda akan didedahkan secara lebih terperinci mengenai elemen-elemen ini dalam bab-bab seterusnya
PENGENALAN KEPADA MINISITE
06Bengkel Minisite 2009 MajalahIM.com
1.4 Perbezaan Minisite Yang Berjaya & Minisite Yang Gagal
Cuba anda bandingkan dua minisite dibawah ini. Apakah perbezaan diantara keduanya?
Minisite Yang Berjaya
1) Kemas dan teratur2) Design yang menarik3) Mudah dibaca dan difahami4) Menggunakan warna yang menarik
Minisite Yang Gagal
1) Susunan yang berterabur2) Design yang kucar-kacir3) Sukar dibaca dan difahami3) Penggunaan warna yang menyakitkan mata
1.5 Apa Yang Anda Perlu Tahu Sebelum Membina Minisite
1) Boleh menaip2) Boleh menggunakan perisian asas seperti microsoft word3) Tahu bagaimana cara untuk menghantar emel4) Kesungguhan untuk belajar dan ketekunan!
SLOT 1:
ASASMEMBINAMINISITE
PENGENALANKEPADA
HTML EDITOR
PENGENALAN KEPADA HTML EDITOR
09Bengkel Minisite 2009 MajalahIM.com
2.1 KompoZer
Perisian yang akan kita gunakan untuk membina minisite adalah KompoZer. Ia merupakan perisian open source dimana anda tidak perlu membayar sesen pun untuk menggunakan perisian ini.
Untuk memuat turun KompoZer ke dalam komputer anda, sila klik link di bawah ini :
Setelah memasuki page tersebut, klik butang “Download!” seperti yang ditunjukkan di dalam gambarajah dibawah untuk memulakan proses muat turun (download).
Size file KompoZer adalah lebih kurang 7MB. Ia mungkin mengambil masa beberapa minit untuk siap bergantung kepada kelajuan talian internet anda.
http://kompozer.net/download.php
PENGENALAN KEPADA HTML EDITOR
10Bengkel Minisite 2009 MajalahIM.com
Setelah siap proses download, pergi ke direktori dimana anda menyimpan file download anda tadi. Dalam contoh ini saya menyimpan file KompoZer yang saya telah download di desktop.
Seterusnya, anda perlu unzip file tersebut dengan menggunakan perisian WinZip. Jika anda masih belum mempunyai perisian WinZip, anda boleh memuatturun perisian tersebut menerusi link dibawah ini
Kemudian, unzip file download tadi seperti yang ditunjukkan di bawah :
Setelah selesai unzip, anda akan melihat satu folder seperti di bawah.
http://www.winzip.com
PENGENALAN KEPADA HTML EDITOR
11Bengkel Minisite 2009 MajalahIM.com
Seterusnya, buka folder tersebut dan klik pada file yang bernama “kompozer” untuk membuka perisian KompoZer
PENGENALAN KEPADA HTML EDITOR
12Bengkel Minisite 2009 MajalahIM.com
Seterusnya, buka folder tersebut dan klik pada file yang bernama “kompozer” untuk membuka perisian KompoZer.
Jika anda dapat melihat paparan seperti diatas, ia bermakna kini perisian KompoZer sudahpun terbuka dan anda kini sudah bersedia untuk membina minisite!
PENGENALAN KEPADA HTML EDITOR
13Bengkel Minisite 2009 MajalahIM.com
2.2 Bahagian-Bahagian Dalam KompoZer
Secara umumnya, KompoZer boleh dibahagikan kepada 3 bahagian seperti yang ditunjukkan dalam gambarajah di bawah :
PENGENALAN KEPADA HTML EDITOR
14Bengkel Minisite 2009 MajalahIM.com
2.2.1 Bahagian A
Bahagian ini adalah bahagian yang paling atas sekali (rujuk gambar). Di bahagian ini terdapat pelbagai menu dan juga pilihan untuk file HTML anda seperti membuka & menyimpan file, memasukkan image, memasukkan form dan juga membuat type setting (font, saiz warna dsb)
Buat fileHTML baru
Membuka file yang sudah dis-impan sebelum
ini
Menyimpan file yang sudah di edit
Memuatnaik file HTML
anda ke server
Memasukkan imej/gambar
Memasukkan table
Memasukkanform
Membuat kon-figurasi CSS
Jenis Fon
Warna Fon
Kecilkan Saiz Fon
Besarkan Saiz Fon
Bold ItalicUnderline
Jajar kekiri
Jajar ditengah
Jajar kekanan
Jajar secarajustifikasi
PENGENALAN KEPADA HTML EDITOR
15Bengkel Minisite 2009 MajalahIM.com
2.2.2 Bahagian B
Bahagian ini pula merupakan tempat anda menulis file HTML anda. Ia dibahagikan pula kepada 4 bahagian iaitu Normal, HTML Tags, Source dan juga Preview
Normal - Paparan default. Digunakan untuk membuat editing laman web
HTML Tags - Memaparkan kandungan web dalam bentuk tag-tag HTML. Berguna jika anda ingin melihat skruktur laman web secara kasar
PENGENALAN KEPADA HTML EDITOR
16Bengkel Minisite 2009 MajalahIM.com
2.2.2 Bahagian B
Source - Memaparkan kod-kod html laman web anda seperti <html></html>, <body></body> dsb. Ia akan selalu digunakan terutamanya bila terdapat error ataupun masalah dalam laman web.
Preview - Memaparkan kandungan laman web seperti apa yang akan dilihat dalam browser kelak.
PENGENALAN KEPADA HTML EDITOR
17Bengkel Minisite 2009 MajalahIM.com
2.2.1 Bahagian C
Bahagian ini merupakan SiteManager. Ia berfungsi untuk menguruskan perhubungan antara komputer dan juga server anda. Ia menjalankan operasi-operasi seperti memuat naik file ke server dan sebagainya.
2.3 Mula Membina Minisite
Secara asasnya, minisite terbahagi kepada 4 bahagian iaitu background,
header, content dan footer.
PENGENALAN KEPADA HTML EDITOR
18Bengkel Minisite 2009 MajalahIM.com
Sekarang kita akan hasilkan minisite yang paling ringkas seperti yang ditunjukkan di dalam gambarajah di atas
2.3.1 Membina Table
Langkah pertama adalah membina table. Dalam kes ini, kita perlukan table dengan 3 row dan 1 column.
Pada ruangan menu, klik pada “Table”
Pilih 3x1. Maksudnya 3 row dan 1 column dan klik “ok”.
PENGENALAN KEPADA HTML EDITOR
19Bengkel Minisite 2009 MajalahIM.com
Anda akan dapat melihat hasil seperti berikut :
2.3.2 Mengubah Setting Table
Sekarang kita akan membuat “setting” terhadap table yang siap dibina tadi. Klik pada table tadi untuk aktifkan, klik kanan dan pilih “Table Cell Properties”
PENGENALAN KEPADA HTML EDITOR
20Bengkel Minisite 2009 MajalahIM.com
Kemudian, pastikan anda memilih tab “Table” dan anda boleh lihat setting asal table adalah seperti berikut :
Tukarkan setting table tersebut sepeti di bawah dan klik ok:
PENGENALAN KEPADA HTML EDITOR
21Bengkel Minisite 2009 MajalahIM.com
Hasilnya adalah seperti berikut :
kini table kita sudah disetkan dengan lebar 600px dan dijajarkan di tengah (center).
2.3.3 Menetapkan Kettinggian Header & Footer
Untuk menetapkan ketinggian header, klik pada row pertama pada table untuk antifkan row tersebut, kemudian klik kanan. Kemudian pilih “Table Cell Properties...”
Pastikan anda memilih tab “Cells” dan isikan 600px di ruangan Heights (rujuk gambarajah di mukasurat sebelah)
PENGENALAN KEPADA HTML EDITOR
22Bengkel Minisite 2009 MajalahIM.com
Kemudian klik “ok”. Hasilnya adalah seperti di bawah :
Seterusnya, kita ingin ubah ketinggian footer pula. Untuk melakukannya, anda perlu tetapkan ketinggian untuk row yang ketiga. Dalam contoh ini, saya tetapkan ketinggian footer kepada 80px (caranya adalah sama sahaja seperti cara menetapkan ketinggian header tadi).
Anda boleh lihat hasil seperti rajah di mukasurat sebelah :
PENGENALAN KEPADA HTML EDITOR
23Bengkel Minisite 2009 MajalahIM.com
Sekarang kita telah berjaya membina satu rangka minisite dengan :
Lebar (width) : 600pxTinggi (height) Header : 150pxTinggi Footer : 80px
2.3.4 Menyimpan File
Rangka minisite yang kita bina tadi masih belum di simpan (save). Jadi untuk melakukannya, klik ikon “save” pada bahagian menu :
Masukkan Tajuk minisite anda. Dalam contoh ini saya namakan sebagai “Page1”
PENGENALAN KEPADA HTML EDITOR
24Bengkel Minisite 2009 MajalahIM.com
Seterusnya tentukan lokasi dimana anda ingin menyimpan file anda tadi. Disini, saya simpan di dekstop dengan menggunakan nama fail “page1.html”
2.3.5 Menulis Text
Sekarang kita akan menulis text pada bahagian Header, Content dan juga Footer. Aktifkan header dengan klik pada row pertama, kemudian taip per-kataan “HEADER”
PENGENALAN KEPADA HTML EDITOR
25Bengkel Minisite 2009 MajalahIM.com
Kemudian, jajarkan teks tersebut di tengah, besarkan sedikit saiz font dan tukarkan jenis font kepada Verdana dengan menggunakan options yang ada di Format ToolBar 2.
Ulangkan proses tersebut untuk teks “FOOTER” di bahagian footer. Anda akan mendapat hasil seperti di bawah :
Masukkan pula dummy teks kedalam bahagian content. Untuk mendapat dummy text, anda boleh gunakan dummy text generator seperti www.blindtextgenerator.com Anda akan dapat hasil seperti gambarajah disebelah :
PENGENALAN KEPADA HTML EDITOR
26Bengkel Minisite 2009 MajalahIM.com
2.3.6 Mengubah Warna Table
Untuk mengubah warna background header, klik kanan pada header dan pilih “Table Cell Properties...”
Kemudian klik pada satu kotak di sebelah kanan “Background Color”. Rujuk bahagian bulatan dalam gambarajah di atas. Kemudian pilih warna yang anda inginkan. Dalam contoh ini, saya pilih warna biru.
PENGENALAN KEPADA HTML EDITOR
27Bengkel Minisite 2009 MajalahIM.com
Oleh kerana agak sukar untuk kita membaca tulisan hitam dengan background biru, tukarkan warna tulisan header dan footer kepada warna putih. Anda akan mendapat hasil seperti berikut :
PENGENALAN KEPADA HTML EDITOR
28Bengkel Minisite 2009 MajalahIM.com
2.3.7 Mengubah Warna Background
Untuk mengubah warna background, klik pada “Format” pada bahagian menu, kemudian pilih “Page Colors and Background...” dan pilih warna yang anda suka. Dalam contoh ini, saya akan gunakan warna kelabu
PENGENALAN KEPADA HTML EDITOR
29Bengkel Minisite 2009 MajalahIM.com
Hasilnya adalah seperti berikut :
Bahagian content akan turut menjadi kelabu kerana kita belum set lagi warna untuk row di bahagian content. Jadi ia akan mengikut apa sahaja warna background. Jika warna background putih, maka ia juga akan menjadi putih.
Sekarang kita perlu tukarkan warna row content kepada warna putih. Untuk melakukannya, caranya sama sahaja seperti ingin menukar warna row untuk header dan footer. Sila rujuk bahagian 2.3.6
Setelah selesai, anda boleh lihat hasilnya seperti dalam mukasurat sebelah :
PENGENALAN KEPADA HTML EDITOR
30Bengkel Minisite 2009 MajalahIM.com
Hasilnya adalah seperti berikut :
Bahagian content akan turut menjadi kelabu kerana kita belum set lagi warna untuk row di bahagian content. Jadi ia akan mengikut apa sahaja warna background. Jika warna background putih, maka ia juga akan menjadi putih.
Sekarang kita perlu tukarkan warna row content kepada warna putih. Untuk melakukannya, caranya sama sahaja seperti ingin menukar warna row untuk header dan footer. Sila rujuk bahagian 2.3.6
Setelah selesai, anda boleh lihat hasilnya seperti dalam mukasurat sebelah :
PENGENALAN KEPADA HTML EDITOR
31Bengkel Minisite 2009 MajalahIM.com
Tahniah! kini minisite ringkas anda sudahpun siap dan secara asasnya sudah boleh berfungsi dengan baik.
2.3.8 Memasukkan Grafik
Untuk menjadikan minisite anda kelihatan lebih menarik, anda perlu memasukkan imej ataupun grafik pada bahagian header dan footer. Kita akan gunakan grafik yang telah saya sediakan dalam folder di bawah
PENGENALAN KEPADA HTML EDITOR
32Bengkel Minisite 2009 MajalahIM.com
Untuk memasukkan grafik pada header, aktifkan row header dan klik pada ikon “Image” pada bahagian menu.
Anda akan lihat tetingkap seperti berikut akan muncul :
Pada tab “Lacation”, masukkan pilih “header.jpg” sebagai grafik untuk header dan masukkan Alternate text dan juga Tooltip di dalam ruangan yang disediakan. Kemudian, pada tab “Appearance”, pilih “At the top” untuk pilihan Align Text to Image.
PENGENALAN KEPADA HTML EDITOR
33Bengkel Minisite 2009 MajalahIM.com
Seterusnya, ulang proses tadi untuk footer pula. Anda akan dapat hasil seperti ini :
PENGENALAN KEPADA HTML EDITOR
34Bengkel Minisite 2009 MajalahIM.com
2.3.9 Memasukkan Grafik Latar Belakarang
Selain warna, anda juga boleh menggunakan grafik sebagai latar belakang minisite anda. Untuk melakukannya, klik pada “Format” pada ruangan menu, dan pilih “Page Colors and Background...”
PENGENALAN KEPADA HTML EDITOR
35Bengkel Minisite 2009 MajalahIM.com
Kemudian tetingkap seperti gambarajah di bawah akan muncul. Pilih grafik yang anda ingin jadikan sebagai latar belakang di bahagian “Background Image”
Hasil akhir yang anda akan perolehi adalah seperti berikut.
Tahniah! kini anda sudah berjaya membina satu minisite yang lengkap! Dalam bab seterusnya anda akan mempelajari cara membuat minisite yang lebih kompleks lagi. Selamat belajar!
PENGENALANKEPADA CSS
PENGENALAN KEPADA CSS
37Bengkel Minisite 2009 MajalahIM.com
3.2 Membina Template Menggunakan CSS
Langkah pertama adalah, buatkan satu file html dan simpan sebagai page2.html di dalam folder khas.
Kemudian, buka notepad. Pada bahagian menu, pilih File > Save as...
Kemudian pilih direktori sama seperti file html tadi. Pada bahagian “File name”, isikan “style.css” dan pada bahagian “Save as type”, pilih “All Files” dan tekan butang “Save”.
Sila rujuk gambarajah di mukasurat sebelah :
PENGENALAN KEPADA CSS
38Bengkel Minisite 2009 MajalahIM.com
Sekarang anda sudah mempunyai 2 file dan 1 folder iaitu :
1. File HTML - Menyimpan elemen-elemen HTML seperti body, paragraph, table, form dan sebagainya
2. File CSS - Menyimpan gaya (style) untuk elemen-elemen di dalam file HTML seperti saiz font, warna background, ketebalan border dan sebagainya
3. Folder Images - Menyimpan gambar-gambar yang akan digunakan dalam file HTML.
PENGENALAN KEPADA CSS
39Bengkel Minisite 2009 MajalahIM.com
3.2.1 Menghubungkan File HTML & CSS
Kita perlu menghubungkan file HTML & CSS terlebih dahulu untuk mewujudkan interaksi antara kedua-dua file tersebut. Untuk melakukannya, klik “CasCadeS” pada bahagian menu.
Kemudian, tetingkap “CSS Stylesheets” akan muncul. Klik pada ikon di sebelah paling kiri dan pilih “Linked stylesheet”.
PENGENALAN KEPADA CSS
40Bengkel Minisite 2009 MajalahIM.com
Seterusnya, anda akan melihat paparan seperti berikut :
Klik pada “Choose File” untuk memlilih file CSS yang akan dihubungkan.
Seterusnya, klik pada “Create Stylesheet” dan kini file CSS anda telah siap dihubungkan dengan file HTML.
PENGENALAN KEPADA CSS
41Bengkel Minisite 2009 MajalahIM.com
Seterusnya, masukkan table (3 rows 1 column) di dalam file HTML. Set kan lebar table sebanyak 631px dan jajarkan di tengah. Set juga border, cell padding, cell spacing sebanyak 0 pixels. Anda akan dapat hasil seperti berikut :
Seperti yang anda sudah buat sebelum ini, kita akan membina satu minisite dengan 3 rows. Yang pertama ialah header, yang kedua adalah content dan yang terakhir adalah footer. Jika sebelum ini kita gunakan 100% HTML, sekarang kita akan gunakan HTML & CSS untuk membina minisite kita.
3.2.2 Membina Header
Sekarang kita akan bina satu style rule untuk header di dalam file css. Untuk membuatnya, klik pada CSS Editor
Kemudian pilih style.css
PENGENALAN KEPADA CSS
42Bengkel Minisite 2009 MajalahIM.com
Kemudian, klik pada ikon sebelah kiri dan pilih “Style Rule”
Kemudian tetingkap “New Style Rule” akan muncul.
PENGENALAN KEPADA CSS
43Bengkel Minisite 2009 MajalahIM.com
Sebelum kita teruskan, saya ingin menerangkan secara ringkas jenis-jenis rule yang terdapat di dalam CSS. Secara umumnya, CSS terdiri daripada 3 rule iaitu
1. Type - Ia merupakan element yang memang sudah wujud ataupun pre-defined di dalam file HTML. Contohnya body, table, form, p, h1, h2, h3 dan sebagainya. Nama elemen ini tidak boleh diubah.
2. Class - Ia merupakan elemen yang kita bina sendiri. Contohnya header, footer, content dan sebagainya. Nama elemen boleh diubah mengikut apa sahaja yang kita suka seperti kereta, ayam dan sebagainya. Elemen class boleh digunakan secara berulang kali di dalam file HTML. Simbol untuk class adalah .(dot) - Contohnya .testi, .box dan sebagainya.
3. ID - Ia sama sahaja seperti class. Perbezaannya, ia hanya boleh digunakan sekali sahaja di dalam file HTML. Simbol untuk ID adalah #. Contohnya #header, #footer dan sebagainya
Berbalik kepada proses membina header, elemen yang paling sesuai untuk header adalah ID kerana ia tidak digunakan secara berulang di dalam file HTML. Jadi kita akan pilih pilihan ketiga iaitu ID (rujuk gambarajah dibawah)
Masukkan nama untuk ID tersebut. Dalam contoh ini, saya namakan sebagai #header. Kemudian klik button “Create Stylerule”.
PENGENALAN KEPADA CSS
44Bengkel Minisite 2009 MajalahIM.com
Anda dapat lihat elemen #header sudahpun terbina di dalam file style.css
Kemudian, klik pada tab “Background”,
PENGENALAN KEPADA CSS
45Bengkel Minisite 2009 MajalahIM.com
Ikut setting berikut :
Image : Pilih grafik yang anda ingin jadikan sebagai header
Tile : pilih “don’t tile”. Maksudnya, grafik tersebut tidak akan repeat
Position : Pilih “Top” dan “Center”
Kemudian, klik ok.
Baiklah, sekarang anda telah berjaya membina satu style rule jenis ID yang bernama #header. Anda juga telah menetapkan background image untuk ID tersebut.
3.2.2 Membina Header
Langkah seterusnya adalah, masukkan #header ke dalam file HTML.. Double klik pada header, pada tetingkap “Table Properties”, klik Advanced Edit.
PENGENALAN KEPADA CSS
46Bengkel Minisite 2009 MajalahIM.com
Pada bahagian Attributes, pilih “id” dan pada bahagian value, pilih “header”
Kemudian, klik ok dan hasilnya adalah seperti berikut :
Seterusnya, anda perlu menetapkan ketinggian header sebanyak 140px supaya keseluruhan image akan kelihatan.
PENGENALAN KEPADA CSS
47Bengkel Minisite 2009 MajalahIM.com
Latihan : Ulang kembali langkah-langkah tadi untuk membina style rule untuk content dan footer pula. Ubah juga warna background kepada #d5d5d5 supaya warna minisite kelihatan sekata
Hasil akhir setelah dimasukkan content dan footer.
PENGENALAN KEPADA CSS
48Bengkel Minisite 2009 MajalahIM.com
3.3 Pilihan-Pilihan Lain Dalam CSS Editor
Semasa membuat style rule untuk header tadi, kita telah gunakan ciri “Background”. Terdapat pilihan lain yang disediakan dalam CSS Editor KompoZer ini seperti Text, Borders, Box, Lists dll.
3.3.1 Text
Untuk pilihan text, anda boleh menetapkan saiz font, membuat dekorasi seperti line-through, underline, menetapkan font-weight dan banyak lagi.
PENGENALAN KEPADA CSS
49Bengkel Minisite 2009 MajalahIM.com
3.3.2 Borders
Untuk pilihan borders, anda boleh menetapkan jenis border yang anda mahu seperi solid, dotted, dashed dan sebagainya. Anda juga boleh set border untuk setiap sisi box tersebut
3.3.3 Box
PENGENALAN KEPADA CSS
50Bengkel Minisite 2009 MajalahIM.com
Untuk pilihan box, anda boleh membuat box seperti testi box dan sebagainya dan kemudian membuat setting seperti width, height, margin, padding dan sebagainya
3.3.4 Lists
Untuk pilihan lists pula, anda boleh membuat list dan menggunakan jenis-jenis list type yang memang disediakan di dalam CSS atau anda juga boleh memasukkan image anda sendiri untuk sebagai bullet.
SLOT 2:
PEMBINAANMINISITE
ELEMEN-ELEMENMINISITE
ELEMEN-ELEMEN MINISITE
53Bengkel Minisite 2009 MajalahIM.com
Sekarang kita sudahpun memasuki bab yang paling penting dalam pembinaan ministe iaitu elemen-elemen minisite. Biasanya sesuatu minisite mempunyai elemen-elemen seperti berikut :
1) Headlines2) Box3) Lists4) Highlight5) Link6) Cover & Grafik
4.1 Headlines
Dalam HTML, terdapat pre-defined headlines iaitu h1,h2,h3,h3,h4,h5 dan juga h6. Ia adalah jenis-jenis headline dengan saiz, warna dan style yang berbeza. Dengan CSS, anda boleh mengubah setting kesemua headlines tersebut mengikut citarasa anda.
Biasanya, h1 adalah headline yang paling besar dan h6 adalah headline yang paling kecil.
Untuk membina headline, langkah pertama adalah klik pada ikon CSS Editor
Kemudian klik pada “Style Rule”
ELEMEN-ELEMEN MINISITE
54Bengkel Minisite 2009 MajalahIM.com
Kemudian pilih pada pilihan pertama iaitu (style applied to all element of type). Di bahagian nama, masuk h1 kerana kita akan akan membuat style untuk h1 dan klik pada butang “Create Style rule”
Setelah itu anda akan dapat lihat “h1” muncul di bahagian tepi. Itu bermakna satu style rule untuk h1 sudahpun siap dibina
ELEMEN-ELEMEN MINISITE
55Bengkel Minisite 2009 MajalahIM.com
Kemudian pilih pada pilihan pertama iaitu (style applied to all element of type).
Pada tab “Text”, buatkan setting seperti berikut :
Font family : Arial, Helvetica, sans-serifFont size : 30pxLine height : 35pxColor : redFont weight : boldCase : CapitalizeAlignment : CenterText decorations : underline
Kemudian klik butang “ok”
ELEMEN-ELEMEN MINISITE
56Bengkel Minisite 2009 MajalahIM.com
pada dokumen HTML, taipkan teks “ini adalah contoh h1 dalam minisite”
Kemudian select teks tersebut dan pilih Heading 1 pada drop down menu sebelah kiri. Maksudnyam, kita akan style kan teks tadi dengan style rule h1 yang kita bina tadi.
ELEMEN-ELEMEN MINISITE
57Bengkel Minisite 2009 MajalahIM.com
hasilnya adalah seperti berikut :
kini teks tersebut telah bertukar menjadi h1 seperti mana yang kita telah set tadi. Anda boleh buat pelbagai jenis style headline mengikut citarasa anda.
Latihan : Cuba buat headline untuk h2, h3, h4 dengan style yang berlainan.
4.2 Box
Dalam minisite, kita biasa melihat pelbagai kotak atau box digunakan. Contohnya box untuk testimonial, untuk meletakkan sesuatu pengumuman, form bayaran dan pelbagai jenis box lagi.
Untuk membuat box, langkah pertama adalah buat satu style rule (class) dengan nama testi. Anda juga boleh buat apa-apa nama yang lain yang anda suka.
ELEMEN-ELEMEN MINISITE
58Bengkel Minisite 2009 MajalahIM.com
Seterusnya, pilih tab “Background” dan buat setting seperti berikut :
Kemudian tab “Border” dan buat setting seperti berikut :
ELEMEN-ELEMEN MINISITE
59Bengkel Minisite 2009 MajalahIM.com
Akhir sekali, tab “Box” dan buat setting seperti berikut :
Kemudian klik butang “OK”. Kini anda telah siap membuat satu style rule untuk .testi
ELEMEN-ELEMEN MINISITE
60Bengkel Minisite 2009 MajalahIM.com
Seterusnya taip sebarang teks dalam dokumen HTML anda seperti contoh di bawah :
Kemudian, select teks tersebut dan jadikan ia sebagai paragraph dan seterusnya set kan sebagai style rule .testi
ELEMEN-ELEMEN MINISITE
61Bengkel Minisite 2009 MajalahIM.com
Dan kini hasilnya adalah seperti berikut. Box anda telah siap terbina!
4.3 Lists
Untuk membina list, langkah pertama adalah kita perlu create satu style rule untuk list. Dalam peringkat ini, anda sepatutnya sudah mahir tentang bagaimana untuk membuat style rule. Anda boleh buat style rule .list
ELEMEN-ELEMEN MINISITE
62Bengkel Minisite 2009 MajalahIM.com
Seterusnya, pilih tab “Lists” dan buat setting seperti berikut. Kita akan gunakan image baru sebagai bullet list. Dalam contoh ini, saya akan gunakan image seperti di bawah :
Kemudian, klik “OK”.
Dalam dokumen HTML, taip beberapa teks seperti di bawah :
Kemudian, select teks tersebut dan klik pada ikon “Bulleted List”
ELEMEN-ELEMEN MINISITE
63Bengkel Minisite 2009 MajalahIM.com
hasilnya adalah seperti berikut. Ini adalah bullet asal yang telah ditetapkan dalam HTML.
Kemudian select list tersebut sekali lagi dan klik pada style rule “list” yang telah kita buat sebentar tadi
Dan hasil akhir adalah seperti berikut :
4.4 Highlight
Elemen yang tidak kurang pentingnya dalam minisite adalah highlight. Ini kerana adakala kita perlu highlight poin-poin penting di dalam minisite untuk memudahkan para pembaca.
Langkah pertama adalah bina style rule (class) .highlight
ELEMEN-ELEMEN MINISITE
64Bengkel Minisite 2009 MajalahIM.com
Pada tab “Background”, pilih warna yang anda ingin jadikan sebagai highlight. Warna yang biasa digunakan adalah kuning
Kemudian klik “OK”.
ELEMEN-ELEMEN MINISITE
65Bengkel Minisite 2009 MajalahIM.com
Pada dokumen HTML, taip sebarang teks
Kemudian, select sebahagian dari teks tersebut dan apply style rule highlight. Hasilnya adalah seperti berikut :
Latihan : Bina minisite lengkap dengan bahan-bahan pembelajaran tambahan yang disediakan di dalam bengkel.
4.5 Link
Link merupakan elemen wajib dalam sesebuah minisite kerana tanpa link, anda tidak boleh menghubungkan satu page minisite ke page yang lain.
Link terdiri kepada 2 iaitu external link dan juga internal link.
4.5.1 Internal Link
Internal link adalah link yang menghubungkan elemen di dalam page yang sama. Internal link terdiri kepada link dan juga anchor.
Link adalah tempat (teks/gambar) yang membolehkan pengguna untuk klik.
Anchor adalah destinasi yang akan dibawa selepas pengguna klik link tersebut.
ELEMEN-ELEMEN MINISITE
66Bengkel Minisite 2009 MajalahIM.com
Untuk membuat anchor, pilih teks/gambar. Kemudian klik pada icon “Anchor” pada ruangan menu.
Namakan anchor tersebut
Kini anda sudah selesai membina anchor. Seterusnya kita ingin bina link pula. Pilih teks/gambar yang anda ingin jadikan link dan klik pada icon “Link” pada bahagian menu
Seterusnya, pilih anchor yang kita bina tadi sebagai link location.
ELEMEN-ELEMEN MINISITE
67Bengkel Minisite 2009 MajalahIM.com
Klik “OK” dan kini anda telah siap membina internal link.
ELEMEN-ELEMEN MINISITE
68Bengkel Minisite 2009 MajalahIM.com
4.5.2 External Link
Cara untuk membuat external link adalah sama sahaja sepeti ingin membuat internal link. Perbezaannya hanya pada link location. Anda boleh mengisi URL ataupun page lain di bahagian link location.
ELEMEN-ELEMEN MINISITE
69Bengkel Minisite 2009 MajalahIM.com
4.6 Cover & Grafik
Elemen terakhir adalah cover & grafik. Dalam pembinaan laman web, teks adalah elemen utama. Namum jika kita hanya menekankan kepada teks se-mata-mata, minisite akan menjadi hambar dan tidak menyerlah. Jadi disinilah kita perlukan cover dan juga grafik tambahan untuk menyerikan lagi minisite yang kita bina.
Sebagai bonus bengkel, anda juga disediakan dengan koleksi grafik-grafik yang anda boleh gunakan dalam minisite anda kelak.
FTP&
SITE MANAGER
FTP & SITE MANAGER
71Bengkel Minisite 2009 MajalahIM.com
5.1 Download & Install FileZilla
FTP adalah singkatan kepada File Tranfer Protocol. Ia digunakan untuk memindah file dari komputer ke internet dan juga sebaliknya. Proses memindahkan file dari komputer ke server disebut upload (memuat naik) dan proses memindahkan file dari server ke komputer pula disebut sebagai download (memindah turun).
Dalam bab ini anda akan belajar cara-cara untuk memuat naik file minisite yang telah anda bina tadi ke server supaya ia boleh diakses melalui internet. Untuk tujuan tersebut, kita memerlukan satu perisian FTP yang bernama FileZilla. Anda boleh download perisian tersebut melalui link di bawah :
Kemudian klik pada link yang ditunjukkan dalam gambarajah di bawah :
http://filezilla-project.org/download.php?type=client
FTP & SITE MANAGER
72Bengkel Minisite 2009 MajalahIM.com
Selepas proses instalasi, anda akan dapat melihat paparan seperti berikut :
Sekarang kita belum sambungkan lagi perisian FTP ini ke server. Untuk melakukannya, klik pada File > Site Manager...
Dalam tetingkap Site Manager, klik pada “New Site”
FTP & SITE MANAGER
73Bengkel Minisite 2009 MajalahIM.com
Selepas proses instalasi, anda akan dapat melihat paparan seperti berikut :
5.2 Buat Sambungan Ke Hosting
Sekarang kita belum sambungkan lagi perisian FTP ini ke hosting. Untuk melakukannya, klik pada File > Site Manager... Dalam tetingkap Site Manager, klik pada “New Site”
FTP & SITE MANAGER
74Bengkel Minisite 2009 MajalahIM.com
Kemudian masukkan nama site anda. Dalam contoh di bawah, saya namakan sebagai “Site 1”.
Host : Masukkan nama domain untuk hosting anda. Dalam contoh ini (www.heroesmania.com)
Logontype : Normal
User : Username hosting anda.
Password : Password hosting anda.
Kemudian, klik butang “Connect”.
FTP & SITE MANAGER
75Bengkel Minisite 2009 MajalahIM.com
Kemudian anda akan disambungkan ke hosting heroesmania.com dan anda dapat lihat paparan di sebelah kanan telah aktif seperti berikut :
Kini anda boleh mengakses files dan folders yang terdapat di dalam hosting. Kemudian klik pada folder “public_html”
Semua files dan folders yang kita akan upload akan disimpan di dalam folder public_html.
FTP & SITE MANAGER
76Bengkel Minisite 2009 MajalahIM.com
Kemudian, klik kanan dan pilih “Create directory” untuk buat satu folder baru di dalam ruangan public_html
Kemudian namakan nama folder baru anda sebagai “site1”
Kemudian, klik “OK”.
FTP & SITE MANAGER
77Bengkel Minisite 2009 MajalahIM.com
Kini folder “site1” telah pun siap dihasilkan
Double klik pada folder tersebut untuk membukanya. Folder tersebut masih kosong lagi kerana kita belum memmuat naik sebarang files dan folders lagi ke dalam file tersebut.
Sekarang beralih kepada “Local site” iaitu komputer kita dan pilih lokasi letaknya files minisite yang telah kita bina.
FTP & SITE MANAGER
78Bengkel Minisite 2009 MajalahIM.com
5.3 Melakukan Proses Upload
Select semua files tersebut, klik kanan dan pilih “Upload”
Selepas anda klik “Upload” files tadi akan dipindahkan ke hosting ataupun ke bahagian remote site. Perhatikan screenshot sebelum upload dan selepas upload di bawah ini :
FTP & SITE MANAGER
79Bengkel Minisite 2009 MajalahIM.com
Tahniah, sekarang minisite anda sudahpun selesai dimuatnaik ke server dan boleh diakses melalui internet!
Untuk melihat file yang telah kita upload, masuk http://www.heroesmania.com/site1/page3.html
SLOT 3:
ELEMENTAMBAHAN
DALAMMINISITE
MEMBINA BORANGTEMPAHAN
MEMBINA BORANG TEMPAHAN
82Bengkel Minisite 2009 MajalahIM.com
6.1 Register Servis MailJol.net
Untuk membina borang tempahan, kita akan gunakan satu servis percuma iaitu MailJol.net. Servis ini akan membantu untuk menghasilkan kod-kod html untuk borang tempahan yang akan kita guna. Tugas anda hanya lah “copy & paste” kod-kod tersebut ke dalam laman web anda. Jika terdapat sebarang pelanggan membuat tempahan melalui borang tersebut, input-input nya akan terus dihantar ke emel anda.
Baiklah, langkah pertama adalah klik link di bawah :
kemudian anda akan masuk satu laman web seperti di bawah :
Servis yang ditawarkan oleh MailJol.net ini terbahagi kepada 2 iaitu free dan berbayar. Walaupun servis berbayar mempunyai lebih banyak kelebihan, namun servis free juga boleh membina borang yang berfungsi dengan baik tanpa sebarang masalah.
Seterusnys, klik pada butang “Free”
http://allforms.mailjol.net/
MEMBINA BORANG TEMPAHAN
83Bengkel Minisite 2009 MajalahIM.com
Seterusnya masukkan emel anda dengan betul dan klik “Register”
Anda akan dapat mesej seperti berikut menandakan pendaftaran anda sudah berjaya.
Seterusnya, cek emel anda untuk mengetahui password yang telah di hantar.
MEMBINA BORANG TEMPAHAN
84Bengkel Minisite 2009 MajalahIM.com
6.2 Bina Borang Pembayaran
Seterusnya, kembali ke laman web http://allforms.mailjol.net dan login dengan menggunakan password yang telah disediakan
Selepas login, anda akan memasuki ruangan pengguna seperti berikut :
Seterusnya, klik pada butang “Create Form (Basic)”. Kemudian klik “Continue”
MEMBINA BORANG TEMPAHAN
85Bengkel Minisite 2009 MajalahIM.com
Sekarang anda telah memasuki ruangan Easy Form Creator. Isikan maklumat-maklumat di sebelah kiri seperti Nama borang dan arahan untuk pelanggan. Sebagai permulaan, Easy Form Creator telah menyediakan 3 field iaitu Name, Email dan juga Message. Anda boleh ubah field tersebut dan tambah field lain.
Jika anda ingin menambah field lain, anda hanya perlu klik pada drop down menu “Add a Question” dan pilih jenis field yang anda ingin tambah
Latihan - Bina borang pembayaran dengan field seperi berikut :
Nama (Small Box Type)Emel (Small Box Type)Alamat (Large Box Type)No. Telefon (Small Box Type)Bayaran Melalui (Drop-Down Menu) - Maybank, CIMB & Bank IslamBukti Pembayaran (Large Box Type)
MEMBINA BORANG TEMPAHAN
86Bengkel Minisite 2009 MajalahIM.com
Anda akan mendapat hasil seperti berikut :
Seterusnya isikan maklumat-maklumat lanjut yang diminta oleh Easy Form Cre-ator :
Required Questions : Pilih soalan yang anda ingin jadikan sebagai required questions. Ia akan ditandakan dengan simbol (*)
Email Addresses - Setkan emel supaya anda dapat menerima maklumat-mak-lumat borang bila ada pengguna menghantar borang melalui minisite anda.
Email Subject - Setkan subject emel setiap kali anda menerima maklumat-mak-lumat borang. Contohnya “Tempahan Ebook Panduan Memasak”
Email Format : PIlih “Plain Text”
Custom Success Page : Masukkan link dimana pengguna akan dibawa selepas selesai mengisi borang.
MEMBINA BORANG TEMPAHAN
87Bengkel Minisite 2009 MajalahIM.com
Custom Error Page : Masukkan link dimana pengguna akan dibawa jika terdapat error semasa mengisi borang
Enable Anti-Spam : Abaikan. Hanya untuk servis berbayar sahaja
Email Question : Pilih soalan yang meminta emel dari pengguna
Thank-you Email : Pilih “No”
6.3 Copy Kod HTML
Bila selesai semua, klik “Save”.
Kemudian copy kod HTML yang telah di keluarkan
MEMBINA BORANG TEMPAHAN
88Bengkel Minisite 2009 MajalahIM.com
Seterusnya, buatkan satu file HTML baru untuk meletakkan kod untuk borang pembayaran.
Pastikan cursor berada di tengah-tengah. Kemudian klik pada tab “Source”
MEMBINA BORANG TEMPAHAN
89Bengkel Minisite 2009 MajalahIM.com
dan paste kod borang pembayaran tadi.
Save file HTML anda dan lihat pada browser.
MEMBINA BORANG TEMPAHAN
90Bengkel Minisite 2009 MajalahIM.com
6.4 Uji Borang Pembayaran
Hasilnya adalah seperti berikut :
Sekarang kita perlu test samada form yang siap dibina ini berfungsi dengan baik atau tidak. Isikan kesemua maklumat di dalam form diatas dan klik sub-mit.
MEMBINA BORANG TEMPAHAN
91Bengkel Minisite 2009 MajalahIM.com
Kemudian, anda akan terima satu emel yang mengandungi butir-butir yang anda isi dalam borang pembayaran tadi. Ini bermakna borang tempahan anda telah berfungsi dengan baik
MEMBINA RUANGDOWNLOAD
MEMBINA RUANG DOWNLOAD
93Bengkel Minisite 2009 MajalahIM.com
7.1 Download Notepad++
Jika anda ingin menjual produk digital seperti ebook ataupun perisian, anda mestilah menyediakan ruang download agar pembeli produk anda dapat download produk tersebut.
Untuk membina ruang download yang selamat, kami telah menyediakan satu file PHP yang anda boleh gunakan dengan mudah. Apa yang anda perlu laku-kan hanyalah edit file PHP tersebut. Oleh kerana KompoZer tidak dapat mem-buka file PHP, maka anda perlu download dan install perisian lain iaitu Note-pad++
Anda boleh download perisian tersebut melalui link dibawah :
Selepas siap proses download, install perisian Notepad++ tersebut dan buka. Anda akan dapat lihat gambarajah seperti di bawah :
http://notepad-plus.sourceforge.net/uk/site.htm
MEMBINA RUANG DOWNLOAD
94Bengkel Minisite 2009 MajalahIM.com
7.2 Buat Download Page
Seterusnya, anda perlu buat satu file HTML baru sebagai download page yang mengandungi download link produk anda. Untuk file ini, sebaiknya anda memberi nama yang agak pelik supaya orang lain susah untuk meneka download page anda. Contohnya 34kds33kw.html.
Selepas itu upload file tersebut ke dalam dalam hosting bersama dengan fail-fail HTML yang lain.
link untuk file HTML yang baru diupload tadi adalah heroesmania.com/site1/ 34kds33kw.html
Anda akan guna link ini untuk masukkan ke dalam file PHP selepas ini.
7.3 Edit File PHP
Seterusnya, buka file download.php (disediakan di dalam bengkel) dengan menggunakan perisian Notepad++
MEMBINA RUANG DOWNLOAD
95Bengkel Minisite 2009 MajalahIM.com
Sekarang tiba masanya untuk kita membuat sedikit editing terhadap file php ini.
7.3.1 Set Password
Lihat pada line 5, “pass123” ialah password yang pembeli perlu masukkan supaya mereka dapat akses ke downloadp page. Anda boleh tukar password ini dengan apa-apa perkataan/nombor yang anda suka.
MEMBINA RUANG DOWNLOAD
96Bengkel Minisite 2009 MajalahIM.com
7.3.1 Set Password
Lihat pada line 5, “pass123” ialah password yang pembeli perlu masukkan supaya mereka dapat akses ke downloadp page. Anda boleh tukar password ini dengan apa-apa perkataan/nombor yang anda suka.
7.3.2 Set Link Untuk Download Page
Seterusnya, link untuk download page yang anda bina dalam 9.2 tadi.
Kemudian, save file download.php tersebut dan upload ke bersama dengan file yang lain.
7.4 Uji Ruang Download
Kini tiba masanya untuk kita uji samada ruang download yang kita bina tadi berfungsi dengan baik atau tidak.
Langkah pertama adalah masuk ke http://www.heroesmania.com/site1/download.php
Anda akan diminta untuk memasukkan password seperi di bawah :
Masukkan password dan klik pada butang “Akses”. Sekiranya password yang dimasukkan adalah betul, anda akan dibawa ke satu page seperti berikut yang mempunyai link ke download page
Jika password salah, anda akan terus diminta untuk memasukkan password. Se-lagi password salah, anda tidak akan dapat mengakses ke download page.
MEMBINA RUANG DOWNLOAD
97Bengkel Minisite 2009 MajalahIM.com
Klik pada link tersebut dan anda akan di bawa masuk ke download pageiaitu
SISTEMAUTORESPONDER
SISTEM AUTORESPONDER
99Bengkel Minisite 2009 MajalahIM.com
8.1 Konsep Autoresponder
Autoresponder adalah satu sistem dimana kita boleh mengumpul list ataupun senarai data pengunjung laman web kita seperti nama, emel dan sebagainya. Dengan adanya list, kita secara tidak langsung mempunyai senarai prospek yang kita boleh didik dan juga membuat promosi pada masa hadapan.
Pelawat memasuki laman web
Membuat Opt In -Mengisi nama dan emel
Sistem AutoresponderMenyimpan Nama &
Emel
SISTEM AUTORESPONDER
8.2 Register FreeAutoBot.com
Terdapat pelbagai sistem autoresponder yang terdapat di internet baik percuma mahupun berbayar. Kami mencadangkan anda menggunakan sistem autoresponder percuma terlebih dahulu. Cuba fahami konsep penggunaan autoresponder dan dapatkan “feel” terlebih dahulu. Jika anda rasa selesa dan ingin membina list secara lebih serius, anda boleh menggunakan sistem autoresponder berbayar pula.
Langkah pertama adalah membuka akaun FreeAutoBot.com. Untuk membuatnya, anda boleh pergi ke link di bawah :
Klik “JOIN NOW” untuk mendaftar akaun FreeAutoBot.com
Kemudian, isi borang dibawah dan klik “Signup”
http://www.freeautobot.com
100Bengkel Minisite 2009 MajalahIM.com
SISTEM AUTORESPONDER
Setelah selesai proses pendaftaran, login ke akaun FreeAutoBot dengan username dan password yang anda gunakan semasa proses pendaftaran tadi.
Jika proses login anda berjaya, anda akan dibawa ke bahagian user area seperti di bawah :
101Bengkel Minisite 2009 MajalahIM.com
SISTEM AUTORESPONDER
8.3 Set Message Autoresponder
Seterusnya, kita akan set mesej “follow-up” yang subscriber anda akan terima mengikut skala masa yang ditetapkan. Klik pada “Message Control”
Seterusnya, klik pada “Add New Message” untuk tambah mesej baru
Kemudian masukkan maklumat-maklumat yang diminta seperti subject, mes-sage dan sebagainya.
Setelah siap, klik button “Add Message”.
102Bengkel Minisite 2009 MajalahIM.com
SISTEM AUTORESPONDER
8.4 Membuat Opt In Form
Opt In form adalah sangat penting untuk membolehkan pelawat mengisi nama dan emel mereka supaya kita dapat membina list daripadanya.
Untuk membina opt in form, klik pada “Add Lead”
Kemudian, klik pada button “Help” di sebelah kanan
Kemudian satu tetingkap kecil yang mengandungi kod opt in seperti di bawah.
Terdapat beberapa kod yang anda perlu edit.
tukarkan USERNAME kepada usernama anda. Dalam contoh ini, usernama saya adalah flarebiz
tukarkan http://freeautobot.com kepada URL yang akan dimasuki oleh pengguna selepas mereka selesai mengisi borang opt in
save file HTML tersebut, upload ke dalam FTP dan preview di browser.
<input type=hidden name=”Username” value=”USERNAME”>
<input type=hidden name=”Success_URL” value=”http://freeautobot.com”>
103Bengkel Minisite 2009 MajalahIM.com
SISTEM AUTORESPONDER
Hasilnya adalah seperti berikut :
Sekarang kita ingin uji borang opt in ini samada ia berfungsi dengan baik ataupun tidak. Masukkan nama dan emel anda pada form opt in tersebut. Dalam contoh ini, saya akan gunakan data-data berikut
Nama : ZhafranEmail Address : [email protected]
dan tekan butang “Submit”.
104Bengkel Minisite 2009 MajalahIM.com
SISTEM AUTORESPONDER
8.5 Semak Senarai List
Kita baru sahaja membuat opt in dan sekarang kita ingan semak samada data-data opt in yang dimasukkan itu direkodkan dalam sistem autoresponder ataupun tidak.
Klik pada “Search Leads”
Kemudian klik pada “Search”
Sistem autoresponder freeautobot akan memaparkan senarai list anda. Anda boleh lihat terdapat data yang kita gunakan untuk membuat opt in sebelum ini. Ini bermakna sistem autoresponder ini berfungsi dengan baik.
105Bengkel Minisite 2009 MajalahIM.com
SLOT 4:
TEMPLATE&
PHOTOSHOP EDITING
106Bengkel Minisite 2009 MajalahIM.com
TEMPLATE & PHOTOSHOP EDITING
10.1 Membuka Templates Dengan KompoZer
Dalam bab sebelum ini, anda telah belajar macam mana untuk membuat template daripada kosong. Kadangkala, kita perlu membina minisite dalam tempoh yang agak singkat dan bila ini berlaku, anda mungkin tidak mempunyai masa yang cukup untuk membuat minisite dari kosong.
Untuk mengatasi masalah tersebut, kami telah sediakan 10 template minisite dengan warna yang berbeza dan juga 10 design header. Dalam bab ini anda akan mempelajari cara-cara untuk menggunakan tempate yang telah kami bina khas untuk anda ini.
Langkah pertama adalah buka folder template yang disediakan
anda akan dapat melihat 10 folder template. Buka salah satu daripada folder tersebut. Dalam contoh ini saya akan membuka template 2
terdapat file index.html, style.css dan juga folder images dalam folder template tersebut.
107Bengkel Minisite 2009 MajalahIM.com
TEMPLATE & PHOTOSHOP EDITING
Buka file index.html itu dengan perisian kompozer
Kemudian, anda bebas membuat sebarang editing seperti memasukkan teks, gambar dan sebagainya seperti yang telah diterangkan di dalam bab-bab se-belum ini.
10.2 Mengubahsuai Header
Sekarang kita ingin mengubahsuai header dengan teks yang unik dan bersesuaian dengan laman web yang anda ingin bina kelak.
10.2.1 Install File Font
Langkah pertama yang anda perlu lakukan adalah install file font-font yang digunakan dalam design header untuk mengelakkan komputer anda tidak dapat membaca jenis font yang digunakan di dalam design header.
108Bengkel Minisite 2009 MajalahIM.com
TEMPLATE & PHOTOSHOP EDITING
Masuk Control Panel
Kemudian pilih “Font”
109Bengkel Minisite 2009 MajalahIM.com
TEMPLATE & PHOTOSHOP EDITING
Anda akan lihat file-file font yang terdapat dalam folder font tersebut seperti dibawah :
Kemudian buka folder font yang telah disediakan untuk anda :
Kemudian copy semua file di dalam folder font tersebut dan paste ke dalam folder font di dalam control panel dan proses instalasi font kini sudah siap. Mudah bukan?
110Bengkel Minisite 2009 MajalahIM.com
TEMPLATE & PHOTOSHOP EDITING
10.2.2 Mengubah Teks Header
Setelah selesai proses instalasi font, kini anda boleh mengubahsuai teks pada header. Buka mana-mana file header dengan menggunakan perisian Adobe Photoshop
111Bengkel Minisite 2009 MajalahIM.com
TEMPLATE & PHOTOSHOP EDITING
setelah dibuka dengan perisian adobe photoshop, file header kelihatan seperti berikut :
Seterusnya pilih “Text Tool” seperti yang ditunjukkan di dalam gambarajah di bawah :
112Bengkel Minisite 2009 MajalahIM.com
TEMPLATE & PHOTOSHOP EDITING
kemudian gerakkan cursor kepada ayat “TAJUK LAMAN WEB DISINI” untuk aktifkan ayat tersebut
kemudian select teks tersebut dan tekan butang “Delete”
kemudian taip “101 TIP BISNES ONLINE”
113Bengkel Minisite 2009 MajalahIM.com
TEMPLATE & PHOTOSHOP EDITING
kemudian, pilih tanda tick seperti gambarajah dibawah
kini anda sudah siap menukar teks utama!
seterusnya, tukar dua lagi teks dengan cara yang sama. Untuk teks subtajuk, tukarkan kepada “Pelbagai Tip Percuma Perniagaan Internet” dan untuk url, tukarkan kepada www.tipperniagaan.com
Anda akan dapat hasil seperti gambarajah dibawah
114Bengkel Minisite 2009 MajalahIM.com
TEMPLATE & PHOTOSHOP EDITING
10.2.3 Menukar Gambar
Untuk menukar gambar, langkah pertama adalah pastikan “layer” gambar tersebut tidak diaktifkan dengan klik pada ikon “mata” disebelah kiri layer
Selepas anda tidak aktifkan layer untuk Gambar, gambar tersebut tidakdipaparkan di dalam Photoshop
115Bengkel Minisite 2009 MajalahIM.com
TEMPLATE & PHOTOSHOP EDITING
Seterusnya buka gambar baru dalam Photoshop dengan klik pada File > Open
Seterusnya, pilih gambar yang anda ingin masukkan ke dalam header dan klik “Open”
116Bengkel Minisite 2009 MajalahIM.com
TEMPLATE & PHOTOSHOP EDITING
Kini, gambar baru sudah berjaya dibuka di dalam Photoshop
Seterusnya, klik pada “Select” dan pilih “All” untuk memilih keseluruhan gam-bar tersebut
117Bengkel Minisite 2009 MajalahIM.com
TEMPLATE & PHOTOSHOP EDITING
Kemudian, klik pada “Edit” dan pilih “Copy”
Klik pada file header tadi untuk aktifkannya. Kemudian klik pada “Edit” dan pilih “Paste”
Kini anda telah berjaya memasukkan gambar baru ke dalam file header.
118Bengkel Minisite 2009 MajalahIM.com
TEMPLATE & PHOTOSHOP EDITING
10.2.4 Mengalihkan Gambar
Untuk menngalihkan gambar, anda perlu gunakan “Move Tool” seperti yang ditunjukkan di bawah. Klik pada ikon tersebut untuk aktifkannya.
119Bengkel Minisite 2009 MajalahIM.com
TEMPLATE & PHOTOSHOP EDITING
Pastikan layer untuk gambar baru tersebut telah diaktifkan. Jika tidak, klik pada layer tersebut untuk aktifkan
kemudian alihkan gambar tersebut ke kedudukan yang sesuai seperti gambarajah di bawah :
120Bengkel Minisite 2009 MajalahIM.com
TEMPLATE & PHOTOSHOP EDITING
10.2.5 Menyimpan File Header
Setelah siap mengubahsuai teks, kini anda perlu simpan file tersebut. Untuk melakukannya, pilih “File” dan “Save for Web...”
Kemudian klik pada butang “Save”
121Bengkel Minisite 2009 MajalahIM.com
TEMPLATE & PHOTOSHOP EDITING
122Bengkel Minisite 2009 MajalahIM.com
semasa ingin simpan, replace file header tersebut dengan file header yang asal. Nama file untuk file header lama adalah “logo.jpg”..
Klik “Save”
Akhir sekali, klik “Replace”. Kini anda sudahpun selesai menggantikan header laman dengan header baru.
TEMPLATE & PHOTOSHOP EDITING
123Bengkel Minisite 2009 MajalahIM.com
10.3 Menggunakan Template Free di Internet
Selain dari menggunakan template yang disediakan, anda juga boleh menggunakan template-template percuma yang boleh didapati di internet. Antara laman web yang menyediakan koleksi template minisite adalah MinisiteGallery.com yang dimiliki oleh Kidino.