bengkel minisite - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina...

123
BENGKEL MINISITE

Upload: dangthuan

Post on 10-Apr-2019

227 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

BENGKEL MINISITE

Page 2: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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

Page 3: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

PENGENALANKEPADAMINISITE

Page 4: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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.

••••

Page 5: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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

Page 6: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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!

Page 7: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

SLOT 1:

ASASMEMBINAMINISITE

Page 8: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

PENGENALANKEPADA

HTML EDITOR

Page 9: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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

Page 10: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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

Page 11: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

PENGENALAN KEPADA HTML EDITOR

11Bengkel Minisite 2009 MajalahIM.com

Seterusnya, buka folder tersebut dan klik pada file yang bernama “kompozer” untuk membuka perisian KompoZer

Page 12: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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!

Page 13: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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 :

Page 14: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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

Page 15: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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

Page 16: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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.

Page 17: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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.

Page 18: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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

Page 19: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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”

Page 20: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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:

Page 21: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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)

Page 22: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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 :

Page 23: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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”

Page 24: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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”

Page 25: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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 :

Page 26: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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.

Page 27: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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 :

Page 28: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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

Page 29: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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 :

Page 30: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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 :

Page 31: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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

Page 32: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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.

Page 33: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

PENGENALAN KEPADA HTML EDITOR

33Bengkel Minisite 2009 MajalahIM.com

Seterusnya, ulang proses tadi untuk footer pula. Anda akan dapat hasil seperti ini :

Page 34: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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

Page 35: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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!

Page 36: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

PENGENALANKEPADA CSS

Page 37: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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 :

Page 38: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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.

Page 39: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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

Page 40: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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.

Page 41: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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

Page 42: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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.

Page 43: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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

Page 44: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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

Page 45: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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.

Page 46: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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.

Page 47: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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.

Page 48: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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.

Page 49: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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

Page 50: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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.

Page 51: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

SLOT 2:

PEMBINAANMINISITE

Page 52: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

ELEMEN-ELEMENMINISITE

Page 53: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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”

Page 54: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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

Page 55: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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”

Page 56: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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.

Page 57: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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.

Page 58: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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 :

Page 59: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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

Page 60: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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

Page 61: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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

Page 62: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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”

Page 63: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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

Page 64: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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

Page 65: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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.

Page 66: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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.

Page 67: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

ELEMEN-ELEMEN MINISITE

67Bengkel Minisite 2009 MajalahIM.com

Klik “OK” dan kini anda telah siap membina internal link.

Page 68: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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.

Page 69: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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.

Page 70: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

FTP&

SITE MANAGER

Page 71: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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

Page 72: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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”

Page 73: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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”

Page 74: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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

Page 75: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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.

Page 76: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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

Page 77: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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.

Page 78: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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 :

Page 79: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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

Page 80: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

SLOT 3:

ELEMENTAMBAHAN

DALAMMINISITE

Page 81: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

MEMBINA BORANGTEMPAHAN

Page 82: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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/

Page 83: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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.

Page 84: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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”

Page 85: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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)

Page 86: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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.

Page 87: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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

Page 88: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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”

Page 89: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

MEMBINA BORANG TEMPAHAN

89Bengkel Minisite 2009 MajalahIM.com

dan paste kod borang pembayaran tadi.

Save file HTML anda dan lihat pada browser.

Page 90: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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.

Page 91: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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

Page 92: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

MEMBINA RUANGDOWNLOAD

Page 93: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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

Page 94: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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

Page 95: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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.

Page 96: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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.

Page 97: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

MEMBINA RUANG DOWNLOAD

97Bengkel Minisite 2009 MajalahIM.com

Klik pada link tersebut dan anda akan di bawa masuk ke download pageiaitu

Page 98: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

SISTEMAUTORESPONDER

Page 99: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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

Page 100: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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

Page 101: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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

Page 102: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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

Page 103: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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

Page 104: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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

Page 105: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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

Page 106: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

SLOT 4:

TEMPLATE&

PHOTOSHOP EDITING

106Bengkel Minisite 2009 MajalahIM.com

Page 107: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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

Page 108: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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

Page 109: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

TEMPLATE & PHOTOSHOP EDITING

Masuk Control Panel

Kemudian pilih “Font”

109Bengkel Minisite 2009 MajalahIM.com

Page 110: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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

Page 111: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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

Page 112: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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

Page 113: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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

Page 114: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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

Page 115: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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

Page 116: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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

Page 117: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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

Page 118: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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

Page 119: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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

Page 120: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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

Page 121: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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

Page 122: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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.

Page 123: BENGKEL MINISITE - bisnesdigital.com · peserta bengkel ini, anda akan dilatih untuk membina minisite tanpa perlukan designer lagi selepas ini. Jadi, soal kos bukan lagi masalah untuk

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.