网页设计综合应用技术_教学课件_苏智 张新华 模块五

在线教务辅导网： 教材其余课件及动画素材请查阅在线教务辅导网 QQ:349134187 或者直接输入下面地址： 模块五 ASP动态页面设计 网页设计综合应用技术 学习目标 1了解在Dreamweaver中制作动态网页的 常规步骤； 2了解表单及各个表单对象的作用； 3. 掌握连接数据库的两种方法； 4. 掌握表单的制作方法； 5. 掌握数据库中数据显示的页面和查询页面 的制作方法。 学习内容 工作任务一 创建ASP数据库连接 工作任务二 资讯列表显示页的制作 工作任务三 资讯详细信息显示页的制作 工作任务四 资讯信息查询功能的实现 工作任务一 创建ASP数据库连接 本工作任务要求了解连接数据库的两种方法， 并在 Dreamweaver 中创建本地 DSN连接。 【任务概述】 工作任务一 创建ASP数据库连接 ASP访问数据库的对象ADO 【核心知识】 Web应用程序ASP必须通过ODBC或ADO（ActiveX Data Objects，活动数据对象） 接口来访问数据库。 ODBC（Open Database Connectivity，开放式数据库连接）是数据库服务器的一个 标准协议，它向访问网络数据库的应用程序提供了一种通用的语言。 ADO是在Microsoft的新的数据库应用开发接口（API）OLE DB技术上实现的。 ADO是一个ASP内置的ActiveX服务器组件，通过创建直接的数据库特定的 OLE DB 连接，可以消除 Web 应用程序和数据库之间的 ODBC 层，从而提高连接的速度。 可与ASP结合，建立提供数据库信息的网页和对数据库进行查询、插入、更新、删除 等操作。 工作任务一 创建ASP数据库连接 为网站添加数据源 【核心知识】 一、创建本地 DSN连接 可以使用数据源名称（DSN） 在 Web 应用程序和数据库之间建立 ODBC 连接。 DSN 是一种名称，它包含使用 ODBC 驱动程序连接到指定数据库所需的全部参数。 工作任务一 创建ASP数据库连接 图5-1 【数据库】面板图5-2 【数据源名称（DSN）】对话框 图5-3 【ODBC数据源管理器】对话框 图5-3 【ODBC数据源管理器】对话框 图5-4 选择数据源类型 图5-5 【ODBC Microsoft Access安装】对话框 图5-6 选择数据库 图5-7 【ODBC数据源管理器】对话框 图5-8 【数据源名称 (DSN)】对话框 图5-9 文件面板 图5-10 数据库面板 工作任务一 创建ASP数据库连接 工作任务一 创建ASP数据库连接 可以使用非 DSN 连接在 Web 应用程序和数据库之间创建 ODBC 或 OLE DB 连接。方法如下： 1、在 Dreamweaver 中打开一个 ASP 页，选择“窗口数据库”， 打开“数据库”面板。 2、单击面板上的加号 (+) 按钮，然后从菜单中选择“自定义连 接字符串”，完成各个选项并单击“确定”。 图5-11 【自定义连接字符串】对话框 二、使用连接字符串创建连接 ASP简介 ASP文件是以.asp为扩展名的文本文件，这个文本文件可以包括文 本、HTML标记、脚本命令各部分的任意组合。ASP 不同于脚本语 言，它有自己特定的语法，所有的 ASP 命令都必须包含在 之内。如： ， ASP 通过包含在 中的表达式将执行结果输出到客户浏览器； 就是 将前面赋给变量 test 的值 English 发送到客户浏览器中，而当变量 test 的值为 Mathematics 时，以下程序： This weekend we will test . 在客户浏览器中则显示为： This weekend we will test Mathematics. 在ASP页面中添加服务器端脚本，可使用 LANGUAGE指令。格 式如下： 其中ScriptingLanguage参数是一个字符串，指定用于解释脚 本命令的脚本引擎，取值可以是“VBScript”或“JScript”，默认值为 VBScript。 在Dreamweaver中制作动态网页的常规步骤 设计页面 创建一个ASP动态网页最常用的方 法是创建一个显示内容的表格，然后将动 态内容导入该表格的一个或多个单元格中 ，这样可以用一种结构化的格式来表示各 种类型的信息。 2、创建动态内容源 图5-13 绑定面板 在Dreamweaver中制作动态网页的常规步骤 在Dreamweaver中制作动态网页的常规步骤 3、向 Web 页添加动态内容 Dreamweaver 的菜单驱动型界面使得添加动态 内容元素非常简单，只需从“绑定”面板中选择动 态内容源，然后将其插入到当前页面内的相应 文本、图像或表单对象中即可。 将动态内容元素或其它服务器行为插入到页面 中时，Dreamweaver 会将一段服务器端脚本插 入到该页面的源代码中。该脚本指示服务器从 定义的数据源中检索数据，然后将数据呈现在 该网页中。 在Dreamweaver中制作动态网页的常规步骤 4、向页面添加服务器行为 服务器行为是预定义的服务器端代码片段 ，这些代码向网页添加应用程序逻辑，从 而提供更强的交互性能和功能。 图5-14 服务器行为面板 工作任务二 资讯列表显示页的制作 【任务概述】 本工作任务要求掌握在Dreamweaver中制作动 态网页的常规步骤，并能在一个ASP网页上显 示数据库中的资讯标题列表。 图 5-12 资讯列表显示页 工作任务三 资讯详细信息显示页的制作 【任务概述】 本工作任务要求在资讯列表显示页 “list.asp”中点击相关的资讯标题链接到资 讯详细信息显示页“detail.asp”，显示资讯 的详细内容。 图5-30 详细页 工作任务四 资讯信息查询功能的实现 【任务概述】 本工作任务要求实现资讯信息的查询功能，即在表单中 输入查询关键字，提交后，将显示符合查询条件的相关 信息。该功能的实现主要有两个页面，一个是搜索页， 制作有表单，另一个是数据的显示页面。 图5-37 查询页 图5-38 查询结 果页面 小结 资讯信息查询功能主要有两个页面来实现， 一个页面是搜索页，制作有表单，并设置表单的提交； 另一个页面主要利用创建记录集并做了筛选设置，然后绑定相关字段、 创建【重复区域】服务器行为来来实现查询到的数据信息显示。并且， 在制作显示多条资讯的页面时，使用了【记录集导航条】来进行分页， 增加了【如果记录集为空则显示区域】服务器行为，使得资讯显示功能更加完善。 本模块讲解了在Dreamweaver中应用ASP技术制作资讯主页 和详细页及资讯信息查询功能实现的工作过程。 资讯主页和详细页是用于组织和显示记录集数据的页面集。这些页面 为访问者提供了概要视图和详细视图。主页中列出了所有记录并包含 指向详细