Mengenal membuat website dengan Dreamweaver

Assalamu’alaikum warrahmatullahi wabarakatuh

Halo para pembaca sekalian, sudah lama ya saya tidak sharing disini. Afwan jiddan. Nun sewu. Punteun ah :p

Saya kemarin-kemarin sibuk beresin S1 saya. Suatu ketika saya bertemu dengan guru SMA saya disuatu tempat, lalu beliau pun berpesan ”Jangan lupa tahajjud dan sedekah. Kalo tidak bisa sedekah dengan uang, sedekah saja dengan ilmu,” subhanalloh, kata-kata itu terus terngiang di hati dan pikiran saya. Barakallohufikum guruku.

Baik kita mulai pembahasan kita. Pada kesempatan ini, yuk kita mengenal belajar membuat website dengan Dreamweaver.



Dreamweaver

Apa itu Dreamweaver? Dreamweaver adalah sebuah software dari Adobe (dulu masih dimiliki oleh Macromedia dan namanya adalah Macromedia Dreamweaver) yang digunakan untuk membuat website. Dengan kelengkapannya, software ini bisa membuat anda nyaman sekaligus menyenangkan bekerja membuat sebuah website. “Alat-alat perang” yang ada didalamnya sangat variatif dan aplikabel. Dreaweaver juga dilengkapi dengan panel-panel yang berguna untuk kemudahan akses fitur untuk website anda. Contohnya panel properties. Disana terdapat atribut-atribut, opsi-opsi atau juga setingan untuk website anda. Pada bagian kanan, terdapat panel-panel seperti files yang menampilkan site anda, panel history, panel CSS style, frames, dan lain sebagainya.




Mode View

Terdapat beberapa opsi dalam membuat website didalam Dreamweaver. Opsi-opsi tersebut adalah sebagai berikut:

Code

Dalam view ini, desainer web membuat sebuah web dengan tampilan sintaks-sintaks. Yang terlihat hanyalah kode-kode seperti HTML, CSS, PHP, atau yang lainnya. Tipikal programmer yang biasa praktis dengan tampilan coding mungkin lebih menyukai tampilan ini. Karena mereka memang sudah terbiasa dengan tampilan seperti itu. Kerjanya mengetik, mengetik dan mengetik. Apa tidak jereng ya??

Gambarnya bisa anda lihat pada gambar dibawah ini:



Split

View ini merupakan tampilan gabungan antara code dengan desain. Terlihat pada bagian atasnya terdapat tampilan sintaks-sintaks, dan pada bagian bawah bisa dilihat tampilan desain yang sedang dibuat. Kadang untuk membuat sebuah halaman seperti form, seorang disainer web membutuhkan tampilan yang “real time” dan juga tampilan kode yang direksional atau langsung pada kode tersebut. Mode split ini mungkin cocok untuk mereka.



Desain

Yap, setelah membaca tentang mode tampilan sebelumnya, mungkin anda sudah bisa menebak apa itu tampilan disain? Tampilan disain adalah tampilan yang langsung pada disain tersebut tanpa harus melihat kode atau sintaks format yang bersangkutan. Layaknya membuat sebuah halaman yang realtime, tampilan ini cocok bagi desainer web yang praktis dan juga realtime.




Langkah membuat website



Ada banyak cara yang dapat anda lakukan dalam membuat website di Dreamweaver, namun berikut adalah langkah-langkah praktis penulis dalam membuat website.

Disain tampilan

Seperti terlihat diatas bahwa, hal yang pertama kita lakukan adalah mendesain tampilan website menggunakan program grafik desainer. Dalam hal ini adalah Adobe Photoshop. Dengan Photoshop, kita bisa bereksplorasi membuat desain web yang ada dalam imajinasi kita sehingga kita tuangkan kedalam bentuk disain web. Ada baiknya anda juga belajar membuat desain di program Photoshop ini.


Slicing dan optimasi

Sederhananya, slicing adalah proses membagi-bagi bagian dari sebuah gambar di Photoshop sehingga nantinya kita bisa mengoptimasi gambar tersebut agar memenuhi kebutuhan ideal sebuah website.

Kebutuhan ideal disini maksud saya adalah dikarenakan dunia website berkaitan dengan internet, dan internet adalah jaringan komputer yang memiliki trafik yang berubah-ubah. Kadang sepi (saat malam) dan juga kadang padat (pada saat jam kantor). Trafik yang banyak mengakibatkan akses ke situs kita menjadi menurun kecepatannya.

Untuk meminimalisir akses yang lambat, maka kita bisa melakukan optimasi untuk gambar yang akan kita gunakan/tampilkan untuk website kita.

Optimasi adalah proses membuat gambar yang ada, sebisa mungkin disesuaikan kualitasnya, dan juga ukurannya. Bila gambar yang akan tampil sederhana, ya misalnya bila dihitung hanya berkisar antara 4 atau 2 warna, maka kita direkomendasikan menggunakan format gambar yang berwarna sedikit seperti PNG atau GIF. Gambar tombol atau sebuah border biasanya memiliki warna yang sedikit. Untuk itu kita gunakan format gambar yang memiliki warna yang sedikit. Intinya, optimasi adalah proses membuat gambar berukuran kecil, namun kualitasnya tidak terlalu rendah, agar penggunaan gambar yang kita gunakan optimal.

Nah disamping mendisain, Photoshop juga bisa digunakan untuk mengoptimasi gambar. Setelah terlebih dahulu dislice, maka pada bagian save for web, kita bisa mengoptimasi gambar tersebut. Kita bisa mengaturnya apakah bagian yang dislice berformat JPG, PNG atau GIF. Apakah berkualitas 100%, 75% atau berapapun. Apakah berwarna 256 atau 128 atau 2. Disana kita bisa menyesuaikannya.

Lalu setelah itu, kita bisa menyimpannya dalam bentuk web berformat HTML.

Mengedit desain

Lalu langkah selanjutnya adalah mengedit desain. Desain yang sudah menjadi HTML, kita buka di Dreamweaver. Nah, disini kita bisa menambahkan teks, menambahkan gambar, menambahkan Java Script, mengganti gambar, merubah ukuran gambar, menambahkan tabel baru, membuat form, membuat link (dua jam kemudian..) memasukkan flash, dan masih banyak lagi. Inilah inti dari Dreamweaver, kita memanipulasi website kita dengan elemen-elemen lainnya.

Upload file

Upload adalah proses mengirim file dari komputer lokal kedalam webserver. Agar web kita bisa diakses di internet, maka file tersebut harus berada pada webserver. Tebak program apa yang bisa anda gunakan? Tidak lain dan tidak bukan adalah Dreamweaver. Yap, program ini juga memiliki fitur FTP didalamnya. Memudahkan kita untuk langsung mengakses webserver sehingga bisa langsung mengapload file-file kita.

Disamping itu, untuk mengapload kita juga bisa menggunakan cara lainnya yaitu dengan menggunakan program FTP khusus seperti FileZilla. Kita pun juga bisa menggunakan browser untuk meng-upload bila webserver anda mempunyai fitur cpanel didalamnya. Mengupload melalui browser ini seperti layaknya saat kita menambahkan gambar kedalam Facebook atau Friendster atau blog kita. Namun penulis merekomendasikan anda menggunakan program FTP untuk proses uploading ini karena lebih cepat.

Testing

Langkah terakhir adalah mentesting website kita. Kita mengecek apakah kita bisa mengakses file-file yang telah di upload oleh kita atau tidak. Jika belum bisa, mungkin ada kesalahan pada bagian registrasi di webserver. Biasanya webserver membutuhkan waktu untuk mengaktifkan akun anda. Hal lain penyebabnya adalah direktori pada host/webserver yang anda gunakan. Biasanya agar website anda dapat diakses di internet, anda harus masuk kedalam direktori tertentu. Misalnya public_html, www, dan lain sebagainya.

Penutup

Yap mungkin sekian dulu sharing saya kepada anda. Setiap saya membaca sebuah blog, tentulah ada satu dua hal yang membuat saya bertanya-tanya tentang materi tersebut. Dan tentulah anda pun juga begitu. Banyak pertanyaan yang timbul seputar materi artikel ini. Untuk itu saya meminta maaf sebelumnya dan saya membuka pintu sebesar-besarnya kepada anda bila ada pertanyaan yang ingin ditanyakan. Mudah-mudahan bisa saya jawab dengan baik insyaALLOH. Anda bisa mengirim e-mail ke saya ke jalanroda[at]yahoo.com, atau mungkin langsung ke YM saya di id jalanroda

Anda juga bisa belajar secara lebih detail melalui video tutorial yang kami buat berjudul Video Tutorial Membuat Website Dengan Dreamweaver. Video ini berbentuk video interaktif berbentuk flash. Berisi materi teori dan praktek membuat website dengan Dreamweaver. Materi yang dibahas adalah sebagai berikut:

1. Bagian 1 : Penjelasan Singkat Mengenai Banyak Cara Untuk Membuat Website
2. Bagian 2 : Mulai Bekerja Dengan Dreamweaver
3. Bagian 3 : Menambahkan Graphic/Image/Gambar Kedalam Halaman Web
4. Bagian 4 : Memanage, Testing, Dan Mempublish Website
5. Bagian 5 : Mengenal Css Lebih Dalam
6. Bagian 6 : Membuat Layout Menggunakan Css
7. Bagian 7 : Membuat Table
8. Bagian 8 : Membuat Frame Halaman
9. Bagian 9 : Membuat Halaman Interaktif Dengan Behaviour
10. Bagian 10 : Bekerja Dengan File Multimedia
11. Bagian 11 : Bekerja Dengan Form
12. Bagian 12 : Bekerja Dengan Content Yang Dinamis
13. Bagian 13 : Lebih Jauh Dengan Website Dinamis



Total durasinya adalah sekitar 6 jam, bentuknya DVD data, dan bisa anda dapatkan seharga Rp. 57.000* saja.

Anda bisa memesannya melalui:

Hartono Gunawan
e-Mail : jalanroda[at]yahoo.com
YM : jalanroda

Loka Dwiartara
e-Mail : al_k_ym[at]yahoo.com
YM : al_k_ym

Website

http://ilmuwebsite.com

Baiklah terima kasih telah berkunjung. Selamat mencoba dan semoga bermanfaat. Wassalamu’alaikum warrahmatullahi wabrakatuh.

* harga sewaktu-waktu bisa berubah