Tutorial lengkap membina lawan web menggunakan nvu

4,136 views
4,045 views

Published on

http://tutorialbelajarpercuma.blogspot.com/
belajar buat web guna NVU, untuk perniagaan online

Published in: Business, Technology
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total views
4,136
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
287
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Tutorial lengkap membina lawan web menggunakan nvu

  1. 1. Tutorial Lengkap Membina Laman Web Menggunakan NVU 2010 Tutorial Lengkap Membina Lawan Web Menggunakan NVU/Kompozer Kandungan Di didalam Ebook ini: Tutorial 1 : Installing NVU Tutorial 2 : Setting UP NVU Tutorial 3 : Page Layout Tutorial 4 : Menggunakan Tables Tutorial 5 : Asas Format Text Tutorial 6 : Pautan Tutorial 7 : Memasukkan Imej Tutorial 8 : Simpan dan Publish kan ke Web Dengan 8 Tutroial mudah ini, digabungkan dengan web hosting anda akan dapat membina website yang efektif dan mudah. Anda boleh mempunyai website dan berjalan secepat hari esok. Selamat Belajar http://www.automarketing.ws/panduanbiz/ - Oleh : AzadAdvisor
  2. 2. Tutorial Lengkap Membina Laman Web Menggunakan NVU 2010 Tutorial 1 : Installing NVU/ Kompozer Bagaimana Install NVU/Kompozer NVU merupakan program web editor yang percuma.Bagaimanapun beberapa perkara telah berubah dalam website rasmi NVU, jadi saya mencadangkan versi baru untuk NVU yang lebih stabil iaitu Kompozer. Oleh kerana ianya adalah benda yang sama, maka tutorial ini adalah berdasarkan NVU. Antaramuka Kompozer juga sama seperti NVU. Ikuti langkah demi langkah di bawah untuk install: 1. Klik sini untuk Download KompoZer 2. Pilih version yang betul – untuk windows ialah versi win32 binary. 3. Ini akan membawa anda ke web Sourceforge dan akan ada pop up mengatakan sesuatu untuk anda download. Hanya klik download sahaja ke desktop anda(supaya mudah cari). 4. Pergi ke desktop dan cari fail yang anda telah download tadi. Anda diperlukan untuk extract fail tersebut. 5. Selepas extract, pergi kedalam folder yang telah anda extract, cari kompozer.exe. double klik untuk menjalankan program tersebut. http://www.automarketing.ws/panduanbiz/ - Oleh : AzadAdvisor
  3. 3. Tutorial Lengkap Membina Laman Web Menggunakan NVU 2010 Tutorial 2: Set UP NVU Bagaimana hendak set up FTP Kompozer Kepada anda yang tidak tahu apa itu FTP. Boleh rujuk Tutorial Lengkap FTP. Dan tutorial ini khas untuk anda yang telah mempunyai web hosting sendiri. Jika anda tiada Web Hosting, Anda boleh terus Ke Tutorial 3. Setelah anda memilih web hosting pilihan anda.(saya Rekomenkan GDI – rujuk info tentang gdi http://www.automarketing.ws/tutorialgdi.html) Ia sebenarnya langkah yang amat mudah. Ikuti langkah di bawah 1. Pastikan Kompozer anda dah di buka. 2. Pergi Edit Klik pada Publishing Site Setting 3. Klik pada New Site http://www.automarketing.ws/panduanbiz/ - Oleh : AzadAdvisor
  4. 4. Tutorial Lengkap Membina Laman Web Menggunakan NVU 2010 4. Masukkan Maklumat mengenai web anda pada web setting seperti contoh dibawah. Site Name : Nama Website Anda HTTP address of your home page : Ini adalah Domain Name anda daftar dengan web hosting. E.g http://www.NAMAANDA.com. Jangan lupa untuk letakkan HTTP. Publishing address: Masukkan Domain Name anda yang di cari. User name: Username untuk FTP ke Hosting anda yang telah diberikan oleh syarikat web hosting kepada anda . Sila check Email jika anda terlupa ( Biasanya hosting company akan hantar ke emel, harap anda tak padam emel tersebut) Password: Sama seperti di atas. Seperti yang diberikan oleh Web Hosting Company Checkmark Save Password. 5. Klik OK 6. Test Publishing Site anda dengan memasukkan teks di mana jua anda suka seperti dalam skrin. http://www.automarketing.ws/panduanbiz/ - Oleh : AzadAdvisor
  5. 5. Tutorial Lengkap Membina Laman Web Menggunakan NVU 2010 7. Klik File Save as 8. Jika NVU meminta untuk memasukkan Tajuk (Title), hanya masukkan “testing”. 9. Kemudian, Save ke Desktop dan namakan sebagai TEST. http://www.automarketing.ws/panduanbiz/ - Oleh : AzadAdvisor
  6. 6. Tutorial Lengkap Membina Laman Web Menggunakan NVU 2010 10. Sekarang, Klik pada Publish Button dalam NVU. Anda akan dipaparkan seperti di bawah ini, Klik Publish sekali lagi… 11. Anda Sepatutnya akan lihat paparan seperti di bawah http://www.automarketing.ws/panduanbiz/ - Oleh : AzadAdvisor
  7. 7. Tutorial Lengkap Membina Laman Web Menggunakan NVU 2010 12. Akan dipaparkan Publishing is complete dan tutup paparan tersebut. Bermakna anda telah berjaya. http://www.automarketing.ws/panduanbiz/ - Oleh : AzadAdvisor
  8. 8. Tutorial Lengkap Membina Laman Web Menggunakan NVU 2010 Tutorial 3: Page Layout Memikirkan mengenai Page Layout. Sebelum anda memulakan membina web ini,cuba fikir sejenak mengenai apa sebenarnya yang anda mahu design. Apa hasil web anda ini. Jika anda tiada idea anda boleh pergi rujuk Free Template di google atau di pakej yang saya sediakan. Cuba cari mana yang sesuai dengan jiwa dan pandangan anda. Beberapa perkara yang perlu diperhatian ialah : - Navigasi : Bagaimana nak bernavigasi di antara Page - Berapa banyak page yang anda mahukan (Utama, Produk, Hubungi kami) - Header dan imej yang anda perlukan untuk mencantikkan web anda. - Isi kandungan Web anda ,teks, sususan Saya selalunya akan bermula dengan kertas kosong dan sketch kan design atas kertas tersebut. Berapa banyak kolum,menu,kaler text dan layout. Semuanya akan di sketch kan dahulu. http://www.automarketing.ws/panduanbiz/ - Oleh : AzadAdvisor
  9. 9. Tutorial Lengkap Membina Laman Web Menggunakan NVU 2010 Gambar di atas ialah layout yang biasa digunakan dalam pembinaan laman web. http://www.automarketing.ws/panduanbiz/ - Oleh : AzadAdvisor
  10. 10. Tutorial Lengkap Membina Laman Web Menggunakan NVU 2010 Tutorial 4: Penggunaan Tables Bagamaima menggunakan Table untuk Design web anda Ada beberapa cara untuk design layout web sebenarnya. Cara yang paling mudah dan cepat adalah dengan menggunakan tables. Cara lain ialah dengan menggunakan CSS yang semakin popular sekarang ni. Tapi untuk pengguna baru, dinasihatkan menggunakan Tables sahaja. 1. Buka NVU , jika belum dibuka. 2. Kita akan web berdasarkan sketch yang telah anda buat tadi dalam tutorial 3. Disini kita memerlukan beberapa tables untuk layout ini. Idea yang bagus untuk kita mempunyai 2 tables berlainan untuk header dan untuk Navigasi kerana apa yang anda akan ubah di header tidak akan menjejaskan navigasi dan begitulah sebaliknya. http://www.automarketing.ws/panduanbiz/ - Oleh : AzadAdvisor
  11. 11. Tutorial Lengkap Membina Laman Web Menggunakan NVU 2010 3. Di NVU, klik pada table button atau table option di menu dan pilih table 1 row by 1 column. 4. Seterusnya pilih berapa banyak Rows dan Columns. Dalam contoh dibawah,table pertama kita ialah untuk header. Kita hanya perlukan 1 row by 1 columns sahaja dahulu. Selepas pilih 1x1, klik OK. 5. Anda akan dapat sesuatu seperti di bawah ini. http://www.automarketing.ws/panduanbiz/ - Oleh : AzadAdvisor
  12. 12. Tutorial Lengkap Membina Laman Web Menggunakan NVU 2010 Select di dalam table yang baru dibuat tadi, klik kanan untuk mendapatkan menu options. Klik Table Cell Properties. 5. Menu yang baru akan dipaparkan. Klik pada Tables tab sepeti yang ditunjukkan di bawah. http://www.automarketing.ws/panduanbiz/ - Oleh : AzadAdvisor
  13. 13. Tutorial Lengkap Membina Laman Web Menggunakan NVU 2010 Tables properties menu akan dipaparkan…di mana anda dapat lihat height, set kan kepada 90 kemudian klik pada anak panah biru dan setkan kepada pixels. Untuk width, jadikan 100, kemudian klik pada anak panah biru dan pilih % of Windows. Juga, setkan borders, spacing, padding ke 0 (sifar) http://www.automarketing.ws/panduanbiz/ - Oleh : AzadAdvisor
  14. 14. Tutorial Lengkap Membina Laman Web Menggunakan NVU 2010 6. Background kaler tukar kepada hijau (atau suka hati anda), kemudian Klik OK. 7. Kemudian, pergi semula ke NVU skrin anda dan anda akan dapati seperti di bawah ini. http://www.automarketing.ws/panduanbiz/ - Oleh : AzadAdvisor
  15. 15. Tutorial Lengkap Membina Laman Web Menggunakan NVU 2010 Selepas memasukkan tables pertama anda, Rows hijau, kemudian kita akan menambah 1 lagi tables untuk melengkapkan layout kita ini. 8. Buat Tables baru, kali ini dengan 1x2( 1 rows,2 Columns). Klik OK 9. Tables baru anda akan paparkan, gerakkan tetikus anda di antara 2 tables tersebut dan klik tetikus anda. ’ Kemudian klik Delete. Ini akan menjadikan 2 tables tadi menjadi rapat antara 1 sama lain. 10. Sekarang, pilih table baru tersebut dengan klik kiri di dalamnya. 11. Klik kanan, pergi ke table properties. Resize rows seperti anda buat sebelum ini kepada 100% width dan biarkan height kosong dalam pixels. Border, spacing dan padding setkan ke 0. ia akan menjadi seperti ini: http://www.automarketing.ws/panduanbiz/ - Oleh : AzadAdvisor
  16. 16. Tutorial Lengkap Membina Laman Web Menggunakan NVU 2010 Mengimbas semula sketch kita tadi, kita mahukan layout seperti yang telah kita sketchkan. http://www.automarketing.ws/panduanbiz/ - Oleh : AzadAdvisor
  17. 17. Tutorial Lengkap Membina Laman Web Menggunakan NVU 2010 Untuk table yang kedua, kita perlukan kolumn yang agak kecil yang berwarna biru sebagai navigasi kita. Jadi, Kita akan resize 1st kolumn dalam table baru kita dan jadikan ia berwarna biru. 12. Pilih 1st kolumn dalam table baru anda dan klik di dalamnya. 13. Klik kanan akan memaparkan kotak properties cell tersebut. 14. Klik pada background color dan pilih warna biru. Klik OK 15. Sekarang, isikan width, dalam kes ini kita mahukan cell menjadi lebar 120 pixes. Klik OK 16. Anda sepatutnya mempunyai column kecil berwarna biru di bawah header hijau anda. Dan selebihnya dalam 2nd tables berwarna putih. TAHNIAH!!! Anda telah berjaya menyiapkan Design asas. Sekarang mari kita lihat bagaimana untuk memasukkan teks kedalam kawasan putih dan bagaimana membuat navigasi. http://www.automarketing.ws/panduanbiz/ - Oleh : AzadAdvisor
  18. 18. Tutorial Lengkap Membina Laman Web Menggunakan NVU 2010 Tutorial 5: Asas Format Teks Format teks amat mudah dalam NVU. Jika anda biasa menggunakan Ms WORDS, maka memang tiada masalah untuk anda menggunakan NVU ini. 1. Untuk kesemua teks, anda boleh menggunakan Teks Bar dalam NVU. Untuk membuat teks yang berwarna, highlightkan teks yang anda mahu tukar warna kemudian klik pada foreground text color(kotak hitam sebagai contoh di bawah..) 2. Untuk menukar saiz Fonts, klik pada a atau A seperti ditunjukkan di bawah. 3. Untuk membuat teks italic, Bold atau Underline, klik pada B,I,U 4. Untuk tukar fonts yang anda gunakan, klik pada variable width. http://www.automarketing.ws/panduanbiz/ - Oleh : AzadAdvisor
  19. 19. Tutorial Lengkap Membina Laman Web Menggunakan NVU 2010 Untuk yang lain-lain, saya percaya anda memang biasa dengan menu untuk format teks ini. http://www.automarketing.ws/panduanbiz/ - Oleh : AzadAdvisor
  20. 20. Tutorial Lengkap Membina Laman Web Menggunakan NVU 2010 Tutorial 6: Pautan dan Navigasi Navigasi merupakan cara anda untuk bergerak daripada 1 page ke page yang lain. Adalah diingatkan bahawa laman utama anda selalu dinamakan sebagai INDEX samada INDEX.HTML, INDEX.HTM, INDEX.PHP, INDEX.ASP. Jadi, apabila membuat pautan ke laman utama, ia sepatutnya dipautkan dengan index dalam direktori anda. 1. Untuk membuat pautan teks, highlightkan teks yang anda mahu buat pautan kemudian klik pada Link Button. 2. Kemudian,masukkan seperti di bawah ini. Masukkan nama web, atau nama page yang anda ingin pautkan di dalam Link Properties Box. Tetpai haru diingat, setiap pautan mestilah dimulakan dengan HTTP:// http://www.automarketing.ws/panduanbiz/ - Oleh : AzadAdvisor
  21. 21. Tutorial Lengkap Membina Laman Web Menggunakan NVU 2010 ** Untuk membuat link di dalam local folder iaitu page ke – 2 anda. Apa yang perlu anda buat ialah hanya masukkan nama fail tersebut, e.g hubungikami.html ke ruang di sediakan seperti di atas. http://www.automarketing.ws/panduanbiz/ - Oleh : AzadAdvisor
  22. 22. Tutorial Lengkap Membina Laman Web Menggunakan NVU 2010 Tutorial 7: Memasukkan Imej Ikuti langkah seperti gambar di bawah cara untuk memasukkan imej. Seperti juga Ms Words. Klik pada choose file untuk mencari imej di dalam computer anda. Akhir sekali, Klik OK. http://www.automarketing.ws/panduanbiz/ - Oleh : AzadAdvisor
  23. 23. Tutorial Lengkap Membina Laman Web Menggunakan NVU 2010 Tutorial 8: Simpan dan Publishkan ke Web 1. Apabila anda mahu memulakan projek website, Buat 1 folder di desktop dan namakan sama seperti nama web anda. Kemudian, pastikan untuk masukkan dan sava SEMUA fail website anda di dalam folder tersebut, termasuklah fail imej. 2. Selepas anda selesai dengan page anda, save page tersebut. Pastikan page tadi telah disimpan dalam folder website anda tadi. 3. Klik Butang Publish. 4. Untuk Upload Folder Web anda menggunakan FTP, sila lihat TUTORIAL FTP Seperti yang disediakan. Jika anda ingin belajar dengan lebih praktikal teknik teknik membuat website, teknik promosi online, teknik pemasaran online anda boleh ikuti kursus di: http://automarketing.ws/kursus.html Senarai Tutorial : 1. Panduan Lengkap NVU 2. Panduan FTP – Upload file ke webserver 3. Panduan Pemasaran Online 4. Panduan Asas Photoshop – Membuat Header 5. Panduan GDI + TrafficWave http://automarketing.ws/panduanbiz/ http://www.automarketing.ws/panduanbiz/ - Oleh : AzadAdvisor

×