Web标准与CSS网页布局实例.PPT

* 教学内容：第12章讲述了CSS的基本语法，CSS可以控制字体大小、设置字体样式，目前更多地应用在网页布局上。本章将通过实例讲述CSS布局网页中的元素的方法。本章以CSS布局为重点，探讨CSS布局的入门知识和布局网页元素的实例技巧。 第13章 Web标准与CSS网页布局实例 教学重点 表单标记 插入表单对象 菜单和列表 文本域标记 id标记 13.1 Web标准与CSS布局 Web标准是网站开发中一系列标准的集合，包括XHTML、XML、CSS、DOM和ECMAScript等。制定这些标准是为了便于维护，代码更简洁，降低带宽的运行成本，更容易被搜索引擎搜索到，改版方便，不需要变动页面内容，提高网站易用性等。 Web标准是由W3C和其他标准化组织制定的一套规范集合，Web标准的目的在于创建一个统一的用于Web表现层的技术标准，以便通过不同的浏览器或终端设备向最终用户展示信息内容。 Web标准由一系列规范组成，目前的Web标准主要由三大部分组成：结构（Structure）、表现（Presentation）、行为（Behavior）。真正符合Web标准的网页设计是指能够灵活使用Web标准对Web内容进行结构、表现与行为的分离 。 13.1.1 什么是Web标准 掌握基于CSS的网页布局方式，是实现Web标准的基础。在制作主页时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确地控制。只要对相应的代码做一些简单的修改，就可以改变网页的外观和格式。 13.1.2 CSS布局的优势 DIV+CSS是现在最流行的一种网页布局格式，以前常用布局表格来布局，而现在一些比较知名的网页设计全部采用DIV+CSS来排版布局。DIV+CSS的优点在于可以使HTML代码更整齐，更容易使人理解，而且在浏览时的速度也比传统的布局方式快，最重要的是它的可控性要比布局表格强得多。 13.2 DIV+CSS布局网页基础 DIV是XHTML的一个标记，DIV在使用时以div/div的形式出现。DIV本身就是容器性质的，不但可以内嵌table，还可以内嵌文本和其他的HTML代码。DIV用来为HTML文档内大块的内容提供结构和背景，DIV的起始标记和结束标记之间的所有内容都是用来构成这个块的。其中所包含元素的特性由DIV标记的属性来控制，或是通过使用样式表格式化这个块来进行控制。 DIV是CSS布局方式的核心对象，做一个简单的布局只需要依赖DIV与CSS，因此也称CSS布局为DIV＋CSS布局。 13.2.1 认识DIV 13.2.2 一列固定宽度 一列式布局是所有布局的基础，也是最简单的布局形式。一列固定宽度中，宽度的属性值是固定的像素。下面举例说明一列固定宽度的布局方法。 自适应布局是网页设计中常见的一种布局形式，自适应布局能够根据浏览器窗口的大小，自动改变其宽度或高度值，是一种非常灵活的布局形式。良好的自适应布局网站对不同分辨率的显示器都能提供最好的显示效果。自适应布局需要将宽度由固定值改为百分比。下面是一列自适应布局的CSS代码。 13.2.4 两列固定宽度 两列固定宽度布局非常简单，两列的布局需要用到两个div，分别将两个div的id设置为left与right，表示两个div的名称。首先为它们设置宽度，然后让两个div在水平线中并排显示，从而形成两列式布局。 13.2.5 两列宽度自适应 下面使用两列宽度自适应布局实现左右栏宽度能够做到自动适应，设置自适应主要通过宽度的百分比值控制。 13.2.6 两列右列宽度自适应 在实际应用中，有时候需要左栏固定宽度，右栏根据浏览器窗口大小自动适应，在CSS中只需要设置左栏的宽度即可。如上例中左右栏都采用百分比实现宽度自适应，这里只需要将左栏宽度设定为固定值，右栏不设置任何宽度值，并且右栏不浮动。 13.3 使用CSS设计网站导航栏 网站导航是网站中最重要的元素，是网站提供给浏览者最直接、最方便的访问网站内容的工具。总的来说导航的核心目标是设计一个简单快捷的操作入口，帮助浏览者快速找到网站中的内容，设计时应当根据网站类型及内容的需求设计合理的导航形式。这里将使用CSS对常用的三种导航形式进行设计，看看CSS是如何实现这些样式的。 13.3.1 实现背景变换的导航菜单 导航也是一种列表，每个列表数据就是导航中的一个导航频道，使用ul元素以及li元素以及CSS样式可以实现背景变换的导航菜单。 13.3.2 利用CSS制作横向导航 利用CSS制作横向导航的具体操作步骤介绍如下 。 表单是交互式网页中经常用到的元素。在网站中，表单是实现网页中数据传输的基础，其作用就是能实现访问者与网站之间的交互功能。利用表单，可以根据访问者输入的信息，自动生成页面反馈给