项目12 行为和制作动态网页-Dreamweaver CC 网页设计与制作-游琪-清华大学出版社
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
项目12 行为和制作动态网页
12.1
网页设计基础
项目描述
Dreamweaver中提供了“行为”技术，通过“行为” 技术能够在网页中自动生成JavaScript代码，可以实现 很多动态效果和交互功能，比如打开浏览器窗口、交 换图像等。Dreamweaver将所生成的代码自动和相应 的事件相联系，比如移动鼠标、单击鼠标等，即使不 懂JavaScript，通过行为也能够方便地制作出充满动感 和交互性的网页。
任务12.1 制作新闻列表页面
任务实现
1. 添加行为 ➢ （1）创建“最新资讯”页面。 ➢ 在Dreamweaver的主窗口中，在菜单栏依次选择【文件】→ 【新建】命令，在弹出的“新建文档”窗口中选择“模板 中的页”，在站点“珠海航展”的列表中选择已建立的模 板“index”，单击【创建】按钮，创建了一个基于index模板 的网页文档了，保存名称为“最新资讯”。 ➢ 在ID为left区域中输入文字“美媒声称中国军……国MQ-9" 死神"的仿制品。” ➢ （2）添加行为。
【 文 件 】→【 新 建 】 命 令 ， 新 建 一 个 名 为 “register.asp”的标准ASP文件。 （1）创建CSS样式 （2）导入CSS样式 <link href="../public/css/register.css" rel="stylesheet" type="text/css" />
12.9
网页设计基础
任务12.2 制作注册登录页面 （3）输入内容，效果如图12-9所示。
12.10
图12-9 注册页面效果图
网页设计基础
任务12.2 制作注册登录页面
2. 链接数据库 （1）选择文档类型
➢ 在Dreamweaver CC 2018窗口中，在菜单栏中单击【窗口】 →【扩展】命令，在弹出的“数据库”窗口中选择“2.选择 一种文档类型”，在弹出的【选择文档类型】中进行如图 12-10所示的选择后，单击【确定】按钮完成文档类型的选 择。
任务12.1 制作新闻列表页面 任务12.2 制作注册登录页面
12.4
网页设计基础
任务12.1 制作新闻列表页面
任务描述
在“珠海航空展”中的“最新资讯”页面中使用大量的行为和 spry构件来增加图片的动态效果，如图12-1所示。
12.5
图12-1 页面中添加了行为和spry构件的页面效果图
网页设计基础
12.14
图12-13 添加系统DSN
网页设计基础
任务12.2 制作注册登录页面
➢ 在弹出的窗口中进行如图12-14所示的选择。
12.15
图12-14 创建新数据源
网页设计基础
任务12.2 制作注册登录页面
（3）设置并测试数据源
➢ 在弹出的对话框中进行如图12-15所示的设置。
12.16
图12-15设置数据源
即可看到如图12-5所示的注册页面了。
12.18
网页设计基础
本章小结
网页中的行为，实际上是一段程序，用来完成某 些网页特效。本项目介绍了Dreamweaver中常见 行为使用。
动态网页是与静态网页相对应的，对于网站来说 ，动态网页主要能实现交互效果。本项目详细介 绍了动态网页的特征及相关技术、搭建服务器和 网页连接数据库的设计。
任务12.2 制作注册登录页面
➢ 弹出如图12-12所示的【数据源名称(DSN)】选项卡窗口， 在该窗口中单击【定义】按钮后，弹出如图12-13所示的界 面。
12.13
图12-12 选择数据源名称(DSN)
网页设计基础
任务12.2 制作注册登录页面
➢ 在该界面中选择【系统DSN】选项卡，在该选项卡中选择 【添加】按钮。
12.6
网页设计基础
任务12.1 制作新闻列表页面
➢ 在文档窗口中，选择【窗口】→【行为】命令打开【行为】 面板，单击添加行为按钮 ，在弹出的级联菜单中选择“弹 出信息”，在“弹出信息”窗口中输入文字“最新航展资 讯 ” ， 单 击 【 确 定 】 按 钮 ， 如 图 12-4 所 示 。 设 置 动 作 为 “onlick”。
12.19
网页设计基础
珠海航空展网站中提供了游客注册、登录功能，目的 是为了统计大家对航展的关注程度。
12.2
网页设计基础
知识目标：
教学目标
掌握行为在网页中的应用 掌握简单动态网页的制作 掌握搭建服务器平台
技能目标：
学会行为在网页中的合理应用 能够创建动态网页 能够搭建服务器平台
12.3
网页设计基础
项目任务
12.11
图12-10 选择文档类型
网页设计基础
任务12.2 制作注册登录页面
（2）选择数据源
➢完成了文档类型选择后，在【数据库】选项卡中出现如图 12-11中红色框中的黑色“十字”处于可选择状态，单击该 黑色十字右下角选择“数据源名称(DSN)”。
12.12
图12-11 选择数据源名称
网页设计基础
➢ 图12-4 设置弹出信息内容。
图12-4 设置弹出信息内容
12.7
网页设计基础
任务12.2 制作注册登录页面
任务描述
通过创建动态网页，通过搭建服务器平台和设计数 据库来完成的注册页面如图12-5所示。
图12-5 注册页面
12.8Biblioteka 网页设计基础任务12.2 制作注册登录页面
任务实现
1. 创建注册页面 打 开 Dreamweaver 的 设 计 界 面 。 在 菜 单 栏 依 次 单 击
网页设计基础
任务12.2 制作注册登录页面
➢ 单击“下一步”后，出现如图12-16所示的对话框，在该对 话框中选择“测试数据源”（测试数据源的选择是否正确 ），几分钟后弹出测试结果，如图12-17所示。
12.17
图12-16 测试数据源
图12-17 测试数据源结果
网页设计基础
任务12.2 制作注册登录页面 （4）预览注册页面 在浏览器地址栏中输入“http://localhost/register.asp”
12.1
网页设计基础
项目描述
Dreamweaver中提供了“行为”技术，通过“行为” 技术能够在网页中自动生成JavaScript代码，可以实现 很多动态效果和交互功能，比如打开浏览器窗口、交 换图像等。Dreamweaver将所生成的代码自动和相应 的事件相联系，比如移动鼠标、单击鼠标等，即使不 懂JavaScript，通过行为也能够方便地制作出充满动感 和交互性的网页。
任务12.1 制作新闻列表页面
任务实现
1. 添加行为 ➢ （1）创建“最新资讯”页面。 ➢ 在Dreamweaver的主窗口中，在菜单栏依次选择【文件】→ 【新建】命令，在弹出的“新建文档”窗口中选择“模板 中的页”，在站点“珠海航展”的列表中选择已建立的模 板“index”，单击【创建】按钮，创建了一个基于index模板 的网页文档了，保存名称为“最新资讯”。 ➢ 在ID为left区域中输入文字“美媒声称中国军……国MQ-9" 死神"的仿制品。” ➢ （2）添加行为。
【 文 件 】→【 新 建 】 命 令 ， 新 建 一 个 名 为 “register.asp”的标准ASP文件。 （1）创建CSS样式 （2）导入CSS样式 <link href="../public/css/register.css" rel="stylesheet" type="text/css" />
12.9
网页设计基础
任务12.2 制作注册登录页面 （3）输入内容，效果如图12-9所示。
12.10
图12-9 注册页面效果图
网页设计基础
任务12.2 制作注册登录页面
2. 链接数据库 （1）选择文档类型
➢ 在Dreamweaver CC 2018窗口中，在菜单栏中单击【窗口】 →【扩展】命令，在弹出的“数据库”窗口中选择“2.选择 一种文档类型”，在弹出的【选择文档类型】中进行如图 12-10所示的选择后，单击【确定】按钮完成文档类型的选 择。
任务12.1 制作新闻列表页面 任务12.2 制作注册登录页面
12.4
网页设计基础
任务12.1 制作新闻列表页面
任务描述
在“珠海航空展”中的“最新资讯”页面中使用大量的行为和 spry构件来增加图片的动态效果，如图12-1所示。
12.5
图12-1 页面中添加了行为和spry构件的页面效果图
网页设计基础
12.14
图12-13 添加系统DSN
网页设计基础
任务12.2 制作注册登录页面
➢ 在弹出的窗口中进行如图12-14所示的选择。
12.15
图12-14 创建新数据源
网页设计基础
任务12.2 制作注册登录页面
（3）设置并测试数据源
➢ 在弹出的对话框中进行如图12-15所示的设置。
12.16
图12-15设置数据源
即可看到如图12-5所示的注册页面了。
12.18
网页设计基础
本章小结
网页中的行为，实际上是一段程序，用来完成某 些网页特效。本项目介绍了Dreamweaver中常见 行为使用。
动态网页是与静态网页相对应的，对于网站来说 ，动态网页主要能实现交互效果。本项目详细介 绍了动态网页的特征及相关技术、搭建服务器和 网页连接数据库的设计。
任务12.2 制作注册登录页面
➢ 弹出如图12-12所示的【数据源名称(DSN)】选项卡窗口， 在该窗口中单击【定义】按钮后，弹出如图12-13所示的界 面。
12.13
图12-12 选择数据源名称(DSN)
网页设计基础
任务12.2 制作注册登录页面
➢ 在该界面中选择【系统DSN】选项卡，在该选项卡中选择 【添加】按钮。
12.6
网页设计基础
任务12.1 制作新闻列表页面
➢ 在文档窗口中，选择【窗口】→【行为】命令打开【行为】 面板，单击添加行为按钮 ，在弹出的级联菜单中选择“弹 出信息”，在“弹出信息”窗口中输入文字“最新航展资 讯 ” ， 单 击 【 确 定 】 按 钮 ， 如 图 12-4 所 示 。 设 置 动 作 为 “onlick”。
12.19
网页设计基础
珠海航空展网站中提供了游客注册、登录功能，目的 是为了统计大家对航展的关注程度。
12.2
网页设计基础
知识目标：
教学目标
掌握行为在网页中的应用 掌握简单动态网页的制作 掌握搭建服务器平台
技能目标：
学会行为在网页中的合理应用 能够创建动态网页 能够搭建服务器平台
12.3
网页设计基础
项目任务
12.11
图12-10 选择文档类型
网页设计基础
任务12.2 制作注册登录页面
（2）选择数据源
➢完成了文档类型选择后，在【数据库】选项卡中出现如图 12-11中红色框中的黑色“十字”处于可选择状态，单击该 黑色十字右下角选择“数据源名称(DSN)”。
12.12
图12-11 选择数据源名称
网页设计基础
➢ 图12-4 设置弹出信息内容。
图12-4 设置弹出信息内容
12.7
网页设计基础
任务12.2 制作注册登录页面
任务描述
通过创建动态网页，通过搭建服务器平台和设计数 据库来完成的注册页面如图12-5所示。
图12-5 注册页面
12.8Biblioteka 网页设计基础任务12.2 制作注册登录页面
任务实现
1. 创建注册页面 打 开 Dreamweaver 的 设 计 界 面 。 在 菜 单 栏 依 次 单 击
网页设计基础
任务12.2 制作注册登录页面
➢ 单击“下一步”后，出现如图12-16所示的对话框，在该对 话框中选择“测试数据源”（测试数据源的选择是否正确 ），几分钟后弹出测试结果，如图12-17所示。
12.17
图12-16 测试数据源
图12-17 测试数据源结果
网页设计基础
任务12.2 制作注册登录页面 （4）预览注册页面 在浏览器地址栏中输入“http://localhost/register.asp”