Bikin Tombol Bergambar

Document Sample
Bikin Tombol Bergambar Powered By Docstoc
					Bikin Tombol Bergambar


Tombol jadi menarik, Anda pun ingin mengeklik.

Bentuk tombol di situs biasanya cuma begitu-begitu saja, kotak dan
umumnya berwarna abu-abu. Demikian pula kalau Anda membuat tombol di
web menggunakan aplikasi perancangan web. Bentuknya selalu standar,
kotak kelabu. Sebenarnya, Anda bisa mengubah tombol itu menjadi
berwarna-warni. Bahkan gambar Anda pun bisa dijadikan tombol. Kami
tunjukkan caranya di sini dengan menggunakan Macromedia Dreamweaver
MX 2004. SONI

LANGKAH 1

Bukalah dokumen baru pada Dreamweaver MX 2004. Biar nyaman,
tampilkan area kerja Anda menjadi Design dan Code View. Klik
tombol [Split] di atas lembar kerja Anda.

LANGKAH 2

Awalnya, buatlah form terlebih dulu. Klik menu [Insert] [Form], lalu
pilih [Form]. Pada area kerja, muncul kotak bergaris putus-putus dan
berwarna merah. Pastikan kursor Anda berada dalam kotak
tersebut.

LANGKAH 3

Jika perlu, ketikkan beberapa kata sebagai penjelas form Anda. Biar
mudah, ikuti saja cara kami di sini. Seusai itu, tekan tombol [Shift]
diikuti [Enter] untuk menambah satu baris di bawah kalimat tadi.

LANGKAH 4

Untuk membuat boks isian, klik menu [Insert] [Form] [Text Field].
Lihat, kini muncul kotak isian kosong di bawah teks Anda tadi.

LANGKAH 5

Arahkan pointer ke panel Properties di sisi bawah. Di sisi kiri panel,
ganti isi "TextField" menjadi "isian". Lalu, ketik 50 pada boks "Char
width".

LANGKAH 6

Kembali ke area kerja pada jendela Design View, klik mouse pada
samping text field, sehingga kursor berada di sisi kanannya. Berilah
tombol dengan mengeklik menu [Insert] [Form] [Button].

LANGKAH 7

Arahkan pointer ke panel Tag di sisi kanan. Jika panel tersebut tidak
ada, klik menu [Windows] [Tag Inspector]. Dari panel tersebut, klik tab
[Behaviors].
LANGKAH 8

Klik [Add Behavior] yang bergambar tanda +, lalu pilih [Got To URL].
Muncul boks dialog Go To URL, lantas ketik http:// pada isian
"URL:". Klik [OK].

LANGKAH 9

Lihat pada jendela Code. Kini, pada tombol Submit terdapat event
onClick. Perintah ini akan dijalankan jika tombol Submit diklik.
Sekarang, tempatkan kursor setelah tulisan ‘http://’ pada jendela
Code.

LANGKAH 10

Ketik +this.form.isian.value. Dengan perintah ini, ketika tombol
Submit diklik, web browser akan merujuk ke situs yang ditulis pada
boks isian.

LANGKAH 11

Ubahlah tombol Anda menjadi tombol bergambar. Caranya, ganti
jenis tombol dengan mengetikkan "image" di samping tulisan type=.

LANGKAH 12

Klik gambar tombol di jendela Design. Bentuknya akan berubah
seperti contoh di sini. Isilah dengan gambar dengan mengeklik
[Browse] pada panel Properties. Cari gambar tombol yang sesuai, lalu
klik [OK].

LANGKAH 13

Nah, kini Anda tinggal menyelesaikan halaman situs Anda. Jika
sudah kelar, simpan dan up-load-lah.

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:58
posted:2/16/2012
language:Indonesian
pages:2