1、第 13 课 插入留言记录课标理解“网络技术应用”模块介绍网络的基本功能和因特网的主要应用，是选修模块。通过本模块的学习，学生应掌握网络的基础知识和基本应用技能；掌握网站设计、制作的基本技术与评价方法；体验网络给人们的生活、学习带来的变化。本模块的教学，注重激发学生对网络技术和参与创造性活动的兴趣；结合实际条件，把网络技术基础知识和基本技能整合到学生的日常学习和生活中去，避免技术与应用、理论与实践相脱节；充分展示网络技术发展的指导思想，展示网络技术与现代社会生活的相互作用。本模块由 3 个单元组成，分别为：因特网应用、网络技术基础、网站设计与评价。网站设计与评价单元课标要求：（1）知道 WWW
2、、网页、主页、网站的基本概念及其相互关系。（2）理解动态网页的概念，能解释其工作过程。（3）能够根据表达任务的需求，使用常用的网页制作软件制作与发布动态网页。（4）通过开发实践，学会规划、设计、制作、发布与管理简单网站的基本方法。（5）能够根据网站主题要求设计评价指标，对常见网站的建设质量与运行状况进行评价。这一单元内容安排在教材的第五章网页及其制作工具与第六章网站设计与制作这二章中，为了完成这一部分内容的教学，我们一共设计了 10 个活动，分别是：第 1 课 发布自己的网站、第 9 课网页文件结构、第 10 课客户端动态技术、第 11 课服务器端动态技术、第 12 课建立数据库连接、第 13
3、 课插入留言记录、第 14 课显示留言记录、第 15 课留言记录的分页显示、第 16 课用户登录验证、第 17 课删除留言记录。信息技术是当今世界上发展最快的技术之一，而网络技术又是信息技术中发展最为活跃的领域之一。网络技术及其应用已经渗透到社会生活的各个方面，正在改变着人们传统的生活、学习和工作方式，人们足不出户就可以知道世界上发生的重大事情。网络使得地球变得越来越小，也使人们的生活节奏加快，它为数字化、信息化奠定了强有力的技术基础。第 1 课我们设计了一个名为“孤芳自赏在自己的计算机上发布网站”的实验任务。由于本节课是网络技术应用选修模块的第一课，怎样把学生吸引到网络技术的学习中来，是本课
4、的一个重要任务。因此本课在设计上既要与信息技术基础的必修课相联系，又要让学生为下一步学习网络技术作好铺垫。为此，该网络实验将学生在信息技术基础的必修课中制作的网页，通过进行适当的网络设置，将其发布在学生的本地计算机上。以了解Internet 信息服务（ IIS）的安装和设置，为后面的网络技术学习打下基础。第 9 课首先通过 FrontPage 的代码面板，针对只包含简单 HTML 元素的网页，让学生了解 HTML 文件的结构和基本的 HTML 元素。然后通过简单地修改相应的代码，产生神奇的网页效果，让学生进一步理解 HTML 代码及其作用，从而掌握基础的 HTML 元素及代码的编写方法。第10
5、 课在学生了解 HTML 元素的基础上，通过测试分析静态网页和客户端动态网页的特点，使学生了解静态网页、客户端动态技术的不同之处。并通过实践深入了解如何在网页上应用客户端动态技术。第 11 课通过在留言板进行留言的体验，让学生分析留言记录的存储和显示的过程，总结出服务器端动态技术的工作原理。然后，通过分析留言板中的数据项，进一步规划并创建留言板动态网站的数据库。第 12 课是学生制作动态网站的第一课，主要介绍动态网站开发基本环境的构建。本节课首先需要把站点目录设置为 IIS 虚拟目录，然后在 Dreamweaver 中定义站点。在搭建好环境的前提下，再进一步创建数据库连接，为后面的动态网站制作
6、做好准备。第 13 课在完成数据库连接的基础上，通过创建留言板的交互界面，掌握表单操作，理解表单控件一般的设置方法。然后，给表单添加“插入记录”的服务器行为，实现把表单数据插入到数据表相应的字段中。学生通过学习制作留言板递交的页面，掌握记录插入的方法，同时把所学技能应用到自己的交互页面制作中去。第 14 课是让学生能够把数据库中的留言信息，在网页中显示出来。首先需要设计一个显示留言信息的界面。然后定义一个记录集，并把记录集字段内容绑定到网页上，实现留言记录的显示，在拓展学习中，通过将留言内容中的空格符和换行符替换成“HTML 语言”标签，实现留言信息的正常显示。第 15 课通过设置显示数据表格
7、的重复区域，实现动态显示多条留言信息，并通过记录集分页技术显示所有的数据记录。第 16 课为了实现留言管理模块的用户登录验证。首先创建管理登录的表单，然后添加“用户登录”服务器行为，并对登录成功的管理页面设置“限制对页的访问”服务器行为，完成用户登录验证的功能。第 17 课是一个综合应用，主要完成管理模块的删除记录的功能。其中包括界面的设计、记录集的创建、重复区域的设置、记录分页的创建、记录删除管理功能的实现。通过这一节课的学习，学生系统体验了一个模块的制作，梳理了制作动态页面所需要的最基本的知识。为以后制作复杂的系统打下基础。教材分析一、本课概述在第 12 课完成数据库连接的基础上，本节课将
8、通过创建留言板的交互界面，掌握表单操作，理解表单控件一般的设置方法。然后，给表单添加“插入记录”的服务器行为，实现把表单数据插入到数据表相应的字段中。学生通过学习制作留言板递交的页面，掌握记录插入的方法，同时把所学技能应用到自己的交互页面制作中去。二、教学重点1掌握表单的制作。2理解“插入记录”服务器行为，掌握“插入记录”服务器行为的操作方法。三、教学难点能灵活应用“插入记录”的服务器行为。四、教学目标1知识与技能：（1）掌握留言表单的制作。（2）理解“插入记录”服务器行为的设置。2制作活动目标：利用“插入记录”服务器行为，制作留言板的留言功能，通过表单验证确保数据记录的规范。制作效果一、留言
9、界面效果二、表单验证效果教学过程一、问题引出1在完成了数据库连接后，如何实现将用户数据上传到数据库？2用户界面制作完成后，尝试着是否可以通过交互界面上传用户的数据。如果能够上传这是为什么？如果不能上传，又会是什么原因？二、知识点解析1表单：表单是用户与网页应用程序的接口，主要负责数据采集的功能。用户在表单中输入的数据后，按照一定的方式提交给后台程序处理，并将数据写入数据表当中。一个表单有三个基本组成部分：表单标签：包含了处理表单数据所用程序的地址，以及数据提交到服务器的方法。表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框等。表单按钮：包括提交按钮、复位按钮和一般按
10、钮；用于将数据传送到服务器上的脚本程序或者取消输入。2 “插入记录”的服务器行为：“插入记录”服务器行为实际上是获取表单中各个控件的值，然后将数据插入到数据表相应的字段中。3表单验证：表单验证是为了规范数据的输入，尽量得到我们想要的数据，防止故意或者过失错误输入垃圾数据。表单验证分为客户端验证和服务器端验证两种。客户端表单验证指对表单的验证在客户端完成，例如我们常用内嵌入 JavaScript 脚本程序验证表单数据是不是规范，它不需要占用服务器的资源。服务器端表单验证指对表单的验证在服务器端完成，它需要增加服务器资源的消耗。三、制作实例在完成建立数据库连接的基础上，创建留言版交互界面，实现把表
11、单数据插入到数据库中。1制作留言板页面。（1）在浏览器中输入 Last One 站点的地址，进入 Last One 站点的主界面。单击主界面右下角的“原创留言”按钮 ，出现 Last One 站点的留言板，如图 13-3-1 所示。1制作留言板界面 2添加“插入记录”行为图 13-3-1 Last one 站点的主界面（2）在 Last One 站点的中间有一个留言板，其调用的 ASP 页面效果如图 13-3-2 所示。图 13-3-2 留言版交互界面（3）在 Dreamweaver 中，新建一个 “ASP VBscript”类型的动态网页，并以“ly.asp”为文件名保存到“lastone”
12、目录下。（4）右击网页，在快捷菜单中选择“网页属性” 。在“网页属性”对话框中，设置网页属性“外观” ，如图 13-3-3 所示。并在“标题/编码”选项卡中，在“标题”栏中输入“Last One 留言板” 。单击“确定”按钮，完成页面设置。图 13-3-3 网页属性（5）单击表单工具栏上的“表单”按钮 ，在页面上插入一个“表单” 。在“属性”面板的“表单名称”栏目中输入“ly ”，如图 13-3-4 所示。图 13-3-4 插入表单（6）在表单中插入一个一行一列的表格，并设置表格的大小、边框、背景等属性。然后，在该表格中插入一个五行一列的表格，并设置表格和单元格属性，效果如图 13-3-5 所
13、示。图 13-3-5 表格框架（7）在第一行单元格中输入“Last One 留言板！欢迎留言！”的字样。在第二行单元格中输入“姓名（昵称） ”，然后在表单工具栏中单击“文本字段”按钮 ，插入一个文本字段控件，并在“属性”面板中更改文本域名称为“xm” ，字符宽度为“15” ，类型为“单行” ，如图 13-3-6 所示。图 13-3-6 插入姓名文本字段（8）在相应的单元格中，插入其他的表单控件，设置表单控件属性。表单控件属性如下表所示，制作的页面效果如图 13-3-7 所示。表单控件参数表控件 类型 名称 说明“姓名”对应的文本字段 文本字段 xm 字符宽度：15 类型：单行“身份”对应的列表
14、 列表 sf 类型：列表 列表值：男孩、女孩“QQ”对应的文本字段 文本字段 qq 字符宽度：12 类型：单行“留言标题”对应的文本字段 文本字段 lybt 字符宽度：50 类型：单行“留言内容”对应的文本区域 文本区域 lynr 字符宽度：60 类型：多行 行数：6“发表留言”对应的按钮 按钮 fbly 标签：发表留言 动作：提交表单“清除留言”对应的按钮 按钮 qcly 标签：清除留言 动作：重设表单图 13-3-7 界面效果2添加“插入记录”服务器行为。（1）在 Dreamweaver 的“应用程序 ”面板中，单击左边的 按钮，选择“插入记录”命令，如图 13-3-8 所示。图 13-3
15、-8 插入记录服务器行为（2）在出现的“插入记录”对话框中，设置各项参数，把表单元素和数据库的字段做对一一应，如图 13-3-9 所示。图 13-3-9 插入记录（3） “插入记录”服务器行为完成后，一个留言板页面就基本制作完成了。在Dreamweaver 中点击“预览在 iexplore”按钮 ，测试“ ly.asp”文件，就可发表留言，留言信息将被写入数据库相应的字段中，如图 13-3-10 所示。图 13-3-10 测试留言板页面效果拓展学习拓展一：表单验证在数据记录写入的过程中，如何确保数据记录的完整？当用户在没有输入姓名或标题等关键数据时，记录依旧会被写入数据库中，如何解决防止无效数
16、据输入的问题？在实际应用中，一般使用“检查表单”的行为来验证表单输入的完整性和正确性。在“ly”表单上，将“姓名（昵称） ”、 “留言标题” 、 “留言内容 ”对应的表单内容设置必需填写的内容，将“QQ 号”设置为数字等。1添加“检查表单”的行为。在“ly ”表单的“标签”面板中选择“行为”选项卡，单击 按钮，选择“检查表单”选项，如图 13-4-1 所示。图 13-4-1 检查表单命令2设置表单控件的值。在出现的“检查表单”对话框中，将“xm” 、 “lybt”、 “lynr”三个文本域控件“值”设置为“必需的” ；在“可接受”栏设置为 “任何东西” ；“QQ”文本域控件的“可接受”栏设置为
17、“数字” ，如图 13-4-2 所示。单击 “确定”按钮后成功添加了一个“检查表单”的行为。图 13-4-2 检查表单3更改“检查表单”行为的触发事件。选中“ly ”表单，在“标签”面板的“行为”选项卡中，选择触发的事件为“OnSubmit” ，如图 13-4-3 所示。注：OnSubmit 事件是表单上传按钮被单击时触发事件。图 13-4-3 更改“检查表单”行为的事件4测试检查表单行为。（1）在 Dreamweaver 中单击 “预览在 iexplore”按钮 ，测试设置了“检查表单”行为的留言板页面（ly.asp） 。（2）在留言板页面中试着发表没有“姓名”或“留言标题”的留言，系统将给出出错提示信息，如图 13-4-4 所示。这时，系统将不会递交表单中的数据。图 13-4-4 检查表单提示（3）同样地，在“QQ 号”中输入非数字的数据，系统也将给出出错提示信息而不递交表单中的数据。
