项目六任务1制作班级网站首页----框架网页.
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
教学难点
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）。
每个框架都具有自己的滚动条（如果内容太大，在窗口中显示不下），访问者可以独立难以实现不同框架中各元素的精确图形对齐，特别是在不同机器采用不同分辨率浏览网页时，对于不熟悉框架的制作者更是增添不少难度。
对导航进行测试可能很耗时间。
访问者可能难以将特定页面设为收藏。
（2）编辑框架
A.新建一个HTML文档，直接插入系统预设的框架就可以创建框架了
B.打开文件菜单，选择保存全部命令，系统会自动提示用户保存
C.保存框架时，在编辑区的所保存框架周围会看到一圈虚线
D.不能创建预设框架以外的其他框架的结构类型
3.判断题
（1）把框架集看成是一个可以容纳和组织多个文件的容器，而每个框架则是相互依赖的HTML文档。（）
A._blank
B._parent
C._self
D._top
2.多项选择题
（1）下面关于框架的构成及设置的说法正确的是（）
A.一个框架实际上是由一个HTML文档构成
B.每个框架都有自己独立的网页文件
C.每个框架的内容不受另外框架内容的改变而改变
D.一般主框架用来放置网页内容，而其他小框架用来导航
（2）下面关于创建一个框架的说法正确的是（）
布置作业
1.单项选择题
（1）下列关于框架的说法正确的一项是（）
A.通过框架可以将一个浏览器窗口划分为多个区域
B.框架就是框架集，框架集也就是框架
C.保存框架是指系统一次就能把整个框架保存起来，而不是单个保存
D.框架实际上是一个文件，当前显示在框架中的文档是构成框架的一部分
（2）在Dreamweaver中，要使在当前框架打开链接，目标窗口应该设置为（）
<NOFRAMES>…</NOFRAMES>标记：
若浏览器不支持框架，则显示<NOFRAMES>…</NOFRAMES>标记之间的网页内容。网页的框架数目、大小及位置须使用<FRAMESET>…</FRAMESET>标记的COLS或ROWS属性来定义。
以像素点数为单位：您可以直接用像素点数来表示框架的高度或宽度，例如：
（2）在Dreamweaver中，除了预设的框架类型以外，还可以使用重复插入或分割的方法，创建各种形式的框架。（）
教学后记
框架是网页中经常使用的页面设计方式，框架的作用就是把网页在一个浏览器窗口下分割成几个不同的区域，实现在一个浏览器窗口中显示多个HTML页面。使用框架可以非常方便的完成导航工作，让网站的结构更加清晰，而且各个框架之间决不存在干扰问题。利用框架最大的特点就是使网站的风格一致。通常把一个网站中页面相同的部分单独制作成一个页面，作为框架结构的一个子框架的内容给整个网站公用。
1、实例演练——创建框架网页
利用框架制作“班级网站”，效果图见课件。
1.框架的基本操作
（1）框架的作用及优缺点
框架是一个较早出现的HTML对象，框架的作用就是把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。使用框架布局的网页，可以使网站的结构更加清晰。
框架的优点：
访问者的浏览器不需要为每个页面重新加载与导航相关的图形，这样就加快了网页的下载速度。
注意：在框架式网页中制作超级链接时，一定要设置链接的目标属性，为链接的目标文档指定显示窗口。链接目标较远（其他网站）时，一般放在新窗口，在导航条上创建链接时，一般将目标文档放在另一个框架中显示（当页面较小时）或全屏幕显示（当页面较大时）。
“目标”下拉菜单中的选项：
* _blank放在新窗口中。
* _parent放到父框架集或包含该链接的框架窗口中。
<FRAMESET COLS=“*,2*,2*”> <FRAMESET ROWS=“*,*”>
2、操作步骤
1.运行dreamweaver cs4，打开新建文档对话框。
2.选择框架页示例文件夹，选择“上方固定，左侧嵌套”类型，单击创建。
3.选择“文件>保存全部”，将框架集保存为Framesetset.html，将每一个框架用系统默认的框架名称，保存为top.html（上方）、left.html（左侧）、main.html（右侧）。
建立框架网页的步骤可以简单归纳如下：
决定网页的框架数目、大小及位置。
制作框架的内容。
设置框架的格式，例如设置框架的上下界大小、框线大小、框线颜色、是否显示卷轴等。
针对不支持框架的浏览器设计网页内容。
（3）框架标记
<FRAMESET>…</FRAMESET>标记
<FRAMESET>标记包含框架网页的定义及各个框架的间距、维数、属性等。
项目六设计制作“班级”网站
教学班级
课时
2
任课教师
仝素梅
授课课题
任务1制作班级网站首页----框架网页
教学目标：
1．了解框架网页的概念。
2．掌握框架集和框架的创建和保存的方法。
3．掌握框架、框架集的编辑和属性的设置方法。
4．掌握框架页超级链接的方法。
教学重点：
1．框架和框架集的创建与编辑。
2．设置框架和框架集属性。
4.分别编辑各框架页，改变属性值，保存。
5.设置链接的目标属性。在保存mainFrame、leftFrame、topFrame的框架后，在目标下拉菜单中，还会出现mainFrame、leftFrame、topFrame选项，将mainFrame放到名为mainFrame的框架中，leftFrame放到名为leftFrame的框架中，topFrame放到名为topFrame的框架中。
<FRAME>标记：
<FRAME>标记是用来定义框架网页内某个框架的来源网页和属性，它必须放在<FRAMESET>…</FRAMESET>标记之间。
SRC=“URL”指定框架的来源网页的相对或绝对位置
范例：<FRAMESET ROWS=“2*,*”><FRAME NAME=“TOP” SRC=“bookmark.htm”><FRAME AME=“BOTTOM” SRC=“main.htm”> <FRAMESET >
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）。
每个框架都具有自己的滚动条（如果内容太大，在窗口中显示不下），访问者可以独立难以实现不同框架中各元素的精确图形对齐，特别是在不同机器采用不同分辨率浏览网页时，对于不熟悉框架的制作者更是增添不少难度。
对导航进行测试可能很耗时间。
访问者可能难以将特定页面设为收藏。
（2）编辑框架
A.新建一个HTML文档，直接插入系统预设的框架就可以创建框架了
B.打开文件菜单，选择保存全部命令，系统会自动提示用户保存
C.保存框架时，在编辑区的所保存框架周围会看到一圈虚线
D.不能创建预设框架以外的其他框架的结构类型
3.判断题
（1）把框架集看成是一个可以容纳和组织多个文件的容器，而每个框架则是相互依赖的HTML文档。（）
A._blank
B._parent
C._self
D._top
2.多项选择题
（1）下面关于框架的构成及设置的说法正确的是（）
A.一个框架实际上是由一个HTML文档构成
B.每个框架都有自己独立的网页文件
C.每个框架的内容不受另外框架内容的改变而改变
D.一般主框架用来放置网页内容，而其他小框架用来导航
（2）下面关于创建一个框架的说法正确的是（）
布置作业
1.单项选择题
（1）下列关于框架的说法正确的一项是（）
A.通过框架可以将一个浏览器窗口划分为多个区域
B.框架就是框架集，框架集也就是框架
C.保存框架是指系统一次就能把整个框架保存起来，而不是单个保存
D.框架实际上是一个文件，当前显示在框架中的文档是构成框架的一部分
（2）在Dreamweaver中，要使在当前框架打开链接，目标窗口应该设置为（）
<NOFRAMES>…</NOFRAMES>标记：
若浏览器不支持框架，则显示<NOFRAMES>…</NOFRAMES>标记之间的网页内容。网页的框架数目、大小及位置须使用<FRAMESET>…</FRAMESET>标记的COLS或ROWS属性来定义。
以像素点数为单位：您可以直接用像素点数来表示框架的高度或宽度，例如：
（2）在Dreamweaver中，除了预设的框架类型以外，还可以使用重复插入或分割的方法，创建各种形式的框架。（）
教学后记
框架是网页中经常使用的页面设计方式，框架的作用就是把网页在一个浏览器窗口下分割成几个不同的区域，实现在一个浏览器窗口中显示多个HTML页面。使用框架可以非常方便的完成导航工作，让网站的结构更加清晰，而且各个框架之间决不存在干扰问题。利用框架最大的特点就是使网站的风格一致。通常把一个网站中页面相同的部分单独制作成一个页面，作为框架结构的一个子框架的内容给整个网站公用。
1、实例演练——创建框架网页
利用框架制作“班级网站”，效果图见课件。
1.框架的基本操作
（1）框架的作用及优缺点
框架是一个较早出现的HTML对象，框架的作用就是把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。使用框架布局的网页，可以使网站的结构更加清晰。
框架的优点：
访问者的浏览器不需要为每个页面重新加载与导航相关的图形，这样就加快了网页的下载速度。
注意：在框架式网页中制作超级链接时，一定要设置链接的目标属性，为链接的目标文档指定显示窗口。链接目标较远（其他网站）时，一般放在新窗口，在导航条上创建链接时，一般将目标文档放在另一个框架中显示（当页面较小时）或全屏幕显示（当页面较大时）。
“目标”下拉菜单中的选项：
* _blank放在新窗口中。
* _parent放到父框架集或包含该链接的框架窗口中。
<FRAMESET COLS=“*,2*,2*”> <FRAMESET ROWS=“*,*”>
2、操作步骤
1.运行dreamweaver cs4，打开新建文档对话框。
2.选择框架页示例文件夹，选择“上方固定，左侧嵌套”类型，单击创建。
3.选择“文件>保存全部”，将框架集保存为Framesetset.html，将每一个框架用系统默认的框架名称，保存为top.html（上方）、left.html（左侧）、main.html（右侧）。
建立框架网页的步骤可以简单归纳如下：
决定网页的框架数目、大小及位置。
制作框架的内容。
设置框架的格式，例如设置框架的上下界大小、框线大小、框线颜色、是否显示卷轴等。
针对不支持框架的浏览器设计网页内容。
（3）框架标记
<FRAMESET>…</FRAMESET>标记
<FRAMESET>标记包含框架网页的定义及各个框架的间距、维数、属性等。
项目六设计制作“班级”网站
教学班级
课时
2
任课教师
仝素梅
授课课题
任务1制作班级网站首页----框架网页
教学目标：
1．了解框架网页的概念。
2．掌握框架集和框架的创建和保存的方法。
3．掌握框架、框架集的编辑和属性的设置方法。
4．掌握框架页超级链接的方法。
教学重点：
1．框架和框架集的创建与编辑。
2．设置框架和框架集属性。
4.分别编辑各框架页，改变属性值，保存。
5.设置链接的目标属性。在保存mainFrame、leftFrame、topFrame的框架后，在目标下拉菜单中，还会出现mainFrame、leftFrame、topFrame选项，将mainFrame放到名为mainFrame的框架中，leftFrame放到名为leftFrame的框架中，topFrame放到名为topFrame的框架中。
<FRAME>标记：
<FRAME>标记是用来定义框架网页内某个框架的来源网页和属性，它必须放在<FRAMESET>…</FRAMESET>标记之间。
SRC=“URL”指定框架的来源网页的相对或绝对位置
范例：<FRAMESET ROWS=“2*,*”><FRAME NAME=“TOP” SRC=“bookmark.htm”><FRAME AME=“BOTTOM” SRC=“main.htm”> <FRAMESET >