DreamweaverCC2015中文版案例教程第2版全套配套课件教学资源第6章.pptVIP

第6章添加图像和多媒体 图像和文字都是组成网页的基本元素。与文字相比，使用图像更能够使HTML文档便于理解，更直观和生动。同时，使用图像还可以丰富网页内容，使网页页面更加美观，使得文档更加具有吸引力。所以，无论是个人网站还是商业网站，都需要有优秀的图像效果作为基础，以达到更好的网页设计宣传目的。相信通过本章的学习，读者一定能制作出漂亮的网页。 6.1 网页中常用的图像格式 图像是网页中最常用的对象之一，制作精美的图像可以大大增强网页的视觉效果，令网页更加多姿多彩。在网页中恰当地使用图像，能够极大地吸引用户的眼球。因此，合理利用图像，是网页设计的关键。 6.1 网页中常用的图像格式 6.1.1 GIF图像格式 GIF是英文单词Graphic Interchange Format的缩写，即图像交换格式，这种格式的文件最多使用256种颜色，最适合显示色调不连续或具有大面积单一颜色的图像，如导航条、按钮、图标、徽标或其他具有统一色彩和色调的图像。 6.1 网页中常用的图像格式 6.1.2 JPEG图像格式 JPEG是英文单词Joint Photographic Experts Group的缩写，它是一种图像压缩格式，文件格式是用于摄影或连续色调图像的高级格式，这是因为JPEG文件可以包含数百万种颜色。随着JPEG文件品质的提高，文件大小和下载时间也会随之增加。 6.1 网页中常用的图像格式 6.1.3 PNG图像格式 PNG是英文单词Portable Network Graphic 的缩写，即便携网络图像，是一种替代GIF 格式的无专利权限制的格式，它包括对索引色、灰度、真彩色图像及Alpha通道透明的支持。PNG文件可保留所有的原始层、矢量、颜色和效果信息，并且在任何时候所有元素都是可以完全编辑的。文件必须具有扩展名png才能被Dreamweaver识别为PNG图像， 6.2 制作图像页 前面介绍了网页中最常见的3种图像格式，接下来学习如何在网页中使用图像。在使用图像前，一定要有目的地选择图像，最好使用图像处理软件美化一下图像，否则插入的图像如果不美观，可能会显得很呆板。 6.2.1 插入图像 在Dreamweaver CC 2015中，可以直接插入图像，也可以将图像作为页面的背景，另外还可以创建出图像轮替的交换效果。我们也可以打开外部的图像编辑器来直接修改网页的制作过程中的图像。 6.2 制作图像页 6.2.2 设置图像属性 图像的“属性”面板用于显示图像的当前属性，可以通过改变“属性”面板中的各项设置改变图像的属性，在“设计”视图中选择一张图像，“属性”面板显示常用的图像属性。单击“属性”面板右下角的扩展箭头，可以查看所有的图像属性。 6.2 制作图像页 6.2.3 插入鼠标经过图像 “鼠标经过图像”是网页特效中的一种。当鼠标指针经过一个图像时，图像的外观显示会变成另一种状态，这种变化可以是图像在颜色或形状上发生了改变，是一种互动效果。当鼠标指针从图像上移走后，图像又恢复原状。通常情况下，要通过HTML和JavaScript的结合使用才能实现互动效果。不过使用Dreamweaver时，只要选择相应选项就能够自动创建互动效果。 6.2 制作图像页 6.2.4 插入HTML5画布 画布是Dreamweaver基于HTML5的全新功能，通过该功能可以在网页中自动绘制出一些常见的图形，如矩形、椭圆形等，并且能够添加一些图像。 6.3 制作多媒体页 现在的网页设计中，除了可以放置一些静止的图片外，动态效果也越来越多地被应用。Web页中的多媒体技术使因特网世界变得更加绚丽多彩。本章主要介绍在用Dreamweaver设计网页时如何使用音频、视频、动画、Java小程序及一些控件。 6.3.1 插入HTML 5 Video 以前在网页中插入视频都是通过插件的方式或者是插入Flash Video,Flash Video视频需要浏览器安装Flash播放插件才可以正常播放。在HTML5中新增了video标签，通过使用video标签，可以直接在网页中嵌入视频文件不需要任何的插件。 6.3 制作多媒体页 6.3.2 插入HTML 5 Audio 网络上有许多不同格式的音频文件，但HTML标签所支持的音乐格式并不是很多，并且不同的浏览器支持的格式也不相同。HTML5针对这种情况，新增了audio标签来统一网页音频格式，可以直接使用该标签在网页中添加相应格式的音乐。 6.3 制作多媒体页 6.3.3 插入SWF动画 Flash是一种矢量化的Web交互式动画，在本节中，我们将学习利用Flash影片相关的“属性” 面板调整影片大小、透明处理Flash影片背景等方法。Dreamweaver中还附带了Flash对象，因此无论计算机上是