怎么对中国电子地图地图切片,就像这样的

新手必看 切片?OUT啦!一步步教你用DW做无缝广告
店铺装修里最重要的一个环节就是商品广告图片的处理了,对一张内有数个商品的图片进行链接处理,如果只是单单对一个图片做一个链接,是不是觉得包含多个商品的图却只加一个链接,太影响推广效果呢?!辛辛苦苦做出来漂亮的图片被客人看见却没有入口是不是很尴尬呢?!
我相信绝大部分的新手卖家朋友们一定会都学会了如何用PS的切片工具来实现对&一张图&做多个链接的效果吧,对一张图进行切割,再把每块切下来的图做上链接后用HTML代码组合在一起!!
但是它的操作是不是很繁琐呢?需要把一张图片来回的切割几片甚至几十片!如果遇上类似下面这样不规则的广告图,你还有对他进行切割的想法吗?
首先在制作之前大家要准备好待加工的图片
待切图片&&&& 如图
&我就简单的用PS对其进行了下切割(效果如下),就有35个切片了,想想后期处理吧,还要上传图片替换35个图片的链接,好麻烦的说
使用PS切得效果图&& 示例图
如果将来想对其中某个或某几个商品进行修改,又要进行一遍这样的操作,是不是太麻烦了
有没有简单的操作方法呢?
答案当然是有的啦~~~ 这就是我们今天的主题嘛!
与以往不同哦,PS现在只能沦为辅助工具了 用来制作图片了,切图还是DW更实用。
DW是一款所见即所得网页编辑器,是一套非常专业的功能强大的可视化网页开发工具!虽然是一款网页开发工具,但这里我们只使用到了它的一个功能&&热点工具!!!
使用热点工具才能真正的实现对一张图片添加无限的链接哦!!
下面要睁大你的眼睛看清楚喽!
说明:不管亲们是用PS做成的,还是美图,还是可牛等其他软件做出来的都可以用DW来切。哪个鞋子需要链接我们就给它加上链接,某一个或者一段文字都可以加上您想要让它出现的链接。
DW切图具体操作步骤 超级的简单Super simple小朋友都会哦
第一步:(下载) 先要去下载DW这款软件,网上很多,跟PS一样,一搜一大把!
第二步:(安装) 安装完成后打开DW这款软件(我这里用的是CS4版本的)!会提示你新建一个项目,这里当然选择是的淘宝支持的HTML啦!
点击进入HTML页面&&& 如图
第三步:(删除代码和添加图片)
a.新建HTML后,选择拆分,将下面无关的代码全选删除!
&删除无用代码&&& 示例图
b.再点击菜单栏的插入&&图像,插入一张我们想要做链接的图片!(会弹出一个&图像标签辅助功能属性&和对话框,直接点取消就行)
&添加打开待加工图片&&& 如图
现在就能看到我们插入的图像和代码了!
第四步:添加热点
下面我们要对图片进行操作了,这个时候代码对我们暂时没有用了,可以切换视图为设计(在第三步中拆分的右边可以看到)!
单击图片,可以看到下方出现了图片的属性,在属性左下角圈圈里面就是热点工具。
所画的工具就是热点工具哦!主角上场了
&热点工具&& 如图
可以看见热点工具有方形、圆形和不规则图形,用这三种样式还怕给那些不规则的图形做链接吗?!
下面就开始才图上加上热点了!
根据图片的形状和你要加链接的范围选用不同的热点工具!
a.点选一个方形热点在图片上想要加链接的范围画上一个框,然后在下方属性栏的链接里写上你要添加商品的链接!这样,一个商品的链接就做完了,是不是很方便呢?
添加热点和链接&& 示例图图&
圆形的应用和方形是一样的,比较规则!
b.不规则的范围就要用不规则图形来选取了,只要在商品图片的周围点上几节点把商品包围起来就行了!!
以此类推,把其它的图形都照这个方法做一遍链接!
给逐个宝贝添加热点&&& 示例图
有几点注意的:
添加热点的范围尽量不要叠加在一起哦,中间要有点间隙!
添加热点范围如果有误,可以点击选取工具,单击那个热点,按DEL键或是退格键删除热点!
热点修改工具&&& 如图
亲们也可以对热点范围进行修改,点击选取工具,再点击你要修改的热点,被选中的热点周围会出现明显的节点哦!再点击节点进行拖拉来修改范围!或是点击不规则热点图形工具来增加节点!
热点范围修改&& 示例图
热点添加完成&&& 如图
OK! 下面开始更换图片img地址和地图map地址
就是要把图片的地址换了,因为你现在用的是本地的图片,需要上传到淘宝相册后,替换成网络图片地址才能正常显示哦!
1.把视图转到拆分或代码,把图片的链接替换成网络图片的链接就行了!
&更换图片img地址&&& 示例图
&2.把地图map地址更换成map1或者map2等(后面随便加上字母或数字)
因为有些卖家朋友可以会用这种方法在同一页面里使用多次,比如店招用了热点,宝贝描述里也添加了热点的模块,如果不对代码区分是会产生冲突导致模块里的热点混乱哦!
一点非常重要!!!代码冲突的问题!
区分的方法很容易,只要把map name的名字换不一样的就行了,默认都是Map
更换地图map地址&&& 示例图
&把默认的Map后面随便加个数字或字母!上图加的是1,这两个Map都要改一样的哦!
或是直接单击图片,在属性栏里,直接改地图后面的Map1,(方法1和方法2)效果是一样的!
现在就要把代码放到淘宝上去喽!!!
第五步:(安装)
a.店铺装修&&添加一个自定义模块
添加自定义&& 如图
b.切换到编辑HTML源代码
点击进入HTML页面&&& 如图
c.把DW里改好的代码复制进去,保存发布!就OK啦!!
&粘贴保存代码&& 如图
看看是不是有效果了呢?热点是看不见的,鼠标放在热点范围内就会出现熟悉的小手指哦!这样只要一张图就能做出N多链接的效果,是不是很炫呢?
怎么样,感觉是不是要比PS切片来得容易呢!以后再复杂的图片也能做好链接了!
相比PS切片工具来说好处多了!
1.只需要上传一张完整图片(如果图片太大你可以用PS切片一下,在DW的里插入两张图片哦,操作如上述第三步,其它不变)
2.链接在热点范围选中后可以马上添加,方便快捷!
3.代码简洁、添加链接一步到位!用切片做不规则图片的卖家一定了解,有时一个商品会被分到不同切片里去,要每个切片都做链接,非常麻烦!
4.后期处理修改容易!后期如果要进行修改也很方便,因为是一整张图,只需要用PS进行改图,替换掉原代码里的图片地址就行了,如果热点范围有变的话只需要把淘宝里的代码复制出来,用上述第四步说的选取工具对热点的范围重新选择,再替换回去就行了!
&&&&&&&&&&&&&& 效果更好!代码相对要简洁优化,提高了网页的加载速度,给客户更好的浏览体验,也不会有PS切片后&支离破碎&般的效果。
5.最重要的就是处理方便、大大减少了工作量不是吗?!!
&OK!这就是我要讲的做链接的一个方法了,好不好用你试下就知道了!!
祝大家一起生意兴隆,财源广进!!!!
注册时间:
楼主说的很仔细
就是不知道自己给学的会
最后编辑时间为
很实用,很巧,我昨天还在为这个问题而愁呢,这样确实方便 了很多哈!!!
支持,真不错!!!
最近一直在学ps,Img,对于DW还是陌生的,呵呵有空要操练操练。
不过目前我店里的位子都满的,各个地方做的目前还满意,不知道怎么修改才好。小郁闷!
最后编辑时间为
亲们可以自己去做下看看。按照步骤一步一步的进行,很简单的。
效果很实用哦
有学习到新的知识了,呵呵
这么好的帖子楼主可以申请加精哦,切片真的是太麻烦了,楼主这个学习了,谢谢
是很不错哦!楼主有心了!谢谢咯!但我下的DW都要注册的呀!没免费的?
谢谢楼主分享啊
妙啊,太妙了,支持
妙啊,太妙了,支持
看上去好好哦!我坐下来好好学习下!
我觉得应该挺好的!
不过我现在要做的第一步就是先PS制作一个有感觉的图片!(放上产品图)
然后下载DW,按照您说的一步步的来将图片链接弄上!这样看的话,确实是要比切片简单很多的呢!呵呵
多谢楼主分享了!
(以后做的细节过程中,遇到情况了在详细向您请教哟!)
最后编辑时间为
我觉得应该挺好的!
不过我现在要做的第一步就是先PS制作一个有感觉的图片!(放上产品图)
然后下载DW,按照您说的一步步的来将图片链接弄上!这样看的话,确实是要比切片简单很多的呢!呵呵
多谢楼主分享了!
(以后做的细节过程中,遇到情况了在详细向您请教哟!)
您好!13楼的 DW CS4版本的。 您去百度随处可下哦。都是免费的呢。
您好!18楼的。可以的哦。有什么问题可以随时来问我。大家共同分享 !
不错 楼主辛苦了写的好详细
我也是用DW做的热点链接
比PS切片要好用的多 最起码不会出现分隔符
顶起吧 给需要的朋友看到
楼主巧手,DW是什么软件啊& 全名& 准备去下载个 呵呵&&&&
学习了!好东西哦
我的店里99%的图片都是切片了,我的店打开的速度就飞快快~!每一个宝贝描述都切片了的。勤快一点一切都会好的~!
切片真的很实用 &我的店铺99%的图片都切片了 &打开好快的 &大家可以打开看看
不错。也顶一个。
挺不错的方法,我去做个来装修一下小店
不错& 嗯& 学习了 对以后 就有用了
窗外飘零的雪花,扑面袭来的冷风谱揍着冬日的寒冷。这个需要温暖的季节,谁会想起与天使同浴温暖。只有心怀悲怜的爱的使者才会知晓天使眼中的期盼。在大家的期盼下, 下面所列出的是曲珍-孤儿院的孩子们,不同的面孔给我们带来不同的感受,但孩子们都有一个共同的期望,那就是关心他们。在寒冬来临之即,我问孩子们有什么愿望,他们的愿望很简单,那就是想要一个属于自己的玩具,文具用品,过年衣服。这些对于我们这些生活条件好的同胞来说是多么平常的一件事啊。但对于这些孤儿来说却是他们新年最大的愿望,我想我们有能力去实现他们的愿望。希望看到此篇文章的朋友,同学,以及社会各界人士能满足孩子们的小小要求。请您选出一个孩子,实现他们的愿望吧
中国天下常熟童装中心!携手中国儿童少年基金会!我为山区的孩子送上最美的温暖!!!
童装淘宝网.专业童装批发,一手货源,专业的童装货源基地!淘宝网店:
使用有问题?
匿名回复(匿名回复的情况,大家不会看到你的身份)
点,您的助威点数还有点
提醒:评论最多输入30个汉字,不支持英文和数字geoserver如何进行地图切片并且添加几万点时很卡
[问题点数:100分,结帖人dpshui]
geoserver如何进行地图切片并且添加几万点时很卡
[问题点数:100分,结帖人dpshui]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
相关帖子推荐:
2014年2月 VC/MFC大版内专家分月排行榜第三2013年11月 VC/MFC大版内专家分月排行榜第三
匿名用户不能发表回复!|
每天回帖即可获得10分可用分!小技巧:
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN,不得违反国家法律法规。
转载文章请注明出自“CSDN(www.csdn.net)”。如是商业用途请联系原作者。

我要回帖

更多关于 中国地图高清版大图 的文章

 

随机推荐