Bahan Ajar: Desain Web Menggunakan Adobe Dreamweaver 2021
- Selasa, 26 Agustus 2025
- Kanghaki
- 0 komentar

A. Kompetensi Dasar
-
Memahami fungsi dan peran Adobe Dreamweaver dalam desain web.
-
Menggunakan fitur dasar Dreamweaver untuk membuat halaman web.
-
Mendesain dan mengelola struktur website sederhana.
-
Mengintegrasikan teks, gambar, link, tabel, dan multimedia pada web.
-
Mempublikasikan website ke server lokal maupun hosting.
B. Pendahuluan
Adobe Dreamweaver 2021 adalah software desain web berbasis WYSIWYG (What You See Is What You Get) dan juga mendukung penulisan kode HTML, CSS, JavaScript, PHP, serta integrasi dengan framework modern.
Dreamweaver banyak digunakan karena:
-
Mendukung desain visual dan kode sekaligus.
-
Mempermudah pembuatan website responsif.
-
Terhubung dengan Creative Cloud (Photoshop, Illustrator).
-
Fitur Live Preview untuk melihat tampilan real-time.
C. Antarmuka Dreamweaver 2021
-
Menu Bar → akses fungsi utama (File, Edit, View, dll).
-
Toolbar → perintah cepat (New File, Save, Preview in Browser).
-
Document Window → area kerja utama (Code, Split, Design).
-
Properties Panel → pengaturan teks, link, tabel, CSS.
-
Files Panel → menampilkan struktur file website.
-
Insert Panel → menambahkan objek (gambar, tabel, form).
D. Fitur Utama
-
Code View & Design View → bekerja dengan kode atau visual.
-
Split View → menampilkan kode dan tampilan web bersamaan.
-
Live Preview → melihat hasil real-time.
-
Bootstrap Integration → membuat web responsif.
-
CSS Designer → mengatur style dengan lebih mudah.
-
File Management → mengelola file web dalam satu project.
-
Publish → upload langsung ke server via FTP/SFTP.
E. Langkah Membuat Web Sederhana
1. Membuat Project Baru
-
Buka Dreamweaver → Site > New Site.
-
Beri nama situs, tentukan folder root.
2. Membuat Halaman Utama
-
File > New > HTML.
-
Simpan dengan nama
index.html
.
3. Menambahkan Teks
-
Ketik teks pada Design View.
-
Atur format di Properties Panel.
4. Menambahkan Gambar
-
Klik Insert > Image, pilih gambar dari folder.
-
Simpan file gambar dalam folder
images
.
5. Membuat Hyperlink
-
Blok teks → pada Properties Panel, isi Link ke halaman lain atau URL.
6. Membuat Tabel
-
Insert > Table → tentukan jumlah baris & kolom.
7. Mengatur CSS
-
Buka CSS Designer → tambahkan style (warna, font, margin, padding).
8. Preview
-
Tekan F12 untuk melihat hasil di browser.
9. Publish ke Server
-
Site > Manage Sites > Server.
-
Isi data hosting (FTP, username, password).
-
Klik Put Files untuk upload.
F. Praktik
-
Buat website sederhana dengan minimal:
-
Halaman utama (
index.html
) -
Halaman profil (
profil.html
) -
Halaman galeri (
galeri.html
) -
Halaman kontak (
kontak.html
)
-
-
Website harus memiliki:
-
Teks dengan format heading, paragraf, dan list.
-
Gambar dengan ukuran proporsional.
-
Navigasi hyperlink antar halaman.
-
CSS untuk memperindah tampilan.
-
G. Latihan / Tugas
-
Apa perbedaan Design View, Code View, dan Split View?
-
Sebutkan langkah-langkah membuat site baru di Dreamweaver.
-
Bagaimana cara menambahkan CSS eksternal pada halaman web?
-
Buatlah halaman web sederhana dengan 3 menu navigasi dan tampilkan preview-nya.
-
Jelaskan fungsi CSS Designer dalam Dreamweaver 2021.
H. Penilaian
-
Pengetahuan (30%): Tes tertulis tentang fitur & fungsi Dreamweaver.
-
Keterampilan (50%): Praktik membuat website dengan 4 halaman.
-
Sikap (20%): Kedisiplinan, kerjasama, dan kerapian dalam bekerja.
Lampiran:
-
Contoh struktur folder web:
/mywebsite
|-- index.html
|-- profil.html
|-- galeri.html
|-- kontak.html
|-- /css
| |-- style.css
|-- /images
| |-- foto1.jpg
| |-- logo.png