以市場需求為導向的網(wǎng)頁制作課程教學改革

吳魁

[摘? ? ? ? ? ?要]? 分析市場人才需求，針對中職學生的知識結(jié)構(gòu)、學習能力等特點引入項目實例，以基礎(chǔ)知識為中心規(guī)范網(wǎng)頁開發(fā)等手段優(yōu)化課程內(nèi)容;以市場需求為導向來開展網(wǎng)頁制作課程教學，使學生更真實地接觸到項目應(yīng)用，從而實現(xiàn)人才培養(yǎng)與市場需求的接軌。

[關(guān)? ? 鍵? ?詞]? 市場需求;網(wǎng)頁制作課程;教學改革

[中圖分類號]? G712? ? ? ? ? ? ? ?[文獻標志碼]? A? ? ? ? ? ? ? ? ? ? ? [文章編號]? 2096-0603（2019）28-0232-02

職業(yè)學校的課程改革應(yīng)當適應(yīng)社會發(fā)展和市場需求變化，構(gòu)建職業(yè)教育特色的課程體系以適應(yīng)市場的需求。網(wǎng)頁制作課程是計算機網(wǎng)絡(luò)專業(yè)、計算機應(yīng)用專業(yè)以及電子商務(wù)專業(yè)的主干課程，是一門應(yīng)用性、實用性、綜合性很強的課程?？茖W合理地設(shè)置網(wǎng)頁制作課程教學，不僅要求理論基礎(chǔ)知識詳細、準確，還要求實踐課程有針對性，全面有效地進行課程改革，可以將職業(yè)技術(shù)學校的定位做到更專業(yè)、更實用。

一、了解學生特征，改進教學方法

中職學生由于初中階段的文化基礎(chǔ)差，造成其問題分析能力以及邏輯推理能力較為薄弱，隨著中職教育專業(yè)課程不斷增多，教學內(nèi)容也越來越抽象，學生對教學內(nèi)容的理解顯得越來越困難，導致學習中遇到的疑問也越積越多，學習興趣逐漸減弱。另外，中職學生在學習時間分配上的不合理，學習主動性和自覺性缺乏，這些因素都直接導致有相當多的學生未能掌握正確的學習方法。

通過以上分析，我認為造成學生無心向?qū)W的根本原因在于學生沒有明確的學習目標，即使其非常努力，但收效甚微。所以，要改變學生的現(xiàn)狀，就要在職業(yè)教學中改變教學方法，從創(chuàng)造激情的學習情景入手，有針對性地誘導和啟發(fā)學生，實施因材施教，不斷提高學生的學習積極性和自信心，讓學生在項目實踐中學習、在項目實踐中進步。在創(chuàng)設(shè)學習情景方面可以展示優(yōu)秀的大學網(wǎng)站作品，吸引學生，對大學學習、生活有初步的了解;介紹當前主流的ThinkPHP網(wǎng)站框架;在教學過程中如發(fā)現(xiàn)確實有些不適合學生的編程，可以安排學生去完成UI界面制作，教師針對學生的能力分配到不同的模擬崗位，有助于學生相互搭配組隊、合作學習共同完成教學任務(wù)。

二、分析人才需求，明確教學目標

互聯(lián)網(wǎng)的快速發(fā)展使企業(yè)更加注重企業(yè)網(wǎng)站的良好界面、客戶體驗和頁面交互。而且，隨著網(wǎng)站開發(fā)需求越來越大，市場上也急需大量的網(wǎng)頁設(shè)計制作人才。根據(jù)人才招聘網(wǎng)對Web前端工程師的招聘需求分析，軟件開發(fā)公司對網(wǎng)頁設(shè)計人才能力的要求如下：

1.熟練掌握JavaScript、CSS3、HTML5、JQuery、JSON等前端相關(guān)技術(shù);

2.掌握Angular/Vue等前端開發(fā)框架，有小程序或Vue項目實踐經(jīng)驗的優(yōu)先考慮;

3.掌握主流前端框架的原理和思想，可以持續(xù)改進完善業(yè)務(wù)框架;

4.邏輯清晰，工作勤奮，注重細節(jié)，積極主動，熱愛學習，對新技術(shù)感興趣;

5.具有良好的溝通能力和團隊合作意識，能承受一定的工作壓力。

課程改革要“以職業(yè)崗位工作過程為導向”理念來構(gòu)建課程的知識結(jié)構(gòu)，根據(jù)Web前端崗位能力需求，結(jié)合網(wǎng)頁制作課程教學大綱，教學內(nèi)容要根據(jù)崗位需求變化，從學生的認知普遍規(guī)律和教學實際情況進行精簡、整合。在網(wǎng)頁制作課程教學中學生能力培養(yǎng)方面，能利用HTML編程進行構(gòu)建網(wǎng)頁，注重培養(yǎng)學生熟練使用CSS樣式設(shè)計網(wǎng)站風格，能應(yīng)用簡單的JavaScript腳本進行網(wǎng)頁特效設(shè)計;根據(jù)特定的需求進行網(wǎng)站規(guī)劃、制作以及維護和更新等管理操作。在社會能力培養(yǎng)方面，要培養(yǎng)學生良好的團隊協(xié)作能力，讓其具有嚴謹?shù)墓ぷ髯黠L和良好的職業(yè)素養(yǎng)。

三、緊跟就業(yè)導向，設(shè)計課程內(nèi)容

在網(wǎng)頁制作課程教學過程中，需要把技能訓練和職業(yè)素質(zhì)培養(yǎng)有機地結(jié)合起來[1]，使教學內(nèi)容緊追網(wǎng)站開發(fā)最新的發(fā)展和應(yīng)用，著重考慮學生畢業(yè)后的工作崗位需求，要不斷強化學生專業(yè)技能、職業(yè)能力和綜合素質(zhì)的全面培養(yǎng)。

（一）以項目實例為情景

在教學活動引入真實的項目實例，使教學情景更接近市場需求，這有利于進一步縮短和簡化從學生到職業(yè)角色的跨越和轉(zhuǎn)變過程。[2]在選取代表性的項目實例作為教學內(nèi)容時，結(jié)合網(wǎng)頁制作課程的教學大綱對項目進行分解，分解后的任務(wù)需承載學生必須具備的素質(zhì)和必須掌握的知識、技能，要分析項目的復雜性，關(guān)注工作流程和在工作流程中使用的工具、技能、技巧和要求等。項目實例的選取應(yīng)符合以下5方面的要求：（1）滿足網(wǎng)頁制作所需的基礎(chǔ)知識;（2）項目實例要緊跟主流應(yīng)用技術(shù)，滿足行業(yè)發(fā)展需要;（3）滿足網(wǎng)站制作工作流程，逐步提高技能培養(yǎng);（4）項目實例應(yīng)具有代表性、可行性、實用性;（5）難度適中，適合中職學生掌握。[3]

在教學過程中，以項目開發(fā)實例作為整個課程的教學任務(wù)，把所學的知識綜合運用到給定的項目開發(fā)中。就網(wǎng)頁制作課程而言，項目實例可以是企業(yè)宣傳網(wǎng)站，可以是和學生密切聯(lián)系的學生學籍管理系統(tǒng)，也可以是學生熟悉的其他項目，根據(jù)項目總結(jié)出課程基本信息、教學目標、課程對應(yīng)的專業(yè)崗位、工作流程、項目情境設(shè)計、教學評價等，實現(xiàn)教學與市場需求的無縫對接，更好地貫徹職業(yè)教育“工學結(jié)合、校企合作”的方針路線。

（二）以基礎(chǔ)知識為中心

網(wǎng)頁制作課程的知識是循序漸進的，知識點從基礎(chǔ)逐漸延伸到教學難點。其中，基礎(chǔ)知識尤為重要，它是課程目標延伸的基石。學習網(wǎng)頁制作基礎(chǔ)知識需要掌握HTML、CSS、JavaScript語言。HTML是網(wǎng)頁內(nèi)容的載體，網(wǎng)頁內(nèi)容主要由文本、圖片、表格、表單、音頻、視頻等基本元素組成。網(wǎng)頁是由基本元素所對應(yīng)的HTML標記和對網(wǎng)頁風格起控制作用的CSS樣式表編寫而成。CSS樣式是表現(xiàn)，如字體、顏色、背景圖片、邊框等，所有這些用來改變內(nèi)容外觀的通稱之為表現(xiàn)。JavaScript是用來實現(xiàn)網(wǎng)頁動畫特效效果，如彈出提示窗口、鼠標經(jīng)過表格時改變鼠標所在行的背景顏色，這使網(wǎng)頁絢麗奪目。HTML是網(wǎng)頁制作的基礎(chǔ)，在美化網(wǎng)頁的過程中需要學生有一定的審美能力，CSS樣式可以方便、快捷地控制網(wǎng)頁的總體風格。

在網(wǎng)頁制作課程的教學內(nèi)容安排上，在項目實例的選擇上選取短小精悍的項目實例，這些實例既運用了網(wǎng)頁基礎(chǔ)知識，又容易讓學生完成，很好地激發(fā)學生對學習網(wǎng)頁制作的興趣，從而形成學生學習的良性循環(huán)。市場越來越關(guān)注“DIV+CSS”的標準化設(shè)計，它可以有效地對網(wǎng)頁的布局、字體、顏色、背景和其他效果實現(xiàn)更加精確地控制頁面布局和風格，使網(wǎng)頁更加賞心悅目。由于CSS樣式非常容易編寫，結(jié)構(gòu)清晰，學生容易掌握;只要修改CSS樣式文件中相應(yīng)的屬性，整個站點的所有頁面都會隨之發(fā)生變化。在網(wǎng)頁制作課程教學中，網(wǎng)頁的風格和布局貫穿于HTML中的文本、圖片、表格、表單、音頻、視頻、超鏈接等元素的運用，掌握元素標簽的各屬性能更好地實現(xiàn)網(wǎng)頁的整體布局和網(wǎng)頁風格的美化。在網(wǎng)頁制作課程教學過程中，逐漸讓學生自主地設(shè)計、制作一個較大型的綜合各方面知識的項目實例，激發(fā)學生的創(chuàng)造力。

（三）以專業(yè)設(shè)計為原則

職業(yè)教育要做到教學過程與市場職業(yè)情景相銜接，必須要了解和掌握網(wǎng)站的實際開發(fā)流程，涉及不同的工作崗位。項目經(jīng)理負責與客戶溝通制作意向、洽談設(shè)計細節(jié)、制作網(wǎng)站規(guī)劃方案，前端設(shè)計師負責設(shè)計網(wǎng)站首頁、網(wǎng)站主題、網(wǎng)站整體設(shè)計，軟件設(shè)計師負責頁面腳本編程。在網(wǎng)頁制作課程教學過程中，盡可能地讓學生感受到市場職業(yè)情景，把學生分成幾個團隊，學生在團隊中分工合作、擔任不同的工作崗位、扮演不同的設(shè)計師角色，從而完成團隊設(shè)計方案，這樣不僅符合網(wǎng)頁制作市場職業(yè)情景，而且可以提高學生的溝通和團隊合作能力，培養(yǎng)出市場需求的人才。

在網(wǎng)頁制作課程教學過程中，用設(shè)計規(guī)范來引領(lǐng)教學，以專業(yè)設(shè)計的角度去制作網(wǎng)頁。設(shè)計規(guī)范就是所有頁面中具有相同參數(shù)的元素固定成統(tǒng)一標準，這樣的網(wǎng)頁代碼可讀性高可提高團隊的協(xié)作能力、提高代碼的重復利用率，為后期維護提供更好的支持。例如，字體的大小、圖片的尺寸、按鈕的樣式等網(wǎng)頁元素的運用，設(shè)計規(guī)范主要是節(jié)省設(shè)計師的思考時間，也可以保證同一個項目中不同設(shè)計師都能輸出一樣的網(wǎng)頁風格，縮短開發(fā)周期。網(wǎng)頁專業(yè)設(shè)計原則主要有以下幾點。

1.基于網(wǎng)格的網(wǎng)頁布局。網(wǎng)頁內(nèi)容改版方便，只需要更改CSS樣式文件的內(nèi)容;頁面加載速度快、結(jié)構(gòu)清晰、頁面顯示簡潔，從而令網(wǎng)站設(shè)計更加美觀。

2.在CSS書寫規(guī)范上，根據(jù)網(wǎng)頁風格和布局的相似程度，網(wǎng)頁設(shè)計師實現(xiàn)網(wǎng)頁的內(nèi)部結(jié)構(gòu)、表現(xiàn)和行為（HTML是內(nèi)容，CSS是表現(xiàn)，JavaScript是行為）;在CSS樣式名稱命名上要統(tǒng)一，如網(wǎng)頁的導航部分用“nav”命名，網(wǎng)頁的左邊區(qū)域用“l(fā)eft”命名等。

3.優(yōu)化圖片加載，提高用戶體驗。網(wǎng)頁大量使用圖片元素，在圖片處理細節(jié)上，圖片經(jīng)過優(yōu)化可以加快下載速度，產(chǎn)生較佳的視覺空間效果，并且圖片要與頁面主題風格、頁面內(nèi)容相符。圖片加載分為圖片懶加載和圖片預加載，在頁面的未可視區(qū)域添加一個滾動時間，判斷圖片位置與瀏覽器頂端的距離和頁面頂端的距離來判斷，如果圖片到達了可視區(qū)域，則加載圖片;如果圖片是以幻燈片、相冊等形式顯示網(wǎng)頁內(nèi)容，可以使用圖片預加載技術(shù)，將當前展示的圖片的前一張和后一張優(yōu)先加載。

4.在網(wǎng)頁加載時間上，使頁面加載時間更加活躍的提示，包括簡化圖片尺寸（大小和尺寸），將代碼整合到基本的CSS或JavaScript文檔中，使CSS樣式文件、JavaScript腳本文件變小，縮短下載時間。

5.關(guān)注點分離。網(wǎng)頁中的關(guān)注點包括內(nèi)容（HTML）、表現(xiàn)（CSS）和行為（JavaScript）。為了使它們成為可維護的干凈整潔代碼，嚴格地保證內(nèi)容、表現(xiàn)、行為三者分離，并使三者之間沒有太多的交互和聯(lián)系。盡量在文檔和模板中只包含結(jié)構(gòu)性的HTML;而將所有表現(xiàn)代碼，移入CSS樣式表中;將所有動作行為，移入JavaScript腳本中。在此之外，為使得它們之間的聯(lián)系盡可能的小，在HTML中也盡量少引入樣式和腳本文件。

6.瀏覽器的兼容性。由于市場上瀏覽器種類眾多，不同瀏覽器之間的內(nèi)核不一致，從而導致各種瀏覽器對網(wǎng)頁的解析產(chǎn)生差異。我們的網(wǎng)頁要在主流瀏覽器上正常運行，就需要做好瀏覽器的兼容。

基于市場需求的網(wǎng)頁制作課程教學改革是為了滿足職業(yè)崗位任職要求的基本能力，針對中職學生的能力水平和學習特點，培養(yǎng)學生設(shè)計網(wǎng)頁的能力，并且課程定位要明確與相關(guān)崗位技能全面接軌，培養(yǎng)重基礎(chǔ)、強技能的適用性人才。

參考文獻：

[1]果微.與市場需求結(jié)合的網(wǎng)站技術(shù)課程體系的建設(shè)[J].中國校外教育，2013（6）：163.

[2]毛新勇，劉紅奇，熊良山.課程、企業(yè)項目一體化的綜合實踐教學模式探索[J].教育教學論壇，2017（6）：26-27.

[3]張雪.工作過程為導向的“動態(tài)網(wǎng)站建設(shè)”課程開發(fā)[J].計算機教育，2016（9）：153-156.

◎編輯 趙瑞峰