Dreamweaver_CS6完美网页制作基础、实例与技巧从入门到精通课件第11章 CSS Div灵活布局网页.ppt

教学内容：CSS＋Div是网站标准中常用的术语之一，CSS和Div的结构被越来越多的人采用，很多人都抛弃了表格而使用CSS来布局页面，它的好处很多，可以使结构简洁，定位更灵活，CSS布局的最终目的是搭建完善的页面架构。 教学重点 认识Div与Div布局的优势 掌握CSS定位的方法 掌握CSS布局的理念 常见的布局类型 在CSS布局的网页中，<Div>与<Span>都是常用的标记，利用这两个标记，加上CSS对其样式的控制，可以很方便地实现网页的布局。 过去最常用的网页布局工具是<table>标签，它本是用来创建电子数据表的，由于<table>标签本来不是要用于布局的，因此设计师们不得不经常以各种不寻常的方式来使用这个标签——如把一个表格放在另一个表格的单元里面。 Div标记早在HTML3.0时代就已经出现，但那时并不常用，直到CSS的出现，才逐渐发挥出它的优势。 11.1.2　Div与Span的区别 掌握基于CSS的网页布局方式，是实现Web标准的基础。在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。 11.1.3　Div与CSS布局优势 CSS对元素的定位包括相对定位和绝对定位，同时，还可以把相对定位和绝对定位结合起来，形成混合定位。 11.2 CSS定位 如果想熟练掌握Div和CSS的布局方法，首先要对盒模型有足够的了解。盒子模型是CSS布局网页时非常重要的概念，只有很好地掌握了盒子模型以及其中每个元素的使用方法，才能真正的布局网页中各个元素的位置。 1１.２.1　盒子模型的概念 float属性定义元素在哪个方向浮动。以往这个属性应用于图像，使文本围绕在图像周围，不过在CSS中，任何元素都可以浮动。 11.2.2　float定位 position的原意为位置、状态、安置。在CSS布局中，position属性非常重要，很多特殊容器的定位必须用position来完成。 11.2.3　position定位 无论使用表格还是CSS，网页布局都把大块的内容放进网页的不同区域里面。有了CSS，最常用来组织内容的元素就是<div>标签。 11.3 CSS布局理念 在利用CSS布局页面时，首先要有一个整体的规划，包括整个页面分成哪些模块，各个模块之间的父子关系等。 11.3.1　将页面用Div分块 当页面的内容已经确定后，则需要根据内容本身考虑整体的页面布局类型，如是单栏、双栏还是三栏等，这里采用的布局如图11.6所示。 11.3.2　设计各块的位置 整理好页面的框架后，就可以利用CSS对各个板块进行定位，实现对页面的整体规划，然后再往各个板块中添加内容。 11.3.3　用CSS定位 现在一些比较知名的网页设计全部采用的DIV+CSS来排版布局，DIV+CSS的好处可以使HTML代码更整齐，更容易使人理解，而且在浏览时的速度也比传统的布局方式快，最重要的是它的可控性要比表格强得多。 11.4 常见的布局类型 一列式布局是所有布局的基础，也是最简单的布局形式。一列固定宽度中，宽度的属性值是固定像素。 11.4.1列固定宽度 自适应布局是在网页设计中常见的一种布局形式，自适应的布局能够根据浏览器窗口的大小，自动改变其宽度或高度值，是一种非常灵活的布局形式，良好的自适应布局网站对不同分辨率的显示器都能提供最好的显示效果。 11.4.2列自适应 两列固定宽度非常简单，两列的布局需要用到两个div，分别为两个div的id设置为left与right，表示两个div的名称。 11.4.3两列固定宽度 下面使用两列宽度自适应性，以实现左右列宽度能够做到自动适应，设置自适应主要通过宽度的百分比值设置。 11.4.4两列宽度自适应 在实际应用中，有时候需要右列固定宽度，右列根据浏览器窗口大小自动适应，在CSS中只要设置在左列的宽度即可，如上例中左右列都采用了百分比实现了宽度自适应，这里只要将左列宽度设定为固定值，右列不设置任何宽度值，并且右列不浮动。 11.4.5两列右列宽度自适应 使用浮动定位方式，从一列到多列的固定宽度及自适应，基本上可以简单完成，包括三列的固定宽度。 11.4.6三列浮动中间宽度自适应 * *