通过Dreamweaver_CS3学习HTML+DIV+CSS_第5章__网页图片Img

《通过Dreamweaver_CS3学习HTML+DIV+CSS_第5章__网页图片Img》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、第5章网页图片Img网页中的图片具有直观和美化的作用，是网页设计中必不可少的元素。它既是文字表达的有力补充，又是网页美化装饰中最具渲染力的元素。这一章讲解如何在网页中插入图片，从而使网页丰富多彩更显生动，进而激发出浏览者的兴趣。5.1图片格式图像文件的格式很多，但一般在网页中使用的图片格式并不多，主要有GIF、JPG和PNG。下面进行简单的介绍，以便初学者在网页制作过程中做出适当的选择。如果需要深入了解图片格式的相关知识，读者可查阅其他资料。5.1.1GIF格式图形交换格式（GraphicInterchangeFormat）是一种索引颜色的图像格式。该格式在网页中使用较多。其优点是文件

2、体积小且支持动画；缺点是质量较低。对于大面积同一颜色或颜色变化不大的图像（如导航条、按钮、图标、徽标或其他具有统一色彩和色调的图像）建议使用此格式。5.1.2JPG格式JPG（联合图像专家组标准，也称JEPG，JointPhotographicExpertGroup）文件格式是用于摄影或连续色调图像的高级格式。JPG文件可以包含多达数百万种颜色，因此JPG格式的文件体积较大，图片质量较佳。通常可以通过压缩JPG文件在图像品质和文件大小之间取得良好的平衡。当网页中对图片的质量有要求时，建议使用此格式。5.1.3PNG格式PNG（可移植网络图形，PortrableNetworkGraphi

3、c）文件格式是一种新型的无专利权限的图像格式。它可以用来代替GIF格式，同样支持透明层。它在质量和体积方面都具有优势，适合在网络中传输。但由于是新型格式，所以不是所有的浏览器都支持。5.2插入图片简单了解图片格式后，接下来讲解如何把图片插入到网页中。通过几个简单的步骤，就可以完成图片的插入。插入的方法有多种，但在Dreamweaver中插入图片的主要方法包括：插入和拖入。5.2.1直接插入图片当需要插入的图片不在站点文件夹时，一般使用直接插入的方法，具体步骤如下：【选择图像源文件】对话框5.2.1直接插入图片在列表框中选择图片文件，并在【图像预览】区域进行预览，最后单击【确定】按钮。弹

4、出【图像标签辅助功能属性】对话框，如左图。在【替换文本】文本框中输入“我的图片”，然后单击【确定】按钮，完成图片插入。此时在【设计】视图中可以看到插入的图片，效果如右图。【图像标签辅助功能属性】对话框最终效果5.2.2拖动插入图片当图片存放在站点文件夹时，可使用拖动来插入图片，操作方法更方便快捷。具体的步骤如下：【文件】面板5.2.3揭示图片源码单击【文档】工具栏中的【代码】视图按钮，在打开的【代码】视图中查看HTML源码。在未插入图片前，新建网页的源码…标签之间是空的。在插入图片后…标签之间的源码如下：

5、img/5.1.gif"width="203"height="141"alt="我的图片"/>5.3图片路径图片的路径是指图片存放在存储器中的位置。在网页中表示文件存放位置的方式有两种：一种是绝对路径，另一种是相对路径。5.3.1使用绝对路径绝对路径是指从根目录开始，依次往下直到文件所在的位置。书写方式为：X:xxxyyyx.y。例如，记事本程序放在C盘的系统文件夹的system32文件夹中，那么它的路径是C:WINDOWSsystem32otepad.exe。绝对路径是把文件存放的位置按层次表示出来。如果文件存放的位置包含的层次很深时，就会给书写带来麻烦，

6、于是就有了相对路径。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修改尺寸图片尺寸的修改通常有两种方法：一种是鼠标操作修改的方法；另一种是参数设置修改的方法。在此进行简单的讲解。鼠标操作修改尺寸的具体步骤如下：图片的锚点【

7、属性】面板5.4.1修改尺寸在【宽】文本框中输入数值100，保持高不变，效果如图左所示。此时图片严重变形，一般在网页中需要保持图片的固有比例。选中【高】文本框中的数值，将其删除，然后按Enetr键。此时图片缩小，恢复原有比例，如图右所示。比例变形右手恢复比例5.4.2修改对齐方式将文字与图片进行混合排列，它们之间必须具有一定的位置关系，称之为对齐方式。先看一个未设置对齐方式的实例，具体步骤如下：未设置对齐【属性】面板5.4.2修改对齐方式图片的