网页制作类课程教学中重点与难点的细节探讨

摘要：为提高“网页制作类”课程的教学质量，真正实现既定的教学目标，适应行业主流应用技术发展趋势。应在建立了一套较为完善的课程体系基础之上，把握教学中各类知识点的细节。更有助于学生健全知识体系，在提升理论知识水平的同时，明确了实践环节的具体要求。从几个学期以来的教学效果及学生反馈来看，教学中对这些细节的注重与把握是有必要的。对本类专业的实际教学有重要意义。

关键词: Web标准;规范;教学目标;理论;实践

中图分类号：TP311文献标识码：A文章编号：1009-3044(2012)08-1888-03

Research of Importance and Difficulties Details of Teaching of Web Design Curriculum

ZHENG Li-ming

（Panjin College of Vocational and Technology, Panjin 124010，China）

Abstract：To promote the teaching quality of web designing courses, realize the set teaching goal and adapt for the trend of popular applied technology in the computer field, we should grasp all kinds of knowledge details of teaching, help students build a full knowledge system, clear the specific requirements in the practice while promote theory knowledge level which is based on the building of perfect curriculum system. From the teaching effects and feedbacks of students in the last several semesters, it is necessary to pay attention to these details. It also has significance to actual teaching of the same major.

Key words：the web standard; standard; teaching goal; theory; practice

目前，在高职类院校，网页制作类课程可以认为是网站开发类课程的重要分支，而网站开发本身大体上可分为程序设计与界面设计两大过程。这两个过程可以认为是两种不同的分工，但在技术与相关的标准要求方面却体现着很大的统一性，甚至有很多网站在程序及功能不变的情况下也要进行界面及相关代码的重构，以保证其能够符合日趋完善的WEB标准。与此同时，伴随着互联网的迅速普及，我们能感受到的直观变化是网络的带宽越来越大，BS系统的应用由此也越来越广。对于BS系统，尤其是网站的开发较以往提出了许多新要求。比如备受关注的安全性问题、代码效率等。

然而，在实际教学中，部分院校所开设的网页制作或设计类课程只停留在FrontPage、Dreamweaver等软件的简单应用上，并没有对网站、网页等概念做出清晰的描述和讲解。学生的实践练习也大多限于插入图片、链接或视频动画等。而接触到BS系统开发类课程时又不得不复习站点、CSS等概念。这样做不但会使课堂效率低下，而且也会影响相关课程的授课质量。

针对这一现状，我院在实际教学过程中有意识的改变教学内容与教学方法。主要强调网页设计相对网站开发的关联性，同时也突出了网页制作技术本身的特点。概括而言：也即要求网页制作类课程的教学目标要着眼于Web标准，最终应使学生能够创作出符合Web标准的网页。并为将来学习网站（或BS系统）开发技术奠定良好的基础。

1加强理论教学，为实践教学提供保障

1.1让学生明确Web标准的相关技术及观点

要求学生创建符合标准的网页，首先必须让学生了解“何谓Web标准”以及其相关技术问题。在开课之初就应强调其重要性与特点。比如下述的几个问题：Web标准并不是单一的标准，而是一系列标准的集合；符合标准的网页应由三部分组成――结构、表现、和行为，对应的标准也分三方面等。

此后，适时地让学生明确HTML、XHTML、XML和CSS等概念，并把它们之间的联系、区别、特点和各自的作用进行简明而确切的讲解。突出强调XHTML和CSS两个概念，因为日后对这两者的熟练运用是创建“标准网页”的必备技能，也即实践教学中的重点核心内容。

1.省略使用CSS改版后，每天节约超过两兆字节的带宽；更容易被搜寻引擎搜索到；改版方便，不需要变动页面内容；提供打印版本而不需要复制内容；提高网站易用性。可举例：在美国，有严格的法律条款来约束政府网站必须达到一定的易用性，其他国家也有类似的要求。另一方面是对网站浏览者的好处：文件下载与页面显示速度更快；内容能被更多的用户所访问（包括失明、视弱、色盲等残障人士）；内容能被更广泛的设备所访问（包括屏幕阅读机、手持设备、搜索机器人、打印机、电冰箱等等）；用户能够通过样式选择定制自己的表现界面；所有页面都能提供适于打印的版本。

总而言之，Web标准与其它行业标准制定的目的是基本相同的，那就是要确保产品的兼容性和满足人性化设计要求。

1.3在教学中将问题引入XHTML代码规范

代码的规范实际上就是相应语法规则，是必须重点讲解的理论内容，因为它是指导实践的关键所在。教师应全面讲解，并在实践中反复强调。但限于课时及教学整体目标，可以将部分重要的规范做为本课程的主要教学内容，讲解顺序大体如下：

1.3.1所有的标记都必须要有一个相应的结束标记

这与以前在HTML不同，即便是单独不成对的标签，在标签也要最后加一个"/"来关闭它。例如：

1.3.2所有标签的元素和属性的名字都必须使用小写

XHTML对大小写是敏感的，例如：和是不同的标签。而且，格外需要注意的是：即使是由Dreamweaver自动提示生成的属性名称，如"onMouseOver"也必须修改成为全小写的"onmouseover"。

1.3.3所有的XHTML标记都必须合理嵌套

因为XHTML文档对严谨的代码结构有着相对苛刻的要求，所以一层一层的嵌套必须是严格对称的。

1.3.4所有的属性必须用引号""括起来

在HTML中，可以不需要给属性值加引号，但是在XHTML中，它们必须被加引号。例如:

必须修改为：

如有特殊情况，则需要在属性值里使用双引号，可以用"，单引号可以使用'，例如：

1.3.5把所有

任何小于号（

任何大于号（>），不是标签的一部分，都必须被编码为> ;

任何与号（&），不是实体的一部分的，都必须被编码为&

1.3.6给所有属性赋值

XHTML规定所有属性都必须有一个值，没有值的就重复属性本身。

1.3.7不要在注释内容中使“--”

“--”只能发生在XHTML注释的开头和结束，也就是说，在内容中它们不再有效。如有需要，可用等号或者空格替换注释中类似“-------”的符号串。

2实践教学中的重点内容

2.1使学生设计的网页能符合Web标准的基本要求

进行实践环节时，可对学生进行概括性的介绍，比如：要让网页符合Web标准，简单说就是不用HTML+Table来组织页面内容，改用XHTML+CSS来实现。传统的网页排版工具――表格，将仅仅用于展示数据。而不再用来实现排版和对象的定位。

所以，实践环节的最重要内容除了制作符合规范的XHTML文档外，就是CSS的学习与运用，同时也是学习的难点。

2.2让学生通过练习逐渐理解“结构与表现、行为分离”的含义

“结构与表现、行为分离”是Web标准的核心思想，单纯在理论是很难理解透彻的，必须在实践中不断体会才能准备把握其内涵。但在此之前，让学生了解如下几个概念是必要的：

内容――就是页面实际要传达的真正信息，包含数据、文档或者图片等。注意这里强调的“真正”，是指纯粹的数据信息本身。不包含任何辅助的内容。

结构――如果有一段文字，那么我们必须给这段文字进行格式化。比如把它分成标题、作者、章、节、段落和列表等。才能够让人很容易去阅读。否则就会很难准确的识别它所包含的信息。

表现――虽然定义了结构，但是内容还是原来的样式没有改变，例如标题字体没有变大，正文的颜色也没有变化，没有背景，没有修饰。所有这些用来改变内容外观的东西，称之为“表现”。好的“表现”会使内容看上去更舒适。

行为――体现网页与用户的交互能力。

这些概念转述给学生后，要恰当运用实例讲解，建议在授课前创建出能够充分体现概念特点的网页，包含完整的CSS及页面文件，但要清晰、简明。此时不必过分强调外观，能直接说明代码的功能作用最好。

2.3正确书写DOCTYPE的重要性

要对学生强调：DOCTYPE是Document Type的简写。主要用来说明XHTML或者HTML的版本。这对于XHTML文档而言是十分重要和必须的，因为浏览器根据DOCTYPE定义的DTD（文档类型定义）来解释页面代码。所以，如果设置了错误的DOCTYPE，页面在浏览器将不会按预想的方式显示。

XHTML1.0提供了三种DOCTYPE可选择，分别是：过渡型、严格型和框架型。

在教学中可使用“过渡型”DOCTYPE开展实践，因为它依然可以兼容表格布局、表现标识等，不至于让学生觉得其技术要点较以往变化太大，难以在初学时掌握。

2.4养成良好的命名习惯

不同于HTML语言，XHTML中可能会出现大量需要命名的元素，比如最常用的标签的ID，在授课时培养学生为这类元素命名时最好能做到“望名知义”，这一点实际上与程序设计中的要求是相辅相成的，良好的命名习惯不仅能够使代码的可读性大大增强，也将为日后的维护与修改工作提供极大的便利。

3理论与实践相结合，培养学生的设计能力

在教学中可以发现：此类课程的特点是“理论与实践并重”。因此，想到达较好的教学效果不能只偏重任何一方，必须做到两者兼顾。

此外，当学生的网页制作技术掌握到一定程度后，可对网页外观的设计加以要求，并对“颜色搭配”等相关知识进行介绍，争取最终收到“技术与艺术相结合”的效果，借以提高学生的审美能力与设计水平。再有就是教学内容上可以有一定的前瞻性，比如适当的介绍一些与HTML5相关的内容等。

参考文献:

[1]前沿科技,曾顺.精通CSS+DIV网页样式与布局[M].北京:人民邮电出版社,2011:29-32.

[2]曾顺.精通JavaScript + jQuery[M].北京:人民邮电出版社, 2011.12:7-9.

[3]旭日东升.网页设计与配色经典案例解析[M].北京:电子工业出版社，2011:68-69.

[4] Sanford J J. Web界面设计三剑客：CSS、Themes和Master Pages[M].张云,译.北京:清华大学出版社,2009:22-25.

[5]程琪,张白桦. 动态网站开发项目化教程[M].北京:清华大学出版社,2010:21-28.