8/13/2019 Ebook_membuat Website_dengan 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

8/13/2019 Ebook_membuat Website_dengan 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

8/13/2019 Ebook_membuat Website_dengan Dreamweaver Mx

3/23

www.Ebsof.comb. Double Klik pada HtmLLihat gambar diatasc. 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 tulisan780pilih select table

8/13/2019 Ebook_membuat Website_dengan Dreamweaver Mx

4/23

www.Ebsof.com

f. Lihat gambar dibawahPropertisalignCenter

g. Nah sekarang table nya sudah berada di tengahh. Sekarang kita gabungkan 2 kolom untuk membuat bagian header, caranya :

Select baris pertama pada kolom pertama dan baris pertama pada kolomkedualihat gambar dibawah iniklikkananTablemarge cells

8/13/2019 Ebook_membuat Website_dengan Dreamweaver Mx

5/23

www.Ebsof.comi. Maka akan tergabung barisnyalihat gambar di bawahinipada propertisnyaAtur

Highnyam enjadi 140untuk melihatny a klik di tempat kosongmaka akan terlihathasilnya

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 pertamapropertisw=580, h=600

8/13/2019 Ebook_membuat Website_dengan Dreamweaver Mx

6/23

www.Ebsof.com

l. Pada baris keempat bagianfooter isi properties Highnya (H)60m.Maka akan tampak kerangka / layout nya seperti ini

8/13/2019 Ebook_membuat Website_dengan 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 sebagusmungkin, 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

8/13/2019 Ebook_membuat Website_dengan 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 selanjutnysimpan 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 kananterdapat bagian menu,,,,pada penjelasan

kali ini kita akan bekerja pada ruang menu.

8/13/2019 Ebook_membuat Website_dengan 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 akanberada 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

8/13/2019 Ebook_membuat Website_dengan 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-masingmenu,,,,,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 :

Homeindex.html Prof i lpro f i l . h tml Gallerygal lery .html

begit u set erusnya

--

setelah selesai tampilannya akan seperti ini

NB : untuk link sebaiknya jangan menggunakan

huruf besar dan spasi

8/13/2019 Ebook_membuat Website_dengan Dreamweaver Mx

11/23

www.Ebsof.com

langkah selanjutnya adalah memberi css, pada bagian menu, klik atau letakkankursor pada bagian menu

pada propertisnya,,,,Stylemanage St yles

Muncul sebuah kotak dialog = edit Syle Sheetklik new

8/13/2019 Ebook_membuat Website_dengan Dreamweaver Mx

12/23

www.Ebsof.com

Setelah klik new akan muncul kotak dioalog= new css style.lihat gambar dibawah ini

1. Pada Selector TypeTag (Redefines The Look Of A Specific Tag)2.

Pada Tag

klik tanda panah

cari dengan huruf

a

3. Klik OK

Setelah itu muncul kotak dialog = Save Style Sheet File AsDisini adalah perintah untuk menyimpan css yang nanti akan kita buat..lihat

gambar dibawah ini.

8/13/2019 Ebook_membuat Website_dengan Dreamweaver Mx

13/23

www.Ebsof.com

1. Save initempat dimana akan disimpan css yang akan kita buatinisimpan di sat u f o lder dengan i ndex.htm lyang 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 .css4. Setelah pengaturan diatas selesai klik tombol save

Setelah itu akan muncul kotak dialog seperti ini

8/13/2019 Ebook_membuat Website_dengan Dreamweaver Mx

14/23

www.Ebsof.com

A.Pada Category Type1. Fontterserah mau pilih yang manadisini saya

pilihArial,Helveatica,sans-serif

2. Pilih warna yang sesuai3. 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.

8/13/2019 Ebook_membuat Website_dengan 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.

8/13/2019 Ebook_membuat Website_dengan Dreamweaver Mx

16/23

www.Ebsof.com

C. Block

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

8/13/2019 Ebook_membuat Website_dengan Dreamweaver Mx

17/23

www.Ebsof.comD. Box

1. Heightukuran kotak setiap menu2. Paddingjarak 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.

8/13/2019 Ebook_membuat Website_dengan 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.

8/13/2019 Ebook_membuat Website_dengan Dreamweaver Mx

19/23

www.Ebsof.comF. Positioning

1. Height252. ApplyOK

Jika sudah selesai lihat pada bagian, atas code, akan muncul file baru bernamawarna.css

simpan file di dalam folder dimana terdapat file index.html yang sudah kita buat

sebelumnya

8/13/2019 Ebook_membuat Website_dengan Dreamweaver Mx

20/23

8/13/2019 Ebook_membuat Website_dengan 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 pilihAdvanced (IDs,contextual selector,etc)2.

Kemudian pada selector

cari a.hover

3. OK

Muncul kotak diaolog lagi setting seperti dibawah ini

8/13/2019 Ebook_membuat Website_dengan 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.

8/13/2019 Ebook_membuat Website_dengan 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