当前位置: 王朝网络 >> html/css/js >> 用Dreamweaver设计留言板各页设计

用Dreamweaver设计留言板各页设计

王朝html/css/js·作者佚名 2006-11-24

窄屏简体版字體: 小|中|大|超大

用Dreamweaver MX 2004设计属于你自己的留言本（四）留言板各页设计①显示留言 ①显示留言

在DW中新建一页(在"New Document"新文档对话框中选"ASP VBScript"类型的文档)(图16)，存为index.asp，并修改页面标题为"留言板首页"(图17)

点击"Common"工具组里的表格图标(图18)(或者按Ctrl+Alt+T)，插入一个5行1列的表格(记为表格1)，设置如下：

选中表格，然后在属性面板中把它设置为居中对齐：

把光标定位到第一行的单元格后在属性面板中把它的高设为35：

同理把第二、四、五行单元格的高都设为20，再如法炮制，在属性面板里把第一行和第五行的单元格设置为水平居中对齐，第二行和第四行的单元格为水平居右对齐：

然后在各单元格里写上文字，完成后如图：

可能会有朋友找不到那个版权符号的插入方法，顺便说一说。有三种方法可以插入版权符号：

1)"Insert>>HTML>>Special Characters>>Copyright"

2)在Text工具组里最右边的下拉选项里：

3)在[url=http://www.pccode.net].net" class="wordstyle"源码状态下输入© 光标定位到第三行的单元格里，插入一个一行两列的表格(记为表格二)，宽度设为100%，边框宽为1；左边单元格的宽度设为70，垂直居顶对齐，并插入一个两行一列的表格(记为表格三)，完成后效果如图：

在新插入的表格

的第一个单元格里在按"Ctrl+Alt+I"插入一个头像(头像路径在留言板目录下images/icon里,在网上找的几个图片稍微加工了一下)，并在第二个单元格里写上"访客昵称"，之后设置两个单元格的水平对齐方式均为居中：

现在只剩下一个很大的空白单元格了，这个就是我们用来显示访客留言及访客资料的区域，在这个单元格里插入一个三行一列的表格(记为表格四)，写上文字、设置水平对齐方式、单元格高度后如图所示：

再插入一个显示留言内容和回复内容的两行两列的表格(记为表格五)到唯一空白的单元格里，写上文字并设置后效果如下：

最后是给"留言"、"查看"、"管理"这几个字分别加上链接(方法：选中文字后在属性面板的Link输入框中输入链接地址)insert.asp、index.asp、login.asp

用Dreamweaver MX 2004设计属于你自己的留言本（四）留言板各页设计②用CSS美化页面 ②用CSS美化页面

保存所有修改，在IE中输入http://localhost/guestbook/index.asp(或者http://localhost/guestbook/)看看你的成果：

是不是觉得很难看？没关系，现在我们用CSS和图片简单修饰一下。按"Shift+F11"展开CSS面板，点击图30中的加号按钮

在弹出的"New CSS Style"对话框中作如图31设置后单击"OK"，出现一个让你选择可在CSS文件的对话框，这里我们就保存为css.css(图32)

之后在弹出的"CSS Style Definition for body in css.css"对话框中作如下两步设置：

保存css.css，可以明显的看到现在的index.asp好看多了，不过我们的美化页面工作还没完成，继续定义链接的CSS----单击图30中的加号按钮，在弹出的"New CSS Style"对话框中作如图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)的前台部分全部完成

用Dreamweaver MX 2004设计属于你自己的留言本（四）留言板各页设计 ③连接数据库 ③连接数据库

按Ctrl+F9展开服务器行为面板，看那四项中的前三项前是否有勾号，如果没有就是相应项在定义站点是没设置好，重做"DW的站点定义"那一步，然后开始创建记录集，有三种方法：

1)在服务器行为面板上单击"+"号

2)在插入菜单上"Insert>>Application Objects>>Recordset"

3)在Application工具组里单击第一个图标：

因为我们还没连接过数据库，所以现在还需要定义连接数据库字符串。在弹出的Recordset对话框中单击如图45所标的"Define..."按钮，再单击"Connections for Site 'guestbook'"对话框中的"New"按钮，在出现的下拉选项中选"Custom Connection String"

现在是最关键的一步，在"Custom Connection String"对话框中填写自定义字符串：

Connection name一项填：conn

Connection string一项填(注意要带双引号)："Provider=Microsoft.Jet.OLEDB.4.0;Data Source="&Server.MapPath("/guestbook/data.mdb")

再选中"Using driver on testing server"

之后一路点"OK"或"Done"，回到图44所示的"Recordset"对话框，填写如下：

Name(记录集名称)：rs

Connection(连接)：conn

Table(表)：main

Columns(字段)：先选中"Selected"再按住Shift或Ctrl选择除ID以外的所有字段

Sort(排序)：选择以"Data"字段内容的"Descending"(倒序)方式排序

确定后出现一个提示窗口，大概意思是"记录集已添加到该页，在绑定面板中可以访问该记录集的各字段"，选中"Don't show me again"后按"OK"

用Dreamweaver MX 2004设计属于你自己的留言本（四）留言板各页设计 ④数据绑定④数据绑定