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: 1
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. 2
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: 3
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). 4
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 5
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 6
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. 7
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. 8
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 9
2. Tampil kotak Page Properties Pilih Formatting beri tanda ceklis pada Background Picture Browse gambar (cari gambar yang akan digunakan sebagai layouts). 10
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 11
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. 12
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 13
3. Cari gambar Insert 4. Selanjutnya atur letak gambar pas pada header tersebut. 14
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. 15
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. 16
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). 17
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 20 numbering 8. Memberikan Efek ( Nilai Bonus) 10 9. Kreatifitas, Seni dan Keindahan Desai Web 10 Jumlah 100 Kesimpulan : 18