m

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

g r a f i k

pusat perkembangan kurikulum kementerian pendidikan malaysia

pusat perkembangan kurikulum kementerian pendidikan malaysia

2003

2002

Cetakan Pertama Dan Kedua 2003 Kementerian Pendidikan Malaysia Hak Cipta Terpelihara. Tidak dibenarkan mengeluar 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 Pendidikan Malaysia, Pesiaran Duta off Jalan Duta, 50604 Kuala Lumpur.. Perpustakaan Negara Malaysia Malaysia. Pusat Perkembangan Kurikulum Modul Pembelajaran Grafik Berkomputer Pusat Perkembangan Kurikulum Kementerian Pendidikan Malaysia 1. Modul Macromedia Dreanweaver 2. Aplikasi Perisian Multimedia dan Grafik 3. Judul Data Penkatalogan Dalam Penerbitan

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 maksima. 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 pentaksiran 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.

KANDUNGAN
muka
1

surat UNIT 1 Pengenalan dan Menetapkan Tapak Laman UNIT 2 Page Properties, Paparan Laman dan Menyimpan Fail UNIT 3 Imej Sebagai Latar Laman UNIT 4 Teks UNIT 5 Grafik UNIT 6 Jadual UNIT 7 Pautan (Teks) UNIT 8 Pautan (Imej) UNIT 9 Pautan e-Mel UNIT 10
Pautan (Hotspot)

10

12

15

17

19

22

UNIT 11 Pautan (Rollover Image) UNIT 12 Layer UNIT 13 Anchor UNIT 14 Pop up Message UNIT 15 Animasi Flash UNIT 16 Animasi UNIT 17 Frame

24

26

29

32

35

37

40

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 4.0 Sebelum anda membina laman web menggunakan Dreamweaver, anda dinasihatkan untuk memcipta 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 belajar web. Di
bawah folder belajar web, cipta beberapa folder baru misalnya gambar 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 gambar, 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 Program dan pilih Macromedia Dreamwaver.
Kedua-dua arahan di atas boleh disingkatkan sebagai Start > Program > Macromedia Dreamweaver. 3. Paparan berikut akan muncul.

Toolbar Menubar Titlebar Objects Panel Ruang Kerja

Properties Inspector

Mini Launcher

Menetapkan tapak laman (define site) Langkah-langkah: 1. Klik pada menu Site > New Site 2. Paparan berikut akan muncul.

3. Pastikan Local Info telah dipilih pada ruangan Category. 4. Isikan nama laman yang sesuai pada ruangan Site Name, misalnya Belajar Web. 5. Pada ruangan Local Root Folder, isikan laluan kepada folder yang telah dicipta untuk
menyimpan segala fail yang akan anda hasilkan nanti atau klik pada ikon dan pilih folder tersebut. (browse)

6. Pastikan ruangan Refresh Local File List Automatically ditanda agar fail dikemaskini
di dalam folder secara automatik apabila sesuatu fail baru ditambah atau dibuang.

7. Biarkan ruangan HTTP Address kosong kerana laman ini belum lagi di muatnaik ke
pelayan. 8. Klik pada butang OK. 9. Paparan berikut akan muncul.

Perhatikan belum ada apa-apa fail tersenarai di bawah folder belajar web kerana anda belum lagi membina mana-mana fail. 10. Tutup tetingkap tersebut. Refleksi Adakah terdapat cara yang lain daripada yang diterangkan di atas untuk memulakan program Macromedia Dreamweaver ?

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 mukasurat laman. o Menetapkan warna latarbelakang laman. Memaparkan laman pada default browser atau pelayar internet. Menyimpan fail dalam cakera keras Langkah-langkah: 1. Mulakan perisian Macromedia Dreamweaver.

2. Klik pada Modify > Page Properties.

3. Isikan tajuk laman anda pada ruangan Title contohnya Komputer. 4. Tukar warna latar kepada warna kuning dengan mengklik pada butang warna di
ruangan Background dan klik pada butang OK.

5. Tekan kekunci F12 atau klik pada menu File > Preview in Browser > Pilih Browser yang
ada.

6. Tutup pelayar web anda. 7. Tukarkan warna latar kepada putih dengan menggunakan cara yang sama.

8. Klik pada menu File > Save As .

9. Browse kepada folder yang telah anda cipta iaitu belajar web dan taipkan
lamanpertama pada ruangan File name.

10. Klik pada butang Save.

Refleksi 1. Bolehkan tajuk mukasurat laman diubah? 2. Bolehkan warna latar laman diubah tanpa membuka tetingkap page properties?
Unit 3 : Imej Sebagai Latar Laman

Objektif Selepas mengikuti unit pembelajaran ini, murid dapat menggunakan imej sebagai latar. Langkah-langkah :

1. Salin fail imej daripada CD yang dibekalkan. Andaikan D: merupakan pemacu CD

anda. Salin fail latar.gif daripada D:/ModulDreamweaver/gambar ke folder C:/belajar web/gambar yang telah anda bina.

2. Buka program Macromedia Dreamweaver. Isikan tajuk laman sebagai Imej Latar pada
ruangan Title.

3. Klik pada Modify > Page Properties. Pada ruangan Background Image, klik pada
butang Browse dan pilih fail latar.gif daripada C:\belajar web\gambar dan imej akan dipaparkan pada ruangan Image Preview. Klik pada butang select dan seterusnya klik pada butang OK.

4. Laman anda akan bertukar seperti berikut :

5. Simpan fail anda sebagai imejlatar.htm dalam folder belajar web yang telah anda
cipta.

Refleksi
1. Adakah dua imej yang berlainan boleh digunakan sebagai latar laman?

Unit 4 : Teks

Objektif Selepas mengikuti unit pembelajaran ini, murid dapat memasukkan teks dan memformat 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 Saiz fon Format fon Penjajaran Warna fon

= Arial =6 = Bold = tengah (align center) = merah

Peranti Komputer Peranti Input dan Output :

Jenis fon Saiz fon Format fon Penjajaran Warna fon

= Default Font =4 = Italic = tengah (align center) = biru

6. Untuk mengubah format pada teks, butang yang terdapat pada tetingkap properties
boleh digunakan. Highlight teks yang hendak diubah dan klik pada butang berikut:

Mengubah Jenis Fon

Mengubah Warna Fon

Mengubah Saiz Fon

Bold/Italic Penjajaran Teks

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 untuk menjajarkan teks?

Unit 5 : Grafik

Objektif Selepas mengikuti unit pembelajaran ini, murid dapat memasukkan grafik ke dalam laman. Langkah-langkah : 1. Salin fail imej daripada CD yang dibekalkan. Andaikan D: merupakan pemacu CD anda. Salin fail komputer.jpg daripada D:/ModulDreamweaver/gambar ke folder C:/belajar web/gambar yang telah anda bina. 2. Buka fail lamanpertama.htm.

3. Pastikan kursor anda berada di hujung perkataan Output dan tekan enter. 4. Klik pada butang Insert Image dan pilih fail imej komputer.jpg yang telah anda salin.
Imej tersebut akan terpapar pada ruangan Image Preview.

Insert Image

5. Pilih butang select dan imej akan terpapar pada laman anda.

6. Simpan fail anda menggunakan nama yang sama dengan klik pada menu File > Save
atau dengan menekan Ctrl + S. 7. Uji laman anda dengan menekan kekunci F12. Refleksi Apakah yang akan berlaku sekiranya satu grafik dimasukkan di tengah-tengah teks?

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 insert table.

Insert Table 4. Satu tetingkap akan muncul. Isikan perkara berikut :

Rows Columns Width Border

: 4 (Bilangan baris) : 2 (Bilangan kolum) : 250 (lebar jadual) dan pilih pixels pada menu tarik turun. : 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.

6. Untuk menjajarkan jadual ke tengah laman, klik butang Align pada tetingkap
Properties dan pilih center. Klik

7. Klik pada butang di sebelah kanan untuk memaparkan lebih banyak pilihan butang pada tetingkap table properties.

Klik untuk buka Warna latar jadual Warna garisan jadual

Browse imej sebagai latar jadual

Klik untuk tutup

8. Untuk menukar warna latar keseluruhan jadual, klik pada mana-mana garisan jadual
dan klik pada butang Bg Color.

Klik

Menukar warna garisan jadual

9. Untuk menukar warna garisan jadual, klik pada butang Brdr Color. 10. Untuk menukar warna latar pada petak yang tertentu dalam jadual, highlight petak yang
berkenaan dan klik pada butang Bg.

Klik 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?
Unit 7 : Pautan (Teks)

Objektif Selepas mengikuti unit pembelajaran ini, murid dapat membina pautan (link) ke laman yang lain menggunakan teks. Langkah-langkah : 1. Salin fail imej daripada CD yang dibekalkan. Andaikan D: merupakan pemacu CD anda. Salin fail tetikus.jpg daripada D:/ModulDreamweaver/gambar ke folder C:/belajar web/gambar yang telah anda bina.

2. Mulakan program Macromedia Dreamweaver. 3. Taipkan Tetikus pada ruangan Title dan tekan enter.
4. Taipkan ayat yang berikut pada ruang kerja : 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. 5. Jajarkan teks tersebut ke tengah laman. 6. Masukkan imej tetikus.jpg yang telah disalin di bahagian bawah teks.

7. Simpan fail anda sebagai tetikus.htm. 8. Tanpa menutup fail ini, buka fail lamanpertama.htm yang telah dibina.

9. Highlight perkataan Tetikus yang terdapat di dalam jadual. Pada tetingkap properties,
klik pada butang browse pada ruangan Link dan pilih fail tetikus.htm pada tetingkap Select File.

Klik 10. Uji laman anda dengan menekan kekunci F12. Perhatikan apabila perkataan Tetikus diklik, anda akan dihubungkan dengan laman tetikus.htm.

11. Tutup pelayar internet anda. Simpan fail anda dengan nama yang sama dengan
menekan Ctrl + S.

Refleksi
Apakah yang berlaku kepada perkataan Tetikus yang anda guna sebagai pautan setelah diklik semasa anda menguji laman anda?

Unit 8 : Pautan (Imej)

Objektif Selepas mengikuti unit pembelajaran ini, murid dapat menggunakan imej sebagai pautan. Langkah-langkah : 1. Salin fail imej daripada CD yang dibekalkan. Andaikan D: merupakan pemacu CD anda. Salin fail pengimbas01.jpg dan pengimbas02.jpg daripada D:/ModulDreamweaver/gambar ke folder C:/belajar web/gambar yang telah anda cipta.

2. Mulakan program Macromedia Dreamweaver. 3. Taipkan Pengimbas pada ruangan Title dan tekan enter.
4. Taipkan ayat berikut pada ruang kerja :

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.

5. Jajarkan teks tersebut ke tengah laman. 6. Masukkan imej pengimbas02.jpg yang telah disalin ke bahagian bawah teks.

7. Simpan fail ini sebagai pengimbas.htm. 8. Tanpa menutup fail ini, buka fail lamanpertama.htm yang telah dibina. 9. Letakkan kursor di bahagian bawah jadual.

10. Klik pada butang Insert Image dan pilih fail pengimbas01.jpg. 11. Klik pada butang Browse pada ruangan Link dan pilih fail pengimbas.htm dan klik
butang Select.

Klik

12. Uji laman yang anda bina dengan menekan kekunci F12. Perhatikan apabila imej pengimbas diklik, anda dihubungkan dengan halaman pengimbas.htm. 13. Tutup pelayar internet anda.

14. Simpan fail anda dengan nama yang sama dengan menekan Ctrl + S.

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. Salin fail imej daripada CD yang dibekalkan. Andaikan D: merupakan pemacu CD anda. Salin fail e-mel.gif daripada D:/ModulDreamweaver/gambar ke folder C:/belajar web/gambar yang telah anda cipta. 2. Mulakan program Macromedia Dreamweaver. 3. Buka fail lamanpertama.htm yang telah dibina. 4. Letakkan kursor di bawah imej pengimbas yang digunakan sebagai pautan.

5. Klik pada butang Insert Email Link.

Klik

6. Taipkan E-mel pada ruangan Text dan taipkan alamat e-mel pada ruangan

E-mail, contohnya ppk@ppk.moe.gov.my pada tetingkap Insert E-mail Link dan klik OK.

7. 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 nanti mengirim e-mel ke alamat yang telah anda taipkan.

8. Tutup perisian aplikasi e-mel serta pelayar internet.

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

3. Uji laman anda sekali lagi dengan menekan kekunci F12. Perhatikan pergerakan imej animasi gif yang telah dimasukkan. Sekiranya imej tersebut diklik, aplikasi e-mel akan dilancar secara automatik sebagaimana yang berlaku jika perkataan E-mel diklik.

4. Tutup pelayar internet dan simpan fail anda dengan nama yang sama dengan menekan
Ctrl + S.

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.

Klik

4. Klik pada setiap penjuru imej pengimbas yang terdapat di dalam gambar. kemudan klik pada butang Browse yang terdapat pada ruangan Link pada tetingkap Properties dan pilih fail pengimbas.htm.

Klik

5. Klik pada butang Browse yang terdapat pada ruangan Link pada tetingkap Properties
dan pilih fail pengimbas.htm. 6. 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.

7. Tutup pelayar internet dan simpan fail dengan nama yang sama dengan menekan Ctrl
+ S.

Refleksi Apakah yang akan berlaku sekiranya Rectangular Hotspot Tool atau Oval Hotspot Tool digunakan berbanding Polygon Hotspot Tool?

Unit 11 : Pautan (Rollover Image)

Objektif Selepas mengikuti unit pembelajaran ini, murid dapat membina pautan menggunakan rollover image. Langkah-langkah : 1. Salin fail imej daripada CD yang dibekalkan. Andaikan D: merupakan pemacu CD anda. Salin fail butang1.gif dan butang2.gif daripada D:/ModulDreamweaver/gambar ke folder C:/belajar web/gambar yang telah anda cipta.

2. Buka program Macromedia Dreamweaver.

3. Buka fail lamanpertama.htm yang telah dibina.

4. Letakkan kursor di sebelah imej pengimbas yang digunakan sebagai pautan dan tekan
space bar.

5. Klik butang Insert Rollover Image.

Klik

6. 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 When Clicked, Go To URL, klik pada butang Browse dan pilih fail tetikus.htm. Klik pada butang OK.

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. 8. Tutup pelayar internet dan simpan fail anda dengan nama yang sama.

Refleksi Apakah persediaanatau bahan yang diperlukan sebelum satu roll over image boleh dicipta?

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. Salin fail imej daripada CD yang dibekalkan. Andaikan D: merupakan pemacu CD anda. Salin fail tetikus01.jpg dan psuara.jpg daripada D:/ModulDreamweaver/gambar ke folder C:/belajar web/gambar yang telah anda cipta.

2. Mulakan program Macromedia Dreamweaver.

3. Buka fail lamanpertama.htm yang telah dibina.

4. Klik pada butang Draw Layer.

Klik

5. Klik dan seret pada ruang kerja seperti yang ditunjukkan.

6. Bina sebuah lagi layer sebagaimana yang ditunjukkan. 7. Untuk menetapkan layer properties, klik pada mana-mana bahagian pada garisan layer
tersebut.

Jarak Layer daripada kiri Nama Layer Lebar Layer Imej latar belakang

Jarak Layer daripada atas Tinggi Layer

Index Layer Warna latar belakang

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

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

10. Klik pada ruang kosong yang terdapat dalam layer pertama. Jajarkan kursor ke tengah
layer menggunakan butang Align Center pada tetingkap Properties.

11. Taipkan perkataan Tetikus dan tekan enter. 12. Klik pada butang Insert Image dan pilih fail tetikus01.jpg yang telah disalin. 13. Klik pula pada ruang kosong yang terdapat dalam layer kedua. Jajarkan kursor ke
tengah layer menggunakan butang Align Center pada tetingkap Properties.

14. Taipkan tajuk Pembesar Suara dan tekan enter. 15. Klik pada butang Insert Image dan pilih fail psuara.jpg yang juga telah disalin.

16. Uji laman anda dengan menekan kekunci F12. Perhatikan kedudukan teks serta imej
yang terdapat di dalam layer.

17. Tutup pelayar internet dan simpan fail anda dengan nama yang sama dengan menekan
Ctrl + S.

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 imeh tetikus dan taip sebagaimana berikut : Am Penggunaan Tetikus Tindakan Tetikus

4. Tekan enter 3 kali dan taip sebagaimana yang ditunjukkan di bawah :

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.

5. Klik pada butang yang terdapat pada objects panel dan pilih Invisible. Klik

6. Letakkan kursor sebelum perkataan Am yang terdapat pada bahagian bawah.

7. Klik pada butang Insert Named Anchor. Klik

8. Taipkan nama anchor pada tetingkap Insert Named Anchor sebagai am dan klik OK.

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

10. Uji laman anda dengan menekan kekunci F12. Perhatikan apa yang berlaku apabila anda klik pada tajuk Am tersebut. 11. Tutup pelayar internet dan lakukan perkara yang sama kepada tajuk Penggunaan Tetikus dan Tindakan tetikus.

12. Simpan fail anda dengan nama yang sama dengan menekan Ctrl + S.

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.

Klik

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.

9. Uji laman anda dengan menekan kekunci F12. Perhatikan apabila dpi diklik, satu tetingkap akan muncul. 10. Klik pada butang OK untuk menutup tetingkap tersebut.

11. Tutup pelayar internet dan simpan fail anda dengan nama yang sama dengan menekan
Ctrl + S.
Unit 15 : Animasi Flash

Objektif Selepas mengikuti unit pembelajaran ini, murid dapat memasukkan fail animasi flash (.swf) ke dalam laman. Langkah-langkah : Klik flash daripada CD yang dibekalkan. Andaikan D: merupakan pemacu 1. Salin fail animasi CD anda. Salin fail animasiteks.swf daripada D:/ModulDreamweaver/gambar ke folder C:/belajar web/gambar yang telah anda cipta. 2. Mulakan program Macromedia Dreamweaver. 3. Buka fail pengimbas.htm dan letakkan kursor di bahagian bawah perkataan dpi. 4. Klik pada butang Insert Flash.

5. Pilih fail animasiteks.swf yang telah disalin dan klik Select. 6. Klik pada butang Play untuk menyaksikan fail flash tersebut dan klik pada butang Stop
untuk memberhentikannya.

Butang Play/Stop

7. Uji laman anda dengan menekan kekunci F12. Perhatikan animasi flash yang telah
dimasukkan.

8. Tutup pelayar internet dan simpan fail dengan nama yang sama dengan menekan Ctrl
+ S.

Unit 16 : Animasi

Objektif Selepas mengikuti unit pembelajaran ini, murid dapat mewujudkan satu animasi pergerakan objek dari kanan ke kiri. Langkah-langkah : 1. Salin fail imej daripada CD yang dibekalkan. Andaikan D: merupakan pemacu CD anda. Salin fail basikal.jpg daripada D:/ModulDreamweaver/gambar ke folder C:/belajar web/gambar yang telah anda bina.

2. Mulakan program Macromedia Dreamweaver. 3. Taipkan Animasi pada ruangan Title dan tekan enter. 4. Bina satu layer pada kedudukan berikut dan masukkan imej basikal.jpg yang telah
disalin ke dalam layer tersebut.

Layer Handle

5. Klik pada menu Window > Timelines untuk memaparkan tetingkap Timelines.

6. Klik pada layer yang telah dibuat dan klik pada menu Modify > Timeline > Record
Path of Layer.

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

8. Untuk menyaksikan animasi yang telah dibuat, klik pada butang play tanpa dilepaskan. Butang Play Klik

9. Klik pada check box bagi Autoplay dan Loop pada tetingkap Timelines dan klik OK
pada tetingkap yang muncul. 10. Uji laman anda dengan menekan kekunci F12. Perhatikan pergerakan imej basikal bergerak dari kanan ke kiri. 11. Tutup pelayar internet dan simpan fail anda sebagai animasi.htm.
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 yang terdapat pada objects panel dan pilih Frames.
Klik

3. Klik pada butang Insert Top Frame.

Klik

4. Simpan fail dengan mengklik pada menu File > Save Frameset As dan taipkan
frame.htm.

5. Taipkan frame pada ruangan Title dan tekan enter. 6. Klik pada butang yang terdapat pada objects panel dan pilih Common. Klik

7. Jajarkan kursor ke tengah laman dan taipkan Peranti Input kemudian tekan enter.

8. Bina jadual seperti berikut :

9. Taipkan Tetikus dalam petak pertama dan jajarkan ke tengah. 10. Taipkan Pengimbas dalam petak kedua dan juga jajarkan ke tengah.

11. Klik pada menu File > Save Frame As dan taipkan lamanatas.htm. 12. Klik pada mana-mana bahagian yang terdapat pada frame bawah.

13. Jajarkan kursor ke tengah dan klik pada butang Insert Image. Pilih fail komputer.jpg,
klik Select dan OK.

14. Klik pada menu File > Save Frame As dan taipkan lamanbawah.htm. 15. Highlight perkataan Tetikus dalam jadual dan klik pada butang Browse pada ruangan
Link pada tetingkap Properties. Pilih fail tetikus.htm.

16. Pilih mainFrame pada ruangan Target pada tetingkap Properties.

Klik

Klik

17. Lakukan perkara yang sama kepada perkataan Pengimbas dan pilih fail pengimbas.htm.

18. Klik pada menu File > Save Frame.

19. Uji laman anda dengan menekan F12. Klik OK apabila satu tetingkap muncul. Perhatikan apabila perkataan Tetikus atau Pengimbas diklik lamanatas.htm masih kekal.

Ahli Panel Penulis Modul Pembelajaran Grafik Berkomputer Dan Produksi Multimedia
Penaung: Penasihat : Pengerusi : Ketua: Pengarah PPK Timbalan Pengarah PPK Tuan Haji Mohd. Aspar bin Haji Dasuki Ketua Bidang, Bidang Pendidikan Teknologi Maklumat dan Komunikasi, PPK En. Abdul Wahab bin Ibrahim Ketua Unit, Unit Teknologi Maklumat dan Komunikasi, PPK En. Shamsul Bahri b. Baharudin (Produksi Multimedia) Penolong Pengarah Kurikulum Unit Teknologi Maklumat dan Komunikasi, PPK En. Mazlan b. Haji Talib (Grafik Berkomputer) Penolong Pengarah Kurikulum Unit Teknologi Maklumat dan Komunikasi, PPK

Panel Penulis: En. Jusni bin Nasirun En. Tuan Rosdan b. Tuan Muda En. Shukri b. Mansor En. Ishak b. Othman(Allahyarham) En. Zain Hazmi b. Zain Baharin En. M. Nadarajan En. Yahya b. Mohamad En. Abdul Jasheer b. Abdullah Pn. Nik Ruslah bt. Nik Ab. Rahman Pn. Norain bt. Sulaiman En. P. Sarjit Singh En. Ibrahim b. Mat Aris En. Zairudin b. Ahmad En. Mohd. Nawi b. Haron Cik Rozilah bt. Mohd. Yusof Pn. Normiza bt. Mohd. En. Nordin b. Awang Nor En. Mahfudz b. Haji Ahmad En. Arman b. Ishak Pn. Siti Rosnah bt. Abu Bakar Urus Setia (PPK) En Abu Sulaiman bin Ibrahim En. Hassan b. Wahid En. Abd. Rahman b. Ismail Cik Sarina bt. Ibrahim Institut Perguruan Darulaman Institut Perguruan Darulaman Institut Perguruan Darulaman Institut Perguruan Darulaman Maktab Perguruan Ipoh Maktab Perguruan Ipoh SMK Kulim, Kedah SMK Mahang, Kedah SMK Alor Janggus, Alor Setar SMK Jitra, Kedah SMK Taman Ria Jaya, Sg. Petani SMKA Al-Irshad, Kepala Batas SMK Datuk Hj. Ahmad Badawi, Kepala Batas SMK Laloh, Kuala Krai, Kelantan SMK Permas Jaya, Johor Baharu SMK Anderson, Ipoh SMK Manek Urai, Kuala Krai, Kelantan SMKA Slim River Perak SMK Raja Lope Nor Rashid, Perak SMK Convent, Ipoh,Perak

Pusat Perkembangan Kurikulum Kementerian Pendidikan Malaysia Ogos 2003