關(guān)曉惠，周志敏

(浙江水利水電學(xué)院，計(jì)算機(jī)與信息工程系，浙江 杭州 310018)

0 引言

隨著web技術(shù)的發(fā)展，以及網(wǎng)站在社會(huì)各個(gè)領(lǐng)域的廣泛應(yīng)用，網(wǎng)頁(yè)設(shè)計(jì)人才的需求也越來(lái)越多，各類高校都相繼開(kāi)設(shè)《網(wǎng)頁(yè)設(shè)計(jì)與制作》課程，培養(yǎng)學(xué)生進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)與制作的能力.目前《網(wǎng)頁(yè)設(shè)計(jì)與制作》課程已經(jīng)成為大部分高職高專院校計(jì)算機(jī)專業(yè)的一門專業(yè)基礎(chǔ)課，該課程具有很強(qiáng)的操作性和實(shí)踐性，特別強(qiáng)調(diào)學(xué)生學(xué)以致用的綜合實(shí)踐能力.

SEO(Search Engine Optimization)，翻譯為搜索引擎優(yōu)化.主要工作是通過(guò)了解各類搜索引擎如何抓取互聯(lián)網(wǎng)頁(yè)面、如何進(jìn)行索引以及如何確定其對(duì)某一特定關(guān)鍵詞的搜索結(jié)果排名等技術(shù)，對(duì)網(wǎng)站基本要素(欄目結(jié)構(gòu)，網(wǎng)站內(nèi)容，網(wǎng)站服務(wù)，網(wǎng)頁(yè)布局，代碼編寫)等進(jìn)行優(yōu)化，使其提高搜索引擎排名，從而提高網(wǎng)站訪問(wèn)量，最終提升網(wǎng)站的銷售能力或宣傳能力的技術(shù).

現(xiàn)在越來(lái)越多的企業(yè)和商家開(kāi)始重視互聯(lián)網(wǎng)帶來(lái)經(jīng)濟(jì)效益，而他們的網(wǎng)站能否被互聯(lián)網(wǎng)搜索引擎找到，嚴(yán)重影響到他們的銷售利潤(rùn).因此企業(yè)網(wǎng)站和商業(yè)網(wǎng)站的推廣已經(jīng)成為他們利潤(rùn)獲取的重要手段，而SEO在網(wǎng)絡(luò)營(yíng)銷中占主導(dǎo)地位，它為網(wǎng)站帶來(lái)更多的定向流量.因此我們?cè)谶M(jìn)行網(wǎng)頁(yè)設(shè)計(jì)和網(wǎng)站開(kāi)發(fā)時(shí)考慮搜索引擎優(yōu)化，將會(huì)極大提高網(wǎng)站的推廣能力［1］.基于此，在《網(wǎng)頁(yè)設(shè)計(jì)與制作》的教學(xué)中急需融入SEO的知識(shí)，培養(yǎng)學(xué)生進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)與制作技能的同時(shí)，讓學(xué)生建立網(wǎng)站優(yōu)化和營(yíng)銷的概念，將會(huì)提高學(xué)生的就業(yè)競(jìng)爭(zhēng)力.

1 《網(wǎng)頁(yè)設(shè)計(jì)與制作》課程現(xiàn)狀

《網(wǎng)頁(yè)設(shè)計(jì)與制作》是我校計(jì)算機(jī)專業(yè)的基礎(chǔ)平臺(tái)課，主要培養(yǎng)學(xué)生網(wǎng)頁(yè)設(shè)計(jì)和制作能力，通過(guò)該門課的學(xué)習(xí)，使學(xué)生掌握網(wǎng)頁(yè)設(shè)計(jì)的基本概念，掌握常用的網(wǎng)頁(yè)設(shè)計(jì)和制作的工具，方法和技巧，使學(xué)生具備信息技術(shù)行業(yè)應(yīng)用性人才所必需的網(wǎng)頁(yè)制作等有關(guān)理論知識(shí)和實(shí)際技能，具備從事網(wǎng)站開(kāi)發(fā)、網(wǎng)站美工、網(wǎng)頁(yè)設(shè)計(jì)與制作、網(wǎng)站推廣、網(wǎng)絡(luò)編輯、網(wǎng)站運(yùn)營(yíng)與管理等崗位的能力.該課程還擔(dān)負(fù)著幫助畢業(yè)生在未來(lái)職業(yè)生涯中從初級(jí)的網(wǎng)站美工向高級(jí)的網(wǎng)頁(yè)設(shè)計(jì)與制作員，網(wǎng)站編程員等崗位遷徙的重任.

目前，《網(wǎng)頁(yè)設(shè)計(jì)與制作》這門課程，在內(nèi)容設(shè)置上主要包括HTML基本語(yǔ)法，CSS樣式表，以及Dreamweaver軟件的應(yīng)用三大模塊［2］.模塊間既相互獨(dú)立，又相互關(guān)聯(lián).獨(dú)立性體現(xiàn)在:各個(gè)模塊在網(wǎng)頁(yè)設(shè)計(jì)中扮演著不同的角色，HTML主要控制網(wǎng)頁(yè)的顯示的內(nèi)容，CSS控制網(wǎng)頁(yè)的顯示樣式，Dreamweaver是網(wǎng)頁(yè)設(shè)計(jì)的工具.關(guān)聯(lián)性體現(xiàn)在:每個(gè)模塊間的知識(shí)層層遞進(jìn)，相互關(guān)聯(lián)，前面的模塊是后面模塊的基礎(chǔ)，后面的模塊又加強(qiáng)了前面模塊的知識(shí)內(nèi)容.在教學(xué)組織上一個(gè)一個(gè)模塊的學(xué)習(xí)，后面的學(xué)習(xí)以前面的案例為基礎(chǔ)，這樣學(xué)生既能知道他們的不同，又能了解他們之間的聯(lián)系，讓學(xué)生循序漸進(jìn)地掌握網(wǎng)頁(yè)設(shè)計(jì)的精髓.在教學(xué)實(shí)施上主要使用項(xiàng)目化教學(xué)、案例化教學(xué)、教學(xué)做一體化教學(xué).

目前該課程的重點(diǎn)是網(wǎng)站的建設(shè)和網(wǎng)頁(yè)設(shè)計(jì)，沒(méi)有涉及到網(wǎng)站和網(wǎng)頁(yè)內(nèi)容的優(yōu)化問(wèn)題.采用的模式是首先搭建網(wǎng)站，之后進(jìn)行數(shù)據(jù)維護(hù)和網(wǎng)站優(yōu)化及推廣.隨著搜索引擎在企業(yè)網(wǎng)站推廣中占據(jù)越來(lái)越重要的地位，創(chuàng)建搜索引擎喜愛(ài)和用戶喜愛(ài)兼有的網(wǎng)頁(yè)和網(wǎng)站是這門課的主要目標(biāo).因此本課程改革的方向是在課程的教學(xué)過(guò)程中，滲透一些SEO的知識(shí)，培養(yǎng)學(xué)生在網(wǎng)站建設(shè)和網(wǎng)頁(yè)設(shè)計(jì)時(shí)，有意識(shí)地按照SEO的理念去分析和設(shè)計(jì)問(wèn)題，使設(shè)計(jì)出的網(wǎng)站和網(wǎng)頁(yè)對(duì)搜索引擎友好.主要包括網(wǎng)站結(jié)構(gòu)，代碼優(yōu)化，頁(yè)面布局，網(wǎng)站導(dǎo)航結(jié)構(gòu)，圖片優(yōu)化，關(guān)鍵字，META標(biāo)簽等優(yōu)化.

2 從SEO的角度改革課程內(nèi)容

搜索引擎的工作原理是搜索引擎事先通過(guò)一個(gè)稱之為Spider的程序從一個(gè)網(wǎng)頁(yè)或多個(gè)網(wǎng)頁(yè)出發(fā)，逐步遍歷互聯(lián)網(wǎng)上的頁(yè)面.Spider首先解析網(wǎng)頁(yè)的HTML代碼，查找該頁(yè)面內(nèi)的超鏈接，然后根據(jù)超鏈接搜索其他頁(yè)面，并建立關(guān)鍵字與其所在位置的對(duì)照表，存儲(chǔ)到數(shù)據(jù)庫(kù).當(dāng)用戶輸入要搜索的關(guān)鍵字時(shí)，搜索引擎根據(jù)輸入的關(guān)鍵字從數(shù)據(jù)庫(kù)中查找匹配的網(wǎng)頁(yè)，并將結(jié)果返回給用戶.

結(jié)合搜索引擎的工作原理，基于SEO技術(shù)的《網(wǎng)頁(yè)設(shè)計(jì)與制作》課程教學(xué)應(yīng)該從網(wǎng)站結(jié)構(gòu)、網(wǎng)站內(nèi)容、網(wǎng)頁(yè)布局、圖片優(yōu)化、超鏈接優(yōu)化、關(guān)鍵詞優(yōu)化等方面著手進(jìn)行改進(jìn)［3－4］.表1為引入SEO前后的課程內(nèi)容，見(jiàn)表1.

表1 引入SEO前后的課程內(nèi)容比較表

在具體教學(xué)實(shí)施時(shí)只要從以下幾個(gè)方面滲透SEO的基本知識(shí)和技術(shù)要點(diǎn):

(1)正確選用和合理使用HTML標(biāo)記

HTML是網(wǎng)頁(yè)設(shè)計(jì)與制作的基本語(yǔ)言，因此正確選用和合理使用HTML標(biāo)記培養(yǎng)學(xué)生網(wǎng)頁(yè)設(shè)計(jì)技能的核心和基礎(chǔ).隨著CSS的快速發(fā)展，很多HTML標(biāo)記已漸漸被淘汰，因此在教學(xué)中，舊的HTML標(biāo)記就可以忽略，重點(diǎn)加強(qiáng)搜索引擎看重的標(biāo)記.

■ 重視標(biāo)題標(biāo)記＜H1＞的使用

＜H1＞的權(quán)重比其他標(biāo)記的要大，因此在講解時(shí)可以強(qiáng)調(diào)＜H1＞的使用，所有的標(biāo)題標(biāo)記都可以使用＜H1＞，具體的樣式的可以采用CSS樣式表單獨(dú)設(shè)置.

■ 根據(jù)語(yǔ)義合理選用標(biāo)記:＜DIV＞標(biāo)記和＜SPAN＞標(biāo)記，＜OL＞標(biāo)記和＜UL＞標(biāo)記

DIV+CSS是當(dāng)前最流行的網(wǎng)頁(yè)設(shè)計(jì)技術(shù)，如果無(wú)視標(biāo)簽語(yǔ)義和默認(rèn)樣式，使用＜DIV＞標(biāo)記和CSS樣式表可以制作出視覺(jué)效果很好的頁(yè)面.但是這樣雖然視覺(jué)上達(dá)到了要求，但是整個(gè)頁(yè)面一點(diǎn)語(yǔ)義都沒(méi)有，搜索引擎看不懂.因此要設(shè)計(jì)出搜索引擎喜歡的頁(yè)面，頁(yè)面的結(jié)構(gòu)(html)才是重點(diǎn)，樣式(CSS)是用來(lái)修飾結(jié)構(gòu).一個(gè)良好的頁(yè)面的結(jié)構(gòu)應(yīng)該是良好有序的，有很好的可讀性.

(2)重視網(wǎng)頁(yè)頭部代碼

網(wǎng)頁(yè)的頭部信息因?yàn)樵陧?yè)面中不顯示，因此網(wǎng)頁(yè)設(shè)計(jì)人員往往關(guān)注頁(yè)面的布局和頁(yè)面美觀，容易忽略網(wǎng)頁(yè)頭部信息的設(shè)置.其實(shí)網(wǎng)頁(yè)的頭部信息對(duì)于搜索引擎十分重要.

＜title＞標(biāo)記是網(wǎng)頁(yè)的標(biāo)題，搜索引擎的“蜘蛛”在抓取頁(yè)面時(shí)，首先會(huì)考慮網(wǎng)頁(yè)的標(biāo)題，合理設(shè)置＜title＞標(biāo)記不但能突出網(wǎng)頁(yè)的主題，還有助于提高網(wǎng)站的搜索引擎排名.

＜Meta name="keywords"content=""＞是頁(yè)面涉及到的關(guān)鍵詞，可以適當(dāng)使用長(zhǎng)尾關(guān)鍵詞.

＜Meta name="description"content=""＞是頁(yè)面的簡(jiǎn)短文字描述，在此可以加入一些網(wǎng)頁(yè)關(guān)鍵詞.

＜Meta name="Robots"content=""＞告訴搜索引擎是否索引此頁(yè)面、是否跟蹤此頁(yè)面上的鏈接等.

(3)超鏈接優(yōu)化

超鏈接是指從一個(gè)網(wǎng)頁(yè)指向一個(gè)目標(biāo)的連接關(guān)系，它是網(wǎng)頁(yè)上的重要元素，也是網(wǎng)頁(yè)與網(wǎng)頁(yè)之間發(fā)生聯(lián)系的紐帶.因此在教學(xué)中，不但要讓學(xué)生了解如何在頁(yè)面中插入超鏈接，還要結(jié)合SEO觀念優(yōu)化超鏈接.網(wǎng)頁(yè)中最重要的超鏈接是網(wǎng)站導(dǎo)航，在做網(wǎng)站導(dǎo)航時(shí)最好使用文字鏈接，尤其是關(guān)鍵字鏈接.對(duì)于圖片或者JS腳本來(lái)做導(dǎo)航，搜索引擎是無(wú)法索引的.另外在設(shè)計(jì)網(wǎng)站的鏈接關(guān)系時(shí)，要確保從首頁(yè)出發(fā)到網(wǎng)站任何一個(gè)地方都不要大于4次點(diǎn)擊，如果是小型網(wǎng)站，還可以放在根目錄，離首頁(yè)越近越好，鏈接最好是單向的.

(4)圖片優(yōu)化

圖片是網(wǎng)頁(yè)設(shè)計(jì)的重要元素，標(biāo)準(zhǔn)的圖片嵌入標(biāo)記為 ＜img＞，它包含的5個(gè)關(guān)鍵性 src、width、height、alt和title.替換文字屬性alt是為了給那些不能看到你文檔中圖像的瀏覽者提供文字說(shuō)明.圖片標(biāo)題屬性title是對(duì)圖片的說(shuō)明和額外補(bǔ)充，由于這兩個(gè)屬性對(duì)頁(yè)面的視覺(jué)效果影響不大，往往容易被忽略.這兩個(gè)屬性是搜索引擎抓取的重點(diǎn).另外圖片的文件設(shè)置為關(guān)鍵詞要比隨機(jī)命名效果好.因?yàn)樗阉饕鏁?huì)抓取網(wǎng)頁(yè)時(shí)會(huì)分析圖片周圍的文字信息，因此在圖片的周圍添加和圖片相關(guān)的文字信息，有助于提高搜索引擎排名.

另外為了美化頁(yè)面的外觀，通常需要給頁(yè)面上的對(duì)象添加一背景圖片，不但看起來(lái)漂亮，而且加強(qiáng)了網(wǎng)頁(yè)所傳達(dá)的信息.由于圖片占用的資源較多，如果一個(gè)頁(yè)面中使用過(guò)多的圖片，會(huì)使頁(yè)面的下載速度變慢，因此，在CSS中背景的平鋪選項(xiàng)是在網(wǎng)頁(yè)設(shè)計(jì)中能夠經(jīng)常使用到的一個(gè)選項(xiàng)，常用的方式是制作一個(gè)寬度為1px的背景圖片，通過(guò)CSS的平鋪屬性實(shí)現(xiàn)背景圖片的平鋪，這樣減少網(wǎng)頁(yè)占用的存儲(chǔ)空間，提高網(wǎng)頁(yè)的打開(kāi)速度.

搜索引擎對(duì)于圖片權(quán)重的排序?yàn)閖pg、jpeg、gif、png、bmp，其中jpg的圖片格式搜索引擎中的排名是最好的，得到權(quán)重也是最高的，因此在教學(xué)推薦學(xué)生使用jpg格式的圖片.

(5)網(wǎng)頁(yè)布局

傳統(tǒng)的網(wǎng)頁(yè)布局更多的是使用表格，有時(shí)為了達(dá)到一定的視覺(jué)效果，不得不套用多個(gè)表格.但搜索引擎spider在爬行表格布局的頁(yè)面時(shí)，如果遇到多層表格嵌套，會(huì)跳過(guò)嵌套的內(nèi)容或直接放棄整個(gè)頁(yè)面.如果嵌套的表格中是核心內(nèi)容，spider爬行時(shí)就會(huì)跳過(guò)這一段而不能抓取到頁(yè)面的核心.因此用表格布局頁(yè)面時(shí)一般不要超過(guò)三層以上的表格嵌套.隨著XHTML的廣泛應(yīng)用，DIV+CSS的布局方法越來(lái)越流行，這種布局方法實(shí)現(xiàn)網(wǎng)頁(yè)內(nèi)容和表現(xiàn)相分離，而且代碼簡(jiǎn)潔，對(duì)于大型網(wǎng)站來(lái)說(shuō)，可以節(jié)省大量的帶寬.更重要的是搜索引擎更傾向于這種布局方法.因此在教學(xué)上應(yīng)該弱化表格布局的講解，直接講解最新流行了CSS+DIV布局方法.

(6)做好網(wǎng)站規(guī)劃，合理組織網(wǎng)站結(jié)構(gòu)

在教學(xué)過(guò)程中，教師經(jīng)常會(huì)把重點(diǎn)放到網(wǎng)頁(yè)設(shè)計(jì)的方法和技巧上，而忽略整個(gè)網(wǎng)站的規(guī)劃和結(jié)構(gòu)設(shè)計(jì).根據(jù)SEO的觀點(diǎn)，一個(gè)良好的王贊不僅僅要重視頁(yè)面內(nèi)容的設(shè)計(jì)，還要強(qiáng)調(diào)整個(gè)網(wǎng)站結(jié)構(gòu)的建設(shè)，和頁(yè)面文件和資源文件的合理組織.

網(wǎng)站的物理結(jié)構(gòu)指的是網(wǎng)站真實(shí)的目錄和文件所存儲(chǔ)的位置的結(jié)構(gòu)，對(duì)于小型的網(wǎng)站，采用扁平結(jié)構(gòu)，即所有的頁(yè)面都存在網(wǎng)站的根目錄下.對(duì)于較大型的網(wǎng)站，一般采用樹(shù)形結(jié)構(gòu)，在根目錄下分成多個(gè)頻道，不同的頻道下面放置屬于該頻道的頁(yè)面，這種樹(shù)形結(jié)構(gòu)的深度一般控制在3－4層，不要太多，否則搜索引擎會(huì)放棄搜索.

同時(shí)，還要為網(wǎng)站建立一個(gè) Sitemap地圖.Sitemap是網(wǎng)站上所有網(wǎng)頁(yè)列表，創(chuàng)建并提交Sitemap有助于搜索引擎知道你網(wǎng)站的所有網(wǎng)頁(yè)，還要把Sitemap地圖放到網(wǎng)站首頁(yè)，使搜索引擎很方便的就能抓取網(wǎng)站上的所有網(wǎng)頁(yè).

3 教學(xué)模式探索

在教學(xué)模式上，采用三階段遞進(jìn)的教學(xué)模式，見(jiàn)表2.第1階段是課堂教學(xué)和實(shí)驗(yàn)教學(xué)相結(jié)合，主要采用案例教學(xué)方法，第2階段是實(shí)踐教學(xué)環(huán)節(jié)，主要采用項(xiàng)目導(dǎo)向教學(xué)方法，第3階段是企業(yè)現(xiàn)場(chǎng)實(shí)踐，參與具體項(xiàng)目，工學(xué)結(jié)合.通過(guò)這些教學(xué)環(huán)節(jié)，提高學(xué)生的實(shí)際操作能力，培養(yǎng)他們的職業(yè)素養(yǎng)，實(shí)現(xiàn)與企業(yè)的全面對(duì)接，保證了在校學(xué)習(xí)和實(shí)際工作的一致性［5］.

表2 三階段遞進(jìn)式教學(xué)模式

在第1階段的教學(xué)中按照“教師為主導(dǎo)，學(xué)生為主體，訓(xùn)練為主線”的原則，以若干個(gè)案例為載體，將“教、學(xué)、練、做”融為一體，循序漸進(jìn)，構(gòu)建完整的教學(xué)模式.在教學(xué)案例的選擇上，我們從實(shí)際出發(fā)，精心準(zhǔn)備各種典型案例，例如，房產(chǎn)公司信息發(fā)布網(wǎng)站、網(wǎng)上鮮花直銷、個(gè)人網(wǎng)站精選、書(shū)籍專賣等.

在第2個(gè)階段教學(xué)中，我們采用項(xiàng)目導(dǎo)向，任務(wù)驅(qū)動(dòng)法.項(xiàng)目的實(shí)施過(guò)程按照CDIO教學(xué)理念，每個(gè)項(xiàng)目從開(kāi)始到完成共經(jīng)歷5個(gè)過(guò)程:前期策劃，制作網(wǎng)頁(yè)效果圖，搭建網(wǎng)站結(jié)構(gòu)，制作網(wǎng)站主頁(yè)和子頁(yè)面，網(wǎng)站的發(fā)布和維護(hù).在這個(gè)教學(xué)過(guò)程中，學(xué)生以團(tuán)隊(duì)協(xié)作的方式完成給定的項(xiàng)目，將學(xué)習(xí)過(guò)程融入到工作環(huán)境中.整個(gè)過(guò)程既提高學(xué)生的專業(yè)技能，同時(shí)培養(yǎng)學(xué)生的溝通能力，加強(qiáng)團(tuán)隊(duì)協(xié)作能力、創(chuàng)新以及解決復(fù)雜問(wèn)題的能力.

在前兩階段的基礎(chǔ)上，學(xué)生已基本具備了一定的職業(yè)能力和技術(shù)，在第3個(gè)階段讓學(xué)生到企業(yè)一線，具體參與真實(shí)項(xiàng)目的設(shè)計(jì)與制作，將校內(nèi)學(xué)習(xí)內(nèi)容與崗位工作密切結(jié)合起來(lái)，更進(jìn)一步地鍛煉學(xué)生的專業(yè)技能.

4 結(jié)論

隨著社會(huì)上對(duì)網(wǎng)頁(yè)設(shè)計(jì)與制作人才需求的增加，高校中相應(yīng)地開(kāi)設(shè)了《網(wǎng)頁(yè)設(shè)計(jì)與制作》課程來(lái)培養(yǎng)這方面的人才.由于當(dāng)前各類網(wǎng)站眾多，如何使開(kāi)發(fā)出的網(wǎng)站受到搜索引擎的青睞，是我們?cè)诮淌谶@門課的過(guò)程需要面對(duì)的問(wèn)題.本文主要根據(jù)搜索引擎優(yōu)化的理念，來(lái)調(diào)整教學(xué)內(nèi)容和教學(xué)重點(diǎn)，并對(duì)教學(xué)模式進(jìn)行了初步的探索.希望通過(guò)各種課程優(yōu)化措施，培養(yǎng)出和社會(huì)需求無(wú)縫對(duì)接的網(wǎng)頁(yè)設(shè)計(jì)與制作專業(yè)人才.

［1］張 希.SEO在網(wǎng)站設(shè)計(jì)中的優(yōu)化策略分析［J］.計(jì)算機(jī)光盤軟件與應(yīng)用，2012(17):163.

［2］洪 穎.《網(wǎng)頁(yè)設(shè)計(jì)》課程教學(xué)中若干問(wèn)題的思考和探索［J］.信息與電腦:理論版，2013(1):211－212.

［3］丁海燕，袁國(guó)武，張春紅，等.《網(wǎng)頁(yè)設(shè)計(jì)與制作》課程優(yōu)化與教學(xué)方法探索［J］.云南農(nóng)業(yè)大學(xué)學(xué)報(bào):社會(huì)科學(xué)版，2011(3):73－75.

［4］朱興榮.基于SEO技術(shù)的高職《電子商務(wù)網(wǎng)站建設(shè)》課程改革探索［J］.電子商務(wù)，2011(10):82 －83.

［5］馮文惠.高職高?！毒W(wǎng)頁(yè)設(shè)計(jì)與制作》課程改革與實(shí)踐［J］.安徽電子信息職業(yè)技術(shù)學(xué)院學(xué)報(bào)，2011(5):59－61.