Pengenalan Dreamweaver



  Dreamweaver yakni 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 menciptakan sebuah situs. Macromedia belum usang ini telah mengeluarkan rilis terbaru dari Dreamweaver yaitu Dreamweaver MX, dengan penambahan beberapa kemudahan gres di dalamnya. Dreamweaver tidak hanya sanggup dipakai oleh para desainer web, namun juga sanggup dipakai oleh programer untuk membangun halaman internaktif alasannya yakni 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 yakni 59% dari seluruh koresponden yang disurvey dan memang dipakai tidak hanya oleh desainer, tapi juga programer.

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

Mengenal Lingkungan Kerja Dreamweaver MX


Lihat Gambar 1. Dreamweaver MX memperlihatkan dua layout view untuk dijadikan sebagai tampilan kerja ketika Anda menciptakan halaman web. Setelah instalasi, Dreamweaver MX akan mengatakan opsi: Macromedia Dreamweaver MX Workspace atau Macromedia Dreamweaver 4 Workspace. Anda sanggup mengubah-ubah tampilan ini lewat sajian preferences, Modify > Preferences > Change Workspace. Pilihan ini tentu saja terserah Anda, pada tutorial ini saya akan memakai Dreamweaver MX Workspace.

 Dreamweaver yakni software aplikasi desain web visual yang biasa  dikenal dengan istilah Pengenalan Dreamweaver
Fig 1. Lingkungan kerja Dreamweaver MX

Berikut ini klarifikasi untuk elemen-elemen workspace menyerupai telah tertera pada gambar. Document Window yakni daerah di mana Anda sanggup menciptakan halaman web secara visual, kode, atau keduanya. Insert panel yakni daerah Anda sanggup memasukan image, Flash movie, table, atau elemen lain. Insert panel ini serupa dengan sajian Insert pada sajian bar. Untuk memunculkan panel ini, klik Windows > Insert atau tekan Ctrl-F2. Property Inspector mempunyai kegunaan untuk melaksanakan pengeditan pada suatu elemen di Document Window. Document Toolbar mempunyai kegunaan 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 bab ini kita akan menciptakan halaman web sederhana dengan pemformatan dasar pada teks, link, anchor, dan Page Properties.
Bekerja dengan Teks
Pada dasarnya Dreamweaver tidak jauh berbeda dengan agenda pengolah kata dalam memformat teks. Namun terdapat sedikit perbedaan alasannya yakni Dreamweaver memakai HTML. Untuk memformat teks sanggup kita lakukan dengan memakai Property Inspector. Lihat Gambar 2

 Dreamweaver yakni software aplikasi desain web visual yang biasa  dikenal dengan istilah Pengenalan Dreamweaver
Fig 2. Property Inspector

Heading

Heading (Gambar 3) dipakai untuk menciptakan judul dari dokumen atau sub-subjudul aneka macam level. Misalnya Anda memakai Heading 1 untuk judul, Heading 2 untuk subjudul tingkat pertama, dan sebagainya. Anda juga sanggup memakai insert panel, pada Insert Panel, klik Tab Text.

 Dreamweaver yakni software aplikasi desain web visual yang biasa  dikenal dengan istilah Pengenalan Dreamweaver
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 memakai Shift-Enter, atau Insert > Line Breaks. Lihat Gambar 4.

 Dreamweaver yakni software aplikasi desain web visual yang biasa  dikenal dengan istilah Pengenalan Dreamweaver
Fig 4. Paragraf dan Line Breaks

Memformat Teks Dengan Property Inspector


Seperti yang sudah kita bahas sebelumnya, Propery Inspector mempunyai kegunaan untuk melaksanakan pengeditan pada sebuah elemen HTML. Kita akan memakai 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 sanggup menentukan jenis font sesuai dengan selera Anda, namun terdapat 5 jenis font yang yang umum dipakai untuk halaman web, alasannya yakni hampir semua komputer mempunyai jenis abjad ini: Arial, Times New Roman, Courier New, Georgia, dan Verdana. Untuk mengubah teks yang telah Anda ketik yaitu dengan menentukan teks yang ingin diubah, lalu pilih jenis font yang ingin Anda gunakan. Dalam pilihan font dari drop down Property Inspector terdapat beberapa jenis abjad lain yang dipisahkan dengan koma. Pertama-tama browser akan membaca font pertama untuk ditampilkan di browser, jika font pertama tidak terinstal di komputer maka akan dilanjutkan dengan font kedua, lalu ketiga, dan seterusnya. Font default yakni Times New Roman. Lihat Gambar 5.

 Dreamweaver yakni software aplikasi desain web visual yang biasa  dikenal dengan istilah Pengenalan Dreamweaver

Membuat Link, Anchor, dan Target

Untuk menciptakan link antarhalaman, selain diharapkan halaman link sumber—Source Link—juga diharapkan link tujuan—Destination Link. File teladan halaman Web sederhana di atas saya simpan dengan nama file index.htm. Halaman ini yang akan menjadi link sumber kita. Mari kita buat halaman gres untuk dilink:
Buatlah halaman gres untuk link tujuan, File > New, pada kotak obrolan pilih Kategori Dynamic Page, dan Basic Page HTML. Lihat Gambar 6. Setelah jawaban menciptakan file baru, lalu 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.

Sumber: https://techkudet.blogspot.com/search?q=pengenalan-dreamweaver
Sumber https://fikriramdani32.blogspot.com/

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel