modul pembelajaran dreamweaver

Upload: haffiuzdin-bin-abd-aziz

Post on 08-Jan-2016

46 views

Category:

Documents


4 download

DESCRIPTION

This is only

TRANSCRIPT

modul pembelajaran grafik berkomputer

Cetakan Pertama Dan Kedua 2003Permurnian Modul Jun 2005

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

Data Penkatalogan Dalam PenerbitanMalaysia. Pusat Perkembangan Kurikulum

Modul Pembelajaran Grafik Berkomputer Pusat Perkembangan Kurikulum Kementerian Pendidikan Malaysia

1. Modul Macromedia Dreanweaver2. Aplikasi Perisian Multimedia dan Grafik3. Judul

Unit 1 : Pengenalan dan Menetapkan Tapak Laman

Objektif

Selepas mengikuti unit pembelajaran ini, murid dapat:

Memulakan perisian Macromedia Dreamweaver MX Menetapkan tapak laman (define site)

Menggunakan Dreamweaver MXSebelum 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 All Programs dan pilih Macromedia dan kemudian Macromedia Dreamweaver MX. Kedua-dua arahan di atas boleh disingkatkan sebagai Start > All Programs > Macromedia > Macromedia Dreamweaver MX.

3. Paparan berikut akan muncul.

Menetapkan tapak laman (define site)

Langkah-langkah:

1. Klik pada menu Site > New Site2. 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 dan klip next.5. Pada ruangan paparan 2, pilih No,... untuk penetapan server.6. Pada ruangan paparan 3, isikan laluan kepada folder yang telah dicipta untuk menyimpan segala fail yang akan anda hasilkan nanti atau klik pada ikon (browse) dan pilih folder Belajar Web dan klik select pada paparan seterusnya. 7. Pastikan ruangan Refresh Local File List Automatically ditanda agar fail dikemaskini di dalam folder secara automatik apabila sesuatu fail baru ditambah atau dibuang. klik pada ikon (browse) dan pilih folder Belajar Web dan klik select pada paparan seterusnya seperti contoh paparan 4.8. Pada paparan 5, pilih No,.. dan seterusnya klik Next. 9. Paparan 6 (summary) menunjukkan ringkasan pilihan yang dipilih akan dipaparkan. Dan seterusnya klik Done untuk menamatkan proses penempatan tapak web. Refleksi

1.Adakah terdapat cara yang lain daripada yang diterangkan di atas untuk memulakan program Macromedia Dreamweaver MX ?

2.Berbincang dengan guru anda tentang proses dan penetapan tapak web dalam folder yang ditetapkan. Unit 2 : Page Properties, Paparan Laman dan Menyimpan Fail

Objektif

Selepas mengikuti unit pembelajaran ini, murid dapat:

Menggunakan fungsi Page Properties.

Menetapkan tajuk pada mukasurat laman.

Menetapkan warna latarbelakang laman.

Memaparkan laman pada default browser atau pelayar internet.

Menyimpan fail dalam cakera keras

Langkah-langkah:

1. Mulakan perisian Macromedia Dreamweaver MX2. Klik Modify > Page Properties

3. Isikan tajuk laman anda pada ruangan Title contohnya Belajar Komputer.

4. Tukar warna latar kepada warna kuning dengan mengklik pada butang warna di ruangan Background dan klik pada butang OK.

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

6. Tutup pelayar web anda.

7. Tukarkan warna latar kepada putih dengan menggunakan langkah 2 dan 4.

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.

Nota : Nama fail mestilah satu perkataan atau taipkan underscore ( _ ) jika mempunyai dua perkataan atau lebih. Contoh : Lamanpertama atau Laman_pertama.

10. Klik pada butang Save.

Refleksi1. Bolehkan tajuk mukasurat laman diubah?

3. 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 semua fail imej daripada CD yang dibekalkan ke folder C:/Belajar Web/gambar. Andaikan E: merupakan pemacu CD anda. Salin fail latar.gif daripada E:/Modul Pembelajaran/ModulDreamweaver/fail sumber ke folder C:/Belajar Web/gambar yang telah anda bina.

2. Buka program Macromedia Dreamweaver MX.

3. Klik pada Modify > Page Properties. Isikan tajuk laman sebagai Imej Latar pada ruangan Title.

4. 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. Kemudian klik pada butang OK. 5. Laman anda akan bertukar seperti di bawah.

6. 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 pada ruangan kerja 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 () manakala shift + enter akan menghasilkan tag break (
).

5. Ubah format teks sebagaimana yang ditunjukkan dengan menggunakan Properties seperti di bawah:

Komputer : Jenis fon = Arial

Saiz fon = 6

Format fon = Bold

Penjajaran = tengah (align center)

Warna fon = merah

Peranti Komputer

Peranti Input dan Output : Jenis fon = Default Font

Saiz fon = 4

Format fon = Italic

Penjajaran = tengah (align center)

Warna fon = biru

6. Simpan fail anda dengan nama yang sama dengan mengklik pada menu File > Save atau menekan kekunci Ctrl + S.

7. 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. 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 telah anda salin. 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

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

4. Satu tetingkap akan muncul. Isikan perkara berikut :

Rows : 4 (Bilangan baris)

Columns : 2 (Bilangan lajur)

Width

: 250 (lebar jadual) dan pilih pixels pada menu tarik turun.

Border

: 1 (Ketebalan garis) Sekiranya ketebalan diletakkan

0, maka garisan jadual tidak akan kelihatan apabila

laman dilihat pada mana-mana browser atau pelayar internet.

Cell Padding: 0

Cell Spacing : 0

5. Klik butang OK.

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.

11. Klik pada ruangan yang terdapat dalam petak jadual untuk memasukkan maklumat

ke dalam jadual yang telah dibina seperti berikut :

12. Simpan fail anda dengan nama yang sama.

13. Uji laman anda dengan menekan kekunci F12.

Refleksi1. 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. Mulakan program Macromedia Dreamweaver MX.

2. Taipkan Tetikus pada ruangan Title dan tekan enter.

3. Taipkan ayat yang berikut pada ruang kerja :

4. Jajarkan teks tersebut ke tengah laman.

5. Masukkan imej tetikus.jpg yang telah disalin di bahagian bawah teks.

6. Simpan fail anda sebagai tetikus.htm.

7. Tanpa menutup fail ini, buka fail lamanpertama.htm yang telah dibina.

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

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

10. 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. Mulakan program Macromedia Dreamweaver MX.

2. Taipkan Pengimbas pada ruangan Title dan tekan enter.

3. Taipkan ayat berikut pada ruang kerja :

4. Jajarkan teks tersebut ke tengah laman.

5. Masukkan imej pengimbas02.jpg yang telah disalin ke bahagian bawah teks.

6. Simpan fail ini sebagai pengimbas.htm.

7. Tanpa menutup fail ini, buka fail lamanpertama.htm yang telah dibina.

8. Letakkan kursor di bahagian bawah jadual.

9. Klik pada butang Insert Image dan pilih fail pengimbas01.jpg.

10. Klik pada butang Browse pada ruangan Link dan pilih fail pengimbas.htm dan klik butang Select.

11. Uji laman yang anda bina dengan menekan kekunci F12. Perhatikan apabila imej pengimbas diklik, anda dihubungkan dengan halaman pengimbas.htm.

12. Tutup pelayar internet anda.

13. 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. Mulakan program Macromedia Dreamweaver MX.

2. Buka fail lamanpertama.htm yang telah dibina.

3. Letakkan kursor di bawah imej pengimbas yang digunakan sebagai pautan.

4. Klik pada butang Insert Email Link.

5. Taipkan E-mel pada ruangan Text dan taipkan alamat e-mel pada ruangan E-mail, contohnya [email protected] pada tetingkap Insert 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.

7. 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:[email protected] 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 MX.

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

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. Buka program Macromedia Dreamweaver MX.

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

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

7. 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. Mulakan program Macromedia Dreamweaver MX.

2. Buka fail lamanpertama.htm yang telah dibina.

3. Klik pada butang Draw Layer.

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

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 yang telah disalin.

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 yang juga telah disalin.

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

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

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 :

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. Uji laman anda dengan menekan kekunci F12. Perhatikan apa yang berlaku apabila anda klik pada tajuk Am tersebut.

10. Tutup pelayar internet dan lakukan perkara yang sama kepada tajuk Penggunaan Tetikus dan Tindakan tetikus dan uji laman anda dengan menekan kekunci F12.11. 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 MX.

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. Paparan di bawah akan muncul dan klik pada butang + pada tetingkap Behaviors . Bawa kursur pada Show Event For dan kemudian pilih IE 4.0 atau ke atas.

6. klik pada butang + pada tetingkap Behaviors dan klik pada Popup Message dan taipkan maklumat dalam kotak Popup Message seperti rajah di bawah.7. Klik pada butang OK.

dpi (dot per inch)

Merujuk kepada kejelasan imej yang diimbas.

8. Taipkan # pada ruangan Link pada tetingkap Properties. Perkataan dpi akan bertukar warna dan bergaris ( dpi )

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 :

1. Mulakan program Macromedia Dreamweaver MX.

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 telah disalin dan klik Select.

5. Klik pada butang Play untuk menyaksikan fail flash tersebut dan klik pada butang Stop untuk memberhentikannya.

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

7. 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. Mulakan program Macromedia Dreamweaver MX.

2. Taipkan Animasi pada ruangan Title dan tekan enter.

3. Bina satu layer pada kedudukan berikut dan masukkan imej basikal.jpg yang telah disalin ke dalam layer tersebut.

4. Klik pada menu Modify > Timelines > Add Behavior to timeline untuk memaparkan tetingkap Timelines.

Tetingkap Timeline

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.

7. Untuk menyaksikan animasi yang telah dibuat, klik pada butang play tanpa dilepaskan.

8. Klik pada check box bagi Autoplay dan Loop pada tetingkap Timelines dan klik OK pada tetingkap yang muncul.

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

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

2. Pilih Frames pada objects panel .

3. Klik pada butang Insert Top Frame.

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.

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. Pastikan ruang Relative To ditukarkan daripada Site Root kepada Document

17. Pilih mainFrame pada ruangan Target pada tetingkap Properties.

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

19. Klik pada menu File > Save Frame.

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

Penaung:Pengarah PPK

Timbalan Pengarah PPK

Penasihat : Ketua Bidang, Bidang Pendidikan Teknologi dan Vokasional (2005)

Ketua Unit, Unit Mata Pelajaran Vokasional (2005)

Ketua Panel: En. Abdul Wahab b. Ibrahim (2003)

PPK

En. Shamsul Bahri b. Baharudin (2003)PPK

En. Mazlan b. Haji Talib (2004-2005)PPKPanel Penulis (2002-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

Maktab Perguruan Persekutuan, P.Pinang

Pn. Nik Ruslah bt. Nik Ab. Rahman

SMK Alor Janggus, Alor Setar

Pn. Norain 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. Arman bin Ishak

SMK Raja Lope Nor Rashid, Perak

Pn. Siti Rohana bt. Abu Bakar

SMK Convent, Perak

En. Mahfudz b. Haji Ahmad

SMKA Slim River Perak

Pn. Nor Hadzlin bt. Mohd. Nor

SMK Putra, Perlis

Panel Penulis (2005)

Pn. Suraya bt. Hashim

SMK Seri Titiwangsa, Kuala LumpurEn. 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 AhmadSMK Segambut Jaya, Kuala LumpurEn. 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, KedahEn. Ramesh a/l Kanapathy

SMK Alam Megah, Shah Alam SelangorPn. Wong Siew Fong

SMK Seri Titiwangsa, Kuala Lumpur

Cik Siti Nurhasni bt. Nordin

SMK ABI, Jln.Pdg.Melangit, KangarCik Siti Amrah bt. Zakaria

SMK Dato' Hj. Mohd. Redza, Seremban

Pn. Noor Azrina Jasmi

SMK Tmn Perumahan Bedaun, WP LabuanPn. 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

En. Haziq b. Ruslan

SMK Jeram, SelangorUrus Setia

En. Abu Sulaiman bin Ibrahim

PPK

En. Abd. Rahman bin Ismail

PPK

En. Mohd. Zubir b. Abdul Rahman

PPK

PENDAHULUAN

pusat perkembangan kurikulum

kementerian pendidikan malaysia

2005

KANDUNGAN

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.

Am

Penggunaan Tetikus

Tindakan Tetikus

Warna latar belakang

Index Layer

Tinggi Layer

Jarak Layer daripada atas

Imej latar belakang

Lebar Layer

Jarak Layer daripada kiri

Nama Layer

Klik

Klik

Klik

Klik

Menukar warna latar keseluruhan jadual

Klik

Klik

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.

Klik

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.

Menukar warna latar pada petak yang tertentu dalam jadual

Menukar warna garisan jadual

Browse imej sebagai latar jadual

Warna garisan jadual

Warna latar jadual

Klik untuk tutup

Klik untuk buka

Klik

Layer Handle

Insert Image

Insert Table

Tukarkan daripada Site Root kepada Document

Bold/Italic

Mengubah Warna Fon

Mengubah Saiz Fon

Mengubah Jenis Fon

Tukarkan dari Document kepada Site Root

Panel Group

Properties Inspector

Ruang Kerja

Insert Bar

Site Panel

Menu bar

Toolbar

modul pembelajaran

pusat perkembangan kurikulum

kementerian pendidikan malaysia

2002

grafik berkomputer

dan

produksi multimedia

muka surat

UNIT 1

Pengenalan dan Menetapkan Tapak Laman1

UNIT 2

Page Properties, Paparan Laman dan Menyimpan Fail4

UNIT 3

Imej Sebagai Latar Laman6

UNIT 4

Teks8

UNIT 5

Grafik10

UNIT 6

Jadual12

UNIT 7

Pautan (Teks)15

UNIT 8

Pautan (Imej)17

UNIT 9

Pautan e-Mel19

UNIT 10

Pautan (Hotspot)22

UNIT 11

Pautan (Rollover Image)24

UNIT 12

Layer26

UNIT 13

Anchor29

UNIT 14

Pop up Message32

UNIT 15

Animasi Flash35

UNIT 16

Animasi37

UNIT 17

Frame40

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 MX. Adalah diharapkan ia dapat membimbing dan membantu guru dan murid untuk menguasai pengetahuan dan kemahiran aplikasi Macromedia Dreamweaver MX.

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.

Klik

Klik 2

Klik 1

Klik

Insert Layer

Butang Play/Stop

Title : Animasi

Layer Handle

Butang Play

Klik

Paparan 3

Paparan 6

Paparan 5

Klik

Paparan 4

Klik

Paparan 3

Paparan 2

Paparan 1

Klik

Klik

Penjajaran Teks

Pusat Perkembangan Kurikulum, Kementerian Pelajaran Malaysia

1 Disember 2005

Ahli Panel Penulis

Modul Pembelajaran Grafik Berkomputer Dan Produksi Multimedia (2002-2005)

PAGE