九 .CSS 样式表

九.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样式表 样式是控制文本块或段落外观的一组格式属性，使用样式可以格式化文本,可以设置一篇文档的格式。 • CSS样式（层叠样式单）用来进行网页风格设计，通过设立样式表，可以统一控制HTML中各标记的显示属性，通过只修改一个文件就可以改变一批网页的外观和格式。 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布局方法设计网站首页

九 .CSS 样式表

九 .CSS 样式表

Presentation Transcript