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.

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.

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.

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.

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.

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.

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

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.