九CSS样式表.ppt

九.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布局方法设计网站首页,