Dreamweaver, atau lebih lengkapnya Adobe Dreamweaver, adalah aplikasi populer untuk membuat website yang menarik dan fungsional. Dengan menggabungkan tampilan visual dan kode, Dreamweaver memungkinkan Anda membangun website dengan mudah.
Dreamweaver memiliki beberapa keunggulan dibandingkan dengan aplikasi pembuat website lainnya. Mulai dari antarmuka yang unik dan intuitif, dukungan beberapa bahasa pemrograman, ketersediaan template siap pakai, hingga fitur desain yang melimpah.
Artikel ini akan menjelaskan cara membuat website menggunakan Dreamweaver dalam beberapa langkah mudah. Setelah membaca artikel ini, Anda pun dapat memanfaatkan Dreamweaver untuk membangun situs web yang menarik.
Jika Anda sudah tidak sabar, yuk simak panduan lengkapnya!
Cara Membuat Website Menggunakan Dreamweaver
Ini dia langkah-langkah membuat website dengan Dreamweaver:
- Download dan install Adobe Dreamweaver.
- Buat proyek website baru.
- Mulai coding dasar untuk website.
- Tambahkan konten ke dalam website.
- Pahami elemen dasar HTML dengan Dreamweaver.
- Percantik tampilan dengan CSS.
- Simpan dan pratinjau proyek website.
Mari mulai cara membuat web responsive dengan Dreamweaver dari langkah yang pertama!
1. Download dan Install Adobe Dreamweaver
Sebelum belajar cara menggunakan Dreamweaver, Anda tentunya harus mendownload dan menginstall software yang satu ini.
Namun, perlu diketahui bahwa Dreamweaver adalah aplikasi berbayar dengan opsi percobaan gratis selama 7 hari. Untuk memanfaatkannya secara gratis, Anda perlu menggunakan kartu kredit lalu membatalkan langganan sebelum masa percobaan berakhir.
Informasi tambahan lain, panduan ini menggunakan Adobe Dreamweaver CC 2021. Namun, bagi Anda yang mencari tutorial Dreamweaver CS6 bahasa Indonesia atau ingin belajar cara membuat website dengan Dreamweaver CS5, panduan ini masih dapat dipraktikkan karena interface yang tak jauh beda.
Berikut cara download dan install Dreamweaver selengkapnya:
- Buka website resmi Adobe Dreamweaver, lalu klik tombol Free Trial.
- Pada bagian Choose a plan, pilih Individual > Dreamweaver. Kemudian, klik Continue.
- Silakan tulis alamat email Anda, lalu klik Continue. Jika sudah, Anda dapat menginputkan detail kartu kredit yang dimiliki.
- Proses download Dreamweaver akan segera berlangsung. Setelah file installer berhasil diunduh, pasang Dreamweaver seperti software pada umumnya.
- Selesai menginstal, Anda dapat membuka Dreamweaver untuk melihat tampilan berikut:
2. Buat Proyek Website Baru
Tahap kedua dalam cara membuat website menggunakan Dreamweaver adalah membuat proyek situs web baru. Untuk melakukannya, ikuti langkah-langkah berikut:
- Dari tampilan awal Dreamweaver, klik menu Quick Start pada sidebar sebelah kiri.
- Anda akan menjumpai tipe dokumen dari beberapa framework dan bahasa pemrograman, seperti Bootstrap, CSS, HTML, dan PHP.
- Namun sebaiknya, atur konfigurasi proyek situs web terlebih dahulu melalui opsi Site Setup. Beri nama proyek website Anda dan atur lokasi penyimpanan proyek, lalu klik Save.
- Mari lihat opsi Quick Template lebih dekat. Di sini, tersedia berbagai template bawaan siap pakai sehingga Anda tidak perlu membangun website dari nol.
- Sebaliknya, jika ingin membuat website dari awal, silakan pilih opsi halaman, misalnya HTML Document.
3. Mulai Coding Dasar untuk Website
Setelah melakukan konfigurasi dasar untuk website, cara membuat web HTML dengan Dreamweaver berlanjut dengan menulis kode (coding) untuk website. Berikut langkah-langkahnya:
- Secara default, Dreamweaver akan menampilkan editor split-view, di mana bagian atas merupakan editor visual (live view) dan sebelah bawah menjadi editor kode (code view).
- Untuk mulai merancang tampilan, Anda dapat menulis kode secara manual maupun mengakses menu Insert di sebelah kanan. Di sini, tersedia berbagai macam elemen HTML yang dapat Anda pilih.
- Sebagai contoh, mari menambahkan heading halaman. Silakan klik opsi Heading lalu pilih jenis heading yang Anda inginkan, misalnya header H1.
- Jika sudah, Dreamweaver akan menampilkan heading seperti gambar di bawah. Silakan edit teks melalui editor kode maupun visual, sesuai preferensi Anda.
- Anda juga dapat mengatur properti untuk heading, misalnya mengatur letaknya ke tengah. Setiap perubahan yang Anda lakukan akan tampil secara live pada editor visual.
- Anda juga boleh mencoba menambahkan elemen HTML lain. Misalnya, di sini kami menambahkan elemen paragraf untuk menulis teks.
- Anda juga dapat menambahkan daftar text melalui opsi Unordered List (untuk bullet) dan Ordered List (untuk numbering).
4. Tambahkan Konten ke Dalam Website
Tak hanya teks, Anda juga pastinya dapat menambahkan berbagai elemen multimedia ke halaman situs web melalui Adobe Dreamweaver. Ini dia cara memasukkan konten dengan aplikasi HTML editor yang satu ini:
- Akses kembali menu Insert, lalu pilih opsi Image. Setelah itu, silakan cari gambar yang ingin dimasukkan ke halaman.
- Anda juga dapat mengatur properti gambar, misalnya untuk menyesuaikan ukurannya.
- Jika Anda ingin menambahkan gambar beserta caption atau judul, silakan pilih opsi Figure dari menu Insert.
- Di dalam tag figure, Anda dapat mengimpor gambar yang diinginkan. Setelah itu, lanjutkan dengan menulis caption di dalam tag figcaption.
- Selain gambar, Anda juga dapat menginputkan tabel ke halaman website dengan opsi Table.
- Silakan atur properti tabel sesuai kebutuhan Anda, lalu klik OK.
- Hasilnya kurang lebih seperti ini. Selanjutnya, Anda dapat mengisi tabel tersebut melalui editor visual maupun kode.
- Hal lain yang dapat Anda lakukan dengan Adobe Dreamweaver adalah menambahkan tautan menuju halaman lain. Dalam hal ini, silakan klik opsi Hyperlink.
- Silakan isi teks yang akan mengarahkan Anda menuju halaman tersebut, lalu import halaman HTML lain yang Anda miliki.
- Jika baru membuat satu halaman, siapkan halaman lain dengan klik menu File > New pada toolbar bagian atas. Baru setelah itu, Anda dapat menghubungkan keduanya.
5. Pahami Elemen Dasar HTML dengan Dreamweaver
Untuk memudahkan Anda mengikuti cara membuat web HTML dengan Adobe Dreamweaver, cobalah mempelajari elemen dasar HTML melalui software editor yang satu ini.
Namun sebelumnya, Anda dapat merapikan hasil coding dengan cara berikut:
- Sorot kode HTML yang ingin dikelompokkan menjadi satu, lalu klik opsi Div pada menu Insert.
- Setelah itu, isi kolom Class dengan nama tag div yang Anda inginkan dan klik OK.
- Berikut hasil pengelompokkan tag div jika dilihat melalui editor kode:
Jika masih bingung dengan fungsi tiap tag atau elemen, Dreamweaver menyediakan fitur bantuan yang dapat Anda akses. Ini dia caranya:
- Klik kanan pada elemen yang ingin Anda pelajari, lalu pilih Quick Docs.
- Dreamweaver akan menampilkan penjelasan dari elemen tersebut, seperti contoh di bawah:
- Anda juga dapat menyembunyikan atau menampilkan baris kode yang telah dikelompokkan sebelumnya via ikon segitiga terbalik.
6. Percantik Tampilan Website dengan CSS
Dreamweaver memungkinkan Anda menambahkan script untuk mempercantik desain web dengan CSS, karena pada dasarnya CSS adalah bahasa yang digunakan untuk tampilan dan format halaman website.
Lantas, bagaimana cara menambahkan CSS dengan Dreamweaver? Berikut langkah-langkahnya:
- Manfaatkan halaman HTML dari poin sebelumnya, atau Anda juga bisa membuat halaman baru seperti yang kami lakukan.
- Tambahkan tag div baru untuk merapikan CSS. Kemudian, klik elemen apa pun pada lembar kerja visual Anda, lalu klik tanda + di sebelah div.
- Tuliskan class untuk div diawali dengan tanda pagar (#), lalu klik tanda + dan pilih Create a new CSS file.
- Ketikkan nama file CSS dan klik OK.
- Jika sudah, Anda dapat mengakses menu CSS Designer di sebelah kanan menu Insert.
- Di sini, Anda dapat mengatur properti CSS, seperti warna, jenis font, ukuran font, dan sebagainya. Jika Anda menerapkan CSS file untuk elemen lain, misalnya gambar, opsi properti yang tersedia mungkin berbeda.
- Hasilnya kurang lebih seperti ini jika dilihat melalui editor visual:
- Sama seperti kode HTML, Anda juga bisa mengatur CSS secara manual melalui editor kode.
7. Simpan dan Pratinjau Proyek Website
Cara membuat website menggunakan Adobe Dreamweaver sudah berada di langkah terakhir. Di sini, Anda dapat menyimpan proyek situs web lalu melakukan pratinjau atau preview dengan cara:
- Pastikan Anda secara berkala menyimpan file yang sedang dikerjakan dengan klik File > Save atau melalui kombinasi tombol Ctrl + S.
- Untuk melihat preview, silakan akses menu File > Real-time Preview, lalu pilih browser yang diinginkan.
- Begini kira-kira hasil dari contoh web sederhana dengan Dreamweaver:
- Jika Anda mengklik hyperlink menuju halaman lain, tampilan yang muncul di browser seperti ini:
Tentu saja, masih banyak hal lain yang dapat Anda lakukan dengan Dreamweaver. Mulai dari memanfaatkan template bawaan, membuat file dokumen dari bahasa pemrograman lain, sampai mengotak-atik tampilan website.
Selamat bermain-main dengan software PHP editor terbaik yang satu ini!
Apa yang Dilakukan setelah Membuat Website dengan Dreamweaver?
Melalui artikel ini, Anda telah mempelajari cara membuat website menggunakan Dreamweaver. Software yang satu ini wajib dicoba apabila Anda tertarik menjadi web designer maupun developer, karena Anda dapat membangun situs web dan melihat tampilannya secara langsung.
Setelah berhasil membuat website, langkah selanjutnya yaitu mengonlinekannya ke layanan hosting murah agar situs web Anda dapat diakses banyak orang. Untuk tutorial lengkapnya, silakan baca panduan kami tentang cara upload website ke hosting yang dapat Anda ikuti dengan mudah.
Namun, telitilah dalam memilih layanan hosting terbaik. Salah pilih hosting, website Anda bisa jadi lemot, sering down, atau bahkan disusupi malware berbahaya!
Untuk itu, pilihlah hosting yang berkualitas seperti Niagahoster. Layanan Unlimited Hosting Niagahoster dibekali teknologi terbaik seperti LiteSpeed Enterprise, Data Center Tier 4, dan Imunify360, yang menjaga performa website Anda tetap cepat, stabil, dan bebas malware.
Menariknya lagi, layanan ini dibanderol dengan harga terjangkau, mulai Rp9.900/bulan saja. Jadi tunggu apalagi? Yuk bangun website Anda dengan Dreamweaver dan onlinekan dengan Niagahoster!
Pertanyaan (FAQ) seputar Cara Membuat Website Menggunakan Dreamweaver
Berikut adalah beberapa pertanyaan yang sering diajukan seputar cara membuat website dengan Dreamweaver:
Sebenarnya, Dreamweaver termasuk dalam golongan software berbayar. Namun, Anda dapat menggunakan Dreamweaver secara gratis selama 7 hari pertama.
Adobe Dreamweaver adalah software yang digunakan untuk membangun halaman website dengan cara menulis kode maupun mendesain tampilannya secara langsung.
Tidak, Dreamweaver bukan termasuk dalam kategori CMS (Content Management System). Dreamweaver lebih cocok dikelompokkan sebagai software WYSIWYG (What You See Is What You Get), di mana WYSIWYG adalah jenis software editor untuk mengedit halaman website sekaligus melihat hasilnya secara langsung.
Untuk menyimpan file website di Dreamweaver, Anda dapat menggunakan dua opsi. Pertama, melalui menu File > Save. Kedua, dengan menggunakan kombinasi tombol Ctrl + S pada keyboard.
