網(wǎng)頁(yè)設(shè)計(jì)與布局課程教學(xué)研究

前言：想要寫(xiě)出一篇引人入勝的文章？我們特意為您整理了網(wǎng)頁(yè)設(shè)計(jì)與布局課程教學(xué)研究范文，希望能給你帶來(lái)靈感和參考，敬請(qǐng)閱讀。

摘要：文章以高職計(jì)算網(wǎng)絡(luò)技術(shù)專(zhuān)業(yè)網(wǎng)頁(yè)設(shè)計(jì)與布局項(xiàng)目化課程為例，將中國(guó)傳統(tǒng)文化（書(shū)法文化）網(wǎng)站建設(shè)為項(xiàng)目載體融入該課程教學(xué)中，以職業(yè)活動(dòng)為主線，通過(guò)項(xiàng)目展示、項(xiàng)目分析、項(xiàng)目實(shí)施、項(xiàng)目拓展、項(xiàng)目評(píng)估、項(xiàng)目實(shí)戰(zhàn)等過(guò)程，實(shí)現(xiàn)了對(duì)知識(shí)的直接遷移，使學(xué)生獲得與工作過(guò)程相關(guān)的職業(yè)能力，同時(shí)弘揚(yáng)了中國(guó)傳統(tǒng)文化，對(duì)提高教學(xué)質(zhì)量進(jìn)行了有益的探索。

關(guān)鍵詞：中國(guó)傳統(tǒng)文化；網(wǎng)頁(yè)設(shè)計(jì)與布局；工作過(guò)程；項(xiàng)目化課程

一、引言

近年來(lái)，項(xiàng)目課程在高職教育中得到廣泛運(yùn)用和推廣[1]，在實(shí)施過(guò)程中，項(xiàng)目課程以職業(yè)崗位工作過(guò)程為導(dǎo)向，以培養(yǎng)學(xué)生職業(yè)能力為核心。根據(jù)高職計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)專(zhuān)業(yè)人才培養(yǎng)方案，Web應(yīng)用開(kāi)發(fā)方向，其中Web前端工程師是核心崗位之一，要求學(xué)生必須掌握基本的Web前端開(kāi)發(fā)技術(shù)、網(wǎng)站性能優(yōu)化，學(xué)會(huì)運(yùn)用各種工具進(jìn)行輔助開(kāi)發(fā)，并且熟悉網(wǎng)站后臺(tái)開(kāi)發(fā)和應(yīng)用的能力。網(wǎng)頁(yè)設(shè)計(jì)與布局項(xiàng)目化課程（HTML+CSS+DIV）是計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)專(zhuān)業(yè)核心基礎(chǔ)課程。教職成[2015]6號(hào)文件中，提出要把中華優(yōu)秀傳統(tǒng)文化教育系統(tǒng)融入課程和教材體系，書(shū)法文化課是全院第二課堂一門(mén)拓展性課程，將書(shū)法文化網(wǎng)以工作過(guò)程融入網(wǎng)頁(yè)設(shè)計(jì)與布局項(xiàng)目化課程中，激發(fā)了學(xué)生的學(xué)習(xí)動(dòng)力，同時(shí)弘揚(yáng)和傳承了中華傳統(tǒng)文化[2]。本項(xiàng)目化課程，集專(zhuān)業(yè)知識(shí)與文化建設(shè)一體化的平臺(tái)，提升了學(xué)生的傳統(tǒng)文化素養(yǎng)，促進(jìn)了學(xué)生高效的學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)與布局項(xiàng)目化課程。

二、項(xiàng)目化教學(xué)課程內(nèi)容設(shè)計(jì)思路

該項(xiàng)目課程是依據(jù)“計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)專(zhuān)業(yè)工作任務(wù)與職業(yè)能力分析表”中的Web前端工程師工作領(lǐng)域設(shè)置的。網(wǎng)頁(yè)設(shè)計(jì)與布局項(xiàng)目課程，采用了循環(huán)式模式[1]，課程內(nèi)容從簡(jiǎn)單到復(fù)雜的多個(gè)項(xiàng)目進(jìn)行組織，每個(gè)項(xiàng)目都包括該課程全部任務(wù)所構(gòu)成的完整工作過(guò)程，且其與企業(yè)工作過(guò)程基本一致。其中“書(shū)法文化網(wǎng)站”建設(shè)是其中的一個(gè)項(xiàng)目，該項(xiàng)目教學(xué)內(nèi)容選擇主要根據(jù)Web前端工程師的工作任務(wù)及其所具備的職業(yè)能力的培養(yǎng)要求，注重對(duì)學(xué)生職業(yè)能力的訓(xùn)練，理論知識(shí)的選取緊緊圍繞“書(shū)法文化網(wǎng)”建設(shè)中制訂的工作任務(wù)完成的需要來(lái)進(jìn)行，同時(shí)還考慮高等職業(yè)教育對(duì)理論知識(shí)學(xué)習(xí)的需要，并融合Web前端工程師資格證書(shū)對(duì)知識(shí)、技能和態(tài)度的要求以及學(xué)生在工作過(guò)程中所對(duì)應(yīng)的工作崗位，本項(xiàng)目設(shè)計(jì)以構(gòu)思設(shè)計(jì)（內(nèi)容分析）、原型設(shè)計(jì)、頁(yè)面設(shè)計(jì)、頁(yè)面制作、動(dòng)畫(huà)制作、技術(shù)擴(kuò)展、測(cè)試為線索來(lái)架構(gòu)。教學(xué)過(guò)程中，通過(guò)仿真模擬的網(wǎng)站開(kāi)發(fā)案例和校內(nèi)實(shí)訓(xùn)基地、網(wǎng)站開(kāi)發(fā)工作室作為輔助，以真正做到教、學(xué)、練結(jié)合。“書(shū)法文化網(wǎng)站”項(xiàng)目是以山西信息職業(yè)技術(shù)學(xué)院“書(shū)法聯(lián)誼協(xié)會(huì)”工作流程進(jìn)行建站，界面設(shè)計(jì)要以傳承中華書(shū)法文化藝術(shù)為主旨，渲染校園文化藝術(shù)氣氛，提高廣大會(huì)員的書(shū)法技能，以達(dá)到修身養(yǎng)性的目的。本項(xiàng)目屬于課程網(wǎng)站建設(shè)范疇，經(jīng)過(guò)對(duì)項(xiàng)目的分析，需開(kāi)發(fā)靜態(tài)頁(yè)面站點(diǎn)，項(xiàng)目主要采用HTML+CSS+DIV技術(shù)布局本站點(diǎn)，后期采用CSS技術(shù)擴(kuò)展來(lái)維護(hù)站點(diǎn)，決定本項(xiàng)目分解為7個(gè)分項(xiàng)項(xiàng)目來(lái)完成，通過(guò)書(shū)法文化網(wǎng)站建設(shè)學(xué)習(xí)如何設(shè)計(jì)與布局頁(yè)面，基于項(xiàng)目化教學(xué)內(nèi)容設(shè)計(jì)如表1所示。

三、基于項(xiàng)目化課程教學(xué)具體實(shí)施

“書(shū)法文化網(wǎng)站”建設(shè)是一個(gè)在教師指導(dǎo)下由學(xué)生獨(dú)立完成的項(xiàng)目。根據(jù)學(xué)生實(shí)際及教學(xué)任務(wù)，項(xiàng)目實(shí)施過(guò)程分為六個(gè)環(huán)節(jié)，分別是項(xiàng)目展示、項(xiàng)目分析、項(xiàng)目實(shí)施、項(xiàng)目拓展、項(xiàng)目評(píng)估、項(xiàng)目實(shí)戰(zhàn)。項(xiàng)目實(shí)施以小組為單位，全班分成若干小組，每個(gè)小組設(shè)置一個(gè)項(xiàng)目部，1名組長(zhǎng)，負(fù)責(zé)分工、協(xié)調(diào)、組織討論，每個(gè)項(xiàng)目部設(shè)置多個(gè)角色，每個(gè)角色對(duì)應(yīng)指定的工作崗位，每個(gè)小組3-6人，每人1臺(tái)配備電腦（可自備），以保證實(shí)際的工作需求。在實(shí)際運(yùn)行過(guò)程中，通過(guò)合作互助學(xué)習(xí)，讓接受能力較強(qiáng)的學(xué)生對(duì)接受能力較弱的學(xué)生進(jìn)行幫扶，充分發(fā)揮學(xué)生學(xué)習(xí)主動(dòng)性，鍛煉學(xué)生團(tuán)結(jié)互助品質(zhì)，同時(shí)每組組員工作崗位迭代循環(huán)角色互換，讓每一個(gè)學(xué)生體驗(yàn)到真正工作過(guò)程的環(huán)節(jié)，促進(jìn)發(fā)展，實(shí)現(xiàn)知識(shí)遷移。

1.項(xiàng)目展示，激發(fā)動(dòng)機(jī)。提供真實(shí)的企業(yè)網(wǎng)站，將頁(yè)面的顏色、布局、內(nèi)容結(jié)構(gòu)、功能直觀展示給學(xué)生。比如協(xié)會(huì)簡(jiǎn)介、新聞動(dòng)態(tài)、書(shū)壇人物、書(shū)法研究、鑒賞收藏、協(xié)會(huì)風(fēng)采、作品展示、書(shū)法論壇、會(huì)員注冊(cè)模塊，明確本項(xiàng)目的具體工作任務(wù)，同時(shí)引導(dǎo)學(xué)生思考，使其盡快進(jìn)入工作狀態(tài)，為項(xiàng)目化教學(xué)的實(shí)施做好準(zhǔn)備。本環(huán)節(jié)讓學(xué)生對(duì)網(wǎng)站進(jìn)行賞析，對(duì)網(wǎng)頁(yè)的布局、色彩搭配形成初步印象，提高學(xué)習(xí)興趣，激發(fā)學(xué)習(xí)動(dòng)機(jī)，讓學(xué)生明確本項(xiàng)目是解決“做什么”的問(wèn)題。

2.項(xiàng)目分析，任務(wù)細(xì)分。師生共同通過(guò)項(xiàng)目分析了解網(wǎng)頁(yè)設(shè)計(jì)以及網(wǎng)頁(yè)布局的組成，制定工作任務(wù)，下發(fā)任務(wù)單，包括具體的任務(wù)描述，任務(wù)目標(biāo)，具體實(shí)施步驟，要求項(xiàng)目設(shè)計(jì)過(guò)程記錄清楚，設(shè)計(jì)中出現(xiàn)的問(wèn)題，如何解決要有詳細(xì)的記錄，以及提供項(xiàng)目中所需教學(xué)資源，明確頁(yè)面中版塊設(shè)計(jì)。除此之外，在設(shè)計(jì)網(wǎng)頁(yè)時(shí)，更要關(guān)注頁(yè)面的內(nèi)容是否滿足用戶需求。本環(huán)節(jié)以教師引導(dǎo)，學(xué)生思考為主，通過(guò)細(xì)分工作任務(wù)，收集整理頁(yè)面中模塊素材，為項(xiàng)目實(shí)施做好充分準(zhǔn)備。

3.項(xiàng)目實(shí)施，輔導(dǎo)操練。在項(xiàng)目實(shí)施過(guò)程中，學(xué)生可以自帶設(shè)備（BYOD）進(jìn)入理實(shí)一體化主動(dòng)學(xué)習(xí)教室。學(xué)生明確工作任務(wù)的操作流程及其實(shí)現(xiàn)方法，教師提供指導(dǎo)，引導(dǎo)學(xué)生獨(dú)立完成，同時(shí)學(xué)生觀察、思考，以小組為單位進(jìn)行項(xiàng)目實(shí)施。以教學(xué)內(nèi)容中安排的7個(gè)分項(xiàng)項(xiàng)目進(jìn)行對(duì)整個(gè)項(xiàng)目的實(shí)施，以“書(shū)法文化網(wǎng)站”建設(shè)為線索，在每個(gè)分項(xiàng)項(xiàng)目的具體工作任務(wù)的實(shí)施過(guò)程中，以“學(xué)生為主體、教師為主導(dǎo)->教師指導(dǎo)、示范、鼓勵(lì)->學(xué)生理解、操練、反思和鞏固->學(xué)生主動(dòng)完成工作任務(wù)”迭代循環(huán)的教學(xué)過(guò)程，最終完成了整個(gè)項(xiàng)目的設(shè)計(jì)。實(shí)施中對(duì)課堂提問(wèn)、學(xué)生出勤情況、工作任務(wù)單與拓展任務(wù)單日志完整情況等作詳細(xì)的記錄作為學(xué)生的考評(píng)依據(jù)。本環(huán)節(jié)是學(xué)生具體實(shí)施項(xiàng)目的過(guò)程，師生共同完整的完成了整個(gè)項(xiàng)目，教師放手操練，請(qǐng)優(yōu)秀學(xué)生協(xié)助未完成的學(xué)生一起進(jìn)步，增強(qiáng)學(xué)生的自信心與學(xué)生主動(dòng)性，培養(yǎng)學(xué)生團(tuán)隊(duì)合作精神。

4.項(xiàng)目拓展，變式操練。每一個(gè)工作任務(wù)的完成，學(xué)生對(duì)新獲得的知識(shí)技能有一定的感性認(rèn)識(shí)，教師以網(wǎng)頁(yè)的形式呈現(xiàn)新問(wèn)題的具體工作，同時(shí)下發(fā)拓展任務(wù)單，進(jìn)行變式訓(xùn)練，學(xué)生反思、鞏固、進(jìn)行自主拓展，課后自主探索，尋求解決問(wèn)題的方法。本環(huán)節(jié)讓學(xué)生們把新獲得的知識(shí)技能遷移到日常生活中，學(xué)以致用，達(dá)到融會(huì)貫通之效。解決“為什么”的問(wèn)題。

5.項(xiàng)目評(píng)估，總結(jié)歸納。通過(guò)學(xué)生自評(píng)、學(xué)生互評(píng)、教師評(píng)價(jià)、學(xué)生完成工作任務(wù)程度、項(xiàng)目答辯、成果（網(wǎng)頁(yè)）的審核等方式，對(duì)學(xué)生完成每個(gè)工作任務(wù)根據(jù)課程標(biāo)準(zhǔn)中制定的評(píng)分標(biāo)準(zhǔn)進(jìn)行多方位的考核[4]。每個(gè)工作任務(wù)，師生共同歸納出本工作任務(wù)實(shí)現(xiàn)所需要的知識(shí)點(diǎn)，學(xué)會(huì)辨析知識(shí)應(yīng)用的正誤，提煉出工作任務(wù)中求解過(guò)程中的關(guān)鍵操作和解決問(wèn)題的技巧。同時(shí)，教師對(duì)典型作品與學(xué)生共同分析，肯定成績(jī)，同時(shí)指出存在的問(wèn)題以及改進(jìn)的方法。本環(huán)節(jié)通過(guò)自評(píng)、互評(píng)，師生共同總結(jié)，培養(yǎng)學(xué)生分析能力和自我反思能力，解決了“做得怎么樣”的問(wèn)題。

6.項(xiàng)目實(shí)戰(zhàn)，實(shí)踐探究。為了讓學(xué)生對(duì)所學(xué)的知識(shí)進(jìn)行拓展和應(yīng)用，在學(xué)生課后的拓展項(xiàng)目中，學(xué)生靈活應(yīng)用所獲得的新知，通過(guò)團(tuán)隊(duì)合作以學(xué)院“攝影社團(tuán)”網(wǎng)站、“剪紙社團(tuán)”網(wǎng)站、“清風(fēng)棋社”網(wǎng)站進(jìn)行了拓展項(xiàng)目實(shí)戰(zhàn)，素材資源由自己去收集、整理、加工，最后以小組為單位進(jìn)行項(xiàng)目比賽，不僅培養(yǎng)了學(xué)生的綜合知識(shí)應(yīng)用能力，而且培養(yǎng)了團(tuán)隊(duì)意識(shí)，自我學(xué)習(xí)能力，促進(jìn)學(xué)生的職業(yè)能力發(fā)展。本環(huán)節(jié)主要解決“知識(shí)技能拓展應(yīng)用”的問(wèn)題。四、結(jié)束語(yǔ)通過(guò)采用基于學(xué)生生活實(shí)際的真實(shí)產(chǎn)品建站流程進(jìn)行了本項(xiàng)目化課程的教學(xué)應(yīng)用，同時(shí)融入了中國(guó)的傳統(tǒng)文化元素，提升了學(xué)生網(wǎng)頁(yè)設(shè)計(jì)創(chuàng)新思維，促進(jìn)了學(xué)生綜合職業(yè)能力發(fā)展，滿足了崗位能力需求。在以后教學(xué)實(shí)踐中，嘗試多專(zhuān)業(yè)合作，社會(huì)設(shè)計(jì)項(xiàng)目等引入課堂，使學(xué)生在校期間獲得實(shí)際技能，適應(yīng)社會(huì)人才需求。

參考文獻(xiàn)：

[1]李雄杰.職業(yè)教育理實(shí)一體化課程研究[M].北京:北京師范大學(xué)出版社,2011:1-70.

[2]沙聰穎.中國(guó)傳統(tǒng)文化融入高職校園文化建設(shè)實(shí)踐探索———以大連職業(yè)技術(shù)學(xué)院為例[J].遼寧高職學(xué)報(bào),2013(11):14-16.

[3]勞飛.基于項(xiàng)目化教學(xué)的“網(wǎng)頁(yè)設(shè)計(jì)與制作”課程改革與實(shí)踐[J].教育與職業(yè).2014(29):139-140.

[4]楊向東,黃小瑞.教育改革時(shí)代的學(xué)業(yè)測(cè)量與評(píng)價(jià)[M].上海:華東師范大學(xué)出版社,2013.10:109-116.

[5]溫謙,周建國(guó),練源.網(wǎng)頁(yè)設(shè)計(jì)與布局項(xiàng)目化教程(HTML+CSS+DIV)[M].北京:人民郵電出版社,2014:146-201.

作者：李艷霞 楊威 李翠紅 單位：山西師范大學(xué)教育技術(shù)與傳媒學(xué)院 山西信息職業(yè)技術(shù)學(xué)院