Tool - tool pada Macromedia Dreamweaver

Di dalam ruang kerja Dreamweaver MX 2004, terdapat beberapa komponen utama yang membentuk suatu ruang kerja. Ruang kerja Dreamweaver MX 2004 ini memberikan kesatuan tampilan antara menu utama, panel, property inspector serta toolbar.

v  Menu Utama

Sistem menu yang terdapat pada Dreamweaver MX 2004 sangat sederhana dan mudah untuk dipahami karena perintah-perintah yang terdapat pada hampir sebagian besar fungsi menu terdapat juga dala panel. Dengan demikian, kita tak akan banyak menghabiskan waktu dengan melakukan perintah yang terdapat pada menu, melainkan lebih banyak bekerja dengan menggunakan perintah-perintah yang terdapat pada panel.

Di dalam sistem menu Dreamweaver MX, terdapat beberapa komponen yang dapat kita gunakan, yaitu:

·         Menu File dan menu edit

Berisikan item menu standar untuk menu File dan menu Edit, seperti New, Open, Save, Save All, Cut, Copy, Paste, Undo, dan Redo. Menu File terdiri dari beberapa macam perintah untuk menampilkan atau memperlakukan dokumen baru, seperti Preview in Browser dan Print Code. Menu Edit berisikan perintah untuk pemilihan seperti Select Parent Tag, serta Find dan Replace.

·         Menu View

Berisikan perintah untuk menampilkan beberapa macam tampilan dari dokumen kita (seperti tampilan Design view atau tampilan code), menampilkan dan menyembunyikan beberapa elemen halaman, tombol-tombol Dreamweaver, toolbar dan lain-lain.

·         Menu Insert

Berisikan alternatif baris Insert untuk menyisipkan objek di dalam dokumen.

·         Menu Modify

Berfungsi melakukan perubahan properti pada item atau halaman terpilih. Dengan menggunakan menu ini, kita dapat melakukan pengeditan atribut-atribut tag, mengganti tabel dan elemen tabel, dan bermacam bentuk aksi untuk item library dan template.

·         Menu Text

Berfungsi mempermudah dalam melakukan format text.

·         Menu Commands

Berisikan akses ke beberapa perintah, format kode yang sesuai dengan format pilihan kita, membuat photo album, dan melakukan pengeditan gambar dengan menggunakan Macromedia Fireworks.

·         Menu Site

Berisikan item menu untuk mengelola situs dan melakukan upload dan download file.

·         Menu Window

Menyediakan akses ke seluruh panel, inspector, dan jendela di dalam Dreamweaver.

·         Menu Help

Menyediakan akses ke dokumen Dreamwweaver, membuka lembar kerja Help untuk membantu kita dalam menggunakan Dreamweaver, dan menyediakan bahan referensi untuk beberapa bahasa.

v  Baris Standard

Pada saat kita membuka jendela Dreamweaver MX, secara default hanya menampilkan Document Bar tanpa menampilkan Standard Bar.

Untuk menambahkan atau mengaktifkan Standard Bar, kita dapat melakukan langkah-langkah berikut:

1.      Membuat dokumen baru.

2.      Memilih perintah menu View  ► Toolbars sehingga akan tampil submenu Document dan Standard.

3.      Klik pilihan Standard untuk menampilkan Standard Bar.

4.      Menggunakan perintah yang sama untuk menyembunyikan tampilan Standard Bar. Untuk menyembunyikan, kita bisa mengklik pilihan yang sudah terpilih.

         Berikut ini adalah tabel fungsi-fungsi tombol perintah yang terdapat di dalam Standard Bar:

New	Berfungsi membuat halaman web baru
Open	Berfungsi membuka halaman web yang sudah ada
Save	Berfungsi menyimpan halaman web yang sedang aktif
Save all	Berfungsi menyimpan seluruh halaman web yang sedang dibuka
Cut	berfungsi menghapus objek yang dipilih
Copy	Berfungsi menyalin objek yang dipilih
Paste	Berfungsi menempelkan/meletakkan objek hasil salinan
Undo	Berfungsi membatalkan perintah yang terakhir kali dilakukan
Redo	Berfungsi mengulang kembali perintah yang terakhir kali dibatalkan

v  Baris Tombol Dokumen

Document Toolbar berisikan tombol-tombol dan menu pop-up yang menyediakan tampilan berbeda dari document window. Kita bisa mengatur tampilan Document Window dalam bentuk Design view atau Code view atau kedua-duanya. Kita juga dapat memberikan judul document window pada bagian Title.

Nama Tombol	Keterangan
Show Code View	Menampilkan mode pengetikan kode HTML dalam jendela Code View
Show Code and design Views	Menampilkan jendela Code View dan jendela Design View.
Show Design View	Menampilkan jendela Design View. Pada tampilan ini, apa yang kita lihat akan sama seperti pada jendela browser
No Browser Check Errors	Melakukan pengecekan kesalahan pada dokumen web
Document Title	Memberikan judul pada dokumen web
File Management	Menjalankan proses upload dan download file
Preview/Debug in Browser	Melihat hasil dalam browser, mencari kesalahan script dalam dokumen dan untuk memasukkan browser dalam daftar browser yang dikenali oleh Dreamweaver MX
Refresh Site List	Melakukan pembaharuan terhadap daftar isi situs kita
View Options	Mengatur pilihan pada tampilan ruang kerja kita

v  Baris Insert

Baris Insert terdiri dari tombol-tombol untuk membuat dan menyisipkan objek seperti tabel, layer dan gambar. Ketika kita menggulung pointer melewati sebuah tombol, tampil sebuah kotak keterangan dengan menampilkan nama tombol.

Tombol-tombol tersebut mengatur beberapa kategori. Kita dapat berganti kategori dengan menekan tombol pada bagian kiri Insert bar. Kategori tambahan akan kelihatan ketika sebuah dokumen sekarang berisi kode server, seperti dokumen ASP atau CFML. Ketika kita mulai menjalankan program Dreamweaver, kategori yang ditampilkan sama seperti pada waktu kitabekerja terakhir kalinya.

Catatan:

Jika kita lebih menyukai tampilan kategori seperti tabulasi yang berada di atas baris Insert, kita dapat mengganti tampilan baris Insert tersebut.

Beberapa kategori mempunyai tombol dengan menu melayang. Ketika kita memilih sebuah pilihan dari menu melayang, hal tersebut akan menjadikan aksi default dari sebuah tombol. Sebagai contoh, jika kita memilih Image Placeholder dari tombol menu melayang Image, di lain waktu ketika ita menekan tombol Image, Dreamweaver akan menyisipkan sebuah image placehoder. Setiap waktu kita memilih sebuah opdi baru dari menu melayang, aksi default pada tombol akan berubah.

Baris Insert digunakan untuk mengatur beberapa kategori pilihan berikut:

·         Kategori Common memungkinkan kita untuk membuat dan menyisipkan beberapa penggunaan objek biasa, seperti gambar dan tabel.

·         Kategori Layout memungkinkan kita untuk menyisipkan tabel, div tag, layer, dan frame. Kita juga dapat memilih salah satu dari tiga tampilan tabel: Standard (default), Expanded Tables, dan Layout. Ketika mode tampilan terpilih, kita dapat menggunakan tombol layout dreamweaver: Draw Layout Cell dan Draw Layout Table.

·         Kategori Forms berisikan tombol-tombol untuk membuat form dan menyidipkan elemen form.

·         Kategori Text memungkinkan kita menyisipkan beberapa teks dan daftar format tag, seperti b, em, p, hl, dan ul.

·         Kategori HTML memungkinkan kita untuk menyisipkan beberapa tag HTML untuk mistar horizontal, head content, tabel, frame,dan script.

·         Kategori Server-code hanya tersedia untuk halaman-halaman yang menggunakan bahasa khusus server, termasuk di dalamnya ASP, ASP.NET, CFML Basic, CFML Flow, CFML Advanced, JSP, dan PHP. Selain itu, kategori ini menyediakan objek-objek server-code yang dapat kita sisipkan di dalam tampilan Code.

·         Kategori Application memungkinkan kita untuk menyisipkan elemen dinamis seperti recordset, repeated region, dan record insertion dan update form.

·         Kategori Flash Elements memungkinkan kita untuk menyisipkan elemen Flash

·         Kategori Favorites memungkinkan kita untuk mengelompokkan dan mengatur tombol-tombol baris Insert yang kita gunakan dalam satu wadah.

v  Jendela Dokumen (Dokument Window)

Document Window merupakan bagian yang digunakan untuk mendesain halaman situs. Dalam Document window, kita dapat menyisipkan teks, image serta objek lain yang mendukung pembuatan situs atau tempat untuk membuat desain Web.

Tidak seperti pada versi sebelumnya, Dreamweaver MX memuat dokumen-dokumen yang sedang dibuka dalam jendela yang sama. Jika kita perhatikan, dokumen yang terbuka dalam jendela yang sama akan disimpan dalam tab0tab seerti lembar kerja pada Microsoft Excel. Dengan demikian, kita dapat dengan mudah berpindah antar dokumen tapa harus menutup tampilan jendela yang sudah  terbuaka dengan jalan mengklik tab dokumen yang kita inginkan.

v  Grup Panel

Grup Panel adalah kumpulan panel yang saling berkaitan satu sama lain, yang dikelompokkan bersama di bawah satu judul. Kalau kita perhatikan pada bagian Grup Panel, di situ terdapat beberapa panel yang tersusun secara rapi pada bagian sebelah kanan window. Grup Panel tersebut antara lain: Design, Code, Application, Giles dan Answer. Pada setiap bagian dari Grup Panel, terdapat beberapa panel lagi. Misalnya Grup Panel Design berisikan panel HTML Style, CSS Style dan Behaviour. Pada bagian Grup Panel Files terdapat panel Site dan Assets. Untuk menguraikan Grup Panel, kita bisa mengklik panah expander di sebelah kiri nama grup.

Kita juga dapat memisahkan Grup Panel yang tersusun tersebut dengan cara menggeser mouse pada bagian pojok kiri dari judul Grup sampai Panel tersebut  terlepas dari Panel.

v  Files Panel

Files panel merupakan bagian dari Grup Panel Files selain panel Assets. Bagian ini berfungsi mengatur file dan folder yang membentuk situs kita. Panel ini memiliki fungsi lain yang cukup penting karena memungkinkan kita untuk bekerja dan mengatur file-file dari situs dengan efisien.

Pada bagian Files panel ini, kita dapat melakukan beberapa aktvitas antara lain manajemen file, melakukan koneksi ke remote server atau testing serber, menempatkan file ke server, atau menyalin file dari server ke situs lokal.

v  Snippets Panel

Snippets panel merupakan kode yang sering digunakan dan disisipkan pada dokumen. Kita dapat mengambil kode snappet builtin yang ada di dalam bagian snippet dengan cara menentukan terlebih dahulu kode apa yang akan disisipkan ke dalam dokumen. Misalnya, apabila ingin membuat sebuah judul beserta menu, maka kita harus memilih Headers. Selajutnya, kita bisa menentukan bentuk Headers tersebut. Selain Headers, kita juga bisa menggunakan kode lainnya seperti footer, layout navigasi, fungsi JavaScript dan masih banyak lagi yang dapat dilihat pada hirarki.

Kita juga dapat menambahkan atau mengubah kode snippet yang sudah ada sesuati kebutuhan kita.

v  Tag Inspector

Tag Inspector merupakan salah satu fasilitas terbaru dari Dreamweaver MX. Dalam Tag inspector, kita dapat melihat struktur hirarki tag dan atribut-atribut yang dapat ditambahkan atau diedit.

v  Tag Selector

Tag Selector merupakan pada bagian bawah document window atau pada bagian status bar. Fungsi tag selector adalah menampilkan kirarki tag pada design view yang aktif. Secara otomatis, saat kita mengaktifkan jendela document window, indikator <body> akan muncul pada bagian status bar.

v  Property Inspector

Property Inspector digunakan untuk melihat dan mengubah berbagai properti objek dan teks yang terpilih. Setiap objek maupun teks mempunyai properti yang berbeda-beda. Misalnya, teks yang terpilih akan menampilkan properti-properti teks seperti yang tampak pada di bawah ini.

Pada bagian properti, terdapat beberapa pengaturan format untuk jenis font, ukuran font, perataan dan lain sebagainya. Adapun  pada properti image akan ditampilkan pengatur ukuran image, nama image dan sebagainya, seperti pada gambar di bawah ini.