Dreamweaver基础教程课件PPT第7章VIP

第七章,使用CSS美化页面,学习目标1）了解CSS样式表的功能和分类。2）掌握CSS样式表的创建、编辑和应用。,层叠样式表（CSS）是一系列格式设置规则，它们控制Web页面内容的外观。CSS样式表的创建，可以统一定制网页文字的大小、字体、颜色、边框、链接状态等效果。CSS的主要优点是容易更新；只要对一处CSS规则进行更新，则使用该定义样式的所有文档的格式都会自动更新为新样式。,在Dreamweaver8.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.4CSS规则中各分类属性,重点提示掌握CSS规则中的各分类属性,1类型属性使用“CSS规则定义”对话框中的“类型”可以定义CSS样式的基本字体和类型设置。2区块属性使用“CSS规则定义”对话框的“区块”类别可以定义标签和属性的间距和对齐设置。3定义CSS样式方框属性使用“CSS规则定义”对话框的“方框”类别可以为控制元素在页面上的放置方式的标签和属性定义设置。可以在应用填充和边距设置时将设置应用于元素的各个边，也可以使用“全部相同”设置将相同的设置应用于元素的所有边。,4定义CSS样式边框属性使用“CSS规则定义”对话框的“边框”类别可以定义元素周围的边框的设置（如宽度、颜色和样式）。5定义CSS样式列表属性“CSS规则定义”对话框的“列表”类别为列表标签定义列表设置（如项目符号大小和类型）。6定义CSS样式定位属性“定位”样式属性使用“层”首选参数中定义层的默认标签，将标签或所选文本块更改为新层。,7定义CSS样式背景属性可以定义CSS样式的背景设置。可以对Web页面中的任何元素应用背景属性。例如，创建一个样式，将背景颜色或背景图像添加到任何页面元素中，比如在文本、表格、页面等的后面。还可以设置背景图像的位置。8定义CSS样式扩展属性“扩展”样式属性包括滤镜、分页和指针选项，【分页】在打印期间在样式所控制的对象之前或者之后强行分页。在弹出式菜单中选择要设置的选项。【光标】当指针位于样式所控制的对象上时改变指针图像。在弹出式菜单中选择要设置的选项。【滤镜】对样式所控制的对象应用特殊效果（包括模糊和反转）。从弹出式菜单中选择一种效果。,7.5CSS滤镜效果,Alpha：设置透明效果Blru：设置模糊效果Chroma：把指定的颜色设置为透明DropShadow：设置投射阴影FlipH：水平反转FlipV：垂直反转Glow：为对象的外边界增加光效,Grayscale：降低图片的彩色度Invert：将色彩、饱和度以及亮度值完全反转建立底片效果Light：设置灯光投影效果Mask：设置遮罩效果，Color指定遮罩的颜色Shadow：设置阴影效果Wave：设置水平方向和垂直方向的波动效果Xray：设置X光照效果,实例4Alpha效