admin 管理员组

文章数量: 1086019


2024年6月16日发(作者:进制转换公式十进制转化为二进制)

课程◆实践◆育人

课程

中职学校网页设计教材开发探究

—以

HTML5

基础实训为例——

肖静

(珠海理工职业技术学校,广东珠海519000)

[摘要]

“互联网+”时代的到来,为中职计算机专业学生提供了大量的工作岗位,同时HTML5的广泛应用也给传统网

页设计带来了巨大挑战。网页设计作为中职学校计算机专业主干课程,教材是影响教学的关键因素。通过以

开发HTML5基础实训为例,阐述中职学校网页设计教材开发背景以及对开发过程的思考,并结合教材开发

中的问题提出建议。

[关键词]

中职学校;网页设计;HTML5教材开发

[中图分类号]

G712

[文献标志码]

A

[文章编号]

2096-0603(2019)11-0126-02

中等职业学校是培养社会急需的一线技能型应用人才。中

职学校所

使用的教材是教师“教”与学生“学”的最直接工具,是

传授知识和技能的重要载体,教材的高质量和高适用性直接关

系到人才培养的质量。

以笔者所在中职学校计算机专业为例,网页设计课程作为

一直以来都为选择适合的教材发愁,网上琳琅满目

专业

主干课,

的教材适用群体大多数为本科院校学生或高职院校学生,没有

考虑到中职学生的学习起点低的因素;教材内容过于理论化和

抽象化,没有考虑到中职学生理解能力不足的因素;教材案例

难度偏高,没有考虑到中职学生自学困难的

够详细具体,

因素。

中国互联网协会和国家互联网应急中心于2018年1月9

日联合发布了《互联网行业运行指数———中国网站》报告。报告

中显示,截至2017年底,我国网站数量达到526.06万个。这么多

网站需要多少人设计、维护岗位?这么多岗位中又有多少面向中

职学

生呢?据笔者对当地的网站就业情况了解,网站方向的岗位

多,尤其当下的中小型网站开发公司需要大量的HTML设计

人员,然后网站方向的中职毕业生能找到对口方向工作岗位的

比例较低。对口就业率低的最重要原因就是中职学生的网页设

能力达不到公司岗位要求,而影响学生工作能力的很大原因

于教材选择不当。

一、教材开发探究

(一)教材开发思路

笔者查阅了大量有关中职网页设计课程标准的文献,对该

课程标准概括为:网页设计课程是中等职业学校计算机专业一

门重要的专业必修课,定位于Web前端开发类岗位,为后续的动

态网站开发打下基础。课程的教学目标是使学生了解网页技术

的发展、常用制作工具(Dreamweaver);理解HTML语言和CSS语

法;熟练运用Photoshop软件美化、制作网页图片以及Flash软件

制作网页动画;掌握网页设计的工作流程。

网页设计课程标准强调了教学重点是让学生理解和运用

HTML语言,熟练使用Dreamweaver软件开发网页。市面上大多

材包括笔者所在学校使用的教材都侧重利用Dreamweaver软

件讲解HTML语言和CSS语法。

2014年10月29日,经过接近8年的艰苦努力,HTML5标

由于HTML5在扫描图形、播放视频和音

准规范

终于制定完成,

频等方面的改进以及多平台支持性,对传统网页设计发起了巨

大挑战。

近几年,HTML5的发展势头猛烈,岗位需求量急增,而为社

会培养一线技能型应用人才的大多数中职学校包括笔者所在学

还一直在使用传统网页设计教材来讲授HTML4语言。

在内,

为此,笔者协同其他教师共同开发《HTML5基础实训》教材,

能够了解HTML5的发展趋势及应用领域;

生通过学习教材,

知道网页设计的流程;具备扎实的HTML5&CSS3开发基础,代码

的书写符合前端编码规范,具备良好的编程思想;具有良好的沟

通能力,能够关注最新行业动态,具备新技术的研究与学习能

对自己有合理的定位。

(二)教材使用软件探究

网页设计课程标准中强调熟练使用Dreamweaver软件开发

网页,Dreamweaver软件是集网页制作和管理网站于一身的所见

一直以来都作为网页教学工具软件,然

所得网页代码编辑器,

正由于Dreamweaver软件的便利性,不利于学生熟悉掌握

HTML语言和CSS语法。

首先,中职学生由于学习习惯上的懒惰,在进行网页设计

时,习惯通过在设计视图添加网页元素来完成网页效果,本质上

没有熟练掌握HTML语言,一旦遇到网页运行效果问题时不会

查找HTML原因,久而久之就培养出一个只会使用所见即所得

网页代码编辑器开发网页而不懂HTML内涵的“空壳子”。其次,

Dreamweaver软件中的CSS面板、属性面板都可以“方便”地让学

生不用熟记CSS语法,就能完成网页样式的设计,这对学生未来

的职业发展

也是不利的。

为此,《HTML5基础实训》教材最终选择了SublimeText3编

-126-

课程◆实践◆育人

辑器作为前端开发工具,SublimeText3是一款免费的文本编辑

器,安装容易,对硬件要求不高,跨平台,同时支持Windows、

项目任务知识点

课程

续表

Linux和MacOSX等操作系统,方便学生课后安装使用。Sublime

Text3

具有漂亮的用户界面以及书签、即时项目切换、多选择和多

窗口等功能方便学生网站开发,同时拼写检查、代码提示功能适

当帮助学生正确掌握HTML语言和CSS语法。

(三)教材内容探究

传统中职网页设计教材,普遍存在知识点过于零散、案例彼

此之间缺乏联系、初学者体验不到网页设计与开发流程感的缺

点,中职学生由于独立建构知识体系能力不足的原因,更难掌握

网页整体设计。

在教材内容安排上,笔者致力于弥补这一缺陷,以某一个具

网站开发为主线,将网页设计的知识点融入主线中,每一个项

目对应主线网站中的模块,项目划分为不同的任务,不同的任务

应相应的知识点。通过“知识点—案例—任务—项目”一系列

操作,从而熟悉网页开发的整个流程,通过“做中学、学后练、练

后用”的特点来确保学生在进行项目学习后能真正的消化知识

并能灵活使用,最后通过综合实训项目强化开发应用能力。

教材内容包括9个项目,37个任务,具体内容见表。

HTML5

基础实训内容结构

项目

任务知识点

任务一:HTML5简介

HTML的发展史

一、制作第

任务二:开发环境安装与配

HTML5与HTML4的区别

一张网页

务三:制作第一张网页

编写HTML5文件结构

任务四:运行与调试

编写网页内容

任务一:HTML5语义结构

二、搭建《中

标签

国传统文任务二:H5语义结构标签+HTML5语义结构标签

化网》首页

css

的简单应用

语义标签间关系

结构

任务三:搭建主线网站首页

结构

任务一:HTML5排版标记HTML5排版标记

任务二:文字效果标记HTML5字体效果标记

三、文混排任务三:列表标记HTML5列表标记

网页设计

任务四:图片标记img标记、figure标记

任务五:超链接标记标记、标记相关属性

任务六:多媒体标记

任务一:制作基本表格表格标记

四、表格设计

任务二:合并单元格单元格合并属性

任务三:表格嵌套表格嵌套概念

任务一:认识表单

form属性

任务二:创建表单基本结构

文本框、密码域、按钮、定

五、表单的

任务三:表单元素—

按钮

制作

任务四:表单元素—<

单选钮、复选钮

textarea>

多行文本框

任务五:表单元素—<列表

select组件、datalist组件

识CSS、认识CSS3

任务一:认识CSS3

CSS语法、应用CSS样式

背景样式、文字样式、段落

六、CSS3网

任务二:创建CSS3样式表

页美化

任务三:图文混排样式美化

样式、文字效果、图片样

任务四:表格样式美化

式、文字环绕效果

任务五:超链接及列表美化

表格基本样式、单元格基

本样式

超链接样式、列表样式

任务一:盒子模型

宽高、padding、margin、bor-

任务二:浮动布局

der

float

七、网页布局

任务三:流式布局

任务四:弹性布局

流式布局概念

任务五:定位布局

弹性布局概念

任务六:导航条制作

position

ul、li、a

任务一:搭建首页框架

八、《8号商

任务二:制作头部和快速导

城》首页制

航栏

知识点综合应用

任务三:制作中间部分

任务四:制作分类区域

任务五:制作页面底部

任务一:滚动广告的实现

九、综合实训任务二:“乐游出行”页面

@keyframes

重构

视觉延伸概念

二、教材开发体会

(一)教材开发需体现web前端开发工程师的真实工作情景

web前端开发工程师的工作岗位要求具备扎实的

HTML5&CSS3开发基础、编码规范,还要具备良好的编程思想、

沟通能力。选取主流的、学生喜欢且好奇、所用的知识针对性强

的工作案例作为教材项目,教材需体现“做中学、学后练、练后

用”的特点。确保学生在进行项目学习后能真正的消化知识并能

灵活使用。

(二)教材内容需定位在基础实训

基础实训指通过实训的方式掌握基础知识和基本技能,依

据中职学生学情,选取难度适当的基础知识点,反复加强练习,

使学生达到熟练程度,提升学生实际运用能力和解决问题的能力。

(三)教材内容组织需要考虑中职学生学情

中职学生既有活泼好动、操作能力强等优点,同时又有自控

能力差、知识接受能力稍弱等缺点。如何通过教材能使学生有兴

趣学、坚持学、学习之后能灵活使用、激发学生成就感是教材编

写中需要特别注意的问题。

“互联网+”时代的到来给中职计算机专业的毕业生创造了

绝好的就业机会,同时国家的大力支持使中等职业教育快速发

展,

且国家也投入了大量的财力物力,近几年中职学校的办学质

和水平也有所提高,如何继续做大做强,增强中职毕业生的就

业竞争力?在这样的环境下,开发适合中职网页设计课程的教材

则是势在必行,尽管教材开发过程中还存在一些问题,如教师编

写教材版权意识不足、信息资源不足、企业参与度低等,但对教

师个人的专业发展和学生的职业能力发展还是起到了一定的促

进作用。

参考文献:

[1]陈颖.中职《网页设计》教材编写的实践与思考[J].广西教

育,

2015(1).

[2]丁春明.中职计算机及应用专业项目课程校本教材开发

的思考[J].职业技术教育,2010,31(8):65-67.

[3]张宝升.中职学校校本教材开发研究:以《网页设计》为例

D].长沙:湖南师范大学,2015.

[4]杜志锋.浅析中职《网页设计》课程改革[J].品牌,2014

9).

[5]林烨.论中职校网页设计课程的教学改革[J].科教导刊,

2014(9).

◎编辑武生智

-127-


本文标签: 网页 设计 学生 教材 中职