DIV+CSS网页布局.ppt
《DIV+CSS网页布局.ppt》由会员分享,可在线阅读,更多相关《DIV+CSS网页布局.ppt(52页珍藏版)》请在三一办公上搜索。
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标准的网站设计的核心目的:如何使网页的表现与内容分离!这样做的好处:高效率的开发与简单维护信息跨平台的可用性降低服务器成本;加快网页解析速度更良好的用户体验那么,CSS2
3、.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:100px;width:800px;padding:5px;background-co
4、lor:#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:它的初衷就不是为了表现
5、,而是对网页内 容进行结构设计,严格的说它是面向文档 结构的语言,更符合未来的发展要求!,2.1.2 选择合适的DTD,一个标准的XHTML文档,必须以Doctype标签作为开始,doctype用于定义文档类型。对于XHTML而言,可以选择三种不同的XHTML文档类型,请看下面代码:,无标题文档,Transitional类型:过度类型。浏览器对XHTML的解析将为宽松(建议使用)Strict类型:严格类型。文档中不允许使用任何表现样式的标识和属性Frameset类型:框架页类型。网页使用框架结构时,声明此类型,2.1.3 DreamweaverCS3中DTD,(DTD文档类型)选择画面,2.1
6、.4 XHTML 语法规范,属性名称必须小写属性值必须使用双引号不允许使用标签简写使用id替代name必须使用结束标签注意:选择合适的标签(区别与table布局的习惯.)布局用:;文本用:,图片用:列表用:数据用:其他的:form,input,select,各司其职,2.2.1 CSS语法基础,何为CSS(Cascading Style Sheet)?CSS中文译为层叠样式表。是用于控制网页样式并允许 将样式信息与网页内容分离的一种标记性语言。即:告诉浏览器,这段样式将应用到哪个对象.,CSS语法结构:选择符 属性1:值1;属性2:值2 举例:body font-size:12px;text-
7、align:center;参数说明:属性和属性值之间用冒号(:)隔开,定义多个属性时,属性之间用分号(;)隔开,CSS选择器,2.2.2 CSS选择器(符),标签选择器:指以网页中已有的标签名作为名称的选择器,几乎所有的html标签均可用作该类选择器(如:body p h1 等等.),类别选择器:属用户自定义名称的选择器,可以在XHTML标签中用class=“”为相应标签指派样式。可理解为一类。特点:在文档中允许被重复使用,Id 选择器:属用户自定义名称选择器,基于DOM文档对象模型原理出现的选择器,可以在XHTML标签中用id=“”为相应标签指派样式,可理解为一个标识特点:在网页中,每个id
8、名称只能使用一次,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到网页中,行内样式表内部(内嵌)样式表外部(链接)样式表导入式样式表,CSS编码可以多种方式灵活地应用到我们所设计XHTML页面之中,选择方式可根据我们对设计的不同表现手段来制定,一般按CSS代码位置分为:,2.2.5
9、 实例代码: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+CSS、table 嵌入动态程序或模板标签测试发布,学习要点及,传统布局于CSS布局的区别,CSS(Cascading Style Sheet),中文译为层叠样式表。是用于控制网页样式并允许将样式信息与网页内容分离
10、的一种标记性语言。【本章学习目的】本章通过多个CSS样式的应用实例,重点介绍了CSS样式表功能、定义CSS规则的方法,应用内嵌式样式表和链接外部样式表的方法等,通过本章的学习,读者应了解CSS样式表的用途,掌握创建和应用CSS样式表的方法,学会用CSS样式表进行网页的美化和网页布局。,5.1 利用CSS 样式表的网页实例,CSS样式表是由一系列样式选择器和CSS属性组成,它支持字体属性、颜色和背景属性、文本属性、边框属性、列表属性以及精确定位网页元素属性等,增强了网页的格式化功能。使用CSS样式表的另一个优点是可以利用同一个样式表对整个站点的具有相同性质的网页元素进行格式修饰,当需要更改样式设
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- DIV CSS 网页 布局

链接地址:https://www.31ppt.com/p-2214384.html