文档介绍:第六章情景一—B/S结构人事管理系统UI实现本章主要讲解如何使用DreamweaverCS5中框架、框架集、表单以及spry等组件。通过制作B/S结构人事管理系统UI界面来组织本章内容,使用四个任务驱动教学内容,具体涉及以下内容::建立UI界面框架使用框架技术可以将浏览器页面分割成若干个子窗口,每个子窗口内都显示出一个独立网页,我们称这样每个子窗口为一个单个框架(Frame)。当一个页面被划分为若干个单个框架时,我们称这些单个框架组成了一个框架集(Frameset)。此时Dreamweaver会为框架集建立一个框架集文件,为每个框架分别建立一个文档文件。(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-,我们可以选择“文件”菜单中“保存全部”来对文件进行保存。执行该命令后,将保存框架集中所有文档,包括框架集文件与所有框架中调用文档。保存时Dreamweaver会先保存框架集文件,我们可以自己设定框架集名字,单击“保存”按钮即可保存。然后Dreamweaver会对每个框架中文档进行保存。要注意,保存时当前即将被保存框架会被以粗框着重显示,如图6-1-5所示。图6-1-(框架集)时,在文档窗口下方会出现框架(框架集)属性面板,属性面板具体参数如下。(1)框架属性面板如图6-1-6所示图6-1-6框架属性面板框架名称:作为链接指向时所用名称。源文件:本框架内默认显示源文件路径,确定了本框架源文档。边框:用来设置当前框架边框。滚动:用来设置当框架内内容在本框架中显示不下时是否是用滚动条。不能调节大小:当点选了本单选框时,访问者无法通过拖动框架边框在浏览器中调节框架大小。边框颜色:用来设置与当前边框相邻所有边框颜色。边界宽度:用来设置边框与内容之间左右距离(单位为px)。边界高度:用来设置边框与内容之间上下距离(单位为px)。(2)框架集属性面板如图6-1-7所示图6-1-7框架属性面板边框:用来设置在浏览器中是否显示框架集边框。边框颜色:用来设置框架集边框颜色。边