(0275) 2974 127
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.
Adobe Dreamweaver mempunyai berbagai macam kegunaan. Ini kegunaan Adobe Dreamweaver :
Adobe Dreamweaver terus melakukan pembaharuan. Berikut ini adalah fitur fitur terbaru yang disertakan dalam Adobe Dreamweaver CC, yaitu :
Fitur visual editing untuk membantu membuat standar kode web dan menerapkan properti CSS seperti gradient dan shadows.
Template khusus web yang bersifat responsif dan dapat diubah tata letaknya.
Dapat mengubah desain web yang sudah dibuat di photoshop menjadi kode web secara otomatis.
Tersedia berbagai penambahan fitur seperti insert panel, keyboard shortcut dan HTML Tag Editor yang membuat proses editing lebih cepat dari sebelumnya.
Fitur ini mendukung secara penuh penggunaan HTML5, seperti streaming audio dan video.
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.
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.
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.”
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.
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.
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.
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.”
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.
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 :
Dreamweaver memiliki banyak kelebihan. Berikuti ini beberapa kelebihan dreamweaver atau keuntungan dreamweaver :
Selain memiliki kelebihan, Dreamweaver juga memiliki kerugian. Berikut ini kekurangan dreamweaver :
Apakah Anda menggunakan kartu ATM atau kartu debit? Suka bertransaksi secara cashless? Sepertinya Anda perlu…
Design website toko online tidak hanya soal estetika, tapi juga UX yang bagus secara keseluruhan.…
Sebelum memulai karir Anda sebagai desainer UX, Anda harus membuat portofolio yang mencakup semua pengalaman…
Keep-Alive memungkinkan browser pengunjung Anda mendownload semua konten (JavaScript, CSS, gambar, video, dll) melalui koneksi…
Job description seorang web developer adalah membuat situs web menggunakan berbagai bahasa pemrograman. Tanggung jawab…
Secara default, WordPress tidak mendukung A/B testing. Tapi jangan khawatir. Di bawah ini, kami telah…