第章使用CSS样式表美化和布局网页.pptVIP

* * 6.6.2 一列自适应 自适应布局是在网页设计中常见的一种布局形式，自适应的布局能够根据浏览器窗口的大小，自动改变其宽度或高度值，是一种非常灵活的布局形式。良好的自适应布局网站对不同分辨率的显示器都能提供最好的显示效果。自适应布局需要将宽度由固定值改为百分比 。 6.6.3 两列固定宽度 两列固定宽度布局的制作方法非常简单。两列的布局需要用到两个div，分别将两个div的id设置为“left”与“right”，表示两个div的名称。首先为它们制定宽度，然后让两个div在水平线中并排显示，从而形成两列式布局 。 6.6.4 两列宽度自适应 下面使用两列宽度自适应性，来实现左右栏宽度能够做到自动适应，设置自适应主要通过宽度的百分比值设置 。 6.6.5 两列右列宽度自适应 在实际应用中，有时候需要左栏固定宽度，右栏根据浏览器窗口大小自动适应，在CSS中只需要设置左栏的宽度即可。如上例中左右栏都采用了百分比实现了宽度自适应，这里只需要将左栏宽度设定为固定值，右栏不设置任何宽度值，并且右栏不浮动即可 。 6.6.6 三列浮动中间宽度自适应 使用浮动定位方式，从一列到多列的固定宽度及自适应，基本上可以简单完成，包括三列的固定宽度。而在这里给我们提出了一个新的要求，希望有一个三列式布局，基中左栏要求固定宽度，并居左显示，右栏要求固定宽度并居右显示，而中间栏需要在左栏和右栏的中间，根据左右栏的间距变化自动适应 。 6.6.7 布局的整体思路 一般网页都要放置一个大框作为网页中所有内容的父框，在其内部又分成头、体和脚3个部分，但有时也可以省略头、体的父框，但这两个部分确实是存在的 。 ??6.7 综合案例 前面对CSS设置文字的各种效果进行了详细的介绍，下面通过一些实例，讲述文字效果的综合使用 。 综合案例1——应用CSS定义字体样式 利用CSS可以固定字体大小，使网页中的文本始终不随浏览器改变而发生变化，总是保持着原有的大小 。 综合案例2——应用CSS制作阴影文字 灵活应用CSS滤镜的特点并加以组合，能够得到许多意想不到的效果。CSS滤镜把我们带入绚丽多姿的多媒体世界，正是有了滤镜属性，页面才变得更加漂亮。下面使用CSS的滤镜创建阴影文字 。 综合案例3——使用CSS+DIV布局网页实例 CSS＋DIV是网站标准中常用的术语之一，CSS和DIV的结构被越来越多的人采用。无论使用表格还是CSS，网页布局都是把大块的内容放进网页的不同区域里面。有了CSS，最常用来组织内容的元素就是div标签。CSS排版是一种很新的排版理念，首先要将页面使用div整体划分为几个板块，然后对各个板块进行CSS定位，最后在各个板块中添加相应的内容。 本 章 小 结 在制作网页时，对文本的格式化是一件很烦琐的工作。利用CSS样式（Cascading Style Sheets）不仅可以控制一篇文档中的文本格式，而且可以控制多篇文档的文本格式。因此使用CSS样式表定义页面文字，将会使工作量大大减小。一些好的CSS样式表的建立，使我们可以更进一步地对页面美化及文本格式进行精确定制。 当用户需要管理一个非常大的网站时，使用CSS样式定义站点，便可以体现出非常明显的优越性。使用CSS可以快速格式化整个站点或多个文档中的字体等格式，并且CSS样式可以控制多种不能使用HTML样式控制的属性。 * * * * * * * * * * * * * * * * * * * * * 第6章使用CSS样式表美化和布局网页 教学内容：CSS层叠样式表，是在网页制作过程中普遍用到的技术，现在已经为大多数浏览器所支持，成为网页设计必不可少的工具之一。使用CSS技术，可以更轻松、有效地对页面的整体布局、字体、图像、颜色、背景和链接等元素实现更加精确的控制，完成许多使用HTML无法实现的任务。 学习目标 熟悉CSS样式表 掌握CSS的基本语法 掌握添加CSS的方法 掌握CSS属性的设置 掌握CSS+DIV布局的四大核心 教学目标和基本要求 ___________________________________ ___________________________________ ___________________________________ 教学时间：本章共分_______课时 教学方法 案例教学 多媒体教学 理论面授 教学素材 课程范例文件：sample\第6章\ 练习文件：exercise\第6章\ 6.1 了解CSS样式表 CSS（Cascading Style Sheet，层叠样式表）是一种制作网页必不可少的技术之一，现在已经为大多数的浏览器所支持。实际上，CSS是一系列格式规格或样式的集合，主要用于控制页面的外观，是目前网页设计中的常用技术