论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > div+css布局教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准,xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

{XHTML}HTML高级教程亲和力的连接

文章类别:div+css布局 | 发表日期:2008-9-26 11:42:24

tabbing浏览

不或不能使用指点设备的用户可以用快捷键tab键来打开连接,并且本身也要有逻辑tab顺序。尽管HTML是线性的,tabindex属性答应你定义它快捷键们的顺序,而且这些逻辑tab应该可以自动落入自己位置。

快捷键

快捷键可以通过键盘的特定按键进行更方便的导航(当按住Alt键或者Ctrl键时获得焦点)。对于那些没有指点设备的用户,比起使用tab键操作连接更快捷,更方便。

没有必要为每一个连接都设置快捷键,但为主要导航连接都设置是一个不错的主意。

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
<a href=\"somepage.html\" accesskey=\"s\">Some page</a>

注重

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
快捷键的麻烦是,用户经常没有办法知道它们在哪里和到底是什么键(除非查看源代码)。虽然JAWS──一个可以大声读出快捷键的屏幕阅读器,但要掘尽其能,你还是得让快捷键更直白。
你可以使用像“跳过导航”的连接技术(下详),或者选择一个独立的页面来说明你网站的这些易用性相关功能,包括快捷键。一个越来越流行的办法是在一个与快捷键相一致的字母上加下划线,类似于Windows程序菜单中的方法。

连接的标题

为连接添加标题属性title是一个好主意,这会给用户所指向连接的予说明,所以能改进导航。

假如这个连接是执行Javascript的,这也有利于为没有使用Javascript功能的用户解释什么将会(或不会)发生。

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
<a href=\"#\" onclick=\"opennastypopup()\" onkeypress=\"opennastypopup()\"
title=\"Open a nasty Javascript pop-up window\">Monster</a>

弹出窗口

说到Javascript弹出窗口,你要坚持使用的话,或者很多人(你的用户)告诉你要使用,你可以用onkeypress和onclick来使得页面更易用。并且,在功能上定义了返回false的弹出窗口,包含一个带有href属性指向普通页面的连接,对于一个没有使用Javascript功能的用户来说,可以以普通方式载入这个页面。

比如:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
<script type=\"text/javascript\">
function opennastypopup()
{
window.open(\"monster.html\", \"\", \"toolbar=no,height=100,width=200\");
return false;
}
</script>
...
<a href=\"monster.html\" onclick=\"return opennastypopup()\" onkeypress=\"return opennastypopup()\">Monster</a>

相邻的连接

相邻的连接应该至少用空格隔开,以便为屏幕阅读器清楚辩明。
这也可以用字符来完成,连接之间的(比如竖线 |── 连接 | 连接),或者包围连接的(如中括号 [] ── [连接] [连接])。把连接放在列表里面也是一个好主意。然后可以用CSS来样式化显示,甚至可以是并行的列表(用 display: in-line)。

跳过导航

你应该让使用屏幕阅读器的用户一个跳过导航直接到内容的机会。这是因为,假设你的连接是固定的(应该是),用户不必经受每一页同样的信息,尤其是大量的。你可以设置一个连接,跳过导航直接跳到内容的连接。

看起来像是这样的:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
<div id=\"header\">
<h1>The Heading</h1>
<a href=\"#content\" accesskey=\"n\">Skip navigation</a>
</div>
<div id=\"navigation\">
<!--loads of navigation stuff -->
</div>
<div id=\"content\">
<!--lovely content -->
</div>

显然,你没有必要在可视化浏览器中显示它,所有你可以用CSS开隐藏它。

注重

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
这是虽然只是一个CSS的小技巧,但是“跳过导航”的特效药。这涉及到隐藏连接的方法。
最常见的办法可能是使用display: none,但有些浏览器看到但不理解这个连接,“跳过导航”的连接必须显示。
然而没有必要显示──没有理由显示给醒目的用户。所以坚持使用包含display: none的样式,还不如把元素宽和高设置为零(width: 0; height: 0; overflow: hidden;),这有相同的视觉效果,但可以使屏幕阅读器理解。

视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058