3.web标准网页布局技术.ppt

第3章,DIV+CSS网页布局,2,业界越来越关注DIV+CSS的标准化设计，大到各大门户网站，小到不计其数的个人网站，在Div+CSS标准化的影响下，网页设计人员已经把这一要求作为行业标准。那么什么是Div+CSS标准？Div+CSS的标准化设计到底有什么好处？,3,什么是web标准,WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3CDOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（EuropeanComputerManufacturersAssociation）的ECMAScript标准。我们来简单了解一下这些标准：,4,1结构标准语言,（1）XMLXML是TheExtensibleMarkupLanguage(可扩展标识语言)的简写。和HTML一样，XML同样来源于SGML，但XML是一种能定义其他语言的语。XML最初设计的目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。关于XML的好处和技术规范细节这里就不多说了，网上有很多资料，也有很多书籍可以参考。（2）XHTMLXHTML是TheExtensibleHyperTextMarkupLanguage可扩展标识语言的缩写。XML虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的站点，直接采用XML还为时过早。因此，我们在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。简单的说，建立XHTML的目的就是实现HTML向XML的过渡。,5,2.表现标准语言,CSS是CascadingStyleSheets层叠样式表的缩写。目前推荐遵循的是W3C于1998年5月12日推荐CSS2（参考/TR/CSS2/）。W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。,6,3.行为标准,（1）DOMDOM是DocumentObjectModel文档对象模型的缩写。根据W3CDOM规范（/DOM/），DOM是一种与浏览器，平台，语言的接口，使得你可以访问页面其他的标准组件。简单理解，DOM解决了Netscaped的Javascript和Microsoft的Jscript之间的冲突，给予web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对像。(2)ECMAScriptECMAScript是ECMA(EuropeanComputerManufacturersAssociation)制定的标准脚本语言（JAVAScript）。目前推荐遵循的是ECMAScript262（http:/www.ecma.ch/ecma1/STAND/ECMA-262.HTM）。,7,为什么要建立网站标准,网站标准的目的就是：提供最多利益给最多的网站用户确保任何网站文挡都能够长期有效简化代码、降低建设成本让网站更容易使用，能适应更多不同用户和更多网路设备当浏览器版本更新，或者出现新的网络交互设备时，确保所有应用能够继续正确执行。对于网站设计和开发人员来说，遵循网站标准就是使用标准；对于你的网站用户来说，网站标准就是最佳体验。,8,采用网站标准的好处,对网站浏览者的好处：文件下载与页面显示速度更快；内容能被更多的用户所访问（包括失明、视弱、色盲等残障人士）；内容能被更广泛的设备所访问（包括屏幕阅读机、手持设备、搜索机器人、打印机、电冰箱等等）用户能够通过样式选择定制自己的表现界面所有页面都能提供适于打印的版本,9,采用网站标准的好处,对网站所有者的好处：更少的代码和组件，容易维护带宽要求降低（代码更简洁），成本降低。更容易被搜寻引擎搜索到改版方便，不需要变动页面内容提供打印版本而不需要复制内容提高网站易用性。,10,国内介绍web标准站点,onestab:推动符合Web标准的网站设计;展示最新设计技术，包括CSS,XHTML,HTML,XML;介绍国外优秀网页制作和设计站点精品文章和大师访谈。网页设计师:web标准的教程站点，推动web标准在中国的应用。52CSS.com:Div+CSS布局，web标准的推广。,11,DIV,Div全称division意为“区分”使用DIV的方法跟使用其他tag的方法一样。如果单独使用DIV而不加任何CSS,那么它在网页中的效果和使用是一样的。DIV本身就是容器性质的,你不但可以内嵌table还可以内嵌文本和其它的HTML代码,12,DIV+CSS三列式布局,13,DIV+CSS三列式布局,14,DIV+