【资料总结】html开发小实例

第1章 1

HTML的基本标签 1

第2章 25

表格基础 25

第3章 53

表单和框架 53

第4章 77

CSS样式表 77

第5章 104

使用Dreamweaver制作网页 104

第6章 134

网站设计和页面布局技术（一） 134

第7章 156

网站设计和页面布局技术（二） 156

Lab Guide 183

HTML的基本标签 184

第1章

HTML的基本标签

本章工作任务

制制作图文并茂的“广告“页面

本章技能目标

会使用HTML的基本结构创建网页

会使用文本相关标签实现文字修饰和布局

会使用图像相关标签实现图文并茂的页面

会使用超链接相关标签实现页面的跳转

² 本章简介

在当今社会中，网络已成为人们生活的一部分，网络提供的服务主要是以网页的形式展现出来。HTML是创建网页的基础语言。如果不了解HTML（超文本标记语言），就谈不上网页设计。HTML也是WEB用于创建和识别文档的标准语言。这些标记都是通过使用标签来完成的，标签可指定网页的浏览器中的显示方式。本章就来介绍HTML的基本结构。文本相关标签，图像<IMG>标签，页面链接<A> 标签，滚动<MARQUEE>标签等，使大家对HTML的基本标签有深入的了解，为后面的学习打下坚实的基础，其中重点是文本，图像，链接标签的应用，难点是各种标签的综合应用。

² 本章单词

请在预习前完成下列单词：

已学单词复习：

本章新单词：

1.head: ________________ 2.title_______________________

3.body:_______________ 4.font: ______________________

5.align: ______________ 6.image: ______________________

7.marquee: _________________ 8.scrolldelay: ___________________

9.direction: ____________

1.1 HTML文件的基本结构

完整的HTML文件至少包括<HTML>标签、<TITLE>标签和<BODY>标签，并且这些标签都是成对出现的，并且这些标签都是成对出现的，开头标签为<>，结束标签为</>,在这两个标签之间添加内容。通过这些标签中的相关属性可以设置页面的背景色，背景图像等。

1.1.1 为什么要使用表格

HTML文件主要由3部分组成。

Ø HTML部分：HTML部分以<HTML>标签开始，以</HTML>标签结束。

<HTML>

……

</HTML>

Ø 头部：头部以<HEAD>标签开始，以</HEAD>标签结束。这部分包括显示在网页标题栏中的标题和其他在网页中不显示的信息。标题包含在<TITLE>和</TITLE>标签之间。

<HEAD>

<HEAD>

Ø 主体部分：主体部分包含在网页中显示的文本，图像和链接。主体部分以<BODY>标签结束。

<BODY>

……

</BODY>

HTML文档的结构：

1.1.2 使用记事本创建网页

创建一个HTML文档，需要两个工具：一个是文本编辑器（如记事本、UE等），一个是用户查看HTML文档效果的WEB浏览器（如Internet Explorer）。下面我们就使用Windows自带的记事本来快速编写第一个HTML文件效果。

（1）单击“开始“→”程序“→”附件“→”记事本“→”菜单“

（2）在记事本中输入如图1.2所示的HTML代码，输入代码后的记事本如图1.2所示。

（3）单击记事本菜单中的“文件→保存”菜单，弹出“另存为”对话框，在对话框中选择存盘的文件夹，然后在“保存类型”下拉列表框中选择“所有文件”选项，在“编码”下列框中选择的“ANSI”选项，保存文件名为my_firstPage.html,如图1.3所示，最后单击“保存”按钮。

（4）回到存盘的文件夹，使用WEB浏览器打开my_firstPage.html文件，可以看到最终的页面效果，如图1.4所示。

图1.3 “另存为”对话框图1.4查看效果

1.1.3 使用记事本创建网页

<META>标签出现在网页的标题部分。这是一个特殊的HTML标签，提供相关网页的信息，有时候在网上冲浪，发现有些网页中的文字是乱码，这是怎么回事呢？其实就是<META>标签中charset属性没有正确地设置编码语系。如果我们正确地设置了网页语言编码方式，浏览器就会正确地显示网页中的内容，而不会出现乱码。要将gb2312指定为，默认字符集类型，则使用以下<META>标签：

<HEAD>

</HEAD>

其中charset用于设置网页的编码语序，简体中文网页使用charset=gb2312,繁体中文使用charset=big5,英文网页建议使用iso-8859-1,或者不设置编码也可。根据自己所在的国家或页面主体使用的语言类型所对应的编码语系来正确地设置charset,这样可以避免网页中的乱码。像在中国建议把charset设置为”gb2312”。

1.1.4 页面背景色或背景图像

在默认情况下，使用web浏览器浏览网页时，其背景色为白色，如果我想把背景色换成好看的颜色或图片怎么办？其实很简单，使用bgcolor属性可以改变网页的背景色，使用backgroud属性可以把网页的背景设计为图片。

语法

设置网页的背景色或背景图像：

<body bgcolor=”#FFCCFF” background=”back_image.GIF”>///背景颜色

HELLO WORLD！

<body>

如示例1所示为设置网页背景的代码。

示例1

<HTML>

<HEAD>

<TITLE>我的第一个网页 </TITLE>

</HEAD>

<BODY>

Hello World!

</BODY>

</HTML>

示例1在浏览器中浏览效果如图1.5所示。若把示例1中<BODY bgcolor=”#FFCCFF”>这一部分改为<BODY backgroud=”back_image.GIF”>之后，在浏览器中浏览效果如图1.6所示。

图1.5 设置网页的背景色图1.6 设置网页的背景图像

1.2 使用记事本创建网页

文本是网页不可缺少的元素之一，是网页发布信息所使用的主要形式。为了让网页中的文本看上去编排有序，整齐美观，错落有序，我们就要设置文本的大小、颜色、字体类型以及换行换段等。

1.2 字体字号相关标题

1、标题标签

标题能分为分隔大段文字，概括下文内容，根据逻辑结构安排信息。标题具有吸引读者的提示作用，而且表明了文章的内容，读者会根据标题据顶是否阅读此文章。标题的重要性由此可见一斑。

HTML提供了六级标题，<H1>为最大，<H6>为最小。用户只需定义从H1到H6中的一种大小，浏览器将负责显示过程。

示例2显示了指定各级标题的HTML文件。

示例2

<HTML>

<HEAD>

<TITLE>不同等级标题标签对比</TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

示例2在浏览器中预览效果如图1.7所示。

图1.7 不同级别的标题输出结果

2.<FONT>标签

<FONT>标签用于控制网页上下文本的显示外观。文本大小，字体类型和颜色等属性都可以使用<FONT>标签指定。

语法

< FONT SIZE=’’+2” COLOR=”RED FACE=”隶书”>

文本内容

</FONT>

其中,size属性用来设置字体大小，可以为字体指定的大小范围1~7.最大为7，最小为1.也可以使用一个默认字体大小，然后相对于默认大小指定后续字体的大小例如：size默认大小为3，则size=+4将使大小增加到7，size=-1将使大小减少到2。Color属性用于指定字体的颜色，可以指定颜色名称或十六进制值。Face属性用于指定字体的类型。

2.特殊符号

某些字符在HTML中具有特殊意义，如小于号（<）即定义HTML标签的开始。要在浏览器中显示这些特殊字符，就必须在HTML文档中使用字符实体。

字符实体由3个部分组成：&号，实体名和分号；。

例如，要在HTML文档中显示小于号，则使用<；

表1-1显示的字符实体用于显示HTML文档中的特殊字符。

表1-1用于显示HTML文档中的特殊字符

特殊字符	转义码	示例
空格		<p>移动 \| 100\| 联通\| 50</p>
大于(>)	>	If A >B Then <Br> A=A+1
小于(<)	<	If A<；B Then <BR> A=A+1
引号(“”)	"	<P>"淘宝网"</ P >
版权号(© )	©	<P>Copyright;淘宝网©2007</ P >

示例3

<HTML>

<HEAD>

<TITLE>文本相关标记的应用</TITLE>

</HEAD>

<BODY>

手机充值、IP卡/电话卡 </FONT><BR />

移动 | 100 | 联通 | 50</P>

</BODY>

</HTML>

示例3在浏览器中预览效果如图1.8所示。

图1.8 FONT标签和特殊字符应用效果

1.2.2 行的控制相关标签

1．段落标签<Br>

如果是在写一篇文章，则要将这些内容分组成一系列段落。目的是要将这些逻辑思想组合一起，并对其内容应用某些格式和布局。在HTML文档中，可以将文本内容组合为多个段落。段落标记</P>用于标记段落的开始，段落结束标记</P>是可选的，为了养成良好的编程习惯，建议不要省略段落结束标记</P>.

你还可以通过段落的align属性，设置段落的对齐方式，如左对齐、居中、右对齐，如示例4所示，输出结果如图1.9所示。

2.换行标签<BR>

<BR>标签在用户要结束一行但又不想开始一个新的段落时使用。只要在文本中放入<BR>标签，就会强制换行。

示例4

<HTML>

<HEAD>

<TITLE>文本相关标记的应用</TITLE>

</HEAD>

<BODY>

手机充值、IP卡/电话卡 </FONT><BR>

移动 | 100 | 联通 | 50</P>

<P align="center">淘宝集市欢迎您！</P>

<P align="left">淘宝网首届翠友会！<BR>

想做最闪亮的mm吗 <BR>

千余中奖机会有你吗 <BR>

淘宝入选平安网站

</P>

</BODY>

</HTML>

示例4在浏览器中预览效果如图1.9所示。

图1.9 换行换段标签应用效果

1.3 图像标签

文本使用网页的内容得到充实，那图像使用网页的内容更加丰富多彩。使用图像不仅能够使用网页更加美观、大方、整洁、形象和生动，而且能给网页增添无限生机，从而吸引更多的浏览者。因此图像在网页中的作用是举足轻重的。作为一个网页设计者，掌握好网页中的图像的应用尤为重要。下面我们就开始介绍常用的图片格式，以及如何在网页中实现图文并茂的页面。

1.3.1常见的图片格式

1.JPG

JPG(JPGE)格式图像是在Internet上被广泛支持的图像格式，它是联合图像专家组文本格式(Joint Photographic Experts Group)的英文缩写。JPG格式采用的是有损压缩，会造成图像画面的失真，不过压缩之后的体积很小，而且比较清晰，所以比较适合在网页中应用。

此格式最合适用于摄影或连续色调图像的高级格式，这是因为JPG文件可以包含数百万中颜色。随着JPG文件品质的提供，文件的大小和下载事件会随之增加。通常可以通过压缩JPG文件在图像品质和问价大小之间达到良好的平衡。

制作JPG文件的软件很多，比较常见的有PHOTOSHOP、HYPERSNAP等。

2.GIF

GIF图像是网页中使用最广泛，最普通的一种格式，它是图像交换格式(Graphics Interchange Format)的英文缩写。GIF文件的众多特点恰恰适应了Internet的需要，于是成了Internet上最流行的图形格式，它的出现成为了Internet注入了一股新鲜的活力。GIF格式图像采用的是无损压缩，由于只支持256色，所以GIF格式图像体积很小。支持透明色，使得GIF在网页的背景和一些多层特效的显示上用的非常多，还支持帧动画，这是它最突出的一个特点。要设计GIF动画，首先要用图像处理软件做好GIF动画中的每一幅画面，然后再用专门的GIF动画软件把这些静止的画面连在一起，在定好帧与帧之间的时间间隔，最后保存成GIF格式就可以了。

制作GIF文件的软件也很多，比较常见的有PHOTOSHOP、GIF Contruts SET等。

3，SWF

SWF动画是网页中应用非常广泛的一种多媒体图像动画，这中格式的动画图像能够用比较小的体积来表现丰富的多媒体形式。在图像的传输方面，可以边传输边观看，因此特别适合网络存数，特别在传输速率不佳的情况下，能够取得较好的效果。事实也证明了这一点，SWF如今已被大量应用于WEB网页进行多媒体播放与交互设计。此外，SWF动画是基于矢量技术制作的，因此不管将画面放大多少倍，画面不会因此而有任何失真。综上所述，SWF格式作品成为以高清晰的画质和小巧的体积，受到了越来越多页面设计者的青睐，也越来越成为网页动画和网页图片设计制作的主流，目前已成为网页上动画的事实标准。SWF文件的缺点就是制作起来非常耗时耗力。

制作SWF文件的软件也很多，比较常见的有Flash、SWFText等。

4，BWP

BWP图像是在WINDOWS操作系统中使用得比较多，它是“位图”的英文缩写。BWP图像可以用任何颜色深度（从黑白到24为颜色）存储单个光栅图像。BWP图像文件格式与其他Microsoft Windows程序兼容。它不支持文件压缩，也不适用于WEB页。从总体上看，BMP图像格式的缺点超过它的有点，为了保证照片图像的质量，请使用JPG文件。BMP文件使用于WINDOWS中的墙纸。BMP的优点支持1位到24位颜色深度，并且与现有WINDOWS程序广泛兼容。BMP的缺点是不支持压缩，这会造成文件非常大。

制作BMP文件的软件很多，比较常见的有PHOTOSHOP、WINDOWS自带的“图画”软件等。

1.3.2图像的基本语法

<IMG>标签用于在HTML文档中插入图像，该标签可以放在要显示图像的位置。<IMG>标签不包含任何内容，它使用src属性指定图像文件所在的路径。

语法

其中，src参数用来设置图像文件所在的位置，width和height属性来指定图像的宽度和高度,alt属性有两个作用：第一个是在网页中，如果图像没有被下载，在图像位置上出现指定文字；第二个是在网页中，如果图片下载完，将鼠标放在该图像上，在鼠标旁边提示的文字。

示例5

<HTML>

<HEAD>

<TITLE>为图像添加提示性文字</TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

示例5在浏览器中预览效果如图1.10所示，把鼠标只想图像上方，稍等片刻，稍等片刻就会提示文字“明星演唱会开幕”。

图1.10 给图像添加指示文字效果

1.3.3图像的基本语法

<IMG>标签的align属性可用于调整图像相对于周围文字的对齐方式。Align属性可取下面的值：top、bottom、left或right.

语法

其中，align=”top”表示图片的顶部和当前行文字顶端对齐，align=”bottom”表示图片的底部和当前行文字底部对齐，align=”middle”表示图片的中部和当前文字中部对齐，align=”left”表示图片左对齐，align=”right”表示图片右对齐。

示例6

<HTML>

<HEAD>

<TITLE>图像与文本的对齐方式</TITLE>

</HEAD>

<BODY>

<IMG align="middle" src="images/adv_2.jpg" width="180" height="95" border="0" />请点击广告进入明星专区<BR>

<IMG align="top" src="images/adv_2.jpg" width="180" height="95" border="0" />请点击广告进入明星专区

</BODY>

</HTML>

示例6在浏览器中预览效果如图1.11所示。

图1.11 图像与文本的对齐方式

1.4文字布局

文字布局就是使用网页中的文字合理分隔，排列有序或按设计者想要的格式去布局，对于这些要求，在HTML语言中，可以使用<HR>标签对文字内容进行分隔，使用列表对文本内容进行整齐排列，使用<PRE>标签让指定的文本内容以指定的格式在网页中显示。下面就分别介绍不同的标签对文本内容进行布局。

1.4.1图像的基本语法

<HR>（水平线）标签用于在网页上绘制水平线的高度，以像素为单位：color可以来设置水平线的颜色width用于改变水平线的高度，可以以像素为单位，也可以是窗口上的百分比。

示例7

<HTML>

<HEAD>

<TITLE>水平分隔线</TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

示例7在浏览器中预览效果如图1.12所示。

图1.12 水平线效果

1.4.2如何使用列表

在HTML文档中可创建以下不同类型的列表：

Ø 无序列表

Ø 有序列表

1. 无序列表

有序列表就是“项目列表”。列表项前面带有项目符号，包含在无序列表标签<UL>…</UL>内。列表中每项都用标签<LI>,其中LI表示列表项，结束标签</LI>为可选项。

语法

<LI></LI>……

</UL>

其中，type属性决定了列表项开始的符号，它可以取disc（默认值，表示实心圆点）、

Circle（空心圆环）、square(空心正方形)这3个值

2. 有序列表

有序列表包含在<OL>…</OL>标签内。有序列表也显示列表项，区别在于有序列表的列表项以自动生成的顺序显示。

语法

<LI>收电子邮件</LI>

……

</OL>

其中，type属性决定有序列表的序号类型，它可以取如下5个值：1、a、A、1。分别表示数字序列，大写英文字母序列、写英文字母序列、小写罗马数字序列。

示例8

<HTML>

<HEAD>

<TITLE>无序列表和编号</TITLE>

</HEAD>

<BODY>

<LI>收电子邮件</LI>

</OL>

新人上路指南

<LI>如何激活会员名？ </LI>

<LI>如何注册淘宝会员？ </LI>

<LI>注册时密码设置有什么要求？ </LI>

<LI>支付宝认证</LI>

</UL>

</BODY>

</HTML>

图 1.13 有序列表和无序列表效果

1.4.3如何使用列表

<PRE>标签用于显示预先在HTML中已定义好格式的文本。文档显示在浏览器中时，会遵循已在HTML源文档中定义的格式。

示例9

<HTML>

<HEAD>

<TITLE>显示预先已定义好格式的文本</TITLE>

</HEAD>

<BODY>

腾讯-QQ币/QQ幻想-30元卡

一口价：26.45元

运　费：卖家承担运费

剩余时间：5天

宝贝类型：全新

卖主声明：货到付款，可试用10天！

</PRE>

</BODY>

</HTML>

<PRE>标签的效果如图1.14所示。

图1.14 <PRE>标签的效果

1.5页面链接<A>标签

</A>标签用于创建超级链接（简称为超链接），它是到另一个文档或文件(图形、音频、视频)甚至在同一个文档的另一部分的链接。当用户单击超级链接时，就会进入链接中指定的URL。超级链接可链接到；同一个文档的特定部分，其他文档，其他文件——图像、音频、视频剪切，其他站点等。

要创建超级链接，应指定以下两个组件：

（1）要链接文件的完整地址或URL。

（2）将提供链接的热点。热点可以是文本行，也可以是图像。当用户单击热点时，浏览器将读取URL中指定的地址并“跳”到新的位置。

锚记</A>标签用于标识充当HTML文档中文本或图像的超级连接。Href（超文本引用）参数用于指定要连接文档的地址或URL。

1.5.1页面链接<A>标签

链接到其他页面，就是单击此超级链接，打开一个新的HTML文档。

语法

其中，href属性用来指定要链接的地址，“【免费注册】”是热点文本。

<HTML>

<HEAD>

<TITLE>链接到其他页面</TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

示例10在浏览器中预览效果如图1.15所示，单击“【免费注册】”超级链接，用户就打开如图1.16所示的页面，即register.html文档，如图1.16所示。

图1.15 链接到其他页面图1.16 单击【免费注册】打开的页面

在示例10中，3个文件处在不同目录下，因此href参数可提供链接到其他目录中的文件。应指定绝对或相对路径名。

绝对路径名：指定从根目录到文件的完整路径。例如，要指向文件register.html，绝对路径名为D:\register\register.html.

相对路径，指定相对与当前文件夹的文件位置。假设doc1.html和doc2.html在同一文件夹下，则从doc1.html到doc2.html的相对路径为：<A href=”doc2.html”>文档2的详细资料</A>.

1.5.2链接到本页面

如果一个页面的内容过多，导致页面过长，用户需要不停地滚动条来查看文档中的内容，为了方便用户阅读过长的页面内容，可以使用锚点链接。

命名锚记也称为锚点，<A>标签的name属性用于创建，锚点。

为了达到这种跳转效果，请在href参数中使用如下标记。

超级链接名称前面的符号“#”告诉浏览器当前链接是文档的一个锚点。由于在符号“#”前未指定任何文档，浏览器由此知道该链接位于同一文档内。示例11演示了如何链接到同一文档的各个部分。

示例9

<HEAD>

<TITLE>淘宝网主页</TITLE>

</HEAD>

<IMG src="images/logo.gif" width="240" height="31">[免费注册]登录]

<H1 align="center">您好，欢迎来淘宝！ </H1>

手机充值、IP卡/电话卡 </FONT><BR />

移动 | 50 | 100 | 联通 | 50 | 100 </P>

<P>淘宝集市欢迎您！</P>

<P>淘宝网首届翠友会！<BR />

想做最闪亮的mm吗 <BR />

千余中奖机会有你吗 <BR />

淘宝入选平安网站

</P>

<P><IMG src="images/adv_2.jpg" width="360" height="190" border="0" align="middle" />请点击广告进入明星专区</P>

<OL >

<LI> 收电子邮件</LI>

</OL>

<A name="helpme">新人上路指南</A>

<LI>如何激活会员名？ </LI>

<LI>如何注册淘宝会员？ </LI>

<LI>注册时密码设置有什么要求？ </LI>

<LI>支付宝认证</LI>

</UL>

</BODY>

</HTML>

示例11在浏览器中预览效果如图1.17所示。

图1.17 锚点链接

单击“【新人上路】”超级链接，就会在同一页面中出现如图1.18所示的窗口。

图1.18 锚点链接到的位置

1.5.3电子邮件链接

用户可以从网页发送电子邮件。要做到这一点，可以链接标签中插入“mailto:邮箱地址”

例如：<A href=”mailto:taobaoWebMaster@taobao.com”>站点信箱</A>

示例12

<HTML>

<HEAD>

<TITLE>淘宝网主页</TITLE>

</HEAD>

<IMG src="images/logo.gif" width="240" height="31">[免费注册]登录]

</BODY>

</HTML>

示例12在浏览器中预览效果如图1.19所示。

图1.19 邮件链接

单击“站点信箱”邮件链接，将打开用户的电子邮件程序，并且“收件人：”文本中的电子邮件地址已经指定为taobaoWebMaster@taobao.com,如图1.20所示。

图1.20 单击“站长邮箱”连接后打开的界面

1.6滚动<MARQUEE>标签

使用<MARQUEE>标签不仅可以移动文字，还可以移动图片。

语法

滚动文字或图像

</MARQUEE>

其中，scrolldelay，表示滚动延迟时间，默认值为90ms。Direction：表示滚动的方向默认为从左到右。可以取以下4个值:up、down、left、right，使用direction属性来设置文字或图像的滚动方向。

示例13

<HTML>

<HEAD>

</HEAD>

<BODY>

<A href="#"><IMG src="images/scroll/1.gif" border="0" align="middle"> Avon化妆品</A><BR>

</MARQUEE>

</BODY>

</HTML>

示例13在浏览器中预览效果如图1.21所示。

图1.21 文字和图片滚动效果

² 本章总结

Ø HTML文档是包含标记标签的文本文件，这些标签告诉浏览器如何显示页面。

Ø <HTML>标签不区分大小写。

Ø <META>标签放置在网页的标题处，以提供关于页面的信息。如设置网页编码语系等。

Ø <FONT>标签可改变字体大小、颜色和字体类型，<P>标签和<BR>分别实现换行、换段。

Ø <IMG>标签可以实现在网页中插入图片，并可通过align属性来调整图像相对于周围文本的对齐方式。

Ø 锚记<A>标签用于标识充当HTML文档中文本或图像的超级链接。Href参数指定要链接的文本地址。

Ø <MARQUEE>标签用于在网页中实现文字、图片、表格等对象的滚动效果。

一、选择题

1.下列代码片段用于（）

...<BODY background=”back_image.GIF”>...

A.在页面左边的背景中显示图像”back_image.GIF”。

B.将“back_image.GIF”图像平铺填充到整个页面的背景中。

C.在页面顶部显示图像”back_iamge.GIF”

D.在页面背景的中间显示图像”back_image.GIF”

2以下HTML代码中，说法（）是正确的。

<HTML>

<HEAD>

</HEAD>

<BODY>

<P>

<PRE>

<FONT>

人来人往

男女老幼

享受在时装街购物的乐趣

</FONT>

</PRE>

</BODY>

</HTML>

A．<P>标签没有以</P>标签结束。

B．<BR>标签没有以</BR>标签结束。

C. <TITLE>元素没有以</TITLE>标签结束。

D．<FONT>标签不能与<PRE>标签一起使用。

3.在网页中最为常见的两种图像格式是（）

A.JPG和GIF

B.JPG和PSD

C.GIF和BMP

D.BMP和SWF

4.关于下列代码片段的说法中，（）是正确性。

…<HR size=”5” color=”#0000FF” width=”50%”>…

A.size是水平线长度。

B.size是水平先的宽度。

C.width是水平线的宽度。

D.width是水平线的宽度。

二简答题

1.HTML文档的基本结构由那些部分组成？

2.使用记事本创建网页有那几个主要步骤。

3.请用HTML实现如图1.22所示的页面。

图1.22 图文排列

提示

使用到<pre>预格式化标签，<IMG>标签及相关属性，还有<FONT>和<A>标签。

3. 请用HTML实现如图1.23所示页面，并且页面中的图片是从左到右匀速移动。

图1.23 图片移动效果

提示

使用<MARQUEE>标签移动多幅图片，移动的方向默认方向，移动速度是通过scrolldelay属性来设置的。

第2章

表格基础

本章工作任务

制作“宝贝分类”页面

制作“公告栏”页面

本章技能目标

会使用表格的基本结构实现简单表格

会使用表格相关标签实现跨行、跨列的复杂表格

会使用表格相关设置进行美化修饰

² 本章简介

上一章已经介绍了HTML基本标签，既介绍了如何使用HTML文件的基本结构创建网页，又介绍了文本相关标签实现文字修饰和布局，还讲解了图象相关标签如何实现图文并茂的页面，超链接相关标签如何实现页面间的跳转。

本章开始讲解表格的基础，其中重点是表格的基本结构，难点是如何创建跨多行跨多列的表格。为了使我们制作的页面更精致、表格更美观，我们还要研究表格布局，以及如何对表格进行美化修饰。

² 本章单词

请在预习前完成下列单词：

已学单词复习：

1.html :_________________ 2.title: ________________________

3.body: _________________

本章新单词：

1.table: ________________ 2.width _______________________

3.height :_______________ 4.border: ______________________

5.rowspan: ______________ 6.colspan: ______________________

7.align: _________________ 8.cellpadding: ___________________

9.cellspacing: ____________ 10.background: ___________________

2.1 表格基础

表格是网页制作中使用最多的技术之一，它通常用来显示分类数据，在网页中表格更多地用在网页布局和定位上。通过使用表格相关属性，可实现对网页中的文字和图片进行合理的布局和定位，使得网页在形式上丰富多彩，在组织上井然有序。真是表格在手，一清二楚。

在HTML语言中，表格至少由<TABLE>标签、<TR>标签和<TD>标签这3对标签组成，否则，就不能成为表格。<TABLE>…</TABLE>标签中间将包括所有表格元素，表格元素主要有行、列、单元格等。了解表格的基本结构之后，我们就可以创建一个简单的表格。

2.1.1 为什么要使用表格

当我们在网上冲浪时，会看到论坛页面（如图2.1所示）、门户网站网页（如图2.2所示）、购物网站页面（如图2.3所示）等。这些图文并茂、绚丽多姿、整齐有序的页面效果是如何实现的呢？其实很简单，就是用表格来实现的，既然表格有如此广泛的应用和如此强大的功能，下面我们就抓紧时间开始对表格的学习吧。

图2.1 论坛页面

图2.2 门户网站页面

图2.3 购物网站页面

2.1.2 表格的基本结构

看到这么多使用表格进行布局、定位的精美页面，你是不是很想体验一把呢？不用急，万丈高楼平地起，先让我们来看一看表格的最基本结构。表格是由指定数目的行和列组成，如图2.4所示。文字或图片按照相应的列或行进行分类和显示。

表格列

表格行

图2.4表格的布局

可以使用有行和列的表格格式来显示数据。表格可在一定程度上控制文本和图像在网页中的位置，而不是完全由浏览器对此进行控制。

在HTML中。用于创建表格的标签如下：

1. <TABLE>

<TABLE>…</TABLE>标签用于在HTML文档中创建表格。它包含表名和表格本身内容的代码。表格的基本单元是单元格，用<TD>…</TD>标签定义。

2. <TR>

表格行用<TR>标签定义，由单元格构成。多个行结合在一起就构成一个表格，这反映在用于创建表格的HTML语法中。表格的每一行都用<TR>标签表示，并用相应的</TR>标签结束。

3. <TD>

表格的每一行又有若干表格单元，用<TD>…</TD>标签来表示。TD是“表格数据(Table Data)”的英文缩写。<TD>标签定义一个列，嵌套于<TR>标签内。

Border属性是最常用属性，可用于定义表格的单元格和结构。该属性指定边框的厚度，如果其值设置为零(0)，则不显示边框。

2.1.3 如何创建表格

所有表格都包括3个基本标签，即表格标签<TABLE>…</TABLE>、行标签<TR>…</TR>和单元格标签<TD>…</TD>。可以说，在页面中如果要创建一个完整的表格，至少要包含这3对标签。

语法

创建表格的基本语法

<TABLE>

<TR>

<TD>单元格内容</TD>

</TR>

<TABLE>

创建表格时，一般情况下分3步：

第一步：创建表格标签<TABLE>…</TABLE>。

第二步：在表格标签<TABLE>…</TABLE>里创建行标签<TR>…</TR>，可以有多行。

第三步：在行标签<TR>…</TR>里创建单元格标签<TD>…</TD>，可以有多个单元格。

如示例1所示为在页面中添加一个2行3列的表格的代码。

示例1

<HTML>

<HEAD>

</HEAD>

<BODY>

<TR>

</TR>

<TR>

</TR>

</TABLE>

</BODY>

</HTML>

运行示例1代码，其效果如图2.5所示。

图2.5 基本表格

2.2 跨多行跨多列的表格

图2.5所示的表格比较简单，如果我们要插入一张图片，并且要占4个单元的空间，那怎么办？这就是要用到跨多行跨多列的表格，本节就开始讲解如何实现把多个单元格合并成一个单元格。

2.2.1 什么是跨多行跨多列的表格

有时可能要将多行或多列合并成一个单元格，即可以创建跨多列的行，或创建跨多行的列。Colspan属性用于创建跨多列的单元格，rowspan属性用于创建跨多行的单元格。要实现如图2.6所示的跨多行跨多列表格，怎么办？不急，我们先来看看跨多列的表格是如何实现的。

图2.6 跨多行多列表格

2.2.2 跨多列的表格

跨多列的表格是单元格在水平方向上跨多列。

语法

创建跨多列的表格基本语法：

<TABLE>

<TR>

<TD colspan=”所跨的列数”> 单元格内容 < /TD>

</TR>

</TABLE>

下面通过示例2来说明colspan这一属性的用法。

示例2

<HTML>

<HEAD>

<TITLE>跨多列的表格</TITLE>

</HEAD>

<BODY>

<TR>

<TD colspan=”3”>学生成绩表</TD>

</TR>

<TR>

</TR>

<TR>

</TR>

</TABLE>

</BODY>

</HTML>

这里，将第一行单元格在水平方向上所跨的列数为3，因为表格共包括3列，所以第一行只有一个单元格，运行效果如图2.7所示。跨多列表格已经实现了，下面我们想想如何实现跨多行的表格？

图2.7 跨多列表格

2.2.3 跨多行的表格

单元格除了可以在水平方向上跨列，还可以在垂直方向上跨行，跨多行的表格是单元格在垂直方向上跨多行。

语法

创建跨多行的表格基本语法：

<TABLE>

<TR>

<TD rowspan=”所跨的行数” > 单元格的内容 < /TD >

</TR>

</TABLE>

下面通过示例3来说明rowspan这一属性的用法。

示例3

<HTML>

<HEAD>

</HEAD>

<BODY>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

</TABLE>

</BODY>

</HTML>

这里，由于第一行第一个单元格垂直跨了3行，还剩2个单元格，因此在接下来的两行都只有2个单元格，运行效果如图2.8所示。

图2.8 跨多行表格

2.2.4 如何创建跨行跨列的表格

创建了跨多列的表格，也创建了跨多行的表格，但是在有些情况下要在一张表中既有跨多行又有跨多列的单元格，那将如何实现？这要说简单真的很简单，说难还真的不容易，下面我们就以示例4和示例5来说明如何创建跨多行跨多列的表格。

示例4

<HTML>

<HEAD>

<TITLE>跨多行多列表格1</TITLE>

</HEAD>

<BODY>

<TR>

<TD>手机充值卡、IP卡</TD>

</TR>

<TR>

<TD rowspan=”2”>各种卡的总汇</TD>

</TR>

<TR>

</TR>

</TABLE>

</BODY>

</HTML>

示例4在浏览器中运行的结果如图2.9所示。在创建如图2.9所示的表格时，应先创建表格标签<TABLE>…</TABLE>；然后在表格标签里创建行标签<TR>…</TR>，这里一共创建了3行；最后在每行里创建列标签<TD>…</TD>，并设置跨多行跨多列的属性，即可实现跨多行跨多列的表格。

图2.9 跨多行多列表格1

示例5

<HTML>

<HEAD>

<TITLE>跨多行多列表格2</TITLE>

</HEAD>

<BODY>

<TR>

</TR>

<TR>

<TD>彩音盒MP3</TD>

</TR>

<TR>

<TD colspan=”2”><P>欢迎光临本购物网站</P> </TD>

</TR>

</TABLE>

</BODY>

</HTML>

示例5在浏览器中运行的结果如图2.10所示。大家可以试试修改rowspan和colspan属性值的大小，如果把rowspan和colspan的值改得过小，表格中会出现空白区域，这样会使表格的编辑变得困难，因此在设置表格时，要注意各行的单元格列数应相同。

图2.10 跨多行多列表格

2.3 表格的美化修饰

不知道大家发现没有？这之前创建的表格都非常丑陋、简单

难看。如何创建一个布局协调、色调统一、美观、大方的表格？这就涉及到对表格的美化修饰。

2.3.1 什么是表格的美化修饰

表格的美化修饰就是从多方面对表格进行美化修饰，使表格看上去更漂亮、更美观、更合理。对表格进行美化修饰时，主要从以下己方面进行：

Ø 表格的高度、宽度和边框。

Ø 表格、行、列的背景。

Ø 表格、行、列的对齐方式。

Ø 表格的填充、间距属性。

如图2.11所示就是经过美化修饰之后的表格。

图2.11 美化修饰后的表格

2.3.2 如何对表格进行美化修饰

1.如何设置表格的尺寸和边框

如果不指定表格的高度和宽度，浏览器就会根据表格内容的多少自动调整高度和宽度。如果不指定表格的边框的宽度（border属性），则浏览器将不显示表格边框。若我们既想设置表格的高度和宽度，又想设置表格边框的宽度，那么就得设置表格的高度、宽度和边框属性。

语法

设置表格的宽度、高度和边框的基本语法：

……

</TABLE>

其中，表格的宽度和高度可以用像素来表示，也可以用百分比（与浏览器当前窗口相比的大小比列）来表示。表格边框宽度只能用像素来表示。

例加：<TABLE width=”200” height=”100”>表示一个宽为200像素，高为100像素的表格。<TABLE width=50% height=”100”>表示一个宽为当前浏览窗口宽度的50%，高为当前浏览器窗口高度的25%的表格。

示例6

<HTML>

<HEAD>

<TITLE>表格的高度、宽度和边框</TITLE>

</HEAD>

<BODY>

<TR>

</TR>

<TR>

<TD colspan=”2” >笔记本电脑</TD>

</TR>

<TR>

</TR>

</TABLE>

</BODY>

</HTML>

示例6运行效果如图2.12所示。

图2.12 表格的尺寸和边框

经验

表格中border属性只能影响表格四周的边框宽度，而不影响表格内单元格之间边框尺寸。过席的边框会影响表格的整体美观，因此一般边框宽度设置不应超过5像素。

2. 如何设置背景

（1）表格背景

表格背景包括表格的背景颜色和背景图象的设置，表格的背景颜色属性bgcolor是针对整个表格的，表格的背景图像属性background也是针对整个表格的，背景图象会令表格更加美观、更加活泼生动。

语法

设置表格背景基本语法：

……

</TABLE>

（2）行背景色

不仅可以对表格整体设置背景，还可以对单独一行设置背景色，行的bgcolor颜色可以覆盖<TABLE>的bgcolor或background属性。

语法

设置行的背景色基本语法

（3）单元格背景色

不仅可以对表格中行设置背景色，还可以对表格中每一个单元格设置背景色，单元格的bgcolor颜色可以覆盖行的bgcolor属性。

语法

设置单元格的背景色基本语法

<TD bgcolor=“单元格的背景颜色”> 单元格内容</TD>

示例7

<HTML>

<HEAD>

<TITLE>表格的美化</TITLE>

</HEAD>

<BODY>

<TR>

</TR>

<TD colspan="3" >笔记本电脑</TD>

</TR>

</TR>

</TABLE>

</BODY>

</HTML>

示例7运行效果如图2.13所示

图2.13 背景色的设置

3．如何设置对齐方式

为了美观大方，表格中的数据一般需要设置对齐方式。

设置表格、行或列的对齐方式，修改align属性为right（右对齐）、center(居中)、left（左对齐）就可以了，默认为“左对齐”。

修改示例7，设置“笔记本电脑”列和“办公设备、文具、耗材”列居中显示，代码如示例8所示。

<HTML>

<HEAD>

<TITLE>表格的对齐方式</TITLE>

</HEAD>

<BODY>

<TR>

</TR>

<TD colspan="2" align="center" >笔记本电脑</TD>

</TR>

</TR>

</TABLE>

</BODY>

</HTML>

示例8

<HTML>

<HEAD>

<TITLE>表格的对齐方式</TITLE>

</HEAD>

<BODY>

<TR>

</TR>

<TD colspan="2" align="center" >笔记本电脑</TD>

</TR>

</TR>

</TABLE>

</BODY>

</HTML>

示例8运行效果如图2.14所示。

图2.14 单元格对齐方式

4. 如何设置填充、间距属性

如图2.15所示，由于这张表格既没有设置高度，又没有设置宽度，也没有设置填充（cellpadding）和间距(cellspacing)属性，所以非常难看。如果你既不想设置表格的高度，也不想设置表格的宽度，但还要使表格内框宽度(cellsapcing)变宽

使文字与边框距离(cellpadding)拉大，该怎么办？其实很简单，可以通过cellspacing和cellpadding属性进行调整实现。下面我们就先了解一下cellspacing和cellpadding是何方神圣？请你参看图2.16,图2.16中的“内容”相当于图2.15中的“笔记本电脑”，其他部分类同。

图2.15 没有设置填充和间距属性的表格

图2.16 表格的填充和间距属性

内框宽度(cellspacing)和文字与边框的距离（cellpadding）均以像素这单位，下面示例9就演示了这两个属性的使用方法。

示例9

</HTML>

<HEAD>

<TITLE>表格的内框宽度和填充属性</TITLE>

</HEAD>

<BODY>

<TR>

</TR>

<TR>

<TD colspan=”2”>笔记本电脑</TD>

</TR>

<TR>

</TR>

</TABLE>

</BODY>

</HTML>

示例9运行效果如图2.17所示。

图2.17 表格的填充和间距示例说明

图2.15所示的表格如此难看、拥挤，相信大家还记忆犹新！下面我们就运用刚才所学的cellspacing和cellpadding属性，对其进行改造和调整，使其达到美观、大方的效果。

示例10

<HTML>

<HEAD>

<TITLE>表格的美化<TITLE>

< /HEAD>

<BODY>

示例10运行效果如图2.18所示。

图2.18 表格的填充和间距示例

2.4 表格用于布局

网页可以说是构成网站的基本元素。当我们在网络中遨游时，轻点鼠标，一幅幅精彩的网页会呈现在我们面前，那么，网页精彩与否的因素是什么呢？色彩的搭配、文字的变化、图片的处理等，这些当然是不可忽略的因素，除了这些，还有一个非常重要的因素——网页的布局。目前网页布局主要还是采用表格进行布局，表格布局就是为了精确定位、合理安排网页中的文字、图片等元素，它就像网页的脸面，是在一个限定的面积范围内合理安排、布置图像、文字等元素的位置。

2.4.1 什么是表格布局

表格在网页布局方面起到了举足轻重的作用，表格布局好像已经成为一个标准，随便浏览一些站点，它们大多是用表格布局的。使用表格设计网页布局，可以使网页看上去更加整齐，适用于一般比较正规的网页。网页中的表格是由若干行和列组成，每一行（或者列）又由多个单元格组成，每个单元格中又可以反复地插入表格，以满足网页设计人员的布局需要。表格布局的优势在于它能对不同对象加以处理，而又不用担心不同对象之间的影响。如图2.19所示，就是一幅完全使用表格进行布局的网页。

图2.19 使用表格布局的页面

2.4.2 如何使用表格进行布局

下面我们通过一个具体的示例,来说明如何使用表格进行布局。假如我们要用表格布局出如图2.20所示的页面。

图2.20 采用表格布局的简单页面

（1）根据需求创建表格

大家仔细考察图2.20所示的页面，能看出此图中页面表格一共有7行2列，第一行占2列，第二行左边的单元格跨6行，其他单元格都是没有跨多行跨多列的单元格。所以我们应该首先创建一个7行2列的表格，然后合并第一行2个单元格，设置第二行的第一个单元格跨6行，具体代码如下：

<TABLE>

<TR>

</TR>

</TABLE>

（2）设置表格属性

根据图片的大上以及文字的多少和大小来设计表格、行、单元格的高度、宽度、对齐方式。根据图2.20所示我们来给表格设置相关属性，具体代码如下：

<TR>

</TR>

</TABLE>

（3）给表格填充内容

根据需要，在对应单元格里添加文字和图片，添加完文字和图片之后的页面，所对应的完整代码如示例11所示。

示例11

<HTML>

<HEAD>

</HEAD>

<BODY>

<TR>

</TR>

<TR>

</TD>

<TD><A href="#">超值变形金钢2.5折!</A> </TD>

</TR>

<TR>

<TD><A href="#">人们为啥对电视吼叫 </A></TD>

</TR>

<TR>

<TD><A href="#">淘宝网首届翠友会！</A></TD>

</TR>

<TR>

<TD><A href="#">比基尼美女激情海滩 </A></TD>

</TR>

<TR>

<TD><A href="#">想做最闪亮的mm吗 </A></TD>

</TR>

<TR>

<TD><A href="#">千余中奖机会有你吗</A></TD>

</TR>

</TABLE>

</BODY>

</HTML>

示例11运行效果如图2.20所示。

² 本章总结

Ø 创建表格至少需要3对标签,即表格标签<TABLE>……</TABLE>,行标签</TR>……</TR>和单元格标签<TD>……</TD>。

Ø 创建跨多列的表格是在单元格里使用colspan属性进行设置，创建跨多行的表格是在单元格里使用rowspan属性进行设置。

Ø 表格的美化修饰主要从以下几个方面进行。

l 表格的高度(height)、宽度(width)和边框(border)。

l 表格的背景(becolor和background)、行的背景色(bgcolor)、列的背景色(bgcolor)。

l 表格、行、列的对齐方式(align)。

l 表格的填充(cellpadding)、间距(cellspacing)属性。

Ø 表格可在一定程度上控制文本和图像在网页中的位置，而不是完全由浏览器对此进行控制。

一、选择题

1、运行下面创建表格的代码，在浏览器里会看到（）的表格。

<TR>

</TR>

<TR>

</TR>

</TABLE>

A．3行2列

B．2行3列

C．3行3列

D．2行2列

2．指出下面创建表格的HTML代码中的错误，一共有（）错误。

<TD>

</TD>

<TR>

</TD> <TD>

</TR>

</TABLE>

A.5处 B. 4处 C. 3处 D. 2处

3.运行下面代码,在浏览器里会看到( )。

<TR>

</TR>

<TR>

</TR>

</TABLE>

A. 6个单元格

B. 5个单元格

C. 4个单元格

D. 3个单元格

4．运行下面代码，在浏览器里会看到（）。

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

</TABLE>

A． 6个单元格

B． 5个单元格

C． 4个单元格

D． 3个单元格

5．HTML语言中，设置表格中文字与边框距离的标签昌（）。

A．<TABLE border=#>

B．<TABLE cellspacing=#>

C．<TABLE cellpadding=#>

D．<TABLE width=# or %>

二、简答题

1．请用HTML实现如图2.21所示的表格。

图2.21 跨列表格

提示

先创建3行3列的表格，然后把第一行合并成一个单元格，最后给单元格添加内容。

2．请用HTML实现如图2.22所示的表格。

图2.22 跨行表格

提示

先创建3行2列的表格，然后把第一列合并成一个单元格，并把它放在第一行里，最后给单元格添加内容。

3．请用HTML实现如图2.23所示的表格

图2.23 详细订单表格

提示

先创建5行6列的表格，然后把第一行合并成一个单元格，并为其设置背景色，最后一行左边的单元格设为跨5列，最后给所有的单元格添加内容

4．请用HTML实现如图2.24所示的表格。

图2.24 学生基本信息表格

提示

先创建4行3列的表格，然后把第一行合并成一个单元格，再把第三行第三列与第四行第三列合并成一个单元格，接着为表格设置背景图片、对齐方式、边框颜色，还要为表格设置填充和间距属性，最后给所有的单元格添加内容。

第3章

表单和框架

本章工作任务

制作“注册”页面

制作“客户中心”页面

本章技能目标

会使用表格的基本结构制作表单页面

会使用各种表单元素实现注册页面

能理解post和get两种提交方式的区别

会使用框架结构实现多窗口展示页面

² 本章简介

上一章已介绍了表格的基本结构，既讲解了如何创建一个简单的表格，又讲解了如何创建更加复杂的跨多行跨多列表格，我们一开始创建的表格还是比较丑陋，所以随后我们就对表格从多方面进行了美化修饰，不过，为了实现图文并茂的页面，我们还学习了表格布局。

本章开始讲解表单和框架，其中重点是如何使用表单中的各种元素，如何使用框架制作多窗框页面；难点是表单中的post方法和get方法的区别，窗口的target属性。为了能在一个页面中显示多个HTML文档，我们还介绍了框架。

² 本章单词

请在预习前完成下列单词。

已学单词复习

1．colspan: ______________________ 2. rowspan: _________________

3. cellpadding: ____________________ 4. cellspacing: _______________

5. background: ____________________

本章新单词

1. target: _________________________ 2. form: ____________________

3. method: ________________________ 4. action: ___________________

5. checkbox: ______________________ 6. radio: ____________________

7. textarea: _______________________ 8. frameset: __________________

9. frame: _________________________

3.1 表单

热衷于上网的用户经常会在网上看到一些会员注册页面、购买某个商品收集信息页面、网上调查问卷页面、搜索工具页面等，这些页面是什么做的呢？我不敢说完全是用表单做的，但我敢肯定至少包含有表单，所以表单主要用来收集客户端相关信息，使网页具有交互功能。本节主要讨论如何使用HTML来创建表单，然后向表单中添加表单元素。

网页中的表单用途很广，而且还在不断发展。下面我们就列举一些典型的表单应用：

在用户注册某种服务或事件时收集姓名、地址、电话号码、电子邮件和其他信息。

为收集购买某个商品的订单信息。例如，如果想通过Internet购买一本书，则必须填写姓名、联系电话、邮寄地址、付款方式和其他相关信息。

收集关于调查问卷信息。大部分提供服务性的网站都鼓励用户参与调查问卷，提供反馈信息。这些反馈信息除了维系良好的客户关系外，它还有助于改进和提高网站的服务质量，从而使网站的服务更具人性化，吸引更多的浏览者。

为网站提供搜索工具。提供各种信息的站点通常会为用户提供一个搜索框，使用户能够更快地找到想要的信息，如比较著名的搜索网站：谷歌(http://www.google.cn)、百度（http://www.baidu.com）等。

如图3.1所示是网页上的一个典型表单。

图3.1 典型的表单

3.1.1 表单包含的控件

创建表单后，就可以在表单中放置控件以接受用户的输入。这些控件通常放在<FORM></FORM>标签对之间一起使用，也可以在表单之外用来创建用户界面。在网上冲浪时，我们经常会见到一些常用控件，例如：让用户输入姓名的单行文本框，让用户输入密码的密码框，让用户选择性别的单选按钮以及让用户提交信息的提交按钮等。

不同的表单控件有不同的用途。如果要求用户输入的仅仅是一些文字信息，如“姓名”、“备注”、“留言”等，一般使用单行文本框或多行文本框：如果要求用户在指定的范围内做出选择，一般使用单选按钮、复选框和下拉列表框，如图3.1中“性别”、“爱好”、“出生日期”中的月份选择等常采用这些控件。如果要把填写好的表单信息提交给服务器，一般使用“提交”按钮，如图3.1中的“同意以下服务条款，提交注册信息”按钮。除此之外，还有一些不太常用的表单控件，在这里就不一一列举了。

3.1.2 表单页面的基本结构

<FORM>标签用于在网页中创建创建表单区域，属于一个容器标签，表示其他表单标签需要在它的包围中才有效，<INPUT>便是其中的一个。用以设定各种输入资料的方法，其属性见表3-1。

表3-1 <FORM>元素的属性

属性

说明

action

此属性指示服务器处处理表单输出的程序。一般来说，当用户单击表单上的“提交”按钮后，信息发送到Web服务器上，由action属性所指定的程序处理。语法为：action=”URL”

method

此属性告诉浏览器如何将数据发送给服务器发送数据方法（用postt方法还是用get方法）。如果值为get,浏览器将创建一个请求，该请求包含页面URL，一个问号和表单的值。浏览器会将该请求返回给URL中指定的脚本，以进行处理。如果将值指定为post，表单上的数据会作为一个数据块发送到脚本，而不使用请求字符串。语法为：method=(get︱post)

使用post方法将表单提交给”processform”程序处理，代码如示例1所示。

示例1

<p>

</p>

</FORM>

示例1中，若把method=”post”改为method=”get”就变成了使用get 方法将表单提交给“processform”程序处理。这两种方法都是将表单数据提交给服务器上指定的程序进行处理，那有什么区别呢？

先让大家看看采用post和get方法提交表单信息后浏览器地址栏的变化，如图3.2和图3.3所示。在“名字”和“密码”标签后，分别输入用户名和密码，然后单击“提交”按钮。采用post方法提交表单信息之后，浏览器地址栏前后没变化，如图3.2所示，并且在浏览器地址栏中能看到信息“ name=wzq&password=123”,这其实就是我刚才输入的用户名和密码信息，是不是很恐怖？密码都能看得见。由此可以看出，使用post方法提交表单信息更安全，相反，使用get方法提交表单信息极其不安全，建议大家在使用表单时尽可能地使用post方法来传送数据。

图3.2 post方法提交表单信息后图3.3 get方法提交表单信息后

3.1.3 表单元素原统一格式

网页中的表单由许多不同的表单元素组成，这些表单元素各自都有很多属性，要一一介绍，篇幅不允许，下面就把这些表单元素中的一些常用的属性作一个统一的介绍。

下面给出了表单元素的统一格式：

……

</FORM>

<INPUT> 元素定义要在表单中显示的控件类型和外观。此元素包括的属性见表3-2。

表3-2 <INPUT>元素属性

属性	说明
type	此属性指定表单的类型。可用的选项有：text、password、checkbox、radio、submit、reset、file、hidden、image和button。默认选择为text
name	此属性指定表单元素名称。例如，如果表单上有几个文本框，可以按名称来标识它们，如text1、text2等。名称属性的作用域为FORM元素内
value	此属性是可选属性，它指定表单元素牟初始值。但如果type为radio，则必须指定一个值
size	此属性指定表单元素的初始宽度。如果type为text或password，则表单元素的大小以字符为单位。对于其他输入类型，宽度以像素为单位
maxlength	此属性用于指定可在text或password元素中输入的最大字符数。默认值为无限大。
checked	此属性是Boolean属性，指定按钮是否是被选中的。当输入类型为radio或checkbox时，使用此属性。

3.1.4 表单元素的逐一介绍

下面讨论表单元素的类型及常用的属性。

1. 文本框

在表单中最常用最常见的表单输入元素就是文本框（text）,它提供给用户输入单行文本信息，例如用户名的输入框。若要在文档的表单里创建一个文本框，将图3.4中的表单元素type属性设为text就可以了。

示例2

<p>名字：

</p>

<p>姓氏：

<p>登录名：

</p>

</FORM>

示例2在浏览器中预览效果如图3.4所不。

图3.4 文本框的效果

2. 密码框

将图3.4中的表单元素的type属性设为password就可以创建一个密码框。密码框的各属性和文本框一样，唯一不同的是，密码框输入的字符全都以“*”显示。

示例3

<p>密码：

</p>

</FORM>

示例3在浏览器中预览效果如图3.5所示。

图3.5 密码框的效果

问答

密码框能保证输入数据的安全吗？

不能，密码框仅仅使周围的人看不见输入的符号，它不能保证输入的数据安全。为了使数据安全，应该加强人为管理，采用数据加密技术等。

3. 单选按钮

将图3.4中的表单元素的type属性设为radio就可以创建一个单选按钮。单选按钮控件用于一组相互排斥的值，组中的每个单选按钮控件应该具有相同的名称，用户一次只能选择一个选项。只有从组中选定的单选按钮才会提交的数据中生成name/value对，单选按钮需要一个显式的value属性。

示例4

<BR>性别：

<INPUT name=”gen” type=”radio’ class=”input” value=”男”

checked=”checked”>

<IMG src=”images/Male.gif” width=”23” height=”21”>男

<IMG src=”images/Female.gif” width=”23’ height=”21”>女

</FORM>

示例4在浏览器中预览效果如图3.6所示。

图3.6 单选按钮效果

4. 复选框

将图3.4中的表单元素的type属性设为checkbox就可以创建一个复选框。用户可以选择多个复选框，选择了复选框时，会将一个name/value对与FORM一起提交。

示例5

爱好：
<INPUT type=”checkbox” name=”cb1” value=”sports”>运动

聊天

<INPUT type=”checkbox” name=”cb3” value=”play”>玩游戏

</FORM>

示例5在浏览器中预览效果如图3.7所示。

图3.7 复选框效果

对比

单选按钮应具有相同的名字，便于互斥选择；而复选框可以有不同的名字，并不需要属于一组。

5. 列表框

列表框主要是为了用户快速、方便、正确地选择一些选项，而且还能节省页面空间，它是通过<SELECT>和<OPTION>标签来实现的。<SELECT>标签用于显示可供用户选择的下拉列表，每个选项由一个<OPTION>标签表示，<SELECT>标签必须包含至少一个<OPTION>标签。

语法

……

</SELECT>

其中，在有多种选项可供用户滚动查看时，size确定列表中可同时看到的行数不胜数；stlected表示该选项在默认情况下是被选中的，而且一个列表框中只能有一个列表项默认被选中，如同单选按钮组那样。

示例6

出生日期：

<INPUT name=”byear” value=”yyyy” size=4 maxlength=4> 年

</SELECT> 月

<INPUT name=”bday” value=”dd” size=2 maxlength=2> 日

</FORM>

示例6在浏览器中预览效果如图3.8所示。

图3.8 列表框效果

6. 按钮

按钮在表单中经常用到，在HTML中按钮分为3种，分别是普通按钮(button)、提交按钮(submit)和重置按钮(reset)。普通按钮主要用来响应onClick事件，提交按钮用来提交表单信息，重置按钮用来清除表单中已填信息。

语法

其中，若type=”button”表示是普通按钮；若type=”submit”表示是提交按钮；若 type=”reset”表示是重置按钮。Name是用来给按钮起名字，value用来设置显示在按钮上的文字。

示例7

</p>

<p>

</p>

<p>

</p>

</FORM>

示例7浏览器中预览效果如图3.9所示。

图3.9 按钮预览效果

7. 多行文本框

当我们要在网页中输入两行或两行以上的文本时，怎么办？显然，前面学过的文本框及其他表单元素都不能满足要求，这就应该使用多行文本框，它使用的标签是<TEXTAREA>。

语法

示例8

<H4><IMG src=”images/read.gif” width=”35” height=”26”>阅读淘宝网服务协议

</p>

欢迎阅读服务条款协议…

</TEXTAREA>

</P>

</FORM>

示例8在浏览中预览效果如图3.10所示。

图3.10 多行文本框效果

3.2 框架

在一个网页中，并不是所有的内容都需要改变，如网页的导航栏、网页页脚等部分是不需要改变的，如果在每一个网页中都重复添加这些元素，不仅会浪费时间，而且在浏览进也会带来不便、耗费更多的时间，为了解决这种问题，我们可以使用框架来对网页进行布局。

使用框架可以把浏览器窗口划分为多个区域，每个区域可以显示不同的网页，每次浏览者在访问框架页面时，只下载框架页面中变化的区域，对于不变的区域，不用重新下载，从而给浏览者带来方便、节省下载页面所需的时间。

一个框架结构是由以下两部分组成的：

框架(FRAME)：是浏览器窗口中的一个区域，它可以显示与浏览器窗口其余部分中所显示内容无关的网页文件。

框架集(FRAMESET)；是一个网页文件，它将一个窗口通过横向或纵向的方式分割成多个框架，每个框架中要显示的都是不同的网页文件。不同的网页文件可以通过超链接联系起来。

如图3.11所示就是一个比较经典的框架页面。此页面一共有3个区域，每个区域分别显示一个HTML文档，由于框架集页面也是一个HTML文档，所以一共有4个HTML文件。为了浏览方便，当浏览者单击左侧导航栏中的服务列表（如“注册&认证”、“买家帮助”等）超链接时，右侧窗口显示相应的详细帮助信息。

图3.11 框架集页面

3.2.1 为何使用框架

一个网页可以有一个或多个框架。框架的一些用法如下：

在页面的一个固定部分显示Logo或静态信息。

左侧框架显示目录，右侧框架显示内容，用户只需要单击左侧窗口的目录，在右侧窗口中就会显示相应内容，如网上在线学习教程、论坛、后台管理、产品介绍等。

框架能有机地把多个页面组合在一起，这多个页面之间可互相独立，却又可相互联系。

3.2.2 框架的基本结构

框架集(FRAMESET)页面的结构是通过属性rows和cols来设置的，根据框架的分割方式可分为：上下分割窗口(使用rows属性来分割)，左右分割窗口（使用cols属性来分割），嵌套分割窗口（同时使用rows和cols属性来分割）。

语法

……

</FRAMESET>

说明：FRAMESET仅是一框架的集合。FRAME标签可以提供对单独HTML文档URL引用，其中每个HTML文档占据一个框架。cols将页面沿垂直方向分割为几个窗口，cols可以取多个值，不同的值用逗号隔开，单位可以是像素，也可以是占浏览器的百分比。rows将页面沿水平方向分割为几个窗口，也可以取多个值，是由逗号分割的像素或百分比。src指定框架窗口的源文件。

示例9

<HTML>

<HEAD>

<TITLE>rows框架</TITLE>

</HEAD>

</FRAMESET>

</HTML>

示例9在浏览器中预览效果如图3.12所示。

图3.12 水平方向分割为上中下3个窗口

示例10

<HTML>

<HEAD>

<TITLE>cols框架</TITLE>

</HEAD>

</FRAMESET>

</HTML>

示例10在浏览器中预览效果如图3.13所示。

图3.13 垂直方向分割为左右两窗口

3.2.3 如何创建多个复杂的窗口

前面的示例9和示例10要么是水平分割，要么是垂直分割，如果要实现如图3.14所示的框架集页面，那怎么实现？

图3.14 框架集页面

经分析，首先将页面分割为上下两部分，上部分的高度占浏览器高度的30%左右。然后将下面部分分割成左右两部分，宽度大约分别占窗口的20%和80%。注意对其中的一个框架窗口再次分割时，需要使用<FRAMESET>标签代替<FRAME>标签。下面我们就一步一步地实现如图3.14所示的框架集页面。

第一步：创建或直接提供如图3.14所示的top窗口中所显示的页面文档top.html。

第二步：创建或直接提供如图3.14所示的left窗口中所显示的页面文档left.html。

第三步：创建或直接提供如图3.14所示的right窗口中所显示的页面文档right.html。

第四步：手写如示例11中的代码，然后保存为frame_Sets.html文件。

示例11

<HTML>

<HEAD>

<TITLE>创建多框架页面</TITLE>

</HEAD>

<FRAME src=”left.html”

Name=”leftrame” scrolling=”no”>

<FRAME src=”right.html”

Name=”rightframe”>

</FRAMESET>

</HTML>

示例11在浏览器中预览效果如图3.14所示。

3.2.4 如何设置窗口链接的显示位置

在图3.14中，如果left窗口的导航列表超链接（如“注册&认证”、“买家帮助”等），在right窗口中显示链接的页面内容，其实这就是典型的导航页面，该如何实现？这就需要使用<FRAME>标签中的name属性和<A>标签的target 属性。

Target目标窗口属性分为两类：一类是框架页面之间的链接；另一关是4个特殊窗口的超链接。

1. 框架页面之间的链接

要设置框架之间的超链接，需要两步：

第一步：设计好框架集页面，并为每个框架窗口定义名称。

如：<FRAME src=”right.html” name=”rightframe”>

第二步：设置导航栏中的超链接的target目标窗口属性，使其值为框架窗口的名字。

如：<a hrer=”right.html” target=”rightframe”>

下面我们就在示例11的基础上，来实现框架之间的超链接。

示例12

首先根据需要，创建好框架集页面，然后为每个框架窗口定义名称。设置框架集页面（frame_Set.html）的代码如下：

……

<FRAME src=”top.html” name=”topframe” scrolling=”no”

noresize=”noresize”>

<FRAME src=”left.html” name=”leftframe” scrolling=”no”

Noresize=”noresize”>

</FRAMESET>

下面设置导航页中的超链接，也就是设置示例11中left.html中的超链接，最关键的是将导航页中的各个链接图片或文字的目标找开方式设置为在框架中打开，即将target属性值设为框架窗口的名字。

由于left.html文档中有多个超链接，而且为了说明框架之间的链接，所以我们先准备几个链接页面，如：buy.html、sale.html、person_info.html。

设置了框架之间链接的left.html文档代码如下：

<HTML>

<HEAD>

<TITLE>左侧导航页面</TITLE>

</HTAD>

<BODY>

<P>

</P>

</P>

</P>

</P>

</BODY>

</HTML>

设置左侧导航栏的超链接之后，使用浏览器打开frame_Sets.html文档，运行效果如图3.15所示。

单击框架导航栏中的链接图片“买家帮助”，将会打开如图3.16所示的页面效果。同理，单击“卖家帮助”和“个人资料修改”超链接，在内容区都会打开相应的HTML文档页面。

图3.15 框架页面的默认显示效果

图3.16 在框架窗口中打开“买家帮助”介绍页面

2．4个特殊的窗口

在制作网页中的超链接时，默认情况下超链接会在当前窗口中打开。通过使用target属性，可以将目标页面在一个新的窗口中打开。

语法

其中，target属性可以取4个值，这些值的具体含义见表3-3。

表3-3 target目标窗口的打开方式

属性值	说明
_blank	新启一个窗口打开链接
_self	新启一个窗口中打开，默认取值（指没有设置target属性值时的情况）
_parent	在上一级窗口中打开（框架页面中使用较多）
_top	在整个浏览器窗口中打开

示例13

我们直接在示例12的基础上进行相关的修改，仅仅修改left.html文档代码，其他HTML文档都保持不变，修改后的left.html文档代码如下：

<HTML>

<HEAD>

<TITLE>在左侧导航页面中演示4个特殊窗口</TITLE>

</HTAD>

<BODY>

<P>

</A></P>

<P>

</A></P>

<P>

</A></P>

<P>

</A></P>

</BODY>

</HTML>

设置左侧导航栏的超链接目标页面打开方式之后，使用浏览器打开frame_Sets.html文档，单击“注册&认证”超链接之后，可以看到打开一个新的窗口，如图3.17所示。

图3.17 设置目标页面的打开方式

² 本章总结

Ø 表单主要用来制作动态网页，方便和用户进行交互，例如：会员注册、购物订单、调查问卷、搜索等页面都会用到表单。

Ø 常用的表单元素有：文本框（text）、密码框（password）、单选按钮（radio）、复选框（checkbox）、列表框（<select>和<option>、按钮（button、submit和reset）、多行文本框（<textarea>））。

Ø 一个框架结构是由两部分组成的：框架集（FRAMESET）和框架（FRAME）。

Ø 框架集（FRAMESET）页面被划分的区域多少是通过属性rows和cols来设置的。

Ø 网页中超链接目标页面的打开方式有5种，可以通过target属性来设置。

一、选择题

1．（）标签用于在网页中创建表单。

A. <INPUT>

B. <SELECT>

C. <OPTGROUP>

D. <FORM>

2. （）元素用于定义表单中控件的类型和外观。

A．ECT

B．FORM

C．INPUT

D．CAPTION

3．<frameset cols=#>是用来指定（）。

A．混合分割

B．纵向分割

C．横向分割

D．任意分割

4．框架中“禁止改变框架窗口大小”的语法是（）。

A．<a href=”right.html” target=”rightframe”>

B．<IMG src=”URL” border=?>

C．<FRAMESET rows=”20%, *” frameborder=”0”>

D．<FRAME noresize=”noresize”>

5．想要使用户在单击超链接时，弹出一个新的网页窗口，下面（）选项符合要求。

A．<A href=”right.html target=”_blank”>新闻</A>

B．<A href=”right.html target=”_parent”>体育</A>

C．<A href=”right.html target=”_top”>财经</A>

D．<A href=”right.html target=”_self”>教育</A>

二．简答题

1．请用HTML实现如图3.18所示的申请表表单。相关要求如下：

教育程度：默认选中为硕士。

国籍：有美国、澳大利亚、日本、新加坡，默认选中为澳大利亚。

图3.18 申请表表单

2．请用HTML实现如图3.19所示的电子产品调查表表单。相关要求如下：

Ø 请输入您的购买日期：月份下拉选项为1月到12月，日下拉选项为1~31。

Ø 您是否查看过我们的在线产品目录：默认选中为“是”。

图3.19 电子产品调查表表单

3．请用HTML实现如图3.20所示的注册表单。相关要求如下：

Ø 性别：男、女前分别有男性图标和女性图标，默认选中为“男”。

Ø 出生日期：月份默认选中为“[选择月份]”，月份下拉选项为1月到12月。

图3.20 注册表单

4．请用HTML实现如图3.21所示的框架集页面，要求：选择左边框架中的菜单项，在右边的框架中打开相应的例题页面文档。

图3.21 框架集页面

提示

框架集页面分成左右两个框架窗口，分别占浏览器窗口的25%和75%，“[例3-1]”、“[例3-2]”和“[例3-3]”的超链接目标文档分别为图3.18、图3.19和图3.20所示对应的HTML文档。

第4章

CSS样式表

本章工作任务

制作“宝贝分类”页面

制作并美化“登录”页面

本章技能目标

会创建统一外观的字体文本

会创建无下划线的超链接样式

会创建个性化的表格

会创建个性化的表单

² 本章简介

上一章的课程里，我们学习了表单以及表单中的各种元素，常用的表单元素有：文本框（text）、密码框（password）、单选按钮（radio）、复选框（checkbox）、列表框（<select>和<option>）、按钮（button、sbumit和reset）、多行文本框（<textarea>）。

另外，还学习了框架，包括框架的基本结构、如何创建多个复杂的窗口、框架窗口之间的链接等。

从本章开始，我们将学习CSS（Cascading Style Sheet,层叠式样式表），其中重点是样式的基本语法和如何创建常见的样式规则（如创建无下划线的超链接样式，设置细边框文本框样式，创建常见的文字，颜色等样式等）；难点是内嵌样式、行内样式、样式表文件的使用场合。

² 本章单词

请在预习前完成下列单词

已学单词复习

1. target: ________________________ 2. form: _________________________

3. textarea: ________________________ 4. frameset: ______________________

5. frame: __________________________

本章新单词

1. style: ___________________________ 2. class: ________________________

3. padding: ________________________ 4. text-decoration: ________________

5. background-repeat: _______________ 6. import: ______________________

7. link: ___________________________

4.1 为什么需要CSS样式表

通过定义CSS样式表，能让网页具有美观一致的界面，可以将网页制作得更加绚丽多彩。一个样式文件可以作用于多个页面，具有更好的易用性和扩展性，通过修改样式文件，能制作出内容相同，而外观不同的多姿多彩的页面。此外，使用样式表能有效地分离网页的内容与外观控制，从而便于美工与程序员之间的分工协作，发挥各自的优势。

为什么需要CSS样式表主要是基于以下几点原因：

（1） HTML标签的外观样式比较单一。

大家在学习前面几章时，不知发现没有？前面几章网页中的文字的字体、颜色、大小、超链接、间距等样式都比较单一，为了弥补这个缺点，就需要使用CSS样式表来对HTML标签进行控制，从而实现更加丰富多彩的效果。

（2）样式表的作用相当于华丽的衣服。

同样的内容，采用不同的CSS样式文件，可以看到不同的布局和效果。从美工的角度来看，可以更容易地调整页面外观，调整页面里某个部分的文字或者图片等，从而实现复杂多变的页面效果，因此样式表相当于一个页面甚至一个网站的华丽的衣服。如图4.1和图4.2所示，就是内容相同，外观不同的两个页面。

图4.1 内容相同样式不同页面1

图4.2 内容相同样式不同页面2

（3）样式表能实现内容与样式的分离，方便团队开发。

由于当今社会争日趋激烈，分工越来越细，每个人做的事越来越单一，我们开发一个网站也不例外，往往需要美工和程序设计人员的配合，美工做样式，程序员写内容，为了迎合这种需要，就出现了样式表。样式表能把内容结构和格式控制相分离，使网页可以仅由内容构成，而将所有的网页格式通过CSS样式表文件来控制，从而方便美工和程序员分工协作、各司其职、各尽其能，为开发出优秀的网站提供了有力的保障。

4.2 样式表的基本语法

样式表由样式规则组成，这些规则告诉浏览器如何显示文档。一个样式（STYLE）的基本语法由3部分构成：selector（中文叫选择器，有点怪怪的，就用英文吧！），属性（property）和属性值（value）。

4.2.1 样式表的基本结构

<STYLE>和</STYLE>标签之间的所有内容都是样式规则，样式规则的第一部分称为选择器。每个选择器都有属性以及对应的属性值。下面让我们先来看一个样式表的基本结构。使我们对样式表有个感性的认识。

样式表的基本结构为：

P {

color:red;

font-size:30px;

font-family:隶书;

}

……

</STYLE>

文档样式表一般位于HTML文件的头部，即<HEAD>和</HEAD>标签之间，定义的样式规则就可应用到当前的页面中。这些样式规则表示什么意思？下面我们就来了解一下样式规则的组成及其含义。

4.2.2 样式规则

层叠样式表是一组规则，用于定义文档的样式。例如，可以创建一个样式规则，来指定所有<p>标题的颜色均为浅绿。可以用来修饰网页中所有<p>标签的样式。

样式规则示例如下：

P {color:red; font-size:30px; font-family:隶书;}

其中，规则的第一部分称为选择器。每个选择器都有属性以及对应的属性值。上面的示例p是规则选择器。括在大括号内的部分称为声明。声明由两部分组成：冒号前面的部分是属性，冒号后面的部分是该属性的值。一个选择器可以有多个属性，它们可以写在一起，用分号隔开。

例如：

P {color:red; font-family:”隶书”; font-size:24px;}

示例1使用文档样式定义了页面中的所有<p>标签的样式。

示例1

<HTML>

<HEAD>

P { color:red; font-family:”隶书”; font-size:24px;}

</STYLE>

</HEAD>

<BODY>

<P>床前明月光，</P>

<P>疑是地上霜。</P>

<P>我是郭德刚，</P>

<P>低头思故乡。</P>

</BODY>

</HTML>

示例1在浏览器中预览效果，如图4.3所示。

图4.3 文档样式效果图4.4 类样式效果

4.2.3 类样式（class）

在示例1中，如果我们想<H2>标签的样式与<P>标签的样式一模一样，那如何实现？有了！要为它们定义一个共享样式。这个共享样式可以使用类样式来实现。

类选择器的定义格式为：

.red {

color:red; font-family:”隶书”; font-size:24px;

}

……

</STYLE>

注意类名前面有一“.”号，类名可随意命名，最好根据元素的用途来定义一个有意义的名称。某个标签(如<H2>)希望采用该类选择器的样式。语法格式为：

语法

<P CLASS=”类名”>床前明月光，</P>

示例2

<HTML>

<HEAD>

.red { color:red; font-family:”隶书”; }

</STYLE>

</HEAD>

<BODY>

<P class=”red”>床前明月光，</P>

<P class=”red”>疑是地上霜。</P>

<P >我是郭德刚，</P>

<P class=”red”>低头思故乡</P>

</BODY>

</HTML>

示例2在浏览器中预览效果，如图4.4所示。

<H2>、第一个段落<P>、第二个段落<P>和第四个段落<P>都采用了red类选择器，所以字体都为红色，字体类型为隶书。第三段没采用任何样式，按默认的样式显示。

从此例可以看出，不同类别的标签（如<H2>和<P>）可以使用同一类选择器，同一类的标签（如<P>）可以采用不同的类选择器，类选择器实现了样式的灵活共享。

4.3 常用的样式属性

CSS的属性非常庞大，庞大得好几本书都写不完，不过，没关系，我们可以从网上搜索相关资料或者查阅相关专著。这里只列出常用的且实用的CSS属性。下面我们就先来学习文本属性。

4.3.1 文本属性

文本属性主要用来对网页中的文字进行控制，如控制文字的大小、类型、样式、颜色以及对齐方式等，从而使页面中的文本达到我们想要的外观。表4-1列出了常用的文本属性。

表4-1 常用的文本属性

文本属性	说明
font-size	设置文本的字体大小
font-family	设置文本字体类型
font-style	设置文本的字体样式
color	设置文本的颜色
text-align	设置文本的对齐方式

下面示例3采用了文档样式和类样式，其中的样式规则使用了文本属性，从而有效地控制了网页中的文本效果。

示例3

<HTML>

<HEAD>

<TITLE>文本属性样式</TITLE>

{ font-size:12px;

font-family:”宋体”;

text-align:left;

}

.bigFont

{

Font-size:16px;

Color:red;

}

</STYLE>

</HEAD>

<BODY>

【新闻】[设搜狐为首页] 9月1日

<p class=”bigFont”>·世锦赛刘翔12秒95夺冠成就大满贯</p>

<p>·我国实施不安全食品召回制度遏制非法出口</p>

<p>·中国代表向联合国通报军备透明制度举措</p>

<p class=”bigFont”>·博客︳刘翔：最后胜利的感觉真好！</p>

</BODY>

</HTML>

示例3在浏览器中预览效果，如图4.5所示。

在示例3中第一个段落<p>和第四个段落<p>都应用了标签样式<p>和类样式bigFont,到底哪个样式起作用？有了，就近原则，当有不同的样式规则应用在同一个标签上时，根据这些样式规则距离修饰的文本的远近，来决定应用哪一个样式规则，如示例3对第一个段落<p>和第四个段落<p>起作用的应该是类样式bigFont,而不是标签样式<p>。

图4.5 文本属性效果

4.3.2 背景属性

恰当地使用背景，可以使页面既美观显示速度又快。背景包括背景颜色、背景图象以及背景图像以何种方式平铺在指定的区域内。表4-2列出了常用的背景属性。

表4-2 常用的背景属性

背景属性	说明
Background-color	设置背景颜色
Background-image	设置背景图像
Background-repeat	设置一个指定的背景图像如何被重复显示。可取的值有：repeat（铺满整个区域，默认情况）、no-repeat(不平铺)、repeat-x（只在水平方向上平铺）、repeat-y（只在垂直方向上平铺）

下面示例4对一个表格设置了背景图像，并且背景图像不平铺。

示例4

<HTML>

<HEAD>

/* 表格单元格小字体的样式*/

{

font-size: 14px;

font-family: "宋体";

padding-left:10px;

}

/* 大字体的样式*/

.bigFont

{

font-size: 16px;

color: #0000FF;

}

/* 表格虚线边框的样式*/

.tableBorder

{

border-right-width: 2px;

border-right-style: dashed;

}

/*设置无下划线的超连接样式*/

A {

color: blue;

text-decoration: none;

}

A:hover{ /*鼠标在超链接上悬停时变为颜色*/

color: red;

}

/*设置表格的背景图片样式*/

table

{

background-image: url(images/type_back.jpg);

background-repeat:no-repeat;

}

</STYLE>

</HEAD>

<BODY>

<P><IMG src="images/logo.gif" width="250" height="40" />您好，欢迎来淘宝！</P>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

</TR>

</TABLE>

</BODY>

</HTML>

示例4在浏览器中预览效果，如图4.6所示。

图4.6 表格背景图像不平铺效果

4.3.3 方框属性

方框属性其实就是对应CSS盒子模型，CSS盒子模型都具备方框属性。常用的方框属性有：边界（margin）、边框（border）、填充（padding）、内容。

这些属性我们可以把它转移到日常生活中的盒子上来理解，日常生活中所见的盒子也都具有这些属性，所以叫它盒子模型。日常生活中的盒子的内容就是盒子里装的东西；填充就是怕盒子里装的贵重瓷器损坏而添加的抗震材料（瓷器周围的软布）；边框就是盒子本身；至于边界则说明盒子摆放的时候不能和别的盒子挨在一起，盒子与盒子之间要留间隙，这间隙相当于边界（相邻纸箱之间的距离）。

下面我们回过头来看看网页设计中的盒子模型，在网页设计中，内容常指图片（如图4.8所示中的“我要投票”图片）、文字等元素；填充就是盒子内容到盒子边框之间的距离，可以理解为生活中盒子里的抗震材料的厚度；而边框有宽度、颜色和样式之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的以及什么样式；边界就是该盒子与其他网页元素之间的距离，如图4.8所示。

表4-3 网页中的盒子模型

属性	CSS名称	说明
边界属性	margin-top	设置对象的上边距
	margin-right	设置对象的右边距
	margin-bottom	设置对象的下边距
	margin-left	设置对象的左边距
边框属性	border-style	设置边框的样式
	border-width	设置边框的宽度
	border=color	设置边框的颜色
填充属性	padding-top	设置内容与上边框之间的距离
	padding-right	设置内容与右边框之间的距离
	padding-bottom	设置内容与下边框之间的距离
	padding-left	设置内容与左边框之间的距离

用方框属性解决下面的问题。

问题

要用HTML实现如图4.9所示的页面效果，该如何编写样式规则？

这个问题其实就要用到方框属性中的一些属性，首先表格有背景色，因此要用到背景色属性background；其次图4.9中的虚线，是通过方框属性中的边框属性来实现的，因此要用到边框属性；最后像“手机充值”等内容与表格的边框之间有距离，因此要用到填充属性。

图4.9中的右边框是虚线，虚线样式是用“dashed”属性值来表示的，因此图4.9中的右边框样式可以写为“border-right-style:dashed;”。其他属性表示方法类同，就不一一列举了，完整的代码如示例5所示。

示例5

<HTML>

<HEAD>

<TITLE>表格虚线框的样式</TITLE>

.tableBorder {

Border-right-width:3px;

Border-right-color:red;

Border-right-style:dashed;

Padding-top:20px;

Padding-left:10px;

}

TR {

Background:yellow;

}

</STYLE>

</HEAD>

<BODY>

<TR>

</TR>

<TR>

</TR>

</TABLE>

</BODY>

</HTML>

示例5在浏览器中预览效果，如图4.9所示。

用方框属性解决下面的问题。

问答

要用HTML实现如图4.10所示的效果，该如何编写样式规则？

从图4.10中可以看出这里只涉及到边框属性，因此这里主要用到边框的粗细和边框的样式。因为是细边框，所以应该用“solid”属性来表示，因此图4.10中的边框样式可以写为”border-style:solid”,完整的代码如示例6所示。

示例6

<HTML>

<HEAD>

<TITLE>细边框的文本框</TITLE>

.textBorder {

Border-width:lpx;

Border-style:solid;

}

</STYLE>

</HEAD>

<BODY>

<P>名字：

</P>

<P>密码：

</P>

</FORM>

</BODY>

</HTML>

示例6在浏览器中预览效果，如图4.10所示。

图4.9 虚线框样式图4.10 细边框样式

4.3.4 特殊样式

除了以上一些常用的样式之外，CSS样式表中还提供了一种特殊的样式，就是指定某个标签的个别属性的样式。这类样式中最常用的就是CSS控制超链接样式。表4-4列出了超链接4种状态的样式。

表4-4 CSS控制超链接样式

超链接样式	说明
A:link {color:red}	未被访问的链接样式，红色
A:visited {color:green}	已被访问过的链接样式，绿色
A:hover {color:yellow}	鼠标悬浮在链接上时的样式，黄色
A:active {color:blue}	鼠标正在按下时链接文字的样式，蓝色

示例7

<HTML>

<HEAD>

<TITLE>超链接文本样式<TITLE>

A {

Color: blue;

Text-decoration: none;

}

A:hover {

Color: red;

}

</STYLE>

</HEAD>

<BODY>

<TR>

</TR>

<TR>

</TR>

</TABLE>

</BODY>

</HTML>

示例7在浏览器中预览效果，如图4.11所示。

图4.11 超链接样式

对比

示例7中“A”样式是指标签<A>与</A>之间文本的样式，而”A:hover”是指标签<A>的属性的样式。

4.3.5 综合例子：制作图片按钮

在Web 2.0网站的各种设计元素中，按钮是不可或缺的。如何用最简捷的方法制作出最漂亮的按钮就成为了一个问题，由于按钮本来的样子是灰灰的，为了使按钮披上漂亮的外衣，一般是在按钮上放置一个与按钮等大的图片。下面我们就来一步一步地去制作图片按钮。

示例8

第一步：准备图片

不但要准备有漂亮外观的图片，还要注意图片的长宽与按钮的长宽差不多，不能相差太大。查看图片的大小可以有多种方法，最简单的方法是：用鼠标右击“图片”，选择“属性”→“摘要”→“高级”命令，就可以看到图片的高度和宽度。当然用Photoshop或Windows自带的“画图”等软件也可以查看图片的大小。

第二步：书写CSS样式

.picButton {

Background-image: url(images/back.jpg);

Margin: 0px;

Border: 0px;

Padding: 0px;

Height: 23px;

Width: 82px;

Font-size: 14px;

}

</STYLE>

第三步：给按钮披上外衣

<HTML>

<HEAD>

<TITLE>淘宝网注册页</TITLE>

.picButton{

background-image: url(images/back.jpg);

margin: 0px;

border:0px;

padding: 0px;

height: 23px;

width: 82px;

font-size: 14px; }

</STYLE>

</HEAD>

<BODY >

<P>

</P>

</FORM>

</BODY>

</HTML>

示例8在浏览器中预览效果，如图4.12所示。

图4.12 图片按钮效果

4.4 样式表的3类应用方式

写好样式表之后，其实有3类应用方式，不同的应用方式只是应用范围不同，应用效果相同。内嵌样式表只对某张网页起作用；如果希望某张网页中部分内容“与众不同”，那么就得采用行内样式；如果让网站中所有的网页都拥有一致性的风格，那就必须使用外部样式表文件。可以这么说，行内样式是写在标签里面的，只对所在的标签有效。内嵌样式表是写在标签<HEAD>与</HEAD>里面的，只对所在的网页有效。外部样式表文件是一个以.CSS为后缀的CSS文件，这个样式文件可以被多个网页引用，从而保证多个网页具有统一风格。

4.4.1 内嵌样式表

内嵌样式表是写在标签<HEAD>与</HEAD>里面的，如果希望本网页内的所有同类标签都采用统一样式，这时应采用内嵌样式。使用格式如下：

<HEAD>

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

……

</STYLE>

</HEAD>

其中<STYLE>标签代表样式的开始，</STYLE>代表样式的结束。Type=”text/css”表示CSS样式，text文本类型。

示例9

<HTML>

<HEAD>

<TITLE>内嵌样式表</TITLE>

font-family:"隶书";

font-size:18px;

color:#FF0000;

text-align:left;

}

H2 {

background-color: #CCFF33;

text-align:left;

}

</STYLE>

</HEAD>

<BODY>

<P>床前明月光，</P>

<P>疑是地上霜。</P>

<P>我是郭德刚，</P>

<P>低头思故乡。</P>

</BODY>

</HTML>

示例9在浏览中预览效果，如图4.13所示。

图4.13 内嵌样式效果

如果希望某段文字和其他段落文字显示风格不一样，该怎么办？例如示例9中，要想“我是郭德刚”这段文字与其他段落显示风格不一样，怎么解决？办法是有的，只有想不到的，没有做不到的，这里可以使用行内样式表示来解决。

4.4.2 行内样式表

行内样式使用元素标签的style属性定义。例如：有两段文本内容，其中有一段落内容需要强调突出显示，如图4.14所示，则可在该段标签内加上”style”属性，如示例10所示。

示例10

<HTML>

<HEAD>

</HEAD>

<BODY>

这个段落按默认样式显示

</P>

<P>

这个段落按默认样式显示

</P>

</BODY>

</HTML>

示例10在浏览器中预览效果，如图4.14所示。

图4.14 行内样式效果1

示例11

<HTML>

<HEAD>

<TITLE>行内样式表达式</TITLE>

</HEAD>

<P>

</P>

<p style=”color:#FF0000; font-size:18px;

Font-family:隶书;border-bottom-style:dashed”>

床前明月光，<BR>

疑是地上霜。<BR>

我是郭德刚，<BR>

低头思故乡。<BR>

</P>

<P>注释：

静夜思：宁静的夜晚所引起的乡思。

疑：怀疑，以为。

举：抬、抑。

</BODY>

</HTML>

示例11在浏览器中预览效果，如图4.15所示。

图4.15 行内样式效果2

从示例10和示例11可以看出，行内样式就是修饰某个标签，规定的样式只对所修饰的标签有效，对其他标签不起任何作用。

4.4.3 外部样式表文件

如果希望多个页面甚至整个网站所有页面都采用统一风格，就像军人、医生等专业人士都穿上统一的服装，干不同的活，起不同的作用一样，这怎么办？有了！把这些样式从标签中提取出来，放在一个单独的文件里，然后和每张网页关联不就可以了吗？完全正确，这就是马上要讲解的外部样式表。

根据样式文件与网页的关联方式，又分为两种：链接外部样式表和导入样式表，现逐一讲解。

1．链接外部样式表

链接外部样式表是指通过HTML的LINK（链接）标签，把样式文件和网页建立关联，这是早期浏览器的用法，其格式如下：

<HEAD>

</HEAD>

其中，rel = “stylesheet”表示在网页中使用这个外部样式表，type = “text/css”表示文本类型的样式，href = “newsyle.css”指定样式文件，样式表文件规定后缀名为*.css。具体的用法和链接方式如示例12所示。

示例12

（1）创建外部样式表文件。您只需把以前写在<HEAD>中的样式规则，写入到文件即可，假定取名为newsyle.css。newsyle.css文件中的样式规则代码如下：

P {

/*设置段落<P>的样式：字体和背景色*/

font-family: System;

font-size: 18px;

color: #FF00CC;

}

H2 {

/*设置<H2>的样式：背景色和对齐方式*/

background-color: #CCFF33;

text-align: center;

}

A { /*设置超链接不带下划线，text-decoration 表示文本修饰*/

color: blue;

text-decoration: none;

}

A:hover { /*鼠标在超链接上悬停，带下划线*/

color: red;

text-decoration:underline;

}

（2）把样式文件和网页绑定。假定某个网站中的Link_Outcss1.html网页和Link_Outcss1.html网页都引用newstyle.css样式表，引用方式如下：

<HTML>

<HEAD>

<TITLE>链接外部样式</TITLE>

</HEAD>

<BODY>

<P>床前明月光，<BR>

疑是地上霜。<BR>

我是郭德刚，<BR>

低头思故乡。</P>

<P>注释：

静夜思：宁静的夜晚所引起的乡思。

疑：怀疑，以为。

举：抬、仰。</P>

</BODY>

</HTML>

Link_Outcss2.html文件

<HTML>

<HEAD>

<TITLE>链接外部样式</TITLE>

</HEAD>

<BODY>

<P>国破山河在，<BR>

城春草木深。<BR>

感时花溅泪，<BR>

恨别鸟惊心。</P>

<P>注释：

诗的这四句，都统在“望”字中。诗人俯仰瞻视，视线由近而远，又由远而近，视野从城到山河，再由满城到花鸟。</P>

</BODY>

</HTML>

（3）预览链接了外部样式表HTML文档的效果。使用浏览器打开Link_Outcss1.html文件，效果如图4.16所示，打开Link_Outcss2.html文件，效果如图4.17所示。

图4.16 链接同一样式文件效果1 图4.17 链接同一样式文件效果2

从图4.16和4.17可以看出，引用同一样式的两个不同的HTML文档，具有相同的页面显示风格，不同的页面内容，因此，使用样式文件可以使多个页面保持统一的风格。

2．导入样式表

在网页中，还可以使用@import方法导入样式表，其格式如下：

<HEAD>

@import 样式表文件.css;

</style>

</HEAD>

其中，@import代表导入文件，前面规定有一“@”符号。

您可以将示例12中的链接样式表代码改为相应的上述代码，显示效果完全一样。

经验

如果有多个样式规则作用于一个页面时，样式规则起作用的优先级是：和内样式表（写在标签内的）>内嵌样式表（写在文档头部的）>外部样式表（在外部文件中）。

² 本章总结

Ø 样式表包括选择器和样式规则，样式规则是由属性和属性值组成。

Ø 类样式实现了样式规则的灵活共享。

Ø CSS中常用的样式属性，包括以下内容。

l 文本属性：用来控制文字的大小、类型、样式、颜色以及对齐方式。

l 背景属性：用来设置网页中某些元素的背景色或背景图像。

l 方框属性：用来控制网页中所有元素的边界距离，边框效果和填充间距。

l 特殊样式：指定某个标签的个别属性的样式，如锚记标签的相关属性样式。

Ø 样式分为行内样式、内嵌样式、外部样式。

一、选择题

1．下面哪一项是类的样式规则定义（）。

A． TD {color:red; font-family:”隶书”; font-size:24px;}

B． .H1 {color:red; font-family: “隶书”;}

C． #Fire {color:red; font-family:”隶书”; font-size:24px;}

D． P {background-color:#CCFF33; text-align:left;}

2．有关下列方框属性正确的是（）。

A．margin-left是设置对象的左填充

B．border-width是设置边框的宽度

C．padding-left是设置内容与右边框之间的距离

D．以上说法都不对

3．有关下面代码片段的说法，（）

A { color: blue; text-decoration: none; }

A:link{ color: blue; }

A:hover{ color: red; }

A:visited{ color: green; }

</STYLE>

A． A样式与A:link样式效果相同

B． A:hover是鼠标正在按下时链接文字的样式

C． A:link是未被访问的链接样式

D． A:visited是鼠标正在按下时链接文字的样式

4．（）样式表一般应用于大网站。

A．内嵌

B．链接外部

C．行内

D．嵌入

5．如果网站比较小（也就是最多只有3个页面），则可以使用（）样式表。

A．内嵌

B．嵌入

C．导入

D．以上都不是

二、简答题

1．使用CSS样式表有什么好处？

2．如何链接一个CSS文件？

3．请用HTML实现如图4.18所示的页面。

图4.18 细边框和图片按钮样式

提示

（1）设置页面的背景图像为login_back.gif，并且背景图像垂直平铺。

（2）使用类选择器，设置文本框的边框的细边框样式。

（3）使用类选择器，设置按钮的样式，按钮背景图像login_submit.glf;字体颜色：#FFFFFF；字体大小：14px;字体粗细：bold;按钮的边界、边框和填充均为0px;最后设置按钮的长度、宽度与按钮背景图像的长宽一样。

4．请用HTML实现如图4.19所示的页面。

图4.19 应用样式效果的页面

提示

（1）设计表格：3行4列。

（2）使用类选择器设置第一行的字体大小：16px;颜色：#2A1FFF；加粗：font-weight:bold.同理设置第三行突出显示的“翡翠手表”为红色。

（3）使用HTML选择器设置<TABLE>标签的样式，背景色：#FFCCFF。同理，设置<TD>标签的样式，字体颜色：#2A1FFF; 字体大小：14px;内容与边框之间的距离：5px.

（4）使用超链接伪类：不带下划线；颜色：#333333；鼠标悬停在超链接上方时，显示下划线；颜色：#FF5500；其中，第一行的箭头状图片为icon.gif。

第5章

使用Dreamweaver制作网页

本章工作任务

用Dreamweaver制作美观的“点卡购买”页面

用Dreamweaver制作美观的“用户注册”页面

用Dreamweaver制作美观的“客户中心”页面

本章技能目标

会用Dreamweaver工具实现已学的图像、文本、列表标签

会用Dreamweaver工具实现已学的表格

会用Dreamweaver工具实现已学的表单

会用Dreamweaver工具实现已学的框架

会用Dreamweaver工具实现已学的样式表

² 本章简介

在上一章中已介绍了CSS样式表,不仅介绍了样式表的基本语法,还讲解了如何使用常用的样式属性对网页的字体、背景、各种表单元素和超链接等进行美化，最后简单地介绍了3种不同的样式表应用场合。

本章开始讲解使用Dreamweaver制作网页，其中重点是使用Dreamweaver实现各类HTML标签和CSS样式，难点是如何制作样式。为了使我们制作的页面更规整，我们还要研究使用Dreamweaver如何实现表格对图文进行布局，表格对表单进行布局和框架页面。

² 本章单词

请在预习前完成下列单词

已学单词复习

1. style: __________________________ 2. class: ________________________

3. font-family: _____________________ 4. text-decoration: ________________

5. padding: _______________________

本章新单词

1. object: _________________________ 2. codebase: _____________________

3. circle: _________________________ 4. dashed: _______________________

5. param: ________________________ 6. flash: _________________________

7. noshade: _______________________

5.1 基本标签

HTML基本标签在此前我们都学过，怎么在这里又提起？不知大家发现没有，我们在前面都是手写HTML代码，速度很慢，效率很低，而且容易出错。那有没有一种比较好的编写HTML代码的工具？它既能提高速度，又能提高效率，还不容易出错。有！这个工具就是Dreamweaver，它不仅提供了强大的设计功能，而且还提供了自动代码提示功能。下面我们就使用Dreamweaver通过可视化操作来实现HTML基本标签，也就是在不写一行代码的情况下，能够快速、高效地实现各类HTML标签。

5.1.1 什么是基本标签

基本标签就是我们在制作网页时，常用的一些标签，如页面背景、标题、图片、换段、换行、超链接、颜色、字号大小、对齐、空格、列表，这些都是基本标签，也是常用的标签，如图5.1和图5.2所示。在前面已经学过这些标签，那为什么还要学呢？原因很简章，就是我们要用Dreamweaver通过可视化操作来实现这些标签，而不是手写代码，这样能大大提高开发效率，减轻网页设计人员、开发人员的负担。

图5.1 基本标签1

图5.2 基本标签2

5.1.2 如何使用基本标签

在使用基本标签前，我们必须先创建一个HTML文档，否则，我们的HTML标签就无处安身。

1．新建一个HTML页面

在Dreamweaver中新建页面，可采取以下3个步骤：

（1）选择“文件”→“新建”命令或按快捷键Ctul+N，弹出“新建文档”对话框。

（2）从“类别”列表框中选择“基本页”选项，然后从右侧的列表中选择“HTML”选项。

（3）再单击“创建”按钮。

新文档在“文档”窗口中打开，如图5.3所示。

2. 设置页面标题和背景

指定在浏览器窗口的标题栏中出现的网页标题，可帮助网站访问者了解网页内容的主题，很多搜索引擎（如Google、百度等）也是根据网页的标题进行搜索的。

每张页面都应该设定一个标题。

要设定标题，请在“文档”工具栏（如图5.3所示）的“标题：”文本框中输入标题，或者从菜单中选择“修改”→“页面属性”命令。

要设定背景，请在图5.3所示的“属性”面板中选择“页面属性”→“背景颜色”命令。

图5.3 Dreamweaver 8 新建文档界面

3. 插入图片

要插入图像，请执行以下步骤。

（1）将插入点放置在“文档”窗口中要显示图像的位置。

（2）选择“插入”→“图像”命令。此时，弹出“选择图像源文件”对话框，您可以在此对话框中浏览要插入到网页的图像。该对话框还包含“图像预览”选项。选择该项可以在插入图像闭月羞花，先查看该图像的缩略图。

（3）选择要插入的图像，然后单击“确定”按钮。图像即被插入到“文档”窗口中。

4．插入Flash

无论Flash文件是广告条、按钮，还是交互式动画，都可以转换为.swf格式。这种格式比标准GIF动画有更多功能，包括高级动画、下载速度更快和流功能。要插入Flash，请执行以下步骤。

（1）在“文档”窗口中，将插入点放置在要插入Flash的地方。

（2）选择“插入”→“媒体”→“Flash”命令。即会出现“选择文件”对话框（如图5.4所示）。

（3）选择一个影片文件。

（4）单击“确定”按钮。

在Flash文件即被插入“文档”窗口中，并显示为灰色矩形，矩形中间是Flash徽标。在“属性”检查器中可以设置影片的宽度的高度。

图5.4 “选择文件”对话框

5. 创建超链接

超链接（简称为超链接）是指向到另一文件（图形、音频、视频）或同一文档的另一个部分的链接。当用户单击超级链接时，就会跳转到链接中指定的网址（URL）。

第一种：使用Dreamweaver链接到其他文档

（1）在“文档”窗口中选择文件或某个图像作为链接。

（2）打开“属性”检查器（选择“窗口”→“属性”命令）。

（3）单击“链接”字段右边的文件夹（“浏览文件”）图标进行浏览，然后选择一个文件。

（4）此时将弹出“选择文件”对话框。在此可以浏览并选择想要链接打开的文件。

（5）在“选择文件”对话框中，到链接文档的路径显示在URL字段中。从“相对于”下拉列表框中选择路径是否相对于文档。

（6）单击“确定”按钮应用该链接。

（7）在“属性”检查器中，从“目标”下拉列表框中选择要打开文件的位置。要使链接不文档显示在除当前窗口或框架以外的其他位置，请从“目标”下拉列表框中选择一个选项。

第二种：使用Dreamweaver链接到同一文档的特定位置

通过首先创建命名锚记（通常也简称锚），然后使用“属性”检查器链接到文档的特定部分。

创建到命名锚记的链接的过程分为两步。首先，创建命名锚记，然后创建到该命名锚记的链接。

创建命名锚记，请执行以下操作。

（1）在“文档”窗口的“设计”视图中，将插入点放在需要命名锚记的地方。

（2）执行下列操作之一：

Ø 选择菜单“插入”→“命名锚记”命名。

Ø 按下Ctrl+Alt+A组合键。

Ø 在插入栏的“常用”类别中，单击“命名锚记”按钮。

此时将显示“命名锚记”对话框，如图5.5所示。

图5.5 “命名锚记”对话框

（3）为锚记命名。在此示例中，锚记名称设置为“helpme”。

锚记标记将会显示在插入点上。以类似方法在文档中创建任意多个锚记，如图5.6所示。

图5.6 在文档中创建的命名锚记

链接到命名锚记，请执行以下操作。

（1）在“文档”窗口的“设计”视图中，选择要从其创建链接的文本或图像。

（2）在“属性”检查器的“链接”文本框中，输入一个数字符号（#）和锚记名称。

例如：

要链接到当前文档中名为“helpme”的锚记，输入#helpme。

经验

由于锚记名称区分大小写，请在链接选项中仔细输入锚记名称。还需记住，在“链接”文本框中输入的名称必须与锚记的名称完全一致。

6．换段、换行

要将段落格式应用于文本块，请执行以下步骤。

（1）将插入点放置在文本块的任一位置。

（2）然后执行以下步骤之一：

Ø 从“属性”检查器中的“格式”下拉列表框中选择“段落”选项。

Ø 选择“文本”→“段落格式”→“段落”命令。

要将换行格式应用于文本块，请执行以下操作。

（1）将插入点放置在该文本块的需要换行的位置。

（2）然后按下Shift+Enter组合键。

7．格式化文本

在文档中输入文本后，若对文本的格式不满意，可在“属性”面板中设置文本的相关属性，如图5.7所示。设置文本属性具体操作步骤如下：

（1）选中要设置属性的文本，选择“窗口”→“属性”命令，打开“属性”面板如图5.7所示。

（2）选中文本后，在“属性”面板中单击“大小”右边的下拉列表框可改变字体的大小。

（3）选中文本后，然后执行以下步骤之一可改变文本对齐方式：

Ø 在“属性”面板中，单击“文本对齐”按钮。

Ø 选择“文本”→“对齐”命令，选择对齐方式。

（4）要改变文本的颜色，单击“属性”面板中的文本颜色卡右下角的下三角按钮，选择您喜好的颜色。

图5.7 “属性”面板

8．插入特殊字符

要在Dreamweaver中添加空格，请执行以下步骤。

（1）将插入点放置在要添加的空格的位置。

（2）选择“插入”→“HTML”→“特殊字符”→“不换行空格”命令，如图5.8所示。

图5.8 插入空格

9．创建列表

列表可有效地将主题或数据与文档的其他部分分开。最常用的列表类型有两种：项目列表和编号列表。项目列表也称为“无序列表”，编号列表也称为“有序列表”。

创建列表时，既可以先输入列表文本，再将其设置为项目列表/编号列表，也可以在输入文本时将其设置为项目列表/编号列表。通过“列表属性”对话框，可以应用不同的项目符号或编号样式。项目列表共有两种样式：项目符号（圆圈）和正方形。编号列表则有多种编号样式，如罗马字母和字母等。

要创建列表，请执行以下步骤。

（1）在文档中，将插入点放置在要显示第一个列表项的位置。

（2）请执行以下步骤之一：

在“属性”检查器中，单击“项目列表”或“编号列表”按钮，即出现项目符号或编号。

选择“文本”→“列表”→“项目列表”或“编号列表”命令。

（3）输入项目名称，然后按Enter键。

（4）输入下一个项目，再按Enter键。重复以上操作，直到完成添加所有列表项。

要改变整个列表的样式，请执行以下步骤。

（1）将插入点放置在列表中的任意位置。

（2）选择“文本”→“列表”→“属性”命令，或者单击“属性”检查器上的“列表项目”按钮，即出现“列表属性”对话框。

（3）从“列表类型”下拉列表框中选择一种列表类型。

（4）当“列表类型”为“编号列表”时，在“开始计数”文本框中，输入列表的起始编号。

（5）单击“确定”按钮应用修改。

5.2表格

表格当初主要用于数据的格式化显示，现在表格更多地用于排列网页中的内容，今天我们就一起来看看在Dreamweaver 8 里如何创建表格，以及如何使用表格对网页中的图文进行布局。

5.2.1什么是表格布局

表格布局就是为了精确定位、合理安排网页中的文字、图片等元素，它就像网页的脸面，是在一个限定的面积范围内合理安排、布置图像、文字等元素的位置，从而设计出版式漂亮的页面。如图5.9所示，就是一个使用表格布局的页面。

图5.9 表格布局文字和图片

5.2.2 表格的使用

如果我们要实现如图5.9所示的表格布局页面，该怎么办？不急！下面就一步一步地实现如图5.9所示的表格布局页面。请执行以下步骤：

（1）新建空白文档，然后选择“插入”→“表格”命令，以显示“表格”对话框，如图5.10所示。

（2）输入所需的行数为7和列数为4，选择“百分比”或“像素”为单位的表格宽度。

（3）在“边框粗细”后的文本框中输入边框宽度，如果不需要显示边框，请将值设为“0”。

（4）设置“单元格边框”和“单元格间距”。

（5）设置的相关值如图5.10所示，然后单击“确定”按钮。

图5.10 “表格”对话框

（6）选中第1行所有单元格，然后右击鼠标选择“表格”→“合并单元格”命令，高度设为34。同理，合并第3行所有单元格，合并第7行所有单元格，合并弟1列第4行、第1列第5行、第1列第6行这3个单元格，合并第2列第4行、第2列第5行、第2列第6行这个单元格，合并第4列第4行、第4列第5行、第4列第6行这3个单元格，合并后的效果如图5.11所示。

（7）按图5.9添加相关文字内容。

（8）光标定位到第4行第1个单元格里，然后依次选择“插入”→“表单”→“复选框”命令。

（9）在第1行单元格里插入图片“commodity_tablehead.gif”。同理，在相应位置插入图片commodity_huaping.jpg、online_pic.gif和list_tool_fav1.gif。

（10）在第4行最后一个单元格输入“一口价283.30”,然后在“属性”面板里设置此单元格背景颜色为“#FF99FF”和居中对齐。

图5.11 插入表格并合并相关单元格

（11）光标定位到第3行，然后切换到“代码”视图，如图5.12所示，在光标位置插入如下代码：

同理，在最后一行插入第2条虚线。

（12）按F12键就可以看到如图5.9所示的效果。

图5.12 切换到“代码”视图

5.3 表单

表单是HTML的一个重要部分，主要用于采集和提交用户输入的信息，它也是实现动态网页的一种主要表现形式。下面我们就使用Dreamweaver 8 快速地创建常用的表单页面。

5.3.1 什么是表单

表单是网站管理者与访问者之间沟通的桥梁，包含如按钮、文本框、下拉列表框、单选按钮、复选框等表单元素。表单元素用于接受用户的输入并提供一些交互式操作。用户输入的数据可以通过客户端脚本来验证，然后提交给服务器作时进一步的处理。

表单在万维网（www）上应用非常广泛，而且仍在不断发展。下面是一个“注册”表单的典型例子，如图5.13所示。

图5.13 “注册”表单界面

5.3.2 表单的使用

在Dreamweaver 8 中，如何实现如图5.13所示的“注册”表单页面？一看图5.13就知道这是一个表单，所以要插入表单，再仔细看看表单域里面的文字和表单元素是不是都很规整、井然有序？是的，这是什么在起作用？表格，所以这里还使用了表格对表单中的元素进行布局。经过这么一分析，我们基本上知道了图5.13所示的“注册”表单页面是由表单、表格以及表单元素构成的。

下面我们就一步一步地实现如图5.13所示的表单页面。

1. 插入表单

在Dreamweaver中插入表单时，表单以红线显示。用浏览器浏览时，这条线不会出现在网页上，仅在Dreamweaver中编辑时可见。添加到表单的每个项目都必须在表单内部，否则将视之为另一个表单，了解这一点是非常重要的。为了布局美观，您可以将表格和图形等对象放置到表单标签内。

要将表单插入网页，请执行以下步骤。

（1）新建空白文档，将插入放置在“文档”窗口内要插入表单的地方。单击“表单”工具栏中“表单”图标，或在菜单中选择“插入”→“表单”命令。

（2）此时Dreamweaver即插一个表单，如图5.14所示。在“设计”视图中，表单边框线显示为红色。如果未显示红色边框红，请选择“查看”→“可视化助理”→“不可见元素”命令。

单击表单边框线或选择“文档”窗口左下角表单标签（<form>）可以选中整个表单。

图5.14 “设计”视图中显示的表单

（3）将鼠标放到表单域内或选中表单域，此时在“属性”面板中就可以设置表单域的各项属性，如图5.14所示。

Ø 动作：此属性指定表单提交到服务器，处理表单信息的动态页或脚本文件的位置，一般是一个URL路径，可以单击“浏览文件”图标来选择适当的页面或脚本文件。这里指定为“www.regiser.com”。

Ø 方法：可指定用于将表单数据提交到服务器的方法。当用户提交表单时，有GET和POST两种方式可将浏览器的信息发送至服务器。选POST方式比较安全。

在设置好表单域的各个属性后，一个表单就创建好了。

2．插入表单元素

（1）在表单域里单击，然后插入一个10行2列的表格，合并最后1行所有单元格，再合并倒数第2行所有单元格，其他设置如图5.15所示。

图5.15 表格属性

（2）在表格的第1、第2、第3和第4行的第1列分别输入文本“登录名：”、“密码：”、“再次输入密码：”和“电子邮箱：”；先把光标定位到要插入表单元素的单元格，然后使用“表单”工具栏，在第2列中分别依次插入一个文本框、两个密码框和一个文本框，属性设置如图5.16和图5.17所示。

图5.16 登录名文本框属性设置

图5.17 密码框属性设置

（3）在表格的第5行第1列中输入文本：“性别：”；在第2列中插入一个单选按钮组，并调整两个单选按钮的位置，使其处于同一行，然后在相应位置后插入男女图标，其设置如图5.18所示。

（4）在表格的第6行第1列中输入文本：“爱好：”；在第2列中插入3个复选框，并在其后输入相应的文本，以提示用户的选择。

（5）在表格的第7行第1列中输入文本：“出生日期：”；在第2列中插入2个文本框和一个“列表/表单”。单击“属性”面板中的“列表值”按钮，设置其列表值如图5.19所示。

图5.18 按钮组属性设置图5.19 列表属性设置

（6）在表格的第8行第1列和第2列分别插入一个按钮，左边的按钮动作为“重设表单”，右边的按钮动作为“提交表单”，并修改右边按钮的值为“同意以下服务条款，提交注册信息”。

（7）在表格的第9行，直接插入一个文件域即可。

（8）在表格的第10行，先插入一个图标“read.gif”然后输入相应文本，最后插入一个多行文本域，其设置如图5.20所示。

图5.20 多行文本域属性设置

（9）把表格的第1列第1行到第9行单元格背景色设为“E7FBFF”。

最后所有的内容填充完和所有的表单元素插入完的效果如图5.21所示。

图5.21 “注册”表单元素在“设计”视图里的效果

5.4 框架

框架是将浏览器窗口划分成几个部分，将一些不需要更新的元素放在一个框架内作为单独的页面文档，这个文档是不变的，其他经常更新的内容放在主框架内。框架通常是由框架集和框架两部分组成，框架集实际上是一个页面。这个页面里包含了好多框架窗口，每个框架窗口可以单独显示一个HTML文档，这些HTML文档之间可以通过超链接联系起来，下面我们就使用Dreamweaver 8 快速地创建框架。

5.4.1 框架网页

框架将一个浏览器窗口分为多个独立的区域，每个区域（框架）显示一个单独的可滚动页面，每个框架都是浏览器窗口内的一个独立窗口。典型的框架网页如图5.22所示，这是关于某个电子商务网站的“客户中心”服务页面。该网页由3个框架组成，每个框架单独显示一张网页。顶部框架用于显示横幅广告，对应于网页top.html;左侧框架放置客户中心的一些服务列表，用于页面导航，对应于页面left.html；右侧窗口用于显示具体某项客户中心服务的信息，对应于页面right.html。为了浏览方便。当浏览者单击左侧客户中心服务列表的超链接时，右侧窗口显示相应的客户中心服务信息。

图5.22 网页中的多个框架

5.4.2 制作框架网页

Dreamweaver 8 提供了多种创建框架的方法，用户可以使用Dreamweaver 8 提供的预置框架集，也可以自己通过手写HTML代码任意地建立框架集。使用Dreamweaver 8 如何实现如图5.22所示的结构清晰、风格统一的框架集页面？下面我们就使用Dreamweaver 8 预置的框架集通过操作来实现如图5.22所示的框架集页面。制作过程如下。

1．新建框架网页

要新建框架网页，请事先规划好网页的设计布局，然后执行如下步骤。

（1）选择“文件”→“新建”命令。

（2）在“新建文档“对话框中，选择”框架集“类别。

（3）从“框架集“列表中选择一个合适的框架集，如图5.23所示。

图5.23 选择符合自己要求的框架集

（4）单击“创建”按钮，结果如图5.24所示。

2．设置框架集属性。

要设置框架的集的属性，请执行如下步骤。

（1）选中框架集：将鼠标指针移至某个框架的边框线上，然后单击，这时将选中整个框架集，如图5.24所示。

（2）设置框架集的边框宽度：通过“框架集”属性检查器，可修改边框设置为“是”，边框宽度设置为“1”，这里我们不设边框。

图5.24 框架集

要调整某个框架的宽度或高度，请将鼠标移至框架的边线上，左右或上下拖动。

3. 添加每个框架的内容

如果事先没有准备每个框架的网页内容，现在可以直接在这些空白的框架中插入内容，然后在保存的时候，将提示逐个保存每个框架的网页。

如果事先准备好了每个框架的网页内容，现在可以设置每个框架所关联的网页。由于我们事先已准备好了网页top.html、left.html和right.html。

下面我们就为每个框架设置对应的网页文件。

（1）选择“窗口”→“框架”命令，打开“框架”面板，展现框架的缩略图，如图5.25所示。

图5.25 框架面板

（2）单击“框架“面板中的每个框架，”属性“检查器中出现相应框架的属性，如图5.26所示。单击“源文件”旁边的文件夹图标，选择该框架对应的网页。

图5.26 设置框架对应的网页文件

（3）按照同样的方法设置其他框架所对应的网页。

（4）每个框架Dreamweaver都有个默认的名称，如顶部框架默认为topFrame，左侧框架默认为leftFrame，右侧框架默认为mainFrame，如图5.26所示。您也可以单击“框架名称”文本框，修改其名称，本例暂不修改。

（5）框架内容添加后的效果如图5.27所示。

4. 设置超链接

左侧窗口内容为“客户中心”服务项目，现在希望当用户单击这些服务项目超链接时，链接的网页将会在右侧主窗口中打开，右侧窗口的名称是“mainFrame”。

左侧窗口中的“客户中心”服务项目及其对应超链接如图5.27所示。

图5.27 添加网页内容的框架集页面

要达到上述效果，请执行如下步骤。

（1）选中要设置超链接的图片或文本，如“注册&认证”。

（2）选择“窗口”→“属性”命令，打开“属性”面板，如图5.28所示。

图5.28 超链接“属性”面板

（3）单击“链接文件”图标，选择链接文件，如“right.html”。

（4）单击“目标”下拉列表框，选择超链接在哪个框架中打开，这里为了在右侧框架打开，所以选择“mainFrame”。

（5）同理，设置另外两个超链接。

5．预览网页

要预览网页，请按快捷键F12或单击工具栏中的“预览”图标，将会看到网页的显示效果。单击左侧窗口中的“客户中心”服务项目，链接内容将在右侧窗口显示。

5.5 样式表

建立样式表的意义在于实现了统一管理网页的外观，设计者不仅可以通过修改样式表来改变单个网页的外观，而且还可以改变多个网页甚至整个网站的外观，从而大大减轻工作量，提高效率。下面我们就使用Dreamweaver 8 方便地、快速地编写样式文件。

5.5.1 什么是样式

让我们先看看图5.29所示的效果，图中的颜色、字体、字体大小、边框、图片等都很漂亮，其实这就是样式的功劳。所以说，如果把网页内容比喻为一个女孩的话，样式就好比这们女孩穿的衣服。女孩喜欢用漂亮的衣装来打扮自己，同样，我们的网页也需要华丽的样式来包装。

图5.29 应用了样式的注册页面

5.5.2 制作样式表

既然图5.29所示页面样式如此好看，那如何实现呢？其实，在Dreamweaver 8 中增添了新的标准“CSS样式”面板，通过它可以学习和使用以可视化方式应用于页面的CSS样式。下面我们就使用Dreamweaver 8 以可视化方式来创建样式表，接着应用创建好的样式表。

1. 创建样式表

创建如图5.29所示的样式表的具体操作步骤如下：

（1）选择“窗口”→“CSS样式”命令，打开“CSS样式”面板，在面板中右击鼠标，在弹出的菜单中选择“新建”命令，如图5.30所示。

（2）在弹出的“新建CSS规则”对话框中，设置内容如图5.31所示。单击“确定”按钮新建一个样式文件，并取名为”make_css1.css”，然后保存。

（3）单击“保存”按钮之后，就弹出定义“table的CSS规则定义”对话框，如图5.32所示，在图中设置方框的样式为”margin:4px; padding: 2px;”,边框的样式为“border:thin solid #FF99FF;”。同理，定义标签<BODY>的样式规则为“font-family: 宋体”；font-size: 12px;”,<A>的样式规则为“text-decoration: none; color:blue;”。

图5.30 新建样式图5.31 新建标签table的css规则

图5.32 table的CSS规则定义

（4）在“CSS样式”面板中右击鼠标，在弹出的菜单中选择“新建”命令，然后出现如图5.33所示的“新建CSS规则”对话框。定义一个名称为.picButton的类样式。然后定义其样式规则为“background-image:url(back.jpg); border:0 px; margin: 0px; padding; 0px; height: 23px; width: 82px; font-size: 14px;”。定义一个名称为.textBorder的类样式，然后定义其样式规则为“border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: sold;”。注意类的样式名前要加一个句点。

5.33 新建类picButton的CSS规则

2．应用样式表

CSS样式表创建完以后，就要对相关的页面进行样式的应用，起到美化页面的效果，应用CSS样式表的具体操作步骤如下：

（1）打开要应用样式的网页，如图5.34所示。

（2）在“属性”面板中单击“样式”下拉列表框，选择“附加样式表”选项，如图5.34所示。

图5.34 给打开的网页指定样式表

（3）选择“附加样式表”选项之后，会出现如图5.35所示的对话框，单击“浏览”按钮指定要链接的外部样式文件为“make_css”。

图5.35 设置打开的网页和指定的样式表绑定

（4）单击“确定”按钮，就完成了网页“use_css_form1.html”和样式表文件“make_css1.css”之间的绑定，也就是网页“use_css_form1.html”应用了样式表文件“make_css1.css”。应用样式之后的效果如图5.29所示。

² 本章总结

Ø 在设计网页时,可以使用Dreamweaver在网页中设置页面标题和背景、插入图片、Flash、文本、特殊字符等对象。

Ø 列表分为两类：有序列表和无序列表。

Ø 使用Dreamweaver可以高效快速地插入表格、表单以及表单元素。

Ø 表格可在一定程度上控制文本、图像和表单元素在网页中的位置，而不是完全由浏览器对此进行控制。

Ø 框架将Web 浏览器窗口分割为多个独立的区域，每个区域显示一个可独立滚动的页面。

Ø CSS样式表可以将网页制作得更加美观大方、绚丽多彩。

一、选择题

1．“页面属性”对话框中的（）用于设置将显示在Web浏览器的标题栏上的页面名称。

A．文本

B．标题/编码

C．脚本

D．HTML

2．命名锚记（）。

A．不能链接两个不同的网页

B．能链接同一网页的不同部分

C．不能链接同一网页的不同部分

D．以上都不是

3．请先阅读下面的代码，然后选择一个正确的答案（）。

</TD>

</TR>……

A．bgcolor修饰的是行的背景色，background修饰的是表格的背景图片

B．bgcolor修饰的是表格的背景色，background修饰的是行的背景图片

C．bgcolor修饰的是单元格的背景色，background修饰的是单元格的背景图片

D．bgcolor修饰的是表格的背景色，background修饰的是单元格的背景图片

4．请先阅读下面的代码，然后选择一个符合要求的答案（）。

A．上面的代码表示的表单元素类型分别是：文本框、单选按钮、复选框、文件域

B．上面的代码表示的表单元素类型分别是：文本框、复选框、单选按钮、文件域

C．上面的代码表示的表单元素类型分别是：密码框、多选按钮、复选框、文件域

D．上面的代码表示的表单元素类型分别是：文本框、单选按钮、下拉列表框、文件域

2．请先阅读下面的代码，根据代码意思选择一个正确的答案（）。

</FRAMESET>

A．将浏览器分割成2个窗口

B．将浏览器分割成3个窗口

C．将浏览器分割成4个窗口

D．以上都不是

三、简答题

1．请用Dreamweaver实现如图5.36所示的图文并茂的页面。

图5.36 图文并茂的页面

2．请用Dreamweaver实现如图5.37所示的表格布局页面。

图5.37 表格布局页面

提示

先创建9行2列的表格，然后合并相关单元格，接着插入图片和文字，最后设置一个超链接。

3．请用Dreamweaver实现如图5.38所示的表格对表单的布局页面。

图5.38 表格对表单的布局页面

提示

先插入表单，然后在表单域里插入9行2列的表格，再合并第1行单元格，接看插入文字和表单元素，最后设置一些简单的样式。

4．请用Dreamweaver实现如图5.39所示的应用了样式的表格对表单的布局页面。

图5.39 应用了样式的页面

提示

应用了细边框样式、按钮图片样式和表格样式。

第6章

网站设计和页面布局技术（一）

本章工作任务

创建淘宝网站点

设计首页的整体布局

制作首页的导航部分

制作首页的淘宝集市部分

本章技能目标

能使用网站设计流程分析简单网站的设计

能使用DIV层技术进行页面整体布局

能使用表格进行图文内容的布局

² 本章简介

上一章中，主要介绍了使用Dreamweaver通过可视化操作来实现网页中的各种元素，既学习了如何使用Dreamweaver在网页中设置页面标题，背景和插入各种对象，又学习了使用Dreamweaver来创建表格布局和实现表单页面，还研究了框架相关知识。另外，为了制作出赏心悦目的网页，我们还学习了在Dreamweaver中如何快速地创建和应用样式表。

从本章开始，我们将学习网站设计和布局技术，其中重点是熟悉网站的开发流程，DIV层和表格布局各自的使用场合，以及网站开发的一些经验、技巧；难点是如何进行网页布局。

² 本章单词

请在预习前完成下列单词

已学单词复习

1. dashed: ________________________ 2. noshade: ______________________

3. param: ________________________ 4. codebase: ______________________

5. object: __________________________

本章新单词

1. layer: ___________________________ 2. position: ______________________

3. z-index: ________________________ 4. scrolling: ________________

5. noresize: ________________________ 6. firefox: ______________________

7. explorer: ________________________

6.1 网站的开发流程介绍

创建一个商业网站，要做好商业网站开发的前期准备、中期制作和后期的测试发布工作。前期准备包括了解网站的业务背景、明确网站的设计风格、确定网站内容等；中期制作主要包括创建站点、制作首页、制作模板和制作样式；后期的测试发布工作包括检查页面效果是否美观、链接是否完好、不同浏览器的兼容性以及如何发布网站。本章和下一章将结合淘宝网案例逐一介绍这些内容。

6.1.1 需求分析

需求分析就是分析客户的需求是什么。如果投入大量的人力、物力、财力，开发出的网站却没人要，那所有的投入都是徒劳，因此，网站前期的需求分析是相当重要的。

需求分析之所以重要，就因为它具有目地性、方向性、决策性，它在网站开发的过程中具有举足轻重的地位，大家一定要对需求分析具有足够的重视。在一个大型商业网站的开发中，它的作用要远远大于直接设计或编码。简言之，需求分析的任务就是解决“做什么”的问题，就是要全面地理解客户的各项要求，并且能够准确、清晰地表达给参与项目开发的所有成员，保证开发过程按照客户贩需求去做，而不是为技术而迁就需求。

1．客户需求

（1）业务背景

做任何事情之前，要明确的是为什么要做这件事情，网站建设也不例外，要分析、理解、领会客户的需求，这就要求网站开发项目经理对网站的业务背景有较好的理解和把握。

不同的业务背景有不同的需求，不同的需求导致做出来的网站千差万别。不过，根据网站的主题、题材、客户需求和客户企业的业务背景，可以把网站大致上分为不同的类别。下面就是美国《个人电脑》杂志（PC Magazine）把网站分为以下10类。

Ø 网上求职类。

Ø 网上聊天/即时信息/ICQ类。

Ø 网上社区/讨论/邮件列表类。

Ø 信息技术类。

Ø 网页/网站开发类。

Ø 娱乐类。

Ø 旅行类。

Ø 参考/资讯类。

Ø 家庭/教育类。

Ø 生活/时尚类。

这些分类仅供我们参考，但同时也提醒我们，建设网站不要建设“面面俱到”型的，可能导致“面面不到”，而是要建设专业性强的、主题鲜明的网站。

每个大类都可以断续细分，比如娱乐类再分为体育/电影/音乐等小类，体育小类又可以按运动形式分为足球、篮球、排球、乒乓球等。同时，各个题材相联系和交叉结合可以产生新的题材，例如足球加讨论就是足球论坛、旅游加社区就是旅游社区等。这么多种类，如何选择？可以遵循如下原则，第一、主题要小而精炼；第二、题材最好是自己熟悉的；第三、题材不要太滥。

下面我们就以淘宝网案例为例来分析商务网站的业务背景。

从大的方面讲：中国现在上网的人越来越多，还有广大人民的消费水平越来越高、消费能力越来越强；此外，网上交易是一种发展趋势，并且在欧美一些国家得到成功的应用。从小的方面说：如果阿里巴巴公司原来主要是通过店面、邮购等方式销售产品或服务，或者公司有很多本地之外的潜在客户可以挖掘，出于这方面的业务背景，建立在线商务网站是非常合适的，因此，阿里巴巴就着手创建了淘宝网，这不仅降低了运营成本，而且为顾客带来了实惠和便利，还能增加销售量、吸引更多的潜在客户。在线商务网站为广大客户提供在线商品展示、在线商品购买、交互服务和管理的平台，借助电子商务软件，客户便可以不受时间、空间的限制使用银行卡在线订货和购买。从商业模式上看，“在线商务网站”不同于“网上商城”的概念，后者是为商家出租或免费提供“网络空间”的形式。从营销模式上看，网站是一种有力的营销媒介。网站的建设是一个不断修改、不断完善、循序渐进的过程，如果您想从网络中受益，那就赶快行动吧！

当初创建淘宝网的目标是建立全球最大最活跃的网上贸易市场，让天下没有难做的生意，而且淘宝网是一个目前比较火爆的网上在线商务网站，如图6.1所示，可以看出淘宝网具有在线商务网站的典型优点。第一、体现了在线销售的方便性；第二、体现了在线服务的及时性。总之，方便、及时是在线购物网站的主要特点。

图6.1 淘宝网主页

（2）设计风格

在掌握了网站的业务背景之后，就可以明确网站的设计风格。

网站的风格是指站点给人留下的整体印象。这个“整体印象”包括站点的标志、色彩、字体、标语和版面布局、浏览方式、交互性、文字、语气、内容价值、存在意义、站点荣誉等诸多因素。如：搜狐网站看上去就是平易近人的，迪斯尼则是生动活泼的，IBM是专业严肃的，这些都是网站给人们留下的不同感受。

风格是独特的，是站点没同于其他网站的地方。或者色彩，或者技术，或者交互方式都能让浏览者分辨出网站给人们留下的不同感觉。

风格是独特的，是站点不同于其他网站的地方。或者色彩，或者技术，或者交互方式都能让浏览者分辨出网站的独有特色。例如黑客网站、游戏网站一般都是黑色调，这种黑色调能反映出此类网站的神秘和诱人之处。

通过网站的外表、内容、文字、交流可以概括出一个站点的个性、情绪。是温文儒雅还是执著热情？是活泼易变还是放任不羁的？是“豪放派”还是“婉约派”？要树立好的网站风格，请参照以下几个方面：

Ø 合理的网页布局。

Ø 让网站logo尽可能地出现在每个页面的页眉中。

Ø 将文字、链接、图片、背景、边框等尽量与主色调一致。

Ø 突出字体特色。在关键的标题、菜单、图片里使用统一的字体和颜色。

Ø 使用特效，让网页看起来生动活泼。

Ø 网站主题鲜明、整体实用性强，内容切合度好等。

像淘宝网具有主题鲜明、色彩亮丽、简洁明快、时尚生活的设计风格。

（3）网站内容

一个网站应该具备什么样的功能，采取什么样的表现形式，并没有一个统一的模式。不同形式的网站其内容也千差万别。因此，网站中的内容应该根据客户的需求，企业的业务背景确定。对于网站的表现形式，应根据网站的设计风格来确定。下面我们就以淘宝网为例，来简单地介绍一下淘宝网的主要内容，其主要内容如下：公司简介、商品分类、商品展示、价格信息、商品搜索、网上订单、会员注册、客户服务等。

2．确认需求

经过细致的需求捕获活动之后，我们就可以开始着手制作网站，不过，不要急！我们在真正制作网站之前，最好让美工或UI（User Interface，用户界面）设计人员将需求捕获活动的结果加以适当的分析，然后设计一个用户可以直接感知的静态的网站样板，也就是要做网站的静态片版。方便客户与开发人员就网站系统的业务背景、设计风格、网站内容达成共识，并建立需求变更制度与流程，方便后期的制作与完善。

6.1.2 网站制作

经过需求分析阶段之后，我们就可以正式制作网站。网站的制作主要包括创建站点、制作首页、制作模板和制作样式。创建站点能很好地管理我们的网页文件和文件夹，所以在网站制作阶段创建站点是我们首先要考虑的问题。首页是一个网站的门面，是一个网站的灵魂，因此，首页制作的好坏是一个网站成功的关键所在。制作模板便于设计出具有统一风格的网站，并且模板的运用能为网站的更新和维护带来极大的方便，为开发出优秀的网站奠定了基础。样式表是一个很神奇的东西，它能把网页制作得更加绚丽多彩，使网页呈现不同的外观。当网站有多个页面时，修改页面链接的样式表文件即可同时修改多个页面的外观，从而大大地提高工作效率，减少工作量。

6.1.3 测试网页

测试网页主要从3个方面着手，第一、页面的效果是否美观；第二、页面中的链接是否完好；第三、是最重要的也是最烦的一点，就是要兼容不同的浏览器（如Internet、Explorer、Mozilla Firefox等）。对于网页是否美观，仁者见仁，智者见智，那怎么办呢？不过有章可循，可以从页面整体视觉效果、美工设计、页面布局、内容实力、亲和力等方面进行检查。对于链接是否完好，可以使用Dreamweaver里的“检查链接”命令来检查，详细的检查步骤请参照第7章。对于兼容不同浏览器，也可以使用Dreamweaver来检查，详细内容请参看第7章。

6.1.4 发布网站

网站设计好了，经测试之后，就可以放在服务器上发布，这样，能让更多的人知道您的网站。

发布网站有两种方式，一种是本地发布，即通过本地计算机来完成，在Windows操作系统中，一般通过IIS来构建本地Web发布平台，这种发布方式只能让局域网中的用户访问您的站点；另一种是远程发布，即登录到Internet上，然后利用有些Internet服务商提供的个人网络空间来真实的发布自己所建的网站，不过，这种发布方式要先申请一个域名和虚拟主机，申请成功后Internet服务商就会给您一个IP地址、用户名和密码，使用此IP地址、用户名和密码就可以把您的网站上传到Internet上，只有这样，才能让Internet上的用户访问您的站点。可以根据自己的需要来选择不同的发布环境。

6.2 创建站点

Micromedia Dreamweaver 8 不仅提供了强大的网页编辑功能，而且不具有强大的网站管理功能。Dreamweaver 8 强大的网站管理功能，可以管理和维护站点并将站点文件上传至本地或远程服务器。下面我们就使用Dreamweaver 8来建立本地站点。

假设要建立淘宝网站点，取名TaobaoWeb，该站点将包含大量有关商品的信息。

要开始建立这个站点，请在计算机的硬盘驱动器中创建名称为“TaobaoWeb”的文件夹，然后把本地站点的根目录建在这里，一个本地根目录对应一个网站。

创建一个站点的具体步骤如下：

（1）在本地硬盘上创建一个文件夹，用于存放站点，假如我们在D盘驱动器下创建名为“TaobaoWeb”的文件夹，这个文件夹可以是空的，也可以非空。

（2）选择“站点”→“管理站点”命令，然后在弹出的“站点管理”对话框中选择“新建”→“站点”命令，此时将弹出“站点定义”对话框。

（3）在“站点定义”对话框中，如图6.2所示输入站点名称“TaobaoWeb”，然后单击“下一步”按钮。该站点名称仅供参考，将不会显示在Web上。

图6.2 “站点定义”对话框

（4）在出现的“TaobaoWeb的站点定义为“对话框中，选择”否，我不想使用服务器技术“单选按钮，然后单击”下一步“按钮。

此对话框的目的在于确认是否要在网站中使用任何服务器技术（ASP、ASP.NET等）。

如果要在页面中使用任一服务器技术，则必须选择“是，我想使用服务器技术”单选按钮。由于当前正在建立静态网站，因此选择了“否，我不想使用服务器技术”单选按钮。

（5）选择“编辑我的计算机上的本地副本，完成后再上传到服务器（推荐）“单选按钮，如图6.3所示。这是推荐的编辑方法。如果在公司的Web服务器或直接在Internet上编辑网页，则将选择“使用本地网络直接在服务器上进行编辑”单选按钮。

图6.3 选择本地根文件夹

（6）单击“您将把文件存储在计算机上的什么位置？”文本字段旁的文件夹图标（如图6.3所示）。文件夹图标用来选择存储网页的根文件夹。

（7）在“选择站点TaobaoWeb的本地根文件夹：”对话框中，单击“选择”下拉列表框的下三角按钮，然后选择在D盘驱动器下已创建的文件夹“TaobaoWeb”（如图6.4所示）。

如果是刚刚开始建立网站，则需要先创建文件夹，然后选择它。

（8）单击“选择”按钮之后返回，然后单击“下一步”按钮。

（9）在“您如何连接到远程服务器？”选项中，从下拉列表框中选择“无”选项，然后单击“下一步”按钮。单击“下一步”按钮时，将显示一份总结，简要描述了选定的选项。如果对选定的选项满意，则断续执行下一步骤，否则请单击“上一步”按钮进行修改。

图6.4 选定的本地根文件夹

（10）单击“完成”按钮

（11）在“文件”面板中，选中“站点-TaobaoWeb”，然后右击鼠标选择“新建文件夹”命令，接着给新创建的文件夹取名为“images”，这样就可以在根目录下创建一个名为“images”的文件夹，它可以用来存放网页中的图片。

图6.5 创建名为“images”的文件夹

1．本地站点

本地站点是指存储Web文件和文档的文件夹。定义站点是在Dreamweaver中设计网站的第一步，此时设计人员将指定根文件夹的位置。

本地站点包含网站的文件，这些文件存储在本地磁盘上。每当需要更新网站的文件时，就可以编辑本地站点中的相应页面，然后上传到远程服务器进行更新。

必须为每个网站都定义一个本地站点。

2．远程站点

远程站点也就是常说的网站（Web）服务器。

在建立远程站点之前，必须先创建一个本地站点（该本地站点将与远程站点关联）。建立远程站点之后，即可根据需要上传文件和将文件下载到本地站点中。

3．根文件夹

存储所有网站文件的本地文件夹。

站点的本地根文件夹应该是专门为该站点创建的。

本地站点建立完毕，就好像我们盖好了一所房子，如同给我们的网站安了家，不过这个家还是空空四壁，摆放好家具用品之后才能叫做家，所以我们就要添置家具、购买电器、粉刷墙壁等。这就像要给我们创建好的站点需要添加内容一样，因此，我们也要给刚创建好的站点制作页面、创建文件夹、收集图片等来充实我们的“家”。

6.3 制作淘宝网首页

本地站点建立好之后，下面我的新“家”添置物品。首先来制作我们“家”的门面（首页）。首页制作得好坏基本上决定了这个网站的成功与否，所以首页的制作是非常重要的。下面我们就从页面内容和页面布局两个方面来开始首页的制作之旅。

6.3.1 页面内容

网站内容，不仅是大型ICP（Internet Communication Provider）网站的生命源泉，对于企业网站网络营销的效果同样是至关重要的。为了吸引更多的用户，对于企业网站来说，更应在内容方面下大功夫。我们就以淘宝网案例为例，来了解一下淘宝网首页有哪些内容。

1．导航部分

几乎每个网站里，为了方便用户对网站的内容有个整体的了解，为了方便用户在一个复杂的网站中进行页面之间的跳转，而不至于“迷失方向”，就必须要设计导航部分，因为导航部分对整个网站内容有提纲作用，访问者可以根据页面上的导航部分链接轻松进入其他页面，从而提高浏览效率，节省访问时间。此外，导航部分还有搜索引擎，能帮助用户快速找到自己想要的商品。如图6.6所示，淘宝网页面最上面部分就是导航部分，主要由商品类别、搜索引擎、帮助等组成，这些内容对大家制作购物网站有借鉴意义。

2．广告部分

图6.6所示的广告部分，选定店庆日、开张日、节假日等适当时间，作促销宣传，吸引大量人潮前来参观，加深消费者对我们在线购物网站的特别印象，促进销售达到高潮。

此外，还可以为一些商家商品作广告，达到促销的目的。这样，不仅给顾客带来实惠，而且也给我们带来更多的收益，还提高了品牌制造商商品的知名度。

3．商品分类部分

图6.6所示的中间部分，主要是商品的分门别类，方便不同年龄、不同爱好的用户快速找到自己想要的商品。

图6.6 淘宝网案例首页内容

6.3.2 页面布局

在开始做网站之前，网站呈现在您面前的就好像一张白纸，它需要您任意挥洒您的设计才思。如何将6.3.1节中确定的页面内容按照设计图的设计组装成一个完美的HTML文档？这就需要用页面布局技术，目前比较流行的布局有3种，即框架布局、表格布局和DIV层布局，每种布局都有优点和缺点，有没有一种布局能尽量嚷括这些布局的优点，而尽可能地摒弃这些布局的缺点呢？当然有，那就是最佳布局。

1．框架布局

不知道什么缘故，使用框架布局的人越来越少，可能是因为它在不同浏览器之间的兼容性不好；也有可能是保存框架集网页比较麻烦，保存时不但要保存框架集本身页面，还要保存每个框架窗口中的HTML文档；更有可能是应用范围有限的原因。除此之外，框架也有不少优点，比如：它能在框架窗口中支持滚动条，从而能显示更多的内容；还能有效的实现页面导航工作，从而方便用户浏览网页；由于框架集中相同的内容只用下载一次，不同的内容才需要重新下载，所以使用框架布局能减少页面下载时间。

从布局上考虑，框架布局有它存在的理由，支持框架结构不失为一个好的选择。其实，在因特网上使用框架布局的网页还不少，例如，如图6.7所示的BBS论坛页面，还有一些小型的商业网站以及各种网页形式的学习教程，此外在一些网站的后台管理页面中也常常用到框架技术。

图6.7 BBS论坛页面

对于淘网宝首页大家想想用框架布局合理吗？根据框架布局的优缺点，淘宝网首页显然不适合使用框架布局，那我们接着探讨一下表格布局，看表格布局是否适合用来布局淘宝网首页？

2．表格布局

表格当初出现的初衷是用来存放内容，根本不是用来布局的。由于使用表格来布局页面的人多了，才有表格布局这一说法。表格布局好像已经成为一个标准，随便浏览一个站点，它们一定存在表格布局。表格布局的优势在于能很方便地排列有规律、结构均匀的内容或数据（如图6.8所示），而且表格在定位图片和文本上比起用CSS更加方便，因此，表格适合用来布局很规整的内容或数据。表格布局的缺点是，当你用了过多表格时，会产生过多的垃圾代码，还会影响页面的下载时间。另外当页

面布局需要调整时，往往都要重新制作表格，因此表格布局的灵活性不大、难于修改。

任何事物都有两面性，表格布局也不例外，因此，我们应该尽量少用其缺点，多多使用其优点来为我们服务。虽然表格的缺点不少，但是在因特网上使用表格的网页随处可见。几乎所有的网站都用过表格，没用过表格的网站简直就是凤毛麟角。因此，表格布局绝对不可抛弃。

对于淘宝首页大家想想用表格布局合理吗？根据表格布局的优缺点，淘宝网首页如果采用了表格布局，那肯定会产生较多的冗余代码，而且不便于修改、扩展，还会影响页面的下载时间。那如何是好？不急！办法是有的，下面我们接着讨论DIV层布局，看DIV层布局是否适合用来布局淘宝网首页？

图6.8 表格布局页面

3．DIV层布局

DIV层布局离不开CSS的配合，业界越来越关注DIV+CSS的标准化设计，大到各大门户网站，小到不计其数的个人网站，在DIV+CSS标准化的影响下，网页设计人员已经把这一要求作为行业标准。那么什么是DIV+CSS标准？DIV+CSS的标准化设计到底有什么好处？下面为大家一一揭开谜底。

CSS+DIV是网站标准中常用的术语之一，通常为了说明与HTML网页设计语言中的表格定位方式的区别，因此XHTML网站设计标准中，不再使用表格定位技术，而是采用CSS+DIV的方式实现各种定位。

CSS是英语层叠样式表单（Cascading Style Sheets）的缩写，它是一种用来表现HTML、XML等文件式样的计算机语言。

DIV元素是用来为HTML文档内大块的内容提供结构的背景的元素，就像一个容器一样可大可小、可长可短、可宽可窄。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块进行控制。

采用DIV+CSS标准的好处有：

Ø 减少页面代码，加快页面下载，提高页面显示速度。

Ø 结构清晰，容易被搜索引擎搜索到。

Ø 改版方便，而且缩短改版时间。

Ø 强大的字体控制和排版能力。

Ø 表现和内容相分离，方便美工与程序员分工协作。

Ø 更能体现样式和结构相分离，结构的重构性强。

Ø 在几乎所有的浏览器上都可以使用。

Ø 你可以轻松地控制页面的布局。

Ø 你可以将许多网页的样式同时更新，不用再一页一页地更新了。

Ø 你可以将站点上所有的网页风格都使用一个CSS文件进行控制，中要修改这个CSS文件中相应的样式规则，那么整个站点的所有页面都会随之发生变动。

当然任何新事物的出现，并不都是完美的，而是一把双刃剑。因此利用DIV+CSS来布局网页也不例外，所以DIV+CSS标准也存在缺点。其主要缺点是比较灵活、难于控制、对网页设计人员要求比较高，这些就会带来更高成本和耗费更长的时间。因此，DIV+CSS对于中小型网站来说，意义不大；比较适合用来制作复杂的不规则页面、业务种类较多的大型商业网站。为了加深对DIV层布局的理解，下面就来体验一把什么是DIV层布局。

使用Dreamweaver来绘制如图6.9所示的层布局的页面，具体操作步骤如下：

图6.9 DIV层布局页面

（1）打开Dreamweaver，新建一个空白文档。

（2）在插入栏的“布局”类别中单击“绘制层”按钮。

（3）在“文档资料”窗口的“设计”视图中，执行下列操作之一：

按下鼠标左键拖动以绘制一个层。

通过按住Ctrl键并按下鼠标左键进行拖动来连续绘制多个层（只要不松开Ctrl键，就可以断续绘制新的层）。

（4）绘制完如图6.9所示的3层之后，选中第一个层，然后在“属性”面板中设置层的背景色为红色，如图6.10所示。同理，为第二个和第三个层分别设置背景色为黄色和绿色。最后的页面效果如图6.9所示。

图6.10 设置层的背景色

图6.9DIV层布局页面对应的HTML代码如下：

示例1

<HTML>

<HEAD>

<TITLE>div创建步骤</TITLE>

</STYLE type=”text/css”>

#Layer1 {

position:absolute;

left:9px;

top:12px;

width:418px;

height:58px;

z-index:1;

background-color: #FF0000;

}

#Layer2 {

position:absolute;

left:9px;

top:72px;

width:419px;

height:55px;

z-index:2;

background-color: #FFFF00;

#Layer3 {

position:absolute;

left:9px;

top:128px;

width:419px;

height:58px;

z-index:3;

background-color: #009900;

</STYLE>

</HEAD>

<BODY>

</BODY>

</HTML>

示例1中的#Layer1是一个ID选择器,ID选择器使用HTML元素的ID属性,其用法与类选择器很类似。ID选择器的定义格式为：

#ID名{

样式规则； }

注意ID名前面有“#”号，ID名也可以随意命名，但在整个网页中必须唯一，不能重名。某个标签（如<DIV>）希望采用该ID选择器的样式，语法格式为：

4．最佳布局

对于淘宝网首页大家想想用DIV层布局合理吗？根据DIV层布局的优缺点，淘宝网首页的确非常适合采用DIV层布局，不过，还有一丝疑虑，就是淘宝网首页中还有很多有规律、结构均匀的内容或数据，如果用DIV层来布局将是一件非常痛苦的事，那怎么办？有了！对于复杂的不规则的区域，我们采用DIV层布局；对于有规律、结构均匀的内容或数据，我们采用表格布局。这样就能很好地解决淘宝网页面布局问题，这也说明对于大型的商业网站，最佳布局方式是DIV层布局+表格布局。

示例2

（1）打开HTML文档，在<HEAD>与</HEAD>之间相应位置输入以下代码：

#head {

position:absolute;

left:10px;

top:6px;

width:950px;

height:100px;

z-index:1;

}

#content {

position:absolute;

left:10px;

top:110px;

width:950px;

height:139px;

z-index:2;

background-color: #009900;

}

#foot {

position:absolute;

left:10px;

top:252px;

width:950px;

height:131px;

z-index:3;

background-color: #FFFF00;

}

</STYLE>

（2）在网页<BODY>与</BODY>之间相应的位置输入如下代码：

<TR>

</TR>

<TR>

<TD colspan=”6” align=”right”>您好，欢迎来淘宝！

[<A herf=”register/register.html” target=”_blank”>

免费注册</A>] [<A href=”login/login.htm” target=”_blank”>

</TD>

</TR>

</TABLE>

</DIV>

（3）保存文档，在浏览器中预览效果，如图6.11所示。

图6.11 DIV+Table布局页面效果

² 本章总结

Ø 需求分析是对业务的深入分析，准确捕获客户想干什么。

Ø 网站制作主要包括创建站点、制作首页、制作模板和制作样式。

Ø 测试网页主要从3个方面进行，即页面是否美观、是否有死链接和能否兼容不同浏览器。

Ø 首页的制作可以从页面内容和页面布局进行着手。

Ø 框架布局有存在的理由，表格布局不可抛弃，DIV层布局是发展趋势。

一、选择题

1．下面（）是ID的样式规则定义。

A．TR { color:red; font-family:”隶书”; font-size:24px; }

B．.H2 { color:red; font-family:”隶书”; }

C．#grass { color:green; font-family:”隶书”; font-size:24px; }

D．P { bacdground-color: #CCFF33; text-align: left; }

2．采用DIV+CSS标准的好处有（）。

A．减少页面冗余代码

B．更容易修改和维护

C．容易被搜索引擎搜索到

D．可以轻松地控制页面的布局

3．有关下面片段代码的说法，（）是正确的。

#head {

position:absolute;

left: 9px

top: 12px;

width: 418px;

height: 58px;

background-color: #FF0000;

}

A．#head是类样式选择符

B．position:absolute;表示绝对定位，也就是被定位的元素位置固定不变

C．width:418px; height:58px; 表示被修饰的元素距离别的元素的左右和上下边距

D．background-color: #FF0000; 表示被修饰的元素的背景图像

4．一般网页由（）组成。

A．导航部分

B．内容部分

D．新闻部分

5．在网页设计中，涉及到的页面布局有（）。

A．框架布局

B．表格布局

C． DIV层布局

D．混合布局（框架布局、表格布局和DIV层布局的组合）

二、简答题

1．简述建设一个网站的一般开发流程。

2．简述3种页面布局的优点及使用场合？

3．请用表格布局实现如图6.12所示的页面效果。

图6.12 使用表格布局图文并茂的页面

提示

（1）创建一个8行4列的表格，然后合并相关单元格。

（2）在单元格里插入图片，添加文字，并设置文字的字体大小、颜色和类型。

5．请用DIV层加表格布局实现如图6.13所示的页面效果。

图6.13 应用样式效果的页面

提示

（1）创建两个DIV层，一个DIV层用于导航栏布局，另一个用于广告部分。

（2）分别在每个层里插入表格，然后合并相关单元格，接着在单元格里插入图片、Flash和添加文本内容。

（3）给<BODY>和<TD>标签指定样式。

第7章

网站设计和页面布局技术（二）

本章工作任务

制作网站的模板页

用模板重新制作“装备”的商品展示页

用模板制作“装备”商品的详细介绍页

用模板制作商品“购买页面”

制作样式表文件并和其他页面绑定

本章技能目标

会使用Dreamweaver制作模板并应用到其他页面

会使用Dreamweaver制作样式表文件并绑定到各页面

会使用网站开发流程制作并发布网站

² 本章简介

上一章中，首先介绍了一般网站的开发流程，其主要流程有需求分析，网站制作，测试网页和发布网站。随后简单讲解了淘宝网首页有哪些内容？最后着重研究了页面布局技术，其中框架布局和表格布局有存在的必要，不可抛弃，DIV层布局是未来的发展趋势。

从本章开始，我们将继续学习网站制作相关知识。所有的页面制作好之后，我们就要测试页面内容，来审视我们制作的页面是否美观，来检查页面中是否有死链接，来查看页面是否可以兼容不同的浏览器。测试完之后，为了使更多的人知道您的网站，就必须把我们制作，测试好的网站在网上进行发布。这一章的内容都是重点，难点是如何调整页面和其他浏览器的兼容性。

² 本章单词

请在预习前完成下列单词

已学单词复习

1. layer: _________________________ 2. position: _____________________

3. z-index: _______________________ 4. scrolling: ____________________

5. firefox: _________________________

本章新单词

1. Templates: _______________________ 2. line-height: __________________

3. information: _____________________ 4. services: _____________________

5. server: ________________________ 6. enterprise: ___________________

7. edition: ________________________

7.1 制作模板并应用到其他页面

7.1.1 为什么需要模板

网站通常都遵循一个标准结构，例如所有页面都有页眉、导航栏和页脚。模板有助于保持整个网站外观和风格的一致性。假设您的网站有许多页面，有些页面含有相同的页眉、导航栏和隐私条例说明、版权标题。现在要做一个小改动，比如说在版权文本中加一些内容。那么就必须分别打开每个页面，并做必要的修改，这样是不是非常耗时耗力，而且容易出错，那怎么办？不急，设计HTML语言的人早就为我们想好了，多个页面中相同部分可以制作成一个文件，它就是模板。如果使用了模板，这项工作就变得轻松多了。您只需在模板中进行修改，应用了该模板的所有页面都自动更新。

其实模板的功能就是将版式和内容的设计分离，先设计版式布局并存为模板，然后，对于相同布局版式的网页就可以用前面定义的模板来创建，在新的页面中只需修改部分内容就可以快速制作成功，而且可以保证页面风格的致性。模板的好处的确不少，下面我们就赶快来体验一把模板给我们带来的方便之处。

7.1.2 制作模板

创建模板的方法有两种，一种是将现有的HTML文档保存为模板，另一种是在空白HTML文档中从头开始创建。

最简单的方法是先打开一个创建好的网页，然后将它用作模板。另一个方法是从头开始创建，然后在其中添加图像、表格和文本。最后必须决定哪些区域是可以修改的（内容），然后保存为模板，这样就可以开始创建其他页面了。Dreamweaver使用标准的HTML注释来确定使用了哪个模板和哪些区域可以编辑。模板将自动保存在”Templates”文件夹中，该文件夹在站点的本地根文件夹下。

下面分别介绍用两种不同的方式来创建模板。

1．将现有文档保存为模板

（1）选择“文件”→“打开”命令，即会出现“打开”对话框。

（2）在“打开”对话框中选择要创建为模板的现有文档。

（3）单击“确定”按钮，该文档将出现在“文档”窗口中，如图7.1所示。

（4）选择“文件”→“另存为模板”命令，将出现“另存为模板”对话框。

图7.1 另存为模板页面

（5）在此对话框中，从“站点”下拉列表框中选择要保存模板的站点。在“另存为”文本框中，输入模板的名称，如图7.2所示。

（6）单击“保存”按钮。

此文档将以.dwt为扩展名保存在”Templates”文件夹下。

图7.2 “另存为模板”对话框

2．新建空白模板

（1）选择“窗口”→“资源”命令或按F11键，即会出现“资源”面板。

（2）单击“资源”面板上的“模板”图标，将显示“模板”面板，如图7.3所示。

（3）单击“模板”面板右下角的“新建模板”图标。

（4）在“名称”字段中输入新模板名称，然后按Enter键。

（5）单击“模板”面板右下角的“编辑”图标。

图7.3 在“资源”面板上显示模板

在“文档”窗口中，将打开该空白模板。在此模板中，可以添加DIV块区域、表格、文本、图像和其他页面元素。

经验

在使用模板时需谨记，不能将模板从“Templates”文件夹中移出，也不能将非模板文件放在“Templates”文件夹下。而且，不能将“Templates”文件夹从站点的本地根文件夹中移出，否则将导致“Templates”文件夹的路径出错。

问题

在模板“文档”窗口中添加内容之后，默认情况下，应用模板的文档都处于锁定状态，也就是不能编辑，那怎么办？

因此，创建模板后，需指定模板窗口中哪部分可以编辑，以便在其中添加内容；哪部分不可编辑，以便保持所有页面结构一致。

3．定义可编辑区域

1）定义可编辑区域

（1）在“模板”文档中选择要设置为可编辑的区域。

（2）请执行以下步骤之一：

Ø 在插入栏的“常用”选项卡中，单击“模板”图标，在弹出的下拉菜单中选择“可编辑区域”命令。

Ø 选择“插入”→“模板对象”→“可编辑区域”命令。

Ø 右击选中的区域，然后选择“模板”→“新建可编辑区域”命令。

Ø 按Ctrl+Alt+V组合键。

（3）此时，将出现“新建可编辑区域”对话框，如图7.4所示。在“名称”文本框中，为该区域输入一个唯一的名称。同一名称不能使用两次。

图7.4 “新建可编辑区域”对话框

（4）单击“确定”按钮。

该区域将高亮显示在一个矩形内，可以向其中添加内容，每个文档中的内容都可不同。该区域的名称在对应可编辑区域顶部的矩形标签中。

2）删除可编辑区域

如果在模板中设置了可编辑区域并想锁定它，即将其设为不可编辑，则需使用“删除模板标记”选项。

（1）选择要编辑的区域。

（2）选择“修改”→“模板”→“删除模板标记”命令。

该区域即被锁定，不可编辑。

4．编辑模板

要编辑模板，请执行以下步骤。

（1）选择“窗口”→“资源”命令。

（2）在“资源”面板中，单击“模板”图标。

（3）从模板列表中，选择要编辑的模板，然后双击。

该模板将出现在“文档”窗口中。此时即可编辑该模板，并对其做必要的修改。

7.1.3 应用模板

在模板创建好之后，必须确保所有相关的页面都使用该模板，以便在更新模板时，这些页面会随之自动更新。下面介绍将模板应用于页面的步骤。

将模板应用于打开的文档的步骤如下。

（1）新建要应用模板的空白文档。

（2）在“资源”面板中单击“模板”图标，找到要应用的模板。

（3）将模板从面板拖到空白“文档”窗口中。

（4）在可编辑区域添加或编辑数据。

结果如图7.5所示。

经验

在应用模板时需注意，未应用模板的HTML文档一定是空白文档，即不要添加任何内容，这样在应用模板时不会出现问题，否则，会出现应用不成功的情况。

图7.5 模板应用于页面并在可编辑区域添加了内容

用模板重新制作“装备”的商品展示页，步骤如示例1所示。

示例1

（1）新建要应用模板的空白文档。

（2）应用如图7.1所示的模板。

（3）在可编辑区域添加或编辑如图7.6所示的页面内容。

图7.6 未应用模板的商品展示页

应用模板之后的商品展示页的页面效果如图7.7所示。

图7.6 未应用模板的商品展示页

用模板制作“装备”商品的详细介绍页，步骤如示例2所示。

示例2

（1）新建要应用模板的空白文档。

（2）应用如图7.1所示的模板。

（3）在可编辑区域添加未应用模板的商品的详细介绍页内容。

应用模板之后的商品的详细介绍页的页面效果如图7.8所示。

图7.8 应用了模板的商品的详细介绍页

用模板制作“购买页面”（即单击“立刻购买！”按钮后的页面），步骤如示例3所示。

示例3

（1）新建要应用模板的空白文档。

（2）应用如图7.1所示的模板。

（3）在可编辑区域添加未应用模板的购买页面内容。

应用模板之后的购买页面的页面效果如图7.9所示。

图7.9 应用了模板的购买页面

7.2 制作样式表文件并和其他页面绑定

问题

大家发现前面应用模板的页面中存在的问题了吗？如图7.7、图7.8和图7.9

所示，是不是页面中有些字体过大、颜色搭配不合理、超链接样式极其难看、文本排列不够整齐等，那如何解决这些问题？

大家肯定想到了使用样式表，由于有多个页面甚至整个站点都要应用统一的样式，所以应该创建样式表文件，方便多个页面同时引用。

7.2.1 制作样式表

根据图7.7、图7.8和图7.9所示的页面效果，我们应该设置哪些样式？其实，这也不难，你只要看到页面中哪里不美观，那么那里就得应用样式。所以根据图7.7、图7.8和图7.9所示的不美观的地方，可以得出应该应用如下样式：字体样式、超链接样式、颜色背景样式、文本样式、方框样式等。

下面我们就为图7.7、图7.8和图7.9所示的页面创建样式文件。

（1）打开Dreamweaver，选择“文件”→“新建”命令，弹出“新建文档”对话框，在“类别”列表框选择“基本页”选择，在“基本页”列表框中选择“CSS”选项，如图7.10所示。

（2）单击“创建”按钮，打开CSS样式编辑页面。

（3）选择“窗口”→“CSS样式”命令，打开“CSS样式”面板，在面板中右击鼠标，在弹出的菜单中选择“新建”命令。

（4）在弹出的“新建CSS规则”对话框中，就可以新建标签样式（如body、a等）、ID样式（如#head、#search_form等）和类样式（如.fontcolor_white、.tableBorder等）。

图7.10 “新建文档”对话框

（5）创建完样式规则之后，样式文件里所对应的完整代码如下：

body {

margin-top: 7px;

font-family:”宋体”, sans-serif;

font-size:12px;

a:link {

color:#000000;

}

a:visited {

color:#999999;

}

a:hover {

color:#CC0000;

}

#head { !头部样式

float:left;

margin:0px auto 0px auto;

width:950px;

height:140px;

}

#search_form {

margin:0px auto 0px auto;

padding:1px 0px 1px 0xp;

eidth:950px;

height:55px;

}

.fontcolor_white {

color:#FFFFFF;

font-size:12px;

}

#content { !中间内容部分样式

Float:left;

margin: 0px auto 0px auto;

width: 950px;

/*height: 720px; */

text-align: left;

background-color: #FFFFFF;

font-size:12px; }

#content a {

color: #0033FF;

text-decoration:none;

}

#foot a {

color: #0033FF;

}

#content a:hover, #foot a:hover {

color: #FF3300;

}

.fontcolor_blue {

color:blue;

font-size:12px;

}

.font_bold {

font-size: 16px;

font-weight: bold; }

.tableBorder {

border-right-width: 2px;

border-right-color: #FF9900;

border-right-style:dashed;

padding-top: 10px;

padding-left: 5px; }

.tablepad {

padding-left: 10px; }

#foot {

margin: 0px auto 0px auto;

width: 950px;

height: 93px;

text-alight:center; }

.login_success1 {

Font-size: 24px;

Font-weight: bold; }

.login_success2 {font-size: 36px}

.login_success3 {font-size: 24px}

.register_textBroader {

border-width: 1px;

border-style: solid; }

.register_table_line {

font-size: 14px;

line-height: 35px;

margin-right: 5px;

text-align: right; }

（6）选择“文件”→“另存为”命令，然后在弹出的“另存为”对话框中将此CSS样式文件保存为mainpage.css,最后单击“保存”按钮，如图7.11所示。这样一个样式文件就创建好了，随后就可以被多个页面引用。

图7.11 “另存为”对话框

7.2.2 应用样式文件

样式文件创建好之后，其实还是一个孤立的文件，如果不应用到页面中，就不能显示出其强大的威力。下面我们就对未应用样式的商品的详细介绍页绑定样式文件，首先来了解一下应用CSS样式表的具体操作步骤。

（1）打开要应用样式的网页，如图7.12所示。

图7.12 打开要应用样式的网页

（2）在“属性”面板中单击“样式”下拉列表框，选择“附加样式表”选项。

（3）选择“附加样式表”选项之后，会出现如图7.13所示的对话框，单击“浏览”按钮指定要链接的外部样式文件为“mainpage.css”(上一节中已创建好的样式文件)。

图7.13 设置打开的网页和指定的样式表绑定

（4）单击“确定”按钮，就完成了商品详细介绍页和样式表文件“mainpage.css”之间的绑定，应用样式之后的页面效果如图7.14所示。

图7.14 应用样式之后的商品详细介绍页

把图7.12和图7.14进行比较，明显可以看出图7.14所示的页面漂亮多啦！这就是样式文件给我们带来的美感。

7.3 设置页面间的链接

如果我们把淘宝网案例的主页、登录页面、注册页面、商品展示页、商品详细介绍页、购买页等页面都做好了，并且应用了模板和样式，其实这些页面还都是孤立的，没有任何联系，那如何将这些页面之间相互联系起来？从而形成一个有机的整体。

我想大家会异口同声地回答使用超链接,没错！就是使用超链接。超链接能把同一网站中同一页面不同部分，同一网站中不同的页面、不同网站中不同页面不同部分、不同网站中不同页面链接起来，从而在不同网站、不同页面、同一页面部分之间建立起千丝万缕的联系。

请大家按下面的要求把有关页面通过超链接联系起来。

（1）将淘宝网案例首页中的“免费注册”、“登录”分别和注册页面、登录页面链接起来。

（2）将首页中宝贝分类栏目中的“装备”和“装备”商品展示页链接起来。

（3）将商品展示页中的“宝贝图片”和“快乐幻想区神恩石1组”商品详细信息介绍页链接起来。

（4）将“快乐幻想区神恩石1组”商品详细信息介绍页中的“立刻购买”和“购买页面”链接起来。

建立超链接的顺序要求：先注册，后登录，接着从首页中选择某类商品（装备），查看商品列表，再看详细介绍，最后购买。

7.4 测试并发布网站

网站的开发是一个系统工程，涉及到很多人共同完成，这么多人同时完成一个网站，可能会出现许多问题，如整个网站在设计上是否统一和谐、链接地址是否有错，不同的浏览器打开同一网页是否能正常显示等，这就需要我们对网站进行测试。网站经过成功测试之后，就要把它发布到Web服务器上，才能够让别人欣赏。

7.4.1 测试内容

1．页面效果是否美观

一个网站做的好坏很大程度上取决于页面效果，尤其是对那些不懂网站建设技术的人，他们就看你做的网站是否漂亮、美观、大方，所以一个网站中的页面效果对此网站的成功具有举足轻重的作用。对于页面效果是否美观，不同的人有不同的看法，那怎么办？没关系，一个网站不能保证所有的人都说美观，但是只要保证大部分人都说漂亮就行。

页面效果是否美观，其实是有据可依的，可以从“结构清晰，美观大方，用户界面良好，浏览方便快捷，实用性、创新性、交互性”等方面去判断，然后来完善、美化我们制作的页面。

2．链接是否完好

1）检查单个页面链接

若要检查单个页面链接，先打开此站点，接着将该文档打开，然后选择“文件”→“检查页”→“检查链接”命令，系统自动打开“结果”面板显示“链接检查器”面板，并显示链接报告，该报告为临时文件，用户可通过单击“保存报告”按钮将报告保存起来。

“显示”下拉列表框中共包含3种类型的链接报告：

Ø “断掉的链接”选项：显示含有断裂超链接的网页名称。

Ø “外部链接选项”：显示包含的外部超链接的网页名称（可从此网页链接到其他网站中的网页）。

Ø “孤立文件”选项：显示网站中没有被使用到的或未被链接到的文件，即孤立的文件。

如果为单个文件或是选定文件及文件夹应用“孤立文件”选项，则会弹出提示对话框，提示用户孤立文件报告是一个独立的属性，只能将其应用于整个网站，如图7.16所示。

图7.16 提示对话框

2）检查整个站点中的链接

若要检查整个站点中的链接，先从“文件”面板中选择一个站点，然后单击“链接检查器”面板中的“检查链接”按钮，从弹出的菜单中选择“检查整个当前本地站点的链接”命令，在“链接检查器”面板中的列表框中显示链接报告，如图7.17所示。

图7.17 打开“检查链接”菜单

3．测试不同浏览器的兼容性

1）设置希望检查的浏览器及其版本

（1）在“文档”工具栏中的“目标浏览器检查”菜单中选择“设置”命令，如图7.18所示。出现“目标浏览器”对话框，如图7.19所示。

（2）选择每个您要检查的浏览器旁边的复选框，在这里我们选择Firefox和Microsoft IE（Mac）浏览器，如图7.19所示。

图7.18 “目标浏览器检查”菜单界面图7.19 “目标浏览器”对话框

（3）对于每个选定的浏览器，在其同行右边有个下拉列表框，从相应的弹出选项中选择要检查的浏览器的最低版本。

（4）最后单击“目标浏览器”对话框中的“确定”按钮，即选定了希望检查的浏览器及其版本。

2）检查单个页面或整个站点的兼容性

（1）在“文件”面板上的“本地”视图中，选择单个页面或包含整个站点的文件夹。

（2）选择“文件”→“检查页”→“检查目标浏览器”命令。报告将显示在“结果”面板中的“目标浏览器检查”面板中，如图7.20所示。

图7.20 检查单个页面不兼容报告

（3）如果想了解不兼容的原因，请您在图7.12中的“目标浏览器检查”面板中选中一个列表项，然后右击鼠标，在弹出的菜单中选择“在浏览器中打开结果”命令，就可以打开一个页面，在此页面中可以查看到被检查网页中的元素不兼容的详细原因。

图7.21 查看不兼容的详细原因

7.4.2 发布站点

当我们把网站做好以后，就可以通过两种方式来发布：一种是通过本地计算机来完成；另外一种是在线发布，可以根据自己的条件来选择使用哪种方式。本节主要介绍在本地计算机上安装IIS以及使用IIS来发布Web站点的过程。

1．安装IIS

由于IIS是一个专门的Internet信息服务器系统，它包含的内容比较多，不但可以提供Web服务，而且还可以提供文件传输服务、新闻和邮件等服务，是创建功能强大、内容丰富的站点的首选服务器系统。IIS是系统的基本安装组件，如果在安装系统时选择安装了IIS，就不再需要单独进行安装，但是如果在安装时没有选择安装，可像安装其他Windows组件一样来安装它。

在Windows 2003下安装Internet信息服务（IIS）6.0的步骤如下：

（1）在Windows 2003桌面上单击“开始”→“设置”→“控制面板”命令，将打开“控制面板“窗口，如图7.22所示。

图7.22 “控制面板”窗口

（2）双击“添加或删除程序”图标，将打开如图7.23所示的窗口。

图7.23 “添加或删除程序”窗口

（3）单击“添加/删除Windows组件”按钮，将弹出“Windows组件向导“对话框，如图7.24所示，在“Windows组件向导”对话框中显示了可供安装的组件。

图7.24 Windows组件向导

（4）选中“应用程序服务器”复选框并单击“详细信息”按钮，在弹出的对话框中，选中“Internet信息服务（IIS）”复选框，再单击“确定”按钮，如图7.25所示。

（5）返回到“Windows组件向导”对话框，然后单击“下一步”按钮进行安装。在安装的过程中，提示“插入磁盘”，请插入Windows Server 2003 Enterprise Edition光盘即可继续安装。

（6）最后出现完成安装向导界面时，单击“完成”按钮即可完成IIS组件的安装。

当我们安装完IIS之后，在默认情况下，操作系统就自行启动了IIS信息服务，但是我们也能停止或暂停IIS信息服务。在停止或暂停IIS信息服务之后，我们又能启动IIS信息报务。

图7.25 Internet信息服务

2．上传网站

如果想把做好的网站上传到IIS中的Web服务器上，请执行以下操作：

（1）选择“站点”→“管理站点”命令，在弹出的对话框中的列表框中选择要上传的站点名称，单击“编辑按钮”弹出“站点定义”对话框。

（2）在“分类”列表框中选择“远程信息”选项，在“访问”下拉列表框中选择“本地/网络”选项，在“访问”下拉列表框下面就会出现相关设置。

（3）在“远端文件夹”文件框中，指定网站发布的目录为“C:\Inetpub\wwwroot\”(本地IIS中的Web服务器默认目录)，如图7.26所示，然后单击“确定”按钮，返回上一个界面单击“完成”按钮。

图7.26 设置网站上传到的本地Web服务器上的位置

（4）在“文件”面板中，单击“上传文件”图标，如图7.27所示。在弹出的如图7.28所示的对话框中单击“确定”按钮，就可以把TaobaoWeb站点上传到“C:\Inepub\wwwroot\”目录下。完成网站上传后，即可通过网址访问网站。

图7.27 上传网站图7.28 “确认”上传对话框

3．访问网站

网站上传到指定的服务器上之后，该如何访问呢？由于我们的网站是上传到本地Web服务器上，所以有两种访问方式。一种是：在浏览器地址栏中输入“http://本地服务器IP地址/index.html”即可访问这个站点，这种访问方式在同一局域网中不同的计算机上都可以访问，如图7.29所示。另一种是：在浏览器地址栏中输入“http://127.0.0.1/index.html“也可访问，这种访问方式只能在本地计算机上访问，如图7.29所示。

图7.29 两种不同方式访问站点首页

当我们成功地发布网站之后，还需要对站点做定期维护，以保证站点的正常运行和吸引更多的浏览者。如果大家对网站维护感趣，可以查阅相关资料，在这里我就不再赘述了。

² 本章总结

Ø 运用模板便于设计出具有统一风格的网站，并且模板的运用为网站的更新和维护提供了极大的方便，为开发出优秀的网站奠定了基础。

Ø 样式表文件能被多个页面共享，从而保证多个页面的样式和谐统一。

Ø 测试页面内容，包括以下3个方面：

l 页面效果是否美观。

l 超链接是否完好。

l 网页是否兼容不同的浏览器。

Ø 网站制作，测试完毕，最后要发布到Web服务器上，才能让更多的朋友观看。

一、选择题

1．模板会自动保存在（）中，该文件夹在站点的本地根文件夹下。

A．Library文件夹

B．Custom文件夹

C．Assets文件夹

D．Templates文件夹

2．网页制作技术不可以实现由一个文件控制一大批网页（）。

A． CSS文件

B．表格

C．模板

D． DIV层

3．下列关于模板的说法正确的是（）。

A． Dreamweaver模板是一段HTML源代码

B． Dreamweaver模板可以创建具有相同页面布局的一系列文件

C． Dreamweaver模板可以由用户自己创建

D． Dreamweaver模板是一种特殊类型的文档，它可以一次更新多个页面

4．在CSS语言中（）是设置“上边框”样式的语法。

A． letter-spacing:<值>

B． border-top:<值>

C． border-top-width:<值>

D． text-transform:<值>

5．超级链接元素A有很多属性，其中用来指明超链接所指向的URL的属性是（）。

A． href

B． herf

C． target

D． link

二、简答题

1．新建一个空白模板，起名为“templates1”，自定义设计模板。然后新建一个空白页面，将“templates1”应用到该网页中，并在可编辑区域添加相关内容。

2．试简述创建模板的大致步骤。

3．请使用Dreamweaver制作样式文件，然后对图7.30所示的页面应用制作好的样式，应用样式之后的页面效果如图7.31所示。

提示

（1）设置超链接的样式。

（2）设置页面背景色：background-color: #949494;,文本对齐：text-align: center;和边距：margin: 0px。

（3）设置页面中表单元素的相关样式。

（4）设置页面中相关表格的样式。

（5）设置中间内容部分字体大小：FONT-SIZE: 12px;,行高：LINE-HEIGHT: 150%

上机部分

Lab Guide

上机1

HTML的基本标签

第一部分本次上机目标

本次上机完成的任务

建立一个模拟的拍拍网页面，掌握HTML基本结构和标签的使用。

训练的技能点

（1）会使用HTML的基本标签，创建简单的HTML静态页面。

（2）会使用标题标签<Hn>(n=1，2，…7)。

（3）会使用段落级标签<P>、<BR>、<PRE>。

（4）会使用列表标签<OL>、<UL>。

（5）会使用文字处理标签<FONT>，图像标签<IMG>。

（6）会使用超级链接标签<A>，滚动标签<MARQUEE>。

（7）会使用水平线标签<HR>。

第二部分上机任务

建立一个模拟的拍拍网页面，熟悉HTML基本标签的使用，此上机分为以下6阶段。

阶段1：指导——通过记事本创建一个简单的HTML页面

训练要点

(1) HTML文档的基本结构，标签配对出现。

(2) 图片标签<IMG>与文字关系。

(3) 标题标签<Hn>(n=1，2，…7)，段落标签<P>，换行标签<BR>，字体标签<FONT>。

(4) HTML中使用的特殊字符。

(5) 设置背景色bgcolor属性。

需求说明

通过记事本手写HTML代码，制作简单的拍拍网主页，如图1.1所示。

图1.1 页面效果展示1

实现思路及关键代码

（1）HTML文档的结构，由3个部分组成。

Ø HTML部分：<HTML>

…

</HTML>

Ø 头部： <HEAD>

</HEAD>

Ø 主体部分： <BODY>

…

</BODY>

（2）HTML标签的使用

Ø 插入图片<IMG>：文字与图片的对齐方式使用align属性设置。

Ø 标题标签<Hn>(n=1，2，…7)，段落标签<P>、换行标签<BR>，字体标签<FONT>。

参考解决方案

<HTML>

<HEAD>

<TITLE>第一个HTML页面</TITLE>

</HEAD>

<IMG src=”images/logo.JPG” width=”290” height=”60” alt=”欢迎光临拍拍网”

align=”middle”> 免费注册 | 关于拍拍 | 拍拍助理 | 联系我们

<P>参观电玩达人</P>

<p>

炎炎夏日，冰凉家具两折起<BR>

周末折扣，品牌三折热卖<BR>

</P>

<P>

<FONT face=”新宋体” size=”4” color=”FF0000”>腾讯旗下购物网站</FONT>

http://www.paipai.com

</P>

Rights Reserved

</BODY>

</HTML>

阶段2：练习——参考上一阶段，建立拍拍网简介页，内容包括拍拍网的LOGO，以及拍拍简介，版权信息。

需求说明

通过使用记事本，手写代码创建一个包含有拍拍网简单信息的HTML静态页面，如图1.2所示

图1.2 页面效果展示2

提示

(1) HTML结构的3个部分，标签配对出现

(2) 插入图片标签<IMG>，控制文字与图片的位置关系要使用<IMG>标签中的align属性。

(3) 对于字体的修饰使用<FONT>标签。

阶段3：指导——在第1阶段页面中，加入序列和水平线标签，预格式化文本

训练要点

列表的两种方式，水平线标签的使用，预格式化文本效果。

需求说明

（1）将商品介绍按照列表方式在页面显示出来。

（2）以水平线作为分割标志

（3）预先定义好格式的文本显示。

页面效果如图1.3所示

图1.3 页面效果展示3

实现思路及关键代码

（1）使用列表标签<OL>。

（2）水平线标签<HR>。

（3）预格式化标签<PRE>。

参考解决方案

/*此处省略了第1阶段编写的HTML代码……*/

<BODY>

/*此处省略了第一阶段编写的HTML代码……*/

网游专区

</OL>

MOTO E2 音乐手机

<PRE>

130W像素摄像头 Linux 智能系统

Intel Xscale处理器

A2DP 蓝牙立体声市场价：1690

开学价：1045

</PRE>

</BODY>

</HTML>

阶段4：练习——在阶段3的页面中，加入“户外运动系列”和“关于拍拍的介绍”

需求说明

实现对商品描述的列表显示和预格式化显示，页面效果如图1.4所示。

图1.4 页面效果展示4

提示

在使用列表标签时，有序和无序列表的编号皆通过type属性设置。

阶段5：指导——在拍拍网的主页中，添加相关链接，如图1.5所示。

训练要点

（1）链接到其他页面。

（2）链接到同一文档的其他部分。

图1.5 图片效果展示5

（3）电子邮件链接。

（4）实现页面信息滚动特效。

需求说明

（1）单击超链接打开一个新的页面，如图1.6所示。

图1.6 打开登录页面效果展示

（2）超链接指定链接到文档中的某个部分，如图1.7和图1.8所示。

图1.7 链接文档某个部分

图1.8 链接文档某处的效果展示

（3）网页信息页面滚动，如图1.9所示。

图1.9 信息滚动效果展示

实现思路及关键代码

(1) 超链接<A>标签中href属性定义了超级链接所指向的URL。

(2) <MARQUEE>标签的scrolldelay属性定义滚动速度。

参考解决方案

*此处省略了<HTML>起始代码和<HEAD></HEAD>之间的这部分代码

<P>

<A href=”login.html”<B>登录</B></A> 关于拍拍拍拍助理

</P>

<P>

-索爱</FONT.

</P>

*此处省略了从<H1>导购资讯</H1>到第二条水平线之间的代码

*此处省略了预格式化文本<PRE></PRE>之间的代码

精品推荐：超酷PSP NIKE球星球鞋 ZIP珍藏限量版

</MARQUEE>

*此处省略了每三条水平线，版权信息代码以及</BODY></HTML>结束标签

阶段6：练习——在上阶段基础上，实现打开注册页面，链接到本地文档“关于拍拍”位置，实现电子邮件的功能，实现商品图片的滚动显示。

需求说明

（1）单击“免费注册”超链接打开新的界面，如图1.10和图1.11所示。

图1.10 单击“免费注册”超链接

图1.11 打开注册页面效果展示

（2）单击“关于拍拍”超链接，网页跳转到本页面的“关于拍拍”位置，如图1.12所示。

图1.12 链接文档某处效果展示

（3）单击“联系我们”超链接，创建一封新的邮件。

（4）商品展示，图片信息滚动特效，如图1.13所示。

图1.13 信息滚动效果展示

提示

(1) 图片滚动方向，依据滚动标签<MARQUEE>中direction属性设置。

(2) 在图片滚动中，鼠标移动产生的停止和滚动效果，会在后面的课程介绍。

(3) 其他与前面练习重复部分，可直接复制粘贴使用。

第三部分作业

1. 利用记事本编写制作一个简单的NBA中国的首页页面，页面内容包括：

(1) NBA中国的官方标志图片，鼠标放置到上面时会显示信息：“欢迎登录NBA中国。”

(2) 导航菜单：查看球员、主编信箱、NBA动态、NBA专题，每一项均设置超链接。

图1.14 作业1效果

提示

(1) 鼠标放置在图片上，显示信息<IMG src=”… ”alt=”欢迎登录NBA中国”>

(2) 设置标题栏，<TITLE>欢迎光临NBA中国</TITLE>。

小技巧

#号的使用，在<herf=” ＃”>查看球员</A>中，页面会呈现一种超链接样式，但是没有具体的链接地址。

2. 在作业1中，增加“NBA动态”列表，单击一条新闻会打开一个新的页面，显示新闻的具体内容，效果如图1.15和图1.16所示。

图1.15 作业2效果1

图1.16 作业2效果2

提示

(1) 新闻采用无序列表的方式显示。

(2) “NBA动态”字体效果，使用<FONT size=”+3” color=” ＃FF0000”>NBA动态</FONT>.

3. 在作业2的基础上，在页面中添加明星图片和球员信息。

作业要求：

（1）设置锚点，单击“查看球员”超链接后，页面自动跳到球员信息位置，如图1.17所示。

图1.17 作业3效果

（2）单击页面最下端的“返回顶端”超链接后，页面跳转到顶部。

（3）明星图片通过水平线与前后内容分割，图片实现滚动效果。

提示

(1) 滚动标签<MARQUEE>.

(2) 球员信息采用预格式化标签<PRE>.

上机 2

表格基础

第一部分本次上机目标

本次上机完成的任务

实现跨多行跨多列的表格，并能对表格进行美化。

训练的技能点

(1) 掌握表格的基本结构，熟悉表标签的使用。

(2) 会使用表格标签属性修饰美化表格。

第二部分上机任务

利用表格模拟拍拍网的商品类目、公告栏、拍拍网首页顶部logo部分

阶段1：指导——通过记事本创建一个简单的表格

训练要点

（1）表格的基本结构。

（2）跨多行、跨多列的复杂表格。

需求说明

（1）在记事本中手写创建一个简单表格，效果如图2.1所示。

图2.1 简单表格

（2）创建一个跨多行跨多列的复杂表格，效果如图2.2所示。

图2.2 跨多行跨多列的复杂表格

实现思路及关键代码

（1）表格的基本结构。

Ø <TABLE></TABLE>：表格标签。

Ø <TR></TR>

Ø <TD></TD>

（2）实现跨行跨列使用到的表格属性。

rowspan：跨行属性。

colspan：跨列属性。

参考解决方案

（1）图2.1的参考解决方案。

*此处省略了<HTML>起始代码和<HEAD></HEAD>之间的这部分代码

<BODY>

<TR>

</TR>

<TR>

</TR>

<TABLE>

</BODY>

</HTML>

（2）图2.2的参考解决方案。

*此处省略了<HTML>起始代码和<HEAD></HEAD>之间的这部分代码

<BODY>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

</TABLE>

</BODY>

</HTML>

阶段2：练习——在阶段1上机练习基础上，学员通过记事本建立一个简单的拍拍网拍拍公告。

需求说明

通过利用记事本手写HTML代码完成拍拍公告，效果如图2.3所示。

图2.3 拍拍公告

提示

（1）<TD>列标签中colspan控制跨列，rowspan控制跨行。

（2）align属性控制元素的显示位置，left靠左、center居中、right靠右。

阶段3：指导——在前一阶段基础上，对表格进行美化，美化效果参照拍拍网商品类目。

训练要点

（1）表格的尺寸修饰。

（2）表格的边框修饰。

（3）表格的背景修饰。

（4）表格填充。

需求说明

对简单的商品类目进行美化，效果如图2.4所示。

图2.4 商品类目修饰效果图

实现思路及关键代码

（1）表格尺寸的控制width和height属性。

（2）表格边框border属性。

（3）背景修饰bgcolor和background属性。

（4）为了避免内容靠近表格边框，使用cellpadding属性进行修饰。

参考解决方案

*此处省略了<HTML>起始代码和<HEAD></HEAD>之间的这部分代码

<TABLE width=”550” height=”134” border=”0” background=”images/

background.jpg” cellpadding=”5”>

<TR>

</TR>

</TD>

</TD>

</TR>

<TD width=”132” >跑跑卡丁车</TD>

</TR>

</TABLE>

</BODY>

</HTML>

阶段4：联系——参照第3阶段的上机联系，利用表格模拟拍拍网首页顶部logo显示部分。

需求说明

通过修饰，实现如图2.5所示结果。

图2.5 页面顶端修饰效果图

提示

（1）创建2行6列的表格，部分单元格涉及跨行、跨列。

（2）使用background属性设置背景图片。

（3）“我要买”、“我要卖”等均为图片。

第三部分作业

1. 利用记事本创建一个带有简单表格的页面，如图2.6所示。

图2.6 作业1效果示例

提示

(1) 第一行：背景图片bgground.gif，字体颜色＃FFFFFF。

(2) 第二行：背景色＃eaeaea。

(3) 第三行：背景色＃FFC8C8。

(4) 第四行：背景色＃C1E0FF。

2. 通过记事本实现如图2.7所示篮球大篷车的布局。

图2.7 作业2页面内容示例

提示

(1) 这个表格有4行4列。

(2) 图片所在单元格存在跨行或跨列。

(3) clspan=value value代表跨列的列数，rowspan=value value代表跨行的行数。

3. 通过记事本实现如图2.8所示页面。

图2.8 作业3图示效果

提示

(1) Logo、订购电话均为图片，最下方的导航条部分整体为一幅图片。

(2) 表格内容的水平位置由align属性决定。

(3) 考虑应建几行几列的表格，哪些单元格涉及跨行或跨列。

上机3

表单与框架

第一部分本次上机目标

本次上机完成的任务

创建包含表单元素的页面，实现基于框架基础上的页面跳转。

训练技能点

（1）了解表单的基本形式，掌握表单元素的使用方法。

（2）会使用框架集来创建网页，掌握target属性使用方法。

第二部分上机任务

以表单提交的方式模拟拍拍网用户注册，利用框架结构模拟拍拍社区。

阶段1：指导——创建一个简单的表单。

训练要点

（1）表单的基本形式。

（2）表单元素及属性。

需求说明

在记事本中手写HTML代码创建一个简单表单，页面效果如图3.1所示。

图3.1 简单表单

实现思路及关键代码

表单的基本结构如下：

Ø <FORM></FORM>:表单区域。

Ø 在表单区域内添加控件。

参考解决方案

<HTML>

<HEAD>

<TITLE>表单练习——注册雅虎邮箱</TITLE>

</HEAD>

<BODY>

选择您的雅虎邮箱：<INPUT type=”txtmail” size=”20” maxlength=”20”>

<OPTION value=”yahoo.cn”>yahoo.cn</OPTION>

<OPTION value=”yahoo.com.cn”>yahoo.com.cn</OPTIN>

</SELECT><BR>

密码：

<BR>

再次输入密码： <INPUT type=”password” name=”txtjcmm”

size=”10” maxlength=”10”>

</FORM>

</BODY>

</HTML>

阶段2：练习——学员依照第1阶段的联系，创建拍拍用户注册页面。

需求说明

通过记事本实现拍拍用户注册页面效果如图3.2所示。

图3.2 拍拍用户注册

提示

(1) <FORM>是一个容器标记，在</FORM>结束标记之前划分了表单区域。

(2) 使用<INPUT>标记在单元格内添加表单元素。

(3) 单选按钮要用于同一个组中才能实现单选效果。

阶段3：指导——在第1阶段联系基础上增加注册信息内容。

训练要点

(1) 表单控件的使用。

(2) 表单事件。

需求说明

一个相对完整的注册页面，如图3.3所示。

图3.3 经过完善的邮箱申请页面

实现思路及关键代码

（1）用<INPUT>标签添加表单控件，type属性指定控件类型。

（2）直接添加的表单控件<SELECT>、<TEXTAREA>。

参考解决方案

<HTML>

<HEAD>

<TITLE>表单练习—雅虎邮箱注册</TITLE>

</HEAD>

<BODY>

选择您的雅虎邮箱：

<OPTION value=”yahoo.cn”>yahoo.cn</OPTION>

<OPTION value=”yahoo.com.cn”>yahoo.com.cn</OPTION>

</SELECT><BR>

密码：

再次输入密码：<INPUT type=”password” name=”txtjcmm” size=”10”

Maxlength=”10”><BR>

真实姓名：<INPUT type=”text” name=”txtname” size=”20” maxlength=”20”><BR>

出生日期：<INPUT type=”text” name=”txtsr” maxlength=”10” size=”20” ><BR>

性别：<INPUT type=”radio” name=”sex” value=”M”> 男 <INPUT

Type=”radio” name=”sex” value=”F”>女<BR>

杂志订阅：<INPUT type=”checkbox” name=”order” value=”trl”/>旅游

<INPUT type=”checkbox” name=”order” value=”fin”/> 财经

<BR>

<INPUT type=”checkbox” name=”order” value=”car”/> 汽车

<INPUT type=”checkbox” name=”order” value=”mus”/> 音乐

<BR>

雅虎服务条款<TEXTAREA name=”fwtk” cols=”50” rows=”5”>雅虎中国对于任何包含于、经由、或联结、下载或从任何与本网站有关服务(以下简称『服务』)所获得之资讯、内容或广告(以下简称『资料』)，您于此接受并承认信赖任何『资料』所生之风险应自行承担。雅虎中国，有权但无此义务，改善或更正在『服务』或『资料』任何部分之错误或疏失。

</TEXTAREA><BR>

</FORM>

</BODY>

</HTML>

阶段4：联系——在第2阶段基础上增加注册内容。

需求说明

完善拍拍注册信息，效果如图3.4所示。

图3.4 拍拍用户注册

提示

(1) RADIO单选按钮，CHECKBOX复选框要分别定义在同一个组里。

(2) 表单提交method的两种方式。

(3) 单击提交调用表单的submit事件。

阶段5：指导——创建拍拍社区。

训练要点

(1) 会使用<FRAMESET>创建框架。

(2) Target属性如何在框架中实现页面的跳转。

需求说明

一个简单的社区页面，实现基于框架的页面跳转，效果如图3.5、图3.6和图3.7所示。

图3.5 拍拍社区-数码情报站

图3.6 拍拍社区-腾讯QQ专区

图3.7 拍拍社区-流行集散地

实现思路及关键代码

(1) 框架的类型。

(2) target用来设置指向跳转到框架的名称。

参考解决方案

（1）图3.5框架代码

此处省略了<HTML>起始代码和<HEAD></HEAD>之间的这部分代码

<BODY>

</FRAMESET>

</HTML>

（2）左侧框架页面代码。

*此处省略了<HTML>起始代码和<HEAD></HEAD>之间的这部分代码

<BODY>

</BODY>

</HTML>

（3）顶部框架页面代码。

*此处省略了<HTML>起始代码和<HEAD></HEAD>之间的这部分代码

<BODY>

<TABLE>

</TABLE>

</BODY>

</HTML>

（4）右侧显示页面——当单击左侧框架页面的“数码情报站”按钮时显示此页面，其他显示页面与此页面的代码类似，右侧框架页面效果如图3.8所示。

图3.8 右侧框架页面展示

*此处省略了<HTML>起始代码和<HEAD></HEAD>之间的这部分代码

<BODY>

</TABLE>

</BODY>

</HTML>

阶段6：练习——实现拍拍网帮助中心

需求说明

拍拍网帮助中心效果如图3.9和图3.10所示

图3.10 帮助中心图示-注册与认证

提示

(1) 框架结构分为上下两个部分，在下面部分中再分为左右两部分。

(2) Target=＃value为页面跳转区域的框架名称。

(3) 框架上部及跳转页面内容可采用截图方式。

第三部分作业

1. 利用记事本创建一个带有表单的页面，效果如图3.11所示。

图3.11 作业1效果示例

提示

(1) <INPUT>标签在表单区域中添加控件。

(2) 定义组来实现单选和多选事件。

(3) <FORM action=”提交跳转的页面” method=”post/get表单提交的请求方式”>。

2. 通过记事本实现如图3.12所示的页面效果。

图3.12 作业2页面内容示例

3. 通过记事本实现如图3.13和图3.14所示的页面效果。

图3.13 作业3图示效果-数码/汽车

图3.14 作业3图示效果-手机

提示

(1) 一个分为上下部分的框架

(2) target指向下部框架的名称。

(3) 显示内容可用图片截图代替。

上机 4

CSS样式表

第一部分本次上机目标

本次上机完成的任务

了解CSS样式表的语法，能够用样式表美化页面。

训练的技能点

（1）会创建常用的CSS样式。

（2）掌握CSS样式表的3中应用方式。

（3）会用样式表创建个性化的表格、表单。

第二部分上机任务

以表单提交的方式模拟拍拍网用户注册，利用框架结构模拟拍拍社区。

阶段1：指导——建立一个页面，通过CSS的行内样式对页面进行美化。

训练要点

(1) 样式的基本语法。

(2) 行内样式的使用方法。

需求说明

在记事本中手写创建一个简单页面，通过行内样式对段落予以美化，页面效果如图4.1所示。

图4.1 行内样式表练习

实现思路及关键代码

（1）样式表的基本语法。

Ø 选择器。

Ø 属性。

Ø 属性的值。

H2 {color: red; }

(1) 行内样式表的使用方法。

参考解决方案

*此处省略了<HTML>起始代码和<HEAD></HEAD> 之间的这部分代码

<FONT color=” ＃FF0000” size=”+3”>腾讯拍拍网(www.paipai.com) </FONT>

是腾讯旗下电子商务交易平台，<BR>

网站于2005年9月12日上线发布，2006年3月13日宣布正式运营。

</P>

拍拍网依托于腾讯QQ……

</P>

</BODY>

</HTML>

阶段2：练习——学员依照第1阶段的练习，用行内样式表的方法修饰拍拍公告。

需求说明

在记事本中用CSS修饰拍拍公告，页面效果如图4.2所示

图4.2 拍拍公告

提示

(1) 多个样式对同一元素定义时，以最接近元素位置的样式规则为准。

(2) 一个样式规则中多个属性时，要以“；”分隔，属性与属性值之间用“：”分隔。

阶段3：指导——用内嵌样式表的方式对页面进行修饰

训练要点

(1) 内嵌样式表的基本形式。

(2) 选择器命名方式的区别。

需求说明

使用内嵌样式表的方式修饰页面，效果如图4.3所示。

图4.3 内嵌样式表练习

实现思路及关键代码

使用锚伪类实现超链接的单击效果。

参考解决方案

<HTML>

<HEAD>

<TITLE>内嵌样式表练习</TITLE>

TABLE {background-image:url(images/navBg.JPG)}

A {text-decoration:none; font-weight:bold}

A:hover {color: ＃FFCC00} /*鼠标悬浮在上方时的链接红色*/

TD { color: ＃AA0000; font-family:”新宋体”；font-weight:bold;}

.tdl {text-align:right; font-size:14px}

.font {font-size:12px; color: ＃FF0000}

</STYLE>

</HEAD>

<BODY>

<TR>

<TD width=”529” rowspan=”2”><IMG src=”images/logo.JPG” width=”290”

height=”60”></TD>

帮助中心

</TD>

</TR>

<TR>

<TD height=”28” colspan=”2”>欢迎来到拍拍网！ </TD>

<A href=”#”>[登录]</A> <A href=”#”>[免费注册]</A> <A href=”#”>[结算中

心] </A>

</TD>

</TR>

</TABLE>

</BODY>

阶段4：练习——参照第3阶段的上机练习，学员采用内嵌样式表方式修饰拍拍商品类目

需求说明

内嵌样式修饰商品类目,效果如图4.4所示.

图4.4 商品类目

提示

伪类选择器名：hover {…} /*超链接鼠标悬停功能*/

阶段5：指导——编写CSS样式并保存，在其他页面中引入这个CSS样式表文件。

训练要点

（1）掌握如何引入外部CSS文件的方法。

（2）表单文本框样式修改，按钮美化。

需求说明

个性化表单修饰，页面效果如图4.5所示。

图4.5 外部样式表修饰注册页面

实现思路用关键代码

在样式中设置边框属性 .textboder {border:1 soid#C9F98E}。

参考解决方案

（1）图4.5页面代码可参照第3章第4阶段的练习代码，需要修改两个文本框和按钮处的代码。

</TR>

</TR>

……

<TR>

<A href=”#”>点击提交，即表示同意接受下面《拍拍协议》</A>

</TD>

</TR>

（2）CSS文件代码

TABLE {text-align: center; font-family: “隶书”}

TH {

Font-size: 24px;

Color: #FF0000;

Text-align: center;

background-color: #B9DCFF

}

.text {

border-width:1px;

border-style:solid;

.picButton { background-image:url(images/btn.gif);

border: 0 px;

margin: 0px;

padding: 0px;

height: 26px;

width: 99px;

font-size: 14px;

}

.td {

background-color: #FFC1FF;

font-size: 14px;

text-align: center

A { font-size: 14px;

color: #0000FF;

}

A: hover {text-decoration:underline; color: #FF0000}

.font {

font-size: 18px;

color: #FF86C2;

font-style: italic;

background-color: #F5D378

}

阶段6：练习——编写一个CSS样式表，在拍拍登录页面引入这个CSS文件。

需求说明

拍拍登录页面修饰效果，如图4.6所示。

图4.6 拍拍用户登录

提示

（1）引入外部样式表的语法<LWK rel=”stylesheet” type=”text/css” href=”css.css”>。

（2）使用伪类实现无下划线的超链接。

第三部分作业

1．创建一个简单的CSS样式表，效果如图4.7所示。

图4.7 作业1效果示例

提示

（1）这是几行几列的表格。

（2）如何在页面中录用内嵌样式表方式。

（3）当多个样式作用于同一对象时，以最近的样式为准。

2．通过记事本实现如图4.8所示的页面内容。

图4.8 作业2页面内容示例

提示

（1）按钮样式需要在样式规则中设置background-image、margin、border、padding、height、width和font-size属性。

（2）文本框样式设置 border-width: 1px; border-style: sold;。

（3）无下划线的超链接 text-decoration: none;。

3．生成外部样式表实现如图4.9所示的页面内容。

图4.9 作业3图示效果

提示

（1）可参考本章第6阶段的上机练习。

（2）按钮背景图片button-denglu.gif, button-mima.gif。

上机5

使用Dreamweaver制作网页

第一部分本次上机目标

本次上机完成的任务

使用Dreamweaver网页制作工具。

训练技能点

会使用Dreamweaver制作网页。

第二部分上机任务

阶段1：指导——创建一个简单的表单。

训练要点

（1）表格的基本语法。

（2）图像的基本语法。

需求说明

制作商品分类列表，页面效果如图5.1所示。

图5.1 商品分类效果

说明

页面采用了7*6的表格布局，其中第一行和第二行又分别采用跨多列的形式。

实现思路及关键代码

表格的基本语法。

参考步骤

1）创建网页

（1）在Dreamweaver中新建一个HTML页。

（2）在“文档”工具栏的“标题”文本框中将标题更改为“商品展示”，如图5.2所示。

图5.2 修改页面标题

（3）选择“文件” →“保存”命令，指定保存的路径和命名文件名称。保存后，HTML文件的名称将变为保存时命名的名称，本例保存页面的名称为DW1.html。

2）使用表格布置页面增加图予以说明

（1）制作商品列表表格。选择“插入” →“表格”，指定表格宽度为956，单元格间距和单元格边距定为0，指定表格为7行6列，第一行用来插入商品类目图像，第二行用来放置查询条件和标题，从第三行开始用来显示商品。

（2）将第一行全部选中，打开页面属性（如图5.3所示），单击合并单元格将第一行合并成跨6行的1列：将第二行前三列选中，然后合并单元格。合并后的效果如图5.4所示。

图5.3 页面属性合并和拆分单元格按钮

图5.4 合并后的单元格效果

3）插入图片

在需要插入图片的单元格内单击，选择“插入” →“图像”命令，在“选择图像源文件”对话框中指定插入图像的路径，如图5.5所示。

4）图片说明

本例中所使用到的图片依次为：

（1）第一行：listtop.jpg。

（2）第三行：ms1.jpg, leve12.gif, tenpay.gif; auto.gif。

（3）第四行：ms2.jpg, leve14.gif, tenpay.gif; auto.gif。

（4）第五行：dance1.jpg, leve11.gif, tenpay.gif, auto.gif。

（5）第六行：dance2.jpg。

（6）第七行：ball.jpg, leve13.gif。

图5.5 选择插入的图片

5）表单控件的添加

（1）将光标定位到第二行第一列，选择“插入” →“表单” →“列表/菜单”命令，如图5.6所示。

图5.6 菜单栏方式添加表单控件

（2）选择表单布局模式，单击“列表/菜单”图标，如图5.7所示。

图5.7 通过表单模式添加表单控件

2）使用表格布置页面增加图予以说明

（1）制作商品列表表格。选择“插入” →“表格”命令，指定表格宽度为956，单元格间距和单元格边距指定为0，指定表格为7行6列，第一行用来插入商品类目图像，第三行用来放置查询条件和标题，从第三行开始用来显示商品。

（2）将第一行全部选中，打开页面属性（如图5.3所示），单击合并单元格将第一行合并成跨6行的1列；将第三行前三列选中，然后合并单元格。合并后的效果如图5.4所示。

图5.3 页面属性合并和拆分单元格按钮

图5.4 合并后的单元格效果

3）插入图片

在需要插入图片的单元格内单击，选择“插入” →“图像”命令，在“选择图像源文件”对话框中指定插入图像的路径，如图5.5所示。

4）图片说明

本例中所使用到的图片依次为：

（1）第一行：listtop.jpg。

（2）第三行：ms1.jpg, leve12.gif, tenpay.gif; auto.gif。

（3）第四行：ms2.jpg, leve14.gif, tenpay.gif; auto.gif。

（4）第五行：dance1.jpg, leve11.gif, tenpay.gif, auto.gif。

（5）第六行：dance2.jpg。

（6）第七行：ball.jpg, leve13.gif。

6）CSS样式

（1）为页面超链接设置CSS样式，参照第4章关于超链接伪类的基本语法。

（2）整个页面用CSS样式设置了同一字体。

阶段2：练习——制作商品类目。

需求说明

制作商品类目，页面效果如图5.8所示。

图5.8 商品类目

提示

（1）使用Dreamweaver创建页面。

（2）在页面中添加表格。

（3）页面采用了3*1的表格布局；在第二行中嵌套了5*3的表格，第一行跨3列。

阶段3：指导——制作登录页面。

训练要点

表单练习。

需求说明

制作登录页面，实现表单提交，页面效果如图5.9所示。

图5.9 登录页面

说明

页面整体采用3*2的表格布局。

实现思路及关键代码

（1）表单如何提交。

（2）表单提交的方式。

参考步骤

（1）创建一个新页面，修改标题为“用户登录”，保存页面。

（2）在页面插入3行2列的表格tab1，表格宽度950。第一行和第三行分别合并成一列单元格。

（3）在第二行第一列嵌入一个8行2列的表格tab2，表格宽度380，将第一行合并单元格。在第二列中嵌入一个2行1列的表格tab3。

图5.10 登录页面表格布局

（4）插入图片。

① 表tab1第一行：top.jpg。

② 表tab1第三行：bottom.jpg。

③ 表tab2第六行：code.jpg。

④ 表tab3第一行：right.jpg。

（5）添加文本框，复选框。

阶段4：练习——制作注册页面。

需求说明

QQ注册页面，如图5.11所示。

图5.11 申请注册

提示

（1）创建表单的语法。

（2）表单提交两种方式的区别。

（3）在action中定义提交的转向。

（4）页面录用10*1的表格布局，分别在第4、6、8、10行内再嵌套表格。

阶段5：指导——制作帮助中心页面。

训练要点

（1）框架的基本语法。

（2）框架之间的页面跳转。

需求说明

帮助中心页面，如图5.12所示。

图5.12 帮助中心页面

实现思路及关键代码

（1）制作在各框架中显示的页面。

（2）设置组合框架集。

（3）设置左右框架间页面的链接跳转。

参考步骤

（1）首先制作好用于分别在3个框架中显示内容的页面。

（2）创建框架集。选择“新建” →“框架集” →“上方固定、左侧嵌套”命令，指定每个框架的标题。

（3）为框架分别指定页面，光标定位到指定页面的框架，选择“窗口” →“框架”命令，这时会打开框架属性面板，浏览源文件引入先前制作好的页面.

（1）实现框架页面的链接跳转。

给每个框架页面都引入页面后，下一步要设置页面的跳转。例如我们需要单击左侧框架中的某个页面链接，然后在右侧框架中显示相应页面内容。步骤如下：

① 选中超链接文本，如：“帮助首页”。

② 打开“属性”面板。

③ 单击链接文件夹选择要链接的文件。

④ 在“目标”下拉列表框中选择要在右侧框架中打开的新页面，如图5.14所示。

图5.14 设置页面间的跳转

阶段6：练习——制作拍拍社区。

需求说明

拍拍登录页面修饰效果，如图5.15所示。

图5.15 拍拍社区

提示

（1）框架结构分3个部分。

（2）提前制作好框架所需页面。

（3）在Dreamweaver中分别引入制作好的页面。

（4）参考阶段5上机练习。

（5）右侧显示页面内容以插入图片方式显示。

第三部分作业

1．使用表格布局制作网页，效果如图5.16所示。

图5.16 作业1效果示例

提示

（1）创建一个空白页。

（2）添加2*1的表格。

（3）在第二行单元格中嵌套1*4的表格。

（4）然后分别在第二列添加3*1的表格，在第四列添加2*6的表格。

2．制作游戏账号注册页面，如图5.17所示。

图5.17 作业2页面内容示例

提示

（1）创建表单页面。

（2）绘制3*1表格，第一行插入图片bg1.gif，第三行插入图片bg3.gif。

（3）在第二行嵌套10*2的表格。

3．制作商品浏览框架页面，如图5.18所示。

图5.18 作业3图示效果

提示

（1）首先确定这个页面的框架集结构为上方固定，下方改变。

（2）制作在下方框架中显示的页面，可直接在页面插入图片。

（3）设置框架并指定每个框架的名称。

（4）设置上下框架间页面链接的跳转链接。

上机 6

网站设计和页面布局技术（一）

第一部分本次上机目标

本次上机完成的任务

（1）发布站点。

（2）制作拍拍网首页。

训练的技能点

（1）能够发布站点。

（2）能够使用table表格布局

（3）能够使用DIV层进行网页布局。

（4）能够使用DIV层+表格布局制作页面。

第二部分上机任务

阶段1：指导——采用DIV布局方式对首页进行布局。

训练要点

（1）表格的基本语法。

（2）无下划线的超链接。

需求说明

（1）发布站点。

（2）制作首页采用DIV布局，实现首页顶部菜单效果，如图6.1所示。

图6.1 DIV布局的首页

实现思路及关键代码

（1）创建站点。

（2）DIV层划分页面区域。

（3）制作head层的内容。

参考步骤

（1）创建一个站点，在Dreamweaver菜单中选择“站点” →“新建站点”命令，弹出如图6.2所示的对话框。

图6.2 建立站点步骤1

站点名称可以任意命名，这里我们以MySite命名站点，站点命名确认后单击“下一步”按钮，进入下一操作界面，如图6.3所示。

图6.3 建立站点步骤2

在此界面中，我们不使用服务器技术，所以直接采用默认选项，单击“下一步”按钮，进入如图6.4所示的操作界面。

图6.4 新建站点步骤3

在这一界面中，我们只需要改变站点文件的保存路径即可，单击“下一步”按钮，进入如图6.5所示的操作界面。

图6.5 新建站点步骤4

我们只是在本地发布，所以不连接远程服务器，单击“下一步”按钮，进入如图6.6所示的操作界面。

图6.6 新建站点步骤5

这是建立站点的最后一步，显示了先前所设置的站点信息，单击“完成”按钮，即建立好了一个站点。

（2）创建一个空白页面。

（3）在页面绘制3个DIV层分别用于页面的head部分，content部分、foot部分，如图6.7所示。本阶段将制作head层的内容，centent层、foot层的内容我们会在后面逐步实现。

（4）下面我们将添加head层要显示的内容。Head层的内容比较规则，采用层套表格的方式，添加3*6的表格tab1,如图6.7所示。

图6.7 首页布局效果展示

（5）在图6.7中，将第1列的第1行和第2行两个单元格合并；第2行的第2列和第3列两个单元格合并；第2行的第4、5、6列3个单元格合并；第三行的6列合并成1列，合并单元格后的效果如图6.8所示。

（6）设置tab1的背景图片headBg.gif; 第一行第一列设置背景naviBg.jpg，单元格插入图片logo.jpg，在余下的单元格中依次插入buy.gif,sell.gif.mypp.gif,bbs.gif; 在第六个单元格中插入help.gif，并加入文字“帮助中心”，颜色为#FF0000，字体为12px。

（7）在第二行第一个单元格内加入文字“欢迎来到拍拍网！”，颜色为#FF6262；在第二个单元格内加入“登录”，“免费注册”，“结算中心”的超链接样式。

图6.8 合并单元格后的效果

（8）在第三行插入图片sarch.jpg，完成效果如图6.9所示。

图6.9 加入图片和文字后的首页效果

阶段2：练习——在阶段1的基础上添加content层的广告内容。

需求说明

用DIV层布局实现页面效果，如图6.10所示。

图6.10 在content层加入部分广告的效果

提示

（1）在content层中添加2*4的表格。

（2）第一行的4列合并成1列。

（3）第二行分别插入daogou.jpg, flash.swf, 滚动商品展示代码，right.jpg。

阶段3：指导——在阶段2的基础上添加制作商品频道列表一（数码商品）。

训练要点

（1）能够用DIV+表格布局实现商品频道列表。

（2）表格的嵌套使用。

需求说明

制作商品频道列表，效果如图6.11所示。

图6.11 在content层断续添加商品类目的效果

实现思路及关键代码

（1）DIV层+表格的页面布局。

（2）表格的嵌套使用。

参考步骤

（1）使用阶段2练习完成的页面。

（2）在content层的table表格里再添加2行；每行4列；将第一行前3列合并成一个单元格，并且在其中插入一个2*2的表格，然后将该表格第一行两个单元格合并；将最后一列第1行和第2行两个合并成一个单元格效果如图6.12所示。

图6.12 添加单元格后的效果

（3）在商品类目单元格插入图片goods.jpg; 在点卡和社区图片单元格插入right2.jpg，效果如图6.13所示。

图6.13 添加类目商品和点卡图片的效果

（4）在商品频道单元格再嵌套一个2行1列的表格，分别插入图片digTitle.gif，digitpro.jpg，效果如图6.14所示。

图6.14 添加了商品频道logo

（5）在频道商品列表单元格也嵌套一个2*6的表格，并将第二行的第2列和第3列合并成一个单元格，将第五列和第六列合并成一个单元格，效果如图6.15所示。

图6.15 添加2*6的表格

（6）在频道单元格的<TD>标签内加入背景样式.line {background: url(images/digiBg.gif) top repeat-x; text-align: center}，效果如图6.16所示。

图6.16 添加频道商品顶部背景

（7）在第一行的每列单元格内顺序插入 w500c.gif, box.gif, earphone.gif mp3.gif, wandian.gif, camera.gif 6张图片并配以文字说明；在第二行第一列和第三列分别插入phone.gif, pc.gif, 在第二列和第四列中插入商品资讯以序列的方式排列，效果如图6.17所示。

图6.17 添加频道商品后的页面效果

（8）加入CSS样式。

阶段4：练习——制作商品频道列表二（网游频道和体育频道）。

需求说明

频道列表，效果如图6.18所示。

图6.18 增加网游频道和体育频道后的页面效果

提示

（1）DIV层与表格的嵌套。

（2）可参照一阶段的练习。

阶段5：指导——制作版权页面。

训练要点

DIV+表格布局。

需求说明

制作版权页面，如图6.19所示。

图6.19 版权页面效果

实现思路及关键代码

版权区域处于foot层中，用3*2的表格即可实现。

参考步骤

（1）在foot层中添加一个3*2的表格。

（2）将第一行两个单元格合并，并且将第二行两个单元格也合并。

（3）在第一行添加水平线标签；第二行顺序加入超链接；第三行第一列插入图片ploice1.gif, ploice2.gif; 在第二列加入版权信息文字和超链接。

（4）制作CSS样式表文件，应用到页面中。

第三部分作业

1．制作商品详细信息页面，效果如图6.20所示。

图6.20 作业1效果示例

提示

（1）红色虚线框内为截图图片。

（2）这个页面是一个7*3的表格。

（3）在第六行的前2列中分别嵌套了表格，本例中分别顺序嵌套了3*1、5*1的表格。

2．模拟Google搜索页面，如图6.21所示。

图6.21 作业2页面层布局划分效果示例

提示

页面划分3层。

3．实现游戏介绍页面，如图6.22所示。

图6.22 作业3图示效果

提示

（1）DIV层布局实现效果。

（2）对比DIV层布局和表格布局的区别。

上机7

网站设计和页面布局技术（二）

第一部分本次上机目标

本次上机完成的任务

（1）制作拍拍网模板页。

（2）使用模板页制作商品列表，商品详细信息，购买页。

（3）设置统一样式。

（4）链接各个页面为完整网站。

训练技能点

（1）制作模板页。

（2）应用模板。

（3）页面测试和站点访问。

第二部分上机任务

阶段1：指导——制作模板并用模板页制作网页。

训练要点

（1）使用Dreamweaver制作模板。

（2）添加模板的可编辑区域。

（3）制作商品的购买套用模板。

需求说明

制作模板页面，如图7.1和图7.2所示。

图7.1 模板页面

图7.2 使用模板附加的页面

实现思路及关键代码

（1）确定页面公共部分

（2）指定可编辑区域和不可编辑区域。

参考步骤

（1）使用Dreamweaver创建模板，如图7.3和图7.4所示。

图7.3 创建模板

图7.4 新建的模版代码示例

（2）我们将网页划分为3个层，将head层和foot层指定为共有区域，是不可编辑区域；content层是变化区域，设置为可编辑区域。因此我们在模板页上也添加3个层，将第6章首页页面中的head层和foot层的代码复制粘贴到该页面中，效果如图7.5所示。

图7.5 添加共有区域效果

（3）将content层所在区域设置为可编辑区域，添加可编辑区域的方法：将光标定位到要添加可编辑区域的位置，选择“插入”菜单→“模板对象” →“可编辑区域”命令（如图7.6所示），弹出如图7.7所示的对话框，为可编辑区域命名。代码如图7.8所示。

图7.6 添加可编辑区域

图7.7 指定可编辑区域的名称

图7.8 可编辑区域代码标志

（4）我们会在页面上使用CSS样式表，因此在<HEAD></HEAD>之间Dreamweaver会自动将TITLE设置为可编辑区域，同时还会有一块以name=”head”命名的区域设置为可编辑区域，我们可以在这个区域里编辑修改CSS样式表文件，代码如图7.9所示。

图7.9 <HEAD>中默认的可编辑区域

（5）保存模板，保存模板时一定要将模板保存在你将要发布的站点内，如图7.10所示。

图7.10 保存模板

（6）模板保存后，系统会自动在站点内建立一个名为Templates的文件夹，模板都将保存在这个文件夹下，如图7.11所示。

图7.11 模板保存后的存放路径

（7）将模板附加到页面。

① 首先我们需要创建一个空白的页面，创建方法这里不再叙述。

② 附加模板页，如图7.12和图7.13所示。

图7.12 选择套用模板页

图7.13 选择套用的站点和模板

（8）当选定套用的模板后，我们刚创建的HTML页将会采用模板页面的布局，你会发现除了可编辑区域，其他区域的文字都是灰色不可编辑，只有可编辑区域里的内容可以修改代码，如图7.14所示。

图7.14 套用了模板的HTML页

（9）在可编辑区域内加上我们需要的显示内容即可，如图7.15所示。

图7.15 在可编辑区域添加内容

红色虚线框中代码可参考第6章作业1的练习代码。

阶段2：练习——采用模板，制作登录页面。

需求说明

制作登录页面，如图7.16所示。

图7.16 套用模板的登录页面

提示

（1）新建空白页面，然后套用模板。

（2）注意图片，样式的链接路径。

（3）内容可以从第5章上机第3阶段中复制过来。

阶段3：指导——应用模板制作类目商品列表。

训练要点

模板的应用。

需求说明

制作类目商品列表，如图7.17所示。

图7.17;类目商品列表

实现思路及关键代码：

参照阶段1练习。

参考步骤：

（1）创建空白页面

（2）套用已经制作好的模板

（3）在可编辑区域内容从第五章上机阶段1中复制。

阶段3：指导——应用模板制作类目商品列表。

需求说明

制作商品购买确认页面，如图7.18所示。

图7.18 购买确认页面

提示

（1）参照上一阶段垢参考步骤。

（2）如果页面套用了模板，那么样式表文件可以直接绑定模板，这样所有套用该模板的页面都具有统一样式。

阶段5：指导——创建各页面间的链接，发布站点。

训练要点

（1）通过超链接将页面贯穿起来。

（2）制作统一风格的CSS样式与页面绑定。

（3）网页测试和站点发布。

需求说明

将各个页面之间相互链接，具有统一的风格和样式。

实现思路及关键代码

（1）使用超链接页面相互贯穿。

（2）站点发布。

（3）网页测试。

说明

（1）index.html首页从第6章阶段5直接复制过来。

（2）帮助中心页面从第5章阶段5直接复制过来使用。

（3）注册页面使用第5章阶段4上机练习页面。

参考步骤

（1）设置各个页面的链接。

① 首页index.html，在首页需要实现帮助中心，登录和注册的页面链接以及商品链接，如图7.19所示。

图7.19 首页index.html

② 登录页面使用本章阶段2的练习页面，如图7.20所示。

③ 帮助中心页面，如图7.21所示。

④ 注册页面，如图7.22所示。

图7.20 登录页面

图7.21 帮助中心页面

图7.22 注册页面

⑤ 链接商品列表页面goodslist.html，如图7.23所示。

图7.23 首页链接商品列表

单击图7.23 的红色虚线内容，页面链接到商品列表页面，如图7.24所示。

图7.24 商品列表goodslist.html

⑥ 商品详细信息goodsinfo.html，本章第1阶段的练习页面，如图7.25所示。

图7.25 商品详细信息goodsinfo.html

⑦ 购买确认页面buy.html，本章第4阶段的练习页面，如图7.26所示。

图7.26 购买确认页面buy.html

（2）设置统一的样式表文件，添加到页面中。

① 字体样式：font-size: 12px; font-family: Verdana。

② 超链接样式：无下划线的超链接，鼠标滑过时颜色有改变。

③ 样式表文件与页面的绑定。

对比没有添加统一样式和添加统一样式后的页面效果。

（3）网页测试。

① 单个网页的测试：选择“文件”→“检查页”命令，然后单击需要检查的项目，如图7.27所示，检查结果如图7.28所示。

图7.27 单个网页测试

图7.28 检查结果显示

② 整个站点的测试，如图7.29所示。

图7.29 检查整个站点

③ 用Firefox火狐浏览器打开网页，查看页面显示是否正常。如果页面显示与在IE浏览器中的显示有不同，可根据需要和实际情况进行修改。

④ 安装IIS,用于发布站点。

Ø 打开“控制面板”窗口。

Ø 双击“添加或删除程序”图标。

Ø 单击“添加/删除Windows组件”按钮。

Ø 选中“应用程序服务器”复选框并单击“详细信息”按钮。

Ø 选中”Internet信息服务（II）”，然后单击“确定”按钮。

Ø 单击“下一步”按钮进行安装，最后单击“完成”按钮。安装过程中可能会提示要求插入系统安装盘。

⑤ 在Dreamweaver中将站点内的文件上传到IIS。

Ø 在“管理站点”对话框中选择要发布的站点，单击“编辑”按钮，如图7.30所示。

Ø 在打开的对话框中，单击“高级”标签，然后选择“远程信息”选项，设置访问方式和文件夹路径，如图7.31所示。

图7.30 选择要发布的站点

图7.31 设置访问方式和文件夹路径

设置好访问方式和站点上传路径后，我们就可以发布站点了，如图7.32所示。

图7.32 上传站点

⑥ 在本地浏览站点，如图7.33所示。

图7.33 访问已发布的站点

第三部分作业

1．制作一个NBA中国的网站模板，如图7.34所示。

图7.34 作业1效果示例

提示

（1）页面用DIV划分成3部分，上下两个层的内容为不可编辑

（2）将中间的层设置为可编辑区域

2．制作页面套用模板，如图7.35和图7.36所示。

图7.35 模板应用1

图7.36 模板应用2

提示

（1）在新建的空白页面中套用模板。

（2）绑定外部CSS样式文件。

3．发布站点，如图7.37所示。

图7.37 站点页面示例

提示

（1）安装IIS的步骤参考阶段5的描述。

（2）在框架结构中，超链接的target属性要指向显示页面的框架名称。

posted @ 2013-08-16 13:36 wanghongwin 阅读(3368) 评论(0) 编辑收藏举报

刷新页面返回顶部