Dreamweaver
Dreamweaver adalah software aplikasi desain web visual yang biasa dikenal dengan istilah WYSIWYG—What You See Is What You Get—intinya Anda tidak harus berurusan dengan tag-tag HTML untuk membuat sebuah situs. Macromedia belum lama ini telah mengeluarkan rilis terbaru dari Dreamweaver yaitu Dreamweaver MX, dengan penambahan beberapa fasilitas baru di dalamnya. Dreamweaver tidak hanya dapat digunakan oleh para desainer web, namun juga dapat digunakan oleh programer untuk membangun halaman internaktif karena Dreamweaver MX mendukung pula PHP, ColdFusion, ASP.NET dan lain-lain. Menurut survey yang dilakukan oleh Pantone.com.
www.pantone.com/products/products.asp?idArticle=209&idArea=1, pengguna Dreamweaver adalah 59% dari seluruh koresponden yang disurvey dan memang digunakan tidak hanya oleh desainer, tapi juga programer.
Dreamweaver MX menawarkan dua layout view untuk dijadikan sebagai tampilan kerja saat Anda membuat halaman web. Setelah instalasi, Dreamweaver MX akan memberikan opsi: Macromedia Dreamweaver MX Workspace atau Macromedia Dreamweaver 4 Workspace. Anda dapat mengubah-ubah tampilan ini lewat menu preferences, Modify > Preferences > Change Workspace. Pilihan ini tentu saja terserah Anda, pada tutorial ini saya akan menggunakan Dreamweaver MX Workspace.
Berikut ini penjelasan untuk elemen-elemen workspace seperti telah tertera pada gambar. Document Window adalah tempat di mana Anda dapat membuat halaman web secara visual, kode, atau keduanya. Insert panel adalah tempat Anda dapat memasukan image, Flash movie, table, atau elemen lain. Insert panel ini serupa dengan menu Insert pada menu bar. Untuk memunculkan panel ini, klik Windows > Insert atau tekan Ctrl-F2. Property Inspector berguna untuk melakukan pengeditan pada suatu elemen di Document Window. Document Toolbar berguna untuk mengubah tampilan dari disign/visual view, code view, atau keduanya sekaligus. Selain itu juga untuk memberi titel pada dokumen, melihat tampilan di browser. Panels Group merupakan kumpulan dari panel-panel Dreamweaver MX.
Pada bagian ini kita akan membuat halaman web sederhana dengan pemformatan dasar pada teks, link, anchor, dan Page Properties.
Bekerja dengan Teks
Pada dasarnya Dreamweaver tidak jauh berbeda dengan program pengolah kata dalam memformat teks. Namun terdapat sedikit perbedaan karena Dreamweaver menggunakan HTML. Untuk memformat teks dapat kita lakukan dengan menggunakan Property Inspector
Heading
Heading (Gambar 3) digunakan untuk membuat judul dari dokumen atau sub-subjudul berbagai level. Misalnya Anda menggunakan Heading 1 untuk judul, Heading 2 untuk subjudul tingkat pertama, dan sebagainya. Anda juga dapat menggunakan insert panel, pada Insert Panel, klik Tab Text.
Paragraf dan Line Break
Bila kita menekan Enter pada pengolah kata, maka akan menghasilkan paragraf baru. Demikian pula pada Dreamweaver. Namun paragraf dalam HTML () secara default menghasilkan jarak lebih besar daripada jarak antarbaris. Jika kita ingin antarbaris tidak ada jarak, maka kita membutuhkan
di HTML. Untuk berpindah baris dan bukan paragraf kita menggunakan Shift-Enter, atau Insert > Line Breaks.
Memformat Teks Dengan Property Inspector
Seperti yang sudah kita bahas sebelumnya, Propery Inspector berguna untuk melakukan pengeditan pada sebuah elemen HTML. Kita akan menggunakan Property Inspector ini untuk memformat teks, ukuran, warna, dan perataan paragraf. Untuk memunculkan Property Inspector yaitu dengan Window > Properties atau dengan menekan Ctrl-F3.
Anda dapat memilih jenis font sesuai dengan selera Anda, namun terdapat 5 jenis font yang yang umum digunakan untuk halaman web, karena hampir semua komputer memiliki jenis huruf ini: Arial, Times New Roman, Courier New, Georgia, dan Verdana. Untuk mengubah teks yang telah Anda ketik yaitu dengan memilih teks yang ingin diubah, kemudian pilih jenis font yang ingin Anda gunakan. Dalam pilihan font dari drop down Property Inspector terdapat beberapa jenis huruf lain yang dipisahkan dengan koma. Pertama-tama browser akan membaca font pertama untuk ditampilkan di browser, bila font pertama tidak terinstal di komputer maka akan dilanjutkan dengan font kedua, kemudian ketiga, dan seterusnya. Font default adalah Times New Roman.
Membuat halaman web pertama
Dari menu File pilih New.
Tentukan title, warna background dan link untuk halaman web Anda. Dari menu Modify, pilih Page Properties.
Untuk mengganti warna background dan link, klik pada icon . Sedangkan untuk mengganti background image, klik pada tombol Browse.
Title = title atau judul halaman web
Background image = image yang digunakan sebagai background
Text = warna teks
Links, Visited Links, Active Links = warna link
Mendefinisikan local site
Pada bagian Site Name, tuliskan nama web Anda. Misalnya Gratisan. Sedangkan Local Root Folder adalah folder tempat Anda akan menyimpan semua file untuk web yang Anda buat, termasuk file images, audio, javascript, css, dan sebagainya. Klik pada icon untuk mem-browse.
Setelah selesai klik OK.
Membuat jump menu
Pada bagian When selected, Go to URL pilih file yang akan dibuka. Caranya dengan mengklik tombol Browse dan memilih file yang diinginkan, atau langsung ketikkan path file yang akan dibuka. Untuk file yang akan dibuka Anda bisa memilih file pada situs yang sama atau bisa juga berupa alamat web, misalnya http://www.yahoo.com
Membuat rollover image
Kalau Anda rajin menjelajah internet tentu sering menemui situs yang memakai efek rollover image. Efek tersebut dibuat dengan menggunakan javascript. Untuk membuat efek tersebut Anda harus menuliskan kode javascript tersebut. Tapi dengan bantuan Macromedia Dreamweaver Anda dapat membuat rollover image tanpa harus menuliskan sebaris pun kode javascript. Penasaran ? Ikuti langkah di bawah ini :
Untuk Dreamweaver 3, dari menu Insert, pilih Rollover Image.
Untuk Dreamweaver 4, dari menu Insert, pilih Interactive Images - Rollover Image. Maka akan muncul kotak dialog seperti di bawah ini :
Image Name = Nama image
Original Image = Gambar asli
Rollover Image = Gambar yg dijadikan sebagai rollover
Go to URL = Halaman web yang akan dituju
Membuat tabel
Langkah ini sangat penting untuk dicermati karena hampir semua halaman web memakai tabel. Anda tidak akan dapat membuat halaman web yang warna-warni tanpa unsur tabel. Anda juga tidak dapat membuat halaman web seperti halaman yang sedang Anda baca ini tanpa tabel. Untuk membuat dan memodifikasi tabel pada Dreamweaver caranya adalah sebagai berikut :
(Supaya tutorial ini lebih maksimal hasilnya ada baiknya Anda membaca artikel di sini terlebih dahulu)
Dari menu Insert, pilih Table. Atau tekan Ctrl + Alt + I.
Rows = Jumlah baris
Columns = Jumlah kolom
Width = Lebar tabel yang bisa dinyatakan dalam persen maupun dalam pixel
Border = Ukuran border tabel
Hasilnya adalah seperti gambar di bawah ini.
Untuk mengganti warna background pada tabel, letakkan pointer mouse pada cell (kolom atau baris --pada gambar di bawah ditandai dengan tanda silang warna merah--) yang akan Anda ganti warnanya lalu klik icon yang terletak pada Properties.
Untuk mengganti warna background lebih dari satu baris atau kolom drag pointer mouse dari cell yang satu ke cell selanjutnya.
Mendeteksi browser yang dipakai pengunjung web
Seperti kita ketahui bersama antara Netscape Navigator dan Internet Explorer terdapat sedikit ketidakcocokan. Maksudnya ada kalanya suatu halaman web jika dilihat dengan IE dapat tampil dengan bagus sementara jika dilihat dengan NN agak sedikit acak-acakan. Atau sebaliknya.
Anda sebagai seorang designer web tentunya ingin mendapatkan tampilan web yang sempurna, baik jika dilihat dengan IE maupun NN. Untuk mengatasi masalah tersebut sebenarnya tidak susah-susah amat, salah satu caranya adalah dengan mendeteksi browser yang dipakai oleh client atau orang yang melihat web kita. Lalu halaman web yang akan ditampilkan disesuaikan dengan browser tersebut. Misalnya jika yang dipakai adalah IE maka yang ditampilkan adalah file satu.html, sedangkan jika yang dipakai adalah NN yang ditampilkan adalah file dua.html.
Kita akan mencoba membuat pendeteksi browser dengan menggunakan Macromedia Dreamweaver. Ikuti langkah-langkah berikut ini :
Dari menu Window, pilih Behaviors atau dengan menekan F8.
Dari combo box Events For, pilih IE 4.0. Tekan tombol , lalu pilih Check Browser.
Maka akan muncul window Check Browser seperti terlihat pada gambar di samping. Di sini Anda harus melakukan beberapa pengisian.
Jika yang digunakan adalah NN 4.0 maka .... Terdapat 3 pilihan yaitu, Stay on this Page, Go to URL, dan Go to Alt URL.
Jika Anda memilih Stay on this Page maka halaman inilah yang akan ditampilkan jika pengunjung web Anda memakai NN 4.0.
Sebaliknya pada bagian IE 4.0 Anda harus mengisinya dengan Go to URL dan pada bagian URL Anda harus mengisi dengan halaman web yang akan ditampilkan jika si pengunjung memakai IE 4.0.
Untuk mengaplikasikannya tekan tombol OK. Nah sekarang halaman web Anda sudah siap untuk mendeteksi browser yang digunakan oleh pengunjung web Anda.
Menambahkan statistik pada website
Anda ingin mengetahui jumlah pengunjung web Anda ? Ingin mengetahui browser yang dipakai atau halaman web Anda yang paling banyak dilihat ? Caranya gampang. Anda bisa menggunakan statistik yang telah disediakan oleh banyak provider. Salah satunya yang paling terkenal adalah www.hitbox.com. Tulisan ini akan menjelaskan cara menambahkan statistik pada halaman web dan informasi apa saja yang dapat diperoleh. Pada contoh ini kita akan menggunakan HitBox.
Untuk mendapatkan layanan tersebut, seperti biasanya Anda harus mendaftarkan terlebih dahulu. Isi dan ikuti langkah2 yang telah disediakan. Setelah itu Anda akan mendapatkan kode yang harus Anda tambahkan pada halaman web Anda. Ada dua macam kode, yaitu kode yang diletakkan pada halaman utama web Anda dan kode yang diletakkan pada halaman lainnya (bukan pada halaman utama). Nah copy kode tersebut ke halaman yang ingin Anda amati statistiknya.
Nah, setelah halaman web yang telah disisipi kode dari HitBox tersebut di-upload, Anda bisa mendapatkan beragam info seperti :
Page Views, jumlah halaman yang dilihat.
Pages Viewed Per Visitor, jumlah halaman yang dilihat oleh tiap pengunjung web Anda.
Most Requested Pages, halaman yang paling banyak dilihat.
Average Depth of Pages, menunjukkan berapa jumlah halaman yang dilihat oleh pengunjung web Anda. Dengan kata lain satu pengunjung melihat berapa halaman web.
Browser Version, browser yang dipakai oleh pengunjung web Anda, bisa Internet Explorer, Netscape Navigator, Opera, dll.
Resolusi monitor, menujukkan resolusi monitor yang digunakan untuk melihat web Anda.
Referring URLs, menunjukkan darimana mereka datang ke web Anda, apakah dari link web lain, search engine, bookmark, atau yang lainnya.
Time Spent on Site, menunjukkan berapa detik, menit atau jam-kah para pengunjung berada pada web Anda.
Cuma itu saja ? Tidak ! Selain yang telah disebutkan di atas, masih banyak informasi menarik lainnya yang dapat Anda dapatkan dari HitBox.
Dengan berbekal info tersebut Anda dapat melakukan optimasi untuk web Anda. Misalnya dari info Browser Version, jika pengunjung web Anda sebagian besar menggunakan Internet Explorer, Anda bisa membuat desain dengan optimasi untuk IE.
Cara mengenalkan web site
Setelah Anda selesai mendesain dan meng-upload file bukan berarti tugas kita sudah selesai. Apa artinya kita punya website tapi nggak ada orang yang tahu ? Nah, supaya website kita dikenal orang ada beberapa cara yang bisa kita lakukan, yaitu :
Search engine banyak digunakan orang untuk mendapatkan alamat suatu situs berdasarkan keyword yang mereka masukkan. Di internet sekarang ini terdapat ratusan bahkan ribuan seach engine mulai dari yang ecek-ecek sampai yang besar, yang dikelola secara profesional. Anda tidak harus mendaftar web Anda ke semua search engine tersebut, tapi daftarkan saja ke beberapa searach engine yang terkenal yang ada di Indonesia maupun di luar negeri. Untuk pendaftarannya terdapat perbedaan antara satu search engine dengan search engine lainnya. Yang pertama, pada saat Anda mendaftar pada suatu search engine Anda harus memasukkan keyword dan deskripsi singkat tentang web site Anda. Contohnya Search Indonesia, Catcha, dll. Yang kedua, pada saat mendaftar Anda cukup menunjukkan URL website Anda. Setelah itu search engine tersebut akan "menjelajah" ke web Anda dan mencari keyword dan deskripsi yang terletak pada meta tag halaman web Anda. Untuk itu sebelum upload, pastikan bahwa Anda telah menuliskan meta tag tersebut dengan benar. (Jika Anda belum tahu tentang meta tag, lihat pada source code HTML pada halaman utama web site ini, filenya bernama index.shtml)
Ini cara lain untuk mengenalkan web kita. Dengan mengikuti pertukaran banner maka Anda diwajibkan untuk menampilkan banner orang lain (yang menjadi anggota) pada situs Anda. Dan sebaliknya banner Anda pun akan ditampilkan pada situs lain. Ukuran banner yang digunakan biasanya 468 x 60 pixel. Untuk membuat banner Anda dapat menggunakan Adobe PhotoShop, dan untuk membuat animasinya Anda dapat menggunakan Ulead Gif Animator.
Upload ke web server
Setelah Anda mendaftar pada salah satu free server, maka langkah terakhir supaya halaman web Anda dapat dilihat semua orang adalah upload atau mengirim file ke web server.
Ada dua macam cara yang digunakan untuk mengirim file ke web server, yaitu langsung melalui browser atau melalui FTP (File Transfer Protocol). Untuk itu Anda harus mengetahui cara mana yang didukung oleh web server Anda. Sekedar contoh, www.homepage.com menggunakan browser untuk upload, www.virtualave.net menggunakan FTP sedangkan untuk www.tripod.com bisa menggunakan browser atau FTP. Yang akan dibahas di sini adalah mengirim file dengan menggunakan FTP.
Software yang dapat digunakan adalah WS FTP atau CuteFTP. (jangan bingung dengan kata FTP dengan WS FTP atau CuteFTP. FTP adalah protocol yang digunakan untuk berhubungan dengan web server, sedangkan WS FTP atau CuteFTP adalah software yang digunakan untuk berhubungan dengan web server. Singkatnya WS_FTP dan CuteFTP adalah software yang mendukung protocol FTP untuk berhubungan dengan web server).
Untuk langkah-langkah yang kami berikan di bawah ini menggunakan software CuteFTP dan web server www.virtualave.net. Anda dapat menerapkan langkah ini pada WS_FTP atau software FTP lainnya dan web server lainnya, karena pada prinsipnya adalah sama.
Dari menu FTP pilih Quick Connect.
Isi pada kolom host address, user ID dan password dengan yang diberikan web server kepada Anda. Kalau di virtualave.net misalnya host address = s36.virtualave.net, user id = winfolder, password = sda45sddf.
Klik OK.
Tunggu beberapa saat sampai CuteFTP sampai berhasil connect dengan web server.
Jika koneksi berhasil akan muncul kotak dialog berisi keterangan-keterangan. Klik OK saja.
Sekarang Anda lihat pada kolom sebelah kanan. Itu merupakan folder yang terletak pada web server Anda. Nampak folder bernama public_html. Klik dua kali folder tersebut. Nah, di folder itulah Anda harus meletakkan file-file Anda.
Kolom sebelah kiri merupakan letak dari file di komputer Anda. Untuk itu pindah ke folder tempat Anda menyimpan file yang akan di-upload.
Blok-lah file yang akan di-upload, lalu klik kanan dan pilih upload.
Selesai sudah proses upload tersebut.
Sebagai tambahan, Anda dapat membuat folder/directory baru pada web server Anda. Caranya klik kanan pada kolom sebelah kanan, pilih Make Directory, klik OK.
Untuk perintah-perintah lainnya dapat Anda pelajari sendiri
