Mudahnya Membuat Website Menggunakan Adobe Dreamweaver CS6

Kiw tugas Pemrograman WEB lagi. Setelah minggu kemarin tugasnya adalah tentang CMS (Content Management System), kali ini judulnya tentang “Mudahnya Membuat Website Menggunakan Adobe Dreamweaver CS6”. Waktu pas prakerin kemarin, sempet install ini software tapi gak tau buat apa. Disini aku bakal bahas sekilas tentang Adobe 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 kita 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. Kita tidak perlu menguasai berbagai macam bahasa pemrograman web seperti HTML, CSS, Javascript, PHP, dan sebagainya. 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, Design View dan Split View. Code View cocok untuk para programmer yang terbiasa dengan kode kode pemrograman web. Sedangkan Design View cocok untuk para Designer yang terbiasa dengan visual. Jika ingin menggunakan keduanya, bisa memilih Split View.

Fungsi Adobe Dreamweaver

Adobe Dreamweaver mempunyai berbagai macam kegunaan. Ini dia 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

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.

Kelebihan Adobe Dreamweaver

Dreamweaver memiliki banyak kelebihan. Berikuti ini beberapa kelebihan dreamweaver atau keuntungan dreamweaver

  • Dapat membuat kerangka website dengan mudah dan cepat
  • Tersedia berbagai macam tema/template
  • Memiliki 3 tampilan yaitu Code View, Design View dan Split View
  • Memiliki Fitur Preview/Live View Kode yang dihasilkan ditulis secara rapi
  • Memiliki alat alat khusus untuk membuat program berbasis web
  • Mudah dioperasikan oleh pemula
  • ‘Memiliki banyak plugin

Kekurangan Adobe Dreamweaver

Selain memiliki kelebihan, Dreamweaver juga memiliki kerugian. Berikut ini kekurangan dreamweaver

  • Harga software original-nya mahal

Fitur Terbaru Adobe Dreamweaver CC

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

  • CSS Designer : Fitur visual editing untuk membantu membuat standar kode web dan menerapkan properti CSS seperti gradient dan shadows.
  • Starter Templates : Template khusus web yang bersifat responsif dan dapat diubah tata letaknya
  • Extract : Dapat mengubah desain web yang sudah dibuat di photoshop menjadi kode web secara otomatis
  • Live View : Tersedia berbagai penambahan fitur seperti insert panel, keyboard shortcut dan HTML Tag Editor yang membuat proses editing lebih cepat dari sebelumnya
  • Full Support HTML5 : Mendukung secara penuh penggunaan HTML5, seperti streaming audio dan video. dan masih banyak lagi fitur lainnya. ]

Pada tugas kali ini saya akan membahas tentang membuat website sederhana menggunakan Adobe Dreamweaver CS6. Langkah awal dalam membuat website adalah menetukan tema website kita. Untuk latihan kali ini kita akan menggunakan tema website pribadi.
Kita tentukan dahulu menu yang akan kita sajikan pada website kita. Sebagai contoh:
Menu utama terdiri dari: HOME, PROFIL, BERITA, GALERI, KONTAK
Layout kita buat sbb:

contoh-desain-website

atau

contoh-desain-website-2

Atau silahkan gunakan imajinasi anda untuk membuat layout website yang akan anda buat.
Keterangan:
Home adalah halaman awal website
Profil dapat diisi mengenai profil anda
Berita dapat diisi dengan berita pada hari ini
Galeri dapat diisi gambar-gambar atau foto-foto kegiatan
Kontak dapat diisi alamat dan nomor telepon yang dapat dihubungi

Untuk membuat website tsb berikut langkah yang dapat dilakukan:
Buka dahulu program Adobe Dreamweaver
Lembar Kerja Adobe Dreamweaver

lembar-kerja-dreamweaver

Untuk manajemen dalam membuat website, lakukan langkah berikut Klik Site -> New Site

step2

Akan masuk jendela baru sbb:

jendela-manajemen-situs

pada kolom site name silahkan isikan nama situs anda, misal Latihan, untuk local site folder adalah letak menyimpan seluruh dokumen (file-file) website anda.

cara-menyimpan-dokumen-dreamweaver

Klik tombol pada sebelah kanan, maka akan muncul lokasi untuk menyimpan seluruh file anda sbb

lokasi menyimpan file

Sebagai contoh, lokasi di F:/Websiteku

https://dl.dropboxusercontent.com/u/47457369/dreamweaver/lokasi-menyimpan-file-website.png

Lihat pada sidebar kanan Adobe Dreamweaver anda maka akan muncul folder tempat anda menyimpan dokumen website anda

https://dl.dropboxusercontent.com/u/47457369/dreamweaver/sidebar-kanan.png

Sampai di sini anda sudah berhasil melakukan seting root dokumen untuk website anda

Next step, adalah membuat dokumen HTML untuk website kita

https://dl.dropboxusercontent.com/u/47457369/dreamweaver/membuat-dokumen-html.png

Klik pada menu File->New, lalu pilih Blank Page->HTML lalu klik Create

https://dl.dropboxusercontent.com/u/47457369/dreamweaver/membuat-dokumen-html-baru.png

Langkah selanjutnya, kita akan membuat halaman utama, simpan file ini dengan nama index.html. Buat Layout utama (layout contoh 1) sebagai berikut:
Buat tabel dengan cara klik Insert->table, gunakan parameter sbb:
https://dl.dropboxusercontent.com/u/47457369/dreamweaver/membuat-tabel-di-dreamweaver.png

klik OK maka akan muncul tampilan sbb:

https://dl.dropboxusercontent.com/u/47457369/dreamweaver/tampilan-tabel-dreamweaver.png

Untuk menyesuaikan dengan layout 1, maka pada baris paling atas (untuk header) lakukan merge cell, dengan cara:

https://dl.dropboxusercontent.com/u/47457369/dreamweaver/merge-cell.png

Maka akan menjadi:

https://dl.dropboxusercontent.com/u/47457369/dreamweaver/merge-cell-3-cell.png

Karena kita akan menggunakan banyak gambar, alangkah baiknya jika kita membuat folder khusus untuk lokasi penyimpanan gambar, dengan cara sbb:

https://dl.dropboxusercontent.com/u/47457369/dreamweaver/membuat-direktori.png

https://dl.dropboxusercontent.com/u/47457369/dreamweaver/membuat-direktori-gambar.png

Pilih New Folder, beri nama folder baru dengan nama gambar

https://dl.dropboxusercontent.com/u/47457369/dreamweaver/direktori-gambar-dibuat.png

Selanjutnya adalah buka direktori di F:/websiteku/gambar, copykan semua gambar ke folder tsb, contoh:

https://dl.dropboxusercontent.com/u/47457369/dreamweaver/folder-gambar.png

Setelah kita masukkan gambar ke folder gambar, kita cek pada dreamweaver pada area kerja seperti di bawah, lalu klik F5 (refresh) maka gambar yang sudah dikopi akan diload oleh dreamweaver sbb:

https://dl.dropboxusercontent.com/u/47457369/dreamweaver/direktori-gambar-drefresh.png

Pada contoh hanya ada 1 file gambar yaitu header.jpg karena sebelumnya hanya mengkopi 1 file gambar.
Selanjutnya, kita simpan dahulu file ini dengan nama index.html dengan cara pilih menu File->Save

Selanjutnya kita masukkan gambar sebagai header dengan cara pada baris 1, kita sorot lalu pilih menu Insert->image sbb

https://dl.dropboxusercontent.com/u/47457369/dreamweaver/cara-memasukkan-gambar-dreamweaver.png

Buka folder gambar

https://dl.dropboxusercontent.com/u/47457369/dreamweaver/folder-gambar-dibuka.png

pilih file header.jpg, lalu klik OK, maka akan menjadi sbb:

https://dl.dropboxusercontent.com/u/47457369/dreamweaver/tampilan-header.png

Selanjutnya kita akan membuat menu utama di kolom 1 baris ke 2

https://dl.dropboxusercontent.com/u/47457369/dreamweaver/membuat-menu.png

Sesuaikan parameter seperti di atas (Horz: default, Vert:Top)
Selanjutnya kita buat tabel pada cell tsb dengan cara pilih menu insert->table dengan parameter
https://dl.dropboxusercontent.com/u/47457369/dreamweaver/parameter-tabel.png

https://dl.dropboxusercontent.com/u/47457369/dreamweaver/tampilan-dengan-menu.png

Lanjutkan dengan membuat menu utama seperti berikut:

https://dl.dropboxusercontent.com/u/47457369/dreamweaver/lanjutkan-dengan-membuat-menu.png

Selanjutnya kita akan membuat kode menggunakan tag . Tag ini untuk menentukan lokasi halaman yang muncul

membuat iframe di dreamweaver

https://dl.dropboxusercontent.com/u/47457369/dreamweaver/membuat-iframe2.png

Kita kembali ke split view, tuliskan tag berikut pada posisi lokasi iframe

https://dl.dropboxusercontent.com/u/47457369/dreamweaver/membuat-iframe-website.png

Sampai di sini halaman utama sudah kita buat. Langkah selanjutnya adalah membuat konten sesuai dengan menu yang sudah kita tentukan.
Nah, sebelumnya kita telah membuat sebuah tag iframe dengan atribut src=”welcome.html”, artinya ketika halaman index.html pertama kali diload/dibuka, maka iframe seharusnya berisi file welcome.html, jika kita lihat melalui browser (tekan F12) sbb:

pesan error di browser

muncul keterangan File not found, mengapa? karena kita belum membuat file dengan nama welcome.html. Lalu apa yang harus kita lakukan? yap, benar sekali kita harus membuat sebuah file baru lagi dengan nama welcome.html. Caranya, silahkan buat kembali dokumen HTML baru lalu simpan dengan nama welcome.html

membuat file baru dreamweaver

setelah kita buat file welcome.html, kita buka kembali file index.html melalui browser:

https://dl.dropboxusercontent.com/u/47457369/dreamweaver/cara-memasukkan-iframe-dreamweaver-ok.png

Sekarang kita buat file selanjutnya, profil.html dimana file ini merupakan file yang akan dituju ketika tombol Profil pada Menu Utama diklik

https://dl.dropboxusercontent.com/u/47457369/dreamweaver/membuat-halaman-profil.png

Sekarang kita kembali ke halaman index.html, kita akan menautkan (link) tombol Profil ke file profil.html sbb:

https://dl.dropboxusercontent.com/u/47457369/dreamweaver/mengubah-link-pada-dreamweaver.png

Pada kolom Link, isikan: profil.html (artinya ketika tombol Profil diklik, maka halaman profil.html akan dibuka)
Pada kolom Target, isikan: isiwebsite, mengapa? coba kita lihat kembali ke atas pada tag:
lihat pada tag artinya file profil.html akan ditampilkan pada iframe isiwebsite, sehingga jika kita buka file index.html pada browser dan kita klik pada tombol Profil, maka:

https://dl.dropboxusercontent.com/u/47457369/dreamweaver/selesai.png

nah sudah terlihat bukan halaman website kita? eit ada yang kelupaan, kita belum menautkan tombol Home…hmmm kira-kira ke mana ya menautkan tombol Home ini?? ya benar, tombol Home ini kita tautkan ke file index.html

Sekarang coba klik tombol Home atau Profil, maka halaman website kita akan berubah bukan?
Tugas anda sekarang adalah membuat halaman yang lain, yaitu halaman BeritaGaleri dan Kontak. Lakukan langkah sama seperti di atas. Untuk konten silahkan gunakan imajinasi anda. Selamat belajar.

Nah mudah bukan cara membuat website dengan Dreamweaver CS6. Sampai bertemu dipostingan selanjutnya.

Sumber : http://www.burung-net.com/2015/03/pengertian-dan-fungsi-adobe-dreamweaver.html

https://ferianto29.wordpress.com/tutorial/cara-membuat-website-dengan-dreamweaver-cs6/

Advertisements

One thought on “Mudahnya Membuat Website Menggunakan Adobe Dreamweaver CS6

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s