新编DreamweaverCS3动态网页设计与制作教程.ppt

9.1 项目1：创建样式表9.2 项目2：控制浏览器中的文字大小9.3 项目3：设置行间距9.4 项目4：为图片添加边框效果9.5 项目5：利用“自定义样式表”改变鼠标指针形态9.6 项目6：利用有关链接的样式表修改链接格式9.7 项目7：控制页面背景图像样式9.8 项目8：利用“自定义样式表”制作项目图标9.9 项目9：CSS样式滤镜的应用9.10 课堂综合训练9.11 小结习题,第9章 CSS样式表,CSS指令以规则的方式给出，一个样式表是这些规则的集合。规则是组成HTML或者被称为“选择器”的自定义标记的语句。例如，下面列出了一个使所有内容的颜色变成在color中给出的红色的CSS规则。.t1 color:#FF0000;,9.1 项目1：创建样式表,1.操作步骤可以在“CSS样式”面板中创建样式表。1)CSS样式面板在Dreamweaver CS3下，选择【窗口】【CSS样式】(快捷键为Shift+F11)命令，打开【CSS样式】面板，如图9.1所示。,2)CSS常用类型单击【CSS样式】面板中的按钮，弹出【新建CSS规则】对话框，如图9.2所示。按照作用对象可以将CSS样式分为三种类型：类(可应用于任何标签)、标签(重新定义特定标签的外观)和高级(ID、伪类选择器等)。(1)类。类用来设置一个自定义样式。具体操作如下：选择【窗口】【CSS样式】(快捷键为Shift+F11)命令，打开【CSS样式】面板。,图9.2【新建CSS规则】对话框,单击【CSS样式】面板中的按钮，弹出【新建CSS规则】对话框。选择【类(可应用于任何标签)】，然后在“名称”后的下拉列表框中输入这个样式的名称。注意，类名称必须以英文句点开头，并且包含任何字母和数字组合，例如“.css1”。在【定义在】中选择【仅对该文档】。然后单击【确定】按钮，完成设置，将弹出【.css1的CSS规则定义】对话框，如图9.3所示。,图9.3【.css1的CSS规则定义】对话框,(2)标签。标签用来重新定义某种类型页面元素的格式。制作后，不需要选中表格对象，就可以直接应用到页面中去。具体操作如下：选择【窗口】【CSS样式】(快捷键为Shift+F11)命令，打开【CSS样式】面板。单击【CSS样式】面板中的【新建CSS规则】按钮，弹出【新建CSS规则】对话框。选择【标签(重新定义特定标签的外观)】，在【标签】后的下拉列表框里选择一个HTML标签，也可以直接在【标签】后的下拉列表框里输入这个标签，例如输入“td”，如图9.4所示。,图9.4【新建CSS规则】对话框,在【定义在】中选择【仅对该文档】，然后单击【确定】按钮，完成设置，将弹出【td的CSS规则定义】对话框，如图9.5所示。(3)高级。高级样式为具体的某个标签组合或所有包含特定ID属性的标签定义格式。具体操作如下：选择【窗口】【CSS样式】(快捷键为Shift+F11)命令，打开【CSS样式】面板。,图9.5【td的CSS规则定义】对话框,单击【CSS样式】面板中的按钮，弹出【新建CSS规则】对话框。选择【高级(ID、伪类选择器等)】，在【选择器】后的下拉列表框里输入一个HTML标签，也可以直接在【选择器】后的下拉列表框里选择一个HTML标签。提供的标签包括a:active、a:hover、a:link和a:visited。,a:active：超链接文本被激活时的显示样式。a:hover：光标移到超链接文本上时的显示样式。a:link：正常的未被访问过的超链接文本的显示样式。a:visited：被访问过的超链接文本的显示样式。这里选择“a:link”，如图9.6所示。在【定义在】中选择【仅对该文档】，然后单击【确定】按钮，完成设置，将弹出【a:link的CSS规则定义】对话框，如图9.7所示。,图9.6【新建高级样式】对话框,图9.7【a:link的CSS规则定义】对话框,2.相关知识点CSS样式面板的操作；CSS样式表的创建；CSS样式表的编辑和删除。,1.操作步骤设置控制浏览器中的文字大小的操作步骤如下：(1)打开【.css1的CSS规则定义】对话框，如图9.8所示，在左边的【分类】选框里选择【类型】项。,9.2 项目2：控制浏览器中的文字大小,图9.8【.css1的CSS规则定义】对话框,(2)设置“字体”为“宋体”，“大小”为“36像素”，单击【确定】按钮，CSS样式即创建完成。(3)在【CSS样式】面板中，列出了所有样式标签中定义的所有样式的样式表，如图9.9所示。(4)在【CSS样式】面板中，选择样式.css1，单击鼠标右键，选择【套用】命令，如图9.10所示。或者在【属性】面板的【样式】下拉列表框中直接选择样式，如图9.11所示。,图9.9 样式的名称和属性,图9.10【套用】命令,图9.11属性面板,(5)这样，所选择的样式就可以应用到选中的段落或字符中，如图9.12所示。2.相关知识点CSS类型模式中字体属性的设置；CSS样式表的应用。,图9.12 应用.css1样式,1.操作步骤设置行间距的具体操作步骤如下：(1)单击【CSS样式】面板中的按钮，弹出【新建CSS规则】对话框。(2)选择【类(可应用于任何标签)】，在“名称”后的下拉列表框中输入.p1，如图9.13所示。,9.3 项目3：设置行间距,图9.13【新建CSS规则名称.p1】对话框,(3)打开【.p1的CSS规则定义】对话框，如图9.14所示，在左边的【分类】选框里选择【类型】，设置“行高”为“30像素”，单击【确定】按钮，CSS样式即创建完成。(4)选中需要应用样式的段落，对所选段落应用样式.p1，如图9.15所示。2.相关知识点CSS类型模式中行间距的设置。,图9.14【.p1的CSS规则定义】对话框,图9.15 应用.p1样式,1.操作步骤为图片添加边框效果的具体操作步骤如下：(1)单击【CSS样式】面板中的按钮，弹出【新建CSS规则】对话框。(2)选择【类(可应用于任何标签)】，在“名称”后的下拉列表框中输入.img，如图9.16所示。,9.4 项目4：为图片添加边框效果,图9.16【新建CSS规则名称.img】对话框,(3)打开【.img的CSS规则定义】对话框，如图9.17所示，在左边的【分类】选框里选择【边框】，设置“样式”为“双线”，“宽度”为“中”，颜色为“#000000”，单击【确定】按钮，CSS样式即创建完成。(4)选中需要应用样式的图像，对所选图像应用样式.img，如图9.18所示。,图9.17.img的CSS规则定义,图9.18 应用.img样式,2.相关知识点CSS边框模式的设置。,1.操作步骤利用“自定义样式表”改变鼠标指针形态的操作步骤如下：(1)单击【CSS样式】面板中的按钮，弹出【新建CSS规则】对话框。(2)选择【标签(重新定义特定标签的外观)】，在“标签”后的下拉列表框中选择body，如图9.19所示。,9.5 项目5：利用“自定义样式表”改变鼠标指针形态,图9.19【新建CSS规则标签body】对话框,(3)打开【body的CSS规则定义】对话框，如图9.20所示，在左侧的【分类】选框里选择【扩展】，通过设置“光标”为“help”来改变鼠标形状，单击【确定】按钮，CSS样式即创建完成。(4)按F12键后，打开浏览器预览页面，可以看到鼠标指针改变的形态，如图9.21所示。,图9.20【body的CSS规则定义】对话框,图9.21 预览效果,2.相关知识点CSS扩展模式的光标设置。,1.操作步骤利用有关链接的样式表修改链接格式的操作步骤如下：(1)单击【CSS样式】面板中的按钮，弹出【新建CSS规则】对话框。(2)选择【高级(ID、伪类选择器等)】，在“选择器”后的下拉列表框中选择a:link，如图9.22所示。,9.6 项目6：利用有关链接的样式表修改链接格式,(3)打开【a:link的CSS规则定义】对话框，如图9.2所示，在左侧的【分类】选框里选择【类型】，设置“字体”为“宋体”，“大小”为“12像素”。单击【确定】按钮，CSS样式即创建完成。(4)选择【高级(ID、伪类选择器等)】，在“选择器”后的下拉列表框中选择a:visited，如图9.22所示。,图9.22【新建CSS规则a:visited】对话框,(5)打开【a:visited的CSS规则定义】对话框，在左侧的【分类】选框里选择【类型】，设置“字体”为“楷体_GB2312”，“大小”为“14像素”，“修饰”为“删除线”，单击【确定】按钮，CSS样式即创建完成，如图9.23所示。(6)按F12键打开浏览器预览页面，可以看到链接效果，如图9.24和图9.25所示。,图9.23【a:visited的CSS规则定义】对话框,图9.24 未被访问过的超链接文本的显示样式,图9.25 被访问过的超链接文本的显示样式,2.相关知识点创建CSS选择器样式；网页中超链接的样式标签。,1.操作步骤控制页面背景图像样式的操作步骤如下：(1)单击【CSS样式】面板中的按钮，弹出【新建CSS规则】对话框。(2)选择【标签(重新定义特定标签的外观)】，在“标签”后的下拉列表框中选择body。(3)打开【body的CSS规则定义】对话框，如图9.26所示，在左侧的【分类】选框里选择【背景】，通过设置“背景图像”为“1.jpg”，“重复方式”为“不重复”，“附件”为“固定”，“水平位置”为“居中”，单击【确定】按钮，CSS样式即创建完成。,9.7 项目7：控制页面背景图像样式,图9.26【body的CSS规则定义】对话框,(4)按F12键后，打开浏览器预览页面，可以看到页面背景图像的样式，如图9.27所示。2.相关知识点设置背景图像的属性。,图9.27 预览效果,1.操作步骤利用“自定义样式表”制作项目图标的操作步骤如下：(1)单击【CSS样式】面板中的按钮，弹出【新建CSS规则】对话框。(2)选择【标签(重新定义特定标签的外观)】，在“标签”后的下拉列表框中选择ul，如图9.28所示。,9.8 项目8：利用“自定义样式表”制作项目图标,图9.28【新建CSS规则.ul】对话框,(3)打开【ul的CSS规则定义】对话框，在左边的【分类】选框里选择【列表】，设置“项目符号图像”为“1.gif”，单击【确定】按钮，CSS样式即创建完成，如图9.29所示。(4)按F12键后，打开浏览器预览页面，可以看到页面项目列表的样式，如图9.30所示。2.相关知识点设置列表项目符号的样式。,图9.29【ul的CSS规则定义】对话框,图9.30 项目列表符号样式的效果,1.操作步骤应用CSS样式滤镜的操作步骤如下：(1)在站点下新建文件夹“style”，在文件夹“style”下新建文件“style.css”，如图9.31所示。,9.9 项目9：CSS样式滤镜的应用,图9.31【新建样式文件】窗口,(2)单击【CSS样式】面板中的按钮，弹出【链接外部样式表】对话框，如图9.32所示。(3)单击【浏览】按钮，弹出【选择样式表文件】对话框，选择文件夹“style”下的文件“style.css”，如图9.33所示。,图9.32【链接外部样式表】对话框,图9.33【选择样式表文件】对话框,(4)单击【确定】按钮，回到【链接外部样式表】对话框，检查无误后，单击【确定】按钮，链接成功，如图9.34所示。(5)单击【CSS样式】面板中的按钮，弹出【新建CSS规则】对话框。,图9.34 链接的文件,(6)选择【类(可应用于任何标签)】，在“名称”后的下拉列表框中输入.blur，在“定义在”后选择“style.css”，如图9.35所示。(7)打开【.blur的CSS规则定义】对话框，如图9.36所示，在左边的【分类】选框里选择【扩展】，设置“过滤器”为“Blur(Add=1，Direction=270，Strength=20)”，即Blur滤镜，指定图像改变成印象派的模糊效果，模糊的方向是水平向左270，20个像素宽度受到影响。,图9.35【新建CSS规则.blur】对话框,图9.36【.blur的CSS规则定义】对话框,(8)创建CSS规则“.gray”(如图9.37所示)，定义“.gray”的CSS规则(如图9.38所示)。在左边的【分类】选框里选择【扩展】，设置“过滤器”为“Gray”，即Gray滤镜，灰度效果。(9)创建CSS规则“.invert”(如图9.39所示)，定义“.invert”的CSS规则(如图9.40所示)。在左边的【分类】选框里选择【扩展】，设置“过滤器”为“Invert”，即Invert滤镜，将颜色的饱和度以及亮度值完全反转，类似底片效果。,图9.37【新建CSS规则.gray】对话框,图9.38【.gray的CSS规则定义】对话框,图9.39【新建CSS规则名称.invert】对话框,图9.40【.invert的CSS规则定义】对话框,(10)创建CSS规则“.wave”(如图9.41所示)，定义“.wave”的CSS规则(如图9.42所示)。在左边的【分类】选框里选择【扩展】，设置“过滤器”为“Wave(Add=add，Freq=2，LightStrength=50，Phase=45，Strength=10)”，即Wave滤镜，把对象按照波形样式打乱，波纹频率为2，波纹增强光影效果为50，正弦波的偏移量为45，振幅大小为10。,图9.41【新建CSS规则.wave】对话框,图9.42【.wave的CSS规则定义】对话框,(11)将样式.blur、.gray、.invert和.wave分别应用到网页index.html的图像7.gif、8.gif、9.gif和10.gif中。(12)按F12键后，打开浏览器预览页面，可以看到链接效果(如图9.43和图9.44所示)。,图9.43 未添加滤镜效果,图9.44 滤镜效果,2.相关知识点设置滤镜样式。,1.训练内容进行课堂综合训练的具体内容如下：(1)单击【CSS样式】面板中的按钮，弹出【新建CSS规则】对话框。(2)选择【标签(重新定义特定标签的外观)】，在“标签”后的下拉列表框中选择body。(3)打开【body的CSS规则定义】对话框，在左侧的【分类】选择【背景】，设置“背景颜色”为“#2ec9e7”，单击【确定】按钮，CSS样式即创建完成。,9.10 课堂综合训练,(4)选择【标签(重新定义特定标签的外观)】，在“标签”后的下拉列表框中选择td。(5)打开【td的CSS规则定义】对话框(如图9.5所示)，在左侧的【分类】项中选择【类型】，设置“字体”为“宋体”，“大小”为“12像素”，单击【确定】按钮，CSS样式即创建完成。(6)选择【高级(ID、伪类选择器等)】，在“选择器”后的下拉列表框中选择a:link。,(7)打开【a:link的CSS规则定义】对话框，在左侧的【分类】项中选择【类型】，设置“行高”为“35像素”，“颜色”为“黑色”，单击【确定】按钮，CSS样式即创建完成。(8)选择【高级(ID、伪类选择器等)】，在“选择器”后的下拉列表框中选择a:hover，如图9.45所示。(9)打开【a:hover的CSS规则定义】对话框(如图9.46所示)，在左侧的【分类】项中选择【类型】，设置“行高”为“35像素”，“颜色”为“#ff00ff”，“修饰”为“下划线”，单击【确定】按钮，CSS样式即创建完成。,图9.45【新建CSS规则a:hover】对话框,图9.46【a:hover的CSS规则定义】对话框,(10)按F12键后，打开浏览器预览页面，可以看到链接效果，如图9.47和图9.48所示。,图9.47 未应用样式效果,图9.48 最终效果,2.相关知识点CSS样式类型：类(可应用于任何标签)、标签(重新定义特定标签的外观)和高级(ID、伪类选择器等)；页面背景设置；浏览器中的文字设置；链接样式设置、行间距设置。,本章重点介绍了CSS样式的类型、特点，并介绍了定义样式的方法和一些典型的应用项目。CSS样式又称层叠样式表，主要用来指定布局、字体、颜色、背景、链接等其他页面元素的格式。当应用了CSS样式后，仅需要修改CSS样式即可更改所有应用，方便网页设计人员编辑页面。,9.11 小 结,1.选择题(1)在CSS中，文本垂直对齐属性vertical-align的取值top表示()。A写在其他元素中线的上方B写在其他元素基线的上方C以其他文本元素的顶线作为被定义元素的底线D以其他普通元素的顶线作为被定义元素的底线,习 题,(2)下列选项中不属于CSS文本属性的是()。Afont-sizeBtext-transformCtext-alignDline-height(3)CSS中不属于样式单插入形式的是()A内联式样式单B嵌入式样式单C层叠式样式单D外部式样式单,(4)CSS中的选择符包括()。(多选)A超文本标记选择符 B类选择符C对象选择符DID选择符E属性选择符2.填空题(1)CSS样式又称 样式，主要用来对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。,(2)CSS文件的后缀名为。(3)在HTML中定义CSS层(div)时可以用 标签。(4)主要用于创建、编辑和删除CSS样式，还可以将外部样式表附加到文档中。(5)在编辑处理外部的CSS的样式表时，的所有文档都将更新，以对应所做的编辑。,3.操作题请在页面设计中引用CSS(要求用类选择符)方法编写一个程序，具体要求如下：(1)在浏览器的左上方显示文字“电子商务论坛”，下方显示文字“里面有最新的网站开发文章”。(2)文字“电子商务论坛”的size为120%，weight为bold，color为green。(3)文字“最新的网站开发文章”超链接指向http:/，当鼠标移到该文字上时，不出现下划线并且文字变为红色。,