網頁設計論文大全11篇

緒論：寫作既是個人情感的抒發，也是對學術真理的探索，歡迎閱讀由發表云整理的11篇網頁設計論文范文，希望它們能為您的寫作提供參考和啟發。

篇（1）

二、考核方案

1.考核方案的制定

本考核采取學生小組合作（每組2-3名學生）完成一個規定主題網站項目的方式展開。總成績由操作考核成績、項目報告成績兩部分組成，權重分別為70％、30％，每一項按百分制評分后依權重比例計入總成績，總成績不及格者必須重修本課程并重新參加考試。因本校的現有學期總評成績是由平時成績30%、期中成績30%、期末成績40%組成，為了與學校的評分要求接軌，將本次考試所得的總成績作為學校學期總評成績的期末成績部分。并在此說明平時成績30%部分是由學生本學期的課程作業完成情況、出勤及上課表現綜合評定。本考核方案中的操作考核、項目報告都有具體的考核方案，其中操作考核實施的具體要求以試卷形式展現，內容要求以表“操作考核內容”為中心，以考核學生綜合網站制作能力為基本思路，通過小組合作完成主題網站的設計與制作，具體要求在此省略。此外要求學生撰寫項目報告不僅讓學生明確各自的份內工作，同時要求學生善于思考、總結，每做一個項目都有所收獲。項目報告實施的具體要求涉及以下幾個方面的內容：

（1）項目實施過程。項目實施過程包括前期策劃、資料搜集、網頁制作。在前期策劃階段，要求小組共同確定網站名稱、網站風格（列舉網頁采用主要色彩及網頁色調定位）、網站欄目、站點目錄結構的內容以形成完整的網站規劃，在此規劃的指導下進行資料搜集、協作完成網頁制作。其中網頁制作中要求頁面美工設計階段介紹所用軟件及提供至少首頁效果圖截圖；靜態頁面制作階段要求繪制網頁布局的結構圖及標注尺寸；程序開發階段列舉所用的開發工具、對數據庫、表進行截圖，以及繪制程序開發頁面流程圖。

（2）項目總結。對本項目完成情況進行分析、總結，并介紹項目實施過程中的收獲及體會。在作品展示時要求各小組派出代表對作品進行介紹，總結，便于相互交流經驗。

（3）項目組介紹。對該項目組成員進行介紹及項目實施過程中的人員分工情況進行報告。體現小組合作開發項目的工作模式，讓學生明白實際工作中不僅需要具備較高的技術能力，還要有合作意識，與合作者之間有效、和諧的溝通。

篇（2）

1.1案例教學法案

例教學法是一種具有啟發性、實踐性,能開發學生思維能力,提高學生判斷能力、決策能力和綜合素質的新型教學方——“分析案例”——“制作案例”的過程，培養學生分析問題，解決問題的能力，達到學習知識技能，靈活應用的目的。例如，在講解ASP中的Request對象時,教師先展示一個表單提交的案例，然后引領學生分析我們在點擊提交按鈕后，如何在另外一個頁面中，得到提交頁面相應的屬性值呢？學生在老師的啟發下動腦思考，引出Request對象的作用，接著教師講授Request對象的各種方法的使用。學生在深入理解后，運用知識制作此案例。

1.2任務驅動法

任務驅動法在課堂教學中，教師為學生布置上機操作任務，通過實際任務展開教學。學生通過親自動手操作，主動建構探究，培養了學生創新精神和實踐能力，提高了學生的綜合運用知識的能力。例如在學習表單制作時，以現實生活中注冊電子郵件為例，提出表單的概念，然后講解其實現理論，接著布置實際任務——投票系統，讓學生用知識去解決任務，進一步加深理解知識。

1.3分層教學法

成人的學習能力差異大，存在個體差異，因此，教學中采用分層教學法。在實際教學中，教師根據學生現有的知識、能力水平和潛力傾向把學生科學地分成水平各自相近的幾組，如A、B、C三組，A組是按大綱基本要求進行教學的學生；B組是按略高于基本要求進行教學的學生；C組是按較高要求（能發揮學生數學特長）進行教學的學生。學生分組不是固定的，而是隨著學習情況及時調整。每組布置知識程度不同的學習任務，并且在教師恰當的指導下，讓全體學生從各自的層面體驗成功的愉悅。

2模擬化網絡教學

開放教育是傳統教育與網絡教學相互融合的產物。網絡教學以其獨特的魅力在開放教育中發揮著越來越重要的作用。學習已經不再局限于課堂，學生只要有上網條件，無論何時何地，都可以方便的學習，打破了時間和空間的限制，因此，網上資源的好壞直接影響學生的學習效果。因此，筆者充分利用網絡資源，以教學大綱為依據，遵循厚基礎、重能力的原則，開發了此門課的模擬化網絡教學系統。此系統有“教學大綱”、“課程教案”、“模擬實驗”、“經典案例”、“自我測試”、“課程討論”等欄目。分層次，多模塊，手段直觀、豐富有趣的一系列實驗教學單元。制作文字、圖像、聲音、動畫于一體的豐富多彩的模擬實驗教學內容。模擬實驗教學的指導效率更高。使理論教學與實驗教學、基礎與前沿、經典與現代、實驗內容與實際應用有機結合，更有利于學生學習，并且可以反復閱讀，是面授課堂一種好的補充與強化手段。

3多樣化互動教學

3.1課堂互動

成人有豐富的社會閱歷和人生體驗,有更為強烈的對話意識和平等意識，因此,師生活動主要體現在，放下身段，深入到學生們之中，和他們們交朋友，交流心得，平等對話，互相學習。鼓勵學生大膽地表達自己的想法，暢所欲言，和學生共去探索知識的世界。所謂生生互動，就是學生和學生之間可以互相討論，交流心得。在實際操作中將學生分組，合作學習，這樣促使小組成員積極參與，培養學生團結合作意識，集體榮譽感。人機互動是學習《動態網頁設計》這門課必不可少的環節。只懂理論，不會應用，猶如紙上談兵，完全失去了學習的意義。所以，課上學生必須上機實踐，在實踐中掌握知識，消化知識，融會貫通。

篇（3）

因為瀏覽器對網頁的解析過程是等待整個表格都解析完成后，才會在瀏覽者的顯示器中顯示出表格中的所有內容，設計者應合理地應用表格，將頁面中某一塊的內容單獨地使用表格進行制作，這樣某一個表格下載完成后，瀏覽者都可以先查看顯示出的表格內容，省去了等待時間。因此靈活地動用小的表格構成整個頁面，避免使用大的表格。

2網頁設計時控制頁面的容量

一個好的網站，必定有很豐富的內容，設計者應該對網頁中的圖像、文本、多媒體和HTML文本的大小有一定的控制，使網頁在因特網上訪問時，能以最快的時間顯示出頁面上的所有內容。

3使用圖像的技巧

3.1選用合適的圖像格式。在網頁中常用的圖像格式是GIF、JPEG和PNG格式，JPEG壓縮率特別高，GIF更適合小圖像或小動畫，對于4KB以下的圖像文件，GIF比JPEG格式效果更好。

3.2控制頁面圖像的數量。在網頁中不要使用過多的圖像文件，因為每下載一個圖像文件，瀏覽器都向Web服務器請求一次連接，因此在制作網頁時，可以將多個小的圖像合并成一個圖像，減少圖像的下載數量，提高網頁的瀏覽速度。

3.3重用圖像。在一個頁面中，如果同一個圖像多次出現，可以使用客戶端瀏覽器的Cache。瀏覽器將從Cache中找到先前下載的圖像文件顯示，可以加快頁面瀏覽速度。

3.4圖像的大小。設計者在HTML代碼中手動書寫圖像標簽時，最好標記出圖像顯示的寬和高，頁面在顯示時，瀏覽器會根據圖像的高和寬在頁面中為圖像留出位置，在圖像下載完畢之前及時地顯示其周圍的文字內容，減少了瀏覽者等待的時間。

3.5不用圖片來敘述內容。同樣的文字內容，用文本儲存比圖片文件小得多，如果必須用圖片來解決一些因內碼不同而導致的亂碼問題，也要包含解釋文本，這樣即使瀏覽者關閉了瀏覽器的圖像顯示功能，也能明白表達的意思。

3.6使用低分辨率圖像。如果頁面中需要使用大圖像，就要用適當的方法解決大圖像顯示方法，使頁面能夠更快地顯示。一種方法是使用該大圖像的縮略圖，為該縮略圖設置鏈接、鏈接到原始的大圖像位置；另一種方法是使用低分辨率圖像，使用Dreamweaver提供的低分辨率源標記，讓低分辨率的圖像先下載，這樣瀏覽者就可以很快地看到低分辨率的圖像。

4使用JavaScript

在制作網頁時，為了使頁面具有一定的交互性和動態效果，常使用一些網頁控件，在此建議盡量使用HTML和JavaScript來完成。因為HTML和JavaScript代碼的解析時間比其他的網頁控制解析的時間短得多，同樣JavaScript具有非常強大的功能，可以制作出很多網頁特效。

5少用背景音樂進行網頁設計

篇（4）

職業教育工作過程是職業人完成崗位工作任務的完整過程?；诠ぷ鬟^程的總體課程設計，對于網頁設計課程來說，學習領域可以采用網站項目貫穿于整個教學活動中，以項目為載體，將知識融于項目。這能夠有效地提高學生的創新能力和實踐能力，強調學生在密切聯系有意義的“任務”情境中，通過完成項目任務來掌握知識、獲得技能、形成能力。做到“教學、做”一體化，真正地鍛煉學生的動手能力。課程進度表可以按照實際網站的項目開發流程來安排，從確定網站需求、選擇網站建設與管理工具，到規劃設計網站結構與欄目、準備網站相關文字與圖片等素材，再到軟件平臺中定義站點創建具體頁面，依次實現網站各個子欄目模塊，最后與推廣網站。開展教學活動時，教師可根據學生實際學習效果對各個單元學時數進行靈活調整。單元學習情境的設計融入課程涉及的知識點，遞進安排各個單元知識點的順序，既要有基于工作崗位的過程性知識，也要兼顧課程理論知識，學生學習完課程后，打好理論基礎，同時具備再學習的潛力和能力。例如在網站項目中，選取典型工作任務-制作公司網站搜索頁面來設計單元學習情境。

1.2課程實施

根據職業教育課程教學目標及項目進度安排教學單元，遵循的原則是學生為主體，教師為主導，按照網頁制作的工作過程來安排具體的教學活動。教師的角色是引路人，拋出問題，提示解決思路，由學生具體負責完成工作任務，教師可以根據學生的實際學習情況給出參考意見。對于基礎較好的學生，教師只需提示完成任務的思路和關鍵點。而對于基礎較差的學生，教師還需要準備有具體步驟的實踐指導書，供學生參考，對照完成并排除錯誤。

1.3課程評價

課程評價以學生的學習效果最優化為出發點。學習效果體現在以下幾個方面：

（1）課程結束后，學生是否掌握了應知應會的基本知識和技能；

（2）學生是否了解到職業崗位開展工作的具體流程，并具備能力完成典型的工作任務；

（3）引入外部評價，如企業專家的考評，客觀評判學生的知識水平、職業能力和綜合素質是否符合社會需求。值得注意的是，學生成績評價方法最好以形成式考核為主，按照項目進度逐步推進，學生的階段性成績不斷被累計，形成性評價可以確?；诠ぷ鬟^程的教學活動有序開展，監控學生的學習效果，最終保障良好的教學質量。

篇（5）

1.1從編寫代碼到創建實際任務。傳統的網頁教學總是以編寫HTML超文本標記語言、CSS層疊樣式表文件、JavaScript為基礎，通過Dreamweaver工具的拆分模式實現可視化的實際效果與基礎理論的結合來展開。這樣的教學方式與網頁的實際應用聯系較少。使得學生在學完網頁之后難以解決具體的實際問題。采用任務驅動的教學方法，通過實際項目，引入真實情境，如玩具銷售店、我的大學生活、學科資源網站等。讓學們從單純的學生角色轉化為網站構建者，成為一個生產者。這樣大大激發了學生的學習動力，并肩負責任感和成就感去學習。學生在構建實際網站過程中直接、頻繁地接觸計算思維的概念，如網頁結構的搭建，樣式美化的屬性設置等，并不斷提升系統性的思考能力和創意思維能力。構建網站時系統性的思考力是指學生需要在設計諸如導航條或鏈接中從設計網站、解決問題和理解用戶需求的角度去“仔細思考用戶與網站的互動方式以及根據意圖實現功能的方式解決問題”[1]。構建網站中的創意思維是指學生可以把網頁設計學習融入到創作具有實際意義和真實內容及富有個性的網站構建過程中，將學科學習與實際生活相統一。

1.2從獨立開發到小組合作、組間協作。網頁設計與網站開發的工作不是一個人獨立完成的，而是需要團隊的合作共同完成，當前的信息產業的工作都不是一個人獨立能夠完成的，而需要與他人合作完成。因此，獨立思考和學習確實能促進學生知識掌握能力、而通過合作構建網站可以分解復雜任務。利用這種協作模式可以培養計算思維能力中除知識技能方面的其他方面——過程與方法、情感態度與價值觀。

2考核評價

根據《網頁設計與網站開發課程》的三維教學目標（知識技能、過程與方法、情感態度三方面）制定考核方法及評價標準?？己嗽u價改變傳統的單一的總結性評價的方法，采用平時的過程評價、階段評價和綜合評價相結合的評價方法。過程評價是指學生平時的學習過程，根據精心設計的學習情境對學生的學習過程進行記錄和評分。這其中包括學生出勤情況、學習態度、單元情境的完成情況；階段評價即是期中評價，通過期初時提出主題網站任務，學生在學習過程中著手規劃、設計、實施并完成任務，在學期中期進行集中評價[2]，起到貫穿始終、承前啟后的作用；期末考試采用上機考試，題型包括根據給定素材及代碼截圖拼出網頁頁面，根據給定模板和主題要求，在現有素材的基礎上實現網站規劃及網頁設計。

篇（6）

/基本要求

1.在網站根目錄中開設imagescommontemp三個子目錄，根據需要再開設media子目錄，images目錄中放不同欄目的頁面都要用到的公共圖片，例如公司的標志、banner條、菜單、按鈕等等；common子目錄中放css、js,、php、include等公共文件；temp子目錄放客戶提供的各種文字圖片等等原始資料；media子目錄中放flash,avi,quicktime等多媒體文件。

2.在根目錄中原則上應該按照首頁的欄目結構，給每一個欄目開設一個目錄，根據需要在每一個欄目的目錄中開設一個images和media的子目錄用以放置此欄目專有的圖片和多媒體文件，如果這個欄目的內容特別多，又分出很多下級欄目，可以相應的再開設其他目錄。

3.temp目錄中的文件往往會比較多，建議以時間為名稱開設目錄，將客戶陸續提供的資料歸類整理。

4.除非有特殊情況，目錄、文件的名稱全部用小寫英文字母、數字、下劃線的組合，其中不得包含漢字、空格和特殊字符；目錄的命名請盡量以英文為指導，不到萬不得已不要以拼音作為目錄名稱，經驗證明，用拼音命名的目錄往往連一個月后的自己都看不懂，

/腳本編寫

我們應該有一個腳本整體風格一致的概念，意思是一個月后和一個月前的你寫的腳本風格保持一致，以及同一個工作組中不同的開發人員編寫的腳本風格保持一致，因為我們不可能永遠孤立的開發，你隨時都有可能和三個月前的自己合作（你的客戶要求改版），也經常要和工作室中不同的同事共同開發一個項目，還有可能被要求修改已經離職人員開發的腳本，當然你自己也有可能會扔下一個項目給后來的同事。

1.Html文件的通用模板：

其他meta標記

樣式表定義

客戶端javascript函數定義及初始化操作

……

補充：

為了保證網站能夠與下一代的web語言xml標準兼容，所有的HTML標簽的屬性都要用單引號或者雙引號括起，即我們應該寫而不是.

2.允許全文檢索的頁面，為了使Internet上的搜索引擎能夠有效檢索，在頻道的首頁的html的之間應該加入Keywords和Description元標記，例如：

3.CSS文件的格式樣例代碼：

這里尤其要注意的是a:linka:visiteda:hovera:actived的排列順序一定要嚴格照上面的樣例代碼，否則或多或少會出問題。另外我們規定重定義的最先，偽類其次，自定義最后，便于自己和他人閱讀！

為了保證不同瀏覽器上字號保持一致，字號建議用點數pt和像素px來定義，pt一般使用中文宋體的9pt和11pt，px一般使用中文宋體12px和14.7px這是經過優化的字號，黑體字或者宋體字加粗時，一般選用11pt和14.7px的字號比較合適。

在寫互相嵌套時，嚴格按照的規范，對于單獨的一個來說，對齊，縮進兩個半角空格，中如果還有嵌套的表格，也縮進兩個半角空格，如果中沒有任何嵌套的表格，結束標記應該與處于同一行，不要換行，

如我們注意在源代碼中不應有這樣的代碼：

而應該是這樣的：

這是因為瀏覽器認為換行相當于一個半角空格，以上不規范的寫法相當于無意中增加一個半角空格，如果確實有必要增加一個半角空格，也應該這樣寫：

屬于同一個級別的

一定是左首對齊的，另外不允許沒有任何內容的空的單元格存在，高度大于等于12px的單元格應該在和之間寫一個如果高度小于12px,則應該在和之間插入一個1*1大小的透明的gif圖片，這是因為某些瀏覽器認為空單元格非法而不會予以解釋。如果代碼順序較亂，在DW3中可以通過command->applysouceformatting進行重新整理！

5.Width和height的寫法也有統一的規范，一般情況下只有一列的表格，width寫在

的標簽內，只有一行的表格，height寫在的標簽內，多行多列的表格，width和height寫在第一行或者第一列的標簽內?？傊裱粭l原則：不出現多于一個的控制同一個單元格大小的height和width,保證任何一個width和height都是有效的，也就是你改動代碼中任何一個width和height的數值，都應該在瀏覽器中看到變化。做到這一條不容易，需要較長時間的練習和思考。

/一般原則

1.在排布表格之前，請大家一定要好好思考一個最佳的方案，表格的嵌套盡量控制在三層以內，并且應該盡量避免兩個標記，經驗表明，這兩個標記會帶來許多麻煩。

2.一個網頁要盡量避免用整個一張大表格，所有的內容都嵌套在這個大表格之內，因為瀏覽器在解釋頁面的元素時，是以表格為單位逐一顯示，如果一張網頁是嵌套在一個大表格之內，那么很可能造成的后果就是，當瀏覽者敲入網址，他要先面對一片空白很長時間，然后所有的網頁內容同時出現。如果必須這樣做，請使用

標記，以便能夠使這個大表格分塊顯示。

3.排版中我們經常會遇到需要進行首行縮進的處理，不要使用或者全角空格來達到效果，規范的做法是在樣式表中定義p{text-indent:2em;}然后給每一段加上

標記，注意，一般情況下，請不要省略

結束標記。

4.原則上，我們禁止用來人為干預圖片顯示的尺寸，而且建議標簽中不要帶上width和height兩個屬性，這是因為制作過程中，圖片往往需要反復的修改，這樣可以避免人為干預圖片顯示的尺寸，盡可能的發揮瀏覽器自身的功能；但是這樣的一個副作用是當網頁還未加載圖片時，不會留出圖片的站位大小，可能會造成網頁在加載過程中抖動（如果圖片是插在一個固定大小的表格里的，不會有這個現象），尤其是當圖片的尺寸較大時，這種現象會很明顯，所以當預料到這種會明顯導致網頁抖動的情況會發生時，請大家務必在最后給附上width和height屬性。

5.為了最大程度的發揮瀏覽器自動排版的功能，在一段完整的文字中請盡量不要使用

來人工干預分段。

6.不同語種的文字之間應該有一個半角空格，但避頭的符號之前和避尾的符號之后除外漢字之間的標點要用全角標點，英文字母和數字周圍的括號應該使用半角括號。

7.所有的字號都應該用樣式表來實現，禁止在頁面中出現標記。

8.請不要在網頁中連續出現多于一個的也盡量少使用全角空格（英文字符集下，全角空格會變成亂碼），空白應該盡量使用text-indent,padding,margin,hspace,vspace以及透明的gif圖片來實現。

9.中英文混排時，我們盡可能的將英文和數字定義為verdana和arial兩種字體。

10.行距建議用百分比來定義，常用的兩個行距的值是line-height:120%/150%.

11.網站中的路徑全部采用相對路徑，一般鏈接到某一目錄下的缺省文件的鏈接路徑不必寫全名，如我們不必這樣：而應該這樣：

12、嵌入圖形文本的使用較大的字體，建議不要在圖形中包括文本。

13、“網頁大小”定義為網頁的所有文件大小的總和，包括HTML文件和所有的嵌入的對象。用戶喜歡快的而不是新奇的站點。對于解調器用戶，網頁大小保持在34K以下為合適。

/文件命名原則

1.每一個目錄中應該包含一個缺省的html文件，文件名統一用index.htm

2．文件名稱統一用小寫的英文字母、數字和下劃線的組合。

3.命名原則的指導思想一是使得你自己和工作組的每一個成員能夠方便的理解每一個文件的意義，二是當我們在文件夾中使用“按名稱排例”的命令時，同一種大類的文件能夠排列在一起，以便我們查找、修改、替換、計算負載量等等操作。

4.下面以“新聞”（包含“國內新聞”和“國際新聞”）這個欄目來說明html文件的命名原則：

在根目錄下開設news目錄

第一條缺省新聞取名index.htm

所有屬于“國內新聞”的新聞依次取名為：china_1.htm,china_2.htm,…

所有屬于“國際新聞”的新聞依次取名為：internation_1.htm,internation_2.htm,…

如果文件的數量是兩位數，請將前九個文件命名為：china_01.htm,china_02.htm以保證所有的文件能夠在文件夾中正確排序。

5.圖片的命名原則遵循以下幾條規范：

名稱分為頭尾兩兩部分，用下劃線隔開。

頭部分表示此圖片的大類性質，例如廣告、標志、菜單、按鈕等等。

一般來說:

放置在頁面頂部的廣告、裝飾圖案等長方形的圖片我們取名：banner

標志性的圖片我們取名為：logo

在頁面上位置不固定并且帶有鏈接的小圖片我們取名為button

在頁面上某一個位置連續出現，性質相同的鏈接欄目的圖片我們取名：menu

裝飾用的照片我們取名：pic

不帶鏈接表示標題的圖片我們取名：title

依照此原則類推。

尾部分用來表示圖片的具體含義。

篇（7）

二、“多媒體網頁設計與制作”課程存在的問題

課程存在的問題往往影響課堂教學質量的提高和學生能力的培養。通過調查和反思，從教學內容、教學方法、教學設計方面分析“多媒體網頁設計與制作”課程存在的問題及其產生原因。

1．內容多、課時少，學生缺乏應用能力。

網頁設計涉及圖像處理、動畫設計制作、網頁設計編輯及基本程序設計等多方面的能力培養。課程共計72個學時，其中理論36學時，實踐36學時，存在教學內容多與課時少的矛盾。教學中只介紹Dreamweaver、Flash、Fireworks這三個軟件涉及到網頁制作的內容，會導致軟件學習不深入，學生缺乏應用能力。在有限的時間內，如何能深入分析所涉及軟件功能，提高學生應用能力，是課程學習過程中的關鍵問題。

2．重視個人能力的培養而缺乏團隊能力培養。

個人能力和團隊能力在網站開發中缺一不可，一個優秀網站的開發是網頁設計者個人努力與團隊協作共同作用的結果，團隊成員在協作的過程中相互學習，取長補短，相互促進。但在目前教學過程和考核要求上，過多強調網頁設計者個體的能力，忽略團隊的構建和團隊協作的影響力評估，教學模式不能體現團隊協作在學習中的作用。網站項目是在團隊的環境下完成的，實際工作環境中學生與人溝通能力和團隊合作精神是不可缺乏的，但目前課程的能力目標與工作需求有些脫節，對此沒有要求。

3．課程教學設計單一，學生缺乏工程實踐操作能力。

從課程設計層面來看，“多媒體網頁設計與制作”課程教學目標偏離工程需求，教學設計拘泥于傳統的教和學，缺乏工程實踐環境，因此造成學生的自學能力和實際動手能力得不到強化。教學以傳授知識和應試為目的，根本談不上利用工程實踐過程培養學生嚴謹的思維習慣和激發學生學習興趣。從課程實施層面來看，教學活動以教師為主體地位，重理論傳授、輕實踐訓練，知識結構相對分散，缺乏工程意識，學生掌握不到工程實踐所需的技能，缺乏工程實踐操作能力。怎樣在有限的教學環境中將工程實踐的技能融入到教學實踐中去，培養學生的工程實踐操作能力，是值得我們深思的問題。

三、“多媒體網頁設計與制作”課程教學設計實踐

以課程理念為指導，結合教學中存在問題，實踐中采用“以學為中心”的教學設計模式，通過對教學內容、教學方法、教學策略和教學評價進行規劃設計，建立充分調動學習興趣、發揮學生主觀能動性、以學生的學為主的教學系統。教學設計注重轉變學習參與方式，采用教學策略改變學習態度，發揮學生的主觀能動性，引導學生學習分析問題和解決問題的思路與方法，使教學效果最優化。

(一)教學內容設計要知識與技能相結合

教學內容是為完成教學目標要求學生學習的知識、技能、思想和行為的總和。對教學內容進行分析后進行的選擇與安排就是教學內容設計。網頁設計與制作課程具備技術性和實踐性都較強的特點，教學要在完成知識目標的同時培養學生的動手實踐能力。教學時間有限，因此要優化教學內容，在“以教學大綱為依據，解決學生的‘雙基’能力”理念的指導下，設計每個案例包含部分知識點和操作技能，由案例建立起理論知識和實踐技能間的聯系，在內容設計上實現知識與技能的結合，縮短學時數。課程開設對象為計算機科學與技術專業學生，學生已具備部分網頁設計基礎知識，圖像處理可以直接講案例和技巧，不用太多地介紹工具欄，以此為教學起點進行教學內容設計。課程教學內容設計以培養“雙基”能力為目標，以工程實踐能力為導向，將網頁工程的制作流程作為教學順序。教學內容注重工程實踐導向的系統性和實用性。為增強教學效果，以基于真實工程實踐設計制作的“走遍內蒙”旅游網站建設項目為例，項目包含八個子項目，每一子項目分別涵蓋大綱要求的若干知識點。項目對教學內容進行了提煉和重新整合，難易可行，貫穿于整個學期的教學，解決了內容多課時少的問題，所有子項目建設完成之后，網站建設的工作就基本完成了。

(二)教學方法設計要以應用為導向

1．運用案例教學法轉變學習方式，增強學生的拓展思維，提高課堂學習效率。

案例教學法是以實例為研究基礎進行問題探究的教學方法。案例教學法適用于網頁設計課程教學，是有效實施教學策略達到教學目標的一種教學方法。通過案例分析，由淺入深逐層展現教學內容，引導學生積極思考。學生進行案例分析的過程是對教學內容主動理解的過程，通過讓學生自己設計解決問題方案實現知識與能力轉化。網頁設計強調創新性，案例分析能拓寬學生的知識面，拓展學生思維，使學生具備舉一反三，觸類旁通的能力，從而在熟練掌握之后有自己的創新思想，實現創新能力培養。例如，將“走遍內蒙”旅游網站的子項目作為教學案例，上課和實踐地點安排在機房，切屏講解，邊講邊練。課堂上分三個階段進行能力培養。第一階段進行案例效果展示，教師通過分析項目、提出任務、示范操作、講解理論，讓學生從模仿操作起步，逐步掌握基礎理論和基本技能。第二階段進行相關作品鑒賞，學生通過觀察、思考、討論、領悟、轉換、組合等發現行為，掌握各知識點及其應用。從而引導學生學會分析問題的思路和方法，鞏固學生的“雙基”能力。第三階段布置能力拓展案例，增強學生的拓展思維，培養自學能力和創新能力。在鞏固舊知識的基礎上適當增加案例難度，學生自己分析任務、設計制作，教師在巡回檢查過程中對完成有困難的學生給予提示和個別指導。案例分析強調學生參與教學過程的主動性，案例效果激發學生興趣，案例導入知識點幫助學生進行知識建模。通過任務分析，討論制作方法、實際操作和歸納總結來培養學生實踐能力，增強課堂的學習效率，解決課時少的問題。

2．運用工程實訓教學法，加強學生的團隊協作，提升專業能力。

工程實訓教學法是將課程知識應用于工程項目實踐中，以項目實踐訓練的方式鞏固和提高專業知識的教學方法。課程實施中進行工程項目實踐訓練是學生參與工程實踐、提高應用能力的有效渠道。工程項目實踐拉近教學場景和工程實踐場景之間的距離，使學生能夠設想到自己的知識和能力與現實工程專業能力的差距，形成主動鉆研精神，培養工程實踐能力。工程實踐能力為導向的人才培養需要改變傳統教學方法與模式，因此在實踐教學環節以工程實訓法展示項目開發的方法與過程，培養學生在實踐方面的專業能力，構建工程實踐導向的實踐教學體系。目前學校培養學生工程實踐能力的方式主要有兩種:一是校企合作培養，二是學校按通用規范和行業標準培養。以現有的條件我們選擇后者實施，將實驗項目“平面愛好者”網站模塊化以工程實訓的方法分步培養學生的工程實踐能力。實驗網站建設與教學同步進行。模塊一是項目分析、策劃、構思。由教師引導，學生討論，分析“平面愛好者”網站需求，策劃制定設計方案，撰寫方案。培養學生的網站規劃能力，表達能力，與客戶溝通能力及文書寫作能力。模塊二是項目素材收集、制作，學生通過收集網站所需文字、圖像、多媒體等信息，并利用工具軟件對信息進行加工處理，設計制作圖片、動畫。培養學生素材制作能力。模塊三是網站網頁制作與美化。學生可用表格、層或DIV+CSS布局網頁，設計網站首頁、導航、菜單，使用行為和JavaScript實現特效等，以培養學生的網頁設計制作能力。模塊四是網站上傳、管理與維護，培養學生規范操作能力和網站維護能力。團隊協作可以促進能力目標形成，協作學習是一種教學策略，通過小組或團隊的形式組織學生進行學習，學習過程中學生可以將自己的學習資源與他人分享，通過研究、討論等互動方式完成學習任務，更好地達到教學目標。

(三)考核方式設計要注重形成性評價

形成性評價是在教學進行過程中，為引導教學前行或是為更好達到教學目標對學生學習結果的評定。即對學生日常學習過程中的表現、動手能力、實驗過程、作業等進行全過程質量監控和評價，因此形成性評價是基于對學生學習全過程的持續觀察、記錄而做出的更全面具體的發展性評價。學期中的檢查實驗屬于形成性評價，它的意義在于:一是通過檢查評價實驗了解學生的學習質量、學習態度和教師的教學效果，得到關于教學內容的問題反饋，進而確定問題所在環節并且修正，逐步達到教學目標;二是促進學生掌握網頁設計基礎知識和實踐操作的基本技能。網頁設計與制作涉及多軟件、多方面知識和操作技能及創新能力等綜合能力培養，因此期末考核中設計理論和實驗分別考核，并在實驗考核中引入形成性評價。實驗考核成績=實驗成績平均分(×60%)+大作業成績(×40%)，理論考核成績=理論考試成績(×70%)+平時成績(×30%)。考核設計中為拓展學生思維，作品有創新，鼓勵學生積極創作，設置大做業成績占實驗成績的40%。實踐中大作業通過集體評價的原則確保評價的客觀性，即學生本人對任務做出歸納性總結，評價由其他學生和教師共同完成，由學生評價作品的優缺點，教師通過提問和學生共同探討作品的設計和制作問題。教師根據評分標準給出大作業成績。實驗成功的成就感為后續學習營造了積極的學習氛圍?？己嗽O計中平時實驗成績在期末總評中占比重較大以激勵學生認真完成實驗目標和要求，保證實驗質量。采取這種考核方式，全面評價學生的能力，實現預期的能力培養目標。

篇（8）

二、什么樣的設計更適合web頁面

1.慎用較“重”的圖形元素這里圖形元素的輕重不是色調的輕重，是形式的輕和重，形式的輕重和內容相呼應，網頁設計的一大趨勢就是越來越“輕”。除了對圓角效果和高光效果等效果的審美疲勞之外，網頁設計師開始意識到好的網頁設計更注重的是將網頁內容與網頁形式結合起來，而非形式的堆砌。所以設計師在應用那些較“重”的圖形設計時，一定要慎重思考，考慮到該圖形的應用是否有必要以及該設計是否與受眾的氣質相契合。

2.內容和形式的分離對于一些比較強調視覺效果的特殊產品，也可以利用圖片格式和一些前端知識對網頁設計進行優化，比如內容和形式的分離。一些國外比較流行的設計風格都是通過大幅的背景圖進行氣氛的渲染和意境的傳達。這樣做的一個好處就是能把需要用到圖片的視覺元素進行集中的壓縮優化，同時因為前端實現時一般會用相近的背景色先進行填充，然后在逐步顯示背景圖，就不會因為加載太慢而拖慢用戶的訪問速度。

3.通過較小的視覺犧牲換取較大的性能提升有時候為了提升頁面的加載速度達到更好的用戶體驗，不得不對設計進行優化，這個時候就需要犧牲一部分視覺效果利用網頁設計師掌握的圖片格式知識更有目的性的優化設計網頁。例如著名的淘寶“雙十一”大促銷活動的宣傳網頁網頁，由于雙十一期間，該網頁的訪問量非常大并且為了配合商家的宣傳活動需要在網頁上加載非常多的商品圖片，這時候就需要網頁設計師對雙十一的促銷活動網頁的圖形進行優化以達到提升網頁性能的目的。網頁設計師可以去掉一些不太重要的高光、漸變和陰影效果，從而降低圖片文件的大小，提高圖片文件的加載速度。

4.圖形藝術的界面處理新穎的網頁圖形藝術設計可以牢牢地吸引住瀏覽者的注意力，設計具有創意、布局合理、設計規范的網頁也是提高網頁瀏覽量的的重中之重。一個圖形運用恰當、設計人性化的網頁可以讓瀏覽者對網站心生好感，極大地提高瀏覽者瀏覽該網頁的欲望。所以，網頁設計者要注重運用一切科學技術手段來設計圖形藝術，保證頁面效果給人以眼前一亮或是舒適的感覺，讓圖形首先在視覺上給予客戶一種沖擊，給客戶一個良好的第一印象。

篇（9）

二、思考與探索

（一）優化教材體系

“工欲善其事，必先利其器。”完善本課程的教與學關鍵之一便是優化教材，合適的教材在教學環節中起著舉足輕重的作用。高職高?！毒W頁設計與制作》課程以往選用的教材，對于初學者尤其是學習能力稍差的高職學生而言難度較大，以至于教學中經常出現學生學習興趣降低、教師教學課時明顯不夠等問題。網頁設計與制作課程教材，內容應以教授基礎、基礎與案例相結合、案例分析等層層遞進的原則進行選擇，組織與編排方式以折衷式組織及螺旋式排列組合為優。在選擇到合適的教材基礎上，教師要立足于教材，篩選教學內容，以使教學過程中教材利用最大化。

（二）改革教學方法與手段

1.明確學習目標

分階段教學根據高職高專學生特點，明確學習目標，進行分階段教學。前期以講授課程基礎為主，旨在讓學生熟練掌握本課程基礎操作，以便中后期案例教學能夠及順利遞進難度；中后期教學需要理論聯系實際，結合啟發式、直觀式、交互式教學方法，鼓勵學生獨立思考，勤于動手，激發他們的學習積極性和主動性。

2.加強實踐

注重技能培養任務驅動，小組協作。開展以制作某一特定網站或者多類型網站為目標的項目教學，使得學生不僅能夠掌握《網頁設計與制作》課程的基本知識和基本技能，提高學習興趣，而且在小組學習的過程中，學會與他人合作，共同完成任務。同時，在專業課程教學中滲透多類型網站內容相關教育內容，使學生在不知不覺中學到更多學科知識。此外，還可定期舉辦技能大賽和知識競賽，以鞏固學生的學習效果。以職業需求為導向，加強實習實訓平臺建設，強化實踐教學，教學與實訓實現一地化，重視校企合作。高職教育人才培養模式是根據職業崗位需要來進行，立足于企業人才需求實際，在課程中開展基于工作任務的項目教學。我們應利用校企合作共同構建和實施基于工作任務的項目課程體系，使學生真正做到理論聯系實踐，在獲取知識的同時充分掌握專業崗位技能，以充分體現出高職人才培養的職業性和實踐性。

（三）加強“雙師型”教師

培養優秀的師資是高職院校辦學的根本保證。提高高職教師“雙師”素質是高職教育發展的需要，也是教師個人發展的需要。高職院校應鼓勵現有專職教師在其專業領域不斷學習，及時更新自己現有的知識結構，進行自我提升，并有針對性地將部分教師安排在合作企業頂崗工作，增強其實踐經驗，提高其動手能力，使他們對行業需求變化了如指掌，以便清晰地掌握學生的培養方向。

篇（10）

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

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

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

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

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

2基于任務驅動的教學改革

任務驅動教學法是指在學習課程中，學生在教師指導下，根據學習內容完成任務的教學方法。任務驅動教學之下，學生具有較強解決問題的動機，對學習資源能夠積極主動的應用，能夠進行自主的探索與互動協作的學習，最終圓滿完成課程指定的任務。它打破以往以傳授知識為主的傳統教學理念，建立以解決問題、完成任務為主的多維互動式的教學模式；并將再現式的教學變為探究式的學習，學生處于一個積極的學習狀態，都能根據自己對當前問題的理解，運用所學知識與自己特有的經驗提出方案來解決問題。任務驅動教學法是一種建立在建構主義教學理論基礎上的教學法。它要求“任務”的目標性和教學情境的創建。使學生帶著真實的任務在探索中學習。在這個過程中，學生還會不斷地獲得成就感，可以更大地激發他們的求知欲望，逐步形成一個感知心智活動的良性循環，從而培養出獨立探索、勇于開拓進取的自學能力。

2．1任務的制定

根據網頁設計課程的內容與特點，首先在學期開始時給出課程的總任務以及總的教學目標。課程的總任務是以小組為單位，選擇教師給定的任務書中的網站題目，設計實現一個靜態網站?？偟慕虒W目標是掌握設計網站的方法。（1）第一章是初識網頁設計，教師會首先講解幾個靜態網站的實例，讓學生對所學課程有一定了解，之后講解相關的概念和設計開發工具DreamweaverCS6；學生的任務是根據小組所選擇的題目，在互聯網中查找資料，書寫開題報告。同時每組出一名學生向大家介紹本組的想法。（2）第二章是學習建立本地站點，教師會講解建立站點的重要性，講解相對路徑和絕對路徑，之后講解如何建立站點；學生的任務是為自己的網站建立站點，預估網站的規模，添加相應網頁并改名。（3）第三章是網頁頭部信息，教師講解如何添加網頁標題、關鍵字和說明；學生的任務是為站點中所有網頁添加頭部信息。（4）第四章是網頁布局，教師講解網頁布局技術：表格、DIV、框架以及模板和庫；學生的任務是對網站進行前期布局。（5）第五章是超級鏈接，教師講解超級鏈接；學生的任務是制作導航欄。（6）第六章是添加多媒體，教師講解添加圖片、背景音樂、Flash、滾動欄等內容；學生的任務是準備網站中需要的圖片、flash等資源，將資源添加至網頁。（7）第七章是表單，教師講解如何添加和設置表單；學生的任務是給網站添加注冊頁和用戶登錄。（8）第八章是CSS，教師講解CSS的應用；學生對網站添加內部樣式和外部樣式表。（9）第九章是網站，教師講解使用IIS在局域網中如何站點；學生的任務是相互網站，對其他組內容進行訪問。課程內容講完后，預留兩周課程時間，學生對所做的作品進行整理、美化。課程結束后，小組為單位對作品進行展示和提交。

2．2考核方法與評分標準

網頁設計課程總成績由平時成績和期末成績兩部分組成。其中平時成績占總成績的50％，期末成績占總成績的50％。平時成績除了到課情況外，主要依據學生在組內的貢獻、每期任務的完成情況以及整個團隊的表現。與傳統的成績評定不同，該課程更注重學生的平時表現是否積極、是否有團隊合作精神。期末成績的考核包括提交的作品和學生的答辯情況，評分指標與所占分數如表3所示。提交的作品主要考察界面是否合理、美觀，是否與開題所寫的需求分析內容一致，網站是否能正常的顯示以及配套的網站文檔是否完善等。答辯模擬項目經理與客戶的角色進行，教師提出問題，學生進行回答，查看學生的現場反應力與問題解決能力。

篇（11）

（2）網頁設計技術不斷地發展變化，新的技術、新的方法也不斷涌現。從1997年Dreamweaver首次推出，經歷Mx、Mx2004、到Dreamweaver8，現在普遍使用ADODBDreamweaverCs系列，我這學期使用的dreamweavercs4。網頁布局也從傳統的表格布局轉換為Div布局。所以不論是從選擇軟件到選擇網頁設計的方法，都不能太落后。

（3）從目前網絡公司行業來看，網頁設計與后臺代碼分開日趨明顯，所以并不一定要求學生設計與編程并重，畢竟對于中高職學生，編程相對較難理解。設計方面可以圖文并茂，在一定程度上能夠激發學生學習的興趣。對教材的使用也必須同時考慮在內，有部分教材案例缺乏美感，計算機專業的學生對審美本身就很缺乏。對于學習初期的學生，可以引導學生多欣賞比較優秀的網頁。早期可以模仿，不是美術專業畢業，這方面不是一下子能夠改變過來，自己也是深有體會，只有在今后長期的鍛煉、設計中尋找。

2教學方法

2.1課前準備在教學之前首先從網上下載優秀的網頁截圖給學生欣賞，然后制作一個非常簡單的靜態網頁以激發學生學習的興趣。有很多教材編輯的很全，從文字帶后臺編碼。對于各種教材，并不一定要全部講解。只需要講解實際操作性的。例如從文字到布局。

2.2教學方法教學過程是教師與學生之間信息傳遞及反饋的過程。在學習過程中，要給學生明確的思路，運用任務驅動法、模塊教學法、案例教學法和項目教學法等多種教學手段，引導學生主動思考，解決問題。不論是選用何種教學方法，最重要的一點是要貼合實際。以上幾種教學方法并不一定對每個章節都適用，也不一定對每門課都適用，因人而異。總之，要貼合自己的實際，以及學生的素質、水平、層次等等。

2.2.1任務驅動法在教學過程中，以完成任務為導向，把教學內容貫穿于每個任務中，在完成任務的過程中，發現問題、解決問題。采用任務驅動的教學方法，任務設計是關鍵。比如說在網頁設計教學中，文字、鏈接、圖片章節都可以用任務驅動法，網頁設計這門課本身就是易學易忘，所以在設計任務的時候，不斷復習之前學習的內容，以此來加深和鞏固之前所學習的知識。任務驅動評價中教師評價相對容易些，但是學生互評，現在還沒有系統能達到這樣的功能，有待于開發。

2.2.2模塊教學法主要分為以下幾個步驟：劃分小組、確定內容、布置任務、學生實施、評價結果?，F在不僅是網絡公司還是其他企業等等，都是團隊合作，講究的是團結協作。網頁設計公司現在也是，很多網站界面都實行模塊化，每個人負責完成自己的任務。模塊教學法就是有目標，有任務，有內容。目前中高職學生水平參差不齊，所以在分組的時候要特別講究。每節的重點和難點一定要講透，盡量慢，有的時候雖然講過一遍，但是很少人能夠理解體會。有時候需要在做的過程中加以輔導，不能放鴨式學習。模塊化教學更適合用于網頁設計最后的綜合實例。例如完成網站首頁，需要設定目標，分配每個成員的任務。但在實際運用中，相對較難完成。個人觀點，模塊化教學不適用于網頁設計教學。