DIV+CSS布局经典.ppt

《DIV+CSS布局基础经典》 讲师:赵海海 课程大纲 1.1.1 传统Table布局 传统Table布局方式只是利用了HTML的table元素所具有的零边框特性 因此，Table布局的核心是： 设计一个能满足版式要求的表格结构，将内容装入每个单元格中，间距及空格使用透明gif图片实现，最终的结构是一个复杂的表格（有时候会出现多次嵌套），显然，这样不利于设计和修改。 1.1.2 传统Table布局示意图 1.1.3 Table布局的缺点 设计复杂，改版时工作量巨大 表现代码与内容混合，可读性差 不利于数据调用分析 网页文件量大，浏览器解析速度慢如蜗牛 2.2.0 Web标准的构成（选） 1.2.1 Web标准布局 基于Web标准的网站设计的核心目的： 如何使网页的表现与内容分离！ 这样做的好处： 高效率的开发与简单维护 信息跨平台的可用性 降低服务器成本；加快网页解析速度 更良好的用户体验 那么，CSS2.0从真正意义实现了设计代码与内容分离 1.2.2 DIV+CSS布局示意图 真正的表现与内容完全分离，代码可读性强，样式可重复应用 1.2.3 CSS布局代码示例 2.1.1 向Web标准过度 / XHTML 基础 为什么要使用XHTML? XHTML是在HTML4.0基础上，用XML规则扩展得到的，建立XHTML的目的就是为了实现HTML向XM