整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
網(wǎng)頁設(shè)計與制作》
大作業(yè)報告
學(xué)院：**學(xué)院
姓名：
學(xué)號：
專業(yè):
摘要：宮崎駿（Miyazaki Hayao，1941年1月5日-），日本知名動畫導(dǎo)演、動畫師及漫畫家， 出生于東京都文京區(qū)，1963年進(jìn)入東映動畫公司，1985年與高煙勛共同創(chuàng)立古卜力工作案，其出品的動漫電影以精湛的技術(shù)、動人的故事和溫暖的風(fēng)格在世界動漫界獨(dú)樹一幟，能與美國迪士尼、 夢工廠的作品相比肩，受到全世界不分種族、不分國籍、不分文化的各類觀眾的一致好評。其動國作品大多涉及人類與自然之間的關(guān)系、和平主義及女權(quán)運(yùn)動。宮崎駿在日本動畫界占有超重里級 的地位，更在全球動畫界具有無可替代的地位，迪士尼稱他為“動畫界的黑澤明，《時代周刊》評價他為全球最具影響力的人物。
下面是我對web簡單的一個應(yīng)用，利用dreamwave工具，和photoshop軟件設(shè)計了一個具有個人風(fēng)格的個人網(wǎng)站，首先我先從網(wǎng)站設(shè)計的方向和目的、網(wǎng)站設(shè)計中涉及的知識點(diǎn)、網(wǎng)站設(shè)計的整個流程出發(fā)，然后通過自己設(shè)計的這個個人網(wǎng)站作品來說明并演示一個完整的網(wǎng)站制作過程。本論文詳細(xì)的介紹了整個網(wǎng)站設(shè)計的全過程。雖然還有一些不足之處，但頁面整體比較美觀大方，具有線上店鋪風(fēng)格，效果良好。
設(shè)計主要包括以下幾個版塊：
1.人物介紹板塊
2.采訪視頻板塊
3.手稿欣賞板塊
4.主要作品模塊
網(wǎng)站規(guī)劃思想
宮崎駿（Miyazaki Hayao，1941年1月5日-），日本知名動畫導(dǎo)演、動畫師及漫畫家， 出生于東京都文京區(qū)，1963年進(jìn)入東映動畫公司，1985年與高煙勛共同創(chuàng)立古卜力工作案，其出品的動漫電影以精湛的技術(shù)、動人的故事和溫暖的風(fēng)格在世界動漫界獨(dú)樹一幟，能與美國迪士尼、 夢工廠的作品相比肩，受到全世界不分種族、不分國籍、不分文化的各類觀眾的一致好評。其動國作品大多涉及人類與自然之間的關(guān)系、和平主義及女權(quán)運(yùn)動。宮崎駿在日本動畫界占有超重里級 的地位，更在全球動畫界具有無可替代的地位，迪士尼稱他為“動畫界的黑澤明，《時代周刊》評價他為全球最具影響力的人物。
作為宮崎駿的動畫迷，我結(jié)合課上所需的HTML網(wǎng)頁知識設(shè)計一個介紹宮崎駿的網(wǎng)頁，包含圖文、視頻等多種素材可以選擇。
網(wǎng)站的目錄結(jié)構(gòu)如下：
css ------存放CSS文件
imgs ------存放圖片文件
js -------存放js文件
index.html -----------人物介紹頁面
yinyue.html -----------采訪視頻頁面
shougao.html ---------手稿欣賞頁面
liuyan.html---------主要作品頁面
綜合知識的運(yùn)用情況
2、使用鏈接：為方便讀者的查閱，在各頁面n****欄都設(shè)置了頁面鏈接。
3、插入跳轉(zhuǎn)菜單為了使讀者能快捷的回到自己感興趣的頁面，于是在各個頁面都插入了跳轉(zhuǎn)菜單。
網(wǎng)頁中涉及的知識點(diǎn)
1、可視化網(wǎng)站設(shè)計制作軟件dreamweaver的熟練使用，站點(diǎn)的創(chuàng)建、導(dǎo)入以及管理；
2、主頁的創(chuàng)建和設(shè)置，模塊的保存與應(yīng)用和子網(wǎng)頁的創(chuàng)建、完成；
3、用photoshop軟件對圖片素材進(jìn)行必要的處理；
4、網(wǎng)站整體布局和超鏈接的添加；
遇到的問題及解決辦法
難點(diǎn):
1.body背景圖片顯示問題
2.頁面美觀度不夠高，Dreamewver CS6軟件應(yīng)用不夠熟練，軟件中所涉及得制作方法以及工具沒有更好的應(yīng)用。
解決辦法：
1.配色原則：避免網(wǎng)頁雜、亂，有時候單一色彩不為也是一種獨(dú)特，用色柔和，減少視覺混亂，對比度強(qiáng)的色彩不能應(yīng)用于一般網(wǎng)站。
2.字體問題：字體是整個網(wǎng)頁最醒目的部分，若字體不協(xié)調(diào)會給人一種枯燥的感覺，避免用雜色字體，防止瀏覽者眼花繚亂。
3.制作習(xí)慣：制作一個網(wǎng)頁首要的是完美的構(gòu)思，應(yīng)該先構(gòu)思好再動手制作，素材搜集完整，根據(jù)主題選材，不能脫離主題，確保所用材料與主題相關(guān)。
4.完整性：網(wǎng)站的基本格式完整，相關(guān)鏈接，友情鏈接必不可少，這也增加了網(wǎng)頁的方便性
5.合適選取適當(dāng)尺寸的背景圖片非常重要
網(wǎng)頁截圖
首頁（index.html）:使用了
HTML5結(jié)構(gòu)標(biāo)簽，對宮崎駿的事跡進(jìn)行了高度概括。
頭部:（一個頂部圖片和n****）
中間:
尾部:
2 采訪視頻:使用video標(biāo)簽嵌入一個本地mp4視頻
3手稿欣賞:使用無框線的三行兩列的表格對手稿進(jìn)行布局排列
4 主要作品：使用帶有框線和背景色的表格對主要作品進(jìn)行羅列，內(nèi)部文字居中，超鏈接加藍(lán)色下劃線。
心得與體會：
建立一個網(wǎng)站就像蓋一幢大樓一樣，它是一個系統(tǒng)工程，有自己特定的工作流程，你只有遵循這個步驟，按部就班地一步步來，才能設(shè)計出一個滿意的網(wǎng)站。首先，我們要確立網(wǎng)站主題。網(wǎng)站主題就是你建立的網(wǎng)站所要包含的主要內(nèi)容，一個網(wǎng)站必須要有一個明確的主題。特別是對于像我這樣的個人網(wǎng)站，你不可能像綜合網(wǎng)站那樣做得內(nèi)容大而全，包羅萬象。你沒有這個能力，也沒這個精力。網(wǎng)站的主題無定則，只要是你感興趣的，任何內(nèi)容都可以，但主題要鮮明，在你的主題范圍內(nèi)內(nèi)容做到大而全、精而深。
然后，我們要找材料。明確了網(wǎng)站的主題以后，你就要圍繞主題開始搜集材料了。常言道：“巧婦難為無米之炊”。要想讓自己的網(wǎng)站有血有肉，能夠吸引住用戶，你就要盡量搜集材料，搜集得材料越多，以后制作網(wǎng)站就越容易。材料既可以從圖書、報紙、光盤、多媒體上得來，也可以從互聯(lián)網(wǎng)上搜集，然后把搜集的材料去粗取精，去偽存真，作為自己制作網(wǎng)頁的素材。
找到材料后，我們還要規(guī)劃網(wǎng)站。一個網(wǎng)站設(shè)計得成功與否，很大程度上決定于設(shè)計者的規(guī)劃水平，規(guī)劃網(wǎng)站就像設(shè)計師設(shè)計大樓一樣，圖紙設(shè)計好了，才能建成一座漂亮的樓房。網(wǎng)站規(guī)劃包含的內(nèi)容很多，如網(wǎng)站的結(jié)構(gòu)、欄目的設(shè)置、網(wǎng)站的風(fēng)格、顏色搭配、版面布局、文字圖片的運(yùn)用等，你只有在制作網(wǎng)頁之前把這些方面都考慮到了，才能在制作時駕輕就熟，胸有成竹。也只有如此制作出來的網(wǎng)頁才能有個性、有特色，具有吸引力。如何規(guī)劃網(wǎng)站的每一項(xiàng)具體內(nèi)容，我們在下面會有詳細(xì)介紹。
做好以上三步之后，我們就要選擇合適的制作工具。盡管選擇什么樣的工具并不會影響你設(shè)計網(wǎng)頁的好壞，但是一款功能強(qiáng)大、使用簡單的軟件往往可以起到事半功倍的效果。網(wǎng)頁制作涉及的工具比較多，首先就是網(wǎng)頁制作工具了，在這里，我們一般都是用有“網(wǎng)絡(luò)三劍客”之稱的Dreamweaver、Fireworks、flash來制作網(wǎng)頁，對于圖片部分的處理，個人覺得Photoshop比較好用。
最后，我們就需要按照規(guī)劃一步步地把自己的想法變成現(xiàn)實(shí)了，這是一個復(fù)雜而細(xì)致的過程，一定要按照先大后小、先簡單后復(fù)雜來進(jìn)行制作。所謂先大后小，就是說在制作網(wǎng)頁時，先把大的結(jié)構(gòu)設(shè)計好，然后再逐步完善小的結(jié)構(gòu)設(shè)計。所謂先簡單后復(fù)雜，就是先設(shè)計出簡單的內(nèi)容，然后再設(shè)計復(fù)雜的內(nèi)容，以便出現(xiàn)問題時好修改。在制作網(wǎng)頁時要多靈活運(yùn)用模板，這樣可以大大提高制作效率。網(wǎng)頁做好之后，就要發(fā)布到Web服務(wù)器上，才能夠讓全世界的朋友觀看，還要不斷地進(jìn)行宣傳，這樣才能讓更多的朋友認(rèn)識它。
以上就是我對于網(wǎng)頁制作的一些個人心得，由于本人的技術(shù)還不是很成熟，還存在很多的不足(如：背景過于單調(diào)和網(wǎng)頁布置不合理)。選擇學(xué)習(xí)這門課是很正確的選擇，雖然在以后不會再有機(jī)會去上了，但我還是會通過各種方式繼續(xù)頁設(shè)計和制作的，同時很感謝帶我入門的徐兵老師，讓我有機(jī)會去學(xué)習(xí)有關(guān)網(wǎng)頁的知識，謝謝！
訊出品的《移動頁面用戶行為報告》你看過了嗎？
從加載時間、高峰期、頁面熱度、流失率、分享率、轉(zhuǎn)化率等分析H5的傳播，
掌握了用戶的行為習(xí)慣，對癥下藥，
就能夠避免很多H5傳播的雷區(qū)。
小編根據(jù)騰訊的報告，結(jié)合設(shè)計師、開發(fā)大牛的意見，
總結(jié)出了以下20條H5設(shè)計技巧，
文章有點(diǎn)長，需要細(xì)心品讀！
技巧1. 做好縮略圖，事半功倍
用戶會點(diǎn)擊一個H5，跟標(biāo)題、縮略圖以及發(fā)布的時間有關(guān)系。一個奪人眼球的標(biāo)題能夠吸引人的點(diǎn)擊，一個引人注目的縮略圖會引起人們的好奇心。
技巧2. 中午12點(diǎn)和晚上10點(diǎn)是H5發(fā)布的最佳時間
H5發(fā)布最合適的時間，騰訊的《移動頁面用戶行為報告》給出了以下答案。
技巧3. 請把引流頁放在首頁或尾頁
騰訊2016年發(fā)布的《移動頁面用戶行為報告》指出，H5頁面首屏和最后一屏的平均停留時間比中間頁面的平均停留時間長，按鈕點(diǎn)擊率也比較高，是放置引流頁面的最佳選擇。
技巧4. 給你的按鈕設(shè)計好聽的名字和有趣的動畫
技巧5. 三秒鐘渲染首屏，首屏資源不超過1014KB
騰訊《移動頁面用戶行為報告》第一條指出，加載超過5秒就會有74%的用戶離開頁面。
用戶都是沒有耐心的，首屏渲染時間越短越好。
因此一定要盡量縮小首屏的體積，業(yè)內(nèi)一般以聯(lián)通3G網(wǎng)絡(luò)平均338KB/s(2.71Mb/s)為準(zhǔn)，3秒以內(nèi)渲染完成，所以首屏資源不應(yīng)超過1014KB。
技巧6. 大型重資源頁面（如游戲）采用loading頁面
如果你不能夠保證3秒出首屏，那就增加有趣的Loading頁面進(jìn)行預(yù)加載，資源加載完成后再顯示頁面。
技巧7. 采用色彩單一的繪圖方式制作
這是三張200*200像素圖片的體積對比，第一張單色塊，第二張垂直漸變，第三張斜對角漸變。對于H5來說，流暢度往往比畫面的精細(xì)程度更加重要。
技巧8. 靜態(tài)圖盡量保存成png8
這是一張1M的圖片用PS壓縮成jpg、png8、png24的體積對比。
需要補(bǔ)充的是Png8最多只能展示265種顏色，而png24能有1600萬。
所以色彩單一時用png8，色彩豐富時用jpg，需要追求精度時用png24。
技巧9. 無損壓縮圖片可用網(wǎng)站
大家都知道的TinyPNG https://tinypng.com/
業(yè)界好口碑的智圖 https://zhitu.isux.us/
技巧10. 圖片避免大小重設(shè)，不寬于640像素（基于手機(jī)屏幕一般寬度）
根據(jù)需求上傳相應(yīng)尺寸，避免造成圖片質(zhì)量剩余。
技巧11. 善于用H5工具匹配多終端
H5中圖片寬度固定為640px，那如何匹配高度呢？
如果你用的是H5制作工具，我有比較好的解決方案，比如用ih5.cn。
在舞臺下添加【移動設(shè)備】功能，設(shè)置不同方案的高度，案例就可以根據(jù)終端設(shè)備自動跳轉(zhuǎn)到對應(yīng)的方案去瀏覽。這種方法需要重復(fù)設(shè)計多種尺寸的圖，堪稱累倒設(shè)計師的方法。
偷懶的設(shè)計師們用的是——將設(shè)計文檔統(tǒng)一按照最大方案也就是640*1040px來創(chuàng)建，然后添加一個移動設(shè)備，選擇默認(rèn)高度，在設(shè)計文檔時記得將主要的信息放在中間，重要的按鈕盡量往中間放。
技巧12. 動圖優(yōu)化再優(yōu)化
在不影響動態(tài)圖整體效果的前提下，通過修改尺寸、質(zhì)量、幀數(shù)等進(jìn)行優(yōu)化。
技巧13. 善用背景顏色屬性
如果你是用H5工具編輯案例，以ih5為例，在需要使用單純色做背景或者其它的情況下，可以利用圖形工具里面的背景色屬性或者舞臺與頁面的背景屬性。
技巧14. 開發(fā)們都喜歡的H5音頻規(guī)范
格式：mp3 ，單軌，比特率64kbps，最好30秒以內(nèi) ，文件大小控制在100k以內(nèi)最佳。
可利用Adobe Audition、格式工廠或者一些音樂播放軟件可以剪輯和壓縮音樂。
要注意，作為無限循環(huán)的背景音樂，截取時一定要注意頭尾得連接得上，而且要淡入淡出。
技巧15. 視頻3分鐘以內(nèi)最佳，采用H.264格式
①視頻時長：3分鐘以內(nèi)，避免跳出率過高。
②格式：MP4，H.264。
③在保證基本清晰度的前提下，用格式工廠等軟件進(jìn)行壓縮，視頻寬度640px。
技巧16. 不濫用Web字體
一般瀏覽器只支持一些默認(rèn)字體，中文如宋體、微軟雅黑、華文細(xì)黑，英文如Helvetica、Arial、Georgia、Times。
H5用了其他字體，需要下載，解析，重繪當(dāng)前頁面，應(yīng)盡量減少使用，或者直接將文字轉(zhuǎn)成圖片再導(dǎo)入。
不過如果在H5制作工具ih5中，如果你用中文字體組件輸入文字，其實(shí)是自動將文字轉(zhuǎn)成圖片，就不需要擔(dān)心這個問題。
技巧17. 多用動效（css3）,少用時間軸(js)
動效是H5必備，以H5工具ih5為例，實(shí)現(xiàn)動畫效果可以用動效、時間軸、幻燈片工具等。
技巧18. 遵循用戶操作習(xí)慣
騰訊的《移動頁面用戶行為報告》公布：大多數(shù)用戶習(xí)慣滑動切換，放置在左邊的按鈕點(diǎn)擊率低（可能大部分是右撇子）。用戶習(xí)慣沿用上一屏學(xué)習(xí)到的操作行為，如果當(dāng)前操作不同，需要提示用戶。
技巧19. 慎用向右滑動和橫屏
很多手機(jī)，特別是蘋果手機(jī)，向右滑動容易觸發(fā)返回“上一級頁面”效果。
橫屏需要用戶設(shè)備開啟屏幕旋轉(zhuǎn)功能，才能正常觀看，用戶操作成本高（很多安卓手機(jī)經(jīng)常對橫屏沒反應(yīng)）。對不同屏幕的手機(jī)，長寬比例不一，難以展示最佳的視覺效果。
技巧20. 慎用輸入行為
輸入行為或者復(fù)雜交互行為都會導(dǎo)致用戶流失。用戶都是沒有耐心的，如果一定要輸入，盡量改成選擇的形式，會好很多。比如ih5平臺上設(shè)計師悟腳叔叔的作品《你，有什么資格睡覺》，就把一些輸入行為轉(zhuǎn)為了選擇行為。對每一個測試H5，都是有借鑒意義的。
iH5_cn良心出品，轉(zhuǎn)載請注明來源：H5頁面制作工具iH5.cn，或ih5_cn。
HTML5崗位技能技術(shù)是計算機(jī)類專業(yè)重要的核心課程，課程所包含的教學(xué)內(nèi)容多，實(shí)踐性強(qiáng)，并且相關(guān)技術(shù)更新快。傳統(tǒng)的課堂講授模式以教師為中心，學(xué)生被動式接收，難以調(diào)動學(xué)生學(xué)習(xí)的積極性和主動性。混合式教學(xué)結(jié)合線上線下教學(xué)模式，以學(xué)生為中心，變被動為主動，充分調(diào)動學(xué)生學(xué)習(xí)的積極性，提升課程的教學(xué)效果。
HTML5崗位技能是指構(gòu)建 Web 應(yīng)用程序用戶界面的過程。它涵蓋了網(wǎng)頁設(shè)計、網(wǎng)頁制作以及網(wǎng)站的前端開發(fā)等方面。HTML5崗位技能是屬于互聯(lián)網(wǎng)技術(shù)領(lǐng)域中的一項(xiàng)重要工作。
作為 HTML5崗位技能人員，我們的主要任務(wù)是將設(shè)計師提供的網(wǎng)頁設(shè)計圖轉(zhuǎn)化為網(wǎng)頁前端代碼，然后通過瀏覽器展示給用戶。在這個過程中，我們需要使用 HTML、CSS和JavaScript 等技術(shù)來實(shí)現(xiàn)網(wǎng)頁的布局、樣式和交互效果。
在Web前端開發(fā)中，我們還需要掌握一些常用的前端框架和工具例如，Bootstrap 是一個流行的前端框架，它提供了一套響應(yīng)式的網(wǎng)頁模板和組件，可以快速搭建出適配不同設(shè)備的網(wǎng)頁。另外，還有Vue.js和 React等JavaScript 框架，它們可以幫助我們構(gòu)建復(fù)雜的單頁應(yīng)用。
除了以上提到的技術(shù)和工具，作為 HTML5崗位技能人員，我們還需要了解和應(yīng)用一些 Web 標(biāo)準(zhǔn)和最佳實(shí)踐。比如，響應(yīng)式設(shè)計是一種設(shè)計方法，可以使網(wǎng)頁在不同設(shè)備上都能夠良好地展示和使用。此外，還需要關(guān)注網(wǎng)頁的性能優(yōu)化，包括減少 HTTP 請求、壓縮文件、使用緩存等方面的技巧來提升網(wǎng)頁的加載速度和用戶體驗(yàn)。
HTML5崗位技能實(shí)訓(xùn)室的培養(yǎng)目標(biāo)是培養(yǎng)掌握Web前端基礎(chǔ)理論知識、掌握前端開發(fā)技術(shù)、掌握移動端開發(fā)技術(shù)、掌握Web測試技術(shù)和掌握數(shù)據(jù)庫技術(shù)等知識和技能、動手能力強(qiáng)、適應(yīng)各種崗位工作的復(fù)合應(yīng)用型人才，從事Web前端開發(fā)、移動端開發(fā)、軟件測試、系統(tǒng)維護(hù)、解決方案設(shè)計等工作。
HTML5崗位技能實(shí)訓(xùn)室是一個旨在提供實(shí)踐環(huán)境和教學(xué)資源的綜合實(shí)訓(xùn)室。HTML5崗位技能實(shí)訓(xùn)室的目標(biāo)是為學(xué)生提供一個真實(shí)的HTML5崗位技能環(huán)境，使他們能夠?qū)W習(xí)并實(shí)踐HTML5崗位技能的相關(guān)技術(shù)和方法。
HTML5崗位技能實(shí)訓(xùn)室建設(shè)方案系統(tǒng)是一個集硬件、軟件和教學(xué)資源于一體的綜合實(shí)訓(xùn)室，HTML5崗位技能實(shí)訓(xùn)室的建設(shè)旨在為學(xué)生提供一個實(shí)踐和交流的平臺，讓他們通過實(shí)際項(xiàng)目的開發(fā)來應(yīng)用所學(xué)的知識，培養(yǎng)解決問題和合作的能力，同時也促進(jìn)創(chuàng)新和創(chuàng)業(yè)精神的培養(yǎng)。這樣的實(shí)訓(xùn)室可以提升學(xué)生的實(shí)踐能力，并為他們將來投身HTML5崗位技能行業(yè)做好準(zhǔn)備。
HTML5崗位技能實(shí)訓(xùn)室以HTML5崗位技能領(lǐng)域?qū)W習(xí)者的職業(yè)生涯發(fā)展及終身學(xué)習(xí)需求為依據(jù)，重點(diǎn)滿足職業(yè)院校在校學(xué)生、進(jìn)修教師、企業(yè)員工、社會自學(xué)者四類對象不同層次的學(xué)習(xí)需求，聯(lián)合全國高水平院校以及企業(yè)，建設(shè)HTML5崗位技能專業(yè)優(yōu)質(zhì)專業(yè)資源、課程資源、認(rèn)證資源、競賽資源。企業(yè)資源等內(nèi)容:優(yōu)化資源庫平臺，在“能學(xué)、輔教”的基礎(chǔ)上，滿足個性化學(xué)習(xí)者私人定制的實(shí)際需要，并完善平臺的運(yùn)行機(jī)制，保證平臺內(nèi)容的持續(xù)更新: 依托資源庫平臺，實(shí)現(xiàn)學(xué)生學(xué)習(xí)效果評價，能夠?yàn)槠髽I(yè)出具學(xué)生能力分析報告，指導(dǎo)企業(yè)招聘和學(xué)生就業(yè)。
3.1HTML5崗位技能教學(xué)平臺
平臺基于spring cloud微服務(wù)架構(gòu)，提供便捷的SSO單點(diǎn)登錄，采用kubernetes進(jìn)行部署，可支持公有云、混合云、私有云的安裝模式，數(shù)據(jù)層使用MySQL集群和MongoDB集群，實(shí)現(xiàn)了全流程EdvOps自動化運(yùn)維，具有高內(nèi)聚、松耦合、業(yè)務(wù)單一、高性能、高并發(fā)、高可能、跨平臺、跨語言等特點(diǎn)。主要模塊有課程制作工具、云盤、共享課、我的課、云優(yōu)選課、云視頻庫、3D模型庫。
課程制作工具：由平臺提供專用的微服務(wù)模塊進(jìn)行支撐，采用websocket雙向通信技術(shù)，底層存儲采用三層遞進(jìn)的緩存方式，目的就是為了加快課程資源的加載速度。自主研發(fā)視頻轉(zhuǎn)碼，在線視頻剪輯功能。支持由word文檔直接導(dǎo)入，并且根據(jù)標(biāo)題類型自動生成目錄，方便快捷。同時支持ppt、excel、圖片、超鏈接、視頻、音頻、3D模型、章節(jié)測驗(yàn)等內(nèi)容的插入，實(shí)現(xiàn)多個超文本文件的同屏展示。
共享課：使用訂單配發(fā)或校內(nèi)共享的概念，讓課程資源更大程度的進(jìn)行共享。
我的課：支持從共享課資源中直接進(jìn)行“生成副本”，導(dǎo)入進(jìn)我的課中，并且同時支持自行創(chuàng)建。所有的課程資源支持導(dǎo)出功能，可導(dǎo)出為本地的離線文件，導(dǎo)出文件為后綴名為wz的加密文件，在使用平臺進(jìn)行二次導(dǎo)入直接生成課程資源，便于線上傳播。
云優(yōu)選課：由行業(yè)資深從業(yè)人員在互聯(lián)網(wǎng)上收集整理的學(xué)習(xí)資源，包括系列類學(xué)習(xí)視頻和知識點(diǎn)類學(xué)習(xí)視頻，供教師和學(xué)生進(jìn)行自主學(xué)習(xí)。
云視頻庫：平臺提供數(shù)百個包含各專業(yè)的微課視頻，可直接引用到課程資源中。
3D模型庫：采用three。js技術(shù)，實(shí)現(xiàn)在線加載3D模型，提供更加直觀形象的教學(xué)體驗(yàn)。
題庫：題庫支持通用題目（單選題、多選題、判斷題、填空題、主觀題）以及實(shí)訓(xùn)題目（編程題、web前端題、虛擬化題等）；對于通用類題目可采用excel模板批量導(dǎo)入，采用瀑布流的展示方式，可共享到校內(nèi)供其他教師進(jìn)行使用。
作業(yè)：支持手動建題和從題庫中選題兩種模式創(chuàng)建作業(yè)，提供作業(yè)庫模塊，作業(yè)庫內(nèi)的作業(yè)可多次發(fā)放給學(xué)生，對于作業(yè)平臺提供自動評測，包括單選題、多選題、判斷題、填空題、編程題、虛擬化題。
考試：支持導(dǎo)入試卷、手動創(chuàng)建、題庫選題三種創(chuàng)建方式，同時支持系統(tǒng)隨機(jī)組卷功能；提供試卷庫模塊，試卷庫內(nèi)的試卷可多次發(fā)放給學(xué)生，支持試卷的自動判分。
課堂活動：平臺支持多種課堂活動，如：簽到、主題討論、提問、分組任務(wù)、投票、問卷、計時器等，提高課堂的趣味性和參與性。
個人云盤：平臺將用戶在備課，教學(xué)等過程中使用的文件，保存在個人云盤空間，支持二次直接使用和存檔，實(shí)現(xiàn)云文件的保存。
3.2HTML5崗位技能實(shí)訓(xùn)平臺
平臺采用B/S結(jié)構(gòu)，運(yùn)用spring cloud微服務(wù)技術(shù)，構(gòu)建多個穩(wěn)定、高效的服務(wù)模塊，提供SSO單點(diǎn)登錄服務(wù)，并使用統(tǒng)一的身份認(rèn)證鑒權(quán)。平臺基于k8s實(shí)現(xiàn)公有云、混合云、私有云多種部署方式，提供在線HTML5崗位技能的運(yùn)行環(huán)境，并內(nèi)置代碼運(yùn)行結(jié)果檢測，自動進(jìn)行測評統(tǒng)計，實(shí)現(xiàn)真正的云開發(fā)，開箱即用，主要模塊有課程制作工具、作業(yè)、活動、云盤、共享課、我的課、云優(yōu)選課。
便捷的實(shí)驗(yàn)制作工具：讓教師輕松實(shí)現(xiàn)pdf、ppt、word、excel等不同格式的文本、圖片、音頻、視頻、超鏈接等進(jìn)行混合編排，并自動生成動態(tài)實(shí)驗(yàn)?zāi)夸洠瑥亩鴮?shí)現(xiàn)不同實(shí)訓(xùn)資源同屏展示。
智能代碼評測，助力HTML5崗位技能實(shí)訓(xùn)：平臺支持在線對學(xué)生提交的實(shí)驗(yàn)代碼進(jìn)行評測，將評測結(jié)果統(tǒng)計分析后展示給教師，提高教師的教學(xué)效率，方便學(xué)生的學(xué)習(xí)過程。
提交代碼查重，防止抄襲：對于學(xué)生提交并且通過測評的HTML5崗位技能實(shí)訓(xùn)代碼進(jìn)行代碼的查重，防止學(xué)生互相抄襲代碼。
在線問答，及時解答學(xué)生疑問：平臺提供HTML5崗位技能實(shí)訓(xùn)的在線問題，學(xué)生在HTML5崗位技能實(shí)訓(xùn)過程中，通過在線問答及時與老師進(jìn)行溝通，提高學(xué)習(xí)效率。
可記錄學(xué)習(xí)情況的實(shí)驗(yàn)筆記：平臺為用戶在HTML5崗位技能實(shí)訓(xùn)頁面提供實(shí)驗(yàn)筆記功能，用戶可在實(shí)驗(yàn)過程中記錄下自己的筆記。
實(shí)驗(yàn)題解，幫助學(xué)生掌握實(shí)驗(yàn)知識點(diǎn)：平臺會在每個HTML5崗位技能實(shí)訓(xùn)題目后面，提供相應(yīng)的實(shí)驗(yàn)題解，教師可改變其是否展示給學(xué)生。從而讓學(xué)生在實(shí)驗(yàn)完成之后進(jìn)行學(xué)習(xí)，更好的掌握實(shí)驗(yàn)的知識點(diǎn)。
支持高并發(fā)的評測服務(wù)：平臺采用kafka消息隊(duì)列來處理評測的請求，并內(nèi)置高配置的底層沙箱服務(wù)，支持高并發(fā)的用戶同時使用。
學(xué)生測評結(jié)果自動統(tǒng)計：平臺將課堂內(nèi)的用戶的評測結(jié)果進(jìn)行統(tǒng)計，按照消耗內(nèi)存、消耗時間兩個維度進(jìn)行展示，從而直觀的展示該實(shí)驗(yàn)的整體評測數(shù)據(jù)。
支持公共資源課程，便于老師教學(xué)：HTML5崗位技能實(shí)訓(xùn)平臺可內(nèi)置完整的實(shí)訓(xùn)資源，其中包括實(shí)訓(xùn)文檔以及在線資源包，用戶可以直接進(jìn)行使用。
個人云盤，資源不丟失：平臺會為用戶提供云盤服務(wù)，云盤內(nèi)所有文件都會按照不同的文件類型進(jìn)行分開，便于用戶查看和操作。
平臺支持Web前端應(yīng)用程序開發(fā)、web企業(yè)級開發(fā)、數(shù)據(jù)庫設(shè)計等實(shí)驗(yàn)。
3.3HTML5崗位技能教學(xué)資源包
HTML5崗位技能教學(xué)資源包包含專業(yè)基礎(chǔ)課程： 計算機(jī)應(yīng)用基礎(chǔ)、靜態(tài)網(wǎng)頁設(shè)計與制作、C語言程序設(shè)計、數(shù)據(jù)結(jié)構(gòu)、HTML5 + CSS3 Web 前端開發(fā)技術(shù)、計算機(jī)專業(yè)英語等。專業(yè)核心課程：HTMI5 與 JavaSeript 程序設(shè)計、UI 設(shè)計基礎(chǔ)、美學(xué)基礎(chǔ)、Bootstrap 應(yīng)用開發(fā)、NodeJS 應(yīng)用開發(fā)、Vue 應(yīng)用程序開發(fā)、Web 前端綜合實(shí)戰(zhàn)等。
3.4HTML5崗位技能實(shí)訓(xùn)資源包
對接真實(shí)職業(yè)場景或工作情境，在校內(nèi)外進(jìn)行HTML5崗位技能實(shí)訓(xùn)。使學(xué)生掌握網(wǎng)頁設(shè)計與制作的技術(shù)，能夠利用HTML5、CSS3等技術(shù)進(jìn)行網(wǎng)頁布局，基于項(xiàng)目化教學(xué)的模式培養(yǎng)學(xué)生實(shí)踐動手能力；使學(xué)生了解JavaScript的基本語法，具備JavaScript的編程技巧和編程步驟；掌握常用的前端框架技術(shù)主要包含JQuery框架、Bootstrap框架、React框架、Vue框架、Angular框架等。利用數(shù)據(jù)庫管理系統(tǒng)和數(shù)據(jù)挖掘系統(tǒng)設(shè)計出能夠?qū)崿F(xiàn)對數(shù)據(jù)庫中的數(shù)據(jù)進(jìn)行添加、修改、刪除、處理、分析、理解、報表和打印等多種功能的數(shù)據(jù)管理和數(shù)據(jù)挖掘應(yīng)用系統(tǒng)；并利用應(yīng)用管理系統(tǒng)最終實(shí)現(xiàn)對數(shù)據(jù)的處理、分析和理解。
培養(yǎng)具有良好職業(yè)道德和人文素養(yǎng)，掌握web前后端數(shù)據(jù)交互、響應(yīng)式開發(fā)等知識，具備動態(tài)網(wǎng)頁設(shè)計、開發(fā)、調(diào)試、維護(hù)等能力，能從事web前端軟件編程、軟件測試、軟件技術(shù)服務(wù)、智能終端界面開發(fā)等工作的中級技術(shù)技能人才。
3.5HTML5崗位技能實(shí)訓(xùn)室配套設(shè)施
HTML5崗位技能實(shí)訓(xùn)室配套設(shè)置包含實(shí)訓(xùn)室硬件設(shè)施、HTML5崗位技能軟件和工具等內(nèi)容，其中硬件設(shè)施如智慧黑板、教師講臺、多媒體設(shè)備、學(xué)生實(shí)訓(xùn)電腦、桌椅、服務(wù)器、交換機(jī)、機(jī)柜及HTML5崗位技能實(shí)訓(xùn)室裝修和HTML5崗位技能文化建設(shè)。HTML5崗位技能軟件和工具應(yīng)包含常用的HTML5崗位技能軟件和工具,這些HTML5崗位技能軟件和工具可以幫助學(xué)生進(jìn)行應(yīng)用程序的編寫、測試和調(diào)試。
HTML5崗位技能實(shí)訓(xùn)室建設(shè)圖
6.1專業(yè)教學(xué)支撐
6.2教材聯(lián)合開發(fā)教材
聯(lián)合各院校教授專家，開發(fā)HTML5崗位技能專業(yè)系列教材，為院校專業(yè)實(shí)驗(yàn)課程開展和教學(xué)提供參考。
6.3 產(chǎn)學(xué)研支撐平臺
平臺采用spring cloud微服務(wù)開發(fā)架構(gòu)，各服務(wù)模塊單獨(dú)運(yùn)行并提供服務(wù)接口；可提供穩(wěn)定、快速、高效的服務(wù)；平臺整體采用前后端分離和分布式微服務(wù)的彈性計算架構(gòu)實(shí)現(xiàn)，后端主要基于Java的Spring cloud實(shí)現(xiàn)，前端vue實(shí)現(xiàn)等，具有高內(nèi)聚、松耦合、業(yè)務(wù)單一、高性能、高并發(fā)、高可能、跨平臺、跨語言等特點(diǎn)。
平臺提供SSO單點(diǎn)登錄，多個應(yīng)用系統(tǒng)統(tǒng)一登錄，統(tǒng)一的用戶管理，一個賬戶可登錄驗(yàn)證教學(xué)全場景以及數(shù)字技術(shù)專業(yè)群實(shí)踐教學(xué)等所有應(yīng)用模塊系統(tǒng)。
平臺采用kubernetes技術(shù)進(jìn)行部署，支持公有云、私有云、混合云模式安裝；平臺支持多數(shù)據(jù)源從而保證技術(shù)的一致性；確保服務(wù)的穩(wěn)定、可擴(kuò)展、彈性擴(kuò)容；每個獨(dú)立服務(wù)支持分布式集群部署，理論上可以無限橫向擴(kuò)展，提高系統(tǒng)處理能力，支持大規(guī)模并發(fā)教學(xué)全場景和數(shù)字化專業(yè)群教學(xué)實(shí)踐應(yīng)用。
基礎(chǔ)虛擬化服務(wù)由docker和kvm兩種虛擬化技術(shù)根據(jù)學(xué)科性質(zhì)進(jìn)行選擇性支撐，可滿足不同的虛擬化需求，提供穩(wěn)定、可自行配置的虛擬機(jī)器。
基于全流程DevOps自動化運(yùn)維，支持持續(xù)集成、分析、服務(wù)注冊與發(fā)現(xiàn)、系統(tǒng)監(jiān)控、性能監(jiān)控、日志管理、預(yù)警、持續(xù)部署(基于docker的鏡像倉庫，Kubernetes的容器云管理調(diào)度平臺，在線可視化管理、監(jiān)控、調(diào)度容器)。
基礎(chǔ)持久化層支持RDS和NoSQL兩種方式，采用MySQL集群和MongoDB集群搭建，支持基于CQRS的分布式事務(wù)處理，支持?jǐn)?shù)據(jù)自動備份，同時使用于Redis集群對熱點(diǎn)數(shù)據(jù)進(jìn)行緩存，支持大并發(fā)；支持純本地化數(shù)據(jù)源。
基礎(chǔ)服務(wù)層支持在線驗(yàn)證碼服務(wù)、基礎(chǔ)文件服務(wù)、消息隊(duì)列服務(wù)、OSS對象存儲服務(wù)、用戶/鑒權(quán)服務(wù)、個人云盤服務(wù)、WebSocket服務(wù)等，保證平臺的通用性。用戶基礎(chǔ)信息管理：對訂單實(shí)行按業(yè)務(wù)方向進(jìn)行配置，對班級、教師、學(xué)生相關(guān)信息進(jìn)行新增、修改、刪除以及數(shù)據(jù)權(quán)限進(jìn)行配置。
6.4 技能大賽支撐
6.5 1+X認(rèn)證服務(wù)
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
