dreamweavercs3教程第5章网页图片Img.pptVIP

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