网页设计与制作_06在Dreamweaver8中使用CSS设置页面格式.ppt

第六讲 课 题：在Dreamweaver8中使用CSS设置页面格式 目的及要求：使用CSS设置页面格式 教学重点：新建、编辑CSS样式和文档的方法以及超级链接的CSS样式定义 教学难点：附加样式表 教学课时：2课时 教学方法：提问与比较教学方式，激发学生兴趣； CSS样式基础 在Dreamweaver8中可以定义下列类型的CSS样式： 自定义CSS样式（也称为类样式）：使用该样式，可以将样式属性设置为任何文本范围或文本块； HTML标签样式：使用该样式，可以重定义特定标签的格式。创建或更改该HTML标签的CSS样式时，所有使用该标签的文本都将得到更新； CSS选择器高级样式：使用该样式，可以重定义特定标签组合的格式或者重定义包含特定ID属性的所有标签的格式。 添加层叠样式表的方法 1.直接在标签内定义 p style=color:blue; font-size:10pt css实例/p 特点：使用简单、显示直观，但是无法发挥样式表的优势，不建议使用 2添加在HTML的head里 head style type=“text/css” !-- 样式表的具体内容 -- /style /head 3链接样式 head link rel=stylesheet href=“style.css”… /head 特点：最适合大型网站的CSS样式定义 常用的几个滤镜： Light：创建目标被一个或多个光源照亮的幻觉 效果。 Mask：设置所有透明像素为指定颜色，使用特定的转换类型显示图像。 XBay:X射线 wave：波浪 1、Alpha Alpha文字和图片的透明度 ??表达格式： filter:alpha(opacity=...,finishopacity=...,style=...,startX=...,startY=...,finishX=...,finishY=...) Opacity：指透明度。1~100的数值表示从透明到不透明的程度。 Style:指透明区域的图像特征。数值0表示纯色，数值1指线性变化，数值2指放射状渐变，3指矩形渐变 Finishopacity：这个属性是可选的，用来设置文字或图像结束时的透明度，这可以达到一种渐变效果。 StartX，StartY：指透明效果开始的坐标。显而易见，后面的finishX,finishY指的是透明效果的结束坐标。 2、Blur Blur 模糊 表达式： filter:blur(add=...,direction=...,strength=...) Add:大于0的任意整数 Direction:用来设置模糊的方向。（0-315） Strength:指被模糊的幅度，只能用整数。 3、Dropshadow Dropshadow: 添加阴影。 表达式： Filter:DropShadow(Color=...,Offx=...,Offy=...,Positive=...) Color:阴影颜色。 Offx:向右偏移的数值。 Offy:向下偏移的数值。 Positive:参数有两个值：1为任何非透明像素建立可见的投影，0为透明的像素部分建立可见的投影。 * * 使用CSS样式 精美的网页离不开CSS技术，使用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。CSS样式它可以定义HTML标签，按列表的语法将许多文字、图片、表格、表单、图层等设计加以格式设定。在HTML语法中，常常需要使用到一些设定颜色、字体大小或框线粗细之类的标签，而CSS在开始制作网页时就将这些设定做好，不需要在制作网页文档时再反复写入同样的标签。 认识CSS样式 CSS样式是Cascading Style Sheets(层叠样式单)的简称，也可以称为“级联样式表”，它是一种网页制作的新技术，利用它可以对网页中的文本进行精确的格式化控制。 在CSS样式之前，HTML样式被广泛应用，HTML样式用于控制单个文档中某范围内文本的格式。而CSS样式与之不同，它不仅可以控制单个文档中的多个范围内文本的格式，而且可以控制多个文档中文本的格式。 要管理一个非常大的网站，使用CSS样式，可以快速格式化整个站点或多个文档中的字体、图像等网页元素的格式。并且，CSS样式可以实现多种不能用HTML样式实现的功能。 CSS的基本概念 CSS样式面板和常用类型 创建CSS样式 应用CSS样式 CSS的基本概念 CSS，是用来控制一个网页文档中的某文本区域外观的一组格式属性。使用CSS能够简化网页代码，加快下载速度，减少上传的代码数量，从而可以避免重复操作。CSS样式表是对HT