Top Banner
中中中 中中中 Dreamweaver 8 Dreamweaver 8 中中中中 中中中中 05 05 中中中中中中中 中中中中中中中 图图图图图图图图 图图图图图图图图图 图图图图图图图图图图图图 图图图图图图图图图图 图图图图图图图图图 一,,, 图图图图图图图图 图图图图图图图图图 图图图图图图图图图图图图 图图图图图图图图图图 图图图图图图图图图 一,,, 图图图图图图图 图图图图图图图图图图 ,。 图图图图图图图 图图图图图图图图图图 ,。 图图图图图图图图图图图图图图图图图图图 图图图图图图图图图图图图图图图图图图图 ( 图图图图 图图图图 ) 图图图图图图图图图图图图 图图图图图图图图图图图图 ( 图图图图 图图图 图图图图 图图图 ) ) 图图图图图图图图 图图图图图图图图 ( 图图图图图图图图图图图图图图图 图图图图图图图图图图图图图图图 ) 图
17

第 05 章 创建与编辑路径

Jan 08, 2016

Download

Documents

rico

第 05 章 创建与编辑路径. 图像是网页制作中一个不可缺少的部分,在页面中恰当地使用图像,不仅可以使网页美观,更重要的是可以更加直观地表达信息,同时可以吸引浏览者。 在网页中插入图像通常是用于添加图形界面 ( 例如按钮 ) 、创建具有视觉感染力的内容 ( 例如照片、背景等 ) 或交互式设计元素 ( 例如鼠标指针经过图像或图像地图 ) 。. 5.1 教学目标. 掌握知识: 通过本章的学习,读者应了解 Web 页中常用的几种图像格式,掌握插入图像的方法,并能够简单编辑插入到文档中的图像,以及设置它们的属性。 - PowerPoint PPT Presentation
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: 第 05 章   创建与编辑路径

中文版中文版 Dreamweaver 8Dreamweaver 8 实用教实用教程程

第第 0505 章 章 创建与编辑路径创建与编辑路径

图像是网页制作中一个不可缺少的部分,在页面中恰当地使用图像,不仅图像是网页制作中一个不可缺少的部分,在页面中恰当地使用图像,不仅可以使网页美观,更重要的是可以更加直观地表达信息,同时可以吸引浏览者。可以使网页美观,更重要的是可以更加直观地表达信息,同时可以吸引浏览者。 在网页中插入图像通常是用于添加图形界面在网页中插入图像通常是用于添加图形界面 (( 例如按钮例如按钮 )) 、创建具有视觉感、创建具有视觉感染力的内容染力的内容 (( 例如照片、背景等例如照片、背景等 )) 或交互式设计元素或交互式设计元素 (( 例如鼠标指针经过图像例如鼠标指针经过图像或图像地图或图像地图 )) 。。

Page 2: 第 05 章   创建与编辑路径

中文版中文版 Dreamweaver 8Dreamweaver 8 实用教实用教程程

5.1 5.1 教学目标教学目标

掌握知识:掌握知识:通过本章的学习,读者应了解通过本章的学习,读者应了解 WebWeb 页中常用的几种图像格式,页中常用的几种图像格式,掌握插入图像的方法,并能够简单编辑插入到文档中的图像,以及设置它们的掌握插入图像的方法,并能够简单编辑插入到文档中的图像,以及设置它们的属性。属性。 重点学习:重点学习:本章重点讲解了插入图像、编辑图像、设置图像属性,以及在本章重点讲解了插入图像、编辑图像、设置图像属性,以及在DreamweaverDreamweaver 中使用中使用 FireworksFireworks 文件的方法。课后读者应结合上机操作进行强文件的方法。课后读者应结合上机操作进行强化练习。化练习。

Page 3: 第 05 章   创建与编辑路径

中文版中文版 Dreamweaver 8Dreamweaver 8 实用教实用教程程

5.2 5.2 理论指导 理论指导 图像的使用图像的使用 设置图像属性与编辑图像设置图像属性与编辑图像 创建鼠标经过图像创建鼠标经过图像 使用使用 FireworksFireworks 文件文件

Page 4: 第 05 章   创建与编辑路径

中文版中文版 Dreamweaver 8Dreamweaver 8 实用教实用教程程

55.2.1.2.1 图像的使用图像的使用 如果网页中的内容全是密密麻麻的文字,无论有多精彩的内容,都容易使如果网页中的内容全是密密麻麻的文字,无论有多精彩的内容,都容易使人厌烦。所以任何精美的网页中可能没有文本,但不可能没有图像等多媒体元人厌烦。所以任何精美的网页中可能没有文本,但不可能没有图像等多媒体元素,这足见图像在网页中的作用。在网页中适当地插入图像可以使网页增色不素,这足见图像在网页中的作用。在网页中适当地插入图像可以使网页增色不少,更重要是可以借此直观地向浏览者表达信息。少,更重要是可以借此直观地向浏览者表达信息。

WebWeb 页中常用的图像格式页中常用的图像格式 插入图像插入图像 插入图像占位符插入图像占位符 设置网页背景图像设置网页背景图像

Page 5: 第 05 章   创建与编辑路径

中文版中文版 Dreamweaver 8Dreamweaver 8 实用教实用教程程

如果要在网页中插入图像,可以选择“插入”如果要在网页中插入图像,可以选择“插入” |“|“ 图像”命令,在打开的图像”命令,在打开的“选择图像文件”对话框中选择合适的图像文件后,单击“确认”按钮即可。“选择图像文件”对话框中选择合适的图像文件后,单击“确认”按钮即可。

Page 6: 第 05 章   创建与编辑路径

中文版中文版 Dreamweaver 8Dreamweaver 8 实用教实用教程程

如果要在网页中插入图像占位符如果要在网页中插入图像占位符 ,, 可以选择“插入”可以选择“插入” |“|“ 图像对象”图像对象” |“|“ 图像占图像占位符”命令,然后在打开的“图像占位符”对话框中完成所需的设置后,单位符”命令,然后在打开的“图像占位符”对话框中完成所需的设置后,单击”确定”按钮即可击”确定”按钮即可。

Page 7: 第 05 章   创建与编辑路径

中文版中文版 Dreamweaver 8Dreamweaver 8 实用教实用教程程

如果要将某张图像设置为网页背景图像,可以 选择“修改”如果要将某张图像设置为网页背景图像,可以 选择“修改” |“|“ 页面属性”页面属性”命令,打开“页面属性”对话框,在“分类”列表框中选择“外观”选项,然命令,打开“页面属性”对话框,在“分类”列表框中选择“外观”选项,然后单击“背景图像”文本框后的“浏览”按钮,并在打开的“选择图像源文后单击“背景图像”文本框后的“浏览”按钮,并在打开的“选择图像源文件”对话框中选择该图像文件件”对话框中选择该图像文件 ,, 单击”确定”按钮即可。单击”确定”按钮即可。

Page 8: 第 05 章   创建与编辑路径

中文版中文版 Dreamweaver 8Dreamweaver 8 实用教实用教程程

5.2.2 5.2.2 设置图像属性与编辑图像设置图像属性与编辑图像 在网页中插入图像后,用户需要设置图像属性和排列图像与文本之间的位在网页中插入图像后,用户需要设置图像属性和排列图像与文本之间的位置,以调整网页的整体效果。置,以调整网页的整体效果。

设置图像属性设置图像属性 对齐图像对齐图像 调整图像大小调整图像大小 使用内部图像编辑器使用内部图像编辑器 使用外部图像编辑器使用外部图像编辑器

Page 9: 第 05 章   创建与编辑路径

中文版中文版 Dreamweaver 8Dreamweaver 8 实用教实用教程程

要设置图像的属性,可在网页文档中选择一个图像,然后选择“窗口”要设置图像的属性,可在网页文档中选择一个图像,然后选择“窗口” ||““ 属属性”命令打开图像属性检查器 性”命令打开图像属性检查器 (( 如果没有看到下面所示的所有图像属性,单击如果没有看到下面所示的所有图像属性,单击右下角的扩展箭头右下角的扩展箭头 )) ,接下来根据提示进行相关操作即可。,接下来根据提示进行相关操作即可。

Page 10: 第 05 章   创建与编辑路径

中文版中文版 Dreamweaver 8Dreamweaver 8 实用教实用教程程

在网页中插入图像后,下面最重要的工作就是排列图像与文本之间的位置。在网页中插入图像后,下面最重要的工作就是排列图像与文本之间的位置。要设置图像的格式,可以使用属性检查器中的“对齐”下拉列表框。要设置图像的格式,可以使用属性检查器中的“对齐”下拉列表框。

Page 11: 第 05 章   创建与编辑路径

中文版中文版 Dreamweaver 8Dreamweaver 8 实用教实用教程程

要调整要调整 Dreamweaver 8Dreamweaver 8 网页编辑窗口中图像的大小网页编辑窗口中图像的大小 ,, 可以在选中文档中该可以在选中文档中该图像后,拖动图像的周围将出现的图像后,拖动图像的周围将出现的 33 个控制点,实现操作效果个控制点,实现操作效果 。。

Page 12: 第 05 章   创建与编辑路径

中文版中文版 Dreamweaver 8Dreamweaver 8 实用教实用教程程

Dreamweaver 8Dreamweaver 8 集成了集成了 FireworksFireworks 的基本图形编辑技术,可以不用借助外的基本图形编辑技术,可以不用借助外部图形编辑器,直接对图形进行修剪、重新取样、调整图像的亮度和对比度以部图形编辑器,直接对图形进行修剪、重新取样、调整图像的亮度和对比度以及锐化图像等操作。及锐化图像等操作。

Page 13: 第 05 章   创建与编辑路径

中文版中文版 Dreamweaver 8Dreamweaver 8 实用教实用教程程

要改变外部图像编辑器,可选择“编辑”要改变外部图像编辑器,可选择“编辑” ||““参数选择”命令,打开“首选参数选择”命令,打开“首选参数”对话框,然后在对话框的“分类”列表框中选择“文件类型参数”对话框,然后在对话框的“分类”列表框中选择“文件类型 // 编辑器”选编辑器”选项,此时在对话框右侧可以为指定的图像文件类型设置外部图像编辑器项,此时在对话框右侧可以为指定的图像文件类型设置外部图像编辑器 。。

Page 14: 第 05 章   创建与编辑路径

中文版中文版 Dreamweaver 8Dreamweaver 8 实用教实用教程程

5.2.3 5.2.3 创建鼠标经过图像创建鼠标经过图像 要在网页中插入鼠标指针经过图像,可以选择“插入”要在网页中插入鼠标指针经过图像,可以选择“插入” ||““ 图像对象”图像对象” ||““ 鼠鼠标经过图像”命令,打开“插入鼠标经过图像”对话框标经过图像”命令,打开“插入鼠标经过图像”对话框 进行设置。进行设置。

Page 15: 第 05 章   创建与编辑路径

中文版中文版 Dreamweaver 8Dreamweaver 8 实用教实用教程程

5.2.4 5.2.4 使用使用 FireworksFireworks 文件文件 Dreamweaver 8 Dreamweaver 8 作为可视化网页编辑工具,与作为可视化网页编辑工具,与 Fireworks Fireworks 一起使用,可一起使用,可以使网页设计更加方便、快捷。使用以使网页设计更加方便、快捷。使用 FireworksFireworks 可以创建各种适用于可以创建各种适用于 DreamwDreamweavereaver 的图像和的图像和 HTMLHTML 文件。并且可以通过放置于文档中的文件。并且可以通过放置于文档中的 Fireworks Fireworks 图像来图像来启动启动 FireworksFireworks 应用程序。应用程序。

插入 Fireworks 文件 使用 Fireworks 更新 Dreamweaver 图像占为符 在文档中插入 Fireworks HTML代码 使用 Fireworks 来优化或编辑图像

Page 16: 第 05 章   创建与编辑路径

中文版中文版 Dreamweaver 8Dreamweaver 8 实用教实用教程程

在网页文档中,用户可以选择“插入”在网页文档中,用户可以选择“插入” |“|“ 图像”命令,打开“选择图像来图像”命令,打开“选择图像来源”对话框,直接插入源”对话框,直接插入 FireworksFireworks 创建的创建的 GIFGIF 、、 JEPGJEPG 或或 PNGPNG 图像。或者利用图像。或者利用“图像占位符”在“图像占位符”在 DreamweaverDreamweaver 文档中创建新的文档中创建新的 FireworksFireworks 图像。图像。

Page 17: 第 05 章   创建与编辑路径

中文版中文版 Dreamweaver 8Dreamweaver 8 实用教实用教程程

5.3 5.3 上机实验上机实验 本章的上机实验主要练习在网页文档中插入图像的方法,以及使用图像属本章的上机实验主要练习在网页文档中插入图像的方法,以及使用图像属性检查器对图像属性进行设置。其中综合利用图像属性检查器编辑图像的属性、性检查器对图像属性进行设置。其中综合利用图像属性检查器编辑图像的属性、样式是重点。在样式是重点。在 DreamweaverDreamweaver 文档中插入图像时,应选择适当的对象进行修文档中插入图像时,应选择适当的对象进行修改。在操作图像属性检查器时应注意各编辑命令的设置。对于本章中的其他内改。在操作图像属性检查器时应注意各编辑命令的设置。对于本章中的其他内容,用户可根据理论指导部分进行练习。。容,用户可根据理论指导部分进行练习。。 在文档中插入图像在文档中插入图像 插入图像占位符插入图像占位符