| 能力训练项 目名称 | 子项目编号、名称 | 能力目标 | 知识目标 | 训练方式、手段及步骤 | 可展示的结果 和验收的标准 |
| 项目1web前端岗位认知 | 1-1“Web前端工程师”岗位认知 | 能够对“Web前端设计与开发”岗位和课程有个明确的认知 | 了解Web前端工程师的工作；熟悉Web前端开发学习路线 | 虚拟企业参观、工程师连线、网络调研 | 文档 |
| 1-2“1 + X”Web前端开发职业技能标准 | 能够理解Web前端开发所具备的专业技能；能够根据职业技能标准进行职业学习规划 | 认识并了解Web前端开发和调试所具备的专业知识和技能 | 图片视频资料展示 | 文档 | |
| 项目2“红色衢州”旅游网首页制作 | 2-1需求分析与页面布局 | 能够根据UI设计稿对页面布局结构进行分析；能够使用HTML标记进行页面布局 | 掌握页面结构布局的方法；掌握DIV的使用 | 任务驱动法；讲授法；演示法；上网实训 | 网页文件及图片，程序代码 |
| 2-2制作头部模块 | 能够使用常用的前端开发软件；能够使用图像标记和段落标记对头部模块进行制作 | HTML标记的组成；HTML头部标记；HTML的图像标记；相对路径与绝对路径；段落标记 | 任务驱动法；讲授法；演示法；上网实训 | 网页文件及图片，程序代码 | |
| 2-3制作导航模块 | 能够使用文本控制标记进行导航模块的制作 | 文本控制标记；转义字符 | 任务驱动法；讲授法；演示法；上机实训 | 网页文件及图片，程序代码 | |
| 2-4制作“红色沂蒙”介绍模块 | 能够使用HTML标记制作介绍模块；能够使用表格标记对网页进行布局 | HTML标题标记；文本样式标记；图像标记 | 任务驱动法；讲授法；演示法；上机实训 | 网页文件及图片，程序代码 | |
| 2-5制作推荐模块 | 能够使用HTML的列表标记制作推荐模块 | 有序列表；无序列表；定义列表及列表的嵌套应用 | 任务驱动法；讲授法；演示法；上网实训 | 网页文件及图片，程序代码 | |
| 2-6制作评论模块 | 能够使用HTML标记制作评论模块 | 掌握特殊字符标记和div标记的方法 | 任务驱动法；讲授法；演示法；上网实训 | 网页文件及图片，程序代码 | |
| 2-7制作页脚模块 | 能够使用HTML标记制作页脚模块 | 了解常用的图像格式 理解切片的原理及方法 | 任务驱动法；讲授法；演示法；上网实训 | 网页文件及图片，程序代码 | |
| 2-8制作注册和登陆模块 | 能够创建具有相应功能的表单控件；能够通过控制表单样式美化表单界面 | 表单及表单控件 | 任务驱动法；讲授法；演示法；上网实训 | 网页文件及图片，程序代码 | |
| 项目3“红色衢州”旅游网页面美化 | 3-1布局及定义基础样式 | 能够使用CSS定义基础样式 | 了解CSS样式规则 掌握引入CSS样式表的不同方式；掌握CSS基础选择器的用法 | 任务驱动法；讲授法；演示法；上机实训 | 网页文件及图片，程序代码 |
| 3-2头部模块的美化 | 能够使标记制作导航 及banner模块 | 掌握CSS字体样式及文本外观属性；熟悉CSS复合选择器(标签指定、后代、并集) | 任务驱动法；讲授法；演示法；上机实训 | 网页文件及图片，程序代码 | |
| 3-3注册及登陆页面的美化 | 能够使用CSS控制表单样式 | 初识表单，创建表单；掌握表单相关标记；熟悉表单样式的控制 | 任务驱动法；讲授法；演示法；上机实训 | 网页文件及图片，程序代码 | |
| 3-4推荐模块的美化 | 能够使用DIV标记与浮动样式制作推荐模块 | 掌握盒子的相关属性 | 任务驱动法；讲授法；演示法；上机实训 | 网页文件及图片，程序代码 | |
| 3-5评论模块的美化 | 能够使用块元素和行内元素的转换美化评论模块 | 熟悉元素的类型与转换方法 | 任务驱动法；讲授法；演示法；上机实训 | 网页文件及图片，程序代码 | |
| 3-6页脚模块的美化 | 能够使用元素的定位及层叠等级属性制作页脚和悬浮框模块 | 掌握元素的浮动与定位；掌握清除浮动的方法 | 任务驱动法；讲授法；演示法；上机实训 | 网页文件及图片，程序代码 | |
| 项目4“红色衢州”旅游网动态效果制作 | 4-1导航模块特效 制作 | 能够使用JavaScript创建导航特效 | 掌握JavaScript基本语法 | 讲授法；演示法；上机实训 | 程序代码 |
| 4-2banner模块特性制作 | 能够使用JS制作头部模块 | 掌握运算符和表达式的使用方法 | 任务驱动法；讲授法；演示法；上机实训 | 网页文件及图片，程序代码 | |
| 4-3介绍模块特效制作 | 能够使用JS中的基本语句制作导航模块 | 掌握条件语句、循环语句及跳转语句 | 任务驱动法；讲授法；演示法；上机实训 | 网页文件及图片，程序代码 | |
| 4-4制作banner和时间模块 | 能够通过运算符和表达式进行简单计算 | 掌握条件语句、循环语句及跳转语句 | 任务驱动法；讲授法；演示法；上机实训 | 网页文件及图片，程序代码 | |
| 4-5旅游信息查询模块制作 | 学会使用流程控制语句编写JavaScript程序 | 掌握JavaScript中函数的调用及变量的作用域 | 任务驱动法；讲授法；演示法；上机实训 | 网页文件及图片，程序代码
| |
| 4-6版权信息模块 | 能够制作版权信息模块 | 掌握JavaScript中函数的调用及变量的作用域 | 任务驱动法；讲授法；演示法；上机实训 | 网页文件及图片，程序代码 | |
| 项目5“红色衢州”旅游网移动端首页制作 | 5-1移动端首页适配及定义样式 | 能够对移动端网页进行适配，能够对移动端页面进行布局及定义样式 | 视口的概念，移动端适配 | 任务驱动法；讲授法；演示法；上机实训 | 网页文件及图片，程序代码 |
| 5-2制作头部及导航模块 | 能够使用HTML5新增语义化元素、页面增强元素与属性 | HTML5新增标签元素 | 任务驱动法；讲授法；演示法；上机实训 | 网页文件及图片，程序代码 |