网页设计教案

1、新 乡 技 师 学 院教 案2012-2013学年度第二学期课程名称： 网页设计 授课班级： 11级电子商务班 授课教师： 朱 小 燕 教 学 部： 电子信息系 2013年3月1日审 批 表日 期课题（章节）内容教案质量教研室主任意见签 字授课班级授课日期授课题目：第一章 简单网页制作（一）目的要求：掌握新建站点及网页的方法；掌握网页的属性设置、水平线的插入、滚动字幕的插入及图象的插入等网页的简单美化操作；。重点难点：网页的属性设置、水平线的插入、滚动字幕的插入及图象的插入等网页的简单美化操作组织教学：点名考勤；复习；引入新课；讲解理论知识；实例演示；指导学生练习；总结总结复习导入新课：信息技

2、术突飞猛进，不断地创造着令人耳目一新的天地。就在人们对互联网络有所认识的时候，电子商务这一全新的事物又以难以估量的速度兴起，并进而改变着社会经济生活的各个方面。电子商务正从一个概念慢慢变成我们生活中不可缺少的一部份，作为一个现代公民，认识、了解、学习电子商务是非常必要的,而网页制作是专业的电子商务人员所不可缺少的一项技能，从本次课开始我们将详细的学习网页的简单制作方法。提问：1、曾经是否学习过网页的制作方法？2、对网页有什么看法？教学方式、手段、媒介：教学手段：讲授、多媒体；媒介：教材授课内容：一、创建新站点和网页（一）、创建新站点1、启动FrontPage2003应用程序，单击主界面“常用”

3、工具栏上“新建普通网页”按钮右侧的下拉箭头，在弹出的下拉菜单中选择“站点（w）”，在打开的“Web站点模板”对话框中，选择“空白站点”模板类型，如图所示。指定新站点的的位置为d：dzsw，表示新建立网站的所有文件夹和文件都存放在本地机D盘的dzsw目录中。2、单击“确定”按钮。此时即完成了网站的建立。（二）、创建网页1、在FrontPage2003的“网页”视图下，单击“常用”工具栏上的“新建普通网页”按钮右侧的下拉箭头，在弹出的下拉菜单中单击其中的“网页（P）”命令，打开如图所示的网页模板对话框。根据需要选择合适或接近的模板新建网页，如选择“普通网页”。2、单击“确定”按钮，此时，在工作区上

4、方显示该网页为“new_page_1.htm”。3、保存网页并更改网页标题（1）单击“文件（F）”菜单中的“保存（S）”命令，打开“另存为”对话框。如图所示（2）在对话框中的“文件名（N）”处，输入文件名（通常为index）,保存类型为“Web页”。（3）单击对话框中的“更改标题（C）”按钮，打开“设置网页标题”对话框。（4）在对话框中输入网页标题，单击F“确定”按钮。（5）单击“保存（S）”按钮，保存网页。二、网页美化操作（一）、网页属性的设置1、选择“文件”菜单下“属性”命令或单击鼠标右键，选择“网页属性”命令，打开“网页属性”对话框。2、在“网页属性”对话框中分别进行设置。在“常规”选项

5、卡中设置背景音乐及循环次数；在“背景”选项卡中设置背景的图片或背景的颜色以及超链接不同状态的显示效果；在“语言”选项卡中设置语言的类型等。（二）、在网页中插入水平线1、将光标移到需插入水平线的位置。2、单击“插入”菜单中的“水平线”命令。3、选中水平线并双击，打开如所示的“水平线属性”对话框进行设置。（三）、网页中插入剪贴画库中的水平线1、将光标移到需插入水平线的位置。2、单击“插入”菜单下的“图片”子菜单中的“剪贴画”命令，打开“插入剪贴画”任务窗格。3、在任务窗格的“搜索文字”文本框中输入“水平线”，单击“搜索”按钮，任务窗格中出现搜索出的水平线图样。如图所示4、单击要选择的水平线图样即可

6、插入水平线。（四）、插入图像1、单击“插入”菜单中的“图片”子菜单中的“来自文件”命令。2、在“图片”对话框中，选择一个需要的图像文件，单击“插入”按钮，图像出出在网页相应的位置。3、选中图片，单击鼠标右键，从弹出的快捷菜单中选择“图片属性”命令，打开“图片属性”对话框，选定其中的“外观”选项卡，在其中进行环绕样式、布局、大小等设置。4、也可以使用“图片”工具栏上的按钮给图片加上文字、创建缩略图、旋转、对比度及亮度等设置。（五）、插入滚动字幕1、选择“插入”菜单中的“Web组件”命令，选择“动态效果”中的“字幕”，弹出的“字幕属性”对话框如图所示，2、在对话框输入字幕文本及字幕的方向、速度、表

7、现方式、大小、背景颜色等。注：如果要使文本上下滚动，需要修改其HTML代码。（六）、插入悬停按钮1、在“网页”视图模式下，将光标移到准备插入悬停按钮的地方，执行“插入”菜单中的“Web组件”命令，打开“插入Web组件”对话框如图17所示。2、在“组件类型”列表框中，选择“动态效果”，在“选择一种效果”列表框中选择“悬停按钮”，单击“完成”按钮。打开“悬停按钮属性”对话框。如图所示。3、在“按钮文本”文本框中，输入悬停按钮的名称。4、在“链接到”文本框中，输入悬停按钮链接目标的URL地址，或者单击“浏览”按钮，打开“选择悬停按钮链接”对话框选择准备跳转到的网页文件。注：也可以用鼠标右键单击悬停按

8、钮，选择“悬停按钮属性”命令，在打开的“悬停按钮属性”对话框中对悬停按钮属性进行必要的更改。（七）、站点计数器1、在“网页”视图模式下，将光标定位到要放置站点计数器的位置。2、选择“插入”菜单下的“Web组件”命令，打开“插入Web组件”对话框。3、在“组件类型”列表框中，单击“计数器”选项，然后单击“完成”按钮，打开“站点计数器属性”对话框，如图所示。4、在“计数器样式”设置区中，单击计数器样式单选框，选择一种计数器样式。5、如果要将计数器设置为某个数字，单击“计数器智囊团为”复选框，再输入数字。6、如果要在计数器中显示固定倍数的数字，请选中“设定数字位数”复选框，再输入数字。7、单击“确定

9、”按钮。注：（1）设置完计数器后，在网页上将显示“计数器”标志，只有将站点发布之后计数器才可以正常使用。（2）创建完计数器后，在“网页”视图下，双击“计数器”标志，打开“站点计数器属性对话框，即可以计数器进行重新设置。三、实例练习（一）、在FrontPage2003中，设计制作一幅标题“我的主页”的静态文本网页，该网页的背景颜色为“黄色”。首先插入一条文字大小是36pt的滚动字幕“欢迎光临”，其设置是：文字是浅蓝色、表现方式为“滚动条”、背景颜色为“紫色”；然后，再插入一条红色的水平线；最后，再输入如图中显示文字，该段落文字的字体为楷体-GB2312、颜色为深蓝色、大小不为24磅。将答案以文件

10、名为MYINDEX.html保存,提交该网页为答案。（二）、利用FrontPage2003制作如图所示的网页，把此文件命名为pcl.htm，作为最后提交的考试结果文件。要求：设置背景图片为素材包中的b3.gif；第一段为文正姚体，黑色，加粗，24磅，居中对齐；插入第一根水平线；中间段落为新宋体，绿色，24磅，左对齐，并加上实心圆圈的项目符号；插入第2根水平线；插入素材包中的图片sa.jpg；为图片建立超链接，链接目标为素材包中的catslog_c.htm。（三）、用Frotpage2003制作如图所示的网页，把此文件命名为page1.html,提交作为答案。要求：设置背景图片为素材包中的034

11、.jpg;插入一根水平线；段落文字为18磅，华文中宋，加粗，蓝色，首行缩进为50点，段前缩进10点，段后缩进20点，行距300%，两端对齐；在上述文字下方插入一根水平线；输入文字“首页”，字体为华文新魏，24磅，居中对齐，蓝绿色，并建立超链接，链接目标为素材包中的homepage.htm。总结巩固：掌握新建站点及网页的方法；掌握网页的属性设置、水平线的插入、滚动字幕的插入及图象的插入等网页的简单美化操作；布置作业： 课后习题参考资料：教材教学后记：编写日期：2013年3月1日 编写人员：朱小燕授课班级授课日期授课题目：第一章 简单网页制作（二）目的要求：熟练掌握用表格定位网页的方法；熟练掌握文

12、本超链接、图片超链接及E-mail超链接的创建方法；重点难点：表格定位网页的方法；文本超链接、图片超链接的创建方法；组织教学：点名考勤；复习；引入新课；讲解理论知识；实例演示；指导学生练习；总结总结复习导入新课：上次课我们主要学习了Frontpage2003中创建站点及网页的方法，并简单学习了如何在网页中加入一些简单的美化元素，本次课我们将详细学习用于定位网页各元素的一个很重要的知识点表格，并且还将详细学习互联网中用于将成千上万张网页链接在一起的技术超链接。提问：1、如何新建站点及网页？2、在网页中如何插入水平线及图像？教学方式、手段、媒介：教学手段：讲授、多媒体；媒介：教材一、使用表格定位网

13、页（一）、插入表格1、启动FrontPage2003。2、执行“表格”菜单下的“插入”中的“表格”命令，在出现的对话框中设置表格的行列数、布局及宽度。3、在表格中输入表格的具体内容。（二）、为表格添加行、列1、选择插入位置，如果要插入行，则选择一行；如果要插入列，则选择一列。2、选择“表格”菜单下的“插入”中的“行或列”，打开“插入行或列”的对话框，如图所示。（三）、拆分与合并单元格1、选择对象，如果是拆分单元格，首先选择该单元格；如果是合并单元格，则选择需要合并的多个单元格。2、如果是拆分单元格，则选择“表格”菜单下的“拆分单元格”，如果是合并单元格，则选择“表格”菜单下的“合并单元格”。（

14、四）、设置表格属性1、单击表格的任一单元格。2、单击鼠标右键，选择“表格属性”命令，打开“表格属性”对话框。3、按需要进行布局、表格大小、选择表格背景及图片、单元格边距、间距及边框颜色等属性的设置。如图所示。注：（1）在网页中表格属性是经常用到的，此处应熟练掌握。（2）在表格属性设置中，将：“边框线宽度”设置为0，则浏览时不显示边框线。（3）应特别注意表格宽度及高度的单位是“百分比”还是“像素”。（4）选中“使用背景图片”复选框，可为表格添加背景图片，从而美化表格。（5）若要突出显示单元格和表格边框，应将“显示单元格和表格边框（S）”复选框选中。（五）、设置单元格属性1、选择需要设置属性的单元

15、格。2、单击鼠标右键，选择“单元格属性”命令，打开“单元格属性”对话框。3、按需要进行单元格的布局、单元格大小、自定义背景颜色和图片及边框颜色等属性的设置。如图所示。注：（1）在网页中单元格属性是经常用到的，此处应熟练掌握。（2）应特别注意单元格宽度及高度的单位是“百分比”还是“像素”（3）选中“使用背景图片”复选框，可为当前单元格添加背景图片。二、创建超链接超链接是链接网页的一项强大工具。自从有了超链接之后，用户就可以轻松漫游网络世界。如果网页失去了超链接，也就等于失去了真正存在意义。创建超链接有三项工作：确定超链接点、确定链接目标、确定目标架。其中（1）超链接点确定了在何处单击可以打开超链

16、接的目标；（2）链接目标是需要打开的网页或文件；（3）目标框架用于确定在何处显示超链接的目标。（一）、创建文本超链接1、在“网页”视图模式下，选中需创建超链接的文本。2、执行“插入”菜单下的超命令，或单击鼠标右键在打开的快捷菜单中，选择“超链接”命令，打开“插入超链接”对话框，如图所示。3、如果要创建指向一个站点或文件系统中的网页，单击“原有文件或Web页”按钮，在“查找范围”下拉列表中，选择存放网页的文件的文件夹并在文件列表中选择超链接的目标文件；也可以在“地址”文本框中直接输入目标网页的URL地址。4、如果要创建指向新网页的超链接，在此单击“新建文档”按钮。5、单击“目标框架”按钮，打开“

17、目标框架”对话框，如图所示。6、最后单击“确定”接钮。（二）、创建图片超链接1、为整个图片创建超链接设置图片超链接有两种方法：一种方法和创建文本超链接的方法相同，直接使用插入“超链接”命令进行设置；另一种是在“图片属性”对话框中进行设置。（1）在“网页”视图模式下，鼠标右键单击选择需要创建超链接的图片。（2）在弹出的快捷菜单中，执行“图片属性”命令，打开“图片属性”对话框中，如图所示。（3）在“常规”选项卡的“默认超链接”设置区中的“位置”文本中，直接输入目标网页的URL地址，或单击“浏览”按钮，然后在打开的“编辑超链接”对话框中指定一个目标网页。（4）单击“确定”按钮。2、在图片上创建文本热

18、点超链接文本热点是一个文本框，它可以作为一个超链接源，从而指向相应的超链接跳转目标。（1）在“网页”视图模式下，单击鼠标左键选择一幅图片。（2）在“图片”工具栏上，单击“文本”按钮，此时图片上将出现一个文本输入框。（3）在文本框中输入文字后可对字体的格式进行设置，并可根据需要来调整文本框的大小和位置。如图所示。（4）在文本框的边缘单击鼠标右键，在弹出的快捷菜单中执行“超链接”命令，打开“插入超链接”对话框（5）指定一个目标后，单击“确定”按钮，完成设置。注：为图片上的文本创建超链接之后，在网页预览模式下，当光标移至文本框所在的区域时，其开头变为手形。单击鼠标左键即可在浏览窗口中打开链接目标。3

19、、在图片上创建几何形状热点超链接创建几何形状的热点需要使用图片工具栏上的“长方形热点”按钮、“圆形热点”按钮、与多边形热点按钮，它们用于决定热点的大小和形状。（1）在“网页”视图模式下，单击鼠标左键选择一幅图片。（2）使用图片工具栏上的“长方形热点”按钮、“圆形热点”按钮、与多边形热点按钮工具，在图片上绘制出热点区域。采用“多边形热点”工具可以定义一个任意形状的几何图形。（3）定义完热点区域后，会出现 “插入超链接”对话框。（4）在“插入超链接”对话框中，设置热点链接的目标的URL地址。（5）单击“确定”按钮，完成创建图片超链接热点操作。（6）按照以下方法，可以在一张图片上创建多个热点。注：（

20、1）单击图片工具栏上的“突出显示热点”按钮，可以突出显示定义的热点，再次单击此按钮，又可以回到原来的样子。（2）如果要删除热点，可单击图片的热点后按Delete键。（三）创建Email超链接1、在“网页”视图模式下，选中指向电子邮件的链接源，可以是一段文字，例如“与我联系”；也可以是一幅图片。2、选择需要创建超链接的文本或图片，单击鼠标右键，选择“超链接”命令，打开“插入超链接”对话框，如图所示。3、在“链接到”设置区，单击“电子邮件地址”按钮，打开设置电子邮件地址对话框，如图所示。4、在“电子邮件地址”文本框中，输入电子邮件地址，例如lbj0705。也可以在“最近用过的电子邮件”地址列表中，

21、选择一个电子邮件地址。5、在“主题”文本框中输入一个电子邮件的主题。6、单击“确定”按钮，完成设置。（四）、创建书签超链接书签是一种在网页上标记位置的超链接，是一种在网页内的超链接。书签主要起定位作用，使用书签来当作超链接的目的端。书签在使用前必须首先定义。1、定义书签（1）在“网页”视图模式下，将光标定位于要插入书签的位置。（2）选择“插入”菜单中的“书签”命令，打开“书签”对话框，如图所示在对话框中设置书签名字。（3）单击“确定”按钮。2、链接到书签（1）选中要创建超链接的文字或图片，单击鼠标右键，选择“超链接”命令，打开如图所示的对话框。（2）从对话框中的链接到列中，选择“本文档中的位置

22、”选项出现图所示的对话框。（3）从图中选择要链接的书签，单击“确定”按钮。三、实例练习（一）、制作一个标题为“我爱福娃”的网页，将其保存为olympic.html ，提交作为答案。要求：插入2行5列的表格，指定表格宽度为70%，水平居中对齐；将素材文件中的福娃图片及文字“贝贝”、“晶晶”、“欢欢”、“迎迎”、“妮妮”输入对应单元格中，设置各单元格对齐方式为居中对齐，单元格中文字字体为幼圆，12磅，加粗；在表格上方插入滚动字幕“北京欢迎您！”设置该滚动字幕属性如下：表现方式为“滚动条”，文字为紫色、加粗，滚动速度设置为：延迟50，数量为3。（二）、制作一个普通网页，网页标题为“欢度佳节”，在页面

23、中输入文字“节日快乐”，字体为华文行楷，24磅，居中显示，将文字链接至；插入一个二行四列的表格，表格宽度500象素，水平居中对齐，边框粗细为5个象素，颜色为绿色。在第一行的各个单元格中分别输入如图所示的文字，字体为楷体_GB2312，14磅，红色加粗，居中对齐。在第二行各单元中依次插入图片：picl.gif、pic2.gif、pic3.gif、和pic4.gif，整个表格的背景色设为#FDF5C1，将素材文件bl.gif设为网页背景。将该网页保存为festivsl.html,提交作为答案。 (三)、制作一个如图所示的网页，并按照要求将此文件保存为pagel.html，提交作为答案。要求：（1）

24、新建一个普通网页，插入一个5×2（即5行2列）的表格。该表格的属性为：宽度50%，高度150个像素，对齐方式为水平居中，每行高度30个像素，边框粗细为3个像素，颜色为#800000；单元格边距及单元格间距均为0个像素。单元格对齐方式为水平居中。（2）将第一行单元格设为标题单元格，背景颜色#C0C0C0，分别输入相应文字。（3）在其余四行单元格中输入如图文字，中文使用宋体，英文字体为Arial。（4）在表格下方插入滚动字幕“中外节日中英文对照”，文字为隶书、24pt、紫色。（四）、请利用FrontPage2003建立一个如图所示的网页，并按照要求将此文件保存为page2.html。要求

25、：插入2行4列表格，表格水平居中，表格宽度为100%；在第一行单元格中分别插入素材包中的dujuan.gif，shancha.gif.,shuixian.gif，yueji.gif；第二行第一列文字内容为：杜鹃：灿烂如锦色鲜艳，殷红欲燃杜鹃花；第二行第三列文字内容为：水仙：借水开花自一奇，水沉为骨玉为肌。该两行文字设置为华文中宋，12磅，加粗，粉红色；第二行第二列文字内容为：山茶：惟有山茶偏耐久，绿丛又放数枝红；第二行第四列文字内容为：月季：花开花落无间断，春来春去不相关。该两列文字设置为华文新魏，12磅，加粗，蓝色；插入图片f2.jpg，并为图片建立超链接，链接目标为素材包中的homepag

26、e.html；选择素材包内的图片文件027.jpg为网页背景；将编辑好的文件保存为page2.html。（五）、利用FrontPage建立一个如图如示的网页，并按照要求将此文件保存为page3.html,提交作为答案。要求：插入2行4列表格，表格水平居中，表格宽度为43%，高度为275像素；放图片的单元格宽度设置为43%，高度为132像素，放文字的单元格宽度也设置为43%；单元格中插入的图片为第一行：q1.jpg,q2.jpg,第二行为：q3.jpg,q4.jpg：表格的顶端标题文字为华文新魏，蓝色，24磅，加粗；插入水平线，第一行单元格中文字为粉红色，第二行单元格中文字为红色；选择素材包内的

27、图片文件013.jpg为网页背景；“首页”为华文细黑，蓝色，24磅，加粗，并建立超链接，链接目标为素材包内的homepage.htm；将编辑好的文件保存为page3.html。总结巩固：用表格定位网页的方法；文本超链接、图片超链接及E-mail超链接的创建方法；布置作业： 课后习题参考资料：教材教学后记：编写日期：2013年3月5日 编写人员：朱小燕授课班级授课日期授课题目：第二章 框架网页制作目的要求：掌握框架网页的创建及保存方法；掌握编辑框架的方法；掌握设置框架及框架页的方法；重点难点：编辑框架的方法；设置框架及框架页的方法；组织教学：点名考勤；复习；引入新课；讲解理论知识；实例演示；指导

28、学生练习；总结总结复习导入新课：上次课我们详细的学习了用表格定位网页的方法，以及文本超链接、图片超链接及E-mail超链接的创建方法，通过前段时间的学习，大部分学生已基本会使用Frontpage2003制作一些简单的网页，本次课我们将详细的学习框架页面的制作方法。提问：1、如何在网页中插入表格？2、如何对文本及图片创建超链接？教学方式、手段、媒介：教学手段：讲授、多媒体；媒介：教材授课内容：一、创建框架网页（一）、建立框架1、启动FrontPage2003。2、单击主界面“常用”工具栏上“新建普通网页”按钮右侧的下拉箭头，在弹出的下拉菜单中选择“网页(P)”,在出现的“网页模板”对话框中选择“

29、框架网页”选项卡，从中选择一种框架形式。如图所示。（二）、框架网页的内的两个按钮作用1、设置初始网页。单击该按钮，可以为框架指定一个初始网页。2、新建网页。单击该按钮，可以为框架新建一个网页。系统自动在每个框架中创建一个空白网页。用户可以像简单网页一样编辑框架中的每一个网页。二、保存框架及框架页（1）框架网页编辑后要保存，单击工具栏上的保存按钮，出现“另存为”对话框。（2）此时应分别保存各个框架及整个框架网页。注：（1）某个框架为蓝色框显示时，即为当前框架，输入文件名，单击保存按钮。（2）对于新创建的框架，第一次保存时，系统将提示用户依次保存框架中的各个网页，最后要求用户保存整个框架文件本身。

30、三、编辑框架（一）、拆分框架1、选中需拆分的框架（单击），此时选中的框架四周出现蓝色的框线。2、执行“框架”菜单中的“拆分框架”命令，出现如图所示的对话框。3、选择拆分方式，设定后单击“确定”按钮。注：要拆分框架，还可以把鼠标指针移动框架的边框上，按住Ctrl键，然后拖动框架的边框。（二）、删除框架1、选中需删除的框架。2、选择“框架”菜单中的“删除框架”命令。四、设置框架属性（一）、设置框架属性1、选中需设置属性的框架。2、单击鼠标右键，选择“框架属性”命令，如图所示。3、在框架属性对话框中，进行各种设置。（二）、设置框架页属性1、在图上图所示的“框架属性”对话框中单击“框架网页（F）”按钮

31、，此时出现如图所示的“网页属性”对话框。2、在框架“网页属性”对话框的“框架”选项卡中进行以下设置。u 框架间距：用于设置框架之间的距离。u 显示边框：选中此复选框，表示框架之间有边界；取消选中该复选框，“框架间距”中的数值将自动为0，表示框架之间没有边界。注：（1）框架网页中的每一个部分是一个独立的页面。一个网页上的框架上的框架最好不要超过4个。（2）如要单独另存框架中的某网页，可选择“框架”菜单中的“另存为网页”命令。 这一点应注意，用工具栏上的“保存”按钮和“文件”菜单中的另存为命令是不能完成的。五、实例练习（一）、在FrontPage2003中，设计制作一幅标题为“FRAME”的目录式

32、框架网页，在左侧框架左框架进输入素材包图片1.jpg,后输入文字“我的BLOG、与我联系”，其文字属性为红色，居中对齐，18磅；把右侧框架拆分为行，并使底部框架的高度为33百分比，插入素材包中图片3.jpg,写入邮箱地址maple，超链接至http：/；在右上部网页中写入如图所示的文字，背景颜色“紫色”，字体颜色为“黄色”，字体大小为24磅加粗。将答案以文件名为MYFRAME.html保存，提交该网页为答案。（二）、利用FrontPage2003制作一个垂直拆分框架网页，如图所示，并按照要求将此文件保存为page1.html。 要求：在左框架中新建网页，设置左框架宽度相对值为1；“近期大家讨论

33、最多的话题”为24磅，粗体，粉红色，方正姚体，居中对齐；插入水平线；“饮食、娱乐、旅游、健康、彩铃”为24磅，粉红色，华文新魏，左对齐；给文字加上圆点项目符号；插入水平线；设置背景图片为素材包中的homepage.html；左框架保存为page1-1.html。在右框架中新建网页，设框架宽度相对值为1；文字为24磅，加粗，华文行楷，居中对齐，链接到素材包中的04.jpg；插入图片z3.jpg；设置框架背景为素材包中的036.jpg；右框架保存为page1-2.html；将编辑好的框架网页保存为page1.html。（三）、利用Fromtpage2003制作一个横幅和目录框架网页，如图所示，并按

34、照要求将此文件保存为page2.html。要求：在横幅框架中新建网页，设置横幅框架高度为87像素，文字为华文新魏35磅，加粗，浅绿色，如中对齐；选择素材包内的图片文件024.jpg为网页背景，横幅框架保存为page2-1.html；在目录框架中新建网页，设目录框架宽度为314像素，文字为幼圆18磅，加粗，居中对齐，分别链接到素材包中的f.jpg、f2.jpg、f3.jpg、f4.jpg，选择素材包内的图片文件024.jpg为网页背景，将目录框架保存为page2-2.html;设置主框架背景为素材包中的036.jpg；将主框架保存为page2-3.html;将编辑好的框架网页保存为page2.h

35、tml。（四）、利用FrontPage2003制作一个标题、页脚和目录框架网页，将此文件保存名为pc2.htm。要求：在标题框架中新建网页，标题框架中文字为24磅，加粗，幼圆，绿色，居中对齐，标题框架的高度为64像素，选择素材包中的图片文件b10.jpg为网页背景，标题框架保存为pjk1.htm；在目录框架中新建网页，选择素材包中的图片文件3.jpg为网页背景，文字为18磅，加粗，倾斜，新宋体，左对齐，并加上实心圆圈的项目符号，文字“走进大自然”为18磅，加粗，华文新魏，居中对齐，并将其与素材包中的图片f2.jpg建立链接,目录框架保存为pjk2.html；页脚框架的文字为24磅，加粗，倾斜，

36、字体为Bookman Old Style，紫色，居中对齐，并设置超链接，链接目标为素材包中的z1.jpg，选择素材包中的图片文件b10.jif为网页背景，不显示页脚框架的边框，将页脚框架保存为pjk4.htm；将编辑好的文件保存为pc2.htm提交。总结巩固：掌握框架网页的创建及保存方法；掌握编辑框架的方法；掌握设置框架及框架页的方法；布置作业： 课后习题参考资料：教材教学后记：编写日期：2013年3月6日 编写人员：朱小燕授课班级授课日期授课题目：第三章 制作多媒体网页目的要求：掌握在网页中插入音频及视频的方法；了解在网页中插入动态Html的方法；掌握在网页中插入Flash及Gif动画的方法

37、；了解为网页添加过渡效果的方法；重点难点：网页中插入音频及视频的方法；网页中插入Flash及Gif动画的方法组织教学：点名考勤；复习；引入新课；讲解理论知识；实例演示；指导学生练习；总结总结复习导入新课：上次课我们详细的学习框架页面的制作方法，本次课我们将详细学习如何在网页插入音频、视频、Flash、Gif等多媒体元素的方法，并简单介绍如何给网页添加过渡效果，使网页形式更加丰富，能够吸引用户的眼球。提问：1、如何创建框架页面？2、如何对框架页面进行设置？教学方式、手段、媒介：教学手段：讲授、多媒体；媒介：教材授课内容：一、插入音频和视频在网页中可以以插入一些音频和视频，使网页的内容更具有感染力

38、。（一）、插入背景音乐1、打开要插入背景音乐的网页。2、单击鼠标右键，在弹出的快捷菜单中选择“网页属性”命令，弹出“网页属性”对话框，如图所示。3、在“背景音乐”选项区域中的“位置”文本框中输入文件名，或单击“浏览”按钮，打开如图所示的“背景音乐”对话框。4、在该对话框中选择所需的音乐，单击“打开”按钮，返回“网页属性”对话框。5、在“循环次数”微调框中输入音乐的播放次数，或选中“不限次数”复选框，那么音乐就不断播放。6、所有设置完成后，单击“确定”按钮即为该网页创建了背景音乐。（二）、插入视频文件(嵌入视频)1、在“网页”视图模式下，将光标定位到需要视频的地方。2、执行“插入”菜单中的“We

39、b组件”命令，打开“插入Web组件”对话框。3、在“组件类型”列表中，选择“高级控件”选项；在“选择一个控件”列表中，双击“插件”选项，打开“插件属性”对话框。4、在“数据源”文本框内，输入在网页内嵌入视频文件的URL，或单击“浏览”按钮，查找一个视频文件。5、在“大小”设置区的“高度”与“宽度”文本框中，输入视频图像的显示尺寸，以“像素”作单位。6、在“布局”设置区，设置视频在网页上的对齐方式；在“水平间距”“垂直间距”文本框内设置视频和周围的网页内容之间的距离；在“边框粗细”文本框内输入视频边框的粗细，以“像素”作单位。（7）设置完成后，单击“确定”按钮。二、加入动态HTML(DHTML)

40、在网页中还可以加入动态HTML（DHTML）（一）、选择“视图”菜单中的“工具栏”中的“（DHTML）效果”命令，打开“（DHTML）效果”工具栏，如图所示（二）、选择制作动态HTML效果的文字，在下拉列表中选择如“单击”、“双击”、“鼠标悬停”等选项，在“应用”下拉列表中选择“格式”，在“选择设置”中选择“选择字体”选项，弹出字体对话框，如图所示（三）、也可以在“选择设置”下拉列表中，选择“选择边框”，在出现的如图所示的“边框和底纹”对话框中进行相应的设置。注：（1）默认情况下，所有的动态效果都是突出显示的。也可以单击“DHTM效果”工具栏中的“突出显示动态HTML效果”按钮，使其和普通的文

41、本没有什么区别。（2）单击“DHTML效果”工具栏中的“删除效果”按钮也可以删除刚定义的动态效果。三、插入Flash动画插入Flash动画，会使网页变得生动、活泼、有趣。但在FrontPage2003中不能直接插入Flash，必须插入相应的控件后才能使用。（1）在“网页”视图模式下，将光标定位在网页中需要插入Flash动画的地方。（2）选择“插入”菜单下的“Web组件”命令，打开“插入Web组件”对话框，在“组件类型”列表中，选择“高级控件”选项；在“选择一个控件”列表中，选择“Flash影片”，如图所示。（3）单击“完成”按钮，出现如图所示的“选择文件”对话框（4）在该对话框中进行Flash

42、文件的选择，单击“插入”按钮。四、应用GIF动画可以将GIF动画添加到Web网页。GIF动画是由多个GIF图片连续显示而成，可以在绘图程序中创建。也可以在Internet上找到GIF动画。（一）、插入GIF动画1、在“网页”视图模式下，将光标定位到网页中需要插入GIF动画的地方。2、选择“插入”菜单下的“图片”中“来自图片”命令，打开“图片”对话框。3、在“文件名”文本框中，输入GIF动画文件名，或在“查找范围”下拉列表中，查找并选择一个GIF动画，单击“插入”按钮，将选中的GIF动画插入到网页中。（二）、设置GIF动画1、用鼠标的右键单击插入的图片，在打开的快捷菜单中执行“图片属性”命令，打

43、开“图片属性”对话框。2、在“图片属性”对话框中，可以对GIF动画的大小、对齐方式和环绕方式等进行设置。五、网页的过渡效果网页的过渡效果是指浏览器在更新网页时，两个网页之间的过渡方式。在多媒体网页中使用网页过渡效果使网页的浏览形式更加活泼、引人入胜。（1）在“网页”视图模式下，打开要显示过渡效果的网页。（2）选择“格式”菜单下的“网页过渡”菜单命令，打开“网页过渡”对话框，如图所示。（3）单击“事件“下拉列表按钮，从中选择一个用来触发过渡效果的事件。例如，选择“进入网页”，那么站点访问者首次浏览到该网页时，就会显示过渡效果。（4）在“过渡效果”列表中，选择显示网页或离开网页时要使用的过渡的效果

44、。其中有多种效果，可以进行选择。（5）在“周期（秒）文本框中，输入希望过渡效果持续的时间。（6）设置完成后，单击“确定”按钮。六、实例练习（一）、利用FrontPage2003建立一个如图所示的网页，并按照要求将此文件保存名为pc3.htm。要求：插入2行4列表格，表格水平居中，表格宽度为70%，高度为237像素；放图片的单元格设置为宽度27%，高度111像素，放文字的单元格设置为宽度23%，高度为111像素；单元格插入的图片为第一列：hl.jpg，h3.jpg，第二列为：h2.jpg，h4.jpg，表格的顶端标题文字为华文行楷，蓝色，36磅，加粗，居中对齐；插入一条水平线；第一列单元格中文字

45、这橄榄色，幼圆，14磅，加粗，倾斜；选择素材包内的图片文件b8.jif为网页背景；表格下方文字为蓝色，华文中宋，18磅，加粗，并链接到素材包中的catalog_c.htm。将编辑好的文件pc3.htm作为结果提交。（二）、利用FrontPage2003制作一个如图所示的网页，并按照要求将此文保存到考生文件夹内，名为indexcl.htm。要求：（1） 新建一个普通网页，并插入一个4×1（即4行1列）的表格。该表格的属性为：宽800个像素，高400个像素，对齐方式为水平居中；边框粗细为5个像素，颜色为FF99FF；单元格边距及单元格间距均为0个像素。（2） 第一行的高度为74个像素，并

46、将第一行拆分成两个单元格。其中，第一个单元格的宽度为182个像素。（3） 在第一行的第一个单元格中输入文本“轻松的旅程”，并对此文本添加动态HTML的效果。具体效果要求如下：当鼠标在此文本上悬停时，对上述文本显示红色破折号边框。（4） 在第一行的第二个单元格中插入flash动画，该flash动画的源文件是素材包中的31.swf。其中具体属性要求如下：高79个像素，宽534个像素；当浏览器不支持播放该动画时，在对应位置上显示的文字为“您的浏览器不支持该插件”。（5） 第二行的高度为19个像素，背景颜色为FF99FF。（6） 第三行的高度为216个像素，水平对齐方式为水平居中。在第三行插入一个av

47、i视频，该avi视频的源文件是素材包中的yuanshe.avi。具体属性如下：高度79个像素，宽度542个像素。（7） 第四行的高度为17，背景颜色为FF99FF。（三）、利用FrontPage2003制作网页要求：（1）插入表格及图片：插入一个5行1列的表格，在表格的倒数第1行插入图片（图片位置在13题素材包flower.gif）（2）导入文件：在表格第2行导入“精品文摘.htm”文件。（见13题素材包）（3）插入书签并设置超链接：为梁启超的婚恋、鲁迅的婚恋、郭沫若的婚恋、胡适的婚恋四个标题分别通过书签与四段正文建立超链接；并对每段的结尾处的“返回页首”与第一行建立超链接。链接效果为：单击四个标题可以显示相应的