基于Web标准的网站设计与开发流程
摘 要:建立网站是最直接有效的宣传企业、行业的方法手段,网站的跨时空性、跨地域性,可以让不同地区、不同行业的人互相了解其他行业、其他领域的基本信息、发展历史等数据,使得不同的企业、行业共享社会教学资源,降低成本、提高效率,为其提供先进的交流平台,也是各行各业展示自己的最佳场合。简要介绍了Web标准开发的核心技术,然后通过举例介绍了基于Web标准的网页设计和开发流程。
关键词:Web标准;网站设计;开发流程
1 Web标准主要技术
Web标准的技术主要表现在3方面:表现标准语言主要利用CSS,机构化标准语言主要利用XHTML和XML,行为标准主要利用对象模型W3C DOM和ECMAScript等。
1.1 XHTML语言
XHTML (extensible hypertext markup language)即可扩展标识语言,目前主要采用的是W
3C知道的 XML1.0 标准。XHTML是服务于XML客户端的,它是基于XML,实现了HTML向XML的过渡。
XHTML是有普通文本和标签组成的,将普通文件中的一些语句加注标识的语言,换而言之,就是运用标记格式化特定的某些文本,从而达到预计的文档效果。XHTML的另一个重要组成部分标签一般为具有特定意义的英文单词的缩写,例如P为Paragraph的缩写,意为段落。一般比较典型的标签都包含标签名称、属性、属性值三部分,如图1所示。大部分标签都是成对出现的,其中还有一些特殊的标签。
1.2 CSS
CSS(cascading style sheets)即层叠样式表,是Web的标准化布局语言,是控制颜、版式规划、图像尺寸及布局的工具。CSS的作用是能够结合XHTML帮助网站建设人员分离外观和结果,让网站的设计、访问及后期的维护更加方便快捷。层叠样式表是有控制被选择的元素如何显示的一个或者多个规则定义组成,而一个层叠定义是有选择器和声明两部分组成,声明则是由属性和值两部分组成如图2所示。
图2 CSS的组成
1.3 DOM
DOM(document object model)即文档对象模型,在W3C DOM规范中,DOM是能够让用户访问页面的标准组件,是浏览器和平台语言的接口,它使得Netscape的JAVAScript和Microsoft的Jscript之间矛盾缓解,使得设计人员能够访问站点中的数据信息、脚本和表现层对象。
1.4 ECMAScript
ECMAScript(web标准有哪三大部分European computer manufacturers associatio)即ECMA制定的JavaScript——标准脚本语言。
2 基于Web标准的网站设计与开发流程
对于Web标准的网站设计和开发,没有固定不变的流程模式,一般包含以下具体5个关键过程:需求分析、设计、利用XHTML建立Web文档内容和结构、利用CSS添加样式、测试及验证。下面以某对外交流协会网站为例,简单论述基于Web 标准的网站设计与开发流程。
2.1 网站的需求分析
前期的网站需求分析是设计和开发网站的关键性第一步,要与客户积极沟通,充分挖掘客户的潜在需求。网站的需求一般有建立网站的目的、网站内容的特点、同行业的网站的风格和内容、网站的基本功能模块及网站的基本设计要求等。通过与客户的交流,进行深入的探讨和分析,达成书面形式的文件,制订需求大纲。
以某对外交流协会网站为例,通过交流、探讨和分析,大致得出该客户的网站需求:网站的外观布局和设计要清晰明了; 页面简洁方便,国际性强;网站具有基本点功能模块例如人员介绍、全站搜索之外还要求具备新闻、活动公示栏、会员论坛及资源上传下载功能。
2.2 网站的设计
网站的设计过程主要是信息架构和页面外观的布局和风格设计。信息架构顾名思义,其主体就是信息。信息架构骑士就是一个收集信息、整理信息、斡旋信息体系与用户需求的过程,使信息变成一个有组织、有次序的浏览体系的过程。这样使得用户更容易寻信息和管理信息。
以某对外交流协会网站为例,以上述需求为根本,得出网站设计的信息架构:网站标志信息中的协会LOGO;实现网站的全站搜索功能;导航信息展示网站的主要功能模块;新闻栏展示协会最新的咨询;活动栏展示协会近期的活动并可以配以图片;协会的友情链接、资源上传及下载、论坛及协会的。
信息架构设计介绍,继而就是页面外观的布局和风格设计,参考其他相关行业的网站,综合客户的需求设计出具有自己独特风格的页面外观布局和风格。
2.3 利用XHTML建立Web文档内容和结构
Web文档内容和结构的建立主要由两个步骤:
(1) 利用XHTML建立Wweb文档内容:利用XHTML标签格式化文档的内容,建立语义化文档,以某对外交流协会网站为例,其语义化文档关键语句如下:
<!DOCTYPE html PUBLIC”-//W3C//DTD XHTML 1.0 Transitional//EN'” vww.W3.olgTR/xhmdl/DTD/xhtmll-transifionaLdtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head><meta http-equiv=”Content-Type”COntent=”text/html;
eharset=gb2312”/l><title>对外交流协会</title></head><body>
<h1>对外交流协会</hi><!一网站标题一>
<formid=”forml”name=”forml”method="post'’action=”。’
>站内搜索
<input type=”text'’name=”textfield”/></label><label><input type=”submit”name=”Submit”value=”GO”P)H</label></form>
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论