第9章使用Div+CSS灵活布局网页方案.ppt

　　1．结构化标准语言 　　HTML是网页的基本描述语言，设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系起来，形成有机的整体，不用考虑具体信息是在当前电脑上还是在网络的其他电脑上。 　　2．表现标准语言 　　CSS 称为层叠样式表，英文是Cascading Style Sheets。目前遵循的是W3C 于1998 年5 月12 日发布的CSS 2。W3C 创建CSS 目的是以CSS取代HTML 表格式布局和其他表现的语言。 　　3．行为标准 　　DOM 称为文档对象模型，英文全称是Document Object Model，是一种W3C 颁布的标准，用于对结构化文档建立对象模型，从而使得用户可以通过程序语言（包括脚本）来控制其内部结构。 网站标准不是某一个标准，而是标准的集合。网页主要由3 部分组成： 结构（Structure）、表现（Presentation） 和行为（Behavior）。对应的标准也分3 个方面：结构化标准语言主要包括HTML 和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型，如W3C DOM、ECMAScript 等。 传统表格布局方式实际上是利用了HTML 中的表格元素（table）具有的无边框特性，由于表格元素可以在显示时使单元格的边框和间距设置为0，所以可以将网页中的各个元素按版式划分放入表格的各单元格中，从而实现复杂的排版组合。 9.2.1　表格布局的特点 　　目前仍有一部分网站在使用表格布局，表格布局使用简单，制作者只要将内容按照行和列拆分，用表格组装起来即可实现设计版面布局。 9.2.2　冗余的嵌套表格和混乱的结构 　　采用表格布局的页面内，为了实现设计的布局，制作者往往在单元格标签td 内设置高度、宽度和对齐等属性，有时还要加入装饰性的图片，图片和内容混杂在一起，使代码视图显得非常臃肿。 复杂的表格使得设计极为困难，修改更加繁琐，最后生成的网页代码除了表格本身的代码，还有许多没有意义的图像占位符及其他元素，文件量庞大，最终导致浏览器下载解析速度变慢。而使用CSS 布局则可以从根本上改变这种情况。CSS 布局的重点不再放在表格元素的设计中，取而代之的是HTML 中的另一个元素——Div，Div 可以理解为“图层”或是一个“块”，Div 是一种比表格简单的元素，语法上只有从Div 开始和/Div 结束， Div 的功能仅仅是将一段信息标记出来用于后期的样式定义。 9.3.1　什么是Web标准 　　Web 标准，即网站标准。目前通常所说的Web 标准一般指进行网站建设所采用的基于HTML 语言的网站设计语言。Web 标准中典型的应用模式是Div+CSS。实际上，Web 标准并不是某一个标准，而是一系列标准的集合。 9.3.2　Div+CSS的优势 　　CSS 样式表是控制页面布局样式的基础，并真正能够做到网页表现与内容分离的一种样式设计语言。相对传统HTML 的简单样式控制而言，CSS 能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，以及拥有对网页对象盒模型样式的控制能力，并能够进行初步页面交互设计，是目前基于文本展示的最优秀的表现设计语言。 HTML中的元素分为块元素和行内元素，通过CSS样式可以改变HTML元素原本具有的显示属性，也就是说，通过CSS样式的设置可以将块元素与行内元素相互转换。 9.4.1　块元素 　　在HTML 代码中，常见的块元素包括Div、p、table 等，块元素具有以下特点。 　　（1）总是在新行上开始显示。 　　（2）行高以及顶和底边距都可以控制。 　　（3）如果不设置宽度，则会默认为整个容器的100%；而如果设置了其宽度值，就会应用所设置的宽度。 9.4.2　行内元素 　　当display 属性的值被设置为inline 时，可以把元素设置为行内元素，块元素具有以下特点。 　　（1）和其他元素显示在一行上。 　　（2）行高以及顶边距和底边距不可以改变。 　　（3）宽度就是它的文字或图片的宽度，不可以改变。 　　在常用的一些元素中，span、a、img、b、font、input 等默认都是行内元素。 Div 与其他HTML 标签一样，是一个HTML 所支持的标签。例如当使用一个表格时，应用table/table这样的结构一样，Div 在使用时也是同样以div/div 的形式出现。使用Div 进行网页排版布局是现在网页设计制作的趋势，通过CSS 样式可以轻松控制Div 的位置，从而实现许多不同的布局方式。 9.5.1　Div是什么 Div 是一个容器。在HTML 页面中的每个标签对象几乎都可以称得上是一个容器， div文档内容/div 9.5.2　如何在网页中插入