建站学习网,专业提供各类建站教程,网页素材,SEO资讯等建站资源!

网站模板_网站源码_网站素材_建站教程_建站学习网

当前位置:建站学习网 > 网页设计 > Dreamweaver教程 >

怎样用Dreamweaver描摹图像

更新时间:2017-04-14整理编辑:建站学习网阅读:0

  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中.

本文网址:https://www.dedexuexi.com/wysj/dw/2969.html

本站部分文章搜集与网络,如有侵权请联系本站,转载请说明出处。

收藏此文 赞一下!() 打赏本站

如本文对您有帮助,就请建站学习网抽根烟吧!

支付宝打赏
微信打赏
Dreamweaver设置文字格式的方法
« 上一篇2017年04月14日
Dreamweaver临时文件是如何工作的
2017年04月14日下一篇 »
  • Dreamweaver CS5-HTML简介
    0阅读
    1.什么是HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,它规定了自己的语法规则,用来表示比“文本“更丰富的意义,比如图片,表格,链接等。浏览器(IE,FireFox等)软件知道HTML语言的语法,可以用来查看HTML文档。目前互联网上的绝大部...
  • Dreamweaver文档编辑
    0阅读
    快捷键可以提高我们平时的工作效率,今天小编为大家介绍一下dreamweaver中文档编辑快捷键。
  • 色彩模式介绍
    0阅读
    在图象和图形处理软件中,通常都使用了HSB、RGB、Lab及CMYK几种色彩模型,并且具有多种色彩模式,用来反映不同的色彩范围,其中许多模式能用对应的命令相互转换。 (一) HSB模型 基于人类对色
  • Dreamweaver教程:用dw制作图片浏览器
    0阅读
    如图所示,在很多地方我们都看到过这样的图片展示效果 ,通过点击下方的缩略图来展示不同的图片,今天我们就是要来做一下这个效果,其实方法很简单,就是给缩略图添加一个交换图像的
  • DreamweaverMX2004打造留言本详解
    0阅读
    一、IIS(Internet 信息服务)安装配置 这里以Windows Server 2003(以下简称Win2003)为例。因为Win2003是服务器级的操作系统,所以自带有IIS6.0,其它版本的系统可以在添加或删除程序添加/删除Windows组件对
 
QQ在线咨询