Heri Susanta, S.Pd.

T SMA Negeri 8 Yogyakarta

1
MACROMEDIA DREAMWEAVER MX 2004


I. MENGENAL MACROMEDIA DREAMWEAVER MX 2004

Software DreamWeaver ini merupakan salah satu software untuk mendesain website
atau homepage, selain software FrontPage yang sering kita dengar. Untuk memahami cara
bekerja dengan DreamWeaver paling tidak ada tiga
komponen yang perlu dimengerti pengguna software ini:
Halaman utama: untuk desain website itu sendiri (tampilan web maupun kode HTML)
Obyek / Tool: terdiri dari common, layout, text, frames, forms, templates,character,
head, script dan application. Fungsinya adalah memasukan obyekatau sifat obyek yang
Anda inginkan, misalnya memasukan table dan segala sifat-sifatnya, atau membubuhkan
sifat text.
Properties: berfungsi sebagai alat pengedit obyek yang sedang Anda olah. Proporties
akan berubah sesuai dengan obyek yang sedang Anda olah. Bila object atau properties
tidak tampak pada layar Anda, klik Windows -> properties.
DreamWeaver menyediakan tiga metode dalam mendesain website. Pertama,
mendesain dengan menggunakan kode HTML (bahasa dasar dalam membuat website).
Metode pertama ini tentunya bagi pendesain yang sudah mahir kode HTMLnya. Kalau kita
memilih metode pertama ini, maka layar di tampilan utama ini murni kode-kode HTML.
Sekali lagi ini cukup merepotkan bagi pemula. Karenanya tidak dianjurkan bagi pemula
menggunakan metode pertama ini.
Kedua, kita bisa desain juga dengan visualisasinya seperti kita mengetik melalui
editor word prosesor (MS WORD, misalnya). Metode kedua ini cocok bagi pemula. Karena
pendesain tidak perlu repot-repot memikirkan kode HTML. Anda cukup klik tool yang Anda
perlukan, DreamWeaver akan membuat sendiri HTML kodenya. J adi pada dasarnya tool
hanya membuat HTML kode. Berbeda dengan metode pertama, layar tampilan yang nampak
sama seperti di website. Dalam dunia Desktop Publishing disebut WYSIWYG (What you
see is what you get = Apa yang Anda lihat itulah tampilan sebenarnya).
Atau metode yang ketiga, yaitu perpaduan keduanya, mendesain secara visual tapi
juga bisa mengedit dengan kode HTML. Metode ini sebetulnya lebih tepat daripada hanya
mengandalkan WYSIWYG. Sebab koreksi akan lebih tepat dilakukan dengan kode HTML
daripada sekedar tools.
Fasilitas dalam Dreamweaver MX 2004 :
Lebih baik dari yang sebelumnya seperti:
Ada peningkatan kemampuan toolbar (dapat memodifikasi toolbar yang ada atau
menambahkan fungsi baru)
Memiliki kemampuan untuk menyunting kode dengan lebih baik
Dapat melakukan print kode pada jendela code view.
Memiliki fasilitas code Hints yang membantu dalam urusan tag serta Tag Inspector yang
sangat berguna dalam menangani tag HTML.
Memiliki panel baru, yaitu panel Snippets yang memberikan fasilitas untuk menyunting
dan menyimpan blok kode yang sering digunakan.
Memiliki fasilitas untuk menangani dokumen baru seperti XHTML, Extension Manager
yang telah ditingkatkan kemampuannya.
Memiliki fasilitas penanganan aplikasi database
Memulai Dreamweaver MX 2004
Start > All Program > Macromedia > Macromedia Dreamweaver MX 2004


Heri Susanta, S.Pd.T SMA Negeri 8 Yogyakarta
2
Ruang Kerja Dreamweaver MX 2004
Pertama kali mulai menjalankan Dreamweaver MX 2004, akan tampil kotak dialog
Workspace Setup yang digunakan untuk memilih tampilan ruang kerja. Ada 2 pilihan ruang
kerja yaitu:
Designer workspace : sebuah penggabungan ruang kerja menggunakan MDI (multiple
document interface), dimana semua jendela dokumen dan panel tergabung di dalam satu
jendela aplikasi yang besar, dengan sisi panel group di sebelah kanan.
Coder workspace : ruang kerja yang tergabung dengan letak sisi panel group berada di
seblah kiri.
Komponen-komponen yang disediakan oleh ruang kerja Dreamweaver MX antara
lain adalah Insert Bar, Document Toolbar, Document window, kelompok panel, Tag
Inspector, Property Inspector dan site panel.



1. Document window berfungsi untuk menampilkan dokumen dimana anda sekarang
bekerja.
2. Insert Bar mengandung tombol-tombol untuk menyisipkan berbagai macam objek
seperti image, table dan layer ke dalam dokumen.
3. Document Toolbar berisi tombol-tombol dan menu pop-up yang menyediakan tampilan
berbeda dari document window.
4. Kelompok panel adalah kumpulan panel yang saling berkaitan satu sama lain, yang
dikelompokkan di bawah satu judul.
5. Tag Selector berfungsi untuk menampilkan hirarki tag di sekitar pilihan yang aktif pada
design view.
6. Property Inspector digunakan untuk melihat dan mengubah berbagai property objek
atau teks.
7. Site panel digunakan untuk mengatur file dan folder yang membentuk situs web anda.

Komponen Ruang Kerja
Di dalam ruang kerja Dreamweaver MX 2004 terdapat beberapa komponen utama yang
membentuk suatu ruang kerja. Ruang kerja Dreamweaver ini memberikan kesatuan tampilan
antara menu utama, panel, property inspector, serta toolbar.
1
2 3
4
5
6

7


Heri Susanta, S.Pd.T SMA Negeri 8 Yogyakarta
3
Menu Utama
Di dalam system menu Dreamweaver MX terdapat komponen yang dapat anda gunakan
yaitu:
Menu File dan menu Edit
Berisi item menu standar untuk menu File dan Edit, seperti New, Open, Save, Save all,
Cut, Copy, Paste, Undo, dan Redo.
Menu View
Berisi perintah untuk menampilkan beberapa macam tampilan dari dokumen anda (seperti
tampilan Design view dan tampilan Code), dll
Menu Insert
Berisikan alternative baris Insert untuk menyisipkan obyek di dalam dokumen.
Menu Modify
Berfungsi untuk melakukan perubahan property pada item atau halaman terpilih.
Menu Text
Berfungsi untuk mempermudah dalam melakukan format teks.
Menu Commands
Berisi akses ke beberapa perintah, format kode yang sesuai dengan format pilihan anda.
Menu site
Berisi item menu untuk mengelola situs dan melakukan upload dan download file.
Menu Window
Menyediakan akses ke seluruh panel, inspector, dan jendela di dalam Dreamweaver.
Menu Help
Menyediakan akses ke doukumen dreamweaver, membuka lembar kerja Help untuk
membantu anda dalam menggunakan Dreamweaver.
Baris Standar
Saat membuka jendela Dreamweaver, secara default hanya menampilkan Document
Bar tanpa menampilkan Standar Bar.

Untuk mengaktifkan Standard Bar: View > Toolbars > Document dan Standard. >
Standard Bar.
Baris Tombol Dokumen
Document toolbar berisi tombol-tombol dan menu pop-up yang menyediakan
tampilan berbeda dari document window.



No Nama Keterangan
1 Show code view
To menampilkan mode pengetikan kode html dalam
jendela code view
2 Show code and design view To menampilkan jendela code view dan design view
3 Show design view To menampilkan jendela design view
4 No browser check errors
To melakukan pengecekan kesalahan pada document
web
5 Document title To memberikan judul pada dokumen web
6 File management To proses upload dan download file
7 Preview/debug in browser To melihat hasil dalam browser.
8 Refresh site list To melakukan pembaharuan terhadap daftar isi situs anda
9 View options To mengatur pilihan pada tampilan ruang kerja anda

Heri Susanta, S.Pd.T SMA Negeri 8 Yogyakarta
4
Baris Insert
Baris Insert terdiri dari tombol-tombol untuk membuat dan menyisipkan obyek seperti
table, layer dan gambar. J ika anda lebih menyukai tampilan kategori seperti tabulasi yang
berada di atas baris Insert anda dapat mengganti tampilan baris Insert tersebut dengan cara
memilih Show as Tabs pada Insert Bar

Baris Insert digunakan untuk mengatur beberapa kategori pilihan sbb:
Kategori Common untuk membuat dan menyisipkan beberapa penggunaan obyek biasa,
seperti gambar dan table.
Kategori Layout untuk menyisipkan table, div tag, layer, dan frame.
Kategori Forms berisi tombol-tombol untuk membuat form dan menyisipkan elemen
form.
Kategori Text menyisipkan beberapa teks dan daftar format tag.
Kategori HTML untuk menyisipkan tag HTML, mistar horizontal, head content, table,
frame, dan script.
Kategori Server-code hanya tersedia untuk halaman-halaman yang menggunakan bahasa
khusus server.
Kategori Application untuk menyisipkan elemen dinamis seperti recordset, repeated
region, dan record insertion dan update form.
Kategori Flash Elements untuk menyisipkan elemen Flash.
Kategori Favorites untuk mengelompokkan dan mengatur tombol-tombol baris Insert
yang anda gunakan dalam satu wadah.
Jendela Dokumen
Document Window merupakan bagian yang digunakan untuk mendesain halaman
situs web. Dalam document window, anda dapat menyisipkan teks, image, serta objek lain
yang mendukung pembuatan situs web atau tempat untuk membuat desain web.
Panel Group
Panel Group adalah kumpulan panel yang saling berkaitan satu sama lain yang
dikelompokkan bersama di bawah satu judul
Files Panel
Files Panel merupakan bagian dari panel group file selain panel Assets. Bagian ini
berfungsi untuk mengatur file dan folder yang membentuk situs Web anda. Pada panel ini
anda dapat melakukan beberapa aktivitas, antara lain manajemen file, melakukan koneksi ke
remote server atau testing server, menempatkan file ke server atau menyalin file dari server
ke situs local.
Snippets Panel
Snippets Panel merupakan kode yang sering digunakan dan disisipkan pada dokumen.
Anda dapat mengambil kode snippets built-in yang ada di dalam bagian snippets dengan
menentukan terlebih dulu kode apa yang akan disisipkan ke dalam dokumen.
Tag Inspector
Merupakan salah satu fasilitas terbaru dari Dreamweaver MX. Dalam tag inspector
anda dapat melihat struktur hirarki tag dan atribut-atribut yang dapat ditambahkan atau diedit.
Tag Selector
Tag selector terdapat pada bagian bawah document window atau pada bagian status
bar. Fungsinya adalah untuk menampilkan hirarki tag pada design view yang aktif.
Property Inspector
Property Inspector digunakan untuk melihat dan mengubah berbagai property objek
dan teks yang terpilih. Setiap objek maupun teks mempunyai property yang berbeda-beda.


Heri Susanta, S.Pd.T SMA Negeri 8 Yogyakarta
5
II. MEMBUAT SITUS WEB
Sebelum memulai membuat situs web, ada baiknya anda mengetahui pengertian dari
sebuah situs web itu sendiri.
Situs web : suatu kesatuan dari dokumen-dokumen yang terhubung dengan atribut yang
sama. J adi sebuah situs web memiliki banyak dokumen yang disebut halaman web, serta
dilengkapi dengan komponen lain, seperti image, media dan objek yang saling
berhubungan.
Selain itu juga harus mengerti tentang konsep ruang kerja yang ada di Dreamweaver MX.
Membuat Situs Lokal
Situs Lokal : memiliki pengertian bahwa seluruh file yang digunakan untuk
membangun situs web tersebut berada dalam computer yang berdiri sendiri.
Dalam Dreamweaver, untuk membuat sebuah situs web perlu mendefinisikan situs
dengan menggunakan kotak dialog Site Definition.
Ada 2 cara yang dapat dikerjakan yaitu:
Basic : pilihan yangmemberikan kemudahan bagi anda dalam menyiapkan situs.
Advance : pilihan bila sudah paham betul akan konsep yang berlaku dalam
Dreamweaver.
Langkah-langkah pengaturan untuk mendefinisikan site dengan versi Basic sbb:
1. Pilih menu Site > Manage Sites, akan muncul kotak dialog Manage Sites.
2. Untuk membuat situs baru pilih tombol New lalu akan muncul menu melayang Site dan
FTP &RDS Server. Pilihan Site untuk membuat situs local, sedangkan pilihan kedua
bekerja dengan FTP.
3. Masukkan nama situs pada kotak teks yang disediakan.
4. Klik Next, muncul kotak dialog kedua diminta untuk memilih tipe dokumen,
No : memilih situs statis tanpa halaman dinamis.
Yes: memilih dokumen dinamis (contoh dok dinamis: Microsoft Active Server
Pages/ASP, J SP, PHP)
5. Klik Next, anda dapat memilih pilihan pertama, Edit local copies on my machine,..
Setelah itu tentukan tempat penyimpanan file pada harddisk anda bisa mengetikkan
foldernya atau mengklik ikon folder.
6. Klik Next, pada bagian kotak dialog ini anda diminta untuk menentukan web server, bila
menggunakan situs local dan belum terkoneksi dengan web server maka pilih
Local/Network.Klik Next, lalu klik Done
7. Sekarang Files panel menampilkan root folder local untuk situs anda
Membuat Dokumen Baru
Untuk membuat dokumen HTML baru gunakan perintah File > New (Ctrl + N). Akan
muncul kotak dialog New Document, pastikan pada tab General.
Kategori diberikan pilihan dalam membuat dokumen yang diinginkan. Sedangkan pada Basic
Page berisi pilihan-pilihan dokumen kosong sesuai dengan tipenya.
Kategori Dynamic Page anda bisa membuat dokumen dengan fasilitas ASP, PHP, J PS..
Kategori Template Page anda bisa membuat dokumen template
Kategori Framesets untuk membuat hal web dengan menggunakan fasilitas frame
Kategori Page Designs membuat dokumen dengan tampilan yang sudah disediakan


Heri Susanta, S.Pd.T SMA Negeri 8 Yogyakarta
6
Mengelola Situs
Setelah anda menentukan pilihan dokumen serta tipe yang akan dibuat, anda juga perlu
memahami bagaimana melakukan penyuntingan situs, penghapusan situs, dan menduplikasikan
situs.

Mengedit Situs
Langkahnya:
1. Pastikan aktif di jendela program Dreamweaver
2. Pilih menu Site > Manage Sites
3. Selanjutnya akan muncul kotak dialog Manage Sites. Pilih situs yang akan diedit lalu
tekan tombol Edit. J ika sudah selesai pengeditan klik Done.
Menghapus Situs
1. Pastikan aktif di jendela program Dreamweaver
2. Pilih menu Site > Manage Sites
3. Selanjutnya akan muncul kotak dialog Manage Sites. Pilih situs yang akan dihapus lalu
tekan tombol Remove. Lalu pilih Yes untuk menghapusnya.
Membuat Duplikasi Situs
1. Pastikan aktif di jendela program Dreamweaver
2. Pilih menu Site > Manage Sites
3. Selanjutnya akan muncul kotak dialog Manage Sites. Pilih situs yang akan diduplikasi
lalu tekan tombol Duplicate.
Mengenal Files Panel
Files Panel yang disediakan merupakan fasilitas untuk mengorganisasi file-file dalam
situa, menangani hubungan antara situs local dan situs remote (file-file situs yang ada pada server
web) dan untuk melihat atau menangani struktur situs, anda bisa menggunakan situs map.
Window > Files (F8).
Melihat Situs Lokal
File-file yang berada pada situs local anda dapat ditampilkan sebagai daftar file, map,
atau kedua-duanya. Sedangkan situs remote hanya dapat ditampilkan sebagai daftar file.

Prosedur untuk melihat file-file di situs local:
1. Pastikan anda aktif pada Files Panel
2. Klik kanan Select > Newer Remote.
Prosedur untuk melihat struktur dan file situs :
1. Pastikan aktif pada Files Panel
2. Klik kotak Site Files View > Site Map
Pada site map menampilkan hubungan antar halaman, dimana hubungan link tersebut
dihubungkan pada kode HTML sumber, seperti:
Teks berwarna merah mempunyai arti link rusak.
Teks berwarna biru dengan ikon globe mempunyai link khusus.
Sebuah tanda cek hijau artinya sebuah file telah anda pilih.
Sebuah tanda cek merah artinya sebuah file telah dipilih oleh orang lain.
Sebuah ikon yang mempunyai tanda kunci merupakan file yang mempunyai sifat Read
Only (window)



Heri Susanta, S.Pd.T SMA Negeri 8 Yogyakarta
7
Bekerja dengan toolbar pada Files Panel
Toolbar merupakan sekumpulan tombol perintah yang terletak dalam sebuah bidang
baris.

Keterangan:
1. Menu pop-up Site : menampilkan nama-nama situs yang telah didefinisikan.
2. Menu pop-up view : menampilkan lokasi atau tempat situs anda berada.
3. Connect/Disconnect : melakukan koneksi atau diskoneksi dari situs remote.
4. Refresh : digunakan untuk melakukan refresh secara manual daftar file dari situs local
dan remote.
5. Get File : untuk menyalin file yang dipilih dari situs remote atau testing ke situs local.
6. Put File : untuk menyalin file dari situs local ke situs remote.
7. Check Out File : untuk transfer copy dari file situs remote ke situs local.
8. Check In File : untuk transfer copy file local ke remote server dan membuat file dapat
diedit oleh yang lain. File local menjadi read-only.
9. Expand/Collapse : untuk mengatur ukuran tampilan site panel.

III. MENDESAIN HALAMAN WEB
Mendesain halaman web merupakan perpaduan dari seni, ilmu pengetahuan, dan
ketrampilan. Suatu situs yang baik memiliki kesatuan desain, atau dapat juga dikatakan
mempunyai kesamaan tema dalam halaman-halamannya. Hal ini dimaksudkan agar
pengunjung dapat dengan mudah memahami isi halaman situs. Kesamaan tema dalam setiap
halaman mempunyai nilai penting dalam segi estetika maupun navigasi.
Dalam pendesainan halaman web, kesamaan yang perlu dipertahankan meliputi jenis
font dan warna yang digunakan, baik warna halaman maupun pada bagian tertentu.
Mengatur Properti halaman web
Properti halaman ini akan ikut menentukan bagus tidaknya desain yang dihasilkan.
Anda dapat mengatur judul halaman, latar belakang warna dan gambar halaman, warna teks
dan link serta margin halaman web. Untuk menampilkan page properties : Modify > Page
Properties (Ctrl +J )


Dalam page properties ada 5 kategori :
1. Appearance : untuk mengatur jenis font untuk halaman, menentukan style font, ukuran
font, warna font, warna latar belakang, menampilkan gambar untuk latar belakang, serta
dapat menentukan ukuran margin halaman.
2. Links : untuk menentukan jenis font untuk teks link, ukuran font, mengubah warna untuk
teks link, mengubah warna untuk teks yang telah dikunjungi (Visited Links), warna

Heri Susanta, S.Pd.T SMA Negeri 8 Yogyakarta
8
yang akan digunakan pada link yang sedang ditunjuk (Active Links), warana yang
digunakan pada link saat pointer mouse melewati teks links (Rollover Links).
3. Headings : untuk menentukan sendiri style yang digunakan untuk teks naskah anda.
4. Title/Encording : untuk memberikan judul halaman pada bagian Title.
5. Tracing Image : untuk menampilkan tampilan gambar sementara pada latar belakang.
Menggunakan Fasilitas Tabel
Dalam membuat sebuah tampilan halaman web, anda dapat membuatnya dengan
menggunakan beberapa alternative, antara lain menggunakan media cetak dan media web. Pada
media cetak pembuatannya menggunakan software seperti Adobe PageMaker, CorelDraw, dan
Quark Xpress.
Sedangkan pada media web anda bisa menggunakan tabel sebagai desainnya, dalam
Dreamweaver tabel yang yang digunakan ada dua jenis yaitu tabel biasa dan layout tabel.
Membuat tabel
Tabel biasa adalah sebuah tabel sederhana yang biasa anda buat melalui program Ms.
Word dan tabel biasa ini merupakan inti dari tabel layout yang akan anda buat. Langkah untuk
membuat tabel biasa sbb:
1. Pastikan aktif di jendela Dreamweaver
2. Letakkan kursor pada lembar kerja document window.
3. Pilih menu Insert > Table. Akan muncul kotak dialog tabel

Tabel size : untuk menentukan jumlah baris dan kolom, lebar tabel, border tabel, spasi
antar sel, spasi antara sel dengan batas tepi sel.
Header : untuk memberikan keterangan teks pada bagian tabel sesuai dengan pilihan
yang tersedia.
Accessbility : untuk memberikan keterangan judul tabel pada kotak teks Caption. Untuk
perataan teksnya dapat memilih Align Caption.
Biasanya tabel yang digunakan untuk keperluan layout memiliki tabel border 0 supaya
tidak tampak pada saat dijalankan. Untuk mengatur dan memodifikasi border dan lainnya anda
dapat mengaturnya melalui property tabel pada Property Inspector (Window > Properties)
yang terletak di bawah document window.



Heri Susanta, S.Pd.T SMA Negeri 8 Yogyakarta
9
Membuat Tabel di dalam Tabel
Di dalam mengatur halaman web, anda dapat menggunakan tabel. Agar kelihatan rapi,
tidak salahnya anda memasukkan sebuah tabel ke dalam tabel yang sudah dibuat. Langkahnya :
1. Buatlah sebuah tabel.
2. Letakkan pointer mouse di salah satu sel.
3. Pilih menu Insert > Tabel. Tentukan baris dan kolom yang ingin disisipkan.
Menggunakan Format Tabel
Langkah untuk menggunakan format tabel sbb:
1. Pilih tabel yang ingin diformat.
2. Pilih menu Commands > Format Table sehingga muncul kotak dialog Format Table.
Pada kotak tersebut akan tampil pilihan tipe format tabel.

Mengurutkan Isi Tabel
Pengurutan isi tabel hanya dapat dijalankan jika tabel tersebut utuh, tidak mengandung sel
gabungan, baik pada baris pertama maupun baris terakhir. Langkahnya sbb:
1. Pilih tabel yang akan diurutkan
2. Pilih menu Command > Sort Table akan muncul kotak dialog Sort Table.



Heri Susanta, S.Pd.T SMA Negeri 8 Yogyakarta
10
IV. BEKERJA DENGAN TEKS
Teks memegang peran yang sangat penting dalam situs web. Setiap situs web pasti
memiliki unsur teks. Oleh karena itu pengelolaan dan pengaturan tampilan teks sangat
penting untuk diperhatikan. Anda dapat memformat teks di dreamweaver dengan kode
HTML maupun dengan CSS. Anda dapat memformat teks sama seperti anda melakukannya
pada program MS. Word.
Menyisipkan Teks
Anda dapat menyisipkan teks pada halaman web, tabel maupun layer. Langkahnya:
1. Pastikan aktif pada document window. Letakkan kursor pada lembar kerja document
window.
2. Ketik teks yang diinginkan.
3. Untuk mengatur jarak antar paragraph, ada 2 cara, yaitu dengan Enter atau Shift +
Enter. Enter memberi jarak lebih lebar dibanding Shift +Enter.
Memformat Teks
Anda dapat memformat teks yang sudah anda sisipkan dengan Property Inspector.
Pada property tersebut anda dapat mengubah jenis font, warna, atau ukuran font.

Membuat List
List digunakan untuk memformat tampilan untuk daftar item. List ada 3 macam, yaitu list
yang berurutan, list tidak berurutan dan list definisi. Untuk membuat list baru langkahnya:
1. Pastikan aktif pada jendela document window.
2. Tempatkan kursor pada lembar kerja yang diinginkan.
3. Untuk membuat list pilih menu Text > List.
4. Ketik daftar pertama yang anda inginkan pada kursor aktif
5. Tekan enter untuk menampilkan item berikutnya. Setelah daftar terakhir selesai ditulis,
lalu tekan enter 2 kali untuk mengakhiri.
Untuk mengatur property list pilih menu Text > List > Properties.
Menyisipkan karakter khusus
Karakter khusus yang dimaksud di sini adalah karakter yang memiliki kode khusus
dan karakter ini tidak ditemukan pada tombol keyboard. Caranya : pilih menu Insert >
HTML > Special Character.
Memasukkan Tanggal ( Insert > Date )
Membuat sebuah Link pada Teks.
Link adalah suatu teks atau gambar yang dipakai dalam dokumen HTML untuk
melompat dari satu dokumen ke dokumen atau ke tempat lain pada dokumen yang sama.
Anda dapat menggunakan teks yang ada di dalam halaman web dan juga dapat membuat teks
khusus untuk digunakan membuat link. Menggunakan link pada teks yang sudah ada,
langkahnya :
1. Pilihlah teks yang ingin anda buat link
2. Masukkan alamat halaman atau situs di dalam kotak teks pada property Link di Property
Insepctor.
3. Tentukan tempat penampilan halaman web anda setelah melakukan link dengan memilih
pada kotak list Target.






Heri Susanta, S.Pd.T SMA Negeri 8 Yogyakarta
11
V. BEKERJA DENGAN GAMBAR
Gambar merupakan elemen penting dalam sebuah halaman web. Dengan
menggunakan gambar, tampilan halaman web menjadi lebih menarik dan komunikatif.
Gambar memegang peranan dalam pembuatan user interface, presentasi, catalog produk,
dsb. Gambar yang digunakan untuk user interface sering disebut sebagai button atau tombol.
Tombol ini juga dapat membentuk navigation bar yang sangat penting sebagai alat navigasi
dalam situs web.
Ada 3 tipe gambar yang digunakan di halaman web, yaitu J PEG (J oint Photographic
Experts Group), GIF (Graphic Interchange Format), dan PNG (Portable Network Group).
File gambar PNG hanya dapat ditampilkan pada browser versi 4 ke atas

Memasukkan Gambar
Sebelum memasukkan gambar ke dalam halaman web, ada baiknya anda
membiasakan untuk menyimpan file gambar yang akan dimasukkan untuk mencegah
penggunaan path file:// pada gambar yang dapat menyebabkan gambar tidak ditampilkan
sewaktu dijalankan di browser secara online. Selain itu anda juga harus menyimpannya ke
dalam folder gambar pada direktori di mana situs web dibuat. Untuk menyisipkan gambar ke
document window caranya :
Pilih menu Insert > Image, akan muncul kotak dialog. Pilih File System untuk memilih file
grafik/gambar atau pilih Data Source untuk memilih sumber data gambar.

Mengatur Properti Gambar
Setelah gambar disisipkan dalam halaman web, akan tampil sebuah Property
Inspector jika gambar dalam keadaan terpilih.


Membuat Link pada Gambar
Menbuat link pada gambar tidaklah sulit, sama seperti pembuatan link pada teks.
Anda tinggal menghubungkan gambar dengan alamat halaman atau situs. Caranya isikan

Heri Susanta, S.Pd.T SMA Negeri 8 Yogyakarta
12
alamat halaman atau situs di dalam kotak teks pada property Link di bagian Property
Inspector. Lalu tentukan Target dengan memilih kotak Target


Membuat Image Map
Image Map adalah suatu gambar yang memiliki daerah tertentu, dimana pada daerah
tersebut dapat diberi link. Dalam satu gambar dapat memberikan link lebih dari 2, tergantung
kebutuhan. Dreamweaver menyediakan piranti khusus yang digunakan untuk membuat image
map. Ada 3 image map yang dapat digunakan yaitu:
1. Rectangular hotspot tool, digunakan untuk membuat daerah link dengan bentuk
rectangular atau kotak.
2. Oval hotspot tool, digunakan untuk membuat daerah link dengan bentuk oval atau
lingkaran..
3. Polygon hotspot tool, digunakan untuk membuat daerah link dengan bentuk polygon
atau bentuk tak beraturan.
Untuk membuat area image map, lakukan langkah berikut:
1. Sisipkan sebuah gambar sebagai media untuk meletakkan image map.
2. Pada property gambar, tampilkan kotak property lanjutan untuk gambar yang
menampung image map dengan mengklik tombol panah kecil di ujung kanan bawah
property gambar.
3. Pilih salah satu tombol image map yang sudah disediakan pada bagian property lanjutan
gambar.
4. Pada saat anda klik salah satu image map, pointer mouse akan berubah menjadi tanda +.
Arahkan pointer mouse anda pada gambar yang tersedia dan geser pada salah satu bagian
gambar tersebut.
5. Setelah anda membuat area image map, akan tampil kotak property baru yang disebut
dengan Property Hotspot. Pada kotak property ini anda dapat menentukan link ke alamat
halaman atau situs, menentukan target tampilan dan memberikan keterangan untuk
hotspot.


6. Untuk mengatur area image map, klik tombol pointer hotspot tool . Setelah itu anda
dapat memindah atau menggeser area image map atau mengatur besar kecil area image
map dengan menggeser handle pada area image map.













Heri Susanta, S.Pd.T SMA Negeri 8 Yogyakarta
13
VI. BEKERJA DENGAN FRAME
Frame merupakan sebuah teknologi yang biasa dipakai untuk menggabungkan
beberapa halaman web menjadi satu halaman web yang utuh. Dapat juga dikatakan bahwa
frame merupakan sarana untuk membagi halaman web menjadi beberapa bagian.
Frame mempunyai kelebihan yang tidak ditemukan pada tabel maupun layer. Dengan
menggunakan frame anda dapat menampilkan beberapa halaman web sekaligus dalam
document window. Anda dapat juga menampilkan halaman web permanent, tidak berubah-
ubah, seperti pada halaman judul, menu, logo dan banner.
Dengan menggunakan frame sebagai pembagi halaman, anda dapat mengurangi
beban server dalam menjalankan pemrosesan karena server hanya perlu bekerja sekali saja
dalam menampilkan halaman web tersebut.

MENYISIPKAN FRAME
1. Aktifkan kursor pada document window.
2. Pilih menu Insert > HTML > Frames, pilih salah satu frameset yang tersedia pada
submenu Frames.
3. Untuk menambahkan frameset lagi, ulangi perintah penyisipan di atas.

MENDESAIN FRAMESET SENDIRI
Untuk membuat frameset sendiri, anda harus mengaktifkan Frame Borders ( View >
Visual Aids > Frame Borders ). Langkah-langkah untuk membuat frameset sendiri:
1. Pastikan aktif pada document window.
2. Pilih menu Modify > Frameset.
3. Selanjutnya anda dapat memilih Frameset yang tersedia:
Split Frame Left dan Split Frame Right untuk membagi frame dengan pola vertical.
Split Frame Up dan Split Frame Down untuk membagi frame dengan pola
horizontal.
4. Untuk menggeser border frame, anda dapat menggunakan pointer mouse.
5. Untuk membuat frame baru dari frame yang sudah ada, gunakan kombinasi tombol
Alt+drag.
6. Untuk memilih dan memodifikasi frame, anda dapat mengaktifkan Frame Panel
(Shift+F2)

MENYIMPAN FRAME
Setiap frame yang anda buat harus anda simpan satu per satu lalu menyimpan
framesetnya. Untuk menyimpan frame dan frameset, lakukan langkah berikut:
1. Aktifkan salah satu bagian di dalam frame.
2. Pilih menu File > Save Frame.
3. Ketik nama lalu tekan tombol Save.
4. Ulangi kembali langkah di atas sampai frame yang anda buat tersimpan semua.
5. Penyimpanan yang terakhir adalah penyimpanan untuk framesetnya. Pilih border terluar
dari frame sehingga yang terpilih adalah framesetnya.
6. Pilih menu File > Save Frameset.

MENGHAPUS FRAME.
1. Arahkan pointer mouse pada border frame yang ingin dihapus.
2. Geser border frame keluar dari area document window.

MENGATUR PROPERTI FRAME DAN FRAMESET
Untuk membedakan antara frame dan frameset, aktifkan Frames panel. Frameset
adalah suatu frame induk yang dapat menampung beberapa frame lain di dalamnya dan dapat
memiliki beberapa frameset yang lainnya. Sedangkan frame adalah dokumen yang terdapat
di dalam frameset dengan border yang mengelilinginya.

Heri Susanta, S.Pd.T SMA Negeri 8 Yogyakarta
14
Mengatur Properti Frame
Untuk memilih frame melalui document window, anda dapat melakukannya dengan
menggunakan kombinasi Alt + Klik pada frame yang diinginkan.. Selanjutnya akan tampil
property frame pada Property Inspector.


Properti Nama Keterangan
Frame name Frame name
Digunakan untuk mengisikan nama frame.
Pemberian nama sangat penting karena untuk
referensi script dan target hyperlink. Di
dalam pemberian nama frame, tidak ada
spasi, dan harus merupakan kata tunggal,
tidak boleh mengandung tanda minus dan
titik, nama harus diawali dengan huruf,
bukan angka.
Src Frame source
Digunakan untuk menentukan sumber
dokumen frame.
Scroll Frame scrollbars
Digunakan untuk menampilkan scroll atau
batang penggulung pada frame.
No Resize Disable frame resize
Digunakan untuk menonaktifkan perubahan
ukuran pada frame. J ika pilihan ini dalam
keadaan tercentang, anda tidak dapat
mengubah ukuran frame pada browser.
Properti Nama Keterangan
Borders 3D border
Digunakan untuk mengatur border pada
frame.
Border Color Frame border color
Digunakan untuk mengatur warna pada
border
Margin Width
Margin width in
pixels
Digunakan untuk mengatur batas kanan dan
kiri margin
Margin Height
Margin height in
pixels
Digunakan untuk mengatur jarak margin atas
dan bawah pada frame.

Mengatur Properti Frameset
Setelah selesai mengatur property frame, anda dapat mengatur property frameset.
Untuk mengatur property frameset, sebelumnya aktifkan dulu frameset-nya. Anda dapat
langsung memilih pada document window dengan mengklik salah satu border framenya.
Selanjutnya akan tampil property frameset pada Property Inspector.



Heri Susanta, S.Pd.T SMA Negeri 8 Yogyakarta
15
Properti Nama Keterangan
Border 3D border
Digunakan untuk mengatur tampilan
border frameset, apakah untuk
ditampilkan atau disembunyikan.
Border Width Border width in pixels
Digunakan untuk mengatur lebar smua
border pada frameset.
Border Color Frameset color
Digunakan untuk mengatur warna pada
border frameset.
Column Row/column size
Digunakan untuk mengatur tinggi baris
atau lebar kolom yang dipilih.
Pixels Row/column size units
Digunakan untuk mengatur ukuran
lebar dan tinggi frame.

RowCol Selection
Digunakan untuk memilih bagian
kolom atau bagian baris dengan klik
bagian tabulasi di bagian atas dan
samping tampilan.

MENGATUR PROPERTI HALAMAN FRAME
Sudah dijelaskan di atas bahwa setiap frame terdiri dari file dokumen htm/html
sehingga anda dapat mengatur property halaman untuk setiap frame. Anda dapat
mengaturnya seperti anda mengatur jendela dokumen, yaitu:
1. Pastikan anda aktif pada frame yang diinginkan.
2. Pilih menu Modify > Page Properties atau klik kanan pada halaman frame dan pilih
Page Properties.
3. Dari tampilan Page Properties, lakukan beberapa perintah format yang anda inginkan.
4. Untuk menyetujui, klik OK.

VII. BEKERJA DENGAN FORM
Fasilitas Form memudahkan anda dalam berkomunikasi di dalam dunia web. Dengan
menggunakan form anda dapat mengumpulkan informasi dari pengunjung dan melakukan
beberapa interaksi dengan mereka. Form dapat terdiri dari beberapa objek yang disusun
menjadi sebuah model pengisian atau dapat juga disebut sebagai formulir online.
Ketika pengunjung memasukkan informasi ke dalam sebuah model form di dalam
situs web dan menenkan tombol submit, informasi tadi akan terkirim ke server dan akan
diproses. Server akan merespon pengiriman tadi dengan membalas atau melakukan tindakan
lain sesuai dengan apa yang diinginkan pengunjung. Biasanya informasi ini diproses dengan
menggunakan script Common Gateway Interface (GGI), halaman ColdFusion, J avaServer
Page (J SP), atau dengan Active Server Page (ASP).
Beberapa objek yang terdapat pada form antara lain adalah text field, list box, check
box, menu pop-up, field password, image field, button, dan radio button.


MENYISIPKAN FORM
Untuk menempatkan objek form yang ingin anda sisipkan, terlebih dahulu anda harus
menyiapkan sebuah wadah untuk menampung objek form tersebut. Wadah yang dimaksud
adalah form itu sendiri. J ika anda menyisipkan objek tanpa menempatkannya ke dalam
wadah, maka informasi yang anda masukkan di dalam form tersebut tidak akan dapat
terkirim.
Lakukan langkah berikut untuk membuat sebuah form:
1. Pastikan anda aktif pada document window.

Heri Susanta, S.Pd.T SMA Negeri 8 Yogyakarta
16
2. Aktifkan tabulasi Form pada Insert Bar.
3. Klik ikon Form atau geser ikon tersebut ke dalam document window.
4. Anda juga dapat menyisipkan form dengan menu Insert > Form.
5. Pada document window akan tampil sebuah objek form dengan tampilan garis putus-
putus berwarna merah.
6. Pada bagian Property Inspector akan tampil property form.


Berikut ini penjelasan atas masing-masing bagian dari property form:
Form name digunakan untuk memberi nama form.
Action digunakan untuk menentukan lokasi atau path file yang akan digunakan untuk
memproses form.
Method digunakan untuk menentukan metode pengiriman data form. Di dalam property
Method terdapat beberapa pilihan, yaitu:
Default: jika anda memilih default, maka metode pengiriman data form akan
disesuaikan dengan setting default browser.
GET: untuk pilihan GET, metode pengiriman data form akan ditambahkan pada
URL request.
POST: pada metode pengiriman POST, data form anda akan disisipkan pada
HTTP request.
Target digunakan untuk menentukan frame atau window yang menjadi tempat untuk
menampilkan target hyperlink.
Enctype digunakan untuk menentukan tipe MIME encoding yang diinginkan. Biasanya
digunakan untuk file upload.
J ika anda menginginkan tampilan form yang rapi, ada baiknya anda menambahkan
tabel di dalam form sebagai tempat meletakkan objek form.

Menyisipkan Text Field
Text Field merupakan sarana untuk memasukkan teks ke dalam form. Text Field ini
untuk menampung infromasi yang berupa teks atau karakter lainnya, seperti nama seseorang,
alamat, e-mail, komentar, dsb.
Langkah untuk menyisipkan sebuah text field :
1. Aktifkan pointer mouse anda di dalam form yang sudah disediakan.
2. Pilih menu Insert > Form > Text Field atau klik tombol ikon text field pada Insert Bar.
3. Pada Property Inspector tampil property Text Field.

Ada 3 tipe Text Filed, yaitu:
Single Line
Secara default saat menyisipkan Text Field, yang akan ditampilkan adalah tipe
pertama, yaitu Single Line. Tipe ini berupa kotak teks satu baris yang biasa digunakan untuk
menampung nama, alamat, e-mail, dsb.
Untuk property Text Field, tipe Single Line dan Password mempunyai property yang sama,
yaitu:


Heri Susanta, S.Pd.T SMA Negeri 8 Yogyakarta
17
Properti Keterangan
TextField Untuk memasukkan nama dari text field.
Char width
Untuk menentukan jumlah karakter maksimum yang dapat
ditampilkan pada kotak teks.
Max chars
Untuk menentukan panjang maksimum karakter yang dapat
ditampung di dalam kotak teks.
Type
Pada property text field secara default akan terpilih Single
Line.
Init Val
Untuk memasukkan nilai default kotak teks sehingga saat
dijalankan di browser akan berisi nilai yang dimasukkan.

Multi Line
Tipe Text Field yang menyediakan kotak teks dengan beberapa baris di dalamnya.
Anda dapat memasukkan keterangan yang panjang pada kotak teks ini, misalkan untuk
keterangan, komentar, dsb.
Properti pada Multi Line berbeda dengan yang ada pada property Single Line :
Properti Keterangan
Num Lines Untuk menentukan jumlah baris pada kotak teks.
Wrap
Untuk menentukan tipe pelipatan teks. Ada 3 jenis, yaitu:
Off dan Default, Virtual, dan Physical.
Initial Value
Untuk memasukkan nilai default kotak teks sehingga saat
dijalankan di browser akan berisi nilai yang dimasukkan.

Password
Tipe Text Field ini biasanya dipakai pada suatu halaman web yang memerlukan suatu
pengaman agar hanya orang tertentu saja yang dapat mengakses halaman tersebut.

Menyisipkan Hidden Field
Sebetulnya Hidden Field ini banyak dipergunakan. Biasanya Hidden Field ini
digunakan untuk mengumpulkan informasi tentang pengunjung. Saat anda membuat sebuah
Hidden Field akan tampil tanda ikon yang menyatakan adanya sebuah Hidden. Pada saat
anda jalankan di browser, Hidden Field tidak akan ditampilkan.
Untuk menyisipkan Hidden Field:
1. Tempatkan form ke dalam document window.
2. Pilih menu Insert > Form > Hidden Field.
3. Pada property Inspector akan ditampilkan property Hidden Field.
4. Isikan nama Hidden Field, kemudian isikan juga nilai pada bagian Properti value.




Menyisipkan Text Area
Bentuk tampilan dari text area sama persis dengan tampilan text field tipe Multi Line
atau dapat juga dikatakan bahwa TextArea merupakan nama lain dari Text Field tipe Multi
Line. Untuk menyisipkan TextArea, pilih menu Insert > Form Objects > TextArea.
Menyisipkan Checkbox
Checkbox adalah sebuah kotak dimana pengunjung dapat memilih salah satu
informasi yang disediakan. Cara menyisipkan checkbox sbb:

Heri Susanta, S.Pd.T SMA Negeri 8 Yogyakarta
18
1. Pilih menu Insert > Form > CheckBox
2. Sebuah kotak kecil akan ditampilkan pada document window, tepat di mana
menempatkan pointer mouse.
3. Anda dapat menyisipkan beberapa Checkbox sesuai kebutuhan. J ika anda menggunakan
beberapa checkbox sebagai pilihan, tempatkan checkbox ke dalam sebuah tabel agar
tersusun rapi.
Pada Property Inspector akan tampil property Checkbox.


Properti Keterangan
CheckBox Untuk memberikan nama pada field checkbox
Checked Value
Untuk memberikan sebuah nilai pada Checkbox pada saat
checkbox terpilih.
Initial State
Untuk menentukan apakah Checkbox tersebut secara default
sudah terpilih atau belum.

Menyisipkan Radio Button
Radio Button mempunyai fungsi yang sama dengan Checkbox yaitu untuk
menentukan pilihan dari suatu daftar pilihan. Bedanya, pada radio button kita hanya dapat
memilih satu pilihan saja. Cara penyisipan radio button:
1. Tempatkan pointer mouse pada form yang sudah disiapkan.
2. Pilih menu Insert > Form > Radio Button. Akan tampil sebuah lingkaran kecil pada
bagian form dan kemudian isikan sebuah informasi yang akan digunakan sebagai
keterangan pada bagian kanan radio button
3. Anda dapat menyisipkan kembali beberapa radio button sesuai kebutuhan.
Anda dapat mengatur property radio button lewat Property Inspector. Tampilan
property radio button sama seperti property Checkbox. Anda dapat memasukkan nama untuk
field radio button pada kotak teks RadioButton, kemudian ketik nilai Radio Button pada
bagian Checked Value dan tentukan pilihan untuk Initial State, Checked atau Unchecked.


Menyisipkan Radio Group
Radio Group merupakan kumpulan dari beberapa Radio Button. Dalam proses
pembuatannya, anda tidak perlu menyisipkan radio button satu per satu ke dalam document
window. Anda cukup memasukkan label dan nilai dari radio button tersebut pada bagan yang
sudah tersedia. Caranya :








Heri Susanta, S.Pd.T SMA Negeri 8 Yogyakarta
19
Pilih menu Insert > Form > Radio Group. Selanjutnya akan tampil sebuah kotak dialog
untuk mengisikan parameter.

Langkah untuk mengisikan parameter sbb:
1. Yang pertama isikan nama untuk Radio Button pada bagian Name.
2. Lalu isikan label dan value. Klik bagian radio dan kemudian anda ketikan sebuah kata di
dalamnya.
3. J ika anda ingin menambah lagi, gunakan tombol +yang terletak pada bagian atas daftar
parameter. Apabila ingin menghapus gunakan tombol -.
4. Pada bagian Lay Out Using, pilih Line Break [<br>Tags] untuk menempatkan Radio
button pada baris baru, atau pilih Table untuk menempatkan radio button pada sebuah
tabel.

Menyisipkan List/Menu
Selain dalam bentuk tombol, seperti Checkbox atau Radio Button, anda juga dapat
menampilkan pilihan dalam bentuk list atau menu.
Menggunakan List sebagai Pilihan
List digunakan untuk menampilkan banyak pilihan, baik pilihan tunggal maupun
ganda. Dengan menggunakan list, anda dapat memilih beberapa pilihan sekaligus seperti
pada Checkbox. Untuk memilih lebih dari satu pilihan, anda dapat menggunakan tombol
Shift atau Ctrl.
Langkah untuk menyisipkan list sbb:
1. Pilih menu Insert > Form > List/Menu.
2. Pada property list/menu, pastikan pilihan type berada pada Type List.

3. Isikan nama untuk List pada kotak List/Menu.
4. Kemudian tentukan jumlah baris yang akan ditampilkan pada kotak teks Height.
5. J ika anda menginginkan agar pengunjung dapat memilih lebih dari satu pilihan,
aktifkan kotak centang Selections.
6. Untuk menambah atau mengurangi isi list, tampilkan kotak dialog List Values dengan
mengklik tombol List Values.

7. Anda dapat memasukkan pilihan pada bagian kolom item label dan nilai pada bagian
value. Item yang anda masukkan akan ditampilkan pada bagian Initially Selected.




Heri Susanta, S.Pd.T SMA Negeri 8 Yogyakarta
20
Menggunakan Menu sebagai Pilihan
Sama halnya dengan List, menu merupakan sebuah objek yang digunakan untuk
menampung beberapa pilihan dalam bentuk drop-down. Untuk menu ini hanya dapat memilih
satu pilihan saja. Menu mempunyai fungsi yang sama seperti Radio Button. Anda dapat
menyisipkan menu dengan langkah sbb:
1. Pilih menu Insert > Form > List/Menu.
2. Pada property List/Menu pastikan pilihan Type berada pada Type Menu.
3. Isikan nama menu pada kotak teks List/Menu. Namanya harus unik.
4. Untuk menambahkan atau mengurangi isi list, dapat tampilkan kotak dialog List Values
dengan klik tombol List Values.
5. Anda dapat memasukkan item ke dalam pilihan pada bagian kolom item label dan ketik
nilai pada bagian value. Tombol +untuk menambah item dan tombol untuk menghapus
item.
6. Item yang anda masukkan akan ditampilkan pada bagian Initially Selected.

Menyisipkan File Field
File field digunakan untuk meng-upload suatu file ke server. File yang dapat di-
upload melalui File Field ini antara lain file dokumen, file gambar, dan juga file-file lainnya.
Anda dapat menggunakan method Post atau IIS untuk action dari form.
Tampilan File field ini mirip dengan Text Field. Hanya saja di sebelah kanan objek
file field terdapat sebuah tombol bernama Browse. Tombol ini berfungsi untuk mencari file
yang akan di-upload. Namun demikian anda juga dapat langsung mengetikkan nama file
tersebut langsung pada kotak teks.
Untuk menyisipkan objek File Field :
1. Tempatkan mouse pointer dalam form yang sudah disiapkan.
2. Pilih menu Insert > Form > File Field.
3. Kemudian aturlah propertinya.

4. Masukkan nama file field pada kotak teks filefieldname
5. Tentukan jumlah karakter yang dapat ditampilkan dalam kotak teks Char width.
6. Tentukan juga jumlah karakter yang dapat ditampilkan ke dalam kotak teks Max Chars.

Menyisipkan Button
Button merupakan sebuah tombol yang dapat digunakan untuk melakukan proses
tertentu, misalkan untuk submit atau reset. Kedua tombol tersebut digunakan untuk sebuah
proses di dalam form. Tombol submit untuk mengirimkan data yang dimasukkan ke dalam
form selanjutnya dan diolah di dalam server. Sedangkan tombol reset untuk mereset atau
mengosongkan data yang ada di dalam form hingga kembali ke nilai default.
Untuk menyisipkan sebuah Button:
1. Pilih menu Insert > Form > Button.
2. Ketik nama button pada bagian button name.
3. Untuk memberikan nama button, ketikkan pada kotak teks label. Nama tersebut akan
ditampilkan pada button.
4. Tentukan pula actionnya, pilih Submit atau Reset.






Heri Susanta, S.Pd.T SMA Negeri 8 Yogyakarta
21
VI. BEKERJA DENGAN FRAME
Frame merupakan sebuah teknologi yang biasa dipakai untuk menggabungkan
beberapa halaman web menjadi satu halaman web yang utuh. Dapat juga dikatakan bahwa
frame merupakan sarana untuk membagi halaman web menjadi beberapa bagian.
Frame mempunyai kelebihan yang tidak ditemukan pada tabel maupun layer. Dengan
menggunakan frame anda dapat menampilkan beberapa halaman web sekaligus dalam
document window. Anda dapat juga menampilkan halaman web permanent, tidak berubah-
ubah, seperti pada halaman judul, menu, logo dan banner.
Dengan menggunakan frame sebagai pembagi halaman, anda dapat mengurangi
beban server dalam menjalankan pemrosesan karena server hanya perlu bekerja sekali saja
dalam menampilkan halaman web tersebut.

MENYISIPKAN FRAME
1. Aktifkan kursor pada document window.
2. Pilih menu Insert > HTML > Frames, pilih salah satu frameset yang tersedia pada
submenu Frames.
3. Untuk menambahkan frameset lagi, ulangi perintah penyisipan di atas.

MENDESAIN FRAMESET SENDIRI
Untuk membuat frameset sendiri, anda harus mengaktifkan Frame Borders ( View >
Visual Aids > Frame Borders ). Langkah-langkah untuk membuat frameset sendiri:
1. Pastikan aktif pada document window.
2. Pilih menu Modify > Frameset.
3. Selanjutnya anda dapat memilih Frameset yang tersedia:
Split Frame Left dan Split Frame Right untuk membagi frame dengan pola vertical.
Split Frame Up dan Split Frame Down untuk membagi frame dengan pola
horizontal.
4. Untuk menggeser border frame, anda dapat menggunakan pointer mouse.
5. Untuk membuat frame baru dari frame yang sudah ada, gunakan kombinasi tombol
Alt+drag.
6. Untuk memilih dan memodifikasi frame, anda dapat mengaktifkan Frame Panel
(Shift+F2)

MENYIMPAN FRAME
Setiap frame yang anda buat harus anda simpan satu per satu lalu menyimpan
framesetnya. Untuk menyimpan frame dan frameset, lakukan langkah berikut:
1. Aktifkan salah satu bagian di dalam frame.
2. Pilih menu File > Save Frame.
3. Ketik nama lalu tekan tombol Save.
4. Ulangi kembali langkah di atas sampai frame yang anda buat tersimpan semua.
5. Penyimpanan yang terakhir adalah penyimpanan untuk framesetnya. Pilih border terluar
dari frame sehingga yang terpilih adalah framesetnya.
6. Pilih menu File > Save Frameset.

MENGHAPUS FRAME.
1. Arahkan pointer mouse pada border frame yang ingin dihapus.
2. Geser border frame keluar dari area document window.

MENGATUR PROPERTI FRAME DAN FRAMESET
Untuk membedakan antara frame dan frameset, aktifkan Frames panel. Frameset
adalah suatu frame induk yang dapat menampung beberapa frame lain di dalamnya dan dapat
memiliki beberapa frameset yang lainnya. Sedangkan frame adalah dokumen yang terdapat
di dalam frameset dengan border yang mengelilinginya.

Heri Susanta, S.Pd.T SMA Negeri 8 Yogyakarta
22
Mengatur Properti Frame
Untuk memilih frame melalui document window, anda dapat melakukannya dengan
menggunakan kombinasi Alt + Klik pada frame yang diinginkan.. Selanjutnya akan tampil
property frame pada Property Inspector.


Properti Nama Keterangan
Frame name Frame name
Digunakan untuk mengisikan nama frame.
Pemberian nama sangat penting karena untuk
referensi script dan target hyperlink. Di
dalam pemberian nama frame, tidak ada
spasi, dan harus merupakan kata tunggal,
tidak boleh mengandung tanda minus dan
titik, nama harus diawali dengan huruf,
bukan angka.
Src Frame source
Digunakan untuk menentukan sumber
dokumen frame.
Scroll Frame scrollbars
Digunakan untuk menampilkan scroll atau
batang penggulung pada frame.
No Resize Disable frame resize
Digunakan untuk menonaktifkan perubahan
ukuran pada frame. J ika pilihan ini dalam
keadaan tercentang, anda tidak dapat
mengubah ukuran frame pada browser.
Properti Nama Keterangan
Borders 3D border
Digunakan untuk mengatur border pada
frame.
Border Color Frame border color
Digunakan untuk mengatur warna pada
border
Margin Width
Margin width in
pixels
Digunakan untuk mengatur batas kanan dan
kiri margin
Margin Height
Margin height in
pixels
Digunakan untuk mengatur jarak margin atas
dan bawah pada frame.

Mengatur Properti Frameset
Setelah selesai mengatur property frame, anda dapat mengatur property frameset.
Untuk mengatur property frameset, sebelumnya aktifkan dulu frameset-nya. Anda dapat
langsung memilih pada document window dengan mengklik salah satu border framenya.
Selanjutnya akan tampil property frameset pada Property Inspector.



Heri Susanta, S.Pd.T SMA Negeri 8 Yogyakarta
23
Properti Nama Keterangan
Border 3D border
Digunakan untuk mengatur tampilan
border frameset, apakah untuk
ditampilkan atau disembunyikan.
Border Width Border width in pixels
Digunakan untuk mengatur lebar smua
border pada frameset.
Border Color Frameset color
Digunakan untuk mengatur warna pada
border frameset.
Column Row/column size
Digunakan untuk mengatur tinggi baris
atau lebar kolom yang dipilih.
Pixels Row/column size units
Digunakan untuk mengatur ukuran
lebar dan tinggi frame.

RowCol Selection
Digunakan untuk memilih bagian
kolom atau bagian baris dengan klik
bagian tabulasi di bagian atas dan
samping tampilan.

MENGATUR PROPERTI HALAMAN FRAME
Sudah dijelaskan di atas bahwa setiap frame terdiri dari file dokumen htm/html
sehingga anda dapat mengatur property halaman untuk setiap frame. Anda dapat
mengaturnya seperti anda mengatur jendela dokumen, yaitu:
1. Pastikan anda aktif pada frame yang diinginkan.
2. Pilih menu Modify > Page Properties atau klik kanan pada halaman frame dan pilih
Page Properties.
3. Dari tampilan Page Properties, lakukan beberapa perintah format yang anda inginkan.
4. Untuk menyetujui, klik OK.

VII. BEKERJA DENGAN FORM
Fasilitas Form memudahkan anda dalam berkomunikasi di dalam dunia web. Dengan
menggunakan form anda dapat mengumpulkan informasi dari pengunjung dan melakukan
beberapa interaksi dengan mereka. Form dapat terdiri dari beberapa objek yang disusun
menjadi sebuah model pengisian atau dapat juga disebut sebagai formulir online.
Ketika pengunjung memasukkan informasi ke dalam sebuah model form di dalam
situs web dan menenkan tombol submit, informasi tadi akan terkirim ke server dan akan
diproses. Server akan merespon pengiriman tadi dengan membalas atau melakukan tindakan
lain sesuai dengan apa yang diinginkan pengunjung. Biasanya informasi ini diproses dengan
menggunakan script Common Gateway Interface (GGI), halaman ColdFusion, J avaServer
Page (J SP), atau dengan Active Server Page (ASP).
Beberapa objek yang terdapat pada form antara lain adalah text field, list box, check
box, menu pop-up, field password, image field, button, dan radio button.


MENYISIPKAN FORM
Untuk menempatkan objek form yang ingin anda sisipkan, terlebih dahulu anda harus
menyiapkan sebuah wadah untuk menampung objek form tersebut. Wadah yang dimaksud
adalah form itu sendiri. J ika anda menyisipkan objek tanpa menempatkannya ke dalam
wadah, maka informasi yang anda masukkan di dalam form tersebut tidak akan dapat
terkirim.
Lakukan langkah berikut untuk membuat sebuah form:
1. Pastikan anda aktif pada document window.

Heri Susanta, S.Pd.T SMA Negeri 8 Yogyakarta
24
2. Aktifkan tabulasi Form pada Insert Bar.
3. Klik ikon Form atau geser ikon tersebut ke dalam document window.
4. Anda juga dapat menyisipkan form dengan menu Insert > Form.
5. Pada document window akan tampil sebuah objek form dengan tampilan garis putus-
putus berwarna merah.
6. Pada bagian Property Inspector akan tampil property form.


Berikut ini penjelasan atas masing-masing bagian dari property form:
Form name digunakan untuk memberi nama form.
Action digunakan untuk menentukan lokasi atau path file yang akan digunakan untuk
memproses form.
Method digunakan untuk menentukan metode pengiriman data form. Di dalam property
Method terdapat beberapa pilihan, yaitu:
Default: jika anda memilih default, maka metode pengiriman data form akan
disesuaikan dengan setting default browser.
GET: untuk pilihan GET, metode pengiriman data form akan ditambahkan pada
URL request.
POST: pada metode pengiriman POST, data form anda akan disisipkan pada
HTTP request.
Target digunakan untuk menentukan frame atau window yang menjadi tempat untuk
menampilkan target hyperlink.
Enctype digunakan untuk menentukan tipe MIME encoding yang diinginkan. Biasanya
digunakan untuk file upload.
J ika anda menginginkan tampilan form yang rapi, ada baiknya anda menambahkan
tabel di dalam form sebagai tempat meletakkan objek form.

Menyisipkan Text Field
Text Field merupakan sarana untuk memasukkan teks ke dalam form. Text Field ini
untuk menampung infromasi yang berupa teks atau karakter lainnya, seperti nama seseorang,
alamat, e-mail, komentar, dsb.
Langkah untuk menyisipkan sebuah text field :
1. Aktifkan pointer mouse anda di dalam form yang sudah disediakan.
2. Pilih menu Insert > Form > Text Field atau klik tombol ikon text field pada Insert Bar.
3. Pada Property Inspector tampil property Text Field.

Ada 3 tipe Text Filed, yaitu:
Single Line
Secara default saat menyisipkan Text Field, yang akan ditampilkan adalah tipe
pertama, yaitu Single Line. Tipe ini berupa kotak teks satu baris yang biasa digunakan untuk
menampung nama, alamat, e-mail, dsb.
Untuk property Text Field, tipe Single Line dan Password mempunyai property yang sama,
yaitu:


Heri Susanta, S.Pd.T SMA Negeri 8 Yogyakarta
25
Properti Keterangan
TextField Untuk memasukkan nama dari text field.
Char width
Untuk menentukan jumlah karakter maksimum yang dapat
ditampilkan pada kotak teks.
Max chars
Untuk menentukan panjang maksimum karakter yang dapat
ditampung di dalam kotak teks.
Type
Pada property text field secara default akan terpilih Single
Line.
Init Val
Untuk memasukkan nilai default kotak teks sehingga saat
dijalankan di browser akan berisi nilai yang dimasukkan.

Multi Line
Tipe Text Field yang menyediakan kotak teks dengan beberapa baris di dalamnya.
Anda dapat memasukkan keterangan yang panjang pada kotak teks ini, misalkan untuk
keterangan, komentar, dsb.
Properti pada Multi Line berbeda dengan yang ada pada property Single Line :
Properti Keterangan
Num Lines Untuk menentukan jumlah baris pada kotak teks.
Wrap
Untuk menentukan tipe pelipatan teks. Ada 3 jenis, yaitu:
Off dan Default, Virtual, dan Physical.
Initial Value
Untuk memasukkan nilai default kotak teks sehingga saat
dijalankan di browser akan berisi nilai yang dimasukkan.

Password
Tipe Text Field ini biasanya dipakai pada suatu halaman web yang memerlukan suatu
pengaman agar hanya orang tertentu saja yang dapat mengakses halaman tersebut.

Menyisipkan Hidden Field
Sebetulnya Hidden Field ini banyak dipergunakan. Biasanya Hidden Field ini
digunakan untuk mengumpulkan informasi tentang pengunjung. Saat anda membuat sebuah
Hidden Field akan tampil tanda ikon yang menyatakan adanya sebuah Hidden. Pada saat
anda jalankan di browser, Hidden Field tidak akan ditampilkan.
Untuk menyisipkan Hidden Field:
1. Tempatkan form ke dalam document window.
2. Pilih menu Insert > Form > Hidden Field.
3. Pada property Inspector akan ditampilkan property Hidden Field.
4. Isikan nama Hidden Field, kemudian isikan juga nilai pada bagian Properti value.




Menyisipkan Text Area
Bentuk tampilan dari text area sama persis dengan tampilan text field tipe Multi Line
atau dapat juga dikatakan bahwa TextArea merupakan nama lain dari Text Field tipe Multi
Line. Untuk menyisipkan TextArea, pilih menu Insert > Form Objects > TextArea.
Menyisipkan Checkbox
Checkbox adalah sebuah kotak dimana pengunjung dapat memilih salah satu
informasi yang disediakan. Cara menyisipkan checkbox sbb:

Heri Susanta, S.Pd.T SMA Negeri 8 Yogyakarta
26
1. Pilih menu Insert > Form > CheckBox
2. Sebuah kotak kecil akan ditampilkan pada document window, tepat di mana
menempatkan pointer mouse.
3. Anda dapat menyisipkan beberapa Checkbox sesuai kebutuhan. J ika anda menggunakan
beberapa checkbox sebagai pilihan, tempatkan checkbox ke dalam sebuah tabel agar
tersusun rapi.
Pada Property Inspector akan tampil property Checkbox.


Properti Keterangan
CheckBox Untuk memberikan nama pada field checkbox
Checked Value
Untuk memberikan sebuah nilai pada Checkbox pada saat
checkbox terpilih.
Initial State
Untuk menentukan apakah Checkbox tersebut secara default
sudah terpilih atau belum.

Menyisipkan Radio Button
Radio Button mempunyai fungsi yang sama dengan Checkbox yaitu untuk
menentukan pilihan dari suatu daftar pilihan. Bedanya, pada radio button kita hanya dapat
memilih satu pilihan saja. Cara penyisipan radio button:
1. Tempatkan pointer mouse pada form yang sudah disiapkan.
2. Pilih menu Insert > Form > Radio Button. Akan tampil sebuah lingkaran kecil pada
bagian form dan kemudian isikan sebuah informasi yang akan digunakan sebagai
keterangan pada bagian kanan radio button
3. Anda dapat menyisipkan kembali beberapa radio button sesuai kebutuhan.
Anda dapat mengatur property radio button lewat Property Inspector. Tampilan
property radio button sama seperti property Checkbox. Anda dapat memasukkan nama untuk
field radio button pada kotak teks RadioButton, kemudian ketik nilai Radio Button pada
bagian Checked Value dan tentukan pilihan untuk Initial State, Checked atau Unchecked.


Menyisipkan Radio Group
Radio Group merupakan kumpulan dari beberapa Radio Button. Dalam proses
pembuatannya, anda tidak perlu menyisipkan radio button satu per satu ke dalam document
window. Anda cukup memasukkan label dan nilai dari radio button tersebut pada bagan yang
sudah tersedia. Caranya :




Pilih menu Insert > Form > Radio Group. Selanjutnya akan tampil sebuah kotak dialog
untuk mengisikan parameter.

Heri Susanta, S.Pd.T SMA Negeri 8 Yogyakarta
27

Langkah untuk mengisikan parameter sbb:
1. Yang pertama isikan nama untuk Radio Button pada bagian Name.
2. Lalu isikan label dan value. Klik bagian radio dan kemudian anda ketikan sebuah kata di
dalamnya.
3. J ika anda ingin menambah lagi, gunakan tombol +yang terletak pada bagian atas daftar
parameter. Apabila ingin menghapus gunakan tombol -.
4. Pada bagian Lay Out Using, pilih Line Break [<br>Tags] untuk menempatkan Radio
button pada baris baru, atau pilih Table untuk menempatkan radio button pada sebuah
tabel.

Menyisipkan List/Menu
Selain dalam bentuk tombol, seperti Checkbox atau Radio Button, anda juga dapat
menampilkan pilihan dalam bentuk list atau menu.
Menggunakan List sebagai Pilihan
List digunakan untuk menampilkan banyak pilihan, baik pilihan tunggal maupun
ganda. Dengan menggunakan list, anda dapat memilih beberapa pilihan sekaligus seperti
pada Checkbox. Untuk memilih lebih dari satu pilihan, anda dapat menggunakan tombol
Shift atau Ctrl.
Langkah untuk menyisipkan list sbb:
1. Pilih menu Insert > Form > List/Menu.
2. Pada property list/menu, pastikan pilihan type berada pada Type List.

3. Isikan nama untuk List pada kotak List/Menu.
4. Kemudian tentukan jumlah baris yang akan ditampilkan pada kotak teks Height.
5. J ika anda menginginkan agar pengunjung dapat memilih lebih dari satu pilihan,
aktifkan kotak centang Selections.
6. Untuk menambah atau mengurangi isi list, tampilkan kotak dialog List Values dengan
mengklik tombol List Values.

7. Anda dapat memasukkan pilihan pada bagian kolom item label dan nilai pada bagian
value. Item yang anda masukkan akan ditampilkan pada bagian Initially Selected.



Menggunakan Menu sebagai Pilihan

Heri Susanta, S.Pd.T SMA Negeri 8 Yogyakarta
28
Sama halnya dengan List, menu merupakan sebuah objek yang digunakan untuk
menampung beberapa pilihan dalam bentuk drop-down. Untuk menu ini hanya dapat memilih
satu pilihan saja. Menu mempunyai fungsi yang sama seperti Radio Button. Anda dapat
menyisipkan menu dengan langkah sbb:
1. Pilih menu Insert > Form > List/Menu.
2. Pada property List/Menu pastikan pilihan Type berada pada Type Menu.
3. Isikan nama menu pada kotak teks List/Menu. Namanya harus unik.
4. Untuk menambahkan atau mengurangi isi list, dapat tampilkan kotak dialog List Values
dengan klik tombol List Values.
5. Anda dapat memasukkan item ke dalam pilihan pada bagian kolom item label dan ketik
nilai pada bagian value. Tombol +untuk menambah item dan tombol untuk menghapus
item.
6. Item yang anda masukkan akan ditampilkan pada bagian Initially Selected.

Menyisipkan File Field
File field digunakan untuk meng-upload suatu file ke server. File yang dapat di-
upload melalui File Field ini antara lain file dokumen, file gambar, dan juga file-file lainnya.
Anda dapat menggunakan method Post atau IIS untuk action dari form.
Tampilan File field ini mirip dengan Text Field. Hanya saja di sebelah kanan objek
file field terdapat sebuah tombol bernama Browse. Tombol ini berfungsi untuk mencari file
yang akan di-upload. Namun demikian anda juga dapat langsung mengetikkan nama file
tersebut langsung pada kotak teks.
Untuk menyisipkan objek File Field :
1. Tempatkan mouse pointer dalam form yang sudah disiapkan.
2. Pilih menu Insert > Form > File Field.
3. Kemudian aturlah propertinya.

4. Masukkan nama file field pada kotak teks filefieldname
5. Tentukan jumlah karakter yang dapat ditampilkan dalam kotak teks Char width.
6. Tentukan juga jumlah karakter yang dapat ditampilkan ke dalam kotak teks Max Chars.

Menyisipkan Button
Button merupakan sebuah tombol yang dapat digunakan untuk melakukan proses
tertentu, misalkan untuk submit atau reset. Kedua tombol tersebut digunakan untuk sebuah
proses di dalam form. Tombol submit untuk mengirimkan data yang dimasukkan ke dalam
form selanjutnya dan diolah di dalam server. Sedangkan tombol reset untuk mereset atau
mengosongkan data yang ada di dalam form hingga kembali ke nilai default.
Untuk menyisipkan sebuah Button:
1. Pilih menu Insert > Form > Button.
2. Ketik nama button pada bagian button name.
3. Untuk memberikan nama button, ketikkan pada kotak teks label. Nama tersebut akan
ditampilkan pada button.
4. Tentukan pula actionnya, pilih Submit atau Reset.


X1. MEMBUAT ANIMASI WEB
Tampilan web yang statis membuat pengunjung cepat bosan karena tidak variatif.
Web perlu animasi pendukung agar menarik untuk dikunjungi. Untuk membuat tampilan
yang lebih interaktif, anda dapat memanfaatkan fasilitas yang ada pada Dreamweaver.

Heri Susanta, S.Pd.T SMA Negeri 8 Yogyakarta
29
Konsep web dinamis ini muncul setelah adanya teknologi Dynamic HTML (DHTML), yaitu
suatu teknologi web yang menggabungkan antara HTML,CSS dan Script. Salah satu fasilitas
yang menarik yang disediakan oleh Dreamweaver adalah kemampuan menambahkan
behavior pada halaman web. Dengan behavior halaman web akan terlihat lebih interaktif,
variatif dan menarik untuk dikunjungi.

Behavior
Behavior adalah sebuah fasilitas yang menggunakan J avaScript, yang
mengkombinasikan antara event dan aksi yang dihasilkan dari event tsb. Sedangkan event
adalah suatu peristiwa tertentu dalam browser yang memicu terjadinya suatu aksi behavior.

Mengenal Panel Behavior
Panel ini merupakan tempat di mana anda dapat memberikan suatu aksi pada elemen
halaman web dan tempat untuk mengubah parameter dari behavior yang telah anda gunakan.
Langkah untuk menampilkan panel Behavior:
1. Pastikan aktif pada halaman web. Pilih menu Window > Behaviors.
2. Pada bagian panel Design akan ditampilkan panel behavior.
3. Pada panel tsb anda dapat mengatur beberapa pilihan antara lain:
Tombol Add Behavior +, digunakan untuk menambahkan behavior baru pada suatu
elemen.
Tombol Remove Event -, digunakan untuk menghapus aksi behavior suatu elemen
dari daftar behavior.
Tombol panah atas dan panah bawah digunakan untuk mengatur urutan aksi behavior.
Tombol Event, digunakan untuk menampilkan menu pop-up yang berisi seluruh aksi.

Memberikan Behavior pada Elemen
Anda dapat menggunakan behavior hamper pada semua elemen web, seperti gambar,
link frame, form bahkan sebuah dokumen sekalipun. Untuk teks, anda tidak dapat
menambahkan sebuah aksi, tapi dapat menggunakan teks sebagai behavior dengan
menambahkan link kosong pada teks tsb. Langkah menambahkan behavior pada elemen:
1. Pastikan aktif pada document window.
2. Pilih elemen yang akan diberi behavior, baik gambar, link maupun body. Untuk membuat
behavior pada seluruh halaman, dapat mengklik tag body yang terletak pada bagian kiri
bawah document window.
3. Tampilkan panel Behavior pada panel Design (Shift + F3). Klik tanda plus untuk
menampilkan menu pop-up, kemudian tentukan aksi yang diinginkan.
4. Setelah memilih salah satu aksi, sebuah kotk dialog akan tampil, menunjukkan parameter
serta instruksi aksi. Masukkan parameter yang diminta lalu tekan Ok.

Membuat Behavior pada teks
Anda dapat menampilkan suatu behavior pada sebuah teks asalkan teks tsb diubah
menjadi sebuah null link atau link tanpa target dengan menambahkan tanda pagar (#) di
dalam kotak teks Link pada Property Inspector. Anda dapat menghilangkan pengaruh garis
bawah dan alamat URL pada teks yang digunakan. Langkah untuk menghilangkan pengaruh
null link adalah sbb:
1. Pilih teks dan buatlah sebuah link kosong pada teks tsb.

2. Pilih menu Text > CSS Styles > New. Akan tampil kotak dialog.

Heri Susanta, S.Pd.T SMA Negeri 8 Yogyakarta
30

3. Pilih Use CSS Selector padaType. Masukkan a:link pada kotak teks Selector.
4. Pilih This Document Only pada Define in. tekan Ok. Akan muncul kotak dialog lagi.

5. Beri tanda centang pada None di Decoration. Tanda centang ini akan menghilangkan
tanda garis bawah pada link teks

Menggunakan Aksi
Ada banyak sekali aksi behavior yang disediakan oleh Dreamweaver mx. Tak kurang
dari 20 aksi. J ika anda ingin menambah jumlah aksi behavior, anda dapat mencarinya di situs
Macromedia.

Pesan Melayang
Saat browsing di internet mungkin anda pernah mendapati sebuah pesan begitu anda
masuk pertama kali membuka sebuah situs. Sebetulnya pesan tsb juga merupakan sebuah
behavior.
Anda dapat membuat sebuah pesan yang tampil pada layer browser dengan
menggunakan behavior Popup Message. Untuk menambahkan pesan tsb, lakukan langkah
berikut:
1. Aktifkan document window dan kemudian tampilkan panel Behavior pada panel Design.
2. Klik tombol plus untuk menampilkan daftar aksi behavior, kemudian pilih Popup
Message sehingga tampil kotak dialognya.
3. Ketikkan sebuah pesan pada bagian kotak teks Message, di mana pesan tsb akan
ditampilkan pada saat halaman web dimuat di browser. Klik ok, untuk melihat hasilnya
simpan file tsb lalu jalankan di browser.

Mengganti Image
Behavior Swap Image mempunyai fungsi yang sama dengan Rollover Image, yaitu
mengganti suatu gambar dengan gambar yang lain. Langkahnya:
1. Aktifkan document window anda.
2. Tambahkan satu buah gambar sebagai gambar utama yang ditampilkan pada jendela
browser.
3. Pilih gambar tsb dan kemudian klik tombol plus pada panel Behavior.
4. Pada menu yang muncul, pilih Swap Image sehingga muncul kotak dialog.

Heri Susanta, S.Pd.T SMA Negeri 8 Yogyakarta
31

5. Pilih gambar yang ingin digunakan pada kotak pilihan Images.
6. Tentukan gambar pengganti yang dapat anda ambil dari file gambar, yaitu dengan
menggunakan tombol Browse.
7. Untuk menampilkan gambar anda ke dalam cache browser, aktifkan pilihan kotak cek
Preload Image.
8. J ika anda ingin gambar kembali ke tampilan awal pada saat mouse pointer keluardari
gambar, aktifkan pilihan kotak cek Restore Image onMouseOut. Lalu tekan tombol OK.

EFEK TRANSISI
Efek transisi digunakan untuk membuat animasi pada halaman web. Tapi saying
belum banyak desainer yang memanfaatkan Transition effect ini untuk memukau
pengunjungnya. Efek yang sangat menarik ini hanya dapat dinikmati pengunjung yang
menggunakan IE versi 4 atau versi yang terbaru.
Pembuatan Transition effect tidak serumit yang anda bayangkan. Anda tidak perlu
memasukkan script yang panjang di dalam jendela Code. Yang anda butuhkan adalah sebuah
elemen yang ada di dalam HTML, yaitu <meta>. Efek ini akan bekerja pada saat pengunjung
sedang masuk atau keluar situs. Atau pada saat memasuki sebuah halaman, di mana akan
muncul sebuah efek yang menarik.

Macam Efek Transisi
Ada sekitar 24 macam efek transisi yang disediakan oleh Dreamweaver. Setiap jenis
efek akan menghasilkan efek yang berbeda-beda dan hal itu tergantung pada nilai yang anda
berikan. Berikut ini adalah berbagai efek yang dapat anda pilih beserta nilai valuenya:
Nama Efek Transisi Value Nama Efek Transisi Value
Box In 0 Random Dissolve 12
Box Out 1 Split Vertical In 13
Circle In 2 Split Vertical Out 14
Circle Out 3 Split Horizontal In 15
Wipe Up 4 Split Horizontal Out 16
Wipe Down 5 Strips Left Down 17
Wipe Right 6 Strips Left Up 18
Wipe Left 7 Strips Right Down 19
Vertical Blinds 8 Strips Right Up 20
Horizontal Blinds 9 Randoms Bars Horizontal 21
Checkerboard Across 10 Randoms Bars Vertical 22
Checkerboard Down 11 Randoms 23

Menyisipkan Efek Transisi
Dreamweaver Mx memiliki dua cara untuk menyisipkan efek transisi. Yang pertama
adalah dengan menggunakan fasilitas Dreamweaver meta tag. Sedangkan yang kedua dengan
menggunakan script.

Berikut ini cara menyisipkan efek transisi dengan menggunakan meta tag:
1. Tampilkan halaman web yang ingin disisipi efek transisi.

Heri Susanta, S.Pd.T SMA Negeri 8 Yogyakarta
32

2. Pilih menu Insert > HTML > Head Tags > Meta sehingga tampil kotak dialog Meta.

3. Pada bagian Attribute, pilih HTTP-Equivalent.
4. Pada bagian Value anda dapat mengisikan nilai-nilai berikut:
Page-Enter, efek yang akan terjadi saat anda masuk ke halaman lain dalam suatu
situs.
Page-Exit, efek yang akan terjadi saat anda keluar dari sebuah halaman dalam suatu
situs.
Site-Enter, efek yang akan terjadi saat anda masuk ke sebuah wesite.
Site-Exit, efek yang akan terjadi saat anda keluar dari sebuah wesite.
5. Di bagian Content, isikan RevealTrans(Duration=15, Transition=23) sehingga
hasilnya akan tampak sbb:

Duration, digunakan untuk menentukan waktu yang diperlukan untuk menjalankan
sebuah efek sampai efek tsb selesai dimainkan.
Transition, digunakan untuk menentukan jenis transisi. Anda dapat mengisikan
transisi dengan mencantumkan nilai transisinya.
6. Untuk mengakhirinya tekan tombol OK. Untuk melihat hasilnya, jalankan jendela
browser.

XII. MEMPUBLIKASIKAN SITUS WEB
Tujuan dari publikasi adalah untuk menampilkan desain web anda ke pengunjung web
local atau dunia. Dalam hal ini anda membutuhkan suatu akses ke remote web server. Untuk
melakukan akses tsb anda harus mempunyai server ISP atau intranet server dari sebuah
perusahaan. J ika anda belum mempunyai akses menuju server tsb, anda harus menghubungi
salah satu penyedia ISP atau system administrator.
Sebelum melakukan publikasi terhadap web anda, terlebih dahulu anda harus menguji
situs untuk melihat apakah ada kesalahan di dalam desain web anda. J ika ada kesalahan, anda
dapat melakukan pembetulan terlebih dulu sehingga penginjung web dapat mengakses tanpa
harus mengalami masalah.

MENGUJI SITUS WEB
Pengujian situs bertujuan untuk mengetahui apakah situs yang dibuat dapat diakses
oleh umum dan dapat bekerja sesuai yang diinginkan. Selain itu juga untuk mengetahui
apakah link yang dibuat dapat berfungsi dengan betul dan untuk mengetahui kecepatan
proses download halaman pada saat dibuka.
Untuk melakukan serangkaian uji situs, anda dapat melakukannya secara local
dahulu. Hal ini dilakukan agar nanti jika ada suatu kesalahan dalam situs anda, dapat
melakukan pembetulan.

Heri Susanta, S.Pd.T SMA Negeri 8 Yogyakarta
33

Ada beberapa hal yang perlu anda ketahui dalam melakukan pengujian situs, antara lain:
Anda dapat melakukan pengetesan terhadap tampilan dari tiap tipe browser. Ini sangat
berguna untuk mengetahui perbedaan tampilan, warna, huruf maupun format lainnya.
Perhatikan juga setiap link yang dibuat. J ika ada kesalahan anda dapat membetulkannya.
Perhatikan pula untuk kecepatan download suatu halaman. J ika membutuhkan waktu
yang lama, pengunjung akan enggan untuk meneruskannya. Perhatikan ukuran file
halaman.
Yang tidak boleh ditinggalkan adalah melakukan pengetesan situs secara keseluruhan,
untuk mengetahui dokumen yang ada di dalam halaman situs anda.

CHECK TARGET BROWSER
Fasilitas Check Target Browser digunakan untuk melakukan pengujian atau
pengecekan halaman HTML di dalam dokumen dan digunakan juga untuk melihat atribut-
atribut yang tidak didukung oleh target browser.
Langkah untuk menguji Target Browser sbb:
1. Aktifkan sebuah halaman yang ingin diuji.
2. Klik tombol untuk menampilkan menu melayang.
3. Pilih Setting untuk menampilkan kotak dialog Target Browser.

4. Pilih salah satu target browser yang ditampilkan pada daftar target browser pada tampilan
kotak dialog tersebut dan akhiri dengan menekan tombol OK.
5. Pilih menu File > Check Page > Check Target Browser sehingga tampil sebuah jendela
Results di bawah jendela Properties.
6. Klik tombol Check Target Browser untuk melihat laporan pada jendela Target Browser
Check. J ika pada panel Target Browser Check tidak terdapat keterangan yang
menampilkan kesalahan pada halaman, maka akan dikosongkan tanpa keterangan.

7. Tetapi jika panel Target Browser terdapat keterangan yang menunjukkan kesalahan,
maka anda harus mengecek halaman tsb.
8. J ika anda ingin melakukan pengecekan terhadap keseluruhan situs, dapat menekan
tombol panah hijau yang terdapat pada panel Target Browser Check. Pada saat
ditampilkan sebuah menu melayang, pilih Check Target Browser For Entire Site.

Heri Susanta, S.Pd.T SMA Negeri 8 Yogyakarta
34
9. Setelah kotak dialog Check Target Browser ditampilkan, anda dapat memilih salah satu
target browser pada daftar pilihan untuk mengetahui kesalahan pada setiap halaman situs
anda.
10. Untuk melihat lebih jelas informasi kesalahan pada setiap halaman, anda dapat memilih
salah satu laporan yang terdapat pada jendela Target Browser, kemudian tekan tombol
More Info. Kotak dialog Discription berisi informasi yang menunjukkan kesalahan pada
halaman yang anda pilih.
11. J ika anda ingin mengecek halaman sekaligus menampilkan laporan dalam jendela
browser, klik tombol Browser Report yang tedapat pada panel Target Browser Check.
12. Untuk menyimpan laporan yang muncul dapat mengklik tombol Save Report yang
terletak pada panel Target Browser Check.

MENGOREKSI LINK
Fasilitas Check Links digunakan untuk mengoreksi masalah link dalam suatu situs.
Selain itu juga berfungsi sebagai pencari file yang tidak terpakai di dalam suatu situs. Yang
dimaksud dengan file yang tidak terpakai adalah file yang ada dalam suatu situs yang tidak
mempunyai link dengan file lainnya.
Untuk melakukan Check Links langkahnya sbb:
1. Pilih menu File > Check Page > Check Links. Pada bagian jendela Results akan tampil
Links Checker.
2. Dari tampilan yang ada, akan terlihat file-file dan link-link yang mengalami kerusakan.
3. Untuk mengecek seluruh link di dalam situs anda, tekan tombol panah berwarna hijau
yang terdapat pada panel Link Checkers kemudian pilih Check Links For Entire Situs.
4. Selanjutnya akan tampil laporan keseluruhan link yang memiliki masalah link yang tidak
berfungsi.
5. Selain dapat mengetahui link yang rusak, anda juga dapat mengetahui file yang tidak
terpakai. Untuk menampilkan file tsb, klik tanda panah pada menu Show yang terdapat
pada panel Link Checker, pilih Orphaned Files.

MENYUNTING BROKEN LINKS DAN ORPHANED LINKS

Setelah anda mengecek link, anda dapat memperbaiki link yang tidak berfungsi. Anda
dapat menggunakan fasilitas Check Links untuk menemukan link yang rusak. Selanjutnya
lakukan langkah berikut:
1. Pastikan jendela Link Checker menampilkan beberapa link yang rusak dengan memilih
Broken Links pada kotak pilihan Show.
2. Pilih link yang ingin diedit dengan mengklik file link pada kolom Broken links.
3. Anda dapat mengganti file dengan mengklik folder dan tentukan file link sebagai
pengganti file link lama. Lalu tekan Enter.
4. Setelah file link tsb diganti maka file tsb tidak akan ditampilkan lagi pada laporan
Broken links.
5. Sedangkan untuk menghapus file yang tidak terpakai, anda dapat mengaktifkan
Orphaned Files pada pilihan Show sehingga akan tampil file-file yang tidak terpakai.
Pilih file yang ingin dihapus kemudian tekan Delete.
6. Akan tampil konfirmasi apakah anda yakin ingin menghapus file terpilih, pilih yes untuk
menghapusnya.
7. Setelah anda membenahi file link dan file yang tidak terpakai, anda dapat melakukan
penyimpanan dengan menekan tombol Save Report pada panel Link Checkers.
KONEKSI PADA REMOTE SERVER
Setelah anda melakukan pengecekan pada situs dan juga melakukan perbaikan,
selanjutnya anda dapat mempublikasikan situs tsb. Sebelumnya anda harus mengakses

Heri Susanta, S.Pd.T SMA Negeri 8 Yogyakarta
35
remote web server untuk mengupload file situs anda ke remote wed server sehingga situs
anda dapat dipublikasikan.
Lakukan langkah berikut ini untuk membuat koneksi pada Remote Server:
1. Pilih menu Site > Manage Sites sehingga akan tampil kotak dialog Edit Situs.

2. Pada daftar nama situs, pilih salah satu nama situs yang ingin anda koneksikan ke remote
server.
3. Klik Edit yang terletak pada baris tombol di sebelah kanan daftar nama situs sehingga
tampil kotak dialog Situs Definition.

4. J ika anda ingin mengganti nama dari situs, lakukan pada bagian ini. Klik Next untuk
melanjutkan proses.
5. Pada bagian tampilan kotak dialog kedua, anda diminta menentukan aplikasi web yang
ingin digunakan, misalnya ASP J avascript, PHP, dsb. Tetapi jika tidak ingin
menggunakan aplikasi web, anda dapat memilih No, I do not want to use a server
technology.
6. Tekan tombol Next untuk melanjutkan ke proses berikutnya. Pada tampilan kotak dialog
ketiga, anda diminta untuk menentukan tempat untuk mengedit file sebelum anda
melakukan koneksi ke remote server. Tentukan pula di mana file akan disimpan. Anda
dapat langsung mengisikan ke dalam kotak teks atau tekan ikon folder.

Heri Susanta, S.Pd.T SMA Negeri 8 Yogyakarta
36

7. Klik Next untuk melanjutkan ke proses berikutnya. Anda diminta untuk menentukan
koneksi remote situs. Kemudian pilih salah satu pilihan yang disediakan,FTP,
Loca;/Network, RDS, WebDave atau SourceSafe Database. Pada umumnya untuk
melakukan koneksi ke remote situs di dalam server digunakan FTP atau File Transfer
Protocol.

8. Selanjutnya anda dapat mengisikan Hostname server atau alamat FTP sebagai
penghubung antara Web dengan remote server, missal: 192.168.0.239
9. Tentukan folder yang berisi situs yang akan di-upload. Isi kotak teks root folder FTP
dengan root folder remote situs. Anda dapat mengkosongkan kotak teks tsb jika anda
tidak yakin dengan path yang anda isikan.
10. Pada bagian Login, isikan nama user yang sudah terdaftar di dalam remote server, dan
isikan juga password pada bagian Password.

Heri Susanta, S.Pd.T SMA Negeri 8 Yogyakarta
37
11. Sebelum anda melanjutkan proses selanjutnya, anda dapat melakukan Test Connection.
Tes koneksi ini berfungsi untuk menguji hubungan antara situs anda dengan remote
server.
12. Apabila proses tes koneksi telah berjalan, Dreamweaver mx akan menampilkan kotak
dialog konfirmasi yang menyatakan tes koneksi telah berhasil.
13. Setelah melakukan tes koneksi, anda dapat melanjutkan prosesnya dengan menekan
tombol Next. Pada kotak dialog berikutnya pilih No, do not enable check in and check
out. Hal ini dimaksudkan untuk menghindari tumpang tindihnya file jika ada lebih dari
satu orang yang menangani pembuatan situs.
14. Tekan tombol Next untuk melanjutkan ke proses berikutnya. Pada tampilan kotak dialog
yang terakhir akan ditampilkan informasi dari pengaturan yang telah anda lakukan.
15. Klik tombol Done untuk menyetujui pengaturan yang telah dilakukan, kemudian klik
tombol Done sekali lagi untuk menyelesaikan proses pengeditan situs.