人機交互技術(shù)報告

1、人機交互技術(shù)結(jié)課作品報告文件狀態(tài)文件標識In dex.html草稿當前版本2.0V正式發(fā)布作者趙嘉鵬馮雪琪正在修改完成日期2017.12.25電子科技大學信息與軟件工程學院2017人機交互技術(shù)報告版本歷史版本/狀態(tài)作者參與者起止日期備注1.0趙嘉鵬馮雪琪2017.12.05-2017.12.15無法實現(xiàn)圖片輪播2.0趙嘉鵬馮雪琪2017.12.15-2017.12.25功能實現(xiàn)22017人機交互技術(shù)報告目錄01文檔介紹402文檔目的403項目背景404參考文獻405術(shù)語與縮寫解釋41系統(tǒng)需求52系統(tǒng)設計53系統(tǒng)實現(xiàn)94系統(tǒng)測試1632017人機交互技術(shù)報告01文檔介紹本文檔的主要內(nèi)容是介紹設計

2、一個名為“里程”的籃球俱樂部網(wǎng)頁的具體流程及步驟， 主要包括網(wǎng)頁的系統(tǒng)需求，系統(tǒng)設計，系統(tǒng)實現(xiàn)和系統(tǒng)測試等內(nèi)容。02文檔目的編寫此文檔的主要目的是將關(guān)于“里程”籃球俱樂部網(wǎng)頁設計的基本步驟以及設計思路清楚明了的展現(xiàn)出來，更加簡潔明了的展現(xiàn)在設計初期，中期和后期我們所遇到的問題以及相關(guān)的解決方法，展現(xiàn)我們組的同學對所運用知識的熟悉程度和掌握程度，也讓自身對網(wǎng)頁設計的整體流程更加清楚。03項目背景（1）項目的提出原因為了大眾和廣大籃球愛好者能夠更加了解里程俱樂部，更方便的了解里程俱樂部的新聞以及相關(guān)安排，我們決定給實現(xiàn)一個關(guān)于“里程”籃球俱樂部的網(wǎng)頁項目。（2）項目的技術(shù)背景本學期，我們小組成員在

3、人機交互課堂上學習到了許多交互設計的原則和技術(shù)，并且了解并且掌握了利用HTML+CSS+JS開發(fā)前端網(wǎng)頁的技術(shù)。此項目便是我們將人機交互課堂上所學習到的知識運用到現(xiàn)實場景中開發(fā)出的產(chǎn)品。04參考文獻1 菜鳥教程-HTML 教程2 菜鳥教程-CSS 教程3 菜鳥教程-JS教程05術(shù)語與縮寫解釋術(shù)語/縮寫解釋JSJavaScript42017人機交互技術(shù)報告52017人機交互技術(shù)報告1系統(tǒng)需求系統(tǒng)的功能結(jié)構(gòu)框圖如下所示:”里程“籃球俱樂部網(wǎng)詰系統(tǒng)競技從頁面-W刃E 0廿r 競技隊球員鳳采輪播.賽乏比賽安押I 近期比賽結(jié)架-球忖名瞧及信息丄 教練名單及信la一r 業(yè)余陸風采輪播; PR rl E.H

4、 J 纟圖1.1里程網(wǎng)站系統(tǒng)結(jié)構(gòu)圖戕余陸/l-lf-lL 業(yè)左甌庶叱U介業(yè)余從近期妄41俱樂部文化介紹在為“里程”籃球俱樂部設計的網(wǎng)頁中，必須要包含1俱樂部的宗旨，文化，歷史 2.競技隊的基本信息（教練團隊，全體成員等），比賽安排，賽場風采，比賽結(jié)果等信息3.業(yè)余隊的基本信息，比賽安排，聚會或活動安排等信息4.俱樂部經(jīng)營的衍生產(chǎn)品信息。頁面結(jié)構(gòu)深度要求為兩級（必要時可以達到三級）。界面最好達到簡潔美觀的效果，可以使用一些圖片，使用的視覺元素需要考慮版權(quán)問題。應該主動運用所學到的人機交互設計原則和技術(shù)，使用 HTML+CSS+JS技術(shù)進行前端開發(fā)。2系統(tǒng)設計根據(jù)系統(tǒng)需求，我們將網(wǎng)頁分為六個部分，

5、其中考慮到網(wǎng)頁設計的通用規(guī)則，我們將六個頁面的頭部設計成一樣的樣式，使網(wǎng)頁看起來更加像是一個整體。第一部分：首頁（1 ）界面設計（草圖）押林百快補岸加納VB4BMWE- 5Evb.lt. .-.匸 &3a3vaTkiaiIB理111TIHCMH/ 咽哥寸o旳黑於H似屋Y卜xoCXI2017人機交互技術(shù)報告圖3.5里程/歷史界面152017人機交互技術(shù)報告#2017人機交互技術(shù)報告啊，專衛(wèi)衣#2017人機交互技術(shù)報告#2017人機交互技術(shù)報告圖3.6里程/周邊界面(2)主要功能實現(xiàn)的核心代碼網(wǎng)站導航欄以及標志展示以及搜索欄實現(xiàn)的html代碼:里程 / 無籃球不兄弟 首頁 v/li 里程/競技隊里

6、程/業(yè)余隊里程 / 文化 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 /實現(xiàn)圖片輪播的html代碼： 球員風采球員風采球員風采球員風采球員風采 &n bsp;12345&n bsp;實現(xiàn)圖片輪播的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人機交互技術(shù)報告；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