一站式高職電子商務網頁制作教學改革與實踐

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

關鍵詞 電子商務；網頁制作；項目化教學；教學改革

中圖分類號：G712 文獻標識碼：B

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

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

1 電子商務網頁制作教學改革因素分析

1）教學內容涉及面廣。與靜態網頁設計相關的教學內容一般有HTML語言、CSS樣式、Dreamweaver和Fireworks等制作工具；與動態頁面設計相關的有程序設計語言和網絡數據庫等。對于電子商務專業學生全面學習這些知識和操作有很大的困難。

2）教師在靜態網頁和動態網頁的教學過程中講授的教學案例基本上沒有連續性和相關性。這樣的教學方式存在的弊端就是學習內容比較零散，學生沒能對整個網站的建設過程有很好的整體性的認識。

3）電子商務網站建設的課程教學一般把靜態網頁和動態網頁設計分開為兩門課程進行講授，知識講授缺乏連貫性，學生難以靈活應用所學知識。

因此，要在有限的課堂教學時間內更好地提高電子商務網頁制作的教學效率，就需要對電子商務網頁制作課程教學內容進行整體設計。

2 一站式電子商務網頁制作教學內容設計

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

3 一站式電子商務網頁制作教學實施

一站式教學采用的是同一個網站，靜態網頁制作好后，可以直接用動態網頁技術代碼替換靜態網頁的相應代碼，使之變為動態網頁。下面以“項目3—新聞資訊列表頁”制作為列，談談一站式電子商務網頁制作教學項目實施的過程。

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

制作靜態網頁

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

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

2）任務相關知識。本網頁采用DIV+CSS布局。由DIV+

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

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

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

#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}

制作動態網頁

1）任務分析與操作。因為選擇的建站系統是dedeCMS內容管理系統，所以本次任務制作的動態網頁其實就是制作網站的模板頁。下面是本次任務制作的網站模版頁的方法和操作。

網站新聞列表頁的靜態頁面做好后，首先將list_news.

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

templets＼default文件夾中的對應位置。接著在Dreamweaver

中打開list_news.htm模板文件，參考任務1和任務2，用織夢CMS模板標簽替換list_news.htm文件的靜態網頁代碼，這樣就可以從數據庫中讀取相關信息，實現動態顯示網頁內容。本項目要完成的新聞標題列表欄目的動態代碼如下：

2）任務相關知識。在這個動態網頁中主要學習三個新的織夢標簽：一是顯示當前位置標簽{dede：field name=

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

①{dede：field name="position"/}標簽作用是顯示當前頁面所在欄目。應用例子：

②list標簽主要是用于列表頁顯示列表數據，應用在list_*.htm這種模板中。應用例子：

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

′15′}

{/dede：list}

list標簽相關參數說明：

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

titlelen=′32′：標題長度為32個字符；

orderby=′pubdate′ ：按發布日期排序列表標題；

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

底層模板介紹：

[field：textlink/]：記錄的鏈接網址，如一條新聞標題的鏈接地址；

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

③pagelist標簽和list標簽配合使用，表示分頁頁碼列表，應用于列表模板list_*.htm。應用實例：

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

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

4 結束語

一站式電子商務網頁制作教學方式是一種接近于網站實戰方式的教學，是一種接近于“工學結合”方式的教學。通過一站式教學設計及采用織夢CMS這樣的簡單建站系統，電子商務專業學生就能夠很好地理解和掌握靜態網頁和動態網頁設計的相關知識與操作，而且學習網頁設計的過程就是創建網站的過程。這樣在“做中學”，學生學習積極性高，教學效果就比較好。

參考文獻

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

[2]陳曉燕.項目教學法在《電子商務網頁制作》課程中的運用[J].中國科教創新導刊，2014（5）.endprint