第5章 网页图片Img

null第5章 网页图片Img第5章 网页图片Img网页中的图片具有直观和美化的作用，是网页设计中必不可少的元素。它既是文字表达的有力补充，又是网页美化装饰中最具渲染力的元素。这一章讲解如何在网页中插入图片，从而使网页丰富多彩更显生动，进而激发出浏览者的兴趣。 5.1 图片格式5.1 图片格式图像文件的格式很多，但一般在网页中使用的图片格式并不多，主要有GIF、JPG和PNG。下面进行简单的介绍，以便初学者在网页制作过程中做出适当的选择。如果需要深入了解图片格式的相关知识，读者可查阅其他资料。5.1.1 GIF格式5.1.1 GIF格式图形交换格式（Graphic Interchange Format）是一种索引颜色的图像格式。该格式在网页中使用较多。其优点是文件体积小且支持动画；缺点是质量较低。对于大面积同一颜色或颜色变化不大的图像（如导航条、按钮、图标、徽标或其他具有统一色彩和色调的图像）建议使用此格式。5.1.2 JPG格式5.1.2 JPG格式JPG（联合图像专家组标准，也称JEPG，Joint Photographic Expert Group）文件格式是用于摄影或连续色调图像的高级格式。JPG文件可以包含多达数百万种颜色，因此JPG格式的文件体积较大，图片质量较佳。通常可以通过压缩JPG文件在图像品质和文件大小之间取得良好的平衡。当网页中对图片的质量有要求时，建议使用此格式。5.1.3 PNG格式5.1.3 PNG格式PNG（可移植网络图形，Portrable Network Graphic）文件格式是一种新型的无专利权限的图像格式。它可以用来代替GIF格式，同样支持透明层。它在质量和体积方面都具有优势，适合在网络中传输。但由于是新型格式，所以不是所有的浏览器都支持。5.2 插入图片5.2 插入图片 简单了解图片格式后，接下来讲解如何把图片插入到网页中。通过几个简单的步骤，就可以完成图片的插入。插入的方法有多种，但在Dreamweaver中插入图片的主要方法包括：插入和拖入。5.2.1 直接插入图片5.2.1 直接插入图片当需要插入的图片不在站点文件夹时，一般使用直接插入的方法，具体步骤如下：【选择图像源文件】对话框5.2.1 直接插入图片5.2.1 直接插入图片在列表框中选择图片文件，并在【图像预览】区域进行预览，最后单击【确定】按钮。弹出【图像标签辅助功能属性】对话框，如左图。在【替换文本】文本框中输入“我的图片”，然后单击【确定】按钮，完成图片插入。此时在【设计】视图中可以看到插入的图片，效果如右图 。【图像标签辅助功能属性】对话框 最终效果 5.2.2 拖动插入图片5.2.2 拖动插入图片当图片存放在站点文件夹时，可使用拖动来插入图片，操作方法更方便快捷。具体的步骤如下：【文件】面板5.2.3 揭示图片源码5.2.3 揭示图片源码单击【文档】工具栏中的【代码】视图按钮，在打开的【代码】视图中查看HTML源码。在未插入图片前，新建网页的源码…标签之间是空的。在插入图片后…标签之间的源码如下： 5.3 图片路径5.3 图片路径 图片的路径是指图片存放在存储器中的位置。在网页中表示文件存放位置的方式有两种：一种是绝对路径，另一种是相对路径。5.3.1 使用绝对路径5.3.1 使用绝对路径绝对路径是指从根目录开始，依次往下直到文件所在的位置。书写方式为：X:\xxx\yyy\x.y。例如，记事本程序放在C盘的系统文件夹的system32文件夹中，那么它的路径是C:\WINDOWS\system32\notepad.exe。绝对路径是把文件存放的位置按层次表示出来。如果文件存放的位置包含的层次很深时，就会给书写带来麻烦，于是就有了相对路径。5.3.2 使用相对路径5.3.2 使用相对路径相对路径是相对于文件而言，从相对文件所在目录依次往下直到文件所在的位置。书写方式为：A/B/B.A。例如，文件X.Y与A文件夹在同一目录下，那么文件B.A在目录A下的B文件夹中，它对于文件X.Y的相对路径则为A/B/B.A，如图所示。相对路径5.4 图片修改5.4 图片修改 当图片插入到网页后，还需要对其进行修改，从而使之适合网页表达或装饰的要求。主要的修改包括：修改尺寸、修改对齐方式和设置图片边框。 5.4.1 修改尺寸5.4.1 修改尺寸图片尺寸的修改通常有两种方法：一种是鼠标操作修改的方法；另一种是参数设置修改的方法。在此进行简单的讲解。鼠标操作修改尺寸的具体步骤如下：图片的锚点 【属性】面板 5.4.1 修改尺寸5.4.1 修改尺寸在【宽】文本框中输入数值100，保持高不变，效果如图左所示 。此时图片严重变形，一般在网页中需要保持图片的固有比例。选中【高】文本框中的数值，将其删除，然后按Enetr键。此时图片缩小，恢复原有比例，如图右所示。比例变形 右手恢复比例 5.4.2 修改对齐方式5.4.2 修改对齐方式将文字与图片进行混合排列，它们之间必须具有一定的位置关系，称之为对齐方式。先看一个未设置对齐方式的实例，具体步骤如下：未设置对齐 【属性】面板 5.4.2 修改对齐方式5.4.2 修改对齐方式图片的对齐方式是变化多样的，现在设置图片的对齐方式 。 顶端对齐 居中对齐 左对齐 右对齐 5.4.3 设置图片边框5.4.3 设置图片边框给图片添加一个边框能起到装饰或突出图片的作用，有时还能调和色彩冲突。善用边框能为网页的整体效果带来微妙的趣味。为图片添加边框的具体步骤如下：未设置边框 添加图片边框 5.5 客户端图像映射图5.5 客户端图像映射图 客户端图像映射图是在插入的图像上面定义一个或几个区域，用来链接到其他的页面上，也称为热图。只有单击定义了热图的区域，才能链接到其他页面上。现在的热图一般应用在电子地图上，读者可以在实例中慢慢体会热图的用法。5.5.1 创建热图5.5.1 创建热图其实，在Dreamweaver CS3中实现热图是一件很容易的事。现在介绍如何在网页上创建热图，具体步骤如下：插入图片 设置热点 5.5.1 创建热图5.5.1 创建热图按F12键预览网页，网页中没有变化。将光标移动到绿点上，效果如左图所示。单击绿点，面页跳转到热图链接的页面，如右图所示。 热图预览 转到页面 5.5.2 热图源码5.5.2 热图源码从上面的实例中可以查看，当设置热图完成后，源码会有怎样的变化，具体源码如下： 5.6 图片边距5.6 图片边距 在前面设置图片边框时，图片与文字之间的距离很近。用户可以通过设置图片的边距来进行调节，从而使网页看起来更有条理。5.6.1 设置图片边距5.6.1 设置图片边距设置图片边距的具体步骤如下：未设边距 已设边距 5.6.2 图片边距源码5.6.2 图片边距源码设置图片边距的过程非常的简单，其实源码也是一样简单，以下是设置边距后的源码。 5.7 专家5.7 专家总结通过本章的学习，读者可以掌握如何在Dreamweaver中插入图片和修改图片的各种属性，以达到网页制作的要求。本章图片的对齐和大小的源码是常用的，要记住这些源码有点难度，只有结合使用和理解才能在制作过程运用自如。在下一章中将详细讲解超链接。