详情
全书共分为15章和3个附录，重点介绍html进行网页制作的方方面面，同时讲解了目前流行的web标准与css网页布局实例，以及基于javascript语言的网页特效制作。为了便于读者学习，附录中汇集了经过作者精心整理的网页制作技巧60多例。
北京
十多年前，Internet在国内开始流行。其中，网页作为互联网的主要媒介受到了电脑爱好者的广泛关注。由于当时网速限制，网页主要承载文本、图片等简单数据，使用Dreamweaver或Frontpage软件即可轻松完成网页制作。而今天，Internet领域已经改变了太多，用软件点几下、拖几下即可完成整个网站的方法已经完全不适用。现在的网页制作领域，综合了多种技术，新一批的初学者该怎样学习网页制作？目前大部分制作网页的方式都是运用可视化的网页编辑软件，这些软件的功能相当强大，使用非常方便。但是对于高级的网页制作人员来讲，仍需了解HTML、CSS、JavaScript等网页设计语言和技术的使用，这样才能充分发挥自己丰富的想象力，更加随心所欲地设计符合标准的网页，以实现网页设计软件不能实现的许多重要功能。本书的第1版在2007年出版后，销售在同类书籍中一直名列前茅，重印十余次。这次改版重点增加了Web标准与Div布局方面的内容。
本书主要特色
完善的知识结构
本书从网页制作的实际角度出发，将所有HTML、CSS和JavaScript元素进行归类。每个标记的语法、属性和参数都有完整详细的说明。信息量大，知识结构完善。
大量的实用示例
全部语法采用真实案例进行分析讲解，每一个知识点均相应配以一个实例。边分析代码，边查看结果，以一种可视化的方式来学习语言，避免了单纯学习语法的枯燥与乏味。
配合Dreamweaver进行讲解
考虑到大部分用户在实际设计网页时都是使用Dreamweaver作为设计工具，而不是手工编写脚本，所以本书给出了Dreamweaver的基本用法，在最后一个附录中向读者展示了如何在Dreamweaver中实现前面讲解的大部分功能。
技巧与解答
本书采用技巧与解答相结合的方式，将使用 HTML、CSS、JavaScript 和 Dreamweaver在设计和制作网页过程中遇到的各种疑难问题进行了归纳。
本书读者对象
● 网页设计与制作人员
● 网站建设与开发人员
● 大中专院校相关专业师生
● 网页制作培训班学员
● 个人网站爱好者与自学读者
本书是集体努力的结晶，参加本书编写的人员均为从事网页教学工作的资深教师和具有大型商业网站建设经验的资深网页设计师，有着丰富的教学经验和网页设计经验。参加编写的人员包括刘西杰、柳林、王方、何翠平、周泉、孙良军、晁辉、张亚、吴秀红、何立、何海娟、舒祖明、邓仰伟、何香连、杨丽丽、邓莹莹等。由于时间所限，书中疏漏之处在所难免，恳请广大读者朋友批评指正。
编者
在当今社会中，网络已成为人们生活的一部分，网页设计技术已成为学习计算机的重要内容之一。目前大部分网页都采用可视化网页编辑软件来制作的，但是无论采用哪一种网页编辑软件，最后都是将所设计的网页转化为HTML。HTML是搭建网页的基础语言，如果不了解HTML，就不能灵活地实现想要的网页效果。本章就来介绍HTML的基本概念和编写方法以及浏览HTML文件的方法，使读者对HTML有个初步的了解，从而为后面的学习打下基础。
学习目标
了解HTML的基本概念
掌握HTML文件的编写方法
掌握使用浏览器浏览HTML文件
HTML 的英文全称是Hyper Text Markup Language，它是网页超文本标记语言，也是全球广域网上描述网页内容和外观的标准。
HTML作为一款标记语言，本身不能显示在浏览器中。标记语言经过浏览器的解释和编译，才能正确地反映HTML标记语言的内容。HTML从1.0到4.01经历了巨大的变化，从单一的文本显示功能到多功能互动，许多特性经过多年的完善，已经成为了一款非常成熟的标记语言。
HTML不是一款编程语言，而是一款描述性的标记语言，用于描述超文本中内容的显示方式。如文字以什么颜色、大小来显示等，这些都是利用HTML标记完成的。其最基本的语法就是<标记符>内容</标记符>。标记符通常都是成对使用，有一个开头标记和一个结束标记。结束标记只是在开头标记的前面加一个斜杠“/”。当浏览器收到HTML文件后，就会解释里面的标记符，然后把标记符相对应的功能表达出来。
如在 HTML 中用<I></I>标记符来定义文字为斜体字，用<B></B>标记符来定义文字为粗体字。当浏览器遇到<I></I>标记时，就会把<I></I>标记中的所有文字以斜体样式显示出来。遇到<B></B>标记时，就会把<B></B>标记中的所有文字以粗体样式显示出来。
完整的 HTML 文件包括标题、段落、列表、表格以及各种嵌入对象，这些对象统称为HTML元素。一个HTML文件的基本结构如下。
<html>文件开始标记<head>文件头开始的标记
……文件头的内容
</head>文件头结束的标记
<body>文件主体开始的标记
……文件主体的内容
</body>文件主体结束的标记
</html>文件结束标记
从上面的代码可以看出，在HTML文件中，所有的标记都是相对应的，开头标记为<>，结束标记为</>，在这两个标记中间添加内容。
HTML是超文本标记语言，主要通过各种标记来标示和排列各对象，通常由尖括号“<”、“>”以及其中所包含的标记元素组成。
在HTML中，所有的标记都是成对出现的，而结束标记总是在开始标记前增加一个“/”。标记与标记之间还可以嵌套，也可以放置各种属性。此外，在源文件中标记是不区分大小写的。
HTML定义了以下3种标记，用于描述页面的整体结构。
<html>标记：它放在HTML的开头，表示网页文档的开始。
<head>标记：出现在文档的起始部分，标明文档的头部信息，一般包括标题和主题信息，其结束标记</head>指明文档标题部分的结束。
<body>标记：用来指明文档的主体区域，网页所要显示的内容都放在这个标记内，其结束标记</body>指明主体区域的结束。
HTML文件的编写方法有两种，一种是利用记事本编写；另一种是在Dreamweaver中编写HTML代码。
HTML是一款以文字为基础的语言，并不需要什么特殊的开发环境，可以直接在Windows自带的记事本中编写。HTML文档以.html为扩展名，将HTML源代码输入到记事本并保存之后，可以在浏览器中打开文档以查看其效果。使用记事本编写HTML文件的具体操作步骤如下。
选择菜单中的【开始】|【所有程序】|【附件】|【记事本】命令，打开一个记事本，在记事本中即可编写HTML代码，如图1.1所示。
当编辑完HTML文件后，选择菜单中的【文件】|【保存】命令，弹出【另存为】对话框，将它存为扩展名为.htm或.html的文件即可，如图1.2所示。
单击【保存】按钮，保存文档。打开网页文档，在浏览器中预览效果，如图1.3所示。
提示
任何文字处理器都可以用来处理HTML代码，但必须记住，要以.html的扩展名对其加以保存。
使用Dreamweaver创建HTML文件，具体操作步骤如下。
打开Dreamweaver软件，新建一个文档，单击文档中的“代码”按钮，打开代码视图，在代码视图中可以输入HTML代码，如图1.4所示。
输入代码完成后，切换到设计视图，效果如图1.5所示。
打开index.htm文件，在IE浏览器窗口中可以看到编辑的HTML页面效果，如图1.6所示。
可以使用以下方法方便快捷地打开HTML文档进行编辑：
在页面空白处，单击鼠标右键，在弹出的快捷菜单中选择【查看源文件】选项；
在页面空白处，单击一次鼠标左键，按下键盘上最下边一行的【右键】快捷键，选择【查看源文件】选项；
在浏览器菜单栏上，选择【查看】|【源文件】命令，可以查看源文件，如图1.7所示，可以查看源文件。
1．填空题
（1）标记符通常都是成对使用，有一个__________和一个__________。结束标记只是在开头标记的前面加一个__________。当浏览器收到HTML文件后，就会解释里面的标记符，然后把标记符相对应的功能表达出来。
（2）HTML是超文本标记语言，主要通过各种标记来标示和排列各对象，通常由尖括号_________、_________以及其中所包含的标记元素组成。
（3）由于HTML语言编写的文件是标准的ASCII文本文件，HTML文件的编写方法有两种，一种是利用__________编写，另一种是在__________中编写HTML代码。
2．操作题
（1）用 IE 浏览器打开网上的任意一个网页，选择“查看”|“源文件”命令，在打开的记事本中查看各代码，并试着与浏览器中的内容进行对照。
（2）分别利用记事本和Dreamweaver创建一个简单的HTML网页。
表格是网页制作中使用最多的工具之一，在制作网页时，使用表格可以更清晰地排列数据。但在实际制作过程中，表格更多地用在网页布局定位上。很多网页都是以表格布局的，这是因为表格在文本和图像的位置控制方面都有很强的功能。灵活、熟练地使用表格，在网页制作时会有如虎添翼的感觉。
学习目标
掌握创建表格
掌握设置表格基本属性
掌握设置表格的边框
掌握设置表格背景
掌握设置表格的行属性
掌握调整单元格属性
表格是网页排版布局不可缺少的一个工具，能否熟练地运用表格将直接影响到网页设计的好坏。下面就讲述表格的创建。
表格由行、列和单元格3部分组成，一般通过3个标记来创建，分别是表格标记table、行标记tr和单元格标记td。表格的各种属性都要在表格的开始标记<table>和表格的结束标记</table>之间才有效。
行：表格中的水平间隔。
列：表格中的垂直间隔。
单元格：表格中行与列相交所产生的区域。
语法：
<table>
<tr>
<td>单元格内的文字</td>
<td>单元格内的文字</td>
</tr>
<tr>
<td>单元格内的文字</td>
<td>单元格内的文字</td>
</tr>
</table>
说明：
<table>标记和</table>标记分别表示表格的开始和结束，而<tr>和</tr>则分别表示行的开始和结束，在表格中包含几组<tr>…</tr>就表示该表格为几行；<td>和</td>表示单元格的起始和结束。
举例：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>表格的基本构成</title>
</head>
<body>
<table border="1">
<tr>
<td>第1行第1列单元格</td>
<td>第1行第2列单元格</td>
</tr>
<tr>
<td>第2行第1列单元格</td>
<td>第2行第2列单元格</td>
</tr>
</table>
</body>
</html>
在代码中加粗部分的代码标记是表格的基本构成，在浏览器中预览可以看到在网页中添加了一个2行2列的表格，表格没有边框，如图6.1所示。
在制作网页的过程中，一般都使用表格来排列网页数据，如图6.2所示。
可以使用<caption>来设置标题单元格，表格的标题一般位于整个表格的第 1 行。一个<table>表格只能含有一个表格标题。
语法：
<caption>表格的标题</caption>
举例：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>表格的标题</title>
</head>
<body>
<table width="171" border="1" >
<caption>考试成绩表</caption>
<tr>
<td width="44">张三</td>
<td width="35">95</td>
<td width="36">76</td>
<td width="28">80</td>
</tr>
<tr>
<td>李四</td>
<td>88</td>
<td>90</td>
<td>85</td>
</tr>
<tr>
<td>三毛</td>
<td>80</td>
<td>89</td>
<td>90</td>
</tr>
</table>
</body>
</html>
在代码中加粗部分的标记为设置表格的标题，在浏览器中预览，可以看到表格的标题，如图6.3所示。
提示
使用<caption>标记创建表格标题的好处是标题定义包含在表格内。如果表格移动或在HTML文件中重定位，标题会随着表格相应地移动。
表格的表头<th>是<td>单元格的一种变体，实质上仍是一种单元格。它一般位于第一行和第一列，用来表明这一行或列的内容类别。在一般情况下，浏览器会以粗体和居中的样式显示<th>元素中的内容。
语法：
<table >
<tr>
<th>80</th>
……
</tr>
<tr>
<td>单元格内的内容</td>
<td>单元格内的内容</td>
</tr>
</table>
说明：
<th>元素的起始标记必须有，但是结尾标记是可选的。
举例：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>表格的表头</title>
</head>
<body>
<table border="1">
<caption>考试成绩表</caption>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>副科</th>
<tr>
<td>张三</td>
<td>95</td>
<td>76</td>
<td>80</td>
</tr>
<tr>
<td>李四</td>
<td>88</td>
<td>90</td>
<td>85</td>
</tr>
<tr>
<td>三毛</td>
<td>80</td>
<td>89</td>
<td>90</td>
</tr>
</table>
</body>
</html>
在代码中加粗部分的代码标记为设置表格的表头，在浏览器中预览可以看到表格的表头效果，如图6.4所示。
为了使所创建的表格更加美观、醒目，需要对表格的属性进行设置，主要包括表格的宽度、高度和对齐方式等。
可以使用表格的 width 属性来设置表格的宽度。如果不指定表格宽度，浏览器就会根据表格内容的多少自动调整宽度。
语法：
<table width="表格宽度" >
说明：
表格宽度的值可以是像素值，也可以为百分比。
举例：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>表格的宽度</title>
</head>
<body>
<table width="500" border="1" >
<caption>考试成绩表</caption>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>副科</th>
<tr>
<td>张三</td>
<td>95</td>
<td>76</td>
<td>80</td>
</tr>
<tr>
<td>李四</td>
<td>88</td>
<td>90</td>
<td>85</td>
</tr>
<tr>
<td>三毛</td>
<td>80</td>
<td>89</td>
<td>90</td>
</tr>
</table>
</body>
</html>
在代码中加粗部分的代码标记是设置表格的宽度为500像素，在浏览器中预览可以看到效果如图6.5所示。
可以使用表格的height属性来设置表格的高度。
语法：
<table height="表格的高度" >
说明：
表格高度的值可以是像素值，也可以为百分比。
举例：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>表格的高度</title>
</head>
<body>
<table width="500" height="130" border="1">
<caption>考试成绩表</caption>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>副科</th>
<tr>
<td>张三</td>
<td>95</td>
<td>76</td>
<td>80</td>
</tr>
<tr>
<td>李四</td>
<td>88</td>
<td>90</td>
<td>85</td>
</tr>
<tr>
<td>三毛</td>
<td>80</td>
<td>89</td>
<td>90</td>
</tr>
</table>
</body>
</html>
在代码中加粗部分的代码标记是设置表格的高度，在浏览器中预览可以看到将表格的高度设置为130像素的效果，如图6.6所示。
可以使用表格的align属性来设置表格的对齐方式。
语法：
<table align="对齐方式" >
说明：
align参数的取值见表6-1所示。
举例：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>表格的对齐</title>
</head>
<body>
<table width="500" height="130" align="center" border="1" >
<caption>考试成绩表</caption>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>副科</th>
<tr>
<td>张三</td>
<td>95</td>
<td>76</td>
<td>80</td>
</tr>
<tr>
<td>李四</td>
<td>88</td>
<td>90</td>
<td>85</td>
</tr>
<tr>
<td>三毛</td>
<td>80</td>
<td>89</td>
<td>90</td>
</tr>
</table>
</body>
</html>
在代码中加粗部分的标记为设置表格的对齐方式，在浏览器中预览可以看到表格为居中对齐，如图6.7所示。
提示
虽然整个表格在浏览器页面范围内居中对齐，但是表格里单元格的对齐方式并不会因此而改变。如果要改变单元格的对齐方式，就需要在行、列或单元格内另行定义。
表格的基本属性在网页制作的过程中应用是非常广泛的，如图 6.8 所示为使用表格的基本属性布局的网页。
表格的边框可以很粗、也可以很细，可以使用border属性来设置表格的边框效果，包括边框的宽度、边框的颜色等。
默认情况下如果不指定border属性，则浏览器将不显示表格边框。
语法：
<table border="边框宽度">
说明：
只有设置border值不为0，在网页中才能显示出表格的边框。
举例：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>表格的边框</title>
</head>
<body>
<table width="200" border="5">
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>
</body>
</html>
在代码中加粗部分的标记为设置表格的边框宽度，在浏览器中预览，可以看到将表格边框宽度设置为5像素的效果，如图6.9所示。
提示
border 属性设置的表格边框只能影响表格四周的边框宽度，而并不能影响单元格之间边框尺寸。虽然设置边框宽度没有限制，但是一般边框设置不应超过 5 像素，过于宽大的边框会影响表格的整体美观。
默认情况下边框的颜色是灰色的，可以使用bordercolor设置边框颜色。但是设置边框颜色的前提是边框的宽度不能为0，否则无法显示出边框的颜色。
语法：
<table border="边框宽度" bordercolor="边框颜色">
说明：
边框的宽度不能为0，边框颜色为16进制的颜色值。
举例：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>表格的边框颜色</title>
</head>
<body>
<table width="200" border="5" bordercolor="#66CCFF">
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>
</body>
</html>
在代码中加粗部分的代码标记是设置表格边框的颜色，在浏览器中预览可以看到边框颜色的效果，如图6.10所示。
表格的内框宽度属性cellspacing用于设置表格内部每个单元格之间的间距。
语法：
<table cellspacing="内框宽度值">
说明：
内框宽度的单位是像素。
举例：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>表格的内框宽度</title>
</head>
<body>
<table width="200" border="1" cellspacing="5" bordercolor="#66CCFF">
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>
</body>
</html>
在代码中加粗部分的代码标记为设置表格的内框宽度，在浏览器中预览，可以看到内框宽度设置为5像素的效果，如图6.11所示。
在默认情况下，单元格里的内容会紧贴着表格的边框，这样看上去非常拥挤。可以使用cellpadding来设置单元格边框与单元格里的内容之间的距离。
语法：
<table cellpadding="文字与边框距离值">
说明：
单元格里的内容与边框的距离以像素为单位，一般可以根据需要设置，但是不能过大。
举例：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>表格内文字与边框距离</title>
</head>
<body>
<table width="200" border="1" cellpadding="10" cellspacing="5"
bordercolor="#66CCFF">
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>
</body>
</html>
在代码中加粗部分的代码标记为设置表格内文字与边框的距离，在浏览器中预览可以看到文字与边框的距离效果，如图6.12所示。在制作网页的同时对表格的边框进行相应的设置，可以很容易地制作出一些细线的表格，如图6.13所示的细线表格。
还可以为表格设置不同的背景来美化表格，包括表格的背景颜色和背景图像的设置。
表格的背景颜色属性bgcolor是针对整个表格的，bgcolor定义的颜色可以被行、列或单元格定义的背景颜色所覆盖。
语法：
<table bgcolor="背景颜色">
举例：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>表格背景颜色</title>
</head>
<body>
<table width="400" border="1" cellpadding="10" cellspacing="5"
bordercolor="#66CCFF" bgcolor="#FFCCFF">
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>
</body>
</html>
在代码中加粗部分的代码标记为设置表格的背景颜色，在浏览器中预览可以看到表格设置了水红色的背景，如图6.14所示。
除了可以为表格设置背景颜色之外，还可以为表格设置更加美观的背景图像。
语法：
<table background="背景图像地址" >
说明：
背景图像的地址可以为相对地址，也可以为绝对地址。
举例：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>表格背景图像</title>
</head>
<body>
<table width="500" height="140" border="1" cellpadding="10" cellspacing="5"
bordercolor="#66CCFF" background="images/2.jpg">
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>
</body>
</html>
在代码中加粗部分的代码标记为设置表格的背景图像，在浏览器中预览可以看到表格设置了背景图像的效果，如图6.15所示。
不仅可以对表格整体设置相关属性，还可以对单独的一行单元格设置相关属性。下面就介绍行的高度、行的边框颜色、行的背景和行里内容的对齐方式设置等。
使用height可以设置行的高度。
语法：
<tr height="行的高度">
举例：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>高度的控制</title>
</head>
<body>
<table width="500" border="1" align="center" cellpadding="10" cellspacing="2">
<tr height="60">
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>
</body>
</html>
在代码中加粗部分的代码标记为设置表格行的高度，在浏览器中预览，可以看到第1行设置了60像素的高度，如图6.16所示。
可以使用bordercolor属性设置行的边框颜色。
语法：
<tr bordercolor="边框的颜色" >
举例：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>高度的控制</title>
</head>
<body>
<table width="500" border="1" align="center" cellpadding="10" cellspacing="2">
<tr bordercolor="#FF0000" height="60">
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>
</body>
</html>
在代码中加粗部分的代码标记为设置表格行的边框颜色，在浏览器中预览可以看到行设置了红色的边框效果，如图6.17所示。
行的 bgcolor 或 background 属性仅作用于当前行。这里设置的 bgcolor 颜色可以覆盖<table>的bgcolor或background属性，不过会被单元格定义的背景颜色所覆盖。
语法：
<tr bgcolor="行的背景颜色" >
说明：
默认设置为透明色，即和文档背景颜色相同。bgcolor颜色值可以为颜色名或16进制等命名方法。background可以选择图像的相对地址，也可以选择绝对地址。
举例：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>行背景</title>
</head>
<body>
<table width="500" border="1" align="center" cellpadding="10" cellspacing="2">
<tr bgcolor="#99CCFF" height="60">
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>
</body>
</html>
在代码中加粗部分的代码标记为设置表格行的背景，在浏览器中预览可以看到第1行设置了行的背景颜色，如图6.18所示。
有的网页中包含了大量的单元格，因此很容易让人眼花缭乱。在网页中适当地使用一些背景颜色，可以让表格变得清晰，如图6.19所示。
<tr>的align属性用来控制表格当前行的水平对齐方式。它不受表格整体对齐方式的影响，却能够被单元格的对齐方式定义所覆盖。
语法：
<tr align="水平对齐方式">
举例：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>行水平对齐方式</title>
</head>
<body>
<table width="400"
border=1 align="center" cellpadding="10" >
<tbody>
<tr align="left">
<td>全自动麻将桌(机)安全技术要求已正式发布</td>
</tr>
<tr align="center">
<td>麻将机首次列入家电行业</td>
</tr>
<tr align="right">
<td>使用自动麻将机的注意事项</td>
</tr>
</tbody>
</table>
</body>
</html>
在代码中加粗部分的代码标记为设置表格行文字的对齐方式，在浏览器中预览，可以看到第1行文字左对齐、第2行文字水平居中对齐、第3行文字右对齐的效果，如图6.20所示。
<tr>的valign属性用来控制表格当前行的垂直对齐方式。垂直对齐方式有3种，分别是top、middle和bottom。
语法：
<tr valign="垂直对齐方式">
举例：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>行垂直对齐方式</title>
</head>
<body>
<table width="400"
border=1 align="center" cellpadding="10" >
<tbody>
<tr valign="top">
<td>全自动麻将桌(机)安全技术要求已正式发布</td>
</tr>
<tr valign="middle">
<td>麻将机首次列入家电行业</td>
</tr>
<tr valign="bottom">
<td>使用自动麻将机的注意事项</td>
</tr>
</tbody>
</table>
</body>
</html>
在代码中加粗部分的代码标记为设置表格行文字的对齐方式，在浏览器中预览，可以看到第1行文字顶端对齐，第2行文字居中对齐，第3行文字底部对齐，如图6.21所示。
单元格是表格中最基本的单位。<td>单元格全部包含在行<tr>中，一个行里面可以有任意多个单元格。可以自定义设置单元格的各项属性，这些样式将覆盖<table>和<tr>已经定义的样式。
默认情况下，单元格的宽度和高度会根据内容自动调整，也可以通过width、height设置单元格的宽度和高度。
语法：
<td width="单元格宽度" height="单元格高度" >
说明：
单元格高度和宽度的单位是像素。
举例：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>单元格大小</title>
</head>
<body>
<table width="500" border="0" align="center" cellpadding="0" cellspacing="1"
bgcolor="#CC99CC">
<tbody>
<tr>
<td width="150" height="30" bgcolor="#ffffff">产品</td>
<td bgcolor="#ffffff">价格</td>
<td bgcolor="#ffffff">点击率</td>
<td bgcolor="#ffffff">次数</td>
</tr>
<tr>
<td height="20" bgcolor="#ffffff" >TOXIC
TIDE </td>
<td bgcolor="#ffffff">￥860元</td>
<td bgcolor="#ffffff" >点击率：</td>
<td bgcolor="#ffffff">620次</td>
</tr>
<tr>
<td bgcolor="#ffffff" >飞过
Flutter</td>
<td bgcolor="#ffffff" >￥375元</td>
<td bgcolor="#ffffff" >点击率：</td>
<td bgcolor="#ffffff" >631次</td>
</tr>
<tr>
<td height="40" bgcolor="#ffffff" >伊比利亚小</td>
<td bgcolor="#ffffff" >￥1200元</td>
<td bgcolor="#ffffff" >点击率：</td>
<td bgcolor="#ffffff" >443次</td>
</tr>
<tr>
<td height="20" bgcolor="#ffffff" >斯沃琪</td>
<td bgcolor="#ffffff">￥580元</td>
<td bgcolor="#ffffff" >点击率：</td>
<td bgcolor="#ffffff" >491次</td>
</tr>
<tr>
<td height="20" bgcolor="#ffffff" > 手表</td>
<td bgcolor="#ffffff">￥380元</td>
<td bgcolor="#ffffff" >点击率：</td>
<td bgcolor="#ffffff" >672次</td>
</tr>
</tbody>
</table>
</body>
</html>
在代码中加粗部分的代码标记为设置单元格的大小，在浏览器中预览可以看到效果，如图6.22所示。
<tr>
在设计表格时，有时需要将两个或更多的相邻单元格组合成一个单元格。
语法：
<td colspan="跨度的列数">
举例：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>水平跨度</title>
</head>
<body>
<table width="500" border="1" align="center" cellpadding="5" cellspacing="1">
<tr>
<td colspan="2" align="center">2005秋冬系列的四大类别</td>
</tr>
<td> 童趣</td>
<td>罗曼蒂克</td>
</tr>
<tr>
<td>爱的故事</td>
<td>大都会之夜</td>
</tr>
</table>
</body>
</html>
在代码中加粗部分的代码标记为设置水平跨度，在浏览器中预览可以看到第1行单元格跨了2列，如图6.23所示。
在很多情况下一张表格并不是永远严格按照行列坐标显示为栅格，设计者可能会合并其中部分相邻单元格，以显示更为灵活的表格形式，如图6.24所示。
单元格除了可以在水平方向上跨列，还可在垂直方向上跨行。
语法：
<td rowspan="跨度的行数">
说明：
与水平跨度相对应，rowspan设置的是单元格在垂直方向上跨行的个数。
举例：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>垂直跨度</title>
</head>
<body>
<table width="500" border="1" align="center" cellpadding="5" cellspacing="1">
<tr>
<td>商品名称：</td>
<td>彩晶石银手链</td>
</tr>
<tr>
<td>规格：</td>
<td>材质：925纯银天然紫晶黄晶橄榄石</td>
</tr>
<tr>
<td>单位：</td>
<td>每条</td>
</tr>
<tr>
<td rowspan="2">类别：</td>
<td>925银饰</td>
</tr>
<tr>
<td>银链手镯</td>
</tr>
</table>
</body>
</html>
在代码中加粗部分的代码标记为设置垂直跨度，在浏览器中预览可以看到第1列第4个单元格跨了2行单元格，如图6.25所示。
提示
行或列跨越在内容不能完全放于一个单元格内时非常有用。通过跨越许多单元格，不需要改变表格就能将更多的文字放入单元格。
单元格的对齐方式设置与行的对齐方式设置方法相似。
语法：
<td align="水平对齐方式" valign="垂直对齐方式">
说明：
在该语法中，水平对齐方式的取值可以是left、center或right，垂直对齐方式的取值可以是top、middle或bottom。
举例：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>对齐方式</title>
</head>
<body>
<table width="500" border="1" align="center" cellpadding="5" cellspacing="1">
<tr>
<td align="left">商品名称：</td>
<td align="center">彩晶石银手链</td>
</tr>
<tr>
<td align="left">规格：</td>
<td align="left">材质：925纯银天然紫晶黄晶橄榄石</td>
</tr>
<tr>
<td>单位：</td>
<td align="center">每条</td>
</tr>
<tr>
<td rowspan="2" align="right" valign="bottom">类别：</td>
<td align="center" valign="middle">925银饰</td>
</tr>
<tr>
<td align="center" valign="top">银链手镯</td>
</tr>
</table>
</body>
</html>
在代码中加粗部分的代码标记为设置单元格的对齐方式，在浏览器中预览效果可以看到不同的对齐方式，如图6.26所示。
为了增加表格的美观性，可以为单元格设置不同的背景颜色。
语法：
<td bgcolor="背景颜色">
说明：
<td>标记中的背景颜色是针对单元格来说的，该属性用来指定单元格的背景颜色。
举例：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>背景颜色</title>
</head>
<body>
<table width="500" border="1" align="center" cellpadding="5" cellspacing="1">
<tr>
<td align="left" bgcolor="#996600">商品名称：</td>
<td align="center" bgcolor="#D6A9CF">彩晶石银手链</td>
</tr>
<tr>
<td align="left" bgcolor="#CC6600">规格：</td>
<td align="left" bgcolor="#FFFFFF">材质：925纯银天然紫晶黄晶橄榄石</td>
</tr>
<tr>
<td bgcolor="#FFCC33">单位：</td>
<td align="center" bgcolor="#FF0066">每条</td>
</tr>
<tr>
<td rowspan="2" align="right" valign="bottom" bgcolor="#990066">类别：</td>
<td align="center" valign="middle" bgcolor="#0099CC">925银饰</td>
</tr>
<tr>
<td align="center" valign="top" bgcolor="#CCCCFF">银链手镯</td>
</tr>
</table>
</body>
</html>
在代码中加粗部分的代码标记为设置不同单元格的背景颜色，在浏览器中预览可以看到不同的单元格背景颜色，如图6.27所示。
单元格的边框颜色可以通过bordercolor来设置。
语法：
<td bordercolor="边框颜色">
说明：
在该语法中颜色设置为16进制的数值。
举例：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>单元格的边框颜色</title>
</head>
<body>
<table width="406" border="1" align="center" cellpadding="5" cellspacing="5">
<tr>
<td width="83" bordercolor="#CC33FF">白羊座</td>
<td width="83">金牛座</td>
<td width="83">双子座</td>
<td width="92">巨蟹座</td>
</tr>
<tr>
<td>狮子座</td>
<td bordercolor="#FF9966">处女座</td>
<td bordercolor="#0000CC">天秤座</td>
<td>天蝎座</td>
</tr>
<tr>
<td>射手座</td>
<td>魔羯座</td>
<td>水瓶座</td>
<td bordercolor="#FF0000">双鱼座</td>
</tr>
</table>
</body>
</html>
在代码中加粗部分的代码标记为设置单元格的边框颜色，在浏览器中预览可以看到不同的单元格设置了不同的边框颜色，如图6.28所示。
单元格的亮边框就是单元格边框向光的部分。通过bordercolorlight可以设置单元格亮边框的颜色。
语法：
<td bordercolorlight="亮边框的颜色" >
说明：
在该语法中颜色设置为16进制的数值。
举例：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>单元格的亮边框颜色</title>
</head>
<body>
<table width="406" border="1" align="center" cellpadding="5" cellspacing="2">
<tr>
<td width="83">白羊座</td>
<td width="83">金牛座</td>
<td width="83">双子座</td>
<td width="92">巨蟹座</td>
</tr>
<tr>
<td bordercolorlight="#CC00FF">狮子座</td>
<td>处女座</td>
<td>天秤座</td>
<td bordercolorlight="#3300FF">天蝎座</td>
</tr>
<tr>
<td>射手座</td>
<td>魔羯座</td>
<td>水瓶座</td>
<td>双鱼座</td>
</tr>
</table>
</body>
</html>
在代码中加粗部分的代码标记为设置单元格的亮边框颜色，在浏览器中预览可以看到亮边框颜色的效果，如图6.29所示。
单元格的暗边框就是单元格边框背光的部分。通过bordercolordark可以设置单元格暗边框的颜色。
语法：
<td bordercolordark ="暗边框的颜色" >
说明：
在该语法中颜色设置为16进制的数值。
举例：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>单元格的暗边框颜色</title>
</head>
<body>
<table width="406" border="1" align="center" cellpadding="5" cellspacing="2">
<tr>
<td width="83" bordercolordark="#FF9900">白羊座</td>
<td width="83">金牛座</td>
<td width="83">双子座</td>
<td width="92" bordercolordark="#9900CC">巨蟹座</td>
</tr>
<tr>
<td>狮子座</td>
<td bordercolordark="#FFFF00">处女座</td>
<td bordercolordark="#00FFFF">天秤座</td>
<td>天蝎座</td>
</tr>
<tr>
<td bordercolordark="#006600">射手座</td>
<td>魔羯座</td>
<td>水瓶座</td>
<td bordercolordark="#0000FF">双鱼座</td>
</tr>
</table>
</body>
</html>
在代码中加粗部分的代码标记为设置单元格的暗边框颜色，在浏览器中预览可以看到暗边框颜色的效果，如图6.30所示。
单元格也可以有背景图像，通过background可以设置单元格的背景图像。
语法：
<td background ="背景图像的地址" >
说明：
背景图像的地址可以是绝对地址，也可以是相对地址。
举例：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>单元格的背景图像</title>
</head>
<body>
<table width="446" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="274" valign="top" background="images/xswl_05.gif"><p>位于太湖之滨的服装有限公司始创于1990年，由于董事长先生艰苦创业，管理有方，公司经受住了市场的考验，并获得了巨大的发展。目前，公司占地一万七千平米，建筑面积二万四千平米，固定资产四千万元，流动资产八千万元，拥有员工一千五百人，所有设备采用日本重机。针织、梭织生产线齐备，年产各类服装四百五十万件（套），销往欧洲、美国、日本、澳大利亚等地。</p>
<p>本公司信誉AAA，经营方式灵活，可从事定牌生产，来料加工，来样定做，面料出口等。</p>
<p>公司宗旨：我们以优良的品质、"AAA"的信誉、迅捷的交期，合理的价格、服务中外客户。</p>
<p>欢迎世界各地朋友洽谈合作事宜。</p></td>
</tr>
</table>
</body>
</html>
在代码中加粗部分的代码标记为设置单元格的背景图像，在浏览器中预览可以看到单元格中的背景图像效果，如图6.31所示。
在Dreamweaver中，表格不但能够记载表单式的资料、规范各种数据、输入列表式的文字，而且利用它还可以排列文字和图像，还可以用于安排网页文档的整体布局，起着非常重要的作用。
如图6.32所示利用表格和单元格排列网页中的数据。
还有一些标记是用来表示表格结构的，包括表首标记<thead>、表主体标记<tbody>以及表尾标记<tfoot>。这些通过成对出现的标记设置，应用到表格里用于整体规划表格的行列属性。使用这些标记能对表格的一行或多行单元格属性进行统一修改，从而省去了逐一修改单元格属性的麻烦。
表首样式的开始标记是<thead>，结束标记是</thead>。它们用于定义表格最上端表首的样式，可以设置背景颜色、文字对齐方式、文字的垂直对齐方式等。
语法：
<thead bgcolor="背景颜色" align="对齐方式">
……
</thead>
说明：
在该语法中，bgcolor、align、valign的取值范围与单元格中的设置方法相同。在<thead>标记内还可以包含<td>、<th>和<tr>标记，而一个表元素中只能有一个<thead>标记。
举例：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>表格的表首</title>
</head>
<body>
<table width="400" border="1" align="center" cellpadding="5" cellspacing="2">
<caption>
某购物网站列表
</caption>
<thead bgcolor="#FF33FF" align="center">
<tr>
<td>产品名称</td>
<td>类型</td>
<td>价格</td>
</tr></thead>
<tr>
<td>手工编织厚围巾</td>
<td>围巾</td>
<td>45.00元</td>
</tr>
<tr>
<td>彩音盒MP3</td>
<td>数码</td>
<td>599元</td>
</tr>
<tr>
<td>彩晶石银手链</td>
<td>银饰</td>
<td>68元</td>
</tr>
<tr>
<td colspan="3" align="right">欢迎光临本购物网站！</td>
</tr>
</table>
</body>
</html>
在代码中加粗部分的代码标记为设置表格的表首，在浏览器中预览效果，如图6.33所示。
与表首样式的标记功能类似，表主体样式用于统一设计表主体部分的样式，标记为<tbody>。
语法：
<tbody bgcolor="背景颜色" align="对齐方式">
……
</tbody>
说明：
在该语法中，bgcolor、align、valign的取值范围与<thead>标记中的相同。一个表元素中只能有一个<tbody>标记。
举例：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>表主体</title>
</head>
<body>
<table width="400" border="1" align="center" cellpadding="5" cellspacing="2">
<caption>
某购物网站列表
</caption>
<thead bgcolor="#FF33FF" align="center">
<tr>
<td>产品名称</td>
<td>类型</td>
<td>价格</td>
</tr>
</thead>
<tbody bgcolor="#CC99FF" align="left">
<tr>
<td>手工编织厚围巾</td>
<td>围巾</td>
<td>45.00元</td>
</tr>
<tr>
<td>彩音盒MP3</td>
<td>数码</td>
<td>599元</td>
</tr>
<tr>
<td>彩晶石银手链</td>
<td>银饰</td>
<td>68元</td>
</tr>
</tbody>
<tr>
<td colspan="3" align="right">欢迎光临本购物网站！</td>
</tr>
</table>
</body>
</html>
在代码中加粗部分的代码标记为设置表格的表主体，在浏览器中预览效果，如图 6.34所示。
<tfoot>标记用于定义表尾样式。
语法：
< tfoot bgcolor="背景颜色" align="对齐方式">
……
</ tfoot >
说明：
在该语法中，bgcolor、align、valign的取值范围与<thead>标记中的相同。一个表元素中只能有一个< tfoot >标记。
举例：
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>表尾</title>
</head>
<body>
<table width="400" border="1" align="center" cellpadding="5" cellspacing="2">
<caption>
某购物网站列表
</caption>
<thead bgcolor="#FF33FF" align="center">
<tr>
<td>产品名称</td>
<td>类型</td>
<td>价格</td>
</tr>
</thead>
<tbody bgcolor="#CC99FF" align="left">
<tr>
<td>手工编织厚围巾</td>
<td>围巾</td>
<td>45.00元</td>
</tr>
<tr>
<td>彩音盒MP3</td>
<td>数码</td>
<td>599元</td>
</tr>
<tr>
<td>彩晶石银手链</td>
<td>银饰</td>
<td>68元</td>
</tr>
</tbody>
<tfoot bgcolor="#FFCCFF" align="right"><tr>
<td colspan="3" align="right">欢迎光临本购物网站！</td>
</tr></tfoot>
</table>
</body>
</html>
在代码中加粗部分的代码标记为设置表格的表尾，在浏览器中预览效果，如图6.35所示。
1．填空题
（1）表格由行、列和单元格 3 部分组成，一般通过 3 个标记来创建，分别是表格标记__________、行标记__________和单元格标记__________。表格的各种属性都要在表格的开始标记<table>和表格的结束标记</table>之间才有效。
（2）表格的边框可以很粗也可以很细，可以使用__________属性来设置表格的边框效果，包括边框的宽度、边框的颜色等。
（3）还有一些标记是用来表示表格结构的，包括表首标记__________、表主体标记__________以及表尾标记__________。这些通过成对出现的标记设置，应用到表格里用于整体规划表格的行列属性。
2．操作题
制作一个如图6.36所示的表格。
图书在版编目（CIP）数据
HTML、CSS、JavaScript网页制作从入门到精通/刘西杰，柳林著.--北京：人民邮电出版社，2013.1
ISBN 978-7-115-29971-0
Ⅰ.①H… Ⅱ.①刘…②柳… Ⅲ.①超文本标记语言—程序设计②网页制作工具—程序设计③JAVA语言—程序设计 Ⅳ.①TP312②TP393.092
中国版本图书馆CIP数据核字（2012）第266611号
内容提要
HTML 是网页制作的基础语言，是每个网页制作者必须掌握的内容。本书系统、全面地介绍了各种 HTML网页制作标记，不仅包括基本的语法、说明和范例演示，还穿插了在Dreamweaver中应用HTML的范例效果，便于读者更好地利用HTML完成网页中各部分的细节制作。
全书共分为18章和4个附录，重点介绍使用HTML进行网页制作的方方面面，同时讲解了目前流行的Web标准与CSS网页布局实例，以及基于JavaScript语言的网页特效制作。为了便于读者学习，附录中汇集了经过作者精心整理的60多例网页制作技巧。
本书语言简洁、内容丰富，适合网页设计与制作人员、网站建设与开发人员、大中专院校相关专业师生、网页制作培训班学员、个人网站爱好者阅读。
HTML、CSS、JavaScript网页制作从入门到精通
◆著 刘西杰 柳林
责任编辑 赵轩
◆人民邮电出版社出版发行 北京市崇文区夕照寺街14号
邮编 100061 电子邮件 315@ptpress.com.cn
网址 http://www.ptpress.com.cn
北京隆昌伟业印刷有限公司印刷
◆开本：787×1092 1/16
印张：29.25 彩插：4
字数：705千字 2013年1月第1版
印数：1-4000册 2013年1月北京第1次印刷
ISBN 978-7-115-29971-0
定价：49.00元
读者服务热线：(010)67132692 印装质量热线：(010)67129223
反盗版热线：(010)67171154
