Dokumen ini memberikan panduan singkat untuk membuat desain website sederhana menggunakan Dreamweaver. Langkah-langkahnya meliputi persiapan layout desain, penentuan menu halaman, pembuatan tabel dasar menggunakan Dreamweaver, penambahan gambar header dan navigasi, pengisian konten menu dan konten utama, serta penyimpanan halaman tambahan dengan menyalin halaman awal.

1. 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 :

2. 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 :

3. 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.

4. 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 :

5. 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 :

6. 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.

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