1. NAMA : MUHAMMAD RIZQI TOHOPI
NIM : 131312027
KELAS :A
SEMESTER : II
TUGAS : LAPORAN PRAKTIKUM 3
MATA KULIAH : DESAIN DAN PEMOGRAMAN WEB
LAPORAN PRAKTIKUM
Pada praktikum hari Selasa, 05 Februari 2013, kami diperkenalkan dengan aplikasi Dreamweaver
CS4. Kemudian kami menginstal aplikasi tersebut. Setelah penginstalan selesai, kami melihat modul
dan melakukan praktikum sesuai petunjuk modul.
1. Membuat situs baru melalui Dreamweaver Site. Hasil praktikum membuat situs baru.
 Pertama buka aplikasi Adobe Dreamweaver cs4.
 Kemudian pilih “Dreamweaver Site”. Ketika dialog Site Definition terbuka, form pertama saya
mengisi nama website yang akan saya buat. Untuk form kedua, saya tidak mengisi alamat
online, dikarenakan masih dalam tahap pembelajaran. Kemudian pilih Next. Berikut tampilan
Site Definition.
 Setelah itu, akan muncul kotak dialog. Saya memilih No, I do not want to use a server
technology. Kemudian pilih Next.
1

2.  Kemudian akan muncul kembali kotak dialog. Saya memilih Edit local copies on my machine,
…(Recommended). Setelah itu saya memilih dimana tempat website saya akan disimpan.
Kemudian pilih Next.
 Pada kotak dialog berikutnya, memintakan sharing data. Karena masih latihan pili “None”,
kemudian pilih Next.
Setelah itu, pilih Done. Selesailah saya membuat situs Web baru saya.

2

3. 2. Membuat Halaman Website Baru
 Pada praktikum ini, saya menggunkan format HTML. Cara membuka HTML pada Dreamwevear
CS4, klik klik menu File -> New -> HTML -> Create
Hasil Running
 Kemudian jika ingin menyimpan HTML ini, cukup saja klik File -> Save -> kemudian form
yang aling bawah pilih None.
3

4. 3. Memulai Halaman Baru
Pada praktikum ini, saya menambahkan teks pada html sebagai mana saya membuat cooding
html pada notepad. Bedanya, untuk menambahkan teks pada html ini, menggunkan Dreamweaver.
Cara untuk membuat teks pada html, pertama kita buka dulu html yang kita create tadi. Kemudian
tuliskan teks yang akan diisikan. Untuk proses latihan ini saya memakai tombol Split untuk bekerja
dengan dua jendela sekaligus, jendela Code dan jendela Design.
Praktikum ini, saya sudah memodifikasi tulisan, baik dari ukuran dan memberikan warna pada
teks. Caranya, perhatikan pada jendela Properties di bagian bawah layar. Pada jendela Properties ini kita
dapat melakukan perubahan dengan dua macam cara, yakni mode HTML dan CSS.
Mode HTML
Disini, saya mengatur ukuran judul tulisan menggunkan heading 1. Pertama letakkan kursor
dan klik pada judul artikel, yakni paragraph pertama pada tulisan yang akan dirubah. Kemudian pilih
heading1.
Mode CSS
Disini saya mengatur font, mengatur posisi teks dan memberikan warna pada teks. Ketika saya
akan mengubah font, akan muncul tampilan dialog. Kemudian pilih Tag (redefines an HTML
element) pada Selector Type.
4

5. 4. Menambahkan Judul dan Tagline
Pada praktikum selanjutnya, saya belajar menambahkan judul dan tagline. Cara
membuatnya, buka html baru pada dreamweaver, kemudian pilih split unutk bekerja dengan dua
jendela sekaligus. Saya membuat;
Disini saya sudah merubah ukuran font, penempatan posisi teks dan merubah bentuk teks
menjadi miring menggunakan Italic. Caranya sama seperti cara sebelumnya yang saya jelaskan,
yakni bekerja menggunkan jendela properti.
Praktikum selanjutnya, saya membuat garis horizontal pada di bawah menu utama. Tempatkan
kursor pada posisi terakhir tulisan baris ketiga, kemudian klik HTML kemudian pilih tombol Horizontal
Rule pada panel Insert.
5. Membuat Hyperlink dan Teks Berjalan
Praktikum kali ini saya akan membuat hyperlink. Caranya, sorotlah tulisan HOME yang akan
dijadikan hyperlink. Kemudian pilih Hyperlink pada panel Insert. Akan muncul kotak dialog hyperlink
yang sudah berisi tulisan HOME pada form text. Kemudian klik pada ikon folder di sebelah kanan drop-
down menu, lanjutkan dengan memilih file index.html yang saya buatkan sebelumnya untuk mengisi
form link. Kemudian pilih OK.
5

6. sekarang tulisan HOME sudah menjadi hyperlink yang dapat berlaku sebagai tombol menju ke
halaman index.html.
Tampilan melalui browser Mozilla Firefox
Tampilan setelah di klik Home. Dimana akan di direct ke link indeks.html.
Untuk membuat hyperlink PROFIL, LAYANAN dan KONTAK, cara membuatnya sama
seperti membuat hyperlink pada HOME. Berikut tampilan pada dreamweaver untuk Hyperlink.
6

7. Selanjutnya kita akan membuat tulisan berjalan atau marquee. Caranya, saya mensorot baris
terakhir tulisan pada halaman website “Selamat Datang di Website Kami”. Kemudian klik tombol Tag
Chooser pada panel Insert. Kotak dialog Tag Chooser akan segera terbuka memperlihatkan semua Tag
yang dapat kita pilih. Klik pada folder HTML tags, klik pada subfolder Page Elements kemudian klik
pada marquee yang terdapat di kolom sebelah kanan. Kemudian klik Insert -> Close
Tampilan pada Code HTML
7

8. Tampilan pada browser Mozilla Firefox
6. Link ke Alamat e-mail
Praktikm selanjutnya saya membuat link ke alamat email. Saya membuat link email pada
halaman indeks.html dengan email: rizqitohopi@smart-ti.com. Caranya, sorot tulisan
rizqitohopi@smart-ti.com, kemudian pilih panel Insert -> Email Link. Setelah itu akan muncul kota
dialog Email link. Kemudian pilih OK.
Alamat email sekarang menjadi berwarna biru sebagai tanda bahwa teks ini sekarang aktif sebagai
link. Email link jika diklik akan mengaktifkan email client, yakni software yang akan langsung terbuka
untuk menuliskan email ke alamat yang ditulis pada email link. Contoh email client yang banyak
dipergunakan adalah Microsoft Outlook.
Tampilan pada browser Mozilla Firefox
Kesimpulan dari praktikum ini, dimana kami diperkenalkan dengan aplikasi membuat Website
menggunkan aplikasi Dreamweaver CS4 yang belum pernah saya gunakan. Untuk mengisi suatu situs,
lebih mudah menggunkan aplikasi ini. Tidak perlu repot-repot untuk menuliskan cooding pada Notepad.
Secara otomatis cooding HTML akan muncul sendiri pada aplikasi Dreamwever.
8