第 2 章 Web 程序设计集成开发环境

第 2 章 Web 程序设计集成开发环境

第 2 章 Web 程序设计集成开发环境

内容简介：本章主要介绍安装和运行 Dreamweaver MX 、 Dreamweaver工作区窗口和面板、菜单及“插入栏”概述、使用属性检查器、管理面板和面板组、使用文档工具栏、状态栏、调整“文档”窗口的大小、使用快速启动条、“标准”工具栏、上下文菜单、Dreamweaver MX 创建 Web 站点与设计网页、设置本地站点、使用“站点”面板、页面属性设置、添加超链接、添加图片、添加表格；以及安装 Visual InterDev Web 服务器的安装、开发工作站的配置、 Visual InterDev 用户界面概览、建立新项目、建立简单的网页、编辑文本、插入 HTML 标识符、工具箱的使用、建立一个简单的窗体、在项目中加入图像、脚本大纲（ Script Outline Window ）的使用等。

2.1 Dreamweaver MX 基础 2.2 使用 Dreamweaver MX 创建 Web站点与设计网页2.3 Visual InterDev 基础2.4 Visual InterDev 基本操作

第第 22 章章 Web 程序设计集成开发环境

第第 22 章章 Web 程序设计集成开发环境

2.1 Dreamweaver MX 基础 Macromedia Dreamweaver MX 是一款专业的 HTML 编辑器，用于

对 Web 站点、 Web 页和 Web 应用程序进行设计、编码和开发。利用 Dreamweaver 中的可视化编辑功能，可以快速地创建页面而

无需编写任何代码。可以查看所有站点元素或资源并将它们从易于使用的面板直接拖到文档中。可以在 Macromedia Fireworks 中创建和编辑图像，然后将它们直接导入 Dreamweaver ，或者直接在 Dreamweaver 中添加 Macromedia Flash 对象，从而优化开发工作流程。

Dreamweaver 还包括许多与编码相关的工具和功能，其中包括代码视图中的代码编辑工具（如代码加色和标签完成）；有关 HTML 、 CSS 、 JavaScript 、 CFML 、 ASP 和 JSP 的参考资料以及一个 JavaScript 调试器。并且，还可以借助 Dreamweaver ，使用服务器语言（例如 ASP 、 ASP.NET 、 ColdFusion 标记语言 (CFML) 、 JSP 和PHP ）生成支持动态数据库的 Web 应用程序。

Dreamweaver 现在包含并扩展了 Macromedia UltraDev 中的所有功能，以帮助您使用 ASP 、 ASP.NET 、 ColdFusion 标记语言 (CFML) 、 JSP 和 PHP 等服务器语言来生成由动态数据库支持的 Web 应用程序。

1 ．安装和运行 Dreamweaver MX

• 硬件和软件 :– Microsoft Windows 的系统要求： Intel Pentium II 处理器或等效处理器， 300

MHz 或更快；– Windows 98 、 2000 、 NT （具有 Service Pack 3 或更高版本）、 Windows

ME 或 XP ；– Netscape Navigator 4.0 版或更高版本或 Microsoft Internet Explorer ；– 96 MB 的可用内存 (RAM) （建议采用 128 MB 内存）；– 275 MB 的可用磁盘空间；– 分辨率可达 800x600 像素的 256 色显示器；– CD-ROM驱动器；

• 安装 Dreamweaver ：– 将 Dreamweaver CD 插入计算机的 CD-ROM驱动器。– 在 Windows 中，选择“开始” >“ 运行”。单击“浏览”并从 Drea

mweaver CD 上选择 Dreamweaver MX Installer.exe 文件。在出现“运行”对话框后，单击“确定”开始安装。按照屏幕上的指导执行。

2 ． Dreamweaver 工作区在 Windows 中， Dreamweaver MX提供了两种可供选择

的工作区布局：一种将全部元素置于一个窗口中的集成布局和一种非常类似于 Dreamweaver 4 的浮动布局。Dreamweaver MX 工作区是一个使用 MDI（多文档界面）的集成工作区，其中 Dreamweaver4 工作区样式全部“文档”窗口和面板被集成在一个更大的应用程序窗口中，并将面板组停靠在右侧。建议大多数用户使用它。

3 ．窗口和面板概述• “ 欢迎使用”窗口提供有关针对各种目的设置工作区的提示，并为使

用过 Dreamweaver早期版本的用户提供有关新功能的信息。• “ 插入”栏包含用于将各种类型的对象（如图像、表格和层）插入到

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

• “ 文档”窗口显示您当前创建和编辑的文档。• 属性检查器用于查看和更改所选对象或文本的各种属性。• 面板组是一组停靠在某个标题下面的相关面板的集合。 • “ 站点”面板使您可以管理组成站点的文件和文件夹。它还提供了本

地磁盘上全部文件的视图，非常类似于 Windows 资源管理器。• Dreamweaver 还提供了 “历史记录”面板和代码检查器。若要打开 Dr

eamweaver 面板、检查器和窗口，请使用“窗口”菜单。

4 ．菜单概述• “ 文件”菜单和“编辑”菜单包含用于“文件”

菜单和“编辑”菜单的标准菜单项。• “ 文本”菜单使您可以轻松地设置文本的格式。• “命令”菜单提供对各种命令的访问。• “ 站点”菜单提供一些菜单项，这些菜单项可用

于创建、打开和编辑站点，以及用于管理当前站点中的文件。

• “ 窗口”菜单提供对 Dreamweaver 中的所有面板、检查器和窗口的访问。

• “ 帮助”菜单提供对 Dreamweaver 文档的访问，包括用于使用 Dreamweaver 以及创建对 Dreamweaver 的扩展的帮助系统，并且包括各种语言的参考材料。

5 ．“插入”栏概述“ 插入”栏包含用于创建和插入对象（如表格、层

和图像）的按钮。这些按钮被组织到选项卡中。

•显示或隐藏“插入”栏：选择“窗口” >“ 插入”。•展开或折叠“插入”栏：单击“插入”栏标题条左角处的展开箭头。•若要显示某个特定选项卡中的按钮，请执行以下操作之一：•插入对象：在“插入”栏中选择适当的选项卡。单击一个对象按钮或将该按钮的图标拖到“文档”窗口中。•绕过对象插入对话框并插入空的占位符对象：按住 Ctrl键并单击该对象的按钮。

6 ．使用属性检查器属性检查器可以检查和编辑当前选定页面元素的属性。可以在

“设计”视图或“代码”视图中选择页面元素。若要显示或隐藏属性检查器，请选择“窗口” >“ 属性”。

注意：属性检查器的内容根据选定的元素而变化。属性检查器最初显示选定元素的大多数属性。单击属性检查器右下角的展开箭头，可以折叠属性检查器使之仅显示最常用的属性。

7 ．管理面板和面板组（ 1 ）展开或折叠面板组：单击面板组标题条左侧的展开箭头。（ 2 ）取消停靠一个面板组：通过手柄拖动面板组，直到其轮廓表明它不再

处于停靠状态为止。（ 3 ）重命名面板组：从面板组标题条右侧的“选项”菜单中选择“重命名

面板组” 。（ 4 ）从面板组中取消停靠一个面板：通过其选项卡拖动该面板，直到其轮廓表明它不再处于停靠状态为止。

（ 5 ）在面板组中停靠一个面板：通过其选项卡拖动该面板，直到其轮廓表明它处于停靠状态为止。

（ 6 ）关闭一个面板组使它完全消失：从面板组标题条中的“选项”菜单中选择“关闭面板组”。

（ 7 ）打开屏幕上不可见的面板组：从“窗口”菜单中选择一个面板的名称。（ 8）更改整个面板组集合的大小：拖动调整。（ 9）设置“面板”参数：请选择“编辑” >“ 参数选择”，然后从左侧的

“分类”列表中选择“面板”。备注：当一个面板组处于浮动（取消停靠）状态时，面板组的顶部会显示一个窄的空白条。

8 ．使用文档工具栏若要查看或隐藏文档工具栏，请选择“查

看” >“ 工具栏” >“ 文档”。

9 ．关于状态栏“ 文档”窗口底部的状态栏提供与您正创建的文档有关

的其他信息。标签选择器显示环绕当前选定内容的标签的层次结构。

单击该层次结构中的任何标签以选择该标签及其全部内容。单击 <body>以选择文档的整个正文。若要设置标签选择器中某个标签的 class 或 id 属性，请右击该标签，然后从上下文菜单中选择一个类或 ID 。

10 ．调整“文档”窗口的大小

状态栏显示当前“文档”窗口的当前尺寸（以像素为单位）。若要设置窗口大小以适合几种普通显示器大小中的任何一个，请单击窗口大小并从“窗口大小”弹出式菜单中选择一种大小。

备注：显示的窗口大小反映浏览器窗口的内部尺寸（不包括边框）；显示器大小列在括号中。

11 ．使用快速启动条快速启动条显示在状态栏中，包含用以打开和

关闭各种面板、检查器和窗口的按钮。若要显示快速启动条，请在“面板”参数选择

中启用“在面板和启动器中显示图标”选项。可以指定在快速启动条中显示哪些项目。

12 ．使用“标准”工具栏“ 标准”工具栏中包含“文件”和“编辑”

菜单中的普通操作的按钮：“新建”、“打开”、“保存”、“保存全部”、“剪切”、“拷贝”、“粘贴”、“撤消”和“重做”。若要显示“标准”工具栏，请选择“查看” >

“ 工具栏” >“ 标准”。

13 ．使用上下文菜单使上下文菜单可以很方便

地访问与正在处理的对象或窗口有关的最有用的命令和属性。

用法：右击对象或窗口。选定对象或窗口的上下文菜单随即出现。从该上下文菜单中选择一个命令。

2.2 使用 Dreamweaver MX 创建 Web 站点与设计

网页1 ．在 Dreamweaver 中创建您的第一

个 Web 站点（ 1 ）工作流程规划和准备；创建页；对页进行布局和设置；向页中添加内容；将页链接在一起；发布您的站点；

（ 2 ）设置本地站点—— 1Dreamweaver 中的站点：• Web 站点：一组位于服务器上的页，使用 Web浏

览器访问该站点的访问者可以对其进行浏览。• 远程站点：服务器上组成 Web 站点的文件，这是

从创作者的角度而不是访问者的角度来看的。

• 本地站点：与远程站点上的文件对应的本地磁盘上的文件。

Dreamweaver 站点定义：本地站点的一组定义特性，以及有关本地站点和远程站点对应方式的信息。

（ 2 ）设置本地站点—— 2定义站点：选择“站点” >“ 新建站点”。

（ 2 ）设置本地站点—— 3存储站点文件后，系统在 IIS 中

或 PWS 中建立相应的虚根目录，完成后，单击测试 URL按钮会出现如右图所示的对话框。单击确定返回。

单击“下一步”进入下一个步骤。

（ 2 ）设置本地站点—— 4“ 站点”面板现在显示当前站点的新本地根文件夹，同时显示一个图标允许以分层树视图查看所有本地磁盘。该图标标为“桌面”。

“ 站点”面板通常显示站点中的所有文件和文件夹，但是目前站点中不包含任何文件或文件夹。当站点中存在文件时，“站点”面板中的文件列表将充当文件管理器，允许拷贝、粘贴、删除、移动和打开文件。

（ 3 ）关于“站点”面板

“ 站点”面板允许您定义一个站点、管理站点的本地文件、向远程站点上传文件或者从远程站点下载文件以及浏览本地磁盘上站点外部的文件。

（ 4 ）使用“站点”面板若要打开或关闭“站点”面板，请选择

“窗口” >“ 站点”。

2 ．创建一个简单页（ 1 ）网页的组成页面标题、网页名称和标志、页眉、导航栏、主内容

区、页脚。（ 2 ）网页的布局和风格简介 Dreamweaver提供了两种方式：标准视图和布局视

图。在“布局视图”中，对使用表格做了简化，用“绘画”的形式进行表格排版操作，需要什么样的版面，用鼠标画一个就行了。注意：在布局视图中，不能使用在“标准”视图中可

以使用的“插入表格”和“绘制层”工具。若要使用这些工具，必须先切换到“标准”视图。切换按钮在插入面板的布局视图中。

（ 3 ）新建一个简单页——1

当启动 Dreamweaver时，将自动创建一个空的 HTML 文档。也可以选择“文件” >“ 新建”。即会出现“新建文档”对话框。

（ 3 ）新建一个简单页—— 2

在新建的空白文档上单击鼠标右建，选择页面属性，出现如下属性对话框，可设置页面属性。

（ 3 ）新建一个简单页—— 3

• 添加超链接：单击常用插入栏中的超链接按钮出现如下对话框。

•添加图片：单击常用插入栏中的图片按钮出现如下对话框。

（ 3 ）新建一个简单页—— 4 选择图片，单击确认后，出现下面的对话框。

通过属性窗口可以修改图片的设置：

（ 3 ）新建一个简单页—— 5添加表格：单击常用插入

栏中的表格按钮出现如下对话框。

在行数、列数文本框中输入相应的值，单击确定将产生相应的表格。

合并和拆分单元格：在属性检查器中，单击“合并”按钮或“拆分单元格”按钮

（ 3 ）新建一个简单页——6

在表格中添加表单：先单击表格的第二行第二列，选择表单插入栏，单击文本框按钮

单击“无标签标记”和“在表单项后”单选框，单击确定即完成如右图所示。

3 ．使用 Dreamweaver MX创建动态页

现在的 Dreamweaver MX 在后台方面不但可以用 Asp 、 Jsp 、 Coldfusion 还可以用 Asp.net 和 Php 以及 Coldfusion MX ，支持最新的 Coldfusion MX tag ，调试 Coldfusion MX 代码，完全支持 Asp.net 的Datasets ， DataGrid ， Datalist. 。

2.3 Visual InterDev 基础微软 Visual InterDev 是用于创建和管理 WWW 站点

的集成工具软件，它是 Microsoft Visual Studio集成工具的组件之一。 Visual InterDev 完全支持客户端（ ActiveX ）和服务器端（ Active Server ）脚本语言、数据库管理和其它技术，以上的所有技术均可通过 ASP实现。通过和微软其它产品包括 FrontPage 和 Visual Source

Safe 等的集成，能够在同一网络站点项目上协调工作。而和 Internet Information Serer 以及 Personal Web Sever 配合可以提供离线和在线管理站点的能力。 Visual InterDev 的诸多内建特性使其成为创建交互性网络站点的一个强有力的开发工具。

1. Visual InterDev 结构特性

（ 1 ）开发工作站在开发工作站上的 Visual InterDev为作者在开发期间提供了一系列不同方式对站点进

行浏览和对不同组件的操作。（ 2 ） Web 服务器Web 服务器储存开发网络站点时的所有文档内容。当文档在开发工作站上创建和修改

后 Visual InterDev 对其更新时，它使用 FrontPage Server Extensions 来更新位于 We

b 服务器上的最终站点。（ 3 ） Web 浏览器在开发过程中开发者可以通过Web浏览器来观察创建和修改后的网页内容。而已完

成的站点的用户也可以使用 Web浏览器来浏览网页。（ 4 ）数据库服务器在站点开发项目和储存在数据库服务器上的数据库之间可以进行数据连接。 Visual InterDev 使得用户可以在其工作站上显式地创建和编辑数据库元素。同时也能用其在服务器端定义和修改数据表，并且能设计和测试查询。

2 ．安装 Visual InterDev 使用 Visual InterDev 开发站点， Web 服务器同时必须运

行 FrontPage Server Extensions 。（ 1 ） Web 服务器的配置 Pentium兼容服务器（ 32兆内存以上）； Windows NT Server 4.0 ； Internet Informatio

n Server 4.0 ； Visual InterDev Server 组件； SQL Server 7.0 （ SQL Server 任选）；按以下步骤，安装 Microsoft Visual InterDev Server 组件：运行 Visual InterDev Master Setup 程序， setup.exe 。在 Master Setup里打开其安装指导。

参照完成剩下的安装工作过程。安装 Personal Web Server for Windows 98 。安装 Active Service Pages 。安装 FrontPage S

erver Extensions 。（ 2 ）开发工作站的配置Pentium兼容工作站； Windows NT Workstation 4.0 或 Windows 98 ； Visual InterDev Clien

t 组件。按以下步骤，安装 Microsoft Visual InterDev Client 组件：运行 Visual InterDev Master Setup 程序， setup.exe 。在 Master Setup里打开其安装指导，参照完成剩下的安装工作过程。

2.4 Visual InterDev 基本操作1 ．用户界面概览

2 ．建立新项目—— 1（ 1 ）项目命名从菜单中选择 File|New Project ，选择 New 标签，选择左半部分 Visual

InterDev Projects 项，右半部分会出现标有 New Web Project 的图标，选中它。

2 ．建立新项目—— 2（ 2 ）指定服务器和工作模式在如图对话框中指定服务器和工作模式，服务器可以用 IP 地址或是名字来标识，下面有一选项可以让你用安全套接字层（ SSL ）来与服务器连接。

2 ．建立新项目—— 3（ 3 ）指定 Web 应用程序在本对话框中为项目指定Web应用程序，或者是建立一个新的Web 应用程序或是连接到一个已存在的 Web 应用程序上

2 ．建立新项目—— 4

（ 4 ）选择布局

此对话框用于为你的项目选择一个布局，布局定义了网页上的内容和导航条是如何布置的。


（ 5 ）选择主题

主题定义了一系列的图像和 Cascading Style Sheet


（ 6 ）查看项目浏览窗口项目向导在硬盘上建立了一个目录，关于此项目的所有信息都保存在这里。项目建立后，项目浏览窗口将图形化地显示其结构。

3 ．建立简单的网页—— 1 菜单中选择 Project|Add Item ，出现对话框，其 New 标签

中包含四种图标： HTML 、 ASP 、 Style sheet 和 Site Diagram选择 HTML Page 项，然后输入此页的文件名，按open按钮建立一个新页。

项目浏览窗口中将多出一项，它就是你刚刚建立的 HTML 文件。另外在 Visual InterDev 主窗口的中央将出现网页编辑器如右下图。

3 ．建立简单的网页—— 2（ 1 ）编辑文本：使用 Design 标签时，可以用菜单中的 Fo

rmat子菜单来轻松地完成文本的编辑工作。（ 2 ）插入 HTML 标识符：使用 Design 标签时，可以用

菜单中的 HTML子菜单来轻松地加入各种 HTML 标识符。（ 3 ）建立一个超链接：用鼠标选中你想作为超链接的

文本，选择 HTML | Link命令，如左下图。（ 4 ）建立一个书签：用鼠标选择你想作为书签的文本，选择 HTML| Bookmark命令，如右下图。

3 ．建立简单的网页—— 3（ 5 ）建立一幅图像：将 Design 标签中的光标移到要插入图像的地方，选择 HTML | Image 。

（ 6 ）加入一段滚动文字：将 Design 标签中的光标移到要加入滚动文本的地方，选择 HTML | Marquee 。

（ 7 ）工具箱窗口：注意工具箱只有在使用 Design 标签时才是可用的。

3 ．建立简单的网页—— 4（ 8 ）建立一个简单的窗体：将 Design 标签中的光标移到合适

的位置，选择 HGML | Form ，在 Design 标签中输入文本，从工具箱中拖动 HTML 元素到 Design 中。

（ 9 ）建立一个简单的表格：将 Design 标签中的光标移动到合适位置，选择 Table|Insert Table ，

（ 10 ）修改表格的结构：使用 Table子菜单中的其他功能。

3 ．建立简单的网页—— 5（ 11 ）在项目中加入图像：从 Windows 资源管理器中选择文件，将其拖到

images 目录下。如果项目工作于联机模式下，这些文件的拷贝也会放置到Master Web 中。在 Design 标签下，从项目浏览窗口中选定适当的图像，用鼠标把它拖到 Design 中合适的位置即可。

（ 12 ）在表格中使用图像：用鼠标将图像从项目浏览窗口中拖到合适的单元格中即可。

（ 13 ）脚本大纲（ Script Outline Window ）：从网页编辑器中选择 Source 标签，从菜单中选择 View | Other Windows

| Script Outline Window 项来显示脚本大纲窗口。

4 ．操作一个已存在的应用程序—— 1（ 1 ）在本地模式下工作• 建立一个工作于本地模式下的项目• 在此项目中加入一个新文件• 将此项目转变到联机模式（两种方法）：

– 从菜单中选择 Project | Web Project | Working Mode | Master 。– 在项目浏览窗口中项目名上点击鼠标右键，在弹出的菜单中选择Working

Mode | Master 。此时会弹出对话框通知你对文件的任何修改都将保存到 Master Web 中去。

点击 Yes 进行确认并转换到联机模式，然后将这个新文件添加到 Master Web 中去，在项目浏览窗口的文件名处点击鼠标右键，从弹出式菜单中选择 Add to Master Web选项。

注意：在本地模式下，仍然与 Master Web 有一个连接，这样你可以发出命令来操作它的文件（如添加、删除、改名等）。

4 ．操作一个已存在的应用程序—— 2（ 2 ）比较文件项目浏览窗口的文件右键菜单中有一名为 Compare to master Web 的选项，此选项可以对 Master Web 和 Local Web两个不同版本的文件进行比较，并将结果显示在一个窗口中。

4 ．操作一个已存在的应用程序——3

（ 3 ）在离线模式下工作• 建立一个工作于联机模式下的项目• 将它切换到离线模式

– 从菜单中选择 Project | Web Project | Working Mode | Offline命令。

– 从项目名的右键菜单中选择Wbrking Mode | Offine选项• 然后再次切换到联机模式。注意：（ 1）在离线模式下有一些命令不可用，它们是： Get last Versi

on 、 get Working Copy、 Release Working Copy、 Discard changes 、 Add to Master Web ， Refresh Project View 及 Synchronize Files 。这是因为工作站没有与 Master Web连接；（ 2）你仍然可以使用 Remove local Copy和 Publish命令；（ 3）如果你在离线模式下建立了一个新文件，当你切换到联机模式后，你必须使用 Add to Master

Web 或者 Copy Web命令将它添加以 Master Web 中。

4 ．操作一个已存在的应用程序——4

（ 4 ）拷贝项目在项目浏览窗口中选择项目名，从菜单中选择 Project |

Web Project命令，弹出如图对话框。指定Master 或Local Web 作为拷贝源，其他任何一个服务器均可作为目的地址。

第 2 章 Web 程序设计集成开发环境

Documents

Transcript of 第 2 章 Web 程序设计集成开发环境