Download
1 / 18
180 likes | 325 Vues
第 4 章 图像. 本章学习知识点. ●掌握图片的插入和美化 ●掌握多媒体文件的插入方法. 开始. 本章内容目录. 4.1 图片处理. 4.2 多媒体处理. 4.1 图片处理. 4.1.1 了解网页图片. 4.1.2 在网页中添加图片. 4.1.3 设置图片属性. 4.1.4 图像占位符. 4.1.5 鼠标经过图像. 4.1.1 了解网页图片. 网页中的图片受网络速度的影响，不仅要求图片本身的质量，还对图片的下载速度有很高的要求，过久的等待是大多数人所不能忍受的。
E N D
第4章 图像 本章学习知识点 ●掌握图片的插入和美化 ●掌握多媒体文件的插入方法 开始
本章内容目录 4.1 图片处理 4.2 多媒体处理
4.1 图片处理 4.1.1 了解网页图片 4.1.2 在网页中添加图片 4.1.3 设置图片属性 4.1.4 图像占位符 4.1.5 鼠标经过图像
4.1.1 了解网页图片 网页中的图片受网络速度的影响，不仅要求图片本身的质量，还对图片的下载速度有很高的要求，过久的等待是大多数人所不能忍受的。 对于图片比较多的网页，每个图片大小最好不要超过10K，图片较少的也最好限制在50K以下。 通常在网页中使用以下3种格式的图片： 1． GIF：即Graphics Interchange Format。 2．JPEG：即Joint Photographic Group。 3． PNG：即Portable Network Graphic。 GIF图像常用于对色彩要求不高的平面图像和动画图片；JPEG图像用于较精美的图片，比如照片；PNG图像集GIF和JPEG图片的优势于一身，已逐渐成为网页图像的标准选择。
4.1.2 在网页中添加图片 可以把图片作为网页的背景插入，也可以作为网页的一部分内容插入，下面介绍添加图片的方法。 1．插入背景图片 在Dreamweaver 8中打开网页，单击“属性”面板中的 按钮，打开“页面属性”对话框，在“分类”列表框中选择“外观”选项，在右侧的“背景图像”文本框中设置背景图片的路径，如图所示。 图4-1 设置背景图片
2．在网页中插入图片 将鼠标光标定位至要插入图片的位置，然后选择“插入”→“图像”命令，或者按下Ctrl＋Alt＋I快捷键，也可以单击插入栏中的“常用”标签切换到“常用”插入栏，然后单击“图像”按钮 ，选择要插入的图片即可。 插入的图片的右方、下方和右下角都有一个黑色的小方块，把鼠标光标移动到这些黑色的小方块上时鼠标指针会变为双向箭头，此时可以按住鼠标左键拖动，改变图片的大小，如图所示。 图4-2 图片上的控制点
4.1.3 设置图片属性 选中插入的图片，可以在下方的“属性”面板中设置图片的属性，图片的“属性”面板如图所示。 图4-3 图片的“属性”面板 4.1.4 图像占位符 当暂时不能确定要在一个需插入图片的位置插入哪张图片的时候，可以先使用一个图像占位符标记一下，这样不影响整个页面的布局，可以继续进行其他的开发工作，等确定了要插入的图片再插入到图像占位符的位置即可。
将鼠标光标定位至已确定需要插入图片的位置，选择“插入”→“图像对象”→“图像占位符”命令，或者单击“常用”插入栏的“图像”按钮右侧的下三角按钮，在弹出的下拉菜单中选择“图像占位符”命令，如图所示。 在弹出的“图像占位符”对话框中设置图像占位符的相关属性，如图所示。 图4-4 插入栏 图4-5-1 “图像占位符”对话框
插入的图像占位符如图所示。 如果以后确定了要插入的图片，只需在图像占位符的“属性”面板中单击“源文件”文本框后的 按钮，在打开的“选择图像源文件“对话框中选择要插入的图像即可，图像将自动替换掉图像占位符。如图所示。 图4-5-2 插入的图像占位符 图4-6 图像占位符的“属性”面板
4.1.5 鼠标经过图像 鼠标经过图像就是当鼠标光标移动到某个图片上时，这个图片会被另外的图片所替换显示，在移开鼠标光标后，又会自动显示原来的图片。 将鼠标光标定位至要插入鼠标经过图像的位置，选择“插入”→“图像对象”→“鼠标经过图像”命令，或者单击“常用”插入栏中的“图像”按钮右侧的下三角按钮，在弹出的下拉菜单中选择“鼠标经过图像”命令，在弹出的“插入鼠标经过图像”对话框进行设置即可，如图所示。 图4-7 “插入鼠标经过图像”对话框
4.2 多媒体处理 4.2.1 插入Flash影片 4.2.2 插入Flash文本 4.2.3 使用Flash按钮 4.2.4 添加音乐
4.2.1 添加Flash影片 Flash影片也就是通常所说的Flash矢量动画，它与其他的动画剪辑相比具有文件小、画质清晰和下载速度快等优点。 要在网页中播放Flash动画，浏览器中必须集成Flash播放器，现在大多数的浏览器都支持Flash动画，在较低版本的浏览器中，需要下载相应的插件才能播放Flash动画。 目前，Flash动画在网页中的地位越来越重要。 将鼠标光标定位至要插入Flash影片的位置，选择“插入”→“媒体”→Flash命令，或者单击“常用”插入栏中的“媒体”按钮 ，在弹出的下拉菜单中选择Flash命令，弹出“选择文件”对话框，选择要插入的Flash影片文件即可，如图所示。 图4-8 选择要插入的Flash文件
插入的Flash影片如图所示。 选中插入的Flash影片，出现Flash影片的“属性”面板，在其中可以设置Flash影片的属性，如图所示。 图4-9 插入的Flash影片 图4-10 Flash影片的“属性”面板
设置好后保存网页，在浏览器中预览，Flash影片在网页中播放的效果如图所示。 图4-11 Flash影片在网页中的播放效果 4.2.2 插入Flash文本 Dreamweaver8中可以插入Flash文本对象，即以文本表现的Flash动画，可以为文本添加颜色和超级链接等。
将鼠标光标定位到要插入Flash文本的位置，选择“插入”→“媒体”→“Flash文本”命令，或者单击“常用”插入栏中的“媒体”按钮 ，在下拉菜单中选择Flash文本命令，弹出“插入Flash文本”对话框，在对话框中设置属性，如图所示。 Flash文本在网页中的显示效果如图所示。 Flash文本转滚颜色显示 图4-12 “插入Flash文本”对话框 图4-13 Flash文本显示效果
4.2.3 使用Flash按钮 使用Flash按钮可以实现按钮的动态效果，增强网页的多样性，使网页更加活泼，具有动感。 可以在Dreamweaver 8中插入使用Flash制作的按钮，也可以直接插入Dreamweaver 8中自带的Flash按钮。 插入Dreamweaver 8中自带的Flash按钮，先将鼠标光标定位到要插入Flash按钮的位置，选择“插入”→“媒体”→“Flash按钮”命令，或者单击“常用”插入栏中的“媒体”按钮 ，在下拉菜单中选择Flash按钮命令，弹出“插入Flash按钮”对话框，在对话框中进行设置，如图所示。 图4-14 “插入Flash按钮”对话框
如图所示为插入到网页中的Flash按钮。 Flash文本和Flash按钮其实都是Flash动画。 图4-15 Flash按钮 4.2.4 添加音乐 使用Dreamweaver 8可以方便的为网页添加音乐，常用的有以下3种方法。 1．使用代码加入背景音乐 在<head></head>标记对之间任何位置加入如下代码：<bgsound src=“qiurisiyu.mp3” loop=“-1”>。 其中，bgsound为背景音乐的HTML标签；src后的引号内设置要插入的背景音乐的路径和文件名；loop后的引号内设置的是背景音乐的循环方式，-1表示无限循环，如图所示。
图4-16 输入代码 2．使用超级链接加入音乐 在网页中选中要添加音乐链接的网页元素，在“属性”面板中的“链接”文本框中设置要添加的音乐文件的路径和文件名，如图所示。 图4-17 链接音乐文件 3．将音乐文件插入到网页中 选择“插入”→“媒体”→“插件”命令，或者单击“常用”插入栏中的“媒体”按钮 ，在弹出的菜单中选择“插件”命令，弹出“选择文件”对话框，选择要嵌入的文件即可。
