Mengenal Macromedia Dreamweaver 8
Macromedia Dreamweaver adalah sebuah HTML editor profesional untuk
mendesain secara visual dan mengelola situs atau halaman web.
Saat ini terdapat software dari kelompok Macromedia yang belakangan
banyak digunakan untuk mendesain suatu situs Web. Versi terbaru dari
Macromedia Dreamweaver saat ini adalah Dreamweaver 8. Pada Dreamweaver
8, terdapat beberapa kemampuan bukan hanya sebagai software untuk
desain web saja, tetapi juga untuk menyunting kode serta pembuatan
aplikasi web dengan menggunakan berbagai bahasa pemrograman Web, antara
lain JPS, PHP, ASP, dan ColdFusion.
Dreamweaver merupakan software utama yang digunakan oleh Web desainer
maupun Web programmer dalam mengembangkan suatu situs Web. Hal ini
disebabkan ruang kerja, fasilitas, dan kemampuan Dreamweaver yang mampu
meningkatkan produktivitas dan efektivitas dalam desain maupun
membangun suatu situs Web. Dreamweaver juga dilengkapi dengan fasilitas
untuk manajemen situs yang cukup lengkap.
Fasilitas penyuntingan secara visual dari Dramweaver 8 memungkinkan
Anda menambah desain dan fungsionalitas halaman-halaman Web. Anda dapat
membuat dan mengedit image dalam Macromedia Firework. Selain itu, Anda
dapat menambahkan objek Flash ke dalam Dreamweaver 8.
1.1 FASILITAS DALAM DREAMWEAVER 8
User interface pada Dreamweaver 8 lebih baik dibandingkan versi
sebelumnya. Dreamweaver 8 memiliki peningkatan kemampuan toolbar
sehingga Dreamweaver 8 dapat digunakan untuk memodifikasi tampilan
toolbar atau menambahkan fungsi baru.
Selain user interface baru, Dreamweaver 8 memiliki kemampuan untuk
menyunting kode dengan lebih baik. Dreamweaver 8 juga dapat melakukan
print kode pada jendela Code View. Selain itu juga memiliki fasilitas
Code Hints yang membantu dalam urusan tag-tag serta Tag Inspector yang
sangat berguna dalam menangani tag-tag HTML. Dreamweaver 8 memiliki
panel baru, yaitu panel Snippets yang memberikan fasilitas untuk
menyunting dan menyimpan blok kode yang sering digunakan.
Kemampuan-kemampuan baru Dreamweaver 8 lainnya adalah fasilitas untuk
menangani dokumen-dokumen baru seperti XHTML. Extension Manager yang
telah ditingkatkan kemampuannya, kemampuan validasi dan debug di
browser, serta fasilitas penanganan pembuatan aplikasi database yang
sebelumnya hanya terdapat pada Macromedia Dreamweaver MX Ultradev.
1.2 MEMULAI DREAMWEAVER 8
Seperti halnya dengan program-program lainnya, untuk menjalankan
sebuah program yang diinginkan, terlebih dahulu Anda harus mengaktifkan
komputer yang Anda pakai. Dari tampilan program Windows, pilih tombol
Start yang berada di sudut kiri bawah tampilan Windows atau pada
taskbar, kemudian pilih All Programs untuk menampilkan semua program
aplikasi yang terpasang pada komputer. Pilih folder Macromedia >
Macromedia Dreamweaver 8.
1.3 RUANG KERJA DREAMWEAVER 8
Saat pertama kali Anda menjalankan Dreamweaver, akan ditampilkan
sebuah kotak dialog Workspace Setup yang digunakan untuk memilih
tampilan ruang kerja.
• Designer workspace, adalah sebuah penggabungan ruang kerja
menggunakan MDI (Multiple Document Interface), di mana semua jendela
dokumen dan panel-panel tergabung di dalam satu jendela aplikasi yang
besar, dengan sisi panel group di sebelah kanan.
• Coder workspace, adalah ruang kerja yang tergabung sama, tetapi
letak sisi panel group-nya berada di sebelah kiri. Tampilan yang sama
digunakan oleh Macromedia HomeSite dan Macromedia ColdFusion Studio, dan
jendela dokumen menampilkan tampilan Code secara default. Tampilan ini
sudah diakui pengguna HomeSite atau ColdFusion Studio dan pengguna
code lainnya yang ingin mengenal tampilan ruang kerja.
Ketika memulai Dreamweaver tanpa membuka sebuah dokumen akan tampil
halaman awal Dreamweaver pada lembar kerja. Halaman awal ini memberikan
kemudahan pada Anda dalam mengakses tutorial Dreamweaver, memilih file
yang sudah terbuka, membuat halaman baru, membuat halaman dari contoh
dan Dreamweaver Exchange, di mana Anda dapat menambah kemampuan baru
pada beberapa tampilan Dreamweaver. Gunakan halaman awal sebagai
halaman web. Untuk menghilangkan tampilan halaman awal, ikuti langkah
berikut:
1. Jalankan Dreamweaver tanpa membuka sebuah dokumen. Halaman awal akan ditampilkan pada layar monitor Anda.
2. Klik Don't Show Again.
Ruang kerja pada Dreamweaver 8, memiliki komponen-komponen yang
memberikan fasilitas dan ruang untuk menuangkan kreasi Anda saat
bekerja, seperti yang terlihat pada Gambar 1.3. Komponen-komponen yang
disediakan oleh ruang kerja Dreamweaver 8 antara lain adalah Insert
Bar, Document Toolbar, Document Window, Panel Groups, Tag Selector,
Property Inspector, dan Site Panel. Penjelasan dari komponen-komponen
yang terdapat di dalam ruang kerja Dreamweaver 8 adalah:
• Document Window, berfungsi untuk menampilkan dokumen di mana Anda sekarang bekerja.
• Insert Bar, berisi tombol-tombol untuk menyisipkan berbagai macam objek seperti image, tabel, dan layer ke dalam dokumen.
• Document Toolbar, berisi tombol-tombol dan menu pop-up yang menyediakan tampilan berbeda dari Document Window.
• Panel Groups, adalah kumpulan panel yang saling berkaitan satu sama lainnya yang dikelompokkan di bawah satu judul.
• Tag Selector, berfungsi untuk menampilkan hierarki tag di sekitar pilihan yang aktif pada Design View.
• Property Inspector, digunakan untuk melihat dan mengubah berbagai properti objek atau teks.
• Site Panel, digunakan untuk mengatur file-file dan folder-folder yang membentuk situs web Anda.
1.4. KOMPONEN RUANG KERJA
Di dalam ruang kerja Dreamweaver 8 terdapat beberapa komponen-komponen
utama yang membentuk suatu ruang kerja. Ruang kerja Dreamweaver 8 ini
memberikan kesatuan tampilan antara menu utama, panel, property
inspector, serta toolbar.
Menu Utama
Sistem menu yang terdapat pada Dreamweaver 8 sangat sederhana dan
mudah untuk dipahami karena perintah-perintah yang terdapat pada hampir
sebagian besar fungsi menu terdapat juga dalam panel. Dengan demikian
Anda tidak akan banyak menghabiskan waktu dengan melakukan perintah
yang terdapat pada menu tetapi lebih banyak bekerja dengan menggunakan
perintah-perintah yang terdapat pada panel.
Di dalam sistem menu Dreamweaver 8 terdapat beberapa komponen yang dapat Anda gunakan, yaitu:
• Menu File dan menu Edit. Menu File dan Edit berisi item menu
standar, 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 berisi perintah untuk pemilihan seperti Select Parent
Tag, serta Find dan Replace.
• Menu View. Menu View berisi perintah untuk menampilkan beberapa
macam tampilan dari dokumen (seperti tampilan Design vies dan tampilan
Code) dan untuk menampilkan serta menyembunyikan beberapa elemen halaman
dan tombol-tombol Dreamweaver dan toolbar.
• Menu Insert. Menu Insert berisi alternatif baris Insert untuk menyisipkan objek di dalam dokumen.
• Menu Modify. Menu Modify berisi perintah untuk melakukan perubahan
properti pada item atau halaman terpilih. Dengan menggunakan menu ini,
Anda dapat melakukan pengeditan atribut-atribut tag, mengganti tabel
dan elemen tabel, serta bermacam bentuk aksi untuk item library dan
template.
• Menu Text. Menu Text berisi perintah untuk melakukan format teks.
• Menu Commands. Menu Commands berisikan akses ke beberapa perintah,
format kode yang sesuai dengan format pilihan Anda, membuat photo
album, dan melakukan pengeditan gambar dengan Macromedia Fireworks.
• Menu Site. Menu Site berisikan item menu untuk mengelola situs dan melakukan upload dan download file.
• Menu Window. Menu Window menyediakan akses ke seluruh panel, inspector, dan jendela di dalam Dreamweaver.
• Menu Help. Menu Help berfungsi untuk membuka lembar kerja Help
yang akan membantu Anda saat menggunakan Dreamweaver dan menyediakan
bahan referensi untuk beberapa bahasa.
Standard Bar
Pada saat Anda membuka jendela Dreamweaver 8, secara default hanya
menampilkan Document Bar saja tanpa menampilkan Standard Bar.
Langkah untuk menambahkan atau mengaktifkan Standard Bar adalah sebagai berikut:
1. Pilih menu View > Toolbars.
2. Klik pilihan Standard untuk menampilkan Standard Bar.
3. Gunakan perintah yang sama untuk menyembunyikan tampilan Standard Bar.
Document Toolbar
Document Toolbar berisikan tombol-tombol dan menu pop-up yang
menyediakan tampilan berbeda dari document window. Anda bisa mengatur
tampilan Document Window dalam bentuk Design veiw atau Code view atau
kedua-duanya. Anda juga dapat memberikan judul document window pada
bagian Title.
Insert Bar
Insert Bar terdiri dari tombol-tombol untuk membuat dan menyisipkan
objek seperti tabel, layer, dan gambar. Ketika Anda menggulung pointer
melewati sebuah tombol, sebuah kotak keterangan akan tampak dan
menampilkan nama tombol.
Tombol-tombol tersebut mengatur beberapa kategori. Anda dapat berganti
kategori dengan menekan tombol pada bagian kiri dari Insert bar.
Kategori tambahan akan kelihatan ketika sebuah dokumen sekarang berisi
kode server, seperti dokumen ASP atau CFML. Ketika Anda mulai
menjalankan program Dreamweaver, kategori yang ditampilkan sama seperti
pada waktu Anda bekerja terakhir kalinya.
Catatan:
Jika Anda lebih menyukai tampilan kategori seperti tabulasi yang
berada di atas insert bar, Anda dapat mengganti tampilan insert bar
tersebut.
Insert bar digunakan untuk mengatur beberapa kategori pilihan berikut:
• Kategori Common, untuk membuat dan menyisipkan beberapa penggunaan objek biasa, seperti gambar dan tabel.
• Kategori Layout, untuk menyisipkan tabel, div tag, layer, dan
frame. Anda juga dapat memilih salah satu dari tiga tampilan tabel.
Standard (default), Expands Tables, dan layout. Ketika mode tampilan
terpilih, Anda dapat menggunakan tombol layout dreamweaver. Draw Layout
Cell dan Draw Layout Table.
• Kategori Forms, berisi tombol-tombol untuk membuat form dan menyisipkan elemen form.
• Kategori Text, untuk menyisipkan beberapa teks dan daftar format tag, seperti b, em, p, hl,dan ul.
• Kategori HTML, untuk menyisipkan tag HTMLuntuk 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 kategori ini
menyediakan objek-objek server-code yang dapat disisipkan di dalam
tampilan Code.
• Kategori Application, untuk menyisipkan elemen dinamis seperti
record set, repeated region, dan record insertion dan update form.
• Kategori Flash Elements, untuk menyisipkan elemen Flash.
• Kategori Favorites, untuk mengelompokkan dan mengatur tombol-tombol baris Insert yang Anda gunakan dalam satu wadah.
Document Window (Jendela Dokumen)
Document Window merupakan bagian yang digunakan untuk mendesain
halaman situs Web. Dalam Document Window, Anda dapat menyisipkan teks,
image serta objek lain yang mendukung pembuatan situs Web atau tempat
untuk membuat desain Web.
Dreamweaver 8 memuat dokumen-dokumen yang sedang dibuka dalam jendela
yang sama. Jika Anda perhatikan untuk dokumen yang terbuka dalam
jendela yang sama, akan disimpan dalam tab-tab seperti lembar kerja
pada Microsoft Excel. Dengan demikian Anda dapat dengan mudah berpindah
antar dokumen tanpa harus menutup tampilan jendela yang sudah terbuka
dengan jalan mengklik tab dokumen yang Anda inginkan.
Panel Group
Panel Group adalah kumpulan panel yang dikelompokkan bersama di bawah
satu judul kelompok panel tersebut antara lain: Design, Code,
Application, Files dan Answer. Untuk menguraikan panel group, Anda bisa
mengklik panah expander di sebelah kiri nama group.
Anda juga dapat memisahkan panel group yang tersusun tersebut dengan
cara menggeser mouse pada bagian pojok kiri dari judul group sampai
panel tersebut terlepas dari panel group.
Panel CSS
CSS merupakan salah satu fasilitas terbaru Dreamwever 8 pendukung HTML
dalam mendesain web. Perintah-perintah yang sering digunakan dapat
dikumpulkan dalam CSS sehingga dapat digunakan kembali dalam mendesain
web sehinggga Anda tidak perlu mengulang perintah dari awal. Dalam
panel CSS Anda dapat membuat, mengedit, atau menampung seluruh perintah
dari CSS.
Panel Files
Dalam Panel Files terdapat toolbar yang membantu Anda dalam membangun
web. Dalam Panel FIle Anda dapat melihat deretan file-file yang ada
dalam web Anda, menentukan lokasi dari situs yang Anda buat dalam Panel
Files juga disediakan tombol untukkoneksi atau diskoneksi pada remote
host.
Panel Snippets
Panel Snippets merupakan kode yang sering digunakan dan disisipkan
pada dokumen. Anda dapat mengambil kode snippet bulit-in yang ada di
dalam bagian snippet dengan cara menentukan terlebih dahulu kode apa
yang akan disisipkan ke dalam dokumen. Misalnya, apabila Anda ingin
membuat sebuah judul beserta menu, maka Anda harus memilih Headers,
selanjutnya Anda bisa menentukan bentuk Headers tersebut. Selain
Headers, Anda juga bisa menggunakan kode lainnya, seperti footer,
layout navigasi, fungsi JavaScript, dan masih banyak lagi yang dapat
dilihat pada hierarki.
Anda juga dapat menambahkan atau mengubah kode snippet yang sudah ada sesuai dengan kebutuhan Anda.
Tag Inspector
Dalam Tag Inspector, Anda dapat melihat struktur hierarki tag dan atribut-atribut yang dapat ditambahkan atau diedit.
Tag Selector
Tag Selector terdapat pada bagian bawah document window atau pada
bagian status bar. Fungsi dari tag selector adalah untuk menampilkan
hierarki tag pada bagian design view yang aktif. Secara otomatis pada
saat Anda mengaktifkan document windows, pada bagian status bar akan
muncul indikator .
Property Inspector
Property Inspector digunakan untuk melihat dan mengubah berbagai
properti objek dan teks yagn terpilih. Setiap objek maupun teks
mempunyai properti yang berbeda-beda. Misalnya, untuk teks yang
terpilih, akan menampilkan properti-properti teks. Pada bagian properti
terdapat beberapa pengaturan format untuk jenis font, ukuran font,
perataan, dan lain sebagainya. Adapun, pada properti image akan
menampilkan pengatur ukuran image, dan ebagainya.
*sorry kalau gambarnya pake DW Cs5
Semoga Bermanfaat
Home
