《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样式美化网页,使页面排版变得更加简单有序。,