DW_04在网页中插入图像

1、主讲：主讲：韩维良韩维良 2021年年7月月 网站建设网站建设 第4章在网页中插入图像 2021年7月13日星期二 教育学院 第一节第一节 认识网页图像认识网页图像 图像在网页中具有提供信息、展示作品、装饰网 页、表达个人情调和风格的作用。 用户可以在网页中使用GIF、JPEG(JPG）、PNG三 种图象格式，其中使用最广泛的是GIF和JPEG两种格式。 GifGif文件文件：无损压缩，可以使用透明背景,可以叠 加多张Gif图使用Gif动画，但色彩数少，可用于Logo 等于色彩不太丰富的图片。 JPEG(JPGJPEG(JPG）：有损压缩，压缩时忽略某些细节， 色彩丰富，照片级的格式。 3 网

2、站建设网站建设 第4章在网页中插入图像 2021年7月13日星期二 教育学院 PNGPNG：网络专用图像格式，兼有Gif、JPEG(JPG） 格式的双重优点，属于无损压缩，但色彩丰富。 4 网站建设网站建设 第4章在网页中插入图像 2021年7月13日星期二 教育学院 第二节第二节 在网页中插入图像和图像对象在网页中插入图像和图像对象 一、插入图像一、插入图像 方法：单击欲插入图像处，在“插入”栏的“常 用”类别中，单击“图像”图标或选择“插入图 像”选择一个图形文件。或者从站点文件夹中拖动 一个图像文件到网页中欲插入处。 特别说明特别说明：与添加文本不同，插入的图像不能从 别的文档中复制；必

3、须特别说明的是，插入到网页中 的图像只能以文件的形式独立存在于站点文件夹中。 5 网站建设网站建设 第4章在网页中插入图像 2021年7月13日星期二 教育学院6 网站建设网站建设 第4章在网页中插入图像 2021年7月13日星期二 教育学院 插入一幅图像后显示下列对话框： 替换文本替换文本：用于指定图像显示之前或图像无法显示 时显示的文本。当浏览网页时，鼠标指向图片上时将 作为图片提示信息显示文本框中的文本。 7 关于图像说明文件的链接，目 前浏览器都还不支持该属性。 网站建设网站建设 第4章在网页中插入图像 2021年7月13日星期二 教育学院 尽量将网站中的所有图像文件统一复制到站点的

4、images文件夹中，如果图像文件不在站点目录中，DW 会提示保存到站点目录中。 注意图像一般较大，不可过多地插入，一般情况 下，将网页文件控制在40K左右，通过状态栏知道。 通常做法通常做法：先在图像处理软件中降低分辨率，改 变文件大小，尤其是对数码相机拍摄的照片。 8 网站建设网站建设 第4章在网页中插入图像 2021年7月13日星期二 教育学院 二、插入鼠标经过图像（翻转图像）二、插入鼠标经过图像（翻转图像） 鼠标经过图像是一种在浏览器中查看并使用鼠标指针 移过它时发生变化的图像，单击则转向指定的超级链接。 用Java语言控制。 需要两张图片：一张是一般状态下的图片，另一张 是鼠标经过时

5、显示的图片。 方法：将插入点置于要建立鼠标经过图像的位置，单 击“插入”面板“常规”的“图像”中的“鼠标经过图 像”按钮。或者“插入图像对象鼠标经过图像”。 实际上用于制作网页中的超级链接。 9 网站建设网站建设 第4章在网页中插入图像 2021年7月13日星期二 教育学院10 实践操作：用素材中的图片在教师法的网页中制 作导航链接。 鼠标经过时的提示文本鼠标经过时的提示文本 网站建设网站建设 第4章在网页中插入图像 2021年7月13日星期二 教育学院11 例：用下列素材图片制作导航栏 网站建设网站建设 第4章在网页中插入图像 2021年7月13日星期二 教育学院 三、插入图像占位符三、插入

6、图像占位符 图像占位符：顾名思义，仅表示显示指定大小图像 的位置，并没有指向一个具体的图像。在代码中，是 没有指定SRC源文件的图像标签，显示为灰色空白。 实际作用在于先确定图像的显示位置大小，以后再 插入具体图像。 方法：将插入点置于要插入图像占位符的位置，单 击“插入”面板“常规”的“图像”中的“图像占位 符”按钮。或者“插入图像对象鼠标经过图像”。 12 网站建设网站建设 第4章在网页中插入图像 2021年7月13日星期二 教育学院 图像占位符的属性面板： 13 用指定的 颜色显示 占位符 SRC属性是空的 网站建设网站建设 第4章在网页中插入图像 2021年7月13日星期二 教育学院

7、四、插入四、插入FireworksHTML Fireworks是网页三剑客（Dreamweaver 、Flash 、 Fireworks）之一，用于设计制作图像，也可以生成 HTML文档。 本操作用于在网页中插入一个由Fireworks制作的 HTML文档。 方法：将插入点置于要插入图像占位符的位置，单 击“插入”面板“常规”的“图像”中的 “FireworksHTML”按钮。或者“插入图像对象 FireworksHTML”。 14 网站建设网站建设 第4章在网页中插入图像 2021年7月13日星期二 教育学院15 网站建设网站建设 第4章在网页中插入图像 2021年7月13日星期二 教育学院

8、 第三节第三节 设置图像属性设置图像属性 方法：单击选中图像，在属性面板中，设置图像的属性。 “源文件源文件”指定图像文件的存放路径。单击文件夹图标以浏 览到源文件，或者键入路径。 “垂直边距垂直边距”和“水平边距水平边距”沿图像的边缘添加边距（以像 素为单位），实为与其它内容的间距，即其它内容靠近图像的 程度。 16 替换文本替换文本 图像的内部标识图像的内部标识 网站建设网站建设 第4章在网页中插入图像 2021年7月13日星期二 教育学院 “垂直边距”沿图像的顶部和底部添加边距。 “水平边距”沿图像左侧和右侧添加边距，如文字与图片的 距离。 特别注意特别注意“对齐对齐”，左右可使图片与文

9、本的位置相对协调。，左右可使图片与文本的位置相对协调。 “边框边框”是以像素为单位的图像边框的宽度。默认为无边框， 相当于加一个相框。 “编辑编辑”启动在首选参数的“文件类型/编辑器”参数选择中指 定的图像编辑器并打开选定的图像。 “替代”中用于输入图像的提示文字。 17 网站建设网站建设 第4章在网页中插入图像 2021年7月13日星期二 教育学院 “宽”、“高”显示图像的大小尺寸。 如果改变了图像的原始大小尺寸，则在宽、高文本 框右侧会显示出“重高图像大小”按钮，单击则恢复 到原始的大小。 “原始”：指定载入正式图像前显示的低分辨率图 像。 18 网站建设网站建设 第4章在网页中插入图像

10、2021年7月13日星期二 教育学院 第四节第四节 编辑网页图像编辑网页图像 一、调整图像大小一、调整图像大小 放大、缩小图像大小放大、缩小图像大小：拖动尺寸控点或直接在属性面板中输入 宽度与高度的像素值； 等比例放大、缩小图像大小等比例放大、缩小图像大小：按住Shift同时拖动右下角控制 点； 一般不提倡修改图片的大小，应提前用图像处理软件修改到合 适的大小。 恢复图像大小恢复图像大小：删除其属性面板中的宽度、高度值，或者单击 “重高图像大小”按钮，即可恢复到原来的大小。 19 网站建设网站建设 第4章在网页中插入图像 2021年7月13日星期二 教育学院 二、重新优化图像二、重新优化图像

11、是指改变图像大小后，按照改变以后的大小进行重 新优化，增加或者删除像素，以使其变大或者变小。 图例尺寸变小后，会删除像素，重新优化会使数据 丢失，品质下降，文件变小（即图像源会改变图像源会改变）。 方法：选中图像，单击“重新取样”按钮。 20 当改变了选中的图像后，才会有效 网站建设网站建设 第4章在网页中插入图像 2021年7月13日星期二 教育学院 三、裁剪图像的显示区域三、裁剪图像的显示区域 方法：选中图像，单击“裁剪”按钮，拖动裁剪控 点，按回车结束。 注意：裁剪会改变文件的大小,被裁剪区域将删除。 21 网站建设网站建设 第4章在网页中插入图像 2021年7月13日星期二 教育学院2

12、2 裁剪我想要的 网站建设网站建设 第4章在网页中插入图像 2021年7月13日星期二 教育学院 四、调整图像的亮度和对比度四、调整图像的亮度和对比度 方法：选中图像，单击“亮度和对比度”按钮。 在亮度对比度对话框中设置亮度和对比度。 23 网站建设网站建设 第4章在网页中插入图像 2021年7月13日星期二 教育学院 五、锐化图像五、锐化图像 方法：选中图像，单击“锐化”按钮。 在锐化对话框中设置。 24 网站建设网站建设 第4章在网页中插入图像 2021年7月13日星期二 教育学院 第五节第五节 使用外部图像编辑器使用外部图像编辑器 一、设置外部图像编辑器一、设置外部图像编辑器 设置不同类

13、型图像文件编辑器：选择“编辑首 选参数文件类型/编辑器” 通过外部图像编辑器对图像文件进行修改。 前提：安装相应的图像编辑软件（如PS、FW等）。 25 网站建设网站建设 第4章在网页中插入图像 2021年7月13日星期二 教育学院26 在左边选择文件类型，右边单击左上方的加号添加图像编辑器 网站建设网站建设 第4章在网页中插入图像 2021年7月13日星期二 教育学院 二、使用外部图像编辑器二、使用外部图像编辑器 启用图像编辑器启用图像编辑器：选取图像单击属性面板中的 “编辑”按钮即可启动相应编辑器，并打开图像文件， 进行修改。 27 网站建设网站建设 第4章在网页中插入图像 2021年7月

14、13日星期二 教育学院 第六节第六节 图文混排图文混排 一、图文对齐一、图文对齐 1 1设置图像与文字的关系设置图像与文字的关系 在属性面板的对齐列表框中选择合适的对齐方式。 设置图像相对于同一段落或行中其他元素的对齐方 式，即图像与文字在垂直方向上的对齐方式。 （特别注意特别注意） 。 28 网站建设网站建设 第4章在网页中插入图像 2021年7月13日星期二 教育学院 例：例：在一个表格，添加适当的文本，再输入 一幅图像，设置对齐的各种方式。 2 2、对齐图像、对齐图像 可以使用对齐按钮（左对齐、右对齐、居中对齐） 设置图像的水平对齐方式。 方法：单击图像前或后，不要选中图像，再在属性 面板中设置左中右对齐。 29 网站建设网站建设 第4章在网页中插入图像 2021年7月13日星期二 教育学院 二、设置图文间距二、设置图文间距 用于设置上下、左右与文本之间的间距。 方法：选中图像，在垂直边距和水平边距中