第 8 章网页制作基础

1

第 8 章网页制作基础

基本知识基本知识

HTML基本标记及 HTML文档框架、 HTML常用标记及及其属性、表格、框架、表单、层叠样式表 CSS和 DIV标记

本章重点讨论 HTML常用标记及及其属性、表格、框架、表单重点

难点重点难点

能力要求能力要求

了解 : HTML 基本标记语言熟悉 : HTML 常用标记及其属性、表格、框架等网页制作元素。掌握 : 用 HTML 制作基本网页。

§8.1 网页制作概述

§8.5 框架

§ 8.4 表格

§8.3 HTML 的常用标记及其属性

§8.2 HTML 概述

§8.7 层叠样式表 CSS 和 DIV 标记

§ 8.6 表单

制作网页的常用技术制作网页常用的技术有下列几种：

◦ HTML ： HTML （ Hyppertext Markup Language ，即超文本置标语言，或超文本标记语言）是一种文本类、解释执行的标记语言。它是 Internet 上用于编写静态页面的主要语言，是网页制作的基础。

◦ CSS ： CSS （ Cascading Style Sheets ，即级联样式表），是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。它是一种专门有关网页样式描述的文件，不关心网页的内容，就像是“网页”的外衣，通过操纵编辑更改其内容来灵活改变网页的外观布局。

4

制作网页的常用技术 ◦ CGI ： CGI （ Common Gateway Interface ，即公共网关接口）是 HTTP （ HyperText Transfer Protocol ，即超文件传输协议）服务器与其它机器上的程序进行“交谈”的一种工具，其程序必须运行在网络服务器上， CGI 程序使网页具有交互能力。

◦ JavaScript ： JavaScript 是由 Netscape 公司开发的，是目前最流行的网络脚本语言。它用于开发动态的页面，功能强大。可以直接应用于 HTML 文档，在客户端执行以获得动态交互式效果，还可以运行于服务器端，代替传统的 CGI 程序。

5

制作网页的常用技术 ◦ 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 标准由不同公司实现的版本。

6

制作网页的常用技术 ◦ 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 公司倡导并在许多公司参与下共同建立的一种动态网页技术标准。

7

制作网页的常用技术 ◦ 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

制作网页的常用技术 ◦ ASP.NET ： ASP.net 是 Microsoft.net 的一部分，作为战略产品，不仅仅

是 ASP 的一个新版本，而且还提供了一个统一的 Web 开发模型。ASP.NET 的语法在很大程度上与 ASP 兼容，同时它还提供一种新的编程模型和结构，可生成伸缩性和稳定性更好的应用程序，并提供更好的安全保护。

◦ Web 数据库一般情况下都是通过 SQL命令对后台数据库进行各种操作的。常用的后台数据库有： Microsoft SQL-Server ：需要 Windows 操作系统支持，适合不太大的系统

Oracle ：可以跨平台运行，适合比较复杂的大型系统 Microsoft Access ：需要 Windows 操作系统支持，一般是小型的、比较简单的系统

9

网页制作的常用工具 ◦ 网页设计“三剑客”： Macromedia Dreamweaver 系列、 Fireworks系列、 Flash 系列的组合。其中 Dreamweaver——设计站点和页面； Fireworks —— 处理静态图片或简单的动态图片（ gif 动画）； Flash—— 制作动画。

◦ Microsoft FrontPage 2003 、 Photo Express 系列、 Adobe Photoshop 系列的组合：

其中 FrontPage 2003——设计站点和页面， Photo Express 系列——简单的静态图片处理， Photoshop 系列 —— 各种特殊效果的静态图片处理。

◦ Microsoft InterDev （ Web 应用程序开发平台）：这是微软的一个综合开发环境，在此平台上可以进行项目管理、站点管理、页面设计、网络编程、调试等。

10

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

11

HTML 基本标记及 HTML 文档框架 HTML 标记的一般形式： < 开始标记 > 要描述的文本内容

</ 结束标记 > 。其开始标记和结束标记都被封闭在尖括号中。结束标记与开始标记的唯一区别是在标记名称前有一个斜杠（ / ），如段落标记 <p> 和 </p> 。 HTML 文档主要分为两个部分：头部 (head) 和主体 (body) 。

除了文档的头部和主体外，典型的 HTML 文档还包含注释。这些注释是文档作者写给自己和其他人看的，起到说明性作用。尽管它们出现在文档中，但是它们不会被解释，也不能被显示，也不以任何方式改变标记和文档的功能，其实它们不是文档“流“的一部分。 HTML 文档中的注释形式如下：

 。 12

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

标记名称功能描述

<title> 设置 HTML 文档的标题，即网页的标题

<link> 设定外部文件的链接

<meta> 有关文档本身的元信息

<style> 设置 CSS 样式表内容

<base> 定义文档的 URL 全称（基底网址）

<script> 包含网页中脚本程序的内容13

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

标记名称功能描述

<body> 定义文档的主体部分

<h1>to<h6> 定义 1 号标题到 6 号的主体部分的标题

<p> 定义主体部分的段落

<br> 插入换行

<hr>定义水平分隔线，具有 size 、 color 、 width 和 noshade 属

性

 定义注释14

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

属性名功能示例

<body bgcolor="#rrggbb"> 设置背景颜色

<body bgcolor="red"> 红色背景

<body text="#rrggbb"> 设置文本颜色

<body text="#0000ff"> 蓝色文本

<body link="#rrggbb"> 设置链接颜色

<body link="blue">链接为蓝色

<body vlink="#rrggbb">

设置已使用的链接的颜色

<body vlink="#ff0000"> 链接使用后为红色

<body alink="#rrggbb">

设置正在被击中的链接的颜色

<body alink="yellow"> 当连接被击中时变为绿色 15

HTML 标记类型 ◦ 结构性的标记：这种标记布置文档的结构。如段落标记（ <p>…

</p> ）和标题标记（ <head>…</head> ）就是结构性标记。

◦样式性的标记：其描述对应内容被显示时应采用的样式。相当多的 HTML 标记用于样式化的显示。如上面代码中的粗体标记（ <b>…</b> ）属于样式性标记。一般情况下，不鼓励使用此类标记，因为当文档在非可视的媒体中表现时此类标记会造成一些问题。

◦描述性的标记：其用来描述元素的性质。如（ <title>…</title> ）。

16

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>

17

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所示：

18

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>则用来输出加重了的文本 ( 通常也是斜体加黑体 ) 。

19

HTML 的文本格式标记及其属性 ◦ <blockquote>…</blockquote> ：在 <blockquote>…</blockquote> 标记对之间加入的文本将会在浏览器中按两边缩进的方式显示出来。

◦ <font>…</font> ： <font>…</font> 是一对很有用的标记对，它可以对输出文本的字体大小、颜色进行修改，通过对它的两个属性 size 和 color 来控制实现的。 size 属性用来改变字体的大小，它可以取值： -1 、 1 和 +1；而 color 属性则用来改变文本的颜色，颜色的取值可以是十六进制 RGB颜色码或HTML 语言给定的颜色常量名，如下表 8-4 ：

auque black blue fuchsia grey green lime maroon

navy olive purple red teal silver white yellow 20

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>

21

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

22

图像标记及其属性为了使 web 页面变的更加美观，有吸引力，使用 <img>元素对 src 属性赋值将图像添加到页面中。这里要注意图形文件所在的路径：

当 HTML 文件与图形文件 ( 文件名假设是 logo.gif) 在同一个目录下，则代码为<img src=“logo.gif”> ；

当图形文件放在 HTML 文档所在目录的一个子目录 (假设子目录名是 images) 下，则代码为<img src=“images/logo.gif”> ；

当图形文件放在 HTML 文档所在目录的父目录 (假设父目录名是 home) 中，则代码应为 <img src="../home/logo.gif"> ，也就是网址的形式。 23

图像标记及其属性 <img> 标记中 src 属性在是必须赋值的，是标记中不可缺少的一部分。除此之外， <img> 标记还有 alt 、 align 、 border 、 width

和 height 属性。 align 是图像的对齐方式，与前面的用法一样，这里就不再提了。 border 属性是图像的边框，可以取大于或者等于 0 的整数，默认单位是像素。 width 和 height 属性是图像的宽和高，默认单位也是象素。 alt 属性是当鼠标移动到图像上时显示的文本。其主要属性的具体用法如下表 8-5所示：

属性名功能示例<img src=" logo.gif "> 在 HTML文档中嵌入一个图像 <img src=" logo.gif ">

<img src=" logo.gif " align="">

排列对齐一个图像：左、中、右或上、中、下

<img src=" logo.gif" align="left">

<img src=" logo.gif " border=""> 设置图像边框的大小

<img src=" logo.gif" border="2">

<img src=" logo.gif " width=""> 设置图像边框的宽

<img src=" logo.gif" width ="100">

<img src=" logo.gif " height=""> 设置图像边框的高

<img src=" logo.gif" height ="60">

<img src=" logo.gif " alt="">

设置当鼠标移动到图像上时显示的文本

<img src=" logo.gif " alt ="江西理工大学八角塘 ">

24

图像标记及其属性示范代码及显示的效果图： <html> <head> <title>美丽的八角塘</title> </title> <body> <img align="center" src="八角塘 .jpg" border="2" width ="100"

height ="60" alt="江西理工大学八角塘 " /> </body>

25

链接标记及其属性用的 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" 。

26

链接标记及其属性 ◦ <a name="">…</a> <a name="">…</a> 标记对要结合 <a

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

27

列表标记列表在 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>

28

列表标记 ◦ <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> 标记对之间使用，此时标记对用来创建一个有序列表的一个列表项。

29

列表标记示范代码如下： <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>

30

列表标记浏览器运行效果如下图 8-5所示：

31

<table>…</table>标记在这里主要学习<table>…</table>标记的属性如下表 8-6所示：

属性名功能描述示例

<table bgcolor=" "> 设置表格的背景色 <table bgcolor="blue ">

<table border=" "> 设置边框的宽度，默认为 0 <table border="2 ">

<table bordercolor=" "> 设置边框的颜色 <table bordercolor="red ">

<table bordercolorlight="">设置边框明亮部分颜色 ( 当 border 的

值大于等于 1 时有效 )<table bordercolorlight="

red ">

<table bordercolordark=" ">设置边框昏暗部分颜色 ( 当 border 的

值大于等于 1 时有效 ) <table bordercolordark=" ">

<table cellspacing=" "> 设置表格格子之间空间的大小 <table cellspacing=" 10">

<table cellpadding=" ">设置表格格子边框与其内部内容之间空

间的大小 <table cellpadding=" ">

<table width=" ">设置表格的宽度，单位用绝对像素值或

总宽度的百分比 <table width=" 36%">

32

表格是在网页中显示数据的一种非常有用方法。表格标记对于制作网页是很重要的，当前很多网页都是使用多重表格，主要是因为表格不但可以固定文本或图像的输出，而且还可以任意的进行背景和前景颜色的设置。

<caption>…</caption> 标记 <caption>…</caption>这个标记对是可选的。如果 <table>…</table> 标记对包含它，它必须是<table>…</table> 标记对的第一个标记。它说明表格的标题。

例如： <table> <caption align=”centre”> 学院设置 </caption>

</table>

33

<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=”[ 要跨过的行的数目 ]”>

34

<thead>…</thead> 、 <tbody>…</tbody> 和 <tfoot>…</tfoot> 标记

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

35

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

36

在表格内的文本处理要想在表格的单元格内对齐文本，我们使用 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 。

37

表格实例关键代码： <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>

38

表格实例关键代码： <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>

39

表格实例关键代码： <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>

40

浏览器运行效果如图 8-6所示：

41

<frameset>…</frameset> 标记 <frameset>…</frameset> 标记对放在框架的主文档

的 <body></body> 标记对的外边，也可以嵌在其他框架文档中，可以嵌套使用。此标记对用来定义主文档中有几个框架并且各个框架是如何排列的。此标记对主要有 rows 和 cols两个属性，使用 <frameset> 标记时这两个属性至少必须选择一个，否则浏览器只显示第一个定义的框架，剩下的一概不管。rows 用来规定主文档中各个框架的行定位，而 cols 用来规定主文档中各个框架的列定位。这两个属性的取值可以是百分数、绝对像素值或星号 (“*”) ，其中星号代表那些未被说明的空间，如果同一个属性中出现多个星号则将剩下的未被说明的空间平均分配。同时，所有的框架按照 rows 和 cols 的值从左到右，然后从上到下排列。

42

框架可以用来向浏览器窗口中装载多个 HTML 文件。即每个 HTML文件占据一个框架，而多个框架可以同时显示在同一个浏览器窗口中，它们组成了一个最大的框架，也即是一个包含多个 HTML 文档的 HTML 文件( 我称它为主文档 ) 。框架通常的使用方法是在一个框架中放置目录 ( 即可供选择的链接 ) ，然后将 HTML 文件显示在另一个框架中。

<frameset>…</frameset> 标记框架标记对还有标准属性

border 、 bordercolor 、 frameborder 属性，其中frameborder=”1” 表示边框可见， frameborder=”0” 表示边框不可见。具体属性 rows 和 cols 的值搭配用法见下表 8-7 ：示例代码含义

<frameset rows="*,*,*">总共有三个按行排列的框架 , 每个框架占整个浏览器窗口的 1/3

<frameset cols="40%,*,*">

总共有三个按列排列的框架 , 第一个框架占整个浏览器窗口的 40% ，剩下的空间平均分配给另外两个框架

<frameset rows="40%,*" cols="50%,*,200">

总共有六个框架 , 先是在第一行中从左到右排列三个框架，然后在第二行中从左到右再排列三个框架，即两行三列，所占空间依据 rows 和 cols 属性的值 , 其中 200 的单位是像素

43

<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 文件。 44

<frame>…</frame> 标记此外， <frame> 标记还有 scrolling 和

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

45

<noframes>…</noframes> 标记

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

46

框架实例： *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> 47

框架实例： *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>

48

框架实例： *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> 49

浏览器运行效果如下图 8-7所示：

50

<form>…</form> 标记用 <form>…</form> 标记定义一个表单，主要是用

好 <form> 标记的属性，其主要属性有：◦ action 属性 : action 属性让你可以指定提交表单时接收表单数据的 URL ，语法为： <form action=”myURL”> ，注意， myURL 常常是发送出当前页面的同一服务器上的页面或脚本的 URL ，但这不是必需的。实际上， myURL甚至不必是一个 HTTP 协议 URL 。它可能是使用 mailto ：方法的电子邮件地址：<form action=’mailto:[email protected]’> 。例如： <form action=“ http://www.jxust.cn/counter.cgi”> ，当用户提交表单时，服务器将执行网址 http://www.jxust.cn/ 上的名为 counter.cgi 的 CGI程序。

51

表单在 Web 网页中用来给访问者填写信息，从而能获得用户信息，使网页具有交互的功能。下面我们介绍使用 HTML 标记来设计表单。

<form>…</form> 标记 ◦ method 属性： method 属性用来定义处理程序从表单中获得信息的方式，可取值为 GET 和 POST 的其中一个。 GET方式是处理程序从当前 HTML 文档中获取数据，然而这种方式传送的数据量是有所限制的，一般限制在 1KB 以下。 POST方式与 GET方式相反，它是当前的 HTM 文档把数据传送给处理程序，传送的数据量要比使用 GET方式的大的多。

◦ name 属性：表单的 name 属性就是表单的一个名字， JavaScript 可以通过此名字访问它；否则，需要通过数字访问它。

◦ target 属性：使用框架， target 属性会告诉浏览器在哪个框架中打开服务器产生的应答。

52

input 标记 <input> 标记用来定义一个用户输入区，用户可在其中输入信息。 <input> 标记具有许多属性，其中<input> 标记的 type 属性比较重要，决定 <input> 标记的输入控件类型。 <input type=“”> 中的 type 属性取值如课本表 8-8所示：

其八种类型的输入区域有一个公共的属性name ，此属性给每一个输入区域一个名字。这个名字与输入区域是一一对应的，即一个输入区域对应一个名字。服务器就是通过调用某一输入区域的名字的 value 属性来获得该区域的数据的。而 value 属性是另一个公共属性，它可用来指定输入区域的缺省值。也可以使用 disabled属性禁止使用，禁用时，按钮的说明变灰。例如：

<input type=”button” disabled=”true” /> 。 53

input 标记 input 标记 type 属性取值一览表：

type 属性取值输入区域类型<input type="text" size=""

maxlength="">单行的文本输入区域 ,size 与 maxlength 属性用来定义此种输入区域显示的尺寸大小与输入的最大字符数

<input type="submit"> 将表单内容提交给服务器的按钮<input type="reset"> 将表单内容全部清除，重新填写的按钮

<input type="checkbox"

checked> 一个复选框 ,checked 属性用来设置该复选框缺省时是否被选中<input type="hidden"> 隐藏区域 , 用户不能在其中输入 , 用来预设某些要传送的信息

<input type=" image"

src="url">图像来代替 Submit 按钮， src 属性指定图像位置，作用后，表单中的信息和点击位置的坐标会传送给服务器

<input type=" password"> 输入密码的区域，当用户输入密码时 , 区域内将会显示 "*" 号

<input type="radio"> 单选按钮类型， checked 属性用来设置该单选框缺省时是否被选中 54

<select>…</select> 、 <option> 标记此标记对用来创建一个下拉列表框或可以复选的列表框。

此标记对用于 <form>…</form> 标记对之间。 <select>具有 multiple 、 name 和 size 属性。 multiple 属性不用赋值，直接加入标记中即可使用，加入了此属性后列表框就成了可多选的了； name 是此列表框的名字； size 属性用来设置列表的高度，缺省时值为 1 ，若没有设置 ( 加入 )multiple 属性，显示的将是一个弹出式的列表框。

<option> 标记用来指定列表框中的一个选项，它放在<select>…</select> 标记对之间。此标记具有 selected 和value 属性， selected 用来指定默认的选项， value 属性用来给 <option> 指定的那一个选项赋值，这个值是要传送到服务器上的，服务器正是通过调用 <select> 区域的名字的 value属性来获得该区域选中的数据项的。

55

<textarea>…</textarea> 标记 <textarea>…</textarea> 用来创建一个可以

输入多行的文本框，此标记对用于 <form>…</form> 标记对之间。 <textarea> 具有 name 、 cols 和rows 属性。 cols 和 rows 属性分别用来设置文本框的列数和行数，这里列与行是以字符数为单位的。例如：

<form action="cgi-bin/tongji.cgi" method="post">

<p> 请给出你宝贵的意见： <textarea name="yj" clos="20"

rows="5"> 请将意见输入此区 </textarea> </form>

56

表单实例实例代码： <form action=".../inputTestServer.jsp" method="post"

name="myform"> <table> <tr width="500"> <td width="300"> <div>请在下面输入你名字： </div> <input type="text" name="yourName"

id="yourName" value="你的姓名 " style="color:red;font-weight: bold"/>

<form action="cgi-bin/tongji.cgi" method="post"> <p>请选择学院 : <select name="scollege" size="1"> <option value="jgxy">经济管理工程学院 <option value="xxxy" selected> 信息工程学院 </select> </form> 57

表单实例 <div> 性别： </div> <input type="radio" name="sex" id="sex" value=" 男 " /> <span> 男 </span> <input type="radio" name="sex" id="sex" value=" 女 " /> <span> 女 </span><div>兴趣爱好： </div> <input type="checkbox" name="interest1" id="interest1" value="听音乐 " />

<span>听音乐</span> <input type="checkbox" name="interest3" id="interest3" value="看

书 " /> <span>看书</span> <br> <input type="submit" value=" 发送 " style="color:blue;font-weight:

bold"/> <input type="reset" value="重置 " style="color:blue;font-weight:

bold"/> <input type="button" value="say hello" onclick="alert('你好！ ')"

style="color:blue;font-weight: bold"/> </td> 58

表单实例 <td width="200" align="bottom"> <br> <div>请输入您的简介： </div> <form action="cgi-bin/tongji.cgi" method="post"

> <textarea name="yj" clos="25" rows="10"> 请输入您的简介到此区域 </textarea></form> </td> </tr></table></form>

59

浏览器运行效果如下所示：

60

CSS 简介采用 CSS 技术，可以有效地对网页页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的 CSS 代码做一些简单的修改，就可以改变同一页面的不同部分，或者不同网页的外观和格式。

CSS 具有以下三个优点：◦ 一组样式可以调用在多个对象上。创建了一个 CSS 文件，可以调用到任何一个 HTML 文件中

◦ 语法易学易懂。 CSS 的代码比 HTML 的语法更容易学习◦ 富的样式效果。 CSS 的样式效果比 HTML 的多。 HTML 中有的样式， CSS 中都有提供。它还提供 HTML没有的网页效果。如滤镜效果： filter 。

61

CSS 与 HTML ◦嵌入式 : 示范代码如下： <html> <head> <title>JXUST 简介</title> <style typle="text/css">  </style> </head>

62

CSS 与 HTML ◦嵌入式 : <body> <h2>江西理工大学简介</h2> <p> 学校创建于 1958年，原名 <b>江西冶金学院</b> ，属江西省领导。 1962年起改由国家冶金工业部领导。 1983年起由冶金工业部划归中国有色金属工业总公司领导。 1988年更名为<b>南方冶金学院</b> 。 2004年更名为<b>江西理工大学</b> 。 </p>

 </body> </html> 在上段代码中标记对<head>…<head> 标记对之间的 <style>…<style>之间的就是嵌入的 CSS 代码段。嵌入式方式是在网页页面样式比较简单，代码比较少的情况下使用。

63

CSS 与 HTML ◦嵌入式 : 浏览器运行效果如下图 8-9 ：

64

CSS 与 HTML ◦链接式 : 示范代码如下：当网页的内容比较丰富，样式比较复杂时，由于样式代码比较多，如果把样式代码段嵌入 HTML 文档中，这样就会使得 HTML 文档比较繁琐，因此可以采用链接的方式。以上述代码为例，只需要把上述代码中 <style>…<style>之间的 CSS 代码段提出来保存为独立的以 .css为扩展名的 CSS 类型文件，然后在 HTML 文档中以链接的方式取得 CSS 代码。这种方式比较常用，适合 CSS规则比较多的情况下使用。

具体做法如下： CSS 代码文件： Testcss.css body{background:Silver;color:#000fff;} p{font-size:120%;color:blue;} h2{text-align:center;color:green;} b{color:red;}

65

CSS 与 HTML ◦链接式 : HTML 文件： Css2.html <html> <head> <title>JXUST 简介</title> <link href="Testcss.css" rel="Stylesheet"> </head> <body> <h2>江西理工大学简介</h2> <p> 学校创建于 1958年，原名 <b>江西冶金学院</b> ，属江西省领导。 1962年起改由国家冶金工业部领导。 1983年起由冶金工业部划归中国有色金属工业总公司领导。 1988年更名为<b>南方冶金学院</b> 。 2004年更名为<b>江西理工大学</b> 。 </p>

 </body> </html>

66

CSS 与 HTML ◦链接式：上述嵌入式比较只是在 HTML 文档中的

<head>…<head> 标记对中添加了 <link href=“Testcss.css” rel=“Stylesheet”> 代码，其中 Testcss.css 为 CSS 文件，要与 HTML 文件Css2.html放在同一文件目录下。一个 HTML 文件可以连接多个 CSS 文件，同样一个 CSS 文件也可以被多个 HTML 文件链接。上述代码在浏览器中的运行效果与图 8-9所示一样。

67

CSS 与 HTML ◦引入式：这种方式不常用，其做法是在HTML 文件的标记对<head>…<head>标记对之间加入说明性的代码：

@import url(Testcss.css)；其要用 <style typle="text/css">…</style> 标记对包括起来。最后的效果一样见图 8-9 。

68

CSS 与 HTML ◦引入式： CSS 代码文件不变， HTML 代码示范如下： <html> <head> <title>JXUST 简介</title> <style typle="text/css"> @import url(Testcss.css); </style> </head> <body> <h2>江西理工大学简介</h2> <p> 学校创建于 1958年，原名 <b>江西冶金学院</b> ，属江西省领导。 1962年起改由国家冶金工业部领导。 1983年起由冶金工业部划归中国有色金属工业总公司领导。 1988年更名为<b>南方冶金学院</b> 。 2004年更名为<b>江西理工大学</b> 。 </p>

 </body></html>

69

DIV 标记 DIV 标记是用来为 HTML 文档内大块（ block-level ）的内容提供结构和背景的

标记。 DIV 的起始标记和结束标记之间的所有内容都是用来构成这个块的，其中所包含标记的属性由 DIV 标记的属性来控制，常常是通过使用 CSS 格式化所包含的块。

DIV 表示一个块，并无实际的意义，常常通过 CSS 样式 (style)为其赋予不同的表现。其格式为： <div id=”div_name” style=” 属性 1: 属性 1 值 ; 属性 2: 属性2 值 ;… 属性 n: 属性 n 值 ;”>块内内容 </div> 。其属性有：◦ 嵌入式 : 示范代码如下： <html> <head> <title>JXUST 简介</title> <style typle="text/css">  </style> </head>

70

DIV 标记 DIV 标记是用来为 HTML 文档内大块（ block-level ）的内容提供结构

和背景的标记。 DIV 的起始标记和结束标记之间的所有内容都是用来构成这个块的，其中所包含标记的属性由 DIV 标记的属性来控制，常常是通过使用CSS 格式化所包含的块。

DIV 表示一个块，并无实际的意义，常常通过 CSS 样式 (style)为其赋予不同的表现。其格式为： <div id=”div_name” style=” 属性 1: 属性 1值 ; 属性 2: 属性 2 值 ;… 属性 n: 属性 n 值 ;”>块内内容 </div> 。其属性有：◦ 基本属性： width, height, left, top, background-color 。◦定位属性： position 其属性值为 absolute 、 relative 。当为

absolute时，表示整个块的位置固定不动；当为 relative时，表示整个块的位置会随着内容的实际情况进行浮动。

◦显示属性： display 其属性值为 block 或者 none 。当为 block时为默认状态，表示此块内容被显示；当为 none 表示表示此块内容被隐藏。

71

DIV 标记 ◦ 优先属性： z-index 其属性值为一个数值 n ，其为一个整数（正负均可）。当有多个 DIV 时 n越大，则越靠前显示。 z-index 可以理解为 z轴的坐标（ x ， y 轴控制左右、上下方位， z轴控制层叠 DIV 的前后方位）。只有用绝对定位（ position:absolute ）时，属性 z-index才起作用；未设置绝对定位（ position:absolute ）的 DIV ，其 z-index永远为 0 ；未设定优先属性（ z-index ）的DIV ，按照声明的顺序层叠，后声明的盖住先声明的，如果有两个 DIV 属于父子关系，则子 DIV覆盖父 DIV 。

◦透明属性： opacity 其属性值为 0.3时候浏览器 firefox 专用；其属性值为 30时等价于 filter:alpha ，这时是浏览器 IE专用。两者一起用的时候就将两种主流浏览器都兼容了。

72

DIV 标记 ◦ 优先属性： z-index 其属性值为一个数值 n ，其为一个整数（正负均可）。当有多个 DIV 时 n越大，则越靠前显示。 z-index 可以理解为 z轴的坐标（ x ， y 轴控制左右、上下方位， z轴控制层叠 DIV 的前后方位）。只有用绝对定位（ position:absolute ）时，属性 z-index才起作用；未设置绝对定位（ position:absolute ）的 DIV ，其 z-index永远为 0 ；未设定优先属性（ z-index ）的DIV ，按照声明的顺序层叠，后声明的盖住先声明的，如果有两个 DIV 属于父子关系，则子 DIV覆盖父 DIV 。

◦透明属性： opacity 其属性值为 0.3时候浏览器 firefox 专用；其属性值为 30时等价于 filter:alpha ，这时是浏览器 IE专用。两者一起用的时候就将两种主流浏览器都兼容了。

73

第 8 章 网页制作基础

Documents

第 8 章网页制作基础