Rabu, 26 Mei 2010

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.






MACROMEDIA DREAMWEAVER 8
Macromedia Dreamweaver adalah program untuk membuat dan mengedit dokumen HTML secara visual dan mengelola halaman sebuah situs. Dreamweaver menyediakan banyak perangkat yang berkaitan dengan pengkodean dan fitur seperti HTML, CSS, JavaScript, PHP, ASP, ColdFusion, dan XML.
Area Kerja Dreamweaver 8
1. Halaman Awal

Pada halaman awal Dreamweaver 8 terdapat beberapa menu yang dapat dipilih
a. Open a Recent Item
Pada menu ini akan ditampilkan beberapa file yang sebelumnya pernah kita buka dengan menggunakan Dreamweaver 8. Atau di paling bawah ada Open yang dapat digunakan untuk membuka file yang lain.
b.Create New
Pada menu ini kita dapat memilih dokumen baru apa yang akan kita buat dengan menggunakan Dreamweaver 8. Ada banyak pilihan, diantaranya HTML, ColdFusion, PHP, ASP, JavaScript, CSS.
c. Create From Samples
Pada menu ini kita dapat membuat file berdasarkan contoh yang sudah diberikan oleh Dreamweaver.
1. Halaman Utama Dreamweaver 8
Keterangan :
1. Toolbar Dokumen
Toolbar dokumen digunakan untuk mengubah tampilan dan mengakses fungsi-fungsi penting secara cepat dan mudah. Pada toolbar dokumen terdapat menu untuk berpindah antar dokumen kerja window dan mengatur tampilan area kerja. Untuk mengatur tampilan kita bisa memilih Code, Split dan Design.
2. Menu Utama
Menu Utama berisi semua perintah yang dapat digunakan untuk bekerja pada Dreamweaver.
3. Insert Bar
Insert bar merupakan tempa semua perangkat kerja (tombol) tang digunakan untuk membuat halaman web. Insert bar mempunyai dua jenis tampilan, yaitu tampilan sebagai menu dan tampilan sebagai tab.
a. Tab Common
Berisi semua tombol yang sering atau umum digunakan untuk membuat halaman web. Tombol yang ada di Tab Common antara lain Hyperlink, Email Link, Named Anchor, Table, Images.
b. Tab Layout
Tab layout digunakan untuk membuat layout halaman web. Terdapat tiga jenis layout yang dapat dipilih, yaitu Standard, Expanded dan Layout.
•Untuk Standard view tampilan dokumen seperti biasa (berupa garis-garis tabel)
•Untuk Expanded view menampilkan border tabel yang direnggangkan sehingga semua rancangan tabel dapat dilihat dengan jelas baik itu baris dan kolomnya.
•Untuk Layout view rancangan tabel ditampilkan sebagai kotak-kotak yang dapat di-drag, dan diatur ulang ukurannya dengan mudah.
c. Tab Form
Tab form digunakan untuk membuat elemen dalam form, misalnya saja textarea, textfield, radio button, checkbox
d. Tab Text
Tab text digunakan untuk membuat pengaturan text. Misalnya saja membuat text italic, strong, underline, h1.
e. Tab HTML
Tab HTML digunakan untuk membuat garis horizontal, menambahkan meta tag dalam tag , dan frame.
f. Tab Application
Tab application digunakan jika aplikasi kita sudah berhubungan dengan suatu bahasa pemrograman dan sebuah database.
g. Tab Flash elements
Tab flash elements digunakan untuk memasukkan elemen flash dalam dokumen yang kita buat.
1. Code View
Code View digunakan untuk melihat kode HTML dari halaman web yang sedang kita buat.
2. Panel Properties
Panel properties merupakan panel yang digunakan untuk melihat dan mengubah property dari semua objek yang ada di area kerja. Masing-masing objek mempunyai property yang berbeda. Untuk melihat property dari objek yang diinginkan, seleksi dulu objek tersebut.
3. Design View
Design View digunakan untuk melihat tampilan web dari kode HTML yang kita buat.

Panel Group
Panel group terdiri dari beberapa panel yang digunakan sebagai window pembantu untuk bekerja di Dreamweaver. Terdapat lima buah panel yaitu Design, Code, Application, Tag Inspector dan Files.
Pada panel Files berisi semua files (html, image, swf) jika anda telah mendefinisikan suatu site ke dalam area kerja Dreamweaver. Pada panel code berisi semua penjelasan dari tag-tag HTML dan cara penggunaanya. Panel Design berisi format-format CSS yang ada pada dokumen yang sedang dikerjakan.

Mendefinisikan Site
Dreamweaver memberikan kemudahan dalam manajemen file yang digunakan dalam membuat halaman web. Untuk itu diperlukan pengaturan agar Dreamweaver mengenali file-file Anda. Mendefinisikan site artinya mendefinisikan project baru kepada area kerja Dreamweaver.
Untuk mendefinisikan site baru, klik menu Site > Manage Site maka akan muncul tampilan berikut.

Kemudian pilih New > Site untuk menampilkan window baru yang berisi pengaturan site yang akan dibuat. Atau anda juga dapat mengaksesnya melalui menu utama Site > New Site. Kemudian akan tampil tampilan seperti gambar 1.7. Pilih tab Advanced > Category > Local Info untuk mengatur folder-folder tempat file yang akan digunakan dalam membuat halaman web. Berikut ini keterangannya :
• Pada isian Site Name, isikan nama project Anda atau nama situs Anda.
• Local Root Folder merupakan folder utama project anda. Beri centeng pada refresh local file list Automatically agar file terbaru anda muncul di Dreamweaver.
• Default Image Folder merupakan folder tempat file-file gambar anda disimpan. Default Image Folder harus berada di dalam Local Root Folder.
• Jika anda sudah mempunyai domain isikan alamat domain Anda di isian HTTP Address agar semua link yang ada pada ahalaman web anda selalu dicek.
• Enable Cache memungkinkan Dreamweaver menggunakan temporary file ketika adan mengetes halaman web anda (Preview in Browser) pada browser di computer local. Fungsinya untuk mempercepat proses pengeksekusian file ke browser.
Jika sudah selesai klik OK.

2 komentar: