项目六 设计制作 “班级”网站
教学班级
课时
2
任课教师
仝素梅
授课课题
任务 2 制作班级网站子页      浮动框架网页
教学目标 ：
1． 了解浮动框架在网页中的应用。
2． 掌握浮动框架网页的制作方法。
教学重点：
1．浮动框架网页的制作方法。
2．浮动框架网页的链接方法。
教学难点
1. 浮动框架网页的制作方法。
2. 浮动框架网页的链接方法。
教学环境
机房 +电子教室
教学过程
教学内容
上节课学习了框架和框架集的创建与编辑方法，
以及框架和框架集属性的设置方
上节回顾
法。请同学们回答两个问题
：
1. 三个框架组成的网页有几个？它们的默认名字分别是什么？
2. 框架网页的标记有哪些？
新课讲授
一． 设置浮动框架
浮动框架是一种特殊的框架页面，
在浏览器窗口中可以嵌套子窗口，
在其中显示
页面的内容。 浮动框架可以插入在页面中的任意位置。
浮动框架需要用手写代码的方
浮动框架需要用手写代码的方
式来实现。
1．设置浮动框架——
<IFRAME> 标记
<IFRAME> , </IFRAME> 标记
属性说明：
ALIGN= “ {LEFT ， RIGHT ，
CENTER} ”：指定浮动框架的对齐方式（左对
齐、居中、右对齐）
BORDER= “ n”
：指定浮动框架的框线大小（仅适用于    IE4 ）
BORDERCOLOR= “ #RRGGBB ”或“ , ”：
指定浮动框架的框线颜
FRAMEBORDER= “ {1,0} ”：
指定浮动框架的框线显示与否
HEIGHT= “n”：
指定浮动框架的高度
MARGINHEIGHT= “n”：指定浮动框架的上下边界大小
NAME= “, ”：
指定浮动框架的名称
SCROLLING= “
{YES ，NO} ”：指定浮动框架的卷轴显示与否
SRC=“URL ”：指定浮动框架的来源网页的相对或绝对位置
WIDTH= “n”：指定浮动框架的宽度
特殊的 TARGET 属性值
除了我们使用 <FRAME> 标记为框架指定的名称， TARGET 属性的值也可以是如
表 6-1 所示的特殊名称。
属性值
用途
TARGET“=框架名称”
将超链接或热点所连接的网页显示在双引号（ “）所指定的框架名称中
TARGET“= self ”
将超链接或热点所连接的网页显示在目前的框架中
TARGET=“ blank ”
将超链接或热点所连接的网页显示在新打开的窗口中
TARGET“= parent ”
将超链接或热点所连接的网页显示在目前文件的父框架中
TARGET“= top ”
将超链接或热 所连接的网页显示在浏览器窗口，取消所有框架
关于上述的属性值，有下列几个注意事项： 若超链接或热点所连接的网页位于其他网站， 而您不希望浏览者就此离开您 的网页，可以使用 TARGET= “_blank” ,将所连接的网页显示在新窗口，这样您的网 页也会显示在屏幕上。
如果您想将超链接或热点所连接的网页显示在没有框架的网页，可以使用 TARGET= “ _top”。
当没有使用 TARGET 属性时，表示将超链接或热点所连接或热点所连接的 网页显示在目前的框架中。
当使用 <BASE> 标记的 TARGET 属性指定目标框架时， 表示将全部超链接或 热点所连接的网页显示在指定的框架中。
2．浮动框架的链接
在浮动框架中， 也可以制作页面之间的链接。 创建链接的方式同样是先用 name 属性为浮动框架命名，再将链接的目标浏览器窗口指向命名的浮动框架。 二．制作浮动框架页面
1．制作浮动框架网页 新建一个“友好班级”网页，在 网页中插入浮动框架，代码如下： <div id="iframe">
<iframe align="middle" name="iframe" scrolling="auto" width="820" height="500" frameborder="1" src="11wang.html"></iframe>
</div>
2．分别创建 11wang.html ，12ruanjian.html ，12wang.html 和 11ying.html 四个网页， 在浮动框架中显示，添加代码如下：
<a href="11wang.html" target="iframe">
3．将“友好班级”网页和“班级网站”首页进行链接，制作网页效果图如下：

随堂实训
制作一个浮动框架网页并和首页链接。
小结
制作框架网页技巧： 1．使用包含框架的网页，必须先对框架集文件和框架进行保存。 2．选择框架通常有两种方法：
按住 “Al键t ”，在框架内部单击某个框架，即可选中框架。
在 “框架 ”面板中单击某个框架，即可选中框架。
3． 选择框架集通常有两种方法：
在 Dreamweaver CS4 主窗口中，单击菜单 “窗口 ”→框“架 ”或按组合键 “Shift+F2，”打开如图所示的 “框架 ”面板。 在面板中单击框架的外层边框即可选中框架
在包含框架的网页文档中， 将鼠标指向框架最外的边框线，
箭头形状时，单击鼠标左键即可选中框架集。
当鼠标变成双向
布置作业
一 、选择题
1. 在 Dreamweaver 中，关于为框架设置链接，说法正确的有（ A）设置链接前，必须给目标框架命名。
B）设置链接前，可以不给目标框架命名。 C）将链接的目标指向目标框架的名称。
D）以上说法都错。
2. 在框架属性面板中不能定义（ ）。
A）是否有边框
html首页制作B）边框的颜
C）边框的宽度
D）源文件
3. 一个包含三个框架的框架集对应（ ）个网页文件。
A） 3 B）4 C）5 D ） 6 二、简答题
1. 什么是框架？
2. 怎样设置框架的属性？
3. 怎么设置框架的链接？ 4．浮动框架有什么特点？
）。
教学后记
利用框架设计网页经常被应用在网站的制作中，特别是在论坛中有着广泛的应 用。框架设计不仅在结构上显得主次分明，在进行网页维护时也是非常省时省力。利 用框架制作的多个网页， 可以很方便地统一调整某一位置的内容。 比如要统一修改导 航栏， 只需要修改对应框架页的内容就可以了， 而其它引用该页面的框架集文件都会 自动更新。有效利用框架可以在网页设计中达到事半功倍的效果。