Mendesain Halaman WEB

(Dreamweaver CS3 – bag. 2 )

Pada bagian yang lalu kita sudah membahas tentang Mengatur Properti Halaman Web sampai dengan tahap Mengisi bagian Latar Belakang dengan gambar. Selanjutnya kita akan membahas tahap yang masih terkait dengan mengatur Properti Halaman web.

1. Mengisi bagian background dengan warna.

Pilihan Background pada kotak dialog Page Properties digunakan untuk mengisi latar belakang halaman web dengan warna. Pemberian warna latar belakang ini dapat kita berikan jika kita tidak ingin memberikan latar belakang halaman web dalam bentuk gambar.

Dreamweaver akan memberikan pilihan warna dengan mengklik tombol dropdown pada bagian background , kemudian akan tampil pilihan warna. Pilihlah salah satu warna dengan menggunakan pointer mouse. Jika kita ingin memilih warna lebih banyak lagi, kita bisa memilih tombol System Color Picker. Sedangkan untuk membatalkan proses pemilihan warna, kita dapat mengklik tombol Default Color sehingga warna akan kembali menjadi warna default, yaitu warna Putih.

2. Menggunakan Warna Default untuk teks pada halaman web.

Text Color pada kotak dialog Page Properties digunakan untuk menentukan warna default halaman web. Dalam penentuan warna ini, kita dapat mengaturnya dengan cara yang sama seperti saat kita mengatur warna latar belakang. Warna default untuk teks yang biasa digunakan adalah warna hitam.

3. Menentukan warna untuk teks Link.

Selain warna default untuk teks pada halaman web, kita juga dapat mengatur warna untuk jenis teks lainnya, seperti :

a. Links, warna yang akan digunakan pada semua teks dan email link yang mengandung hyperlink.

b. Visited Links, warna yang akan digunakan pada link yang sudah pernah dikunjungi.

c. Active Links, warna yang akan digunakan pada link yang sedang ditunjuk atau pada saat pointer mouse masih dalam keadaan ditekan pada teks link.

d. Rollover Links, warna yang akan digunakan pada link saat pointer mouse melewati teks tersebut.

4. Menentukan Ukuran Margin.

Ukuran Margin pada lembar kerja Dreamweaver CS3 sangatlah berbeda dengan ukuran margin pada program lainnya, karena pada ukuran Margin di Dreamweaver CS3 hanya ditentukan pada margin Left, Top, Right dan Bottom.

Untuk menentukan batas margin pada lembar kerja Dreamweaver CS3, kita dapat mengisikan nilai pada kotak teks margin pada kotak dialog Page Properties pada bagian category Appearance.

a. Left Margin untuk menentukan margin kiri halaman web.

b. Top Margin untuk menentukan margin atas halaman web.

c. Right Margin untuk menentukan margin kanan halaman web.

d. Bottom Margin untuk menentukan margin bawah halaman web.

(Bersambung...)

Mendesain Halaman WEB (Dreamweaver CS3 – bag. 1 )

A.   Mengatur Properti Halaman Web

Sebelum kita mulai mendesain halaman web, terlebih dahulu kita harus mengatur properti halaman pada lembar kerja kita. Karena properti halaman ini ikut berperan dalam menentukan bagus tidaknya suatu desain yang kita buat nantinya.

Kita dapat mengatur judul halaman, latar belakang berupa warna dan gambar halaman, warna teks dan link serta margin halaman Web. Semua atribut tersebut merupakan atribut dasar yang perlu diperhatikan dari setiap halaman Web.

Untuk menampilkan kotak dialog properti halaman, langkah-langkahnya adalah sebagai berikut : Pilih perintah menu MODIFY > PAGE PROPERTIES, atau tekan Ctrl + J sehingga akan tampil kotak dialog Page Properties.

Tampilan kotak dialog Page Properties pada Dreamweaver CS3 terbagi dalam 5 kategori, antara lain :

1. Pada bagian APPEARANCE, kita dapat mengatur jenis font, menentukan style pada font, ukuran font, warna untuk font, warna latar belakang halaman atau menampilkan gambar untuk latar belakang. Selain itu kita juga dapat menentukan ukuran margin halaman.

2. Pada bagian LINKS, anda dapat menentukan jenis font untuk teks link, ukuran font, mengubah warna untuk teks link, mengubah warna untuk teks yang telah dikunjungi, mengubah warna untuk teks rollover, mengubah warna untuk teks link yang sedang aktif serta untuk menentukan pemberian garis bawah pada teks link.

3. Pada bagian HEADINGS, kita dapat menentukan sendiri style yang digunakan untuk teks naskah kita.

4. Pada bagian Title/ Encoding. kita dapat mengisikan judul halaman pada bagian title.

5. Pada bagian TRACING IMAGE, kita dapat mengatur tampilan gambar sementara pada latar belakang.

A.1. Menambah Judul Halaman Web

Title digunakan untuk memberikan atau memasukkan judul halaman web. Selain memasukkan judul halaman web melalui kotak dialog Page Properties, kita juga dapat memberikan judul halaman web dengan menggunakan salah satu perintah berikut :

1. Pada bagian Document Bar, ketik judul halaman web pada kotak teks title.

2. Pilih perintah menu View > Head Content, sehingga akan ditambahkan sebuah toolbar baru, klik icon yang berada dibagian sudut kiri atas, kemudian isikan judul halaman web dalam kotak teks title pada panel Properties.

A.2. Mengisi bagian Latar Belakang dengan gambar.

Background Image digunakan untuk mengisi bagian latar belakang pada halaman web dengan gambar agar tampilan halaman web kita nampak indah.

Tipe gambar yang dapat digunakan adalah file gambar berekstensi Gif, Jpeg dan PNG.

Langkah untuk mengambil gambar dan menggunakannya sebagai gambar background adalah sebagai berikut :

1. Klik kanan jendela dokumen, pilih Page Properties.

2. Pada kotak dialog Page Properties, klik tombol Browse pada bagian Background Image. Atau jika kita sudah tahu dimana letak gambar yang akan kita jadikan background maka ketikkan path yang berisi file gambar pada kotak teks Background Image.

(bersambung......)