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 !!!