tutorial lengkap membina lawan web menggunakan nvu

Tutorial Lengkap Membina Laman Web Menggunakan NVU 2010

http://www.automarketing.ws/panduanbiz/ - Oleh : AzadAdvisor

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



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.



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



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.



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.



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



12. Akan dipaparkan Publishing is complete dan tutup paparan tersebut.

Bermakna anda telah berjaya.



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.



Gambar di atas ialah layout yang biasa digunakan dalam pembinaan laman

web.



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.



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.



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.



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)



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.



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:



Mengimbas semula sketch kita tadi, kita mahukan layout seperti yang telah

kita sketchkan.



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.



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.



Untuk yang lain-lain, saya percaya anda memang biasa dengan menu untuk

format teks ini.



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://



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



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.



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/

tutorial lengkap membina lawan web menggunakan nvu

Business