工信版（中职）Dreamweaver实例教程第7章教学课件.ppt

《工信版（中职）Dreamweaver实例教程第7章教学课件.ppt》由会员分享，可在线阅读，更多相关《工信版（中职）Dreamweaver实例教程第7章教学课件.ppt（21页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、YCF（中职）Dreamweaver实例教程第7章教学课件第七章使用CSS美化页面学习目标1）了解CSS样式表的功能和分类。2）掌握CSS样式表的创建、编辑和应用。层叠样式表（CSS）是一系列格式设置规则，它们控制 Web 页面内容的外观。CSS样式表的创建，可以统一定制网页文字的大小、字体、颜色、边框、链接状态等效果。CSS 的主要优点是容易更新；只要对一处 CSS 规则进行更新，则使用该定义样式的所有文档的格式都会自动更新为新样式。在 Dreamweaver 8.0中可以定义下列类型的 CSS 样式表：（1）类样式 这种样式可以应用到任何文本，不再区分字符与段落。（2）标签样式 这种样式是

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）。因为整个网页内容放在表格中的，也是放在单元格中的，所以，可能通过重

3、定义单元格样式，改变所有放在单元格里的内容。当然，重定义表格标签table，也可以实现同样的效果。简明步骤：打开样式面板在类型中选择“重定义HTML”标签选择要重定义的标签，例如td给所选标签（例如td）定义CSS一个定义了标签的网页就做好了。在本实例中还需掌握编辑字体列表的方法。7.3 使用CSS选择器重点提示1）CSS样式表定义2）CSS样式表编辑实例3 给页面链接定义样式的效果。（请单击这里进入助教视频）7.4 CSS规则中各分类属性重点提示掌握CSS规则中的各分类属性1类型属性使用“CSS 规则定义”对话框中的“类型”可以定义 CSS 样式的基本字体和类型设置。2区块属性使用“CSS

4、规则定义”对话框的“区块”类别可以定义标签和属性的间距和对齐设置。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样式美化网页，使页面排版变得更加简单有序。