- Buka program Adobe Dreaweaver CS
- File--New (Ctrl+N)
- Pilih HTML ---Layout None---Create
- Buat Layout Table seperti berikut ini:
<table width="800" border="0" bordercolor="#F0F0F0">
<tr>
<th scope="col"> </th>
</tr>
<tr>
<th scope="row"> </th>
</tr>
<tr>
<th scope="row"> </th>
</tr>
</table>
</div>
- Letakan kursor pada baris ke-2 dari script di atas
- Pilih insert---Layout Object---Spry Menu Bar
- Pilih horizontal---Ok
- Simpan dengan nama media_utama.htm dan taruh di folder htdoc
- Buka Web Broser Anda kemudian ketikan http://localhost/media_utama.htm
- Kira-kira hasilnya akan seperti gambar berikut ini:
Script lengkapnya
<!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>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div align="center">
<table width="800" border="0" bordercolor="#F0F0F0">
<tr>
<th scope="col"> </th>
</tr>
<tr>
<th scope="row"><ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
<ul>
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
<ul>
<li><a href="#">Item 3.1.1</a></li>
<li><a href="#">Item 3.1.2</a></li>
</ul>
</li>
<li><a href="#">Item 3.2</a></li>
<li><a href="#">Item 3.3</a></li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
</th>
</tr>
<tr>
<th scope="row"> </th>
</tr>
</table>
</div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>
Selamat berkarya dengan ide kalian sendiri.
10$ free money from your android HERE
BalasHapustutornya sangat bermanfaat,,, makasih banyak buat infonya...
BalasHapushttp://goo.gl/eHHwPs