Dreamweaver实例教程 叶哲丽 孙海龙 第7章新.pptVIP

第七章 使用CSS美化页面 学习目标 1）了解CSS样式表的功能和分类。 2）掌握CSS样式表的创建、编辑和应用。 层叠样式表（CSS）是一系列格式设置规则，它们控制 Web 页面内容的外观。 CSS样式表的创建，可以统一定制网页文字的大小、字体、颜色、边框、链接状态等效果。CSS 的主要优点是容易更新；只要对一处 CSS 规则进行更新，则使用该定义样式的所有文档的格式都会自动更新为新样式。 在 Dreamweaver 8.0中可以定义下列类型的 CSS 样式表： （1）类样式 这种样式可以应用到任何文本，不再区分字符与段落。 （2）标签样式 这种样式是对已经存在的HTML样式的重新定义。 （3）高级样式 重定义具体某个标签组合的格式，或重定义包含特定 id 属性的所有标签的格式。 7.1 类样式 重点提示 1）创建类样式表。 2）将类样式应用到文本。 实例1：给一个网页各行文字应用不同的颜色。实例效果如下： 通过本实例应该掌握如下知识点： （1）新建CSS类样式。 （2）定义CSS样式。 （3）打开CSS样式面板的方法。 7.2 重定义html标签 实例2 将网页中的表格的文字变成12像素（px）大小。 实现方法：通过【重定义HTML】标签，定义td（td是单元格的标签）的字体大小为12像素（px）。因为整个网页内容放在表格中的，也是放在单元格中的，所以，可能通过重定义单元格样式，改变所有放在单元格里的内容。当然，重定义表格标签table，也可以实现同样的效果。 简明步骤：打开样式面板→在类型中选择“重定义HTML”标签→选择要重定义的标签，例如td→给所选标签（例如td）定义CSS→一个定义了标签的网页就做好了。 在本实例中还需掌握编辑字体列表的方法。 7.3 使用CSS选择器 重点提示 1）CSS样式表定义 2）CSS样式表编辑 实例3 给页面链接定义样式的效果。（请单击这里进入助教视频） 7.4 CSS规则中各分类属性 重点提示 掌握CSS规则中的各分类属性 1．类型属性 使用“CSS 规则定义”对话框中的“类型”可以定义 CSS 样式的基本字体和类型设置。 2．区块属性 使用“CSS 规则定义”对话框的“区块”类别可以定义标签和属性的间距和对齐设置。 3．定义 CSS 样式方框属性 使用“CSS 规则定义”对话框的“方框”类别可以为控制元素在页面上的放置方式的标签和属性定义设置。可以在应用填充和边距设置时将设置应用于元素的各个边，也可以使用“全部相同”设置将相同的设置应用于元素的所有边。 4．定义 CSS 样式边框属性 使用“CSS 规则定义”对话框的“边框”类别可以定义元素周围的边框的设置（如宽度、颜色和样式）。 5．定义CSS样式列表属性 “CSS 规则定义”对话框的“列表”类别为列表标签定义列表设置（如项目符号大小和类型）。 6．定义 CSS 样式定位属性 “定位”样式属性使用“层”首选参数中定义层的默认标签，将标签或所选文本块更改为新层。 7．定义 CSS 样式背景属性 可以定义 CSS 样式的背景设置。可以对 Web 页面中的任何元素应用背景属性。例如，创建一个样式，将背景颜色或背景图像添加到任何页面元素中，比如在文本、表格、页面等的后面。还可以设置背景图像的位置。 8．定义 CSS 样式扩展属性 “扩展”样式属性包括滤镜、分页和指针选项， 【分页】在打印期间在样式所控制的对象之前或者之后强行分页。在弹出式菜单中选择要设置的选项。 【光标】当指针位于样式所控制的对象上时改变指针图像。在弹出式菜单中选择要设置的选项。 【滤镜】对样式所控制的对象应用特殊效果（包括模糊和反转）。从弹出式菜单中选择一种效果。 7.5 CSS滤镜效果 Alpha：设置透明效果 Blru ：设置模糊效果 Chroma ：把指定的颜色设置为透明 DropShadow ：设置投射阴影 FlipH ：水平反转 FlipV ：垂直反转 Glow：为对象的外边界增加光效 Grayscale：降低图片的彩色度 Invert：将色彩、饱和度以及亮度值完全反转建立底片效果 Light：设置灯光投影效果 Mask：设置遮罩效果，Color指定遮罩的颜色 Shadow：设置阴影效果 Wave：设置水平方向和垂直方向的波动效果 Xray：设置X光照效果 实例4 Alpha效果 实例5 模糊效果 实例6 图像水平翻转垂直翻转效果 本 章 小 结 本章主要讲述了如何定义和使用CSS样式，通过学习，大家能够掌握利用CSS样式美化网页，使页面排版变得更加简单有序。 在线教