当前位置:文档之家› 一图多超链接

一图多超链接

(不要在这里做广告啦,在做就要求管理员删帖封号)第一章节怎样制作一张图上有多个宝贝超链接的代码,非常简单。

大家是来学习的,废话我就不多说啦,现在就开始吧!Let’ go……
∙首先去下载一个“可牛影像”(俗话说的好,“欲那个什么,就必先利其器”),这是一款图片编辑软件,属于傻瓜式的,和光影魔术手、美图秀秀类似,也是免费软件,里面很多素材会经常更新的。

∙打开软件后可以看见(如图1)这2个椭圆的地方都可以直接打开一张本地图片进行编辑,在方形标注的地方可以新建一个您自己指定尺寸的图片背景,颜色也可以设定,如图2.
图1
图2
简单的熟悉了一下软件,下面我们来做多图效果。

随便打开一张你电脑里的图片,当然你可以打开你要编辑的图片了,这个无所谓,因为稍后可以修改的。

打开图片以后找到左上角的“编辑”,点击一下,左边就会出现编辑类目如图3
现在进入主题,首先你要明确你是要创建规则的多图效果还是不规则的多图效果
如果做规则的效果就点击左边“多图拼贴”,此时会弹出一个新的多图编辑窗口,如图4
图3
图4
1处是显示所有小图片的地方,可以在这里批量添加图片,把它们组合在一起,点击马赛克的地方就可以更换图片了,不过更简单的办法是双击2处每一个黑色区域就可以快速的实现更换小图,这也是为什么当时打开第一张图
片的时候可以随便打开一张,因为这里可以随便更换你的小图。

把每个黑色区域都换上你想要添加的小图,这些小图的主体如果不是在中间,还可以拖动进行调整(建议准备小图的时候不要图片整体太大,而主体过小的图片,应该截取主体和背景比例都差不多的小图片)。

3处就是多图效果的参数啦。

图片间距是指2张图片之间以及边框的宽度,建议不要调的太大,调到3就差不多了;高宽比这个参数大家也可以试试,就会看见效果了,背景颜色是指刚刚我们提到的黑色区域,也就是最后图片的边框颜色啦,这个也很重要,因为如果整个多图效果是用在你的店铺装修上的,那请把颜色设置和你店铺风格颜色一致或相近的颜色风格,这样会协调一点。

背景大小其实就是指多图效果的图片尺寸啦。

注意:如果想调整到你想要的效果,需要和上面的宽高比参数一起设置,因为宽高比不一样,你尺寸调的一样,整个图片的效果也是不一样的,具体的大家可以调整一下试试看。

如果是把这个多图效果用在装修店铺的通栏,那就把宽高比设置成70::30,同时把尺寸的宽度设置成950(店铺通栏的宽度是950),高度就不要管了,因为宽高比和宽度设置好了,高度就是一个定值了。

4处是调整组合样式,也就是你想让你的多图组合是简单的一排多个的排列还是双排或者是其他组合样式,可以在这里选择,里面很多种类,针对你宝贝展现的主题进行选择,比如说如果是裙子想要人家看见整体效果就选择宽度比较窄,高度比较高的小图组合方
式;如果是短裤就可以选择小一点的小图组合,大家可以自己研究一下。

编辑好的如图5
图5
这些都设置好了以后就可以点确定啦,此时又进入首页状态了,这个时候可以直接点击保存啦,此时跳出保存参数设置,选择好保存的路径,名称和格式。

重要提示:如果你保存的是JPG的格式时,要把下面的图片质量调整杆调到最高值,这样才能保证你保存图片的清晰度。

现在说说不规则多图效果的创建
那就在打开一张图后点击左边的“自由拼贴”如图3,此时会弹出一个自由拼贴的编辑窗口,如图6
图6
a处是编辑背景色和前景色的地方,
背景色:是你的小图后面被填充上的颜色,如图6 c处的格子布背景。

背景可以在e处更换。

前景色:就是指你的小图啦。

在下面b处的地方可以随便添加你的小图。

在编辑区c处和d处可以随便调整图片的大小和旋转等。

重要提示:做自由多图编辑的时候,背景图片的尺寸(也就是你最终得到的多图效果的尺寸)是不能动态调整的,你只能在你的电脑上先做好你需要的
大小的背景,然后再这里更换掉就可以了。

都设置好了以后就可以确定保存啦。

大家在作图的时候还可以摸索一下其他比较实用的功能,比如添加特效文字,个性边框等等。

好啦,第一章节完毕,我下面教大家怎样用Dreamweaver给一张图上的宝贝添加超链接制作代码和店铺装修如何使用这些代码。

请大家支持并希望想学习的兄弟姐妹继续看下去!谢谢!
--------------------------------------------
第二章节新手装修必备之技术篇---制作宝贝多图效果图片代码
虽然文字有点多,但是很容易懂的
1.接着我上一篇“怎样用可牛软件制作多图效果”的姊妹篇,首先去下载一
AdobeDreamweaver CS4,这个网上有很多
破解版和绿色版的,我不知道这里可不可以发地址链接,为了安全起见还是不发了,如果你找不到,可以旺旺我,发给你。

专业的网页制作软件,“三剑客”之一,
主要是做代码。

Let'go......
首先打开软件看见的是初始状态(如图1),你可以从“文件”中新建,也可以直接点击“HTML”。

Dreamweaver功能很强大,因为我们要实现的是在一张大图上做多个宝贝的超链接,所以只用“HTML”这个功能就可以啦。

点击后出现如图2
的编辑状态
图1
图2
2.下面就是要插入图片了,在插入图片之前要把光标放在a或b的位置,然后点
击c插入“图像”,会弹出窗口,在这里找
到你电脑中做好的图片插入进去,支持多种格式的图片,但是考虑到淘宝允许的图片格式,我还是建议选择jpg、png格式的比较保险一点。

在这里我们选择上次做好的组合图片,选择好图片后会跳出来如图3和图4的窗口,不用管它,都直接点击“确定”,这样我们就把图片插入进去了。

图3
图4
下面我们选择整个窗口左下角的一个命令符号如图5,红色椭圆标记的命令就是“绘制矩形热点”(所谓热点就是可以点
击形成超链接的区域),我们这个图片上的宝贝图片主要是方形的,所以选择这个“绘制矩形热点”按钮,如果你需要
圆形或者不规则图形的热点,就选择篮筐中的其他两个命令按钮。

点击过之后的鼠标变成了十字架的形状,这时候说明命令已经在你的鼠标上了,我们可以把鼠标放在第一张宝贝图片的左上角,然后拖动,一直到右下角,松开鼠标,这个时候弹出一个会话窗口,不要管它,直接点击确定(选择不规则命令的时候需要在你的图片上连续点击几个点才能形成不规则热点区域)。

重要提示:如果大家找不到那3个图形命令可以在这里选择,如图6,红色框中的小三角有下拉菜单,3个命令就在这里面。

图5
图6
此时你图片下方的工具栏变成了如图7的样子,复制你这个宝贝所在的地址,粘贴到图7中红框标记的位置(先把里的#
号去掉)就OK啦!而你刚才设置的热点区域也已经是被点状蒙版盖住了,说明你选择的是这个区域的热点,等做好后,你点击这个区域的任何位置都会形成超链接,直接到你的宝贝页去。

用这样的方法把其他3个宝贝也做上热点,然后点击“文件”中的“保存”,随便保存在什么地方,等会删掉就好了。

然后点击键盘的“F12”进行效果预览,每个都点一下,如果超链接的导向都没有问题,说明你的操作都是正确的。

图7
3.现在复制Adobe Dreamweaver代码窗口里两个“<body>”之间的所有代码(如图8),粘贴到你新建的一个TXT文档中,保存。

如图9
图8
图9
这样我们的多个宝贝添加超链接的图片代码就做好了。

接下来我会写另一个姊妹篇帖子,教大家如何用这个代码装修我们的店铺,同时介绍图9中那3个地方为什么用椭圆标记!好了就到这里吧!手都酸啦!
首先感谢审帖老大的辛勤劳动,我申请时出了点错,还认真的帮我修改了,非常感谢!
帖子出来后很多人加我问我要软件,其实软件我已经在帖子里说了,网上很容易
找到的,自己去找一下,不要总让我发了,我也很忙啊!希望理解哈!现在我就把Adobe Dreamweaver CS4的地址贴出来,大家去这里下吧,不要再问我了哈!帖子里说过的我就不会再说啦,实际操作不懂的再问我吧!
另外再插句题外话,做淘宝是要坚持的,是要有克服困难的心才可以的,连个软件都懒得下载,能做好淘宝吗(个人观点)?祝大家愉快
/soft/1/95/2008/Soft_48689.html
今天有朋友说这个链接的软件序列号已经过期了,那大家就不要在这里下载了,我当时也就是在网上随便找的,大家也可以去网上找找,最好是那种破解版或者绿色版的,精简版也可以,其实都一样的。

另外继这两章之后的第三章教程也已经出来了,地址:/catalog/thread/154503-250710713.htm大家去看一下吧,希望对需要的朋友有所帮助。

相关主题