《网页设计综合应用技术》模块五.ppt

《《网页设计综合应用技术》模块五.ppt》由会员分享，可在线阅读，更多相关《《网页设计综合应用技术》模块五.ppt（19页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、模块五模块五 ASP动态页面设计动态页面设计网页设计综合应用技术网页设计综合应用技术学习目标1了解在Dreamweaver中制作动态网页的常规步骤；2了解表单及各个表单对象的作用；3.掌握连接数据库的两种方法；4.掌握表单的制作方法；5.掌握数据库中数据显示的页面和查询页面的制作方法。学习内容工作任务一 创建ASP数据库连接 工作任务二 资讯列表显示页的制作 工作任务三 资讯详细信息显示页的制作工作任务四 资讯信息查询功能的实现 工作任务一 创建ASP数据库连接 本工作任务要求了解连接数据库的两种方法，并在 Dreamweaver 中创建本地 DSN连接。【任务概述任务概述】工作任务一 创建A

2、SP数据库连接 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 层，从而提高连接

3、的速度。可与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

4、 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 【自定义连接字符串】对话框二、使用连接字符串创建连

5、接ASP简介 ASP文件是以.asp为扩展名的文本文件，这个文本文件可以包括文本、HTML标记、脚本命令各部分的任意组合。ASP 不同于脚本语言，它有自己特定的语法，所有的 ASP 命令都必须包含在 之内。如：，ASP 通过包含在 中的表达式将执行结果输出到客户浏览器；就是将前面赋给变量 test 的值 English 发送到客户浏览器中，而当变量 test 的值为 Mathematics 时，以下程序：This weekend we will test.在客户浏览器中则显示为：This weekend we will test Mathematics.在ASP页面中添加服务器端脚本，可使用

6、LANGUAGE指令。格式如下：其中ScriptingLanguage参数是一个字符串，指定用于解释脚本命令的脚本引擎，取值可以是“VBScript”或“JScript”，默认值为VBScript。在Dreamweaver中制作动态网页的常规步骤 1.设计页面 创建一个ASP动态网页最常用的方法是创建一个显示内容的表格，然后将动态内容导入该表格的一个或多个单元格中，这样可以用一种结构化的格式来表示各种类型的信息。2、创建动态内容源图5-13 绑定面板在Dreamweaver中制作动态网页的常规步骤 在Dreamweaver中制作动态网页的常规步骤3、向 Web 页添加动态内容Dreamweav

7、er 的菜单驱动型界面使得添加动态内容元素非常简单，只需从“绑定”面板中选择动态内容源，然后将其插入到当前页面内的相应文本、图像或表单对象中即可。将动态内容元素或其它服务器行为插入到页面中时，Dreamweaver 会将一段服务器端脚本插入到该页面的源代码中。该脚本指示服务器从定义的数据源中检索数据，然后将数据呈现在该网页中。在Dreamweaver中制作动态网页的常规步骤4、向页面添加服务器行为服务器行为是预定义的服务器端代码片段，这些代码向网页添加应用程序逻辑，从而提供更强的交互性能和功能。图5-14 服务器行为面板工作任务二 资讯列表显示页的制作【任务概述】本工作任务要求掌握在Dream

8、weaver中制作动态网页的常规步骤，并能在一个ASP网页上显示数据库中的资讯标题列表。图 5-12 资讯列表显示页 工作任务三 资讯详细信息显示页的制作【任务概述】本工作任务要求在资讯列表显示页“list.asp”中点击相关的资讯标题链接到资讯详细信息显示页“detail.asp”，显示资讯的详细内容。图5-30 详细页 工作任务四 资讯信息查询功能的实现【任务概述】本工作任务要求实现资讯信息的查询功能，即在表单中输入查询关键字，提交后，将显示符合查询条件的相关信息。该功能的实现主要有两个页面，一个是搜索页，制作有表单，另一个是数据的显示页面。图5-37 查询页 图5-38 查询结果页面小结

9、资讯信息查询功能主要有两个页面来实现，一个页面是搜索页，制作有表单，并设置表单的提交；另一个页面主要利用创建记录集并做了筛选设置，然后绑定相关字段、创建【重复区域】服务器行为来来实现查询到的数据信息显示。并且，在制作显示多条资讯的页面时，使用了【记录集导航条】来进行分页，增加了【如果记录集为空则显示区域】服务器行为，使得资讯显示功能更加完善。本模块讲解了在Dreamweaver中应用ASP技术制作资讯主页和详细页及资讯信息查询功能实现的工作过程。资讯主页和详细页是用于组织和显示记录集数据的页面集。这些页面为访问者提供了概要视图和详细视图。主页中列出了所有记录并包含指向详细页的链接，而详细页则显示每条记录的附加信息。其中制作主页资讯列表显示页主要利用创建记录集，然后绑定相关字段，最后创建【重复区域】和【转到详细页面】服务器行为来实现。制作资讯详细信息显示页主要利用创建记录集并做了筛选设置，然后绑定相关字段来实现某个选定资讯的详细内容的显示。网页设计综合应用技术网页设计综合应用技术