Membuat web pribadi dengan dreamweaver
MEMBUAT WEB PERSONAL DENGAN DREAMWEAVER
Jalankan Dreamweaver 8
Pilih HTML
Set elah dipilih HTML maka akan muncul t ampilan pert ama sepert i berikut :
Klik Page Propert ies unt uk
pengat uran awal Halaman
Pilih j enis t ulisan sebagai
def ault semua t ext dalam
web
Pilih ukuran
t ulisan
Jika sudah
mengat ur warna
dll, klik
Tit le/ Encoding
Pilih warna lat ar
halaman
Ket ikkan j udul websit e anda.
Isian yang lain boleh diabaikan.
Jika sudah t ekan t ombol OK
Pilih warna t ulisan
Jika ingin lat ar
dengan gambar
Pilih disini
Set elah anda selesai mengat ur pada t ahap diat as maka akan mengasilkan :
Area ini adalah bagian yang akan
t ampil (body) di websit e kit a.
Sekarang mulai membuat layout
halamannya.
Agar kerj aan kit a t idak hilang kalo pas mat i l ampu mending kit a simpan dulu.
Buat lah sebuah f older baru di hardisk anda dan simpan dengan nama index (nama f ile unt uk
halaman ut ama web waj ib diberi nama index. ht ml).
OKE kit a lanj ut kan…………
Sekarang mulai menambahkan layout dengan t abel sepert i gambar berikut …….
Pada gambar diat as saya isikan rows (j umlah baris) 3, kolomnya 2, t rus t able widt h 900 pixel
(ini nilai asumsi ideal t ampilan unt uk screen komput er yang umum dipakai supaya t ampilannya
keliat an pas), menudian border t hicknessnya 0 (j adi garisnya dibuat sebagai alat bant u aj a,
nant i kit a liat hasilnya), header pilih none aj a, yang lainnya t et ap dikosongkan langsung t ekan
oke.
1. Kemudian arahkan
korsur anda ke baris dan
kolom pert ama
0. Sekarang sudah t erlihat
ada t abel dengan garis t idak
nampak alias dengan border 0
2. Isikan di w = 250 (ini lebar
kolom pert ama) dan H=120 (ini
t inggi kolom pert ama) nant i
sebagi header
3. Pindahkan korsur anda ke
baris pert ama kolom ke 2 dan
at ur kembali nilai W=650.
(250+650=900)
5. Tekan merge select ed
cell unt uk menggabungnya.
4. Kemudian select kolom 1 dan
2 baris pert ama (Kit a akan
gabung j adi sat u kolom
6. Ini hasilnya set elah t ahap
5 t adi dan saya gant i warna
lat arnya.
Oke sekarang sudah j adi bagian headernya (Kalo mau bagus lagi anda bisa buat secara graf is
dengan adobe phot oshop at au lainya dan masukkan di kolom diat as).
Lakukan modif ikasi lainnya sampai kira2 sepert i gambar berikut …
Oke yang per l u saya ingat kan. . membuat web j uga har us ada sent uhan gr af i s dan dan ide
kr eat if agar hasil enak di l ihat baik war na at aupun bent uknya. .
Kit a lanj ut kan dengan membuat menu (hyperlink)
Kit a buat sebuah t abel baru lagi di posisi kursor baris ke 2 kolom 1.
Rows diisi 5 (nant i akan kit a isi 5 menu) kolom
1, t able widt h = 100 persen, cellpadding 5
(nant i liat hasilnya) langsung t ekan ok.
Isi t abel yang sudah dibuat t adi
dengan t ulisan kira2 sepert i
gambar, sesuai keperluan
Tempat mengisikan link (t uj uan
menu di klik)
Sekarang kit a buat link menuj u halaman berikut nya yang nant i kit a buat kan. Caranya…
Blok/ select menu pert ama, kemudian isikan pada t uj uan link sepert i ket erangan gambar :
Halaman ut ama = index. ht ml
Prof il saya = prof il. ht ml
Kegiat an = kegiat an. ht ml
Galeri Phot o = galeri. ht ml
Kont ak = kont ak. ht ml
Sehingga hasil yang didapat sepert i gambar berikut ini…….
Kemudian kit a buat kan t able baru lagi pada baris 2 kolom 2. Tabel ukuran 100 persen, 2 baris
dan 1 kolom sehingga hasil sepert i berikut ….
Udah t inggal ngisi berit anya….
Langkah berikut nya adalah membuat halaman lainnya sepert i prof il, kegiat an dll. Caranya
cukup dengan…
Gant i j udul
yang t adi berit a
menj adi Prof il
Kemudian di save as dengan nama prof il. ht ml
Kemudian gant i lagi dengan halaman dengan j udul berikut nya kegiat an. ht ml, galeri. ht ml,
kont ak. ht ml.
Sekarang halaman kosongnya sudah selesai bisa dicoba dulu dengan membuka f ile ut amanya
yait u index. ht ml, kemudian coba klik menu2nya.
Semua langkah sudah berhasil j ika set iap anda memilih menu maka halaman dengan j udul
yang sesuai sudah t ampil.
Kalo sudah oke semuanya t inggal kit a edit masing2 halaman t adi dengan mengisi
inf ormasinya. . bisa berupa t ulisan at au gambar dan cont ent lainnya…
Saya yakin anda bisa melakukan yang lebih baik dari panduan saya ini…
Buka mat a buka t elinga. . anda bisa belaj ar banyak di int ernet …. bert anyalah dengan google
SELAMAT MENIKMAT I DAN MENCOBANYA
www. zainalhakim. web. id
Jalankan Dreamweaver 8
Pilih HTML
Set elah dipilih HTML maka akan muncul t ampilan pert ama sepert i berikut :
Klik Page Propert ies unt uk
pengat uran awal Halaman
Pilih j enis t ulisan sebagai
def ault semua t ext dalam
web
Pilih ukuran
t ulisan
Jika sudah
mengat ur warna
dll, klik
Tit le/ Encoding
Pilih warna lat ar
halaman
Ket ikkan j udul websit e anda.
Isian yang lain boleh diabaikan.
Jika sudah t ekan t ombol OK
Pilih warna t ulisan
Jika ingin lat ar
dengan gambar
Pilih disini
Set elah anda selesai mengat ur pada t ahap diat as maka akan mengasilkan :
Area ini adalah bagian yang akan
t ampil (body) di websit e kit a.
Sekarang mulai membuat layout
halamannya.
Agar kerj aan kit a t idak hilang kalo pas mat i l ampu mending kit a simpan dulu.
Buat lah sebuah f older baru di hardisk anda dan simpan dengan nama index (nama f ile unt uk
halaman ut ama web waj ib diberi nama index. ht ml).
OKE kit a lanj ut kan…………
Sekarang mulai menambahkan layout dengan t abel sepert i gambar berikut …….
Pada gambar diat as saya isikan rows (j umlah baris) 3, kolomnya 2, t rus t able widt h 900 pixel
(ini nilai asumsi ideal t ampilan unt uk screen komput er yang umum dipakai supaya t ampilannya
keliat an pas), menudian border t hicknessnya 0 (j adi garisnya dibuat sebagai alat bant u aj a,
nant i kit a liat hasilnya), header pilih none aj a, yang lainnya t et ap dikosongkan langsung t ekan
oke.
1. Kemudian arahkan
korsur anda ke baris dan
kolom pert ama
0. Sekarang sudah t erlihat
ada t abel dengan garis t idak
nampak alias dengan border 0
2. Isikan di w = 250 (ini lebar
kolom pert ama) dan H=120 (ini
t inggi kolom pert ama) nant i
sebagi header
3. Pindahkan korsur anda ke
baris pert ama kolom ke 2 dan
at ur kembali nilai W=650.
(250+650=900)
5. Tekan merge select ed
cell unt uk menggabungnya.
4. Kemudian select kolom 1 dan
2 baris pert ama (Kit a akan
gabung j adi sat u kolom
6. Ini hasilnya set elah t ahap
5 t adi dan saya gant i warna
lat arnya.
Oke sekarang sudah j adi bagian headernya (Kalo mau bagus lagi anda bisa buat secara graf is
dengan adobe phot oshop at au lainya dan masukkan di kolom diat as).
Lakukan modif ikasi lainnya sampai kira2 sepert i gambar berikut …
Oke yang per l u saya ingat kan. . membuat web j uga har us ada sent uhan gr af i s dan dan ide
kr eat if agar hasil enak di l ihat baik war na at aupun bent uknya. .
Kit a lanj ut kan dengan membuat menu (hyperlink)
Kit a buat sebuah t abel baru lagi di posisi kursor baris ke 2 kolom 1.
Rows diisi 5 (nant i akan kit a isi 5 menu) kolom
1, t able widt h = 100 persen, cellpadding 5
(nant i liat hasilnya) langsung t ekan ok.
Isi t abel yang sudah dibuat t adi
dengan t ulisan kira2 sepert i
gambar, sesuai keperluan
Tempat mengisikan link (t uj uan
menu di klik)
Sekarang kit a buat link menuj u halaman berikut nya yang nant i kit a buat kan. Caranya…
Blok/ select menu pert ama, kemudian isikan pada t uj uan link sepert i ket erangan gambar :
Halaman ut ama = index. ht ml
Prof il saya = prof il. ht ml
Kegiat an = kegiat an. ht ml
Galeri Phot o = galeri. ht ml
Kont ak = kont ak. ht ml
Sehingga hasil yang didapat sepert i gambar berikut ini…….
Kemudian kit a buat kan t able baru lagi pada baris 2 kolom 2. Tabel ukuran 100 persen, 2 baris
dan 1 kolom sehingga hasil sepert i berikut ….
Udah t inggal ngisi berit anya….
Langkah berikut nya adalah membuat halaman lainnya sepert i prof il, kegiat an dll. Caranya
cukup dengan…
Gant i j udul
yang t adi berit a
menj adi Prof il
Kemudian di save as dengan nama prof il. ht ml
Kemudian gant i lagi dengan halaman dengan j udul berikut nya kegiat an. ht ml, galeri. ht ml,
kont ak. ht ml.
Sekarang halaman kosongnya sudah selesai bisa dicoba dulu dengan membuka f ile ut amanya
yait u index. ht ml, kemudian coba klik menu2nya.
Semua langkah sudah berhasil j ika set iap anda memilih menu maka halaman dengan j udul
yang sesuai sudah t ampil.
Kalo sudah oke semuanya t inggal kit a edit masing2 halaman t adi dengan mengisi
inf ormasinya. . bisa berupa t ulisan at au gambar dan cont ent lainnya…
Saya yakin anda bisa melakukan yang lebih baik dari panduan saya ini…
Buka mat a buka t elinga. . anda bisa belaj ar banyak di int ernet …. bert anyalah dengan google
SELAMAT MENIKMAT I DAN MENCOBANYA
www. zainalhakim. web. id