a. tujuan pembelajaran b. alat dan bahan teori pendukung microsoft
TRANSCRIPT
1
Nama Sekolah : SMN 8 padang Mata Pelajaran : Teknologi Informasi & Komunikasi
Semester : II Kelas : VIII
Guru : Irma Permata Sari, S.Pd Waktu : 3 x Pertemuan
Standar Kompetensi: Membuat Desain WEB
A. Tujuan Pembelajaran
Setelah selesai melakukan kegiatan pratikum siswa dapat membuat desain web
sederhana.
B. Alat dan Bahan
1. Komponen PC untuk 1 unit lengkap dengan multimedia
2. Buku petunjuk atau jobsheet.
C. Teori Pendukung
Microsoft FrontPage merupakan sebuah program aplikasi bagian dari Microsoft
Office yang mempunyai kemampuan untuk melakukan desain web. Microsoft FrontPage
memberikan banyak fasilitas untuk melakukan berbagai macam pengaturan (format)
terhadap komponen-komponen web yang digunakan. Microsoft FrontPage
memungkinkan bagi para programer untuk melakukan editing source program dan
menyediakan fasilitas untuk preview desain web yang dibangun secara mudah.
Langkah-langkah yang dilakukan untuk menjalankan Microsoft FrontPage :,
pertama kita klik Start > All Programs > Microsoft Office > Microsoft Office
FrontPage 2003 . Secara otomatis akan terbuka sebuah lembar kerja baru yang masih
kosong dengan nama new_page_1.htm. Berikut bagian-bagian dari Ms. Frontpage:
2
D. Langkah Membuat Desain WEB
a) Membuat Project Baru (New Web Site):
1. Klik File New.
2. Tampil Task Pane seperti berikut.
3. Pada bagian New Website One Page Website Muncul Web Site Templates
Box Pilih One Page Web Site Klik Browse pada bagian Specify The
Location Of New Web Site.
4. Buatlah Sebuah Folder Baru (New Folder) untuk project website yang akan di
buat, missal di: My Computer dengan nama “Myweb”(nama folder terserah saja).
OK Open
5. Pada tampilan Web Site Templates, klik OK.
3
6. Selanjutnya tampil halaman seperti berikut:
Sebuah halaman Web yang masih kosong dan terdapat satu buah file indeks (utama)
b) Membuat Page baru (New Page)
Untuk membuat page ada dua cara:
1). Melalui New New Page Blank Page. Otomatis akan tampil sebuah Page baru.
2). Cara kedua ini lebih efektif digunakan untuk mendesain Web yang terlink secara
otomatis. Caranya:
1. Aktikan Navigation pada bagian viewsbar, maka akan tampil sebagai berikut:
4
2. Klik kanan file indeks.htm New Page.
3. Langkah selanjutnya rename setiap page yang akan dibuat sesuai dengan
kebutuhan menu bar pada web site yang akan dibuat, caranya: klik kanan page
rename atau tekan F2 pada keyboard. Misalnya pada website ini akan dibuat web
tentang Web SMPN 8 Padang dengan Page sebagai berikut: Home (file
indeks.htm berfungsi langsung sebagai home), Profil, Berita Galeri, dan Buku
tamu (Page ini mewakili menu bar pada we yang dibuat).
5
4. Langkah berikutnya kembali pada view bar folder. Secara otomatis akan muncul
page-page yang kita buat tadi. Klik 2X file indeks.htm
c) Memberi Shared Borders
Untuk membuat shared borders yang terdiri atas: Headder, Side bar Right dan left, serta
fotter. Caranya cukup mudah cukup gunakan Shared Border. Namun apabila Shared
Border tidak aktif maka lakukan cara berikut ini terlebih dahulu: klik Tools Page
Option Authoring beri ceklis ( v) pada Shared Border untuk mengaktifkan Shared
Border OK.
Jika sudah dilakukan maka kembali pada file indeks.htm untuk membuat Shared Borders
1. Format Shared Borders
6
2. Muncul Shared Borders Box seperti berikut ini:
Pilih: Apply to : All Page , beri tanda ceklis (√) pada Top, Left + Include
navigation buttons (untuk menampilkan buuton), Right dan Bootom.
3. Klik OK maka secara otomatis halaman utama (file indeks.htm akan terbagi
secara otomatis). Lihat tampilan berikut:
d) Menggunakan tema
Untuk mempercatik desain web, Ms. Frontpage menyediakan beberapa tema, untuk
menggunakannya cara sebagai beikut:
1. Klik menu Format Theme
7
2. Muncul beberapa tema pada jendela Taks Pane, untuk mengaktifkan atau
menggunakan salah satu tema, pilih tema yang diinginkan klik kanan
3. Sehingga muncul kotak konfirmasi “Do You Wan to apply the theme? ”, klik Yes
untuk melanjutkan proses. No digunakan untuk membatal proses.
8
4. Selesai maka tema akan muncul sebagai berikut:
e) Menggunkan gambar tertentu sebagai layout / background
Untuk menggunakan gambar sebagai background langkah sebelumnya thema
harus di nonaktifkan terlebih dahulu, caranya: klik menu Format Theme Pilih pada
Task Pane Theme No Theme. Backgroud akan kembali pada bentuk sebelum
diberikan telah. Gambar background tidak akan bias digunakan selama thema masih
aktif.
9
Setelah langkah diatas setelah itu baru kita dapat memasang sebuah gambar
sebagai background/ layout/ latar web, akan tetapi anda harus siapkan sebuah
image(gambar) yang sesuai dengan thema web yang dibuat dengan ukuran gambar 1024
x 768 Pixcel. Caranya:
1. Klik kanan di area kosong pada page Page Properties
10
2. Tampil kotak Page Properties Pilih Formatting beri tanda ceklis pada
Background Picture Browse gambar (cari gambar yang akan digunakan sebagai
layouts).
11
3. OK. Maka secara otomatis gambar akan menjadi layout dari website yang akan
dibuat.
f) Menggunakan Button Pada menu bar
Pada saat membuat Shared Bordes Link dari Menu bar Button dari setiap page telah
secara otomatis ada, namun masoh perlu diberikan sedikit editan agar terlihat seperti
button (tombol), caranya sebagai berikut:
1. Arah kursor pada link menu bar tersebut klik 2 X
12
2. Sehingga tampil kotak Link Bar Properties Pada general pilih beberapa option
seperti pada gambar berikut:
3. Setelah itu Klik Sytle untuk memilih sytle button gunakan scroll bar pilih salah
satu button yang diinginkan OK.
4. Akan tampil seperti berikut ini.
13
g) Memasang Banner pada Header
Untuk memberikan Banner pada website cara mudahnya dapat kita lakukan dengan
menginsert sebuat gambar pada bagian Header Website, akan tetapi anda harus esdiakan
sebuah gambar yang sessuai dengan tema Website yang dibuat dan cocok ukurannya
untuk dijadikan banner. Caranya sebagai berikut:
1. Letakkan kursor pada header (Tulisan yang ada di header sebaiknya hapus saja).
2. Insert gambar/ picture pada Toolbar
15
h) Mengedit bagian Side bar kanan
Kita dapat menempatkan sebuah gambar kecil atau tulisan pada side bar kanan caranya
dengan meletakkan gambar pada banner. Sebelumnya silahkan delete saja teks comen
yang ada di dalam side bar tersebut.
16
i) Mengedit bagian Footter/ Bottom
Biasanya bagian footer berisikan teks kepemilikan si desainer oleh karena itu maka pada
bagian footer ini buatlah teks sebagai berikut: @ 20112 creative design by: Irma Permata
Sari (ganti dengan nama anda masing-masing). Sebelumnya tulisan coment share dihapu
dulu baru diganti dengan teks tersebut.
j) Mengisi Page
Setelah pengaturan di atas selesai langkah selanjutnya adalah mengisi setiap page yang
dibuat dengan teks / informasi yang terkait. Caranya mudah cukup dengan mengklik 2X
setelah itu isilah dengan teks pada bagian Konten Isi.
Setiap page isinya berbeda-beda, pada web ini misal: pada indeks.htm itu sama halnya
dengan halaman home jadi isinya pra-kata atau berita saja, sedangkan pada profil,htm
berisi profil SMPN 8 Padang, pada personil.htm berisi data warga sekolah, page
gallery.htm berisi foto-foto, dan bukutamu.htm berisi form buku tamu. (isi lah setiap page
anda dengan isi yang sesuai, tidak harus sama dengan contoh yang diberikan)
k) Menyimpan project Website
Mudah sekali cukup tekan icon save pada toolbar. Jika muncul kota konfir masi
embedded file gambar klik OK.
17
E. Evaluasi
Buatlah sebuah desain Web Sederhana dengan tema tertentu (sesuai dengan keinginan)
dalam waktu 3 kali pertemuan tatap muka (3 Minggu). Siapkanlah segala macam teks
informasi , gambar, animasi yang berkaitan dengan Web yang akan dibuat.
Dengan panduan seperti diatas, dan tugas desain web ini akan dikumpul paling lambat 1
hari sebelum ujian RSBI kelas VIII berlangsung (Minggu IV Mei).
18
KARTU EVALUASI
Nama siswa:
Kelas : VIII
Nilai :
Tanda Tangan Guru
Irma Permata Sari, S.Pd
No Langkah Bobot Nilai diperoleh
1. Membuat Project Website 10
2. Membuat Page 10
3. Memberi Shared borders 10
4. Memasang Tema 10
5. Memasang layouts gambar 10
6. Mengisi setiap Page 10
7. Membuat Link, memformat teks, bullets dan
numbering
20
8. Memberikan Efek ( Nilai Bonus) 10
9. Kreatifitas, Seni dan Keindahan Desai Web 10
Jumlah 100
Kesimpulan :