Dreamweaver/插入图像
Dreamweaver 中编辑图像[ ]
Dreamweaver 提供基本图像编辑功能,使您无需使用外部图像编辑应用程序(例如 Macromedia FireWorks)即可修改图像。Dreamweaver 图像编辑工具旨在使您能与内容设计者(负责创建 Web 站点上使用的图像文件)轻松地协作。
注意: 您无需在计算机上安装 Macromedia FireWorks,即可使用 DreamWeaver 图像编辑功能。
Dreamweaver 具有以下图像编辑功能:
图像重新取样添加或减少已调整大小的 JPEG 和 GIF 图像文件中的像素,以与原始图像的外观尽可能地匹配。对图像进行重新取样会减小图像文件的大小,其结果是下载性能的提高。
在 Dreamweaver 中重新调整图像的大小时,您可以对图像进行重新取样,以容纳其新尺寸。重新取样位图对象时,会在图像中添加或删除像素,以使其变大或变小。重新取样图像以取得更高的分辨率一般不会导致品质下降。但重新取样以取得较低的分辨率总会导致数据丢失,并且通常会使品质下降。
裁剪可让您通过减小图像区域编辑图像。通常,您可能需要裁剪图像以强调图像的主题,并删除图像中强调部分周围不需要的部分。
亮度/对比度修改图像中像素的亮度或对比度。这将影响图像的高亮显示、阴影和中间色调。修正过暗或过亮的图像时通常使用“亮度/对比度”。
锐化可通过增加图像中边缘的对比度来调整图像的焦点。扫描图像或拍摄数码照片时,大多数图像捕获软件的默认操作是柔化图像中各对象的边缘。这可以防止特别精细的细节从组成数码图像的像素中丢失。不过,要显示数码图像文件中的细节,经常需要锐化图像,从而提高边缘的对比度,使图像更清晰。
注意:DreamWeaver 图像编辑功能仅适用于 JPEG 和 GIF 图像文件格式。其它位图图像文件格式不能使用这些图像编辑功能编辑。
插入图像占位符[ ]
图像占位符是在准备好将最终图形添加到 Web 页面之前使用的图形。 若要插入图像占位符,请执行以下操作:
- 在“文档”窗口中,将插入点放置在要插入占位符图形的位置。
- 执行下列操作之一:
- 在“常用”插入栏中,单击“图像占位符”图标。
- 选择“插入”>“图像占位符”,“图像占位符”对话框随即显示。
- 在该对话框中,为图像占位符选择选项,您可以设置占位符的大小和颜色,并为占位符提供文本标签。
- 单击“确定”,当在浏览器中查看时,不显示标签文字和大小文本。
对齐图像[ ]
您可以将图像与同一行中的文本、另一个图像、插件或其它元素对齐。还可以设置图像的水平对齐方式。 若要对齐图像,请执行以下操作:
- 在“设计”视图中选择该图像。
- 在“属性”检查器中设置该图像的对齐属性,您可以设置相对于同一段落或行中的其它元素的对齐方式。
注意: HTML 不提供某些字处理应用程序中提供的文本环绕图像轮廓换行的方法。
对齐选项如下:
默认值通常指定基线对齐。(根据站点访问者的浏览器的不同,默认值也会有所不同。)
基线和底部将文本(或同一段落中的其它元素)的基线与选定对象的底部对齐。
顶端将图像的顶端与当前行中最高项(图像或文本)的顶端对齐。
居中将图像的中部与当前行的基线对齐。
文本上方将图像的顶端与文本行中最高字符的顶端对齐。
绝对居中将图像的中部与当前行中文本的中部对齐。
绝对底部将图像的底部与文本行(这包括字母下部,例如在字母 g 中)的底部对齐。
左对齐将所选图像放置在左边,文本在图像的右侧换行。如果左对齐文本在行上处于对象之前,它通常强制左对齐对象换到一个新行。
右对齐将图像放置在右边,文本在对象的左侧换行。如果右对齐文本在行上处于对象之前,它通常强制右对齐对象换到一个新行。
调整图像大小[ ]
您可以在 Dreamweaver 中以可视化的形式调整元素的大小,这些元素包括图像、插件、Macromedia Shockwave 或 Flash 文件、applet 和 ActiveX 控件等。 在 Dreamweaver 中以可视方式调整图像大小有助于您看到不同尺寸的图像对布局的影响情况。以可视方式调整图像大小不会将图像文件缩放您指定的比例。如果您确实在 Dreamweaver 中以可视方式调整了图像的大小,但是没有使用图像编辑应用程序(例如 Macromedia Fireworks)将图像文件缩放到所需大小,则在载入页面时用户的浏览器必须缩放图像。这可能会导致用户浏览器中页面下载延迟和图像显示不正确。若要缩短下载时间并确保所有图像实例以相同大小显示,请使用图像编辑应用程序缩放图像。 若要以可视方式调整元素的大小,请执行以下操作:
- 在“文档”窗口中选择该元素(例如,一个图像或 SWF 文件)。 元素的底部、右侧及右下角出现调整大小控制点。如果未出现调整大小控制点,则单击要调整大小的元素以外的部分然后重新选择它,或在标签选择器中单击相应的标签以选择该元素。
- 执行下列操作之一,调整元素的大小:
- 若要调整元素的宽度,请拖动右侧的选择控制点。
- 若要调整元素的高度,请拖动底部的选择控制点。
- 若要同时调整元素的宽度和高度,请拖动顶角的选择控制点。
- 若要在调整元素尺寸时保持元素的比例(其宽高比),请在按住 Shift 键的同时拖动顶角的选择控制点。
以可视方式最小可以将元素大小调整到 8 x 8 像素。若要将元素的宽度和高度调整到更小的大小(例如 1 x 1 像素),请使用“属性”检查器输入数值。 若要将已调整大小的元素返回到原始尺寸,请在“属性”检查器中删除“宽”和“高”文本框中的值,或者单击“重设大小”按钮。 若要将图像回复到其原始大小,请执行以下操作:
- 单击图像“属性”检查器中的“重设大小”按钮。
若要重新取样已调整大小的图像,请执行以下操作:
- 如上所述,调整图像大小。
- 单击图像“属性”检查器中的“重新取样”按钮。
注意:无法重新取样图像占位符或位图图像之外的元素。
裁剪图像[ ]
Dreamweaver 支持裁剪(或修剪)位图文件图像。 注意: 使用 Dreamweaver 裁剪时,会更改磁盘上的源图像文件,因此,您可能需要备份图像文件,以在需要回复到原始图像时使用。 若要裁剪图像文件,请执行以下操作:
- 打开包含要裁剪的图像的页面,选择图像,并执行下列操作之一:
- 单击图像属性检查器中的“裁减工具”图标。
- 选择“修改”>“图像”>“裁剪”,所选图像周围会出现裁剪控制点。
- 调整裁剪控制点直到边界框包含的图像区域符合所需大小。
- 在边界框内部双击或按 Enter 键裁剪所选区域,将显示一个对话框通知您正在裁剪的图像文件将在磁盘上更改。单击“确定”,所选位图的边界框外的所有像素都将被删除,但将保留图像中的其它对象。
- 预览该图像并确保它满足您的要求。
若要撤消裁剪命令的效果,请执行以下操作:
- 选择“编辑”>“撤消裁剪”回复原始图像。
在退出 Dreamweaver 或在外部图像编辑应用程序中编辑该文件之前,您可以撤消“裁剪”命令的效果(并回复到原始图像文件)。
使用 Fireworks 优化图像[ ]
您可以在 Dreamweaver 中优化 Web 页面中的图像。 若要优化图像,请执行以下操作:
- 打开包含要优化的图像的页面,选择图像,并执行下列操作之一:
- 单击图像属性检查器中的“在 FireWorks 中优化”按钮。
- 选择“修改”>“图像”>“在 Fireworks 中优化图像”,将显示“Fireworks 优化图像”对话框。
- 单击“确定”。
调整图像的亮度和对比度[ ]
“亮度/对比度”修改图像中像素的亮度或对比度。这将影响图像的高亮显示、阴影和中间色调。修正过暗或过亮的图像时通常使用“亮度/对比度”。 若要调整图像的亮度和对比度,请执行以下操作:
- 打开包含要调整的图像的页面,选择图像,并执行下列操作之一:
- 单击图像“属性”检查器中的“亮度/对比度”按钮。
- 选择“修改”>“图像”>“亮度/对比度”
- 将显示“亮度/对比度”对话框。
- 拖动亮度和对比度滑动块调整设置,值的范围从 -100 到 100。
- 单击“确定”。
锐化图像[ ]
锐化将增加对象边缘的像素的对比度,从而增加图像清晰度或锐度。 若要锐化图像,请执行以下操作:
- 打开包含要锐化的图像的页面,选择图像,并执行下列操作之一:
- 单击图像属性检查器中的“锐化”按钮。
- 选择“修改”>“图像”>“锐化”,将显示“锐化”对话框。
- 可以通过拖动滑块控件或在文本框中输入一个 0 到 10 之间的值,来指定 Dreamweaver 应用于图像的锐化程度,在使用“清晰度”对话框调整图像的清晰度时,可以预览对该图像所做的更改。
- 单击“确定”。
- 选择“文件”>“保存”以保存更改,或选择“编辑”>“撤消锐化”回复到原始图像。
若要撤消锐化命令的效果,请执行以下操作:
- 选择“编辑”>“撤消锐化”回复到原始图像。
只能在保存包含图像的页面之前撤消“锐化”命令的效果(并回复到原始图像文件)。页面一旦保存,对图像所做更改即永久保存。
创建鼠标经过图像[ ]
您可以在页面中插入鼠标经过图像。鼠标经过图像是一种在浏览器中查看并使用鼠标指针移过它时发生变化的图像。 开始前,请选用一对或多对图像用于鼠标经过图像。您将使用两个图像文件创建鼠标经过图像:主图像(当首次载入页时显示的图像)和次图像(当鼠标指针移过主图像时显示的图像)。鼠标经过图像中的这两个图像应大小相等;如果这两个图像大小不同,Dreamweaver 将自动调整第二个图像的大小以匹配第一个图像的属性。 鼠标经过图像自动设置为响应 onMouseOver 事件。有关设置图像以响应不同事件(例如,鼠标单击)或有关编辑鼠标经过图像以显示不同图像的信息,请参见交换图像。 若要创建鼠标经过图像,请执行以下操作:
- 在“文档”窗口中,将插入点放置在要显示鼠标经过图像的位置。
- 使用以下方法之一插入鼠标经过图像:
- 在“插入”栏中,选择“常用”,然后单击“鼠标经过图像”图标。
- 在“插入”栏中,选择“常用”,然后将“鼠标经过图像”图标拖到“文档”窗口中的所需位置。
- 选择“插入”>“交互式图像”>“鼠标经过图像”,随即显示“插入鼠标经过图像”对话框。
- 完成对话框,单击“确定”。
- 选择“文件”>“在浏览器中预览”,或按 F12 键,不能在“设计”视图中看到鼠标经过图像的效果。
- 在浏览器中,将鼠标指针移过原始图像,显示应切换到鼠标经过图像。
使用外部图像编辑器[ ]
在 Dreamweaver 中工作时,您可以在外部图像编辑器中打开选定的图像;在保存了编辑完的图像文件并返回到 Dreamweaver 时,可以在“文档”窗口中看到您对图像所做的任何更改。 您可以设置 Fireworks 作为首选外部编辑器。有关更多信息,请参见使用 Fireworks。 若要启动外部图像编辑器,请执行以下操作之一:
- 双击要编辑的图像。
- 右键单击 (Windows) 或按住 Control 键单击 (Macintosh) 要编辑的图像,然后选择“编辑以”>“浏览”并选择一个编辑器。
- 选择要编辑的图像,然后在“属性”检查器中单击“编辑”。
- 在“站点”面板中双击图像文件,启动主图像编辑器。如果您尚未指定图像编辑器,Dreamweaver 将启动该文件类型的默认编辑器。
注意: 当您从“站点”面板打开图像时,Fireworks 集成功能不会起作用;Fireworks 不打开原始 PNG 文件。若要使用 Fireworks 的集成功能,请从“文档”窗口内打开图像。 如果在返回到 Dreamweaver 窗口后没有看到更新的图像,则选择该图像,然后在“属性”检查器中单击“刷新”按钮。
参考来源[ ]
Dreamweaver使用手册导航 | ||||||
---|---|---|---|---|---|---|
|