1 | Simple Tutorial – Adobe Dreamweaver CS 5 SIMPLE TUTORIAL - ADOBE DREAMWEAVER CS 5 Oleh: H. Heri Istiyanto, S.Si., M.Kom. Dreamweaver merupakan aplikasi yang digunakan untuk membuat website secara profesional. Pada tutorial ini akan dijelaskan langkah-langkah singkat membuat website sederhana. Sebelum menggunakan tutorial ini sebaiknya Anda sudah mempelajari dasar-dasar HTML. Setelah mempelajari tutorial ini diharapkan Anda dapat membuat dan mengatur: Layout halaman web dengan Table Format Teks dan Background Entitas karakter HTML (copyright) Gambar pada halaman web Rollover Image Teks bergerak (marquee) Halaman web dengan CSS Hyperlink Halaman web di browser Website sederhana dengan Adobe Dreamweaver Berikut tutorial pembuatan halaman web dengan Adobe Dreamweaver. 1. Buka Adobe Dreamweaver CS 5 2. Pilih HTML 3. Masukkan tabel dengan jumlah baris (rows) = 3 dan jumlah kolom (columns) = 2. Pilih menu Insert Table (Ctrl+Alt+T).
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
1 | Simple Tutorial – Adobe Dreamweaver CS 5
SIMPLE TUTORIAL - ADOBE DREAMWEAVER CS 5
Oleh: H. Heri Istiyanto, S.Si., M.Kom.
Dreamweaver merupakan aplikasi yang digunakan untuk membuat website secara profesional. Pada
tutorial ini akan dijelaskan langkah-langkah singkat membuat website sederhana. Sebelum
menggunakan tutorial ini sebaiknya Anda sudah mempelajari dasar-dasar HTML.
Setelah mempelajari tutorial ini diharapkan Anda dapat membuat dan mengatur:
Layout halaman web dengan Table
Format Teks dan Background
Entitas karakter HTML (copyright)
Gambar pada halaman web
Rollover Image
Teks bergerak (marquee)
Halaman web dengan CSS
Hyperlink
Halaman web di browser
Website sederhana dengan Adobe Dreamweaver
Berikut tutorial pembuatan halaman web dengan Adobe Dreamweaver.
1. Buka Adobe Dreamweaver CS 5
2. Pilih HTML
3. Masukkan tabel dengan jumlah baris (rows) = 3 dan jumlah kolom (columns) = 2. Pilih menu
Insert Table (Ctrl+Alt+T).
2 | Simple Tutorial – Adobe Dreamweaver CS 5
Biarkan terlebih dahulu untuk pengaturan yang lain. Jika sudah Klik Ok, dan akan tampil
seperti berikut.
4. Atur ukuran kolom pertama (sebelah kiri) dengan ukuran 200 px dan kolom kedua (sebelah
kanan) 500 px. Blok kolom pertama dan atur Width (W) = 200, dan kolom kedua height (H) =
500 px. Untuk tinggi (H) aturlah secara proporsional.
Kolom pertama
Kolom kedua
5. Atur tabel dengan rata tengah (center). Klik <table> dan Align Default menjadi Center
3 | Simple Tutorial – Adobe Dreamweaver CS 5
6. Agar menjadi lebih rapi, buat border table menjadi tanpa border (0) dan atur cell pad dan
cell space menjadi 0, klik pada <table> dan atur seperti berikut.
7. Untuk menggabungkan kolom, blok baris paling atas, kemudian klik kanan Table Merge
Cells
8. Merge juga untuk baris yang paling bawah, sehingga diperoleh tampilan seperti berikut.
9. Isi setiap sel dengan teks seperti berikut.
4 | Simple Tutorial – Adobe Dreamweaver CS 5
Untuk membuat rata tengah pilih Horz Center
Untuk membuat rata atas pada paragraf, klik Vert Top
Atribut autostart: bagaimana musik akan diputar. Jika true, maka musik akan diputar
secara otomatis, jika false, maka untuk memutar musik Anda harus menekan tombol
Play terlebih dahulu.
Atribut loop: berapa kali musik akan dimainkan. Jika diatur true, maka musik akan
dimainkan berulang-ulang. Jika diatur false, maka musik hanya dimainkan sekali dan
berhenti.
Atribut hidden bernilai true, berarti media player akan tampil di halaman web,
sebaliknya jika bernilai false, maka media player akan disembunyikan.
Demikian tutorial sederhana mengenai pembuatan halaman web dengan Adobe
Dreamweaver CS 5. Langkah berikutnya Anda dapat mengembangkan tutorial ini dengan
praktik langsung.
Semoga bermanfaat!
LATIHAN
1. Buat folder di desktop: TIK_ABSEN
2. Buat layout Web seperti berikut.
JUDUL WEB
HOME PROFIL GALLERY
15 | Simple Tutorial – Adobe Dreamweaver CS 5
Konten/Isi TOPIK WEB: BEBAS WARNA/GAMBAR: BEBAS Hyperlink: target=”_parent” Nama file: Homehome.html, Profil profil.html, Gallery gallery.html BOLEH MENGGUNAKAN CSS