《Web 前端设计与开发》课程整体教学设计.docx

《Web 前端设计与开发》课程整体教学设计.docx

《《Web 前端设计与开发》课程整体教学设计.docx》由会员分享，可在线阅读，更多相关《《Web 前端设计与开发》课程整体教学设计.docx（33页珍藏版）》请在冰豆网上搜索。

《Web前端设计与开发》课程整体教学设计

《Web前端设计与开发》

课程整体教学设计

（2019～2020学年第2学期）

课程名称：

Web前端设计与开发

所属系部：

信息工程学院

制定人：

XXX

合作人：

XXX

制定时间：

2020年7月

1

Web前端设计与开发精品资源共享课

课程整体教学设计

一、课程基本信息

课程名称：

Web前端设计与开发

课程代码：

18310007

学分：

3

学时：

48

授课时间：

第三学期

授课对象：

高职计算机应用技术专业大二

学生、高职计算机网络技术专业大二学生

课程类型：

专业核心课

先修课程:

信息技术素养与技能、

后续课程:

HTML5混合App开发、

计算机程序设计

PHPWEB应用开发

二、课程定位

（一）学生所在专业面向的岗位（群）。

专业服务区域：

临沂市及周边地区

专业服务领域（行业）：

为智慧物流、智慧贸易、智慧农业、智慧工业、智慧

公共服务相关行业服务的应用软件开发行业。

主要就业岗位：

在各大中小软件开发公司从事Web与企业应用软件的开发、

测试、销售与运维等工作岗位。

（二）本课程选择的背景实践岗位。

表1典型工作任务分析表

序号

工作岗位

典型工作任务

工作过程简述

1

WEB界面开发

运用各种工具进行页面布局,WEB图像、音频、视

频、动画制作。

2

程序员

程序代码编写

运用面向对象的开发工具规范地编写程序，使用数

据库访问技术连接访问数据库。

3

WEB部署运行

安装网络操作系统，配置各类服务器、发布站点

2

Web前端设计与开发精品资源共享课

表2岗位职业能力分析表

岗位

序号

岗位

典型工作任务

职业能力

支撑课程

性质

名称

WEB界面开发

网页制作能力

HTML5混合APP开

程序代码编写

代码编写能力

发（△）

1

程序员

WEB前端设计与开发

WEB部署运行

网站发布能力

（△）

基础

JAVAWEB应用开发

岗位

（△）

用户培训

网络与应用系统安装能力

PHPWEB应用开发

（△）

数据库安装、升级、迁

数据库基础

软件管理维护

网络操作系统

移、数据恢复能力

软件测试

搭建测试环境，编写测试

2

软件测试与跟踪

脚本，运用测试脚本寻找

人员

bug能力

（三）本课程与中职、高职（专科、本科）、普通高校、培训班同类课程的区别。

中职教育的人才培养目标定位是明确的，培养高素质劳动者和技能型人才。

高职专科层次的人才培养目标应该是多元化的，不同区域、不同专业、不同生源的要求是不一样的，所以人才培养目标定位也不一样，WEB前端设计与开发课程中职阶段主要培养学生的操作技能，而高职阶段则培养具有良好的职业道德、较为扎实的专业基础知识和技能、较强的竞争能力与适应能力、可持续发展的学习能力、能在Web前端开发领域占有一席之地。

三、课程目标

总体目标：

本课程以HTML语言为主要工具，学习Web应用程序和网站前端开发技术。

通过本课程的学习，学生能够掌握HTML标签与CSS样式基础、图像设计在网页中的应用、制作导航栏、表格在网页中的应用、表单在网页中的应用、CSS标准流布局、CSS浮动布局、CSS定位布局、JavaScript的应用等知识。

通过完成相关的项目，使学生掌握WEB前端设计的主要方法，并能熟练利用HTML、CSS、JavaScript等技术控制WEB页面各级元素，实现WEB前端的开发任务。

在课程的学习中，培养诚实、守信性格，培养善于自我学习、团队协作和解决实际问题的能力，为后续专业课的学习打下良好的基础。

3

Web前端设计与开发精品资源共享课

能力目标：

1.能够配置典型的网站开发环境。

2.能够使用HTML制作包含基本内容的网页。

3.能够使用HTML及CSS等技术来设计网页布局。

4.能够使用JavaScript技术来提高网页交互性、体验性。

5.能够综合使用HTML、CSS与JavaScript的相关知识，来丰富、渲染网页。

6.能够开发电脑端静态网页和移动端静态网页。

7.能够根据具体应用需求，创新性地设计网页。

知识目标：

1.了解本课程内容在Web开发领域的定位与作用。

2.了解HTML、CSS及JavaScript技术的发展脉络、趋势及应用前景。

3.掌握HTML中的基本元素、文字与段落元素、图像元素、列表元素、表格元素、超链接元素、多媒体元素、框架元素及表单元素的语法、属性和参数等基础知识。

4.掌握CSS中元素的语法、属性和参数等基础知识。

5.了解网页布局的几种方法，掌握使用CSS进行网页布局、样式设计的基础知识。

6.掌握JavaScript中的基本语法知识。

7.掌握JavaScript进行提交内容校验、生成网页特效等方法。

8.了解并掌握HTML5和CSS3新技术。

素质目标：

1.通过编写代码经验积累，培养学生良好的编程风格。

2.通过网络、课程等资料学习，培养学生学习网站开发的兴趣。

3.通过企业岗位职责与国家相关法律学习，着力培养学生诚实、守信的思想品质。

4.通过校外实践锻炼，着力培养学生自我学习、团队协作和解决实际问题的职业素质

5.通过各类技能竞赛，培育学生勇于创新、善于发现的创新意识。

4

Web前端设计与开发精品资源共享课

四、课程的知识理论内容：

项目模块

线下学时

模块1

Web前端开发岗位认知

2学时

模块2

静态网页开发

12学时

模块3

静态网页美化

10学时

模块4

动态效果开发

8学时

模块5

移动端静态网页开发

8学时

模块6

移动端静态网页美化

8学时

合计

48学时

5

Web前端设计与开发精品资源共享课

五、能力训练项目设计

编

能力训练项

子项目编号、

能力目标

知识目标

训练方式、手段

可展示的结果

号

目名称

名称

及步骤

和验收的标准

1-1“Web前端工程

能够对“Web前端设计与开

了解Web前端工程师的

虚拟企业参观、工程师

发”岗位和课程有个明确的

工作；熟悉Web前端开

文档

师”岗位认知

连线、网络调研

认知

发学习路线

项目1WEB前

1

端岗位认知

1-2

“1+x”Web

能够理解Web前端开发所具

认识并了解Web前端开

备的专业技能；能够根据职

文档

前端开发职业技能

发和调试所具备的专业知

图片视频资料展示；

业技能标准进行职业学习规

（WORD文档）

标准

识和技能

划

能够根据UI设计稿对页面

2-1

需求分析与页

布局结构进行分析；能够使

掌握页面结构布局的方

任务驱动法；讲授法；

网页文件及图片，

面布局

用HTML标记进行页面布

法；掌握DIV的使用

演示法；上网实训

程序代码

局；

能够使用常用的前端开发软

HTML标记的组成；

HTML头部标记；HTML

任务驱动法；讲授法；

网页文件及图片，

2-2

制作头部模块

件；能够使用图像标记和段

项目2“红色

的图像标记；相对路径与

演示法；上网实训

程序代码

落标记对头部模块进行制作

沂蒙”旅游网首

绝对路径；段落标记

2

页制作

2-3

制作导航模块

能够使用文本控制标记进行

文本控制标记；转义字符

任务驱动法；讲授法；

网页文件及图片，

导航模块的制作

演示法；上网实训

程序代码

2-4制作“红色沂

能够使用HTML标记制作介

HTML标题标记；文本样

任务驱动法；讲授法；

网页文件及图片，

蒙”介绍模块

绍模块；能够使用表格标记

式标记；图像标记

演示法；上机实训

程序代码

对网页进行布局

2-5

制作推荐模块

能够使用HTML的列表标记

有序列表；无序列表；定

任务驱动法；讲授法；

网页文件及图片，

制作推荐模块

义列表及列表的嵌套应用

演示法；上网实训

程序代码

6

Web前端设计与开发精品资源共享课

编

能力训练项

子项目编号、

能力目标

知识目标

训练方式、手段

可展示的结果

号

目名称

名称

及步骤

和验收的标准

2-6

制作评论模块

能够使用HTML标记制作评

掌握特殊字符标记和div

任务驱动法；讲授法；

网页文件及图片，

论模块

标记的方法

演示法；上机实训

程序代码

2-7

制作页脚模块

能够使用HTML标记制作页

了解常用的图像格式

任务驱动法；讲授法；

网页文件及图片，

脚模块

理解切片的原理及方法

演示法；上网实训

程序代码

2-8

制作注册和登

能够创建具有相应功能的表

任务驱动法；讲授法；

网页文件及图片，

单控件；能够通过控制表单

表单及表单控件

陆模块

演示法；上网实训

程序代码

样式美化表单界面

了解CSS样式规则

3-1布局及定义基

能够使用CSS定义基础样式

掌握引入CSS样式表的不

任务驱动法；讲授法；

网页文件及图片，

础样式

同方式；掌握CSS基础选

演示法；上机实训

程序代码

择器的用法

掌握CSS字体样式及文本

3-2头部模块的美

能够使标记制作导航

外观属性；熟悉CSS复合

任务驱动法；讲授法；

网页文件及图片，

化

及banner模块

选择器（标签指定、后代、

演示法；上机实训

程序代码

项目3“红色

并集）

3-3

注册及登陆页

初识表单，创建表单；掌

任务驱动法；讲授法；

网页文件及图片，

沂蒙”旅游网页

3

能够使用CSS控制表单样式

握表单相关标记；熟悉表

面的美化

演示法；上机实训

程序代码

面美化

单样式的控制

3-3介绍模块的美

能够灵活利用元素的转换制

掌握CSS层叠性、继承性

任务驱动法；讲授法；

网页文件及图片，

与优先级；了解盒子模型

化

作最新动态模块

演示法；上机实训

程序代码

的概念

3-4推荐模块的美

能够使用DIV标记与浮动样

掌握盒子的相关属性

任务驱动法；讲授法；

网页文件及图片，

化

式制作推荐模块

演示法；上机实训

程序代码

3-5评论模块的美

能够使用块元素和行内元素

熟悉元素的类型与转换方

任务驱动法；讲授法；

网页文件及图片，

化

的转换美化评论模块

法

演示法；上机实训

程序代码

7

Web前端设计与开发精品资源共享课

编

能力训练项

子项目编号、

能力目标

知识目标

训练方式、手段

可展示的结果

号

目名称

名称

及步骤

和验收的标准

3-6页脚模块的美

能够使用元素的定位及层叠

掌握元素的浮动与定位；

等级属性制作页脚和悬浮框

化

掌握清除浮动的方法

模块

4-1

导航模块特效

能够使用JavaScript创建导

掌握JavaScript基本语

任务驱动法；讲授法；

网页文件及图片，

制作

航特效

法

演示法；上机实训

程序代码

4-2banner模块特

能够使用JS制作头部模块

掌握运算符和表达式的使

任务驱动法；讲授法；

网页文件及图片，

性制作

用方法

演示法；上机实训

程序代码

4-3

介绍模块特效

能够使用JS中的基本语句制

掌握条件语句、循环语句

任务驱动法；讲授法；

网页文件及图片，

制作

作导航模块

及跳转语句

演示法；上机实训

程序代码

项目4“红色

4-4制作banner和

能够通过运算符和表达式进

掌握条件语句、循环语句

任务驱动法；讲授法；

网页文件及图片，

沂蒙”旅游网动

时间模块

行简单计算

及跳转语句

演示法；上机实训

程序代码

4

态效果制作

4-5

旅游信息查询

学会使用流程控制语句编写

掌握JavaScript中函数

任务驱动法；讲授法；

网页文件及图片，

模块制作

JavaScript程序

的调用及变量的作用域

演示法；上机实训

程序代码

4-6版权信息模块

能够制作版权信息模块

掌握JavaScript中函数

任务驱动法；讲授法；

网页文件及图片，

的调用及变量的作用域

演示法；上机实训

程序代码

5-1

移动端首页适

能够对移动端网页进行适

任务驱动法；讲授法；

网页文件及图片，

配，能够对移动端页面进行

视口的概念，移动端适配

项目5“红色

配及定义样式

演示法；上机实训

程序代码

布局及定义样式

5

沂蒙”旅游网移

动端首页制作

5-2

制作头部及导

能够使用HTML5新增语义化

HTML5新增标签元素

任务驱动法；讲授法；

网页文件及图片，

航模块

元素、页面增强元素与属性

演示法；上机实训

程序代码

8

Web前端设计与开发精品资源共享课

编

能力训练项

子项目编号、

能力目标

知识目标

训练方式、手段

可展示的结果

号

目名称

名称

及步骤

和验收的标准

能够使用CSS3的选择器、边

CSS3选择器、边框特性、

任务驱动法；讲授法；

网页文件及图片，

5-3

制作介绍模块

框特性、颜色、字体功能设计

颜色、字体功能

演示法；上机实训

程序代码

网页

能够使用HTML5新增多媒体

任务驱动法；讲授法；

网页文件及图片，

5-4

制作推荐模块

元素等功能进行移动端页面

HTML5多媒体元素标签

演示法；上机实训

程序代码

开发

5-5

制作页脚模块

能够独立完成移动端网页的

掌握Web前端开发的基本

任务驱动法；讲授法；

网页文件及图片，

制作

方法

演示法；上机实训

程序代码

6-1使用HTML5

能使用HTML5新增语义化元

了解HTML5新增全局属

性、结构化与页面增强、

任务驱动法；讲授法；

网页文件及图片，

美化“红色沂蒙”

素、页面增强元素与属性及

项目6“红色

表单标签、多媒体元素的

演示法；上机实训

程序代码

旅游网首页

多媒体属性等功能美化页面

6

使用方法

沂蒙”旅游网移

6-2使用CSS3美化

能够使用CSS3的选择器、边

了解CSS3选择器、边框特

任务驱动法；讲授法；

网页文件及图片，

动端首页美化

“红色沂蒙”旅游

框特性、颜色、字体功能美化

性、颜色、字体的功能

演示法；上机实训

程序代码

网首页

页面

能够从需求分析、项目搭建、

7-1“美丽中国”宣

页面布局及设计、网页制作、

掌握设计和制作Web前端

任务驱动法；讲授法；

网页文件及图片，

项目7综合实

传页制作

网页美化、网页测试及优化

页面的一般步骤和方法

演示法；上机实训

程序代码

7

训：

“美丽中

等方面制作Web前端页面

国”宣传页制

能够从需求分析、项目搭建、

7-2

移动端“美丽

页面布局及设计、网页制作、

掌握设计和制作移动端页

任务驱动法；讲授法；

网页文件及图片，

作

中国”宣传页制作

网页美化、网页测试及优化

面的一般步骤和方法

演