1

1
B
B
AB
AB
10
10
P
P
EMBUAT
EMBUAT
H
H
OMEPAGE
OMEPAGE
Macromedia Dreamweaver
POKOK BAHASAN:
Mengenal Dreamweaver
Elemen window Dreamweaver
Persiapan pembuatan situs web
Pengaturan halaman web
Pengaturan text, list, color, link, image, horizontal rule & tabel
Pembuatan frame & form
TUJUAN PEMBELAJARAN:
Memberikan pengenalan aplikasi Dreamweaver pada mahasiswa sebagai
pambangun web.
Memberikan kemudahan dan keterampilan penggunaan dreamweaver dalam
merancang dan membangun web dengan lebih mudah dan efisien.
1.1 Mengenal Dreamweaver
eberapa waktu !ang lalu, tool !ang digunakan untuk membuat suatu halaman
web dibagi men"adi # "enis, !aitu$ editor %&M' berbasis teks, editor !ang
mengkombinasikan tampilan grafik WYSIWYG (What You )ee Is What You Get*
dengan tampilan koden!a, dan editor !ang benar+benar berbasis grafik. &iap+tiap "enis
editor tersebut memiliki grup penggemarn!a sendiri, para programmer, para
webmaster part+time, dan para grafik desiner. Macromedia Dreamweamer (mulai
versi ,* mungkin merupakan editor pertama dengan fitur+fitur lengkap !ang
memenuhi semua grup diatas.
Dreamweaver mempun!ai beberapa fungsi penting dalam pembuatan suatu
halaman web, seperti 'a!out -iew . !ang memungkinkan para designer halaman web
dapat langsung menempatkan table dan sel di halaman webn!a. /uga terdapat
beberapa fungsi tambahan seperti team collaboration dan peningkatan kemampuan
multimedia.
Pada bab ini, kita akan menggunakan Macromedia Dreamweaver M0 versi
1.2. 3ang mana, versi ini merupakan versi terbaru dari Dreamweaver.
1.2 Memulai Dreamweaver
ila kita membuat sebuah halaman web dengan Dreamweaver, maka selain
document window, kita "uga akan beker"a dengan tiga toolbar dan panel utama,
!aitu$ Insert Bar, Property Inspector, dan Site Panel.
Catatan$ /ika Insert Bar dan Property Inspector tidak tampil pada Dreamweaver, maka
bisa ditampilkan dengan klik menu$
- Window - Insert Bar (Ctrl+F2) atau
- Window - Property Inspector (Ctl+F!).
"ocument window# menampilkan dokumen atau halaman web !ang sedang
kita buat. Pada bagian bawah dari "ocument window, kita bisa melihat nama file
dari semua dokumen !ang sedang kita buka. Dengan meng+klik nama file tersebut
maka kita akan dengan mudah berpindah antara dokumen satu dengan lainn!a.
Insert Bar terdiri dari beberapa macam icon untuk memasukkan berbagai
macam ob"ek web seperti gambar, la!er, dan tabel. Insert Bar ini terdiri dari beberapa
tab !ang masing+masing terdiri dari beberapa icon !ang berkesesuaian.
Property Inspector menampilkan propert! dari ob"ek !ang kita pilih didalam
dokument. )eperti tinggi dan lebar dari suatu gambar.
)edangkan Site Panel memungkinkan kita untuk menampilkan dan mengatur
semua file dan folder !ang merupakan bagian dari website kita.
Gam$ar %&'%' (lemen window dari "reamwea)er *+ ,'&
Dreamweaver dapat menampilkan dokumen dalam tiga cara$ "esi-n .iew,
Code .iew, dan Code and "esi-n .iew.
Pada "esi-n .iew, kita bisa menampilkan dan mengedit dokumen secara
visual. &ampilan dari "esi-n .iew sama seperti bila kita menampilkann!a dengan
web browser (seperti Microsoft 4nternet Explorer*.
Pada Code .iew, kita bisa mengedit langsung halaman web kita dengan
menuliskan kode %&M', "avascript, P%P, 5)P, dan berbagai macam kode+kode !ang
lain. &idak terlalu diperlukan untuk beker"a dengan 6ode -iew ini, karena hampir
semua fungsi !ang kita perlukan untuk membuat suatu halaman web dapat di buat
lewat "esi-n .iew.
)edangkan pada Code and "esi-n .iew, kita bisa melihat Code .iew
dan "esi-n .iew secara bersamaan dalam satu tampilan window.
1.3 Pengaturan Site
)uatu website merupakan kumpulan dari beberapa dokumen !ang saling
berhubungan (linked*. Dengan Dreamweaver kita dapat membuat dan mengelola
suatu dokumen website, termasuk memperbaikin!a. Dokumen adalah halaman !ang
dilihat user ketika mereka mengun"ungi website kita. Dokumen bisa berisi teks,
gambar, suara, animasi, dan "uga link ke dokumen+dokumen !ang lain.
Dreamweaver menampilkan suatu site sebagai kumpulan dari file+file !ang
terdapat didalamn!a. 7umpulan file ini bisa dilihat pada Site Panel !ang secara
default berada di sisi sebelah kanan dari aplikasi Dreamweaver ini.
Gam$ar %&'2' )ite Panel pad Dreamweaver
8ntuk memulai membuat website, kita buat suatu site pada Dreamwever
dengan mengklik link Define a )ite pada Site Panel. 7emudian akan muncul wizard
untuk mendefinisikan suatu site.
Dibawah ini adalah beberapa langkah untuk mendefinisikan suatu site, !aitu$
%' /an-0a1 pertama$ kita diminta untuk mengisikan nama dari website kita.
Gam$ar %&'!' 'angkah pertama untuk mendefinisikan site
2' /an-0a1 0edua$ terdapat pilihan apakah kita akan menggunakan server
technolog! seperti 5)P, 5)P.9E&, P%P, /)P, atau 6old:usion.
Gam$ar %&'2' 'angkah kedua untuk mendefinisikan site
!' /an-0a1 0eti-a$ ada # pilihan untuk meletakkan file+file dari website kita.
Pertama, adalah diletakkan pada drive lokal.
7edua, diletakkan pada server secara langsung menggunakan local network.
7etiga, diletakkan pada server dengan menggunakan :&P atau ;D).
Gam$ar %&'3' 'angkah ketiga untuk mendefinisikan site
Pilih !ang pertama (local*, lalu tentukan lokasi dimana kita ingin men!impan file
dokumen web kita.
2' /an-0a1 0eempat$ kita akan diminta mengisikan beberapa informasi !ang
dibutuhkan, sesuai dengan pilihan kita pada langkah ketiga.
Gam$ar %&',' 'angkah keempat untuk mendefinisikan site
<indow terakhir !ang muncul adalah summar! dari site !ang telah kita buat.
)etelah kita mengklik tombol "one, maka website kita langsung akan dibuat.
Gam$ar %&'4' 'angkah terakhir sebagai summar! dokumen web !ang dibuat.
Catatan$ pada topik kali ini kita akan memfokuskan pada pembuatan suatu website secara
o55line.
)etelah semua langkah tersebut kita lakukan, maka pada pada )ite Panel akan tampil
informasi tentang site !ang baru kita buat.
Gam$ar %&'4' 4nformasi site pada )ite Panel.
1.4 Membuat Folder
Dreamweaver men!ediakan tampilan visual dari website kita melalui Site
Panel. <ebsite akan lebih mudah dikelola dan mana"emen "ika kita mengatur file+file
kedalam folder+folder. 6ontoh, kita buat dua folder !ang, !aitu folder ima-es untuk
meletakkan file+file gambar site dan folder resources untuk men!impan file+file lain.
8ntuk itu perlu adan!a mana"emen file pada dokumen web !ang kita buat
melalui pembuatan 5older.
6ara membuat folder$
=. 7lik kanan pada folder site kita (misal$ M! <ebsite*, kemudian pilih 6ew
Folder.
>. 7etikkan nama folder !ang kita buat (misal$ images* kemudian tekan (nter.
1.5 Bekerja dengan File
Dalam suatu website, kita bisa mempun!ai satu atau lebih file dokumen. :ile
dokumen ini !ang biasa "uga disebut sebagai pa-e. ila kita mengakses suatu website,
biasan!a file dokumen !ang pertama kali akan diakses adalah file inde7'1tm
(tergantung dari setting di <eb server*. 8ntuk itu, simpan file dokumen web pertama
kali anda dengan nama inde7'1tm'
6ara membuat file$
=. 7lik kanan pada folder site kita (misal$ M! <ebsite*, kemudian pilih 6ew
File.
>. 7etikkan nama file !ang kita buat (misal$ index.htm* kemudian tekan (nter.
8ntuk mulai beker"a dengan file !ang telah kita buat, kita bisa me+double+klik
pada nama file !ang akan kita edit pada Site Panel.
8ntuk mengganti title dari website kita, bisa kita isikan pada edit box tittle
pada deretan icon pada toolbar di bagian atas Dreamweaver.
&itle tersebut akan tampil pada bagian paling atas dari web browser bila kita
membuka website kita menggunakan 4nternet Explorer.
1.6 Memaukkan !ek
Memasukkan teks ke dalam dokumen !ang kita buat menggunakan
Dreamweaver sangat mudah. )etelah dokumen kita buka, tempatkan kursor pada
Document <indow dan kita bisa langsung mengetikkan teks ke dalam dokumen
tersebut.
ila kita ingin memformat teks !ang sudah kita masukkan, caran!a adalah
dengan memblok teks tersebut, kemudian ubah properti dari teks tersebut dengan
menggunakan panel Property Inspector.
5da beberapa properti dari teks !ang bisa kita atur menggunaka panel
Propert! 4nspector tersebut. 3aitu$ format teks, ukuran, bentuk huruf, warna,
ketebalan, alignment, bullet dan numbering, dan lain+lain.
1." Memaukkan #bjek
5da ban!ak sekali ob"ek !ang bisa kita masukkan ke dokumen web kita,
gambar, tabel, frame, form, flash, dan ban!ak lagi !ang lainn!a. Pada Dreamweaver,
ob"ek+ob"ek itu dapat kita masukkan kedalam dokumen web kita dengan sangat
mudah. Pilih pada Insert Bar, ob"ek apa !ang kita inginkan, kemudian klik dan kita
tinggal mengikuti instruksi !ang ditampilkan oleh Dreamweaver. &eks pada dokumen
web kita "uga dianggap sebagai suatu ob"ek oleh Dreamweaver.
8ntuk memasukkan suatu ob"ek kedalam halaman web kita "uga bisa
dilakukan dengan mengklik menu Insert kemudian pilih ob"ek !ang akan kita
masukkan kedalam halaman web kita.
)edangkan untuk mengedit ob"ek !ang sudah berada pada dokumen web kita,
bisa kita lakukan dengan mengklik ob"ek tersebut kemudian kita bisa mengubah
propert!n!a pada Property Inspector, sesuai dengan !ang kita inginkan. Propert!
!ang dapat kita ubah pada Property Inspector akan berbeda+beda, tergantung dari
"enis ob"ek !ang akan kita edit.
7ita "uga bisa menggunakan klik kanan mouse pada suatu ob"ek untuk
menampilkan daftar menu favorit !ang bisa kita pilih, sesuai dengan ob"ek !ang
bersangkutan.
7ita "uga bisa menggunakan ob"ek la!er sebagai tempat dari teks kita.
)ehingga kita bisa dengan mudah untuk memformat dan memindah+mindahkna teks
kita tersebut. 8ntuk menggambar suatu la!er bisa dilakukan dengan memilih menu
Insert /ayer, atau dengan mengklik icon "raw /ayer pada Insert Bar
Common.
1.$ Page Pro%ertie
7etika pertama kali kita memulai Dreamweaver, halaman web kita secara
default mempun!ai title 8ntitle Document dan tidak mempun!ai background. 7ita
bisa mengeditn!a dengan mengakses ke Page Properties.
6aran!a adalah dengan mengklik menu *odi5y, kemudian pilih Pa-e
Properties. 5tau bisa "uga dengan menggunakan mouse, caran!a$ taruh kursor mouse
pada dokumen kita, kemudian klik kanan mouse dan pilih Pa-e Properties.
Pada Page Properties kita bisa mengedit ban!ak hal !ang berhubungan dengan
halaman web kita, seperti warna latar belakang dokumen, warna teks, gambar pada
latar belakang, level transparan dari gambar, dan lain+lain.
Gam$ar %&'8' 7otak dialog Page Properties
1.& Membuat !abel
Penggunaan tabel sangat berguna untuk pengaturan data. &abel "uga bisa
digunakan untuk mengontrol dimana harus meletakkan gambar dan teks pada halaman
web. Dengan tabel "uga memungkinkan kita untuk memodifikasi isi dari tiap sel pada
tabel. 5tau kita bisa memblok beberapa sel, kolom, atau baris !ang ingin kita atur
dengan setting !ang sama.
7ita bisa mengontrol hampir semua fitur dari suatu tabel menggunakan
Property Inspector. 8ntuk memasukkan tabel kedalam dokumen web kita, bisa
dilakukan dengan cara memilih menu Insert 9a$le atau dengan memilih icon
Insert 9a$le pada panel Insert Bar 9a$les. 7emudian akan muncul kotak dialog
untuk memasukkan tabel dimana kita bisa mendefinisikan beberapa parameter disini
(misal$ "umlah baris, "umlah kolom, dll*.
Gam$ar %&':' 7otak dialog untuk memasukkan tabel.
*er-e 9a$el
8ntuk menggabungkan antar cell dalam tabel, dapat dilakukan melalui
langkah berikut$
=. )elect beberapa cell !ang akan di merge (digabungkan*.
>. 7lik tombol merge pada panel properties.
1.1' Membuat (ink
Pada Dreamweaver, kita bisa menambahkan link !ang menghubungkan antar
halaman web pada website kita, link ke website lain, maupun link ke file dokumen
dengan cara !ang sangat mudah.
8ntuk membuat suatu link, baik link ke halaman web maupun link ke file
dokumen (seperti file Microsoft <ord, file PD:, dll*, !aitu$
=. Pilih teks, gambar, atau ob"ek !ang ingin kita "adikan sebagai link.
>. Pilih menu *odi5y *a0e /in0 akan muncul kotak dialog Select File.
#. 7etikkan alamat 8;' dari tu"uan link kita kedalam teks box ;</ atau dengan
memilih file menggunakan kotak browser !ang ada. )etelah selesai klik =>.
Catatan$ ila file !ang kita pilih berada diluar dari folder root dari website kita maka
akan muncul dialog !ang menan!akan apakah kita akan mengcop! file tersebut
kedalam folder root dari website kita.