网页设计 - 万水书苑-出版资源网

全文

(1)第 10 章综合实例. 本章通过 HTML 标记、JavaScript 语言、Dreamweaver 8、Flash 8 和 ASP.NET 的综合实例，总结与回顾前面学过的知识，同时了解网页设计的流程和具体实现方法。. l. HTML 标记编辑网页的方法. l. JavaScript 实现动态网页的方法. l. Dreamweaver 8 的综合应用. l. Flash 8 的综合应用. l. ASP.NET 的基础应用. 10.1. HTML 标记的应用. 1．实例描述综合运用 HTML 标记，设计实现一个考试系统的登录页面，页面如图 10-1 所示。. 图 10-1 考试系统登录页面. 2．制作关键（1）总体页面用表格（<table>）布局，表格的背景颜色是#ffe6c1，边框颜色是#d98200，在. PDF created with pdfFactory Pro trial version www.pdffactory.com.

(2) 274. 单元格中嵌套考生登录表格。（2）页眉通过<img> 标记插入已经设计好的两幅图片 pic_exam_head1.gif 和 pic_exam_ 网页设计. head2.gif。（3）插入表单（<form>），表单中包含文本框、密码框、下拉列表框等表单元素。（4）考试须知内容以滚动字幕（<marquee>）的方式展示在页面中。（5）在页脚上填写版权信息，在管理员邮箱上建立电子邮件链接。 3．实现步骤（1）在“写字板”或“记事本”中编辑 HTML 标记和页面内容，如下所示： <html> <head> <title>考试系统</title> </head> <body leftMargin=0 topMargin=10> <table borderColor=#d98200 cellSpacing=0 cellPadding=0 width=773 align=center bgColor=#ffe6c1 border=1> <tr><td colspan=2 align=left> <img height=81 src="images/pic_exam_head1.gif" width=216 border=0> <img height=81 src="images/pic_exam_head2.gif" width=554 border=0> </td></tr> <tr><td width=40% valign=middle> <form name=fchkpass action=login.jsp method=post> <table borderColor=#ff9900 cellSpacing=1 cellPadding=0 width=240 align=center border=1> <tr align=middle> <td borderColor=#ffffff colSpan=2 height=15>考生登录</td></tr> <tr borderColor=#ffffff> <td align=middle width=160 height=21>准考证号</td> <td width=200><input size=18 name=std_no></td></tr> <tr borderColor=#ffffff> <td align=middle>考场密码</td> <td><INPUT type=password size=19 name=passwd> </td></tr> <tr align=middle borderColor=#ffffff> <td align=middle>考试科目 </td> <td align=left><select name=exam_no> <option value="" selected>请选择考试</option> <option value=81>大学计算机基础</option> <option value=20051211>C 语言程序设计</option> <option value=163>计算机硬件技术基础</option> </select> </td></tr> <tr> <td borderColor=#ffffff align=middle colSpan=2 height=30> <input type=submit value=确认>    <input type=reset value=清空> </td> </tr></table>. PDF created with pdfFactory Pro trial version www.pdffactory.com.

(3) 275. </form></td> <td width=60%> <marquee direction="up" behavior="scroll" loop="-1" ONMOUSEOUT=this.start(); ONMOUSEOVER=this.stop();> 考试须知：<br> 1．考生在上机考试时，应在规定的考试时间提前三十分钟到候考室报到，交验学生证和一卡通。 <br> 2．考生提前 5 分钟进入机房。<br> 3．在考试过程中若发生“死机”等异常现象，应举手示意与监考人员联系，不得擅自关机。<br> 4．不得擅自登录与考试无关的考号。<br> 5．不得擅自复制或删除与考试无关的目录和文件。<br> 6．考生不得在考场中交头接耳，大声喊叫等。<br> 7．迟到十分钟者取消考试资格。<br> </marquee> </td></tr> <tr><td colspan=2 height=60 align=center> 北京交通大学计算机与信息技术学院<br> Copyright© 2006-2010, All Rights Reserved.<br> 管理员 E-mail: <a href="mailto:abc@bjtu.edu.cn">abc@bjtu.edu.cn</a> </td></tr> </table> </body></html>. （2）将编辑好的文件保存在 D:\examples\chapter10 文件夹中，文件名字为 sl10-1.htm。同时在该文件夹下建立 images 子文件夹，将页面中的图片都保存在 images 文件夹中。（3）通过浏览器打开 sl10-1.htm，预览页面效果。. 10.2 JavaScript 的应用 1．实例描述综合运用 HTML 标记和 JavaScript 语言，设计实现一个能自动计算总价的订货表单页面。当用户在“数量”文本框中输入数量后，将自动计算出合计和总计。页面如图 10-2 所示。. 图 10-2 自动计算总和的订货表单. PDF created with pdfFactory Pro trial version www.pdffactory.com. 第 10 章综合实例.

(4) 276. 2．制作关键（1）制作包含表单的页面，表单中包含文本框和提交按钮等表单元素。网页设计. （2）调用“数量”文本框的 onChange 事件，当“数量”文本框内容被修改时，将自动计算合计和总计价格。（3）分别通过 UpdateCost()和 total()两个函数计算合计和总计，并把计算结果体现在“合计” 和“总计”文本框中。 3．实现步骤（1）在“写字板”或“记事本”中编辑页面内容、HTML 标记和 JavaScript 脚本，如下所示： <html> <head> <title>自动计算总和</title> <script language="JavaScript"> function total(){ var tot=0; tot += 23*document.form1.qty1.value; tot += 25*document.form1.qty2.value; tot += 33*document.form1.qty3.value; document.form1.totalcost.value = tot; } function UpdateCost(number,unicost){ costname = "cost"+number; qtyname = "qty"+number; var q = document.form1[qtyname].value; document.form1[costname].value=q*unicost; total(); } </script> </head> <body > <h2>订货表单</h2><hr> <form name="form1"> 《计算机网络应用教程》（23 元）数量：<input type="text" name="qty1" size="4" onChange="UpdateCost(1,23);" value="0"> 合计：<input type="text" name="cost1" size="6" value="0"><br> 《网页设计与制作教程》（25 元）数量：<input type="text" name="qty2" size="4" onChange="UpdateCost(2,25);" value="0"> 合计：<input type="text" name="cost2" size="6" value="0"><br> 《JavaScript 实战解析》（33 元）数量：<input type="text" name="qty3" size="4" onChange="UpdateCost(3,33);" value="0"> 合计：<input type="text" name="cost3" size="6" value="0"><hr> 总计：<input type="text" name="totalcost" size="8" value="0"><hr> <input type="submit" name="Submit" value="确定"> <input type="reset" name="Submit2" value="取消"> </form>. PDF created with pdfFactory Pro trial version www.pdffactory.com.

(5) 277. </body> </html>. （2）将编辑好的文件保存在 D:\examples\chapter10 文件夹中，文件名字为 sl10-2.htm。（3）通过浏览器，打开 sl10-2.htm，预览页面效果。. 10.3. Dreamweaver 8 的应用. 1．实例描述用 Dreamweaver 8 设计实现“计算机文化基础”网络课程页面，当鼠标放到导航图片上时进行图像切换，在单击“登录”按钮时，要先检查“用户名”和“密码“字段是否为空。页面效果如图 10-3 所示。. 图 10-3 “计算机文化基础”网络课程页面. 2．制作关键（1）根据页面的结构，确定页面布局，并用表格和跨行、跨列的单元格来实现。（2）设置文字、链接格式等页面属性。（3）通过插入“图像交换”行为，实现当鼠标放在左侧的导航栏上时，进行图片交换的效果。（4）在页面中插入表单及表单项，并设置表单及表单项的属性。（5）通过插入“表单检查”行为，在“登录”操作之前，对用户输入的用户名和密码信息进行检查。 3．实现步骤（1）裁剪页面效果图，制作页面元素，主要包括实现页面效果的图片文件，如页头图片、导航按钮图片等。（2）确定页面布局，根据效果图，用 5 行 3 列表格实现页面布局，如图 10-4 所示。. PDF created with pdfFactory Pro trial version www.pdffactory.com. 第 10 章综合实例.

(6) 278. 标题网页设计. 正文导航用户登录页脚图 10-4 页面布局图. （3）打开 Dreamweaver 8 窗口。运行“站点”菜单中的“新建站点”命令，建立名称为“计算机文化基础”站点；在“您是否打算使用服务器技术”对话框中，选择“否，我不想使用服务器技术”；设定本地根文件夹为 D:\examples\chap10；在“您如何连接到远程服务器”下拉列表框中选择“无” 。站点属性和站点文件结构分别如图 10-5 和图 10-6 所示。. 图 10-5 站点属性设置. 图 10-6 站点文件结构. （4）在站点上右击，选择“新建文件”命令，在站点根目录下建立名为 sl10-3.htm 的文件。双击该文件，开始对网页文件的编辑。（5）修改文档窗口的“标题”文本框，设定页面标题为“计算机文化基础网络课程”。运行“修改”菜单下的“页面属性”命令，在“外观”分类设置中，设定页面的默认字体为“宋体”，字号为 9pt，文字颜色为#000000，背景颜色为#FFFFFF；在“链接”分类设置中，设定“链接字体”为 “（为同页面字体） ” ，下划线样式为“始终无下划线”，并设定不同状态下链接文字的颜色。页面属性设置如图 10-7 所示。. 图 10-7 页面属性. PDF created with pdfFactory Pro trial version www.pdffactory.com.

(7) 279. （6）单击“插入工具栏”面板中的“表格”按钮，在页面中插入布局表格；选中页面中插入的表格，修改“属性”面板中的“对齐”属性为“居中对齐”；分别调整各列的宽度为 130、585 和 25 像素；按照页面布局图的样式合并相应单元格。此时的文档视图如图 10-8 所示。. 第 10 章综合实例. 图 10-8 插入布局表格的文档视图. （7）单击“插入工具栏”面板中的“图像域”按钮，在相应位置插入图片，文档视图如图 10-9 所示。. 图 10-9 插入图片的文档视图. （8）设置导航区单元格的对齐方式为“水平居中对齐”，“垂直顶端对齐”；在导航区插入一个 8 行 2 列的表格，宽度为 100%，边框粗细为 0，第一列宽度为 95%，第二列宽度为 5%，合并第二列的所有单元格；在每个单元格中插入相应的图片，文档视图如图 10-10 所示。. 导航区. 图 10-10 插入导航的文档视图. PDF created with pdfFactory Pro trial version www.pdffactory.com.

(8) 280. （9）选中导航栏中“课程指南”按钮，在“属性”面板的“链接”文本框中输入该按钮的链接目标文件；然后运行“窗口”菜单的“行为”命令，打开“行为”浮动面板；单击“添加行为” 网页设计. 按钮，选择弹出菜单中的“交换图像”命令，打开如图 10-11 所示的“交换图像”对话框；在“设定原始档为”文本框中，通过“浏览”按钮，选择一幅交换图像，并选中“预先载入图像”和“鼠标滑开时恢复图像”复选框。此时的“行为”面板如图 10-12 所示；依次为其他 6 个导航按钮设定交换图像。. 图 10-11 选择交换图像. 图 10-12 插入交换图像后的“行为”面板. （10）在“正文”单元格中，插入一个 1 行 1 列，宽度为 90%的表格，边框粗细为 0，设定表格对齐方式为“居中对齐” ；在新建表格的单元格中，录入相应文字。（11）下面将通过 CSS 调整文字的格式。运行“窗口”菜单下的“CSS 样式”命令，打开“CSS 样式”浮动面板；在“样式”上右击，在弹出菜单中选择“新建”命令，打开“新建 CSS 规则” 对话框；设定“选择器类型”为“类（可应用于任何标签）”， “名称”为“.w1”， “定义在”为“仅对该文档”，如图 10-13 所示，单击“确定”按钮，打开“.w1 的 CSS 规则定义”对话框；设定“字体”为“宋体” ， “大小”为“11 点数(pt)”， “粗细”为“粗体”， “行高”为“24 像素(px)”， “颜色” 为#000000， “修饰”为“无” ，如图 10-14 所示；选中需要调整格式的文字，从“属性”面板的“样式”下拉列表框中选择“w1” ；选中“计算机文化基础”几个字，修改字体颜色为#0000FF。. 图 10-13 “新建 CSS 规则”对话框. 图 10-14 CSS 规则定义. PDF created with pdfFactory Pro trial version www.pdffactory.com.

(9) 281. （12）在“用户登录”单元格中，插入一个 1 行 2 列，宽度为 476 像素的表格，边框粗细为 0，设定表格对齐方式为“居中对齐” ，背景颜色为#F7FBFE，调整各列的宽度分别为 336 像素和 140 像素；分别设定左右单元格的“背景”为相应的图片；设定右单元格的水平对齐方式为“居中对齐”，垂直对齐方式为“居中对齐” 。（13）单击“表单”面板中的“表单”按钮，在第二个单元格中插入表单，设定表单名称为 login，方法为 post；在表单中插入一个 3 行 2 列的表格，宽度为 95％，边框粗细为 0，调整各行的高度为 25 像素，合并第三行的两个单元格；在左列两个单元格中分别输入“用户名： ”和“密码：” ；第一行的右单元格插入一个文本字段，属性如图 10-15 所示；第二行的右单元格插入一个“文本域” 为 passwd、 “类型”为“密码”的文本字段；第三行插入两个按钮，其中第一个按钮的按钮名称为 Submit、 “值”为“登录” 、 “动作”为“提交表单”，第二个按钮的按钮名称为 Reset、 “值”为“清空”、“动作”为“重设表单” 。此时的登录单元格如图 10-16 所示。. 图 10-15 用户名字段属性设置. 图 10-16 用户登录单元格. （14）运行“窗口”菜单的“行为”命令，打开“行为”浮动面板；单击“添加行为”按钮，从弹出菜单中选择“检查表单”命令，打开“检查表单”对话框；设置 login 表单中的每个文本“值” 都是“必需的” ， “可接受”为“任何东西” ，如图 10-17 所示。表明当 userid 和 passwd 文本字段为空时，不能提交表单。. 图 10-17 “检查表单”对话框. （15）设置“页脚”单元格的水平对齐方式为“水平居中”；输入相应的文本，通过 Shift+Enter 组合键对文本进行换行；选中 test123@163.com，在“属性”面板中，设置“链接”为 mailto: test123@163.com。. PDF created with pdfFactory Pro trial version www.pdffactory.com. 第 10 章综合实例.

(10) 282. （16）单击“在浏览器预览/调试”按钮，或按 F12 键，在浏览器中预览页面效果，并通过 Dreamweaver 或对 HTML 源文件进行进一步调整。网页设计. （17）将站点中的所有内容发布到服务器上。. 10.4 Flash 8 的应用 1．实例描述用 Flash 8 设计实现蝴蝶飞舞的动画，插入背景音乐，并能控制动画的停止和播放。动画效果如图 10-18 所示。. 图 10-18 蝴蝶飞舞动画. 2．制作关键（1）根据收集的素材，制作类型为“影片剪辑”的元件，实现蝴蝶翅膀扇动的效果。（2）设置引导层，使蝴蝶沿着设定的路径飞行。（3）为动画加入背景音乐。（4）通过播放、停止按钮，控制动画的播放。 3．实现步骤（1）启动 Flash 8，新建一个 Flash 文件。选择“修改”菜单中的“文档”命令，打开“文档属性”对话框，设置“尺寸”为 500px×350px，“帧频”为 10fps。（2）选择“文件/导入/导入到库”命令，导入动画中涉及的素材为元件。（3）将“图层 1”重命名为“背景”；选中“窗口”菜单中的“库”命令，打开“库”面板，将库中的图形元件 flower.jpg 拖拽到工作区；调整图片元件的位置，将场景完全覆盖；在第 50 帧上右击，从弹出的菜单中选择“插入关键帧”命令，在第 50 帧处插入关键帧；在第 1 帧到第 50 帧之间的任意一帧上，右击，在弹出的菜单中选择“创建补间动画”命令，创建一个补间动画，如图 10-19 所示。（4）选择“插入”菜单下的“新建元件”命令，打开“创建新元件”对话框，设置新元件的 “名称”为“蝴蝶飞舞” ， “类型”为“影片剪辑”；单击“确定”按钮，进入影片剪辑元件编辑模式；打开“库”面板，将图形元件 butterfly1.png 拖拽到工作区；在第 5 帧处插入关键帧；在第 5 帧处，使用“选择”工具选中图形元件 butterfly1.png，在“属性”面板中单击“交换”按钮，弹出. PDF created with pdfFactory Pro trial version www.pdffactory.com.

(11) 283. “交换元件”对话框，选择图形元件 butterfly2.png；单击“确定”按钮，图形元件 butterfly1.png 将被替换成 butterfly2.png；在第 8 帧处右击，从弹出的菜单中选择“插入帧”命令，插入普通帧。. 第 10 章综合实例. 图 10-19 背景层的补间动画. （5）单击工作区中的“场景 1”按钮，返回场景编辑模式；单击“时间轴”面板中的“插入图层”按钮，新建一个图层，并命名为“蝴蝶”；选中“蝴蝶”图层的第 1 帧，将“库”面板中的 “蝴蝶飞舞”元件拖拽到场景左下方的位置。（6）在“蝴蝶”图层的第 50 帧处，插入关键帧，修改第 50 帧处的“蝴蝶飞舞”元件的位置为右上角；选中该图层第 1 帧到第 50 帧中的任意一帧，在“属性”面板的“补间”下拉列表框中选择“动作” ，创建动作补间动画；在“时间轴”面板中选择“蝴蝶”图层，单击“添加引导层” 按钮，为“蝴蝶”添加引导层；选中引导层的第 1 帧，使用“铅笔”工具画蝴蝶飞行的路径，如图 10-20 所示；选中“蝴蝶”图层第 1 帧，拖动“蝴蝶飞舞”元件，使其中心点与所画路径的起点重合；拖动最后一帧中的蝴蝶，使其中心点与路径的终点重合。. 图 10-20 蝴蝶飞行轨迹. （7）单击“时间轴”面板中的“插入图层”按钮，新建一个图层，并命名为“音乐”；选中“音乐”层的第 1 帧，展开“属性”面板，在“声音”下拉列表框中选择库中的声音文件，并设定“同步”效果为“数据流” ，如图 10-21 所示。. 图 10-21 音乐属性面板. PDF created with pdfFactory Pro trial version www.pdffactory.com.

(12) 284. （8）再添加一个新层，命名为“按钮”，用来放置控制按钮；选择“窗口”菜单中的“公用库 /按钮”命令，打开按钮库窗口；从 playback rounded 文件夹中选择 rounded green play（播放）和网页设计. rounded green stop（停止）按钮，拖拽到“按钮”图层的第 1 帧；选中按钮，在“属性”面板中调整按钮大小，宽为 56 像素，高为 44 像素；同时选中两个按钮，运行“窗口”菜单中的“对齐”命令，在打开的“对齐”对话框中，选择按钮的对齐方式为“底对齐”。（9）选中“播放”按钮，运行“窗口”菜单中的“动作”命令，打开“动作”面板；在脚本编辑区，输入如下语句： on (press) { gotoAndPlay(1); }. （10）选中“停止”按钮，运行“窗口”菜单中的“动作”命令，打开“动作”面板；在脚本编辑区，输入如下语句： on (press) { stop; }. （11）时间轴与场景的设计结果如图 10-22 所示。运行“控制”菜单的“测试影片”命令，查看动画效果。. 图 10-22 时间轴与场景的设计结果. （12）运行“文件”菜单下的“发布设置”命令，设定发布的文件类型为 Flash 和 HTML 两种；运行“文件”菜单下的“发布”命令；通过浏览器预览发布后的 HTML 文件，效果与图 10-18 相同。. 10.5. ASP.NET 的应用. 1．实例描述利用 ASP.NET，在 Visual Studio 2005 集成开发环境中，综合所学知识，制作一个简单的留言板。该留言板具有注册、登录、发布留言、查看留言等功能。. PDF created with pdfFactory Pro trial version www.pdffactory.com.

(13) 285. 2．制作关键第 10 章. （1）创建网站。（2）设计数据库。（3）设计页面布局，包括注册、登录、发布留言、查看留言等页面。. 综合实例. （4）添加代码，实现注册、登录、发布留言、查看留言等功能。 3．实现步骤（1）首先运行 Visual Studio 2005，选择“文件/新建/网站”命令，创建名字为 Example 的网站。然后在 Example 站点目录的 App_Data 文件夹下新建一个 Access 数据库，命名为 Ex.mdb，并在数据库中创建两个数据表。表结构如表 10-1 和表 10-2 所示。表 10-1 Users 表结构字段名称. 数据类型. 说明. UserID. 文本. 用户名称，主键. UserPass. 文本. 用户密码. Email. 文本. 用户的 E-mail. QQ. 文本. 用户的 QQ. MPhone. 文本. 用户的移动电话. 表 10-2 Message 表结构字段名称. 数据类型. 说明. ID. 自动编号. 消息的自动编号. Msg. 文本（255）. 用户的留言. UserID. 文本. 留言的用户. Time. 日期/时间. 留言的时间. （2）在 Visual Studio 2005 的“解决方案资源管理器”的方案上右击，在快捷菜单中选择“添加新项/Web 窗体”命令，修改名称为 Login.aspx，单击“添加”按钮，如图 10-23 所示。. 图 10-23 创建登录页面. PDF created with pdfFactory Pro trial version www.pdffactory.com.

(14) 286. （3）在 Login.aspx 页面中添加控件，所有控件均采用默认的 ID，修改“密码”文本框的 TextMode 属性为 Password。页面布局如图 10-24 所示。网页设计. 图 10-24 登录页面布局. （4）用同样的方法新建注册（Apply.aspx）、留言查看（Result.aspx）和发布留言（addMsg.aspx） 3 个页面，如图 10-25 至图 10-27 所示。其中 addMsg.aspx 中的文本框是一个多行文本框，只需修改其 TextMode 属性为 MultiLine。. 图 10-25 注册页面. 图 10-26 留言查看页面. 图 10-27 发布留言页面. PDF created with pdfFactory Pro trial version www.pdffactory.com.

(15) 287. （5）在 Result.apsx 页面中拖入“工具栏/数据”里的 AccessDataSource 控件和 DataList 控件， DataList 控件可以将 AccessDataSource 控件绑定的数据全部显示出来。在配置 AccessDataSource 控件时，选择 Message 表，并选中全部字段，因为在留言板中要列出所有信息。然后配置 DataList 控件，选择数据源为刚才配置好的 AccesDataSource1，立即看到 DataList 按照 Message 表的字段内容排列，只是没有数据，如图 10-28 所示。. 图 10-28 配置 DataList 控件. （6）单击“编辑模板”按钮，打开编辑窗口，对 DataList 的格式做细微的调整，如图 10-29 所示。. 图 10-29 模板编辑. （7）修改 Default.aspx 页面，添加“注册”、 “登录”、 “查看”3 个 HyperLink 控件。修改“注册”控件的 NavigateUrl 属性为~/Apply.aspx。其中“~”表示当前目录，即 Default.aspx 这个页面所在的目录。同样修改“登录”控件的 NavigateUrl 属性为~/Login.aspx，“查看”控件的 NavigateUrl 属性为~/Result.aspx，如图 10-30 所示。. 录. 图 10-30 设置 Default.aspx 页面. PDF created with pdfFactory Pro trial version www.pdffactory.com. 第 10 章综合实例.

(16) 288. （8）切换到 Apply.aspx 页面，在“注册”控件上添加代码，完成注册功能。添加的代码如下：网页设计. using System; using System.Data; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; using System.Data.OleDb; //应用 OleDb 类，用来连接 Access 数据库 public partial class Apply : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void Button2_Click(object sender, EventArgs e) { Response.Redirect("Default.aspx"); } protected void Button1_Click(object sender, EventArgs e) { if (TextBox1.Text != "" && TextBox2.Text != "" && TextBox3.Text != "" && TextBox4.Text != "" && TextBox5.Text != "") //判断是否信息完整 { OleDbConnection AccessConnection = new OleDbConnection(@"Provider=Microsoft.Jet.OLEDB.4.0; Data Source=E:\Example\App_Data\Ex.mdb;"); /*数据库的连接字符串。特别需要注意的是@符号，否则后面很长的字符串中很多处需要使用转义字符*/ string cmdStr = "Insert into Users([UserID],[UserPass],[Email],[QQ],[MPhone]) Values (@UserID,@UserPass,@Email,@QQ,@MPhone)"; //是这查询的字符串，Values 后面是待传入的参数列表，格式需要与前面一样 OleDbCommand AccessCmd = new OleDbCommand(cmdStr ,AccessConnection ); AccessCmd.Parameters.AddWithValue("@UserID", TextBox1.Text); //传出参数，前面是参数，后面是参数的值 AccessCmd.Parameters.AddWithValue("@UserPass", TextBox2.Text); AccessCmd.Parameters.AddWithValue("@Email", TextBox3.Text); AccessCmd.Parameters.AddWithValue("@QQ", TextBox4.Text); AccessCmd.Parameters.AddWithValue("MPhone", TextBox5.Text); //目前，数据并没有传入数据库，只是传入前的准备工作 AccessConnection.Open(); //打开数据库连接 try {. PDF created with pdfFactory Pro trial version www.pdffactory.com.

(17) 289. AccessCmd.ExecuteNonQuery(); /*真正开始执行这个 SQL 的插入语句，这个语句的功能是捕捉在运行期间的错误，如果 try{}之间的语句发生了错误，将执行 catch{}之间的语句，这样能对一些错误做好及时的处理。 */ } catch(Exception Err) { throw Err; } Response.Write("注册成功！"); AccessConnection.Close(); //关闭数据库连接 } else { Response.Write("请输入完整的信息！");. //在页面中输出提示信息. } } }. （9）切换到 Login.aspx 界面，编写如下代码： using System; using System.Data; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; using System.Data.OleDb; public partial class Login : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void Button1_Click(object sender, EventArgs e) { bool Flag=false; //用于表示用户是否登录 if (TextBox1.Text != "" && TextBox2.Text != "") { OleDbConnection AccessConnection = new OleDbConnection(@"Provider=Microsoft.Jet.OLEDB.4.0; Data Source=E:\Example\App_Data\Ex.mdb;"); string cmd = "select * from [Users]"; // 从数据库中筛选出所有数据 AccessConnection.Open(); OleDbDataAdapter AccessADP =. PDF created with pdfFactory Pro trial version www.pdffactory.com. 第 10 章综合实例.

(18) 290. new OleDbDataAdapter(cmd, AccessConnection);// AccessConnection.Close(); //连接完数据库一定要及时关闭 DataTable dt = new DataTable(); //创建数据表，用于存储取出的 Users 表 AccessADP.Fill(dt); //将数据填充至数据表中 if (dt.Rows.Count > 0) //判断这张表中是否有数据，有则进行比对 { for (int i = 0; i < dt.Rows.Count; i++) { /* 循环执行，判断用户名和密码是否正确*/ if ((TextBox1.Text == dt.Rows[i][0].ToString() ) && (TextBox2.Text == dt.Rows[i][1].ToString())) { Flag = true; Session["Login"] = TextBox1 .Text; // 用 Session 控制登录状态，相当于一个全局变量，整个网站的所有网页都能使用 Response.Redirect("addMsg.aspx"); // 登录成功后自动跳转到留言板页面 break; // 跳出循环 } } } if (!Flag) { Response.Write(" 用户名或密码错误！"); }. 网页设计. } else { Response.Write(" 请输入完整的数据！"); } } }. （10）编辑 addMsg.aspx 页面。 using System; using System.Data; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; using System.Data.OleDb;. PDF created with pdfFactory Pro trial version www.pdffactory.com.

(19) 291. public partial class addMsg : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (Convert.ToString(Session["Login"]) != "") { Response.Redirect("Login.aspx"); // 如果用户没有登录，则跳转到登录页面 } } protected void Button1_Click(object sender, EventArgs e) { if (TextBox1.Text != "") { OleDbConnection AccessConnection = new OleDbConnection(@"Provider=Microsoft.Jet.OLEDB.4.0; Data Source=E:\Example\App_Data\Ex.mdb;"); string cmd = "Insert Into Message([Msg],[UserID],[Time]) values(@Msg,@UserID,@Time)"; // 由于 Time 属于 Access 里的保留字，所以需要加上[]，Access 才能将其识别为一个字段 OleDbCommand AccessCmd = new OleDbCommand(cmd ,AccessConnection ); AccessCmd.Parameters.AddWithValue("@Msg",TextBox1 .Text ); AccessCmd.Parameters.AddWithValue("@UserID", Convert .ToString (Session["Login"])); AccessCmd.Parameters.AddWithValue("@Time", DateTime.Now.TimeOfDay ); //获取当前系统的时间 AccessConnection.Open(); try { AccessCmd.ExecuteNonQuery(); } catch (Exception Err) { throw Err; } AccessConnection.Close(); Response.Redirect("Result.aspx"); // 留言成功，直接跳转到结果页面 } else { Response.Write(" 请输入内容！"); } } }. 至此，留言板的注册、登录、发布留言和查看留言的功能就实现了，只要将所有页面发布到 IIS，就可以通过浏览器访问该留言板了。. PDF created with pdfFactory Pro trial version www.pdffactory.com. 第 10 章综合实例.

(20)