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

Web开发标准介绍CSS网页布局标准综合实例：个人博客网站认识网页和网站网页的基本构成元素实例1-1：一个基本的HTML5页面顾名思义，Web标准是所有站点在建设时必须遵循的一系列硬性规范。从页面构成来看，网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。因此对应的Web标准由如下三方面构成。随着网络技术的发展，各种设计软件的推出，多样化的站点展示方式应运而生。为保证不同作者、不同软件设计出的站点信息完整地展现在用户面前，Web标准便应运而生。在本节内容中，将详细讲解Web开发标准的基本知识，为读者学习后面的内容打下基础。当前使用的结构化标准语言是HTML和XHTML，下面对这两种语言进行简要介绍。HTML是HyperTextMarkupLanguage（超文本标记语言）的缩写，是用来表示网上信息的符号标记语言，是构成Web页面的主要元素。用户可以将所要表达的信息编写为HTML文件，然后通过浏览器将HTML文件翻译成方便识别的信息，也就是我们所见到的网页。HTML语言是网页制作的基础，是网页设计初学者必须掌握的内容。XHTML是ExtensibleHyperTextMarkupLanguage的缩写，是在XML标准上建立起来的标识语言，是由HTML向XML的过渡性语言。目前的表现性语言就是本书所述的CSS。CSS是CascadingStyleSheets（层叠样式表）的缩写，当前最新的CSS规范是W3C于2001年5月23日推出的CSS3。通过CSS技术可以对网页进行布局，控制网页的表现形式。CSS可以与XHTML语言相结合，实现页面表现和结构的完整分离，提高站点的使用性和维护效率。当前的行为标准是DOM和ECMAScript。DOM是DocumentObjectModel（文档对象模型）的缩写，根据W3CDOM规范，DOM是一种与浏览器、平台和语言的接口，使得用户可以访问页面其他的标准组件。简单理解，DOM解决了Netscaped的JavaScript和Microsoft的Jscript之间的冲突，给予Web设计师和开发者一个标准的方法，让他们来访问站点中的数据、脚本和表现层对象。从本质上讲，DOM是一种文档对象模型，是建立在网页、Script和程序语言之间的桥梁。ECMAScript是ECMA（EuropeanComputerManufacturersAssociation）制定的标准脚本语言（JavaScript）。上述Web标准间的相互关系如下图所示。Web标准结构关系上述标准大部分由W3C组织起草和发布，也有一些是其他标准组织制订的，如ECMAScript标准就是由ECMA制定的。推出Web标准的主要目的是为站点设计提供可参考的规范，使各地站点以完整、标准的格式展现出来。具体来说，其主要目的如下：提供最多利益给更多的网站用户，包括世界各地的；保证任何网站文档都能够长期有效，而不必在软件升级后进行修改；大大简化了代码，并对应地降低站点建设成本；让网站更容易使用，能适应更多不同用户和更多的网络设备，因为硬件制造商也按照此标准推出自己的产品；当浏览器版本更新或者出现新的网络交互设备时，也能确保所有应用能够继续正确执行。使用Web标准后，不仅为浏览用户带来多元化的浏览展示，而且给站点拥有者和维护人员带来极大的方便。对浏览用户的具体意义如下：页面内容能被更多的用户访问；页面内容能被更广泛的设备访问；用户能够通过样式选择定制自己的表现界面；文件的下载与页面显示速度更快。对网站所有者的具体意义如下：带宽要求降低，降低了站点成本；使用更少的代码和组件，使站点更加容易维护；更容易被搜寻引擎搜索到；使改版工作更加方便，不再需要变动页面内容；能够直接提供打印版本，而不需要另行复制打印内容；大大提高了站点的易用性。传统的页面布局方法是使用table元素，其实现方法为：首先使用table元素的单元格根据需要将页面划分为不同区域，并且在划分后的单元格内可以继续嵌套其他的表格内容，随意添加；然后利用table元素的属性来控制内容的具体位置，例如algin和valgin。具体实现流程如下图所示。Web标准结构关系下面来看一个用table进行页面布局的实例，其具体代码如下所示。源码路径：代码/1/001.htmlhtmlheadmetahttp-equiv=Content-Typecontent=text/html;charset=gb2312title无标题文档/title/headbodytablewidth=600height=200border=0align=center!--Table元素划分的区域--trtddivalign=centerclass=style1鬼吹灯/div/td/trtrtddivalign=center第一部：精绝古城/div/td/trtrtddivalign=center第二部：龙岭迷窟/div/td/trtrtddivalign=center第三部：云南虫谷/div/td/trtrtddivalign=center第四部：昆仑神宫/div/td/tr/table/body/html执行代码后的效果如下图所示。代码执行效果从上例中可以看出，通过table和表格的嵌套使用，结合其相应的属性，可以将页面的内容按照指定格式显示出来。在Web标准布局的页面中，表现部分和结构部分是各自独立的。结构部分用HTML或XHTML编写实现，而表现部分是调用CSS文件实现的。这种方式实现了页面结构和表现内容的分离，从而方便了页面维护。下面来看一个使用Web标准布局页面的实例，本实例由两个文件构成：结构文件2.htm和CSS表现样式文件style.css。结构文件002.html的具体代码如下所示。源码路径：代码/1/002.html。htmlheadmetahttp-equiv=Content-Typecontent=text/html;charset=gb2312title无标题文档/titlelinkhref=style.csstype=text/cssrel=stylesheet/!--调用样式文件style.css--/headbodytablewidth=600height=200border=0align=centertrtddivclass=unnamed1鬼吹灯/div/td/trtrtddivclass=unnamed1第一部：精绝古城/div/td/trtrtddivclass=unnamed1第二部：龙岭迷窟/div/td/trtrtddivclass=unnamed1第三部：云南虫谷/div/td/trtrtddivclass=unnamed1第四部：昆仑神宫/div/td/tr/table/body/html.unnamed1{background-position:center;text-align:center;color:#CC0000;}CSS表现样式文件style.css的具体代码如下所示。源码路径：代码/1/style.css。执行代码后的效果如下图所示。代码执行效果从上例中可以清楚地看出，使用CSS标准样式后，页面结构部分和表现部分已经完全分离了。如果整个站点的页面都调用此CSS文件，那么只需改变此样式的某属性值，整个站点的此属性元素都将修改。例如，如果想修改字体的颜色为green，只需修改CSS文件中的color值即可。标准样式可以实现页面结构和表现的分离，这给站点设计领域带来了重大意义：页面的表现部分由样式文件独立控制，站点的改版工作将变得更加轻松自如；页面内容可以使用不同的样式文件，因此页面内容能够适应各种应用设备；充分结合XHTML的清晰结构，实现简易的数据处理；根据XHTML的明确语意，轻松实现搜索工作。随着大力推广宣传，Web标准逐渐被网站设计者所认可，越来越多的站点改版成为符合标准的版本。Web标准能够被广大用户迅速认可，是因为它能够给用户带来真正的好处：不但能更加方便地实现对页面的维护，而且还能加快页面的显示速度，提高浏览者的积极性，实现搜索引擎的优化。近年来Web3.0这一概念的提出，为Web开发带来了巨大的革新和冲击。Web3.0是建立在Web标准基础之上的，所以在很大程度上推动了Web标准的发展。随着当前硬件技术和软件技术的进步，Web标准页面的前景将变得更加光明。网页是指我们在互联网上看到的丰富多彩的站点页面。从具体定义上讲，网页是Web站点中使用HTML等语言编写而成的单位文档，它是Web中的信息载体。网页由多个元素构成，是这些构成元素的集合体。下图所示的为NBA中国官方网站的首页。NBA中国官方网站主页网站是由网页构成的，是一系列页面构成的整体。一个网站可能由一个页面构成，也可能由多个页面构成，并且这些页面间存在着某种联系。一个典型的网站结构如下图所示。网站基本结构上述网站的基本结构在服务器中的具体存在方式如下图所示。网站存储结构在当前网站发展应用中，网站的整体发展趋势如下：由于制约网络发展的瓶颈随着各种新技术的涌现和硬件的升级，使网站的发展深度得到了扩展。互联网的出现和发展对传统秩序造成了巨大冲击，使人们个性张扬和创造力的发挥提供了一个广阔的平台。专业化趋势主要表现在以下两个方面：（1）面向个人消费者的专业化趋势。为满足消费者个性化的需求，提供专业化的服务支关重要，这也为网站设计者提出了更高的要求；（2）面向个人企业客户的专业化趋势。随着B2B电子商务模式的蓬勃发展，以大的行业为依托的网站平台前景十分看好。由于互联网本身的特点注重决定了网站的跨地域特性，同时也将面临更多的发展机遇和更加强有力的挑战。了解了网站的发展趋势后，设计者在设计过程中应充分考虑发展趋势造成的影响。网站是由网页构成的。所以，在网站设计流程中，网页设计始终贯穿于网站设计流程。为此，网站设计实质上是网页设计升级的制作规划，它实现了对整个站点各方面的一系列操作。网页是构成站点的基本元素，是一个网络站点的基础。在本节内容中，将对网页的各基本构成元素进行简要介绍。下面将通过分析NBA中国官方网站主页来介绍网页的基本构成元素。文本是网页中的最重要的信息，可以通过字体、大小、颜色、底纹、边框等来设置文本的属性。在网页概念中的文本是指单纯的文字，而并非图片中的文字。图像是页面中最为重要的构成部分。在网页中只有加入图像后才使页面达到完美的显示效果，可见图像在网页中的重要性。在网页设计中用到的图片一般为JPG和GIF格式。超链接是网站的灵魂，能够指向另一个网页或相同网页上的不同位置，这个目的端通常是另一个网页，但也可以是一幅图片、一个电子邮件地址、一个文件甚至一个程序。超链接广泛地存在于网页的图片和文字中，提供与图片和文字相关内容的链接，在超链接上单击鼠标左键，即可链接到相应地址（URL）的网页。有链接的地方，鼠标指上时会变成小手形状。在全球广域网上，超链接是网页之间和Web站点之间主要的导航方法。Flash一经推出后便迅速成为最首要的Web动画形式之一。Flash利用其自身所具有的关键帧补间、运动路径、动画蒙版、形状变形和洋葱皮等动画特性，不仅可以建立Flash电影，还可以将动画输出为不同文件格式的播放文件。表格是传统网页排版的灵魂，即使CSS标准推出后也能够继续发挥不可限量的作用。通过表格可以精确地控制各网页元素在网页中的位置。表单是用来收集站点访问者信息的域集，是网页中站点服务器处理的一组数据输入域。它是非常重要的通过网页在与服务器之间传递信息的途径，表单网页可以用来获取浏览者的意见和建议，以实现