网页设计-任务十一使用CSS美化网页

项目五美化网页DreamweaverCS3项目教程项目五美化网页•技能目标在网页设计中能够灵活利用CSS样式对页面元素变换不同的视觉效果。掌握标签样式、高级样式、类样式的区别与应用范围。•知识目标熟练掌握CSS样式表的创建与编辑。掌握CSS样式表的基本语法和定义位置。理解CSS样式表的标签样式、高级样式、类样式的定义方法。掌握一些CSS样式表的基本滤镜效果。理解DreamweaverCS3新增加的Spry组件功能。任务十一使用CSS美化网页项目五美化网页•5.1.1使用CSS美化网页•5.1.2问题探究—CSS层叠样式表•5.1.3知识拓展—动态链接CSS样式•5.1.4知识拓展—CSS滤镜任务十一使用CSS美化网页项目五美化网页工作任务CSS样式表用来控制一个网页文档中某文本区域外的一组格式属性，它的使用简化了网页代码，加快下载速度，减少上传的代码量，尽可能地避免了大量的重复操作，从而大大提高了网页排版的效率，而且也为网页制作者统一网站的整体风格提供了便利。通过该任务的实施完成，用户能够灵活利用CSS各种规则样式的创建来改变页面效果，体验并理解CSS将内容与格式分离的内涵，制作出更加美观赏心悦目的网页效果。任务十一使用CSS美化网页—构建任务项目五美化网页工作流程1.打开站点中已设计好的页面。2.定义页面标题文本的样式。3.建立自定义的链接样式。4.定义CSS样式并应用到网页对应元素。5.制作特殊边框效果。6.为图片设计CSS滤镜效果。7.导出CSS样式。8.新建网页文件导入刚导出的CSS文件，体验CSS的“一次创建，多次使用”。任务十一使用CSS美化网页—构建任务项目五美化网页网页预览效果任务十一使用CSS美化网页—构建任务项目五美化网页CSS是CascadingStyleSheet（层叠样式表）的缩写，是网页设计中定义各种样式的一套规范，CSS采用“先定义，后使用”的原则，简化了网页的格式代码，可以将多个样式同时应用于一个页面或网页中的同一个元素，实现网页设计的标准化、结构化，同时也减少了代码的上传数量、加快了下载和显示速度、优化了工作流程。任务十一使用CSS美化网页—问题探究项目五美化网页CSS样式表基本语法CSS样式表是对HTML语法的一次重大革新，它位于文档的head区，作用范围由CLASS或其他任何符合CSS规范的文本来设置。将样式规则加入到HTML文档中的方法有很多，但最简单的启动方式是使用HTML的Style组件。如下代码定义了body标签使用的字号和颜色。styletype=text/cssbody{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规则”对话框中设置好相应选项，并单击“确定”按钮保存新创建的CSS文件后，即弹出“CSS规则定义”对话框，对规则的内容进行详细的设置，如图5-11所示。图中包含了W3C组织规定的所有CSS的属性，包括类型、背景、区块、方框五、列表、定位、扩展等八个部分，用户可以对这八种类别定制详细样式的格式。任务十一使用CSS美化网页—问题探究项目五美化网页CSS样式表定义方式定义好CSS规则后，就可以在网页中直接使用这些规则。“新建CSS规则”对话框中的“定义在”选项是用来指定样式的作用范围。•“仅对该文档”的CSS样式表•外部CSS样式任务十一使用CSS美化网页—问题探究项目五美化网页•“仅对该文档”的CSS样式表建好样式后，在页面编辑区选取要应用的文本或者段落，在“CSS样式”面板中用鼠标右键单击要应用的样式名称，在弹出的菜单中选择“套用”。或者在属性面板的样式下拉列表中选择相应的样式，也可以为自定义的样式。•外部CSS样式打开CSS样式面板的面板菜单，单击按钮，弹出“新建CSS规则”对话框。在“选择器类型”选项选择“类”；在“名称”文本框中输入样式表名称，“定义在”选项处选择“新建样式表文件”。任务十一使用CSS美化网页—问题探究项目五美化网页样式表的链接与导入新建一个页面文档，在CSS样式面板中单击“附加样式表”按钮，会弹出“链接外部样式表”对话框。点击“浏览”按钮，选择需要的外部CSS样式表文件，然后添加为“链接”或“导入”。任务十一使用CSS美化网页—问题探究项目五美化网页“链接”只读取外部CSS样式表的信息，不把信息导入到网页文档中；而“导入”则将外部CSS样式表的信息导入到当前的网页文档，相比起来导入方式更有优势些。•如果是链接外部样式表，会在网页头部添加如下代码：linkhref=N5/css/stylebg.cssrel=stylesheettype=text/css/•如果是导入外部样式表，会在网页头部添加如下代码：styletype=text/css!--@importurl(N5/css/stylebg.css);--/style任务十一使用CSS美化网页—问题探究项目五美化网页管理样式表如果对已建立的样式表还需要修改某些地方，或者想把不需要的样式表删掉，这时就需要对已有的样式表进行修改、删除、复制、移动的操作。•修改样式表•删除样式表•复制样式表•移动样式表•CSS样式表冲突任务十一使用CSS美化网页—问题探究项目五美化网页动态链接CSS样式动态链接CSS样式是一种特殊的类选择符，不能像类选择符一样随意定义名称，它只有应用于a标签才会对超链接的文本起作用。动态链接CSS样式有以下四种状态：•“a:link”（未访问的链接）：用于定义链接的常规状态。•“a:visited”（已访问的链接）：设置该链接可以方便用户阅读文章。•“a:hover”（鼠标放在链接上）：用于定义鼠标放在链接上时产生的视觉效果。•“a:active”（激活链接）：用于表现鼠标按下时的链接状态。任务十一使用CSS美化网页—问题探究项目五美化网页•CSS滤镜在DreamweaverCS3中，滤镜分为静态滤镜和动态滤镜两种。在CSS“扩展”属性对话框中，单击过滤器下拉按钮，就可以看到所有滤镜，如下图所示。任务十一使用CSS美化网页—问题探究项目五美化网页静态滤镜CSS静态滤镜共有13种，使被施加的对象产生各种静态的特殊效果。•Alpha滤镜：设置透明度的层次效果。语法结构如下：Fliter：Alpha(Opacity=起始透明度,FinishOpacity=结束透明度,Style=形状,StartX=?,StartY=?,FinishX=?,FinishY=?)•Blur滤镜：设置快速移动的模糊效果。语法结构如下：Fliter：Blur(Add=true(false),Direction=方向,Strength=强度)•Chroma滤镜：设置特定颜色的透明效果。语法结构如下：Fliter：Chroma(Color=color)•DropShadow滤镜：设置对象的阴影效果。语法结构如下：Fliter：DropShadow(Color=color,OffX=?,OffY=?,Positive=?)任务十一使用CSS美化网页—问题探究项目五美化网页•FlipH、FlipV滤镜：Flip是滤镜的翻转属性，FlipH代表水平翻转、FlipV代表垂直翻转。•Glow滤镜：设置对象边缘光晕效果。语法结构如下：Fliter：Glow(Color=color,Strength=强度)•Mask滤镜：设置遮罩效果。语法结构如下：Fliter：Mask(Color=color)•Shadow滤镜：设置对象边缘光晕效果。语法结构如下：Fliter：Shadow(Color=color,Direction=方向)•Wave滤镜：把对象按照垂直的波纹样式打乱，产生波浪变形效果。语法结构如下：Fliter：Wave(Add=true(false),Freq=频率,LightStrength=增强光效,Phase=偏移量,Strength=强度)•Gray滤镜：设置图片的灰度效果。•Invert滤镜：将颜色的饱和度及亮度值完全反转。•Xray滤镜：使对象产生一种X射线效果。任务十一使用CSS美化网页—问题探究项目五美化网页动态滤镜•CSS动态滤镜可以为页面添加动人的淡入淡出、图像转化效果，分别是混合转换滤镜和显示转换滤镜两种转换效果。•混合转换滤镜：处理图像之间的淡入和淡出效果。语法结构如下：Fliter：BlendTrans(Duration=淡入和淡出的时间)其中：Duration指定了淡入和淡出的时间，以秒为单位。•显示转换滤镜：提供一种更为多变的转换效果，如图片转换。语法结构如下：Fliter：RevealTrans(Duration=转换的秒数,Transition=转换类型)任务十一使用CSS美化网页—问题探究