2.5 为网页添加动感效果_Dreamweaver CS3 Ajax网页设计入门与实例详解-QQ阅读男生中文都市网

上QQ阅读APP看本书，新人免费读10天

设备和账号都新为新人

2.5 为网页添加动感效果

除了图像之外，还可以在HTML网页中添加字幕、音频、视频和Flash动画等，以制作具有动感效果的网页，使网页更加引人入胜。

2.5.1 在网页中创建滚动字幕

在HTML语言中，可以使用<marquee>标记在页面中插入一个字幕，以水平或垂直滚动方式显示文本信息。语法格式如下：

        <marquee align="对齐方式" behavior="动画类型" bgcolor="背景颜色"
          direction="移动方向" height="数字" hspace="数字" loop="数字"
          scrollamount="数字" scrolldealy="数字" vspace="数字">
        要滚动显示的内容（可以是文本、表格、图像等）
        </marquee>

marquee元素具有以下属性。

● align属性：指定字幕与周围文本的对齐方式，其取值可以是“top”、“middle”或“bottom”。

● behavior属性：指定文本动画的类型，其取值可以是“scroll”、“slide”或“alternate”。

● bgcolor属性：指定字幕的背景颜色。

● direction属性：指定文本的移动方向，其取值可以是“down”、“left”、“right”或“up”。默认值为“left”。

● height属性：指定字幕的高度，以像素或百分比为单位。

● hspace属性：指定字幕的外部边缘与浏览器窗口之间的左右边距，以像素为单位。

● loop属性：指定字幕的滚动次数，其取值可以是一个整数。

● scrollamount属性：指定字幕文本每次移动的距离，以像素为单位。

● scrolldealy属性：指定与前段字幕文本延迟多少毫秒后重新开始移动文本。

● vspace属性：指定字幕的外边缘与浏览器窗口之间的上下边距，以像素为单位。

例2-16 创建滚动字幕，网页效果如图2-56所示。

设计步骤

1 在Dreamweaver中打开Ajax站点，在chap02文件夹中创建一个HTML网页并保存为page2-16.html，把网页标题设置为“创建滚动字幕效果示例”。

2 切换到代码视图，在<body>标记之后输入以下HTML代码：

        <div align="center">
        <marquee direction="up" scrolldelay="200" height="110" width="256" bgcolor="#CCCCCC"
        onmouseover="this.stop();" onmouseout="this.start();">

图2-56 创建滚动字幕

        <p align="center">
        <font face="方正黄草简体" size="5" color="#FF0000">
        春眠不觉晓<br />
        处处闻啼鸟<br />
        夜来风雨声<br />
        花落知多少</font></p>
        </marquee>
        </div>

【代码说明】

在<marquee>标记中，将字幕元素的onmouseover事件处理程序设置为“this.stop();”，即用鼠标指针指向字幕时停止移动；将其onmouseout事件处理程序设置为“this.start();”，即当鼠标指针离开字幕时继续移动。

3 在浏览器中查看网页效果，用鼠标指针控制字幕的移动和停止。

2.5.2 在网页中添加声音

在网页中添加声音可以通过两种方式实现：通过<bgsound>标记添加背景音乐，在网页上看不到任何播放器存在；通过播放器插件嵌入声音，并通过播放器控制播放过程。

1.利用<bgsound>标记添加声音

在HTML语言中，可以使用<bgsound>标记在网页中添加背景音乐，语法格式如下：

        <bgsound src="URL" balance="数字" loop="数字" volume="数字">

<bgsound>标记具有以下属性。

● src属性：指定要播放的声音文件的URL。常用声音文件类型有波形文件（.wav）、MIDI文件（.mid）及MP3文件（*.mp3）等。

● loop属性：指定声音播放的次数。若设置为0，则播放一次；若设置为大于0的整数，则播放指定的次数；若设置为-1，则声音反复播放，直到页面卸载。

● volume属性：指定音量的高低，取值为-10000～0，默认值为0。

● balance属性：设置把将声音分成左声道和右声道两部分，取值为-10000～+10000，默认值为0。

2.通过插件添加声音

除<bgsound>标记外，还可以利用<embed>标记在网页中嵌入声音文件，语法格式如下：

        <embed src="URL" autostart="true"|"flase"
        loop=int"|"true"|"false" volume="int" starttime="mm:ss"
        endtime="mm:ss" width="int" height="int" hidden="true"|"flase">
        </embed>

● src属性：指定要播放的声音文件的URL。

● pluginspage属性：指定用户可以从中下载插件的网站的完整URL。若用户未安装该插件，则浏览器尝试从此网站下载它。

● autostart属性：设置声音文件上传之后是否自动开始播放，默认为false。

● loop属性：指定声音播放的次数。若设置为true，则反复播放；若设置为false，则仅播放一次；若设置为某个正整数，则播放指定的次数。

● volume属性：指定音量高低，取值为0～100，默认值为当前系统音量。

● starttime和endtime属性：分别指定声音开始播放和结束播放的时间。例如starttime="00:20"为从第20秒开始播放。

● heigh和width属性：分别指定播放器插件的高度和宽度。

● hidden属性：设置是否隐藏播放器插件，默认为false。

在Dreamweaver CS3中，可以通过插入插件的方法在网页中添加声音和视频等媒体内容，此时将自动生成<embed>标记并设置其属性。

例2-17 通过播放器插件在网页上播放音乐，网页效果如图2-57所示。

设计步骤

1 在Dreamweaver中打开Ajax站点，在chap02文件夹中创建一个HTML网页并保存为page2-17.html，把网页标题设置为“在网页上播放音乐”。

2 选择【插入】→【媒体】→【插件】命令，此时出现【选择文件】对话框。

3 对于【选择文件名自】，选择【文件系统】选项，并选择要插入的声音文件，然后单击【确定】按钮，如图2-58所示。

图2-57 在网页上播放音乐

图2-58 选择要插入的声音文件

4 此时一个插件占位符添加到页面上，通过拖动插件上的控制点调整插件的大小；把插入点放在插件所在的行，利用属性检查器把对齐方式设置为居中对齐。

5 根据需要，也可以利用属性检查器或标签检查器对embed元素的属性进行设置，如图2-59和2-60所示。

图2-59 利用属性检查器设置embed插件的属性

图2-60 利用标签检查器设置插件的属性

6 切换到代码视图，可以看到在文档正文部分生成了以下HTML代码：

        <div align="center">
        <embed src="../media/献给爱丽丝.mp3" width="268" height="171"></embed><
        /div>

7 在浏览器中打开网页，测试声音播放效果。

2.5.3 在网页中添加视频

使用<embed>标记不仅可以在网页中嵌入声音文件，也可以嵌入视频文件，为此应将src属性设置为视频文件的URL，并通过height和width属性设置视频播放器插件的高度和宽度，根据需要也可以对插件的其他属性进行设置。下面结合例子加以说明。

例2-18 通过播放器插件在网页上播放视频，网页效果如图2-61所示。

设计步骤

1 在Dreamweaver中打开Ajax站点，在chap02文件夹中创建一个HTML网页并保存为page2-18.html，把网页标题设置为“在网页上播放视频”。

2 选择【插入】→【媒体】→【插件】命令，此时出现【选择文件】对话框。

3 对于【选择文件名自】，选择【文件系统】选项，并选择要插入的视频文件，然后单击【确定】按钮。

图2-61 在网页上播放视频

5 在浏览器中打开网页，并测试视频的播放效果。

2.5.4 在网页中添加Flash动画

在HTML语言中，可以使用<object>标记和<embed>标记向网页中添加Flash文件。不过，采用编写代码的方式来设置各种属性颇为麻烦，建议使用Dreamweaver CS3通过可视化方式添加Flash。下面结合例子加以说明。

例2-19 在网页上播放Flash动画，网页效果如图2-62所示。

设计步骤

1 在Dreamweaver中打开Ajax站点，在chap02文件夹中创建一个HTML网页并保存为page2-19.html，把网页标题设置为“在网页上播放Flash动画”。

2 选择【插入】→【媒体】→【Flash】命令，此时出现【选择文件】对话框。

3 选择要插入的Flash文件，然后单击【确定】按钮。一个Flash占位符插入到页面。

4 通过下列方式调整Flash画面的大小：

● 用鼠标拖动Flash占位符上的控制点。

● 利用属性检查器设置Flash画面的高度和宽度，如图2-63所示。

图2-62 在网页上播放Flash动画

图2-63 利用属性检查器设置Flash的属性

5 将插入点放在Flash占位符所在的行，把对齐方式设置为居中对齐。

插入Flash动画后，Dreamweaver将在站点本地根文件夹中创建一个名为Scripts的文件夹，并向其中复制一个JavaScript脚本文件，文件名为AC_RunActiveContent.js。

6 切换到代码视图，可以看到在文档首部导入了上述JavaScript脚本文件，所用的<script>标记为：

        <script src="../Scripts/AC_RunActiveContent.js" type="text/javascript"></script>

在文档正文部分生成了以下源代码：

        <div align="center">
        <script type="text/javascript">
        AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash
        /swflash.cab#version=9,0,28,0', 'width', '241', 'height', '175', 'src',
        '../media/benpao', 'quality', 'high', 'pluginspage',
        'http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash',
        'movie', '../media/benpao' );
        //end AC code
        </script>
        <noscript>
        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
        codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version
        =9,0,28,0" width="241" height="175">
        <param name="movie" value="../media/benpao.swf" />
        <param name="quality" value="high" />
        <embed src="../media/benpao.swf" quality="high"
        pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=Sho
        ckwaveFlash" type="application/x-shockwave-flash" width="241" height="175">
        </embed>
        </object>
        </noscript>
        </div>

【代码说明】

在上述代码中，div元素内部包含以下两部分内容。

● 通过在<script>…</script>标记在网页中包含一段JavaScript客户端脚本，用来调用JavaScript函数AC_FL_RunContent，以播放指定的Flash动画文件。

● 通过<noscript>…</noscript>标记为不执行客户端程序指定替代内容，也就是添加了<object>…</object>标记，并通过<param>标记设置对象的属性，此外还在<object>标记内部嵌套了<embed>标

记，用于在网页中嵌入Flash文件。如果浏览器不支持JavaScript脚本语言，则通过object或embed元素来执行Flash动画文件。

7 在浏览器中打开网页，测试Flash动画播放效果。

2.5.5 在网页中插入其他Flash元素

除了添加标准的Flash动画文件外，在Dreamweaver CS3中通过选择【插入】→【媒体】子菜单中的相关命令，还可以在网页中插入以下Flash元素。

● 图像查看器：基于Flash对象创建的图像查看控件，可以按一定的时间间隔连续播放一组图片，还可以设置各种切换效果。

● Flash文本：只包含文本的Flash SWF文件。

● Flash按钮：基于Flash模板的可更新按钮。Flash按钮对象可以进行自定义，并添加文本、背景颜色及指向其他文件的链接。

● FlashPaper：FlashPaper文档。在浏览器中打开包含FlashPaper文档的页面时，可以浏览FlashPaper文档中的所有页面，而无须加载新的Web页，也可以对该文档进行搜索、打印和缩放。

● Flash视频：Flash视频格式文件（.flv），它包含经过编码的音频和视频数据，通过Flash Player传送。例如，如果有QuickTime或Windows Media视频文件，可以使用Flash视频编码器把视频文件转换为FLV文件。

下面结合例子说明如何在网页中创建基于Flash的创建图像查看器。

例2-20 在网页中创建图像查看器，网页效果如图2-64所示。

设计步骤

1 在Dreamweaver中打开Ajax站点，在chap02文件夹中创建一个HTML网页并保存为page2-20.html，把网页标题设置为“图像查看器”。

2 选择【插入】→【媒体】→【图像查看器】命令。

3 当出现【保存Flash元素】对话框时，选择目标文件夹media，把用做播放器的Flash文件保存为picViewer.swf，如图2-65所示。

图2-64 图像查看器

图2-65 保存用做播放器的Flash文件

4 在页面上选取Flash占位符，并利用属性检查器调整其大小，设置循环、自动播放，如图2-66所示。

5 利用标签检查器对图像查看器的以下属性进行设置，如图2-67所示。

图2-66 利用属性检查器设置图像查看器的属性

图2-67 利用标签检查器设置Flash元素的属性

● captionSize（标题文字字号）：12。

● imageCaption（图像标题）：“图像一”～“图像八”，这是一个数组。

● imageURLs（图像文件路径）：“..images/image01.jpg”～“..images/image08.jpg”。根据笔者的测试，图像查看器目前仅支持部分格式的图像。

● showControls（显示控件）：是。

● slideAutoPlay（自动播放）：是。

● title（图像查看器标题）：“图像查看器”。

● titleFont（图像查看器标题字体）：“宋体”。

● titleSize（图像查看器标题字号）：12。

● transitionsType（图像切换效果）：“Random”（随机）。

6 在浏览器中查看网页，并对图像查看器进行测试。