学习网页制作：网站制作十大原则

用 IE 打开各自的站点，从头向下看，乍一看两个站点格局类似--毕竟是竞争对手嘛，连主色调都有些雷同。先引起我注意的是淘宝首页的主导航条，居然是图片做的(分别是“我要买”、“我要卖”、“我的淘宝”、“社区”这四个)，而且，那几个图片看起来也不是很漂亮，尤为严重的是，鼠标移到图片上看看，哦，很不好，没有用到 "Alt" 这个对图片非常重要的HTML 标记。这对搜索引擎来说，不是很“友好”。看看易趣，主导航条处理的还算不错，看上去舒服一些，当然了，也是用图片做的(有趣的是，易趣的导航条如果不用图片也能做出来一样效果的)，不过鼠标移过去可以看到图片的说明(导航条的图片用了 "Alt" 标记)。从这一点来说，易趣的页面设计似乎稍稍强那么一点点。

在易趣站点导航条的上方，我看到了站点地图(Sitemap)，找遍了淘宝的页面，我没有发现这个比较重要的站点内容。一个精心制作的站点地图对来访的用户和来访的搜索引擎机器人来说，都是很有参考性的。

既然前面说到了 Alt 标记，不妨接着看看这两个站点整个页面对图片的标记情况。通过 Mozilla Firefox 的 Pageinfo 工具，淘宝的页面内共有图片 80 个(会有一点点误差)，不过只有 4 处用到了 Alt 标记。易趣呢，61幅图片，设置了 14 个 Alt 标记，但有内容的只有 7 个。另外一半的标记内是空的。这里所说的两个页面时间以 2004年12月13日22:00 为参考。检测工具是 Firefox 1.0。

上一步的比较我用了 Firefox ，需要说明一下各自在 Firefox 里的显示情况 的是，易趣在页面在 Firefox 中有了不好的表现：无法正常显示。页面出现了变形。估计是设计的时候没有针对不同的浏览器进行测试，也反映了页面代码设计的结构不太好。而淘宝的页面在 Firefox 浏览器中显示良好。得了一分。

通过 Pageinfo 工具我们了解到，淘宝的页面编码是 "GB2312",而易趣用的是 "UTF8"，从这一点上如果要说个谁优谁劣有点牵强，但是要肯定的是 UTF8 的扩展性更好一些，这一点应该也和易趣(ebay中国)前一段时间和 ebay.com 总站进行整合有关。

开始看看这个两个站点的 HTML 的源代码。易趣的站点源代码，哦，居然有好大一段 CSS 在那里，复制并粘贴到写字板中，居然有 1,693 字节之多。对于一个大型电子商务站点来说，这个是大忌！想想看，每个页面如果能省下来 1,693 字节,那么一天要节省多少流量? 而如果每个页面都要多解析 1,693 字节，无形中会浪费多少金钱呢? 淘宝在这一点上处理的还算可以，页面中没有看到单独的 CSS 段落。

回想自己从事Web方面的开发已经有6-7年，对于各种Web技术都已经非常熟悉.可是,身为程序员的我对于制作Web表单界面的事着实心痛。

心痛１：很多后端代码和逻辑要写，可我还不得不费力的在各种网页制作工具中拖放控件放到美工提供的美术模板中。再配上css写上javascript。表单大一点够我弄上一整天。

心痛2：表单这东西，不是老手还干不了，又要漂亮又要有功能所以要和各种各样的table,td,div,javascript,css打交道。稍微不注意，显示效果就和所想的不一样，最后这种事情全成了老手门的活了。新手反只能在旁边看着。

心痛3:……哎不写了。今天不全是来抱怨的。

今天和大家分享一下我所了解的各种语言和平台中表单制作比较好的方式：

基本方式：在平台如ASP.NET中可以使用Visual Studio .NET工具制作表单，在java平台下的jsp中的表单可以使用JBuilder或是Eclipse制作表单，这些工具都提供了可视化的,即见即所得的编辑方式，但此类工具都常偏重于给程序设计，所以要制作一个漂亮的界面，基本上都需要使用工具中的原码编辑来制作。程序编码效率虽然很高，可是很难达到一个美化效果。

Visual Studio .NET工具界面

Eclipse工具界面

推荐方式一：借助DW工具。

　　DW也就是由macromedia出品的Dreamweaver。Dreamweaver家族一直是Web美工的最爱，也是目前最强大的网页制作工具之一。DW其实对程序人员有一个好处，无论希望制作任何语言和平台下的表单，DW中都可以做到，更重要的是DW能满足任何美术要求下的表单制作。

　　DW工具界面

　　随着企业intranet和国际internet的迅速发展，越来越多的工作流程，商务交易，教育、培训、会议和讲座，以及个人消费娱乐都被转移到所谓的万维网（World Wide Web，以下简称WEB）上来了。与此相对应的是交互操作的复杂性越来越高。

　　随着Browser/Server模式的日渐流行，很多操作都是在浏览器环境下的网页上完成的，并不是只有失效的链接和意外的出错才会使操作者感到烦恼，即便是一次完整的成功操作过程，也可能因为操作的繁复性过高或者使用上的不方便而给操作者带来不愉快的体验。

　　本文试图阐述WEB交互页面设计的一些指导性原则，这些原则有利于避免发生不愉快的操作体验。这些原则是用户友好性的，是在完成同一种操作要求下，使用户最感到轻松、简单、舒适的WEB交互界面设计原则。我们假定我们讨论的WEB页面都是功能正常的，符合美学观点的。需要说明我们讨论的原则可能会和设计上的美学观点以及既有的功能设计有所冲突。如果发生这种情况，基于“实用的就是美的”观点，我们会建议您酌情放弃原先的美学观点与功能设计。

　　1． 输入控件的自动聚焦和可用键盘切换输入焦点

　　使用JavaScript实现页面加载完成后立即自动聚焦(focus)到第一个输入控件。可用TAB键（IE缺省实现）或方向键切换聚焦到下一个输入控件。

　　输入控件指WEB页面表单(<form>)中显式的，需要用户进行修改、编辑操作的表单元素。对于这些控件，如果没有自动聚焦操作，不可避免的出现一次用户鼠标定位操作（如果用户此前处于键盘输入操作状态或鼠标定位后需要进行键盘输入操作，实际上是键盘鼠标切换操作）。如果鼠标定位后需要进行键盘输入操作，如果不能键盘切换输入焦点，那么不可避免的在切换输入焦点时需要反复的键盘鼠标切换操作，这是很繁琐的。

　　如果实现了页面加载完成即自动聚焦到第一个输入控件，并且可以键盘切换输入焦点标定位操作，那么对于用户来说整个页面的输入操作可能都不需要鼠标操作，或次数较少，这是一种便利。毕竟频繁的键盘鼠标切换操作是比较累人的。

　　对于有输入栏的对话框或网页，在不干预的情况下就应将当前控制焦点定位在待输入的输入栏上；如果输入栏在一般情况下不需要更改其中的内容，则应直接将焦点定在“确定”按钮上；在几个输入栏之间应支持tab，shift+tab切换操作，“确定”和“取消”应该是切换操作的终点，与具体所在位置无关。

　　2．可用Enter（或Ctrl＋Enter）键提交，确保和点击提交按钮的效果是相同的

　　不要在提交按钮上加入onClick=”…”这样的JavaScript代码。

　　用Enter键提交页面是原则1的自然延伸，而且这也是浏览器所缺省支持的。只所以单独列出来是因为实际上有些设计者设计的页面不能达到这种效果，结果导致使用Enter键提交和点击“确定”按钮提交带来的效果不一样。大部分情况下是设计者在“确定”按钮上加入了onClik=”…”这样的代码，通过点击“确定”按钮后，会执行一段JavaScript代码，比如对某些hidden类型的input元素设值。而使用Enter键提交时就不会执行这段代码。

　　正确的做法是把这段代码移到表单标签<form>中，以onSubmit=”…”属性引入。

　　对于<textarea>表单元素，它会消耗Enter键，因此会使得Enter键提交失效。可以引入JavaScript代码捕捉Ctrl+Enter复合键，一旦捕捉到即执行表单的submit()方法。对于需要频繁提交的场合，比如BBS上，这种代码是很有必要的。

　　3． 鼠标动作提示和回应

　　对用户的鼠标定位操作，当移动到可响应的位置上时，应给予视觉或听觉的提示。

　　动作回应的最简单形式就是鼠标ICON变成手状。浏览器只对具有href属性的HTML标签会自动进行这种变换ICON的行为。对于没有href属性（或没有设置href属性）的标签，可以通过JavaScript设置style属性的cursor为hand。

　　目标区域发生变化是更为主动的响应形式。当鼠标指针移到目标区域，此时指针图形改变或文字颜色发生改变均能较大的减轻用户搜索定位目标区域的注意力负担。在按钮上增添直观的图形，尽可能的增大按钮面积；按钮间保持适当的距离，太近增加了用户区别它们之间界限以防误操作的负担，太远增加了用户搜索定位按钮的负担。

　　4．尽可能早的在客户端完成输入数据合法性验证

　　输入数据的合法性检验应该在客户端使用JavaScript进行验证。除非验证只能在服务器端完成，否则验证工作应在最早能完成的情况下进行。

　　在客户端完成数据合法性验证，可以避免一次服务器请求和回复通讯，这种通讯是需要用户等待的，如果用户等待很长时间后从服务器返回的结果提示出现的错误是在输入时即可发现的，那么这种设计就是不友好的。诸如密码长度限制，用户名允许字符限制等等，显然应该在客户端提交前就应该进行验证。