图像网页边框

5常用的图像格式插入与设置图像多媒体在网页中的应用专题课堂——插入其他图像本章主要介绍常用的图像格式、插入与设置图像、多媒体在网页中的应用等方面的知识与技巧,在本章的最后还针对实际的工作需求,讲解了插入HTML5Video、插入HTML5Audio、插入EdgeAnimate作品和插入FlashVideo的方法.
通过本章的学习,读者可以掌握在网页中应用图像与多媒体方面的知识,为深入学习DreamweaverCC知识奠定基础.
645.
1常用的图像格式网页中的图像常用格式通常有3种,即JPGE格式、GIF格式和PNG格式,其中使用最广泛的是GIF格式和JPEG格式.
本节将详细介绍网页中常见的图像格式方面的知识.
5.
1.
1JPEGJPG/JPEG(JointPhotographicExpertsGroup)可译为"联合图像专家组",是一种压缩格式的图像.
JPEG文件通过压缩,使其在图像品质和文件大小之间达到较好的平衡,损失了原图像中不易为人眼察觉的内容,获得较小文件尺寸,使图像下载快捷.
JPG/JPEG支持24位真彩色,普遍用于显示摄影图片和其他连续色调图像的高级格式.
若对图像颜色要求较高,应采用这种类型的图像.
目前各类浏览器均支持JPEG图像格式.
5.
1.
2GIFGIF(GraphicsInterchangeFormat)可译为"图像交换格式",是一种无损压缩格式的图像.
它可以使文件大小最小化,支持动画格式,能在一个图像文件中包含多帧图像页,在浏览器中浏览时可看到动感图像效果.
网络上小一点的动画一般都是GIF格式的图像.
GIF只支持8位颜色(256种色),不能用于存储真彩色的图像文件,适合大面积单一颜色的图像,如导航条、按钮、图标等.
其压缩率一般在50%左右,它不属于任何应用程序.
在通常情况下,GIF图像的压缩算法是有版权的.
5.
1.
3PNGPNG(PortableNetworkGraphic)可译为"便携网络图像",是一种格式非常灵活的图像,用于在因特网上无损压缩和显示图像,Fireworks制作的图像默认为PNG格式.
PNG文件可以保留所有的原始图层、矢量、颜色和效果信息,并且在任何时候都可以完全编辑所有元素(文件必须具有.
png扩展名才能被DreamweaverCC识别为PNG文件).
PNG图像支持多种颜色数目,从8位、16位、24位到32位都有.
PNG格式图像可替代GIF格式,支持索引色、灰度、真彩色图像及透明背景.
商业网站使用PNG格式的图像比较安全,因为没有版权问题.
Section00分23秒00分20秒00分17秒655.
2插入与设置图像图像是网页中不可缺少的元素之一,为了使网页内容更加丰富,方便浏览者的浏览,可以将图像插入到网页中,并迚行相应的设置.
本节将介绍插入与设置图像方面的知识.
5.
2.
1要在DreamweaverCC文档中插入图像,必须位于当前站点文件夹内或远程站点文件夹内,否则图像不能正确显示.
所以在建立站点时,设计者常先创建一个名叫image的文件夹,并将需要的文件复制到其中,然后再从这个文件夹中选择图片,向网页插入图像.
下面将详细介绍在网页中插入图像的操作方法.
将鼠标指针置于准备插入图像的位置,1.
单击【插入】主菜单,2.
在弹出的菜单中选择【图像】菜单项,3.
在弹出的子菜单中选择【图像】菜单项,如图5-1所示.
图5-1通过以上步骤即可完成插入图像的操作,如图5-3所示.
图5-3弹出【选择图像源文件】对话框,1.
选择准备插入的图像,2.
单击【确定】按钮即可,如图5-2所示.
图5-2Section00分29秒665.
2.
2背景图像是网页中的另外一种图像方式,该方式的图像既不影响文件输入,也不影响插入式图像的显示.
下面详细介绍设置网页背景图的操作方法.
将鼠标指针定位在网页中,单击【属性】面板中的【页面属性】按钮,如图5-4所示.
图5-4弹出【选择图像源文件】对话框,1.
选中准备设置为背景的图片,2.
单击【确定】按钮,如图5-6所示.
图5-6通过以上步骤即可完成设置网页背景图的操作,如图5-8所示.
图5-8打开【页面属性】对话框,1.
在【分类】列表框中选择【外观(CSS)】选项,2.
单击右侧【背景图像】后面的【浏览】按钮,如图5-5所示.
图5-5返回到【页面属性】对话框中,单击【确定】按钮,如图5-7所示.
图5-7指点迷津在【页面属性】对话框中,除了可以设置背景图像外,还可以设置背景颜色、文本颜色、页面字体等属性.
00分30秒单击单击675.
2.
3当网页文件中包括图像和文本时,需要对图像进行对齐设置,图像的对齐方式包括左对齐、居中对齐、右对齐、两端对齐4种.
下面将详细介绍设置图像对齐方式的操作方法.
选中网页中的图像,1.
单击【格式】主菜单,2.
在弹出的菜单中选择【对齐】菜单项,3.
在弹出的子菜单中选择【居中对齐】菜单项,如图5-9所示.
图5-9通过以上步骤即可完成设置图像对齐方式的操作,如图5-10所示.
图5-105.
2.
4在DreamweaverCC中插入图像文件之后,图像默认为选中状态,在【属性】面板中显示图像的属性,可以对其进行设置,如图5-11所示.
图5-11【属性】面板中各选项的含义如下.
ID文本框:用户可以在该文本框中定义图像名称,主要是为了在脚本语言中便于引用图像.
00分18秒00分12秒68Src文本框:在页面中选中图像,可以在该文本框中查看图像的源文件位置,也可以在此手动修改图像位置.
【链接】:在该文本框中可以设置当前图像文件的链接地址.
【目标】下拉列表框:在该列表框中可以设置图像链接文件显示的目标位置.
图像信息:在【属性】面板的左上角显示了所选图像的缩略图,并且在缩略图的右侧显示了该对象的信息,如图5-12所示.
图5-12【原始】文本框:用于设置所选图像的低分辨率图像.
Class下拉列表框:在该下拉列表框中可以选择已经定义好的类CSS样式.
【编辑】按钮:单击该按钮,将启动外部图像编辑软件,对所选图像进行编辑操作.
【编辑图像设置】按钮:单击该按钮,将弹出【图像优化】对话框,在该对话框中可以对图像进行优化设置.
【从源文件更新】按钮:单击该按钮,在更新智能对象时,网页图像会根据原始文件的当前内容和原始优化设置以新的大小、无损方式重新呈现图像.
【裁剪】按钮:单击该按钮,在图像上会出现虚线区域,拖动该虚线区域的8个角点至合适位置,然后按Enter键即可完成图像的裁剪操作.
【重新取样】按钮:对已经插入到页面中的图像进行编辑操作后,可以单击该按钮重新读取该图像文件的信息.
【亮度和对比度】按钮:选中图像,单击该按钮,将弹出【亮度/对比度】对话框,用户可以通过拖动滑块或者在滑块后面的文本框中输入数值来设置图像的亮度和对比度,如图5-13所示.
图5-13【锐化】按钮:单击该按钮,可以对图像的清晰度进行调整.
【宽】和【高】文本框:在【宽】和【高】文本框中输入数值,可以设置图像文件的宽度和高度,后面的下拉按钮可以设置宽和高的单位.
69【切换尺寸约束】按钮:单击该按钮,可以约束图像缩放比例,当修改图像的宽度时,可恢复图像至原始的尺寸大小.
【替换】文本框:在该文本框中可以输入文本,用于设置当前图像文件的描述.
5.
3多媒体在网页中的应用在DreamweaverCC中,不但可以插入图片,还可以插入Flash动画和视频文件等对象,这更增加了网页的视觉冲击力.
本节将详细介绍多媒体在网页中的应用.
5.
3.
1Flash在DreamweaverCC中可以插入Flash动画,Flash动画一般是在Flash中完成的.
下面详细介绍插入Flash动画的操作方法.
启动DreamweaverCC程序,1.
在【插入】面板中选择【媒体】选项,2.
选择FlashSWF选项,如图5-14所示.
图5-14弹出【选择SWF】对话框,1.
选中准备插入的文件,2.
单击【确定】按钮,如图5-15所示.
图5-15Section00分28秒70弹出【对象标签辅助功能属性】对话框,单击【确定】按钮完成插入Flash动画的操作,如图5-16所示.
图5-16按Ctrl+S组合键保存文档,再按F12键即可在浏览器中预览添加的Flash效果,如图5-17所示.
图5-17在文档中插入动画之后,可以在【属性】面板中设置Flash动画的属性,方法是:选中文档中的Flash动画,打开【属性】面板进行设置,如图5-18所示.
图5-18【属性】面板中各选项的含义如下.
【Flash名称】文本框:在该文本框中可以输入当前Flash动画的名称,此名称用来标识影片的脚本.
【高】和【宽】文本框:在这两个文本框中可以输入Flash高度和宽度的数值,用来设置文档中Flash动画的高度和宽度.
【文件】文本框:在该文本框中显示当前Flash动画的路径地址.
单击文本框右侧的文件夹按钮,在弹出的文本框中显示当前的Flash动画文件.
【源文件】文本框:在该文本框中显示当前Flash动画的源文件地址.
源文件是Flash动画发布之前的文件,即FLA文件.
单击【源文件】文本框右侧的文件夹按钮,在弹出的对话框中可以选择Flash动画源文件的地址.
【循环】复选框:可以设置当前Flash动画的播放方式.
选中此复选框,Flash动画将循环播放.
【自动播放】复选框:可以设置当前Flash动画的播放方式.
选中此复选框,Flash动画将在浏览网页时便开始播放.
【垂直边距】文本框:在该文本框中输入数值,可以设置当前Flash动画距离文档垂直方向的距离.
【水平边距】文本框:在该文本框中输入数值,可以设置当前Flash动画距离文档水平方向的距离.
【品质】下拉列表框:单击该下拉列表框右侧的下拉按钮,在弹出的列表中包括单击71【高品质】、【低品质】、【自动高品质】和【自动低品质】选项,用于设置Flash动画在浏览器中的显示效果.
【比例】下拉列表框:单击该下拉列表框右侧的下拉按钮,在弹出的列表中包括【默认】、【无边框】和【严格匹配】选项,用于设置当前Flash动画的显示方式.
通常情况下,选择【默认】选项.
【对齐】下拉列表框:单击该下拉列表框右侧的下拉按钮,在弹出的列表中包括【默认值】、【基线和底部】、【顶端】、【居中】、【文本上方】、【绝对居中】、【绝对底部】、【左对齐】和【右对齐】选项,用于设置Flash动画与文档中文本的对齐方式.
【背景颜色】按钮:单击该按钮,在弹出的颜色调板中选择任意色块应用于当前Flash动画的背景颜色.
【编辑】按钮:单击该按钮,将弹出Flash编辑器,用来编辑当前Flash动画.
【播放】按钮:单击该按钮,将在文档中播放当前Flash动画.
当播放Flash动画时,播放按钮将变成【停止】按钮.
【参数】按钮:单击该按钮,将弹出【参数】对话框,在对话框中可以设置当前Flash动画.
5.
3.
2FLVFLV是FlashVideo的简称,是随着Flash系列产品推出的一种流媒体格式.
由于其形成的文件极小、加载速度极快,使得网络观看视频文件成为可能.
FLV的出现有效地解决了视频文件导入Flash后,导出的SWF文件体积庞大,不能在网络上很好地使用等问题.
下面详细介绍插入FLV视频的操作方法.
启动DreamweaverCC程序,1.
在【插入】面板中选择【媒体】选项,2.
选择FlashVideo选项,如图5-19所示.
图5-19弹出【插入FLV】对话框,单击URL文本框右侧的【浏览】按钮,如图5-20所示.
图5-2000分36秒单击72弹出【选择FLV】对话框,1.
选中准备插入的视频文件,2.
单击【确定】按钮,如图5-21所示.
图5-21返回到【插入FLV】对话框,1.
在【宽度】和【高度】文本框中输入相应参数,2.
单击【确定】按钮,如图5-22所示.
图5-22通过以上步骤即可完成插入FlashVideo的操作,如图5-23所示.
图5-235.
3.
3在DreamweaverCC中制作网页时,可以将音频插入到页面中.
如果页面中插入了音频,可以在页面上显示播放器的外观,包括声音文件的播放、暂停、停止、音量及开始和结束等控制按钮.
下面详细介绍插入音乐的操作方法.
00分22秒73启动DreamweaverCC程序,1.
在【插入】面板中选择【媒体】选项,2.
选择【插件】选项,如图5-24所示.
图5-24此时网页中显示一个通用占位符,通过以上步骤即可完成插入音乐的操作,如图5-26所示.
图5-26弹出【选择文件】对话框,1.
选择准备插入的音乐文件,2.
单击【确定】按钮,如图5-25所示.
图5-25在网页中插入插件后,在【属性】面板中可以设置以下参数,如图5-27所示.
图5-27【插件】文本框:可以输入用于播放媒体对象的插件名称,使该名称可以被脚本引用.
【宽】和【高】文本框:用于设置对象的宽度和高度,默认单位为像素.
【垂直边距】文本框:用于设置对象上端和下端与其他内容的间距,单位为像素.
【水平边距】文本框:用于设置对象左端和右端与其他内容的间距,单位为像素.
【源文件】文本框:用于设置插件内容的URL地址,既可以直接输入地址,也可以单击其右侧的文件夹按钮,从磁盘中选择文件.
【插件URL】文本框:用于输入插件所在的路径.
在浏览网页时,如果浏览器中没有安装该插件,则从此路径上下载插件.
【对齐】下拉列表框:用于选择插件内容在文档窗口中水平方向的对齐方式.
745.
4专题课堂——插入其他图像DreamweaverCC还提供了在网页中插入一些其他相关图像元素的方法,包括插入鼠标经过图像、插入FireworksHTML等.
本节将详细介绍在页面中插入其他图像元素的方法.
5.
4.
1在网页中,鼠标经过图像经常被用来制作动态效果.
当鼠标指针移动到图像上时,该图像就变为另一幅图像.
插入鼠标经过图像的方法非常简单,下面详细介绍操作步骤.
将鼠标指针定位于网页文档中,1.
在【插入】面板中选择【常用】选项,2.
单击【图像】下拉按钮,3.
在弹出的列表中选择【鼠标经过图像】选项,如图5-28所示.
图5-28通过上述步骤即可完成插入鼠标经过图像的操作,如图5-30所示.
图5-30弹出【插入鼠标经过图像】对话框,1.
在【原始图像】文本框中输入图像存储路径,2.
在【鼠标经过图像】文本框中输入图像存储路径,3.
单击【确定】按钮,如图5-29所示.
图5-29指点迷津鼠标经过图像通常被应用在链接的按钮上,通过按钮外观的变化使页面看起来更加生动,并且提示浏览者单击该按钮可以链接到另一个网页.
00分46秒Section75【插入鼠标经过图像】对话框如图5-31所示.
图5-31该对话框中各选项的功能如下.
【图像名称】文本框:在该文本框中默认会分配一个名称,用户也可以自己定义图像的名称.
【原始图像】文本框:在该文本框中可以填入页面被打开时显示的图形,或者单击该文本框后面的【浏览】按钮,选择一个图像文件作为原始图像.
【鼠标经过图像】文本框:在该文本框中可以填入鼠标经过时显示的图像,或者单击该文本框后面的【浏览】按钮,选择一个图像文件作为鼠标经过图像.
【预载鼠标经过图像】复选框:选中该复选框,当页面载入时将同时加载鼠标经过图像文件,以便鼠标移动到按钮上时不用重新下载经过时的图像.
在默认情况下,该复选框被选中.
【替换文本】文本框:在该文本框中可以输入鼠标经过图像的替换说明文字,和图像的替换功能相同.
【按下时,前往的URL】文本框:在该文本框中可以设置单击该鼠标经过图像时跳转到的链接地址.
5.
4.
2FireworksHTML除了插入鼠标经过图像之外,还可以在网页中插入FireworksHTML文件.
在网页中插入FireworksHTML文件的方法非常简单,下面详细介绍操作步骤.
00分40秒76将鼠标指针定位于网页文档中,1.
在【插入】面板中选择【常用】选项,2.
单击【图像】下拉按钮,3.
在弹出的列表中选择FireworksHTML选项,如图5-32所示.
图5-32弹出【插入FireworksHTML】对话框,1.
在【FireworksHTML文件】文本框中输入准备插入的文件存储路径,2.
单击【确定】按钮即可完成在网页中插入FireworksHTML的操作,如图5-33所示.
图5-33【插入FireworksHTML】对话框中各选项的功能如下.
【FireworksHTML文件】文本框:在该文本框中可以设置需要插入的FireworksHTML文件的地址,或者单击后面的【浏览】按钮,选择需要插入的FireworksHTML文档.
【插入后删除文件】复选框:选中该复选框,可以在插入FireworksHTML文档后删除原始的FireworksHTML文档.
5.
5实践经验与技巧本节将侧重介绍和讲解与本章知识点有关的实践经验与技巧,主要包括插入HTML5Video、插入HTML5Audio等方面的知识与操作技巧.
5.
5.
1HTML5VideoHTML5视频元素提供一种将电影或视频嵌入网页的标准方式.
在DreamweaverCC中,用户可以通过【插入】面板来实现插入HTML5Video的操作,具体操作步骤如下.
00分40秒Section77启动DreamweaverCC程序,1.
在【插入】面板中选择【媒体】选项,2.
选择HTML5Video选项,如图5-34所示.
图5-34弹出【选择视频】对话框,1.
选择准备插入的文件,2.
单击【确定】按钮,如图5-36所示.
图5-36在网页中显示一个占位符,在【属性】面板中单击【源】文本框后侧的【浏览】按钮,如图5-35所示.
图5-35在【属性】面板中,1.
在W和H文本框中设置视频在页面中的宽度和高度,2.
选中Controls和AutoPlay复选框,如图5-37所示.
图5-375.
5.
2HTML5Audio用户还可以在网页中插入HTML5Audio,在网页中插入FlashAudio的方法非常简单,下面详细操作步骤.
单击00分30秒78启动DreamweaverCC程序,1.
在【插入】面板中选择【媒体】选项,2.
选择HTML5Audio选项,如图5-38所示.
图5-38弹出【选择音频】对话框,1.
选择准备插入的文件,2.
单击【确定】按钮,如图5-40所示.
图5-40在网页中显示一个占位符,在【属性】面中,单击【源】文本框后侧的【浏览】按钮,如图5-39所示.
图5-39通过以上步骤即可完成插入HTML5Audio的操作,如图5-41所示.
图5-415.
5.
3EdgeAnimateDreamweaverCC为适应HTML5的发展趋势,新增了插入EdgeAnimate作品的功能,下面详细介绍插入EdgeAnimate作品的操作方法.
单击00分21秒79启动DreamweaverCC程序,1.
在【插入】面板中选择【媒体】选项,2.
选择【EdgeAnimate作品】选项,如图5-42所示.
图5-42弹出【选择EdgeAnimate包】对话框,1.
选择准备插入的文件,2.
单击【确定】按钮,如图5-43所示.
图5-43通过以上步骤即可完成插入EdgeAnimate作品的操作,如图5-44所示.
图5-445.
5.
4FlashVideo使用DreamweaverCC和FlashVideo文件,可以快速地将视频内容放置到Web上;将FlashVideo文件拖动到DreamweaverCC中,可以快速地将视频融入到网站的应用程序中.
下面详细介绍插入FlashVideo的方法.
00分41秒80启动DreamweaverCC程序,1.
在【插入】面板中选择【媒体】选项,2.
选择FlashVideo选项,如图5-45所示.
图5-45通过以上步骤即可完成在网页中插入FlashVideo的操作,如图5-47所示.
图5-47弹出【插入FLV】对话框,1.
在URL文本框中输入准备插入的FLV文件的存储路径,2.
在【外观】下拉列表中,选择一个外观,3.
在【宽度】和【高度】文本框中输入数值,4.
单击【确定】按钮,如图5-46所示.
图5-46指点迷津FlashVideo是随着Flash系列产品推出的一种流媒体格式,其视频采用SorensonMedia公司的SorensonSpark视频编码器,音频采用MP3编辑.
FlashVideo可以使用HTTP服务器或者专门的FlashCommunicationServer流服务器进行流式传送.
811.
5有问必答1.
在DreamweaverCC中,如何设置图像的对齐方式为左对齐选中网页中的图像,单击【格式】主菜单,在弹出的菜单中选择【对齐】菜单项,在弹出的子菜单中选择【左对齐】菜单项,即可将图像设置为左对齐.
2.
如何给网页添加背景音乐在DreamweaverCC中打开网页,切换至代码视图,将鼠标指针定位在与标签之间,输入代码""即可给网页添加背景音乐.
3.
如何删除Flash插件相关文件可以利用wsyscheck或xuetr工具删除C:\Windows\System32\Macromed下的Flash文件夹.
4.
网页中常用的声音格式有哪些网页中常用的声音格式包括MIDI(或MID)、WAV、AIF(或AIFF)、MP3、RA(或RAM)以及RP和RealAudio.
5.
网页中常用的视频格式有哪些网页中常用的视频格式包括MPEG(或MPG)、AVI、WMV、RM以及MOV.
Section