第五讲网页设计与制作 DreamweaveCs5.ppt

第五讲行为,层、行为、时间轴可以说是网页设计中革命性的技术。搭配使用层、行为、时间轴可以制作出活泼多样的动态页面以及效果惊人的互动网页。上一讲已经学过层的概念，本节进一步学习层、行为、时间轴等。重点是如何综合运用层、行为、时间轴。,层和时间轴,了解层的基本特点掌握层的插入与设置方法了解时间轴的基本特点掌握层与时间轴的应用技巧,插入层设置层的属性创建嵌套层在层中插入内容对齐层层和表格的转换应用时间轴层和时间轴的应用,5.1.1插入层,5.1.2设置层的属性,选择层使用层属性面板改变层的大小改变层的位置,1选择单个层,在文档窗口中选择单个层,在层面板中选择单个层,2选择多个层,在文档窗口中选择多个层,在层面板中选择多个层,使用层属性面板,改变层的大小,选择层后直接拖动控制柄,在层属性面板中精确设置层的大小,改变层的位置,单击层边缘选择层，拖动层左上角突出的部分,选择层后，每按一次方向键，层在相应的方向上移动一个像素,5.1.3创建嵌套层,在页面中插入一个父级层,将插入点置于父级层内，在父级层内插入新的层,5.1.4在层中插入内容,将插入点放置在层内,在层内插入图像，或者输入文本，也可以直接粘贴现成的文本,5.1.5对齐层,使用对齐命令显示标尺显示网格,使用对齐命令,按住Shift键，选择页面中的层,选择命令“修改”“排列顺序”,显示标尺,选择命令“查看”“标尺”“显示”,1显示网格,选择命令“查看”“网格”“显示网格”,2设置网格,选择命令“查看”“网格”“网格设置”,5.1.6层和表格的转换,层转换为表格表格转换为层,层转换为表格,打开含有层的页面,选择命令“修改”“转换”“层到表格”,如果页面中含有嵌套层，则不能使用上面的方法将层转换为表格。,表格转换为层,打开含有表格的页面,选择命令“修改”“转换”“表格到层”,5.1.7应用时间轴,认识时间轴面板创建动画操作多个时间轴为时间轴添加行为,认识时间轴面板,选择命令“窗口”“时间轴”,Alt+F9,创建动画,1创建简单动画,在页面中插入层，将其置于动画开始的位置,选择插入的层，选择命令“修改”“时间轴”，在子菜单中选择“添加对象到时间轴”命令，或者直接将层拖到时间轴面板中,单击动画条的最后一帧，将页面中的层拖动到动画结束的位置,创建动画,添加关键帧,创建动画,2录制对象轨迹,选择要创建动画效果的对象,选择命令“修改”“时间轴”，从子菜单中选择“录制层路径”,操作多个时间轴,1控制时间轴,在时间轴面板中单击右键，从弹出的快捷菜单中选择相应的命令。,2复制和粘贴时间轴,在时间轴面板中选择要复制的时间轴动画,选择“编辑”“拷贝”命令复制时间轴动画,在时间轴面板中选择粘贴动画的目标位置，选择“编辑”“粘贴”命令粘贴时间轴动画,为时间轴添加行为,双击时间轴面板中的行为通道,5.1.8层和时间轴的应用,选择命令“文件”“新建”，新建一个HTML页面,层和时间轴的应用,选择“修改”“页面属性”命令,输入页面标题“flyingangel”,设置背景图像,层和时间轴的应用,设置标题文本属性,插入并设置层,层和时间轴的应用,插入层和图像,单击选择层，选择“修改”“时间轴”“添加对象到时间轴”命令,层和时间轴的应用,添加对象到时间轴,扩展动画长度,单击动画的最后一帧，选择命令“修改”“时间轴”“录制层路径”,层和时间轴的应用,拖出小天使飞舞的轨迹,层和时间轴的应用,5.2行为,行为概述行为面板Dreamweaver8内置的行为下载和安装第三方行为行为的应用,行为,触发动作的事件,动作,在行为面板中为元素附加,指定,在页面上应用,5.2.1行为概述,行为（behaviors）实际上就是JavaScript产生器，以前网页设计者要设计互动效果的网页必须学习JavaScript脚本语言。现在有了Dreamweaver这个强大的网页设计工具，不用写一句代码就可以创建互动式网页。行为是事件和动作的组合，浏览器响应用户的动作产生事件。,“窗口”“行为”,在弹出的下拉菜单中选择行为,删除选中的行为,调整行为的顺序,显示页面中附加的行为名称,5.2.2行为面板,使用行为面板能够为对象添加行为或修改已有的行为。对同一个对象可以添加多个动作，如果同一事件有多个动作，动作将按执行的顺序进行排列。执行【窗口】-【行为】命令打开行为面板,调用JavaScript改变属性检查浏览器检查插件控制Shockwave或Flash拖动层,5.2.3Dreamweaver8内置的行为,转到URL跳转菜单和跳转菜单开始打开浏览器窗口播放声音弹出信息预先载入图像设置导航栏图像设置框架文本,Dreamweaver8内置的行为,设置层文本设置状态栏文本设置文本域文字显示弹出式菜单显示-隐藏层交换图像恢复交换图像时间轴检查表单,Dreamweaver8内置的行为,调用JavaScript,选择要附加行为的对象,单击行为面板上的加号按钮，在动作下拉菜单中选择命令“调用JavaScript”,输入要调用的JavaScript脚本或函数名称,改变属性,选择要附加行为的对象,单击行为面板上的加号按钮，在动作下拉菜单中选择命令“改变属性”,对象类型：在该下拉菜单中选择要改变属性的对象类型。命名对象：在该下拉菜单中列出所选择类型的已命名对象。属性：在该域中设置要改变的属性名称。选择：在下拉菜单中选择属性名称，并在后面的下拉菜单中选择支持改变属性的浏览器。输入：在该文本框中输入要改变的属性名称。新的值：在该文本框中输入对象的新值。,检查浏览器,选择要附加行为的对象,单击行为面板上的加号按钮，在动作下拉菜单中选择命令“检查浏览器”,在NetscapeNavigator文本框中指定NetscapeNavigator的版本。在InternetExplorer文本框中指定InternetExplorer的版本。在“其他浏览器”下拉菜单中设置当浏览器不是NetscapeNavigator和InternetExplore时所执行的跳转。URL：在该域中指定跳转的页面。替代URL：在该域中指定备选的URL。在下拉菜单中选择要执行的跳转：留在此页：停留在当前页面上，不作任何跳转。转到URL：跳转到指定的URL。前往替代URL：跳转到备选的URL。,检查插件,选择要附加行为的对象,单击行为面板上的加号按钮，在动作下拉菜单中选择命令“检查插件”,插件：在该域中指定插件名称。选择“选择”单选按钮后在下拉菜单中选择插件。选择“输入”单选按钮后在文本框中输入插件的名称。如果有，转到URL：在该域中指定安装插件后跳转的URL地址。否则，转到URL：在该域中指定没有安装插件时跳转的URL地址。选择“如果无法检测，则始终转到第一个URL”复选框，则无法检测到该插件时，跳转到之前设置的第一个URL。,控制Shockwave或Flash,插入Flash或Shockwave影片并命名,页面中插入控制按钮,单击行为面板上的加号按钮，在动作下拉菜单中选择命令“控制Shockwave或Flash”,控制Shockwave或Flash,输入要控制的影片名,拖动层,绘制多个层，在文档窗口下的标签栏中单击body标签,单击行为面板上的加号按钮，在动作下拉菜单中选择命令“拖动层”,转到URL,选择要附加行为的对象,单击行为面板上的加号按钮，在动作下拉菜单中选择命令“转到URL”,打开在：在该列表中选择打开新页面的窗口。URL：在该域中指定要打开的页面。单击“浏览”按钮在文件夹中查找并选择文件，或者直接在文本框中输入文件的路径。,跳转菜单和跳转菜单开始,双击行为面板中的动作名称,打开浏览器窗口,选择要附加行为的对象,单击行为面板上的加号按钮，在动作下拉菜单中选择命令“打开浏览器窗口”,播放声音,选择要附加行为的对象,单击行为面板上的加号按钮，在动作下拉菜单中选择命令“播放声音”,弹出信息,选择要附加行为的对象,单击行为面板上的加号按钮，在动作下拉菜单中选择命令“弹出信息”,输入现在时刻是newDate(),预先载入图像,选择要附加行为的对象,单击行为面板上的加号按钮，在动作下拉菜单中选择命令“预先载入图像”,单击加号（+）按钮添加图像。在“图像源文件”域中指定添加的图像文件。单击“浏览”按钮选择图像文件，或者直接在文本框中输入文件路径。单击减号（-）按钮删除列中选择的图像。设置完成后单击“确定”按钮退出“预先载入图像”对话框。,设置导航栏图像,选择要附加行为的对象,单击行为面板上的加号按钮，在动作下拉菜单中选择命令“设置导航栏图像”,设置框架文本,选择要附加行为的对象,单击行为面板上的加号按钮，在动作下拉菜单中选择命令“设置文本”“设置框架文本”,框架：在该下拉菜单中选择框架。新建HTML：在该域中输入要设置的内容。单击“获取当前HTML”按钮，则将当前页面中的HTML代码复制在“新建HTML”域中，然后对这些代码进行编辑。保留背景色：选择该复选框将保留背景色。,设置层文本,选择要附加行为的对象,单击行为面板上的加号按钮，在动作下拉菜单中选择命令“设置文本”“设置层文本”,在“层”下拉菜单中选择层。在“新建HTML”域中输入新的HTML。,设置状态栏文本,选择要附加行为的对象,单击行为面板上的加号按钮，在动作下拉菜单中选择命令“设置文本”“设置状态栏文本”,设置文字域文本,选择要附加行为的对象,单击行为面板上的加号按钮，在动作下拉菜单中选择命令“设置文本”“设置文字域文本”,在“文本域”下拉菜单中选择文本域。在“新建文本”域中输入新的文本域内容。,显示弹出式菜单,选择要附加行为的对象,单击行为面板上的加号按钮，在动作下拉菜单中选择命令“显示弹出式菜单”,内容：在该选项卡内设置下拉菜单项的名称、链接、结构以及打开链接的窗口。外观：在该选项卡内可以设置下拉菜单的格式，可以是水平格式，也可以是垂直格式。还可以设置菜单项垂直或水平状态时的显示状态，以及菜单项文本的基本属性，例如，粗体、斜体、对齐方式等。高级：在该选项卡内设置下拉菜单单元格的属性，例如，单元格的大小、边框颜色、背景颜色、文本缩进格式以及下拉菜单控制柄的延迟。位置：在该选项卡内设置下拉菜单的位置，这个位置是相对于作为下拉菜单控制柄的链接或图像。,显示-隐藏层,绘制多个层，在属性面板上分别为这些层指定一个惟一的名称,单击行为面板上的加号按钮，在动作下拉菜单中选择命令“显示-隐藏层”,交换图像,页面中插入图像，并在属性面板上为图像指定惟一的名称,单击行为面板上的加号按钮，在动作下拉菜单中选择命令“交换图像”,交换图像动作只改变图像的src属性，所以插入的图像最好是一样的尺寸，否则将扩展或收缩图像和原来的图像保持一致，这将会影响图像的显示效果。,恢复交换图像,双击行为面板中“恢复交换图像”动作,时间轴,单击行为面板上的加号按钮，在动作下拉菜单中选择命令“时间轴”“转到时间轴”,单击行为面板上的加号按钮，在动作下拉菜单中选择命令“时间轴”“停止时间轴”,单击行为面板上的加号按钮，在动作下拉菜单中选择命令“时间轴”“播放时间轴”,检查表单,在页面中创建表单,单击行为面板上的加号按钮，在动作下拉菜单中选择命令“检查表单”,命名的栏位：在该列表中选择表单域。值：在该域中选择“必需的”复选框则表单域中不能为空。可接受：在该域中验证下面四个选项。任何东西：可接受任何值。数字：验证表单域中输入的是否为数值。电子邮件地址：验证Email地址中是否含有符号。数字从：在后面的文本框中输入数值范围，验证表单域输入的数值是否在此范围内。,5.2.4下载和安装第三方行为,单击行为面板上的加号按钮，在动作下拉菜单中选择命令“获取更多行为”,搜索所需要的行为插件,5.2.5行为的应用,检查表单制作拼图游戏加入背景音乐创建下拉菜单新闻布告栏创建弹出广告,检查表单,创建表单,单击行为面板上的加号按钮，在动作下拉菜单中选择命令“检查表单”,检查表单,F12,加入背景音乐,打开页面，选择文档窗口下面标签栏中的标签,单击行为面板上的加号按钮，在动作下拉菜单中选择命令“播放声音”,创建下拉菜单,创建一个基本页面，插入触发下拉菜单的文本或图像,单击行为面板上的加号按钮，在动作下拉菜单中选择命令“显示弹出菜单”,1使用显示弹出菜单动作,创建下拉菜单,单击CSS规则面板上的“新建CSS规则”按钮,新闻布告栏,创建基本页面,绘制Layer1,绘制Layer2,Layer2内设置新闻条目并创建链接,新闻布告栏,选定层Layer2，选择命令“修改”“时间轴”“添加对象到时间轴”,新闻布告栏,选择层后，按向上、向下方向键可以精确地移动层的位置。,选定层Layer2，单击行为面板上的加号按钮，在弹出的动作下拉菜单中选择“时间轴”“停止时间轴”命令,选定层Layer2，单击行为面板上的加号按钮，在弹出的动作下拉菜单中选择“时间轴”“停止时间轴”命令,新闻布告栏,新闻布告栏,创建弹出广告