J2EE Web核心技术《XHTML与XML应用开发》——第1 章 HTML、XHTML和DHTML标签语言(第2部分)

第1 章HTML、XHTML和DHTML标签语言（第2/3部分）

1.1应用DreamWeaver实现可视化页面设计

1.1.1网页设计工具软件DreamWeaver

1、Dreamweaver是一款专业的Web客户和服务器端页面开发工具程序

该工具软件可以用于对Web 站点、Web 页面和Web 脚本程序进行设计、编码和开发实现，并且提供有可视化的编辑环境和良好的及时动态帮助信息。Web页面开发人员通过应用Dreamweaver工具软件中的可视化编辑功能，可以快速地创建页面内容而无需编写任何的HTML标签代码。当然，开发者也可以手写标签而直接编码实现对页面中的内容描述。因为在Dreamweaver程序中，为开发人员提供有两种不同形式的开发视图：代码和设计。

Dreamweaver工具软件是曾经风靡一时的网页三剑客成员之一的页面可视化开发工具，早期属于Macromedia公司、但现在已经属于Adobe公司。目前版本的Dreamweaver程序，不仅支持Web客户端的页面开发所涉及的各种技术（比如XHTML、CSS和JavaScript等），也支持各种主流的Web服务器端的开发技术及编程语言。例如微软早期的ASP以及现在的https://www.wendangku.net/doc/f5984140.html,、ColdFusion标签语言（ColdFusion Markup Language ，CFML）、Sun公司的JSP、Rasmus Lerdorf创建的PHP等目前比较流行的动态网站开发的编程语言。

下文将介绍如何应用Dreamweaver工具程序进行Web项目中的各个页面的设计和实现，但由于Dreamweaver程序操作简单，基本上类似于操作微软公司的Word软件。

2、启动DreamWeaver工具软件程序

读者可以根据自己所获得的DreamWeaver工具软件的版本首先在本机中安装该软件，目前也提供有免安装的版本（俗称“绿色版”）。作者采用的就是免安装的版本，直接单击其中的DreamWeaver.exe程序文件名就可以启动DreamWeaver工具软件，然后就可以见到图1.8所示的程序主界面（该图为主界面的局部截图）。

图1.8 DreamWeaver工具软件启动后的程序主界面

3、在DreamWeaver工具软件程序中新建Web站点

1）新建和命名Web站点

DreamWeaver程序对页面的组织和管理的方式是应用“Web站点”的方式实现的，基本上类似于在Java程序开发中的Eclipse IDE工具中的项目（Project）的概念。因此，Web 开发人员首先需要在DreamWeaver工具程序中为项目新建一个Web站点。

单击DreamWeaver工具程序主窗口内的主菜单条中的【站点】菜单，如图1.8所示。然后再单击其中的【新建站点】子菜单项，将出现下图1.9所示的新建站点的对话框窗口。在该对话框窗口中输入将要创建站点的名称（本示例为WebCRM）以命名该Web站点。

图1.9 新建和命名本项目的Web站点

2）为本Web站点选择对应的服务器端开发实现技术

单击图1.9所示的对话框窗口内的【下一步】按钮后，将出现图1.10所示的选择服务器端开发实现技术的对话框，在该对话框中为本Web站点选择对应的服务器端开发实现技术，本示例选择JSP类型。

图1.10 选择服务器端的实现技术为JSP

3）选择WebCRM项目的Web站点根目录位置

继续单击图1.10所示的对话框中的【下一步】按钮后，将出现图1.11所示的对话框窗口，在该对话框窗口内根据本Web项目的页面文件实际存放的磁盘目录选择项目的Web 站点根目录的磁盘路径位置，本WebCRM示例项目在作者的机器中为F:\WebCRM目录。

图1.11 选择项目的Web站点根目录位置

然后再继续在图1.11所示的对话框窗口中点击【下一步】按钮，将进入新建Web站点的其他配置信息的对话框。对这些剩下的配置信息可以不需要改变，而都直接选用DreamWeaver程序中所提供的默认选择项目，一直点击各个对话框中的【下一步】按钮直到出现包含有【完成】按钮的对话框（在此省略了对这些步骤的截图没有附录）。最后单击该对话框中的【完成】按钮后，将创建出本Web站点，如图1.12所示的目录结构图示。

4、在Web站点中新建项目中的各个页面文件的目录

由于在实际项目中存在有大量的信息，一般都应该要把这些信息内容分类存放以便于以后的维护修改。因此，需要在本Web站点中建立出如下的各种通用的文件目录。比如CSS目录（存在项目中的各个样式单文件）、images目录（存放项目中的各种图片文件）、flash目录（存放项目中的各种Flash动画文件）、javascript（存放项目中的各个客户端的JavaScript脚本程序）等。

当然，除了这些通用的文件目录以外，开发人员也可以根据项目中的需要建立出其他的目录。图1.12为客户关系信息管理系统（Customer Relationship Management，CRM）中的各个目录的局部截图图示。

图1.12 某个客户关系信息管理系统的文件目录结构的图示

1.1.2客户关系管理信息系统页面设计和实现

1、新建CRM系统中的Web站点的首页面文件

1）设置Dreamweaver页面编辑器的缺省编码

由于Dreamweaver软件支持多种不同的语言，在项目的页面设计中为了能够正确地保存页面中的中文信息，应该要首先设置改变页面编辑器的缺省编码为中文编码。首先选择【文件】主菜单（如图1.8所示）中的【新建】子菜单项目，然后将会弹出一个【新建文档】的对话框，如图1.14所示。在该对话框中单击其中的【首选参数】按钮后将弹出图1.13所示的【首选参数】对话框窗口。

图1.13 设置页面的缺省编码为简体中文编码

在图1.13所示的对话框左面的【分类】中选择【新建文档】类型，然后在右面的【默认编码】栏中的下拉列表框中选择“简体中文（GB18030）”项目。然后单击该对话框中的【完成】按钮就可以改变Dreamweaver页面编辑器的缺省编码为中文编码。

2）新建出项目中的首页面文件

继续选择【文件】主菜单中的【新建】子菜单项目，然后将会弹出图1.14所示的【新建文档】的对话框。在该对话框中的【页面类型】栏中选择“HTML”类型，然后再在【布局】栏中选择“无”（表示不需要预先进行页面的布局设计），最后单击其中的【创建】按钮，将创建出一个空的HTML页面。

图1.14 新建出项目中的首页面文件的【新建文档】对话框

命名该HTML页面文件名为index.html（目前暂时采用客户端HTML页面），并将该index.html文件保存到Web项目的站点根目录中，如图1.12所示。

2、为项目中的首页面文件添加各种标签内的子标签

1）在index.html页面中添加标签中的各种子标签

在页面文档头部（由成对的标签定义）中可放置的子标签主要有

这是蓝梦集团CRM系统的首页内容

2）HTML中的 标签主要有两种形式

页面文档头部中的各种标签主要有两种不同的形式：

content="该名称对应的值" /> 和 。并且可以包含有多个不同的标签，并且书写的顺序可以任意。

3）带有name 属性的各种标签

它同样也是说明性的标签，并对该页面的最终显示效果没有任何影响。其中的name 属性定义了该标签的性质，而content 属性定义了该标签的值。name 属性主要的取值及对应的功能说明如下：

●关键字（keywords）：指定与站点有关的关键字，给搜索引擎提供分类信息。

●描述（description）：为搜索引擎提供Web站点内容简介的描述信息。

●作者（author）：注明网页的设计实现者，通常是作者姓名或联系方式。

●搜索机器人（robots）：当一个搜索机器人（也称为搜索蜘蛛）程序访问一个Web

站点时，它首先爬行该站点根目录下是否存在有robots.txt文件，如果存在该文件，搜索机器人程序就会按照该文件中的描述内容来确定搜索的范围；如果该文件不存

在，那么搜索机器人程序就沿着页面中的各个超链接顺序抓取信息。

4）标签中的content属性

搜索引擎（Google的搜索引擎为Googlebot，百度的搜索引擎为Baiduspider）自动检索页面中 标签的keywords和decription属性，并将它们的信息内容加入到索引数据库中，然后再根据关键词被检索的密度将网站排序。因此，为了使得本Web站点能够更好地被搜索引擎程序搜索到，Web系统的开发人员需要合理地设置 标签的content属性的值。图1.15为百度搜索引擎搜索“蓝梦集团”关键字后的搜索结果的局部截图。

图1.15 通过百度搜索“蓝梦集团”关键字后的搜索结果的局部截图

由于搜索引擎本身是一个自动化的程序，并根据特定的搜索策略和算法不断地访问Internate网上的各个Web站点的网页信息并建立索引数据库，然后再对信息进行组织和处理，并将处理后的最终结果信息显示给用户。搜索引擎是为用户提供检索服务的系统，使访问者能在某个搜索引擎中快速地搜索到目标Web网站的有关网页。

标签中的content属性可能的取值及对应的功能说明如下：

●content="all"：页面文件将被检索、并且页面中的超链接可被查询。

●content=" none"：页面文件不被检索也不需要查询页面中的各个超链接。

●content=" index"：页面文件将被检索。

●content=" follow"：查询页面中的各个超链接。

●content="noindex"：页面文件不检索，但可被查询超链接。

●content="nofollow"：页面文件不被检索，但可查询页面中的各个超链接。

5）带有http-equiv属性的各种标签的作用

这些标签是功能性标签，它为浏览器设置一些工作参数以帮助浏览器正确和精确地显示出本网页的内容。因此，它对网页在浏览器中的最终显示效果是有一定的影响的。http-equiv属性可能的取值及对应的功能说明如下：

●字符集（Content-Type）：指定网页中使用的字符集，对于中文的页面一定要设置

为中文编码（gb2312或者gbk等形式），否则会出现中文乱码现象。因为如果在

一个网页中没有指明字符集，浏览器会应用默认的字符集显示出该网页的内容，如

果它和网页中实际使用的字符集不一样时，就会使得网页信息在显示时出现乱码。

●pragma：禁止浏览器对本页面内容进行缓存处理，浏览器提供缓存技术本来是提高

访问性能的，以避免重复地请求相同的Web页面。但在许多需要实时信息显示的

Web应用系统中，则不能让浏览器缓存本页面的内容信息。当然，此时用户也将无

法用脱机形式浏览本页面的内容信息。

●window-target：用于指定显示页面的浏览器窗口。

●refresh：让浏览器按照所设置的时间间隔自动地进行刷新或者请求其它的目标资

源，如示例：标签表示每隔5秒钟（由其

中的content属性定义）让浏览器重新请求当前的页面。

●expires：指定网页在缓存中的过期时间，一旦网页过期，必须要从服务器中重新下

载本页面的信息内容。如示例：标签同样

也能够达到禁止浏览器对本页面内容进行缓存处理的效果。

6）Link链接标签的作用

标签主要定义本页面文档与外部其它资源文件的引用关系，其中最常见的用途是指示本页面所需要的CSS样式单文件，【例1-5】中的标签就是指示本页面所需要的外部样式表单文件styles.css。

3、利用可视化方式为系统添加全局导航条

1）在项目的首页面中添加全局导航菜单条的布局表格

选择Dreamweaver工具软件中的【插入记录】主菜单中的【表格】子菜单，然后将会

弹出图1.16所示的【表格】对话框。在该对话框中设置表格的行数为1、表格的宽度为100%（采用相对比例）、边框粗细为0（表示不需要边框线）。然后点击对话框中的【确定】按钮将在当前页面中创建出指定的表格（在本示例中没有应用