Académique Documents
Professionnel Documents
Culture Documents
CS3
Langsung Praktek !
PalComTech
Publisher
Adobe Dreamweaver
CS3
Langsung Praktek !
Penulis
: Dewi Putri & Ayu Ratih Wisah
Editor
: Kasmoni
Desain Kover : Ali Enhamedia
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.
Semoga buku ini dapat menambah pengetahuan dan kemampuan bagi
para pembaca sekalian, baik yang masih pemula maupun yang sudah mahir dan mudah-mudahan buku ini dapat menjadi pedoman dan pegangan
bagi Anda.
Terima kasih juga untuk rekan di PalComTech Publisher yang tidak dapat
disebutkan satu per satu, yang telah membantu dalam menyelesaikan
buku ini.
Kami menyadari pasti ada kekurangan dalam penyajian, ejaan, tulisan,
dan gambar yang kurang tepat dalam buku ini. Oleh karena itu kami meminta maaf dan kami menerima kritik dan saran lewat email beast.creator@yahoo.com.
Penulis
iii
Daftar Isi
Menjalankan Adobe Dreamweaver CS3
Mengatur Teks
2
Hyperlink Text dan Background Image 5
Menutup dan Membuka File
10
Menyisipkan Gambar
Media Interaktif
21
Membuat Tabel
37
Mengatur Properti Tabel
40
Memberi Background pada Tabel 43
Menambahkan Kolom atau Baris
47
Menambahkan Kolom atau Baris 50
Menghapus Kolom atau Baris 53
Menggabungkan Sel pada Tabel
55
Memisahkan Sel pada Tabel
59
Membangun Website dengan Tabel
63
13
Menggunakan Layer
77
Memberi Warna pada Layer
79
Menyisipkan Gambar pada Layer
82
Membangun Website dengan Layer
87
Membangun Website dengan Frame
Menggunakan Form
105
iv
121
144
Chapter 1
Pengenalan
Adobe Dreamweaver CS3
1. Menjalankan Adobe Dreamweaver CS3
Dalam versi ini, Adobe Dreamweaver CS3 memiliki fitur-fitur yang
diharapkan dapat memenuhi kebutuhan Anda secara maksimal dalam
membangun sebuah website. Untuk itu, hal pertama yang harus kita
lakukan adalah menjalankan Adobe Dreamweaver CS3. Caranya mudah,
ikutilah langkah-langkah berikut ini :
Praktek
1.
2.
3.
4.
5.
2. Mengatur Teks
Praktek
Berikut ini kita akan membuat website sederhana yang berfungsi untuk
mengatur teks :
1.
2.
Klik HTML pada bagian Create New. Setelah itu akan tampil lembar
kerja document baru.
Klik disini
3.
4.
5.
Blok teks yang akan diganti jenis huruf, ukuran dan warnanya.
6.
Pilih jenis
7.
Pada Size tentukan ukuran teks, kemudian gunakan Bold dan Italic.
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 :
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.
2.
Siapkan sebuah lembar kerja baru, tekan Ctrl + N dan klik tombol
Create pada kotak dialog New Document
3.
4.
1.Plih Category
2.Klik Browse
3.Klik OK
5.
Pada kotak dialog Select Image Source, pilih gambar Pic dan klik Ok.
Klik OK
6.
7.
3.Klik OK
8.
9.
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.
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).
4.
5.
6.
7.
Klik browse
8.
2.Klik OK
9.
Klik Ok
10. Jika berhasil teks akan digarisbawahi dan diberi warna secara
otomatis untuk menandakan bahwa teks terhubung.
11. Lanjutkan dengan mengaktifkan link pada teks About, Photos, Tips,
Contact.
9
13. Simpan ulang file, dengan menekan Ctrl + S dan tekan F12 untuk
menampilkan halaman link yang telah Anda hubungkan.
A. Membuka File
Praktek
1.
2.
Tutup lembar kerja yang sedang aktif dengan cara klik kanan lalu
klik close.
10
Klik close
3.
4.
Klik open
5.
Pada kotak dialog Open , cari tempat penyimpanan file yang sudah
Anda buat sebelumnya.
6.
11
Pilih File
Klik Open
B. Menutup File
Praktek
1.
2.
3.
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
Praktek
1.
2.
3.
4.
5.
Klik Image.
6.
Pilih file gambar yang akan disisipkan. Pada contoh file gambar
apel.jpg.
7.
Klik OK.
14
8.
9.
11. Setelah itu simpan file dengan nama index.html, lalu tekan F12
untuk menjalankannya di browser Anda.
15
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.
2.
16
3.
Kemudian ketik ukuran lebar pada Width dan tinggi pada Height.
4.
Setelah itu, ubah letak gambar secara vertical agar gambar benarbenar berada di tengah web dengan cara ketik jarak pada V Space di
Property Inspector.
5.
17
Praktek
1.
2.
3.
4.
18
Buatlah desain salah satu halaman web sederhana seperti pada gambar
berikut ini.
Praktek
1.
2.
19
3.
4.
Font : Futura Lt BT
Size : 14px
Bold
Align Center
Ketik teks GALLERY dengan format yang sama seperti teks menu
dengan Size : 36px.
5.
6.
7.
20
Size : 18 px
Align Center
8.
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
Praktek
1.
2.
3.
4.
22
Kemudian pilih file audio (lagu) yang akan disisipkan pada web.
Pada contoh, pilih file bear.mp3.
5.
Klik Ok.
6.
Kemudian akan tampil ikon plugin audio pada stage, lalu ubah
ukurannya pada Property Inspector sebagai berikut :
W (lebar) : 511 px
H (tinggi) : 59 px
7.
8.
23
9.
10. Jika perlu Anda dapat memberi warna background dan teks seperti
pada contoh.
24
2.
3.
25
4.
Pilih file flash (format .swf) yang akan disisipkan pada Web. Pada
contoh pilih file cloud.swf pada folder flash.
5.
Klik Ok.
6.
7.
Klik OK.
26
8.
9.
10. Setelah itu, klik Align Center, lalu tekan Enter beberapa kali agar
flash berada di tengah halaman web.
27
11. Jika perlu ubah warna background dan tambahkan teks seperti pada
contoh.
12. Simpan file flash.htm, lalu jalankan di browser.
Untuk jelasnya, perhatikan contoh berikut ini. Pada contoh di bawah ini,
kita akan menyisipkan flash video pada Web.
28
Praktek
1.
2.
3.
4.
29
5.
6.
7.
30
8.
9.
13. Maka ikon flash video akan disisipkan pada halaman web.
14. Klik Align Center pada Property Inspector dan tekan Enter beberapa
kali agar ikon flash video berada di tengah halaman web.
32
15. Jika perlu tambahkan warna background dan teks seperti pada
contoh.
16. Simpan file video.htm, lalu jalankan di browser.
Latihan 2
Pada latihan kali ini, kita akan membuat halaman Download pada web
sederhana menggunakan tool media interaktif seperti pada gambar berikut.
33
Praktek
1.
2.
3.
Ketik teks untuk menu dan judul halaman, yaitu DOWNLOAD dengan
format yang sama pada Latihan 1.
4.
5.
34
6.
Setelah itu, ketik teks isi di bawahnya seperti pada gambar dengan
format teks sama seperti teks menu.
7.
Font : Anivers
Bold
Size : 18 px
Align Center
35
8.
9.
Chapter 3
Bekerja dengan
Tabel
Tabel merupakan bagian dasar dari pembuatan web. Penggunaan table
sangat diperlukan agar tata letak halaman web menjadi teratur,
terorganisir dan lebih menarik. Pada subbab ini, Anda akan mempelajari
bagaimana cara membuat dan mengedit table dengan benar.
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.
2.
3.
Klik Table.
4.
Summary :
5.
38
Klik OK, maka table yang dibuat akan tampil pada stage.
6.
7.
39
8.
Font : Trebuchet MS
Size : 14
Align : Left
9.
Lakukan hal yang sama pada judul table dengan Size = 16.
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.
2.
41
3.
4.
5.
42
Anda juga dapat mengubah tinggi setiap baris dengan drag pada
border table.
6.
7.
43
Praktek
1.
2.
3.
4.
44
5.
Simpan file.
Praktek
1.
2.
3.
45
4.
Pilih file gambar yang akan dijadikan background table, klik Ok. Pada
contoh pilih file bunga.png.
5.
Maka gambar tersebut akan menjadi latar dalam table seperti yang
ditunjukkan pada gambar di bawah ini.
6.
46
Praktek
1.
2.
Row : 2
Column : 1
Width : 200
Border thickness : 1
Cell padding : 0
Cell spacing : 0
47
3.
Letakkan pointer di sel pada baris pertama, lalu klik Tab Common.
4.
48
5.
Pilih file gambar yang akan dimasukkan ke table. Pada contoh pilih
file dreamweaver.png, lalu klik Ok.
6.
Ketik teks untuk keterangan gambar pada Alternate text, klik Ok.
7.
49
8.
Setelah itu ketik teks pada baris kedua seperti pada contoh.
9.
50
Praktek
1.
2.
3.
51
4.
5.
6.
52
Ketik isi baris dan kolom, kemudian atur lebarnya seperti pada
contoh.
7.
2.
Klik pada kolom atau baris yang akan dihapus. Pada contoh hapus
kolom nomor.
53
3.
4.
5.
54
55
Praktek
1.
2.
Row : 3
Column : 5
Border thickness : 1
3.
Setelah table dibuat, blok table dari kolom pertama baris pertama
sampai kolom kelima baris kelima.
56
4.
Klik icon Merge Cell pada Property Inspector, maka kolom yang
diblok akan bergabung menjadi satu kolom.
5.
57
6.
7.
Atur lebar dan tinggi gambar dan tabel pada Property Inspector.
8.
Kemudian beri warna latar pada setiap sel table seperti pada
contoh.
58
9.
Font : Bambina
Size : 18 px
11. Simpan file dengan nama Tabel Gambar2.html, lalu lihat hasilnya di
browser.
59
Praktek
1.
2.
60
3.
4.
5.
6.
Klik Ok.
7.
Maka sel pada baris tersebut akan terbagi menjadi dua kolom,
kemudian ketiklah teks pada kolom-kolom tersebut.
61
8.
9.
62
Praktek
1.
2.
3.
4.
64
W (Width) : 878 px
Align : Center
CellPad : 0 px
CellSpace : 0 px
Border : 1 px
5.
6.
Pisahkan atau bagi sel pada kolom dan baris pertama ke dalam 6
buah sel.
65
7.
8.
66
Atur lebar sel agar sesuai dengan ukuran gambar dengan cara drag
pada border sel.
9.
67
12. Atur tinggi (Height) sel dengan drag pada border sel ke bawah
sesuai ukuran gambar.
68
13. Setelah itu, gabungkan kolom pertama dan kedua yang ada pada
baris ketiga.
CellPad : 0 px
CellSpace : 0 px
Border : 0 px
70
17. Letakkan pointer pada baris kedua, kemudian pilih Top pada pilihan
Vertical pada Property Inspector.
CellPad : 0 px
CellSpace : 0 px
Border : 1 px
Align : Center
20. Atur lebar dan tinggi table sesuai dengan ukuran baris kedua.
71
21. Pisahkan atau bagi kolom pertama menjadi tiga baris, kemudian
atur ukuran masing-masing sel pada kolom pertama.
22. Ketik teks pada sel pertama, lalu atur format teks pada Properties
Inspector sebagai barikut :
72
Size : 24
24. Ketik teks pada kolom ketiga, lalu ubah format teks sebagai berikut :
Font : TW Cent MT
Size : 13 px
25. Klik pada border (bingkai) table bagian dalam, kemudian hilangkan
bingkai table.
26. Setelah itu, letakkan pointer di kolom kedua pada table bagian
dalam, lalu tekan Enter satu kali.
27. Sisipkan sebuah table dengan jumlah baris = 3 dan jumlah kolom =1.
74
29. Lalu ketik teks pada baris kedua dan ketiga seperti pada contoh
dengan format sebagai berikut :
Font : TW Cent MT
75
Size : 16 px
CellPad : 0
CellSpace : 0
Border : 0
31. Kemudian ketik teks pada baris ketiga seperti pada contoh.
32. Simpan file dengan nama Web Tabel.html, lalu jalankan di browser
Anda.
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 bertumpuktumpuk 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
Praktek
1.
2.
3.
4.
5.
78
Font : Trebuchet MS
Size : 14 px
Align : Center
6.
7.
Pada contoh kali ini, kita akan membuat sebuah kotak berukuran kecil
pada bagian menu.
Praktek
1.
2.
80
3.
Beri warna pada kotak tersebut dengan cara, klik pada bingkai kotak
(garis berwarna biru).
4.
5.
Setelah itu ketik teks seperti pada contoh dan dengan ketentuan
sebagai berikut :
Size : 24
Align : Center
6.
7.
81
Praktek
1.
2.
82
3.
4.
Pilih file gambar yang akan dijadikan latar (background) layer. Pada
contoh pilih file papan tulis.png, lalu klik Ok.
83
5.
Atur ukuran layer agar sesuai dengan ukuran gambar dan ubah
warna background menjadi warna putih.
6.
B. Menyisipkan Gambar
Praktek
1.
2.
84
W : 103 px
H : 103 px
3.
4.
5.
6.
Pilih file gambar yang akan disisipkan. Pada contoh pilih file
apple.jpg, lalu klik Ok.
85
7.
8.
Atur posisi layer agar berada di kanan halaman web seperti pada
contoh dengan cara drag layer.
86
9.
87
Praktek
1.
2.
88
3.
W : 800 px
H : 162 px
4.
89
5.
W : 800 px
H : 40 px
6.
90
7.
Buatlah layer ketiga, yaitu Poin 3 untuk bagian isi sebelah kiri
dengan ukuran :
W : 362 px
H : 328 px
8.
91
9.
W : 437 px
H : 328 px
92
11. Buatlah layer kelima yaitu Poin 5 untuk tampilan gambar thumbnail
dengan ukuran :
W : 800 px
H : 118 px
93
13. Buatlah layer keenam yaitu Poin 6 untuk bagian akhir dengan
ukuran :
W : 800 px
H : 29 px
94
15. Kemudian buatlah layer untuk menu pada layer poin 2 dengan
ukuran sebagai berikut :
W : 62 px
H : 24 px
16. Ketik teks Home, lalu lakukan pengaturan pada teks sebagai
berikut :
Font : Trebuchet MS
Size : 14
Format : Bold
95
17. Setelah itu, atur posisi layer menu Home pada layer poin 2 dengan
keterangan sebagai berikut :
L : 27 px
T : 170 px
96
19. Buatlah layer untuk teks judul pada layer poin 3 dengan ukuran
bebas.
20. Ketik judul teks, lalu format teks dengan keterangan sebagai
berikut:
97
Font : trebuchet MS
Size : 16 px
Align : Center
21. Kemudian buatlah layer untuk teks isi pada layer yang sama dengan
ukuran bebas.
98
22. Ketik teks isi, lalu format teks dengan keterangan sebagai berikut :
Size : 14 px
23. Buatlah layer gambar pada layer poin 4 dengan ukuran sesuai
dengan ukuran gambar yang akan disisipkan.
99
25. Buatlah layer baru pada layer poin 5 dengan ukuran sebagai berikut:
W : 740 px
H : 100 px
100
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
33. Buatlah layer baru pada layer poin 6 dengan ukuran bebas.
102
34. Ketik teks seperti pada contoh, lalu atur format teks sebagai
berikut:
Font : TW Cent MT
Size : 14 px
103
35. Simpan file dengan nama Web Layer.html, kemudian jalankan pada
browser.
104
Chapter 5
Bekerja dengan
Frame
1. Membuat Design Web dengan Frame
Frame merupakan sebuah teknologi yang biasa digunakan untuk
menggabungkan beberapa halaman web menjadi satu halaman web
yang utuh. Pada praktek ini Anda akan membuat sebuah design Web
dengan menggunakan Frame. Untuk membuat website menggunakan
frame, ikutilah langkah-langkah berikut ini :
Praktek 1
1.
2.
3.
4.
5.
Lalu pilih Frameset. Pilih jenis bentuk frame : Fixed Top, Nested Left
dan Klik Create
105
6.
7.
8.
106
9.
Letakkan kursor pada bagian left. Klik kembali Page Properties, lalu
pada background color pilih warna abu-abu (#333333).
10. Lalu klik Ok. Setelah itu masukkan teks, seperti contoh dibawah ini :
Home
About us
Images
Animation
Contact
107
108
Copyright2010
109
110
17. Untuk melihat hasilnya, pada document toolbar, klik preview dan
pilih Preview in Iexplore.
111
Latihan
1.
2.
3.
4.
5.
6.
Klik Create
7.
8.
112
9.
Untuk menambah frame untuk dibawah, klik modify > frameset >
split Frame Down
10. Klik frame border frame, Atur frame dengan menggunakan kursor
atau menggunakan Row pada Properties Inspector.
Coloumn : 3
Row
:4
113
18. Ketik teks bontetDesign.com pada kolom ke-2, atur ukuran dan jenis
teksnya.
19. Pada kolom ke-3 ketik teks seperti dibawah ini :
114
20. Pada bagian left atau kiri isi dengan beberapa iklan, masukan tabel
ke dalam frame bagian kiri.
-
Columns : 1
Rows
:4
25. Kemudian pada baris selanjutnya masukkan gambar, pada tool bar
klik common lalu klik image.
115
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.
Columns : 4
Rows
:6
116
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
35. Selanjutnya merge cell kolom ke-3 dan baris ke-2 sampai baris ke-3.
Gunakan layer dan masukkan gambar, atur posisi layer agar sejajar
dengan Welcome To My Website.
36. Pada kolom ke-4 dan baris ke-2 sampai ke-3. Lakukan cara yang
sama seperti langkah-langkah no. 35.
37. Setelah itu merge cell kolom ke-3 sampai ke-4 dan baris ke-5,
masukkan gambar iklan KFC. Atur size gambar :
118
Width : 220
Hight
: 180
38. Untuk frame bagian bawah atau footer, sisipkan saja background
images.
39. Lalu ketik teks pada frame bagian bawah :
CopyRight@bontetDesign.com/2009
40. Setelah itu save hasil design Anda, Klik File > Save Frame
41. Ketik nama frame pada bagian File Name dan tekan tombol Save.
42. Ulangi kembali langkah tersebut sampai frame tersimpan semua.
43. Untuk melihat hasilnya, pada document toolbar, klik preview dan
pilih Preview in Iexplore.
119
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.
2.
Klik HTML pada bagian Create New. Setelah itu akan tampil lembar
kerja document baru.
3.
4.
:3
Rows
: 13
121
5.
6.
122
7.
8.
9.
123
12. Lakukan cara yang sama untuk pengisian list menu pada bulan dan
tahun.
124
13. Berikutnya untuk kolom Status, gunakan Radio Group. Kotak dialog
radio group akan tampil. Isilah propertinya.
14. Untuk kolom jenis kelamin lakukan cara yang sama seperti kolom
status. Gunakan Radio Group.
15. Untuk kolom Hobby gunakan Checkbox, jika muncul kotak dialog
klik OK.
16. Ketik teks di samping Checkbox
17. Setelah itu masukkan kembali checkbox untuk hobby yang lain.
125
19. Aktifkan/klik tombol submit. Lalu pada Values ubah nama submit
menjadi kirim.
126
21. Agar tampilan form terlihat bagus, maka lakukan pengaturan teks
dan Background.
-
Jenis Font
Font Color
: #FFFFFF
Font Size
: 14 px
Background Color
: #6666FF
22. Tekan tombol Ctrl + Shift + S, kemudian simpan pada folder web 6
dengan nama form. Jalankan dengan menekan tombol F12.
127
Latihan
: 23
128
6.
7.
Setelah itu beri background images pada kolom dan baris yang
sudah di merge cell. Tarik ke bawah tabel sampai background
terlihat utuh.
8.
Lakukan cara yang sama pada baris ke-2. Isi kolom dengan
background Image. Setelah itu masukan tabel ke dalam baris ke-2.
Column
:4
Rows
:1
129
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.
11. Masukkan Background Image dan Background Color pada bagain isi.
12. Masukkan teks pada setiap kolom seperti gambar berikut :
Username
: TextField
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 :
15. Lalu pada kolom Date of Birth dengan List/Menu. Isilah kolom
selanjutnya dengan ketentuan seperti di atas.
16. Selanjutnya untuk Password, masukkan elemen textfield. Lalu
lakukan pengubahan mode password.
17. Berikut ini hasil kolom yang sudah diisi dengan elemen form.
131
18. Lanjutkan pengisian pada bagian kolom bawah. Masih pada insert >
form > pilih Button.
132
24. Jika berhasil secara otomatis, seluruh isi dari komponen Form akan
di hapus oleh perintah reset.
25. Untuk mencobanya, lakukanlah pengisian data pada form di web
browser Anda, seperti pada gambar berikut.
133
134
Chapter 7
Membuat Navigasi
dengan Link
Pada saat membuat halaman web, Anda harus menghubungkan
dokumen satu dengan dokumen yang lain yang menjadi bagian dari
sebuah site atau biasa disebut dengan Link. Link dapat diletakkan pada
teks dan gambar di semua bagian dokumen, termasuk teks dan gambar
di dalam header, list, table, AP elemen, atau frame. Link inilah yang akan
digunakan sebagai navigasi sederhana pada web.
135
Pada contoh berikut ini, kita akan memberi link pada teks ke sebuah
halaman web yang berbeda.
Praktek
1.
2.
Untuk membuat link teks, blok teks yang akan diberi link. Pada
contoh blok teks Tutorial Dreamweaver.
3.
4.
Kemudian pada kotak dialog Hyperlink yang tampil, klik pada icon
berbentuk folder pada Link.
136
5.
6.
7.
Klik OK.
8.
137
9.
Title : ketik nama atau judul yang Anda berikan untuk link.
11. Maka teks akan berwarna biru dan bergaris bawah yang
menandakan teks berhasil di-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
Praktek
1.
2.
3.
139
4.
5.
Klik Ok.
6.
Maka teks akan berwarna biru dan bergaris bawah, tanda teks telah
berhasil diberi link.
7.
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
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.
2.
141
3.
4.
Pilih file flash yang akan dihubungkan. Pada contoh file Animasi
Daun.swf.
5.
Klik Ok.
6.
7.
142
Maka teks akan berwarna biru dan bergaris bawah, tanda teks
berhasil diberi link.
8.
143
Praktek
1.
2.
144
3.
4.
5.
6.
145
7.
8.
9.
146
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
13. Klik Ok, maka hasli Link Rollover Image yang dibuat akan tampil
pada dokumen seperti pada Gambar 25.
148
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.
2.
Blok teks yang akan di-link. Pada contoh blok teks Images yang
berada di frame Left atau frame sebelah kiri.
3.
4.
Kemudian pilih file yang akan ditampilkan pada salah satu frame di
halaman web.Pada contoh pilih file Zodiak.html yang akan di
tampilkan pada mainFrame.
5.
Klik Ok.
150
6.
7.
151
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.
2.
153
3.
Lalu merge kolom ke-2 sampai kolom ke-5 pada baris pertama
4.
154
Pada tab common, klik navigator bar. Lalu akan muncul kotak
dialog.
5.
Beri suatu nama pada tombol menu dalam kotak Element Name.
6.
7.
8.
155
9.
10. Lalu pada Properties Inspector pilih left pada Align, untuk mengatur
posisi kiri pada tombol navigator yang sudah Anda buat.
11. Tekan Ctrl + S, untuk menyimpan file tersebut.
12. Lalu tekan F12, untuk melihat hasil di web browser. Dan hasilnya
seperti gambar dibawah ini :
156
Latihan
1.
2.
3.
Width Table
: 950
Columns
:4
Rows
: 12
157
4.
5.
6.
7.
8.
158
9.
12. Lalu pada Properties Inspector pilih center pada Align, untuk
menengahkan tombol navigator yang sudah Anda buat.
159
14. Lalu masukkan Teks pada kolom ke-3 sampai ke-10 yang sudah di
merge cell.
15. Blok seluruh baris ke-2 sampai baris terakhir, lalu Beri Background
warna pada tabel.
-
16. Atur jenis font, size dan color pada teks berikut.
-
Size
: 14
Color
160
17. Selanjutnya pada kolom yang sudah dimerge cell, masukkan tabel
lagi, 1 baris dan 4 kolom.
18. Lalu masukkan gambar dengan format .gif
19. Atur ukuran gambar dan posisi gambar. Seperti gambar berikut :
20. Lalu pada baris terakhir merge cell kembali, masukkan Background
Image untuk dijadikan footer. Kemudian simpan dengan nama
Navigasi Web.html dan jalankan di browser.
161
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
Praktek
1.
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
3.
163
4.
5.
6.
7.
Klik Browse, lalu masukkan alamat URL dari menu yang akan di link
pada kotak When Selected Go To URL.
164
8.
9.
Berikan suatu nama untuk menu ini pada kotak Menu Name
10. Pada kotak Options, tandai Insert Go Button After Menu untuk
menampilkan tombol Go di samping daftar menu.
11. 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.
166
Latihan
1.
:4
Row
: 11
2.
3.
4.
167
5.
Lalu merge cell baris pertama, masukkan Banner yang sama seperti
prakter sebelumnya.
6.
7.
Merge cell baris ke-2 sampai ke-3 pada kolom pertama. Masukkan
teks.
8.
168
9.
10. Masukkan teks yang akan ditampilkan sebagai link menu dalam
kotak teks.
169
14. Berikan suatu nama untuk menu ini pada kotak Menu Name
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.
19. Merge Cell pada kolom pertama dan baris ke-4 sampai ke-5, lalu
masukkan gambar dan atur ukuran gambar, dengan width : 177,
higth : 220.
20. Merge cell kembali kolom ke-2, masukkan teks dan lakukan
pengaturan teks.
-
Font
: default font
Color
: #E46E0D
21. Pada kolom ke-4 merge cell kembali dan masukkan gambar.
171
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
26. Setelah itu, simpan kembali filenya. Untuk melihat hasilnya, tekan
F12 pada keyboard Anda.
173
Catatan :
174