ch03-图像和其他媒体.pptVIP

第3章 图像和其他媒体 第3章 图像及其他媒体 内容提要 图像及声音文件的格式 插入网页图像的方法 插入声音的方法 插入Flash动画的方法 第3章 图像及其他媒体 3.1 插入图像 图像是一种重要的信息载体，通过在文档中插入精美的图像元素，可以实现深度视觉冲击，使得文档更具有吸引力，有效突出文档的主题。 3.1.1网页中常见的图像格式 在计算机中使用的图像文件有很多种图形文件格式，例如PCX、PCD、JPEG、PNG、GIF、BMP、TIFF等，但 Web 页面中通常使用的只有三种，即 GIF、JPEG 和PNG。 1.GIF 文件 GIF（图形交换格式）是一种基于LZW算法的连续色调的无损压缩格式，其压缩率一般在50％左右。GIF文件最多使用 256 种颜色，最适合显示色调不连续或具有大面积单一颜色的图像，例如导航条、按钮、图标、徽标或其它具有统一色彩和色调的图像。 2.JPEG文件 JPEG （联合图像专家组标准）文件格式是用于摄影或连续色调图像的高级格式，这是因为JPEG 文件可以包含数百万种颜色。随着 JPEG 文件品质的提高，文件的大小和下载时间也会随之增加。通常可以通过压缩 JPEG 文件在图像品质和文件大小之间达到良好的平衡。 3.PNG 文件 第3章 图像及其他媒体 3.1 插入图像 3.1.2插入网页图像 1.在设计视图中插入图像 在将图像插入 Dreamweaver 8 文档时，自动在 HTML 源代码中生成对该图像文件的引用，为了确保引用的正确性，该图像文件必须位于当前站点中。如果图像文件不在当前站点中， Dreamweaver 8 会询问是否要将此文件复制到当前站点中。 若要插入图像，可以执行以下操作： （1）在“文档”窗口中，将插入点放置在要显示图像的地方，然后执行以下操作之一： 在“插入”栏的“常用”类别中，单击“图像”图标，如图3.1所示。 第3章 图像及其他媒体 3.1 插入图像 3.1.2插入网页图像 1.在设计视图中插入图像 （2）出现的“选择图像源”对话框,执行下列操作之一： 选择“文件系统”以选择一个图形文件。 选择“数据源”以选择一个动态图像源。 图3.2 选择图像源对话框 （3）浏览以选择要插入的图像或内容源。 如果当前文档是一个未保存的文档，则 Dreamweaver 8 生成一个对图像文件的引用，将文档保存到站点中的任何位置后 ，Dreamweaver 8 将该引用转换为文档相对路径。 （4） 单击“确定”按钮，将显示“图像标签辅助功能属性”对话框（该对话框需要在“首选参数”中激活）， （5）在“替换文本”和“详细说明”文本框中输入值，然后单击“确定”按钮。 第3章 图像及其他媒体 3.1 插入图像 3.1.2插入网页图像 2.在代码视图中插入图像 在 HTML 中，图像由 img 标签定义。img 是空标签它只包含属性，并且没有闭合标签。 要在页面上显示图像，需要使用源属性（src）。src 指 source，源属性的值是图像的 URL 地址。 定义图像的语法是： img src=url alt= URL 指存储图像的位置。如果名为 boat.gif 的图像位于 的 images 目录中，那么其 URL 为 /images/boat.gif。 alt 属性用来为图像定义一串预备的可替换的文本，替换文本属性的值是用户定义的。 img src=boat.gif alt=Big Boat 在浏览器无法载入图像时，替换文本属性告诉读者失去的信息。此时，浏览器将显示这个替代性的文本而不是图像，为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。 第3章 图像及其他媒体 3.1 插入图像 3.1.3 设置网页图像的属性 1.图像的属性面板 在“属性”面板（“窗口”→“属性”）中，设置该图像的属性，如图3.4所示。 图3.4 “属性”面板 2.对齐图像 通过对齐图像操作，可以将图像与同一行中的文本、另一个图像、插件或其它元素对齐，还可以设置图像的水平对齐方式。 若要对齐图像，执行以下操作： （1）在“设计”视图中选择该图像。 （2）在“属性”面板中设置该图像的对齐属性，如图3.5所示，可以设置相对于同一段落或行中的其它元素的对齐方式。 第3章 图像及其他媒体 3.1 插入图像 3.1.3 设置网页图像的属性 2.对齐图像 Dreamweaver 8提供的对齐方式，如图3.6所示： 【默认值】：默认值对齐通常是指按照指定基线对齐。（根据站点访问者的浏览器的不同，默认值也会有所不同。） 【基线和底部】: 基线和底部对齐是指将文本（或同一段落中的其它元素）的基线与选定对象的底部对齐。 【顶端】: 顶端对齐是将图像的顶端