网页设计与制作第6章.ppt

《网页设计与制作第6章.ppt》由会员分享，可在线阅读，更多相关《网页设计与制作第6章.ppt（46页珍藏版）》请在三一办公上搜索。

1、6.1CSS样式表概述 6.1.1样式表的基本操作 6.1.2定义样式表选项 6.1.3使用样式6.2创建新样式 6.2.1为调用脚本创建的CSS规则 6.2.2定义指定范围内的标签规则 6.2.3同时定义多个标签 6.2.4定义单个元素样式属性6.3内部CSS样式表的应用 6.3.1使文字尺寸保持不变 6.3.2设置网页行间距,第 6 章,多媒体计算机硬件,6.3.3制作图像边框效果 6.3.4控制鼠标样式 6.3.5修改文字链接的样式 6.3.6锁定背景不跟随内容滚动 6.3.7定义项目符号和编号 6.3.8CSS滤镜的应用6.4外部CSS样式表的应用 6.4.1建立文字段落的CSS样式

2、6.4.2建立表格的CSS样式 6.4.3建立超链接的CSS样式 6.4.4建立特殊段落的CSS样式 6.4.5在网页中应用外部CSS 6.5习题与上机操作,CSS样式表简介创建CSS样式表内部CSS样式表的应用外部CSS样式表的创建及应用使用和编辑自定义CSS样式表,教学进程,本章要点：,概述,利用CSS样式可以对网页中的文本、图像、页面背景、表单元素外观等实现更加精确的控制，甚至浏览器滚动条等浏览器的一些属性都可以通过它来调整。,教学进程,1,CSS真正实现了网页内容和格式定义的分离，通过修改CSS样式表文件就可以修改整个站点文件的风格。,6.1 CSS样式表概述,6.1.1 样式表的基本

3、操作,教学进程,执行【窗口】|【CSS 样式】命令，打开【CSS 样式】面板，或在面板组上单击“CSS”或者相应的折叠箭头，展开【CSS样式】面板,方法,6.1 CSS样式表概述,当选中一个规则后执行【CSS样式】面板右下方的【编辑样式】命令，打开编辑选中规则的对话框,单击【CSS样式】面板右上方的属性按钮，在弹出的菜单中选择【编辑】命令，也可以启动编辑当前所选规则的对话框,教学进程,在【CSS样式】面板上，选择【新建CSS规则】按钮，会打开【新建CSS规则】对话框。,方法,6.1.2 定义样式表选项,6.1 CSS样式表概述,选择其中一个正方形的热点，在【属性】面板中修改各参数。在【链接】文

4、本框中输入链接地址“http:/”，在【目标】选项的下拉列表中选择“_blank”，在【替换】文本框中输入“链接到洪恩在线!”。,举例,教学进程,在【CSS样式】面板上，选择【新建CSS规则】按钮，会打开【新建CSS规则】对话框。,方法,6.1.2 定义样式表选项,6.1 CSS样式表概述,教学进程,【新建样式表文件】：此选项将会把你设定的样式最终保存在一个外部单独的样式表文件中，这个样式表文件可以被其他文件共同使用，也就是说你可以使站点内的所有页面文件使用同一个样式表文件，甚至不同的站点只要是网页就可以使用。,【定义在】选项,各选项含义,6.1.2 定义样式表选项,6.1 CSS样式表概述,

5、【仅对该文档】：此选项将会把你设定的规则仅仅放在当前文件的头文件中，这些规则只能在此文件中使用。,教学进程,【类（可应用于任何标签）】：选择此类型后，需要在上方的【名称】文本框中填入一个规则名字，需要注意的是，此类名称必须以“.”开头。这种方式定义的样式可以用来定义绝大多数的HTML对象，这样可以使这些对象有统一的外观。,【选择器类型】选项,各选项含义,6.1.2 定义样式表选项,6.1 CSS样式表概述,【标签（重新定义特定标签的外观）】：选择此选项后从上方的【标签】下拉框里选择需要重新定义的HTML标识。这个选项将使得文件中具有统一标签的所有内容使用相同的外观。,【高级（ID伪类选择器等）

6、】：这个选项的功能是可以设定链接文本的样式。,6.1.3 使用样式,教学进程,在【属性】面板选择样式,打开【属性】面板，单击打开【样式】右边的下拉列表框，里面列出了我们已经定义的一些CSS规则。,1,需要指出的是，这里列出的只是部分已定义的规则。使用样式列表指定规则时，必须先选定你将要应用此规则的内容，然后在样式列表框中选择需要的规则，即可将规则应用于选定内容,6.1.3 使用样式,教学进程,利用【标签选择器】选择样式,2,首先需要在【标签选择器】上选定一个标签，如span.标签，然后在span.标签上右击，在弹出的快捷菜单中选择【设置类】|【wenziduanluo】，则可以快速把定义的【w

7、enziduanluo】样式类指定给span.标签。,使用右键快捷菜单,3,我们也可以从右键快捷菜单中直接给对象指定一个样式。首先选中对象，在右键快捷菜单中指定样式类。,清除样式,4,清除样式，首先选中对象，然后从右键快捷菜单中选择【无】，即可清除原有的样式。,6.2 创建新样式,教学进程,【id】属性是使用【CSS选择器】样式的常用功能之一，这种方式定义的CSS规则，与自定义CSS规则相似。在文档中，可以通过【id】属性来识别标记和定位文档的位置，这在调用脚本时会经常用到的。,方法,6.2.1 为调用脚本创建的CSS规则,6.2 创建新样式,教学进程,6.2.2定义指定范围内的标签规则,新建

8、CSS规则,在【CSS样式】面板上单击【新建CSS规则】按钮，打开【新建CSS规则】对话框，在【选择器类型】中选择【高级（ID伪类选择器等）】，在【选择器】参数项中输入“td hr”，td是单元格的标签，hr是水平条的标签。,1,单击【确定】按钮后，开始定义规则，我们只需要定义【类型】面板中的【颜色】项为红色就可以了。,定义td hr的CSS规则,2,按F12键，在浏览器中可以看到，单元格中的水平条变成了红色，而单元格之外的水平条却保持不变。,预览效果,3,6.2 创建新样式,教学进程,6.2.3同时定义多个标签,创建含有正文文字、单元格、文本字段表单的网页,创建一个HTML页面，在正文（bo

9、dy）里输入“CSS测试”这几个字，在文字的下面插入一个两行一列的表格（td），然后在上面的单元格里面输入“Dreanweaver教程”几个字，在下面的单元格中插入一个表单文本区域（textarea）,1,6.2 创建新样式,教学进程,6.2.3同时定义多个标签,打开【新建CSS规则】对话框后，在【选择器类型】中选择【高级（ID伪类选择器等）】，在【选择器】参数项中输入“body,td,textarea”，这些标签要用英文状态的“,”分开。,新建CSS规则,2,6.2 创建新样式,教学进程,6.2.3同时定义多个标签,单击【确定】按钮后，开始定义规则，在【类型】面板里定义字体、颜色等。定义完以

10、后，单击【应用】按钮。在Dreamweaver的【文档】窗口中文字都变成了红色，大小也成了14像素。接着我们在表单文本区域里输入文字，保存在css目录下。,定义body,td,textarea的CSS规则,3,6.2 创建新样式,教学进程,6.2.4定义单个元素的样式属性,如果要对网页中的某单个元素定义样式属性，那么可以在该元素中直接使用“style=”来定义。,如：style样式，在Dreamweaver 8中，使用这种类型只能在Dreamweaver的【代码】视图中手工输入代码.,新建CSS样式,单击【CSS样式】面板中的【新建CSS规则】按钮，弹出【新建CSS规则】对话框。,1,教学进程

11、,6.3 内部CSS样式表的应用,6.3.1 使文字尺寸保持不变,在【名称】文字框里输入要定义的CSS规则的名称，本例定义的是字体，为了方便记忆，可以设置样式的名称为“.ziti”，在【选择器类型】中选择【类（可应用于任何标签）】，在【定义在】中选择【仅对该文档】，单击【确定】按钮。,设置CSS样式的类型、区块标签,在【.ziti的CSS规则定义】的对话框中，选择左边【分类】中的【类型】标签，把【大小】设为12像素。,2,教学进程,6.3 内部CSS样式表的应用,6.3.1 使文字尺寸保持不变,如果想让每一段落的行首自动空两个汉字，可以选择【分类】中的【区块】标签，把【文字缩进】设为个字体高，

12、即2个汉字。,预览效果,另存网页在css目录下，文件名为：wenxue_ziti_css.html，用浏览器预览一下，网页的字体看起来就像专业网站的字体了，并且字体尺寸也不会随浏览器字体大小设置而改变，每段的首位自动空了两个汉字的距离，,3,教学进程,6.3 内部CSS样式表的应用,6.3.1 使文字尺寸保持不变,6.3.2 设置网页行间距,编辑CSS样式,1,在【CSS样式】面板中，选择.ziti规则，单击【编辑样式】按钮，弹出【.ziti的CSS规则定义】对话框，在【行高】右边的两个下拉框中分别选择【值】、【】，然后，再在【值】框中输入数值，在这里输入150%，作为我们网页文字的行间距,教

13、学进程,6.3.2 设置网页行间距,应用CSS样式,2,单击【确定】按钮。此时网页中的文字行间距会自动地调整为已经设定的规则。保存网页，用浏览器预览一下。,教学进程,教学进程,6.3.3制作图像边框图像,创建为图片定义的CSS样式,在【CSS样式】面板上单击【新建CSS规则】按钮，弹出【新建CSS规则】对话框，在【选择器类型】中选择【标签（重新定义特定标签的外观）】，再在【标签】下拉框中选择【img】标记。,1,教学进程,6.3.3制作图像边框图像,图片边框的参数意义,单击【确定】按钮，弹出【img的CSS规则定义】对话框，在【分类】项中选择【边框】，设置【img的CSS规则定义】标记的边框属

14、性。边框可设定的属性很多，包括样式、宽度和颜色，关键是指定每个边的宽度和每个边的颜色。,2,【宽度】：可以是细、中、粗等值。,【颜色】：定义方法与宽度定义相似，颜色值也可以用RGB值（如#ff00ff）。,【样式】：用9个关键字来描述。,教学进程,6.3.3制作图像边框图像,设置边框参数,我们可以设定【样式】为脊状，【宽度】为中，【颜色】为红色。,3,浏览器中的效果,单击【确定】按钮，定义的规则已经应用到网页的图片上了。在浏览器中是什么效果呢？保存网页文件，,4,教学进程,6.3.4控制鼠标样式,一般情况下，鼠标在浏览器中以“箭头”的样式出现。我们想在网页的不同位置让鼠标显示不同形状，以体现不

15、同的功能区，如果想让自己的网站体现与众不同的风格，可以把鼠标样式更改为自己喜欢的其他样式类型。,教学进程,6.3.4控制鼠标样式,新建CSS规则,新建一个CSS规则，本例定义的是鼠标，为了方便记忆，可以设置规则的名称为“.shubiao”，在【选择器类型】中选择【类（可应用于任何标签）】，在【定义在】中选择【仅对该文档】。,1,教学进程,6.3.4控制鼠标样式,修改光标效果,单击【确定】按钮。在弹出的【.shubiao的CSS规则定义】的对话框中，选择左边【分类】中的【扩展】标签。,2,教学进程,6.3.4控制鼠标样式,光标样式的含义,右边【视觉效果】中的【光标】项，这就是设置鼠标样式的关键项

16、。打开右边的下拉菜单，选择所需要的鼠标样式，单击【确定】按钮。,3,crosshair：十字型。text：平时鼠标移动到文本上的样式。wait：等待的效果。default：默认的效果。help：带问号的鼠标样式。e-resize：向右的箭头。ne-resize：向右上方的箭头。,n-resize：向上的箭头。nw-resize：向左上方的箭头。w-resize：向左的箭关。sw-resize：向左下的箭头。s-resize：向下的箭头。se-resize：向右下方的箭头。auto：系统自动的效果。,新建高级CSS规则,教学进程,6.3.5修改文字链接的样式,建立第二个高级CSS样式,去掉超级链

17、接的下划线,定义超级链接的颜色,链接可以说是网页中常见的页面元素了，默认的文字链接规则都是带下划线的效果，完全可以改变这种一成不变的外观，以使之更符合页面的整体效果。,教学进程,6.3.6锁定背景不跟随内容滚动,打开文学页面：wenxue_ziti_css.html，执行【修改】|【页面属性】命令，弹出【页面属性】对话框，在【页面属性】对话框中设置背景图像，单击【背景图像】选项右边的【浏览】按钮，选择自己喜欢的图像作为背景。,设置网页背景,1,新建背景的CSS规则,2,新建一个CSS规则。本例定义的是背景，为了方便记忆，可以设置规则的名称为：.beijing，在【选择器类型】中选择【类（可应用

18、于任何标签）】，在【定义在】中选择【仅对该文档】。,教学进程,6.3.6锁定背景不跟随内容滚动,单击【确定】按钮。在弹出的【.beijing的CSS规则定义】对话框中，选择左边【分类】中的【背景】标签，其中【附件】有两个选择项，分别为【固定】和【滚动】，设置【附件】为【固定】。,设置固定背景,3,教学进程,6.3.7定义项目符号和编号,（1）新建.xmfh的CSS规则（2）定义规则的【列表】属性（3）将项目符号应用到网页中（4）应用项目符号后的效果,利用CSS定义“项目符号和编号”,1,教学进程,6.3.7定义项目符号和编号,（1）准备作为项目符号的图片,自定义项目图片符号,2,（2）标记.x

19、mfh CSS规则,打开我们网站的wenxue_ziti_css.htm网页，在右边的表格中插入一个11的表格，然后把标题“想飞”放在表格中。,教学进程,6.3.8CSS滤镜的应用,打开网页,1,编辑CSS样式,2,将.style1的CSS规则定义给标题，首先在【CSS规则】面板里选择.style1自定义CSS规则，然后单击【编辑规则】按钮，弹出【.style1的CSS规则定义】对话框。在此对话框的【分类】中选择【扩展】，打开【滤镜】下拉列表，可以看到CSS样式表滤镜的多种属性。,可以使用Blur滤镜为标题建立模糊效果，使用Glow滤镜为图片边界增加光效。Blur的语法是：Blur(Add=?

20、,Direction=?,Strength=?)，其中有3个参数Add、Direction、Strength。,教学进程,6.3.8CSS滤镜的应用,定义.style1的Blur滤镜,3,把Blur滤镜应用到标题上,4,单击【确定】按钮，.style1规则已经被重新定义了，将.style1规则应用于标题所在的11表格上，这样Blur的CSS滤镜就已经应用到标题上了。,教学进程,6.3.8CSS滤镜的应用,把滤镜应用到网页后的效果,5,新建一个CSS规则，由于要建立的是有关文字、段落的规则，所以可以建立一个统一的【类】，在【名称】框中输入CSS规则的名称，在【定义在】中选择【新建样式表文件】。,

21、教学进程,6.4 外部CSS样式表的应用,6.4.1建立文字段落的CSS样式,建立外部样式表,1,保存样式表,2,单击【确定】按钮，在弹出的【保存样式表文件为】对话框内，我们要确定以下内容：【保存在】要保存文件的位置，【文件名】要保存文件的名字。保存文件的时候，要尽可能地保存在站点内，命名也要尽量做到见名知意。,单击【保存】按钮后，计算机中就生成了xinde.css这个外部样式表文件，同时弹出【.wenziduanluo的CSS规则定义（在xinde.css中）】对话框。我们就开始定义这个外部CSS样式表了。可以这样定义文字和段落，在【分类】的【类型】面板中定义【字体】、【大小】、【行高】分别

22、为：宋体、12像素、150%；【区块】面板中定义对齐方式为：顶部、左对齐，文字缩进为：2字体高。,教学进程,6.4 外部CSS样式表的应用,6.4.1建立文字段落的CSS样式,定义样式表的文字和段落,3,在【CSS样式】面板上单击【新建CSS规则】按钮，新建一个CSS规则。可以把表格作为一个【类】来定义，同时也可以作为【标签】来定义。所以在弹出的【新建CSS规则】对话框中，我们把表格作为一个【标签】来定义，表格的标签为：table。,教学进程,6.4.2建立表格的CSS样式,新建表格的CSS样式,1,定义表格的CSS样式,2,单击【确定】按钮，就可以定义表格的样式了。本例中，我们可以把表格定义

23、为边框宽度为“1”、样式为点划线的彩色表格。,新建一个CSS规则。在【新建CSS规则】对话框中仍然把超级链接作为【标签】来定义，把它放到前面已经建立的外部CSS样式表文件中，超级链接的标签为a。,教学进程,6.4.3建立超链接的CSS样式,新建超链接的CSS样式,1,定义超链接的CSS样式,2,单击【确定】按钮，在弹出的【a的CSS规则定义（在xinde.css中）】对话框中，可以定义网页中超级链接的样式。比如在【分类】的【类型】中定义【字体】、【大小】、【颜色】、【修饰】分别为：宋体、12像素、#FFFFFF、无；【背景】中定义背景颜色为#FFFF00。,再建立一个CSS规则，在【新建CSS

24、规则】对话框中这样定义：在【选择器类型】中选择【高级（ID、伪类选择器等）】，在【选择器】中选择【a:hover】，定义在xinde.css的外部样式表文件中，,教学进程,6.4.3建立超链接的CSS样式,新建鼠标悬停时超链接的CSS规则,3,定义鼠标悬停时超链接的CSS规则,4,单击【确定】按钮后，就可以添加超级链接的样式了。在本例中，我们在【分类】的【类型】中定义【颜色】为#000000；在【背景】中定义背景颜色为#00FF00。,新建一个类，把它定义在外部CSS样式表中，命名为.teshuduanluo，,教学进程,6.4.4建立特殊段落的CSS样式,新建特殊段落的CSS样式,1,定义特

25、殊段落的CSS规则,2,单击【确定】按钮，在弹出的【.teshuduanluo的CSS规则定义（在xinde.css中）】对话框中分别对【类型】、【背景】、【区块】进行定义：字体为楷体_GB2312，大小为10像素，行高为120%；背景颜色为#FFFF66；文字缩进为2字体高。,6.4.5在网页中应用外部CSS样式,用Dreamweaver打开网站的xinde.htm文件。,（1）编辑文件,教学进程,在【CSS样式】面板上单击【附加样式表】按钮，弹出【链接外部样式表】对话框，在【添加为】中选择【链接】，单击浏览按钮，选择前面我们创建的外部样式表文件xinde.css，单击【确定】按钮，外部样式xinde.css就会自动链接到网页中。,（2）链接外部样式表文件,教学进程,6.4.5在网页中应用外部CSS样式,将CSS样式应用到网页的对象中。,（3）应用样式,上机操作题,教学进程,6.5习题与上机操作,(1),打开前面制作好的包含文字的网页，利用内部CSS样式表，让文字大小不随浏览器字体大小设置而改变。,(2),打开任意一个包含背景图片的页面，利用CSS样式表让背景图片不跟随内容一起滚动。,(3),利用CSS样式表，制作如下图所示的页面效果。,要求,教学进程,6.5习题与上机操作,效果,