Kumpulan Tugas: Laporan Akhir Praktikum Dreamweaver Minggu 2

Wednesday, 7 January 2015

Laporan Akhir Praktikum Dreamweaver Minggu 2

Diposkan oleh C. Sheilla di 22:02

Pada laporan kali ini saya akan menjelaskan dari pembuatan halaman website sederhana dengan menggunakan frameset pada dreamweaver. Frameset adalah suatu frame induk yang dapat menampung beberapa frame didalamnya dan dapat memiliki frameset sendiri. Berikut langkah-langkahnya:

Buka Dreamweaver lalu pilih HTML
Pilih File -> New -> Framesets -> Fixed Top, Nested Left -> Create untuk merancang tampilan frameset yang kita inginkan.
Kemudian pada frame paling atas klik Insert -> Form. Lalu ketikan judul dengan mengunakan Heading 1 dan sub judul.
Kemudian pada frame sebelah kiri klik Insert -> Form. Lalu ketikan menu dengan pilihan Home, Profile, Gallery dan Contact Us. Sementara untuk frame yang disebelahnya di kosongkan.
Selanjutnya membuat file baru dengan cara File -> New -> Basic Page : HTML -> Create

Page Home berisi penjelasan tentang isi dari web yang kita buat,

Page Profil berisi data diri,

Page Gallery berisi image,

Page Contact Us berisi kontak yang dapat dihubungi.

Lalu Save dengan nama yang kita inginkan dengan extention .HTML

Hasil frameset yang telah dibuat pada tampilan Design

Hasil Design pada page Home

Hasil Design pada page Profile

Hasil Design pada page Gallery

list coding pada Frame bagian atas:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Chicha Flannel</title>

<!--

.style1 {font-family: Heartbreaker}

body {

background-color: #FF66CC;

}

-->

</style>

</head>

<body>

<h1 class="style1">Chicha Flannel </h1>

<p class="style1"><marquee>www.chichaflannel.com</marquee></p>

</div>

</form>

</body>

</html>

List Coding pada Frame sebelah kiri:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Chicha Flannel</title>

<!--

.style1 {font-family: Heartbreaker}

body {

background-color: #FF99CC;

}

-->

</style>

</head>

<body>

<p class="style1">- <a href="Profile.html" title="Profile" target="mainFrame">Profile</a></p>

<p class="style1">- <a href="gallery.html" title="Gallery " target="mainFrame">Gallery </a></p>

<p class="style1">- <a href="contactus.html" title="Hubungi Kami" target="mainFrame">Contact Us </a></p>

</form>

</body>

</html>

List Coding pada page Home:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<!--

.style1 {font-family: Heartbreaker}

.style2 {font-family: "KG Drops of Jupiter"; }

body {

background-color: #FFFFFF;

}

-->

</style>

</head>

<body>

<h2 align="center" class="style1">Selamat datang di Chicha Flannel</h2>

<p class="style2">Chicha Flannel menyediakan berbagai macam kreasi bahan flannel mulai dari bros, sarung handphone, sarung binder hingga kaos. Disini kamu bisa memilih design, warna, jumlah pembelian yang kamu inginkan. Lebih jelasnya kamu bisa lihat Gallery untuk melihat dan memilih design yang kamu mau. </p>

</form>

</body>

</html>

List coding pada page Profile:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Profile</title>

<!--

.style1 {font-family: Heartbreaker}

.style2 {font-family: "KG Drops of Jupiter"}

-->

</style>

</head>

<body>

<h2 align="center">Profile</h2>

<tr>

</label></td>

</tr>

<tr>

</label></td>

</tr>

<tr>

<td><span class="style2">Kelas</span></td>

</label></td>

</tr>

</table>

</form>

</body>

</html>

List coding pada page Gallery:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Gallery</title>

<!--

.style1 {font-family: Heartbreaker}

.style2 {font-size: 18px}

-->

</style>

</head>

<body>

<h1 align="center">Gallery</h1>

</marquee>

</form>

</body>

</html>

Logika:

Dalam pembuatan web sederhana ini ada beberapa tag yang belum kita ketahui dari tag pada laporan sebelumnya. Berikut ini adalah penjelasan dari tag-tag kodingan tersebut:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> merupakan tag pembuka yang menyatakan pada browser bahwa dokumen web yang digunakan adalah HTML

<head> merupakan kepala dari dokumen HTML dan ditutup dengan </head>

<title> </title> menyatakan judul dari dokumen HTML yang akan di tampilkan pada title bar atau tab di browser

<style type="text/css"> merupakan style text yang akan di gunakan dan ditutup dengan tag </style>

 menyatakan komentar atau keterangan, kalimat yang berada didalam tag ini tidak akan terlihat pada browser

.style1 {font-family: Heartbreaker}

.style2 {font-family: "KG Drops of Jupiter"; }

body {

background-color: #FFFFFF;

} menyatakan dokumen HTML pada style1 menggunakan font Heartbreaker, pada style2 mengunakan font KG Drops of Jupiter dan dengan latar belakang berwarna

<form id="form1" name="form1" method="post" action=""> menyatakan untuk pembuatan form

<a href="Home.html" title="Home" target="mainFrame">Home</a> menyatakan untuk membuat link ke halaman/frame yang lain

<marquee> </marquee> menyatakan teks bergerak dari kanan ke kiri

<h2 align="center" class="style1"> </h2> menyatakan heading 2 dengan posisi di tengah dan menggunakan font Heartbreaker

<p class="style2"> </p> menyatakan sebuah paragraf dengan menggunakan font KG Drops of Jupiter

<table width="282" border="0"> menyatakan untuk pembuatan tabel dengan lebar 282 dan border 0

<tr> Table Row mendefinisikan baris pada tabel dan di akhiri dengan tag </tr>

<td width="63"> table data dengan lebar 63</td>

<span class="style2"> </span> menyatakan font KG Drops of Jupiter pada isi tabel

<label></label> menyatakan label dari text field

<input name="textfield" type="text" value="Sheilla Citra" /> menyatakan texfield dengan type inputan teks dan berisi Sheilla Citra pada textfield

<marquee direction="up"> menyatakan gambar/teks bergerak dari bawah ke atas

<img src="../../../back up andro 05-02-14/DCIM/Camera/2013-11-30 11.21.59.jpg" width="332" height="233" /><img src="../../../back up android 25102013/DCIM/Camera/2013-10-05 20.58.25.jpg" width="311" height="230" /> image source menyatakan lokasi penyimpan gambar atau lokasi dimana gambar diambil dengan panjang 332 dan lebar 332

</table> menyatakan untuk mengakhiri pembuatan tabel

</form> menyatakan untuk mengakihri form

</body> menyatakan mengakhiri penulisan isi web

</html> merupakan tag penutup untuk mengahiri dokumen HTML

0 komentar:

Wednesday, 7 January 2015

Laporan Akhir Praktikum Dreamweaver Minggu 2

Buka Dreamweaver lalu pilih HTML
Pilih File -> New -> Framesets -> Fixed Top, Nested Left -> Create untuk merancang tampilan frameset yang kita inginkan.
Kemudian pada frame paling atas klik Insert -> Form. Lalu ketikan judul dengan mengunakan Heading 1 dan sub judul.
Kemudian pada frame sebelah kiri klik Insert -> Form. Lalu ketikan menu dengan pilihan Home, Profile, Gallery dan Contact Us. Sementara untuk frame yang disebelahnya di kosongkan.
Selanjutnya membuat file baru dengan cara File -> New -> Basic Page : HTML -> Create

Page Home berisi penjelasan tentang isi dari web yang kita buat,

Page Profil berisi data diri,

Page Gallery berisi image,

Page Contact Us berisi kontak yang dapat dihubungi.

Lalu Save dengan nama yang kita inginkan dengan extention .HTML