项目5 制作框架网页
项目六任务1制作班级网站首页----框架网页.
1．框架和框架集的创建与编辑。
2．设置框架和框架集属性。
教学环境
机房+电子教室
教学过程
教学内容
上节回顾
上节课讲到了表单的创建和设置以及表单的检查方法等内容。同学们应掌握各表单对象的插入和属性的设置方法。请大家回答下面两个问题：
1.表单的标记是什么？通常用什么布局？
2.表单对象有几种？
新课讲授
* _self放在相同窗口中（默认窗口无须指定）。
* _top放到整个浏览器窗口并删除所有框架。
6.保存框架集和框架页，按F12预览。
随堂实训
1.创建框架网页。
2.编辑框架页，并进行链接。
小结
通过本章的学习，了解框架技术，掌握了框架和框架集的创建、编辑以及属性设置，能够使用框架技术灵活布局网页。本节通过“班级网站”框架网页的创建为例，介绍了框架的相关知识，希望能够更好地进行网页设计制作。
一个框架结构有两部分网页文件构成：
框架和框架集是两个不同的概念。框架集是一个网页文件，框架的多少根据具体有多少网页来决定，每个框架中要显示的就是不同的网页文件。
<FRAMESET ROWS="200,300">
<FRAME NAME="Top" SRC="top.htm">
<FRAME NAME="Bottom" SRC="bottom.htm">
</FRAMESET>
<FRAMESET>…</FRAMESET>标记，并使用ROWS属性将左方垂直框架分割为两个水平框架（高度各为窗口高度的1/2）。
制作一个典型的网站框架
制作一个典型的网站框架第一篇：制作一个典型的网站框架学习情境1：制作一个典型的网站框架工作任务：制作一个典型的网站框架并将其应用于网页技能目标1、掌握创建和应用模板的方法2、掌握使用CSS美化网页的方法3、掌握网站的测试如发布1.1 任务描述在开发网站时，保持网站的风格一致是很重要的。
或者说在设计网站时，有时候多个页面上存在内容相同的地方。
这时候提高开发效率的一种方法就是先制作一个模板，其他页面使用这个模板进行进一步的设计。
如图1-1和图1-2 是一个名为“WEB设计论坛”网站的两个页面，在页面的左上角是网站的Logo，及简单的搜索提示，接下来是网站的导航栏，中间部分是两个页面不同的地方，而最下面网站版权信息也是一样的。
在制作这两个网页时，其实是先制作了一个模板，模板在DreamWeaver中的设计效果如图1-3所示，将不同的部分制作了一个可编辑区，从而实现了制作风格一致的网站的快速开发，本章我们就来学习模板的创建和使用，以及使用样式表美化网页，最后还要向大家介绍一下网站的测试与发布的知识。
图1-1 注册页面效果图图1-2 网站首页效果图1.2 任务实施为了完成任务描述里的网页效果，需要先设计一个模板，然后其他页面套用这个模板，根据页面本身需要实现的功能在可编辑区域内进行编码设计。
1.2.1制作模板并应用到其他页面1.创建模板Step1：新建一个站点，命名为WebDesignForum。
Step2：在站点下添加一个新文件，命名为home.html,其设计效果如图1-3所示，执行“文件”—“另存为模板”命令，命名为home.dwt，则在站点根目录下会自动创建一个“T emplate”文件夹，模板文件home.dwt就存放在该文件夹下面。
2.定义可编辑区可编辑区是指基于模板创建的页面中可以更改的内容，基于模板的页面中不可更改的部分成为“锁定区域”或“不可编辑区域”。
锁定区域用来体现网站统一的风格，如网站的Logo、导航条等，可编辑区是不同网页不同内容的体现，创建模板必须创建可编辑区，否则模板便没有任何的意义。
框架网页的创建
新建文档：“文件”菜单下的“新建文档”。
“插入”面板下的“布局”下的“框架”。 手动创建。
（1）使用“新建文档”对话框
操作步骤：
选择“文件”下的“新建”。 在“文档类型”列表中选择“实例中的页”，在“实例文件夹”中选 择“框架页”，在“实例页”列表中选择框架类型“上方固定”。
方法二：将光标定位在要插入嵌套框架集的框架中，选择“插 入”面板下的“布局”下的“框架”。
方法三：将光标定位在要插入嵌套框架集的框架中，选择“插 入”菜单下的“HTML”下的“框架”命令，在子菜单中选择 一种框架集类型。
框架网页的创建
上课要求
课前预习
将手机调到静音
认真做笔记 及时完成作业
学习目标
了解什么是框架网页 掌握框架网页的创建方法
创建框架网页
框架布局通常适合页面中有一个区域发生变化，而其他区域 不发生变化的网页，如网站的后台管理界面和一些论坛网页。
1．认识框架网页
框架：在框架网页中，浏览器窗口被划分成了若干区域，每个区域成为 一个框架。每个框架可显示不同的文档内容，彼此之间互不干扰。 框架的特征：当一个框架的内容固定不动时，另一个框架中的内容仍可 以通过滚动条进行上下翻动。 框架网页的组成：框架+框架集。 框架集：特殊的HTML文件，她定义几个框架的布局和属性，包括框架 的数目、大小和位置，以及在每个框架中初始显示的页面URL，见图71。 框架集文档本身不包含要在浏览器中显示的HTML内容，只是向浏览器 提供应如何显示一组框架，以及在这些框架中应显示哪些文件。
单击“创建”按钮，弹出“框架标签辅助功能属性”对话框， 可在“框架”下拉列表中选择某个框架，然后在“标题”文本 框中输入该框架的标题，通常保持默认设置。
项目5 制作框架网页
________________________________网页制作项目实训教程 ______________________________________________________________广东省×××职业技术学校学科教案本Teaching Plan20 年———20 年学年度 学期The (1st/2na)Semester of the Academic Year from 20 to 20学校（School ）学科（Subject ） 年级（Grade ）教师（Teacher ）重庆大学出版社 制注意：①按住Ctrl 键后单击每个任务即可跳转到对应的教案 ②单击按钮可返回目录 ③页面设置参数为： 纸张：B5 页边距左：1.5 页边距右：1.5《网页制作项目实训教程》目录项目5 制作框架网页任务1活动1 利用框架制作成语故事集首页教学课题任务1 活动1 利用框架制作成语故事集首页课题类型理论+实作课时安排2上课时间教学目标1.掌握框架网页的创建与保存2.掌握框架网页的链接操作教学重点1、2教学难点2辅助资源课件、多媒体、网络复习引入1.文件域。
2.列表与菜单。
教学手段教学过程师生互动活动设计课件讨论实作一、教师布置活动要求运用素材网页“Y5-01A.html”、“Y5-01B.html”、“Y5-01C.html”、“Y5-01D.html”、“Y5-01E.html”、“Y5-01F.html”、“Y5-01G.html”制作一个关于成语故事的框架网页，要求网页有标题，故事的题目以导航的形式表现，最终效果如下图所示。
二、师生讨论学习新知识1、框架网页的创建依次单击“插入”->“HTML”->“框架”菜单命令，在展开的下级菜单中可以布置任务：让学生明确本次课的内容讨论：如何实现该案例效果。
网页设计与制作设计框架网页
第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" →"框架"命令然后选择一种框架,框架集生 成时可以对每一个框架命名。
框架型网页的制作
实验六框架型网页的制作一、实验目的1、掌握框架集和框架的创建和保存；2、掌握框架、框架集的编辑和属性的设置；3、掌握框架超级链接。
二、实验内容利用框架制作如下图所示的页面效果，框架集网页为index.html，其中：图2-9-1为打开index.html的效果图；图2-9-2 单击左侧“勇敢的心”的网页效果图；图2-9-3 单击左侧“肖申克的救赎”的网页效果图；图2-9-4 单击左侧“阿凡达”的网页效果图；图2-9-5 单击左侧“战马”的网页效果图；图2-9-1 图2-9-2图2-9-3 图2-9-4图2-9-5三、知识点分解该实验主要涉及的知识点就是框架和框架集的保存以及设置超链接的目标框架。
四、实验步骤1、选择[文件]/[新建]菜单命令。
2、在“新建文档”对话框“示例中的页”列表中选择“框架集”选项。
3、从“框架集”列表选择相应的框架集，如图2-9-8所示。
图2-9-8 “新建文档”对话框4、单击按钮，则会弹出“框架标签辅助功能属性”对话框，为每一框架指定一个标题，单击“确定”按钮，则上方框架标题为“topFrame”，左侧框架标题为“leftFrame”，右侧框架标题为“mainFrame”。
5、选择[查看]/[可视化助理]/[框架边框]菜单命令，则在文档中就会出现框架的边框。
6、选择[文件]/[保存全部]菜单命令，将框架集文件保存为index.html，上方框架文件保存为top.html，左侧框架文件保存为left.html，右侧框架文件保存为main.html。
注意：对于框架集和框架文件保存的文件名，一定要做的看到文件名就能知道该文件对应与该框架集中的哪个框架。
7、选择[窗口]/[框架] 菜单命令，打开“框架”面板，直接在面板中单击最外面的框架集，打开属性对话框，设置“行值”：119px，再选择里面嵌套的框架集，设置“列值”：253px。
8、打开top.html，依次插入图片，定义图片宽和高均为200px。
框架网页的制作
框架网页的制作
■教学目标
1.知识与技能
（1）理解框架的概念与用途。
（2）掌握框架网页的新建、制作、编辑与保存的方法。
（3）初步掌握将框架结构与表格布局结合使用来制作网页。
（4）会在框架网页中设置超链接。
2.过程与方法
（1）通过对表格网页的分析以及表格与框架网页的对比，体验新知识（框架结构网页）的优点，从而促进其学习新知识。
（2）理解框架的概念与组成，学会分析网站的结构。
（3）感受框架网页的用途，体会其优点，从而明确框架网页设计技术的适用范围。
3.情感态度与价值观
（1）通过以“母亲节的祝福”为主题的框架结构网页制作活动，提升对母爱的理解，学会感恩。
（2）能够将表格与框架结构网页结合使用，在创作中体验乐趣。
4.行为与创新
在老师的引导下学会对比学习，培养对知识的主动探索、主动发现和对所学知识意义的主动建构。
■教学重点与难点
1.教学重点
框架网页的建立与保存。
2.教学难点
框架中超链接的使用。
■教学方法与手段
对比教学法、探究学习法、模仿学习法。
■课前准备
制作相同结构的用以对比的表格网页和框架网页以及给学生用于操作的网站半成品和素材。
■教学过程。
教学项目五 框架网页设计
1. 边框
2. 滚动条
3. 网页
ii.
建立框架网页步骤:
文件——新建——框架网页
iii.
框架的属性
名称：指定框架的控制名称
边距：框架中的内容距离框架边界和空白距离、
滚动条：设置框架窗口中是否出现滚动条
可调整性：设置框架在浏览器是还可以调整大小
间距：设置相邻框架边框之间的间隔大小
框架属性——设置边距、选项、滚动条
(三)设计制作演示中的框架网页 制作网上餐厅网页
制作网上家园网页
制作网上星缘网页
制作网上鲜花店网页
设定超级链接及目标框架
【课后小结】 通过网络空间网站的设计,熟练掌握利用框架来组织
布局网页内容,灵活运用目标框架来设计超级链接网页的 目标位置
【课后小结】 本次课的学习，学会利用表格布局网页中的内容，并能
i.
拆分框架
框架——拆分框架
i. 框架替换 框架自身中的内容替换 目标框架替换
目标框架中网页替换步骤: 1． 命名目标框架 在定义目标框架替换之前，给目标框架命名 2． 链接到目标框架 网页默认值：当前框架中网页默认的目标框架 相同框架：当前网页所在的框架 整页：整个浏览器窗口 新建窗口：浏览器重新启动一个界面，将目标文件显示在 该界面的窗口中 父框架：当前框架上一级框架 框架嵌套使用
教学项目 五 框架网页设计 【基本内容】
讲解框架网页的设计过程 【教学要求 网络空间站 (一)以SMAPLE12为例, 演示框架网页的效果
单击网络生活,打开框架网页:
单击网络ROOM,打开网页:
(二) 框架网页的相关概念
i.
基本元素
网页设计类之框架的制作
框架所谓框架就是将一个窗口划分为若干个独立的子窗口（或区域），每个子窗口可构成一个独立的网页，即可有各自的标题、背景、内容等，对各个区域可进行独立的操作。
如为了使网页的版面结构清晰，我们可以对网页进行适当的区域分割，使网页中不同内容在不同区域中显示，达到布局合理的目的。
1、创建框架创建框架又叫创建框架集页面，有三种方法：（1）单击主菜单“文件”→“新建”命令或者单击标准工具栏上的按钮，弹出“新建文档”对话框，然后选择“框架集”如图1所示，选择所需的结构。
图1新建框架集窗口（2）在已打开的空页面中，单击主菜单“插入”→“框架”命令，在其子菜单中可以选择不同的框架样式，单击其中一种命令就可在编辑页面中插入相应的框架。
（3）在已打开的空页面中，直接单击“插入”面板组上的“框架”面板，然后选择所需的结构，如图2所示。
图2框架面板如选择所示的第一种结构：垂直拆分。
“显示设计”视图自动被拆分为左右两个窗口，显示如图3所示。
图3垂直拆分另外，可以通过单击主菜单“窗口”→“其它”→“框架”来显示或隐藏系统所提供的一个帮助编辑的“框架”面板。
框架分割线，可单击“文档”工具栏的“视图选项”按钮（弹出如图4所示的菜单）→“可视化助理”→“框架边框”进行显示和隐藏。
图4选择框架边框显示（隐藏）2、编辑框架集页面（1）手工调整框架页如图3所示。
①将鼠标移至区域之间的边框线，鼠标光标变成双向箭头，然后左右拖动可以调整左右窗口的大小。
②如需将页框再进行分割，可先在“框架”面板中选中对应的框（此时框线会变粗），如图5所示的小窗口。
再在“显示设计”视图中拖动相应边框至合适位置即可。
图5框架再分割如在“框架”面板中选取右框，拖动“显示设计”视图的右框下边框，即可将右框分割成一上下框结构，如图5所示。
③删除某个页框时，只需拖动其边框线至整个编辑窗口的外边框即可。
（2）通过属性检查器设置框架页在“框架”面板中，单击外框（或单击“显示设计”视图中各框架间的分割框线）以选取整个框架，属性检查器就会切换成框架集属性检查器，如图6所示。
网页设计实验报告(学生)
实验报告2011 至 2012 学年度第一学期课程名称：网页设计系别班级： 10 数本学号： 1006131031 姓名：陶士林授课老师：丁邦旭指导老师：丁邦旭目录实验项目一：创建站点和管理站点实验项目二：在网页中建立各种超链接实验项目三：利用表格设计和制作网页实验项目四：应用框架技术制作网页实验项目五：应用层技术制作网页实验项目六：用表单收集数据实验项目名称：一、创建和管理站点实验地点：实验楼C407日期：2011年9月26日实验内容1、建立本地站点。
2、搭建站点结构。
3、管理和维护站点。
实验目的1、掌握站点的总体规划方法。
2、掌握本地站点的定义方法。
3、掌握站点结构的搭建方法。
4、掌握站点的管理与维护方法。
实验具体操作过程1、创建本地站点（1）在菜单栏中选择“站点”—>“新建站点”命令。
在文本框中输入网站的名称“畅想未来”。
站点的URL可以暂时不输入，到上传网站的时候再添加。
（2）单击“下一步”按钮，设置站点需要使用服务器端技术。
由于此时新建的是静态站点，并不需要相关技术，所以选择“否，我不想使用服务器技术”单选按钮。
（3）单击“下一步”按钮，设置站点的编辑方式和存储位置。
大多数情况下，用户都是先在自己的计算机上编辑网页，然后通过FTP上传到远程服务器上，因此选择第一个选项。
在文本框中直接输入“D：\furture”。
（4）单击“下一步”按钮，设置计算机与服务器的链接方式，这里在下拉列表框中选择“无”选项。
（5）单击“下一步”按钮，Dreamweaver列出前面设置的各项信息以供用户检查。
（6）在确认无误后，单击“完成”按钮。
系统会在D盘的根目录下自动创建“furture”文件夹，同时“文件”面板显示出刚才新建的站点。
2、搭建站点结构（1）在“文件”面板中，单击文件下拉列表框，从中选择“畅想未来”，打开“畅想未来”站点。
（2）右键单击站点根文件夹，从弹出的快捷菜单中选择“新建文件夹”命令，在本地站点的根文件夹下创建一个新文件夹。
《第2单元制作网页13制作框架网页》教案
-理解框架布局的限制性：框架布局对页面设计的灵活性有一定的限制，学生需要学会如何在限制条件下进行有效的布局设计。
举例：针对框架之间的相互关系，讲解如何使用window.frames[name]获取特定框架对象，以及如何在不同框架之间传递数据。对于浏览器兼容性问题，指导学生如何检测浏览器类型，采取相应的兼容性解决方案。在框架布局的限制性方面，通过实际案例说明如何利用CSS样式调整框架边框、背景等，以实现更美观的布局效果。
3.成果展示：每个小组将向全班展示他们的讨论成果和实验操作的结果。
（四）学生小组讨论（用时10分钟）
1.讨论主题：学生将围绕“框架网页在实际生活中的应用”这一主题展开讨论。他们将被鼓励提出自己的观点和想法，并与其他小组成员进行交流。
2.引导与启发：在讨论过程中，我将作为一个引导者，帮助学生发现问题、分析问题并解决问题。我会提出一些开放性的问题来启发他们的思考。
3.重点难点解析：在讲授过程中，我会特别强调框架集和框架的设置方法，以及框架网页的布局设计这两个重点。对于难点部分，如框架间的相互关系和浏览器兼容性问题，我会通过举例和比较来帮助大家理解。
（三）实践活动（用时10分钟）
1.分组讨论：学生们将分成若干小组，每组讨论一个与框架网页相关的实际问题。
2.实验操作：为了加深理解，我们将进行一个简单的实验操作，搭建一个基础的框架网页。这个操作将演示如何创建框架集和框架，以及如何为框架指定加载的网页。
-框架网页的布局设计：强调如何根据页面内容需求设计合理的框架布局，以及如何调整框架之间的比例和边框。
举例：在讲解框架集和框架的设置方法时，通过实际案例展示如何使用cols="25%,*"设置左右结构的框架集，以及如何为框架指定加载的网页src="page.html"。
第3单元 制作框架网页
5、认识框架网页的视图 （1）用FrontPage打开一个框架网页，单击“设计” 选项卡，进入“设计”视图。 （2）单击“拆分”选项卡，进入“拆分”视图。 （3）单击“无框架”选项卡，进入“无框架”视图。 （4）单击“代码”选项卡，进入“代码”视图。 （5）单击“预览”选项卡，进入“预览”视图。
二、设计框架网页
五、保存框架网页
1、在菜单栏中选择“文件/保存”，弹出“另存为”对话框。 2、在“另存为”对话框中一一保存各个框架（如横幅框架、 目录框架和主要框架）。 （1）在“另存为”对话框中，输入对应文件和网页标题，保 存“横幅框架”。 （2）单击“保存”按钮后，预览框中又选中了目录框架，输 入对应文件名和网页标题，保存“目录框架”。 （3）保存完目录框架后，预览框中显示选择了整个网页框架， 输入对应的文件名和网页标题，保存网页设置文件。
将“多面的我”网页设计为框架网页。 多面的我（标题）
（目录） 好文的我 好动的我 好摄影的我
（单击左边目录，动态显示相应内容）
知识充电站： 如果一个站点在浏览器中显示为包含3个框架的单个页面，则它实际上 至少由4个单独的页面组成：框架集页面以及3个单个页面，这3个单个 页面包含这些框架内初始显示的内容。当在Frontpage中设计使用框架 集的页面时，必须全部保存这4个页面，以便该页面可以在浏览器中正 常工作。
一、认识框架网页
1、框架网页的作用：是将浏览器窗口划分为若干个不同的区 域，每个区域可以分别显示不同的网页。 2、框架的组成：框架集和单个框架。 3、框架集和单个框架的定义：框架集是指框架网页显示的框 架数、框架的大小、载入框架的网页源和其他可定义的属 性等。单个框架是指在网页上定义的一个区域。 4、框架网页：是通过超链接将不同的单个框架建立起了联系， 从而实现页面的导航和页面间的交互操作。
框架网页的特点及制作方法.【范本模板】
框架是网页中经常使用的页面设计方式，框架的作用就是把网页在一个浏览器窗口下分割成几个不同的区域，实现在一个浏览器窗口中显示多个HTML页面。
使用框架可以非常方便的完成导航工作，让网站的结构更加清晰,而且各个框架之间决不存在干扰问题。
利用框架最大的特点就是使网站的风格一致。
通常把一个网站中页面相同的部分单独制作成一个页面，作为框架结构的一个子框架的内容给整个网站公用。
一个框架结构有两部分网页文件构成：框架(Frame）:框架是浏览器窗口中的一个区域，它可以显示与浏览器窗口的其余部分中所显示内容无关的网页文件.框架集（Frameset）:框架集也是一个网页文件,它将一个窗口通过行和列的方式分割成多个框架，框架的多少根据具体有多少网页来决定，每个框架中要显示的就是不同的网页文件。
一、创建框架在创建框架集或使用框架前，通过选择“查看/可视化助理/框架边框”命令，使框架边框在文档窗口的设计视图中可见.1、使用预制框架集（1、新建一个HTML文件，在快捷工具栏选择“布局"，单击“框架"按钮,在弹出的下拉菜单中选择“顶部和嵌套的左侧框架”。
(2)、使用鼠标直接从框架的左侧边缘河上边缘向中间拖动，直至合适的位置,这样顶部和嵌套的左侧框架就完成了。
2、鼠标拖动创建框架（1）、新建普通网页，命名后将其打开。
（2）、把鼠标放到框架边框上,出现双箭头光标时拖拽框架边框，可以垂直或水平分割网页。
二、、保存框架每一个框架都有一个框架名称，可以用默认的框架名称,也可以在属性面板修改名称，我们采用系统默认的框架名称topFrame(上方）、leftFrame（左侧）、mainFrame（右侧）。
选择菜单栏>文件>保存全部，将框架集保存为index.html,上方框架保存为07.html，左侧框架保存为08.html,右侧框架保存为09。
html。
这个步骤虽然简单，但是很关键，只有将总框架集和各个框架保存在本地站点根目录下，才能保证浏览页面时显示正常。