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

1、网页设计与制作实用网页设计与制作实用教程（第教程（第3 3版）版）高等教育出版社高等教育出版社第6章 利用CSS样式美化网页制作“服务”页面计 算 机 工 程 学 院 计 算 机 基 础 教 学部学习目标 掌握创建样式及应用样式的方法 了解CSS选择器的4种类型的区别 了解CSS常用属性值的设置 了解利用CSS控制网页的3种方法 掌握利用外部样式表文件统一网站风格的方法 了解利用CSS美化网页的流程深圳职业技术学院 计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）2实训项目网页设计师小高围绕“慧衡科技专业服务”这一主题，已经制作好了网页内容，现需要对其进行美化。深圳职业

2、技术学院 计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）3项目分析设计思路：（1）在设计页面属性时，采用跟整体网站风格一致的灰蓝色作为背景颜色。（2）页面元素以文本为主，首先设置文本样式，使用不同的颜色区分不同的文本。（3）采用列表制作浅蓝色背景的水平导航条，使用装饰图片环绕在文本左侧。（4）对于子页面“外贸电子商务”和“外贸网站设计”，采用外部样式表文件统一外观。设计页面背景时使用颜色来区分不同的模块，在对文本进行美化时采用不同的字体、颜色及大小突出标题，并使用图像制作文本背景美化网页。深圳职业技术学院 计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第

3、 3 版）4设计目标网 页 设 计 与 制 作 实 用 教 程（第 3 版）5深圳职业技术学院 计算机基础教研室预备知识：认识CSSCSS（1）CSS（Cascading Style Sheets），中文翻译为层叠样式表，是用户控制网页样式并允许将样式信息与网页内容分离的一种标记性语言，它是由W3C于1996年12月推出。（2）CSS的主要功能就是定义元素的属性值来控制元素的显示效果。其中包括定义元素的大小、边框、背景、定位等，通过对这些属性设置值来形成一个样式，然后再将样式应用于文档中同一类型的元素，使网页结构内容和表现形式相分离。深圳职业技术学院 计算机基础教研室网 页 设 计 与 制 作

4、 实 用 教 程（第 3 版）6预备知识：CSSCSS的语法规则CSS选择器的类型：（1）标签选择器 h1（2）类选择器 .textfooter （3）ID选择器#table1 （4）复合内容选择器#table1 a 深圳职业技术学院 计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）7预备知识：CSSCSS的使用方式（1）内联样式:直接对HTML标签使用style属性，然后将代码直接写在其中。慧衡科技（2）嵌入式样式表：嵌入式样式表使用标签将样式嵌入到HTML文件的头部中。（3）外部样式表：外部样式表是指将CSS写成一个文件，在HTML文件的头部中通过使用标签将样式表文

5、件链接到此页面中。深圳职业技术学院 计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）8制作流程网 页 设 计 与 制 作 实 用 教 程（第 3 版）深圳职业技术学院 计算机基础教研室9任务1：设置网页的页面属性任务4：利用CSS设置超链接样式任务3：利用CSS实现图文混排任务2：利用CSS美化文本任务5：制作水平导航条任务6：创建外部样式表文件任务1 1 设置网页的页面属性网 页 设 计 与 制 作 实 用 教 程（第 3 版）深圳职业技术学院 计算机基础教研室101重新定义HTML标签body2查看body标签的CSS代码STEP1：重新定义HTMLHTML标签BO

6、DYBODY深圳职业技术学院 计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）11F 打开“CSS样式”面板，新建CSS规则。F 重新定义body标签的属性值。（1）设置body的背景属性，在“Background-color”文本框中输入“#65768A”。（2）设置body的文本样式，在“Font-size”文本框中输入“12px”。（3）设置body的方框样式，在“Margin”区域中，不勾选“全部相同”，在“Top”文本框中输入“0”。STEP2：查看BODYBODY标签的CSSCSS代码深圳职业技术学院 计算机基础教研室网 页 设 计 与 制 作 实 用 教

7、程（第 3 版）12F 在代码视图下查看CSS代码。任务2 2 利用CSSCSS美化文本网 页 设 计 与 制 作 实 用 教 程（第 3 版）深圳职业技术学院 计算机基础教研室131重新定义HTML标签h1，h2，p2新建类样式“.copyright”、“.alignRight”STEP1STEP1：重新定义HTMLHTML标签H1H1，H2H2，P P深圳职业技术学院 计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）14F 重新定义HTML标签h1的属性值：F 重新定义HTML标签h2的样式：h2 font-family:宋体;font-size:14px;colo

8、r:#C7D9ED;F 重新定义HTML标签p的样式：pline-height:150%;color:#000;width:1000px;STEP2STEP2：新建类样式“.COPYRIGHT.COPYRIGHT”、“.ALIGNRIGHTALIGNRIGHT”深圳职业技术学院 计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）15F 新建类样式“.copyright”，设置属性值。F 为页脚文本应用类样式“.copyright”。F 创建类样式“.alignRight”，并应用到页面中所有的“详细了解”文本所在的段落，属性值如下：.alignRight text-ali

9、gn:right;任务3 3 利用CSSCSS实现图文混排网 页 设 计 与 制 作 实 用 教 程（第 3 版）深圳职业技术学院 计算机基础教研室161新建类样式“.imgIm”2将“.imgIm”样式应用到页面中的“IMservice”图像任务4 4 利用CSSCSS设置超链接样式深圳职业技术学院 计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）171重新定义HTML标签a2设置链接的4种状态样式STEP1STEP1：重新定义HTMLHTML标签A A深圳职业技术学院 计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）18F 重新定义HTML标

10、签a，设置链接文本的字体格式及取消下划线。a font-family:黑体;font-size:14px;text-decoration:none;STEP2STEP2：设置链接的4 4种状态样式F 设置a:link的样式。F 设置a:visited的样式。F 设置a:hover的样式。F 设置a:active的样式。深圳职业技术学院 计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）19任务5 5 美化列表与制作水平导航条深圳职业技术学院 计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）201将链接文本转换成列表2为项目列表创建ID样式3设置列表

11、项水平显示4设置列表项中的链接样式STEP1STEP1：将链接文本转换成列表深圳职业技术学院 计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）21F 将链接文本转换成列表。STEP2STEP2：为项目列表创建IDID样式F 为项目列表创建ID样式#nav,设置项目列表背景。深圳职业技术学院 计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）22#navbackground-image:url(./images/bg_navigation.jpg);background-repeat:no-repeat;background-position:lef

12、t top;margin:0px;height:35px;width:1000px;padding-top:12px;STEP3STEP3：设置列表项水平显示F 设置列表项水平显示及列表项之间的间隔。深圳职业技术学院 计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 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-l

13、eft:20px;list-style-type:none;STEP4STEP4：设置列表项中的链接样式设置列表项中的链接样式，其属性值如下：#nav li a font-family:黑体;font-size:16px;text-decoration:none;深圳职业技术学院 计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）24任务6 6 利用外部样式表美化SERVICE_EC.HTMLSERVICE_EC.HTML、SERVICE_WD.HTMLSERVICE_WD.HTML文件深圳职业技术学院 计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3

14、版）251创建样式表文件service.css2链接外部样式表文件3利用CSS设置背景图像STEP1STEP1：创建样式表文件SERVICE.CSSSERVICE.CSSF 重新定义HTML标签body的属性值。F 重新定义HTML标签li的属性值，将样式保存到“service.css”文件中。F 从素材文件拷贝其他样式到“service.css”文件中。F 为页面中的元素应用类样式。深圳职业技术学院 计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）26STEP2STEP2：链接外部样式表文件F 将“service.css”文件中的样式应用于“service_wd”文档

15、中。深圳职业技术学院 计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）27STEP3STEP3：利用CSSCSS设置背景图像F 在“service_ec”文件中新建类样式“.textCon”，设置属性值。F 在“service_wd”文件中新建类样式“.textCon”，为所在段落设置背景图像。深圳职业技术学院 计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）28项目总结计算机工程学院计算机基础教研室网 页 设 计 与 制 作 实 用 教 程（第 3 版）课后练习1.1.配套实训配套实训利用配套实训文件夹下提供的素材文件，根据所学的CSS知识，自主设计与制作一个“CSS Zengarden”的网页。要求如下：打开“cssZengarden(素材).html”文件，另存为“cssZengarden.html”文件。使用CSS设置页面属性，美化文本、图像、链接及列表项。2.2.同步同步测试测试通过教材第6章“同步测试”检验自己是否掌握了本章的相关知识点与技能点。网 页 设 计 与 制 作 实 用 教 程（第 3 版）计算机工程学院计算机基础教研室