Membuat Desain Layout di Adobe Dreamweaver

Tugas 1 Web Programming, Membuat Desai Layout di Adobe Dreamweaver:

Nama : Dicky Yudha Pratama
Nim : 10.01.53.0061
Kel : D1
Makul : Web Programming

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
</head>

<body>
<table widht=”800″ border=”1″>
<tr>
<td colspan=”6″ align=”center” valign=”top” bgcolor=”#00FFFF”><strong>Header</strong></td>
</tr>

<tr>
<td bgcolor=”#00CCFF” colspan=”2″ align=”left”><strong>Navigasi Kiri</strong></td>
<td colspan=”2″ align=”right” valign=”middle” bgcolor=”#FFFF00″><strong>Navigasi Kanan</strong></td>

</tr>

<tr>
<td rowspan=”2″ align=”center” valign=”middle” bgcolor=”#993399″><p>Informasi </p>
<p>Tambahan</p></td>
<td height=”200″ colspan=”2″ align=”Center” bgcolor=”#CCFF00″><strong>Bagian Isi</strong></td>
<td rowspan=”2″ valign=”middle” bgcolor=”#99FF99″>Menu Kanan</td>
</tr>

<tr>
<td align=”center” bgcolor=”#FF6633″>Widget 1</td>
<td colspan=”1″ rowspan=”1″ align=”Center” valign=”middle” bgcolor=”#99CC66″>Widget 2</td>
</tr>

<tr>
<td colspan=”6″ align=”center” bgcolor=”#FF3366″><strong>Footer</strong></td>
</tr>
</table>
</body>
</html>

Hasil Tampilan Layout:

Keterangan Program Diatas:

</head>

<body>
<table widht=”800″ border=”1″>
<tr>
<td colspan=”6″ align=”center” valign=”top” bgcolor=”#00FFFF”><strong>Header</strong></td>
</tr>

*(Keterangan diatas adalah: membuat tabel dengan lebar 800 dan batas untuk tabel, kemudian membuat header dengan menggabungkan 6 kolom engan posisi tulisan di tengah kemudian diberi warna)

<tr>
<td bgcolor=”#00CCFF” colspan=”2″ align=”left”><strong>Navigasi Kiri</strong></td>
<td colspan=”2″ align=”right” valign=”middle” bgcolor=”#FFFF00″><strong>Navigasi Kanan</strong></td>
</tr>

*(Keterangan diatas adalah: Membuat menu Navigasi sebelah kiri dengan menggabungkan 2 kolom dan letak tulisan disebelah kiri, dan Membuat menu Navigasi sebelah kanan dengan menggabungkan 2 kolom dan letak tulisan disebelah kanan)

<tr>
<td rowspan=”2″ align=”center” valign=”middle” bgcolor=”#993399″><p>Informasi </p>
<p>Tambahan</p></td>
<td height=”200″ colspan=”2″ align=”Center” bgcolor=”#CCFF00″><strong>Bagian Isi</strong></td>
<td rowspan=”2″ valign=”middle” bgcolor=”#99FF99″>Menu Kanan</td>
</tr>

*(Keterangan diatas adalah: Membuat menu untuk informasi tambahan dengan menggabungkan 2 baris dengan letak tulisan ditengah, kemudian membuat menu Bagian isi dengan tinggi “200” dan menggabungkan 2 kolom, Menu terakhir adalah bagian Menu Kanan denggan menggabungkan 2 baris)

<tr>
<td align=”center” bgcolor=”#FF6633″>Widget 1</td>
<td colspan=”1″ rowspan=”1″ align=”Center” valign=”middle” bgcolor=”#99CC66″>Widget 2</td>
</tr>

*(Keterangan diatas adalah: Membuat menu Widget 1 dengan tata letak tulisan ditengah, dan membuat menu widget 2 dengan menggabungkan 1 kolom 1 baris yang berada di tegah)

<tr>
<td colspan=”6″ align=”center” bgcolor=”#FF3366″><strong>Footer</strong></td>
</tr>
</table>
</body>
</html>

*(Keterangan diatas adalah: Membuat Footer denggan menggabungkan 6 kolom yang berada di tegah kemudian diberi warna)

Advertisements
By dickyyudhapratama Posted in Komputer

One comment on “Membuat Desain Layout di Adobe Dreamweaver

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s