Modul ini membahas tentang tutorial pembuatan website menggunakan Adobe Dreamweaver Cs6 dan HTML, meliputi langkah-langkah instalasi Dreamweaver, pembuatan halaman website, penambahan konten seperti tabel dan gambar, serta pendesainan tampilan menggunakan CSS."

1. TUTORIAL WEB
RPL

2. KATA PENGANTAR
KATA PENGANTAR
Modul dengan judul “WWeebb DDeessiiggnn && WWeebb PPrrooggrraammiinngg“ merupakan bahan acuan yang digunakan
sebagai panduan dalam proses belajar Teman untuk membentuk salah satu bagian dari
kompetensi bidang keahlian Teknologi Informasi dan Komunikasi.
Modulinimencakuppenguasaankonsepfile-filegrafik, memahamidasar-dasarpemrogramanWeb,
memahamiperintah-perintahpemrogramanWeb,
danbagaimanamembangunsebuahaplikasipemrogramanberbasisWeb.
Penyusun
Nizar Zulmi Ramadhan

3. Menginstal Adobe Dream
Weaver Cs6
PertamaKlik setup untukmemulaimenginstal:

4. Laluklik install:
LaluKlik Accept:

5. Klik language untukmenentukanbahasadanKlikgambar folder untukmenempatkanlokasi dream Weaver,
laluklik install:
Mulaimenginstall:

6. Menginstallselesai:

7. Langkah Pembuatan Site
Tulisnama web yang ingindibuat, LaluKlikgambar folder untukMenempatkan web yang ingindisimpan:
Apabila folder sudahdibuatlalusimpan web di folder yang dibuat:

8. Apabilasudahdimpan, lanjutklik server-kliktanda plus +:
Hasilya,laluisidansimpan:

9. LaluCheklist testing-simpan:

10. MulaiMembuat Web
Hal pertama yang sayalakukandalammembuat web adalahmembuatpokokdari web yang
sayainginbuatadalahtable.Berikutlangkah-langkahnya :
Pertamaklikinsert :
Lalu klik Table
Lalu tentukan baris/rows dan colomnya:
Apabila sudah menentukan baris/rows dan colomnya lalu klik ok.

11. Hasilnya:
Apabila ada baris/rows yang ingin dihilangkan, blok baris yang ingin dihilangkan:

12. Lalu klik rows, Hasilnya:
Apabila ada colom yang ingin dihilangkan, blok colom yang ingin dihilangkan:

13. Lalu klik cell, Hasilnya:
Apabila table ingin diisi colom, caranya klik table yang ingin diisi colom laluklik insert-klik Table-tentukan
berapa colom yang di isi.

14. Pertamaklikinsert :
Lalu klik Table
Lalu tentukan baris/rows dan colomnya:

15. Hasilnya:
Apabila ingin meratakan tulisan, blok table yang ada tulisannya dan yang ingin diratakan:
Lalu Horznya diganti dengan Center:

16. Hasilnya:

17. Mendesain Web
Apabila ingin memasukan gambar untuk background, caranya klik Page properties
Lalu klik browser, untuk mencari gambar yang ingin di jadikan background
Cara Membuat CSS
Kode:
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/

18. body {
margin: 0;
padding: 0;
background: #0f3041 url(gambar/img.jpg) repeat-x;
font-size: 13px;
/* [disabled]color: #FFFFFF; */
}
body, th, td, input, textarea, select, option {
font-family: Arial, Helvetica, sans-serif;
}
h1, h2, h3 {
text-transform: lowercase;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: normal;
color: #fff04f;
}
h1 {
letter-spacing: -2px;
font-size: 3em;
}
h2 {
letter-spacing: -1px;
font-size: 2em;
}
h3 {
font-size: 1em;
}
p, ul, ol {
line-height: 200%;
}
blockquote {
padding-left: 1em;
}
blockquote p, blockquote ul, blockquote ol {

19. line-height: normal;
font-style: italic;
}
a {
color: #FFEA6F;
}
a:hover {
text-decoration: none;
}
img { border: none; }
/* Header */
#header {
width: 830px;
height: 280px;
margin: 0 auto;
background: url(gambar/img11.jpg) no-repeat;
}
/* Logo */
#logo {
height: 170px;
background: url(/.gif) no-repeat left 65%;
}
#logo h1 {
float: left;
padding: 40px 40px 0 50px;
letter-spacing: -2px;
font-size: 48px;
}
#logo h2 {
float: right;
padding: 68px 0 0 0;
font-size: 24px;

20. }
#logo a {
text-decoration: none;
color: #372412;
}
/* Gallery */
#gallery {
clear: both;
width: 830px;
height: 300px;
margin: 0 auto;
}
#top-photo h2 {
height: 1.4em;
font-size: 1em;
}
#top-photo p {
margin: 0;
padding: 0 0 10px 0;
}
/* Menu */
#menu {
width: 830px;
height: 70px;
background: url(gambar/Untitled-4.jpg) no-repeat;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu li {

21. display: inline;
}
#menu a {
display: block;
float: left;
width: 166px;
height: 73px;
padding-top: 35px;
text-transform: lowercase;
text-decoration: none;
text-align: center;
letter-spacing: -1px;
font-size: 24px;
color: #FFFFFF;
}
#menu a:hover {
background: url(gambar/graphic1.gif) no-repeat;
color: #FFFFFF;
}
#menu .active a {
background: url(gambar/graphic1.gif) no-repeat;
color: #372412;
}
/* Page */
#page {
width: 830px;
margin: 0 auto;
padding: 20px 0;
}
/* Content */
#content {
float: left;
width: 532px;
}

22. .post {
padding: 0 0 20px 0;
}
.title {
margin: 0;
border-bottom: 2px solid #4A3903;
}
.byline {
margin: 0;
}
.meta {
border-top: 1px solid #4A3903;
text-align: right;
color: #646464;
}
.meta a {
padding-left: 15px;
background: url(images/img06.gif) no-repeat left center;
font-weight: bold;
}
/* Sidebar */
#sidebar {
float: right;
width: 240px;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar li {
}
#sidebar li ul {

23. padding: 15px 0;
}
img
#sidebar li li {
padding-left: 30px;
border-bottom: 1px dotted #4A3903;
background: url(images/img06.gif) no-repeat 15px 50%;
}
#sidebar h2 {
margin: 0;
padding: 20px 0 2px 30px;
background: url(gambar/tes.jpg) no-repeat left bottom;
border-bottom: 2px solid #4A3903;
}
#sidebar a {
text-decoration: none;
}
#sidebar a:hover {
text-decoration: underline;
}
/* Footer */
#footer {
clear: both;
padding: 20px 0;
background: #FFEA6F;
border-top: 3px solid #E8AD35;
text-align: center;
font-size: smaller;
color: #E8AD35;
}
#footer a {
color: #C28C21;
}

24. Cara Membuat Tampilan Home:
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Nizar Zulmi Ramadhan X RPL 2</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="default.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<!-- start header -->
<div id="header">
<div id="logo">
<h1></h1>
<h2></h2>
</div>
<div id="menu">
<ul> <li class="active"><a href="default.html" accesskey="1" title=""><font
color="#f0e920" font face="Vineta BT">Home</a></li>
<li><a href="blog.html" accesskey="2" title=""><font color="#f0e920" font
face="Vineta BT">Blog</a></li>
<li><a href="photos.html" accesskey="3" title=""><font color="#f0e920" font
face="Vineta BT">Photos</a></li>
<li><a href="About.html" accesskey="4" title=""><font color="#f0e920" font
face="Vineta BT">About</a></li>
<li><a href="contact.php" accesskey="5" title=""><font color="#f0e920" font
face="Vineta BT">Contact</a></li>
</ul>
</div>
</div>
<!-- end header -->
<div id="gallery">
<div id="top-photo">
<p><a href="#"><img src="gambar/Untitled-2.jpg" alt="" width="830" height="300"
/></a></p>
</div>
</div>
<!-- start page -->
<div id="page">
<!-- start content -->
<div id="content">
<div class="post">
<h1 class="title"><marquee>Welcome to My Website</marquee></h1>
<p class="byline"><small>Posted on April 9th, 2013 by <a
href="admin.html">admin</a> </small></p>
<div class="entry">
<p> <font face="Arial"><strong>Selamat datang</strong>di Website
sederhana saya, maaf jika masih banyak sekali kekurangan. i hope you can enjoy:)</p>
</div>
<p class="meta">Read More</a> &nbsp;&nbsp;&nbsp; Comments (33)</p>
</div>
<div class="post">
<h2 class="title">Tentang Paskibra</h2>
<p class="byline"><small>Posted on April 9th, 2013 by <a
href="admin.html">admin</a> </small></p>

25. Tampilan blog:
Code:

26. --> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type"
content="text/html; charset=utf-8" /><title>Nizar Zulmi Ramadhan X RPL 2</title><meta name="keywords"
content="" /><meta name="description" content="" /><link href="default.css" rel="stylesheet"
type="text/css" media="screen" /></head><body><!-- start header --><div id="header"><div id="logo">
</div><div id="menu"><ul><li><a href="default.html" accesskey="1" title=""><font
color="#f0e920" font face="Vineta BT">Home</a></li><li class="active"><a href="blog.html" accesskey="2"
title=""><font color="#f0e920" font face="Vineta BT">Blog</a></li><li><a href="photos.html"
accesskey="3" title=""><font color="#f0e920" font face="Vineta BT">Photos</a></li><li><a
href="About.html" accesskey="4" title=""><font color="#f0e920" font face="Vineta BT">About</a></li>
<li><a href="contact.php" accesskey="5" title=""><font color="#f0e920" font face="Vineta
BT">Contact</a></li></ul></div></div><!-- end header --><div id="gallery"><div id="top-photo"><p><a
href="#"><img src="gambar/Untitled-7.jpg" alt="" width="830" height="300" /></a></p></div></div>
<!-- start page -->
<div id="page">
<!-- start content -->
<div id="content">
<div class="post">
<h1 class="title">Welcome to My Website</h1>
<p class="byline"><small>Posted on April 09th 2013 by <a href="admin.html">admin</a> </small></p>
<div class="entry">
<p> <font face="Arial"><strong>Manajemendes </strong>adalah suatu
Organisasi yang dibentuk pada tahun 2002, yang pertama kali didirikan di SMP Negeri 6 Depok. Dan sampai
saat ini sudah terdiri dari 25 sekolah Se-Jabode.</p>
</div>
<p class="meta">Read More</a> &nbsp;&nbsp;&nbsp; Comments (33)</p>
</div>
<div class="post">
<h2 class="title">Sejarah Kepaskibraan</h2>
<p class="byline"><small>Posted on April 09th 2013 by <a href="admin.html">admin</a>
</small></p>
<div class="entry">
<blockquote>
<p>&#8220;Praesent augue mauris, accumsan eget, ornare quis, consequat malesuada,
leo.&#8221;</p></blockquote>
<p>Paskibraka adalah singkatan dari Pasukan Pengibar Bendera Pusaka
dengan tugas utamanya mengibarkan duplikat bendera pusaka dalam upacara peringatan proklamasi
kemerdekaan Indonesia di 3 tempat, yakni tingkat Kabupaten/Kota (Kantor Bupati/Walikota), Provinsi
(Kantor Gubernur), dan Nasional (Istana Negara). Anggotanya berasal dari pelajar SLTA Sederajat kelas 1
ATAU 2. Penyeleksian anggotanya biasanya dilakukan sekitar bulan April untuk persiapan pengibaran pada
17 Agustus
Gagasan Paskibraka lahir pada tahun 1946, pada saat ibukota Indonesia dipindahkan ke Yogyakarta.
Memperingati HUT Proklamasi Kemerdekaan RI yang ke-1, Presiden Soekarno memerintahkan salah satu
ajudannya, Mayor (Laut) Husein Mutahar, untuk menyiapkan pengibaran bendera pusaka di halaman Istana
Gedung Agung Yogyakarta. Pada saat itulah, di benak Mutahar terlintas suatu gagasan bahwa sebaiknya
pengibaran bendera pusaka dilakukan oleh para pemuda dari seluruh penjuru Tanah Air, karena mereka
adalah generasi penerus perjuangan bangsa yang bertugas.
Tetapi, karena gagasan itu tidak mungkin terlaksana, maka Mutahar hanya bisa menghadirkan lima orang
pemuda (3 putra dan 2 putri) yang berasal dari berbagai daerah dan kebertulan sedang berada di

27. Tampilan foto:
Code:
<body><!-- start header --><div id="header"> <div id="logo"> <h1></h1><h2></h2></div>
<div id="menu">
<ul><li><a href="default.html" accesskey="1" title=""><font color="#f0e920"
font face="Vineta BT">Home</a></li>
<li><a href="blog.html" accesskey="2" title=""><font color="#f0e920"
font face="Vineta BT">Blog</a></li>
<li class="active"><a href="photos.html" accesskey="3" title=""><font
color="#f0e920" font face="Vineta BT">Photos</a></li>
<li><a href="About.html" accesskey="4" title=""><font
color="#f0e920" font face="Vineta BT">About</a></li>
<li><a href="contact.php" accesskey="5" title=""><font
color="#f0e920" font face="Vineta BT">Contact</a></li>
</ul> </div></div><!-- end header --><div id="gallery">
<div id="top-photo">
<p><a href="#"><img src="gambar/Untitled-1.jpg" alt="" width="830"
height="300" /></a></p> </div></div>
<!-- start page --><div id="page"> <!-- start content -->
<table width="830" height="750" border="0" align="center"> <tr>
<td width = "200" height= "150"><img src="gambar/foto1.jpg" width="200"
height="150"></td> <td width = "200" height= "150"><img src="gambar/foto2.jpg"
width="200" height="150"></td> <td width = "200" height= "150"><img
src="gambar/foto3.jpg" width="200" height="150"></td>
<td width = "200" height= "150"><img src="gambar/foto4.jpg" width="200"
height="150"></td>
</tr>

28. Tampilan Contact:
Code:
<!-- start page --><div id="page"><hr></hr>
<h1><marquee> Welcome To Contact</marquee></h1>
<!-- start content --> <tr>
<td align = "center" width = "800" Height = "350"><?
include "koneksi.php"; ?>
<form action="add.php" method="post">
<table border=0 align=center width=500> <tr>
<td width=11%>Nama</td> <td width=3%>:</td>
<td width=86%><input type=text name=nama size=50></td>
</tr>
<tr>
td width=11%>Alamat</td>
<td width=3%>:</td>
<td width=86%>
<input type=text value=Jl. name=alamat size=50></td>
</tr> <tr>
<td width=11%>Email</td>
<td width=3%>:</td>
<td width=86%><input type=text name=email size=50></td>
</tr>
<tr>
<td width=11%>No HP</td>
<td width=3%>:</td>
<td width=86%>

29. Untuk Menghubungkan Web dengan database. Beri nama folder nya Koneksi.php
Code:
Cara Membuat Database:
<?
mysql_connect ("localhost", "root", "");
mysql_select_db("tugas");
?>