Ebook membuat website dengan dreamweaver mx

download

of 23

  • date post

    12-Aug-2015
  • Category

    Design
  • view

    89
  • download

    8

Embed Size (px)

transcript

<ol><li> 1. BUDIONO www.Ebsof.Com 3/10/2013 Cara Cepat Membuat Website Dengan Dreamweaver MX Ebook ini dibuat supaya lebih mudah dalam memahami dasar dalam membut website menggunakan editor Dreamweaver MX, Editor ini sampe sekarang masih saya gunakan. Untuk Tutorial Tutorial lebih lanjut untuk membuat website dinamis. Silahkan kunjungi www.ebsof.com 2013 </li><li> 2. www.Ebsof.com Membuat Website Menggunakan Dremweaver MX Oke..Kali ini saya akan sedikit berbagi bagaimana cara mendisaign layout seperti di bawahini 1.MembuatKerangka Website a. Buka dreamweaver MX </li><li> 3. www.Ebsof.com b. Double Klik pada HtmLLihat gambar diatas c. Pilih Menu InsertTable d. . Muncul Kotak dialogIsikan seperti gambar di bawah iniKlik OK e. Nah akan muncul seperti gambar di bawah iniklik pada tanda panah di sebelah tulisan 780pilih select table </li><li> 4. www.Ebsof.com f. Lihat gambar dibawahPropertisalignCenter g. Nah sekarang table nya sudah berada di tengah h. Sekarang kita gabungkan 2 kolom untuk membuat bagian header, caranya : Select baris pertama pada kolom pertama dan baris pertama pada kolom kedualihat gambar dibawah iniklikkananTablemarge cells </li><li> 5. www.Ebsof.com i. Maka akan tergabung barisnyalihat gambar di bawahinipada propertisnyaAtur Highnyam enjadi 140untuk melihatny a klik di tempat kosongmaka akan terlihat hasilnya j. Ulangi langkah h untuk baris kedua dan baris keempat , sehingga bentuknya akan seperti gambar di bawah ini k. Klik pada bagian dalam baris ketiga kolom pertamapropertisw=580, h=600 </li><li> 6. www.Ebsof.com l. Pada baris keempat bagian footerisi properties Highnya (H)60 m. Maka akan tampak kerangka / layout nya seperti ini </li><li> 7. www.Ebsof.com n. Setelah itu kita tingga lmenghiasi bagian-bagiannya, sedikit kita kasih pewarna dan bumbu menggunakan css, o. Untuk gambar header bagi anda yang menguasai photoshop bisa anda membuat sebagus mungkin, namun ukurannya harus sesuai H=140 dan W=780px 2. MembuatBagian Menu Lihat gambar disamping, sekarang kita akan membuat menu-menu di dalamnya Hasilnya akan tampak seperti gambar disamping Caranya : Ketik menu apa yang ingin andabuat, misalnya :Home,Profil,galeri BukuTamu,Produk,Kontak, Statistik Sambung di Bawah Sengaja di kosongkan </li><li> 8. www.Ebsof.com Pada penjelasan sebelumnya sudah dijelaskan bagaimana membuat sebuah kerangka website dengan menggunkan table.hasilnya seperti di bawah ini, untuk melanjutkan kelangkah selanjutnysimpan file ini didalam foldernama folder terserahdan nama file nya index.html Kemudian kita akan membuat menu dengan menggunakan css, lihat pada kerangka website di bawah ini, di samping sebelah kanan terdapat bagian menu,,,,pada penjelasan kali ini kita akan bekerja pada ruang menu. </li><li> 9. www.Ebsof.com MEMBUAT BAGIAN MENU Sekarang bagaimana caranya kita membuat bagian menu seperti gambar disamping dengan menggunakan macromedia dreamweaver MX 2004 / Atau 8 untuk mengawali langkah dalam membuat menu lihat gambar di bawah ini Pada saat anda meng klik bagian menu, maka secara default kursor anda akan berada di tengah-tengah, cara meletakkan kursor agar berada di atas yaitu : atur propertisnyapada menu vert (vertical) ganti default menjadi top Ketikkan menu-menu apa saja yang ingin anda tampilkan di website anda </li><li> 10. www.Ebsof.com Disini saya mengisi menu denganhome,profil,gallery,buku tamu,kontak,Produk,statistik (gunakan spasi untuk memisahkan setiap menu) Setelah seperti gambar disamping, sekarang buat link pada masing-masing menu,,,,,karena ini dasar, dan merupakan website statis(tidak menggunakan php) cara untuk membuat link cukup mudah,,,,,blok pada setiap menu,kemudian pada propertisnya link nya isi seperti berikut : Homeindex.html Profilprofil.html Gallerygallery.html begitu seterusnya -- setelah selesai tampilannya akan seperti ini NB : untuk link sebaiknya jangan menggunakan huruf besar dan spasi </li><li> 11. www.Ebsof.com langkah selanjutnya adalah memberi css, pada bagian menu, klik atau letakkan kursor pada bagian menu pada propertisnya,,,,Stylemanage Styles Muncul sebuah kotak dialog = edit Syle Sheetklik new </li><li> 12. www.Ebsof.com Setelah klik new akan muncul kotak dioalog= new css style.lihat gambar di bawah ini 1. Pada Selector TypeTag (Redefines The Look Of A Specific Tag) 2. Pada Tagklik tanda panahcari dengan hurufa 3. Klik OK Setelah itu muncul kotak dialog = Save Style Sheet File As Disini adalah perintah untuk menyimpan css yang nanti akan kita buat..lihat gambar dibawah ini. </li><li> 13. www.Ebsof.com 1. Save initempat dimana akan disimpan css yang akan kita buat inisimpan di satu folder dengan index.html yang sudah kita buat sebelumnya 2. File namenama dari file css yang akan kita buat,terserah mau kasih nama apadi sini saya beri nama warna 3. Save as typepastikan tipe save nya .css 4. Setelah pengaturan diatas selesai klik tombol save Setelah itu akan muncul kotak dialog seperti ini </li><li> 14. www.Ebsof.com A. Pada Category Type 1. Fontterserah mau pilih yang manadisini saya pilihArial,Helveatica,sans-serif 2. Pilih warna yang sesuai 3. Decorationnone Jangan di klik OK Terlebih dahulu karna masih ada lanjutannya Lihat gambar dibawah ini. </li><li> 15. www.Ebsof.com B. Background 1. Pilh warna background Jangan di klik OK Terlebih dahulu karna masih ada lanjutannya Lihat gambar dibawah ini. </li><li> 16. www.Ebsof.com C. Block 1. Displayblocks 2. Sedikit catan, untuk display blocks sangat perlu, maka jangan sampai terlewati, Klik Apply Untuk melihat hasilnya, namun jangan tekan OK, karena kita belum selesai Jangan di klik OK Terlebih dahulu karna masih ada lanjutannya Lihat gambar dibawah ini. </li><li> 17. www.Ebsof.com D. Box 1. Heightukuran kotak setiap menu 2. Paddingjarak box atau kotak menu,,,,Setting seperti diatas Jangan di klik OK Terlebih dahulu karna masih ada lanjutannya Lihat gambar dibawah ini. </li><li> 18. www.Ebsof.com E. Border 1. Setting mengikuti seperti gambar diatas Jangan di klik OK Terlebih dahulu karna masih ada lanjutannya Lihat gambar dibawah ini. </li><li> 19. www.Ebsof.com F. Positioning 1. Height25 2. ApplyOK Jika sudah selesai lihat pada bagian, atas code, akan muncul file baru bernama warna.css simpan file di dalam folder dimana terdapat file index.html yang sudah kita buat sebelumnya </li><li> 20. www.Ebsof.com Ok bentuk menu sudah kita buat,,,,sekarang kita tambahkan sedikit bumbu css lagi untuk setiap link menu,,,,maksudnya disini ,,,,apabila kursor di berhenti pada salah satu menu,,,,maka warna box menu akan berubah.begitulah.. Ok sekarang kita tambah warna.css dengan kode css lagi Letakkan kursor di bagian menu kembali, kemudian pada propertisnya pilih StyleManage Style Kemudian klik warna.csspilih edit </li><li> 21. www.Ebsof.com Muncul kotak dialog kembali,,lihat disana terdapat huruf a,,,,itu merupakan css yang kita buat tadi,,,klik new Muncul kotak dialog lagi,,, 1. pada Selector Type pilihAdvanced (IDs,contextual selector,etc) 2. Kemudian pada selectorcari a.hover 3. OK Muncul kotak diaolog lagi setting seperti dibawah ini </li><li> 22. www.Ebsof.com Pada bagian Typeubah color nya Jangan di klik OK Terlebih dahulu karna masih ada lanjutannya Lihat gambar dibawah ini. </li><li> 23. www.Ebsof.com Pada background juga ubah warna background color nya Jika sudah klik OKkemudian Seave ALL Jalankan pada browser Mozilla atau IE, dengan menekan F12,,,lihat perubahannya.. Penulis dilahirkan di Selatpanjang pada tanggal 21 Oktober 1990. Saat ini penulis sedang menekuni dunia Internet, khususnya dibidang Bisnis Online, selain itu penulis juga memiliki hobi di bidang pemrograman website, Designer Web Dengan menggunakan Pemrograman PHP, CSS,HTML, Jquery, dan database MYSQL. Untuk Tutorial-Tutorial Yang lainnya Silahkan Cek di www.Ebsof.com </li></ol>