第七讲图片的调整和处理

最新推荐文章于 2022-05-12 15:34:44 发布

tangjianhao

最新推荐文章于 2022-05-12 15:34:44 发布

阅读量3.7k

点赞数

分类专栏：网页设计文章标签：工具浏览器嵌入式 internet 图像处理照片

本文链接：https://blog.csdn.net/tangjianhao/article/details/312231

版权

网页设计专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一、运用特殊效果
　　在FrontPage 2000中，利用专门的“图片”工具栏上的命令按钮可以对网页中的图片进行简单处理。例如设置透明色、设置凹凸效果、调整对比度、亮度、剪裁、以及在gif格式的图片上添加文字等。
　　1、图片工具栏
　　通常，当选中某一图片后，“图片”工具栏即会出现在屏幕上。用鼠标右击工具栏，选择“图片”也会出现图片工具栏。
　　图片工具栏一般会在选中图片时出现在FrontPage窗口的下端，但也可以移动到窗口的其它位置。图片工具栏上各按钮的名称如下图所示,将鼠标移到每个按钮上也会显示其名称。

图片工具栏各按钮的名称

　　2、将图片背景色设为透明色
　　将图片背景色设为透明色，可以使一幅图片与页面真正融为一体。选中图片，单击图片工具栏的“设置透明的颜色”按钮，再去单击图片中的空白处，则单击处的那种颜色就成为透明的颜色。下图就是透明色设置前后的情况。

　　【注意】只有GIF格式图像才能设置背景透明色。而且要求原始图片的背景必须是单一的颜色，不能有其它颜色干扰。上图中有些地方不”透明“，就是原图片“不干净”的缘故。
　　3、将图片设成“凹凸效果”
　　选中图片，单击图片工具栏的“凹凸效果”按钮，图片边界就呈凹凸化，使图片看起来有立体效果。

　　4、“剪裁”图片
　　有的时候，图片过大，而我们只需要图片中的一小部分，用鼠标按钮拖动图片的控点只能按比例使图片缩小。用图片工具栏的“剪裁”按钮可以对图片进行裁剪而不必打开图像处理软件。操作步骤如下”
　　1）选中（单击）要剪裁的图片，单击该按钮，出现一个比图片略小的的虚线框，四边及四角有8个控点：

　　2）拖动其中一个控点，使虚框内只包含部分图片：

　　3）再次单击“剪裁”按钮，图片将只剩下虚框内的内容。

　　其它各按钮的作用如下：
　　●“插入文件中的图片”按钮。相当于“插入”菜单中的“图片”＞“来自文件”命令。单击此按钮会打开“插入图片”对话框。
　　●“文本”按钮。用于在图片中加入文本。但该图片必须是GIF格式的，如果不是，FrontPage会自动将它转换成GIF格式图片文件。
　　●“自动缩略图”按钮。用于将选中的图片生成一个缩略图，并在缩略图中建立一个链接到该图片的超链接。
　　●“绝对定位”按钮。在定义层时，设置图像在当前层的绝对位置。
　　●“上移一层”按钮。在定义层时，将图片上移一层。
　　●“下移一层”按钮。在定义层时，将图片下移一层。
　　●“向左旋转”按钮。将图片逆时针旋转90°。
　　●“向右旋转”按钮。将图片顺时针旋转90°。
　　●“水平翻转”按钮。将图片沿垂直线对称翻转。
　　●“垂直翻转”按钮。将图片沿水平线对称翻转。
　　●“增加对比度”按钮。增加图片前景色和背景色的对比度。
　　●“减少对比度”按钮。降低图片前景色和背景色的对比度。
　　●“增加亮度”按钮。增加图片颜色的明亮度。
　　●“减少亮度”按钮。减少图片颜色的明亮度。
　　●“黑白模式”按钮。如果当前图片是彩色的，单击此按钮可以将彩色的图片变成黑白的。
　　●“冲蚀”按钮。可以淡化图片的颜色，形成”水印“效果。
　　●“重新取样”按钮。调整图片大小以后，单击该按钮可以获得调整之后的图片。
　　●“选定”按钮。用于选择网页中的图片。
　　●“长方形热点”按钮。可以在图片中划出长方形热点区域用于超链接。
　　●“圆形热点”按钮。可以在图片中划出圆形热点区域用于超链接。
　　●“多边形热点”按钮。可以在图片中划出多边形热点区域用于超链接。
　　●“突出显示热点”按钮。在图片中可以突出显示热点区域。
　　●“还原”按钮。单击该按钮可以还原图片被编辑前的状态。
　　【注意】特殊效果设置后，在保存网页时，一般会出现“保存嵌入式文件”对话框，你必须重新保存图片文件才能把该效果保留下来。
二、如何使图片文件变小和减少图片的下载时间
　　1、通过重新取样使图片文件变小
　　当图片文件较大时，不但主页空间的占用会迅速增加，而且网页的下载时间也会变得很长。有可能使客户失去耐心，从而大大网站的减少浏览人数。因此，网页制作者一定要学会使图片文件变得较小的方法：
　　单击图片，然后拖动图片上的控点可调整其大小。拖动角部的控点可在改变大小时保持它的纵横比不变。
　　调整图片大小只是在站点访问者的 Web 浏览器中改变图片的显示方式。因此，若您只将大图片的大小调整为较小尺寸，图片文件大小仍然和原来一样大。要减少图片的文件大小和下载时间，您必须在调整大小后对图片重新取样。重新取样图片会使文件大小减少以匹配较小的尺寸。
　　重新取样很简单，在网页视图模式下，选中（单击）已经调整好了大小的图片，然后单击在“图片”工具栏上的“重新取样”按钮就行了。
　　通过重新取样后的图片，必须在保存网页时同时通过“保存嵌入式文件”对话框重新保存图片文件，才能使图片文件真正减小。
　　【例】在网页“图片练习”中插入一个较大的图片文件“新年快乐”，然后用减少图片尺寸加重新取样的方法使图片文件变小。
　　1）打开“图片练习”网页
　　2）将光标移至需插入图片处，单击“插入”＞“图片”＞“来自文件”（下左图）。
　　3）在“图片”对话框上，选定图片文件“newyear.jpg”，单击“确定”（下右图）。

　　4）单击“查看”＞“文件夹”，使窗口变成“文件夹”视图。找到“images”文件夹中的“newyear.jpg”文件，可以看到其文件大小为58KB。

　　5）鼠标单击图片，然后将鼠标移到一角的控制点往里拖动，使图片变小：

这时再在“文件夹”视图中看“newyear.jpg”文件的大小仍为58KB。
　　6）单击在“图片”工具栏上的“重新取样”按钮，“newyear.jpg”文件的大小仍没有变。
　　7）单击“保存”按钮，保存“图片练习”网页，同时通过“保存嵌入式文件”对话框重新保存图片文件“newyear.jpg”。这时再在“文件夹”视图中看“newyear.jpg”文件的大小变为12KB。

　　2、降低图片质量使图片文件变小
　　通过降低质量使图片文件的压缩率增加，从而文件大小也会大大减少。只有 JPEG 格式的图片才能这么做，非 JPEG 格式的图片首先要转换为 JPEG 格式。
　　在网页视图模式下，在 JPEG 格式图片上单击鼠标右键，然后单击快捷菜单上的“图片属性”。可得到下图所示的“图片属性”对话框，一般就显示其中的“常规”选项卡

“图片属性”对话框的“常规”选项卡

　　在图中可以看出，对于JPG文件，在“类型”栏中就自动选中“JPEG”。而其后面的“质量”框中显示图片的质量参数，默认值是75。取值范围为 1～100 ，该数值越大，质量越好，但图片文件也越大。你可以将此值改成一个较小的值有降低图片的质量。点击“确定”完成设置，然后再保存网页，同时通过“保存嵌入式文件”对话框重新保存图片文件，就可减少图片文件的大小。本讲前例中的几幅图片就通过这种方法来减少图片文件的大小。通过将“质量”值从75减少到30，大约可将文件大小减少到原来的一半。从前面的几幅图片可以看出，这种方法对连续图像质量的影响比较小，而对轮廓分显的文字图片影响比较明显。
【练一练】
　　在本地网站“网页练习”中新建一个网页，插入两幅较大的图片。先在“文件夹”视图中看一下它们的文件大小。然后将第一个图片的尺寸变小，再执行“重新取样”命令；对第二个图片（必须是JPG文件）的属性进行重新设置，降低它的“质量”值。再看一下它们的文件大小。最后通过保存网页重新保存图片文件，看图片文件的减少情况。
　　3、使用缩略图
　　图片的下载时间往往很长，特别是对于使用低速 Internet 连接的站点访问者。所以人们一般不在网页中插入大的精美的图片。可是在一些特殊情况下，往往需要一些特别清晰的图片。为了解决这个问题，FrontPage提供了图片缩略图功能。
　　在网页中用一张原图的缩略图来替代原图，其面积、文件字节数比原图要小得多。同时自动建立缩略图与原图之间的超级链接。普通的浏览者只需浏览缩略图，而不会影响到整个网页的显示速度。需要看到清晰大图片的浏览者，只需在缩略图上单击，浏览器就会立即打开原图。
　　将该图片设置成缩略图的操作方法很简单。只要选中该图片。单击图片工具栏上的“自动缩略图”按钮。这时选中的图片便缩小为一个小的图片，且四周有一个蓝色的方框。这时FrontPage已经创建了指向缩略图原来大图片的超链接，在浏览器中打开网页单击缩略图就能将大图片打开。
　　保存网页文件时，将会出现提示保存缩略图（及原图）。默认情况下，缩略图的文件名是在原图文件名后面加上“_small”，扩展名相同。
　　值得注意的是：并不是所有的图片都能设置成缩略图，如果要处理的图片比缩略图的默认尺寸还要小，或者图像上有超链接，再或者该图片是GIF动画图片，那么FrontPage不能生成缩略图。
　　【例】将网页“图片练习”中的图片“三江口”设置成缩略图
　　1）打开网页“图片练习”，单击“三江口”图片。

网页中的“三江口”图片被选中

　　2）单击图片工具栏上的“自动缩略图”按钮。这时选中的图片便缩小为一个小的图片。

图3.26 图片被设置成缩略图

　　3）单击常用工具栏上的“保存”按钮，保存“图片练习”网页，同时出现“保存嵌入式文件”对话框：

　　注意：缩略图的文件名是在原图文件名“sjk”后面加上“_small”，单击“确定”完成保存。
　　4）在“文件”菜单中选用“在浏览器中预览”命令，看到的“三江口”图片只是一个缩略图。但用鼠标单击它，就能看到精美的原图。
　　【有关缩略图的设置】
　　对于缩略图可以使用默认值。但若你对默认设置值不满意，例如希望缩略图再大一点。则可以更改设置值。操作方法如下：
　　1）单击“工具”菜单，选择其中的“网页选项”命令，打开“网页选项”对话框，选取“自动缩略图”选项卡，如下图所示。

　　2）在“网页选项”对话框的“自动缩略图”选项卡上设置三项选项。
　　“设置”框和“像素”框可设置缩略图的大小。“设置”框确定用那一个参数决定大小（默认为“宽度”），“像素”框确定这个参数的值（默认值为“100”）。若将“像素”框的设置值改为200，缩略图就会放大一倍（缩略图的高度随宽度的增加自动按比例增加）。但缩略图的文件大小和下载时间也相应增加。
　　“边框粗细”复选框，选中后可在其右侧的“像素框中”选定缩略图的边框粗细；
　　在网页视图模式下，在图片上单击鼠标右键，单击快捷菜单上的“图片属性”，然后单击“常规”选项卡。
　　在“低分辨率”框中，键入另一低分辨率图片的文件名或单击“浏览”来找到它。若图片在站点中，浏览到包含图片的站点和文件夹，然后选择您想要的图片。若图片在您的局域网上，则单击“从计算机上选择一个文件” ，然后从局域网上浏览到您想要的图片。若图片在全球广域网上，则单击“使用Web 浏览器来选择网页或文件”。在您的 Web 浏览器中，浏览到您想要的图片，然后切换回到FrontPage 2000，您已访问过的网页位置将会显示在 “URL” 框中。
　　对于大型图片或高分辨率图片该功能很有用。如果图片是图像映射，则使用低速 Internet 连接的站点访问者能单击基于低分辨率图片的热点，而不用去等待整个高分辨率图片完成下载。

【练一练】
　　新建一个网页，插入几幅你喜欢的照片，把它们做成缩略图，并把网页以“zpj.htm”（“照片集”）文件名保存。
三、设置图片属性
　　FrontPage提供了许多方法对插入网页的图片进行控制和优化，其中图片属性设置是重要手段。
　　单击 “格式”菜单，在弹出的菜单中选择“属性”，得到如下图所示的“图片属性”对话框，在该对话框中共有3个选项卡（图中显示的是“常规”选项卡）。

“图片属性”对话框“常规”选项卡

　　1、“常规”选项卡
　　在“常规”选项卡上可以改变图片及图片的格式等。
　　“常规”选项卡共分4个区域，其中“默认超链接”部分用于设置超链接，我们将在下一讲专门学习，这里就不介绍了。
　　1）图片源区域：这部分主要显示图片文件的文件名。右端有两个按钮，“浏览”按钮用于寻找图片，可以将当前图片更改成另一副图片；“编辑”按钮可以启动FrontPage默认的图片编辑器，直接对图片进行编辑和修改。
　　2）类型区域：这部分用于设置图片文件的类型，FrontPage会自动检测图片文件的类型，并显示出来。如果在这里改变图片文件的类型，例如原来是GIF格式，你将它改为JPEG格式。则在在保存网页时，会出现“保存嵌入式文件”对话框，要求你保存JPEG格式的图片文件。
　　如果图片是GIF文件，会有两个选项。“透明”方式可以使浏览者透过图片看到背景；“交错”方式是当图片较大时，浏览器会逐渐显示图片，一次比一次清晰，而不是等图片下载完毕后再显示。由于现在网速普遍变快，而GIF文件又比较小，交错方式的作用已经不明显了。
　　对于JPEG文件也有两个选项：“质量”选项前面已经介绍过了； “渐进式变化”与GIF文件的“交错”方式相类似，能使图片文件分段下载。
　　3）“替代表示”区域：单击“低分辨率”后面的“浏览”按钮，选择一幅低分辨率、体积较小的图片，这样浏览网页时，先下载低分辨率的图片，然后再下载整幅图片，将其覆盖。使得浏览者在网速较慢的情况下，在浏览器下载完整个大型高分辨率图片前就可以完整地看到整个网页；在“文本”后面的框中输入图片的说明文字，当无法下载图片时，浏览者虽然无法看到图片，但可以看到图片的说明文字。
　　2、“视频”选项卡
　　“视频”选项卡主要用于影像文件(AVI文件)的设置，前面我们已经学习过。
　　3、“外观”选项卡
　　打开“外观”选项卡，如下图所示。

“外观”选项卡

　　“外观”选项卡分“布局”和“大小”二个选项区
　　1）“布局”区域中共有4项可供选择：
　　“对齐方式”提供了10种对齐方式，最常用的是左、右；
　　“边框粗细”是指在图片的四周加上框线的粗细，默认状态为0，即没有框线；
　　“水平间距”指水平方向上文字与图片的距离；
　　“垂直间距”指垂直方向上文字与图片的距离。
　　2）“大小”选项区
　　通过选中“指定大小”复选框，可以设定图片的宽度和高度。若在其下面选中“像素”，则图片的大小以绝对像素值度量；而在其下面选中“百分比”，则与浏览器宽度的百分比作为度量单位。
　　选中“保持纵横比”复选框，则可保持图片的原有纵横比，设定高度和宽度时，只需设定其中之一。这样做的效果和用鼠标拖动图片四角控点的方法是一样的。
四、图片的定位方式
　　当将图片插入到含有文字段落的网页中时，图片与文字排列在一起，只能在不同行中移动，并不能任意移动位置，而且由于图片较高，将文字的行间距也拉高了，如下图所示。

在文字中没有定位的图片

　　对图片采用绝对定位或相对定位可以任意移动图片在网页中的位置。
　　1、图片的绝对定位
　　将网页左上角定为(0，0)，根据给定的坐标(X，Y)，来确定图片在网页中的位置，即为绝对定位。
　　选中图片后，单击“图片”工具栏“绝对定位”按钮就可以完成绝对定位。选择绝对定位之后，我们就可以任意移动图片在网页中的位置。
　　说明一点，这时图片实际上是浮在网页上的，它可能会挡住网页上的文字，如下图所示（单击“图片”工具栏“下移一层”按钮，可使图片置于文字下面）。而且当网页中的文字进行格式变化时，绝对定位的图片并不会跟着移动变化，这给网页修改带来一些麻烦。要想使图片随着网页格式的变化一起变化，可以采用图片的相对定位。

图片浮在文字上的绝对定位