跟我学做留言本(二)

上一次我们已经把留言本的功能，数据库，文件都设计好了，还写好了主文件index.asp里面的结构，现在
我们接着进行页面设计。
页面设计主要是设计网页的风格，除了CSS以外（上一次已经设计好了），还有如何安排要显示的内容。这个
部份就不多提了，主要是设计显示单个记录的表格，以及网页中的表单。把要显示的内容安排进去，同时要写好表单检查脚本
就好了。代码如下，其它部份的并没有改动。注：在设计页面的时候，我们同时确定变量。
输出网页标题部份：
<title><%=name&"留言薄"%></title>

在输出网页标题部份，我们确定了一个程序变量name表示留言本的名字

输出导航条部份：
<TABLE cellSpacing=0 cellPadding=1 width=650 align=center bgColor=#000000 border=0>
<TBODY>
<TR>
<TD>
<TABLE class=table002 cellSpacing=0 cellPadding=4 width=650 border=0>
<TBODY>
<TR>
<TD class=jnfont5 vAlign=center align=left><B>&gt;&gt; </B>
<A href="<%=homepage%>" title=返回主页>主页</A> |
<A href="index.asp?action=showmodify" title=编辑你的个人资料>修改资料</A> |
<%if session("lybmanage")="" then%>
<A href="index.asp?action=manage" title=回复或删除留言>留言管理</A>
<%else%>
<a href="index.asp?action=logout" title=退出管理模式>退出管理</a>
<%end if%>
</TD>
<TD class=jnfont5 vAlign=center align=right><%=name&"留言薄"%></TD>
</TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
<br>

在导航部份，我们确定了一个session变量"lybmanage"，用来判断是否登录；
另外确定三个传递的参数：manage和logout 来表示要登录和退出登录；
showmodify表示显示编辑留言本信息
还确定一个程序变量：homepage 表示主页的链接。

引用bottom.htm
<!--#include file="bottom.htm" -->



‘’显示留言记录
<TABLE cellSpacing=1 cellPadding=3 width=650 bgColor=#000000>
<TBODY>
<TR bgColor=#ffffff>
<TD class=table001 vAlign=top width=120 rowSpan=2>
<CENTER>
<TABLE class=jnfont7>
<FONT color=#ffffff>名字</FONT> <TBODY></TBODY>
</TABLE>
<IMG src="" border=0 width="82" height="90"> <BR>
来自- 地方
</CENTER>
</TD>
<TD class=table002 style="WORD-BREAK: break-all" vAlign=top width=530 height=105>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border="0">
<TR>
<TD width=26><IMG height=24 src="images/post.gif" width=24></TD>
<TD>留言内容:
<A title="给XXX发信" href="mailto:XXX的邮箱">
<IMG height=16 src="images/email.gif" width=16 border=0>信箱</A>
<A title="访问XXX的主页" href="" target=_blank >
<img height=16 src="images/homepage.gif" width=16 border=0>主页</a>
<A title="XXX的QQ号码：XXX"
href="http://search.tencent.com/cgi-bin/friend/user_show_info?ln=XXX" target=_blank>
<IMG height=16 src="images/oicq.gif" width=16 border=0>oicq</A>
<IMG height=15 alt="IP" src="images/ip.gif" width=16>
IP
</TD>
<TD width=80 align="center">第 XX 条 <a href="#top" title=回顶部>∧</a>
</TR>
</TABLE>
<HR SIZE=1>
留言内容 </TD>
</TR>
<TR class=table001>
<TD height=13 align="right">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<a href="index.asp?action=delete&id=XX">删除</a>
</td>
<td align="right">发表于: 发表时间
回复于:回复时间
</td>
</tr>
</table>

</TD>
</TR>
</TBODY>
<tr class=table002>
<td valign=top width=120>
<div align=center>版主回复<br>
<img src="images/repost.gif"
border=0 width="24" height="24"><br>
<table class=jnfont5>
版主昵称
</table>
</div>
</td>
<td width=530>
<table class=jnfont5>
回复内容
<tbody><tr><td><form onsubmit="return check(this)" action="index.asp" method="post">
<textarea class=testarea1 name="rep" cols="44" rows="5">回复内容</textarea>
<input type="hidden" name="action" value="replay">
<input type="hidden" name="id" value="id">
<script language="JavaScript">
function check(theForm)
{
if (theForm.rep.value == "")
{
alert("请输入回复内容!");
theForm.rep.focus();
return (false);
}
}
</script>
<input class=input2 type="submit" value="回复">
</form></td></tr></tbody>
</table>
</td>
</tr>
</TABLE>
<BR>

注：在这里我们先把所有要有的内容写出来，到后面再来更改。

我们来增加一个登录管理的表单:
<br>
<table cellspacing=1 cellpadding=0 width=200 align=center bgcolor=#000000
border=0>
<tbody>
<tr class=table003>
<td width="50%">
<table class=jnfont7 align=center>
<font color=#ffffff>管理员登录</font> <tbody></tbody>
</table>
</td>
</tr>
<tr class=table001>
<td valign=top width="50%">
<table cellspacing=1 cellpadding=0 width="100%" border=0>
<tbody>
<form name="login" onsubmit="return check2(login)" action="index.asp" method="post">
<tr>
<td class=jnfont3 width="100%">
<p align=center>用户名：
<input class=input1 maxlength=20 size=13 name="user">
<br>
密&nbsp; 码：
<input class=input1 type=password maxlength=20 size=13 name="pwd">
<br>
<input type="hidden" name="action" value="login">
<input class=input1 type=submit value=" 登 陆 ">
</p>
</td>
</tr>
<tr>
<td class=jnfont3 width="100%">
<p align=right>
<script language="JavaScript">
function check2(theForm)
{
if (theForm.user.value == "")
{
alert("请输入用户名!");
theForm.user.focus();
return (false);
}
if (theForm.pwd.value == "")
{
alert("请输入密码!");
theForm.pwd.focus();
return (false);
}
}
</script>
『<a href="index.asp">返回</a>』</p>
</td>
</tr>
</form>
</tbody>
</table>
</tr>
</tbody>
</table>


最后，增加一个修改留言本信息的表单
更改留言信息表单:
<table cellspacing=1 cellpadding=0 width=300 align=center bgcolor=#000000
border=0>
<tbody>
<tr class=table003>
<td width="50%">
<table class=jnfont7 align=center>
<font color=#ffffff>留言薄信息修改</font> <tbody></tbody>
</table>
</td>
</tr>
<tr class=table001>
<td valign=top width="50%">
<table cellspacing=1 cellpadding=0 width="100%" border=0>
<tbody>
<form onsubmit="return check(this)" action="index.asp" method="post">
<tr>
<td class=jnfont3 width="30%" align="right" height="15">用户名： </td>
<td class=jnfont3 width="70%" height="15">用户名 </td>
</tr>
<tr>
<td class=jnfont3 width="30%" align="right" height="15">密&nbsp; 码：
</td>
<td class=jnfont3 width="70%" height="15">
<input class=input1 type=password maxlength=20 size=13 name=pwd>
输入密码才能修改</td>
</tr>
<tr>
<td class=jnfont3 width="30%" align="right" height="15">新密码： </td>
<td class=jnfont3 width="70%" height="15">
<input class=input1 type=password maxlength=20 size=13 name=newpwd>
不改请留空</td>
</tr>
<tr>
<td class=jnfont3 width="30%" align="right" height="15">确定新密码： </td>
<td class=jnfont3 width="70%" height="15">
<input class=input1 type=password maxlength=20 size=13 name=newpwd2>
重输新密码</td>
</tr>
<tr>
<td class=jnfont3 width="30%" align="right" height="15">昵称： </td>
<td class=jnfont3 width="70%" height="15">
<input class=input1 type=text maxlength=20 size=13 name=nick value="昵称">
版主名字</td>
</tr>
<tr>
<td class=jnfont3 width="30%" align="right" height="15">姓名： </td>
<td class=jnfont3 width="70%" height="15">
<input class=input1
type=text maxlength=20 size=13 name=name value="留言本名字">
留言薄名字</td>
</tr>
<tr>
<td class=jnfont3 width="30%" align="right" height="15">主页： </td>
<td class=jnfont3 width="70%" height="15">
<input class=input1 type=text maxlength=100 size=30 name=homepage value="主页">
</td>
</tr>
<tr>
<td class=jnfont3 width="30%" align="right" height="15">每页显示： </td>
<td class=jnfont3 width="70%" height="15">
<select name="perpage">

</select>
条留言 </td>
</tr>
<tr>
<td class=jnfont3 width="100%" align="center" colspan="2" height="15">
<input type="hidden" name="action" value="modify">
<input class=input1 type=submit value=" 修 改 " name="submit">
</td>
</tr>
<tr>
<td class=jnfont3 width="100%" colspan="2">
<p align=right>
<script language="JavaScript">
function check(theForm)
{
if (theForm.pwd.value == "")
{
alert("请输入密码!");
theForm.pwd.focus();
return (false);
}
if (theForm.newpwd.value != "")
{
if (theForm.newpwd.value != theForm.newpwd2.value)
{
alert("两次输入的密码不相同!");
theForm.newpwd.focus();
return (false);
}
}
if (theForm.nick.value == "")
{
alert("请输入昵称!");
theForm.nick.focus();
return (false);
}
if (theForm.name.value == "")
{
alert("请输入姓名!");
theForm.name.focus();
return (false);
}
if (theForm.homepage.value == "")
{
alert("请输入您的主页!");
theForm.homepage.focus();
return (false);
}
}
</script>
『<a href="index.asp">返回</a>』</p>
</td>
</tr>
</form>
</tbody>
</table>
</tr>
</tbody>
</table>


完整的内容请看 http://hexi.vicp.net/zxks/lyb/index2.txt
效果：http://hexi.vicp.net/zxks/lyb/index.asp
下一篇，我们将完成所有的ASP代码。

原文转自：http://www.ltesting.net