翟蓮秋

摘 要：網(wǎng)頁布局是網(wǎng)站開發(fā)方向的主要基礎(chǔ)，文章結(jié)合我們教學(xué)改革實(shí)踐，首先對軟件技術(shù)專業(yè)學(xué)生進(jìn)行了學(xué)情分析，然后分析與闡述了課程存在的問題，最后提出了具體的改進(jìn)方案及措施。通過不斷的教學(xué)實(shí)踐和研究改革，有效提高學(xué)生的學(xué)習(xí)興趣，達(dá)到提升學(xué)生實(shí)踐能力和社會(huì)適應(yīng)能力的職業(yè)培養(yǎng)要求。

關(guān)鍵詞：高職;軟件技術(shù);網(wǎng)頁布局;教學(xué)改革

根據(jù)高職軟件技術(shù)專業(yè)人才培養(yǎng)方案，網(wǎng)站開發(fā)方向中Web前端工程師是核心崗位之一，要求學(xué)生必須掌握基本的Web前端開發(fā)技術(shù)、網(wǎng)站性能優(yōu)化，學(xué)會(huì)運(yùn)用各種工具進(jìn)行輔助開發(fā)，并且熟悉網(wǎng)站后臺(tái)開發(fā)和應(yīng)用的能力。網(wǎng)頁布局課程（HTML+CSS+DIV）是軟件技術(shù)專業(yè)必修課程。

按照Web前端開發(fā)技術(shù)工作崗位對知識(shí)和能力的要求，本課程以HTML5和CSS3前端開發(fā)技術(shù)為主線進(jìn)行課程設(shè)計(jì)，作為WEB前端開發(fā)技術(shù)的入門基礎(chǔ)，課程設(shè)計(jì)最重要、最難的地方就是將一些非常復(fù)雜、難以理解的思想和問題簡單化，讓學(xué)生能夠輕松理解并快速掌握Web開發(fā)和設(shè)計(jì)的精髓。

一、學(xué)情分析

學(xué)生思維活躍，樂于溝通，喜歡模仿和動(dòng)手實(shí)踐，但學(xué)習(xí)韌勁不足，缺乏堅(jiān)持不懈的學(xué)習(xí)態(tài)度，團(tuán)隊(duì)合作意識(shí)薄弱;

學(xué)生上課紀(jì)律整體很好，但課前課后的學(xué)習(xí)主動(dòng)性差;

學(xué)生會(huì)做不會(huì)說，作品優(yōu)秀、閃光點(diǎn)多，但學(xué)生不能完美介紹出作品的優(yōu)勢;

學(xué)生經(jīng)過課程學(xué)習(xí)已經(jīng)掌握了HTML5網(wǎng)頁內(nèi)容的編輯，掌握了使用CSS3進(jìn)行頁面元素的布局與排版，并且能夠?qū)W(wǎng)頁頁面進(jìn)行總體的控制，不過多數(shù)學(xué)生對網(wǎng)頁設(shè)計(jì)的崗位認(rèn)知還比較模糊。

二、軟件技術(shù)專業(yè)已開設(shè)的網(wǎng)頁布局課程存在的問題

（一）課程教學(xué)內(nèi)容過多、課時(shí)過少

課程內(nèi)容包括HMTL、CSS、JavaScript三部分，以HMTL為基礎(chǔ)，結(jié)合DIV布局和CSS樣式，實(shí)現(xiàn)網(wǎng)站前臺(tái)和后臺(tái)頁面的布局，JavaScript編程主要實(shí)現(xiàn)實(shí)時(shí)的、動(dòng)態(tài)的、可交互性的網(wǎng)頁功能。隨著WEB標(biāo)準(zhǔn)的升級(jí)，HTML5和CSS3應(yīng)運(yùn)而生，為更好更快適應(yīng)市場需求，在新的課程中將加入HTML5和CSS3部分的知識(shí)。但這也造成了知識(shí)點(diǎn)多，課時(shí)少、學(xué)生實(shí)踐練習(xí)少，對知識(shí)的掌握不徹底，對相關(guān)知識(shí)的整體認(rèn)識(shí)不夠。另外，JavaScript編程與HTML、CSS在一學(xué)期講，融合得也不是很好。

（二）教學(xué)方法不夠合理

課程采用“任務(wù)驅(qū)動(dòng)”教學(xué)方法，每個(gè)教學(xué)任務(wù)都是獨(dú)立的網(wǎng)頁頁面，學(xué)生對知識(shí)點(diǎn)的掌握較好，但只側(cè)重對單個(gè)頁面的認(rèn)識(shí)，對網(wǎng)站的整體建設(shè)缺乏系統(tǒng)的了解。

（三）課程設(shè)置沒有考慮專業(yè)體系的連貫性

軟件專業(yè)網(wǎng)站開發(fā)方向的每門科程在設(shè)置學(xué)習(xí)任務(wù)或項(xiàng)目時(shí)過于狹隘，只考慮了單門課程知識(shí)點(diǎn)的學(xué)習(xí)和掌握，沒有考慮整個(gè)專業(yè)課程體系中知識(shí)的連貫性。學(xué)生對每門知識(shí)和技能的掌握較好，但走向工作崗位后，不能快速有效地將各門學(xué)科有機(jī)的結(jié)合。

（四）缺少現(xiàn)代化教學(xué)輔助手段

學(xué)生缺少主動(dòng)學(xué)習(xí)意識(shí)，學(xué)習(xí)韌勁不足，常常容易自我放棄。而教師缺少課后對學(xué)生的督促和考察的手段。

三、課程教學(xué)改革方案

針對以上對學(xué)生及課程的分析，提出以下改革方案：

（1）在內(nèi)容上進(jìn)行調(diào)整，新的培養(yǎng)方案中將JavaScript從《網(wǎng)頁布局》中分離出來，將JavaScript與JQuery結(jié)合成《JavaScript+jQuery前端開發(fā)技術(shù)》，而原來的《網(wǎng)頁布局》主要側(cè)重網(wǎng)頁頁面的綜合布局，同時(shí)加大了實(shí)訓(xùn)學(xué)時(shí)。隨著網(wǎng)絡(luò)技術(shù)的發(fā)展，JavaScript語言越來越受歡迎，是目前互聯(lián)網(wǎng)上最流行的腳本語言，JavaScript被廣泛應(yīng)用于網(wǎng)頁特效和網(wǎng)頁表單驗(yàn)證等方面，而JQuery是一套輕量級(jí)的JavaScript腳本庫，實(shí)現(xiàn)了JavaScript代碼和HTML代碼的分離，極大地簡化了JavaScript開發(fā)人員遍歷HTML文檔、操作DOM、處理事件、執(zhí)行動(dòng)畫和開發(fā)AJAX的操作。所以《JavaScript+jQuery前端開發(fā)技術(shù)》將復(fù)雜的東西封裝成方法，使學(xué)生學(xué)習(xí)JavaScript的難度降低。

（2）新的課程標(biāo)準(zhǔn)中課程以“項(xiàng)目+任務(wù)”規(guī)劃所有教學(xué)內(nèi)容，通過項(xiàng)目將知識(shí)點(diǎn)串聯(lián)起來，學(xué)完一個(gè)項(xiàng)目的內(nèi)容就能制作一個(gè)完整的網(wǎng)站，極大地激發(fā)了學(xué)生的學(xué)習(xí)興趣和學(xué)習(xí)熱情。將一個(gè)項(xiàng)目分解成多個(gè)子任務(wù)，完成子任務(wù)的實(shí)際操作過程就是知識(shí)的學(xué)習(xí)過程，讓學(xué)生掌握項(xiàng)目中的知識(shí)點(diǎn)和技能點(diǎn)。其教學(xué)流程為“①布置任務(wù)→②任務(wù)分析→③知識(shí)講解與操作示范→④任務(wù)實(shí)施→⑤任務(wù)展示點(diǎn)評→⑥歸納總結(jié)”六個(gè)環(huán)節(jié)，在內(nèi)容的選擇、結(jié)構(gòu)的安排上符合初學(xué)者的認(rèn)識(shí)習(xí)慣。同時(shí)本課程項(xiàng)目豐富，涉及電影、攝影、網(wǎng)上花店、網(wǎng)絡(luò)學(xué)習(xí)、商品銷售等多個(gè)方向，有助于學(xué)生掌握不同網(wǎng)站的設(shè)計(jì)風(fēng)格與制作技巧。

課程共分為5個(gè)項(xiàng)目，結(jié)合HTML5、CSS3、DIV等Web前端主流技術(shù)的基礎(chǔ)知識(shí)及應(yīng)用，具體介紹如下：

項(xiàng)目1“國際電影節(jié)網(wǎng)站”介紹了Web基本概念、HTML5語法、HTML5標(biāo)記、HTML5頁面元素及屬性，要求學(xué)生掌握HTML5文檔的基本結(jié)構(gòu)，熟練運(yùn)用HTML5頁面元素標(biāo)記及屬性，為后續(xù)學(xué)習(xí)打下基礎(chǔ)。

項(xiàng)目2“網(wǎng)上花店”主要介紹CSS3樣式表引用、CSS3選擇器，要求學(xué)生能夠熟練使用CSS3樣式控制頁面中的元素的外觀，熟練使用CSS3選擇器選擇頁面元素。

項(xiàng)目3“攝影網(wǎng)站”主要介紹CSS5盒子模型相關(guān)屬性、背景屬性、浮動(dòng)和定位屬性、表單屬性及CSS3控制表單樣式，要求學(xué)生熟練運(yùn)用盒子模型相關(guān)屬性、浮動(dòng)和定位屬性控制網(wǎng)頁中元素的布局，并熟練運(yùn)用表單及控件的相關(guān)屬性來組織頁面元素。

項(xiàng)目4“DIV CSS初學(xué)者網(wǎng)站”主要介紹模板的生成與保存、可編輯區(qū)域的定義和修改、庫項(xiàng)目的創(chuàng)建和更新，要求學(xué)生熟練地修改網(wǎng)頁模板及其屬性，并同步更新該模板生成的網(wǎng)頁。

項(xiàng)目5“商品銷售網(wǎng)站”結(jié)合前面所學(xué)的知識(shí)，帶領(lǐng)學(xué)生開發(fā)一個(gè)具有首頁、產(chǎn)品瀏覽、在線留言頁面的網(wǎng)站，以促進(jìn)學(xué)生更好地掌握網(wǎng)站開發(fā)和制作的流程。

（3）針對整個(gè)專業(yè)的課程連貫性，在新的培養(yǎng)方案中，軟件專業(yè)網(wǎng)站開發(fā)方向所有專業(yè)課程的最后的綜合項(xiàng)目均為“商品銷售網(wǎng)站”。在《網(wǎng)頁美工》中進(jìn)行網(wǎng)站效果圖的制作，在《網(wǎng)頁布局》中依據(jù)效果圖進(jìn)行前臺(tái)和后臺(tái)頁面的布局，在《Java Web程序設(shè)計(jì)》、《軟件框架技術(shù)》中進(jìn)行數(shù)據(jù)庫的連接及后臺(tái)管理編程，在最后一學(xué)期末的實(shí)訓(xùn)周再把這幾門課所有內(nèi)容進(jìn)行整合成一個(gè)完整的網(wǎng)站。

（4）建設(shè)課程開放平臺(tái)。結(jié)合學(xué)校專業(yè)建設(shè)與發(fā)展需要，決定建設(shè)網(wǎng)頁布局在線開放課程，制定課程的整體設(shè)計(jì)、課程標(biāo)準(zhǔn)、考核方案、教學(xué)計(jì)劃、教學(xué)課件、教學(xué)視頻、實(shí)訓(xùn)任務(wù)、技能題庫、單元測驗(yàn)等教學(xué)資源上傳到超星在線開放平臺(tái)，學(xué)生可在課前通過觀看教學(xué)課件、教學(xué)視頻進(jìn)行預(yù)習(xí)自學(xué)，上課時(shí)通過教師的系統(tǒng)講解和示范操作，進(jìn)行知識(shí)的查漏補(bǔ)缺和技能的訓(xùn)練，課后自行下載實(shí)訓(xùn)任務(wù)、技能題庫、單元測驗(yàn)進(jìn)行知識(shí)和技能的鞏固掌握。切實(shí)做到線上線下兩手抓、課前課后兩不誤。

四、結(jié)語

文章進(jìn)行了軟件技術(shù)專業(yè)網(wǎng)頁布局課程的教學(xué)改革研究，首先對授課學(xué)生進(jìn)行了學(xué)情分析，然后將已開設(shè)的網(wǎng)頁布局課程存在的問題進(jìn)行了細(xì)致的分析與闡述，最后針對出現(xiàn)的問題提出了具體的改進(jìn)方案及措施。在今后的教學(xué)過程中，還將不斷地進(jìn)行發(fā)現(xiàn)問題、分析問題、改進(jìn)問題，有效提高學(xué)生的學(xué)習(xí)興趣，達(dá)到提升學(xué)生實(shí)踐能力和社會(huì)適應(yīng)能力的職業(yè)培養(yǎng)要求。

參考文獻(xiàn)

[1] 李艷霞，楊威，李翠紅.基于項(xiàng)目化教學(xué)的“網(wǎng)頁設(shè)計(jì)與布局”課程教學(xué)研究[J].中國教育信息化，2017（04）：16-18.

[2] 丁玲.以“說課”形式談《網(wǎng)頁設(shè)計(jì)與制作》項(xiàng)目教學(xué)設(shè)計(jì)[J].科技視界，2013（30）：256-257.

[3] 侯云霞.軟件工程與Rose建模在線開放課程建設(shè)方案[J].科教導(dǎo)刊：電子版，2017（30）：112.