Sabtu, 02 Oktober 2010

Mengubah BackGround dan Page pada Web Page

Disini saya ingin menjelaskan cara merubah Background dan Page pada Web Page dengan menggunakan aplikasi Macromedia Dreamweaver. Pertama saya akan menjelaskan cara merubah Background pada Web Page.



1.   1.  Langkah pertama adalah, bukalah file index.html menggunakan Macromedia DreamWeaver.

  



2.   2.   Kemudian setelah file terbuka, pilih terlebih dahulu gambar mana yang aka di buat menjadi latar belakang dan bagian mana saja yang akan dijadikan sebagai tombol. Sebagai contoh, klik image di bagian bawah teks New Product.

  



3.    3.  Pada bagian Properties, tertulis Src = images/index_26.gif. Hal itu berarti kita tidak dapat memasukkan teks di atas gambar tersebut karena objek tersebut adalah image, bukan merupakan background. Tekan Del untuk menghapusnya.

  



4.    4.  Kemudian klik pada Background URL of cell untuk memilih gambar yang akan dijadikan latar background. Oleh karena nama file yang bar saja dihapus adalah index_26.gif maka gunakan file tersebut sebagai latar belakang.

  



5.    5.  Ketikkan images/index_26.gif pada kolom Bg.

  


1.    6.  Lakukan hal yang sama pada bagian lain apabila ingin dijadikan sebagai back ground agar kita dapat memasukkan objek berupa teks, animasi, maupun gambar.
 s 



Kemudian saya akan menjelaskan cara merubah page. Disini saya akan menjelaskan cara membuat Rollover Image Pada Web page. Untuk membuat Rollover Image dengan menggunakan Macromedia Dreamweaver yang harus dilakukan pertama kali adalah menyediakan dua buah gambar yang ukurannya sama tapi warnanya berbeda.

1.  Buatlah duplikasi gambar tombol yang telah ada.










2.  Kemudian editlah file hasil duplikasi tersebut menggunakan Adobe Photoshop. Pilih menu Image > Adjusment > Hue/Saturation.

 












3.  Setelah muncul kotak dialog Hue/Saturation, aktifkan pilihan Colorize. Kemudian geser Slider Hue maupun Saturation sesuai kebutuhan. Setelah selesai klik Ok, simpan dokumen tersebut dengan cara menekan  Ctrl + S.














4.  Sekarang kembali ke Macromedia Dreamweaver, Klik gambar About Us.








5.  Hapuslah objek tersebut dengan cara menekan tombol Del. Selanjutnya pilih menu Insert > Image Objects > Rollover Image.










6.  Setelah muncul kotak dialog Insert Rollover Image, berilah nama gamber pada kolom Image name kemudian tentukan gambar asli pada kolom Original Image.Untk mempermudah pencarian file, klik tombol Browse. Tentukan pula file untuk gambar rollover pada kolom Rollover Image.












7.. Masukkan teks alternat pada kolom Alt, lalu tentukan namaf file sebagai link ketika tombol tersebut di klik.





8.  Untuk melihat hasilnya tekan tombol F12.




Tidak ada komentar:

Posting Komentar