3.2 网页中的图像
图像的传输是Internet的真正魅力所在。图像在网页中起两个作用：一是装饰作用，可以想象，如果网页做得像风景图画，访问者一定会流连忘返；二是表达作用，图像的信息量非常大，它可以非常直观地表达所要表达的内容。正是由于有这些优点，网页中的图像很受人们的欢迎。使用图像不但可以增加视觉效果，提供更多的信息、丰富文字的内容，而且可以将文字分为更易操作的小块。更重要的是，能够体现出网站的特色。
本节将详细地讲解在网页中插入图像、编辑图像的方法，从而制作图文并茂的网页，将内容通过图像更生动地展示给浏览者。
3.2.1 网页中的图像格式
插入网页的图像文件格式有很多种，如GIF、JPEG、BMP、TIFF、PNG等格式，其中使用最广泛的是GIF和JPEG两种格式。由于JPEG格式和GIF格式的图像文件尺寸较小，更适合网络传输，而且能够被大多数浏览器支持，所以是网页制作中最常用的图像格式。
1．GIF格式
GIF （Graphics Interchange Format）是英文单词的缩写，即图像交换格式。它的图片数据量小，可以带有动画信息，且可以支持透明色，使图像浮现在背景之上，但最高只支持256种颜色。GIF文件的众多特点恰恰适应了Internet的需要，于是它成了internet上最流行的图像格式，它的出现为internet注入了一股新鲜的活力，常见有QQ动态表情等。
2．JPEG格式
JPEG（Joint Photographic Experts Group）是“联合照片专家组”英文单词的缩写，是一种压缩格式的图像文件，可以高效地压缩图片的数据量，使图像文件变小的同时基本不丢失颜色画质，也是大家最熟悉的一种图像格式。当需要显示照片等颜色丰富的精美图像时，人们可以选择JPEG格式的文件。
3．特性比较
表3-1将上面提到的两种图像格式在文件扩展名、透明设置、优缺点和适合处理的图像类型这4个方面的特性进行了比较。
表3-1 GIF格式和JPEG格式特性对比表
3.2.2 插入图像
在将图像插入Dreamweaver文档时，Dreamweaver会自动在网页文档的HTML源代码中生成对该图像文件的引用。为了确保引用的正确性，该图像文件必须位于当前站点中。如果图像文件不在当前的站点中，Dreamweaver会询问是否要将此文件复制到站点中，此时也可将图像文件存储到站点中。
Dreamweaver提供的插入图像的方式一般有以下几种。
1．使用命令插入图像
将光标定位在需要插入图像的位置处，选择“插入”→“图像”菜单命令，如图3-14所示。打开“选择图像源文件”对话框，如图3-15所示，找到需要的图像，单击“确定”按钮完成图像的插入。
图3-14 使用命令插入图像
图3-15 “选择图像源文件”对话框
2．使用“文件”面板插入图像
打开“文件”面板，展开站点中的图像文件夹，如图3-16所示，在需要插入的图像名称上按住鼠标左键不放，拖动到文档编辑区中相应的插入图像的位置，确定后完成插入图像。
图3-16 使用“文件”面板插入图像
3．使用“插入”面板插入图像
将光标定位在需要插入图像的位置处，选择“插入”面板中“常用”类别，单击“图像”按钮上的黑色三角形，如图3-17所示，在下拉菜单中选择“图像”选项，在“选择图像源文件”对话框中找到并选择所需的图像，单击“确定”按钮完成图像插入。
图3-17 使用“插入”面板插入图像
操作点拨：
选择好插入的图像后，会打开一个“图像标签辅助功能属性”对话框，如图3-18所示。具体参数作用如下。
图3-18 “图像标签辅助功能属性”对话框
“替换文本”：当图像正在下载、找不到该图像或网站访问者将指针移到该图像上时，替换文本代替图片显示，解释这个是什么图片。
“详细说明”：“详细说明”可以提供比“替换文本”组合框中所提供的内容更为详尽的说明。若要添加较详细的说明，可单击“浏览”按钮并选择一个HTML文件，然后单击“确定”按钮。
注意：
当选择了要插入到网页的图像后,在默认情况下，Microsoft Expression Web会自动显示辅助功能属性对话框，让用户设置图像的替代文本。用户可以通过“首选参数”对话框来设置Expression Web，使其自动显示或不显示该对话框，如图3-19所示。
图3-19 设置是否显示辅助功能属性对话框
3.2.3 设置图像属性
图像插入到文档后，其默认属性一般不符合用户的要求，比如尺寸不合适，位置不合理等，所以还需要对图像进行调整。若要精确地调整图像的大小、位置及对齐方式等，可使用“属性”面板中的各项属性来进行设置。
单击设置属性的图像，当图像周围出现可以编辑的控制点时，可以查看窗口下方的“属性”面板，如图3-20所示。
图3-20 图像“属性”面板
“宽、高”：用来精确调整图像大小，在“宽”“高”后面的文本框内可以输入像素值，来准确定义图像大小。也可输入百分比数值来设置占页面的百分比，图像会自动根据文档窗口的大小自动调整。
“源文件”：插入图像后，“源文件”文本框中显示出了图像文件的路径。单击文本框后的文件夹按钮
，或者拖动指向文件按钮
，即可重新选择图像文件。
“链接”：该文本框显示链接到的目的文件的路径，可以是网页，也可以是一个具体的文件。实现链接的方法有以下3种。
● 直接输入链接的目的地址(如D:\myweb\img\tly.jpg)。
● 使用鼠标拖动指向文件图标到“文件”面板中要链接的目标文件上。
● 单击该文本框右侧的文件夹按钮
，选择要链接的目标文件。“替换”：给图像添加文字提示说明。在“替换”组合框中输入文字，当用浏览器打开图像页面后，将鼠标指针移到图像上或者发生断链接现象时即可出现相应的文字提示。
“垂直边距和水平边距”：以像素为单位给图像四周设置空白边距。“垂直边距”表示沿图像的顶部和底部设置边距；“水平边距”表示沿图像的左侧和右侧添加边距。
“边框”：设置图像边框的宽度，以像素为单位。有时在为图像设置链接后，图像的周围会出现一个蓝色的边框，此时只需将图像的边框值设置为“0”，即可将该边框去掉。
除了上面几项属性之外，在Dreamweaver CS6中还有裁剪、调整亮度/对比度和锐化等一些辅助性的图像编辑功能，而不需要通过其他软件调整图像。进行操作时，通过“属性”面板中的裁剪、亮度和对比度以及锐化的按钮就可以很方便地实现。本节课不做具体介绍。
当网页内既有文字又有图像的时候，图像和文字排版不恰当就会显得页面不协调。此时通过调整图像与文字的相对位置，以及图像与文字的间距来排版，就能使图像更好地和文字排列在一起，构成协调、美观的页面。
3.2.4 跟踪图像
跟踪图像是Dreamweaver中一个非常有效的功能，在网页中使用跟踪图像就像是平时人们临摹字帖一样，下面放着名家的笔迹，上面盖上一层透明的纸，然后在上面进行临摹。设计人员在网页中将制作好的平面设计稿作为网页的背景，如此就可以按照预先制作好的背景方便地定位文字、图像、表格、层等网页元素在该页面中的位置了。
跟踪图像的使用方法是这样的：首先使用各种绘图软件做出一个想象中的网页排版格局图，类似于给网页打个底稿，然后将此图保存为网络图像格式，如GIF、JPG、JPEG或PNG。用Dreamweaver CS6打开编辑的网页，将事先创建好的网页排版格局图作为跟踪图像，接着调整跟踪图像的透明度，就可以在当前网页中方便地定位各个网页元素的位置了。使用了跟踪图像的网页在用Dreamweaver编辑时不会显示背景图案，但当使用浏览器浏览网页时则正好相反，跟踪图像不见了，背景图案显示了出来，所见到的就是经过编辑的网页。具体操作如下。
1)选择“查看”→“跟踪图像”菜单命令，在弹出的子菜单中选择“载入”命令，打开“选择图像源文件”对话框，在对话框中选择一个图像文件，单击“确定”按钮，打开“页面属性”对话框，在“分类”列表框中选择“跟踪图像”选项，在右侧单击“浏览”按钮，选择一个跟踪图像文件，如图3-21所示。
图3-21 “页面属性”对话框
操作点拨：
打开“页面属性”对话框的方式如下。
选择“修改”→“页面属性”菜单命令。
在“属性”面板中单击“页面属性”按钮。
2)在“页面属性”对话框中，拖动“透明度”滑块调整图像的透明度以后，单击“确定”按钮。如果跟踪图像太鲜艳，影响了人们的视觉感受，就可以调整一下透明度。
3)跟踪图像就被插入到文档窗口中了，如图3-22所示。
图3-22 跟踪图像被插入到了文档窗口
提示：
在默认情况下，跟踪图像在文档窗口中是可见的。如果想隐藏跟踪图像，可选择“查看”→“跟踪图像”菜单命令，在弹出的子菜单中选择“显示”命令，将“显示”项前面的对号（√）去掉，即可隐藏跟踪图像。