2 Cara Menggunakan Macromedia Dreamweaver

Dreamweaver merupakan salah satu software dari kelompok Adobe yang banyak digunakan untuk mendesain situs web. Adapun Adobe Dreamweaver sendiri adalah sebuah HTML editor profesional yang berfungsi mendesain secara visual dan mengelola situs web maupun halaman web. Untuk memulai penggunaan Dreamweaver MX 2004, kliklah Start > All Program > Macromedia Dreamweaver MX 2004. Saat pertama kali menggunakan Dreamweaver akan tampil Welcome Screen dimana kita dapat memilih tutorial yang sudah disediakan oleh Dreamweaver.

Gambar : 1.1 Welcome Screen

1. Elemen Dreamweaver MX 2004

Dalam ruang kerja Dreamweaver ada beberapa elemen utama yang membentuk suatu ruang kerja yang merupakan satu kesatuan tampilan antara menu utama, panel, property inspector, serta toolbar. Perhatikan ruang kerja Dreamweaver pada gambar berikut :

Gambar : 1.2 Ruang Kerja Dreamweaver MX 2004

A.     Insert bar berisi tombol-tombol untuk menyisipkan berbagai macam objek, sepeti : image, tabel, dan frame, ke dalam documen.

B.     Document toolbar berisi tombol menu pop-up yang menyediakan tampilan berbeda Document Window, misalnya Code, Split, atau Design.

C.     Document window berfungsi menampilkan documen dimana anda bekerja sekarang.

D.    Panel group adalah kumpulan panel yang saling berkaitan satu sama lainnya yang dikelompokkan dibawah satu judul.

E.     Tag selector berfungsi menampilkan hierarki tag disekitar pilihan yang aktif pada Design View.

F.     Property inspector berfungsi melihat dan mengubah berbagai property objek yang terpilih.

G.     Files panel berfungsi mengatur file-file dan folder-folder yang membentuk situs web anda.

2. Mengenal Panel Properties

Panel Properties digunakan untuk melihat dan mengubah berbagai property objek dan teks yang terpilih. Setiap objek memiliki property yang berbeda-beda.

Gambar : 1.3 Properties untuk Teks

Kelebihan Dreamweaver MX 2004

1)    Dapat digunakan pada dua system operasi, diantaranya Macintosh atau windows.

2)    Dapat dilihat tampilan website preview pada computer, ponsel atau PDA, dan printer.

3)    Membangun web dengan CSS dengan menggunakan CSS layout, CSS panel, dan CSS visualization.

4)    Fasilitas lengkap pendukung CSS

3. Tabel

Tabel merupakan salah satu fasilitas untuk mendesain halaman web. Dengan menggunakan table, lebih mudah untuk memodifikasi desain web.Untuk membuat table lakukan beberapa langkah berikut ini :

1)    Siapkan file baru, lalu letakkan kursor pada jendela dokumen.

2)    Pilih salah satu perintah pembuatan table berikut : pilih perintah menu Insert > Table. Klik tombol table yang terletak pada tabulasi table didalam Insert Bar.

3)    Selanjutnya akan tampil kotak dialog Table seperti pada 1.4 kemudian, tentukan jumlah kolom dan baris dengan memasukkan angka pada beberapa kotak teks yang sudah disediakan.

Gambar : 1.4 Kotak Dialog Table

Mengatur nilai property table :

1)    Row untuk menentukan jumlah baris tabel.

2)    Colums untuk menentukan jumlah kolom table

3)    Width untuk menentukan ukuran lebar tabel dan satuan ukuran yang dipakai, pixels atau persentase.

4)    Border untuk mengatur ketebalan border atau garis bingkai tabel.

5)    Cell Padding untuk mengatur jarak antara isi sel dengan batas tepi sel atau penampang sel.

6)    Cell Spacing untuk menentukan jarak antar sell dalam tabel.

Bagian Header

Fungsinya memberikan keterangan yeks pada bagian tabel sesuai dengan pilihan yang tersedia.

None, tanpa menggunkan keterangan teks.

Left untuk menampilkan keterangan teks pada kolom pertama atau pada bagian sebelah kiri.

Top untuk menampilkan keterangan teks pada baris pertama atau bagian sebelah atas.

Both untuk menampilkan keterangan teks pada kolom dan baris pertama.

Bagian Accessbility

Anda dapat memberikan keterangan judul tabel pada kotak teks Caption. Sementara untuk perataan teks busa menggunakan Align Caption.

E. Penempatan Struktur VBScript di Tag HTML

Stuktur dokumen HTML terbagi menjadi dua bagian yaitu bagian yang di akhiri dengan dan bagian yang diakhiri dengan . Pada bagian body disinilah yang akan ditampilkan didalam browser. Sebuah dokumen HTML selalu diawali oleh sebuah tanda pembuka atau disebut dengan opening tag dan diakhiri dengan tanda penutup yang disebut dengan ending tag yang ditandai dengan karakter /. Contoh penulisan dokumen HTML dapat dilihat sebagai berikut :

<html>

<head>

       ---------------- isi dari head

</head>

<body>

       ---------------- isi dari body

</body>

</html>

untuk penempatan struktur VBScript didalam dokumen HTML , kita membutuhkan Tag sebagai ending tag. Ada dua cara dalam penempatan struktur VBScript didalam dokumen HTML yaitu dibagian head dan pada bagian body. Cara penulisan tag VBScript ada dua macam yaitu :

<script language="vbscript">

 atau 

<script language="vbs">

Struktur VBScript yang diletakkan pada section body merupakan script yang berfungsi sebagai batang tubuhdari pemrograman VBScript dan diletakkan diakhir sebagai tujuan agar script dapat mengnali object html yang ada pada section body.

<html>

<head>

</head>

<body>

<script language="vbscript">

----------- isi dari kode VBScript ------------

</script>

</body>

</html>

contoh : simpan dengan nama contoh1.htm

<html>

<head>

</head>

<body>

<script language="vbscript">

document.write(" saya baru belajar VBScript")

</script>

</body>

</html>