第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 颁布的标准，用于对结构化文档建立对象模型，从而使得用户可以通过程序语言（包括脚本）来控制其内部结构。;传统表格布局方式实际上是利用了HTML 中的表格元素（table）具有的无边框特性，由于表格元素可以在显示时使单元格的边框和间距设置为0，所以可以将网页中??各个元素按版式划分放入表格的各单元格中，从而实现复杂的排版组合。 ;复杂的表格使得设计极为困难，修改更加繁琐，最后生成的网页代码除了表格本身的代码，还有许多没有意义的图像占位符及其他元素，文件量庞大，最终导致浏览器下载解析速度变慢。而使用CSS 布局则可以从根本上改变这种情况。CSS 布局的重点不再放在表格元素的设计中，取而代之的是HTML 中的另一个元素——Div，Div 可以理解为“图层”或是一个“块”，Div 是一种比表格简单的元素，语法上只有从Div 开始和/Div 结束， Div 的功能仅仅是将一段信息标记出来用于后期的样式定义。;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　如何在网页中插入Div 如果需要在网页中插入Div，可以像插入其他的HTML 元素一样，只需在代码中应用div/div 这样的标签形式，将内容放置其中，便可以应用Div 标签。 ;9.5.3　Div的嵌套 　　Div对象除了可以直接放入文本和其他标签，还可以多个Div标签进行嵌套使用，最终的目的是合理的标识出页面的区域。 　　单击“插入”面板上的Div按钮，弹出“插入Div”对话框。 ;9.6.2　margin（边界） margin（边界）用来设置页面中元素和元素之间的距离，即定义元素周围的空间范围，margin 属性包含4 个子属性，分别是margin-top、margin-right、margin-bottom 和margin-left，分别用于控制元素4 周的边距。 动手实践——定位网页元素位置 9.6.3　border（边框） 　　border（边框）是内边距和外边距的分界线，可以分离不同的HTML元素，border属性设置的是元素的最外围。在网页设计中，如果计算元素的宽和高，则需要把border计算在内。border属性有3个子属性，分别是边框样式（border-style）、边框宽度（border-width）和边框颜色（border-color）。 动手实践——为网页元素添加边框 ;9.6.4　padding（填充） 在CSS中，可以通过设置padding属性定义内容与边框之间的距离，即内边距。padding属性值可以是一个具体的长度，也可以是一个相对于上级元素的百分比，但不可以使用负值。paddin