工信版（中职）网页设计与制作项目十运用网页行为电子课件.pptx

YCF（中职）网页设计与制作项目十 运用网页行为电子课件=项目十 运用网页行为=任务一 设置浏览器行为=了解行为“行为”能为网页添加许多功能，比如弹出消息框、显示-隐藏一个对象等，可以创建网页动态效果，实现用户与页面的交互。行为是由事件和动作组成的，例如：将鼠标移到一幅图像上产生了一个事件，如果图像发生变化(前面介绍过的轮替图像)，就导致发生了一个动作。与行为相关的有三个重要的部分对象、事件和动作。=了解行为对象(Object)对象是产生行为的主体，很多网页元素都可以成为对象，如图片、文字、多媒体文件等，甚至是整个页面。事件(Event)事件是触发动态效果的原因，它可以被附加到各种页面元素上，也可以被附加到HTML标记中。动作(Action)行为通过动作来完成动态效果。将事件和动作组合起来就构成了行为=应用行为行为面板创建行为一般创建行为有三个步骤：选择对象、添加动作、调整事件。=弹出信息弹出信息你的开网页时经常遇到这种情况：打开网站页面时，同时弹出写有通知事项或特殊信息的小窗口，这就是弹出信息。=有关说明不同的浏览器，同一个浏览的不同版本对事件支持不尽一致，通常来说高版本的浏览器比低版本的支持的事件要多，而IE比Netscape支持的事件要多。=打开浏览器窗口使用“打开浏览器窗口”动作可在网页载入后打开一个新窗口。用户可以指定新窗口的属性。例如窗口大小、属性以及名称。如果你指定的新窗口无属性，则新窗口将按启动它的窗口的大小及属性打开。=状态栏文本设置状态栏文本动作后能在浏览器窗口底部左侧的状态栏中显示信息。我们经常在网站中看到这个效果，制作简单比较实用。改变上面活动中的事件为“onclick”，保存网页，预览效果。【练习1】打开index.html，在行为面板中找到“打开浏览器窗口”，修改“窗口宽度”和“窗口高度”分别为250和200，再看看效果。再把“窗口宽度”和“窗口高度”分别修改回原来的参数。再在“打开浏览器窗口”中，勾选导航工具栏、位置工具栏、状态栏及菜单栏等试看下效果。【练习2】=任务二 AP元素行为=AP 元素Dreamweaver中，AP 元素（绝对定位元素）是分配有绝对位置的 HTML 页面元素，具体地说，就是 div 标签或其它任何标签。AP 元素可以包含文本、图像或其它任何可放置到 HTML 文档正文中的内容。=AP Div概述AP Div是HTML中的重要组成元素之一，网页可以通过AP Div实现对页面的规划和布局。div元素是一个块元素，在其中间可以包含文本、段落、表格、图像等内容，它可以灵活地定位页面的任何位置，可以通过嵌套、属性设置、JaveScript实现多种动态效果。=AP Div插入菜单=显示-隐藏元素功能显示-隐藏元素行为的功能是控制某页面元素的显示、隐藏或恢复的默认可见性。此行为主要用于在用户与页面进行交互时显示信息，例如，当用户将鼠标指针移到一个图像上时，可以显示此图像的说明性信息，当指针离开后，此说明性信息将变成隐藏不可见状态。=显示-隐藏元素的实现显示-隐藏元素动作在Dreamweaver cs6中可通过改变一个或多个AP元素的可见性状态来实现，显示-隐藏元素动作显示、隐藏或、恢复一个或多个AP元素的默认可见性。AP元素通常是绝对定位的Div标签，可以将任何HTML元素作为AP元素进行分类，方法是分配一个绝对位置。=拖动AP元素“拖动AP元素”行为的功能是在页面中按照指定的方式拖动某层元素移动。因为用户可以拖动层之前必须先调用“拖动AP元素”动作，所以应该确保触发该动作的时间是发生在试图拖动层之前。为此实现拖动AP元素最佳的方法是使用onload事件将“AP元素”附加到body对象上。=拖动AP元素的应用“拖动AP元素”动作可以使用户进行拖动AP元素的操作，使用这个动作可以创建动脑筋的迷题、拼图游戏、滑动控制及其它可移动的网页页面元素等。“拖动AP元素”动作可以设置拖动的方向、目标等。=自主练习1请在index.html中，自己添加一个APDiv，并选择网页中一个图片控制APDiv显示和隐藏。2将网页截图保存在下面表格中【练习1】网页截图网页截图练习网页请将表2-2填写完成后，做成WORD文档并上交。1请在index.html中，自己添加一个APDiv，在其中插入表格、输入文字，并进行格式设置，如字体、背景设置。做成拖动AP元素2将网页截图保存在下面表格中【练习】网页截图网页截图练习网页请将表2-3填写完成后，做成WORD文档并上交。=任务三 设置表单行为=设置表单行为Dreamweaver cs6涉及设置表单的行为主要是检查表单，前面项目八介绍了SPRY验证表单。=检查表单“检查表单”动作可检查指定文本域的内容，判断用户输入的数据类型是否正确。此动作能够检测用户填写的表单内容是否符合我们预先设定的规范。这样可以在表单被提交之前找出填写错误的地方，提示用户重新输入，避免了表单提交后再交给服务器端去检测输入的正确性，而在客户端就完成检测，减轻了服务器的负担和对网络的占用。=检查表单的实现1.“检查表单”与改变属性动作一样，本动作也建议在使用前先为要检查的表单元素命名，以便在“命名的栏位”中方便准确地找到此元素。2.此动作一般使用的事件为onSubmit，在表单提交时检查。方法是先选择整个表单，然后设置此动作，这样动作就会自动附加到标记，并默认事件为onSubmit。使用onBlur事件附加此动作到单独的表单域，可在用户填写表单时验证该域，使用onSubmit事件附加此动作到单独的表单域，可在用户单击提交按钮时检查设定的多个区域。=与SPRY验证表单的区别SPRY验证表单对象是在普通表单的基础上添加验证功能（前面项目八介绍SPRY验证表单），SPRY验证表单对象的“属性”面板是设置验证方面的内容，不涉及具体表单对象的属性设置。如果要设置具体SPRY验证表单对象的属性表单对象的属性，仍然要采用普通表单对象的“属性”面板。=谢谢