网页设计-任务十一使用CSS美化网页[精选].ppt

项目五 美化网页 Dreamweaver CS3 项目教程 项目五 美化网页 技能目标 在网页设计中能够灵活利用CSS样式对页面元素变换不同的视觉效果。 掌握标签样式、高级样式、类样式的区别与应用范围。 知识目标 熟练掌握CSS样式表的创建与编辑。 掌握CSS样式表的基本语法和定义位置。 理解CSS样式表的标签样式、高级样式、类样式的定义方法。 掌握一些CSS样式表的基本滤镜效果。 理解Dreamweaver CS3新增加的Spry组件功能。 任务十一 使用CSS美化网页 项目五 美化网页 5.1.1 使用CSS美化网页 5.1.2 问题探究—CSS层叠样式表 5.1.3 知识拓展—动态链接CSS样式 5.1.4 知识拓展—CSS滤镜 任务十一 使用CSS美化网页 项目五 美化网页 工作任务 CSS样式表用来控制一个网页文档中某文本区域外的一组格式属性，它的使用简化了网页代码，加快下载速度，减少上传的代码量，尽可能地避免了大量的重复操作，从而大大提高了网页排版的效率，而且也为网页制作者统一网站的整体风格提供了便利。通过该任务的实施完成，用户能够灵活利用CSS各种规则样式的创建来改变页面效果，体验并理解CSS将内容与格式分离的内涵，制作出更加美观赏心悦目的网页效果。 任务十一 使用CSS美化网页—构建任务 项目五 美化网页 工作流程 打开站点中已设计好的页面。 定义页面标题文本的样式。 建立自定义的链接样式。 定义CSS样式并应用到网页对应元素。 制作特殊边框效果。 为图片设计CSS滤镜效果。 导出CSS样式。 新建网页文件导入刚导出的CSS文件，体验CSS的“一次创建，多次使用”。 任务十一 使用CSS美化网页—构建任务 项目五 美化网页 网页预览效 果 任务十一 使用CSS美化网页—构建任务 项目五 美化网页 CSS是Cascading Style Sheet（层叠样式表）的缩写，是网页设计中定义各种样式的一套规范，CSS采用“先定义，后使用”的原则，简化了网页的格式代码，可以将多个样式同时应用于一个页面或网页中的同一个元素，实现网页设计的标准化、结构化，同时也减少了代码的上传数量、加快了下载和显示速度、优化了工作流程。 任务十一 使用CSS美化网页—问题探究 项目五 美化网页 CSS样式表基本语法 CSS样式表是对HTML语法的一次重大革新，它位于文档的head区，作用范围由CLASS或其他任何符合CSS规范的文本来设置。将样式规则加入到HTML文档中的方法有很多，但最简单的启动方式是使用HTML的Style组件。如下代码定义了body标签使用的字号和颜色。 style type=text/css body { font-size: 12px; color: #993399; } /style 任务十一 使用CSS美化网页—问题探究 项目五 美化网页 style是引入样式表最通用的方式。style /style之间可以包含多个styles，也可以通过link将外部CSS文档与html文档相关联，也可以通过@import指令引入多个外部CSS文档；type属性则表明这部分代码用来定义样式表。其中body和.font1是样式的类型和名称，{}之内的属性定义了该样式的规则。? CSS样式表的核心特点是将规则应用到元素集上的能力。它的应用主要有三种形式：组合多种属性自定义样式、对某种标签重新设置属性、对某种标签的特定属性进行设置。其应用又分为两个步骤来进行，首先定义CSS样式规则，这些规则可以直接插入到网页的HTML代码段中，也可以单独保存在CSS文档中；然后将规则应用到相应的页面元素上，例如文本、列表、图像、表格、框架、表单等。 任务十一 使用CSS美化网页—问题探究 项目五 美化网页 创建CSS样式表规则采用两种方法实施 1、使用菜单命令 从主菜单选择“文本/CSS样式/新建”命令，或者在页面空白处单击鼠标右键，在弹出的菜单中选择“CSS样式/新建”，都可以启动“新建CSS规则”对话框，如图5-10所示。设置选择器类型设置规则名称设置定义方式。 任务十一 使用CSS美化网页—问题探究 项目五 美化网页 2、使用CSS样式面板 CSS样式面板集成在浮动面板组，处于隐藏状态。用户 可在菜单上选择“窗口/CSS样式”（或快捷键Shift+F11），打 开如图5-8所示的CSS样式面板。 任务十一 使用CSS美化网页—问题探究 项目五 美化网页 CSS编辑器 在“新建CSS规则”对话