Buku Kerja Siswa Modul 11 Perangkat Lunak Desain WEB

A. PENGANTAR
Perkembangan sains dan menuntut peningkatan kualitas, pengetahuan dan keterampilan kita dalam berkomunikasi. Sehingga kita memerlukan suatu teknologi yang dapat memberikan pengetahuan yang lebih banyak dengan informasi yang mutakhir. Dalam menghadapi perkembangan teknologi komunikasi, kita dituntut untuk belajar sejak dini agar dapat berperan secara optimal. Paket pembelajaran modul 11 ini bertujuan mengenalkan kepada peserta didik tentang penggunaan perangkat lunak desain web untuk menghasilkan karya informasi yang sangat dibutuhkan dalam kehidupan sehari-hari. Banyak hal yang dapat peserta didik pelajari melalui pengamatan, penggalian informasi dari berbagai sumber baik cetak maupun elektronik, serta melalui tugas-tugas praktik, praktikum atau kunjungan studi. Melalui cara seperti itu, peserta didik dapat mempelajari perangkat lunak desain web secara praktis serta mendapatkan keterampilan mengoperasikannya. Hal ini diharapkan dapat menjadi bekal peserta didik dalam menyelesaikan persoalan-persoalan yang terkait ditengah-tengah kehidupan baik di rumah maupun di sekolah. Dalam paket pembelajaran ini peserta didik diharuskan mengikuti dengan seksama melalui pendekatan pemecahan masalah (problem solving) agar peserta didik dapat berpikir sistematis berdasarkan fakta yang ada dan didukung oleh daya kreativitas peserta didik. Buku kerja siswa diharapkan agar peserta didik memiliki cakrawala pemikiran dan
Teknologi Informasi dan Komunikasi (TIK) SLTP Sekolah Bertaraf Internasional 1 dari 24

Buku Kerja Siswa Modul 11 Perangkat Lunak Desain WEB

pengetahuan secara umum ataupun khusus yang banyak dibutuhkan dalam kehidupan sehari-hari.

B. TUJUAN PEMBELAJARAN
Setelah peserta didik mempelajari dengan penuh ketekunan dan mengikuti alur yang ada pada modul 11, diharapkan memiliki bekal kemampuan tentang penggunaan perangkat lunak desain web sebagai berikut. 1. Mengidentifikasi menu dan ikon pada perangkat lunak desain web. 2. Menjelaskan fungsi menu dan ikon pada perangkat lunak desain web. 3. Menggunakan menu dan ikon pada perangkat lunak desain web. 4. Membuat desain web sederhana.

C. ALOKASI WAKTU
Untuk mengikuti pembelajaran modul 11 ini dibutuhkan waktu minimal seperti pada tabel di bawah ini, sedangkan selebihnya peserta didik diharapkan dapat melakukan di luar jam ini. No. 1 2 3 4 Materi Pokok Menu dan Ikon pada Perangkat Lunak Desain Web Fungsi Menu dan Ikon pada Perangkat Lunak Desain Web Penggunaan Menu dan Ikon pada Perangkat Lunak Desain Web Membuat Desain Web Sederhana Jumlah Jumlah Jam 2 2 2 4 10

Teknologi Informasi dan Komunikasi (TIK) SLTP Sekolah Bertaraf Internasional

2 dari 24

Buku Kerja Siswa Modul 11 Perangkat Lunak Desain WEB

KEGIATAN PEMBELAJARAN 1
Menu dan Ikon pada Perangkat Lunak Desain Web A. Standar Kompetensi Membuat Desain Web. B. Kompetensi Dasar Mengidentifikasi menu dan ikon pada perangkat lunak desain web. C. Indikator Pencapaian Hasil Belajar Mengidentifikasi menu dan ikon pada : Menu Bar Standard Toolbar Formatting Toolbar Views Bar D. Alokasi Waktu Dua jam pelajaran E. Materi Pokok Menu dan ikon pada perangkat lunak desain web meliputi : Menu Bar Standard Toolbar Formatting Toolbar Views Bar

Teknologi Informasi dan Komunikasi (TIK) SLTP Sekolah Bertaraf Internasional

3 dari 24

Buku Kerja Siswa Modul 11 Perangkat Lunak Desain WEB

F. Tugas 1. Operasikanlah komputer sehingga tampil lembar kerja Microsoft FrontPage. 2. Melalui praktik amatilah menu dan ikon lembar kerja Microsoft FrontPage dan identifikasi nama perintah pada Menu Bar serta isilah submenu yang ada di masing-masing menu : Menu File Sub Menu New Open Close Send Exit Print Import Save Export Edit Undo Cut Copy Paste Find Paste special Select all Replace Goto bookmark View Page Folders Reports Toolbars Task Refresh Task pane Navigation Hyperlink Menu Sub Menu Menu Frames Table Menu Tools Sub Menu Spelling Options Macro Server Packages Gustomize Add-ins Page settings Page options Insert select fill convert Draw table Delete cells Table properties Marge cell Splitt cell Save Page Save Page as Delete Frame Split frame Frame Properties Open Page in new window Sub Menu

Teknologi Informasi dan Komunikasi (TIK) SLTP Sekolah Bertaraf Internasional

4 dari 24

Buku Kerja Siswa Modul 11 Perangkat Lunak Desain WEB

Insert

Break Layer Syimbol Comment Picture Database File Form Navigation

Windo w

New Window Open in new window 1 new_page_1.htm Close all pages

Forma t

Font Paragraph Position Layers Style Theme Properties Behaviors Background

Help

Microsoft office front page help Contact as Activate Product Microsoft Office online Chek for up dates Detect and repair Show the office Assistan About microsof office front page Customer Feedback option

3. Melalui praktik amatilah menu dan ikon lembar kerja Microsoft FrontPage, dan identifikasi nama perintah pada Standard Toolbar serta isilah nama perintah pada ikon-ikon di bawah ini. Ikon Nama Perintah Ikon Nama Perintah New Open Save Find Publish site Toogle pane Print Preview in Microsoft internet explorer 7 Undo Redo Web component Insert table Insert layer Picture Drawing Insert hyperlink

Teknologi Informasi dan Komunikasi (TIK) SLTP Sekolah Bertaraf Internasional

5 dari 24

Buku Kerja Siswa Modul 11 Perangkat Lunak Desain WEB

Spelling Cut Copy Paste Format painter

Refresh Stop Show all Show layer anchors Microsoft office front page help

4. Melalui praktik amatilah menu dan ikon lembar kerja Microsoft FrontPage, dan identifikasi nama perintah pada Formatting Toolbar serta isilah nama perintah pada ikon-ikon di bawah ini. Ikon Nama Perintah Style Font Font size Bold Italic Underline Align left Align center Align right Justify Increase Decrease Numbering Bullets Decrease indent Increase indent Outside border Highlight Font color

Teknologi Informasi dan Komunikasi (TIK) SLTP Sekolah Bertaraf Internasional

6 dari 24

Buku Kerja Siswa Modul 11 Perangkat Lunak Desain WEB

5. Melalui praktik amatilah menu dan ikon lembar kerja Microsoft FrontPage, dan identifikasi nama perintah pada Views Bar serta isilah nama perintah pada ikon-ikon di bawah ini. Ikon Nama Perintah Show design view Show split view Show code view Show preview view

Teknologi Informasi dan Komunikasi (TIK) SLTP Sekolah Bertaraf Internasional

7 dari 24

Buku Kerja Siswa Modul 11 Perangkat Lunak Desain WEB

KEGIATAN PEMBELAJARAN 2
Fungsi Menu dan Ikon pada Perangkat Lunak Desain Web A. Standar Kompetensi Membuat Desain Web. B. Kompetensi Dasar Menjelaskan fungsi menu dan ikon pada perangkat lunak desain web. C. Indikator Pencapaian Hasil Belajar Menjelaskan fungsi menu dan ikon pada : Menu Bar Standard Toolbar Formatting Toolbar Views Bar D. Alokasi Waktu Dua jam pelajaran E. Materi Pokok Fungsi menu dan ikon pada perangkat lunak desain web meliputi : Menu Bar Standard Toolbar Formatting Toolbar Views Bar

Teknologi Informasi dan Komunikasi (TIK) SLTP Sekolah Bertaraf Internasional

8 dari 24

Buku Kerja Siswa Modul 11 Perangkat Lunak Desain WEB

F. Tugas 1. Jelaskan fungsi menu dan ikon pada Menu Bar di bawah ini ! a. Menu File Menu dan Ikon Fungsi Perintah
Untuk membuka halaman web baru Untuk membuka halaman web yang sudah disimpan sebelumnya Untuk menutup lembar kerja Untuk membuka site Untuk menutup site Untuk menyimpan halaman web Untuk menyimpan halaman web dengan nama/ekstensi yang lain Untuk menyimpan semua halaman web yang terbuka Untuk melakukan pencarian berdasarkan kata kunci (keyword) yang diberikan Untuk melakukan publikasi site ke server Untuk mengimpor file/folder ke direktori site suatu

Untuk mengekspor site ke suatu direktori Untuk mencoba halaman web yang sedang dibuat pada beberapa browser yang telah terinstall di komputer Untuk mengatur property halaman web ketika mau dicetak Untuk mencetak halaman web Untuk mengirim pesan via e-mail Untuk mengatur property halaman web seperti title, description, keyword, dsb. Untuk melihat/membuka daftar file yang telah dibuka sebelumnya

Teknologi Informasi dan Komunikasi (TIK) SLTP Sekolah Bertaraf Internasional

9 dari 24

Buku Kerja Siswa Modul 11 Perangkat Lunak Desain WEB

Untuk melihat/membuka daftar site yang telah dibuka sebelumnya Untuk menutup frontpage aplikasi

Teknologi Informasi dan Komunikasi (TIK) SLTP 24 Sekolah Bertaraf Internasional

10 dari

Buku Kerja Siswa Modul 11 Perangkat Lunak Desain WEB

b. Menu Edit Menu dan Ikon Fungsi Perintah

Untuk undo (tidak jadi) melakukan sesuatu. typing yang tampil pada gambar akan berubah sesuai keadaan Untuk menyalin suatu teks/gambar namun sekaligus menghapus teks itu di tempat asalnya Untuk menyalin suatu teks/gambar Untuk menampilkan apa saja yang ada dalam clipboard Untuk menempelkan suatu gamabar/teks yang sudah dikopi Berisi perintah yang sama dengan paste namun ada pilihan paste tambahan sehingga kita lebih bisa memilih apa saja yang akan di paste-kan Untuk memilih semua yang tampil dilembar kerja Untuk melakukan pencarian dilembar kerja aktiv suatu teks

Untuk melakukan pencarian suatu teks kemudian mengganti teks yang ditemukan dengan teks yang lain Untuk mengarahkan focus layar ke tempat yang telah di-bookmark sebelumnya Untuk membuka quick tag editor

c. Menu View Menu dan Ikon Fungsi Perintah

Untuk menampilkan halaman web aktiv dilembar kerja frontpage Untuk menampilkan folder dilembar kerja frontpage Untuk menampilkan direktori web di server Untuk menampilkan berbagai laporan yang berhubungan dengan website yang sedang dibangun Untuk menampilkan betuk dari navigasi website yang sedang dibangun Untuk menampilkan bentuk alur tautan (hyperlink) dari satu halaman ke halaman Teknologi Informasi dan Komunikasi (TIK) SLTP 24 Sekolah Bertaraf Internasional 11 dari

Buku Kerja Siswa Modul 11 Perangkat Lunak Desain WEB

laindi website yang sedang dibangun Untuk menampilkan daftar yang harus dikerjakan (tasks) ketika kita membangun website, biasanya menu ini muncul ketika kita mulai membangun website dari sebuah twmplate frontpage Untuk pengaturan tampilan ruler dan grid dilembar kerja frontpage Untuk menampilkan tracing image/gambar yang dijadikan panduan dalam membuat halaman web Untuk menampilkan daftar folder dalam direktori local website yang sedang dibangun Untuk menampilkan navigation dilembar kerja frontpage pene

Untuk menampilkan tas pane dilembar kerja frontpage

d. Menu Insert Menu dan Ikon Fungsi Perintah

Untuk menyisipkan break Untuk menyisipkan garis mendatar Untuk menyisipkan layer Untuk menyisipkan frame yang berupa layer Untuk menyisipkan tanggal dan waktu Untuk menyisipkan symbol Untuk menyisipkan komentar Untuk menyisipkan komponen web yang telah disediakan, seperti marquee, button, hit counter, dsb Untuk menambahkan basis data Untuk menambahkan komponen form yang berupa textbook, text area, label, dsb Untuk menyisipkan gambar Untuk menambahkan tombol interaktiv Untuk menambahkan file lain Untuk memberikan penanda

Teknologi Informasi dan Komunikasi (TIK) SLTP 24 Sekolah Bertaraf Internasional

12 dari

Buku Kerja Siswa Modul 11 Perangkat Lunak Desain WEB

Untuk membuat link yang terhubung ke file lain

e. Menu Format Menu dan Ikon Fungsi Perintah

Pengaturan huruf Pengaturan paragraph Pemberian nomor/bullet Pengaturan bentuk garis dan model pewarnaan Pengaturan posisi objek teks/gambar Pengaturan behaviors dari halaman web Pengaturan layer yang digunakan Pengaturan format-format tampilan web yang telah disediakan Pengaturan style dari teks Pengaturan terhadap file style sheet (CSS) yang digunakan Pengaturan transisi dari halaman web Pengaturan background halaman web Pengaturan terhadap template web yang dinamik Membuat format yang sudah ada Pengaturan property terhadap objek yang terpilih

f. Menu Tools Menu dan Ikon Fungsi Perintah

Fasilitas pengecekan pengejaan bahasa Fasilitas kamus Pengaturan kode HTML Pengaturan kompabilitas browser yang digunakan Untuk mengoptimalkan kode HTML Penghapusan, pengubahan macro Untuk penambahan file lain Teknologi Informasi dan Komunikasi (TIK) SLTP 24 Sekolah Bertaraf Internasional 13 dari

Buku Kerja Siswa Modul 11 Perangkat Lunak Desain WEB

Pengaturan toolbar dan ikon Opsi-opsi untuk pengaturan tampilan Untuk pengaturan halaman web

Teknologi Informasi dan Komunikasi (TIK) SLTP 24 Sekolah Bertaraf Internasional

14 dari

Buku Kerja Siswa Modul 11 Perangkat Lunak Desain WEB

g. Menu Table Menu dan Ikon Fungsi Perintah

Utuk melakukan layout Untuk menggambar table Untuk menambah table, kolom, baris, sel, dan judul Untuk menghapus sel Untuk memilih table, kolom, baris, dan sel Untuk menggabungkan beberapa sel menjadi satu sel Untuk membagi sel menjadi beberapa sel Untuk membagi table Untuk mengatur table Untuk mengubah ukuran baris table pada ukuran yang sama Untuk megubah ukuran kolom table pada ukuran yang sama Untuk mengubah ukuran lebar table sesuai isi Untuk mengubah bentuk table ke format teks/sebaliknya Untuk mengisi data Untuk mengatur property dari table, seperti kolom, dsb

h. Menu Frames Menu dan Ikon Fungsi Perintah

Untuk membagi frame menjadi beberapa frame Untuk menghapus frame Untuk membuat halaman baru Untuk menyimpan frame Untuk menyimpan frame dengan nama/ekstensi yang lain Untuk mengatur property dari frame seperti nama, judul, ukuran, dsb

Teknologi Informasi dan Komunikasi (TIK) SLTP 24 Sekolah Bertaraf Internasional

15 dari

Buku Kerja Siswa Modul 11 Perangkat Lunak Desain WEB

i. Menu Window Menu dan Ikon Fungsi Perintah

Untuk membuat halaman web baru Untuk membuka halaman Untuk memilih halaman web dengan nama new_page_1.htm Untuk menutup semua halaman web yang terbuka

j. Menu Help Menu dan Ikon Fungsi Perintah

Untuk menampilkan bantuan Untuk menampilkan asisten office Sambungan langsung (internet) ke Microsoft office Kumpulan dari aplikasi-aplikasi tambahan dari pembuat Microsoft frontpage Cara untuk menghubungi pembuat dari Microsoft frontpage Untuk melakukan cek terhadap hal-hal yang bisa di-update Untuk mendeteksi kerusakan dan memperbaiki Microsoft frontpage Untuk mengaktifkan Microsoft frontpage Umpan balik konsumen pengguna Microsoft frontpage Segala sesuatu tentang Microsoft frontpage

Teknologi Informasi dan Komunikasi (TIK) SLTP 24 Sekolah Bertaraf Internasional

16 dari

Buku Kerja Siswa Modul 11 Perangkat Lunak Desain WEB

2. Jelaskan fungsi menu dan ikon pada Standard Toolbar di bawah ini ! Ikon Nama Perintah Fungsi Perintah New Membuat dokumen baru Open Save Find Publish site Membuka dokumen Menyimpan dokumen Mencari kata Memasang hasil desain web di internet Mencetak dokumen Melihat hasil desain web Cek spelling kata Memotong objek Menyalin objek Meletakkan hasil menyalin Pengaturan alat warna Kembali ke kondisi sebelumnya Menuju kondisi berikutnya Komponen dari web Menyisipkan table Menyisipkan layer Menyisipkan gambar dari file yang tersimpan Menggambar Menyisipkan hyperlink Menampilkan ulang Menghentikan proses Menampilkan semua format Menampilkan petunjuki layer Bantuan informasi

Print Preview Spelling Cut Copy Paste Format painter Undo Redo Web component Insert table Insert layer Insert picture from file Drawing Insert hyperlink Refresh Stop Show all Show layer anchors Microsoft office fronpage

Teknologi Informasi dan Komunikasi (TIK) SLTP 24 Sekolah Bertaraf Internasional

17 dari

Buku Kerja Siswa Modul 11 Perangkat Lunak Desain WEB

3. Jelaskan fungsi menu dan ikon pada Formatting Toolbar di bawah ini ! Ikon Nama Perintah Fungsi Perintah Style Jenis style Font Font size Bold Italic Underline Align left Align center Align right Justify Increase Decrease Numbering Bullets Decrease indent Increase indent Outside border Jenis huruf Ukuran huruf Menebalkan teks/huruf Membentuk miring teks/huruf Memberi garis teks/huruf Meratakirikan objek Meratatengahkan objek Meratakanankan objek Merata kanan-kiri objek Memperbesar huruf Memperkecil hruf Memeberi penomoran Member bullet Mengurangi paragraf Menambah paragraf Membuat garis pada table Merubah warna huruf

Font color

4. Jelaskan fungsi menu dan ikon pada Views Bar di bawah ini ! Ikon Nama Perintah Fungsi Perintah Show design view Melihat tampilan desain Show split view Tampilan dibagi menjadi 2 (desain dan kode) Show code view Melihat tampilan kode program Show preview view Melihat hasil desain web dalam browser internal

Teknologi Informasi dan Komunikasi (TIK) SLTP 24 Sekolah Bertaraf Internasional

18 dari

Buku Kerja Siswa Modul 11 Perangkat Lunak Desain WEB

KEGIATAN PEMBELAJARAN 3
Penggunaan Menu dan Ikon pada Perangkat Lunak Desain Web A. Standar Kompetensi Membuat Desain Web. B. Kompetensi Dasar Menggunakan menu dan ikon pada perangkat lunak desain web. C. Indikator Pencapaian Hasil Belajar Menggunakan menu dan ikon pada : Menu Bar Standard Toolbar Formatting Toolbar Views Bar D. Alokasi Waktu Dua jam pelajaran E. Materi Pokok Penggunaan menu dan ikon pada perangkat lunak desain web meliputi : Menu Bar Standard Toolbar Formatting Toolbar Views Bar

Teknologi Informasi dan Komunikasi (TIK) SLTP 24 Sekolah Bertaraf Internasional

19 dari

Buku Kerja Siswa Modul 11 Perangkat Lunak Desain WEB

F. Tugas 1. Praktikkan cara menggunakan menu dan ikon pada Menu Bar dengan menggunakan fungsi mouse dan fungsi tombol keyboard ! a. Fungsi mouse, langkah-langkahnya adalah : 1) ............................................................................................. ...................... 2) ............................................................................................. ...................... 3) ............................................................................................. ...................... 4) ............................................................................................. ...................... 5) ............................................................................................. ...................... b. Fungsi tombol keyboard : 1) Fungsi tombol Alt, langkah-langkahnya adalah : a) ......................................................................................... .................... b) ......................................................................................... .................... c) ......................................................................................... .................... d) ......................................................................................... .................... e) ......................................................................................... .................... 2) Fungsi tombol Ctrl, langkah-langkahnya adalah : a) ......................................................................................... .................... b) ......................................................................................... .................... c) ......................................................................................... .................... d) ......................................................................................... .................... e) ......................................................................................... ....................

Teknologi Informasi dan Komunikasi (TIK) SLTP 24 Sekolah Bertaraf Internasional

20 dari

Buku Kerja Siswa Modul 11 Perangkat Lunak Desain WEB

2. Praktikkan cara penggunaan salah satu ikon pada Standard Toolbar ! Langkah-langkahnya adalah : a. ................................................................................................... ...................... b. ................................................................................................... ...................... c. ................................................................................................... ...................... d. ................................................................................................... ...................... e. ................................................................................................... ...................... 3. Praktikkan cara penggunaan salah satu ikon pada Formatting Toolbar ! Langkah-langkahnya adalah : a. ................................................................................................... ...................... b. ................................................................................................... ...................... c. ................................................................................................... ...................... d. ................................................................................................... ...................... e. ................................................................................................... ...................... 4. Praktikkan cara penggunaan salah satu ikon pada Views Bar ! Langkah-langkahnya adalah : a. ................................................................................................... ...................... b. ................................................................................................... ...................... c. ................................................................................................... ...................... d. ................................................................................................... ...................... e. ................................................................................................... ......................

Teknologi Informasi dan Komunikasi (TIK) SLTP 24 Sekolah Bertaraf Internasional

21 dari

Buku Kerja Siswa Modul 11 Perangkat Lunak Desain WEB

KEGIATAN PEMBELAJARAN 4
Membuat Desain Web Sederhana A. Standar Kompetensi Membuat Desain Web. B. Kompetensi Dasar Membuat desain web sederhana. C. Indikator Pencapaian Hasil Belajar Membuat Final Project D. Alokasi Waktu 4 Jam Pelajaran E. Materi Pokok Memulai mengoperasikan Microsoft FrontPage Membuat Site Baru Membuat Home Page Membuat CSS (Cascading Style Sheet) Mengintegrasikan Style Sheet Menambahkan Format Mengubah Ukuran Huruf Mengubah Ketebalan Huruf Perataan Teks (Align Text) Indent Text Membuat List (Daftar) Membuat Link ke Halaman Baru Membuat Link Antar Halaman Memasukkan Gambar

Teknologi Informasi dan Komunikasi (TIK) SLTP 24 Sekolah Bertaraf Internasional

22 dari

Buku Kerja Siswa Modul 11 Perangkat Lunak Desain WEB

F. Tugas 1. Amatilah model desain web yang ada di internet ! 2. Bukalah jendela Microsoft FrontPage dan buatlah dokumen baru ! 3. Buatlah sebuah model desain web dengan menggunakan pengaturan background, teks, dan CSS ! 4. Buatlah sebuah model desain web dengan menggunakan fasilitas penyisipan objek yang dapat berupa objek gambar dan/atau objek animasi ! 5. Buatlah sebuah model desain web dengan fasilitas link antar halaman ! 6. Tampilkan hasil desain web yang sudah kalian buat dengan menggunakan browser web !

Teknologi Informasi dan Komunikasi (TIK) SLTP 24 Sekolah Bertaraf Internasional

23 dari

Buku Kerja Siswa Modul 11 Perangkat Lunak Desain WEB

DAFTAR PUSTAKA
Direktorat Pembinaan SMP, 2007, Panduan Pembelajaran dan Penilaian TIK SMP SBI, Departemen Pendidikan Nasional. Direktorat Pembinaan SMP, 2007, Standar Kompetensi dan Kompetensi Dasar TIK SMP SBI, Departemen Pendidikan Nasional. Dr. Erhans A., 2003, Microsoft Office XP, Cirebon: PT. Ercontara Rajawali. Firdaus, 2006, 7 Jam Belajar Interaktif FrontPage 2003 untuk Orang Awam, Palembang: Maxicom. Gregorius Agung, 2000, Microsoft FrontPage 2000 Webbot, Jakarta: PT. Elex Media Komputindo. Mico Pardosi, 2001, Pengenalan Internet, Surabaya: Indah.

Teknologi Informasi dan Komunikasi (TIK) SLTP 24 Sekolah Bertaraf Internasional

24 dari