第13章 Web标准与CSS网页布局实例.ppt

教学内容：第12章讲述了CSS的基本语法，CSS可以控制字体大小、设置字体样式，目前更多地应用在网页布局上。本章将通过实例讲述CSS布局网页中的元素的方法。本章以CSS布局为重点，探讨CSS布局的入门知识和布局网页元素的实例技巧。; 教学重点 表单标记 插入表单对象 菜单和列表 文本域标记 id标记 ;13.1 Web标准与CSS布局;Web标准是由W3C和其他标准化组织制定的一套规范集合，Web标准的目的在于创建一个统一的用于Web表现层的技术标准，以便通过不同的浏览器或终端设备向最终用户展示信息内容。 Web标准由一系列规范组成，目前的Web标准主要由三大部分组成：结构（Structure）、表现（Presentation）、行为（Behavior）。真正符合Web标准的网页设计是指能够灵活使用Web标准对Web内容进行结构、表现与行为的分离 。;掌握基于CSS的网页布局方式，是实现Web标准的基础。在制作主页时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确地控制。只要对相应的代码做一些简单的修改，就可以改变网页的外观和格式。;DIV+CSS是现在最流行的一种网页布局格式，以前常用布局表格来布局，而现在一些比较知名的网页设计全部采用DIV+CSS来排版布局。DIV+CSS的优点在于可以使HTML代码更整齐，更容易使人理解，而且在浏览时的速度也比传统的布局方式快，最重要的是它的可控性要比布局表格强得多。;DIV是XHTML的一个标记，DIV在使用时以div/div的形式出现。DIV本身就是容器性质的，不但可以内嵌table，还可以内嵌文本和其他的HTML代码。DIV用来为HTML文档内大块的内容提供结构和背景，DIV的起始标记和结束标记之间的所有内容都是用来构成这个块的。其中所包含元素的特性由DIV标记的属性来控制，或是通过使用样式表格式化这个块来进行控制。 DIV是CSS布局方式的核心对象，做一个简单的布局只需要依赖DIV与CSS，因此也称CSS布局为DIV＋CSS布局。;13.2.2 一列固定宽度;自适应布局是网页设计中常见的一种布局形式，自适应布局能够根据浏览器窗口的大小，自动改变其宽度或高度值，是一种非常灵活的布局形式。良好的自适应布局网站对不同分辨率的显示器都能提供最好的显示效果。自适应布局需要将宽度由固定值改为百分比。下面是一列自适应布局的CSS代码。;13.2.4 两列固定宽度;13.2.5 两列宽度自适应;13.2.6 两列右列宽度自适应;13.3 使用CSS设计网站导航栏 ;13.3.1 实现背景变换的导航菜单;13.3.2 利用CSS制作横向导航;表单是交互式网页中经常用到的元素。在网站中，表单是实现网页中数据传输的基础，其作用就是能实现访问者与网站之间的交互功能。利用表单，可以根据访问者输入的信息，自动生成页面反馈给访问者。默认的表单对象外观都是非常简单的，利用CSS样式可以美化表单对象。;13.4.1 改变按钮的背景颜色和文字颜色;13.4.2 设置文本框的样式;13.4.3 设计文本框中的文字样式;文本是网页中最简单，也是最基本的部分，无论当前的网页多么绚丽多彩，其中占多数的还是文本。在网页中文字的设计要醒目、清晰，文字的排版与组合要便于阅读。;13.5.1 利用CSS控制字体大小和行距;13.5.2 制作光晕文字效果;图片是文本的解释和说明，在网页中适当的位置放置一些图片，不仅可以使文本更加容易阅读，而且可使网页更具有吸引力。下面就利用CSS制作一些网页特效。;13.6.1 鼠标指针移上时图片渐变的效果;13.6.2 设计不重复出现的背景;整个网站都是由超链接连接而成的，下面讲述利用CSS控制超链接样式的方法。;13.7.1 使用CSS实现鼠标指针形状改变;13.7.2 鼠标指针移到链接文字上时改变文字大小或颜色;13.8经典习题;2. 上机操作题