|
Pengenalan
dasar Dreamweaver 4.0
Ido Priyono Hadi
Apa yang akan
pelajari pada lesson ini ?:
1. Apa itu Dreamweaver?
2. Basic layout
3. Objects Palette
4. Launcher palette
5. Sekilas tentang Properties Inspector
6. Sebuah halaman dasar [A basic page]
Apa itu 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 secara mudah dan cepat. 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.
Gambar 1 - sebuah tipikal
dari Dreamweaver screen.
|
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.
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.
> Pilih lokasi save untuk file tsb
dan klik Save.
> untuk melihat hasilnya seolah-olah
tampil dalam web tekan F12 pada keyboard.
Selesai
Selamat
berlajar dan berlatih
|