用Dreamweaver描摹图像

　　

　　

　　

　　Tracing Image(描摹图像)是在Dreamweaver 2.0中增加的功能，但是在介绍Dreamweaver 4.0时，我们仍然要提起他。要很好地理解某个陌生的东西，一个好的方法就是将他和类似的但却是已被人们所熟悉的东西做个深入而全方位的比较，所以，让我们看看他和我们通常所说的背景图像有哪些异同：

　　相同点：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中.

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有