Adobe Dreamweaver

Adobe Dreamweaver

           Adobe Dreamweaver merupakan program penyunting halaman web keluaran Adobe Systems yang dulu dikenal sebagai Macromedia Dreamweaver keluaran Macromedia. Program ini banyak digunakan oleh pengembang web karena fitur-fiturnya yang menarik dan kemudahan penggunaannya. Versi terakhir Macromedia Dreamweaver sebelum Macromedia dibeli oleh Adobe Systems yaitu versi 8. Versi terakhir Dreamweaver keluaran Adobe Systems adalah versi 10 yang ada dalam Adobe Creative Suite 4 (sering disingkat Adobe CS4).

Macromedia Dreamweaver adalah sebuah HTML editor profesional untuk mendesain secara visual dan mengelola situs web maupun halaman web. Bilamana kita menyukai untuk berurusan dengan kode-kode HTML secara manual atau lebih menyukai bekerja dengan lingkungan secara visual dalam melakukan editing, Dreamweaver mambuatnya menjadi lebih mudah dengan menyediakan tool-tool yang sangat berguna dalam peningkatan kemampuan dan pengalaman kita dalam mendesain web.

Selain itu Dreamweaver juga dilengkapi kemampuan manajemen situs, yang memudahkan kita mengelola keseluruhan elemen yang ada dalam situs. Kita juga dapat melakukan evaluasi situs dengan melakukan pengecekan broken link, kompatibilitas browser, maupun perkiraan waktu download halaman web.

Mengenal Interface Dreamweaver MX

Berikut adalah interface dari Dreamweaver MX :

Keterangan :

·         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.

Komponen Dreamweaver MX

1.    Menu Bar

Dalam Dreamweaver, perintah – perintah yang tersedia di dalam menu bar adalah File, edit, View, Insert, Modify, Text, Commads, Site, Window dan Help. Perhatikan Gambar berikut :

Sistem kerja Menu Bar dalam dreamweaver sama seperti pada menu bar windows, sehingga tidak perlu terperinci dijelaskan disini.

2.    Menu Panel Insert.

Menu Panel Insert adalah sekumpulan menu yang berhubungan dengan operasi pemasukan dan pembuatan pernik – pernik pada halaman web. Secara default menu insert ini sudah aktif dan siap digunakan. Menu Insert dapat diaktifkan dengan cara :

·         Klik Window pada menu bar

·         Kemudian pilihlah Insert (jika tercentang berarti menu Insert sudah aktif).

·         Selain itu juga dapat mengaktifkan dan menonaktifkan dengan cara menekan Ctr + F3.

·         Berikut adalah gambar menu Panel Insert.

Keterangan :

1.    Menu Common (Utama)

Menu common adalah menu yang memiliki beberapa icon yang merupakan menu standar pada saat mendesain halaman web.

·         Tabel Untuk membuat tabel

·         Layer Untuk membuat layar diatas lembar kerja

·         Image Untuk mengimpor gambar

2.    Imageplaceholder

·         Firework HTML Untuk mengambil file yang terbuat dari Firework

·         Flash Untuk mengimpor file dari flash

·         Rollover Image Membuat animasi gambar bergantian

3.    Navigation Bar

·         Horixontal Rule Membuat garis horizontal

·         Date Memasukan tanggal hari ini

·         Tabular Data

4.    Comment

·         Tag Chooser Untuk memasukan perintah

5.    Menu Panel Layout

Pada menu ini terdapat icon yang juga tersedia pada menu common, yaitu icon tabel dan layer. Kegunaan icon ini sama dengan icon pada menu Common.

6.    Menu Layout

       Penjelasan menu layout :

·         Draw Layout Table Untuk menggambar tabel pada halaman

·         Draw Layout Cell Untuk membuat area teks pada layout tabel

7.    Menu Panel Text

·         Menu text digunakan untuk memformat teks yang ada.

8.    Menu Tex

·         Front Tag editor Menentukan warna dan jenis tulisan

·         Bold Menebalkan karakter

·         Italick Membuat huruf miring

·         Strong Menebalkan karakter

·         Paragraf Membuat paragraf

·         Block Coute Membuat paragraf menjorok ke tengah

·         Formated Text Membuat teks seperti apa adanya

·         Heading Mmbesarkan huruf

·         Unordered List Membuat simbol berupa icon

·         Ordered List Membuat simbol berupa angka

9.    Menu Panel Table

Digunakan untuk mendesian tabel. Dalam menu ini hanya tersedia satu icon yang mirip gambar dan fungsinya sama dengan fungsi common

10.  Menu Panel Frame

Menu frame adalah salah satu menu yang akan kita gunakan dalam praktik nantinya. Menu ini digunakan untuk memilih bentuk desain halaman utama kita.

11.  Menu Panel Form

Menu form digunakan untuk mendesian formulir. Kita mungkin lebih mengenalnya dengan media entri atau input. Selain menggunakan ini, Anda juga dapat menggunakan menu Insert, kemudian pilih Form Object.

12.`Form Membuat Form

·         Text field Membuat input teks

·         Hidden Field Membuat input teks yang di hidden

·         Text Area Membuat input teks yang banyak

·         Check Box Untuk pilihan yang banyak

·         Radio Button Membuat pilihan hanya satu

·         Radio Group Membuat pilihan hanya satu

·         List / Menu Membuat menu drop list

·         Jump Menu Menu yang memiliki link

·         Image Field Mengimpor gambar

·         File Field Membuat browse file

·         Button Membuat tombol

13.  Menu Panel Characters

Menu caracter memiliki beberapa icon yang digunakan untuk melakukan operasi halaman dan pengaturan paragraf. Adapun jenisnya dapat kita lihat seperti pada gambar di bawah.

·         Line Break Ganti baris (Shift + Enter)

·         Left Quote Membuat petik kiri

·         Right Quote Membuat petik kanan

·         Pound Tanda mata uang Poundsterling

·         Euro Tanda mata uang Euro

·         Yen Tanda mata uang Yen

14.  Menu panel Media

Menu media adalah sekumpulan icon yang berfungsi untuk melakukan pengimporan atau penggabungan file dari luar program dreamweaver.

·         Flash Untuk mengimpor animasi Flash

·         Flash Untuk mengimpor tombol flash

·         Flash Text Untuk mengimpor teks Flash

·         Shockwave Untuk mengimpor animasi Shockwave

·         Plugin Menggabungkan semua bentuk file

15.  Menu Panel Head

Menu Head digunakan untuk operasi – operasi penambahan komponen dalam tag head HTML Anda. Secara default, menu ini tidak begitu difungsikan oleh pengguna.

16.  Menu Panel Script

Menu script adalah sekumpulan icon yang pada umumnya digunakan untuk melakukan penulisan perintah Script seperti Java Script, Java Applet dll.

·         Script Menuliskan script (Java Script, Java Applet dll)

·         Noscript Membuat halaman tanpa script

·         Server – Side Include Menggabungkan file lain ke dalam halaman

17.  Menu Panel Application

Menu application digunakan untuk operasi database. Hal ini memiliki kegunaan yang mirip dengan program Cold Fusion

18.  Menu Panel Properties

Menu Properties adalah sekumpulan menu yang berfungsi sebagai tool dalam pemformatan object yang ada pada halaman web yang Anda buat. Menu ini akan selalu berubah tergantung meny insert yang sedang Anda aktifkan tipe apa. Adapun cara mengaktifkannya adalah

·         Klik menu window pada menu bar

·         Pilih dan klik Properties.

·         Selain itu Anda juga dapat mengaktifkan dengan cara tekan Ctr + F3

19.  Menu pada Saat Tabel aktif.

Menu properties akan berubah pada saat Anda mengaktifkan tabel yang Anda buat melalui menu Insert table atau yang lain. Cobalah dengan membuat tabel sederhana dan aktifkan dengan mengklik tabel tersebut sehingga menu Properties akan berubah seperti gambar di bawah ini.

20.  Menu Properties Saat Form Aktif.

Menu akan berubah bentuk dan fungsi saat Anda menggunakan form (formulir)