Web开发标准与网页网站制作介绍.pptxVIP

移动互联应用“赢在起点”系列图书移动Web开发实战目录Web开发标准介绍CSS网页布局标准认识网页和网站网页的基本构成元素实例1-1：一个基本的HTML5页面综合实例：个人博客网站Web开发标准介绍随着网络技术的发展，各种设计软件的推出，多样化的站点展示方式应运而生。为保证不同作者、不同软件设计出的站点信息完整地展现在用户面前，Web标准便应运而生。在本节内容中，将详细讲解Web开发标准的基本知识，为读者学习后面的内容打下基础。11.1.1 Web开发标准概述顾名思义，Web标准是所有站点在建设时必须遵循的一系列硬性规范。从页面构成来看，网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。因此对应的Web标准由如下三方面构成。1．结构化标准语言Web开发标准介绍1当前使用的结构化标准语言是HTML和XHTML，下面对这两种语言进行简要介绍。HTMLHTML是Hyper Text Markup Language（超文本标记语言）的缩写，是用来表示网上信息的符号标记语言，是构成Web页面的主要元素。用户可以将所要表达的信息编写为HTML文件，然后通过浏览器将HTML文件翻译成方便识别的信息，也就是我们所见到的网页。HTML语言是网页制作的基础，是网页设计初学者必须掌握的内容。XHTMLXHTML是Extensible Hyper Text Markup Language的缩写，是在XML标准上建立起来的标识语言，是由HTML向XML的过渡性语言。2．表现性标准语言Web开发标准介绍1目前的表现性语言就是本书所述的CSS。CSS是Cascading Style Sheets（层叠样式表）的缩写，当前最新的CSS规范是W3C于2001年5月23日推出的CSS 3。通过CSS技术可以对网页进行布局，控制网页的表现形式。CSS可以与XHTML语言相结合，实现页面表现和结构的完整分离，提高站点的使用性和维护效率。2．表现性标准语言当前的行为标准是DOM和ECMAScript。DOM是Document Object Model（文档对象模型）的缩写，根据W3C DOM规范，DOM是一种与浏览器、平台和语言的接口，使得用户可以访问页面其他的标准组件。简单理解，DOM解决了Netscaped的JavaScript和Microsoft的Jscript之间的冲突，给予Web设计师和开发者一个标准的方法，让他们来访问站点中的数据、脚本和表现层对象。从本质上讲，DOM是一种文档对象模型，是建立在网页、Script和程序语言之间的桥梁。ECMAScript是ECMA（European Computer Manufacturers Association）制定的标准脚本语言（JavaScript）。上述Web标准间的相互关系如下图所示。Web开发标准介绍1上述标准大部分由W3C组织起草和发布，也有一些是其他标准组织制订的，如ECMAScript标准就是由ECMA制定的。Web标准结构关系1.1.2 为什么要使用Web标准Web开发标准介绍1推出Web标准的主要目的是为站点设计提供可参考的规范，使各地站点以完整、标准的格式展现出来。具体来说，其主要目的如下：提供最多利益给更多的网站用户，包括世界各地的；保证任何网站文档都能够长期有效，而不必在软件升级后进行修改；大大简化了代码，并对应地降低站点建设成本；让网站更容易使用，能适应更多不同用户和更多的网络设备，因为硬件制造商也按照此标准推出自己的产品；当浏览器版本更新或者出现新的网络交互设备时，也能确保所有应用能够继续正确执行。Web开发标准介绍使用Web标准后，不仅为浏览用户带来多元化的浏览展示，而且给站点拥有者和维护人员带来极大的方便。对浏览用户的具体意义如下：1页面内容能被更多的用户访问；页面内容能被更广泛的设备访问；用户能够通过样式选择定制自己的表现界面；文件的下载与页面显示速度更快。Web开发标准介绍对网站所有者的具体意义如下：1带宽要求降低，降低了站点成本；使用更少的代码和组件，使站点更加容易维护；更容易被搜寻引擎搜索到；使改版工作更加方便，不再需要变动页面内容；能够直接提供打印版本，而不需要另行复制打印内容；大大提高了站点的易用性。1.2.1 传统页面布局CSS网页布局标准2传统的页面布局方法是使用table元素，其实现方法为：首先使用table元素的单元格根据需要将页面划分为不同区域，并且在划分后的单元格内可以继续嵌套其他的表格内容，随意添加；然后利用table元素的属性来控制内容的具体位置，例如algin和valgin。具体实现流程如下图所示。Web标准结构关系CSS网页布局标准下面来看一个用table进行页面布局的实例，其具体代码如