Laporan praktikum3
- 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