使用CSS样式表美化和布局网页.ppt
第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的“列表”类别为列表标签定义列表设置。,6.3.7 设置定位样式CSS的“定位”样式属性使用“层”首选参数中定义层的默认标签，将标签或所选文本块更改为新层。,6.3.8 设置扩展样式“扩展”样式属性包含两部分。,6.3.9 设置过渡样式在过去的几年中，大多数都是使用JavaScript来实现过渡效果。使用CSS可以实现同样的过渡效果。过渡效果最明显的表现就是当用户把鼠标悬停在某个元素上时高亮它们，如链接、表格、表单域、按钮等。过渡可以给页面增加一种非常平滑的外观。,6.4使用CSS+Div布局的4大核心,CSSDiv是网站标准中常用的术语之一，CSS和Div的结构被越来越多的人采用，它的好处很多，可以使结构简洁，定位更灵活，CSS布局的最终目的是搭建完善的页面架构。下面介绍使用CSS+DIV布局的核心知识。,6.4.1 盒子模型如果想熟练掌握Div和CSS的布局方法，首先要对盒子模型有足够的了解。盒子模型是CSS布局网页时非常重要的概念，只有很好地掌握了盒子模型以及其中每个元素的使用方法，才能真正的布局网页中各个元素的位置。所有页面中的元素都可以看作一个装了东西的盒子，盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin）。一个盒子由4个独立部分组成。,6.4.2 标准流标准流就是标签的排列方式，就像流水一样，排在前面的标签内容前面出现，排后面的标签内容后面出现。,6.4.3 浮动 float属性定义元素在哪个方向浮动。以往这个属性应用于图像，使文本围绕在图像周围，不过在CSS中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。float是相对定位的，它会随着浏览器的大小和分辨率的变化而改变。float浮动属性是元素定位中非常重要的属性，常常通过对div元素应用float浮动来进行定位。,6.4.4 定位position的原意为位置、状态或安置。在CSS布局中，position属性非常重要，很多特殊容器的定位必须用position来完成。position属性有4个值，分别是static、absolute、fixed和relative，static是默认值，代表无定位。定位（position）允许用户精确定义元素框出现的相对位置，可以相对于它通常出现的位置，相对于其上级元素，相对于另一个元素，或者相对于浏览器视窗本身。每个显示元素都可以用定位的方法来描述，而其位置由此元素的包含块来决定的。,6.5 使用CSS+Div布局网页许多的Web站点都使用基于表格的布局显示页面信息。表格对于显示表格数据很有用，并且很容易在页面上创建。但表格还会生成大量难于阅读和维护的代码。许多设计者首选基于CSS的布局，正是因为基于CSS的布局所包含的代码数量要比具有相同特性的基于表格的布局使用的代码数量少很多。,6.5.1 什么是Web标准Web标准是由W3C和其他标准化组织制定的一套规范集合，Web标准的目的在于创建一个统一的用于Web表现层的技术标准，以便于通过不同浏览器或终端设备向最终用户展示信息内容。Web标准由一系列规范组成，目前的Web标准主要由三大部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。真正符合Web标准的网页设计是指能够灵活使用Web标准对Web内容进行结构、表现与行为的分离。,6.5.2 CSS+Div布局优势掌握基于CSS的网页布局方式，是实现Web标准的基础。在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变网页的外观和格式。采用CSS布局有以下优点。大大缩减页面代码，提高页面浏览速度，缩减带宽成本。结构清晰，容易被搜索引擎搜索到。缩短改版时间，只要简单地修改几个CSS文件就可以重新设计一个有成百上千页面的站点。,强大的字体控制和排版能力。CSS非常容易编写，可以像写HTML代码一样轻松地编写CSS。提高易用性，使用CSS可以结构化HTML，如标记只用来控制段落，标记只用来控制标题，标记只用来表现格式化的数据等。表现和内容相分离，将设计部分分离出来放在一个独立样式文件中。更方便搜索引擎的搜索，用只包含结构化内容的HTML代替嵌套的标记，搜索引擎将更有效地搜索到内容。,table的布局中，垃圾代码会很多，一些修饰的样式及布局的代码混合一起，很不直观。而div更能体现样式和结构相分离，结构的重构性强。可以将许多网页的风格格式同时更新。不用再一页一页地更新了。可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。,6.5.3 使用CSS布局模板Dreamweaver CS6是开发CSS的得力助手，在Dreamweaver CS6的“新建文档”对话框中提供了几套常用的CSS布局模板。,6.6 使用CSS+Div布局的典型模式所谓布局，就是将网页中的各个板块放置在合适的位置。布局一般分为表格布局、绘制层布局、框架布局和CSS+DIV布局模式等几种。其中表格布局和CSS+DIV布局是最常用和最流行的。下面介绍典型的CSS+DIV布局类型。,6.6.1 一列固定宽度一列式布局是所有布局的基础，也是最简单的布局形式。一列固定宽度中，宽度的属性值是固定像素。,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布局网页实例 CSSDIV是网站标准中常用的术语之一，CSS和DIV的结构被越来越多的人采用。无论使用表格还是CSS，网页布局都是把大块的内容放进网页的不同区域里面。有了CSS，最常用来组织内容的元素就是标签。CSS排版是一种很新的排版理念，首先要将页面使用整体划分为几个板块，然后对各个板块进行CSS定位，最后在各个板块中添加相应的内容。,本 章 小 结,在制作网页时，对文本的格式化是一件很烦琐的工作。利用CSS样式（Cascading Style Sheets）不仅可以控制一篇文档中的文本格式，而且可以控制多篇文档的文本格式。因此使用CSS样式表定义页面文字，将会使工作量大大减小。一些好的CSS样式表的建立，使我们可以更进一步地对页面美化及文本格式进行精确定制。当用户需要管理一个非常大的网站时，使用CSS样式定义站点，便可以体现出非常明显的优越性。使用CSS可以快速格式化整个站点或多个文档中的字体等格式，并且CSS样式可以控制多种不能使用HTML样式控制的属性。,
