相同点:tracing image同背景图像一样是一幅存在于页面背景中的图像,我想这是它们惟一的相同之处了。
不同点:
1、tracing image不会被dreamweaver平铺(对一个背景图像来说,假如图像尺寸小于页面的尺寸就会被平铺。)
2、可以指定tracing image的透明度。 3、tracing image只在dreamweaver中可见,在浏览器中它会被忽略。
4、当tracing image在dreamweaver中可见时,背景图像和背景颜色将变为不可见。但有个开关可以让你选择要显示tracing image还是背景图像。
下面是一个显示在文档窗口中的tracing image(见图1)。
做法如下:
1、首先,我们要制作一个模型图像。你可以用你喜欢的任何一种图像编辑应用程序来制作这个模型图像,只要你最终将其保存为gif、jpg、jpeg或png格式就可以了。以后,我们将用这个模型图像来作为建立页面布局的向导。意思就是说,先设计并制作好一个已经图像化的页面布局,再将其作为tracing image放入页面中,然后照着这个图像化的布局描就行了,这对于整体规划复杂的页面布局很有好处。
图1
2、接下来,我要把这个做好的图像模型放入需要的页面中。选择“view →tracing image→load”,将出现一个对话框,找到你的图像模型并选择它,然后点击[select]。
3、page properties对话框将紧接着出现,通过拖动滑块指定图像的透明度(transparent),然后点击[ok]。你可以在任何时候通过选择“modify→page properties”,来选择另一个tracing image或改变当前tracing image的透明度。
4、图2是我将我的tracing image放入页面后的样子(我设置了透明度为70%)。
图2
5、装入tracing image后,观察了一下,总觉得这个tracing image似乎没有处于文档的中心,因此,我决定要调整一下位置。选择“view→tracing image→adjust position”。在弹出的对话框中输入x和y轴的坐标值(默认位置为8,11),然后点击[ok]。
除了调整位置外,你还可以使用下列选项:
show(显示)——用来隐藏和显示tracing image,当tracing image隐藏时,背景图像和背景颜色就可以显示出来了(当然是在你设置了它们的前提下)。
align with selection(同选项对齐)——可以让你将tracing image的左上角和某个你选中的对象的左上角对齐(需要先点选一个预备对齐的对象)。
reset position(复位)——可以把你的tracing image送回(x:0,y:0)的位置。
6、既然我们已经有了放置好的tracing image,可以照着它来绘制布局了。点击对象调色板中的[layer],拖放两个层分别覆盖tracing image中的绿色区域。
7、至此,你们可以看到,tracing image已经成功地辅助我完成了这个简单的布局,当然,tracing image完全可以胜任远比这复杂得多的页面布局任务。但我的工作还没有完成,我的设计是要在右边的大的层中放置一台数码摄像机的图片,而在左边的小的层中放置对这台摄像机的说明。分别在大层和小层中插入图片和输入文字后,页面看起来是这样的(见图3)。
|||
图3
8、好了,所有的工作都已经做完了。让我们在浏览器中预览一下吧(见图4)。
图4
完全不用担心浏览器将如何看待tracing image,它在浏览器中既不会被显示,也不会被下载,它只能显示在dreamweaver中.
新闻热点
疑难解答