教学项目十四HTML中框架的实现【教学内容】讲解HTML中课件_第1页
教学项目十四HTML中框架的实现【教学内容】讲解HTML中课件_第2页
教学项目十四HTML中框架的实现【教学内容】讲解HTML中课件_第3页
教学项目十四HTML中框架的实现【教学内容】讲解HTML中课件_第4页
教学项目十四HTML中框架的实现【教学内容】讲解HTML中课件_第5页
已阅读5页，还剩15页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

教学项目十四

HTML中框架的实现

【教学内容】讲解HTML中框架标志及相应的属性【教学目的】使学生掌握框架标志及属性，学会熟练使用HTML标志设计框架网页。【教学重点】

框架的嵌套使用【教学难点】理解属性name、target的意义【教学方式】案例分析式、项目教学【教学参考】1．<<JavaScript入门与提高>>杨浩著清华大学出版社2．<<JavaScript从入门到精通>>电脑报社出版3．TML网页制作教程材义语编著铁道出版社4．HTML基础与实例程耀编著电子工业出版社【新课】一、设计框架网页的标志标志一：<frameset></frameset>用于定义框架的分割方式格式：<framesetrows=水平分割的行高cols=垂直分割的行宽>说明：（1）

rows,cols中必须选择一个（2）

rows,cols的值有三种表示方式：数字：定的像素值；百分比：相对宽度，以当前的浏览器窗口为参照；*：将剩下未被分配空间平均分配；例：1.<framesetrows=*,*,*>表示按水平方向分割，每一框架窗口占浏览器窗口的1/3，窗口从上到下排列；

2.<framesetcols=40%,*,*>表示按垂直方向分割，第一个窗口占40%,其余两个窗口各占30%，窗口从左到右排列3.<framesetrows=40%,*cols=50%,*,200>表示先水平方向分割，再垂直方向分割，两行三列排列。

40%60%50%200

标志二：<frame>用于定义一个子框架窗口，指定窗口中显示的网页的路径、名称及框架名称。格式：<framesrc=显示网页名称name=框架名称>例1：设计如下框架网页：分析：这是一个左右结构的框架，框架左边窗口显示网页为1.htm,框架窗口右边显示网页为2.htm框架结构部分对应网页为aa.htm；程序代码如下：1.HTM代码：<html><bodybackground=21.jpg><p><center><fontsize=6>特别推荐</font></center><br><br><tablewidth=300border=1bgcolor=#00ffeealign=center><tr><tdalign=center><fontface=隶书size=5>文学芳草</tr><tr><tdalign=center><fontface=隶书size=5>竹林听海</td></tr><tr><tdalign=center><fontface=隶书size=5>梧桐树下</td></tr><tr><tdalign=center><fontface=隶书size=5>如烟往事</td></tr><tr><tdalign=center><fontface=隶书size=5>牧歌唱晚</font></td></tr></table></body></html>

2.htm代码如下：<html><bodybgcolor=#00ffee><center><imgsrc="0244.jpg"border=1width="280"height="400"></center></body></html>aa.htm代码如下：<html><framesetcols=50%><framesrc=1.htmname=top><framesrc=2.htmname=bottom></frameset></html>二、框架标志配合使用的属性1．<frameset>标志中的配合使用属性：（1）framespacing:设定框架边框线的宽度（2）frameborder:设定是否显示框线

frameborder=0不显示框线；frameborder=1时显示框线；(3）

bordercolor:设定框线颜色

2．<frame>标志中配合使用的属性（1）scrolling:设定是否显示滚动条

scrolling=auto需要自动出现

scrolling=yes始终出现

scrolling=no从不出现(2)

noresize:设定是否允许调整窗口大小(3)

marginwidth:框架内网页内容与边缘的空白区宽度（4）marginheight:框架内网页内容与边缘的空白区的高度

一、框架网页中超级链接的使用例：设计如下框架网页：分析：此例使用了框架嵌套，在下左窗口中设置超级链接，目标窗口分别是right、_self、_blank、bottom、top.最上窗口是显示的网页12.htm,上下框架网页为index.htm;左右框架网页为aa.htm,左框架显示网页为1.htm,右框架显示网页为2.htm;程序代码如下：INGEX.htm代码：<html><framesetrows=40%,*frameborder=0><framesrc=12.htmname=top><framesrc=aa.htmname=bottom></frameset></html>12.Htm代码：<html><bodybgcolor=#00eeff><p><center><fontcolor="#000000">

爱情究竟是什么？

</font></center></p><p><fontcolor="#000000">   <fontcolor="#000000">老妈说：爱情是颗洋葱头，一片片剥下去，总有一片让你泪流满面；</font></p><p>老爸说：爱情是感冒，既瞒不了自己，也瞒不了别人，因为你抑制不住自己的喷嚏和鼻涕；朋友说：爱情是只啁啾的鸟，总想往高处飞，但又总要找个栖息的角落；而嗜饮咖啡的我更愿意说：爱情是一杯香浓的咖啡。<p>既然是咖啡，光有冲泡还不够味，因为总有些东西会漂在上面，所以还要找把小勺子，轻轻地、慢慢地来搅和，让它们就在这一搅一拌中渐渐融合，你中有我，我中有你，散发出令人神清气爽的醇香。</p>所以，情窦初开的你，爱如潮水的你，浓情蜜意的你，不论应酬有几多，工作有多忙，时间多紧张，你都要找点时间，找点空闲，带上你的心上人儿找个安静、浪漫的、温馨的地方，散散步聊聊天--因为爱情咖啡需要找把小勺慢慢搅拌。就在这摇拌中，把心摇近，把情摇浓，最后融合在一起再也分不开。<p>关于爱情的点点滴滴，在这轻轻地搅拌中，愈久弥香，飘散在这座城市的角角落落....</body></html>1．Htm代码如下：<html><bodybackground=21.jpg><p><center><fontsize=6>特别推荐</font></center><br><br><tablewidth=300border=1bgcolor=#00ffeealign=center><tr><tdalign=center><fontface=隶书size=5><Ahref=fp1.htmltarget=right>文学芳草</a></tr><tr><tdalign=center><fontface=隶书size=5><ahref=fp2.htmltarget=_self>竹林听海</a></td></tr><tr><tdalign=center><fontface=隶书size=5><ahref=fp3.htmltarget=_blank>梧桐树下</a>

</td></tr><tr><tdalign=center><fontface=隶书size=5><Ahref=fp5.htmltarget=bottom>如烟往事</a></td></tr><tr><tdalign=center><fontface=隶书size=5><ahref=fp6.htmltarget=top>牧歌唱晚</font></td></tr></table></body></html>二、浮动框架基本语法：<iframesrc=file-urlheight=valuewidth=valuename=名称align=对齐方式</iframe><iframe>标志配合使用的属性：Src:框架中显示的网页文件路径Width:框架宽度；height:框架高度Name:框架名称；align:框架对齐方式；Frameborder:(取值0和1）Framespacing:边框线宽度Scrolling:

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论