ABSTRAK
Kajian ini bertujuan mengenal lebih dalam mengenai pembuatan sebuah Web dengan menggunakan salah satu software pendukung yaitu Macromedia Dreamweaver. Di dalam Macromedia Dreamweaver terdapat beberapa kemudahan untuk mendesign sebuah Web Programming yang salah satunya adalah Macromedia Dreamweaver mendukung file type php, html dan lain – lain. Dalam pembuatan file type php ataupun html apabila terjadi kesalahan dalam penulisan script maka Dreamweaver akan mendeteksi kesalahan tersebut dan memberi tahu dimana letak kesalahan tersebut.
PENDAHULUAN
Saat ini aktifitas membuat website sudah mulai menjadi tren baru yang banyak dipelajari orang, menggeser aktifitas membuat email beberapa waktu lalu. Apalagi saat ini sudah banyak terdapat program aplikasi web editor yang memudahkan orang untuk membuat website dengan cepat, mudah dan hasilnya pun sangat menarik dan interaktif. Salah satu program aplikasi web editor tersebut adalah Dreamweaver, yang dalam sejarahnya dahulu bernama Macromedia Dreamweaver karena sudah diakuisisi oleh perusahaan besar Adobe maka sekarang dikenal Adobe Dreamweaver. Aplikasi Macromedia Dreamweaver sudah dikenal banyak orang karena user akan lebih terbantu dalam membuat website ka rena telah dilengkapi dengan berbagai macam kelengkapan sehingga waktu pembuatan juga dapat menjadi lebih efektif dan efisien.
Macromedia Dreamweaver adalah sebuah HTML editor profesional untuk mendesain secara visual dan mengelola situs web maupun halaman web. Bilamana kita menyukai untuk berurusan dengan kode-kode HTML secara manual atau lebih menyukai bekerja dengan lingkungan secara visual dalam melakukan editing, Dreamweaver mambuatnya menjadi lebih mudah dengan menyediakan tool-tool yang sangat berguna dalam peningkatan kemampuan dan pengalaman kita dalam mendesain web.
Dreamweaver MX dalam hal ini digunakan untuk web desain.dreamweaver MX mengikutsertakan banyak tool untuk kode-kode dalam halaman web beserta fasilitas-fasilitasnya, antara lain : Referensi HTML, CSS dan Javascript, Javascript debugger, dan editor kode ( tampilan kode dan Code inspector) yang mengizinkan kita mengedit kode Javascript, XML, dan dokumen teks lain secara langsung dalam Dreamweaver. Teknologi Dreamweaver Roundtrip HTML mampu mengimpor dokumen HTML tanpa perlu memformat ulang kode tersebut dan kita dapat menggunakan Dreamweaver pula untuk membersihkan dan memformat ulang HTML bila kita menginginkannya.
Selain itu Dreamweaver juga dilengkapi kemampuan manajemen situs, yang memudahkan kita mengelola keseluruhan elemen yang ada dalam situs. Kita juga dapat melakukan evaluasi situs dengan melakukan pengecekan broken link, kompatibilitas browser, maupun perkiraan waktu download halaman web.
PEMBAHASAN
A. Mengenal Area Kerja Macromedia Dreamweaver
Pada Windows, Dreamweaver menyediakan semua-dalam-satu-jende la tata letak terpadu. Dalam ruang kerja terpadu, semua jendela dan panel yang terintegrasi ke dalam satu jendela aplikasi yang lebih besar. Berikut adalah tampilan dari macromedia dreamweaver :
B. Pembuatan Design Web Pada Macromedia Dreamweaver
Pada Dreamweaver anda dapat membuat design web sesuai dengan keinginan kita sendiri. Dreamweaver menyediakan fasilitas – fasilitas seperti : Design, Split, dan Code pada bagian design view. Apabila anda ingin langsung membuat web sesuai dengan tampilan yang anda harapkan maka anda dapat menggunakan fasilitas design, dengan fasilitas tersebut anda dapat membuat sebuah tampilan web seperti yang anda inginkan. Dan apabila anda ingin membuat sebuah web dengan menuliskan script atau kode maka anda dapat menggunakan fasilitas code. Sedangkan apabila anda ingin kedua – duanya ada pada proses pembuatan web maka anda dapat menggunakan fasilitas split. Berikut adalah tampilan design view :
Apabila anda membuat sebuah web dengan menggunakan design view code maka anda harus memperhatikan penulisan dari script atau code itu sendiri. Berikut adalah struktur dari penulisan script :
<html>
<head>
<title> …. </title>
</head>
<body>
…..Isi dari halaman web……
</body>
</html>
HASIL
Disini saya mencoba untuk membuat sebuah design web dengan menggunakan Macromedia Dreamweaver. Perhatikan code atau script berikut :
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<style type=”text/css”>
<!–
.style1 {
color: #FFFFFF
}
–>
</style>
</head>
<body>
<table width=”979″ height=”696″ border=”0″>
<tr>
<td height=”122″ colspan=”7″ background=”image/welcome.JPG”><div align=”center”></div>
<div align=”center”><marquee><font size=5 face=Arial color=white>Welcome To Ragiel’S</font></marquee></div></td>
</tr>
<form action=”home.php” enctype=”multipart/form-data” name=”form1″ id=”form1″>
</form>
<tr>
<td width=”211″ rowspan=”2″ background=”image/menu_r2.gif”><div align=”justify”>
<table width=”211″ height=”93″ border=”0″>
<tr>
<td width=”69″>Username</td>
<td width=”8″><div align=”center”>:</div></td>
<td width=”120″><input name=”username” type=”text” size=”20″ /></td>
</tr>
<tr>
<td>Password</td>
<td><div align=”center”>:</div></td>
<td><input name=”password” type=”password” size=”20″ /></td>
</tr>
<tr>
<td colspan=”3″><div align=”center”>
<input type=”submit” name=”submit” value=”Login” />
</div></td>
</tr>
</table>
</div></td>
<td width=”120″ height=”29″ background=”image/menu.gif”><div align=”center”><a href=”home.php” class=”style1″>Home</a></div></td>
<td width=”120″ background=”image/menu.gif”><div align=”center” class=”style1″><a href=”about.php” class=”style1″>About</a></div></td>
<td width=”120″ background=”image/menu.gif”><div align=”center” class=”style1″><a href=”register.php” class=”style1″>Register</a></div></td>
<td width=”120″ background=”image/menu.gif”><div align=”center” class=”style1″><a href=”materi.php” class=”style1″>Materi</a></div></td>
<td width=”120″ background=”image/menu.gif”><div align=”center” class=”style1″><a href=”galeri.php” class=”style1″>Galeri</a></div></td>
<td width=”120″ height=”29″ background=”image/menu.gif”><div align=”center”><a href=”download.php”>Download</a></div></td>
</tr>
<tr>
<td colspan=”6″ rowspan=”2″ background=”image/button_r.gif”> </td>
</tr>
<tr>
<td height=”457″ background=”image/menu_r.gif”> </td>
</tr>
</table>
</form>
</body>
</html>
Dengan code atau script diatas kita akan mendapatkan hasil design sebagai berikut :
PENUTUP
Semoga tutorial atau paper yang saya buat ini dapat diterima oleh anda semua dan juga dapat bermanfaat. Mungkin paper ini masih jauh dari kata sempurna, saya mohon maaf apabila ada kesalahan atau kekurangan dalam pembuatan paper ini. Terima kasih telah membaca atau memanfaatkan paper yang saya buat ini untuk pembelajaran dalam pembuatan sebuah website.
REFERENSI
www.rhantoro.net/…/I%20-%20Web%20Design%20with%20Dreamweaver.pdf
http://blog.re.or.id/macromedia-dreamweaver-mx-web-editor.htm
