移动互联网时代高职网页前端课程内容重构

柳珺

摘要：在互联网已经进入Web3.0时代的今天，HTML5和CSS3作为新一代的网页前端技术已走上前台，成为主流网页前端技术。HTML5和CSS3为网页带来了更加丰富的表现能力，更加赏心悦目的互动效果，并且简化了网页前端的设计过程，使网页结构更加清晰明确、简单易读，使搜索引擎更容易抓取网页中的有用信息。HTML5和CSS3已经成为高职网页前端课程的核心内容。

关键词：网页前端技术；HTML5；CSS3

中图分类号：TP393 文献标识码：A 文章编号：1009-3044（2016）36-0198-03

随着互联网技术的发展，尤其是进入了移动互联网时代，网页技术在变革，如今的互联网已经进入了web3.0的时代，网站的前端发生了翻天覆地的变化，网页不再只是承载单一的文字和图片，页面上内容生动的动画、声音、视频以及软件化的交互形式都是基于前端技术实现的。如今社会对网页人才的需求，已经从最初的制作网页，发展到面向网页的开发工作。[1]网页前端技术在变，社会对网页前端人才的需求在变，传授网页前端技术的网页前端课程的内容也必须随之变化、更新。

1 移动互联网时代网页的特点

随着移动互联网技术的不断发展和移动终端设备的智能化，移动终端设备（手机、平板电脑）上网的便捷性优势逐渐显现，越来越多的人更倾向于通过移动终端访问互联网，移动终端已经成为人们接触网络的重要渠道之一。据统计当前移动终端设备的用户数量已超越PC端，移动终端的网页浏览需求量上升，因此怎么让网页能够兼容更多类型的终端设备已经成为当前网页设计中的重要问题。为了解决这个问题，响应式网页应运而生。

所谓响应式网页就是根据浏览网页的设备不同，自动对网页进行响应和调整，包括分辨率、图片的尺寸、页面宽度、页面布局和相关脚本功能的调整。即响应式网页就是一个网站能够兼容多种终端，而不是为每种终端做一个特定的版本。

响应式网页的设计应该成为当前网页前端技术课程中不可缺少的内容。

2 网页前端技术的核心内容分析

目前，网站设计标准化的理念已经形成，基于Web标准的网页设计已经成为主流的网页前端设计技术。基于Web标准制作网页，便于程序设计者设计出具有规范的文件，便于浏览器厂家研发出适应Web标准的浏览器，进而使得网页文件可以在不同的浏览器或终端设备展示信息。

Web标准即网站标准，其用来创建、规范网页的基本内容，其是一系列标准的集合。通常网页由内容结构、表现和行为三方面构成，那么Web标准主要由结构化标准语言、表现标准语言和行为标准三方面的标准构成。

结构化标准语言包括：超文本标记语言（HTML）、可扩展的超文本标记语言（XHTML）和可扩展的标记语言（XML）；表现标准语言包括：层叠样式表（CSS）；行为标准包括：DOM（文檔对象模型）和JavaScript。网页前端开发中，HTML、CSS和JavaScript是三种支柱型的语言，即在整个开发过程中扮演着十分重要的角色。[2]因此HTML、CSS和JavaScript三种语言是网页前端课程的主要内容。

从前端开发技术角度来看，互联网的发展经历了以HTML和CSS为主的Web1.0时代，以Ajax应用为主的Web2.0时代，正在迈进以HTML5为主的崭新时代。[3]

HTML5是HTML（超文本标记语言）的第五个版本，其作为新时代的web设计技术，为网页带来了更加丰富的表现能力，更加赏心悦目的互动效果。目前的网页前端设计中，HTML5已经逐渐的取代了HTML4.01和XHTML1.0成为主流的结构化标准语言。CSS3也逐渐走到了前台，成为主流的表现标准语言。在此发展趋势下，HTML5和CSS3技术已经成为Web前端技术的重要组成部分。

3 网页前端设计相关的HTML5和CSS3的新特性

HTML是目前在网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML5以HTML为基础，对HTML进行了大量的修改，增加了许多新元素，扩展了许多新功能，使网页结构更加清晰明确、更加简单易读。HTML5的应用给网页的前端设计理念和技术带来了冲击。

3.1 HTML5增加了结构类元素

在HTML5中，为了使文档的结构更加清晰明确，定义了一组新的语义化结构元素：header元素、nav元素、section元素、article元素、footer元素和aside元素等。这些新的结构类元素可以简化页面的设计，使HTML文档更容易加载，使搜索引擎更容易抓取网页中的有用信息。

3.2 HTML5扩展了表单元素的功能

表单的功能是进行数据采集实现人机交互，其是网页不可缺少的组成部分。

HTML5中增加了表单方面的许多功能，包括增加了input元素的输入类型以及input元素的属性。使用这些新的表单特性，前端设计人员可以更加省力和高效地制作出标准的Web表单。另外HTML5的表单带有验证功能，这样能够减少表单验证功能的代码编写。

3.3 HTML5新增了canvas技术

canvas是HTML5新增的专门用于绘制图形的元素，在页面上放置一个canvas元素，就相当于在页面上放置了一块画布，可以在其中进行图形的描绘。既可以实现最简单直接的绘图，也可以通过编写脚本实现极为复杂的应用，绘制出各种美妙绝伦的图形、精彩纷呈的游戏等。

3.4 HTML5改变了多媒体的应用方式

HTML5之前，在网页中展示的视频和音频等多媒体素材，一般使用第三方开发的播放器进行，但这种方法需要在浏览器中安装各种插件才能完成。HTML5中实现了音频和视频播放和控制的革新，其新增加的audio和video两个元素，可以不需要安装任何插件或工具即能在网页中直接播放音频和视频。

CSS层叠样式表用于控制网页页面的外观，通过使用CSS样式控制页面各元素的外观显示，可实现页面的内容结构与表现分离。CSS3是CSS技术的最新升级版本，CSS3增加了许多新的功能，使得不仅能简化网页前端的设计过程，还能加快页面的载入速度。

1）CSS3增加并完善了选择器的功能

在CSS3中，提倡使用选择器将样式与元素直接绑定起来，这样在样式表中什么样式与什么元素相匹配变得一目了然，修改起来很方便。通过选择器还可以实现各种复杂的指定，同时能大量减少样式表代码书写量，最终书写出来的样式表变得简洁明了。

2）CSS3增加了文本属性

在文本样式控制方面，CSS3新增了几个文本属性：text-shadow属性用于为文字添加阴影或模糊效果；text-overflow属性用于设置超长文本省略显示；word-wrap属性用于设置文本超過指定容器的边界时是否断开转行。

3）完善了颜色控制

在CSS3之前，只能使用RGB模式定义颜色值，只能通过opacity属性设置元素的不透明度。而CSS3增加了3种颜色定义模式：RGBA颜色值、HSL颜色值和HSLA颜色值，并且可以通过对RGBA颜色值和HSLA颜色值设定Alpha通道的方法更容易地实现将半透明文字与图像互相重叠的效果。

4）CSS3完善了盒模型功能

CSS3增强了元素边框的控制能力，主要包括其支持圆角边框、图片边框和多层边框等。圆角边框的绘制是美化页面效果的常用手法之一，在CSS3之前，需要使用图像文件才能达到圆角的效果，而CSS3则可以直接使用border-radius属性创建圆角边框。

为了方便灵活地设计网页效果，CSS3增强了background属性的功能，允许在同一个元素内叠加多个背景图像，还可以通过控制背景图片的尺寸来实现完美的视觉效果。

5）CSS3增加了新的布局方式

CSS3增加了多列自动布局属性column，利用该属性可以自动将内容按指定的列数进行排列。CSS3还增加了box属性，通过该属性可以实现弹性盒布局，利用该功能可以轻松地创建自适应浏览器容器的流动布局或自适应字体大小的弹性布局。CSS3还新增了Media Queries模块，利用该功能可以根据不同的媒体类型选择相应的样式，从而实现响应式布局。

6）CSS3提供了动画功能

CSS3所提供的动画功能，主要包括变形、转换和动画技术。使用动画功能，可以实现在属性值的开始值与结束值之间进行平滑过渡，从而使页面上的文字、图像或背景具有动画效果。

从可用性的角度方面考虑，HTML5和CSS3可以更好地促进用户与网站间的互动，特别是能够提供更多、更加优秀的交互性用户体验。HTML5和CSS3已经成为移动互联网时代网页前端的核心技术，因此也必将成为网页前端技术课程的主要内容。

4 移动互联网时代网页前端课程教学内容设计

由以上分析可知，HTML、CSS和JavaScript三种语言在网页前端技术中起着支撑作用，是网页前端课程的主要内容。随着HTML5和CSS3的日趋成熟，HTML5+CSS3+JavaScript已经成为移动互联网时代网页前端开发的主流技术。

为了跟随网页前端技术的发展，让学生学到实用的网页前端技术，我们对我院高职软件专业的网页前端课程进行的整合和教学内容重构，将该专业网页前端相关课程《网页设计与制作》和《JavaScript》整合为《网页前端技术》，有效地将HTML、CSS和JavaScript三种语言融合在一起，达到三种语言的无缝衔接。在新的课程体系中，继续将已经成熟并普遍使用的DIV+CSS网页制作模式贯穿课程始终，并将HTML、CSS的基础知识和HTML5、CSS3的新特性融入Dreamweaver CS6网页编辑软件的讲解中，注重HTML5、CSS3新特性的引用与思维模式的迁移。

《网页前端技术》的教学内容分为四个模块：网页前端基础、网页前端基本操作、网页前端高级操作和JavaScript语言与jQuery。

1）网页前端基础模块包括网页入门知识、HTML基础和CSS基础三部分。

（1）网页入门知识部分：主要学习网站网页相关的概念、Web标准、内容结构与表现相分离的理念等。（2）HTML基础部分：主要学习HTML概念、HTML5文档结构、HTML常见元素（包括HTML5新增加的多媒体类元素和结构类元素）。（3）CSS基础部分：主要学习CSS概念、CSS语法、盒模型（包括CSS3新增的控制盒模型外观的属性）、CSS选择器（包括CSS3新增加的属性选择器）。

2）网页前端基本操作模块包括文本操作、图像操作和网页布局与定位三部分。

（1）文本操作部分：主要学习网页中文字的插入、各类超链接的创建、控制文本外观的CSS基本属性、CSS3新增的文本控制特性（文本阴影设置，溢出文本的截断，文本的换行）、列表的插入及列表的应用。（2）图像操作部分：主要学习网页中图像及图像效果的插入、与图像相关的CSS基础属性、CSS3新增的图像控制特性（重新设定背景图像的大小，多背景图像设置）、图文混排及图文信息列表。（3）网页的布局与定位部分：主要学习网页元素浮动的实现、网页元素各种定位的概念及实现、网页CSS+DIV排版基础、不同版式网页的布局操作。

3）网页的前端高级操作模块包括表格与表单、模板与CSS3新增布局、HTML5与CSS3进阶三部分。

（1）表格与表单部分：主要学习网页中表格的创建与编辑方法、CSS在表格中的应用、网页中表单的概念、常见的表单对象、HTML5新增的表单自动验证功能、使用CSS样式美化表单元素。（2）模板与CSS3新增布局部分：主要学习模板的概念、使用模板创建网页、CSS3新增布局方法。（3）HTML5与CSS3进阶部分：主要学习实战HTML5画布、CSS3渐变的实现、CSS3的2D变形、CSS3过渡动画制作。

4）JavaScript语言与jQuery模块包括JavaScript语言、jQuery两部分。

（1）JavaScript语言部分：主要学习JS基础、事件处理、JS动画。（2）jQuery部分：主要学习jQuery基础、jQuery插件、Ajax基础。

基于HTML5的《网页前端技术》课程内容体系，使学生能够学到网页前端的最新技术，掌握网页前端的最实用的技能。为了切实让学生学到实用的网页前端技术，强化学生的动手能力，在《网页前端技术》的教学过程中，我们采用的是“任务引领、教学做一体”教学模式，用任务作为载体，让学生在学中做、做中学，逐步掌握所学知识，提高操作技能，取得了较好的教学效果。

参考文献：

[1] 聂宇.从Web发展探索高职软件专业的网页课教改之路[J].福建电脑，2011（8）.

[2] 陈月 秦福建.Web前端开发技术以及优化方向探究[J].信息与电脑，2016（4）.

[3] 网页设计与制作（Dreamweaver CS6+HTML5+CSS3版）[M].北京：清华大学出版社，2015.