Cara Membuat Website dengan Dreamweaver.docx

7/23/2019 Cara Membuat Website dengan Dreamweaver.docx

1/17

Cara Membuat Website denganDreamweaver Cs6

Cara Membuat Website dengan Dreamweaver CS6 Membuat website dengan Dreamweaverdapat dikatakan cukup mudah. Sobat tidak perlu menghafal script-script HTML ang cukup

merepotkan. !ah berikut ane berikan cara membuat website dengan Dreamweaver. Monggo diikuti

a sob..

"ada latihan kali ini kita akan bela#ar membuat website sederhana menggunakan $dobe

Dreamweaver %S&. Langkah awal dalam membuat website adalah menetukan tema website kita.

'ntuk latihan kali ini kita akan menggunakan tema website pribadi.

(ita tentukan dahulu menu ang akan kita sa#ikan pada website kita. Sebagai contoh)

Menu utama terdiri dari) HOME, PROFIL, BERI!, "!LERI, #O$!#

Laout kita buat sbb)

atau

$tau silahkan gunakan ima#inasi anda untuk membuat laout website ang akan anda buat.

#eterangan%

H&me adalah halaman awal website

Pr&'i( dapat diisi mengenai profil anda

Berita dapat diisi dengan berita pada hari ini"a(eri dapat diisi gambar-gambar atau foto-foto kegiatan

#&nta) dapat diisi alamat dan nomor telepon ang dapat dihubungi

'ntuk membuat website tsb berikut langkah ang dapat dilakukan)

*uka dahulu program $dobe Dreamweaver

Lembar (er#a $dobe Dreamweaver


2/17

'ntuk mana#emen dalam membuat website+ lakukan langkah berikut (lik Site -, !ew Site

$kan masuk #endela baru sbb)


3/17

pada kolom site name silahkan isikan nama situs anda+ misal Lati*an+ untuk(&+a( site '&(deradalah

letak menimpan seluruh dokumen file-file website anda.

(lik tombol pada sebelah kanan+ maka akan muncul lokasi untuk menimpan seluruh file anda sbb


4/17

Sebagai contoh+ lokasi diF%Website)u

Lihat pada sidebar kanan $dobe Dreamweaver anda maka akan muncul folder tempat anda

menimpan dokumen website anda


5/17

Sampai di sini anda sudah berhasil melakukan seting root dokumen untuk website anda

!e/t step+ adalah membuat dokumen HTML untuk website kita

(lik pada menu 0ile-,!ew+ lalu pilih *lank "age-,HTML lalu klik %reate


6/17

Langkah selan#utna+ kita akan membuat halaman utama+ simpan file ini dengan namainde-.*tm(.

*uat Laout utama laout contoh 1 sebagai berikut)

*uat tabel dengan cara klik 2nsert-,table+ gunakan parameter sbb)

klik 3( maka akan muncul tampilan sbb)


7/17

'ntuk menesuaikan dengan laout 1+ maka pada baris paling atas untuk header lakukan merge

cell+ dengan cara)

Maka akan men#adi)

(arena kita akan menggunakan banak gambar+ alangkah baikna #ika kita membuat folder khusus

untuk lokasi penimpanan gambar+ dengan cara sbb)


8/17

"ilih !ew 0older+ beri nama folder baru dengan nama gambar


9/17

Selan#utna adalah buka direktori di 0)4websiteku4gambar+ copkan semua gambar ke folder tsb+

contoh)

Setelah kita masukkan gambar ke folder gambar+ kita cek pada dreamweaver pada area ker#a seperti

di bawah+ lalu klik 05 refresh maka gambar ang sudah dikopi akan diload oleh dreamweaver sbb)


10/17

"ada contoh hana ada 1 file gambar aitu header.#pg karena sebelumna hana mengkopi 1 file

gambar.

Selan#utna+ kita simpan dahulu file ini dengan nama inde/.html dengan cara pilih menu 0ile-,Save

Selan#utna kita masukkan gambar sebagai header dengan cara pada baris 1+ kita sorot lalu pilih

menu 2nsert-,image sbb

*uka folder gambar


11/17

pilih file header.#pg+ lalu klik 3(+ maka akan men#adi sbb)

Selan#utna kita akan membuat menu utama di kolom 1 baris ke 6


12/17


13/17

Sesuaikan parameter seperti di atas Hor7) default+ 8ert)Top

Selan#utna kita buat tabel pada cell tsb dengan cara pilih menu insert-,table dengan parameter

Lan#utkan dengan membuat menu utama seperti berikut)


14/17

Selan#utna kita akan membuat kode menggunakan tag .Tag ini untuk menentukan lokasi halamanang muncul

(ita kembali ke split view+ tuliskan tag berikut pada posisi lokasi iframe


15/17

Sampai di sini halaman utama sudah kita buat. Langkah selan#utna adalah membuat konten sesuai

dengan menu ang sudah kita tentukan.

!ah+ sebelumna kita telah membuat sebuah tag iframe dengan atribut sr+/0we(+&me.*tm(0+ artinaketika halaman inde/.html pertama kali diload4dibuka+ maka iframe seharusna berisi

file welcome.html+ #ika kita lihat melalui browser tekan 016 sbb)

muncul keterangan 0ile not found+ mengapa9 karena kita belum membuat file dengan

nama welcome.html. Lalu apa ang harus kita lakukan9 ap+ benar sekali kita harus membuat sebuah

file baru lagi dengan namawelcome.html. %arana+ silahkan buat kembali dokumen HTML baru lalusimpan dengan nama welcome.html


16/17

setelah kita buat file welcome.html+ kita buka kembali file inde/.html melalui browser)

Sekarang kita buat file selan#utna+ profil.html dimana file ini merupakan file ang akan ditu#u ketika

tombol "rofil pada Menu 'tama diklik

Sekarang kita kembali ke halaman inde/.html+ kita akan menautkan link tombol "rofil ke

file profil.html sbb)


17/17

"ada kolom Link+ isikan) profil.html artina ketika tombol "rofil diklik+ maka halaman profil.html akan

dibuka

"ada kolom Target+ isikan) isiwebsite+ mengapa9 coba kita lihat kembali ke atas pada tag)

lihat pada tag artina file 1r&'i(.*tm(akan ditampilkan pada i'rame isiwebsite+ sehingga #ika kita

buka fileinde/.html pada browser dan kita klik pada tombol "rofil+ maka)

nah sudah terlihat bukan halaman website kita9 eit ada ang kelupaan+ kita belum menautkan tombol

Home:hmmm kira-kira ke mana a menautkan tombol Home ini99 a benar+ tombol Home ini kita

tautkan ke fileinde/.html

Sekarang coba klik tombol Home atau "rofil+ maka halaman website kita akan berubah bukan9

Tugas anda sekarang adalah membuat halaman ang lain+ aitu halaman Berita+ "a(eri dan #&nta).

Lakukan langkah sama seperti di atas. 'ntuk konten silahkan gunakan ima#inasi anda. Selamat

bela#ar.

!ah mudah bukan +ara membuat website dengan Dreamweaver CS6

Cara Membuat Website dengan Dreamweaver.docx

Documents

Transcript of Cara Membuat Website dengan Dreamweaver.docx