第
This presentation is the property of its rightful owner.
Sponsored Links
1 / 18

第 4 章 图像 PowerPoint PPT Presentation


  • 93 Views
  • Uploaded on
  • Presentation posted in: General

第 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 了解网页图片. 网页中的图片受网络速度的影响,不仅要求图片本身的质量,还对图片的下载速度有很高的要求,过久的等待是大多数人所不能忍受的。

Download Presentation

第 4 章 图像

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


4

第4章 图像

本章学习知识点

●掌握图片的插入和美化

●掌握多媒体文件的插入方法

开始


4

本章内容目录

4.1 图片处理

4.2 多媒体处理


4

4.1 图片处理

4.1.1 了解网页图片

4.1.2 在网页中添加图片

4.1.3 设置图片属性

4.1.4 图像占位符

4.1.5 鼠标经过图像


4

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

4.1.2 在网页中添加图片

可以把图片作为网页的背景插入,也可以作为网页的一部分内容插入,下面介绍添加图片的方法。

1.插入背景图片

在Dreamweaver 8中打开网页,单击“属性”面板中的 按钮,打开“页面属性”对话框,在“分类”列表框中选择“外观”选项,在右侧的“背景图像”文本框中设置背景图片的路径,如图所示。

图4-1 设置背景图片


4

2.在网页中插入图片

将鼠标光标定位至要插入图片的位置,然后选择“插入”→“图像”命令,或者按下Ctrl+Alt+I快捷键,也可以单击插入栏中的“常用”标签切换到“常用”插入栏,然后单击“图像”按钮 ,选择要插入的图片即可。

插入的图片的右方、下方和右下角都有一个黑色的小方块,把鼠标光标移动到这些黑色的小方块上时鼠标指针会变为双向箭头,此时可以按住鼠标左键拖动,改变图片的大小,如图所示。

图4-2 图片上的控制点


4

4.1.3 设置图片属性

选中插入的图片,可以在下方的“属性”面板中设置图片的属性,图片的“属性”面板如图所示。

图4-3 图片的“属性”面板

4.1.4 图像占位符

当暂时不能确定要在一个需插入图片的位置插入哪张图片的时候,可以先使用一个图像占位符标记一下,这样不影响整个页面的布局,可以继续进行其他的开发工作,等确定了要插入的图片再插入到图像占位符的位置即可。


4

将鼠标光标定位至已确定需要插入图片的位置,选择“插入”→“图像对象”→“图像占位符”命令,或者单击“常用”插入栏的“图像”按钮右侧的下三角按钮,在弹出的下拉菜单中选择“图像占位符”命令,如图所示。

在弹出的“图像占位符”对话框中设置图像占位符的相关属性,如图所示。

图4-4 插入栏

图4-5-1 “图像占位符”对话框


4

插入的图像占位符如图所示。

如果以后确定了要插入的图片,只需在图像占位符的“属性”面板中单击“源文件”文本框后的 按钮,在打开的“选择图像源文件“对话框中选择要插入的图像即可,图像将自动替换掉图像占位符。如图所示。

图4-5-2 插入的图像占位符

图4-6 图像占位符的“属性”面板


4

4.1.5 鼠标经过图像

鼠标经过图像就是当鼠标光标移动到某个图片上时,这个图片会被另外的图片所替换显示,在移开鼠标光标后,又会自动显示原来的图片。

将鼠标光标定位至要插入鼠标经过图像的位置,选择“插入”→“图像对象”→“鼠标经过图像”命令,或者单击“常用”插入栏中的“图像”按钮右侧的下三角按钮,在弹出的下拉菜单中选择“鼠标经过图像”命令,在弹出的“插入鼠标经过图像”对话框进行设置即可,如图所示。

图4-7 “插入鼠标经过图像”对话框


4

4.2 多媒体处理

4.2.1 插入Flash影片

4.2.2 插入Flash文本

4.2.3 使用Flash按钮

4.2.4 添加音乐


4

4.2.1 添加Flash影片

Flash影片也就是通常所说的Flash矢量动画,它与其他的动画剪辑相比具有文件小、画质清晰和下载速度快等优点。

要在网页中播放Flash动画,浏览器中必须集成Flash播放器,现在大多数的浏览器都支持Flash动画,在较低版本的浏览器中,需要下载相应的插件才能播放Flash动画。

目前,Flash动画在网页中的地位越来越重要。

将鼠标光标定位至要插入Flash影片的位置,选择“插入”→“媒体”→Flash命令,或者单击“常用”插入栏中的“媒体”按钮 ,在弹出的下拉菜单中选择Flash命令,弹出“选择文件”对话框,选择要插入的Flash影片文件即可,如图所示。

图4-8 选择要插入的Flash文件


4

插入的Flash影片如图所示。

选中插入的Flash影片,出现Flash影片的“属性”面板,在其中可以设置Flash影片的属性,如图所示。

图4-9 插入的Flash影片

图4-10 Flash影片的“属性”面板


4

设置好后保存网页,在浏览器中预览,Flash影片在网页中播放的效果如图所示。

图4-11 Flash影片在网页中的播放效果

4.2.2 插入Flash文本

Dreamweaver8中可以插入Flash文本对象,即以文本表现的Flash动画,可以为文本添加颜色和超级链接等。


4

将鼠标光标定位到要插入Flash文本的位置,选择“插入”→“媒体”→“Flash文本”命令,或者单击“常用”插入栏中的“媒体”按钮 ,在下拉菜单中选择Flash文本命令,弹出“插入Flash文本”对话框,在对话框中设置属性,如图所示。

Flash文本在网页中的显示效果如图所示。

Flash文本转滚颜色显示

图4-12 “插入Flash文本”对话框

图4-13 Flash文本显示效果


4

4.2.3 使用Flash按钮

使用Flash按钮可以实现按钮的动态效果,增强网页的多样性,使网页更加活泼,具有动感。

可以在Dreamweaver 8中插入使用Flash制作的按钮,也可以直接插入Dreamweaver 8中自带的Flash按钮。

插入Dreamweaver 8中自带的Flash按钮,先将鼠标光标定位到要插入Flash按钮的位置,选择“插入”→“媒体”→“Flash按钮”命令,或者单击“常用”插入栏中的“媒体”按钮 ,在下拉菜单中选择Flash按钮命令,弹出“插入Flash按钮”对话框,在对话框中进行设置,如图所示。

图4-14 “插入Flash按钮”对话框


4

如图所示为插入到网页中的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

图4-16 输入代码

2.使用超级链接加入音乐

在网页中选中要添加音乐链接的网页元素,在“属性”面板中的“链接”文本框中设置要添加的音乐文件的路径和文件名,如图所示。

图4-17 链接音乐文件

3.将音乐文件插入到网页中

选择“插入”→“媒体”→“插件”命令,或者单击“常用”插入栏中的“媒体”按钮 ,在弹出的菜单中选择“插件”命令,弹出“选择文件”对话框,选择要嵌入的文件即可。


  • Login