网页设计与制作实用教程子教案教学建议第5章　在网页中使用CSS样式.pptVIP

第5章　在网页中使用CSS样式 网页设计与制作实用教程 主编：刘艳丽　副主编：许晞 秦高德 高妍 学习目标 掌握创建类样式、标签样式、高级样式的方法； 掌握利用CSS样式面板创建、修改、应用各种CSS样式的方法； 掌握利用外部样式文件统一网站风格的方法； 了解类样式、标签样式与高级样式的区别； 了解CSS滤镜效果的实现方法。 目录 CSS　样式美化网页实例 利用CSS与Div进行页面布局实例 本章小结 配套实训 练习题 CSS　样式美化网页实例 设计目标 页面分析 实训引导 制作步骤 设计目标 应用CSS样式对网页中的各种元素进行格式化，浏览效果如图所示 。 页面分析 本实例分别对文章正文、文章标题、超级链接的各种状态、网页背景、网页标题以及网页中的图像进行了以下设置，如 ： 正文、标题； 超链接 ； 重定义HTML标签body； 使用CSS的滤镜 ； 为图像添加彩色立体边框 。 （参见教程P74～P75）： 实训引导 1．本页面用到的9个图像文件：img4_3_3.jpg、img4_3_4.jpg、img4_3_5.jpg、img4_3_6.jpg（文档中的图像）、img5_1.gif、img5_2.gif、img5_3.gif、img5_4.gif（图像项目符）及img5_5.gif（背景图片）由配套光盘webcourse\chapter05\images文件夹提供，在制作页面之前，先将用到的图像文件复制到本地站点future\images文件夹中。 2．素材网页文件ex5_city.html由配套光盘webcourse\chapter05\materials文件夹提供，请将该文件复制到本地站点future\webpages文件夹下。 3．页面效果请参见配套光盘webcourse\chapter05\result文件夹下的ex5_city.html文件。 制作步骤 1．使用CSS样式面板建立文章正文及文章标题的样式，并应用于相应的对象。 2．通过创建高级样式改变超级链接的样式风格。 3．将超级链接样式作为外部样式应用于其它文档中，统一网页的风格。 4．为网页设置背景颜色及背景图片。 5．使用CSS的滤镜效果美化文字。 6．为图片设置立体边框。 建立并应用正文及标题的样式 为网页文件的正文设置类样式.textcss，该样式可以在整个HTML中被调用，操作步骤见教程P76。 为网页文件的标题（Heading2）设置标签样式。操作步骤见教程P78。 应用类样式.textcss，操作步骤见教程P79。 应用重新定义的HTML标签h2，操作步骤见教程P80。 修改类样式.textcss，操作步骤见教程P80。 创建高级样式改变超级链接样式风格 设置重新定义HTML标签a，操作步骤见教程P82。 设置a:link的样式，操作步骤见教程P84。 设置a:visited的样式，操作步骤见教程P84。 设置a:active的样式，操作步骤见教程P85。 设置a:hover的样式，操作步骤见教程P85。 使用超级链接样式统一网页风格 ?　将外部样式文件main.css中的超级链接样式应用于其他文档中，使其保持一致风格，操作步骤见教程P87。 为网页设置背景颜色及背景图片 设置页面背景颜色为#EBF6FC，背景图像为img5_5.gif，并使背景图像纵向重复，操作步骤见教程P88。 使用CSS的滤镜效果美化文字 将网页中的标题文字“未来都市”制作成阴影字，操作步骤见教程P89。 将网页中的文字“虽然这些未来城市有点儿像海市蜃楼般迷离，……”制作成光晕文字，操作步骤见教程P91。 为图片设置立体边框 ?　为图像添加彩色立体边框，操作步骤见教程P91。 利用CSS与Div进行页面布局实例 设计目标 页面分析 实训引导 制作步骤 设计目标 利用CSS与Div进行页面布局，浏览效果如图所示 。 页面分析 该页面可分为4部分，分别装载在4个Div中，通过对这4个Div进行定位美化，实现页面效果。 实训引导 1．本页面用到的图像文件img5_logo.jpg由配套光盘webcourse\chapter05\images文件夹提供，在制作页面之前，先将用到的图像文件复制到本地站点future\images文件夹中。 2．素材网页文件index_css_div.html由配套光盘webcourse\chapter05\materials文件夹提供，请将该文件复制到本地站点future\webpages文件夹下。 3．页面效果请参见配套光盘webcourse\chapter05文件夹下的index_css_div.html文件。 制作步骤 （1）将网页主要内容包围在Div中并分配ID。 （2）利用CSS编辑每个Div的属性。