《使用HTML和CSS开发Web网站教学资料》第四章 框架集与框架（上机）.pptVIP

中国职业教育联盟课程体系 * * * * 中国职业教育联盟课程体系 中国职业教育联盟课程体系 成就百万精英 使用HTML和CSS开发WEB网站 第四章 框架集与框架 上机 上机目标 实现简单的框架集 实现嵌套的框架集 使用框架的属性 使用浮动框架 实现复杂的框架集嵌套 教员讲解上机目标 训练技能点 框架集与框架的关系 frameset/frameset标签 frame /标签 框架集的嵌套 使用框架的属性 使用浮动框架 阶段1 训练技能点 框架集与框架的关系 frameset/frameset标签 frame /标签 阶段1 在大多数的论坛系统中，常使用框架集将浏览器窗口分割成为左右两个区域，左边的区域放置论坛的版块列表，右边的区域显示特定版块的贴子列表。 阶段1 使用frameset/frameset标签代替一般网页中的body/body标签，可以创建框架集页面。 框架集中至少包含两个框架页面，使用frame /标签在框架集中创建框架。 frameset/frameset标签的rows和cols属性分别实现浏览器窗口的横向和纵向分割。 frame /标签的src属性说明框架中要显示哪个具体网页的内容。 阶段1 html head title框架集与框架/title /head frameset cols=180px , * frame src=left.html / frame src=right.html / /frameset /html * 阶段1 ？ 共性问题集中讲解 阶段2 技能要点 框架集的嵌套 阶段2 扩展前一个练习，增加一个框架页面top.html。要求index.html页面中的框架集包含三个框架，首先浏览器窗口被分隔成为上下两行，上面一行放置top.html页面，下面一行再进一步分割成为左右两列，左边一列放置left.html页面，右边一列放置right.html页面。 阶段2 框架集嵌套是指frameset/frameset标签内部还包含其他的frameset/frameset标签。 先在外层的frameset/frameset标签中使用rows属性。 再在内层的frameset/frameset标签中使用cols属性。 html head title框架集与框架/title /head frameset rows=50px, * frame src=top.html / frameset cols=180px, * frame src=left.html / frame src=right.html / /frameset /frameset /html * 阶段2 ？ 共性问题集中讲解 阶段3 扩展上一个练习，设置top.html页面所在的框架无论如何不出现滚动条，设置left.html和right.html页面所在的框架不能被浏览者改变大小。 在left.html页面中添加三个链接，设置它们指向的网页分别在右侧框架中、新的窗口中，当前浏览器窗口中打开。 使用frame /标签的scrolling属性、resize属性、name属性和a/a标签的target属性。 * 阶段3 ？ 共性问题集中讲解 阶段4 使用浮动框架实现指导一的界面。 在主页面的body/body标签内放置两个frame /标签，设置它们的src属性值分别为left.html和right.html。 阶段5 使用框架集嵌套实现多文档共享一个浏览器窗口的界面。 先分成上下两行，然后将第一行分成左右两列，再将右边的列分成上下两行。 总结并布置作业 谢谢 SEC 8.0 * 题目1：P57 第一题 题目2：P270 练习1 题目3：p270 联系2 中国职业教育联盟课程体系 * * * 题目1：P57 第一题 题目2：P270 练习1 题目3：p270 联系2