第二章 JSP页面制作基础

2011-07-04 09:32 Rollen Holt 阅读(12137) 评论(0) 编辑收藏举报

第二章 JSP页面制作基础

[本章导读]

JSP页面将Java代码嵌入到HTML脚本中，掌握HTML语言是学习JSP的基础。HTML是网页制作的一种规范，一种标准，它通过标记符来标记网页的各个部分。本章首先介绍用HTML制作网页的各种标记符的设置方法，接着介绍了CSS的基本概念和使用方法。此外，为了增强读者对网页制作的了解，介绍了Dreamweaver的使用方法。通过学习，读者可以使用Dreamweaver以及相关知识制作出简单精美的网页。

2.1 HTML语言

2.1.1 HTML概述

HTML是Hyper Text Markup Language的缩写，中文意思是超文本标记语言，几乎所有的网页都是以HTML格式书写的。

通常我们说“制作Web页”，也就是所谓的制作“网页”。如何表示作为超媒体的Web页呢？这就是用HTML语言。每个Web页对应一个HTML文件。HTML中的超文本功能，也就是链接功能，使网页之间可以链接起来。网页的本质就是HTML，HTML是一切Web编程的基础。

HTML不是“所见即所得”的程序设计语言，不过HTML非常易学易用，它以标识符来标识、排列各对象。而标识符本身则以“<”和“>”标识，标识符内的内容称为元素（element），元素代表了标识符的意义，与大小写无关的。

HTML的一般格式为：

<element>Object</element>

或

<element Attribute=Argument>Object</element>

或

下面简单介绍一下用HTML写网页的方法，创建HTML的方式有很多，总体来说，有两种方式。

（1）用工具软件创建HTML文档

可以使用简便快捷的方式来编写代码，比如用比较完善的工具软件来制作网页，像Dreamweaver 8、FronPage 2003等。

（2）用编辑工具编写HTML文档

记事本、写字板、Editplus等工具都可以用来编辑HTML文档。

用HTML编写的网页文件其实只是很平常、很普通的文本文件，只是保存时应该把文件后缀名改为.html或.htm。只要通过一些简单的标注，就可以让网页生动、活泼起来，这就是HTML的特色。

【例2.1】用HTML语言编写的一个简单网页，文件名为0201.htm，用来查看网页的显示效果。

<HTML>

<H1>这是第一个HTML页面</H1>

第一段结束了 <P>

<H2>这里是H2字体，这是第一个HTML页面</H2>

<H3>这里是H3字体，这是第一个HTML页面</H3>

<H4>这里是H4字体，这是第一个HTML页面</H4>

第二段也结束了 <P>

<H5>这里是H5字体，这是第一个HTML页面</H5>

<H6>这里是H6字体，这是第一个HTML页面</H6>

</BODY>

</HTML>

在IE6.0中，0201.htm的显示效果如图2.1所示。

图2.1 网页显示效果

<HTML>标记HTML的开始，在文件结束处要有对应的符号</HTML>。

<BODY>标记文件体的开始，对应结束符是</BODY>。<BODY>还有一些属性用来设置网页的背景色、背景图等。

在HTML文件中，重要的文字部分都由“标签”括起来，这样文字就成了特别的文字，而标签本身则以“<”和“>”号标识，标签内的内容称为元素，代表了标签的意义。例如：

<title>我的博客主页</title>

标签的名称（title）用一对尖括号括起来，放在被标记文字的前面，在标签的名称前面加一条斜线，然后再用一对尖括号括起来，放在被标记文字的后面。这两个标签叫做“始标签”和“终标签”，它们括住的文字称为“内容”，整个标签称为一个“元件”。

2.1.2 简单格式标记

1．标题格式

HTML提供6种标题格式，其所用的标记符为<H1>…</H1>（标题1）、<H2>…</H2>（标题2）、<H3>…</H3>（标题3）、<H4>…</H4>（标题4）、<H5>…</H5>（标题5）、<H6>…</H6>（标题6），其中<H1>…</H1>的字体最大，<H6>…</H6>的字体最小。

<H1>…</H1>等标记符的属性如下。

（1）ALIGN={LEFT， CENTER， RIGHT}：文字左对齐（LEFT）、居中（CENTER）或右对齐（RIGHT）。

【例2.2】 ALIGN属性的用法，文件名为0202.htm，运行结果如图2.2所示。

<HTML>

<HEAD>

<TITLE>ALIGN属性的用法</TITLE>

</HEAD>

<BODY>

</BODY></HTML>

（2）ID：指定标记符的ID选择器。

（3）STYLE：指定标记符的样式表命令。

（4）CLASS：指定标记符的样式类型。

（5）LANG：指定标题文字的语种。

（6）DIR：指定标题文字的方向。

（7）TITLE：指定标记符的标题。

（8）OnClink：指定当鼠标在标记符上按一下时所要执行的脚本。

（9）OnDblClink：指定当鼠标在标记符上按两下时所要执行的脚本。

（10）OnMouseUp：指定当鼠标在标记符上放开按键时所要执行的脚本。

（11）OnMouseDown：指定当鼠标在标记符上按下按键时所要执行的脚本。

（12）OnMouseOver：指定当鼠标移过标记符时所要执行的脚本。

（13）OnMouseMove：指定当鼠标在标记符上移动时所要执行的脚本。

（14）OnMouseOut：指定当鼠标自标记符上移开时所要执行的脚本。

（15）OnKeyPress：指定在标记符上按下再放开按键时所要执行的脚本。

（16）OnKeyUp：指定在标记符上放开按键时所要执行的脚本。

2．段落格式

与一般文档类似，网页文档的内容也是由多个段落组成，因此需要设置段落格式，以使文档看上去更加美观整齐，富于条理性。例如，用户可用分段标记符将文件划分为段落，并且为段落设置对齐格式等。在HTML文件中，设置段落格式最简单的方法是使用<P>…</P>段落标记符。此外，HTML还提供了位置段落、强制换行但不换段和预先格式化等，下面我们来看看段落标记符的应用。

（1）分段与换行符

将文档划分为段落是最基本的段落格式，完成这一功能可使用分段标记符、换行标记符或水平线。

1）分段标记符：分段标记符用于将文档划分为段落，标记符为<P>…</P>，其中结束标记符</P>可省略。由于浏览器会忽略HTML文档中多余的空格或Enter键，所以，即使在文档中按下Enter键企图分段，浏览结果还是会将全部文字显示成同一段落。如：

<HTML>

<HEAD>

<TITLE>无分段标记符</TITLE>

</HEAD>

<BODY>

湖南物华天宝、人杰地灵。

近现代以来风起云涌、大事不断、英才辈出。在每行文字后按下

革命烈士的鲜血曾染红了三湘大地， Enter键企图分段

革命先辈的奋斗足迹遍布三湘四水。

</BODY></HTML>

运行结果如图2.3所示。

图2.3 无分段标记符的Web页

如果要将这段文字按我们所希望的那样分段，就要使用段落标记符，方法是在每个段落的前后各加上开始标记符<P>和结束标记符</P>。结束标记符通常可以省略，如图2.4。

<HTML>

<HEAD>

<TITLE>有分段标记符</TITLE>

</HEAD>

<BODY>

<P> 湖南物华天宝、人杰地灵。

<P> 近现代以来风起云涌、大事不断、英才辈出。

<P> 革命烈士的鲜血曾染红了三湘大地，

<P> 革命先辈的奋斗足迹遍布三湘四水。

</BODY></HTML>

运行结果如图2-4所示。

图2.4 加了分段标记符的Web页

2）换行标记符：有时我们要将文字强制换行，而不是另起段落，可以用换行标记符<BR>实现该功能。注意，<BR>仅单独使用，而非成对出现。

下列代码显示了标记符<BR>的特点。

<HTML>

<HEAD>

<TITLE>有分段标记符</TITLE>

</HEAD>

<BODY>

<br> 湖南物华天宝、人杰地灵。

<br> 近现代以来风起云涌、大事不断、英才辈出。

<br> 革命烈士的鲜血曾染红了三湘大地，

<br><br><br><br> 用BR产生多个空行后到了这里。

</BODY></HTML>

运行后，页面的浏览效果如图2.5所示。

图2.5 <BR>分隔符效果

3）添加水平线：在HTML文档中，水平线非常有用。因为，除了用<P>和<BR>标记符划分段落以外，还可以用添加水平线的方法分隔文档。而且水平线可以起到美化装饰网页效果的作用。

添加水平线的标记符为<HR>（与<BR>类似，<HR>也不包括结束标记符），它包括ALIGN、SIZE、WIDTH、COLOR、NOSHADE等属性，下面分别介绍这些属性：

① ALIGN属性="LEFT"，"CENTER"或"RIGHT"：水平线左对齐、居中或右对齐。通过该属性，可以使水平线处于网页上的不同位置。

② SIZE属性="N"：指定水平线的高度。通过该属性可以改变水平线的粗细程度，SIZE属性的值为一个整数，它表示以像素（Pixel）为单位的该水平线的粗细程度，默认值为2。例如，<HR SIZE=3>。

③ WIDTH属性="N"：指定水平线的宽度。用户可通过在<HR>标记符中加入WIDTH属性来更改水平线的宽度。WIDTH的设定值既可以是以像素为单位的水平线的长度，也可以是水平线占浏览器窗口宽度的缩放比。

例如，要生成一条300个像素的的水平线，HTML代码为：

如果想将这个长度改成以占视窗的缩放比来度量（占90%），则代码为：

④ NOSHADE属性：指定没有阴影的水平线。在多数浏览器中，由<HR>生成的水平线将以一种加阴影的3 D线的形式显示出来，有时并不需要这样的效果，而只想用一条简单的黑线即可，此时用NOSHADE属性就可以实现。

例如，生成一条粗细长度为5且仅为一条黑线的HTML代码为：

⑤ COLOR属性="#FFFFF"等：指定水平线的颜色。在IE 3及更高版本中，可通过<HR>设置COLOR属性指定水平线的颜色。

例如，要生成一条黄色的水平线，其HTML代码为：

【例2.3】使用<HR>标记符的属性画水平线，文件名为0203.htm，运行结果如图2.6所示。

图2.6 水平线属性设置

<HTML>

<HEAD>

<TITLE>水平线属性设置</TITLE></HEAD>

<BODY>

</BODY>

</HTML>

（2）段落对齐

段落对齐是一种常见的段落格式，什么是段落对齐呢？其实在前面已经大量使用了对齐方式。比如，在讲述水平线的时候，提到了ALIGN属性，用来指定水平线的对齐方式，而段落对齐有着更丰富的内容。

在HTML中，一般使用标记符的ALIGN属性设置段落对齐方式。

1）ALIGN属性。ALIGN属性用于设置段落的对齐方式，其常见取值有4种：RIGHT（右对齐）、LEFT（左对齐）、CENTER（居中对齐）、JUSTIFY（两端对齐）。两端对齐也叫分散对齐，是指将一行中的文字均匀分布在左右页边距之间，以保证不会在左右页边出现“锯齿”形状。

也许读者自己都已总结出来了，ALIGN属性可应用于多种标记符，这在前面的水平线标记符、标题标记符等中都已提到过。今后还会遇到很多，其中最典型的是<DIV>、<P>和<HR>等标记符。

2）DIV标记符。DIV标记符用于为文件分节，目的是为文件的不同部分应用不同的段落格式，其格式为<DIV>…</DIV>，位于DIV标记符中的多段文本被认为是一节，可为它们设置一致的对齐格式。DIV标记符要与ALIGN等属性联合使用，否则它将不完成任何工作。

3）CENTER标记符。要将文件内容居中，除了可以使用<DIV ALIGN="CENTER"> </DIV>标记符外，还可使用CENTER标记符，方法为：将需居中的内容置于<CENTER>和</CENTER>之间。

4）格式的嵌套。例如，在<DIV>标记符中设置了左对齐，而在<DIV>和</DIV>标记符的<P>标记符中又设置了右对齐，结果会如何？这就是格式的嵌套问题。我们要考虑在同一段内容设置不同的格式时HTML的处理方式。通常的原则是：如果所设置的格式是相容的，则取格式叠加后的效果，即这两种格式都取上。例如，如果为一段文字同时设置了粗体和下划线格式，则该段文字将以粗体和下划线显示；如果所设置的格式是不相容的，也就是矛盾的，则取最近样式符的修饰效果，如在<BODY>标记符中设置了整个正文的颜色，但在正文中可以用<FONT>标记符更改某些特定文字的颜色。

3．文字格式

在网页中可以获得各种字符的格式效果，例如可以为网页中的特定文字设置字体、颜色等，下面将介绍如何在 HTML中设置文字格式。

（1）字符格式

我们常常需要为Web页上的文字设置字符格式。例如，将字体设置为斜体以引起注意，或采用上标、下标格式表示特殊内容等。字符格式有很多种，表2-1列出了一些常见的格式标记符。

字符的格式有很多种，但应注意不要过多地变化字体方式，宁*勿滥。过多地使用字符格式，一方面麻烦，另一方面给人以混乱的感觉。

表2-1 字符格式标记符

标记符范例	功能说明
<B>Bold</B>	粗体
<I>Italic</I>	斜体
<U>Underlined</U>	下划线
H<SUB>2</SUB>o如H₂o	下标
X<SUP>3</SUP>如X³	上标
<BIG>BIG</BIG>	大写体
<SMALL>small</SMALL>	小写体
<TT>t</TT>	固定宽度字体
<STRIKE>Strike</STRIKE>	删除字
<S>Strike</S>	删除字
<EM>强调斜体</EM>	用于强调某些字体为斜体
<STRONG>强调粗体</STRONG>	用于强调某些字体为粗体
<DFN>Definition</DFN>	用于表示定义了的文字，通常是黑体或斜体
<CITE>Citation</CITE>	用于表示文本属性引用，通常是斜体
<CODE>Code</CODE>	表示程序代码文字，通常是固定宽度
<KBD>Keyboard</KBD>	表示键盘输入文字，通常是固定宽度
<SAMP>SAMPLE</SAMP>	表示文本样本，通常是固定宽度
<VAR>Variable</VAR>	变数文字，通常是斜体
<ABBR>如HTTP</ABBR>	表示缩写文字

表2-1中共列出了19个字符标记符，其中前10个样式标记符用来为某些文字设置特殊格式，我们称其为物理字符样式，而后9个样式标记符不仅在文档中可以指定特定文字的格式，而且还能标出文字的含义，我们称其为逻辑字符样式。不管是物理字符样式还是逻辑字符样式，使用时只需将设置格式的字符括在标记符之间即可。

【例2.4】字符样式设置练习，文件名为0204.htm，运行结果如图2.7所示。

<HTML>

<HEAD><TITLE>字符样式设置练习</TITLE></HEAD>

<P><S>此处为使用<S>标记符设置的删除线文本</S></P>

</BODY>

</HTML>

图2.7 使用字符样式的显示效果

（2）字体大小、字符颜色和字体样式

除了上面介绍的字符样式，还可以使用<FONT></FONT>标记符控制字符的样式。如果我们所做的网页几乎都是一成不变的字体大小、字符颜色和字体样式，不久就会让来访者生厌的，这时，可以利用<FONT>标记符的3个属性，即SIZE、COLOR和FACE来改变网页的风格。

1）SIZE属性。SIZE属性，也就是字号属性，用于控制文字的大小，其值越大，显示的文字越大，字号大小有1～7级，默认值是3。该属性值也可以用+1、-3、+4等来指定字号大小，它们表示比默认的字体大1号、小3号及大4号等。

例如，“<FONT SIZE=+1>人杰地灵</FONT>”表示“人杰地灵”为4号大小的字。

再如，“<FONT SIZE=-2>人杰地灵</FONT>”表示“人杰地灵”比默认字体小2号，即1号大小的字体。

2）COLOR属性。字体标记符的COLOR属性可用来控制文字的颜色，默认的字体颜色是黑色，可以利用COLOR属性来改变字体的颜色。其值可以使用颜色名称或十六进制值，例如，设置文字“人杰地灵”为红色的代码为：

或者

3）FACE属性。字体标记符的FACE属性用来指定字体样式，字体样式也就是平常所说的“字体”。默认的中文字体是“宋体”，英文字体是Times New Roman。

但要注意，系统必须安装有FACE属性所指定的字体，所以在指定字体时最好使用几种字体，以增加浏览器找到匹配字体的机会。

【例2.5】字符样式设置练习，文件名为0205.htm，运行结果如图2.8所示。

<HTML>

<HEAD><TITLE>设置字体的大小颜色及样式</TITLE></HEAD>

<BODY>

<P><FONT SIZE="1"FACE="华文细黑"COLOR="#008000">染红了三湘大地</FONT></P>

<P><FONT SIZE="3">物华天宝人杰地灵</FONT></P>

<P><FONT SIZE="2"FACE"华文中宋"><FONT COLOR="#000080">风起云涌英才辈出</FONT></FONT></P>

<P><FONT SIZE="5"FACE="幼圆"COLOR="#800080"> 物华天宝人杰地灵</FONT></P>

<P><FONT SIZE="6"FACE="华文彩云"COLOR="#008080" >染红了三湘大地</FONT></P>

</BODY>

</HTML>

2.1.3 超链接与图片标记

1．超链接标记

创建一个超链接需要使用<A>…</A>标记符，A是Anchor的首字母，<A>标记符的最基本属性是HREF，用于指定链接到的文件位置。此外，<A>…</A>标记符还有其他属性，下面将分别介绍。

（1）HREF="URL"：是超链接最基本也是最常用的一个属性，用以指定超链接所连接的文件的相对或绝对位置。

（2）NAME="…"：NAME也是一个比较基本的属性，用以创建书签，指定书签名称。

（3）TARGET="…"：在框架网页中该属性很重要，用以指定目标框架的名称。

（4）ACCESSKEY="…"：指定超链接的存取按键，当浏览者按下ACCESSKEY属性所指定的按键时，网页的焦点就会移动到组件上。

（5）ET="…"：指定超链接的字元编码方式。

（6）REV="…"：从HREF指定的文件到当前文件之间的关联。

（7）TYPE="…"：指定内容类型{content type}。

（8）HREFLANG="langcode"：指定HREF属性值的语种。

（9）TABINDEX="n"：指定<A>组件在网页中的TAB键顺序值。

（1）创建超链接

根据所链接到内容的不同，常见的超链接可分为4种：指向本地网页的链接、指向其他网页的链接、指向页面中特定部分的链接（书签链接）以及连接至E-mail地址的链接。

1）指向本地网页的链接

当用户在同一台计算机内将一个页面与另一个页面进行链接时，即进行本地网页的链接，本地网页之间的链接不用指定完整的Internet地址，即绝对URL，采用文件相对URL即可。本地网页链接又可分为两种情形：链接至位于相同文件夹的文件、链接至位于不同文件夹的文件。

2）链接至位于相同文件夹的文件

如果两个页面在同一个文件目录下，可以采取相对URL方式，简单地在HREF属性中指定HTML文件名即可。如图2.9所示的目录结构，要将文件B1.htm内的文字“我要找B2”设成链接至B2.htm的超链接，可以这样写代码：

这样HTML代码就创建了一个超链接，指向当前目录下的B2.htm文件。

当用浏览器打开有超链接的网页时，包含在<A>…</A>标记符间的内容将以超链接的形式显示，并带有下划线，当鼠标移到它上面时，鼠标指针变成手形，通常颜色为蓝色，访问后变为紫色。

图2.9 本地网页链接目录结构

本地网页的链接使用相对URL，直接使用文件名而不使用完整的Internet地址，可以节省录入地址的时间。更重要的是可以使页面之间的链接工作正常，而与页面所在位置无关。当文件位于本地计算机硬盘上时，可以对链接进行测试，一切正常以后，当我们将包含所有文件夹和文件的文件夹整个移动到不同的服务器、CD-ROM或软磁盘甚至其他Internet主机的不同位置上时，文件之间的超链接仍可正确链接，无须修改代码。

3）链接至位于不同文件夹的文件

在图2-9里，总目录下有两个不同的子目录，即子目录1和子目录2，现在我们来看看处在不同目录下的文件需要互相链接的设置方式。

假设要将A1.htm内的文字“我要找B2”设成链接至B2.htm的超链接，仍可采取文件相对URL的方式来指定超链接的URL，即<A HREF="子目录2\B2.htm">我要找B2</A>，这样HTML代码就创建了一个不同目录下的超链接，指向当前总目录下的子目录2下的B2.htm文件。

4）指向其他网页的链接

如果超链接指向的内容是外部网页，则必须采用绝对URL，即应使用完整的路径名。例如，如果要将A2.html网页中的文字“我要上网易”设成链接至网易站点的超链接，则应使用以下HTML语句：

<P><A HREF="http://www.163.com">我要上网易</A></P>

5）页面的特定部分链接

不同页面之间可以相互进行链接，在同一页面的不同部分或不同页面的特定部分也可以进行链接。当网页的内容超过一定的长度，或具有很多不同的页时，还可以对同一页（或不同页）的不同部分进行链接。这种链接有点像书签的作用，例如，可以在长文档的顶部以超链接的方式显示一个目录，这些目录的内容链接到本页各自所指的具体内容上去，当想要查看不同的内容时，只要单击一下连接该内容的目录链接即可。这就像我们阅读一本书，在每一章的开头放上一个标签，然后想翻到哪儿就翻到哪儿一样，我们称页内特定部分的链接为书签链接。

建立书签超链接分两个步骤：

① 首先应为页面中需要跳转到的位置即书签的终点指定书签的名称，命名时应使用<A>…</A>标记符的NAME属性。其方法是：在需要跳转到的位置即书签终点放置具有NAME属性的<A>标记符，在标记符<A>与</A>之间不用任何文字，这样就建立好了书签的名称。通常我们称具有书签的位置为锚点。

② 设置好书签后，再到书签的起点用<A>标记符的HREF设置指向这些具有书签标记位置的链接。

例如，如果在第①步中在文件的末尾设置了名为“End”的书签，而想在文件最开始单击文字“到文件尾”就一下子转到文件的最后，可以用以下HTML语句进行链接：

这样，用户在浏览器中单击文字“到文件尾”时，将跳转到以<A NAME="#END">标记书签的页尾部分。

注意，对于锚点连接，应使用符号“#”。

如果书签的起点和终点位于相同的文件，在指定HREF的值时不需要指定文件的名称；但若起点和终点不在相同的文件，就要指定文件名，这时，上面的语句改为：

<A HREF="B2.html#End">到文件尾</A>。

【例2.6】书签链接的设置，文件名为0206.htm，运行结果如图2.10所示。

图2.10 书签链接

<HTML>

<HEAD><TITLE>书签链接的设置</TITLE></HEAD><BODY>

<LI><FONT SIZE="1"><A HREF="#Wednesday">今天星期三</A></FONT></LI>

<LI><FONT SIZE="1"><A HREF="#Thursday">今天星期四</A></FONT></LI>

<LI><FONT SIZE="1"><A HREF="#Friday">今天星期五</A></FONT></LI></OL>

<HR SIZE="1"COLOR="#000080"WIDTH="60%"ALIGN="LEFT"

STYLE="POSITION:ABSOLUTE">

<P><FONT SIZE="2"><A NAME="Wednesday"></A>星期三读者来信</FONT></P>

<P><FONT SIZE="2">我</FONT><FONT SIZE="1"> 希望你们及时更新内容希望你们及时更新内容希望你们及时更新内容希望你们及时更新内容希望你们及时更新</FONT></P>

<P><FONT SIZE="2"><A NAME="Thursday"></A>星期四读者来信</FONT></P>

<P><FONT SIZE="1">你们接受意见很快你们接受意见很快你们接受意见很快你们接受意见很快你们接受意见很快你们接受意见很快你们接受意见很快</FONT></P>

<P><FONT SIZE="2"><A NAME="Friday"></A>星期五读者来信</FONT></P>

</BODY></HTML>

6）连接至E-mail地址的超链接

除了前面3种链接方式外，大部分网页还允许进行E-mail地址的链接，也就是在链接中包含电子邮件地址信息。当浏览者单击电子邮件地址、信箱之类的链接信息时，就可以启动邮件编辑程序进行信件的发送。

在设置连接至E-mail地址的超链接时，有两点需要注意，一是要利用<A>标记符的HREF属性指定收件人的电子邮件地址；二是要在电子邮件地址前加上mailto:通讯协议。链接的文本可以是文字，也可以是图片，还可以直接将电子邮件地址进行链接。

其语法格式为：

<A HREF=mailto:yszzylc@263.net>如有任何问题，请写信给我们</A>（链接文本为文字）

<A HREF=mailto:yszzylc@263.net>yszzylc@263.net</A>（直接将E-mail地址作为链接文本）

<IMG BORDER="0" SRC="file:///e:/ex/c03/flower.jpg"WIDTH="379"HEIGHT= "492"> </A>（用图片作为链接文本）

当单击指向电子邮件的超链接后，不管是文字、图片或电子邮件地址本身，系统将自动启动邮件客户程序，而且收件人的地址已经自动填写好了，便可以发送邮件了。

2．图片标记

在网页中加入适当的图片可以使网页丰富多彩，具有更强的吸引力。可以利用<IMG>标记符在HTML文件中插入图片。<IMG>标记符常用的属性如下：

（1）SRC：设置图片的相对或绝对路径。

（2）ALT：设置图片的简单文本说明。

（3）ALIGN：设置图片的对齐方式。

（4）BORDER：设置图片的框线粗细。

（5）HEIGHT：设置图片的高度。

（6）WIDTH：设置图片的宽度。

（7）HSPACE：设置图片的水平间距。

（8）VSPACE：设置图片的垂直间距。

（9）NAME：设置图片的名称，以供Script、Applet或书签使用。

（10）USEMAP：设置热点链接所在的位置及名称。

（11）LONGDESC：设置图片的说明文字。

（12）LOWSRC：设置低分辨率图片的相对或绝对位置。

在上面这些属性中，最常用的有两个：SRC和ALT。SRC表示图像文件名，必须包含绝对路径或相对路径，图像可以是GIF、JPEG或PNG文件。ALT表示图像的简单文本说明，用于以下3种情况：一是浏览器在指定位置找不到指定的图像时显示ALT的内容；二是浏览器能显示图像但显示时间过长时先显示ALT的内容；三是不能显示图像的浏览器将显示ALT的内容。

【例2.7】在网页中加入图片，文件名为0207.htm。

<HTML>

<HEAD>

<TITLE>在网页中加入图片</TITLE>

</HEAD>

<BODY>

<P><IMG BORDER="0" SRC="flower.jpg"

WIDTH="190"HEIGHT="229"

ALT="好漂亮的荷花">

</P>

</BODY>

</HTML>

运行结果如图2.11所示。

图2.11 网页中加入图片

2.1.4 表格设计

1．表格的组成

一张基本的表格包含标题、表头、表格单元和表格数据，如表2.2所示。

表2.2 领袖故居简介

序	故居名称	所在地	联系电话
1	小名故居	韶山市	2657114
2	***故居	宁乡县	2656008
3	任弼时故居	汨罗市	3209088

2．用<TABLE>标记符定义表格

可以用<TABLE>…</TABLE>标记符创建一个表格，并在其中间加入标题和需要的数据。<TABLE>可以包含若干个可选的元素，以形成一个复杂的表格。可选的<CAPTION>元素给出了对表格的说明。其后可选的<COL>和<COLGROUP>元素规定了列宽和分组。<THEAD>和<TFOOT>分别给出了标题和注脚，<TBODY>包含了表格的主题内容。每个行组包含若干个<TR>标记符以表示单行，每个<TR>标记符又含有<TH>和<TD>标记符，分别用以表示标题单元和数据单元。表格定义的代码为：

<TABLE>

…具体表格内容…

</TABLE>

<TABLE>标记符的属性如下：

（1）BORDER="n"：以指定粗度显示表格边框。

（2）ALING="ALIGNMENT"：表格的对齐方式（LEFT，CENTER，RIGHT）。

（3）WIDTH="n"：整个表格的固定宽度（n可以为像素点或以%表示的百分比）。

（4）BGCOLOR="COLOR"：定义表格的背景色。

（5）BORDERCOLOR="COLOR"：定义表格边框的颜色。

（6）BORDERCOLORLIGHT="COLOR"：定义3 D表格边框亮色部分的颜色。

（7）BORDERCOLORDARK="COLOR"：定义3 D表格边框暗色部分的颜色。

（8）BACKGROUND="URL"：定义表格背景图像的位置。

（9）CELLSPACING="n"：设置单元格之间的空间。

（10）CELLPADDING="n"：设置单元格内容与边框之间的空间。

（11）COLS="n"：设置表格的列数。

（12）FRAME="FRAME"：定义表格外边框的显示类型。

（13）HEIGHT="n"：表格的高度（n可以为像素或百分比）。

（14）RULES="RULE"：定义表格内边框的显示类型。

例如，要创建一个高为50宽为50，边界宽度为5的居中显示的表格，可做如下定义：

<HTML>

<BODY>

</TR></BODY></TABLE>

</BODY>

</HTML>

运行结果如右图2.12所示。

图2.12 表格

3．行、表头和数据

在<TABLE>…</TABLE>标记符中，表格被指定为一行接一行的形式，而每一行的定义中包含了这一行所有单元格的定义。要定义一个表格，需从第一行逐级向下，并且按行中单元格的顺序开始定义。行、表头和数据定义的代码为：

</TR></TABLE>

（1）<TR>…</TR>标记符：在表格中新开始一行。该标记符包含下列属性：

l ALIGN="ALIGNMENT"：行入口的对齐方式（LEFT，CENTER，RIGHT）。

l VALIGN="ALIGNMENT"：表格行入口的垂直对齐方式（TOP，MIDDLE，BOTTOM，BASELINE）。

l BGCOLOR="COLOR"：定义表格的背景色（可以为名字或十六进制数）。

（2）<TH>…</TH>和<TD>…</TD>。定义表格表头的<TH>和表格数据的</TD>标记符，包含下列属性：

l ALIGN="ALIGNMENT"：行入口的对齐方式（LEFT，CENTER，RIGHT）。

l VALIGN="ALIGNMENT"：表格行入口的垂直对齐方式（TOP，MIDDLE，BOTTOM，BASELINE）。

l BGCOLOR="COLOR"：定义表格的背景色（可以为名字或十六进制数）。

l BORDERCOLOR="COLOR"：定义表格边框的颜色。

l BORDERCOLORLIGHT="COLOR"：定义3 D表格边框亮色部分的颜色。

l BORDERCOLORDARK="COLOR"：定义3 D表格边框暗色部分的颜色。

l BACKGROUND="URL"：定义表格背景图像的位置。

l ROWSPAN="n"：表格的一个单元格可以覆盖的行数。

l COLSPAN="n"：表格的一个单元格可以覆盖的列数。

l NOWRAP：不许单元格内字符回绕。

l WIDTH="n"：以像素计的单元格宽度。

l HEIGHT="n"：以像素计的单元格高度。

<TH>指明了一个单元格同时也是一个表头，<TD>标记符是表格中普通的单元格。表头通常以不同于表格单元格的方式显示，<TH>和<TD>都应该用相关的结束标记符</TH>和</TD>来结束。如果表头放在表格的顶部，表头的<TH>标记符应放在第一行内。

【例2.8】表格设计，文件名为0208.htm。

<TD>任弼时故居</TD>

</TABLE>

运行结果如图2.13所示。

图2.13 表头在顶部的表格

4．创建跨多行、多列的表元

可以在表格里创建跨度为多行或多列的单元格，它们可以防止在下一行或下一列有多个子表头的表头，以利用它在表格中的布局产生特殊的效果。

（1）跨越多列

要创建跨多列的单元格，可以在<TH>或<TD>标记符里利用COLSPAN属性，并在其后写上想要跨越的列数。

【例2.9】设置跨越多列表格，文件名为0209.htm。

<TD>任弼时诞辰</TD></TR>

</TR></TABLE>

运行结果如图2.14所示。

图2.14 跨多列的表格

（2）跨越多行

要创建跨多行的单元格，可以在<TH>或<TD>标记符里利用ROWSPAN属性，并在其后写上想要跨越的列数。

【例2.10】设置跨越多行表格，文件名为0210.htm。

<TR><TD>任弼时诞辰</TD>

</TBODY></TABLE>

运行结果如图2.15所示。

图2.15 跨多行的表格

2.1.5 表单设计

表单的用处很多，也是HTML中比较重要的部分，这类应用在网上随处可见。一般在 <FORM> 标记框架下加上一种或几种的表单输入方式及一个或以上的按键。表单的标签在HTML文档中指定了一个表单。在一个文档中可以有多个表单，但是一点必须注意表单不能嵌套。表单的基本架构如下所示。

…

</form>

其中*=GET、POST

ACTION是将要提交的表单中查询服务器的URL，如果这个属性是空的，那么当前的文档URL将被使用。

METHOD是HTTP方法，它提交表单查询数据库。使用哪个方法取决于特定的服务器是怎么工作的，这里强烈推荐使用POST，当然也可以使用GET。POST和GET具体描述如下：GET这是一个缺省的方法，它将表单内容附加给URL，就好象它们是普通查询，不能用来上传大数据。POST这个方法是将表单内容作为一个数据体而不是URL的一部分传送给服务器的。

1.输入（INPUT）标签

输入标签用于在表单中指定一个简单的输入元素。它是一个独立的标签，它旁边没有其它内容并且没有终止标签，它跟IMG的用法是一样的。输入标签具体的属性主要有三个：TYPE、VALUE、NAME。

（1）TYPE（类型）必须为以下的一种：

"text"（文本），这个是缺省的。

"password"（密码），看不到键入的字符，只有星号。

"checkbox" （复选框），是一个单一的切换按钮，有开和关两种状态。

"radio" （单选按钮），单一的切换按钮，有开和关两种状态，可以组成一个组，用于多选一的操作。

"file" （文件浏览），可以选择你想上载的文件。

"submit" （提交），它是一个按钮，将当前的表单包装到查询URL中并且将它发送到远程的服务器中。

"reset" （复位），也是一个按钮，它可以使表单中的各种输入复位到它的缺省数值。

（2）NAME 是为输入区域的一个符号名字（并不是显示的名字）。

（3）VALUE是文本或者密码区域，它可以用于指定缺省区域内容。对于"submit" （提交）and "reset"（重置），VALUE可以用于指定标志。

（4）CHECKED （不需要数值）指定复选框或者单选按钮被选中，它只适用于复选框或者单选按钮。SIZE指定输入区域字符串的大小，它只对文本区域和密码输入区域有效。如果这个没给出，缺省的设置为20。

【例2.11】设置输入标记，文件名为0211.htm。

<html>

<head>

</head>

<body>

用户名：<input type="text" name="textfield" /><br>

密码：<input type="password" name="textfield" /><br>

你感兴趣的球类有： <input type="checkbox" name="checkbox2" value="checkbox" checked="checked"/>足球

<input type="checkbox" name="checkbox3" value="checkbox" />篮球

你是： <input type="radio" name="radiobutton" value="radiobutton" checked="checked"/> 学生

<input type="radio" name="radiobutton" value="radiobutton" /> 教师

请选择文件路径： <input type="file" name="file" /> <br>

</form>

</body>

</html>

运行结果如图2.16所示。

图2.16 使用input标记页面

2.选择框（SELECT）标签

在<FORM> ... </FORM>里面有多*个SELECT标签都是允许的，它可以混合其它HTML元素（包括INPUT和TEXTAREA元素）和文本，但是不能包括FORMS。

与INPUT不同，SELECT有终止标签。在SELECT里面，有一系列的OPTION标签，每一个OPTION标签之后跟着一些文本，比如：

<OPTION>First option

<OPTION> Second option </SELECT>

NAME是为这个SELECT元素起的名字。它不能为空，必须给出具体值。

MULTIPLE：如果出现（非数值），它指定选择框可以进行多行选择。

OPTION的属性如下：

SELECTED 指定缺省状态这个OPTION被选择。如果SELECT允许多行选择，可以指定多个OPTION为SELECTED。

3.TEXTAREA（文本域）标签

TEXTAREA标签被用来放置一个多行的文本输入区域。它有以下的属性：

①NAME是文本域的名字。

②ROWS 是文本域的行数。

③COLS 是文本域的列数（即字符的水平宽度）。

TEXTAREA 域自动有滚动条。不论多*的文本都可以件入到里面。TEXTAREA元素需要一个开始和终止的标签即<TEXTAREA>和</TEXTAREA> 。

【例2.12】设置输入标记，文件名为0212.htm。

<html>

<head>

<title>无标题文档</title>

</head>

<body>

请选择:

</select>

请输入:

</body>

</html>

运行结果如图2.17所示。

图2.17 使用select和textarea标记页面

2.2 CSS编程技术

CSS（Cascading Stylesheets，层叠样式表）是一种制作网页的新技术，现在已经为大多数的浏览器所支持，成为网页设计必不可*的工具之一。使用CSS能够简化网页的格式代码，加快下载显示的速度，也减*了需要上传的代码数量，大大减*了重复劳动的工作量。

层叠样式表CSS是一种样式描述规则，利用CSS可以定义HTML中元素的显示效果，包括元素的位置、颜色、背景、边空、字体、排版格式等。CSS的基本思想是为文档中的各个标记定义出相应的一组显示样式。

定义的格式为：选择符 { 样式属性：取值；样式属性：取值；... }

下面给出一个HTML的例子，为读者增加一些感性认识。

<HTML>

<HEAD>

<STYLE>

H1{color:red; }

myclass{color:green}

H2.myclass{color:blue}

#myid{color:brown}

</STYLE></HEAD>

<BODY>

<H1>这是红色的一号标题。</H1>

<P class="myclass">"myclass"类中的正文是绿色的。</P>

<H2 class="myclass">但"myclass"类中的二号标题是蓝色的。</H2>

<P class="myclass" id="myid">以"myid"为标识的正文则是棕色的。</P>

</BODY>

</HTML>

浏览结果如图2.18所示。

图2.18 CSS 样式单

2.2.1 CSS的定义方法

CSS几经修订，现已包容了非常全面复杂的显示效果。这里只大致介绍一些CSS的基本定义方法，如果需要更详细的信息，还请查相关的书籍和参考手册。

1．选择符

选择符是指被施加样式的元素，浏览器在文件中碰到这些元素时，就使用定义好的样式来显示它们。基本的选择符包括标记、类、标识、伪类等。

（1）标记（tag）选择符。

标记可以是HTML中的标记，也可以是XML中已定义的标记。具体的定义方式是：

标记名 { 样式属性：取值；样式属性：取值；... }

在本例中为HTML中的标记<H1>定义了样式，将该标记下的文本用红色显示，因此，浏览结果中的第一行是红色的。

（2）类（class）选择符。

无论是HTML还是XML文档，有些内容是可以分类处理的，相应地，对于某一类的内容可以定义不同的样式予以显示。例子中定义了一个类“myclass”，并为它定义了绿色显示的样式，所以属于该类的元素，即第二行文本，显示出来是绿色的。

注意，定义样式时class可以与标记相关联。在样式单的第三行为属于myclass类的标记<H2>定义了蓝色显示的样式，相应地，第三行文本呈蓝色。

与标记相关的类选择符与不相关的类选择符的定义方法分别是：

标记名.类名 { 样式属性：取值；样式属性：取值；... }

另外，在对XML文档中的类定义样式时，首先该class应该在DTD中预先声明，否则会导致错误的发生。

（3）标识（id）选择符。

在HTML/XML文档中，常常要惟一地标识一个元素，即赋予它一个id标识，以便在对整个文档进行处理时能够很快地找到这个元素。CSS也可以将标识id作为选择符进行样式设定，定义的方法与类大同小异，只要把符号“.”改成“#”就行了。方法是：

标记名#标识名 { 样式属性：取值；样式属性：取值；... }

#标识名 { 样式属性：取值；样式属性：取值；... }

一般情况下，为标识定义的样式是优先于为类定义的样式的，因此例子中第四行中的文本虽然属于类“myclass”，但显示效果为棕色。

（4）伪类（pseudo-classe）选择符。

伪类选择符主要是指链接锚点的一些特性，在CSS中可以为链接锚点的不同状态赋予不同的属性。如表2.3所示。

表2.3 伪类选择符

示例	效果
A:link{ color: blue }	没访问过的链接颜色显示为蓝色
A:visited{ color: red }	访问过的链接颜色显示为红色
A:active{ color: yellow }	激活的链接颜色显示为黄色
A:hover { color: green }	鼠标滑过链接时颜色显示为绿色

可以将某个样式同时施加在多个选择符指定的不同元素上，只要将在大括号括起来的样式定义之前的各选择符之间用逗号分隔即可。如果选择符之间用空格分隔，则是用前面的父元素来约束后面的子元素。

选择符，选择符，... { 样式属性：取值；样式属性：取值；... }

2．样式属性

样式属性就是指元素的哪些属性可以在样式单中给予改变，包括字体属性、颜色属性、背景属性、文本属性、边框属性等，还有一些与页面排版、跨媒体出版相关的内容。

在定义样式时，除需指出样式所施加的元素、元素的属性之外，还要给属性赋予一个新值。根据属性的不同，属性值的选取也有所不同，主要有以下4种：长度、URL、颜色、关键字。

2.2.2. 使用CSS显示HTML文档

我们为网页添加样式表的方法有四种。

1）最简单的方法是直接添加在HTML的标识符（tag）里：

< Tag style=”properties”>网页内容< /tag>

举个例子：

< p style=”color: blue; font-size: 10pt”>CSS实例< /p>

代码说明：

用蓝色显示字体大小为10pt的“CSS实例”。尽管使用简单、显示直观，但是这种方法不怎么常用，因为这样添加无法完全发挥样式表的优势“内容结构和格式控制分别保存”。

2）添加在HTML的头信息标识符< head>里：

< head>

< style type=”text/css”>

< !--

样式表的具体内容

-->

< /style>

< /head>

type=”text/css”表示样式表采用MIME类型，帮助不支持CSS的浏览器过滤掉CSS代码，避免在浏览器面前直接以源代码的方式显示我们设置的样式表。但为了保证上述情况一定不要发生，还是有必要在样式表里加上注释标识符“< !--注释内容-->”。

3）链接样式表

同样是添加在HTML的头信息标识符< head>里：

< head>

< link rel=”stylesheet” href=”*.css” type=”text/css” media=”screen”>

< /head>

*.css是单独保存的样式表文件，其中不能包含<style>标识符，并且只能以css为后缀。

Media是可选的属性，表示使用样式表的网页将用什么媒体输出。取值范围：

l Screen（默认）：输出到电脑屏幕

l Print：输出到打印机

l TV：输出到电视机

l Projection：输出到投影仪

l Aural：输出到扬声器

l Braille：输出到凸字触觉感知设备

l Tty：输出到电传打字机

l All：输出到以上所有设备

如果要输出到多种媒体，可以用逗号分隔取值表。

Rel属性表示样式表将以何种方式与HTML文档结合。取值范围：

l Stylesheet：指定一个外部的样式表

l Alternate stylesheet：指定使用一个交互样式表

4）联合使用样式表

同样是添加在HTML的头信息标识符< head>里：

< head>

< style type=”text/css”>

< !--

@import “*.css”

其他样式表的声明

-->

< /style>

< /head>

以@import开头的联合样式表输入方法和链接样式表的方法很相似，但联合样式表输入方式更有优势。因为联合法可以在链接外部样式表的同时，针对该网页的具体情况，做出别的网页不需要的样式规则。

需要注意的是：联合法输入样式表必须以@import开头。如果同时输入多个样式表有冲突的时候，将按照第一个输入的样式表对网页排版；如果输入的样式表和网页里的样式规则冲突时，使用外部的样式表。

2.3 Dreamweaver

Dreamweaver是Macromedia公司继Flash之后推出的又一梦幻工具。Dreamweaver、Flash以及在Dreamweaver之后推出的针对专业网页图像设计的Fireworks，三者被Macromedia公司称为“梦之队”，同时被广大使用者称为网页制作三剑客。

说到Dreamweaver，我们应该了解一下网页编辑器的发展过程。随着Internet的普及，HTML技术的不断发展和完善，随之而产生了众多的网页编辑器，从网页编辑器的基本性质来看，可以分为所见即所得网页编辑器和非所见即所得网页编辑器（即源代码编辑器），两者各有千秋。

（1）所见即所得网页编辑器的缺点

所见即所得网页编辑器的优点就是其直观性，使用方便，容易上手，在所见即所得网页编辑器中进行网页制作和在Word中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点：

1）难以精确达到与浏览器完全一致的显示效果。

2）页面源代码难以控制。

如何实现两者的完美结合，既产生干净、准确的HTML代码，又具备所见即所得的高效率、直观性，一直是网页设计师的梦想。在Dreamweaver之前，FrontPage一直被认为是最好的所见即所得网页编辑器，但它同样有所见即所得工具的一些缺点，现在可以说Dreamweaver正在逐步实现网页设计师的梦想。

（2）Dreamweaver的主要特点

1）最佳的制作效率。Dreamweaver可以用最快速的方式将Fireworks、FreeHand或Photoshop等文件移至网页上。

2）网站管理。使用网站地图可以快速制作网站雏形，设计、更新和重组网页。

3）无可比拟的控制能力。Dreamweaver支持精确定位，利用图层以拖放方式进行版面布局。

4）所见即所得。在使用Dreamweaver设计动态网页时，它的所见即所得功能使你不需要通过浏览器就能预览网页。

5）模板和XML。Dreamweaver将内容与设计分开，应用于快速网页更新和团队合作网页编辑。也可以使用模板正确地导入或导出XML的内容。

6）全方位的呈现。利用Dreamweaver设计的网页，可以呈现在任何平台的热门浏览器上。当新的浏览器上市时，只要从Dreamweaver的网站下载它的描述文件，便可得到详尽的报告。

2.3.1 操作界面

1．选择工作区布局（仅适用于 Windows）

在 Windows 中首次启动 Dreamweaver 时，会出现一个对话框，您可以从中选择一种工作区布局。建议使用 MDI （多文档界面）的集成工作区

注意：在这两种布局的任何一种布局中，您都可以在工作区的任何一侧停靠面板组。

2．窗口和面板概述

起始页（未显示）使您可以打开最近使用的文档或创建新文档。在起始页中，您还可以通过产品介绍或教程了解关于Dreamweaver的更多信息。

“插入”栏包含用于将各种类型的“对象”（如图像、表格和层）插入到文档中的按钮。每个对象都是一段 HTML 代码，允许您在插入它时设置不同的属性。例如，您可以通过单击“插入”栏中的“表格”按钮插入一个表格。如果您愿意，可以不使用“插入”栏而使用“插入”菜单插入对象。

“文档”工具栏包含按钮和弹出式菜单，它们提供各种“文档”窗口视图（如“设计”视图和“代码”视图）、各种查看选项和一些常用操作（如在浏览器中预览）。“文档”窗口显示您当前创建和编辑的文档。

“属性”检查器用于查看和更改所选对象或文本的各种属性。每种对象都具有不同的属性。

面板组是分组在某个标题下面的相关面板的集合。若要展开一个面板组，请单击组名称左侧的展开箭头；若要取消停靠一个面板组，请拖动该组标题条左边缘的手柄。

“文件”面板使您可以管理您的文件和文件夹，无论它们是Dreamweaver站点的一部分还是在远程服务器上。“文件”面板还使您可以访问本地磁盘上的全部文件，非常类似于 Windows 资源管理器 (Windows) 或 Finder (Macintosh)。

Dreamweaver 提供了多种此处未说明的其他面板、检查器和窗口，例如“CSS 样式”面板和“标记检查器”。若要打开Dreamweaver面板、检查器和窗口，请使用“窗口”菜单。

具体界面如图2.19所示。

图2.19 Dreamweaver运行界面

3．菜单概述

“文件”菜单和“编辑”菜单包含“文件”菜单和“编辑”菜单的标准菜单项，例如“新建” 、“打开”、“保存”、“保存全部”、“剪切”、“复制”、“粘贴”、“撤消”和“重做”。“文件”菜单还包含各种其他命令，用于查看当前文档或对当前文档执行操作，例如“在浏览器中预览”和“打印代码”。“编辑”菜单包含选择和搜索命令，例如“选择父标签”和“查找和替换”。在Windows中，“编辑”菜单还提供对 Dreamweaver 菜单中“首选参数”的访问；在Macintosh 中，使用 Dreamweaver 菜单可以打开“首选参数”对话框。“视图”菜单使您可以看到文档的各种视图（例如“设计”视图和“代码”视图），并且可以显示和隐藏不同类型的页面元素和 Dreamweaver 工具及工具栏。

“插入”菜单提供“插入”栏的替代项，用于将对象插入您的文档。

“修改”菜单使您可以更改选定页面元素或项的属性。使用此菜单，您可以编辑标签属性，更改表格和表格元素，并且为库项和模板执行不同的操作。

“文本”菜单使您可以轻松地设置文本的格式。

“命令”菜单提供对各种命令的访问；包括一个根据您的格式首选参数设置代码格式的命令、一个创建相册的命令，以及一个使用 Macromedia Fireworks 优化图像的命令。

“站点”菜单提供用于管理站点以及上传和下载文件的菜单项。

提示：以前版本的 Dreamweaver 中的“站点”菜单的部分功能现在可以在“文件”面板的“选项”菜单中找到。

“窗口”菜单提供对Dreamweaver中的所有面板、检查器和窗口的访问。（要访问工具栏，请参见“视图”菜单。）

“帮助”菜单提供对 Dreamweaver 文档的访问，包括关于使用 Dreamweaver 以及创建Dreamweaver 扩展功能的帮助系统，还包括各种语言的参考材料。除了菜单栏菜单外，Dreamweaver 还提供多种上下文菜单，您可以利用它们方便地访问与当前选择或区域有关的有用命令。若要显示上下文菜单，右击 (Windows) 或在按住 Ctrl 键的同时单击 (Macintosh) 窗口中的某一项。

2.3.2用Dreamweaver 建立JSP站点

当定义一个本地JSP站点时，首先应该确认让Dreamweaver 在哪里为这个站点存储所有的文件。为了有效地在 Dreamweaver中工作，应该总是为创建的每个网络站点每次定义一个本地站点，可以从建立好站点的资源列表中了解该站点文件的情况。

建立与编辑站点的步骤如下：

（1）选择站点菜单下的新建站点，会弹出如图2.20所示的对话框。

（2）在弹出的对话框中，输入站点名称，这里输入“MySite”，HTTP地址填入你的服务器访问地址，笔者填的是http://localhost:9090/ 。

图2.20 站点设置对话框

（3）点击下一步，选择“是，我想使用服务器技术”，然后选择“JSP”，如图2.21所示。

]

图2.21 是否使用服务器技术

（4）点击下一步，选择“在本地进行编辑和设置”，文件存储位置为“D:\Tomcat 5.0\webapps\”，如图2.22所示。

图2.22 文件存储地址

（5）点击下一步，URL填为http://localhost:9090/，如果你要测试URL，请先启动Tomcat，如图2.23所示。

图2.23 浏览站点根目录

（6）点击下一步，选择不使用远程服务器。然后点下一步，再点完成，便完成了整个JSP站点的配置过程，如图2.24所示。

图2.24 不使用远程服务器

创建完JSP站点后，你就可以直接在Dreamweaver上点击预览来查看你写的JSP页面效果了。

这里介绍了Dreamweaver的一些常用功能，Dreamweaver还有很多优点，由于篇幅的限制这里不能一一列举。从事网页制作方面的工作，大家应该熟练掌握Dreamweaver ，希望大家在制作网页过程中举一反三。

本章小结

HTML是一种制作网页的标记语言，现将经常用到的一些标记符的基本语法总结列表，如表2-4至表2-8所示。

表2.4 HTML一般语法

标记符范例	功能说明
<PRE></PRE>	预先格式化文本
<H1></H1>	最大的标题
<H6></H6>	最小的标题
<B></B>	黑体字
<I></I>	斜体字
<TT></TT>	打印机风格的字体
<CITE></CITE>	引用，通常是斜体
<EM></EM>	强调文本（通常是斜体加黑体）
<STRONG></STRONG>	加重文本（通常是斜体加黑体）
<FONT SIZE=" "></FONT>	设置字体大小，从1到7
<FONT COLOR=" "></FONT>	设置字体的颜色，使用颜色的名字或RGB的十六进制值

表2.5 HTML的链接标志

标记符范例	功能说明
<A HREF="URL"></A>	创建超文本链接
<A HREF=mailto:EMAIL></A>	创建自动发送电子邮件的链接
<A NAME="NAME"></A>	创建位于文档内部的书签
<A HREF="#NAME"></A>	创建指向位于文档内部书签的链接

表2.6 HTML框架标志

标记符范例	功能说明
<FRAMESET></FRAMESET>	放在一个框架文档<BODY>标签之前，也可嵌在其他框架文档中
<FRAME ROWS="VALUE，VALUE">	定义一个框架内的行数，可以使用绝对像素值或高度的百分比
<FRAME COLS="VALUE，VALUE">	定义一个框架内的列数，可以使用绝对像素值或宽度的百分比
<NOFRAME></NOFRAMES>	定义在不支持框架的浏览器中显示什么提示
<FRAME SRC="URL">	规定框架内显示的HTML文档
<FRAME NAME="NAME">	命名框架或区域，使于别的框架可以指向它
<FRAME MARGINWIDTH=" ">	定义框架左右边缘的空白大小，必须大于等于1
<FRAME MARGINHEIGHT=" " >	定义框架上下边缘的空白大小，必须大于等于1
<FRAME SCROLLING=" ">	设置框架是否有滚动栏，其值可以是yes，no或auto
<FRAME NORESIZE>	禁止用户调整一个框架的大小

表2.7 HTML格式标志

标记符范例	功能说明
<P></P>	创建一个段落
<P ALIGN=" ">	将段落按左、中、右对齐
<BR>	插入一个回车换行符
<BLOCKQUOTE>	从两边缩进文本
<DL></DL>	定义列表
<DT>	放在每个定义术语词前
<DD>	放在每个定义之前
<OL></OL>	创建一个标有数字的列表
<UL></UL>	创建一个标有圆点的列表，定义一个框架内的行数
<LI>	放在每个列表项之前，若在<OL></OL>之间则每个列表项加上一个数字，若在<UL></UL>之间则每个列表项加上一个圆点
<DIV ALIGN=" "></DIV>	用于排版大块的HTML段落，也用于格式化表

表2.8 HTML表单标志

标记符范例	功能说明
<FORM></FORM>	创建表单
<SELECT MULTIPLE NAME="NAME" SIZE=" "></SELECT>	创建滚动菜单，SIZE设置在需要滚动前可以看到的表单项数目
<OPTION>	设置每个表单项的内容
<SELECT NAME="NAME"</SELECT>	创建下拉菜单
<TEXTAREA NAME="NAME" COLS=40 ROWS=8></TEXTAREA>	创建一个文本框区域，列的数目设置宽度，行的数目设置高度
<INPUT TYPE="CHECKBOX" NAME="NAME">	创建一个复选框，文字在标签后面
<INPUT TYPE="RADIO" NAME="NAME" VALUE=" ">	创建一个单选按钮，文字在标志后面
<INPUT TYPE=TEXT NAME="FOO"SIZE=20>	创建一个单行文本输入区域，SIZE设置字符串宽度
<INPUT TYPE="SUBMIT" VALUE="NAME">	创建提交按钮
<INPUT TYPE="IMAGE" BORDER=0 NAME="NAME" SRC="NAME.GIF">	创建一个使用图像的提交按钮
<INPUT TYPE="RESET">	创建重置按钮

样式表CSS在网页中占着极重要的地位，它的使用一直是热门讨论的话题。CSS是Cascading Style Sheet的简写，译为“层叠样式表单”。CSS几乎可以定义所有的网页元素，CSS虽然功能强大，但平时我们用到的是很*的，最常见的有：定义字体大小（用CSS定义的字体大小不会浏览器的字体设置而改变）、去掉超链下划线、超链接变色等等。

Dreamweaver有很强的网页设计功能，不仅可以使网页的设计所见所得，而且对一个站点的管理也更加规范。

课后习题

一．填空题

1．HTML是的缩写，中文意思是。

2．HTML网页文件的后缀名为或。

3．在HTML语言中，表单标记为，表单输入标记为，多行文本输入标记为。

4．E-mail地址的超链接格式为。

5．表单中method方法有两种，分别是和。

6．CSS是的缩写，中文意思是。

7．被成为“网页制作三剑客”的三种工具分别是、、。

二．选择题

1．<HTML>是用来标记网页的（）

A 开始 B 标头

C 标题 D 正文

2．ALIGN属性用来标记（）

A样式表 B 对齐方式

C 段落 D 换行

3．<A>用来标记（）

A表格 B 图片

C 文件夹 D 超链接

4．当复选框增加checked属性时表示（）

A 处于选择状态 B 处于取消状态

C 可被选择 D 不可被选择

5．以下哪种不属于表单标签（）

A INPUT B SELECT

C TABLE D TEXTAREA

6．下列哪种不是Dreamweaver的特性

A 大大减*了重复劳动的工作量 B最佳的制作效率

C网站管理 D 无可比拟的控制能力

三．问答题

1．<P>与<BR>有何区别？

2．<table>与<form>有何区别？

3．表单中method方法有两种有何区别？

4．使用CSS显示HTML文档的方法有哪些？请实际操作来区别。

四．操作题

1．利用定义表格的方法，设计一个学生学习成绩表的网页。

2．利用Dreamweaver进行页面版面设计，学会利用Dreamweaver完成图像、文字、动画的插入，以及改变相应的属性值。

3．利用Dreamweaver完成Flash文字和Flash按钮的插入。

4．试使用Dreamweaver制作并调试一个“2008北京奥运会”的网页。

5．试用Dreamweaver设计一个个人主页，展示自己的魅力。

刷新页面返回顶部

被遗忘的博客号角声在远方又吹响/何时回故乡/又怎么回故乡/曾经的你现在又怎样/是谁的新娘/为谁做衣裳/ <br/>火跳动着绝望/谁在低声吟唱/说遗忘者的哀伤 /用战斗证明希望