本例用Dreamweaver开发工具设计一个用户登录界面，运行结果如图
具体步骤如下:
(1)设计用户登录，效果如图所示
(2)创建一个表单，在表单中添加两个元素，既用户名（name）和密码（pwd）,以及两个图像域，既“登录”和“取消”，代码如下:
<form id="form1" name="form1" method="post" action="">
<table id="__01" width="452" height="255" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="7"><img src="images/dl_01.gif" width="452" height="81" alt="" /></td>
</tr>
<tr>
<td rowspan="3"><img src="images/dl_02.gif" width="59" height="173" alt="" /></td>
<td height="107" colspan="4" align="center" bgcolor="#FEF5CC"><table width="285" height="43">
<tr>
<td width="96">用户名：</td>
<td width="177"><label>
<input type="text" name="name" />
</label></td>
</tr>
<tr>
<td>密码：</td>
<td><label>
<input type="password" name="pwd" />
</label></td>
</tr>
</table></td>
<td colspan="2" rowspan="2"><img src="images/dl_04.gif" width="58" height="141" alt="" /></td>
</tr>
<tr>
<td><img src="images/dl_05.gif" width="92" height="34" alt="" /></td>
<td width="78" height="34"><input type="image" name="imageField" src="images/dl_06.gif" /></td>
<td width="83" height="34"><input type="image" name="imageField2" src="images/dl_07.gif" /></td>
<td><img src="images/dl_08.gif" width="82" height="34" alt="" /></td>
</tr>
<tr>
<td colspan="5"><img src="images/dl_09.gif" width="358" height="32" alt="" /></td>
<td><img src="images/dl_10.gif" width="35" height="32" alt="" /></td>
</tr>
<tr>
<td><img src="images/分隔符.gif" width="59" height="1" alt="" /></td>
<td><img src="images/分隔符.gif" width="92" height="1" alt="" /></td>
<td><img src="images/分隔符.gif" width="78" height="1" alt="" /></td>
<td><img src="images/分隔符.gif" width="83" height="1" alt="" /></td>
<td><img src="images/分隔符.gif" width="82" height="1" alt="" /></td>
<td><img src="images/分隔符.gif" width="23" height="1" alt="" /></td>
<td><img src="images/分隔符.gif" width="35" height="1" alt="" /></td>
</tr>
</table>
</form>
