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

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

關(guān)鍵字：html+CSS課程 實(shí)操作業(yè)命題 實(shí)操考試命題

TP311.52

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

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

慕課網(wǎng)（IMOOC）是國(guó)內(nèi)新興的IT技能學(xué)習(xí)平臺(tái)。里面有一個(gè)《html + CSS基礎(chǔ)教程》課程，即：http：//www.imooc.com/learn/9，適合沒有任何基礎(chǔ)的初學(xué)者，尤其是中職學(xué)生學(xué)習(xí)。區(qū)別于考試題庫(kù)，她是一個(gè)學(xué)習(xí)平臺(tái)。全面系統(tǒng)地包含了本課程的必學(xué)的知識(shí)體系。這門課程采用了一邊梳理知識(shí)一邊完成任務(wù)的方式，其中任務(wù)式題型包括：代碼填空、代碼改錯(cuò)，上交的結(jié)果是特定的代碼，可以由內(nèi)置的計(jì)算機(jī)程序直接判定對(duì)錯(cuò)進(jìn)行反饋，這種方式對(duì)課程試題庫(kù)建設(shè)也有重要的參考價(jià)值。

借鑒OSTA和IMOOC的成功經(jīng)驗(yàn)，結(jié)合網(wǎng)站網(wǎng)頁行業(yè)的發(fā)展趨勢(shì)，當(dāng)前，中等職業(yè)學(xué)校學(xué)生在《HTML+CSS》課程學(xué)習(xí)中，必須掌握的知識(shí)模塊主要有：

在對(duì)平時(shí)作業(yè)和考試試題任務(wù)題材的選擇上，可以采用從小任務(wù)到大任務(wù)這種循序漸進(jìn)的方式。

小任務(wù)指一個(gè)網(wǎng)頁的一個(gè)板塊，大多數(shù)情況下，使用幾個(gè)html標(biāo)記就可以完成。如：用

1. 標(biāo)記做一個(gè)新聞的列表。題型有：填空、改錯(cuò)或從空白頁面開始做出新頁面。

   大任務(wù)通常是一個(gè)完整的頁面，由頭部、包含很多個(gè)主題板塊的網(wǎng)頁內(nèi)容區(qū)和底部組成，涉及到網(wǎng)頁的布局技術(shù)。題型有：從空白頁面開始做出新頁面，或者在大型頁面的指定空白區(qū)域完成預(yù)定目標(biāo)的新板塊。

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

   目標(biāo)效果圖+完整源代碼方式：適合于給初學(xué)者布置作業(yè)，或者是介紹新的html標(biāo)記和CSS屬性，有利于識(shí)記關(guān)鍵的標(biāo)記和屬性，也適用于初學(xué)者熟悉網(wǎng)頁開發(fā)工具的階段。

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

   目標(biāo)效果圖+文字提示方式：這是OSTA采用得比較多的方式，有利于學(xué)習(xí)者的知識(shí)運(yùn)用和技能提升。

   純文字描述方式：給定一些未經(jīng)處理的圖片和文字，根據(jù)題面要求綜合使用圖形處理工具（如：PhotoShop）加工素材，并使用網(wǎng)站開發(fā)工具（如：DreamWeaver）編寫html+CSS網(wǎng)頁代碼，做一個(gè)完整的頁面?？梢允侵黜摗⒘斜眄?、詳細(xì)描述頁、交互表單幾種類型。其中商品、教程、新聞的詳細(xì)描述頁面最為實(shí)用。這個(gè)階段能全面發(fā)揮學(xué)生的藝術(shù)感覺和程序思維。

   對(duì)于使用相同圖形素材、有預(yù)定目標(biāo)的Html+css課程作業(yè)和考試，則答卷結(jié)果是純文本代碼，不需要提交網(wǎng)頁文件，僅需要提交代碼到數(shù)據(jù)庫(kù)就可以了?？梢允褂米鳂I(yè)與考試網(wǎng)站系統(tǒng)來收卷：

   有利于快速預(yù)覽完成效果。

   有利于有效記錄提交時(shí)間。

   有利于使用改卷程序來自動(dòng)批改反饋。

   有利于通過人機(jī)捆綁防止簡(jiǎn)單的抄襲與作弊。

   有利于記錄統(tǒng)計(jì)分析學(xué)生的學(xué)習(xí)情況。

   有利于學(xué)生之間的互相點(diǎn)評(píng)。

   對(duì)于需要學(xué)生自行處理圖形素材的作業(yè)和考試，就需要增加文件提交系統(tǒng)，并對(duì)網(wǎng)頁代碼中的圖形路徑做適當(dāng)?shù)囊?guī)定。

   作業(yè)與考試，是課程教學(xué)的重要環(huán)節(jié)。作業(yè)與考試的命題和試題庫(kù)建設(shè)，不僅是測(cè)量考生學(xué)習(xí)能力的基本手段，而且也是促進(jìn)課程教學(xué)雙邊活動(dòng)聯(lián)系的紐帶。與時(shí)俱進(jìn)的作業(yè)與考試內(nèi)容設(shè)計(jì)，是把握教學(xué)方向與目標(biāo)的有利保證；分層次的作業(yè)與考試難度設(shè)計(jì)是抓住學(xué)生注意力和興趣的關(guān)鍵所在；清楚地表達(dá)作業(yè)與考試的要求，師生心念相同的橋梁；有技術(shù)的作業(yè)與考試系統(tǒng)，是調(diào)動(dòng)學(xué)生學(xué)習(xí)潛能的有效工具。結(jié)合技術(shù)更新和時(shí)代印記的HTML+CSS課程作業(yè)與考試命題和題庫(kù)建設(shè)，必將為學(xué)生的學(xué)業(yè)提高和職業(yè)發(fā)展帶來良好的效益。

   參考書目：

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

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