微專業(yè)web前端開發(fā)作業(yè)大說明

1、前端培訓(xùn)大作業(yè)說明前端培訓(xùn)大作業(yè)說明1作業(yè)環(huán)境搭建說明21主要功能點21.1前后端交互接口說明32獲取課程列表3右側(cè)“最熱排行”4導(dǎo)航關(guān)注4用戶登錄2.42.5右側(cè)“機構(gòu)介紹”.5大作業(yè)要求53HTML/CSS 要求53.1.1 效果符合要求53.1.2 兼容性要求53.1.3 HTML 結(jié)構(gòu)要求53.1.4 CSS 樣式要求63.1.5 其他6Js 要求63.2.1 功能要求63.2.2 兼容性要求63.2.3 編碼要求63.2.4 時間要求63.13.21 作業(yè)環(huán)境搭建說明1.略1.1 主要功能點所有學(xué)員必須完成靜態(tài)頁制做，下面的第 9 點頁面布局動態(tài)適應(yīng)為加分項，有能

2、力的學(xué)員可嘗試完成本作業(yè)具體功能要求如下：關(guān)閉頂部通知條點擊頂部通知條中的“X 不再提醒”后，刷新頁面不再出現(xiàn)此通知條（使用本地實現(xiàn)）。點擊項的 hover 效果見視覺稿關(guān)注“網(wǎng)易教育產(chǎn)品部”/登錄1.2.uu點擊關(guān)注按鈕：首先判斷登錄的是否已設(shè)置（loginSuc）如果未設(shè)置登錄，則彈出登錄框，使用給定的用戶名和（需要表單驗證）調(diào)用服務(wù)器 Ajax 登錄，成功后設(shè)置登錄登錄成功后，調(diào)用關(guān)注 API，并設(shè)置關(guān)注成功的uu（followSuc）登錄后“關(guān)注”按鈕變成不可點的“已關(guān)注”狀態(tài)。按鈕的 hover 效果見視覺稿頂部右側(cè)導(dǎo)航及內(nèi)容區(qū)各產(chǎn)品的“了解”3.點擊導(dǎo)航中的“網(wǎng)易公開課”，“網(wǎng)易云

3、課堂”，“學(xué) MOOC”，新窗口打開對目的頁面，對應(yīng)的跳轉(zhuǎn)如下，點擊項的 hover 效果見視覺稿。點擊“了解”的跳轉(zhuǎn)及打開方式相同。網(wǎng)易公開課：h/網(wǎng)易云課堂：ht/學(xué)MOOC：輪播圖三張輪播圖輪播效果：實現(xiàn)每 5s 切換，4.循環(huán)；鼠標懸停某張，則暫停切換；切換效果使用入場500ms 淡入的方式。點擊后新開窗口打開目的頁面，對應(yīng)的跳轉(zhuǎn)如下，banner1：h/ banner2：ht / banner3：左側(cè)內(nèi)容區(qū) tab 切換點擊“產(chǎn)品設(shè)計”或“編程語言”tab，實現(xiàn)下方課程內(nèi)容的更換。tab 項的 hover及選中效果見視覺稿，tab 項對應(yīng)的課程卡片數(shù)據(jù)見本文檔的數(shù)據(jù)接口列表查看課程詳

4、情鼠標懸?！爱a(chǎn)品設(shè)計”或“編程語言”tab 下的任意課程卡片，出現(xiàn)浮層顯示該課程的課程詳情；鼠標離開課程詳情浮層，則浮層關(guān)閉。課程卡片即詳情浮層的效果見視覺稿，課程卡片及詳情數(shù)據(jù)見本文檔的數(shù)據(jù)接口列表5.6.右側(cè)“機構(gòu)介紹”中的介紹7.點擊“機構(gòu)介紹”中的整塊區(qū)域，調(diào)用浮層介紹。的 hover 效果見視覺稿，浮層中調(diào)用的檔的數(shù)據(jù)接口列表器（不做瀏覽器兼容,可用 html5）及內(nèi)容接口見本文8.右側(cè)“熱門”實現(xiàn)每次進入或刷新本頁面，“熱門”模塊中，接口返回 20 門課程數(shù)據(jù)，默認展示前 10 門課程，隔 5 秒更新一門課程，實現(xiàn)滾動更新熱門課程的效果。課程數(shù)據(jù)接口見本文檔的數(shù)據(jù)接口列表9.頁面布

5、局動態(tài)適應(yīng)(加分項)根據(jù)瀏覽器窗口寬度，適應(yīng)兩種視覺布局尺寸。窗口寬度=1205 時，使用大屏視覺布局。布局示意圖見視覺效果視覺2 前后端交互接口說明2.1 獲取課程列表請求地址格式ht/webDev/couresByCategory.htm請求方式get 類型請求參數(shù)pageNo ; psize ; type ;請求參數(shù)說明當前頁碼 ;每頁返回數(shù)據(jù)個數(shù) ;篩選類型（10：產(chǎn)品設(shè)計；20：編程語言） ;返回課程列表數(shù)據(jù)（JSON 格式字符串，需要轉(zhuǎn)成對象才能在程序中使用）返回數(shù)據(jù)說明需要顯示的字段如下：“totalCount”: 80,/返回的數(shù)據(jù)總數(shù) “totalPage”: 8,/返回的數(shù)

6、據(jù)總頁數(shù) “pagination”: “pageIndex” : 1, /當前頁碼 “pageSize” : 10, /每頁的數(shù)據(jù)個數(shù) “totlePageCount”: /總頁數(shù),“l(fā)ist” : id:967019,/課程 IDname:和秋葉一起學(xué)職場技能,/課程名稱 bigPhotoUrl:,/課程大圖 middlePhotoUrl :,/課程中圖smallPhotoUrl:,/課程小圖 provider :秋葉,/機構(gòu)發(fā)布者 learnerCount :23,/在學(xué)人數(shù) price :128,/課程價格，0 為免費categoryName :辦公技能,/課程分類description

7、 :適用人群：最適合即將實習(xí)、求職、就職的大學(xué)生，2.2右側(cè)“最熱排行”2.3導(dǎo)航關(guān)注請求地址格式ht/webDev/ attention.htm請求方式get 類型請求參數(shù)無請求參數(shù)說明無返回1返回數(shù)據(jù)說明正確返回 1 后設(shè)置關(guān)注（followSuc）請求地址格式ht/webDev/hotcouresByCategory.htm請求方式get 類型請求參數(shù)無請求參數(shù)說明無返回課程列表數(shù)據(jù)（JSON 格式字符串，需要轉(zhuǎn)成數(shù)組才能在程序中使用）返回數(shù)據(jù)說明需要顯示的字段如下：id:967019,/課程 IDname:和秋葉一起學(xué)職場技能,/課程名稱 bigPhotoUrl:,/課程大圖middl

8、ePhotoUrl :,/課程中圖smallPhotoUrl:,/課程小圖provider :秋葉,/機構(gòu)發(fā)布者 learnerCount :23,/在學(xué)人數(shù) price :128,/課程價格，0 為免費categoryName :辦公技能,/課程分類description :適用人群：最適合即將實習(xí)、求職、就職的大學(xué)生，入職一、二三年的新人。別以為那些職場老人都知道！/課程描述入職一、二三年的新人。別以為那些職場老人都知道！/課程描述2.4用戶登錄2.5右側(cè)“機構(gòu)介紹”3 大作業(yè)要求3.1 HTML/CSS 要求3.1.1 效果符合要求按照效果圖切圖，正確測量大小寬高距離位置等數(shù)值，文字邊框

9、背景等顏色能正確取色。3.1.2 兼容性要求頁面兼容 IE8+、FF、Chrome，允許圓角、陰影只在高版本瀏覽器中實現(xiàn)。3.1.3 HTML 結(jié)構(gòu)要求完善的頭部信息，代碼縮進，正確使用語義化及實體，考慮 SEO 需要，正確嵌套，請求地址http:/m/open-movie/nos/mp4/2014/12/30/SADQ86F5S sh d.mp4請求地址格式ht/webDev/login.htm請求方式get 類型請求參數(shù)userName; password;請求參數(shù)說明固定用戶帳號：studyOnline ; 固定用戶：;使用 Md5 加密該用戶數(shù)據(jù) ;返回整型返回數(shù)據(jù)說明1/匹配用戶名成

10、功0/匹配用戶名失敗正確使用屬性，規(guī)范的注釋格式。3.1.4 CSS 樣式要求CSS 文件內(nèi)部規(guī)范化分類，分類順序規(guī)范，選擇器命名和順序符合規(guī)范，屬性的順序和格式符合規(guī)范，Hack 符合規(guī)范，注釋清晰格式規(guī)范，合理優(yōu)化背景圖，合理優(yōu)化選擇器，合理縮寫屬性值。3.1.5 其他代碼簡潔性、通用性、擴展性、可讀性、可性。3.2 Js 要求3.2.1 功能要求按照效果圖和上面的功能點完成所有功能，有不清楚的地方請咨詢作業(yè)指導(dǎo)老師。3.2.2 兼容性要求本作業(yè)要求能兼容以下瀏覽器（可以不考慮跨域問題）：Chrome 3+Firefox 3.5+Opera 12+Safari 4+ernet Explore