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.
Dalam seri tutorial ini kita akan mengenal penggunaan Dreamweaver sebagai editor HTML visual. Untuk bagian pertama, kita akan mengenal lingkungan kerja dalam Dreamweaver MX dan membuat halaman web sederhana.
[Program: Untuk mencoba Dreamweaver, Anda membutuhkan programnya yang berjalan di Windows. Karena ukurannya cukup besar (dan lagi bukan freeware), Dreamweaver tidak dapat disertakan di CD edisi kali ini.]
Mengenal Lingkungan Kerja Dreamweaver MX
Lihat Gambar 1. 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.
Fig 1. Lingkungan kerja Dreamweaver MX
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. Lihat Gambar 2.
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. Lihat Gambar 4.
Fig 4. Paragraf dan 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. Lihat Gambar 5.
Membuat Link, Anchor, dan Target
Untuk membuat link antarhalaman, selain diperlukan halaman link sumber—Source Link—juga diperlukan link tujuan—Destination Link. File contoh halaman Web sederhana di atas saya simpan dengan nama file index.htm. Halaman ini yang akan menjadi link sumber kita. Mari kita buat halaman baru untuk dilink:
Buatlah halaman baru untuk link tujuan, File > New, pada kotak dialog pilih Kategori Dynamic Page, dan Basic Page HTML. Lihat Gambar 6. Setelah selesai membuat file baru, kemudian simpanlah file tersebut dengan nama file tentangsaya.htm. Pada contoh, saya memasukkan horizontal Rule, Insert > Horizontal Rule untuk memisahkan konten dari halaman tersebut. Kemudian simpan di folder yang sama dengan index.htm.
Pada index.htm, pilihlah teks “Tentang Saya”, kemudian pada Property Inspector ketikan tentangsaya.htm pada kotak link. Atau gunakan Browse For File untuk memilih file tentangsaya.htm lewat kotak dialog. Lihat Gambar 7. Cek dengan menggunakan browser, bukalah file index.htm (Gambar 8).
Fig 8. Tampilan index.htm di browser
Untuk membuat link ke situs lain, setelah teks dipilih, ketik langsung pada kotak link alamat yang dituju, misalnya http://www.mwmag.com (Jangan lupakan http://).
Target
Target (Gambar 9) adalah perintah atau opsi pada link yang memberitahukan di window mana link tersebut akan dibuka. Setiap window atau frame di HTML dapat kita beri nama dan browser akan memuat halaman ke window/frame sesuai yang ditunjukkan oleh link. Sesuai aturan di HTML, terdapat nama-nama target khusus yang berarti spesial. _Self adalah pilihan default, bila Anda tidak menentukan target, link akan dibuka pada window browser atau frame yang sama. _top memuat ke window terluar (di luar semua frame yang ada). _Blank membuka link pada browser window baru. _Parent membuka link pada frame induk (kita akan membahas tentang hal ini pada bagian Frame nanti).
Fig 9. Target pada Property Inspector
Named Anchors
Bila halaman web Anda memungkinkan pengunjung menscroll window browser karena isi dari halaman tersebut panjang dan terdiri dari beberapa halaman, Anda dapat menggunakan Named Anchors ini untuk menentukan titik-titik tertentu pada halaman dengan tujuan memudahkan navigasi pengunjung mencari sesuatu dalam halaman dengan cepat. Pada halaman yang saya buat tentangsaya.htm terdapat beberapa menu yang langsung menuju ke topic tertentu pada halaman tersebut, setelah itu pengunjung dapat kembali ke atas halaman.
Untuk membuat Named Anchor, pertama kita tandai bagian khusus dari halaman: klik Insert > Named Anchors, atau tekan Ctrl-Alt-A. Setelah kotak dialog muncul masukan nama anchor. Pada file ini saya memberi nama kesukaan. Setelah itu klik OK. Pada bagian yang ditandai akan tampak tanda/icon buku terbuka. Lihat Gambar 10.
Setelah itu kembali ke halaman atas pilih teks yang akan di buat link pada bagian atas dokumen yang akan dihubungkan dengan Anchor tersebut, pada kotak link di Property Inspector ketikkan #kesukaan. Untuk mengembalikan ke atas halaman buat link baru pada bagian tersebut misal: kembali ke atas. Lihat Gambar 11. Kemudian masukkan di kotak link tanda # dan pilih _top untuk target dari link tersebut. Lihat di browser dengan menekan F12.
Fig 11. Membuat link ke bagian atas dokumen
Page Properties
Page Properties adalah fasilitas untuk mengubah properti dasar sebuah dokumen Web, seperti judul halaman, warna-warna link, dsb. Untuk membuka Page Properties klik Modify > Page Properties. Lihat Gambar 12. Title untuk menentukan judul dokumen. Background Image tempat memasukkan gambar sebagai latar belakang. Background menentukan warna latar. Text untuk menentukan warna teks. Links mengubah warna link. Visited Link mengubah warna link yang telah dikunjungi. Active Link mengubah warna link yang sedang diklik. Margin menentukan margin halaman. Semua elemen ini memiliki padanannya di dalam kode HTML, yaitu dalam atribut elemen . Selain mengubah format tampilan melalui Page Properties, kita juga dapat melakukannya dengan CSS (Cascading Style Sheet) yang akan kita bahas pada tutorial bagian lain. Setelah selesai, Anda dapat melihat tampilannya di browser (Gambar 13).
Tidak ada komentar:
Posting Komentar