Dreamweaver UltraDev 4.0快速上手（上）

韩星 
2001年 60期

    Dreamweaver UltraDev是Macromedia公司推出的一款能够让网站开发设计人员在多种服务器平台上可视化地创建和编辑数据驱动Web应用的软件产品。它是构建Web应用程序的专业开发环境，也是创建和管理Web网页和网站的专业编辑器，可以用来开发基于ASP、JSP、ColdFusion技术的Web应用程序。它能让Web应用程序开发者使用它自带的编辑器，并利用服务器行为编辑开发代码以适应自己的标准。
　　    其最新版本UltraDev 4.0（以下简称UltraDev）包含了Dreamweaver 4.0在网页设计和网站管理方面的全部功能，并在此基础上扩展了Web应用开发和服务器端数据库访问的功能，从而构建了一个方便易用的可视化开发环境，在这个开发环境下很容易创建和管理跨服务器平台、跨浏览器的动态网页。
　　#1    一、UltraDev 4.0的功能和特色
　　    1．UltraDev的功能
　　    （1）多服务器设计环境：UltraDev支持ASP、JSP和ColdFusion等目前流行的动态网页语言。利用它，在单一的开发环境中，就可以建立基于ASP、JSP和ColdFusion等不同服务器技术的站点。
　　    （2）实用数据预览：利用UltraDev的实时数据流预览功能使用户在网页的编辑状态下就可以查看编辑数据的Web应用情况，这样就减少了用户在网页编辑器和浏览器之间来回转换以查看和测试网页的时间，提高了工作效率。
　　    （3）数据绑定面板：这是UltraDev专门为网络编程添加的。通过它，你可以轻松地把数据库中的字段值加入到动态网页中，无须任何编程知识，就可以给任何对象添加服务器语句。
　　    （4）服务器行为：UltraDev将服务器端脚语言的一些代码模块化后，以行为的方式加入到服务器行为库中，用户只要从服务器行为面板中选取所要添加的行为，再将参数输入， UltraDev就会把自动生成的服务器脚本语言代码添加到网页中。利用服务器行为库可以帮助用户轻松创建用户显示、浏览和更新数据库内容的网页。
　　    同时，可以通过网页操作服务器直接连接一个数据库，而不用在你的开发机器和服务器上定义一个连接。
　　    （5）广泛的数据库支持：UltraDev利用ODBC、JDBC、ADO或本地驱动程序，可以配置标准数据库与Oracle、SQL  Server、Informix和Sybase等标准工业服务器的链接。
　　    2．UltraDev的特色
　　    （1）数据库和网页关联：UltraDev能够使网页和服务器上的数据建立链接，并且可以方便对数据库进行操作。在UltraDev开发环境下，你无须懂得任何编程语言，就可以轻松地在网页中实现添加、修改、查询、定位记录等操作。UltraDev支持的服务器技术包括ASP 2.0、JSP 1.0和ColdFusion 4.0，你可以在单一的设计环境中开发出支持多种服务器技术的网页。
　　    （2）灵活的控制功能：在UltraDev中，用户可控制的内容非常多，你可以建立自己的对象和命令、修改菜单和快捷键、控制对象面板和对话框界面、改变缺省文件类型，甚至可以添加脚本来扩展UltraDev，实现一些新的动作。
　　#1    二、安装与启动UltraDev 4.0
　　    1. UltraDev的安装
　　    如果你是一个网页平面设计人员，仅是使用UltraDev中的Dreamweaver来设计一些静态网页，那么UltraDev的安装过程与Dreamweaver一样，并不需要安装什么特殊的软件。如果用户是要用UltraDev来制作动态网页或开发Web应用程序，那就需要在计算机上安装一系列的软件，主要有：Web服务器软件、应用服务器软件、数据库管理系统以及相应的数据驱动程序，只有安装了这些程序，才能够满足开发和运行Web应用程序的需要。
　　    UltraDev可以开发ASP、JSP和ColdFusion三种类型的Web应用程序，ASP的使用最广泛，下面我们就以ASP为例来讲述UltraDev的使用。
　　    开发ASP应用程序的系统需求是：
　　    （1）服务器软件：
　　    Windows 9x/Me用户：可以安装PWS（Personal Web Server），可在安装光盘的＼add-ons＼pws 目录下找到，安装过程很简单。
　　    Windows NT 4.0 Workstation 用户：可以安装PWS，其存放位置在NT Option Pack 安装光盘的＼ntoptpak＼x86＼winnt.wks目录。
　　    Windows NT 4.0 Server用户：可以安装IIS（Internet Information Server 4.0），其存放位置在NT Option Pack安装光盘的＼ntoptpak＼x86＼winnt.srv目录。
　　    Windows 2000用户：包括各种版本，可以使用系统内置的IIS 5.0作为服务器软件，它随Windows 2000安装而自动安装。
　　    （2）数据库软件：
　　    Web应用程序可以实现对数据库的访问，这样才能使用网页具有交互性，产生动态效果。因此，作为数据库管理软件必须安装一个数据库管理系统来设计、创建和维护数据库。对于一般用户来说，由于站点的访问量不大，可以选择使用Microsoft Access作为数据库管理软件，它简单易用，功能强大，非常适合初级用户。当然，如果你想建立一个电子商务站点，可以选择Microsoft SQL Server或Oracle作为数据库管理软件。
　　    （3）数据库驱动程序：
　　    数据通常是以一种特定的格式存储在数据库中。ASP应用程序要想读取和处理存储在数据库中的数据，它必须要有一个翻译，用来读懂数据库中的数据格式。数据库驱动程序的作用就相当于ASP应用程序与数据库之间的翻译。对于开发ASP应用程序来说，就需要安装ODBC数据库驱动程序。对于不同的数据类型所需要的数据库驱动程序也是不同的，如果你使用的是Microsoft Access数据库，就需要安装它的ODBC驱动程序。大多数在Windows平台上使用的数据库驱动程序都会随着Office和Windows 2000的安装而自动安装。当然，你也可以到微软的网站下载MDAC（Microsoft Data  Access Components）软件包来安装这些数据库驱动程序。
　　    要想查看Windows系统中安装了哪些数据库驱动程序，可以单击“开始→设置→控制面板”选项，然后双击“ODBC数据源”图标，打开“ODBC数据源管理器”，单击“驱动程序”选项卡，就可以看到当前系统中安装的ODBC驱动程序。
　　    一切准备好后，下面我们就开始正式安装UltraDev了。安装过程非常简单，你只需按照提示，一步步地进行操作，就可以顺利的完成安装，在安装过程中需要你输入用户名和产品序列号，另外你还可以改变文件中的安装路径。如果你不想进行更改的话，一路回车就行了，安装过程结束，系统会在浏览器中打开UltraDev的欢迎画面。
　　    2．启动UltraDev
　　    单击“开始→程序→Macromedia Dreamweaver Ultradev4→Dreamweaver UltraDev4”启动UltraDev。另外，如果你在安装时将ASP、JSP、HTML、HTM、CFM、JS、CSS 等文件类型的默认编辑器设定为UltraDev，那么你可以在资源管理器中找到任何一个上述文件类型的文件，然后右键单击该文件，在弹出的快捷菜单中选择“Edit with dreamweaver ultradev”命令，也可以启动UltraDev，用这种方法启动时，会同时打开该文件。
　　#1    三、认识工作环境
　　    UltraDev与Dreamweaver的界面非常类似，它也由菜单栏、工具栏、工作区、对象面板、属性面板、启动面板、浮动面板、状态栏组成。下面我们来了解各部分的组成和功能。
　　    1．菜单栏
　　    UltraDev的主菜单包括十部分，即File （文件）、Edit（编辑）、Insert（插入）、Modify（修改）、Text（文本）、Commands（命令）、Site（站点）、Window（窗口）和Help（帮助），所有的操作都可以通过菜单命令来完成。
　　    2．工具栏
　　    这是UltraDev中新增加的一个功能。利用它，用户可以快速地执行一些相应的操作。工具栏中包含有：代码视图（Codeview）、代码/设计混合视图（Code and design views）、设计视图（Design view）、活动数据视图（Live data view ）、网页标题（Title）、文件管理（File management）、预览/调试网页（Preview/debug in browser）、刷新设计视图（Refresh design view）、显示参考面板（Reference）、代码导航（Code navigation）、视图选项（View options）。
　　    3．工作区
　　    是用来编辑文档的区域，它占据了屏幕的很大一部分空间，我们的所有编辑操作都是在该区域内完成的，我们可以通过切换视图模式来改变网页查看的方式。
　　    4．状态栏
　　    位于编辑窗口的底部，它不但显示一些提示信息，而且还有许多实用的功能。状态栏由左至右分成四部分，最左边的是标签选择器，它显示了当前网页用到的HTML标签情况，单击不同的标签就可以选中网页中的相关内容。第二部分是窗口大小调整菜单，单击右下角的黑色按钮，在弹出的菜单中可以选择文档窗口的大小。第三部分显示当前文档的大小和下载时间。第四部分缩小的启动栏，功能与启动面板一样，单击不同的按钮就可以快速启动相关的程序。
　　    5．对象面板
　　    对象面板的作用是在当前文档中创建和插入各种对象，也可以在文档的标准视图和布局视图之间进行切换。对象面板的上部显示的是插入对象的图标按钮，下部是标准视图和布局视图按钮，利用这两个按钮可以在两种视图模式间进行转换。如果选择布局视图，则“Layout”区域中的“draw  layout cell”和“draw layout table”两个绘图工具按钮就会变成可用的。
　　    对象面板共分成八类，可以通过单击面板右上角的下拉菜单选择不同的插入对象类型。默认情况下，对象面板中显示的是常用的对象（Common）， 各种对象种类下面又包括许多具体的对象：
　　    Common（常用对象）：包括图像（Image）、表格（Table）、翻转图像（Rollover image）、表格数据（Tabular data）、层（Draw layer）、水平线（Horizontal rule）、日期（Date）、导航条（Navigation bar）、电子邮件（Email link）、Flash文字（Flash text）、Flash 按钮（Flash bution）、Flash动画、Fireworks HTML代码、Shockwave、Generator、服务器端包含（Server-side include）。
　　    Characters（字符对象）：包括一些特殊字符，有换行符（Line break）、空格（Non-breaking space）、版权符号（Copyright）、注册商标（Registered）、商标（Trademark）、英镑（Pound）、欧元（Earo）、左引号、右引号、破折号。 
　　    Forms（表单对象）：包括表单（Form）、文本框（Text field）、按钮（Button）、复选框（Checkbox）、单选框（Radio button）、列表/菜单（List/Menu）、文件域（File field）。
　　    Frames（框架对象）：列出了八种框架模板供选择。
　　    Head（头部元素）：包括给文档Head标签下添加的元素对象，有Meta、Keywords、Description、Refresh、Base、Link。
　　    Invisible（隐藏对象）：包含在文档窗口中不显示的对象，有锚点（Named anchor）、脚本（Script）、注释（Comment）。
　　    Live（活动数据对象）：包括的是一些把动态页面元素插入到文档中的对象，有插入主页面（Master-detail page set）、插入记录集导航状态（Recordset navigation statas）、插入记录更新表单（Record update form）、插入记录集导航栏（Recordset navigntion bar）、插入记录集插入表单（Record insertion form）。
　　    Special（特殊对象）：包含一些特殊结构的对象，有Java Applet、Activex控件、Plugin插件。
　　    6．属性面板
　　    属性面板一般位于文档窗口的下方，用来显示和修改所选定网页元素的属性。它随着所选网页元素的不同，属性面板上所包含的内容也发生变化。默认情况下属性面板上显示的是所选页面元素的常用属性，单击属性面板右下角的三角箭头，可以展开属性面板，显示更多的属性设置，这为修改页面元素的属性提供了极大的方便。
　　    7．启动面板
　　    启动面板位于文档窗口的上方，它上面包含了４个按钮， 分别是Site（站点管理器）、Data bindings（数据绑定器）、Server behaviors（服务器行为编辑器）、Code inspector（源代码编辑器），单击按钮就可以显示／隐藏相应的浮动面板，这就加快了一些常用面板的打开速度。单击启动面板右下角的按钮可以改变启动面板的显示模式：水平显示或垂直显示。
　　    8．数据绑定面板
　　    这是UltraDev专门用于Web应用开发的浮动面板。单击“Window→Data bindings”菜单命令，就可以打开数据绑定面板。该面板主要用于定义各种类型的数据源。在数据绑定面板上单击“+”号按钮，从弹出的菜单中选择合适的命令，就可以为应用程序定义所需要的数据源。只有定义了合适的数据源，才能够在应用程序中访问和操作数据库，创建动态网页。
　　    9．服务器行为面板
　　    这也是开发Web应用所需的浮动面板，它与数据绑定面板组合在一起，该面板主要用来给网页添加各种服务器行为。单击“Window→Server behaviors”菜单命令，就可以打开服务器行为面板，其中预定义了许多的服务器行为。如果想在网页中添加服务器行为，单击其中的“+”号按钮，在弹出的菜单中选择适当的命令，UltraDev就会自动在网页中生成相应的服务器端代码。
　　    除了使用系统内置的服务器行为之外，你还可以修改或者自动编写服务器行为，以及连接到UltraDev交流中心下载更多的服务器行为。
　　    10．其他浮动面板
　　    除了上面介绍的浮动面板之外，针对不同的控制对象，UltraDev还有其他一些浮动面板，如样式面板、行为面板、历史面板、库面板、图层面板、框架面板、模板面板、时间线面板等，你可以打开“Window”菜单进行选择。这些面板分别针对不同的对象起作用，用法与在Dreamweaver中完全一样，这里我们就不详细介绍了。
　　#1    四、工作视图
　　    1．使用设计视图
　　    在设计视图中看到的网页内容与在浏览器中所看到的是一样的，这种可视化编辑方式，能直观地显示出网页编辑效果。
　　    单击“View→Design”菜单命令或工具栏中的“Show design view”按钮，就可以切换到设计视图模式下。然后你就可以直接向网页中插入对象，编辑网页了。
　　    根据表格的显示方式不同，设计视图又分为标准视图和布局视图两种模式。
　　    （1）标准视图：即是常见的可视化编辑方式，这也是系统默认的工作模式。它与其他所见即所得的网页编辑软件的使用方法是一样的，可以直接在网页中插入各种对象并进行编辑。它能够使用的范围和功能要比布局视图广泛，许多在布局视图模式下不能使用的特性在标准视图下都可以正常应用。在对象面板中单击“Standard view”图标就可以切换到该视图模式下。
　　    （2）布局视图：可以用来排版网页，设计复杂的网页布局。单击对象面板中的“Layout view”图标，就可以切换到该模式下。在布局视图中可以使用对象面板上的“Draw layout cell”和“Draw layout table”按钮绘制布局单元格和布局表格，来帮助用户设计复杂的排版效果。
　　    2．使用代码视图
　　    代码视图是用来编写HTML和脚本源代码的，单击“View→Code ”命令或工具栏上的“Show code view”按钮就可以切换到该视图模式下。在代码视图中你可以直接对文档的源代码进行编辑，这对于一些熟悉HTML语言的用户是非常方便的。
　　    3．使用代码/设计混合视图
　　    单击“View→Code and design”菜单命令或工具栏上的“Show code and design views”按钮，就可以切换到该视图下。它把窗口分成上下两部分，上面是代码视图，下面是设计视图，可让你直接看到网页的外观和源代码，而且两个窗口中内容保持同步更新。
　　    4．使用活动数据视图
　　    我们在设计视图中编辑动态网页时，文档窗口中只使用占位符来显示动态的内容，它并没有显示实际的数据内容。你可以单击“View→Live data”菜单命令或工具栏上的“Show live data view”按钮，切换到活动数据视图模式下。这时我们就可以看到动态网页中的数据内容了。它省去了你在编辑器和浏览器之间来回切换以测试网页的麻烦，你可以直接在活动数据视图模式下查看动态网页的显示效果，然后根据需要进行修改。
　　    5．使用快速标签编辑器
　　    如果想对文档中的某个HTML标签进行编辑，就没有必要使用代码视图，使用快速标签编辑器将是非常方便的。要打开快速标签编辑器，首先要在设计视图或活动数据视图模式下选择一个对象，然后右键单击，在弹出的快捷菜单中选择“Edit tag< 标记名称> ”命令，或者在属性面板中单击“Quit tag editor”按钮，就会在界面上出现一个对话框，它显示出了所选对象的属性，你就可以随意对它进行修改了。修改完毕，在窗口任意位置单击鼠标，对活框就消失了。
　　    6．使用预览窗口
　　    要想测试网页的正确性，在浏览器中进行浏览是必不可少的。在UltraDev中，要想浏览所编辑的文档，单击“File→Preview in browser”菜单命令，选择你安装的浏览器，或者单击工具栏中的“Preview→Debug in browser”按钮，都可以在浏览器中打开网页。在浏览器中既可以浏览静态网页，也可以浏览动态网页。
　　#1    五、开发环境设置
　　    在用UltraDev开发Web应用程序之前， 必须要做好一些准备工作，以便构建起Web应用程序的开发环境。在完成了对UltraDev开发环境的设置以后，就可以着手开始设计动态网页了。
　　    1．建立本地站点
　　    在使用UltraDev开发Web应用程序之前，首先要定义一个本地站点。所谓本地站点就是用户在本地硬盘上建立的一个文件夹，用来保存和管理用户所建站点中的各种文件和资源。如果不建立本地站点，就无法享受到UltraDev的全部功能。
　　    要建立本地站点，首先在本地硬盘中建立一个文件夹，例如C:＼devsamp，然后进行下面操作：
　　    单击“Site→New site”菜单命令，打开定义站点对话框，在左边的“Category”目录列表中选择“Local info”选项，然后在右边的“Site name”框中输入站点的名称。这里你可以随意命名站点的名字，如“视点工作室”。在“Local root”框中输入本地站点所在的文件夹，如C:＼devsamp（也可以单击浏览按钮进行选择）。
　　    选中“Refresh local file list automatically ”选项，可以自动刷新本地文件列表。选中“Enable cache”选项，可以建立本地缓存来提高链接的更新速度。在“http address” 框中输入站点使用网址，以便UltraDev检查这个链接是属于内部或外部链接，此项一般此项为空不用填写。后单击“OK”按钮即可建立好本地站点。
　　    2．建立远程站点
　　    远程站点是服务器上的文件夹，用来保存由本地站点上传的各种站点文件和资源。建立了远程站点以后，我们就可以使HTTP协议来访问该站点中的网页文件。方法是：在浏览器的地址栏中输入以“http://”开头的URL地址即可，这样我们就可以在本地计算机上模拟访问远程计算机上的网站。同时，定义了远程端点以后，我们就可以使用实时数据预览窗口（Livedata）来浏览动态网页中的内容了。
　　    定义一个远程端点，首先要在Web 服务器上建立一个发布目录，然后将所有的本地站点文件上传到该目录下。发布目录必须建立在Web 服务器（如Windows 9x/Me/NT Workstation中的PWS、Windows 2000/NT Server中的IIS ）的主目录“Inetpub＼www root”下。例如在C:＼inetpub＼wwwroot目录下新建一个devsamp目录。
　　    定义远程站点的具体操作步骤如下：
　　    单击“Site→Define sites”菜单命令， 打开“Define sites”对话框，在站点列表中选择刚建立的本地站点，然后单击“Editr”按钮，打开定义站点窗口，在“Category”列表中选择“Remote info”选项，在右面的选项中定义远程端点的属性。单击“Access”下拉列表，列出了以下几种服务器的访问方式：
　　    None：不定义远程站点。
　　    FTP：使用FTP服务上传文件的站点。
　　    Local/Network：使用本地计算机或局域网上传文件的站点。
　　    Source safe database：使用Source safe控制文件的版本。
　　    WebDAV：使用WebDAV协议管理文件。
　　    选择不同的访问方式时，设置内容会有所变化。一般情况下，远程站点是通过“FTP”和“Local/Network”来上传文件的，在这里我们选择“Local/Network”方式， 它可以在本地计算机上完成文件的上传下载，实现UltraDev的全部功能。下面我们就来介绍它的设置方法。
　　    选中“Local/Network”选项，在“Remote folder”框中输入远程文件夹的路径，如C:＼inetpub＼wwwroot＼devsamp，或单击浏览按钮进行选择。其他设置还有：
　　    Refresh remote file list automatic ：自动刷新远程文件列表。
　　    Enable file check in and check out：允许文件检验和登记，适用于多人合作开发一个站点的情况，当一个设计者在修改文件时，其他人员将不能修改该文件，直到该作者完成了修改。
　　    Check out files when opening：允许打开文件时自动检验。
　　    Check out name：检验文件的人员名字。
　　    Email address：检验电子邮件地址。
　　    设置完毕，单击“OK”按钮，再单击“Done”按钮，远程端点就定义好了。
　　    3．指定服务器技术
　　    前面我们进过，UltraDev支持ASP、JSP、ColdFusion三种服务器技术，针对我们建立的每一个站点，必须要指定它所使用的服务器技术，以便UltraDev能够将正确的服务器端脚本插入到网页中。一旦选择了一种服务器技术，它将对整个站点中的文件起作用，这样就可以保证应用程序中所有网页的一致性。对一个站点指定服务器技术的操作是：
　　    单击“Site→Define sites”菜单命令，出现“Define sites”对话框，在站点列表中选中我们刚才建立的本地站点，然后单击“Editr”按钮，打开站点定义对话框。在左边的“Category”列表中选择“Application server”选项，在右边的窗口中就可以设置参数了。
　　    Server model：服务器类型，有ASP 2.0、JSP 1.0和ColdFusion 4.0三种选择， 根据需要选择一种服务器技术即可，这里我们选择ASP 2.0。
　　    Scripting：脚本语言，有Vbscript 和Javascript两种。
　　    Page extension：网页文件扩展名，选择ASP 2.0时，有ASP、HTM、HTML三种扩展名，对于动态网页来说，必须将扩展名选定为ASP。 
　　    Access和Remote folder与在远程站点中的设置完全相同，如果你没有定义远程站点，可以在这里设置这两项内容。
　　    URL prefix：URL前缀，在使用UltraDev时必须指定一个URL前缀，以便UltraDev能够在设计时使用Web服务器，用来生成在活动数据窗口中显示的动态内容以及在浏览器中预览的内容。一个URL前缀由一个域名和主目录的任何一个子目录组成，这里，由于UltraDev与Web服务器运行于同一个系统中， 所以可以用Local host来引用URL中的主目录。我们在主目录下建立了一个devsamp目录，所以在“URL prefix”框中可以输入“http://localhost/devsamp”。
　　    上述设置完毕，单击“OK”按钮即可。
　　    4．创建数据库链接
　　    前面已谈到，为了让Web应用程序能够正确识别数据库中的数据格式，就需要在应用程序和数据库之间有一个接口，实现应用程序与数据库的相互沟通，这个“桥梁”就是数据链接。有了数据库链接，应用程序就知道到哪里找数据库，以及如何连接到数据库。要实现应用程序与数据库之间的通信，通常有ODBC、JDBC、OLEDB、ADO等几种接口技术。
　　    5．定义DSN
　　    用户在Windows平台上开发ASP应用程序时，可以使用DSN（Data Source Name，数据源）来创建Web应用程序与数据库之间的ODBC连接。DSN是一个ODBC数据源的名称，它包含使用ODBC驱动程序连接数据库所需要的各种参数。DSN一旦被设定完成，用户就可以使用这个DSN来建立数据库连接。
　　    DSN分为用户DSN、系统DSN和文件DSN三种类型， 建立数据库连接时主要用到系统DSN和文件DSN， 系统DSN可以被UltraDev自动识别出来，直接用于建立数据库连接。文件DSN不能被UltraDev识别，但可以通过在连接字符串中使用“File DSN”参数来指向一个文件DSN。
　　    下面是定义系统DSN的具体操作：
　　    （1）在Windows中，单击“开始→设置→控制面板”选项，然后双击“ODBC数据源”图标，打开“ODBC数据源管理器”对话框。
　　    （2）选择“系统DSN”选项卡以建立系统DSN。
　　    （3）单击“添加”按钮，打开创建新数据源对话框，在其中选择一个新建数据源所使用的ODBC驱动程序。由于我们使用的是Access数据库，应选择Microsoft Access Driver（*.mdb）选项。
　　    （4）单击“完成”按钮，出现“ODBC  Microsoft Access安装”对话框，在“数据源名”框中输入数据源的名称，在“说明”框中输入注释文字，然后单击“选择”按钮，选择一个建立好的Access数据库文件（mdb）。
　　    （5）单击“确定”按钮，就可以在系统DSN列表中看到新建的数据源名称。
　　    6．建立数据库连接
　　    首先在UltraDev中打开一个站点，然后在编辑窗口中打开一个文件，单击“Modify→Connections”菜单命令，打开创建连接对话框，单击“New”按钮，在弹出的下拉菜单中选择“Data source name（DSN）”命令，打开“Data source name（DSN）”对话框，在“Connection  name”框中输入连接的名字，在“Data source name（DSN）”下拉列表中选择刚建立数据源，也可以单击“Define”按钮定义一个DSN。如果需要，在“User name”框中输入用户名，在“Password”框中输入密码。由于我们使用的Web服务器和UltraDev运行在同一台计算机上， 所以选中“Using local DSN”选项。
　　    设置完毕，可以单击“Test”按钮进行测试，如果连接成功，就可以看到一个显示数据库数据的窗口。最后单击“OK” 按钮， 新建的数据库连接就会出现在“Connections”窗口中， 单击“Done”按钮，关闭Connections窗口，数据库链接创建完成，下面就可以开始设计动态网页了。
　　#1    六、工作流程
　　    由于UltraDev开发的是Web应用程序，它由一系列的动态网页和静态网页构成，所以我们首先要了解一下创建一个动态网页的工作流程，它一般包括六个阶段：
　　    1．设计用户界面
　　    设计用户界面，实际上就是根据需要排版网页，也就是我们经常所说的网页设计。它设计的是一个静态网页，我们可以用UltraDev的网页编辑功能来完成，其操作与Dreamweaver完全相同，我们这里就不再详述了。请读者参考相关的书籍。
　　    2．创建记录集
　　    如果用户要在网页中调用一个数据库，就必须先定义一个记录集，Web应用程序通过调用记录集来生成动态网页内容。
　　    所谓记录集，就是通过数据库查询从数据库中提取的一组记录构成的一个子集。一个记录集可以包含一个数据库中的所有记录和所有字段。记录集通常临时存放在服务器的内存中，以便加快访问数据库的速度，不用时再从内存中释放。
　　    在UltraDev中，是通过数据绑定面板来创建记录集的，它的建立方法是：
　　    （1）在文档编辑窗口中打开一个要使用记录集的动态网页。单击“Window→Data bindings”菜单命令，打开数据绑定面板。
　　    （2）在数据绑定面板中，单击“+”号按钮，从弹出菜单中选择“Recordset（Query）”选项，打开相应的对话框：
　　    Name：记录集的名称。
　　    Connection：数据库连接，可以单击下拉列表进行选择，也可以单击“Defice”按钮创建一个连接。
　　    Table：数据库表，当选择一个数据库连接时，在“Table”下拉列表中列出该数据库中的所有表。选中其中一个表，记录集将从该表中获取数据。
　　    Columns：字段，如果要在记录集中包括全部字段，请选择“All”选项；如果在记录集中及包含部分字段，请选中“Selected”选项，然后按住Ctrl键单击所需要的字段。
　　    Filter：过滤器，可以设置记录集的过滤条件。它的用法是：在第一个下拉列表中选择一个字段，在第二下下拉列表中选择一个关系运算符，在第三个下拉列表中选择一种测试值类型，在第四个框中输入一个测试值，这样就可以将字段与设定的测试值进行比较。
　　    Sort：排序，在第一个下拉列表中选择一个字段作为排序的依据，然后在第二个下拉列表中选择排序的方式：升序（Ascending）、降序（Descending）。
　　    （3）设置完毕，单击“Test”按钮，可以对记录集进行测试。单击“OK”按钮，就可以在数据绑定面板中看到所建立的记录集，单击可以展开记录集的树状目录，查看记录集中所包含的字段。
　　    3．添加动态内容
　　    在创建了记录集或其他数据源以后，就可以将这些数据作为动态内容添加到网页中，从而创建一个真正的动态网页，数据源可以是记录集中的某一字段，或者是通过HTML表单提交的数据或服务器对象中包含的数据。动态内容可以放在网页中的任何位置，可以把动态内容添加到文本或图像中，也可以实现表单对象和HTML属性的动态化。在UltraDev中添加动态内容的操作非常简单，你只需选定要添加的对象以及添加什么内容就行了，系统会自动生成脚本代码。
　　    要将动态内容添加到网页中，首先要定义一个数据源来提供动态内容，这就是我们上面提到的创建记录集；其次，要指定将动态内容放在何处，在UltraDev中，我们可以将动态内容放在网页中的任何位置，例如可以放在空白位置，也可以替换文本或图像，还可以插入到一个HTML属性中；最后，要将动态内容添加到页面中，这个工作可以通过数据绑定面板来完成。展开数据绑定面板中的记录集字段目录，将插入点移动到要插入动态内容的位置，或选定要替换的页面元素，然后在数据绑定面板中单击一个字段，再单击面板底部的“Insert”按钮，即可将动态内容添加到页面中，同时程序会自动在网页中插入相应的服务器端脚本代码。
　　    （1）添加动态文本：用户可以用动态文本代替网页中的静态文本，或者直接在页面中插入动态文本内容。
　　    打开要使用动态文本的网页；单击“Window→Data binetings”菜单命令，打开数据绑定面板，同时展开所使用的数据源，如果还没有建立数据源，可以单击“+”按钮添加；在页面中选中文本或者单击要添加动态文本的位置，将插入点移到这里；最后，在数据绑定面板中，选中一个记录集字段，然后单击“Insert”按钮，动态文本就添加到了网页中。
　　    另外，对于一些特殊的文本，如日期、时间、货币等，我们还可以定义它的格式，方法是：选中网页中表示动态文本内容的占位符，数据绑定面板中的相应字段也被同时选中，并且“Binding”和“Format”列中显示出了数值。单击“Format”列在右边的下拉箭头，弹出下拉菜单，该菜单中列出了各种数据格式，有货币、日期、时间、数字、百分比等，你可以根据需要选择一种合适的数据格式。
　　    （2）添加动态图像：打开一个网页，将插入点移到要加入图像的位置，单击“Insert→Image”菜单命令，出现“Select image source”对话框，选中窗口上方“Selet file name form”项中的“Data sources”选项；出现一个记录集字段列表，在列表中选择一个包含图像的字段，在“URL”框中就会出现表示图像文件来源的服务器端脚本代码；单击“OK”按钮，就可以将动态图像插入到网页中。在设计视图中，它显示的是一个图像样式的占位符。
　　    （3）添加动态表单：在UltraDev中，可以建立一个动态表单，用来显示数据库中的记录。表单的种类很多，但我们常见表单有文本框、图像域、单选框、复选框和列表框，下面，我们就来介绍实现这些表单动态化的方法：
　　    动态化文本框：在文档窗口中选中要进行动态化设置的文本框，然后在数据绑定面板中选择一个记录集字段，单击“Bind”按钮，将文本框的“Value”属性绑定到指定的记录集字段上。
　　    动态化图像域：图像域用来在网页中建立一个图像类型的提交按钮，当在浏览器单击该图像时，表中数据就会被发送到服务器。使图像域动态化的操作与网页中添加动态图像的操作完全一样，这里就不再赘述了。
　　    动态化单选框：单选按钮都是以组的形式出现，让你从多个选项中选择一项。例如，我们在制作学生档案的网页时，性别一栏有男、女两个选项，这两个选项就组成了一个按钮组，我们把这个选项按钮组与数据库中的性别字段绑定起来，就可以实现选项按钮组的动态化。
　　    它的具体操作是：打开包含单选框的动态网页，在属性面板中为两个按钮指定相同的名称，以保证它们属于同一个选项按钮组；选中表示男性的选项按钮，在属性面板的“Checked value”框中输入“男”，同样的方法，在表示女性的选项按钮的“Checked value”属性中输入“女”；单击“Window→Server behaviors”菜单命令，打开服务器行为面板，单击“+”按钮，从弹出菜单中选择“Dynamic elements→Dynamic radio button”命令，打开“Dynamic radio buttons”对话框，在“Radio button bronp”中选择要进行动态化处理的选项按钮组，在“Radio button value”框中分别选中一个选项按钮，并在“Value”框中分别输入它们的值：“男”、“女”；单击“Select value equal to”右边的按钮，出现“Dynamie data”对话框，单击“OK”按钮，关闭该对话框；全部设置完毕，单击“OK”按钮，结束操作。
　　    动态化复选框：在文档窗口中选中表单中的复选框，单击“Window→Server behaviors”菜单命令，打开服务器行为面板，单击“+”按钮，从弹出的菜单中选择“Dynanic elenents→Dynamic checkbox”命令，打开“Dynamic check box”对话框；在“Check box”下拉列表中选择要设置的复选框；如果想让该复选框在记录中的一个字段所特定值时被选中，则单击“Check if”右边的按钮，在出现的数据源列表中选择一个字段，然后单击“OK”按钮。在“Equal to”框中输入一个固定的值，以决定当记录中选定字段的值等于何值时选中复选框。如果想让该字段的值等于“Yes”时选中复选框，就在“Equal to”框中输入“Yes”；单击“OK”按钮，完成设置。
　　    动态化列表框：在文档窗口中选中列表／菜单对象，在服务器行为面板中单击“+”按钮，在弹出的菜单中选择“Dynanmic elements→Dynamic list/menu”命令，出现“Dynamic list/memu”对话框；从“Recordset”下拉列表中选择包含菜单列表信息的记录集。在“Menu”下拉列表中选择页面中的某一个列表／菜单对象。在“Get labels from”下拉列表中选择包含菜单项标签的字段名，在“Get values from”下拉列表中选择包含菜单项值的字段名。如果希望打开网页时某一个特定的列表项被选中，可以在“Select value equal to”框中输入一个值，也可以单击右边的按钮，然后从数据源列表中选择一个字段；单击“OK”按钮，完成设置。
　　    （4）使HTML属性动态化：网页中的各种页面元素都包含着许多属性，例如表格的背景色、文字的大小等，为了定义页面元素，往往要给这些HTML属性指定一系列的属性值，在UltraDev中，可以将HTML属性与指定的数据源绑定起来，从而实现HTML属性的动态化。利用数据绑定面板和属性面板都可以使HTML属性动态化。
　　    用数据绑定面板使HTML属性动态化：单击“Window→Data bindings”菜单命令，打开数据绑定面板；在文档编辑窗口中，选中一个HTML对象，如表格、图像等；在数据绑定面板中，打开数据源，选中用于HTML属性的字段，然后在“Bind to”下拉列表框中选中要与数据源绑定的HTML属性；单击“Bind”按钮，完成设置。
　　    用属性面板使HTML属性动态化：单击“Window→Properties”命令，打开属性面板；在文档编辑窗口中，选中一个HTML对象；在属性面板中，如果在要绑定数据源的HTML属性旁边有一个文件夹图标，单击该图标打开一个文件选择对话框，然后单击“Data source”选项显示出数据源列表。如果在要绑定数据源的HTML属性旁边没有文件夹图标，可以单击属性面板左边的列表标签，切换到列表视图下。如果要绑定的HTML属性没有出现在列表视图中，可以单击“+”按钮，然后输入该属性的名称；或者单击下拉箭头，然后从弹出菜单中选择该属性。为了使该属性动态化，单击该属性，然后单击属性行右边的按钮，出现数据源列表；在列表中选择一个合适的可以定义HTML属性的字段，最后单击“OK”按钮，结束操作。
　　    4．添加服务器行为
　　    为了使动态网页具有更强的交互性，往往要向网页中添加一些服务器行为，以便使其正常工作。服务器行为实际上是由Vbscript或Javascript代码组成的服务器端脚本，它们是在运行时由服务器来执行的。UltraDev提供了许多预定义的服务器行为，它就像设计网页模板一样，我们可以直接进行使用，免去了自己编写代码的烦恼。
　　    添加服务器行为的操作非常简单。在文档编辑窗口中选中需要添加服务器行为的对象，然后在服务器行为面板中单击“+”按钮，选择需要的服务器行为即可。程序会自动在网页中加入相应的服务器端脚本代码。
　　    5．测试动态网页
　　    网页设计之后，我们还必须对它进行测试，以便发现问题及时修改。这样才能保证上传到服务器上的网页符合我们的设计要求。测试分为在活动数据视图（Livedata）中查看和在浏览器中预览两种方式：
　　    （1）在活动数据视图（Livedata）中查看：在应用UltraDev设计动态网页时，在设计视图模式下，网页中的动态内容是以占位符的形式出现的，我们无法了解实际内容的显示情况，利用活动数据视图就可以真实地显示出动态内容。它的使用方法是：单击“View→Live data”命令，将文档窗口切换到活动数据窗口，我们就可以查看动态内容的显示效果。如果有不满意的地方，可以再单击“View→Live data”命令，切换到设计视图中进行编辑修改，这样就提高了设计效率。
　　    但是，活动数据窗口测试网页时所有的链接都无法工作。
　　    （2）在浏览器中预览：这是最完整的测试网页的方法，它不仅可以测试动态内容，还可以测试页面中的链接。在UltraDev编辑窗口打开要测试的网页，然后单击工具栏中的“Preview/Debug in preview→Preview in explorer”命令，就可以打开浏览器预览网页。在浏览器中可以单击各个链接以检验是否正确，同时还可以查看动态内容以及其他页面元素的显示效果。
　　    6．发布网站
　　    下面我们进行最后一步工作，把设计的网页发布到真正的远程服务器上，供大家浏览。要注意的是，在发布用UltraDev建立的ASP动态网页时，要想正确的显示网页效果，必须要申请一个ASP支持技术的主页空间，发布网站的具体操作是：
　　    （1）在站点管理窗口中打开要发布的网站，单击“Site→Define sites”菜单命令，打开“Define sites”对话框，从站点列表中选中要发布的站点，单击“Edit”按钮，打开站点定义对话框，在“Category”列表框中选择“Remote info”选项，在“Access”下拉列表中选择“FTP”。
　　    （2）在“Ftp host”中输入要上传网站的FTP 主机名，在“Host directory”中输入在远程服务器中需要进入的目录名，如果有的话，请填上。
　　    在“Login”框中输入用户名。在“Password”框中输入密码，选中“Save”复选框，程序会自动记忆密码，下次登录时就不用再输入密码了。
　　    如要使用被动FTP，选中“Use passive FTP”复选框；如果使用了防火墙，请选中“Use firewall”选项，并设置正确的参数；如果允许文件检验和登记，选中“Enable file check in and check out”选项。
　　    （3）单击“OK”按钮，然后单击“Done”按钮完成设置。
　　    （4）在站点管理窗口中，选中本地站点中要上传的文件，然后单击工具栏中的“Put”按钮，就可以把该文件上传到远程服务器上。同样，在远程服务器上选中一个文件，然后单击工具栏中的“Get”按钮，就可以把它下载到本地计算机中。
　　#1    七、制作留言簿实例
　　    留言簿是大家在设计网站过程中经常用到的。一般情况，大家都是去申请免费的留言簿来使用，但是它的设计并不能完全满足我们的需要。下面我们就学习用UltraDev来创建一个非常实用的留言簿，通过它，你不用写一句代码就可以设计出一个功能齐全、界面美观的留言簿。