第 8 章网页制作基础

第8章网页制作基础

重点难点了解: HTML基本标记语言熟悉: HTML常用标记及其属性、表格、框架等网页制作元素。掌握:用HTML制作基本网页。 • 本章重点讨论HTML常用标记及及其属性、表格、框架、表单能力要求基本知识 • HTML基本标记及HTML文档框架、HTML常用标记及及其属性、表格、框架、表单、层叠样式表CSS和DIV标记本章要求：

§ 8.4 表格 §8.7 层叠样式表CSS和DIV标记 § 8.6 表单 §8.3 HTML的常用标记及其属性 §8.2 HTML概述 §8.5 框架 §8.1 网页制作概述网页制作基础本章内容：

§8.1 网页制作概述 • 制作网页的常用技术制作网页常用的技术有下列几种： • HTML： HTML（Hyppertext Markup Language，即超文本置标语言，或超文本标记语言）是一种文本类、解释执行的标记语言。它是Internet上用于编写静态页面的主要语言，是网页制作的基础。 • CSS： CSS（Cascading Style Sheets，即级联样式表），是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。它是一种专门有关网页样式描述的文件，不关心网页的内容，就像是“网页”的外衣，通过操纵编辑更改其内容来灵活改变网页的外观布局。

§8.1 网页制作概述 • 制作网页的常用技术 • CGI： CGI（Common Gateway Interface，即公共网关接口）是HTTP（HyperText Transfer Protocol，即超文件传输协议）服务器与其它机器上的程序进行“交谈”的一种工具，其程序必须运行在网络服务器上，CGI程序使网页具有交互能力。 • JavaScript： JavaScript是由Netscape公司开发的，是目前最流行的网络脚本语言。它用于开发动态的页面，功能强大。可以直接应用于HTML文档，在客户端执行以获得动态交互式效果，还可以运行于服务器端，代替传统的CGI程序。

§8.1 网页制作概述 • 制作网页的常用技术 • Java Applet： Java Applet 就是用 Java语言编写的一些小应用程序，它们可以直接嵌入到网页中，产生特殊的效果。 • VBScript： VBScript也是一种Script脚本语言，是ASP（Active Server Pages，即动态服务网页）默认使用的语言。它是由微软开发的一种通用的网络脚本语言，但是它只能被IE浏览器支持。 • JScript： JScript最早的形式是Netscape的Javascript，然后在此基础上出现了ECMA(European Computer Manufacturers Association)-262。现在的JavaScript和Jscript就是ECMA-262标准由不同公司实现的版本。

§8.1 网页制作概述 • 制作网页的常用技术 • ASP： ASP提供了一种服务器端脚本编写环境和服务器端执行指令的环境，是用附加特性扩展了标准的HTML文件。ASP页面可以使用脚本语言（如VBScript、JavaScript），默认的脚本语言是VBScript，用<% …%>来标识。使用它可以创建和运行动态、交互的Web服务器应用程序。 • PHP： PHP（Hypertext Pre_Processor，超级文本预处理语言）是一种内嵌在HTML页面内的脚本语言，静态的HTML标记和PHP程序一起组成了动态Web页面。PHP文件文件的扩展名是*.PHP，可以在多种操作系统下运行（Windows 或UNIX都支持），支持多种数据库，功能强大。 • JSP： JSP（Java Server Pages，Java 服务器页）是一种动态网页技术标准，是由SUN公司倡导并在许多公司参与下共同建立的一种动态网页技术标准。

§8.1 网页制作概述 • 制作网页的常用技术 • CFML： CFML（Cold Fusion Markup Language，冷聚变标记语言）是一个稳定、可靠的Web应用服务平台。 • XML： XML（Extensible Markup Language，可扩展的标记语言）是W3C组织于1998年2月发布的标准。它是一个精简的SGML（Standard Generalized Markup Language,标准通用标记语言），它将SGML的丰富功能与HTML的易用性结合到Web中。XML不同于HTML：XML比HTML强大得多，不再是固定的标记，而是允许定义数量不限的标记来描述文档中的信息，且允许嵌套的信息结构；HTML只是Web显示数据的通用方法，而XML提供了一个直接处理 Web 数据的通用方法；HTML着重描述Web页面的显示格式，而XML着重描述的是Web页面的内容。

§8.1 网页制作概述 • 制作网页的常用技术 • ASP.NET： ASP.net是Microsoft.net的一部分，作为战略产品，不仅仅是ASP 的一个新版本，而且还提供了一个统一的 Web 开发模型。ASP.NET 的语法在很大程度上与 ASP 兼容，同时它还提供一种新的编程模型和结构，可生成伸缩性和稳定性更好的应用程序，并提供更好的安全保护。 • Web数据库一般情况下都是通过SQL命令对后台数据库进行各种操作的。常用的后台数据库有： • Microsoft SQL-Server ：需要Windows操作系统支持，适合不太大的系统 • Oracle：可以跨平台运行，适合比较复杂的大型系统 • Microsoft Access：需要Windows操作系统支持，一般是小型的、比较简单的系统

§8.1 网页制作概述 • 网页制作的常用工具 • 网页设计“三剑客”： Macromedia Dreamweaver系列、 Fireworks系列、Flash系列的组合。其中Dreamweaver——设计站点和页面；Fireworks ——处理静态图片或简单的动态图片（gif动画）；Flash——制作动画。 • Microsoft FrontPage 2003、 Photo Express系列、Adobe Photoshop 系列的组合：其中FrontPage 2003——设计站点和页面，Photo Express 系列——简单的静态图片处理，Photoshop系列 ——各种特殊效果的静态图片处理。 • Microsoft InterDev （Web应用程序开发平台）：这是微软的一个综合开发环境，在此平台上可以进行项目管理、站点管理、页面设计、网络编程、调试等。

§8.2 HTML概述 • HTML语言简介 HTML语言是一种简易的文件交换标准，有别于物理的文件结构，旨在定义文件内的对象和描述文件的逻辑结构，而并不定义文件的显示。HTML是纯文本类型的语言，使用HTML编写的网页文件也是标准的纯文本文件，可以直接被浏览器解释执行，无需编译。

§8.2 HTML概述 • HTML基本标记及HTML文档框架 HTML标记的一般形式：<开始标记>要描述的文本内容</结束标记>。其开始标记和结束标记都被封闭在尖括号中。结束标记与开始标记的唯一区别是在标记名称前有一个斜杠（/），如段落标记<p>和</p>。HTML文档主要分为两个部分：头部(head)和主体(body)。除了文档的头部和主体外，典型的HTML文档还包含注释。这些注释是文档作者写给自己和其他人看的，起到说明性作用。尽管它们出现在文档中，但是它们不会被解释，也不能被显示，也不以任何方式改变标记和文档的功能，其实它们不是文档“流“的一部分。 HTML文档中的注释形式如下： 。

§8.2 HTML概述 • HTML基本标记及HTML文档框架标记对<head>...</head>之间的内容不会在浏览器页面中显示，为头部部分。其内容是关于此文档的相关信息，如文档的标题，也就是<title>和</title>之间的文本。下面表8-1是允许出现在HTML文档头部中的常用标记：

§8.2 HTML概述 • HTML基本标记及HTML文档框架 <body>标记和</body>标记之间包含的内容将出现在web页面上，其为网页的主体部分, 这部分可能要在浏览器的窗口中显示，属于文档“流“。在此标记对之间可包含<p>…</p>、<h1>…</h1>、<br>…<hr>等标记对，描述的是：正文信息，如标题、段落、列表和表格。标记的详细情况如下表8-2所示：

§8.2 HTML概述 • HTML基本标记及HTML文档框架 <body>标记的常用属性如下表8-3所示：

§8.2 HTML概述 • HTML标记类型 • 结构性的标记：这种标记布置文档的结构。如段落标记（<p>…</p>）和标题标记（<head>…</head>）就是结构性标记。 • 样式性的标记：其描述对应内容被显示时应采用的样式。相当多的HTML标记用于样式化的显示。如上面代码中的粗体标记（<b>…</b>）属于样式性标记。一般情况下，不鼓励使用此类标记，因为当文档在非可视的媒体中表现时此类标记会造成一些问题。 • 描述性的标记：其用来描述元素的性质。如（<title>…</title>）。

§8.2 HTML概述 • HTML的编辑和运行环境根据HTML语法所写出来的文件称为HTML文件，其文件的后缀为.html或.htm 。HTML文件是纯文本文件，可以使用任何一个文本编辑器进行编辑，然后通过浏览器来解释执行。通常采用的纯文本文件编辑器是 Windows操作系统中的记事本或者写字板。然后直接用WEB浏览器打开。例如在Windows XP中的写字板中输入并编辑以下代码，保存为Test.html： <html> <head> <title>JXUST简介</title> </head> <body bgcolor="Silver" text="#000fff"> <h1 align="center">江西理工大学简介</h1>

§8.2 HTML概述 • HTML的编辑和运行环境 <p>江西理工大学创办于1958年，原名为<b>江西冶金学院</b>，1988年更名为<b>南方冶金学院</b>，2004年5月经国家教育部批准，学校更名为<b>江西理工大学</b>。<hr align="left" width="965" size="2" color="#0000FF">学校曾先后隶属于国家冶金工业部、中国有色金属工业总公司，1998年9月起，实行中央与地方共建，以江西省管理为主的管理体制，是一所面向全国招生与就业的全日制普通本科院校。</p>  </body> </html> 用浏览器打开，显示的界面如图8-1所示：

§8.3 HTML的常用标记及其属性 • HTML的文本格式标记及其属性 • <pre>…</pre>： <pre>…</pre>标记对用来对文本进行预处理操作。 • <b>…</b>、<i>…</i>、<u>…</u>：像在WORD 中的文本格式一样。<b>…</b>用来表示使文本以黑体字形式输出；<i>…</i>用来表示文本以斜体字的形式输出；<u>…</u>用来表示文本以下加一划线的形式输出。 • <tt>…</tt>、<cite>…</cite>、<em>…</em>、<strong>…</strong> ：这些标记对的用法和上边的一样，差别只是在于输出的文本字体不太一样而已。<tt>…</tt>用来输出打字机风格字体的文本；<cite>…</cite>用来输出引用方式的字体，通常是斜体；<em>…</em>用来输出需要强调的文本(通常是斜体加黑体)；<strong>…</strong>则用来输出加重了的文本(通常也是斜体加黑体)。

§8.3 HTML的常用标记及其属性 • HTML的文本格式标记及其属性 • <blockquote>…</blockquote> ：在<blockquote>…</blockquote>标记对之间加入的文本将会在浏览器中按两边缩进的方式显示出来。 • <font>…</font>： <font>…</font>是一对很有用的标记对，它可以对输出文本的字体大小、颜色进行修改，通过对它的两个属性 size 和 color 来控制实现的。size属性用来改变字体的大小，它可以取值：-1、1和+1；而color属性则用来改变文本的颜色，颜色的取值可以是十六进制RGB颜色码或HTML语言给定的颜色常量名，如下表8-4：

§8.3 HTML的常用标记及其属性 • HTML的文本格式标记及其属性实例代码：<html> <head> <title>江西理工大学简介</title> </head> <body text="blue"> <h1>江西理工大学简介</h1> <h6>江西理工大学简介</h6> <p><strong>江西理工大学</strong>是一所以<u>理工为主 </u>，工学、理学、经济学、管理学、法学、文学、教育学等七大学科协调发展，研究生教育与本科教育并举，面向全国招生和就业并有权接收华侨及港澳台学生的<cite><b>教学研究型大学</b></cite>，是<em><font size="+1" color="red">江西省政府确定的五所重点加强建设的高校之一。</font></em> </p> </body> </html>

§8.3 HTML的常用标记及其属性 • HTML的文本格式标记及其属性其文本以各种格式显示的效果图：

§8.3 HTML的常用标记及其属性 • 图像标记及其属性为了使web页面变的更加美观，有吸引力，使用<img>元素对src属性赋值将图像添加到页面中。这里要注意图形文件所在的路径：当HTML文件与图形文件(文件名假设是logo.gif)在同一个目录下，则代码为<img src=“logo.gif”>；当图形文件放在HTML文档所在目录的一个子目录(假设子目录名是images)下，则代码为<img src=“images/logo.gif”>；当图形文件放在HTML文档所在目录的父目录(假设父目录名是home)中，则代码应为 <img src="../home/logo.gif">，也就是网址的形式。

§8.3 HTML的常用标记及其属性 • 图像标记及其属性 <img>标记中src属性在是必须赋值的，是标记中不可缺少的一部分。除此之外，<img>标记还有alt、align、border、width和height属性。align是图像的对齐方式，与前面的用法一样，这里就不再提了。border属性是图像的边框，可以取大于或者等于0的整数，默认单位是像素。width和height属性是图像的宽和高，默认单位也是象素。alt属性是当鼠标移动到图像上时显示的文本。其主要属性的具体用法如下表8-5所示：

§8.3 HTML的常用标记及其属性 • 图像标记及其属性示范代码及显示的效果图： <html> <head> <title>美丽的八角塘</title> </title> <body> <img align="center" src="八角塘.jpg" border="2" width ="100" height ="60" alt="江西理工大学八角塘" /> </body>

§8.3 HTML的常用标记及其属性 • 链接标记及其属性用的HTML标记对是<a>…</a>创建链接，使得 Web页面之间相互连接或者链接，从而使web成为强大的可导航的信息源。这样使得不但能够从一个文档跳到另一个文档，而且可以从某个文档中的任何地方跳到另一个文档的中的任何位置(顶部、中间、底部、第3行、第255个词，等等)。 • <a href="">…</a> 本标记对的属性href是不能缺少的，标记对之间加入需要链接的文本或图像(链接图像时加入<img src=“”>标记)。href的值可以是URL形式，即网址或相对路径；也可以是mailto：形式，即发送E-Mail形式。对于第一种情况，语法为<a href=“URL”>…</a>，这就能创建一个超文本链接了。例如：<a href=“http://www.jxust.cn/”>江西理工大学主页</a>。对于第二种情况，语法为<a href=“mailto:EMAIL”>…</a>，这就创建了一个自动发送电子邮件的链接。例如：<a href=“mailto:wodexinxiang @263.net”>。此外，<a href="">…</a>还具有target属性，此属性用来指明浏览的目标框架，例如：<a href=" http://www.jxust.cn/" target="_blank">江西理工大学主页</a>，其目标为"_blank"。

§8.3 HTML的常用标记及其属性 • 链接标记及其属性 • <a name="">…</a> <a name="">…</a>标记对要结合<a href="">…</a>标记对使用才有效果。<a name="">…</a>标记对用来在HTML文档中创建一个标记(即做一个记号)，属性name是不可缺少的，它的值就是网页中的标记名。创建标记的目的为了在HTML文档中创建一些链接，以便能够找到同一文档中的有标记的地方。例如要找到“标记名”这个标记，就要编写如下代码： <a href="#标记名">点击此处将使浏览器跳到“标记名”处</a>。注意：href属性赋的值若是标记的名字，必须在标记名前边加一个“#”号。

§8.3 HTML的常用标记及其属性 • 列表标记列表在HTML文档中使用很普遍。列表是一系列的条目，这些条目通常占一行，而且它们前面往往有一个符号（字母）或数字，建立这样的列表叫做有次序列表；如果建立时没有使用符号（字母）或数字，这样的列表叫做无次序列表。 • <dl>…</dl>、<dt>…</dt>、<dd>…</dd>定义列表 <dl>…</dl>用来创建一个普通的列表，<dt>…</dt>用来创建列表中的上层项目，<dd>…</dd>用来创建列表中最下层项目，<dt>…</dt>和<dd>…</dd>都必须放在<dl>…</dl>标记对之间。例如代码： <dl> <dt>行政机构</dt> <dd>校办公室 </dd> <dd>教务处 </dd> <dt>院系设置</dt> <dd>资源与环境工程学院 </dd> <dd>信息工程学院</dd>

§8.3 HTML的常用标记及其属性 • 列表标记 • <ul>…</ul>、<li>…</li>创建无序列表 <ul>…</ul>标记对用来创建一个无序列表，即列表的段头符号为disk（实心圆●）、circle（空心圆○）、square（实心方框■）三种。用属性type指定要显示的段头符号，默认为实心圆。例如：<ul type=”disk”>表示创建的是带有实心圆●段头符号的无序列表。<li>…</li>标记对只能在<ul>…</ul>标记对之间使用，此标记对用来创建列表的一个列表项，且创建的是无序列表的表项。 • <ol>…</ol>、<li>…</li>创建有序列表 <ol>…</ol>标记对用来创建一个有序列表，即列表的段头符号为数字、大小写英文字母、大小写罗马数字。用属性type指定要显示的段头符号，默认为数字段头符号。例如：<ul type=”a”>表示创建的是带有小写英文字母段头符号的有序列表；<ul type=”1”>表示创建的是带数字段头符号的有序列表。<li>…</li>标记在<ol>…</ol>标记对之间使用，此时标记对用来创建一个有序列表的一个列表项。

§8.3 HTML的常用标记及其属性 • 列表标记示范代码如下： <html> <head> <title>江西理大学机构设置</title> </head> <body text="blue"> <ol> <p>行政机构 </p> <li>校办公室 </li> <li>教务处 </li> </ol> <ul> <p>院系设置 </p> <li>资源与环境工程学院 </li> <li>信息工程学院 </li> </ul> </body> </html>

§8.3 HTML的常用标记及其属性 • 列表标记浏览器运行效果如下图8-5所示：

§8.4 表格 表格是在网页中显示数据的一种非常有用方法。表格标记对于制作网页是很重要的，当前很多网页都是使用多重表格，主要是因为表格不但可以固定文本或图像的输出，而且还可以任意的进行背景和前景颜色的设置。 • <table>…</table>标记在这里主要学习<table>…</table>标记的属性如下表8-6所示：

§ 8.4 表格 • <caption>…</caption>标记 <caption>…</caption>这个标记对是可选的。如果<table>…</table>标记对包含它，它必须是<table>…</table>标记对的第一个标记。它说明表格的标题。例如： <table> <caption align=”centre”>学院设置 </caption> </table>

§ 8.4 表格 • <th>..</th>、<tr>…</tr>、<td>…</td>标记 <th>…</th>标记对用来设置表格头，通常是黑体居中文字；<tr>…</tr>标记对用来创建表格中的首行。此标记对只能放在<table>…</table>标记对之间使用，而在此标记对之间加入文本将是无用的，因为在<tr>…</tr>之间只能紧跟<td>…</td>标记对才是有效；<td>…</td>标记对用来创建表格中一行中的数据单元格，此标记对也只有放在<tr>…</tr>标记对之间才是有效，要显示的文本也只有放在<td>…</td>标记对中才有效(即才能够显示出来)。一般情况下表格中，每行中的单元格数目相同，每列中的单元格数目也相同。怎么让一个单元格跨多行或多列呢？在HTML中，使用colspan和rowspan属性。colspan和rowspan是<td>的两个属性。一般语法如下： <td colspan=”[要跨过的列的数目]”> <td rowspan=”[要跨过的行的数目]”>

§ 8.4 表格 • <thead>…</thead>、<tbody>…</tbody>和<tfoot>…</tfoot>标记 <thead>…</thead>、<tbody>…</tbody>和<tfoot>…</tfoot>标记将表格进一步分为列标题部分、主体部分和页脚部分。这样能够容易来访问表格的内容，而且它还可以允许更加容易地用样式特性来装饰表格。

§ 8.4 表格 • 表格的嵌套 <td>元素可以包含任何其它表示性元素，也可以为另一个表格，这就允许利用表格进行表格的显示和布局。注意，这是一个表示性的设计，应该只在确定页面将在大屏幕可视媒体上显示时使用。以这种方式嵌套表格允许创建非常复杂的显示和布局，但是和任何事情一样，不应该过度使用此方法。因为布局多重表格将要消耗大量的计算机资源，而且在非可视浏览器中几乎不可能表达多重表格。

§ 8.4 表格 • 在表格内的文本处理要想在表格的单元格内对齐文本，我们使用valign和align属性。valign属性控制单元格内文本的垂直对齐，align属性控制表格内文本的水平对齐。注意，尽管这个align属性与<table>元素所用的align属性同名，但是它用于<tr>、<td>或<th>元素时可以取额外的值。 • valign属性： valign属性管理单元格内的垂直对齐。一般语法如下：valign=”[value]”，valign可取的值如下：top、middle、bottom、baseline。 • align属性： align属性管理单元格内的水平对齐。一般格式：align=”[value]”，其可取的值为：letf、right、center和justify。

§ 8.4 表格 • 表格实例关键代码： <table border="1" width="500"> <caption>学院现任领导班子</caption> <thead style="background-color:red;"> <tr><td> </td><td td colspan="3">&nbsp</td></tr> </thead> <tfoot style="background-color:teal;"> <tr><td> </td><td td colspan="3">&nbsp</td></tr> </tfoot> <tbody> <tr> <th>姓名</th> <th td colspan="3">职务及分管工作</th> </tr> <tr> <td rowspan="2" valign="middle" align="left">王大东</td> <td colspan="3">院长</td> </tr>

§ 8.4 表格 • 表格实例关键代码： <tr> <td colspan="3">学院行政工作</td> </tr> <tr> <td>杨胜</td> <td>书记</td> <td>学院党总支</td> <td>工会工作</td> </tr> <tr> <td>张杰</td> <td colspan="2">副院长</td> <td>科研工作</td> </tr>

§ 8.4 表格 • 表格实例关键代码： <tr> <td colspan="4"> <table border="1" bgcolor="#E8E8E8" cellpadding="2" bordercolor="#0000A0" bordercolorlight="red" bordercolordark="#0000A0" width="498"> <tr> <td >何丽芳</td> <td>副书记</td> <td>学生工作</td> </tr> </table> </td> </tr> <tbody> </table>

§ 8.4 表格 • 浏览器运行效果如图8-6所示：

§8.5 框架 • <frameset>…</frameset> 标记 <frameset>…</frameset>标记对放在框架的主文档的<body></body>标记对的外边，也可以嵌在其他框架文档中，可以嵌套使用。此标记对用来定义主文档中有几个框架并且各个框架是如何排列的。此标记对主要有rows和cols两个属性，使用<frameset>标记时这两个属性至少必须选择一个，否则浏览器只显示第一个定义的框架，剩下的一概不管。rows用来规定主文档中各个框架的行定位，而cols用来规定主文档中各个框架的列定位。这两个属性的取值可以是百分数、绝对像素值或星号(“*”)，其中星号代表那些未被说明的空间，如果同一个属性中出现多个星号则将剩下的未被说明的空间平均分配。同时，所有的框架按照rows和cols的值从左到右，然后从上到下排列。框架可以用来向浏览器窗口中装载多个HTML文件。即每个HTML文件占据一个框架，而多个框架可以同时显示在同一个浏览器窗口中，它们组成了一个最大的框架，也即是一个包含多个HTML文档的HTML文件(我称它为主文档)。框架通常的使用方法是在一个框架中放置目录(即可供选择的链接)，然后将HTML文件显示在另一个框架中。

§8.5 框架 • <frameset>…</frameset> 标记框架标记对还有标准属性border、bordercolor、frameborder属性，其中frameborder=”1”表示边框可见，frameborder=”0” 表示边框不可见。具体属性rows和cols的值搭配用法见下表8-7：

§8.5 框架 • <frame>…</frame>标记 <frame>…</frame>标记对放在<frameset>…</frameset>之间，用来定义某一个具体的框架。<frame>标记具有src和name属性，这两个属性都是必须赋值的。src是此框架的源HTML文件名(包括网络路径，即相对路径或网址)，浏览器将会在此框架中显示src指定的HTML文件；name是此框架的名字，这个名字是用来供超文本链接标记<a href="" target="">中的target属性用来指定链接的HTML文件将显示的目标框架名。例如定义了一个框架，名字是main，在框架中显示的HTML文件名是jc.html，则代码是<frame src="jc.html" name="main">，且有一个链接，当点击了这个链接后，文件new.html将要显示在名为main的框架中，则这个例子的代码为<a href="new.html" target="main">需要链接的文本</a>。这样，就可以在一个框架中建立网站的目录，加入一系列链接，当点击链接以后将在另一个框架中显示被链接的HTM文件。

§8.5 框架 • <frame>…</frame>标记此外，<frame>标记还有scrolling和noresize属性，scrolling用来指定是否显示滚动轴，取值可以是“yes”(显示)、“no”(不显示)或“auto”(若需要则会自动显示,不需要则自动不显示)。noresize属性直接加入标记中即可使用，不需赋值，作用为禁止用户调整一个框架的大小。还有属性bordercolor、frameborder、marfinheight（指定框架上下边界与框架内容之间保留空白区的高度）、marginwidth（指定框架左右边界与框架内容之间保留空白区的宽度）等等属性。

§8.5 框架 • <noframes>…</noframes>标记 <noframes>…</noframes>标记对也是放在<frameset></frameset>标记对之间，作用是在不支持框架的浏览器中显示文本或图像信息。在此标记对之间先紧跟<body>…</body>标记对，然后才可以使用其它标记。

§8.5 框架 • 框架实例： *main.html <html> <head> <title>框架标记的综合示例</title> </head> <frameset cols="25%,*"> <frame src="menu.html" scrolling="no" name="Left"> <frame src="page1.html" scrolling="auto" name="Main"> <noframes> <body> <p>对不起，您的浏览器不支持“框架”！</p> </body> </noframes> </frameset> </html>

§8.5 框架 • 框架实例： *menu.html <html> <head> <title>目录</title> </head> <body> <p><font color="#FF0000">目录</font></p> <p><a href=“page1.html” target=“Main”>链接到第一页 </a></p> <p><a href="page2.html" target="Main">链接到第二页</a></p> </body> </html>

§8.5 框架 • 框架实例： *page1.html <html> <head> <title>第一页</title> </head> <body> <p align="center"><font color="#8000FF">这是第一页！</font></p> </body> </html> *page2.html <html> <head> <title>第二页</title> </head> <body> <p align="center"><font color="#FF0080">这是第二页！</font></p> </body> </html>

§8.5 框架 • 浏览器运行效果如下图8-7所示：

第 8 章网页制作基础