Cata membuat Web Dasar Profesional bagian 3

Cara membuat Dasar web Professional

Bagian 3…(Cara Membuat Tombol Roll Over)

Sallam pembaca:

Kali ini saya akan meneruskan artikel sebelumya, yaitu tentang cara membuat Web site dengan Macromedia Dreamweaver...Sebelum ke bagian pengenalan PHP dan MySql(cara pembuatan buku tamu,area member dll). Saya ingin menambahkan dulu sebuah artikel tentang bagaimana cara membuat Tombol Roll Over(animasi tombol).Tombil Roll Over ini  sering kita jumpai di web site yaitu Sebuah tombol kalau kursor diletakan diatasnya ,tombol ini akan berubah warna(bereaksi) tombol inilah yang akan kita buat,..dengan ImageReady Cs 2 yang sudah terintegrasi dengan Adobe PhotoShop. Mari langsung saja kita mulai,Dengan membuka File sebelumnya yang kita simpan di My Document dengan format PSD. Buka dulu program Photoshop anda. Dan buka file  “rancangan.psd” yang dulu pernah kita simpan..Tampilanya seperti gambar di bawah ini

Gambar 1.

Buat Tombol baru..  dengan rectangle tool  atur warnanya biru ,Sehingga akan terjadi  Seperti gambar Berikut.

Gambar 2

Munculkan Juga palet Layer  dengan klik menu Window dan klik Layer Window=>layer

Setelah itu munculkan Juga palet /jendela Web content di sub menu Window Juga.
Lihat gambar berikut

Gambar palet Layer dan Web Content. Gambar 2a

Atur layer style yang ada di bawah palet layer klik bevel and emboss., setelah itu drop sadow juga. Sehingga akan menjadi sbb.

Gambar 3

Klik layer di Menu bar dan klik >Duplicat layer

Setelah itu klik style layer dibawah palet layer dan klik color overly pilih warna hijau.

Lihat gmbr berikut

Gambar 4

Buatlah  text diatas tombol.” Klik disini”

Buat juga text disebelah kiri nya“ untuk melihat detail product  >>>”

Lihat gambar berikut

Gambar 5

Kembali ke Shape tombol biru di palet layer,aktipkan

Lalu klik menu layer di menu bar lalu klik > New layer based slice

Tombl anda akan dikelilingi segi empat   dan no slice sbb.

Gambar 6

Simpan gambar anda Namai “halaman Tombol RO” ( Roll Over)

Setelah itu tekan  Menu File => edit in Image Ready. Dan tunggu sampai halaman ImageReady Muncul

Sekarang kita masuk ke cara Membuat animasi tombol Roll Over:

Perhatikan ke jendela Web content klik tulisan Normal di jendela tsb. Hingga warna menjadi biru

 ( tanda aktip)

Pindah perhatikan di jendela layer. Klik symbol  mata di shape copy sehinga warna Hijau menghilang.

Pastikan warna tombol biru aktip. Setelah itu pindah ke Web Content. Klik tombol di bagian slice.yang berda dibawah kotak Normal.

Di palet layer klik simbol mata untuk tombol warna Biru( biar tombol biru sembunyi). Hidupkan warna tombol Hijau.
Setelah itu , klik tombol Create rollover state, yang ada dibagian bawah palet WebConten. Sehingga muncul tulisan Roll Over di bagian ruang slice. Anda coba, kalau benar ketika rol over anda klik Tombol di layar akan ber warna Hijau. Dan kalau anda klik di bagian Normal tombol di layar akan ber warna biru. Dan Coba main kan dengan menekan Tombol Y di papan ketik anda. Tunggu sebentar sehingga tombol akan ber warna biru. Dan seret cursor anda. ketika  cursor anda berada diatas tombol, warna tombol akan menjadi Hijau. Hentikan percobaan anda dengan klik lagi tombol Y. simpan file ini di folder rancangan web anda.denga klik File dan Klik Save  Optimized… Namai filenya klikdisini. Dan typenya Image dan HTML.

Buat juga halaman conten “Detail product" ceck ulang Link2 di halaman Product, untuk Tombol2 Home, Product,Info bisnis,Panduan  dan Member. Nah teman2 artikel cara membuat. Tombol Roll Over. selesai .anda bisa juga mencobanya dengan Browsers anda: Google chrome atau Internet Explorer.cara nya bisa buka  browsers anda dulu lalu open filenya.... Atau tekan>File=>Save (Simpan). halaman product anda,..setelah itu tekan  F 12.Mainkan tombol2 menu biasa, maupun tombol Roll Over anda.

Teman2, Sekian dulu posting kali ini ,sampai jumpa di artkel selanjutnya.

Silahkan mencoba...

Artikel selanjutnya ialah:
1.membuat tombol Roll over langsung dengan Macromedia Dreamweaver tanpa memakai Image ready.
2.cara membuat Form Kontak/buku tamu dengan Dreamweaver..

Sallam:Gumilar.H