Modul 1-2 DreamWeaver CS5

10
Modul Praktikum Program Aplikasi Desain Web (Adobe Dreamweaver CS5) Modul 1 – The Basics MENGAKTIFKAN ADOBE DREAMWEAVER Siapkan folder web untuk menyimpan file-file halaman webnya. Aktifkan Adobe DreamWeaver, yang dapat dilakukan dengan cara klik dua kali icon Dreamweaver. MENGATUR FOLDER DEFAULT WEB Atur folder default websitenya dengan cara: klik menu Site – New Site – tab Advanced Isikan nama website yang akan kita buat pada bagian Site Name. Kemudian atur folder root (utama)nya dengan cara klik icon folder pada bagian Local Site Folder. Klik folder dasar – klik tombol Open – klik tombol Select. Hasil yang kita dapatkan seperti pada gambar berikut: Selanjutnya klik tombol Save. Perhatikan! Jendela Local Files di sebelah kanan sudah menampilkan folder aktif kita. MEMBUAT HALAMAN WEB BARU Klik menu File – New yang akan menampilkan jendela New Document seperti berikut: Pilih tab Blank Page – page type: HTML layout: none – klik Create. Tampil jendela editing halaman web dengan mode Split (menampilkan Code View dan Design View). 1 | dari 8 halaman

Transcript of Modul 1-2 DreamWeaver CS5

Page 1: Modul 1-2 DreamWeaver CS5

Modul Praktikum Program Aplikasi Desain Web (Adobe Dreamweaver CS5)

Modul 1 – The Basics

MENGAKTIFKAN ADOBE DREAMWEAVER

Siapkan folder web untuk menyimpan file-file halaman webnya.Aktifkan Adobe DreamWeaver, yang dapat dilakukan dengan cara klik dua kali icon Dreamweaver.

MENGATUR FOLDER DEFAULT WEB

Atur folder default websitenya dengan cara: klik menu Site – New Site – tab AdvancedIsikan nama website yang akan kita buat pada bagian Site Name. Kemudian atur folder root (utama)nya dengan cara klik icon folder pada bagian Local Site Folder.Klik folder dasar – klik tombol Open – klik tombol Select. Hasil yang kita dapatkan seperti pada gambar berikut:

Selanjutnya klik tombol Save.

Perhatikan! Jendela Local Files di sebelah kanan sudah menampilkan folder aktif kita.

MEMBUAT HALAMAN WEB BARU

Klik menu File – New yang akan menampilkan jendela New Document seperti berikut:Pilih tab Blank Page – page type: HTML – layout: none – klik Create.

Tampil jendela editing halaman web dengan mode Split (menampilkan Code View dan Design View).

1 | d a r i 8 h a l a m a n

Page 2: Modul 1-2 DreamWeaver CS5

Modul Praktikum Program Aplikasi Desain Web (Adobe Dreamweaver CS5)

MEMBERI TITLE HALAMAN WEB DAN TEKS

Ketik dibagian Title lalu ketikkan judul untuk halaman web kita (Website Pribadi Mr.One), lalu tekan enter. Maka di bagian Code View muncul Website Pribadi Mr.One yang diapit tag <title> … </title>.Klik teks di bagian Design View lalu ketikkan judul halaman web yang ingin kita tampilkan (Mr. One Official Website), maka di jendela Code View juga akan tampil teks tersebut.

MEMASUKKAN GAMBAR (IMAGE)

Memasukkan gambar ke dalam halaman web dapat dilakukan dengan cara:

Klik menu Insert – Image (Ctrl + Alt + I).

Pilih image/gambar yang akan kita gunakan. Kemudian klik OK.

Selanjutnya kita diminta untuk mengisikan Alternate text dari gambar. Alternate text berfungsi sebagai keterangan singkat foto yang akan tampil saat pointer mouse kita arahkan di gambar.

Lalu klik OK.

Selanjutnya kita dapat mengatur ukuran gambar pada bagian Properties.

MENYIMPAN HALAMAN WEB

Klik menu File – SaveBeri nama : index (format file .htm atau .html).

2 | d a r i 8 h a l a m a n

Mengatur lebar (W) dan tinggi (H) gambar

Mengatur jarak gambar dengan teks. Isikan 10.

Page 3: Modul 1-2 DreamWeaver CS5

Modul Praktikum Program Aplikasi Desain Web (Adobe Dreamweaver CS5)

MENAMPILKAN HALAMAN WEB DI BROWSER

Klik menu File – Preview in Browser – pilih browsernya (atau klik F12).

MENUTUP FILE HALAMAN WEB

Klik menu File – Close All.

TUGAS

1. Buat halaman web dengan ketentuan:Halaman utama (simpan dengan nama index.html), berisi tentang rangkuman singkat website kitaHalaman tentang saya (simpan dengan nama dataku.html), berisi tentang biodata pribadi kamu; Nama, TTL, Alamat, Hobi, Kelas, dan keterangan lainnya.Halaman kota tempat tinggal (simpan dengan nama kotaku.html), berisi tentang uraian singkat mengenai kota tempat tinggalmu dan ciri khasnya.

2. Sertakan gambar/foto yang mendukung untuk tiap halaman web tersebut.

3 | d a r i 8 h a l a m a n

Page 4: Modul 1-2 DreamWeaver CS5

Modul Praktikum Program Aplikasi Desain Web (Adobe Dreamweaver CS5)

Modul 2 – Links and Navigations

Sebelum melanjutkan ke materi Links and Navigations, pastikan kita telah memiliki 3 halaman web yang akan digunakan dalam paraktik kali ini. Ketiga file tersebut adalah:

MEMBUAT TEXT LINKS

1. Aktifkan index.html, lalu turunkan judul web satu baris menggunakan tombol Enter.

2. Pada jendela Properties, atur bagian Format menjadi Paragraph (untuk baris di atas judul web).

3. Selanjutnya ketikkan teks “About Me – My Town” (tanpa tanda petik!), seperti gambar di samping.

4. Blok teks About Me lalu klik menu Insert – Hyperlink. Pada jendela Hyperlink yang tampil, klik gambar folder pada bagian Link yang akan menampilkan jendela Select File.

5. Klik file dataku.html lalu klik OK.

6. Pada bagian Target di jendela Hyperlink, pilih _self (pilihan _self akan membuka halaman web pada tab browser yang sama, sedangkan _new akan membuka halaman web pada tab baru di jendela browser)

7. Pada bagian Title isikan keterangan singkat lalu klik OK. Jangan lupa simpan perubahan pada file index.html

Coba buka file index.html menggunakan browser.

Kemudian ulangi langkah 3 – 8 untuk teks My Town. Jangan lupa, pada langkah ke-5 yang dituju adalah kotaku.html!

Lakukan proses pemberian Text Links seperti langkah-langkah diatas untuk file dataku.html dan kotaku.html di bagian atas judul masing-masing halaman. Teks yang digunakan adalah “Home” yang digunakan untuk link menuju halaman awal index.html). Hasilnya seperti gambar berikut:

4 | d a r i 8 h a l a m a n

index.html dataku.html kotaku.html

Page 5: Modul 1-2 DreamWeaver CS5

Modul Praktikum Program Aplikasi Desain Web (Adobe Dreamweaver CS5)

MEMBUAT IMAGE LINKS

1. Aktifkan index.html, lalu hapus teks “About Me – My Town” yang pernah kita buat pada latihan sebelumnya).

2. Sisipkan image tombol me.gif dan town.gif (yang sudah disediakan) pada posisi bekas teks links sehingga tampak seperti gambar di samping.

3. Klik kanan pada image About Me, lalu pilih Make Link yang akan menampilkan jendela Select File.

4. Pilih file yang akan dituju, yaitu dataku.html lalu klik OK.

5. Lakukan langkah 3 dan 4 untuk image My Town yang akan di link ke file kotaku.html.

6. Terakhir, lakukan penggantian link Home yang ada pada file dataku.html dan kotaku.html menggunakan image home.gif. Bila langkah-langkah yang dilakukan benar, maka hasil ketiga file tersebut tampak sebagai berikut:

MEMBUAT TOMBOL MENGGUNAKAN EASY BUTTON AND MENU MAKER 1.5

1. Aktifkan aplikasi Easy Button And Menu Maker 1.5

2. Pada bagian Button Templates, pilih template tombolnya, lalu klik jenis tombol yang diinginkan.

3. Klik tombol Add Item untuk membuat tombol baru.

4. Atur jenis dan ukuran fontnya lalu ketik teksnya.

5 | d a r i 8 h a l a m a n

index.html dataku.html kotaku.html

Page 6: Modul 1-2 DreamWeaver CS5

Modul Praktikum Program Aplikasi Desain Web (Adobe Dreamweaver CS5)

5. Lakukan Add Item lagi untuk tombol lain (contoh: My Town dan About Me).

6. Selanjutnya klik tombol Home yang sudah kita buat lalu pada ribbon Home klik menu Save Button as Images.

7. Pada jendela Save as simpan dengan nama home.gif.

8. Ulangi langkah 5 – 7 untuk tombol About Me dan My Town.

9. Tombol yang telah kita simpan tersebut dapat digunakan untuk pembuatan Image Links seperti pada latihan sebelumnya.

MEMBUAT TOMBOL INTERAKTIF MENGGUNAKAN EASY BUTTON AND MENU MAKER 1.5

1. Pembuatan tombol interaktif pada prinsipnya sama dengan pembuatan tombol sebelumnya, langkah 1 – 5 sama persis. Hanya saja sewaktu pembuatan tombol di bagian Mouse Over di beri warna yang berbeda (merah misalnya) sehingga warna teks saat kondisi biasa berwarna PUTIH dan saat mouse berada di atas tombol (mouse over) akan menjadi MERAH. Lakukan perubahan warna mouse over tersebut untuk kedua tombol.

2. Berikutnya klik Tab Button Style. Hilangkan tanda check pada bagian Enable Pushed Down. Fitur ini berfungsi untuk membuat efek saat tombol dalam kondisi ditekan.

3. Jangan lupa pada bagian Button Size atur pula ukuran lebar dan tinggi tombol agar ukuran semua tombol seragam.

4. Setelah pengaturan tombol selesai klik menu Insert into Web Page pada ribbon Home.

6 | d a r i 8 h a l a m a n

Page 7: Modul 1-2 DreamWeaver CS5

Modul Praktikum Program Aplikasi Desain Web (Adobe Dreamweaver CS5)

5. Pada jendela Insert into Web Page, What would you like to do?, klik pilihan kedua: Just generate HTML code and necessary files. Lalu klik Next.

6. Pada tampilan selanjutnya, Get the required files, klik tombol Browse dan arahkan pada folder tempat file-file HTML tersimpan (pada contoh kasus yaitu folder dasar).

7. Biarkan tombol pilihan tetap terseleksi pada I will copy the files in the “same” directory where my web page is.

8. Klik Next.

9. Pada tampilan terakhir jendela Insert into Web Page, Copy the HTML code, klik tombol Copy the HTML untuk meng-copy script yang sudah ter-generate untuk nantinya di insert (sisip) ke file index.html.

10. Apabila langkah-langkah yang kita lakukan benar, pada folder dasar akan terdapat folder baru yaitu folder images yang berisi file-file seperti pada gambar berikut.

7 | d a r i 8 h a l a m a n

Page 8: Modul 1-2 DreamWeaver CS5

Modul Praktikum Program Aplikasi Desain Web (Adobe Dreamweaver CS5)

11. Buka file index.html pada aplikasi Dreamweaver, perhatikan pada jendela Code View yang diberi tanda kotak seperti pada gambar di samping.

12. Hapus kode-kode tersebut kemudian Paste kan code yang telah kita copy tadi sehingga menjadi tampak seperti gambar di samping.

13. Simpan perubahan pada file index.html lalu tampilkan pada browser.

8 | d a r i 8 h a l a m a n