文章分类 | 推荐文章 | 最新文章 | 热点文章 | 最新软件 | 精品软件 | 下载排行 | 推荐下载 | 免费看大片 | WPS | 杀毒软件
清风网络
首 页 软件下载 网络学院 数码学院
QQ 电脑入门 游戏 操作系统 图形处理 办公软件 媒体动画 精文荟萃 工具软件 网络编程 程序开发 网络技术 认证考试 网站建设 文章专栏
当前位置:清风网络学院网站建设Html网页HTML教程:建立有亲和力的超级连接
精品推荐
特别推荐
·用CSS控制浏览器的滚动条
·marquee标记的用法
·HTML语言:什么是Unicode 什么是UTF-8
·XHTML编写网页代码的七条基本规范
·HTML和XHTML的区别
·HTML语言:什么是Unicode?什么是UTF-8?
·HTML 和 XHTML 区别
·HTML标记全集
·分析比较:三种简洁的Tab导航简析
·HTML教程-HTML简介
·网页Web标准化教程关于表格的应用
·网页代码常用小技巧总结续,网页制作学习
·HTML 标记参考手册
·用htc实现html编辑器
·HTML 4.0 语言快速入门参考教程
·初学:什么是DIV+CSS?有什么优势?
·网页制作实例CSS用一张图片实现圆角
·DIV CSS网页布局学习中容易出现的问题汇总
·HTML标签语义 科学合理的运用HTML标签
·53个CSS-不可或缺的技巧
热点TOP10
·弹出窗口代码集萃
·html教学+HTML语法大全
·图片左右循环连续滚动代码,解决marquee的留白问题
·网页设计基础:Div+CSS布局入门教程
·下拉列表框1下拉列表框2(HTML版)
·HTML标记全集
·解析Html页面:HTML Parser的试用
·在HTML网页中添加WMV格式播放器代码
·中国地区三级联动下拉菜单代码和示例(附带代码下载)
·53个CSS-不可或缺的技巧
·HTML 标记参考手册
·页面显示问题
·用层模拟下拉列表框
·CSS标准网页设计UL和DIV使用的技巧总结
·可移动层的实现示例
·CSS 制作的三级菜单特效代码
·兼容标准XHTML的浮动层特效实现
·HTML及XML语言的转义字符
·HTML 4.0 语言快速参考
·分析比较:三种简洁的Tab导航简析

网页HTML教程:建立有亲和力的超级连接

日期:2007年7月6日 作者: 查看:[大字体 中字体 小字体]


tabbing浏览

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

快捷键

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

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

<a href="somepage.html" accesskey="s">Some page</a>
 
注意

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

连接的标题

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

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

<a href="#" onclick="opennastypopup()" onkeypress="opennastypopup()"
title="Open a nasty Javascript pop-up window">Monster</a>

弹出窗口

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

比如:

<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 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开隐藏它。

[1] [2] 下一页 




上一篇:网页HTML教程:介绍span和div标签的使用

下一篇:HTML网页设计中关于字体设计的详细讲解

网页HTML教程:建立有亲和力的超级连接 相关文章:
·photoshop修改照片成为美女教程
·全方位性爱教程大全
·WindowsXP超级技巧
·Windows XP的20个超级实用技巧大全
·为什么iexplore.exe在打开网页时CPU使用会100%?
·DIV CSS网页布局实例:十步学会用CSS建站
·非主流ps教程实用的技巧大全
·Photoshop抠头发高级抠图教程
·流光破解ftp密码教程
·红色警戒2:尤里的复仇 超级武器人渣法 - 游戏秘籍
网页HTML教程:建立有亲和力的超级连接 相关软件:
·孙鑫VC++从入门到精通开发详解视频教程FLASH版
·黑客视频教程 VMware虚拟机的安装和使用
·刘天礼 吉他视频教程
·计算机基础知识教程
·美工设计教程
·大师之路Photoshop教程V2.0
·招聘面试技巧 视频教程
·Dreamweaver 网页设计
·主板BIOS设置 视频教程
·黑客视频教程-灰鸽子远控使用教程

特别声明:本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载,但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站,我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员,我们尽快予以更正。
[打印本页] [关闭窗口] 转载请注明来源:http://www.viphot.com
| 帮助(?) | 版权声明 | 友情连接 | 关于我们 | 信息发布
Copyright 2007 www.viphot.com All Rights Reserved. 鄂ICP备05000083号Powered by:viphot