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