14.2  使用页面更易于使用

除了遵循标准，还应当创建易于使用的页面和网站。网上不乏这样的例子，你可能不得不绕着圈子去查找信息，或者看不到指向其他页面的链接，除非你认识到正在使用一些非标准形式的超链接。还可能遇到其他一些问题，比如读网站内容时很费劲，因为每个页面的设计和结构布局都不同，可能使用了奇怪的字体和颜色，或者某些页面有浮动窗口和其他随机特性。

好的网站应当遵循一致的设计，有一致的交互式元素样式。这样访问者才能顺利地浏览网站，得到舒适的体验。这也说明，用户能把重点放在网站内容上，更容易地发现他们想要的东西。这并不意味着你的网站必须单调沉闷，毫无新意，而是说应当使用一种一致的结构、布局、色彩方案和链接方式。

14.2.1  整体网站和页面设计

许多网站中在布局方面有一些常用的主题。菜单条放在最上面，链接列表或其他导航特性放在左边，文本链接放在每个页面的最下面，经常采用这种布局似乎会限制创造性，如果你愿意，当然可以使用一种完全不同的布局。不过，访问者能很快认出常用的布局模式，从而更容易使用你的网站。

另外，还要考虑用户的屏幕大小和浏览器窗口大小，二者可能并不相同。有些用户喜欢用最大化的浏览器，而另外一些用户则喜欢打开多个窗口，每个窗口都比总的屏幕要小。有些用户有纵向模式的屏幕，而大多数屏幕都使用标准或宽屏模式。另外，尽管屏幕分辨率还在提高，不过大多数用户还在使用1024 × 768或800 × 600。

屏幕分辨率的不同有一个影响，如果使用CSS或HTML表来定位元素，而不是依赖于HTML提供的自然流模式，就应当在低分辨率的屏幕中测试页面，并在非最大浏览器窗口中测试，以确保这样做不会影响内容的布局、外观和可读性。另外，还要检测长内容行是否能正确地自动换行，特别是使用了代码样式或<code>和<pre>之类预格式化的文本元素。

有些网站用以下办法解决屏幕分辨率的问题，首先确定主内容区的指定宽度，然后将该区域在页面中居中，使得（在高分辨率屏幕上）空区域出现在四周。这说明，这样可以在宽度为1024像素时总能一切正常，但是对于较低分辨率的屏幕会导致自动换行或过界，而高分辨率屏幕的用户则要做一些不必要的滚动（因为内容只显示在屏幕中央的一个范围内，而没有充分利用屏幕空间）。不过，由于长文本行很难阅读，这种方法也有它自己的优点。

最后，确定布局的最佳办法是：浏览大量网站，看看它们是怎么做的，在布局和整体页面结构方面是否提供了你想要的外观和功能。

页面布局和结构通常会影响残疾访问者（甚至其他用户）的浏览体验，本章后面就会介绍这一点。

14.2.2  控件、标题、快捷键和跳格顺序

在14.3节中你会看到，对于交互式控件（如文本框、列表框和单选钮）文本标题的位置有一些建议。不过，HTML 4.0及以后版本提供了一个有用的功能，构建使用了不同交互式表单控件（如列表、按钮、复选框和文本框）的页面时，可以将一个文本标签与控件关联。作为HTML和ASP.NET的特性之一，一定要尽量在所有页面中充分利用这个特性来提供更一致的行为，并满足尽可能多的用户的需求。

1. 将标题链接到交互控件

ASP.NET中的Label控件提供了一个AssociatedControlID属性，它会在Label控件创建的<span>元素中设置for属性，从而可以将一个标签连接到页面<form>上的一个交互式元素。例如，以下是一个Label和TextBox控件的声明，它使用Label控件的AssociatedControlID属性将这个Label链接到TextBox：

<asp:Label id="MyLabel" Text="Name" runat="server"

           AssociatedControlID="MyTextBox" />

<asp:TextBox id="MyTextBox" runat="server" />

在正常的图形化浏览器中，这没有任何影响。不过，这样就允许非可视的用户代理和专用页面读取器将它们链接起来，在用户导航到文本框时可以向户指示控件标题是什么。单凭这一点，就应该考虑一直使用Label控件并设置其AssociatedControlID属性。

对于生成一个HTML表的控件，如Table、GridView和Calendar，还可以使用控件的Caption属性来生成一个标题，标题会自动链接到这个控件（这会在<table>元素中创建一个<caption>元素）。

2. 实现快捷键

在大多数现代浏览器中，可以为控件定义一个热键或快捷键，然后在相关的标签中显示这个键，使表单更像是一个传统的Windows可执行应用（第10章了介绍过与Hyperlink控件联合使用的AccessKey属性）。可以将Label的AccessKey属性设置你想要的热键。还可以在Label文本中用下划线向用户指示这个热键：

<asp:Label id="MyLabel" Text="<u>N</u>ame" runat="server"

           AccessKey="N" AssociatedControlID="MyTextBox" />

<asp:TextBox id="MyTextBox" runat="server" />

这样一来，按下热键组合时（这里就是Alt+N），焦点会自动移到TextBox控件。同样，对于一个创建HTML表的控件，如GridView，可以设置其AccessKey属性，并在标题中将某个字母加下划线，指示这是一个快捷键。这两个技术将在本章下一节“支持残疾用户和专用用户代理”的示例中展示。不过，不能使用已经为浏览器的各种UI特性预定义的键。例如，不能在IE中使用Alt+T，因为这会启动Tools菜单。

3. 设置跳格顺序

默认情况下，按下Tab键时，浏览器会按控件在屏幕上出现的顺序将输入焦点从一个控件移动到下一个控件，先从左到右，再从上到下。如果使用一个表格将控件按列摆放，输入焦点会在行间移动，然后移到下一行。不过，可以设置TabIndex属性来控制跳格顺序。

如果TabIndex属性值为0（如果未指定，这是默认值），说明这个控件未设置跳格顺序。其他正值则定义了顺序。用户加载一个页面时，输入焦点首先设置到浏览器的地址栏，然后根据控件的TabIndex值在页面中的控件间移动（TabIndex值从最低的非0值开始）。之后，对于余下没有设置TabIndex值的控件，输入焦点会按控件在页面上出现的顺序移动。

所有ASP.NET Web控件都有TabIndex属性，不过它对于不接收输入焦点的控件没有任何影响。但要记住，除了较常见的文本框、列表和按钮控件外，这也应用于Hyperlink和LinkButton等控件。同样地，这个技术也将在本章下一节的示例中展示。