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