摘要
21世紀是信息化的時代，信息化物品不斷地涌入我們的生活。同時，教育行業也產生了重大變革。傳統的身心教授的模式，正在被替代。互聯網模式的教育開辟了一片新的熱土。
這算是對教育行業的一次重大挑戰。截至目前，眾多教育行業領頭羊，紛紛開辟互聯網化的教育模式。作為高校更不能例外。如今，任何一所高校都擁有自己的官方網站，以達到宣傳教育的目的。算是對互聯網教育的一種進步。
這次課程設計，主要以山東師范大學歷山學院為原型，制作WEB前端開發課程的課程設計網站。主要面向高校學生了解并熟悉Web課程，并且可以進行在線學習。同時通過課程設計網站，我們更能清楚了解課程的關鍵，更了解教師。甚至可以在線提交建議給老師。促進師生學習默契。
一、項目簡介
Web課程重在學習如何進行網頁設計，對同學們來說網站并不陌生，所以建設Web課程設計網站可能更易接受。同時，Web設計的老師，也是精通計算機的老師，對于網站的資源的上傳和管理，更能接受。
本次課程設計主要以山東師范大學歷山學院Web開發課程為原型進行設計。綜合考慮，教師簡介、學習資源、課程介紹等幾個方面進行重點功能開發。
同時建設教學網站也是非常有意義的。
二、項目功能分析
2.1 總體介紹
項目主頁主要包括：搜索欄目、菜單、時間及新聞、焦點圖、課程主要知識介紹、合作企業及網站底部等幾個模塊。
圖2.1 主頁展示
2.2 頁面頭部介紹
小工具條：作為小導航，主要輔助用戶跳轉到指定功能界面進行操作。顯示在界面最上方，左側提示歡迎信息，右側進行導航常用操作。
圖2.2小工具預覽
搜索欄目：作為一個頁面的重中之重開頭，使用左中右三欄布局，分別顯示網站Logo、搜索工具欄以及二維碼提示功能。其中搜索欄目下方包含熱點關鍵詞，用來推薦給用戶。用戶點擊之后即可直接搜索對應的關鍵詞。
圖2.3頁面頭部
手機訪問提示功能，綜合運用CSS和JS完成，實現鼠標移入顯示二維碼，手機掃描直接進入。如圖為移入顯示二維碼界面。
圖2.4手機訪問提示
2.3 導航欄設計
導航欄主要包括網站主要功能頁面的導航。并用顏色區分當前正在打開的網頁。
圖2.5導航
2.4 焦點圖和登錄導航界面
左側，焦點圖用來介紹特色課程設計。同時焦點圖采用高清大圖更有感染力。右側介紹登錄注冊以及講師的信息。
圖2.6焦點圖和登錄欄目
2.5 課程主要內容導航
主頁顯示主要內容大綱，更加了解Web課程信息：
圖2.7主要學習部分
2.6 合作企業展示
展示合作企業提升認可度，更為課程設計認證。
圖2.8合作企業展示
2.7 頁面底部
底部主要介紹學院微信公眾號二維碼，以及版權的相關信息。
圖2.9頁面底部設計
2.8 返回頂部設計
頁面右下角添加返回頂部的功能設計，當瀏覽到頁面底部的時候可以快速返回頁面頂部。
圖2.10返回頂部
三、主講教師
3.1 總體介紹
圖2.11
主講教師頁面主要介紹教師的榮譽信息、出版書籍、學生們對老師的評價
3.2 面包屑導航
面包屑導航主要顯示當前路徑，為用戶了解所在界面，方便用戶返回上一層。
圖2.12面包屑導航
3.3 教師主要信息
圖2.13 主要信息
3.4 教學經歷
運用時間軸的設計，顯示教師的教學經歷：
圖2.14教學經歷
3.5 出版書籍
展示主講教師的出版書籍的情況。
圖2.15出版書籍
3.6 教師評價
增加學生對教師的評價信息，更了解老師。
圖2.16 教師評價信息
四、實踐大綱&實踐項目
實踐大綱主要用來顯示Web開發設計的重要知識點，讓同學們，更知道那些是重點。
圖2.17學習大綱
實踐項目主要介紹Web開發的實踐項目要求：
圖2.18實踐項目
五、課程設計
重要的課程設計展示，以圖文結合的方式展開。
圖2.19課程設計
六、教學資源
本頁面提供教學資源的展示下載。可實現下載功能。并添加上傳資源鏈接進行設計。
圖2.20資源下載頁面
七、建議反饋
提供建議反饋功能，并可檢測用戶輸入并進行提示操作：
圖2.21意見反饋界面
八、主要技術實現
8.1 實時顯示時間
主頁實時顯示當前時間，采用定時執行函數，不斷獲取當前時間，并顯示在固定的位置。
圖3.1時間顯示代碼
8.2 焦點圖實現
焦點圖實現，布局采用左右布局，一次排列圖片，并設置固定大小超出范圍不顯示。根據偏移量控制圖片的顯示
圖3.2部分代碼顯示
8.3 手機快速訪問
利用二維碼技術實現，通過掃描二維碼即可進入網站，鼠標移動到“用手機訪問”鏈接，即可顯示圖片二維碼。
圖3.3二維碼顯示
8.4 下載功能
資源管理界面實現，下載文件功能。
圖3.4文件下載
8.5 意見反饋
意見反饋表實現校驗本地數據格式情況。
圖3.5意見反饋
九、遇到的問題解決辦法
首先最大的問題就是Web瀏覽器的兼容性問題，碰巧的是，一開始進行Web開發就嘗試在不同的瀏覽器之間進行測試，最終各個瀏覽器的效果大致相同。
在一個就是IE8及以下版本對getElementsByClassName方法不支持。所以自己通過寫了一個getElementsByClassName方法以應對低版本瀏覽器的情況。
.margin-top,margin-bottom不能正常顯示時有時會遇到外層中的子層使用margin-top不管用的情況這就需要在子層的前后加上一個div{height:0;overflow:hidden;}。
十、小結
課程設計的過程是個很好的復習過程，會把以前沒有接觸到的或者不熟悉的地方進行深刻理解，并加以運用。而這份不斷探索的學習過程是值得擁有的。自己的腦力勞動得以體現也是一種內心的自豪。
當然網絡也是個好東西，有的時上網查資料更方便，尤其是在不確定的知識點的時候，努力克服困難，尋找解決辦法。網站制作不是一份簡單的工作，要有廣博的知識面和很好的耐心，在以后的學習過程，會更加努力，更加細心，不斷學習各方面的知識，使自己更加完善。
)
)
