欢迎光临
我们一直在努力

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

在浏览百度百科这类型网站时,通过点击目录快速浏览内容的方式非常受大家喜欢。今天我们就来看看这个功能在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

制作好的超链接文字

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

 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

未经允许不得转载:英协网 » 实现页面内超链接跳转功能(锚)——Dreamweaver初学者小技巧3

分享到: 生成海报
avatar

热门文章

  • 评论 抢沙发

    • QQ号
    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址

    登录

    忘记密码 ?

    切换登录

    注册

    我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活