诺兹多姆的子嗣声望:图形化的网页-）图形的无缝拼接
2、图形化的网页
（2）图形的无缝拼接
虽然草稿图是一幅完整的图，但在实际制作主页时，并不是放上一张大图，图太大了下载起来会很慢。为了加快下载速度，一般将一幅完整的图分割成若干小图，然后将其拼接在一起。但图之间没有缝隙，所以看起来就和一幅完整的图一样，我们姑且称其为无缝拼图。
我们先看一下去掉图形后的页面在Dreamweaver中是什么样的，如下图所示（图1）。
图1 在Dreameaver中的效果及表格形状（点击放大）
原来整个页面除了图就是表格。
无缝拼接就是在表格内插入的大大小小的图片，最后组成一幅完整的画面。
我们以右上角为例，看一下图形是如何拼接的。
根据需要，我们先把一幅完整图（图2）分成很多块，因为中间的图要保持完整，所以将四周的图分割开，如下图所示。
图2 将一张图切割成四块
接下来按图形分割情况，插入一个三列一行的表格，将表格的CellPad、CellSpace、Border属性值均设为0（图3）。
图3 建立一个表格
然后在第一个单元格中插入bian2.gif图形，在第三个单元格中插入bian3.gif图形（图4）。
图4 在两边的单元格中插入图形
中间一个单元格中为两幅图，为了方便，我们在中间单元格中先插入一个二行一列的表格，Width属性设为100%，CellPad、CellSpace、Border属性值也均设为0（图5）。
图5 在中间的单元格内插入表格
然后在表格上面的单元格中插入bian1.gif图形，下面单元格中插入1.jpg图形。图形都插进来了，如果感觉图形对得不齐，可以选中外面的表格，将其缩小。
图6 顶部对齐前的效果
细看可以发现，图形竖直方向上并不齐（图6），这是因为中间单元格中所插入的表格，默认情况下为垂直居中对齐，而两个表格高度不一致，因而不齐。
下面我们进行调整，先选中中间单元格内的一个图形，再按Ctrl+A，选中了图形所在表格，再按一下Ctrl+Shift+<组合键，就选中了当前标签的父标签。当前标签为{Table}，其父标签为{td}，即大表格中间的单元格被选中了（图7）。
图7 设置表格在单元格内顶部对齐
在属性面板中设置此单元格的Vert属性为“Top”，这样小表格就顶部对齐了。这回图形拼接等很整齐吧（图8）！
图8 顶部对齐后的效果
进入浏览器中，可以看到刚拼接的图形看起来就是一幅完整的图形，无缝拼接的效果不错吧！
按照上面介绍的方法，我们将很多小图形拼接成一幅完整的大图。
注意：如果某个单元格中的图形为纯色，这时可以不必插入图形，只需将此单元格背景设置为这一颜色即可。这样会减小文件大小。
图9 纯色单元格可填充颜色