DW_04在网页中插入图像

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

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

3、网站建设网站建设第4章在网页中插入图像2022年4月4日星期一教育学院6网站建设网站建设第4章在网页中插入图像2022年4月4日星期一教育学院插入一幅图像后显示下列对话框：替换文本替换文本：用于指定图像显示之前或图像无法显示时显示的文本。当浏览网页时，鼠标指向图片上时将作为图片提示信息显示文本框中的文本。7关于图像说明文件的链接，目前浏览器都还不支持该属性。网站建设网站建设第4章在网页中插入图像2022年4月4日星期一教育学院尽量将网站中的所有图像文件统一复制到站点的images文件夹中，如果图像文件不在站点目录中，DW会提示保存到站点目录中。 注意图像一般较大，不可过多地插入，一般情况下，将

4、网页文件控制在40K左右，通过状态栏知道。 通常做法通常做法：先在图像处理软件中降低分辨率，改变文件大小，尤其是对数码相机拍摄的照片。8网站建设网站建设第4章在网页中插入图像2022年4月4日星期一教育学院二、插入鼠标经过图像（翻转图像）二、插入鼠标经过图像（翻转图像）鼠标经过图像是一种在浏览器中查看并使用鼠标指针移过它时发生变化的图像，单击则转向指定的超级链接。用Java语言控制。 需要两张图片：一张是一般状态下的图片，另一张是鼠标经过时显示的图片。方法：将插入点置于要建立鼠标经过图像的位置，单击“插入”面板“常规”的“图像”中的“鼠标经过图像”按钮。或者“插入图像对象鼠标经过图像”。实际上

5、用于制作网页中的超级链接。9网站建设网站建设第4章在网页中插入图像2022年4月4日星期一教育学院10实践操作：用素材中的图片在教师法的网页中制作导航链接。鼠标经过时的提示文本鼠标经过时的提示文本网站建设网站建设第4章在网页中插入图像2022年4月4日星期一教育学院11例：用下列素材图片制作导航栏网站建设网站建设第4章在网页中插入图像2022年4月4日星期一教育学院三、插入图像占位符三、插入图像占位符图像占位符：顾名思义，仅表示显示指定大小图像的位置，并没有指向一个具体的图像。在代码中，是没有指定SRC源文件的图像标签，显示为灰色空白。实际作用在于先确定图像的显示位置大小，以后再插入具体图像。

6、方法：将插入点置于要插入图像占位符的位置，单击“插入”面板“常规”的“图像”中的“图像占位符”按钮。或者“插入图像对象鼠标经过图像”。12网站建设网站建设第4章在网页中插入图像2022年4月4日星期一教育学院图像占位符的属性面板：13用指定的颜色显示占位符SRC属性是空的网站建设网站建设第4章在网页中插入图像2022年4月4日星期一教育学院四、插入四、插入FireworksHTMLFireworks是网页三剑客（Dreamweaver 、Flash 、Fireworks）之一，用于设计制作图像，也可以生成HTML文档。本操作用于在网页中插入一个由Fireworks制作的HTML文档。方法：将插

7、入点置于要插入图像占位符的位置，单击“插入”面板“常规”的“图像”中的“FireworksHTML”按钮。或者“插入图像对象FireworksHTML”。14网站建设网站建设第4章在网页中插入图像2022年4月4日星期一教育学院15网站建设网站建设第4章在网页中插入图像2022年4月4日星期一教育学院第三节第三节 设置图像属性设置图像属性方法：单击选中图像，在属性面板中，设置图像的属性。“源文件源文件”指定图像文件的存放路径。单击文件夹图标以浏览到源文件，或者键入路径。“垂直边距垂直边距”和“水平边距水平边距”沿图像的边缘添加边距（以像素为单位），实为与其它内容的间距，即其它内容靠近图像的程度

8、。 16替换文本替换文本图像的内部标识图像的内部标识网站建设网站建设第4章在网页中插入图像2022年4月4日星期一教育学院“垂直边距”沿图像的顶部和底部添加边距。“水平边距”沿图像左侧和右侧添加边距，如文字与图片的距离。特别注意特别注意“对齐对齐”，左右可使图片与文本的位置相对协调。，左右可使图片与文本的位置相对协调。“边框边框”是以像素为单位的图像边框的宽度。默认为无边框，相当于加一个相框。 “编辑编辑”启动在首选参数的“文件类型/编辑器”参数选择中指定的图像编辑器并打开选定的图像。“替代”中用于输入图像的提示文字。 17网站建设网站建设第4章在网页中插入图像2022年4月4日星期一教育学院

9、“宽”、“高”显示图像的大小尺寸。如果改变了图像的原始大小尺寸，则在宽、高文本框右侧会显示出“重高图像大小”按钮，单击则恢复到原始的大小。“原始”：指定载入正式图像前显示的低分辨率图像。18网站建设网站建设第4章在网页中插入图像2022年4月4日星期一教育学院第四节第四节 编辑网页图像编辑网页图像一、调整图像大小一、调整图像大小放大、缩小图像大小放大、缩小图像大小：拖动尺寸控点或直接在属性面板中输入宽度与高度的像素值；等比例放大、缩小图像大小等比例放大、缩小图像大小：按住Shift同时拖动右下角控制点；一般不提倡修改图片的大小，应提前用图像处理软件修改到合适的大小。恢复图像大小恢复图像大小：删

10、除其属性面板中的宽度、高度值，或者单击“重高图像大小”按钮，即可恢复到原来的大小。 19网站建设网站建设第4章在网页中插入图像2022年4月4日星期一教育学院二、重新优化图像二、重新优化图像是指改变图像大小后，按照改变以后的大小进行重新优化，增加或者删除像素，以使其变大或者变小。图例尺寸变小后，会删除像素，重新优化会使数据丢失，品质下降，文件变小（即图像源会改变图像源会改变）。方法：选中图像，单击“重新取样”按钮。20当改变了选中的图像后，才会有效网站建设网站建设第4章在网页中插入图像2022年4月4日星期一教育学院三、裁剪图像的显示区域三、裁剪图像的显示区域方法：选中图像，单击“裁剪”按钮，

11、拖动裁剪控点，按回车结束。注意：裁剪会改变文件的大小,被裁剪区域将删除。21网站建设网站建设第4章在网页中插入图像2022年4月4日星期一教育学院22裁剪我想要的网站建设网站建设第4章在网页中插入图像2022年4月4日星期一教育学院四、调整图像的亮度和对比度四、调整图像的亮度和对比度方法：选中图像，单击“亮度和对比度”按钮。在亮度对比度对话框中设置亮度和对比度。23网站建设网站建设第4章在网页中插入图像2022年4月4日星期一教育学院五、锐化图像五、锐化图像方法：选中图像，单击“锐化”按钮。在锐化对话框中设置。24网站建设网站建设第4章在网页中插入图像2022年4月4日星期一教育学院第五节第五

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

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