细心一点的朋友也许会发现,在站点定义对话框上有两个标签:
"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的插件,找不到的话就从这个地址下:
展开阅读全文
相关搜索