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

《网页设计与制作 教学课件 作者 李广武 张逸昀 梁平 主编第5章 图像的编辑与应用.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第5章图像的编辑与应用第5章图像的编辑与应用5.1图像的插入5.2图像属性的设置5.3调用外部编辑器5.4加入图像的文字说明5.5使用交替图像5.6图像的拼接技术5.7本章小结一个没有图像的网站是不可想象的，几乎所有的网页都使用图像来点缀。图像具有直观、生动的特点。另外，图像还能跨越语言、编码标准、地域和人种的差异。那么如何在网站中加入背景图像或其他图像而使页面有特色、更加吸引人呢？下面让我们来学习一下如何在DreamweaverCS5中添加图像的技术和技巧。5.1.1内置图像的插入有以下几种方法可以把图像插入到文当中去。首先将光标移动到“文档”窗口中，将插入点放置在你要显示图像的地方，然

2、后执行以下操作之一：1、选择【插入】

3、【图像】菜单命令（其快捷键为【Ctrl+Alt+I】），出现如图5-2所示的“选择图像源文件”对话框。选中所要插入的图像文件，在右边的图像预览区预览，决定要插入后，单击【确认】按钮，如果不想插入按【取消】按钮。5.1图像的插入2、单击“插入”面板的“常用”子面板下的“图像”图标按钮，如图所示，也同样弹出如图5-2所示的对话框，后续操作方式同上。如果Dreamweaver操作界面没有显示“插入”面板，可选择【窗口】

4、【插入】菜单命令（其快捷键为【Ctrl+F2】），即可打开该面板。5.1.1内置图像的插入5.1图像的插入3、将图像文件从“站点”面板文件夹

5、里拖到“文档”窗口中的所需位置，如左图所示；或将图像文件从“资源”面板拖到“文档”窗口中的所需位置，如右图所示。5.1.1内置图像的插入5.1图像的插入4、将图像文件从“站点”面板的桌面文件夹中拖到“文档”窗口中的所需位置，如左图所示。如所选图像文件不在当前站点中，会出现如右图所示的对话框，可选择【是】按钮保存图像文件。5.1.1内置图像的插入5.1图像的插入插入背景图像执行以下步骤之一：1、选择【修改】

6、【页面属性】菜单命令（其快捷键为【Ctrl+J】），出现如图所示的“页面属性”对话框。单击“背景图像”后的“浏览”按钮，选中所要使用的背景图像文件，单击【确认】按钮。5.1.2背景图像的

7、插入5.1图像的插入2、在文档窗口中单击鼠标右键，弹出的右键菜单中选择【页面属性】菜单命令，其余操作同上。5.1.2背景图像的插入5.1图像的插入若要插入图像占位符，首先将光标移动到“文档”窗口中，将光标放置在要插入占位符的位置上，然后执行以下操作之一：1、选择【插入】

8、【图像对象】

9、【图像占位符】菜单命令，出现如左图所示的“图像占位符”对话框。按照需要完成设置，单击【确认】按钮，出现如右图所示的占位符。2、单击“插入”面板的“常用”子面板下的“图像占位符”图标按钮，也同样弹出如左图所示的对话框，后续操作方式同上。5.1.3插入图像的占位符5.1图像的插入若要替换图像占位符，可以在“文档”

10、窗口中执行以下操作之一：1、双击图像占位符，出现如左图所示的“选择图像源”对话框。选择所要替换的图像文件单击【确认】按钮，选定图像即出现在文档中。2、单击图像占位符将其选中，然后在属性检查器中单击“源文件”域旁的文件夹图标按钮，如右图所示，后续操作方式同上。5.1.3插入图像的占位符5.1图像的插入改变图像的大小，可首先在文档窗口中用鼠标选中该图像。这时图像的底部、右侧及右下角会出现调整大小的黑色小方块状控制手柄，将鼠标移到控制手柄上，这时鼠标变成双向箭头，按住鼠标左键拖动，即可改变图像的大小，如图所示。可根据调整内容的需要，执行下列操作之一，调整图像的大小：1、若要调整图像的宽度，请拖动

11、右侧的选择控制点。2、若要调整图像的高度，请拖动底部的选择控制点。3、若要同时调整图像的宽度和高度，请拖动右下角的选择控制点。5.2.1改变图像的大小5.2图像属性的设置5.2图像属性的设置5.2.2图像的对齐方式图像在浏览器中显示位置是与它本身的对齐方式有关的。你可以使用图像属性检查器来设置图像相对于网页中同一段落或同一行中的其他元素的对齐方式。图像对齐方式的好坏将影响到浏览者对整个页面的整体感觉。图像对齐方式如图所示。5.2图像属性的设置例如：在对齐下拉列表框内选择“左对齐”方式，在垂直边距文本框内输入20，在水平边距文本框内输入60，在边框文本框内输入2，如图所示。则图文混排的效果如

12、图（下方）所示。5.2.2图像的对齐方式5.2图像属性的设置5.2.4建立图像的超链接建立图像的超链接操作步骤如下：1、选中图像后，在图像的属性检查器中“链接”选项后单击文件夹图标，弹出如图所示的“选择文件”对话框。5.2图像属性的设置5.2.4建立图像的超链接2、选中所需要的文件后，单击“确认”按钮。3、在此图像的属性检查器的“目标”选项中设置所加入链接的打开方式。可以指定显示链接文档的窗口或框架名。（当图像没有链接到