1. Buka software Adobe Dreamweaver sobat, tunggu beberapa saat hingga terbuka. Langkah pertama yang
harus kita lakukan adalah membuat "Dreamweaver Site" ini bertujuan agar halaman web yang kita buat
teroganisir dengan baik dan berada dalam 1 tempat yang sama. Klik Dreamweaver Site...
2. Lalu akan muncul jendela, berikan nama website yang sobat inginkan. Disini saya memberikan nama
web-nya adalah Tekno Web, Lalu tekan Next
3. Disini sobat akan diberi pernyataan untuk menggunakan bahasa pemrograman server-side atau tidak,
karena berhubung kita hanya membuat web sederhana maka server-side tidak digunakan. Pilih 'No, I do
not want to use a server technology' , lalu Klik Next
4. Tempatkan dimana sobat ingin menyimpan file web ini, sobat dapat menentukan ingin disimpan dimana
file web-nya nanti. Saya disini membiarkannya secara default berada di Documents, lalu klik Next
5. Pilih 'None' karena kita tidak menggunakan remote server, dan kemudian langsung klik Next saja.. ini
langkah terakhir untuk membuat 'Dreamweaver Site' folder
6. Pada 'Create New' pilihlah HTML, lalu akan terlihat tampilan baru lalu pilih mode 'Design'. kemudian
pilih icon tabel, buatlah barisnya menjadi 4 dan kolom 2. pada tulisan Header pilihlah 'Both'. Klik OK
7. Disini kita akan menuliskan kode HTML untuk mengatur lebar baris dan kolom pada tabel, beralihlah
ke mode 'Code', lalu aturlah tag HTML table width menjadi 1029 dan height menjadi 764.
Pada baris pertama kolom pertama aturlah menjadi width-nya menjadi 233 height-nya menjadi 250,
dan pada baris pertama kolom ke-2 atur width-nya menjadi 780.
Pada baris ke-2 atur height-nya menjadi 72, pada kolom ke-3 atur height-nya menjadi 391, dan yang
terakhir pada kolom ke-4 aturlah menjadi 39. (lihat pada gambar untuk lebih detailnya)
8. Beralihlah ke mode 'Design', pada baris kedua seleksi / blok kemudian klik kanan Table ---> Merge
Cells. selanjutnya pada baris keempat seleksi / blok kemudian merge kembali tabel tersebut.
9. Selanjutnya kita akan memberikan warna pada masing-masing baris dan kolom dengan cara klik baris
atau kolom yang ingin diberi warna, lalu pada bagian bawah ada 'Properties' pilih Bg dan pilihlah warna
yang disukai.
10. Disini kita akan memberikan gambar pada header web, beralihlah kembali pada mode 'Code' dan
ketikkan kode HTML pada baris pertama kolom pertama <img src="nama_gambarnya.jpg" width="233"
height="250" /> , pada baris pertama kolom kedua ketikkan <img src="gambarnya.jpg" width="780"
height="250" /> . dan berikan teks pada header kita <font size="6"> NAMA WEBNYA</font> .
Saya sarankan untuk menggunakan gambar yang memiliki background transparan atau minimal
menggunakan gambar yang warna background-nya sama.
11. Kita akan memberikan tombol navigasi interaktif pada web sederhana ini, dengan cara klik dahulu
pada tabel di baris kedua lalu pilih menu Insert ---> Media ---> Flash Button (Jika ada pemberitahuan
untuk menyimpan file web saat membuat tombol ini, maka simpanlah). Kemudian akan muncul jendela,
pilih tombol yang diinginkan. Saya disini menggunakan tombol Blip Arrow , berikan nama pada tombol-
nya 'Home' dengan ukuran font sebesar 13 dan sesuaikan warna pada tabel baris kedua. Lalu klik OK,
kemudian atur ukuran tombol pada 'Properties' dengan ukuran 200 x 50.
Lakukan hal yang sama hingga membuat 4 buah tombol, yaitu Home, Profil, Kontak, dan Tentang Saya
12. Beralihlah kembali pada mode 'Code', kita akan membuat footer nama pembuat. Pada baris ke-4
ketikkan kode HTML berikut : <h4 style="color: white;">2016 © Nama Web || Nama
Kalian</h4>
13. Langkah selanjutnya adalah membuat artikel pada web kita, masih pada mode 'Code' , pada baris
kedua kolom kedua ketikkan kode HTML :
<div align="center">
</div>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
Kelebihan :
Ilustrasi FTP
4. Dapat dikustom
Dreamweaver dapat disesuaikan dengan kebutuhan yang anda perlukan. Menu, tab,
perintah, font dan warna semua kode dapat disesuaikan dengan preferensi pribadi. Hal ini
dapat secara efektif memudahkan proses desain web. Selain itu dreamweaver didukung
banyak plug-in yang membantu anda dalam proses desain.
Kekurangan :
1. Harga Software yang Cukup Mahal.
Mungkin salah satu kekurangan dari Dreamweaver ini adalah dari segi harga. Dreamweaver
CS5 dibandrol oleh Adobe sekitar $399. Harga yang mungkin terjangkau oleh kalangan
tertentu saja.