membuatdesign webdengandreamweaver

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

Upload: herman-rifai

Post on 31-Aug-2014

1.447 views

Category:

Education


1 download

DESCRIPTION

Berbagi Tutorial Custom Joomla dengan DreamWeaver

TRANSCRIPT

Page 1: Membuatdesign webdengandreamweaver

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 :

Page 2: Membuatdesign webdengandreamweaver

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 :

Page 3: Membuatdesign webdengandreamweaver

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.

Page 4: Membuatdesign webdengandreamweaver

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 :

Page 5: Membuatdesign webdengandreamweaver

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 :

Page 6: Membuatdesign webdengandreamweaver

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.

Page 7: Membuatdesign webdengandreamweaver

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