Panduan Web Desain Menggunakan Editor Macromedia Dreamweaver 8
Oleh
Angga Radhitya Rachmat, S.Kom
0882 6801 9510
0819 5724 1619
KATA PENGANTAR
Puji syukur penulis panjatkan kehadirat Allah SWT, pemilik segala apa yang ada dibumi dan
dilangit, Yang Maha Mengetahui tentang segala hal. Sholawat dan salam semoga senantiasa
dilimpahkan kepada tauladan kita nabi Muhammad saw., keluarganya, sahabatnya,
pengikutnya dan seluruh muslimin dimanapun berada.
Panduan ini penulis buat sebagai salah satu media sarana pembelajaran bagi yang ingin
mempelajari tentang dunia web, tentang desain web dan beberapa hal lainnya. Panduan ini
tidak dibuat secara beraturan, cuma berdasarkan tentang apa yang penulis pernah alami dan
lakukan sebelumnya pada waktu kuliah. Bahasa yang digunakan pun mungkin akan tidak
formal karena masih kesulitan untuk mempraktekkannya (^_^). Penulis menyadari bahwa
banyak sekali kekurangan yang ada, namun sedikit harapan akan bemanfaatnya buku ini
untuk pembaca yang ingin membacanya.
Angga Radhitya Rachmat, S.Kom
0882 6801 9510
0819 5724 1619
1. Perkenalan
Html, Php, Javascript, ASP VBScript? Makanan apa pula itu? ( dengan logat batak kental….
(^_^) horas…). Beberapa istilah diatas mungkin terasa asing bagi beberapa orang, namun
bagi programmer web desain bahasa diatas sudah tidak asing lagi. Bagi programmer tersebut,
istilah istilah tadi sedah menjadi makanan harian bagi mereka.
Istilah tersebut merupakan bahasa pemrograman yang diperuntukan untuk membangun web,
dimana masing – masing memiliki keunikan dan tatacara masing – masing dalam
menggunakannya. Dalam panduan ini akan lebih banyak dikupas tentang HTML dan PHP,
sementara yang lainnya akan dibahas lain waktu.
HTML adalah singkatan dari Hipertext Markup Language, sebuah bahasa pemrograman yang
diperuntukkan untuk membangun web. PHP adalah singkatan dari Personal Home Page, sama
sama bahasa pemrograman pembangun web. Perbedaan antara keduanya adalah untuk
merunning PHP dibutuhkan web server atau yang lebih dikenal dengan Apache, sedangkan
HTML tidak memerlukan web server untuk merunningnya. Secara umum sintak HTML dapat
dilihat seperti pada contoh dibawah.
Contoh sintak html
Seperti yang bisa dilihat pada contoh, sintak hatml dimulai dengan <html> dan diakhiri
dengan </html>. Dalam contoh tersebut ada <head> <title> yang digunakan untuk membuat
tanda pada browser yang digunakan seperti membuat nama file. Sedangkan untuk mengubah
konten atau isi dari file tersebut dilakukan pada <body>. Apabila file tadi dijalankan maka
akan muncul kata “latihan html” pada browser. Untuk browser ada banyak yang bisa
digunakan seperti Mozilla Firefox, Opera, Internet Explorer, dan lain sebagainya.
<html>
<head>
<title>Example</title>
</head>
<body>
Latihan html
</body>
</html>
Contoh sintak PHP
Sintak PHP dimulai dengan tanda <? dan diakhiri dengan tanda ?> Untuk beberapa
programmer, ada yang biasa menggunakan kata “php” setelah tanda <? dan ada yang tidak
menggunakan, tergantung selera programmer. Sintak HTML dan PHP dapat digabung, akan
tetapi ketika menyimpannya harus menggunakan ekstensi PHP.
Contoh penggabungan sintak HTML dan PHP
Ketika dijalankan maka file tersebut akan menghasilkan kata “Hello Word” pada browser
yang digunakan.
Untuk membuat file – file HTML atau PHP, ada beberapa editor yang bisa digunakan seperti
Notepad, Notepad ++, Macromedia Dreamweaver. Untuk editor notepad atau notepad ++
peminatnya agak lebih sedikit (menurut saya,…) karena ada beberapa paket yang tidak
terdapat didalamnya, sedangkan Macromedia Dreamweaver memiliki paket yang cukup
lengkap dan berbasis GUI sehingga memudahkan user untuk menggunakannya.
<?php
echo "latihan php";
?>
<html>
<head>
<title>Example</title>
</head>
<body>
<?php
echo "Hello World";
?>
</body>
</html>
2. Apa itu Macromedia Dreamweaver?
Macromedia Dreamweaver merupakan sebuah editor file yang digunakan untuk membuat
beberapa jenis file yang khusus untuk membangun web. Editor ini mampu menangani bahasa
pemrograman HTML, PHP, Coldfusion, ASP VBScript, dan masih banyak lagi. Disamping
itu Macromedia Dreamweaver mampu untuk menangani beberapa jenis desain web seperti
Frameset dan CSS. Untuk mendapatkan master Macromedia Dreamweaver dapat didownload
dari www.4shared.com, www.rapidshare.com, atau www.ziddu.com (hehehe, karena belum
bisa beli software original jadi terpaksa membajak… I’m sory…) Pada panduan ini
digunakan Macromedia Dreamweaver 8 sebagai subjek utama.
3. Instalasi Macromedia Dreamweaver
Pada umumnya untuk menginstal Macromedia Dreamweaver 8 hampir sama dengan instalasi
software lain, pertama double klik kiri master Macromedia Dreamweaver 8 hingga muncul
tampilan seperti dibawah ini lalu tinggal next seterusnya sampai selesai.
4. Menggunakan Macromedia Dreamweaver 8
Ini adalah tampilan ketika selesai instalasi Macromedia Dreamweaver 8. Disini bisa dilihat
ada berbagai macam file yang bias dibuat. Untuk pertama kita buat file html dengan mengklik
HTML dan kemudian akan muncul tampilan seperti dibawah ini.
Dalam dreamweaver, ada 3 tab yang disediakan untuk mengedit file tersebut, yakni dalam tab
Code, Split, dan Design. Untuk tab Code tampilannya adalah sintak program, sedangkan
untuk tab Design tampilannya adalah khusus desain, lalu tab Split merupakan gabungan dari
keduanya.
Tampilan diatas adalah tampilan versi desain. Untuk tampilan versi code dan split seperti
dibawah ini
Code Split Design
Sekarang coba kita pakai tab Design, lalu tuliskan kalimat “selamat datang “seperti dibawah
ini
Lalu sekarang coba untuk disimpan. Kalau disini saya coba simpan di drive D dalam folder
kuman + web desain dengan nama file latihan_html. Saya tidak menggunakan ekstensi html
dibelakangnya karena pada waktu pertama kalimembuat file tadi menggunakan file html.
Kemudian untuk merunningnya tekan tombol F12 dan akan muncul tampilan “Selamat
Datang” pada default browser
Cukup praktis bukan, daripada menggunakan editor yang lain yang membutuhkan
pemahaman tentang sintaknya. (^_^)
4.1 Membuat halaman berwarna
seringkali kita merasa kurang oke dengan tampilan yang standar seperti tadi, ada kalanya kita
ingin memodifikasi sesuai dengan apa yang kita inginkan, seperti menambahkan warna.
Caranya cukup mudah, masih menggunakan file yang latihan_html.html yang telah dibuat tadi
yaitu dengan menggunakan tab Code kemudian taruh kursor setelah kata body pada <body>.
Setelah itu tekan spasi dan akan muncul beberapa menu yang bisa digunakan. Untuk memberi
warna halaman gunakan bgcolor kemudian memilih warna yang diinginkan lalu disimpan
kembali. Pada contoh ini akan diberikan halaman yang berwarna kuning.
4.2 Membuat teks berjalan
Ketika kita browsing dan membuka situs tertentu, terkadang ada tulisan atau teks yang
berjalan baik dari sisi kanan ke kiri ataupun mengikuti gerakan mouse. Untuk membuat
seperti itu caranya cukup sederhana, masih menggunakan tab Code lalu taruh kursor sebelum
kata / teks yang akan dirubah. Lalu gunakan tanda “ < “ untuk mengeluarkan fungsi fungsi,
disini fungsi yang digunakan adalah marquee lalu pilihan gerakan teks pada fungsi behavior
dimana akan membuat beberapa tipe gerakan, pilih salah satu. Setelah selesai jangan lupa
tutup fungsi marquee diakhir teks tadi kemudian disimpan ulang dan dirunning.
4.3 Menyisipkan gambar
Terkadang, kita ingin orang mengenal apa yang kita buat. Salah satunya dengan menyisipkan
gambar, contoh foto si pembuat (narsis mode on…). Tujuannya antara lain supaya karya kita
dikenal orang dan juga sebagai copyright atas apa yang kita buat. Caranya masih di tab Code
lalu taruh kembali kursor seperti saat mewarnai halaman tadi. Kalau mewarnai halaman kita
menggunakan fungsi bgcolor maka untuk menyisipkan gambar menggunakan fungsi
background, kemudian browse lokasi file gambar berada. Setelah gambar ditemukan maka
akan muncul keterangan apakah gambar tersebut akan dicopy ke folder tempat menyimpan
file html tersebut. Klik yes kemudian akan muncul copy file as sebagai verifikasi pengcopyan
file dan tempatnya, setelah itu klik save.
4.4 Membuat table
Table yang dibuat hampir sama dengan yang dibuat pada Microsoft Word. Caranya adalah
klik Insert + Table, setelah itu atur jumlah baris pada Rows dan jumlah kolom pada
Column. Atau bila ingin langsung klik tanda dibawah tab Commands. Atur border =
0 pada Border Tickness.
Fungsi background
Rows Coloumns
Border
Tickness
Lalu setelah itu, kita akan mewarnai baris dan kolom dari table itu. Perlu diingat disini bahwa
untuk baris identifikasinya adalah <tr> sedangkan kolom adalah <td> (pada tab Code).
Sekarang kita akan mewarnai baris 1 dengan warna hijau muda, lalu baris kedua kolom 1
dengan warna merah. Perhatikan gambar berikut.
Fungsi pewarnaan ini masih menggunakan fungsi bgcolor yang telah dibahas sebelumnya.
Ingat, untuk table bermainnya pada baris dan kolom.
4.5 Pembuatan form
Ada banyak form yang bisa digunakan pada bahasa html. Berikut beberapa diantaranya.
NO NAMA FORM TAMPILAN SINTAK
1 Text Fields
<input type="text" />
2 Textarea
<textarea
name="name"></textarea>
3 Check Box
<input type="checkbox" />
4 Radio Button
<input type="radio" />
5 Pop Up Menu
<select name="name">
<option value="" >
<option value="" >
</select>
Memberi warna hijau muda pada
baris 1
Memberi warna merah pada baris 2
kolom 1