第三章第三章 网页图文网页图文韦妍韦妍网页设计与制作多媒体元素的插入多媒体元素的插入多媒体元素的插入多媒体元素的插入教学任务教学任务教学任务教学任务网页上的文本编辑网页上的文本编辑网页上的文本编辑网页上的文本编辑网页上的图像编辑网页上的图像编辑网页上的图像编辑网页上的图像编辑CSSCSS样式设置文本格式样式设置文本格式样式设置文本格式样式设置文本格式1 12 23 34 4第三章第三章第三章第三章 网页图文网页图文网页图文网页图文3.3 在网页中插入各种媒体文件在网页中插入各种媒体文件3.3.3 3. .1 1 插入透明插入透明FlashFlash动画动画打开打开【页面属性面板页面属性面板】，在，在“ “外观（外观（CSSCSS）” ”或或“ “外观外观（HTMLHTML）” ”中的中的“ “背景图像背景图像” ”栏中选择一副图像作为背景图像，栏中选择一副图像作为背景图像，如图所示。如图所示。第三章第三章第三章第三章 网页图文网页图文网页图文网页图文3.3 在网页中插入各种媒体文件在网页中插入各种媒体文件3.3.3 3. .1 1 插入透明插入透明FlashFlash动画动画将光标移到要插入将光标移到要插入FlashFlash动画文件的位置，然后到动画文件的位置，然后到【插入插入】面板的面板的【常用常用】模式上模式上“ “媒体媒体” ”中单击中单击SWFSWF按钮按钮 ，如图所示。，如图所示。第三章第三章第三章第三章 网页图文网页图文网页图文网页图文3.3 在网页中插入各种媒体文件在网页中插入各种媒体文件3.3.3 3. .1 1 插入透明插入透明FlashFlash动画动画从打开的从打开的【选择文件选择文件】对话框中找到所需的文件，然后单击对话框中找到所需的文件，然后单击 按钮回到按钮回到DreamweaverDreamweaver窗口后，光标位置会出现插入的动画文件图窗口后，光标位置会出现插入的动画文件图标。如图所示。标。如图所示。第三章第三章第三章第三章 网页图文网页图文网页图文网页图文3.3 在网页中插入各种媒体文件在网页中插入各种媒体文件3.3.3 3. .1 1 插入透明插入透明FlashFlash动画动画选择动画文件，然后在选择动画文件，然后在【属性属性】面板中设置面板中设置WmodeWmode选项为选项为” ”透明透明“ “，可将，可将FlashFlash背景透明化，预览后效果如图所示。背景透明化，预览后效果如图所示。第三章第三章第三章第三章 网页图文网页图文网页图文网页图文73.4 用用CSS样式设置文本格式样式设置文本格式l l在制作网页过程中，每页都会用到文字、图像以及表在制作网页过程中，每页都会用到文字、图像以及表格、表单等元素。对于这些元素，如果没有格、表单等元素。对于这些元素，如果没有CSSCSS样式样式控制，是无法使页面美观的。各浏览器之间不兼容，控制，是无法使页面美观的。各浏览器之间不兼容，也会导致同一个网页在不同的浏览器中显示效果不同，也会导致同一个网页在不同的浏览器中显示效果不同，而应用而应用CSSCSS样式则恰到好处地解决了这个问题。样式则恰到好处地解决了这个问题。l l层叠样式表层叠样式表CSSCSS（Cascading Style SheetCascading Style Sheet）可以用来）可以用来自定义样式或改变默认样式，用于精确地控制网页内自定义样式或改变默认样式，用于精确地控制网页内容的各种显示风格，提高编辑效率，美化网页。容的各种显示风格，提高编辑效率，美化网页。 第三章第三章第三章第三章 网页图文网页图文网页图文网页图文83.4 用用CSS样式设置文本格式样式设置文本格式3.3.4 4. .1 CSS1 CSS样式面板样式面板 菜单菜单【窗口窗口】| |【CSSCSS样式样式】或单击属性面板中的或单击属性面板中的“ “CSS”CSS”按钮按钮可可以打开以打开CSSCSS面板，如下图所示。面板，如下图所示。第三章第三章第三章第三章 网页图文网页图文网页图文网页图文93.4 用用CSS样式设置文本格式样式设置文本格式3.3.4 4. .2 2 新新建建CSSCSS样式样式单击面板右下侧的单击面板右下侧的“ “新建新建CSSCSS规则规则” ”按钮，打开按钮，打开“ “新建新建CSSCSS规规则则” ”对话框。对话框。选择选择“ “类类 ” ” 样式，并为新建的样式，并为新建的CSSCSS样式命名，如下图所示。样式命名，如下图所示。提示：样式名称不能使用中文，且不能包含空格符。第三章第三章第三章第三章 网页图文网页图文网页图文网页图文103.4 用用CSS样式设置文本格式样式设置文本格式3.3.4 4. .2 2 新新建建CSSCSS样式样式确定后，在弹出确定后，在弹出CSSCSS规则定义的对话框进行设置。如下图所示。规则定义的对话框进行设置。如下图所示。第三章第三章第三章第三章 网页图文网页图文网页图文网页图文113.4 用用CSS样式设置文本格式样式设置文本格式3.3.4 4. .3 3 编辑编辑CSSCSS样式样式选择已创建的选择已创建的CSSCSS样式，点击样式，点击“ “编辑编辑” ”按钮或右击选择按钮或右击选择“ “编辑编辑” ”命令，可对已创建的命令，可对已创建的CSSCSS样式进行修改。样式进行修改。第三章第三章第三章第三章 网页图文网页图文网页图文网页图文123.4 用用CSS样式设置文本格式样式设置文本格式3.3.4 4. .4 4 应用应用CSSCSS样式样式选择需要应用选择需要应用CSSCSS样式的文本，在样式的文本，在CSSCSS面板中，右击样式名称，面板中，右击样式名称，在弹出的列表中选择在弹出的列表中选择“ “编辑编辑” ”命令，或命令，或CSSCSS样式属性的目标规则样式属性的目标规则列表中选择所需的样式名称，可对已创建的列表中选择所需的样式名称，可对已创建的CSSCSS样式进行修改。样式进行修改。第三章第三章第三章第三章 网页图文网页图文网页图文网页图文实训项目实训项目实训项目实训项目1.将将WORD中的文本复制，粘贴到网页中，并根据效果图进行相关文中的文本复制，粘贴到网页中，并根据效果图进行相关文本设置。本设置。2.在网页插入两张图片，并根据效果图对在网页插入两张图片，并根据效果图对“图像属性图像属性”进行相关设置。进行相关设置。3.选择一音频文件制作网页背景音乐。选择一音频文件制作网页背景音乐。第三章第三章第三章第三章 网页图文网页图文网页图文网页图文网页设计与制作