第14讲设计多彩的网页图像.docVIP

PAGE  PAGE 6 第二十二讲 设计多彩的网页图像 在上一讲中，我们继续学习了有关网页文字的知识，同时，我也学习了插入图像的方法。在本讲中，我们将学习如何设置网页图像。通过本讲的学习，我们希望达到下面的学习目标： ◆ 学会插入图像占位符； ◆ 学会对齐图像； ◆ 学会调整图像及其他网页元素的大小； ◆ 学会裁剪图像； ◆ 学会调整图像的亮度和对比度； ◆ 学会锐化图像； ◆ 学会创建鼠标经过图像； ◆ 学会使用外部图像编辑器。 22.1 设置图像的各种属性 如果要设置图像的各种属性可以选中图像后打开图像的属性检查器，设置图像的下列选项： ? ◇插入图像缩略图旁的文本框设置图像用于脚本程序的名称； ? ◇“宽”和“高”以像素为单位指定图像的宽度和高度。当在页中插入图像 时，Dreamweaver 自动用图像的原始尺寸更新这些文本框。如果设置的 “宽”和“高”的值与图像的实际宽度和高度不相符，则该图像在浏览器中 可能不会正确显示。若要恢复原始值，请单击用于输入新值的“宽”和“高”文本框右侧的“重设图像大小”按 钮。这里对图像显示大小的更改是不会缩短下载时间，因为浏览器在缩放图 像前会下载所有图像数据。若要缩短下载时间并确保所有图像实例以相同大 小显示，请使用图像编辑应用程序缩放图像； ? ◇“源文件”指定图像的源文件。单击文件夹图标以浏览到源文件，或者键入 路径； ? ◇“链接”指定图像的超链接。将“指向文件”图标拖到“站点”面板中的某 个文件，单击文件夹图标浏览到站点上的某个文档，或手动键入 URL； ? ◇“对齐”对齐同一行上的图像和文本； ? ◇“替代”设置图像的替代文本； ? ◇“垂直边距”和“水平边距”以像素为单位沿图像的边缘添加边距。“垂直 边距”沿图像的顶部和底部添加边距。“水平边距”沿图像左侧和右侧添加 边距。 ? ◇“目标”指定链接的网页应当在其中载入的框架或窗口。可选用下列保留目 标名： ? ★_blank 将链接的文件载入一个未命名的新浏览器窗口中； ? ★_parent 将链接的文件载入含有该链接的框架的父框架集或父窗口中。如 果包含链接的框架不是嵌套的，则链接文件加载到整个浏览器窗口中； ? ★_self 将链接的文件载入该链接所在的同一框架或窗口中。此目标是默认 的，所以通常不需要指定它； ? ★_top 将链接的文件载入整个浏览器窗口中，因而会删除所有框架。 ? ◇“低解析度源”指定在载入主图像之前应该载入的图像。使用主图像的 2 位 （黑和白）版本作为低解析度版本的图像，该图像可以迅速载入并使访问者 对他们等待看到的内容有所了解。 ? ◇“边框”是以像素为单位的图像边框的宽度。默认为无边框； ? ◇“编辑”启动在“外部编辑器”首选参数中指定的图像编辑器并打开选定的 图像。有关设置外部图像编辑器的信息； ? ◇“使用Fireworks最优化”打开“优化”对话框； ? ◇“裁剪”可修剪图像的大小，从所选图像中删除不需要的区域。 ? ◇“重新取样”可重新取样已调整大小的图像，提高图片在新的大小和形状下 的品质。 ? ◇“亮度和对比度”可让您调整图像的亮度和对比度设置。 ? ◇“锐化”可让您调整图像的清晰度。 22.2 插入图像占位符 在设计网页布局的流程中，往往无法确定最终使用的是哪一幅图像，但是在正在设计的布局中又必须为未来的图像留有存放的空间。图像占位符是在准备好将最终图像添加到 Web 页之前在设计布局时使用的图像。 如果要插入图像占位符，可以先将插入点放置在要插入占位符图像的位置，然后，选择下列操作之一，打开“图像占位符”对话框： ? ◇在“常用”插入栏中，单击“图像”按钮，从下拉菜单中选择“图像占位 符”图标； ? ◇选择“插入”“图像占位符”。 在“图像占位符”对话框中，用户可以设置占位符的大小和颜色，并为占位符设置替代文本。“图像占位符”对话框的选项如下： ? ◇在“名称”文本框中，输入要作为图像占位符的标签文字显示的文本。这是 可选选项。如果不想显示标签文字，可将此文本框留空。名称必须以字母开 头，并且只能包含字母和数字，不允许使用空格和高位 ASCII 字符； ? ◇在“宽度”和“高度”文本框中，以像素为单位键入数字以设置图像大小。