Isinya TIK
Isinya TIK
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
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
2 dari 24
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
3 dari 24
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
4 dari 24
Insert
Windo w
Forma t
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
5 dari 24
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
6 dari 24
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
7 dari 24
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
8 dari 24
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
9 dari 24
Untuk melihat/membuka daftar site yang telah dibuka sebelumnya Untuk menutup frontpage aplikasi
10 dari
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
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
12 dari
Pengaturan toolbar dan ikon Opsi-opsi untuk pengaturan tampilan Untuk pengaturan halaman web
14 dari
15 dari
16 dari
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
17 dari
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
18 dari
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
19 dari
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) ......................................................................................... ....................
20 dari
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. ................................................................................................... ......................
21 dari
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
22 dari
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 !
23 dari
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.
24 dari