loading请求处理中...
10大优享服务
62项会员特权

网店模板设计制作的流程是怎样的?

提问者:非常视觉网络科技 1回答 浏览次数:3114 提问时间: 2021/12/01 13:56
提问者采纳
们先看模板例子,先在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组件中插入滚动字幕
设置好之后,双击文字,调整对话框的长短宽窄来决定公告文字出现的范围。中国网店网 www.shop286.com
  这样做好之后的文字是从左到右滚动的,如果想让他向上滚动,我们需要改一下代码,先选中公告文字,然后切换到代码页,找到marquee那行,在后面加上“direction="up" ”这样一来文字就变为自下而上滚动了。
  之后保存,关闭,再切换到DW(呵呵,这样好折腾呀。)会出现一个更新对话框,点是,进行代码更新。
  做到这里,一个完整的可以无限延伸的摸版就完全做好了,先喘口气。
  以前美美认为发布新品最累,现在认为做教程是最累的,我的眼睛都看花了,眼珠子都快掉下来了。
  现在,我们要把所有用到的切片都上传到您的网络相册中,这里说明一下呀,美美的网络相册是买的,很稳定,功能好,传输速度快,请打听免费相册的朋友不要再问我了,我真的不知道哪个免费的可以用呀。
  传好之后,我们就可以把做好的摸版放到TAOBAO中使用了,先在DW中切换到代码页面,选取所有代码,进行复制,然后打开TAOBAO需要编辑的宝贝页面,进入宝贝描述编辑对话框,切换到编辑源文件,把所有代码粘贴进去
  现在,先不要着急切换到使用编辑器看效果,因为这时候的图片地址是您机器上存图片的位置,在网络上显示不出来,我们要把这些图片地址替换成网络相册里相对应图片的网络地址,这样都替换好了,再切换到使用编辑器,才能显示完整的图片。地址替换的时候要仔细呀,不要换错了。
  好了,切换好了没有,看看效果吧,这时候你会发现这里的图片乱乱的,没关系,是显示的问题,预览一下看看,怎么样,是完整的吧。
  最后的工作就是贴放大图,推荐图和做相应的连接,添加文字了,这些论坛里有很多前辈的帖子,美美在这个教程里就不多说了,不会的朋友去找找帖子吧。

全部回答

问题分类

网站开发
我 要 回 答 我 要 提 问
问题分类   验证码 换一组

相关问题