静态网页设计与制作 课件 第8章 Div+CSS布局.ppt

项目八 Div+CSS布局 任务1 Div+CSS概述 任务2 CSS盒模型 任务3 CSS层叠顺序 任务4 CSS布局块 任务5 常用CSS布局版式 任务1 Div+CSS概述 任务引入 小明已经掌握了用表格布局网页的方法，但是表格布局有一个缺点，就是页面打开速度会比较慢，经过深入学习，小明了解到可以利用div+css布局，不仅可以简化代码，还可以加快显示速度，那么什么是div+css布局呢？ 知识准备 在使用Dreamweaver学习网页制作时，初学者总是习惯先考虑网页外观的呈现样式，比如图片、字体、颜色等所有表现在页面上的内容，然后用Photoshop或者Fireworks绘制出来并切割成小图。最后通过编辑HTML或使用Dreamweaver的可视化编辑方法，将所有设计放置在表格或框架中组织成网页。 随着移动和网络技术的发展，网页不仅呈现在电脑屏幕上供浏览，越来越多的用户会选择在PDA、移动电话或屏幕阅读机上查看网页，使用上述方法精心设计的页面在这些媒体上可能就不能显示了。 本节将从传统的表格布局（table）跨入到div+css布局。 div+css，简单地说，就是使用块级元素（或称为层）放置页面内容，然后使用CSS规则指定层的位置、大小和呈现方式。 使用Div+CSS制作网页，最重要的是摈弃传统的表格布局观念，在考虑页面的整体表现效果之前，应当先考虑内容的语