充值网店装修之导航地图制作Word格式文档下载.docx

充值网店装修之导航地图制作Word格式文档下载.docx

《充值网店装修之导航地图制作Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《充值网店装修之导航地图制作Word格式文档下载.docx（11页珍藏版）》请在冰豆网上搜索。

1.大名鼎鼎的PS（Photoshop）：

别担心，我们不需要对它有望而生畏的感觉，因为我们只需要它来跑下龙套而已。

这里我使用的是CS2。

这是一个很完整的版本。

里面包含AdobeImageReady，而且自带安装帮助和注册机。

下载地址

2.最简单易用的iSee：

主要是用来处理下素材，给你的导航图增加点个性化的东西。

觉得麻烦的，可以不用管。

3.最傻瓜而强大的专业扣图工具KnockOut2（插件）：

这里强烈推荐,从来没扣过图的朋友，也可以使用它实现最简便，最完美的扣图效果！

该工具的安装和使用网上有很多。

同样，嫌麻烦，不追求个性化的朋友请无视它。

4.一个可视化的网页设计和网站管理工具MacromediaDreamweaver，支持最新的Web技术，包含HTML检查、HTML格式控制、HTML格式化选项、HomeSite/BBEdit捆绑、可视化网页设计、图像编辑、全局查找替换、全FTP功能、处理Flash和Shockwave等富媒体格式和动态HTML、基于团队的Web创作。

在编辑上你可以选择可视化方式或者你喜欢的源码编辑方式。

制作导航地图必需的软件：

MacromediaDreamweaver8和PhotoshopCS2

二、简单说下安装和使用方法：

1.分别安装photoshopcs2.exe和iseepro图片专家3913.exe

2、解压KnockOut2，然后把“KnockOut2”文件夹复制到Photoshop的滤镜里面（由于Photoshop各个版本的滤镜位置可能有所不同，如果不知道，请使用XX搜索其具位置。

我的是在C:

\ProgramFiles\Adobe\AdobePhotoshopCS2\Plug-Ins\滤镜里面），然后运行“绿化.bat”。

3、运行Photoshop（如果已经运行需退出重新进行），进入后即可在滤镜的栏目中看到KnockOut2滤镜组

三、开始制作：

素材准备和制作：

1、找一张中国地图。

要求：

A.省界分明，只标注省、直辖市名称。

没有其它多余文字的。

我们要的是简洁、清晰和大气的效果。

颜色等个性化用ISEE自行处理，以配合自己的店铺风格。

B.宽尽量在550像素以上，以便图象大小调整时不失真

我用的是这样一个素材：

这个是我在网上搜的。

喜欢的朋友也可以下载下来，做你自己的素材。

2、背景处理：

这个主要是为了增加点装饰作用，嫌麻烦的朋友可以跳过。

喜欢的朋友可以选择“KnockOut2”这个插件来处理。

具体方法去XX文库，有很详细的解说。

这里不再细说了。

上今天的主角：

MacromediaDreamweaver8

前面已经说过了，制作导航地图必需的软件：

MacromediaDreamweaver8和PhotoshopCS2。

说明：

软件版本尽量选择和我一样的，太低级的和简装版，可能没有我们需要的功能。

可有可无的软件和工具：

KnockOut2和iSee,需要效果美一点，同时也可以学一点装修技能

、店标、边框等。

三、分类设置

1、管理我的店铺-分类管理

2、将话费充值的分类设置成一个大分类+各省份子分类的形式

3、保存退出

四、格式转换

1、启动Photoshop

2、打开地图

3、点开“文件”菜单，选择“保存为WEB所用格式”

4、优化，这里选择JPEG格式，来优化，你可以试着调整和换用其他格式，看优化和原图的效果对比，找到一个效果不失真而又文件最小的平衡点。

5、保存。

保存类型为“HTML和图像（*.html）”。

PS的任务就完成了。

注意，此次转换保存后，文件就分为了两个部分：

一个就是刚才选择的保存路径文件，这个是网页文件；

另一个图片文件，被自动保存到了默认的images文件夹（一般在“我的文档”里）。

五、创建热区

1、主角上场，启动MacromediaDreamweaver8

2、打开刚才用PS转换保存的网页文件

3、使用“热点”工具，框选各个省份名称（按住鼠标左键拖曳）。

这里我选择了“矩形热点工具”，来创建热区。

点击大图后，下方即出现热点工具。

4、框选各个地区名称，将分类IE地址复制到“链接”框里。

5、框选名称-粘贴地址，重复这个动作，依次创建完成所有地区（热点）。

6、保存退出

六、获取代码

1、找到创建热区完成保存的网页文件

2、右键菜单，选择打开方式为“记事本”

3、选择全部，复制代码。

退出

七、代码粘贴

1、管理我的店铺→装修→店铺编辑，粘贴刚才复制的代码。

2、在编辑器里点击“编辑HTML源码”按钮（其它按钮会反白不可用）

3、再点下“编辑HTML源码”按钮，可以见到各省份的空白框

4、在该图空白处双击，将出现图片地址对话框

5、另开一个浏览器窗口，管理我的店铺-素材管理-图片空间，上传images文件夹里的图片

6、复制图片链接

回到图片地址对话框，粘贴→确定→保存。

7、预览发布，检查各地的链接是否正确

8、大功告成！

一个快捷方便、美观大气、独特眩目的充值导航图就在你店里发光了！

哈哈……

其实这个教程并不是自己的，我XX了一个教程。

用近4个小时，下载软件☞进行测试。

并在实际操作的过程中去除了一些负赘，对个别讲述不明的地方进行了修改并加入了截图。

使整篇文章更加简洁明了。

　　如果你有足够的耐心看完了，那么说明你很需要它。

这里，我就把几个软件的链接发出来，免得你麻烦了。

一、PhotoshopCS2

二、iSee

三、KnockOut2（插件）

下载地址

四、MacromediaDreamweaver8

五、导航地图