网页设计与制作 教学课件 ppt 作者 李广武 张逸昀 梁平 主编第5章 图像的编辑与应用.pptVIP

第5章 图像的编辑与应用 第5章 图像的编辑与应用 5.1 图像的插入 5.2 图像属性的设置 5.3 调用外部编辑器 5.4 加入图像的文字说明 5.5 使用交替图像 5.6 图像的拼接技术 5.7 本章小结 一个没有图像的网站是不可想象的，几乎所有的网页都使用图像来点缀。图像具有直观、生动的特点。另外，图像还能跨越语言、编码标准、地域和人种的差异。那么如何在网站中加入背景图像或其他图像而使页面有特色、更加吸引人呢？下面让我们来学习一下如何在Dreamweaver CS5中添加图像的技术和技巧。 5.1.1内置图像的插入 有以下几种方法可以把图像插入到文当中去。首先将光标移动到“文档”窗口中，将插入点放置在你要显示图像的地方，然后执行以下操作之一： 1、选择【插入】|【图像】菜单命令（其快捷键为【Ctrl+Alt+I】），出现如图5-2所示的“选择图像源文件”对话框。选中所要插入的图像文件，在右边的图像预览区预览，决定要插入后，单击【确认】按钮，如果不想插入按【取消】按钮。 5.1 图像的插入 2、单击“插入”面板的“常用”子面板下的“图像” 图标按钮 ，如图所示，也同样弹出如图5-2所示的对话框，后续操作方式同上。如果Dreamweaver 操作界面没有显示“插入”面板，可选择【窗口】|【插入】菜单命令（其快捷键为【Ctrl+F2】），即可打开该面板。 5.1.1内置图像的插入 5.1 图像的插入 3、将图像文件从“站点”面板文件夹里拖到“文档”窗口中的所需位置，如左图所示；或将图像文件从“资源”面板拖到“文档”窗口中的所需位置，如右图所示。 5.1.1内置图像的插入 5.1 图像的插入 4、将图像文件从“站点”面板的桌面文件夹中拖到“文档”窗口中的所需位置，如左图所示。如所选图像文件不在当前站点中，会出现如右图所示的对话框，可选择【是】按钮保存图像文件。 5.1.1内置图像的插入 5.1 图像的插入 插入背景图像执行以下步骤之一： 1、选择【修改】|【页面属性】菜单命令（其快捷键为【Ctrl+J】），出现如图所示的“页面属性”对话框。单击“背景图像”后的“浏览”按钮，选中所要使用的背景图像文件，单击【确认】按钮。 5.1.2 背景图像的插入 5.1 图像的插入 2、在文档窗口中单击鼠标右键，弹出的右键菜单中选择【页面属性】菜单命令，其余操作同上。 5.1.2 背景图像的插入 5.1 图像的插入 若要插入图像占位符，首先将光标移动到“文档”窗口中，将光标放置在要插入占位符的位置上，然后执行以下操作之一： 1、选择【插入】|【图像对象】|【图像占位符】菜单命令，出现如左图所示的“图像占位符”对话框。按照需要完成设置，单击【确认】按钮，出现如右图所示的占位符。 2、单击“插入”面板的“常用”子面板下的“图像占位符” 图标按钮 ，也同样弹出如左图所示的对话框，后续操作方式同上。 5.1.3 插入图像的占位符 5.1 图像的插入 若要替换图像占位符，可以在 “文档”窗口中执行以下操作之一： 1、双击图像占位符，出现如左图所示的“选择图像源”对话框。选择所要替换的图像文件单击【确认】按钮，选定图像即出现在文档中。 2、单击图像占位符将其选中，然后在属性检查器中单击“源文件”域旁的文件夹图标按钮 ，如右图所示，后续操作方式同上。 5.1.3 插入图像的占位符 5.1 图像的插入 改变图像的大小，可首先在文档窗口中用鼠标选中该图像。这时图像的底部、右侧及右下角会出现调整大小的黑色小方块状控制手柄，将鼠标移到控制手柄上，这时鼠标变成双向箭头，按住鼠标左键拖动，即可改变图像的大小，如图所示。 可根据调整内容的需要，执行下列操 作之一，调整图像的大小： 1、若要调整图像的宽度，请拖动右 侧的选择控制点。 2、若要调整图像的高度，请拖动底 部的选择控制点。 3、若要同时调整图像的宽度和高度， 请拖动右下角的选择控制点。 5.2.1 改变图像的大小 5.2 图像属性的设置 5.2 图像属性的设置 5.2.2 图像的对齐方式 图像在浏览器中显示位置是与它本身的对齐方式有关的。你可以使用图像属性检查器来设置图像相对于网页中同一段落或同一行中的其他元素的对齐方式。图像对齐方式的好坏将影响到浏览者对整个页面的整体感觉。图像对齐方式如图所示。 5.2 图像属性的设置 例如：在对齐下拉列表框内选择“左对齐”方式，在垂直边距文本框内输入20，在水平边距