Page 1
8/13/2019 Ebook_membuat Website_dengan Dreamweaver Mx
http://slidepdf.com/reader/full/ebookmembuat-websitedengan-dreamweaver-mx 1/23
BUDIONO
www.Ebsof.Com
3/10/2013
Cara Cepat MembuatWebsite Dengan
Dreamweaver MX
Ebook ini dibuat supaya lebih mudah dalam memahami dasar dalam membut
website menggunakan editor Dreamweaver MX, Editor ini sampe sekarang masih
saya gunakan. Untuk Tutorial – Tutorial lebih lanjut untuk membuat website
dinamis. Silahkan kunjungi www.ebsof.com
2013
Page 2
8/13/2019 Ebook_membuat Website_dengan Dreamweaver Mx
http://slidepdf.com/reader/full/ebookmembuat-websitedengan-dreamweaver-mx 2/23
www.Ebsof.com
Membuat Website Menggunakan Dremweaver MX
Oke..Kali ini saya akan sedikit berbagi bagaimana cara mendisaign layout seperti di
bawahini
1.MembuatKerangka Website
a. Buka dreamweaver MX
Page 3
8/13/2019 Ebook_membuat Website_dengan Dreamweaver Mx
http://slidepdf.com/reader/full/ebookmembuat-websitedengan-dreamweaver-mx 3/23
www.Ebsof.comb. Double Klik pada HtmLLihat gambar diatas
c. Pilih Menu InsertTable
d. . Muncul Kotak dialogIsikan seperti gambar di bawah iniKlik OK
e. Nah akan muncul seperti gambar di bawah iniklik pada tanda panah di sebelah tulisan
780pilih select table
Page 4
8/13/2019 Ebook_membuat Website_dengan Dreamweaver Mx
http://slidepdf.com/reader/full/ebookmembuat-websitedengan-dreamweaver-mx 4/23
www.Ebsof.com
f. Lihat gambar dibawahPropertisalignCenter
g. Nah sekarang table nya sudah berada di tengah
h. Sekarang kita gabungkan 2 kolom untuk membuat bagian header, caranya :
Select baris pertama pada kolom pertama dan baris pertama pada kolom
kedualihat gambar dibawah iniklikkananTablemarge cells
Page 5
8/13/2019 Ebook_membuat Website_dengan Dreamweaver Mx
http://slidepdf.com/reader/full/ebookmembuat-websitedengan-dreamweaver-mx 5/23
www.Ebsof.comi. Maka akan tergabung barisnyalihat gambar di bawahinipada propertisnya Atur
Highnyam enjadi 140 untuk melihatny a klik di tempat kosong maka akan terlihat
hasilnya
j. Ulangi langkah “h” untuk baris kedua dan baris keempat , sehingga bentuknya akanseperti gambar di bawah ini
k. Klik pada bagian dalam baris ketiga kolom pertamapropertis w=580, h=600
Page 6
8/13/2019 Ebook_membuat Website_dengan Dreamweaver Mx
http://slidepdf.com/reader/full/ebookmembuat-websitedengan-dreamweaver-mx 6/23
www.Ebsof.com
l. Pada baris keempat bagian footer isi properties Highnya (H) 60
m. Maka akan tampak kerangka / layout nya seperti ini
Page 7
8/13/2019 Ebook_membuat Website_dengan Dreamweaver Mx
http://slidepdf.com/reader/full/ebookmembuat-websitedengan-dreamweaver-mx 7/23
www.Ebsof.comn. Setelah itu kita tingga lmenghiasi bagian-bagiannya, sedikit kita kasih pewarna dan
bumbu menggunakan css,
o. Untuk gambar header bagi anda yang menguasai photoshop bisa anda membuat sebagus
mungkin, namun ukurannya harus sesuai H=140 dan W=780px
2. MembuatBagian Menu
Lihat gambar disamping, sekarang kita akan membuat menu-menu di
dalamnya…
Hasilnya akan tampak seperti gambar disamping
Caranya :
Ketik menu apa yang ingin andabuat, misalnya :Home,Profil,galeri
BukuTamu,Produk,Kontak, Statistik
Sambung di Bawah… Sengaja di kosongkan
Page 8
8/13/2019 Ebook_membuat Website_dengan Dreamweaver Mx
http://slidepdf.com/reader/full/ebookmembuat-websitedengan-dreamweaver-mx 8/23
www.Ebsof.com
Pada penjelasan sebelumnya sudah dijelaskan bagaimana membuat sebuah kerangka
website dengan menggunkan table….hasilnya seperti di bawah ini, untuk melanjutkan
kelangkah selanjutny simpan file ini didalam foldernama folder terserahdan nama
file nya index.html
Kemudian kita akan membuat menu dengan menggunakan css, lihat pada kerangka
website di bawah ini, di samping sebelah kanan terdapat bagian menu,,,,pada penjelasan
kali ini kita akan bekerja pada ruang menu.
Page 9
8/13/2019 Ebook_membuat Website_dengan Dreamweaver Mx
http://slidepdf.com/reader/full/ebookmembuat-websitedengan-dreamweaver-mx 9/23
www.Ebsof.comMEMBUAT BAGIAN MENU
Sekarang bagaimana caranya kita membuat bagian menu
seperti gambar disamping dengan menggunakan macromedia
dreamweaver MX 2004 / Atau 8
untuk mengawali langkah dalam membuat menu lihat gambar di bawah ini
Pada saat anda meng klik bagian menu, maka secara default kursor anda akan
berada di tengah-tengah, cara meletakkan kursor agar berada di atas yaitu : atur
propertisnyapada menu vert (vertical) ganti default menjadi top
Ketikkan menu-menu apa saja yang ingin anda tampilkan di website anda
Page 10
8/13/2019 Ebook_membuat Website_dengan Dreamweaver Mx
http://slidepdf.com/reader/full/ebookmembuat-websitedengan-dreamweaver-mx 10/23
www.Ebsof.com Disini saya mengisi menu denganhome,profil,gallery,buku
tamu,kontak,Produk,statistik
(gunakan spasi untuk memisahkan setiap menu)
Setelah seperti gambar disamping, sekarang buat link pada masing-masing
menu,,,,,karena ini dasar, dan merupakan website statis(tidak menggunakan php)
cara untuk membuat link cukup mudah,,,,,blok pada set iap menu,kemudi an
pada propert isnya l in k n ya isi sepert i ber iku t :
Home index.html
Prof i l pro f i l . h tml
Gallery gal lery .html
begit u set erusnya
--
setelah selesai tampilannya akan seperti ini
NB : untuk link sebaiknya jangan menggunakan
huruf besar dan spasi
Page 11
8/13/2019 Ebook_membuat Website_dengan Dreamweaver Mx
http://slidepdf.com/reader/full/ebookmembuat-websitedengan-dreamweaver-mx 11/23
www.Ebsof.com
langkah selanjutnya adalah memberi css, pada bagian menu, klik atau letakkan
kursor pada bagian menu
pada propertisnya,,,,Style manage St yles
Muncul sebuah kotak dialog = edit Syle Sheetklik new
Page 12
8/13/2019 Ebook_membuat Website_dengan Dreamweaver Mx
http://slidepdf.com/reader/full/ebookmembuat-websitedengan-dreamweaver-mx 12/23
www.Ebsof.com
Setelah klik new akan muncul kotak dioalog= new css style….lihat gambar di
bawah ini
1. Pada Selector TypeTag (Redefines The Look Of A Specific Tag)
2.
Pada Tag
klik tanda panah
cari dengan huruf
a3. Klik OK
Setelah itu muncul kotak dialog = Save Style Sheet File As
Disini adalah perintah untuk menyimpan css yang nanti akan kita buat..lihat
gambar dibawah ini.
Page 13
8/13/2019 Ebook_membuat Website_dengan Dreamweaver Mx
http://slidepdf.com/reader/full/ebookmembuat-websitedengan-dreamweaver-mx 13/23
www.Ebsof.com
1. Save initempat dimana akan disimpan css yang akan kita buat
inisimpan di sat u f o lder dengan i ndex.htm l yang sudah
kita buat sebelumnya
2.
File name
nama dari file css yang akan kita buat,terserah mau kasihnama apadi sini saya beri nama warna
3. Save as typepastikan tipe save nya .css
4. Setelah pengaturan diatas selesai klik tombol save
Setelah itu akan muncul kotak dialog seperti ini
Page 14
8/13/2019 Ebook_membuat Website_dengan Dreamweaver Mx
http://slidepdf.com/reader/full/ebookmembuat-websitedengan-dreamweaver-mx 14/23
www.Ebsof.com
A. Pada Category Type
1. Fontterserah mau pilih yang manadisini saya
pilih Arial,Helveatica,sans-serif
2. Pilih warna yang sesuai
3. Decorationnone
Jangan di k l i k OK Ter l ebih dahu lu
karna m asih ada lan ju t annya
Lihat gambar dibawah in i………………………….
Page 15
8/13/2019 Ebook_membuat Website_dengan Dreamweaver Mx
http://slidepdf.com/reader/full/ebookmembuat-websitedengan-dreamweaver-mx 15/23
www.Ebsof.comB. Background
1. Pilh warna background
Jangan di k l i k OK Ter l ebih dahu lu
karna m asih ada lan ju t annya
Lihat gambar dibawah in i………………………….
Page 16
8/13/2019 Ebook_membuat Website_dengan Dreamweaver Mx
http://slidepdf.com/reader/full/ebookmembuat-websitedengan-dreamweaver-mx 16/23
www.Ebsof.com
C. Block
1. Display blocks
2. Sedikit catan, untuk display blocks sangat perlu, maka
jangan sampai terlewati, Klik Apply Untuk melihathasilnya, namun jangan tekan OK, karena kita belum
selesai
Jangan di k l i k OK Ter l ebih dahu lu
karna m asih ada lan ju t annya
Lihat gambar dibawah in i………………………….
Page 17
8/13/2019 Ebook_membuat Website_dengan Dreamweaver Mx
http://slidepdf.com/reader/full/ebookmembuat-websitedengan-dreamweaver-mx 17/23
www.Ebsof.comD. Box
1. Heightukuran kotak setiap menu
2. Padding jarak box atau kotak menu,,,,Setting
seperti diatas
Jangan di k l i k OK Ter l ebih dahu lu
karna m asih ada lan ju t annya
Lihat gambar dibawah in i………………………….
Page 18
8/13/2019 Ebook_membuat Website_dengan Dreamweaver Mx
http://slidepdf.com/reader/full/ebookmembuat-websitedengan-dreamweaver-mx 18/23
www.Ebsof.comE. Border
1. Setting mengikuti seperti gambar diatas
Jangan di k l i k OK Ter l ebih dahu lu
karna m asih ada lan ju t annya
Lihat gambar dibawah in i………………………….
Page 19
8/13/2019 Ebook_membuat Website_dengan Dreamweaver Mx
http://slidepdf.com/reader/full/ebookmembuat-websitedengan-dreamweaver-mx 19/23
www.Ebsof.comF. Positioning
1. Height25
2. Apply OK
Jika sudah selesai lihat pada bagian, atas code, akan muncul file baru bernama warna.css
simpan file di dalam folder dimana terdapat file index.html yang sudah kita buat
sebelumnya
Page 20
8/13/2019 Ebook_membuat Website_dengan Dreamweaver Mx
http://slidepdf.com/reader/full/ebookmembuat-websitedengan-dreamweaver-mx 20/23
Page 21
8/13/2019 Ebook_membuat Website_dengan Dreamweaver Mx
http://slidepdf.com/reader/full/ebookmembuat-websitedengan-dreamweaver-mx 21/23
www.Ebsof.comMuncul kotak dialog kembali,,lihat disana terdapat huruf “a”,,,,itu merupakan css yang
kita buat tadi,,,klik new
Muncul kotak dialog lagi,,,
1. pada Selector Type pilih Advanced (IDs,contextual selector,etc)
2.
Kemudian pada selector
cari “a.hover”3. OK
Muncul kotak diaolog lagi setting seperti dibawah ini
Page 22
8/13/2019 Ebook_membuat Website_dengan Dreamweaver Mx
http://slidepdf.com/reader/full/ebookmembuat-websitedengan-dreamweaver-mx 22/23
www.Ebsof.com Pada bagian Typeubah color nya
Jangan di k l i k OK Ter l ebih dahu lu
karna m asih ada lan ju t annya
Lihat gambar dibawah in i………………………….
Page 23
8/13/2019 Ebook_membuat Website_dengan Dreamweaver Mx
http://slidepdf.com/reader/full/ebookmembuat-websitedengan-dreamweaver-mx 23/23
www.Ebsof.comPada background juga ubah warna background color nya
Jika sudah klik OKkemudian Seave ALL
Jalankan pada browser Mozilla atau IE, dengan menekan F12,,,lihat perubahannya…..
Penulis dilahirkan di Selatpanjang pada tanggal 21 Oktober 1990. Saat
ini penulis sedang menekuni dunia Internet, khususnya dibidang
Bisnis Online, selain itu penulis juga memiliki hobi di bidang
pemrograman website, Designer Web Dengan menggunakan
Pemrograman PHP, CSS,HTML, Jquery, dan database MYSQL.
Untuk Tutorial-Tutorial Yang lainnya Silahkan Cek di www.Ebsof.com