在这里我要和大家讨论下如何将一张平常的图片,用它来做成一张漂亮且别有新意的导航图,你只要在图片的任意一处点击,即可进入相应的页面。
这张图里面有很多东西,桌子、椅子、茶几等等。假如现在您想要看那张办公椅,那您只要将鼠标放到办公椅上面,点击,即可进入相应的类目,依次类推,整个图片就可以做到这个效果。呵呵~~~怎么样?有意思吧?
准备工作:
1:必备工具:Dreamweaver (这款软件很多地方都有下载,百度一下即可)
2:准备好需要编辑的图片,并将其上传到图片空间,备用
认识热区工具
打开Dreamweaver软件,点击“HTML”进入进入之后是个空白的页面 如图
插入需要制作的图片
(注意,是你电脑上面的那张,上传上图片空间的那张先不管它)咱们还是以刚开头的图片为例
1:点击左上角的插入图片按钮
2:弹出选择页面,找到需编辑的图片,选定,点击“确定”
3:打开图片之后,用鼠标点击一下,选定图片(如图)点击图片之后,页面的下方会显示这张图片的属性资料(如图)
4:找到“源文件”这一栏,将右边栏里面的文字都删掉,将上传到图片空间的那张图片链接粘贴到里面
使用热区工具
点击属性栏左下角的一个黑色小箭头,这就是热区工具,箭头的右边三个浅蓝色的图形分别是矩形选择工具(用来画矩形框选图片)、圆形选择工具(用来画圆形)、多边形选择工具(可画任意图形)
好了,咱们正式开始做了。所需要的效果就是点击图片上的办公椅,会进入店里椅子类的网页。
1:点击选择热区工具的黑色剪头,再点击右边的任意一个框选工具,好,我点击第一个矩形框选工具, 将鼠标移动到图片里面办公椅的位置,左击鼠标按住,拖动。这样就可选择出一个你想要的区域,如图(如果选择错了可直接按“delete”键删除此区域) 选择完了之后,下方的属性栏也会跟着改变,成以下样式
2:在上图画红线处的框内,也就是“链接”这一栏,粘贴上需要进入的网页连接(注意去掉“#”) 链接的右下边有个“替换”,在里面输入提示文字,比如:椅子系列。当鼠标停留在次区域内的时候,网页就会自动出现这些提示文字。
做到这,基本就完成了,如果还需要在图片其他的位置添加按照以上操作做就可以啦,如果有什么不明白的,直接找我也行
现在预览下效果
先按“ctrl”+“s”保存,再按一下“F12” 这时会自动打开一个网页,里面就是这张图片,将鼠标放到办公椅上面,停顿一下,这时,就能够看到鼠标旁出现“椅子系列”这几个字,点击就入,OK,进入另一个你设定好的网页
这有的朋友就问了 我要选的区域是不矩形怎么办? 好办! 那你选圆形的呗 ,形状复杂的就点击
最后一个,然后用鼠标在图形的每个角依次点击即可
好了,搞定!
这就完了? 是的! 就是这么简单。 呵呵~~ 制作完成啦, 现在我们要将做好的这个图片放到店铺里去啦。