Membuat Web pada Dreamweaver CS5

Sebenarnya sudah banyak yang bisa menggunakan Adobe Dreamweaver CS5 atau CS5.5 untuk membuat sebuah website, namun ada beberapa fitur yang jarang sekali digunakan oleh para web programmer saat ini, yaitu fitur Site.

Apa itu Site?

Site merupakan fitur untuk mengelola semua file yang ada pada website yang kita buat. Bukan hanya itu, fitur Site ini akan mengaktifkan fitur lainnya yang sangat mempermudah kita untuk mengembangkan website di Dreamweaver ini.

Live Preview dan Preview in Browser

Salah satu fitur pada Dreamweaver yang mempermudah web programmer adalah Live Preview dan Preview in Browser. Jika kita tidak menggunakan fitur Site, maka kita harus membuka web browser secara manual, dan menulis alamat URL untuk melihat preview-nya. Tapi, jika kita menggunakan fitur Site, maka kita hanya perlu menekan tombol F12, maka browser akan otomatis terbuka dan menuju ke URL file tersebut secara otomatis. Bagaimana? Cukup membantu?

Konfigurasi Site anda

Jika kita ingin menggunakan fitur Site ini, maka kita perlu melakukan beberapa langkah saja. Langkah-langkah pengaturan Site pada Dreamweaver CS sampai CS3 berbeda dengan langkah pada Dreamweaver CS4 dan CS5. Untuk kali ini saya hanya memaparkan langkah-langkah pada Dreamweaver CS5.

Langkah 1 : Klik menu Site, New Site…

Langkah 2 : Pada bagian Site, masukkan nama website anda pada isian Site Name. Pada Local Site Folder, masukkan alamat folder dimana anda menyimpan file-file website anda.

Site Name digunakan untuk penamaan website pada dreamweaver saja, tidak berpengaruh terhadap coding anda. Sedangkan Local Site Folder dapat ditempatkan dimana saja, dan sebaiknya tidak diletakkan pada server (htdocs atau www). Karena Local Site Folder bukanlah folder yang akan dijalankan pada server anda.

Sampai langkah ini sebenarnya anda telah selesai mengatur fitur Site, namun jika anda menggunakan bahasa pemrograman web (ASP, JSP atau PHP)maka fitur seperti Live Preview dan Preview in Browser tidak akan berjalan baik.

Langkah 3 : Pada bagian Server, klik tanda plus (+) untuk menambahkan sebuah server.

Lalu tulis nama server anda, lalu pada Connect using diubah menjadi Local/Network.

Pada bagian Basic, pilih folder yang akan digunakan untuk menyimpan data website di server anda pada Server Folder. Pada Web URL, tulis alamat URL untuk web anda.

Pada bagian Advanced, ubah Server Model sesuai dengan tipe server yang anda gunakan. Dalam contoh saya gunakan server PHP MySQL untuk xampp, wamp dan sebagainya.

Klik Save

Beri tanda centang pada checkboxTesting. Lalu klik Save.

Maka Dreamweaver akan mencari semua file yang ada pada Local Folder anda, sehingga hasilnya akan menjadi seperti pada gambar di bawah ini.

TestDW1 merupakan Site Name yang telah dibuat sebelumnya.

Menggunakan Live Preview dan Preview in Browser

Untuk menggunakan fitur Live Preview, anda cukup membuka file yang anda inginkan. Lalu klik tombol Live View. Maka anda dapat melihat preview website anda dengan sempurna pada Dreamweaver secara langsung. Anda dapat melihat pada URL file yang dibuka langsung menuju pada URL yang ada pada server anda. Menakjubkan bukan?

Untuk fitur Preview in Browser, anda cukup menekan tombol F12 pada keyboard atau memilih browser pada tombol Preview in Browser pada layar kerja anda.

Jika anda ingin menambahkan daftar browser yang digunakan, cukup klik Edit Browser List. Dan jika anda ingin melihat tampilan website anda pada perangkat mobile, maka pilih Preview in Device Central.