《新编Dreamweaver_CS3动态网页设计与制作教程》由会员分享，可在线阅读，更多相关《新编Dreamweaver_CS3动态网页设计与制作教程（96页珍藏版）》请在金锄头文库上搜索。
1、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规则。
2、.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样式】(快捷键为Sh
3、ift+F11)命令，打开【CSS样式】面板。,图9.2 【新建CSS规则】对话框, 单击【CSS样式】面板中的按钮，弹出【新建CSS规则】对话框。 选择【类(可应用于任何标签)】，然后在“名称”后的下拉列表框中输入这个样式的名称。注意，类名称必须以英文句点开头，并且包含任何字母和数字组合，例如“.css1”。 在【定义在】中选择【仅对该文档】。然后单击【确定】按钮，完成设置，将弹出【.css1的CSS规则定义】对话框，如图9.3所示。,图9.3 【.css1的CSS规则定义】对话框,(2) 标签。标签用来重新定义某种类型页面元素的格式。制作后，不需要选中表格对象，就可以直接应用到页面中去。具
4、体操作如下： 选择【窗口】【CSS样式】(快捷键为Shift+F11)命令，打开【CSS样式】面板。 单击【CSS样式】面板中的【新建CSS规则】按钮，弹出【新建CSS规则】对话框。 选择【标签(重新定义特定标签的外观)】，在【标签】后的下拉列表框里选择一个HTML标签，也可以直接在【标签】后的下拉列表框里输入这个标签，例如输入“td”，如图9.4所示。,图9.4 【新建CSS规则】对话框, 在【定义在】中选择【仅对该文档】，然后单击【确定】按钮，完成设置，将弹出【td的CSS规则定义】对话框，如图9.5所示。(3) 高级。高级样式为具体的某个标签组合或所有包含特定ID属性的标签定义格式。具体
5、操作如下： 选择【窗口】【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
6、: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
7、.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类型模式中字体属性的
8、设置；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. 相
9、关知识点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”，单击【确
10、定】按钮，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规
11、则定义】对话框，如图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所示。
12、,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像素”，“修饰”为“删除线”，单击【
13、确定】按钮，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规则定义】
14、对话框，如图9.26所示，在左侧的【分类】选框里选择【背景】，通过设置“背景图像”为“1.jpg”，“重复方式”为“不重复”，“附件”为“固定”，“水平位置”为“居中”，单击【确定】按钮，CSS样式即创建完成。,9.7 项目7：控制页面背景图像样式,图9.26 【body的CSS规则定义】对话框,(4) 按F12键后，打开浏览器预览页面，可以看到页面背景图像的样式，如图9.27所示。2. 相关知识点设置背景图像的属性。,图9.27 预览效果,1. 操作步骤利用“自定义样式表”制作项目图标的操作步骤如下：(1) 单击【CSS样式】面板中的按钮，弹出【新建CSS规则】对话框。(2) 选择【标签(重
15、新定义特定标签的外观)】，在“标签”后的下拉列表框中选择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所示。,
