Membina Laman Web Mudah

Menggunakan Adobe Dreamweaver CS3

Oleh:
Shamsuddin B Ahmad
Jabatan Teknologi Pendidikan
IPG Kampus Sultan Mizan
22200 Besut, Terengganu
Emel: kbu2020@yahoo.com

A. Pengenalan
Anda tentu beranggapan bahawa membina dan menerbit laman web di internet adalah
sesuatu yang sukar dan memerlukan bayaran yang tinggi. Sangkaan anda itu tidak benar
sama sekali.
Membina laman web merupakan satu tugas yang mudah jika kita tahu cara dan teknik.
Memang dahulu kita terpaksa menggunakan kod-kod HTML untuk membina laman web
tetapi sekarang tidak perlu lagi menghafal kod HTML dan menaip kod dengan adanya
perisian pembinaan laman web seperti FrontPage, Dreamweaver dan sebagainya.
Secara umumnya berikut adalah proses ataupun perkara yang perlu dilakukan bagi
membina laman web. Tidak kisahlah sama ada anda menggunakan perkhidmatan
percuma mahupun berbayar, langkahnya sama sahaja. Yang membezakannya ialah anda
perlu mengeluarkan duit atau tidak sahaja. Langkah-langkah pembinaan adalah mudah
kecuali di bahagian Perancangan Awal. Berikut disenaraikan langkah-langkahnya:
Memilih domain.
Memilih web hosting.
Perancangan awal
----- Menetapkan objektif dan tujuan
----- Menetapkan sasaran
----- Membuat penyelidikan dan menyediakan bahan
----- Melukis papan cerita

contoh lakaran papan cerita

Membina laman web. ( Untuk ini, kita akan menggunakan perisian pembinaan
laman web iaitu Adobe Dreamweaver )
Memuat naik fail laman web ke web host. ( untuk ini kita akan menggunakan
perisian ftp percuma iaitu filezilla.)
Promosi laman web.

B. Perancangan sebelum membina laman web

Sebagaimana telah saya maklumkan di dalam kelas, pemilihan domain dan webhosting
(tapak) tidaklah menjadi satu masalah yang besar. Perkara yang paling penting dalam
membina laman web ialah langkah-langkah pra pembinaan. Kita perlu menjawab
Membina Laman Web Menggunakan Dreamweaver CS3 - 20100615.docx :- Syamsuddin BA JTP, IPG KSM m.s. 2; 15 June 2010

beberapa persoalan seperti Apakah objektif dan tujuan pembinaan laman web
berkenaan. Contohnya, jika kita ingin membina laman web tadika Kemas kampung kita.
Jadi, apakah objektif dan tujuannya? Boleh jadi untuk membolehkan ibu bapa mendapat
maklumat terkini tentang kelas kemas, tentang pencapaian anak-anak, tentang aktiviti
anak-anak dsb. Selain daripada itu, kita mahu masyarakat setempat mengetahui aktivitiaktiviti yang dijalankan. Seterusnya, adakah kita mahu KEMAS daerah, KEMAS Negeri
dan Kementerian yang berkaitan. tahu tentang pencapaian kita, tentang aktiviti kita dan....
Itu dah sampai ke langkah menetapkan sasaran... siapa yang hendak melihat laman web
kita... Jadi, kita kena buat penyelidikan tentang bagaimana menghasilkan laman web yang
menarik untuk kumpulan sasar yang kita pilih. Seterusnya, kita perlu mencari
(menyediakan) bahan-bahan yang perlu sama ada tentang kandungan yang akan
disampaikan atau gambar-gambar, suara dan klip video yang bersesuaian. Dah ada
semua tu, bolehlah kita ambil pen dan beberapa helai kertas untuk kita buat papan cerita
iaitu layout laman-laman yang akan dibina ...

C. Pembinaan Laman Web Bahagian I

Bagi pembinaan Laman Web Bahagian ini, kita akan fokuskan kepada pembinaan laman
web bentuk statik. Sehubungan itu, kita tidak perlu membuat instalasi Web Server dan
tidak perlu juga membina site sebagaimana yang perlu dilakukan jika jka hendak
membina laman web dinamik. Kita akan menggunakan Dreamweaver kerana kemahiran
yang akan diperolehi nanti akan memudahkan kita untuk membina laman web dinamik.
Saya berharap agar semua sudah membuat instalasi Dreamweaver trial version. OK, kita
boleh mulakan sekarang.
Perkara pertama yang perlu dilakukan ialah membuat / membina satu folder di
dalam MyDocument atau di mana-mana folder yang bersesuaian dengan
nama websaya. Di dalam menamakan folder, subfolder dan fail-fail, anda
perlu menggunakan huruf kecil. Jangan sesekali menggunakan ruang kosong
dan lain-lain huruf (character) seperti koma, tanda sengkang dan sebagainya
selain daripada huruf a hingga z!. Folder ini akan dikenali sebagai Local Root
Folder. Folder ini akan digunakan untuk menyimpan semua fail html yang
berkaitan dengan pembinaan laman web ini dan semua fail persembahan
powerpoint, fail dokumen serta lain-lain fail yang akan dignakan untuk
membuat pautan nanti. Seterusnya bina satu subfolder di dalam folder
websaya dengan nama images. Masukkan (salin) semua fail mej dan
gambar yang akan kita gunakan untuk membina laman web ke dalam folder
images tadi. Pastikan bahawa gambar-gambar dan grafik yang hendak
dimasukkan ke dalam laman web nanti disalin ke dalam folder ini bagi
memastikan ianya dipaparkan apabila laman web anda di letakkan di server
pelayan di internet nanti.

Membina Laman Web Menggunakan Dreamweaver CS3 - 20100615.docx :- Syamsuddin BA JTP, IPG KSM m.s. 3; 15 June 2010

Buka perisian Dreamweaver dengan cara mengklik pada ikon dreamweaver

pada Desktop atau Klik ikon Start, pilih All Programs dan klik pada ikon Adobe
Dreamweaver CS3. Sepatutnya perisian akan membuka fail baru apabila
ianya dibuka. Jika tidak, buka fail baru dengan cara mengklik pada menu
FILE dan pilih NEW. Tetingkap New Document sebagaimana di bawah
akan muncul. Pilih Blank Page, klik HTML dan klik Create

Anda akan dipaparkan dengan satu laman baru dengan nama Untitled-x
sebagaimana di bawah. Mari kita terlebih dahulu mengenali antaramuka
Dreamweaver CS3. Selain daripada yang ditunjukkan, ada beberapa lagi
komponen yang akan dijelaskan kemudian.

Bar Menu
Ruang Kerja

Bar Title
Panel Group

Properties Inspector

Panel Files

Membina Laman Web Menggunakan Dreamweaver CS3 - 20100615.docx :- Syamsuddin BA JTP, IPG KSM m.s. 4; 15 June 2010

Terdapat tiga pilihan jenis paparan view yang boleh anda pilih iaitu Code
View, Design dan Split View. Code View membolehkan anda menaip
arahan-arahan pengaturcaraan coding manakala Design View
membolehkan anda membina laman web tanpa menaip arahan-arahan
pengaturcaraan coding.

Code View

Design View

Klik ikon Design

View untuk
melihat paparan
Design View

Tetapan Page Properties perlu dilakukan untuk mengubah bentuk atau

format sesuatu laman. Untuk membuat Tetapan Page Properties, pastikan
anda tidak membuat highlight/ terpilih pada mana-mana komponen yang
telah diselit seperti TABLE, grafik dan teks. Paparan Properties Inpector
sebagaimana di bawah akan dipaparkan di bawah kawasan ruang kerja. Klik
pada ikon Page Properties untuk membuat tetapan muka surat atau laman
semasa.
Klik ikon Page Properties

Tetingkap Page Properties sebagaimana di bawah akan muncul. Perkara

paling utama yang patut dibuat
tetapan ialah Margin Kiri dan
Margin Atas serta Background
Colour atau Background Image.
Di bawah kategori Title/Encoding,
anda juga boleh memberi tajuk
title laman web/ muka laman ini
dengan menaipkan di dalam
kekotak teks di sebelah kanan
title menggantikan perkataan
Untitled Document. Tajuk yang
diberi hendaklah bersesuaian
Membina Laman Web Menggunakan Dreamweaver CS3 - 20100615.docx :- Syamsuddin BA JTP, IPG KSM m.s. 5; 15 June 2010

dengan kandungan laman berkenaan. Tajuk laman juga boleh dimasukkan

melalui kekotak teks title yang berada di bahagian atas ruang kerja dan
disebelah kanan ikon Design View.

Walau pun anda hanya membina suatu laman web yang ringkas, anda masih
perlu membuat lakaran bentuk paparan laman web anda. Buatlah keputusan
di mana anda ingin meletakkan tajuk-tajuk, gambar-gambar, butang-butang
navigasi dan teks yang akan dipaparkan. Kebanyakan laman web
mempunyai bentuk paparan yang sama untuk setiap laman. Contohnya tajuk
utama web biasanya diletakkan di ruangan atas sebelah kiri atau tengah pada
setiap laman manakala butang navigasi diletakkan secara menegak disebelah
kiri atau secara mendatar di bawah tajuk utama. Selain daripada membuat
lakaran storyboard paparan laman web, anda juga perlu menetapkan berapa
laman yang diperlukan. Perancangan yang teliti bukan sahaja memudahkan
proses pembinaan laman web malah ianya perlu untuk memperolehi laman
web yang menarik.

Ruang kerja Dreamweaver tidak mengizinkan anda memasukkan/ meletakkan

apa jua komponen seperti teks dan grafik di mana-mana lokasi yang anda
suka. Bagi membolehkan anda meletakkan sesuatu komponen ditempat yang
dipilih, anda perlu menggunakan jadual TABLE yang tidak memaparkan
garisan-garisan. Penggunaan TABLE akan memudahkan anda untuk
membuat format paparan sebagaimana yang diinginkan.Semua kandungan
yang hendak dimasukkan ke dalam setiap laman hendaklah dimasukkan ke
dalam satu TABLE yang besar. Penggunaan TABLE membantu anda
membahagikan ruang-ruang di laman web anda. Untuk memasukkan
TABLE, klik pada menu insert dan pilih Table. Tetingkap Table akan
muncul sebagaimana di bawah.

Membina Laman Web Menggunakan Dreamweaver CS3 - 20100615.docx :- Syamsuddin BA JTP, IPG KSM m.s. 6; 15 June 2010

Berpandukan lakaran (storyboard) di atas, masukkan satu TABLE besar

(utama) yang mempunyai 1 lajur dan 3 baris. Oleh kerana kita akan membina
laman web yang
mempunyai kelebaran
yang tetap, tukarkan
TABLE width kepada
pixel dan masukkan
kedalam kekotak
TABLE width angka
980. Lebar 980 sesuai
untuk resolusi skrin
1024x768. Masukkan ke
dalam Border thickness
nilai kosong untuk tidak
memaparkan garisangarisan TABLE.
Seterusnya kita perlu
masukkan satu TABLE
kecil di dalam baris
ketiga yang mempunyai
2 lajur dan 1 baris.
Tetapkan TABLE width
kepada 100 percent.
Akhirnya, masukkan satu TABLE dengan 1 lajur dan 2 baris ke dalam sel
sebelah kanan bagi TABLE yang kedua tadi. Hasilnya ialah sebagaimana
paparan di bawah:

Garis biru: Table pertama

Garis Hijau: Table kedua yang terletak dalam baris ketiga TABLE pertama
Garis merah: Table ketiga yang dimasukkan kedalam lajur kedua TABLE kedua
Membina Laman Web Menggunakan Dreamweaver CS3 - 20100615.docx :- Syamsuddin BA JTP, IPG KSM m.s. 7; 15 June 2010

Paparan ketiga-tiga TABLE yang telah dimasukkan

Anda boleh menukar tetapan untuk mana-mana sel di dalam suatu TABLE
dengan mengklik pada <td>. Untuk memilih baris dan menukar tetapan baris
row, klik pada <tr> manakala untuk menukar tetapan pada suatu TABLE,
klik pada <TABLE>. Untuk memilih TABLE yang paling dalam,
- klik @ letak kursor dalam mana-mana sel bagi TABLE berkenaan.
- Untuk memilih TABLE ketiga iaitu peringkat paling dalam, klik pada
<TABLE> yang berada pada tempat ketiga dari kiri. Table berkenaan
terus di highlight dan tetingkap PROPERTIES INSPECTOR
memaparkan properties untuk TABLE yang dipilih.

1
2

Membina Laman Web Menggunakan Dreamweaver CS3 - 20100615.docx :- Syamsuddin BA JTP, IPG KSM m.s. 8; 15 June 2010

Langkah paling penting yang perlu dilaksanakan awal-awal lagi ialah

menyimpan fail yang sedang
diedit. Klik pada menu File dan
pilih Save. Tetingkap Save
As akan dipaparkan
sebagaimana disebelah. Laman
utama biasanya dinamakan
dengan nama index.html jadi,
namakan fail dengan nama
index.html. Ingat, nama fail
haruslah dengan huruf kecil
dan tidak ada ruang kosong
atau apa-apa character selain
daripada huruf a hingga z.
Simpan fail berkenaan dalam
folder websaya yang telah
dibina dalam langkah 01.

Langkah seterusnya ialah memasukkan tajuk @ header. Saya telah membina

satu grafik (header) yang mempunyai kelebaran sebanyak 980 piksel. Saya
namakan sebagai header.jpg dan meletakkannya di dalam sub-folder images.
Jika anda tidak mahir dengan perisian grafik untuk membuat header atau title,
buat lakaran header yang anda kehendaki dan anda boleh meminta tolong
rakan guru yang mahir mana-mana perisian grafik untuk membuatnya.
Pastikan lebar atau width grafik header berkenaan ialah 980 piksel. Untuk
memasukkan header pada
baris pertama TABLE paling
luar, letakkan kursor di dalam
sel berkenaan. Klik menu
INSERT dan pilih Image.

Tetingkap Select Image

Source dipaparkan. Klik pada
folder images dan pilih fail
header.jpg. Klik butang OK. Tetingkap Image Tag Accessibility ... muncul.
Klik OK. Paparan laman web adalah sebagaimana di bawah:

Membina Laman Web Menggunakan Dreamweaver CS3 - 20100615.docx :- Syamsuddin BA JTP, IPG KSM m.s. 9; 15 June 2010

Langkah seterusnya ialah memasukkan menu dalam baris kedua. Buat

permulaan, kita akan memasukkan menu bentuk teks. Apabila anda mahir
nanti, bolehlah anda
gantikan menu bentuk teks
kepada bentuk lain seperti
rollover images atau
Navigation Bar atau Flash. Untuk memasukkan menu bentuk teks ke dalam
baris kedua TABLE paling luar, kita perlu
memasukkan satu TABLE yang mempunyai
1 baris dan 7 lajur. Letakkan kursor dalam sel
pada baris kedua, klik menu INSERT dan
pilih TABLE. Tetapkan nilai Rows=1,
Column=7, Table Width=100 percent dan Border thickness=0 pixel.
Seterusnya taipkan kedalam ketujuh-tujuh sel teks menu sebagaimana

lakaran storyboard. Untuk menukar font teks Home, highlight teks Home.
Tukar font kepada Verdana, Size=small, warna=#0000FF (biru),
Horz=Center, Vert=Middle.
Lakukan langkah di aas untuk
kesemua menu yang ada. Kali ini,
anda tidak perlu menukar satu
persatu Font, Size dan

Membina Laman Web Menggunakan Dreamweaver CS3 - 20100615.docx :- Syamsuddin BA JTP, IPG KSM m.s. 10; 15 June 2010

sebagainya. Anda hanya perlu highlight pada teks Tentang Saya pilih
style1 iaitu style untuk teks Home. Walaubagaimanapun, anda masih perlu
menetapkan Horz=Center dan Vert=Middle. Hasilan sebagaimana di bawah.

Jika diperhatikan pada lakaran storyboard, lajur untuk ruangan teks adalah
lebih besar daripada lajur yang akan
dimasukkan gambar tentang saya.
Oleh itu, untuk membesarkan lajur kiri
dan seterusnya mengecilkan lajur
kanan, anda perlu tunjukkan kursor
pada garis menegak di antara keduadua lajur berkenaan. Kursor akan
bertukar bentuk kepada imej anak
panah ke-kiri dan ke-kanan yang
dipisahkan oleh dua garis menegak.
Untuk membesarkan lajur sebelah kiri, seret kursor kesebelah kanan. Semasa
membuat seretan, perhatikan angka yang membesar nilainya disebelah atas
lajur sebelah kiri, manakala angka di sebelah atas lajur sebelah kanan
mengecil. Berhenti menyeret apabila angka pada atas lajur sebelah kanan
mencecah nilai lebih kurang 348 yang bermaksud lebar lajur sebelah kanan
ialah 348 piksel. Ianya akan secara otomatik membesarkan lajur sebelah kiri
dan mengecilkan lajur sebelah kanan.

Seterusnya kita akan

memasukkan imej atau
gambar tentang saya ke
dalam sel sebelah atas bagi
TABLE ketiga (paling dalam).
Letakkan kursor ke dalam sel
berkenaan, klik menu
INSERT, pilih image. Dwiklik
pada subfolder images dan
pilih fail imej yang akan
diselit. Dalam kes saya, imej
yang akan diselit mempunyai
lebar sepanjang 600 piksel.
Ini dapat diketahui dengan cara menunjukkan kursor ke atas fail berkenaan,
Membina Laman Web Menggunakan Dreamweaver CS3 - 20100615.docx :- Syamsuddin BA JTP, IPG KSM m.s. 11; 15 June 2010

satu tetingkap kecil akan dipaparkan yang memberitahu tentang Dimension

(panjang x lebar), Type (jenis) dan size (saiz) fail yang dihighlight. Dalam
keadaan sebenar, kita harus mengecilkan dimensi fail kepada kurang
daripada 348 piksel kerana itulah lebar lajur yang akan dimasukkan fail
gambar berkenaan. Setelah fail dihighlight, anda boleh menekan kekunci
ENTER atau klik OK. Klik OK sekali lagi untuk memasukkan gambar. Jika
diperhatikan, lajur sebelah kanan kembali membesar. Untuk mengecilkan
kembali, kita harus mengecilkan dimensi gambar. Klik pada gambar dan seret
pepenjuru ke dalam untuk mengecilkan gambar. Gambar mungkin akan
distort sama ada orang di
dalam gambar mengurus
atau menggemuk. Cara
mengecilkan gambar
sebegini tidak disyorkan
kerana selain daripada
masalah distortion, saiz fail
yang besar juga akan
melambatkan laman web
berkenaan untuk dibuka.
Anda mungkin perlu seret
sekali lagi lajur untuk mengecil atau membesarkan lajur. Hasil sepatutnya
sebagaimana di bawah.

Untuk memasukkan teks penerangan di bawah gambar, klik pada gambar,

tekan kekunci panah arah kanan dan tekan kekunci ENTER serentak dengan
kekunci SHIFT atau ringkasnya tekas kekunci
SHIFT+ENTER.Taipkan teks penerangan
tentang gambar. Highlight teks dan ubah
PROPERTIES teks di ruangan PROPERTIES
INSPECTOR
Apabila kekunci ENTER ditekan, kursor
akan ke bawah DUA langkau, manakala
apabila kekunci SHIFT+ENTER ditekan,
kursor akan ke bawah SATU langkau.

Membina Laman Web Menggunakan Dreamweaver CS3 - 20100615.docx :- Syamsuddin BA JTP, IPG KSM m.s. 12; 15 June 2010

Dalam membina suatu laman web, ia seharus nampak simple yang

bermaksud tidak crowded. Untuk itu, kita tidak seharusnya meletakkan
semua kandungan ke dalam satu laman. Perkara paling istimewa berkenaan
laman web ialah kebolehannya untuk membuat pautan. Jadi, kita harus
pisahkan kandungan kepada kategori/ bahagian tertentu dan membuat
pautan. Dalam lakaran storyboard, saya telah membuat menu dalam baris
kedua selepas header @ tajuk. Apabila HOME di klik, laman web akan
membuka laman HOME yang mana dalam kes saya, ianya fail index.html.
Oleh itu, untuk membuat pautan hyperlink pada teks HOME, SELECT atau
HIGHLIGHT teks HOME dan pada ruangan PROPERTIES INSPECTOR,
taipkan index.html ke dalam kekotak teks links.

Sudah semestinya anda telah membuat lakaran STORYBOARD untuk

kesemua laman. Bagi saya, laman Tentang Saya akan disimpan ke dalam fail
tentangsaya.html. Fail-fail berkenaan saya namakan tanpa ada ruang
kosong. Seterusnya, untuk membuat pautan pada menu Tentang Saya, saya
highlight teks menu Tentang Saya dan seterusnya saya isikian kekotak teks
LINK dalam PROPERTIES INSPECTOR dengan nama fail
tentangsaya.html. Jika diperhatikan, teks yang mempunyai pautan
dipaparkan dengan garis bawah. Lakukan untuk semua menu yang ada di
baris ke dua.

Seterusnya, anda bolehlah masukkan semua maklumat seperti yang telah

anda lakarkan dalam STORYBOARD. Apabila selesai, dan disimpan fail
berkenaan, anda bolehlah menggunakan fail berkenaan sebagai templat
untuk membina fail-fail lain. Pastikan fail yang anda buat sebagai templat
betul-betul baik kerana pembetulan kemudian akan menyebabkan kesusahan
untuk menyunting kesemua laman. Untuk menyimpan fail dengan nama lain,
anda klik pada menu FILE dan pilih SAVE AS. Taipkan nama fail baru dan klik
OK.

Membuat Preview laman web yang telah anda buat adalah sangat mudah.
Buka folder websaya dan dwiklik pada fail index.html. Laman web anda
akan dipaparkan menggunakan Default Explorer.

Membina Laman Web Menggunakan Dreamweaver CS3 - 20100615.docx :- Syamsuddin BA JTP, IPG KSM m.s. 13; 15 June 2010

Itulah pengakhiran untuk Bahagian I. Untuk Bahagian II nanti, kita akan teruskan
pembelajaran dengan mempelajari cara-cara untuk mengindahkan lagi laman web
termasuk juga dengan penggunaan CSS dan templat sedia ada dalam Adobe
Dreamweaver. Juga akan ditunjukkan cara-cara untuk memasukkan rollover images dan
sebagainya.
Anda juga boleh dapatkan nota yang telah saya buat tentang bagaimana untuk muatnaik
laman web ke internet menggunakan perisian FTP iaitu filezilla di laman web JTP iaitu di
http://www.mizanis.net/jtp/.

Sekian. Semoga segala ilmu dan kemahiran yang diperolehi dapat digunakan sebaik mungkin.
Jika ada cadangan pembetulan, atau kemusykilan (masalah) atau ucapan terima kasih, sila
emelkan kepada kbu2020@yahoo.com .
Terima kasih.
Shamsuddin Ahmad
JTP, IPG Kampus Sultan Mizan, Besut

Membina Laman Web Menggunakan Dreamweaver CS3 - 20100615.docx :- Syamsuddin BA JTP, IPG KSM m.s. 14; 15 June 2010