网站用户体验整合设计-创建锚链接

创建锚链接

Post by 张美工, 2008-11-1, Views:

　　锚就是在文档中设置位置标记，并给该位置一个名称，以便引用。通过创建锚点，可以使链接指向当前文档或不同文档中的指定位置。锚点常常被用来跳转到特定的主题或文档的顶部，使访问者能够快速浏览到选定的位置，加快信息检索速度。
1、设置锚点
　　把光标置于文档窗口想要设置锚点的地方，点击插入面板中”常用”／”常用锚记”。在弹出的对话框中起一个锚名字。
2、创建锚点链接
　　选择要建立链接的文本或图像，在属性面板的链接中输入一个#号和锚点名。例如：#aa。要链向不同页面中的锚点，则点击链接边的文件夹小图标，在打开对话框中选择要链接的文件，按"确定"键后在"属性"面板的链接栏中会显示链接的文件地址，在地址后面紧跟着输入＃号和锚名字。

　　我已经在本页的结尾处放置了以上锚代码以进行演示。现在，如何链接到这个锚呢？您只需使用：

< A HREF="#anchor">第一部分
请注意锚名称前面的 # -- 这非常重要！此代码将在您的网页中显示“第一部分”，单击它会将您带到同一网页中放置了这个锚的位置。

对于下面的示例，这是我们用来创建锚链接的代码。添加了几行 sample text 以显示一种跳转至底部锚的更有效的演示方法：

< a href="#anchor">第一部分

sample text

sample text

sample text

sample text

sample text

sample text

sample text

sample text

sample text

sample text

sample text

sample text

sample text

sample text

< a name="anchor">到此结束！

以下是此锚在您的网页上的显示结果。继续，然后单击链接：

第一部分

sample text

sample text

sample text

sample text

sample text

sample text

sample text

sample text

sample text

sample text

sample text

sample text

sample text

sample text

到此结束！

使锚返回到网页的顶部也是很有用的，这样如果访问者想返回到顶部，只需单击它即可。只需使用一个不同的锚名称，然后将它放置在网页的顶部！单击下面的链接返回到该网页的顶部

相关文章：　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
# Dreamweaver的超级技巧汇总(6)
# Dreamweaver的超级技巧汇总(5)
# Dreamweaver的超级技巧汇总(4)
# Dreamweaver的超级技巧汇总(３)
# Dreamweaver的超级技巧汇总(2)
# Dreamweaver的超级技巧汇总(1)
# 在线QQ MSN TEL交谈工具代码
# 方便使用的一些小简短input\form代码
# VSS使用手册
# JS表单判断函数代码大全 (三)
# JS表单判断函数代码大全 (二)
# JS表单判断函数代码大全

# I E和火狐的css兼容性问题归总

# 体验css+div 之　CSS hack:区分IE6，IE7，firefox

# 体验css+div 之兼容标准XHTML的浮动层特效实现

# 因为编码差异导致IE6不能正常解析CSS文件

# 商业网站响应用户需求重视与Firefox兼容

# frameset 的属性
# frameset元素属性详解、浮动框架的制作、超链接与框架的制作

# 体验css+div 之 SEO

# 40个网页常用小代码

# div+css样式几个小精华

# 网站用户体验--CSS常用小技巧

# 体验css+div 之 css技巧-经典中的经典

# 体验css+div 之 CSS样式表设计的十条技巧

# 体验css+div 之网页切图过程中div+css命名规则

# 网站用户体验--根据项目需求定义常用CSS2基本定义例子
# 体验css+div 之三种使网站背景图片自动适应浏览器大小的方法

# 创建锚链接

# 如何让单行文本框input与多行文本框textarea背景透明

# 用EditPlus转化文件格式到UTF-8
# 让长字符URL/Email自动换行

# HTML特殊字符显示

# 体验css+div定位与table定位代码的差异
# 体验css+div 之 TBody是什么意思?有什么作用?<TBODY>和<BODY>有和区别？

# 体验css+div 简单的滑动门效果代码

# 体验css+div 超实用的滑动门效果代码（css和代码都包含在内）

# 彻底弄懂CSS盒子模式(DIV布局快速入门)

# 如何把握网页布局
 # 实例详解CSS网页布局原理

# 体验CSS+DIV 之基本布局

#  体验css+div 之解决流体布局的问题
#  体验css+div 之固定宽度布局、流体布局、弹性布局的优势对比＜弹性布局＞
#  体验css+div 之固定宽度布局、流体布局、弹性布局的优势对比＜流体布局＞
# 体验css+div 之固定宽度布局、流体布局、弹性布局的优势对比＜固定宽度布局＞

#  体验css+div 之为什么css+div 会盛行
#  体验css+div中id和class各自的用法及区别

# 体验css+div 之规划、组织和维护样式表

# 体验css+div 之基本列表样式

# 体验css+div 之为样式找到目标

# 体验css+div 之圆角框

# 体验css+div 之层叠和特殊性
# css之自动换行

# CSS控制连续英文字母或数字强制换行

# 让css使网页图片半透明

# 体验css+div 之背景透明内容不透明的写法
# 体验css+div 之给整个页面添加渐变背景
 # 用css样式控制做成的按钮,取代图片按钮

# 体验css+div 之鼠标经过按钮发生变化效果
# 体验css+div 之文本框自适应窗口宽度
# 体验css+div 老问题重新讲“怎样使页面整体居中”
# 体验css+div之图像替换 1.徽标图像替换
# 体验css+div 之使用自动空白边让设计居中

+

Tags: 锚链接

分类:网站设计 | 评论:0 | 引用:0

上一篇：frameset 的属性
下一篇：用EditPlus转化文件格式到UTF-8

或许你还对下面的文章感兴趣

Comments

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。

最新文章

最新评论

Guest