Buat Homepage dgn Dreamweaver

POKOK BAHASAN:

•Mengenal Dreamweaver
•Elemen window Dreamweaver
•Persiapan pembuatan situs web
•Pengaturan halaman web
•Pengaturan text, list, color, link, image, horizontal rule & tabel
•Pembuatan frame & form

TUJUAN PEMBELAJARAN:

•Memberikan pengenalan aplikasi Dreamweaver pada mahasiswa sebagai pambangun web.
•Memberikan kemudahan dan keterampilan penggunaan dreamweaver dalam merancang dan membangun web dengan lebih mudah dan efisien.

10.1. Mengenal Dreamweaver

Beberapa waktu yang lalu, tool yang digunakan untuk membuat suatu halaman
web dibagi menjadi 3 jenis, yaitu: editor HTML berbasis teks, editor yang
mengkombinasikan tampilan grafik WYSIWYG (What You See Is What You Get)
dengan tampilan kodenya, dan editor yang benar-benar berbasis grafik. Tiap-tiap jenis editor tersebut memiliki grup penggemarnya sendiri, para programmer, para webmaster par t-time, dan para grafik desiner. Macromedia Dreamweamer (mulai versi 4) mungkin merupakan editor pertama dengan fitur-fitur lengkap yang memenuhi semua grup diatas.
Dreamweaver mempunyai beberapa fungsi penting dalam pembuatan suatu
halaman web, seperti Layout View – yang memungkinkan para designer halaman web dapat langsung menempatkan table dan sel di halaman webnya. Juga terdapat beberapa fungsi tambahan seperti team collaboration dan peningkatan kemampuan multimedia.

10.2. Memulai Dreamweaver

Bila kita membuat sebuah halaman web dengan Dreamweaver, maka selain document window,kita juga akan bekerja dengan tiga toolbar dan panel utama, yaitu:Insert Bar,Property Inspector, danSite Panel.
Catatan: Jika Insert Bar dan Property Inspector tidak ada saat kita menjalankan Dreamweaver, maka kita bisa menampilkannya dengan meng-klik Window kemudian pilih Insert Bar dan Property Inspector tersebut. Document window
menampilkan dokumen atau halaman web yang sedang kita buat. Pada bagian bawah dari Document window, kita bisa melihat nama file dari semua dokumen yang sedang kita buka. Dengan meng-klik nama file tersebut maka kita akan dengan mudah berpindah antara dokumen satu dengan lainnya.Insert Bar terdiri dari beberapa macam icon untuk memasukkan berbagai macam objek web seperti gambar, layer, dan tabel.
Insert Bar ini terdiri dari beberapa tab yang masing-masing terdiri dari beberapa icon yang berkesesuaian.

Property Inspector menampilkan property dari objek yang kita pilih didalam dokument. Seper tinggi dan lebar dari suatu gambar.

Sedangkan Site Panel memungkinkan kita untuk menampilkan dan mengatur semua file dan folder yang merupakan bagian dari website kita.

Gambar 10.1. Elemen window dari Dreamweaver MX 6.0

Dreamweaver dapat menampilkan dokumen dalam tiga cara:
Design View,Code View, dan Code and Design View.Pada Design View,kita bisa menampilkan dan mengedit dokumen secara visual. Tampilan dari Design View sama seperti bila kita menampilkannya dengan web browser (seperti Microsoft Internet Explorer).Pada Code View, kita bisa mengedit langsung halaman web kita dengan
menuliskan kode HTML, javascript, PHP, ASP, dan berbagai macam kode-kode yang lain. Tidak terlalu diperlukan untuk bekerja dengan Code View ini, karena hampir

semua fungsi yang kita perlukan untuk membuat suatu halaman web dapat di buat lewat
Design View. Sedangkan pada Code and Design View, kita bisa melihat Code View dan Design View secara bersamaan dalam satu tampilan windows.

10.3. Pengaturan Site

Suatu website merupakan kumpulan dari beberapa dokumen yang saling berhubungan (linked). Dreamweaver merupakan applikasi yang dapat digunakan untuk
membuat dan mengelola suatu website, juga untuk membuat suatu dokumen serta
memperbaikinya. Dokumen adalah halaman yang dilihat user ketika mereka
mengunjungi website kita. Dokumen bisa berisi teks, gambar, suara, animasi, dan juga link ke dokumen-dokumen yang lain. Dreamweaver menampilkan suatu site sebagai kumpulan dari file-file yang terdapat didalamnya. Kumpulan file ini bisa dilihat pada
Site Panel yang secara default berada di sisi sebelah kanan dari aplikasi Dreamweaver ini.

Gambar 10.2.Site Panel pad Dreamweaver

Untuk memulai membuat suatu website, kita akan membuat suatu site pada
Dreamwever. Caranya adalah dengan mengklik link Define a Site pada Site Panel. Kemudian akan muncul wizard untuk mendefinisikan suatu site.

Dibawah ini adalah beberapa langkah untuk mendefinisikan suatu site, yaitu:
Langkah pertama: kita diminta untuk mengisikan nama dari website kita.

Gambar 10.3. Langkah pertama untuk mendefinisikan site

Langkah kedua: terdapat pilihan apakah kita akan menggunakan server technology
seperti ASP, ASP.NET, PHP, JSP, atau ColdFusion.

Gambar 10.4.

Langkah kedua untuk mendefinisikan site
Langkah ketiga: ada 3 pilihan untuk meletakkan file-file dari website kita. Per tama adalah diletakkan pada drive lokal. Kedua diletakkan pada server secara langsung menggunakan local network. Ketiga diletakkan pada server dengan menggunakan FTP atau RDS.

Gambar 10.5. Langkah ketiga untuk mendefinisikan site

Langkah keempat: kita akan diminta mengisikan beberapa informasi yang dibutuhkan,sesuai dengan pilihan kita pada langkah ketiga.

Gambar 10.6.Langkah keempat untuk mendefinisikan site

Window terakhir yang muncul adalah summary dari site yang telah kita buat. Setelah kita mengklik tombol done, maka website kita langsung akan dibuat.

Catatan: pada topik kali ini kita akan memfokuskan pada pembuatan suatu website secara offline.

Setelah semua langkah tersebut kita lakukan, maka pada pada Site Panel akan tampil
infor masi tentang site yang baru kita buat.

Gambar 10.7.Informasi site pada Site Panel

10.4. Membuat Folder

Dreamweaver menyediakan tampilan visual dari website kita melalui
Site Panel.Website kita akan lebih mudah untuk dikelola jika kita mengatur file-file kita kedalam folder-folder. Untuk ini kita akan membuat dua folder, folder images untuk meletakkan file-file gambar dari site kita dan folder resources
untuk menyimpan file-file lain.

Cara membuat folder:
1. Klik kanan pada folder site kita (misal: PENS Website), kemudian pilih
NewFolder.
2. Ketikkan nama folder yang kita buat (misal: images) kemudian tekan Enter.

10.5. Bekerja dengan File
Dalam suatu website, kita bisa mempunyai satu atau lebih file doku men. Filedokumen ini yang biasa juga disebut sebagai page.

Cara membuat file:
1. Klik kanan pada folder site kita (misal: PENS Website), kemudian pilih
New File.
2. Ketikkan nama folder yang kita buat (misal: images) kemudian tekan Enter.

Bila kita mengakses suatu website, biasanya file dokumen yang pertama kali akan
diakses adalah file index.htm(tergantung dari setting di webserver). Untuk itu, pertama kali kita akan membuat satu file dengan nama index.htm

Untuk mulai bekerja dengan file yang telah kita buat, kita bisa me-double-klik pada nama file yang akan kita edit pada Site Panel.
Untuk mengganti title dari website kita, bisa kita isikan pada edit box tittle yang berada dideretan icon pada toolbar di bagian atas Dreamweaver.

Title tersebut akan tampil pada bagian paling atas dari web browser bila kita membuka
website kita menggunakan Internet Explorer .

10.6. Memasukkan Teks
Memasukkan teks ke dalam dokumen yang kita buat menggunakan
Dreamweaver sangat mudah. Setelah dokumen kita buka, tempatkan kursor pada
Document Window dan kita bisa langsung mengetikkan teks ke dalam dokumen
tersebut.
Bila kita ingin memformat teks yang sudah kita masukkan, car anya adalah
dengan memblok teks tersebut, kemudian ubah properti dari teks tersebut dengan menggunakan panel Property Inspector.
Ada beberapa properti dari teks yang bisa kita atur menggunaka panel Property Inspector tersebut. Yaitu: format teks, ukuran, bentuk huruf, warna, ketebalan, alignment, bullet dan numbering, dan lain-lain.

10.7. Memasukkan Objek
Ada banyak sekali objek yang bisa kita masukkan ke dokumen web kita,
gambar, tabel, frame, form, flash, dan banyak lagi yang lainnya. Pada Dreamweaver,
objek-objek itu dapat kita masukkan kedalam dokumen web kita dengan sangat mudah.

Pilih pada Insert Bar, objek apa yang kita inginkan, kemudian klik dan kita tinggal mengikuti instruksi yang ditampilkan oleh Dreamweaver. Teks pada dokumen web kita juga dianggap sebagai suatu objek oleh Dreamweaver.
Untuk memasukkan suatu objek kedalam halaman web kita juga bisa dilakukan
dengan mengklik menu Insert kemudian pilih objek yang akan kita masukkan kedalam
halaman web kita. Sedangkan untuk mengedit objek yang sudah berada pada dokumen web kita, bisa kita lakukan dengan mengklik objek tersebut kemudian kita bisa mengubah propertynya pada Property Inspector, sesuai dengan yang kita inginkan. Property yang dapat kita ubah pada Property Inspector akan berbeda-beda, tergantung dari jenis objek yang akan kita edit. Kita juga bisa menggunakan klik kanan mouse pada suatu objek untuk menampilkan daftar menu favorit yang bisa kita pilih, sesuai dengan objek yang ber sangkutan.
Kita juga bisa menggunakan objek layer sebagai tempat dari teks kita. Sehingga
kita bisa dengan mudah untuk memformat dan memindah-mindahkna teks kita tersebut.
Untuk menggambar suatu layer bisa dilakukan dengan memilih menu
Insert Layer,atau dengan mengklik icon Draw Layer pada Insert Bar Common.

10.8. Page Properties
Ketika pertama kali kita memulai Dreamweaver, halaman web kita secara
default mempunyai title Untitle Docu ment dan tidak mempunyai background. Kita bisa mengeditnya dengan mengakses ke Page Properties. Caranya adalah dengan mengklik menu Modify, kemudian pilih Page Properties. Atau bisa juga dengan menggunakan mouse, caranya: taruh kursor mouse pada dokumen kita, kemudian klik kanan mouse dan pilih Page Properties.
Pada Page Properties kita bisa mengedit banyak hal yang berhubungan dengan
halaman web kita, seperti warna latar belakang dokumen, warna teks, gambar pada latar belakang, level transparan dari gambar, dan lain-lain.

Gambar 10.8.Kotak dialog Page Properties

10.9. Membuat Tabel
Penggunaan tabel sangat berguna untuk pengaturan data. Tabel juga bisa
digunakan untuk mengontrol dimana harus meletakkan gambar dan teks pada halamanweb. Dengan tabel juga memungkinkan kita untuk memodifikasi isi dari tiap sel pada tabel. Atau kita bisa memblok beberapa sel, kolom, atau baris yang ingin kita atur dengan setting yang sama.
Kita bisa mengontrol hampir semua fitur dari suatu tabel menggunakan
Property Inspector. Untuk memasukkan tabel kedalam dokumen web kita, bisa
dilakukan dengan cara memilih menu Insert Table atau dengan memilih icon Insert
Table pada panel Insert Bar Tables. Kemudian akan muncul kotak dialog untuk
memasukkan tabel dimana kita bisa mendefinisikan beberapa parameter disini (misal:jumlah baris, jumlah kolo m, dll).

Gambar 10.9.Kotak dialog untuk memasukkan tabel.

10.10. Membuat Link

Pada Dreamweaver, kita bisa menambahkan link yang menghubungkan antar
halaman web pada website kita, link ke website lain, maupun link ke file dokumen dengan cara yang sangat mudah.
Untuk membuat suatu link, baik link ke halaman web maupun link ke file
dokumen (seperti file Microsoft Word, file PDF, dll), yaitu:
1. Pilih teks, gambar, atau objek yang ingin kita jadikan sebagai link.
2. Pilih menu
Modify Make Link akan muncul kotak dialog Select File.
3. Ketikkan alamat URL dari tujuan link kita kedalam teks box URL atau dengan
memilih file menggunakan kotak browser yang ada. Setelah selesai klik OK.

Catatan: Bila file yang kita pilih berada diluar dari folder root dari website kita
maka akan muncul dialog yang menanyakan apakah kita akan mengcopy file
tersebut kedalam folder root dari website kita.