一站式高职电子商务网页制作教学改革与实践

摘 要 针对电子商务网页制作教学中存在的问题，阐述以一个电子商务网站的几个典型页面作为教学项目，贯穿静态网页和动态网页的课堂教学设计与实施，展现如何在页面设计中融合静态和动态网页知识的传授，对高职电子商务网页制作教学有一定的借鉴作用。

关键词 电子商务；网页制作；项目化教学；教学改革

中图分类号：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代码如下所示：

• 海悦山庄超豪华酒店4日自由行 02-03
• 呀诺达+南山2日豪华团队游02-04

……

2）任务相关知识。本网页采用DIV+CSS布局。由DIV+

CSS布局构建的网页代码简洁，有利于突出重点和适合搜索引擎抓取，加载速度也快。

是一个块级元素，可以通过

的class或id应用额外的样式。比如本实例id名称为newsquery的div样式设置是#newsquery {margin：

0px；padding：0px； width：700px；}。

ul无序列表标签是本次项目的学习重点知识之一。ul标签是Web标准布局中最常用的标签，无序列表是以ul元素包含li元素的代码形式，在浏览器显示时默认每行前的符号是圆点，可以通过样式表改为无、方块、空心圆或小图片等。本次制作的新闻标题列表就是通过样式设置用背景图片来实现，样式代码如下所示：

1 [2] 存入我的阅览室

#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文件的静态网页代码，这样就可以从数据库中读取相关信息，实现动态显示网页内容。本项目要完成的新闻标题列表栏目的动态代码如下：

您现在的位置：{dede：field name=″position″/}

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

• [field：textlink/][field：pubdate function=MyDate（′Y-m-d′，@me）/]

{/dede：list}

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

2）任务相关知识。在这个动态网页中主要学习三个新的织梦标签：一是显示当前位置标签{dede：field name=

"position"/}；二是list标签；三是和list标签配套使用的pagelist标签。这三个标签的使用方法说明如下。

①{dede：field name="position"/}标签作用是显示当前页面所在栏目。应用例子：

您现在的位置：{dede：field name=

″position″/}

②list标签主要是用于列表页显示列表数据，应用在list_*.htm这种模板中。应用例子：

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

′15′}

[field：textlink/][field：pubdate function=

MyDate（′Y-m-d′，@me）/]

{/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