MODUL XVI FRONTPAGE
A. MAKSUD DAN TUJUAN 1. MAKSUD Mahasiswa mengerti pembuatan halaman website. 2. TUJUAN Agar mahasiswa dapat membuat halaman web
B. TEORI
Mengenal FrontPage Microsoft FrontPage merupakan program aplikasi yang digunakan untuk membuat dan menyunting Web serta sekaligus menempatkannya pada server system jaringan internet atau intranet tanpa harus menghadapi kerumitan bahasa pemrograman HTML.
Memulai FrontPage 1. Dari Start, pilih Programs, Microsoft Office, Microsoft FrontPage. 2. Tunggu hingga jendela kerja FrontPage ditampilkan. Mengenal Elemen Dasar FrontPage Baris Judul Toolbar Menu
FrontPage Editor
View Bar
120
!"Baris Judul (title bar), berisi nama program aplikasi yang sedang aktif. !"Menu, berisi barisan perintah berupa menu, seperti File, Tools, dan lainnya. !"Toolbar, berisi tombol-tombol yang digunakan untuk menjalankan suatu perintah dengan cepat dan mudah. !"View Bar, berisi icon-icon yang berfungsi untuk memudahkan anda berpindah tampilan jendela ekrja FrontPage. !"FrontPage Editor, tempat anda bekerja untuk membuat atau menyunting web.
Membuat dan Mendefinisikan FrontPage Web Baru Untuk membuat dan mendefinisikan FrontPage Web baru, langkahnya : 1. Pilih dan klik menu File, New,Page or Web, atau klik tombol New, Web pada toolbar.
Ikon New 2. Kotak dialog Website templates akan ditampilkan.
Pilih dan klik salah satu ikon berikut ini : !"One Page Web, untuk membuat dan mendefinisikan FrontPage Web baru dengan satu halaman web yang masih kosong. !"Empty Web, untuk membuat dan mendefinisikan FrontPage Web baru yang masih kosong.
121
Sebagai contoh anda klik one Page web. 3. Pada tombol daftar Specify the location of the new web, pilih dan ketikkan nama drive dan folder yang anda inginkan 4. Klik OK. FrontPage Web baru dengan satu halaman web yang masih kosong akan ditampilkan
Menyimpan Halaman Web Untuk menyimpan halaman web yang sedang anda buat, caranya klik menu File Save, atau klik toolbar Save.
Menempatkan Beberapa Halaman Web Baru pada FrontPage Web Langkah selanjutnya adalah menempatkan beberapa halaman web. Langkahnya: 1. Ubahlah tampilan FrontPage dengan cara pilih dan klik menu View, Navigation. Atau pada view bar, klik ikon Navigation. Dengan menggunakan navigation, pengaturan hubungan antar halaman web terasa lebih mudah.
122
2. Agar FrontPage secara otomatis menambahkan tombol navigasi di setiap halaman web yang baru, pilih dan klik menu Format, Shared Borders. Kotak dialog Shared borders akan ditampilkan. Pilih All pages. Klik kotak cek Top dan aktifkan Include navigation buttons. Lalu klik OK
3. Untuk menempatkan halaman web baru, Klik kanan mouse di index.htm, pilih New, Page. Sehingga akan menjadi
4. Tambahkan beberapa halaman baru sehingga menjadi berikut : (untuk menambahkan halaman web baru di tempat tertentu, pilih dan klik terlebih dahulu halaman web tersebut. Contoh anda bermaksud menambahkan halaman baru
123
“New Page 4” di bawah web “New Page 1”, maka pilih dan klik “New Page 1”, lalu klik kanan mouse, pilih New, Page.)
5. Untuk memindahkan letak atau posisi halaman web, anda dapat memindahkan dengan menggeser kotak halaman web ke tempat yang diinginkan.
Menghapus Halaman Web Untuk menghapus halaman web yang sudah ditempatkan, caranya pilih dan klik halaman web yang anda inginkan, lalu klik menu Edit, Delete. (misalnya anda ingin menghapus “New Page 5”, maka klik terlebih dahulu “New Page5”.
Mengganti Nama Judul (Title) Halaman Web. Anda dapat mengubah nama judul dengan cara berikut : 1. Pada FrontPage editor, pilih dan klik nama judul halaman web yang anda inginkan. 2. Klik kanan mouse, pilih Rename. Ketikkan nama judul (title) yang anda inginkan. Ubahlah tampilan web sehingga menjadi berikut :
Menyunting dan Memformat Tampilan Halaman Web Bekerja dengan Tampilan Page (Page View) 1. Klik ikon page di View Bar 124
2. Area FrontPage editor ditampilkan dengan menggunakan tampilan normal sebagai tampilan defaultnya. Anda dapat berpindah ke tampilan HTML dan halaman Preview dengan memilih tab yang ada di bagian bawah kiri halaman editor FrontPage.
Mengatur Link 1. Klik ikon Page di View Bar. 2. Di folder list, klik ganda nama file ynag ingin anda lihat halamannya. Sekarang klik ganda index.htm.
3. Klik ganda pada teks Edit the properties for this link etc..
4. Kotak dialog Link Bar Properties akan ditampilkan. Pilih dan klik Child level.
125
5. Klik OK 6. Jangan lupa untuk menyimpan pekerjaan anda. Klik ikon save di toolbar. 7. Sekarang jalankan web yang anda buat. Untuk sementara anda dapat melihat hasil web melalui tab Preview yang ada di bagian kiri bawah halaman. Klik tab Preview. 8. Anda dapat melihat hasil yang ditampilkan dari web yang telah anda buat.
9. Anda klik link-link yang ada. Perhatikan menu-menu link yang ditampilkan ketika anda klik halaman Jurusan ataupun halaman Visi & misi. 10. Untuk memilih jenis tampilan link, anda dapat memilih sesuai keinginan. Caranya klik tab Normal (kembali ke tampilan Normal). Ulangi langkah nomor 3. dari kotak dialog Link Bar Properties, anda dapat memilih pilihan lain selain Child level. Cobalah memilih pilihan yang lain. Klik OK. 11. Simpan pekerjaan anda. 12. Lihat lagi hasilnya melalui tab Preview. Perhatikan perbedaan tampilan link-link yang ada.
Mengetikkan Teks pada Halaman Web
126
Untuk mengedit teks di halman web, pilih ikon Page pada view bar, dan berada pada tampilan normal. Cara menambah teks atau mengedit teks. 1. Pilih halaman web yang ingin anda tambahkan teks dengan cara klik ganda nama filenya melalui folder list. 2. sebagai contoh anda akan menambah teks pada halaman index.htm. ketiklah teks di FrontPage editor seperti anda mengetik naskah di Ms Word.
3. Anda dapat memodifikasi jenis-jenis font, size, alignment, dan pengaturan paragraph sama seperti anda menggunakan program aplikasi Ms Word. 4. Simpan pekerjaan anda. 5. Lihat hasilnya melalui halaman Preview. 6. Tambahkan juga teks di halaman-halaman yang lainnya.
Memberi Latar Belakang (Background) suatu Halaman Web Untuk memberi latar belakang (background) suatu halaman web, langkahnya sebagai berikut : 1. Buka halaman web yang ingin anda berikan background. 2. Pilih dan klik menu Format, Background. Kotak dialog Page Properties akan ditampilkan. Pilih tab Background.
127
!"Untuk menampilkan gambar sebagai background, anda klik Background Picture, lalu pilih gambar yang anda inginkan melalui tombol browse. Pilih gambar yang akan dijadikan background. Klik Watermark jika anda ingin membuat efek watermark. !"Dibagian Colors, anda dapat memilih warna background, warna teks, dan warna hyperlink. 3. Klik OK. Lihat tampilan web anda sekarang.
MenggunakanThemes Anda dapat memanfaatkan format themes untuk memperindah tampilan seluruh halaman web yang anda buat. 1. Pilihlah halaman web yang ingin anda buat themes. Contoh anda akan menggunakan themes untuk halaman web Jenjang (new_page_1.htm). Pilih dan klik menu Format, Theme. Kotak dialog Themes akan ditampilkan.
128
2. Pilihlah macam-macam themes yang ditampilkan, misalnya pilihan themes Arcs, atau anda dapat memilih mana yang anda sukai. Untuk memodifikasi format tampilan themes dapat anda lakukan dengan terlebih dahulu klik tombol Modify. 3. Klik OK. Simpan pekerjaan anda sebelum anda melihat hasilnya melalui tab preview.
Menempatkan Tanggal dan Waktu pada Halaman Web Untuk menyisipkan tanggal dan waktu, langkahnya : 1. Buka halaman web yang ingin dilengkapi dengan tanggal dan waktu 2. tempatkan posisi dimana anda akan meletakkan tanggal dan waktu. Pilih dan klik menu Insert, Date anda Time. Kotak dialog Data and Time properties akan ditampilkan.
!"Klik tombol Date this page was last automatically updated untuk menampilkan informasi tanggal dan waktu yang akan selalu menyesuaikan secara otomatis pada halaman web. !"Anda dapat memilih format tampilan tanggal pada Date format dan tampilan waktu pada Time format.
129
3. Klik OK. Simpan pekerjaan anda. Halaman web anda dilengkapi dengan tanggal dan waktu.
Menambahkan Obyek Gambar (Clip Art) Pada Halaman Web Untuk menempatkan gambar pada halaman web caranya sebagai berikut : 1. Pilih halaman web yang ingin kita sisipkan gambar. 2. Letakkan posisi dimana gambar akan ditempatkan 3. Pilih dan klik menu Insert, Picture, Clip Art. Dikanan halaman akan ditampilkan Insert Clip Art. Pilihdan gambar yang anda inginkan.
4. Simpan pekerjaan anda. Gambar yang anda pilih telah ditempatkan di halaman web.
130
`
Menempatkan Hyperlink pada Halaman Web Hyperlink digunakan untuk menghubungkan informasi pada susatu halaman web yang sama atau halaman web lain. Langkah untuk menyisipkan hyperlink yaitu : 1. Buka halaman web yang ingin diisikan hyperlink. 2. Tempatkan posisi yang anda inginkan, kemudian pilih dan klik Insert, Hyperlink, atau klik tombol hyperlink di toolbar
. Kotak dialog Insert
Hyperlink akan ditampilkan.
Pada kotak dialog tersebut anda dapat melakuikan pengisian dengan memilih salah satu berikut: !"Pada tombol Look in, pilih dan klik drive atau tempat file yang ingin anda hubungkan tersimpan.
131
!"Kotak isian Address, jika anda ingin menghubungkan ke halaman web yang lain. !"E-mail address, untuk membuat sebuah hubungan guna mengirim e-mail pada alamat tertentu. 3. Sebagai contoh anda buat hyperlink di halaman Visi & misi (new_page_2.htm) untuk membuat hubungan ke web www.mentaripagi.com , pada kotak isian address ketikkan web tersebut. Klik OK. Dibawahnya tambahkan untuk menghubungkan ke alamat email dengan cara E-mail address di pilihan link to, lalu pada kotak isian e-mail address ketikkan mailto:
[email protected]. Klik OK. 4. Sekarang jalankan web anda melalui Preview.
Menempatkan Teks Bergerak (Marquee) pada Halaman Web Anda dapat membuat teks bergerak di halaman web anda. Langkahnya sebagai berikut : 1. Buka halaman yang ingin anda tambahkan marquee 2. Tentukan posisi dimana anda ingin meletakkan marquee. Pilih dan klik menu Insert, Web Component, atau gunakan tombol toolbar insert component. Kotak dialog Insert Web Component akan ditampilkan. Pada kotak pilihan Choose an effect, klik marquee. Lalu klik finish.
132
3. Pada kotak dialog Marquee Properties.
!"Text, untuk mengisikan teks yang akan dibuat bergerak !"Direction, untuk mengatur arah pergerakan teks. !"Speed, mengatur kecepatan pergerakan teks. !"Behavior, mengatur jenis pergerakannya !"Size, mengatur tinggi dan lebar area pergerakan teks !"Repeat, mengatur berapa kali pergerakan teks ingin dilakukan !"Background color, memilih warna latar belakang pergerakan teks. !"Tombol Style, untuk mengatur tampilan marquee. 4. Sebagai contoh, pilihlah halaman web Contact Us (new_page_3.htm), lalu ketikkan teks “STMIK Akakom Yogyakarta, Yang Utama dan Yang Pertama”. Aturlah kecepatan, dan lainnya. Lalu Klik OK dan simpan halaman web anda. 5. Jalankan web anda melalui tab Preview.
133
Mempublikasikan FrontPage Web Anda perlu mempublikasikan FrontPage web yang telah anda buat agar dapat dibaca oleh semua pemakai internet atau intranet. Untuk mempublikasikan FrontPage yang anda buat, caranya : 1. Pilih dan klik menu File, Publish Web. Kotak dialog Publish destination akan ditampilkan ketika pertama kali anda melakukan publish web. Masukkan dimana tempat anda akan menyimpan publikasi web. Klik tombol Browse untuk mencari lokasinya. Klik OK.
2. Pada kotak dialog Publish Web, klik kotak cek Include Subwebs bila anda ingin menyertakan semua subweb yang terkait dengan forntpage web yang anda buat.
3. Klik tombol Options, sehingga kotak dialog Options ditampilkan. Changed pages only untuk mempublikasikan ulang hanya halaman web yang mengalami perubahan saja, dan all pages bila anda ingin mempublikasikan ulang semua halaman web.
134
4. Klik OK, lalu klik tombol Publish. Pada kotak dialog Microsoft Frontpage yang ditampilkan, klik tombol Done. 5. Anda juga dapat mempublikasikan FrontPage Web secara lebih luas di Internet dengan menggunakan jasa pelayanan dari ISP (Internet Service Provider) tempat anda berlangganan. Atau anda dapat menggunakan pelayanan lain atau Web Presence Provider (WPPs) yang ditawarkan Microsoft.
Mengunjungi FrontPage Web yang Telah Dipublikasikan Anda dapat mengunjungi web dengan menggunakan web browser yang terpasang pada computer anda, misalnya Internet Explorer. 1. Jalankan web browser. 2. Pada kotak isian address, ketikkan alamat situs web yang ingin anda kunjungi. Misalnya
c:\web\index.php
(sesuaikan
dengan
alamat
ketika
anda
mempublikasikan web). Tekan tombol Enter. Tunggu hingga home page dari situs anda ditampilkan.
135
C. PRAKTIK Buatlah FrontPage web dengan mengikuti langkah-langkah diatas.
D. TUGAS Perbaikilah Web yang anda buat dalam praktik agar lebih menarik lagi.
136
