企业网站设计规划和网页设计问题归纳.doc

企业网站设计规划和网页设计问题归纳最近，我不得不对我的一个客户的旧网站进行更新，使得它能够达到可访问性的标准。对三四年前的旧代码进行挖掘的想法根本没有吸引力，主要是因为我曾经使用的很多编程惯例已经不再适用，特别是从可访问性上来讲。我曾经使用绝对的字体大小，固定的页面宽度和表格来做版面设计和空间分配。像那时建构的很多网站一样，我的客户的网站使用了Cascading Style Sheets (CSS)来格式化文本。它没有使用任何CSS的更加强有力的版面设计功能，也没有允许HTML设备独立，而这是CSS可访问性的主要优点之一。问题是如何出现的？在我概述使网站更加具有可访问性的方法之前，了解现今众多的访问性问题的起因也许是很有帮助的：对HTML肤浅的理解：在1990年代的互联网大发展时期中，所有人都开始建构网站。WYSIWYG编辑器使得几乎每个人都可以很容易地建构一个网站，而不用费心去学习HTML。但不幸的是，这种在使用上的便利带来了一些蹩脚的代码，对可访问性造成了妨碍。HTML在设计方面的局限性：开发者和设计者经常会故意错用HTML标签，特别是标签，来克服HTML在版面和设计上的局限性。这种设计方式也会带来妨碍可访问性的代码。 开始如果你是从头开始建构一个新的网站，那么通过CSS来改善可访问性就会很容易。但你仍然可以轻松地将现有的网站转变为CSS形式。步骤1：检查现有代码为了更好地说明，我将用在表A中这个简单的HTML代码来代表一个使用CSS的页面。这个例子假设页面还没有使用CSS，不过你也可以使用相似的方法来评价一个基于CSS的站点。主要的不同点就是大多数的改变将发生在CSS文件中而不是HTML文件中。步骤2：从HTML中去掉所有特殊风格标签要在这个页面中加入CSS，我首先需要去掉所有要控制内容表现的标签。样本代码使用了字体标签来定义字体外观，风格和颜色。去掉这些元素使得样本代码如表B所示。步骤3：从HTML中去掉并替换任何错用的标在企业网站的网页设计方面所存在的问题也直接影响到网站设计的专业性，甚至对企业形象造成负面影响。由于网站设计问题非常之多，不可能进行完整的统计，这里仅对部分重要问题进行了调查分析，但并未进行详细的数据统计，这里针对较为普遍存在的问题给出定性说明。为了详细说明网页设计中所存在的问题，下面分类罗列这些常见的问题：网站规划：整体规划不合理，主辅菜单不清晰;网站建设导向不明确，重点不突出;栏目过多或者过少;各栏目缺乏统一规划，整个网站比较杂乱;网站的促销功能没有得到明显体现。菜单设置：菜单采用图片形式，图标标识不明确，无文字说明，需要用户移动鼠标进行猜测;菜单层次过多，有效信息层次太深，需要多次点击才能找到有效信息;过多采用鼠标响应式菜单，栏目设置不合理，使得用户难以发现需要的信息;栏目设置有重叠;栏目名称意义不明确，容易造成混淆;全flash首页和菜单，无法优化处理，也没有相应的文字说明栏目过于简单，重要信息不完整，有效信息少。网站设计网站首页：采用大型图片或者FLASH，真正用户关心的信息在首页没有体现，需要多次点击;过大的FLASH严重影响首页下载速度;首页有效信息量小;首页无标题;主页布局比较乱，重要信息没有得以重点体现;打开网页弹出多个窗口，影响正常浏览;追求“创意”效果，很难理解网站要表达的意思。网站设计页面信息：重要信息不完整，如联系方式和产品介绍等;页面信息小，需要多次翻页;与企业形象、产品、促销等方面无关的信息;产品详细介绍内容过少;内容页面没有标题，或者全部使用公司名为标题;部分内容陈旧，缺乏时效性;部分栏目无任何内容。网站设计网页字体和美工：过分注重美术效果，大量采用图片，影响网页下载速度;过分注重美观，有些连基本信息内容都用图片格式，影响基本信息获取;文字太小、文字颜色暗淡、采用深色页面背景等，影响正常视觉;页面过于花哨，接近于游戏网站。调查结果表明，在网站规划和网页设计中所存在的主要问题包括5类30个问题，其中最为突出的问题(出现频率最高)是：(1)网站规划和栏目设置不合理：主要表现在栏目设置有重叠、交叉、或者栏目名称意义不明确，容易造成混淆，使得用户难以发现需要的信息，有些网站则栏目过于繁多和杂乱，网站导航系统又比较混乱;(2)重要信息不完整：企业介绍、联系方式、产品分类和详细介绍、产品促销等是企业网站最基本的信息，但为数不少的企业网站上这些重要信息不完整，尤其是产品介绍过于简单，有些甚至没有公布任何联系方式;(3)网页信息量小：包括两种情况：一种页面上的内容过少，或者将本来一个网页可以发布的内容分为多个网页，而且各网页之间没有相互链接，需要主页点击;另一方面是尽管内容总量不少，但有用的信息少，笼统介绍的内容多;(4)栏目层次过深。一般来说，重要的信息应该出现在最容易被用户发现的位置，应尽可能缩短信息传递的渠道，以使企业信息更加有效地传递给用户，石由于网站栏目层次过深，用户需要多次点击才能获取有效信息，在这个过程中，一些有价值的用户可能已经离开了网站;(5)网站缺乏促销意识：促销意识指通过网站向访问者展示产品、对销售提供支持，有多种具体表现方式，如主要页面的产品图片、介绍、通过页面广告较好体现出企业形象或者新产品信息、列出销售机构联系方式、销售网店信息等，或者具有积累内部网络营销资源和拓展外部网络营销资源的作用，这方面总体状况比较欠缺。现在我要去掉任何错用的HTML标签。在样本代码之中，一个表格用来在页面的内容创建一个15象素的边缘，代码还使用标签来创建段落。在我去掉表格和标签之后，我将他们替换为适当的标签。例如，我对页面标题使用标签，用标签来显示段落。使用这些标准HTML标签使得之后的CSS的应用变得非常容易，而且与用户定义的风格单更加兼容。现在的样本代码如表C所示。步骤4：建构一个CSS文件来覆盖风格信息现在我已经从HTML文件中去掉了所有风格信息，我需要将这些信息转移至一个CSS文件中。CSS文件仅仅是一个存为.css扩展名的文本文件，因此它可以在任何一个文本编辑器中进行创建。我使用的是Dreamweaver MX。为了使在HTML中应用CSS文件变得容易，我使用了名为p和h2的风格来对应标准HTML标签。我使用了可变的字体大小，使得用户可以轻松地在浏览器中增大或缩小字体大小。使用绝对大小可以防止浏览器对字体进行大小的调整（除了Netscape 6或以后的版本之外，它将不考虑绝对字体大小）。我还在需要的地方指定了字体的种类，重量和颜色。要重新产生由HTML标记代码创建的版面，我需要将和标签设置宽度为780象素。然而，由于我们的目的是将可访问性最大化，因此我将去掉宽度设置使得页面能符合浏览器窗口的大小。而且我将让HTML页面使用浏览器的缺省边缘，而不是用原始代码的标签来重新创建15象素的空白，这也使得其它例如打印机等的设备来使用它的缺省边缘设置。表D显示了我创建的CSS文件。我将它命名为Mystylesheet.css并将它放置在网站根目录下的一个风格文件夹之中。步骤5：在HTML文件上附加新的风格单在创建了CSS文件之后，我在HTML文件中插入了它的风格。因为HTML文件已经包括了所有在CSS文件中引用的标签(和)，所以我只需要连接到HTML文件头部的风格单上就可以了。HTML文件从CSS文件中获得风格并将他们应用到和标签当中，如表E所示。步骤6：验证代码整个过程的最后一个步骤就是验证HTML代码的可访问性。如果你对于CSS来说是个新手的话，你最好对CSS代码也进行验证。有很多种的工具都可以帮你对二者进行验证。我使用Dreamweaver MX来检查我的样本代码的可访问性。你可以通过在文件菜单中选择Check Page然后选择Check Accessibility来实现。任何错误或是警告都会显示出来，还包括出现位置的行号以及对问题简要的解释。你可以在Dreamweaver MX的Reference工具中找到更多关于这些错误和警告的内容。你只要从Dreamweaver的Windows菜单中选择Reference然后从Book菜单中选择UsableNet Accessibility Reference就可以了。此外，World Wide Web Consortium (W3C)提供了超过30个的可访问性评估工具的链接。W3C还提供了针对HTML和CSS的基于Web的免费验证器。可访问性和简单的管理虽然这里给出的例子是很简单的，但它说明了利用CSS使你的站点更加具有可访问性是非常容易的。而且，对于CSS的使用不止这一个优点而已。基于CSS的网站要比仅仅只有HTML的网站要好管理得多。CSS文件中的风格上的变化可以应用到整个网站中而不需要改变网站中任何的HTML文件。而且CSS的使用缩小了每一个HTML文件的整体文件大小，因为所有的风格信息都存储在了CSS文件之中。因此如果你想要改善可访问性的话，将其视为一个机会，而不是一个障碍。要了解更多关于CSS和可访问性的内容，你可以去看一看World Wide Web Consortium中的Web Accessibility Initiative (WAI)。什么使得CSS更具有访问性？CSS在1996年出现，用来解决上述的问题。通过使用CSS，你可以将一个HTML文件的内容与有关它的表现形式或风格的信息分离开来。这就使你可以应用准确的格式化并达到想要得到的版面设计，而无需使用可能会让屏幕阅读器和专门的浏览器软件产生困惑的HTML代码。例如，虽然HTML表格是用来排列表格式数据的，但他们也经常被用来排列对齐一个页面上的元素的。但是阅读器和例如语音合成器的软件要求有效的HTML代码。因此当他们遇到一个页面错误地使用了诸如一个表格的元素，产生的结果就会让使用者感到莫名其妙。CSS的另一个可访问性的优点就是它允许使用者定义他们自己的风格单，这个风格单可以与网站的风格单共同工作。因此，例如一个使用者可以设定，所有通过标签定义的文本都应该是1.5em Arial，即使这个网站的风格单表示