基于崗位能力培養的中職《靜態網頁》課程的教學創新實踐

江龍

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

【關鍵詞】網頁 教學 創新

【中圖分類號】G71 【文獻標識碼】A 【文章編號】2095-3089（2017）32-0232-01

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

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

創新一：改變單純的課堂教學模式，構建貼近實際工作崗位的教學環境。

做法是：在教完理論知識的前提下，基于晉江這塊民營企業發達的地區，筆者把學生分成若干學習小組，帶領他們大膽地走進各類中小企業，主動承擔開發企業網站的任務。這樣不僅讓學生提前體驗網頁設計崗位工作場景，培養崗位認知，激發崗位熱情，也為將來走入職場打下堅實的基礎，積累了社會經驗。

創新二：改變傳統的教學程序，形成以培養學生崗位能力為目標的教學體系。

（一）首先夯實基礎，避免后續教學成為空中樓閣。

鑒于Photoshop強大的圖形圖像處理功能，把這門課開設在網頁課之前，并且在網頁設計教學中充分利用Photoshop強大的圖形圖像處理功能。

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

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

（四）最后，引導學生充分利用Photoshop強大的圖形圖像處理功能。 目前設計網頁運用較為廣泛的還是Photoshop軟件， Photoshop利用自身在圖像處理上的優勢，還實現多方面的網絡應用。利用圖形圖像可視化操作程度比較高的特點，進行網頁的視覺設計、排版布局，并創建為頁面的HTML文件。Photoshop能夠完成網站中各種類型的Web圖像設計和制作，還包括圖像為適于網絡發布進行的各項圖像優化功作。

創新三：改變教學策略，實現教學目標和崗位能力相統一教學結果。

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

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

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

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

參考文獻：

[1]劉效春.靜態網頁設計中存在的問題與解決措施探究[J]. 中國新通信. 2015（23）

[2]劉永超.靜態網頁設計簡要分析[J].計算機光盤軟件與應用. 2013（18）

[3]姚紹巖.靜態網頁制作技術與動態網頁制作技術的比較分析[J].信息與電腦（理論版）.2015（04）endprint