Modul Web Maker2

BAB 1 PENGENALAN WEB PAGE MAKER

A. Sekilas Tentang Web Page Maker Web Page Maker adalah sebuah aplikasi berorientasi pada desain halaman web. Web Page Maker merupakan salah satu aplikasi desain web yang sangat mudah untuk digunakan (user friendly). Kita dapat dengan mudah mendesain berbagai bentuk halaman web dalam waktu singkat, walaupun belum mempunyai pengalaman atau kemampuan dalam bahasa HTML (Hypertext Mark Up Language) yang biasa digunakan dalam pembuatan Web. Hanya dengan melakukan “drag and drop” images (gambar), musik, dan video pada layout yang telah disediakan. Selama proses pembuatan, kita dapat memindahkan objek dengan mouse secara mudah. Web Page Maker dilengkapi pula dengan template yang berkualitas, sehingga dapat lebih membantu kita dalam membuat halaman web. Fitur-fitur yang terdapat dalam Web Page Maker adalah thumbnail, mouse-over effects, ready-to-use java script effects, text link style sheet, tables, forms, iframes dan lain-lain. Dalam Web Page Maker juga disediakan FTP publisher yang berguna untuk meng-upload website yang kita buat ke hosting, yaitu dengan menekan sebuah tombol publish. 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

 Drag and drop the objek dengan tampilan layout dan desain berbasis 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 instan  Dapat menggunakan CSS style sheet untuk mengatur tampilan website  Memiliki banyak fungsi : thumbnail, mouse-over effects, ready-to-use java script effects, text link style sheet, tables, forms, iFrames dan lainlain  Website yang kita buat dapat diupload sewaktu-waktu dengan fungsi Publisher  Website yang dibuat kompatibel pada berbagai web browser. C. Mengaktifkan Web Page Maker Sebelum mengaktifkan Web Page Maker, Installah terlebih dahulu software Web Page Maker ke komputer. Setelah itu, Anda dapat mengaktifkan Web Page Maker dengan langkah-langkah sebagai berikut. • Klik menu Start • Arahkan pointer mouse pada All Programs • Arahkan pointer mouse pada Web Page Maker v.2 • Klik Web Page Maker v.2 Atau dengan melakukan klik shotcut ikon Web Page Maker V.2 pada dekstop

Hal. 3 Hal. 2 D. Lembar Kerja Keunggulan “Web Page Maker” Untuk memudahkan kita dalam menggunakan Web Page Maker, kita akan mengenal lembar kerja (layout) dari Web Page Maker. Berikut uraiannya. 1. Windows dan Panel Site

Site panel merupakan jendela untuk mengatur halaman web, seperti menambah halaman, mengcopy halaman dan menghapus halaman. Site panel dapat ditampilkan dan disembunyikan, dengan cara menekan tombol 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”

Toolbar, merupakan kumpulan ikon-ikon atau tombol yang berfungsi untuk menyisipkan bermacam-macam objek, seperti gambar, teks, tombol navigasi ke dalam sebuah dokumen. Work Window, merupakan jendela kerja dimana objek dan elemenelemen grafis ditempatkan. Work Window juga menampilkan dokumen yang sedang dibuat atau diedit.

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 Clone Page : Manggandakan (copy) page Remove Pages : Menghapus page • Insert menu sebagai alternatif toolbar menyisipkan elemen kedalam dokumen. • Format menu berfungsi untuk merubah properties elemen. • Arrange menu merubah urutan page, mengatur posisi elemen dan menggabungkan dua atau lebih elemen.

•

Help menu Menu bantuan tentang program web page maker. Hal. 5

Hal. 4

BAB 2 Membuat Halaman Web

Mengunci sebuah element: Pada saat elemen web dalam posisi dan setup yang benar Anda mungkin berharap untuk mencegah dari perubahan akibat dari penambahan dan perubahan elemen yang lain.Oleh karena itu kita dapat mengunci dengan cara berikut : • •

Pilih Elemen Website yang akan dikunci.. Klik Edit > Lock.

Menampilkan garis bantu (Grid):

A. Memulai Membuat Halaman Web Bahasan kali ini mengulas bagaimana membuat sebuah halaman website. Ada dua cara dalam pembuatan website, yaitu menggunakan Web Page Maker's Professional Templates atau memulai dari scratch dengan melakukan dragging dan dropping images, music and video ke dalam sebuah layout. 1. Membuat sites dengan template Berikut langkah-langkah membuat site dengan template : • Klik Menu File • Klik New From Template, Selanjutnya tampil kotak dialog Select a Template

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 dibuat. Adapun cara melakukan edit template adalah sebagai berikut :  Melakukan Modifikasi teks • Klik ganda pada posisi teks yang akan dimodifikasi, selanjutnya akan muncul Text Editor Window

• •

Tentukan gambar yang diingikan Klik Open untuk selesai atau cancel untuk membatalkan

 Menghapus Elemen Page • Sorot atau Klik elemen yang akan dihapus • 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 •

•

Ketik teks yang kita inginkan

Klik tombol Hyperlink

pada toolbar toolbar.

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.

General tab meliputi pengaturan :  Title : Judul (title) website, title ini akan ditampilkan pada title bar Web Browser.

 Background Images komputer lokal  Fixed background permanen  Background Musik

: Latar berupa gambar dari : Mangatur bakground bersifat : Latar berupa musik

Hal. 10 General tab meliputi pengaturan :

Hal. 11 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 keyboard

pada toolbar atau tekan F5 pada

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  Color  Character Set

: Tata etak objek pada halaman (page) : Pengaturan Warna : Karakter yang diizinkan

Advanced tab meliputi pengaturan :

 Special Effect tertentu

: Efek yang diterapkan untuk even-even

• • •

Tentukan folder dimana file akan disimpan pada kotak save in Ketik nama file pada kotak File name Klik Save untuk selesai

Hal. 12 BAB 3 Menyisipkan Elemen ke dalam Page

• •

Ketik teks pada kotak Text Editor Klik OK untuk selesai Hal. 13 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 :

• •

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

pada toolbar

Pilih bentuk Navigation Bar yang diinginkan Klik OK, lalu tampil kotak dialog Navigation bar

• •

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

• •

D. Menyisipkan tabel Untuk menyisipkan tabel ikuti langkah berikut :

Isikan teks pada kotak dialog Table Editor Klik OK untuk selesai.

• •

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 • Klik Ready-to-use Javascipts, maka akan ditampilkan kotak dialog Predefined Javascripts

Hal. 21 BAB 4 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 OnLine – SMA Negeri 47 Jakarta. Perhatikan contoh berikut ini. Hal. 22

Hal. 23

•

Kemudian aturlah tampilan properties halaman, dengan judul halaman dan pengaturan-pengaturan lainnya (Klik menu Page – Page Properties). Perhatikan gambar-gambar di bawah ini. a. Membuat judul halaman web yang akan tampil pada title bar (baris judul) web browser.

b. Menentukan background halaman web dengan gambar dan background musik pada halaman web.

Hal. 24

c. Menentukan Appearance, yang terdiri dari perataan halaman web pada browser (pilih Align Center). Warna teks defautl, background default dan warna link.

d. Menentukan Advance (pengaturan lanjutan), yaitu Event, Effect, dan Duration suatu halaman web tampil pada web browser.

Hal. 25

•

Setelah selesai simpan file halaman utama ini, pada folder ICT-Nama Sekolah. Kemudian coba tampilkan halaman ini ke web browser dengan mengklik menu File – Preview in web browser atau tekan F5. Perhatikan contoh tampilan halaman utama Web yang kita buat.

Kini, Anda telah memiliki halman utama dari suatu halaman Web Pembelajaran On-Line. Anda dapat mengembangkan model halaman web 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. 26

•

Kopikan halaman utama web melalui Site Panel, dengan perintah klik kanan halaman Index – Klik Clone, sehingga akan tampil halaman baru Page2.

•

Kemudian ganti nama halaman Page2 menjadi halaman nama mata pelajaran, misalnya TIK.

•

Selanjutnya lakukan pengaturan-pengaturan pada halaman mata pelajaran, seperti tampak pada gambar berikut.

Hal. 27

•

Kemudian buatlah sebuah keterangan tentatang Standar Kompetensi dan KD dari Materi yanga akan di bahas. Perhatikan gambar berikut ini.

•

Selanjutnya ketik materi yang akan ditampilkan dengan menggunakan menu Insert – Teks. 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.

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 Anda telah membuat beberapa halaman web yang terdiri dari halaman utama, dan halaman materi pelajaran. Selanjutnya agar bahan ajar yang disusun dalam web ini dapat diakses dengan mudah dan nyaman, maka kita harus melakukan link halaman. Berikut urainnya.

2. Link halaman mata pelajaran ke halaman Materi • Pilih halaman mata pelajaran, misalnya TIK pada Site Panel • Klik dua kali teks pokok bahasan (materi), karena pokok bahasan dalam bentuk teks, maka akan ditampilkan kotak teks editor, sebagai 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.

• Klik OK untuk selesai. Test hasil link melalui web browser, yaitu dengan menekan tombol F5.

•

Blok teks materi yang akan di link

•

Klik tombol set hyperlink dialog Hyperlink.

. Kemudian akan ditampilkan kotak

Hal. 33

Hal. 34

•

Klik Link to...., kemudian akan ditampilkan kotak dialog Hyperlink. Isikan dengan link ke dokumen materi selanjutnya. Perhatikan gambar berikut ini.

•

Klik OK, untuk selesai.

•

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.

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)

• •

Isikan data-data yang diperlukan.

•

Isikan Kode Verifikasi Klik dan Klik Submit

Klik Build your web site now

Lalu anda akan masuk ke halaman Geocities Control Panel

Hal. 39 •

Klik Tab Manage

• •

Klik link Easy Upload, selanjutnya akan muncul form easy upload Klick Browse untuk mengambil file-file yang akan kita upload

Hal. 40 Tunggu proses Upload sampai selesai

• •

•

Kik tombol Upload Files untuk memulai Upload

Kik tombol Upload More Files untuk mengupload file lainya. Klik File Manager untuk menuju halaman pengaturan File

Hal. 41 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

Hal. 42