建立UI界面及框架.docVIP

第六章 情景一—B/S结构人事管理系统的UI实现 本章主要讲解如何使用Dreamweaver CS5中的框架、框架集、表单以及spry等组件。通过制作B/S结构人事管理系统的UI界面来组织本章内容，使用四个任务驱动教学内容，具体涉及以下内容： 建立UI界面的框架 制作系统的功能界面 制作目录页面 链接页面 6.1 任务一：建立UI界面的框架 使用框架技术可以将浏览器页面分割成若干个子窗口，每个子窗口内都显示出一个独立的网页，我们称这样的每个子窗口为一个单个框架（Frame）。当一个页面被划分为若干个单个框架时，我们称这些单个框架组成了一个框架集（Frameset）。此时Dreamweaver会为框架集建立一个框架集文件，为每个框架分别建立一个文档文件。 6.1.1 知识要点 1．创建框架 （1）插入预定义框架集 Dreamweaver为我们提供了13中预定义的框架集供我们选择。使用系统提供的预定义框架集是迅速创建基于框架布局的网页的最简单方法。创建预定义框架集的具体步骤如下。 选择“文件”菜单，单击“新建”选项，在弹出的对话框中选择“实例中的页”选项卡，单击右侧“框架页”选项，从右侧“示例页”下方选项中选择“上方固定，左侧嵌套”的框架集，如图6-1-1所示。 单击右下角“创建”按钮，在“框架标签辅助功能”窗口中我们可以为每个框架完成相应操作，如图6-1-2所示。然后点击“确定”，如图6-1-3所示。 图6-1-1 “新建文档”对话框 图6-1-2 “框架标签”对话框 图6-1-3 预定义框架 （2）修改框架集结构 我们已经完成了基本的框架集的建立，如果我们想要做出更为复杂的框架集结构就需要修改框架集结构，具体步骤如下。 光标停留在要修改的框架集的空白位置，点击“修改”菜单，选择“框架集”选项，在弹出的子菜单中共有四项命令，如图6-1-4所示。 读者可以试着选择任意一种，用鼠标调整框架窗口的大小。灵活的使用修改框架集命令，可以使我们的页面布局更加丰富多变，更符合我们用户不同种类的需求。 图6-1-4 修改框架集 2．保存框架和框架文件 当我们完成了框架集的设置之后，我们可以选择“文件”菜单中的“保存全部”来对文件进行保存。执行该命令后，将保存框架集中的所有文档，包括框架集文件和所有框架中调用的文档。 保存时Dreamweaver会先保存框架集文件，我们可以自己设定框架集的名字，单击“保存”按钮即可保存。然后Dreamweaver会对每个框架中的文档进行保存。要注意，保存时当前即将被保存的框架会被以粗框着重显示，如图6-1-5所示。 图6-1-5 保存框架集 3．设置框架和框架集属性 当我们选中框架（框架集）时，在文档窗口的下方会出现框架（框架集）的属性面板，属性面板的具体参数如下。 （1）框架属性面板如图6-1-6所示 图6-1-6 框架属性面板 框架名称：作为链接指向时所用的名称。