第6章情景6———BS结构人事管理系统的UI实现论述.ppt

 本章主要讲解如何使用Dreamweaver CS5中的框架、框架集、表单以及spry等组件。通过制作B/S结构人事管理系统的UI界面来组织本章内容，使用四个任务驱动教学内容，具体涉及以下内容： 建立UI界面的框架 制作系统的功能界面 制作目录页面 链接页面 6.1 任务一：建立UI界面的框架 使用框架技术可以将浏览器页面分割成若干个子窗口，每个子窗口内都显示出一个独立的网页，我们称这样的每个子窗口为一个单个框（Frame）。 当一个页面被划分为若干个单个框架时，我们称这些单个框架组成了一个框架集（Frameset）。此时Dreamweaver会为框架集建立一个框架集文件，为每个框架分别建立一个文档文件。 6.1.1 知识要点 1．创建框架 （1）插入预定义框架集 （2）修改框架集结构 2．保存框架和框架文件 3．设置框架和框架集属性 （1）框架属性 框架名称：作为链接指向时所用的名称。 源文件：本框架内默认显示的源文件的路径，确定 了本框架的源文档。 边框：用来设置当前框架的边框。 滚动：用来设置当框架内的内容在本框架中显示不下时是 否是用滚动条。 不能调节大小：当点选了本单选框时，访问者无法通过拖 动框架边框在浏览器中调 节框架的大小。 6.1.1 知识要点 边框颜色：用来设置与当前边框相邻的所有边框 的颜色。 边界宽度：用来设置边框和内容之间的左右距离 （单位为px）。 边界高度：用来设置边框和内容之间的上下距离 （单位为px）。 （2）框架集属性 边框：用来设置在浏览器中是否显示框架集的边框。 边框颜色：用来设置框架集的边框颜色。 边框宽度：用来设置框架集的边框宽度（单位：px）。 单位：行、列尺寸的值的单位，具体是行还是列由框 架集的结构决定。 6.1.2工作任务与设计效果 使用所学的框架技术知识完成某公司人事管理系统的UI界面的框架布局，具体要求如下： 1、使用框架集将窗 口分成上下两个部分。 2、在上、下两层框 架中各插入一个表格。 3、在上层框架的表 格中插入两张图片，并 在下方框架表格中输 入相应的文字。。 6.1.5工作任务总结 在这个任务中利用Dreamweaver CS5中的预定义框架集进行了网页的布局，这个工作是网站制作中非常常见的基本任务。通过这个任务能够很好的训练网页布局的能力，在我们现实工作中，框架和表格结合使用才能构造出比较精美的网页布局来，希望各位读者能够多加练习。下一节课我们会在本节课制作的网页基础上制作出表单网页。 6.2 任务二：制作系统的功能界面 一般来说我们制作网页有两个目的，一是让访问者能够从我们的网页中获得信息，二是通过网页访问者可以将他的信息传递给我们或其他访问者。使用Dreamweaver提供的表单功能就可以收集网站访问者的信息，比如注册信息、反馈信息等。表单具有两个重要组成部分：一是用来描述表单的html代码；二是用来处理用户在表单域中输入的服务器端应用程序客户端脚本，常见的有asp和CGI等。本节我们将利用表单技术制作人事管理系统的两个功能界面。 6.2.1 知识要点 1、表单域 每一个表单都是由一个表单域和若干个表单元素组成的，这些表单元素又都必须放在表单域中才会生效，因此，制作表单时必须先创建一个表单域。 表单域属性： 表单ID：标识本表单的唯一名称。 动作：设置处理该表单的动态页或脚本的路径。 6.2.1 知识要点 目标：设置经过动态页或脚本处理后的结果页显示的位置。 方法：选择将表单数据传输到服务器的传送方式。 常见的表单域中的选项： 单行文本域、多行文本域、密码域、单选按钮、复选框、单选按钮组、复选框组、列表、菜单、图片域、文件域、隐藏域等。 6.2.2 工作任务和设计要点 使用Dreamweaver