模块7-制作完整的框架网页4.ppt

主讲教师：谭荣华 网页设计与制作　　　　——学习情境7：制作完整的框架网页 布置习题 学习目标 知识讲解 课堂实践 教学总结 制作完整的框架网页 学习情境7 课程引导 在网页中，除了使用表格和AP Div定位外，还可以使用框架进行定位。使用框架结构设计的HTML文件，可以将整个浏览器窗口分成几个独立的小窗口，一个窗口就是一个框架，每一个框架可分别载入不同的网页文件，此外，框架之间是可以相互控制的。 概述 布置习题 知识讲解 课堂实践 教学总结 课程引导 制作完整的框架网页 学习情境7 学习目标 掌握制作框架网页的方法 学习目标 专业能力目标 专业知识目标 专业素质目标 布置习题 知识讲解 课堂实践 教学总结 课程引导 制作完整的框架网页 学习情境7 学习目标 使用框架制作页面的能力 专 业 能 力 目 标 布置习题 知识讲解 课堂实践 教学总结 课程引导 制作完整的框架网页 学习情境7 学习目标 规划页面框架结构 创建、选择页面框架 设置页面框架和框架集的属性 编辑页面框架 创建嵌入式框架iframe 专 业 知 识 目 标 布置习题 知识讲解 课堂实践 教学总结 课程引导 制作完整的框架网页 学习情境7 学习目标 团队协作精神 沟通表达能力 乐观精神 敬业精神 责任感 效率观念 结构布局能力 专 业 素 质 目 标 课堂实践 布置习题 学习目标 教学总结 课程引导 制作完整的框架网页 学习情境7 知识讲解 教学案例 案例01 – 创建上方固定、左侧嵌套的框架网页 案例02 – 创建嵌入式框架iframe 综合案例实训 - “某幼儿园”框架页的设计与制作 课堂实践 布置习题 学习目标 教学总结 课程引导 制作完整的框架网页 学习情境7 知识讲解 案例操作过程(P129-133) 相关知识点(P133-135) 案例01 – 创建上方固定、左侧嵌套的框架网页 当在文件中建立框架时，Dreamweaver可以创建一个无标题的框架集文件，在每个框架中创建无标题文件，如果某个页面被划分成3个框架，它实际上包含的却是4个独立的文件：一个框架集文件和3个框架内容文件。框架内容文件包含了将出现在页面框架中的内容。 如图所示的框架页面：利用框架将窗口分成3个子窗口，分别命名为win1，win2和win3，子窗口win1对应的HTML中设置了两个超链接，用户单击这两个超链接后目标URL将在子窗口win2中显示 win1 win2 win3 课堂实践 布置习题 学习目标 教学总结 课程引导 制作完整的框架网页 学习情境7 知识讲解 相关知识点 选择“查看可视化助理框架边框”命令，然后利用鼠标拖动框架边框的方法可以创建框架 创建预定义框架 课堂实践 布置习题 学习目标 教学总结 课程引导 制作完整的框架网页 学习情境7 知识讲解 相关知识点 选择“文件新建”命令，在弹出的“新建文档”对话框中选择“示例中的页框架集”选项，在“示例页”列表中根据需要进行选择，单击“创建”按钮，即可创建框架集 或者在“插入”栏中选择“框架”按钮，在下拉列表中选择框架类型后也可创建框架集 创建自定义框架 课堂实践 布置习题 学习目标 教学总结 课程引导 制作完整的框架网页 学习情境7 知识讲解 相关知识点 框架面板选择 Alt键+框架选择 框架的多种选择方法 按住Alt键单击此框架 即被选中呈虚线框显示 课堂实践 布置习题 学习目标 教学总结 课程引导 制作完整的框架网页 学习情境7 知识讲解 相关知识点 框架面板选择法 Alt键+框架边框选择法 框架集的多种选择方法 当鼠标变为双向箭头时按住Alt键选择框架集，框架集呈虚线显示 用鼠标指向框架面板的黑色边框后单击即可选中框架集，框架集同样也是虚线显示 课堂实践 布置习题 学习目标 教学总结 课程引导 制作完整的框架网页 学习情境7 知识讲解 相关知识点 和保存其他文件一样，选择“保存”或“另存为”均可保存，不同的是保存框架时先要选中框架 框架及框架集的保存 课堂实践 布置习题 学习目标 教学总结 课程引导 制作完整的框架网页 学习情境7 知识讲解 相关知识点 框架属性设置 框架集属性设置 设置框架和框架集的属性 课堂实践 布置习题 学习目标 教学总结 课程引导 制作完整的框架网页 学习情境7 知识讲解 相关知识点 主要标签 1.frameset 2.frame 3.Noframe 4.iframe HTML中框架的标签及属性简介 1.Frameset 功能：描述框架集（即整个框架的结构） 语法： frameset frame frame … noframe…/noframe