1 / 12
文档名称:

建立UI界面的框架.docx

格式:docx   大小:652KB   页数:12页
下载后只包含 1 个 DOCX 格式的文档,没有任何的图纸或源代码,查看文件列表

如果您已付费下载过本站文档,您可以点这里二次下载

分享

预览

建立UI界面的框架.docx

上传人:niupai21 2022/5/15 文件大小:652 KB

下载得到文件列表

建立UI界面的框架.docx

文档介绍

文档介绍:第六章情景一一B/S结构人事管理系统的
UI 实现
本章主要讲解如何使用 Dreamweaver CS5 中的框架、框架集、表单以及 spry 等组件。
通过制作B/S结构人事管理系统的UI界面来组织本章内容,使用四个任务驱动教学内容
所示。具体要求如下:
1、 使用框架集将窗口分成上下两个部分。
2、 在上、下两层框架中各插入一个表格。
3、 在上层框架的表格中插入如图6-1-8 所示的两张图片,并在下方框架表格中输入相
应的文字。。
^0*1
saga
必闰苜更 郃门萌■息査iU
:曰itsaMaifc * 隘 换 iw^ *
.Hiro Mia zJiifi 劭号(Q
JEM 丄£ 空 jiMSK;・ -
\tvt |重lilt:加W/MfiQDMunienB/H作刃牛冋瓦用孵魔书隔血W1FEI林垢写$30列碎雄嚅衣***岭2fflt最一ESP1 .. 0«*3J MS W -竝 itHge k | • ^ ^ ’ ..
^T1S«-S询 増如部门 増帀员工曾恩
,亨遁力于机丰陆暹也研境,笠产与昭各!他: 车制造行业中有了一罡茁声誉,并正在向栗研旨中匕、±曲国阿型汽车刨追栗团飞速眉闻
随若隼团的壮丸 酋了奁于管理,我旳退荷了上辜琶理站湖幵址耳悝用,曲玉蛛设卄目的毬是惊了也企业管理更柿僅捷和方便.
*A
图 6-1-8 最终效果

选择“文件”菜单,单击“新建”选项,在弹出的对话框中选择“实例中的页”选 项卡,单击右侧“框架页”选项,从右侧“示例页”下方选项中选择“上方固定” 的框架集,单击右下角“创建”按钮,如图6-1-9所示。
图 6-1-9 创建框架集
♦点击“文件”菜单,点击“保存全部”,将所做的框架集进行保存。将上方框架命
1, 1。。
设置框架属性
♦ 将光标停放在顶部框架上,点击窗口下方的“页面属性”按钮,在弹出的对话框中
将“上边距”、“下边距”,“左边距”,“右边距”的值均设置为0,如图6-1-10所示,
然后将光标停留在底部框架上,将边距也设置为0。
如图 6-1-10 设置页面边距

♦ 将光标置于顶层框架中,选择“插入”菜单中的“表格”命令,在弹出的对话框中
将“行数”设置为 2,“列数”设置为1,“边框粗细”设置为 0像素,“单元格边距” 和“单元格间距”均设置为0。如图 6-1-11所示。
图 6-1-11 插入表格
行202
边ts颤色 c〕K| |#FF0000
单位也)
像素
图 6-1-12 设置框架集属性
♦选中框架集,设置窗口下方的“边框”下拉菜单的选项为“是”“边框颜色”设置 为红色,“边框宽度”设置为0。如图 6-1-12 所示.

♦ 选中顶层框架中的表格,将表格宽度设置为 1024,并将“对齐”选项设置为居中 对齐。如图 6-1-13 所示。
图 6-1-13 设置表格格式
♦,然后选中下层
。调整图片的宽度和高度,结果如图6-1-13所
wn
示。
n*
舍司諫
图 6-1-14 在顶层框架表格中插图
选中下层框架。选择“插入”菜单中的“表格”命令,在弹出的对话框中,将“行 数”设置为1 ,“列数”设置为1 ,“边框粗细”设置为0 像素,“单元格边距”和“单 元格间距”均设置为 0,设置表格宽度为1024。如图 6-1-15 所示。
图 6-1-15 在下层框架中插入表格
图 6-1-16 设置下层框架中表格属性
♦选中下层框架中的表格。设置窗口下方“属性”选项卡中的“宽”为1024,设置
“对齐”为“居中对齐”,设置“边框”值为2。如图6-1-16所示。
♦ 在下层框架的表格中输入如图6-17 所示文字,并将文字颜色设置为蓝色,点击“文
件”菜单中的“保存全部”选项,点击工具栏中的“在浏览器中预览”,即可看到 完成的页面。
巒旬首天 部门舊鵲査制 员工骑亂査询 rt加需门
& 日症工flIJM武*監SWKMF *
丰备司施立于:忖坪,本背司卸確于:帕舛,专址孜力于汽辛的设计-硏发,主严与销冒•经过塞年发腐-本盘可己頁相当大的赳帳,衽汽 车制酋行业中有了1定耨鬻 并正在向Jft研站卩良 制泄中心 零售中I和资本逗菅中心为一低的国际型帖制暄