基于崗位能力培養(yǎng)的中職《靜態(tài)網(wǎng)頁》課程的教學(xué)創(chuàng)新實踐

江龍

【摘要】通過在中職《靜態(tài)網(wǎng)頁》課程教學(xué)中的創(chuàng)新實踐，指出當(dāng)前在靜態(tài)網(wǎng)頁設(shè)計教學(xué)中存在的不足，點明使用圖形圖像處理軟件來規(guī)劃網(wǎng)頁整體效果圖在網(wǎng)頁設(shè)計中的重要性，并對整個網(wǎng)站建設(shè)的流程作簡明扼要的描述，堅持網(wǎng)頁設(shè)計過程始終以培養(yǎng)學(xué)生崗位能力為目標(biāo)。

【關(guān)鍵詞】網(wǎng)頁 教學(xué) 創(chuàng)新

【中圖分類號】G71 【文獻(xiàn)標(biāo)識碼】A 【文章編號】2095-3089（2017）32-0232-01

眾所周知，創(chuàng)新精神和創(chuàng)新能力是當(dāng)今計算機(jī)教師所不能缺乏的基本素質(zhì)。而我們正處在信息化迅猛發(fā)展的時代，如不能及時針對人才需求現(xiàn)狀對課程教學(xué)作相應(yīng)的改革創(chuàng)新，必將被時代所淘汰。鑒于此，筆者始終貫徹教學(xué)創(chuàng)新這一指導(dǎo)原則開展教育教學(xué)。

當(dāng)前在《靜態(tài)網(wǎng)頁》課程的教學(xué)中，大部分的同行還是以基本相同的步驟來完成：首先是前期的策劃，然后是定義站點結(jié)構(gòu)，最后使用網(wǎng)頁編輯器編輯頁面元素形成靜態(tài)頁面。這種教學(xué)模式最大一個弊端就是沒有從崗位能力出發(fā)，忽略了在網(wǎng)頁設(shè)計中最關(guān)鍵的一個技術(shù)環(huán)節(jié)，也就是規(guī)劃草圖即使用圖形圖像處理軟件來規(guī)劃頁面的整體效果圖，從而導(dǎo)致學(xué)生學(xué)完課程后，真正讓他們動手去完成一個完整的靜態(tài)站點，卻無從下手，即使完成，也只是粗糙的半成品。為解決這一問題，筆者大膽的在本課程教學(xué)中進(jìn)行了創(chuàng)新。

創(chuàng)新一：改變單純的課堂教學(xué)模式，構(gòu)建貼近實際工作崗位的教學(xué)環(huán)境。

做法是：在教完理論知識的前提下，基于晉江這塊民營企業(yè)發(fā)達(dá)的地區(qū)，筆者把學(xué)生分成若干學(xué)習(xí)小組，帶領(lǐng)他們大膽地走進(jìn)各類中小企業(yè)，主動承擔(dān)開發(fā)企業(yè)網(wǎng)站的任務(wù)。這樣不僅讓學(xué)生提前體驗網(wǎng)頁設(shè)計崗位工作場景，培養(yǎng)崗位認(rèn)知，激發(fā)崗位熱情，也為將來走入職場打下堅實的基礎(chǔ)，積累了社會經(jīng)驗。

創(chuàng)新二：改變傳統(tǒng)的教學(xué)程序，形成以培養(yǎng)學(xué)生崗位能力為目標(biāo)的教學(xué)體系。

（一）首先夯實基礎(chǔ)，避免后續(xù)教學(xué)成為空中樓閣。

鑒于Photoshop強(qiáng)大的圖形圖像處理功能，把這門課開設(shè)在網(wǎng)頁課之前，并且在網(wǎng)頁設(shè)計教學(xué)中充分利用Photoshop強(qiáng)大的圖形圖像處理功能。

（二）其次，確定網(wǎng)站主題，進(jìn)行整體風(fēng)格的定位設(shè)計。指導(dǎo)學(xué)生進(jìn)行任務(wù)和用戶分析，收集相關(guān)站點的素材和資料，了解所建設(shè)的網(wǎng)站類型，確定一個大致的風(fēng)格走向，比如：服裝類、食品類等等。不同站點各自的風(fēng)格肯定是不盡相同的，只有做到“胸中有丘壑”，才能“網(wǎng)頁起波瀾”。想要營造出各種類型的氛圍，需要對各種行業(yè)有敏感的洞察力，如果設(shè)計者還不是熟悉這個行業(yè)，不知什么樣的風(fēng)格是適合它的，大致該用什么樣的色調(diào)，那么必須花一定的時間先去做一些調(diào)查和學(xué)習(xí)是必要的。通過實踐，讓學(xué)生了解所接觸的企業(yè)網(wǎng)頁設(shè)計的風(fēng)格走向，同時也讓學(xué)生有了拓展的空間并增長了社會閱歷。

（三）再者，重點培養(yǎng)學(xué)生規(guī)劃草圖。首先，作出草圖，勾畫出客戶想要呈現(xiàn)的東西，千萬不能盲目，更不能想當(dāng)然。針對學(xué)生美工功底深淺不一的情況，筆者實行分層次教學(xué)，引導(dǎo)學(xué)生多上網(wǎng)查看各種風(fēng)格類型的網(wǎng)站，然后動手勾畫網(wǎng)站的草圖，看多了，練多了，創(chuàng)作的靈感也就逐漸提升了。有了草圖之后，其次規(guī)劃一張頁面的結(jié)構(gòu)圖，結(jié)構(gòu)圖是一張比草圖更為簡潔，主要用文字來體現(xiàn)網(wǎng)站的內(nèi)容。有了這些，整體效果圖就有章可循了。針對前面的兩點作了充分的準(zhǔn)備后，就可著手網(wǎng)頁設(shè)計工作了。鑒于Photoshop強(qiáng)大的圖形圖像處理功能，筆者建議同行在教學(xué)中還是使用這門軟件，并把這門課開設(shè)在網(wǎng)頁課之前。這樣學(xué)生一來有圖形圖像作為基礎(chǔ)，二來教師在教學(xué)過程中容易把握。

（四）最后，引導(dǎo)學(xué)生充分利用Photoshop強(qiáng)大的圖形圖像處理功能。 目前設(shè)計網(wǎng)頁運用較為廣泛的還是Photoshop軟件， Photoshop利用自身在圖像處理上的優(yōu)勢，還實現(xiàn)多方面的網(wǎng)絡(luò)應(yīng)用。利用圖形圖像可視化操作程度比較高的特點，進(jìn)行網(wǎng)頁的視覺設(shè)計、排版布局，并創(chuàng)建為頁面的HTML文件。Photoshop能夠完成網(wǎng)站中各種類型的Web圖像設(shè)計和制作，還包括圖像為適于網(wǎng)絡(luò)發(fā)布進(jìn)行的各項圖像優(yōu)化功作。

創(chuàng)新三：改變教學(xué)策略，實現(xiàn)教學(xué)目標(biāo)和崗位能力相統(tǒng)一教學(xué)結(jié)果。

以往在網(wǎng)頁設(shè)計教學(xué)中，我們過多考慮的是軟件的使用，在教學(xué)過程中對崗位能力目標(biāo)要求不大注意，學(xué)生學(xué)完后往往只是會用軟件，但沒辦法設(shè)計一個符合市場要求的網(wǎng)頁。所以筆者在教學(xué)中改變教學(xué)策略，對在用Photoshop規(guī)劃效果圖時應(yīng)注意的以下幾點給予更多訓(xùn)練。

（一）配色。 所謂配色也就是確定網(wǎng)頁的主體色以及相關(guān)色彩。一些知名的國際國內(nèi)網(wǎng)站，看是簡單，但獨到之處也正是配色。如Dior國際網(wǎng)站的香水產(chǎn)品宣傳頁面，使用金色作為網(wǎng)頁的主色調(diào)，顯得高貴、典雅，烘托出了產(chǎn)品的高格調(diào)和高品味。如果該網(wǎng)頁使用了藍(lán)色為主色調(diào)，雖然也顯示出了頁面的和諧，但無法表現(xiàn)出產(chǎn)品的內(nèi)涵，因此讓人感覺有些離題，沖淡了網(wǎng)頁的主體。既然知道了配色的主導(dǎo)作用，那么我們在教學(xué)中就要不斷滲透這一關(guān)鍵點，建議在網(wǎng)頁課之前開設(shè)一些美術(shù)基礎(chǔ)課。在教學(xué)中，引導(dǎo)學(xué)生多瀏覽國內(nèi)外經(jīng)典的網(wǎng)站，看到精美作品，即時利用抓圖工具保存，去模仿設(shè)計師的配色方案。持之以恒，對于配色感到畏難的學(xué)生也自然能夠吸取他人之長為己用。

（二）設(shè)計整體效果圖。 對于效果圖即網(wǎng)站最終成品的大致輪廓，它設(shè)計的好壞也直接決定了網(wǎng)站的形象，因此，這一步應(yīng)做作為教學(xué)的主體內(nèi)容。開始教學(xué)時，千萬別只顧教學(xué)生網(wǎng)頁編輯器的知識，而脫離開效果圖的設(shè)計，因此在教學(xué)的前幾周，每周都確定一個主題網(wǎng)頁效果圖（可把Dreamweaver知識滲透，每周一小部分）。具體的教學(xué)思路是這樣的：（1）設(shè)計前期以模仿優(yōu)秀站點為主，中期指定素材設(shè)計，后期自由創(chuàng)作；（2）遵循從上到下，從左到右的制作原則，有些個性化的網(wǎng)站例外。以設(shè)計好的草圖和結(jié)構(gòu)圖作為依據(jù)，進(jìn)行合理地布局；（3）對于Photoshop工具的熟練應(yīng)用尤為重要，只要能靈活的運用好該軟件的各種工具，就能自如地設(shè)計出優(yōu)美的版面。網(wǎng)頁中的很多圖形元素往往就是應(yīng)用適當(dāng)?shù)呐渖由线x框具和填充效果就能實現(xiàn)的。當(dāng)然在確實要制作一些不規(guī)則的圖形時，鋼筆工具的強(qiáng)大功能就得到完美的體現(xiàn)。筆者常讓學(xué)生用鋼筆工具制作一些較為復(fù)雜的圖形，從而加強(qiáng)了學(xué)生制圖能力；（4）針對網(wǎng)頁的重要的元素，比如Logo、banner，以及某些網(wǎng)頁宣傳圖片，有時要達(dá)到一些特殊效果，在Photoshop中就必須使用一些高級技術(shù)才能使其更加完善。類似像利用通道技術(shù)、蒙版技術(shù)，應(yīng)用濾鏡等來處理；（5）效果圖制作成功后，利用Photoshop提供的切片工具，合理地切圖，最終保存生成HTML網(wǎng)頁。

總而言之，要想真正創(chuàng)作出一個完美的網(wǎng)站，不僅要有精湛的技術(shù)，還需要有各方面的知識作為補(bǔ)充，如文化修養(yǎng)，美術(shù)底蘊(yùn)，統(tǒng)籌策劃等等。上文談的利用圖形圖像處理軟件來設(shè)計規(guī)劃效果圖是重中之重。在教學(xué)中應(yīng)以此為中心，教會學(xué)生去學(xué)習(xí)和接受新的技術(shù)和新的設(shè)計理念，不斷地探索技術(shù)與藝術(shù)的平衡與結(jié)合，時刻以崗位能力的培養(yǎng)為目標(biāo)，為學(xué)生搭建創(chuàng)作的崗位平臺，這才是引導(dǎo)學(xué)生走向網(wǎng)頁設(shè)計成功之門的捷徑。

參考文獻(xiàn)：

[1]劉效春.靜態(tài)網(wǎng)頁設(shè)計中存在的問題與解決措施探究[J]. 中國新通信. 2015（23）

[2]劉永超.靜態(tài)網(wǎng)頁設(shè)計簡要分析[J].計算機(jī)光盤軟件與應(yīng)用. 2013（18）

[3]姚紹巖.靜態(tài)網(wǎng)頁制作技術(shù)與動態(tài)網(wǎng)頁制作技術(shù)的比較分析[J].信息與電腦（理論版）.2015（04）endprint