ini saatnya kita melanjutkan tutorial
web kita yang membahas cara membuat web dengan menggunakan Macromedia
Dreamweaver. tutorial berkelanjutan ini kita telah mengenal sekilas
mengenai profil Dreamweaver sebagai salah satu software web design.
Bahkan pembaca mungkin sudah mencoba mendownload dreamweaver cs4 yang
merupakan versi terbaru saat posting ini saya rilis. Oke deh, saya asumsikan
pembaca sudah mendownload dan sudah menginstal dreamweaver baik
itu yang asli dan sudah di-purchase, trial, maupun yang versi tak
asli yang serial number-nya didapat dari crack-crack-an,
kayak saya ini :D. Atau kalau belum menginstal juga tidak masalah kok. Dreamweaver
tidak membuat kita pintar, tapi kita yang membuat dreamweaver menjadi
pintar. Gimana caranya? Dibagian ini kita akan mempelajari dasar-dasar
dreamweaver untuk membuat website.
- Silahkan jalankan program Dreamweaver jika pembaca telah menginstalnya.
- Pada menu utama, pilih File --> New, maka akan muncul tampilan pilihan jenis dokumen baru yang ingin kita buat. Maksudnya adalah kita memilih apakah ingin membuat halaman web basic (statis), web dinamis (biasanya untuk web berbasis database), halaman template, dan lain-lain. Setiap kategori terdiri dari beberapa jenis dokumen. Menurut saya jenis ini dibedakan berdasarkan bahasa dan fungsi yang akan digunakan untuk halaman website yang akan kita buat. Karena saat ini kita mencoba belajar yang dasar terlebih dahulu, maka silahkan pilih kategori Basic Page dan jenisnya HTML.
3.
Tampilan layar desain Dreamweaver terdiri dari 3
jenis, yaitu code, split, dan design.
Layar Code
berfungsi sebagai tempat kita membuat halaman web dengan mengetik bahasa
pemograman secara langsung. Artinya, layar inilah yang menampilkan struktur
bahasa pemograman web yang dipakai pada halaman web yang sedang kita buat.
Pada bagian design, kita membuat website dengan menggunakan menu-menu
yang tersedia, misalnya menu menambahkan gambar, membuat tabel, mengatur tampilan tulisan,
dan lain-lain. Kita tidak perlu mengetik bahasa pemograman halaman web
yang kita buat karena secara otomatis, setiap kita menambahkan sebuah elemen,
maka dreamweaver
akan menerjemaahkannya kedalam kalimat-kalimat bahasa pemograman yang
kita gunakan. Inilah keunggulan dreamweaver dibanding notepad, frontpage,
dan mungkin yang lainnya. Karena pada dreamweaver sudah tersedia menu-menu yang
siap pakai untuk mendesain halaman web. Selain itu, interface-nya
juga sangat bagus dan mudah digunakan. Bagian split berguna untuk membagi
halaman kerja
dreamweaver menjadi 2, separuh untuk menampilkan layar code,
dan separuh lagi menampilkan layar design. Hal ini berguna jika kita
ingin mendesain
halaman melalui layar design namun ingin melihat
perubahan kode bahasa webnya, dan juga sebaliknya. Jika pembaca masuk ke layar Code,
Anda akan melihat struktur HTML seperti yang pernah saya tunjukkan
pada postingan yang ini. Sebagai contoh struktur:
<title>Untitled Document</title>
dimana
struktur tersebut berfungsi untuk mendefenisikan judul halaman web kita yang
akan muncul di title bar browser.
4 Dibagian kiri atas dibawah menu File, terdapat menu dropdown
yang terdiri dari beberapa pilihan. Pilihan ini berguna
untuk memilih menu-menu desain yang akan kita gunakan. Misalnya kita
ingin menambah gambar, maka pilih Common, maka disebelah kanannya akan
muncul menu-menu bergambar yang bisa kita gunakan, salah satunya untuk
memasukkan gambar ke halaman website.
5.Coba pembaca masuk ke layar Design seperti yang saya jelaskan
pada poin 3. Setelah memilih bagian tersebut, dibagian bawah pembaca akan
melihat bagian Properties. Bagian ini berfungsi untuk mengatur tampilan dari elemen-elemen
yang kita tambahkan kedalam halaman web yang kita buat. Menu-menu Properties
ini hanya terlihat jika kita bekerja pada layar Design.
6.Dibagian samping, terdapat pula bagian yang bernama Panel.
Salah satu fungsi panel ini adalah untuk mengatur file-file web yang telah kita
buat.
7.Dibagian atas tepatnya disamping menu pilihan layar,
ada kotak isian bernama Title. Bagian berfungsi untuk memberikan judul
halaman web yang sedang kita buat yang akan muncul pada title bar browser.
Fungsi ini sama seperti yang
dijelaskan pada poin 3 diatas mengenai tag title. Coba pembaca ganti
tulisan yang ada di kotak tersebut menjadi misalnya "Tutorial Website
Dengan
Dreamweaver". Setelah itu, kembali ke layar code
dan lihat perubahan yang terjadi pada bagian tag <title>.
Tidak ada komentar:
Posting Komentar