Author by Yosef Doublehorn
Author by : Doublehorn
DAFTAR ISI
Protected by Copyscape Online Infringement Detector

25 Oktober 2013

Merancang website blog dengan Dreamweaver


Dreamweaver di-release oleh Adobe Systems sebagai aplikasi HTML editor website design (rancang website dan blog) secara visual karena didukung fitur WYSIWYG (What You See Is What You Get). Website designer Pemula tidak lagi berurusan dengan tag kode HTML, CSS maupun Javascript saat merancang website. Software ini lebih praktis dibandingkan harus membuat kode HTML, CSS dan script js. Tutorial berikut menjelaskan bagaimana menggunakan Dreamweaver untuk edit website blog.

Ketika dokumen Adobe Photoshop (download : situs_bisnis.zip) tersimpan dalam bentuk web, maka secara otomatis akan membuat tag html sendiri sehingga tidak perlu susah-payah mengetik kode html. Ini dibuktikan seperti gambar berikut :

dreamweaver for editing website

Website Design : Tutorial Penggunaan Dreamweaver 

1.     Mengubah objek menjadi background website page

Jika image berfungsi sebagai tombol, Anda dapat menambahkan menu pull-down agar tampilan website lebih menarik atau membuat tombol dalam bentuk mouse-over dan sebagainya. Pada bagian ini, kita bahas teknik penggantian objek gambar menjadi Background agar kita dapat memasukkan beberapa komponen di dalamnya (teks maupun grafik).
  1. Bukalah file index.html menggunakan Macromedia Dreamweaver.

    Gambar 1 dreamweaver
  2. Setelah file terbuka, tentukan terlebih dahulu image mana saja yang akan dijadikan background dan bagian mana saja yang akan dijadikan sebagai tombol. Sebagai contoh, klik image di bagian bawah teks New Product.

    Gambar 2 dreamweaver
  3. Di bagian Properties, tertulis Src = images/index_26.gif. Hal itu berarti kita tidak bisa memasukkan teks di atas gambar tersebut karena objek tersebut adalah image, bukan background. Tekan DEL untuk menghapus.

    Gambar 3 dreamweaver
  4. Klik Background URL of cell untuk memilih gambar yang akan dijadikan background. Karena nama file yang baru saja dihapus adalah index_26.gif maka gunakan file tersebut sebagai background.

    Gambar 4 dreamweaver
  5. Ketik images/index_26.gif pada kolom Bg.

    Gambar 5 dreamweaver
  6. Lakukan hal sama pada bagian lain jika ingin dijadikan sebagai background agar kita dapat memasukkan objek berupa teks, animasi, maupun gambar.

2.     Memasukkan objek sebagai elemen website page

Objek yang dimaksud dapat berupa animasi, gambar, maupun teks. Dalam Macromedia Dreamweaver, proses memasukkan objek sangat mudah karena sudah disediakan tool lengkap. Anda tinggal memilih objek apa yang akan dimasukkan. Berikut ini pembahasan masalah teknik memasukkan objek teks.
  1. Letakkan kursor pada tempat yang akan ditambahkan teks.

    Gambar 11 dreamweaver
  2. Pada panel Properties, aturlah beberapa spesifikasi seperti nampak pada gambar berikut.

    Gambar 12 dreamweaver
  3. Ketik beberapa kalimat berisi berita, kemudian aturlah format teks tersebut seperti nampak pada gambar berikut.

    Gambar 13 dreamweaver
  4. Anda bisa memasukkan image di antara teks tersebut. Untuk melakukannya, letakkan kursor di awal paragraf kemudian pilih menu INSERT > IMAGE.

    Gambar 14 dreamweaver
  5. Pilih file gambar yang akan dimasukkan dalam dokumen.

    Gambar 15 dreamweaver
  6. Jika berhasil memasukkan gambar, maka akan terlihat objek tersebut berada di depan paragraf. Namun posisinya masih kurang sempurna karena susunan teks terdorong oleh gambar tersebut.

    Gambar 16 dreamweaver
  7. Agar tampilan rapi, Anda setting posisi gambar sehingga seluruh teks akan berada di sebelah kanan gambar. Untuk melakukannya, pada panel Properties pilih Left untuk Align.

    Gambar 17 dreamweaver

3.     Membuat link navigasi website blog

Menu yang mudah digunakan (user friendly) dapat membantu user  ketika mencari informasi. Sebaiknya gunakan tombol menu yang umum, seperti: Home, Product, Service, dan Contact Us

Pada Macromedia Dreamweaver, kita membuat Pop-up Menu, dan Jumping Menu secara mudah. Anda tidak perlu susah-payah menuliskan script panjang dalam bahasa Javascript karena telah disediakan tool yang sangat mudah dan fleksibel.

3.1. Membuat pop-up menu website page

Keunggulan software Macromedia Dreamweaver dibandingkan aplikasi lain sejenis adalah adanya tool untuk membuat menu pop-up yang dibuat dengan bahasa Java. Bagi yang masih awam dengan Java, tidak perlu bingung karena disediakan panel Behavior untuk memudahkan pembuatan menu Pop-Up.

Sebelum membuat menu Pop-Up harus menyiapkan nama file sebagai link. Sebagai contoh : ketika user memilih menu PC maka yang akan muncul adalah pilihan nama computer seperti Acer, HP, BenQ, dan lainnya. Dan ketika user memilih salah satu opsi (Acer) maka akan terhubung ke file tersebut.

Dengan demikian, Anda harus membuat beberapa file dengan bentuk interface yang sama seperti halaman utama, yaitu menyimpan dengan nama lain (Save As > acer.html). Diasumsikan, Anda telah punya beberapa file sebagai link yang dimaksud.
  1. Pertama, klik menu PC.

    dreamweaver 21 dreamweaver
  2. Jika panel Behaviors belum muncul, aktifkan dulu dengan cara pilih menu Window > Behaviors.

    dreamweaver 22
  3. Pada panel Behaviors (ada di sebelah kanan), klik tombol Add (tanda plus) untuk membuka menu.

    dreamweaver 23.gif
  4. Selanjutnya pilih Show Pop up Menu.

    dreamweaver 24.gif
  5. Setelah klik pilihan tersebut, akan muncul kotak dialog Show Pop-up Menu yang masih kosong.

    dreamweaver 25.gif
  6. Pada Tab Contents, masukkan nama menu pada kolom Text (misal: Acer).

    dreamweaver 26.gif
  7. Kemudian masukkan alamat URL pada kolom Link.

    dreamweaver 27.gif
  8. Selanjutnya pada kolom Target, pilih _parent.

    dreamweaver 28.gif
  9. Untuk membuat menu baru, klik tanda (+) di bagian atas. Lakukan hal sama seperti pada tahap 6.

    dreamweaver 29.gif
  10. Klik TAB APPEARANCE untuk setting warna teks dan background pop-up menu. Tentukan jenis dan ukuran font. Lalu tentukan warna teks dan warna cell ketika mouse berada di atas teks.

    dreamweaver 30.gif
  11. Klik TAB ADVANCED untuk menentukan lebar, tinggi dan warna border kotak pop-up menu.

    dreamweaver 31.gif
  12. Klik TAB POSITION untuk menentukan posisi pop-up menu.

    dreamweaver 32.gif
  13. Setelah selesai klik OK. Untuk melihat hasilnya, klik tombol F12.

    dreamweaver 33.gif
  14. Untuk latihan, buatlah pop-up menu pada tombol lain.

3.2. Membuat tombol Roll-over Image 

Macromedia Dreamweaver selain menyediakan tool untuk membuat Pop-Up Menu juga menyediakan tool untuk membuat Roll-over Image sebagai tombol. Yang harus dilakukan adalah menyediakan 2 gambar berukuran sama tapi warnanya berbeda.
  1. Buatlah duplikasi gambar tombol yang telah ada.

    dreamweaver 41.gif
  2. Kemudian editlah file hasil duplikasi tersebut menggunakan Adobe Photoshop. Pilih menu IMAGE > ADJUSMENT > HUE/SATURATION.

    dreamweaver 42.gif
  3. Setelah muncul kotak dialog HUE/SATURATION, aktifkan pilihan COLORIZE. geser Slider Hue maupun Saturation sesuai kebutuhan. Setelah selesai klik OK, simpan dokumen tersebut dengan menekan CTRL+S.

    dreamweaver 43.gif
  4. Sekarang kembali ke Macromedia Dreamweaver. Klik gambar About Us.

    dreamweaver 44.gif
  5. Hapuslah objek tersebut dengan cara menekan tombol DEL. Selanjutnya pilih menu INSERT > IMAGE OBJECTS > ROLLEVER IMAGE.

    dreamweaver 45.gif
  6. Setelah muncul kotak dialog Insert Rollover Image, berilah nama gambar pada kolom Image name kemudian tentukan gambar asli pada kolom Original Image. Untuk mempermudah pencarian file, klik tombol BROWSE. Tentukan pula file untuk gambar rollover pada kolom Rollover Image.

    dreamweaver 46.gif
  7. Masukkan teks alternate di kolom Alt. Tentukan nama file sebagai link saat tombol tersebut di-klik.

    dreamweaver 47.gif
  8. Untuk melihat hasilnya, tekan tombol F12.



Be Blogger!


Comments

1 komentar:

http://website-download.blogspot.com/2012/01/editing-website-dan-blog-dengan.html?showComment=1398658371836#c5059120731482759645'> 28/04/14 11.12 Reply

duh pusing juga mas,saya belum begitu mahir ,menggunakan dremweaver,

Posting Komentar di Website Design

-

Penelusuran topik khusus di blog ini
Loading