第2章 留言板网站网页制作
随着Internet的发展，网站的作用越来越重要，网站和传统媒体的不同就在于交互性，留言板是Internet上最常见的一种在线互动服务，也是最典型的交互式网页。留言板是用户之间互通信息、相互交流的平台，通常访问者可以在留言板上发表留言，访问者留言越多，网站内容越丰富，同时也会吸引更多的访问者前来参与活动。留言板作为网站交流互动的中心，对企业与客户交流、企业网络营销、企业网站推广起到至关重要的作用。
留言板网站开发主要分为前台和后台两部分，本项目主要是进行前台开发。前台开发是利用客户端开发技术来完成的，主要职责是通过进行网站VI设计、样式设计、特效设计等来完成网站网页制作。后台开发部分见第5章。
本章通过XHTML语言和客户端脚本等客户端开发技术，完成留言板网站网页制作，为ASP应用程序开发打下良好的项目开发基础。学员的收获将是：
了解HTML基本概况、工作原理
掌握XHTML编写规范
掌握XHTML的基本结构
掌握XHTML常用标记及其属性
掌握网页布局的基本方法
掌握网页的制作过程
能够进行需求分析和合理地编制项目计划书
能够进行项目设计
掌握主要页面的制作方法
提高沟通意识和沟通技能
2.1 项目准备
每个项目阶段通常都规定了一系列工作任务，设定这些工作任务可以使管理控制达到既定的水平。本项目准备阶段的主要工作任务是了解项目背景、进行调研、组织活动（报告会、交流会、项目队伍培训）等，为建立富有思想力和执行力的项目组织和项目启动做准备。
本项目队伍培训主要是让参与项目开发人员掌握XHTML基础知识，重点掌握HTML基础、XHTML代码规范、XHTML常用标记及CSS样式表等知识，为后期的项目开发和制作提供知识积累，为下一步工作做好铺垫。在培训互动过程中，强化项目开发人员的信心。
2.1.1 HTML基础
HTML用来表示 Web文档的规范，它使用标记（Tag）来确定网页显示的格式。静态网页是标准的HTML文件，动态网页经过应用程序服务器的处理后也将生成标准的HTML文件。
1．HTML工作原理
HTML用来表示Web文档的规范，是用于Web文档的格式化语言。HTML标记要显示网页中的各个部分，通知Web浏览器应该如何显示网页，即确定网页内容的格式。浏览器按照顺序阅读 HTML 文件，然后浏览器根据内容附近的 HTML 标记来解释和显示内容，这个过程称为语法分析。例如，如果为某段文字添加了<b>和</b>标记，浏览器将会以粗体字显示这段文字。
2．HTML标记基础
（1）基本的HTML语法。在HTML语言中，所有的标记都必须用尖括号（小于号“<”和大于号“>”）括起来。例如，<font>、<a>、<title>等。大部分标记都是成对出现的，包括开始标记和结束标记。开始标记和结束标记定义了标记所影响的范围，结束标记与开始标记名称相同，但结束标记总是以一个斜线符号（“/”）开头的。例如，<a>和</a>、<font>和</font>等。也有一些标记只要求单一标记符号，如换行标记<br>。
HTML标记不区分大小写，但因为XHTML、XML都要求小写，因此建议采用小写以便于文档的维护。
（2）HTML标记的属性。标记只是规定这是什么信息，是文本、图片，还是表格，但怎样显示或控制这些信息，就需要在标记后面加上相关的属性来表示。每一个标记有一系列的属性，标记通过属性来制作出各种效果。在HTML语言中，所有属性都放置在开始标记的尖括号内。语法格式：
<标记 属性1="属性值" 属性2="属性值"…>文档内容</标记>
3．HTML文档的基本结构
（1）文档标记<html>...</html>：这个标记是全部文档内容的容器，<html>是开始标记，</html>是结束标记，它们分别是网页的第一个和最后一个标记，其他标记代码都位于这两个标记之间。
（2）首部标记<head>...</head>：首部标记<head>...</head>用于提供与Web页有关的各种信息。在首部标记中，可以使用<title>...</title>标记来指定网页的标题，使用<style>和</style>标记来定义CSS样式表，使用<script>和</script>标记来插入脚本等。
（3）正文标记<body>...</body>：正文标记包含了文档的内容，文字、图像、动画、超链接及其他HTML元素均位于该标记中，正文标记的属性如表2.1所示。
表2.1 正文标记常用属性
在表2.1所示的属性中，各个颜色属性值有两种表示方式。
一是使用3组十六进制数值#RRGGBB来表示，RGB颜色由“红”、“绿”、“蓝”3种颜色组成，这3种颜色占据不同的比例可调配出各种颜色。每组数的取值范围是00～FF，字母不区分大小写，如#3A66D1。
二是用名称表示颜色。W3C只定义了16个颜色名称，这些名称各种浏览器都支持。W3C的16种标准颜色如表2.2所示。
表2.2 W3C的16种标准颜色对照表
编程提示：
在CSS中有些颜色可以使用简写。例如，#66FFAA可简写为#6FA，#FFFF00可简写为#FF0等。IE的预命名颜色在IE中可正常显示，在其他浏览器中不一定支持，所以最好使用颜色值。
（4）文档的基本结构，可以表示如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>这是第一个网页</title>
</head>
<body>这是第一个网页</body>
</html>
4．添加注释
在HTML语言中，注释由开始标记“<!--”和结束标记“-->”构成，这两个标记之间的文字被浏览器解释为注释，而不在浏览器窗口中显示。语法格式：
<!-- 注释标记的作用主要就是对某句和某段代码进行注释 -->
2.1.2 XHTML代码规范
使用HTML4.01可以制作出现代的、结构化的、兼容标准的网页，然而为了做到向整洁的、语义化的代码转变，并且为XML等未来的其他标记语言做好准备，建议使用XHTML1.0来制作网页。
XHTML是基于HTML的，它是更严谨、代码更整洁的HTML版本。XHTML融入了许多XML规范，与HTML 4.01标准没有太多的不同，只需要注意以下几个要点，就能很容易地向XHTML迈进。
1．使用DTD声明文档类型
DOCTYPE是Document Type（文档类型）的简写，用来说明本文件用的XHTML或者HTML是什么版本。DTD是一个XML文档，解释了哪些标记、属性或值对于HTML的一个特定类型是有效的。在XHTML中必须使用DTD声明文档的类型，以便浏览器知道文档是什么类型的，并且声明要位于文档的第一行。
以下是XHTML 1.0文档结构：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
</body>
</html>
其中，DTD是文档类型定义，里面包含了文档的规则，浏览器根据定义的DTD来解释页面的标记并展现出来。不指定文档类型或者代码错误，都将导致浏览器按自己的理解去解释HTML文档和CSS。
建立符合标准的网页DOCTYPE声明是必不可少的关键组成部分。XHTML 1.0提供了3种DTD声明可供选择，即Strict、Transitional和Frameset。
（1）XHTML Strict DTD。要求严格的DTD，不能使用任何表现层的标记和属性，通常与层叠样式表（CSS）配合使用。完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
（2）XHTML Transitional DTD。过渡的、要求非常宽松的DTD，它允许继续使用HTML 4.01标记，但是要符合XHTML的写法。完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
（3）XHTML Frameset DTD。专门针对框架页面设计使用的DTD，如果页面中包含有框架，需要采用这种DTD。完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
2．设定一个名字空间（Namespace）
通俗地讲，名字空间就是给文档做一个标记，告诉别人这个文档是属于谁的。名字空间声明允许通过一个URL来识别名字空间，直接在DOCTYPE声明后添加如下代码即可：
<html xmlns="http://www.w3.org/1999/xhtml">
其中，xmlns是XHTML Namespace的缩写，“www.w3.org/1999/xhtml”并不是指一个具体的文件，仅仅是给它一个名字而已。
由于XML允许用户定义自己的标记，用户定义的标记和其他人定义的标记有可能相同，但表示不同的意义，所以当文件交换或者共享的时候就容易产生错误。为了避免这种错误发生，XML采用名字空间声明，允许用户通过一个网址指向来识别其标记。
XHTML是HTML向XML的过渡，因此它需要符合XML文档规则，因此需要定义名字空间。又因为 XHTML 1.0 不能自定义标记，所以它的名字空间都相同，就是http://www.w3.org/1999/xhtml。
3．定义语言编码
为了被浏览器正确解释和通过标记校验，所有的XHTML文档都必须声明它们所使用的编码语言，代码如下：
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
这里声明的编码语言是简体中文GB2312。
4．XHTML元素必须被正确地嵌套
在HTML中，某些元素可以像下面这样彼此不正确地嵌套：
<b><i>this text is bold and italic</b></i>
在XHTML中，所有元素必须彼此正确地嵌套：
<b><i>this text is bold and italic</i></b>
5．XHTML元素必须被关闭
在XHTML中，所有成对的标记必须要保留结束标记，不能只写开始标记。例如：
<p>this is a paragraph
上面的写法中，<p>标记没有关闭，正确的写法应是：
<p>this is a paragraph</p>
在XHTML中，所有单个的标记也必须关闭。例如，<br>应写为<br/>，<img href="t.gif">应写为<img href="t.gif"/>等。有些版本的浏览器不能识别类似<br/>的标记，但在“/>”前加个空格就能识别了，所以应写为<br />。
6．标记名和属性名必须用小写
<P ALIGN="CENTER">This is a paragraph</P>
上面的写法中，标记名P、属性名ALIGN都应该改成小写，即
<p align="center">this is a paragraph</p>
7．属性值必须加引号
<img href="t.gif" width="80" onclick="setImg('t.gif')" />
上面的写法中，各属性值的引号不能省略。如果属性值内部需要引号，可以改为单引号进行分界；也可以外面用单引号，内部用双引号。
8．属性不能简写
在 HTML 中，有些属性只有单一固定的值，这时可以只写属性名，不写属性值，但在XHTML中应该完整书写。例如：
<input type="radio" checked>
checked是一个简写的属性，在XHTML中应该改为：
<input type="radio" checked="checked" />
与此类似的属性还有readonly、noresize、selected、disable等。
9．用id属性代替name属性
在HTML中为<a>、<frame>、<iframe>、<img>和<map>定义了一个name属性，在XHTML中除了表单<form>和链接<a>外，name属性不能使用，应该用id来替换。例如：
<input type="text" id="username" size="25">
2.1.3 设置文本格式
文本是XHTML网页中重要的内容之一。编写XHTML文档时，可以将文本设置在正文标记<body>和</body>之间，并通过其他标记来设置文本的格式。
1．分段与换行
段落是文档的基本信息单位。将文档划分为段落，可以通过使用分段标记、换行标记、标题标记或插入水平线来实现。常用的分段与换行标记如表2.3所示。
表2.3 常用的分段与换行标记
水平线标记<hr>可以用align、width、size、color等属性来设置水平线的对齐方式、宽度、大小、颜色。<hr>标记属性如表2.4所示。
表2.4 <hr>标记属性
应用示例1：使用align属性来控制段落对齐方式。
代码清单code2_1.html：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>宋词</title>
</head>
<body>
<h2 align="center">水调歌头</h2>
<hr align="center" width="300" size="1" color="#ff0000" />
<div align="center">
<p>明月几时有，把酒问青天。</p>
<p>不知天上宫阙，今昔是何年？</p>
<p>我欲乘风归去，又恐琼楼玉宇，</p>
<p>高处不胜寒。</p>
</div>
</body>
</html>
运行效果如图2.1所示。
图2.1 使用align属性控制段落
2．字体标记
在XHTML中，可以使用字体标记<font>来设置文本的字符格式，通过其属性设定文本的字体、字号和颜色。<font>标记的基本属性如表2.5所示。
表2.5 <font>标记的基本属性
如果用basefont指定了基准字体，就可以在size属性中使用-6～+6的数值，它表示在基准字体的基础上减小或增大的数值。
编程提示：
<font>标记指定的文字大小与浏览器的设置有关，当更改浏览器的文字大小时，显示效果会随之变化。
应用示例2：设置文本的字体、颜色和大小。
代码清单code2_2.html：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>字体标记的应用</title>
</head>
<body>
<font size="5" color="#ff9900" face="黑体">水调歌头</font>
<p><font color="#00ff00">明月几时有，把酒问青天。</font></p>
<p><font color="#ff9900">不知天上宫阙，今昔是何年？</font></p>
<p><font size="+1">我欲乘风归去，又恐琼楼玉宇，</font></p>
<p><font color="blue">高处不胜寒。</font></p>
</body>
</html>
运行效果如图2.2所示。
图2.2 设置文本的字体、颜色和大小
3．设置字符样式
通过设置字符样式可以为某些字符设置特殊格式，如粗体、斜体、下画线、删除线等。常用的设置字符样式的标记如表2.6所示。
表2.6 常用的设置字符样式的标记
4．特殊字符
制作网页时，经常插入一些空格，这本来是一个十分简单的问题，但在XHTML网页中却变得比较麻烦。在输入文本时要按多次空格键，但在浏览时却只能看到一个空格。另外，在网页中有时可能要插入一些特殊符号，如版权符号©和注册符号®等。
当遇到这种情况时可以使用两种方式来输入特殊符号，即使用字符实体名或称实体编码表示方式。例如，若要在网页中输入一个空格，可以输入“ ”或“ ”，常用特殊符号的实体名称或实体编码如表2.7所示。
表2.7 常用特殊符号的实体名称或实体编码
2.1.4 使用列表
在XHTML网页设计中，经常使用列表来设置文本格式，主要包括无序列表和有序列表两种表格式。
1．无序列表
无序列表是一种在各列表前面显示特殊项目符号的缩排列表，可以使用无序列表标记<ul>和列表项标记<li>来创建。无序列表创建及效果如表2.8所示。
表2.8 无序列表创建效果
2．有序列表
有序列表是在各列表前面显示数字或字母的缩排列表，可以使用有序列表标记<ol>和列表项标记<li>来创建。有序列表创建及效果如表2.9所示。
表2.9 有序列表创建及效果
应用示例3：列表的应用。
代码清单code2_3.html：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>列表应用</title>
</head>
<body>
<h2 align="left">歌手TOP10</h2>
<ul type="square">
<li>S.H.E </li>
<li>周杰伦</li>
<li>凤凰传奇</li>
<li>王菲</li>
<li>郑源</li>
<li>刘德华</li>
<li>林俊杰</li>
<li>张学友</li>
<li>许嵩</li>
<li>梁静茹</li>
</ul>
</body>
</html>
运行效果如图2.3所示。
图2.3 列表的应用
2.1.5 使用图像
1．图片格式
为了制作出图文并茂的网页，往往要在网页中插入图像，网页上常用的图像格式包括JPEG（联合图形专家组）、GIF（图像交换格式）和PNG（可移植网络图形）等。加入网页中的图片通常使用GIF和JPEG这两种格式。GIF格式图片的优点在于可以制作透明、隔行和动画效果。而 JPEG 格式图片的优点在于拥有计算机所能提供的最多种颜色，适合存放高质量的彩色图片。
2．插入图片
使用<img>标记可以把一幅图片加入到网页中，还可以设置图片的尺寸、边框、对齐方式、替代文本等属性，如表2.10所示。语法格式：
<img src="url" align="字符串" alt="字符串" … />
表2.10 <img>标记属性
3．图片的布局
图片的布局就是图片与文本的排放关系。要实现这种功能，可以使用<img>标记的 align属性。align属性值如表2.11所示。
表2.11 align属性值
应用示例4：在网页中实现图文混排。
代码清单code2_4.html：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图文混排</title>
</head>
<body>
<h1 align="center">莎士比亚名言</h1>
<hr width="90%" size="1" color="#ff9900"/>
<img src="images/ssby.jpg" alt="莎士比亚" width="140" height="136" hspace="10" border="1"align="right" /> 莎士比亚说：“上天生下我们，是要把我们当成火炬，不是照亮自己，而是照亮别人。”我们每个人都只是苍穹中的一颗小星，都只是深夜中的一把火炬，我们心中所想的应该是别人，装着的应该是别人。只有这样，天空才会更加明亮，深夜才会充满光明与温暖。
</body>
</html>
运行效果如图2.4所示。
图2.4 在网页中实现图文混排
4．设置背景图片
使用<body>标记的background属性，可为网页铺上背景图片。语法格式：
<body background="图片文件名">
2.1.6 使用表格
表格由不同的行和列的单元格组成，经常用于组织和显示信息，也用于页面布局，因此表格在网页设计中具有举足轻重的作用，下面介绍如何使用XHTML语言来创建表格、设置表格格式。
1．创建基本表格
一个表格由表头、行和单元格所组成，这些元素分别用不同的标记来定义。表格通过<table>标记来定义；表格中的每一行通过<tr>标记来表示；行中的单元格通过<td>或<th>标记来定义；表格的标题通过<caption>标记来定义。
若要创建一个表格，可以使用如下XHTML代码：
<table width="400" border="0" cellspacing="0" cellpadding="0">
<caption>表格标题文字</caption>
<tr>
<td>第1行第1列数据</td>
<td>第1行第2列数据</td>
<td>第1行第3列数据</td>
</tr>
<tr>
<td>第2行第1列数据</td>
<td>第2行第2列数据</td>
<td>第2行第3列数据</td>
</tr>
<tr>
<td>第3行第1列数据</td>
<td>第3行第2列数据</td>
<td>第3行第3列数据</td>
</tr>
</table>
2．设置表格属性
创建表格时，可以通过<table>标记的属性来对表格的格式进行设置。<table>标记的基本属性如表2.12所示。
表2.12 <table>标记的基本属性
应用示例5：创建一个表格，宽度为400，高度为100，并将其水平对齐方式设置为居中，边框宽度为1，边框颜色为#0000FF，单元格之间的间距为2，单元格内数据与边框间距为0，只显示行与行间的分界线。
代码清单code2_5.html：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>设置表格属性</title>
</head>
<body>
<table width="400" height="100" border="1" align="center" cellpadding="0" cellspacing="2"bordercolor="#0000FF" rules="rows">
<caption>设置表格的属性</caption>
<tr>
<td>第1行第1列数据</td>
<td>第1行第2列数据</td>
<td>第1行第3列数据</td>
</tr>
<tr>
<td>第2行第1列数据</td>
<td>第2行第2列数据</td>
<td>第2行第3列数据</td>
</tr>
<tr>
<td>第3行第1列数据</td>
<td>第3行第2列数据</td>
<td>第3行第3列数据</td>
</tr>
</table>
</body>
</html>
运行效果如图2.5所示。
图2.5 表格应用示例
3．设置行的属性
表格中的每一行是用<tr>标记来定义的，可以通过该标记的下列属性对指定行的格式进行设置，如表2.13所示。
表2.13 <tr>标记属性
应用示例6：接上例，设置第1行数据水平居中对齐，第2行数据背景颜色为#99CC00。
代码清单code2_6.html：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>设置行属性</title>
</head>
<body>
<table width="400" height="100" border="1" align="center" cellpadding="0" cellspacing="2"bordercolor="#0000FF" rules="rows">
<caption>设置行的属性</caption>
<tr align="center">
<td>第1行第1列数据</td>
<td>第1行第2列数据</td>
<td>第1行第3列数据</td>
</tr>
<tr bgcolor="#99CC00">
<td>第2行第1列数据</td>
<td>第2行第2列数据</td>
<td>第2行第3列数据</td>
</tr>
<tr>
<td>第3行第1列数据</td>
<td>第3行第2列数据</td>
<td>第3行第3列数据</td>
</tr>
</table>
</body>
</html>
运行效果如图2.6所示。
图2.6 行属性应用示例
4．设置单元格的属性
表格中的每一格是用<td>标记来定义的，可以通过该标记的属性对指定单元格的格式进行设置，如表2.14所示。
表2.14 <td>标记的属性
当设置某一行单元格的高度时，只要设置第1个单元格的高度height即可。同样，设置某一列的宽度，只要设置第一列第1个单元格即可。
应用示例7：接上例，设置第3行第3列单元格数据水平居中对齐，垂直居中，第3行第2列单元格背景颜色为#CC6600。
代码清单code2_7.html：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>设置单元格的属性</title>
</head>
<body>
<table width="400" height="100" border="1" align="center" cellpadding="0" cellspacing="2"bordercolor="#0000FF" rules="rows">
<caption>设置表格的属性</caption>
<tr align="center">
<td>第1行第1列数据</td>
<td>第1行第2列数据</td>
<td>第1行第3列数据</td>
</tr>
<tr bgcolor="#99CC00">
<td>第2行第1列数据</td>
<td>第2行第2列数据</td>
<td>第2行第3列数据</td>
</tr>
<tr>
<td>第3行第1列数据</td>
<td bgcolor="#CC6600">第3行第2列数据</td>
<td align="center" valign="middle">第3行第3列数据</td>
</tr>
</table>
</body>
</html>
运行效果如图2.7所示。
图2.7 单元格属性应用示例
2.1.7 使用框架
使用框架可以将浏览器窗口划分成若干个子窗口，在每个子窗口中都可以显示一个网页，从而可以获得在同一个浏览器窗口中同时显示不同网页的效果。
1．框架网页的基本结构
把每一个窗口称为框架，框架网页通过一个或多个<frameset>和<frame>标记来定义。所有框架标记需要放在一个起始的XHTML文件中（<frameset>标记取代了<body>位置），这个文件只是用来声明框架的定义，记录框架如何划分，以及框架的各种属性，不会显示任何资料。框架定义的基本结构：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>框架的基本结构</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<frameset rows="*,*">
<frame src="url">
<frame src="url">
...
</frameset>
<noframes>
...
</noframes>
</html>
2．设置框架集的属性
利用<frameset>标记可以把浏览器窗口划分为多个子窗口（框架）。每个框架可放置独立的文档。在一般的应用中，<frameset>标记仅规定在框架集中存在多少列或多少行，再由<frame>标记规定每个框架中包含的文档。
用<frameset>定义的框架集网页使用的 DTD 类型必须是“Frameset DTD”。在 frameset框架集网页中不能包含<body>...</body>标记。不过，如果需要为不支持框架的浏览器添加一个<noframes>标记，则必须在<noframes>标记中放置<body>...</body>标记。<frameset>标记的基本属性如表2.15所示。
表2.15 <frameset>标记的基本属性
（1）水平分割窗口。cols 属性用于水平分割窗口，cols 属性的值是一个用逗号分开的值列表，每个值表示一个框架的宽度，而值的个数代表了分割的框架数量。示例代码如下：
<frameset cols="200,280,*">
<frame src="url" />
<frame src="url" />
<frame src="url" />
</frameset>
把窗口分割为三列，第一列宽度为200px，第二列宽为280px，其余为第三列。其中*表示其余部分，如图2.8所示。
图2.8 水平分割窗口
（2）垂直分割窗口。rows属性用于垂直分割窗口，rows属性的值是一个用逗号分开的值列表，每个值表示一个框架的高度，而值的个数代表了分割的框架数量。示例代码如下：
<frameset rows="300,*">
<frame src="url" />
<frame src="url" />
</frameset>
把窗口分割为两行，第一行高度为300px，其余为第二行，如图2.9所示。
<frameset rows="70,200,100">
<frame src="url" />
<frame src="url" />
<frame src="url" />
</frameset>
图2.9 垂直分割窗口
把窗口分割为三行，第一行高度为70px，第二行高度为80px，其余为第三行。虽然指定了第三行的高度，但实际上，如果剩余的高度不是恰好为 100px，浏览器会自动把剩余部分都分配给第三行。
编程提示：
一个<frameset>只能定义一种分割，不能同时分割行和列。如果需要多重分割，必须使用嵌套的<frameset>。
（3）框架的嵌套。框架的嵌套，外层的<frameset>把窗口分割为两个水平的框架，内层的<frameset>把第二个框架又分割为两个垂直的框架。示例代码如下，效果如图2.10所示。
<frameset rows="100,*">
<frame src="url" />
<frameset cols="200,*">
<frame src="url" />
<frame src="url" />
</frameset>
</frameset>
图2.10 框架的嵌套
<noframes>标记可为那些不支持框架的浏览器提供显示文本，语法格式：
<noframes>
<body>
…
</body>
</noframes>
<noframes>标记只能用在框架集网页中，当用户的浏览器不支持框架时，用<noframes>标记定义的文本才被显示出来。<noframes>标记中必须包含<body>标记。
3．设置框架的属性
使用<frame>标记可以设置框架的属性，包括框架的名称、框架是否可以滚动，以及显示框架文件等。<frame>标记属性如表2.16所示。
表2.16 <frame>标记属性
应用示例8：创建一个框架网页并在各个框架中分别显示一个网页，如图2.11所示。
图2.11 框架应用示例
（1）框架集页面。代码清单code2_8.html：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>在框架中显示网页</title>
</head>
<frameset rows="100,*" frameborder="no" border="0">
<frame src="frame_top.html" id="topFrame" scrolling="NO" noresize="noresize" />
<frameset cols="200,*" framespacing="0" frameborder="no">
<frame src="frame_left.html" name="left" scrolling="no" noresize="noresize" />
<frame src="frame_info.html" name="mainframe" />
</frameset>
</frameset>
<noframes>
<body>
<p>请升级你的浏览器版本！！！</p>
</body>
</noframes>
</html>
（2）上方框架网页。代码清单frame_top.html：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>标题网页</title>
</head>
<body bgcolor="#ff9900">这里是标题网页</body>
</html>
（3）左侧框架网页。代码清单frame_left.html：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>目录网页</title>
</head>
<body bgcolor="#99CC33">这里是目录网页</body>
</html>
（4）右侧框架网页。代码清单frame_info.html：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>正文网页</title>
</head>
<body>这里是正文网页！</body>
</html>
4．内联框架
框架集取代了传统文档的<body>，并且通过它包含的框架为用户提供内容。XHTML 标准允许定义存在一个传统文档中的框架，显示成为这个文档的一部分。用<iframe>标记可以定义一个内联框架，该标记不是应用在<frameset>标记内的，相反它可以出现在文档中任何地方。<iframe>标记在文档中定义一个矩形的区域，在这个区域中，浏览器会显示一个单独的文档，包括滚动条和边框，从而达到“页中页”的效果。<iframe>标记使用语法格式：
<iframe src="url" width="x" height="x" scrolling="x" frameborder="x" name="x"></iframe>
内联框架<iframe>标记属性如表2.17所示。
表2.17 <iframe>标记属性
应用示例9：创建一个表格网页，在指定单元格内显示另一个网页，如图2.12所示。
图2.12 内联框架的应用示例
（1）内联框架的表格网页。代码清单code2_9.html：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>内联框架</title>
</head>
<body>
<table width="500" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="200" height="100" bgcolor="#999933" align="center">数据</td>
<td align="center">数据</td>
</tr>
<tr>
<td height="140"><iframe src="iframe.html" align="middle" frameborder="0" scrolling="yes"width="200" height="100%"></iframe></td>
<td bgcolor="#0099CC" align="center">数据</td>
</tr>
</table>
</body>
</html>
（2）内联框架页。代码清单iframe.html：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>内联框架页</title>
</head>
<body>这是内联框架页</body>
</html>
2.1.8 使用超链接
超链接是网页的重要组成部分。正是由于有了超链接，才组成了庞大的因特网，人们才能感受到网上冲浪的乐趣。
1．理解超链接
在网页中，超链接通常以文本或图像的形式出现。用鼠标指针指向网页中的超链接时，鼠标指针会变成手指状；单击超链接时，浏览器就会按照超链接指示的目标载入另一个网页，或者跳转到同一网页或其他网页中的其他位置。
超链接是由源端点（热点）到目标端点的一种跳转。源端点可以是一段文本或一幅图像等。目标端点可以是任意类型的网络资源，如一个网页、一幅图片、一首歌曲、一个动画或一段程序。
按照目标端点的不同，可以将超链接分为文件链接、锚点链接（书签）、E-mail链接。
① 文件链接：这种链接的目标端点是网页中的一个文件，它可以位于当前网页所在的服务器，也可以位于其他服务器。
② 锚点链接：类似于书签的功能，这种链接的目标端点是网页中的一个位置，通过这种链接可以从当前网页跳转到本页面或其他页面指定位置（锚点）。
③ E-mail链接：通过这种链接可以启动电子邮件客户端程序（如Outlook或Foxmail等），并允许访问者向指定的地址发送邮件。
2．理解路径
路径是指从站点根文件夹或当前文件夹到目标文件夹所经过的路线，可以使用路径来指定超链接中目标端点的位置。
绝对路径：给出目标文件的完整URL地址，如果要链接的目标文件位于其他服务器上，则必须使用绝对路径。例如，协议://域名/文件夹/目标文件。
相对路径：以当前文档为起点到目标文件所经过的路径，一般用于当前文档与目标文件处在同一站点情况下。源文件与目标文件处在同一文件夹内，直接链接目标文件即可；若要与同一文件中的其他文件夹下的文件做链接，则应提供文件名称，如文件夹/目标文件；若要与源文件所在文件夹同级文件夹中的文件链接，则应提供文件返回上级符号和文件夹名称，如../文件夹名/目标文件。
3．创建文件链接
在XHTML中，使用<a>标记来创建超链接，语法格式：
<a href="地址" name="字符串" target="打开窗口方式">源端点</a>
上述语法格式包含<a>标记的属性，如表2.18所示。
表2.18 <a>标记属性
<a>标记的target属性指定了目标文档的打开位置，如果没有指定此属性，默认在当前窗口打开。
应用示例10：创建超链接。
代码清单code2_10.html：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>创建超链接</title>
</head>
<body>
<h1>创建超链接示例</h1>
<a href="ssby.html" title="莎士比亚">文本链接</a><br />
<br />
<a href="ssby.html" target="_blank"><img src="images/ssby.jpg" width="140" height="136" /></a>
</body>
</html>
图像超链接会自动为图像添一个边框，它的颜色取决于超链接样式的颜色，如果不想要这个边框，可以在<img>标记中加入border="0"。
应用示例11：超链接在框架网页中的应用。修改示例8中的frame_left.html文件，在该文件中创建超链接，如图2.13所示。
图2.13 超链接在框架中的应用
target="mainFrame"表明目标文件在 mainFrame 框架中显示，否则会在原窗口中显示。mainFrame是在code2_8.html框架文件中定义的框架名。
<p><a href="code2_7.html" target="mainFrame">表格应用</a></p>
<p><a href="code2_8.html" target="mainFrame">列表应用</a></p>
4．创建锚点链接
创建锚点链接时，要在页面的某处设置一个位置标记（锚点），并给该锚点指定一个名称，以便在同一页面或其他页面中引用。通过创建锚点链接，可以使超链接指向当前页面或其他页面中的指定位置。锚点链接通常用于跳转到特定的主题或页面的顶部，使访问者能够快速到达所需要的位置。
若要创建锚点链接，首先要在页面中需要跳转的位置命名，即在该位置上放置一个<a>标记，并通过name属性为该位置指定一个名称，但不要在<a>和</a>标记之间放置任何文本。例如，要在test.html页面顶部创建一个锚点top，语法格式：
<a name="top"></a>
创建锚点后，可以使用<a>标记来创建指向该锚点的链接。要在同一个页面中跳转到名为“top”的锚点处，可以使用以下XHTML代码：
<a href="#top">返回顶部</a>
若要从其他页面跳转到该锚点，则使用以下XHTML代码：
<a href="test.html#top">跳转到test.html页的顶部</a>
5．创建邮件链接
在网页上创建电子邮件链接，方便用户意见反馈。当浏览者单击电子邮件链接时，可即时打开浏览器默认的电子邮件处理程序，收件人邮件地址被电子邮件链接中指定的地址自动更新，无须浏览者手动输入。在XHTML中使用<a>标记创建邮件链接，语法格式：
<a href="mailto:邮件地址?subject=邮件主题">链接内容</a>
2.1.9 滚动字幕
文字或图片的滚动效果在因特网上随处可见，对网页制作的初学者来说滚动字幕会让人感到兴奋。在XHTML中使用<marquee>标记就可以实现文字或图片的滚动效果。文字或图片的滚动效果是由<marquee>标记的属性来决定的，如表2.19所示。
表2.19 <marquee>标记属性
应用示例12：滚动字幕的应用。
代码清单code2_12.html：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>滚动字幕应用</title>
</head>
<body>
<table width="245" border="1" cellpadding="0" cellspacing="0" bordercolor="#FF9900">
<tr>
<td width="245" height="25" bgcolor="#FF9900" align="center"><strong>动态新闻</strong></td>
</tr>
<tr>
<td height="140" valign="top"><marquee direction="up" behavior="scroll" scrollamount="1"scrolldelay="100" height="130">
<ul type="disc">
<li>新闻标题1</li>
<li>新闻标题2</li>
<li>新闻标题3</li>
<li>新闻标题4</li>
</ul>
</marquee></td>
</tr>
</table>
</body>
</html>
运行效果如图2.14所示。
图2.14 滚动字幕应用示例
2.1.10 使用表单
表单是用来收集站点访问者信息的域集。表单从用户处收集信息，然后将这些信息提交给服务器进行处理。表单可以包含允许用户进行交互的各种元素，如文本框、列表框、复选框和单选按钮等。站点访问者填写表单的方式是输入文本、单击单选按钮或复选框，以及从下拉列表中选择选项等。在填好表单之后，站点访问者便送出所输入的数据，该数据根据所设置的表单处理程序，以各种不同的方式进行处理。
1．创建表单
在XHTML中，使用<form>标记来定义表单，语法格式：
<form name="表单名" method="get | post" action="URL">
表单元素
</form>
<form>标记的基本属性如表2.20所示。
表2.20 <form>标记的基本属性
（1）method属性：指定将表单数据传输到服务器的方法，其取值如下。
post：在HTTP请求中嵌入表单数据。
get：将表单数据附加到请求该页的URL中。
编程提示：
若要使用get方法发送长表单，URL的长度应限制在8192个字符以内。如果发送的数据量太大，数据将被截断，从而导致意外或失败。此外，在发送用户名和密码、信用卡号或其他机密信息时，不要使用 get方法，应使用post方法。
（2）accept-charset属性：accept-charset属性允许用户指定一系列字符集，服务器必须支持这些字符集，从而得以正确解释表单中的数据。该属性的值是用引号包含字符集名称列表。如果可接受字符集与用户所使用的字符不相匹配，则浏览器可以选择忽略表单或将该表单区别对待。此属性的默认值是“unknown”，表示表单的字符集与包含表单的文档的字符集相同。
（3）enctype属性：多用途网际邮件扩充协议，规定表单数据在发送到服务器之前的编码类型。在XHTML中主要有三种表单数据编码类型，即application/x-www-form-urlencoded、multipart/form-data和text/plain。
application/x-www-form-urlencoded：表单数据被编码为名称/值对。这是标准的编码格式，也是默认的编码格式。
multipart/form-data：表单数据被编码为一条消息，表单的每个元素对应消息中的一个部分，主要应用在文件数据传输上。使用这种类型提交表单，在表单接收方就不能取到除 file类型以外的表单元素的值。
text/plain：表单数据以纯文本形式进行编码，其中不含任何表单元素或格式字符。
2．单行文本框和密码输入框
如果要获取用户输入的一行信息，可以在表单中添加单行文本输入框。在XHTML中，可以使用<input>标记来创建单行文本输入框，根据其 type 属性值的不同分为单行文本框（type="text"）和密码输入框（type="password"）两种。这两种输入框实际上是一样的，只是在密码框中输入的文本是用圆点显示的。单行文本框和密码输入框属性如表2.21所示。
表2.21 单行文本框和密码输入框属性
在XHTML中创建单行文本框和密码输入框，代码如下：
账户：<input name="uid" type="text" size="20" maxlength="30" />
密码：<input name="pwd" type="password" size="20" maxlength="30" />
运行效果如图2.15所示。
图2.15 单行文本框和密码输入框
3．自定义按钮、提交按钮、复位按钮和图像按钮
在 XHTML 中，可以使用<input>标记来创建按钮。根据<input>标记的 type 属性值的不同将按钮分为 4 种：自定义按钮（type="button"）、提交按钮（type="submit"）、复位按钮（type="reset"）和图像按钮（type="image"）。自定义按钮、提交按钮、复位按钮和图像按钮的基本属性如表2.22所示。
表2.22 自定义按钮、提交按钮、复位按钮和图像按钮的基本属性
在XHTML中创建自定义按钮、提交按钮、复位按钮和图像按钮，代码如下：
<input type="submit" name="but_sb" value="提交按钮" />
<input type="reset" name="but_rt" value="复位按钮" />
<input type="button" name="but_bt" value="自定义按钮" />
<input type="image" name="but_img" src="images/imagebutton.gif" />
运行效果如图2.16所示。
图2.16 自定义按钮、提交按钮、复位按钮和图像按钮
4．复选框和单选按钮
如果想获取用户的选项信息，可在表单中添加复选框或单选按钮，两者功能不同。复选框实现“多选多”组选，单选按钮实现“多选一”组选。在XHTML中，可以使用<input>标记来创建复选框（type="checkbox"）、单选按钮（type="radio"）。复选框和单选按钮的基本属性如表2.23所示。
表2.23 复选框和单选按钮的基本属性
在XHTML中创建复选框和单选按钮，代码如下：
<div align="center"> 请问你学过哪些网页制作技术？<br/>
<input name="web" type="checkbox" value="HTML" checked="checked" />
HTML
<input name="web" type="checkbox" value="JavaScript" checked="checked" />
JavaScript
<input name="web" type="checkbox" value="CSS"/>
XML
<input name="web" type="checkbox" value="ASP" checked="checked" />
ASP
<input name="web" type="checkbox" value="PHP" />
PHP <br />
<br />
请问你学过哪一种网页制作技术？<br />
<input type="radio"name="web"value="HTML"checked="checked"/>
HTML
<input type="radio"name="web"value="JavaScript"/>
JavaScript
<input type="radio"name="web"value="XML"/>
XML
<input type="radio"name="web"value="ASP"/>
ASP
<input type="radio"name="web"id="radio5"value="PHP"/>
PHP
</div>
运行效果如图2.17所示。
图2.17 复选框和单选按钮
5．文件域
如果想使用户具备文件上传功能，就必须使用文件域。在XHTML中，可以使用<input>标记来创建文件域（type="file"）。文件域的基本属性如表2.24所示。
表2.24 文件域的基本属性
在XHTML中创建文件域，代码如下：
<form action="" method="post" enctype="multipart/form-data" name="myform">
图片：
<input type="file" name="filename" size="30" />
</form>
运行效果如图2.18所示。
图2.18 文件域
6．隐藏域
在XHTML中，可以使用<input>标记来创建隐藏域（type="hidden"）。在网页浏览时隐藏域不会显示出来，但是用户可以通过查看XHTML的源代码看到该元素的属性值，所以请注意，不要用该元素传递敏感信息，其基本属性如表2.25所示。
表2.25 隐藏域的基本属性
在XHTML中创建隐藏域，代码如下：
<input type="hidden" name="hiddenField" value="字符串" />
7．文本域
通过前面的学习，了解到单行文本框可以获取用户输入的一行信息，那如何获取多行用户输入的信息呢？在XHTML中，可以使用<textarea>标记创建一个多行的、可滚动的文本输入框，允许用户输入较长的文本，弥补<input>标记只能输入一行文本的不足。在<textarea>和</textarea>之间放置的内容是文本框中显示的初始文本，该文本是纯文本，如果其中包含有XHTML标记，也会原样显示在文本框中。<textarea>标记的基本属性如表2.26所示。
表2.26 <textarea>标记的基本属性
在XHTML中创建文本域，代码如下：
<textarea name="content" cols="40" rows="4" id="content">文本初始值</textarea>
运行效果如图2.19所示。
图2.19 多行文本框
8．选择域
在 XHTML 中，通过<select>和<option>标记可以创建一个下拉菜单或者选项列表，其中<option>标记用于定义列表框中的列表项目。<select>和<option>标记的基本属性如表2.27所示。
表2.27 <select>和<option>标记的基本属性
在XHTML中创建下拉菜单或者选项列表，代码如下：
<select name="s_only">
<option>HTML</option>
<option>XHTML</option>
<option>CSS</option>
<option>JavaScript</option>
</select>
<select name="s_mul" multiple="multiple" size="3">
<option value="1">HTML</option>
<option value="2">XHTML</option>
<option value="3">CSS</option>
<option value="4">JavaScript</option>
</select>
运行效果如图2.20所示。
图2.20 创建下拉菜单或者选项列表
应用示例13：制作一个用户注册页面。
代码清单code2_13.html：
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>表单应用</title>
</head>
<body>
<table width="530"border="0"align="center"cellpadding="0"cellspacing="2">
<form name="myfrm"method="post"action="">
<tr>
<td height="30"><div align="right">E-mail账号：</div></td>
<td><input name="email"type="text"size="20"/>
<select name="emailselect">
<option>qq.com</option>
<option>foxmail.com</option>
</select>
<input type="button"name="button"value="检测账号是否可用"/>
<div align="left">例如：example2009,example.2009</div></td>
</tr>
<tr>
<td width="100"height="30"><div align="right">昵称：</div></td>
<td><input name="name"type="text"size="40"/></td>
</tr>
<tr>
<td height="30"><div align="right">生日：</div></td>
<td><select name="y">
<option>1983</option>
<option>1984</option>
…
</select>
年
<select name="m">
<option>1</option>
<option>2</option>
…
</select>
月
<select name="d">
<option>1</option>
<option>2</option>
…
</select>
日</td>
</tr>
<tr>
<td height="30"><div align="right">性别：</div></td>
<td><input name="sex"type="radio"id="radio"value="男"checked="checked"/>
男
<input type="radio"name="sex"value="女"/>
女</td>
</tr>
<tr>
<td height="30"><div align="right">密码：</div></td>
<td><input name="pwd"type="password"size="40"/>
<br/>
<div>6-16个字符组成，区分大小写，不能为9位以下纯数字</div></td>
</tr>
<tr>
<td height="30"><div align="right">确认密码：</div></td>
<td><input name="repwd"type="password"size="40"/></td>
</tr>
<tr>
<td height="30"><div align="right">所在地：</div></td>
<td><select name="address">
<option>吉林省</option>
<option>北京市</option>
</select></td>
</tr>
<tr>
<td height="30"><div align="right">验证码：</div></td>
<td><input name="code"type="text"value="请输入您在下图中看到的字符，不区分大小写"size="40"/></td>
</tr>
<tr>
<td height="30"><div align="right">验证图片：</div></td>
<td><img src="../getimage.jpg"width="130"height="53"align="middle"/>看不清楚？换张图片</td>
</tr>
<tr>
<td height="30"> </td>
<td><input type="submit"name="s_but"value="确定 并同意以下条款"/></td>
</tr>
</form>
</table>
</body>
</html>
运行效果如图2.21所示。
图2.21 用户注册页面
2.1.11 CSS样式表应用
层叠式样式表（Cascading Style Sheet，CSS），简称样式表，是一种标记性语言。它使网页的灵活性增加，设计者可以通过修改样式表的定义而使网页呈现完全不同的外观，而当网站拥有几十甚至上百个页面时，修改页面链接的样式表文件即可修改页面的外观，可以大大地减少工作量。
1．CSS语法
CSS语法由三部分构成，即选择器、属性和值。语法格式：
selector {
property: value;
}
选择器（selector）通常是用户希望定义的XHTML元素或标记；属性（property）是用户希望改变的内容，并且每个属性都有一个值，属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration）。例如：
body {
color: blue;
}
上面这行代码的作用是将<body>标记元素内的文字颜色定义为蓝色。其中，body是选择器，而包括在花括号内的部分是声明。声明依次由两部分构成：color属性和blue值。其中值除了英文单词 blue，还可以使用十六进制的颜色值#0000FF，为了节约字节，可以使用 CSS的缩写形式#00F。例如：
p{
color: #00F;
}
如果要定义多个声明，则需要用分号将每个声明分开。下面的例子展示出如何定义一个红色文字的居中段落。最后一条规则是不需要加分号的，因为分号在英语中是一个分隔符号，不是结束符号。然而，大多数有经验的设计师会在每条声明的末尾都加上分号，这么做的好处是，当从现有的规则中增减声明时，会尽可能减少出错的可能性。应该在每行只描述一个属性，这样可以增强样式定义的可读性，例如：
p{
text-align: center;
color: red;
font-family: arial;
}
2．id选择器
id选择器可以为标有特定id的XHTML元素指定特定的样式，id选择器以“#”来定义。下面的两个id选择器，第一个定义元素的颜色为红色，第二个定义元素的颜色为绿色：
#red {
color:red;
}
#green {
color:green;
}
下面的XHTML代码中，id为red的<p>元素显示为红色，而id为green的<p>元素显示为绿色。
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>
id属性只能在每个XHTML文档中出现一次。
（1）id选择器和派生选择器。在目前网页布局中，id选择器常常用于建立派生选择器。例如：
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
上面的样式只会应用于出现id为sidebar的元素的段落。这个元素很可能是<div>或者表格单元，也可能是其他块级元素，它甚至还可以是一个内联元素，如<em>或者<span>，不过这样做是非法的，因为不可以在内联元素<span>中嵌入<p>。
（2）一个选择器，多种用法。即使被标注为sidebar的元素只能在文档中出现一次，这个id选择器作为派生选择器也可以被使用很多次。例如：
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
#sidebar h2 {
font-size: 1em;
font-weight: normal;
font-style: italic;
margin: 0;
text-align: right;
}
在这里，与页面中的其他<p>元素明显不同的是，sidebar内的<p>元素得到了特殊的处理，同时，与页面中其他所有<h2>元素明显不同的是，sidebar中的<h2>元素也得到了不同的特殊处理。
（3）单独的选择器。id 选择器即使不被用来创建派生选择器，它也可以独立发挥作用。例如：
#sidebar {
border: 1px dotted #000;
padding: 10px;
}
根据这条规则，id为sidebar的元素将拥有一个像素宽的黑色点状边框，同时其周围会有10个像素宽的内边距（padding，补白）。
3．CSS类选择器
在CSS中，类选择器以一个点号显示，例如：
.center {
text-align: center;
}
在上面的例子中，所有拥有center类的XHTML元素均居中。在下面的XHTML代码中，<h1>和<p>元素都有 center 类。这意味着两者都将遵守“.center”选择器中的规则。例如：
<h1 class="center">
This heading will be center-aligned
</h1>
类名的第一个字符不能使用数字，它无法在Mozilla或Firefox中起作用。和id选择器一样，类也可被用做派生选择器。例如：
.fancy td {
color: #f60;
background: #666;
}
在上面这个例子中，类名为fancy的元素内部的表格单元都会以灰色背景显示橙色文字。<td class="fancy">可以将类fancy分配给任何一个表格元素任意多次。那些以fancy标注的单元格都会是带有灰色背景的橙色文字。那些没有被分配名为 fancy 的类的单元格不会受这条规则的影响。
类名为fancy的段落也不会是带有灰色背景的橙色。当然，任何其他被标注为fancy的元素也不会受这条规则的影响。这都是由于书写这条规则的方式决定的，这个效果被限制于被标注为fancy的表格单元。
4．如何创建CSS
在XHTML中，创建样式表的方法有三种：外部样式表、内部样式表和内联样式表。
（1）外部样式表。当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。每个页面使用<link>标记链接到样式表。<link>标记在文档的头部：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
浏览器会从文件mystyle.css中读到样式声明，并根据它来格式文档。外部样式表可以在任何文本编辑器中进行编辑，文件不能包含任何的 XHTML 标记，样式表应该以.css 扩展名进行保存。
hr {
color: sienna;
}
p{
margin-left: 20px;
}
body {
background-image:url(images/bg.jpg);
}
（2）内部样式表。当单个文档需要特殊的样式时，就应该使用内部样式表。可以使用<style>标记在文档头部定义内部样式表。例如：
<head>
<style type="text/css">
hr {
color: sienna;
}
p{
margin-left: 20px;
}
body {
background-image: url(images/bg.jpg);
}
</style>
</head>
（3）内联样式表。由于要将表现和内容混杂在一起，内联样式表会损失掉样式表的许多优势。请慎用这种方法，如当样式仅需要在一个元素上应用一次时使用。
要使用内联样式表，需要在相关的标记内使用样式（style）属性。style 属性可以包含任何CSS属性。以下XHTML代码展示如何改变段落的颜色：
<p style="color: #ff0">This is a paragraph</p>
（4）多重样式。如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。例如，外部样式表拥有针对h3选择器的三个属性：
h3 {
color: red;
text-align: left;
font-size: 8pt;
}
而内部样式表拥有针对h3选择器的两个属性：
h3 {
text-align: right;
font-size: 20pt;
}
假如拥有内部样式表的这个页面同时与外部样式表链接，那么h3得到的样式是：
h3 {
color: red;
text-align: right;
font-size: 20pt;
}
即颜色属性将被继承于外部样式表，而文字排列（text-align）和字体尺寸（font-size）会被内部样式表中的规则取代。
5．CSS背景
CSS可以使用如下属性为元素设置背景，如表2.28所示。
表2.28 CSS 背景属性
要把图像设置成为背景，需要使用 background-image 属性。background-image 属性的默认值是none，表示背景上没有放置任何图像。如果需要设置一个背景图像，必须为这个属性设置一个URL值。例如：
body {
background-image: url(images/bg.jpg);
}
如果需要在页面上对背景图像进行平铺，可以使用background-repeat属性。属性值repeat导致图像在水平、垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x和repeat-y分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。默认情况下，背景图像将从一个元素的左上角开始。
应用示例14：设置页面的背景颜色为#D0D1C8，背景图像为images/bg_01，背景图像不平铺。
代码清单code2_14.html：
body {
background-color: #D0D1C8;
background-image: url(images/bg_01.jpg);
background-repeat: no-repeat;
}
运行效果如图2.22所示。
图2.22 CSS背景应用
6．CSS文本
绝大部分网页的内容，包括导航、版权信息等，往往都是由大段的文字和图片组成的，因此使用CSS来设定段落的样式是非常重要的。大段密集的文字往往会显得很枯燥乏味，通过设置文本的属性不仅可以改变文字之间的行距、对齐方式，还可以实现上标、下标和缩进等效果。CSS 使用如下属性为文本设置属性，如表2.29所示。
表2.29 CSS 文本属性
7．CSS字体
为了达到对文字内容的美化或者突出等效果，网页设计者往往通过改变文字的字体或者粗细等来实现。CSS使用如下属性为文字设置属性，如表2.30所示。
表2.30 CSS字体属性
应用示例15：设置id为div_text的元素的字体为宋体，尺寸为15像素，加粗，颜色为#000066，居中对齐，行高25像素。
代码清单code2_15.html：
#div_text {
font-family: "宋体";
font-size: 15px;
font-weight: bold;
color: #006;
text-align: center;
line-height: 25px;
}
运行效果如图2.23所示。
图2.23 CSS文本及字体应用
8．CSS列表
从某种意义上讲，很多内容都可以归类于某种列表，如导航栏、标题列表、排行榜、文章列表等。通过设定CSS 列表属性，可以设置列表的标记类型，如表2.31所示。
表2.31 CSS列表（list）属性
应用示例16：设置id为list1的列表元素的列表项标志为images/list.gif，标志类型为无，标志位置为外。
代码清单code2_16.html：
#list1 {
line-height: 25px;
list-style-image: url(images/list.gif);
list-style-type: none;
list-style-position: outside;
}
运行效果如图2.24所示。
图2.24 CSS列表应用
9．CSS框模型
浏览器内显示的元素都可以看成是一个装了东西的矩形盒子，这些矩形盒子嵌套、叠加或者排列在一起，形成了页面。每一个元素的“框（Box）”由内容、补白、边框和边距组成。
内容（content）：如文字、图片或者其他元素，内容也可以看成是一个长方形的框，width （宽度）和height（高度）两个CSS属性设定的就是内容框的宽度和高度。
补白（padding）：补白（也译为填充、内边距、内补丁等）是内容框与边框之间的距离，补白部分显示的是背景。
边框（border）：边框（也译为边界）是可以具体显示出来的，可以设定宽度、外观样式和颜色。
边距（margin）：边距（也译为边白、外边距、外补丁等）是边框外的透明区域，用来设定本元素与其他元素之间的距离。
一个元素框又有上、右、下、左4个方向的边，如图2.25所示。从图中可以发现，一个元素所占的区域其实是由几个矩形框组成的：元素的内容框、补白形成的框、元素的边框及边距形成的框。
图2.25 框模型示意图
（1）内容框。在CSS中，内容框的高度和宽度取决于width和height属性。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的尺寸。例如：
#div_content {
height: 200px;
width: 300px;
}
（2）CSS补白。padding属性也译为填充、内边距、内补丁等，是内容框与边框之间的距离，补白部分显示的是背景。
补白又分为4个方向的属性：上（padding-top）、右（padding-right）、下（padding-bottom）和左（padding-left），而padding属性是把这4个方向的属性按照“上、右、下和左”的顺序缩写在一行内。
同时，对于4个方向的值，还可以进一步缩写，代码如下：
body {
padding:5px; /*4个方向的补白全部为5px*/
}
div {
padding:5px 10px; /*上=下=5px，左=右=10px*/
}
p{
padding:5px 10px 15px; /*上=5px，下=15px，左=右=10px*/
}
td {
padding:5px 1px 2px 3px; /* 上=5px，右=1px，下=2px，左=3px*/
}
以上代码也可以使用4个单边补白属性分别设置，代码如下：
p, td {
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
}
（3）CSS边框。元素的边框（border）是围绕元素内容和内边距的一条线或多条线。CSS border属性允许用户规定元素边框的样式、宽度和颜色。在XHTML中，使用表格来创建文本周围的边框，但是通过CSS边框属性，可以创建出效果更加出色的边框，并且可以应用于任何元素。
边框也由4个边组成，每个边都有3个属性：宽度、样式和颜色。CSS边框属性如表2.32所示。
表2.32 CSS 边框属性
使用一个声明设置4个边框的属性，代码如下：
p{
border: 1px solid #F00;
}
上边这条代码是使用border属性为所有p段落设置边框（宽度1px，实线，红色），边框宽度、样式和颜色三个属性值之间没有顺序关系。
为边框定义多个样式，代码如下：
p{
border-width:1px 2px; /* 为4个边框设置不同的宽度 */
}
p{
border-style:solid dotted dashed double; /* 为4个边框设置不同的样式 */
}
p{
border-color:red blue yellow green; /* 为4个边框设置不同的颜色 */
}
定义单边样式使用单边属性进行设置，代码如下：
#div_border {
border-top-width: 2px;
border-right-width: 1px;
border-bottom-width: 2px;
border-left-width: 1px;
border-style:solid; /* 为边框设置统一样式 */
border-top-color: #F00;
border-right-color: #06C;
border-bottom-color: #F00;
border-left-color: #06C;
}
以上样式可以简写为以下代码：
#div_border {
border-width: 2px 1px;
border-style: solid;
border-color: #F00 #06C;
}
（4）CSS边距。元素的边距（margin）也译为边白、外边距、外补丁等，是边框外的透明区域，用来设定本元素与其他元素之间的距离。在网页排版布局中，边距是经常用到的属性。
边距也有上（margin-top）、右（margin-right）、下（margin-bottom）和左（margin-left）4个方向，而margin属性则是这4个方向属性的缩写。同padding属性一样，margin属性的值也可以缩写。例如：
body {
margin:5px; /*4个方向的边距全部为5px*/
}
div {
margin:5px 10px; /* 上=下=5px，左=右=10px*/
}
p{
margin:5px 10px 15px; /* 上=5px，下=15px，左=右=10px*/
}
td {
margin:5px 1px 2px 3px; /* 上=5px，右=1px，下=2px，左=3px*/
}
设置单个边距也可以使用如下代码：
body {
margin-left: 0;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
}
应用示例17：设置div_txt块的宽为250px，高为200px；为该块加一个边框，边框宽度为2 px，实线，颜色为#F90；设置内边距和外边距分别为10 px和5 px。
代码清单code2_17.html：
#div_txt {
margin: 5px;
padding: 10px;
height: 200px;
width: 250px;
border: 2px solid #F90;
}
运行效果如图2.26所示。
图2.26 框模型应用示例
10．CSS定位、浮动和清除
CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。
（1）CSS 定位。定位的基本思想很简单，它允许用户定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人吃惊。CSS定位属性如表2.33所示。
表2.33 CSS定位属性
① 绝对定位。一个采用绝对定位的元素不获得任何空间。这意味着该元素在被定位后不会留下空位。要对元素进行绝对定位，应将position属性的值设为absolute。接着，可以通过属性left、right、top和bottom来设定将盒子放置在哪里。例如：
#img1 {
position: absolute;
left: 100px;
top: 50px;
}
显示效果如图2.27所示。
图2.27 绝对定位
② 相对定位。要对元素进行相对定位，应将position属性的值设为relative。绝对定位与相对定位的区别在于计算位置的方式。采用相对定位的元素，其位置是相对于它在文档中的原始位置计算而来的。这意味着，相对定位是通过将元素从原来的位置向右、向左、向上或向下移动来定位的。采用相对定位的元素会获得相应的空间。例如：
#img1 {
position: relative;
left: 100px;
top: 50px;
}
#img2 {
position: relative;
left: 50px;
top: 100px;
}
显示效果如图2.28所示。
图2.28 相对定位
（2）浮动与清除。在CSS中，可以通过float属性设定元素向左（left）或向右（right）浮动，以往这个属性总应用于图像，使文本围绕在图像周围，现在任何元素都可以浮动。因此，浮动是实现页面排版布局的一个重要属性。例如：
#div_txt1 {
float: left;
}
#div_txt2 {
float:left;
}
显示效果如图2.29所示。
图2.29 CSS浮动
（3）清除浮动。浮动元素的特点之一，就是可以与其他元素在一行内显示，但是有时候网页设计者并不希望这样，那么就要使用clear属性来清除浮动。clear属性的值可以是left、right、both或none。原则是这样的：如果一个浮动框的clear属性被设为left，那么该浮动框的上边距将始终处于前面浮动框的下边距之下。例如：
#img1 {
float: left;
}
#div_txt {
clear:left;
}
显示效果如图2.30所示。
图2.30 清除浮动
应用示例18：3行3列布局设计。设计效果如图2.31所示。
图2.31 3行3列布局设计示意图
（1）3行3列网页布局。代码清单code2_18.html：
<div id="wrap">
<div id="header">#header</div>
<div id="menu">#menu</div>
<div id="content">#content</div>
<div id="other">#other</div>
<div id="footer">#footer</div>
</div>
（2）样式设置。中间3列的宽度固定，因此可以设定3列左浮动，CSS代码如下：
#header {
…
}
#menu {
float: left;
height: 300px;
width: 150px;
background-color: #9C6;
margin-right: 5px;
}
#content {
background-color: #F90;
margin-right: 5px;
margin-bottom: 5px;
float: left;
height: 350px;
width: 490px;
}
#other {
background-color: #9C6;
height: 300px;
width: 150px;
float: left;
}
#footer {
background-color: #939;
margin-right: 5px;
clear: left;
height: 60px;
width: 800px;
}