Download presentation
Presentation is loading. Please wait.
1
第六讲 课 题：在Dreamweaver8中使用CSS设置页面格式 目的及要求：使用CSS设置页面格式
教学难点：附加样式表 教学课时：2课时 教学方法：提问与比较教学方式，激发学生兴趣；
2
使用CSS样式 精美的网页离不开CSS技术，使用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。CSS样式它可以定义HTML标签，按列表的语法将许多文字、图片、表格、表单、图层等设计加以格式设定。在HTML语法中，常常需要使用到一些设定颜色、字体大小或框线粗细之类的标签，而CSS在开始制作网页时就将这些设定做好，不需要在制作网页文档时再反复写入同样的标签。
3
认识CSS样式 CSS样式是Cascading Style Sheets(层叠样式单)的简称，也可以称为“级联样式表”，它是一种网页制作的新技术，利用它可以对网页中的文本进行精确的格式化控制。 在CSS样式之前，HTML样式被广泛应用，HTML样式用于控制单个文档中某范围内文本的格式。而CSS样式与之不同，它不仅可以控制单个文档中的多个范围内文本的格式，而且可以控制多个文档中文本的格式。 要管理一个非常大的网站，使用CSS样式，可以快速格式化整个站点或多个文档中的字体、图像等网页元素的格式。并且，CSS样式可以实现多种不能用HTML样式实现的功能。 CSS的基本概念 CSS样式面板和常用类型 创建CSS样式 应用CSS样式
4
CSS的基本概念 CSS，是用来控制一个网页文档中的某文本区域外观的一组格式属性。使用CSS能够简化网页代码，加快下载速度，减少上传的代码数量，从而可以避免重复操作。CSS样式表是对HTML语法的一次重达革新，它位于文档的<head>区，作用范围由CLASS或其他任何符合CSS规范的文本来设置。对于其他现有的文档，只要其中的CSS样式符合规范，Dreamweaver就能识别它们。
5
CSS样式基础 在Dreamweaver8中可以定义下列类型的CSS样式：
HTML标签样式：使用该样式，可以重定义特定标签的格式。创建或更改该HTML标签的CSS样式时，所有使用该标签的文本都将得到更新； CSS选择器高级样式：使用该样式，可以重定义特定标签组合的格式或者重定义包含特定ID属性的所有标签的格式。
6
CSS样式面板和常用类型 CSS常用的类型有外部样式表和内部样式表两种，要创建样式表，可以在“CSS样式”面板中创建。 外部CSS样式表：一系列存储在一个单独的外部CSS(.css)文件（并非.HTML文件）中的css规则。利用文档文件头部分中的链接，该文件被链接到Web站点中的一个或多个页面。 内部（或嵌入式）CSS样式表：一系列包含在HTML文档文件头部分的<style>…</style>标签内的规则。
7
添加层叠样式表的方法 1.直接在标签内定义 <p style="color:blue; font-size:10pt"> css实例</p> 特点：使用简单、显示直观，但是无法发挥样式表的优势，不建议使用
8
2添加在HTML的<head>里
<style type=“text/css”> <!-- 样式表的具体内容 --> </style> </head>
9
3链接样式 <head> <link rel=stylesheet href=“style.css”…
10
创建CSS样式 在Dreamweaver 中，可以创建一个CSS样式，然后应用于文档的某个部分，完成文本的格式化。要创建CSS样式，可在文档编辑窗口中单击鼠标右键，在弹出的快捷菜单中选择“CSS样式”|“新建”命令，如图所示，打开“新建CSS规则”对话框，如图所示。 选择“CSS样式”|“新建”命令 “CSS规则定义”对话框
11
应用CSS样式 创建了CSS样式表后，就可以利用该样式表快速设置页面上的样式，使网站具有统一的风格了。在Dreamweaver 环境下，对文档指定元素应用CSS样式可以在“属性”面板中设定、在标签处设定、在“标签检查器”面板组的“属性”面板中和右击文档选择快捷菜单设定。
12
管理CSS样式 如果要对CSS样式进行编辑、删除、链接或者新建等操作，可以在“CSS样式”面板中找到相应的操作按钮。 链接和导入CSS样式
13
链接和导入CSS样式 单击“CSS样式”面板中的“附加样式表”按钮，打开“链接外部样式表”对话框。单击对话框中的“浏览”按钮，打开“选择样式表文件”对话框，如图所示，在对话框中选择需要链接的外部CSS样式文件，然后单击“确定”按钮，将CSS样式文件倒入到“链接外部样式表”对话框种，选中“添加为”选项区域中的“链接”单选按钮，单击“确定”按钮，在“CSS样式”面板的列表中将显示链接的CSS文件。
14
编辑和删除CSS样式 打开“CSS样式”面板，选中要编辑的CSS样式，单击“编辑样式表”按钮，打开“CSS规则定义”对话框，可对在CSS面板中选中的CSS样式进行编辑，如图所示。
15
设置其他CSS样式 除了设置CSS文本样式外，还可以设置“背景”、“区块”、“方框”、“边框”、“列表”、“定位”和“扩展”样式。
16
CSS样式冲突 当相同的文本上应用两种或多种CSS样式时，可能会产生冲突，并导致不可预料的结果。浏览器显示样式格式依照以下规则。
如果两种样式同时应用于相同文本，浏览器会将两种样式的所有格式都显示出来，除非样式格式发生冲突。例如，一种样式指定文本的颜色为蓝色，另一样式则指定文本颜色为红色。 如果应用于同一个文本的两种样式发生冲突，则浏览器会显示最内部的样式设置格式(即最靠近文本的样式)。 如果存在直接冲突，则CSS样式(由class属性决定的样式)会覆盖基于HTML标记的样式格式。
17
常用的几个滤镜： Alpha：设置文字和图片的透明度。 Blur：模糊。 DropShadow：添加阴影 FlipH:将图像或文本进行水平翻转 FlipV :将图像或文本进行垂直翻转 Glow：为图像增加特定颜色闪烁 Gray：使图像发生灰度转变 Invert:反转图像的色调、饱和度和亮度
18
常用的几个滤镜： Light：创建目标被一个或多个光源照亮的幻觉 效果。 Mask：设置所有透明像素为指定颜色，使用特定的转换类型显示图像。
XBay:X射线 wave：波浪
19
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指的是透明效果的结束坐标。
20
2、Blur Blur 模糊 表达式： filter:blur(add=...,direction=...,strength=...)
21
3、Dropshadow Dropshadow: 添加阴影。 表达式：
Filter:DropShadow(Color=...,Offx=...,Offy=...,Positive=...) Color:阴影颜色。 Offx:向右偏移的数值。 Offy:向下偏移的数值。 Positive:参数有两个值：1为任何非透明像素建立可见的投影，0为透明的像素部分建立可见的投影。
Similar presentations
