文档介绍：第六章情景一一B/S结构人事管理系统的
UI实现
本章主要讲解如何使用DreamweaverCS5中的框架、框架集、表单以及spry等组件。
通过制作B/S结构人事管理系统的UI界面来组织本章内容，使用四个任务驱动教学内容，具体涉及以下方框架表格中输入相
应的文字。。
^0*1
saga
必闰苜更郃门萌■息査iU
:曰itsaMaifc*隘换iw^*
.HiroMiazJiifi劭号（Q
JEM丄£空jiMSK；・-
\tvt|重lilt：加W/MfiQDMunienB/H作刃牛冋瓦用孵魔书隔血W1FEI林垢写$30列碎雄嚅衣***岭2fflt最一ESP1..0«*3JMSW-竝itHgek|•^^’..
^T1S«-S询増如部门増帀员工曾恩
，亨遁力于机丰陆暹也研境，笠产与昭各！他:，并正在向栗研旨中匕、±曲国阿型汽车刨追栗团飞速眉闻
随若隼团的壮丸酋了奁于管理，我旳退荷了上辜琶理站湖幵址耳悝用，曲玉蛛设卄目的毬是惊了也企业管理更柿僅捷和方便.
*A
图6-1-8最终效果
选择“文件”菜单，单击“新建”选项，在弹出的对话框中选择“实例中的页”选项卡，单击右侧“框架页”选项，从右侧“示例页”下方选项中选择“上方固定”的框架集，单击右下角“创建”按钮，如图6-1-9所示。
图6-1-9创建框架集
♦点击“文件”菜单，点击“保存全部”，将所做的框架集进行保存。将上方框架命
,。。
♦将光标停放在顶部框架上，点击窗口下方的“页面属性”按钮，在弹出的对话框中
将“上边距”、“下边距”，“左边距”，“右边距”的值均设置为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和资本逗菅中心为一低的国际型帖制暄集团飞馥展|
:s75审团代廿*、亠「便十阳里T人爭管邊'嘶*L：、汁土£十，變企业宜理H加朗匕：5ff.
tffBa£it)aicfi-infti'iHE匚：ts号灼H険
j比址「电fte^Q/My強aJDmjmaits口:悴文弁風页啊昨腮节厲］i［册蝕;H昨％ZCflJ戡jg腐心％'.XX瞳己
［■衞上丘出才*k|