Transform any presentation into ready-made study material—select from outputs like summaries, definitions, and practice questions.
1 of 46
Downloaded 108 times
More Related Content
Modul pembelajaran dreamweaver mx 2004 v1
1. pusat perkembangan kurikulum
kementerian pendidikan malaysia
2006
®
®
pusat perkembangan kurikulum
kementerian pendidikan malaysia
2002
m o d u l p e m b e l a j a r a n
g r a f i k b e r k o m p u t e r
d a n
p r o d u k s i m u l t i m e d i a
2. Cetakan Pertama Dan Kedua 2003
Cetakan Ketiga 2006
Kementerian Pelajaran Malaysia
Hak Cipta Terpelihara. Tidak dibenarkan mengeluarkan ulang mana-mana bahagian artikel, ilustrasi dan
isi kandungan buku ini dalam apa jua bentuk dan dengan apa jua sama ada secara elektronik, fotokopi,
mekanik, rakaman, atau cara lain sebelum mendapat izin bertulis daripada Pengarah, Pusat
Perkembangan Kurikulum, Kementerian Pelajaran Malaysia, Pesiaran Duta off Jalan Duta, 50604 Kuala
Lumpur..
Perpustakaan Negara Malaysia Data Pengkatalogan Dalam Penerbitan
Malaysia. Pusat Perkembangan Kurikulum
Modul Pembelajaran Grafik Berkomputer
Pusat Perkembangan Kurikulum
Kementerian Pelajaran Malaysia
1. Modul Macromedia Dreanweaver 2. Aplikasi Perisian Multimedia dan Grafik 3. Judul
3. PENDAHULUAN
Setiap murid berupaya untuk menguasai perkara yang
dipelajari dan tahap penguasaan ini adalah
bergantung kepada pendekatan pengajaran dan
pembelajaran yang digunakan. Pengajaran dan
pembelajaran bermodul merupakan satu pendekatan
yang memberi peluang kepada murid untuk maju
mengikut kebolehan dan kadar pembelajaran mereka
sendiri. Dengan ini, murid-murid akan dapat
mempertingkatkan penguasaan pembelajaran ke
tahap yang maksimum.
Modul ini mengandungi penerangan dan tata cara
melaksanakan sesuatu arahan dalam perisian
Macromedia Dreamweaver®
. Adalah diharapkan ia
dapat membimbing dan membantu guru dan murid
untuk menguasai pengetahuan dan kemahiran
aplikasi Macromedia Dreamweaver ®
.
Penting:
Bagi tujuan penaksiran mata pelajaran Grafik
Berkomputer dan Produksi Multimedia, guru-guru
adalah diingatkan supaya merujuk kepada
kompetensi yang ditetapkan oleh Lembaga
Peperiksaan bagi mengetahui kemahiran-kemahiran
yang dinilai.
4. KANDUNGAN
muka surat
UNIT 1
Pengenalan dan Menetapkan Tapak Laman 1
UNIT 2
Page Properties, Paparan Laman dan Menyimpan Fail 4
UNIT 3
Imej Sebagai Latar Laman 6
UNIT 4
Teks 8
UNIT 5
Grafik 10
UNIT 6
Jadual 12
UNIT 7
Pautan (Teks) 15
UNIT 8
Pautan (Imej) 17
UNIT 9
Pautan e-Mel 19
UNIT 10
Pautan (Hotspot) 22
UNIT 11
Pautan (Rollover Image) 24
UNIT 12
Layer 26
UNIT 13
Anchor 29
UNIT 14
Pop up Message 32
UNIT 15
Animasi Flash 35
UNIT 16
Animasi 37
UNIT 17
Frame 40
5. Unit 1 : Pengenalan dan Menetapkan Tapak Laman
Objektif
Selepas mengikuti unit pembelajaran ini, murid dapat:
• Memulakan perisian Macromedia Dreamweaver
• Menetapkan tapak laman (define site)
Menggunakan Dreamweaver MX 2004
Sebelum anda membina laman web menggunakan Dreamweaver, anda dinasihatkan untuk
mencipta ‘folder’ terlebih dahulu untuk memudahkan anda menguruskan fail-fail anda serta
melicinkan proses muatnaik semua fail anda ke pelayan yang telah anda pilih. Kegagalan anda
berbuat demikian boleh mengakibatkan kandungan laman anda tidak dapat dipaparkan
dengan sempurna.
‘Folder’ boleh dicipta seperti berikut:
1. Mulakan Windows Explorer.
2. Cipta folder baru pada pemacu cakera keras c: dengan nama misalnya ‘BelajarWeb’. Di
bawah folder belajar web, cipta beberapa folder baru misalnya ‘imej’ untuk
menempatkan imej-imej bagi laman anda, ‘audio’ untuk menempatkan fail-fail audio
yang anda gunakan dalam laman anda serta folder lain yang difikirkan perlu.
Peringatan : Sekiranya anda mencipta folder sebagaimana contoh di atas, maka folder
seperti ‘imej’, ‘audio’ dan folder lain yang anda cipta turut perlu dicipta pada pelayan
yang telah anda pilih untuk menempatkan laman anda.
Memulakan Dreamweaver
1. Klik pada butang Start.
2. Klik pada butang Programs > Macromedia > Macromedia Dreamweaver MX 2004
7. Menetapkan tapak laman (define site)
Langkah-langkah:
1. Klik Dreamweaver Site....
2. Paparan-paparan berikut akan dipaparkan. Sila ikut contoh-contoh di bawah.
(a) (b)
(c) (d)
(e)
Klik butang Next Klik butang Next
Klik butang Next Klik butang Next
Klik butang Done
8. 3. Paparan berikut akan muncul.
Refleksi
Adakah terdapat cara yang lain daripada yang diterangkan di atas untuk memulakan
program Macromedia Dreamweaver ?
9. Unit 2 : Page Properties, Paparan Laman dan Menyimpan Fail
Objektif
Selepas mengikuti unit pembelajaran ini, murid dapat:
• Menggunakan fungsi ‘Page Properties’.
o Menetapkan tajuk pada muka surat laman.
o Menetapkan warna latar belakang laman.
• Memaparkan laman pada default browser atau pelayar internet.
• Menyimpan fail dalam cakera keras
Langkah-langkah:
1. Mulakan perisian Macromedia Dreamweaver.
2. Taipkan tajuk pada ruangan Title seperti Komputer.
3. Klik menu Modify > Page Properties. Paparan seperti di bawah akan dipaparkan.
4. Tukarkan
a) Page font = ‘Arial, Helvetic, sans-serif’
b) Size = ‘12’
c) Text color = ‘#000000’
d) Background = ‘#FFFF99’
dan klik pada butang OK.
5. Paparan akan kelihatan seperti di bawah
10. 6. Tekan kekunci F12 atau klik pada menu File > Preview in Browser > Pilih Browser yang
ada. (Cth browser : IEEXPLORER atau NETSCAPE NAVIGATOR)
7. Tutup pelayar web anda.
8. Tukarkan warna latar kepada putih dengan menggunakan cara yang sama.
9. Klik pada menu File > Save As .
10. Browse kepada folder yang telah anda cipta iaitu ‘BelajarWeb’ dan taipkan
‘lamanpertama’ pada ruangan File name. Pastikan di ruangan Save as type adalah All
Documents atau HTML Documents
11. Klik pada butang Save.
Refleksi
1. Bolehkan tajuk muka surat laman diubah?
2. Bolehkan warna latar laman diubah tanpa membuka tetingkap page properties?
11. Unit 3 : Imej Sebagai Latar Laman
Objektif
Selepas mengikuti unit pembelajaran ini, murid dapat menggunakan imej sebagai latar.
Langkah-langkah :
1. Buka program Macromedia Dreamweaver. Kilk Create > HTML. Isikan tajuk laman
sebagai ‘Imej Latar’ pada ruangan Title.
2. Klik pada Modify > Page Properties. Pada ruangan Background Image, klik pada
butang Browse. Cari lokasi CD modul pembelajaran yang telah dibekalkan kepada
anda. Contohnya, Cd anda berada pada Local disk D. Klik pada Folder Dreamweaver
> Fail Sumber. Pilih fail latar.gif dan klik butang OK.
3. Kemudian, paparan seperti bawah akan kelihatan.
4. Anda dikehendaki klik butang Yes.
5. Selepas itu, satu lagi paparan akan kelihatan. Anda perlu mewujudkan satu folder untuk
menyimpan semua imej yang anda gunakan di dalam laman web anda dengan
menekan ikon Create new folder seperti yang ditunjukkan di bawah. Namakan folder
baru anda dengan nama imej.
6. Klik dua kali pada folder imej. Klik butang Save.
Create new
folder
12. 7. Laman anda akan bertukar seperti berikut :
8. Simpan fail anda sebagai ‘imejlatar.htm’ dalam folder ‘BelajarWeb’ yang telah anda
cipta.
Refleksi
1. Adakah dua imej yang berlainan boleh digunakan sebagai latar laman?
13. Unit 4 : Teks
Objektif
Selepas mengikuti unit pembelajaran ini, murid dapat memasukkan teks dan memformatkan
teks di dalam laman.
Langkah-langkah:
1. Buka fail ‘lamanpertama.htm’ yang telah dibina.
2. Taipkan perkataan ‘Komputer’ dan tekan enter.
3. Taipkan frasa ‘Peranti Komputer’ dan tekan shift + enter.
4. Taipkan frasa ‘Peranti Input dan Output’.
Nota : Enter akan membina tag paragraph (<p>) manakala shift + enter akan
menghasilkan tag break (<br>).
5. Ubah format teks sebagaimana yang ditunjukkan :
Komputer : Jenis fon = Arial
Saiz fon = 24 pixels
Format fon = Bold
Penjajaran = Tengah (align center)
Warna fon = Merah
Peranti Komputer
Peranti Input dan Output : Jenis fon = Default Font
Saiz fon = 14 pixels
Format fon = Italic
Penjajaran = Tengah (align center)
Warna fon = Biru
14. Mengubah Jenis Fon
Mengubah Saiz Fon
Mengubah Warna Fon
Bold/Italic
Penjajaran Teks
6. Untuk mengubah format pada teks, butang yang terdapat pada tetingkap properties
boleh digunakan. Highlight teks yang hendak diubah dan klik pada butang berikut :
7. Simpan fail anda dengan nama yang sama dengan mengklik pada menu File > Save
atau menekan kekunci Ctrl + S.
8. Uji laman yang telah anda bina dengan menekan kekunci F12.
Refleksi
1. Apakah perbezaan antara menggunakan enter dan shift + enter?
2. Selain daripada menggunakan butang yang terdapat pada tetingkap page properties,
adakah terdapat cara untuk menjajarkan teks?
15. Unit 5 : Grafik
Objektif
Selepas mengikuti unit pembelajaran ini, murid dapat memasukkan grafik ke dalam laman.
Langkah-langkah :
1. Buka fail ‘lamanpertama.htm’.
2. Pastikan kursor anda berada di hujung perkataan ‘Output’ dan tekan enter.
3. Klik pada butang Insert Image dan pilih fail imej ‘komputer.jpg’ yang terdapat di dalam
CD anda. Imej tersebut akan terpapar pada ruangan Image Preview.
4. Pilih butang select dan imej akan terpapar pada laman anda.
5. Simpan fail anda menggunakan nama yang sama dengan klik pada menu File > Save
atau dengan menekan Ctrl + S.
6. Uji laman anda dengan menekan kekunci F12.
Refleksi
Apakah yang akan berlaku sekiranya satu grafik dimasukkan di tengah-tengah teks?
16. Unit 6 : Jadual
Objektif
Selepas mengikuti unit pembelajaran ini, murid dapat:
• Membina jadual (table).
• Memasukkan data ke dalam jadual (table).
• Memformat jadual.
Langkah-langkah :
1. Buka fail ‘lamanpertama.htm’ yang telah dibuat.
2. Pastikan kursor anda berada di bawah imej komputer yang telah anda masukkan ke
dalam laman anda.
3. Klik pada butang Table.
4. Satu tetingkap akan muncul. Isikan perkara berikut :
Rows : 4 (Bilangan baris)
Columns : 2 (Bilangan kolum)
Table width : 250 (lebar jadual) dan pilih pixels pada menu tarik turun.
Border thickness : 1 (Ketebalan garis) – Sekiranya ketebalan diletakkan
0, maka garisan jadual tidak akan kelihatan apabila
laman dilihat pada mana-mana browser atau pelayar internet.
5. Klik pada butang OK.
Table
17. Klik
6. Untuk menjajarkan jadual ke tengah laman, klik butang Align pada tetingkap
Properties dan pilih center.
7. Klik pada butang di sebelah kanan untuk memaparkan lebih banyak pilihan butang
pada tetingkap ‘table properties’.
8. Untuk menukar warna latar keseluruhan jadual, klik pada mana-mana garisan jadual
dan klik pada butang Bg Color.
9. Untuk menukar warna garisan jadual, klik pada butang Brdr Color.
Klik untuk tutup
Warna latar jadual Warna garisan jadual
‘Browse’ imej sebagai latar jadual
Klik Menukar warna garisan jadual
Klik untuk buka
18. 10. Untuk menukar warna latar pada petak yang tertentu dalam jadual, highlight petak yang
berkenaan dan klik pada butang Bg.
11. Klik pada ruangan yang terdapat dalam petak jadual untuk memasukkan data ke dalam
jadual yang telah dibina seperti berikut :
12. Simpan fail anda dengan nama yang sama.
13. Uji laman anda dengan menekan kekunci F12.
Refleksi
Bolehkah bilangan baris dan kolum dalam jadual dibuang atau ditambah?
Klik
19. Unit 7 : Pautan (Teks)
Objektif
Selepas mengikuti unit pembelajaran ini, murid dapat membina pautan (link) ke laman yang
lain menggunakan teks.
Langkah-langkah :
1. Mulakan program Macromedia Dreamweaver. Kilk Create > HTML.
2. Taipkan ‘Tetikus’ pada ruangan Title.
3. Taipkan ayat yang berikut pada ruang kerja :
4. Jajarkan teks tersebut ke tengah laman (Align > center).
5. Masukkan imej ‘tetikus.jpg’ yang terdapat di dalam cd anda.
6. Simpan fail anda sebagai ‘tetikus.htm’.
7. Buka fail ‘lamanpertama.htm’ yang telah dibina.
Tetikus
Tetikus merupakan satu peranti input yang membolehkan pengguna
memasukkan data ke dalam komputer dengan cara mengklik butang pada
tetikus serta butang-butang yang terdapat pada antaramuka sesuatu
perisian yang digunakan.
20. 8. Highlight perkataan ‘Tetikus’ yang terdapat di dalam jadual (lamanpertama.htm). Pada
tetingkap properties, klik pada butang browse pada ruangan Link dan pilih fail
‘tetikus.htm’ pada tetingkap Select File.
9. Simpan fail anda dengan nama yang sama dengan menekan Ctrl + S.
10. Uji laman anda dengan menekan kekunci F12. Perhatikan apabila perkataan ‘Tetikus’
di klik, anda akan dihubungkan dengan laman ‘tetikus.htm’.
Refleksi
Apakah yang berlaku kepada perkataan ‘Tetikus’ yang anda guna sebagai pautan setelah di
klik semasa anda menguji laman anda?
Fail tetikus.htm Browser
21. Unit 8 : Pautan (Imej)
Objektif
Selepas mengikuti unit pembelajaran ini, murid dapat menggunakan imej sebagai pautan.
Langkah-langkah :
1. Mulakan program Macromedia Dreamweaver.
2. Taipkan ‘Pengimbas’ pada ruangan Title.
3. Taipkan ayat berikut pada ruang kerja :
4. Jajarkan teks tersebut ke tengah laman.
5. Masukkan imej ‘pengimbas02.jpg’ ke laman seperti di bawah.
6. Simpan fail ini sebagai ‘pengimbas.htm’.
7. Buka fail ‘lamanpertama.htm’ yang telah dibina.
8. Letakkan kursor di bahagian bawah jadual.
Pengimbas
Pengimbas atau ‘scanner’ merupakan satu peranti input yang boleh digunakan untuk
mengimbas sama ada grafik mahupun teks bagi digunakan sebagai sumber di dalam
komputer.
22. 9. Klik pada butang Image dan pilih fail ‘pengimbas01.jpg’ dari cd anda.
10. Klik pada butang Browse pada ruangan Link dan pilih fail ‘pengimbas.htm’ dan klik
butang OK.
11. Simpan fail anda dengan nama yang sama dengan menekan Ctrl + S.
12. Uji laman yang anda bina dengan menekan kekunci F12. Perhatikan apabila imej
pengimbas di klik, anda dihubungkan dengan halaman ‘pengimbas.htm’.
Klik
23. Unit 9 : Pautan e-Mel
Objektif
Selepas mengikuti unit pembelajaran ini, murid dapat:
• Membina pautan e-mel menggunakan teks.
• Membina pautan e-mel menggunakan animasi gif.
Aktiviti 1 : Menggunakan teks sebagai pautan e-mel
Langkah-langkah :
1. Mulakan program ‘Macromedia Dreamweaver’.
2. Buka fail ‘lamanpertama.htm’ yang telah dibina.
3. Letakkan kursor di bawah imej pengimbas yang digunakan sebagai pautan.
4. Klik pada butang Email Link.
5. Taipkan ‘E-mel’ pada ruangan Text dan taipkan alamat e-mel pada ruangan
E-mail, contohnya ‘ppk@ppk.moe.gov.my’ pada tetingkap E-mail Link dan klik OK.
Email Link
24. 6. Uji laman anda dengan menekan kekunci F12. Apabila anda mengklik pada ‘E-mel’,
perhatikan aplikasi e-mel dilancarkan secara automatik bagi membolehkan pengunjung
laman ini mengirim e-mel ke alamat yang telah anda taipkan.
Aktiviti 2 : Menggunakan imej sebagai pautan e-mel.
1. Anda masih berada pada fail ‘lamanpertama.htm’ dan letakkan kursor pada penghujung
perkataan ‘E-mel’ serta tekan spacebar.
2. Klik pada butang Image dan pilih fail ‘e-mel.gif’. Taipkan ‘mailto:’ dan diikuti oleh alamat
e-mel contohnya ‘mailto:ppk@yahoo.com’ pada ruangan Link pada tetingkap
Properties.
25. 3. Simpan fail anda dengan nama yang sama dengan menekan Ctrl + S.
4. Uji laman anda sekali lagi dengan menekan kekunci F12. Perhatikan pergerakan imej
animasi gif yang telah dimasukkan. Sekiranya imej tersebut di klik, aplikasi e-mel akan
dilancar secara automatik sebagaimana yang berlaku jika perkataan ‘E-mel’ diklik.
26. Unit 10 : Pautan (Hotspot)
Objektif
Selepas mengikuti unit pembelajaran ini, murid dapat membina pautan menggunakan
hotspot.
Langkah-langkah :
1. Mulakan program Macromedia Dreamweaver.
2. Buka fail ‘lamanpertama.htm’ yang telah dibina.
3. Klik pada imej ‘komputer.jpg’ yang telah dimasukkan ke dalam laman ini dan klik pada
Polygon Hotspot Tool.
4. Klik pada setiap penjuru imej pengimbas yang terdapat di dalam gambar. Kemudian klik
pada butang Browse yang terdapat pada ruangan Link pada tetingkap Properties dan
pilih fail ‘pengimbas.htm’.
Klik
27. 5. Klik pada butang Browse yang terdapat pada ruangan Link pada tetingkap Properties
dan pilih fail ‘pengimbas.htm’.
6. Simpan fail dengan nama yang sama dengan menekan Ctrl + S.
7. Uji laman anda dengan menekan kekunci F12. Perhatikan apabila penunjuk digerakkan
ke arah imej pengimbas, ianya bertukar kepada bentuk tangan dan apabila diklik, anda
dihubungkan kepada laman ‘pengimbas.htm’.
Refleksi
Apakah yang akan berlaku sekiranya Rectangular Hotspot Tool atau Oval Hotspot Tool
digunakan berbanding Polygon Hotspot Tool?
Klik
28. Unit 11 : Pautan (Rollover Image)
Objektif
Selepas mengikuti unit pembelajaran ini, murid dapat membina pautan menggunakan
rollover image.
Langkah-langkah :
1. Buka program Macromedia Dreamweaver.
2. Buka fail ‘lamanpertama.htm’ yang telah dibina.
3. Letakkan kursor di sebelah imej pengimbas yang digunakan sebagai pautan dan tekan
space bar.
4. Klik butang Rollover Image.
5. Pada tetingkap Insert Rollover Image taipkan ‘Butang’ pada ruangan Image Name. Klik
pada butang Browse pada ruangan Original Image dan pilih imej ‘butang1.gif’,
kemudian Select. Pada ruangan Rollover Image klik pada butang Browse dan pilih imej
‘butang2.gif’. Pastikan ruangan Preload Rollover Image ditanda. Pada ruangan
Alternate text pula, taipkan perkataan ‘Tetikus’. Pada ruangan When Clicked, Go To
URL, klik pada butang Browse dan pilih fail ‘tetikus.htm’. Klik pada butang OK.
29. 6. Simpan fail anda dengan nama yang sama.
7. Uji laman anda dengan menekan kekunci F12. Perhatikan apabila penunjuk tetikus
melalui butang yang telah dibuat, terdapat perubahan imej yang berlaku pada butang
tersebut. Apabila butang itu diklik, anda akan dihubungkan kepada laman ‘tetikus.htm’.
Refleksi
Apakah persediaan atau bahan yang diperlukan sebelum satu roll over image boleh dicipta?
30. Unit 12 : Layer
Objektif
Selepas mengikuti unit pembelajaran ini, murid dapat:
• Membina layer.
• Memasukkan teks ke dalam layer.
• Memasukkan imej ke dalam layer.
Langkah-langkah :
1. Mulakan program Macromedia Dreamweaver.
2. Buka fail ‘lamanpertama.htm’ yang telah dibina.
3. Klik pada butang Draw Layer.
4. Klik dan seret pada ruang kerja seperti yang ditunjukkan.
Draw Layer
31. 5. Bina sebuah lagi layer sebagaimana yang ditunjukkan.
6. Untuk menetapkan layer properties, klik pada mana-mana bahagian pada garisan layer
tersebut.
7. Klik pada mana-mana bahagian garisan Layer yang pertama dan tetapkan properties
sebagaimana berikut :
L = 124px
T = 200px
W = 197px
H = 135px dan biarkan bahagian yang lain.
8. Klik pula pada mana-mana bahagian garisan Layer yang kedua dan tetapkan
properties sebagaimana berikut :
L = 683px
T = 200px
W = 197px
H = 135px dan biarkan bahagian yang lain.
9. Klik pada ruang kosong yang terdapat dalam layer pertama. Jajarkan kursor ke tengah
layer menggunakan butang Align Center pada tetingkap Properties.
10. Taipkan perkataan ‘Tetikus’ dan tekan enter.
11. Klik pada butang Insert Image dan pilih fail ‘tetikus01.jpg’. Klik pula pada imej tetikus
itu tadi dan tetapkan properties seperti berikut:
W = 105px
H = 100px
Nama Layer Labar Layer
Jarak Layer
dari atas
Tinggi Layer
Jarak Layer
dari kiri
Warna background
Layer
Imej background
Layer
32. 12. Klik pula pada ruang kosong yang terdapat dalam layer kedua. Jajarkan kursor ke
tengah layer menggunakan butang Align Center pada tetingkap Properties.
13. Taipkan tajuk ‘Pembesar Suara’ dan tekan enter.
14. Klik pada butang Insert Image dan pilih fail ‘psuara.jpg’. Klik pula pada imej pembesar
suara itu tadi dan tetapkan properties seperti di langkah ke 11.
15. Simpan fail anda dengan nama yang sama dengan menekan Ctrl + S.
16. Uji laman anda dengan menekan kekunci F12. Perhatikan kedudukan teks serta imej
yang terdapat di dalam layer.
33. Unit 13 : Anchor
Objektif
Selepas mengikuti unit pembelajaran ini, murid dapat membina anchor pada laman.
Langkah-langkah :
1. Mulakan program Macromedia Dreamweaver.
2. Buka fail ‘tetikus.htm’ yang telah dibina.
3. Letakkan kursor di bahagian bawah imej tetikus dan taip sebagaimana berikut :
4. Tekan Enter 3 kali dan taip sebagaimana yang ditunjukkan di bawah :
Am
Penggunaan Tetikus
Tindakan Tetikus
Am
Tetikus merupakan suatu alat yang membolehkan pengguna komputer
memilih dan menggerakkan item yang terdapat pada skrin komputer.
Penggunaan Tetikus
Untuk menggunakan tetikus, letakkan tangan di atasnya dan gunakan
ibu jari serta jari manis dan jari kelingking untuk menggerakkan tetikus
di atas meja. Gunakan jari telunjuk dan jari hantu untuk menekan
butang kiri dan butang kanan yang terdapat pada tetikus tersebut.
Tindakan Tetikus
Klik
Klik bermaksud memilih suatu item pada skrin. Unuk mengklik sesuatu
item, tekan dan lepaskan butang kiri tetikus.
Seret dan Lepas
Tindakan ini memudahkan pengguna untuk menggerakkan sesuatu
item pada skrin. Letakkan penunjuk pada suatu item di atas skrin dan
tekan butang kiri tetikus tanpa dilepaskan. Gerakkan penunjuk ke
tempat yang dikehendaki dan lepaskan butang.
34. 5. Letakkan kursor sebelum perkataan ‘Am’ yang terdapat pada bahagian bawah.
6. Klik pada butang ‘Insert Named Anchor’.
7. Taipkan nama anchor pada tetingkap Insert Named Anchor sebagai ‘am’ dan klik OK.
8. Highlight tajuk ‘Am’ yang terdapat pada bahagian atas dan taipkan ‘#am’ pada ruangan
Link pada tetingkap Properties. Perhatikan tajuk ‘Am’ telah bertukar kepada bergaris
yang membolehkan pengguna dibawa terus ke lokasi anchor yang telah dibuat.
9. Lakukan perkara yang sama kepada tajuk ‘Penggunaan Tetikus’ dan ‘Tindakan tetikus’.
10. Simpan fail anda dengan nama yang sama dengan menekan Ctrl + S.
Named Anchor
35. 11. Uji laman anda dengan menekan kekunci F12. Perhatikan apa yang berlaku apabila
anda klik pada tajuk ‘Am’, ‘Penggunaan Tetikus’ dan ‘Tindakan tetikus’ tersebut.
Unit 14 : Pop up Message
Objektif
Selepas mengikuti unit pembelajaran ini, murid dapat membina pop up message untuk objek.
Langkah-langkah :
1. Mulakan program Macromedia Dreamweaver.
2. Buka fail ‘pengimbas.htm’ yang telah dibina.
3. Pastikan kursor berada di bahagian bawah imej pengimbas dan taipkan ‘dpi’.
4. Klik pada menu Window > Behaviors.
5. Highlight perkataan ‘dpi’ dan klik pada butang ‘+’ pada tetingkap Behaviors. Pilih Popup
Message.
36. 6. Taipkan ayat sebagaimana berikut dalam ruangan Message :
dpi (dot per inch)
Merujuk kepada kejelasan imej yang diimbas.
7. Klik pada butang OK.
8. Taipkan ‘#’ pada ruangan ‘Link’ pada tetingkap ‘Properties’.
37. 9. Simpan fail anda dengan nama yang sama dengan menekan Ctrl + S.
10. Uji laman anda dengan menekan kekunci F12. Perhatikan apabila ‘dpi’ di klik, satu
tetingkap akan muncul.
Unit 15 : Animasi Flash
Objektif
Selepas mengikuti unit pembelajaran ini, murid dapat memasukkan fail animasi flash (.swf)
ke dalam laman.
Langkah-langkah :
1. Mulakan program ‘Macromedia Dreamweaver’.
2. Buka fail ‘pengimbas.htm’ dan letakkan kursor di bahagian bawah perkataan ‘dpi’.
3. Klik pada butang ‘Insert Flash’.
4. Pilih fail ‘animasiteks.swf’ yang terdapat di dalam cd anda dan klik OK.
5. Klik pada butang Play untuk menyaksikan fail flash tersebut dan klik pada butang Stop
untuk memberhentikannya.
Butang Play/Stop
38. 6. Simpan fail dengan nama yang sama dengan menekan Ctrl + S.
7. Uji laman anda dengan menekan kekunci F12. Perhatikan animasi flash yang telah
dimasukkan.
39. Unit 16 : Animasi
Objektif
Selepas mengikuti unit pembelajaran ini, murid dapat mewujudkan satu animasi pergerakan
objek dari kanan ke kiri.
Langkah-langkah :
1. Mulakan program Macromedia Dreamweaver.
2. Taipkan ‘Animasi’ pada ruangan Title.
3. Bina satu layer pada kedudukan berikut dan masukkan imej ‘basikal.jpg’
Layer Handle
40. 4. Klik pada menu Window > Timelines untuk memaparkan tetingkap Timelines.
5. Klik pada layer yang telah dibuat dan klik pada menu Modify > Timeline > Record
Path of Layer.
41. 6. Klik pada Layer Handle dan seret layer tersebut mengikut laluan seperti yang
ditunjukkan dan lepaskan butang tetikus. Apabila sebuah tetingkap muncul, klik pada
butang OK.
7. Untuk menyaksikan animasi yang telah dibuat, klik pada butang ‘play’ tanpa dilepaskan.
8. Klik pada check box Autoplay dan Loop pada tetingkap Timelines dan klik OK pada
tetingkap yang muncul.
KlikButang Play
42. 9. Simpan fail anda sebagai ‘animasi.htm’.
10. Uji laman anda dengan menekan kekunci F12. Perhatikan pergerakan imej basikal
bergerak dari kanan ke kiri.
Unit 17 : Frame
Objektif
Selepas mengikuti unit pembelajaran ini, murid dapat membina satu laman yang
menggunakan frame.
Langkah-langkah :
1. Mulakan program Macromedia Dreamweaver.
2. Klik pada butang Frames dan pilih Top Frame.
3. Simpan fail dengan mengklik pada menu File > Save Frameset As dan taipkan
‘frame.htm’.
4. Taipkan ‘Frame’ pada ruangan Title.
5. Jajarkan kursor ke tengah laman dan taipkan ‘Peranti Input’ kemudian tekan enter.
43. 6. Bina jadual seperti berikut :
7. Taipkan ‘Tetikus’ dalam petak pertama dan jajarkan ke tengah.
8. Taipkan ‘Pengimbas’ dalam petak kedua dan jajarkan ke tengah.
9. Klik pada menu File > Save Frame As dan taipkan ‘lamanatas.htm’.
10. Klik pada mana-mana bahagian yang terdapat pada frame bawah.
11. Jajarkan kursor ke tengah dan klik pada butang Insert Image. Pilih fail ‘komputer.jpg’
dan klik OK.
44. 12. Klik pada menu File > Save Frame As dan taipkan ‘lamanbawah.htm’.
13. Highlight perkataan ‘Tetikus’ dalam jadual dan klik pada butang Browse pada ruangan
Link pada tetingkap Properties. Pilih fail ‘tetikus.htm’.
14. Pilih mainFrame pada ruangan Target pada tetingkap Properties.
15. Lakukan perkara yang sama kepada perkataan ‘Pengimbas’ dan pilih fail
‘pengimbas.htm’.
16. Klik pada menu File > Save All.
17. Uji laman anda dengan menekan F12. Klik OK apabila satu tetingkap muncul.
Perhatikan apabila perkataan ‘Tetikus’ atau ‘Pengimbas’ di klik ‘lamanatas.htm’ masih
kekal berada di atas.
45. Ahli Panel Penulis Modul Pembelajaran
Grafik Berkomputer Dan Produksi Multimedia 2003-2006
Penaung: Pengarah PPK
Timbalan Pengarah PPK
Penasihat : Ketua Bidang, Bidang Pendidikan Teknologi dan Vokasional, PPK
Ketua Unit, Unit Mata Pelajaran Vokasional (MPV)
Ketua: En. Mazlan b. Haji Talib
Penolong Pengarah Kurikulum, Unit MPV, PPK
Panel Penulis: (2003)
En. Jusni bin Nasirun Institut Perguruan Darulaman
En. Tuan Rosdan b. Tuan Muda Institut Perguruan Darulaman
En. Shukri b. Mansor Institut Perguruan Darulaman
En. Ishak b. Othman(Allahyarham) Institut Perguruan Darulaman
En. Zain Hazmi b. Zain Baharin Maktab Perguruan Ipoh
En. M. Nadarajan Maktab Perguruan Ipoh
En. Yahya b. Mohamad SMK Kulim, Kedah
En. Abdul Jasheer b. Abdullah SMK Mahang, Kedah
Pn. Nik Ruslah bt. Nik Ab. Rahman SMK Alor Janggus, Alor Setar
Pn. Nor’ain bt. Sulaiman SMK Jitra, Kedah
En. P. Sarjit Singh SMK Taman Ria Jaya, Sg. Petani
En. Ibrahim b. Mat Aris SMKA Al-Irshad, Kepala Batas
En. Zairudin b. Ahmad SMK Datuk Hj. Ahmad Badawi, Kepala Batas
En. Mohd. Nawi b. Haron SMK Laloh, Kuala Krai, Kelantan
Cik Rozilah bt. Mohd. Yusof SMK Permas Jaya, Johor Baharu
Pn. Normiza bt. Mohd. SMK Anderson, Ipoh
En. Nordin b. Awang Nor SMK Manek Urai, Kuala Krai, Kelantan
En. Mahfudz b. Haji Ahmad SMKA Slim River Perak
En. Arman b. Ishak SMK Raja Lope Nor Rashid, Perak
Pn. Siti Rosnah bt. Abu Bakar SMK Convent, Ipoh,Perak
Panel Penulis (2005)
Pn. Suraya bt. Hashim SMK Seri Titiwangsa, Kuala Lumpur
En. Abdul Karim b. Hamid SMK Kg. Jawa, Kelang
Y.M. Tg. Norazlan Tg. Sulaiman SMK Merchang, K. Terengganu
En. Ramlee b. Mat Rani SMK Tg. Mizan Zainal Abidin, K.Trengganu
Pn. Samsuriyani bt. Ismail SMK Taman Tun Dr Ismail, K.Lumpur
Pn. Arlina Hasmanizar bt. Che Ahmad SMK Segambut Jaya, Kuala Lumpur
En. Abd. Majid b. Yusoff SMK Taman Dato Harun, P.Jaya, Selangor
En. Abdul Halim b. Awang SMK Bkt.Gambir, Muar
Pn. Haidaturayani bt. Md. Noor SMK Khir Johari, Beranang
Pn. Suhaila bt. Abd. Rahman SMK Bukit Baru, Melaka
Pn. Sarina bt. Zainuddin PPD Kota Setar, Alor Setar, Kedah
En. Ramesh a/l Kanapathy SMK Alam Megah, Shah Alam Selangor
Pn. Wong Siew Fong SMK Seri Titiwangsa, Kuala Lumpur
Cik Siti Nurhasni bt. Nordin SMK ABI, Jln.Pdg.Melangit, Kangar
Cik Siti Amrah bt. Zakaria SMK Dato' Hj. Mohd. Redza, Seremban
46. Pn. Noor Azrina Jasmi SMK Tmn Perumahan Bedaun, WP Labuan
Pn. Khairul Azlina Khairi SMK Dato, Seri MaharajaLela, Kg. Gajah, Perak
En. Mohamad Nazri b. Zuhir SMK Tok Muda Abdul Aziz,Sg. Siput, Perak
En. Haizul Faried Iskandar A.Halim SMK Khir Johari, Sg. Petani, Kedah
Pusat Perkembangan Kurikulum Kementerian Pelajaran Malaysia
Ogos 2006