网店模板制作和设计全流程二).pdfVIP

我们先看例子，先在 PS 中做切片，这是已经切好的摸版，切片不能乱切，切的时候要规整，方便后 面的网页制作，而且直接影响最终的效果。 这里 切片 01 以后是要做滚动公告的， 为了少切几个片片， 我把放置公告的图片放在了这个切片的正中， 切片 04 、06 、07 、08 是要做链接的地方，所以单独切 出来了， 切片 11 、 12 、 13 、 14 、 15 、 17 、 19 、 21 都是以后需要延伸的，也单独切出来。 做切片的时候一定要方便后面的网页处理 。 我把整个摸版横向切成了整齐的五个部分，这样，后面的表格拆分就方便了。 之后，我们要在 PS 里存储这些切片， 菜单 -文件 - 存储为 Web 使用格式 会出现一个对话框，这里可以 设置图片的存储格式和品质，我们把它存在预设好的文件夹里，方便以后的查找 好了， PS 里的工作完成了，先别着急关了这个图片，后面我们网页处理的时候还用的到的。现在打 开 Dreamweaver ，新建一个文件，然后插入一个表格，这个表格是与你设计的摸版同宽的，无限延 伸的摸版制作关键在于表格嵌套 （就是表格套表格） 以后我们所有的表格拆分和嵌套都在这个表格里 完成。 调整一下表格，把它拉长些，表格属性为（水平 - 默认，垂直 -顶端）然后我们开始第一部的拆分。制 作好的摸版横向是整齐的五个部分，我们先把这个表格拆成五行 注意：操作时都要先选中要操作的表格才能进行，不要忘记呀 接下来我们继续拆分第一部分的表格，第一部分是 切片 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 列里对应的是宝