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

14

3. Cari gambar Insert

4. Selanjutnya atur letak gambar pas pada header tersebut.

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 :