网页制作20150526（1-17）.docx

教学要求与课时安排 学习目标 l 制作并完成题为“我们的班集体”的站点，在此过程中学会收集、加工、处理相关的信息。 l 学会在网页中输入文字，掌握网页中文字的编辑、排版方法；学会插入图片、动画和视频使用网页更加美观；学会运用表格为网页布局使网页的结构变得清晰明了。 l 能综合运用多种网页制作工具及文字、图片编辑软件设计、制作网页，培养自学能力和创新意识，提高综合素质。 l 结合所学的知识，创作展示个人网站、校园网页，学会信息胡组织、规划、传递和交流的方法。 教学内容及课时安排 第一节 网页制作基础知识约3课时第一节 网页制作基础知识约3课时第三节 网页的设计与规划 约3课时第四节 网页的装饰约3课时第五节 动态网页制作约3课时第六节 创建超链接约3课时第一节 网页知多少设计网页前的准备 教学目的： u 知识目标 理解网页的组成元素，理解网站、网页、主页、html等几个概念。了解常用网页制作工具。u 技能目标 掌握frontpage 2000的启动的退出方法。熟悉frontpage 2000的操作界面，了解各种视图的用途。u 情感目标 培养学生探究学习的能力和自主学习的能力，培养学生分工与协作的意识，增强学生的团体精神，增强学生自主获取信息的能力，培养学生亲身体验和擅于观察的能力，提升学生的信息素养与人文精神。 教学重点： 掌握frontpage的启动和退出方法；掌握站点和网页的建立方法。 教学难点： 能理解网站、网页、主页、html几个概念，几种网页视图的功能，通过创作作品与探究实践提升能力的培养过程。 教学方法： 讲授法、演示法、分组与个人练习法 教学环境： 网络教室、多媒体教室软件、大屏幕投影 教学过程： 一、引入新课 演示23个网站，通过优美的画面和精彩的内容激发学生的学习欲望，从而过渡到本节教学内容 二、介绍本节任务 分小组完成frontpage演示文稿的制作。有七个主题可供选择，七个主题分别是：我们的班集体、爱我中华、中国太空第一人、奥运之星、环境保护人人有责、璀璨明星、游戏地带、美丽的湖北我的家。每个小组选择一个专题在规定时间内完成网页的制作。演示作品并讲解制作过程。对作品进行评价。 三、知识传授 采用学生自主学习与探究实践相结合的方式落实知识点。具体知识点如下： u 设置幻灯片切换方式 选中幻灯片，单击菜单“幻灯片放映”“幻灯片切换”，然后在弹出的“幻灯片切换”对话框中依次设定效果、换页方式和声音。u 设置动画效果 选取某张幻灯片，单击菜单“幻灯片放映”“自定义动画”，然后在弹出的“自定义动画”对话框中进行相关设置。四、学生分组并创作作品 根据学生人数分若干小组。 确定小组的主题、小组长和小组成员。小组成员进一步分工，确定版面设计人员、素材采集员、制作人员、文字策划、演示讲解员等。 在规定时间内完成作品的创作。 五、教师巡视并指导 学生创作作品时，教师巡视，引导学生自主探究，并解决学生难以自行解决的问题。留意学生在创作过程中出现的普遍问题，并立即进行引导。强调学生要进行分工与协助，每个小组成员都要积极参与到作品创作中去。提醒学生注意控制时间，完美作品。 六、学生提交作品 略七、教学评价 1、 学生演示讲解作品，按评价方法进行学生自评。2、 学生互评。 3、教师点评 具体评价方法见教学网站相关内容。八、学生评价： 本课主要是让学生熟悉FRONTPAGE的操作环境，演示了一些简单动画案例，学生们兴趣浓厚，充满好奇，绝大部分学生学习学习积极主动。课程很受学生欢迎，达到预设效果，课程安排科学合理。九、教学反思:学生自身水平参差不齐，有的学生能很快熟悉FRONTPAGE界面的组合和功能的分布。因为，是第一节课，没有小任务安排。以后要安排个填空或问答的检测环节考核学生基本概念的掌握情况。第二节 网页的建立 【教学要求】 1、 熟悉网页中的各种元素及其制作方法，初步了解网页制作过程。2、 掌握网页文字处理、插入图片、动画、水平线以及设置背景的方法。3、 【教学重点与难点】在网页中插入图片、动画等方法4、 【教学课时】：2课时5、 【教学过程】：一、网页的制作 frontpage2000默认的视图方式是“网页”，因此，在下图的右侧标明“new_page_1.htm”的网页编辑窗口中，可以直接进行网页的编辑。虽然frontpage2000 具有“所见即所得”的功能，但网页中的某些效果还必须在浏览器中才能看出。 例2-1 在“huanbao”网站中建立第一个网页，页面如图所示，取名为“welcome.htm”。 操作步骤： 1 打开站点 启动frontpage2000，单击菜单“文件（f）”菜单中的“打开站点（w）”命令，在弹出的“打开站点”对话框中选定名为“huanbao”的站点，再单击“打开（o）”按钮。 2 语言设置 在网页编辑窗口中的空白处右击，单击快捷菜单中的“网页属性”命令，打开“网页属性”对话框，单击“语言”标签，将语言代码定义为“简体中文（gb2312）”，如图所示，最后单击“确定”按钮。 3 文字编辑 文字编辑是制作网页最基本的操作。在网页编辑窗口中，可以像在word中一样直接输入文字，进行编辑和排版，不同之处在于： （1）字体 在网页中使用各种不同的字体，虽然会使网页看起来更加美观，但是如果访问者的电脑中没有安装相应的字体，那么浏览器只能用系统默认的字体来显示，通常默认的字体是宋体，这样不但无法看出设计者预期的效果，可能还会因为字体不兼容而造成乱码，使访问者无法正常浏览页面。所以，在制作网页时，应尽量使用常规字体，如果某些地方（如页面大标题）一定要用特殊的字体进行美化，可以把这些文字做成图片，以保证正常浏览。 （2）字号 在frontpage中，字号从 1号到7号，加上普通型共有8种，最大的字号是7号字（36磅），最小的字号是1号字（8磅），默认的是普通型。当然还可以单击格式工具栏的增大字号按钮 或减小字号 按钮来改变字的大小。 操作步骤： 选定标题“绿色家园”，进行如下设置：字体为黑体，字号为7号字，颜色为绿色，居中排列。 选定正文，并设置如下：采用默认的字体和字号，颜色为黑色，居中排列。 4 插入图片 插入图片可使网页丰富多彩。在网页中可以使用的图片类型有多种，但最常用的是gif和jpg格式的图片，因为这两种图片的文件长度较小，有利于提高网页的浏览速度。所以，插入其他格式的图片后，在页面存储时，系统会自动将图片格式转换成gif或jpg格式。 信息卡：gif和jpg gif和jpg都属于压缩的图形格式。 gif图形采用非失真的压缩方式，最多只能显示256种颜色。在图形的压缩过程中，不改变图片的清晰度，而减少色彩的丰富程度，因此，当色彩超过256色的图片转换成gif格式后，颜色将会发生改变。 jpeg图形采用失真式压缩方式，在图形的压缩过程中，不改变图片的色彩，而改变图片的清晰度，因此，压缩后的图形虽然会有失真，但它却可以支持24位真彩色。 所以，一些高反差、色彩单调的图片，如商标、卡通等，宜采用gif格式，而需要显示具有细微色彩变化的图片，如照片、色彩丰富的电子美术作品等，则宜采用jpg格式。 插入图片的方法是：将插入点移到要插入图片的位置，依次单击“插入（i）”菜单中的“图片（p）”“来自文件（f）”命令，打开“图片”对话框，如图所示。 如果要插入的图片已经保存在当前的网站中，可以直接在图的列表框中选取，然后单击“确定”按钮。否则，单击“浏览”按钮 ，从“选择文件”对话框中选择所需图片，单击“确定”按钮，将图片插入到网页中。 在“图片”对话框中，还可以单击“剪贴画（c）”按钮，插入office剪贴画；单击“扫描（s）”按钮，插入从扫描仪获取的图片。 操作步骤： 依次单击“插入（i）”菜单中的“图片（p）”“来自文件（f）”命令，打开“图片”对话框，单击“浏览”按钮，从弹出的“选择文件”对话框中选择所需图片“zhuzi.gif”，单击“确定”按钮，插入图片。 拖动图片到页面左侧适当位置。 5 插入动画 在网页制作中，经常使用一些小动画，使页面生动活泼，这些小动画文件用专门的工具制作，也以gif作为文件的扩展名。 操作步骤： 依次单击“插入（i）” 菜单中的“图片（p）”“来自文件（f）”命令，打开“图片”对话框，单击“浏览”按钮，从“选择文件”对话框中选择所需图片“diqiu1.gif”，单击“确定”按钮，插入动画。 拖动动画到标题下方适当位置。 6 插入水平线 水平线是贯穿网页宽度的细灰条，用来分隔文本或加着重符。插入水平线可以帮助我们将各类相关信息组合到一起，但同一个页面中水平线不宜过多。 插入水平线的方法是：先将插入点移到目标位置，再单击“插入（i）”、菜单中的“水平线（l）”命令。 如果要设置水平线的外观，可以双击水平线，打开“水平线属性”对话框，如图所示。 调整水平线的宽度、高度、对齐方式以及颜色，就可以改变它的外观。 操作步骤： 将插入点移到小动画前。 单击“插入（i）” 菜单中的“水平线（l）”命令。 双击水平线，在“水平线属性”对话框中，将宽度设置为50%，其余参数采用默认值，单击“确定”按钮。 7 设置背景 大多数网页都应用背景图案来为网页增色，这些背景可以是一幅大图片，也可以是若干个小图片的重复使用（即“平铺”）。选择背景图案时，要注意与文本相协调，而且背景的应用不要妨碍文本的阅读。另外，背景图案越小，网页的下载速度就越快。 设置背景的操作步骤： 单击“格式（o）”菜单中的“背景（k）”命令，出现“页面属性”对话框，且“背景”标签已被打开，如图所示。 单击“浏览（b）”按钮，在“选择文件”对话框中浏览文件夹内容，从中搜索到所需背景图案后，单击“确定”按钮，关闭“选择文件”对话框，再单击“确定”按钮，关闭“页面属性”对话框，背景图案即可插入页面。 页面制作完成，可以单击“预览”标签，观察一下效果。 二、网页的保存 单击“文件（f）”菜单中的“保存文件（s）”命令，弹出“另存为”对话框，如图所示。 在“文件名（n）”列表框中输入“welcome”后，单击“保存（s）”按钮。如果要保存的页面含有图片、动画、声音等元素，frontpage还会继续询问是否保存这些嵌入的文件，如图所示。 此时最好将这些文件保存起来，以保持它们在网页中的位置，否则，当网站发生迁移时，可能因找不到这些图片、动画等文件而无法显示。另外，最好将它们保存到images文件夹中，使网站保持清洁，便于管理和维护。 信息卡：分辨率与屏幕大小 制作网页时，要充分考虑大多数人的需求，才能使你的网页看起来更完美。比如大多数人使用15寸的显示器，分辨率设置为800600，那么制作网页时也应以此为标准，否则，如果你在1024768的分辨率下制作网页，那么大多数人在浏览网页时，只能看到网页的一部分，要拖动滑块才能看全你的网页，这样反而使网页的整体效果变差。 【学生操作练习 教师辅导】 【小结】 1、 网页的扩展名2、 网页中图片的插入 3、 水平线如何插入，背景的设置 【思考】： 1 在设计网页过程中，定义字体时要注意哪些问题？ 2 为什么在网页中通常都使用gif或jpg格式的图片文件？ 3 设置网页的背景时，能否使用较大的图片？有什么缺点？ 【教学反思】 学生在操作图片时，发现几个问题： 1、 图片插入时保存的位置，名称 2、 保存图片如果不改名，以同样的名称会覆盖上一个图片 3、 图片与背景的融合问题 4、 图片的定位问题 第三节 网页装饰 【教学要求】 1、熟悉frontpage2000的图片处理功能。2、掌握图文布局的方法。3、学会“设置透明颜色”按钮的用法，并能在网页制作过程中灵活运用。4、学会使用“自动缩略图”技巧来加速网页的下载。【教学重点与难点】 在网页中插入图片、动画等方法【教学课时】：2课时【导入】： 在网页设计中，大多追求图文并茂的效果，但有时因为图片的大小与文字不一致，使网页看起来不协调，此时可以改变图文的位置关系，使网页看起来更美观。【教学过程】：一 、图文的布局 将指针指向图片并右击，单击快捷菜单中的“图片属性”命令，弹出“图片属性”对话框，单击“外观”标签，即可改变图片和文字的布局，如图所示。 在“对齐方式”列表框中，列出了十种图文对齐方式，可以根据需要，选择其中的一种。 例 在“name”网站中，建立一个新网页，导入现成的文本文件questions.txt，在其中插入两幅图片，设置图文并列的方式，其中图片questions.gif采用左对齐方式，与各小标题并列起来；图片water.gif采用右对齐方式，放置在“水污染”标题下，如图所示，将网页保存为questions.htm。 操作步骤： 启动frontpage2000，打开“name”的站点。 单击常用工具栏“新建”按钮，打开一个新的页面。 单击“插入（i）”菜单中的“文件（f）”命令，弹出“选择文件”对话框，从中选择所需的questions.txt文件，单击“确定”按钮，在弹出的“转换文本”对话框中，选择“以html方式处理”，再单击“确定”按钮。 依次单击“插入（i）” 菜单中的“图片（p）”“来自文件（f）”命令，插入图片questions.gif和water.gif。 右击图片questions.gif，单击快捷菜单中的“图片属性”命令，打开“图片属性”对话框，单击“外观”标签，单击“对齐方式”右边的向下箭头，选择“左对齐”。 用同样的方法将图片water.gif定义为右对齐的方式，适当调整两幅图片的位置。 学生操作，教师辅导 二、 图片的定位与图层的形成 在frontpage 2000中，对图片与文字同等处理，所以图片只能放置在文字之间，且只能在文字和图片之间进行移动。如果页面上没有任何文字，那么图片只能放置在第一行首位，使用直接拖动图片的方法，无法移动图片的位置。 如果要将图片放置在页面中的任意位置，可以采用绝对定位的方法。首先打开“图片”工具栏，方法是：依次单击“查看（v）”菜单中的“工具栏（t）”“图片（p）”命令，即可打开图片工具栏，如图所示。 选定图片后，单击图片工具栏中“绝对定位”按钮，然后拖动图片至目标位置。 在网页中可以插入若干图片，并且这些图片可以重叠起来，形成特殊效果。在系统默认的情况下，后插入的图片将重叠在已有图片之上（即“顶层”），这样就形成了图层。根据需要，可以通过图片工具栏“上移一层”“下移一层”按钮来改变图片的叠放顺序。 三、图片的透明处理 当网页设置了背景后，为了使网页更加美观，所插入的图片背景最好设置为透明，使网页背景能够透过来。如果要将图片的背景变为透明，只要单击图片工具栏中“设置透明颜色”按钮，然后将指针指向图片中需要变成透明的颜色并单击，此时图片中所有该种颜色全部变为透明。注意，只有gif格式的图片才能设置透明背景。 例 将questions.gif图片背景中的白色变为透明。 操作步骤： 单击图片工具栏的“设置透明颜色”按钮，将指针指向该图片中白色背景处单击，即可产生背景透明的效果。 四、图片的自动缩略 设计网页时，为了加快网页的下载速度，可以使用自动缩略图功能，它的作用是将图片缩小，当访问者浏览网页时，看到的是小图，如果要进一步细看此图片，单击一下小图，就可以看到原图大小的图片了。 自动缩略图的制作方法是：先选定图片，然后单击图片工具栏“自动缩略图”按钮即可。当然，还可以进一步定义缩略图的外观，方法是：单击“工具（t）” 菜单中的“网页选项（a）”命令，打开如图所示的“网页选项”对话框，单击“自动缩略图”标签，修改其中的参数，即可改变图片的外观。 例5 将questions.htm网页中water.gif图片制作成自动缩略图。 操作步骤： 单击water.gif图片，单击图片工具栏“自动缩略图”按钮。 单击 “工具（t）” 菜单中的“网页选项（a）”命令，打开“网页选项”对话框，单击“自动缩略图”标签，再选中“边缘凹凸效果（v）”命令，单击“确定”按钮即可。效果如图所示。 信息卡：套用主题 制作一个具有专业水平的网站，不仅要有充实的内容，还应该有精美的外观和统一的风格，这样才能吸引访问者，但要达到以上要求并不容易。frontpage 的“主题”功能简化了网页制作人员的工作，一旦在网站套用了主题，包括背景图案、项目符号、网页横幅、导航按钮等涉及网站外观的元素，全部按照统一的格调搭配起来，让大家轻松拥有一个舒心的网站。 实践与探索：将本网页套用一个你喜欢的主题，观察标题、水平线的变化。 【学生操作练习 教师辅导】 【小结】 图片格式的处理；自动缩略图【思考】 1、 图片可以放置在网页中的任意位置吗？应如何操作？ 2、使用“自动缩略图”有什么好处？ 【教学反思】 学生在操作这一内容时,图片格式的设置不太会灵活使用,小特效的使用学生很有兴趣 第四节 网页表格 【教学要求】 1、理解表格在网页制作中的特殊用途。2、掌握绘制表格的方法并能根据实际需要设计表格。3、掌握设置表格的边框、背景、大小的方法。【教学重点与难点】 理解表格在网页制作中的特殊用途。【教学课时】：4课时【导入】： 在制作网页时经常遇到定位不准问题，如何定位准确，我们今天向大家介绍这种方法，用表格来定位【教学过程】： 一、表格的建立 例1 在“huanbao”网站中建立如图所示的网页，取名为index.htm。 操作步骤： 单击常用工具栏“新建”按钮，新建一个空页面。 单击“表格（a）” 菜单中的“手绘表格（b）”命令，打开表格工具栏，此时“手绘表格”按钮被置亮。 拖动指针画出表格的外框，再按照图中所示的虚线，添加表格线，画出整个表格。 分别在各单元格中填充内容。包括输入文字、插入图形，调整文字的字体、字号、颜色和对齐方式，使文字排列如图所示。因为“环保问题”“环保知识”“环保事件”“环保世纪行”本身又是一个规则表格，所以要在大表格的单元格中再插入一个小表格。 将光标移到“环保问题”所在的单元格，单击常用工具栏中“插入表格”按钮，并向右下方拖动，拖出一个“71”表格，在此小表格中分别输入相应文字，然后用同样的方法制作其余的三个表格。 二、表格属性的设置 例2 将表格边框设置为0，并指定表格的宽度为800像素。 操作步骤： 依次单击“表格（a）”菜单中的“属性（r）”“表格（t）”命令，打开“表格属性”对话框，如图所示。 将“边框粗细”设置为0，指定宽度为800像素，其余采用默认值，单击“确定”按钮，表格设置完成。 三、单元格属性的设置 例3 设置如图所示的单元格背景。 操作步骤： 选定“环保问题”所在的单元格，单击“表格（a）” 菜单中的“属性（r）”“单元格（c）”命令，打开“单元格属性”对话框，如图所示。 选中“使用背景图片”命令，并选定相应的图片文件，单击“确定”按钮。 选定“环保问题”下面六个单元格，打开“单元格属性”对话框，将背景设置为浅蓝色。 用同样的方法定义其余单元格。 单击“预览”按钮，观察网页在浏览器中的效果，适当拖动表格的边框，使网页的浏览效果趋于完美。 最后将网页以“index.htm” 为文件名保存起来。【学生操作练习 教师辅导】 【小结】 表格的制作设置 【思考】： 1、 表格的制作方法有几种？ 2、当表格的边框设置为0时，表格是否存在？ 【教学反思】 在表格设置时,表格的合并与控制拆分,经常会遇到一些问题,还不够熟练,单元格背景设置与表格背景设置有些学生较会混淆不清。 第五节 动态网页制作 【教学要求】 (1) 掌握悬停按钮的制作方法。(2) 掌握横幅广告管理器的使用方法，能够制作幻灯。(3) 掌握滚动字幕的制作方法。(4) 学会计数器的设定方法。(5) 学会添加背景音乐。【教学重点与难点】 掌握悬停按钮、横幅广告管理器的制作方法。【教学课时】：1课时【导入】：同学们在许多网站都看到过几张图片以不同的方式交替切换的吧，那么它们是怎么制作出来的呢？ 它叫横幅广告，它们的制作并不复杂，利用frontpage2000中的横幅广告管理器(banner and manager)，就可以在页面上使多个标题轮流显示，当然，横幅广告管理器不仅可以制作出轮换的广告，还可以制作出轮换的图像，甚至在图形变换时使用特殊效果，产生一个幻灯片系列。下面我们就来教同学们如何来制作： 一、横幅广告管理器 例 在huanbao网站中，新建一个名为“century.htm”的框架页面，在其中制作横幅广告，将两幅图片轮流显示在页面上。 操作步骤： 打开huanbao网站，依次单击“文件（f）”菜单中的“新建（n）”“网页（p）”命令，在弹出的“新建”对话框中单击“框架网页”标签，选择“标题”式框架，建立一个框架页面。 右击上框，单击快捷菜单中的“框架属性”命令，打开“框架属性”对话框，单击“框架网页”按钮，不选择“显示边框”复选框，单击“确定”按钮两次，关闭对话框。 在上框中，单击“建立新网页”按钮，依次单击“插入（i）”菜单中的“组件（o）”“横幅广告管理器（n）”命令，打开“横幅广告管理器”对话框，如图所示。 单击“添加”按钮，依次将两幅图片添加到“显示图片”编辑框。 设定宽度为380像素，高度为90像素。如果所添加的图片大小不一，那么，要确保此处输入的是所有图片中最大的一幅图片的尺寸，其余图片将在这个区域中居中对齐。 设定变化效果为“分解”，每幅图片的显示时间为“5秒”，再单击“确定”按钮。 在上网浏览时，还会见到这种一种效果：将鼠标放置按钮上，按钮就会发光，或者突出显示，那么这种效果又是怎么做的呢？下面我们就来教同学们： 二、悬停按钮 所谓悬停按钮(hover button)，是指当指针指向某按钮时，该按钮改变颜色和形状，甚至发出声音。 例 在“century.htm”网页的下框中创建三个悬停按钮，按钮文字分别为“环保组织”“环保行动”“返回主页”。 操作步骤： 依次单击“插入（i）”菜单中的“组件（o）”“悬停按钮（h）”命令，打开“悬停按钮属性”对话框，如图所示。 在“按钮文本（u）：”文本框中输入“环保组织”，单击“字体（f）”按钮，设置好字体、字号、字型和颜色后，单击“确定”按钮。 在“链接到（l）：”文本框中输入目标网页文件名organization.htm。 设置按钮颜色为蓝色，背景颜色为紫色。 单击“效果”右侧的向下箭头，打开下拉列表，从中选择效果“发光”，如果想在该效果起作用时，使按钮的颜色发生改变，可以打开“效果颜色”下拉列表，选择一种颜色如“绿色”。 设置按钮的高度和宽度。如果使用图片作为按钮，要保证此处的高度和宽度是图片的尺寸。 为了自定义按钮的其它效果，可以单击“自定义（n）”按钮，在“定制”对话框中，选择播放声音（单击时发出的声音和指针悬停时发出的声音）或选择自定义图片（按钮本身的图像和指针悬停在按钮上时显示的图像）。 用同样的方法定义其余两个按钮。 有没有见到过这样一种效果：文字在屏幕上跑来跑去，很有趣，那么这种叫滚动字幕的效果，下面我们来瞧瞧这种效果怎么制作： 三、滚动字幕 在页面中创建水平滚动的文字字幕可以使静止的页面活动起来。 操作步骤： 将插入点移到将要插入滚动字幕(marquee)的位置，依次单击“插入（i）” 菜单中的“组件（o）”“字幕（m）”命令，打开“字幕属性”对话框，如图所示。 在“文本（t）”框中输入滚动字幕内容，选择文字的移动方向。 调整速度。其中“延迟”用来设置字幕每次移动的时间间隔，该参数越大，字幕移动越慢；“数量”用来定义字幕每次移动的距离，该参数越大，字幕移动越快。 定义“表现方式”。其中“滚动条（l）”可以让文字沿设置的方向，从字幕区域的一边出现，到另一边消失。“幻灯片（i）”可以让文字沿设置的方向，从字幕区域的一边出现，当文字到达字幕区域的另一边时停止滚动并保持在屏幕上。“交替（a）” 可以让文字在字幕区域来回移动。 设置字幕区域的大小。选中“宽度”和“高度”复选框，并指定像素值或百分比。 例 在主页的标题图片下面插入滚动字幕，文本内容为“让地球更绿，让我们的家园更美好”。 操作步骤： 将插入点移到标题图片下，依次单击“插入（i）” 菜单中的“组件（o）”“字幕（m）”命令，打开“字幕属性”对话框。 在“文本（t）”框中输入字幕内容。 方向设置为“左”，移动速度采用默认值，“表现方式”设置为“滚动条”，对“大小”进行如下设置：指定宽度为300像素，高度为16像素，其余采用默认值。最后单击“确定”按钮。 四、动态html效果 动态 html (dynamic html) 是 microsoft 对 html 4.0 版的增强版，它可以创建出诸如逐字移出网页的文本、当指针移到文字上时文字变色、网页间旋转变换等各种动态效果。要创建动态网页效果，只要单击“格式（o）”菜单中的“动态html效果（e）”命令，在“动态html效果”工具栏中选择适当效果。例 在century.htm网页的下框中输入有关地球日的资料，将其定义为在网页加载时“从右下部”“飞入”页面的动态效果。操作步骤： 将插入点移到下面的框架中，并输入文字。 选定上述文字，然后单击“格式（o）”菜单中的“动态html效果（e）”命令，打开“动态html效果”工具栏。 单击“开启”右侧的下拉箭头，选择“网页加载”。 单击“应用”右侧的下拉箭头，选择“飞入”“从右下角”。五、添加背景音乐 利用frontpage 2000可以在页面中直接插入音乐文件作为背景音乐，以便在浏览页面的同时，欣赏背景音乐；也可以在页面上插入一个音频组件，由访问者自己决定是否播放音乐。在插入音乐文件之前，首先要选择合适的音乐。一般而言，声音文件的格式（扩展名）有wav、ra、mp3、midi等，为了提高网页的下载速度，应选择较小的文件格式，如ra、midi等。 操作步骤： 单击“文件（f）” 菜单中的“属性（i）”命令，打开“网页属性”对话框。 单击“常规”标签，再单击其中“背景音乐”右侧的“浏览”按钮，选择一个合适的音乐文件。 可以单击“一直循环”左侧的复选框来连续播放，也可以在“循环”右侧的文本框中输入数字，指定循环播放的次数。 单击“确定”按钮。 例5 在index.htm中设定背景音乐“抒情.mid”。 操作步骤： 打开index.htm网页，单击“文件（f）” 菜单中的“属性（i）”命令，打开“网页属性”对话框。 单击“常规”标签，再单击“浏览”按钮，搜索到所需的音乐文件“抒情.mid”后，单击“确定”按钮，退出“浏览”对话框。 单击“一直循环”左侧的复选框，再单击“确定”按钮，关闭“网页属性”对话框。 保存网页,取名为century.htm，效果如图所示。 实践与探索：在网页中加入一个视频插件，用来播放一个视频文件。 【小结】： 插入组件类包含有哪些动态效果？各自的制作要领导是什么？【练习】： 1、 如何制作横幅广告？制作时可以进行超级链接吗？ 2、 如何制作悬停按钮？在制作时可以设置声音吗？ 3、 如何制作滚动字幕？图片可以滚动吗？ 4、 如何制作计数器？计数器的效果是不可见的吗？ 5、 动态html效果在所有的浏览器中都可以再现吗？为什么？ 学生评价： 本课主要是让学生熟悉frontpang的操作环境，演示了一些简单动画案例，学生们兴趣浓厚，充满好奇，绝大部分学生学习学习积极主动。课程很受学生欢迎，达到预设效果，课程安排科学合理。教学反思:学生自身水平参差不齐，有的学生能很快熟悉frontpang界面的组合和功能的分布。将学生安排成几个学校小组，相互帮助，从上传上来的课堂作业来看，学生仅仅应付作业的完成，说明我今后上课过程中要多引导。第六节 创建超链接 【教学要求】 1、解超链接的概念，了解链接的种类。 2、学会规划网站的各个链接，并正确完成。3、掌握创建超链接的方法。【教学重点与难点】 掌握一般链接、框架链接、书签式链接、信箱链接、图像映射的制作方法。【教学课时】：2课时【导入】：一、教学要求、概念：超链接一个网站由若干个单独的网页文件组成，这些单独的网页由超链接(hyperlink)结合起来，形成一个紧密联系的整体。超链接可以定义在文字中，也可以定义在图片上，甚至是图片中的局部位置上。将指针指向含有链接的文本或图形，指针会变成手形。在建立链接时，应先选定文字或图形作为链接源，然后单击 “插入（i）” 菜单中的“超链接（h）”命令，或者单击常用工具栏“超链接”按钮，打开如图所示的“创建超链接”对话框。 在预览窗口单击目标文件名，或者在“url（u）：”列表框中输入要链接的网页文件名，然后单击“确定”按钮，即可建立链接。建立了链接的文字将以对比色并带下划线显示，建立了链接的图形被加框显示（可以自行设置其他样式）。 一、同一页面内的链接。 1无书签式链接 在同一页面内建立链接，如果没有定义书签，链接之后的显示位置从页面的顶端开始。 例 打开huanbao网站中的questions.htm网页，对其中的“返回页首”图形建立链接，链接到同页页首。 操作步骤： 打开questions.htm 文件，单击“返回页首”图形。 单击“插入（i）” 菜单中的“超链接（h）”命令，弹出“创建超链接”对话框，在预览窗口单击文件名“questions.htm”，再单击“确定”。 用同样方法将其余的“返回页首”图形链接到questions.htm网页。 学生练习，将其它全部链接，教师辅导 2建立书签式链接 书签(bookmark)就是网页中被标记的位置或被标记的选定文本，可以作为超链接的目的地。 通常，一个大型网站内部的超链接无形中便建立了许多文件，给网站的管理带来不便。为了减少网页的数目，可以在网页内部建立书签式链接，比如先将网页内容的大纲列在网页的最前端，使浏览者首先看到网页内容的要点，然后通过书签式链接，将页面定位到每一个标题所包含的具体内容处。 若要在页面内部建立书签式链接，必须先创建书签。 例 对questions.htm网页中的各小标题分别建立书签式链接。 操作步骤： 选定网页具体内容部分的标题“水污染”，单击“插入（i）” 菜单中的“书签（b）”命令，打开如图所示的“书签”对话框。 单击“确定”按钮或者将书签名称改成其它名字，再单击“确定”按钮。 用同样的方法，将其余的标题定义为书签。 选定网页顶端的标题“水污染”三字。 单击“插入（i）”菜单中的“超链接（h）”命令，在弹出的“超链接”对话框中，单击“书签”下拉列表框右侧的向下箭头，选择其中的“水污染”书签，单击“确定”按钮。 用同样的方法将其余标题链接到各自的书签处即可。 利用书签既可以在同一页面中建立链接，也可以在不同页面之间建立链接。 学生练习，将其它全部链接，教师辅导 二、不同页面之间的链接 1 链接到另一页面： 例 将主页导航条中的每一个小标题链接到相应的网页。 操作步骤： 选定“环保知识”四字，单击常用工具栏“超链接”按钮，打开“创建超链接”对话框。 在对话框的预览框中单击“knowledge.htm”文件名，然后单击“确定”按钮。 用同样的方法，将“环保问题”链接到questions.htm，“环保事件”链接到event.htm，“环保世纪行”链接到c