模块7-制作完整的框架网页4
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
学习情境7 学习情境
制作完整的框架网页
课程引导 学习目标 知识讲解 课堂实践 教学总结 布置习题
1. 对比标签编辑器iframe属性和生成的HTML代码，找 出其对应关系 2. 上网搜索相关知识，说明iframe与一般框架的区别
相关知识点 ② 创建自定义框架
课程引导 学习目标 知识讲解 课堂实践 教学总结 布置习题
选择“文件>新建”命令，在弹出的“新建文档”对 话框中选择“示例中的页>框架集”选项，在“示例页” 列表中根据需要进行选择，单击“创建”按钮，即可创建 框架集 或者在“插入”栏中选择“框架”按钮，在下拉列表 中选择框架类型后也可创建框架集
课程引导
案例02 – 创建嵌入式框架iframe
学习目标 知识讲解
案例操作过程(P135-137)
课堂实践 教学总结
相关知识点(P137-138)
布置习题
学习情境7 学习情境
制作完整的框架网页
相关知识点 ① 标签选择器的使用 嵌入式框架和框架网页类似，它可以把一个网页的框
课程引导 学习目标 知识讲解 课堂实践 教学总结 布置习题
用于指定在水平或垂直方向上将窗口分为若干框架时每个框架的宽度。取值可 学习情境7 学习情境 制作完整的框架网页 iframe标记，又叫浮动框架标记，你可以用它将一个HTML文档嵌入在一个
布置习题 Onload
来自百度文库
Onunload
用于描述frameset加载和退出时的事件
学习情境7 学习情境
制作完整的框架网页
学习情境7 学习情境
制作完整的框架网页
专业能力目标
课程引导 学习目标 知识讲解 课堂实践
1. 掌握制作框架网页的方法 学习目标
专业知识目标
专业素质目标
教学总结 布置习题
学习情境7 学习情境
制作完整的框架网页
课程引导 学习目标 知识讲解 课堂实践 教学总结 布置习题
专 业 能 力 目 标
1. 使用框架制作页面的能力
专 业 素 质 目 标 1. 团队协作精神 2. 沟通表达能力 3. 乐观精神 4. 敬业精神 5. 责任感 6. 效率观念 7. 结构布局能力
学习情境7 学习情境
制作完整的框架网页
案例01 – 创建上方固定、左侧嵌套的框架网页
课程引导 学习目标 知识讲解 课堂实践 教学总结 布置习题
教 学 案 例
教学总结
win3 相关知识点(P133-135)
布置习题
学习情境7 学习情境
制作完整的框架网页
相关知识点 ① 创建预定义框架
课程引导 学习目标 知识讲解 课堂实践 教学总结 布置习题
选择“查看>可视化助理>框架边框”命令，然后利用 鼠标拖动框架边框的方法可以创建框架
学习情境7 学习情境
制作完整的框架网页
学习情境7 学习情境
制作完整的框架网页
课程引导 学习目标 知识讲解 课堂实践 教学总结 布置习题
课堂实践：同步模仿操作----案例01-02 综合案例实训： “某幼儿园”框架页面的设计 与 制作
学习情境7 学习情境
制作完整的框架网页
一．疑难解析
课程引导 学习目标 知识讲解 课堂实践 教学总结 布置习题
案例02 – 创建嵌入式框架iframe
综合案例实训 - “某幼儿园”框架页的设计与制 作
如图所示的框架页面：利用框架将窗口分成3个子窗口，分别命名为win1， 学习情境7 学习情境 制作完整的框架网页 win2和win3，子窗口win1对应的HTML中设置了两个超链接，用户单击这两个超链 接后目标URL将在子窗口win2中显示 课程引导 案例01 – 创建上方固定、左侧嵌套的框架网页
学习情境7 学习情境
制作完整的框架网页
相关知识点 ③ 框架的多种选择方法
课程引导 学习目标 知识讲解 课堂实践 教学总结 布置习题
按住Alt键单击此框架 框架面板选择 即被选中呈虚线框显示 Alt键+框架选择
学习情境7 学习情境
制作完整的框架网页
相关知识点 ④ 框架集的多种选择方法
课程引导 学习目标
学习目标
当在文件中建立框架时，Dreamweaver可以创建一个无标题的框架集文件， 在每个框架中创建无标题文件，如果某个页面被划分成3个框架，它实际上包含 知识讲解 的却是4个独立的文件：一个框架集文件和3个框架内容文件。框架内容文件包 案例操作过程(P129-133) win1 win2 含了将出现在页面框架中的内容。 课堂实践
网页设计与制作
——学习情境7：制作完整的框架网页
主讲教师：谭荣华
学习情境7 学习情境
制作完整的框架网页
课程引导 学习目标 知识讲解 课堂实践 教学总结 布置习题
概述 在网页中，除了使用表格和AP Div定位外， 还可以使用框架进行定位。使用框架结构设计 的HTML文件，可以将整个浏览器窗口分成几个 独立的小窗口，一个窗口就是一个框架，每一 个框架可分别载入不同的网页文件，此外，框 架之间是可以相互控制的。
架和内容嵌入现有的网页中。在Dreamweaver中可以使用 “标签编辑器”来创建嵌入式框架。其中列出了绝大部分 语言所用到的标签及其属性参数，对于编写代码的设计者 来说，这是得心应手的工具，有了它可以轻松找到所需要 的标签，然后根据列出的参数来使用它。 标签选择器：插入各种标签 标签库管理器：设置库属性和编辑库中的标签和属性
① 如果一个站点在浏览器中显示为包含三个框架的单个 页面，该框架至少包括多少个独立的HTML文档？ ② 怎样删除已经创建的框架和框架集？ ③ 怎样使框架集在不同的浏览器窗口中均能正常显示？ ④ 如何防止个人网页中的内容被放到其他网站的框架中 显示？
学习情境7 学习情境
制作完整的框架网页
二．课堂小结
和保存其他文件一样，选择“保存”或“另存为”均 可保存，不同的是保存框架时先要选中框架
学习情境7 学习情境
制作完整的框架网页
相关知识点 ⑥ 设置框架和框架集的属性
课程引导 学习目标 知识讲解 课堂实践 教学总结 布置习题
框架属性设置 框架集属性设置
Cols(水平方向)
Rows (垂直方向)
1.Frameset 2. <html> Frame 以为 iframe标记的使用格式是: HTML中显示。它不同于Frame标记最大的特征即这个标记所引用的HTML文件不 功能：描述框架集（即整个框架的结构） 功能：描述组成帧结构中的具体的某个帧，它只能嵌套在frameset中使用 <head> 相关知识点 ① 正整数(单位：像素)，如：cols=“200” 课程引导 <iframe <frameset> 是与另外的HTML文件相互独立显示，而是可以直接嵌入在一个HTML文件中，与 语法： 语法：<framesrc="URL" width="x" height="x" scrolling="[OPTION]" …> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> ② 百分比，如：cols=“80%” frameborder="x"></iframe> 这个HTML文件内容相互融合，成为一个整体，另外，还可以多次在一个页面内 ⑦ <frame> 属性：name src HTML中框架的标签及属性简介 noresize scrolling marginwidth <title>框架示例</title> ③ *(表示除去其他框架所占宽度后剩下的宽度) 学习目标 显示同一内容，而不必重复写内容，一个形象的比喻即“画中画“电视 <frame> marginheight frameborder bordercolor </head> src：文件的路径，既可是HTML文件，也可以是文本、ASP等 如：cols=“80,*” 表示将窗口分为左右两个框架，左边框架的宽度为80像素 width、height："画中画"区域的宽与高 … <frameset frameborder="yes" cols="300,300,*"> 主要标签 Bordercolor 知识讲解 scrolling:当SRC的指定的HTML文件在指定的区域不显不完时，滚动 <noframe>…</noframe> <frame src="01/原始文件/1.1.2/index.htm" scrolling="auto"/> 用于指定边框的颜色 1.frameset 选项，如果设置为NO，则不出现滚动条；如为Auto：则自动出现滚动条；如为 </frameset> <frame 2.frame 课堂实践 src="02/原始文件/2.1.4/index.html" scrolling="auto"/> Frameborder Yes，则显示src="02/原始文件/2.2.2/index.htm" scrolling="auto"/> 属性：cols rows frameborder bordercolor framecolor framespacing <frame 3.Noframe 用于指定是否出现边框。值为”yes”或“no” frameBorder：区域边框的宽度，为了让“画中画“与邻近的内容相 onload onunload </frameset> 4.iframe 教学总结 Framespacing 融合，常设置为0 </html> 表示框架与框架间的保留空白的距离，以免看起来太挤。 其值是正整数
课程引导 学习目标
框架是网页中最常用的页面设计方式 之一，使用
知识讲解 课堂实践 教学总结 布置习题
框架不但可以方便地创建具有统一风格的页面，而且 也为设计网站节省了不少时间。当浏览框架网页时， 可以发现网页部分区域内容将不会发生任何改变，而 其他区域则会不断地更新内容。学习情境7主要学习了 框架的概念与特点，再详细讲解了框架的创建、保存、 属性的设置、嵌入式框架iframe等基本操作。
用鼠标指向框架面板的黑色边框后 当鼠标变为双向箭头时按住 知识讲解
单击即可选中框架集，框架集同样 Alt键选择框架集，框架集呈 也是虚线显示 虚线显示 框架面板选择法 课堂实践 Alt键+框架边框选择法
教学总结 布置习题
学习情境7 学习情境
制作完整的框架网页
相关知识点 ⑤ 框架及框架集的保存
课程引导 学习目标 知识讲解 课堂实践 教学总结 布置习题
学习情境7 学习情境
制作完整的框架网页
相关知识点 ② 标签库编辑器的使用
课程引导 学习目标 知识讲解 课堂实践 教学总结 布置习题
初学者学习标签及其属性的很好的工具
学习情境7 学习情境
制作完整的框架网页
综合案例实训 – “某幼儿园”框架页面的设计与制 作 页面效果图
课程引导 学习目标 知识讲解 课堂实践 教学总结 布置习题
学习情境7 学习情境
制作完整的框架网页
课程引导 学习目标 知识讲解 课堂实践 教学总结 布置习题
专 业 知 识 目 标 1. 规划页面框架结构 2. 创建、选择页面框架 3. 设置页面框架和框架集的属性 4. 编辑页面框架 5. 创建嵌入式框架iframe
学习情境7 学习情境
制作完整的框架网页
课程引导 学习目标 知识讲解 课堂实践 教学总结 布置习题