Tutorial Dreamweaver

by Triana Zahara

Membangun website adalah hal yang gampang-gampang susah. Pasalnya, dalam membangun website perlu memahami bahasa pemrograman yang penuh dengan kode. Termasuk dalam penggunaan Dreamweaver. Oleh karena itu, banyak dari web development pemula yang penasaran tentang turorial Dreamweaver.

Dreamweaver sendiri adalah sebuah software keluaran Adobe dalam dunia website builder. Bahkan, aplikasi ini termasuk yang populer di bidangnya. Fungsi lain dari Dreamweaver adalah mampu mengatur load sekaligus tampilan website hanya dalam metode drag dan drop yang simple. Penasaran lebih jauh mengenai Dreamweaver? Inilah beberapa tutorial Dreamweaver yang bisa diikuti.

Baca juga : Domain murah mulai Rp 17.000 setahun

 

Fitur Dreamweaver

Sebelum masuk ke dalam tutorial dreamweaver, ada baiknya Anda mengenali terlebih dahulu fitur-fitur yang ada di dalam aplikasi ini. Ada banyak fitur yang yang ada di Dreamweaver. Seperti yang ada di bawah ini:

 

CSS Designer

Dremweaver memiliki CSS Designer yang bisa digunakan untuk melakukan visual editing. Fitur ini dilengkapi dengan standar kode web, sehingga Anda dapat menerapkan semua properti CSS di tampilan website yang Anda kelola.

Starter Template

Fitur lain yang ada di aplikasi website builder ini adalah starter template. Yakni template web yang mudah disusun ulang dan sangat responsif terhadap kemauan pengguna.

Extract

Fitur yang paling memudahkan adalah extract. Jadi, misalnya Anda telah membat desain web di dalam photoshop, dengan menggunakan fitur ini desain yang Anda buat akan otomatis menjadi kode web yang bisa diterapkan dalam web yang Anda susun.

Live View

Live view juga cukup memudahkan dengan adanya fitur tambahan lain. Bianya berupa HTML Tag Editor, keyboard shortcut, dan insert panel. Hal ini memungkinkan proses editing jauh lebih cepat dari sebelumnya.

Full Support HTML

Satu lagi yang penting adalah software Dreamweaver ini sangat supporting terhadap HTML. Sehingga memudahkan dalam membangun laman website Anda sendiri.

Tutorial Dreamweaver

Setelah mengenali berbagai macam fitur Dreamwaver, sekarang saatnya Anda mempelajari tutorial dreamweaver untuk pemula. Hal yang akan tertulis di sini adalah dasar-dasar dari penggunaan Dreamweaver. Sehingga jika Anda ingin mendalami software ini dengan lebih baik, maka pastikan untuk menonton video tutorial atau bahkan membeli buku khusus untuk itu.

 

1.Membuat Situs Baru

Turorial pertama adalah cara membuat situs baru. Hal pertama yang dilakukan adalah dengan membuka Site kemudian pilih New Site dalam dashboard Dreamweaver. Setelah membuka lembar kerja baru, Anda perlu menyimpan file dalam satu folder dan memberi nama website tersebut. Ini akan mempermudah proses pembuatan karena tidak perlu mencari file kemana-mana.

Jika Anda ingin memasukkan gambar ke dalam situs yang dikelola, maka cukup mengklik Advance Settings kemudian pilih Local Info. Tekan tombol Save setelah selesai melakukan semua langkah.

 

2. Membuat File Homepage

Cara membuat file homepage cukup mudah. Caranya adalah dengan memilih menu File lalu memilih New>New Document. Nah, dalam proses memilih dokumen baru ini, Anda hanya perlu untuk memilih tipe dokumen HTML lalu klik Create. Jangan lupa menyimpang file ini dengan nama index.HTML di folder situs yang tadi.

 

3. Membuat Header

Header adalah tempat dimana logi dan nama situs yang Anda buat terpampang nyata. Cara membuatnya cukup mudah. Anda klik pada halaman putih lalu klik elemen <body> di sana. Setelah itu, jangan lupa untuk mengklik Insert pada panel bagian atas. Untuk melengkapi proses, carilah elemen Header.

Lakukan drag and drop elemen yang Anda pilih pada lembar kerja. Nantinya elemen itu akan berubah menjadi kode HTML dengan sendirinya. Ubah tag menjadi <H1> kode yang telah jadi </H1>.

Pilih menu insert lagi setelah menandai teksnya. Cari Heading: H1. Ubah teks yang ada di sana menjadi nama website. Misalnya Selamat Datang di Web Development Profesional

 

4. Jangan Lupa Menambahkan Navigasi

Jangan lupa untuk menambahkan navigasi pada website yang Anda buat. Caranya adalah dengan menekan insert dan cari elemen Navigation. Setelah jendelanya muncul, beri nama file sebagai navigation dan klik OK untuk ke langkah selanjutnya. Elemen navigasi akan secara otomatis berada di editor.

 

5. Membuat File CSS

Jangan lupa untuk menambahkan file CSS pada website yang Anda bangun. Ini berguna untuk membangun tampilan website agar lebih enak dipandang mata. Cara membuatnya cukup mudah. Untuk melihat struktur web secara keseluruhan, pilih DOM.

Klik Header>klik tanda plus. Setelah itu beri tag  #Header pada file untuk memberi semacam ID pada elemen. Tekan enter, setelah itu pilih source Create a New CSS File.

Nantinya akan muncul jendela baru. Nah, Anda hanya perlu mencari folder di situs Anda dengan mengetik style.css lalu klik save. Maka File CSS akan selesai.

Itulah beberapa tutorial Dreamweaver yang perlu Anda ketahui. Ini adalah tutorial standar dan akan sangat mungkin kurang lengkap. Tetap pelajari mengenai software ini dari buku agar kemampuan Anda meningkat. Semoga bermanfaat.

Related Posts