MS. Frontpage adalah salah satu software buatan Microsoft yang digunakan untuk membuat halaman-halaman situs (website) yang sangat populer, selain mudah digunakan MS. Frontpage juga mempunyai fitur-fitur yang sangat bagus, Frontpage juga sangat kompatible dengan Browser IE yang banyak digunakan orang untuk membuka halaman-halaman website. Memulai MS. Frontpage Untuk memulai Ms. Frontpage dapat dilakukan dengan cara : - Klik Icon MS. Frontpage - Hingga Muncul tampilan dan editor Frontpage sebagai berikut : Menu Standart Menu Formatting Kategori Tampilan Area Kerja Layer Kerja Konsep Video Editing & Dasar-dasar Perancangan Web 12
Keterangan : Layer Kerja Layer kerja dibedakan menjadi tiga bagian yaitu : 1. Layer Normal : digunakan untuk merancang isi website dengan modus WYSWYG (what you see what you get). Pada menu normal ini apa yang kita rancang akan didapat hasilnya seperti gambaran rancangan tersebut. 2. Layer HTML : digunakan untuk pengetikan program HTML atau bahasa script lainnya misalnya PHP, ASP, VBS, JSP dll. 3. Layer Preview : digunakan untuk melihat hasil sementara perancangan yang dilakukan. Tampilan ini sama dengan tampilan yang ada pada Browser IE. Konsep Video Editing & Dasar-dasar Perancangan Web 13
Menu Standart Menu ini digunakan untuk keperluan umum antara lain menyimpan naskah web, preview in browser, mencetak halaman dll. Menu Formatting Digunakan untuk membentuk dan men-format naskah website yang dibuat, misalnya ukuran huruf, warna dll. Konsep Video Editing & Dasar-dasar Perancangan Web 14
Halaman sebuah website mengandung banyak informasi, baik itu informasi gambar atau informasi teks yang disusun dan ditata sehingga dapat menjabarkan informasi utuh yang akan diutarakan. Keunggulan website adalah adanya link (hubungan) antara tiap topik baik itu dalam satu halaman atau antar halaman yang berbeda. Topik-topik yang terhubung dapat dengan cepat dibuka dari link yang disediakan. Menyusun Teks Informasi dalam bentuk teks dapat dimasukkan pada halaman website dengan cara mengetikkan teks tersebut pada layer Normal. Format teks yang disusun dapat dilakukan seperti pengetikan biasa menggunakan MS. Word. Misalnya seperti pada halaman berikut. Memasukkan Gambar (Image) Informasi gambar dapat dimasukkan dalam halaman website dengan cara : Tempatkan pointer pada lokasi gambar/image akan ditempatkan Klik Insert Pilih Picture From File Konsep Video Editing & Dasar-dasar Perancangan Web 15
Pilih File pada lokasi yang telah ditentukan klik Insert Ukuran Gambar dapat diatur dengan cara menggeser titik-titik gambar (image point), sebelumnya gambar disorot (diklik). Gambar juga dapat diatur dengan menggunakan properties gambar. Konsep Video Editing & Dasar-dasar Perancangan Web 16
Memasukkan Tabel Tabel mempunyai peranan yang sangat penting dalam sebuah website. Selain fungsinya dapat menampilkan data dalam bentuk tabulasi, tabel juga dapat digunakan untuk memformat (membentuk) halaman website agar terlihat rapi. Tabel dapat dimasukkan sebagai berikut : Klik Tabel Pilih Insert Pilih Tabel Tentukan jumlah kolom dan baris tabel. Atau tabel dapat juga dimasukkan secara instant dengan mengklik icon Insert Tabel. Sorot Jumlah Kolom dan jumlah Baris Konsep Video Editing & Dasar-dasar Perancangan Web 17
Tabel yang telah dimasukkan dapat diatur bordernya untuk menyembunyikan garis tabel. Hal ini sering dilakukan orang untuk memformat halaman. Langkah menyembunyikan tabel dapat dilakukan sebagai berikut : Klik Kanan pada Tabel yang akan diatur Pilih Tabel Properties Lakukan pengaturan sesuai menu. Konsep Video Editing & Dasar-dasar Perancangan Web 18
Memformat Halaman Halaman website dapat diatur bentuk dan tampilannya dengan dua cara, yaitu pengaturan manual dan pengaturan dengan themes. - Memberikan latar belakang halaman dengan gambar. Klik kanan halaman pilih Page Properties Pada tab Background, dapat dipilih Background Picture atau Background Color - Memasukkan garis horizontal Tempatkan pointer pada lokasi dimana garis horizontal akan dibuat Klik Insert Pilih Hirizontal Line Konsep Video Editing & Dasar-dasar Perancangan Web 19
- Memformat teks/halaman dengan tabel Untuk merapikan margin teks atau gambar pada sebuah halaman website dapat dilakukan dengan menggunakan tabel. Masukkan sebuah tabel utama ke halaman website Atur lebar tabel 90% Atur border tabel = 0 dan alignment = center - Memformat Halaman dengan Themes Untuk format halaman otomatis, MS. Frontpage telah menyediakan dalam bentuk kemasan instan yang terkumpul dalam Themes. Untuk dapat memformat halaman sesuai dengan themes yang ada dapat dilakukan sebagai berikut : Pada halaman yang akan diatur, klik Format pilih Theme Konsep Video Editing & Dasar-dasar Perancangan Web 20
Memformat Paragraf Untuk menentukan bentuk paragraf halaman website dapat dilakukan sebagai berikut : Blok Naskah yang akan diatur. Pilih Menu Format Pilih Paragraf atau Klik Kanan pada Naskah yang diblok Pilih Paragraf. Lakukan pengaturan sesuai dengan menu. Latihan Buatlah halaman Web seperti berikut : Konsep Video Editing & Dasar-dasar Perancangan Web 21
Memformat Paragraf dengan Tabel Untuk dapat membuat paragraph bertingkat yang rapid an teratur marginnya, selain dengan mengatur margin halaman website dapat juga dilakukan dengan memformat halaman (margin) naskah dengan table dimana properties table dibuat hidden, sehingga seolah-olah paragraph tersebut rapi dengan pengaturan margin biasa. Masukan table utama pada naskah halaman web Atur lebar table sesuai ukuran margin pada naskah utama Isikanlah naskah teks pada table tersebut Atur justifikasi ketikan rata tengah Klik kanan didalam table pilih properties table Konsep Video Editing & Dasar-dasar Perancangan Web 22
Atur border size table = 0, dan Alignmet = center Preview naskah kembali dengan masuk ke layer preview. Naskah sudah terlihat rapi dan terletak ditengah layer (dokumen). Membuat Link Link pada website digunakan untuk menghubungkan satu topik ke isi topik tersebut atau dari satu halaman ke halaman lainnya, konsepnya dapat dijabarkan antara lain : Konsep Video Editing & Dasar-dasar Perancangan Web 23
Membuat Link dari Teks - Antar halaman yang berbeda Blok teks yang akan dibuat link Konsep Video Editing & Dasar-dasar Perancangan Web 24
Klik Icon Hyperlink atau Pilih Isert Pilih Hyperlink Isikan nama file pada Address atau sorot File tujuan link, lalu klik OK - Link Antar Topik Dalam satu halaman Buatlah Bookmark topik yang akan jadi tujuan Link, dengan cara : Blok teks tujuan link Klik Insert Pilih BookMark atau tekan Ctrl + G Konsep Video Editing & Dasar-dasar Perancangan Web 25
Beri Nama Bookmark tersebut, lalu klik OK. Teks tujuan yang telah dibuat Bookmark akan ditandai dengan underline putus-putus Lakukan langkah seperti link antar halaman, tetapi tujuan yang dipilih adalah bookmark1 yang dibuat tadi. Membuat Link dari Gambar (Hotspot Link) Pilih bentuk hotspot sesuai bentuk yang disediakan Konsep Video Editing & Dasar-dasar Perancangan Web 26
Buatlah titik hostpot pada gambar Isikan tujuan link hotspot yang dibuat pada input address, lakukan langkah seperti pada link dengan teks. Latihan : Buatlah 3 halaman Website yang terdiri dari Halaman Utama, Halaman Biodata dan Halaman Tamu. Lakukan link dari masing-masing halaman seperti gambar. Bekerja Dengan Frame Frame adalah salah satu teknik pembuatan website dimana beberapa halaman website dijadikan satu tampilan halaman, secara wizard MS. Frontpage ada menyediakan beberapa jenis frame. Untuk menjadi satu tampilan yang terdiri dari frame dapat dilakukan sebagai berikut : Klik File Pilih New Pilih Page or Web Pilih menu page template Konsep Video Editing & Dasar-dasar Perancangan Web 27
Pilih sub menu frame page Pilih jenis frame page yang disukai misalnya Banner and Contents, lalu klik OK Konsep Video Editing & Dasar-dasar Perancangan Web 28
Disini ada 3 halaman yang terangkum dalam satu tampilan, biasanya tampilan atas digunakan untuk header, tampilan kiri digunakan untuk menu dan tampilan kanan yang luas adalah content. Jika halaman pada masing-masingnya belum ada maka dapat dibuat dengan memulai baru dengan cara mengklik New Jika Halaman pada tiap Frame sudah dibuat, maka frame tersebut dapat diatur sesuai dengan tampilan kita dengan cara mengatur propertiesnya. - Klik kanan didalam halaman frame - Pilih frame properties - Atur parameter yang berhubungan dengan frame yang akan ditampilkan Konsep Video Editing & Dasar-dasar Perancangan Web 29