Membuka Dreamweaver MX
Untuk memulai bekerja dengan Dreamweaver MX, anda harus memulai
dengan membuka program tersebut. Kebanyakan sekarang program ini lebih
banyak digunakan dalam membuat web. Anda bisa membuka dengan mengklik
tombol "Start" pada sudut kiri layar anda, lalu ke "Programs,” lalu ke
“Macromedia” folder. Lalu pilih “Macromedia Dreamweaver MX.

Tampilan Dreamweaver MX (Different Views)
Dreamweaver MX adalah program yang sangat fleksibel, program ini
mengijinkan anda untuk melihat kode dalam tampilan yang berbeda : Code
View, Code dan Design View, dan Design View. Anda bisa berpindah antara
tampilan ini dengan menggunakan tiga tombol icon yang terdapat diatas
sebelah kiri monitor.

Dalam Code view, Dreamweaver MX Menampilkan halaman web dalam bentuk
format baris : HTML code. Jika anda sudah akrab dengan HTML, anda bisa
mengedit halaman web ini dari yang ditampilkan.
The Code dan Design View membagi layar dalam setengah tampilan, tampilan
code HTML untuk halaman web dibagian atas, dan setengahnya lagi tampilan
Design View yang bisa kita edit.


The Insert Bar
Insert bar, terletak diseberang atas layar, berbeda dari panel diatas.
Insert bar berisi lebih tabs dari pada panel lain, dan memiliki beberapa pilihan
untuk memasukkan dan manipulasi objek dan fungsi ke halaman web. Anda
akan menemukan banyak cara anda untuk membiasakan diri dengan option
ini, mereka mengijinkan untuk mempercepat dan cara mudah untuk
memasukkan objek dalam halaman.

Common
Fitur tab umum yang banyak digunakan dalam Dreamweaver
MX
<-- Klik untuk melihat gambar

1. Hyperlink: Klik diatas dan akan membuat anda untuk link ke lokasi
lain dari halaman web, file atau lokasi pada halaman yang sama.
2. Email Link: Email link mengijinkan pengunjung situs
mengirimkan seseorang email dengan mengklik pada special
link. Gunakan tool ini untuk mempermudah link.
3. Named Anchor: Tanda anchor ini adalah istimewa dalam
melakukan link, akan membawa user ke bagian lain pada
halaman yang sama. Klik nama tombol nama anchor untuk
mempercepat membuat link untuk anchor.
4. Insert Table: Ketika anda mengklik tool ini, akan muncul
jendela menanyakan jika anda ingin memasukkan informasi dan
membuat tabel. Ketika itu selesai, klik pada “OK” dan akan
muncul tabel dalam halaman web.
5. Draw Layer: Layer bisa membantu ketika mendesain layout untuk
halaman. Layer bukanlah tabel, tapi merupakan kotak yang bisa
diisi teks, gambar, atau apa saja, dan bisa ditempatkan dimana saja
dilayar. Ketika anda mengklik tombol ini, kursor anda akan berubah
menjadi salib, dan anda bisa menarik layer pada halaman.
6. Image: Anda bisa dengan mudah menempatkan gambar dalam
halaman web dengan mengklik tombol ini. Ketika anda
melakukannya, jendela baru akan muncul. Dari sini, anda bisa
membrowser komputer anda untuk mencari gambar yang ingin
dimasukkan ke dalam halaman web. Ingat, jika anda berencana
untuk menempatkan halaman anda dalam internet, anda harus
menaruh semua gambar yang digunakan dalam web dengan baik.
Ini akan diceritakan pada bagian “publishing”
7. Image Placeholder: Penempatan gambar bisa digunakan secara
efektif dalam web desain. Mereka akan terlihat sederhana, tapi
mereka sangat penting. “image”. Ini merupakan pixel kosong yang
bisa digunakan untuk berbagai hal, seperti membuat ruang antar
objek, atau membuat garis dan kotak untuk layouts.
8. Fireworks HTML: Jika anda membuat halaman web memakai
Macromedia Fireworks, anda akan bisa memasukkannya ke dalam
halaman Dreamweaver MX dengan menggunakan tool ini.
9. Flash: Mengijinkan anda untuk memasukkan elemen flash dalam
halaman web.
10. Rollover image: Suatu efek khusus pada gambar, ketika kursor
mouse digerakkan pada gambar maka gambar akan berubah.
11.Navigation Bar: Ini merupakan fungsi yang komplek dan akan
membuat anda untuk mengendalikan bar situs anda, dan mengubah
gambar untuk link ke halaman lain.
12.Horizontal Rule: suatu garis sederhana yang bisa digunakan
untuk beberapa bagian isi halaman web. Klik tombol ini,
memutuskan panjang garis horizontal, dan ini akan dimasukkan ke
halaman.
13.Date: Klik tombol ini untuk memasukkan tanggal ke halaman web,
14.Tabular Data: Memasukkan data ke dalam tabular
15.Comments: Komentar bisa digunakan dalam halaman web, tanpa
benar-benar muncul pada halaman web. Ini akan membantu jika
anda ingin mengingat sesuatu yang anda desain.
16.Tag Chooser: Memasukkan spesifik HTML tag dari daftar.
Biasanya digunakan oleh Web Developer yang sudah mahir.

Layout
Fungsi dalam layout tab membantu untuk membuat layout desain
untuk halaman.
<-- Klik untuk melihat gambar
1. Insert Table: Ketika anda mengklik tool ini, jendela akan
muncul menanyakan anda untuk memasukkan informasi untuk
membuat tabel. Ketika anda selesai, klik pada “OK” dan tabel
akan muncul dalam halaman web anda.
2. Draw Layer: Layer yang bisa membantu ketika mendesain layout
untuk halaman. Layer bukanlah tabel, tapi merupakan kotak yang
bisa diisi teks, gambar, atau apa saja, dan bisa ditempatkan dimana
saja dilayar. Ketika anda mengklik tombol ini, kursor anda akan
berubah menjadi salib, dan anda bisa menarik layer pada halaman

Text
Fungsi dibawah ini membantu untuk mengedit dan memformat teks
dalam halaman web.
<-- Klik Untuk Melihat Gambar
1. Font Tag Editor: Ketika anda memiliki font spesial yang anda buat
untuk digunakan atau dalam Cascading Style Sheet, anda bisa
mengedit tag dengan mengklik icon ini.
2. Bold: Menebalkan teks yang anda pilih
3. Italics: Memiringkan teks yang anda pilih.
4. Strong: Seperti Bold hanya digunakan dalam HTML yang berbeda.
5. Emphasis: Sama seperti “Italic,” hanya “Emphasis” digunakan
untuk HTML tag yang berbeda ().
6. Paragraph: menempatkan ruang antar blocks teks untuk
membuat paragraph.
7. Block Quote: Pilih teks yang diinginkan, suatu teks akan diberi
tanda kutip dari sumber lain, dan klik tombol ini untuk mengubah
format ke block quote.
8. Preformatted Text: Teks akan terlihat monospace atau,
fixewidth font..
9. Heading 1: Memilih teks ke ukuran besar.
10. Heading 2: Memilih teks ke ukuran sedang.
11. Heading 3: Memilih teks ke ukuran kecil
12. Unordered List: Membuat daftar bulet
13. Ordered List: Membuat daftar angka
14. List Item: Mengijinkan anda untuk mengedit teks dari daftar
item
15. Definition List: Format otomatis ke daftar untuk definisi
16. Definition Term: Format otomatis memasukkan definisi.
17. Definition Description: Otomatis format deskripsi
18. Abbreviation: Memasukkan dalam arti penuh
19. Acronym: Memasukkan nama panjang dari acronim

Frames
Gunakan menu ini untuk mempermudah memformat frames
<-- Klik Untuk Melihat Gambar
1. Left Frame: Memasukkan frame pada sebelah kiri.
2. Right Frame: Memasukkan frame pada sebelah kanan.
3. Top Frame: Memasukkan frame di atas.
4. Bottom Frame: Memasukkan frame disebelah bawah.
5. Bottom and Nested Left Frame: Memasukkan frame utama
dibawah, dan sebagian kecil dikiri.
6. Bottom and Nested Right Frame: Memasukkan frame utama
dibawah, dan sebagian kecil dibawah.
7. Left and Nested Bottom Frame: Memasukkan frame utama
disebelah kiri, dan sebagian frame dibawah.
8. Right and Nested Bottom Frame: Memasukkan frame
disebelah kanan, dan sebagian frame dibawah.
9. Top and Bottom Frames: Memasukan fram diatas dan dibawah.
10. Left and Nested Top Frame: Memasukkan frame utama disebelah
kiri dan sebagian diatas.
11.Right and Nested Top Frame: Memasukkan frame utama
disebelah kanan, dan frame lainnya disebelah bawah.
12.Top and Nested Left Frame: Memasukkan frame utama diatas,
dan frame lainnya disebelah kiri.
13.Top and Nested Right Frame: Memasukkan frame utama
diatas, dan frame lainnya disebelah kanan.

Forms
Agar Halaman Web lebih interaktif, anda bisa memasukkan element
form.
<-- Klik Untuk melihat gambar
1. Form: Membuat area baru pada halaman web untuk form
2. Text Field: Membuat kotak teks untuk user untuk
memasukkan data dalam halaman web.
3. Hidden Field: Bidang yang tersembunyi mengumpulkan informasi
tentang pengunjung lokasi. Informasi menyimpan bidang
dikembalikan kepada server ketika format disampaikan.
4. Textarea: Sama seperti teks field, tapi diijinkan lebih dari satu
garis teks untuk dimasukkan.
5. Checkbox: Checkbox mengijinkan users untuk memilih pilihan
dari list users bisa memilih lebih dari satu checkbox.
6. Radio Button: radio button mengijinkan user untuk memilih
satu pilihan dari daftar.
7. Radio Group: Memasukkan lebih dari satu radio button pada
daftar.
8. List/Menu: Membuat menu panah bawah
9. Jump Menu: Membuat jump menu. jump menu membawa users
ke lokasi yang berbeda tergantung apa yang dipilih dalam menu.
10. Image Field: Memasukkan image ke field
11. File Field: Membuat file dalam field yang mana akan upload.
12. Button: Ketika user memasukkan data ke form dan field, harus
disampaikan melalui tombol. Tool ini memasukkan tombol pada
halaman.
13. Label: Membuat label untuk field.
14. Fieldset: membuat tag untuk elemen group form.

Membuat Halaman Baru
Ketika Dreamweaver MX dijalankan, halaman kosong biasanya tampil.
Jika tidak, anda bisa membuat halaman web kosong dengan menuju menu bar
dan memilih "File," dan lalu "New" (shortcut “Ctrl+N”)

Membuka Halaman
Websites coded menggunakan HyperText Markup Language, or HTML.
Ini berarti, tipe file dari halaman web dalam internet adalah ".html." Web
browser akan menampilkan files HTML (yang mana kita akan terlihat berbentuk
kode-kode), dan tampilan seperti interface graphic, halaman web, untuk diatur
oleh user. Untuk membuka halaman web (an .htm or .html document) dalam
Dreamweaver MX, pergi menu bar dan pilih "File," dan lalu "Open."

Menyimpan Halaman Web
Dalam Dreamweaver MX (dan aplikasi lainnya), anda harus selalu untuk
menyimpan pekerjaan seperti biasanya. Untuk menyimpan file dalam
Dreamweaver MX, pergi ke menu bar dan pilih "File," dan lalu "Save As."

Halaman Web dan Hubungannya dengan yang lain.
Halaman pertama dari website akan mengacu pada "index page."
Semua halaman utama untuk web adalah "index.html." Ini sangat penting
untuk anda menyimpan halaman utama dalam index file (dengan menyimpan
dalam bentuk "index.html").


Narasumber :
1. Google
2. Buku "MACROMEDIA DREAMWEAVER TUTORIAL"