Panduan Web Desain

Panduan Web Desain Menggunakan Editor Macromedia Dreamweaver 8

Oleh

Angga Radhitya Rachmat, S.Kom

[email protected]

0882 6801 9510

0819 5724 1619

mailto:[email protected]

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

[email protected]

0882 6801 9510

0819 5724 1619

mailto:[email protected]

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.

http://www.4shared.com/

http://www.rapidshare.com/

http://www.ziddu.com/

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

Code

Split

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.

Ketika dirunning akan menghasilkan seperti gambar berikut

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

6 Submit

<input type="submit" />

Apabila ingin membuat form tersebut pada tab Code, maka cukup dengan mengetikkan sintak

yang ada pada table diatas. Akan tetapi apabila ingin membuat dari tab Design maka caranya

adalah klik Insert + Form + pilih form yang akan digunakan.

Panduan Web Desain

Documents