三章 网页图文——网页上的图像编辑.pptVIP

教学任务 教学重点与难点 3.3.2创建图像的特殊效果---创建鼠标经过图像 在文档窗口中，讲鼠标插入点放在要显示鼠标经过的位置。 选择【插入】 【图像对象】 【鼠标经过图像】命令，打开对话框。 在“图像名称”中输入名称，在“原始图像中”单击“浏览”选项原始图像。 在“鼠标经过图像”单击“浏览”选择鼠标经过时的图像，单击“确定”按钮。 3.3.2创建图像的特殊效果---图像映射 图像映射是将图像划分为若干个区域，每个区域被称为一个热区，热 区可以是不同形状的，如圆形、矩形和不规则多边形等。操作步骤如下： 执行【插入】 【图像】命令，在文档区窗口中插入一副图像。 选定图像，在属性面板中的左下角中选择热点工具中的一种 将光标移动到图像上并按下鼠标拖动，在”替换”文本框中输入热区的说明或者 提示。当浏览时，鼠标指向该热区时就会显示此处输入的文字。 第三章 网页图文 第三章 网页图文 韦妍 网页设计与制作 多媒体元素的插入 网页上的文本编辑 网页上的图像编辑 CSS样式设置文本格式 1 2 3 4 多媒体元素的插入 网页上的图像编辑 CSS样式设置文本格式 2 3 4 * 3.2 网页上的图像编辑 3.3.1 图像的插入与编辑 1. 样网页图像的格式 GIF图像：图像的占用空间较小，最多支持256种颜色。GIF图像可以在网页中以透明方式显示，还包含动态信息。常用于站点图标LOGO、广告条BANNER。 JPEG(JPG)图像 ：JPEG图像格式可以高效地压缩，使得图像文件在变小的同时基本不丢失颜色，通常用来显示照片等颜色丰富的图像。 PNG图像：意为便携网络图像，是逐渐流行的网络图像格式。PNG格式可以说是GIF格式和JPEG格式的综合应用。 * 3.3.1图像的插入与编辑 2.在网页中插入图像 将光标放在要插入图像的位置，然后采用以下二种方法插入图像： 方法一：在菜单栏中单击【插入】→【图像】命令。 方法二：在【插入】（常用）面板中单击【图像】按钮 。 出现【选择图像源文件】对话框后，在“查找范围”菜单中切换文件所在的文件夹，接着在列表中选择文件名，然后选择 按钮，如图所示。 3.2 网页上的图像编辑 * 3.3.1 图像的插入与编辑 3.修改图像大小 移动鼠标选取图片后，接着打开【属性】面板，分别在“宽”和“高”栏中输入图片的宽度和高度。也可以将鼠标指向图像右下角的控点，指针变为 箭头时，拖动鼠标即可调整图像大小。 接着在“对齐”列表中选择图像的对齐方式。 3.2 网页上的图像编辑 * 3.3.1 图像的插入与编辑 4.为图像添加替换文本 移动鼠标选取图像后，打开【属性】面板，然后在“替换”栏输入要显示的图像替代说明文本，如下图所示。 3.2 网页上的图像编辑 * 3.3.1图像的插入与编辑 5.查看网页效果 移动鼠标单击 【在浏览器中预览/调试】 按钮，然后从弹出的菜单中选择【预览在iexplore】选项。 也可以按下【F12】键，打开浏览器窗口，将鼠标移到图像上，则鼠标下方就会显示出替代说明文本，如图所示。 3.2 网页上的图像编辑 * 4.1.2 网页背景图的设置 移动鼠标到菜单栏执行【修改】→【页面属性】命令或单击【属性】面板中的 按钮。 出现“页面属性”对话框后，移动鼠标单击外观（CSS）或外观（HTML）下【浏览】按钮。 出现“选择图像源文件”对话框后，在“查找范围”栏中切换文件所在磁盘与文件夹，接着在列表中选择背景图片文件，然后单击 按钮。 网页的背景图会以贴磁砖的方式重复排列来显示（如图所示）， 3.2网页上的图像编辑 3.2网页上的图像编辑 3.2 网页上的图像编辑 * 3.2.3项目实训 项目一 1. 实训题目 “长城—世界建筑史上一大奇迹”网页 2. 实训目的 通过制作该网页作，可以掌握文本的标题设置、文字的移动和复制、文字的查找与替换等基本设计过程。 * 3. 实训案例效果 3.2.3项目实训