Tutorial lengkap membina lawan web menggunakan nvu

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


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

Recommended

Recommended

More Related Content

Recently uploaded

Recently uploaded (12)

Featured

Featured (20)

Tutorial lengkap membina lawan web menggunakan nvu