当前位置月光软件 -> 电脑乐园 -> Dreamweaver

 

轻松掌握网页制作
深入学习和使用
用表格做网页
图形化的网页
画出你的主页来
图形的无缝拼接
会变脸的图形
图层的简单使用
设置编码解释
灵活运用文字
精彩的图层世界
丰富的超链接
框架里的乾坤
创建各种窗体
本章常见问题解答
高级使用和理解
附录
常见问题汇总
快捷键分级介绍
一句话技巧集萃
功能快速索引



请您留言
谈谈您的看法

 

 

 
  二、深入学习和使用

2、图形化的网页

(2)图形的无缝拼接

  虽然草稿图是一幅完整的图,但在实际制作主页时,并不是放上一张大图,图太大了下载起来会很慢。为了加快下载速度,一般将一幅完整的图分割成若干小图,然后将其拼接在一起。但图之间没有缝隙,所以看起来就和一幅完整的图一样,我们姑且称其为无缝拼图。

  我们先看一下去掉图形后的页面在Dreamweaver中是什么样的,如下图所示(图1)

在Dreameaver中的效果    页面是由表格组成的

图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 纯色单元格可填充颜色

 

上一节 下一节   

 

请您留言
谈谈您的看法