MEMBUAT WEB STATIS

YAYASAN PENDIDIKAN JAMBISMA TITIAN TERAS

Jln. Lintas Jambi Kab. Ma. Jambi, Provinsi Jambi 36363 Telp.(0741) 7551162E-mail : hans_achong_tt@yahoo.com

http://www.hanstt.wordpress.comE-

Website :

MUATAN LOKAL MEMBUAT WEB STATIS

YAYASAN PENDIDIKAN JAMBI SMA TITIAN TERAS

Jln. Lintas Jambi – Ma. Bulian km 21, Pijoan, Ma. Jambi, Provinsi Jambi 36363 Telp.(0741) 7551162 / 27900

mail : hans_achong_tt@yahoo.com; bhoeng.smatt@gmail.com http://www.hanstt.wordpress.com -mail : sma_tt_jambi@yahoo.com Website : www.sma-tt-jambi.com

BURHANI, S.Pd NIP. 132281317

1

/ 27900

2

WEB PAGE MAKER V.2 :

Merupakan program aplikasi yang dirancang untuk membuat website sederhana menjadi dinamis, dengan web page maker anda tidak perlu lagi dipusingkan dengan berbagai macam code HTML (HyperText Mark-up Language). Mengaktifkan WEB PAGE MAKER V.2 : � Klik Menu Start � Pilih All Program (pada classic start menu pilih Program) � Pilih WEB PAGE MAKER V.2

2. Mengidentifikasikan Fungsi Menu, Tool dan Icon

Gambar 2.1 Mengenal Tampilan Lembar Kerja WEB PAGE MAKER V.2

3. Membuat Halaman Web Membuat Halaman Baru

Dapat dilakukan dengan cara : � Klick File – New Site

Tool Bar Lembar Kerja Site Panel

3

Menambah Halaman Web Dapat dilakukan dengan cara : � Pada Site Contents Klick New Page

Menghapus Halaman Web

Dapat dilakukan dengan cara : � Klick Halaman yang akan dihapus – Klick Delete pada Site Contents

Meng-Copy Halaman Web

Dapat dilakukan dengan cara : � Klick Halaman yang akan dicopy – Klick Clone Page pada Site Contents

4. Mendesain Web Memasukkan Text pada Halaman Web

Dapat dilakukan dengan 2 (dua) cara : 1. Klick Insert – Text

2. Klick Text Pada Toolbar

Memasukkan Gambar pada Halaman Web

Dapat dilakukan dengan cara :1. Klick Insert - Image

Contoh : � Cari File gambar Anda � Pilih salah satu gambar � Klick Open

2. Klick Insert - Image page maker)

� Pilih salah satu gambar

� Double Klick (klick 2 dua kali)

Memasukkan Gambar pada Halaman Web Dapat dilakukan dengan cara :

Image – Form file (file gambar yang berada pada data anda)

Cari File gambar Anda

Pilih salah satu gambar

Image – Form library (file gambar yang disediakan oleh web

Gambar 4.1 Tampilan Image Library Pilih salah satu gambar

Double Klick (klick 2 dua kali)

4

gambar yang berada pada data anda)

Form library (file gambar yang disediakan oleh web

Memasukkan Audio pada Halaman Web

Dapat dilakukan dengan cara :� Klick Insert – Object

Contoh :

� Cari File Audio/Musik Anda

� Pilih salah satu File Audio/Musik Anda

� Klick Open

Memasukkan Audio pada Halaman Web Dapat dilakukan dengan cara :

Object – Audio

Cari File Audio/Musik Anda

salah satu File Audio/Musik Anda

5

Memasukkan Video pada Halaman Web

Dapat dilakukan dengan cara :� Klick Insert - Object

1. Windows Media Video, dengan type file (*.avi; *.asf; *.asx; *.wmv; *.wmx)

2. Real Media Video, dengan type file (*.ra; *.rm; 3. Quick Time, dengan type file (*.qt; *.mov; *.movie)

Contoh :

� Cari File Video Anda

� Pilih salah satu File Video Anda

� Klick Open

Memasukkan Video pada Halaman Web Dapat dilakukan dengan cara :

Object Windows Media Video, dengan type file (*.avi; *.asf; *.asx; *.wmv;

Real Media Video, dengan type file (*.ra; *.rm; *.ram) Quick Time, dengan type file (*.qt; *.mov; *.movie)

Cari File Video Anda

Pilih salah satu File Video Anda

6

Windows Media Video, dengan type file (*.avi; *.asf; *.asx; *.wmv;

Memasukkan Animasi Flash pada Halaman Web

Dapat dilakukan dengan cara :� Klick Insert – Flash Movie

Contoh :

� Cari File Flash Anda (.swf)

� Pilih salah satu File flash Anda Anda � Klick Open

Memasukkan Text Berjalan (Marquee) pada Halaman Web

Dapat dilakukan dengan cara :� Klick Insert – Marquee

Memasukkan Animasi Flash pada Halaman Web Dapat dilakukan dengan cara :

Flash Movie

Cari File Flash Anda (.swf)

Pilih salah satu File flash Anda Anda

Memasukkan Text Berjalan (Marquee) pada Halaman Web Dapat dilakukan dengan cara :

Marquee

7

8

Memasukkan Animasi Java pada Halaman Web Dapat dilakukan dengan cara : � Klick Insert – Ready-to-use Java Scripts

Gambar 4.2 Tampilan JavaScript � Pilih salah satu � Klick OK

Memasukkan Warna Background pada Halaman Web

Dapat dilakukan dengan cara : � Klick Page – Page Properties - Appearance

Gambar 4.3 Tampilan Page Properties - Appearance

Memberikan Tombol pada Halaman Web

Dapat dilakukan dengan cara :� Klick Insert – Navigation Bar

Gambar 4.4 Tampilan

� Pilih salah satu � Klick OK

Gambar 4.5 Tampilan

Memberikan Tombol pada Halaman Web Dapat dilakukan dengan cara :

Navigation Bar

ambar 4.4 Tampilan Navigation Bar Style

ambar 4.5 Tampilan Navigation Bar Properties

9

10

Memberikan Background Music pada Halaman Web Dapat dilakukan dengan cara : � Klick Page – Page Properties - Background

Gambar 4.6 Tampilan Page Properties – Background

� Klick OK

5. Membuat halaman Web Pribadi dengan Template Memilih Web Template

Dapat dilakukan dengan cara : � Klick File

� New Site form Template

11

Gambar 5.1 Tampilan form Template

� Pilih Template, sebagai contoh penulis memilih Template Personal � Pilih salah satu, Contoh : Personal002

� Klick OK

� Pada Template personal002 telah disediakan 3 halaman web

1. index 2. work 3. articles

� Namun pada Template personal002 kita juga dapat menambahkan

halaman (baca point 3 pada halaman 2 diatas)

� Untuk melihat hasilnya di Browser klick File – Preview in Browser (Short Cut F5)

12

Gambar 5.2 Tampilan Template Personal002 pada browser Internet explorer

Mengedit Halaman Web Template

1. Mengedit Text Dapat dilakukan dengan cara :

� Klick Kanan (pada text yang akan dirubah) – Edit text

13

Gambar 5.3 Tampilan Text Editor

� OK

� Sebagai contoh penulis akan mencoba merubah text pada halaman index, seperti dibawah ini :

2. Mengganti Gambar

Dapat dilakukan dengan cara : � Klick Kanan (pada gambar yang akan dirubah) – Change Image

14

Gambar 5.4 Tampilan Change Image

� Pilih salah satu

� Open

6. Menyimpan Halaman Web Menyimpan File dalam bentuk HTML (standar ektension pada website) Dapat dilakukan dengan cara :

� Klick File – Export to HTML

� Sebagai Contoh Penulis menyimpannya pada Folder

� Klick Make New FolderWeb)

� OK Menyimpan File dalam bentuk Web Page Maker V.2 (.wss)

� Klick File – Save As� Sebagai Contoh Penulis menyimpannya pada Folder

Document\Latihan Web� Dengan File Name :

Sebagai Contoh Penulis menyimpannya pada Folder My Document

Make New Folder (untuk membuat folder baru dengan nama

Menyimpan File dalam bentuk Web Page Maker V.2 (.wss) Save As

Sebagai Contoh Penulis menyimpannya pada Folder My Latihan Web

Dengan File Name : website saya

15

My Document

(untuk membuat folder baru dengan nama Latihan

7. Menampilkan Halaman Web yang telah di Export Setelah File Di Export dalam bentuk HTML, maka kita dapat melihat hasilnya dengan cara :

a. Buka Explorer (Klick Kanan pada menu Start b. Klick dua kali pada Folder c. Klick dua kali pada Folder d. Pada Folder Latihan Web Klick dua kali pada file

8. Mengedit Halaman Web yang telah di SimpanMengedit Halaman dalam bentuk Web Page Maker V.2 (.wss)

a. Buka Explorer (Klick Kanan pada menu Start b. Klick dua kali pada Folder c. Klick dua kali pada Folder d. Klick dua kali pada File

Mengedit Halaman dalam bentuk

Untuk mengedit halaman dalam bentuk Software lain seperti Microsoft Frontpage, dikarenakan software Maker V.2 tidak mendukung

Sumber : Modul

Menampilkan Halaman Web yang telah di Export Setelah File Di Export dalam bentuk HTML, maka kita dapat melihat hasilnya

Explorer (Klick Kanan pada menu Start – Pilih Explorer) Klick dua kali pada Folder My Document Klick dua kali pada Folder Latihan Web Pada Folder Latihan Web Klick dua kali pada file Index (index.html)

Mengedit Halaman Web yang telah di Simpan laman dalam bentuk Web Page Maker V.2 (.wss)

Buka Explorer (Klick Kanan pada menu Start – Pilih Explorer)Klick dua kali pada Folder My Document Klick dua kali pada Folder Latihan Web Klick dua kali pada File website saya

Mengedit Halaman dalam bentuk HTML (standar ektension pada website)Untuk mengedit halaman dalam bentuk HTML, anda dapat menggunakan Software lain seperti Microsoft Frontpage, dikarenakan software

tidak mendukung ektension HTML.

Sumber : Modul Pengembangan Bahan Ajar dan Bahan Ujian Berbasis ICT Direktorat Pembinaan Sekolah Menengah Atas (Dit. PSMA)

Departemen Pendidikan Nasional (DEPDIKNAS) Jakarta

16

Setelah File Di Export dalam bentuk HTML, maka kita dapat melihat hasilnya

(index.html)

Pilih Explorer)

HTML (standar ektension pada website) , anda dapat menggunakan

Software lain seperti Microsoft Frontpage, dikarenakan software Web Page

Pengembangan Bahan Ajar dan Bahan Ujian Berbasis ICT enengah Atas (Dit. PSMA)

Departemen Pendidikan Nasional (DEPDIKNAS) Jakarta