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

1、我们先看看例子，先在PPS中做做切片，这是已已经切好好的摸版版，切片片不能乱乱切，切切的时候候要规整整，方便便后面的的网页制制作，而而且直接接影响最最终的效效果。这这里切片片01以以后是要要做滚动动公告的的，为了了少切几几个片片片，我把把放置公公告的图图片放在在了这个个切片的的正中，切片004、006、007、008是要要做链接接的地方方，所以以单独切切出来了了，切片片11、12、13、14、15、17、19、21都都是以后后需要 HYPERLINK javascript:void(0) 无无限延伸伸的，也也单独切切出来。做切片的的时候一一定要方方便后面面的网页页处理。我把整个个摸版横横向切成

2、成了整齐齐的五个个部分，这样，后面的的表格拆拆分就方方便了。之后，我我们要在在PS里里存储这这些切片片，菜单单-文件件-存储储为Weeb使用用格式会会出现一一个对话话框，这这里可以以设置图图片的存存储格式式和品质质，我们们把它存存在预设设好的文文件夹里里，方便便以后的的查找好了，PPS里的的工作完完成了，先别着着急关了了这个图图片，后后面我们们网页处处理的时时候还用用的到的的。现在在打开DDreaamweeaveer，新新建一个个文件，然后插插入一个个表格，这个表表格是与与你设计计的摸版版同宽的的，无限限延伸的的摸版制制作关键键在于表表格嵌套套（就是是表格套套表格）以后我我们所有有的表格格拆分

3、和和嵌套都都在这个个表格里里完成。调整一下下表格，把它拉拉长些，表格属属性为（水平-默认，垂直-顶端）然后我我们开始始第一部部的拆分分。制作作好的摸摸版横向向是整齐齐的五个个部分，我们先先把这个个表格拆拆成五行行注意：操操作时都都要先选选中要操操作的表表格才能能进行，不要忘忘记呀接下来我我们继续续拆分第第一部分分的表格格，第一一部分是是切片001、002横横向放置置，所以以把第一一个表格格再拆成成2列就就可以了了。拆分好之之后就要要插入图图片了，切片001是要要制作成成滚动公公告的，这张图图片要以以背景方式式插入注意：凡凡是将来来需要插插入文字字、图片片和无限限延伸的的地方，都以背背景方式式插

4、入图图片图象放置置好之后后，先不不用调整整，继续续插入切切片022，这个个切片是是固定不不动的，我们以以图象插入入方式在在第2个个单元格格进行图图片的插插入接下来是是第2部部分的表表格拆分分，第22部分的的图片与与第1部部分的图图片拆分分位置不不同，这这样我们们就需要要在第22部分里里嵌套一一个新的的表格来来进行拆拆分，这这样表格格之间就就相互不不干扰了了。拆分好之之后，对对照PSS里切好好的摸版版，分别别以图象象方式插插入图片片。插入入图片的的时候，表格会会自动伸伸缩的，这时侯侯几乎不不用进行行调整。下面是第第3部分分的表格格拆分，我们还还是要先先嵌套一一个表格格，然后后进行拆拆分这里的图图

5、片也是是固定不不动的，我们也也分别以以图象方式式插入相相应的图图片。好了，休休息一下下，第44部分就就有无限限延伸了了，要好好好看呀呀。还是先再再第4部部分的表表格里嵌嵌套一个个8000象素宽宽的表格格，拉长长些，然然后根据据PS里里切好的的图象，先把表表格拆成成5列呵呵，之之前的切切片一定定要切的的规矩呀呀，横竖竖对齐，这样网网页处理理起来会会很方便便，做到到这里就就 HYPERLINK javascript:void(0) 感觉到了了吧。看看PSS里切好好的图片片，第22列里有有几行，这里就就拆分成成几行。对应着着PS里里的图片片看呀，有红心心标注的的地方都都是需要要无限延延伸的地地方。

6、美美在在制作这这个摸版版的时候候，需要要无限延延伸的地地方，我我都使用用的是单单色，在在网页处处理的时时候相应应的表格格内直接接用背景景色填充充就OKK了，当当然，您您也可以以把这些些地方设设计成固固定的图图案，然然后选择择背景方式式插入图图案，也也是可以以无限延延伸的。方法是是多种多多样的，关键在在于背景景是可以以无限延延伸的道道理。先在PSS中点选选出背景景色，得得到色号号，在DDW里进进行背景景颜色的的填充。之后调整整一下表表格的宽宽度，使使每个表表格都与与对应的的切片同同宽。接下来看看2列，参照PPS里的的图象，在需要要插入图图片、文文字的地地方进行行背景颜颜色的填填充（插插入图片片和

7、文字字的地方方也是要要无限延延伸的）对应PSS里的图图片，把把2列其其余的部部分分别别以图象象方式插插入图片片下面我们们开始做做4列里里的表格格，4列列里对应应的是宝宝贝推荐荐的帖图图，这里里也是需需要无限限延伸的的，我们们先把44列用相相应的背背景颜色色填充好好，然后后在里面面插入一一个与切切片144同宽的的表格。再嵌套好好的表格格里用背背景颜色色填充相相应的颜颜色。最最后在第第5部分分用图象象方式把把最后一一张图片片进行插插入。好了，可可以无限限延伸的的摸版制制作完成成了。下下面我们们要进行行进一步步的调整整，要使使每个表表格都与与对应的的切片同同长宽，这样模模版才不不会变形形，整理理的时

8、候候要多预预览，哪哪里不好好调哪里里，调好好之后，选中整整个表格格，设置置属性为为“水平平-居中中”。全部调整整好之后后，我们们还要设设置一下下个别表表格的属属性，把把需要插插入放大大图和推推荐图的的表格属属性设置置为（水水平-居居中，垂垂直-顶顶端），把需要要插入文文字的单单元格属属性设置置为（水水平-默默认或左左对，垂垂直-顶顶端）这些做好好后，我我们要把把“我的的店铺、店铺介介绍”等等部分做做好相应应的网址址连接，先打开开您在TTAOBBAO的的主页，复制网网址，选选取“我我的店铺铺”图片片，在属属性的连连接框中中，把网网址粘贴贴过去，这样，连接就就做好了了。“店店铺介绍绍， HYPER

9、LINK javascript:void(0) 信用用评价”等地方方用同样样的办法法进行地地址连接接。然后我们们再做滚滚动公告告，美美美在DWW里怎么么也没找找到做滚滚动字幕幕的地方方，所以以只好借借助FrronttPagge来完完成滚动动字幕的的设置。先在DDW里保保存这个个制作好好的摸版版（存好好之后不不用关），然后后打开FFP软件件，打开开这个摸摸版，在在菜单单-插入入-Weeb组件件中插插入滚动动字幕设置好之之后，双双击文字字，调整整对话框框的长短短宽窄来来决定公公告文字字出现的的范围。这样做好好之后的的文字是是从左到到右滚动动的，如如果想让让他向上上滚动，我们需需要改一一下代码码，先

10、选选中公告告文字，然后切切换到代代码页，找到mmarqqueee那行，在后面面加上“dirrecttionn=uup ”这样样一来文文字就变变为自下下而上滚滚动了。之后保存存，关闭闭，再切切换到DDW（呵呵呵，这这样好折折腾呀。）会出出现一个个更新对对话框，点是，进行代代码更新新。做到这里里，一个个完整的的可以无无限延伸伸的摸版版就完全全做好了了，先喘喘口气。以前美美美认为发发布新品品最累，现在认认为做教教程是最最累的，我的眼眼睛都看看花了，眼珠子子都快掉掉下来了了。现在，我我们要把把所有用用到的切切片都上上传到您您的 HYPERLINK javascript:void(0) 网络络相册中中，

11、这里里说明一一下呀，美美的的网络相相册是买买的，很很 HYPERLINK javascript:void(0) 稳定，功功能好，传输速速度快，请打听听免费相相册的 HYPERLINK javascript:void(0) 朋朋友不要要再问我我了，我我真的不不知道哪哪个免费费的可以以用呀。传好之后后，我们们就可以以把做好好的摸版版放到TTAOBBAO中中使用了了，先在在DW中中切换到到代码页页面，选选取所有有代码，进行复复制，然然后打开开TAOOBAOO需要编编辑的宝宝贝页面面，进入入宝贝描描述编辑辑对话框框，切换换到编辑辑源文件件，把所所有代码码粘贴进进去现在，先先不要着着急切换换到使用用编辑器器看效果果，因为为这时候候的图片片地址是是您机器器上存图图片的位位置，在在网络上上显示不不出来，我们要要把这些些图片地地址替换换成网络络相册里里相对应应图片的的网络地地址，这这样都替替换好了了，再切切换到使使用编辑辑器，才才能显示示完整的的图片。地址替替换的时时