Membuat Web Statis Dengan Dreamweaver

Dreamweaver merupakan software aplikasi yang memungkinkan kita untuk membuat halaman web dengan mudah. Versi 1 dirilis hampir satu dekade yang lalu, pada tahun 1997, dan sejak itu Dreamweaver menjadi aplikasi utama disainer web.Dengan menggunakan dreamweaver, seseorang dengan mudah membuat web, baik web statis maupun web dinamis. Pada kesempatan ini saya sajikan tutorial untuk belajar membuat web statis.Tutorial ini berisi tahapan membuat web statis langkah demi langkah untuk kemudian sampai pada tahapan web statis yang bisa diakses baik dari localhost maupun dari server internet.

Langkah-langkah membuat web statis

1. Pastikan bahwa server localhost sudah berjalan. Untuk Windows biasanya menggunakan Xampp for Windows.-, aktifkan control panelnya, pastikan Apache sudah berjalan ( berwarna hijau ) Lihat Gambar :

2.  Buka Software Dreamweaver dan definiskan lokasi situs anda.

Mendifinisikan Situs Web

1. Buka Windows Explorer pada windows, lalu buka folder c:\xampp\htdocs. Pada folder htdocs buatlah folder baru ( nama folder bebas dianjurkan dengan huruf kecil) misalnya “latihan”.
2. Buka Program Dreamweaver. Pilih Menu Site > New Sites maka akan tampil kotak dialognya.
3. Pada kotak dialog  Site Definition,  Klik Menu Advance. Lihat Gambar:
4. Kotak dialog Site Definition akan ditampilkan dalam mode Advances. Pada  bagian Category, pilihlah Local Info. Kemudian isikan item-item berikut:
   • Site  Name. Isikan dengan nama situs yang anda inginkan.
   • Local Root Folder, isikan nama folder yang telah kita buat sebelumnya pada langkah satu yaitu: C:\xampp\htdocs\latihan
   • Default Image Folder adalah tempat menyimpan gambar/images : Isikan C:\xampp\htdocs\images
   • HTTP Adress : http://localhost/latihan
   • Selesai  mendifiniskan situs baru, klik tombol OK.
   Membuat sketsa web statisUntuk memulai desain web,  buatlah rencana  desain web dengan membuat layout web tersebut dahulu.Implementasi Layout pada Tabel Dreamweaver Setelah kita menentukan sketsa layout web yang akan kita buat, selanjutnya layout dapat dibuat dengan bantuan table.
   
   1. Klik menu insert > table akan tampil kotak dialognya. Isikan pada
   1. • Rows  : 4
      • Columns :  3
      • Table width : 790 pixels
      • Border thickness : 0
      • Cell padding : 0
      • Cell spacing : 0
   

• Jika sudah sesuai, tekan OK, akan tampak di layar monitor table dengan 4 baris (rows ) dan 3 kolom ( columns ).
• Agar web kita tampak dilayar berada tepat ditengah-tengah, pilih pada properties nya bagian  Align : Center ( Lihat Gambar).

Pada tahapan ini kita sudah  berhasil membuat table sesuai layout yang di inginkan. Untuk selanjutnya kita lakukan manipulasi table sesuai layout yang ada sebagai berikut :

1. Tabel baris pertama dibiarkan apa adanya karena nantinya masing-masing kolom 1, kolom 2 dan 3 akan di isi images web yang akan dibuat header. Images yang akan dipakai sebagai header sebaiknya diletakkan pada folder c:\xampp\hatdocs\images. Hal ini dimaksudkan untuk mempermudah manajemen file pada web apabila file dan gambar sudah sangat banyak.
2. Blok semua kolom pada baris kedua menggunakan mouse dengan cara klik mouse tanpa dilepas pada table yang akan dimanipulasi baris dan kolomnya, lalu klik menu Modify > Table > Merge Cells, selanjutnya kolom-kolom pada baris kedua akan menyatu menjadi satu kolom saja. Lihat Gambar.
3. Kemudian pada baris ketiga kita memerlukan modifikasi dua kolom, maka bloklah kolom ke 2 dan ke 3 dengan klik tekan dan jangan dilepas sampai di kolom ke 3 baru dilepas, kemudian klik menu Modify > Table > Merge Cells.
4. Terakhir, pada baris keempat, kita juga hanya memerlukan 1 kolom saja seperti pada baris kedua, maka caranya sama dengan langkah ke 2.