Download
1 / 51
E N D
第2章 Web程序设计集成开发环境 内容简介： 本章主要介绍安装和运行Dreamweaver MX 、Dreamweaver工作区窗口和面板、菜单及“插入栏”概述、使用属性检查器、管理面板和面板组、使用文档工具栏、状态栏、调整“文档”窗口的大小、使用快速启动条、“标准”工具栏、上下文菜单、Dreamweaver MX创建Web站点与设计网页、设置本地站点、使用“站点”面板、页面属性设置、添加超链接、添加图片、添加表格；以及安装Visual InterDev Web服务器的安装、开发工作站的配置、Visual InterDev用户界面概览、建立新项目、建立简单的网页、编辑文本、插入HTML标识符、工具箱的使用、建立一个简单的窗体、在项目中加入图像、脚本大纲（Script Outline Window）的使用等。
第2章 Web程序设计集成开发环境 2.1 Dreamweaver MX基础 2.2 使用Dreamweaver MX创建Web站点与设计网页 2.3 Visual InterDev基础 2.4 Visual InterDev基本操作
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中，选择“开始”>“运行”。单击“浏览”并从Dreamweaver CD上选择Dreamweaver MX Installer.exe文件。在出现“运行”对话框后，单击“确定”开始安装。按照屏幕上的指导执行。
2．Dreamweaver工作区 在Windows中，Dreamweaver MX提供了两种可供选择的工作区布局：一种将全部元素置于一个窗口中的集成布局和一种非常类似于Dreamweaver 4的浮动布局。 Dreamweaver MX工作区是一个使用MDI（多文档界面）的集成工作区，其中Dreamweaver4工作区样式全部“文档”窗口和面板被集成在一个更大的应用程序窗口中，并将面板组停靠在右侧。建议大多数用户使用它。
3．窗口和面板概述 • “欢迎使用”窗口提供有关针对各种目的设置工作区的提示，并为使用过Dreamweaver早期版本的用户提供有关新功能的信息。 • “插入”栏包含用于将各种类型的对象（如图像、表格和层）插入到文档中的按钮。 “文档”工具栏包含按钮和弹出式菜单，它们提供各种“文档”窗口视图（如“设计”视图和“代码”视图）、各种查看选项和一些普通操作（如在浏览器中预览）。 • “文档”窗口显示您当前创建和编辑的文档。 • 属性检查器用于查看和更改所选对象或文本的各种属性。 • 面板组是一组停靠在某个标题下面的相关面板的集合。 • “站点”面板使您可以管理组成站点的文件和文件夹。它还提供了本地磁盘上全部文件的视图，非常类似于Windows资源管理器。 • Dreamweaver还提供了 “历史记录”面板和代码检查器。若要打开Dreamweaver面板、检查器和窗口，请使用“窗口”菜单。
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）设置本地站点——1 Dreamweaver中的站点： • 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 SourceSafe等的集成，能够在同一网络站点项目上协调工作。而和Internet Information Serer以及Personal Web Sever配合可以提供离线和在线管理站点的能力。Visual InterDev的诸多内建特性使其成为创建交互性网络站点的一个强有力的开发工具。
1. Visual InterDev结构特性 （1）开发工作站 在开发工作站上的Visual InterDev为作者在开发期间提供了一系列不同方式对站点进行浏览和对不同组件的操作。 （2）Web服务器 Web服务器储存开发网络站点时的所有文档内容。当文档在开发工作站上创建和修改后Visual InterDev对其更新时，它使用FrontPage Server Extensions来更新位于Web服务器上的最终站点。 （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 Information 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 Server Extensions。 （2）开发工作站的配置 Pentium兼容工作站；Windows NT Workstation 4.0或Windows 98；Visual InterDev Client组件。 按以下步骤，安装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）选择布局 此对话框用于为你的项目选择一个布局，布局定义了网页上的内容和导航条是如何布置的 。
2．建立新项目——5 （5）选择主题 主题定义了一系列的图像和Cascading Style Sheet
2．建立新项目——6 （6）查看项目浏览窗口 项目向导在硬盘上建立了一个目录，关于此项目的所有信息都保存在这里。项目建立后，项目浏览窗口将图形化地显示其结构。
3．建立简单的网页——1 菜单中选择Project|Add Item，出现对话框，其New标签中包含四种图标：HTML、ASP、Style sheet和Site Diagram选择HTML Page项，然后输入此页的文件名，按open按钮建立一个新页。 项目浏览窗口中将多出一项，它就是你刚刚建立的HTML文件。另外在Visual InterDev主窗口的中央将出现网页编辑器如右下图。
3．建立简单的网页——2 （1）编辑文本：使用Design标签时，可以用菜单中的Format子菜单来轻松地完成文本的编辑工作。 （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 项目浏览窗口的文件右键菜单中有一名为Compare to master Web的选项，此选项可以对Master Web和Local Web两个不同版本的文件进行比较，并将结果显示在一 个窗口中。 （2）比较文件
4．操作一个已存在的应用程序——3 （3）在离线模式下工作 • 建立一个工作于联机模式下的项目 • 将它切换到离线模式 • 从菜单中选择Project | Web Project | Working Mode | Offline命令。 • 从项目名的右键菜单中选择Wbrking Mode | Offine选项 • 然后再次切换到联机模式。 注意：（1）在离线模式下有一些命令不可用，它们是：Get last Version、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中。
