10
教育学院
网站建设
第4章在网页中插入图像
例：用下列素材图片制作导航栏
2019年4月21日星期日
11
教育学院
网站建设
第4章在网页中插入图像
三、插入图像占位符
图像占位符：顾名思义，仅表示显示指定大小图 像的位置，并没有指向一个具体的图像。在代码中， 是没有指定SRC源文件的图像标签，显示为灰色空白。 实际作用在于先确定图像的显示位置大小，以后 再插入具体图像。 方法：将插入点置于要插入图像占位符的位置，
教育学院
网站建设
第4章在网页中插入图像
第二节 在网页中插入图像和图像对象
一、插入图像
方法：单击欲插入图像处，在“插入”栏的“常 用”类别中，单击“图像”图标或选择“插入／图
像”→选择一个图形文件。或者从站点文件夹中拖动
一个图像文件到网页中欲插入处。 特别说明：与添加文本不同，插入的图像不能从 别的文档中复制；必须特别说明的是，插入到网页中 的图像只能以文件的形式独立存在于站点文件夹中。
距离。
特别注意“对齐”，左右可使图片与文本的位置相对协调。
“边框”是以像素为单位的图像边框的宽度。默认为无边框，
相当于加一个相框。
“编辑”启动在首选参数的“文件类型/编辑器”参数选择中指 定的图像编辑器并打开选定的图像。
“替代”中用于输入图像的提示文字。
2019年4月21日星期日
17
教育学院
网站建设
击“插入”面板“常规”的“图像”中的“鼠标经过图
像”按钮。或者“插入—图像对象—鼠标经过图像”。 实际上用于制作网页中的超级链接。
2019年4月21日星期日 9 教育学院
网站建设
第4章在网页中插入图像
鼠标经过时的提示文本
实践操作：用素材中的图片在教师法的网页中制 作导航链接。
2019年4月21日星期日
览到源文件，或者键入路径。
“垂直边距”和“水平边距”沿图像的边缘添加边距（以像 素为单位），实为与其它内容的间距，即其它内容靠近图像的 程度。
图像的内部标识 替换文本
2019年4月21日星期日
16
教育学院
网站建设
第4章在网页中插入图像
“垂直边距”沿图像的顶部和底部添加边距。 “水平边距”沿图像左侧和右侧添加边距，如文字与图片的
单击“插入”面板“常规”的“图像”中的“图像占
位符”按钮。或者“插入—图像对象—鼠标经过图 像”。
2019年4月21日星期日 12 教育学院
网站建设
第4章在网页中插入图像
用指定的 颜色显示 占位符
图像占位符的属性面板：
SRC属性是空的
2019年4月21日星期日
13
教育学院
网站建设
第4章在网页中插入图像
主讲：韩维良
2019年4月
第4章在网页中插入图像
第一节 认识网页图像
图像在网页中具有提供信息、展示作品、装饰网页、 表达个人情调和风格的作用。 用户可以在网页中使用 GIF 、 JPEG(JPG ）、 PNG 三种
图象格式，其中使用最广泛的是GIF和JPEG两种格式。
Gif 文件：无损压缩，可以使用透明背景 , 可以叠加 多张 Gif 图使用 Gif 动画，但色彩数少，可用于 Logo 等
2019年4月21日星期日
5
教育学院
网站建设
第4章在网页中插入图像
2019年4月21日星期日
6
教育学院
网站建设
第4章在网页中插入图像
插入一幅图像后显示下列对话框：
关于图像说明文件的链接，目 前浏览器都还不支持该属性。
替换文本：用于指定图像显示之前或图像无法显示
时显示的文本。当浏览网页时，鼠标指向图片上时将 作为图片提示信息显示文本框中的文本。
于色彩不太丰富的图片。
JPEG(JPG ）：有损压缩，压缩时忽略某些细节，色 彩丰富，照片级的格式。
2019年4月21日星期日 3 教育学院
网站建设
第4章在网页中插入图像
PNG：网络专用图像格式，兼有Gif、JPEG(JPG） 格式的双重优点，属于无损压缩，但色彩丰富。
2019年4月21日星期日
4
第4章在网页中插入图像
“宽”、“高”显示图像的大小尺寸。 如果改变了图像的原始大小尺寸，则在宽、高文本
框右侧会显示出“重高图像大小”按钮，单击则恢复
到原始的大小。
“原始”：指定载入正式图像前显示的低分辨率图 像。
2019年4月21日星期日
18
教育学院
网站建设
第4章在网页中插入图像
第四节 编辑网页图像
四、插入FireworksHTML
Fireworks是网页三剑客（Dreamweaver 、Flash 、 Fireworks）之一，用于设计制作图像，也可以生成 HTML文档。 本操作用于在网页中插入一个由Fireworks制作的 HTML文档。 方法：将插入点置于要插入图像占位符的位置，
单击“插入”面板“常规”的“图像”中的
2019年4月21日星期日
7
教育学院
网站建设
第4章在网页中插入图像
尽量将网站中的所有图像文件统一复制到站点的 images文件夹中，如果图像文件不在站点目录中，DW
会提示保存到站点目录中。
注意图像一般较大，不可过多地插入，一般情况 下，将网页文件控制在40K左右，通过状态栏知道。 通常做法：先在图像处理软件中降低分辨率，改 变文件大小，尤其是对数码相机拍摄的照片。
2019年4月21日星期日
8
教育学院
网站建设
第4章在网页中插入图像
二、插入鼠标经过图像（翻转图像）
鼠标经过图像是一种在浏览器中查看并使用鼠标指针 移过它时发生变化的图像，单击则转向指定的超级链接。 用Java语言控制。 需要两张图片：一张是一般状态下的图片，另一张 是鼠标经过时显示的图片。 方法：将插入点置于要建立鼠标经过图像的位置，单
“FireworksHTML”按钮。或者“插入—图像对象— FireworksHTML”。
2019年4月21日星期日 14 教育学院
网站建设
第4章在网页中插入图像
2019年4月21日星期日
15
教育学院
网站建设
第4章在网页中插入图像
第三节 设置图像属性
方法：单击选中图像，在属性面板中，设置图像的属性。 “源文件”指定图像文件的存放路径。单控点或直接在属性面板中输入 宽度与高度的像素值； 等比例放大、缩小图像大小：按住 Shift 同时拖动右下角控制 点； 一般不提倡修改图片的大小，应提前用图像处理软件修改到合 适的大小。 恢复图像大小：删除其属性面板中的宽度、高度值，或者单击 “重高图像大小”按钮，即可恢复到原来的大小。