Dreamweaver_3.doc

网页中的特效2内容简介2学习重点2学习难点2一. 使用行为面板制作特效21弹出信息2示例1_弹出信息22交换图像3示例2_交换图像33播放声音3示例3_背景音乐4二其它特效41滚动字幕4示例4：添加滚动字幕42浮动特效4示例5_利用层和时间轴创建浮动特效6三CSS样式设置61.了解 CSS62.创建新的 CSS 规则6示例6_CSS规则定义与应用7课堂练习81.完成示例1-682.设置index.html网页打开和关闭弹出信息83.将网页tk.html添加背景音乐84.设置点击网页main.html中图片能播放声音8课后练习8实验指导8网页中的特效内容简介Dreamweaver8通过调用JavaScript产生网页特效，同时它的行为功能提供了多项JavaScript程序，使这些程序自然嵌入网页中产生特效；它的CSS样式也能制作出各种图像特效。学习重点1. 掌握网页中的动态效果的处理技巧2掌握设置CSS样式的方法学习难点1. 使用行为面板制作动态效果2. CSS样式使用一. 使用行为面板制作特效1弹出信息“弹出信息”动作显示一个带有指定的信息的 JavaScript 警告。因为 JavaScript 警告只有一个按钮（“确定”），所以使用此动作可以提供信息，而不能为用户提供选择。可以在文本中嵌入任何有效的 JavaScript 函数调用、属性、全局变量或其它表达式。若要嵌入一个 JavaScript 表达式，请将其放置在大括号 () 中。若要显示大括号，请在它前面加一个反斜杠 ()。使用“弹出信息”动作步骤l 选择一个对象并打开“行为”面板。 l 单击加号 (+) 按钮并从“动作”弹出菜单中选择“弹出信息”。 l 在“信息”文本框中输入的信息。 l 单击“确定”。 示例1_弹出信息选择main.html中图片，设置“弹出信息”，信息内容见样张。如果有选项不可选，则选择“显示事件”中“IE6.0”2交换图像“交换图像”动作通过更改 img 标签的 src 属性将一个图像和另一个图像进行交换。使用此动作创建按钮鼠标经过图像和其它图像效果（包括一次交换多个图像）。插入鼠标经过图像会自动将一个“交换图像”行为添加到的页中。设置 “交换图像”动作步骤l 选择图像，并打开“行为”面板。 l 单击加号 (+) 按钮并从“动作”弹出菜单中选择“交换图像”。 l 从“图像”列表中，选择要更改其源的图像。 l 单击“确定”。 示例2_交换图像选择“smsc.html”网页中图片设置“pic1.jpg”与该图片交换(pic1.jpg在SC3文件夹中)3播放声音使用“播放声音”动作来播放声音。例如，可能要在每次鼠标指针滑过某个链接时播放一段声音效果，或在页载入时播放音乐剪辑。设置“播放声音”动作步骤l 选择一个对象并打开“行为”面板。 l 单击加号 (+) 按钮并从“动作”弹出菜单中选择“播放声音”。 l 单击“浏览”选择一个声音文件，或在“播放声音”文本框中输入路径和文件名。 l 单击“确定”。 示例3_背景音乐给网页wscy.htm添加背景音乐，声音文件为SC3文件夹下，任选一声音文件选择网页上出现的插件符号，点击属性面板中“参数”按钮在“参数”对话框中，将参数“LOOP”和“AUTOSTART”设置为“Ture”二其它特效1滚动字幕通过快速标签编辑器设置滚动字幕l 选中文字，选择“修改/快速标签编辑器”菜单命令l 输入代码示例4：添加滚动字幕l 在网页“main.htm”表格插入一行，并添加文字“欢迎光临E派网上冲印店”，幼圆、大小14l 选中文字，在“快速标签编辑器”中输入代码2浮动特效(1)层通过 Dreamweaver，可以使用层来设计页面的布局。可以将层前后放置，隐藏某些层而显示其他层，以及在屏幕上移动层。可以在一个层中放置背景图像，然后在该层的前面放置第二个层，它包含带有透明背景的文本。利用层可以非常灵活地放置内容。但是，使用旧版本的 Web 浏览器的站点访问者查看层时可能会遇到麻烦。若要确保所有人都能够查看的 Web 页，可以使用层设计页面布局，然后将层转换为表。有关更多信息，请参见将层转换为表格。但是，如果所面对的访问者很可能使用某种最新的浏览器，则可以完全用层来设计布局，而无需将层转换为表格。层的作用l 使用层来设计页面的布局l 将层前后放置l 隐藏某些层而显示其他层l 在屏幕上移动层(2)创建层和设置层的属性 l 在“插入”栏的“布局”类别中单击“绘制层”按钮 ，即在页面中创建层l 选中要设置的层，就可以在属性面板中设置层的属性。 (3)时间轴最常见的时间轴动画都涉及到沿着一条轨迹移动层。时间轴只能移动层。若要使图像或文本移动，请使用“插入”栏上的“绘制层”按钮创建一个层，然后在该层中插入图像、文本或其他任何类型的内容。（1）时间轴弹出菜单：表示当前的时间轴名称。（2）时间轴指针：在界面上显示当前位置的帧。（3）不管时间轴在哪个位置，一直移动到第一帧。 （4）表示时间指针的当前位置。（5）表示每秒显示的帧数。（6）自动播放：选中该项，则网页文档中应用动画后自动运行。 （7）循环：选中该项，则继续反复时间轴上的动画。（8）行为通道：在指定帧中选选择要运行的行为。（9）关键帧：可以变化的帧。 （10）图层条：意味着插入了“层”等对象。 （11）图层通道：它是用于编辑图层的空间。示例5_利用层和时间轴创建浮动特效在Index.html网页中创建浮动图片特效l 在Index.html网页中创建层，宽80像素，高60像素l 在层中插入图片xj.jpg(SC3文件夹中)，图片宽80像素，高60像素l 将层拖入时间轴，设置动画持续80帧l 在第20、40、60分别插入关键帧，并对应将层拖动到不同的位置l 设置“自动播放”和“循环”，帧频为10三CSS样式设置1.了解 CSS层叠样式表 (CSS) 是一系列格式设置规则，它们控制 Web 页面内容的外观。使用 CSS 设置页面格式时，内容与表现形式是相互分开的。页面内容（HTML 代码）位于自身的 HTML 文件中，而定义代码表现形式的 CSS 规则位于另一个文件（外部样式表）或 HTML 文档的另一部分（通常为 部分）中。使用 CSS 可以非常灵活并更好地控制页面的外观，从精确的布局定位到特定的字体和样式等。CSS 使可以控制许多仅使用 HTML 无法控制的属性。例如，可以为所选文本指定不同的字体大小和单位（像素、磅值等）。通过使用 CSS 从而以像素为单位设置字体大小，还可以确保在多个浏览器中以更一致的方式处理页面布局和外观。2.创建新的 CSS 规则使用“CSS 样式”面板创建自定义的 CSS 规则或类样式。类样式可以设置任何范围或文本块的样式属性，并可以应用到任何 HTML 标签。设置CSS规则步骤l 打开设计视图右侧设计面板，选择“CSS样式”标签l 点击“新建CSS规则”按钮，打开“新建CSS规则”对话框l 名称(以点开始)，类型，定义范围l 打开“CSS规则定义”对话框l CSS规则定义类型：主要用于设置文字格式背景：主要用于设置文字、表格等背景方框：主要用于设置图形、表格等大小边框：主要用于设置表格边框列表：主要用于设置项目符号定位：确定对象位置扩展：主要用于设置特殊光标示例6_CSS规则定义与应用打开 “tk.html”网页l 在网页顶端插入1行4列表格，表格宽450像素，居中对齐l 在表格中插入图片(图片在SC3文件夹中)，图片居中对齐l 创建CSS规则“.ys1”(边框)样式：槽状；宽度：中；颜色：#ccffcc将该CSS规则运用到表格上l 创建CSS规则“.ys2”(类型)字体：华文新魏；大小：18像素；粗体；颜色：#003300将该CSS规则运用到正文小标题上l 创建CSS规则“.ys3”(列表)项目符号图像：zp.gif(SC3文件夹中)；位置：外将该CSS规则运用到“成员行为”中编号上课堂练习1.完成示例1-62.设置index.html网页打开和关闭弹出信