模块2Web标准及其构成.ppt

《模块2Web标准及其构成.ppt》由会员分享，可在线阅读，更多相关《模块2Web标准及其构成.ppt（20页珍藏版）》请在三一办公上搜索。

1、9/12/2023,烟台职业学院信息工程系,模块2 Web标准及其构成,【任务目标】,了解与Web标准相关的组织。掌握Web标准的构成以及每一部分的作用。了解DIV+CSS布局与表格布局的差异。了解Web标准的发展历程。了解浏览器的兼容性问题。,9/12/2023,基于Web标准的网页设计,2.1 Web标准介绍,Web标准W3CECMA,9/12/2023,烟台职业学院信息工程系,2.1.1 Web标准,Web标准不是某一个标准，而是一系列标准的集合。Web标准是由W3C（world wide web consortium）和其他标准化组织制定的一套规范集合。这些规范是专门为了那些在网上发布

2、的可向后兼容的文档所设计的，使其能够被大多数人访问。网页主要由3部分组成：结构（structure）、表现（presentation）和行为（behavior）。对应的标准也分为3方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准语言主要包括对象模型（如W3C DOM）、ECMAScript等。,9/12/2023,2.1 Web标准介绍,主要内容：Web标准W3CECMA,9/12/2023,基于Web标准的网页设计,2.1.1 Web标准,Web标准不是某一个标准，而是一系列标准的集合。Web标准是由W3C（world wide web consortiu

3、m）和其他标准化组织制定的一套规范集合。这些规范是专门为了那些在网上发布的可向后兼容的文档所设计的，使其能够被大多数人访问。网页主要由3部分组成：结构（structure）、表现（presentation）和行为（behavior）。对应的标准也分为3方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准语言主要包括对象模型（如W3C DOM）、ECMAScript等。,9/12/2023,基于Web标准的网页设计,2.1.2 W3C,W3C的中文译名为万维网组织，它是一个专注于“领导和发展Web技术”的国际工业行业协会。W3C的主要工作是研究和制定开放的规范（事

4、实上的标准），以便提高Web相关产品的互用性。W3C的推荐规范的制定都是由来自会员和特别邀请的专家组成的工作组完成。工作组的草案（drafts）在通过多数相关公司和组织同意后提交给W3C理事会讨论，正式批准后才成为“推荐规范（recommendations）”发布。,9/12/2023,基于Web标准的网页设计,2.1.2 W3C,W3C发布的标准主要有以下内容：1.HTML 4.0超文本标记语言HTML广泛用于现在的网页，HTML可以为文档增加结构信息。2.XML 1.0 XML是extensible markup language（可扩展标记语言）的简写。XML类似于HTML，但XML允许

5、用户自己定义标签，甚至允许用户通过XML namespaces为一个文档定义多套设定。3.CSS 2.0 CSS指层叠样式表。通过CSS可以控制HTML或者XML标签的表现形式。4.XHTML 1.0实际上，XHTML就是将HTML根据XML规范重新定义一遍。它的标签与HTML 4.0一致，而格式严格遵循XML规范。5.DOM 1.0 DOM是document object model文档对象模型的缩写。它使脚本语言很容易访问到整个文档的结构、表现和行为。,9/12/2023,基于Web标准的网页设计,2.1.3 ECMA,ECMA是European Computer Manufactures

6、 Association的缩写，中文名称为欧洲计算机制造联合会，是1961年成立的旨在建立统一的计算机操作格式标准，包括程序语言和输入输出的组织。ECMA发布了标准ECMAScript。ECMAScript是基于Netscape JavaScript的一种标准脚本语言。它也是一种基于对象的语言，通过DOM可以操作网页上的任何对象。可以增加、删除、移动或者改变对象。使得网页的交互性大大提高。,9/12/2023,基于Web标准的网页设计,2.2 Web标准技术的构成,结构 表现行为,9/12/2023,基于Web标准的网页设计,2.2.1 结构,结构用来对网页中用到的信息进行整理与分类。用于结构

7、化设计的Web标准技术主要有两种：XHTML和XML。XHTML有3种定义：严格的（strict），过渡的（transitional），框架的（frameset）。DTD是document type definition（文档类型定义）的缩写，它写在XHTML文件的开始位置，告诉浏览器这个文档符合什么规范，用什么规范来解析。XML即可扩展标记语言，目前推荐遵循的是W3C于2000年10月6日发布的XML 1.0版本，和HTML一样，XML同样来源于古老的标准通用标记语言，但XML是一种能定义其他语言的语言。XML最初设计的目的是弥补HTML的不足，以其强大的扩展性满足网络信息发布的需要，后来逐

8、渐用于网络数据的转换及描述。,9/12/2023,基于Web标准的网页设计,2.2.2 表现,表现技术用于对已经被结构化的信息进行显示上的控制，包括版式、颜色、大小等样式控制。W3C创建CSS标准的目的是希望以CSS来描述整个页面的布局设计，与HTML所负责的结构分开，使站点的构建及维护更加容易。相对于结构设计来讲，表现层的样式设计变化更丰富，也更难掌握。对于千变万化的网页设计，如何将设计编码成机器能够识别的样式语言也是CSS的工作重点，CSS丰富的样式表现也对设计者提出了更高的要求。,9/12/2023,基于Web标准的网页设计,2.2.3 行为,行为是指对整个文档内部的一个模型进行定义及交

9、互行为的编写，用于编写用户可以进行交互式操作的文档。行为标准也包括两部分：DOM和ECMAScript，其具体区别如下。DOM指文档对象模型。W3C建立的W3C DOM是建立网页与Script或程序语言沟通的桥梁。它实现了访问页面中标准组件的一种标准方法。,9/12/2023,基于Web标准的网页设计,2.3 Web标准的优势,表现与内容分离DIV+CSS布局优于表格布局,9/12/2023,基于Web标准的网页设计,2.3.1 表现与内容分离,使用表现与内容分离技术的好处主要有以下几方面：高效率的开发与简单维护 信息跨平台的可用性 降低服务器成本 便于改版 加快网页解析速度 与未来兼容 更好

10、的用户体验,9/12/2023,基于Web标准的网页设计,2.3.2 DIV+CSS布局优于表格布局,用DIV+CSS布局来替代传统的Table布局有以下几方面的原因：DIV+CSS布局遵循表现与内容分离的原则使用DIV+CSS布局生成的网页文件网页代码精简、更小、打开更快改版网站更简单容易搜索引擎更友好从页面的设计效果来看，任何用表格布局的页面完全能够用DIV+CSS布局实现,9/12/2023,基于Web标准的网页设计,2.4 Web标准的发展及面临的问题,Web标准的发展浏览器兼容性问题”,9/12/2023,基于Web标准的网页设计,2.4.1 Web标准的发展,HTML是一门不够严谨

11、的语言,主要用于页面的设计与表现XHTML是一门面向结构的语言，主要用于对网页内容进行结构设计，其严谨的语法结构有利于浏览器进行解析处理。XHTML也是XML的过渡型语言。XML是完全面向结构的设计语言W3C制定用于文本设计的技术标准CSS，实现了网页的结构与表现分离，CSS 2.0版本得到推广。交互性也是Web发展的标志之一，JavaScript提供了如增加、改变或删除信息以及更为丰富的交互方式,9/12/2023,基于Web标准的网页设计,2.4.2 Web标准的兼容性问题,Web标准的兼容性好，但通常说的兼容是指向后兼容，向新浏览器、新设备兼容。对已有的浏览器来说，它们对Web标准的支持

12、程度不一样，因此会出现不同浏览器下页面变形的情况。（1）标准模式：是W3C所倡导的W3C国际通行标准（2）混杂模式：微软为了保持浏览器良好的向后兼容性，为用户提供了一个“开关”，来决定浏览器的工作模式。开关可以决定浏览器采用“标准模式”或者“混杂模式”。混杂模式自IE 5.5开始，在IE6、IE7、IE8均有该模式。在“混杂模式”下，那么各浏览器之间表现出的差异将会非常大，影响网民的浏览体验。,9/12/2023,基于Web标准的网页设计,思考与练习,一、填空题1.Web标准的制定者是_。2.Web标准的3个方面包括：结构化标准语言主要有XHTML和XML、_和_。3.XHTML是_（可扩展超文本标识语言）的缩写。HTML是一种基本的Web网页设计语言，XHTML是一种基于_的标记语言。二、简答题1.什么是Web标准？为什么要使用Web标准来开发网页？2.简述HTML与XHTML的区别。3.Web标准由哪几方面构成？各方面的作用是什么？4.如何改善现有网站？,2023/9/12,基于Web标准的网页设计,20,