Download presentation
Presentation is loading. Please wait.
1
网页设计与制作 Dreamweaver CS6 标准教程
第7章 CSS样式 网页设计与制作 Dreamweaver CS6 标准教程
2
本章学习的主要内容： 1. CSS样式构造规则及意义 2. 利用CSS样式面板创建各种样式 3. 利用CSS样式面板创建文本导航条
3
7.1 CSS样式 CSS（Cascading Style Sheet）样式称为层叠 样式表，也称级联样式表。CSS样式是描述网页 元素格式的一组规则，用于设置和改变HTML语 言网页的外观。
4
7.1 CSS样式 7.1.1 CSS样式标准 7.1.2 CSS样式构造规则 7.1.3 CSS样式种类 7.1.4 CSS样式应用范围
5
7.1.1 CSS样式标准 CSS样式是W3C组织定义的HTML语言网页外观 描述的方法。
CSS样式将HTML语言网页中的标签（或元素）外 观特性分离出来，形成独立于HTML语言的样式。 采用CSS样式不仅可以对一个网页的布局、字体、 图像、背景及其它元素外观进行精确控制，还可 以对一个网站的所有网页进行有效的统一控制。
6
7.1.2 CSS样式构造规则 CSS样式是由三个要素对象、属性和属性值构 成的。对象是CSS样式所作用和控制的网页元 素，属性是CSS样式描述和设置对象性质的项 目，属性值是属性的一个实例。 Body { font-family：宋体； font-size：15px； color：red； text-decoration：underline； } 页面文字 { 字体：宋体； 大小：15像素； 颜色：红色； 装饰：下划线 }
7
7.1.3 CSS样式种类 根据CSS样式所控制的网页元素不同，可以将 样式分为四种形式。
当所控制的网页元素是HTML语言中的某一个 特定的标签时，为此标签设置的CSS样式，称 为标签样式。 当把网页中或网站中若干元素归为一类，作为 一个整体来看待，为此类元素设置一个CSS样 式，称为类样式。
8
7.1.3 CSS样式种类 一个标签或元素在网站中的不同网页中，或在 一个网页中的不同位置上，外观效果不同，则 需要先为该特定标签赋予一个唯一的ID号，然 后，再为具有该ID号的标签设置样式，称此样 式为ID样式。 当设置若干个内容相同而名称不同样式时，或 者设置超级链接样式时，则可以使用复合样式。
9
7.1.4 CSS样式应用范围 应用CSS样式涉及到两个范围，一是在一个网页中， 另一个是在整个网站中。
10
7.2 CSS样式控制面板 在CSS样式控制面板中，包含了实现CSS样式的各 种功能。
如选择器选择样式类型，规则定义位置确定样式 应用范围，规则定义对话框定义样式的属性和属 性值。
11
7.2 CSS样式控制面板 7.2.1 CSS样式选择器 7.2.2 课堂案例-美好摄影 7.2.3 CSS样式的使用 7.2.4编辑样式
12
7.2.1 CSS样式选择器 1.重建HTML标签样式，自动更新。 2.创建类样式，先应用后更新。 3.创建ID样式，自动更新。
4.复合样式
13
7.2.2 课堂案例-美好摄影 案例学习目标：学习使用各种CSS样式。
案例知识要点：在【CSS样式】面板中，选择 【新建CSS规则】按钮 ，打开【新建CSS规则】 对话框，设置ID表格样式、类样式和复合样式， 以及它们的存储位置；在【CSS规则定义】对 话框中，完成属性的简单设置。 素材所在位置：光盘/案例素材/ch07/课堂案 例-美好摄影。 案例效果如图7-7和7-8所示。
16
7.2.3 CSS样式的使用 1. 定义内部样式 2. 移动CSS规则 3. 定义外部样式 4. 附加样式表
17
7.2.4编辑样式 打开样式编辑对话框有三种方法： （1）双击样式。 （2）使用【编辑样式】按钮。 （3）使用面板菜单。
18
7.3 CSS属性 CSS属性是CSS样式的主要内容，它控制和 改变网页元素的格式和外观，包括九大类： 类型、背景、区块、方框、边框、列表、定 位、扩展和过度。
19
7.3 CSS属性 7.3.1课堂案例-走进台湾 7.3.2类型 7.3.3背景 7.3.4区块 7.3.5方框和边框 7.3.6列表
7.3.7定位 7.3.8扩展 7.3.9过渡
20
7.3.1课堂案例-走进台湾 案例学习目标：学习设置CSS文字导航条。
案例知识要点：在【CSS规则定义】对话框中， 灵活使用样式【类型】、【背景】、【区块】、 【方框】和【边框】等中的CSS样式属性，完 成网页元素的属性设置。 素材所在位置：光盘/案例素材/ch07/课堂案 例-台湾之旅。 案例效果如图7-48所示。
22
7.3.5方框和边框
23
7.4过滤器 7.4.1课堂案例-养生美容 7.4.2 CSS静态过滤器 7.4.3 CSS动态过滤器
24
7.4.1课堂案例-养生美容 案例学习目标：学习使用CSS过滤器。
案例知识要点：在【CCS样式】面板中，打开 【CSS规则定义】对话框，使用【分类】栏中 的【扩展】，完成CSS过滤器的设置。 素材所在位置：光盘/案例素材/ch07/课堂案 例-养生美容。 案例效果如图7-77所示。
26
7.4.2 CSS静态过滤器 1．Alpha滤镜 2．DropShadow滤镜 3．shadow滤镜 4．blur滤镜 5．wave滤镜
6．glow滤镜 7．gray滤镜
27
7.4.3 CSS动态过滤器 动态过滤器也称转换过滤器，为网页切换提供 各种动态效果。 1．BlendTrans过滤器
2．RevealTrans过滤器
28
7.5练习案例 7.5.1练习案例-航空旅游 7.5.2练习案例-狗狗俱乐部 7.5.3练习案例-鲜花店
29
7.5.1练习案例-航空旅游 案例练习目标：练习使用各种CSS样式。 案例操作要点：
1．打开文档index1.html，在导航条单元格 中插入表格：行数列数均为1，宽度为100%， ID标识为navi，并输入导航条文字“网站首 页 旅游计划 服务中心 联系我们（中间留空 格）”。 2．设置导航条复合样式#navi a:link， #navi a:visited属性，字体大小: 12px，颜 色为#666；设置#navi a:hover属性，颜色 为#999。
30
7.5.1练习案例-航空旅游 3．直接输入标题文字“》推荐旅游景点”，设置 类样式.title属性，字体为仿宋体，大小19px，颜 色为#597FB4，文本缩进40px，字体粗细bolder。 4．插入内容表格：行数为4，列数为1，宽度为 100%，ID标识为content，插入两段文字。 5．设置ID表格样式#content属性，大小12px， 颜色#666。 6．将文档index1.html的内部样式移动到样式表 文件travel中，再将外部样式附加到文档 index2.html中，并完成样式的应用。 素材所在位置：光盘/案例素材/ch07/练习案例- 航空旅游，效果如图7-84所示。
32
7.5.2练习案例-狗狗俱乐部 案例练习目标：练习设置CSS文字导航条。 案例操作要点：
1. 创建样式表文件dogclub并将所有CSS样 式存放其中。 2. 在导航条单元格中插入表格：行数列数均 为1，宽度为100%，ID标识为navi。输入导 航条文字“俱乐部介绍 会员注册 服务内容 图片展示 联系我们（中间留空格）”。
33
7.5.2练习案例-狗狗俱乐部 3．设置#navi a:link，#navi a:visited属性：字 体为黑体，大小为16px，颜色为#FFF，没有下划 线，文本对齐center，内边距上下为7px，左右 为25px，右边框为线型为solid，宽度为1px，颜 色为#FFF。 4．设置#navi a:hover属性，背景颜色为#900。 5．导航条制作完成后，删除导航条文字之间的空 格。 素材所在位置：光盘/案例素材/ch07/练习案例- 狗狗俱乐部，效果如图7-85所示。
35
7.5.3练习案例-鲜花店 案例练习目标：练习使用CSS过滤器。 案例操作要点：
1．定义类样式.img1，选择shadow滤镜，设置 参数：color=#b1b1b1，direction=135，结果 保存到index1.html中。 2．定义类样式.img2，选择DropShadow滤镜， 设置参数：color=#b1b1b1，offX=5，offY=5， positive=50，结果保存到index2.html中。 素材所在位置：光盘/案例素材/ch07/练习案例- 鲜花店，效果如图7-86所示。
Similar presentations
