DIV+CSS布局经典

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

2、e布局示意图布局示意图1.1.3 Table布局的缺点布局的缺点设计复杂，改版时工作量巨大表现代码与内容混合，可读性差 不利于数据调用分析网页文件量大，浏览器解析速度慢如蜗牛2.2.0 Web标准的构成（选）标准的构成（选）表现表现：用于对已经被结构化的信息进行显示上的修饰，包括版式颜色大小等. 主要技术就是CSS,目前版本2.0行为行为：是指对整个文档内部的一个模型进行定义及交互行为的编写 主要技术有：DOM(文档对象模型)、ECMAScript(JavaScript脚本语言)结构结构：用来对网页中的信息进行整理与分类， 常用的技术有：HTML、XHTML、XML1.2.1 Web标准布局标

3、准布局v基于Web标准的网站设计的核心目的： 如何使网页的表现与内容分离！v这样做的好处：高效率的开发与简单维护信息跨平台的可用性降低服务器成本；加快网页解析速度更良好的用户体验那么，那么，CSSCSS2.0从真正意义实现了设计代码与内容分离从真正意义实现了设计代码与内容分离1.2.2 DIV+CSS布局示意图布局示意图 真正的表现与内容完全分离，代码可读性强，样式可重复应用1.2.3 CSS布局代码示例布局代码示例测试页头部主体尾部Xhtml文档* font-family: Arial, Helvetica, sans-serif, 宋体;font-size: 12px;margin: 0p

4、x;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;Style1.

5、css最终布局效果2.1.1 向向Web标准过度标准过度 / XHTML 基础基础S 为什么要使用XHTML? XHTMLXHTML是在HTML4.0基础上，用XML规则扩展得到的，建立XHTML的目的就是为了实现HTML向XML的过度。 HTMLHTML:更多的被用于网页设计和表现 XHTMLXHTML:它的初衷就不是为了表现，而是对网页内 容进行结构设计，严格的说它是面向文档 结构的语言，更符合未来的发展要求！2.1.2 选择合适的选择合适的DTD 一个标准的XHTML文档，必须以Doctype标签作为开始，doctype用于定义文档类型。对于XHTML而言，可以选择三种不同的XHTML文

6、档类型，请看下面代码： 无标题文档 TransitionalTransitional类型类型：过度类型。浏览器对XHTML的解析将为宽松（建议使用）StrictStrict类型类型：严格类型。文档中不允许使用任何表现样式的标识和属性FramesetFrameset类型类型：框架页类型。网页使用框架结构时，声明此类型 2.1.3 DreamweaverCS3中中DTD（DTD文档类型）选择画面2.1.4 XHTML 语法规范语法规范v属性名称必须小写v属性值必须使用双引号v不允许使用标签简写v使用id替代namev必须使用结束标签必须使用结束标签M注意：选择合适的标签注意：选择合适的标签（区别与

7、table布局的习惯.） 布局用：； 文本用：， 图片用： 列表用： 数据用： 其他的：form，input，select各司其职各司其职2.2.1 CSS语法基础语法基础S 何为何为CSSCSS（Cascading Style SheetCascading Style Sheet）？）？ CSS中文译为表。是用于控制网页样式并允许 将样式信息与网页内容分离的一种标记性语言。 即即: :告诉浏览器，这段样式将应用到哪个对象告诉浏览器，这段样式将应用到哪个对象.CSSCSS语法结构语法结构: 选择符 属性1:值1； 属性2:值2 举例：body font-size:12px; text-alig

8、n:center;参数说明：属性和属性值之间用冒号(:)隔开，定义多个属性时，属性之间用分号(;)隔开2.2.2 CSS选择器（符）选择器（符）：指以网页中已有的标签名作为名称的选择器，几乎所有的html标签均可用作该类选择器（如：body p h1 等等.）：属用户自定义名称的选择器，可以在XHTML标签中用class=“”为相应标签指派样式。可理解为一类。 特点特点：在文档中允许被重复使用：属用户自定义名称选择器，基于DOM文档对象模型原理出现的选择器，可以在XHTML标签中用id=“”为相应标签指派样式，可理解为一个标识特点：特点：在网页中，每个id名称只能使用一次2.2.3 选择器的声

9、明选择器的声明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到网页中到网页中 行内样式表 内部（内嵌）样式表 外部（链接）样式表 导入式样式表CSS编码可以多种方式灵活地应用到我们所设计XHTML页面之中，选择方式可根据我们对设计的不同表现手段来制定，一般按CSS代码位置分为：2.2.5 实例代码实例代码:CSS按位置的分类按位置的分

10、类测试页 头部 主体 尾部 在之间加入 import url(css/style2.css); 称为：导入式样式表2.2.5 样式优先权问题样式优先权问题2.6 CSS开发环境与调试环境开发环境与调试环境3.1 被遗忘的主角被遗忘的主角 DIV3.2 CSS盒子模型盒子模型3.3 文档流及浮动概念文档流及浮动概念3.4 浮动定位与绝对定位浮动定位与绝对定位4.0 一个简单的一个简单的CSS布局实例布局实例网页制作流程： 效果图切图布局（DIV+CSS、table 嵌入动态程序或模板标签测试发布学习要点及学习要点及1.11.21.3传统布局于传统布局于CSSCSS布局的区别布局的区别1.21.3

11、 CSS CSS（Cascading Style SheetCascading Style Sheet），中文译为层），中文译为层叠样式表。是用于控制网页样式并允许将样式信息叠样式表。是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。与网页内容分离的一种标记性语言。 【本章学习目的】【本章学习目的】 本章通过多个本章通过多个CSSCSS样式的应用实例，重点介绍样式的应用实例，重点介绍了了CSSCSS样式表功能、定义样式表功能、定义CSSCSS规则的方法，应用内嵌规则的方法，应用内嵌式样式表和链接外部样式表的方法等，通过本章的式样式表和链接外部样式表的方法等，通过本章的学习，读者

12、应了解学习，读者应了解CSSCSS样式表的用途，掌握创建和样式表的用途，掌握创建和应用应用CSSCSS样式表的方法，学会用样式表的方法，学会用CSSCSS样式表进行网页样式表进行网页的美化和网页布局。的美化和网页布局。5.1 利用CSS 样式表的网页实例 CSS CSS样式表是由一系列样式选择器和样式表是由一系列样式选择器和CSSCSS属性组成，它属性组成，它支持字体属性、颜色和背景属性、文本属性、边框属性、支持字体属性、颜色和背景属性、文本属性、边框属性、列表属性以及精确定位网页元素属性等，增强了网页的列表属性以及精确定位网页元素属性等，增强了网页的格式化功能。格式化功能。 使用使用CSSC

13、SS样式表的另一个优点是可以利用同一个样式样式表的另一个优点是可以利用同一个样式表对整个站点的具有相同性质的网页元素进行格式修饰，表对整个站点的具有相同性质的网页元素进行格式修饰，当需要更改样式设置时，只要在这个样式表中修改，而当需要更改样式设置时，只要在这个样式表中修改，而不用对每个页面逐个进行修改，简化了格式化网页的工不用对每个页面逐个进行修改，简化了格式化网页的工作。作。5.1 利用CSS 样式表的网页实例 【例【例5.55.5】利用】利用CSSCSS样式还可以代替表格进行网页布局，样式还可以代替表格进行网页布局，这是目前较为流行页面排版方式，如图所示。这是目前较为流行页面排版方式，如图

14、所示。 该实例主要采用了该实例主要采用了divdiv标签标签csscss样式，涉及到的知识样式，涉及到的知识点有以下几点：点有以下几点：v 分析构架：画出构架图；分析构架：画出构架图；v 模块拆分：分别定义模块拆分：分别定义DivDiv的的CSSCSS样式；样式；v 在网页中插入在网页中插入DivDiv标签，在标签，在DivDiv中填充网页内容；中填充网页内容；v 总体调整：色彩及内容调整，适当修改总体调整：色彩及内容调整，适当修改CSSCSS样式。样式。5.2 5.2 使用CSS样式表v5.2.1 CSS5.2.1 CSS样式表概述样式表概述 1、样式表的使用样式表的使用 CSSCSS样式表

15、的使用常用的方法有以下两种：样式表的使用常用的方法有以下两种： 页面内嵌法。将样式表代码直接写在页面内嵌法。将样式表代码直接写在HTMLHTML标签的标签的headhead区。区。 外部链接法。将样式表写在一个独立的后缀名为外部链接法。将样式表写在一个独立的后缀名为CSSCSS文件中，在需要应用文件中，在需要应用CSSCSS样式的网页中链接该文件，样式的网页中链接该文件，在页面在页面和和之间用以下代码调用。之间用以下代码调用。link href=css/master.css rel=stylesheet type=text/css /5.2 5.2 使用CSS样式表2 2、CSSCSS样式表语

16、法样式表语法选择符选择符 属性属性1 1：值：值1 1；属性；属性2 2：值：值2 2 参数说明：参数说明： 属性和属性值之间用冒号属性和属性值之间用冒号(:)(:)隔开，定义多个属性时，隔开，定义多个属性时，属性之间用分号属性之间用分号(;)(;)隔开。隔开。1. 1. 创建创建CSSCSS样式样式选择选择“窗口窗口”菜单菜单“CSS“CSS样式样式”命令，打开命令，打开“CSS“CSS样式样式”面板，单击右下角的面板，单击右下角的“新建新建CSSCSS规则规则”按钮，或选择按钮，或选择“文本文本”菜单菜单“CSS“CSS样式样式”“新建新建”命令，弹出命令，弹出“新建新建CSSCSS规则规

17、则”对话框对话框. . 5.2.2 在Dreamweaver中定义CSS5.2.2 在Dreamweaver中定义CSS选择器类型有以下三种：选择器类型有以下三种：（1 1） 类类 自定义自定义 CSS CSS 规则，它的特点是灵活多变，可以规则，它的特点是灵活多变，可以重复将样式应用于网页元素。在应用时，它会在重复将样式应用于网页元素。在应用时，它会在HTMLHTML标签标签内加入一个类（内加入一个类（classclass）的定久来规定标签中的格式。比）的定久来规定标签中的格式。比如将类的样式如将类的样式mystylemystyle定义于某个标题，那么代码为：定义于某个标题，那么代码为： 标

18、题标题1 1应用自定义的样式应用自定义的样式（2 2） 标签标签 重新定义指定标签的外观，例如：创建或更改重新定义指定标签的外观，例如：创建或更改 h1 h1 标签的标签的 CSS CSS 样式时，所有用样式时，所有用 h1 h1 标签设置了格式的文标签设置了格式的文本都会立即更新，实现了批量快速更改格式的特点。本都会立即更新，实现了批量快速更改格式的特点。5.2.2 在Dreamweaver中定义CSS（3 3） 高级高级 在在CSS CSS 选择器中，它的功能最为强大，可以定义超链选择器中，它的功能最为强大，可以定义超链接的特效，定义特定元素组合的格式设置（例如：接的特效，定义特定元素组合

19、的格式设置（例如：body,table,tdbody,table,td，用逗号隔开），定义嵌套的样式（，用逗号隔开），定义嵌套的样式（td td imgimg空格隔开），定义包含特定空格隔开），定义包含特定 id id 属性的标签的格式属性的标签的格式设置。设置。定义的位置有以下三种情况：定义的位置有以下三种情况： 选择选择“仅为该文档仅为该文档”，此时，此时CSSCSS样式的代码会嵌套样式的代码会嵌套在网页在网页和和标签中。标签中。选择选择“新建样式表文件新建样式表文件”，则弹出，则弹出“保存样式表保存样式表文件为文件为”对话框，如图对话框，如图5.55.5所示，选择样式文件的所示，选择样式

20、文件的存储路径和文件名，单击存储路径和文件名，单击“保存保存”按钮，将按钮，将CSSCSS样样式代码单独存放在一个式代码单独存放在一个CSSCSS文件。文件。选择选择“已有的某已有的某CSSCSS文件文件”，将新建的，将新建的CSSCSS规则写规则写入已有的入已有的csscss文件中。文件中。比如：选择定义在比如：选择定义在“仅对该文档仅对该文档”，单击，单击“确定确定”按钮后，弹出按钮后，弹出“H1H1的的CSSCSS规则定义规则定义”对话框，如图对话框，如图所示，在对话框中进行各项的格式设置，然后单击所示，在对话框中进行各项的格式设置，然后单击“确定确定”按钮。按钮。2.2.编辑和删除编辑

21、和删除CSSCSS样式样式 创建创建CSSCSS样式后，如果要修改样式后，如果要修改CSSCSS样式，在样式，在“CSS“CSS样式样式”面板中，单击面板中，单击“CSS“CSS样式样式”面板右下角面板右下角的的“编辑编辑”按钮，进入按钮，进入“CSS“CSS规则定义规则定义”的对话框，的对话框，可进行修改。可进行修改。 某个某个CSSCSS样式不再需要时，在样式不再需要时，在“CSS“CSS样式样式”面板面板中，首先选中某个样式，单击中，首先选中某个样式，单击CSSCSS样式面板右下角样式面板右下角的的“删除删除”按钮。按钮。5.3 CSS 样式的应用 【例【例5.65.6】应用】应用CSS

22、CSS样式设计出图文混排效果，样式设计出图文混排效果，如图所示。如图所示。 此实例所涉及到的知识点是此实例所涉及到的知识点是CSSCSS样式的创建和样式的创建和应用，主要包括以下几个方面：应用，主要包括以下几个方面： 背景样式、文本及列表样式、方框与边框样式、背景样式、文本及列表样式、方框与边框样式、动态链接样式；动态链接样式； 建立单独的建立单独的CSSCSS文件，应用于多个网页。文件，应用于多个网页。5.3.1 样式表的应用实例1：背景样式 的应用 在【例在【例5.65.6】中，上方桔黄色的横条其实是重定义了】中，上方桔黄色的横条其实是重定义了bodybody标签的网页背景图像，背景图像横

23、向重复，网页元素标签的网页背景图像，背景图像横向重复，网页元素与页边距也进行了设置，其操作步骤如下：与页边距也进行了设置，其操作步骤如下： 步骤步骤 单击单击“窗口窗口”菜单菜单“CSSCSS样式样式”命令，打开命令，打开“CSSCSS样式样式”面板，单击右下角的面板，单击右下角的“新建新建CSSCSS规则规则”按钮，按钮，弹出弹出“CSSCSS规则定义规则定义”的对话框，选择的对话框，选择“选择器类型选择器类型”为为“标签标签”，在，在“标签标签”下拉列表中选择下拉列表中选择bodybody，定义在：选，定义在：选择择“仅为该文档仅为该文档”，单击，单击“确定确定”按钮，弹出按钮，弹出 “

24、“bodybody的的CSSCSS规则定义规则定义”的对话框，的对话框，单击单击“背景背景”选项卡，设置背景图像为：选项卡，设置背景图像为：images/bg.gifimages/bg.gif，单击单击“重复重复”下拉列表，选择下拉列表，选择“横向重复横向重复”命令。命令。 步骤步骤2 2 设置页边距单击设置页边距单击“方框方框”选项卡，在边界中分选项卡，在边界中分别设置上、下均为别设置上、下均为5050像素，左右均为像素，左右均为100100像素。像素。5.3.2 5.3.2 样式表的实例应用样式表的实例应用2 2：文本及列：文本及列表的应用表的应用 在【例在【例5.65.6】中，文本和列表

25、都应用了】中，文本和列表都应用了CSSCSS样式，分样式，分别设置字体、段落、列表的相关属性。第一行文本是标别设置字体、段落、列表的相关属性。第一行文本是标题题1 1（标签为（标签为H1H1），第二行文本是标题），第二行文本是标题2 2（标签为（标签为H2H2），），正文部分用了列表（标签为正文部分用了列表（标签为ULUL）。）。1 1、字体的样式设置、字体的样式设置 在在“CSSCSS规则定义规则定义”对话框的对话框的“类型类型”选项卡中设选项卡中设置。置。2 2、文本段落的样式设置、文本段落的样式设置 在在“CSSCSS规则定义规则定义”对话框的对话框的“区块区块”选项卡，设选项卡，设置。

26、置。3 3、列表的样式设置、列表的样式设置 类型：设置项目符号或编号的外观。类型：设置项目符号或编号的外观。 项目符号图像：指定图像替代项目符号的样式，项目符号图像：指定图像替代项目符号的样式，美化项目符号。美化项目符号。 重定义项目列表（标签为重定义项目列表（标签为UL)UL)。5.3.3 样式表的实例应3：方框和边框 样式的应用 在【例在【例5.65.6】中，插入一幅图像，通过】中，插入一幅图像，通过CSSCSS样式的应用，样式的应用，实现了图文混排的效果。该实例中主要设置了方框的浮动实现了图文混排的效果。该实例中主要设置了方框的浮动和边界及填充的距离，实现了图像与文本之间的环绕，还和边界

27、及填充的距离，实现了图像与文本之间的环绕，还设置了边框，添加了一个虚线边框修饰图像。这里首先定设置了边框，添加了一个虚线边框修饰图像。这里首先定义了一个类的义了一个类的CSSCSS规则，然后将此类应用于某个图像上。规则，然后将此类应用于某个图像上。v 图像边距的设置图像边距的设置v 图像的边框的设置图像的边框的设置5.3.4 样式表的实例应用4：动态链接样式 简单的简单的CSSCSS链接样式可以在页面属性中的链接样式可以在页面属性中的“链接链接”选项卡中设置，选项卡中设置，5.15.1节中已经讲过。节中已经讲过。 在【例在【例5.65.6】中，建立较为复杂的】中，建立较为复杂的CSSCSS链接

28、样链接样式，当鼠标经过链接文字时，文字颜色会变色、式，当鼠标经过链接文字时，文字颜色会变色、字体样式变粗、出现背景颜色、文字修饰有下划字体样式变粗、出现背景颜色、文字修饰有下划线等。这里还讲解两个重要的知识点：如何建立线等。这里还讲解两个重要的知识点：如何建立CSSCSS链接样式和如何调用外部链接样式和如何调用外部CSSCSS样式表。样式表。1.1.建立链接建立链接CSSCSS样式样式 单击单击“CSSCSS样式样式”面板中的面板中的“新建新建CSSCSS规则规则”按钮，按钮，选择器类型：高级，单击选择器类型：高级，单击“选择器选择器”下拉列表，分别选下拉列表，分别选择择a:llinka:ll

29、ink（链接后效果）、（链接后效果）、a:visiteda:visited（访问后效果）、（访问后效果）、a:hovera:hover（鼠标经过效果），分别定义其样式。（鼠标经过效果），分别定义其样式。2. 2. 调用调用CSSCSS样式文件样式文件 其它网页要应用刚才建立的其它网页要应用刚才建立的CSSCSS样式文件，样式文件，如何调用呢？单击如何调用呢？单击“CSS“CSS样式样式”面板中的面板中的“附加附加样式表样式表”按钮，弹出按钮，弹出“链接外部样式表链接外部样式表”的对话的对话框，在框，在“文件文件/URL”/URL”文本框中输入外部文本框中输入外部CSSCSS文件文件路径和文件名

30、，添加为选择路径和文件名，添加为选择“链接链接”选项，将新选项，将新建的样式文件链接到此文件，如图所示。建的样式文件链接到此文件，如图所示。 5.3.5 样式的实例5：滤镜效果的应用 CSS CSS滤镜并不是浏览器的插件，也不符合滤镜并不是浏览器的插件，也不符合CSSCSS标准，而标准，而是微软公司为增强浏览器功能而特意开发的并整合在是微软公司为增强浏览器功能而特意开发的并整合在IEIE浏浏览器中的一类功能集合。由于浏览器览器中的一类功能集合。由于浏览器IEIE有着广泛的使用范有着广泛的使用范围，因此围，因此CSSCSS滤镜也被广大设计者所喜爱。滤镜也被广大设计者所喜爱。 CSSCSS滤镜可以

31、为样式控制的对象指定特殊效果。滤镜可以为样式控制的对象指定特殊效果。 注意：注意：CSSCSS滤镜只能作用于有区域限制的对象，如表格、滤镜只能作用于有区域限制的对象，如表格、单元格、图片等，而不能直接作用于文字，所以把所需要单元格、图片等，而不能直接作用于文字，所以把所需要增加特效的文本事先放在单元格或层中，然后对单元格或增加特效的文本事先放在单元格或层中，然后对单元格或层应用层应用CSSCSS样式。样式。v AlphaAlpha透明效果透明效果v BlurBlur模糊效果模糊效果v ChromaChroma将指定的颜色设将指定的颜色设置成透明置成透明v DropshadowDropshadow投影效果投影效果v FlipHFlipH进行水平翻转进行水平翻转v FlipVFlipV进行垂直翻转进行垂直翻转v GlowGlow发光效果发光效果v GrayscaleGrayscale产生灰阶产生灰阶v