DIV+CSS网页布局经典教程
时间：2025-05-12
DIV+CSS网页布局学习必备
《DIV+CSS布局基础经 典》
讲师:赵海海
DIV+CSS网页布局学习必备
课程大纲
传统布局与CSS布局 XHTML与CSS基础 CSS网页布局与定位 实例：三栏居中式布局
1 2 3 4
DIV+CSS网页布局学习必备
1.1.1 传统Table布局
传统Table布局方式只是利用了HTML的table元素 所具有的零边框特性 因此，Table布局的核心是： 设计一个能满足版式要求的表格结构，将内容装 入每个单元格中，间距及空格使用透明gif图片实 现，最终的结构是一个复杂的表格（有时候会出 现多次嵌套），显然，这样不利于设计和修改。
DIV+CSS网页布局学习必备
1.1.2 传统Table布局示意图
DIV+CSS网页布局学习必备
1.1.3 Table布局的缺点
设计复杂，改版时工作量巨大 表现代码与内容混合，可读性差 不利于数据调用分析 网页文件量大，浏览器解析速度慢如蜗牛
DIV+CSS网页布局学习必备
2.2.0 Web标准的构成（选）
Web标准
结构
表现
行为
结构：用来对网页中的信息进行整理与分类， 常用的技术有：HTML、XHTML、XML
XHTML XML
CSS
DOM ECMAScript
表现：用于对已经被结构化的信息进行显示上的修饰，包括版式颜色大小等.. 主要技术就是CSS,目前版本2.0 行为：是指对整个文档内部的一个模型进行定义及交互行为的编写 主要技术有：DOM(文档对象模型)、ECMAScript(JavaScript脚本语言)
DIV+CSS网页布局学习必备
1.2.1 Web标准布局
基于Web标准的网站设计的核心目的： 如何使网页的表现与内容分离！ ① ② ③ ④ 这样做的好处： 高效率的开发与简单维护 信息跨平台的可用性 降低服务器成本；加快网页解析速度 更良好的用户体验
那么，CSS2.0从真正意义实现了设计代码与内容分离
DIV+CSS网页布局学习必备
1.2.2 DIV+CSS布局示意图
真正的表现与内容完全分离，代码可读性强，样式可重复应用
DIV+CSS网页布局学习必备
1.2.3 CSS布局代码示例
Xhtml文档 Style1.css
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.77cn.com.cn/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.77cn.com.cn/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>测试页</title> <link href="css/style1.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="header">头部</div> <div id=“content”>主体</div> <div id="footer">尾部</div> </div> </body> </html> *{ font-family: Arial, Helvetica, sans-serif, "宋体"; font-size: 12px; margin: 0px; text-align:center; } #container { width: 810px; margin:auto; background:#CCCCCC; } #header { height: 100px; width: 800px; padding:5px; background-color: #6699FF; } #content {
最 终 布 局 效 果
height: 400px; width: 800px; padding:5px; background-color#FF9900; } #footer { width: 800px; height: 50px; padding:5px; background-color: #6699FF; }
DIV+CSS网页布局学习必备
2.1.1 向Web标准过度 / XHTML 基础
为什么要使用XHTML? XHTML是在HTML4.0基础上，用XML规则扩展得 到的，建立XHTML的目的就是为了实现HTML向XML 的过度。
HTML:更
DIV+CSS网页布局学习必备
DIV+CSS网页布局学习必备
DIV+CSS网页布局学习必备
DIV+CSS网页布局学习必备
DIV+CSS网页布局学习必备
DIV+CSS网页布局学习必备
DIV+CSS网页布局经典教程.doc
将本文的Word文档下载到电脑
上一篇：教研室主任述职报告
下一篇：义乌小商品批发市场简介
