《网页设计及制作_06在Dreamweaver8中使用CSS设置页面格式课件》由会员分享，可在线阅读，更多相关《网页设计及制作_06在Dreamweaver8中使用CSS设置页面格式课件（22页珍藏版）》请在金锄头文库上搜索。
1、第六讲o课题：在Dreamweaver8中使用CSS设置页面格式o目的及要求：使用CSS设置页面格式o教学重点：新建、编辑CSS样式和文档的方法以及超级链接的CSS样式定义o教学难点：附加样式表o教学课时：2课时o教学方法：提问与比较教学方式，激发学生兴趣；使用使用CSS样式样式 精美的网页离不开精美的网页离不开CSSCSS技术，使用技术，使用CSSCSS技术，可以有效地对页面的布局、技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。字体、颜色、背景和其他效果实现更加精确的控制。CSSCSS样式它可以定样式它可以定义义HTMLHTML标签，按列表的语法将许多文字、图片
2、、表格、标签，按列表的语法将许多文字、图片、表格、表单、图层等设计加以格式设定。在表单、图层等设计加以格式设定。在HTMLHTML语法中，常常语法中，常常需要使用到一些设定颜色、字体大小或框线粗细之类的标需要使用到一些设定颜色、字体大小或框线粗细之类的标签，而签，而CSSCSS在开始制作网页时就将这些设定做好，不需要在开始制作网页时就将这些设定做好，不需要在制作网页文档时再反复写入同样的标签。在制作网页文档时再反复写入同样的标签。认识CSS样式 CSSCSS样式是样式是Cascading Style Sheets(Cascading Style Sheets(层叠样式单层叠样式单) )的简称，
3、也可以称为的简称，也可以称为“ “级联样式表级联样式表” ”，它是一种网页制作的新技术，利用它可以对网页中的文本进行，它是一种网页制作的新技术，利用它可以对网页中的文本进行精确的格式化控制。精确的格式化控制。 在在CSSCSS样式之前，样式之前，HTMLHTML样式被广泛应用，样式被广泛应用，HTMLHTML样式用于控制单个文档中样式用于控制单个文档中某范围内文本的格式。而某范围内文本的格式。而CSSCSS样式与之不同，它不仅可以控制单个文档中的多样式与之不同，它不仅可以控制单个文档中的多个范围内文本的格式，而且可以控制多个文档中文本的格式。个范围内文本的格式，而且可以控制多个文档中文本的格式
4、。要管理一个非常大的网站，使用要管理一个非常大的网站，使用CSSCSS样式，可以快速格式化整个站点或多个文样式，可以快速格式化整个站点或多个文档中的字体、图像等网页元素的格式。并且，档中的字体、图像等网页元素的格式。并且，CSSCSS样式可以实现多种不能用样式可以实现多种不能用HTMLHTML样式实现的功能。样式实现的功能。uu CSSCSS的基本概念的基本概念 uu CSSCSS样式面板和常用类型样式面板和常用类型 u 创建创建CSSCSS样式样式 uu 应用应用CSSCSS样式样式CSS的基本概念 CSSCSS，是是用用来来控控制制一一个个网网页页文文档档中中的的某某文文本本区区域域外外观
5、观的的一一组组格格式式属属性性。使使用用CSSCSS能能够够简简化化网网页页代代码码，加加快快下下载载速速度度，减减少少上上传传的的代代码码数数量量，从从而而可可以以避避免免重重复复操操作作。CSSCSS样样式式表表是是对对HTMLHTML语语法法的的一一次次重重达达革革新新，它它位位于于文文档档的的区区，作作用用范范围围由由CLASSCLASS或或其其他他任任何何符符合合CSSCSS规规范范的的文文本本来来设设置置。对对于于其其他他现现 有有 的的 文文 档档 ， 只只 要要 其其 中中 的的 CSSCSS样样 式式 符符 合合 规规 范范 ，DreamweaverDreamweaver就能
6、识别它们。就能识别它们。CSS样式基础o在Dreamweaver8中可以定义下列类型的CSS样式：o自定义CSS样式（也称为类样式）：使用该样式，可以将样式属性设置为任何文本范围或文本块；oHTML标签样式：使用该样式，可以重定义特定标签的格式。创建或更改该HTML标签的CSS样式时，所有使用该标签的文本都将得到更新；oCSS选择器高级样式：使用该样式，可以重定义特定标签组合的格式或者重定义包含特定ID属性的所有标签的格式。第第9章章 在在Dreamweaver8中使用中使用CSS设置页面格式设置页面格式CSS样式面板和常用类型 CSSCSS常用的类型有外部样式表和内部样式表两种，要创建常用的
7、类型有外部样式表和内部样式表两种，要创建样式表，可以在样式表，可以在“ “CSSCSS样式样式” ”面板中创建。面板中创建。 外部外部CSSCSS样式表：一系列存储在一个单独的外部样式表：一系列存储在一个单独的外部CSS(.cssCSS(.css) )文件（并非文件（并非.HTML.HTML文件）中的文件）中的csscss规则。利用文档文件头部规则。利用文档文件头部分中的链接，该文件被链接到分中的链接，该文件被链接到WebWeb站点中的一个或多个页站点中的一个或多个页面。面。内部（或嵌入式）内部（或嵌入式）CSSCSS样式表：一系列包含在样式表：一系列包含在HTMLHTML文档文档文件头部分的
8、文件头部分的标签内的规则。标签内的规则。添加层叠样式表的方法1.直接在标签内定义css实例特点：使用简单、显示直观，但是无法发挥样式表的优势，不建议使用2添加在HTML的里3链接样式linkrel=stylesheethref=“style.css”特点：最适合大型网站的CSS样式定义创建CSS样式 在在Dreamweaver Dreamweaver 中，可以中，可以创建一个创建一个CSSCSS样式，然后应用于文档的某个部分，样式，然后应用于文档的某个部分，完成文本的格式化。要创建完成文本的格式化。要创建CSSCSS样式，可在文档编辑窗口中单击鼠标右键，在样式，可在文档编辑窗口中单击鼠标右键，
9、在弹出的快捷菜单中选择弹出的快捷菜单中选择“ “CSSCSS样式样式” ”|“ |“新建新建” ”命令，如图所示，打开命令，如图所示，打开“ “新建新建CSSCSS规则规则” ”对话框，如图所示。对话框，如图所示。 选择“CSS样式”|“新建”命令 “CSS规则定义”对话框应用CSS样式 创建了创建了CSSCSS样式表后，就可以利用该样式表快速设置页面上的样式，使网站样式表后，就可以利用该样式表快速设置页面上的样式，使网站具有统一的风格了。在具有统一的风格了。在Dreamweaver Dreamweaver 环境下，对文档指定元素环境下，对文档指定元素应用应用CSSCSS样式可以在样式可以在“
10、 “属性属性” ”面板中设定、在标签处设定、面板中设定、在标签处设定、在在“ “标签检查器标签检查器” ”面板组的面板组的“ “属性属性” ”面板中和右击文档选面板中和右击文档选择快捷菜单设定。择快捷菜单设定。管理CSS样式 如果要对如果要对CSSCSS样式进行编辑、删除、链接或者新建等操样式进行编辑、删除、链接或者新建等操作，可以在作，可以在“ “CSSCSS样式样式” ”面板中找到相应的操作按钮面板中找到相应的操作按钮。uu 链接和导入链接和导入CSSCSS样式样式 uu 编辑和删除编辑和删除CSSCSS样式样式 u 设置其他设置其他CSSCSS样式样式 u CSS样式冲突链接和导入CSS
11、样式 单单击击“ “CSSCSS样样式式” ”面面板板中中的的“ “附附加加样样式式表表” ”按按钮钮，打打开开“ “链链接接外外部部样样式式表表” ”对对话话框框。单单击击对对话话框框中中的的“ “浏浏览览” ”按按钮钮，打打开开“ “选选择择样样式式表表文文件件” ”对对话话框框，如如图图所所示示，在在对对话话框框中中选选择择需需要要链链接接的的外外部部CSSCSS样样式式文文件件，然然后后单单击击“ “确确定定” ”按按钮钮，将将CSSCSS样样式式文文件件倒倒入入到到“ “链链接接外外部部样样式式表表” ”对对话话框框种种，选选中中“ “添添加加为为” ”选选项项区区域域中中的的“ “
12、链链接接” ”单单选选按按钮钮，单单击击“ “确确定定” ”按按钮钮，在在“ “CSSCSS样式样式” ”面板的列表中将显示链接的面板的列表中将显示链接的CSSCSS文件。文件。编辑和删除CSS样式打打开开“ “CSSCSS样样式式” ”面面板板，选选中中要要编编辑辑的的CSSCSS样样式式，单单击击“ “编编辑辑样样式式表表” ”按按钮钮，打打开开“ “CSSCSS规规则则定定义义” ”对对话话框框，可可对对在在CSSCSS面面板板中中选中的选中的CSSCSS样式进行编辑，如图所示。样式进行编辑，如图所示。设置其他CSS样式 除除了了设设置置CSSCSS文文本本样样式式外外，还还可可以以设设
13、置置“ “背背景景” ”、“ “区区块块” ”、“ “方方框框” ”、“ “边边框框” ”、“ “列列表表” ”、“ “定定位位” ”和和“ “扩扩展展” ”样式。样式。CSS样式冲突 当当相相同同的的文文本本上上应应用用两两种种或或多多种种CSSCSS样样式式时时，可可能能会会产产生生冲冲突突，并并导导致致不不可可预预料料的的结结果果。浏浏览览器器显显示示样样式式格格式式依依照照以下规则。以下规则。 如果两种样式同时应用于相同文本，浏览器会将两种样如果两种样式同时应用于相同文本，浏览器会将两种样式的所有格式都显示出来，除非样式格式发生冲突。例如，式的所有格式都显示出来，除非样式格式发生冲突。
14、例如，一种样式指定文本的颜色为蓝色，另一样式则指定文本颜一种样式指定文本的颜色为蓝色，另一样式则指定文本颜色为红色。色为红色。 如果应用于同一个文本的两种样式发生冲突，则浏览器如果应用于同一个文本的两种样式发生冲突，则浏览器会显示最内部的样式设置格式会显示最内部的样式设置格式( (即最靠近文本的样式即最靠近文本的样式) )。 如果存在直接冲突，则如果存在直接冲突，则CSSCSS样式样式( (由由classclass属性决定的样属性决定的样式式) )会覆盖基于会覆盖基于HTMLHTML标记的样式格式。标记的样式格式。 Alpha：设置文字和图片的透明度。 Blur：模糊。 DropShadow：
15、添加阴影 FlipH:将图像或文本进行水平翻转 FlipV :将图像或文本进行垂直翻转 Glow：为图像增加特定颜色闪烁 Gray：使图像发生灰度转变 Invert:反转图像的色调、饱和度和亮度常用的几个滤镜：Light：创建目标被一个或多个光源照亮的幻觉效果。Mask：设置所有透明像素为指定颜色，使用特定的转换类型显示图像。XBay:X射线wave：波浪常用的几个滤镜：1、AlphaAlpha文字和图片的透明度表达格式：filter:alpha(opacity=.,finishopacity=.,style=.,startX=.,startY=.,finishX=.,finishY=.)Op
16、acity：指透明度。1100的数值表示从透明到不透明的程度。Style:指透明区域的图像特征。数值0表示纯色，数值1指线性变化，数值2指放射状渐变，3指矩形渐变Finishopacity：这个属性是可选的，用来设置文字或图像结束时的透明度，这可以达到一种渐变效果。StartX，StartY：指透明效果开始的坐标。显而易见，后面的finishX,finishY指的是透明效果的结束坐标。2、BlurBlur模糊表达式：filter:blur(add=.,direction=.,strength=.)Add:大于0的任意整数Direction:用来设置模糊的方向。（0-315）Strength:指被模糊的幅度，只能用整数。3、DropshadowDropshadow:添加阴影。表达式：Filter:DropShadow(Color=.,Offx=.,Offy=.,Positive=.)Color:阴影颜色。Offx:向右偏移的数值。Offy:向下偏移的数值。Positive:参数有两个值：1为任何非透明像素建立可见的投影，0为透明的像素部分建立可见的投影。
