Anda di halaman 1dari 5

STORY BOARD

1. Membuat tampilan layout


Disini saya membagi tampilan layout terdiri atas 2 bagian yakni header.php dan
footer.php. Agar sript yang diketik tidak terlalu banyak dan panjang.
Langkah pertama membuat header.php :
- Buka RapidPHP
- Lalu ketik sriptnya :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>fada motor< title>
</head>

<body background= "CSS/images/BGImagecopy1500.jpg" id="body">


<table id="atas" background= "CSS/images/bg_02.jpg">
<tr>
<td></td>
</tr>
</table>

<table id="atasdua" background= "CSS/images/bg_03.jpg">


<tr>
<td></td>
</tr>
</table>
<table id="atastiga" background= "CSS/images/bg_04.jpg">
<tr>
</tr>
</table>

<table id="tengah">
<tr>
<td class="kanan">Kanan</td>
<td class="tengah">Tengah

Langkah kedua membuat footer.php :


- lanjutkan script dari header.php :
</td>
<td class="bawah">Kiri</td>
</tr>
</table>

<table id="bawah">
<tr>
<td></td>
<tr>
</table>

</body>
</html>
2. Membuat styel.css
CSS kepanjangan dari Cascading Styel Sheet.
Scriptnya:

/* CSS Document */
#body{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background: url(images/BGImagecopy1500.jpg);
background-attachment: fixed;
}

#atas{
width:850px;
height: 230px;
border:1px;
background-color: #99CC00;
margin:0 auto;
}

#atasdua{
width:850px;
height: 56px;
border:1px;
margin:0 auto;
}

#atastiga{
width:850px;
height: 49px;
border:1px;
margin:0 auto;
}

#tengah{
width:850px;
margin:0 auto;
background: #FFFFF4;
}

.kanan{
vertical-align: top;
width:170px;
border:1px solid #CC6600;
padding: 5px;
}

.tengah{
vertical-align: top;
width: auto;
border:1px solid #CC6600;
color:#000000;
padding: 5px;
}

.kiri{
vertical-align: top;
width:160px;
border:1px solid #CC6600;
color: #FF0000;
padding: 5px;
}
#bawah{
width:850px;
margin:0 auto;
text-align:center;
background-color: #993300;
padding: 2px;
color: #FFFFFF;
}

Beri Nilai