人机交互-任务4：图形交互界面的设计(web)

霜shuang.

于 2022-01-10 15:49:21 发布

阅读量5.3k

点赞数 4

文章标签：交互 html

本文链接：https://blog.csdn.net/weixin_45367076/article/details/122412026

版权

文章目录

一、题目
二、实验内容
三、方案设计
四、实验步骤与过程
五、实验结果与分析
完整项目+成品下载

一、题目

目的
(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>&nbsp;    </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="&#160;登&#160;录&#160;" 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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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">&nbsp;&nbsp;&nbsp;&nbsp;其它链接：
  <a href="">国家铁路局</a> | 
  <a href="">沈阳站服务中心</a> | 
  <a href="">局内其它站点服务中心</a></div>
      <div class="foot_bleft">
        中国铁路沈阳局集团有限公司<br>
          地址 : 沈阳市和平区太原北街4号 <br>
          电话：024-8888888
  </div>
</div>