网页设计与制作项目教程（第四版） 模块08运用“行为”功能提升用户体验

网页设计与制作项目教程（第四版）模块08运用“行为”功能提升用户体验教学课件教学目标：学习、能力与素养学习目标素养目标•理解“行为”在动态网页中的作用。•掌握“行为”实现交互的基本原理。•熟练运用内置“行为”工具。•用户体验意识：主动从用户角度设计交互。•问题解决能力：学会分析行为失效原因。•创新思维：创造独特视觉交互。教学要求：知识要点与关联知识知识要点能力要求关联知识“行为”在网页中的作用了解实现特定的人机交互效果“行为”实现的基本原理理解事件与动作的关联设计提升用户体验掌握零代码实现交互页面制作任务引领1：川剧“变脸”特效任务说明：网页显示“川剧变脸艺术”图文信息，图像需随鼠标所在位置产生实时切换效果。鼠标移入图像区域时，图像瞬间变换为另一张脸谱。核心交互1.鼠标悬停事件触发

2.执行“交换图像”动作

3.鼠标移出自动恢复原始图步骤1：创建站点与Bootstrap布局•环境准备：创建images文件夹，存放face_01.jpg等变脸素材。•新建网页：HTML->BOOTSTRAP->新建CSS->命名。•布局设计：为什么要用栅格？响应式布局确保交互效果在不同屏幕下均能精准定位图片位置。○拖拽Container容器。○插入GridRowwithcolumn(1行2列)。○第1列添加类居中。○第2列添加标题文字“川剧变脸艺术”。步骤2：寻找入口与选择动作•1.在第1列插入初始图像。•2.打开行为面板：菜单“窗口”->“行为”。•3.关键点：必须先点击选中网页中的该图片。•4.添加行为：点击面板加号“+”，

在下拉菜单中选择。步骤3：配置交换参数与预览•1.交换图像对话框：点击“浏览”选择变脸后的新脸谱图像文件。•2.必选参数：勾选“预先载入图像”（防止悬停时闪白）和“鼠标移出时恢复图像”。•3.最终检查：观察行为面板是否出现对应的交换图像动作。•4.预览：保存网页，按F12测试动态变脸效果。深度理论：行为=事件+动作事件(Event)+动作(Action)=行为(Behavior)注意：行为代码是JavaScript客户端代码，运行在访问者的浏览器中，而非服务器上。•事件：访问者执行的操作（如点击、划过）发送给浏览器的消息。•动作：预先编写的JavaScript代码，用于执行特定任务。专家提示：事件触发的条件差异关键提示1.触发给定动作的事件会随选中的元素对象不同而变化。例如，标签支持onClick，而支持onLoad。2.浏览器版本：版本越高，支持的动作越多。设计时应针对主流浏览器，避免一味追求高版本导致低版本用户失效。3.空链接技巧：某些行为必须附加在链接上，DW会自动添加以便行为附加。相关知识：网页常用交互事件事件名称含义与触发时机适用对象onClick当用户单击对象时触发链接、按钮onMouseOver鼠标指针移入对象范围时触发图像、链接onMouseOut鼠标指针离开对象范围时触发图像、链接onLoad图像或整个页面加载完成后触发Body,ImgonSubmit当用户提交表单时触发Form操作原子化：行为面板各按钮功能动作顺序若一个事件对应多个动作（如点击既弹出消息又转到URL），通过向上/下箭头调整执行顺序极其重要。交互利器：弹出消息(PopupMessage)•作用：显示包含指定消息的警告框，仅一个“确定”按钮。•动态变量：可嵌入JavaScript表达式，需放在一对儿花括号内。•示例：

欢迎光临！今天是。应用场景常用于提供系统提示、版权声明或在表单提交前给予用户必要的信息提醒。交互利器：检查表单(CheckForm)•作用：确保用户输入的数据类型正确，防止提交无效数据。•验证类型：•触发建议：附加在表单的事件。验证逻辑相比后端验证，前端“行为”验证能提供即时反馈，极大减少服务器负担并提升用户体验。○必需：不能为空。○电子邮件地址：必须包含@。○数字：只能填阿拉伯数字。专家提示：预载图像的重要性性能调优痛点：在“交换图像”时，如果第二张图片没提前加载，用户悬停时会感到明显的延迟或看到短暂的白屏。方案：勾选“预先载入图像”。浏览器会在页面空闲时静默下载这些交互资源，确保交互“丝滑顺畅”。任务引领2：快速链接下拉跳转任务说明：在首页index.html底部添加“快速链接”功能。用户从下拉列表中选择目标网站后，浏览器立即自动跳转至对应网址。行为技术使用跳转菜单(JumpMenu)行为。将表单元素与URL切换逻辑深度绑定。步骤1：插入表单元素与列表值项目标签(显示文本)值(目标网址)教之根（教材支持）/西部数码/•1.菜单：“插入”->“表单”->“选择”。•2.属性面板：单击“列表值”。•3.配置对照表：步骤2：添加跳转行为动作•1.保持选中下拉列表框。•2.行为面板点击“+”->选择。•3.对话框设置：确认目标窗口通常为“主窗口”。•4.代码提示：此时DW会自动为标签添加事件。事件逻辑onChange：当用户改变下拉列表的选中项时即触发动作，无需额外点击“提交”按钮。专家提示：多行为叠加的管理交互细节1.不能用相同的事件触发不同的动作：例如onClick触发A后再设置触发B，B可能覆盖A。应在一个行为内包含多动作。2.删除：若要取消交互，必须在“行为”面板点击减号“-”，单纯删除HTML中生成的JavaScript代码往往会导致页面报错。3.命名图像：为了在交换图像列表中快速区分，建议先在属性面板为图像设置ID/名称。拓展训练：趣味“打地鼠”交互任务要求：利用“弹出信息”行为制作网页。页面散布多个地鼠图片。当用户鼠标单击图片时，系统通过行为立即弹出对话框反馈：“呀，没打着！”。动作选择事件：onClick

动作：弹出消息回味思考：客观题检测(1)1.“行为”在网页中的主要作用是什么？答案：C.实现网页的动态交互效果2.下列哪个事件表示鼠标指针移入某个元素时触发？答案：B.onMouseOver3.“跳转菜单”行为通常与哪种网页元素结合使用？答案：B.下拉列表框(Select)回味思考：客观题检测(2)4.“行为”建立的两个关键环节是什么？答案：事件与动作的关联设计5.在使用“交换图像”行为时，为了避免显示失真，需要注意？答案：A.交换的图像尺寸必须相同6.哪个事件与页面的加载完成（如显示欢迎语）相关？答案：C.onLoad回味思考：深度逻辑解析Q：如何根据用户习惯来选定对应的鼠标事件？逻辑解析：

1.即时预览：使用onMouseOver。用户只需扫过即可看到变化（