Professional Documents
Culture Documents
Dreamweaver MX
2
1. MENGENAL DESKTOP DREAMWEAVER MX
Untuk memahami cara bekerja dengan DreamWeaver paling tidak ada tiga
komponen yang perlu dimengerti pengguna software ini:
- Halaman utama: untuk desain website itu sendiri (tampilan web maupun
kode HTML)
- Obyek / Tool: terdiri dari common, layout, text, frames, forms, templates,
character, head, script dan application. Fungsinya adalah memasukan
obyekatau sifat obyek yang Anda inginkan, misalnya memasukan table
dan segala sifat-sifatnya, atau membubuhkan sifat text.
- Properties: berfungsi sebagai alat pengedit obyek yang sedang Anda olah.
Proporties akan berubah sesuai dengan obyek yang sedang Anda olah.
Bila object atau properties tidak tampak pada layar Anda, klik Windows Æ insert
atau properties.
3
DreamWeaver menyediakan tiga metode dalam mendesain website. Pertama,
mendesain dengan menggunakan kode HTML (bahasa dasar dalam membuat
website). Metode pertama ini tentunya bagi pendesain yang sudah mahir kode
HTMLnya. Kalau kita memilih metode pertama ini, maka layar di tampilan utama
ini murni kode-kode HTML. Sekali lagi ini cukup merepotkan bagi pemula.
Karenanya tidak dianjurkan bagi pemula menggunakan metode pertama ini.
Kedua, kita bisa desain juga dengan visualisasinya seperti kita mengetik melalui
editor word prosesor (MS WORD, misalnya). Metode kedua ini cocok bagi pemula.
Karena pendesain tidak perlu repot-repot memikirkan kode HTML. Anda cukup
klik tool yang Anda perlukan, DreamWeaver akan membuat sendiri HTML
kodenya. Jadi pada dasarnya tool hanya membuat HTML kode. Berbeda dengan
metode pertama, layar tampilan yang nampak sama seperti di website. Dalam
dunia Desktop Publishing disebut WYSIWYG (What you see is what you get = Apa
yang Anda lihat itulah tampilan sebenarnya).
Atau metode yang ketiga, yaitu perpaduan keduanya, mendesain secara visual
tapi juga bisa mengedit dengan kode HTML. Metode ini sebetulnya lebih tepat
daripada hanya mengAndalkan WYSIWYG. Sebab koreksi akan lebih tepat
dilakukan dengan kode HTML daripada sekedar tools.
4
2. MEMBUAT HALAMAN PERTAMA (INDEX)
Bila Anda mengikuti petunjuk step by step di bab ini, Anda akan mendapatkan
halaman index seperti pada gambar dibawah ini:
Define Site penting Anda lakukan bila Anda bekerja online atau meng-upload
homepage Anda ke internet. Dengan fungsi ini DreamWeaver akan meletakkan
semua file websites Anda ke dalam sebuah root folder (sebuah direktori).
Direktori beserta isinya ini yang nantinya akan di upload ke server.
5
Upload biasanya dilakukan dengan FTP (File Transfer Protocol).
Ketik hostname Anda (www.alamat.de), berikut FTP login dan
password. Klik next, selesaikan dialog dan done.
Semua files situs Anda akan disimpan dalam satu root folder dan akan
ditampilkan oleh dreamweaver secara otomatis seperti misalnya contoh dibawah
ini:
6
2.2. Membuat kerangka layout dengan tabel
Tabel merupakan perangkat yang sangat berguna untuk merancang tata letak
desain website. Tabel terdiri dari tiga bagian utama, yaitu baris, kolom dan sel
yang merupakan pertemuan antara baris dan kolom. Setelah membuat suatu
table, Anda bisa memasukkan elemen apa saja dalam tabel tersebut, seperti teks,
gambar, form dan lainnya. Bahkan bisa juga kita membuat tabel dalam tabel
untuk memanipulasi tampilan Anda di website.
Misalnya saja halaman pertama website Kharisma terdiri dari beberapa tabel yang
dijadikan sebagai kerangka layout. Tentu saja user kharisma tidak akan melihat
kerangka tabel, karena tabel sudah di-set “blind” atau invisible.
Bagaimana cara meletakkan teks “Selamat datang di website kami”, agar terlihat
center secara horisontal maupun vertikal? Mungkin Anda akan berpikir:
Untuk membuat halaman seperti pada gbr. 2.1 ikuti langkah berikut:
7
Cara membuat tabel:
Keterangan:
- Width = 100 Percent menAndakan tabel berukuran 100 % sama
dengan layar monitor tempat Website dibuka.
- Border = 0 menAndakan tabel tidak kelihatan “blind”.
Keterangan:
W = 100% dan H = 100% menAndakan table berukuran sama dengan
layar monitor tempat Website dibuka.
Setelah teks yang ingin digunakan sudah Anda masukkan pada jendela (layar)
dokumen, Anda dapat menformat teks tersebut seperti membuat teks menjadi
tebal, iring bergaris bawah, mengubah warna dan jenis font teks beserta besar
kecil eksnya. Teks juga bisa diformat rata kiri, kanan tengah atau rata kiri dan
kanan.
Untuk menformat teks terebut, Anda gunakan layar properti Teks. Jika kotak
properti itu belum tampak di layar, Anda dapat menampilkannya dengan
menggunakan menu Window Æ Properties. Atau bisa juga dengan short cut
dengan menekan Ctrl+F3.
Dengan properti teks, Anda dapat juga membuat list (daftar) berurut (orderred
8
list) dan daftar tanpa berurutan (unordered list). Daftar berurut dapat
menggunakan tAnda penomoran dengan angka atau huruf. Daftar tanpa
berurutan menggunakan tAnda bulatan atau kotak.
9
Klik Yes: DreamWeaver akan mengcopy file di root folder site
Anda.
4. Gunakan propertie untuk meletakkan gambar di tengah (loihat
gbr. 2.1)
Kalau Anda mempunyai lebih dari satu file html maka Anda tentu harus
menggunakan link. Link adalah salah satu tag (perintah) dalam html yang
berfungsi untuk menghubungkan dengan file html atau program yang lain. Sama
seperti waktu akan memasukkan gambar, Anda usahakan berkerja dalam satu
root folder.
Keterangan:
- Link = frame.htm: Dengan menekan text Enter, user akan
mendapatkan halaman kedua yaitu halaman frame.htm. Anda
bisa mengetiknya, atau browse pada simbol disampingnya.
Mengenai halaman ini akan dibicarakan di bab berikutnya.
- Target = _parent: halaman baru akan muncul pada window
yang sama
- Target = _blank: halaman baru akan muncul pada window baru
10
- Margin: batas tepi diberikan 0, berarti tanpa tepi.
- Link dan active Links: diberi warna #FFCCOO (kuning)
- Visited Link: links yang sudah dikunjungi berubah warna menjadi #3366CC
Sebuah website tentunya tidak hanya terdiri dari satu halaman. Berikutnya Anda
akan membuat halaman kedua. Ikuti step berikutnya.
11
3. BEKERJA DENGAN FRAME
Masih ingat? Jika user klik “Enter” pada halaman index maka akan muncul
halaman kedua.
Bila Anda mengikuti petunjuk step by step bab ini, Anda akan membuat halaman
seperti di bawah ini:
Halaman diatas sebetulnya menggunakan Frame (kerangka) yang terdiri dari tiga
html-file, seperti yang tertera pada gambar 3.2:
- Top: berisi file top.htm,
- Left: berisi file left.htm,
- Content: berubah-ubah, berisi file bab1_1.htm atau bab2_1.htm
12
Gbr 3.2: Frame yang terdiri dari 3 file
Sebelum membuat dan mengisi Frame siapkan dulu file yang diperlukan:
- top.htm
- content.htm
- left.htm
File left.htm
13
3. Ubah lebar kolom pertama dengan menggunakan layar
propertie. Sorot kolom pertama, masukan di propertie: w=20
4. Isi tabel dengan text home, bab 1, bab 2 dan masukan
nav_arrow.gif (panah) pada kolom pertama
5. pastikan Anda membuat tabel berisi text dan gambar seperti
dibawah ini:
20 pixel
80 pixel
7. save as left.htm
File Top.htm
14
3.2. Cara membuat frame
Tidak setiap frame mempunyai kerangka seperti gambar 3.2. Anda mempunyai
pilihan membuat frame seperti di bawah ini misalnya:
Anda dapat dengan mudah memberi nama, merubah file atau lebar kerangka
bagian atas, kanan dan content. Gunakan layar properties
15
1. Gunakan bersamaan klik kerangka bagian
atas.
2. Beri ketentuan di layar propertie seperti di bawah ini:
Keterangan:
No Resize = lebar dan tinggi kerangka tidak bisa dirubah user
No Scroll = tidak disediakan scrollbar.
Default Scroll = scrollen akan muncul otomatis bila teks panjang
ke bawah. Scrollen hanya penting untuk kerangka content.
Target adalah tempat file-html dibuka. Hal ini sudah kita singgung di bab
sebelumnya bagian hyperlinks. Dua target yang sudah disebut di bab
sebelumnya: _ parent dan _blank
Keterangan:
- Target harus sama dengan nama frame yang Anda buat. Perhatikan
penulisan besar dan kecil. Tips: Untuk menghindari kekeliruan,
sebaiknya memberi nama file dan frame gunakan semuanya dengan
huruf kecil.
16