《Dreamweaver实例教程 教学课件 ppt 作者叶哲丽 孙海龙第7章》由会员分享，可在线阅读，更多相关《Dreamweaver实例教程 教学课件 ppt 作者叶哲丽 孙海龙第7章（20页珍藏版）》请在金锄头文库上搜索。
1、第七章,使用CSS美化页面,学习目标 1）了解CSS样式表的功能和分类。 2）掌握CSS样式表的创建、编辑和应用。,层叠样式表（CSS）是一系列格式设置规则，它们控制 Web 页面内容的外观。 CSS样式表的创建，可以统一定制网页文字的大小、字体、颜色、边框、链接状态等效果。CSS 的主要优点是容易更新；只要对一处 CSS 规则进行更新，则使用该定义样式的所有文档的格式都会自动更新为新样式。,在 Dreamweaver 8.0中可以定义下列类型的 CSS 样式表： （1）类样式 这种样式可以应用到任何文本，不再区分字符与段落。 （2）标签样式 这种样式是对已经存在的HTML样式的重新定义。 （
2、3）高级样式 重定义具体某个标签组合的格式，或重定义包含特定 id 属性的所有标签的格式。,7.1 类样式,重点提示 1）创建类样式表。 2）将类样式应用到文本。,实例1：给一个网页各行文字应用不同的颜色。实例效果如下：,通过本实例应该掌握如下知识点： （1）新建CSS类样式。 （2）定义CSS样式。 （3）打开CSS样式面板的方法。,7.2 重定义html标签,实例2 将网页中的表格的文字变成12像素（px）大小。 实现方法：通过【重定义HTML】标签，定义td（td是单元格的标签）的字体大小为12像素（px）。因为整个网页内容放在表格中的，也是放在单元格中的，所以，可能通过重定义单元格样式
3、，改变所有放在单元格里的内容。当然，重定义表格标签table，也可以实现同样的效果。 简明步骤：打开样式面板在类型中选择“重定义HTML”标签选择要重定义的标签，例如td给所选标签（例如td）定义CSS一个定义了标签的网页就做好了。 在本实例中还需掌握编辑字体列表的方法。,7.3 使用CSS选择器,重点提示 1）CSS样式表定义 2）CSS样式表编辑,实例3 给页面链接定义样式的效果。（请单击这里进入助教视频）,7.4 CSS规则中各分类属性,重点提示 掌握CSS规则中的各分类属性,1类型属性 使用“CSS 规则定义”对话框中的“类型”可以定义 CSS 样式的基本字体和类型设置。 2区块属性
4、使用“CSS 规则定义”对话框的“区块”类别可以定义标签和属性的间距和对齐设置。 3定义 CSS 样式方框属性 使用“CSS 规则定义”对话框的“方框”类别可以为控制元素在页面上的放置方式的标签和属性定义设置。可以在应用填充和边距设置时将设置应用于元素的各个边，也可以使用“全部相同”设置将相同的设置应用于元素的所有边。,4定义 CSS 样式边框属性 使用“CSS 规则定义”对话框的“边框”类别可以定义元素周围的边框的设置（如宽度、颜色和样式）。 5定义CSS样式列表属性 “CSS 规则定义”对话框的“列表”类别为列表标签定义列表设置（如项目符号大小和类型）。 6定义 CSS 样式定位属性 “定
5、位”样式属性使用“层”首选参数中定义层的默认标签，将标签或所选文本块更改为新层。,7定义 CSS 样式背景属性 可以定义 CSS 样式的背景设置。可以对 Web 页面中的任何元素应用背景属性。例如，创建一个样式，将背景颜色或背景图像添加到任何页面元素中，比如在文本、表格、页面等的后面。还可以设置背景图像的位置。 8定义 CSS 样式扩展属性 “扩展”样式属性包括滤镜、分页和指针选项， 【分页】在打印期间在样式所控制的对象之前或者之后强行分页。在弹出式菜单中选择要设置的选项。 【光标】当指针位于样式所控制的对象上时改变指针图像。在弹出式菜单中选择要设置的选项。 【滤镜】对样式所控制的对象应用特殊
6、效果（包括模糊和反转）。从弹出式菜单中选择一种效果。,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样式美化网页，使页面排版变得更加简单有序。,
