细心一点的朋友也许会发现，在站点定义对话框上有两个标签：
"Base"和"Advanced"，其实用途是一样的，只不过"Base"是一步一步的向导模式，而"Advanced"是给对DW有一定了解的朋友用的高级模式，有兴趣的朋友可以自行切换到"Advanced"模式看看
在DW中新建一页（在"NewDocument"新文档对话框中选"ASPVBScript"类型的文档）（图16），存为index.asp，并修改页面标题为"留言板首页"（图17）
点击"Common"工具组里的表格图标（图18）（或者按Ctrl+Alt+T），插入一个5行1列的表格（记为表格1），设置如下：
选中表格，然后在属性面板中把它设置为居中对齐：
把光标定位到第一行的单元格后在属性面板中把它的高设为35：
同理把第二、四、五行单元格的高都设为20，再如法炮制，在属性面板里把第一行和第五行的单元格设置为水平居中对齐，第二行和第行的单元格为水平居右对齐：
然后在各单元格里写上文字，完成后如图：
可能会有朋友找不到那个版权符号的插入方法，顺便说一说。
有三种方法可以插入版权符号：
1）"Insert>>HTML>>SpecialCharacters>>Copyright"
2）在Text工具组里最右边的下拉选项里：
3）在源码状态下输入©
光标定位到第三行的单元格里，插入一个一行两列的表格（记为表格二），宽度设为100%，边框宽为1；左边单元格的宽度设为70，垂直居顶对齐，并插入一个两行一列的表格（记为表格三），完成后效果如图：
在新插入的表格
的第一个单元格里在按"Ctrl+Alt+I"插入一个头像（头像路径在留言板目录下images/icon里,在网上找的几个图片稍微加工了一下），并在第二个单元格里写上"访客昵称"，之后设置两个单元格的水平对齐方式均为居中：
现在只剩下一个很大的空白单元格了，这个就是我们用来显示访客留言及访客资料的区域，在这个单元格里插入一个三行一列的表格（记为表格四），写上文字、设置水平对齐方式、单元格高度后如图所示：
再插入一个显示留言内容和回复内容的两行两列的表格（记为表格五）到唯一空白的单元格里，写上文字并设置后效果如下：
最后是给"留言"、"查看"、"管理"这几个字分别加上链接（方法：
选中文字后在属性面板的Link输入框中输入链接地址）insert.asp、index.asp、login.asp
保存所有修改，在IE中输入http:
//localhost/guestbook/index.asp（或者http:
//localhost/guestbook/）看看你的成果：
是不是觉得很难看？
没关系，现在我们用CSS和图片简单修饰一下。
按"Shift+F11"展开CSS面板，点击图30中的加号按钮
在弹出的"NewCSSStyle"对话框中作如图31设置后单击"OK"，出现一个让你选择可在CSS文件的对话框，这里我们就保存为css.css（图32）
之后在弹出的"CSSStyleDefinitionforbodyincss.css"对话框中作如下两步设置：
保存css.css，可以明显的看到现在的index.asp好看多了，不过我们的美化页面工作还没完成，继续定义链接的CSS----单击图30中的加号按钮，在弹出的"NewCSSStyle"对话框中作如图35设置，单击"OK"按钮，再设置（图35）
刚才定义的是正常状态和点击之后的链接，现在再定义一下鼠标移上时的链接状态：
保存css.css，刷新浏览器中index.asp页，看看效果----好象还少点东西，表格线不是网上常见的那种细线，对不对？
好，我们现在就开始打造细线表格。
用DW打开css.css，在最后加上代码：
.thin{
border-collapse:
collapse;
}
现在css.css里的文件代码如下：
然后给需要做细线的表格（表格一、表格二、表格四和表格五）的table标签里加上class="thin"，给表格二、表格四和表格五的table标签里加上frame="void"，完成后代码大概如图40，在IE中看的效果如图41所示：
注意，这种方法制作的细线表格，必须保证有class="thin"、border="1"和bordercolor="#666666"（边框颜色，可以选择自己喜欢的颜色）三个属性，并且只适用于IE5.0+。
最后是给几个单元格加上背景图片和背景颜色，完成后在IE中的效果如图所示：
至此，显示留言页（index.asp）的前台部分全部完成
按Ctrl+F9展开服务器行为面板，看那四项中的前三项前是否有勾号，如果没有就是相应项在定义站点是没设置好，重做"DW的站点定义"那一步，然后开始创建记录集，有三种方法：
1）在服务器行为面板上单击"+"号
2）在插入菜单上"Insert>>ApplicationObjects>>Recordset"
3）在Application工具组里单击第一个图标：
因为我们还没连接过数据库，所以现在还需要定义连接数据库字符串。
在弹出的Recordset对话框中单击如图45所标的"Define..."按钮，再单击"ConnectionsforSite'guestbook'"对话框中的"New"按钮，在出现的下拉选项中选"CustomConnectionString"
现在是最关键的一步，在"CustomConnectionString"对话框中填写自定义字符串：
Connectionname一项填：
conn
Connectionstring一项填（注意要带双引号）：
"Provider=Microsoft.Jet.OLEDB.4.0;DataSource="&Server.MapPath（"/guestbook/data.mdb"）
再选中"Usingdriverontestingserver"
之后一路点"OK"或"Done"，回到图44所示的"Recordset"对话框，填写如下：
Name（记录集名称）：
rs
Connection（连接）：
conn
Table（表）：
main
Columns（字段）：
先选中"Selected"再按住Shift或Ctrl选择除ID以外的所有字段
Sort（排序）：
选择以"Data"字段内容的"Descending"（倒序）方式排序
确定后出现一个提示窗口，大概意思是"记录集已添加到该页，在绑定面板中可以访问该记录集的各字段"，选中"Don'tshowmeagain"后按"OK"
我们把头像地址跟数据库中的数据关联想来，也就是绑定ICON字段的数据到图片地址：
1）选中那个头像图片，单击属性面板中如图48所示的图标
2）在弹出的"SelectImageSource"对话框中的"Selectfilenamefrom"项选"Datasources"切换到从数据源选择图片源模式（图49）
3）先把URL那一栏的内容剪切，然后单击ICON字段，再把刚才的内容粘贴回来，修改成如图50所示
这样就完成了头像的绑定，自己对照一下绑定前后图片的路径。
是不是开始觉得有点意思了？
OK，不要停，继续绑定Name字段到头像下面的"访客昵称"：
1）选中"访客昵称"四字后按Ctrl+F10展开Bindings（绑定）面板
2）从中选择Name字段后单击下面的"Insert"按钮（图51）
3）这时在Name字段右方出现格式化的倒三角形，点击之后选择"Encode-Server.HTMLEncode"
同理把Name字段绑定到"访客发表于2003-9-274:
04:
49"中的"访客"上、Date字段绑定到"访客发表于2003-9-274:
04:
49"中的时间日期上、Content绑定到"留言内容“、Reply绑定到"回复内容"，在"回复内容"后软回车再绑定RDate字段：
仔细看看，好象还有"主页"、"信箱"和"QQ"未绑定数据。
按照我们的计划，这三组文字应该都是带链接的，而链接地址跟访客输入的相关资料绑定，其实这个跟绑定头像的方法有点相似：
1）选中"主页"，并单击属性面板中的"BrowseforFile"按钮,在弹出的"SelectFile"对话框中作如图54的设置后点"OK"，最后回到属性面板中把Target的值选为"_blank"，以在新窗口中打开访客主页
2）同理缩写"信箱"的链接，稍有不同的是信箱的链接前面需要加上"mailto:
"，如图55
3）做"QQ"的链接又跟前面的稍有不同，因为我们查看QQ用户的资料地址是
现在所有的数据都绑定完了，但是不要高兴得太早，这样的留言板永远只会显示一条留言记录，所以我们还需要设定重复域和翻页
1）光标定位到头像所在单元格内，然后点选表格二中的
，如图57所示2）按Ctrl+F9展开服务器行为面板，点击"+”按钮，在出现的下拉菜单中选择"RepeatRegion"，或者在"Application"工具组中点左起第四个图标，然后弹出"RepeatRegion"对话框，这里都用默认设置，所以直接点“OK”
3）选中表格二，然后应用服务器行为"ShowRegionIfRecordsetIsNotEmpty"，如图58
这是为了在数据库没有记录时不会出错的，相信在图58中大家也注意到了第一项的"ShowRegionIfRecordsetIsEmpty"，这个可以设置当数据库无记录时显示的内容。
数据记录多了之后肯定不能都让它们在一页里显示，所以我们还需要给显示留言加上翻页功能。
选择"首页"，按"Ctrl+F9"展开服务器行为面板，
单击上面的"+"号，在下拉菜单中选择"RecordsetPaging>>MoveToFirstRecordset"（图59），同理给"上页"、"下页"和"尾页"加上翻页功能，分别对应的服务器行为为"MoveToPreviousRecordset"、"MoveToNextRecordset"和"MoveToLastRecordset"，顺便说一下，这些服务器行为也可以在"Application"工具组里找到，而且还有一个直接插入"RecordsetNavigationBar"（导航栏），可以自己试试看跟我们刚才所做的有什么区别。
最后记住也给导航条应用"ShowRegionIfRecordsetIsNotEmpty"命令，没有记录的话翻页就用不着了。
做到这里，我们的留言板首页终于完成了，可以稍息一下，在IE中输入"http:
//localhost/guestbook"看看劳动成果......什么？
什么也没有？
当然了，因我们的数据库中还没记录，如果急着想看效果的话可以用ACCESS打开数据库直接添加记录
把index.asp另存为insert.asp，修改页面标题"留言板首页"为"填写留言"，删除一些表格，并在服务器面板中把除第一条Recordset（rs）以外的行为都选中后按上面的"-"号删除，完成后大概是这样：
光标定位到第三行的单元格里后点"Application"工具组里的"RecordInsertionFormWizard"图标（图63），弹出"RecordInsertionForm"对话框，删掉一些项，并作设置如下（没写的属性项均用默认值）：
Connection:
conn
Insertintotable:
main
Afterinserting,goto:
index.asp
Name{
Label:
昵称:
}
Email{
Label:
信箱:
}
Homepage{
Label:
主页:
Defaultvalue:
http:
//
}
QQ{
Submitas:
Numeric
}
Content{
Label:
内容:
Displayas:
Textarea
}
ICON{
Displayas:
Hiddenfield
Defaultvalue:
01
}
IP{
Displayas:
Hiddenfield
Defaultvalue:
<%=Request.ServerVariables（"REMOTE_ADDR"）%>
}
除了上面提到的，其它项按上面的"-"号删除，并通过上三角和下调整各项的顺序，填好后如图所示
到这里添加留言的页面在功能上已经完成了，下面是我调整一下表单项的位置并用CSS对文本框作了美化后的效果：
把头像图片所在的单元格的id设为icon（在单元格td标签内加上id="icon"），并添加下面的代码到css.css文件中：
input,textarea{
font-family:
Verdana,"宋体";
font-size:
12px;
background-color:
#DDDDDD;
height:
18px;
width:
150px;
border:
1pxsolid#333333;
}
textarea{
height:
120px;
width:
98%;
overflow:
hidden;
}
#iconimg{
margin:
2px;
cursor:
hand;
}
还有下面的脚本代码添加到insert.asp的head部分：
--
window.onload=function（）{//页面加载完毕时执行
varobj=document.form1;
obj.onmouseover=function（）{//表单项（文本框、多行文本框）在鼠标移上时变换背景颜色的函数（函数①）
if（event.srcElement.tagName=="INPUT"||event.srcElement.tagName=="TEXTAREA"）//判断当对象标签为input或textarea时执行
event.srcElement.style.backgroundColor="#EEEEEE";//对象背景颜色变换#EEEEEE
}
obj.onmouseout=function（）{//表单项（文本框、多行文本框）在鼠标移出时变换背景颜色的函数（函数②）
if（event.srcElement.tagName=="INPUT"||event.srcElement.tagName=="TEXTAREA"）//判断当对象标签为input或textarea时执行
event.srcElement.style.backgroundColor="#DDDDDD";//对象背景颜色变换#DDDDDD
}
icon.onclick=function（）{//单击头像图片时把图片名中的数字传递到隐藏域ICON的函数（函数③）
if（event.srcElement.tagName=="IMG"）
obj.ICON.value=event.srcElement.src.match（/（0[1-6]）（?
=\.jpg）/g）[0];//将所点击的图片路径地址中的01-06赋值给隐藏域ICON
}
obj.onsubmit=function（）{//验证表单的函数（函数④）
varerror=""
if（obj.Name.value==""）error+="●昵称项不能为空\n\n";
if（obj.Email.value==""）error+="●信箱项不能为空\n\n";
elseif（!
/^\w（\w*\.*）*@（\w+\.）+\w{2,4}$/.test（obj.Email.value））error+="●信箱格式不正确\n\n";
if（obj.Homepage.value!
=obj.Homepage.defaultValue&&!
/^（http:
\/\/[A-Za-z0-9\./=\?
%\-&_~`@[\]\':
+!
]+）$/.test（obj.Homepage.value））error+="●网址格式不正确\n\n"
if（obj.QQ.value!
=""&&!
/^[1-9]\d{4,8}$/.test（obj.QQ.value））error+="●QQ号码只能是5位到9位的数字\n\n"
if（obj.Content.value==""）error+="●留言内容不能为空\n\n";
elseif（obj.Content.value.length>1000）{error+="●留言字符长度超出1000";obj.Content.value=obj.Content.value.substring（0,1000）}
if（error!
=""）{alert（"错误提示：
\n\n"+error）;returnfalse;}
elsereturntrue;
}
}
//-->
如果不需要表单项在鼠标事件发生时变换背景颜色，可以去掉函数①和②，如果嫌手写表单验证的代码太累，可以去掉函数④，然后到下载一个叫checkForm的插件，找不到的话就从这个地址下：
展开阅读全文
相关搜索