《商务网站规划与网页制作》04-03

机械工业出版社中等职业教育“十一五”规划教材۰电子商务专业《商务网站规划与网页制作》机械工业出版社4.3图像的应用图像具有形象直观的特点，在网页中适当地加入图片，能提高网页的可视性，并表达文字无法说明的内容。机械工业出版社中等职业教育“十一五”规划教材۰电子商务专业《商务网站规划与网页制作》机械工业出版社4.3.1网页图像概述1．位图与矢量图机械工业出版社中等职业教育“十一五”规划教材۰电子商务专业《商务网站规划与网页制作》机械工业出版社●位图图像•位图图像用像素来表现图像，每一张位图图像都是由很多排列整齐的像素点组成，每个像素都有特定的位置和颜色值。•位图图像与分辨率有关，即在一定面积的图像上包含有固定数量的像素。因此，如果在屏幕上以较大的倍数放大显示图像，位图图像会出现锯齿边缘和马赛克效果。机械工业出版社中等职业教育“十一五”规划教材۰电子商务专业《商务网站规划与网页制作》机械工业出版社•位图图像的格式很多，如*.bmp、*.gif、*.jpg、*.tif、*.psd等。•位图图像色彩越丰富、图像面积越大，图像文件的字节数就越大。机械工业出版社中等职业教育“十一五”规划教材۰电子商务专业《商务网站规划与网页制作》机械工业出版社●矢量图像•矢量图像是由被称为矢量的数学对象定义的线条和曲线组成。每个对象都是一个自成一体的实体，它具有颜色、形状、轮廓、大小和屏幕位置等属性。•矢量图形与分辨率无关，可以将它缩放到任意大小而不会影响图像的清晰度，如图4-39所示。机械工业出版社中等职业教育“十一五”规划教材۰电子商务专业《商务网站规划与网页制作》机械工业出版社•矢量图形格式很多，如windows标准图元文件*.wmf、Fireworks的*.png等。•矢量图像文件的大小与图形中元素的个数和每个元素的复杂程度成正比。而与图形面积和色彩的丰富程度无关。机械工业出版社中等职业教育“十一五”规划教材۰电子商务专业《商务网站规划与网页制作》机械工业出版社2．常见网页图像格式·GIF文件，这是一种压缩的图形文件，适合于带有实心区域、颜色单调或颜色较少的图像、背景透明的图像、没有太多细节的绘图以及简单动画。机械工业出版社中等职业教育“十一五”规划教材۰电子商务专业《商务网站规划与网页制作》机械工业出版社·JPEG文件，这种类型的文件主要用于照片，但不具有透明的效果，JPEG具有很多质量级别，降低质量级别可以减小图像文件的大小。·PNG文件，PNG格式结合了GIF和JPEG的优点，具有存储形式丰富的特点，同时增加了一些GIF文件格式所不具备的特性。它支持Alpha通道透明，可制作矢量图像。但早期浏览器不支持PNG格式。机械工业出版社中等职业教育“十一五”规划教材۰电子商务专业《商务网站规划与网页制作》机械工业出版社4.3.2插入图像●方法一：使用插入栏中“常用”类别中的图像按钮。●方法二：使用菜单方式，选择“插入”菜单“图像”。●方法三：使用鼠标将图像从“资源”面板或“文件”面板拖到文档窗口中的所需位置。机械工业出版社中等职业教育“十一五”规划教材۰电子商务专业《商务网站规划与网页制作》机械工业出版社4.3.3图像的编辑在Dreamweaver中，可以对图像进行简单的编辑，如调整图像尺寸、图像重新取样、裁剪图像、调整图像的亮度和对比度等。编辑图像主要是在图像属性检查器中进行。机械工业出版社中等职业教育“十一五”规划教材۰电子商务专业《商务网站规划与网页制作》机械工业出版社图像属性检查器机械工业出版社中等职业教育“十一五”规划教材۰电子商务专业《商务网站规划与网页制作》机械工业出版社·“宽”和“高”文本框：在这两个文本框中可以分别输入图像的宽度和高度。·“源文件”文本框：可以指定图像的源文件。单击文本框右侧的，可以查找并指定源文件。机械工业出版社中等职业教育“十一五”规划教材۰电子商务专业《商务网站规划与网页制作》机械工业出版社·“链接”文本框：可以输入选定图像所指向的链接目标的URL。单击文本框右侧的，可以查找并指定该链接目标。机械工业出版社中等职业教育“十一五”规划教材۰电子商务专业《商务网站规划与网页制作》机械工业出版社·“替换”文本框：可以输入选定图像的替换文本。·“编辑”按钮：用于对图像的编辑。单击按钮可以启动Fireworks8对图像进行编辑；单击按钮可以实现对图像的优化；单击可以裁剪图像；单击按钮可对已调整大小的图像进行重新取样，提高图片在新的大小和形状下的品质；单击按钮可调整图像的亮度和对比度；单击按钮可调整图像的清晰度。机械工业出版社中等职业教育“十一五”规划教材۰电子商务专业《商务网站规划与网页制作》机械工业出版社·“地图”文本框：可以输入图像地图的名称。·热点工具按钮组：用于创建不同形状的图像映射图。·“垂直边距”文本框和“水平边距”文本框：在这两个文本框中分别输入像素值，可以沿图像的边缘添加边距机械工业出版社中等职业教育“十一五”规划教材۰电子商务专业《商务网站规划与网页制作》机械工业出版社·“目标”下拉列表：可以指定打开链接目标的目标窗口的类型，该列表中有四种类型：_blank、_parent、_self、_top。·“低解析度源”文本框：可以输入在载入主图像之前应该载入的图像的URL。单击文本框右侧的，可以查找并指定该低解析度图像。机械工业出版社中等职业教育“十一五”规划教材۰电子商务专业《商务网站规划与网页制作》机械工业出版社·“边框”文本框：可以输入图像边框的宽度。·对齐按钮：可以设置段落的对齐方式，从左到右分别是：左对齐、居中对齐、右对齐。·“对齐”下拉列表：可以选择同一行上的图像和文本的对齐方式。机械工业出版社中等职业教育“十一五”规划教材۰电子商务专业《商务网站规划与网页制作》机械工业出版社1．调整图像的大小●方法一：使用鼠标拖放的方式在网页中对图像直接进行调整。●方法二：通过重设图像属性检查器上的高度和宽度值来调整图像的大小。机械工业出版社中等职业教育“十一五”规划教材۰电子商务专业《商务网站规划与网页制作》机械工业出版社2．使用外部编辑器编辑图像可以在Dreamweaver中直接启动外部编辑器Fireworks8对图像进行编辑，完毕后还可以返回到Dreamweaver中。机械工业出版社中等职业教育“十一五”规划教材۰电子商务专业《商务网站规划与网页制作》机械工业出版社4.3.4插入鼠标经过图像鼠标经过图像由两部分组成：主图像和次图像。页面载入时，首先显示主图像，当鼠标指针移过主图像时，图像将自动切换为次图像。当鼠标离开图像区域时，图像又恢复原样。机械工业出版社中等职业教育“十一五”规划教材۰电子商务专业《商务网站规划与网页制作》机械工业出版社制作鼠标经过图像需要事先准备好两个尺寸一致图像。如果两个图像大小不一，Dreamweaver将自动调整第二个图像的大小，使之和第一个图像一样大机械工业出版社中等职业教育“十一五”规划教材۰电子商务专业《商务网站规划与网页制作》机械工业出版社在插入栏中，选择“常用”类别→图像按钮→“鼠标经过图像”按钮。或者选择“插入”菜单→“图像对象”→“鼠标经过图像”。将打开“插入鼠标经过图像”对话框机械工业出版社中等职业教育“十一五”规划教材۰电子商务专业《商务网站规划与网页制作》机械工业出版社“插入鼠标经过图像”对话框机械工业出版社中等职业教育“十一五”规划教材۰电子商务专业《商务网站规划与网页制作》机械工业出版社4.3.5图像的使用原则机械工业出版社中等职业教育“十一五”规划教材۰电子商务专业《商务网站规划与网页制作》机械工业出版社•(1)在设计网页时，应反复斟酌哪些图像必须要，哪些图像可有可无，对于那些不必要的图像，要舍得忍痛割爱。•(2)把图像做得尽量小一点，小图像需要较少的下载时间，这对于网络传输速度较慢的浏览者更为重要。可以用尺寸比较小的图像，也可以通过减少图像颜色和品质使图像文件减小。机械工业出版社中等职业教育“十一五”规划教材۰电子商务专业《商务网站规划与网页制作》机械工业出版社(3)为了能在关掉图形开关的浏览器中看到较完整的信息，要为图像添加替代文本，这样能使更多的浏览者看到完整的网页。(4)尽可能地重复使用图像文件，这样可以有效地缩减网站的体积。