第5章2节

1第5章框架网页课题：框架网页间的链接（5.2）教学分析与准备1．教学任务熟练掌握在框架网页中插入超链接的方法了解目标框架的含义掌握目标框架的设置方法2.教学重点在框架网页中插入超链接的方法3.教学难点目标框架的设置方法4.教学策略任务驱动学习和协作学习、探究学习相结合5.教学环境多媒体网络教室6．建议课时数4课时三、学习过程教学环节及手段教学内容备注组织课堂：导入新课：让学生先用以前的方法制作链接，看浏览结果与希望的结果有何不同。讲述新课：讲授法PPT演示演示制作过程师生问好整顿课堂纪律，检查教学用具，准备进入教学。第5章框架网页5.2框架网页间的链接5.2.1创建到其它框架的超链接【功能简介】在框架网页中，单击某个框架内网页上的超链接时，被超链接所指定的网页通常会在另一个框架中打开，这个框架称为目标框架。利用FrontPage的框架网页模板创建的框架网页中，有的框架已被设置了缺省的目标框架。【操作步骤】STEP1打开要修改的框架网页，在网页视图模式下，打开“设计”选项卡，然后单击要插入超链接的网页。STEP2选择要作为超链接的文本或图片，再单击“常用”工具栏中的“超链接”按钮，弹出“插结合学生平时经常浏览的网页讲解。2演示制作过程入超链接”对话框。STEP3在“插入超链接”对话框内，选择要在其它框架中显示的网页，选择目标框架，最后单击“确定”按钮。例5.2在例5.1中，我们曾利用FrontPage的“目录和横幅”框架网页模板，在站点5-1中创建了一个名为index.htm的框架网页。现在，我们要继续在这个框架网页中，创建目录框架到主框架的超链接。具体要求如下：在站点中5-1中新建一个名为lsbq.htm的网页。将目录框架中的小标题“历史变迁”设置为超链接，单击该超链接后，其链接的目标网页lsbq.htm会在主框架中显示出来。在目录框架中添加小标题文字“成都概貌”，并将它设置为超链接。单击该超链接后，其链接的目标网页cdgm.htm在主框架中显示。具体操作：1．打开在例5.1中创建的站点5-1。2．新建一个网页，在其中输入有关成都历史的文字，并插入相关图片。将该网页保存为lsbq.htm。3．打开网页index.htm。4．在左边框架（目录框架）中选择小标题文字“历史变迁”，并单击“常用”工具栏中的“超链接”按钮，弹出“插入超链接”对话框。注意单击“插入超链接”对话框右方的“目标框架”按钮，显示的“网页默认值（main）”指缺省的目标框架为主框架（主框架的默认名称为main）。因此，这里我们可以不必重新设置目标框架。5．在“插入超链接”对话框中选择网页文件lsbq.htm，然后单击“确定”按钮。6．在目标框架的“历史变迁”之前插入一个空行，并在空行中输入小标题“成都概貌”。7．选定“成都概貌”，用与前面相同的方法，插入超链接，链接的目标网页为cdgm.htm。8．保存网页后，单击“预览”选项卡测试超链接的效果。单击目录框架中的超链接“历史变迁”之后，网页lsbq.htm即在主框架中显示了出来。再单击超链3课堂练习提醒学生注意学习方法和网站制作规范。讲授法PPT演示演示制作过程接“成都概貌”，则主框架中又显示出网页cdgm.htm。学生根据例题进行练习。【注意事项】1．只有在框架网页中才能创建链接到其它框架的超链接。2．对于一个不是框架网页的普通网页，可以在其中创建指向整个框架网页的超链接。3．使用框架网页模板创建的框架网页，并不是在其中任何一个框架内创建的超链接的缺省目标框架都是该框架以外的其它框架。在后面的5.2.2节中，将介绍重新设置目标框架的方法。【使用技巧】1．对于在框架网页中创建的超链接，同样可以设置其字体、大小和颜色等格式，也可以设置超链接的动态效果。2．在图5-14中，“目标框架”栏中显示的框架名称main，是主框架的缺省名称。利用框架网页模板创建的框架网页，其中的每一个框架都有缺省的名称。为了让“插入超链接”对话框的“目标框架”栏中显示出易于识别的框架名称，你可以事先在“框架属性”对话框中为每个框架重新命名。3．在例5.2中建立目录框架到主框架的超链接时，使用了缺省的目标框架。如果希望单击超链接“历史变迁”之后，目标网页在主框架以外的其它框架中显示出来，则应更改目标框架。具体做法见5.2.2节。5.2.2修改目标框架【功能简介】在框架网页中插入超链接时，常常需要修改目标框架。例如，在图5-15中，要将目录框架中的小标题“主页”设置为超链接，单击该超链接后，使目标网页在整个浏览器窗口中打开，而不是仅在右边的主框架中显示，这就需要重新设置超链接的目标框架。【操作步骤】STEP1打开要修改的框架网页。学生做好了给予鼓励，出现问题及时给予其提示4演示制作过程STEP2选择要作为超链接的文字或图片，单击“常用”工具栏中的“超链接”按钮，打开“插入超链接”对话框。或是选择已创建的超链接，再单击工具栏中的“超链接”按钮，打开“编辑超链接”对话框。STEP3在“插入超链接”或“编辑超链接”对话框中，单击“目标框架”按钮，弹出图5-16所示的“目标框架”对话框。STEP4在“目标框架”对话框中，“当前框架网页”区域内显示出框架网页的框架结构预览图，可以在该预览图中单击选定一个框架，那么在STEP2中选择的超链接所指向的目标网页就将显示在这个框架中。注意观察“目标框架”对话框中的“公用的目标区”。如果希望目标网页在本超链接所在的框架中显示，则可选择“公用的目标区”中的“相同框架”；如果希望目标网页跳出框架网页，而在整个浏览器窗口中显示出来，则可以选择“公用的目标区”中的“整页”；如果希望目标网页独立显示在另一个新打开的浏览器窗口中，则可选择“公用的目标区”中的“新建窗口”。例5.3打开前面创建的站点5-1，在框架网页index.htm中创建整个框架网页到其它网页的超链接。具体要求如下：在站点5-1中新建一个名为home.htm的网页，该网页的末尾包括文字“更多的…”。将home.htm网页末尾的文字“更多的…”设置为超链接，其目标网页为index.htm。将网页index.htm内目录框架中的小标题“主页”设置为超链接，单击该超链接后，使目标网页home.htm在整个浏览器窗口中打开。具体操作：1．打开站点5-1，新建一个名为home.htm的网页，在其中输入文字，并插入相关图片。将文字“更多的…”作为该网页的最后一行。2．在home.htm网页中，把文字“更多的…”设置为超链接，其目标网页为index.htm。（1）选择文字“更多的…”，单击“常用”工具5课堂练习演示制作过程栏中的“超链接”按钮，弹出“插入超链接”对话框。（2）在“插入超链接”对话框中，选择框架网页文件index.htm，最后单击“确定”按钮。3．保存home.htm网页。4．打开框架网页index.htm。将目录框架中的小标题“主页”设置为链接到网页home.htm的超链接。（1）选择目录框架中的文字“主页”，单击“常用”工具栏中的“超链接”按钮，弹出“插入超链接”对话框。（2）在“插入超链接”对话框中选择网页文件home.htm。5．修改目标框架。（1）在“插入超链接”对话框中，单击右方“目标框架”按钮，弹出“目标框架”对话框。（2）在“目标框架”对话框的“公用的目标区”中，选择“整页”，最后单击“确定”按钮。6．保存文件index.htm后，单击“常用”工具栏中的按钮在浏览器中预览效果。可以看出，单击index.htm左边目录框架内的小标题“主页”后，目标网页home.htm就会在整个浏览器窗口中显示出来。再单击home.htm网页末尾的“更多的…”，则又会链接到框架网页index.htm。学生根据例题进行练习。下面继续看一个目标框架为超链接自身所在的框架的例子。例5.4利用前面例题中的框架网页index.htm，在主框架中插入超链接“下一页”，如图5-17所示。单击“下一页”后，链接的目标网页仍在主框架中显示，如图5-18所示。具体要求如下：在站点5-1中新建一个名为cdgm2.htm的网页，网页的末尾包含文字“上一页”。将文字“上一页”设置为超链接，链接的目标网页为cdgm.htm，目标框架为主框架。在网页cdgm.htm的末尾添加文字“下一页”，并将其设置为超链接，链接的目标网页为cdgm2.htm，目标框架为主框架。学生做好了给予鼓励，出现问题及时给予其提示6提醒学生注意学习方法和网站制作规范。具体操作：1．打开站点5-1，在其中新建一个名为cdgm2.htm的网页，在其中输入文字，并插入相关图片。将文字“上一页”作为该网页的最后一行。2．用前面介绍的方法将“上一页”设置为超链接，链接的目标网页为cdgm.htm。3．打开框架网页index.htm。在主框架内的cdgm.htm网页末尾，输入文字“下一页”。4．选择主框架中的“下一页”，然后单击“常用”工具栏中的“超链接”按钮，弹出“插入超链接”对话框，在对话框中选择网页文件cdgm2.htm。5．在“插入超链接”对话框中，单击右方的“目标框架”按钮，弹出“目标框架”对话框。在“当前框架网页”区域中，单击选择主框架，注意，这时在“目标设置”栏中会自动显示出所选框架的名称main，如图5-19所示。最后单击“确定”按钮。6．保存文件后，单击“常用”工具栏中的按钮在浏览器中预览框架网页index.htm效果。在浏览器中单击主框架末尾的超链接“下一页”后，第二页就会在主框架中显示出来，再继续单击第二页末尾的超链接“上一页”，则主框架中又显示出第一页的内容。学生根据例题进行练习。【注意事项】1．如果某个框架内的超链接没有任何缺省的目标框架（这时“插入超链接”对话框的“目标框架”栏中会显示“网页默认值（无）”），那么超链接指定的目标网页将会自动在该超链接所在的框架内打开。2．虽然超链接的目标框架可以随意设置和修改，但在设计网页时仍应考虑一些常规做法和网页浏览者的使用习惯。例如，采用“目录和横幅”结构的框架网页，目录框架通常用于显示超链接，横幅框架通常用于显示网页的主题，而网页的具体内容则显示在主框架中。当然，你可以通过修改目标框架做到让网页的主要内容在目录框架或横幅框架中显示出来，但这种做法是不合常规的，而且也有损网页的整体效果。【使用技巧】学生做好了给予鼓励，出现问题及时给予其提示7课堂小结可以指定所选择的目标框架作为网页上超链接的缺省目标框架，方法是在“目标框架”对话框中，选择“设置为网页的默认值”复选框。这样，当前网页上被超链接指定的目标网页都将自动在指定的目标框架内打开。总结教学目标。鼓励学生总结使用技巧鼓励学生总结展示优秀学生作品课下任务拓展：【任务五】利用“任务五网页素材”文件夹内提供的文字和图片资料，设计并制作一个介绍四川风景名胜的站点。1．基本要求：（1）站点中至少包含四个网页，其中主页为“标题”式框架网页；（2）至少介绍两个景点，每个景点分别使用不同的网页；（3）顶端框架中包含指向各个景点介绍的超链接，单击超链接后，介绍景点的网页在下面的主框架中打开。（4）网页中应包含文字和图片等基本元素。相关例题请查阅“任务五样例”文件夹中的样例5-1。2．一般要求：（1）在基本要求的基础上，再增加两个景点的介绍。（2）适当设置网页的背景以及文本的字体、大小和颜色，使页面美观。（3）通过设置框架属性，使浏览网页时框架的边框隐藏不见。相关例题请查阅“任务五样例”文件夹中的样例5-2。3．较高要求：（1）在顶端框架中增加一个内容为“主页”的超链接，单击该超链接后，即在下面的主框架中显示出各个景点的综合介绍。单击各景点之后的超链接“更多的…”，具体介绍该景点的网页即在主框架中打开。（2）在网页中灵活使用各种动态效果，增强网页的吸引力。例如，顶端框架中的超链接可以采用悬停按钮。相关例题请查阅“任务五样例”文件夹中的样例5-3。