网页的定位技术以及制作层动画.docx

网页的定位技术以及制作层动画.docx

《网页的定位技术以及制作层动画.docx》由会员分享，可在线阅读，更多相关《网页的定位技术以及制作层动画.docx（19页珍藏版）》请在冰豆网上搜索。

网页的定位技术以及制作层动画

实验名称：

网页的定位技术以及制作层动画

实验学时：

6学时

班级：

学号：

姓名：

指导教师：

实验时间：

一、实验目的和要求

1.掌握表格创建和编辑的方法

2.掌握布局表格和布局单元格的使用方法

3.掌握层的创建、编辑和应用的方法

4.掌握框架网页的创建、编辑和保存的方法

二、实验内容及步骤

1.表格的创建、插入、删除、复制和移动等操作

（1）创建一个名为exe14-1.htm的网页文件，将其保存到Mysite文件中。

在页面上插入一个4行5列的表格，表格宽度为500像素，边框为1像素，在表格中输入相应的内容。

并在表格上方增加标题“信息学院各班平均成绩”，标题格式为方正舒体、5号、粗体、#003366。

（2）在表格“01级3班”上方插入一行，内容为“01级2班、85、82、88、82”。

在表格中“计算机组成实验”列前插入一列，内容为“计算机组成、69、73、75、80”；将00级1班这一行移到表格的最后一行，删除“英语精读”这一列，预览、观察效果后保存文件（接下来的实验中会用到）。

2.单元格的拆分、合并和格式化操作

（1）以1中创建的表格为基础，将表格中的数据全部居中；使整个表格在页面中居中。

（2）以年级为依据将表格拆分成两个表格，将01级表格的“科目”一行复制到00级表格上方，使之成为00级表格的第一行，为00级表格添加标题——“信息学院00级平均成绩表”，然后删除00级表格的“科目”这一列。

（3）将01级表格的“计算机组成”和“计算机组成实验”两个单元格合并成一个单元格，内容改为“计算机组成和实验”、居中、黑体、5号。

（4）删除01级和00级两个表格的标题，然后分别套用系统预设的格式Simple3、Simple1。

3.导入外部数据和表格排序

（1）通过“实验指导教程\ch14\material”路径找到并打开Excel文件value.xls，另存为Mysite\value.csv文件，数据的分隔符是逗号类型。

（2）在Mysite文件中新建名为exe14-2.htm的网页文件，对该文件进行如下操作：

将背景图片为Mysite\jpg\bg0015.jpg，导入数据文件value.csv.

（3）通过【命令】—>【排序表格】将表格按“合计值”列降序排序，合并表格标题所在的单元格，并使标题居中；将表格【边框】设为3；【边框颜色】设为#FF0000。

4.布局表格和布局单元格的应用

（1）在Mysite文件夹中创建一个名为exe14-3.htm的网页文件，网页背景图片文件为Mysite\gif\bg0052.gif，创建一个3行5列的表格，用600*360像素的布局表格布局，布局每个单元格为120*120像素。

（2）根据实验效果图要求（图略）进行以下操作：

通过【页面属性】—>【背景颜色】分别设置布局单元格的颜色为#CCCC99、#FF9900；通过【页面属性】—>【背景图片】在布局单元格中分别插入Mysite\jpg文件夹中的名为tu1.jpg、……、tu7.jpg的图片。

预览页面后，保存该文件。

5.层的基本操作

（1）创建一个名为exe14-4.htm的网页文件，并将其保存到Mysite文件中。

通过【页面属性】将页面背景设为Mysite\gif\bg0052.gif。

（2）通过【插入】—>【布局对象】—>【层】，在网页合适的位置上，分别创建名为source和shadow的层，层的尺寸为550*70像素，Z-index的值分别为2和1。

（3）在两个层中均输入文字“书－人生的伴侣，知识的源泉”，在属性面板中，将文字颜色分别为红色和黑色，字体及大小自行定义。

移动层，使两个层略微错开重叠，使文字带有阴影效果。

（4）打开【层】浮动面板，选中【防止重叠】复选框，然后移动名为source的层，试更改前后的区别。

（5）完成激活层、选中层、改变层的大小、改变层的可见性等操作，并观察效果。

（6）改变这两个层的叠放次序，使名为source的层成为shadow层的子层，观察改变后的效果，然后恢复原样。

6.层与表格的综合练习

（1）创建名为exe14-5.htm的网页文件，将其保存到Mysite文件夹中。

设置背景图片为Mysite\jpg\bg0006.gif。

在网页合适的位置上插入1行4列的表格。

表格的各项参数为【宽】为360像素、【高】为30像素、【背景颜色】为#FFFFEE、【边框颜色】为#99CCCC、【边框】为2像素、【填充】为0、【间距】为0。

（2）在4个单元格中分别输入“现代生活”、“生活艺术”、“文化教育”、“科学技术”。

（3）在网页合适的位置上插上4个层，层的大小均为90*90像素，在每个层中插入一个4行1列的表格，每个单元格的大小分别为90*22像素，选中表格，在属性面板中设置表格【边框】为1像素、【背景颜色】为＃FFFFEE。

（4）改变这4个层的叠放次序和层的可见性，观察结果后保存文件。

7．框架和框架集的创建、选择和保存

（1）创建一个名为exe14-6.htm的网页文件，将其保存到Mysite文件中。

用鼠标、菜单两种不同的方法创建【左侧和嵌套的顶部框架】和【顶部和嵌套的左侧框架】，试比较两种框架的不同之处。

（2）删除上题中创建的框架，重新创建【顶部和嵌套的左侧框架】，适当调整框架的大小。

（3）通过【窗口】—>【框架】打开框架面板，用鼠标在框架面板中选中主框架（bottomFrame），插入底部框架（bottomFrame）；选中左框架（leftFrame）插入顶部框架，将左框架分割成上（topFrame1）下（leftFrame）两部分。

（4）将左框架（leftFrame）与底部框架（bottomFrame）的高度调整至相同。

（6）分别在框架面板中选中topFrame、topFrame1、mainFrame、leftFrame、bottomFrame5个框架，给它们分别设置背景颜色#AAFFFF、#CCFFFF、#CCFFFF、#CCFFCC、#CCFFFF。

（7）用topFrame、topFrame1、mainFrame、bottomFrame、leftFrame为框架文件名，exe14-6.htm为框架集名保存框架文件到Mysite文件中。

8.设置框架和框架集的属性和超链接

（1）设置exe14-6.htm框架文件的框架集属性。

在“框架”面板中单击围绕框架集的边框，选中框架集。

各项参数分别为：

【边框】为是、【边框颜色】为#00CCFF、【边框宽度】为2像素、左边【列】为200像素。

（2）分别设置【列】的单位，在【单位】下拉式菜单中分别选择【像素】、【百分比】、【相对】命令，观察比较不同的结果。

（3）设置exe14-6.htm框架文件的框架属性。

1）在topFrame1框架中，插入一个大小为120*160像素的层，层中插入4行1列的表格，表格为120*160像素，边框宽度为1像素。

2）按【插入】—>【图像】的步骤，在表格的4个单元格里分别插入Mysite\jpg文件中4个按钮图片文件a1.jpg、a2.jpg、a3.jpg、a4.jpg。

3）在mainFrame框架中，设置框架链接的页面文件为Mysite\doc文件中的oa.htm，【滚动】的方式为自动，【边框宽度】为120像素，【边框高度】为30像素。

4）选中topFrame框架，按【插入】—>【媒体】—>【Flash】步骤，插入Mysite\swf文件中的Flash文件shu.swf.

5）在leftFrame框架和bottomFrame框架中输入如图14-13所示的文字。

（4）在【属性】面板中分别为4个单元格里的按钮图片创建链接，被链接的网页文件分别是Mysite\doc文件中的literature.htm、art.htm、edu.htm、sice.htm,被链接的网页在主框架中显示。

然后浏览并保存网页文件。

具体方法为：

a.在设计视图中选中按钮图片。

b.打开“属性”面板，执行下列操作之一：

●单击“链接”文本框右侧的文件夹图标，浏览并定位选择指定的文件。

●在“链接”文本框中输入指定文档的路径和名称。

●使用“指向文件”按钮，将超链接目标指向“文件”面板中的指定文件。

c.在“目标”下拉列表中选择mainFrame作为网页的打开位置。

9.时间轴动画的制作

（1）在Mysite中创建网页文件exe15-6.htm，创建4个层并在其中分别插入Mysite\img文件夹中的图像文件camp1.jpg、camp2.jpg、camp3.jpg、camp4.jpg，将这4个层叠放在一起，通过【窗口】—>【时间轴】打开时间轴面板，用时间轴控制层的显示顺序，每过半秒钟显示一幅层中的图像。

一个循环依次显示这4幅图像，循环5次后停止，保存文件后，预览页面观察效果。

（2）在Mysite中创建网页文件exe15-7.htm，将背景图像设置为bg0052.gif。

在网页合适的位置上插入一个层，层中插入Mysite\img文件夹中的图像文件email.gif。

创建时间轴动画，动画运动轨迹为一条水平直线，并设置每秒播放20帧，自动循环播放，动画条长度为50帧，保存文件后，预览页面观察效果。

（3）在上述时间轴动画条的第10、20、30、40、50帧处插入关键帧，方法是：

选中要插入关键帧的位置，再单击鼠标右键添加关键帧。

然后用鼠标拖拽该层，改变在关键帧处的动画轨迹，使动画轨迹由原来直线轨迹改为波浪线轨迹，预览页面效果后用exe15-8.htm为名保存文件。

（4）在上述时间轴动画条的第10到20帧和第30到40帧隐藏层。

在第5层帧处插入关键帧，并为该帧添加行为，在响应事件onFrame5（即动画运行到第5帧时）时触发播放声音动作，播放wav声音Appluase.wav，预览页面观察效果后用exe15-9.htm为名保存文件。

（5）打开网页文件exe15-8.htm，在网页的合适位置上插入一个层，层中插入一个图像为play.jpg。

网页具有下列功能：

当用鼠标双击Play按钮时，此按钮翻转成Stop按钮，此时时间轴动画开始沿轨迹运动，然后单击stop按钮，此时时间轴动画停止运动，并且stop.jpg变成play.jpg。

②预览后用exe15-10.htm为名保存文件

（6）打开网页文件exe15-10.htm，在网页右边的合适位置上插入一个层，层中插入图像文件bird.gif。

在网页上再增加一条时间轴动画条，控制新插入图像的运动轨迹，轨迹要求如图所示（图略），预览后，以exe15-11.htm为名保存文件。

三、实验结果

1.表格的创建、插入、删除、复制和移动等操作

通过一系列反复修正努力，最终得到如下所示的实验结果：

2.单元格的拆分、合并和格式化操作

按实验步骤一步一步进行，通过查阅书籍等资料及询问同学等方式，反复修正，最终得到如下所示的实验结果：

3.导入外部数据和表格排序

按实验步骤一步一步进行，通过查阅书籍等资料及询问同学等方式，反复修正，最终得到如下所示的实验结果：

4.布局表格和布局单元格的应用

按实验步骤一步一步进行，通过查阅书籍等资料及询问同学等方式，反复修正，最终得到如下所示的实验结果：

5.层的基本操作

按实验步骤一步一步进行，通过查阅书籍等资料及询问同学等方式，反复修正，最终得到如下所示的实验结果：

以下两图分别为（3）、（4）步的结果：

第（5）步实验结果及发现为：

将shadow层可见性改为hidden后，该层消失不可见，在网页中浏览时也不能看到该层，并可发现层浮动面板中该层名称前“眼睛”为闭合状态；将source层可见性改为default和inherit时，无明显变化，只是浮动面板中层名称前没有”眼睛”,当可见性为visible时，“眼睛”为睁开状态。

具体结果如下图所示：

第（6）步改变前（下左）后（下右）结果如图所示：

6.层与表格的综合练习

按实验步骤一步一步进行，通过查阅书籍等资料及询问同学等方式，反复修正，最终得到如下所示的实验结果：

7.框架和框架集的创建、选择和保存

8.设置框架和框架集的属性和超链接

按实验步骤一步一步进行，通过查阅书籍等资料及询问同学等方式，反复修正，最终得到如下所示的实验结果：

9.时间轴动画的制作

9.

（1）的实验过程主要通过以下6幅图片展示：

9.

（2）的实验过程及结果如以下3幅图片所示：

9.（3）的实验过程主要通过以下2幅图片展示：

9.（4）的实验过程主要通过以下2幅图片展示：

9.（5）的实验结果主要通过以下2幅图片展示：

9.（6）的实验过程及结果主要通过以下

四、实验中遇到的问题及解决办法

1.在做第2个实验内容时，通过【命令】—>【套用源格式】无法成功套用格式。

请教同学后得知，该操作无法应用于有标题的表格，需先在代码视图中删除表格的标题，然后方可套用指定的格式。

2.在做第4个实验内容时，图片的大小与单元格的大小不能相匹配。

插入图片时，一开始没有看清题意，错选了以前比较大的图片，致使图片大小与单元格的大小不能很好的匹配，并因此浪费了很多不必要的时间；后来，虽找到了大多数120*120大小的正确图片，但还是有两副图片太大，便利用画图工具改变了图片大小，经过一番尝试终于达到了图示所要求的效果。

3.在做第6个实验内容时，设置好的背景图片，在浏览器中不能正确显示出来。

按步骤做好“层与表格的综合练习”实验内容后，在浏览器中查看效果，无法显示出设置好的背景图片，多次修改查找，也未能找出原因，请教老师后，得知背景图片的路径有误。

后来发现是因为在重新打开计算机时，没有重建站点的原因，重建站点设置路径后，最终得到了要求的结果。

4.在做第7个实验内容时，调整左框架与底部框架高度相同时，设计视图的显示效果与浏览器中显示效果不一致。

开始时采用拉伸移动的方式，在设计视图中直接调整两者高度一致，但始终与实际效果有较大出入。

询问同学后得知正确方法：

在框架面板上，选中左列框架，在左列框架的属性面板上，分别调整topFrame和leftFrame的像素，或者相对、百分比。

然后在框架属性面板上选中右边框架mainFrame和bottomFrame，在框架面板上调整两者的像素，或者相对、百分比，并使leftFrame与bottomFrame、topFrame与mainFrame对应的值分别相同。

5.在做第8个实验内容时，按钮图片的链接在浏览器中不能正确显示。

错误原因：

在单元格中插入按钮图片时通过“页面属性”的背景图片插入。

更正：

通过“插入”—>“图像”的方式插入按钮图片。

6.做第9个实验内容时，出现4幅叠放的图片循环播放时始终只显示一幅图片的内容和设置隐藏层后email.gif图片动画消失隐藏后不再出现的情况。

错误原因：

没有根据实际情况需要，相应地改变层的可见性。

更正：

做叠放图片循环显示时，每次只使一个层可见；做时间轴动画条隐藏层时，在第20帧和40帧处，设置层的可见性为visible。

五、实验成绩（每次实验满分20分，按5个等级打分）

实验评分标准

评分等级

得分

实验一

实验二

实验三

实验四

实验五

独立完成完整的实验内容，知识点运用正确，网页布局美观，运行正确，报告内容完整，排版整洁美观，能真实体现实际操作过程及遇到的问题。

优秀：

18～20分

完成实验，知识点运用正确，网页布局美观，运行正确，报告内容较为完整，排版较整洁美观，能体现实际操作过程及遇到的问题。

良好：

16～17分

基本完成实验，知识点运用正确，网页布局一般，运行正确，报告内容较为完整，排版欠整洁美观，基本能体现实际操作过程及遇到的问题。

中等：

14～15分

不能独立完成完整的实验内容，知识点运用欠缺，网页布局不合理，运行正确，报告内容不完整，排版欠整洁美观，不能真实体现实际操作过程及遇到的问题。

及格：

12～13分

没有按时做实验，实验内容没有完成，网页不能正常显示，报告内容不完整，不能真实体现实际操作过程及遇到的问题。

不及格：

0～11分