整理建立UI界面的框架

1、第六章情景一一B/S结构人事治理系统的UI实现本章主要讲解如何使用 Dreamweaver CS5中的框架、框架集、表单以及spry等组件.通过制作B/S结构人事治理系统的 UI界面来组织本章内容,使用四个任务驱动教学内容, 具体涉及以下内容：建立UI界面的框架制作系统的功能界面制作目录页面链接页面6.1 任务一：建立 UI界面的框架使用框架技术可以将浏览器页面分割成假设干个子窗口,每个子窗口内都显示出一个独立的网页,我们称这样的每个子窗口为一个单个框架Frame.当一个页面被划分为假设干个单个框架时,我们称这些单个框架组成了一个框架集Frameset.此时Dreamweaver会为框架集建立

2、一个框架集文件,为每个框架分别建立一个文档文件.6.1.1 知识要点1 .创立框架1插入预定义框架集Dreamweaver为我们提供了 13中预定义的框架集供我们选择.使用系统提供的预定义 框架集是迅速创立基于框架布局的网页的最简单方法.创立预定义框架集的具体步骤如下.选择“文件菜单,单击“新建选项,在弹出的对话框中选择“实例中的页选 项卡,单击右侧“框架页选项,从右侧“例如页下方选项中选择“上方固定, 左侧嵌套的框架集,如图 6-1-1所示.单击右下角“创立按钮,在“框架标签辅助功能窗口中我们可以为每个框架完成相应操作,如图6-1-2所示.然后点击“确定,如图6-1-3所示.图6-1-1 “

3、新建文档对话框图6-1-2 “框架标签对话框图6-1-3预定义框架(2)修改框架集结构我们已经完成了根本的框架集的建立,如果我们想要做出更为复杂的框架集结构就需要修改框架集结构,具体步骤如下.光标停留在要修改的框架集的空白位置,点击“修改菜单,选择“框架集选项,在弹出的子菜单中共有四项命令,如图6-1-4所示.读者可以试着选择任意一种,用鼠标调整框架窗口的大小.灵活的使用修改框架集命令,可以使我们的页面布局更加丰富多变,更符合我们用户不同种类的需求.图6-1-4修改框架集1.1.1 .保存框架和框架文件当我们完成了框架集的设置之后,我们可以选择“文件菜单中的“保存全部来对文件进行保存.执行该命

4、令后,将保存框架集中的所有文档,包括框架集文件和所有框架中调用的文档.保存时Dreamweaver会先保存框架集文件, 我们可以自己设定框架集的名字,单击“保存按钮即可保存.然后 Dreamweaver会对每个框架中的文档进行保存.要注意,保存时当前即将被保存的框架会被以粗框着重显示,如图6-1-5所示.图6-1-5保存框架集1.1.2 架和框架集属性当我们选中框架框架集时,在文档窗口的下方会出现框架框架集的属性面板, 属性面板的具体参数如下.1框架属性面板如图 6-1-6所示图6-1-6框架属性面板框架名称：作为链接指向时所用的名称.源文件：本框架内默认显示的源文件的路径,确定了本框架的源文

5、档.边框：用来设置当前框架的边框.滚动：用来设置当框架内的内容在本框架中显示不下时是否是用滚动条.不能调节大小：当点选了本单项选择框时,访问者无法通过拖动框架边框在浏览器中调 节框架的大小.边框颜色：用来设置与当前边框相邻的所有边框的颜色.边界宽度：用来设置边框和内容之间的左右距离单位为px.边界高度：用来设置边框和内容之间的上下距离单位为px.2框架集属性面板如图 6-1-7所示流肥.二团典 v 叫况孰：It值注寻5国图6-1-7框架属性面板边框：用来设置在浏览器中是否显示框架集的边框.边框颜色：用来设置框架集的边框颜色.边框宽度：用来设置框架集的边框宽度单位：px.单位：行、列尺寸的值的单

6、位,具体是行还是列由框架集的结构决定.1.1.3 工作任务与设计效果使用所学的框架技术知识完成某公司人事治理系统的UI界面的框架布局,如图 6-1-8所示.具体要求如下：1、使用框架集将窗口分成上下两个局部.2、在上、下两层框架中各插入一个表格.3、在上层框架的表格中插入如图6-1-8所示的两张图片,并在下方框架表格中输入相应的文字.等I r-uvrul T C图6-1-8最终效果1.1.4 建立UI界面的框架选择“文件菜单,单击“新建选项,在弹出的对话框中选择“实例中的页选项卡,单击右侧“框架页选项,从右侧“例如页下方选项中选择“上方固定的框架集,单击右下角“创立按钮,如图 6-1-9所示.

7、图6-1-9创立框架集点击“文件菜单,点击“保存全部 ,将所做的框架集进行保存.将上方框架命名为top.html ,下方框架命名为bottom.html o将框架集文件命名为index.html.1.1.5 设置框架属性将光标停放在顶部框架上,点击窗口下方的“页面属性按钮,在弹出的对话框中将“上边距、“下边距,“左边距,“右边距的值均设置为0,如图6-1-10所示,然后将光标停留在底部框架上,将边距也设置为0.如图6-1-10设置页面边距将光标置于顶层框架中, 选择“插入菜单中的“表格命令,在弹出的对话框中,将“行数设置为2, “列数设置为1, “边框粗细设置为0像素,“单元格边距和“单元格间

8、距均设置为0.如图6-1-11所示.图6-1-11插入表格框架集 行： 列：边废I是那 边植霞色星#FFDODO |边框重度0值. 单位0£)行. I像素2£锻范围图6-1-12设置框架集属性选中框架集,设置窗口下方的“边框下拉菜单的选项为“是,“边框颜色设置为红色,“边框宽度设置为 0.如图6-1-12所示.选中顶层框架中的表格,将表格宽度设置为1024,并将“对齐选项设置为居中对齐.如图6-1-13所示.行卬匚 依01玷通索T曜充®口 I对齐®耕邂 力gp|je j 到©匚二间距边框list.png ,然后选中下层图6-1-13设置表格格式

9、选中顶层框架中的表格中的上层表格插入素材文件夹中的表格插入素材文件夹中的banner.jpgo调整图片的宽度和高度,结果如图 6-1-13所示.图6-1-14在顶层框架表格中插图选中下层框架.选择“插入菜单中的“表格命令,在弹出的对话框中,将“行数设置为1, “列数设置为1, “边框粗细设置为0像素,“单元格边距和“单元格间距均设置为 0,设置表格宽度为 1024.如图6-1-15所示.图6-1-15在下层框架中插入表格图6-1-16设置下层框架中表格属性选中下层框架中的表格.设置窗口下方“属性选项卡中的“宽为1024,设置“对齐为“居中对齐,设置“边框值为 2.如图6-1-16所示.在下层框架的表格中输入如图6-17所示文字,并将文字颜色设置为蓝色, 点击“文件菜单中的“保存全部选项,点击工具栏中的“在浏览器中预览,即可看到完成的页面.图6-1-17最终效果1.1.6 工作任务总结在这个任务中利用