Dreamweaver_3

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