Membuat Desain Website dengan Dreamweaver2010 © http://adriansyah.web.idBerikut ini sedikit panduan singkat membuat desain...
header.gif3. Atur Page Properties, yang terletak pada panel Properties bagian bawah. Atur dengan   contoh sebagai berikut ...
Hasil dari pembuatan table dasar sebagai berikut ;6. Atur Align pada panel Properties menjadi Center untuk membuat tabel b...
Perhatian! Tempatkan gambar dalam folder tersendiri berdampingan dengan halaman   index.html. Sebagai contoh, header.gif d...
9. Beri menu navigasi sesuai dengan yang telah didesain sebelumnya.10. Beri link pada tiap menu lewat menu Link pada panel...
Dengan cara yang sama dengan sebelumnya, atur hingga tampilannya kurang lebih sebagai   berikut :12. Pada baris terakhir (...
13. Selanjutnya kita tinggal melengkapi bagian menu kiri dan content kanan sesuai dengan   keinginan. Oiya, jangan lupa Ti...
Upcoming SlideShare
Loading in …5
×

Membuatdesign webdengandreamweaver

1,846 views

Published on

Berbagi Tutorial Custom Joomla dengan DreamWeaver

Published in: Education, Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,846
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
180
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Membuatdesign webdengandreamweaver

  1. 1. Membuat Desain Website dengan Dreamweaver2010 © http://adriansyah.web.idBerikut ini sedikit panduan singkat membuat desain website sederhana dengan maenggunakanDreamweaver. Untuk versi Dreamweaver yang dipakai adalah Macromedia Dreamweaver 8.Sebelum dimulai, harus disiapkan bagaimana layout design dasar yang akan dibuat. Hal iniuntuk memudahkan dalam membuat website nantinya. Terserah mau gimana buatnya, kalauyang di bawah ini layout dibuat dengan visio. Biasanya cukup coret-coret saja di kertas sudahcukup. Berikut contoh layoutnya : HEADER NAVIGATION MENU CONTENT FOOTERLayout tidak harus seperti gambar di atas. Bisa juga berbeda bentuknya. Untuk contoh kali inikita 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.htmlEmpat 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. 2. header.gif3. 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. 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. 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. 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. 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. 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 !!!

×