Blog

Mengenal Tentang Dreamweaver

Pengertian Adobe Dreamweaver

Adobe Dreamweaver adalah program yang digunakan untuk membuat atau menyunting halaman web. Software Dreamweaver dikeluarkan oleh Adobe System. Aplikasi ini banyak digunakan oleh para programmer, desainer dan developer web dikarenakan kemudahan dalam penggunaanya, kelengkapan fiturnya dan juga dukungannya terhadap teknologi terkini.

Adobe Dreamweaver menyediakan fitur editor WYSIWYG (What You See is What You Get) atau dalam bahasa kesehariannya disebut Design View. Maksudnya adalah tampilan hasil akhir web nanti akan sama dengan tampilan pada saat proses perancangan halaman web.

Dengan segala fitur yang ada pada Adobe Dreamweaver, membuat suatu web bukanlah hal yang sulit. Tidak perlu menguasai berbagai macam bahasa pemrograman web seperti HTML, CSS, Javascript, PHP dll. Cukup mengetahui dasar dasarnya saja, karena didalam aplikasi ini sudah disediakan alat alat otomatis.

Selain itu, aplikasi ini juga menyediakan 3 macam tampilan yaitu :

Code View cocok untuk para programmer yang terbiasa dengan kode kode pemrograman web.
Design View cocok untuk para Designer yang terbiasa dengan visual.
Split View cocok untuk yang ingin menggunakan keduanya.

Sejarah Adobe Dreamweaver

Dulunya program ini bernama Macromedia Dreamweaver dan dikelola oleh Macromedia. Versi pertamanya dirilis pada Desember 1997 dengan nama Macromedia Dreamweaver 1.0 untuk sistem operasi Mac. Kemudian pada Maret 1998, muncul versi pertama untuk sistem operasi windows yaitu Macromedia Dreamweaver 1.2

Macromedia Dreamweaver terus berkembang sampai dengan tahun 2005 dengan versi terbarunya yaitu Macromedia Dreamweaver 8. Kemudian Dreamweaver diambil alih oleh Adobe System sehingga namanya berubah menjadi Adobe Dreamweaver. Pada 16 April 2007, Dreamweaver mengeluarkan versi terbarunya dengan nama Adobe Dreamweaver CS3.

Dengan hadirnya HTML5, Dreamweaver kembali merilis versi terbarunya dengan nama Adobe Dreamweaver CS5.5. Sedangkan sekarang ini versi terakhir Dreamweaver adalah Dreamweaver CC yang dirilis pada 21 April 2012.

Fungsi Adobe Dreamweaver

Adobe Dreamweaver mempunyai berbagai macam kegunaan. Ini kegunaan Adobe Dreamweaver :

Untuk mendesain situs web
Untuk membuat program berbasis web
Untuk membuat template blog
Untuk membuat situs web tanpa bersentuhan langsung dengan bahasa pemrograman.

Fitur Terbaru Adobe Dreamweaver CC

Adobe Dreamweaver terus melakukan pembaharuan. Berikut ini adalah fitur fitur terbaru yang disertakan dalam Adobe Dreamweaver CC, yaitu :

1. CSS Designer

Fitur visual editing untuk membantu membuat standar kode web dan menerapkan properti CSS seperti gradient dan shadows.

2. Starter Templates

Template khusus web yang bersifat responsif dan dapat diubah tata letaknya.

3. Extract

Dapat mengubah desain web yang sudah dibuat di photoshop menjadi kode web secara otomatis.

4. Live View

Tersedia berbagai penambahan fitur seperti insert panel, keyboard shortcut dan HTML Tag Editor yang membuat proses editing lebih cepat dari sebelumnya.

5. Full Support HTML5

Fitur ini mendukung secara penuh penggunaan HTML5, seperti streaming audio dan video.

Tutorial Dreamweaver: Membuat Website

1. Membuat Situs Baru

Buka Site -> New Site pada dashboard Adobe Dreamweaver CC lalu jendela akan muncul.

Langkah pertama yang perlu dilakukan adalah memberi nama website dan menyimpannya dalam satu folder. Cara ini dapat membantu untuk mengelola file dan mempermudah untuk melakukan proses unggah.

Jika ingin memasukkan gambar ke situs, klik Advanced Settings -> Local Info untuk melakukannya. Folder gambar akan dibuat dalam folder situs.

Klik Save jika sudah selesai.

2. Membuat File Homepage

Buka File -> New lalu pilih New Document. Pilih HTML sebagai tipe dokumen lalu klik Create tidak harus memberi judul dokumen.

Kemudian akan diarahkan kembali pada lembar kerja dan lembar kerja akan berwarna putih dengan beberapa baris kode HTML. Sebenarnya, lembaran itu merupakan tampilan website secara live. Simpanlah file HTML sebagai index.html, dan letakkan dalam folder situs.

3. Membuat Header

Pada langkah ini akan membuat header website. Biasanya header akan diisi oleh logo dan nama situs.

Klik halaman putih atau pilih bagian tertentu dengan elemen <body> pada editor. Klik Insert pada kanan atas panel. Langkah ini akan menampilkan daftar dari elemen HTML umum yang dapat ditambahkan pada halaman.

Cari elemen Header.

Klik drag and drop elemen tersebut ke lembar kerja, dan dalam sekejap elemen tersebut akan ditambahkan pada website beserta kodenya.

Setelah itu, ubah header menjadi heading dengan tag <H1>…</H1>. Hal ini dilakukan agar website SEO-friendly dan menginformasikan tentang situs kepada mesin pencari. Tandai teks di bagian tersebut lalu buka panel Insert. Cari dan klik Heading: H1.

Setelah itu ubah teks tersebut menjadi judul website. Judul website harus deskriptif dan mewakili topik. Disini akan menggunakan contoh dengan nama “Welcome to The Development Site.”

4. Tambah Navigasi Home

Menambah baris setelah header untuk menambah tombol navigasi home. Sekarang masuk pada menu panel Insert dan cari elemen Navigation. Ketika klik elemen tersebut, jendela akan muncul. Lalu, tulis navigation sebagai ID dan klik OK.

Cara ini akan menambah elemen navigasi ke editor. Ketika berada pada elemen konten, carilah Hyperlink pada panel Insert. Klik dan isi detailnya seperti contoh berikut :

CATATAN :

“Link tersebut akan mirip dengan halaman yang akan navigasikan ke website. Saat ini hanya menggunakan hashtag untuk mengisi kolom yang kosong.”

Ketika telah selesai, klik OK. Sekarang, tombol home dapat di klik dan memiliki lebih banyak baris kode di editor.

5. Menambahkan Deskripsi Website

Menambahkan header sekunder (sub-header), paragraf, dan beberapa bullet point sebagai deskripsi website.

Tambahkan baris setelah kode navigasi san klik Header: H2 dan Paragraph pada panel Insert. Langkah ini akan menambahkan tag <h2> dan <p> pada editor. Setelah itu, pastikan konten yang ada di dalamnya.

Sekarang bisa menambah bullet points. Untuk menambahkannya, tambahkan baris di bawah kode paragraf. Buka pane Insert dan klik Unordered List. Tag <ul> dapat ditemukan pada editor. Sementara itu, klik List Item pada panel Insert dan proses ini akan menambahkan tag <li> ke dalam tag <ul>

Hal yang perlu digaris bawahi pada list HTML adalah harus menambah beberapa tag secara manual sesuai dengan jumlah poin. Contohnya akan terlihat seperti berikut :

Disini telah berhasil membuat struktur dasar homepage. Dapat juga menambahkan beberapa konten lain seperti form, video, gambar dll. Namun, sebagai permulaan berhasil membuat struktur dasar saja sudah cukup.

Walaupun terlihat polos bisa menambahkan style sheet untuk membuatnya lebih menarik.

6. Membuat File CSS

Cascading Style Sheet (CSS) digunakan untuk memodifikasi elemen pada HTML dan akan selalu digunakan oleh developer ketika membuat website. Ibarat HTML adalah struktur tubuh dari website, maka CSS adalah bagian estetika yang membuat tubuh tersebut terlihat indah.

Sekarang, yang perlu dilakukan pertama kali adalah memberi header sebuah ID. Arahkan kursor ke kanan bawah dari panel Dreamweaver ini lalu pilih panel DOM. Anda akan melihat struktur situs secara keseluruhan disini.

Klik Header dan akan menyadari bahwa header ditandai dengan warna biru, bersamaan dengan label dan tanda plus.

Klik tanda plus dan ketikkan #header. Hashtag tersebut memberikan ID kepada elemen tersebut. Setelah itu tekan return atau enter. Pada menu selanjutnya, pilih source: Create a New CSS file.

Jendela baru akan muncul. Pilih Browse dan cari folder situs. Ketikkan style.css dan sklik save. Lalu, klik OK.

Maka akan mendapati style.css yang baru, muncul di atas live view dan elemen link baru pada code editor.

Lakukan cara yang sama untuk semua elemen yang memerlukan stylization. Saat ini, daripada membuat file CSS baru, simpan dimana file style.css berada.

Sekarang dapat menggunakan CSS selector untuk styling.

7. Buat CSS Selector untuk Judul Website

Tandai H1 dibawah header dari panel DOM. Lalu, pilih CSS Designer dari panel di atas.

Klik tanda plus di belakang Selectors. Secara otomatis nama #header h1 akan muncul, setelah itu tekan return.

CATATAN :

“Ini berarti bahwa hanya menargetkan elemen bernama h1 di dalam elemen #header. Dengan cara ini, styling hanya akan berlaku untuk teks tertulis (judul situs web) dan bukan elemen tajuk itu sendiri.”

8. Mengganti Font Judul

Pastikan selector berada pada #header h1.

Klik Properties dan hilangkan centang pada Show Set untuk mengaktifkan opsi Layout, Text, Border, Background dll.

Klik opsi Text dan arahkan kursor pada font-family dan klik default font. Bisa memilih diantara banyak opsi yang diberikan.

Ditambah lagi, menu Manage Fonts akan memberi hamparan opsi lain dari database Adobe Edge Web Fonts.

Pilih font yang diinginkan dengan meng-kliknya. Pada contoh dibawah ini sebagai contoh dengan menggunakan font bernama Karla. Ketika selesai, font judul website akan berganti dan akan ada tambahan kode penting pada Source Code dan style.css.

9. Arahkan Judul ke Tengah

Pada opsi Text, arahkan kursor text-align dan klik center. Maka akan menyadari ada perubahan dan juga kode tambahan pada style.css.

Buat lah perubahan-perubahan yang diperlukan untuk konten website. Pada tutorial ini juga menambahkan konten dan style pada situs. Inilah hasil akhirnya :