一站式高職電子商務(wù)網(wǎng)頁制作教學(xué)改革與實踐

摘 要 針對電子商務(wù)網(wǎng)頁制作教學(xué)中存在的問題，闡述以一個電子商務(wù)網(wǎng)站的幾個典型頁面作為教學(xué)項目，貫穿靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁的課堂教學(xué)設(shè)計與實施，展現(xiàn)如何在頁面設(shè)計中融合靜態(tài)和動態(tài)網(wǎng)頁知識的傳授，對高職電子商務(wù)網(wǎng)頁制作教學(xué)有一定的借鑒作用。

關(guān)鍵詞 電子商務(wù)；網(wǎng)頁制作；項目化教學(xué)；教學(xué)改革

中圖分類號：G712 文獻標(biāo)識碼：B

文章編號：1671-489X（2015）23-0115-03

電子商務(wù)作為一個專業(yè)教學(xué)已有多年發(fā)展歷程，電子商務(wù)網(wǎng)頁制作教學(xué)內(nèi)容也一直在不斷改革與實踐。網(wǎng)頁制作是電子商務(wù)專業(yè)學(xué)生必須掌握的專業(yè)核心知識和技能。網(wǎng)頁制作課程教學(xué)效果的好壞將直接影響到整個專業(yè)教學(xué)計劃的順利完成和專業(yè)培養(yǎng)目標(biāo)的實現(xiàn)，同時也關(guān)系到學(xué)生的就業(yè)方向。要教好網(wǎng)頁制作的知識和操作，需要根據(jù)電子商務(wù)人才培養(yǎng)目標(biāo)，對網(wǎng)頁制作的課程教學(xué)內(nèi)容進行統(tǒng)籌設(shè)計，采取合適的教學(xué)方法，提高學(xué)生的學(xué)習(xí)興趣，達到良好的教學(xué)效果。對此，筆者根據(jù)教學(xué)實踐經(jīng)驗，介紹一站式高職電子商務(wù)網(wǎng)頁制作的教學(xué)改革與實踐，供大家參考。

1 電子商務(wù)網(wǎng)頁制作教學(xué)改革因素分析

1）教學(xué)內(nèi)容涉及面廣。與靜態(tài)網(wǎng)頁設(shè)計相關(guān)的教學(xué)內(nèi)容一般有HTML語言、CSS樣式、Dreamweaver和Fireworks等制作工具；與動態(tài)頁面設(shè)計相關(guān)的有程序設(shè)計語言和網(wǎng)絡(luò)數(shù)據(jù)庫等。對于電子商務(wù)專業(yè)學(xué)生全面學(xué)習(xí)這些知識和操作有很大的困難。

2）教師在靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁的教學(xué)過程中講授的教學(xué)案例基本上沒有連續(xù)性和相關(guān)性。這樣的教學(xué)方式存在的弊端就是學(xué)習(xí)內(nèi)容比較零散，學(xué)生沒能對整個網(wǎng)站的建設(shè)過程有很好的整體性的認識。

3）電子商務(wù)網(wǎng)站建設(shè)的課程教學(xué)一般把靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁設(shè)計分開為兩門課程進行講授，知識講授缺乏連貫性，學(xué)生難以靈活應(yīng)用所學(xué)知識。

因此，要在有限的課堂教學(xué)時間內(nèi)更好地提高電子商務(wù)網(wǎng)頁制作的教學(xué)效率，就需要對電子商務(wù)網(wǎng)頁制作課程教學(xué)內(nèi)容進行整體設(shè)計。

2 一站式電子商務(wù)網(wǎng)頁制作教學(xué)內(nèi)容設(shè)計

本文提出的一站式電子商務(wù)網(wǎng)頁制作教學(xué)內(nèi)容設(shè)計就是以一個典型的、簡潔的、美觀的企業(yè)網(wǎng)站作為教學(xué)案例，在電子商務(wù)網(wǎng)站建設(shè)教學(xué)過程中，即從靜態(tài)網(wǎng)頁制作到動態(tài)網(wǎng)頁制作，均以該網(wǎng)站作為課堂教學(xué)實例進行教學(xué)。在動態(tài)網(wǎng)頁制作方面，選擇織夢CMS內(nèi)容管理系統(tǒng)作為建站工具，該系統(tǒng)模板標(biāo)簽使用方法和HTML標(biāo)簽類似，制作動態(tài)網(wǎng)頁相比使用ASP.NET或PHP等技術(shù)簡單。這樣既可以減輕學(xué)生學(xué)習(xí)動態(tài)網(wǎng)站建設(shè)的難度，又能夠讓學(xué)生學(xué)會動態(tài)網(wǎng)頁制作和管理網(wǎng)站的相關(guān)操作，提高學(xué)生學(xué)習(xí)網(wǎng)頁制作的興趣。根據(jù)網(wǎng)站頁面的創(chuàng)建難度和網(wǎng)頁制作教學(xué)的特點，遵循由簡單到復(fù)雜的教學(xué)過程，從網(wǎng)站中選擇幾個典型的頁面作為大項目，進行項目式教學(xué)，每個項目都有教學(xué)內(nèi)容的側(cè)重點，整個項目能夠涵蓋所有的教學(xué)內(nèi)容。在完成這些項目的過程中需要用到哪些網(wǎng)頁知識和操作就講什么。比如將網(wǎng)頁banner圖片設(shè)置成多張圖片的幻燈片效果時，就介紹如何在網(wǎng)頁中應(yīng)用JAVA特效代碼等。

3 一站式電子商務(wù)網(wǎng)頁制作教學(xué)實施

一站式教學(xué)采用的是同一個網(wǎng)站，靜態(tài)網(wǎng)頁制作好后，可以直接用動態(tài)網(wǎng)頁技術(shù)代碼替換靜態(tài)網(wǎng)頁的相應(yīng)代碼，使之變?yōu)閯討B(tài)網(wǎng)頁。下面以“項目3—新聞資訊列表頁”制作為列，談?wù)勔徽臼诫娮由虅?wù)網(wǎng)頁制作教學(xué)項目實施的過程。

布置學(xué)習(xí)任務(wù) 本次任務(wù)是要制作某旅游企業(yè)網(wǎng)站的新聞列表頁list_news.htm，如圖1所示。頁面布局上可分為四大部分，因為網(wǎng)頁頭部、網(wǎng)頁底部和網(wǎng)頁中部左邊的欄目導(dǎo)航這三部份網(wǎng)頁內(nèi)容已在任務(wù)1和任務(wù)2制作完成，所以本次項目的實驗重點就是網(wǎng)頁中部右邊的新聞列表欄目的制作。

制作靜態(tài)網(wǎng)頁

1）任務(wù)分析與操作。對于本實驗任務(wù)，網(wǎng)頁頭部、網(wǎng)頁底部和網(wǎng)頁中部左邊的欄目導(dǎo)航這三部分的網(wǎng)頁內(nèi)容和樣式已經(jīng)在任務(wù)2完成，可以直接從任務(wù)2復(fù)制頁面內(nèi)容相同的代碼和樣式，然后再編寫新聞列表欄目的代碼和樣式。通過觀察圖1新聞列表欄目內(nèi)容布局，又可以細分為當(dāng)前位置提示、新聞標(biāo)題列表和翻頁鏈接三部分。因此可以設(shè)計新聞列表欄的div框架代碼：

框架搭建好后，再往div盒子里面添加內(nèi)容，并設(shè)置樣式。其中在"newsquery"盒子中添加的新聞列表內(nèi)容HTML代碼如下所示：

2）任務(wù)相關(guān)知識。本網(wǎng)頁采用DIV+CSS布局。由DIV+

CSS布局構(gòu)建的網(wǎng)頁代碼簡潔，有利于突出重點和適合搜索引擎抓取，加載速度也快。

#newsquery li{list-style-type： none； background-image： url（../images/line.gif）；}

下面是新聞列表欄目制作的部分樣式設(shè)置及屬性說明：

#newsquery {margin：0px；padding：0px； width：700px；}

#newsquery ul{margin：0；padding：0；}

#newsquery li{list-style-type： none； background-image： url

（../images/line.gif）； background-repeat： no-repeat； background-position：0px 4px； text-indent：25px； line-height：35px}

制作動態(tài)網(wǎng)頁

1）任務(wù)分析與操作。因為選擇的建站系統(tǒng)是dedeCMS內(nèi)容管理系統(tǒng)，所以本次任務(wù)制作的動態(tài)網(wǎng)頁其實就是制作網(wǎng)站的模板頁。下面是本次任務(wù)制作的網(wǎng)站模版頁的方法和操作。

網(wǎng)站新聞列表頁的靜態(tài)頁面做好后，首先將list_news.

htm文件及其用到的圖片和樣式復(fù)制到dedeCMS站點下

templets＼default文件夾中的對應(yīng)位置。接著在Dreamweaver

中打開list_news.htm模板文件，參考任務(wù)1和任務(wù)2，用織夢CMS模板標(biāo)簽替換list_news.htm文件的靜態(tài)網(wǎng)頁代碼，這樣就可以從數(shù)據(jù)庫中讀取相關(guān)信息，實現(xiàn)動態(tài)顯示網(wǎng)頁內(nèi)容。本項目要完成的新聞標(biāo)題列表欄目的動態(tài)代碼如下：

2）任務(wù)相關(guān)知識。在這個動態(tài)網(wǎng)頁中主要學(xué)習(xí)三個新的織夢標(biāo)簽：一是顯示當(dāng)前位置標(biāo)簽{dede：field name=

"position"/}；二是list標(biāo)簽；三是和list標(biāo)簽配套使用的pagelist標(biāo)簽。這三個標(biāo)簽的使用方法說明如下。

①{dede：field name="position"/}標(biāo)簽作用是顯示當(dāng)前頁面所在欄目。應(yīng)用例子：

②list標(biāo)簽主要是用于列表頁顯示列表數(shù)據(jù)，應(yīng)用在list_*.htm這種模板中。應(yīng)用例子：

{dede：list col=′2′ titlelen=′32′orderby=′pubdate′pagesize=

′15′}

{/dede：list}

list標(biāo)簽相關(guān)參數(shù)說明：

col=′2′：分兩列顯示；

titlelen=′32′：標(biāo)題長度為32個字符；

orderby=′pubdate′ ：按發(fā)布日期排序列表標(biāo)題；

pagesize=′15′：分頁大小，每頁顯示15個記錄。

底層模板介紹：

[field：textlink/]：記錄的鏈接網(wǎng)址，如一條新聞標(biāo)題的鏈接地址；

[field：pubdate function=MyDate（'Y-m-d'，@me）/]：記錄的發(fā)布日期，如一條新聞的發(fā)布時間。

③pagelist標(biāo)簽和list標(biāo)簽配合使用，表示分頁頁碼列表，應(yīng)用于列表模板list_*.htm。應(yīng)用實例：

{dede：pagelist listitem=″info，index，end，pre，next，pageno，option″ listsize=″10″ /}

參數(shù)說明：listitem表示頁碼樣式，如index顯示首頁；listsize表示[1][2][3]這些項的長度×2。

4 結(jié)束語

一站式電子商務(wù)網(wǎng)頁制作教學(xué)方式是一種接近于網(wǎng)站實戰(zhàn)方式的教學(xué)，是一種接近于“工學(xué)結(jié)合”方式的教學(xué)。通過一站式教學(xué)設(shè)計及采用織夢CMS這樣的簡單建站系統(tǒng)，電子商務(wù)專業(yè)學(xué)生就能夠很好地理解和掌握靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁設(shè)計的相關(guān)知識與操作，而且學(xué)習(xí)網(wǎng)頁設(shè)計的過程就是創(chuàng)建網(wǎng)站的過程。這樣在“做中學(xué)”，學(xué)生學(xué)習(xí)積極性高，教學(xué)效果就比較好。

參考文獻

[1]孫毅.基于理實一體的“電子商務(wù)網(wǎng)站建設(shè)”課程改革[J].電子商務(wù)，2014（7）.

[2]陳曉燕.項目教學(xué)法在《電子商務(wù)網(wǎng)頁制作》課程中的運用[J].中國科教創(chuàng)新導(dǎo)刊，2014（5）.endprint