RENCANA PELAKSANAAN PEMBELAJARAN

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

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

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

Created By:ekasbn,A.Md. 4
 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, Purbalingga, Januari 2009

Kepala Sekolah 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 : SMK YPLP PERWIRA PURBALINGGA

Mata Pelajaran : Mengoperasikan Software Web Design
Kompetensi Dasar : Mengenali tag-tag HTML, membuat,
membuka, menyimpan file halaman web.
Kelas / Semester : X / II
Alokasi Waktu : 25 Jam Pelajaran (5 x Pertemuan)

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

Created By:ekasbn,A.Md. 10
 4. Hasil Dokument HTML

Mengetahui, Purbalingga, Januari 2009

Kepala Sekolah 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 : SMK YPLP PERWIRA PURBALINGGA

Mata Pelajaran : Mengoperasikan Software Web Design
Kompetensi dasar : Melakukan pembuatan halaman web dengan
software web
Kelas / Semester : X / II
Alokasi Waktu : 35 Jam Pelajaran (7 X Pertemuan)

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. Pembuatan web dinamik dengan software web
6. File halaman web dari software web disimpan dengan format: html,
dhtml, xml, dsb.

Created By:ekasbn,A.Md. 12
D. Materi Pemelajaran
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

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

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, Purbalingga, Januari 2009

Kepala Sekolah 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 : SMK YPLP PERWIRA PURBALINGGA

Mata Pelajaran : Mengoperasikan Software Web Design
Kompetensi dasar : Uji Kompetensi
Kelas / Semester : X / II
Alokasi Waktu : 5 Jam Pelajaran (1 X Pertemuan)

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

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 untuk
membangun/membuat/mendisain halaman-halaman web, baik yang
bersifat statis maupun dinamis

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 komponen-
komponen Dreamweaver berada dalam satu window.
4. Hasil pembuatan halaman web ini setidaknya menghasilkan tampilan pada
web browser seperti gambar berikut ini :

Mengetahui, Purbalingga, Januari 2009

Kepala Sekolah Guru Pengampu Web Design

KURNIAWAN HERY SANTOSA, S.Pd. EKA SETYA BUDI NUGROHO, A.Md.

Created By:ekasbn,A.Md. 20