网页设计与制作 (5).ppt

第第7章章可制作动态网页的软件可制作动态网页的软件本章要点：l了解可制作动态网页的软件l掌握用DreamweaverUltraDev4.0制作动态网页l学会如何制作动态网页7.1Dreamweaver UltraDev 概述 7.1.1DreamweaverUltraDev功能特点UltraDev4.0增加了很多新的功能，UltraDevl.0原有的一些功能也大大增强了。下面从自动化相关功能、动态数据格式化、代码编写相关功能和自定义相关功能四个方面介绍UltraDev4.0的新特色。1自动化相关功能自动化相关功能在服务器数据自动化操作方面，UltraDev4增强了许多功能，使用户在创建Web应用程序时，有更快捷的操作方法和更强的数据控制能力。实时数据可以在工作区中实时查看服务器端数据，节省时间，避免重复劳动。活动数据（LiveData）是完全可编辑的，因此，用户可以在处理服务器数据时连续布局页面和逻辑。数据绑定检查器使用数据绑定检查器（DataBindingsInspector）可以给页面快速添加服务器表达式或来自数据库中的信息。把一个对象的属性绑定到服务器表达式无需知道准确的语法。远程数据库连接UltraDev允许用户通过自己的网页应用服务器行为，直接地连接数据库，不再需要动态架构和设定服务器连接。用户鉴定服务器行为器在不用书写复杂的服务端代码的情况下，用户可以将密码保护加入到自己的站点里。它可以让用户通过数据库验证用户名和密码，同时密码保护站点页面。2动态数据格式化动态数据格式化 用户可以把当前的格式（数据格式）和ufl编码，而不是手写代码，应用到数据库数据或者服务器表达式中，还可以用那些服务器语言中的asp，jsp和cfml等库文件将基本的服务器端的逻辑值应用到页面上。同时，通过数据库制作网页应用导航条，显示和隐藏版面的某些区域，插入、更新和删除某些记录。3代码编写相关功能代码编写相关功能为了弥补可视化编辑方法在 Web网页制作方面的局限，UltraDev4提高了自己的代码编写功能和整合性，使用户既可以直接创建Web应用程序的内容，也可以通过手工来编写程序代码，从而增强了对Web的制作能力。同时控制HTML和服务器标记在可视化环境中工作仍能保持对代码的完全访问。当用户在一个视图中修改时，修改结果会在另一个视图中立即反映出来。这样，不但节省了用户的编辑时间，而且还增强了代码控制能力。整合文本编辑器增加了以代码为中心的新特性，包括自动缩排、标点平衡和选择多行后一次缩进。现在，手工编写代码就像在设计视图环境中一样方便。而且输人代码时，UltraDev4自动对HTML、客户端JavaScript、ASP、JSP和CFML脚本使用不同的颜色显示，可以快速区分关键字和标记。快速标签编辑器和代码导航条通过快速标签编辑器，用户能够手写代码并快速地把代码加入到页面视图中。如果需要，用户还能快速地修改、加入或者去除页面中已选中物件的html标签。用户能够快速地找到自己所要编辑的代码，可以通过代码视图工具栏的下拉菜单找到文档中的JavaScript函数。整合BBEdit或HomeSiteBundleUltraDev内置了BBEdit（Mac）的适用版和HomeSite（Windows）的完全版，此组合让用户在那些主流的文本编辑器和UltraDev之间轻松工作。4自定义相关功能自定义相关功能UltraDev4在Web应用支持上增加了更多的内容，例如，支持所有工业标准的应用服务器和JavaBean，使用户在web开发和应用时有了更多的选择余地。服务器行为生成器使用服务器行为生成器（ServerBehaviorBuilder），用户可以创建可重用的服务器端脚本（服务器行为）库，无需对UltraDevAPI编程。这个功能在一个大型的Web应用程序中是非常有用的，可以大大减少用户的程序创建的时间和精力。支持工业标准的应用服务器UltraDev4支持所有工业标准的服务器，例如，MicrosoftIIS、AllaireColdFusion、IBMWebSphere、BEAWebLogic和NetscapeEnterpriseSever等，用户可以根据自己的实际情况选择需要的服务器，不必局限于某一个服务器。支持JavaBean 现在，JSP开发者可以注册任何的JavaBean，作为UltraDev数据源，从而可以把JSP页面连接到JavaBean。UltraDev内置JavaBean类、jar和zip文件。注册JavaBean之后，用户就可以在数据绑定检查器（DataBindingsInspector）中使用拖放方法访问JavaBean的属性。7.1.2 Dreamweaver UltraDev 的安装及配置的安装及配置使用UltraDev开发Web应用程序，在用户本地计算机系统配置上与 Dreamweaver 4等网页工具有所不同。这主要是因为UltraDev4不但支持传统的静态页面，而且还支持基于新Web技术的动态页面。这就要求用户的计算机除了具备基本的软硬件要求外，还应在软件上满足一些特殊的要求，例如必须在本地计算机上安装服务器开发和控制环境。根据用户需求的不同，所需要的基本配置也不相同，下面列出了三种不同的系统配置：为运行UltraDev4而需要使用的系统配置。为运行动态页面而需要使用的系统配置。为存储数据而需要使用的系统配置。为了建立可行的Web应用，用户的系统至少要达到前两个配置要求。如果需要使用数据库，用户的系统就必须达到存储数据的配置要求。1、运行、运行 UItraDev 4的系统配置的系统配置在基本运行环境上，UltraDev4与Dreamweaver4的要求基本相同，用户只需适当地增加一些内存，即可增加数据库的连接以及数据查询和操作速度，从而提高Web开发速度。下面是运行UltraDev时的系统配置要求：中央处理器：Intel奔腾处理器（233MHz的处理速度或者更快）、奔腾处理器或其他同级别的兼容处理器。内存：64MB的RAM。硬盘空间：50MB的可用磁盘空间。其他设备：支持SVGA24色以上的显示器、鼠标和调制解调器等设备。操作系统：Windows95、Windows98、WindowsMe、带有ServicePack5的WindowsNT4.0、Windows2000、WindowsXP以及其他支持UltraDev4的操作系统。2、运行动态页面的系统配置、运行动态页面的系统配置 在UltraDev4中，实现Web应用时已包括了创建动态的页面。在网络服务器把动态的页面发送到浏览器之前，应用服务器就会在运行中处理该动态页面。为了运行动态页面，用户需要一个应用服务器，它应支持ASP、JSP或AllaireColdFusion中的任何一种或多种，能在为浏览器提交动态页面之前生成HTML源代码文件。3 3、实现数据存储的系统要求实现数据存储的系统要求无论用户创建何种Web应用程序，不进行数据的存储几乎是不可能的。对于一个数据存储量不大的程序，可以使用文本文件来实现数据的存储和读取，不过，文本的执行效率不高，也不便管理。所以，一般的Web应用程序都不采用文本来存储数据，而是利用数据库技术来存储数据。数据库的数据查询快速，管理方便，容错功能强，在Internet信息管理和应用中占有绝对的优势。对于数据库，不同的用户、不同的数据量要求，也可能有不同的选择。如果用户构建的站点规模不大，可以使用一些小型的数据库程序，例如，Microsoft Access或 Lotus Approach等。本书就是以 Microsoft Access 2000为例向大家介绍数据的使用的，因为它在进行数据库设计和管理时非常便捷，而且性能优越，帮助信息也很全面，用户很容易掌握其使用方法。如果用户构建的站点规模很大，有大量的数据等待处理，并且希望数据库非常强壮和拥有强大的容错能力，则应该安装服务器级别的数据库系统，例如 Microsoft SQL Server、Sybase、Informix和Oracle等，一般使用Microsoft SQL Server和Oracle,因为它们的功能强大，而且应用范围广，受支持程度高。7.1.3DreamweaverUltraDev工作界面工作界面当第一次启动UltraDev4时，看到如图7-1所示的窗口和面板，用户会感觉到它有别于其他许多网页创作软件。许多网页创作软件的界面拥有大量固定的菜单、工具栏和工具，使得在工作过程中真正的文档工作区域经常被压缩得很小，而UltraDev4却使用了简便、精巧、实用的工具，不同级别和经验的用户都可以根据需要有选择地定制自己所喜欢的界面，以用来提高工作效率。下面介绍一下窗口中界面元素的名称和功能：对象面板图7-1UltraDev的窗口结构1文档商口文档商口 文档窗口是UltraDev4的主工作区域，通过在文档窗口中输入文字、插入图片以及其他各种页面元素，并且进行链接设置等操作，就可以在其中创建新的Web页。当需要对已有的Web页面进行编辑等操作时，也需要在文档窗口中打开并且完成编辑工作。在文档窗口还可以快速查看当前页面的各种属性，使用标记选择器追踪HTML元素，以及设置页面尺寸等。它的显示结果同文件在测览器中显示的结果基本相同。2对象面板对象面板在对象面板上包含网页中所有可能用到的页面元素，从简单的文本、图像一直到复杂的ActiveX、交互图像，甚至网页中的隐藏对象（如非间断空格、服务器引用等），用于在文档中创建不同类型的对象。在Window菜单中选择Objects命令，就会在屏幕中显示Objects面板。3启动面板启动面板 启动面板上包含了普通用户最常使用的控制按钮，通过这些按钮，可以快速启动或关闭最常用的检视器和浮动面板。在UltraDev4中，除了Objects面板和属性面板外，最重要的就是启动面板，使用它可以快速打开一些重要窗口。一个复杂的页面创作需要经常用到这些工具，而使用装载器来管理，可以极大地提高工作效率。由于UltraDev4拥有数量众多的窗口和面板，用户也许希望其他一些窗口和面板也可以通过装载器来快速打开，这就需要自定义装载器。单击Edit菜单中的Preferences命令，可以打开Preferences对话框，在Category列表中选择Panels选项，在右边对话框中，可以在列表中通过增减相应的项目来设置装载器的按钮，如图7-2所示。单击加号按钮可以打开项目菜单，在其中选择未添加到装载器中的项目。在列表中显示的是已经添加到装载器中的项目，使用减号按钮可以将选中的项目从列表中删除。图7-2Preferences对话框4属性面板属性面板属性面板在UltraDev4中是一个十分重要的工具，使用它可以对任何页面对象进行详细的属性查看和设置。当选定页面中的某个对象时，属性面板将显示相应对象的所有属性细节。如果需要，用户可以随时对这些属性进行编辑和设置。属性面板中的内容不是固定的，它会随着选择对象的不同而变化。例如，在文档中空白区域单击，在属性面板中只会显示一些诸如格式、字体、字号等文本属性；而选择了图像对象时，将在属性面板中显示图像的尺寸、链接、替换文本的属性。选择的对象不同，则属性面板的内容也不同，如图7-3所示。图7-3不同对象下的属性面板文本的属性面板图像的属性面板表格的属性面板5可停靠浮动面板可停靠浮动面板 可停靠浮动面板是一个工具集合的控制框架，用户可以将各种浮动窗口、面板和检视器放在其中，组合成为选项卡的形式，以节省屏幕的空间，必要的时候还可以将这些浮动窗口、面板和检视器从中分离，从而成为独立的浮动面板。7.1.4DreamweaverUltraDev4的工作方式的工作方式 利用UltraDev4设计Web应用程序，不仅要对应用程序的数据流程和文件结构进行设计，而且还要掌握UItraDev4的基本工作方式，只有这样才能减少不必要的开发环节，提高应用程序的开发效率。在UltraDev4中，一个页面程序的创建应按照三个步骤来走，它们分别为：制作静态页面和定义记录集、添加和激活动态内容，以及编辑和调试Web页。1制作静态页面和定义记录集制作动态页的第一步就是创建静态页面。用户可以定置Dreamweaver所有的设计工具，然后根据页面的实际需要创建显示内容。如果在应用中使用了数据库，下一步就要定义记录集，以便从数据库中临时提取数据。应用不能直接调用数据库，它必须以记录集为中介手段。用户定义的任何记录集都要添加到数据捆绑监视器的列表中，然后用这个监视器往用户的Web页中添加动态内容。2添加和激活动态内容添加和激活动态内容在向数据捆绑监视器中添加了记录集或其他数据源之后，就可以向用户的Web页中添加动态内容，而不必考虑插入到用户的Web页中的服务器端脚本。向UltraDev4添加动态内容时，仅仅需要指明其位置和内容。3编辑和调试Web页 最后一步就是根据需要编辑和调试Web页。DreamweaverUltraDev4为用户提供了三种编辑环境：Dreamweaver传统的可视化编辑环境、UltraDev4活动数据（LiveData）编辑环境和源代码编辑环境。当然，用户还可以使用其他的ASP调试工具进行实时的跟踪调试，比如Microsoft公司的InterDev。另外，Microsoft公司还出了一个产品叫做ScriptDebuger，也是个很好用的调试工具。它甚至可以让用户单步执行脚本，实时查看变量数据。7.2 框架的创建 在UltraDev4中，专门提供了一个用于创建框架的对象面板，集成8种常用的框架，通过它们，用户可以很快完成各种框架结构的应用。另外，通过莱单，用户也可以逐步完成框架的创建。下面分别对框架的规划、创建和分割进行介绍。7.2.1框架的规划框架的规划在正式创建框架页面之前，必须对框架页面的布局和内容进行规划，以减少后期修改工作。规划框架页面可能会涉及到下列几个问题：确定页面结构。通过结构草图规划页面内框架的数量、排列方式、是否需要滚动条、框架与框架之间的距离等。通常，三框架页面是大多数人的选择。协调色彩。多框架的页面需要使用协调的背景色、文本色和链接色，尤其是链接颜色应该统一。用户应该从页面、甚至站点设计的全局出发，考虑框架内色彩的应用问题。规划初始页面。每个框架都应该有一个初始页面，简单的问候语、富有意义的图像都可以作为初始页面的内容，否则在测览器内将看到一个空白的区域。初始页面可以是以前创建的页面文件，也可以从空白页面开始，在发布站点之前，完成空白页面的编辑和填充。确定目标框架。目标框架是更换最频繁的窗口区域，可能多个链接目标都需要在此框架内打开，所以该框架应该处在醒目的位置，而且显示区域比较大，一般应占整个页面的60以上的比例空间。7.2.2创建框架创建框架要为当前页面创建框架结构，最常用的方法是使用Frames对象面板来创建。在该面板中，UltraDev4提供了8种框架结构（如图7-6所示），用户只要单击其中的框架按钮，就可以在当前页面或者插入点所在的框架中应用按钮所对应的框架结构，完成页面分割任务。例如，单击对象面板中的InsertLeftandNestedTopFrame按钮，可将当前文档窗口分割成三部分，如图7-7所示。图7-7通过Frames对象面板创建框架 图7-6Frames对象面单独使用UltraDev4提供的8种框架结构，是不能满足框架页面的创建需要的，开发人员需要结合使用它们才能创建各种各样的框架。UltraDev4不但允许用户在一个文档窗口中应用框架技术，也允许用户嵌套框架，即在单个框架中应用框架。除了Frames对象面板外，用户还可以通过三种方式来创建框架：一种是通过Insert菜单下的Frames子菜单来完成，一种是通过Modify菜单的Frameset子菜单来完成，另一种是使用Alt功能键。其中，Alt功能键的使用必须是在原有框架的基础上。如果用户要使用Alt功能键分割框架，可按住Alt功能键，将鼠标移动到框架边框处。当鼠标的形状切换成垂直状时，沿箭头指示的方向拖动鼠标，可将框架分割成上、下两个部分。当鼠标的形状切换成水平状时，沿箭头指示的方向拖动鼠标，可将框架分割成左、右两个部分。7.2.3修改框架属性修改框架属性 用户在创建框架时，UltraDev4都按照默认的内容来设置框架的大小以及其他一些属性，包括边框的有无、边框宽度、边框颜色、所选行或列的宽度、行或列宽度的度量单位等内容。为了框架的美观和统一，用户还必须对上面这些属性进行设置，下面分别进行介绍。1选择框架选择框架要对框架进行属性设置和其他操作，首先必须选择框架UltraDev4提供了两种选择框架的方法，用户可选择其中任一种方法：图7-8框架面板按住Alt功能键，单击页面内的框架。在打开的框架面板内单击框架。框架面板是UltraDev4用于管理框架的工具，执行window菜单的Frames命令或者使用CtrlF10组合键时，都将打开如图7-8所示的框架面板，当前页面的框架集及其框架的布局将显示在框架面板内。UltraDev4提供了两种选择框架集的方法，用户可执行下列操作之一：在文档窗口单击框架边框。在框架面板内单击包围框架的白色边框。无论是框架还是框架集处于选择状态时，在它的周围都将出现由圆点组成的虚线框。按住Ctrl功能键的同时，按左、右移动键时，将选择相邻的框架。按上移动键，将选择父框架集，按下移动键，将选择子框架集。2调整框架大小调整框架大小框架集由多个矩形框架组成，它们都是从简单的水平或垂直框架演变而来的，这与表格对页面的划分非常类似。对于规则的框架来说，同列的框架都具有相同的行高，或者同行的框架都具有相同的列宽。对于不规则的框架来说，较小的框架仍然是由初始框架分割而成的，较大的框架则是由初始框架合并而成的，本质上仍然可将它们看成是由行、列内的框架组成的。用户要调整单个框架的大小，将鼠标指向框架的边框（整个框架边框除外），当鼠标变成上下的箭头时，按住鼠标水平（垂直）地拖动框架的边框可对同列（行）内框架的宽度（高度）进行快速的调整。另外，在框架边框的属性面板中，用户也可以通过Column（Row）选项区域中的Value和Units值的调整来对行或列内框架的大小进行定量的设置。3设置边框设置边框边框是位于不同框架之间的分割线，与边框有关的属性包括是否显示边框、边框的宽度与边框的颜色等。用户如果要设置框架边框，首先选择它，然后打开框架边框的属性面板（如图7-9所示）来设置。其中，Borders下拉列表框用于设置是否显示边框，打开该下拉列表框，选择Yes选项时，表示以三维和灰度显示边框。选择No选项时，表示显示扁平和灰度边框。选择Default选项时，将由访问者使用的浏览器决定是否显示边框的内容。图7-9框架边框的属性面板BorderColor颜色框用于设置框架集边框的颜色，用户可直接在文本框内输入代表颜色的16进制数值，也可以打开颜色选择器选择所需的颜色。注意，只有在Borders下拉列表框内定义框架集的边框为显示状态时，在此设置的颜色才能生效。BorderWidth文本框用于设置边框的宽度，用户可直接在文本框内输入边框的数值，它的度量单位是像素。加大边框的宽度时，它们在浏览器窗口占据的位置也将增大，尤其是框架较多的情况下，显示边框往往会暄宾夺主，使页面内容在浏览器窗口处于次要的地位。因此大多数情况下，都将边框的宽度定义为1或0。4改变框架其他属性改变框架其他属性除了框架大小的调整、边框的显示状态和边框颜色之外，用户还需要设置框架的其他一些属性，例如，框架名称、滚动条、源文件、边距宽度和边距高度等内容，这些属性都出现在框架的属性面板，如图7-10所示。其中，框架名称是设置目标框架的关键，链接页面就是通过框架名称来确定打开页面内容的位置的。在FrameName文本框中，用户可以输入框架的名称，数字、字母、下划线及其组合都可以作为框架名称的组成部分。不过，UltraDev4不允许使用空格、短横（）、半角句点（）作为框架名称的组成部分，并且下划线不得出现在名称的最前端。框架名称确定了之后，就可以通过Src文本框为当前框架设置一个默认的页面文件。图7-10框架的属性面板 在框架内填充内容时，它的方法与在文档窗口添加页面内容完全相似，在内容与边框之间总是保留一定的距离，这样，不同的框架就会以间距为分割线，即使边框未出现在浏览器窗口，不同框架的页面内容仍然能够很好地加以区分。UltraDev4使用属性面板的MarginWidth文本框定义框架内容与边框之间的水平间距，MarginHeight文本框定义框架内容与边框之间的垂直间距。当框架内的内容较多时，它们占据的空间将超过框架大小覆盖的范围，这时就需要在框架的右侧添加垂直滚动条，在框架的底端添加水平滚动条。UltraDev4不仅允许用户在框架内设置滚动条，还可以根据框架内容的多少自动决定是否显示滚动条。在框架属性面板中，打开Scroll下拉列表框，确定滚动条的显示状态。选择No选项时，滚动条不会出现在浏览器窗口。选择Yes选项时，滚动条将始终显示在浏览器窗口。选择Auto选项时，表示当框架内容超过框架覆盖的区域时，将显示滚动条，否则滚动条处于隐藏状态。选择Default选项时，由访问者使用的浏览器来决定是否显示滚动条，济览器的类型不同，它对滚动条的处理方式也不同。在浏览器窗口内使用鼠标拖动页面的框架时，也能够对框架的大小进行修改。但如果在框架的属性面板内启用NoResize复选框，那么访问者修改框架大小的尝试将是无效的。7.2.4保存框架页面保存框架页面在UltraDev4中，保存框架页面比保存普通页面要复杂一些，这主要是由于框架页面是由框架集及其框架内容组成的。在保存框架页面时，不仅要保存框架的内容，还要对框架集本身进行保存。如果用户要保存框架集，可选择File菜单的SaveFrameset命令，打开SaveAS对话框，将框架集文件定位在当前站点内。需要将当前框架集进行另存处理时，可选择File菜单的saveFramsetAs命令。如果用户要保存框架内的页面时，需要将插入点定位在框架内，然后选择File菜单的Save命令，这样在打开的对话框内便可确定框架页面的名称及其路径。一次性地对框架文件、框架集文件存盘时，可选择File菜单中的SaveAll命令，UltraDev4将依次对框架集和框架内容进行保存。7.3 表单 表单是访问者与网页维护人员之间进行沟通和交流的桥梁，当访问者填写完表单数据之后，信息将被发送给ASP应用程序，由ASP应用程序分析访问者的要求，并将结果显示在浏览器窗口，或者反馈给站点所有者，并对访问者作出响应。表单是UltraDev4创建Web应用程序的重要内容。本节首先介绍表单的一些基本内容，使用户对表单有一个明确的认识，然后详细介绍表单及主要表单元素的创建方法。7.3.1表单的创建表单的创建在动态交互式网页中，表单对象是最常用的页面对象，它能够方便地收集各种所需信息，是用户与Web应用程序之间进行数据交换的重要接口。UltraDev4提供了多种创建表单的方法，在文档窗口内，执行下列方法之一时，都可以创建一张表单：选择Insert菜单的Form命令。打开Form对象面板，单击InsertForm按钮。选择Insert菜单的FormObjects选项，然后从其子菜单中选择任何一个表单元素插入命令。表单被创建之后，以红色虚线框的形式出现在文档窗口，表明表单元素的填充范围，只有出现在该区域的内容才作为表单的一部分。如果红色虚线框未显示在文档窗口内，用户可以选择View菜单中的InvisibleElements命令。在表单的边框上单击，或者将插入点移动至表单内，都将使表单处于选择状态。当用户选择表单之后，属性面板就会显示出表单的属性内容，如图7-11所示。图7-11表单的属性面板7.3.2创建文本框创建文本框 对于表单的创建，UltraDev4支持两种情况，一种是创建单行文本框，一种是创建滚动文本框。其中单行文本框用于接收简短的用户信息，滚动文本框用于接收内容较多的用户信息。下面分别介绍它们的创建过程。7.3.3创建复选框创建复选框 在Windows的对话框中，用户也许经常接触到复选框的使用，复选框允许用户在众多选项内进行多项选择，启用的复选框内将出现勾选号。一般，复选框的使用必须与说明文字相配合，访问者可根据说明文字的内容来判断是否启用复选框。图7-14设置复选框的属性7.3.5创建下拉菜单创建下拉菜单下拉菜单是对单选按钮的改进，其中的选项具有互斥的特点。相对于单选按钮，下拉菜单有优点也有缺点，优点是可将所有的选项都集中起来，只显示经常处于选择状态的选项，克服了单选按钮占用过多页面空间的缺点，节约了页面空间。缺点是不方便访问者进行快速选择。在UltraDev中，创建下拉菜单的方法也有两种，用户只要选择其中的一种即可：选择InsertFormObjectsList/Menu命令。打开对象面板，单击listMenu按钮。下拉菜单的属性包括菜单名称、初始选项和菜单数值等。菜单名称是识别下拉菜单的唯一标记，ASP应用程序是通过该名称识别不同的表单元素的。初始选项就是打开页面时，首先出现在下拉菜单的内容。当访问者将表单发送给ASP应用程序时，应用程序将根据下拉菜单的数值来判断菜单选项是否已被选中，在菜单数值与菜单选项之间存在着对应关系。要设置下拉菜单的属性，在表单中选择它，然后打开如图7-16所示的属性面板来进行，具体内容可参照下面的选项介绍。LislMenu文本框：在该文本框中设置下拉菜单的名称。Type选项区域：在该选项区域中，确认选择了Menu单选按钮。ListValues按钮：通过该按钮设置下拉菜单中的选项。用户要通过listValues按钮设置下拉菜单中的选项，可以参照下面的操作步骤：（1）在下拉菜单的属性面板中，单击listValues按钮，打开ListValues对话框。（2）单击左上角的“”按钮，然后在ItemLabel栏内输人下拉菜单的第一个选项。图7-16下拉菜单的属性面板（3）在Value栏内输人第一选项的菜单数值。（4）重复上面第（2）步到第（3）步，继续添加其他选项及其数值。（5）选项添加完毕，单击向上箭头按钮时，将使所选的菜单选项及其数值向前移动一个位置。相反地，单击向下箭头按钮时，将使所选的菜单选项及其数值向后移动一个位置。（6）要删除某个菜单选项，在选项列表中选择它，然后单击“”按钮即可。（7）单击OK按钮，返回到下拉菜单的属性面板。在个人信息表单内需要了解职称情况时，可在表单内添加“职称”下拉菜单，它包括“工人”、“初级工程师”、“工程师”、“高级工程师”和“系统工程师”5个选项，访问者可根据自身的情况，选择与自己相对应的职称选项。（1）在表单中选择下拉列表框，并打开其属性面板，如图7-17所示。图7-17设置下拉列表框的属性（2）选择Type的List单选按钮。（3）在list/Menu文本框内命名下拉列表框。（4）单击listValues按钮，打开listValues对话框，按照上面的方法确定下拉列表框的选项名称及其数值，然后单击OK按钮之后，返回属性面板。（5）在Height文本框内设置列表框选项在浏览器窗口的显示长度。（6）在Selections选项区域中，启用Allowmultiple复选框时，表示允许访问者一次选择多个选项，此时下拉列表框的作用与复选框完全相同。取消Allowmultiple复选框时，下拉列表框的作用与单选按钮相同。将Height文本框内的数值修改为1，并取消Allowmultiple复选框时，下拉列表框的作用与下拉菜单相同。7.3.7创建重置和提交按钮创建重置和提交按钮 收集数据信息是表单的主要功能，当访问者完成文本框的输入、复选框和单选按钮等的选择之后，便可对表单的内容进行检查并进行修改，最后将表单数据提交给ASP应用程序。UltraDev4提供了两个按钮未完成这项工作，其中，重置按钮用于恢复默认的表单数据，提交按钮用于以Post或Get的方式提交数据给ASP应用程序。用户在创建好用于接收信息的表单元素之后，可按照下面的步骤来创建重置和提交按钮并设置其属性：（1）将插入点置于表单中，选择InsertFormObectsButton命令，或者单击对象面板中的Button按钮，创建一个按钮。（2）选择新创建按钮，打开其属性面板，设置按钮属性，如图7-18所示。图7-18设置按钮属性（3）在ButtonName文本框内定义表单按钮的名称。（4）在lable文本框内定义表单按钮的标签。（5）在Action选项区域中，选择Submitform单选按钮，则创建的按钮为提交按钮；选择Resetform单选按钮，则创建的按钮为重置按钮。这里选择Resetform单选按钮。（6）按照前面的步骤创建第第二个按钮，并在按钮的属性面板中选择Submitform单选按钮，将按钮设置为提交按钮。7.4 应用层 随着信息时代的来临，人们对页面内容的定位、移动和显示提出了更高的要求，为引入层的概念。层是一种全新的页面定位技术，可以对其中的对象提供像素级的精确定位，并可以自由地在页面中移动。用户将对象放入到层中之后，可以控制哪些显示在前面，哪些显示在后面，哪些显示，哪些不显示。另外，配合时间轴的使用，用户还可以同时移动一个或者多个层，轻松地制作出各种动态效果。7.4.1层的基本概念层的基本概念 在层出现之前，用户可以使用表格控制页面的版面。文本、图像都可填充在表格内，它们的位置通过表格是非常容易控制的。当需要精确地控制图像时，就必须借助更加小巧的表格，而且无法改变在平面上布置对象的限制。为增强Web设计者布置版面的手段，W3C在新的CascadingStyleSheet（层叠样式表）中包括了一个特性，允许对页面上的元素进行绝对的定位。绝对定位使某个个元元素素（图图像像或或文文本本）可可以以定定位位到到页页面面上上的的任任何何位位置置，这这个个特特性性就就是是Web页页面面上上的的层层，Web页页面面上上的的层层实实际际上上是是通通过过HTML标标记记来来创创建建的的，通通过过在在标标记记中中设设置置页页面面坐坐标标，可可以以在在页页面面中中对对层层进进行行精精确确定定位位。在在UltraDev4中中，用用户户可可以以通通过过简简单单的的方方法法在在页页面面中中创创建层，而无须进行任何编码的工作。建层，而无须进行任何编码的工作。通通过过在在UltraDev4中中创创建建层层，可可以以在在页页面面中中的的任任何何位位置置插插入入精精确确定定位位的的元元素素，并并且且可可以以对对多多个个层层进进行行堆堆叠叠和和隐隐藏藏等等操操作作，还还可可以以通通过过使使用用行行为为设设置置层层的的动动画画和和交交互互效效果果，大大大大提提高高页页面面创创作作的的能能力力和质量。和质量。7.4.2层的基本操作层的基本操作 层层的的基基本本操操作作主主要要包包括括默默认认参参数数的的修修改改、层层的的创创建建、层层的的对对齐齐、嵌套、尺寸调整和位置移动等，下面分别进行介绍。嵌套、尺寸调整和位置移动等，下面分别进行介绍。1修改层的默认参数修改层的默认参数 在使用层时，都是按默认参数来设置，为了使页面中创建的在使用层时，都是按默认参数来设置，为了使页面中创建的层能够适应自己工作的需要，用户可以修改它的默认参数值。选层能够适应自己工作的需要，用户可以修改它的默认参数值。选择择EditPreference命令或按下键盘上的命令或按下键盘上的CtrlU键，打开键，打开Preferences对话框，并在对话框，并在Category列表框中选择列表框中选择Layers选项，选项，如图如图7-19所示。所示。有关层的默认设置内容主要包括以下几项：有关层的默认设置内容主要包括以下几项：Tag下拉列表框：该下拉列表框设置在创建层时使用的下拉列表框：该下拉列表框设置在创建层时使用的HTML标记。标记。Visibility下拉列表框：该下拉列表框设置创建的层默认的可见性。下拉列表框：该下拉列表框设置创建的层默认的可见性。Width和和Height文文本本框框：这这两两个个文文本本框框设设置置创创建建的的层层默默认认的的宽宽度度和和高高度度属属性。性。Backgroud选项：该选项用来指定背景颜色或者图像。选项：该选项用来指定背景颜色或者图像。Nesting复选框：启用该复选框将把新层设置为嵌入式的层。复选框：启用该复选框将把新层设置为嵌入式的层。Netscape4复选框：启用该复选框将在插入层时加人复选框：启用该复选框将在插入层时加人Resize修复程序。修复程序。图7-19设置层的默认属性2创建层创建层UltraDev4为为用用户户提提供供了了下下面面三三种种创创建建层层的的方方式式，用用户户使使用用任任何何一种都可以创建出一个新层。一种都可以创建出一个新层。选择选择InsertLayer命令，可以得到一个默认的层。命令，可以得到一个默认的层。使用使用CSSStyle选项卡可以创建一个精确定义大小的层。选项卡可以创建一个精确定义大小的层。最最直直接接的的方方法法是是从从对对象象面面板板中中单单击击“DrawLayer”按按钮钮之之后后，在在页页面上拖动出层的大小。面上拖动出层的大小。3激活与选择激活与选择 需要在层内添加文本、图像、插件、表格时，必须先激活层。需要在层内添加文本、图像、插件、表格时，必须先激活层。激活层的方法非常简单，用户只需单击层所在的区域。层被激活激活层的方法非常简单，用户只需单击层所在的区域。层被激活后，光标将停留在层中，层的边框高亮显示，此时在层的左上角后，光标将停留在层中，层的边框高亮显示，此时在层的左上角出现选择手柄（如图出现选择手柄（如图7-20所示），将鼠标指向手柄时，它的形状所示），将鼠标指向手柄时，它的形状将切换成手形，单击之后便可使激活的层处于选择状态。将切换成手形，单击之后便可使激活的层处于选择状态。如果用户需要一次性地选择多个层时，可按下列方法之一进行操作：如果用户需要一次性地选择多个层时，可按下列方法之一进行操作：按住按住Shift功能键的同时，依次单击多个层。功能键的同时，依次单击多个层。按住按住Shift功能键的同时，依次在层面板的名称列表内选择。功能键的同时，依次在层面板的名称列表内选择。当当多多个个层层被被选选中中时时，最最后后选选择择的的层层的的手手柄柄以以黑黑色色小小方方块块的的形形式式出出现现，而而在在此此之之前前选选择择的的层层手手柄柄将将切切换换成成白白色色。在在文文档档窗窗口口的的空空白白位位置置单单击击时时，将将取取消所有层的选择。消所有层的选择。4调整层的尺寸调整层的尺寸将鼠标移动到层的边框处，它的形状将切换成双向箭头，按住鼠标并进行拖将鼠标移动到层的边框处，它的形状将切换成双向箭头，按住鼠标并进行拖动即可调整层的尺寸。不过，如果要精确地定义层，必须使用键盘和属动即可调整层的尺寸。不过，如果要精确地定义层，必须使用键盘和属性面板。如果选择多个层，那么层的操作对所选的层都有效，并且这些性面板。如果选择多个层，那么层的操作对所选的层都有效，并且这些层将具有相同的高度或宽度。层将具有相同的高度或宽度。图7-20激活的层 如如果果要要使使用用键键盘盘调调整整，先先选选择择层层，然然后后按按住住Ctrl功功能能键键，每每按按一一次次光光标标移移动动键键，将将按按照照箭箭头头指指示示的的方方向向以以像像素素为为单单位位改改变变层层的的大大小小。如如果果同同时时按按住住Shift和和Ctrl功功能能键键，每每按按一一次次光光标标移移动动键键，将按照箭头指示的方向以网格为单位改变层的大小。将按照箭头指示的方向以网格为单位改变层的大小。如如果果用用户户要要使使用用属属性性面面板板来来调调整整层层的的尺尺寸寸，先先选选择择文文档档窗窗口口的的一一个个或或多多个个层层，然然后后打打开开属属性性面面板板，在在Height、Width文文本本框框内内输输入入以像素为单位的数值。以像素为单位的数值。5改变层的位置改变层的位置 选选择择层层之之后后，使使用用鼠鼠标标拖拖动动便便可可改改变变层层在在文文档档窗窗口口