基于HTML5的視頻教程網(wǎng)站設(shè)計與開發(fā)

1、基于HTML5的視頻教程網(wǎng)站設(shè)計與開發(fā)Design and Development of Video tutorial website on HTML5摘要在線學(xué)習(xí)隨著網(wǎng)絡(luò)信息技術(shù)的飛快發(fā)展，已經(jīng)改變了原先的授課方式，逐漸成為當(dāng)今教育框架中一個重要的分支。各種類型的教程網(wǎng)站應(yīng)運(yùn)而生，提供了豐富且優(yōu)秀的課程資源，使得學(xué)生能夠及時的獲取到所需的學(xué)習(xí)信息。本次開發(fā)的目的是實現(xiàn)一個頁面簡潔大氣，課程內(nèi)容豐富，后臺管理便捷，用戶體驗良好的視頻教程在線學(xué)習(xí)網(wǎng)站。 前端采用HTML5、CSS3與Javascript，實現(xiàn)一個美觀，輕松，交互性強(qiáng)， 符合用戶使用習(xí)慣的頁面，后臺采用PHP、Javascript

2、與Ajax來實現(xiàn)一個易于后臺人員管理操作以及數(shù)據(jù)動態(tài)傳輸?shù)钠脚_,整體集美觀與實用為一體。網(wǎng)站教程類別詳細(xì)，基本涵蓋所有主流軟件的學(xué)習(xí)，同時倡導(dǎo)用戶分享，提供大量免費視頻教程并且推薦許多優(yōu)秀的素材網(wǎng)站。相對于現(xiàn)如今涵蓋面廣，內(nèi)容繁雜的學(xué)習(xí)網(wǎng)站，其針對性，實用性更強(qiáng)，專注于軟件技能的提升，使得想提高技能或者有共同興趣愛好的人可以隨時隨地，自由地學(xué)習(xí)，對促進(jìn)自身發(fā)展，提高其社會競爭力具有極大的現(xiàn)實意義。關(guān)鍵詞：視頻教程網(wǎng)站；HTML5；動態(tài)傳輸；交互性AbstractWith the rapid development of network information technology, onlin

3、e learning has changed the original way of teaching, and gradually become an important branch of todays education framework. Various types of tutorial websites have emerged as the Times require, providing rich and excellent course resources to enable students to obtain the required learning informat

4、ion about a timely manner . The goal of this development is to achieve a simple page atmosphere, rich course content, background management is convenient, user experience good video tutorial website.The front end uses HTML5, CSS3 and Javascript, to achieve a beautiful, easy, interactive, user-friend

5、ly page, the background uses PHP, Javascript and Ajax to achieve an easy background management and dynamic transfer of data platform, the whole set aesthetic and practical as one. The site offers a wide range of tutorials, covering virtually all major software learning, while promoting sharing, offe

6、ring a large number of free video tutorials, and recommending a number of excellent material sites. Its more targeted and practical than todays comprehensive learning site, which focuses on improving software skills so that people who want to improve their skills or have an interest in it can learn

7、freely, anytime, anywhere, to promote their own development, improve social competitiveness has great practical significance.Keywords：Video tutorial website; HTML5; Dynamic transmission; Interactivity目錄第一章 緒論11.1開發(fā)背景及意義11.2課題研究的現(xiàn)狀11.3論文架構(gòu)2第二章 開發(fā)環(huán)境及相關(guān)技術(shù)32.1開發(fā)環(huán)境32.1.1軟件環(huán)境32.1.2硬件環(huán)境32.2相關(guān)技術(shù)32.2.1前端架構(gòu)32

8、.2.2后端技術(shù)42.3本章小結(jié)4第三章 需求與分析53.1項目概況53.2.1網(wǎng)站角色的分析63.2.2用戶體驗分析73.2.3設(shè)計流程分析83.3系統(tǒng)各模塊的分析83.3.1用戶管理模塊83.3.2教程管理模塊93.3.3評論管理模塊93.4非功能需求的分析103.4.1技術(shù)的可行性103.4.2操作的可行性103.5本章小結(jié)11第四章 項目設(shè)計124.1整體架構(gòu)設(shè)計124.2前端模塊134.2.1網(wǎng)站形象設(shè)計134.2.2登錄模塊134.2.3免費教程及資源展示模塊144.2.4付費教程模塊164.2.5視頻播放模塊184.3后臺模塊184.3.1用戶信息和評論管理184.3.2教程信息

9、管理204.4數(shù)據(jù)庫設(shè)計214.4.1 E-R圖214.4.2數(shù)據(jù)庫表結(jié)構(gòu)224.5本章小結(jié)22第五章 項目實現(xiàn)235.1前端核心功能235.2后臺管理模塊27第六章 項目測試346.1測試的目標(biāo)346.2測試結(jié)果分析346.2.1界面測試346.2.2功能測試346.3本章小結(jié)36第七章 結(jié)論377.1總結(jié)377.2展望37參考文獻(xiàn)38致謝39廣東東軟學(xué)院本科畢業(yè)設(shè)計（論文）第一章 緒論1.1開發(fā)背景及意義隨著信息技術(shù)的發(fā)展完善，多種類型的視頻教程網(wǎng)站不斷被開發(fā)和運(yùn)用，追求更加方便快捷的學(xué)習(xí)方式成為了一種發(fā)展趨勢。在知識技能的學(xué)習(xí)從紙質(zhì)到電子的發(fā)展中，教程網(wǎng)站的出現(xiàn)極大的豐富了人們的學(xué)習(xí)方式

10、，同時也更方便了人們的學(xué)習(xí)。經(jīng)過了多年的發(fā)展，教程網(wǎng)站變的更加的豐富和完善，并且不斷補(bǔ)充各個領(lǐng)域的知識技能，使得用戶得到更多的學(xué)習(xí)。目前，教程網(wǎng)站以視頻教學(xué)的方式為主，人們選擇視頻類教程網(wǎng)站進(jìn)行學(xué)習(xí)，可以自我安排時間，不被約束，而且更加的直觀，易懂，易操作，易管理，學(xué)習(xí)效率和積極性也隨著提高，還能幫助人們減輕的學(xué)習(xí)壓力和工作負(fù)擔(dān)。在教程網(wǎng)站發(fā)展迅猛的今天，進(jìn)行一個該類型的網(wǎng)站的設(shè)計和開發(fā)是一個學(xué)習(xí)也是一個挑戰(zhàn)。視頻教程網(wǎng)站的出現(xiàn)，對于不同身份，有不同的學(xué)習(xí)需求的人來說有著不同的意義，作為一個學(xué)生，能夠在課余空閑時間從教程網(wǎng)站上擴(kuò)展課程內(nèi)容，豐富知識面；站在職業(yè)者的角度，教程網(wǎng)站能夠提升自己的技

11、能，更好的應(yīng)用到工作當(dāng)中。有的教程網(wǎng)站是聚集同一類型的學(xué)習(xí)內(nèi)容，有的是各個方面都涉及，不同學(xué)習(xí)需求的人可以根據(jù)自身喜好去選擇不同的網(wǎng)站。所以，豐富和方便的學(xué)習(xí)方式是教程網(wǎng)站得以迅猛發(fā)展的重大原因。1.2課題研究的現(xiàn)狀視頻教程網(wǎng)站是網(wǎng)絡(luò)技術(shù)進(jìn)步的產(chǎn)物，也是未來學(xué)習(xí)方式的趨向。1996年，美國民眾舉行了一場“網(wǎng)絡(luò)日”的志愿行動，目的是為了推動學(xué)校聯(lián)網(wǎng)，也就是推動網(wǎng)上教育，到現(xiàn)在為止，學(xué)校的網(wǎng)上教育幾乎已經(jīng)覆蓋了整個國家，甚至國外的人也可以進(jìn)行搜索觀看，學(xué)習(xí)。我們國家的網(wǎng)絡(luò)教育始于1998年，這也是我們國家網(wǎng)上教育，網(wǎng)上學(xué)習(xí)，不管是學(xué)校課程還是自學(xué)網(wǎng)站的開端，現(xiàn)如今，也是普及全國，內(nèi)容遍及每個學(xué)習(xí)階

12、段，每種不同行業(yè)，每個不同的技術(shù)。無論那個國家，都把教育放在第一重要位置，這是發(fā)展的基礎(chǔ)。從紙質(zhì)到網(wǎng)絡(luò)的飛躍發(fā)展，從固定時間實地上課到隨時隨地遠(yuǎn)程學(xué)習(xí)，從單一的課程學(xué)習(xí)到如今的全面發(fā)展，這是教育的進(jìn)步，也是人類的進(jìn)步，這也是教程網(wǎng)站誕生且得以快速，持續(xù)發(fā)展的重要原因。社會正在快速發(fā)展和提高對人才的要求，所以大部分的人會在空余時間在教程網(wǎng)站上進(jìn)行協(xié)作學(xué)習(xí)，補(bǔ)充學(xué)習(xí)，以保證跟社會的發(fā)展同步。視頻教程網(wǎng)站的應(yīng)運(yùn)而生，也開發(fā)了一些關(guān)于網(wǎng)站的新技術(shù)，同時這些技術(shù)也解決和完善了網(wǎng)站的功能。各種優(yōu)秀教程網(wǎng)站的開發(fā)，成功地滿足了很多人的學(xué)習(xí)需求，去學(xué)習(xí)和建設(shè)該類網(wǎng)站具有很大的意義，也是一種學(xué)習(xí)反饋的方式。1.

13、3論文架構(gòu)本課題主要是探究視頻教程網(wǎng)站的開發(fā)，本次網(wǎng)站開發(fā)的內(nèi)容選擇的是關(guān)于各類軟件的學(xué)習(xí)教程。論文經(jīng)過分析構(gòu)思，主要描述了該網(wǎng)站的開發(fā)原理，網(wǎng)站的設(shè)計與實現(xiàn)以及網(wǎng)站功能測試等，論文從7個章節(jié)去進(jìn)行描述,具體結(jié)構(gòu)如下: 第一部分：緒論，闡述了本課題在當(dāng)代互聯(lián)網(wǎng)媒介下的開發(fā)意義、如今網(wǎng)絡(luò)學(xué)習(xí)的發(fā)展以及該教程網(wǎng)站的總體介紹;第二部分：介紹了該網(wǎng)站的開發(fā)環(huán)境和使用的各類開發(fā)工具；第三部分：功能模塊和非功能模塊的需求以及分析第四部分：教程網(wǎng)站的界面設(shè)計以及后臺、數(shù)據(jù)庫設(shè)計；第五部分：網(wǎng)站前端到后臺的功能的實現(xiàn)；第六部分：網(wǎng)站測試并進(jìn)行結(jié)果分析。第七部分：對本次設(shè)計制作做出總結(jié)性論述。第二章 開發(fā)環(huán)境及

14、相關(guān)技術(shù)2.1開發(fā)環(huán)境2.1.1軟件環(huán)境表2-1 軟件詳細(xì)表序號名稱版本備注1Apache2.2.17網(wǎng)頁服務(wù)器環(huán)境2Mysql5.5.8數(shù)據(jù)庫3PHP5.3.5后臺開發(fā)環(huán)境4DreamweaverCS6編譯器5Photoshop2020界面設(shè)計、圖片美化2.2相關(guān)技術(shù)2.1.2硬件環(huán)境表2-2 硬件詳細(xì)表序號名稱配置1ASUS4G 內(nèi)存+256G 硬盤，2.3 GHz Intel（R）i52CPUInteli5-6200U可加速至2.8GHz2.2.1前端架構(gòu)HTML是一種基于超文本標(biāo)記的技術(shù)語言，HTML5通過內(nèi)部和外部數(shù)據(jù)的直接連接，有效的解決了設(shè)備之間的兼容性問題，具有更好的處理效率，

15、例如豐富的搜索引擎代碼，表單處理更加人性化和便捷化 1黃遠(yuǎn)洋.基于HTML5和CSS3的響應(yīng)式Web的設(shè)計與實現(xiàn)D. 華北電力大學(xué), 2018，HTML5適用于所有主流瀏覽器和服務(wù)器，同時其具備眾多新功能、新標(biāo)簽，減少外部依賴，相對于HTML更加簡潔，使用更加方便流暢。CSS3是用于控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標(biāo)記性語言2羅正蓉,范靈.應(yīng)用HTML和CSS制作網(wǎng)頁j. 2016,26(26),10，除了對頁面進(jìn)行靜態(tài)的修飾，還可以對頁面增加一些動畫效果，豐富頁面的呈現(xiàn)，而且CSS3除了修改某個樣式之外，它還可以影響多個網(wǎng)頁的構(gòu)造和形式，即能滿足頁面的效果，又減少代碼量，增強(qiáng)

16、工作效益。Javascript具備多種用途，常用于網(wǎng)站開發(fā)，移動APP開發(fā)等，適用于多種平臺。進(jìn)行Javascript代碼的編寫，動態(tài)效果可以得到完美的實現(xiàn)，進(jìn)行數(shù)據(jù)的驗證，相應(yīng)服務(wù)器事件等。Jquery屬于Javascript框架，其簡潔，兼容度高，并且自身有特殊語法的。他做到了以少換多的開發(fā)目的，也就是說用盡可能少的代碼來完成更多的效果?？捎糜谔砑佑腥さ膭赢?、處理事件、利用Ajax對數(shù)據(jù)進(jìn)行傳輸?shù)?利于開發(fā)工作者對頁面的設(shè)計和制作,呈現(xiàn)最佳效果。2.2.2后端技術(shù)PHP是一種動態(tài)腳本語言，在服務(wù)器上執(zhí)行，輕便快捷，操作性強(qiáng)，執(zhí)行速度快，可應(yīng)用于各類服務(wù)器，操作系統(tǒng)，瀏覽器，可以連接數(shù)據(jù)庫，

17、發(fā)送數(shù)據(jù)，頁面的內(nèi)容的動態(tài)呈現(xiàn)。“異步”可以說是Ajax的代名詞，顧名思義，它能夠通過后臺傳輸數(shù)據(jù)，而不需要更新整個頁面，實現(xiàn)局部內(nèi)容的更新，減少數(shù)據(jù)信息的傳遞，加快加載速度，其不需要任何插件的支持，更輕便，更友好。Ajax通過Jquery進(jìn)行封裝，減少參數(shù)，使對象結(jié)構(gòu)更清晰，代碼更簡單易懂。Xampp是Apache、Mysql、PHP、PERL的集合,具備豐富的功能，統(tǒng)一配置Apache服務(wù)器以及PHP環(huán)境，添加Mysql，比獨立安裝更加便捷，也有利于后續(xù)后臺管理的操作。SQL是服務(wù)于數(shù)據(jù)庫，其交互性、便捷性強(qiáng)，使信息管理系統(tǒng)能夠順利應(yīng)對各種復(fù)雜的信息分析處理環(huán)境，提高系統(tǒng)工作效率1黃遠(yuǎn)洋.

18、基于HTML5和CSS3的響應(yīng)式Web的設(shè)計與實現(xiàn)D. 華北電力大學(xué), 2018。借助SQL語言可以達(dá)到在大量數(shù)據(jù)中進(jìn)行查詢，增加，修改，刪除等，實現(xiàn)各種需求。2.3本章小結(jié)網(wǎng)站開發(fā)，涉及到頁面設(shè)計、前端的制作、樣式的美化、后臺系統(tǒng)的開發(fā)、數(shù)據(jù)庫的搭建，是一個將多方面整合于一體的工程，需要軟件硬件的配合，技術(shù)的支撐，可根據(jù)網(wǎng)站具體的開發(fā)需求，尋找最適合應(yīng)用于其中的開發(fā)語言，盡可能減少代碼的負(fù)荷，做一個簡潔又易于維護(hù)的網(wǎng)站。第三章 需求與分析3.1項目概況Learning視頻教程網(wǎng)站，主要是搜集各類軟件學(xué)習(xí)的視頻教程，面向?qū)W習(xí)軟件技能的用戶，其有PS、SAI、AE等多種主流軟件。該網(wǎng)站主要倡導(dǎo)的

19、是“學(xué)習(xí)你感興趣的，喜歡的事情”，將興趣愛好和學(xué)習(xí)連接起來，而且也倡導(dǎo)共享的學(xué)習(xí)方式，即把你自己的知識或者學(xué)習(xí)資源分享給大家，共同學(xué)習(xí)，一起成長，所以該網(wǎng)站里大部分教程是供所有人免費觀看、學(xué)習(xí)的。而且也有一個專門的頁面去跟用戶分享一些學(xué)習(xí)、下載素材的網(wǎng)站。該網(wǎng)站主要有“首頁熱門視頻”“按軟件分類的開放教程”“系統(tǒng)的特訓(xùn)教程”“資源分享”“視頻播放頁面”“用戶管理頁面”“教程管理頁面”“評論管理頁面”等常用的前端及后臺模塊。圖3-1 網(wǎng)站總體架構(gòu)3.2網(wǎng)站業(yè)務(wù)需求分析3.2.1網(wǎng)站角色的分析基于互聯(lián)網(wǎng)的視頻教程網(wǎng)站開辟了一個新的學(xué)習(xí)模式，利用強(qiáng)大的網(wǎng)絡(luò)收集優(yōu)秀的教程視頻，再上傳到平臺上分享和傳播

20、，這對于學(xué)生以及廣大在職人員具有重要意義，本視頻教程網(wǎng)站主要面向的是所有想要學(xué)習(xí)軟件的人，大致可分為未注冊用戶、已注冊用戶、后臺管理人員，各種角色有相應(yīng)的權(quán)限，即操作的范圍不同。（1） 未注冊用戶：可瀏覽前端所有頁面，觀看學(xué)習(xí)所有免費的開放教程，并對其點贊和收藏，因為未注冊登錄，所以暫不可購買付費課程以及評論課程。圖3-2 未注冊人員用例圖（2） 已注冊用戶：有賬號的用戶在進(jìn)行登錄之后，既可以觀看開放教程之外還可以購買付費的特訓(xùn)教程，分享視頻，評論視頻。圖3-3 已注冊人員用例圖（3） 后臺管理人員：定期發(fā)布教程、下架教程、修改教程信息、管理用戶信息、用戶留言，作為后臺的管理人員，確保網(wǎng)站用戶

21、信息不泄露，網(wǎng)站信息合法合規(guī)，維護(hù)網(wǎng)站的正常運(yùn)行。圖3-4 管理人員用例圖3.2.2用戶體驗分析用戶體驗即用戶的使用感受，如今網(wǎng)絡(luò)平臺的普及，用戶體驗更是提升了檢驗的標(biāo)準(zhǔn)，所以用戶體驗的分析是開發(fā)設(shè)計前必不可少的一環(huán)。用戶體驗大致分為以下幾點（1）視覺體驗：傳遞給用戶視覺上的感觸。首先要分析該視頻教程網(wǎng)站的用戶群體，根據(jù)群體審美習(xí)慣去確定網(wǎng)站風(fēng)格，網(wǎng)站的整體調(diào)性，包括網(wǎng)站的logo，網(wǎng)站的標(biāo)語等，再根據(jù)信息主次去進(jìn)行頁面的布局。其次頁面的色彩，動畫也不宜過于復(fù)雜，課程網(wǎng)站以引導(dǎo)學(xué)習(xí)為主，所以該網(wǎng)站用藍(lán)色作為其品牌顏色，給用戶營造一種快樂的學(xué)習(xí)氛圍（2）交互體驗：強(qiáng)調(diào)操作上的便捷和清晰。該網(wǎng)站要

22、明確分類導(dǎo)航以及各個課程模塊，讓用戶一目了然去尋找到對應(yīng)的學(xué)習(xí)入口，減少在搜索上的時間。同時要簡化規(guī)范登錄注冊的流程，明確用戶名和密碼的格式，防止來回驗證，消磨用戶的耐心。其次按鈕設(shè)置要突出，引導(dǎo)用戶去點擊觀看、分享、點贊等（3）情感體驗：所謂情感體驗，體現(xiàn)在用戶觀看的感受上，需要引起用戶的注意力。首先我們導(dǎo)航欄，各級菜單等要清晰分類，并用豐富的內(nèi)容去吸引用戶，這些課程內(nèi)容也要定時更新，避免用戶的流失。字體的大小，文字的排版，背景顏色等要舒適，易于閱讀且符合整體的規(guī)劃和網(wǎng)站的風(fēng)格，體現(xiàn)網(wǎng)站的友好性。3.2.3設(shè)計流程分析一個設(shè)計師的工作不是單一的畫圖，其工作流程有一套完整的規(guī)范，如下圖所示，首

23、先，在設(shè)計該網(wǎng)站之前，我們要對現(xiàn)市場同類型的主流網(wǎng)站進(jìn)行調(diào)研，并對所有數(shù)據(jù)進(jìn)行分析歸納，瀏覽大部分網(wǎng)站的設(shè)計風(fēng)格，避免與其風(fēng)格相撞，再具體對可行性進(jìn)行探討，確定設(shè)計的規(guī)劃，制定設(shè)計的目標(biāo)。之后進(jìn)行設(shè)計，先將設(shè)計的線稿圖畫出來，再統(tǒng)一對其修改細(xì)節(jié)部分，下一步填充色彩，文字，圖片等。整體效果出來之后還要進(jìn)行下一輪評審，體驗，反復(fù)修改直到最終定稿切圖。圖3-5 設(shè)計流程3.3系統(tǒng)各模塊的分析3.3.1用戶管理模塊用戶信息管理系統(tǒng)模塊即注冊登錄模塊，用戶可注冊該網(wǎng)站賬號，并用其賬號登錄，登錄之后可購買付費課程，評論課程等，用戶填寫的內(nèi)容則會傳入后臺,導(dǎo)入數(shù)據(jù)庫,后臺管理人員可進(jìn)行調(diào)整,但必須遵守規(guī)定，

24、不可外泄用戶的信息。表3-1 用戶管理模塊用例表用例名稱用戶管理用例參與者系統(tǒng)管理人員前置條件管理人員進(jìn)入網(wǎng)站后臺后置條件顯示用戶信息基本操作流程1. 系統(tǒng)管理人員進(jìn)入網(wǎng)站后臺2. 點擊用戶管理頁面，顯示用戶編號、賬號、密碼以及可進(jìn)行的操作3.點擊添加、刪除、修改則可對用戶信息進(jìn)行相應(yīng)的操作3.3.2教程管理模塊該模塊用戶可在前端頁面觀看學(xué)習(xí)，點贊或收藏視頻，并在留言區(qū)分享自己的學(xué)習(xí)感受，后臺管理人員會定期搜集這些學(xué)習(xí)資源，及時更新，發(fā)布教程已供用戶瀏覽，除此之外，管理人員還可在后臺管理頁面對教程標(biāo)題，級別，封面，鏈接進(jìn)行修改，刪除。表3-2教程管理模塊用例表用例名稱教程管理用例參與者系統(tǒng)管理

25、人員前置條件管理人員進(jìn)入網(wǎng)站后臺后置條件顯示教程信息基本操作流程1.系統(tǒng)管理人員成功進(jìn)入網(wǎng)站后臺2.點擊教程管理頁面，顯示教程編號、標(biāo)題、級別、封面圖片地址、視頻鏈接以及可進(jìn)行的操作3.點擊添加、刪除、修改則可對教程信息進(jìn)行相應(yīng)的操作3.3.3評論管理模塊評論模塊，已登錄的用戶可在教程下面專設(shè)的留言板塊進(jìn)行評論,可以分享自己的學(xué)習(xí)收獲或者提出意見建議等，管理人員可在后臺評論管理頁面對所有評論進(jìn)行增刪改。表3-3評論管理模塊用例表用例名稱評論管理用例參與者系統(tǒng)管理人員前置條件管理人員進(jìn)入網(wǎng)站后臺后置條件顯示評論信息基本操作流程1.系統(tǒng)管理人員成功進(jìn)入網(wǎng)站后臺2.點擊評論管理頁面，顯示評論編號、評

26、論內(nèi)容以及可進(jìn)行的操作3.點擊添加、刪除、修改則可對評論內(nèi)容進(jìn)行相應(yīng)的操作3.4非功能需求的分析3.4.1技術(shù)的可行性技術(shù)的可行性主要在于軟，硬件的支持，如今硬件的支持不再是問題，其可靠性，安全性，包括容量大小等方面都足以滿足該網(wǎng)站的開發(fā)應(yīng)用。前端采用Dreamweaver開發(fā)工具，可對代碼進(jìn)行編輯，修改，以及瀏覽之外，還能對不同類型的文件分開管理，統(tǒng)一展示，而且站點的配置操作很清晰簡單，管理也井井有序，不會造成混亂，最重要的是，其是一款帶提示的編譯器，輸入關(guān)鍵詞即可獲取對應(yīng)代碼，提高開發(fā)效率。后臺是用xampp作為網(wǎng)頁服務(wù)器環(huán)境，滿足開發(fā)需要的服務(wù)器，數(shù)據(jù)庫，PHP運(yùn)行環(huán)境，簡單快捷，適合開

27、發(fā)中小型網(wǎng)站。3.4.2操作的可行性互聯(lián)網(wǎng)技術(shù)日益強(qiáng)大，多媒體教學(xué)也成為了一種發(fā)展趨勢，不管是學(xué)校，機(jī)構(gòu)或者個人都可以采用這種方式去教學(xué)或者去學(xué)習(xí)，所以，視頻教程網(wǎng)站的發(fā)展是極具發(fā)展?jié)摿Φ?，加上如今各類智能產(chǎn)品占據(jù)市場，手機(jī)，電腦成為了大家生活中的必備物品，人們可以隨時隨地拿起這些設(shè)備去觀看，學(xué)習(xí)充電。該網(wǎng)站有豐富的學(xué)習(xí)內(nèi)容且大部分是免費提供給用戶去觀看的，而且網(wǎng)站規(guī)劃清晰明了，設(shè)計大氣簡潔，具有足夠的吸引力。3.5本章小結(jié)本章是站在用戶角度從網(wǎng)站的業(yè)務(wù)需求去分析，再去敘述網(wǎng)站的功能需求，最后總結(jié)了網(wǎng)站的可行性。系統(tǒng)功能是基于用戶的需求，用戶需求同時也是開發(fā)的主要根據(jù)，所以一個網(wǎng)站的開發(fā)是需要

28、進(jìn)行全面系統(tǒng)調(diào)研，從用戶出發(fā)，以技術(shù)為基礎(chǔ)，統(tǒng)籌全局，完成目標(biāo)。第四章 項目設(shè)計4.1整體架構(gòu)設(shè)計基于系統(tǒng)各方面的分析，堅持高內(nèi)聚，低耦合1黃遠(yuǎn)洋.基于HTML5和CSS3的響應(yīng)式Web的設(shè)計與實現(xiàn)D. 華北電力大學(xué), 2018。將該視頻教程網(wǎng)站前后臺分離開發(fā)，最后再將其鏈接起來。整體架構(gòu)如下圖所示，為了能夠?qū)崿F(xiàn)更多的需求，提高瀏覽量，前端模塊主要分為首頁、開放課程、特訓(xùn)班、資源導(dǎo)航、網(wǎng)站介紹、購買課程、視頻播放、登錄注冊頁面。不同頁面主題不同，涉及內(nèi)容不同，設(shè)計規(guī)劃不同。首頁分為導(dǎo)航欄，主圖，主題課程三大塊；開放教程、特訓(xùn)班、資源導(dǎo)航的結(jié)構(gòu)類似，以導(dǎo)航欄和對應(yīng)課程信息和資源信息為主；網(wǎng)站介紹

29、分為四大塊，分別是關(guān)于我們，聯(lián)系我們，企業(yè)合作以及樹人公益；購買課程頁面主要為價格部分和教程內(nèi)容部分；視頻播放頁面將分為四個部分，每一部分對應(yīng)不同內(nèi)容。后臺模塊是管理人員操作的地方，頁面要求簡潔，操作標(biāo)志要清晰，分為用戶信息管理，課程信息管理，評論管理三個頁面，與大部分后臺管理頁面類似，都是以菜單，信息內(nèi)容及操作構(gòu)成，課程信息管理頁面為左右結(jié)構(gòu)，信息管理頁面和評論管理頁面則為上下結(jié)構(gòu)。圖4-1 視頻教程網(wǎng)站架構(gòu)4.2前端模塊4.2.1網(wǎng)站形象設(shè)計（1）網(wǎng)站標(biāo)志：該視頻教程網(wǎng)站希望傳遞一種當(dāng)下，進(jìn)行時的觀念，也就是趁現(xiàn)在，學(xué)你感興趣的，做你想做的，所以直接取英文單詞Learning進(jìn)行設(shè)計作為網(wǎng)

30、站標(biāo)志。（2）網(wǎng)站主色調(diào)：網(wǎng)站主色調(diào)是網(wǎng)站形象的代表，主色調(diào)的確定要和網(wǎng)站內(nèi)容貼合。視頻教程網(wǎng)站是用前沿的互聯(lián)網(wǎng)技術(shù)去進(jìn)行網(wǎng)絡(luò)授課，而且該教程網(wǎng)站是以軟件學(xué)習(xí)為主，專業(yè)性強(qiáng)。所以網(wǎng)站以中性調(diào)的藍(lán)色為主色調(diào)，既不失專業(yè)性又不過于嚴(yán)肅。（3）網(wǎng)站的宣傳標(biāo)語：網(wǎng)站的宣傳標(biāo)語也是網(wǎng)站的主旨，該教程視頻網(wǎng)站希望愛好和學(xué)習(xí)結(jié)合起來，學(xué)習(xí)自己感興趣的事物，可以以此來豐富自己的技能，所以網(wǎng)站的標(biāo)語是“學(xué)習(xí)你感興趣的”，簡單但又突出重點，以英文的形式表達(dá)并放置于底部，希望大家能開心學(xué)習(xí)，獲取成長。4.2.2登錄模塊（1）注冊登錄界面是網(wǎng)站必不可少的模塊，是用戶第一體驗到網(wǎng)站的功能，網(wǎng)站收集用戶填寫的信息，可對其

31、賦予相應(yīng)的權(quán)限。因為該模塊的功能比較簡單，所以設(shè)計要簡約，在顏色和距離比例上掌控細(xì)致，讓整個界面變得更加流暢，舒適。圖4-2 登錄界面（2）在注冊之后會自動轉(zhuǎn)到登錄頁面，用戶可由此登錄首頁，首頁上半部分是主圖的輪播，輪播圖有利于聚焦用戶的視線，展示網(wǎng)站的特點，提高瀏覽量，下半部分是一些熱門課程的介紹，這是展示網(wǎng)站信息的模塊，課程有難度級別的區(qū)分，用戶可直接點擊觀看或者收藏。圖4-3 首頁界面4.2.3免費教程及資源展示模塊（1）該網(wǎng)站的定位是視頻教程網(wǎng)站，所以教程展示模塊是本網(wǎng)站最主要，也是顯示率最高的一個模塊，為了聚焦吸引用戶，增加瀏覽量，展示教程信息，在不同頁面需要展示教程的模塊都做了一些

32、改動。首先是首頁部分用了相對緊湊的布局，同時增加了陰影和放大的動態(tài)效果，如下圖所示，每個主題教程由兩行，8個小方塊組成，采用的是上圖下文的模式，分別是教程封面，教程標(biāo)題，課程級別和收藏圖標(biāo)，字體大小不一，突出重點，行間距適中，視覺感受舒服。圖4-4 首頁課程（2）開放教程部分：其結(jié)構(gòu)與首頁部分是相同的，但其作用與首頁不同，這里的教程展示模塊目的性更強(qiáng)，完全就是為了對教程進(jìn)行一個更加全面細(xì)致的分類和介紹，所以是與菜單欄結(jié)合，菜單欄以軟件劃分，點擊不同軟件展示不同的課程。圖4-5 開放課程（3）資源模塊：是一個可以鏈接到其他學(xué)習(xí)網(wǎng)站和素材網(wǎng)站的資源分享頁面，分為音樂、圖片、視頻、色彩、軟件、圖標(biāo)六

33、個版塊，信息區(qū)域也是以圖文結(jié)合的方式展示，圖片是對應(yīng)網(wǎng)站的標(biāo)志，文字部分由網(wǎng)站的名稱和簡短介紹組成。圖4-6 資源導(dǎo)航4.2.4付費教程模塊（1） 購買課程部分：因為該視頻網(wǎng)站大部分課程是供用戶免費觀看的，所以付費課程相對較少，為了突出這一部分課程，采用了與其他兩部分不一樣的布局，用了左圖右文的形式，且版塊尺寸更大。圖4-7 付費課程（2）付費教程詳情模塊：將信息以豎直排列的方式呈現(xiàn)在網(wǎng)頁中，既可以購買全套課程，也可以只單獨購買自己需要的那部分，頁面布局飽滿，但又不至于擁擠，清晰突出了信息的主次，以不同顏色去強(qiáng)調(diào)信息的重要程度，引導(dǎo)用戶購買。圖4-8 付費課程詳情4.2.5視頻播放模塊（1）視

34、頻展示模塊第一部分為視頻播放窗口，第二部分為作者介紹，第三部分是留言板，第四部分為相關(guān)教程推薦。每一部分既有聯(lián)系但又相互獨立，這種布局方式是參考了很多主流視頻網(wǎng)站之后的結(jié)果，符合用戶的使用習(xí)慣，能夠讓用戶了解教程信息并表達(dá)觀點。圖4-9 視頻播放4.3后臺模塊4.3.1用戶信息和評論管理（1）界面設(shè)計如圖所示，左上角是頁面標(biāo)題，右上角兩個按鈕是鏈接到其他兩個管理頁面，主體是信息的展示和操作區(qū)域。頁面布局簡潔，便于后臺人員管理圖4-10用戶管理圖4-11 評論管理（2）點擊添加和修改會跳轉(zhuǎn)到布局相同的頁面，修改的則會在輸入框里顯示之前的信息，直接進(jìn)行修改提交即可，添加則要把信息填寫完整才可提交，

35、否則會有彈窗提示，如若不想進(jìn)行操作，即點擊返回，退回到信息展示頁面。圖4-12 修改用戶信息（3）刪除信息，操作框里的刪除按鈕被點擊之后可對選中的信息進(jìn)行刪除,之后會有彈窗的提示圖4-13 刪除用戶信息4.3.2教程信息管理（1）界面設(shè)計如圖所示，是各類教程的管理頁面，左邊菜單是本網(wǎng)站目前有對應(yīng)教程的軟件名稱，按照軟件劃分信息，更加直觀和清晰，易用性和友好性更強(qiáng)。右邊對應(yīng)可進(jìn)行刪除、修改、添加，此功能僅對管理人員開放，每進(jìn)行一項操作都會有對應(yīng)的彈窗提示。圖4-14 課程系統(tǒng)后臺（2）修改添加用戶信息，直接點擊相應(yīng)操作，跳轉(zhuǎn)到編輯頁面，可對教程的標(biāo)題，級別，封面，鏈接進(jìn)行添加或修改，圖片是填寫路

36、徑，后續(xù)在前端頁面渲染出來，填寫完畢之后提交，也可進(jìn)行返回的操作。圖4-15 修改課程信息（3）下架課程，直接點擊刪除，數(shù)據(jù)庫里就會沒有相關(guān)的課程信息，前端頁面也會下架該課程。圖4-16 刪除課程信息4.4數(shù)據(jù)庫設(shè)計4.4.1 E-R圖圖4-17 課程表、用戶表、評論表的E-R圖4.4.2數(shù)據(jù)庫表結(jié)構(gòu)根據(jù)網(wǎng)站的開發(fā)需求，設(shè)計相關(guān)的表結(jié)構(gòu)表4-1 用戶表字段名稱類型是否空值注釋uidint否主鍵idusernamevarchar否用戶名passwordvarchar否用戶密碼表4-2 課程表字段名稱類型是否空值注釋classidint否主鍵idclassstypevarchar否課程類型clas

37、stitlevarchar否課程標(biāo)題classlevelvarchar否課程等級classurlvarchar否課程鏈接imgurlvarchar否課程封面表4-3 課程評論表字段名稱類型是否空值注釋pubidint否主鍵idcommentvarchar否評論內(nèi)容4.5本章小結(jié)本章從前端模塊到后臺模塊，再到數(shù)據(jù)庫設(shè)計三大方面對該視頻課程網(wǎng)站進(jìn)行了詳細(xì)的設(shè)計介紹并用圖片加以描述。主要是課程展示模塊，視頻播放模塊以及后臺管理界面，突出了網(wǎng)站使用的便捷性和實用性。第五章 項目實現(xiàn)5.1前端核心功能（1）首頁焦點輪播圖：構(gòu)造slide，showindeximg兩個函數(shù)，分別是控制圖片自動輪播和手動控制

38、左右箭頭播放圖片，Jquery的eq()遍歷方法用于改變圖片右下角提示矩形的樣式，圖片的漸入漸出通過fadeIn()，fadeOut()來實現(xiàn)。1. functionslide()2. index+;3. if(index=L)index=0;4. $(#uls li).css(background,#CCC).eq(index).css(background,#666);5. $(#img-boximg).fadeOut();6. $(#img-boximg).eq(index).fadeIn();7. 8. functionshowindeximg(index)9. $(#img-boxi

39、mg).hide().eq(index).show();10. $(#ulsli).css(background,#CCC).eq(index).css(background,#666);11. 具體實現(xiàn)，首先獲取圖片存放的位置，具體采用的是Jquery的鏈?zhǔn)讲僮鳎?dāng)鼠標(biāo)懸停在圖片上是觸發(fā)第一個事件，即圖片的不會再自動輪播，顯示左右箭頭；移出鼠標(biāo)，觸發(fā)第二個事件，圖片又重新進(jìn)行自動輪播。1. varT,L;2. varindex=03. L=$(#ulsli).length;4. T=setInterval(slide,3000);5. $(#box).hover(function()6. 7

40、. clearInterval(T);8. $(#front,#later).css(display,block);9. ,function()10. T=setInterval(slide,3000);11. $(#front,#later).css(display,none););點擊左右箭頭切換圖片，首先判斷圖片的序號，當(dāng)操作已退回到第一張圖片時，依次從最后一張繼續(xù)退；如果切換到最后一張圖片則從第一張開始重新播放1. $(#front).click(function()2. clearInterval(T);3. varlen=$(#ulsli).length-1;4. varimgsh

41、owindex=$(#img-boximg:visible).index();5. if(imgshowindex=0)6. index=L;7. else8. index=-imgshowindex;9. 10. showindeximg(index);11. );12. $(#later).click(function()13. clearInterval(time);14. varimgshowindex=$(#img-boximg:visible).index();15. index=+imgshowindex;16. if(index=L)17. index=0;18. showin

42、deximg(index);19. );（2） 點擊列表切換課程以及動態(tài)顯示課程將所有選項放在標(biāo)簽里，獲取課程的類型，點擊導(dǎo)航里的課程，下面就顯示相對應(yīng)課程。定義一個簡單的動畫，實現(xiàn)列表的移動，再根據(jù)移動距離去判斷顯示那個箭頭。1. varmove=$(.classify).width()-130;2. varmoveline=0;3. $(.classifyulli).each(function()4. moveline+=$(this).outerWidth();5. )6. vari=0;7. $(.next).click(function()8. $(.classifyul).anim

43、ate(9. margin-left:-move+px10. ,500)11. i+;12. if(move+130)*i+(move+130)=moveline)13. $(.front).show();14. $(.lafter).hide();15. 16. )17. $(.front).click(function()18. $(.classifyul).animate(19. margin-left:0+px20. ,500)21. $(this).hide();$(.next).show();22. )23. )利用Ajax動態(tài)加載數(shù)據(jù)，顯示課程信息，請求數(shù)據(jù)使用的是Get的方式，

44、url:鏈接請求數(shù)據(jù)庫的PHP頁面，data:向后臺傳輸數(shù)據(jù)，datatype:加載json格式的數(shù)據(jù)，如果成功則執(zhí)行回調(diào)函數(shù)，在該函數(shù)里首先創(chuàng)建了一個空字符串用來存創(chuàng)建的HTML，在id名為group cont里面的ul添加html,循環(huán)后臺傳過來的數(shù)據(jù)，賦值給對應(yīng)的位置。1. functionshowcontent(classstype)2. 3. $.ajax(4. type:GET,5. url:./php/list.php,6. data:7. classstype:classstype8. ,9. datatype:json,10. success:function(data)11

45、. varhtml=;12. for(vari=0;idata.length;i+)13. html+=).concat(datai.classtitle,).concat(datai.classlevel,);14. 15. $(#group.boxul).html(html);16. 17. );（3） 多頁顯示課程：付費課程部分需要兩個頁面才能完整的將所有課程顯示出來，所以采用了Js點擊事件實現(xiàn)翻頁效果，將第二個頁面先隱藏，在頁面最下方顯示頁碼，并給他們添加點擊事件。1. 2. 3. 14. 5. 26. 7. 8. 9. functionshow1()10. document.getE

46、lementById(mid).style.display=block;11. document.getElementById(mids).style.display=none;12. ;13. functionshow2()14. 15. document.getElementById(mids).style.display=block;16. document.getElementById(mid).style.display=none;17. （4） 評論模塊：一共有三部分：輸入框、發(fā)表按鈕、評論區(qū)，應(yīng)用from表單獲取相關(guān)數(shù)據(jù)，點擊按鈕觸發(fā)事件，動態(tài)創(chuàng)建表格，并將內(nèi)容插入。1. 2.

47、3. 4. 5. 6. 7. 8. 9. 10. 1. $.ajax(2. type:GET,3. url:./php/list2.php,4. data:5. comment:$(#comment).val()6. ,7. datatype:json,8. success:function(data)9. $(.box1).html();10. $.each(data,function(index,value)11. varpubid=value.pubid;12. vartr=$().appendTo(.box1);13. $().appendTo(tr).text(ment);14. );（5）登錄注冊模塊：登錄注冊是需要提交數(shù)據(jù)的，所以將其寫在一個標(biāo)簽里，用JS實現(xiàn)登錄注冊的限制條件，當(dāng)用戶名密碼未填，或者兩次密碼填寫有差異，都會有彈窗提示。1. functionInputCheck(RegForm)2. 3. if(RegForm.username.value=)4. 5. alert(用戶名不可為空!);6