Total Web Lite

1,061 views

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,061
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
19
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Total Web Lite

  1. 1. Panduan CMS1.0 Pendaftaran CMS o Anda perlu melakukan pendaftaran di http://sharksurf.localdns.com o Setelah selesai pendaftaran anda akan menerima email yang mengandungi nama pengguna (username) dan kata laluan (password) o Anda akan menerima email-email seperti tajuk di bawah selepas akaun anda berjaya di daftarkan  TotalWEB! Lite Configurations – namadomain.com  SharkSURF Registration Successfully – namadomain.com  SharkSurf Server Configuration File – namadomain.com o Maklumat untuk anda akses ke akaun web CMS anda berada dalam email TotalWEB! Lite Configurations  Access : Link login iaitu http://login.totalweblite.com  Account details: Mengandungi maklumat username dan password  User guide: Panduan pengguna dalam format PDF o Anda hanya perlu gunakan maklumat dalam email ini sahaja untuk akses ke web CMS anda.*Nota:Sharksurf Configuration File: Mengandungi maklumat untuk akses ke akaun FTP anda. Melibatkan hal-hal teknikal.Sharksurf Registration Sucessfully: Email memberitahu anda bahawa akaun telah berjaya di daftarkan. Mengandungi maklumat link login ,username dan password untuk perkara berikut :-  MobileACE! and TotalWEB! Lite Control Panel  Website (Plesk) Control Panel  E-mail Control Panel  iBeli.com Control PanelTotalWEB! Lite Configurations : Mengandungi maklumat untuk anda akses ke laman web CMS anda. Maklumat adalah seperti pautanuntuk akses, username dan password serta manual pengguna dalam format PDF2.0 Daftar Masuk o Buka pelayar internet anda (Firefox atau Internet Explorer) dan pada bar alamat pelayar internet anda taipkan alamat seperti ini http://login.totalweblite.com o Masukkan nama pengguna (contoh: ahmad) dan katalaluan (contoh: XTJ8Y5) o Seterusnya tekan butang Login*Nama pengguna dan katalaluan akan diberikan melalui email Gambarajah 1.0 : Paparan muka depan ketika daftar masuk 1|Page
  2. 2. Panduan CMS3.0 Panel Kawalan Pengguna o Setelah berjaya daftar masuk anda akan dibawa ke halaman panel kawalan pengguna seperti dalam gambarajah 1.1. o Di bahagian ini anda akan lihat pelbagai menu dan ikon gambar untuk membina atau mengubahsuai laman web anda. o Berikut penerangan ringkas mengenai fungsi setiap menu ikon: Home: Halaman utama panel kawalan Template: Susun atur kedudukan menu, logo, sepanduk, kandungan dalam laman web Add Page: Menambah halaman baru ( contoh: borang, testimonial, album, hubungi ) Add On: Fungsi nilai tambah untuk web anda ( web counter, analytic, adsense, SEO) Manage: Mengurus dan menadbir halaman yang telah dibina Store: Menempatkan produk-produk anda Membership: Sistem keahlian untuk bakal pelanggan anda Resources: Sumber rujukan anda dalam pembinaan web Preview: Melihat pratonton laman web yang terkini Gambarajah 1.1 : Panel kawalan pengguna4.0 Langkah Membina Laman Web4.1 Menetapkan struktur web o Tekan template dan kemudian Website Setting o Masukkan ruangan kosong dan kemaskini bahagian berkaitan o Apabila selesai sila simpan tetapan anda *Anda boleh kemaskini bahagian ini atau ubahsuai Menu Style pada bila-bila masa sahaja 2|Page
  3. 3. Panduan CMS Gambarajah 1.2 : Tetapan struktur laman web4.2 Memilih template o Tekan pada Choose Template atau ikon gambar Template di bahagian atas o Di bahagian ini anda diberi pilihan untuk membina template sendiri (DIY) atau menggunakan template sedia ada. Gambarajah 1.3 : Memilih template4.2.1 Membina template sendiri * Do-It-Yourself o Apabila anda memilih template ini pastikan anda mengemaskini semua ruang yang ada dan simpan (save) o Ruang-ruang yang perlu anda kemaskini adalah  Background & Content  Header & Footer  Menu  Side Content  Tekan Preview untuk lihat hasil laman web anda *Tidak digalakkan ubah suai CSS (edit CSS). Anda perlukan kemahiran coding untuk ubahsuai template 3|Page
  4. 4. Panduan CMS Gambarajah 1.4 : DIY template4.2.2 Memilih template sedia ada o Tekan Latest Template untuk lihat template terkini o Sekiranya anda ingin memilih template mengikut kategori sila tekan All Template o Bawa ke bawah dah pilih kategori seperti gambarajah 1.5 o Tekan Enlarge untuk besarkan gambar dan tandakan pada bulatan untuk menetap pilihan template anda seperti dalam gambarajah 1.6 o Jangan lupa untuk simpan pilihan anda. o Tekan Preview untuk lihat laman web anda Gambarajah 1.5 : Memilih template mengikut kategori 4|Page
  5. 5. Panduan CMS Gambarajah 1.6 : Memilih template sedia ada4.3 Menambah laman baru o Anda boleh menambah laman baru pada bila masa sahaja o Tekan pada menu Add Page o Pilih jenis laman yang anda inginkan o Keterangan ringkas beberapa jenis laman  Webpage: Laman baru kosong untuk memasukkan teks dan gambar. Terhad kepada 25 laman baru. Contoh: Home, About Us, Company Profile  Product Catalogue: Bina katalog untuk produk anda dan hubung terus dengan kedai online (shopping cart). Terhad kepada 2 jenis katalog dengan 10 jenis barang setiap satu.  Photo Album: Memasukan gambar perniagaan anda. Terhad kepada 2 album dengan 10 gambar setiap satu.  Enquiry Form: Borang maklum balas 5|Page
  6. 6. Panduan CMS Gambarajah 1.7 : Menambah laman4.3.1 Webpage o Isi ruang yang perlu seperti Menu Title, Page Title, o Masukkan kandungan dan gambar dalam ruang yang disediakan o Gunakan Content Editor membuatkan laman anda lebih menarik Gambarajah 1.8 : Webpage 6|Page
  7. 7. Panduan CMS o Keterangan ringkas:  Menu Title: Tajuk menu seperti Home, About Us, Company Profile  Page Title: Tajuk laman anda secara ringkas. Penting untuk SEO  Enable Sidebar: Pilihan untuk menu tepi  Bookmark & Share: Pilihan untuk anda benarkan pelawat berkongsi laman anda kepada orang lain.  Published: Tetapan sama ada anda mahu laman yang dibina diterbit atau tidak  View Sample Content: Lihat contoh menghasilkan kandungan yang baik  Page Content: Ruang untuk anda menulis isi kandungan Gambarajah 1.9 : Page Content Editor *Content Editor terbahagi kepada 2 bahagian: Basic Editor dan Advance Editor4.3.2 Katalog Product o Dalam menu Add Page, sila pilih Product Catalogue o Isikan ruangan yang perlu seperti Menu Title, Page Title, Side bar Category dan sebagainya  Product Price : Pilihan untuk paparkan harga atau tidak paparkan harga  Product Weight : Pilihan untuk paparkan berat produk  Enable Product Review : Tetapan untuk benarkan pelanggan memberikan sebarang komen  Approval : Tetapan untuk anda semak komen secara manual atau auto  Product Listing Layout : Memilih susun atur produk anda  Product Detail page layout : Susun atur sesuatu produk  Header & Footer: Masukkan sebarang maklumat produk anda o Kemudian Save halaman produk anda Gambarajah 2.0 : Laman Katalog 7|Page
  8. 8. Panduan CMS4.3.2.1 Menambah produk o Setelah anda berjaya membina laman produk, menu Add Product akan kelihatan di bahagian tepi kanan seperti dalam gmabarajah di bawah. o Isi kan ruangan yang perlu  Choose Category : Pilih kategori produk. Jika tiada, anda boleh tambah.  Product Name : Nama produk anda  Produk Code : Berikan kod untuk produk anda  Product Price: Harga jualan  Promotion Price : Harga promosi  Published : Pilihan untuk anda benarkan produk untuk disiarkan atau tidak siarkan  Product Description : Masukkan keterangan ringkas mengenai produk.. Penting untuk maklumat pelanggan  Product Image : Memuat naik gambar produk o Kemudian Save untuk simpan maklumat Gambarajah 2.1: Menambah produk4.3.2.2 Mengurus produk o Membolehkan anda mengurus produk yang ada dalam katalog anda. Gambarajah 2.2 : Pengurusan produk 8|Page
  9. 9. Panduan CMS4.3.2.3 Bingkai gambar produk o Memilih jenis bingkai gambar produk Gambarajah 2.3 : Memilih bingkai gambar4.3.2.4 Susunan produk o Untuk mengubah kedudukan produk dan kategori anda hanya perlu ‘Drag & Drop’ sahaja Gambarajah 2.4: Susunan produk4.3.3 Album gambar o Dalam menu Add Page, klik pada ikon Photo Album o Isi ruangan seperti Menu Title, Page Title o Buat tetapan pada Photo Listing Layout untuk susunan gambar o Masukkan keterangan ringkas dalam Header and Footer Gambarajah 2.5 : Album gambar 9|Page
  10. 10. Panduan CMS4.3.3.1 Menambah gambar o Setelah anda berjaya membina halaman album, menu Add Photo akan kelihatan di bahagian tepi seperti gambarajah di bawah. o Tekan butan Select & Upload untuk memilih dan memuat naik gambar dari computer anda Gambarajah 2.6 : Menambah gambar4.3.3.3 Mengurus Gambar o Di dalam bahagian ini anda boleh lihat semua gambar yang anda muat naik. o Anda boleh mengubah tajuk gambar dan masukkan keterangan untuk setiap gambar seperti dalam gambarajah di bawah. Gambarajah 2.7 : Mengurus gambar 10 | P a g e
  11. 11. Panduan CMS4.3.3.4 Susunan gambar o Anda hanya perlu memilih gambar, kemudian Drag & Drop ke posisi yang anda ingini Gambarajah 2.8 : Susun atur gambar4.3.4 Membina borang o Laman ini membolehkan anda membina borang untuk mendapatkan maklumat dari pelanggan anda o Anda boleh mendapatkan Enquiry Form ini di dalam Add Page o Penuhkan ruangan yang perlu di isi seperti Menu Title, Page Title o Berikan keterangan ringkas di bahagian Header and Footer o Pastikan anda menekan butang Save untuk simpan Gambarajah 2.9 : Tetapan borang pertanyaan3.3.4.1 Memilih jenis borang o Setelah anda berjaya membina laman borang, menu Choose Forms akan terpapar di bahagian tepi kanan web o Menu Choose Forms ini membenarkan anda memilih jenis borang yang di ingini  Form Type : Jenis borang  Form Fields : Jenis maklumat yang anda perlukan dari pelanggan/pelawat  Preview : Contoh borang yang boleh di lihat 11 | P a g e
  12. 12. Panduan CMS Gambarajah 3.0 : Memilih jenis borang4.3.4.2 Tetapan Email o Semua maklumat dari pelanggan/pelawat yang mengisi borang akan di hantar ke dalam email anda o Di dalam menu Email Setting masukkan email yang sah (email yang selalu anda guna) ke dalam ruang kosong Add Email Address o Kemudian klik butang Add o Anda boleh email lain sekiranya di rasakan perlu Gambarajah 3.1 : Tetapan Email4.3.4.3 Melihat maklumat yang di hantar o Anda boleh lihat maklumat pelanggan yang anda terima di menu View Submission o Keterangan:  Sender Name: Nama pelanggan/pelawat  Post Date: Tarikh hari maklumat di hantar  View: Lihat maklumat yang dihantar  Delete: Memadam maklumat  Status: Maklumat baru atau lama 12 | P a g e
  13. 13. Panduan CMS Gambarajah 3.2 : Melihat maklumat borang o Klik butang View untuk lihat pertanyaan pelanggan o Bahagian atas terdapat maklumat dan pertanyaan pelanggan o Bahagian bawah adalah ruang untuk anda membalas pertanyaan pelanggan o Tulis di bahagian Reply kemudian tekan butang Reply o Maklumat ini juga akan dihantar ke lamat email anda, Jadi anda boleh memilih untuk membalas pertanyaan pelanggan melalui email atau laman web anda Gambarajah 3.3 : Lihat pertanyaan pelanggan4.4 Tambah Nilai o Menu Add On Adalah menu di mana anda boleh menambah fungsi lain ke dalam web anda  Web Counter : Melihat statistic klik di web anda  Google Analytics: Menganalisa pelawat web anda  Search Engine Submission : Menghantar web anda ke enjin carian di internet 13 | P a g e
  14. 14. Panduan CMS Gambarajah 3.4 : Add On4.4.1 Web Counter o Anda boleh melihat jumlah statistik pelawat atau jumlah klik web anda dengan fungsi Web Counter o Pilih Web Counter dalam menu Add On o Tandakan Turn On untuk memaparkan Web Counter dalam web anda o Increment :  All Hits – Setiap klik akan di kira  Unique Visitors – Hanya pelawat baru akan dikira, pelawat yang kembali selepas kali pertama ke web anda tidak di kira o Starting Count From : Jumlah klik untuk bermula o Total Hits : Jumlah klik o Alignment : Posisi Web Counter o New Count: Masukkan jumlah yang anda mahu mulakan Gambarajah 3.5 : Web Counter4.4.2 Search Engine Submission o Ini adalah bahagian di mana membolehkan anda menghantar web anda ke enjin carian yang berada di internet seperti Google, Yahoo dan Bing o Sistem ini membolehkan web anda dihantar ke 1000 enjin carian o Masukkan maklumat yang diperlukan dan tekan Submit 14 | P a g e
  15. 15. Panduan CMS  Website Address : Alamat web anda. Contoh : http://www.namadomain.com  Website Title : Tajuk web anda  Website Keyword : Katakunci-katakunci untuk web anda  Website Description : Keterangan ringkas mengenai web anda  Contact Person : Nama anda  Email Address : Alamat email anda Gambarajah 3.6 : Search Engine Submission4.4.3 Google Analytics o Fungsi Google Analytics membolehkan anda menganalisa/memantau aktiviti pelawat web anda seperti :  Bilangan pelawat ke laman web anda  Apa yang dilihat oleh pelawat  Bila dan dari mana pelawat itu datang  Bagaimana pelawat jumpa laman web anda  Jenis dan masa interaksi di laman web anda o Mendaftar di http://www.google.com/analytics (boleh login guna Gmail, klik butang Signup) o Lakukan pendaftaran mengikut arahan dalam Google Analytic Gambarajah 3.7 : Pendaftaran Google Analytics o Di akhir pendaftaran anda akan diberikan kod untuk di letak dalam web anda o Copy kod Google Analytics tersebut o Pastikan anda tekan Save and Finish di bahagian bawah 15 | P a g e
  16. 16. Panduan CMS Gambarajah 3.8 : Kod Google Analyticso Klik Google Analytics dalam menu Add On dalam web andao Paste kod tadi di dalam ruang kosongo Pastikan anda tandakan Turn On dan Save Gambarajah 3.9 : Memasukkan kod Google Analytico Tempoh 24 jam diperlukan untuk Google mengeluarkan datao Untuk memastikan proses anda betul dan berjaya, masuk ke akaun Google Analytic. Tanda √ pada status menandakan Google Analytics anda berjaya di masukkan.o View Report untuk lihat statistik web anda Gambarajah 4.0 : Lihat statistik Google Analytics 16 | P a g e
  17. 17. Panduan CMS4.4.4 Favicon o Favicon adalah gambar yang akan terpapar di sebelah alamat laman web anda o Anda boleh mencipta favicon anda seperti alamat web yang di beri o Anda hanya perlu memuat naik fail .ico sahaja di bahagian Browse o Proses ini mengambil masa 24 jam sebelum favicon keluar di bahagian alamat web Gambarajah 4.1 : Favicon4.5 Mengurus laman mukasurat o Anda boleh mengurus semua laman yang anda bina dalam web anda di bahagian Manage o Di dalam bahagian ini anda akan melihat senarai laman mukasurat yang anda bina  Page Title : Tajuk laman mukasurat  Module : Jenis laman mukasurat  Copy Link : Pautan setiap laman mukasurat  View : Lihat laman mukasurat  Edit : Mengubahsuai laman mukasurat  Delete : Memadam laman mukasurat  Publish : Papar atau tidak paparkan laman muklasurat Gambarajah 4.2 : Mengurus laman mukasurat 17 | P a g e
  18. 18. Panduan CMS4.5.1 Susun atur laman mukasurat o Menu Edit Page Sequence membolehkan anda menyusun atur laman mukasurat bina. o Di bahagian ini anda akan lihat laman yang dipaparkan dan di sembunyikan o Anda hanya perlu menarik ke bawah atau ke atas untuk menyusun laman mukasurat di bina Gambarajah 4.3 : Menyusun atur laman muka surat4.0 Memasukkan Google Map o Anda boleh memasukkan Google Map di dalam bahagian Contact Us o Klik Add Page dan pilih ikon Contact Us. o Di bahagian Contact Setting, masukkan maklumat yang diperlukan seperti Menu Title dan Page Title. o Masukkan keterangan ringkas di bahagian Header dan Footer o Masukkan kod HTML Google Map.  Cari alamat perniagaan anda di http://maps.google.com atau dapatkan maklumat di Google Place anda.  Tekan pada butang Link seperti gambarajah 4.1  Copy kod HTML dan masukkan ke dalam ruang kosong seperti dalam gambarajah 4.2 o Kemudian tekan butang Save untuk simpan. 18 | P a g e
  19. 19. Panduan CMS Gambarajah 4.4 : Kod HTML Google Map Gambarajah 4.5 : Memasukkan kod HTML Google Map o Kemudian anda boleh menambah maklumat lain di menu berikut :  Add Contact : Tambah maklumat hubungi seperti nama, alamat, telefon dan email  Manage Contacts : Mengurus maklumat hubungi seperti ubahsuai, padam, paparkan  Contact Sequence : Susun atur alamat hubungi5.0 Memasukkan Video YouTube o Dapatkan video Youtube yang anda mahu: http://www.youtube.com o Tekan pada butang Embed o Anda akan menemui kod embed HTML. Copy & Paste ke dalam web anda. o Anda boleh menukar panjang dan lebar video sebelum Copy & Paste 19 | P a g e
  20. 20. Panduan CMS Gambarajah 4.6 : Kod HTML Youtubeo Masukkan kod HTML video youtube ke dalam web mengikut posisi/bahagian yang anda rasakan sesuaio Pastikan anda tekan butang Save.o Selepas Save cuba lihat laman dengan menekan butang Preview Gambarajah 4.7 : Memasukkan kod HTML Sekiranya anda Preview dan tiada video yang keluar serta kod HTML masih kelihatan, sila ke menu Manage. Cari Web Page tadi dan tekan edit. Kemudian tekan Save sekali lagi. Kod HTML masih kelihatan kerana mungkin ssitem CMS belum dapat berinteraksi dengan kod HTML tadi 20 | P a g e
  21. 21. Panduan CMS6.0 Memasukkan gambar melalui akaun Flickr.comAda 2 cara:6.1 Copy & Paste o Masuk ke akaun flickr.com anda o Pilih gambar yang di ingini. o Klik pada butang Share This o Salin kod HTML seperti di bawah o Pilih saiz gambar o Paste kod HTML tadi ke dalam Page Content web anda o Pastikan anda Save Gambarajah 5.0 : Masukkan kod HTML Flickr Sekiranya anda Preview dan tiada gambar yang keluar serta kod HTML masih kelihatan, sila ke menu Manage. Cari Web Page tadi dan tekan edit. Kemudian tekan Save sekali lagi. Kod HTML masih kelihatan kerana mungkin ssitem CMS belum dapat berinteraksi dengan kod HTML tadi 21 | P a g e
  22. 22. Panduan CMSNota:<a href="http://www.flickr.com/photos/35567718@N08/5061086749/"title="adidas_mat_ind_02 by kalam.corp, on Flickr"><imgsrc="http://farm5.static.flickr.com/4133/5061086749_18ce291d4c.jpg" width="490"height="382" alt="adidas_mat_ind_02" /></a>Link pertama : Link ini boleh di gantikan dengan link lain mengikut kehendak andaLink kedua : Link gambar di akaun flickr6.2 Insert Image o Klik pada Page Content dimana gambar hendak di masukkan o Klik pada butang Insert Image o Masukkan Link gambar di flickr (selepas dari <img src=” ) o Isikan ruangan seperti Title, Alignment, Width, Height o Klik butang InsertPastikan anda Save kerja anda Gambarajah 5.1 : Butang Insert Image7.0 Slideshare o Login ke akaun http://www.slideshare.net anda o Pilih dokumen yang ingin di letak dalam web anda o Tekan butang Embed dan Copy kod embed HTML 22 | P a g e
  23. 23. Panduan CMS Gambarajah 5.2 : Slideshare o Paste kod embed Slideshare ke dalam Page Content anda o Pastikan anda Save kerja-kerja anda Gambarajah 5.3 : Memasukakn kod SlideshareSekiranya anda Preview dan tiada video yang keluar serta kod HTML masih kelihatan, sila ke menu Manage. Cari Web Pagetadi dan tekan edit. Kemudian tekan Save sekali lagi. Kod HTML masih kelihatan kerana mungkin ssitem CMS belum dapatberinteraksi dengan kod HTML tadi 23 | P a g e
  24. 24. Panduan CMS8.0 Image EditorAnda boleh mengguna sebarang aplikasi penyunting gambar di dalam computer ataupunsecara online di internet.Aplikasi di dalam computer : Microsoft Office Picture ManagerCara: All Programs >> Microsoft Office >> Microsoft Office Tools >> Microsoft Office PictureManagerAplikasi online: http://www.picnik.com , http://www.pixlr.com , http://www.aviary.comdan banyak lagi8.1 Picnik.com o Layari http://www.picnik.com o Tekan butang Upload kemudian pilih gambar yang berada dalam simpanan di computer anda Gamabarajah 5.4 : Gambar berjaya di muat naik o Kemudian anda boleh membuat beberapa suntingan ke atas gambar tadi  Rotate : Memutar gambar ke bawah dan atas  Crop : Memotong bahagian gambar yang tidak perlu  Resize : Membesar dan mengecilkan saiz gambar8.1.1 Mengecilkan gambar o Klik pada menu Resize o Masukkan nilai panjang dan lebar yang anda mahu o Setelah berpuas hati, klik butang OK 24 | P a g e
  25. 25. Panduan CMS Gambarajah 5.5 : Resizeo Setelah anda berpuas hati dan tiada suntingan lain, klik butang Save & Shareo Isikan nama fail gambar anda dan tunggu proses Compressing selesaio Kemudian tekan butang Save Photo dan simpan dalam computer anda Gambarajah 5.6 : Save Photo 25 | P a g e
  26. 26. Panduan CMS9.0 Facebook Badge di sidebaro Sila ke http://www.facebook.com/badges atauo Login ke Facebook dan klik Profile andao Tekan Create Profile Badge Gambarajah 5.7 : Profile Facebook o Klik Page Badges dan Klik other dan copy kod yang keluar o Klik edit this badges untuk membuat suntingan pada badges anda Gambarajah 5.8 : Badge Facebook o Dalam CMS anda, klik Add Page dan pilih Web Page o Masukkan Menu Title dan Page Title o Tandakan YES pada Enable Sidebar o Tandakan NO pada Bookmark & Share, Facebook Comment, dan Published Note: Mengapa NO pada Published? Page Content ini hanya akan terpapar pada Sidebar sahaja dan tidak akan dikalsifikasikan sebagai full page content 26 | P a g e
  27. 27. Panduan CMS o Paste kod Badge Facebook dalam ruang Page Content o Jangan lupa untuk Save kerja anda o Anda boleh cuba letakkan widget lain seperti Like Box dan Shout Box Gambarajah 5.9 : Memasukkan kod badgeSekiranya anda Preview dan tiada video yang keluar serta kod HTML masih kelihatan, sila ke menu Manage. Cari Web Pagetadi dan tekan edit. Kemudian tekan Save sekali lagi. Kod HTML masih kelihatan kerana mungkin ssitem CMS belum dapatberinteraksi dengan kod HTML tadi 27 | P a g e

×