在网页中添加flash元素.docx

在网页中添加flash元素.docx

《在网页中添加flash元素.docx》由会员分享，可在线阅读，更多相关《在网页中添加flash元素.docx（12页珍藏版）》请在冰豆网上搜索。

在网页中添加flash元素

在网页中添加flash元素

实验要求

通过试验，掌握如何在网页中添加flash影片、flash文本和flash按钮的方法。

说明macromediaflash技术是目前最为普及的矢量图形和动画传送解决方案。

如今的flash影片已经在网页中广泛应用，增添了网页的动态效果。

在dreamweavermx2004中不仅可以插入flash程序中创建的影片，还可以直接在文档中创建、插入和修改flash按钮和flash文本；这些操作均不需要macromediaflash的参与。

对应知识点

●1.插入flash动画

●2.添加flash按钮

●3.使用flash文本

对应《macromediadreamweavermx2004标准教程》第8章的内容。

试验课时;4课时

实验素材

●swf格式的影片可在本书配套光盘中查找使用

实验步骤

1.dreamweavermx2004程序，选择菜单”文件“－>”新建”命令，创建HTML网页。

保存网页为page10.htm.

2.单击使用面板中的表格按钮，插入5行1列，，宽度为777像素，边框粗细、单元格边距和单元格间距均为0的表格。

3.选中表格，在属性面板中对齐下拉列表中选择居中对齐选项。

4.在第一单元格内单击，使插入点定位在此单元格内。

5.从本书配套光盘exp10\sucai10文件夹中复制文件“1.swf”和”2.swf”,粘贴到任意一个磁盘的根目录下。

这是我们粘贴到盘内。

如图10-1示

6.返回dreamweaver编辑窗口，在常用面板的媒体列表中选择文本命令，如图所示。

或者选择菜单”插入”—〉”媒体”—〉”flash文本”命令。

图10-1将素材文件粘贴到F盘内

图10-2选择“Flash文本”命令

说明flash文本对象允许用户创建和插入只包含文本的flash影片，使用它可以创建一个小的矢量图像影片，并定义所有需要的文字和文本。

1.开“插入flash文本”对话框。

如图10-3所示。

2.设置文字为”MSUIGothic”，大小为"40"，单击”粗体”和”左对齐”按钮,在”颜色”调色板中选择颜色为蓝色（色标值为#0000cc）,在“转滚颜色”调色板中选择颜色为浅蓝色（色标值为=#6699ff），在“文本”编辑框中输入英文”welcometo…”单击“另存为“编辑框右侧的”浏览”按钮，打开“选择文件“对话框，选择F盘根目录下的”1.swl“文件，确定后弹出dreamweaver提示窗口，如图10-4所示

图10-3“插入Flash文本”对话框

图１０－４Dreamweaver提示窗口

图10-5“插入Flash文件”对话框的设置

3.单击”是”按钮，在另存为“对话框“中显示了文件路径和名称，此时“插入flash文本“对话框。

如图10-5所示。

图10-6Flash文本的预览效果

说明如果需要为flash文本对象创建一个链接，则可以在“链接“编辑框中输入所需的URL地址。

在输入了链接地址之后，用户还可以在“目标”列表中指定打开所链接文档的目标框架或目标窗口。

4.单击“确定”按钮，flash文本插入到单元格内，单击属性面板中的“播放”按钮

，flash文本效果显示在网页中。

如图10-6

5.单击停止按钮，取消播放。

选中flash文本时，属性面板如图10-7所示。

说明在属性面板，单击"编辑"按钮，将调出flash编辑对话框。

单击"重设大小“按钮，将选定的flash对象大小恢复到原始大小。

在垂直边距和水平边距编辑框中，指定flash对象四周的间隔。

在”品质”列表中选择flash文件播放的效果。

影片在“高品质”下效果会更好，但相对需要更快的计算机配置。

12.将光标定位在第三行单元格内，单击常用面板中的”flash”按钮

，或选择菜单“插入”—〉“媒体”—〉“flash”命

令，打开”选择文件“对话框。

找到

本书配套光盘\sucai10文件夹中的素材文件”

banner.swf”,选择此文件。

如图10-8所示。

13.单击“确定”按钮，flash影片立即被插

入到单元格中，在文档窗口中将出现一个

flash占位符。

要在文档窗口中观看flash影片

的预览，可单击属性面板的“播放”按钮。

如图所示。

说明当用户向文档中插入flash影片时，dreamweaver将同时使用object标签（由internetexplorer为activex控件定义）和embed标签（由netscapenavigaror定义），以期在所有浏览器中获得最佳效果。

当用户在属性面板中修改该影片属性时，dreamweaver会将所输入数据分别影射为图10-8“选择文件”对话框

与object和embed标签相对应的合适的参数。

14.单击”停止“按钮，停止flash影片的播放。

Flash的属性面板与flash文本的相同。

15.将光标定位在第5行单元格内，在常用面板的媒体列表中选择”flash按钮“的命令。

如图10-10所示。

图10-9插入的Flash影片播放效果

图10-10选择Flash按钮命令

提示也可以选择菜单“插入”—〉“媒体”—〉“Flash按钮”命令。

16.打开如图10-11所示的“插入flash按钮“对话框。

17.在对话框“样式“列表中有许多不同的flash按钮风格，选择”bluewarper”选项，在“范例”框中选择字体“Verdana”（或其他字体）。

在“大小”编辑框内输入“16”（单位：

像素）。

可以单击“链接”编辑框右侧的“浏览”按钮，选择链接的网页，也可以直接在编辑框内输入链接路径，例如：

。

在“目标”列表中选择“_blank”选项，当点击按钮时弹出一个新窗口。

单击“另存为”右侧的“浏缆”按钮，在“选择文件”对话框中，选择保存在F盘的替换文件“2.swf”。

如图10-12所示。

18.系统将弹出“提示框”，询问是否覆盖此文件。

单击“是”按钮，原来的swf文件被替换，其路径和文件名将显示在“另存为”编辑框中，“插入Flash按钮”设置完成效果如图10-13所示。

19.在属性面板中，单击“播放”按钮，可以看见Flash按钮的动态效果。

如图10-14所示。

图10-13“插入Flash按钮”对话框

图10-14Flash按钮的动态效果

20.单击“停止”按钮，停止Flash按钮的播放。

Flash按钮的属性面板与Flash文本的相同。

21.双击“Flash按钮”，可以再次打开图10-13所示的对话框，进行重新编辑。

编辑完成，单击“确定”即可。

说明若要预览页面中的所有Flash内容，按Ctrl+Alt+Shift+P键。

所有的Flash对象和影片将开始播放。

22.选择菜单“文件”“->保存”命令，完成网页保存。

按F12键在浏览器中查看网页效果。

如图10-15所示。

实验作业

模仿

1．创建网页，保存page10.htm。

2．在网页中插入表格，布局Flash元素。

3．插入Flash文本，设置文本显示为“Welcometo…..。

”

4．插入在Flash程序中制作的Flash影片。

5．创建Flash按钮文件，设置显示文字为“Enter”,并创建链接。

创作

1．在网页中创建若干个Flash文本和Flash按钮。

2．使用表格或布局单元合理布局网页，使其形成完整的网页结构。

3．适当的位置插入Flash影片，作为主体内容。

4．灵活使用Flash文件和Flash按钮等元素，增添网页动感。

在本书配套光盘exp10\site10文件夹中有若干网页提供参考，如图10-16~图10-18所示。

图10-16网页中添加Flash元素

图10-17网页中添加Flash元素

图10-18网页中添加Flash元素

实验报告

实验名称

姓名

班级

分组

实验室

实验时间：

年月日

实验步骤

序号

步骤

操作要领

实验结果