高职静态网页设计实训的内容选取及实施

吴美英，陈海燕

（1.靖江中等专业学校，江苏 靖江 214500；2.泰州职业技术学院，江苏 泰州 225300）

近年来，结合社会发展的需要，我校五年制高职中的电子商务专业、计算机信息管理专业等的人才培养方案中，对一些专业课程增加了实训环节，目的是通过相对集中和完整的一段时间让学生做一个项目，从而达到对该课程及其相关知识有一个较全面和完整的认识和掌握。

1 网站设计与制作的一般流程

网站设计与制作的一般流程主要包括网站规划、网站制作、测试、域名和空间申请、站点文件上传等。其中网站规划又包括主题定位、资料搜集、栏目结构设计、目录结构设计、形象设计如网站的标志、色彩、字体、宣传标语等。由此可见，要想完成一个网站的设计与制作，不仅需要培养和提升学生很多方面的能力，而且还需要有一定的时间保障。

2 实训组织和实施

由于学生一般都是刚刚接触网站及其相关概念，对网站的规划设计还缺乏较深切的感性认识，在短短的一周实训时间内，他们是很难完成设计与制作整个过程的，所以在以前带实训的基础上，笔者对实训的内容选取及过程的组织实施作了重新的思考和调整。主要以模仿为主，但也各有不同，重在培养和训练学生规划站点目录结构、栏目结构、网页制作、测试、域名和空间申请、文件上传等知识。内容安排如图1所示。

2.1 给定选题

在实训周之前，是教师进行为期约13-14周、每周约6课时的该门课程基础知识的教学。教师在教学过程中，首先需要注意两点，一是从一开始就定位于静态网站，而不是一个一个孤立的静态页面，这样可以让学生从始至终有一个整体的认识，更主要的是学生不会出现由于图片等文件没有存放到网站所对应的站点目录中而导致上传时内容不完整。二是采用案例教学法，即选取用于主要依据模仿制作的一个相对完整的静态网站，引导学生一点点制作，在一个网站中再融进新的知识点。

实训准备阶段，老师通常的做法是挑选一个样例网站，让所有学生模仿着去做。也可以由几个人分成一个小组，从素材收集、处理、网站规划等所有的环节分工合作逐一完成。前一个方法大家千篇一律，容易导致学生偷懒、相互间抄袭，且一个网站所涉及到的技术也是有限的，不利于拓宽学生的视野。后一种方法尽管看上去是按部就班地进行网站的规划、设计和制作，但是学生对网站还缺乏一个整体清晰的认识，加上实训时间通常不会过长，这样的实训很难达到预期的效果。针对这些现状，我们确定在短时间内需要达到的目标是让学生通过模仿样例制作网站，从而真正对网站有感性的认识。基于此，我们选择的做法是给每个学生分配一个静态网站样例，当然这就需要老师花费足够多的时间进行网站的挑选。由于静态网站很多，所以一是学生所做练习不会重复，且每个不同的网站所用到的技术亦不会完全相同；二是考虑到利用webdup这样的工具可以把它完全下载下来供离线浏览、学习和模仿制作，而且选择的是跟我们的日常生活、地方特色尽可能贴近的各类网站，如图2所示，从而使学生觉得它们就在自己身边。当然事先只给他们相应网站的域名，然后带领学生一步步来进行操作。

2.2 获取素材

网站的主题选定后，接下来是素材的搜集。这个工作也不是学生一时半会可以完成的，有的需要拍摄，有的需要扫描，有的需要制作，加上学生在初学阶段，还无法体会并实施网站规划的任务，所以需引导学生用webdup0.93beta将样例网站完全下载，这样无论是网站的目录结构还是素材就全都有了。这为后续的模仿制作提供了最直接有效的支撑。

2.3 体验网页新技术

在新建站点时，要求学生同时新建两个站点，一个映射到下载下来的样例网站目录，一个对应于自己将要开发的网站目录。不断地切换两个站点，通过在Dreamweaver中打开样例文件，结合平时所讲的方法，学生能较顺利地模仿样例中的布局进行新页面的设计。此外，由于网站中所包含的技术很多，我们很难通过一个例子的讲解来包含全部，但又希望让学生接触到尽可能多的新知识和技巧。所以通过学生一人一个样例的方法，学生相互间既无法抄袭、又互相讨论从而学到不少新知识，且都是实实在在的应用，这让学生又有较好的感性认识，容易接受。同时针对一些有特色的技巧性内容和普遍性问题，通过电子教室对全班同学作集体讲解。这样的方式使得学生一直都保持在较浓厚的兴趣和较高的求知欲状态，也更加加强了他们相互间的探讨和合作。如图1中所示，将学生在操作中所遇到的典型问题、网站的典型技巧特色等作了一个简单的记载，也为学生后续制作说明书的撰写作了铺垫。

2.4 确定说明书的内容

作为一个完整的实训项目，最后还包含一个网站制作说明书的撰写。由于学生较少有综合性的训练，他们不知道说明书中该写什么。同样为了尽快达到目标，我们给了一个样例文章，请他们根据网站开发的流程来组织文章的内容。并强调要实事求是，实训过程怎么做的、做了些什么就写什么。其中需要出现的截图可以用QQ截图、红蜻蜓抓图软件等工具来快速实现，功能框图、流程图等可以用visio 2003软件来制作。从而使学生知道，要完成一件事，通常是多个软件多个工具通力合作来实现的。并巩固、补充了他们以前薄弱的word处理功能：强制分页、分节符、页码的设置等。在word文档结束时，又教学生在word中新建目录样式（跟网页中的样式是同样的含义），然后通过“插入” “引用” “索引和目录…”来自动生成目录。学生每天都学到很多新知识。

2.5 上传免费主页的空间申请和站点文件

网络对学生来说总是充满神秘感，总想弄清上传到底是怎么回事。所以要想实训不留遗憾、画一个完整的句号的话，这一环节是必不可少的。我们机房开通了公网，然后引导学生各自申请到了自己的免费主页空间，同时让他们记下了域名。他们明白了域名的含义，并都成功上传了网站。学生通过域中访问到自己的网站后，非常有成就感。同时针对自己出现的问题（更多的是有的图片不能正确显示），他们会更主动地查找原因进行修改，然后再上传。

3 结语

学生在最后的实训小结中都反馈：希望这样的实训多一些。我们常说：“教学有法，教无定法，贵在得法。”良好的教学方法，可以发挥教学智慧，否则就达不到预期的教学效果。然而教学又无定法，我们必须根据学情来研究和确定教学方法，结合生活，不断尝试和探索，充分调动学生的学习积极性和求知欲，让学生快乐学习，并收获累累硕果。

［1］尤鸿霞.ASP.NET实训课程教学方法研究[J].遵义师范学院学报,2012,(2):93-94.

［2］马海峰，李军华.高职“ASP.NET程序设计实训”课程教学改革探索[J].江苏技术师范学院学报,2010,(4): 81-84.

［3］张娟,李博,杨征.谈高职院校实训周实训方案的制订[J].保定职业技术学院学报,2011,(2):35-37.