这里是跨境电商运营小白的分享~,

本人电子商务毕业,跨境运营一年 经验,涉及两个行业大类目的运营,实现两个月询盘增长43%,目前还有很多困惑和问题,希望能与大家多多交流学习呀~

dreamweaver怎么连接两个网页(巧用Dreamweaver实现一图多链接效果)(1)

实现步骤:

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

dreamweaver怎么连接两个网页(巧用Dreamweaver实现一图多链接效果)(2)

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

dreamweaver怎么连接两个网页(巧用Dreamweaver实现一图多链接效果)(3)

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

dreamweaver怎么连接两个网页(巧用Dreamweaver实现一图多链接效果)(4)

dreamweaver怎么连接两个网页(巧用Dreamweaver实现一图多链接效果)(5)

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

dreamweaver怎么连接两个网页(巧用Dreamweaver实现一图多链接效果)(6)

dreamweaver怎么连接两个网页(巧用Dreamweaver实现一图多链接效果)(7)

dreamweaver怎么连接两个网页(巧用Dreamweaver实现一图多链接效果)(8)

dreamweaver怎么连接两个网页(巧用Dreamweaver实现一图多链接效果)(9)

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

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

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

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

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

dreamweaver怎么连接两个网页(巧用Dreamweaver实现一图多链接效果)(10)

dreamweaver怎么连接两个网页(巧用Dreamweaver实现一图多链接效果)(11)

dreamweaver怎么连接两个网页(巧用Dreamweaver实现一图多链接效果)(12)

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

dreamweaver怎么连接两个网页(巧用Dreamweaver实现一图多链接效果)(13)

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

注:

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

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

dreamweaver怎么连接两个网页(巧用Dreamweaver实现一图多链接效果)(14)

好了,

到这里,就结束啦,

有不明白的欢迎私戳~

,