(教学课件)chapter15动态网页基础.pptx

1、网页设计与制作实用网页设计与制作实用教程（第教程（第3 3版）版）高等教育出版社高等教育出版社第15章 动态网页基础制作“在先留言”页面计 算 机 工 程 学 院 计 算 机 基 础 教 学部学习目标 了解动态网页技术的基本框架 了解数据库的基本概念 了解表单的基本作用 掌握Access数据库的基本操作方法 掌握表单和表单对象的基本操作方法 掌握设计和制作ASP动态网页的基本方法网 页 设 计 与 制 作 实 用 教 程（第 3 版）计算机工程学院计算机基础教研室实训项目为了提供多样化的沟通交流手段，需要设计一个“深圳慧衡科技有限公司”网站的二级页面“在线留言”，用户可以在页面中填写自己的邮件

2、地址以及需要向公司反馈的信息，这些信息在用户确认之后会在服务器上实时地记录下来，公司的客服就可以有针对性地与用户联系。网 页 设 计 与 制 作 实 用 教 程（第 3 版）计算机工程学院计算机基础教研室项目分析（1 1）设计思路：（1）数据存储：用户在线输入的留言等信息需要存储在硬盘等位置才能永久保存，数据库技术可以很好地存储和管理数据，基于数据量和安全性的考虑，采用Office套件中的Access数据库数据。（2）动态网页：在线留言的核心就是动态留言信息的实时存储，html静态网页无法实现此功能，需要引入动态网页技术，这里采用ASP VBScript网页。网 页 设 计 与 制 作 实 用

3、 教 程（第 3 版）计算机工程学院计算机基础教研室项目分析（2 2）设计思路：（3）页面元素：本页面的主要功能是实时收集动态信息，除了必要的文字外，主要是表单和表单对象。（4）版面布局：由于本页面包含标题、公司联系方式和在线留言需填写的信息等部分，在表单内使用表格快速地构建排列简单、规整的网页布局。（5）配色方案：本页面以功能性为主，风格和色彩搭配以简洁为基调，和整体网站风格保持基本一致。网 页 设 计 与 制 作 实 用 教 程（第 3 版）计算机工程学院计算机基础教研室设计目标网 页 设 计 与 制 作 实 用 教 程（第 3 版）计算机工程学院计算机基础教研室预备知识：动态网页技术（1

4、 1）在实际的网站建设中，除了完成精美的页面设计，还应该考虑信息采集、数据存取以及系统维护等方面的功能设计，例如，用户注册/登录、计数器、留言板、聊天室和BBS等，它们大都涉及到与数据库的交互，而这是用传统的网页设计语言或简单的客户端脚本所不能实现的，此时就需要动态网页技术。动态网页技术最明显的特点是网页在用户提出浏览请求后动态地生成，即页面内容动态化。随着时代的发展，许多网页文件已不仅仅是只能提供静态服务的.html文件，更多的是以.asp、.php、.jsp、.aspx为扩展名的文件，这些文件对应的网页就是动态网页。网 页 设 计 与 制 作 实 用 教 程（第 3 版）计算机工程学院计算

5、机基础教研室预备知识：动态网页技术（2 2）1动态网页的基本处理流程：（1）所谓“动态”，主要是针对网页构成的原理而言，在用户显示该页面之前，实际上该页面还不存在或页面的部分内容还没生成，当用户向服务器发出动态需求，服务器就根据用户的操作动态生成页面代码，并显示到用户的浏览器中。其基本处理流程如图所示。网 页 设 计 与 制 作 实 用 教 程（第 3 版）计算机工程学院计算机基础教研室预备知识：动态网页技术（3 3）1动态网页的基本处理流程：（2）动态网页是服务器端根据客户端（浏览器）的请求产生的页面，它会根据客户端不同的请求，在服务器端运行已经写好的代码，并完成与数据库的交互，处理完成后把

6、具有一定结果的页面发回给客户端浏览器。代码的运行实际上是在服务器端进行的，这个代码也叫脚本，称为服务器端脚本。网 页 设 计 与 制 作 实 用 教 程（第 3 版）计算机工程学院计算机基础教研室预备知识：动态网页技术（4 4）2ASP技术：（1）ASP是Microsoft公司推出的服务器端脚本运行环境，它置于IIS之中，通过ASP结合HTML网页、ASP指令和ActiveX组件，就可以建立动态、交互及高效的Web服务器应用程序。（2）ASP将标准的HTML文件拓展了一些附加特征，它和标准的HTML文件一样包含HTML对象并且在一个浏览器上解释和显示，任何可以放在HTML中的东西都可以放在AS

7、P中。（3）ASP可以和诸如Access、SQL Server等数据库进行连接，并可在其中使用SQL语言进行数据库处理。网 页 设 计 与 制 作 实 用 教 程（第 3 版）计算机工程学院计算机基础教研室预备知识：数据库技术（1 1）数据库技术产生于20世纪60年代末，其主要目的是有效地管理和存取大量的数据资源。它是信息系统的核心技术之一，作为一种计算机辅助管理数据的方法，它研究如何组织和存储数据、如何高效地获取和处理数据。目前，数据库软件有很多，常用的包括Oracle、SQL Server、MySql、Access等，其中，Microsoft Office Access是由微软发布的关系数

8、据库管理系统，它结合了 Microsoft Jet Database Engine 和 图形用户界面两项特点，是 Microsoft Office 中的一个成员。Access数据库是常用的轻量级的数据库，用来做小型动态网页开发和应用非常适合。网 页 设 计 与 制 作 实 用 教 程（第 3 版）计算机工程学院计算机基础教研室预备知识：数据库技术（2 2）1数据库结构：数据库（Database），数据库是相关数据的集合，数据库结构中包含数据表、记录、字段等部分。（1）数据表（Table)简称表，由一组数据记录组成，数据库中的数据是以表为单位进行组织的，一个数据库由一个或一组数据表组成。一个表是

9、一组相关的按行排列的数据，每个表中都含有相同类型的信息。表实际上是一个二维表格，例如，一个班所有学生的信息可存放在一个表中，表中的每一行对应一个学生，这一行包括学生的学号、姓名、性别及手机号码等信息。网 页 设 计 与 制 作 实 用 教 程（第 3 版）计算机工程学院计算机基础教研室预备知识：数据库技术（3 3）1数据库结构：（2）记录（Record）表中的每一行称为一个记录，它由若干个字段组成。（3）字段（Field）也称域，表中的每一列称为一个字段，每个字段都有相应的描述信息，如数据类型、数据宽度等。（4）主键（Key）表中经常有一列或多列的组合，其值能唯一地标识表中的每一行。这样的一列

10、或多列称为表的主键，通过它可强制表的实体完整性。网 页 设 计 与 制 作 实 用 教 程（第 3 版）计算机工程学院计算机基础教研室预备知识：数据库技术（4 4）2数据库连接：（1）ODBC（Open Database Connectivity，开放数据库互连）是微软公司开放服务结构中有关数据库的一个组成部分，它建立了一组规范，并提供了一组对数据库访问的标准API（应用程序编程接口）。ODBC的最大优点是能以统一的方式处理所有的数据库。（2）DSN（Data Source Name，数据源名称）是包含了有关某个特定数据库信息的数据结构，这个信息是开放式数据库连接驱动能够连接到数据库上必需的信

11、息。DSN存储在注册表或作为一个单独的文本文件，DSN里面包含的信息有名称、目录和数据库驱动器，以及用户ID和密码（根据DSN的类型）。（3）有三种类型的DSN：用户DSN、系统DSN和文件DSN。网 页 设 计 与 制 作 实 用 教 程（第 3 版）计算机工程学院计算机基础教研室预备知识：表单概述（1 1）（1）在开发动态网站时，表单及表单对象可以说是必不可少的，它通常用于收集客户端用户输入的信息，并提交到服务器进行处理。表单是实现网页上数据传输的基础，利用它可以收集不同类型的用户输入，使用户可以与网站进行交互。（2）当用户在浏览器中显示的表单中输入信息，然后单击按钮进行提交时，这些信息将

12、被发送到服务器，服务器中的服务器端脚本或应用程序会对这些信息进行处理。服务器向用户（或客户端）发回所处理的信息或基于该表单内容执行某些其他操作，以此进行响应。网 页 设 计 与 制 作 实 用 教 程（第 3 版）计算机工程学院计算机基础教研室预备知识：表单概述（2 2）（3）表单在网页中主要负责数据采集（示例如图所示），一个表单主要包括表单标签、表单域、表单按钮等三个基本组成部分。表单标签，包含了处理表单数据所用程序的URL以及数据提交到服务器的方法。表单域包含了文本字段、隐藏域、复选框等表单对象。表单按钮包括提交和复位按钮，用于将数据传送到服务器上或者取消输入，还可以用表单按钮来控制其他定

13、义了处理脚本的操作。（4）在Dreamweaver的“插入”面板 中，选择“表单”类，其中就包含了用于创建表单和用于插入表单对象的按钮，如图所示，通过这些按钮，可以向页面中插入表单及各种表单对象。网 页 设 计 与 制 作 实 用 教 程（第 3 版）计算机工程学院计算机基础教研室制作流程任务1：设计Access数据库任务4：添加表单和表单对象任务3：创建动态网页三任务2：设置数据源和默认网站任务5：添加服务器行为网 页 设 计 与 制 作 实 用 教 程（第 3 版）计算机工程学院计算机基础教研室任务1 1 设计ACCESSACCESS数据库网 页 设 计 与 制 作 实 用 教 程（第 3

14、 版）计算机工程学院计算机基础教研室1新建Access数据库2新建数据表3在数据表中添加记录STEP1：新建ACCESSACCESS数据库计算机工程学院计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）新建Access数据库“Hhkj.accdb”。STEP2：新建数据表计算机工程学院计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）在“Hhkj.accdb”数据库中新建数据表“Contact”。字段名称含义说明ID序号主键，自动增加的数值Username姓名不能为空，最多20个汉字Gender性别不能为空，男或女Email邮件地址不能为空，最多10

15、0个汉字Title标题不能为空，最多255个汉字Class分类不能为空，最多5个汉字Msg信息不限STEP3：在数据表中添加记录计算机工程学院计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）在“Contact”数据表中新增一条数据记录。任务2 2 设置数据源和默认网站网 页 设 计 与 制 作 实 用 教 程（第 3 版）计算机工程学院计算机基础教研室STEP：计算机工程学院计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）新建系统DSN“dsnHhkj”，用于连接“Hhkj.accdb”数据库。将默认网站（“Default Web Site”）的

16、物理路径设置为“D:huihengweb”（“慧衡科技”站点的根目录）。任务3 3 创建动态网页网 页 设 计 与 制 作 实 用 教 程（第 3 版）计算机工程学院计算机基础教研室1新建ASP页面2建立系统DSN连接3定义记录集STEP1：新建ASPASP页面计算机工程学院计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）在子文件夹w09下创建ASP VBScript动态网页“contact.asp”。STEP2：建立系统DSNDSN连接计算机工程学院计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）添加本地测试服务器“aspTest”，并建立系统

17、DSN连接“conHhkj”。STEP3：定义记录集计算机工程学院计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）添加记录集“rsHhkj”。任务4 4 添加表单和表单对网 页 设 计 与 制 作 实 用 教 程（第 3 版）计算机工程学院计算机基础教研室1创建表单2利用表格进行布局3插入表单对象STEP1：创建表单计算机工程学院计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）在“Contact.asp”页面中插入表单。STEP2：利用表格进行布局计算机工程学院计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）在表单中插入1

18、个8行1列的表格，要求表格宽度为770像素，边框粗细、单元格边距及单元格间距均为0，填充为10，居中对齐；表格第1、2行的效果如图所示。STEP3：插入表单对象计算机工程学院计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）在表格的第3行中，插入一个Spry验证文本域，用于用户姓名的输入和验证。在表格的第4行中，插入一个单选按钮组，用于用户性别的选择。在表格的第5行中，插入一个Spry验证文本域，用于电子邮件地址的输入和验证。在表格的第6行中，用相同的方法，插入一个Spry验证文本域，用于标题的输入和验证。在表格的第7行中，插入一个选择菜单，用于分类的选择。在表格的第8行

19、中，插入三个表单对象，一个是文本区域，用于信息的输入，另外两个是按钮，分别用于表单的提交和重置。任务5 5 添加服务器行为网 页 设 计 与 制 作 实 用 教 程（第 3 版）计算机工程学院计算机基础教研室STEP：计算机工程学院计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）添加“插入记录”服务器行为。项目总结计算机工程学院计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）课后练习1.1.配套实训配套实训设计和制作登录网页，效果如图所示。要求如下：设计Access数据库，用于存储用户账号和密码等数据。注：在数据表中插入一条记录作为测试数据。设置数据源以连接数据库，并配置本地网络作为动态网页的测试服务器。定义站点，新建ASP VBScript网页，在其中创建数据库连接和定义记录集。添加表单、表单对象以及服务器行为以实现登录功能。2.2.同步同步测试测试通过教材第章“同步测试”检验自己是否掌握了本章的相关知识点与技能点。网 页 设 计 与 制 作 实 用 教 程（第 3 版）计算机工程学院计算机基础教研室