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

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