網頁設計報告范例

一、《ASP動態網頁設計》的教學現狀

在進行ASP動態網頁設計學習過程中最忌諱的問題之一就是設計代碼中出現單詞拼寫錯誤。這并不是一個嚴重性的問題，但是其會影響ASP動態網頁的應用。這一問題出現的主要原因是中職學生英語水平低，未能有效的掌握ASP動態網頁代碼編寫中需要運用的英語單詞，在進行代碼編寫中就會出現英語單詞拼寫錯誤的情況。對于此種情況，中職學校一定要注重英語課程教學，在課程教學中插入一些關于ASP動態網頁設計方面的英語知識、英語單詞等，促使學生在進行ASP動態網頁設計過程中不會再出現單詞拼寫錯誤的問題。

二、“一體化”教學方法的應用

“一體化”教學方法就是指教學內容、教學形式在“講”和“練”兩方面做到有機結合，專業理論與實踐操作做到有機結合。讓師生雙方邊教、邊學、邊做，邊發現問題，邊提高，把理論和實踐緊密結合起來，不斷提高學生技能水平，完成教學任務和目標。由ASP動態網頁設計課程專業性強。涉及面廣等特點所致，在運用“一體化”教學方法之前一定要就課程。學生、教學情況等方面進行詳細的分析，進而制定有效的，合理的教學方案。需要注意的是要保證所設計的教學方案能夠提高學生的學習興趣，積極主動投入i到課程學習中。下面就教學案例的實施和教學過程說明如下：

（一）教學設備與場地

集中在計算機實驗機房開展教學。設備配置保證能做到全部學生一人一臺計算機，提供局域網環境進行、測試論壇。

（二）教學目標清晰，分階段完成

摘要：西安翻譯學院的面向非計算機專業本科學生所開設的“網頁設計”課程是一門公共基礎課，也是3個信息技術課程中的一門必修課，共計32課時（其中理論16課時、實踐16課時）。如何讓學生在有限的時間內全面提高信息技術的處理能力和素養水平，一直是本課程教學團隊研究和探索的重要話題。文中主要從學情分析、線上線下的教學模式、過程考核及學生成績這幾方面來闡述本課程的改革內容及效果。

關鍵詞：網頁設計；混合式教學；教學模式；過程考核

0引言

在我校2017版本科專業人才培養方案的指導性意見中指出非計算機類專業的計算機應用類課程體系：計算機學習注重計算機應用能力培養與專業需求相結合，采用“必修＋選修＋自主學習”模式，即實行三層次教學，第一層次為必修課程，是為了加強學生對計算機基礎知識、辦公軟件的學習能力以及程序設計能力培養；第二層次為選修課，為通用性技術基礎教育；第三層次為了加強學生自主學習能力，采取“專業指導＋專門訓練”模式，主要依據專業特點設置計算機應用類專題模塊。我校的外語類專業的人才培養模式是“外語＋專業＋現代技能”，非外語類專業的人才培養模式是“專業＋外語＋現代技能”，無論哪個專業，其中計算機基礎是現代化技能重要組成。

1該課程學生學習的現狀

1．1“網頁設計”課程定位。該課程是所有非計算機專業的通識必修公共基礎課，是一門操作性和實踐性很強的課程，學生在完成了先修課程“大學計算機基礎”、“高級辦公自動化”的學習后，掌握了計算機基本知識和原理以及一些辦公應用軟件的使用，本課程旨在以實用為原則，培養學生的計算思維、創造性思維、探究式學習等應用能力，以適應“互聯網＋”時代社會對人才的需求［1］。其主要內容包括創建與管理站點；設計基本圖文網頁；使用圖像、多媒體和超鏈接等技術制作網頁；利用表格、層和Spry菜單、框架排列網頁中的數據，設計使用CSS＋Div樣式美化布局網頁、給網頁對象添加行為特效、創建表單網頁、使用模板和庫制作小型網站等。

1．2“網頁設計”課程目標。以學生能獨立完成靜態網站開發和維護的實際工作能力為學習目標，要求學生掌握HTML語言的文檔結構和基本標簽使用，能綜合應用DreamweaverCS6軟件、HTML和CSS技術制作網頁，掌握規劃、開發、和管理靜態網站的專業知識和技能。通過這種有代表性的網頁制作軟件的使用，掌握網站設計的全過程，并能熟練地制作出有專業水準的網站，培養學生克服困難的精神、理論應用于實踐和解決實際問題的能力，為今后的工作打下良好的基礎［2］。通過本課程的學習，使學生掌握網絡信息檢索方面的知識；在網站制作的過程中要對站點進行建立并實時管理，具備文件及文件夾的整理及管理能力；不僅鞏固了一年級學習的文檔處理能力等一系列的過程，而且還綜合利用本階段所學知識在課堂上自主完成網站的需求分析、網站設計和網站測試，體現了對學生信息素養能力、計算思維能力和探究式學習能力的培養，有效發揮了考核的激勵作用，為學生的終身學習奠定基礎［3］。也使非計算機專業類本科學生的計算機知識在在校期間學習最后一門計算機課程“網頁設計”中都能夠融會貫通。

摘要：

本文分析電子商務專業學生學習網頁設計與制作課程教學現狀，并探討了電子商務專業網頁設計與制作課程教學設計、實施及考核環節，通過該課程教學改革提高學生學習興趣，并能提升個人建設網站的綜合能力和素質。

關鍵詞：

電子商務；網頁設計與制作；學習反饋；任務循環

1網頁設計與制作課程教學現狀

（1）學生欠缺計算機和美學設計基礎知識。

沒有計算機基礎課程，且課程學習課時較少，對網頁基礎知識理解較為費解，美學設計的欠缺，導致網頁設計能力差，雖然能夠也能制作簡單網頁，往往布局不合理。審美能力弱，有時追求個性，制作的網頁往往花里胡哨，內容和主題不一致，導致網頁視覺效果差。

摘要：基于Web技術的應用程序在網絡中使用的越來越廣泛，因此網頁設計師及網站開發者越來越受到重視，并且對他們的需求量也急劇增加。本文討論了網頁設計師和網站開發者需要掌握的技能和知識，并從教學內容、教學方法和教學評價方法三個方面詳細闡述了網頁設計與開發課程體系的建設。該課程體系目前正在應用于當前的教學過程中，并取得了一些較好的效果。

關鍵詞：課程體系建設；教學內容；教學方法；教學評價

隨著計算機和網絡的迅速發展和普及，越來越多的人喜歡通過網絡獲取信息，很多企業都想通過網站信息從而宣傳自己。在這樣的情況下，企業需要更多的網頁設計師和網站開發人員為自己的公司建立網頁，從而打造形象和銷售產品。根據社會對人才的市場需求，高職院校確定其培養目標為培養高素質和高技能的應用型人才。如何設計具有創新風格的網頁，成為高職計算機專業學生所必須掌握的技能。為了滿足社會的需要，大多數高校都開設了網頁設計與網站開發課程，該課程教授學生如何設計網頁和開發網頁網站。

一、網頁設計與網站開發的崗位技術分析

網頁設計和網站開發都需要有專業的技能，這些技能涉及網絡技術、編程技術以及動畫設計等知識?；诰W頁設計與網站的不同的社會需求，將職位劃分為網頁美工設計師、網頁設計師、動態Web網站開發和網站維護人員。1.網頁美工設計師。該職位強調網頁的視覺設計，且設計師應該有比較好的審美能力和創新能力，并且對色彩和平面設計有自己獨到的見解。網頁美工設計師還可以規劃網頁的布局和設計獨特的網頁。2.網頁設計師。網頁設計師應具備一定的美術基礎，熟悉網頁開發的步驟和流程，并且應該精通HTML、XHTML、CSS、CSS+DIV和JavaScript等設計語言。3.動態Web開發人員。該職位旨在從后端數據庫訪問數據并顯示這些數據。動態Web開發人員應該具有網頁設計知識，可以開發后臺應用程序并將其嵌入到HTML語句中。動態Web開發者還可以測試、上傳和整個網站。另外，動態Web開發者也應該精通PHP、asp或jsp，而且熟悉SQLServer、MySQL或Oracle等數據庫。4.網站維護人員。該職位的工作人員主要是處理和網站投入使用后的相關信息。網站維護人員必須處理網站在使用過程中所出現的所有問題。網站維護人員應具有一定的網頁設計與動態網頁開發知識和技能，并且能夠提高網站的性能和可靠性，使用搜索引擎優化信息，推廣網站。通過上面對網頁設計與網站開發的職業分析，我們知道網頁設計師和網站開發者應該具有設計網頁能力、編程能力、藝術視覺能力和網站維護管理能力等。因此，我們應該構建一系列培養學生這些技能的課程體系，而不是一個單一的課程。這些課程是相互依存、相互貫通的，并構成了一個整體課程體系。

二、課程體系的內容

高職院校的目標是培養學生的職業能力，所以所開設的課程應該是以職業能力為本。根據網頁設計和網站開發職位技能要求，設置為有關圖形和圖像、網頁設計、動態Web開發、網站管理和維護的相關課程。不同的課程有不同的主題和內容，但是這些課程都專注于同樣的目標———網頁設計與網站開發。因為課程包含的知識點非常多，因此合理的整合與劃分教學內容是有益于教學效果的。1.設置圖形和圖像課程。如今，一個內容豐富、富有創意的好網頁能長時間的吸引顧客的目光。設計師喜歡使用圖標、圖片和動畫美化他們的網頁，因此在開始設計網站之前，學生應該有對圖標、圖片和動畫的一些想法。根據所用的軟件功能、適用性和難易程度，設置有關Photoshop、CorelDraw和Flash等圖像處理軟件如何使用的課程內容，通過這些課程，學生對圖片的顏色和構圖處理等就會有一些自己的想法，他們可以使用這些軟件處理圖像和制作動畫。2.設置網頁設計課程。網頁設計的目的是使用一個有吸引力的網站風格來顯示信息。HTML語言是網頁設計的基礎語言，該語言是貫穿在整個教學過程中的。事實上，理解了HTML語言是有益于熟練掌握使用Dreamweaver網頁制作軟件的，因此HTML對于一個好的網頁設計師來說是必須掌握的。不過，一個專業的網站是不能僅僅依靠HTML就能制作出來的，因此作為目前廣泛用于管理界面網頁的設計，它有效的彌補了HTML的缺點，可以說，一個網站的內容和構架由HTML決定，而網站的表現形式卻由CSS決定。類似的，Dreamweaver也是一款網頁設計的非常好的軟件，它能夠提高網頁設計的效率，也能有效地管理和組織網站文件。除此之外，JavaScript語言也是網頁設計中一門非常重要的語言，JavaScript決定網頁的動作行為，并產生一些特殊效果。3.設置動態Web開發課程。編程語言和數據庫是動態Web開發課程中必學的兩種技能。目前，比較流行的Web編程語言主要有jsp、asp和php，而廣泛使用的數據庫主要有Oracle、SQLServer、MySQL等數據管理系統。根據企業的需求，我們選擇PHP作為Web編程語言，選擇MySQL作為主要的數據管理系統。因此，動態Web開發課程主要包含的兩門課程為PHP編程語言和MySQL數據庫。對高職院校的學生來說，教授他們如何使用數據庫比教授他們有關數據庫的理論知識更重要，高職學生只需掌握如何創建數據庫、連接數據庫以及添加、刪除、編輯、查詢數據表單以形成數據庫的相關技能。在教授這些課程時，可以選擇網上購物項目作為教學項目的案例。4.設置網站管理和維護課程。企業網站在用戶使用之后對網站的數據管理、維護、網站推廣和網站優化等處理都是很重要的工作，網站管理和維護的相關課程分析了網站的設計和其構架的可改進意見。這些課程涉及的相關技術有搜索引擎優化（SEO）技術和一些著名搜索引擎的排序方法。

【摘要】基于翻轉課堂的混合式教學模式是將翻轉課堂和混合式學習進行有效整合、優勢互補的一種新型教學模式?！毒W頁設計與制作》課程具有很強的實踐性和創造性，與翻轉課堂廣泛采用的研討式、項目任務驅動式學習模式相吻合，筆者在課堂教學中對“基于翻轉課堂的混合式教學模式”進行了有效的探索與實踐，取得了較好的教學效果。

【關鍵詞】翻轉課堂；混合式學習；《網頁設計與制作》課程；教學模式

近年來，由于信息技術和網絡技術的不斷發展和普及，涌現出了混合式教學、慕課、微課、翻轉課堂等基于信息技術和網絡的教學新模式及資源新類型[1]，為傳統的教學模式帶來了機遇和挑戰，如何在“互聯網+”時代實現信息化教育與傳統教育優勢互補是擺在一線教師面前的現實問題。基于翻轉課堂的混合式教學是現今教學改革與實踐的熱門課題，為傳統教學模式改革、數字化教學資源建設、創新性教學評價提供了技術支持與資源保障[2]。

一、基于翻轉課堂的混合式教學模式簡述

基于翻轉課堂的混合式教學模式，是將翻轉課堂和混合式學習進行有效整合、優勢互補的一種新型教學模式。新媒體聯盟和美國高校教育信息化協會共同的《地平線報告2016高等教育版》把翻轉課堂視為高等教育領域一年內投入使用的技術，也是最常用的混合式教學模式之一[3]。

二、構建基于翻轉課堂的《網頁設計與制作》課程混合式教學模式的優勢

（一)《網頁設計與制作》課程教學存在的問題

【摘要】

目前，生態化的需求不僅僅局限于自然環境領域，已慢慢滲透到社會生活的各個方面，教育領域也不例外。教學模式作為教學活動中的重要組成部分，教育生態化要想實現，教學生態模式的實現必不可少。隨著慕課逐漸進入日常的課程教學中，應用慕課這種形式，并將與日常的課堂教學方式相結合，這種形式猛烈沖擊了傳統的課堂教學模式。而在將慕課與網頁設計課程的相結合，并以此來構建教學生態模式的過程中，如何解決教學內容與各教學模式之間的對應關系、教師與學生在此過程中的地位和作用以及學習方式等成為急需解決的問題。

【關鍵詞】

慕課；網頁設計課程；構建策略；教學生態模式

在信息時代，各種各樣的新技術和新理念對課程資源和教學模式產生巨大的沖擊。在混合學習和移動學習的大背景下，多種樣式的新課程形式在這一大環境下應運而生，其中也包括規模大的、在線的、低門檻的課程形式———慕課，慕課的出現對傳統的知識傳輸形式產生一定的影響。本文從慕課這一課程形式出發，以教學生態為理論基點，結合社會對網頁設計人員的實際要求，來探討網頁設計課程的教學生態模式的構建策略。

1．慕課與網頁設計課程的教學生態的相關性分析

慕課與網頁設計課程教學生態的相關性分析可大致劃分為以下幾個方面：慕課與教學生態理念相互影響的大背景、學習輔助環境分析和網頁設計課程的教學與市場需求之間的矛盾等三個方面。

1色彩

①淘寶網頁采用的主色調是：黑白桔———桔色標題欄，白底，藍色字體。整體顏色搭配合理，但是色彩的亮度及飽和度不高，給人一種陳舊的感覺，在淘寶網站看東西，網頁產品、產品介紹字樣的色彩都比較暗淡，給人一種山寨的感覺，相比較而言，聚美優品的網頁產品、產品介紹字樣的色彩相對都比較明亮，給人清新認真的感覺，映襯出聚美優品不賣假產品的理念，然人們放心。改進方法與建議：增加網頁圖片的飽和度和亮度，是網頁產品圖片看起來更清新明亮，給顧客以美好的視覺感受。②產品介紹字跡的顏色變化：當鼠標選中一個產品文字介紹的時候，產品文字介紹就會變成橙色，這種顏色不夠宣明，需要人們集中更大的精力去收集這些信息。其次，如圖所示凸顯在圖片之上的方框文字介紹有畫蛇添足的嫌疑。改進方法與建議：a看這些顏色較淺的文字時需呀注意力很集中，將產品的文字介紹黑色字體加粗顏色加深，使之涵蓋的信息易于被客戶吸收，減少因讀取信息而產生的視覺疲勞；b當鼠標放在文字上時，字體顏色變為深紅色，相應的圖片放大呈現在原圖片的上方。

2視覺

淘寶網頁上推薦產品時一個頁面排布密集，展示的產品過多，也達不到所要想達到的目的。造成視覺盲區。改進方法與建議：產品排列不要過于密集，根據最佳視域的原理橫排不應展示超過5個產品。

3頁面布局

淘寶網網頁布局頁面下方經常太過擁擠，動態圖片過多，另一方面淘寶內容較多、頁面過長、推薦較多，容易使用戶產生煩悶情緒，失去瀏覽網頁內容的耐心。切換頁面有兩個，上下兩個讓人“目不暇接”，抓不住圖片內容，容易讓人煩躁。此外，網頁不分人群、性別盲目提送，讓不少顧客感到厭煩，抱怨電商智商不高，例如作為一個男生，一般情況下，對女性美容美妝用品不感興趣，因此淘寶賬戶推送給該產品很不高明。改進方法與建議：采取切換頁面一個，在圖片上方設置有文字提示選項，電商可以自動向顧客展示，顧客也可以自行選擇要看的內容，就像商場里需要服務員的時候她在，不需要的時候她也不會纏著你一樣，沒有綁架的推薦更容易讓顧客欣然接受，交易完成的幾率也就比較大。分類頁面采取橫排更加清晰整潔，更符合人人因工程視覺搜索的要求，字跡得得大小更符合人因工程的要求。下方空白處的圖畫更人親切感，不會那么的枯燥。

4logo

1傳統教學存在的問題

1．1知識點孤立，教學效果較差

傳統的網頁設計課程是按照教材的內容，講解HTML語言和DreamWeaver工具的使用。學生往往不能將所學知識聯系起來。學期結束后，學生對整個網站的構建缺乏清晰的概念，提交的作品質量較差。在對學生進行期中課程質量問卷調查中，80％的學生都認為課程所學內容可以理解，但是當教師要求學生動手完成網站時，90％的學生都不能很好完成。這正是因為在傳統教學中一般采用講授法和實驗法，一周2學時的理論講解，2學時的實驗課。教師按照教材章節進行教學并布置實驗內容，這樣就造成了學生只對單一章節知識的理解，難以將所學內容聯系在一起。

1．2教材過時，影響教學效果

網頁設計課程是一門應用極強的課程，技術和工具的更新換代較快。而與之矛盾的卻是教材的出版周期較長，往往跟不上技術發展的腳步。例如，當前，DreamweaverCS6已經成為主流網頁設計的軟件，但是一些教材還停留在講解Dreamweav－erCS3上，導致學生的興趣不高，不利于學生創造能力的培養，違背了教學目標的要求。同時，按照教材的內容講解也限制了教師的教學，目前高校中使用的網頁設計教材分為兩種，一種是基于理論性質的，單純講解HTML，一種是介紹Dreamweaver網頁開發的。前一種不適合非計算機專業學生學習，內容比較枯燥，學生在沒有計算機程序語言的基礎上很難理解。一般高校對非計算機專業學生都選擇使用第二種介紹Dreamweaver的教材，而該教材則會造成學生的開發水平較低，過度依賴工具，無法解決實際問題。

1．3教學方法單一，學生學習興趣不高

對于公共課來說，學習興趣是學生是否能學好課程的重要因素。對于計算機應用能力較差的非計算機專業學生來說，在學習網頁設計這門課程時，如何提高學生的興趣至關重要。傳統的網頁設計課程的教學采用2學時理論和2學時實驗課的形式進行，學生缺少動手的機會，往往使學生對課程缺乏興趣，這阻礙了學生的能動性與創造性的發揮。對學生進行調查問卷中，70％的學生都提出課程設置實驗時間較少，應將課程都安排在實驗室等問題，還有一些學生認為網頁設計課程應以提高學生興趣為出發點。這些都說明了學生對于增加自己實踐機會的渴望。