Vous êtes sur la page 1sur 178

Adobe Dreamweaver

CS3
Langsung Praktek !

Dewi Putri &




Ayu Ratih Wisah

PalComTech
Publisher

Adobe Dreamweaver
CS3
Langsung Praktek !
Penulis
: Dewi Putri & Ayu Ratih Wisah
Editor
: Kasmoni
Desain Kover : Ali Enhamedia

Diterbitkan pertama kali oleh : PalComTech Publisher

Cetakan Pertama, 2010

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.

Palembang, April 2010

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

Link dengan Teks


135
Link ke Email 138
Link ke Flash
140
Link dengan Efek Rollover
Link ke Frame 149
Menu Navigasi
153
Jump Menu
162

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.

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 :

Gambar 1. Menjalankan Aplikasi Adobe Dreamweaver CS3

Chapter 1. Pengenalan Adobe Dreamweaver CS3

2. Mengatur Teks

Gambar 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

Gambar 3. Membuat File Baru

Chapter 1. Pengenalan Adobe Dreamweaver CS3

3.

Ketik teks ke dalam lembar kerja, seperti dibawah ini :

4.

Gunakan properties inspector untuk mengatur teks.

Gambar 4. Properties Inspector

5.

Blok teks yang akan diganti jenis huruf, ukuran dan warnanya.

Gambar 5. Blok Teks

6.

Pada font pilih jenis huruf yang Anda inginkan.

Pilih jenis

Gambar 6. Memilih Font

7.

Pada Size tentukan ukuran teks, kemudian gunakan Bold dan Italic.

Chapter 1. Pengenalan Adobe Dreamweaver CS3

Tentukan size

Gambar 7. Menentukan Ukuran Font

8.

Teks masih dalam keadaan diblok, lalu pada text color pilih warna
yang akan digunakan pada teks.

Pilih warna

Gambar 8. Memilih Warna

9.

Lakukan cara yang sama untuk mengatur teks pada setiap baris.
Seperti gambar dibawah :

Gambar 9. Mengatur Teks

Chapter 1. Pengenalan Adobe Dreamweaver CS3

3. Hyperlink Text dan Background


Pada pembahasan ini, Anda akan memanfaatkan fungsi hyperlink yang
digunakan sebagai penghubung antar dokumen dan cara membuat
background image dan warna.

Gambar 10. Hyperlink Text dan Background

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.

Chapter 1. Pengenalan Adobe Dreamweaver CS3

1.Plih Category

2.Klik Browse

3.Klik OK

Gambar 11. Jendela Page Properties

5.

Pada kotak dialog Select Image Source, pilih gambar Pic dan klik Ok.

Klik OK

Gambar 12. Memilih Gambar Latar

6.

Apabila sebuah kotak dialog tampil, langsung klik Ok.

7.

Selanjutnya beri judul pada website, aktifkan kembali jendela Page


Properties dengan menekan tombol Ctrl + J.
2.Ketik Judulnya
1.Pilih Category

3.Klik OK

Gambar 13. Jendela Page Properties

Chapter 1. Pengenalan Adobe Dreamweaver CS3

8.

Ketiklah teks yang berada di bawah ini dan masukkan ke dalam


jendela dokumen

Gambar 14. Mengetik Teks

9.

Tampilkan seluruh teks tersebut ke dalam jendela dokumen, seperti


di bawah ini :

Gambar 15. Tampilan Teks dan Background

10. Blok baris pertama Beautiful Waterfall, kemudian property


inspector atur menjadi Comic Sans MS, Chiller.
7

Chapter 1. Pengenalan Adobe Dreamweaver CS3

11. Masih pada property inspector, lanjutkan dengan mengubah Size,


color, Bold, Italic dan gunakan Align Center.

Klik disini

Gambar 16. Format Teks

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).

Gambar 17. Mengetik Teks

Chapter 1. Pengenalan Adobe Dreamweaver CS3

4.

Tekan Ctrl + S dan simpan dengan nama Ex_link.

5.

Selanjutnya aktifkan kembali tab Praktek 2 ( flowers).

6.

Blok teks yang bertuliskan Home

Gambar 18. Blok Teks Home

7.

Setelah itu pada properties, pilih Hyperlink, klik browse

Klik browse

Gambar 19. Memilih Halaman yang Dituju

8.

Cari folder tempat penyimpan halaman yang akan dituju.

1.Link yang akan


dihubungkan

2.Klik OK

Gambar 20. Memilih File Halaman yang Dituju

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

Chapter 1. Pengenalan Adobe Dreamweaver CS3

Gambar 21. Mengaktifkan Link

12. Untuk menghilangkan garis underline dan mengganti warna pada


teks yang telah terhubung. Klik Properties atau Ctrl + J, atur warna.

Gambar 22. Format Teks Link

13. Simpan ulang file, dengan menekan Ctrl + S dan tekan F12 untuk
menampilkan halaman link yang telah Anda hubungkan.

4. Menutup dan Membuka File


Pada pembahasan ini Anda akan mempelajari bagaimana cara menutup
dan membuka file yang sebelumnya telah dibuat.

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

Gambar 23. Menutup File

3.

Secara otomatis akan kembali pada tampilan awal Dreamweaver


CS3.

4.

Klik open pada Open Recent Items

Klik open

Gambar 24. Membuka File

5.

Pada kotak dialog Open , cari tempat penyimpanan file yang sudah
Anda buat sebelumnya.

6.

Lalu Klik Open.

11

Chapter 1. Pengenalan Adobe Dreamweaver CS3

Pilih File

Klik Open

Gambar 25. Memilih File yang akan Dibuka

B. Menutup File
Praktek
1.

Klik menu file

2.

Lalu klik Exit

Gambar 26. Menutup File

3.

12

Untuk lebih cepatnya gunakan shorcut CTRL + Q pada keyboard.

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.

A. Menambahkan Gambar pada Halaman Web

Gambar 1. Contoh Menyisipkan Gambar.

13

Chapter 2. Menyisipkan Gambar dan Media

Praktek
1.

Buatlah dokumen baru.

2.

Kemudian letakkan kursor pada stage.

3.

Klik Tab Common.

Gambar 2. Menyisipkan Gambar.

4.

Klik tanda panah pada tool Images : Image.

5.

Klik Image.

Gambar 3. Menyisipkan Gambar.

6.

Pilih file gambar yang akan disisipkan. Pada contoh file gambar
apel.jpg.

7.

Klik OK.

Gambar 4. Memilih File Gambar.

14

Chapter 2. Menyisipkan Gambar dan Media

8.

Ketik pada Alternate Text untuk menampilkan teks yang akan


terlihat jika pointer mengarah ke gambar.

9.

Klik OK maka gambar yang dipilih akan tampil pada stage.

Gambar 5. Membuat Alternate Text.

Gambar 6. Mengubah Ukuran Gambar.

10. Kemudian untuk menengahkan gambar, klik Align Center pada


Property Inspector.

Gambar 7. Memilih Align Center.

11. Setelah itu simpan file dengan nama index.html, lalu tekan F12
untuk menjalankannya di browser Anda.

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 :

Gambar 8. Contoh Memformat Gambar.

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

Gambar 9. Klik pada Gambar.

3.

Kemudian ketik ukuran lebar pada Width dan tinggi pada Height.

Gambar 10. Mengubah Ukuran Gambar.

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.

Gambar 11. Mengubah Posisi Gambar.

5.

Simpan file index.html, lalu tekan F12 untuk melihat hasilnya di


browser Anda.

17

Chapter 2. Menyisipkan Gambar dan Media

C. Memberi Border pada Gambar


Kita dapat memberi bingkai pada gambar yang telah disisipkan
sebelumnya. Pemberian bingkai pada gambar dimaksudkan untuk
memperjelas atau mempertegas gambar. Ada juga alasan memberikan
bingkai pada gambar yaitu karena factor keindahan dan kerapian
(keteraturan) gambar pada halaman web. Untuk dapat memberikan
bingkai pada gambar, ikutilah langkah-langkah pada contoh berikut ini.

Gambar 12. Contoh Memberi Bingkai pada Gambar.

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.

Gambar 13. Memberi Bingkai pada Gambar.

4.

18

Kemudian simpan file, lalu jalankan di browser Anda.

Chapter 2. Menyisipkan Gambar dan Media


Latihan 1

Buatlah desain salah satu halaman web sederhana seperti pada gambar
berikut ini.

Gambar 14. Latihan 1.

Praktek
1.

Buatlah sebuah dokumen baru.

2.

Kemudian masukkan gambar latar halaman, yaitu background.jpg.

Gambar 15. Masukkan Gambar Background.jpg.

19

Chapter 2. Menyisipkan Gambar dan Media

3.

4.

Ketik teks untuk menu dengan format :

Font : Futura Lt BT

Size : 14px

Bold

Text color : #1A0D00

Align Center

Ketik teks GALLERY dengan format yang sama seperti teks menu
dengan Size : 36px.

Gambar 16. Mengetiks Teks.

5.

Masukkan gambar apel.jpg, lime.jpg, dan pome.jpg pada halaman.

6.

Atur gambar ke tengah halaman dan beri border untuk setiap


gambar.

7.

Ketik teks Created by bonteters di bawah gambar dengan format :

20

Font : TW Cent MT.

Size : 18 px

Align Center

Text color : #1A0D00

Chapter 2. Menyisipkan Gambar dan Media

Gambar 17. Masukkan Gambar dan Ketik Teks.

8.

Simpan file dengan nama Latihan1.html, lalu tekan F12 untuk


melihat hasilnya di browser.

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.

A. Menyisipkan File Audio


Ada beberapa format file audio yang biasa digunakan dalam Web,
seperti :

.mid atau .midi (Musical Instrument Digital Interface).

.wav (Waveform Extension).

.aif atau .aiff (Audio Interchange File Format).

.mp3 (Motion Picture Experts Group Audio atau MPEG-Audio


Layer 3).

.ram, .rpm atau .ra (Real Audio).

21

Chapter 2. Menyisipkan Gambar dan Media

Ada beberapa factor yang perlu Anda pertimbangkan sebelum


memutuskan untuk memasukkan file audio ke dalam Web, seperti
tujuannya, pengunjung situs Anda, ukuran file, kualitas suara, dan
perbedaan-perbedaan dalam browser. Untuk lebih jelasnya,
perhatikanlah contoh di bawah ini.

Gambar 18. Contoh Menyisipkan File Audio pada Web.

Praktek
1.

Buatlah dokumen baru.

2.

Kemudian klik pada stage, lalu klik Tab Common.

3.

Klik Media, lalu klik Plugin.

Gambar 19. Tool Plugin.

4.

22

Kemudian pilih file audio (lagu) yang akan disisipkan pada web.
Pada contoh, pilih file bear.mp3.

Chapter 2. Menyisipkan Gambar dan Media

5.

Klik Ok.

Gambar 20. Memilih File Audio.

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

Gambar 21. Tampilan Plugin pada Halaman Web.

7.

Kemudian atur posisi plugin agar berada di tengah-tengah halaman


web, dengan cara klik pada stage.

8.

Pilih Align Center pada Property Inspector.

23

Chapter 2. Menyisipkan Gambar dan Media

Gambar 22. Menengahkan Plugin.

9.

Kemudian letakkan pointer di sebelah kiri symbol plugin, lalu tekan


Enter beberapa kali sampai plugin berada di tengah-tengah
halaman.

10. Jika perlu Anda dapat memberi warna background dan teks seperti
pada contoh.

Gambar 23. Menambahkan Teks dan Background.

24

Chapter 2. Menyisipkan Gambar dan Media

11. Simpan file audio.htm, lalu jalankan pada browser.

B. Menyisipkan File Flash


Flash merupakan teknologi yang popular di kalangan para desainer
animasi. Dengan flash Anda dapat menampilkan file movie yang
interaktif dan animatif. Untuk dapat menampilkan file flash ini, Anda
perlu menginstall Flash Player. Namun, untuk browser tertentu seperti
Internet Explorer sudah tersedia pada versi-versi terbarunya.

Gambar 24. Contoh Menyisipkan File Flash.

Untuk memasukkan file Flash, ikutilah langkah-langkah berikut ini :


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

Gambar 25. Tool Flash.

4.

Pilih file flash (format .swf) yang akan disisipkan pada Web. Pada
contoh pilih file cloud.swf pada folder flash.

5.

Klik Ok.

6.

Ketik judul animasi pada Title.

7.

Klik OK.

Gambar 26. Memilih File Cloud.Swf.

26

Chapter 2. Menyisipkan Gambar dan Media

Gambar 27. Mengetik Judul File Flash.

8.

Kemudian ikon flash akan tampil pada dokumen, lalu untuk


mengubah ukuran flash, klik pada ikon flash.

9.

Ketik lebar pada W (Width) dan tinggi pada H (Height) pada


Property Inspector. Pada contoh W = 677 dan H = 330.

Gambar 28. Ikon Flash pada Dokumen.

Gambar 29. Mengubah Ukuran Ikon.

10. Setelah itu, klik Align Center, lalu tekan Enter beberapa kali agar
flash berada di tengah halaman web.

27

Chapter 2. Menyisipkan Gambar dan Media

Gambar 30. Mengatur Posisi Flash di Tengah Halaman Web.

11. Jika perlu ubah warna background dan tambahkan teks seperti pada
contoh.
12. Simpan file flash.htm, lalu jalankan di browser.

C. Menyisipkan Objek Flash


Pada Adobe Dreamweaver CS3 ini, kita juga dapat memasukkan objekobjek dari Flash dengan menggunakan fungsi tombol berikut ini :

Flash Button : untuk memasukkan tombol flash (animasi).

Flash Text : untuk memasukkan teks animasi dari flash.

Flash Paper : untuk memasukkan file teks seperti Notepad,


Word, Excel, dan PDF.

Flash Video : untuk memasukkan video(flash video) pada Web.

Untuk jelasnya, perhatikan contoh berikut ini. Pada contoh di bawah ini,
kita akan menyisipkan flash video pada Web.

28

Chapter 2. Menyisipkan Gambar dan Media

Gambar 31. Contoh Menyisipkan File Flash Video.

Praktek
1.

Buatlah dokumen baru.

2.

Klik pada stage, lalu klik Tab Common

3.

Klik Media, pilih Flash Video.

Gambar 32. Tool Flash Video.

4.

Maka akan tampil kotak dialog yang menyatakan bahwa dokumen


harus disimpan terlebih dahulu jika ingin menambahkan file Flash
Video. Klik Ok.

29

Chapter 2. Menyisipkan Gambar dan Media

Gambar 33. Kotak Dialog Adobe Dreamweaver CS3.

5.

Kemudian simpan file dengan nama Video.htm.

Gambar 34. Menyimpan File Video.html.

6.

Pada jendela Insert Flash Video yang tampil, pilih Progressive


Download Video pada Video Type.

7.

Kemudian klik tombol Browse pada URL.

30

Chapter 2. Menyisipkan Gambar dan Media

Gambar 35. Menyisipkan Flash Video.

8.

Pilih video yang akan disisipkan, lalu klik Ok.

Gambar 36. Memilih File Flash Video.

9.

Pilih jenis skin pada pilihan Skin.

10. Ketik pada :

Width : lebar tampilan video pada web.

Height : tinggi tampilan video pada web.

11. Kemudian beri checklist pada :

Auto play : untuk memainkan video secara otomatis pada saat


web dijalankan.
31

Chapter 2. Menyisipkan Gambar dan Media

Auto rewind : untuk mengulang video secara otomatis.

12. Klik Ok.

Gambar 37. Mengatur Properti Video.

13. Maka ikon flash video akan disisipkan pada halaman web.

Gambar 38. Tampilan File Flash Video 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

Chapter 2. Menyisipkan Gambar dan Media

Gambar 39. Mengatur Posisi Video.

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.

Gambar 40. Latihan 2.

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.

Gambar 41. Ketik Teks.

4.

Kemudian letakkan pointer mouse di bawah judul halaman, lalu


masukkan file flash, yaitu Animasi Daun.swf.

5.

Ubah ukuran menjadi 400 x 290 px.

34

Menyisipkan Gambar dan Media

Gambar 42. File Flash.

6.

Setelah itu, ketik teks isi di bawahnya seperti pada gambar dengan
format teks sama seperti teks menu.

7.

Ketik teks Video List di bawah teks isi dengan format :

Font : Anivers

Bold

Size : 18 px

Align Center

Text color : #1A0D00

Gambar 43. Mengetik Teks Isi.

35

Chapter 2. Menyisipkan Gambar dan Media

8.

Masukkan tiga file flash video, yaitu Video1.flv, Video2.flv, dan


Video3.flv.

9.

Atur properties setiap video sebagai berikut :

Gambar 44. Mengatur Properties Video.

10. Kemudian ketik teks Download di bawahnya seperti pada gambar


dengan format yang sama pula dengan teks menu.

Gambar 45. Mengetikan Teks.

11. Simpan file dengan nama Download.html, lalu jalankan di browser.


36

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.

Gambar 1. Contoh Tabel Biodata.

Praktek
1.

Buatlah dokumen baru.

2.

Kemudian klik pada stage, lalu klik Tab Common.


37

Chapter 3. Bekerja dengan Tabel

3.

Klik Table.

4.

Pada kotak dialog Table yang tampil :

Gambar 2. Membuat Tabel.

Rows : ketik jumlah baris

Cokumn : ketik jumlah kolom

Table Width : ketik lebar table

Border thickness : ketik ketebalan bingkai atau border

Cell padding : ketik jarak antara isi dalam sel.

Cell spacing : ketik jarak boder dalam dan border luar.

Header : pilih posisi judul kolom atau baris.

Caption : ketik judul table.

Align caption : pilih posisi judul table.

Summary :

Gambar 3. Membuat Tabel.

5.

38

Klik OK, maka table yang dibuat akan tampil pada stage.

Chapter 3. Bekerja dengan Tabel

Gambar 4. Membuat Tabel.

6.

Ketik isi table.

Gambar 5. Mengetik Isi Tabel.

7.

Blok seluruh isi table.

39

Chapter 3. Bekerja dengan Tabel

Gambar 6. Blok Isi Tabel.

8.

Kemudian ubahlah Font yang digunakan pada Properties Inspector,


yaitu :

Font : Trebuchet MS

Size : 14

Text Color : #003366

Align : Left

Gambar 7. Mengubah Font.

9.

Lakukan hal yang sama pada judul table dengan Size = 16.

10. Simpan file dengan nama Tabel.html.


11. Atur agar letak table berada di tengah dengan memilih Align Center
pada Poperties Inspector.

Gambar 8. Menengahkan Tabel.

2. Mengatur Properti Tabel


Jika table yang dibuat belum sesuai dengan yang diinginkan, kita dapat
mengubahnya dengan mengatur property yang ada pada table.
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.

Gambar 9. Contoh Mengubah Properti Tabel.

Praktek
1.

Bukalah file Tabel.html.

2.

Kemudian klik pada table.

Gambar 10. Klik pada Tabel.

41

Chapter 3. Bekerja dengan Tabel

3.

Lakukan perubahan pada Properties Inspector seperti pada gambar.

Gambar 11. Mengubah Properties Tabel.

4.

W : untuk mengatur lebar table.

CellPad : untuk mengatur ukuran Cell Padding.

CellSpace : untuk mengatur ukuran Cell Spacing.

Border : untuk mengatur tebal bingkai.

Brdr color : untuk member warna pada border table.

Kemudian letakkan pointer di sebelah kiri table, lalu tekan Enter


beberapa kali agar table berada di tengah halaman web.

Gambar 12. Meletakkan Pointer.

5.

42

Anda juga dapat mengubah tinggi setiap baris dengan drag pada
border table.

Chapter 3. Bekerja dengan Tabel

Gambar 13. Drag Border Tabel.

6.

Jika perlu berikan warna background pada halaman web.

7.

Simpan file tersebut, lalu jalankan di browser Anda.

3. Memberi Background pada Tabel


Sama halnya dengan memberi background pada halaman web, memberi
latar pada table juga menggunakan cara yang sama yaitu melalui
Properties Inspector. Untuk lebih jelasnya, ikutilah langkah-langkah pada
contoh berikut ini.

43

Chapter 3. Bekerja dengan Tabel

A. Memberi Warna Latar pada Tabel

Gambar 14. Contoh Memberi Warna Latar pada 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.

Gambar 15. Memilih Warna Latar Tabel.

4.

44

Atau ketik kode warna pada kotak isian Bg color.

Chapter 3. Bekerja dengan Tabel

Gambar 16. Mengetik Kode Warna.

5.

Simpan file.

B. Memberi Background pada Tabel

Gambar 17. Contoh Memberi Background Gambar pada 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.

Gambar 18. Klik Ikon.

45

Chapter 3. Bekerja dengan Tabel

4.

Pilih file gambar yang akan dijadikan background table, klik Ok. Pada
contoh pilih file bunga.png.

Gambar 19. Memilih File Gambar.

5.

Maka gambar tersebut akan menjadi latar dalam table seperti yang
ditunjukkan pada gambar di bawah ini.

Gambar 20. Tampilan Gambar yang Dijadikan Background Tabel.

6.

46

Simpan file, lalu jalankan di browser Anda.

Chapter 3. Bekerja dengan Tabel

4. Menyisipkan Gambar ke dalam Tabel


Cara menyisipkan gambar ke dalam table sama seperti menyisipkan
gambar pada halaman web, yaitu dengan menggunakan tool Image.
Ikutilah langkah-langkah berikut ini.

Gambar 21. Contoh Menyisipkan Gambar ke dalam 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

Gambar 22. Membuat Tabel.

3.

Letakkan pointer di sel pada baris pertama, lalu klik Tab Common.

4.

Kemudian klik tool Images : Image, lalu klik Image.

Gambar 23. Posisi Pointer.

48

Chapter 3. Bekerja dengan Tabel

Gambar 24. Tool Image.

5.

Pilih file gambar yang akan dimasukkan ke table. Pada contoh pilih
file dreamweaver.png, lalu klik Ok.

Gambar 25. Memilih File Gambar.

6.

Ketik teks untuk keterangan gambar pada Alternate text, klik Ok.

Gambar 26. Alternate Text.

7.

Atur posisi dan ukuran gambar pada Property Inspector.

49

Chapter 3. Bekerja dengan Tabel

Gambar 27. Mengatur Properti Gambar.

8.

Setelah itu ketik teks pada baris kedua seperti pada contoh.

9.

Kemudian atur posisi table ke tengah halaman web.

Gambar 28. Memformat Tabel.

10. Jika perlu berikan warna latar pada table.


11. Simpan file dengan nama Tabel Gambar.html.

5. Menambahkan Kolom atau Baris


Jika kolom dan baris pada table yang dibuat tidak cukup, maka kita dapat
menambahkannya. Pada aplikasi Adobe Dreamweaver cs3 ini,
menambahkan kolom dan baris dapat dilakukan dengan mudah.
Perhatikan contoh halaman profil di bawah ini.

50

Chapter 3. Bekerja dengan Tabel

Gambar 29. Contoh Menambahkan Kolom dan Baris pada 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.

Gambar 30. Posisi Pointer di Sel E-mail.

51

Chapter 3. Bekerja dengan Tabel

4.

Klik Tab Layout, lalu pilihlah :

Insert Row Above : jika akan menyisipkan baris di atas.

Insert Row Below : jika akan menyisipkan baris di bawah.

Insert Column to the Left : jika akan menyisipkan kolom di


sebelah kiri.

Insert Column to the Right : jika akan menyisipkan kolom di


sebelah kanan.

Gambar 31. Tool Layout.

5.

Maka satu baris akan ditambahkan di bawahnya dan satu kolom


akan di tambahkan di sebelah kiri.

Gambar 32. Menyisipkan Satu Baris dan Satu Kolom.

6.

52

Ketik isi baris dan kolom, kemudian atur lebarnya seperti pada
contoh.

Chapter 3. Bekerja dengan Tabel

Gambar 33. Teks dan Properti Kolom dan Baris.

7.

Simpan file, lalu jalankan di browser Anda.

6. Menghapus Kolom atau Baris


Jika terdapat baris atau kolom yang tidak diperlukan, sebaiknya kolom
atau baris tersebut dihapus agar space (ruang) yang digunakan pada web
tidak terbuang sia-sia dan space tersebut bisa digunakan untuk
keperluan yang lain. Sebagai contoh, kita akan menghapus kolom No.
pada contoh di bawah ini.
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

Gambar 34. Posisi Pointer pada Kolom Nomor.

3.

Klik menu Modify, pilih Table.

4.

Klik Delete Column.

5.

Maka kolom nomor akan terhapus dari table.

Gambar 35. Memilih Delete Columns.

54

Chapter 3. Bekerja dengan Tabel

Gambar 36. Menghapus Kolom Nomor.

7. Menggabungkan Sel pada Tabel


Dalam pembuatan table, terkadang kita perlu menggabungkan beberapa
sel menjadi satu sel. Untuk lebih jelasnya, perhatikan contoh berikut ini.

Gambar 37. Contoh Menggabungkan Sel.

55

Chapter 3. Bekerja dengan Tabel

Praktek
1.

Buatlah sebuah dokumen baru.

2.

Kemudian buatlah table dengan keterangan sebagai berikut :

Row : 3

Column : 5

Border thickness : 1

Cell padding dan Cell


spacing : 0

Gambar 38. Membuat Tabel.

3.

Setelah table dibuat, blok table dari kolom pertama baris pertama
sampai kolom kelima baris kelima.

Gambar 39. Blok Kolom.

56

Chapter 3. Bekerja dengan Tabel

4.

Klik icon Merge Cell pada Property Inspector, maka kolom yang
diblok akan bergabung menjadi satu kolom.

Gambar 40. Tool Merge Cell.

Gambar 41. Hasil Penggabungan Sel.

5.

Kemudian ketik teks seperti pada contoh.

Gambar 42. Memberi Teks pada Kolom.

57

Chapter 3. Bekerja dengan Tabel

6.

Kemudian masukkan gambar 1.png sampai 10.png pada baris kedua


dan ketiga secara berurutan dari kolom pertama sampai kolom
kelima.

7.

Atur lebar dan tinggi gambar dan tabel pada Property Inspector.

8.

Kemudian beri warna latar pada setiap sel table seperti pada
contoh.

Gambar 43. Menyisipkan Gambar pada Sel.

Gambar 44. Mengatur Properti Tabel.

58

Chapter 3. Bekerja dengan Tabel

9.

Ubah teks dengan ketentuan berikut :

Font : Bambina

Size : 18 px

Text color : #FF0000

10. Kemudian letakkan table di tengah halaman web.

Gambar 45. Mengatur Properti Tabel.

11. Simpan file dengan nama Tabel Gambar2.html, lalu lihat hasilnya di
browser.

8. Memisahkan Sel pada Tabel


Sebelumnya kita telah mempelajari bagaimana menggabungkan sel,
sekarang kita akan mempelajari bagaimana memisahkan satu sel
menjadi beberapa sel. Perhatikanlah contoh berikut ini.

59

Chapter 3. Bekerja dengan Tabel

Gambar 46. Contoh Memisahkan Sel pada 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.

Gambar 47. Menambahkan Baris.

60

Chapter 3. Bekerja dengan Tabel

3.

Kemudian, klik pada baris yang telah ditambahkan.

4.

Klik Splits cell into rows or columns pada Property Inspector.

5.

Lalu pada kotak dialog yang tampil, lakukan pengaturan sesuai


keterangan berikut :

Gambar 48.Tool Split Cell.

6.

Split cell into : pilih Columns (untuk membagi ke dalam


beberapa kolom).

Number of columns : ketik angka dua (jumlah kolom yang akan


dibuat).

Klik Ok.

Gambar 49. Menentukan Jumlah Kolom.

7.

Maka sel pada baris tersebut akan terbagi menjadi dua kolom,
kemudian ketiklah teks pada kolom-kolom tersebut.

61

Chapter 3. Bekerja dengan Tabel

Gambar 50. Mengetikkan Teks pada Kolom.

8.

Ulangi langkah kedua, kemudian ketik teks pada kolom.

Gambar 51. Menambahkan Baris.

9.

Setelah itu, format teks dan table seperti pada contoh.

10. Kemudian ubah border table = 0.

62

Chapter 3. Bekerja dengan Tabel

Gambar 52. Menghilangkan Bingkai Tabel.

11. Simpan file dan jalankan di browser.

9. Membangun Website dengan Tabel


Tabel selain dapat digunakan untuk membuat tata letak halaman web
menjadi teratur dan terorganisir, table juga dapat digunakan untuk
membuat layout sebuah website. Jika menggunakan table untuk
membuat layout maka kita perlu melakukan beberapa pengaturan pada
property table. Untuk lebih jelasnya, ikutilah langkah-langkah pada
latihan berikut ini.

Gambar 53. Contoh Membangun Website dengan Tabel.

Praktek
1.

Buatlah dokumen baru.


63

Chapter 3. Bekerja dengan Tabel

2.

Masukkan gambar background.jpg pada dokumen dengan


menggunakan tombol Page Properties pada Properties Inspector.

3.

Langkah pertama buatlah table dengan jumlah kolom = 2, dan


jumlah baris = 3.

Gambar 54. Memasukkan File Gambar Background.jpg.

Gambar 55. Membuat Tabel.

4.

64

Atur table sebagai berikut :

W (Width) : 878 px

Align : Center

CellPad : 0 px

Chapter 3. Bekerja dengan Tabel

CellSpace : 0 px

Border : 1 px

5.

Kemudian atur table ke tengah-tengah halaman web.

6.

Pisahkan atau bagi sel pada kolom dan baris pertama ke dalam 6
buah sel.

Gambar 56. Mengatur Properti dan Posisi Tabel.

Gambar 57. Membagi Sel.

65

Chapter 3. Bekerja dengan Tabel

Gambar 58. Membagi Sel Menjadi 6 Sel.

7.

Masukkan gambar tombol1.jpg dengan menggunakan tool Image


pada sel kedua.

Gambar 59. Memasukkan Gambar Tombol1.jpg.

8.

66

Atur lebar sel agar sesuai dengan ukuran gambar dengan cara drag
pada border sel.

Chapter 3. Bekerja dengan Tabel

Gambar 60. Drag Border Sel.

9.

Ulangi langkah ketujuh dan kedelapan untuk :

Sel ketiga : masukkan gambar tombol2.jpg.

Sel keempat : masukkan gambar tombol3.jpg.

Sel kelima : masukkan gambar tombol4.jpg.

Gambar 61. Memasukkan dan Mengatur Gambar pada Sel.

67

Chapter 3. Bekerja dengan Tabel

10. Langkah selanjutnya, gabungkan kolom pertama dan kolom kedua


yang ada pada baris kedua.

Gambar 62. Menggabungkan Sel.

11. Masukkan gambar body.jpg sebagai background pada baris kedua.

Gambar 63. Memasukkan Gambar Body.jpg Sebagai Latar.

12. Atur tinggi (Height) sel dengan drag pada border sel ke bawah
sesuai ukuran gambar.
68

Chapter 3. Bekerja dengan Tabel

Gambar 64. Mengatur Tinggi Sel.

13. Setelah itu, gabungkan kolom pertama dan kedua yang ada pada
baris ketiga.

Gambar 65. Menggabungkan Sel.

14. Masukkan gambar footer.jpg pada sel yang telah digabungkan.


15. Kemudian atur tinggi sel tersebut sesuai ukuran gambar footer.jpg
seperti di bawah ini.
69

Chapter 3. Bekerja dengan Tabel

Gambar 66. Memasukkan dan Mengatur Gambar Footer.jpg.

16. Kemudian aturlah pada Property Inspector sebagai berikut.

CellPad : 0 px

CellSpace : 0 px

Border : 0 px

Gambar 67. Menghilangkan Border Tabel.

70

Chapter 3. Bekerja dengan Tabel

17. Letakkan pointer pada baris kedua, kemudian pilih Top pada pilihan
Vertical pada Property Inspector.

Gambar 68. Memposisikan Pointer Di Atas.

18. Buatlah table dengan jumlah kolom = 2 jumlah baris = 1.


19. Aturlah pada Property Inspector sebagai berikut :

CellPad : 0 px

CellSpace : 0 px

Border : 1 px

Align : Center

Gambar 69. Membuat Tabel dalam Tabel.

20. Atur lebar dan tinggi table sesuai dengan ukuran baris kedua.

71

Chapter 3. Bekerja dengan Tabel

Gambar 70. Mengatur Ukuran Tabel.

21. Pisahkan atau bagi kolom pertama menjadi tiga baris, kemudian
atur ukuran masing-masing sel pada kolom pertama.

Gambar 71. Memisahkan dan Mengatur Ukuran Sel.

22. Ketik teks pada sel pertama, lalu atur format teks pada Properties
Inspector sebagai barikut :

72

Font : Fontin Sans Rg

Size : 24

Chapter 3. Bekerja dengan Tabel

Text color : #2165B8

Gambar 72. Memberi Teks Judul.

23. Kemudian masukkan gambar adobe.jpg pada sel kedua.

Gambar 73. Memasukkan Gambar Adobe.jpg pada Tabel.

24. Ketik teks pada kolom ketiga, lalu ubah format teks sebagai berikut :

Font : TW Cent MT

Size : 13 px

Text color : #000000


73

Chapter 3. Bekerja dengan Tabel

Gambar 74. Memberi Teks pada Sel Ketiga.

25. Klik pada border (bingkai) table bagian dalam, kemudian hilangkan
bingkai table.

Gambar 75. Menghilangkan Bingkai Tabel Bagian Dalam.

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

Chapter 3. Bekerja dengan Tabel

Gambar 76. Membuat Tabel.

28. Masukkan gambar iklan1.jpg, iklan2.jpg, iklan3.jpg, dan iklan4.jpg


pada baris pertama dan atur lebar table seperti pada contoh.

Gambar 77. Menyisipkan Tabel.

29. Lalu ketik teks pada baris kedua dan ketiga seperti pada contoh
dengan format sebagai berikut :

Font : TW Cent MT
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

Gambar 78. Mengisi Tabel.

31. Kemudian ketik teks pada baris ketiga seperti pada contoh.

Gambar 79. Membei Teks.

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.

Gambar 1. Contoh Menggunakan Layer.

77

Chapter 4. Bekerja dengan Layer

Praktek
1.

Bukalah file Web Tabel.html.

2.

Klik Tab Layout, lalu klik Draw AP Div.

Gambar 2. Tool Layer.

3.

Drag mouse pada stage di bagian bawah web untuk menggambar


layer dengan ukuran sesuai keinginan.

Gambar 3. Drag Mouse pada Stage.

4.

Ketik teks pada layer seperti pada contoh.

5.

Kemudian ubah format teks sebagai berikut :

78

Font : Trebuchet MS

Size : 14 px

Text color : #CC00CC

Align : Center

Chapter 4. Bekerja dengan Layer

Gambar 4. Memberi dan Memformat Teks pada Layer.

6.

Posisikan layer dengan menggeser layer atau lakukan pengaturan


pada Property Inspector sebagai berikut :

L (left) : 492px (posisi layer dari kiri).

T (top) : 976px (posisi layer dari atas).

Note : ingat bahwa ukuran pada Property Inspector belum tentu


sama untuk setiap browser karena, posisi layer bisa berubah-ubah
menyesuaikan browser dan layar monitor.

Gambar 5. Mengatur Posisi Layer pada Halaman Web.

7.

Simpan file tersebut, kemudian tekan F12 pada keyboard untuk


melihat hasilnya di browser.

2. Memberi Warna pada Layer


Sama halnya dengan table, Anda juga dapat memberikan warna pada
layer. Memberi warna pada layer dapat kita lakukan dengan mengatur
property layer pada Property Inspector. Untuk lebih memahami
pemberian warna pada layer, perhatikanlah langkah-langkah pada
contoh berikut ini.
79

Chapter 4. Bekerja dengan Layer

Gambar 6. Contoh Memberi Warna pada Layer.

Pada contoh kali ini, kita akan membuat sebuah kotak berukuran kecil
pada bagian menu.
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


Gambar 7. Membuat Layer.

3.

Beri warna pada kotak tersebut dengan cara, klik pada bingkai kotak
(garis berwarna biru).

4.

Pilih warna ##00B000 pada Bg color di Property Inspector.

Gambar 8. Memberi Warna pada Layer.

5.

Setelah itu ketik teks seperti pada contoh dan dengan ketentuan
sebagai berikut :

Font : Bradley Hand ITC

Size : 24

Text color : bebas

Align : Center

Gambar 9. Memberi Teks pada Layer.

6.

Kemudian atur letak layer agar berada di tengah-tengah halaman


web. Ingat sesuaikan letak dengan browser Anda.

7.

Simpan file dengan nama Layer.html, lalu jalankan di browser


computer Anda.

81

Chapter 4. Bekerja dengan Layer

3. Menyisipkan Gambar pada Layer


Ada beberapa kesamaan antara layer dan table yaitu dalam mengatur
property seperti warna, ukuran, letak, dan teks. Akan tetapi, tidak hanya
itu saja karena layer dan table juga memiliki kesamaan dalam
menyisipkan gambar. Seperti yang telah kita ketahui, terdapat dua
bentuk cara menyisipkan gambar pada halaman web yaitu menyisipkan
gambar sebagai gambar latar (background) dan menyisipkan gambar
biasa. Untuk lebih jelasnya perhatikan contoh berikut ini :

A. Menyisipkan Gambar sebagai Background

Gambar 10. Contoh Menyisipkan Gambar sebagai Background.

Praktek
1.

Bukalah file Layer.html.

2.

Klik pada bingkai layer (garis berwarna biru).

82

Chapter 4. Bekerja dengan Layer

Gambar 11. Klik Bingkai Layer.

3.

Klik icon berbentuk folder pada Bg Image di Property Inspector.

Gambar 12. Tool Bg Image.

4.

Pilih file gambar yang akan dijadikan latar (background) layer. Pada
contoh pilih file papan tulis.png, lalu klik Ok.

Gambar 13. Memilih File Papan Tulis.png.

83

Chapter 4. Bekerja dengan Layer

5.

Atur ukuran layer agar sesuai dengan ukuran gambar dan ubah
warna background menjadi warna putih.

Gambar 14. Mengatur Properti Layer.

6.

Simpan file Layer.html, lalu jalankan di browser.

B. Menyisipkan Gambar

Gambar 15. Contoh Menyisipkan Gambar pada Layer.

Praktek
1.

Bukalah file Web Tabel.html.

2.

Buatlah layer dengan ukuran sesuai kebutuhan. Pada contoh :

84

W : 103 px

H : 103 px

Chapter 4. Bekerja dengan Layer

Gambar 16. Membuat Layer.

3.

Kemudian untuk menyisipkan gambar pada layer, letakkan pointer


di layer.

4.

Klik Tab Common.

5.

Klik Images : Image, lalu klik Image.

Gambar 17. Memilih Tool Image.

6.

Pilih file gambar yang akan disisipkan. Pada contoh pilih file
apple.jpg, lalu klik Ok.

85

Chapter 4. Bekerja dengan Layer

Gambar 18. Memilih File Gambar Orange.jpg.

7.

Ketik pada Alternate text, lalu klik Ok.

8.

Atur posisi layer agar berada di kanan halaman web seperti pada
contoh dengan cara drag layer.

Gambar 19. Mengetik Alternate Text.

86

Chapter 4. Bekerja dengan Layer

Gambar 20. Memposisikan Layer.

9.

Kemudian tekan Ctrl + S untuk menyimpan file, lalu jalankan pada


browser.

4. Membangun Website dengan Layer


Selain website yang berbasis table (dibuat menggunakan table), ada juga
website yang berbasis layer yaitu website yang dibuat menggunakan
layer. Berdasarkan pembahasan sebelumnya mengenai layer, yaitu letak
web yang dibuat akan tergantung pada browser dan layar monitor yang
digunakan jadi lebih baik membuat layout web di sebelah kiri bukan di
tengah karena letaknya tidak akan berubah-ubah jika ditampilkan pada
web browser dari berbagai ukuran layar monitor. Untuk lebih jelasnya,
perhatikanlah langkah-langkah pada contoh berikut ini.

87

Chapter 4. Bekerja dengan Layer

Gambar 21. Contoh Membangun Website dengan Layer.

Praktek
1.

Buatlah dokumen baru pada Adobe Dreamweaver CS3.

2.

Untuk dapat membuat layout seperti pada contoh, perhatikanlah


gambar di bawah ini.

Gambar 22. Kerangka Web.

88

Chapter 4. Bekerja dengan Layer

3.

Buatlah layer untuk Poin 1 dengan ukuran :

W : 800 px

H : 162 px

Gambar 23. Membuat Layer Pertama.

4.

Masukkan gambar header.jpg pada layer Poin 1 yang telah dibuat.

89

Chapter 4. Bekerja dengan Layer


Gambar 24. Memasukkan Gambar pada Poin 1.

5.

Kemudian buatlah layer kedua yaitu Poin 2 untuk letak menu


dengan ukuran :

W : 800 px

H : 40 px

Gambar 25. Membuat Layer Poin 2.

6.

90

Masukkan gambar bg_menu.jpg pada layer Poin 2.

Chapter 4. Bekerja dengan Layer


Gambar 26. Memasukkan Gambar Bg.jpg.

7.

Buatlah layer ketiga, yaitu Poin 3 untuk bagian isi sebelah kiri
dengan ukuran :

W : 362 px

H : 328 px

Gambar 27. Membuat Layer Poin 3.

8.

Beri warna latar #FA9205 pada layer Poin 3.

91

Chapter 4. Bekerja dengan Layer


Gambar 28. Memberi Warna pada Layer Poin 3.

9.

Buatlah layer keempat yaitu Poin 4 untuk bagian preview gambar


dengan ukuran :

W : 437 px

H : 328 px

Gambar 29. Membuat Layer Poin 4.

10. Beri warna latar #D80202 pada layer Poin 4.

92

Chapter 4. Bekerja dengan Layer


Gambar 30. Memberi Warna pada Layer Poin 4.

11. Buatlah layer kelima yaitu Poin 5 untuk tampilan gambar thumbnail
dengan ukuran :

W : 800 px

H : 118 px

Gambar 31. Membuat Layer Poin 5.

12. Beri warna latar #FF6600 pada layer Poin 5.

93

Chapter 4. Bekerja dengan Layer


Gambar 32. Memberi Warna pada Layer Poin 5.

13. Buatlah layer keenam yaitu Poin 6 untuk bagian akhir dengan
ukuran :

W : 800 px

H : 29 px

Gambar 33. Membuat Layer Poin 6.

14. Beri warna latar #D80202 pada layer Poin 6.

94

Chapter 4. Bekerja dengan Layer


Gambar 34. Memberi Warna pada Layer Poin 6.

15. Kemudian buatlah layer untuk menu pada layer poin 2 dengan
ukuran sebagai berikut :

W : 62 px

H : 24 px

Gambar 35. Membuat Layer Menu Home.

16. Ketik teks Home, lalu lakukan pengaturan pada teks sebagai
berikut :

Font : Trebuchet MS

Size : 14

Text color : #FFFFFF

Format : Bold

95

Chapter 4. Bekerja dengan Layer

Gambar 36. Mengetik dan Mengatur Format Teks.

17. Setelah itu, atur posisi layer menu Home pada layer poin 2 dengan
keterangan sebagai berikut :

L : 27 px

T : 170 px

Gambar 37. Mengatur Letak Layer Menu Home.

96

Chapter 4. Bekerja dengan Layer

18. Ulangi langkah kelimabelas sampai ketujuhbelas untuk menu


Profile, Gallery, dan Contact seperti pada gambar di bawah ini.

Gambar 38. Membuat Layer Menu.

19. Buatlah layer untuk teks judul pada layer poin 3 dengan ukuran
bebas.

Gambar 39. Membuat Layer Teks Judul.

20. Ketik judul teks, lalu format teks dengan keterangan sebagai
berikut:
97

Chapter 4. Bekerja dengan Layer

Font : trebuchet MS

Size : 16 px

Text color : #FFFFFF

Align : Center

Gambar 40. Mengetik Teks Judul.

21. Kemudian buatlah layer untuk teks isi pada layer yang sama dengan
ukuran bebas.

Gambar 41. Membuat Layer Teks Isi.

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

Gambar 42. Mengetikkan Teks Isi.

23. Buatlah layer gambar pada layer poin 4 dengan ukuran sesuai
dengan ukuran gambar yang akan disisipkan.

Gambar 43. Membuat Layer Gambar.

99

Chapter 4. Bekerja dengan Layer

24. Masukkan gambar wallpaper1.jpg pada layer gambar.

Gambar 44. Memasukkan Gambar Wallpaper1.jpg.

25. Buatlah layer baru pada layer poin 5 dengan ukuran sebagai berikut:

W : 740 px

H : 100 px

Gambar 45. Membuat Layer Gambar.

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.

Gambar 46. Memilih File Gambar Wallpaper2.jpg.

30. Ketik pada Alternate text, lalu klik Ok.


31. Kemudian tekan Space pada keyboard untuk memberi jarak antara
gambar1 dan gambar2.

Gambar 47. Memberi Jarak Antargambar.

101

Chapter 4. Bekerja dengan Layer

32. Lalu ulangi langkah keduapuluh tujuh untuk gambar wallpaper3.jpg


sampai wallpaper7.jpg.

Gambar 48. Memasukkan Gambar pada Layer.

33. Buatlah layer baru pada layer poin 6 dengan ukuran bebas.

Gambar 49. Membuat Layer Baru.

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

Gambar 50. Mengetikkan Teks pada Layer.

103

Chapter 4. Bekerja dengan Layer

35. Simpan file dengan nama Web Layer.html, kemudian jalankan pada
browser.

Gambar 51. Tampilan pada Web 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 :

Gambar 1. Contoh Website yang Menggunakan 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

Gambar 2. Kotak dialog New Document

6.

Bila muncul kotak dialog Frame Tag Accessibility Attributes, klik Ok

7.

Atur Ukuran frame, untuk menggeser border frame, Anda dapat


menggunakan pointer ke arah yang diinginkan. Klik frame border
frame, Atur frame dengan menggunakan kursor atau menggunakan
Row pada Properties Inspector.

Gambar 3. Mengatur Ukuran dan Jarak Antar kolom Frame

8.

106

Letakkan kursor di bagian Header. Pada properties klik Page


Properties, lalu pada background images klik browse. Pilih gambar
yang akan dijadikan background.

Chapter 5. Bekerja dengan Frame

Gambar 4. Menyisipkan Background Color dan Teks pada Bagian Left

Gambar 5. Menyisipkan Background Images pada Header

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

Chapter 5. Bekerja dengan Frame

Seperti gambar dibawah ini :

Gambar 6. Menyisipkan Background Color dan Teks pada Bagian Left

11. Pada bagian isi, beri warna backgcrond : #FF6600. Masukkan


images, pada tab menu klik images lalu pilih gambar asd.jpg

Gambar 7. Menyisipkan Gambar pada Bagian Isi

12. Atur gambar supaya letak gambar berada di tengah, pada


properties pilih align center. Lalu masukkan teks di bagian bawah
gambar yang sudah dimasukkan tadi.

108

Chapter 5. Bekerja dengan Frame

Gambar 8. Menyisipkan Gambar dan Teks pada Bagian Isi

13. Letakkan kursor pada bagian footer beri background color.

Gambar 9. Menyisipkan Background Color pada Bagian Footer

14. Masukkan teks pada


bagian footer
NanoMedia.com. Seperti gambar berikut :

Copyright2010

109

Chapter 5. Bekerja dengan Frame

Gambar 10. Memasukkan Teks pada Bagian Footer

15. Setelah selesai simpan file dengan nama nano. Lakukan


penyimpanan satu per satu pada frame.
16. Setelah itu save hasil design Anda, Klik File > Save Frame. Ketik
nama frame pada bagian File Name dan tekan tombol Save. Ulangi
kembali langkah tersebut sampai frame tersimpan semua.

Gambar 11. Menyimpan Frame

110

Chapter 5. Bekerja dengan Frame

17. Untuk melihat hasilnya, pada document toolbar, klik preview dan
pilih Preview in Iexplore.

Gambar 12. Browse Hasil Design ke Firefox

18. Berikut ini adalah hasilnya setelah di browse :

Gambar 13. Hasil Design Setelah di Browse

111

Chapter 5. Bekerja dengan Frame

Latihan

Gambar 14. Contoh Website Menggunakan Frame

1.

Klik HTML pada bagian Create New.

2.

Setelah itu akan tampil lembar kerja document baru.

3.

Klik File > New > Pilih Page From Sample

4.

Lalu pilih Frameset

5.

Pilih jenis bentuk frame : Fixed Top, Nested Left

6.

Klik Create

Gambar 15. Kotak dialog New Document

7.

Bila muncul kotak dialog Frame Tag Accessibility Attributes, klik Ok

8.

Atur Ukuran frame, untuk menggeser border frame, Anda dapat


menggunakan pointer ke arah yang diinginkan.

112

Chapter 5. Bekerja dengan Frame

9.

Untuk menambah frame untuk dibawah, klik modify > frameset >
split Frame Down

Gambar 16. Langkah-langkah menambah frame

10. Klik frame border frame, Atur frame dengan menggunakan kursor
atau menggunakan Row pada Properties Inspector.

Gambar 17. Tampilan Frame

11. Beri warna pada frame atas


12. Pada properties klik Page Properties, lalu pada background color
pilih warna ungu ( #6666FF )
13. Lalu klik Ok
14. Pada frame yang atas atau header, masukan tabel. Anda juga bisa
menggunakan layer.
-

Coloumn : 3

Row

:4

113

Chapter 5. Bekerja dengan Frame

Gambar 18. Kotak Dialog Table

15. Lalu merge cell 3 baris pada kolom pertama


16. Masukkan gambar yang akan diletakkan pada kolom yang sudah
dimerge cell
17. Lakukan cara yang sama pada kolom kedua.

Gambar 19. Menyisipkan gambar

18. Ketik teks bontetDesign.com pada kolom ke-2, atur ukuran dan jenis
teksnya.
19. Pada kolom ke-3 ketik teks seperti dibawah ini :

Gambar 20. Menyisipkan Teks

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.

Gambar 21. Cara menggunakan layer

24. Tarik mengunakan kursor untuk mengatur ukuran layer tersebut.

Gambar 22. Menyisipkan Gambar Pada Layer

25. Kemudian pada baris selanjutnya masukkan gambar, pada tool bar
klik common lalu klik image.

Gambar 23. Menyisipkan Iklan

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.

Gambar 24. Memberi background image pada frame isi

27. Sama seperti frame yang sebelumnya, masukkan tabel


-

Columns : 4

Rows

:6

Gambar 25. Menyisipkan tabel pada frame isi

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.

Gambar 26. Mengatur teks menu

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

Gambar 27. Menyisipkan gambar dan teks pada layer

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.

Gambar 28. Mengatur dan menyisipkan gambar

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

Chapter 5. Bekerja dengan Frame

Gambar 29. Menyisipkan gambar dan Mengatur tata letak gambar

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.

Gambar 30. Kotak Dialog Save As

43. Untuk melihat hasilnya, pada document toolbar, klik preview dan
pilih Preview in Iexplore.

119

Chapter 5. Bekerja dengan Frame

Gambar 31. Browse hasil design ke Firefox

44. Berikut ini adalah hasilnya setelah di browse :

Gambar 32. Hasil

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.

Gambar 1.Contoh 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

Gambar 2. Kotak Dialog Table

5.

Ketik teks pada setiap kolom, seperti gambar berikut :

Gambar 3. Mengisi Teks dalam Tabel

6.

122

Pada kolom nama, masukkan textfield. Pada panel insert, aktifkan


tab forms dan klik tools Textfield.

Chapter 6. Bekerja dengan Form

Gambar 4. Mengaktifkan Tools Textfield

7.

Selanjutnya kolom alamat, masukkan elemen textarea.

8.

Lalu pada kolom tempat tanggal lahir masukkan textfield, setelah


itu untuk tanggal, bulan dan tahun masukkan List/Menu. Bila kotak
dialog tampil, klik OK.

9.

List masih dalam keadaan aktif. Pada properties inspector, klik


tombol list values. Lanjutkan dengan pengisian data, seperti berikut
:

Gambar 5. Kotak Dialog Input Tag

Gambar 6. Pengisian Pada List

123

Chapter 6. Bekerja dengan Form

10. Klik tombol + untuk menambahkan isi pada list menu.

Gambar 7. Menambahklan Isi List

11. Lanjutkan pengisian sampai tanggal 31.

Gambar 8. Menambahkan data tanggal sampai tanggal 31

12. Lakukan cara yang sama untuk pengisian list menu pada bulan dan
tahun.

Gambar 9. Hasil List/Menu

124

Chapter 6. Bekerja dengan Form

13. Berikutnya untuk kolom Status, gunakan Radio Group. Kotak dialog
radio group akan tampil. Isilah propertinya.

Gambar 10. Mengisi Properti Radio Group

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

Gambar 11. Membuat Checkbox pada Kolom Hobby

17. Setelah itu masukkan kembali checkbox untuk hobby yang lain.

125

Chapter 6. Bekerja dengan Form

Gambar 12. Tampilan Seluruh Checkbox pada kolom Hobby

18. Pada kolom Telepon dan Email masukkan textfield. Lanjutkan


pengisian pada bagian bawah. Klik tool Button pada insert > form.

Gambar 13. Button (sumbit)

19. Aktifkan/klik tombol submit. Lalu pada Values ubah nama submit
menjadi kirim.

126

Chapter 6. Bekerja dengan Form

Gambar 14. Mengubah nama Pada tombol Submit

20. Lanjutkan dengan memasukkan button kembali pada tempat yang


sama. Ubah nama submit menjadi reset. Kemudian pada properties
inspector, ubah mode action-nya menjadi Reset. Lihat gambar di
bawah ini.

Gambar 15. Memasukkan Tombol Reset

21. Agar tampilan form terlihat bagus, maka lakukan pengaturan teks
dan Background.
-

Jenis Font

: Comic Sans MS, Chiller

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.

Gambar 16. Menjalankan Form

127

Chapter 6. Bekerja dengan Form

Latihan

Gambar 17. Memasukkan Elemen Eksekusi

1. Buka aplikasi Dreamweaver CS3


2. Klik HTML pada bagian Create New.
3. Setelah itu akan tampil lembar kerja document baru.
4. Pada tab menu klik Insert > Form > Form.

Gambar 18. Membuat Form

5. Lalu buatlah tabel dengan ketentuan berikut :


Column : 4
Rows

: 23

Seperti gambar yang di bawah ini :

128

Chapter 6. Bekerja dengan Form

Gambar 19. Mengatur Jumlah Baris dan Kolom

6.

Merge Cell kolom ke-1 sampai ke-4 pada baris ke-1.

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.

Gambar 20. Menarik kolom kebawah

Column

:4

Rows

:1

Table Width : 800 px


Seperti gambar berikut :

Gambar 21. Menambahakan Tabel didalam Tabel

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.

Gambar 22. Menyisipkan Teks Pada Tabel

11. Masukkan Background Image dan Background Color pada bagain isi.
12. Masukkan teks pada setiap kolom seperti gambar berikut :

Gambar 23. Memasukkan Teks pada Setiap Kolom

13. Lalu pada kolom isi form sebagai berikut :


130

Username

: TextField

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 :

Gambar 24. Mengisi Kotak Dialog Radio Group

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.

Gambar 25. Elemen Password

17. Berikut ini hasil kolom yang sudah diisi dengan elemen form.

131

Chapter 6. Bekerja dengan Form

Gambar 26. Pengisian Kolom dengan Form

18. Lanjutkan pengisian pada bagian kolom bawah. Masih pada insert >
form > pilih Button.

Gambar 27. Elemen Button

19. Lanjutkan dengan memasukkan elemen button kembali pada


tempat yang sama.
20. Kemudian pada properti inspector, ubah nama mode actionnya
menjadi Reset. Lihat gambar dibawah ini :

132

Chapter 6. Bekerja dengan Form

Gambar 28. Penambahan Elamen Button (Reset)

21. Tekan tombol Ctrl + Shift + S, kemudian simpan dengan nama


eksekusi.
22. Jalankan dengan menekan tombol F12 pada keybord.
23. Untuk sementara tombol submit tidak aktif, dikarenakan tidak
adanya script perantara untuk masuk ke dalam server.

Gambar 29. Menjalankan Latihan Eksekusi

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

Chapter 6. Bekerja dengan Form

Gambar 30. Contoh Pengisian Data

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.

1. Link dengan Teks


Selain link antarhalaman web, Anda juga dapat membuat link ke situs
lain, dokumen lain, file lain, lokasi lain, link e-mail atau link null/kosong.
Teks merupakan media yang paling sering digunakan untuk menampung
sebuah link. Pada pembahasan sebelumnya pada Bab 1, Anda telah
mempelajari bagaimana membuat link dengan teks. Oleh karena itu,
untuk dapat lebih memahami bagaimana cara memberi pada teks,
ikutilah langkah-langkah pada contoh di bawah ini.

Gambar 1. Contoh Menggunakan Layer.

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.

Gambar 2. Blok Teks yang akan Diberi Link.

3.

Klik Hyperlink pada Tab Common.

Gambar 3. Tool Hyperlink.

4.

Kemudian pada kotak dialog Hyperlink yang tampil, klik pada icon
berbentuk folder pada Link.

Gambar 4. Memberi Link pada Teks.

136

Chapter 7. Membuat Navigasi dengan Link

5.

Jika Anda ingin menghubungkan halaman web ke file lain, misalnya


ke Layer.html maka pilih file Layer.html pada kotak dialog Select File
yang tampil.

6.

Namun, jika ingin menghubungkan ke website lain, misalnya


Palcomtech maka ketik alamat URL yang akan dihubungkan yaitu,
pada contoh http://palcomtech.com.

7.

Klik OK.

Gambar 5. Memilih File Link.

8.

Lalu pilih pada Target sebagai berikut :

_blank : untuk menampilkan file yang terhubung ke window


baru.

_parent : untuk menampilkan file yang terhubung ke bagian


halaman dari frame yang mengandung link.

_self : untuk menampilkan file yang terhubung ke halaman yang


sama dari link sumber berada.

_top : untuk menampilkan file yang terhubung ke window tanpa


menampilkan frame.

Gambar 6. Memilih Target.

137

Chapter 7. Membuat Navigasi dengan Link

9.

Kemudian ketik pada :

Title : ketik nama atau judul yang Anda berikan untuk link.

Access Key : ketik angka atau huruf untuk membuat tombol


pintas ke link-link yang ada di halaman web.

Tab Index : ketik nomor yang menyatakan urutan link dalam


link-link.

10. Klik Ok.

Gambar 7. Memberi Link pada Teks.

11. Maka teks akan berwarna biru dan bergaris bawah yang
menandakan teks berhasil di-link.

Gambar 8. Teks Berhasil Diberi Link.

12. Simpan file kembali, lalu tekan F12 untuk menjalankannya di


browser.

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

langkah-langkah pada contoh berikut ini.

Gambar 9. Contoh Memberi Link Email.

Praktek
1.

Bukalah file Web Tabel.html

2.

Blok teks stress_corner@plasa.com yang ada pada dokumen.

Gambar 10. Blok Teks.

3.

Klik Email Link.

139

Chapter 7. Membuat Navigasi dengan Link

Gambar 11. Tool Email Link.

4.

5.

Ketik pada kotak dialog Email Link yang tampil :

Text : ketik teks yang akan digunakan sebagai teks link.

E-mail : ketik alamat email yang dituju.

Klik Ok.

Gambar 12. Memberi Link Email.

6.

Maka teks akan berwarna biru dan bergaris bawah, tanda teks telah
berhasil diberi link.

Gambar 13. Teks yang Berhasil Diberi Link Email.

7.

Simpan dokumen, lalu jalankan di browser.

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.

Gambar 14. Contoh Link ke Flash.

Praktek
1.

Bukalah file Web Tabel.html.

2.

Blok teks Flash Animation pada kolom sebelah kanan table.

Gambar 15. Blok Teks.

141

Chapter 7. Membuat Navigasi dengan Link

3.

Klik icon berbentuk folder pada Link di Property Inspector.

Gambar 16. Pilih Icon Berbentuk Folder.

4.

Pilih file flash yang akan dihubungkan. Pada contoh file Animasi
Daun.swf.

5.

Klik Ok.

Gambar 17. Memilih File.

6.

Pilih Target pada Property Inspector. Pada contoh Target = _blank.

Gambar 18. Memilih Target _blank.

7.

142

Maka teks akan berwarna biru dan bergaris bawah, tanda teks
berhasil diberi link.

Chapter 7. Membuat Navigasi dengan Link

Gambar 19. Tampilan Hasil Link ke Flash.

8.

Simpan file, kemudian jalankan di browser. Berikut adalah tampilan


pada saat teks diklik maka akan muncul jendela baru yang berisi file
flash yang dihubungkan.

Gambar 20. Tampilan File Flash.

143

Chapter 7. Membuat Navigasi dengan Link

4. Link dengan Efek Rollover


Selain dengan Flash, Anda dapat membuat efek rollover pada suatu
gambar atau teks. Untuk membuat rollover pada gambar, Anda harus
menyediakan terlebih dahulu gambar-gambar yang diperlukan. Ada
beberapa program pengolah gambar yang juga menyediakan pembuatan
gambar atau tombol dengan efek rollover, di antaranya adalah Adobe
Photoshop, dan Adobe Image Ready. Agar dapat lebih memahami
bagaimana cara membuat link dengan efek Rollover, perhatikanlah
contoh berikut ini :

Gambar 21. Contoh Membuat Rollover Image.

Praktek
1.

Bukalah file Web Tabel.html.

2.

Letakkan pointer di bawah teks Supported by.

144

Chapter 7. Membuat Navigasi dengan Link

Gambar 22. Posisi Pointer Mouse.

3.

Kemudian klik tanda panah ke bawah pada tool Images.

4.

Pilih Rollover Image.

Gambar 23. Tool Rollovr Image.

5.

Kemudian pada jendela Insert Rollover Image yang tampil, ketik


nama image pada kotak isian Image name.

6.

Klik tombol Browse pada Original image.

145

Chapter 7. Membuat Navigasi dengan Link

Gambar 24. Memberi Nama Image.

7.

Pilih gambar yang akan ditampilkan sebagai gambar utama. Pada


gambar pilih file gambar1.png, lalu klik Ok.

Gambar 25. Memilih Gambar Original Image.

8.

Kemudian klik tombol Browse pada Rollover image.

Gamba 26. Klik Tombol Browse di Rollover Image.

9.

146

Pilih gambar yang akan ditampilkan ketika mouse berada di atas


gambar (rollover). Pada contoh pilih file rollover1.png, lalu klik Ok.

Chapter 7. Membuat Navigasi dengan Link

Gambar 27. Memilih Gambar Rollover Image.

10. Ketik teks pada Alternate teks.


11. Lalu ketik alamat URL yang akan dituju pada saat Rollover Image
diklik pada When clicked, Go to URL. Pada contoh
http://twitter.com.

Gambar 28. Mengetikkan Alamat URL.

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

Gambar 29. Memilih Nama Dokumen.

13. Klik Ok, maka hasli Link Rollover Image yang dibuat akan tampil
pada dokumen seperti pada Gambar 25.

Gambar 30. Membuat Rollover Image.

Gambar 31. Tampilan Rollover Image yang Dibuat.

148

Chapter 7. Membuat Navigasi dengan Link

14. Simpan file, lalu jalankan di browser.


15. Kemudian ulangi langkah ketiga sampai langkah keempat belas
menggunakan gambar yahoo.jpg dan flickr.jpg seperti pada contoh.

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.

Gambar 32. Blok Teks Images.

3.

Klik icon berbentuk folder pada Link di Property Inspector.


149

Chapter 7. Membuat Navigasi dengan Link

Gambar 33. Pilih Icon Berbentuk Folder pada Link.

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.

Gambar 34. Memilih File Zodiak.htm.

Gambar 35. Tampilan Isi File Zodiak.htm.

150

Chapter 7. Membuat Navigasi dengan Link

6.

Kemudian pilih frame mana gambar atau file zodiac.htm akan


ditampilkan pada pilihan Target di Property Inspector. Pada contoh
pilih mainframe.

Gambar 36. Memilih Frame Target.

7.

Simpan file halaman web tersebut, lalu jalankan di browser Anda.

Gambar 37. Tampilan Web Sebelum Diklik.

151

Chapter 7. Membuat Navigasi dengan Link

Gambar 38. Tampilan Web Setelah Diklik.

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.

Gambar 1. Contoh Menu Navigasi

Praktek
1.

Buka file web tabel.html

2.

Kemudian hapuslah tombol menu yang telah dibuat sebelumnya.

153

Chapter 8. Membuat Navigator Menu

Gambar 2. Menghapus Tombol Menu

3.

Lalu merge kolom ke-2 sampai kolom ke-5 pada baris pertama

Gambar 3. Merge Cell Kolom

4.

154

Pada tab common, klik navigator bar. Lalu akan muncul kotak
dialog.

Chapter 8. Membuat Navigator Menu

Gambar 4. Navigator Bar

Gambar 5. Kotak Dialog Insert Navigator Bar

5.

Beri suatu nama pada tombol menu dalam kotak Element Name.

6.

Tentukan gambar yang akan digunakan sebagai menu rollover pada


kotak.
-

Up Image : gambar awal yang muncul pada browser.

Over Image : gambar yang muncul sewaktu mouse berada di


atasnya.

Down Image : gambar yang muncul sewaktu tombol mouse


diklik atasnya.

Over While Down Image : gambar yang muncul sewaktu mouse


berada di atas gambar dan tombol mouse ditekan.

7.

Berikan penjelasan teks untuk gambar tersebut pada kotak


Alternate Text.

8.

Masukkan alamat URL yang akan dituju sewaktu tombol menu


diklik. Lihat gambar dibawah ini :

155

Chapter 8. Membuat Navigator Menu

Gambar 6. Mengisi komponen Kotak Dialog Insert Navigator Bar

9.

Ulangi langkah 8 sampai 11 untuk membuat tombol menu lainnya.

Gambar 7. Memasukkan nama pada Element Name

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

Chapter 8. Membuat Navigator Menu

Gambar 8. Hasil di Web Browser

Latihan

Gambar 9. Membuat Menu Navigsi

1.

Buka aplikasi Dreamweaver CS3

2.

Klik HTML pada bagian Create New.

3.

Buat tabel dengan ketentuan sebagai berikut :


-

Width Table

: 950

Columns

:4

Rows

: 12
157

Chapter 8. Membuat Navigator Menu

4.

Merge Cell beberapa tabel, lalu masukkan background image pada


baris pertama.

5.

Lalu merge cell baris ke-2, masukkan kembali background images,


seperti gambar berikut :

Gambar 10. Merge Cell Beberapa Kolom dan Baris

6.

Lalu pada baris kedua masukkan Background Image untuk menu.


seperti gambar berikut :

Gambar 11. Memasukkan Background Image pada Baris ke-2

7.

Lalu pada kategori Common, pilih Images. Pilih Navigator Bar.

8.

Beri nama pada tombol menu di kotak Element Name.

158

Chapter 8. Membuat Navigator Menu

Gambar 12. Memasukkan nama pada Element Name

9.

Tentukan gambar yang akan digunakan sebagai menu rollover pada


kotak.

10. Berikan penjelasan teks untuk gambar tersebut pada kotak


Alternate Text. Masukkan alamat URL yang akan dituju sewaktu
tombol menu diklik. Lihat gambar dibawah ini :

Gambar 13. Mengisi komponen Kotak Dialog Insert Navigator Bar

11. Masukkan kembali button sampai dengan selesai.

Gambar 14. Membuat tombol menu

12. Lalu pada Properties Inspector pilih center pada Align, untuk
menengahkan tombol navigator yang sudah Anda buat.
159

Chapter 8. Membuat Navigator Menu

Gambar 15. Properties Inspector

13. Dan hasilnya seperti gambar dibawah ini :

Gambar 16. Hasil tombol Menu Navigator

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.
-

Background color : #FB6F29

16. Atur jenis font, size dan color pada teks berikut.
-

Jenis font : Comic Sans MS

Size

: 14

Color

: atur warna sesuai keinginan Anda.

Seperti gambar berikut :

160

Chapter 8. Membuat Navigator Menu

Gambar 17. Memasukkan dan Mengatur Teks

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 :

Gambar 18. Memasukkan Gambar

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

Chapter 8. Membuat Navigator Menu

Gambar 19. Memasukkan Background Image untuk Bagian Bawah

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.

Gambar 20. Contoh Web yang Menggunakan Jump Menu

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.

Gambar 21. Memasukkan Tabel

3.

Lalu masukkan gambar cari.png pada kolom pertama, baris


pertama.

163

Chapter 8. Membuat Navigator Menu

Gambar 22. Menyisipkan gambar

4.

Klik From pada tab menu, pilih jump menu.

Gambar 23. Jump menu

5.

Masukkan teks yang akan ditampilkan sebagai link menu dalam


kotak teks.

Gambar 24. Kotak Dialog Insert Jump Menu

6.

Klik tombol + di bagian atas kotak dialog.

7.

Klik Browse, lalu masukkan alamat URL dari menu yang akan di link
pada kotak When Selected Go To URL.

164

Chapter 8. Membuat Navigator Menu

8.

Tentukan target URL pada kotak URLs In.

9.

Berikan suatu nama untuk menu ini pada kotak Menu Name

Gambar 25. Menentukan alamat URL dan target URL

Gambar 26. Memberi Nama Menu

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.

Gambar 27. Membuat Keseluruhan Menu

12. Ulangi langkah 10 sampai 16 untuk menambah menu lainnya.


165

Chapter 8. Membuat Navigator Menu

13. Klik OK untuk menyelesaikan pembuatan jump menu. Berikut


adalah hasilnya :

Gambar 28. Hasil Jump Menu

14. Tekan F12 untuk melihat hasilnya di web Browser.

Gambar 29. Hasil Setelah di Browser

166

Chapter 8. Membuat Navigator Menu

Latihan

Gambar 30. Membuat Jump Menu

1.

Masih sama seperti praktek diawal membuat menu navigasi,


buatlah tabel dengan ketentuan sebagai berikut :
Width Table : 950
Column

:4

Row

: 11

2.

Merge cell seluruh tabel dan masukkan tabel kembali.

3.

Masukkan background images pada tabel yang sudah dimerge cell.

4.

Masukkan tabel yang komponennya seperti diatas. Seperti gambar


dibawah :

Gambar 31. Memasukkan tabel didalam tabel

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.

Gambar 32. Memasukkan Background Images & Menu Navigasi

7.

Merge cell baris ke-2 sampai ke-3 pada kolom pertama. Masukkan
teks.

Gambar 33. Memasukkan Teks

8.

168

Pada baris ke-1 dan kolom ke-4 masukkan jump menu

Chapter 8. Membuat Navigator Menu

Gambar 34. Memasukkan jump menu

9.

Klik tombol Jump Menu pada kategori Forms tabs bar.

Gambar 35. Tabs bar

10. Masukkan teks yang akan ditampilkan sebagai link menu dalam
kotak teks.

Gambar 36. Kotak Dialog Insert Jump Menu

11. Klik tombol + di bagian atas kotak dialog.


12. Klik Browse, lalu masukkan alamat URL dari menu yang akan di link
pada kotak When Selected Go To URL.
13. Tentukan target URL pada kotak URLs In.

169

Chapter 8. Membuat Navigator Menu

Gambar 37. Menentukan alamat URL dan target URL

14. Berikan suatu nama untuk menu ini pada kotak Menu Name

Gambar 38. Memberi Nama 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.

Gambar 39. Membuat Keseluruhan Menu

17. Ulangi langkah 10 sampai 16 untuk menambah menu lainnya.


170

Chapter 8. Membuat Navigator Menu

18. Klik OK untuk menyelesaikan pembuatan jump menu. Berikut


adalah hasilnya :

Gambar 40. Hasil Jump 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.

Gambar 41. Memasukkan Gambar dan Teks

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.

Gambar 42. Memasukkan gambar

25. Untuk bagian footer masukkan background images. Seperti gambar


di bawah ini :

Gambar 43. Memasukkan Background Images Untuk Footer

172

Chapter 8. Membuat Navigator Menu

26. Setelah itu, simpan kembali filenya. Untuk melihat hasilnya, tekan
F12 pada keyboard Anda.

Gambar 44. Tampilan pada Web Browser

173

Chapter 8. Membuat Navigator Menu

Catatan :

174

Vous aimerez peut-être aussi