网页设计基础

1、网页设计基础,要点内容: 基本的网络概念。 网页和网站的概念。 网站的设计流程。 Dreamweaver MX 2004特点和工作界面,本章学习目标 了解网页设计的基础知识，包括Internet、WWW、HTTP、HTML等名词的含义。 熟练掌握网站设计的基本流程，熟悉开发一个网站的步骤。 了解Dreamweaver MX 2004软件的安装及工作界面。 本章学前要求 对计算机基础知识、网络有一定的了解。,1.1 经典网页欣赏,在互联网盛行的时代，使用计算机的人几乎没有不上网的，只要能够连上网，就要看新闻、聊天、查资料等，当你在网上通过浏览器浏览各种信息时，所打开的视图界面就是网页。下面介绍几

2、个常见的网页。,图1.1 五梁液集团的主页图,图1.2 网易网站的主页,图1.3 北京大学网站的主页,图1.4 中央电视台主页,如果把网站比作一本书，那么网页就是书的一页，所以网页就是一个显示网站内容的最小单元，上面各实例就是网站中的一张网页。网站的主题不同决定网页的风格和内容也随之不同。 企业网站以宣传自己的企业形象、产品性能、生产规模等为主；ISP网络公司网站以人们的日常生活服务为主线索，是一个综合的服务性网站，通过搜索引擎来搜索世界范围内的各式各样的信息；学校的网站主要是介绍该学校的概况、发展历史及前景、教学、科研、招生就业等信息；电视台网站是以新闻为主线条，真实报道我们国家或世界范围内

3、的政治、经济、体育、人文等各种新闻,1.2 网页基础知识概述,Internet又称因特网，是国际计算机互联网的英文简称，是世界上规模最大的计算机网络。可以说是由数以万计具有特殊功能的专用计算机通过各种通信线路，把地理位置不同的网络在物理上连接起来的网络。 Internet是一个遵循一定协议自由发展的国际互联网，它利用覆盖全球的通讯系统使各类计算机网络互联，从而实现智能化的信息交流和资源共享。对个人用户而言，Internet最大的魅力在于用廉价的投入（只需拥有一台PC机，一个调制解调器，一根电话线）即可联通Internet，享受世界上最大的计算机信息网络服务，获取和交流各类信息。,1.2.1 I

4、nternet,Internet源自于美国国防部的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，其容量为

5、NSFNET的30倍，它已成为现在的Internet的骨干网。1997年美国开始实施下一代互联网络（Internet Next Generation）建设计划，无论其通信速度还是网络容量都得到了极大提高。 在中国，最先加入Internet的用户是中科院高能物理所。1994年邮电部正式与Internet联网，实现了和互联网的TCP/IP连接，从此中国的Internet商业服务正式开始，逐步开通了互联网的全功能服务，大型电脑网络项目正式启动，互联网在我国进入飞速发展时期。到1997年底，我国已建成中国公用计算机互联网（ChinaNET）、中国教育和科研网（CERNET）、中国科学技术网（CSTNE

6、T）和中国金桥信息网（ChinaGBN）4大互联网，并与因特网建立了连接。,1.2.2 WWW（万维网）,WWW是World Wide Web（环球信息网）的缩写，也可以简称为Web，中文名字为“万维网”。它起源于1989年3月，由欧洲量子物理实验室CERN所开展出来的主从结构分布式超媒体系统。 长期以来，人们只是通过传统的媒体（如电视、报纸、杂志和广播等）获得信息。但随着计算机网络的发展，人们想要获取信息，已不再满足于传统媒体那种单方面传输和获取的方式，而希望有一种主观的选择性。当万维网出现的时候，人们就拥有了一个获取信息的新的途径，所要做的就是通过打开Web浏览器，输入资源的地址，从而自主

7、的访问Internet上的信息资源。由于用户在通过访问信息资源的过程中，无需再关心一些技术性的细节，而且界面非常友好，因而Web在Internet 上一推出就受到了热烈的欢迎，走红全球，并迅速得到了爆炸性的发展。到了1993年，WWW的技术有了突破性的进展，它解决了远程信息服务中的文字显示、数据连接以及图像传递的问题，使得WWW成为Internet上最为流行的信息传播方式。现在，网络上可以提供各种类别的数据库系统，如文献期刊、产业信息、气象信息、论文检索等。由于计算机网络的发展，信息的获取变得非常及时、迅速和便捷。,WWW采用的是客户/服务器结构，其作用是整理和储存各种WWW资源，并响应客户端

8、软件的请求，把客户所需的资源传送到Windows、UNIX或Linux等平台上。可以说，Web为Internet的普及迈出了开创性的一步，是近年来Internet上取得的最激动人心的成就。,1.2.3 HTTP协议,HTTP协议（hypertext transfer protocol，超文本传输协议）是用于从WWW服务器传输超文本到本地浏览器的传送协议。它可以使浏览器更加高效，使网络传输减少。它不仅保证计算机正确快速地传输超文本文档，还确定传输文档中的哪一部分，以及哪部分内容首先显示（如文本先于图形）等。这就是你为什么在浏览器中看到的网页地址都是以“http:/”开头的原因。 自WWW诞生以来

9、，一个多姿多彩虚拟的世界便出现在我们眼前，可是我们怎么能够更加容易地找到我们需要的信息呢？当决定使用超文本作为WWW文档的标准格式后，科学家们立即制定了能够快速查找这些超文本文档的协议，即HTTP协议。经过多年的使用与发展，HTT协定得到不断的完善和扩展。目前在WWW中使用的是HTTP/1.0的第六版，是WWW服务器使用的主要协议。,1.2.4 网页与网站,WWW中的信息资源主要以一篇篇的Web文档为基本元素构成，Web文档简称Web页，用中文描述也就是我们俗称的网页。这些网页采用超级文本（hyper text）的格式，即可以含有指向其他网页或其本身内部特定位置的超级链接，或简称链接。可以将链

10、接理解为指向其它网页的“指针”。链接使得网页交织为网状，这样，如果Internet上的Web页和链接非常多的话，就构成了一个巨大的信息网。 网站是由多个网页集合而成的，集中体现网站的主题，又围绕这个主题表现网站的内容。网页通常分为首页和内页两种。在一个网站里浏览器首先打开的第一个网页叫首页（又叫主页），通过主页进入、浏览的页面称为内页，又叫分页。 首页是一个网站的门面，它的访问量最大，首页所提供的是网站的主题，通过访问首页就能知道该网站所要传递给访问者的首要信息，因而首页设计的好坏直接影响到该网站的质量，也是每一个网页设计者重点要考虑的问题。图1.5所示，是科学出版社的首页。 内页是网站的重要

11、组成部分，是体现具体信息的载体，一般数量比较多，制作比较方便，成本较低。网站所提供的信息服务都是通过各内页传递给用户的。,图1.5 科学出版社的首页,1.2.5 HTML,HTML（hyper text mark-up language）即超文本标记语言，或称为“多媒体文件语言”，它可以标记超链接、文本样式、页面标题、插入图片或动画等多媒体元素，以此来创建Web页面，HTML语言也是用于创建Web页和Web通信的第一个通用描述性语言，由Tim Berners-lee提出。 WWW采用的是客户/服务器结构，当用户从WWW服务器取到一个文件后，Web浏览器就会读取Web网站上的HTML文档，再根据

12、此类文档中的描述组织并显示相应的Web页面。由于将文件放入WWW服务器的人并不知道将来阅读这个文件的人到底会使用哪一种类型的计算机或终端，因此，要保证每个人在屏幕上都能读到正确显示的文件，必须以各种类型的计算机或终端都能“看懂”的方式来描述文件，于是就产生了HTML语言。设计HTML语言的目的也就是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，使人们不用考虑具体信息是在当前电脑上还是在网络的其他电脑上。,HTML文件是由HTML命令组成的描述性文本，因为本身是文本格式的，所以原则上用任何一种文本编辑器都可以对它进行编辑。HTML语言有一套相当复

13、杂的语法。一个基本的HTML文档的结构应该包括头部（Head）、主体（Body）两大部分。头部描述浏览器所需的信息，主体包含所要页面的具体内容，开发者可以使用HTML语言插入各种网页元素，并通过HTML标记说明文字、图形、动画、声音、表格、链接等网页元素的属性。 HTML超文本标记语言表的标记符是通过标签（也叫标记符）来定义网页内容的，HTML超文本标记语言表有若干标记符，如表1.1所示。,HTML中常见的标签说明,：注释标记，在“”之间的内容将不在浏览器中显示。 ：描述文件所符合的HTML DTD，用于对文件的兼容性作简要说明。 ：描述超级链接的开始位置或者目标。要求必须定义herf=或na

14、me=属性。 ：表示取首字时的缩写词。 ：是描述地址、签名和作者等信息。 ：在页面中放置可执行的内容。 ：在客户端图像映射MAP中描述超链接热点的轮廓形状。 ：将文本以粗体显示。 ：描述文档的基本地址，浏览器依此转换相对地址。只能用在HEAD标记中。 ：描述基本字体类型，用于显示缺省字体的文本。可用在HEAD标记中， ：在页面中加入背景音乐。 ：以比当前所用字体稍大的字体显示文本。,：引用其它资源中的内容，可能会缩进、斜体显示，通常上下加空行。 ：描述文档主体的开始和结束。 ：换行标记。 ：设置一个按钮。 ：给TABLE加一个标题。 ：居中排列其中的内容。 ：简要说明一个引用，内容用斜体显示。

15、 ：以等宽字体显示一段代码。 ：定义TABLE中一列的属性。 ：用于在TABLE中定义一个列组。 ：在列表中解释一条术语，靠右显示。 ：指明文本已从文档中删除。 ：定义一个术语。 ：表示一系列短条目。在此之后的文本用LI开头，且每条不超过20个字符。 ：在文档中描述不同性质的元素，如章节、段落、摘要等。 ：表示一个列表。DT、DD用于定义列表内的条目。,：在列表中定义一个术语，显示在左列中。 ：用于要强调的文本，通常以斜体显示。 ：插入任何类型的文档，但用户必须在计算机上安装可解读此类文档的应用程序。 ：可用于描述一组区域的关系，可嵌套。 ：设置字体属性。 ：描述一个包含控件的表单。 ：在FR

16、AMESET中描述一个单独的框架。 ：在混合文档中设置水平、垂直方向框架的数量和大小，在FRAMESET中用FRAME设置每个框架的内容和属性。可嵌套使用。 ：出现在文档的起始部分，标明文档的题目或介绍，包含文档的无序信息。可在其中使用BASE、LINK、MATE、TITLE、BASEFONT、BGSOUND元素。 ：从H1到H6，六种标题，黑体显示。 ：显示一条水平线。 ： HTML文本起始元素，通知浏览器该文档为HTML文档。,：将文本用斜体显示。 ：在文档中嵌入一个浮动框架。 ：在文档中插入一幅图像或一段视频。 ：设置FORM中的输入控件，TYPE属性指明控件类型，需要设置NAME。 ：

17、指出新加入文档的文本内容。 ：通知浏览器该文档是一个索引文件。用户可对该文档进行关键词搜索。 ：指明用户应该用键盘输入的文字，一般用等宽字体显示。 ：说明一个标签。不可嵌套。 ：确定FIELDSET元素定义的区域集合。必须作为FIELDSET中的第一个元素。 ：表示列表中的一个条目，可用在DIR、MENU、DL、UL中。 ：在当前HTML文档和其它资源之间建立超链接。只能在HEAD中使用。 ：用等宽字体显示文本.,：为客户端图像映射指定热点区域集合。 ：建立一个滚动文本区。 ：建立一个菜单，用LI定义菜单内的条目。 ：为浏览器、搜索引擎或其它程序提供HTML文档信息。必须在HEAD中使用。 ：

18、不换行。 ：为不支持FRAMESET的浏览器提供。 ：在不支持脚本的浏览器中显示包含的内容。 ：在HTML文档中插入一个对象。 ：建立一个有序的列表。 ：为SELECT元素定义一个选择项。 ：表示一个段落。 ：给对象设置参数。对APPLET、EMBED、OBJECT有效。 ：不处理HTML标记，等宽字体显示。 ：用等宽字体显示文本，保留间距和换行。 ：给文本设置段间距（较小）。,：显示带删除线的文本。 ：用较小的字体显示文本。缺省为等宽字体。 ：表示需要脚本引擎解释执行的脚本代码区。 ：设置一个下拉式选择框，用OPTION定义选择项。 ：用较小的字体显示文本。 ：定义一个范围，不影响页面结构和

19、显示。 ：显示带删除线的文本。 ：着重点。通常为黑体。 ：给页面设置显示风格。 ：用较小的字体将文字显示在下角。 ：用较小的字体将文字显示在上角。 ：定义一张表格。用TR、TD、TH元素定义行、列和单元，可选元素CAPTION、THEAD、TBODY、TFOOT、COLGROUP和COL，可用来组织表格以及对列、列组属性进行处理。 ：定义一个表体。 ：定义表格的一个单元格（排成一行）。,：多行文本输入控件。 ：定义一张表格的页脚。 ：定义表格中一行或一列的标题，文字黑体显示。 ：定义表格的表头。 ：说明文档标题。 ：定义表格中的一行。 ：用等宽字体显示文本。 ：显示带下划线的文本。 ：定义一张

20、列序的列表，用LI定义条目。 ：对一个变量进行说明。 ：在NOBR文本中插入一个软换行符。,1.2.6 动态HTML,动态HTML（即DHTML）是近年来网络发展进程中最振奋人心，也最具实用性的创新之一。国内网络界也掀起了一股学习动态HTML的热潮。那么，到底什么是动态HTML呢？简而言之，动态HTML就是一种即使在网页下载到浏览器以后仍然能够随时变换的HTML。比如，当鼠标移至文章段落中，段落能够变成蓝色，或者网页头部能够滑过电脑屏幕。这就是说，HTML中能够做的一切在网页下载后还能够做。 有人把动态HTML当作一门语言，也有人把它当作一种专门的技术，这些理解都是不对的。实际上，它是一种通过

21、各种技术的综合发展而得以实现的概念（当然，不同的浏览器，实现的程度也不同），这些技术包括Javascript、VBScript、Document Object Model（文件目标模块）、Layers和CSS（cascading style sheets）等。,动态HTML的实现手段同样是多种多样的，可以是现有的各种手段的组合。比较常用的技术有： 脚本编程语言（JavaScript，VBScript） 文件目标模块（DOM） 层叠样式表（CSS） 动态图层（layers） Netscape Communicator 4.0以上版本和 Microsoft Internet Explorer 4.

22、0以上版本，都宣称支持这种最新的动态HTML功能。但实际上，他们所支持的动态HTML内容并不完全相同。 IE所支持的动态HTML包括以下几部分： 层叠样式表（CSS）：提供了设定HTML标记的所有文本修饰（如文字的大小、字体、颜色等内容）的排版功能。在网页下载完毕后，可动态地改变页面元素的CSS属性。,动态内容（Dynamic Content）：可以动态地更新网页的内容，即可以动态删除和增加页面中的各种元素，随时适应页面编排的需要。 动态图像：通过内建的Animation可以实现动画的效果，另外配合 JavaScript、VBScript或ActiveX控件可以轻松地移动图像。 数据库支持：通

23、过动态HTML方便地实现对数据库中数据的访问。从而使网页设计者轻松地处理数据，实现更强大的交互功能。 Netscape所支持的动态 HTML包括以下几部分： 层叠样式表（CSS）。 脚本排版样式（JavaScript Style Sheets）：简称JSS，这是Netscape公司为该浏览器内建的一种排版样式，可以通过JavaScript来控制Style Sheets。 动态图层（dynamic layers）：这是一项很强大的功能，可以提供图文定位、移动图文、控制显示或隐藏图片的功能，方便地实现各种特殊效果。,因此在一般的制作动态网页的过程中，要特别注意两大主流浏览器对动态HTML支持的程度

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

25、的水平就会很快提高。,1.2.7 网站设计的流程,虽然每个网站的规模、内容和所提供的信息不同，但在网站设计的制作阶段的基本流程是相似的。 1. 网站的需求分析 在设计一个网站时，需求分析是第一步，也是最重要的一步。只有明确了网站建设的需求，才能进行下一步工作。 要做好网站的需求分析，主要包括四个步骤： 确定参与组织设计的人员、进行用户调查、进行市场调研、需求分析输出。 其中用户调查是需求分析的关键，主要包括以下几个方面：,1）网站当前以及日后可能出现的功能需求。 2）客户对网站的性能（如访问速度）的要求和可靠性的要求。 3）确定网站维护的要求。 4）网站的实际运行环境。 5）网站页面总体风格以

26、及美工效果（必要的时候用户可以提供参考站点或者由公司向用户提供）。 6）主页面和次级页面数量，是否需要多种语言版本等。 7）内容管理及录入任务的分配。 8）各种页面特殊效果及其数量（JS，Flash等）。 9）项目完成时间及进度（可以根据合同）。 10）明确项目完成后的维护责任。,用户调查完毕后，网站开发者再从以下几个方面进行市场调研： 1）市场中同类网站产品的确定。 2）调研产品的使用范围和访问人群。 3）调研产品的功能设计（主要模块构成，特色功能，性能情况等等） 4）简单评价所调研的网站情况 最后根据用户调查和市场调研的结果出具分析报告，经过“小组讨论决定方案、主要负责人签字、生效并打印文

27、档”的程序，从而完成需求分析。 2. 前期设计 在前期设计中，设计人员根据网站的模式和特点以及网站制作规范选择开发工具、后台数据库，定制出最适当的标准样式、网站结构，将策划方案和开发标准打印并分发给小组成员人手一份，根据策划文档及网站设计规范，主要设计人员进行前期的首页设计。大致过程是：小组负责人确定设计进程时间并派发任务单、主要设计人员开始设计、递交审核、通过后主要负责人签字。,3. 二级页面设计 在首页设计完毕后，整个网站的风格、标准、样式都已经建立，紧接着网站开发就进入了二级页面的设计阶段。大致过程是：依照网站设计规范和标准样式由小组负责人确定设计进程时间并派给任务单、主要设计人员按照既

28、定的网站结构开始二级页面设计工作、递交审核、通过后主要负责人签字。 4. 开始实际制作 第2步和第3步是设计阶段，制作出来的只是样板，并没有真正的进行大规模的开发，制作成为网页文件。在本步骤中就是要将设计落实到所有网页中去，大致过程是：依照网站设计规范和标准样式由小组负责人确定制作进程时间并派任务单、主要制作人员开始内容建设工作、与程序方面人员配合协调工作、递交审核、通过后主要负责人签字。,5. 全面程序开发 第4步制作出来的是静态的网页，要实现复杂的功能，还必须有动态程序的支持，本步骤就是利用诸如Dreamweaver MX 2004之类的开发软件将页面与程序进行整合。 6. 完成并测试 经

29、过程序与页面的整合，网站完成了设计与开发，网站策划人员把所有有关网站的备份文件以及原程序备份，并书写一份网站跟踪报告，说明此网站的建设工作结束所用资源人力以及执行情况。但是，网站是否能够真正的达到预期效果，还必须依靠软件质量保证部门（QA）进行测试，并对比测试结果进行相应的修改，才算最终完成了网站的开发。,7. 发布网站 网站需要发布到Internet上才能被访问浏览，发布的方法有两种：一是网站拥有者向电信运营部门申请拥有独立互联网协议IP地址的线路，自行搭建Web服务器，并向域名管理部门申请域名指向该IP地址；二是向虚拟主机服务商申请虚拟主机和域名或者是申请主机托管。无论哪种办法，目的都是要

30、为网站准备一个网络发布的空间和网络域名。网络空间主要用于存放网页文件、图像文件和其他数据文件等。域名类似于互联网上的门牌号码，是用于识别和定位互联网上计算机的层次结构式字符标识，与该计算机的IP地址相对应，比如我们熟悉的门户网站“网易”，就是其域名。虚拟主机是一种多个网站共享一台服务器，但每个网站都可以拥有独立域名和完整服务器功能的技术，现在提供网络空间和域名申请的虚拟主机服务商有很多，如中国万网（）、中国数据（）、商务中国（）等。网站的拥有者向这些运营商申请空间和域名，但必须根据申请空间的大小、功能、运行环境和域名的类型向这些公司缴纳年费。,8. 上传到服务器 当网站全部开发完毕并在本地计算

31、机上测试后，就可将网站设计的全部页面文件和数据文件上传到所申请的服务器.一般使用FTP的方式上传，FTP的地址、账号和密码由虚拟主机服务商提供。如果是网站拥有者自行搭建的服务器，也建议使用FTP的方式上传，这样比较安全。上传完毕后，在浏览器中只要输入网站的域名或网页的地址就可以打开站点浏览网页的信息了。 9. 后期维护 网站上传到相应的服务器之后，在运行中可能会出现各种不同的问题，如页面的布局、网页的主题、网站服务的功能等诸多方面需要修改，所以网站的后期维护是网站设计的重要的环节。 本书是一本基础教材，所要介绍的网页设计与制作主要是指静态网页的制作，在整个网站设计流程中基本处于初期设计到完成测

32、试这个过程，主要的目的是介绍如何切实的利用Dreameweaver MX 2004进行实际的网页制作。,1.3 认识Dreamweaver MX 2004,Dreamweaver MX 2004是Macromedia公司推出的一个功能强大的网页制作工具，它采用了多种先进技术，几乎能够支持当今所有的网页制作技术，能够快速高效的创建各种静态页面和动态页面，还能够创建有数据库支持的数据库网站。值得一提的是，在Dreamweaver MX 2004提供强大网页制作功能的同时，还提供了完善的站点管理机制，用户通过Dreamweaver MX 2004可以方便快捷的创建、管理、维护、发布自己的站点。所以，

33、称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所示，根据需要选择存放Dr

34、eamweaver 的本地路径，然后单击“下一步”按钮。,图1.8 授权协议,图1.9 路径选择,步骤3：安装向导弹出Dreamweaver将支持的文件类型的选择窗口，如图1.10所示，在这里可以选择用户想要编辑的文件，如果不需要，可以取消，本书选择默认设置，单击“下一步”按钮，安装向导通知用户已经设置好的内容，如图1.11所示，如确认无误，单击“下一步”继续安装。,图1.10 编辑文件类型选择,图1.11 已设置内容,步骤4：进入正式安装阶段，Dreamweaver安装向导会提示Dreamweaver MX 2004的安装进度，如图1.12所示。,步骤5：进度条进行到100%的时候，安装向导

35、会提示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格式化选项、可视化网页

36、设计、图像编辑、全局查找替换、全FTP功能、处理Flash和Shockwave等多媒体格式和动态HTML、基于团队的Web创作。在编辑上可以选择可视化方式或者源代码编辑方式。,Dreamweaver MX 2004新增功能如下,（1）跨浏览器有效性验证 当保存文件时自动检查当前文件的跨浏览器有效性，可以指定一种浏览器作为测试用浏览器，同时自动检验以确定页面有没有目标浏览器不支持的标签或CSS结构。 （2）多重设计模式 Dreamweaver MX 2004为设计者提供了三种设计模式，分别是“代码”、“拆分”、“设计”，习惯直接编写代码的设计者可以在“代码”模式下开发，“设计”模式提供所见即所得

37、的可视化操作界面，“拆分”模式则兼有前二者的模式，方便进行程序与页面元素的整合。 （3）更强大的CSS支持 CSS（层叠样式表）是专业网页设计必须掌握的技术，它可以方便的控制文本、图像、表格、层的样式，利用丰富的CSS样式表可以构建复杂的、标准的站点，Dreamweaver MX 2004提供了更为丰富的使用工具用于快速选择和样式属性控制，包括CSS布局可视化、改进的CSS呈现等。 （4）增强的源代码编辑功能 增强的源代码编写工具使得编辑代码更省时，例如更新后的查询替换工具、更多的搜索选择项、右键编写代码工具等，还能够保存搜索条件。,（5）扩展的文档格式支持 在Dreamweaver MX 2

38、004中，开发者可以直接复制和粘贴Word或者Excel文档的内容，并且保留字体、颜色、CSS样式表信息，使用系统支持的编码保存任何字体包括双字节字符集。 （6）安全FTP 在站点定义的对话框中设置远程信息时选择“使用安全FTP（EFTP）”，则可以对所有传输的文件完全加密，并且阻止他人越权存取信息、文件内容、用户名和密码，保证在上传网页时文件和账号信息的安全。 （7）加强对新技术的支持 Dreamweaver MX 2004支持当今主流的开开环境，如ColdFusion、J2EE、PHP，.NET等主流服务器技术，并且还加入了XML命名空间支持、ASP.NET窗体空间对象、新的参考书内容和新

39、的PHP服务器端行为。 （8）内建图形引擎 在选中图形后，可以在“属性”面板上的“编辑”按钮中选择内嵌的Macromedia Fireworks MX 2004，不需要离开Dreamweaver MX 2004环境就可以对图形进行修剪、改变大小、旋转角度、调节明暗度等操作，大大减少了设计者的工作量。,（9）整合Macromedia的其他产品 Dreamweaver MX 2004加强了和Macromedia其他产品的协同工作能力，例如：开发者通过Dreamweaver可以直接设置Flash组件的参数、可以轻松导入一个Flash构建等。 （10）改进的用户环境 Dreamweaver MX 20

40、04注重人性化和快捷化，因此对用户界面进行了改进，注重更高的实用性和亲切的逻辑性、更加清晰地显示上下文焦点、快速准确地方便用户查找内容。除此之外，还增加了一个新的开始屏幕，可以快速访问最近的文件和教程资源。,2. 启动与退出Dreamweaver MX 2004 步骤1：选择“开始/程序/Dreamweaver/Macromedia Dreamweaver MX 2004”菜单，单击鼠标左键启动Dreamweaver MX 2004程序，也可双击桌面上Dreamweaver MX 2004的图标。 步骤2：启动Dreamweaver MX 2004后，系统将打开“工作区设置”对话框，如图1.1

41、5所示，在该对话框中可以选择工作区布局，本书选择“设计者”布局。,图1.15 “工作区设置”对话框,步骤3：单击“确定”后，系统弹出“设计视图”，Dreamweaver会出现一个开始屏幕，如图1.16所示，在开始屏幕中，设计者可以快捷地打开最近的项目、创建新的项目、或者选择从范例创建。 打开最近的项目：提供最近编辑的文档的路径记录，以方便打开文档。 创建新的项目：创建Dreamweaver可以支持的所有类型文档。 选择从范例创建：从Dreamweaver提供的范例中创建新的文档。 步骤4：退出Dreamweaver MX 2004只需要单击窗口右上角的“关闭”按钮或选择“文件/退出”命令。,1

42、.3.3 Dreamweaver MX 2004工作界面,其中包括常见的标题栏和菜单栏，其余的是：插入栏、文档工具栏、文档窗口、浮动面板组、状态栏（标签检查器在状态栏上）和属性面板（或称属性检查器），当使用“查找/替换”功能时，将显示结果检查器。Dreamweaver的这种布局将多个文件集中到一个界面中，既降低了系统资源的占用率，还更加方便编辑文件。 下面以图1.17为例对Dreamweaver MX 2004中菜单栏和面板几个主要功能区进行说明。 1. Dreamweaver MX 2004菜单栏 “文件”菜单：如图1.18所示，包含用于文件操作的标准菜单项，如“新建”、“打开”等，还包括各

43、种其他命令，如“导入”、“导出”、“转换”、“在浏览器中预览”等等。 “编辑”菜单：如图1.19所示，包含用于基本编辑操作的标准菜单命令，如“复制”、“拷贝”、“替换”等，还提供对Dreamweaver MX 2004中“参数选择”的访问。,图1.18 “文件”菜单,图1.19 “编辑”菜单,“查看”菜单：如图1.20所示，用户可以查看各种视图，并可以隐藏不同类型的页面元素，如“设计”、“代码”等，以及不同的Dreamweaver MX 2004工具，如“文件头内容”、“网格”等。 “插入”菜单：如图1.21所示，提供对象面板上插入栏的替代项，以便将页面元素插入到网页中。,“修改”菜单：如图1

44、.22所示，使用户可以更改选定页面元素的属性，如修改表格和表格元素、为库和模板执行不同的操作等。 “文本”菜单：如图1.23所示，用户方便地设置文本格式，如缩进、字体、样式、拼写检查等。,“命令”菜单：如图1.24所示，提供对各种命令的访问，包括根据格式参数的选择来设置代码格式、创建相册，以及使用Fireworks优化图像命令。 “站点”菜单：如图1.25所示，可用于创建、打开、编辑站点，以及用于管理当前站点中的文件。,“窗口”菜单：如图1.26所示，提供所有Dreamweaver MX 2004中的面板、检查器和窗口的名称，用来调用弹出和隐藏面板。 “帮助”菜单：如图1.27所示，Dream

45、weaver MX 2004的系统帮助。,2. Dreamweaver MX 2004“对象”面板 有的地方称之为“插入栏”，主要是因为网页中的元素其实都可以被看作是对象，如文字、图像、表格等，并且大部分的对象只需要单击在插入栏上的相应按钮就可以完成插入操作。打开“对象”面板的方法是选择“窗口”菜单的“插入”命令，打开后如图1.28所示。 单击“常用”按钮，可以选择其他的插入类别，主要类别如下。 常用：可以创建和插入最常用的对象，例如图像和表格。 布局：可以插入表格、div标签、层和框架。还可以从三个表格视图中进行选择：“标准”（默认）、“扩展表格”和“布局”。当选择“布局”模式后，您可以使用

46、Dreamweaver布局工具：“绘制布局单元格”和“绘制布局表格”。 表单：包含用于创建表单和插入表单元素的按钮。,文本：可以插入各种文本格式设置标签和列表格式设置标签。 HTML：可以插入用于水平线、头内容、表格、框架和脚本的 HTML 标签。 服务器代码：仅适用于使用特定服务器语言的页面，这些类别中的每一个都提供了服务器代码对象，可以将这些对象插入“代码”视图中。 应用程序：可以插入动态元素，例如记录集、重复区域以及记录插入和更新表单。 Flash元素：可以插入Flash元素。 收藏：可以将“插入”栏中最常用的按钮分组和组织到某一常用位置。,3. Dreamweaver MX 2004“

47、文档”工具栏 “文档”工具栏中包含按钮和一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项，如图1.29所示，使用这些按钮使可以快速切换文档的不同视图：“代码”视图、“设计”视图、“拆分”视图。 以下对选项进行说明。 显示代码视图：仅在“文档”窗口中显示“代码”视图。 显示代码视图和设计视图：在“文档”窗口的一部分中显示“代码”视图，而在另一部分中显示“设计”视图。当选择了这种组合视图时，“视图选项”菜单中的“在顶部查看设计视图”选项变为可用。请使用该选项指定在“文档”窗口的顶部显示哪种视图。,显示设计视图：仅在“文档”窗口中显示“设计”视图。 标题：允许您为文档输入一个标题，它将显示在浏览器的标题栏。如果文档已经有了一个标题，则该标题将显示在该区域中。 没有浏览器/检查错误：使您可以检查跨浏览器兼容性。 文件管理：显示“文件管理”弹出菜单。 在浏览器中预览/调试：在浏览器中预览或调试文档。从弹出菜单中选择一个浏览器。 刷新设计视图：当您在“代码”视图中进行更改后刷新文档的“设计”视图。