HEADER (FRAME ATAS)
Langkah-langkah:
1. Buka dreamweaver, klik HTML lalu buat File baru. Lalu pilih menu Page from Sample – Frameset – Fixed Top, Nested Left. Lalu klik Create.
Di header tulis (contoh : Welcome… and Let’s Travelling). Beri warna atau foto pada background header sesuai keinginan. Klik menu Modify – Page Properties – Appearance – Background Color/Image – Ok. Dibawah header akan dibuat tulisan contoh: (www.jalan-jalan.com) yang nantinya akan bergerak.
3. Untuk menjalankan tulisan (www.jalan-jalan.com) secara horizontal (dari kiri ke kanan), block tulisan www.jalan-jalan.com lalu klik menu Insert – Tag – Marquee - Insert - Close. (Tekan F12 untuk melihat hasil)
OUTPUT UNTUK HEADER:
(Yang di beri lingkar merah, pada saat di output akan bergerak secara horizontal)
SOURCE CODE HEADER:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body,td,th {
font-family: Times New Roman, Times, serif;
color: #00FF33;
}
.style2 {
color: #99FF00
}
body {
background-image: url(file:///D|/PHOTOS/quotes/images_2.jpg);
}
.style3 {
color: #990000;
font-weight: bold;
}
-->
</style></head>
<body>
<div align="center">
<h1 class="style2">Welcome... and Let's Travelling</h1>
<p align="left" class="style3"><marquee>www.jalan-jalan.com</marquee></p>
</div>
</body>
</html>
MAIN FRAME (FRAME TENGAH)
Langkah-langkah:
1. Masukkan gambar yang diinginkan dengan cara klik menu Insert – Image – Ok. Block gambar lalu klik menu Insert – Tag – Marquee – Insert – Close. Untuk memberi efek pantulan pada gambar tambahkan (seperti pada gambar berikut: )
(Tekan F12 untuk melihat hasil outputpada web browser)
OUTPUT UNTUK MAIN FRAME :
SOURCE CODE:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<marquee><img src="file:///D|/images (3).jpg" width="263" height="192" />
<img src="file:///D|/images (2).jpg" width="293" height="193" />
<img src="file:///D|/download (1).jpg" width="259" height="194" />
</marquee></body>
</html>
LEFT FRAME (FRAME KIRI)
Langkah-langkah (Home) :
1. Beri warna atau foto pada background frame kiri sesuai keinginan. Klik menu Modify – Page Properties – Appearance – Background Color/Image – Ok.2. Buat tulisan Home, Profile, About. Block tulisan lalu tambahkan bullet di properties (Unordered List).
3. Block tulisan Home - Properties - Link, klik icon folder akan muncul kotak folder. Pilih frame tengah yang telah kita buat tadi agar, jika kita mengklik kata home langsung muncul home yang telah kita buat frame tengah. Pilih UntitledFrame-2.html tengah - klik OK.
4. Agar Home yang telah kita buat tadi berada di frame utama. Pilih Properties - Target - mainFrame.
5. Jika Ingin merubah warna menjadi semula setelah kita buat link. Pilih Modify - Page Properties - Links - Link color, pilih sesuai keinginan. Atau jika tidak ingin memakai garis bawah langsung saja pilih kotak Underline Style - pilih Never Underline. Klik OK.
(Tekan F12 untuk melihat hasil pada web browser)
Source Code Left Frame:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-image: url(file:///D|/PHOTOS/quotes/images_2.jpg);
}
-->
</style></head>
<body>
<ul>
<li><a href="Untitled-2.html" target="mainFrame">Home</a></li>
<li><a href="Profile.html" target="mainFrame">Profile</a></li>
<li><a href="About.html" target="mainFrame">About</a> </li>
</ul>
</body>
</html>
Design Home:
Langkah-langkah (Profile) :
1. Untuk halaman profile, buat halaman baru. File – New – Blank Page – HTML – Create.
2. Ketikkan biodata kita di halaman profile, simpan dengan nama Profile.html
3. Beri warna atau foto pada background halaman profile sesuai keinginan. Klik menu Modify – Page Properties – Appearance – Background Color/Image – Ok.
4. Jika ingin memberikan gerakan animasi pada biodata yang telah dibuat, block biodata – Insert – Tag – Marquee – Insert – Close. Agar gerakan biodata vertikal (kearah atas) beri space setelah marquee yang terdapat di dalam source code <p><marquee>. Pilih direction - klik 2x - pilih up - klik 2x. (Seperti pada gambar : )
5. Kembali ke menu utama. Block tulisan Profile pada left frame – Properties – Link klik icon folder lalu masukkan file Profile.html klik mainFrame pada target.
6. Jika Ingin merubah warna menjadi semula setelah kita buat link. Pilih Modify - Page Properties - Links - Link color, pilih sesuai keinginan. Atau jika tidak ingin memakai garis bawah langsung saja pilih kotak Underline Style - pilih Never Underline. Klik OK.
(Tekan F12 untuk melihat hasil output pada web browser)
Source Code Profile:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-color: #00FF66;
}
body,td,th {
color: #990000;
}
-->
</style></head>
<body>
<strong>
<marquee direction="up">
</marquee>
</strong>
<marquee direction="up"><table width="322" height="212" border="0">
<tr>
<td width="82"><strong>Nama</strong></td>
<td width="7"><strong>:</strong></td>
<td width="219"><strong>Yunita Amadea</strong></td>
</tr>
<tr>
<td><strong>Kelas</strong></td>
<td><strong>:</strong></td>
<td><strong>3KA09</strong></td>
</tr>
<tr>
<td><strong>NPM</strong></td>
<td><strong>:</strong></td>
<td><strong>17111675</strong></td>
</tr>
<tr>
<td><strong>TTL</strong></td>
<td><strong>:</strong></td>
<td><strong>Jakarta, 30 Juni 1993</strong></td>
</tr>
<tr>
<td><strong>Facebook</strong></td>
<td><strong>:</strong></td>
<td><strong>Yunita Amadea</strong></td>
</tr>
<tr>
<td><strong>Twitter</strong></td>
<td><strong>:</strong></td>
<td><strong>@YunitAmadea</strong></td>
</tr>
</table>
</marquee>
</body>
</html>
Design Profile:
Langkah-langkah (About) :
1. Untuk halaman about, buat halaman baru. File – New – Blank Page – HTML – Create.
2. Ketikkan tentang website didalmnya berisi nama website dan tujuan pembuatan website kita di halaman about, simpan dengan nama About.html
3. Beri warna atau foto pada background halaman about sesuai keinginan. Klik menu Modify – Page Properties – Appearance – Background Color/Image – Ok.
4. Kembali ke menu utama. Block tulisan About pada left frame – Properties – Link klik icon folder lalu masukkan file About.html klik mainFrame pada target.
5. Jika Ingin merubah warna menjadi semula setelah kita buat link. Pilih Modify - Page Properties - Links - Link color, pilih sesuai keinginan. Atau jika tidak ingin memakai garis bawah langsung saja pilih kotak Underline Style - pilih Never Underline. Klik OK.
(Tekan F12 untuk melihat hasil pada web browser)
Source Code About:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body,td,th {
color: #990000;
}
body {
background-color: #00FF66;
}
-->
</style></head>
<body>
<p><strong>Nama website : www.jalan-jalan.com </strong></p>
<p><strong>Tujuan pembuatan website : Website yang saya buat berisikan informasi tentang lokasi wisata di suatu tempat. Website ini akan menyediakan bermacam informasi mulai dari tempat wisata yang terkenal di daerah atau negara tersebut, alamat lokasi yang memudahkan para traveller untuk mengunjunginya, maupun harga tiket masuk di dalam lokasi wisata tersebut.</strong></p>
<p><strong>@Copyright 2013</strong></p>
</body>
</html>
Design About:
1. Untuk halaman profile, buat halaman baru. File – New – Blank Page – HTML – Create.
2. Ketikkan biodata kita di halaman profile, simpan dengan nama Profile.html
3. Beri warna atau foto pada background halaman profile sesuai keinginan. Klik menu Modify – Page Properties – Appearance – Background Color/Image – Ok.
4. Jika ingin memberikan gerakan animasi pada biodata yang telah dibuat, block biodata – Insert – Tag – Marquee – Insert – Close. Agar gerakan biodata vertikal (kearah atas) beri space setelah marquee yang terdapat di dalam source code <p><marquee>. Pilih direction - klik 2x - pilih up - klik 2x. (Seperti pada gambar : )
5. Kembali ke menu utama. Block tulisan Profile pada left frame – Properties – Link klik icon folder lalu masukkan file Profile.html klik mainFrame pada target.
6. Jika Ingin merubah warna menjadi semula setelah kita buat link. Pilih Modify - Page Properties - Links - Link color, pilih sesuai keinginan. Atau jika tidak ingin memakai garis bawah langsung saja pilih kotak Underline Style - pilih Never Underline. Klik OK.
(Tekan F12 untuk melihat hasil output pada web browser)
Source Code Profile:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-color: #00FF66;
}
body,td,th {
color: #990000;
}
-->
</style></head>
<body>
<strong>
<marquee direction="up">
</marquee>
</strong>
<marquee direction="up"><table width="322" height="212" border="0">
<tr>
<td width="82"><strong>Nama</strong></td>
<td width="7"><strong>:</strong></td>
<td width="219"><strong>Yunita Amadea</strong></td>
</tr>
<tr>
<td><strong>Kelas</strong></td>
<td><strong>:</strong></td>
<td><strong>3KA09</strong></td>
</tr>
<tr>
<td><strong>NPM</strong></td>
<td><strong>:</strong></td>
<td><strong>17111675</strong></td>
</tr>
<tr>
<td><strong>TTL</strong></td>
<td><strong>:</strong></td>
<td><strong>Jakarta, 30 Juni 1993</strong></td>
</tr>
<tr>
<td><strong>Facebook</strong></td>
<td><strong>:</strong></td>
<td><strong>Yunita Amadea</strong></td>
</tr>
<tr>
<td><strong>Twitter</strong></td>
<td><strong>:</strong></td>
<td><strong>@YunitAmadea</strong></td>
</tr>
</table>
</marquee>
</body>
</html>
Design Profile:
Langkah-langkah (About) :
1. Untuk halaman about, buat halaman baru. File – New – Blank Page – HTML – Create.
2. Ketikkan tentang website didalmnya berisi nama website dan tujuan pembuatan website kita di halaman about, simpan dengan nama About.html
3. Beri warna atau foto pada background halaman about sesuai keinginan. Klik menu Modify – Page Properties – Appearance – Background Color/Image – Ok.
4. Kembali ke menu utama. Block tulisan About pada left frame – Properties – Link klik icon folder lalu masukkan file About.html klik mainFrame pada target.
5. Jika Ingin merubah warna menjadi semula setelah kita buat link. Pilih Modify - Page Properties - Links - Link color, pilih sesuai keinginan. Atau jika tidak ingin memakai garis bawah langsung saja pilih kotak Underline Style - pilih Never Underline. Klik OK.
(Tekan F12 untuk melihat hasil pada web browser)
Source Code About:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body,td,th {
color: #990000;
}
body {
background-color: #00FF66;
}
-->
</style></head>
<body>
<p><strong>Nama website : www.jalan-jalan.com </strong></p>
<p><strong>Tujuan pembuatan website : Website yang saya buat berisikan informasi tentang lokasi wisata di suatu tempat. Website ini akan menyediakan bermacam informasi mulai dari tempat wisata yang terkenal di daerah atau negara tersebut, alamat lokasi yang memudahkan para traveller untuk mengunjunginya, maupun harga tiket masuk di dalam lokasi wisata tersebut.</strong></p>
<p><strong>@Copyright 2013</strong></p>
</body>
</html>
Design About:
Tidak ada komentar:
Posting Komentar