文章目录
- 一、 题目
- 二、 实验内容
- 三、 方案设计
- 四、 实验步骤与过程
- 五、 实验结果与分析
- 完整项目+成品下载
一、 题目
- 目的
(1) 使用掌握的计算机语言完成图形界面的设计，熟悉图形用户界面设计的原则并运用到设计中。
(2) 通过用户友好界面的设计，使学生深刻体会到以用户为中心的界面设计的重要性，提高独立完成界面设计的能力，为今后诸多课程设计打下一定的基础。 - 步骤
(1) 图形界面的设计可使用学过的语言来实现，可选VC++、C#、Web开发技术等。学生自选题目开发。图形界面设计包括颜色的使用、图标的设计、按钮的设计、屏幕布局的设计、菜单界面的设计、填表输入界面的设计等。Web界面设计包括界面规划、内容、风格与布局、色彩设计、多媒体元素设计等……省略
二、 实验内容
任务2：图形界面的设计可使用学过的语言来实现，可选Java，VB等语言开发。学生自选题目开发。图形界面设计包括颜色的使用、图标的设计、按钮的设计、屏幕布局的设计、菜单界面的设计、填表输入界面的设计等。界面设计包括界面规划、内容、风格与布局、色彩设计、多媒体元素设计等。
三、 方案设计
任务2 图形界面的设计
(1) 功能设计：运用html制作一个列车员管理系统的web页面。页面包含9个区域：顶部图片、导航栏搜索栏、可视化数据统计表、登录框、公告栏、功能列表、其它功能、其它链接、底部说明，使用css将各功能块分配合理的位置。根据需求分析，我们把系统分为3大功能模块：班组信息管理、列车员信息管理、登录。
(2) 系统功能列图如下：
(3) 开发工具：Adobe Dreamweaver
四、 实验步骤与过程
任务2 图形界面的设计
<style type="text/css">
body {background-color: #5292c6;
}
#menu {background-color: #00508A;height: 30px;width: 960px;margin-top: 0px;margin-right: auto;margin-bottom: 0px;margin-left: auto;
}
</style>......<div id="head">
<img src="./铁路沈阳局列车员管理系统_files/toutu.jpg" width="960" height="150"><span style="color:#FF0000">
</div>
......<div id="menu"><ul id="MenuBar1" class="MenuBarHorizontal"><li><a href="">首页</a></li><li><a href="" class="MenuBarItemSubmenu">组织结构</a></li><li><a class="MenuBarItemSubmenu" href="">信息公开</a></li><li><a href="" class="MenuBarItemSubmenu">监管履职</a> </li><li><a href="">专题专栏</a></li></ul><div class="nav_ss"><form method="post" action=""><input type="text" name="keys" class="nav_input"><input type="submit" name="btn" value="" class="nav_btn"></form></div>
</div>......<div id="AAAAm"><div id="TabbedPanels1" class="TabbedPanels"><ul class="TabbedPanelsTabGroup"><li class="TabbedPanelsTab TabbedPanelsTabSelected" tabindex="0">列车员登录</li><li class="TabbedPanelsTab" tabindex="0">领导组登录</li><li class="TabbedPanelsTab" tabindex="0">管理员登录</li>
</ul><div class="TabbedPanelsContentGroup"><div class="TabbedPanelsContent TabbedPanelsContentVisible" style="display: block;"><form id="f" onsubmit="return chkForm(this)" method="post" name="f" action="">
<div class="search_bgimg"><p> </p><p><select style="WIDTH: 100px" class="option" size="1" name="strSearchType"> <option selected="" value="title">驾驶员</option> <option value="author">服务岗位</option> <option value="keyword">监管岗位</option> </select> <select style="WIDTH: 100px" class="option" size="1" name="match_flag"> <option selected="" value="forward">动车类</option> <option value="full">列车类</option> <option value="any">高速铁路类</option></select> <input id="historyCount" value="1" type="hidden" name="historyCount"> <input name="strText" id="strText" style="WIDTH: 34%" size="90" maxlength="10"> <input class="btn btn-primary" value=" 登 录 " size="30" type="submit"><br>
</p><p></p></div></form> </div>......<div id="rightda"><div id="right1"><img src="./铁路沈阳局列车员管理系统_files/gongneng.jpg" width="120" height="30" align="absbottom"></div><div id="rightn"><img src="./铁路沈阳局列车员管理系统_files/tb.jpg" width="25" height="25" align="absbottom"><a href="">健康打卡</a><br></div><div id="rightn"><img src="./铁路沈阳局列车员管理系统_files/tb.jpg" width="25" height="25" align="absbottom"><a href="">车次表查询</a></div>
......<div id="BBBB"><div id="BBBBl"><div id="BBBBlt"><img src="./铁路沈阳局列车员管理系统_files/gonggao.jpg" width="80" height="30" align="absbottom"> </a></div><div id="BBBBlb"><div class="neironggg"><a href="" title="2021年1季度铁路专用设备行政许可企业监督检查情况通报" color="#FF0000"><img src="./铁路沈阳局列车员管理系统_files/qiangg.jpg" width="10" height="25"><span style="color:#FF0000"> 2021年1季度铁路专用设备行政许可企业监督检查情况通报</span></a><br><a href="" title="列车员打卡通知" color="#FF0000"><img src="./铁路沈阳局列车员管理系统_files/qiangg.jpg" width="10" height="25"><span style="color:#FF0000"> 列车员打卡通知</span></a><br><a href="" title="铁路局关于疫情防控期间延长铁路专用设备行政许可有效期的通知" color="#FF0000"><img src="./铁路沈阳局列车员管理系统_files/qiangg.jpg" width="10" height="25"><span style="color:#FF0000"> 铁路局关于疫情防控期间延长铁路专用设备行政许可有效期的通知</span></a><br><a href="" title="" color="#FF0000"><img src="./铁路沈阳局列车员管理系统_files/qiangg.jpg" width="10" height="25"><span style="color:#FF0000"> 八部门印发指导意见推动配备交通医疗急救箱！</span></a><br></div></div></div>......<div id="BBBBm"><div id="BBBBm1"><img src="./铁路沈阳局列车员管理系统_files/bgkg.jpg" width="30" height="30" align="absbottom">班组信息管理</div><div id="BBBBm2"><div class="neirong"><img src="./铁路沈阳局列车员管理系统_files/qian.jpg" width="10" height="30"><a href="" title="班组信息添加">班组信息添加</a><br><img src="./铁路沈阳局列车员管理系统_files/qian.jpg" width="10" height="30"><a href="" title="班组信息维护">班组信息维护</a><br><img src="./铁路沈阳局列车员管理系统_files/qian.jpg" width="10" height="30"><a href="" title="班组信息查询">班组信息查询</a><br></div></div></div>......<div id="foot"><div class="foot_top"> 其它链接：<a href="">国家铁路局</a> | <a href="">沈阳站服务中心</a> | <a href="">局内其它站点服务中心</a></div><div class="foot_bleft">中国铁路沈阳局集团有限公司<br>地址 : 沈阳市和平区太原北街4号 <br>电话：024-8888888</div>
</div>五、 实验结果与分析
通过css代码排布各功能模块布局紧凑合理，html添加信息，首页整体对用户友好，设计美观实用，功能完善。网站共有6个
标签。
完整项目+成品下载
完整项目+成品程序下载
