人机交互技术报告

1、人机交互技术结课作品报告文件状态文件标识In dex.html草稿当前版本2.0V正式发布作者赵嘉鹏冯雪琪正在修改完成日期2017.12.25电子科技大学信息与软件工程学院2017人机交互技术报告版本历史版本/状态作者参与者起止日期备注1.0赵嘉鹏冯雪琪2017.12.05-2017.12.15无法实现图片轮播2.0赵嘉鹏冯雪琪2017.12.15-2017.12.25功能实现22017人机交互技术报告目录01文档介绍402文档目的403项目背景404参考文献405术语与缩写解释41系统需求52系统设计53系统实现94系统测试1632017人机交互技术报告01文档介绍本文档的主要内容是介绍设计

2、一个名为“里程”的篮球俱乐部网页的具体流程及步骤， 主要包括网页的系统需求，系统设计，系统实现和系统测试等内容。02文档目的编写此文档的主要目的是将关于“里程”篮球俱乐部网页设计的基本步骤以及设计思路清楚明了的展现出来，更加简洁明了的展现在设计初期，中期和后期我们所遇到的问题以及相关的解决方法，展现我们组的同学对所运用知识的熟悉程度和掌握程度，也让自身对网页设计的整体流程更加清楚。03项目背景（1）项目的提出原因为了大众和广大篮球爱好者能够更加了解里程俱乐部，更方便的了解里程俱乐部的新闻以及相关安排，我们决定给实现一个关于“里程”篮球俱乐部的网页项目。（2）项目的技术背景本学期，我们小组成员在

3、人机交互课堂上学习到了许多交互设计的原则和技术，并且了解并且掌握了利用HTML+CSS+JS开发前端网页的技术。此项目便是我们将人机交互课堂上所学习到的知识运用到现实场景中开发出的产品。04参考文献1 菜鸟教程-HTML 教程2 菜鸟教程-CSS 教程3 菜鸟教程-JS教程05术语与缩写解释术语/缩写解释JSJavaScript42017人机交互技术报告52017人机交互技术报告1系统需求系统的功能结构框图如下所示:”里程“篮球俱乐部网诘系统竞技从页面-W刃E 0廿r 竞技队球员凤采轮播.赛乏比赛安押I 近期比赛结架-球忖名瞧及信息丄 教练名单及信la一r 业余陆风采轮播; PR rl E.H

4、 J 纟图1.1里程网站系统结构图戕余陆/l-lf-lL 业左甌庶叱U介业余从近期妄41俱乐部文化介紹在为“里程”篮球俱乐部设计的网页中，必须要包含1俱乐部的宗旨，文化，历史 2.竞技队的基本信息（教练团队，全体成员等），比赛安排，赛场风采，比赛结果等信息3.业余队的基本信息，比赛安排，聚会或活动安排等信息4.俱乐部经营的衍生产品信息。页面结构深度要求为两级（必要时可以达到三级）。界面最好达到简洁美观的效果，可以使用一些图片，使用的视觉元素需要考虑版权问题。应该主动运用所学到的人机交互设计原则和技术，使用 HTML+CSS+JS技术进行前端开发。2系统设计根据系统需求，我们将网页分为六个部分，

5、其中考虑到网页设计的通用规则，我们将六个页面的头部设计成一样的样式，使网页看起来更加像是一个整体。第一部分：首页（1 ）界面设计（草图）押林百快補岸加纳VB4BMWE- 5Evb.lt. .-.匸 &3a3vaTkiaiIB理111TIHCMH/ 咽哥寸o旳黑於H似屋Y卜xoCXI2017人机交互技术报告图3.5里程/历史界面152017人机交互技术报告#2017人机交互技术报告啊，专卫衣#2017人机交互技术报告#2017人机交互技术报告图3.6里程/周边界面(2)主要功能实现的核心代码网站导航栏以及标志展示以及搜索栏实现的html代码:里程 / 无篮球不兄弟 首页 v/li 里程/竞技队里

6、程/业余队里程 / 文化 v/spanv/a 里程 / 历史 v/spanv/av/li 里程 / 周边 v/spanv/li &n bsp;url(images/search-bg.gif)style=backgrou nd:vform actio n=# method=post ti tle=Search /实现图片轮播的html代码： 球员风采球员风采球员风采球员风采球员风采 &n bsp;12345&n bsp;实现图片轮播的js代码：fun cti on mycarousel_ in itCallback(carousel) $(.slider- nav a).bi nd(click

7、, fun ctio n() carousel.scroll(jQuery.jcarousel.i ntval(jQuery(this).text(); return false;);162017人机交互技术报告；fun cti on mycarousel_itemFirst In Callback(carousel, item, idx, state) $(.slider- nav a).removeClass(active);$(.slider- nav a).eq(idx-1).addClass(active);$(fu nctio n()/Horizon tal Carousel$(.

8、slider-left ul, .slider-right ul).jcarousel(auto: 5,wrap: last, scroll: 1, visible: 1, in itCallback: mycarousel_ in itCallback, itemFirst In Callback:mycarouseltemFirst In Callback, butto nN extHTML: null, butto nPrevHTML: null);/Blink Fields $(.bli nk).focus(fu ncti on() if(this.title=this.value)

9、this.value =;).blur(fu ncti on()if(this.value=) this.value = this.title;);/Navigati on$(# navigati on ul li).hover(fu ncti on() if( $(this).find(.dd-holder).length 0 ) $(this).fi nd(spa n).addClass(li nk); $(this).fi nd(a:eq(0).addClass(hover); $(this).fi nd(a.hover).appe nd(&n bsp;);var hide_width

10、= $(.hover).outerWidth() -8; $(this).fi nd(.hide).css( width : hide_width, display : block);$(this).fi nd(.dd-holder:eq(0).show();$(.dd-holder ul li).hover(fu nctio n()if( $(this).fi nd(.dd-holder ).length 0) $(this).fi nd(a:eq(0).addClass(subhover);,fun cti on()$(this).fi nd(a:eq(0).removeClass(sub

11、hover););,fun cti on()$(this).fi nd(a).removeClass(hover);$(this).fi nd(.dd-holder:eq(0).hide();$(this).fi nd(spa n).removeClass(li nk);$(this).fi nd(.hide).remove();););确定导航栏样式的css代码：* margin: 0; paddi ng: 0; outl in e:0; body fon t-size: 12px;lin e-height: 22px;fon t-family: Arial, Helvetica, San

12、s-Serif;color: #4c4c4c;backgrou nd: #fff;border-top: 6px solid #2e9dbd;a color: #0252aa; text-decorati on: none; cursor:po in ter; a:hover text-decorati on: un derl in e; a img border: 0; .cl display: block; height: 0; fon t-size: 0; li ne-height: 0; text-i ndent:-4000px; clear: both; .no text fon t

13、-size: 0; li ne-height: 0; text-i ndent: -4000px; .shell width: 985px; margin: 0 auto; #header height: 132px; #header .shell position: relative; height: 132px; z-index: 5; h1#logo float:left; display:in li ne; width: 142px; height:96px; marg in-top:20px; h1#logo a display: block;height: 96px;#n avig

14、ati on float: right; display: in li ne; marg in-top: 55px; #n avigati on ul float: left; display: in li ne; list-style: none outside none;paddi ng-top: 5px; #n avigati onul li positi on:relative; float:left; display:in li ne;margin-right: 15px; #navigationul li a float:left; display:inline; height:

15、22px; color: #767670;fon t-size:14px; lin e-height:23px; fon t-family:Lucida San s,Arial,San s-serif; paddi ng-left: 10px; #n avigati on ul li a spa n paddi ng-right:16px; #n avigati on ul li a:hover,#n avigati on ul li a.active color: #000; text-decorati on: non e; #n avigati on ul li a.hover,#navi

16、gationul li a.hoverspan.link float:left; display:inline; color:#000;backgrou nd: url(images/ nav-hover.gif) no-repeat 0 0; #n avigati on ul li a.hover z-i ndex: 10; #navigation ul li a.hover span.link background-position: right 0; 确定轮播样式的css代码：#slider height: 350px;.slider-holder positi on: relative

17、; width: 985px; height: 350px; overflow: hidde n; ul positi on:relative;.slider-holder overflow: hidde n; .slider-left position:relative;height: 350px; overflow: hidde n; .slider-left ul li height: 350px; width: 295px; color: #fff; .slider-left 350px; .slider-left fon t-family: 30px ; .slider-right

18、height: 350px;.jcarousel-clipul li h2 font-size: LucidaSan s,Arial, position:relative;.slider-right ul li, .slider-right 348px; .slider-right ul li img marg in-top: 1px; .jcarousel-clipfloat:positi on:list-style:noneoutsidenone;left; display:relative;in li ne;width:width:300px;295px;height:24px; lin

19、 e-height:24px; fon t-weight:San s-serif;margin-bottom:n ormal;6px; margi n-top:float:right; display:in li ne; width: 658px;positi on:relative;width:642px;height:.slider -nav positi on: absolute; bottom: 22px; left: 95px; z-i ndex: 5; .slider- nav a backgrou nd: url(./images/slider- nav.gif) no-repeat 0