主页制作简单学──征服图片
数码时尚
经常上网冲浪的朋友都会发现，几乎所有的网页都使用图片加以点缀，在网页中插入适当的图片，能够产生图文并茂的效果(由于图片处理工作是一项相对比较复杂的操作，处理图片有专门的工具来做，如Photoshop、Fireworks等，这些操作不属本系列文章论述的范围，请大家参见其他相关书籍资料)。上一期我们通过添加底纹图片间接地讲述了在网页中如何插入图片，本期我将带领大家实战图片操作，包括：①图片的插入②调整图片的大小和位置③编辑图片。Are you ready?下面我们就开始今天的旅程吧！
一、插入图片
现在我们再新建一个网页，单击“新建”按钮(不是选择此按钮右边的小三角形了，而是直接单击“新建”按钮)，FrontPage(以下简称FP)会立即创建一个网页。
同时将此网页以“dealwithimage.htm”文件名保存到站点“Myweb1”中。现在我们在这个页面中插入图片。
1. 在“网页”视图中，将插入点定位到需要插入图片的位置。
2. 单击“插入→图片→来自文件”命令，或者单击“常用”工具栏中的“插入文件中的图片”，打开“图片”对话框。
3. 在“查找范围”下拉列表框中选择图形文件所在的文件夹，然后选定一个要打开的文件。
4. 单击“插入”按钮即可将选定的图片插入到网页中(图1)。
二、调整图片的大小和位置
将图片“请”入网页后，它的大小或位置也许我们不中意，需要更改图片的大小和位置。
调整图片大小的方法很简单，单击网页中的图片，在图片的周围立即出现8个黑色的实心小正方形，将鼠标移动到任意一个小正方形上面时，鼠标指针会自动变成一个双向箭头形状，此时按下鼠标左键并拖动鼠标即可调整图片的大小。
小知识：8个黑色实心小正方形不是每个功能都一样，它们还有分工呢！其中的上下左右四个小正方形分别可以更改图片的长度和宽度，同时也改变了图片的长宽比例，其余的四个拐角处的小正方形可以在不改变图片的长和宽比例的情况下改变图片的大小，这样就不会导致图片失真的情况发生。
上面我们介绍的改变图片大小的方法是一种粗略的方法。下面我们再来介绍这种精确的调整图片的方法：
1.在网页的“普通”视图中，单击要调整大小的图片。
2.单击“格式”菜单中的“属性”命令，打开“图片属性”对话框。
3.单击“外观”标签，如图2所示。
4.在“大小”区中，指定图形对象的宽度和高度的精确值。
5. 如果选中“保持纵横比”复选框，可以在更改图片的高度或宽度时保持其纵横比，即保持图片的比例。
6. 单击“确定”按钮即可。
小知识：如果你熟悉“HTML”语言，可以切换到“HTML”视图，然后在HTML语句中分别指定Width(宽度)和Height(高度)参数值，这样就更显得专业了。
图片的大小已经符合我们的要求了，再来调整一下图片位置。
在FP中，刚插入的图片被视为文字的一部分，即不能随意移动位置，也不能在其周围环绕文字，如果想使图片的周围环绕文字，可以使用FP的图文混排功能：
1. 右击要设置的图片，从弹出的快捷菜单中选择“图片属性”命令，打开“图片属性”对话框。
2. 在“对齐方式”下拉列表框中，选择设置该图片与文字的排列方式。
3. 若从“环绕样式”区中选择“左对齐”或“右对齐”选项，文字的显示不再受到一行的限制。
4. 在“水平间距”与“垂直间距”文本框中，直接输入具体的数值，即可设置图片与正文之间的水平与垂直间隔。
5. 单击“确定”按钮，结果如图3所示。
调整好图片的大小和位置之后，下面我们来对图片进行编辑。
三、编辑图片
选中图片，在图片周围出现8个黑色小正方形的同时，“图片”工具栏也会自动显示，如图4所示。
通常对图片的编辑包括：添加文字、裁剪图片、设置图片的透明度、设置图片的亮度和对比度、图片的翻转和旋转。下面我们通过图片工具栏来逐一编辑图片。
1.在图片上添加文字
①在网页中的“普通”视图中，选定要添加文字的图片。
②单击“图片”工具栏中的“文本”按钮。
③单击“确定”按钮，将在图片的中间出现一个文本框。
④在文本框中输入所需添加的文字。
⑤根据需要，设置文字的格式，如字体、字号、字体颜色、对齐方式等。效果如图5所示。
小知识：FP只支持GIF格式的图片添加文字，如果你欲给非GIF格式图片添加文字，FP会弹出一个对话框，提示你将图片保存为GIF格式。
2.裁剪图片
在网页中插入一个尺寸较大的图片后，不仅要占用比较大的空间，而且影响站点浏览者的下载速度。为了删除图片中不需要的区域，可以利用FP提供的图片剪裁功能。在图5中的图片左边部分是多余的，如何剪裁多余的部分呢？
①在网页的“普通”视图中，选定要进行裁剪操作的图片。
②单击“图片”工具栏上的“裁剪”按钮，图片上将出现一个裁剪框，如图6所示。
③根据需要，拖动裁剪框周围的黑色小正方形，重新调整裁剪框的大小，确定需要显示的图片部分。
④再次单击“图片”工具栏上的“裁剪”按钮，即可完成裁剪图片的操作，裁剪之后的效果如图7所示。
3.设置图片的透明度
在网页中插入一幅图片后，该图片后面的网页元素将被遮住，如果将图片中的某种颜色设置为透明色，就可以通过图片中的部分区域看到图片后面的内容，FP只能将一幅图片的一种颜色变成透明色。
①在“网页”视图中，选定需要设置透明色的图片。
②单击“图片”工具栏中的“设置透明色”，鼠标指针变为笔状。
③将鼠标指针指向图片中需要设为透明的颜色，然后单击，则该颜色便成为图片中的透明色，
4.设置图片的亮度和对比度
①在“网页”视图中，选定需要调整亮度的图片。
②单击“图片”工具栏中的“增加亮度”或“降低亮度”按钮来增加或降低图片的亮度，可以连续单击这两个按钮来调整，直到自己满意的亮度为止。
5.图片的翻转与旋转
在FP中，我们可以方便地对图片进行旋转和翻转。
①在“网页”视图中，选定需要进行旋转或翻转的图片。
②利用“图片”工具栏中的“向左旋转”按钮、“向右旋转”按钮、“水平翻转”按钮以及“垂直翻转”按钮，对选定的图片进行旋转和翻转操作。