【网页设计与制作】可制作动态网页的软件

1、第7章 可制作动态网页的软件本章要点：了解可制作动态网页的软件掌握用Dreamweaver UltraDev 学会如何制作动态网页7.1Dreamweaver UltraDev 概述 7.1.1 Dreamweaver UltraDev 功能特点 UltraDev增加了很多新的功能，UltraDev原有的一些功能也大大增强了。下面从自动化相关功能、动态数据格式化、代码编写相关功能和自定义相关功能四个方面介绍UltraDev的新特色。1自动化相关功能 在效劳器数据自动化操作方面，UltraDev 4增强了许多功能，使用户在创立 Web应用程序时，有更快捷的操作方法和更强的数据控制能力。 实时数据

2、 可以在工作区中实时查看效劳器端数据，节省时间，防止重复劳动。活动数据Live Data是完全可编辑的，因此，用户可以在处理效劳器数据时连续布局页面和逻辑。 数据绑定检查器 使用数据绑定检查器Data Bindings Inspector可以给页面快速添加效劳器表达式或来自数据库中的信息。把一个对象的属性绑定到效劳器表达式无需知道准确的语法。 远程数据库连接 UltraDev允许用户通过自己的网页应用效劳器行为，直接地连接数据库，不再需要动态架构和设定效劳器连接。 用户鉴定效劳器行为器 在不用书写复杂的效劳端代码的情况下，用户可以将密码保护参加到自己的站点里。它可以让用户通过数据库验证用户名和

3、密码，同时密码保护站点页面。2动态数据格式化 用户可以把当前的格式数据格式和ufl编码，而不是手写代码，应用到数据库数据或者效劳器表达式中，还可以用那些效劳器语言中的asp，jsp和cfml等库文件将根本的效劳器端的逻辑值应用到页面上。同时，通过数据库制作网页应用导航条，显示和隐藏版面的某些区域，插入、更新和删除某些记录。 3代码编写相关功能 为了弥补可视化编辑方法在 Web网页制作方面的局限，UltraDev 4提高了自己的代码编写功能和整合性，使用户既可以直接创立Web应用程序的内容，也可以通过手工来编写程序代码，从而增强了对Web的制作能力。 同时控制HTML和效劳器标记 在可视化环境中

4、工作仍能保持对代码的完全访问。当用户在一个视图中修改时，修改结果会在另一个视图中立即反映出来。这样，不但节省了用户的编辑时间，而且还增强了代码控制能力。 整合文本编辑器 增加了以代码为中心的新特性，包括自动缩排、标点平衡和选择多行后一次缩进。现在，手工编写代码就像在设计视图环境中一样方便。而且输人代码时，UltraDev 4自动对HTML、客户端JavaScript、ASP、JSP和CFML脚本使用不同的颜色显示，可以快速区分关键字和标记。 快速标签编辑器和代码导航条 通过快速标签编辑器，用户能够手写代码并快速地把代码参加到页面视图中。如果需要，用户还能快速地修改、参加或者去除页面中已选中物件

5、的html标签。用户能够快速地找到自己所要编辑的代码，可以通过代码视图工具栏的下拉菜单找到文档中的JavaScript函数。 整合 BBEdit或 HomeSite Bundle UltraDev内置了BBEditMac的适用版和HomeSiteWindows的完全版，此组合让用户在那些主流的文本编辑器和UltraDev之间轻松工作。4自定义相关功能 UltraDev 4在 Web应用支持上增加了更多的内容，例如，支持所有工业标准的应用效劳器和JavaBean，使用户在web开发和应用时有了更多的选择余地。 效劳器行为生成器 使用效劳器行为生成器Server Behavior Builder，

6、用户可以创立可重用的效劳器端脚本效劳器行为库，无需对UltraDev API编程。这个功能在一个大型的 Web应用程序中是非常有用的，可以大大减少用户的程序创立的时间和精力。 支持工业标准的应用效劳器 UltraDev 4支持所有工业标准的效劳器，例如， Microsoft IIS、Allaire ColdFusion、IBM WebSphere、BEA WebLogic和 Netscape Enterprise Sever等，用户可以根据自己的实际情况选择需要的效劳器，不必局限于某一个效劳器。 支持JavaBean 现在，JSP开发者可以注册任何的JavaBean，作为UltraDev数据源

7、，从而可以把JSP页面连接到JavaBean。UltraDev内置 JavaBean类、jar和zip文件。注册 JavaBean之后，用户就可以在数据绑定检查器Data Bindings Inspector中使用拖放方法访问 JavaBean的属性。7.1.2 Dreamweaver UltraDev 的安装及配置 使用 UltraDev 开发 Web应用程序，在用户本地计算机系统配置上与 Dreamweaver 4等网页工具有所不同。这主要是因为 UltraDev 4不但支持传统的静态页面，而且还支持基于新Web技术的动态页面。这就要求用户的计算机除了具备根本的软硬件要求外，还应在软件上满

8、足一些特殊的要求，例如必须在本地计算机上安装效劳器开发和控制环境。根据用户需求的不同，所需要的根本配置也不相同，下面列出了三种不同的系统配置： 为运行 UltraDev 4而需要使用的系统配置。 为运行动态页面而需要使用的系统配置。 为存储数据而需要使用的系统配置。 为了建立可行的Web应用，用户的系统至少要到达前两个配置要求。如果需要使用数据库，用户的系统就必须到达存储数据的配置要求。1、运行 UItraDev 4的系统配置 在根本运行环境上，UltraDev 4与 Dreamweaver 4的要求根本相同，用户只需适当地增加一些内存，即可增加数据库的连接以及数据查询和操作速度，从而提高We

9、b开发速度。下面是运行UltraDev时的系统配置要求： 中央处理器：Intel奔腾处理器233MHz的处理速度或者更快、奔腾处理器或其他同级别的兼容处理器。 内存：64MB的RAM。 硬盘空间： 50MB的可用磁盘空间。 其他设备：支持 SVGA 24色以上的显示器、鼠标和调制解调器等设备。 操作系统： Windows 95、Windows 98、Windows Me、带有 Service Pack 5的 Windows NT 4.0 、Windows 2000、Windows XP以及其他支持 UltraDev 4的操作系统。2、运行动态页面的系统配置 在 UltraDev 4中，实现 W

10、eb应用时已包括了创立动态的页面。在网络效劳器把动态的页面发送到浏览器之前，应用效劳器就会在运行中处理该动态页面。为了运行动态页面，用户需要一个应用效劳器，它应支持 ASP、JSP或 Allaire ColdFusion中的任何一种或多种，能在为浏览器提交动态页面之前生成HTML源代码文件。 3、实现数据存储的系统要求 无论用户创立何种Web应用程序，不进行数据的存储几乎是不可能的。对于一个数据存储量不大的程序，可以使用文本文件来实现数据的存储和读取，不过，文本的执行效率不高，也不便管理。所以，一般的Web应用程序都不采用文本来存储数据，而是利用数据库技术来存储数据。数据库的数据查询快速，管理

11、方便，容错功能强，在Internet信息管理和应用中占有绝对的优势。 对于数据库，不同的用户、不同的数据量要求，也可能有不同的选择。如果用户构建的站点规模不大，可以使用一些小型的数据库程序，例如，Microsoft Access或 Lotus Approach等。本书就是以 Microsoft Access 2000为例向大家介绍数据的使用的，因为它在进行数据库设计和管理时非常便捷，而且性能优越，帮助信息也很全面，用户很容易掌握其使用方法。 如果用户构建的站点规模很大，有大量的数据等待处理，并且希望数据库非常强壮和拥有强大的容错能力，那么应该安装效劳器级别的数据库系统，例如 Microsoft

12、 SQL Server、Sybase、Informix和Oracle等，一般使用Microsoft SQL Server和Oracle,因为它们的功能强大，而且应用范围广，受支持程度高。7.1.3 Dreamweaver UltraDev工作界面 当第一次启动 UltraDev 4时，看到如图7-1所示的窗口和面板，用户会感觉到它有别于其他许多网页创作软件。许多网页创作软件的界面拥有大量固定的菜单、工具栏和工具，使得在工作过程中真正的文档工作区域经常被压缩得很小，而UltraDev 4却使用了简便、精巧、实用的工具，不同级别和经验的用户都可以根据需要有选择地定制自己所喜欢的界面，以用来提高工作

13、效率。下面介绍一下窗口中界面元素的名称和功能： 对象面板 图7-1 UltraDev的窗口结构 1文档商口 文档窗口是UltraDev 4的主工作区域，通过在文档窗口中输入文字、插入图片以及其他各种页面元素，并且进行链接设置等操作，就可以在其中创立新的Web页。当需要对已有的Web页面进行编辑等操作时，也需要在文档窗口中翻开并且完成编辑工作。在文档窗口还可以快速查看当前页面的各种属性，使用标记选择器追踪HTML元素，以及设置页面尺寸等。它的显示结果同文件在测览器中显示的结果根本相同。 2对象面板 在对象面板上包含网页中所有可能用到的页面元素，从简单的文本、图像一直到复杂的ActiveX、交互图

14、像，甚至网页中的隐藏对象如非间断空格、效劳器引用等，用于在文档中创立不同类型的对象。在 Window菜单中选择 Objects命令，就会在屏幕中显示 Objects面板。3启动面板 启动面板上包含了普通用户最常使用的控制按钮，通过这些按钮，可以快速启动或关闭最常用的检视器和浮动面板。在UltraDev 4中，除了Objects面板和属性面板外，最重要的就是启动面板，使用它可以快速翻开一些重要窗口。一个复杂的页面创作需要经常用到这些工具，而使用装载器来管理，可以极大地提高工作效率。 由于 UltraDev 4拥有数量众多的窗口和面板，用户也许希望其他一些窗口和面板也可以通过装载器来快速翻开，这就

15、需要自定义装载器。单击Edit菜单中的Preferences命令，可以翻开Preferences对话框，在Category列表中选择Panels选项，在右边对话框中，可以在列表中通过增减相应的工程来设置装载器的按钮，如图7-2所示。 单击加号按钮可以翻开工程菜单，在其中选择未添加到装载器中的工程。在列表中显示的是已经添加到装载器中的工程，使用减号按钮可以将选中的工程从列表中删除。图7-2 Preferences对话框 4属性面板 属性面板在 UltraDev 4中是一个十分重要的工具，使用它可以对任何页面对象进行详细的属性查看和设置。中选定页面中的某个对象时，属性面板将显示相应对象的所有属性细

16、节。如果需要，用户可以随时对这些属性进行编辑和设置。属性面板中的内容不是固定的，它会随着选择对象的不同而变化。例如，在文档中空白区域单击，在属性面板中只会显示一些诸如格式、字体、字号等文本属性；而选择了图像对象时，将在属性面板中显示图像的尺寸、链接、替换文本的属性。选择的对象不同，那么属性面板的内容也不同，如图7-3所示。图7-3 不同对象下的属性面板 文本的属性面板图像的属性面板表格的属性面板 5可停靠浮动面板 可停靠浮动面板是一个工具集合的控制框架，用户可以将各种浮动窗口、面板和检视器放在其中，组合成为选项卡的形式，以节省屏幕的空间，必要的时候还可以将这些浮动窗口、面板和检视器从中别离，从

17、而成为独立的浮动面板。 7.1.4 Dreamweaver UltraDev 4的工作方式 利用 UltraDev 4设计Web应用程序，不仅要对应用程序的数据流程和文件结构进行设计，而且还要掌握UItraDev 4的根本工作方式，只有这样才能减少不必要的开发环节，提高应用程序的开发效率。在UltraDev 4中，一个页面程序的创立应按照三个步骤来走，它们分别为：制作静态页面和定义记录集、添加和激活动态内容，以及编辑和调试Web页。 1制作静态页面和定义记录集 制作动态页的第一步就是创立静态页面。用户可以定置Dreamweaver所有的设计工具，然后根据页面的实际需要创立显示内容。 如果在应用

18、中使用了数据库，下一步就要定义记录集，以便从数据库中临时提取数据。应用不能直接调用数据库，它必须以记录集为中介手段。用户定义的任何记录集都要添加到数据捆绑监视器的列表中，然后用这个监视器往用户的Web页中添加动态内容。2添加和激活动态内容 在向数据捆绑监视器中添加了记录集或其他数据源之后，就可以向用户的Web页中添加动态内容，而不必考虑插入到用户的 Web页中的效劳器端脚本。向 UltraDev 4添加动态内容时，仅仅需要指明其位置和内容。3编辑和调试Web页 最后一步就是根据需要编辑和调试Web页。Dreamweaver UltraDev 4为用户提供了三种编辑环境：Dreamweaver传

19、统的可视化编辑环境、UltraDev 4活动数据Live Data编辑环境和源代码编辑环境。 当然，用户还可以使用其他的 ASP调试工具进行实时的跟踪调试，比方 Microsoft公司的InterDev。另外，Microsoft公司还出了一个产品叫做ScriptDebuger，也是个很好用的调试工具。它甚至可以让用户单步执行脚本，实时查看变量数据。7.2 框架的创立 在 UltraDev 4中，专门提供了一个用于创立框架的对象面板，集成8种常用的框架，通过它们，用户可以很快完成各种框架结构的应用。另外，通过莱单，用户也可以逐步完成框架的创立。下面分别对框架的规划、创立和分割进行介绍。 在正式创

20、立框架页面之前，必须对框架页面的布局和内容进行规划，以减少后期修改工作。规划框架页面可能会涉及到以下几个问题： 确定页面结构。通过结构草图规划页面内框架的数量、排列方式、是否需要滚动条、框架与框架之间的距离等。通常，三框架页面是大多数人的选择。协调色彩。多框架的页面需要使用协调的背景色、文本色和链接色，尤其是链接颜色应该统一。用户应该从页面、甚至站点设计的全局出发，考虑框架内色彩的应用问题。 规划初始页面。每个框架都应该有一个初始页面，简单的问候语、富有意义的图像都可以作为初始页面的内容，否那么在测览器内将看到一个空白的区域。初始页面可以是以前创立的页面文件，也可以从空白页面开始，在发布站点之

21、前，完成空白页面的编辑和填充。确定目标框架。目标框架是更换最频繁的窗口区域，可能多个链接目标都需要在此框架内翻开，所以该框架应该处在醒目的位置，而且显示区域比较大，一般应占整个页面的60以上的比例空间。创立框架 要为当前页面创立框架结构，最常用的方法是使用Frames对象面板来创立。在该面板中，UltraDev 4提供了8种框架结构如图7-6所示，用户只要单击其中的框架按钮，就可以在当前页面或者插入点所在的框架中应用按钮所对应的框架结构，完成页面分割任务。例如，单击对象面板中的 Insert Left and Nested Top Frame按钮，可将当前文档窗口分割成三局部，如图7-7所示。

22、 图7-7 通过Frames对象面板创立框架 图7-6 Frames对象面 单独使用 UltraDev 4提供的 8种框架结构，是不能满足框架页面的创立需要的，开发人员需要结合使用它们才能创立各种各样的框架。UltraDev 4不但允许用户在一个文档窗口中应用框架技术，也允许用户嵌套框架，即在单个框架中应用框架。 除了Frames对象面板外，用户还可以通过三种方式来创立框架：一种是通过Insert菜单下的Frames子菜单来完成，一种是通过Modify菜单的Frameset子菜单来完成，另一种是使用Alt功能键。其中，Alt功能键的使用必须是在原有框架的根底上。如果用户要使用Alt功能键分割框

23、架，可按住Alt功能键，将鼠标移动到框架边框处。当鼠标的形状切换成垂直状时，沿箭头指示的方向拖动鼠标，可将框架分割成上、下两个局部。当鼠标的形状切换成水平状时，沿箭头指示的方向拖动鼠标，可将框架分割成左、右两个局部。 7.2.3 修改框架属性 用户在创立框架时，UltraDev 4都按照默认的内容来设置框架的大小以及其他一些属性，包括边框的有无、边框宽度、边框颜色、所选行或列的宽度、行或列宽度的度量单位等内容。为了框架的美观和统一，用户还必须对上面这些属性进行设置，下面分别进行介绍。 1选择框架 要对框架进行属性设置和其他操作，首先必须选择框架UltraDev 4提供了两种选择框架的方法，用户

24、可选择其中任一种方法： 图7-8 框架面板 按住Alt功能键，单击页面内的框架。 在翻开的框架面板内单击框架。框架面板是UltraDev 4用于管理框架的工具，执行 window菜单的Frames命令或者使用 Ctrl F10组合键时，都将翻开如图7-8所示的框架面板，当前页面的框架集及其框架的布局将显示在框架面板内。 UltraDev 4提供了两种选择框架集的方法，用户可执行以下操作之一： 在文档窗口单击框架边框。 在框架面板内单击包围框架的白色边框。 无论是框架还是框架集处于选择状态时，在它的周围都将出现由圆点组成的虚线框。按住Ctrl功能键的同时，按左、右移动键时，将选择相邻的框架。按上

25、移动键，将选择父框架集，按下移动键，将选择子框架集。2调整框架大小 框架集由多个矩形框架组成，它们都是从简单的水平或垂直框架演变而来的，这与表格对页面的划分非常类似。对于规那么的框架来说，同列的框架都具有相同的行高，或者同行的框架都具有相同的列宽。对于不规那么的框架来说，较小的框架仍然是由初始框架分割而成的，较大的框架那么是由初始框架合并而成的，本质上仍然可将它们看成是由行、列内的框架组成的。 用户要调整单个框架的大小，将鼠标指向框架的边框整个框架边框除外，当鼠标变成上下的箭头时，按住鼠标水平垂直地拖动框架的边框可对同列行内框架的宽度高度进行快速的调整。另外，在框架边框的属性面板中，用户也可以

26、通过ColumnRow选项区域中的Value和Units值的调整来对行或列内框架的大小进行定量的设置。 3设置边框 边框是位于不同框架之间的分割线，与边框有关的属性包括是否显示边框、边框的宽度与边框的颜色等。用户如果要设置框架边框，首先选择它，然后翻开框架边框的属性面板如图7-9所示来设置。其中，Borders下拉列表框用于设置是否显示边框，翻开该下拉列表框，选择Yes选项时，表示以三维和灰度显示边框。选择No选项时，表示显示扁平和灰度边框。选择Default选项时，将由访问者使用的浏览器决定是否显示边框的内容。图7-9 框架边框的属性面板 Border Color颜色框用于设置框架集边框的颜

27、色，用户可直接在文本框内输入代表颜色的16进制数值，也可以翻开颜色选择器选择所需的颜色。注意，只有在Borders下拉列表框内定义框架集的边框为显示状态时，在此设置的颜色才能生效。 Border Width文本框用于设置边框的宽度，用户可直接在文本框内输入边框的数值，它的度量单位是像素。加大边框的宽度时，它们在浏览器窗口占据的位置也将增大，尤其是框架较多的情况下，显示边框往往会暄宾夺主，使页面内容在浏览器窗口处于次要的地位。因此大多数情况下，都将边框的宽度定义为1或0。4改变框架其他属性 除了框架大小的调整、边框的显示状态和边框颜色之外，用户还需要设置框架的其他一些属性，例如，框架名称、滚动条

28、、源文件、边距宽度和边距高度等内容，这些属性都出现在框架的属性面板，如图7-10所示。其中，框架名称是设置目标框架的关键，链接页面就是通过框架名称来确定翻开页面内容的位置的。在Frame Name文本框中，用户可以输入框架的名称，数字、字母、下划线及其组合都可以作为框架名称的组成局部。不过，UltraDev 4不允许使用空格、短横、半角句点作为框架名称的组成局部，并且下划线不得出现在名称的最前端。框架名称确定了之后，就可以通过Src文本框为当前框架设置一个默认的页面文件。 图7-10 框架的属性面板 在框架内填充内容时，它的方法与在文档窗口添加页面内容完全相似，在内容与边框之间总是保存一定的距

29、离，这样，不同的框架就会以间距为分割线，即使边框未出现在浏览器窗口，不同框架的页面内容仍然能够很好地加以区分。UltraDev 4使用属性面板的 Margin Width文本框定义框架内容与边框之间的水平间距，Margin Height文本框定义框架内容与边框之间的垂直间距。当框架内的内容较多时，它们占据的空间将超过框架大小覆盖的范围，这时就需要在框架的右侧添加垂直滚动条，在框架的底端添加水平滚动条。UltraDev 4不仅允许用户在框架内设置滚动条，还可以根据框架内容的多少自动决定是否显示滚动条。在框架属性面板中，翻开Scroll下拉列表框，确定滚动条的显示状态。选择No选项时，滚动条不会出

30、现在浏览器窗口。选择Yes选项时，滚动条将始终显示在浏览器窗口。选择Auto选项时，表示当框架内容超过框架覆盖的区域时，将显示滚动条，否那么滚动条处于隐藏状态。选择Default选项时，由访问者使用的浏览器来决定是否显示滚动条，济览器的类型不同，它对滚动条的处理方式也不同。 在浏览器窗口内使用鼠标拖动页面的框架时，也能够对框架的大小进行修改。但如果在框架的属性面板内启用 No Resize复选框，那么访问者修改框架大小的尝试将是无效的。7.2.4 保存框架页面 在 UltraDev 4中，保存框架页面比保存普通页面要复杂一些，这主要是由于框架页面是由框架集及其框架内容组成的。在保存框架页面时，

31、不仅要保存框架的内容，还要对框架集本身进行保存。 如果用户要保存框架集，可选择File菜单的 Save Frameset命令，翻开 Save AS对话框，将框架集文件定位在当前站点内。需要将当前框架集进行另存处理时，可选择File菜单的save Framset As命令。 如果用户要保存框架内的页面时，需要将插入点定位在框架内，然后选择File菜单的Save命令，这样在翻开的对话框内便可确定框架页面的名称及其路径。一次性地对框架文件、框架集文件存盘时，可选择File菜单中的Save All命令，UltraDev 4将依次对框架集和框架内容进行保存。7.3 表单 表单是访问者与网页维护人员之间进

32、行沟通和交流的桥梁，当访问者填写完表单数据之后，信息将被发送给ASP应用程序，由ASP应用程序分析访问者的要求，并将结果显示在浏览器窗口，或者反响给站点所有者，并对访问者作出响应。表单是UltraDev 4创立 Web应用程序的重要内容。本节首先介绍表单的一些根本内容，使用户对表单有一个明确的认识，然后详细介绍表单及主要表单元素的创立方法。 7.3.1 表单的创立 在动态交互式网页中，表单对象是最常用的页面对象，它能够方便地收集各种所需信息，是用户与Web应用程序之间进行数据交换的重要接口。UltraDev 4提供了多种创立表单的方法，在文档窗口内，执行以下方法之一时，都可以创立一张表单： 选

33、择Insert菜单的Form命令。 翻开 Form对象面板，单击 Insert Form按钮。 选择 Insert菜单的 Form Objects选项，然后从其子菜单中选择任何一个表单元素插入命令。 表单被创立之后，以红色虚线框的形式出现在文档窗口，说明表单元素的填充范围，只有出现在该区域的内容才作为表单的一局部。如果红色虚线框未显示在文档窗口内，用户可以选择View菜单中的 Invisible Elements命令。在表单的边框上单击，或者将插入点移动至表单内，都将使表单处于选择状态。当用户选择表单之后，属性面板就会显示出表单的属性内容，如图7-11所示。图7-11 表单的属性面板7.3.2

34、 创立文本框 对于表单的创立，UltraDev 4支持两种情况，一种是创立单行文本框，一种是创立滚动文本框。其中单行文本框用于接收简短的用户信息，滚动文本框用于接收内容较多的用户信息。下面分别介绍它们的创立过程。 7.3.3 创立复选框 在Windows的对话框中，用户也许经常接触到复选框的使用，复选框允许用户在众多项选择项内进行多项选择，启用的复选框内将出现勾选号。一般，复选框的使用必须与说明文字相配合，访问者可根据说明文字的内容来判断是否启用复选框。 图7-14 设置复选框的属性 下拉菜单是对单项选择按钮的改进，其中的选项具有互斥的特点。相对于单项选择按钮，下拉菜单有优点也有缺点，优点是可

35、将所有的选项都集中起来，只显示经常处于选择状态的选项，克服了单项选择按钮占用过多页面空间的缺点，节约了页面空间。缺点是不方便访问者进行快速选择。在 UltraDev中，创立下拉菜单的方法也有两种，用户只要选择其中的一种即可： 选择InsertForm ObjectsList/Menu命令。 翻开对象面板，单击listMenu按钮。 下拉菜单的属性包括菜单名称、初始选项和菜单数值等。菜单名称是识别下拉菜单的唯一标记，ASP应用程序是通过该名称识别不同的表单元素的。初始选项就是翻开页面时，首先出现在下拉菜单的内容。当访问者将表单发送给ASP应用程序时，应用程序将根据下拉菜单的数值来判断菜单项选择项

36、是否已被选中，在菜单数值与菜单项选择项之间存在着对应关系。 要设置下拉菜单的属性，在表单中选择它，然后翻开如图7-16所示的属性面板来进行，具体内容可参照下面的选项介绍。 。 LislMenu文本框：在该文本框中设置下拉菜单的名称。 Type选项区域：在该选项区域中，确认选择了Menu单项选择按钮。 List Values按钮：通过该按钮设置下拉菜单中的选项。用户要通过list Values按钮设置下拉菜单中的选项，可以参照下面的操作步骤：1在下拉菜单的属性面板中，单击 list Values按钮，翻开 List Values对话框。2单击左上角的“按钮，然后在 Item Label栏内输人下

37、拉菜单的第一个选项。图7-16 下拉菜单的属性面板 3在Value栏内输人第一选项的菜单数值。4重复上面第2步到第3步，继续添加其他选项及其数值。5选项添加完毕，单击向上箭头按钮时，将使所选的菜单项选择项及其数值向前移动一个位置。相反地，单击向下箭头按钮时，将使所选的菜单项选择项及其数值向后移动一个位置。6要删除某个菜单项选择项，在选项列表中选择它，然后单击“按钮即可。7单击OK按钮，返回到下拉菜单的属性面板。 在个人信息表单内需要了解职称情况时，可在表单内添加“职称下拉菜单，它包括“工人、“初级工程师、“工程师、“高级工程师和“系统工程师5个选项，访问者可根据自身的情况，选择与自己相对应的职

38、称选项。 1在表单中选择下拉列表框，并翻开其属性面板，如图7-17所示。图7-17 设置下拉列表框的属性2选择Type的List单项选择按钮。3在list/Menu文本框内命名下拉列表框。4单击 list Values按钮，翻开 list Values对话框，按照上面的方法确定下拉列表框的选项名称及其数值，然后单击OK按钮之后，返回属性面板。5在Height文本框内设置列表框选项在浏览器窗口的显示长度。 6在 Selections选项区域中，启用 Allow multiple复选框时，表示允许访问者一次选择多个选项，此时下拉列表框的作用与复选框完全相同。取消 Allow multiple复选框

39、时，下拉列表框的作用与单项选择按钮相同。将Height文本框内的数值修改为1，并取消Allow multiple复选框时，下拉列表框的作用与下拉菜单相同。 7.3.7 创立重置和提交按钮 收集数据信息是表单的主要功能，当访问者完成文本框的输入、复选框和单项选择按钮等的选择之后，便可对表单的内容进行检查并进行修改，最后将表单数据提交给ASP应用程序。UltraDev 4提供了两个按钮未完成这项工作，其中，重置按钮用于恢复默认的表单数据，提交按钮用于以Post或Get的方式提交数据给ASP应用程序。 用户在创立好用于接收信息的表单元素之后，可按照下面的步骤来创立重置和提交按钮并设置其属性： 1将插

40、入点置于表单中，选择 InsertForm ObectsButton命令，或者单击对象面板中的Button按钮，创立一个按钮。 2选择新创立按钮，翻开其属性面板，设置按钮属性，如图7-18所示。图7-18 设置按钮属性3在 Button Name文本框内定义表单按钮的名称。4在lable文本框内定义表单按钮的标签。5在Action选项区域中，选择 Submit form单项选择按钮，那么创立的按钮为提交按钮；选择Reset form单项选择按钮，那么创立的按钮为重置按钮。这里选择 Reset form单项选择按钮。6按照前面的步骤创立第第二个按钮，并在按钮的属性面板中选择 Submit for

41、m单项选择按钮，将按钮设置为提交按钮。7.4 应用层 随着信息时代的来临，人们对页面内容的定位、移动和显示提出了更高的要求，为引入层的概念。层是一种全新的页面定位技术，可以对其中的对象提供像素级的精确定位，并可以自由地在页面中移动。用户将对象放入到层中之后，可以控制哪些显示在前面，哪些显示在后面，哪些显示，哪些不显示。另外，配合时间轴的使用，用户还可以同时移动一个或者多个层，轻松地制作出各种动态效果。 7.4.1 层的根本概念 在层出现之前，用户可以使用表格控制页面的版面。文本、图像都可填充在表格内，它们的位置通过表格是非常容易控制的。当需要精确地控制图像时，就必须借助更加小巧的表格，而且无法

42、改变在平面上布置对象的限制。为增强Web设计者布置版面的手段，W3C在新的 Cascading Style Sheet层叠样式表中包括了一个特性，允许对页面上的元素进行绝对的定位。绝对定位使某 个元素图像或文本可以定位到页面上的任何位置，这个特性就是Web页面上的层，Web页面上的层实际上是通过HTML标记来创立的，通过在标记中设置页面坐标，可以在页面中对层进行精确定位。在 UltraDev 4中，用户可以通过简单的方法在页面中创立层，而无须进行任何编码的工作。通过在 UltraDev 4中创立层，可以在页面中的任何位置插入精确定位的元素，并且可以对多个层进行堆叠和隐藏等操作，还可以通过使用行

43、为设置层的动画和交互效果，大大提高页面创作的能力和质量。7.4.2 层的根本操作 层的根本操作主要包括默认参数的修改、层的创立、层的对齐、嵌套、尺寸调整和位置移动等，下面分别进行介绍。1修改层的默认参数 在使用层时，都是按默认参数来设置，为了使页面中创立的层能够适应自己工作的需要，用户可以修改它的默认参数值。选择 EditPreference命令或按下键盘上的 CtrlU键，翻开Preferences对话框，并在Category列表框中选择Layers选项，如图7-19所示。 有关层的默认设置内容主要包括以下几项： Tag下拉列表框：该下拉列表框设置在创立层时使用的HTML标记。 Visibi

44、lity下拉列表框：该下拉列表框设置创立的层默认的可见性。 Width和Height文本框：这两个文本框设置创立的层默认的宽度和高度属性。 Backgroud选项：该选项用来指定背景颜色或者图像。 Nesting复选框：启用该复选框将把新层设置为嵌入式的层。 Netscape 4复选框：启用该复选框将在插入层时加人 Resize修复程序。 图7-19 设置层的默认属性 2创立层 UltraDev 4为用户提供了下面三种创立层的方式，用户使用任何一种都可以创立出一个新层。 选择InsertLayer命令，可以得到一个默认的层。 使用 CSS Style选项卡可以创立一个精确定义大小的层。 最直接

45、的方法是从对象面板中单击“Draw Layer按钮之后，在页面上拖动出层的大小。3激活与选择 需要在层内添加文本、图像、插件、表格时，必须先激活层。激活层的方法非常简单，用户只需单击层所在的区域。层被激活后，光标将停留在层中，层的边框高亮显示，此时在层的左上角出现选择手柄如图7-20所示，将鼠标指向手柄时，它的形状将切换成手形，单击之后便可使激活的层处于选择状态。 如果用户需要一次性地选择多个层时，可按以下方法之一进行操作： 按住Shift功能键的同时，依次单击多个层。 按住Shift功能键的同时，依次在层面板的名称列表内选择。当多个层被选中时，最后选择的层的手柄以黑色小方块的形式出现，而在此

46、之前选择的层手柄将切换成白色。在文档窗口的空白位置单击时，将取消所有层的选择。4调整层的尺寸将鼠标移动到层的边框处，它的形状将切换成双向箭头，按住鼠标并进行拖动即可调整层的尺寸。不过，如果要精确地定义层，必须使用键盘和属性面板。如果选择多个层，那么层的操作对所选的层都有效，并且这些层将具有相同的高度或宽度。 图7-20 激活的层 如果要使用键盘调整，先选择层，然后按住Ctrl功能键，每按一次光标移动键，将按照箭头指示的方向以像素为单位改变层的大小。如果同时按住Shift和Ctrl功能键，每按一次光标移动键，将按照箭头指示的方向以网格为单位改变层的大小。如果用户要使用属性面板来调整层的尺寸，先选

47、择文档窗口的一个或多个层，然后翻开属性面板，在Height、Width文本框内输入以像素为单位的数值。5改变层的位置 选择层之后，使用鼠标拖动便可改变层在文档窗口的位置。配合光标移动键的使用，用户可以以像素或网格为单位移动层，前者适合于快速地改变层的位置，后者适合于精确定位的情况。与移动层关联的菜单命令是View菜单的 Prevent Overlaps命令。如果该命令前出现勾号，表示 UltraDev 4启用防止层相互重叠的功能，此时用户就无法对层进行移动。再次执行该命令时，将取消防止层相互重叠的功能。 6对齐层在进行层对齐时，需要确定基准层，其他层都是通过基准层来进行对齐的。一次性地选择多个

48、层之后，UltraDev 4总是将最后选择的层作为基准层。如果多个层相互重叠，用户还可改变层的排列顺序。要对齐层，一次性地选择文档窗口的多个层，单击 ModifyAlign中的对齐命令即可。7嵌套层嵌套层就是在父层内添加新的子层，嵌套的级别是不受限制的，用户可通过层面板来查看包括嵌套层在内的所有层。选择Window菜单中的Layers命令，翻开层面板，其中显示各个嵌套层之间的关系，如图7-21所示。在名称列表内出现当前页面内所有层的名称，而且层的名称将按照添加的顺序依次排列，最先添加的层位于名称列表的底部，最近添加的层位于名称列表的顶部。特定层的可见性通过眼睛图标在面板的第一列显示，选择眼睛图

49、标可以使用户在三种不同的可见性状态之间进行切换：眼睛闭上表示层被隐藏，眼睛睁开表示层是可见的，没有眼睛表示层的可见性属性被设置为默认的，对于 和 ，它们都意味着继承父层的可见性。需要同时将所有层的可见性设为相同的状态，可在标签的顶部单击眼睛图标，所有的眼睛都会同时开关。 用户要改变某一层的名称，只要在面板中双击该层的名称，该名称就会高亮显示，输人新的层名称之后回车即可。在嵌套层的左侧会出现一个“或“号，假设出现“号那么表示只显示父层而不显示对应的子层，单击“号可以显示子层；单击“号将隐藏所有的子层。 UltraDev 4提供了3种添加嵌套层的方法，用户可选择以下方法之一进行操作。 选择父层，执

50、行Insert菜单的Layer命令。图7-21 显示层间的嵌套 拖动对象面板的Layer按钮至父层内。 单击对象面板的Layer按钮，在父层内拖动。 按住Ctrl功能键在层面板内选择一个层后拖动到父层，当包围目标层名称的方框显示时，释放鼠标便形成新的嵌套层。嵌套层随着父层的移动而移动，并继承父层的可见性。用户可以使用嵌套属性快速地隐藏层。如果所有子层的可见性都被设置为默认，那么通过父层，用户可能使所有的子层继承父层的可见性设置，并从视图中消失。7.4.3 设置层的属性 用户要设置某个层的属性，就先在页面中选择该层，然后翻开其属性面板如图7-22所示。为了让CSS和JavaScript能够正确地

51、引用层，必须为层命名，该名称必须是唯一的。在创立层的同时，UltraDev 4自动为每一个层进行命名，其命名规那么是“Layer与阿拉伯数字的结合，用户可在层属性面板左上角的文本框内输入一个便于管理和记忆的名称。UltralDev 4规定层的名字可以使用英文字母和数字，但不允许使用特殊字符如空格、连字号、斜线或句号等。 翻开 Tag下拉列表框之后，可以看到与层有关的 HTML标识。默认情况下，被定位的层使用div标识，但是用户也可以选择span、layer或ilayer标识。Visibility下拉列表框决定着图的可见性，各选项的意义与Layers选项卡的完全相同。在层面板内，选择想要改变可见

52、性的层所在的行，单击左侧的眼睛图标也能够改变层的可见性。如果层左侧的眼睛图标是睁开的，表示该层是可见的。图7-22 层属性面板 如果层左侧的眼睛图标是闭上的，表示该层不可见。如果层的左侧没有眼睛图标，那么层继承其父层的可见性。如果层没有嵌套，那么层的父层就是文档本身，它总是可见的。希望改变所有层的可见性时，可在翻开的层面板内，单击眼睛图标列最顶部的眼睛图标，使眼睛图标处于关闭状态。无论层是否可见，层都占用页面上的空间，并且需要一些页面下载的时间。隐藏层不会影响布局，但其中的内容将消耗和可见层相同的下载时间。 通常，层的大小总是与插入其中的文本或图形相匹配。通过改变属性面板中的高度和宽度属性，用

53、户可以限制层的尺寸。当用户定义的层相对于某个图像太小时，或者当许多文本依赖于层的Overflow属性的设置时，就会发生溢出现像Overflow。CSS层支持4种不同的Overflow设置： Visible选项表示将显示所有溢出的文本或图像，同时忽略为层所设定的高度和宽度。 Hidden选项表示忽略文本或者图形中溢出尺寸之外的局部。 Scroll选项表示无论插入对象的尺寸或数量如何，也无论层的大小尺寸如何，水平和垂直的滚动条都将被添加到层上。 Auto选项表示当层的内容超过宽度和高度时，水平的和垂直的滚动条将显示在浏览器窗口。目前，UltralDev 4还不能在文档窗口直接显示结果，需要设置层的

54、 Overflow属性，必须借助于浏览器。层在页面内的位置是相对于文档窗口或父层左上角的位置，L、T文本框以像素默认为单位的数值将决定着这段距离的长短，它们分别表示相对于左上角的横向距离与纵向距离。 W、H文本框用于指定层的宽度与高度，该数值只能对所选的层有效，未选择的层仍将保存 以前的大小。定义距离、长度数值时，除了默认的像素之外，用户还可以使用其他的单位，例如 pc(picas)，pt(points)，ininches，mmmillimeters，cmcentimeters或在父层的百分比等，缩写的单符号或百分号必须紧邻输入的数值，中间不能存在空格。 Clip选项区域用于指定显示区域与层边

55、界之间的距离，它可以实现层对象的剪切。用户可从Ttop、LIeft、RRight、BBottom4个方向上设置显示区域与层边界的距离。ZIndex文本框用于设置层的叠放顺序，当多个层出现时，它能够改变层的显示状态。数值较大的层出现在上面，数值较小的层出现在下面。另外，为了改变层的叠放顺序，用户还可选择层面板的Z列，然后单击希望改变叠放顺序的层数字。在数字的周围出现活动边框时，可在此输入一个较大的数字，表示将层尽量移动到前端。输入一个较小的数字时，表示将层尽量移动到底端。ZIndex的值必须被设置为整数，正、负没有关系。由于该值是相对的，因此较大的值对应的层将显示在顶层，而较小的值对齐的层将显示

56、在底层。 Bg Image文本框用于指定层的背景图像，用户可在文本框中输入背景图像的路径与名称，或者单击右侧的文件夹图标，在翻开的对话框内确定背景图像的位置与名称。当层的大小超过图像的尺寸时，背景图像将被拉伸，以适用层的大小。如果希望给层添加背景颜色时，可在Bg Color文本框内输入16进制的数值，该数值与某个颜色相对应。当然，用户也可以翻开颜色框从中进行选择。7.5 站点管理 7.5.1 规划站点1确定站点主题针对建站的目的制定主题是一条必须遵循的规那么，如果主题与目的相去甚远，那么建站的目的也就没有到达，可以说站点本身是不成功的。在确定站点的主题时，需要对当前的站点进行系统的分析，寻找自

57、己的突破口与切入点，以期到达“标新的目标。公司站点的主题集中在产品研发、生产销售、客户关系和工程协作等方面，而个人站点可以把注意力集中在一个或几个关键性主题上，每个主题都采用数个网页加以展示。对于正在从事某项工作的用户来说，可以通过站点邀请一些志同道合的朋友共同参与，站点的主题是针对工程内容、前景预测、个人想法和当前情况等进行说明。如果访问者对介绍的情况比较感兴趣，就会以电子邮件、 或 的方式与建站者进行联系。站点是展现个人才华的舞台，设计者对制作工具的掌握、大局的处理、色彩的运用和文字功底的深厚在站点上都一览无余。如果用户在音乐、书法、绘画和手工等方面具有独到之处，可以将代表性的作品拍摄下来

58、，通过扫描仪将照片转换成图片，在站点上建立个人作品专集。对于变幻莫测的世界，人们难免会对其间发生的事件和涌现的人物提出自己的看法，通过站点抛砖引玉，与访问者进行交流、切磋，即使不能形成统一的意见，也可以从中受到启发，增进学识。 2搜集材料 一般，站点所需要的材料包括文字、图片、动画、音频和视频等内容，用户可以从报刊、杂志、书籍、光盘以及网络上获得，其中网络和光盘是大量素材的重要来源。如果素材来源于共享资源，经过加工就可以应用到自己的站点内。如果素材带有版权属性，那么在使用之前必须征得所有人的同意。 对于图片类素材来说，需要使用Photoshop、PhotoDraw等工具进行处理、加工。对于动画

59、来说，需要使用 ImageReady和 Flash等工具来进行创立或编辑。对于音、视频素材来说，需要使用专用的编辑器进行剪辑。对于数据类素材来说，在使用之前应该进行认真的核对，以防误传。3选择相关编辑工具由于 UltraDev 4具有 Dreamweaver 4的一切功能，因此它不需要其他网页编辑工具来帮助完成工作，但是 UltraDev 4本身并不具有图像绘制、图像处理、动画制作和音频制作等功能，仍然需要其他一些相关编辑工具来制作和处理网页材料。例如，利用 Cakewalk Audio设计MIDI音乐、利用GoldWave设计WAV音效、利用Flash设计网页动画，以及利用Photoshop

60、处理图像等。 7.5.2 创立站点站点是保存网页文件及其文件夹的载体，在创立站点期间，它的内容总是保存在本地的计算机中，经过网页编辑、站点测试之后，就可以着手将它发布到远程效劳器上，这样访问者在浏览器的帮助下，通过互联网就可以浏览到站点的内容。要创立站点，可参照下面的过程：l在文档窗口中，选择 Site菜单中的 New Site命令，翻开 Site Definition for Unnamed Site l对话框，并显示Local Info选项的内容，如图7-23所示。 图7-23 创立新站点 2在 Site Name文本框内输入站点的名称。3单击Local Root文本框右侧的文件夹图标，翻