HTML+CSS課程實操作業與考試命題初探

潘俊斌+++鐘夏薇++鐘媚

摘要：《網頁設計與制作（HTML+CSS）》是平面設計和信息技術專業的交叉課程。本文借鑒OSTA和IMOOC的成功經驗，結合當前網站網頁行業的發展趨勢，梳理了中職《html+CSS課程》的知識模塊，探討了作業和考試命題的題材選擇、描述方法和循序漸進的命題方式。

關鍵字：html+CSS課程 實操作業命題 實操考試命題

TP311.52

《網頁設計與制作（HTML+CSS）》是平面設計和信息技術專業的交叉課程，兼顧程序思維和藝術感覺。學習的內容可以分為兩種類型：程序性技能和陳述性知識。職業教育的一個重要特征，就是“動手工作比積累知識更重要”。實操考試就是以操作題為主，從實際工作中分解出若干個在一定時間內能夠完成的任務，對任務進行適當的描述，考生按照題面要求進行實際操作，最后提交考試的答卷。

OSTA即中國人力資源和社會保障部職業技能鑒定中心。由OSTA組織命題的《Dreamweaver 8試題匯編： 網頁制作員級》是html+CSS課程操作考試的典范。其考試大綱分為站點基本操作、布局頁面和表格制作等8個模塊，其考試題型主要是給定文字和圖形素材、完成預定目標的操作題，考試結果為若干個完整的頁面文件。

慕課網（IMOOC）是國內新興的IT技能學習平臺。里面有一個《html + CSS基礎教程》課程，即：http：//www.imooc.com/learn/9，適合沒有任何基礎的初學者，尤其是中職學生學習。區別于考試題庫，她是一個學習平臺。全面系統地包含了本課程的必學的知識體系。這門課程采用了一邊梳理知識一邊完成任務的方式，其中任務式題型包括：代碼填空、代碼改錯，上交的結果是特定的代碼，可以由內置的計算機程序直接判定對錯進行反饋，這種方式對課程試題庫建設也有重要的參考價值。

借鑒OSTA和IMOOC的成功經驗，結合網站網頁行業的發展趨勢，當前，中等職業學校學生在《HTML+CSS》課程學習中，必須掌握的知識模塊主要有：

在對平時作業和考試試題任務題材的選擇上，可以采用從小任務到大任務這種循序漸進的方式。

小任務指一個網頁的一個板塊，大多數情況下，使用幾個html標記就可以完成。如：用

1. 標記做一個新聞的列表。題型有：填空、改錯或從空白頁面開始做出新頁面。

   大任務通常是一個完整的頁面，由頭部、包含很多個主題板塊的網頁內容區和底部組成，涉及到網頁的布局技術。題型有：從空白頁面開始做出新頁面，或者在大型頁面的指定空白區域完成預定目標的新板塊。

   在對具體任務的描述方面，也可以采用從易到難的方式。對于任務目標的提示，可以采用目標效果圖、完整源代碼、線框圖、文字描述等多種方式。

   目標效果圖+完整源代碼方式：適合于給初學者布置作業，或者是介紹新的html標記和CSS屬性，有利于識記關鍵的標記和屬性，也適用于初學者熟悉網頁開發工具的階段。

   目標效果圖+線框圖方式：線框圖在形式上盡可能與目標效果圖相似，但是又不要像源代碼那么直接。可以根據學生的學習情況，決定是否提醒使用的html標記和一些關鍵的css屬性。以最終效果圖為評分依據，給得信息越少，學生就有越大的自由。適合于已經掌握了一定數量的標記和屬性，處于知識運用和技能提升階段學習者。通常情況下，寬度和高度參數都要在線框圖中給出提示。

   目標效果圖+文字提示方式：這是OSTA采用得比較多的方式，有利于學習者的知識運用和技能提升。

   純文字描述方式：給定一些未經處理的圖片和文字，根據題面要求綜合使用圖形處理工具（如：PhotoShop）加工素材，并使用網站開發工具（如：DreamWeaver）編寫html+CSS網頁代碼，做一個完整的頁面。可以是主頁、列表頁、詳細描述頁、交互表單幾種類型。其中商品、教程、新聞的詳細描述頁面最為實用。這個階段能全面發揮學生的藝術感覺和程序思維。

   對于使用相同圖形素材、有預定目標的Html+css課程作業和考試，則答卷結果是純文本代碼，不需要提交網頁文件，僅需要提交代碼到數據庫就可以了。可以使用作業與考試網站系統來收卷：

   有利于快速預覽完成效果。

   有利于有效記錄提交時間。

   有利于使用改卷程序來自動批改反饋。

   有利于通過人機捆綁防止簡單的抄襲與作弊。

   有利于記錄統計分析學生的學習情況。

   有利于學生之間的互相點評。

   對于需要學生自行處理圖形素材的作業和考試，就需要增加文件提交系統，并對網頁代碼中的圖形路徑做適當的規定。

   作業與考試，是課程教學的重要環節。作業與考試的命題和試題庫建設，不僅是測量考生學習能力的基本手段，而且也是促進課程教學雙邊活動聯系的紐帶。與時俱進的作業與考試內容設計，是把握教學方向與目標的有利保證；分層次的作業與考試難度設計是抓住學生注意力和興趣的關鍵所在；清楚地表達作業與考試的要求，師生心念相同的橋梁；有技術的作業與考試系統，是調動學生學習潛能的有效工具。結合技術更新和時代印記的HTML+CSS課程作業與考試命題和題庫建設，必將為學生的學業提高和職業發展帶來良好的效益。

   參考書目：

   （1） 《Dreamweaver 8試題匯編：網頁制作員級》出版社： 科學出版社，北京希望電子出版社； 第1版 （2008年1月1日） ISBN：9787030203151

   （2） 《中外考試比較》 康乃美 主編 科學教育出版社（2011年）