Cara Mudah Membuat Website Dengan Menggunakan Dreamweaver CS6

Cara Mudah Membuat Website Dengan Menggunakan Dreamweaver CS6

Yohan Dwi Apriyanto

Disini saya akan membagikan sedikit ilmu yang saya dapatkan tentang membuat web. Sebenarnya membuat web tidaklah sesulit yang anda pikirkan. Ada banyak cara untuk membuat web, salah satunya adalah dengan menggunakan aplikasi adobe dreamweaver cs6 seperti yang saya gunakan. Disini saya akan membagi sedikit ilmu tentang bagaimana membuat web dengan menggunakan aplikasi dreamweaver. tidak perlu berlama-lama lagi, langsung saja simak langkah-langkah berikut:

1. Buka aplikasi dreamweaver CS6. pada menu home klik Site  > lalu pilih New site

akan muncul akan muncul kotak seperti dibawah. pada kolom site name silahkan isikan nama situs anda, misal Unsemed Site4, untuk local site folder adalah letak menyimpan seluruh dokumen (file-file) website anda.

2.        Selanjutnya, pada kotak dialog create new pilih HTML

Akan muncul seperti gambar dibawah ini , dan kita akan membuat halaman utama, simpan file ini di folder website anda yang telah anda buat terlebih dahulu misalnya dengan untitled-3.html.

3. Untuk membuat background dasarnya, pilih page properties di bagian bawah. 

lalu anda pilih background yang anda ingin gunakan. apabila ingin background hanya warna saja   klik seperti yang pada lingkaran sperti dibawah. setelah memilih warna klik OK

4. Buat tabel dengan cara klik Insert -> table, 

untuk ukuran parameter, itu tergantung anda ingin berapa, seperti contoh dibawah saya menggunakan 500.

 klik ok maka hasilnya akan seperti dibawah ini.

5. Untuk menyesuaikan dengan layout, maka pada baris paling atas (untuk header) lakukan merge cell, dengan cara klik kursor pada tabel pertama lalu klik tabel > merge cell 

 maka hasilnya akan seperti dibawah ini.

6. Selanjutnya , kita masukkan gambar sebagai header dengan cara pada baris 1, kita sorot lalu pilih menu Insert-> Image 

pilih gambar / logo anda, lalu klik ok seperti diatas.

maka lihat hasilnya seperti gambar dibawah.

7. Selanjutnya untuk membuat menu , tapi merge cell dahulu baris kedua dibawah merge cell, caranya seperti pada table baris pertama tadi, klik table > merge cell

maka hasilnya seperti gambar diatas (lihat garis hijau)

8. kita buat tabel pada cell tsb dengan cara pilih menu insert > table sbb: ( pilih berapa baris dan kolom yg anda inginkan) 

 maka hasilnya seperti gambar dibawah (lihat garis warna hijau)

 Maka tulis nama-nama menu yang anda inginkan, contohnya seperti berikut 

9. Jika anda ingin mengganti warna tulisan menu, menempatkan tulisan di tengah, pada bagian terdapat kolom properties, klik salah satu ikon maka akan keluar kotak dialog seperti berikut. lalu tulislah huruf seperti contoh dibawah, lalu klik ok

10. Jika anda ingin membuat warna pada bacgroun menu tersebut, pilih ikon seperti yang dilingkar pada gambar dibawah, lalu pilihlah warna. sebelumnya tariklah dulu kursor tabel menunya (diblok).

 maka hasilnya seperti gambar diatas.

11. Selanjutnya kita akan membuat kode menggunakan tag. Tag ini untuk menentukan lokasi halaman yang muncul. Tapi merge cell dahulu tabel yang ketiga yang ada didalamnya.

 lalu enter beberapa kali. maka hasilnya akan seperti dibawah ini.

12. Selanjutnya kita akan membuat sub menunya . Klik di HOME lalu Pilih Insert > Spry > Spry Menu Bar 

 maka akan mucul kotak dialog seperi ini, pilih yang anda inginkan lalu klik ok.

13. Setelah diklik OK, Maka akan tercipta menu dan submenunya. Anda dapat langsung mengeditnya dengan mengetikkan judul menu dengan Home ( tulisan home yg tadi dihapus). Untuk mengedit item pada submenu, klik pada menu tersebut, kemudian di bagian properties, ubahlah item-item sub menunya. (lihatlah sperti gambar dibawah)

setelah anda remove dan ubah tulisan menu itemnya dengan menambahkan  about dan contact us misalnya sperti contoh dibawah.

pada kotak dialog dibawah tersebut anda dapat mengedit sub menunya sesuai dengan yang anda inginkan

maka hasilnya akan seperti dibawah ini, begitu juga seterusnya dengan sub menu lainya apabila anda ingin mengeditnya.

 Setelah itu preview pada browser anda( tekan F12), hasilnya seperti dibawah

14. Untuk membuat link/isi dari about. Buat dahulu file baru dengan nama about.html. Lalu Klik pada Spry Menu diatas home lalu klik Properties akan muncul kotak bar seperti gambar paling bawah.Pada about , ada tulisan Link -> Klik browser (lihat lingkaran orange)

Pilihlah file lalu klik OK seperti gambar dibawah

Jika sudah, tekan F12 pada browser, lalu klik about pada submenu, maka hasilnya akan tampak seperti gambar dibawah

15. Jika ingin mengganti background pada tulisan menu home yang berbeda tadi bisa yaitu dengan : Letakan kursor di home dan lalu lihat kebawah dan Klik Edit Rule 

 Pada Kategory , Klik Background, pilihlah warna lalu klik ok.

maka hasil akhirnya akan seperti ini. 

Good Luck