首页 > 家居生活 > 电子商务 >

如何利用DW在一张图片中插入多个连接

来源:互联网 2023-02-20 16:11:32 464

联想到大家要准备装修店铺了,想到之前我老是在PS软件把宝贝模块等等弄好之后,还要切图什么的,实在是浪费很多时间,所以我弄个这个教程,操作也很简单,我会一个一个步骤操作给你们看Uct办公区 - 实用经验教程分享!

工具/原料

  • DW

方法/步骤

  • 1

    一.首先先找一张图片,随便一张就可以了,然后要上传要图片空间里面去Uct办公区 - 实用经验教程分享!

    二 . 打开DW软件,会出现要你新建个站点的,点击取消就可以Uct办公区 - 实用经验教程分享!

    如何利用DW在一张图片中插入多个连接Uct办公区 - 实用经验教程分享!

  • 2

    三.点击下图红框内的HTMLUct办公区 - 实用经验教程分享!

    如何利用DW在一张图片中插入多个连接Uct办公区 - 实用经验教程分享!

  • 3

    四.讲里面的代码删除掉Uct办公区 - 实用经验教程分享!

    如何利用DW在一张图片中插入多个连接Uct办公区 - 实用经验教程分享!

  • 4

    五.点击设计,在代码右边第2个Uct办公区 - 实用经验教程分享!

    如何利用DW在一张图片中插入多个连接Uct办公区 - 实用经验教程分享!

  • 5

    六.鼠标移到“插入记录”,会出现下拉框,点击“图像”,出现如图所示,选取所要添加链接的图片,点击确定Uct办公区 - 实用经验教程分享!

    如何利用DW在一张图片中插入多个连接Uct办公区 - 实用经验教程分享!

  • 5本页面非法爬取自百度经验
  • 6

    七.确定之后会出现一个对话框,点击如下图Uct办公区 - 实用经验教程分享!

    如何利用DW在一张图片中插入多个连接Uct办公区 - 实用经验教程分享!

    如何利用DW在一张图片中插入多个连接Uct办公区 - 实用经验教程分享!

  • 7

    八.确定之后会出现自己所添加的图片Uct办公区 - 实用经验教程分享!

    如何利用DW在一张图片中插入多个连接Uct办公区 - 实用经验教程分享!

  • 8

    九.单击图片,在左下角会看3个“热点工具”,分别为矩形,圆形和多边形热点工具,如下图Uct办公区 - 实用经验教程分享!

    如何利用DW在一张图片中插入多个连接Uct办公区 - 实用经验教程分享!

  • 9

    十.随便选取一个热点工具,我选的是矩形工具,点击矩形工具,将鼠标移到到图片上的时候就会出现个十字形的标志,出现就证明你已经点击了矩形工具了,然后圈选你所要加入链接的地区,如果圈选错误的话,点击圈选错误的地区,按ESC或Delete(删除)就可以了,有一点要记住的是,在弄热点工具在图片上进行圈选的时候,千万不能互相重合交叉在一起,不然会出现链接错乱等现象!Uct办公区 - 实用经验教程分享!

    如下图Uct办公区 - 实用经验教程分享!

    如何利用DW在一张图片中插入多个连接Uct办公区 - 实用经验教程分享!

  • 10

    十一.圈选后下面的属性框就会改变,如下Uct办公区 - 实用经验教程分享!

    如何利用DW在一张图片中插入多个连接Uct办公区 - 实用经验教程分享!

  • 11

    十二.如果下面的属性框不是上面所示的话,再次点击下你所圈选的区域就会有了Uct办公区 - 实用经验教程分享!

    Uct办公区 - 实用经验教程分享!

    十三.接下来是加链接,如下图,在属性框上可以看到一个“#”字,把“#”字删掉,然后把你所要加入的链接复制上去,比如http://www.taobao.com,加链接的时候,记住一定要有http://www.这个为开头,链接才会生效。如下图所示Uct办公区 - 实用经验教程分享!

    如何利用DW在一张图片中插入多个连接Uct办公区 - 实用经验教程分享!

  • 12

    十四.接下来大家可以看到在链接下面有个“目标”,点击下拉框,选择第一个“blank”是新窗口打开的意思Uct办公区 - 实用经验教程分享!

    如何利用DW在一张图片中插入多个连接Uct办公区 - 实用经验教程分享!

    如何利用DW在一张图片中插入多个连接Uct办公区 - 实用经验教程分享!

  • 13

    十五.以上步骤做好后,点击左上角的代码Uct办公区 - 实用经验教程分享!

    如何利用DW在一张图片中插入多个连接Uct办公区 - 实用经验教程分享!

  • 14

    十六.之前上传到图片空间的图片终于派上用场了,打开图片空间,找到上传的那张图片,点击链接,如下图Uct办公区 - 实用经验教程分享!

    如何利用DW在一张图片中插入多个连接Uct办公区 - 实用经验教程分享!

  • 15

    十七.回到DW软件,替换所圈选的图片地址,如下图,Uct办公区 - 实用经验教程分享!

    替换前 (图一)替换后(图二)Uct办公区 - 实用经验教程分享!

    如何利用DW在一张图片中插入多个连接Uct办公区 - 实用经验教程分享!

    如何利用DW在一张图片中插入多个连接Uct办公区 - 实用经验教程分享!

  • 16

    十八.弄好之后,可以按F12预览,不过要点击保存才预览的,默认预览的是IE浏览器,预览的时候红框内的地方有出现个橙色的对话框,直接右击对话框,选择第一个就可以Uct办公区 - 实用经验教程分享!

    如何利用DW在一张图片中插入多个连接Uct办公区 - 实用经验教程分享!

  • 17

    十九,确认无误后,将代码全部复制到店铺里面的自定义区域的源码里面就可以了,相信这个大家都会吧!Uct办公区 - 实用经验教程分享!

    如何利用DW在一张图片中插入多个连接Uct办公区 - 实用经验教程分享!

  • 注意事项

    • 以上是我所分享的内容,希望对大家有帮助. 做好一个淘宝店没有那么难

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!Uct办公区 - 实用经验教程分享!


    标签: 硬件淘宝利用图片连接

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码