Dokumen ini adalah panduan untuk menggunakan Adobe Dreamweaver CS4 dalam mendesain web, mencakup pengenalan tampilan dan komponen, cara membuat site baru, serta langkah-langkah menambahkan konten seperti teks, gambar, dan tabel. Selain itu, dokumen juga menjelaskan penggunaan menu, ikon, dan panel untuk mengatur format serta membuat hyperlink. Beberapa latihan dan kesimpulan juga disertakan untuk menguji pemahaman pengguna.

1. Dreamweaver CS4 1
Kompetensi Dasar:
Mengidentifikasi menu dan ikon pada perangkat lunak desain web
Indikator:
Mengidentifikasi web dan aplikasinya
Mengidentifikasi tampilan/ layar kerja aplikasi pengolah desain web
Mengidentifikasi menu, ikon, dan panel pada aplikasi desain web
Menjelaskan cara membuat desain web baru
Mengidentifikasi cara melihat hasil desain web
LKS 1
1. Menjalankan Dreamweaver dan Mengenal Tampilan.
Untuk menjalankan dreamweaver dapat dilakukan dengan cara klik tombol Start kemudian
menu All program kemudian Macromedia selanjutnya pilih Macromedia Dreamweaver.
Selain langkah diatas dreamweaver juga dapat diaktifkan dengan beberapa cara yang lain
misalnya dari ikon Macromedia Dreamweaver pada layar desktop.
Setelah dreamweaver aktif untuk pertama sekali anda akan melihat tampilan seperti gambar
1.1 dibawah ini:
Gambar 1.1

2. Dreamweaver CS4 2
Sebelum kita mendesain web, maka terlebih dahulu harus memahami komponen-
komponen yang ada di dalam tampilan macromedia itu sendiri, misalnya:
1. Menu utama
2. Insert bar
3. Document bar
4. Jendela dokumen
5. Kotak property
6. Kelompok panel
7. Status bar
Tunjukkanlah komponen-komponen tersebut pada gambar di atas!
2. Komponen Dreamweaver
2.1 Toolbar
Toolbar terbagi dua yaitu standar bar dan dokumen bar. Yang termasuk dokumen bar
dapat dilihat pada gambar 1.2 dibawah ini. Sedangkan standar bar dapat dilihat pada
gambar 1.3 untuk menampilkannya gunakan menu View, Toolbar pilih Standar bar.
Gambar 1.2
Gambar 1.3
Pahamilah penggunaan dari kedua toolbar di atas, untuk toolbar standar mungkin anda
sudah memahaminya,akan tetapi untuk dokumen bar disini akan kita bahas kembali:
Code view digunakan untuk menampilkan halaman web dalam
bentuk format baris: HTML code. Jika anda sudah akrab dengan HTML, anda bisa
mengedit halaman web ini dari yang ditampilkan.
Split view digunakan untuk membagi layar dalam setengah tampilan,
tampilan code HTML untuk halaman web dibagian atas, dan setengahnya lagi
tampilan Design View yang bisa kita edit.
Show Design view digunakan untuk menampilkan layar design
yang langsung terlihat hasil seperti tampilan pada browser.

3. Dreamweaver CS4 3
Live view digunakan untuk menampilkan hasil website di dalam
dokumen Dreamweaver, menggunakan ikon ini maka akan tampil
secara langsung misalnya teks berjalan (marquee), flash, video
tanpa kita masuk ke browser terlebih dahulu.
Dokumen title digunakan untuk menuliskan judul dari halaman web, bagian ini
boleh diisi atau tidak.
File management digunakan untuk mengatur file website.
Preview/Debug in browser digunakan untuk menampilkan hasil website
ke browser.
2.2 Insert Bar
Insert bar merupakan jalan pintas menuju menu insert, dimana hampir semua yang
ada pada menu insert terdapat pada insert bar. Tampilan dari insert Bar dapat anda
lihat pada gambar 1.4 dibawah ini:
Gambar 1.4

4. Dreamweaver CS4 4
2.3 Status bar
Status bar di bagian bawah jendela dokumen menyediakan informasi tambahan
tentang dokumen yang sedang aktif anda buat.
Gambar 1.5
2.4 Kotak Properti
Kotak properti merupakan kotak dimana kita dapat melihat format dari suatu objek
pada dokumen sekaligus bisa langsung mengubahnya. Properties HTML
digunakan untuk mengatur halaman dan properties CSS digunakan untuk mengatur
format font. Perhatikan tampilan property pada gambar 1.6
Gambar 1.6
3. Memulai membuat site baru
Langkah untuk membuat site baru dapat dilakukan dengan cara memilih ikon Site
kemudian submenu New site.
Klik disini

5. Dreamweaver CS4 5
Maka akan muncul kotak dialog seperti gambar:
Bagian ini digunakan untuk menentukan kita akan mengunakan Server Technology
atau tidak.
Tuliskan nama
website anda
Klik tombol
Next >

6. Dreamweaver CS4 6
Selanjutnya tentukan tempat menyimpan website.
Langkah berikutnya digunakan untuk memilih:
Klik Next > kemudian tentukan pilihan untuk check file, pilih No.
Remote folder
digunakan untuk
melihat lokasi
folder yang
digunakan.
Refresh
remote file
list
automatically
digunakan
Menentukan
folder tempat
menyimpan
website.
Klik tombol Next
>

7. Dreamweaver CS4 7
Selanjutnya memastikan bahwa pilihan-pilihan kita sebelumnya sudah benar,
kemudian klik tombol Done.
Halaman website yang anda buat akan tampil pada sebelah kanan layar, disitulah
nantinya semua file akan tersimpan.
Pilih No,
kemudian Next >
Klik Done untuk
mengakhiri
pembuatan website

8. Dreamweaver CS4 8
4. Membuat Dokumen Baru
Setelah selesai membuat site baru, selanjutnya membuat dokumen baru. Pilih menu
file dan sub menu New atau Ctrl+N kemudian akan tampil gambar 1.13 seperti
terlihat dibawah ini.
Gambar 1.13
Tentukan pilihan anda dengan memilih Blank Page karena kita akan membuat design
sendiri. Di atas terlihat dua tombol tab yaitu: Page Type dan Layout.
Pada pilihan category pilih Page Type dan tentukan pilihan jenisnya misalnya HTML
dengan Layout <none> Klik tombol create untuk mengakhirinya pemilihan bentuk
dokumen atau bentuk pilihan column yang ada.

9. Dreamweaver CS4 9
Ketikkan teks berikut pada dokumenmu!
Gambar 1.14
Gunakan menu Insert – Image untuk memasukkan gambar ke document. Aturlah
format font menggunakan Properties CSS.
5. Pengaturan warna tulisan dan latar belakang
Buka kembali dokumen index yang telah anda buat. Tentukan warna latar belakang
dengan cara pilih menu Modify submenu Page Properties atau dapat juga anda
lakukan klik kanan mouse kemudian menu Page Properties. Maka akan muncul
gambar 1.15.
Gambar 1.15

10. Dreamweaver CS4 10
Dari kotak dialog diatas jelaskan masing-masing fungsi dari pilihan di bawah ini:
 Page font : style font untuk semua halaman
 Size : mengubah ukuran teks yang dipilih
 Text color : untuk mengubah warna teks
 Background color : menentukan warna background
 Background image : menampilkan gambar sebagai background
 Repeat : mengatur gambar yang dijadikan background
 Left margin : batas kiri teks dengan pinggir halaman
 Right margin : batas kanan teks dengan pinggir halaman
 Top Margin : batas atas teks dengan pinggir halaman
 Bottom Margin : batas bawah teks dengan pingir halaman
Pilihan Link pada page properties digunakan untuk mengatur hyperlink yang
digunakan misalnya warna dan garis bawah pada link.
5.1 Menyimpan Dokumen
Untuk menyimpan dokumen pilih menu file dan submenu save maka akan muncul
kotak dialog seperti gambar 1.16 di bawah ini.
Gambar 1.16
Pada dropdown save in tentukan root folder yang telah anda tentukan di awal.
Kemudian filename ketikkan index kemudian klik tombol save.

11. Dreamweaver CS4 11
Sampai disini dokumen anda telah tersimpan pada root folder. Selanjutnya lakukan
pengcopyan ke remote folder dengan cara pilih menu File kemudian Save to
remote folder kemudian akan tampil kotak dialog seperti gambar 1.17.
Gambar 1.17
Klik tombol preview maka akan muncul kotak dialog seperti gambar 1.18.
Gambar 1.18
Klik ok untuk memprosesnya kemudian close untuk menutup kotak dialog
tersebut.
6. Browsing
Langkah untuk melihat hasil dari website anda pada internet explorer, maka anda
harus memastikan dalam komputer anda sudah terinstal IIS atau PWS. Periksa
komputer anda dengan cara klik tombol start dan menu setting dan control panel.
Dalam kontrol panel klik ikon Network and Internet kemudian klik ikon Internet
Options.

12. Dreamweaver CS4 12
Klik ikon Preview in browser atau gunakan tombol F12 pada keyboard.
Kesimpulan:
1. Sebutkan jenis-jenis browser yang digunakan untuk menampilkan website
 ______________________________________________________
 ______________________________________________________
 ______________________________________________________
 ______________________________________________________
2. Jelaskan perbedaan repeat dan no repeat pada Page properties!
 ______________________________________________________
 ______________________________________________________
 ______________________________________________________
3. Dapatkah folder local root dibuat sama dengan folder remote root? Jelaskan!
 ______________________________________________________
 ______________________________________________________
 ______________________________________________________
4. Jelaskan langkah-langkah menghilangkan garis bawah pada hyperlink?
 ______________________________________________________
 ______________________________________________________
 ______________________________________________________

13. Dreamweaver 8 13
Kompetensi Dasar:
Menggunakan menu, ikon, dan panel pada perangkat lunak desain web
Indikator:
 Menggunakan menu, ikon, dan panel untuk mengatur format font dan paragraf
 Menggunakan menu, ikon, dan panel untuk mengatur tampilan konten web (layer,
Bullet/Numbering, image, table, form)
 Menggunakan menu, ikon, dan panel untuk membuat hyperlink
 Menggunakan menu, ikon, dan panel untuk membentuk layout halaman web
LKS 2
1. Mengatur format font dan paragraf
Untuk mengatur format font dan paragraf dapat menggunakan properties dibawah ini.
2. Menyisipkan Tabel
Dalam pembuatan dokumen tabel sangatlah penting sebagai sarana yang menunjang
untuk membuat tabular data dan untuk menempatkan teks maupun grafik.
Elemen-elemen tabel terdiri dari:
 Rows : baris
 Columns : kolom
Langkah untuk menyisipkan tabel dapat dilakukan melalui menu Insert dan sub menu
Table. Setelah anda melakukan langkah di atas maka akan muncul kotak dialog seperti
yang terlihat pada gambar 2.1.

14. Dreamweaver CS4 14
Gambar 2.1
Terdapat kotak isian pada kotak dialog insert tabel antara lain:
 rows : menentukan jumlah baris
 columns : menentukan jumlah kolom
 table width : menentukan lebar tabel
 border thickness : menentukan ketebalan border
 cell padding : mengatur jarak antara teks dengan border
 cell spacing : mengatur jarak antar border
 header : memberikan judul di dalam table
 caption : memberikan judul diluar table
 align caption : perataan teks pada caption
 summary : keterangan pada caption
Selain cara di atas dapat juga dilakukan dengan:
 Pada insert bar, klik tab layout kemudian pilih Common - Table kemudian pilih
jumlah baris dan kolom yang dibutuhkan.

15. Dreamweaver CS4 15
Sisipkanlah tabel di bawah ini di dokumenmu
3. Mengedit Tabel
Mengatur format table.
Format tabel misalnya:
 Perataan table
 Mengubah ukuran tabel
 Menentukan warna
 Menyisipkan cel
Perataan tabel.
Jenis perataan tabel terdiri dari:
 Default
 Left
 Center
 Right
Jika anda menggunakan table sebagai layout website maka pastikan jenis perataan yang
digunakan adalah Center supaya hasil websitenya selalu berada di tengah halaman
browser.
Menentukan warna tabel
Untuk menentukan warna tabel dapat dilakukan dengan cara: pilih tabel kemudian ubah
propertinya:
Bg Color untuk menentukan warna background pada tabel
Brdr Color untuk menentukan warna border pada tabel
Bg image untuk menentukan gambar sebagai background suatu table

16. Dreamweaver CS4 16
Jenis pengubahan tabel dapat dilihat pada gambar 2.2:
Gambar 2.2
Beberapa pilihan yang sering digunakan untuk mengatur tabel antara lain:
 Merge cells berfungsi untuk menggabungkan cells
 Split cells berfungsi untuk memisahkan cells pada tabel
 Insert row berfungsi untuk menyisipkan baris
 Insert column berfungsi untuk menyisipkan kolom
 Insert row and column berfungsi untuk menyisipkan baris dan kolom
Sebagai latihan jadikanlah tabel diatas menjadi:
Tentukan warna untuk membedakan tiap-tiap kelas.
Perataan text didalam tabel:
Untuk meratakan text dalam tabel dapat dilakukan dengan cara pilih cells atau tabel
secara keluruhan kemudian ganti property di bawah ini:

17. Dreamweaver CS4 17
HorZ berfungsi untuk mengatur perataan teks secara horizontal (default, left, center,
right)
Vert berfungsi untuk mengatur perataan teks secara vertical (default, top, midle,
bottom, baseline)
Perataan paragraph
 Align Left
 Align Center
 Align Right
 Justify
4. Menyisipkan objek
Jenis-jenis objek yang disisipkan misalnya:
 Gambar dan horizontal rule
 Membuat link
 Tanggal dan lain-lain
Gambar 2.3
Membuat Gambar dan Horizontal Rule
Perhatikan gambar 2.3 di bawah ini!

18. Dreamweaver CS4 18
Langkah untuk membuatnya adalah:
 Buat tabel yang terdiri dari 2 kolom dan 2 baris
 Atur penulisan supaya teks dimulai dari kiri dan dari atas. Ingat Horz dan Vert
 Buat Horizontal rule dengan cara pilih menu Insert dan sub menu HTML –
Horizontal Rule
 Untuk menyisipkan gambar pilih menu Insert dan submenu Image
 Atur tampilan supaya sama seperti di atas.
Latihan!
Desain halaman web seperti gambar dibawah ini, gunakan tabel sebagai layout halaman
web.
5. Membuat Hyperlink
Dalam membuat website tentu kita pasti membuat link, maksudnya menghubungkan
satu dokumen dengan dokumen lainnya. Dalam macromedia dreamweaver link ini
terbagi dua yaitu: link dari teks atau gambar yang sudah ada dan link dari teks yang
belum ada. Bagi para web desainer biasanya terlebih dahulu link dari pada file yang
akan dihubungkan.
Cara membuat link:
1. Blok teks atau gambar yang akan dibuat link.
2. Klik menu Insert
3. Pilih sub menu Hyperlink klik browse untuk mencari file yang akan dituju, atur
juga target yang akan digunakan.
4. Klik OK

19. Dreamweaver CS4 19
Selain dari menu Insert anda dapat mengatur link dari kotak dialog properties yang
berada di bawah halaman.
Dalam pembuatan link terdapat empat jenis target yaitu:
 _blank maka semua link terbuka di tab atau window baru.
 _parent maka semua link akan terbuka menutupi halaman sebelumnya (halaman
yang terdapat link tersebut).
 _self maka semua link akan terbuka di bagian dimana link berada (biasanya
digunakan jika kita memakai frame).
 _top maka semua link akan terbuka di bagian atas website (biasanya digunakan
jika kita memakai frame).
Sebagai latihan perhatikan gambar 2.4 di bawah ini:
Gambar 2.4

20. Dreamweaver CS4 20
Tugas:
 Desainlah halaman web di atas. Simpan dan beri nama index.
 Buat empat buah halaman web masing-masing nama file: guru.htm, siswa.htm,
lokasi.htm dan visi.htm
 Buat link masing-masing menu ke file yang sudah anda buat.
Sebagai contoh untuk membuat link guru dan staf, langkah-langkahnya adalah:
 Blok teks guru dan staf
 Dalam kotak property seperti terlihat pada gambar di bawah ini:
 Klik browse for file untuk memilih file yang akan dihubungkan.
 Tentukan target yang anda inginkan.
 Ulangi langkah di atas untuk menu yang lainnya.
Membuat E-mail Link
Untuk menyisipkan email link dalam dokumen dapat dilakukan dengan cara:
 Pindahkan kursor dimana email link akan dibuat.
 Pilih menu Insert dan submenu Email Link maka akan muncul kotak dialog
email link seperti terlihat pada gambar 2.6
Gambar 2.6
Perhatikan kotak teks yang terdapat kotak dialog tersebut:
Text maksudnya teks untuk link.
E-mail maksudnya memasukkan alamat email yang dituju.

21. Dreamweaver CS4 21
Buat dokumen seperti terlihat pada gambar 2.7!
Gambar 2.7
 Simpan dokumen diatas dengan nama index.html
 Buat 3 dokumen lagi masing-masing nama file: info.html, me.html dan
hobby.html
 Buat E-link untuk teks Hubungi saya

22. Dreamweaver CS4 22
Tugas:
Buat website penjualan OnLine (contoh gambar di bawah)
 Gambar di bawah sebagai homepage, gunakan tabel sebagai dasar layout halaman
web di bawah.
 Tambahkan halaman web sesuai kebutuhan (minimal 3 web-page)
Kesimpulan:
1. Dapatkah disebuah table terdapat table lagi _______________________
__________________________________________________________
__________________________________________________________
2. Tuliskan cara membuat hyperlink ______________________________
______ ____________________________________________________
__________________________________________________________
3. Tuliskan jenis-jenis target dalam hyperlink!
__________________________________________________________
__________________________________________________________
4. Tuliskan jenis perataan teks dan artinya!
__________________________________________________________

23. Dreamweaver CS4 23
Kompetensi Dasar:
Menggunakan menu, ikon, dan panel pada perangkat lunak desain web
Indikator:
Menggunakan menu, ikon, dan panel untuk mengatur format font dan paragraf
Menggunakan menu, ikon, dan panel untuk mengatur tampilan konten web (AP Div,
Bullet/Numbering, image, table, form)
Menggunakan menu, ikon, dan panel untuk membuat hyperlink
Menggunakan menu, ikon, dan panel untuk membentuk layout halaman web
LKS 3
1. AP Div
AP Div adalah elemen halaman HTML yang dapat ditempatkan pada sembarang
tempat. AP Div berupa frame atau bingkai yang dapat berisi teks, image dan lainnya.
Cara membuat AP Div:
 Pastikan tampilan layout standar view.
 Pilih menu Insert kemudian pilih Layout Objects kemudian AP Div
Sehingga dalam dokumenmu akan terlihat seperti gambar 3.1
Gambar 3.1
Mengubah ukuran AP Div
Langkah untuk mengubah ukuran AP Div dapat dilakukan secara langsung dengan
menempatkan pointer pada salah satu handle disekeliling layer.
Klik ke dalam untuk mengecilkan dan keluar untuk memperbesar.
Atau dapat juga dengan mengubah propertynya, misalnya:
L untuk menentukan batas kiri
T untuk menentukan batas atas
W untuk menentukan ukuran lebar
H untuk menentukan ukuran tinggi

24. Dreamweaver CS4 24
Latihan
Desainlah dokumen seperti terlihat pada gambar dibawah!
2. Frame
Membuat frame berhubungan dua hal yaitu frame dan frameset. Perbedaan dari frame
dan frameset adalah:
a. Frameset setiap halaman dalam web yang terdiri dari beberapa frame
b. Frame adalah bagian-bagian dalam sebuah frameset
Langkah-langkah membuat frame adalah klik menu Insert pilih HTML kemudian klik
Frames dan tentukan bentuk dari frame yang diinginkan.
Jenis-jenis frameset dapat dilihat pada gambar dibawah ini.

25. Dreamweaver CS4 25
Contoh: Perhatikan tampilan gambar di bawah ini.
 Buatlah tampilan frameset di bawah ini
 Tambahkan teks dan gambar seperti tampilan di bawah.
Bentuk dari frameset di atas adalah ___________________________________

26. Dreamweaver CS4 26
Mengubah property frameset.
Mengubah property dapat dilakukan pada kotak property seperti gambar dibawah ini.
Jelaskan fungsi pilihan di bawah ini:
Borders : mengatur pilihan menggunakan bingkai atau tidak
Borders width : mengatur ukuran ketebalan bingkai
Borders color : warna dari bingkai
3. Bekerja dengan form
Form merupakan sarana yang memungkinkan pengunjung web berinteraksi dengan
pengelola website karena form dapat mengumpulkan semua informasi dari user untuk
kemudian diteruskan ke server untuk di proses.
Langkah untuk membuat form dari menu Insert kemudian pilih Form dan tentukan
objek form yang diinginkan. Atau gunakan ikon-ikon pada Tab Insery di sebelah kanan
layar monitor.

27. Dreamweaver CS4 27
Beberapa elemen form yang sering digunakan antara lain:
Form: untuk menampung elemen yang akan dimasukkan ke
dalam jendela dokumen.
Text Field: untuk memasukkan karakter.
Text Area: untuk memasukkan karakter yang lebih banyak.
Check Box: untuk memilih beberapa pilihan.
Radio Button: untuk memilih satu pilihan.
List/Menu: daftar pilihan berupa list untuk memilih satu
pilihan
Jump Menu: sama seperti di atas tetapi mengandung link.
Button: objek yang berupa tombol untuk menjalankan proses
dengan fungsi yang berbeda yaitu Submit untuk pemrosesan
data dan Reset untuk menghapus data.
3.1 Membuat form dengan menambahkan objek teks box
Langkah -langkah membuat text field adalah:
 Tempatkan kursor di dalam outline form.
 Klik menu Insert sub menu Form kemudian Text Field
 Pada property isikan teks seperti dibawah ini.
Perhatikan tampilan teks field di bawah ini:
Multi Line

28. Dreamweaver CS4 28
Desainlah halaman web seperti di bawah ini!
3.1 Button
Button mengatur operasional form. Maksudnya button digunakan untuk men-
submit data yang dimasukkan dalam form ke server atau untuk me-reset form.
Langkah untuk menyisipkan button adalah:
 Tempatkan titik insertasi di dalam outline form
 Klik menu insert sub menu Insert sub menu Form kemudian Button
Atur propertinya seperti terlihat pada gambar berikut:
Button name : memberi nama tombol
Label : teks yang tampil pada tombol
Action : perintah yang dipilih (reset/submit)
Tambahkan desain form anda seperti gambar di bawah ini:
Single Line
Password

29. Dreamweaver CS4 29
3.2 Membuat List dan Menu
List dan menu memungkinkan pemberian berbagai macam opsi yang
ditampilkan pada area yang ringkas pada user. List menyediakan scroll bar yang
memungkinkan user melakukan navigasi pada keseluruhan item.
Scrolling list memungkinkan penampilan multiple opsi didalam satu area
(spasi). User dapat menggulung list yang ada dan memilih lebih dari satu item.
Langkah pembuatan scrolling adalah:
 Tempatkan kursor untuk membuat form.
 Pilih menu Insert sub menu Form
 Kemudian pilih List menu
Perhatikan tampilan di bawah ini:
 Perhatikan property dibawah ini
 Setelah itu klik List Values untuk menambah opsi pilihan pada list.
Tambahkan di dalam dokumenmu list menu seperti tampil di bawah ini.
3.3 Radio button
Radio button digunakan apabila user harus memilih salah satu opsi dari satu
group opsi yang disediakan. Radio button biasanya digunakan dalam group.
Langkah pembuatan radio button adalah:
 Tempatkan kursor untuk membuat form.
 Pilih menu Insert sub menu Form
 Kemudian pilih Radio button

30. Dreamweaver CS4 30
Perhatikan tampilan gambar dibawah ini:
 Perhatikan tampilan propertinya
Langkah untuk membuat radio group dapat dilakukan dengan:
 Tempatkan kursor untuk membuat form.
 Pilih menu Insert sub menu Form
 Kemudian pilih Radio group
Perhatikan tampilan gambar dibawah ini.
 Ketikkan nama group dan label
dan valuenya
 Klik tombol OK.
Latihan form seperti terlihat pada
gambar di samping ini.
3.4 Check box
Check box dan radio button memungkinkan user untuk memilih objek yang
terseleksi.
Langkah-langkah membuat check box adalah:
 Tempatkan kursor untuk membuat form.
 Pilih menu Insert sub menu Form
 Kemudian pilih Check box

31. Dreamweaver CS4 31
Perhatikan tampilan di bawah ini:
 Perhatikan tampilan propertinya:
Latihan: Desainlah form di bawah ini:
Kesimpulan:
1. Tuliskan perbedaan memasukkan gambar secara langsung dan menggunakan AP Div.
__________________________________________________________________
__________________________________________________________________
2. Tuliskan perbedaan dari check box dan radio button.
__________________________________________________________________
__________________________________________________________________
Latihan
1. Buatlah dokumen untuk pendaftaran siswa baru
2. Buatlah dokumen untuk mengisi data siswa anggota ekstrakulikuler Komputer.

32. Dreamweaver 8 32
Kompetensi Dasar:
Menggunakan menu, ikon, dan panel pada perangkat lunak desain web
Indikator:
Menggunakan menu, ikon, dan panel untuk mengatur format font dan paragraf
Menggunakan menu, ikon, dan panel untuk mengatur tampilan konten web (layer,
Bullet/Numbering, image, table, form)
Menggunakan menu, ikon, dan panel untuk membuat hyperlink
Menggunakan menu, ikon, dan panel untuk membentuk layout halaman web
LKS 4
1. Membuat link gambar
Link gambar maksudnya adalah link yang dibuat menggunakan gambar sebagai
perantaranya dan tidak terdapat suatu tombol khusus seperti link teks.
Langkah-langkah untuk membuat link gambar adalah:
 Insert suatu gambar pada dokumen.
 Dalam kotak property seperti gambar 4.1 ketikkan alamat link di kotak link.
Dalam dreamweaver juga mengenal istilah image map yaitu bagian gambar
yang akan dibuat link.
Masing-masing tool tersebut membagi gambar ke dalam bentuk rectangular
(kotak), oval (lingkaran) dan polygon (polygon).
Cara untuk membuat image map dapat dilakukan dengan cara:
 Masukkan satu gambar pada dokumen.
 Pada kotak property gambar pilih tool yang anda gunakan. Misalnya gambar di bawah
ini:
Ketikkan link ke
dokumen
Jenis-jenis tool

33. Dreamweaver CS4 33
2. Membuat Named Anchor
Terkadang dalam dokumen yang cukup panjang, kita memerlukan suatu penghubung
antara suatu bagian dokumen dengan bagian dokumen lainnya. Ini biasanya untuk
menghemat waktu dan memudahkan navigasi agar bisa menuju dokumen tertentu.
Named Anchor adalah memberi nama link pada satu halaman (bisa keatas halaman
atau kebawah halaman).
Langkah untuk membuat named anchor dapat dilakukan dengan langkah-langkah
dibawah ini:
 Letakkan kursor dimana akan diletakkan tanda atau yang akan dijadikan sebagai
named anchor.
 Klik tombol Insert pada kategori Named Anchor.
 Maka akan muncul kotak dialog berikut:
 Berikan suatu nama untuk anchor tersebut misalnya latihan
 Klik tombol ok.
 Perhatikan kotak property di bawah ini:
 Setelah selesai maka kita perlu membuat link yang akan diarahkan ke bagian
anchor tersebut.
 Pilih teks dari dokumen yang akan menjadi link dari anchor tersebut.
Latihan
Buatlah website tentang tubuh manusia
dimana setiap anggota tubuh mempunyai
link ke suatu dokumen.
Jadi jelas dalam satu gambar bisa
kita buat lebih dari satu link.

34. Dreamweaver CS4 34
 Pada kotak link ketikkan nama anchor yeng telah anda buat dengan didahului
dengan tanda #.
3. Link dengan Rollover Image
Selain dengan flash kita juga dapat membuat efek rollover pada suatu gambar.
Langkah untuk membuat rollover dengan gambar ikuti langkah-langkah dibawah ini:
 Klik tombol Image: Rollover image pada kategori common dalam insert bar.
Maka akan tampil kotak dialog seperti gambar dibawah ini:
 Dalam kotak dialog insert rollover image terdapat isian misalnya:
Original image : memilih gambar pertama
Rollover image : memilih gambar kedua
Alternate text : tulisan atau teks yang akan muncul diatas link
Go To URL : alamat link yang dituju
 Klik tombol OK untuk mengakhiri.
Latihan:
Buatlah satu dokumen yang isinya mengenai ringkasan beberapa mata pelajaranmu.
Buat named anchor untuk bisa memindahkan dari satu materi ke materi lain.

35. Dreamweaver CS4 35
4. Membuat Marquee
Marquee adalah teks berjalan, langkah pembuatannya adalah:
 Klik tombol Tag Chooser pada panel Insert. Kotak dialog Tag Chooser akan
segera terbuka memperlihatkan semua Tag yang dapat kita pilih.
 Klik pada folder HTML tags. Subfolder pada HTML tags akan terbuka.
 Klik pada subfolder Page Elements. Kolom di sebelah kanan sekarang akan
terisi dengan tag-tag yang dapat dipilih.
Klik pada marquee yang terdapat di kolom sebelah kanan.
 Klik tombol Insert untuk memasukkan tag marquee ke dalam halaman kerja
kita. Klik tombol Close untuk mengakhiri.
Klik pada Tag Chooser

36. Dreamweaver CS4 36
Kesimpulan:
1. Tuliskan jenis-jenis tool yang digunakan untuk membuat image map.
________________________________________________________________
2. Apa perbedaan dari original image dengan rollover image: ________________
________________________________________________________________
3. Kapan digunakan named anchor _____________________________________
________________________________________________________________
4. Apakah perbedaan dari Rollover image dan Image viewer _________________
________________________________________________________________

37. Dreamweaver CS4 37
Kompetensi Dasar:
Membuat website dengan menu, ikon, dan panel pada perangkat lunak desain web
Indikator:
 Membuat website dengan behaviour menggunakan menu, ikon, dan panel pada
perangkat lunak desain web
 Membuat website dinamis dengan menu, ikon, dan panel pada perangkat lunak desain
web
LKS 5
1. Menu Navigasi
Navigation bar atau menu navigasi adalah cara lain untuk membuat link dengan gambar
rollover.
Untuk menggunakan tool ini maka terlebih dahulu anda telah menyediakan beberapa
gambar. Ikutilah langkah-langkah sebagai berikut:
 Klik tombol Insert pada kategori Image Objects pilih Navigation Bar.
 Maka akan tampil kotak dialog di bawah ini:
 Berikan suatu nama pada tombol menu dalam kotak elemen name.
 Tentukan gambar yang akan digunakan sebagai menu rollover.
a. Up image untuk memilih gambar awal
b. Over Image untuk mengganti gambar awal ketika kursor melewati
gambar awal
c. Down untuk untuk mengganti gambar awal ketika kursor diklik
d. Over while DownImage digunakan untuk mengganti gambar jika
gambar yang asli belum selesai diload
 Berikan penjelasan teks pada kotak alternate teks.
 Masukkan alamat URL yang dituju, Klik OK

38. Dreamweaver CS4 38
Sekarang perhatikan jarak antara tombol hampir tidak ada. Untuk itu anda boleh
membuatnya dalam table.
Latihan!
Buka kembali website anda tentang pelajaran kemudian buatlah menu untuk nama
masing-masing pelajaran menggunakan tombol.
2. Jump Menu
Jump menu adalah suatu menu pull-down yang dibuat dengan menggunakan elemen
jump dalam suatu form.
Untuk membuat jump menu ikuti langkah-langkah sebagai berikut:
 Klik tombol Form Jump Menu pada kategori Insert dalam insert bar.
 Maka akan tampil kotak dialog sebagai berikut:
 Masukkan teks yang akan ditampilkan sebagai link menu dalam kotak teks.
 Masukkan alamat URL dari menu yang akan dilink.
 Tentukan target URL pada kotak Open URLs In.
 Berikan suatu nama untuk menu ini pada kotak menu name.
 Pada kotak option tandai insert GoButton After Menu jika:
_____________________________________________________
 Pada kotak option tandai select first item after URL change jika:
_____________________________________________________
 Klik tombol Ok.

39. Dreamweaver CS4 39
3. Spry Menu Bar
Langkah-langkah untuk membuat Spry Menu Bar adalah:
 Dari menu Insert pilih Layout Objects kemudian Spry menu bar atau
Insert pilih Spry kemudian Spry menu bar
 Pilih tampilan layoutnya Horizontal atau Vertical:
 Atur bagian property dari Spry Menu Bar:
4. CollapsiblePanel
CollapsiblePanel digunakan untuk menampilkan dan menyembunyikan teks atau
gambar, cara menampilkannya adalah:
 Klik menu Insert
 Sub menu Spry
 Pilih Spry CollapsiblePanel
Vertical
Horizontal

40. Dreamweaver CS4 40
Bagian Tab digunakan untuk menampilkan teks atau gambar di atas.
Bagian Content digunakan untuk menampilkan teks atau gambar jika bagian
tab di klik.
Atur pada bagian propertiesnya:
Contoh hasilnya ada di bawah ini:
5. Menggunakan Effects
Effects dapat ditambahkan pada web kita dengan mengaktifkan terlebih dahulu Panel
behaviors, diaktifkan dengan menggunakan menu Windows dan sub menu Behaviors
atau tekan kombinasi tombol Shift+F4 kemudian klik tanda + pada panel Behaviors.

41. Dreamweaver CS4 41
Pilihan yang sering digunakan antara lain:
Atur pada kotak dialog setelah kita tentukan jenis effectsnya, contoh:
Tentukan kapan effects akan dimunculkan dengan memilih salah satu pilihan di bawah
ini:

42. Dreamweaver CS4 42
6. Memasukkan Animasi
Animasi yang bisa dimasukkan ke dalam website adalah animasi flash yang sudah
dipublish menjadi file dengan exstensi .swf (flash movie), anda bisa membuatnya
terlebih dahulu di flash atau anda bisa membuatnya secara online di internet, misalnya
menggunakan situs www.flashvortex.com kemudian download dan dimasukkan ke
dalam website dengan cara:
 Klik menu Insert
 Pilih submenu Media kemudian pilih SWF
 Atau gunakan shortcutkey Ctrl+Alt+F
7. Memasukkan Video
Langkah-langkah untuk memasukkan video ke dalam website adalah:
 Klik menu Insert
 Pilih submenu Media kemudian pilih FLV

43. Dreamweaver CS4 43
Latihan!
a. Buka kembali dokumen yang telah anda buat, dan tambahkan animasi Namamu.
b. Buatlah website tentang pribadimu sendiri.
Kesimpulan:
1. Jelaskan maksud dari pilihan di bawah ini pada pembuatan Navigation Bar:
 Up image untuk _______________________________________________
 Over Image untuk _____________________________________________
 Down untuk __________________________________________________
 Over while DownImage _________________________________________
2. Jelaskan langkah-langkah pembuatan Jump Menu dan Spry Menu Bar:
 ____________________________________________________________
 ____________________________________________________________
 ____________________________________________________________
3. Tiga variasi jump menu yang dapat anda buat yaitu:
 _____________________________________________________________
 _____________________________________________________________
 _____________________________________________________________