诺兹多姆的子嗣声望:图形化的网页-)图形的无缝拼接
来源:百度文库 编辑:九乡新闻网 时间:2024/10/02 18:06:54
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 纯色单元格可填充颜色