张涟漪(武汉工程职业技术学院 湖北 武汉：430080)

基于网站前端设计的《网页设计》课程教学改革初探

张涟漪
(武汉工程职业技术学院 湖北 武汉：430080)

网站前端设计在现今的网站开发市场中占据重要地位，对能自适应移动浏览终端的网页需求程度越来越高。高职高专课程以就业为导向，顺应时代发展和市场需求需要设置《网站前端设计》课程，继承任务驱动教学模式，在教授学生掌握网页代码和层叠样式表基础的前提下，熟悉新的网络标准，提升开发技能，精益求精，以达到学以致用、入职即可上手的目的。

前端设计；Html5； CSS3； Bootstrap； 网页设计

0 引言

《网页设计》课程在计算机应用相关专业已教授多年。随着互联网和浏览终端的飞速发展，网页历经了从简化单调、色彩丰富，到各类媒体并茂的阶段，而后转入以简洁明快为主流，并最终依据各行业不同需求，多种设计百花齐放的局面。时至今日，常用浏览工具从台式电脑到智能手机、小型平板设备的跃迁，对网页设计提出了更新的要求，即在不同大小的显示分辨率内都能看到外形美观、功能齐全的页面。原课程设置中以台式终端为主体显示的Dreamweaver软件和旧有的HTML和CSS标准不再能完美适应这种变化。

笔者走访了一些公司的网站开发团队，市场需求催生了网站建设体系有了更明确的分工，主要由三个部分组成：UI设计、前端设计、后台开发。

过去笼统的“网页设计”现在细化为两个部分：UI和前端。前者以美工设计为主，后者以页面实现为主。顺应这种改变，《网站前端设计》课程或可代替《网页设计》课程走上前台，该课程实践性极强，在网站开发中占有一个独立的席位，是计算机应用行业很常见的就业方向。它上承负责用户界面样式布局和美观程度的UI设计，下接网站后台数据处理的显示支撑，实际就是一个把设计图具象化成真实网页并提供给后台数据接口的过程。

1 提升培养目标

高职高专的课程教学顺应瞬息万变的互联网发展和行业应用需求，理应与时俱进，及时推陈出新，占据前沿方为上。

《网站前端设计》是计算机应用专业课程体系的组成部分，先导课程有《Internet应用》、《图形图像设计》等，同期课程有《数据库应用》。其教学目的在于让学生具备相应的平面构成、色彩构成、版式设计、字体选择，以及数据库开发的基础知识[1]，具备良好的沟通能力的前提下，熟练掌握从设计图生成网页的技术。

网站建设是一个比较大的工程，网站前端开发技术提供了一个不错的就业前景。网站平台显示终端的改变使得毕业生仅仅只会Dreamweaver是不够的，应该掌握新一代的网站代码编写标准和面向移动设备的设计软件。

2 更新课程内容

课程教学上依然采用一贯的任务驱动方式、实战案例。内容则在原有《网页设计》课程内容上做了升级：从所见即所得软件Dreamweaver CS6上手，在掌握基础代码HTML的结构和CSS的编写的同时抛弃不用的标签和属性规则，结合W3C最新的标准向HTML5和CSS3进阶；学会现在主流的自适应终端网页制作软件Bootstrap 3。

2.1 网站结构概况

不论什么类型的网站，大体上都具备相似的结构：首页、分级导航、数个子页。在规划站点前应该对其整体有明晰的认识，必须会画网站树形/网状结构图；养成将网站素材分类、页面分层级存放，以及命名准确的良好习惯。

2.2 网页布局和Html代码结构

依靠Dreamweaver软件的可视化布局固然简单易上手，但整体缺乏细致度。于页面代码编排上精益求精，可以让生成的页面有更好的适应性和兼容性。

网站代码基本型[2]：

//网页属性区域。

//页面元信息，例如针对搜索引擎和更新频度的描述和关键词。

//网页主体区域

主流的网页布局方式采用Div。示例中显示的