Modul pembelajaran dreamweaver mx 2004 v1

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 rd a n

p r o d u k s i m u l t i m e d i a

Cetakan Pertama Dan Kedua 2003Cetakan Ketiga 2006Kementerian 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

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.

KANDUNGAN

muka suratUNIT 1 Pengenalan dan Menetapkan Tapak Laman 1

UNIT 2Page Properties, Paparan Laman dan Menyimpan Fail 4

UNIT 3Imej Sebagai Latar Laman 6

UNIT 4Teks 8

UNIT 5Grafik 10

UNIT 6Jadual 12

UNIT 7Pautan (Teks) 15

UNIT 8Pautan (Imej) 17

UNIT 9Pautan e-Mel 19

UNIT 10Pautan (Hotspot) 22

UNIT 11Pautan (Rollover Image) 24

UNIT 12Layer 26

UNIT 13Anchor 29

UNIT 14Pop up Message 32

UNIT 15Animasi Flash 35

UNIT 16Animasi 37

UNIT 17Frame 40

Unit 1 : Pengenalan dan Menetapkan Tapak Laman

ObjektifSelepas 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

3. Paparan berikut akan muncul.

Folder yang telah anda cipta sebelum ini

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

3. Paparan berikut akan muncul.

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

ObjektifSelepas 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. Tukarkana) 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

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?

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

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?

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 = ArialSaiz fon = 24 pixelsFormat fon = BoldPenjajaran = Tengah (align center)Warna fon = Merah

Peranti KomputerPeranti Input dan Output : Jenis fon = Default Font

Saiz fon = 14 pixels Format fon = Italic Penjajaran = Tengah (align center) Warna fon = Biru

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?

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?

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

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.

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

Klik untuk tutup

Warna latar jadual Warna garisan jadual

‘Browse’ imej sebagai latar jadual

Klik Menukar warna garisan jadual

Klik untuk buka

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

Unit 7 : Pautan (Teks)

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


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.

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

Unit 8 : Pautan (Imej)

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


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.

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.


12. Uji laman yang anda bina dengan menekan kekunci F12. Perhatikan apabila imej pengimbas di klik, anda dihubungkan dengan halaman ‘pengimbas.htm’.

Klik

Unit 9 : Pautan e-Mel

ObjektifSelepas 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-melLangkah-langkah :

1. Mulakan program ‘Macromedia Dreamweaver’.


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 ‘[email protected]’ pada tetingkap E-mail Link dan klik OK.

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.

Email Link

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:[email protected]’ pada ruangan Link pada tetingkap Properties.


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.

Unit 10 : Pautan (Hotspot)

ObjektifSelepas mengikuti unit pembelajaran ini, murid dapat membina pautan menggunakan hotspot.

Langkah-langkah :1. Mulakan program Macromedia Dreamweaver.


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

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

Unit 11 : Pautan (Rollover Image)

ObjektifSelepas mengikuti unit pembelajaran ini, murid dapat membina pautan menggunakan rollover image.

Langkah-langkah :

1. Buka program Macromedia Dreamweaver.


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.

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?

Unit 12 : Layer

ObjektifSelepas mengikuti unit pembelajaran ini, murid dapat:

Membina layer. Memasukkan teks ke dalam layer. Memasukkan imej ke dalam layer.

Langkah-langkah :



3. Klik pada butang Draw Layer.

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

Draw Layer

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 = 124pxT = 200pxW = 197pxH = 135px dan biarkan bahagian yang lain.

8. Klik pula pada mana-mana bahagian garisan Layer yang kedua dan tetapkan properties sebagaimana berikut :L = 683pxT = 200pxW = 197pxH = 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 = 105pxH = 100px

Nama Layer Labar Layer

Jarak Layer dari atas

Tinggi Layer

Jarak Layer dari kiri

Warna background Layer

Imej background Layer

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.


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

Unit 13 : Anchor

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

AmPenggunaan Tetikus

Tindakan Tetikus

AmTetikus merupakan suatu alat yang membolehkan pengguna komputer memilih dan menggerakkan item yang terdapat pada skrin komputer.

Penggunaan TetikusUntuk 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 TetikusKlik

Klik bermaksud memilih suatu item pada skrin. Unuk mengklik sesuatu item, tekan dan lepaskan butang kiri tetikus.

Seret dan LepasTindakan 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. 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’.


11. Uji laman anda dengan menekan kekunci F12. Perhatikan apa yang berlaku apabila anda klik pada tajuk ‘Am’, ‘Penggunaan Tetikus’ dan ‘Tindakan tetikus’ tersebut.

Named Anchor

Unit 14 : Pop up Message

Objektif

Selepas mengikuti unit pembelajaran ini, murid dapat membina pop up message untuk objek.

Langkah-langkah :


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.

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


10. Uji laman anda dengan menekan kekunci F12. Perhatikan apabila ‘dpi’ di klik, satu tetingkap akan muncul.

Unit 15 : Animasi Flash

ObjektifSelepas 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

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.

Unit 16 : Animasi

ObjektifSelepas mengikuti unit pembelajaran ini, murid dapat mewujudkan satu animasi pergerakan objek dari kanan ke kiri.

Langkah-langkah :


2. Taipkan ‘Animasi’ pada ruangan Title.

3. Bina satu layer pada kedudukan berikut dan masukkan imej ‘basikal.jpg’

Layer Handle

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.

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.

9. Simpan fail anda sebagai ‘animasi.htm’.

KlikButang Play

10. Uji laman anda dengan menekan kekunci F12. Perhatikan pergerakan imej basikal bergerak dari kanan ke kiri.

Unit 17 : Frame

ObjektifSelepas mengikuti unit pembelajaran ini, murid dapat membina satu laman yang menggunakan frame.

Langkah-langkah :


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.

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.

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.

Ahli Panel Penulis Modul Pembelajaran Grafik Berkomputer Dan Produksi Multimedia 2003-2006

Penaung: Pengarah PPKTimbalan Pengarah PPK

Penasihat : Ketua Bidang, Bidang Pendidikan Teknologi dan Vokasional, PPKKetua Unit, Unit Mata Pelajaran Vokasional (MPV)

Ketua: En. Mazlan b. Haji TalibPenolong Pengarah Kurikulum, Unit MPV, PPK

Panel Penulis: (2003)En. Jusni bin Nasirun Institut Perguruan DarulamanEn. Tuan Rosdan b. Tuan Muda Institut Perguruan DarulamanEn. Shukri b. Mansor Institut Perguruan DarulamanEn. Ishak b. Othman(Allahyarham) Institut Perguruan DarulamanEn. Zain Hazmi b. Zain Baharin Maktab Perguruan IpohEn. M. Nadarajan Maktab Perguruan IpohEn. Yahya b. Mohamad SMK Kulim, KedahEn. Abdul Jasheer b. Abdullah SMK Mahang, KedahPn. Nik Ruslah bt. Nik Ab. Rahman SMK Alor Janggus, Alor SetarPn. Nor’ain bt. Sulaiman SMK Jitra, KedahEn. P. Sarjit Singh SMK Taman Ria Jaya, Sg. PetaniEn. Ibrahim b. Mat Aris SMKA Al-Irshad, Kepala BatasEn. Zairudin b. Ahmad SMK Datuk Hj. Ahmad Badawi, Kepala BatasEn. Mohd. Nawi b. Haron SMK Laloh, Kuala Krai, KelantanCik Rozilah bt. Mohd. Yusof SMK Permas Jaya, Johor BaharuPn. Normiza bt. Mohd. SMK Anderson, IpohEn. Nordin b. Awang Nor SMK Manek Urai, Kuala Krai, KelantanEn. Mahfudz b. Haji Ahmad SMKA Slim River PerakEn. Arman b. Ishak SMK Raja Lope Nor Rashid, PerakPn. Siti Rosnah bt. Abu Bakar SMK Convent, Ipoh,Perak

Panel Penulis (2005)Pn. Suraya bt. Hashim SMK Seri Titiwangsa, Kuala LumpurEn. Abdul Karim b. Hamid SMK Kg. Jawa, KelangY.M. Tg. Norazlan Tg. Sulaiman SMK Merchang, K. TerengganuEn. Ramlee b. Mat Rani SMK Tg. Mizan Zainal Abidin, K.TrengganuPn. Samsuriyani bt. Ismail SMK Taman Tun Dr Ismail, K.LumpurPn. Arlina Hasmanizar bt. Che Ahmad SMK Segambut Jaya, Kuala LumpurEn. Abd. Majid b. Yusoff SMK Taman Dato Harun, P.Jaya, SelangorEn. Abdul Halim b. Awang SMK Bkt.Gambir, MuarPn. Haidaturayani bt. Md. Noor SMK Khir Johari, BeranangPn. Suhaila bt. Abd. Rahman SMK Bukit Baru, MelakaPn. Sarina bt. Zainuddin PPD Kota Setar, Alor Setar, KedahEn. Ramesh a/l Kanapathy SMK Alam Megah, Shah Alam SelangorPn. Wong Siew Fong SMK Seri Titiwangsa, Kuala LumpurCik Siti Nurhasni bt. Nordin SMK ABI, Jln.Pdg.Melangit, KangarCik Siti Amrah bt. Zakaria SMK Dato' Hj. Mohd. Redza, SerembanPn. Noor Azrina Jasmi SMK Tmn Perumahan Bedaun, WP LabuanPn. Khairul Azlina Khairi SMK Dato, Seri MaharajaLela, Kg. Gajah, PerakEn. 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 MalaysiaOgos 2006