Pendahuluan : Apa itu Dreamweaver & Kelebihannya
Adobe Dreamweaver adalah suatu software IDE / editor web yang menggabungkan tampilan visual (design) dan editor kode secara simultan.
Fitur unggulan :
- Live preview (lihat hasil saat mengedit)
- Code hinting / autocomplete untuk HTML, CSS, JavaScript
- Integrasi dengan CSS Designer panel (melakukan styling visual)
- Dukungan pengaturan situs (site management), koneksi FTP / server agar bisa upload langsung ke hosting
- Templates / starter layout agar kamu tidak mulai dari nol sepenuhnya
Namun, ada catatan dari komunitas bahwa Dreamweaver saat ini tidak sering mendapat fitur-fitur baru besar — lebih ke pemeliharaan & pembaruan kecil saja.
Alur Umum Membuat Homepage di Dreamweaver
Berikut alur besar yang akan kita lalui :
1. Persiapan & instalasi Dreamweaver
2. Membuat “Site” (folder proyek) di Dreamweaver
3. Membuat file homepage (index.html)
4. Menyusun struktur dasar (HTML)
5. Membuat dan menghubungkan file CSS
6. Menambahkan konten: header, navigasi, hero section, profil, gambar, footer
7. Styling dengan CSS melalui Dreamweaver
8. Preview & testing responsif
9. Upload / publish ke hosting
10. Tips & best practices
Sekarang kita masuk ke langkah-langkah detail.
Langkah 1: Persiapan & Instalasi
1. Pastikan kamu punya Adobe Dreamweaver yang versi terbaru (versi CC yang didukung dalam Creative Cloud).
2. Pastikan juga kamu punya hosting + domain (jika ingin homepage-nya bisa diakses publik). Tapi selama belajar, kamu bisa bekerja di lokal dulu.
3. Siapkan folder kosong di komputer kamu yang akan jadi “root” situs kamu (misalnya MyPersonalSite).
Langkah 2: Membuat “Site” di Dreamweaver
Agar Dreamweaver tahu bahwa folder itu adalah proyek websitemu, kamu harus mendefinisikan “Site”.
- Buka Dreamweaver → menu Site → New Site… (atau bisa “Define Site”)
- Di dialog yang muncul, isi Site Name (nama proyek, bebas) dan Local Site Folder → arahkan ke folder proyek (MyPersonalSite).
- Di bagian Advanced Settings → pilih “Local Info” → bisa atur folder default untuk “Images” supaya semua gambar disimpan ke subfolder images dalam proyekmu.
- Jika kamu punya server (hosting), kamu bisa masuk ke tab “Servers” dan tambahkan koneksi FTP / SFTP agar nanti bisa upload langsung dari Dreamweaver. (Tapi bisa dilewati dulu saat belajar)
- Klik “Save” atau “Done”. Sekarang Dreamweaver mengenal folder proyekmu sebagai site.
Langkah 3: Membuat File Homepage (index.html)
Setelah “Site” dibuat, di panel Files (biasanya di kanan atau kiri, tergantung layout) akan muncul struktur folder proyekmu.
- Klik “New File” → beri nama index.html.
- Atau dari menu File → New → pilih jenis “HTML” → pilih blank atau starter template, lalu simpan sebagai index.html di root folder situsmu.
- Dreamweaver biasanya akan menghasilkan scaffold / struktur HTML awal seperti:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>My Personal Homepage</title>
</head>
<body>
</body>
</html>
Pastikan kamu ubah lang=”en” ke lang=”id” jika bahasanya Indonesia.
Langkah 4: Struktur Dasar HTML untuk Homepage
Kamu bisa membuat struktur seperti ini di dalam body :
<body>
<header>
<nav>
<ul>
<li><a href=”#home”>Home</a></li>
<li><a href=”#about”>Tentang</a></li>
<li><a href=”#portfolio”>Portfolio</a></li>
<li><a href=”#contact”>Kontak</a></li>
</ul>
</nav>
</header>
<section id=”home” class=”hero”>
<h1>Halo, Saya [Nama Kamu]</h1>
<p>Selamat datang di homepage pribadi saya.</p>
</section>
<section id=”about”>
<h2>Tentang Saya</h2>
<p>Deskripsikan sedikit tentang siapa kamu, background, hobi, dsb.</p>
</section>
<section id=”portfolio”>
<h2>Portfolio</h2>
<!– bisa isi gambar / link ke proyek-proyek kamu –>
</section>
<section id=”contact”>
<h2>Kontak</h2>
<p>Email: kamu@example.com</p>
<p>Media sosial / link lainnya</p>
</section>
<footer>
<p>© 2025 [Nama Kamu]. All rights reserved.</p>
</footer>
</body>
Penjelasan :
- header → bagian atas, biasanya menyimpan navigasi
- nav → menu navigasi
- section dengan id → tiap bagian halaman, agar bisa ditautkan dari menu
- footer → bagian bawah halaman, hak cipta / informasi tambahan
Kamu bisa menambahkan elemen lain (gambar, tombol, ikon) nanti.
Langkah 5: Membuat File CSS & Menghubungkan
Agar tampilan tidak polos, kamu butuh CSS.
- Buat file CSS baru, misalnya style.css di dalam folder proyek (MyPersonalSite/style.css).
- Kembali ke index.html, dalam <head>, sisipkan:
<link rel=”stylesheet” href=”style.css”>
- Sekarang kamu bisa mulai menulis CSS. Misalnya:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
margin-right: 15px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
.hero {
padding: 100px 20px;
background-color: #f2f2f2;
text-align: center;
}
section {
padding: 60px 20px;
}
footer {
text-align: center;
padding: 20px;
background-color: #222;
color: #ccc;
}
Kamu bisa menulis CSS langsung di Dreamweaver; software ini biasanya menyediakan panel CSS Designer agar bisa styling visual dan langsung melihat perubahan.
Langkah 6: Menambahkan Elemen Tambahan
Beberapa hal yang bisa kamu tambahkan agar homepage-mu lebih menarik :
- Gambar profil (gunakan tag <img src=”images/nama_gambar.jpg” alt=”Deskripsi”>)
- Tombol “Hubungi Saya”
- Ikon sosial media (gunakan <a> + <img> atau font icon seperti Font Awesome)
- Animasi ringan (CSS transitions)
- Grid layout untuk menampilkan proyek (menggunakan CSS Flexbox / Grid)
- Responsif: gunakan media queries agar di layar kecil tampilannya tetap bagus
Contoh sederhana CSS responsif:
@media (max-width: 768px) {
nav ul li {
display: block;
margin-right: 0;
margin-bottom: 10px;
}
.hero {
padding: 60px 10px;
}
}
Langkah 7: Preview & Test Responsif
Di Dreamweaver, gunakan tampilan Live View atau Split View (kode + tampilan) untuk melihat hasilnya langsung saat kamu mengedit.
- Coba resize jendela preview agar mensimulasikan layar perangkat mobile, lihat apakah layoutnya patah atau tetap rapi.
- Pastikan semua link navigasi menuju bagian yang benar (misalnya href=”#about” mengarah ke elemen dengan id=”about”).
- Pastikan gambar memiliki alt yang baik agar aksesibilitas & SEO lebih baik.
Langkah 8: Publikasi / Upload Ke Hosting
Jika kamu ingin homepage-mu bisa diakses publik, selanjutnya :
1. Pastikan kamu punya hosting + domain + akses FTP / SFTP.
2. Di Dreamweaver, buka Site → Servers, lalu tambahkan server baru dengan:
- Nama server
- Protokol (FTP / SFTP)
- Hostname / alamat server
- Username & password
- Remote folder (folder di server tempat website akan diletakkan)
3. Setelah koneksi server berhasil, di panel Files → pilih file (index.html, style.css, gambar dsb) → klik kanan → Put / Upload to server.
4. Cek di browser internet dengan domainmu apakah homepage muncul dengan baik.
Tips & Best Practices
- Gunakan struktur semantik agar SEO & aksesibilitas bagus (header, nav, section, footer)
- Hindari CSS inline (usahakan semua styling di style.css)
- Optimalkan ukuran gambar (compress) agar loading cepat
- Gunakan meta name=”viewport” agar mobile browser bisa mengatur skala halaman
- Gunakan validasi HTML & CSS (misalnya lewat W3C Validator)
- Simpan backup projekmu secara berkala
- Belajar modul HTML & CSS agar perubahan manual lebih fleksibel
- Gunakan versi kontrol (Git) jika kamu mau melacak perubahan
Bonus : Video Tutorial Referensi
Biar lebih jelas, kamu bisa juga menyimak video berikut :
Video ini memperlihatkan cara membuat website modern & interaktif menggunakan Dreamweaver, termasuk pembuatan template, penggunaan CSS Designer, dsb.