Web前端开发技术课程教学设计方案

《Web前端开发技术》课程教学设计方案

模块名称

涉及知识点

Web网站相关的基本概念；

常用的Web前端开发工具、

任务设计

各任务所用资源名称

任务1视频资源：

第一模块：

HTML基础及文

本使用

1《Web前端开发技术》第1讲Web前端开发技术概述；

浏览器工具。

任务1：观看第1、2、3、4、5讲

2《Web前端开发技术》第2讲HTML文档结构；

3《《Web前端开发技术》第3讲HTML基本语法；

HTML文档的基本结构。 标视频；

记类型、标记语法。 网页任务2：学习文本辅导中F01、F02

4《Web前端开发技术》第4讲文本的使用（上）

5《《Web前端开发技术》第5讲文本的使用（下）

资料；

添加注释。

元信息meta标记的作用。

任务3：实践训练，完成参考资料

任务2文本辅导：

中R01动手实践。

1 .文本辅导：F01 HTML基本标签应用.docx

文本格式化标记类型与各

2 .文本辅导：F02 HTML文本样式属性设置.docx

种样式。

使用段落与排版标记。

列表的类型。

无序列表、有序列表标记语

法及属性语法。

使用嵌套列表设计小型网

站首页。

第二模块冽表、

超链接的基本标记语法和

超链接与框架

属性语法。

使用超链接实现电子邮件

链接。

使用浮动框架实现内嵌页

面的显示。

任务3参考资料：R01

HTML图文混排动手实践.docx

任务1视频资源：

任务1：观看第6、12讲视频；

任务2：学习文本辅导中F03、F04、

F05资料；

任务3：实践训练，完成参考资料

中R02应用案例。

1《Web前端开发技术》第6讲 列表的使用；

2《Web前端开发技术》第12讲超链接与框架的使用.；

任务2文本辅导：

1 .文本辅导：F03 HTML列表标签的属性和使用.docx

2 .文本辅导：F04列表与超链接的样式^^乂

任务3参考资料：R02超链接的应用.docx

任务1视频资源：

设计表格所有标记和属性。

表格行标记的属性及设置

方法。

表格单元格的跨行与跨列

第三模块：表格

属性的设置方法。

表格的嵌套方法。

与表单

表格中嵌入各种页面元素。

表单结构语法及属性语法。

表单控件（元素）标记语法及 属性语法。

表单域和域标题标记语法。

1《Web前端开发技术》第7讲 认识表格标记；

2《Web前端开发技术》第8讲表单使用（上）；

任务1：观看第7、8、9、10讲视

3《Web前端开发技术》第9讲表单使用（中）；

4《Web前端开发技术》第10讲 表单使用（下）；

频；

任务2：学习文本辅导中F06、任务2文本辅导：

F07、

1 .文本辅导:F06 HTML_表格实例.docx

F08资料；

2 .文本辅导：F07表单下拉菜单和下拉列表效果.doc

任务3：实践训练，完成参考资料

3 .文本辅导：F08 HTML5表单中新增属性使用.doc

中R03、R04动手实践。

任务3参考资料：

1 .参考资料：R03常用表单控件设计用户注册界面.docx

2 .参考资料：R04用表单控件及属性设计信息登记表.doc

任务1视频资源：

《Web前端开发技术》第11讲图像与多媒体的使用；

图像img标记语法及属性。

任务1：观看第11讲视频；

任务2文本辅导：

滚动文字marquee标记语法

任务2：学习文本辅导中F09、F10

1 .文本辅导：F09图片阴影与图片背景设置.docx

第四模块：图像

2 .文本辅导：F10 HTML5音视频的嵌入设计案例.doc

及属性。

资料；

与多媒体文件

嵌入多媒体文件标记语法

任务3：实践训练，完成参考资料

任务3参考资料：

中R05、R06动手实践。

1参考资料：R05图像的渐变效果设置.doc

及属性。

2.参考资料：R06 HTML5音视频的嵌入设计案例.doc

第五模块：

HTML5及其新

增元素属性

1《Web前端开发技术》第13讲HTML5概述；

HTML5新特性与页面结构。

2《Web前端开发技术》第14讲HTML5的文档结构；

HTML5新增元素和新增属

任务2：学习文本辅导中F11、F08

3《Web前端开发技术》第15讲HTML5新增表单输入类型与属性。

性；

资料；

任务1：观看第13、14、15讲视频；

任务1视频资源：

HTML5新增表单兀素及新

增属性的设置方法。

任务3：实践训练，完成参考资料

中R07动手实践。

任务2文本辅导：

1 .文本辅导：F11 HTML5的部分新增元素用法.docx

2 .文本辅导：F08 HTML5表单中新增属性使用.doc

任务3参考资料：

参考资料：R07 HTML5标签综合案例.docx

任务1视频资源：

1《Web前端开发技术》第16讲CSS基本语法规则

2《WEB前端开发技术》第17讲CSS定义与引用；

任务1：观看第16、17、18、19、

3《WEB前端开发技术》第18讲DIV与SPAN；

20、21讲视频；

CSS基本概念、CSS类型。

4《WEB前端开发技术》第19讲CSS字体样式属性；

4种CSS样式定义的方法。

任务2：学习文本辅导中F12、5《WEB前端开发技术》第20讲CSS文本与列表样式；

F13、

第六模块：CSS

基CSS中字体、排版、颜色、

6《WEB前端开发技术》第21讲颜色和背景属性；

F14资料；

础及样式属性

背景、列表等属性设置。

DIV和SPAN标记语法及标

任务3：实践训练，完成参考资料

任务2文本辅导：

1 .文本辅导：F12 CSS样式引用与选择器使用.docx

记语法。

2 .文本辅导：F13选择器及伪类链接的综合使用.doc

中R08高级应用实现。

3 .文本辅导：F14 CSS层叠性与选择器优先级.doc

任务3参考资料：

参考资料：R08 CSS文本样式及高级特性实现.docx

任务1视频资源：

1《WEB前端开发技术》第22讲CSS盒子模型（上）；

2《WEB前端开发技术》第23讲CSS盒子模型（下）；

CSS样式设置中常用的单

3《WEB前端开发技术》第24讲CSS排版与页面布局；

位。

4《WEB前端开发技术》第25讲CSS3高级应用；

CSS盒子模型。

任务1：观看第22、23、24、25、

5《WEB前端开发技术》第43讲导航菜单设计；

边框、边界、填充及内容等

任务2文本辅导：

43讲视频；

属性及设置方法。

任务2：学习文本辅导中F15、1 .文本辅导：F15运用盒子模型相关属性控制页面中各个兀素第七模块：CSS

盒DIV标记的CSS各类属性。

F16、 F17、 F18、 F19、 F20、 doc

子模型与排版

常见的页面布局类型。

F21、 F22 资 料；

2 .文本辅导：F16盒子边框的样式设置.docx

DIV结构及CSS规则。

布局

任务3：实践训练，完成参考资料

3 .文本辅导：F17盒子浮动float与清除浮动影响.doc

CSS3的转换、过渡和动画4 .文本辅导：F18盒子相对定位与相对定位设置.doc

中R09、R10、R11应用案例。

等 特性。

5 .文本辅导：F19运用浮动与定位组织页面^^

设置与应用CSS3文本效6 .文本辅导：F20块元素与行内元素的使用.doc

果。 使用DIV+CSS进行页7 .文本辅导：F21 CSS3属性选择器和结构伪类选择器应用.docx

面布 局。

8 .文本辅导：F22 CSS3综合运用设计推广软文.doc

任务3参考资料：

JavaScript程序的概念与作 用。

第八模块：

JavaScript

编程

JavaScript标识符和变量的 概念及其使用方法。

JavaScript常用运算符和表 达式概念。

JavaScript中顺序、分支、循 环三种程序控制结基础

1 .参考资料：R09运用盒子模型属性实现弹出框页效果.docx

.参考资料：R10运用元素的浮动和定位实现焦点图效果.docx

任务1视频资源：

任务1：观看第26、27、28、29、

21《WEB前端开发技术》第26讲JavaScript概念与作用；

30、31、32讲视频；

2《WEB前端开发技术》第27讲JavaScript标识符和变量；

任务2：学习文本辅导中F23、F24、

3《WEB前端开发技术》第28讲JS常用运算符和表达式；

F25、F26、F27 资料；

4《WEB前端开发技术》第29讲JS程序控制结构（上）；

任务3：实践训练，完成参考资料

5《WEB前端开发技术》第30讲JS程序控制结构（下）；

6《WEB前端开发技术》第31讲javascript函数（上）；

中 R12、R13、R14 应用。

7《WEB前端开发技术》第32讲javascript函数（下）；

JavaScript函数的定义方法 与使用。

任务2文本辅导：

1 .文本辅导：F23 Javascript数据类型和变量.docx

2 .文本辅导：F24 String对象与Array对象.docx

3 .文本辅导：F25 if分支语句应用.docx

4 .文本辅导：F26 JavaScript 的 for 循环.docx

5 .文本辅导：F27函数定义和调用.docx

任务3参考资料：

1 .参考资料：R12深入学习循环语句.docx

2 .参考资料：R13函数应用.docx

3 .参考资料：R14 JavaScript作用域.docx

JavaScript事件类型与事任务1视频资源：

件 的概念。

1《WEB前端开发技术》第33讲JS事件类型及处理方法；

事件句柄与事件处理代码

任务1：观看第33、34、35、442《WEB前端开发技术》第34讲 表单事件；

讲 视频；

相关联的方式。

3《WEB前端开发技术》第35讲 鼠标键盘与窗口事件；

第九模块：

利用表单的提交及重置事

任务2：学习文本辅导中F28、F29

4《WEB前端开发技术》第44讲图片切换案例

JavaScript

事件

资料；

件对表单的数据进行校验。

任务2文本辅导：

分析

鼠标事件中的鼠标单击及

任务3：实践训练，完成参考资料

1 .文本辅导：F28键盘事件.docx

鼠标移动事件。

2 .文本辅导：F29鼠标事件的种类.docx

中R15应用实践。

常用的键盘及窗口事件。

任务3参考资料：

JavaScript内置对象的常参考资料：R15 JS定时器和鼠标事件实现焦点图轮播效果.docx

用 属性及方法。

文档对象模型的节点树的

任务1：观看第36、37、38、39、

任务1视频资源：

构建及节点类型的划分。

40、41、42讲视频；

1《WEB前端开发技术》第36讲JavaScript内置对象（上）； 2第十模块：DOM

《WEB前端开发技术》第37讲JavaScript内置对象（中）； 3JavaScript的对象类型，任务2：学习文本辅导中F16、和BOM

《WEB前端开发技术》第38讲JavaScript内置对象（下）；

掌握 Array、String、F17、

4《WEB前端开发技术》第39讲DOM节点操作（上）；

Date、Number、 Math等对F18资料；

方法。

BOM结构图

浏览器对象模型的各对象

的层次关系。

window对象的定时器及对

话框方法。

navigator、screen、history> location等对象的属性和方 法。

5《WEB前端开发技术》第40讲DOM节点操作（下）；

任务3：实践训练，完成参考资料

6《WEB前端开发技术》第41讲BOM对象模型（上）；

7《WEB前端开发技术》第42讲BOM对象模型（下）；

中R16、R17应用。

任务2文本辅导：

1 .文本辅导：F30操作

2 .文本辅导：F31操作DOM树中的表单.docx

3 .文本辅导：F32浏览器对象概述"“乂

任务3参考资料：

1参考资料：R16 JS实现焦点图轮播和无缝滚动.docx

2参考资料：R17 JavaScript事件和DOM节点操作.docx