第 1 章 网页设计基础本章要点内容 :• 基本的网络概念。• 网页和网站的概念。• 网站的设计流程。• Dreamweaver MX 2004 特点和工作界面

本章学习目标• 了解网页设计的基础知识，包括 Internet 、 WWW 、HTTP 、 HTML 等名词的含义。• 熟练掌握网站设计的基本流程，熟悉开发一个网站的步骤。•了解 Dreamweaver MX 2004 软件的安装及工作界面。本章学前要求• 对计算机基础知识、网络有一定的了解。

1.1 经典网页欣赏在互联网盛行的时代，使用计算机的人几乎没有不上网的，只要能

够连上网，就要看新闻、聊天、查资料等，当你在网上通过浏览器浏览各种信息时，所打开的视图界面就是网页。下面介绍几个常见的网页。

图 1.1 五梁液集团的主页图

图 1.2 网易网站的主页

图 1.3 北京大学网站的主页

图 1.4 中央电视台主页

如果把网站比作一本书，那么网页就是书的一页，所以网页就是一个显示网站内容的最小单元，上面各实例就是网站中的一张网页。网站的主题不同决定网页的风格和内容也随之不同。

企业网站以宣传自己的企业形象、产品性能、生产规模等为主； ISP 网络公司网站以人们的日常生活服务为主线索，是一个综合的服务性网站，通过搜索引擎来搜索世界范围内的各式各样的信息；学校的网站主要是介绍该学校的概况、发展历史及前景、教学、科研、招生就业等信息；电视台网站是以新闻为主线条，真实报道我们国家或世界范围内的政治、经济、体育、人文等各种新闻……

1.2 网页基础知识概述Internet 又称因特网，是国际计算机互联网的英文简称，是世界

上规模最大的计算机网络。可以说是由数以万计具有特殊功能的专用计算机通过各种通信线路，把地理位置不同的网络在物理上连接起来的网络。

Internet 是一个遵循一定协议自由发展的国际互联网，它利用覆盖全球的通讯系统使各类计算机网络互联，从而实现智能化的信息交流和资源共享。对个人用户而言， Internet 最大的魅力在于用廉价的投入（只需拥有一台 PC 机，一个调制解调器，一根电话线）即可联通 Internet ，享受世界上最大的计算机信息网络服务，获取和交流各类信息。

1.2.1 InternetInternet 源自于美国国防部的 ARPANET 计划，目的是将各种不同的网络

连接起来，以进行数据传输。 1981 年 ARPA 分成两个网络，即 ARPANET 和 MILNET ，它们之间仍然保持着联系，后来这种网络互联称为“ DARPAInternet” 。 1986 年美国国家科学基金会 NSF （ National Science Foundation ）使用 TCP/IP 协议建立了 NSFNET 网络。 1990年 7 月， NSFNET 取代了 ARPANET 。为了满足用户急剧增长的需要， 1992 年美国高级网络服务公司 ANS （ Advanced Networks and Service ）组建了 ANSNNET ，其容量为 NSFNET 的 30 倍，它已成为现在的 Internet 的骨干网。 1997 年美国开始实施下一代互联网络（ Internet Next Generation ）建设计划，无论其通信速度还是网络容量都得到了极大提高。

在中国，最先加入 Internet 的用户是中科院高能物理所。 1994 年邮电部正式与 Internet 联网，实现了和互联网的 TCP/IP 连接，从此中国的 Internet 商业服务正式开始，逐步开通了互联网的全功能服务，大型电脑网络项目正式启动，互联网在我国进入飞速发展时期。到 1997 年底，我国已建成中国公用计算机互联网（ ChinaNET ）、中国教育和科研网（ CERNET ）、中国科学技术网（ CSTNET ）和中国金桥信息网（ ChinaGBN ） 4 大互联网，并与因特网建立了连接。

1.2.2 WWW （万维网）WWW 是 World Wide Web （环球信息网）的缩写，也可以简称为 Web ，

中文名字为“万维网”。它起源于 1989 年 3 月，由欧洲量子物理实验室 CERN 所开展出来的主从结构分布式超媒体系统。

长期以来，人们只是通过传统的媒体（如电视、报纸、杂志和广播等）获得信息。但随着计算机网络的发展，人们想要获取信息，已不再满足于传统媒体那种单方面传输和获取的方式，而希望有一种主观的选择性。当万维网出现的时候，人们就拥有了一个获取信息的新的途径，所要做的就是通过打开 Web 浏览器，输入资源的地址，从而自主的访问 Internet 上的信息资源。由于用户在通过访问信息资源的过程中，无需再关心一些技术性的细节，而且界面非常友好，因而 Web 在 Internet 上一推出就受到了热烈的欢迎，走红全球，并迅速得到了爆炸性的发展。到了 1993 年， WWW 的技术有了突破性的进展，它解决了远程信息服务中的文字显示、数据连接以及图像传递的问题，使得 WWW 成为 Internet 上最为流行的信息传播方式。现在，网络上可以提供各种类别的数据库系统，如文献期刊、产业信息、气象信息、论文检索等。由于计算机网络的发展，信息的获取变得非常及时、迅速和便捷。

WWW采用的是客户 / 服务器结构，其作用是整理和储存各种 WWW 资源，并响应客户端软件的请求，把客户所需的资源传送到 Windows 、 UNIX或 Linux 等平台上。可以说， Web 为 Internet 的普及迈出了开创性的一步，是近年来 Internet 上取得的最激动人心的成就。

1.2.3 HTTP 协议HTTP 协议（ hypertext transfer protocol ，超文本传输协议）是用

于从 WWW 服务器传输超文本到本地浏览器的传送协议。它可以使浏览器更加高效，使网络传输减少。它不仅保证计算机正确快速地传输超文本文档，还确定传输文档中的哪一部分，以及哪部分内容首先显示（如文本先于图形）等。这就是你为什么在浏览器中看到的网页地址都是以“ http://” 开头的原因。

自 WWW诞生以来，一个多姿多彩虚拟的世界便出现在我们眼前，可是我们怎么能够更加容易地找到我们需要的信息呢？当决定使用超文本作为 WWW 文档的标准格式后，科学家们立即制定了能够快速查找这些超文本文档的协议，即 HTTP 协议。经过多年的使用与发展， HTT 协定得到不断的完善和扩展。目前在 WWW 中使用的是 HTTP/1.0 的第六版，是 WWW 服务器使用的主要协议。

1.2.4 网页与网站WWW 中的信息资源主要以一篇篇的 Web 文档为基本元素构成， Web

文档简称 Web 页，用中文描述也就是我们俗称的网页。这些网页采用超级文本（ hyper text ）的格式，即可以含有指向其他网页或其本身内部特定位置的超级链接，或简称链接。可以将链接理解为指向其它网页的“指针”。链接使得网页交织为网状，这样，如果 Internet 上的 Web 页和链接非常多的话，就构成了一个巨大的信息网。

网站是由多个网页集合而成的，集中体现网站的主题，又围绕这个主题表现网站的内容。网页通常分为首页和内页两种。在一个网站里浏览器首先打开的第一个网页叫首页（又叫主页），通过主页进入、浏览的页面称为内页，又叫分页。

首页是一个网站的门面，它的访问量最大，首页所提供的是网站的主题，通过访问首页就能知道该网站所要传递给访问者的首要信息，因而首页设计的好坏直接影响到该网站的质量，也是每一个网页设计者重点要考虑的问题。图 1.5 所示，是科学出版社的首页。

内页是网站的重要组成部分，是体现具体信息的载体，一般数量比较多，制作比较方便，成本较低。网站所提供的信息服务都是通过各内页传递给用户的。

图 1.5 科学出版社的首页

1.2.5 HTMLHTML （ hyper text mark-up language ）即超文本标记语言，或称为

“多媒体文件语言”，它可以标记超链接、文本样式、页面标题、插入图片或动画等多媒体元素，以此来创建 Web 页面， HTML语言也是用于创建 Web 页和 Web 通信的第一个通用描述性语言，由Tim Berners-lee 提出。

WWW采用的是客户 / 服务器结构，当用户从 WWW 服务器取到一个文件后， Web 浏览器就会读取 Web 网站上的 HTML 文档，再根据此类文档中的描述组织并显示相应的 Web 页面。由于将文件放入WWW 服务器的人并不知道将来阅读这个文件的人到底会使用哪一种类型的计算机或终端，因此，要保证每个人在屏幕上都能读到正确显示的文件，必须以各种类型的计算机或终端都能“看懂”的方式来描述文件，于是就产生了 HTML语言。设计 HTML语言的目的也就是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，使人们不用考虑具体信息是在当前电脑上还是在网络的其他电脑上。

HTML 文件是由 HTML命令组成的描述性文本，因为本身是文本格式的，所以原则上用任何一种文本编辑器都可以对它进行编辑。 HTML语言有一套相当复杂的语法。一个基本的 HTML文档的结构应该包括头部（ Head ）、主体（ Body ）两大部分。头部描述浏览器所需的信息，主体包含所要页面的具体内容，开发者可以使用 HTML语言插入各种网页元素，并通过 HTML标记说明文字、图形、动画、声音、表格、链接等网页元素的属性。

HTML 超文本标记语言表的标记符是通过标签（也叫标记符）来定义网页内容的， HTML 超文本标记语言表有若干标记符，如表 1.1 所示。

HTML 中常见的标签说明 • <!-- -->：注释标记，在“ <!—” 与“ -->” 之间的内容将不在浏览器中显示。• <!DOCTYPE>：描述文件所符合的 HTML DTD ，用于对文件的兼容性作简要说明。

• <A>：描述超级链接的开始位置或者目标。要求必须定义 herf=或 name=属性。• <ACRONYM>：表示取首字时的缩写词。• <ADDRESS>：是描述地址、签名和作者等信息。• <APPLET>：在页面中放置可执行的内容。 • <AREA>：在客户端图像映射MAP 中描述超链接热点的轮廓形状。• <B>：将文本以粗体显示。• <BASE>：描述文档的基本地址，浏览器依此转换相对地址。只能用在 HEAD标记中。

• <BASEFONT>：描述基本字体类型，用于显示缺省字体的文本。可用在 HEAD标记中，

• <BGSOUND>：在页面中加入背景音乐。• <BIG>：以比当前所用字体稍大的字体显示文本。

• <BLOCKQUOTE>：引用其它资源中的内容，可能会缩进、斜体显示，通常上下加空行。

• <BODY>：描述文档主体的开始和结束。• <BR>：换行标记。 • <BUTTON>：设置一个按钮。• <CAPTION>：给 TABLE 加一个标题。 • <CENTER>：居中排列其中的内容。• <CITE>：简要说明一个引用，内容用斜体显示。• <CODE>：以等宽字体显示一段代码。• <COL>：定义 TABLE 中一列的属性。• <COLGROUP>：用于在 TABLE 中定义一个列组。• <DD>：在列表中解释一条术语，靠右显示。• <DEL>：指明文本已从文档中删除。• <DFN>：定义一个术语。• <DIR>：表示一系列短条目。在此之后的文本用 LI 开头，且每条不超过 20 个字符。

• <DIV>：在文档中描述不同性质的元素，如章节、段落、摘要等。• <DL>：表示一个列表。 DT 、 DD 用于定义列表内的条目。

• <DT>：在列表中定义一个术语，显示在左列中。• <EM>：用于要强调的文本，通常以斜体显示。• <EMBED>：插入任何类型的文档，但用户必须在计算机上安装可解读此类文档的应用程序。

• <FIELDSET>：可用于描述一组区域的关系，可嵌套。• <FONT>：设置字体属性。• <FORM>：描述一个包含控件的表单。• <FRAME>：在 FRAMESET 中描述一个单独的框架。 • <FRAMESET>：在混合文档中设置水平、垂直方向框架的数量和

大小，在 FRAMESET 中用 FRAME 设置每个框架的内容和属性。可嵌套使用。

• <HEAD>：出现在文档的起始部分，标明文档的题目或介绍，包含文档的无序信息。可在其中使用 BASE 、 LINK 、 MATE 、 TITLE 、BASEFONT 、 BGSOUND元素。

• <Hn>：从 H1 到 H6 ，六种标题，黑体显示。• <HR>：显示一条水平线。• <HTML>： HTML 文本起始元素，通知浏览器该文档为 HTML 文档。

• <I>：将文本用斜体显示。• <IFRAME>：在文档中嵌入一个浮动框架。• <IMG>：在文档中插入一幅图像或一段视频。 • <INPUT>：设置 FORM 中的输入控件， TYPE属性指明控件类型，

需要设置 NAME 。• <INS>：指出新加入文档的文本内容。• <ISINDEX>：通知浏览器该文档是一个索引文件。用户可对该文档进行关键词搜索。

• <KBD>：指明用户应该用键盘输入的文字，一般用等宽字体显示。• <LABEL>：说明一个标签。不可嵌套。• <LEGEND>：确定 FIELDSET元素定义的区域集合。必须作为 FI

ELDSET 中的第一个元素。 • <LI>：表示列表中的一个条目，可用在 DIR 、 MENU 、 DL 、 U

L 中。• <LINK>：在当前 HTML 文档和其它资源之间建立超链接。只能

在 HEAD 中使用。 • <LISTING>：用等宽字体显示文本 .

• <MAP>：为客户端图像映射指定热点区域集合。• <MARQUEE>：建立一个滚动文本区。• <MENU>：建立一个菜单，用 LI定义菜单内的条目。• <META>：为浏览器、搜索引擎或其它程序提供 HTML 文档信

息。必须在 HEAD 中使用。• <NOBR>：不换行。• <NOFRAMES>：为不支持 FRAMESET 的浏览器提供。• <NOSCRIPT>：在不支持脚本的浏览器中显示包含的内容。• <OBJECT>：在 HTML 文档中插入一个对象。 • <OL>：建立一个有序的列表。• <OPTION>：为 SELECT元素定义一个选择项。 • <P>：表示一个段落。• <PARAM>：给对象设置参数。对 APPLET 、 EMBED 、 OBJEC

T 有效。 • <PLAINTEXT>：不处理 HTML标记，等宽字体显示。• <PRE>：用等宽字体显示文本，保留间距和换行。• <Q>：给文本设置段间距（较小）。

• <S>：显示带删除线的文本。• <SAMP>：用较小的字体显示文本。缺省为等宽字体。• <SCRIPT>：表示需要脚本引擎解释执行的脚本代码区。• <SELECT>：设置一个下拉式选择框，用 OPTION定义选择项。• <SMALL>：用较小的字体显示文本。• <SPAN>：定义一个范围，不影响页面结构和显示。• <STRIKE>：显示带删除线的文本。• <STRONG>：着重点。通常为黑体。• <STYLE>：给页面设置显示风格。• <SUB>：用较小的字体将文字显示在下角。• <SUP>：用较小的字体将文字显示在上角。• <TABLE>：定义一张表格。用 TR 、 TD 、 TH元素定义行、列和

单元，可选元素 CAPTION 、 THEAD 、 TBODY 、 TFOOT 、 COLGROUP 和 COL ，可用来组织表格以及对列、列组属性进行处理。

• <TBODY>：定义一个表体。• <TD>：定义表格的一个单元格（排成一行）。

• <TEXTAREA>：多行文本输入控件。• <TFOOT>：定义一张表格的页脚。• <TH>：定义表格中一行或一列的标题，文字黑体显示。• <THEAD>：定义表格的表头。• <TITLE>：说明文档标题。• <TR>：定义表格中的一行。• <TT>：用等宽字体显示文本。• <U>：显示带下划线的文本。• <UL>：定义一张列序的列表，用 LI定义条目。• <VAR>：对一个变量进行说明。• <WBR>：在 NOBR 文本中插入一个软换行符。

1.2.6 动态 HTML

动态 HTML （即 DHTML ）是近年来网络发展进程中最振奋人心，也最具实用性的创新之一。国内网络界也掀起了一股学习动态HTML 的热潮。那么，到底什么是动态 HTML呢？简而言之，动态 HTML 就是一种即使在网页下载到浏览器以后仍然能够随时变换的 HTML 。比如，当鼠标移至文章段落中，段落能够变成蓝色，或者网页头部能够滑过电脑屏幕。这就是说， HTML中能够做的一切在网页下载后还能够做。

有人把动态 HTML 当作一门语言，也有人把它当作一种专门的技术，这些理解都是不对的。实际上，它是一种通过各种技术的综合发展而得以实现的概念（当然，不同的浏览器，实现的程度也不同），这些技术包括 Javascript 、 VBScript 、 Document Object Model （文件目标模块）、 Layers 和 CSS （ cascading style sheets ）等。

动态 HTML 的实现手段同样是多种多样的，可以是现有的各种手段的组合。比较常用的技术有： 脚本编程语言（ JavaScript ， VBScript） 文件目标模块（ DOM） 层叠样式表（ CSS） 动态图层（ layers）

Netscape Communicator 4.0 以上版本和 Microsoft Internet Explorer 4.0 以上版本，都宣称支持这种最新的动态 HTML 功能。但实际上，他们所支持的动态 HTML内容并不完全相同。

IE 所支持的动态 HTML包括以下几部分：层叠样式表（ CSS）：提供了设定 HTML标记的所有文本修饰

（如文字的大小、字体、颜色等内容）的排版功能。在网页下载完毕后，可动态地改变页面元素的 CSS属性。

动态内容（ Dynamic Content）：可以动态地更新网页的内容，即可以动态删除和增加页面中的各种元素，随时适应页面编排的需要。

动态图像：通过内建的 Animation 可以实现动画的效果，另外配合 JavaScript 、 VBScript或 ActiveX控件可以轻松地移动图像。

数据库支持：通过动态 HTML 方便地实现对数据库中数据的访问。从而使网页设计者轻松地处理数据，实现更强大的交互功能。

Netscape 所支持的动态 HTML包括以下几部分：层叠样式表（ CSS）。脚本排版样式（ JavaScript Style Sheets）：简称 JSS ，这是 Netsc

ape 公司为该浏览器内建的一种排版样式，可以通过 JavaScript来控制 Style Sheets 。

动态图层（ dynamic layers）：这是一项很强大的功能，可以提供图文定位、移动图文、控制显示或隐藏图片的功能，方便地实现各种特殊效果。

因此在一般的制作动态网页的过程中，要特别注意两大主流浏览器对动态 HTML支持的程度的不同。但是本书考虑到国内使用微软IE 浏览器的人比较多，仍然选择以适合 IE 浏览器为首要目的设计方案。另外，读者需要知道，制作动态网页主要是利用 CSS定义的属性可以动态改变、图层可以动态定位和在客户端解释执行的 JavaScript 程序能够实时地操作 HTML元素及其属性的特性。要掌握动态网页制作技术，除了要熟悉 CSS 、图层应用技术外，还必须学好 JavaScript语言。 Dreamweaver 自带了很多动态效果的函数与过程，可以极大的方便设计者制作一般的动态效果。而深层次的应用，读者可以遵循“拿来主义”的原则，多分析别人的代码，细嚼慢咽，知其然且知其所以然，大胆地做一些改进试验，这样设计制作动态效果的水平就会很快提高。

1.2.7 网站设计的流程虽然每个网站的规模、内容和所提供的信息不同，但在网站设计

的制作阶段的基本流程是相似的。

1. 网站的需求分析在设计一个网站时，需求分析是第一步，也是最重要的一步。只

有明确了网站建设的需求，才能进行下一步工作。要做好网站的需求分析，主要包括四个步骤： 确定参与组织设计的人员、进行用户调查、进行市场调研、

需求分析输出。其中用户调查是需求分析的关键，主要包括以下几个方面：

1 ）网站当前以及日后可能出现的功能需求。2 ）客户对网站的性能（如访问速度）的要求和可靠性

的要求。3 ）确定网站维护的要求。4 ）网站的实际运行环境。5 ）网站页面总体风格以及美工效果（必要的时候用户

可以提供参考站点或者由公司向用户提供）。6 ）主页面和次级页面数量，是否需要多种语言版本等。7 ）内容管理及录入任务的分配。8 ）各种页面特殊效果及其数量（ JS ， Flash 等）。9 ）项目完成时间及进度（可以根据合同）。10 ）明确项目完成后的维护责任。

用户调查完毕后，网站开发者再从以下几个方面进行市场调研：1 ）市场中同类网站产品的确定。2 ）调研产品的使用范围和访问人群。3 ）调研产品的功能设计（主要模块构成，特色功能，性能情况等

等）4 ）简单评价所调研的网站情况

最后根据用户调查和市场调研的结果出具分析报告，经过“小组讨论决定方案、主要负责人签字、生效并打印文档”的程序，从而完成需求分析。

2. 前期设计在前期设计中，设计人员根据网站的模式和特点以及网站制作规范选择

开发工具、后台数据库，定制出最适当的标准样式、网站结构，将策划方案和开发标准打印并分发给小组成员人手一份，根据策划文档及网站设计规范，主要设计人员进行前期的首页设计。大致过程是：小组负责人确定设计进程时间并派发任务单、主要设计人员开始设计、递交审核、通过后主要负责人签字。

3. 二级页面设计在首页设计完毕后，整个网站的风格、标准、样式都已经建立，紧接着网站开发就进入了二级页面的设计阶段。大致过程是：依照网站设计规范和标准样式由小组负责人确定设计进程时间并派给任务单、主要设计人员按照既定的网站结构开始二级页面设计工作、递交审核、通过后主要负责人签字。

4. 开始实际制作第 2 步和第 3 步是设计阶段，制作出来的只是样板，并没有真正

的进行大规模的开发，制作成为网页文件。在本步骤中就是要将设计落实到所有网页中去，大致过程是：依照网站设计规范和标准样式由小组负责人确定制作进程时间并派任务单、主要制作人员开始内容建设工作、与程序方面人员配合协调工作、递交审核、通过后主要负责人签字。

5. 全面程序开发第 4 步制作出来的是静态的网页，要实现复杂的功能，还必须有

动态程序的支持，本步骤就是利用诸如 Dreamweaver MX 2004之类的开发软件将页面与程序进行整合。

6. 完成并测试经过程序与页面的整合，网站完成了设计与开发，网站策划人员把所有有关网站的备份文件以及原程序备份，并书写一份网站跟踪报告，说明此网站的建设工作结束所用资源人力以及执行情况。但是，网站是否能够真正的达到预期效果，还必须依靠软件质量保证部门（ QA ）进行测试，并对比测试结果进行相应的修改，才算最终完成了网站的开发。

7. 发布网站网站需要发布到 Internet 上才能被访问浏览，发布的方法有两种：一

是网站拥有者向电信运营部门申请拥有独立互联网协议 IP 地址的线路，自行搭建 Web 服务器，并向域名管理部门申请域名指向该IP 地址；二是向虚拟主机服务商申请虚拟主机和域名或者是申请主机托管。无论哪种办法，目的都是要为网站准备一个网络发布的空间和网络域名。网络空间主要用于存放网页文件、图像文件和其他数据文件等。域名类似于互联网上的门牌号码，是用于识别和定位互联网上计算机的层次结构式字符标识，与该计算机的IP 地址相对应，比如我们熟悉的门户网站“网易”，www.163.com就是其域名。虚拟主机是一种多个网站共享一台服务器，但每个网站都可以拥有独立域名和完整服务器功能的技术，现在提供网络空间和域名申请的虚拟主机服务商有很多，如中国万网（ www.net.cn ）、中国数据（ www.zgsj.com ）、商务中国（ www.bizcn.net ）等。网站的拥有者向这些运营商申请空间和域名，但必须根据申请空间的大小、功能、运行环境和域名的类型向这些公司缴纳年费。

8. 上传到服务器当网站全部开发完毕并在本地计算机上测试后，就可将网站设计的全

部页面文件和数据文件上传到所申请的服务器 . 一般使用 FTP 的方式上传， FTP 的地址、账号和密码由虚拟主机服务商提供。如果是网站拥有者自行搭建的服务器，也建议使用 FTP 的方式上传，这样比较安全。上传完毕后，在浏览器中只要输入网站的域名或网页的地址就可以打开站点浏览网页的信息了。

9. 后期维护网站上传到相应的服务器之后，在运行中可能会出现各种不同的问题，

如页面的布局、网页的主题、网站服务的功能等诸多方面需要修改，所以网站的后期维护是网站设计的重要的环节。

本书是一本基础教材，所要介绍的网页设计与制作主要是指静态网页的制作，在整个网站设计流程中基本处于初期设计到完成测试这个过程，主要的目的是介绍如何切实的利用 Dreameweaver MX 2004 进行实际的网页制作。

1.3 认识 Dreamweaver MX 2004

Dreamweaver MX 2004 是 Macromedia 公司推出的一个功能强大的网页制作工具，它采用了多种先进技术，几乎能够支持当今所有的网页制作技术，能够快速高效的创建各种静态页面和动态页面，还能够创建有数据库支持的数据库网站。值得一提的是，在 Dreamweaver MX 2004 提供强大网页制作功能的同时，还提供了完善的站点管理机制，用户通过 Dreamweaver MX 2004 可以方便快捷的创建、管理、维护、发布自己的站点。所以，称Dreamweaver MX 2004 是“柄集网页制作和站点管理于一身的双刃剑”一点都不为过。

Dreamweaver 的安装过程和一般的应用程序的安装过程是一样的，当放入光盘的时候会自动运行 setup.exe 文件，或者进入安装光盘，双击 setup.exe 文件，弹出安装界面，进行安装。

步骤 1：首先 Dreamweaver MX 2004 的安装包会自动解压，如图 1.6所示。自动解压后后会出现安装向导，如图 1.7 所示，此时单击“下一步”按钮。

图 1.6 自动解压 图 1.7 安装向导

步骤 2：出现授权协议窗口，如图 1.8 所示，点击“是”按钮，进入安装路径选择窗口，如图 1.9 所示，根据需要选择存放 Dreamweaver 的本地路径，然后单击“下一步”按钮。

图 1.8 授权协议 图 1.9 路径选择

步骤 3：安装向导弹出 Dreamweaver 将支持的文件类型的选择窗口，如图 1.10 所示，在这里可以选择用户想要编辑的文件，如果不需要，可以取消，本书选择默认设置，单击“下一步”按钮，安装向导通知用户已经设置好的内容，如图 1.11 所示，如确认无误，单击“下一步”继续安装。

图 1.10 编辑文件类型选择 图 1.11 已设置内容

步骤 4：进入正式安装阶段， Dreamweaver安装向导会提示 Dreamweaver MX 2004 的安装进度，如图 1.12 所示。

步骤 5：进度条进行到 100% 的时候，安装向导会提示 Dreamweaver MX 2004安装已经完成，如图 1.13 所示，此时单击“完成”按钮，系统会自动向Windows 的程序列表中添加 Macromedia 的程序组，同时还启动了 Dreamweaver MX 2004 的自述文件，如图 1.14 所示。

图 1.13 安装完成 图 1.14 Dreamweaver MX 2004 自述文件

1.3.2 Dreamweaver MX 2004 简介1. Dreamweaver MX 2004 的功能特点

Dreamweaver MX 2004 是一个可视化的网页设计软件，支持最新的 Web 技术，包含 HTML检查、 HTML格式控制、 HTML格式化选项、可视化网页设计、图像编辑、全局查找替换、全 FTP 功能、处理 Flash 和 Shockwave 等多媒体格式和动态 HTML 、基于团队的 Web创作。在编辑上可以选择可视化方式或者源代码编辑方式。

Dreamweaver MX 2004 新增功能如下

（ 1）跨浏览器有效性验证当保存文件时自动检查当前文件的跨浏览器有效性，可以指定一种浏览

器作为测试用浏览器，同时自动检验以确定页面有没有目标浏览器不支持的标签或 CSS 结构。

（ 2）多重设计模式Dreamweaver MX 2004 为设计者提供了三种设计模式，分别是“代码”、

“拆分”、“设计”，习惯直接编写代码的设计者可以在“代码”模式下开发，“设计”模式提供所见即所得的可视化操作界面，“拆分”模式则兼有前二者的模式，方便进行程序与页面元素的整合。

（ 3）更强大的 CSS支持CSS （层叠样式表）是专业网页设计必须掌握的技术，它可以方便的控制文本、图像、表格、层的样式，利用丰富的 CSS样式表可以构建复杂的、标准的站点， Dreamweaver MX 2004 提供了更为丰富的使用工具用于快速选择和样式属性控制，包括 CSS 布局可视化、改进的 CSS呈现等。

（ 4）增强的源代码编辑功能增强的源代码编写工具使得编辑代码更省时，例如更新后的查询替换工具、更多的搜索选择项、右键编写代码工具等，还能够保存搜索条件。

（ 5）扩展的文档格式支持在 Dreamweaver MX 2004 中，开发者可以直接复制和粘贴Word或者 Excel 文档的内容，并且保留字体、颜色、 CSS样式表信息，使用系统支持的编码保存任何字体包括双字节字符集。

（ 6）安全 FTP在站点定义的对话框中设置远程信息时选择“使用安全 FTP （ EF

TP ）”，则可以对所有传输的文件完全加密，并且阻止他人越权存取信息、文件内容、用户名和密码，保证在上传网页时文件和账号信息的安全。

（ 7）加强对新技术的支持Dreamweaver MX 2004支持当今主流的开开环境，如 ColdFusion 、

J2EE 、 PHP ， .NET 等主流服务器技术，并且还加入了 XML命名空间支持、 ASP.NET窗体空间对象、新的参考书内容和新的 PHP 服务器端行为。

（ 8）内建图形引擎在选中图形后，可以在“属性”面板上的“编辑”按钮中选择内嵌的 Macromedia Fireworks MX 2004 ，不需要离开 Dreamweaver MX 2004 环境就可以对图形进行修剪、改变大小、旋转角度、调节明暗度等操作，大大减少了设计者的工作量。

（ 9）整合 Macromedia 的其他产品Dreamweaver MX 2004 加强了和 Macromedia 其他产品的协同工作能力，例如：开发者通过 Dreamweaver 可以直接设置Flash 组件的参数、可以轻松导入一个 Flash 构建等。

（ 10）改进的用户环境Dreamweaver MX 2004注重人性化和快捷化，因此对用户界

面进行了改进，注重更高的实用性和亲切的逻辑性、更加清晰地显示上下文焦点、快速准确地方便用户查找内容。除此之外，还增加了一个新的开始屏幕，可以快速访问最近的文件和教程资源。

2. 启动与退出 Dreamweaver MX 2004

步骤 1：选择“开始 / 程序 /Dreamweaver/Macromedia Dreamweaver MX 2004”菜单，单击鼠标左键启动 Dreamweaver MX 2004 程序，也可双击桌面上 Dreamweaver MX 2004 的图标。

步骤 2：启动 Dreamweaver MX 2004 后，系统将打开“工作区设置”对话框，如图 1.15 所示，在该对话框中可以选择工作区布局，本书选择“设计者”布局。

图 1.15 “工作区设置”对话框

步骤 3：单击“确定”后，系统弹出“设计视图”， Dreamweaver 会出现一个开始屏幕，如图 1.16 所示，在开始屏幕中，设计者可以快捷地打开最近的项目、创建新的项目、或者选择从范例创建。

• 打开最近的项目：提供最近编辑的文档的路径记录，以方便打开文档。

• 创建新的项目：创建 Dreamweaver 可以支持的所有类型文档。• 选择从范例创建：从 Dreamweaver 提供的范例中创建新的文档。步骤 4：退出 Dreamweaver MX 2004 只需要单击窗口右上角的“关闭”按钮或选择“文件 /退出”命令。

1.3.3 Dreamweaver MX 2004工作界面

其中包括常见的标题栏和菜单栏，其余的是：插入栏、文档工具栏、文档窗口、浮动面板组、状态栏（标签检查器在状态栏上）和属性面板（或称属性检查器），当使用“查找 /替换”功能时，将显示结果检查器。 Dreamweaver 的这种布局将多个文件集中到一个界面中，既降低了系统资源的占用率，还更加方便编辑文件。

下面以图 1.17 为例对 Dreamweaver MX 2004 中菜单栏和面板几个主要功能区进行说明。

1. Dreamweaver MX 2004菜单栏• “文件”菜单：如图 1.18 所示，包含用于文件操作的标准菜单

项，如“新建”、“打开”等，还包括各种其他命令，如“导入”、“导出”、“转换”、“在浏览器中预览”等等。

• “编辑”菜单：如图 1.19 所示，包含用于基本编辑操作的标准菜单命令，如“复制”、“拷贝”、“替换”等，还提供对 Dreamweaver MX 2004 中“参数选择”的访问。

图 1.18 “ 文件”菜单

图 1.19 “编辑”菜单

• “查看”菜单：如图 1.20 所示，用户可以查看各种视图，并可以隐藏不同类型的页面元素，如“设计”、“代码”等，以及不同的 Dreamweaver MX 2004工具，如“文件头内容”、“网格”等。

• “插入”菜单：如图 1.21 所示，提供对象面板上插入栏的替代项，以便将页面元素插入到网页中。

• “修改”菜单：如图 1.22 所示，使用户可以更改选定页面元素的属性，如修改表格和表格元素、为库和模板执行不同的操作等。

• “文本”菜单：如图 1.23 所示，用户方便地设置文本格式，如缩进、字体、样式、拼写检查等。

• “命令”菜单：如图 1.24 所示，提供对各种命令的访问，包括根据格式参数的选择来设置代码格式、创建相册，以及使用 Fireworks优化图像命令。

• “站点”菜单：如图 1.25 所示，可用于创建、打开、编辑站点，以及用于管理当前站点中的文件。

• “窗口”菜单：如图 1.26 所示，提供所有 Dreamweaver MX 2004 中的面板、检查器和窗口的名称，用来调用弹出和隐藏面板。

• “帮助”菜单：如图 1.27 所示， Dreamweaver MX 2004 的系统帮助。

2. Dreamweaver MX 2004“ 对象”面板有的地方称之为“插入栏”，主要是因为网页中的元素其实都可以被看作是对象，如文字、图像、表格等，并且大部分的对象只需要单击在插入栏上的相应按钮就可以完成插入操作。打开“对象”面板的方法是选择“窗口”菜单的“插入”命令，打开后如图 1.28 所示。

单击“常用”按钮，可以选择其他的插入类别，主要类别如下。• 常用：可以创建和插入最常用的对象，例如图像和表格。 • 布局：可以插入表格、 div标签、层和框架。还可以从三个表格视图中进行选择：“标准”（默认）、“扩展表格”和“布局”。当选择“布局”模式后，您可以使用 Dreamweaver 布局工具：“绘制布局单元格”和“绘制布局表格”。

• 表单：包含用于创建表单和插入表单元素的按钮。

• 文本：可以插入各种文本格式设置标签和列表格式设置标签。• HTML：可以插入用于水平线、头内容、表格、框架和脚本

的 HTML 标签。• 服务器代码：仅适用于使用特定服务器语言的页面，这些类别中的每一个都提供了服务器代码对象，可以将这些对象插入“代码”视图中。

• 应用程序：可以插入动态元素，例如记录集、重复区域以及记录插入和更新表单。

• Flash元素：可以插入 Flash元素。• 收藏：可以将“插入”栏中最常用的按钮分组和组织到某一常用位置。

3. Dreamweaver MX 2004“ 文档”工具栏“ 文档”工具栏中包含按钮和一些与查看文档、在本地和远程站点间

传输文档有关的常用命令和选项，如图 1.29 所示，使用这些按钮使可以快速切换文档的不同视图：“代码”视图、“设计”视图、“拆分”视图。

以下对选项进行说明。• 显示代码视图：仅在“文档”窗口中显示“代码”视图。• 显示代码视图和设计视图：在“文档”窗口的一部分中显示“代码”视图，而在另一部分中显示“设计”视图。当选择了这种组合视图时，“视图选项”菜单中的“在顶部查看设计视图”选项变为可用。请使用该选项指定在“文档”窗口的顶部显示哪种视图。

• 显示设计视图：仅在“文档”窗口中显示“设计”视图。• 标题：允许您为文档输入一个标题，它将显示在浏览器的标题栏。如果文档已经有了一个标题，则该标题将显示在该区域中。

• 没有浏览器 /检查错误：使您可以检查跨浏览器兼容性。• 文件管理：显示“文件管理”弹出菜单。• 在浏览器中预览 /调试：在浏览器中预览或调试文档。从弹出菜单中选择一个浏览器。

• 刷新设计视图：当您在“代码”视图中进行更改后刷新文档的“设计”视图。

• 视图选项：允许您为“代码”视图和“设计”视图设置选项。

4. “属性”面板 “属性”面板也被称为“属性检查器”， Dreamweaver MX 2004

“属性”面板位于 Dreamweaver MX 2004工作界面的下方，如图 1.30 所示。它主要用于修改当前页面的元素及整个页面的属性。

选择不同的元素，“属性”面板显示的内容是不同的，单击按钮可将“属性”面板隐藏起来，若单击“属性”面板右下方的按钮只显示“属性”面板的主要部分，编辑窗口将扩大。

5. 状态栏状态栏提供与当前活动文档有关的其它信息，如图 1.31 所示。

• 标签选择器：也叫标签检查器，显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签以选择该标签及其全部内容。比如：单击 <body>则选择了文档页面的所有内容。

• 窗口大小弹出菜单：仅在“设计”视图中可见，用来将“文档”窗口的大小调整到预定义或自定义的尺寸。

• 文档大小和估计下载时间：显示文档的所占的磁盘容量大小以及浏览的下载时间。

6. 浮动面板组浮动面板是 Dreamweaver操作界面的一大特色，用户可以通过单击浮动面板名称左侧的三角形图标来展开和收缩浮动面板，如图 1.32 所示，各浮动面板组合在一起称为浮动面板组，这样的排列方式可以充分的节省屏幕空间。

浮动面板组中常用的是文件面板、代码面板和应用程序面板，其中“文件”面板中可以显示当前站点的所有可用文件资源并实现有效的管理，如图 1.33 所示。“代码”面板组包括“代码片断”和“参考”两个面板，这给热衷于研究源代码的爱好者提供了极大方便。“应用程序”面板组主要由“数据库”、“绑定”、“服务器行为”和“组件”面板组成，实际的作用就是把编程语言和网页联系起来，如 ASP 、 PHP 、JSP 等，从而实现不必写代码来实现创建动态网页的功能。

7. 面板操作在 Dreamweaver 中控制面板并不是固定不变的，不仅可以展开和搜索，还可以隐藏、显示和移动，方法如下。

• 隐藏和显示控制面板：若要隐藏单个面板，单击“窗口”菜单的面板名称就可以了，如要隐藏“属性”面板，则单击“窗口”菜单中的“属性”命令。若要隐藏所有面板，则单击“窗口”菜单的“隐藏面板”命令，效果如图 1.34 和图 1.35 所示。显示面板的操作与之相反。

• 拖动面板：在 Dreamweaver MX 2004 中，每个面板的左侧都个标记，当鼠标靠近此标记的时候就变成了黑色十字箭头，此时按住鼠标左键可以拖动，图 1.36 所示的是将属性面板拖动出来。

• 复位面板：如果要将属性面校复位，可以再次拖动属性面板，当靠近原来位置的时候， Dreamweaver MX 2004 会用闪烁的黑色边框告诉用户该面板可以放置的位置，如图 1.37 所示。

实训 Dreamweaver MX 2004安装

通过本章的实训让学生了解 Dreamweaver MX 2004软件的基本组成以及网页的基本特征。

本章实训的素材可以在网上按索年下载 Dreamweaver MX 2004 ，也可以购买 Dreamweaver MX 2004软件。

1. 安装 Dreamweaver MX 2004软件。2. 通过浏览器至少浏览 10 个网站的主页并比较这些网页的特点。

小 结本章是全书的入门，通过几个经典的网页实例使读者可以了解

网页的基本概念和基本组成，同时通过对 Internet 、 WWW 、HTTP 协议、 HTML 、 DHTML 的讲述，较为清晰地告知读者正确理解网页与网站的区别。为了便于读者迅速掌握网站制作的含义，本书从工程创作的角度对网站设计的流程作了较为详细的叙述，这对高职高专的学生迅速适应社会需求有重要的意义。另外，本章作为全书起点，还简略地介绍了本书所选用的网页制作工具—— Dreamweaver MX 2004 的特点和工作界面，为以后使用该软件的相应功能制作网页时奠定基础。