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

6.6.2 一列自适应 自适应布局是在网页设计中常见的一种布局形 式，自适应的布局能够根据浏览器窗口的大小，自 动改变其宽度或高度值，是一种非常灵活的布局形 式。良好的自适应布局网站对不同分辨率的显示器 都能提供最好的显示效果。自适应布局需要将宽度 由固定值改为百分比 。 第 6 章使用 CSS 样式表美化 和布局网页 教学内容： CSS 层叠样式表，是在网页制作过 程中普遍用到的技术，现在已经为大多数浏览 器所支持，成为网页设计必不可少的工具之一。 使用 CSS 技术，可以更轻松、有效地对页面的 整体布局、字体、图像、颜色、背景和链接等 元素实现更加精确的控制，完成许多使用 HTML 无法实现的任务。 ? 学习目标 ? 熟悉 CSS 样式表 ? 掌握 CSS 的基本语法 ? 掌握添加 CSS 的方法 ? 掌握 CSS 属性的设置 ? 掌握 CSS+DIV 布局的四大核心 教学目标和基本要求 ___________________________________ ___________________________________ ___________________________________ 教学时间 ： 本章共分 _______ 课时 教学方法 案例教学 多媒体教学 理论面授 教学素材 课程范例文件： sample\ 第 6 章 \ 练习文件： exercise\ 第 6 章 \ 6.1 了解 CSS 样式表 CSS （ Cascading Style Sheet ，层叠样式表 ）是一种制作网页必不可少的技术之一，现在已 经为大多数的浏览器所支持。实际上， CSS 是一 系列格式规格或样式的集合，主要用于控制页面 的外观，是目前网页设计中的常用技术与手段。 CSS 具有强大的页面美化功能。通过 CSS ， 可以控制许多仅使用 HTML 标记无法控制的属性， 并能轻而易举地实现各种特效。 6.2 CSS 的使用 在制作网页时，对文本的格式化是一件很烦 琐的工作。利用 CSS 样式不仅可以控制一篇文档 中的文本格式，而且可以控制多篇文档的文本格 式。因此使用 CSS 样式表定义页面文字，将会使 工作量大大减小。一些好的 CSS 样式表的建立， 使我们可以更进一步地对页面美化及文本格式进 行精确定制 。 6.2.1 CSS 的基本语法 CSS 是一系列样式的集合，使用 CSS 可以有效 地分离页面的内容与格式，从而减少网页设计的工 作量。下面简要介绍 CSS 样式的基本语法和添加方 法。 CSS 的语法结构仅由 3 部分组成，分别为选择符 、样式属性和值。基本语法如下： 选择符 { 样式属性：取值；样式属性：取值；样 式属性：取值； …… } 。 6.2.2 添加 CSS 的方法 在 HTML 文档中添加 CSS 的方法主要有 4 种， 1 ．链接外部样式表 2 ．导入外部样式表 3 ．内部样式表 4 ．内嵌样式表。 6.3 设置 CSS 属性 控制网页元素外观的 CSS 样式用来定义字体、 颜色、边距和字间距等属性，可以使用 Dreamweaver 来对所有的 CSS 属性进行设置。 CSS 属性被分为 9 大类：类型、背景、区块、方框、边框 、列表、定位、扩展和过滤 。 6.3.1 设置 CSS 类型属性 在 CSS 样式定义对话框左侧的【分类】列表框 中选择“类型”选项，在右侧可以设置 CSS 样式的 类型参数 。 6.3.2 设置 CSS 背景属性 使用【 CSS 规则定义】对话框的“背景”类别 可以定义 CSS 样式的背景设置。可以对网页中的任 何元素应用背景属性 。 6.3.3 设置区块样式 使用【 CSS 规则定义】对话框的“区块”类别 可以定义标签和属性的间距和对齐设置，对话框中 左侧的【分类】列表中选择“区块”选项，在右侧 可以设置相应的 CSS 样式 。 6.3.4 设置方框样式 使用【 CSS 规则定义】对话框的“方框”类别 可以为用于控制元素在页面上的放置方式的标签和 属性定义设置。可以在应用填充和边距设置时将设 置应用于元素的各个边，也可以使用【全部相同】 设置将相同的设置应用于元素的所有边。 CSS 的“方框”类别可以为控制元素在页面上 的放置方式的标签和属性定义设置。 6.3.5 设置边框样式 CSS 的“边框”类别可以定义元素周围边框的 设置 。 6.3.6 设置列表样式 CSS 的“列表”类别为列表标签定义