Pengelolaan Website dengan Dreamweaver 8

Seringkali kita merasa kesulitan untuk melakukan upload atau download website di hosting kita. Kalau jumlah filenya sedikit tidak masalah, kalau banyak tentu merepotkan juga. Apalagi bagi yang biasa membuat website dengan editor seperti Macromedia Dreamweaver, karena sebenarnya Dreamweaver sudah menyediakan fasilitas manajemen file web di hosting web kita dengan mudah.

Caranya bagaimana?
Langkah-langkah berikut ini bisa digunakan bagi yang sudah membuat website di komputer atau belum sama sekali dan ingin membuat website baru.

Pertama, silakan buka Macromedia Dreamweaver 8, sehingga akan ditampilkan tampilan IDE (Integrated Development Environment) sebagai berikut :

Kemudian silakan pilih menu Site -> New Site.

Maka akan ditampilkan seperti di bawah ini:

Silakan isikan nama website dan alamat website anda. Kemudian klik tombol Next.

Pada tampilan selanjutnya, silakan pilih “No, I do not want …” dan kemudian klik tombol Next.

Selanjutnya, pilih “Edit local copies …”, dan klik tombol bergambar folder untuk menentukan dimana file-file website anda disimpan. Setelah itu tekan tombol Next.

Langkah selanjutnya adalah, anda diminta menentukan koneksi apa yang digunakan untuk berhubungan dengan server hosting anda. Silakan pilih FTP (yang paling umum digunakan, dan khususnya ini yang tersedia di Rumahweb).

Selanjutnya silakan isikan data-datanya berturut-turut yaitu: hostname (nama domain anda), folder website (isikan public_html saja), username dan password adalah username dan password dari control panel anda. Kemudian tekan tombol Test Connection.

Setelah keluar pesan tersebut diatas, maka anda sudah berhasil terhubung ke web hosting anda. Silakan mulai bekerja mengelola website anda melalui Dreamweaver 8.

Apabila ternyata pesan tidak sukses yang muncul, kemungkinan ada 2, yaitu:

• Anda harus merubah mode koneksi FTP nya, dari Aktive ke Passive atau sebaliknya dari Passive ke Active.
• ISP anda memblok koneksi ke port yang digunakan untuk FTP, yaitu port 21. Solusinya silakan hubungi ISP anda atau teknisi jaringan lokal di tempat anda menggunakan internet.

Untuk merubah mode koneksi dari Active ke Passive atau sebaliknya adalah sebagai berikut:

Pada opsi konfigurasi FTP tadi, silakan klik tab Advanced. Kemudian hilangkan atau beri tanda pada “use Passive FTP”, kemudian klik tab Basic, dan coba test connection.

Apabila menggunakan Passive atau Active tetap menghasilkan error, berarti silakan hubungi ISP anda atau teknis jaringan Internet di tempat anda.
Untuk mengupload file anda bisa lakukan dengan memanfaatkan file browser yang ada di Dreamweaver. Klik file yang akan diupload, kemudian tekan tombol panah atas warna biru.

Untuk mengupload semua file website klik pada roo directory paling atas dan kemudian tekan tombol panah atas warna biru.

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.

 Gambar : table yang sudah di lakukan modifikasi penggabungan sesuai layout.

Penjelasan :

• Columns adalah banyaknya kotak horizontal
• Rows banyaknya kotak secara vertikal
• Cells Spacing jarak antara satu sel dengan sel lainnya.
• Cell Padding jarak anatara tepi sel dengan obyek yang ada di dalamnya.
• Border Thickness: Garis pinggir dari table ( baik baris maupun kolom).
• Untuk selengkapnya tutorial web statis  ini, saya tidak akan menyajikan melalui web blog ini, silahkan download di sini untuk latihan.Anda juga bisa klik http://usi.fe.unair.ac.id/?file_id=9. Untuk imagenya bisa download di http://usi.fe.unair.ac.id/?file_id=10