# **實訓總述**
本實訓報告手冊中項目來源于企業級項目開發實踐部分功能模塊，針對環境保護設計一款環保網站，手冊從實訓目標、實訓內容和實訓要求三個方面展開。實訓要求采用HTML&HTML5、CSS、JavaScript等技術，實現一個小型環境保護網站，主要設計實現六個頁面：首頁界面、空氣凈化、園林景觀、服務簡要、動態新聞和聯系我們。實訓項目以提高學生動手能力、實現企業項目與學校訓練無縫對接有效訓練的目的。本項目涵蓋了學生在校期間學習過的HTML&HTML5、CSS、JavaScript等知識，也涉及到了企業實訓課程學習的網站開發實戰經驗。很好的達到了“以企業真實項目為引領的學做一體化”教學目標。
《環保網站的設計與實現》項目主要訓練了HTML&HTML5、CSS、JavaScript等前端常用開發技術；該項目主要是在日常企業實訓課程的基礎上進行了加強訓練，以此來鞏固所學技術；同時訓練前端基礎知識和技巧的實際項目中的應用，又對前端知識及腳本技術進行了基礎訓練，為后續課程打下良好的基礎。
# **實訓項目一**
項目名稱：環保網站設計與實現
項目概述：隨著科技進步和社會生產力的提高，使人類得以創造出前所未有的物質財富。但與此同時，人口劇增、資源過度消耗、環境污染。生態破壞、國家或地區之間貧富差距擴大等全球性問題也日益突出，嚴重阻礙了人類社會的長遠發展和生活質量的提高，甚至對人類未來的生存和發展構成了威脅。做這個網站就是為了提倡大家關愛自然，尊重生命，保護自然環境，維護生態平衡，積極需求解決方案，本系統要求以環保公司為背景，實現首頁界面、空氣凈化、園林景觀、服務簡要、動態新聞和聯系我們六個界面。
項目技術：實現技術為HTML&HTML5、CSS、JavaScript，采用開發工具為HBuilder X。
## **實訓目標**
| 目標序號 | 目標內容 |
| --- | --- |
| 目標1 | 掌握主流的前端設計開發工具HBuilderX等，并可以熟練利用工具進行項目開發。 |
| 目標2 | 掌握HTML&HTML5在實際設計過程中的使用場景。 |
| 目標3 | 掌握CSS實現網頁布局和美化的功能。 |
| 目標4 | 掌握JavaScript在前端交互中的應用。 |
## **實訓內容**
| 內容序號 | 詳細內容 |
| --- | --- |
| 內容1 | 使用HTML&HTML5、CSS和JavaScript技術進行企業級項目開發 |
| 內容2 | HTML&HTML5在企業級項目中的應用 |
| 內容3 | CSS布局美化功能，JavaScript的前端交互功能 |
| 內容4 | 前端開發規范訓練 |
## **實訓要求**
本次實訓以個人為單位進行實訓，根據實訓指導手冊和課程配套資源獨立完成實訓項目，并進行項目答辯及提交實訓總結報告。
通過本次企業的實訓，學生應該掌握HTML&HTML5、CSS、JavaScript在實踐中的應用，熟練使用HTML&HTML5、CSS、JavaScript等技術進行前端開發，并最終能將相關知識運用到實際的開發過程中。在此過程中，學生尤其要注意掌握CSS的布局和美化功能，掌握JavaScript的前端交互使用。該實訓案例包含了前端基礎知識的運用。
該項目分三個階段，主要針對不同層次學生展開，第一階段面向全體同學，尤其是基礎薄弱同學，采用邊講邊練的方式進行，每位同學都能掌握系統一個模塊的完整開發流程。第二階段面向技術中等同學，在第一階段基礎上，給與指導分析和答疑，其余工作全部由學生獨立完成。第三階段面向技術相對比較好的同學，只提供答疑，每位同學至少獨立完成三個以上功能模塊。
第一階段，所有學生在老師的指導和講解下完成需求分析、用戶界面設計、制定進度計劃、任務進度控制表、周會議安排一次、測試計劃、測試用例、測試報告和問題解答列表，同時在老師講解下完成首頁界面代碼編寫任務。學生需每日提交項目進度報告。
第二階段，技術中等同學嘗試完成一到兩個界面從需求分析、用戶界面設計、制定進度計劃、任務進度控制表、周會議安排一次、測試計劃、測試用例、測試報告和問題解答列表，到完整編碼實現的開發流程。此階段老師提高指導分析和問題答疑。
第三個階段，技術相對比較好的同學，獨立完成至少三個以上界面的設計和美化的全部開發流程，此階段老師只提供答疑。
### **1.1 案例分析**
（1）前端：采用HTML&HTML5、CSS、JavaScript框技術，網站整體結構如圖1所示：
首頁頁面為網站入口頁面，只有通過網址打開方可使用系統，所有用戶打開網站之后都可以看到環境保護網站的首頁頁面。
首頁頁面地址：index.html。
該頁面整體布局分為上中下，上面為導航菜單和圖片。中間為內容區，下面為頁腳區，顯示聯系郵箱、聯系地址，聯系QQ，聯系電話，以及聯系我們，版權所有、ICP備案、資源活動、法律聲明和環保方案。
中間內容區：服務介紹（垃圾分類、植樹造林和污水處理）、數據列表項、關于我們和志愿活動，要求每部分都要有圖片和文字說明。
服務介紹：垃圾分類、植樹造林和污水處理。
垃圾分類：四張圖片和對應文字解釋。
植樹造林：四張圖片和對應文字解釋。
污水處理：四張圖片和對應文字解釋。
數據列表項：展示垃圾分類改造發現次數、涉足新興市場數量、突破性發現數量、改造回放數量。
關于我們：圖片、標題、內容摘要、了解更多。
志愿活動：三張圖、文字描述、簡要介紹過長后用三個“…”替換。
通過導航菜單，可以從首頁點擊其它頁面，如：空氣凈化、園林景觀、服務簡要、動態新聞和聯系我們等頁面。
（2）空氣凈化頁面
該頁面整體布局分為上中下，上面為導航菜單和圖片。中間為內容區，下面為頁腳區，顯示聯系郵箱、聯系地址，聯系QQ，聯系電話，以及聯系我們，版權所有、ICP備案、資源活動、法律聲明和環保方案。
中間內容區：空氣凈化頁面顯示凈化案例2-3項，比如XXXX有限公司污水治理項目，有核心介紹文字展示，同時有MORE按鈕，點擊可以打開新的頁面，查看詳情。有XX環保公司重金屬治理項目，有核心介紹文字展示，同時有MORE按鈕，點擊可以打開新的頁面，查看詳情。
空氣凈化頁面通過導航菜單也可以跳轉到首頁、空氣凈化、園林景觀、服務簡要、動態新聞和聯系我們等頁面。
（3）園林景觀頁面
該頁面整體布局分為上中下，上面為導航菜單和圖片。中間為內容區，下面為頁腳區，顯示聯系郵箱、聯系地址，聯系QQ，聯系電話，以及聯系我們，版權所有、ICP備案、資源活動、法律聲明和環保方案。
中間內容區：園林景觀頁面顯示景觀摘要和建筑園林。
景觀摘要里面顯示保護自然和保護環境，要求有圖有文字展示，核心內容介紹公司經營理念和公司保護自然和保護環境的努力成果。
建筑園林介紹公司做過的魅力建筑、凈化的園林，要求有圖有文字展示。以及對圖片內容的文字解釋。
（4）服務簡要頁面：
該頁面整體布局分為上中下，上面為導航菜單和圖片。中間為內容區，下面為頁腳區，顯示聯系郵箱、聯系地址，聯系QQ，聯系電話，以及聯系我們，版權所有、ICP備案、資源活動、法律聲明和環保方案。
中間內容區：服務簡要頁面有三個標簽，分別是：環保工程、大氣工程和水處理工程，每個標簽下5張圖片，要求按照一定的規則整齊排列，點擊不同圖片跳轉到不同的案例頁面。每個圖片都要和標簽對應一致。服務簡要頁面主要展示公司所從事服務的行業案例圖片展示。
（5）動態新聞頁面：
該頁面整體布局分為上中下，上面為導航菜單和圖片。中間為內容區，下面為頁腳區，顯示聯系郵箱、聯系地址，聯系QQ，聯系電話，以及聯系我們，版權所有、ICP備案、資源活動、法律聲明和環保方案。
動態新聞主要是新聞列表要求以年月日為層，有新聞的標題、新聞內容簡要概述。通過點擊新聞標題，后續可以實現跳轉到對應的新聞界面。新聞列表默認展示當前最新的5條新聞。動態新聞頁面主要展示公司所從事服務的行業案例新聞的信息。
（6）聯系我們頁面：
該頁面整體布局分為上中下，上面為導航菜單和圖片。中間為內容區，下面為頁腳區，顯示聯系郵箱、聯系地址，聯系QQ，聯系電話，以及聯系我們，版權所有、ICP備案、資源活動、法律聲明和環保方案。
中間內容區為：聯系我們，要去提供核心介紹文字，提供用戶可以留信息的表單，如：姓名、手機號、郵箱和地址，用戶通過提交按鈕可以提交聯系方式。此處只設計出界面，不實現具體功能。
### **1.2 案例設計**
項目案例設計以本綜合項目涉及的實現難點為切入點，下面針對這個六個頁面展開分析與設計，同時引導學生自主自發的完成一個類似的獨立項目。
（1）首頁界面如圖所示：
