项目4用HTML制作框架网页.ppt

教学难点 教学内容 教学目的 教学重点 教学过程 项目四 使用HTML语言制作框架页面 上一页 下一页 课程trtrrtrtrtrtrrtt 下一页 上一页 退出 主菜单 教学目的 重点难点 教学方式 课程设计 教学过程 课程作业 课程小结 教学参考 返回上一级 教学内容 1、演示并讲解用框架制作的网页 2、框架的基本结构 3、框架的各种属性 4、框架结构之间的链接 教学目的 1、掌握框架的基本结构 2、掌握框架的各种属性 3、掌握框架结构之间的链接 教学重点 1、框架的各种属性 教学难点 框架结构之间的链接 引言： 窗口框架可用于将窗口画面分割成多个小窗口，且每个小窗口中，可以显示不同的网页，达到在浏览器中同时浏览不同网页的效果。HTML提供frameset标记和frame标记，让你很轻易地在文件中加入框架，其中前者用来定义整个框架组的分割方式，是采用水平或是垂直分割方式：后者用来宣告各框架的内容。 （一）演示并讲解用框架制作的网页 1、演示，如图4-1是中国茶吧网站中的网上商城页面 2、用框架制作页面内容。 （二）演示子项目的效果图 1、水平分割的效果图 2、嵌套框架的效果图 3、浮动框架的效果图 （三）如何制作水平分割的效果图 1、语法如下： html frameset frame frame /frameset /html 2、框架集标志属性说明 元素与属性 定 义 frameset 在文档中定义框架集 cols=n 按列创建框架集合的框架(n是像素宽度或百分比的集合) Rows=n 按行创建框架集合的框架(n是像素宽度或百分比的集合) frameborder=0,1 打开或关闭框架边框，默认值为1，显示框线。 border=n 边框的粗细 bordercolor=color 边框颜色 framespacing=n 定义框架之间的空间 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 5、效果图如下 （四）嵌套框架的制作 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 /frameset 2、嵌套框架的效果图 3、浮动框架 （1）语法：iframe id=iframe1 frameborder=0 scrolling=no src=“地址”/iframe iframe与frameset的区别： iframe可以与body元素共同出现在同一篇文档之中。frame的作用就是在网页中标记出一块区域，使得这块区域可以显示其他内容。iframe元素中的各种常用属性，border、frameBoder、marginHeight、marginWidth、scrolling等，与frame中的用法相同，不再重复。 （2）浮动框架应用在网页中的部分代码如下： iframe src=C:\Documents and Settings\Administrator\ 桌面\shiyan4\『御茶园茶业』网上商城.files\ left_frame_pic.gif width=214 height=128/iframe 4、框架结构之间的链接 （1）普通框架与链接 方法：在a标记内加入target属性来设定连接的目的网页 Target属性除了可以直接指定框架的名称外，还有下列几个常用的属性值，分别代表不同的功能： 1．Target=“_blank”：将超级链接网页显示在一个新的窗口。 2．Target=“_top”：将超级链接网页显示整个窗口。 3．Target=“_parent”：将超级链