Macromedia Dreamweaver
Macromedia
Dreamweaver is sebuah editor HTML profesional untuk mendesain secara visual dan
mengelola website dan halaman
web. Konsep WYSYWIG (What You See IS What You Get) HTML (HyperText Mark-up
Language) akan memberikan anda membuat membuat halaman web dan web sites sedara
mudah dan dccccdcepat. Tetapi dibalik semuanya itu, dreamweaver juga memberikan anda
kemudahan mempelajari DHTML (Dynamic HTML), yang bisa membuat website lebih
menarik dan lebih interaktif. Tidak hanya berhenti disini, dreamweaver juga
mempunyai fasilitas FTP (File Transfer Protocol) untuk upload situs anda ke
Internet ketika proses desain sudah selesai dibuat.
Fasilitas Dreamweaver
termasuk juga coding tools dan features: HTML, CSS, dan JavaScript
reference, a
JavaScript Debugger, dan code editors (the Code view and Code inspector) yang bisa untuk mengedit
JavaScript, XML, dan dokumen text lainnya secara langsung dalam
Dreamweaver. Teknologi Macromedia tentang HTML mengimport dokumen HTML tanpa memformat ulang code nya - dan anda bisa dengan mudah
mengeset Dreamweaver untuk
membersihkan dan memformat ulang HTML kapan pun anda inginkan.
Layout Screen Dasar
Pertama kalai anda start Dreamweaver anda akan disajikan
dengan sebuah dokumen tanpa judul [Untitled
Document] lihat pojok kiri atas dari gambar. Ini adalah dokumen halaman
web anda yang masih kosong sebelum anda memulai dan menambahkan elemen-elemen
seperti gambar, text, tabel dsb.
Anda juga bisa
melihat beberapa dari Dreamweaver's
palette's yang tampak dalam gambar 1. Jika tidak, secara sederhana anda
membutuhkan agar bisa ke Window menu
dan memilih apa yang ada inginkan secara visible
dari daftar yang tersedia. Gambar 1 ini menunjukkan Objects tersebut. Launcher
dan Properties Inspector palettes
terbuka. Ini akan diterangkan kemudian dalam manual ini.
Objects
palette
Pallete pertama yang kita
lihat adalah Objects palette
(lihat gambar 2). Objects palette mengijinkan anda untuk memasukan (insert) elemen pada halaman web anda. Anda bisa
menambahkan apa yang anda suka seperti : Gambar (Images), tabel (tables),
Flash movies, Java applets, dsb. Akan tetapi Objects palette mempunyai fungsi lebih lebih dibalik semuanya
itu.
Saat ini anda
sedang melihat pada objects yang biasa dipakai Common objects (lihat bagian atas dari objects palette dalam gambar 2). Dreamweaver juga menawarkan
anda 5 fungsi tambahan (lihat gambar 3), termasuk Forms, Characters dan frames.
Untuk mengakses palettes
tambahan ini sangat gampang tekan icon kecil panah ke bawah di common dan pop-out menu yang muncul (gambar 3).
|
Gambar 2 |
|
Gambar 3 - Pop-out menu |
Untuk melihat tiap
menu pada icon tsb, sederhana tahan mouse
over pada icon yang anda kehendaki dan help tip akan muncul. Kita akan melihat nanti untuk
menambahkan elemen yang berbeda ketika kita mulai membuat halaman sederhana
yang pertama nanti dalam manual ini.
|
|
Launcher
palette
Launcher palette (gambar 4) adalah
hanya palette yang tidak
dibutuhkan secara visible untuk
penggunaanya sepertinya pallete merupakan replicated pada bagian kanan bawah dari layar Dreamweaver (lihat
gambar 1). Jadi jika anda memfungsikannya buka dan tutup seperlunya untuk
menghemat layar anda.
Gambar 4 - The launcher palette.
Launcher palette digunakan untuk
mengakses beberapa file dari windows/palettes
Dreamweaver lainnya . Dari sini anda bisa membuka code tags HTML source editor, Site Map window, Behaviours
palette, dsb. Cobalah sekarang, klik pada HTML Source icon. Jangan takut anda bisa menutup window seperti
window lainnya dalam Windows 9x dengan mengeklik 'X' pada bagian sudut kanan
atas dari window yang ada.
Properties
Inspector
Properties Inspector fungsi kerjanya agak
berbeda dalam Palettes lain
pada Dreamweaver, sepertinya konteknya agak sensitif. Dalam penggunaan
sederhana yang berarti bisa diubah tergantung pada apa yang sedang anda edit
atau buat. Contohnya, ketika anda sedang mengedit text, Property Inspector akan tampak seperti gambar [gambar 5].
Tambahkan sebuah
tabel maka Properties Inspector
akan tampak seperti gambar 6
Gambar 5 - Properties Inspector untuk text.
Gambar 6 - Properties Inspector untuk tables.
Seperti yang anda
lihat, dua Properties Inspectors
sangat berbeda. Anda akan menjadi sangat familiar dengan Properties Inspector
nantinya, seperti anda sedang bekerja dengan Propert Inspectors sementara
anda sedang mendesain dan mengedit halaman web/ situs.
Halaman dasar
Setelah kita melihat
secara sekilas Dreamweaver sekarang kita akan mendefinisikan dan melihat dalam page properties (gambar 7). Yang
termasuk dalam opsi ini adalah page
colour, page title, background image, dsb.
Seperti diterangkan
sebelumnya, ketika anda membuka Dreamweaver secara otomatis akan ditunjukkan
pada sebuag dokumen blank untitled
page (lihat gambar 1 lagi). Untuk mengakses halaman Properties pada dialogue box anda mempunyai 3
pilihan. Anda bisa dengan right-click
dimanapun pada dokumen blank
tsb dan memilih Page Properties.
Anda bisa ke menu Modify dan
pilih opsi pertama, Page Properties
or atau anda bisa tekan CTRL+J
pada keyboard.
Gambar 7 - Page Properties.
Seperti anda lihat
dalam gambar 7 ada beberapa pilihan yang tersedia ketika anda setting the properties untuk halaman blank web anda. Kebanyakan opsi tsb
tidak pernah digunakan ketika anda membuat halaman, jadi kita akan konsentrasi
pada opsi common saja.
Title
: Ini adalah nama yang akan muncul pada
menu bar dari browser anda.
Jangan bingung dengan nama file halaman web anda. Title ini akan lebih
berguna bila dokumen akan di simpan [save as] atau di di print out.
Background
image
: Anda bisa memasukan sebuh gambar
untuk dijadikan background dalam
halaman web. Anda beribu-ribu websites dimana anda bisa download secara gratis [free background tiles] atau anda
bisa membuat sendiri dalam sebuah program komputer seperti Adobe Photoshop.
Background: Jika anda tidak ingin menggunakan sebuah gambar sebagai background untuk halaman web anda,
secara sederhana anda bisa menggunakan sebuag warna [a colour]. Untuk memilih
warbna yang kita inginkan klick pada icon
colour chip (the small square)
setelah itu anda akan membuat pilihan warna. Hal yang sangat bagus dengan
pilihan warna adalah bahwa warna yang anda berikan untuk semua halaman web adalah safe colours.
Text: Secara default
text colour yang digunakan sudah tersedia. Note : Ini hanya relevan
untuk current page dan tidak
semua halaman web yang anda punya dibuat juga atau halaman berikutnya.
Links: Pilihan 3 links
sharusnya tidak dirubah seperti browser
yang menunjukkan halaman yang akan dilihat pada
Marilah
kita membuat halaman web blank.
Dalam latihan sederhana
ini akan membawa anda pada beberapa fungsi sederhana yang bisa anda coba, plus
kita juga akan melihat dokumen setelah disimpan dan dilihat pada sebuah browser untuk melihat bagaimana
tampilan dokumen tsb.
Dalam Page Properties
dialog box lakukan langkah-langkah berikut.
1. Dalam Title option, hapus 'Untitled Document' dan ketikan 'My first page'.
2. Rubahlah Background dengan yang lebih bagus misal, a nice pale blue.
3. Rubahlah Text ke warna hitam.
2. Rubahlah Background dengan yang lebih bagus misal, a nice pale blue.
3. Rubahlah Text ke warna hitam.
Akhirnya klik Apply untuk melihat hasil perubahan
yang terjadi pada screen.
Sekarang ketikan nama
anda dan latar belakang anda sendiri agar supaya anda mempunyai beberapa text pada screen.
Sekarang sebelum kita
melihat hasilnya, kita perlu melakukan langkag save as dulu.
> File menu >
pilih Save As.
> Ketikan nama file mypage.htm.
Yakinkan anda tidak menggunakan spasi atau hruf besar dalam nama file anda. Ini bisa
menjadi masalah ketika anda mengupload file tsb ke internet.
> Ketikan nama file mypage.htm.
Yakinkan anda tidak menggunakan spasi atau hruf besar dalam nama file anda. Ini bisa
menjadi masalah ketika anda mengupload file tsb ke internet.
> Pilih lokasi
save untuk file tsb dan klik Save.
> untuk melihat
hasilnya seolah-olah tampil dalam web
tekan F12 pada keyboard.