软件界面实验报告_第1页
软件界面实验报告_第2页
软件界面实验报告_第3页
软件界面实验报告_第4页
软件界面实验报告_第5页
已阅读5页，还剩5页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、用户界面菜单设计：设计原则：树形结构菜单，结构简单，操作容易，对客户的技术水平没有要求，大部分人都能完成操作。色彩协调，吸引人、简单明了，方便用户输入。有普遍的可用性，可及性。代码<html><head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>Style 06 (Midnight Blue) - Menu b</title> <link type="text/css&

2、quot; href="menu.css" rel="stylesheet" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="menu.js"></script></head><body><style type="text/css"

3、>* margin:0 auto; padding:0;html background:#000; body margin:40px auto; width:560px; height:552px; overflow:hidden; background:#222;div#menu margin:40px 0 0 95px; position:absolute;div#copyright font:11px 'Trebuchet MS' color:#fff; text-align:center; clear:left; position:absolute; top:54

4、6px; width:560px;div#copyright a color:#425B7B; div#copyright a:hover color:#fff; </style><div id="menu"> <ul class="menu"> <li><a href="#" class="parent"><span>yi</span></a> <div><ul> <li><a

5、 href="#" class="parent"><span>caidan 1</span></a> <div><ul> <li><a href="#" class="parent"><span>caidan 1.1</span></a> <div><ul> <li><a href="#"><span>caida

6、n 1.1.1</span></a></li> <li><a href="#"><span>caidan 1.1.2</span></a></li> </ul></div> </li> <li><a href="#"><span>caidan 1.2</span></a></li> <li><a href="#&q

7、uot;><span>caidan 1.3</span></a></li> <li><a href="#"><span>caidan 1.4</span></a></li> <li><a href="#"><span>caidan 1.5</span></a></li> <li><a href="#"><spa

8、n>caidan 1.6</span></a></li> <li><a href="#" class="parent"><span>caidan 1.7</span></a> <div><ul> <li><a href="#"><span>caidan 1.7.1</span></a></li> <li><a href=&

9、quot;#"><span>caidan 1.7.2</span></a></li> </ul></div> </li> </ul></div> </li> <li><a href="#"><span>caidan 2</span></a></li> <li><a href="#"><span>caidan 3&l

10、t;/span></a></li> </ul></div> </li> <li><a href="#" class="parent"><span>er</span></a> <div><ul> <li><a href="#" class="parent"><span>caidan 1</span></a> &

11、lt;div><ul> <li><a href="#"><span>caidan 1.1</span></a></li> <li><a href="#"><span>caidan 1.2</span></a></li> </ul></div> </li> <li><a href="#" class="parent

12、"><span>caidan 2</span></a> <div><ul> <li><a href="#"><span>caidan 2.1</span></a></li> <li><a href="#"><span>caidan 2.2</span></a></li> </ul></div> </li>

13、; <li><a href="#"><span>caidan 3</span></a></li> <li><a href="#"><span>caidan 4</span></a></li> <li><a href="#"><span>caidan 5</span></a></li> <li><a hre

14、f="#"><span>caidan 6</span></a></li> <li><a href="#"><span>caidan 7</span></a></li> </ul></div> </li> <li><a href="#"><span>san</span></a></li> <li cl

15、ass="last"><a href="#"><span>si</span></a></li> </ul></div></div></body></html>个性化用户界面：（1） 可行性分析：实现简单，需要的成本低，并且能被很多用户接受，也有潜在的用户，具有可行性。（2） 用户分析：登陆界面的操作简单，通俗易懂，能让很多用户使用。（3） 环境分析：系统实现的硬件支持简单，界面硬件都能适应空间、光线或噪音的约束。（4） 需求分析：

16、登录系统在很多网站里都有，是被用户经常使用的一种系统。设计思路：（1） 符合的用户原则：登陆界面输入简单，能减少用户的很多操作。结构简明，容易控制，让用户产生成就感。有普遍的可用性可及性。（2） 布局设计：登陆成功之后的界面采用拐角型设计，左边是菜单栏，主次分明，结构清晰。（3） 艺术性：色彩协调，主色适宜，这个界面不突兀。登陆界面跟主界面色彩一致，风格一致，界面也注意了平衡。<html xmlns=""><head><meta http-equiv="Content-Type" content="text/htm

17、l; charset=utf-8" /><title>无标题文档</title><style type="text/css">.left float:left;.rightfloat:right;.mainheight:100%;width:100%;.dowlodingfloat:left;.inbackground-color:#9C0;.outbackground:url(bag.png);</style><script type="text/javascript"> fu

18、nction changecolor(objstr) var obj =document.getElementById(objstr); obj.className='in' function back(objstr) var obj =document.getElementById(objstr); obj.className='out' var DL=true,LC=true,DLing=true; function hid(objstr) var obj =document.getElementById(objstr); if(DL) obj.style.

19、display="none" DL=false; else obj.style.display="block"DL=true; function hidlc(objstr) var obj =document.getElementById(objstr); if(LC) obj.style.display="none" LC=false; else obj.style.display="block" LC=true; function hiddling(objstr) var obj =document.getEl

20、ementById(objstr);if(DLing) obj.style.display="none" DLing=false; else obj.style.display="block" DLing=true; </script></head><body><center><table width="1067" height="562" border="1" bordercolor="#66FFFF"> <

21、tr> <td height="67" colspan="3" background="top.png"> <div class="main" > <div class="left"><img src="kg.png" width="225" height="82" /></div> <div class="right"><img s

22、rc="tree.PNG" /></div> </div> </td> </tr> <tr> <td width="136" height="446" background="bag.png" id="left" > <div class="main"> <div id="DLM" onmousemove="changecolor('DLM&#

23、39;)" onmouseout="back('DLM')" onclick="hid('DLMBODY')" >下载管理</div> <div id="DLMBODY" > <div id="DL" onmousemove="changecolor('DL')" onmouseout="back('DL')"><img src="DL.png&

24、quot; onclick="hiddling('DLing')" /> 正在下载</div> <div id="DLing"> <div id="2" onmousemove="changecolor('2')" onmouseout="back('2')">音乐1</div> <div id="3" onmousemove="changecolor(

25、9;3')" onmouseout="back('3')">音乐1</div> </div> <div id="ALDL" onmousemove="changecolor('ALDL')" onmouseout="back('ALDL')" ><img src="ALDl.png"/> 已下载</div> <div id="1" onmo

26、usemove="changecolor('1')" onmouseout="back('1')">音乐1</div> <div id="2" onmousemove="changecolor('2')" onmouseout="back('2')">音乐1</div> <div id="3" onmousemove="changecolor('3

27、')" onmouseout="back('3')">音乐1</div> <div id="4" onmousemove="changecolor('4')" onmouseout="back('4')">音乐1</div> </div> <div id="loacllib" onmousemove="changecolor('loacllib'

28、)" onmouseout="back('loacllib')" onclick="hidlc('local')">本曲区库</div> <div id="local" > <div id="5" onmousemove="changecolor('5')" onmouseout="back('5')" >音乐1</div> <div id=&

29、quot;6" onmousemove="changecolor('6')" onmouseout="back('6')">音乐1</div> <div id="7" onmousemove="changecolor('7')" onmouseout="back('7')">音乐1</div> <div id="8" onmousemove="c

30、hangecolor('8')" onmouseout="back('8')">音乐1</div> </div> </div> </td> <td width="552" background="playing.png">&nbsp;</td> <td width="138">&nbsp;</td> </tr> <tr> <td

31、 colspan="3" background="bag.png" >&nbsp;</td> </tr></table></center></body></html>网页界面设计：网站主题为电影类界面设计从以下方面进行分析：（5） 可行性分析：可以被很多人浏览，很多人需要，成本简单，制作费用低，具有可行性。（6） 用户分析：不论用户的技能水平如何，熟练程度如何，都能快速的使用该网站，获取自己需要的信息。（7） 环境分析：支持该网站的硬件简单，界面等能满足常规的需要。（8

32、） 需求分析：电影产业逐渐发展，对电影的介绍网站也逐渐被需要，无论是看电影的人，还是电影制作方，都需要这样一个平台来实现对电影的宣传。设计思路：（4） 布局：同样采用拐角型，上方为导航区，左边为菜单栏，主次分明，结构简单。布局平衡，疏密有致。艺术的原则：整个布局很协调，也注意了平衡，布局颜色一致，搭配合理。电影海报占据整个界面很重要的地方，能突出界面主题代码<html xmlns=""><head><meta http-equiv="Content-Type" content="text/html; charset

33、=utf-8" /><title>Floral, CSS Template, Free Download</title><meta name="keywords" content="Floral, CSS Template, XHTML, Free Download" /><meta name="description" content="Floral, Free CSS Template, XHTML CSS Layout" /><link h

34、ref="templatemo_style.css" rel="stylesheet" type="text/css" /><script language="javascript" type="text/javascript">function clearText(field) if (field.defaultValue = field.value) field.value = '' else if (field.value = '') fi

35、eld.value = field.defaultValue;</script></head><body><div id="templatemo_container"> <div id="templatemo_header"> <div id="templatemo_logo"> <h1>kankan</h1></div> <div id="templatemo_menu"> <ul>

36、 <li class="current"><a href=""><b>电影</b></a></li> <li><a href="" target="_parent"><b>电视剧</b></a></li> <li><a href=""><b>微电影</b></a></li> <

37、li><a href=""><b>帮助</b></a></li> </ul> </div> <div class="cleaner"></div> </div> <div id="templatemo_content_area_top"> <div class="templatemo_left_top"> <div class="templatemo_

38、news"> <p><a href="">王的盛宴片段曝光 吕后秦岚暗战刘邦</a></p> </div> <div class="templatemo_news"> <p><a href="">电影目击者导演、制片人做客新电影传奇</a></p> </div> <div class="templatemo_news"> <p><a href=""&

人人文库> 全部分类> 应用文书 > 年终总结

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论