DIVCSS布局经典.ppt

1、DIV+CSS布局基础经典,讲师:赵海海,课程大纲,传统布局与CSS布局,XHTML与CSS基础,CSS网页布局与定位,实例：三栏居中式布局,1.1.1 传统Table布局,传统Table布局方式只是利用了HTML的table元素所具有的零边框特性 因此，Table布局的核心是： 设计一个能满足版式要求的表格结构，将内容装入每个单元格中，间距及空格使用透明gif图片实现，最终的结构是一个复杂的表格（有时候会出现多次嵌套），显然，这样不利于设计和修改。,1.1.2 传统Table布局示意图,1.1.3 Table布局的缺点,设计复杂，改版时工作量巨大 表现代码与内容混合，可读性差 不利于数据调用

2、分析 网页文件量大，浏览器解析速度慢如蜗牛,2.2.0 Web标准的构成（选）,表现：用于对已经被结构化的信息进行显示上的修饰，包括版式颜色大小等. 主要技术就是CSS,目前版本2.0,行为：是指对整个文档内部的一个模型进行定义及交互行为的编写 主要技术有：DOM(文档对象模型)、ECMAScript(JavaScript脚本语言),结构：用来对网页中的信息进行整理与分类， 常用的技术有：HTML、XHTML、XML,1.2.1 Web标准布局,基于Web标准的网站设计的核心目的： 如何使网页的表现与内容分离！ 这样做的好处： 高效率的开发与简单维护 信息跨平台的可用性 降低服务器成本；加快网

3、页解析速度 更良好的用户体验 那么，CSS2.0从真正意义实现了设计代码与内容分离,1.2.2 DIV+CSS布局示意图,真正的表现与内容完全分离，代码可读性强，样式可重复应用,1.2.3 CSS布局代码示例, 测试页 头部 主体 尾部 ,Xhtml文档,* font-family: Arial, Helvetica, sans-serif, 宋体; font-size: 12px; margin: 0px; text-align:center; #container width: 810px; margin:auto; background:#CCCCCC; #header height:

4、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; ,Style1.css,最终布局效果,2.1.1 向Web标准过度 / XHTML 基础,为什么要使用XHTML? XHTML是在HTML4.0基础上，用XML规则扩展得到的

5、，建立XHTML的目的就是为了实现HTML向XML的过度。 HTML:更多的被用于网页设计和表现 XHTML:它的初衷就不是为了表现，而是对网页内 容进行结构设计，严格的说它是面向文档 结构的语言，更符合未来的发展要求！,2.1.2 选择合适的DTD,一个标准的XHTML文档，必须以Doctype标签作为开始，doctype用于定义文档类型。 对于XHTML而言，可以选择三种不同的XHTML文档类型，请看下面代码：, 无标题文档 ,Transitional类型：过度类型。浏览器对XHTML的解析将为宽松（建议使用） Strict类型：严格类型。文档中不允许使用任何表现样式的标识和属性 Fram

6、eset类型：框架页类型。网页使用框架结构时，声明此类型,2.1.3 DreamweaverCS3中DTD,（DTD文档类型）选择画面,2.1.4 XHTML 语法规范,属性名称必须小写 属性值必须使用双引号 不允许使用标签简写 使用id替代name 必须使用结束标签 注意：选择合适的标签（区别与table布局的习惯.） 布局用：； 文本用：， 图片用： 列表用： 数据用： 其他的：form，input，select,各司其职,2.2.1 CSS语法基础,何为CSS（Cascading Style Sheet）？ CSS中文译为层叠样式表。是用于控制网页样式并允许 将样式信息与网页内容分离的一

7、种标记性语言。 即:告诉浏览器，这段样式将应用到哪个对象.,CSS语法结构: 选择符 属性1:值1； 属性2:值2 举例：body font-size:12px; text-align:center; 参数说明： 属性和属性值之间用冒号(:)隔开，定义多个属性时， 属性之间用分号(;)隔开,CSS选择器,2.2.2 CSS选择器（符）,标签选择器： 指以网页中已有的标签名作为名称的选择器，几乎所有的html标签均可用作该类选择器（如：body p h1 等等.）,类别选择器： 属用户自定义名称的选择器，可以在XHTML标签中用class=“”为相应标签指派样式。可理解为一类。 特点：在文档中允

8、许被重复使用,Id 选择器： 属用户自定义名称选择器，基于DOM文档对象模型原理出现的选择器，可以在XHTML标签中用id=“”为相应标签指派样式，可理解为一个标识 特点：在网页中，每个id名称只能使用一次,2.2.3 选择器的声明, body,td,th,#header,.onecolor:blue;font-size:12px; ,集体声明:并列关系, P h1color:blue;font-size:14px; ,嵌套声明:从属关系, P H1,#header ulcolor:blue;font-size:12px; ,混合声明:并列及从属关系,2.2.4 如何应用CSS到网页中,行内样

9、式表 内部（内嵌）样式表 外部（链接）样式表 导入式样式表,CSS编码可以多种方式灵活地应用到我们所设计XHTML页面之中，选择方式可根据我们对设计的不同表现手段来制定，一般按CSS代码位置分为：,2.2.5 实例代码:CSS按位置的分类, 测试页 头部 主体 尾部 ,在之间加入 import url(css/style2.css); 称为：导入式样式表,2.2.5 样式优先权问题,2.6 CSS开发环境与调试环境,3.1 被遗忘的主角 DIV,3.2 CSS盒子模型,3.3 文档流及浮动概念,3.4 浮动定位与绝对定位,4.0 一个简单的CSS布局实例,网页制作流程： 效果图切图布局（DIV

10、+CSS、table 嵌入动态程序或模板标签测试发布,学习要点及,传统布局于CSS布局的区别,CSS（Cascading Style Sheet），中文译为层叠样式表。是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 【本章学习目的】 本章通过多个CSS样式的应用实例，重点介绍了CSS样式表功能、定义CSS规则的方法，应用内嵌式样式表和链接外部样式表的方法等，通过本章的学习，读者应了解CSS样式表的用途，掌握创建和应用CSS样式表的方法，学会用CSS样式表进行网页的美化和网页布局。,5.1 利用CSS 样式表的网页实例,CSS样式表是由一系列样式选择器和CSS属性组成，它支持

11、字体属性、颜色和背景属性、文本属性、边框属性、列表属性以及精确定位网页元素属性等，增强了网页的格式化功能。 使用CSS样式表的另一个优点是可以利用同一个样式表对整个站点的具有相同性质的网页元素进行格式修饰，当需要更改样式设置时，只要在这个样式表中修改，而不用对每个页面逐个进行修改，简化了格式化网页的工作。,5.1 利用CSS 样式表的网页实例,【例5.5】利用CSS样式还可以代替表格进行网页布局，这是目前较为流行页面排版方式，如图所示。 该实例主要采用了div标签css样式，涉及到的知识点有以下几点： 分析构架：画出构架图； 模块拆分：分别定义Div的CSS样式； 在网页中插入Div标签，在D

12、iv中填充网页内容； 总体调整：色彩及内容调整，适当修改CSS样式。,5.2 使用CSS样式表,5.2.1 CSS样式表概述 1、样式表的使用 CSS样式表的使用常用的方法有以下两种： 页面内嵌法。将样式表代码直接写在HTML标签的head区。 外部链接法。将样式表写在一个独立的后缀名为CSS文件中，在需要应用CSS样式的网页中链接该文件，在页面和之间用以下代码调用。,5.2 使用CSS样式表,2、CSS样式表语法选择符 属性1：值1；属性2：值2 参数说明： 属性和属性值之间用冒号(:)隔开，定义多个属性时，属性之间用分号(;)隔开。,1. 创建CSS样式 选择“窗口”菜单“CSS样式”命令

13、，打开“CSS样式”面板，单击右下角的“新建CSS规则”按钮，或选择“文本”菜单“CSS样式”“新建”命令，弹出“新建CSS规则”对话框.,5.2.2 在Dreamweaver中定义CSS,5.2.2 在Dreamweaver中定义CSS,选择器类型有以下三种： （1） 类 自定义 CSS 规则，它的特点是灵活多变，可以重复将样式应用于网页元素。在应用时，它会在HTML标签内加入一个类（class）的定久来规定标签中的格式。比如将类的样式mystyle定义于某个标题，那么代码为： 标题1应用自定义的样式 （2） 标签 重新定义指定标签的外观，例如：创建或更改 h1 标签的 CSS 样式时，所有

14、用 h1 标签设置了格式的文本都会立即更新，实现了批量快速更改格式的特点。,5.2.2 在Dreamweaver中定义CSS,（3） 高级 在CSS 选择器中，它的功能最为强大，可以定义超链接的特效，定义特定元素组合的格式设置（例如：body,table,td，用逗号隔开），定义嵌套的样式（td img空格隔开），定义包含特定 id 属性的标签的格式设置。,定义的位置有以下三种情况： 选择“仅为该文档”，此时CSS样式的代码会嵌套在网页和标签中。 选择“新建样式表文件”，则弹出“保存样式表文件为”对话框，如图5.5所示，选择样式文件的存储路径和文件名，单击“保存”按钮，将CSS样式代码单独存放

15、在一个CSS文件。 选择“已有的某CSS文件”，将新建的CSS规则写入已有的css文件中。 比如：选择定义在“仅对该文档”，单击“确定”按钮后，弹出“H1的CSS规则定义”对话框，如图所示，在对话框中进行各项的格式设置，然后单击“确定”按钮。,2.编辑和删除CSS样式 创建CSS样式后，如果要修改CSS样式，在“CSS样式”面板中，单击“CSS样式”面板右下角的“编辑”按钮，进入“CSS规则定义”的对话框，可进行修改。 某个CSS样式不再需要时，在“CSS样式”面板中，首先选中某个样式，单击CSS样式面板右下角的“删除”按钮。,5.3 CSS 样式的应用,【例5.6】应用CSS样式设计出图文混

16、排效果，如图所示。 此实例所涉及到的知识点是CSS样式的创建和应用，主要包括以下几个方面： 背景样式、文本及列表样式、方框与边框样式、动态链接样式； 建立单独的CSS文件，应用于多个网页。,5.3.1 样式表的应用实例1：背景样式 的应用,在【例5.6】中，上方桔黄色的横条其实是重定义了body标签的网页背景图像，背景图像横向重复，网页元素与页边距也进行了设置，其操作步骤如下： 步骤 单击“窗口”菜单“CSS样式”命令，打开“CSS样式”面板，单击右下角的“新建CSS规则”按钮，弹出“CSS规则定义”的对话框，选择“选择器类型”为“标签”，在“标签”下拉列表中选择body，定义在：选择“仅为该

17、文档”，单击“确定”按钮，弹出 “body的CSS规则定义”的对话框， 单击“背景”选项卡，设置背景图像为：images/bg.gif，单击“重复”下拉列表，选择“横向重复”命令。 步骤2 设置页边距单击“方框”选项卡，在边界中分别设置上、下均为50像素，左右均为100像素。,5.3.2 样式表的实例应用2：文本及列表的应用,在【例5.6】中，文本和列表都应用了CSS样式，分别设置字体、段落、列表的相关属性。第一行文本是标题1（标签为H1），第二行文本是标题2（标签为H2），正文部分用了列表（标签为UL）。 1、字体的样式设置 在“CSS规则定义”对话框的“类型”选项卡中设置。 2、文本段落的

18、样式设置 在“CSS规则定义”对话框的“区块”选项卡，设置。 3、列表的样式设置 类型：设置项目符号或编号的外观。 项目符号图像：指定图像替代项目符号的样式，美化项目符号。 重定义项目列表（标签为UL)。,5.3.3 样式表的实例应3：方框和边框 样式的应用,在【例5.6】中，插入一幅图像，通过CSS样式的应用，实现了图文混排的效果。该实例中主要设置了方框的浮动和边界及填充的距离，实现了图像与文本之间的环绕，还设置了边框，添加了一个虚线边框修饰图像。这里首先定义了一个类的CSS规则，然后将此类应用于某个图像上。 图像边距的设置 图像的边框的设置,5.3.4 样式表的实例应用4：动态链接样式,简

19、单的CSS链接样式可以在页面属性中的“链接”选项卡中设置，5.1节中已经讲过。 在【例5.6】中，建立较为复杂的CSS链接样式，当鼠标经过链接文字时，文字颜色会变色、字体样式变粗、出现背景颜色、文字修饰有下划线等。这里还讲解两个重要的知识点：如何建立CSS链接样式和如何调用外部CSS样式表。,1.建立链接CSS样式 单击“CSS样式”面板中的“新建CSS规则”按钮，选择器类型：高级，单击“选择器”下拉列表，分别选择a:llink（链接后效果）、a:visited（访问后效果）、a:hover（鼠标经过效果），分别定义其样式。,2. 调用CSS样式文件 其它网页要应用刚才建立的CSS样式文件，如

20、何调用呢？单击“CSS样式”面板中的“附加样式表”按钮，弹出“链接外部样式表”的对话框，在“文件/URL”文本框中输入外部CSS文件路径和文件名，添加为选择“链接”选项，将新建的样式文件链接到此文件，如图所示。,5.3.5 样式的实例5：滤镜效果的应用,CSS滤镜并不是浏览器的插件，也不符合CSS标准，而是微软公司为增强浏览器功能而特意开发的并整合在IE浏览器中的一类功能集合。由于浏览器IE有着广泛的使用范围，因此CSS滤镜也被广大设计者所喜爱。 CSS滤镜可以为样式控制的对象指定特殊效果。 注意：CSS滤镜只能作用于有区域限制的对象，如表格、单元格、图片等，而不能直接作用于文字，所以把所需要增加特效