网页图文CSS样式.ppt

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