P. 1
RPP Software Web Design Dreamweafer MX

RPP Software Web Design Dreamweafer MX

4.0

|Views: 4,135|Likes:
Dipublikasikan oleh EKA SBN

More info:

Published by: EKA SBN on Jun 04, 2009
Hak Cipta:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

08/21/2013

pdf

text

original

RENCANA PELAKSANAAN PEMBELAJARAN 1 Satuan Pendidikan Mata Pelajaran Kompetensi Dasar Kelas / Semester Alokasi Waktu A.

Standar Kompetensi Mengoperasikan Software Web Design B. Kompetensi Dasar Mempersiapkan Software Web (Web Design) C. Indikator 1. Software web design telah terinstalasi dan dapat berjalan normal 2. User manual software web design sudah disediakan dan dipahami 3. Perangkat computer sudah dinyalakan, dengan system operasi dan persyaratan sesuai dengan Installation manual dan SOP yang berlaku. 4. Software web design dijalankan. D. Materi Pemelajaran Pengenalan software web design E. Kegiatan Pemelajaran 1. Menjelaskan fungsi software web design 2. Mengamati proses aktifasi sistem operasi dan software web design dengan seksama 3. Menyalakan computer sesuai dengan Installation manual dan SOP 4. Menjalankan software web design sesuai prosedur. Contoh: Adobe ImageReady, Macromedia Dreamweaver, Macromedia Fireworks, Microsoft Frontpage : SMK YPLP PERWIRA PURBALINGGA : Mengoperasikan Software Web Design : Mempersiapkan Software Web (Web Design) : X / II : 15 Jam Pelajaran (3 x Pertemuan)

Created By:ekasbn,A.Md.

1

F. Metode Pembelajaran 1. Ceramah dan Tanya Jawab 2. Pemberian tugas dengan kerja individu G. Strategi Pembelajaran Pertemuan ke-1 a. Pendahuluan Guru menyampaikan tujuan pemelajaran Menjelaskan rencana pembelajaran dan tujuan pembelajaran sesuai dengan silabus c. Kegiatan penutup Guru menyampaikan perlengkapan praktik b. Kegiatan inti

Pertemuan ke-2 a. Pendahuluan Guru menyampaikan prosedur dan cara pembuatan laporan paktik

b. Kegiatan inti Memberikan prosedur keselamatan kerja dalam instalasi perangkat lunak Software Dreamweafer MX Mengoperasikan Software Dreamweafer MX sesuai prosedur Menjelaskan fungsi software web design Mengamati proses aktifasi sistem operasi dan software web design dengan seksama Menyalakan computer sesuai dengan Installation manual dan SOP

c. Kegiatan penutup Guru memberi tugas mendevinisikan web

Created By:ekasbn,A.Md.

2

Pertemuan ke-3 a. Pendahuluan Guru mengulas kembali pelajaran minggu kemarin

b. Kegiatan inti Menjalankan software web design sesuai prosedur. Contoh: Adobe ImageReady, Macromedia Dreamweaver, Macromedia Fireworks, Microsoft Frontpage c. Kegiatan penutup Guru memberi tugas merancang web sekolah

H. Sumber Belajar Mengoperasikan Software Web Desain dengan menggunakan Dream weafer MX 2004 I. Teknik Penilaian 1. Kuis 2. Pertanyaan Lisan J. Instrument Penilaian 1. Apakah yang anda ketahui tentang software web design?
2.

Apa yang anda ketahui tentang pemrograman web?

3. Sebutkan beberapa software web design yang anda ketahui! 4. Apa yang anda ketahui tentang HTML dan web editor?
5.

Sebutkan bagian dan fungsi dari tampilan Window Dreamweaver MX

Created By:ekasbn,A.Md.

3

K. Kunci Jawaban 1. Software web design ; perangkat lunak yang berguna baik untuk yang membangun/membuat/mendisain bersifat statis maupun dinamis. 2. Pemrograman web, adalah pembuatan halaman web yang didalamnya mengandung unsur bahasa pemrograman disamping tetap menggunakan tag-tag HTML. Biasanya pemrograman web bertujuan untuk membangun web-web dinamis. 3. Software web design : Microsoft Frontpage, Macromedia Fireworks, Macromedia Dreamweaver, Adobe ImageReady, Namo Web editor dan lain – lain. 4. HTML adalah Hyper Text MarkUp Language, yang berfungsi memformat dokumen teks biasa untuk bisa digunakan pada WWW. Web editor dapat diartikan sama dengan pengertian dari software web design, yaitu sebuah perangkat lunak yang berguna untuk membangun/membuat/mendisain dan mengedit halaman-halaman web, baik yang bersifat statis maupun dinamis. 5. Window Dreamweaver MX ini dibagi menjadi 7 bagian, yaitu : Insert Bar, Document Toolbar, Document Window, Panel Groups, Tag Selector, Property Inspector dan Files Panel. 1) Insert bar, memuat tombol-tombol yang berfungsi untuk memasukkan/menyisipkan berbagai jenis obyek seperti gambar, tabel dan layer ke dalam suatu dokumen. Setiap obyek yang dimasukkan dengan meng-klik tombol insert pada insert bar ini adalah seperti halnya memasukkan potongan tag HTML ke dalam halaman yang sedang dibuat. 2) 3) Document window, berfungsi untuk menampilkan dokumen di mana anda sekarang bekerja. Document toolbar, berisi tombol dan menu pop-up yang menyediakan tampilan yang berbeda-beda dari Document Window. halaman-halaman web,

Created By:ekasbn,A.Md.

4

4) 5) 6) 7)

Panel groups, merupakan kumpulan panel yang saling berkaitan satu sama lain, yang dikelompokkan di bawah satu judul. Tag selector, berfungsi untuk menampilkan hierarki tag di sekitar pilihan yang aktif pada Design View. Property inspector, digunakan untuk melihat dan mengubah berbagai property obyek atau teks. Files panel, memungkinkan pengaturan file-file atau direktori kerja.

Mengetahui, Kepala Sekolah

Purbalingga, Januari 2009 Guru Pengampu Web Design

KURNIAWAN HERY SANTOSA, S.Pd.

EKA SETYA BUDI NUGROHO, A.Md.

Created By:ekasbn,A.Md.

5

RENCANA PELAKSANAAN PEMBELAJARAN 2 Satuan Pendidikan Mata Pelajaran Kompetensi Dasar Kelas / Semester Alokasi Waktu : SMK YPLP PERWIRA PURBALINGGA : Mengoperasikan Software Web Design : Mengenali : X / II : 25 Jam Pelajaran (5 x Pertemuan) tag-tag HTML, membuat, membuka, menyimpan file halaman web.

A. Standar Kompetensi Mengoperasikan Software Web Design B. Kompetensi Dasar Mengenali tag-tag HTML, membuat, membuka, menyimpan file halaman web C. Indikator 1. Objek web dan tag-tagHTML dikenali berdasarkan user manual 2. Fitur Pengelolaan file halaman web dapat digunakan, seperti: buat/ create/ new, simpan/save, buka/ open, simpan dengan nama lain/ save as. 3. Tag-tag HTML digunakan untuk membuat halaman web dengan kombinasi: text, image, link, table, layer, form, frame, dsb. 4. File halaman web disimpan dengan format: html. D. Materi Pemelajaran 1. Objek web 2. Fitur pengelolaan file halaman web 3. Tag-tag HTML 4. Teknik penyimpanan file gambar vector

Created By:ekasbn,A.Md.

6

E. Kegiatan Pemelajaran 1. Mengidentifikasi objek yang dipergunakan dalam pembuatan halaman web 2. Menjelaskan tujuan pengelolaan file halaman web 3. Mengidentifikasi fungsi tag-tag HTML dalam pembuatan halaman web 4. Menjelaskan maksud penyimpanan file gambar dengan menggunakan versi dan option atribut lain 5. Mengenali objek web dengan tepat 6. Mengenali fitur pengelolaan file halaman web dengan tepat 7. Mengenali aplikasi tag-tag HTML dalam pembuatan halaman web 8. Mengamati proses penyimpanan file halaman web dengan seksama 9. Memilih objek yang akan dipergunakan dalam pembuatan halaman web dengan tepat 10. Menggunakan fitur pengelolaan file halaman web sesuai tujuannya 11. Menggunakan tag-tag HTML dalam pembuatan halaman web sederhana Menyimpan file halaman web dengan menggunakan format html F. Metode Pembelajaran 1. Praktik dan Alat Peraga 2. Pemberian Tugas Dengan Kerja Individu G. Strategi Pembelajaran Pertemuan ke-1 a. Pendahuluan Menjelaskan tujuan pengelolaan file halaman web

b. Kegiatan Inti Mengidentifikasi objek yang dipergunakan dalam pembuatan halaman web Mengenali objek web dengan tepat Mengenali fitur pengelolaan file halaman web dengan tepat

Created By:ekasbn,A.Md.

7

c. Kegiatan Penutup Memberi tugas mencari contoh web pada internet

Pertemuan ke-2 a. Pendahuluan Mengevaluasi tugas contoh web dan memberi contoh hasil web yang baik b. Kegiatan Inti Mengidentifikasi fungsi tag-tag HTML dalam pembuatan halaman web Mengenali aplikasi tag-tag HTML dalam pembuatan halaman web

c. Kegiatan Penutup Tanyajawab tentang fungsi-fungsi tag-tag HTML

Pertemuan ke-3 a. Pendahuluan Mengevaluasi menyimpan file pada komputer

b. Kegiatan Inti Menjelaskan maksud penyimpanan file gambar dengan menggunakan versi dan option atribut lain Mengenali aplikasi tag-tag HTML dalam pembuatan halaman web Mengamati proses penyimpanan file halaman web dengan seksama Melakukan praktik menyimpan file

c. Kegiatan Penutup Tanya jawab cara-cara menyimpan file dan nengkoppy file

Created By:ekasbn,A.Md.

8

Pertemuan ke-4 a. Pendahuluan Membagi kelompok untuk melaksanakan praktikum

d. Kegiatan Inti Memilih objek yang akan dipergunakan dalam pembuatan halaman web dengan tepat Menggunakan fitur pengelolaan file halaman web sesuai tujuannya

e. Kegiatan Penutup Meminta pembuatan laporan praktikum

Pertemuan ke-5 a. Pendahuluan Mengumpulkan laporan dan menilainya

d. Kegiatan Inti Menggunakan tag-tag HTML dalam pembuatan halaman web sederhana Menyimpan file halaman web dengan menggunakan format html e. Kegiatan Penutup Tanyajawab tag-tag HTML

B. Sumber Belajar Menggunakan Software Web Design Dream Weaver MX 2004 C. Teknik Penilaian 1. Praktik 2. Pertanyaan Lisan

Created By:ekasbn,A.Md.

9

D. Instrument Penilaian 1. Apa yang kamu ketahui tentang form? 2. Sebutkan Macam-macam form web design?
3. 4.

Apa yang anda ketahui tentang HTML dan web editor? Buatlah halaman HTML untuk menampilkan formulir isian biodata anggota, menggunakan editor Notepad.

E. Kunci jawaban
1.

Form merupakan elemen HTML yang berupa blanko (form) yang dipergunakan untuk menjaring informasi dari pengguna. Macam-macam Form a) Input, dengan tipe : text, password, checkbox, radio button, reset, submit dan hidden. b) Textarea. c) Select.

2.

3.

HTML adalah Hyper Text MarkUp Language, yang berfungsi memformat dokumen teks biasa untuk bisa digunakan pada WWW. Web editor dapat diartikan sama dengan pengertian dari software web design, yaitu sebuah perangkat lunak yang berguna untuk membangun/membuat/mendisain dan mengedit halaman-halaman web, baik yang bersifat statis maupun dinamis.

Created By:ekasbn,A.Md.

10

4. Hasil Dokument HTML

Mengetahui, Kepala Sekolah

Purbalingga, Januari 2009 Guru Pengampu Web Design

KURNIAWAN HERY SANTOSA, S.Pd.

EKA SETYA BUDI NUGROHO, A.Md.

Created By:ekasbn,A.Md.

11

RENCANA PELAKSANAAN PEMBELAJARAN 3 Satuan Pendidikan Mata Pelajaran Kompetensi dasar Kelas / Semester Alokasi Waktu A. Standar Kompetensi Mengoperasikan Software Web Design B. Kompetensi Dasar Melakukan pembuatan halaman web dengan software web C. Indikator 1. Efek-efek visual lanjut dipa-hami dan diaplikasikan, seperti: penghalusan, perbesaran, pemecahan, pengaburan. 2. Objek web, menu, dan inter-face yang disediakan software web besertashortcut-nya dikenali berdasarkan user manual 3. Fitur pengelolaan file software web dapat digunakan, seperti: buat/ create/ new, simpan/ save, buka/open, simpan dengan nama lain/ save as. 4. Fasilitas siap pakai seperti wizard, libraries, atau template pada software web dimanfaatkan untuk pembuat-an web sederhana 5. 6. Pembuatan web dinamik dengan software web File halaman web dari software web disimpan dengan format: html, dhtml, xml, dsb. : SMK YPLP PERWIRA PURBALINGGA : Mengoperasikan Software Web Design : Melakukan pembuatan halaman web dengan software web : X / II : 35 Jam Pelajaran (7 X Pertemuan)

Created By:ekasbn,A.Md.

12

D. Materi Pemelajaran 1. Objek web, menu dan inter-face software web 2. 3. 4. 5. Fitur pengelolaan file software web Fasilitas wizard, libraries atau wizard Teknik pembuatan web dinamik dengan software web Teknik penyimpanan file halaman web dinamik

E. Kegiatan Pemelajaran 1. Mengidentifikasi objek web, menu dan interface software web 2. Menjelaskan tujuan pengelolaan file software web 3. Menjelaskan manfaat fasilitas wizard/libraries/ template halaman web sederhana 4. Menjelaskan tahapan proses pembuatan halaman web dinamik dengan software web 5. Menjelaskan motif penyimpanan file halaman web dengan berbagai format 6. Mengenali objek web, menu dan interface dengan tepat 7. Mengenali fitur pengelolaan file software web dengan tepat 8. Mencermati fasilitas wizard/libraries/ template halaman web sederhana 9. Mengamati proses pembuatan halaman web dinamik dengan tekun 10. Mengamati proses penyimpanan file halaman web dengan seksama 11. Menggunakan menu dan interface software web secara tepat 12. Menggunakan fitur pengelolaan file halaman web sesuai tujuannya 13. Membuat halaman web sederhana dengan fasilitas wizard/libraries/ template 14. Membuat halaman web dinamik dengan software web 15. Menyimpan file halaman web dinamik dengan menggunakan format HTML F. Metode Pembelajaran 1. Ceramah dan Tanya jawab 2. Praktik

Created By:ekasbn,A.Md.

13

3. Pemberian Tugas Dengan Kerja Individu G. Strategi Pembelajaran 1. Pertemuan ke-1 dan 2 a. Pendahuluan Menjelaskan tujuan pengelolaan file software web Mengidentifikasi objek web, menu dan interface software web Menjelaskan manfaat fasilitas wizard/libraries/ template halaman web sederhana Menjelaskan tahapan proses pembuatan halaman web dinamik dengan software web c. Kegiatan penutup Memberi contoh pembuatan laporan praktikum b. Kegiatan inti

2. Pertemuan ke-3 a. Pendahuluan Membagi kelompok untuk melakukan praktikum

b. Kegiatan inti Mengenali objek web, menu dan interface dengan tepat Mengenali fitur pengelolaan file software web dengan tepat Menjelaskan motif penyimpanan file halaman web dengan berbagai format c. Kegiatan penutup Menilai kreatifitas siswa dalam pembuatan web Mengingatkan pembuatan laporan praktikum

3. Pertemuan ke-4 a. Pendahuluan Mengumpulkan laporan dan meniai hasil laporan praktikum

Created By:ekasbn,A.Md.

14

b. Kegiatan inti Mencermati fasilitas wizard/libraries/ template halaman web sederhana Mengamati proses pembuatan halaman web dinamik dengan tekun Mengamati proses penyimpanan file halaman web dengan seksama Menggunakan menu dan interface software web secara tepat

c. Kegiatan penutup Mengingatkan pembuatan laporan praktikum

4. Pertemuan ke-5 dan 6 a. Pendahuluan Mengumpulkan laporan praktikum dan menilainya

b. Kegiatan inti Menggunakan fitur pengelolaan file halaman web sesuai tujuannya Membuat halaman web sederhana dengan fasilitas wizard/libraries/ template c. Kegiatan penutup Mengingatkan pembuatan laporan praktikum

5. Pertemuan ke-7 a. Pendahuluan Mengumpulkan laporan praktikum dan menilainya

b. Kegiatan inti Membuat halaman web dinamik dengan software web Menyimpan file halaman web dinamik dengan menggunakan format HTML d. Kegiatan penutup Mengingatkan pembuatan laporan praktikum Menilai hasil praktikum

Created By:ekasbn,A.Md.

15

H. Sumber Belajar Menggunakan Software Web Design Dream Weaver MX 2004 I. Teknik Penilaian 1. Lisan 2. Praktik 3. Laporan atau hasil praktik J. Instrument Penilaian 1. Apakah fungsi dari link, form dan frame dalam pembuatan web? 2. Apa perbedaan frame dan frameset? 3. Apa perbedaan checkbox dan radio button?
4.

Apakah fungsi dari tombol Submit dan Reset?

K. Kunci Jawaban 1. Link, untuk melompat dari satu dokumen ke dokumen atau tempat yang lain, dapat berupa teks maupun gambar. Form, digunakan untuk mengumpulkan informasi dari pengunjung (berinteraksi dengan pengunjung) karena form dapat berupa model isian yang harus diisi pengunjung dan akan dibca oleh pemilik web. Frame, merupakan pembagi halaman. 2. Frame adalah dokumen yang terdapat di dalam frameset dengan border yang mengelilinginya. Sedangkan frameset, adalah suatu frame yang dapat menampung beberapa frame lain di dalamnya dan dapat memiliki beberapa frameset yang lainnya. 3. Checkbox dan radio button memiliki fungsi yang sama yaitu untuk menentukan pilihan dari suatu daftar pilihan. Perbedaanya terletak pada jumlah pilihan yang dapat dipilih. Pada checkbox, pengunjung halaman web dapat memilih beberapa dari daftar pilihan, namun dengan radio button, pengunjung hanya berhak menentukan satu pilihan saja.
4.

Tombol submit berfungsi untuk mengirimkan data yang telah dimasukkan dalam form untuk selanjutnya diolah oleh server. Dan tombol reset

Created By:ekasbn,A.Md.

16

berfungsi untuk mengosongkan dan atau mengembalikan ke nilai default data yang ada dalam form.

Mengetahui, Kepala Sekolah

Purbalingga, Januari 2009 Guru Pengampu Web Design

KURNIAWAN HERY SANTOSA, S.Pd.

EKA SETYA BUDI NUGROHO, A.Md.

Created By:ekasbn,A.Md.

17

RENCANA PELAKSANAAN PEMBELAJARAN 4 Satuan Pendidikan Mata Pelajaran Kompetensi dasar Kelas / Semester Alokasi Waktu A. Standar Kompetensi Mengoperasikan Software Web Design B. Kompetensi Dasar Uji Kompetensi C. Indikator Siswa menguasai pembuatan web design dengan menggunakan dreamweafer MX 2004 D. Materi Pemelajaran Ujian tertulis tentang Dream weafer MX 2004 E. Kegiatan Pemelajaran 1. Ujian Tertulis tentang Dream weafer MX 2004 F. Metode Pembelajaran 1. Tes Tertulis : SMK YPLP PERWIRA PURBALINGGA : Mengoperasikan Software Web Design : Uji Kompetensi : X / II : 5 Jam Pelajaran (1 X Pertemuan)

Created By:ekasbn,A.Md.

18

G. Strategi Pembelajaran 1. Pertemuan ke-1 a. Pendahuluan Memberi waktu kepada siswa untuk belajar

b. Kegiatan inti Ujian tertulis

c. Kegiatan penutup Mengoreksi hasil ujian siswa

H. Sumber Belajar Menggunakan Software Web Design Dream Weaver MX 2004 I. Teknik Penilaian Tes tertulis J. Instrument Penilaian 1. Jelaskan apa yang dimaksud dengan software desain web! 2. Jelaskan definisi dari relative link dan absolute link! 3. Jelaskan perbedaan workspace Dreamweaver 4 dengan Dreamweaver MX?
4.

Buatlah halaman web yang berisi formulir biodata, menggunakan Macromedia Dreamweaver MX 2004!

K. Kunci Jawaban 1. Software design web atau dapat pula disebut sebagai web editor merupakan sebuah perangkat lunak yang berguna web, baik untuk yang membangun/membuat/mendisain bersifat statis maupun dinamis halaman-halaman

Created By:ekasbn,A.Md.

19

2. Relative link adalah link yang dibuat dengan menentukan relative path dokumen tujuan dari dokumen asal berada. Absolute link adalah link yang dibuat dengan menuliskan secara lengkap (absolute) dokumen/alamat (URL) tujuan. 3. Pada workspace Dreamweaver 4, komponen-komponen Dreamweaver berada pada window yang berbeda (memiliki window masing-masing) sedangkan pada workspace Dreamweaver MX, semua komponenkomponen Dreamweaver berada dalam satu window.
4.

Hasil pembuatan halaman web ini setidaknya menghasilkan tampilan pada web browser seperti gambar berikut ini :

Mengetahui, Kepala Sekolah

Purbalingga, Januari 2009 Guru Pengampu Web Design

KURNIAWAN HERY SANTOSA, S.Pd.

EKA SETYA BUDI NUGROHO, A.Md.

Created By:ekasbn,A.Md.

20

You're Reading a Free Preview

Mengunduh
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->