|
（片头）
在上一讲中，我们继续学习了有关网页文字的知识，同时，我也学习了插入图像的方法。在本讲中，我们将学习如何设置网页图像。通过本讲的学习，我们希望达到下面的学习目标：
学会插入图像占位符
学会对齐图像
学会调整图像及其他网页元素的大小
学会裁剪图像
学会调整图像的亮度和对比度
学会锐化图像
学会创建鼠标经过图像
学会使用外部图像编辑器
（片尾）
通过本讲的学习，我们学习了下面的内容：
插入图像占位符
对齐图像
调整图像及其他网页元素的大小
裁剪图像
调整图像的亮度和对比度
锐化图像
创建鼠标经过图像
使用外部图像编辑器
作业：
1. 创建一个页面，并向页面插入一个图像，然后调整图像的亮度和对比度。
2. 创建一个页面，并向页面插入一个图像，然后锐化该图像。
3. 创建鼠标经过图像效果
22.1 插入图像
22.1.1 插入图像占位符
在设计网页布局的流程中，往往无法确定最终使用的是哪一幅图像，但是在正在设计的布局中又必须为未来的图像留有存放的空间。图像占位符是在准备好将最终图像添加到
Web 页之前在设计布局时使用的图像。 如果要插入图像占位符，可以先将插入点放置在要插入占位符图像的位置，然后，选择下列操作之一，打开“图像占位符”对话框：
在“常用”插入栏中，单击“图像占位符”图标；
选择“插入”>“图像占位符”。
在“图像占位符”对话框中，用户可以设置占位符的大小和颜色，并为占位符设置替代文本。“图像占位符”对话框的选项如下：
在“名称”文本框中，输入要作为图像占位符的标签文字显示的文本。这是可选选项。如果不想显示标签文字，可将此文本框留空。名称必须以字母开头，并且只能包含字母和数字，不允许使用空格和高位
ASCII 字符；
在“宽度”和“高度”文本框中，以像素为单位键入数字以设置图像大小。这是必需设置的选项；
“颜色”选项是可选的；
在“替换文本”中，为使用只显示文本的浏览器的访问者输入描述该图像的文本。该选项也是可选的；
单击“确定”。 文档中即会出现图像占位符。HTML 代码中将自动插入一个包含空 src 属性的图像标签。但是，当在浏览器中查看时，不显示标签文字和大小文本。
图像占位符不是在浏览器中显示的图形图像。在用户发布站点之前，应该用适用于 Web 的图像文件替换所有添加的图像占位符。如果要替换图像占位符，则先选择该图像占位符，然后选择下列操作之一打开“选择图像源文件”对话框：
双击图像占位符；
在属性检查器中单击“源文件”文本框旁的文件夹图标。
在“选择图像源文件”对话框中，选择替换图像占位符的图像。单击“确定”后，选定图像即出现在文档中。
22.1.2 对齐图像
用户可以将图像与同一行中的文本、另一个图像、插件或其它元素对齐。还可以设置图像的水平对齐方式。如果要对齐图像，先要选择该图像，然后在属性检查器中设置该图像的对齐属性。对齐选项如下：
“默认值”通常指定基线对齐；
“基线和底部”将文本或同一段落中的其它元素的基线与选定对象的底部对齐；
“顶端”将图像的顶端与当前行中最高项的图像或文本的顶端对齐；
“居中”将图像的中部与当前行的基线对齐；
“文本上方”将图像的顶端与文本行中最高字符的顶端对齐；
“绝对居中”将图像的中部与当前行中文本的中部对齐；
“绝对底部”将图像的底部与文本行的底部对齐；
“左对齐”将所选图像放置在左边，文本在图像的右侧换行。如果左对齐文本在行上处于对象之前，它通常强制左对齐对象换到一个新行；
“右对齐”将图像放置在右边，文本在对象的左侧换行。如果右对齐文本在行上处于对象之前，它通常强制右对齐对象换到一个新行。
22.1.3 调整图像及其他网页元素的大小
用户可以在 Dreamweaver 中以可视化的形式调整元素的大小，这些元素包括图像、插件、Macromedia Shockwave 或
Flash 文件、applet 和 ActiveX 控件等。在 Dreamweaver 中以可视方式调整图像大小有助于用户看到不同尺寸的图像对布局的影响情况。以可视方式调整图像大小不会将图像文件缩放用户指定的比例。如果用户确实在
Dreamweaver 中以可视方式调整了图像的大小，但是没有使用图像编辑应用程序（如 Macromedia Fireworks）将图像文件缩放到所需大小，则在载入页面时用户的浏览器必须缩放图像。这可能会导致用户浏览器中页面下载延迟和图像显示不正确。如果要缩短下载时间并确保所有图像实例以相同大小显示，请使用图像编辑应用程序缩放图像。
以可视方式最小可以将元素大小调整到 8 x 8 像素。若要将元素的宽度和高度调整到更小的大小（如 1 x 1 像素），则必须使用属性检查器设定图像的大小。
如果要以可视方式调整元素的大小，则先要在“设计”视图中选择该元素。元素的底部、右侧及右下角出现调整大小手柄。如果未出现调整大小控制点，则单击要调整大小的元素以外的部分然后重新选择它，或在标签选择器中单击相应的标签以选择该元素。然后可以选择下列操作之一调整元素的大小：
若要调整元素的宽度，请拖动右侧的选择控制点。
若要调整元素的高度，请拖动底部的选择控制点。
若要同时调整元素的宽度和高度，请拖动顶角的选择控制点。
若要在调整元素尺寸时保持元素的比例（其宽高比），请在按住 Shift 键的同时拖动顶角的选择控制点。
若要将已调整大小的元素返回到原始尺寸，请在属性检查器中删除“宽”和“高”文本框中的值，或者单击“重设大小”按钮。如果要重新取样已调整大小的图像，则单击在图像属性检查器中的“重新取样”按钮。
22.1.4 裁剪图像
Dreamweaver 支持裁剪位图文件图像。使用 Dreamweaver 裁剪时，会更改磁盘上的源图像文件，因此，用户需要备份图像文件，以在需要回复到原始图像时使用。
如果要裁剪图像文件，可以依照下列步骤操作：
1. 选择图像，并执行下列操作之一：
单击图像属性检查器中的“裁剪工具”；
选择“修改”>“图像”>“裁剪”。
2. 此时显示一个对话框通知用户正在裁剪的图像文件将在磁盘上更改。单击“确定”；
3. 所选图像周围会出现裁剪控制点。调整裁剪控制点直到边界框包含的图像区域符合所需大小；
4. 在边界框内部双击或按 Enter 键裁剪所选区域。所选位图的边界框外的所有像素都将被删除；
5. 选择“编辑”>“撤消裁剪”回复原始图像。在退出 Dreamweaver 或在外部图像编辑应用程序中编辑该文件之前，用户可以撤消“裁剪”命令的效果。
22.1.5 调整图像的亮度和对比度
“亮度/对比度”修改图像中像素的亮度或对比度。这将影响图像的高亮显示、阴影和中间色调。修正过暗或过亮的图像时通常使用“亮度/对比度”。如果要调整图像的亮度和对比度，可以依照下列步骤操作：
1. 选择图像，并选择下列操作之一，打开“亮度/对比度”对话框：
单击图像属性检查器中的“亮度/对比度”按钮。
选择“修改”>“图像”>“亮度/对比度”
2. 拖动亮度和对比度滑动块调整设置。值的范围是从 -100 到 100；
3. 单击“确定”。
22.1.6 锐化图像
锐化将增加对象边缘的像素的对比度，从而增加图像清晰度或锐度。如果要锐化图像，可以依照下列步骤操作：
1. 选择图像，并选择下列操作之一，打开“锐化”对话框：
单击图像属性检查器中的“锐化”按钮；
选择“修改”>“图像”>“锐化”。
2. 可以通过拖动滑块控件或在文本框中输入一个 0 到 10 之间的值，来指定 Dreamweaver 应用于图像的锐化程度。 如果选择了“预览”选项，则可以预览对该图像所做的更改；
3. 单击“确定”。
4. 选择“文件”>“保存”以保存更改，或选择“编辑”>“撤消锐化”回复到原始图像。但是，只能在保存包含图像的页面之前撤消“锐化”命令的效果。
22.1.7 创建鼠标经过图像
用户可以在页面中插入鼠标经过图像。鼠标经过图像是一种在浏览器中查看并使用鼠标指针移过它时发生变化的图像。鼠标经过图像自动设置为响应
onMouseOver 事件。
如果要创建鼠标经过图像，可以依照下列步骤操作：
1. 在“文档”窗口中，将插入点放置在要显示鼠标经过图像的位置；
2. 使用以下方法之一插入鼠标经过图像：
在“插入”栏中，选择“常用”，然后单击“鼠标经过图像”图标；
在“插入”栏中，选择“常用”，然后将“鼠标经过图像”图标拖到“文档”窗口中的所需位置；
选择“插入”>“图像对象”>“鼠标经过图像”。
3. 出现“插入鼠标经过图像”对话框。设置“鼠标经过图像”对话框选项：
在“图像名称”文本框中，键入鼠标经过图像的名称；
在“原始图像”文本框中，单击“浏览”并选择要在载入页时显示的图像，或在文本框中输入图像文件的路径；
在“鼠标经过图像”文本框中，单击“浏览”并选择要在鼠标指针滑过原始图像时显示的图像，或在文本框中输入图像文件的路径；
如果希望图像预先载入浏览器的缓存中，以便用户将鼠标指针滑过图像时不发生延迟，请选择“预先载入图像”选项；
在“替换文本”中，为使用只显示文本的浏览器的访问者输入描述该图像的文本，这是可选选项；
在“单击时，转到 URL”文本框中，单击“浏览”并选择文件，或者键入在用户单击鼠标经过图像时要打开的文件的路径。如果您不为该图像设置链接，Dreamweaver
将在 HTML 源代码中插入一个空链接 （#），该链接上将附加鼠标经过图像行为。如果删除该空链接，鼠标经过图像将不再起作用。
4. 单击“确定”，关闭“插入鼠标经过图像”对话框。
5. 按 F12 键，在浏览器中预览效果。预览效果时将鼠标指针移过原始图像。显示应切换到鼠标经过图像。
22.1.8 使用外部图像编辑器
在 Dreamweaver 中工作时，用户可以在外部图像编辑器中打开并编辑选定的图像，在保存了编辑完的图像文件并返回到 Dreamweaver
时，可以在“文档”窗口中看到用户对图像所做的任何更改。
在“首选参数”对话框的“文件类型/编辑器”类别中，可以设置某种文件的外部编辑器。
先选择扩展名选项中的某一扩展名，单击该对话框的扩展名选项上面的加号（+）或减号（-），可以添加或删除某种文件的扩展名。
先选择扩展名选项中的某一扩展名，然后单击编辑器选项上面的加号（+）或减号（-），可以为使用该文件扩展名的文件添加或删除一种外部编辑器。推荐将Fireworks选作为外部图像编辑器。
如果要启动外部图像编辑器，可以选择下列操作之一：
双击要编辑的图像；
右键单击要编辑的图像，然后从上下文菜单中选择“编辑以”>“浏览”并选择一个编辑器；
选择要编辑的图像，然后在属性检查器中单击“编辑”。
在“站点”面板中双击图像文件，启动主图像编辑器。如果用户尚未指定图像编辑器，Dreamweaver 将启动该文件类型的默认编辑器。
如果在返回到 Dreamweaver 窗口后没有看到更新的图像，则选择该图像，然后在属性检查器中单击“刷新”按钮。 |