Membuat Desain Website dengan Dreamweaver

2010 http://adriansyah.web.id

Berikut ini sedikit panduan singkat membuat desain website sederhana dengan maenggunakan

Dreamweaver. Untuk versi Dreamweaver yang dipakai adalah Macromedia Dreamweaver 8.

Sebelum dimulai, harus disiapkan bagaimana layout design dasar yang akan dibuat. Hal ini

untuk memudahkan dalam membuat website nantinya. Terserah mau gimana buatnya, kalau

yang di bawah ini layout dibuat dengan visio. Biasanya cukup coret-coret saja di kertas sudah

cukup. Berikut contoh layoutnya :

HEADER

NAVIGATION

MENU CONTENT

FOOTER

Layout tidak harus seperti gambar di atas. Bisa juga berbeda bentuknya. Untuk contoh kali ini

kita akan menggunakan layout seperti di atas.

Saat layout sudah dibuat, maka tentukan juga menu/ halaman apa saja yang akan dibuat.

Untuk contoh kali ini menunya sebagai berikut :

1. Home = index.html

2. About us = about.html

3. Blog = blog.html

4. Contact = contact.html

Empat aja ya.. jangan banyak-banyak Langsung saja kita buat. Berikut langkah-langkahnya :

1. Siapkan halaman awal yaitu index.html dan buka dengan Dreamweaver.

2. Untuk awalnya kita harus menyiapkan gambar yang digunakan. Berikut ini gambar header

yang akan digunakan :

header.gif

3. Atur Page Properties, yang terletak pada panel Properties bagian bawah. Atur dengan

contoh sebagai berikut :

Pada gambar di atas, margin dibuat 0 semuanya agar halaman mepet alias menepi.

4. Sesuai dengan gambar header.gif, ternyata ukuran lebar gambar yaitu 770px. Maka layout

tabel dasar kita sesuai dengan ukuran tersebut yaitu selebar 770px.

5. Buat tabel dasar dengan cara Insert Table. Kemudian, atur dengan pengaturan sebagai

berikut :

Hasil dari pembuatan table dasar sebagai berikut ;

6. Atur Align pada panel Properties menjadi Center untuk membuat tabel berada di tengah

halaman.

7. Tempatkan kursor pada baris pertama tabel dan masukkan gambar dengan Insert Image.

Kemudian pilih gambar header.gif.

Perhatian! Tempatkan gambar dalam folder tersendiri berdampingan dengan halaman

index.html. Sebagai contoh, header.gif ditempatkan dalam folder images.

8. Tempatkan kursor di baris kedua tabel dan masukkan tabel baru untuk navigasi lewat

Insert Table dengan pengaturan sebagai berikut :

Setelah tabel terbentuk, beri warna lewat Bg color pada panel properties agar terlihat

berbeda :

9. Beri menu navigasi sesuai dengan yang telah didesain sebelumnya.

10. Beri link pada tiap menu lewat menu Link pada panel Properties.

11. Tempatkan pada baris ke-3. Dan sesuai dengan layout dasar, kita akan buat tabel di

dalamnya dengan melalui Insert Table dengan pengaturan sebagai berikut :

Dengan cara yang sama dengan sebelumnya, atur hingga tampilannya kurang lebih sebagai

berikut :

12. Pada baris terakhir (footer) ganti warna dan ketikkan teks pada footer. Jangan lupa untuk

melakukan Centering text alias membuat teks di tengah cell tabel. Kita biasanya menulis

copyright dan sejenisnya pada footer.

13. Selanjutnya kita tinggal melengkapi bagian menu kiri dan content kanan sesuai dengan

keinginan. Oiya, jangan lupa Title: diganti dengan judul website, jangan cuma Untitled

Document Berikut ini salah satu contohnya hasil akhirnya :

14. Langkah selanjutnya tentu membuat halaman lain sesuai dengan yang kebutuhan. Agar

tidak ribet dan tidak repot, cukup melakukan Save As pada halaman index.html dan beri

nama baru dengan halaman lain, misal about.html, blog.html, dan contact.html. Langkah

selanjutnya tinggal isi content tiap-tiap halaman.

15. Yak sudah gitu aja. Gampang kan?!

Selamat mencoba !!!