九CSS样式表.ppt

九.CSS样式表 九九.CSS.CSS样式表样式表第6章 用层和样式表布局并修饰 1.层的基本操作 2.CSS样式表 3.DIV+CSS样式表布局层是一种HTML内容的容器，通常由DIV及SPAN标记说明。层可定位在页面上的任意位置，并且其中可包含文本、图像、表单等所有可直接用于文档的元素。层提供了定位页面元素的方法，通过将页面元素放置于层中，用户可控制对象的上下叠放顺序，显示或隐藏，也可以通过时间轴同时在屏幕上移动一个或多个层（可制作动画）。层的定位和显示跟不同浏览器有关，需精确定位。（一）层的基本操作（一）层的基本操作1.1.创建和使用层创建和使用层当用户在文档中放置层时，DW将在代码中插入该层的HTML标签。用户可以选择让DW将DIV标签或SPAN标签用于自己的层。默认情况下，DW会使用DIV标签创建层。层代码可以插入在HTML文件正文中的任意位置。但在页面中绘制层时，DW将在body标记的后面加入层代码。如果嵌套一个层，则DW会在父层中插入代码。1.1.创建和使用层创建和使用层（1）创建层和嵌套层“查看”菜单“可视化助理”“层边框（AP元素轮廓线）”创建层：“插入栏”“布局”“绘制AP DIV”或通过“插入”菜单“布局对象”“AP DIV”嵌套层：鼠标插入点放置在要创建嵌套层的层中，然后通过“插入”菜单“布局对象”“AP DIV”；或按住ALT键在层中直接绘制嵌套1.1.创建和使用层创建和使用层（2）显示层面板（AP元素面板）选项设置：显示或隐藏：如果前面什么都没有的话，则该层的可见性继承其父层的显示属性（默认）在层名处双击可修改层名在Z列单击可修改层的层次属性值，数值大的位于上层。单击可以修改层次。也可以选定一个层，把层直接拖到想要的层次也可以。“防止重叠”：有嵌套层时应选定1.1.创建和使用层创建和使用层（3）设置层参数 “编辑”菜单“首选参数”“AP元素”1.1.创建和使用层创建和使用层（4）选择层和激活层选择层：要对层进行移动，调整大小等就要先选择层，选择层才能对层进行操作。要选择层的话，可以在层面板里面选择，或点击层边框，或点击层标记等选中后，可以直接移动或调整层的大小了。选择多个时，shift键。要对齐层，多个选定之后通过“修改”菜单“排列顺序”“对齐”。1.1.创建和使用层创建和使用层 激活层：要把对象插入层中，首先要激活层。把光标移动到层内的任何地方单击。就可以在里面插入文本，图像等对象了 激活层不等于选择层。层里面的内容怎么定位？P129右下角的一堆话1.1.创建和使用层创建和使用层（5）设置层属性 左、上：设定层相对与页面或父层的位置 （坐标）Z轴：设置层的层次属性值 显示：设置层的可见性，default指不指明 可见性，但一般default是“继承”。1.1.创建和使用层创建和使用层 溢出：层内容超出层范围（尺寸）时的处理方法 Visible：自动增加层的尺寸 hidden：保持层尺寸不变，隐藏超出部分内容 scroll：无论是否超出范围，显示滚动条 auto：当层内容超出层范围时，自动增加滚动 条，默认值。剪辑：设置层的可视区域。其中的数值表示可视 区域与层边界的像素值1.1.创建和使用层创建和使用层（6）转换表格和层 “修改”菜单“转换”在DW中，不能将模板中的层或应用模板的网页中的层转换为表格。2.2.创建层动画创建层动画 动态HTML（DHTML）是HTML与特定脚本语言的结合，该脚本语言可以用来改变HTML元素的样式或定位属性。在DW中时间轴面板使用动态HTML来改变层及图片在一段时间内的属性，如位置、尺寸、可见性及堆栈顺序等，从而制作出动画效果。此外，可以使有时间轴加载其它操作，如执行行为。2.2.创建层动画创建层动画通过在不同时间改变层的位置、大小、可见性和叠放顺序来创建动画。“窗口”“时间轴”把时间轴面板选择出来其中B为行为通道，显示时间轴对应时间所附近 的行为，使用浅蓝色方块来表示存在的行为2.2.创建层动画创建层动画（1）直接创建时间轴动画 时间轴只能移动层（2）删除某段动画 右键点击要删除的部分，选择“移除时间轴”（3）拖动路径创建动画 右键单击选定的层，选择“记录路径”；或右键点击时间轴，选择“录制层路径”练习练习P263-P268 第17章 利用时间轴制作浮动的小广告（二）（二）CSSCSS样式表样式表6.2 CSS在网页中的应用 样式是控制文本块或段落外观的一组格式属性，使用样式可以格式化文本,可以设置一篇文档的格式。CSS样式（层叠样式单）用来进行网页风格设计，通过设立样式表，可以统一控制HTML中各标记的显示属性，通过只修改一个文件就可以改变一批网页的外观和格式。CSS样式可以控制多个文本的文本格式，当CSS样 式被更新时，所有使用CSS样式的文档也自动随 着更新。（二）（二）CSS样式表样式表1.1.创建创建CSSCSS样式样式“窗口”-“CSS样式”：把“CSS样式”面板选出来。“全部”：显示网页中所有的CSS样式规则 “正在”：显示当前选择网页元素的CSS样式信息 在面板中点击“新建CSS样式”或者右键单击选“新建”创建CSS样式，将会出现“新建CSS样式”对话框。1.1.创建创建CSSCSS样式样式DW中，CSS样式分为三种：类（自定义样式）：可应用于任何标签主要应用于选定的区域，定义样式后需要手动对网页元素进行样式的应用注意：该类型样式一般以“.”开头命名，一般dw会自动在前面补全“.”，但如果发现缺少需要手动加上，如“.bg”。1.1.创建创建CSSCSS样式样式标签（重新定义特定标签的外观）该样式实际上是对现有HTML标记的一种重新定义。在其中选择所需要的HTML标签进行样式的定义。该样式只能对HTML标签进行样式的定义，定义样式后，自动进行样式的应用。（即当用户创建或改变一个CSS样式时，所有使用该标记的文本格式也将自动被更新。）1.1.创建创建CSSCSS样式样式如：当选择“标签”类型时，可以看到“名称”变成了“标签”。网页是用HTML代码编写的，是由很多“代码标签”写成的，所以当选择创建这一种样式时，可以把样式应用于所有选定的标签的地方。比如body标签是HTML正文部分，如果选了body的话，那么当应用这个样式时，应用于body标签的地方。如果选了font标签，应用样式时，凡是有font标签的地方都应用这样样式1.1.创建创建CSSCSS样式样式高级（ID、伪类选择器）该样式用于重新定义一些特殊的标记组合或包含了特殊的ID属性的格式。当选择“高级“类型时，可以看到“名称”变成了“选择器”，选择器选项有“a:link、a:visited、a:hover、a:active”选，其实这一类型样式是可以用来设定链接时不同状态的效果，如选了a:link就是准备来设定链接的状态效果，a:hover就是设置鼠标经过时的状态。1.1.创建创建CSSCSS样式样式对于“定义在”选项，CSS样式可以分为：嵌入式：仅应用在该文档 外部链接时：新建样式表文件 应用于多个文档，生成专门的*.css文件。选“新建样式表文件”时会把定义的样式单独保存 成文件，可以供其它文件使用1.1.创建创建CSSCSS样式样式CSS样式表属性选项设置：在CSS样式定义属性窗口中，可以进行类型，背景等设置，用的较多的为类型，背景，扩展。类型里面有个“修饰”，用来设定链接文本的。默认的话我们创建了一个链接的话，文本下面会多了一条下划线的，可以对它进行修改。扩展选项的光标选项可以改变光标形状，默认手型 扩展选项的过滤器选项可以设置很多效果，但具体参数设置需要看其它参考书。把“（）”里面部分内容删除即是使用默认参数。1.1.创建创建CSSCSS样式样式注意事项：样式表有些功能应用的对象不同，所有有些设定可能对某些内容不起作用，比如应用于图像的设置如果应用于文本，当然看不到效果的改变“高级“类型的几种状态设定好之后，预览的时候可能看到的都是链接访问过后的状态，原始状态可能马上看不了。多个样式效果会互相影响。2.2.使用使用CSSCSS样式表样式表创建好样式后，在“CSS样式”面板中就有刚创建好的样式了。在“CSS样式”面板单击要应用的样式,右键点击“套用”。或者在选定内容的属性面板进行设定。链接外部CSS样式：想应用外部链接CSS样式文件时点击“CSS样式”上的“附加样式表”打开“链接外部样式表”对话框，或者右键单击选择“附加样式表”。选择要用到的.css文件，可选链接或导入。2.2.使用使用CSSCSS样式表样式表“导入/链接”的区别 “导入”可直接将外部样式表文件中的所有样式导入到当前网页中。使用此方法允许样式表的嵌套，但不是所有的浏览器都能识别该方法，故一般都采用“链接”的方式。2.2.使用使用CSSCSS样式表样式表编辑、复制和删除CSS样式编辑：直接双击要编辑的CSS样式名称；在面板下方的样式属性也可以快速进行修改复制、删除：可以右键点击选择相应操作设置CSS样式参数 “编辑”菜单“首选参数”中修改“CSS样式”3.3.CSSCSS样式表应用例子样式表应用例子 9磅字（9pt）的制作一：类 应用在选定的文本 9磅字的制作二：标签 一般不用方法一。如果整个文档都是文字，要一个选定应用样式比较麻烦。正文内容在HTML中的标签是body，可以使用CSS样式表的“重定义HTML标签”，把CSS样式表定义在body标签中，这样就可以应用在body标签的地方了，具体点就是正文部分。取消超级链接的下划线，并且改变鼠标悬停式的光标形状3.3.CSSCSS样式表应用例子样式表应用例子去掉链接颜色的方法修改页面属性使用样式表利用HTML标记改变所有图像上的边框利用用户自定义样式制作项目列表图标固定背景图像及不能让它上下滚动方法CSSCSS样式表应用注意问题样式表应用注意问题多个样式表那个起作用1.先内后外：经常会有样式表冲突问题，这时可能重新制作应用样式表。2.同个样式后定义原则 a:link-a:visited-a:hover-a:actived 出现问题 先定义visited，再定义hover 先定义hover，再定义visited 访问链接后对比一下情况，注意那个定义在前的正确做法练习练习P134-P136 6.2.5 基础实例-用CSS修饰段落（三）（三）DIV+CSSDIV+CSS布局布局6.3 用DIV+CSS布局网页 1.插入一个“层”2.使用CSS样式表设置这个“层”的属性 3.重复，直到所有层都操作完毕，布局完毕（三）（三）DIV+CSSDIV+CSS布局布局资源 Div+CSS布局最佳的方法是直接写代码，由于刚开头比较难，本课程只要求掌握基本操作先，继续提高请留意几个资源1.蓝色理想网站关于“Div+CSS布局”的两个入门教程（用浏览器直接预览不行的话，用Word打开）2.Moodle布局部分提供的CSS文档资料练习练习P137-P140 6.3.2 进阶实例用Div+CSS布局方法设计网站首页