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.

Baca lebih utuh ......

Pengenalan Dreamweaver

Dreamweaver adalah software aplikasi desain web visual yang biasa dikenal dengan istilah WYSIWYG—What You See Is What You Get—intinya Anda tidak harus berurusan dengan tag-tag HTML untuk membuat sebuah situs. Macromedia belum lama ini telah mengeluarkan rilis terbaru dari Dreamweaver yaitu Dreamweaver MX, dengan penambahan beberapa fasilitas baru di dalamnya. Dreamweaver tidak hanya dapat digunakan oleh para desainer web, namun juga dapat digunakan oleh programer untuk membangun halaman internaktif karena Dreamweaver MX mendukung pula PHP, ColdFusion, ASP.NET dan lain-lain. Menurut survey yang dilakukan oleh Pantone.com, www.pantone.com/products/products.asp?idArticle=209&idArea=1, pengguna Dreamweaver adalah 59% dari seluruh koresponden yang disurvey dan memang digunakan tidak hanya oleh desainer, tapi juga programer.

Dalam seri tutorial ini kita akan mengenal penggunaan Dreamweaver sebagai editor HTML visual. Untuk bagian pertama, kita akan mengenal lingkungan kerja dalam Dreamweaver MX dan membuat halaman web sederhana.

Mengenal Lingkungan Kerja Dreamweaver MX

Lihat Gambar 1. Dreamweaver MX menawarkan dua layout view untuk dijadikan sebagai tampilan kerja saat Anda membuat halaman web. Setelah instalasi, Dreamweaver MX akan memberikan opsi: Macromedia Dreamweaver MX Workspace atau Macromedia Dreamweaver 4 Workspace. Anda dapat mengubah-ubah tampilan ini lewat menu preferences, Modify > Preferences > Change Workspace. Pilihan ini tentu saja terserah Anda, pada tutorial ini saya akan menggunakan Dreamweaver MX Workspace.


Fig 1. Lingkungan kerja Dreamweaver MX

Berikut ini penjelasan untuk elemen-elemen workspace seperti telah tertera pada gambar. Document Window adalah tempat di mana Anda dapat membuat halaman web secara visual, kode, atau keduanya. Insert panel adalah tempat Anda dapat memasukan image, Flash movie, table, atau elemen lain. Insert panel ini serupa dengan menu Insert pada menu bar. Untuk memunculkan panel ini, klik Windows > Insert atau tekan Ctrl-F2. Property Inspector berguna untuk melakukan pengeditan pada suatu elemen di Document Window. Document Toolbar berguna untuk mengubah tampilan dari disign/visual view, code view, atau keduanya sekaligus. Selain itu juga untuk memberi titel pada dokumen, melihat tampilan di browser. Panels Group merupakan kumpulan dari panel-panel Dreamweaver MX.

Pada bagian ini kita akan membuat halaman web sederhana dengan pemformatan dasar pada teks, link, anchor, dan Page Properties.
Bekerja dengan Teks
Pada dasarnya Dreamweaver tidak jauh berbeda dengan program pengolah kata dalam memformat teks. Namun terdapat sedikit perbedaan karena Dreamweaver menggunakan HTML. Untuk memformat teks dapat kita lakukan dengan menggunakan Property Inspector. Lihat Gambar 2


Fig 2. Property Inspector

Heading

Heading (Gambar 3) digunakan untuk membuat judul dari dokumen atau sub-subjudul berbagai level. Misalnya Anda menggunakan Heading 1 untuk judul, Heading 2 untuk subjudul tingkat pertama, dan sebagainya. Anda juga dapat menggunakan insert panel, pada Insert Panel, klik Tab Text.


Fig 3. Heading

Paragraf dan Line Break

Bila kita menekan Enter pada pengolah kata, maka akan menghasilkan paragraf baru. Demikian pula pada Dreamweaver. Namun paragraf dalam HTML (&lg:

&tg:) secara default menghasilkan jarak lebih besar daripada jarak antarbaris. Jika kita ingin antarbaris tidak ada jarak, maka kita membutuhkan
di HTML. Untuk berpindah baris dan bukan paragraf kita menggunakan Shift-Enter, atau Insert > Line Breaks. Lihat Gambar 4.


Fig 4. Paragraf dan Line Breaks

Memformat Teks Dengan Property Inspector

Seperti yang sudah kita bahas sebelumnya, Propery Inspector berguna untuk melakukan pengeditan pada sebuah elemen HTML. Kita akan menggunakan Property Inspector ini untuk memformat teks, ukuran, warna, dan perataan paragraf. Untuk memunculkan Property Inspector yaitu dengan Window > Properties atau dengan menekan Ctrl-F3.
Anda dapat memilih jenis font sesuai dengan selera Anda, namun terdapat 5 jenis font yang yang umum digunakan untuk halaman web, karena hampir semua komputer memiliki jenis huruf ini: Arial, Times New Roman, Courier New, Georgia, dan Verdana. Untuk mengubah teks yang telah Anda ketik yaitu dengan memilih teks yang ingin diubah, kemudian pilih jenis font yang ingin Anda gunakan. Dalam pilihan font dari drop down Property Inspector terdapat beberapa jenis huruf lain yang dipisahkan dengan koma. Pertama-tama browser akan membaca font pertama untuk ditampilkan di browser, bila font pertama tidak terinstal di komputer maka akan dilanjutkan dengan font kedua, kemudian ketiga, dan seterusnya. Font default adalah Times New Roman. Lihat Gambar 5.



Membuat Link, Anchor, dan Target

Untuk membuat link antarhalaman, selain diperlukan halaman link sumber—Source Link—juga diperlukan link tujuan—Destination Link. File contoh halaman Web sederhana di atas saya simpan dengan nama file index.htm. Halaman ini yang akan menjadi link sumber kita. Mari kita buat halaman baru untuk dilink:
Buatlah halaman baru untuk link tujuan, File > New, pada kotak dialog pilih Kategori Dynamic Page, dan Basic Page HTML. Lihat Gambar 6. Setelah selesai membuat file baru, kemudian simpanlah file tersebut dengan nama file tentangsaya.htm. Pada contoh, saya memasukkan horizontal Rule, Insert > Horizontal Rule untuk memisahkan konten dari halaman tersebut. Kemudian simpan di folder yang sama dengan index.htm.

Baca lebih utuh ......