九 .CSS 样式表

九 .CSS 样式表

第 6 章 用层和样式表布局并修饰 1.层的基本操作 2.CSS样式表 3.DIV+CSS样式表布局

层是一种 HTML内容的容器，通常由 DIV及 SPAN标记说

明。层可定位在页面上的任意位置，并且其中可包含文本、图像、表单等所有可直接用于文档的元素。层提供了定位页面元素的方法，通过将页面元素放置于层中，用户可控制对象的上下叠放顺序，显示或隐藏，也可以通过时间轴同时在屏幕上移动一个或多个层（可制作动画）。层的定位和显示跟不同浏览器有关，需精确定位。

（一）层的基本操作

1. 创建和使用层

当用户在文档中放置层时， DW将在代码中插入该层的HTML标签。用户可以选择让 DW将 DIV标签或 SPAN标签用于自己的层。默认情况下， DW会使用 DIV标签创建层。层代码可以插入在 HTML文件正文中的任意位置。但在页面中绘制层时， DW将在 body标记的后面加入层代码。如果嵌套一个层，则 DW会在父层中插入代码。

1. 创建和使用层（ 1 ）创建层和嵌套层“查看”菜单－“可视化助理”－“层边框（ AP元素轮廓线）”

创建层：“插入栏”－“布局”－“绘制 AP DIV” 或通过“插入”菜单－“布局对象”－“ AP DIV”

嵌套层： 鼠标插入点放置在要创建嵌套层的层中， 然后通过“插入”菜单－“布局对象”－“ AP DIV”； 或按住 ALT键在层中直接绘制嵌套

1. 创建和使用层（ 2 ）显示层面板（ AP元素面板）选项设置：显示或隐藏：如果前面什么都没有的话，则该层的可见性继承其父层的显示属性（默认）

在层名处双击可修改层名在 Z列单击可修改层的层次属性值，数值大的位于上层。单击可以修改层次。也可以选定一个层，把层直接拖到想要的层次也可以。

“ ” 防止重叠 ：有嵌套层时应选定

1. 创建和使用层

（ 3 ）设置层参数 “编辑”菜单－“首选参数”－“ AP元素”

1. 创建和使用层（ 4 ）选择层和激活层选择层： 要对层进行移动，调整大小等就要先选择层， 选择层才能对层进行操作。①要选择层的话，可以在层面板里面选择， 或点击层边框，或点击层标记等②选中后，可以直接移动或调整层的大小了。③选择多个时， shift键。④ “ ” “要对齐层，多个选定之后通过 修改 菜单－ 排列顺序” －“对齐”。

1. 创建和使用层 激活层： 要把对象插入层中，首先要激活层。① 把光标移动到层内的任何地方单击。就可以在里面插入文本，图像等对象了

② 激活层不等于选择层。

层里面的内容怎么定位？ P129右下角的一堆话

1. 创建和使用层（ 5 ）设置层属性 ① 左、上：设定层相对与页面或父层的位置 （坐标） ② Z轴：设置层的层次属性值 ③ 显示：设置层的可见性， default指不指明 可见性，但一般 default “ ”是 继承 。

1. 创建和使用层 ④ 溢出：层内容超出层范围（尺寸）时的处理方法 Visible：自动增加层的尺寸 hidden：保持层尺寸不变，隐藏超出部分内容 scroll：无论是否超出范围，显示滚动条 auto：当层内容超出层范围时，自动增加滚动

条，默认值。 ⑤ 剪辑：设置层的可视区域。其中的数值表示可视 区域与层边界的像素值

1. 创建和使用层

（ 6 ）转换表格和层 “ ” “ ”修改 菜单－ 转换

在 DW中，不能将模板中的层或应用模板的网页中的层转换为表格。

2. 创建层动画

动态 HTML（ DHTML）是 HTML与特定脚本语言的结合，该脚本语言可以用来改变 HTML元素的样式或定位属性。在 DW中时间轴面板使用动态 HTML来改变层及图片在一段时间内的属性，如位置、尺寸、可见性及堆栈顺序等，从而制作出动画效果。此外，可以使有时间轴加载其它操作，如执行行为。

2. 创建层动画

通过在不同时间改变层的位置、大小、可见性和叠放顺序来创建动画。“窗口”－“时间轴”把时间轴面板选择出来其中 B 为行为通道，显示时间轴对应时间所附近 的行为，使用浅蓝色方块来表示存在的行为

2. 创建层动画

（ 1 ）直接创建时间轴动画 时间轴只能移动层（ 2 ）删除某段动画 右键点击要删除的部分，选择“移除时间轴”（ 3 ）拖动路径创建动画 右键单击选定的层，选择“记录路径”； 或右键点击时间轴，选择“录制层路径”

练习

P263-P268 第 17章 利用时间轴制作浮动的小广告

（二） CSS 样式表

6.2 CSS在网页中的应用

样式是控制文本块或段落外观的一组格式属性，使用样式可以格式化文本 ,可以设置一篇文档的格式。 CSS样式（层叠样式单） 用来进行网页风格设计，通过设立样式表，可以统一控制 HTML中各标记的显示属性，通过只修改一个文件就可以改变一批网页的外观和格式。

CSS样式可以控制多个文本的文本格式，当 CSS样 式被更新时，所有使用 CSS样式的文档也自动随 着更新。

（二） CSS 样式表

1. 创建 CSS 样式

“ ”窗口 -“CSS ”样式 ：把“ CSS ”样式 面板选出来。

“全部”：显示网页中所有的 CSS样式规则 “正在”：显示当前选择网页元素的 CSS样式信息 ① 在面板中点击“新建 CSS ”样式 或者右键单击选“新建”创建 CSS样式， ② 将会出现“新建 CSS ”样式 对话框。

1. 创建 CSS 样式

DW中， CSS样式分为三种：①类（自定义样式）：－可应用于任何标签－主要应用于选定的区域，定义样式后需要手动对网页元素进行样式的应用

注意：该类型样式一般以“ .”开头命名，一般 dw会自动

在前面补全“ .”，但如果发现缺少需要手动加上，如“ .bg”。

1. 创建 CSS 样式

②标签（重新定义特定标签的外观） 该样式实际上是对现有 HTML标记的一种重新定义。在其中选择所需要的 HTML标签进行样式的定义。该样式只能对 HTML标签进行样式的定义，定义样式后，自动进行样式的应用。（即当用户创建或改变一个CSS样式时，所有使用该标记的文本格式也将自动被更新。）

1. 创建 CSS 样式如：当选择“标签”类型时，可以看到 “名称”变成了“标签”。网页是用 HTML代码编写的，是由很多“代码标签”写成的，所以当选择创建这一种样式时，可以把样式应用于所有选定的标签的地方。比如 body标签是 HTML正文部分，如果选了 body的话，那么当应用这个样式时，应用于 body标签的地方。如果选了 font标签，应用样式时，凡是有 font标签的地方都应用这样样式

1. 创建 CSS 样式

③高级（ ID、伪类选择器）该样式用于重新定义一些特殊的标记组合或包含了特殊的 ID属性的格式。当选择“高级“类型时，可以看到“名称”变成了“选择器”，选择器选项有“ a:link、 a:visited、 a:hover、

a:active”选，其实这一类型样式是可以用来设定链接时不同状态的效果，如选了 a:link就是准备来设定链接的状态效果， a:hover就是设置鼠标经过时的状态。

1. 创建 CSS 样式

“ ”对于 定义在 选项， CSS样式可以分为： ① 嵌入式：仅应用在该文档 ② 外部链接时：新建样式表文件 应用于多个文档，生成专门的 *.css文件。 “ ”选 新建样式表文件 时会把定义的样式单独保存 成文件，可以供其它文件使用

1. 创建 CSS 样式

CSS样式表属性选项设置：在 CSS样式定义属性窗口中，可以进行类型，背景等设

置，用的较多的为类型，背景，扩展。①类型里面有个“修饰”，用来设定链接文本的。默认的话我们创建了一个链接的话，文本下面会多了一条下划线的，可以对它进行修改。②扩展选项的光标选项可以改变光标形状，默认手型③ 扩展选项的过滤器选项可以设置很多效果，但具体参数设置需要看其它参考书。把“（）”里面部分内容删除即是使用默认参数。

1. 创建 CSS 样式

注意事项：①样式表有些功能应用的对象不同，所有有些设定可能对某些内容不起作用，比如应用于图像的设置如果应用于文本，当然看不到效果的改变②“高级“类型的几种状态设定好之后，预览的时候可能看到的都是链接访问过后的状态，原始状态可能马上看不了。③多个样式效果会互相影响。

2. 使用 CSS 样式表

创建好样式后，在“ CSS样式”面板中就有刚创建好的样式了。在“ CSS样式”面板单击要应用的样式 , 右键点击“套用”。或者在选定内容的属性面板进行设定。

链接外部 CSS样式： 想应用外部链接 CSS样式文件时点击“ CSS样式”上的“附加样式表”打开“链接外部样式表”对话框，或者右键单击选择“附加样式表”。选择要用到的 .css文件，可选链接或导入。

2. 使用 CSS 样式表

“导入 / 链接”的区别 “导入”可直接将外部样式表文件中的所有样式导入到当前网页中。使用此方法允许样式表的嵌套，但不是所有的浏览器都能识别该方法，故一般都采用“链接”的方式。

2. 使用 CSS 样式表

编辑、复制和删除 CSS样式①编辑：直接双击要编辑的 CSS样式名称； 在面板下方的样式属性也可以快速进行修改②复制、删除：可以右键点击选择相应操作

设置 CSS样式参数 “编辑”菜单－“首选参数”中修改“ CSS样式”

3. CSS 样式表应用例子

① 9 磅字（ 9pt）的制作一：类 应用在选定的文本② 9 磅字的制作二：标签 一般不用方法一。如果整个文档都是文字，要一个选定应用样式比较麻烦。正文内容在 HTML中的标签是 body，可以使用 CSS样式表的“重定义 HTML标签”，把 CSS样式表定义在 body标签中，这样就可以应用在 body标签的地方了，具体点就是正文部分。

③ 取消超级链接的下划线，并且改变鼠标悬停式的光标形状

3. CSS 样式表应用例子

④去掉链接颜色的方法修改页面属性使用样式表⑤利用 HTML标记改变所有图像上的边框⑥利用用户自定义样式制作项目列表图标⑦固定背景图像及不能让它上下滚动方法

CSS 样式表应用注意问题多个样式表那个起作用1.先内后外：经常会有样式表冲突问题，这时可能重新制作应用样式表。

2.同个样式后定义原则 a:link-a:visited-a:hover-a:actived 出现问题① 先定义 visited，再定义 hover② 先定义 hover，再定义 visited 访问链接后对比一下情况，注意那个定义在前的正确做法

练习

P134-P136 6.2.5 基础实例 --用 CSS修饰段落

（三） DIV+CSS 布局

6.3 用 DIV+CSS布局网页

1.插入一个“层” 2.使用 CSS样式表设置这个“层”的属性 3.重复，直到所有层都操作完毕，布局完毕

（三） DIV+CSS 布局

资源 Div+CSS布局最佳的方法是直接写代码，由于刚开头比较难，本课程只要求掌握基本操作先，继续提高请留意几个资源

1.蓝色理想网站关于“ Div+CSS布局”的两个入门教程（用浏览器直接预览不行的话，用 Word打开）

2.Moodle布局部分提供的 CSS文档资料

练习

P137-P140 6.3.2 进阶实例—用 Div+CSS布局方法设计网站首页