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