用HTML制作框架网页_第1页
用HTML制作框架网页_第2页
用HTML制作框架网页_第3页
用HTML制作框架网页_第4页
用HTML制作框架网页_第5页
已阅读5页，还剩17页未读， 继续免费阅读

下载本文档

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

文档简介

教学内容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、代码如下：<framesetrows="260,*"frameborder=0><framesrc="wssc01.htm"name="up"scrolling=no><framesrc="C:\DocumentsandSettings\Administrator\桌面\shiyan4\『御茶园茶业』网上商城.files\index_show.htm"name="down"></frame></frameset>5、效果图如下（四）嵌套框架的制作1、代码如下：<framesetcols="75%,*"><framesetrows="260,*"frameborder=0><framesrc="wssc01.htm"name="up"scrolling=no><framesrc="C:\DocumentsandSettings\Administrator\桌面\shiyan4\『御茶园茶业』网上商城.files\index_show.htm"name="down"></frameset><framesrc="C:\DocumentsandSettings\Administrator\桌面\shiyan4\images\yuchayuan.gif"name="right"></frame></frameset>2、嵌套框架的效果图3、浮动框架

（1）语法：<iframeid=iframe1frameborder=0scrolling=nosrc=“地址”></iframe>iframe与frameset的区别：iframe可以与body元素共同出现在同一篇文档之中。frame的作用就是在网页中标记出一块区域，使得这块区域可以显示其他内容。iframe元素中的各种常用属性，border、frameBoder、marginHeight、marginWidth、scrolling等，与frame中的用法相同，不再重复。（2）浮动框架应用在网页中的部分代码如下：<iframe

src="C:\DocumentsandSettings\Administrator\桌面\shiyan4\『御茶园茶业』网上商城.files\left_frame_pic.gif"width=214height=128></iframe>4、框架结构之间的链接（1）普通框架与链接方法：在<a>标记内加入target属性来设定连接的目的网页Target属性除了可以直接指定框架的名称外，还有下列几个常用的属性值，分别代表不同的功能：1．Target=“_blank”：将超级链接网页显示在一个新的窗口。2．Target=“_top”：将超级链接网页显示整个窗口。3．Target=“_parent”：将超级链接网页显示在上一层的框架。4．Target=“_self”：将超级链接网页显示在当前的框架中（默认值）。2、浮动框架与链接iframe元素的功能是在一个文档里内嵌一个文档，创建一个浮动的帧。部分属性简介如下：Name：内嵌帧名称Width：内嵌帧宽度（可用像素值或百分比）Height：内嵌帧高度Frameborder：内嵌帧边框scrolling:是否出现滚动条（"auto"为自动，"yes"为显示，"no"为不显示）src：内嵌入文件的地址allowtransparency：是否允许透明链接部分的代码如下：<Ahref="C:\DocumentsandSettings\Administrator\桌面\shiyan4\chayiyonpin.html"target="down">茶艺用品</A><TDbackground=『御茶园茶业』网上商城.files/eshop_nav00.gif

height=22><A

href=“C:\DocumentsandSettings\Administrator\桌面\shiyan4\jingmeibaozhuang.html“target=”down“>精美包装</A></TD>

【小结】

通过这次课学习，大家对使用框架网页有一定的认识了，它的主要优点是：（1）可以使窗口中的一部分内容固定。（2）可以在一个窗格中显示所有页面的

人人文库> 全部分类> 行业资料 > 管理策划

温馨提示

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

最新文档

评论

0/150

提交评论