第六章　图像应用和编辑

插入图像
　　看工具栏中这些按钮，不用解释了吧，插入图片或Flash动画单击相应按钮就行。
　　
　　单击按钮后，弹出图像选择对话框。当然对话框中你可以选择磁盘上任何目录中的文件，可是如果你选择了“站点”目录以外的文件，将来上传时就会出现问题，所以要用的图片应该先放到“站点”目录以内的文件夹中，这样可保证上传后相对路径的一致性。
　　网页中常用图片类型有“.jpg”、“.gif”、“.bmp”等，由于“.bmp”格式占字节数大，最好转换成“.jpg”再插入网页，以提高浏览速度。 在编辑区中选中图片，图片周围会出现黑线框包围。这时下面的“属性”面板也相应变成“图像属性”面板，如下图：
　　 　　
　　上半部左端是图片的缩略图和图片的字节数。图像二字下面的框中可以为图片输入一个名字，以便在以后编辑“行为动作”时调用。现在不编写脚本语言，也可不输入名字。“宽”“高”两个框中是图片原始尺寸，如果用鼠标拖拉图片边沿的黑线上的小方块，可以改变尺寸大小，尺寸改变时，这两框中的数字同步变化。如果在这两个框中输入宽度和高度，编辑区里的图片也会相应改变。
　　用鼠标拉动图片的调节点改变尺寸，会因鼠标移动方向不同而改变图片图像比例，如横向移动只改变宽度不改变高度，竖向移动只改变高度不改变宽度，这样比例失调会造成图像失真。如果要想避免图像失真，按下键盘上的“Shift”键，同时用鼠标拖动图片右下角缩放，图片会保持原来的宽高比例。
　　如果图片宽高比例已经失调，可单击“属性面板”右端的“重设大小”按钮，图片即恢复原始尺寸。
　　源文件框中是插入的图片路径和名字，你在选择图片后，这里就自动出现路径和名字。当然如果你重新输入另外的路径和文件名字，编辑区里的图片也会变新新的图片。
　　链接框中可以输入超级链接的路径。前一讲的操作是让浏览者点击某一行文字打开指定的对象，如果在这里输入了链接路径，浏览者点击图片可打开指定的对象。输入绝对路径还是输入相对路径，就看你要链接的网页所在位置了，如果本站点内链接，一般用相对地址，如果链接其他网站的网页，必需输入绝对地址。
　　如果输入了链接路径，下面的“目标”框中也有四项选择，同上一讲的文字链接一样，不再重复。 最右端的“替代”框中，可以输入文字，浏览者如果设置不显示图像或者由网速成慢造成图像不显示时，输入的文字将出现在图像位置。
　　下半部左端有热区“地图”选项，可以用下面的矩形、圆、多边形工具在图像上分成“热区”，每个“热区”都可设置一个“链接”，这样浏览者点击图片中不同位置，可以跳转到不同页面。
　　“垂直边距”和“水平边距”框中输入数字，可使图像与边界、图像与文字、图像与图像间产生相应的距离。图片在页面中相对位置的安排就是由这里的数字决定的。
　　“低品质源”一项中，是以前网速慢时有人用转黑白图片引导输出，现在已不用考虑。
　　右端“边框”项如输入数字，可给图像加上边框，数字就是边框的宽度。
　　再右边三个按钮分别是“左对齐”“居中”“右对齐”。注意这三个按钮的作用仅限于图片在当前行左、中、右的位置，不能设置图片和文字混合排列。如果是文字和图片混排，请选择下行“对齐”选择框。 “基线”“顶端”“中间”“底部”“文本上方”“绝对中间”“绝对底部”这些选项一般用于文本中插入的按钮图标。如你看现在正文中 这个图标与本行文字如何安排，如果不选择，默认是“基线对齐”，看这个“树”图的高度比文字稍高一些，现在基线(就是图片下部)与文字的基线在一条横线上，所以图片就比文字要高出来。如果选择“顶端”或“文本上方”，图标的上边沿与文字上边对齐，选择“底部”“绝对底部”与“基线”相似，一般都按默认。选择“绝对中间”可便图像与文字中间对齐，高度差均分上下两边。
　　“左对齐”和“右对齐”可用于较大的图片与文字混排。图文混排，在插入图像时光标在文字中间某个位置时执行插入命令，该位置称“插入点”，插入的图片将自动安排在插入点位置，文字将排到图片以下各行。如果图片宽度大于插入点到右边界的尺寸，图片将换到下一行。选中图像后，选择“左对齐”或“右对齐”后，文字会自动排在图像的另一侧。同时在“插入点”位置显示出一个小方块形的“插入点标记”，这个标记在浏览网页时并不显示，只是供调调整图像位置用的。
　　
　　用鼠标上下拖动“插入点标记”，图像和文字会重新排列。注意图像位置一般在“插入点标记”的下一行，左右移动“插入点标记”图像位置不会改变。
　　在HTML语言中，只能图像在左文本在右或者图像在右文本在左这两种排列方式，如果想把图像放中间文字排列两边，以后再学习用表格布局页面才能实现。
　　有些图片较大，插入到网页中不仅多占用空间，而且影响浏览速度。这里所说的图片大，不仅指宽度和高度的尺寸，主要是指占字节数大。图像占字节数的原因一方面是宽高尺寸，另一方面是压缩比例。没有压缩的位图(.bmp)占字节数更大。虽然在网页中我们可以把大图片缩小显示，但显示状态缩小了，图片本身所占字节数并没改变，所以在图像插入网页前要作预处理。
　　如果安装了 Fireworks ，也可在 DW 的图像编辑中调用处理。不过现在图像处理大多用 Photoshop ，当然在 DW 的图像编辑中也可将外挂软件设置为 Photoshop ，其实也没有这种必要，大多是先在处理好图像再编辑网页。处理方法请看本光盘“Photoshop”目录里的“图像基础知识”一文。

插入Flash动画
　　单击插入工具栏里的Flash图标，或选择菜单命令“插入→媒体→Flash”，弹出文件选择对话框，选中所要插入的文件，动画即插入到当前光标所在位置。
　　在编辑区选中Flash动画，动画外边会有一个黑线框包围，线框右边、下边和右下角有三个黑色小方块，拖拉小方块可调整宽度和高度。和图片一样，按着“Shift”键再用鼠标拖动右下角小方块，即可按原比例放大或缩小。
　　在选中Flash动画的同时，属性面板也自动成为Flash面板。如下图：
　　
　　面板上半部和图像面板相似。只是多了“源文件”项，如果在该框中输入源文件 (.fla)地址和文件名，可单击右边的“编辑”按钮，打开Flash源程序重新编辑。不过一般都是制作完成的动画才导入到网页，该项并不常用。
　　下半部框中左端的“循环”和“自动播放”按钮，经试验并不能改变原来Flash动画中的播放状态。譬如原来动画是循环播放的，这里不选择循环照样是循环播放。如在Flash动画中设置第一帧停止播放，这里选择了自动播放也还是停止在第一帧。所以要控制播放或循环与否，还是在制作动画时设置好。
　　垂直边距和水平边距框中输入数字，可控制上下左右与文档边界或其他对象间的距离。
　　对于内容复杂的动画在低档次电脑上播放时有可能会有不不连续现象，在“品质”项中选择“低品质”可以降低画面品质为代价取得较高的速度，现在没有再用586以下配置的电脑了吧，该项已经没有选择低品质的必要了。
　　“比例”框中有三项选择。
　　①“默认”，选择该项，Flash动画将不改变宽高比例全部显示在定义的空间里。定义的空间如果和动画比例不一致，当定义空间过高时，上下会出现以动画背景色填充的横条；当定义的空间过宽时，左右会出现以动画背景色填充的竖条。譬如动画宽600、高400 ，定义区域宽340、高200 ，动画按比例缩小后宽300、高200，因定义区域宽度为340 ，结果左右各出现20宽的竖条。如下图两边的白条。
　　
　　如果不想让竖条显示，请参考下面写的设置透明背景。
　　②“无边框”选择该项，Flash动画仍是不改变宽高比例显示在定义的空间里，但定义空间和动画的宽高比例不一致时，画面将有一部分不显示。如定义空间过低，上下两边将不能完全显示，定义空间过窄，左右两边将不能完全显示。譬如动画宽600、高400 ，定义区域宽260、高200 ，动画按比例缩小后宽300、高200，结果左右各有20宽的画面不显示。
　　③“严格匹配”，选择该项，动画将完全填充定义空间，定义的空间如果和动画比例不一致，动画宽高比例将改变。这样会造成图像失真。当然有时要有意显示失真图像，必选择该项。譬如土豆芽想充当土豆的话。
　　对齐选项里和图像属性一样，不太清楚的再复习上一讲，这里不再重复。
　　与图像面板相比，这里没有了左对齐、右对齐、居中三个按钮。其中左对齐、右对齐可从“对齐”选项中选择，如果要“居中”怎么办？一个方法是在没有插入动画前，在文本面板中单“居中”按钮，让光标定位中间，再执行插入命令。如果是插入以后想让其居中，取消动画的选择，点击动画左边沿外地方，让光标成为靠左边沿的一条竖线，在下面文本属性面板中选择“居中”按钮。
　　“背景色”选项中可以重新定义Flash动画的背景色。
　　如果要播放背景透明的Flash动画，必需在“参数”项中输入Flash参数。
　　单击“参数”按钮，弹出参数对话框如下：
　　
　　在“参数”二字下面框中点击，输入 wmode （如上图），然后再在“值”下面点击，对应值下面出现一个框，输入 transparent （如下图），单击确定。
　　
　　这样在网页中就可播放透明背景的动画。不过要说明的是，在编辑页中点“播放”按钮预演时背景并不透明。
　　看下面同一个Flash动画，左边没有设置参数，右边设置了透明参数，在背景平铺的页面中不同显示。

插入音频和视频
　　一般常用的音频文件格式有“.wav、.mid、.mp3、.ra、.ram、.rpm”等。
　　“.wav”是基本声音波形文件。它以一定的采样率记录声音波形数据，文件尺寸大。虽然具有保真度
　　“.mid”是乐器声音文件。它采样率较低，文件尺寸小，能够被大多数浏览器支持，不需要插件，在网页中常用作背景音乐。
　　“.mp3”　一种压缩格式声音文件。它具有较高的声音质量和较大的压缩率，文件较小，是网络上最流行的音乐格式。但由于mp3使用了特殊的编码压缩技术，不能被浏览器识别，浏览者电脑中必须安装相应的播放程序或插件才能播放。常用的播放程序有 QuickTime、Media Player、RealPlayer、RealONE Player等。
　　“.ra、.ram、.rpm”是经过高度压缩的声音文件，尺寸小，但音质较差，需要使用新的播放器或编码器来提高质量。要播放这类声音，浏览者必须安装RealPlayer或RealONE Player播放程序或插件。
　　
　　声音文件必须先存放在本地站点文件夹之中，也可以在站点文件夹里建立“sound”文件夹存放声音文件。
　　网页中播放声音有两种形式，一是作为背景音乐，一是插入播放器。
　　①背景音乐：
　　作为背景音乐不在页面显示任何播放信息，如果使用了浏览器不能直接播放的声音格式，浏览者如果没有安装相应的播放器，就不知道网页中有声音的存在。从以上声音格式可看出，背景音乐最好使用“.wav、.mid”这两种格式。
　　添加背景音乐应在新建立网页的开始进行。
　　选择菜单命令“窗口→行为”，弹出“设计”面板，如下图：
　　
　　单击左上角[+]号按钮，在弹出菜单中选择“播放声音”，弹出“播放声音”对话框，如下图：
　　
　　可以在“播放声音”框中输入声音文件路径和文件名字，也可单击“浏览”按钮，选择声音文件。
　　在背景音乐设置好以后再进行文本、图像等其他元素的设计。
　　②插入播放器：
　　使用媒体播放器可以播放多种声音格式。可以在页面中合适的位置插入播放器，并可像调整图像那样调整宽度和高度。
　　首先把光标放在要插入播放器的位置，选择菜单命令“插入→媒体→插件”，弹出文件选择对话框，选中要播放的声音文件，单击“确定”按钮。插入文件后，下面的属性面板即变成“插件属性”面板。如图：
　　
　　从图可以看出，这个面板里的选项，在以前用过的Flash面板中都有有，就不再详细叙述了。下面只说一下声音的参数。
　　单击参数按钮，弹出参数输入框，在这个框里可以输入声音初加载时播放与否、声音是否循环播放。如下图：
　　
　　参数“autostart”是初加载是否自动播放，值输入“true”是自动播放，输入“false”不自动播放。该项主要控制浏览器，对于不能用浏览器直接播放的声音因需要用播放器，则播放器不一定能完全认别该指令。譬如声音对象是mp3，有些mp3播放器不能识别自动播放指令，尽管输入了“true”，可浏览还要单击播放按钮才开始播放。
　　参数“loop”是循环控制。值输入“true”声音就无限循环，输入“false”声音播放一遍后就停止。
　　插入电影或其他视频的方法与声音文件相同，不过这类文件尺寸一般都很大，普通网站不支持这些文件，这里就不再详细介绍了。有兴趣可以试验在自己电脑上播放。
　　
　　下面再说明一点，我一直不主张在网页中添加声音文件。因为声音文件不仅占空间大，而且影响网上浏览速度。那么怎么使网页有声有色呢？建议将声音导入Flash。一个mp3声音文件导入Flash后，可以压缩几倍至几十倍，而且声音还能良好地和画面同步播放，现在的浏览器大多支持FlashMX，不用安装任何插件就可播放。如果想作为背景音乐不要动画，在空白场景中导入声音，设置好足够长度的时间轴，导出成“.swf”文件就行了。