rpp software web design dreamweafer mx

Created By:ekasbn,A.Md. 1

RENCANA PELAKSANAAN PEMBELAJARAN

1

Satuan Pendidikan : SMK YPLP PERWIRA PURBALINGGA

Mata Pelajaran : Mengoperasikan Software Web Design

Kompetensi Dasar : Mempersiapkan Software Web (Web Design)

Kelas / Semester : X / II

Alokasi Waktu : 15 Jam Pelajaran (3 x Pertemuan)

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


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

b. Kegiatan inti

- Menjelaskan rencana pembelajaran dan tujuan pembelajaran sesuai

dengan silabus

c. Kegiatan penutup

- Guru menyampaikan perlengkapan praktik

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


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


K. Kunci Jawaban

1. Software web design ; perangkat lunak yang berguna untuk

membangun/membuat/mendisain halaman-halaman web, baik yang

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) Document window, berfungsi untuk menampilkan dokumen di mana

anda sekarang bekerja.

3) Document toolbar, berisi tombol dan menu pop-up yang

menyediakan tampilan yang berbeda-beda dari Document Window.


4) Panel groups, merupakan kumpulan panel yang saling berkaitan satu

sama lain, yang dikelompokkan di bawah satu judul.

5) Tag selector, berfungsi untuk menampilkan hierarki tag di sekitar

pilihan yang aktif pada Design View.

6) Property inspector, digunakan untuk melihat dan mengubah berbagai

property obyek atau teks.

7) Files panel, memungkinkan pengaturan file-file atau direktori kerja.

Mengetahui, Kepala Sekolah

KURNIAWAN HERY SANTOSA, S.Pd.

Purbalingga, Januari 2009 Guru Pengampu Web Design

EKA SETYA BUDI NUGROHO, A.Md.



2



Kompetensi Dasar : Mengenali tag-tag HTML, membuat,

membuka, menyimpan file halaman web.


Alokasi Waktu : 25 Jam Pelajaran (5 x Pertemuan)



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.


1. Objek web

2. Fitur pengelolaan file halaman web

3. Tag-tag HTML

4. Teknik penyimpanan file gambar vector


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


1. Praktik dan Alat Peraga

2. Pemberian Tugas Dengan Kerja Individu


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


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


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


D. Instrument Penilaian

1. Apa yang kamu ketahui tentang form?

2. Sebutkan Macam-macam form web design?

3. Apa yang anda ketahui tentang HTML dan web editor?

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

2. Macam-macam Form

a) Input, dengan tipe : text, password, checkbox, radio button, reset,

submit dan hidden.

b) Textarea.

c) Select.

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.


4. Hasil Dokument HTML







3



Kompetensi dasar : Melakukan pembuatan halaman web dengan

software web


Alokasi Waktu : 35 Jam Pelajaran (7 X Pertemuan)



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. Pembuatan web dinamik dengan software web

6. File halaman web dari software web disimpan dengan format: html,

dhtml, xml, dsb.



1. Objek web, menu dan inter-face software web

2. Fitur pengelolaan file software web

3. Fasilitas wizard, libraries atau wizard

4. Teknik pembuatan web dinamik dengan software web

5. Teknik penyimpanan file halaman web dinamik


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


1. Ceramah dan Tanya jawab

2. Praktik


3. Pemberian Tugas Dengan Kerja Individu


1. Pertemuan ke-1 dan 2

a. Pendahuluan

- Menjelaskan tujuan pengelolaan file software web

b. Kegiatan inti

- 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

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


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


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


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


- Menilai hasil praktikum


H. Sumber Belajar


I. Teknik Penilaian

1. Lisan

2. Praktik

3. Laporan atau hasil praktik


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


berfungsi untuk mengosongkan dan atau mengembalikan ke nilai default

data yang ada dalam form.







4



Kompetensi dasar : Uji Kompetensi


Alokasi Waktu : 5 Jam Pelajaran (1 X Pertemuan)



B. Kompetensi Dasar

Uji Kompetensi

C. Indikator

Siswa menguasai pembuatan web design dengan menggunakan dreamweafer

MX 2004


Ujian tertulis tentang Dream weafer MX 2004


1. Ujian Tertulis tentang Dream weafer MX 2004


1. Tes Tertulis



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


I. Teknik Penilaian

Tes tertulis


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 untuk

membangun/membuat/mendisain halaman-halaman web, baik yang

bersifat statis maupun dinamis


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

komponen Dreamweaver berada dalam satu window.

4. Hasil pembuatan halaman web ini setidaknya menghasilkan tampilan pada

web browser seperti gambar berikut ini :





rpp software web design dreamweafer mx

Documents