《动态网页制作》doc版

《《动态网页制作》doc版》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、第八节动态网页制作教学目的：⒈掌握横幅广告管理器的插入；⒉学会制作悬停按钮；⒊掌握滚动字幕的制作；⒋了解站点计数器的插入，知道其作用；⒌学会制作动态HTML效果；⒍能给网页添加背景音乐。重点难点：横幅广告管理器、悬停按钮和动态HTML效果的制作。教学方法：讲解、演示和学生上机操作课时：3课时教学步骤：〈导入新课〉同学们，我们已经学会了用FrontPage2000制作网页的一些基本的操作，那么，我们是不是还想让我们的网页更漂亮呢？在网上我们看到，很多网页上的元素都能动起来，那么，我们是不是也想让我们的网页动起来呢？下面我们就来学习动态网页的制作。〈板书〉第八节动态网页制作我们看到，许多网站都

2、有标题广告，其实它的制作并不复杂。现在，我们来为我们的“环保”网站，在其“century.htm”上制作一个“横幅广告管理器（Bannerandmanager）”。〈板书〉一、横幅广告管理器[演示]在huanbao网站中，新建一个名为“century.htm”的框架页面，在其中制作标题广告，将两幅标题的图片轮流显示在页面上。操作步骤：(1)打开huanbao网站，依次单击“文件（F）”菜单中的“新建（N）”“网页（P）”命令，在弹出的“新建”对话框中单击“框架网页”标签，选择“标题”式框架，建立一个框架页面。(2)右击上框，，在弹出的快捷菜单中单击“框架属性”，打开“框架属性”对话框，单击

3、“框架网页”按钮，不选择“显示边框”复选框，单击“确定”按钮，关闭对话框。(3)在上框中，单击“建立新网页”按钮，依次单击“插入（I）”菜单中的“组件（O）”“横幅广告管理器（N）”命令，打开“横幅广告管理器”对话框，如图5-33所示。图5-33(1)单击“添加”按钮，依次将两幅图片添加到“显示图片”编辑框。(2)设定宽度为380像素，高度为90像素。如果所添加的图片大小不一，那么，要确保此处输入的是所有图片中最大的一幅图片的尺寸，其余图片将在这个区域中居中对齐。(3)设定变化效果为“分解”，每幅图片的显示时间为“5秒”，再单击“确定”按钮即可。这样，我们的“横幅广告管理器”就做好了。同学

4、们是不是还看到有的网页上有一些按钮，当我们把鼠标移上去的时候，它回改变颜色和形状，有的还会发出声音。这是用“悬停按钮”来制作的。接下来我们就来制作“悬停按钮”。〈板书〉二、悬停按钮[演示]在“century.htm”网页的下框中创建三个悬停按钮，按钮文字分别为“环保组织”“环保行动”“返回主页”。操作步骤：（1）依次单击“插入（I）”菜单中的“组件（O）”“悬停按钮（H）”命令，打开“悬停按钮属性”对话框，如图5-34所示。图5-34（2）在“按钮文本（U）：”文本框中输入“环保组织”，单击“字体（F）”按钮，设置好字体、字号、字型和颜色后，单击“确定”按钮。（3）在“链接到（L）：”文本

5、框中输入目标网页文件名organization.htm。（4）设置按钮颜色为蓝色，背景颜色为紫色。（5）单击“效果”右侧的向下箭头，打开下拉列表，从中选择效果“发光”，如果想在该效果起作用时，使按钮的颜色发生改变，可以打开“效果颜色”下拉列表，选择一种颜色如“绿色”。（6）设置按钮的高度和宽度，如果使用图片作为按钮，要保证此处的高度和宽度是图片的尺寸。（7）为了自定义按钮的其它效果，可以单击“自定义（N）”按钮，在“定制”对话框中，选择播放声音（单击鼠标时发出的声音和鼠标停留时发出的声音）或选择自定义图片（按钮本身的图像和鼠标停留在按钮上时显示的图像）。（8）用同样的方法定义其余两个按钮。

6、现在我们网页上就有了漂亮的“悬停按钮”。下面我们来创建水平滚动的文字字幕。〈板书〉三、滚动字幕[演示]在主页的标题图片下面插入滚动字幕，文本内容为“让地球更绿，让我们的家园更美好”。操作步骤：（1）将插入点移到标题图片下，依次单击“插入（I）”菜单中的“组件（O）”“字幕（M）”命令，打开“字幕属性”对话框。（2）在“文本（T）：”框中输入字幕内容。（3）调整速度。其中“延迟”用来设置字幕每次移动的时间间隔，该参数越大，字幕移动越慢；“数量”用来定义字幕每次移动的距离，该参数越大，字幕移动越快。我们使用默认值。（4）定义“表现方式”。其中“滚动条（L）”可以让文字沿设置的方向，从字幕区域的

7、一边出现，到另一边消失。“幻灯片（I）”可以让文字沿设置的方向，从字幕区域的一边出现，当文字到达字幕区域的另一边时停止滚动并保持在屏幕上。“交替（A）”可以让文字在字幕区域来回移动。我们把“表现方式”设置为“滚动条”。（5）设置字幕区域的大小。选中“宽度”和“高度”复选框前打勾，并指定像素值或百分比。现在我们设置：指定宽度为300，高度为16（按像素），其余采用默认值。（6）方向设置为“左”，单击“确定”按钮。我们切换到