DreamweaverCS3中文版实例教程 03 图像和多媒体

《DreamweaverCS3中文版实例教程 03 图像和多媒体》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、第3章　图像和多媒体本章简介：图像在网页中的作用是非常重要的，图像、按钮、标记可以使网页更加美观、形象生动，从而使网页中的内容更加丰富多彩。所谓“媒体”是指信息的载体，包括文字、图形、动画、音频和视频等。在DreamweaverCS3中，用户可以方便快捷地向Web站点添加声音和影片媒体，并可以导入和编辑多个媒体文件和对象。课堂学习目标图像的插入调整图文的混排效果创建网站相册多媒体在网页中的应用3.1图像的插入课堂案例——儿童相册网页中的图像格式插入图像设置图像属性给图片添加文字说明插入图像占位符跟踪图像3.1.1课堂案例——儿童相册使用“图像”按钮插入图像。使用“属性”面板改变图片的大小、

2、调整图像的亮度和对比度并为图片添加文字说明。使用“图像占位符”命令代替网页中缺少的一张图片。效果图3.1.2网页中的图像格式Web页中通常使用的图像文件有JPEG、GIF、PNG3种格式，但大多数浏览器只支持JPEG、GIF两种图像格式。因为要保证浏览者下载网页的速度，所以网站设计者也常使用JPEG和GIF这两种压缩格式的图像。GIF文件JPEG文件PNG文件3.1.3插入图像要在DreamweaverCS3文档中插入的图像必须位于当前站点文件夹内或远程站点文件夹内，否则图像不能正确显示，所以在建立站点时，网站设计者常先创建一个名叫“image”的文件夹，并将需要的图像拷贝到其中。3.1.

3、4设置图像属性插入图像后，在“属性”面板中显示该图像的属性。属性面板3.1.5给图片添加文字说明当图片不能在浏览器中正常显示时，网页中图片的位置就变成空白区域。为了让浏览者在不能正常图片显示时也能了解图片的信息，常为网页的图像设置“替换”属性。3.1.6插入图像占位符在网页布局时，网站设计者需要先设计图像在网页中的位置，等设计方案通过后，再将这个位置变成具体图像。DreamweaverCS3提供的“图像占位符”功能，可满足上述需求。在网页中插入图像占位符的具体操作步骤如下。（1）在文档窗口中，将插入点放置在要插入占位符图形的位置。（2）通过以下几种方法启用“图像占位符”命令，弹出“图像占位

4、符”对话框。选择“插入”面板“常用”选项卡，单击“图像”展开式工具按钮，选择“图像占位符”选项。选择“插入记录>图像对象>图像占位符”命令。3.1.7跟踪图像在工程设计过程中，一般先在图像处理软件中勾画出工程蓝图，然后在此基础上反复修改，最终得到一幅完美的设计图。制作网页时也应采用工程设计的方法，先在图像处理软件中绘制网页的蓝图，将其添加到网页的背景中，按设计方案对号入座，等网页制作完毕后，再将蓝图删除。DreamweaverCS3利用“跟踪图像”功能来实现上述网页设计的方式。3.1.8跟踪图像在工程设计过程中，一般先在图像处理软件中勾画出工程蓝图，然后在此基础上反复修改，最终得到一幅完美

5、的设计图。制作网页时也应采用工程设计的方法，先在图像处理软件中绘制网页的蓝图，将其添加到网页的背景中，按设计方案对号入座，等网页制作完毕后，再将蓝图删除。DreamweaverCS3利用“跟踪图像”功能来实现上述网页设计的方式。3.2调整图文的混排效果课堂案例——数码相机网页调整图像与文本的相对位置3.2.1课堂案例——数码相机网页使用“图像”按钮插入图像。使用“属性”面板改变图像的对齐、水平边距。效果图3.2.2调整图像与文本的相对位置网页中既有文字，又有图像，如何调整同一行文字和图像的摆放位置达到表现良好的视觉效果，这就涉及图像与文字的相对位置问题。调整同一行图像与文字相对位置的具体操

6、作步骤如下。（1）在设计视图中选择图像。（2）在图像“属性”面板中展开“对齐”选项的下拉列表，选择一种调整图像与文字相对位置的方式。“对齐”选项中提供了9种图像与文字的对齐方式。3.3创建网站相册课堂案例——家庭生活照片创建网站相册3.3.1课堂案例——家庭生活照片用“创建网站相册”命令制作相册效果。使用“查找”和“替换”命令将图像设为居中显示效果。效果图3.3.2创建网站相册在开始创建网站相册之前，将相册的所有图像放置在一个文件夹中，并确保图像文件名的扩展名为：“.Gif”、“.Jpg”、“.Jpeg”、“.Png”、“.Psd”、“.Tif”或“.Tiff”。首先，使用Firework

7、sCS3来为该文件夹中的每个图像创建一个缩略图和一个较大尺寸的图像。然后，应用DreamweaverCS3创建一个Web页，它包含所有缩略图以及指向大图像所在网页的链接。3.4多媒体在网页中的应用课堂案例——营养美食网页插入Flash动画插入Flash文本插入Flash按钮插入Shockwave影片影片插入Applet程序插入ActiveX控件3.4.1课堂案例——营养美食网页使用“Flash”按钮制作网页导航条效果。使