网页设计使用框架创建多页面布局课件_第1页
网页设计使用框架创建多页面布局课件_第2页
网页设计使用框架创建多页面布局课件_第3页
网页设计使用框架创建多页面布局课件_第4页
网页设计使用框架创建多页面布局课件_第5页
已阅读5页，还剩46页未读， 继续免费阅读

下载本文档

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

文档简介

第7章使用框架创建多页面布局清华大学出版社主要内容建立水平或垂直的框架分割窗口用嵌套框架分割窗口

对滚动条进行控制在空白窗口显示网页在框架或浮动框架上进行链接7.1框架简介框架技术可以将浏览器分割成多个小窗口，并且在每个小窗口中，可以显示不同的网页，这样我们就可以很方便的在浏览器中浏览不同的网页效果。当浏览器分割成多个窗口后，各窗口就会扮演不同的角色，实现不同的功能。举例来说，有些论坛就是把浏览器分割成两个窗口，一个窗口主要来显示帖子的标题，而另一个窗口会显示具体的内容。这样的设计显然比起一个窗口的网页在浏览时方便得多，而且用户也可以任意的切换题目。。框架的基本结构框架的基本结构主要分为框架和框架集两个部分。它是利用<frame>标记与<frameset>标记来定义。其中<frame>标记用于定义框架，而<frameset>标记则用于定义框架集。框架的基本结构<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Frameset//EN""/TR/html4/frameset.dtd"><html><head> <title>框架的基本结构</title></head><frameset>

<framesrc=“URL”>

<framesrc=“URL”>…</frameset></html>7.1.1框架的设置常见的对窗口的分割包括：水平分割、垂直分割和嵌套分割。具体采用哪种分割方式，取决于实际需要，可用<frameset>标记中的rows（水平分割）或cols（垂直分割）属性来进行分割。

7.1.2窗口的水平分割rows属性可定义一个水平分割的窗口框架。<framesetrows="高度1，高度2,…,*"><framesrc="url"><framesrc="url">…</frameset>7.1.2窗口的水平分割语法说明rows属性的值代表各子窗口的高度，第一个子窗口高为高度1，第二个子窗口高为高度2，依此类推，而最后一个*，则代表最后一个子窗口的高度，值为其他子窗口高度分配后所剩余的高度。设置高度数值的方式有两种：采用整数设置，单位为像素（px），语法如下：<framesetrows="100，200，*">用百分比设置，语法如下：<framesetrows="20％，50％，*">7.1.2窗口的水平分割<!--程序7-1-2--><html><head><title>采用整数设置窗口的水平分割</title></head><framesetrows="80,120,*"> <frame> <frame> <frame></frameset></html>7.1.2窗口的水平分割7.1.3窗口的垂直分割cols属性可定义一个垂直分割的窗口框架。基本语法：<framesetcols="宽度1，宽度2,…,*"><framesrc="url"><framesrc="url">…</frameset>一个垂直分割的例子<!--程序7-1-3--><html><head><title>采用百分比设置窗口的垂直分割</title></head><framesetcols="20%,40%,*"> <frame> <frame> <frame></frameset></html>7.1.3窗口的垂直分割7.1.4窗口的嵌套分割如果想构建更复杂的框架格局，可以通过<frameset>标签嵌套另一个<frameset>标签来实现。这种嵌套方式成为框架的嵌套。通过框架的嵌套，可以使网页的布局更具有层次性，这种框架集合将浏览器按行或按列分成许多部分。在实际应用中，“厂”字型框架使用极为广泛。“厂”字型的网页就是窗口中包含水平和垂直分割，实现“厂”字型框架需要对窗口进行嵌套分割。7.1.4窗口的嵌套分割<!--程序7-1-4--><html><head><title>窗口的嵌套分割</title></head><framesetrows="30%,*"> <frame><framesetcols="20%,*"> <frame> <frame>

</frameset></frameset></html>

7.1.4窗口的嵌套分割7.2框架格式化属性说明frameborder=""显示或隐藏框架的边界，与border一起使用。值为1（显示）或0（隐藏），也可以是yes或noborder=""显示或隐藏框架的边，与frameborder一起使用。值为0或像素值scrolling=""显示或隐藏框架的滚动条，值为yes（显示滚动条）或no（隐藏滚动条）或auto（根据框架内容范围自动地显示或隐藏滚动条，默认）noresize="noresize"禁止用户调整框架尺寸，如果不设置该属性，那么用户可以自由地调整框架尺寸marginheight=""设置框架内容的上、下边距的像素数值marginwidth=""设置框架内容的左、右边距的像素数值bordercolor=""设置框架边界的颜色7.2.1显示或隐藏边框frameborder属性用于控制窗口框架的周围是否显示框架，此属性可使用在<frameset>标记与<frame>标记中，如果使用在<frameset>标记内时，可控制窗口框架的所有子窗口，如果用在<frame>标记中，则只能控制该标记所代表的子窗口。基本语法：<framesetframeborder="0"或"1"><frameframeborder="0"或"1">语法说明："0"表示不显示边框，"1"表示显示边框，默认值为1。7.2.1显示或隐藏边框在<frameset>标记中，可运用border属性控制分割窗口框架的边框的宽度。基本语法：<framesetborder="n">语法说明：n为整数，代表此窗口框架的宽度，单位为像素(px)。7.2.1显示或隐藏边框<!--程序7-2-1--><html><head><title>框架的边框控制</title></head><framesetrows="30%,*"border="12"> <frame> <framesetcols="20%,*“frameborder=0> <frame> <frame></frameset></frameset></html>

7.2.1显示或隐藏边框7.2.2添加边界颜色如果想要改变边框边界的颜色，可运用bordercolor属性来实现。基本语法：<framesetbordercolor=""><framebordercolor="">7.2.2添加边界颜色<!--程序7-2-2--><html><head><title>框架的边框颜色控制</title></head><framesetrows="30%,*"border=12bordercolor=blue><frame><framesetcols="20%,*"> <framebordercolor=red> <frame></frameset></frameset></html>7.2.2添加边界颜色7.2.3设置子窗口的边距网页的边距可以通过“margin”来设定，那么框架和网页一样也可设置边距，可以利用<frame>标记中的marginwidth属性来设置框架左右边缘的宽度；marginheight属性可以设置框架上下边缘的宽度。基本语法：<framesrc="url"marginwidth="value"marginheight="value">语法说明：在HTML文件中，利用框架<frame>标记中的marginwidth和marginheight属性可以设置相应子框架的左右和上下边缘的空白。7.2.3设置子窗口的边距<!--程序7-2-3--><html><head><title>设置框架边距</title></head><framesetcols="30%,*"> <framesrc=left.html

marginheight=50

marginwidth=50> <framesrc=right.html></frameset></html>

7.2.3设置子窗口的边距7.2.4控制子窗口滚动条scrolling属性用于控制窗口框架中是否显示滚动条，使用此属性，可以避免HTML文件因内容过多而无法完全显示。此属性用于<frame>标记中。基本语法：<framescrolling="yes或no或auto">语法说明：yes表示为显示滚动条，no表示不显示滚动条，auto为自动设置。7.2.4控制子窗口滚动条<!--程序7-2-4--><html><head><title>控制框架滚动条</title></head><framesetcols="30%,*"> <framesrc=""scrolling="yes"><framesrc=""scrolling="no"></frameset></html>7.2.4控制子窗口滚动条7.2.5调整子窗口的尺寸在前面的学习中，我们学习了如何运用<frameset>标记的rows和cols属性来水平或垂直分割窗口。但设置后，各窗口框架的大小并非固定无法更改，当我们想更改窗口框架大小时，可以将鼠标指针移到要更改的框架上，待指针呈现双箭头符号时，再用鼠标进行拖拽，就可调整窗口的大小。当然我们不希望用户能随意地改变子窗口的大小，那么这时我们可以在<frame>标记中，添加noresize属性，语法如下：<framenoresizesrc="url">7.4浮动框架在浏览网页的时候会看到在浏览器窗口含有孤立的子窗口，那么这就是浮动框架，插入浮动框架要使用成对的标记<iframe></iframe>，同样，我们会用src属性来设置框架中显示文件的路径。基本语法：<iframesrc="url"></iframe>语法说明：与框架不同的是，浮动框架可以包含在<body>标记中。7.4浮动框架属性说明src="url"用标准的URL指出作为框架内容的源frameborder=""显示或隐藏框架的边界scrolling=""显示或隐藏框架的滚动条，值为yes（显示滚动条）或no（隐藏滚动条）或auto（根据框架内容范围自动地显示或隐藏滚动条，默认）name=""标记框架，便于成为目标或从其他框架或窗口中引用marginheight=""设置框架内容的上、下边距的像素数值marginwidth=""设置框架内容的左、右边距的像素数值height=""以像素为单位指定浮动框架的高度width=""以像素为单位指定浮动框架的宽度align=""指定iframe如何根据周围文字进行对齐，对齐方式为left、middle、right、top或bottom7.4浮动框架<!--程序7-4--><html><head><title>设置浮动框架源文件属性</title></head><body><iframesrc=""name=iframeheight=400width=600align=middle>

</iframe>添加一个浮动框架</body></html>7.4浮动框架7.5创建导航使用框架导航，用户可以在一个框架中单击并在另一个框架中浏览显示的结果。实现框架导航功能，要引入name、target属性。Name属性标识一个框架，target属性在锚点<a>中使用，指定这个链接要载人到哪个框架中。7.5.1指定子窗口显示网页src属性是用来指定要导入到某个子窗口的HTML文件的位置，语法如下：基本语法：<framesrc="html文件的位置">语法说明：src属性的设置方法和前面介绍的<img>标记的src属性的用法是一样的，下面的<frame>标记，将设置子窗口显示名称为frame.html的网页。<framesrc="frame.html">。7.5.1指定子窗口显示网页<!--程序7-5-1--><html><head><title>指定子窗口显示网页</title></head><framesetcols="30%,40%,*"> <framesrc=left.html> <framesrc=center.html> <framesrc=right.html></frameset></html>

7.5.1指定子窗口显示网页7.5.2定义子窗口名称name属性用来指定窗口的名称，当完成子窗口的名称定义后，可指定超链接的链接目标显示到网页的某个子窗口。基本语法：<framename="子窗口名称">7.5.2定义子窗口名称<!--程序7-5-2--><html><head><<title>指定子窗口的名称</title></head><framesetcols="30%,40%,*"> <framesrc=left.htmlname=left> <framesrc=center.htmlname=center> <framesrc=right.htmlname=right></frameset></html>7.5.3创建网站链接导航将浏览器画面分割成多个子窗口时，可赋予各子窗口不同的功能。最常见的应用方式，就是以一个子窗口作为网页的主画面，另一个窗口则用于控制该窗口的显示内容。要达到这个目的，我们可以运用<a>标记的target属性，来指定显示链接网页的子窗口。基本语法：<framesetcols="*,*"><framesrc="left.html“name=“left"><framesrc=“main.html"name=“main"></frameset>7.5.3创建网站链接导航<!--程序7-5-3--><html><head><title>创建导航</title></head><framesetrows="80,*"frameborder="no"border="0"framespacing="0"><framesrc="top.html"name="topFrame"scrolling="No"noresize="noresize"><framesetcols="200,*"frameborder="no"border="0"framespacing="0"><framesrc="left.html"name="leftFrame"scrolling="No"noresize="noresize"><framesrc="main.html"name="mainFrame">

</frameset></frameset></html>7.5.3创建网站链接导航<!--left.html--><html><head><title>无标题文档</title></head><bodyleftmargin="5"topmargin="5"bgcolor="#B9DCF0"alink="#6600CC"><tablewidth="160"border="0"cellpadding="0"cellspacing="0"align="left"><tr><tdwidth="20"> </td><tdheight="25"><ahref="manage_news.html"target="mainFrame">新闻管理</a></td></tr><tr><tdwidth="20"> </td><tdheight="25"><ahref="manage_photo.html"target="mainFrame">相册管理</a></td></tr>7.5.3创建网站链接导航<tr><tdwidth="20"> </td><tdheight="25"><ahref="manage_message.html"target="mainFrame">留言管理</a></td></tr><tr><tdwidth="20"> </td><tdheight="25"><ahref="manage_reg.html"target="mainFrame">查看注册会员</a></td></tr><tr><tdwidth="20"> </td><tdheight="25"> </td></tr></table></body></html>7.5.3创建网站链接导航<!--top.html--><html><head><title>无标题文档</title><styletype="text/css"><!--body{back

人人文库> 全部分类> 图纸下载 > 课程设计

温馨提示

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

最新文档

评论

0/150

提交评论