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

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