第十章Dreamweaver网页编辑(上课)概论.ppt

10.2 制作第一个网页 10.2.1 网页文件的基础操作 1、新建网页 2、保存网页 3、打开网页 4、预览网页 10.5 图像 10.5.1 图像定义 图像通常用来添加图形界面（例如导航按钮）、具有视觉感染力的内容（例如照片）或交互式设计元素（例如鼠标经过图像或图像地图）。 在在 Dreamweaver 文档中添加图像时，可以设置或修改图像属性并直接在“文档”窗口中查看所做的更改。 10.5.2需要掌握以下几方面内容： 1、图像的格式 2、插入图像 3、图像占位符 4、图像的属性设置 5、图像的高级设置 1、图像的格式 GIF（图形交换格式）这是一种非失真压缩格式。它最大的优点是所生成的文件比较小，适于在网络上传播，同时支持动画功能和透明背景。缺点是该格式最多使用 256 种颜色，不支持真彩色24位。这种格式 最适合显示色调不连续或具有大面积单一颜色的图像，例如导航条、按钮、图标、徽标或其他具有统一色彩和色调的图像。 JPEG（联合图像专家组标准）这是一种失真压缩格式。压缩效果明显，支持24位真色彩。文件格式是用于摄影或连续色调图像的高级格式，这是因为 JPEG 文件可以包含数百万种颜色。随着 JPEG 文件品质的提高，文件的大小和下载时间也会随之增加。通常可以通过压缩 JPEG 文件在图像品质和文件大小之间达到良好的平衡。 PNG（可移植网络图形）这是一种非失真压缩格式。PNG 是 Macromedia Fireworks 8 固有的文件格式。PNG 格式具有GIF和JPEG的 全部优点。PNG 文件可保留所有原始层、矢量、颜色和效果信息（例如阴影），并且在任何时候所有元素都是完全可编辑的。文件必须具有 .png 文件扩展名才能被 Macromedia Dreamweaver 8 识别为 PNG 文件。 备注： 不同浏览器对 PNG 的支持是不一致的；因此，如果使用 PNG 文件，您还应该将它们导出为 GIF 或 JPEG，以确保它们具有 Web 版本。 2、 插入图像 若要插入图像，请执行以下操作： 在“文档”窗口中，将插入点放置在您要显示图像的地方，然后执行以下操作之一： ◎在“插入”工具栏的“常用”类别中，单击“图像”图标。 ◎在“插入”菜单栏中选择“图像”命令，弹出如图10-10所示的对话框。 在出现的对话框中执行下列操作之一： 如果您正在一个未保存的文档中工作，则 Dreamweaver 生成一个对图像文件的 file:// 引用。将文档保存到站点中的任何位置后，Dreamweaver将该引用转换为文档相对路径。 3、 图像占位符 图像占位符是在准备好将最终图形添加到 Web 页之前使用的图形。 您可以定义占位符的某些属性：您可以设置占位符的大小和颜色，以及为占位符提供文本标签。当在 Dreamweaver 的“文档”窗口中查看图像占位符时，将显示图像占位符的颜色、大小属性和标签文字。图像占位符不是在浏览器中显示的图形图像。在您发布站点之前，应该用适用于 Web 的图形文件（例如 GIF 或 JPEG）替换所有添加的图像占位符。 若要插入图像占位符，请执行以下操作： 1）、在“文档”窗口中，将插入点放置在要插入占位符图形的位置。 2）、执行下列操作之一： ◎在“插入”栏中，选择“常用”，然后单击“图像占位符”图标。◎在“插入”菜单中，选择“图像对像”，然后选择“图像占位符”命令。 “图像占位符”对话框随即显示，如图10-11所示。 3、在该对话框中，为图像占位符选择选项。 4、单击“确定”。 若要更新图像源文件，请执行以下操作： 1）、在“文档”窗口中执行下列操作之一： ◎双击图像占位符 ◎单击图像占位符将其选中，然后在属性面板（“窗口”“属性”）中单击“源文件”域旁的文件夹图标 即会出现“图像源文件”对话框，如图10-12所示。 4、 图像的属性设置 选取要编辑的图像，在属性面板（“窗口”--“属性”）中，设置该图像的属性。如果 10-13所示。 5、 图像的高级设置 鼠标经过图像设置 鼠标经过图像是一种在浏览器中查看并使用鼠标指针移过它时发生变化的图像。鼠标经过图像由两个图像组成，主图像（首次载入页时显示的图像）和次图像（当鼠标指针移过主图像时显示的图像）。鼠标经过图像中的两个图像其大小应相等，如果两个图像大小不同，Dreamweaver将自动调整第二个图像的大小以匹配第一个图像的大小。 插入鼠标经过图像的具体操作如下。 在“文档”窗口中，将插入点放置在要显示鼠标经过图像的位置。 使