移动互联网时代网页设计与制作课程改革研究

王兆华　王海波

摘要：分析传统互联网与移动互联网环境下对网页设计与制作技术需求的不同，介绍传统网页设计与制作课程的具体内容，说明在移动互联网时代课程内容改革方案和Web新技术引入的注意事项，以及充分利用移动互联网的特点开展课程改革的设想，指出伴随着移动互联网时代的到来，网页设计与制作课程新的改革势在必行。

关键词：移动互联网；网页设计与制作；Web新技术

0.引言

互联网的飞速发展，使得网络无处不在。如何设计出更优秀的网页来提高网站的知名度和点击率是拥有网站的企业、事业单位和个人共同追求的目标。优秀网页的实现需要先进的网页设计与制作技术，而网页设计与制作课程的建设为网页设计与制作技术的推广提供了非常好的平台。目前，网页设计与制作课程是很多高等院校计算机专业的专业基础课、非计算机专业的公共必修课和一些软件培训机构和高职院校的主干课程之一。这一切都表明网页设计与制作课程的重要性。因此，提高该课程的课堂教学效果也显得尤为重要。

随着2009年1月7日3G牌照的发放，中国移动互联网由概念走向应用阶段。2012年5月10日，由长城会及全球移动互联网大会组委会联合主办的“第四届2012全球移动互联网大会（GMIC）”在北京国家会议中心正式召开。大会汇集全球新兴行业精英，探讨行业热点并彼此分享观点，共同推动移动产业向前发展。相比于传统互联网，移动互联网具有更大发展潜力。如何在移动互联网时代对网页设计与制作课程的教学进行改革，使其能够跟上新技术的发展，满足市场的需求是值得从事该课程教学的教师进行研究的一个课题。笔者围绕在移动互联网时代高校非计算机专业公共必修网页设计与制作课程的改革设想展开论述。

1.传统互联网与移动互联网对网页设计与制作技术的需求

1.1传统互联网的网页设计与制作技术

互联网的发展经历了从Web 1.0到Web 2.0的飞速发展，直到目前的Web 3.0。而网页设计技术也在不断地提高。

Web 1.0是互联网的初期，主要采用HTML做的静态网页，功能主要用于宣传。使用的主要技术是静态网页开发技术，比如HTML、DHTML、XML、JavaScript等。静态网页的优点是访问速度快，安全性高，漏洞少；缺点是交互性比较差。当然在Web 1.0时代也陆续引入了动态网页技术。

Web 2.0是在Web 1.0的基础上发展起来的。在这个阶段，各种动态网页技术相继出现，比如ASP、ASENET、JSP、PHP等，这些技术与数据库结合可以开发出各种动态网站，提高了网站与用户的交互性。常见的新闻网站、博客、社区网站、电子商务、网上银行等都是动态网站。动态网站为人们工作和生活所带来的便利在很多方面都有体现。但是在提供便利的同时也带来了安全问题，高访问量也需要网站具有高的负载能力，因此带动了各种Web架构技术的出现。在Web 2.0时代，Mashup、AjaX、RSS、WiKi、Tag是几个被提及最多的名词。

Web 3.0是在Web 1.0、Web 2.0基础上发展起来的，特别是在SOA、云计算等技术的基础上发展起来的。Web 3.0虽然还没有一个特别明确的定义，但是Web 3.0的网站已经相继出现，比如腾讯Webqq 3.0的推出使得Webqq越来越像一款桌面操作系统。还有很多SNS网站，也逐渐凸现出Web 3.0的特点。

在传统互联网时期，网页浏览终端以PC机的浏览器为主，Web标准也是遵循各种PC机浏览器的显示标准。只是在新技术不断出现的情况下，网页设计技术在不断地提高和改进，网页布局技术和网页视听效果在迅速地发展和提高。

1.2移动互联网的网页设计与制作技术

移动互联网就是移动Internet，能让用户在移动中通过移动设备随时、随地访问Internet，获取信息，进行商务、娱乐等各种网络服务。为了提供移动服务，移动互联网和传统网络在终端设备上有很大的改变。移动互联网因其高便携性、应用方便和隐私性等特点，越来越受网民的欢迎。2012年中国移动互联网网民数量预计将达4.51亿。现在移动互联网的流量发展趋势跟10年前的互联网基本上如出一辙。“百度移动互联网发展趋势报告2012 Q1”预言在未来很长时间内，移动互联网还将继续保持强势的追赶态势。

移动互联网时代的技术热点除了Web 2.0和Web 3.0技术之外，还出现了一些有关网页设计技术的新的名词术语，比如HrrML 5、响应式网页设计、基于用户体验的移动互联网网页、4大移动平台（iOS、Android、Windows Phone、Symbian）、混合型应用HybridApp（如掌上百度和淘宝客户端Android版，走的是Hybrid App的路线）等。有关HTML 5的新观点也相继出现，比如HTML 5将改变移动互联网、HTML 5将成为今后社交游戏开发应用的重要技术平台以及新的设计技术HTML5与CSS 3结合制作网页播放器等。所有这些新术语、新观念、新技术的出现，反映出移动互联网时代，网页设计技术在不断地改变和提高。

2.传统的网页设计与制作课程内容

多年以前，随着计算机网络技术的发展，互联网技术对人们的生活和工作的影响日益提高。同时为了更好地学习和推广互联网技术，各大高校逐步开展网页设计与制作课程的建设。纵观目前高校开设的网页设计与制作公共必修课程内容基本相同，主要分为以下几大模块：

（1）网页设计与制作基本知识：介绍有关网站、超文本传输协议、网页浏览原理、网页的基本元素等相关基本知识。

（2）网页制作工具：介绍一种网页制作工具，大多数会讲授Dreamweaver的某个版本。

（3）网页制作基本技术：主要是HTML语言、网页布局技术，比如表格、图层、框架、模板和库等，网页表单和JavaScript，以及简单的CSS技术的介绍。

（4）动态网页开发技术简单介绍：介绍一种动态网页制作技术，比如ASP、PHP或者JSP等，鉴于ASP容易掌握，大多数院校会选择讲解ASP技术，但所讲内容都比较基础。

随着多年的课程建设和改革，各种教学方法不断引入到网页设计与制作课程教学中，比如案例驱动教学、项目教学法、任务驱动等，提高了课程的授课效率，并且取得了一定的效果。很多院校也建立了网页设计与制作课程的优质示范课，不少精品课程也在网络上公开。所有这些改革提高了该课程的系统性、规范性和实用性。

随着互联网技术提高和移动互联网技术的逐渐普及，仅限于以上内容已显陈旧，已经不能满足计算机互联网与时俱进的特点。在互联网时代，学生获取知识的途径是多样的，在授课过程中学生会提出更新的问题，比如手机上的网页如何开发？一些新的网页特效如何实现？甚至学生会打开一个网站直接请教老师某个页面怎么设计实现。这一个个新问题的出现，使得我们的教学内容已不能满足目前学生追求新知识的需求。因此，网页设计与制作课程的新的改革势在必行。

3.移动互联网时代课程教学内容的改革

3.1教学内容模块方案设计

内容改革是课程改革的首要环节，首先要确定讲什么？什么是必讲重点内容，什么是简单讲解内容？什么是选讲内容？结合之前改革的成果和目前新的需求，对教学内容模块可以做必要的调整。如图l所示是网页设计与制作课程内容模块组成图，显示了课程内容被划分为几大模块，下面详细介绍各模块。

（1）课程主要分为6大模块：网页制作基础知识、网页制作新技术、网页开发工具、网页美化工具、静态网页技术、动态网页技术。其中网页制作基础知识是必讲内容；网页制作新技术为学生介绍新技术的发展方向，并且是使学生能与现行市场技术接轨的必备知识；网页开发工具是设计网页的必备利器，是必讲内容，并且学习过程贯穿课程始终；网页美化的方法以及美化工具的使用需要简单介绍，在之前传统的课程教学中往往忽略了这部分的教学，笔者建议可以增加这部分的内容讲解，比如用2个学时介绍一下网页艺术设计相关的内容，可以考虑视觉设计、色彩设计、文字设计和版面设计等方面，然后介绍美化工具，比如Photoshop或者Firework，使用这些工具可以设计网页效果图和切片导出，同时设计一些网页上的元素（比如按钮、图像等），通过这些内容的讲解就可以在如何把网页做得更美观，更专业方面给学生一个引导；静态网页是常见的网页类型之一，静态网页技术是学习动态网页技术的基础，也是学生通过学习本课程主要应该掌握的网页设计技术。

（2）网页制作技术分为：移动互联网相关和传统互联网相关。分类介绍关键的、核心的相关技术，比如HTML 5、响应式网页设计、基于用户体验的移动互联网网页等，这部分内容需要结合课程学时安排，如果时间充分则可以详细展开一些，开阔学生的视野；如果时间紧张则可以简单提出典型，然后精选一些课下学习资料共享给学生，包括电子文档，视频资料和相关学习网站等，引导学生自主学习。

（3）网页开发工具分为：手机网页开发工具和PC机网页开发工具，在介绍专业网页制作工具Dreamweaver的基础上，介绍一些和手机网页开发相关的技术，可以不必详细介绍。

（4）静态网页技术分为：传统技术和新技术。传统的静态网页设计技术中重点介绍了HTML 4语言、表格布局技术、AP DIV技术、框架、模板和库等。目前教学把这部分作为重点内容，花费很多学时，讲解的非常详细。但是在目前网页设计领域，CSS+DIV作为替代表格布局的方法，已经得到了广泛的应用，很多网页已经不再使用纯表格布局，所以表格布局这部分可以简单的讲解，比如原来要用3个学时，现在可以减到1个学时，其余学时可以展开介绍CSS+DIV技术。HTML 5目前已经成熟，可以在简单介绍HTML4的基础之上，详细介绍HTML 5的特点及应用，这样与移动互联网相结合，更有新意。

该课程模块与以往课程模块的区别体现在：增加了网页制作新技术的介绍，增加了手机网页开发工具，增加了静态网页制作新技术。笔者建议新内容增加的方式在初始阶段可以采用对传统内容的补充，首先择优选择最典型内容，先简单引入，之后再详细展开，逐步过渡到成为课程主体内容的一部分。对动态网页部分不再追加新技术，根据需要可以自行添加，或者直接选择学生比较容易接受的新技术来开展动态网页的教学。

3.2Web新技术的引入

Web新技术的引入是为了适应互联网时代发展，响应市场需求，满足学生追求新知识的欲望，提高学生学习的兴奋点和主动性，同时能够在不增加课时的前提下增加新知识，这就需要合理的设计新技术的引入方式。笔者认为，课程改革是一个循序渐进的过程，应坚持以下几个原则：

（1）保证不影响课程的教学目标，不影响课程的核心教学内容。

（2）适量去掉一些比较陈旧的、目前使用较少的技术的讲解，比如表格布局。

（3）新技术的切入点应该选好，最好在课程中能以计算思维的理念来展开课堂教学，这样才能使学生的思维融入到课程知识的学习中，与实际应用准确相结合。

（4）新技术讲解的篇幅要适度，不能因为新技术的篇幅过大，而影响了课程核心内容的讲解。可以有选择的介绍比较重要的新技术，而把学生有能力理解的内容以电子文档的形式提供，如相关技术网站的网址、相关的文献，引导学生自学，这样学生既扩大了视野，也满足了求知欲。

（5）在需要体现移动互联网新技术的章节，抓住某一个重点技术合理展开，不要面面俱到。

（6）如果想全面展开，可以把网页设计课程分成3个阶段：网页设计基础知识（前期课程）、静态网页设计技术、动态网页设计技术（后续课程）。

（7）鉴于目前响应式网页技术和HTML 5、CSS 3等新技术的引入，可以在网页艺术设计上花费一些心思。

（8）最后要和课程的考核内容结合起来，哪些新内容可以作为考核内容，哪些旧知识可以不再考核，这个需要认真地研究。

4.移动互联网时代教学方法的改革

随着移动互联网逐步走进人们的生活，仔细观察，大部分学生都有一部可以上网的手机。2010年3月，某报记者通过对武汉6所高校进行调查，发现受访的1000余名大学生中，超过70%学生曾经在上课时间使用手机上网，超过35%学生通过手机网络聊天。这充分说明了移动互联网在极大地影响着学生的学习生活。在移动互联网之前，很多课程都有E learning系统或者数字化学习中心为学生提供便利的学习平台，但是这些平台的终端多数使用PC机，并且互动性不是很好，基本上采用教师传资料和发作业，学生下载资料和提交作业的模式，使用方式比较单一，慢慢地学生仅仅把平台当作一个教师和学生信息传递的小工具，并且局限于使用PC机。

既然移动互联网已经深入学生生活，教师可以适应移动互联网的互动教学理念，把移动互联网平台融入到课堂内外，体现出“以学生为中心”的教学原则。比如湖南大学的新闻类课程已经尝试使用移动互联网在教学中的互动。

网页设计与制作课程本身就是和互联网技术相关的课程，可以发挥课程自身的特点，设计适应移动平台的教学服务系统，使学生通过手机终端就可以访问教学服务系统资源，同时也能在服务系统上共享新技术，分享学习收获和技巧，充分发挥学生的创造性，教学相长，共同提高课程的实用性。

5.结语

针对移动互联网时代对网页设计技术的需求不断发生的变化，传统的网页设计与制作课程必须响应时代特点，在原有课程改革的基础上进行新的改革。近几年笔者已经在该课程的教学中有意识地进行了一些内容的改革和新教学方法的使用，但是一直没有形成非常规范的课程模块。在探索的过程中从教学内容方面逐渐形成了新的课程模块划分，从教学方法方面提出了一些小建议，供从事该课程教学的教师参考。移动互联网时代的网页设计与制作课程的内容设计是核心，讲授方法是内容展开的手段。为了更好地开展该课程的课堂教学，笔者希望能够在该课程中引入计算思维的理念，使学生从该课程的学习中真正获取实惠，真正与新时代的技术接轨。

参考文献：

[1]神飞，响应式网页设计[EB/OL].（2011-11-02）[2012-11-16].http：//www.qianduan.net/responsive-web-design，html.

[2]CCTIME飞象网，后乔布斯时代，HTML5将改变移动互联网[EB/OL].（2011-09-05）[2012-11-16].http：//www.cctime.com/html/2011-9-5/2011951541185164.htm.

[3]陈小燕，谢强，丁秋林，浅谈项目式教学在网页设计与制作中的应用[J]，电脑学习，2010（1）：77-79.

[4]莫梅锋，刘潆檑，论移动互联网时代新闻类课程的教学互动[J]，现代远距离教育，2010（4）：38-40.

（见习编辑：刘丽丽）