当前位置: > 资源 > 常用软件 >

实现页面内超链接跳转功能(锚)——Dreamweaver初学者小技巧3
栏目分类:常用软件   发布日期:2019-03-08   浏览次数:

在浏览百度百科这类型网站时,通过点击目录快速浏览内容的方式非常受大家喜欢。今天我们就来看看这个功能在DW页面中如何实现。用到的是DW的锚链接功能。 通过点击章节名称快速到达对应内容所在位置 制作锚链接的思路是: 添加锚记--制作超链接 。没错,就是

在浏览百度百科这类型网站时,通过点击目录快速浏览内容的方式非常受大家喜欢。今天我们就来看看这个功能在DW页面中如何实现。用到的是DW的锚链接功能。

实现页面内超链接跳转功能(锚)——Dreamweaver初学者小技巧3

通过点击章节名称快速到达对应内容所在位置

制作锚链接的思路是:添加锚记--制作超链接。没错,就是这么easy!例如下图,是一个长页面,我希望通过点击左侧的章节目录而快速到达对应内容所在位置(以“第四章”为例)

实现页面内超链接跳转功能(锚)——Dreamweaver初学者小技巧3

 

1、首先将页面滚动到第四章内容所在位置,选中文本“第四章:超链接",打开代码视图,此时代码中的“第四章:超链接"也是被选中的,我们在这段文本的前后加上代码,即:<a name="no4">第四章:超链接</a>

实现页面内超链接跳转功能(锚)——Dreamweaver初学者小技巧3

添加锚标记

添加了代码之后,回到设计视图,在“第四章:超链接"文本之前会出现一个形状为锚的小图标,说明锚标记添加成功。

实现页面内超链接跳转功能(锚)——Dreamweaver初学者小技巧3

 

小提示1:我用的是dreamweaver2018,如果大家用的是低版本的软件,可以在常用工具栏中直接找到这个锚标记,即上图中圈住的那个图标形状,那么您将光标放在想要插入锚记的位置,点击工具栏的锚标记,就可以直接插入。

小提示2:锚标记必须命名,根据DW的规范和HTML语言的语法,锚标记命名不能出现中文。

小提示3:<a></a>是超链接标记,由于我们在<a name="no4">第四章:超链接</a>中没有设置链接的网页地址,所以文本没有呈现出带有下划线的超链接样式。

2、锚标记添加好后,回到页面顶端,也就是下图所示位置,选择页面左侧的“第四章”文字,再到属性栏的“链接”中输入# no4,然后就会看到“第四章”这几个字变成了超链接样式,OK,页内链接就做好了。保存并预览,就可以看到效果啦!

实现页面内超链接跳转功能(锚)——Dreamweaver初学者小技巧3

制作超链接

实现页面内超链接跳转功能(锚)——Dreamweaver初学者小技巧3

制作好的超链接文字

以上就是制作能够实现同一页面内跳转功能的锚链接,简单易学,希望能让大家有所收获。下一篇文章将讲解如何跨页实现定点链接,即跨页锚链接,感谢关注!

相关热词:

相关内容
js特效 教程 资源 资讯