第二课时制作框架网页.doc

第二课时：制作框架网页 生活视窗： 这节课的任务是设计一个框架网页，要求在左框架网页中始终显示导航栏, 并且通过导航栏链接的网页能够分别显示在右框架网页之中。 框架网页是一种独特的页面组织方式，它由导航框架和内容框架组成，一个框架网页窗口中包含几个单独的网页，单击导航框架中的网页导航超链接即可在内容框架中显示相应网页的内容。通常我们使用FrontPage提供的“框架网页”模板来创建框架网页。 探究空间 创建框架网页 第1步:启动FrontPage，打开“可爱的中国”网站。 第2步:单击右侧的“新建网页”，“其他网页模板”。打开“网页模板”对话框。单击对话框中的，进入“框架网页”选项卡。 图3-2.1 第3步:单击模板中的“横幅和目录”模板，再单击，即可创建如下图所示的空白框架网页。 图3-2.2 第4步:在空白框架网页中，分别单击顶端、左侧及右侧的3个，建立3个空白网页，如下图所示 图3-2.3 接下来，我们就可以像制作普通网页一样制作框架网页了。 ⑵添加网页内容 在我们上面制作的框架网页中，问页编辑区域分为三部分:上框架、左框架和右框架。它们是3个独立的网页，我们可以单独对每个网页迸行编辑。 完成上框架网页的内容。将上框架网页的边距的宽度和高度分设置为2像素; 然后在上框架网页中插入banner.jpg”图片，调整图片后，效果如下图所示。 图3-2.4 图3-2.5 接下来，我们要完成左框架网页的内容。因为左框架网页中包含导航内容，所以制作过程麻烦一些。 第1步:将插入点光标移动到左框架网页中，在此插入一个4行1列的表格。调整表格大小，并将表格线粗细设置为0。 图3-2.6 第2步 如上图所示，将插入点光标移动到左框架网页的第1个单元格内。单击菜单栏上的，再单击“插入”菜单中的，打开下图所示的“插入web组件”对话框。 第3步::在“组件类型”列表中单击选择“动态效果”在右侧的效果列表中单击选择“交互式按钮”。单击，打开“交互式按钮”对话框。 图3-2.7 第4步 删除“按钮文本”框中的文字，重新输入“中国历史”即把按钮的的标签(按钮上显示的文字)设置为“中国历史”。其他设置如下图所所示，完成后单击，返回网页编辑窗口。 第5步:在左框架网页中再插入三个交互式按键钮，按钮名称分别为“中国地理”、“中国之最”和“中华民族”，完成后效果如下图所示。 图3-2.8 利用事先准备好的素材，制作完成右框架网页的内容。如果暂时完不成网页中的正文内容，可先做一部分，其他的留到课后完成。 保存框架网页 把框架网页的每部分都制作好后，我们要保存框架网页。保存框架网页的操作同保存普通网页略有区别。 单击常用工具栏上的，打开下图所示“另存为”对话框。 图3-2.9 信息链接： 在保存框架网页时，每个框架中的网页都要单独保存一次。此外还要保存整体框架网页，这个网页中包含该框架网页的设置信息，像如何显示网页，以及框架的大小位置等。要打开一个框架网页，只要打开的整体框架网页就可以了。 实践升级 1、完成“中国历史”、“中国地理”、“中华民族”、“中国之最”、“中华民族”四个子网页。 2、为左框架中的“中国历史”、“中国地理”、“中华民族”、“中国之最”、“中华民族”4个“交互式按钮”设置超级链接，分别链接到相对应的网页中；设置这四个网页在右框架中打开，保存修改，并在浏览器中浏览网页。