充值网店装修之导航地图制作.doc

充值网店装修 之导航地图制作教程 做虚拟物品的大虾们，你们希望拥有一个属于自己的充值导航图吗？客户进你的店，点击相应的省份或者名称，立刻就能找到自己想要的宝贝！其实做这样一个独特、美观、大气的导航图，一点也不难。你需要的只是一点耐心，和学习精神。即使你从来没接触过做图软件（注意：1、旺铺才能使用本导航图 2、本文只针对象我一样没接触过专业做图软件的新手，我们只使用某个软件的某个功能或者工具，其它的不管也不问，高手请不要笑话呵呵） 一、首先，我们先来看下需要用到的图象软件和工具： 1.大名鼎鼎的PS（Photoshop）：别担心，我们不需要对它有望而生畏的感觉，因为我们只需要它来跑下龙套而已。这里我使用的是CS2。这是一个很完整的版本。里面包含Adobe ImageReady，而且自带安装帮助和注册机。下载地址/download/145844_1434_5591781887338676404.html 2.最简单易用的iSee：主要是用来处理下素材，给你的导航图增加点个性化的东西。觉得麻烦的，可以不用管。下载地址/download/145844_1432_12747157270306294917.html3.最傻瓜而强大的专业扣图工具KnockOut 2（插件）：这里强烈推荐,从来没扣过图的朋友，也可以使用它实现最简便，最完美的扣图效果！该工具的安装和使用网上有很多。同样，嫌麻烦，不追求个性化的朋友请无视它。下载地址/download/145844_1432_12747157270306294917.html4. 一个可视化的网页设计和网站管理工具Macromedia Dreamweaver，支持最新的Web技术，包含HTML检查、HTML格式控制、HTML格式化选项、HomeSite/BBEdit捆绑、可视化网页设计、图像编辑、全局查找替换、全FTP 功能、处理Flash和Shockwave等富媒体格式和动态HTML、基于团队的Web创作。在编辑上你可以选择可视化方式或者你喜欢的源码编辑方式。下载地址/download/145844_1442_12988662800324046888.html制作导航地图必需的软件：Macromedia Dreamweaver 8和Photoshop CS2二、简单说下安装和使用方法：1.分别安装photoshopcs2.exe和iseepro图片专家3913.exe 2、解压KnockOut 2，然后把“KnockOut 2”文件夹复制到Photoshop 的滤镜里面（由于Photoshop各个版本的滤镜位置可能有所不同，如果不知道，请使用百度搜索其具位置。我的是在C:Program FilesAdobeAdobe Photoshop CS2Plug-Ins滤镜里面），然后运行“绿化.bat”。 3、运行Photoshop（如果已经运行需退出重新进行），进入后即可在滤镜的栏目中看到KnockOut 2 滤镜组三、开始制作： 素材准备和制作： 1、找一张中国地图。要求：A.省界分明，只标注省、直辖市名称。没有其它多余文字的。我们要的是简洁、清晰和大气的效果。颜色等个性化用ISEE自行处理，以配合自己的店铺风格。B.宽尽量在550像素以上，以便图象大小调整时不失真我用的是这样一个素材： 这个是我在网上搜的。喜欢的朋友也可以下载下来，做你自己的素材。下载地址/download/145844_1435_7245728850496523528.html 2、背景处理：这个主要是为了增加点装饰作用，嫌麻烦的朋友可以跳过。喜欢的朋友可以选择“KnockOut 2”这个插件来处理。具体方法去百度文库，有很详细的解说。这里不再细说了。上今天的主角：Macromedia Dreamweaver 8 前面已经说过了，制作导航地图 必需的软件：Macromedia Dreamweaver 8和Photoshop CS2。说明：软件版本尽量选择和我一样的，太低级的和简装版，可能没有我们需要的功能。可有可无的软件和工具：KnockOut 2和iSee,需要效果美一点，同时也可以学一点装修技能、店标、边框等。三、分类设置 1、管理我的店铺-分类管理 2、将话费充值的分类设置成一个大分类+各省份子分类的形式 3、保存退出四、格式转换 1、启动Photoshop2、打开地图3、点开“文件”菜单，选择“保存为WEB所用格式”4、优化，这里选择JPEG格式，来优化，你可以试着调整和换用其他格式，看优化和原图的效果对比，找到一个效果不失真而又文件最小的平衡点。5、保存。保存类型为“HTML和图像(*.html)”。PS的任务就完成了。注意，此次转换保存后，文件就分为了两个部分：一个就是刚才选择的保存路径文件，这个是网页文件；另一个图片文件，被自动保存到了默认的images文件夹（一般在“我的文档”里）。五、创建热区 1、主角上场，启动Macromedia Dreamweaver 8 2、打开刚才用PS转换保存的网页文件 3、使用“热点”工具，框选各个省份名称（按住鼠标左键拖曳）。这里我选择了“矩形热点工具”，来创建热区。点击大图后，下方即出现热点工具。 4、框选各个地区名称，将分类IE地址复制到“链接”框里。 5、框选名称-粘贴地址，重复这个动作，依次创建完成所有地区（热点）。 6、保存退出 六、获取代码 1、找到创建热区完成保存的网页文件 2、右键菜单，选择打开方式为“记事本” 3、选择全部，复制代码。退出 七、代码粘贴 1、管理我的店铺装修店铺编辑，粘贴刚才复制的代码。 2、在编辑器里点击“编辑HTML源码”按钮（其它按钮会反白不可用） 3、再点下“编辑HTML源码”按钮，可以见到各省份的空白框 4、在该图空白处双击，将出现图片地址对话框 5、另开一个浏览器窗口，管理我的店铺-素材管理-图片空间，上传images文件夹里的图片 6、复制图片链接 回到图片地址对话框，粘贴 确定 保存。 7、预览发布，检查各地的链接是否正确 8、大功告成！一个快捷方便、美观大气、独特眩目的充值导航图就在你店里发光了！哈哈其实这个教程并不是自己的，我百度了一个教程。用近4个小时，下载软件 进行测试。并在实际操作的过程中去除了一些负赘，对个别讲述不明的地方进行了修改并加入了截图。使整篇文章更加简洁明了。如果你有足够的耐心看完了，那么说明你很需要它。这里，我就把几个软件的链接发出来，免得你麻烦了。一、Photoshop CS2下载地址/download/145844_1434_5591781887338676404.html二、iSee下载地址/download/145844_1432_12747157270306294917.html三、KnockOut 2（插件）下载地址 /download/145844_1432_12747157270306294917.html四、Macromedia