1. 爱玩数码首页
  2. 投稿

dw锚点链接怎么设置(巧用Dreamweaver实现一图多链接效果)

实现步骤:

1. 下载dobe Dreamweaver的软件,(需要安装包,或进行安装指导的私我yo~)

dw锚点链接怎么设置(巧用Dreamweaver实现一图多链接效果)

2. 准备好要加多链接的处理好的图片,(这是我提前做的一个简图)

dw锚点链接怎么设置(巧用Dreamweaver实现一图多链接效果)

3. 打开Dreamweaver,选择新建HTML打开,

dw锚点链接怎么设置(巧用Dreamweaver实现一图多链接效果)

dw锚点链接怎么设置(巧用Dreamweaver实现一图多链接效果)

4.顶部菜单栏依次选择“插入”-“图像”,找到所保存的图像的位置,点击图片进来,依次点击确定,图片即进入设计视图下

dw锚点链接怎么设置(巧用Dreamweaver实现一图多链接效果)

dw锚点链接怎么设置(巧用Dreamweaver实现一图多链接效果)

dw锚点链接怎么设置(巧用Dreamweaver实现一图多链接效果)

dw锚点链接怎么设置(巧用Dreamweaver实现一图多链接效果)

5.点击设计视图下的图片,可见左下角出现热点绘制工具,因为我们提前准备好的链接框接近矩形,我们选择第一个矩形热点工具进行在图片上进行绘制,点击确认,手动在左下角添加

链接:希望点击动作执行后要跳转的页面,即链接地址;(这里我添加了百度的网址)

目标:链接页面的打开方式,一般选择_blank;

地址:填写该图片的核心关键词,防止加载失败,还有利于搜索引擎抓取。

填写后可见代码视图新增生成了几行代码,

dw锚点链接怎么设置(巧用Dreamweaver实现一图多链接效果)

dw锚点链接怎么设置(巧用Dreamweaver实现一图多链接效果)

dw锚点链接怎么设置(巧用Dreamweaver实现一图多链接效果)

6.同样的方法,将另一按钮做类似操作,直至完成所有的绘制,下图是该动作完成生成的所有代码,

dw锚点链接怎么设置(巧用Dreamweaver实现一图多链接效果)

7.将生成的代码复制,放到大家在设计中源代码模式下的代码中,即实现效果,

注:

A.这个一般针对电商同学们在详情设计中会用到的方法,复制代码之前,别忘了先把图片上传至图片空间/ 图片银行,将图片的地址进行替换,否则显示不出图片哦~

B.这个更多的用于关联营销,多图多产品加多链接的方法!

dw锚点链接怎么设置(巧用Dreamweaver实现一图多链接效果)

好了,

到这里,就结束啦,

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,请发送邮件至87172970@qq.com举报,一经查实,本站将立刻删除。

发表评论

登录后才能评论