CS3
Langsung Praktek !
PalComTech
Publisher
Adobe Dreamweaver
CS3
Langsung Praktek !
ISBN : 978-602-95409-6-3
ii
Kata Pengantar
Pertama-tama, kami mengucapkan puji dan syukur kepada Tuhan Yang
Maha Esa atas Berkat dan Rahmat-Nya. Selain itu, kami juga mengucapkan
terima kasih karena Anda mau memiliki dan membaca buku ini sebagai
salah satu referensi Anda. Kehadiran buku ini diharapkan dapat membantu
pembaca mengenal dan menggunakan aplikasi Adobe Dreamweaver CS3
dalam mendesain website yang apik dan cantik dengan mudah dan efisien.
Terima kasih juga untuk rekan di PalComTech Publisher yang tidak dapat
disebutkan satu per satu, yang telah membantu dalam menyelesaikan
buku ini.
Penulis
iii
Daftar Isi
Menjalankan Adobe Dreamweaver CS3 1
Mengatur Teks 2
Hyperlink Text dan Background Image 5 1
Menutup dan Membuka File 10
Menyisipkan Gambar 13
Media Interaktif 21 2
Membuat Tabel 37
Mengatur Properti Tabel 40
Memberi Background pada Tabel 43
Menambahkan Kolom atau Baris 47
Menambahkan Kolom atau Baris 50 3
Menghapus Kolom atau Baris 53
Menggabungkan Sel pada Tabel 55
Memisahkan Sel pada Tabel 59
Membangun Website dengan Tabel 63
Menggunakan Layer 77
Memberi Warna pada Layer 79
Menyisipkan Gambar pada Layer 82 4
Membangun Website dengan Layer 87
iv
Chapter 1
Pengenalan
Adobe Dreamweaver CS3
Praktek
1. Klik tombol Start pada windows taskbar.
2. Klik menu All Programs.
3. Pilih Adobe Design Premium CS3.
4. Klik Adobe Dreamweaver CS3.
5. Akan tampil jendela awal program Adobe Dreamweaver CS3,
seperti gambar di bawah ini :
1
Chapter 1. Pengenalan Adobe Dreamweaver CS3
2. Mengatur Teks
Praktek
Berikut ini kita akan membuat website sederhana yang berfungsi untuk
mengatur teks :
1. Buka aplikasi Dreamweaver CS3
2. Klik HTML pada bagian Create New. Setelah itu akan tampil lembar
kerja document baru.
Klik disini
2
Chapter 1. Pengenalan Adobe Dreamweaver CS3
Pilih jenis
7. Pada Size tentukan ukuran teks, kemudian gunakan Bold dan Italic.
3
Chapter 1. Pengenalan Adobe Dreamweaver CS3
Tentukan size
8. Teks masih dalam keadaan diblok, lalu pada text color pilih warna
yang akan digunakan pada teks.
Pilih warna
9. Lakukan cara yang sama untuk mengatur teks pada setiap baris.
Seperti gambar dibawah :
4
Chapter 1. Pengenalan Adobe Dreamweaver CS3
A. Background Image
Pada Adobe Dreamweaver CS3, kita dapat menyisipkan gambar latar
(background) pada halaman web dengan cara yang mudah. Berikut
adalah langkah-langkahnya :
Praktek
1. Buka aplikasi Dreamweaver CS3
2. Siapkan sebuah lembar kerja baru, tekan Ctrl + N dan klik tombol
Create pada kotak dialog New Document
3. Buka jendela Page Properties. ( Ctrl + J)
4. Aktifkan list category Appearence, kemudian pada bagian
Background Image, klik tombol Browse.
5
Chapter 1. Pengenalan Adobe Dreamweaver CS3
1.Plih Category
2.Klik Browse
3.Klik OK
Klik OK
2.Ketik Judulnya
1.Pilih Category
3.Klik OK
6
Chapter 1. Pengenalan Adobe Dreamweaver CS3
7
Chapter 1. Pengenalan Adobe Dreamweaver CS3
Klik disini
B. Hyperlink Text
Masih pada lembar kerja sebelumnya. Setelah membuat design web dan
sudah mengatur font, size dan color. Maka pada pembahasan ini, Anda
akan mempelajari bagaimana cara menghubungkan antar dokumen.
Praktek 3
1. Masih pada web flowers yang aktif sebelumnya
2. Siapkan lembar kerja baru, tekan Ctrl + N dan klik tombol Create
pada kotak dialog New Document.
3. Ketik teks “ Example Link.... “ dan atur propertinya (font, size dan
color).
8
Chapter 1. Pengenalan Adobe Dreamweaver CS3
Klik browse
2.Klik OK
9
Chapter 1. Pengenalan Adobe Dreamweaver CS3
A. Membuka File
Praktek
1. Masih pada jendela kerja Dreamweaver yang masih aktif.
2. Tutup lembar kerja yang sedang aktif dengan cara klik kanan lalu
klik close.
10
Chapter 1. Pengenalan Adobe Dreamweaver CS3
Klik close
Klik open
11
Chapter 1. Pengenalan Adobe Dreamweaver CS3
Pilih File
Klik Open
B. Menutup File
Praktek
1. Klik menu file
2. Lalu klik Exit
12
Chapter 2
Menyisipkan
Gambar dan Media
1. Menyisipkan Gambar
Pada saat membuat website, kita perlu menambahkan gambar untuk
memperjelas teks yang dibuat pada website. Misalnya, kita hendak
memperkenalkan suatu produk merek tertentu, pastinya konsumen yang
membaca iklan tersebut tidak akan puas hanya dengan membaca teks
saja. Oleh karena itu, kita harus menambahkan gambar dari produk
tersebut agar konsumen juga bisa tertarik dengan iklan yang kita buat.
Sebelumnya, kita telah mempelajari bagaimana membuat web
sederhana. Jadi, untuk seterusnya contoh yang akan ditampilkan berupa
tampilan web yang telah jadi. Untuk lebih jelasnya, perhatikanlah contoh
di bawah ini.
13
Chapter 2. Menyisipkan Gambar dan Media
Praktek
1. Buatlah dokumen baru.
2. Kemudian letakkan kursor pada stage.
3. Klik Tab Common.
14
Chapter 2. Menyisipkan Gambar dan Media
15
Chapter 2. Menyisipkan Gambar dan Media
B. Memformat Gambar
Setelah gambar ditambahkan pada halaman web, langkah selanjutnya
yang harus kita lakukan adalah memformat gambar tersebut dengan
mengatur ukuran dan tata letak gambar pada web agar enak dilihat.
Ikutilah langkah-langkah berikut :
Praktek
1. Bukalah file index.html.
2. Atur ukuran gambar agar sesuai dengan ukuran website yaitu
dengan cara klik pada gambar.
16
Chapter 2. Menyisipkan Gambar dan Media
17
Chapter 2. Menyisipkan Gambar dan Media
Praktek
1. Bukalah file index.html.
2. Klik pada gambar yang akan diberikan bingkai.
3. Ketik ukuran bingkai pada Border di Property Inspector. Pada
contoh Border = 2.
18
Chapter 2. Menyisipkan Gambar dan Media
Latihan 1
Buatlah desain salah satu halaman web sederhana seperti pada gambar
berikut ini.
Praktek
1. Buatlah sebuah dokumen baru.
2. Kemudian masukkan gambar latar halaman, yaitu background.jpg.
19
Chapter 2. Menyisipkan Gambar dan Media
20
Chapter 2. Menyisipkan Gambar dan Media
2. Media Interaktif
Pada aplikasi Adobe Dreamweaver CS3 terdapat fasilitas untuk
memasukkan file media. File media ini terdiri dari file Audio,
Flash/Shockwave, Applet Java, Active X, dan Plugin. Dengan
menambahkan file media kita dapat membuat halaman web kita menjadi
lebih menarik dan atraktif.
21
Chapter 2. Menyisipkan Gambar dan Media
Praktek
1. Buatlah dokumen baru.
2. Kemudian klik pada stage, lalu klik Tab Common.
3. Klik Media, lalu klik Plugin.
22
Chapter 2. Menyisipkan Gambar dan Media
5. Klik Ok.
23
Chapter 2. Menyisipkan Gambar dan Media
24
Chapter 2. Menyisipkan Gambar dan Media
Praktek
1. Buatlah dokumen baru.
2. Klik pada stage, lalu klik Tab Common.
3. Klik Media, lalu klik Flash.
25
Chapter 2. Menyisipkan Gambar dan Media
26
Chapter 2. Menyisipkan Gambar dan Media
27
Chapter 2. Menyisipkan Gambar dan Media
28
Chapter 2. Menyisipkan Gambar dan Media
Praktek
1. Buatlah dokumen baru.
2. Klik pada stage, lalu klik Tab Common
3. Klik Media, pilih Flash Video.
29
Chapter 2. Menyisipkan Gambar dan Media
30
Chapter 2. Menyisipkan Gambar dan Media
31
Chapter 2. Menyisipkan Gambar dan Media
32
Chapter 2. Menyisipkan Gambar dan Media
Latihan 2
Pada latihan kali ini, kita akan membuat halaman Download pada web
sederhana menggunakan tool media interaktif seperti pada gambar berikut.
33
Chapter 2. Menyisipkan Gambar dan Media
Praktek
1. Buatlah sebuah dokumen baru.
2. Masukkan gambar background.jpg pada halaman web.
3. Ketik teks untuk menu dan judul halaman, yaitu “DOWNLOAD” dengan
format yang sama pada Latihan 1.
34
Menyisipkan Gambar dan Media
35
Chapter 2. Menyisipkan Gambar dan Media
36
Chapter 3
Bekerja dengan
Tabel
1. Membuat Tabel
Berikut ini kita akan mempelajari bagaimana membuat table sederhana
menggunakan Adobe Dreamweaver CS3. Untuk lebih jelasnya,
perhatikan contoh di bawah ini. Pada contoh di bawah ini kita akan
membuat table untuk mengatur letak teks yang berupa biodata pada
halaman Profile pada Web yang telah kita buat pada pembahasan
sebelumnya.
Praktek
1. Buatlah dokumen baru.
2. Kemudian klik pada stage, lalu klik Tab Common.
37
Chapter 3. Bekerja dengan Tabel
3. Klik Table.
38
Chapter 3. Bekerja dengan Tabel
39
Chapter 3. Bekerja dengan Tabel
40
Chapter 3. Bekerja dengan Tabel
Oleh karena itu, untuk contoh berikut ini kita akan menggunakan table
yang telah dibuat sebelumnya pada halaman Tabel.htm. Perhatikan
contoh table yang telah diubah berikut ini.
Praktek
1. Bukalah file Tabel.html.
2. Kemudian klik pada table.
41
Chapter 3. Bekerja dengan Tabel
42
Chapter 3. Bekerja dengan Tabel
43
Chapter 3. Bekerja dengan Tabel
Praktek
1. Bukalah file Tabel.html.
2. Klik pada bingkai table.
3. Klik icon berbentuk kotak berbentuk segiempat berwarna putih
pada Bg color di Property Inspector, kemudian pilih warna.
44
Chapter 3. Bekerja dengan Tabel
Praktek
1. Buka file Tabel.html.
2. Kemudian klik pada table.
3. Setelah itu, klik icon berbentuk folder pada Bg Image di Property
Inspector.
45
Chapter 3. Bekerja dengan Tabel
4. Pilih file gambar yang akan dijadikan background table, klik Ok. Pada
contoh pilih file bunga.png.
46
Chapter 3. Bekerja dengan Tabel
Praktek
1. Buatlah dokumen baru.
2. Kemudian klik pada stage, lalu buatlah sebuah table dengan
keterangan sebagai berikut :
Row : 2
Column : 1
Width : 200
Border thickness : 1
Cell padding : 0
Cell spacing : 0
47
Chapter 3. Bekerja dengan Tabel
48
Chapter 3. Bekerja dengan Tabel
49
Chapter 3. Bekerja dengan Tabel
50
Chapter 3. Bekerja dengan Tabel
Praktek
1. Bukalah file Tabel.html.
2. Kemudian tentukan di mana kolom atau baris akan ditambahkan.
Pada contoh tambahkan baris di bawah E-mail dan kolom di sisi kiri
E-mail.
3. Letakkan pointer di sel E-mail.
51
Chapter 3. Bekerja dengan Tabel
52
Chapter 3. Bekerja dengan Tabel
Praktek
1. Buka file Tabel.html.
2. Klik pada kolom atau baris yang akan dihapus. Pada contoh hapus
kolom nomor.
53
Chapter 3. Bekerja dengan Tabel
54
Chapter 3. Bekerja dengan Tabel
55
Chapter 3. Bekerja dengan Tabel
Praktek
1. Buatlah sebuah dokumen baru.
2. Kemudian buatlah table dengan keterangan sebagai berikut :
Row : 3 Cell padding dan Cell
Column : 5 spacing : 0
Border thickness : 1
56
Chapter 3. Bekerja dengan Tabel
4. Klik icon Merge Cell pada Property Inspector, maka kolom yang
diblok akan bergabung menjadi satu kolom.
57
Chapter 3. Bekerja dengan Tabel
58
Chapter 3. Bekerja dengan Tabel
59
Chapter 3. Bekerja dengan Tabel
Praktek
1. Bukalah file Tabel Gambar2.html
2. Tambahkan satu baris di bawah baris judul dengan menggunakan
cara yang telah dibahas pada poin sebelumnya.
60
Chapter 3. Bekerja dengan Tabel
61
Chapter 3. Bekerja dengan Tabel
62
Chapter 3. Bekerja dengan Tabel
Praktek
1. Buatlah dokumen baru.
63
Chapter 3. Bekerja dengan Tabel
64
Chapter 3. Bekerja dengan Tabel
CellSpace : 0 px
Border : 1 px
5. Kemudian atur table ke tengah-tengah halaman web.
65
Chapter 3. Bekerja dengan Tabel
66
Chapter 3. Bekerja dengan Tabel
67
Chapter 3. Bekerja dengan Tabel
68
Chapter 3. Bekerja dengan Tabel
69
Chapter 3. Bekerja dengan Tabel
70
Chapter 3. Bekerja dengan Tabel
17. Letakkan pointer pada baris kedua, kemudian pilih Top pada pilihan
Vertical pada Property Inspector.
71
Chapter 3. Bekerja dengan Tabel
72
Chapter 3. Bekerja dengan Tabel
73
Chapter 3. Bekerja dengan Tabel
74
Chapter 3. Bekerja dengan Tabel
75
Chapter 3. Bekerja dengan Tabel
Size : 16 px
30. Hilangkan bingkai table tersebut dengan mengubah property table
sebagai berikut :
CellPad : 0
CellSpace : 0
Border : 0
76
Chapter 4
Bekerja dengan
Layer
1. Menggunakan Layer
Sama seperti Tag Div, Layer merupakan bagian elemen Tag Div yang
telah dimodifikasi menjadi sebuah elemen berbentuk objek transparan
yang digunakan untuk meletakkan objek gambar, teks, dan lainnya.
Anda dapat menempatkan objek di mana saja dengan cara bertumpuk-
tumpuk tanpa harus tergeser karena ada objek lainnya yang
menempatinya. Akan tetapi, letak layer yang dilihat dari browser akan
berbeda dari letak layer di dokumen (stage) yang kita buat karena
tampilan letak web yang dibuat menggunakan layer akan tergantung
pada ukuran layar monitor yang dipakai oleh pengunjung web. Jadi ada
baiknya jika ingin menggunakan layer, Anda harus menyesuaikan
letaknya di browser. Untuk lebih memahami bagaimana cara
menggunakan layer, ikutilah langkah-langkah pada contoh berikut ini.
77
Chapter 4. Bekerja dengan Layer
Praktek
1. Bukalah file Web Tabel.html.
2. Klik Tab Layout, lalu klik Draw AP Div.
78
Chapter 4. Bekerja dengan Layer
Praktek
1. Buatlah sebuah dokumen baru.
2. Kemudian buatlah layer berukuran W = 555px dan H=332px yang
dapat di atur pada Property Inspector.
80
Chapter 4. Bekerja dengan Layer
81
Chapter 4. Bekerja dengan Layer
Praktek
1. Bukalah file Layer.html.
2. Klik pada bingkai layer (garis berwarna biru).
82
Chapter 4. Bekerja dengan Layer
83
Chapter 4. Bekerja dengan Layer
5. Atur ukuran layer agar sesuai dengan ukuran gambar dan ubah
warna background menjadi warna putih.
B. Menyisipkan Gambar
Praktek
1. Bukalah file Web Tabel.html.
2. Buatlah layer dengan ukuran sesuai kebutuhan. Pada contoh :
W : 103 px
H : 103 px
84
Chapter 4. Bekerja dengan Layer
85
Chapter 4. Bekerja dengan Layer
86
Chapter 4. Bekerja dengan Layer
87
Chapter 4. Bekerja dengan Layer
Praktek
1. Buatlah dokumen baru pada Adobe Dreamweaver CS3.
2. Untuk dapat membuat layout seperti pada contoh, perhatikanlah
gambar di bawah ini.
88
Chapter 4. Bekerja dengan Layer
89
Chapter 4. Bekerja dengan Layer
90
Chapter 4. Bekerja dengan Layer
91
Chapter 4. Bekerja dengan Layer
92
Chapter 4. Bekerja dengan Layer
93
Chapter 4. Bekerja dengan Layer
94
Chapter 4. Bekerja dengan Layer
95
Chapter 4. Bekerja dengan Layer
96
Chapter 4. Bekerja dengan Layer
97
Chapter 4. Bekerja dengan Layer
Font : trebuchet MS
Size : 16 px
Text color : #FFFFFF
Align : Center
98
Chapter 4. Bekerja dengan Layer
22. Ketik teks isi, lalu format teks dengan keterangan sebagai berikut :
Font : Comic Sans MS
Size : 14 px
Text color : #FFFFFF
99
Chapter 4. Bekerja dengan Layer
100
Chapter 4. Bekerja dengan Layer
26. Masukkan gambar satu per satu pada layer tersebut dengan cara
klik dalam layer.
27. Kemudian klik Tab Common.
28. Klik Images : image, lalu pilih Image.
29. Pilih file gambar wallpaper2.jpg, klik Open.
101
Chapter 4. Bekerja dengan Layer
102
Chapter 4. Bekerja dengan Layer
34. Ketik teks seperti pada contoh, lalu atur format teks sebagai
berikut:
Font : TW Cent MT
Size : 14 px
Text color : #FFFFFF
103
Chapter 4. Bekerja dengan Layer
35. Simpan file dengan nama Web Layer.html, kemudian jalankan pada
browser.
104
Chapter 5
Bekerja dengan
Frame
Praktek 1
1. Buka program aplikasi Dreamweaver CS3.
2. Klik HTML pada bagian Create New.
3. Setelah itu akan tampil lembar kerja document baru.
4. Klik File > New > Pilih Page From Sample
5. Lalu pilih Frameset. Pilih jenis bentuk frame : Fixed Top, Nested Left
dan Klik Create
105
Chapter 5. Bekerja dengan Frame
106
Chapter 5. Bekerja dengan Frame
107
Chapter 5. Bekerja dengan Frame
108
Chapter 5. Bekerja dengan Frame
109
Chapter 5. Bekerja dengan Frame
110
Chapter 5. Bekerja dengan Frame
17. Untuk melihat hasilnya, pada document toolbar, klik preview dan
pilih Preview in Iexplore.
111
Chapter 5. Bekerja dengan Frame
Latihan
112
Chapter 5. Bekerja dengan Frame
9. Untuk menambah frame untuk dibawah, klik modify > frameset >
split Frame Down
113
Chapter 5. Bekerja dengan Frame
114
Chapter 5. Bekerja dengan Frame
20. Pada bagian left atau kiri isi dengan beberapa iklan, masukan tabel
ke dalam frame bagian kiri.
- Columns : 1
- Rows :4
21. Untuk tulisan Iklan, Anda bisa mendesignnya di program Photoshop
atau coreldraw.
22. Sebelumnya Anda telah mengetahui apa dan bagaimana kegunaan
layer, setelah Anda mendesign teks Iklan di Photoshop dan
formatnya dijadikan PNG. Anda masukkan ke dalam layer tersebut.
23. Pada toolbar klik Layout > Pilih Draw AP Div.
25. Kemudian pada baris selanjutnya masukkan gambar, pada tool bar
klik common lalu klik image.
115
Chapter 5. Bekerja dengan Frame
26. Setelah itu pada bagian tengah atau isi, beri background image. Klik
Page properties pada properties inspector. Lalu pada backgroud
image, klik browse dan cari gambar yang akan dijadikan
background.
116
Chapter 5. Bekerja dengan Frame
28. Merge Cell kolom pertama dan baris pertama dan sisipkan
background image pada kolom dan baris yang sudah di merge cell.
29. Setelah itu sisipkan lagi tabel pada kolom pertama yang sebelumnya
sudah di beri background image.
- Columns : 4
- Row :1
30. Lalu ketik home, about, photos, dan contact satu per satu pada
setiap kolom
31. Atur jenis font : comic sans ms dan chiller, size : 14 dan color :
#FF6666. Seperti gambar dibawah ini.
32. Selanjutnya merge cell pada kolom ke-1 sampai ke-2 dan baris ke-3
sampai baris ke-5.
33. Pada baris ke-2 yang sudah di merge cell, gunakan layer dan
sisipkan gambar.
34. Masih sama seperti langkah-langkah no. 33, gunakan layer. Lalu
ketik teks seperti gambar dibawah ini :
117
Chapter 5. Bekerja dengan Frame
118
Chapter 5. Bekerja dengan Frame
119
Chapter 5. Bekerja dengan Frame
120
Chapter 6
Bekerja dengan
Form
1. Membuat Form
Form merupakan komponen yang berfungsi untuk berinteraksi dengan
pengguna web. Pengguna web dapat melakukan penginputan dan
penyimpanan data pada komponen form. Berikut ini adalah praktek
pembuatan form.
Praktek
1. Buka aplikasi Adobe Dreamweaver CS3
2. Klik HTML pada bagian Create New. Setelah itu akan tampil lembar
kerja document baru.
3. Pada tab menu klik Insert > Form > Form.
4. Lalu buat tabel dengan ketentuan berikut :
Width Table : 700 pixels
Column :3
Rows : 13
121
Chapter 6. Bekerja dengan Form
122
Chapter 6. Bekerja dengan Form
123
Chapter 6. Bekerja dengan Form
124
Chapter 6. Bekerja dengan Form
13. Berikutnya untuk kolom Status, gunakan Radio Group. Kotak dialog
radio group akan tampil. Isilah propertinya.
125
Chapter 6. Bekerja dengan Form
126
Chapter 6. Bekerja dengan Form
127
Chapter 6. Bekerja dengan Form
Latihan
128
Chapter 6. Bekerja dengan Form
129
Chapter 6. Bekerja dengan Form
9. Lalu ketik teks pada tabel yang baru Anda buat. Ketik Home pada
kolom pertama, About pada kolom kedua, Photos pada kolom
ketiga dan Join pada kolom keempat.
10. Lalu Atur jenis huruf : Chiller, Comic Sans Ms, ukuran : 24 dan warna
: #FDE9CE.
130
Chapter 6. Bekerja dengan Form
- Comment : TextArea
- Gender : Radio Group
- Date of Birth : List/Menu
- Hobby : Checkbox
- Password : TextField
14. Pada kolom gender isi dengan Radio Group, isi kotak dialog radio
group, seperti gambar berikut :
131
Chapter 6. Bekerja dengan Form
132
Chapter 6. Bekerja dengan Form
133
Chapter 6. Bekerja dengan Form
134
Chapter 7
Membuat Navigasi
dengan Link
135
Chapter 7. Membuat Navigasi dengan Link
Pada contoh berikut ini, kita akan memberi link pada teks ke sebuah
halaman web yang berbeda.
Praktek
1. Bukalah file Web Tabel.html.
2. Untuk membuat link teks, blok teks yang akan diberi link. Pada
contoh blok teks “Tutorial Dreamweaver”.
136
Chapter 7. Membuat Navigasi dengan Link
137
Chapter 7. Membuat Navigasi dengan Link
2. Link ke E-mail
Link juga dapat digunakan untuk menuju ke suatu alamat e-mail. Pada
saat Anda klik link ini, maka akan terbuka jendela (window) untuk
membuat message baru dari program yang telah diset, seperti Microsoft
Outlook atau Outlook Express, dan secara otomatis menampilkan alamat
e-mail dalam link di bagian To. Untuk lebih memahami, perhatikanlah
138
Chapter 7. Membuat Navigasi dengan Link
Praktek
1. Bukalah file Web Tabel.html
2. Blok teks stress_corner@plasa.com yang ada pada dokumen.
139
Chapter 7. Membuat Navigasi dengan Link
3. Link ke Flash
Flash sudah menjadi suatu standar tersendiri dalam dunia animasi web.
Flash dan Dreamweaver beasal dari vendor yang sama, yaitu Adobe. Jadi
tidak mengherankan jika Adobe Dreamweaver CS3 menyediakan cukup
banyak fitur dan kemudahan dalam membuat file Flash.
140
Chapter 7. Membuat Navigasi dengan Link
Dengan Adobe Dreamweaver CS3 kini Anda dapat membuat animasi teks
dan animasi tombol dalam format Flash dengan mudah. Bahkan lebih
dari itu Anda bisa memasukkan suatu link ke dalam teks atau tombol
tersebut.
Praktek
1. Bukalah file Web Tabel.html.
2. Blok teks “Flash Animation” pada kolom sebelah kanan table.
141
Chapter 7. Membuat Navigasi dengan Link
142
Chapter 7. Membuat Navigasi dengan Link
143
Chapter 7. Membuat Navigasi dengan Link
Praktek
1. Bukalah file Web Tabel.html.
2. Letakkan pointer di bawah teks “Supported by”.
144
Chapter 7. Membuat Navigasi dengan Link
145
Chapter 7. Membuat Navigasi dengan Link
146
Chapter 7. Membuat Navigasi dengan Link
12. Atau klik tombol Browse pada When clicked, Go to URL untuk
memilih nama dokumen yang akan dituju. Pada contoh pilih file
Flash.html.
147
Chapter 7. Membuat Navigasi dengan Link
148
Chapter 7. Membuat Navigasi dengan Link
5. Link ke Frame
Link digunakan untuk membuka dokumen dalam frame lain harus
memiliki target link. Atribut target link menentukan frame atau dokumen
yang dihubungkan saat link dibuka.
Sebagai contoh jika link yang digunakan sebagai navigasi halaman
diletakkan di frame sebelah kiri, dan menggunakan frame di sebelah
kanan (mainframe) untuk menampilkan isi, maka Anda harus
menetapkan nama mainFrame sebagai target dari masing-masing link
dalam baris navigasi. Pada saat pengunjung memilih salah satu link
dalam baris navigasi, maka isi yang telah ditentukan akan ditampilkan di
mainframe.
Praktek
1. Bukalah file index.html yang ada pada folder Web_Frame.
2. Blok teks yang akan di-link. Pada contoh blok teks Images yang
berada di frame Left atau frame sebelah kiri.
149
Chapter 7. Membuat Navigasi dengan Link
150
Chapter 7. Membuat Navigasi dengan Link
151
Chapter 7. Membuat Navigasi dengan Link
152
Chapter 8
Membuat
Navigator Menu
1. Menu Navigasi
Navigasi adalah cara lain untuk membuat link dengan menggunakan
gambar rolover. Menu navigasi dapat dibentuk dalam format horizontal
ataupun vertikal. Seperti pada link gambar rollover, Anda sebaiknya
menyediakan terlebih dahulu gambar atau button yang diperlukan
sebelum menggunakan tool ini.
Praktek
1. Buka file web tabel.html
2. Kemudian hapuslah tombol menu yang telah dibuat sebelumnya.
153
Chapter 8. Membuat Navigator Menu
154
Chapter 8. Membuat Navigator Menu
155
Chapter 8. Membuat Navigator Menu
156
Chapter 8. Membuat Navigator Menu
Latihan
157
Chapter 8. Membuat Navigator Menu
158
Chapter 8. Membuat Navigator Menu
159
Chapter 8. Membuat Navigator Menu
160
Chapter 8. Membuat Navigator Menu
161
Chapter 8. Membuat Navigator Menu
2. Jump Menu
Jump menu merupakan fasilitas untuk menampilkan menu pulldown
dalam form dan menyediakan link dengan tempat yang terbatas. Ada 2
variasi jump menu yang dapat dibuat, yaitu jump menu tanpa tombol
dan jump menu dengan tombol.
162
Chapter 8. Membuat Navigator Menu
Praktek
1. Buka file “web tabel.html”
2. Letakkan kursor pada kolom bagian kanan atas ( sejajar dengan teks
“Adobe Dreamweaver CS3” ). Buatlah tabel dengan ketentuan
sebagai berikut :
Width Table : 309
Columns :2
Rows :2
Align : Right
Seperti pada gambar berikut.
163
Chapter 8. Membuat Navigator Menu
164
Chapter 8. Membuat Navigator Menu
165
Chapter 8. Membuat Navigator Menu
166
Chapter 8. Membuat Navigator Menu
Latihan
167
Chapter 8. Membuat Navigator Menu
5. Lalu merge cell baris pertama, masukkan Banner yang sama seperti
prakter sebelumnya.
6. Merge cell kembali baris kedua, masukkan menu navigasi seperti
praktek sebelumnya. Seperti gambar dibawah ini.
168
Chapter 8. Membuat Navigator Menu
169
Chapter 8. Membuat Navigator Menu
15. Pada kotak Options, tandai Insert Go Button After Menu untuk
menampilkan tombol Go di samping daftar menu.
16. Pada kotak Options, tandai Select First Item After URL Change jika
Anda ingin menampilkan kembali item pertama dari menu setelah
memilih item lainnya dalam menu.
170
Chapter 8. Membuat Navigator Menu
171
Chapter 8. Membuat Navigator Menu
22. Merge cell baris ke-7 sampai ke-8 pada kolom pertama, masukkan
kembali gambar.
23. Masukkan link game pada kolom ke-2 dan ke-4 yang sudah di merge
cell. Dan lakukan cara yang sama pada kolom ke-4 masukkan
gambar kembali.
24. Lakukan cara yang sama untuk gambar yang di bagian bawah.
172
Chapter 8. Membuat Navigator Menu
26. Setelah itu, simpan kembali filenya. Untuk melihat hasilnya, tekan
F12 pada keyboard Anda.
173
Chapter 8. Membuat Navigator Menu
Catatan :
174