网页设计第5章.pptVIP

网页设计三合一教程 主讲教师 第5章　图像的基础及多媒体 主讲教师 5.1　网页中使用的图像格式简介 网页中使用的图像可以是GIF、JPEG、BMP、TIFF、PNG等格式的图像文件。 目前主要使用的是GIF和JPEG两种格式。 网页中的图像格式一般以GIF为主，如果涉及照片类的图像，则选择JPEG格式。 5.2　图像的属性 5.2.1　图像描边的设置 5.2.2　图文混排的设置 5.2.3　图片提示 5.2.4　图像热区的创建 5.2.5　图像边距的设置 5.2.6　图像占位符简介 例：设置图像的边框为1像素 例：设置图像在文本的左边 5.2.3　图片提示 方法 选中要增加提示的图像，在【属性】面板的【替换】文本框中输入提示的内容即可。 效果 按F12键预览一下效果，当鼠标的光标停留在图像上时就会显示出提示的文字。 例：设置提示文字为“这就是我！” 5.2.4　图像热区的创建 方法 在【属性】面板中分别单击 3个按钮，可以在图像上建立3种不同形状的热区。 效果 鼠标指针经过图像热区时会发生相应的变化，提示这是一个超级链接。 例：设置 “链接到洪恩在线！” 例：设置【垂直边距】和【水平边距】的值都为“20”。 例：设置一个宽750，高140的红色占位符。 5.3　对图像进行编辑 5.3.1　修改图片的大小 5.3.2　编辑图片 5.3.3　裁剪图像 5.3.4　修改图像的亮度和对比度 5.3.1　修改图片的大小 方法一 通过拖曳图像右侧、底边和右下角的控制手柄可以调整图像的大小。 方法二 在【属性】面板中直接修改图像的【宽】和【高】的数值也可改变图像的大小。 说明 单击【属性】面板上的 按钮可恢复图像原来的大小。 5.3.2　编辑图片 方法 通过【编辑方式】命令对图像进行修改和处理，默认的是Fireworks软件。 说明 在【首选参数】对话框选择图片编辑器。 例：设置默认的GIF图像处理软件 例：裁剪图像举例 5.3.4　修改图像的亮度和对比度 方法 单击【属性】面板上【亮度和对比度】按钮 ，在弹出的【亮度/对比度】对话框中进行亮度和对比度的设置。 扩展 单击 【属性】面板中的【锐化】按钮 ，在弹出的【锐化】对话框中可以进行锐化的设置。 例：亮度/对比度举例 5.4　多媒体的添加及参数的设置 5.4.1　Flash动画效果的设置 5.4.2　Flash文本对象的插入 5.4.3　Flash按钮的简单制作 5.4.4　多媒体类型的添加 5.4.1　Flash动画效果的设置 方法 首先将Flash文件存入swf文件夹内；在需要插入动画的文件中建一个1行1列的表格；执行【插入】|【媒体】|【Flash】命令，在表格中插入Flash文件。 扩展 在【参数】对话框中的【参数】下输入“wmode”，在【值】的下面输入“transparent”，可使动画出现透明效果 。 例：为donghua.htm添加top.swf文件，并设置透明效果。 5.4.2　Flash文本对象的插入 方法 执行【插入】|【媒体】|【Flash文本】命令，弹出【插入Flash文本】对话框，在该对话框中可以设置动画效果。 扩展 选中动画文字后，单击【属性】面板中的【编辑】按钮可对该动画文字进行修改。 例：鼠标在文字外时文字以红色显示；鼠标在文字上时以蓝色显示。 5.4.3　Flash按钮的简单制作 方法 执行【插入】|【媒体】|【Flash按钮】命令，弹出【插入Flash按钮】对话框。在该对话框中进行相应的设置可以制作出Flash按钮。 说明 文件夹名用字母或者数字组成。 例：制作一组按钮，当鼠标移动到按钮上时左边的五角星开始转动 。 5.4.4　多媒体类型的添加 说明 在浏览器中访问Shockwave电影、Flash动画、MIDI音乐等媒体对象时必须借助插件，通过下载插件才可以看到更多的媒体类型。 例： 插入Shockwave影片 。 首先将光标定位到要出现影片的位置； 然后单击【媒体】下拉菜单中的【Shockwave】选项或者执行【插入】|【媒体】|【Shockwave】命令； 在弹出的对话框中选择Shockwave影片的文件路径。 例：插入一个MIDI文件“sound.mid” 。 例：给主页添加视频动画。 首先准备视频动画文件 “1.wmv”。 单击【媒体】下拉菜单中的【插件】选项或者执行【插入】|【媒体】|【插件】命令，在弹出的对话框中选择“1.wmv”文件。 单击【确定】按钮，选中插入的wmv文件， 在【属性】面板中设置相应的【宽】和【高】即可。 教师演示 * 教师演示： 当鼠标在动画文字外时，文字以红色显示，如上图所示，而当鼠标停留在动画文字上的时候，文字以蓝色显示，如下图所示。 * 教师演示