4.4使用图像(课件）-高二《网页设计与制作》同步教学（人民邮电版）

任务四 使用图像 操作一 插入图像 1．图像的格式 图像文件的格式有很多种，但通常应用于网页中的图像文件只有GIF、JPEG（JPG）及PNG三种，大多数浏览器都支持过三种文件格式的图像。 （1）GIF格式 GIF是Graphics Interchange Format（图形交换格式）的简称，主要用于存储非连续色调图像或色调比较单一的图像。它采用删除图像信息中冗余信息的方式对图像进行压缩，因而是一种无损压缩。这种格式的图形文件最多使用256种颜色，具有体积小，下载速度快等优点，在网页制作常用于制作导航条、按钮、图标等网页元素。 （2）JPEG（JPG）格式 JPEG是Joint Photographic Experts Group（联合图像专家组）的简称，主要用于存储照片或连续色调的图像。它采用有选择地删除原图像中人眼不易察觉的部分来压缩文件大小，是一种有损压缩。JPEG图像可支持多达16M颜色，因而常用于显示网页中对图片色彩和清晰度要求较高的地方，是目前互联网中最受欢迎的图像格式。 （3）PNG格式 PNG是Portable Network Graphic（可移植网络图像）的简称，它同时具有GIF格式图像和JPEG格式图像的优点，它既可以采用无损压缩的算法，也可以采用有损压缩的算法来压缩图像，从而进一步减少文件的大小。而且PNG格式的图像支持多种颜色的显示，因而是未来互联网中颇具发展前景的一种图像格式。 操作一 插入图像 “选择图像源文件”对话框 图像被插入到页面 操作二 设置图像属性 1．调整图像大小 图像调整控制柄 （2）利用“属性”面板调整图像大小 （1）可视化方式调整图像大小 修改图像大小 操作二 设置图像属性 2．裁剪图像 提示对话框 调整裁剪区域大小 裁剪后的图像 操作二 设置图像属性 3．调整图像的亮度和对比度 提示对话框 “亮度/对比度”对话框 修改前后的效果对比 操作二 设置图像属性 4．对齐图像 操作二 设置图像属性 5．图像描边 设置图像边框宽度 6．给图像增加提示信息 替代文本 操作二 设置图像属性 7．设置图像边距 任务五 在页面中插入鼠标经过图像 在浏览网页的过程中，有时会遇到这样的情况：当鼠标移动到某一图像的上方时，该图像自动切换到另一幅图像；而当鼠标移出图像时，该图像又恢复原貌。这种效果的图像就是所谓的鼠标经过图像。 操作一 编辑图像 为取得好的鼠标经过图像的效果，用户可先利用图像编辑工具，如PhotoShop或FireworksMX2004等软件，将两张图片处理成大小一致的图像。 操作二 插入鼠标经过图像 “鼠标经过图像”对话框 设置鼠标经过图像参数 任务六 在网页中插入其他网页元素 操作一 插入水平线 1．添加水平线 在文档中添加水平线的操作步骤如下： （1）将光标移到要添加水平线的位置。 （2）选择菜单 “插入→HTML →水平线命令，或将插入工具栏切换到“HTML”选项，然后再单击按钮。 操作二 插入日期和时间 （1）在当前文档中将光标置于要插入日期对象的位置。 （2）选择菜单 “插入→日期”命令，或将插入工具栏切换到“常用”工具栏选项，然后单击工具栏上的按钮，打开如图4-75所示的“插入日期”对话框。 “插入日期”对话框 操作三 插入Flash对象 1．插入Flash动画 选择菜单 “插入→媒体→Flash” 命令，或单击“常用”插入工具栏上的“Flash”按钮，打开“选择文件”对话框 “选择文件”对话框 插入的Flash动画 操作三 插入Flash对象 2．插入Flash文字 选择菜单 “插入→媒体→Flash文本”命令，或单击“常用”插入工具栏上的“Flash”下拉按钮，从弹出的下拉菜单中选择“Flash文本”选项，打开“插入Flash文本”对话框。 “插入Flash文本”对话框 操作三 插入Flash对象 3．插入Flash按钮 选择菜单 “插入→媒体→Flash按钮”命令，或单击“常用”插入工具栏上的“Flash”下拉按钮，从弹出的下拉菜单中选择“Flash按钮”选项，打开“插入Flash按钮”对话框 “插入Flash按钮”对话框 操作四 添加声音 （1）准备好一首MID音乐，它的扩展名为“.mid”或“.rmi”，这里我们使用站点目录“media”中的声音文件“lyh-.mid”。 （2）在Dreamweaver文档窗口中，将光标页面中的任一位置上。 （3）切换到代码窗口，在光标的当前位置上添加代码“<embed src=" media/LYH-.MID"></embed>” 插入的代码 播放控制器 项目拓展