网页设计与制作实用教程电子教案、教学建议第5章 在网页中使用CSS样式
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
13
为图片设置立体边框
为图像添加彩色立体边框，操作步骤见教程P91。
2019/9/21
第5章 在网页中使用CSS样式
14
利用CSS与Div进行页面布局实例
设计目标 页面分析 实训引导 制作步骤
2019/9/21
第5章 在网页中使用CSS样式
15
设计目标
利用CSS与Div进行页面布局，浏览效果如图所示 。
2．素材网页文件ex5_city.html由配套光盘 webcourse\chapter05\materials文件夹提供，请将该文件复 制到本地站点future\webpages文件夹下。
3．页面效果请参见配套光盘webcourse\chapter05\result文件夹 下的ex5_city.html文件。
2019/9/21
第5章 在网页中使用CSS样式
23
配套实训
参见教材第104～105页，利用提供 的素材文件，按要求制作网页。
2019/9/21
第5章 在网页中使用CSS样式
24
练习题
参见教材第105～106页，完成相应 的练习题：
填空题 单选题 思考题
2019/9/21
第5章 在网页中使用CSS样式
2019/9/21
第5章 在网页中使用CSS样式
10
使用超级链接样式统一网页风格
将外部样式文件main.css中的超级链接样式应用 于其他文档中，使其保持一致风格，操作步骤见 教程P87。
2019/9/21
第5章 在网页中使用CSS样式
11
为网页设置背景颜色及背景图片
设置页面背景颜色为#EBF6FC，背景图像为 img5_5.gif，并使背景图像纵向重复，操作步骤见 教程P88。
创建Div元素Navigation、content、footer，并装 载相对应的元素，操作步骤见教程P96。
将网页的所有内容放置在一个Div中，并命名为 wrapper，操作步骤见教程P96。
2019/9/21
第5章 在网页中使用CSS样式
20
利用CSS编辑每个Div的属性
利用CSS对话框设置Div元素Navigation的属性值， 具体操作步骤见教程P97。
2．素材网页文件index_css_div.html由配套光盘 webcourse\chapter05\materials文件夹提供，请将该 文件复制到本地站点future\webpages文件夹下。
3．页面效果请参见配套光盘webcourse\chapter05 文件夹下的index_css_div.html文件。
分别设置wrapper、logo、content、footer的属性， 各项属性值见教程P100。
2019/9/21
第5章 在网页中使用CSS样式
21
利用CSS对Div进行定位
将整个Div元素wrapper居中对齐，操作步骤见教 程P101。
将导航栏放置在页面的左边，主要内容区域放置 在页面的右边 ，操作步骤见教程P101。
网页设计与制作 实用教程
主编：刘艳丽式、高级样式的方法； 掌握利用CSS样式面板创建、修改、应用各种 CSS样式的方法； 掌握利用外部样式文件统一网站风格的方法； 了解类样式、标签样式与高级样式的区别； 了解CSS滤镜效果的实现方法。
2019/9/21
2019/9/21
第5章 在网页中使用CSS样式
返回
16
页面分析
该页面可分为4部分，分别装载在4个Div中，通 过对这4个Div进行定位美化，实现页面效果。
2019/9/21
第5章 在网页中使用CSS样式
返回
17
实训引导
1．本页面用到的图像文件img5_logo.jpg由配套光 盘webcourse\chapter05\images文件夹提供，在制作 页面之前，先将用到的图像文件复制到本地站点 future\images文件夹中。
2019/9/21
第5章 在网页中使用CSS样式
返回
7
制作步骤
1．使用CSS样式面板建立文章正文及文章标题的样 式，并应用于相应的对象。
2．通过创建高级样式改变超级链接的样式风格。 3．将超级链接样式作为外部样式应用于其它文档中，
统一网页的风格。
4．为网页设置背景颜色及背景图片。 5．使用CSS的滤镜效果美化文字。 6．为图片设置立体边框。
2019/9/21
第5章 在网页中使用CSS样式
返回
8
建立并应用正文及标题的样式
为网页文件的正文设置类样式.textcss，该样式可 以在整个HTML中被调用，操作步骤见教程P76。
为网页文件的标题（Heading2）设置标签样式。 操作步骤见教程P78。
应用类样式.textcss，操作步骤见教程P79。 应用重新定义的HTML标签<h2>，操作步骤见教
程P80。 修改类样式.textcss，操作步骤见教程P80。
2019/9/21
第5章 在网页中使用CSS样式
9
创建高级样式改变超级链接样式风格
设置重新定义HTML标签<a>，操作步骤见教程 P82。
设置a:link的样式，操作步骤见教程P84。 设置a:visited的样式，操作步骤见教程P84。 设置a:active的样式，操作步骤见教程P85。 设置a:hover的样式，操作步骤见教程P85。
25
2019/9/21
第5章 在网页中使用CSS样式
返回
18
制作步骤
（1）将网页主要内容包围在Div中并分配ID。 （2）利用CSS编辑每个Div的属性。 （3）利用CSS对Div进行定位。
2019/9/21
第5章 在网页中使用CSS样式
返回
19
将网页主要内容包围在Div中并分配ID
将页面的顶部信息元素放置在一个Div中，并命 名为logo，操作步骤见教程P94。
应用CSS样式对网页中的各种元素进行格式化， 浏览效果如图所示 。
2019/9/21
第5章 在网页中使用CSS样式
返回
5
页面分析
本实例分别对文章正文、文章标题、超级链接 的各种状态、网页背景、网页标题以及网页中的 图像进行了以下设置，如 ：
正文、标题； 超链接 ； 重定义HTML标签<body>； 使用CSS的滤镜 ； 为图像添加彩色立体边框 。
第5章 在网页中使用CSS样式
2
目录
CSS 样式美化网页实例 利用CSS与Div进行页面布局实例 本章小结 配套实训 练习题
2019/9/21
第5章 在网页中使用CSS样式
3
CSS 样式美化网页实例
设计目标 页面分析 实训引导 制作步骤
2019/9/21
第5章 在网页中使用CSS样式
4
设计目标
（参见教程P74～P75）：
2019/9/21
第5章 在网页中使用CSS样式
返回
6
实训引导
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文件夹 中。
2019/9/21
第5章 在网页中使用CSS样式
12
使用CSS的滤镜效果美化文字
将网页中的标题文字“未来都市”制作成阴影字， 操作步骤见教程P89。
将网页中的文字“虽然这些未来城市有点儿像海 市蜃楼般迷离，……”制作成光晕文字，操作步骤 见教程P91。
2019/9/21
第5章 在网页中使用CSS样式
2019/9/21
第5章 在网页中使用CSS样式
22
本章小结
本章主要介绍了利用CSS样式面板创建、修改和应 用CSS样式的方法。 CSS的三种样式是：类样式、标签样式、高级样式。 样式又分为内部样式和外部样式两种。 利用CSS与Div进行页面布局，主要是将页面的内 容划分成一个个区域，装载到每一个Div中，然后 利用CSS对Div元素进行编辑并对其进行定位，达 到页面布局的效果。