DIV+CSS网页布局经典教程

《DIV+CSS布局基础经典》讲师:赵海海课程大纲123传统布局与CSS布局XHTML与CSS基础4CSS网页布局与定位实例：三栏居中式布局1.1.1传统Table布局传统Table布局方式只是利用了HTML的table元素所具有的零边框特性因此，Table布局的核心是：设计一个能满足版式要求的表格结构，将内容装入每个单元格中，间距及空格使用透明gif图片实现，最终的结构是一个复杂的表格（有时候会出现多次嵌套），显然，这样不利于设计和修改。1.1.2传统Table布局示意图1.1.3Table布局的缺点设计复杂，改版时工作量巨大表现代码与内容混合，可读性差不利于数据调用分析网页文件量大，浏览器解析速度慢如蜗牛2.2.0Web标准的构成（选）表现：用于对已经被结构化的信息进行显示上的修饰，包括版式颜色大小等..主要技术就是CSS,目前版本2.0行为：是指对整个文档内部的一个模型进行定义及交互行为的编写主要技术有：DOM(文档对象模型)、ECMAScript(JavaScript脚本语言)结构：用来对网页中的信息进行整理与分类，常用的技术有：HTML、XHTML、XMLWeb标准CSS结构表现行为XHTMLXMLDOMECMAScript1.2.1Web标准布局基于Web标准的网站设计的核心目的：如何使网页的表现与内容分离！这样做的好处：①高效率的开发与简单维护②信息跨平台的可用性③降低服务器成本；加快网页解析速度④更良好的用户体验那么，CSS2.0从真正意义实现了设计代码与内容分离1.2.2DIV+CSS布局示意图真正的表现与内容完全分离，代码可读性强，样式可重复应用1.2.3CSS布局代码示例!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN==Content-Typecontent=text/html;charset=gb2312/title测试页/titlelinkhref=css/style1.cssrel=stylesheettype=text/css//headbodydivid=containerdivid=header头部/divdivid=“content”主体/divdivid=footer尾部/div/div/body/htmlXhtml文档*{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;}Style1.css最终布局效果2.1.1向Web标准过度/XHTML基础为什么要使用XHTML?XHTML是在HTML4.0基础上，用XML规则扩展得到的，建立XHTML的目的就是为了实现HTML向XML的过度。HTML:更多的被用于网页设计和表现XHTML:它的初衷就不是为了表现，而是对网页内容进行结构设计，严格的说它是面向文档结构的语言，更符合未来的发展要求！2.1.2选择合适的DTD一个标准的XHTML文档，必须以Doctype标签作为开始，doctype用于定义文档类型。对于XHTML而言，可以选择三种不同的XHTML文档类型，请看下面代码：!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN““”!--说明：该段为指定文档类型为Transitionalhtmlxmlns=“”!--说明：该句为确定名字空间,xml中用到headmetahttp-equiv=“Content-Type”content=“text/html;charset=gb2312”/!--说明：该句是声明编码语言为:简体中文title无标题文档/titlelinkhref=“css/style1.css”rel=“stylesheet”type=“text/css”/!--说明：该link标记将链接一个外部CSS文件/headbody…/body/htmlTransitional类型：过度类型。浏览器对XHTML的解析将为宽松（建议使用）Strict类型：严格类型。文档中不允许使用任何表现样式的标识和属性Frameset类型：框架页类型。网页使用框架结构时，声明此类型2.1.3DreamweaverCS3中DTD（DTD文档类型）选择画面2.1.4XHTML语法规范一．属性名称必须小写二．属性值必须使用双引号三．不允许使用标签简写四．使用id替代name五．必须使用结束标签注意：选择合适的标签（区别与table布局的习惯..）布局用：div/div；文本用：h1～6/h1，p/p图片用：img/img列表用：ulollidldtdd数据用：table/table其他的：form，input，select各司其职2.2.1CSS语法基础何为CSS（CascadingStyleSheet）？CSS中文译为层叠样式表。是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。即:告诉浏览器，这段样式将应用到哪个对象..CSS语法结构:选择符{属性1:值1；属性2:值2……}举例：body{font-size:12px;text-align:center;}参数说明：属性和属性值之间用冒号(:)隔开，定义多个属性时，属性之间用分号(;)隔开CSS选择器2.2.2CSS选择器（符）标签选择器：指以网页中已有的标签名作为名称的选择器，几乎所有的html标签均可用作该类选择器（如：body{}p{}h1{}等等...）类别选择器：属用户自定义名称的选择器，可以在XHTML标签中用class=“”为相应标签指派样式。可理解为一类。特点：在文档中允许被重复使用Id选择器：属用户自定义名称选择器，基于DOM文档对象模型原理出现的选择器，可以在XHTML标签中用id=“”为相应标签指派样式，可理解为一个标识特点：在网页中，每个id名称只能使用一次2.2.3选择器的声明styletype=“text/css”body,td,th,#header,.one{color:blue;font-size:12px;}/style集体声明:并列关系styletype=“text/css”Ph1{color:blue;font-size:14px;}/style嵌套声明:从属关系styletype=“text/css”PH1,#headerul{color:blue;font-size:12px;}/style混合声明:并列及从属关系2.2.4如何应用CSS到网页中行内样式表内部（内嵌）样式表外部（链接）样式表导入式样式表CSS编码可以多种方式灵活地应用到我们所设计XHTML页面之中，选择方式可根据我们对设计的不同表现手段来制定，一般按CSS代码位置分为：2.2.5实例代码:CSS按位置的分类!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN==Content-Typecontent=text/html;charset=gb2312/title测试页/titlelinkhref=“css/style1.css”rel=“stylesheet”type=“text/css”/!--此为链接（外部）样式表styletype=text/css!--body,td,th{font-size:12px;}p{font-size:24px;color:#FFFF00;}--/style/headbodydivid=containerdivid=headerp头部/p/divdivid=contentpstyle=“color:#FF0000;font-size:36px”主体/p!--此为行内样式表/divdivid=footerp尾部/p/div/div/body/html在style/style之间加入@importurl(css/style2.css);称为：导入式样式表--此为内嵌（内部）样式表2.2.5样式优先权问题2.6CSS开发环境与调试环境3.1被遗忘的主角DIV3.2CSS盒子模型3.3文档流及浮动概念3.4浮动定位与绝对定位4.0一个简单的CSS布局实例网页制作流程：效果图—切图——布局（DIV+CSS、table—嵌入动态程序或模板标签——测试——发布学习要点及1.11.21.3传统布局于CSS布局的区别1.21.3CSS（CascadingStyleSheet），中文译为层叠样式表。是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。【本章学习目的】本章通过多个CSS样式的应用实例，重点介绍了CSS样式表功能、定义CSS规则的方法，应用内嵌式样式表和链接外部样式表的方法等，通过本章的学习，读者应了解CSS样式表的用途，掌握创建和应用CSS样式表的方法，学会用CSS样式表进行网页的美化和网页布局。5.1利用CSS样式表的网页实例CSS样式表是由一系列样式选择器和CSS属性组成，它支持字体属性、颜色和背景属性、文本属性、边框属性、列表属性以及精确定位网页元素属性等，增强了网页的格式化功能。使用CSS样式表的另一个优点是可以利用同一个样式表对整个站点的具有相同性质的网页元素进行格式修饰，当需要更改样式设置时，只要在这个样式表中修改，而不用对每个页面逐个进行修改，简化了格式化网页的工作。5.1利用CSS样式表的网页实例【例5.5】利用CSS样式还可以代替表格进行网页布局，这是目前较为流行页面排版方式，如图所示。该实例主要采用了div标签＋css样式，涉及到的知识点有以下几点：分析构架：画出构架图；模块拆分：分别定义Div的CSS样式；在网页中插入Div标签，在Div中填充网页内容；总体调整：色彩及内容调整，适当修改CSS样式。5.2使用CSS样式表5.2.1CSS样式表概述1、样式表的使用CSS样式表的使用常用的方法有以下两种：页面内嵌法。将样式表代码直接写在HTML标签的head区。外部链接法。将样式表写在一个独立的后缀名为CSS文件中，在需要应用CSS样式的网页中链接该文件，在页面head和/head之间用以