Anda di halaman 1dari 22

BAB 1  Drag and drop the objek dengan tampilan layout dan desain berbasis

PENGENALAN WEB PAGE MAKER WYSIWYG (What You See Is What You Get).
 Dapat membuat website terdiri dari beberapa pages (halaman) dan
mudah mengaturnya sewaktu-waktu.
 Dapat digunakan untuk membuat website dalam jumlah tidak terbatas.
 Memiliki template yang dapat digunakan untuk membuat web secara
A. Sekilas Tentang Web Page Maker instan
 Dapat menggunakan CSS style sheet untuk mengatur tampilan website
Web Page Maker adalah sebuah aplikasi berorientasi pada desain  Memiliki banyak fungsi : thumbnail, mouse-over effects, ready-to-use
halaman web. Web Page Maker merupakan salah satu aplikasi desain web java script effects, text link style sheet, tables, forms, iFrames dan lain-
yang sangat mudah untuk digunakan (user friendly). Kita dapat dengan lain
mudah mendesain berbagai bentuk halaman web dalam waktu singkat,
 Website yang kita buat dapat diupload sewaktu-waktu dengan fungsi
walaupun belum mempunyai pengalaman atau kemampuan dalam bahasa
Publisher
HTML (Hypertext Mark Up Language) yang biasa digunakan dalam
 Website yang dibuat kompatibel pada berbagai web browser.
pembuatan Web.
Hanya dengan melakukan “drag and drop” images (gambar), musik,
dan video pada layout yang telah disediakan. Selama proses pembuatan, kita C. Mengaktifkan Web Page Maker
dapat memindahkan objek dengan mouse secara mudah. Web Page Maker Sebelum mengaktifkan Web Page Maker, Installah terlebih dahulu software
dilengkapi pula dengan template yang berkualitas, sehingga dapat lebih Web Page Maker ke komputer. Setelah itu, Anda dapat mengaktifkan Web
membantu kita dalam membuat halaman web. Page Maker dengan langkah-langkah sebagai berikut.
Fitur-fitur yang terdapat dalam Web Page Maker adalah thumbnail, • Klik menu Start
mouse-over effects, ready-to-use java script effects, text link style sheet, • Arahkan pointer mouse pada All Programs
tables, forms, iframes dan lain-lain. Dalam Web Page Maker juga • Arahkan pointer mouse pada Web Page Maker v.2
disediakan FTP publisher yang berguna untuk meng-upload website yang • Klik Web Page Maker v.2
kita buat ke hosting, yaitu dengan menekan sebuah tombol publish.
Atau dengan melakukan klik shotcut ikon Web Page Maker V.2 pada
dekstop
B. Keunggulan “Web Page Maker”
Kita dapat membuat halaman web, dengan template atau desain yang
kita inginkan dengan tampilan terlihat Professional. Keunggulan utama dari
Web Page Maker adalah sangat mudah digunakan dan membantu kita
membuat website dalam waktu singkat. Beberapa keunggulan lainnya yang
terdapat pada Web Page Maker adalah :
 Tidak memerlukan pengalaman dan keahliah pemrogaman HTML dan
program web lainnya.

Hal. 1
Hal. 3
Hal. 2

D. Lembar Kerja Keunggulan “Web Page Maker”


Untuk memudahkan kita dalam menggunakan Web Page Maker, kita akan Site panel merupakan jendela untuk mengatur halaman web, seperti
mengenal lembar kerja (layout) dari Web Page Maker. Berikut uraiannya. menambah halaman, mengcopy halaman dan menghapus halaman. Site
panel dapat ditampilkan dan disembunyikan, dengan cara menekan tombol
1. Windows dan Panel Site F8 pada keyboard. Site panel memiliki dua buah tab, yaitu :

Tab Pages, berguna untuk menambah, menggandakan dan menghapus


halaman website.
toolbar Work Window Site panel
Tab Elements, berfungsi untuk menampilkan seluruh elemen halaman
website yang dibuat.

2. Menu pada “Web Page Maker”

Seperti pada program aplikasi lainnya Web Page Maker juga memiliki
Menu yang memudahkan kita untuk melakukan perintah. Beberapa menu
yang terdapat pada Web Page maker adalah.
• Pada File menu terdiri dari Standar menu serperti New, Open dan Save.
Juga terdapat Menu lain untuk melihat tampilan dan upload dokumen
serpertiPreview in Browser dan Publish
• Pada Edit menu terdiri dari standar menu seperti Cut, Copy, Paste,
Undo and Redo. Terdapat juga menu untuk memilih, garis bantu
perintah mengunci, Seperti Select All, Lock/Lock All, Show Grid dan
Show Guide Border
• Page menu terdiri dari menu :
Add New Page : Menambah Halaman (page) baru
Toolbar, merupakan kumpulan ikon-ikon atau tombol yang berfungsi Clone Page : Manggandakan (copy) page
untuk menyisipkan bermacam-macam objek, seperti gambar, teks, tombol Remove Pages : Menghapus page
navigasi ke dalam sebuah dokumen. • Insert menu sebagai alternatif toolbar menyisipkan elemen kedalam
dokumen.
Work Window, merupakan jendela kerja dimana objek dan elemen-
• Format menu berfungsi untuk merubah properties elemen.
elemen grafis ditempatkan. Work Window juga menampilkan dokumen
yang sedang dibuat atau diedit. • Arrange menu merubah urutan page, mengatur posisi elemen dan
menggabungkan dua atau lebih elemen.
• Help menu Menu bantuan tentang program web page maker.

Hal. 4 Hal. 5

BAB 2
Membuat Halaman Web

A. Memulai Membuat Halaman Web


Mengunci sebuah element: Bahasan kali ini mengulas bagaimana membuat sebuah halaman
website. Ada dua cara dalam pembuatan website, yaitu menggunakan Web
Pada saat elemen web dalam posisi dan setup yang benar Anda mungkin Page Maker's Professional Templates atau memulai dari scratch dengan
berharap untuk mencegah dari perubahan akibat dari penambahan dan melakukan dragging dan dropping images, music and video ke dalam
perubahan elemen yang lain.Oleh karena itu kita dapat mengunci dengan sebuah layout.
cara berikut : 1. Membuat sites dengan template
Berikut langkah-langkah membuat site dengan template :
• Pilih Elemen Website yang akan dikunci.. • Klik Menu File
• Klik Edit > Lock. • Klik New From Template, Selanjutnya tampil kotak dialog Select a
Template
Menampilkan garis bantu (Grid):

Untuk menampilkan garis Bantu guna membantu posisi element secara


vertically dan horizontal. Garis Bantu ini ditampilkan dengan perintah
Show Grid.

• Klik template yang diinginkan, misalnya Business 001


• Klik OK.
Hasilnya dapat dilihat sebagai berikut : • Klik OK untuk selesai atau Cancel untuk membatalkan

Hal. 6 Hal. 7

 Mengganti Gambar/Images
• Klik ganda pada posisi teks yang akan dimodifikasi, selanjtunya
akan muncul kotak dialog Open

2. Melakukan Edit Template Site


Setelah Anda membuat site dari template yang ada, tentu ingin
memperbaiki atau memodifikasi sesuai dengan tema website yang akan • Tentukan gambar yang diingikan
dibuat. Adapun cara melakukan edit template adalah sebagai berikut : • Klik Open untuk selesai atau cancel untuk membatalkan

 Melakukan Modifikasi teks  Menghapus Elemen Page


• Klik ganda pada posisi teks yang akan dimodifikasi, selanjutnya • Sorot atau Klik elemen yang akan dihapus
akan muncul Text Editor Window • Klik menu Edit
• Klik Delete atau tekan tombol Delete pada keyboard.
 Memindahkan Page Elements
• Klik element yang akan dipindahkan
• Lakukan drag ke lokasi yang baru pada page.

 Mengubah Links
• Klik pada elemen yang memiliki link
• Klik tombol Hyperlink pada toolbar toolbar.
• Ketik teks yang kita inginkan
Hal. 8 Hal. 9

 Author : Pemilik website atau informasi lainnya


tantang pemilik website
 Keywords : Kata kunci yang dipisahkan oleh tanda baca
koma. Keyword berfungsi sebagai identifikasi search engine.
 Description : Gambaran singkat mengenai website.

Background tab meliputi pengaturan :

• Isikan kolom-kolom yang terdapat pada kotak dialog Hyperlink


• Klik OK untuk selesai
B. Membuat sites form Scratch
1. Mengatur Page Properties
Pengaturan Page Propeties meliputi title, warna background dan
lain-lain. Langkah-langkahnya sebagai berikut :
• Klik ganda atau klik kanan pada area kosong halaman untuk
membuka kotak dialog Page Properties. Terdapat lima tab pada
Page Properties dialog yaitu : General, Background, Appearance,
Advanced and Header.  Background Images : Latar berupa gambar dari
komputer lokal
 Fixed background : Mangatur bakground bersifat
permanen
 Background Musik : Latar berupa musik

General tab meliputi pengaturan :


 Title : Judul (title) website, title ini akan
ditampilkan pada title bar Web Browser.
Hal. 10 Hal. 11

General tab meliputi pengaturan : 2. Melihat tampilan pada Web Borwser.


Melihat tampilan pada web browser sebelum diupload berfungsi
melihat tampilan sebenarnya. Untuk melihat tampilan pada web bowser

lakukan Klik ikon preview pada toolbar atau tekan F5 pada


keyboard

3. Menyimpan Dokumen
Untuk menyimpan hasil kerja kita, cukup dengan menekan ikon
Save pada toolbar atau dengan cara sebagai berikut :
• Klik menu File
• Klik Save, Selanjutnya muncul kotak dialog Save as
 Align : Tata etak objek pada halaman (page)
 Color : Pengaturan Warna
 Character Set : Karakter yang diizinkan

Advanced tab meliputi pengaturan :

• Tentukan folder dimana file akan disimpan pada kotak save in


• Ketik nama file pada kotak File name
• Klik Save untuk selesai
 Special Effect : Efek yang diterapkan untuk even-even
tertentu
• Ketik teks pada kotak Text Editor
• Klik OK untuk selesai
Hal. 12
Hal. 13
BAB 3
Menyisipkan Elemen ke dalam Page Hasil dari penyisipan teks dapat dilihat sebagai berikut :

A. Menyisipkan Teks
Pada Web Page Maker terdapat ikon text tools yang berfungsi
mengatur jenis font, ukuran dan warna. Untuk menyisipkan teks lakukan
langkah-langkah berikut :
• Klik menu Insert
• Klik text, kemudian akan
ditampilkan text area pada page.

Selain dengan langkah di atas menyisipkan text dapat juga


• Klik ganda pada area untuk menulis text dilakukan dengan ikon text pada toolbar.

B. Menyisipkan images (gambar)


Gambar akan memberikan keseimbangan dan keindahan kepada web
yang kita buat. Kita dapat mengambil images dari harddisk komputer atau
menggunakan gambar dari Web Page Maker mages library. Format gambar
yang dapat digunakan berupa JPG, JPEG, GIF, BMP, PNG, ICO, WMF.
Langkah untuk menyisipkan gambar adalah :
• Klik Menu Insert
• Klik Images
• Klik From files..., Selanjutnya muncul kotak dialog Open
Hal. 14

Hal. 15
C. Menyisipkan navigation bar
Navigation bar merupakan tombol yang memandu user untuk
menuju halaman tertentu, Web Page Marker telah menyediakan navigation
bar untuk menyisipkannya perhatikan langkah berikut:
• Klik menu Insert
• Klik Navigation bar..., sehingga muncul kotak dialog Select
Navigation Bar Style

• Tentukan directory dimana gambar berada


• Pilih gambar yang dinginkan
• Klik Open untuk selesai
• Atur posisi gambar
Lihat hasilnya sebagai berikut :

• Pilih bentuk Navigation Bar yang diinginkan


• Klik OK, lalu tampil kotak dialog Navigation bar

Selain dengan langkah di atas menyisipkan images (gambar) dapat juga


dilakukan dengan ikon images pada toolbar
• Klik Menu Insert
• Klik Table, maka akan ditampilkan kotak dialog New Table

• Isikan jumlah kolom dan baris


• Klik OK

Hal. 16
Hal. 17
• Lakukan pengaturan tulisan Navigation Bar pada tab Option, Text,
Layout dan Customize
• Klik OK untuk selesai

• Isikan teks pada kotak dialog Table Editor


• Klik OK untuk selesai.

D. Menyisipkan tabel
Untuk menyisipkan tabel ikuti langkah berikut :
• Tentukan file flash movie
• Klik OK Untuk selesai

Hal. 18

E. Menyisipkan Flash Movie


File animiasi Flash Movie (.SWF) dapat disisipkan ke dalam website.
Berikut langkah-langkahnya :
• Klik menu Insert
• Klik Flash movie...., sehingga muncul kotak dialog open

Hal. 19

F. Menyisipkan Audio/Video
File audio dapat kita sisipkan sebagai latar / background, yaitu
dengan langkah-langkah sebagai berikut :
• Klik menu Insert
• Klik Object
• Klik Audio, kemudian akan tampil kotak dialog Open
• Tentukan directory dimana file audi berada
• Pilih File Audio yang diinginkan
• Klik Open untuk selesai

• Tentukan model java scripts yang diinginkan


• Klik OK untuk selesai.

File audio yang


disisipkan

Hal. 20
G. Menyisipkan File Javascripts
• Klik menu Insert Hal. 21
• Klik Ready-to-use Javascipts, maka akan ditampilkan kotak dialog
BAB 4
Predefined Javascripts Membuat Bahan Ajar Berbasis Web.
A. Membuat halaman Utama Web.
Sebelumnya Anda harus mempersiapkan bahan-bahan yang dibutuhkan
untuk membuat suatu bahan ajar, seperti gambar-gambar yang mendukung,
SK dan KD, dan Materi. Langkah-langkah untuk membuat bahan ajar
adalah sebagai berikut. Buatlah sebuah halaman baru web baru dengan
menggunakan template atau dengan rancangan sendiri.
• Aktifkan Web Page Maker
• Sisipkan gambar untuk halaman utama (klik menu Insert – Images –
From library – Intro headear), perhatikan contoh berikut ini.

• Buatlah kata pengantar (sambutan) untuk web pembelajaran yang Anda


buat dengan menyisipkan Teks. Kemudian buatlah menu yang
menyajikan daftar mata pelajaran. Perhatikan contoh berikut ini.

• Buat judul halaman utama dari web, misalnya “Web Pembelajaran On-
Line – SMA Negeri 47 Jakarta. Perhatikan contoh berikut ini.

Hal. 22

Hal. 23
c. Menentukan Appearance, yang terdiri dari perataan halaman web pada
• Kemudian aturlah tampilan properties halaman, dengan judul halaman browser (pilih Align Center). Warna teks defautl, background default
dan pengaturan-pengaturan lainnya (Klik menu Page – Page Properties). dan warna link.
Perhatikan gambar-gambar di bawah ini.
a. Membuat judul halaman web yang akan tampil pada title bar (baris
judul) web browser.

d. Menentukan Advance (pengaturan lanjutan), yaitu Event, Effect, dan


b. Menentukan background halaman web dengan gambar dan
Duration suatu halaman web tampil pada web browser.
background musik pada halaman web.

Hal. 24
Hal. 25
• Setelah selesai simpan file halaman utama ini, pada folder ICT-Nama
Sekolah. Kemudian coba tampilkan halaman ini ke web browser dengan • Kopikan halaman utama web melalui Site Panel, dengan perintah klik
mengklik menu File – Preview in web browser atau tekan F5. Perhatikan kanan halaman Index – Klik Clone, sehingga akan tampil halaman baru
contoh tampilan halaman utama Web yang kita buat. Page2.

• Kemudian ganti nama halaman Page2 menjadi halaman nama mata


pelajaran, misalnya TIK.

Kini, Anda telah memiliki halman utama dari suatu halaman Web • Selanjutnya lakukan pengaturan-pengaturan pada halaman mata
Pembelajaran On-Line. Anda dapat mengembangkan model halaman web pelajaran, seperti tampak pada gambar berikut.
sesuai dengan selera dan kebutuhan di sekolah masing-masing. Pada
pembahasan selanjutnya kita akan mempersiapkan materi bahan ajar yang
akan kita gunakan pada web pembelajaran On-Line, yang dilengkapi dengan
materi dalam bentuk teks, gambar dan animasi flash.

B. Membuat Halaman Daftar Mata Pelajaran


Pada pembahasan kali ini, kita akan mempersiapkan halaman Daftar Mata
Pelajaran yang kita Ampu. Pada prinsipsnya sama dengan membuat halaman
utama web. Untuk menghasilkan bentuk halaman yang sama, kita dapat
melakukan langkah-langkah sebagai berikut.
Hal. 27
Hal. 26
• Kemudian buatlah sebuah keterangan tentatang Standar Kompetensi dan
KD dari Materi yanga akan di bahas. Perhatikan gambar berikut ini.

C. Membuat Isi (Materi) Bahan Ajar.

Setelah selesai membuat halaman Daftar Mata Pelajaran, yang berisi topik
yang akan dibahas. Selanjutnya, kita membuat halaman web untuk isi topik
bahan Ajar. Anda dapat melengkapi isi bahan ajar dengan gambar-gambar,
dan animasi yang mendukung. Sebaiknya, pada setiap halaman web, kita
buatkan juga Standar Kompetensi dan Kompetensi Dasarnya. Berikut
langkah-langkah untuk membuat isi atau materi dari bahan ajar.
• Kopikan halaman daftar mata pelajaran, dan beri nama menjadi mata
pelajaran 1, misalnya. TIK-1. Pehatikan gambar berikut ini.

• Selanjutnya ketik materi yang akan ditampilkan dengan menggunakan


menu Insert – Teks. Perhatikan gambar berikut ini.

Hal. 28
Hal. 29
• Selanjutnya, Anda dapat mengisikan halaman 2 dengan materi lanjutan
dari halaman pertama. Apabila materi yang di bahas telah selesai. Anda
dapat membuat kembali halaman untuk materi ke-2, misalnya TIK-2.
Dan selanjutnya dengan cara yang sama Anda dapat membuat materi
dengan teks, gambar ataupun animasi Flash. Perhatikan materi TIK-1 hal
2 pada gambar di bawah ini.

• Pada contoh di atas, bahasan materi belum selesai. Anda dapat


menambahkan tombol atau teks untuk melanjutkan ke halaman
berikutnya, kemudian kopikan halaman materi tersebut dengan nama
halaman lanjutan, misalnya, TIK-1 hal 2. Perhatikan gambar berikut ini.

Hal. 30 Hal. 31
Hal. 32

D. Melakukan Link Halaman 2. Link halaman mata pelajaran ke halaman Materi


Anda telah membuat beberapa halaman web yang terdiri dari halaman • Pilih halaman mata pelajaran, misalnya TIK pada Site Panel
utama, dan halaman materi pelajaran. Selanjutnya agar bahan ajar yang • Klik dua kali teks pokok bahasan (materi), karena pokok bahasan
disusun dalam web ini dapat diakses dengan mudah dan nyaman, maka kita dalam bentuk teks, maka akan ditampilkan kotak teks editor, sebagai
harus melakukan link halaman. Berikut urainnya. berikut.

1. Link halaman Index ke halaman mata pelajaran


• Pilih halaman utama (index) pada Site Panel
• Klik dua kali menu bar bar navigasi
• Kemudian pilih menu mata pelajaran dan lakukan pengaturan link
menu mata pelajaran ke halaman mata pelajaran. Yaitu dengan
mengisi Link Type : A Page in My Site, URL : MAPEL, dan Target
_parent. Perhatikan gambar berikut ini.

• Blok teks materi yang akan di link


• Klik tombol set hyperlink . Kemudian akan ditampilkan kotak
dialog Hyperlink.

• Klik OK untuk selesai.


Test hasil link melalui web browser, yaitu dengan menekan tombol F5.
Hal. 33 Hal. 34

• Klik Link to...., kemudian akan ditampilkan kotak dialog Hyperlink.


Isikan dengan link ke dokumen materi selanjutnya. Perhatikan
gambar berikut ini.

• Kemudian isi Link Type, URL, Target, dan Title. Perhatikan contoh
gambar di atas.
• Klik OK untuk selesai.
Test hasil link melalui web browser, yaitu dengan menekan tombol F5.

3. Link ke halaman Selanjutnya


• Pilih halaman materi pada Site Panel, misalnya halaman TIK-1
• Klik kanan pada tombol yang digunakan sebagai navigasi,
perhatikan gambar berikut ini.

• Klik OK, untuk selesai.

Kini Anda, telah memiliki sebuah halaman web pembelajaran. Anda dapat
melengkapi elemen-elemen dan objek lainnya yang diperlukan dalam
pembuatan web di atas, seperti tombol home, back, dan animasi Flash.
Semua teori yang ada pada Bab 1 s.d Bab 3 dapat Anda pelajari untuk
melengkapinya.
Hal. 35 Hal. 36

E. Melakukan Eksport ke HTML


Setelah Anda membuat halaman web pembelajaran. Selanjutnya lakukan
eksport ke HTML dalam folder yang Web ICT-Nama Sekolah. Setelah di
ekspor, kita akan melakukan upload ke hosting. Berikut langkah-langkah
untuk mengeksport ke html.
• Klik menu File
• Klik Export To Html, kemudian tampil kotak dialog Browse For
Folder

F. Mengupload Dokumen HTML ke Hosting


Untuk mengupload dokumen HTML, Anda harus mempunyai hosting.
Anda dapat mendaftar hosting gratis di geocities.com. Untuk itu, Anda
harus mempunyai e-mail dari yahoo terlebih dahulu.
Setelah anda mempunyai email dari yahoo lakukan pendaftaran ke
gocities.com dengan cara sebagai berikut :
• Buka alamat www.geocities.com pada web browser Anda

• Tentukan direktori, dimana file html akan disimpan.


• Klik OK
Kemudian Anda dapat membuka folder Web ICT Nama sekolah melalui
jendela Explore atau My Document. Pada folder tersebut akan tampak
dokumen-dokumen html dan gambar yang telah telah kita buat.

• Klik tombol Sign Up Now untuk mendaftar


Hal. 37 Hal. 38
Selanjutnya anda akan masuk ke halaman Selamat Datang (Welcome)

• Klik Build your web site now


• Isikan data-data yang diperlukan.
Lalu anda akan masuk ke halaman Geocities Control Panel

• Isikan Kode Verifikasi Klik dan Klik Submit


Hal. 39 Hal. 40
• Klik Tab Manage Tunggu proses Upload sampai selesai

• Klik link Easy Upload, selanjutnya akan muncul form easy upload
• Klick Browse untuk mengambil file-file yang akan kita upload
• Kik tombol Upload More Files untuk mengupload file lainya.
• Klik File Manager untuk menuju halaman pengaturan File

• Kik tombol Upload Files untuk memulai Upload


Hal. 41 Hal. 42
Setelah prose Upload selesai Anda dapat melihat hasil tampilan web.

G. Membuat Directory pada Geocities


Sebuah website selain terdiri dari file HTML terdapat juga file-file lain,
seperti gambar yang dikumpulkan pada directory tertentu. Untuk itu harus
disiapkan sebuah directory. Berikut cara membuat directory pada geocities.
• Klik New pada Bagian Subdirectories

• Ketik nama directory pada Create a Subdirectory

• Klik tombol Create Subdirectory