Membuat Menu Flash Dengan Dreamweaver

Document Sample
Membuat Menu Flash Dengan Dreamweaver Powered By Docstoc
					Saya akan membagikan kembali sebuah tutorial mengenai pembuatan menu untuk website.
Kali ini yang akan saya paparkan adalah bagaimana cara membuat menu flash menggunakan
Dreamweaver. Tutorial tersebut akan saya kupas pada bagian pertama yaitu postingan yang
sedang Anda buka sekarang. Pada bagian kedua, saya juga akan menjelaskan langkah-langkah
memasukkan flash menu tersebut ke dalam blog Anda yang di blogspot. Bagi pembaca yang
mungkin baru mendengar tentang Dremaweaver, saya sarankan untuk membaca postingan
mengenai Dreamweaver disini.
Berikut langkah-langkah yang akan kita lakukan untuk membuat menu flash dengan
Dreamweaver:

   1. Buka program Macromedia Dreamweaver dari komputer Anda.
   2. Buatlah sebuah dokumen baru dengan jenis misalnya HTML. Pilih menu File -> New,
      kemudian pilih kategori Basic Page dan gunakan tipe HTML.
   3. Simpan terlebih dahulu dokumen tersebut. Beri nama misalnya "menu_flash.html".
      Saran saya, simpanlah di dalam sebuah folder baru, beri nama folder misalnya "menu".
   4. Masuklah ke dalam layar design.


   5.                                Pilih menu Insert -> Media -> Flash Button, maka akan
        muncul sebuah kotak dialog pembuatan tombol flash yang akan digunakan sebagai menu
        pada website.




           o   Sample. Menunjukkan preview dari tombol flash yang kita pilih.
           o   Style. Bentuk dari tombol yang kita bisa kita pilih. Sebagai contoh kita pilih
               "Slider".
           o   Button Text. Tulisan yang terlihat pada tombol. Sebagai contoh kita tulis "Home".
           o   Font. Jenis huruf dari button text.
           o   Size. Ukuran huruf dari button text.
       o  Link. Alamat URL yang akan dituju bila tombol menu flash tersebut diklik. Anda
          bisa memilih halaman/dokumen dari website yang sedang Anda desain pada
          komputer Anda dengan mengklik tombol Browse. Pada contoh ini kita akan me-
          link kan ke halaman luar misalnya: "http://www.banditbatak.com". Tuliaslah
          URL tersebut pada isian Link.
       o Target.Untuk memilih target halaman ketika menu tersebut diklik.
       o Bg color. Memilih warna background dari tombol flash yang sedang kita buat.
          Pilihlah transparent dengan mengklik tombol kecil yang berdiagonal warna
          merah.
       o Save as. Nama file flash yang sedang kita buat. Simpanlah dengan nama misalnya
          "home.swf"
6. Setelah semua dirasakan cukup dan benar, klik tombol Save.
7. Pada dukumen kerja Dreamweaver akan muncul tombol flash menu yang telah kita buat
   tadi.




8. Kita bisa menambah menu flash baru disamping menu Home yang telah kita buat
   tersebut. Misalkan kita ingin membuat menu lain yang letaknya sejajar dengan menu
   Home tersebut sehingga tampil secara horizontal. Terlebih dahulu letakkan pointer di
   sebelah kanan tombol flash menu Home, kemudian lakukan hal yang sama seperti
   membuat menu flash dengan nama Home tersebut dari langkah 5 -6. Sebagai contoh saya
   membuat menu flash baru bernama "Tutorial Website" dengan link : "http://tutorial-
   website.blogspot.com" dan saya simpan dengan nama "tutorial_website.swf". Hasilnya
   akan tampak seperti gambar di bawah ini.
9. Di dalam folder "menu" yang Anda jadikan sebagai tempat menyimpan dokumen
   "menu_flash.html" tadi telah bertambah 2 buah file flash yang bernama home.swf dan
   tutorial_website.swf




10.
       1. Buka kembali file "menu_flash.html" dengan menggunakan program
          Dreamweaver pada komputer Anda.




       2. Jika Anda masih berada pada layar Design, silahkan berpindah ke layar Code
          untuk melihat code HTML dari flash menu yang telah kita buat.



       3. Perhatikan gambar di bawah ini. Struktur yang yang dimulai dari tag
          <object>sampai </object> merupakan stuktur HTML untuk 1 buah tombol
          menu flash yang telah kita buat (menu Home). Agar lebih jelas, kode untuk 1
          buah tombol menu flash tersebut adalah yang diberi pembatas garis warna merah
          tua pada gambar di bawah (baris 22-26). Selanjutnya, struktur yang serupa yang
          berada di bawahnya yang dimulai dari tag <object> sampai </object> merupakan
          kode HTML untuk tombol menu flash yang kedua menu (Tutorial Website).
          Kode-kode tersebutlah yang nantinya akan kita masukkan ke dalam template
          blogspot.
4. Karena kita mendesain tombol menu flash tersebut pada komputer pribadi kita,
   maka kita perlu memasukkan terlebih dahulu file flash tombol menu yang telah
   kita buat tersebut ke internet agar bisa digunakan secara online. Pada folder
   "Menu" yang kita jadikan untuk dokumen Dreamweaver bisa kita lihat 2 buah file
   flash tombol menu, yaitu home.swf dan tutorial_website.swf. File flash tersebutlah
   yang harus kita upload ke internet. Anda boleh meng-upload ke server hosting
   mana saja.




5. Sekarang perhatikan kode HTML untuk salah satu menu flash di bawah ini.
   <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
   codebase="http://download.macromedia.com/pub/shockwave/cabs/flash
   /swflash.cab#version=5,0,0,0" width="147" height="34">
   <param name="movie"
   value="file:///C|/Users/NESTORIKO/Documents/menu/home.swf" />
   <param name="quality" value="high" />
   <embed src="file:///C|/Users/NESTORIKO/Documents/menu/home.swf"
   quality="high"
   pluginspage="http://www.macromedia.com/shockwave/download/index.c
   gi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-
   flash" width="147" height="34" ></embed>
   </object>
   Kode yang diberi warna merah merupakan lokasi file flash tombol menu (menu
   Home) tersimpan pada komputer kita. Karena kita ingin menggunakan file flash
   yang telah kita simpan secara online, gantilah kode merah tersebut dengan URL
   file flash tombol menu yang telah kita hosting-kan.
   6. Lakukan langkah 5 tersebut untuk menu lainnya, yaitu menu Tutorial Website
      sehingga kode keseluruhan untuk kedua menu flash tersebut adalah:
       <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
       codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#v
       ersion=5,0,0,0" width="147" height="34">
       <param name="movie" value="http://domainhosting.com/home.swf" />
       <param name="quality" value="high" />
       <embed src="http://domainhosting.com/home.swf" quality="high"
       pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_
       Version=ShockwaveFlash" type="application/x-shockwave-flash" width="147"
       height="34" ></embed>
       </object>

       <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
       codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#v
       ersion=5,0,0,0" width="147" height="34">
       <param name="movie" value="http://domainhosting.com/tutorial_website.swf" />
       <param name="quality" value="high" />
       <embed src="http://domainhosting.com/tutorial_website.swf" quality="high"
       pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_
       Version=ShockwaveFlash" type="application/x-shockwave-flash" width="147"
       height="34" ></embed>
       </object>

       Ingat, ganti kode yang diberi warna merah dengan URL dari file flash tombol
       menu yang telah Anda hosting-kan

   7. Sekarang buka blogger.com, kemudian login untuk masuk ke dalam akun
       blogspot Anda.
   8. Klik link Tata Letak kemudian pilih sub tab menu Edit HTML
   9. Silahkan backup terlebih dahulu template pembaca agar jika terjadi kesalahan bisa
       mengembalikannya kembali. Untuk melakukannya silahkan klik link Download
       Template Lengkap pada bagian Backup/Restore Template.
   10. Beri centang pada kotak kecil disamping tulisan Expand Template Widget.
   11. Carilah kode berikut pada template pembaca tersebut:
       <b:includable id='description'>
       <div class='descriptionwrapper'>
       <p class='description'><span><data:description/></span></p>
       </div>
       </b:includable>
       </b:widget>
       </b:section>
       </div>
   12. Copy paste stuktur HTML dari menu flash yang ada pada langkah 6 tepat di
       bawah kode yang Anda temukan pada langkah 11 di atas.
   13. Klik tombol SIMPAN TEMPLATE

Silahkan klik di sini untuk melihat contoh hasilnya. Jika masih ada langkah yang belum
dipahami, silahkan bertanya melalui kolom komentar ya..Saya tunggu loh.. :D

				
DOCUMENT INFO
Shared By:
Stats:
views:3748
posted:12/6/2009
language:Malay
pages:5
Description: Tips menu flash dengan dreamweaver