模块7-制作完整的框架网页4
网页设计-框架(详解)
11.3 嵌入式框架Iframe
• 嵌入式框架（标签为<iframe>）也是框架的一种形式。它与普通框 架的区别在于，它可以嵌入在网页中的任意部分，比如可以在表格 中插入嵌入式框架。正是由于这一特点，使得嵌入式框架使用广泛。 本节将结合具体实例，学习如何创建嵌入式框架，以及设置嵌入式 框架的属性。
框架
• 框架是网页中常使用的效果。使用框架，可以在同一浏览窗口中显 示多个不同的文件。最Байду номын сангаас见的用法是将窗口的左侧或上侧的区域设 置为目录区，用于显示文件的目录或导航条。而将右边一块面积较 大的区域设置为页面的主体区域。通过在文件目录和文件内容之间 建立的超级链接，用户单击目录区中的文件目录，文件内容将在主 体区域内显示，用这种方法便于用户继续浏览其他的网页文件。
• 应用嵌入式框架的网页效果如图11.27所示，单击左边的导航文字， 右边的内容会发生改变，这实际上是由两个页面组成。下面就以该 网页为例来学习嵌入式框架的使用。具体操作步骤如下：
11.4 框架布局实例
• 框架结构是网络课程中经常用到的布局方式。本节就来介绍框架结 构网络课程的页面布局。完成后的网页效果如图11.38所示。
• 本章将介绍关于框架的基本知识，并结合具体实例讲解在 Dreamweaver CS3中如何创建、使用框架，设置框架属性，利用框架 进行布局。
11.1 关于框架
• 下面的实例显示了一个使用框架的网页，如图11.1所示。这是由三 个框架组成的框架布局，一个框架横放在顶部，其中包含 Web 站点 的Logo和一些常用按钮；左侧较窄的框架包含导航条；右侧的框架 占据了页面的大部分，其中包含主要内容。这些框架中的每一个都 显示单独的 HTML 文档。
制作框架网页
第五课制作框架网页教学目标：1．掌握拆分单元格的方法。
2．掌握创建与保存框架集的方法。
3．熟练掌握利用鼠标经过图像制作网页导航的方法。
4．掌握外部链接和电子邮件链接的制作方法。
5．掌握目标设置在网页制作过程中的作用和方法。
教学重点：培养学生的兴趣。
教学媒体：远程教育资源教学课时：3课时教学过程授课日期：4月5日-4月23日一：引课在进行网站制作的时候，为了有效地统一网站的风格，常常需要将页面划分成多个区域，将各个网页的相同内容（如网站标题、网站导航等）固定在一个区域中，使网站导航结构清晰。
利用框架可以轻松实现网页结构划分和布局。
演示网页范例：给学生展示一些比较有特点的使用了框架的网页范例，通过观察了解网页布局的基本规律和框架在网页中的作用，对框架有一个初步的了解和感性认识。
提出任务：用两节课时间，学习如何创建框架、制作框架网页。
在制作的过程中，要注意随时保存文件。
二：（1）创建和保存框架集利用“新建文档”的方式创建框架集，是比较直接的创建框架的方法。
根据实际网页布局的需要，可以方便地选择框架集的样式，从而创建合适的框架。
步骤1：执行“文件”→“新建”命令，选择常规标签，选择框架集选项。
单击创建按钮。
步骤 2：执行“文件”→“保存全部”命令。
打开另存为对话框。
双击frame 文件夹，将文件保存在frame文件夹中。
重命名框架集文件名为all.html，单击保存按钮；重命名下框架集文件名为main.html，单击保存按钮；重命名上框架文件名为top.html，单击保存按钮即可。
步骤 3：单击框架面板中的边缘部分，选中框架集，在“属性检查器”中设置框架集的属性。
（2）利用鼠标经过图像制作导航按钮鼠标经过图像由页面载入时显示的原始图像和鼠标指针经过时显示的图像组成，这两个图像应大小相等，如果图像大小不等，将自动调整第2个图像的大小以匹配第1个图像的属性。
在浏览器中当鼠标指针移过图像时，图像可以发生变化，利用鼠标经过图像的这种特殊效果，可以制作动态网页导航按钮。
制作框架网页教案
制作框架网页教案教案标题：制作框架网页教案教学目标：1. 学生能够理解什么是框架网页，并能够解释其作用和优势。
2. 学生能够使用HTML和CSS创建框架网页的基本结构和样式。
3. 学生能够利用框架网页设计和布局内容。
教学资源：1. 计算机和互联网连接2. HTML和CSS编辑器（如Sublime Text、Notepad++等）3. 网页浏览器（如Chrome、Firefox等）教学步骤：引入：1. 向学生介绍框架网页的概念，并解释其在网页设计中的作用。
2. 引导学生思考框架网页与普通网页的区别，并列举框架网页的一些应用场景。
主体：3. 讲解HTML框架标签的基本语法和用法，包括`<frameset>`、`<frame>`和`<noframes>`标签。
4. 演示如何创建一个简单的框架网页结构，包括水平和垂直分割的框架。
5. 引导学生实践创建自己的框架网页结构，并帮助他们解决可能遇到的问题。
6. 讲解CSS样式表的基本语法和用法，包括如何为框架网页添加样式和布局。
7. 演示如何为框架网页添加背景颜色、边框、字体等样式效果。
8. 引导学生实践为自己的框架网页添加样式和布局，并鼓励他们发挥创造力。
总结：9. 回顾框架网页的概念和创建过程，确保学生对所学内容有一个清晰的理解。
10. 鼓励学生分享他们创建的框架网页，并提供反馈和建议。
教学评估：1. 观察学生在实践中的表现，包括他们是否能够正确创建框架网页的结构和样式。
2. 收集学生的框架网页作品，评估其创意和设计水平。
3. 进行小组或个人讨论，让学生分享他们对框架网页的理解和应用。
拓展活动：1. 鼓励学生进一步探索框架网页的高级功能，如跨框架通信、动态调整框架大小等。
2. 引导学生学习响应式网页设计的基本概念和技巧，以适应不同设备和屏幕尺寸。
教学反思：1. 教学过程中，及时观察学生的学习情况，根据需要进行适当的调整和辅导。
教育技术能力培训模块7答案
模块7\活动1\第1步就什么是单元教学设计发表您个人的看法《多彩的春天》单元教学设计框架1．教学内容分析●人教版语文一年级下册第一单元，共9课时。
●共4个模块。
模块一：预习（2课时）。
整体感知单元主题，明确学习目标，制定学习计划。
模块二：分类识字（2课时）。
在教师的指导下，学生发现识字方法，掌握识字规律，小组合作认识本单元的生字。
模块三：朗读感悟（3课时）。
以《柳树醒了》为主，带《春雨的色彩》《古诗二首》，运用想象画面、分角色等多种朗读方法，在学生头脑中构成一幅色彩明丽的春意图。
学习《邓小平爷爷植树》体会邓小平爷爷植树的认真态度和他的心愿，初步了解植树的意义，有植树绿化和保护环境的意识。
模块四：展示台（2课时）。
回归单元主题，升华情感。
展示语言的积累，初步培养积累词语、积累优美语句的习惯，练习口语表达。
夯实基础，检测学习本领。
2．单元整体目标分析1.识字本单元生字，能够正确书写。
2.通过观察，发现规律，能够自主认识本单元生字。
3.正确流利、带有自己的理解朗读课文，通过朗读感悟春天里景色、人物的美好。
4.积累描写春的词语、古诗、优美语句。
5.在活动中感受春天里事物的变化。
6.在阅读中，做到“读通→读熟→读懂→读好”，规范学生口头表达，训练写用完整句子表达情感的能力。
3．各教学内容的教学形式安排模块7\活动1\第2步单元教学的含义单元教学设计就是设计者从一章或是一个单元的角度出发 根据章节或单元中不同的知识点的需要 综合利用各种教学形式和教学策略 通过一个阶段 而不是一个课时 的学习让学习者完成对一个相对完整的知识单元的学习。
在教学内容上 一节课的教学设计主要是针对适合在一个课时内实施的学习内容进行教学设计 而单元教学设计主要是对教材中的一章或一个…单元等知识结构相对完整和综合的学习内容进行设计 在课时安排量上.一节课的教学设计是指利用一个课时就能完成的 而单元教学设计一般需要多课时完成 在教学形式上 一节课教学设计一般只有一种 而单元教学设计则根据单元或是章节中不同知识点的需要 一般会包括有种多教学形式。
电子商务技术单选题
二、单选题1. 域名服务器上存放着INTERNET主机的（）。
(1分)A. 电子邮件地址B. IP地址C. 域名D. 域名和IP地址的对照表2. 电子商务系统的框架结构中，象征着电子商务的社会环境是(1分)A．电子商务各应用系统B．信息发布平台C．公共政策、法律法规、以及安全协议、技术标准D电子商务平台3. 以下哪一个说法正确？(1分) p76A. 注册“北京大学.中国”，将自动获得“北京大学.CN”的中文域名。
B. 注册“长虹.公司”，将自动获得“长虹.com”的中文域名。
C. 注册“新浪.网络”，将自动获得“长虹.net”的中文域名。
D. 中文域名就是以CN为顶级域的域名。
4. Yahoo属于哪种搜索引擎（）。
A、目录式B、元搜索引擎C、多元搜索引擎D、机器人搜索引擎5. 属于B2B的网络交易流转程式有(2分)A．存在认证中心的网络商品直销B．网络商品中介交易C．无认证中心的网络商品直销D无中介的企业间网络交易6. 顶级域名用来表示政府部门的是：(1分)A．.mil B．.org C．.com D．.gov7. EDI的中文译名为(1分)A．报文数据格式B．增值网络C．企业信息化D．电子数据交换8. 检索工具按照信息搜集方法的不同，可分为：目录式搜索引擎、元搜索引擎和（）。
A、全文数据库搜索引擎B、英文搜索引擎C、主题指南类搜索引擎D、机器人搜索引擎9. 关于域名与IP地址的关系，哪一种说法是正确的？(1分)A. 一个IP地址可以对应多个域名；B. 一个IP地址只可以对应一个域名；C. 多个IP地址只可以对应一个域名；D. 只有顶级域名才可以配IP地址10. 下列（）不是WWW浏览器提供的通信手段？A、Usenet新闻组B、电子邮件C、HTTP/IPD、FTP11. 用户在第一次使用OutlookExpress发送和接收电子邮件之前，需要（）。
A、修改C－MOS内容B、修改客户机配置C、装驱动程序D、配置ISP的电子邮件服务器12. 物流配送对电子商务可起到的作用，下列正确的是()P271A．提高电子商务的产品的质量B．扩大电子商务的信息范围C．集成电子商务商家和用户D．提高电子商务的效率和效益13. 伴随网络消费者在网上商店进行购物的是网上商店提供的（）。
专题学习网站制作-框架网页.
《现代教育技术》实验指导Frontpage2003 框架网页制作框架网页是一种特殊的 HTML 网页，它可将浏览器窗口分成称为框架的不同区域，每个区域都可以显示不同的网页。
例如，使用“横幅和目录”框架网页模板创建的框架网页包含三个框架：横幅、目录和主框架。
框架网页本身并不包含可见内容，它只用来指定要显示的其他网页及其显示方式。
单击框架中显示的网页上的超链接时，该超链接指向的网页通常显示在另一个框架，即目标框架中。
框架网页通常用于目录、文章或信息列表、或任何其他的网页上，在一个框架中单击超链接会在另一个框架中显示相应网页。
使用框架网页是因为框架网页能够包含内置导航并显示一致的用户界面（即框架的结构和布局）。
例如，在基于“横幅和目录”框架网页模板创建的框架网页中，可以使用横幅框架在其 Web 站点上显示网站的LOGO标志及主要导航菜单（一级菜单）。
一、创建框架网页1. 在“文件”菜单上，选择“新建”，在右侧面板中选择“其他网页模版”。
2. 在弹出的“网页模版”中选择“框架网页”选项卡。
3. 单击要使用的框架网页模板，如“自顶向下的层次结构”，然后单击“确定”。
4. 设置要显示在每个框架中的初始网页：单击要设置初始网页的框架，然后执行下列操作之一：单击框架中的“设置初始网页”，选择一个已经建立好的网页作为框架初始页面。
方法为:从当前工作文件夹的已创建网页列表中选择网页；或者在“查找范围”框中，查找要打开的网页；或者通过单击浏览到要使用的网页；或者在“地址”框中，键入网页的URL。
在要为其设置初始网页的框架中单击“新建网页”。
FrontPage 将在该框架中创建一个新网页，这个新网页会自动设成初始网页，然后在这个窗口中与正常制作网页一样插入内容或进行编辑。
二、编辑框架中的内容如果正在“网页”视图的“设计”视图中编辑框架网页，则可以通过单击选择想要编辑的网页；如果框架的尺寸太小编辑起来不方便，那么可以在一个新的全屏窗口中打开要编辑的网页。
第3单元 制作框架网页
5、认识框架网页的视图 （1）用FrontPage打开一个框架网页，单击“设计” 选项卡，进入“设计”视图。 （2）单击“拆分”选项卡，进入“拆分”视图。 （3）单击“无框架”选项卡，进入“无框架”视图。 （4）单击“代码”选项卡，进入“代码”视图。 （5）单击“预览”选项卡，进入“预览”视图。
二、设计框架网页
五、保存框架网页
1、在菜单栏中选择“文件/保存”，弹出“另存为”对话框。 2、在“另存为”对话框中一一保存各个框架（如横幅框架、 目录框架和主要框架）。 （1）在“另存为”对话框中，输入对应文件和网页标题，保 存“横幅框架”。 （2）单击“保存”按钮后，预览框中又选中了目录框架，输 入对应文件名和网页标题，保存“目录框架”。 （3）保存完目录框架后，预览框中显示选择了整个网页框架， 输入对应的文件名和网页标题，保存网页设置文件。
将“多面的我”网页设计为框架网页。 多面的我（标题）
（目录） 好文的我 好动的我 好摄影的我
（单击左边目录，动态显示相应内容）
知识充电站： 如果一个站点在浏览器中显示为包含3个框架的单个页面，则它实际上 至少由4个单独的页面组成：框架集页面以及3个单个页面，这3个单个 页面包含这些框架内初始显示的内容。当在Frontpage中设计使用框架 集的页面时，必须全部保存这4个页面，以便该页面可以在浏览器中正 常工作。
一、认识框架网页
1、框架网页的作用：是将浏览器窗口划分为若干个不同的区 域，每个区域可以分别显示不同的网页。 2、框架的组成：框架集和单个框架。 3、框架集和单个框架的定义：框架集是指框架网页显示的框 架数、框架的大小、载入框架的网页源和其他可定义的属 性等。单个框架是指在网页上定义的一个区域。 4、框架网页：是通过超链接将不同的单个框架建立起了联系， 从而实现页面的导航和页面间的交互操作。
中文版DreamweaverCS6网页制作实用教程第七章使用框架布局网页
(2) 单击选中框架集
3. 选中页面中的不同框架
对于单个框架而言，用户可以很容易地选择不同部分的内容。但在框架集中，想要选择不 同的框架就比较困难。下面介绍 3 种选择多个嵌套框架集的方法。
若要在当前选定的同一层次级别上选择下一个框架(框架集)或前一框架(框架集)，可 以在按住 Alt 键的同时按下左箭头键或右箭头键，按照框架和框架集在框架集文件中 定义的顺序依次选中不同的框架和框架集。 若要选择框架网页中的父框架集(指包含当前选中内容的框架集)，可以在按住 Alt 键 的同时按向上箭头键。 若要选择当前选定框架集的第一个子框架或框架集(即按在框架集文件中定义顺序中 的第一个)，在按住 Alt 键的同时按下箭头键即可。
使用框架布局网页
框架网页是一种非常常见的网页类型，在网页设计中使用框架，可以把页面分成多个部分， 不仅可以使每个部分都是一个独立的 HTML 页，显示不同的内容，而且还能够通过超链接实现 框架内容的相互切换。本章将详细介绍在 Dreamweaver CS6 中制作框架网页的具体操作方法。
创建框架网页 保存框架网页 创建嵌套框架 设置框架属性
7 .1 在网页中使用框架
在网络带宽十分有限的情况下，如何提高网页的下载速度，是网页设计者必须要考虑的问 题。如果多个网页拥有相同的导航区，知识内容有所不同，则可以考虑使用框架来设计网页布 局。如此，浏览者在查看不同的内容时，便无需每次都下载整个页面，而只是在保持导航部分 不变的情况下，下载网页中需要更新的内容即可。框架网页可以极大地提高网页的下载速度。
网页设计与制作设计框架网页
第8章 设 计 框 架 网
16
页
8.1 框架网页
■ 框架实例
■ 创建链接。
■ 如果希望链接地对象（文本或者图片）在 一个框架内部,而链接地页面则在另外地框
架内打开,那么就需要通过设置目的打开方
式来控制框架地显示内容。在设置好链接
之 后 , 使用属性面板里地Target（目的）弹
出菜单,可以指定在哪个框架打开被链接地
■ 创建各种框架 ■ 方法1:选择"修改"→"框架集"→"拆分左,右,
上 , 下框架"命令。
2023-02-15
第8章 设 计 框 架 网
6
页
8.1 框架网页
■ 创建各种框架 ■ 方法2:按住Alt键 , 然后拖曳任一条框架边框,
这样可以垂直或水平分割文档（或已有地 框架） ; 按住Alt键 , 然后从一个角上拖曳框 架边框,这样也可以把文档（或已有地框架） 划分为4个框架。
■ 接下来分别在"框架"面板选择相应地框架, 然后在框架属性面板里插入相应地网页就 可以完成了。
2023-02-15
第8章 设 计 框 架 网
28
页
8.1 框架网页
■ 保存框架集 ■ 框架集地实质就是把浏览器窗口划分为几
个可相同可不同地小区（即框架） , 然后可 以在每个小区独立显示一个网页文件 （html文件） , 而最后这些独立小区地组合 就是所谓地框架集。
2023-02-15
第8章 设 计 框 架 网
7
页
8.1 框架网页
■ 插入预定义框架集 ■ Dreamweaver通常预定义了多种框架集,
通过使用预定义框架集,我们就可以轻易创 建想要地框架集。选择"插入"→"HTML" →"框架"命令然后选择一种框架,框架集生 成时可以对每一个框架命名。
《制作框架网页》课件
了解框架网页的框架结构
框架网页的框架结构通常包含若干个框架，如顶部导航栏、侧边栏和内容区。 这些框架可以通过HTML标签和相应的属性来定义和设置。
框架网页的框架命名和设置
为了正确定义和设置框架网页的各个框架，我们需要为每个框架指定一个唯一的名称，并通过HTML的frame和 iframe标签来创建和配置这些框架。
缺点
1. 可能会导致页面加载速度变慢。 2. 对搜索引擎的友好度可能较低。 3. 不支持某些浏览器和设备。
制作框架网页的工具
为了制作框架网页，常用的工具包括HTML、CSS和JavaScript。这些工具可以帮助我们创建并控制页面的不同部 分和功能。
框架网页的HTML结构
框架网页的HTML结构包含一个父框架和多个子框架。父框架定义整个页面的 布局和导航，而子框架则填充具体的内容。
框架网页中的嵌套页面
在框架网页中，可以嵌套其他网页作为子框架的内容。这使得我们可以将不 同的网页组合在一起，形成一个整体的页面。
常用的框架网页布局
单列布局
适用于简单的网页，内容按照垂 直方向排列。
两列布局
适用于较复杂的网页，内容分为 两列显示。
三列布局
适用于更复杂的网Βιβλιοθήκη ，内容分为 三列显示，通常包括左侧导航、 主要内容和右侧边栏。
制作框架网页
在本节课中，我们将介绍框架网页的基本概念和优缺点，以及制作框架网页 所需的工具和HTML基本语法。
什么是框架网页
框架网页是一种以分割页面的方式来展示不同内容的网页。它提供了一个灵活的布局结构，使得页面能够同时 显示多个不同的内容。
框架网页的优缺点
优点
1. 提供多个页面内容的同时展示。 2. 方便页面内容的更新和维护。 3. 允许内容和导航的分离。
任务一运用框架制作网页课件
（2）在横幅中录入文字与背景 （3）在左侧用新建表格，录入各导航文字
（4）在主框架录入文字与背景 （5）学会保存网页
课后反思
本课主要是让学生在Frontpage中使用页面框架来制作一个网页。利 用Frontpage制作网页，这部分内容关于操作技能方面对于八年级的 学生来说难度并不算大，在学习过word的基础上，大部分学生能够 利用知识迁移比较快的掌握制作网页的一般方法。课一开始，我就 让学生了解使用页面框架制作网页的优点，从而激发学生学习的兴 趣。在前面经过Frontpage几节课的学习后，大部分学生已经掌握了 用表格制作网站的一般步骤，但是对于框架网页学生了解的不多， 如果单纯的讲授框架网页概念的话，学生难以理解，因此通过对学 生经常浏览的网站的介绍，让学生对框架网页产生一个比较感性的 认识，有通过我的操作，让学生感受到框架网页较普通网页的优势。 通过本课的学习，班上的学生基本上掌握了使用框架制作网页的一 般方法。
了解框架
框架是浏览器窗口中的一个区域，在框架中可以 显示其他的网页。
表格制作与框架制作网页区分 如图所示：
创建框架
给框架网页添加内容
A）框架网页里各框架中的内容可逐一输 入编辑，也可以利用已有的网页快速复 制粘贴。B）背景可从图片中搜索。创建左框中导航栏
A利用前面学习知识，执行表格-插入-表 格命令
B在每栏中录战
在本课的上机实战中，将运用本课所学的框 架知识布局一个框架页面。完成后的最终效 果如图：
本页面主要分为3个框架构成， 建立框架时采用预定义框架进行 创建。上面框架用于放置标题， 左侧框架用于放置导航栏，右侧 框架用于显示主要内容。具体操 作如下： （1）打开站点，新建网页，单 击“其他网页模板”，选择“框 架见面”中的“横幅与目录”.
框架网页的制作
2 4添加新字体 3选择其中一种
3、下框架的制作
修改文字大小
选择本行中表格背景图， 如所选图像不在网页根 目录中，则按照提示方 法复制图像到网页所在 位置的“images”中
3、下框架的制作
添加图像到文字下一行的单元格中，每格 一图，也可尝试将单元格合并，四幅图插 入到一行中。 给图像添加超链接：选择中国儿童网图片， 右键-创建链接
3、下框架的制作
1、按照上框架制作的方法，插入表格：3 行，4列，宽780，其余为0 2、合并第一行的四个单元格并复制相应 文字到下框架的第一行中（ctrl+c复制， ctrl+v粘贴） 3、表格中任意处单击，在属性面板中选 择“页面设置”调整字体和背景
3、下框架的制作
修改字体四部曲
33行44列宽列宽780780其余为其余为0022合并第一行的四个单元格并复制相应合并第一行的四个单元格并复制相应文字到下框架的第一行中文字到下框架的第一行中ctrlcctrlc复制复制ctrlvctrlv粘贴粘贴33表格中任意处单击在属性面板中选表格中任意处单击在属性面板中选择页面设置调整字体和背景择页面设置调整字体和背景4添加新字体修改字体四部曲修改文字大小选择本行中表格背景图如所选图像不在网页根目录中则按照提示方法复制图像到网页所在位置的images中添加图像添加图像到文字下一行的单元格中每格到文字下一行的单元格中每格一图也可尝试将单元格合并四幅图插一图也可尝试将单元格合并四幅图插给图像添加超链接
URL中输入：
4、版权
合并表格最下面一 行的单元格，键入 版权信息文字，版 权符号的添加方法 如右图所示
版权信息
学而不思则罔
分析：1、框架？框架集？有何作用？ 回顾：鼠标经过图像的制作方法 属性面板你会用了吗？ 思考：为什么网页及网页中的元素要存放 在一定的路径中？
网页设计建立框架网页
设置框架是否有边框。可选择的项目有“是”、“否”、“默认”。框架边 框的设置会优先于框架结构属性中边框的设置。在大多数情况下，不应该让框 架网页出现边框。 7、“边框颜色”
设置框架边框的颜色。对框架的边框颜色的设置要优先于对框架集边框颜色 的设置。框架颜色的设置会影响到相邻框架边框的颜色。 8、“边界高度”和“边界宽度”
上一页
下一页
谢谢！
上一页
下一页
项目9 建立框架网页
教学内容 教学目的 教学重点 教学难点 教学过程
三、通过超级链接控制框架显示的内容 1、选中框架。 2、在框架属性面板上，“框架名称”一项给框架命名，命名的要求参考前面 框架属性面板设置的相关内容。 3、设置链接的目标框架
在框架页面中选择一个链接，在“目标”弹出式菜单中，选择链接的文档应 在其中显示的框架或窗口。
上一页
下一页
项目9 建立框架网页
教学内容 教学目的 教学重点 教学难点 教学过程
（二） 修改框架属性 在框架面板上或者在编辑窗口中选中框架，打开属性面版，如图所示：
上一页
下一页
项目9 建立框架网页
教学内容 教学目的 教学重点 教学难点 教学过程
框架属性的设置如下： 1、首先从属性面板左上角图标，可以确定当前选中的是框架。 2、“框架名称” 给当前选中的框架命名。可以根据框架在整个框架网页中的位置命名，比如在上 面的叫做up，在左面的叫做left。也可以根据内容，放置导航条的叫做navi，放 置主要内容的叫做main，等等。 3、“源文件”
教学内容 教学目的 教学重点 教学难点 教学过程
保存网页，在浏览器中预览，效果如图：
上一页
下一页
《制作框架网页》PPT课件
8.4 设置框架和框架集属性
框架属性确定了框架集内各个框架的 名称、源文件、边框的框架能否调整大小 等。框架集属性确定框架的大小和框架之 间的边框宽度和颜色等。在框架结构文档 中，框架和框架集都有各自的属性设置面 板，它们的属性应该分别进行设置。
8.4.1 框架的属性
1．启动框架属性面板
图8-10 “框架”控制面板和框架属性面板
创建框架的目的是在框架中建立新的 网页或打开已有的网页文档。
8.3.4 保存框架和框架集
框架集文件和与之相关的框架文件必 须先保存，才能在浏览器中预览整个框架 网页内容。可以分别保存框架集页面或框 架页面，也可以同时保存所有打开的框架 文件和框架集页面。
1．保存框架
图8-9 “保存为”对话 框
2．保存框架集
利用框架结构，可以把导航条内容固 定在页面的顶部、左边或右边。在浏览网 页时，用户可以直接选择导航条上相应的 内容，切换到所对应的页面，这都需要事 先对各个框架建立超链接。
要想在框架内使用链接，必须为链接 设置一个目标，该目标是指框架内链接要 打开的网页内容。根据链接目标的不同， 框架中的链接主要有两种：框架内的链接 和关键字的链接。
2．设置框架的属性
8.4.2 框架集的属性
1．启动框架集属性面板
图8-11 “框架”控制面板和框架集属性面板
2．设置框架集的属性
8.4.3 设置或更改框架的属性
1．设置框架的大小 2．设置框架和框架集的边框 3．设置框架或框架集的边框颜色 4．改变框架的背景色
8.5 链 接 框 架 的 内 容
8.3 编 辑 框 架
8.3.1 选定框架和框架集
在对框架进行编辑操作之前必须先选 择所需的框架，可以直接在网页文档视窗 中选择框架，当然利用“框架”控制面板 对框架进行操作比较方便。
DW创建框架网页
Dreamweaver基础篇
7.2 创建框架和框架集
在Dreamweaver中预定义了多种框架集，可以很方便地创建想要的框 架网页。
创建框架集 选择预定义的框架集将自动设置创建布局所需要的所有框架集和框架，它 是迅速创建基于框架布局的最简单方法。创建框架集的具体操作步骤如下。 1．选择菜单中的【文件】|【新建】命令，打开【新建文档】对话框，在 对话框中选择【常规】选项卡中的【类别】|【框架集】|【上方固定，左 侧嵌套】选项。如图7-1：
Dreamweaver基础篇
2．【确定】按钮。选中头部框架，在【属性】面板中单 击【源文件】文本框右侧的【浏览文件】按钮，打开【选 择HTML文件】对话框，在对话框中选择top1.htm。 3．单击【确定】按钮，插入文件。 4．将光标放置在左侧框架中，修改页面属性，在【属性】 面板中单击【源文件】文本框右侧的【浏览文件】按钮， 在打开的【选择HTML文件】对话框中选择leftl．htm，单 击【确定】按钮，插入文件。 5．将光标放置在右侧框架中，修改页面属性，在【属性】 面板中单击【源文件】文本框右侧的【浏览文件】按钮， 在打开的【选择HTML文件】对话框中选择right.htm，单 击【确定】按钮，插入文件。
Dreamweaver基础篇
Dreamweaver基础篇
7.4 设置框架和框架集属性
设置框架属性 使用框架【属性】面板可以查看和设置大多数框架属 性。选中一个框架，选择菜单中的【窗口】|【属性】命 令，打开【属性】面板中显示选中的框架属性。 框架【属性】面板参数如下。如图7-12：
Dreamweaver基础篇
Dreamweaver基础篇
Dreamweaver基础篇
2.单击【创建】按钮，即可创建一上方固定，左侧嵌套的框架 网页。如图7-2：提示：还可以用以下两种方法创建框架网页：
Dreamweaver CS3网页制作基础教程第07章 使用框架布局页面
7.7 创建浮动框架
选择【插入记录】/【标签】命令，打开【标签选择器】对话 框，然后展开【HTML标签】分类，在右侧列表中找到 “iframe”。单击【插入】按钮打开【标签编辑器－iframe】 对话框进行设置
7.8 实例──布局“世界风景图片导航”网 页
通过前面内容的学习，读者应该对框架的基本知识有了一定的 了解。本节将综合运用框架知识来布局“世界风景图片导航” 网页，以进一步巩固所学内容。
7.1 认识框架
框架是设计网页时经常用到的一种布局技术。利用框架可 以将浏览器窗口分成多个区域，在每个区域显示不同的内 容。各个区域之间可以毫无关联，这些区域有各自独立的 背景、滚动条和标题等。通过在这些不同的区域之间设置 超级链接，就可以在浏览器窗口中呈现出有动有静的效果。
7.2 创建和保存框架
7.4 设置框架属性
设置框架集属性 设置框架属性
7.4.1 设置框架集属性
7.4.2 设置框架属性
7.5 在框架中设置超级链接
在没有框架的文档中，按照指向的对象窗口不同，链接目标 可以分为“_blank”、“_parent”、“_self”、“_top”等4种 形式。而在使用框架的文档中，又增加了与框架有关的目 标，可以在一个框架内使用链接改变另一个框架的内容。
7.3.1 选择框架和框架集
二、在编辑窗口中选择框架和框架集 按住Alt键不放，在相应的框架内单击鼠标左健即可选择该框架，被 选择的框架边框将显示为虚线。单击相应的框架集边框即可选择该框 架集，被选择的框架集边框也将显示为虚线。
7.3.2
拆分栏中选择【修改】/【框架集】菜单中的【拆分左框架】、【拆 分右框架】、【拆分上框架】或【拆分下框架】命令可以拆分框架。 也可以在【插入】/【布局】工具栏中单击相应的【框架】按钮来拆 分框架。这些命令可以用来反复对框架进行拆分，直至满意为止。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
① 如果一个站点在浏览器中显示为包含三个框架的单个 页面，该框架至少包括多少个独立的HTML文档？ ② 怎样删除已经创建的框架和框架集？ ③ 怎样使框架集在不同的浏览器窗口中均能正常显示？ ④ 如何防止个人网页中的内容被放到其他网站完整的框架网页
二．课堂小结
课程引导 学习目标
框架是网页中最常用的页面设计方式 之一，使用
知识讲解 课堂实践 教学总结 布置习题
框架不但可以方便地创建具有统一风格的页面，而且 也为设计网站节省了不少时间。当浏览框架网页时， 可以发现网页部分区域内容将不会发生任何改变，而 其他区域则会不断地更新内容。学习情境7主要学习了 框架的概念与特点，再详细讲解了框架的创建、保存、 属性的设置、嵌入式框架iframe等基本操作。
学习情境7 学习情境
制作完整的框架网页
相关知识点 ③ 框架的多种选择方法
课程引导 学习目标 知识讲解 课堂实践 教学总结 布置习题
按住Alt键单击此框架 框架面板选择 即被选中呈虚线框显示 Alt键+框架选择
学习情境7 学习情境
制作完整的框架网页
相关知识点 ④ 框架集的多种选择方法
课程引导 学习目标
相关知识点 ② 创建自定义框架
课程引导 学习目标 知识讲解 课堂实践 教学总结 布置习题
选择“文件>新建”命令，在弹出的“新建文档”对 话框中选择“示例中的页>框架集”选项，在“示例页” 列表中根据需要进行选择，单击“创建”按钮，即可创建 框架集 或者在“插入”栏中选择“框架”按钮，在下拉列表 中选择框架类型后也可创建框架集
网页设计与制作
——学习情境7：制作完整的框架网页
主讲教师：谭荣华
学习情境7 学习情境
制作完整的框架网页
课程引导 学习目标 知识讲解 课堂实践 教学总结 布置习题
概述 在网页中，除了使用表格和AP Div定位外， 还可以使用框架进行定位。使用框架结构设计 的HTML文件，可以将整个浏览器窗口分成几个 独立的小窗口，一个窗口就是一个框架，每一 个框架可分别载入不同的网页文件，此外，框 架之间是可以相互控制的。
架和内容嵌入现有的网页中。在Dreamweaver中可以使用 “标签编辑器”来创建嵌入式框架。其中列出了绝大部分 语言所用到的标签及其属性参数，对于编写代码的设计者 来说，这是得心应手的工具，有了它可以轻松找到所需要 的标签，然后根据列出的参数来使用它。 标签选择器：插入各种标签 标签库管理器：设置库属性和编辑库中的标签和属性
学习目标
当在文件中建立框架时，Dreamweaver可以创建一个无标题的框架集文件， 在每个框架中创建无标题文件，如果某个页面被划分成3个框架，它实际上包含 知识讲解 的却是4个独立的文件：一个框架集文件和3个框架内容文件。框架内容文件包 案例操作过程(P129-133) win1 win2 含了将出现在页面框架中的内容。 课堂实践
学习情境7 学习情境
制作完整的框架网页
课程引导 学习目标 知识讲解 课堂实践 教学总结 布置习题
专 业 知 识 目 标 1. 规划页面框架结构 2. 创建、选择页面框架 3. 设置页面框架和框架集的属性 4. 编辑页面框架 5. 创建嵌入式框架iframe
学习情境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 学习情境
制作完整的框架网页
相关知识点 ② 标签库编辑器的使用
课程引导 学习目标 知识讲解 课堂实践 教学总结 布置习题
初学者学习标签及其属性的很好的工具
学习情境7 学习情境
制作完整的框架网页
综合案例实训 – “某幼儿园”框架页面的设计与制 作 页面效果图
课程引导 学习目标 知识讲解 课堂实践 教学总结 布置习题
专 业 素 质 目 标 1. 团队协作精神 2. 沟通表达能力 3. 乐观精神 4. 敬业精神 5. 责任感 6. 效率观念 7. 结构布局能力
学习情境7 学习情境
制作完整的框架网页
案例01 – 创建上方固定、左侧嵌套的框架网页
课程引导 学习目标 知识讲解 课堂实践 教学总结 布置习题
教 学 案 例
课程引导
案例02 – 创建嵌入式框架iframe
学习目标 知识讲解
案例操作过程(P135-137)
课堂实践 教学总结
相关知识点(P137-138)
布置习题
学习情境7 学习情境
制作完整的框架网页
相关知识点 ① 标签选择器的使用 嵌入式框架和框架网页类似，它可以把一个网页的框
课程引导 学习目标 知识讲解 课堂实践 教学总结 布置习题
教学总结
win3 相关知识点(P133-135)
布置习题
学习情境7 学习情境
制作完整的框架网页
相关知识点 ① 创建预定义框架
课程引导 学习目标 知识讲解 课堂实践 教学总结 布置习题
选择“查看>可视化助理>框架边框”命令，然后利用 鼠标拖动框架边框的方法可以创建框架
学习情境7 学习情境
制作完整的框架网页
学习情境7 学习情境
制作完整的框架网页
课程引导 学习目标 知识讲解 课堂实践 教学总结 布置习题
1. 对比标签编辑器iframe属性和生成的HTML代码，找 出其对应关系 2. 上网搜索相关知识，说明iframe与一般框架的区别
学习情境7 学习情境
制作完整的框架网页
专业能力目标
课程引导 学习目标 知识讲解 课堂实践
1. 掌握制作框架网页的方法 学习目标
专业知识目标
专业素质目标
教学总结 布置习题
学习情境7 学习情境