第12章 利用行为制作动态页面
合集下载
项目12 行为和制作动态网页-Dreamweaver CC 网页设计与制作-游琪-清华大学出版社
项目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）选择文档类型
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 CS4 动态效果网页制作
图10.5 “打开浏览器”对话框 步骤3：单击“浏览”按钮，选择要打开的文件或在文本框中输入 URL地址。 步骤4：在“窗口宽度”和“窗口高度”文本框中输入新浏览器窗口 的高度与宽度，单位是像素。 步骤5：在属性设置区域设置浏览器新窗口是否显示相应的元素。具 体设置如下。
“导航工具栏”：带有前进、后退、刷新等按钮的工具栏。 “菜单条”：提供菜单命令的工具栏。 “地址工具栏”：显示地址栏。 “状态栏”：在窗口底部显示状态信息，如：剩余加载时间、相关 URL链接等。 “需要时使用滚动条”：根据内容多少自动决定是否显示滚动条。 “调整大小手柄”：允许用户通过拖动窗口右下角来重新调整窗口 大小。 步骤6：在窗口名称文本框中输入相应的内容，单击“确定”按钮。 步骤7：检查添加行为动作的事件是否正确，若不正确，选择所需事 件。 步骤8：按F12键预览网页，效果如图10.6所示，单击下层浏览器的 小图片，弹出大图片的浏览器。
步骤 5：按F12键预览网页，当单击对象时，弹出信息框如图10.4所 示。
10. 3 为对象附加的行为
10 .4 弹出的信息框
提示：如果附加行为的对象是整个页面，事件可以设置为onLoad， 表示载入页面时即同时弹出信息框。
打开浏览器窗口
打开浏览器窗口行为，可以在一个新的窗口中打开指定的URL地址， 同时还可以指定打开浏览器窗口的属性，包括大小、名称等。例如 在单击图像缩略图时，用户可以使用该行为在一个新窗口打开对应 的大幅图像，并且使打开的窗口大小与图像大小适配。 如果不指定新窗口的尺寸，则打开的新窗口将与当前窗口属性一致。 如果指定了任何一个属性，将同时取消原来的其他继承属性。 实例预览：打开第10章“本章实例目录下的”“第10章\本章实例\ Open Brower \final\ Open Brower.htm”文件，单击图片可打开一个 新的窗口。 实例操作步骤如下： 步骤 1：打开“本章实例”目录下的“第10章\本章实例\ Open Brower \ Open Brower.htm”文件，选择要附加行为的对象，打开“行为” 面板。 步骤 2：单击“添加行为”按钮，从弹出的菜单中选择“打开浏览器 窗口”，这时会打开如图10.5所示的对话框。
中文版Dreamweaver8实用教程12Dreamweaver的常用内置行为
中文版Dreamweaver 8实用教程
er的常用内置行为
中文版Dreamweaver 8实用教程
13.2.1 认识行为
行为是Dreamweaver 中重要的一个部分，通过行为，用户可以方便地制作 出许多网页效果，极大地提高了用户的效率。行为由两个部分组成，即事件和 动作，通过事件的响应进而执行对应的动作。
中文版Dreamweaver 8实用教程
第13章 使用行为
行为是事件(Events)和动作(Actions)的结合物。Dreamweaver 中的行为， 是一系列 JavaScript 程序的集成，它包括两部分的内容，一部分是事件，另 一部分是动作。动作是特定的 JavaScript 程序，只要在事件发生(如单击鼠标， 或者页面装载)后，该动作(程序)就会自动运行。 在Dreamweaver 8中内置了多种行为，即使用户不熟悉JavaScript代码，也 可以构建交互式网页。
中文版Dreamweaver 8实用教程
13.3 上机实验
本章的上机实验主要练习对网页中的对象使用行为，其中综合设置 Dreamweaver的常用内置行为是重点。用户在使用行为的过程中要注意“行 为”面板中各项命令的使用方法和功能。对于本章中的其他内容，用户可根据 理论指导部分进行练习。 设置弹出信息 设置表单验证
中文版Dreamweaver 8实用教程
13.1 教学目标
掌握知识：通过本章的学习，读者应了解并掌握在页面中为对象设置行为 的方法，并能够使用Dreamweaver 8的内置行为。 重点学习：本章重点讲解了Dreamweaver行为的基本组成和在网页中为对 象设置内置行为的方法。课后读者应结合上机操作进行强化练习。
事件和动作 行为的应用 更改行为
《动态网页设计与制作实用教程(第二版)》-第12章
第12章 网页元素的添加与编辑 章
12.1.3 层叠样式（CSS）的应用 层叠样式（ ） 1．CSS样式概述 ． 样式概述 CSS样式表是一系列格式规则，它们控制网页内容的外观。使用 样式表是一系列格式规则， 样式表是一系列格式规则 它们控制网页内容的外观。使用CSS 样式可以非常灵活并更好地控制确切的网页外观， 样式可以非常灵活并更好地控制确切的网页外观，从精确的布局定位到特 定的字体和样式。 定的字体和样式。 CSS样式可以控制许多仅用 样式可以控制许多仅用HTML无法控制的属性。例如，可以指定 无法控制的属性。 样式可以控制许多仅用 无法控制的属性 例如， 自定义列表项目符号并指定不同的字体大小和单位（像素、点数等）。 自定义列表项目符号并指定不同的字体大小和单位（像素、点数等）。 CSS样式的主要优点是提供便利的更新功能；更新 样式的主要优点是提供便利的更新功能； 样式时， 样式的主要优点是提供便利的更新功能 更新CSS样式时，使用 样式时 该样式的所有文档的格式都自动更新为新样式。 该样式的所有文档的格式都自动更新为新样式。 2．创建新的 ．创建新的CSS样式 样式 样式” （1）单击“CSS样式”面板右上角的扩展按钮，选择下拉列表中的“新 ）单击“ 样式 面板右上角的扩展按钮，选择下拉列表中的“ 建” 菜单，打开“新建CSS规则”对话框。 规则” 菜单，打开“新建 规则 对话框。 样式输入或选择名称、 （2）为新建 ）为新建CSS样式输入或选择名称、标记或选择器。 样式输入或选择名称 标记或选择器。 定义在”区域选择定义的样式位置，可以是“新建样式表文件” （3）在“定义在”区域选择定义的样式位置，可以是“新建样式表文件” ） 或 仅对该文档” “仅对该文档”。 规则定义” 规则定义。 （4）“CSS规则定义”对话框中设置 ） 规则定义 对话框中设置CSS规则定义。主要分为类型、背 规则定义 主要分为类型、
《第12课 一触即发——应用行为创建动态效果》作业设计方案-初中信息技术清华大学版12八年级下册自编
《一触即发——应用行为创建动态效果》作业设计方案（第一课时）一、作业目标：1. 理解行为的概念，了解如何在信息课程中应用行为。
2. 学习并掌握创建动态效果的基本方法，提高操作技能。
3. 培养创新意识，发挥想象力，尝试应用不同的行为创建动态效果。
二、作业内容：任务一：动态按钮制作1. 打开所提供的素材文件，找到按钮元素。
2. 尝试使用“鼠标点击”行为来制作一个点击按钮时，会弹出一个提示框的动态效果。
3. 完成后保存作业文件。
任务二：动态文本框效果1. 找到文本框元素，尝试使用“改变文本”行为来制作文本框内容动态变化的动态效果。
2. 可以考虑时间间隔、文本内容以及如何触发这些变化。
3. 完成后保存作业文件。
任务三：分享你的作品将完成的作业文件通过班级群或指定邮箱进行分享，以便其他同学欣赏并评价你的作品。
三、作业要求：1. 严格按照提供的素材和步骤进行操作，确保完成的质量。
2. 操作过程中遇到问题，可参考教师提供的作业指导文档或在线教程，寻求解决方案。
3. 鼓励创新，尝试使用不同的行为和效果，展示自己的想象力。
4. 按时提交作业，确保教师能够及时评价和反馈。
四、作业评价：1. 教师将根据作业完成质量、创新性以及操作熟练程度，给予学生相应的评价分数。
2. 评价标准包括：操作是否正确、效果是否达到预期、是否具有创新性等。
3. 对于完成优秀的作品，教师将在班级群中给予表扬，并推荐至学校展示。
五、作业反馈：1. 学生可针对作业过程中遇到的问题、收获及建议，填写教师提供的反馈表格，提交给教师。
2. 教师将认真阅读学生的反馈，及时调整教学策略，以满足学生的学习需求。
3. 教师将定期收集学生的作业反馈，作为教学改进的依据，以提高教学质量。
通过本次作业，学生将能够：1. 理解和应用行为概念，掌握创建动态效果的基本方法；2. 提高操作技能，培养创新意识；3. 通过分享和评价作品，提高沟通能力和团队协作能力；4. 获得教师的及时反馈和指导，进一步巩固和提升信息技术技能。
网页制作教程项目五 网页动态效果的制作
•
动作：最终产生的动态效果，也就是浏览器完成的功能。
（一） 预备知识──行为
1. 添加行为 在添加行为时，首先应选中对象，然后选择【窗口】 /【行为】 命令打开【行为】面板，在【行为】面板中单击 按钮，在弹出 的行为菜单中选择相应的行为动作，最后在【行为】面板中单击 事件名右边的 按钮，在弹出的下拉菜单中选择相应的触发行为 动作的事件，如图5-2所示。
任务一
制作“翔翔写真”网页
制作“翔翔写真”网页，如图5-1所示。通过本实例的制， 掌握设置行为的基本方法。 （一） 预备知识──行为 （二） 任务实施──制作 “翔翔写真”网页 （三） 延伸阅读──事件和 动作
（一） 预备知识──行为
行为是Dreamweaver 8中内置的脚本程序，能够为网页增添许 多功能。行为通常由3部分组成，它们分别是对象、事件和动作。 • 对象：行为的主体，网页中的元素都可以成为对象，如文 本、图像等。 • 事件：触发动态效果的条件，如鼠标放在图像之上或网页 下载完毕时。
（一） 预备知识──行为
2. 常用行为 Dreamweaver 8内置了许多行为动作，下面对常用行为进行简 要介绍。 (1) 弹出信息 【弹出信息】行为将弹出一个提示对话框。在文档中选择要 触发行为的对象，然后从行为菜单中选择【弹出信息】命令，在 弹出的【弹出信息】对话框中进行参数设置即可，如图5-3所示。
（一） 预备知识──行为
在【行为】面板中将事件设置为【onMouseDown】，即鼠标 按下时触发该事件，如图5-4所示。在浏览网页时，用户可以在图 像上单击鼠标右键，在弹出的快捷菜单中选择【图片另存为】命 令，将网页中的图像下载到自己的计算机中。而当添加了这个行 为动作以后，当访问者单击鼠标右键时，将显示提示框而不是快 捷菜单，这样就限制了用户使用鼠标右键来下载图片，如图5-5所 示。
使用行为创建网页特效
四、恢复交换图像
9
“恢复交换图像”动作，指当鼠标指针移出对象区域后，所有被替换
显示的图像恢复为原始图像。一般在设置替换图像的动作时，会自
动添加替换图像恢复动作。如果在附加“交换图像”时选择了“鼠标滑
开时恢复图像”选项，则不需要手动选择“恢复交换图像”动作。
如果在设置“交换图像”动作时，没有选中“鼠标滑开时恢复图像”复
11
（3）将表格第2行单元格的背景颜色设置为粉红色（#FF6666），如图所示。 （4）在表格第2行单元格中输入导航文字，文字大小为12像素，颜色为白色，如图所示。 （5）执行“插入→表格”菜单命令，插入一个2行5列、宽度为600像素的表格，设置表格的边框粗 细、单元格边距和单元格间距均为0，在“属性”面板中将表格设置为“居中对齐”，如图所示。
URL”对话框。
第3步：在“打开在”列表框中选择打开链接的窗口。
第4步：在URL文本框中输入设置链接的URL地址，或单击
按钮来选择链接文档。
第5步：设置完成后单击
按钮，确认操作。
第6步：在“行为”面板上选择相应的事件。
30
二、打开浏览器窗口 使用“打开浏览器窗口”动作在一个新的窗口中打开URL。可以指定新窗口的属性（包括其大小）、 特性（它是否可以调整大小、是否具有菜单栏等）和名称。例如，可以使用此行为在访问者单击缩略 图时，在一个单独的窗口中打开一个较大的图像；使用此行为，可以使新窗口与该图像恰好一样大。 打开一个页面文档，单击“行为”面板中的 按钮，在弹出的“动作”快捷菜单中选择“打开浏览器窗 口”命令，打开如图所示的对话框，在“要显示的URL”文本框设置打开窗口中要显示网页的URL， 再设置弹出窗口的宽度和高度，在“属性”栏中可选择弹出窗口是否包括某些属性。
网页制作项目12使用行为完善网页功能--ppt.
弹出式菜单】对话框的设置。在行为菜单中选择【显示弹出式
菜单】命令可打开【显示弹出式菜单】对话框。
网页设计与制作
操作二
制作弹出式菜单
Dreamweaver 8
2.比较常用的事件
【onFocus】：当指定的元素成为访问者交互的中心时产生。例如，在一个文本 区域中点击将产生一个【onFocus】事件。 【onBlur】：【onFocus】事件的相反事件，该事件是指当前指定元素不再是访 问者交互的中心。例如，当访问者在文本区域内点击后再在文本区域外点击，浏
项目十二：
使用行为完善网页功 能
任务一 任务二 实 小 训 结
使用【打开浏览器窗口】动作将打开一个新的浏览器 窗口，在其中显示所指定的网页文档。用户可以指定这个 新窗口的属性，包括尺寸、是否可以调节大小、是否有菜 单栏等。例如，网页中的小图像需要放大时可以使用这个 动作。如果不对窗口的属性进行设置，它就会以 “640×480”像素大小的窗口打开，而且有导航栏、地址栏、 状态栏和菜单栏等。在行为菜单中选择【打开浏览器窗口】 命令可打开【打开浏览器窗口】对话框。
项目十二：
使用行为完善网页功 能
任务一 任务二 实 小 训 结
览器将为这个文本区域产生一个【onBlur】事件。 【onChange】：当访问者改变页面的一个数值时产生。例如，当访问者从菜单中 选择一条内容或改变一个文本区域的值，然后在页面的其他地方点击时，会产生 一个【OnChange】事件。
项目十二：
使用行为完善网页功 能
任务一 任务二 实 小 训 结
网页设计与制作
操作二
制作弹出式菜单
制作弹出式菜单操作动画
Dreamweaver 8
项目十二：
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
•检查表单：完成检查表单的动作。 •拖动层：控制层的位置。 •显示/隐藏层：完成显示或隐藏层的动作。 •调用JavaScript代码：
•显示弹出菜单 ：可以设置或修改弹出菜单的颜色、 文本和位置。
•检查插件：查看有无相关的插件。 •设置状态栏文字 ：在浏览器左下方的的状态栏上显 示一些信息。
总结：
3、关于表单的事件
onAfterUpdate更新表单文档的内容时发生的事件 onBeforeUpdate改变表单文档的项目时发生的事件 onChange访问者修改表单文档的初始值时发生的事件
onReset将表单文档重设置为初始值时发生的事件
onSubmit访问者传送表单文档时发生事件 onSelect访问者选定文本字段中的内容时发生的事件
二、事件
1、关于窗口的事件：
onAbort在浏览器中停止了加载网页文档的操作时发生的 事件
onMove移动窗口或者停顿时发生的事件
onLoad选定的对象出现在浏览器时发生的事件
onResize访问者改变窗口或帧的大小时发生的事件 Onload访问者退出网页时发生的事件
2、关于鼠标和键盘的事件
onClick用鼠标单击选定元素的一瞬间发生的事件 onBlur鼠标指针移动到窗口或帧外部，即在这种非激活状 态下发生的事件 onDragDrop拖动并放置选定元素的一瞬间发生的事件 onDragStart拖动选定元素的一瞬间发生的事件
2、动作
•播放声音：完成播放声音的动作。 •打开浏览器窗口：可以自行选择浏览器窗口中带菜单栏、 地址工具栏、状态栏等属性。 •弹出信息：用于弹出一个显示指定消息的JavaScript警告 对话框。 •改变属复交换图像：完成恢复交换图像的动作。
onError在加载文档的过程中，发生错误时发生的事件
onFilterChange运用于选定元素的字段发生变化时发生的 事件 onfinishMarquee用功能来显示内容结束时发生的事件 onstartMarquee开始应用功能时发生的事件
注作用对象： 1.页面元素或该元素对应的HTML标记，常用事件有 onMouseOver、onMouseOut和onClick三种 2.整个页面，常用的事件是onLoad
使用行为，可以使网页具有一些动感效果，这些动 感效果是在客户端实现的，访问者看到这些效果对些页 面加深印象，同时要注意上网助手对此页面的屏蔽作用。
课堂作业：
•下列关于行为的说法不正确的是_____。 A、行为即是事件，事件即是行为。
B、行为是事件和动作的组合。
C、行为是Dreamweaver预置的JavaScript程序库。 D、通过行为可以播放音乐、改变对象属性、打开浏览器。
onFocus鼠标指针移动到窗口帧上，即激活之后发生的事 件
onMouseDown单击鼠标右键一瞬间发生的事件
onMouseMove鼠标指针经过选定元素上方时发生的事件 onMouseOut鼠标指针经过选定元素之外时发生的事件 onMouseOver鼠标指针经过选定元素上方时发生的事件 onMouseUp单击鼠标右键，然后释放时发生的事件 onScroll访问者在浏览器上移动滚动条时发生的事件 onKeyDown在键盘上按住特定键时发生的事件 onKeyPress在键盘上按特定键时发生的事件 onKeyUp在键盘上按下特定键并释放时发生的事件
第12章 利用行为制作动态页面 （3课时）
教学目标：
• 掌握行为在网页中的使用 • 掌握利用行为制作网页动态效果
教学重难点：
• 利用行为制作网页动态效果
一、行为基础
行为：是事件和由该事件触发的动作的组合。 事件：是浏览器生成的消息。
注：行为和动作是Dreamweaver术语，而不是HTML术 语。从浏览器的角度看，动作与任何其他JavaScript代 码完全相同，它其实就是内置的JavaScript库 行为（Behavior）=事件（Event）+动作（ Action） 它其实就是内置的JavaScript库，即不用些代码就可实 现交互和网页的动态效果
•在Dreamweaver中打开“行为”面板的快捷键是______。
上机作业： 在网页页面中插入自带的行为，如：播放声音、打开浏览器窗口、 交换图像、显示/隐藏层、拖动层等。