1、行为应用行为应用应用应用篇篇层叠样式表（层叠样式表（CSSCSS）Dreamweaver高级基高级基础础l 基本概念基本概念l 添加行为添加行为l 应用示例应用示例行为应用行为应用 行为是行为是Macromedia预置的预置的JavaScript程序库，利用程序库，利用行为能够使网页制作者不用编成而实现交互功能，行为能够使网页制作者不用编成而实现交互功能，即根据访问者鼠标的不同动作来让网页执行相应操即根据访问者鼠标的不同动作来让网页执行相应操作，例如打开一个浏览器窗口、信息反馈、验证表作，例如打开一个浏览器窗口、信息反馈、验证表单等。单等。行为是为响应某一个事件而采取的一个或多个动行为是为响应
2、某一个事件而采取的一个或多个动作，当指定的事件被触发时，将运行相应的作，当指定的事件被触发时，将运行相应的JavaScript程序，执行相应得动作。程序，执行相应得动作。行为是针对网页中的所有对象，所以要结合一个行为是针对网页中的所有对象，所以要结合一个对象添加行为，而在创建行为时，必须先指定一个对象添加行为，而在创建行为时，必须先指定一个动作，然后再指定触发动作的事件。动作，然后再指定触发动作的事件。行为应用行为应用 基本概念基本概念行为是一种行为是一种事件事件和和动作动作的合成物，利用行为使网页的合成物，利用行为使网页具有交互功能。具有交互功能。每一个行为都包括每一个行为都包括对象对象、事
3、件事件和由该事件触发的和由该事件触发的动动作作的组合，其中对象是网页上的某种元素，如的组合，其中对象是网页上的某种元素，如HTML文档、文字、图像等，它是行为的产生者；文档、文字、图像等，它是行为的产生者；事件是指访问者对网页进行的操作，如事件是指访问者对网页进行的操作，如onClick（单击鼠标）、（单击鼠标）、onMouseOver（鼠标经过）等；而（鼠标经过）等；而动作则是指接受到事件的网页所执行的响应功能，动作则是指接受到事件的网页所执行的响应功能，如打开浏览器窗口、显示如打开浏览器窗口、显示/隐藏层等。隐藏层等。事件种类事件种类功功 能能 说说 明明onAbort在浏览器中停止加载网
4、页文档的操作是触发该事件在浏览器中停止加载网页文档的操作是触发该事件onClick 单击选定元素（如超级链接、图片、按钮）时触发该事件单击选定元素（如超级链接、图片、按钮）时触发该事件onDblClick双击选定元素将触发该事件双击选定元素将触发该事件onDragDrop拖动选定元素后放开时触发该事件拖动选定元素后放开时触发该事件onDragStart拖动选定元素时触发该事件拖动选定元素时触发该事件onKeyDown当用户按下键盘上某个键时触发该事件当用户按下键盘上某个键时触发该事件onKeyUp当用户按下某个键后释放该键时触发该事件当用户按下某个键后释放该键时触发该事件onKeyPress当
5、用户按下并释放任意键时触发该事件当用户按下并释放任意键时触发该事件onLoad当图片或页面完成载入后触发该事件当图片或页面完成载入后触发该事件onUnLoad离开页面时触发该事件离开页面时触发该事件onMouseDown单击鼠标左键时触发该事件单击鼠标左键时触发该事件onMouseMove鼠标经过选定元素上面时触发该事件鼠标经过选定元素上面时触发该事件onMouseOut鼠标离开选定元素上面时触发该事件鼠标离开选定元素上面时触发该事件onMouseOver鼠标在选定元素上面时触发该事件鼠标在选定元素上面时触发该事件onMouseUp放开按住的鼠标左键时触发该事件放开按住的鼠标左键时触发该事件o
6、nMove移动窗口或框架时触发该事件移动窗口或框架时触发该事件onResize当用户调整浏览器窗口或框架大小时触发该事件当用户调整浏览器窗口或框架大小时触发该事件onError加载网页文档或图片的过程中发生错误时触发该事件加载网页文档或图片的过程中发生错误时触发该事件onFinish结束移动文字结束移动文字Marquee功能时触发该事件功能时触发该事件onStart开始移动文字开始移动文字Marquee功能时触发该事件功能时触发该事件动作类型动作类型功功 能能 说说 明明调用调用JavaScript发生事件时，调用特定的发生事件时，调用特定的JavaScript函数函数改变属性改变属性更改选定
7、的客体属性更改选定的客体属性检查浏览器检查浏览器根据访问者的浏览器显示合适的网页文档根据访问者的浏览器显示合适的网页文档检查插件检查插件确认启动网页时所需要的插件的安装情况确认启动网页时所需要的插件的安装情况控制控制Shockwave或或Flash控制控制Flash动画的状态动画的状态拖动层拖动层设定在浏览器中可以自由移动的层设定在浏览器中可以自由移动的层转到转到URL发生指定的事件时跳转到指定的网站或网页文档发生指定的事件时跳转到指定的网站或网页文档隐藏弹出式菜单隐藏弹出式菜单隐藏隐藏Dreamweaver中制作的弹出菜单中制作的弹出菜单打开浏览器窗口打开浏览器窗口显示新的弹出窗口显示新的弹
8、出窗口播放声音播放声音发生指定事件时，播放链接的音乐发生指定事件时，播放链接的音乐弹出信息弹出信息发生指定事件时，显示弹出信息发生指定事件时，显示弹出信息预先载入图像预先载入图像为了在浏览器中快速显示图像，预先下载图像后再显示为了在浏览器中快速显示图像，预先下载图像后再显示设置层文本设置层文本在选定的层中显示指定的内容在选定的层中显示指定的内容设置状态栏文本设置状态栏文本在状态栏中显示指定的内容在状态栏中显示指定的内容设置文本域文字设置文本域文字在文本区域中显示指定的内容在文本区域中显示指定的内容显示弹出式菜单显示弹出式菜单在在Dreamweaver中制作所需样式的弹出菜单中制作所需样式的弹出
9、菜单显示显示-隐藏层隐藏层根据指定事件，显示或隐藏特定的层根据指定事件，显示或隐藏特定的层交换图像交换图像发生指定事件时，把选定图像替换为其他图像发生指定事件时，把选定图像替换为其他图像恢复交换图像恢复交换图像应用应用“交换图像交换图像”动作后，显示原图像动作后，显示原图像检查表单检查表单检查表单文档的有效性检查表单文档的有效性事事件件列列表表行为菜单行为菜单 在页面窗口中，选中要为其添加行为的对象，如在页面窗口中，选中要为其添加行为的对象，如某个图像或链接等；某个图像或链接等；单击行为面板中的单击行为面板中的 按钮，从弹出的菜单中按钮，从弹出的菜单中选择一个需要的动作；选择一个需要的动作；当
10、选择动作后，会弹出一个参数对话框，设置好当选择动作后，会弹出一个参数对话框，设置好参数后，单击参数后，单击确定确定按钮；按钮；这时在行为面板的列表中将显示添加的事件及对这时在行为面板的列表中将显示添加的事件及对应得动作。如果该事件不是所需要的事件，可以单应得动作。如果该事件不是所需要的事件，可以单击该事件激活事件列表，单击事件列表下箭头打开击该事件激活事件列表，单击事件列表下箭头打开事件下拉菜单，从中选择一个需要的事件即可。事件下拉菜单，从中选择一个需要的事件即可。行为应用行为应用 添加行为添加行为已选事件已选事件对应动作对应动作添加行为的对象添加行为的对象 弹出消息（将事件弹出消息（将事件C
11、lick OnLoad）图层与行为应用（行为图层与行为应用（行为 拖动层）拖动层）交互窗口（交互窗口（JavaScript）行为应用行为应用 应用示例应用示例应用示例应用示例-1制作滚动字幕：制作滚动字幕：l 打开打开“插入插入/标签标签”HTML标签标签/页元素页元素/marqueel 输入要滚动的文字输入要滚动的文字你好！你好！l 选择标签属性：选择标签属性：behavior(scroll、slide、alternate)行为（滚动、幻灯片、交替）行为（滚动、幻灯片、交替）Dreamweaver高级基高级基础础应用示例应用示例-2制作弹出式菜单：制作弹出式菜单：l 打开打开“行为行为”面板
12、面板 选择选择“显示弹出式菜单显示弹出式菜单”l 输入弹出式菜单项目输入弹出式菜单项目l 设置超级链接设置超级链接Dreamweaver高级基高级基础础Dreamweaver高级基高级基础础l 基本概念基本概念l CSS 样式面板样式面板l 创建创建CSS样式样式l 应用应用CSS样式样式CSS应用（层叠样式表）应用（层叠样式表）CSS（Cascading Style Sheet），中文为），中文为“层叠样式层叠样式表表”，简称样式表，它，简称样式表，它是一系列格式是一系列格式设置设置规则规则的集的集合合，控制，控制 Web 页面内容的外观。页面内容的外观。使用使用 CSS 可以灵活并更好地控
13、制页面外观，从精确可以灵活并更好地控制页面外观，从精确的布局定位到特定的字体和样式，的布局定位到特定的字体和样式，CSS是一个非常灵是一个非常灵活的工具，利用活的工具，利用CSS可以将所有有关文档的样式指定可以将所有有关文档的样式指定内容全部脱离出来。内容全部脱离出来。CSS应用应用 基本概念基本概念CSS快捷视图按钮区快捷视图按钮区body设置的规则设置的规则CSS应用应用 CSS样式面板样式面板创建新样式分为两种情况：创建新样式分为两种情况：为当前页面添加新的为当前页面添加新的CSS样式；样式；直接创建直接创建CSS样式文件，然后再被网页文档引用。样式文件，然后再被网页文档引用。CSS应用
14、应用 创建创建CSS样式样式创建创建CSS样式示例样式示例 打开Dreamweaver，选择“文件/新建”命令弹出新建文档窗口，选择“常规/基本页中的CSS”，单击创建按钮，进入新样式文档窗口。选择“文件/保存”命令弹出“另存为”对话框窗口，保存文档于当前站点的CSS文件夹中，文件命名为“ys1”。选择“窗口/CSS样式”命令，打开CSS样式面板，切换到“全部”选项卡。单击CSS快捷视图按钮区的“新建CSS规则”按钮 ，弹出“新建CSS规则”对话框窗口。CSS样式规则样式规则CSS 格式设置规则由选择器和声明两部分组成：格式设置规则由选择器和声明两部分组成：选择器是标识格式元素的术语（如选择器
15、是标识格式元素的术语（如 P、H1、类名或、类名或 ID）声明用于定义元素样式，由属性和值两部分组成。声明用于定义元素样式，由属性和值两部分组成。定义规则定义规则 该该CSS 规则为规则为 H1 标签创建了标签创建了一个特定的样式，即链接到此一个特定的样式，即链接到此样式的所有样式的所有 H1 标签的文本都标签的文本都将是将是 16 个像素大小、个像素大小、Helvetica 字体和粗体。字体和粗体。H1 font-size:16 pixels;font-family:Helvetica;font-weight:bold;选选择择器器声明声明属属性性属属性性值值要修改的样式要修改的样式选择操作
16、选择操作当前位置当前位置编辑样式编辑样式l 页面属性页面属性/样式样式/管理样式管理样式 附加附加 应用应用CSS样式编辑器样式编辑器 用代码实现用代码实现 CSS应用应用 应用应用CSS样式样式StylesheetH1 font-size:22pt;color:orangeH2 font-size:x-large;color:red H3 font-size:large;color:blue I am heading1,yellow.I am heading2,red.I am heading3,blue.嵌入样式表嵌入样式表标记名标记名属性属性属性值属性值示例示例1示例示例2利用利用CSS
17、创建动感文字创建动感文字 新建一个网页文档文件新建一个网页文档文件“sl7-2-2.htm”插入一个一行两列的表格，然后在左单元格中插入插入一个一行两列的表格，然后在左单元格中插入一幅图片、在右单元格中输入一幅图片、在右单元格中输入“我爱你，中国！我爱你，中国！”。同时设置文字在单元格中居中对齐，表格边框为同时设置文字在单元格中居中对齐，表格边框为0。选择选择“文本文本/CSS样式样式/新建新建”命令，在弹出的命令，在弹出的“新新建建CSS规则规则”对话框窗口选择对话框窗口选择“类类”，在名称文本框，在名称文本框输入输入“dgwz”，在定义在选择，在定义在选择“仅对该文档仅对该文档”。单击单击
18、确定确定按钮，弹出按钮，弹出“dgwz的的CSS规则定义规则定义”对话框窗口，选择对话框窗口，选择“分类分类”中的中的“类型类型”选项，选项，“字体字体”设置为设置为“华文中宋华文中宋”，“大小大小”设置为设置为60，“颜色颜色”设置为设置为#FF0000，“修饰修饰”选择选择“闪烁闪烁”，见图见图1。单击单击应用应用按钮，再选择按钮，再选择“分类分类”中的中的“扩展扩展”选项，选项，“滤镜滤镜”设置为设置为Glow(Color=blue,Strength=20)，见图见图2。单击单击确定确定按钮，在文档中选中表格，然后在按钮，在文档中选中表格，然后在CSS样式面板中样式面板中“所有规则所有规
19、则”样式区中选择新建的样式区中选择新建的dgwz样式，单击鼠标右键，在弹出的下拉菜单列表样式，单击鼠标右键，在弹出的下拉菜单列表中选择中选择“套用套用”命令。命令。保存网页，并按保存网页，并按F12键在浏览器中预览动感文字效果，键在浏览器中预览动感文字效果，此时表中所有元素都应用了该此时表中所有元素都应用了该CSS样式，样式，见图见图3。图图1图图2图图3题目：题目：自行设计并制作个人网站自行设计并制作个人网站要求：要求：网站至少由网站至少由6个独立的页面组成，每个页面的内容和个独立的页面组成，每个页面的内容和 风格自定；风格自定；写出制作网站的实验报告，报告以写出制作网站的实验报告，报告以Word文件格文件格 式编排，在实验报告中要有网页设计的规划和网页式编排，在实验报告中要有网页设计的规划和网页 页面图，在页眉页脚中插入个人信息；页面图，在页眉页脚中插入个人信息；提交作业包括：提交作业包括：作品和网站设计实验报告作品和网站设计实验报告。注意：注意：网页要充分体现网页要充分体现Dreamweaver的的应用特色应用特色
