江龍

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

參考文獻(xiàn)：

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

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

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