教学材料HTML DHTML教程-第四章

上传人：1*** IP属地：广东上传时间：2026-03-24 格式：PPT 页数：103 大小：1.45MB 积分：15 举报 版权申诉

已阅读5页，还剩98页未读，继续免费阅读

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

文档简介

第4章网页布局

在网页设计过程中，将文字、图像等页面元素合理组织并安排到适当的位置是网页的一个基本要求。HTML语言提供了两种网页布局的方法，一种是使用"table"(表格)布局，另一种是使用"frame"(框架)布局。本章的主要内容如下:表格的基本结构;创建表格的标记符及相关属性。例如，表格标记符table、表格标题标记符caption,表行标记符tr、单元格标记符td和表头标记符th等;使用表格进行页面布局;框架的基本结构;创建框架的标记符及相关属性。例如，框架集标记符frameset不能框架标记符frame;使用标记符iframe创建页面内框架;使用框架进行页面布局。返回4.1创建表格

由于表格可以精确控制文本和图像在页面中显示的位置，所以绝大多数网站的主页都是使用表格来进行布局的，如新浪、搜狐等。本节将介绍如何创建HTML表格以及设置表格的属性。下一页返回4.1创建表格

4.1.1表格的基本结构语法<table><caption><tr><th></tr></caption></th><th></th>.....</tr><tr><td></td><td></td>...上一页下一页返回4.1创建表格

说明:我们可以看出，HTML语言使用table标记符定义表格，表格中所有的内容都包含在开始标记符<table>和结束标记符</table>中。在表格中，我们可以使用caption标记符来定义表格的标题;使用tr标记符来定义表格的行;使用th标记符或者td标记符来定义表格的单元格，其中th用来定义作为表头的单元格，而td用来定义普通的单元格。上一页下一页返回4.1创建表格

下面是一个使用表格的例子，其源代码如下所示:<html><head><title>表格实例</title></head><body><tableborder="1”><caption>通讯录</caption><tr><th>姓名</th><th>地址</th><th>电话</th><th>电子信箱</td></tr><tr>上一页下一页返回4.1创建表格

<td>韦小宝</td><td>故宫<</td><td>88888888</td><td>xiaobao@263.net</td></tr><tr><td>康熙</td><td>故宫<</td><td>99999999</td><td>king@</td></tr></table>

</body></html>在浏览器中打开该文件，效果如图4.1所示上一页下一页返回4.1创建表格

4.1.2table

使用标记符table可以创建一个新表格，开始标记符<table>和结束标记符</table>之间的内容就是表格的内容。表格标记符table有以下几个主要属性:width(宽度)和height(高度):这两个属性可以定义表格的宽度和高度，它的单位既可以是像素数也可以是百分比。border(边框):使用该属性可以设置表格边框的宽度，它的单位是像素。表格边框的宽度可以为0(默认值)，也就是说表格的边框可以是不可见的。bgcolor(背景颜色):使用该属性可以设置整个表格的背景颜色，背景颜色的值既可以是英文单词也可以是十六进制的数值。上一页下一页返回4.1创建表格

align(对齐方式):使用该属性可以设置表格在网页中的对齐方式。该属性的参数有left(左对齐)、centerC居中对齐)和right(右对齐)，分别表示表格位于其相邻对象的左侧、表格水平居中和表格位于其相邻对象的右侧，该属性默认值为left。cellpadding(填充距):使用该属性可以设置单元格内容与单元格边界之间的空白距离的大小。该属性的值是数字，表示像素数，它表示单元格内容与上下边界之间空白距离的高度以及单元格内容与左右边界之间空白距离的宽度。cellspacing(单元格间距):使用该属性可以设置表格各单元格之间的空隙。该属性的值是数字，表示像素数。rules(分隔线):使用该属性可以设置是否显示以及如何显示单元格之间的分隔线。该属性的值有none(无分隔线)、groups(在行和列之间有分隔线)、rows(只有行分隔线)、cols(只有列分隔线)、all(显示所有分隔线)。该属性默认值为none。上一页下一页返回4.1创建表格

frame(边框):使用该属性可以设置是否显示边框以及如何显示边框。该属性的值有void(尤边框)、above(只显示顶部边框)、below(只显示底部边框)、hsides(只显示顶部和底部边框)、vsides(只显示左右边框)、lhs(只显示左边框)、rhs(只显示右边框)、box(显示所有边框)。该属性的默认值为void。下面我们将通过实例来进一步说明这些属性的作用。1.属性width和height对表格的作用

一般情况下，通常要设置表格的宽度，而不用设置表格的高度。表格中所有的内容都会显示在表格所设置的宽度之内，长度超过表格宽度时将自动转行。下面是一个是使用width属性的例子，其源代码如下所示:上一页下一页返回4.1创建表格

<html><head><title>表格实例_width</title></head><body><tablewidth="75%"border="1”><tr><td><p>不要想到就说，也不要随便想到什么就做。待人要和气，但是不要轻佻，凡是交情经过考验的朋友们，就该把他们紧紧地拉在身边，可是不要跟每个、不生不熟的相识过分去周旋。当心跟别人吵架，不过吵了就要让对手下次不敢碰你。要多听别人说，自己少说。有钱叫以买贵重的衣服，不过不要奇装异服。富而不俗，因为衣着叫以看出人品。不向人借钱，也不借给别人钱，借出去是人财两失，借进来会叫你忘了勤俭。首要的是，对待自己要忠实，犹如先有白昼才有黑夜，要这样才能对人忠实。可见，祝你实现这番话。上一页下一页返回4.1创建表格

</p><p>《王子复仇记》中的段对白。</p></td></tr></table></body></html>在浏览器中打开该文档，如图4.2所示:2.属性border,bgcolor和align对表格的作用下面是一个包含了border,bgcolor和align三种属性的例子，其源代码如下所示:上一页下一页返回4.1创建表格

<html><head><title>表格实例_border,bgcolor和align</title></head><body><tableborder="3"bgcolor="#0099FF"align="center"><tr><td>性别</td><td>业余时间(单位:小时/每天)</td><td>上网时间(单位:小时/每天)</td></tr><tr>上一页下一页返回4.1创建表格

<td>男</td><td> </td><td> </td></tr><tr><td>女</td><td> </td><td> </td></tr></table></body></html>在浏览器中打开该文档，如图4.3所示:3.属性cellspacing、cellpadding对表格的作用下面是一个使用cellspacing如cellpadding属性的例子，其源代码如下所示上一页下一页返回4.1创建表格

<html><head><title>表格实例_cellpadding和cellspacing</title></head><body>

<palign=“center”>各地不同职业收入比较(单位:万元/年)</p><tablecellpadding="20"cellspacing="15"border="1"><tr><td></td><td>IT行业<</td><td>广告行业<</td><td>财务人员</td><td>管理人员</td><td>政府职员</td>上一页下一页返回4.1创建表格

</tr><tr><td>北京</td><td>5.2</td><td>4.9</td><td>4.5</td><td>4.2</td><td>2.8</td></tr><tr><td>上海</td><td>5.5</td><td>5.1</td><td>4.9</td><td>4.5</td><td>3.6</td></tr><tr><td>深圳</td><td>5.5</td><td>5.2</td><td>4.7</td><td>4.6</td><td>4.1</td></tr></table></body></html>在浏览器中打开该文档，如图4.4所示:上一页下一页返回4.1创建表格

4.1.3caption语法<caption></caption>说明:使用该标记符可以创建表格的标题。开始标记符<caption>与结束标记符</caption>之间的内容就是表格的标题。标记符caption只有一个属性:align。该属性用于设置表格的标题与表格之间的位置，它所包含的值有top(标题放在表格的上面)、bottom(标题放在表格的下面)、left(标题放在表格的左面)和right(标题放在表格的右面)。由于该标记符的作用不是很大，而且使用其他的标记符(如标记符p)也可以达到相同的效果，所以已经逐渐被淘汰。上一页下一页返回4.1创建表格

4.1.4tr语法<tr></tr>说明:tr是英文单词“tablerules(表行)”的缩写。HTML的表格是按行组织的，一个表格由几行组成，就有几个行标记符与之相对应。行标记符tr也是成对使用的标记符。开始标记符<tr>和结束标记符</tr>之间的内容就是表行的内容，不过为了简便可省略结束标记符。表行标记符tr有以下几个主要属性:align(水平对齐方式):使用该属性可以设置表行中每一个单元格的水平对齐方式。该属性的取值有left(左对齐)、center(居中对齐)、right(右对齐)和justify(两端对齐)，默认值是left。上一页下一页返回4.1创建表格

valign(垂直对齐方式):使用该属性可以设置表行中每一个单元格的垂直对齐方式。该属性的取值有top(顶部对齐)、middle(中部对齐)、bottom(底部对齐)和baseline(基线对齐)，默认值为middleobgcolor(背景颜色):使用该属性可以设置表行的背景颜色，背景颜色的值既可以是英文单词也可以是十六进制的数值。表行的背景颜色可以与整个表格的背景颜色不同。下面是一个包含这些属性的例子，其源代码如下所示<html><head><title>tr实例</title></head><body>上一页下一页返回4.1创建表格

<palign="center">第四届理事会候选人名单</p><tablewidth="580"cellspacing="1"cellpadding="1"bgcolor="#ffffff"><tralign="center"bgcolor="#dcdcdc"><td>姓名</td><td>职务<</td><td>性别<</td><td>公司名称<</td><td>省份<</td></tr><trbgcolor="#ffffff"><td>张三</td><td>经理<</td><td>男</td><td>联想<</td><td>北京</td></tr><tralign="center"bgcolor="#dcdcdc"valign="top"height="60">上一页下一页返回4.1创建表格

<td>李四<</td><td>业务经理</td><td>男</td><td>海尔<</td><td>青岛<</td></tr><tralign="center"bgcolor="#dcdcdc"valign="middle"height="60"><td>王二<</td><td>厂长<</td><td>女<</td><td>长虹</td><td>绵阳</td></tr><tralign="center"bgcolor="#dcdcdc"valign="bottom“height="60"><td>赵六</td><td>总经理</td><td>女</td><td>LG</td><td>武汉</td></tr>上一页下一页返回4.1创建表格

<tralign="right"bgcolor="#ffffff"><td>孙五</td><td>t}l!P</td><td>男</td><td>二星</td><td>天津</td></tr></table></body></html>在浏览器中打开该文件，效果如图4.5所示上一页下一页返回4.1创建表格

4.1.5td语法<td></td>说明:td是英文单词“tabledata(表格数据)”的缩写。标记符td包含在表行标记符之间，一行由几个单元格组成，就有几个表格数据标记符与之相对应。开始标记符<td>和结束标记符</td>之间的内容就是单元格的内容，不过结束标记符通常可以省略。表格数据标记符td主要有以下几个属性:width(宽度)和height(高度):使用这两个属性可以设置单元格的宽度和高度，取值既可以是具体的数值(表示像素数)，也可以是百分比。上一页下一页返回4.1创建表格

align(水平对齐方式):使用该属性可以设置单元格中所包含内容的水平对齐方式。该属性的取值有left(左对齐)、center(居中对齐)、right(右对齐)和justify(两端对齐)，默认值是left。valign(垂直对齐方式):使用该属性可以设置单元格中所包含内容的垂直对齐方式。该属性的取值有top(顶部对齐)、middle(中部对齐)、bottom(底部对齐)和baseline(基线对齐)，默认值是middle。bgcolor(背景颜色):使用该属性可以设置单元格的背景颜色，背景颜色的值既可以是英文单词也可以是十六进制的数值。单元格的背景颜色可以与整个表格或这个表行的背景颜色不同。上一页下一页返回4.1创建表格

rowspan(单元格的行数):使用该属性可以设置单元格所占的行数，默认值为1colspan(单元格的列数):使用该属性可以设置单元格所占的列数，默认值为1下面我们将通过实例来进一步说明这些属性的作用。1.属性valign和align对单元格内容的作用

属性valign和align可以控制单元格内容的垂直对齐方式和水平对齐方式，下面是一个使用这两个属性的例子，其源代码如下所示:<html><head><title>td_align和valign实例</title></head><body><tablewidth="300"border="1"align="center"bgcolor="#00ddee">上一页下一页返回4.1创建表格

<tr><tdheight="60"valign="top">我</td><tdheight="60"valign="middle">喜欢</td><tdheight="60"valign="bottom">打</td><tdheight="60"valign="baseline">篮球</td></tr><tr><tdalign="center">我</td><tdalign="right">喜欢</td><td>打<</td><td>篮球<</td>上一页下一页返回4.1创建表格

</tr></table></body></html>在浏览器中打开该文档，如图4.6所示:2.属性rowspan和colspan的作用我们可以通过属性rowspan和colspan来合并单元格和拆分单元格，灵活地设置表格，使表格的每一行(或每一列)都有所示同。下面是一个使用这两个属性的例子，其源代码如下所示:<html><head><title>td_span实例</title></head><body><palign="center">课程表</p>上一页下一页返回4.1创建表格

<tablewidth="96%"border="1”><tr><tdwidth="16%"> </td><tdwidth="16%">星期</td><tdwidth="16%">星期二</td><tdwidth="16%">星期二</td><tdwidth="16%">星期四</td><tdwidth="16%">星期五</td></tr><tr><tdrowspan="2">上<br>午</td><td>高等数学</td><td>化学</td><td>近现代史</td><td>大学英语</td><td>高等物理</td>上一页下一页返回4.1创建表格

</tr><tr><td>英语</td><td>高等物理<</td><td>高等数学</td><td>自习</td><td>大学生修养</td></tr><tr>

<tdcolspan="6"align="center">中午体息</td></tr><tr>

<tdrowspan="2">下<br>午</td><td>马列</td><tdrowspan="2">自习</td><td>体育</td><td>社会主义建设</td>

<td>主题班会</td></tr><tr><td>自习</td><td>自习</td><td>自习</td><td>自习</td>上一页下一页返回4.1创建表格

</tr></table></body></html>在浏览器中打开该文件，如图4.7所示

注意在构造表格时，应遵循从上到下，从左到右的顺序。己经在前面表示过的单元格，在下次碰上时就不用重新表示，例如，对于“上午”所在的单元格，由于在第2行中己经表示，所以在第3行中就不再表示了。为了能准确地用HTML构造复杂的表格，建议在创建表格之前先在纸上画出表格的结构，这样就能请楚地看出表格的行列组成，从而能够正确地指定标记符和属性。上一页下一页返回4.1创建表格

4.1.6th语法<th></th>说明:th是英文单词“tablehead(表格的表头)”的缩写。使用该标记符可以创建表格的表头。所谓表头就是指表格的行标题或者列标题，它通常用来说明表格中每一行或者每一列数据的含义。表头标记符th包含在表行标记符之间，一行由几个表头组成，就有几个表头标记符与之相对应。开始标记符<th>和结束标记符</th>之间的内容就是表头的内容。表头标记符th与表格数据标记符td所包含的属性完全一样。th和td都是用来定义单元格，它们惟一的区别是:th所定义的表头文字在默认状态下是粗体，而且是水平居中对齐。下面是一个使用表头的例子，其源代码如下所示:上一页下一页返回4.1创建表格

<html><head><title>th实例</title></head><body><palign=“center”>各大城市夏季天气比较</p><tablewidth="80%"border="1"align="center"><tr><thwidth="20%"> </th><thwidth="20%">温度</th><thwidth="20%">湿度</th><thwidth="20%">可吸入颗粒物</th><thwidth="20%">二氧化硫</th></tr>上一页下一页返回4.1创建表格

<tr><th>北京</th><td>32</td><td>40%</td><td>RO</td><td>34</td></tr><tr><th>上海<</th><td>35</td><td>70%</td><td>fi0</td><td>44</td></tr><tr><th>广州</th><td>34</td><td>fi0%</td><td>90</td><td>52</td></tr>上一页下一页返回4.1创建表格

</table></body></html>在浏览器中打开该文件，效果如图4.8所示。上一页返回4.2表格在布局上的应用

4.2.1嵌套表格

所谓嵌套表格就是指一个表格中可以包含一个或多个其他的表格，通过为不同嵌套层次的表格设置不同的属性，可以获得特定的效果。例如，可以用最外层的表格设置整体页面结构(不使用边框和背景色)，而在嵌套表格中包含具体内容(可以设置边框效果或背景色)。嵌套表格是表格布局的基础，只有掌握了嵌套表格的概念才能使用表格进行页面布局。创建嵌套表格的方法是:把表格作为单元格的内容即可(也就是将table标记符放在td标记符中)。以下是一个使用嵌套表格的实例，其源代码如下所示:<html><head>下一页返回4.2表格在布局上的应用

<title>表格嵌套实例</title></head><body><tablewidth="90%"align="center"bgcolor="#ededed"><tr><tdalign="center"><palign="center">企业信息</p><tablewidth="75%"border="1"bgcolor="#dcdcdc"><tr><tdwidth="30%">名称:</td><tdwidth="70%"> </td></tr>上一页下一页返回4.2表格在布局上的应用

<tr><tdwidth="30%">地址:</td><tdwidth="70%"> </td></tr><tr><tdwidth="30%">邮编:</td><tdwidth="70%"> </td></tr><tr><tdwidth="30%">电话:</td><tdwidth="70%"> </td></tr><tr>上一页下一页返回4.2表格在布局上的应用

<tdwidth="30%">电子信箱:</td><tdwidth="70%"> </td></tr><tr><tdwidth="30%">联系人:</td><tdwidth="70%"> </td></tr></table></td></tr></table></body></html>在浏览器中打开该文档，效果如图4.9所示，其中外层表格没有边框，只是形成了一个背景区域，内层表格包含边框，用来放置具体内容。上一页下一页返回4.2表格在布局上的应用

4.2.2使用表格进行页面布局

由于表格能将页面划分为不同的矩形区域，所以我们可以使用表格来安排所有页面元素的位置。通常请况下，使用表格进行页面布局主要有以下几个步骤:(1)先绘制好布局草图(既可以用纸和笔，也可以用Photoshop或Fireworks这样的图形图像软件)，明确什么地方放干什么东西。

(2)确定了布局以后，要明确共击要几个表格，哪些表格击要嵌套使用，哪些表格是直接使用。(3)首先将整个网页的基本结构写出来，然后再插入具体的页面元素。下面我们将按照图4.10所绘制的布局草图，使用表格进行页面布局，具体步骤如下：上一页下一页返回4.2表格在布局上的应用

(1)首先分析布局草图。虽然该页面由二个部分组成，但是只要两个表格就可以完成这样的布局。首先需要一个大表格，页面中所有的内容都包含在这个大表格中;其次页面中间需要一个表格。

(2)根据分析结果先构建网页的基本结构，其源代码如下:<html><head><title>使用表格进行网页布局</title></head>上一页下一页返回4.2表格在布局上的应用

(3)由表格构成的网页结构创建完成之后，就可以将具体的内容插入到不同的表格中，具体代码己如下所示，最后效果如图4.11所示。<html><head><title>使用表格进行网页布局</title></head><body><tablewidth="600"align="center"><tr><td><palign="center"><imgsrc="links.jpg"></p></td></tr><tr><td><tableborder="1"width="78%"border="1"align="center“background="bgl.gif">上一页下一页返回4.2表格在布局上的应用

<tr><tdwidth="82%"><p>国内著名新闻站点<</p><ul><li><ahref--"">新浪</a></li><li><ahref--"">搜狐</a></li><li>…</li></ul><p>国外著名新闻站点</p>上一页下一页返回4.2表格在布局上的应用

<ul><li><ahref--"">CNN</a></li><li><ahref--"">Yahoo</a></li><li>...</li></ul></td><tdwidth="18%"bgcolor="#0066CC"> </td></tr></table></td></tr><tr><td>上一页下一页返回4.2表格在布局上的应用

4.3.1框架的基本概念

框架是一种特殊的网页技术，它能够将一个浏览器窗口分割为若干区域，使浏览者可以同时看到多个网页的内容。含有框架的网页称为“框架集网页”，它被框架分隔为多个区域，每个区域单独显示一个网页。通过使用框架，可以将站点中的网页合理地组织起来，并目为浏览者提供更友好的访问界面。例如，在图4.12所示的框架网页中，左侧是各个栏目的名称，单击某一个栏目的名称，在网页的右侧就会显示相应栏目的内容。左右两侧的显示都是独立的，拖动右侧的滚动条，不会影响左侧的显示效果。下一页返回4.3创建框架结构

4.3.2框架的基本结构语法<frameset><frame><frame>….

说明:框架的基本结构包括两部分，标记符frameset和标记符frame。要学习使用框架，首先应该了解框架集的概念。所谓框架集就是指构造整个框架结构的文档，它不包含任何可以显示的内容，只包含如何组织各个框架的信息和框架中的初始页面信息。上一页下一页返回4.3创建框架结构

4.3.3frameset语法<frameset></frameset>说明:frameset标记符的作用是将窗口分割为若干个子窗口，子窗口的数目取决于嵌套在该标记符中的frame标记符的数目。开始标记符和结束标记符之间的内容就是框架的HTML主体部分。在标记符<frameset>和</frameset>之间不能出现<body>标记符，否则会导致浏览器忽略所有的框架定义而只显示标记符<body>和</body>之间的内容。

frameset标记符只有两个属性，rows(框架的高度)和cols(框架的宽度)。这两个属性定义了该框架设置中每个框架的尺寸大小，rows给出了从上到下每行的高，cols给出了从左到右每列的宽。需要注意的是，这两个属性一般不同时使用，如果需要同时创建包含横向框架和纵向框架的文件，应当使用嵌套框架。上一页下一页返回4.3创建框架结构

这两个属性的取值有以下几种方式:像素值:通过像素值可以设置框架的绝对大小;百分比:通过百分比可以设置框架相对于浏览器窗口大小的百分比;n*:通过该方法可以设置由前两种方法指定框架大小后浏览器窗口的剩余部分。当只用*号(n=1)时，“*”表示框架的大小为整个浏览器窗口;“*，*”表示浏览器窗口被分成两个均等的框架;“*，*，*”表示浏览器窗口被分成三个均等的框架。如果n不等于1>那么n的值确定各个框架之间的比例。例如，“*，2*>3*”表示最左面(或最上面)的框架是浏览器窗口宽度(或高度)的1/6;中间的框架是浏览器窗口宽度(或高度)的1/3;而最右面(或最下面)的框架是浏览器中窗口宽度(或高度)的1/20。上一页下一页返回4.3创建框架结构

击要注意的是，尤论使用哪一种方式，这些值之间都不能有空格，并用逗号“，”分开。另外，这二种方式也可以组合使用。例如，“rows=10%,*,60”可以将窗口划分为三行，上面框架的高度是窗口高度的10%,下面框架的高度是60像素，而中间框架的高度为剩下的可以显示的高度。这个例子的源代码如下所示:<html><head><title>框架结构</title></head><framesetrows="10%,*,60"><frame><frame><frame></frameset></html>上一页下一页返回4.3创建框架结构

在浏览器中打开该文件，效果如图4.13所示。例如，“cols=*,300,4*”可以将窗口划分为三列，中间框架的宽度是300像素，而左边的框架的宽度是剩余空间的1/5，右边的框架的宽度是剩余空间的4/5。构造这个框架结构的源代码如下，效果如图4.14所示。<framesetcots="*,300,4*"><frame><frame><frame></frameset>上一页下一页返回4.3创建框架结构

4.3.4frame语法<frame>说明:HTML用frame标记符来标识子窗口。frame标记符是嵌套在框架设置标记符frameset中的标记符，它没有结束标记符。在标记符frameset中定义了多少个子窗口，就要有多少个frame标记符与之匹配。标记符frame主要有以下一些属性:name(名称):设置框架的名称，该名称必须是以字母开头。页面中超链接可以指定某个框架作为目标文件的显示窗口，例如，页面中包含两个框架，分别命名为"framel"和"frame2"，我们可以在框架1的超链接中将属性“target”设置为"frame2"，即“target="frame2""。当浏览者在浏览器中单击框架1中的超链接时，框架2中会显示出超链接的目标文件。换句话说，我们可以通过框架1来控制框架2的显示内容。有关超链接目标框架的详细信息，请参见4.4.2节。上一页下一页返回4.3创建框架结构

src(源):设置框架内容的URL，一般情况下是一个HTML文档，也可以是图像或多媒体文件等。frameborder(框架边框):设置框架的边框，默认值为1，表示框架的边框是可见的。还可以设置为0，表示框架的边框不可见。击要注意的是，只有将所有相邻框架的边框都设置为0，才能使框架的边框不显示。marginwidth(框架的左右边距):设置显示内容与左右边界之间的空白距离，单位是像素。marginheight(框架的上下边距):设置显示内容与上下边界之间的空白距离，单位是像素。上一页下一页返回4.3创建框架结构

scrollingC是否显示滚动条):设置框架中是否显示滚动条，默认值是"auto(自动)”，即只在需要时显示滚动条，一般情况下不需要改变此默认设置。该属性还有另外两种取值，“yes(显示)”和"no(不显示)”，其中yes表示始终显示滚动条，而no表示始终隐藏滚动条。noresize(不允许调整框架的尺寸):使用该属性可以禁止浏览者调整框架的尺寸。该属性是一个布尔属性，没有具体的取值，例如，<framename="framel"noresize>。下面是一个使用框架的实例，文件名为frame.htm，其源代码如下所示:<html><head><title>框架结构</title></head><framesetrows="80,*">上一页下一页返回4.3创建框架结构

<framename="topframe"src="top.htm"><framename="bottomframe"src="bottom.htm"marginwidth="30"marginheight="50"></frameset></html>其中文件top.htm的源代码如下所示:<html><head><title>框架结构_top</title></head><body><h2align="center">NBA俱乐部</h2></body></html>上一页下一页返回4.3创建框架结构

文件bottom.htm的源代码如下所示:<html><head><title>框架结构bottom-NBA俱乐部<</title></head><body><palign="center">欢迎来到NBA俱乐部</p><p><ahref="#">热点人物<</a></p><p><ahref="#">经典时刻</a></p><p><ahref="#">巨星风采</a></p><p><ahref="#">选秀大会</a></p></body></html>在浏览器中打开文件frame.htm，如图4.15所示。上一页返回4.4框架在布局上的应用

4.4.1创建嵌套框架

所谓嵌套框架就是指一个框架嵌套在另一个框架之中。使用嵌套框架可以制作一个复杂的框架，嵌套框架是使用框架进行布局的基础。使用嵌套框架时，只要在击要使用frame标记符处用frameset标记符替代即可。下面是一个包含嵌套框架的例子，其源代码如下所示:<html><head><title>嵌套框架结构</title></head><framesetrows="50,*,60"><framename="framel”><framesetcols="20%.*.20%">下一页返回4.4框架在布局上的应用

<framename="a"><framename="h"><framename="c"></frameset><framename="frame3"></frameset></html>

在浏览器中打开该文档，如图4.16所示，该框架整体上是行结构，但中间又嵌套了一个三列的框架。上一页下一页返回4.4框架在布局上的应用

4.4.2指定超链接的目标框架

由于每一个框架本身就是一个不窗口，所以在哪个框架中显示网页对于整个框架效果来说就是至关重要的了。如果要获得框架的导航效果，就必须通过指定超链接的目标框架来实现。所谓目标框架，就是指超链接的目标文件要在哪个框架中显示。控制超链接的目标文件在哪一个框架内显示的方法是在a标记符内使用target属性，格式为:<ahref=”目标文件”target=”目标框架名”>超链接内容</a>target属性的值可以是已定义的框架名(必须是框架集文件中为frame标记符指定的name属性值)，也可以是以下特殊框架:上一页下一页返回4.4框架在布局上的应用

-top表示将超链接的目标文件装入整个浏览器窗口。-self表示将超链接的目标文件装入当前框架(即超链接所在的框架)，以取代该框架中正在显示的文件。此取值为默认值，即如果不指定别的目标框架，则超链接的目标文件将在超链接所在的框架打开。-blank表示将超链接的目标文件装入一个新的浏览器窗口。_parent表示将超链接的目标文件装入当前框架的父框架(也就是当前框架的最近一级的frameset，但一般浏览器将其实现为等同于-top，即在整个浏览器窗口中装载目标页面。注意:特殊框架名称前面有下划线“-”。在框架集文件中为frame标记符指定name属性时，注意框架名应由字母(a~z或A~Z)打头，而不能是以其他字符打头。下面是一个使用目标框架的例子，其源代码如下所示，效果如图4.17所示。以下是框架集文档的内容:上一页下一页返回4.4框架在布局上的应用

<html><head><title>目标框架示例</title></head><framesetrows="100,*”><framesrc="filel.htm"><framesetcots="200,*"><framesrc="file2.htm"><framesrc="file3.htm"name="main"></frameset></frameset></html>上一页下一页返回4.4框架在布局上的应用

以下是框架集所在目录下filel.htm文件的内容:<html><head><title>filel</title></head><body><hlalign="center">杜甫</h1></body></html>以下是框架集所在目录下flle2.htm文件的内容:<html><head><title>file2</title></head><body><h3align="center"><ahref--"file4.htm"target="main">望房</a></h3><h3align="center"><ahref--"file5.htm"target="_blank">春望</a></h3></body></html>上一页下一页返回4.4框架在布局上的应用

以下是框架集所在目录下file3.htm文件的内容:<html><head><title>file3</title></head><body><h4>杜甫(712-770)字子美，河南巩县人，出生于“奉儒守官”的地主家庭。杜甫是个创作天地很广阔的诗人。现存诗千四百多首。他善于表现重大的主题，也善于描写细小的事物，题材是多方而的。无论八言、一七言、古体、近体，都特别出色，又能融合前人艺术的各种长处，形成自己的独特风格。杜甫在我国诗歌发展史上所做出的贡献是巨大的，他对后世的影响是深远的。</h4></body></html>上一页下一页返回4.4框架在布局上的应用

以下是框架集所在目录下flle4.htm文件的内容:<html><head><title>file4</title></head><body><h4>岱宗夫如何，归齐鲁青末了。<br>造化钟神秀，阴阳割昏晓。<br>荡胸生层云，决毗入归鸟。<br>会当凌绝顶，一览众山小。</h4></body></html>以下是框架集所在目录下fl1e5.htm文件的内容:<html><head><title>file5</title></head>上一页下一页返回4.4框架在布局上的应用

<body><h4>国破山河在，城春草木深。<br>感时花溅泪，恨别鸟惊心。<br>烽火连二月，家书抵力金。<br>白头搔更短，浑欲不胜替。</h4></body></html>

在图4.17中，单击左边的“望岳””超链接时，其目标文件显示在右边命名为“main的框架中，而单击左边的“春望”超链接时，其目标文件会在一个新的浏览器窗口中打开。上一页下一页返回4.4框架在布局上的应用

4.4.3使用iframe创建页面内框架语法<iframe></iframe>说明:iframe标记符定义了一个页面内的框架，该框架可以容纳其他的HTML文档。iframe标记符是成对使用的。由iframe创建的框架可以作为其它链接的目标窗口。iframe标记符的主要属性如下所示:src(源):设置框架内容的URL，一般情况下是一个HTML文档，也可以是图像或多媒体文件等。name(名称):设置框架的名称，该名称必须是以字母为开头。页面中所有链接都可以将该框架作为目标窗口。width(宽度)和height(高度):设置页面内框架的尺寸，它的单位是像素或可用空间的百分比。align(对齐方式):设置行内框架与其周围的页面元素的对齐方式。该属性的参数有top(顶部对齐)、middle(中部对齐)和bottom(底部对齐)。上一页下一页返回4.4框架在布局上的应用

frameborder(框架边框):设置框架的边框，默认值为1，表示框架的边框是可见的。还可以设置为0，表示框架的边框不可见。mainwidth(框架左右边距)如mainheight(框架上下边距):设置显示内容与左右边界以及上下边界之间的空白距离，单位是像素。scrollingC是否显示滚动条):设置框架中是否显示滚动条，默认值是"auto(自动)”，即只在击要时显示滚动条。该属性还有另外两个取值，“yes(显示)”和“no(不显示)”，其中yes表示始终显示滚动条，而no表示始终隐藏滚动条。

需要说明的是，如果浏览器支持页面内框架，那么页面内框架中将显示属性“src”中所定义的HTML文档;如果浏览器不支持页面内框架，那么页面内框架将显示标记符<iframe>与标记符</iframe>间的内容，不过目前几乎所有浏览器均支持页面内框架。下面是一个使用页面内框架布局的实例，其源代码如下所示:上一页下一页返回4.4框架在布局上的应用

<html><head><title>页而内框架实例</title></head><body><palign="center">NBA俱乐部</p><tablebgcolor="#eeeeee"align="center"><tr><td><p><ahref--"focus.htm"target="content">热点人物</a></p><p><ahref--"classical.htm"target="content">经典时刻</a></p><p><ahref--“jordan.htm”target=“content”>巨星风采</a></p><p><ahref--"select.htm"target="content">选秀大会</a></p><td>上一页下一页返回4.4框架在布局上的应用

<iframesrc="welcome.htm"width="200"height="120"name="content">真可惜，您的浏览器不支持页内框架!</iframe></table></body></html>其中文件welcome.htm的源代码如下所示<html><head><title>NBA俱乐部</title></head><body><palign="center">欢迎来到NBA俱乐部</p>上一页下一页返回4.4框架在布局上的应用

</body></html>文件_jordan.htm的源代码如下所示(focus.htm,classical.htm,select.htm等文件请读者自行编写):<html><head><title>Jordan</title></head><body><p>迈克尔乔丹是当今世界上最伟大的篮球明星。</p></body></html>在浏览器中打开该文档，单击页面左边的“巨星风采”链接，页面右面的部分将显示相关的文字，如图4.18所示。上一页下一页返回4.4框架在布局上的应用

4.4.4使用框架进行页面布局

由于框架能在同一窗口中显示多个网页，而通过指定超链接的目标框架又能轻松实现页面间地导航，因此框架是一种常用的页面布局工具。通常请况下，使用框架进行页面布局时应该按照以下的步骤:(1)绘制布局草图，将窗口分成若干个子窗口，确定具体采用的框架结构。

(2)创建框架集文件，使用框架将页面的构成表现出来，明确各个子窗口之间的关系。也可以考虑采用页面内框架，具体请参见4.4.3节。(3)分别创建各个子窗口的HTML文件，注意使用表格进行具体页面的布局。(4)在浏览器中打开框架集文件，查看框架的整体显示效果。如果不合适，请返回到各个HTML文件中调整页面或者修改框架集文件，直到合适为止。上一页下一页返回4.4框架在布局上的应用

下面是一个使用框架进行页面布局的实例，页面布局的草图如图4.19所示。下面我们将按照图4.19所绘制的布局草图，使用框架进行页面布局，具体步骤如下:(1)分析布局草图。该网页中共有3个不同的框架，是上中下结构。(2)创建框架集文件，该文件名为framelayout.htm，其源代码如下所示:<html><head><title>采用框架结构进行页而布局</title>上一页下一页返回4.4框架在布局上的应用

</head><framesetrows="120,*,30"<framename="top"src="top2.htm"noresizeframeborder="NO"marginwidth="0“marginheight="0"><framename="middle"src="middle.htm"noresizeframehorder="NO“marginwidth="0“marginheight="0"><framename="bottom"src="bottom2.htm"noresizeframeborder="NO"></frameset></html>(3)分别制作各个子窗口的HTML文件。其中top2.htm文件的源代码如下所示:上一页下一页返回4.4框架在布局上的应用

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

温馨提示

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

教学材料HTML DHTML教程-第四章

文档简介

温馨提示

最新文档

评论

教学材料HTML DHTML教程-第四章

文档简介

温馨提示

最新文档

评论

相关文档