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

期刊: 环球科学 DOI: PDF下载

翟志慧

南京市玄武中等专业学校 210042

摘要

近年来,随着国家经济的快速发展,社会水平不断提升,科学技术水平也显著提高,进一步促使网站前端设计在当前网站市场中占据着非常关键的地位,从而使的人们对移动浏览终端的网页需求在逐渐提高。在当前高职院校网页设计教学过程中,教师应该以学生就业方向作为目标,按照时代发展和市场发展过程中对学生提出的各项要求作为核心,对当前网站前端设计课程进行改革与再设计,改变当前传统的教学模式,能够积极激发起学生的学习兴趣,在教授学生网页代码和层叠样式表基础的过程中,进一步融入新的网络标准内容,进一步促使学生能够了解前端设计的相关内容,提升学生自身的开发能力和水平。因此在本文中分析了当前网站前端设计的网页设计课程教学中常见的一些问题,以及在教学改革中的相关措施,从而改进当前网页设计课程的内容,重视学生的全面发展并逐步提升学生的各项能力。


关键词

网站前端设计,《网页设计》,教学改革

正文

1. 当前网页前端设计课程内容的简要概述

《网页设计》是一门在电脑应用方面的专业。在因特网和网络浏览终端的迅速发展下,网站从简单单调、色彩丰富到各种类型的多元化,再到以简约、活泼为主,最后形成根据各行业不同需求,各种设计百花齐放的局面。今天,普通的浏览设备已经由台式计算机转变为智能手机和小型平板设备,这就需要在各种尺寸的屏幕上呈现美观、功能齐全的网页。因此在当前社会的快速发展过程中,如果仍然选用传统的教学模式和方法进行教学,是无法提升学生自身的核心能力和水平,无法满足社会发展对学生提出的各项要求。其中,在原有的教学环境下, Dreamweaver的主要功能是台式的终端,而传统的 HTML和 CSS已经无法很好地满足这些改变。在对当前一些公司网站开发团队的调查分析中可以看出,随着市场的发展,进一步对当前网站建设体系进行了细致的分工,其中当前网站建设体系主要包括了三大组成部分。分别是前端设计,后台开发以及UI设计。
    在以往网页设计过程中主要是划分为两大部分。UI和前端,而在UI课程中,主要是以美工设计作为主要任务,而前端则是以网页页面的实施作为核心。而随着时代的发展,在当前高职院校网页设计课程的日常教学过程中,应该进行教学改革,将课程改变为《网站前端设计》,这种课程的实践性相对较高。在当前网站开发中发挥着至关重要的作用,是当前互联网应用行业中就业范围最广的方向之一。更关键的是,在该种课程中,主要是上部分对用户界面样式布局和美观典雅程度的UI设计,我正在下部分之中,主要是网站后台一些相关的数据信息处理的显示支撑。简而言之就是将整个网页设计具体划分为真实网页和后台数据接口的一个完整过程。

2. 当前网页设计前端《网页设计》课程教学中存在的问题

2.1《网页设计》课程知识结构不科学,教学内容过时

网站设计与发展课程主要包括两大部分:以 Dreamweaver、 FrontPage等可视化的开发手段,以接口的形式进行,以编程辅助,强调 HTML、CSS等方面的知识,对 JavaScript技术的忽视;②以 EditPlus等整合式编辑器作为主要的课程内容,以编写程序的形式和版面的编排相结合。但是 HTML、CSS、JavaScript等版块的内容相对单一、组织不够严密,缺少 DIV、 DOM、BOM等模块。教学课程中的内容已经过时,无法与现代社会中的实际案例进行结合,如果仍然使用原始课本进行教学,导致学生无法将学到的理论知识与现实生活中的网页设计内容进行融合,造成学生学习上的困惑,最终影响了学生的学习兴趣。

2.2《网页设计》课程实践教材案例较少

在当前《网页设计》课程中,实践教材案例较少。在日常教学过程中,通常是将教材章节后面的练习与实验来作为课堂教学的案例进行讲解与分析,从而来帮助学生准确掌握前端设计中的每个步骤和具体方法。但是在该课程中,实践类教材案例在前端设计中缺乏完整性、系统性、真实性以及层次性,案例数量相对较少,从而是的学生可以练习编写的代码案例较少,无法达到网页前端开发设计练习中的相关要求。

2.3课程考核评价对考试结果过于重视,忽略实践结果

通常考试评价机制中,往往是70%的卷面考试,30%的平时表现。然而,该教学模式的特色在于忽视了实际操作的重视,忽视了过程的结果,无法从客观角度来全面评价学生的实际编程能力和学习能力。其中学生个人的表现,小组合作水平,对问题的思考和创新性思维是无法在课堂教学中所体现的,因而仅仅通过卷面成绩分数的高低来评价学生是错误的,进一步降低了学生的积极性和兴趣,不能主动参与课堂活动。

3. 《网页设计》课程改革的重要性

网络时代的到来,让很多传统的公司都认识到了网络的重要意义,公司不仅在网上登记了自己的成员,还在网上开设了相应的网站,每年都有大量的网络设计师加入进来。作为高等院校,一贯注重培养实用技术的专业技术人员,应该更加注重对大学生的网络技术教育。《网页设计》是一门既有理论又有实践价值的专业,现在主要是师在教室里上课,学生们在教室里进行模拟训练,这样做是没有任何问题的但现实中,经过多年的教学,很多毕业的学生都说在学校学到了很多知识并掌握了很多网页的设计技巧,但所学到的东西太过分散,就算是一个完整的模型,也很难完成。由于各学科的学生对于网站的要求水平不尽相同,所以针对不同的教学目标,选用相应的教学材料,探索《网页设计》的教学方式和方式就变得尤为关键。

4.针对当前网页设计前端《网页设计》课程教学提出的改革重点

4.1提升《网页设计》课程的培养目标

在当前高职院校网页设计课程的教学过程中,如果不进行课程改革,而仍然选用传统的教学内容,是无法适应快速变化的互联网时代和满足行业中的各项需求。因此在当前网页设计课程的教学过程中,应该顺应时代的发展,及时更换一些课程中的实践案例和教学内容、目标,从而能够及时满足社会发展的需求。简单来说,《网站前端设计》是当前计算机应用专业体系中最关键的一部分,其中包括了Internet应用》、《图形图像设计》等,同时还有《数据库应用》。而在网站前端设计课程中,主要的教学目标是能够促使学生掌握相对应的平面构图色彩构成页面版式设计字体选择以及数据库开发的一些知识和内容并通过教师讲解专业知识和实践操作来促使学生能够熟练掌握生成网页的相关技术内容。网站建设是一个庞大的设计工作,而网站的前端设计是就业前景良好的工作岗位。目前的站点平台展示系统已经发生了变化,让学生们单单会 Dreamweaver还远远不够,还需要学习新一代的网页编码和手机应用程序。

4.2及时更新《网站前端设计》课程的教学内容

在当前网站前端设计课程的教学过程中,教师可以采用任务驱动式实战演练方式来进行教学。但是教学内容是在原有网页设计课程内容的基础上进行了适当改进与升级。从“眼见为实”的 DreamweaverCS6开始,摒弃无用的标记和特性,在熟悉 HTML基本结构和CSS编程的前提下,将W3C的最新规范引入HTML5和CSS3而在当前高职院校《网页前端设计》课程的教学过程中,学生目前的主流网站开发工具Bootstrap3。

4.2.1网站结构的简要

不管是哪一种网站,主要结构都是类似的:首页、分级导航、多个子页面。在进行网站设计之前,要对其总体情况有清晰的了解,要能绘制出网络和树型的网络结构因而,在日常的教学过程中,教师要帮助学生培养好习惯,能够及时给相应的网站材料分类,分类页面,并正确地给网站起名字。
4.2.2网页布局和Html代码结构

通过 Dreamweaver的可视化设计,虽然容易,但是总体来说缺少细节。在网页编码的设计上不断完善,使得产生的网页具有更好的适用性和相似性。Div是目前主流网站的版面设计方法。在例子中, <header>、< menu>、< content>、< footer>都是特殊的名字,这样的常用的名字可以增加页面的可读度,并且在多个人的协作下更容易被了解。在新版本的HTML5中,诸如< header>< footer>这样的标记都有了更多的通用标准。Div集装箱可以按要求进行嵌套,或者通过类来进行复用。当站点被实施时,就不需要彻底地抛弃以前经常使用的“table”,仍然要求大量的资料。需要指出的是,这些标记基本上都是成对地呈现,如果没有封口,会造成各种浏览器页面的显示变化。
4.3科学合理安排《网站前端设计》的教学内容

《网站前端设计》的课程中,教师要把课堂的教学内容组织起来,并把所需要的知识串联并灌输作为一条线索从而在上课时按照线索来帮助学生建立起系统化的知识体系,将所学到的《网页前端设计》的小知识点汇集成体系。此外,并根据工程应用的需要,对教条化的教学内容进行调整。在传统的以老师为主导的被动“教”、学生被动“学”的教学方式下,学生无法完全地进行学习。为了促使学生能够车充分了解如何学、学到什么、学到什么、学到什么是什么,教师应该在课程的编排上要把项目的具体内容或当前正在使用的项目作为教学的一部分,使学积极地投入到项目的研究中,从项目的制定、需求、开发、测试等全方面进行教学,从“因材施教”到“因需施教”,充分激发了学生的学习积极性和兴趣

4.4积极改革当前《网页前端设计》考核评价机制

为了使大学生能够胜任 IT产业的要求,教师必须对现有的教学评估体系进行变革。采用“理论考核与实践考核并重,过程考核与结果并重,教师与学生并重”的考核方式,以“期末考核50%+平时考核20%+实践成果考核30%,理论考核与过程性考核各占50%,依此构建课程考核评价体系。其中,日常考试(考勤、作业、练习)是由老师对学员进行的;实践结果(包括实验项目编码及试验结果网址),采用小组组长对学员进行评估,采用小组成员评价和小组成员相互评价的方式。通过对学生开展全面、系统的评价,来充分掌握学生自身的能力和水平,能够了解学生的弱点所在,进而来采取相应地改进措施,提升学生的实际水平。

4.5开发立体化教学资源、加大网络教学平台的应用力度

通过对《网页设计》教学课程的常年教学研究和分析中,逐步改编写了相关的理论和实用材料其中,在当前高职院校《网页前端设计》的教学过程中,教师应该多采用开放源码 Claroline的在线教学系统,对网上的课程进行了开发与设计,并形成了一个立体化、系统化、全面化的教学资源包其中重点包括了Web前端开发技术 HTML、CSS、JavaScript和Web前端开发技术实验与实践HTML、CSS、JavaScript两部教材。通过网上学习,使学生能更好地进行自主学习、探究和合作学习与此同时,教师可以自行设计各种教学 PPT,实验指导书,课程设计案例,在线学习视频,软件下载等并及时上传到相应教学平台中,使得同学们可以在线学习,作业,练习,在线讨论;老师可以在线答疑,在线调查,为师生之间的教学和沟通创造了良好的互动环境。

5.结语

总而言之,在当前社会的快速发展过程中,高职院校在网设计课程的教学过程中,如果仍然喜欢用传统的教学模式和教学内容,是无法适应社会发展提出的要求,甚至严重影响学生的能力和技术水平。因此,在当前高职院校《网站前端设计》的教学中,需要必须通过不断地改进当前的教学内容和教学目标,考核评价机制,从而能够提高当前学生的前端设计水平,使得学生能够掌握新的技术,注重运用和提高实践技能。《网站前端设计》是针对当前网络发展的需要而专门针对当前的HTML5、CSS3、Bootstrap 3等面向手机终端的新产品的引入,使得这门课更加符合现实的求职环境。与时俱进,学以致用,融会贯通,才能使学生在未来职场上真正出类拔萃。

6.参考文献

[1]郭琳.Web前端设计之我见门[M].信息技术,2016(15);8-11.

[2]吴丰,丁欣.Dreamweaver CS5网页设计与制作——DIV+CSS版[M].北京:清华大学出版社,2012.
    [3]姬莉霞.HTML5+CSS3网页设计与制作案例教程[M].北京:清华大学出版社,2017.
    [4](美)David Cochran,lan Whittey.著.Bootstrap 实战[M].李松峰,译.北京:人民邮电出版社,2015.

[5]李海燕.基于项目化的《网站规划与网页设计》课程教学改革初探JI电脑知识与技术,2010,06(30).


...


阅读全文