ID: 8281583

清华大学版信息技术八下 2.5 统一风格——制作框架网页 课件 (共24张PPT)

日期:2025-09-19 科目:信息技术 类型:初中课件 查看:15次 大小:2410305B 来源:二一课件通
预览图 1/9
清华大学,网页,PPT,24张,课件,制作
  • cover
统一风格———制作框架网页 任务导航 在进行网站制作的时候,常常需要将页面划分成多个区域,然后将各个网页的相同内容(如网站标题、网站导航等)固定在一个区域中,以确保网站风格的统一。 本课,我们通过创建框架制作框架网页,制作完成的框架网页效果如图所示。 1.创建框架和框架集 (1)规划“框架”文件夹 打开“安全自护我能行”站点,在“文件”面板中新建frame文件夹,在frame文件夹中新建images和other文件夹,将素材库中提供的图片素材存放到images文件夹中。 (2)新建框架页 步骤1:执行“文件”→“新建”命令,打开如图所示的“新建文档”对话框,选择“示例中的页”标签,在“示例文件夹”列表框中选择“框架页”选项,在“示例页”列表框中选择“上方固定”,则对话框右侧区域会显示所选框架页的样式及其文字描述。 步骤2:单击“创建”按钮,打开如图所示的“框架标签辅助功能属性”对话框。 单击“确定”按钮,框架创建完成,生成如图所示的框架网页。 (3)保存框架集 步骤1:执行“文件”→“保存全部”命令,打开“另存为”对话框,如图所示。双击frame文件夹,将文件保存在frame文件夹中。重命名框架集文件名为all.html,单击“保存”按钮。 步骤2:将光标定位到上框架中,执行“文件”→“框架另存为”命令,打开“另存为”对话框,重命名上框架文件名为top.html,单击“保存”按钮。 步骤3:将光标定位到下框架中,执行“文件”→“框架另存为”命令,打开“另存为”对话框,重命名下框架文件名为main.html,单击“保存”按钮。 (4)设置框架和框架集属性 步骤1:执行“窗口”→“框架”命令,打开如图所示的“框架”面板,此“框架”面板中显示出当前网页中的框架结构。 步骤2:单击“框架”面板中的框架边缘部分,选中框架集,在“属性检查器”中设置框架集的属性,设置行的值为207,参数设置如图所示。 步骤3:单击“框架”面板中的topFrame框架或mainFrame框架,在“属性检查器”中设置所选框架的属性,参数设置如图所示。 2.制作框架网页 (1)制作上框架网页 上框架网页的主要内容是网站标题和利用鼠标经过图像制作的网页导航。 步骤1:打开网页top.html,设置背景颜色为#EAFF8A(淡黄色),上边距为0像素。 步骤2:插入一个2行5列的表格,边框粗细为0,单元格边距为0,单元格间距为0,表格宽度为780像素,居中对齐。设置第1行高度为167像素,第2行高度为40像素。选中第1行中的所有单元格,执行“修改”→“表格”→“合并单元格”命令,将第1行中的所有单元格合并为一个单元格,如图所示。 执行“插入”→“图像”命令,在第1行中插入title.gif文件,显示网站标题,如图所示。 步骤3:将光标放置在第2行第1个单元格中,执行“插入图像对象”→“鼠标经过图像”命令,打开“插入鼠标经过图像”对话框。 步骤4:重命名图像名称为homepage(主页)。单击“原始图像”右侧的“浏览”按钮,打开“原始图像”对话框,选择图像A_01.gif。单击“鼠标经过图像”右侧的“浏览”按钮,打开“插入鼠标经过图像”对话框,选择鼠标经过图像B_01.gif。在“替换文本”文本框中输入“返回主页”,当图像无法显示时,将显示这个替换文本。单击“按下时,前往的URL”右侧的“浏览”按钮,打开“按下时,前往的URL”对话框,选择链接到index.html文件,则当在浏览状态单击homepage图像时,会自动打开index.html文件,返回到网站首页。以上参数设置完毕后的对话框如图左所示,单击“确定”按钮,即可在网页中插入一个鼠标经过图像,如图右所示。 ?? 步骤5:选中鼠标经过图像homepage,在“属性检查器”中设置目标为_?parent,以实现在整个浏览器窗口中打开链接的网页,如图5.13所示。 ?? (2)制作下框架网页 步骤1:打 ... ...

~~ 您好,已阅读到文档的结尾了 ~~