Download presentation
Presentation is loading. Please wait.
1
湖北职院计科系
2
教学内容 1、演示并讲解用框架制作的网页 2、框架的基本结构 3、框架的各种属性 4、框架结构之间的链接
3
教学目的 1、掌握框架的基本结构 2、掌握框架的各种属性 3、掌握框架结构之间的链接
4
教学重点 1、框架的各种属性
5
教学难点 框架结构之间的链接
6
引言： 窗口框架可用于将窗口画面分割成多个小窗口，且每个小窗口中，可以显示不同的网页，达到在浏览器中同时浏览不同网页的效果。HTML提供<frameset>标记和<frame>标记，让你很轻易地在文件中加入框架，其中前者用来定义整个框架组的分割方式，是采用水平或是垂直分割方式：后者用来宣告各框架的内容。
7
（一）演示并讲解用框架制作的网页 1、演示，如图4-1是中国茶吧网站中的网上商城页面
8
2、用框架制作页面内容。 （二）演示子项目的效果图 1、水平分割的效果图
9
2、嵌套框架的效果图
10
3、浮动框架的效果图
11
（三）如何制作水平分割的效果图 1、语法如下： <html> <frameset> <frame> </frameset> </html>
12
2、框架集标志属性说明 元素与属性 定 义 <frameset> 在文档中定义框架集 cols=n 按列创建框架集合的框架(n是像素宽度或百分比的集合) Rows=n 按行创建框架集合的框架(n是像素宽度或百分比的集合) frameborder=0,1 打开或关闭框架边框，默认值为1，显示框线。 border=n 边框的粗细 bordercolor=color 边框颜色 framespacing=n 定义框架之间的空间
13
4、代码如下： <frameset rows="260,*" frameborder=0> <frame src="wssc01.htm" name="up" scrolling=no> <frame src="C:\Documents and Settings\Administrator\桌面\shiyan4\『御茶园茶业』网上商城.files\index_show.htm" name="down"> </frame> </frameset>
14
5、效果图如下
15
（四）嵌套框架的制作 1、代码如下： <frameset cols="75%,*">
<frameset rows="260,*" frameborder=0> <frame src="wssc01.htm" name="up" scrolling=no> <frame src="C:\Documents and Settings\Administrator\桌面\shiyan4\『御茶园茶业』网上商城.files\index_show.htm" name="down"> </frameset> <frame src="C:\Documents and Settings\Administrator\桌面\shiyan4\images\yuchayuan.gif" name="right"> </frame>
16
2、嵌套框架的效果图
17
3、浮动框架 （1）语法：<iframe id=iframe1 frameborder=0 scrolling=no src=“地址”></iframe> iframe与frameset的区别： iframe可以与body元素共同出现在同一篇文档之中。frame的作用就是在网页中标记出一块区域，使得这块区域可以显示其他内容。iframe元素中的各种常用属性，border、frameBoder、marginHeight、marginWidth、scrolling等，与frame中的用法相同，不再重复。
18
（2）浮动框架应用在网页中的部分代码如下：
<iframe src="C:\Documents and Settings\Administrator\ 桌面\shiyan4\『御茶园茶业』网上商城.files\ left_frame_pic.gif" width=214 height=128></iframe>
19
4、框架结构之间的链接 （1）普通框架与链接 方法：在<a>标记内加入target属性来设定连接的目的网页
1．Target=“_blank”：将超级链接网页显示在一个新的窗口。 2．Target=“_top”：将超级链接网页显示整个窗口。 ．Target=“_parent”：将超级链接网页显示在上一层 的框架。 4．Target=“_self”：将超级链接网页显示在当前的框架中（默认值）。
20
2、浮动框架与链接 iframe元素的功能是在一个文档里内嵌一个文档，创建一个浮动的帧。 部分属性简介如下： Name：内嵌帧名称
Width：内嵌帧宽度（可用像素值或百分比） Height：内嵌帧高度 Frameborder：内嵌帧边框 scrolling:是否出现滚动条（"auto"为自动，"yes"为显示，"no"为不显示） src：内嵌入文件的地址 allowtransparency：是否允许透明
21
链接部分的代码如下： <A href="C:\Documents and Settings\Administrator\ 桌面\shiyan4\chayiyonpin.html" target="down"> 茶艺用品</A> <TD background=『御茶园茶业』网上商城.files/ eshop_nav00.gif height=22> <A href=“C:\Documents and Settings\Administrator\桌面 \shiyan4\jingmeibaozhuang.html“ target=”down“>精美包装 </A></TD>
22
【小结】 通过这次课学习，大家对使用框架网页有一定的认识了，它的主要优点是： （1）可以使窗口中的一部分内容固定。
（2）可以在一个窗格中显示所有页面的总索引，通过单击该区域中和超链接，相关网页就会显示在另一个窗格中，非常直观。用户在浏览局部内容时，仍对整个网站的结构有清楚的认识，不至于进入进入多层链接后而迷失方向。
23
【作业】 思考如下完成下图所示效果： 1、划分上下右框架窗口的框架网页，点击右边框架中的文字，链接到左边下框架中。
24
谢 谢 ！
Similar presentations
