网页教案设计5由刀豆文库小编整理,希望给你工作、学习、生活带来方便,猜你可能喜欢“设计网页教案”。
第五章
框
架
教学目标:
1.了解使用框架的优缺点;
2.掌握框架网页在创建、选择、设置、存储方面的特点; 3.掌握框架和框架集的创建; 4.掌握框架结构网页的制作; 5.掌握嵌入式框架的使用; 教学重点:
1.框架结构网页的制作; 2.框架与框架集的创建; 教学难点:
嵌入式框架 教学时间
4课时(2节理论课,2节实验课)教学过程
§5.1 创建框架网页
一、框架和框架集
1.框架的概念
框架是浏览器窗口中的一个区域,用于显示独立的HTML文档。两个或两个以上的框架组合成一个见面。框架经常用于导航,一个框架显示包含导航栏目的文档,另一个框架显示含有内容的文档。
2.框架集的概念
在网页上定义的一个区域就是单个框架,而框架集则记录了同一个网页中多个框架的布局、超链接和属性信息。利用框架可以把浏览器窗口划分为若干个区域,每个区域可以添加任意网页元素,也可分别显示不同的网页。
注意:
框架集也是HTML文件,但它本身并不包含要显示的HTML内容,它只是向浏览器提供应如何显示一组框架及在这些框架中应显示哪些文档。
3.框架与框架集的关系
框架集与框架之间的关系其实就是包含与被包含的关系,框架集相当于一个容器,框架则是放在容器中的东西,框架集记录了框架的位置,以及框架中包含的网页的链接地址。
二、创建框架
Dreamweaver中给出了框架的预定格式,一般采用预定格式即可创建框架页。
七、设置框架集属性
选取框架集后,其【属性】面板如下图所示。
(1)边框:是否在浏览器中显示边框。(2)边框宽度:设置边框的宽度。(3)边框颜色:设置边框颜色。
(4)列:用于设置框架的列宽,默认单位为像素。
§5.2嵌入式框架
一、嵌入式框架
通过在HTML代码窗口中插入 /iframe>标签来嵌入框架,它通过在标签中命名、设置框架属性及链接文档路径来完成框架功能。
二、嵌入式框架的步骤
建立嵌入式框架的具体操作步骤如下:
(1)嵌入浮动框架的网页文档,将光标定位在要嵌入框架的位置。(2)代码视图,在光标处输入“ /iframe>”
(3)窗口中即可看到一个灰色区域的矩形框,这就是嵌入式框架的范围。(4)中加入代码指定嵌入式框架的名称、大小,以及是否需要滚动条等信息。例如:
各项含义如下:
border=0表示边框为0;
marginwidth=0 marginheight=0 表示嵌入式框架的宽和高的边距均为0; src=”images/main.html”表示框架中调用的网页文件是main.html; frameborder=no 表示框架没有边框;
width=580 height=400表示框架的宽度为580像素,高度为400像素。本章小结
本章介绍了另外一个布局网页的方式-----框架,讲述了它的创建,编辑及属性设置,框架与框架集的关系。同时讲解了嵌入式框架的应用及代码的含义。本章作业
什么是框架?什么是框架集?二者之间有什么关系?