通过Dreamweaver.CS3学习HTML+DIV+CSS教学PPT第5章__网页图片Img

在网页设计中，图片起着至关重要的作用，它们能够直观地传达信息并增强网页的视觉吸引力。本章主要讲解如何使用Dreamweaver CS3来处理网页中的图片，特别是关于HTML中`<img>`标签的使用，以及不同图片格式的特性。 5.1 图片格式 在网页设计中常用的图片格式主要有三种：GIF、JPG和PNG。 5.1.1 GIF格式 GIF是一种索引颜色格式，适合于颜色变化不多的图像，如导航条、按钮等。它的优点是文件小且支持动画，但质量相对较低。 5.1.2 JPG格式 JPG格式适用于摄影或连续色调图像，支持丰富的颜色，提供较好的图片质量。通过调整压缩级别可以在图像品质和文件大小之间找到平衡。 5.1.3 PNG格式 PNG是无专利权限的新型格式，支持透明度，质量优于GIF，同时文件大小也相对较小。尽管所有浏览器都支持，但较新的格式可能在旧版浏览器中不被完全支持。 5.2 插入图片 在Dreamweaver中插入图片有两种主要方法：直接插入和拖动插入。 5.2.1 直接插入 当图片不在站点文件夹内，可以通过"选择图像源文件"对话框来插入，预览并设置图像属性，如替换文本，然后确认插入。 5.2.2 拖动插入 如果图片位于站点文件夹内，可以直接从文件面板拖拽到设计视图中，快速简便。 5.2.3 揭示图片源码 在代码视图中，可以看到插入图片后的HTML源码，`<img>`标签包含了图片的路径、宽度、高度和替换文本。 5.3 图片路径 路径分为绝对路径和相对路径。绝对路径从根目录开始，详细指明文件位置，而相对路径则是相对于当前文件的路径。 5.3.1 绝对路径 绝对路径完整地给出文件的存储位置，对于深层次文件结构可能会显得冗长。 5.3.2 相对路径 相对路径简化了路径描述，根据当前文件的位置来定位目标文件，更便于管理和维护。 5.4 图片修改 插入图片后，往往需要进行尺寸、对齐和边框等方面的调整。 5.4.1 修改尺寸 尺寸修改可以通过鼠标直接拖动图片边缘，或者在属性面板中设置宽度和高度。 在网页设计中，理解并熟练掌握这些图片处理技巧至关重要，它们有助于创建更具吸引力和功能性的网站。通过Dreamweaver CS3，我们可以更加高效地管理和优化网页中的图像元素，提升用户体验。