46-Dreamweaver CS3 项目教程.pptVIP

项目五 美化网页 技能目标 在网页设计中能够灵活利用CSS样式对页面元素变换不同的视觉效果。 掌握标签样式、高级样式、类样式的区别与应用范围。 知识目标 熟练掌握CSS样式表的创建与编辑。 掌握CSS样式表的基本语法和定义位置。 理解CSS样式表的标签样式、高级样式、类样式的定义方法。 掌握一些CSS样式表的基本滤镜效果。 理解Dreamweaver CS3新增加的Spry组件功能。 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是Cascading Style Sheet（层叠样式表）的缩写，是网页设计中定义各种样式的一套规范，CSS采用“先定义，后使用”的原则，简化了网页的格式代码，可以将多个样式同时应用于一个页面或网页中的同一个元素，实现网页设计的标准化、结构化，同时也减少了代码的上传数量、加快了下载和显示速度、优化了工作流程。 CSS样式表基本语法 CSS样式表是对HTML语法的一次重大革新，它位于文档的head区，作用范围由CLASS或其他任何符合CSS规范的文本来设置。将样式规则加入到HTML文档中的方法有很多，但最简单的启动方式是使用HTML的Style组件。如下代码定义了body标签使用的字号和颜色。 style type=text/css body { font-size: 12px; color: #993399; } /style style是引入样式表最通用的方式。style /style之间可以包含多个styles，也可以通过link将外部CSS文档与html文档相关联，也可以通过@import指令引入多个外部CSS文档；type属性则表明这部分代码用来定义样式表。其中body和.font1是样式的类型和名称，{}之内的属性定义了该样式的规则。? CSS样式表的核心特点是将规则应用到元素集上的能力。它的应用主要有三种形式：组合多种属性自定义样式、对某种标签重新设置属性、对某种标签的特定属性进行设置。其应用又分为两个步骤来进行，首先定义CSS样式规则，这些规则可以直接插入到网页的HTML代码段中，也可以单独保存在CSS文档中；然后将规则应用到相应的页面元素上，例如文本、列表、图像、表格、框架、表单等。 创建CSS样式表规则采用两种方法实施： 1、使用菜单命令 从主菜单选择“文本/CSS样式/新建”命令，或者在页面空白处单击鼠标右键，在弹出的菜单中选择“CSS样式/新建”，都可以启动“新建CSS规则”对话框，如图5-10所示。设置选择器类型设置规则名称设置定义方式。 2、使用CSS样式面板 CSS样式面板集成在浮动面板组，处于隐藏状态。用户 可在菜单上选择“窗口/CSS样式”（或快捷键Shift+F11），打 开如图5-8所示的CSS样式面板。 CSS编辑器 在“新建CSS规则”对话框中设置好相应选项，并单击“确定”按钮保存新创建的CSS文件后，即弹出“CSS规则定义”对话框，对规则的内容进行详细的设置，如图5-11所示。图中包含了W3C组织规定的所有CSS的属性，包括类型、背景、区块、方框五、列表、定位、扩展等八个部分，用户可以对这八种类别定制详细样式的格式 。 CSS样式表定义方式 定义好CSS规则后，就可以在网页中直 接使用这些规则。“新建CSS规则”对话框中的 “定义在”选项是用来指定样式的作用范围。 “仅对该文档”的CSS样式表 外部CSS样式 “仅对该文档”的CSS样式表 建好样式后，在页面编辑区选取要应用的文本或者段落，在“CSS样式”面板中用鼠标右键单击要应用的样式名称，