网店模板制作及设计全流程.doc

网店模板制作及设计全流程(一) 制作模版这里面有很多复杂的问题的，作为启蒙性的教程，我这里只介绍最简单的方法和形式，其他的大家可以在此基础上自己开发、研究，如有问题欢迎赐教。 　　准备工具和素材：Photoshop 7.0和Frontpage 2003和相应图片（也可以自己创作） 　　下面进入正题吧1. 打开Photoshop，点击上方的“文件—新建”，新建一张800*1200的画布，这里把底色设置为白色。 　　2. 然后点击“文件—打开”，找到自己想要用于模版上的图片，打开(大家可以事先把图片的大小调整好，以适合于模版使用)。 　　接着，先在图片上按下“Ctrl+A”(全选)，注意这时候图片四周会出现一个虚线框，然后再按下"Ctrl+C"(复制)。 　　3. 然后回到我们最开始建立的那张800*1200的画布上，按下“Ctrl+V”(粘贴)，图片就被粘贴到画布上了。 如果位置不合适的话，可以点击左边的“移动工具”，将图案拖动到合适的位置上。 　　4. 可以根据图案对模版做些装饰，比如我这里面就用椭圆工具画出几个圆圈，并用与图案相近的蓝色填充。然后再点击椭圆工具，画一个大一点的椭圆出来，用来放置店铺公告。可以把“不透明度”设置为60%，这样看起来效果更好些。 　　5. 接下来在模版上写上自己的店铺名称。点击左边的“文字工具”，在店铺公告的上方写上店铺名称，注意可以在窗口上方的地方调整字体、字号以及文字颜色。然后可以点击右边的“添加图层样式”，根据个人喜好选择诸如阴影、描边、外发光等效果，使文字更好看。 　　6. 可以对模版进行些装饰，最简单的办法就是选择“自定形状工具”，画出一些喜欢的图形来。 然后用“文字工具”把要做链接的内容写上，比如“逛逛小店”、“店铺介绍”、“信用评价”和“收藏店铺”等。 　7. 下边就要来处理模版的主体部分了。首先我们用一个方框把主体部分框起来。点击“自定形状工具”，在窗口上方“形状”右边的下箭头上点一下，选一个合适的形状，这里我用的是Check Box，用这个形状把模版余下的部分框起来。注意边框的颜色是在窗口上部的地方进行选择的。 　　8. 然后就是往上添加各项需要的内容啦~~首先在右边的“图层”中选中“背景”层(就是我们最开始建立的那个画布)，然后可以用“自定形状工具”画个小花什么的，或者贴上自己喜欢的小图片也可以。我这里用的是“自定形状工具”中的Blob 2。 　　9. 再选择“文字工具”在图案旁边写上“宝贝展示”，和前边提到的一样，文字的相关属性在窗口上部的地方设置。可以用“移动工具”调整一下文字的位置。 　　10.同样方法，写出“宝贝描述”、“买家必读”、“邮资说明”、“联系掌柜”、“推荐宝贝”等内容。注意：不要担心每项之间的空白部分过窄，因为模版做好之后，这些地方都是可伸缩的，所以放多少内容都没问题，不用担心的~~ 　　11.可以在模版上加上你的版权信息内容，如水印啦、制作者啦什么的。 　　12.然后就是很艰巨的切片任务啦!选择切片工具，把所有要添加文字或者图片、链接的地方都单独切出来。切片这一过程很重要，刚开始的时候大家可能会不熟练，总有这样那样的问题(最后成品模版如果出现断裂的话，通常问题都是出在切片这一关)。别灰心，多试几次，多琢磨琢磨，多练练，肯定会好的! 　　另外：我这里介绍的只是最简单的模版，就是主体部分只需上下切，而不用左右切成两部分的。实际中，如果大家想要做左右分块的模版(比如左边放产品图片、介绍，右边放宝贝分类、推荐这样的)，切片是很需要技巧的。由于表达能力有限，我在这里说不明白具体要注意的问题。不过大家只要多练习多思考，一定可以摸索出规律的。加油哦~~ 　　13.下一步就是点击“文件—保存为Web所用格式”，将模版存为HTML格式的文件(实际上是一个HTML文件和一个图象文件夹)。 　　Photoshop的工作完成喽，大家辛苦了！喝杯茶，好戏还在后头 网店模板制作及设计全流程（二） 我们先看模板例子，先在PS中做切片，这是已经切好的摸版，切片不能乱切，切的时候要规整，方便后面的网页制作，而且直接影响最终的效果。这里切片01以后是要做滚动公告的，为了少切几个片片，我把放置公告的图片放在了这个切片的正中，切片04、06、07、08是要做链接的地方，所以单独切出来了，切片11、12、13、14、15、17、19、21都是以后需要无限延伸的，也单独切出来。 　　做切片的时候一定要方便后面的网页处理。 　　我把整个摸版横向切成了整齐的五个部分，这样，后面的表格拆分就方便了。 　　之后，我们要在PS里存储这些切片，菜单-文件-存储为Web使用格式会出现一个对话框，这里可以设置图片的存储格式和品质，我们把它存在预设好的文件夹里，方便以后的查找 　　好了，PS里的工作完成了，先别着急关了这个图片，后面我们网页处理的时候还用的到的。现在打开Dreamweaver，新建一个文件，然后插入一个表格，这个表格是与你设计的摸版同宽的，无限延伸的摸版制作关键在于表格嵌套（就是表格套表格）以后我们所有的表格拆分和嵌套都在这个表格里完成。 　　调整一下表格，把它拉长些，表格属性为（水平-默认，垂直-顶端）然后我们开始第一部的拆分。制作好的摸版横向是整齐的五个部分，我们先把这个表格拆成五行中国网店网　www.shop286.com 　　注意：操作时都要先选中要操作的表格才能进行，不要忘记呀 　　接下来我们继续拆分第一部分的表格，第一部分是切片01、02 横向放置，所以把第一个表格再拆成2列就可以了。 　　拆分好之后就要插入图片了，切片01是要制作成滚动公告的，这张图片要以背景方式插入 　　注意：凡是将来需要插入文字、图片和无限延伸的地方，都以背景方式插入图片 　　图象放置好之后，先不用调整，继续插入切片02，这个切片是固定不动的，我们以图象插入方式在第2个单元格进行图片的插入 　　接下来是第2部分的表格拆分，第2部分的图片与第1部分的图片拆分位置不同，这样我们就需要在第2部分里嵌套一个新的表格来进行拆分，这样表格之间就相互不干扰了。 　　拆分好之后，对照PS里切好的摸版，分别以图象方式插入图片。插入图片的时候，表格会自动伸缩的，这时侯几乎不用进行调整。 　　下面是第3部分的表格拆分，我们还是要先嵌套一个表格，然后进行拆分 　　这里的图片也是固定不动的，我们也分别以图象方式插入相应的图片。 　　好了，休息一下，第4部分就有无限延伸了，要好好看呀。 　　还是先再第4部分的表格里嵌套一个800象素宽的表格，拉长些，然后根据PS里切好的图象，先把表格拆成5列 　　呵呵，之前的切片一定要切的规矩呀，横竖对齐，这样网页处理起来会很方便，做到这里就感觉到了吧。 　　看看PS里切好的图片，第2列里有几行，这里就拆分成几行。对应着PS里的图片看呀，有红心标注的地方都是需要无限延伸的地方。 　　美美在制作这个摸版的时候，需要无限延伸的地方，我都使用的是单色，在网页处理的时候相应的表格内直接用背景色填充就OK了，当然，您也可以把这些地方设计成固定的图案，然后选择背景方式插入图案，也是可以无限延伸的。方法是多种多样的，关键在于背景是可以无限延伸的道理。 　　先在PS中点选出背景色，得到色号，在DW里进行背景颜色的填充。 　　之后调整一下表格的宽度，使每个表格都与对应的切片同宽。 　　接下来看2列，参照PS里的图象，在需要插入图片、文字的地方进行背景颜色的填充（插入图片和文字的地方也是要无限延伸的） 　　对应PS里的图片，把2列其余的部分分别以图象方式插入图片 　　下面我们开始做4列里的表格，4列里对应的是宝贝推荐的帖图，这里也是需要无限延伸的，我们先把4列用相应的背景颜色填充好，然后在里面插入一个与切片14同宽的表格。 　　再嵌套好的表格里用背景颜色填充相应的颜色。最后在第5部分用图象方式把最后一张图片进行插入。 　　好了，可以无限延伸的摸版制作完成了。下面我们要进行进一步的调整，要使每个表格都与对应的切片同长宽，这样模版才不会变形，整理的时候要多预览，哪里不好调哪里，调好之后，选中整个表格，设置属性为“水平-居中”。 　　全部调整好之后，我们还要设置一下个别表格的属性，把需要插入放大图和推荐图的表格属性设置为（水平-居中，垂直-顶端），把需要插入文字的单元格属性设置为（水平-默认或左对，垂直-顶端） 　　这些做好后，我们要把“我的店铺、店铺介绍”等部分做好相应的网址连接，先打开您在TAOBAO的主页，复制网址，选取“我的店铺”图片，在属性的连接框中，把网址粘贴过去，这样，连接就做好了。“店铺介绍，信用评价”等地方用同样的办法进行地址连接。 　　然后我们再做滚动公告，美美在DW里怎么也没找到做滚动字幕的地方，所以只好借助FrontPage来完成滚动字幕的设置。先在DW里保存这个制作好的摸版（存好之后不用关），然后打开FP软件，打开这个摸版，在 菜单-插入-Web组件 中插入滚动字幕 　设置好之后，双击文字，调整对话框的长短宽窄来决定公告文字出现的范围。 　　这样做好之后的文字是从左到右滚动的，如果想让他向上滚动，我们需要改一下代码，先选中公告文字，然后切换到代码页，找到marquee那行，在后面加上“direction="up" ”这样一来文字就变为自下而上滚动了。 　　之后保存，关闭，再切换到DW（呵呵，这样好折腾呀。）会出现一个更新对话框，点是，进行代码更新。 　　做到这里，一个完整的可以无限延伸的摸版就完全做好了，先喘口气。 　　以前美美认为发布新品最累，现在认为做教程是最累的，我的眼睛都看花了，眼珠子都快掉下来了。 　　现在，我们要把所有用到的切片都上传到您的网络相册中，这里说明一下呀，美美的网络相册是买的，很稳定，功能好，传输速度快，请打听免费相册的朋友不要再问我了，我真的不知道哪个免费的可以用呀。 　　传好之后，我们就可以把做好的摸版放到TAOBAO中使用了，先在DW中切换到代码页面，选取所有代码，进行复制，然后打开TAOBAO需要编辑的宝贝页面，进入宝贝描述编辑对话框，切换到编辑源文件，把所有代码粘贴进去 　　现在，先不要着急切换到使用编辑器看效果，因为这时候的图片地址是您机器上存图片的位置，在网络上显示不出来，我们要把这些图片地址替换成网络相册里相对应图片的网络地址，这样都替换好了，再切换到使用编辑器，才能显示完整的图片。地址替换的时候要仔细呀，不要换错了。 　　好了，切换好了没有，看看效果吧，这时候你会发现这里的图片乱乱的，没关系，是显示的问题，预览一下看看，怎么样，是完整的吧。 　　最后的工作就是贴放大图，推荐图和做相应的连接，添加文字了，这些论坛里有很多前辈的帖子，美美在这个教程里就不多说了，不会的朋友去找找帖子吧。 　　做教程好累呀，何况我同样的教程做了两次（第一次在发表的时候丢了），看教程的朋友们，无论您的水平在我之上或之下，我都需要您的鼓励，美美也愿意与您相互切磋的。