如何创建一个Web设计方案?

如何创建一个Web站点规划设计方案，这对于网站建设来说，显然是必须的，但同时也比较难以从理论上进行准确的诠释。为了使这一讨论能有一个清晰的脉络。这里用一个简单的例子，并根据前面所讲述的内容进行一次规划实战。如：有一个叫“远峰鞋业”的公司，生产销售各种样式的鞋。公司想创建一个Web站点，通过访问公司站点，使用户可以得到产品信息、公司的形象、公司的理念，也希望能够通过Web得到用户的反该信息。根据他们的要求，首先来确定建站的目的：站点必须提供公司的所有部门的信息，得到用户的反馈信息。而且根据公司的产业结构和建站的目的，确定典型的访问者群体是一般的消费者。其基本资料就是公司的宣传手册、产品信息、公司新闻和联系信息，还有就是是网络的技术限制，根据当前总体网络的用户情况，所有的页面都在以33.6Kbps速率的调制解调器为下载标准，并确定以Internet Explor 5.0版本的浏览器为基本的用户浏览器。下面要做的就是将整个网站的内容进行分类列表，并确定网页的主题，一般来说放置到网站上的内容分两类：第1类是顶层内容(顶层文件)，这是构筑网站主页的内容，当访问者进入网站时首先看到的内容。主页的内容主要包括以下元素：公司的标志、公司的名称、公司的理念、公司的新闻、公司的简介、最新产品信息、公司的联系信息、网管的联系信息、网站的版权信息、网站的导航图标。第2类是次层内容(文件内容)，包括下级各网页的内容，如产品信息、部门信息、工作手册和演示文件，甚至数据库等。产品信息页内容：公司产品的详细信息，包括鞋的类型、图片、价格等。部门信息页内容：提供公司各部门的信息，包括部门的职责，负责人、联系电话等。用户反馈页的内容：提供一个供用户直接填写该信息的表单，包括反馈的内容，用户或访问在的联系信息等。完成对网站内容的分类后，下面要做的工作就是整理各页面的层次关系和逻辑关系，通常是用表来完成这项工作的，用户或访问者的联系信息。先是从用户或访问者的角度考虑，并设计一个访问Web的任务图，如图2.1所示。它的目标就是要让访问者更方便地找到自己希望的信息。网页的层次关系和逻辑关系，是网站结构的重点。合理而层次化地排布各网页的主题，并给它们建立良好的逻辑关系，就可以非常方便地指引用户访问自己感兴趣的信息。一般网站的分层不应分的太深，大约3层就足够了，这样就可以保证用户通过不超过3次点击便能到达站点的任何地方，这也就是通常所说的站点3级结构，如图2.2所示，为本例的网站分层结构略图。完成任务和站点结构的图表后，可以再很据总体的思路对相关内容进行补充细化，由子篇幅的关系，这里就不再作介绍了。

如何发挥CSS 2.0的作用

css应用是本文要讨论的重点，也是向Web标准过渡的重要一环。相对于结构设计来讲，表现层的样式设计变化更丰富，也更难掌握。对于千变万化的网页设计，如何将设计编码成机器能够识别的样式语言，也是CSS的1作重点。Css丰富的样式表现也对设计者提出了更高的要求。这里针对向Web标准过渡的要求，先对CSS的编写提出一些建议与要求，而在后面章节才详细探讨这些内容。 1.合理的CSS文件结构 虽然CSS做到了样式设计与内容的分离，但CSS文件本身也应该拥有良好的层次结构及规范，目的是进一步改替样式设计的可维护性。CSS本身支持Import导入功能，针对大型网站设计，不妨使用分离的CSS文件来组织样式，比如将字体样式专门使用font.css文件来编写，表单设计则放到form.css文件中。通过合理地组织这些文件.可以带来后期维护的便利性，也方便网站程序能够根据浏览器版本或终端设备进行文件调用，进一步提升CSs跨平台的应川能力。2.继承与重用的优势 使用CSs的优势就在于其良好的重用特性，一段CSs设计代码可以供多个区域同时使用。除了龟用功能外，CSs还可以实现类似于而向对象程序设计中的继承机制，通过继承机制能够进一步地完善网站的样式结构。比如在CSs对应的XHTML中，侮一级的标签总是首先使用其本身标签的样式设计，接着使用父级标签的样式，这样部分代码就可以分别放在各级别中，它们互相发挥作用;统一代码则放在最上一级标签里。通过这种具有继承机制的功能运用，我们能够进一步地减小样式设计中的代码量，并进一步改稗设计方法。 3.设计跨平台的代码 CSS也有美中不足，由于不同品牌浏览器及不同版本之间的演染方式不同，各白对CSS的解析也存在着一定差异。一些老版本的浏览器(如IE4.0及IE5.0等)，还有众多不愿升级的用户在使用，另外就是PC机F与MAC机下浏览器产品的不问.等等情况。针对这些原因，CSS设计也应当其有一定的跨平台兼容特性，编码时应尽量减少生僻属性的使用，如果想兼容旧版本的浏览器，也应当注意留有一定的CSS hack代码。 4.具有良好可用性的Css样式设计 可用性随着计算机人机交互技术的发展不断扩充其内容与形式。可用性的目标是使我们的交互式产品(软件、网站)对用户的需求提供最大限度的满足，使得产品更容易被用户使用，它从根本.上改变用户与产品交互的主观过程，提升产品价值，为产品及用户带来双方面的利益。CSS作为样式设计代码，也包含着可用性的设计内容。CSS样式的设计意味着你对网站整体风格的把握需要重新考虑，从视觉设计上为了达到最大限度的重用与合理的纺构，需要统一的字体、字号及排版形式，这些统一性的设计都有助于视觉设计卜可用性的提升。对于网站上的细节表现，比如链接改变提示、链接区域、导航的操作感等，也都是CSS在可用性上设计的目标，最终目的就是希望通过良好的设计，创造出更好的交互式网站.以便用户使用，为网站及用户创造价值。 5，使用基干DOM的脚本语言来编写交互 DOM的产生同样是为了实现脚本语言的跨平台与跨浏览器应用。DOM (DocumentObject Model，文档对象模型)是由W3C制定的一种与浏览器无关的接口，它能够对网页中的标准组件(如HTML标签)做出技术性的统一规范，便脚本语言能够访问的这些组件，前提是浏览器支持这种基于DOM的定义规范。 就目前来说，大部分浏览器都支持标准的DOM。使用符合DOM的脚本语言，基本上不再需要检侧浏览器的不同版本而去编写几套不同的代码，只要符合DOM的浏览器，相同的代码就能够完成所有可支持的操作.目前的javaScript是符合DOM标准的脚本语言.有关DOM的详细资料。