项目九 框架元素的应用ppt课件.pptx
![资源得分’ title=](/images/score_1.gif)
![资源得分’ title=](/images/score_1.gif)
![资源得分’ title=](/images/score_1.gif)
![资源得分’ title=](/images/score_1.gif)
![资源得分’ title=](/images/score_05.gif)
《项目九 框架元素的应用ppt课件.pptx》由会员分享,可在线阅读,更多相关《项目九 框架元素的应用ppt课件.pptx(34页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、项目九 框架元素的应用项目九 框架元素的应用学习目标学习目标会插入框架会设置框架的属性会利用框架进行网页布局项目九 框架元素的应用项目项目简介简介框架可以把浏览器窗口下划分成若干个区域,即在一个浏览器中显示多个网页。通过框架元素可以方便地实现网页的导航功能,使网站结构清晰明了。该项目需要掌握插入框架元素的方法,会利用框架控制超链接的目标,会利用框架进行网页布局等操作。本项目要完成的任务:任务一 框架导航的应用任务二 浮动框架的应用任务一 框架导航的应用任务描述任务描述该任务主要运用框架元素制作页面导航功能,实现当点击导航条上的超链接时,相应网页会在同一显示区域变换显示。该任务的需求如下所示:1
2、.在“WebTest项目9Frame”文件夹中创建“左对齐”框架集,框架集保存为Frameset.html,左侧页面(leftFrame左侧框架)保存为left.html,右侧页面(mainFrame主框架)保存为main.html。 2.当点击导航页中的超链接时(如第一章、第二章、第三章),在主框架mainFrame中显示链接网页信息,页面效果如图9-1、9-2、9-3所示。任务一 框架导航的应用图9-1 点击第一章链接图9-2 点击第二章链接任务一 框架导航的应用图9-3 点击第三章链接任务一 框架导航的应用任务任务实施实施1.新建与保存框架先建一个空白文档点击“插入”菜单选择“HTML”
3、 选择“框架”点击“左对齐” 在弹出“框架标签辅助功能属性”如图9-4所示(其中mainFrame为主框架,leftFrame为左侧框架,可分别为框架文件设置标题名称,保持默认)确定生成如图9-5所示的“左对齐”框架集保存框架及框架集图9-4 框架标签辅助功能属性图9-5 左对齐框架集任务一 框架导航的应用(1)保存leftFrame左侧框架:选中leftFrame框架文件保存框架选择“WebTest项目9Frame”文件夹,“文件名”中输入left.html;(2)保存mainFrame主框架:选中mainFrame框架文件保存框架选择“WebTest项目9Frame”文件夹,“文件名”中输
4、入main.html;任务一 框架导航的应用(3)保存框架集:选中框架集(鼠标单击分割线)文件框架集另存为选择“WebTest项目9Frame”文件夹,“文件名”中输入Frameset.html;任务一 框架导航的应用框架与框架集代码如下所示: 任务一 框架导航的应用2. 设置框架属性点击“左侧框架页”右边框属性面板如图9-6所示,“边框”选择“是”,“边框宽度”输入“1”,“列”值输入“100”,单位选择“像素”。图9-6 框架集属性任务一 框架导航的应用3.制作链接文档在“WebTest项目9Frame”目录中创建三个HTML文档,分别命名为“第一章.html”、 “第二章.html”、“
5、第三章.html”,分别打开三个文档按图9-1、9-2和9-3所显示输入页面信息并保存。任务一 框架导航的应用4.制作导航页打开框架集Frameset.html光标定位在“左侧框架页”left.html中,输入文本“第一章”选中“第一章”文本,在属性面板“链接”中输入“第一章.html”或点击“浏览文件”按钮,在“选择文件”对话框中选择“第一章.html”,如图9-7所示,“目标”选择“mainFram”(超链接页面在主框架页main.html中显示)按前面的步骤制作“第二章”、“第三章”超链接。图9-7 文本属性任务一 框架导航的应用5.保存网页,按F12在浏览器中浏览效果。任务二 浮动框架
6、的应用任务描述任务描述通过对前一任务的学习,我们掌握了框架元素的相关知识与操作技能。浮动框架是一种比较特殊的框架,和Frame比较类似,但Frame必须放在Frameset中,而Iframe是一种内联框架,可以放在网页中的任何位置。该任务需要掌握浮动框架的属性及相关应用。通过该任务的学习,提高学生灵活应用框架的能力。该任务的需求如下所示:任务二 浮动框架的应用1.在“WebTest项目9Iframe”文件夹中创建首页文件index.html。 2.当浏览首页文件index.html时,自动加载欢迎页面(first.html)的信息,页面效果如图9-8所示。图9-8 浏览首页时加载first.h
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 项目九 框架元素的应用ppt课件 项目 框架 元素 应用 ppt 课件
![提示](https://www.taowenge.com/images/bang_tan.gif)
限制150内