网店模板制作与设计全流程二)

1、我们先看例子，先在PS 中做切片，这是已经切好的摸版，切片不能乱切，切的时候要规整，方便后面的网页制作，而且直接影响最终的效果。这里切片 01 以后是要做滚动公告的，为了少切几个片片，我把放置公告的图片放在了这个切片的正中，切片 04 、06、07 、08 是要做链接的地方，所以单独切出来了，切片11 、 12 、 13 、 14 、 15 、 17 、 19 、 21都是以后需要延伸的，也单独切出来。做切片的时候一定要方便后面的网页处理。我把整个摸版横向切成了整齐的五个部分，这样，后面的表格拆分就方便了。之后，我们要在PS 里存储这些切片，菜单 -文件 - 存储为 Web 使用格式 会出现一

2、个对话框，这里可以设置图片的存储格式和品质，我们把它存在预设好的文件夹里，方便以后的查找好了， PS 里的工作完成了，先别着急关了这个图片，后面我们网页处理的时候还用的到的。现在打开 Dreamweaver ，新建一个文件，然后插入一个表格，这个表格是与你设计的摸版同宽的，无限延伸的摸版制作关键在于表格嵌套 （就是表格套表格） 以后我们所有的表格拆分和嵌套都在这个表格里完成。调整一下表格，把它拉长些，表格属性为（水平- 默认，垂直 -顶端）然后我们开始第一部的拆分。制作好的摸版横向是整齐的五个部分，我们先把这个表格拆成五行注意：操作时都要先选中要操作的表格才能进行，不要忘记呀接下来我们继续拆分

3、第一部分的表格，第一部分是切片 01、02?横向放置，所以把第一个表格再拆成2 列就可以了。拆分好之后就要插入图片了，切片 01 是要制作成滚动公告的，这张图片要以背景 方式插入注意：凡是将来需要插入文字、图片和无限延伸的地方，都以背景方式插入图片图象放置好之后，先不用调整，继续插入切片 02，这个切片是固定不动的，我们以图象 插入方式在第2 个单元格进行图片的插入接下来是第2 部分的表格拆分， 第 2 部分的图片与第1 部分的图片拆分位置不同，这样我们就需要在第 2 部分里嵌套一个新的表格来进行拆分，这样表格之间就相互不干扰了。拆分好之后，对照PS 里切好的摸版，分别以图象 方式插入图片。插

4、入图片的时候，表格会自动伸缩的，这时侯几乎不用进行调整。下面是第3 部分的表格拆分，我们还是要先嵌套一个表格，然后进行拆分这里的图片也是固定不动的，我们也分别以图象方式插入相应的图片。好了，休息一下，第4 部分就有无限延伸了，要好好看呀。还是先再第表格拆成54 列部分的表格里嵌套一个800 象素宽的表格，拉长些，然后根据PS 里切好的图象，先把呵呵，之前的切片一定要切的规矩呀，横竖对齐，这样网页处理起来会很方便，做到这里就到了吧。看看 PS 里切好的图片，第 2 列里有几行，这里就拆分成几行。对应着注的地方都是需要无限延伸的地方。PS 里的图片看呀，有红心标? 美美在制作这个摸版的时候，需要无

5、限延伸的地方，我都使用的是单色，在网页处理的时候相应的表格内直接用 背景色填充 就 OK 了，当然，您也可以把这些地方设计成固定的图案，然后选择方式插入图案，也是可以无限延伸的。方法是多种多样的，关键在于 背景是可以无限延伸的背景道理。先在 PS 中点选出背景色，得到色号，在DW 里进行 背景颜色 的填充。之后调整一下表格的宽度，使每个表格都与对应的切片同宽。接下来看 2 列，参照 PS 里的图象，在需要插入图片、文字的地方进行文字的地方也是要无限延伸的）背景颜色 的填充（插入图片和对应 PS 里的图片，把2 列其余的部分分别以图象方式插入图片下面我们开始做4 列里的表格， 4 列里对应的是宝

6、贝推荐的帖图，这里也是需要无限延伸的，我们先把 4 列用相应的 背景颜色 填充好，然后在里面插入一个与切片 14 同宽的表格。再嵌套好的表格里用背景颜色 填充相应的颜色。最后在第5 部分用 图象方式把最后一张图片进行插入。好了，可以无限延伸的摸版制作完成了。下面我们要进行进一步的调整，要使每个表格都与对应的切片同长宽， 这样模版才不会变形，整理的时候要多预览，哪里不好调哪里，调好之后， 选中整个表格，设置属性为 “水平 -居中 ”。全部调整好之后，我们还要设置一下个别表格的属性，把需要插入放大图和推荐图的表格属性设置为（水平 -居中，垂直 -顶端），把需要插入文字的单元格属性设置为（水平-默认

7、或左对，垂直- 顶端）这些做好后， 我们要把 “我的店铺、 店铺介绍 ”等部分做好相应的网址连接，先打开您在TAOBAO 的主页，复制网址，选取“我的店铺 ”图片，在属性的连接框中，把网址粘贴过去，这样，连接就做好了。“店铺介绍，评价”等地方用同样的办法进行地址连接。然后我们再做滚动公告，完成滚动字幕的设置。先在美美在 DWDW 里怎么也没找到做滚动字幕的地方， 所以只好借助里保存这个制作好的摸版（存好之后不用关），然后打开FrontPage 来 FP 软件，打开这个摸版，在?菜单 - 插入 -Web 组件 ?中插入滚动字幕设置好之后，双击文字，调整对话框的长短宽窄来决定公告文字出现的范围。这

8、样做好之后的文字是从左到右滚动的，如果想让他向上滚动，我们需要改一下代码，先选中公告文字，然后切换到代码页，找到marquee 那行，在后面加上“direction="up"这”样一来文字就变为自下而上滚动了。之后保存，关闭，再切换到DW （呵呵，这样好折腾呀。）会出现一个更新对话框，点是，进行代码更新。做到这里，一个完整的可以无限延伸的摸版就完全做好了，先喘口气。以前美美认为发布新品最累，现在认为做教程是最累的，我的眼睛都看花了，眼珠子都快掉下来了。现在，我们要把所有用到的切片都上传到您的相册中，这里说明一下呀，美美的网络相册是买的，很，功能好，传输速度快，请打听免费相册的不要再问我了，我真的不知道哪个免费的可以用呀。传好之后，我们就可以把做好的摸版放到有代码，进行复制，然后打开TAOBAO辑源文件 ，把所有代码粘贴进去TAOBAO 中使用了，先在需要编辑的宝贝页面，进入DW 中切换到代码页面，选取所宝贝描述 编辑对话框，切换到编现在，先不要着急切换到使用编辑器 看效果，因为这时候的图片地址是您机器上存图片的位置，在网络上显示不出来， 我们要把这些图片地址替换成网络相册里相对应图片的网络地址， 这样都替换好了，再切换到 使用编辑器 ，才能显示完整的图片。地址替换的时候要