静态网页制作

【实战演练1】——动感音乐网页

使用Flash文本按钮制作导航条效果。使用Flash动画命令插入动画，设置背景透明效果，使页面变得生动有趣。（最终效果参看光盘中的“Ch03 > 效果 > Dynamic > index.html”，如图3.3-1所示。）

图3.3-1

1.页面布局

同学们，如果感觉时间不够用，也可以不自己布局页面，直接用布局好的素材页，从“2制作导航条”开始。

（1）插入4行1列表格，宽度688，居中对齐

（2）设置第一行高80，插入背景图像。

（3）设置第二行高101，拆分为5列，第一列宽为275，插入图像。

（4）设置第三行高327，，插入背景图像。

（5）设置第四行高80，插入背景图像。

页面布局完成了，接下来的操作同学们可以跳过2（1），直接从2（2）开始，插入flash文本。

2．制作导航条 

（1）选择“文件 > 打开”命令，在弹出的对话框中选择光盘中的“Ch03 > clip > DynamicMusic> index.html”文件，单击“打开”按钮打开文件，如图3.3-2所示。将光标置入到右上方的空白单元格中，如图3.3-3所示。

图3.3-2                                         图3.3-3

（2）单击“插入”面板“常用”选项卡中的“Flash文本”按钮 ，弹出“插入Flash文本”对话框，在对话框中进行设置，如图3.3-4所示，单击“确定”按钮，效果如图3.3-5所示

图3.3-4                      图3.3-5

（3）使用相同方的方法，插入其他Flash文本制作导航效果，如图3.3-6所示。

图3.3-6

3．插入动画并设置

（1）将光标置入到下方蓝色的单元格中，在“插入”面板的“常用”选项卡中单击“Flash” ，在弹出的“选择文件”对话框中选择光盘中“Ch03 > clip >DynamicMusic > images”文件夹中的“ic.swf”文件，单击“确定”按钮完成Flash影片的插入，效果如图3.3-7所示。

（2）保持影片的选取状态，在“属性”面板中单击“参数”按钮，在弹出的“参数”对话框中进行设置，如图3.3-8所示。Menu false ; wmode  transparent

图3.3-7                             图3.3-8

（3）保存文档，按<F12>键预览效果，如图3.3-9所示。