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向XML的过度。 HTML:更多的被用于网页设计和表现 XHTML:它的初衷就不是为了表现，而是对网页内 容进行结构设计，严格的说它是面向文档 结构的语言，更符合未来的发展要求！ 2.1.2 选择合适的DTD 2.1.3 DreamweaverCS3中DTD 2.1.4 XHTML 语法规范 属性名称必须小写 属性值必须使用双引号 不允许使用标签简写 使用id替代name 必须使用结束标签 注意：选择合适的标签（区别与table布局的习惯..） 布局用： ； 文本用： h1～6 ， 图片用： 列表用： 数据用： 其他的：form，input，select 2.2.1 CSS语法基础 何为CSS（Cascading Style Sheet）？ CSS中文译为层叠样式表。是用于控制网页样式并允许 将样式信息与网页内容分离的一种标记性语言。 即:告诉浏览器，这段样式将应用到哪个对象.. 2.2.2 CSS选择器（符） 2.2.3 选择器的声明 style type “text/css” body,td,th,#header,.one color:blue;font-size:12px; 2.2.4 如何应用CSS到网页中 行内样式表 内部（内嵌）样式表 外部（链接）样式表 导入式样式表 2.2.5 实例代码:CSS按位置的分类 2.2.5 样式优先权问题 2.6 CSS开发环境与调试环境 3.1 被遗忘的主角 DIV 3.2 CSS盒子模型 3.3 文档流及浮动概念 3.4 浮动定位与绝对定位 4.0 一个简单的CSS布局实例 网页制作流程： 效果图—切图——布局（DIV+CSS、table— 嵌入动态程序或模板标签——测试——发布 学习要点及 CSS（Cascading Style Sheet），中文译为层叠样式表。是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 【本章学习目的】 本章通过多个CSS样式的应用实例，重点介绍了CSS样式表功能、定义CSS规则的方法，应用内嵌式样式表和链接外部样式表的方法等，通过本章的学习，读者应了解CSS样式表的用途，掌握创建和应用CSS样式表的方法，学会用CSS样式表进行网页的美化和网页布局。 5.1 利用CSS 样式表的网页实例 5.1 利用CSS 样式表的网页实例 【例5.5】利用CSS样式还可以代替表格进行网页布局，这是目前较为流行页面排版方式，如图所示。 该实例主要采用了div标签＋css样式，涉及到的知识点有以下几点： 分析构架：画出构架图； 模块拆分：分别定义Div的CSS样式； 在网页中插入Div标签，在Div中填充网页内容； 总体调整：色彩及内容调整，适当修改CSS样式。 5.2 使用CSS样式表 5.2.1 CSS样式表概述 1、样式表的使用 CSS样式表的使用常用的方法有以下两种： 页面内嵌法。将样式表代码直接写在HTML标签的head区。 外部链接法。将样式表写在一个独立的后缀名为CSS文件中，在需要应用CSS样式的网页中链接该文件，在页面 和 之间用以下代码调用。 link href css/master.css rel stylesheet type text/css / 5.2 使用CSS样式表 2、CSS样式表语法选择符 属性