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

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

0 引言

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

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

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

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

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

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

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

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

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

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

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

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

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

HTML是網(wǎng)頁設(shè)計與制作的基本語言，因此正確選用和合理使用HTML標(biāo)記培養(yǎng)學(xué)生網(wǎng)頁設(shè)計技能的核心和基礎(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)記的要大，因此在講解時可以強(qiáng)調(diào)＜H1＞的使用，所有的標(biāo)題標(biāo)記都可以使用＜H1＞，具體的樣式的可以采用CSS樣式表單獨(dú)設(shè)置.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3 教學(xué)模式探索

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

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

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

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

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

4 結(jié)論

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

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

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

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

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

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