高二下电子工业出版社Dreamweaver CS3网页制作课件第5章 网页的特效制作

第5章 网页的特效制作 目录 前进 结束 后退 本章导读 上机实训 知识细目 本章任务 DreamweaverCS3网页制作实训教程 第五章 网页的特效制作 本章导读 目录 前进 结束 后退 本章主要介绍了CSS样式的概念、创建、编辑和应用，行为的概念和创建，时间轴面板的组成及使用时间轴制作简单动画的方法。 DreamweaverCS3网页制作实训教程 第五章 网页的特效制作 本章任务 目录 前进 结束 后退 学会CSS样式的创建、编辑和应用； 学会使用CSS样式美化和布局网页的方法； 了解行为的概念； 掌握创建行为的基本方法； 了解使用时间轴制作动画的基本原理； 学会使用时间轴制作简单动画的方法。 DreamweaverCS3网页制作实训教程 第五章 网页的特效制作 知识细目 5.1 创建CSS样式 5.2 应用CSS样式 5.3 添加行为 5.4 制作动态效果 CSS样式的含义 CSS样式面板 创建CSS样式 定义CSS样式属性 编辑CSS样式 应用CSS样式 删除CSS样式 重命名CSS样式 链接外部CSS样式表 行为的概念 行为面板 更改或删除行为 添加行为 动作名称及作用 事件名称及作用 时间轴面板 制作直线动画 制作曲线动画 更改元素属性 动画的其他操作 目录 前进 结束 后退 DreamweaverCS3网页制作实训教程 第五章 网页的特效制作 5.1 创建CSS样式 打开“CSS样式”面板 按Shift+F11键 打开“CSS样式”面板的方法 选择“窗口→CSS样式”命令 单击属性面板上的“CSS”按钮 CSS即层叠样式表，是一种格式化网页的标准方式，它通过设置CSS属性使网页元素对象获得不同的效果。 “CSS样式”的含义 目录 前进 结束 后退 DreamweaverCS3网页制作实训教程 第五章 网页的特效制作 “CSS样式”面板 “附加样式表”：用来选择要链接或导入的外部样式表文件。 “新建CSS规则”：用来创建新的CSS样式。 “编辑样式”：打开样式表编辑对话框，对当前选中的CSS样式 进行编辑。 “删除CSS属性”：删除选定的样式或属性，并从它所应用于的 所有元素中删除格式设置。 目录 前进 结束 后退 DreamweaverCS3网页制作实训教程 第五章 网页的特效制作 使用“CSS样式”面板创建CSS样式 打开“CSS样式”面板 单击“新建CSS规则”按钮 选择CSS样式的类型 选择定义样式的位置 设置CSS样式 的属性 完成样式 的创建 “新建CSS规则”对话框 “新建CSS规则”对话框 目录 前进 结束 后退 DreamweaverCS3网页制作实训教程 第五章 网页的特效制作 CSS样式 的类型 类：创建类属性应用于文本范围或文本块的自定义样式 标签:重新定义特定HTML标签的默认格式设置 高级:为具体某个标签组合或所有包含特定Id属性的标签定义格式设置,默认的“选择器”列表中包括a:active、a:hover、a:link 和 a:visited 定义样式 的位置 样式表文件名：将新建的样式添加到该样式表中 新建样式表文件：创建外部样式表 仅对该文档：在当前文档中嵌入样式，不生成新的样式表文件 目录 前进 结束 后退 DreamweaverCS3网页制作实训教程 第五章 网页的特效制作 定义CSS样式的属性 （1）定义CSS样式“类型”属性 “行高”：设置文本所在行的高度，选择“正常”时自动计算字体大小的行高，或输入一个确切的值。 “修饰”：向文本添加下划线、上划线、删除线或使文本闪烁。 目录 前进 结束 后退 DreamweaverCS3网页制作实训教程 第五章 网页的特效制作 （2）定义CSS样式“背景”属性 “背景颜色”和“背景图像”：给选定的对象添加背景颜色和背景图像。 “重复”：设置背景图像的重复方式。 “附件”：设置图像是固定在原始位置还是随内容一起滚动。 目录 前进 结束 后退 DreamweaverCS3网页制作实训教程 第五章 网页的特效制作 （3）定义CSS样式“区块”属性 “单词间距”和“字母间距”：设置单词和字母的间距，选择“值”后可输入数值，并在右边的列表框中选择单位。 “垂直对齐”：设置选中对象相对于上级对象或所在行垂直方向的对齐方式。 “文本对齐”：设置首行文字在对象中的对齐方式。 目录 前进 结束 后退 DreamweaverCS3网页制作实训教程 第五章 网页的特效制作 （4）定义CSS样式“方框”属性 “填充”：指定元素内容与元素边框之间的间距。取消选择“全部相同”选项可设置元素各个边的填充。 “边距”：指定一个元素的边框与另一个元素之间的