(教学课件)chapter6利用CSS美化网页

,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,深圳职业技术学院 计算机基础教研室,网页设计与制作实用教程（第,3,版）,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,深圳职业技术学院 计算机基础教研室,网页设计与制作实用教程（第,3,版）,#,第,6,章 利用,CSS,样式美化,网页,制作“服务”页面,计算机工程学院计算机基础教学,部,学习目标,掌握创建样式及应用样式的方法,了解,CSS,选择器的,4,种类型的区别,了解,CSS,常用属性值的设置,了解利用,CSS,控制网页的,3,种方法,掌握利用外部样式表文件统一网站风格的方法,了解利用,CSS,美化网页的流程,深圳职业技术学院 计算机基础教研室,网页设计与制作实用教程（第,3,版）,2,实训项目,网页,设计师小高围绕“慧衡科技专业服务”这一主题，已经制作好了网页,内容,，现需要对其进行美化。,深圳职业技术学院 计算机基础教研室,网页设计与制作实用教程（第,3,版）,3,项目分析,设计思路：,（,1,）,在,设计页面属性时，采用跟整体网站风格一致的灰蓝色作为背景颜色,。,（,2,）,页面,元素以文本为主，首先设置文本样式，使用不同的颜色区分不同的文本,。,（,3,）,采用,列表制作浅蓝色背景的水平导航条，使用装饰图片环绕,在文本,左侧,。,（,4,）,对于,子页面“外贸电子商务”和“外贸网站设计”，采用外部样式表文件统一外观。,设计页面背景时使用颜色来区分不同的模块，在对文本进行美化时采用不同的字体、颜色及大小突出标题，并使用图像制作文本背景美化网页,。,深圳职业技术学院 计算机基础教研室,网页设计与制作实用教程（第,3,版）,4,设计目标,网页设计与制作实用教程（第,3,版）,5,深圳职业技术学院 计算机基础教研室,预备知识：,认识,CSS,（,1,）,CSS,（,Cascading Style Sheets,），中文翻译为层叠样式表，是用户控制网页样式并允许将样式信息与网页内容分离的一种标记性语言，它是由,W3C,于,1996,年,12,月推出。,（,2,）,CSS,的主要功能就是定义元素的属性值来控制元素的显示,效果,。,其中,包括定义元素的大小、边框、背景、定位等，通过对这些属性设置值来形成一个样式，然后再将样式应用于文档中同一类型的元素，使网页结构内容和表现形式相,分离。,深圳职业技术学院 计算机基础教研室,网页设计与制作实用教程（第,3,版）,6,预备知识：,CSS,的语法规则,CSS,选择,器,的类型：,（,1,）标签选择,器,h1,（,2,）类选择,器,.,textfooter,（,3,）,ID,选择,器,#table1,（,4,）复合内容选择,器,#table1,a,深圳职业技术学院 计算机基础教研室,网页设计与制作实用教程（第,3,版）,7,预备知识：,CSS,的使用方式,（,1,）内联,样式,:,直接,对,HTML,标签使用,style,属性，然后将代码直接写在,其中,。,慧衡科技,（,2,）嵌入式样式,表,：,嵌入,式样式表使用,标签将样式嵌入到,HTML,文件的头部,中,。,（,3,）外部样式,表,：,外部,样式表是指将,CSS,写成一个文件，在,HTML,文件的头部中通过使用,标签将样式表文件链接到此页面中。,深圳职业技术学院 计算机基础教研室,网页设计与制作实用教程（第,3,版）,8,制作流程,网页设计与制作实用教程（第,3,版）,深圳职业技术学院 计算机基础教研室,9,任务,1,：设置网页的页面属性,任务,4,：利用,CSS,设置超链接样式,任务,3,：利用,CSS,实现图文混排,任务,2,：利用,CSS,美化文本,任务,5,：制作水平导航条,任务,6,：创建外部样式表文件,任务,1,设置网页的页面属性,网页设计与制作实用教程（第,3,版）,深圳职业技术学院 计算机基础教研室,10,1,重新定义,HTML,标签,body,2,查看,body,标签的,CSS,代码,STEP1,：,重新定义,HTML,标签,body,深圳职业技术学院 计算机基础教研室,网页设计与制作实用教程（第,3,版）,11,打开,“,CSS,样式”面板，新建,CSS,规则,。,重新,定义,body,标签的属性,值。,（,1,）设置,body,的背景属性，在“,Background-color,”文本框中输入“,#65768A,”。,（,2,）设置,body,的文本样式，在“,Font-size,”文本框中输入“,12px,”。,（,3,）设置,body,的方框样式,，在,“,Margin,”区域中，不勾选“全部相同”，在“,Top,”文本框中输入“,0,”。,STEP2,：,查看,body,标签的,CSS,代码,深圳职业技术学院 计算机基础教研室,网页设计与制作实用教程（第,3,版）,12,在,代码视图下查看,CSS,代码,。,任务,2,利用,CSS,美化文本,网页设计与制作实用教程（第,3,版）,深圳职业技术学院 计算机基础教研室,13,1,重新定义,HTML,标签,h1,，,h2,，,p,2,新建类样式“,.copyright,”、“,.alignRight,”,STEP1,：,重新定义,HTML,标签,h1,，,h2,，,p,深圳职业技术学院 计算机基础教研室,网页设计与制作实用教程（第,3,版）,14,重新,定义,HTML,标签,h1,的属性,值,：,重新,定义,HTML,标签,h2,的,样式,：,h2 font-family:,宋体,;,font-size:14px;color:#C7D9ED;,重新,定义,HTML,标签,p,的,样式：,pline-height:150%;,color,:#,000;width,:1000px;,STEP2,：,新建类样式“,.copyright,”、“,.alignRight,”,深圳职业技术学院 计算机基础教研室,网页设计与制作实用教程（第,3,版）,15,新建,类样式“,.copyright,”，设置属性值,。,为,页脚文本应用类样式“,.copyright,”,。,创建,类样式“,.alignRight,”，并应用到页面中所有的“详细了解”文本所在的段落，属性值如下,：,.,alignRight text-align:right;,任务,3,利用,CSS,实现图文混排,网页设计与制作实用教程（第,3,版）,深圳职业技术学院 计算机基础教研室,16,1,新建类样式“,.imgIm,”,2,将“,.imgIm,”样式应用到页面中的“,IMservice,”图像,任务,4,利用,CSS,设置超链接样式,深圳职业技术学院 计算机基础教研室,网页设计与制作实用教程（第,3,版）,17,1,重新定义,HTML,标签,a,2,设置链接的,4,种状态样式,STEP1,：,重新定义,HTML,标签,a,深圳职业技术学院 计算机基础教研室,网页设计与制作实用教程（第,3,版）,18,重新,定义,HTML,标签,a,，设置链接文本的字体格式及取消,下划线。,a,font-family:,黑体,;,font-size:14px;,text-decoration:none;,STEP2,：,设置链接的,4,种状态样式,设置,a:link,的样式,。,设置,a:visited,的,样式,。,设置,a:hover,的,样式,。,设置,a:active,的,样式,。,深圳职业技术学院 计算机基础教研室,网页设计与制作实用教程（第,3,版）,19,任务,5,美化列表与制作水平导航条,深圳职业技术学院 计算机基础教研室,网页设计与制作实用教程（第,3,版）,20,1,将链接文本转换成列表,2,为项目列表创建,ID,样式,3,设置列表项水平显示,4,设置列表项中的链接样式,STEP1,：,将链接文本转换成列表,深圳职业技术学院 计算机基础教研室,网页设计与制作实用教程（第,3,版）,21,将链接文本转换成列表,。,STEP2,：,为项目列表创建,ID,样式,为项目列表创建,ID,样式,#,nav,设置项目列表背景,。,深圳职业技术学院 计算机基础教研室,网页设计与制作实用教程（第,3,版）,22,#nav,background-image:url(./images/bg_navigation.jpg);,background-repeat:no-repeat;,background-position:left top;,margin:0px;,height:35px;,width:1000px;,padding-top:12px;,STEP3,：,设置列表项水平显示,设置列表项水平显示及列表项之间的间隔。,深圳职业技术学院 计算机基础教研室,网页设计与制作实用教程（第,3,版）,23,#nav li,display:inline;,margin-top:0px;,margin-right:0px;,margin-bottom:0px;,margin-left:15px;,padding-top:0px;,padding-right:20px;,padding-bottom:0px;,padding-left:20px;,list-style-type:none;,STEP4,：,设置列表项中的链接样式,设置列表项中的链接样式，其属性值如下：,#nav li a,font-family,:,黑体,;,font-size,:16px;,text-decoration,:none,;,深圳职业技术学院 计算机基础教研室,网页设计与制作实用教程（第,3,版）,24,任务,6,利用外部样式表,美化,service_ec.html,、,service_wd.html,文件,深圳职业技术学院 计算机基础教研室,网页设计与制作实用教程（第,3,版）,25,1,创建样式表文件,service.css,2,链接外部样式表文件,3,利用,CSS,设置背景图像,STEP1,：,创建样式表文件,service.css,重新,定义,HTML,标签,body,的属性值,。,重新定义,HTML,标签,li,的属性值，将样式保存到“,service.css”,文件中,。,从素材文件拷贝其他样式到“,service.css”,文件中,。,为页面中的元素应用类样式。,深圳职业技术学院 计算机基础教研室,网页设计与制作实用教程（第,3,版）,26,STEP2,：,链接外部样式表文件,将“,service.css,”文件中的样式应用于“,service_wd,”文档中,。,深圳职业技术学院 计算机基础教研室,网页设计与制作实用教程（第,3,版）,27,STEP3,：,利用,CSS,设置背景图像,在,“,service_ec,”文件中新建类样式“,.textCon,”，设置属性值,。,在,“,service_wd,”文件中新建类样式“,.textCon,”，为所在段落设置背景图像。,深圳职业技术学院 计算机基础教研室,网页设计与制作实用教程（第,3,版）,28,项目总结,计算机工程学院计算机基础教研室,网页设计与制作实用教程（第,3,版）,课后练习,配套实训,利用配套实训文件夹,下提供的素材文件，根据所学的,CSS,知识,，,自主,设计,与制作一个“,CSS Zengarden”,的网页,。,要求,如下：,打开,“,cssZengarden(,素材,).html”,文件，另存为“,cssZengarden.html”,文件。,使用,CSS,设置页面属性，美化文本、图像、链接及列表项。,同步,测试,通过教材,第,6,章,“同步测试”检验自己是否掌握了本章的相关知识点与技能点。,网页设计与制作实用教程（第,3,版）,计算机工程学院计算机基础教研室,