《项目九 框架元素的应用ppt课件.pptx》由会员分享，可在线阅读，更多相关《项目九 框架元素的应用ppt课件.pptx（34页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
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
7、tml页面任务二 浮动框架的应用3.当点击导航页中的超链接时（如第一章、第二章、第三章），在index.htm页面的右边显示链接网页信息。页面效果如图9-9、9-10、9-11所示。图9-9 点击第一章链接任务二 浮动框架的应用图9-10 点击第二章链接图9-11 点击第三章链接任务二 浮动框架的应用任务实施任务实施1.新建首页文档新建 index.html文档，并保存到“WebTest/项目9/Iframe”文件夹中；任务二 浮动框架的应用2.制作链接文档（1）在“WebTest项目9Iframe”目录中新建first.html文档，并保存到“WebTest/项目9/Iframe”文件夹中；
8、（2）复制“WebTest项目9Frame”目录中的“第一章.html”、 “第二章.html”、 “第三章.html”三个文档到“WebTest项目9Iframe”目录中。任务二 浮动框架的应用3.应用表格进行首页布局在index.html文档中插入一个一行二列的表格选中表格在属性面板中“对齐”选择“居中对齐”，“边框”中输入1，“宽度”为100%把光标移到第一个单元格在属性面板中 “宽”输入200，“高”输入600，“垂直对齐”选择“顶端”，“水平对齐”选择“居中对齐”把光标移到第二列在属性面板中“垂直对齐”选择“顶端”。任务二 浮动框架的应用4.插入IFrame框架把光标移到第二列点击“
9、插入”菜单选择“Html”选择“框架”点击“IFRAME”，在代码视图中会自动生成标签任务二 浮动框架的应用5.设置IFrame框架属性在代码视图中按如下设置：提示：提示：src=first.html为框架默认打开的网址或文件。为框架默认打开的网址或文件。任务二 浮动框架的应用6.制作超链接（1）切换到设计视图把光标移到表格的第一列中，输入“第一章”，按回车，输入“第二章”，按回车，再输入“第三章”。任务二 浮动框架的应用（2）选中“第一章”在属性面板“链接”中输入“第一章.html”或点击“浏览文件”按钮，在“选择文件”对话框中选择“第一章.html”“目标”中输入“main”（这里跟ifr
10、amer的name要一至）按前面的步骤制作“第二章”、“第三章”超链接。7.保存网页，按F12在浏览器中浏览效果。知识拓展1.框架的组成框架主要由两部分组成，即框架集（frameset)和框架（frame)。知识拓展2.框架集的基本格式 知识拓展3.创建框架点击“插入”菜单选择“HTML”选择“框架”选择要用的布局结构，如图9-12所示：图9-12 创建框架步骤知识拓展4.框架集标签及属性（1）框架集标签语法格式如下所示：知识拓展（2）框架集常用属性如下表所示：属性属性描述描述rows设置横向分割的框架数目cols设置纵向分割的框架数目border设置边框的宽度bordercolor设置边框的
11、颜色frameborder设置有/无边框framespacing设置各窗口间的空白距离知识拓展5. 框架标签及属性（1）框架标签的语法格式如下所示：知识拓展（2）框架常用属性如下表所示：属性属性描述描述src设置该框架显示的源文件name设置框架的名称bordercolor设置边框的颜色frameborder设置有/无边框marginwidth设置框架内容与左右边框的空白距离marginheight设置框架内容与上下边框的空白距离scrolling设置是否显示滚动条，yes显示，no不显示，auto需要才显示noresize设置是否允许各窗口改变大小，默认允许知识拓展6. 内嵌式框架内嵌式框架
12、又称浮动框架（IFRAME），它可以在一个网页文档中嵌入另一个网页文档而无须使用框架结构。（1）创建内框架：方法跟前面创建框架的方法一样，在“框架”子菜单中选择“IFRAME”（2）语法格式：。知识拓展（3）内框架常用属性如下表所示：属性属性描述描述src设置内框架载入的目录文件name设置内框架的名称scrolling设置是否显示滚动条，yes显示，no不显示，auto需要才显示width设置内框架的宽度height设置内框架高度align设置对齐方式frameborder设置内框架是否显示边框，1显示，0不显示marginwidth设置内框架横向边距marginheight设置内框架纵向边距