seperti yang anda ketahui banyak cara untuk mendesain web / mendesain tampilan web dengan script-script yang telah di sediakan dalam bahasa pemrograman atau yang banyak disebut dengan text HTML. nah disini akan di berikan satu contoh sebagai media pembelajaran untuk awal permulaan.
Contoh script..
<!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>
<table border="1" width="630">
<tr>
<td colspan="4" align="center" height="40" bgcolor=red> Header</td>
</tr>
<tr>
<td width="158" rowspan="2" align="top" bgcolor=#99FF33><p>Menu</p>
<p>
</p>
<table width="143" border="1">
<tr>
<th width="133" align="left" scope="row">A.</th><tr>
<th align="left" scope="row">B.</th><tr>
<th align="left" scope="row">C.</th><tr>
<th align="left" scope="row">D.</th><tr>
</tr>
</table>
</td>
<td bgcolor=green align="center" colspan="2" height="200">Bagian isi</td>
<td width="173" height="200" align="center" bgcolor=blue> Menu 2
</td>
</tr>
<tr>
<td width="159" align="center" bgcolor=silver>Footer kanan</td>
<td width="112" align="center" bgcolor=orange>Footer tengah</td>
<td align="center" bgcolor=purple>Footer kiri</td>
<tr>
<td colspan="4" align="center" height="15" bgcolor=cyan> Footer Campuran</td>
</tr>
</table>
</body>
</html>
Hasil Tampilan Layout_nya
<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>
<table border="1" width="630">
<tr>
<td colspan="4" align="center" height="40" bgcolor=red> Header</td>
</tr>
<tr>
<td width="158" rowspan="2" align="top" bgcolor=#99FF33><p>Menu</p>
<p>
</p>
<table width="143" border="1">
<tr>
<th width="133" align="left" scope="row">A.</th><tr>
<th align="left" scope="row">B.</th><tr>
<th align="left" scope="row">C.</th><tr>
<th align="left" scope="row">D.</th><tr>
</tr>
</table>
</td>
<td bgcolor=green align="center" colspan="2" height="200">Bagian isi</td>
<td width="173" height="200" align="center" bgcolor=blue> Menu 2
</td>
</tr>
<tr>
<td width="159" align="center" bgcolor=silver>Footer kanan</td>
<td width="112" align="center" bgcolor=orange>Footer tengah</td>
<td align="center" bgcolor=purple>Footer kiri</td>
<tr>
<td colspan="4" align="center" height="15" bgcolor=cyan> Footer Campuran</td>
</tr>
</table>
</body>
</html>
Hasil Tampilan Layout_nya
1. langkah untuk membuat blog
pada code pada dreamweaver html 
2. langkah untuk melihat apakah cocok dan pas dengan mengeklik Split
3. Hasil Gambar Layout
Keterangan Program Diatas :
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<table border="1" width="630">
<tr>
<td colspan="4" align="center" height="40" bgcolor=red> Header</td>
</tr>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<table border="1" width="630">
<tr>
<td colspan="4" align="center" height="40" bgcolor=red> Header</td>
</tr>
- Pada Keterangan diatas adalah untuk membuat tabel dengan lebar 630 dan batas untuk tabel, kemudian membuat header dengan menggabungan kolom sebaris dengan berisikan 4 kolom dan tinggi 40 dan posisi tulisan di tengah kemudian diberi warna merah)
<tr>
<td width="158" rowspan="2" align="top" bgcolor=#99FF33><p>Menu</p>
<p>
</p>
<table width="143" border="1">
<tr>
<th width="133" align="left" scope="row">A.</th><tr>
<th align="left" scope="row">B.</th><tr>
<th align="left" scope="row">C.</th><tr>
<th align="left" scope="row">D.</th><tr>
</tr>
</table>
</td>
<td width="158" rowspan="2" align="top" bgcolor=#99FF33><p>Menu</p>
<p>
</p>
<table width="143" border="1">
<tr>
<th width="133" align="left" scope="row">A.</th><tr>
<th align="left" scope="row">B.</th><tr>
<th align="left" scope="row">C.</th><tr>
<th align="left" scope="row">D.</th><tr>
</tr>
</table>
</td>
- Keterangan diatas adalah Membuat menu untuk informasi tambahan dengan menggabungkan 2 baris dengan letak tulisan diatas, lalu kemudian membuat menu Bagian isi dengan lebar “143″ dan saya menambahkan sebuah table kotak di bawah Menu dengan lebar 133 dengan letak tulisan sebelah kiri yang terdapat A, B, C, D setiap barisnya.
<td width="173" height="200" align="center" bgcolor=blue> Menu 2
</td>
</tr>
<tr>
- Pada bagian ini adalah membuat bagian isi dengan warna hijau dengan mengatur isi sel pada table dengan 2 colom dan tinggi 200 yang berarti yang di dalam sebagai Bagian isi dan lebar menu sebelah kiri dengan lebar 173 tinggi 200 dan menambhkan bagian warna didalamnya.
<td width="112" align="center" bgcolor=orange>Footer tengah</td>
<td align="center" bgcolor=purple>Footer kiri</td>
<tr>
- Membuat menu Footer kanan dengan tata letak tulisan ditengah, dan membuat menu Footer tengah, footer kiri dengan lebar yang berbeda dengan tata letak tulisan berada juga.
<td colspan="4" align="center" height="15" bgcolor=cyan> Footer
Campuran</td>
</tr>
</table>
</body>
</html>
</tr>
</table>
</body>
</html>
- Membuat Footer Campuran dengan menggabungkan 4 kolom sebaris yang berada di tegah dengan ketinggian 15 dan kemudian diberi warna.
mantap
BalasHapus