Web前端开发技术的教与学（教学大纲）

Web前端开发技术 2050 阅读 0 评论 0 点赞

Web前端开发技术的教与学（教学大纲）

Web前端开发技术(Web客户端编程)

学分：3.5 学时：56 (28时理论/28时上机)

一、课程的性质、地位与任务

《Web前端开发技术》（又名Web客户端编程）课程是计算机科学与技术、信息管理与信息系统、软件工程、网络工程、数字媒体、物联网工程等专业的一门专业课程，也是其他计算机相关专业的普及型课程，通过对Web前端三大主流开发技术学习和研究，让学生理解和掌握HTML5、CSS3、JavaScript等脚本语言的相关知识，通过项目实践培养学生开发和设计Web站点的基本操作技能和工作岗位适应能力。

二、课程的教学目标与基本要求

本课程教学基本要求是让学生理解Web前端开发与设计的基本原则、Web网站的目录结构定义、主流页面布局方法、导航菜单制作、图文排版、页面交互等方面的基础知识。掌握网站规划、设计、制作、管理、发布的相关技术及Web前端设计的操作技能；并熟练运用HTML中的文字、链接、列表、表格、表单、图像、多媒体、框架标记及属性设计出框架网页、表格与表单网页、多媒体动态网页；掌握使用DIV+CSS结合技术进行网页布局的基本方法。掌握JavaScript脚本语言的基本语法知识，HTML中JavaScript程序的嵌入方法，理解对象的概念及使用JavaScript来进行开发、维护、管理和设置Web应用程序；掌握综合网站设计和发布的基本流程和方法。

本课程的教学目标是让学生理解HTML5、CSS3、JavaScript三大脚本语言的基本语法，掌握常用的Web页面布局技术，理解并熟练应用JavaScript常用的对象的属性与方法，熟练地使用DOM技术编写页面交互的客户端程序，通过项目实训，培养学生Web页面布局和页面交互设计初步能力。

三、课程内容（重点△，难点★）

1 Web前端开发技术综述

1.1 Web概述

1.1.1了解Web起源

1.1.2理解Web特点

1.1.3理解Web工作原理

1.1.4 掌握Web相关概念，掌握URL构成、Web服务器、超链接基本概念。

1.2 Web前端开发职业需求

了解Web前端开发职业需求

1.3 Web前端开发技术

1.3.1△理解HTML概念及在网页中的作用，理解HTML文档定义。

1.3.2理解CSS在Web页面设计中作用

1.3.3理解JavaScript在Web页面设计中作用

1.3.4了解HTML DOM、BOM及AJAX在页面设计中的作用

1.3.5了解jQuery 含义及基本用途

1.4 Web前端开发工具

△掌握EditPlus、Adobe Dreamweaver、Sublime Text、WebStorm、HBuilder等开发工具

1.5 浏览器工具

熟悉常用五类浏览器安装与使用

1.6 熟悉综合实例

2 HTML基础

2.1 HTML文档结构

2.1.1△理解HTML文档组成结构

2.2 头部

△掌握HTML头部标记作用及标题标记、元信息meta标记的语法

2.3 主体

2.3.1△掌握HTML主体标记作用

2.3.2△掌握主体标记主要属性及其设置方法

2.4 HTML基本语法

△掌握标记类型语法及HTML属性语法

2.5 注释

掌握两种注释标记的使用方法及作用，重点掌握标记的使用。

2.6 HTML文档编写规范

2.6.1掌握HTML代码书写规范

2.6.2掌握HTML文档命名规则

2.7 HTML文档类型<!DOCTYPE>

了解3种HTML文档类型和HTML5的DTD定义方法。

2.8掌握综合实例中所使用的标记语法

3 格式化文本与段落

3.1 Web页面初步设计

3.1.1△掌握在<body>添加文字信息的方法

3.1.2掌握标题字标记语法及对齐属性的设置方法

3.1.3掌握添加空格、特殊符号的方法

3.2 格式化文本标记

3.2.1掌握文本修饰标记的使用方法

3.2.2了解计算机输出标记的使用方法

3.2.3理解引用和术语标记的使用方法

3.2.4 △掌握字体font标记的face、size、color属性语法

3.3 段落与排版标记

3.4.1△掌握段落p标记语法及align属性的设置

3.4.2掌握换行、水平分隔线、拼音/音标注释ruby标记和rt/rp标记拼音/音标注释ruby标记和rt/rp标记、预格式化、块引用等标记的使用及属性怕设置

3.4 综合实例

学会运用所学知识完成Web页面设计

4列表

4.1 列表概述

4.1.1了解列表的定义和常用列表的分类

4.2 无序列表

4.2.1△掌握无序列表基本语法

4.2.2★学会使用列表type属性的改变列表的符号样式

4.3 有序列表

4.3.1 △掌握有序列表基本语法

4.3.2 ★学会使用列表type、start属性的改变列表的编号样式

4.3.3 了解使用有序列表项value属性改变列表项编号

4.3.4理解列表的type与列表项type属性冲突时对列表项编号的影响

4.4 列表嵌套

4.4.1 △掌握无序列表与有序列表嵌套的方法

4.5 定义列表

4.5.1 △掌握定义列表基本语法

4.5.2 △★理解定义列表与无序、有序列表的外在表现上的差异

4.6 综合实例

学会运用所学知识完成Web页面设计

5超链接与浮动框架

5.1 超链接概述

5.2超链接语法、路径及分类

5.2.1△掌握超链接基本语法及href、target、title等属性的设置方法

5.2.2理解超链接中路径的分类和应用场合

5.2.3△掌握内链接、外链接的定义方法

5.3 超链接的应用

5.3.1掌握创建HTTP文件下载链接的语法

5.3.2△掌握FTP站点访问链接的基本语法及创建方法

5.3.3△掌握图像超链接的基本语法及创建方法

5.3.4 △掌握电子邮件链接的基本语法及创建方法

5.3.5△★掌握书签链接的基本语法及创建方法

5.4 浮动框架

掌握浮动框架使用语法和使用方法。

5.5 综合实例

学会运用所学知识完成Web页面设计

6 图像与多媒体文件

6.1 图像

6.1.1掌握<img>标记基本语法

6.1.2△会利用<img>属性src、width、height、border、alt、hspace、vspace、align等来修饰图像

6.2 滚动文字

6.2.1掌握滚动文字标记的基本语法

6.2.2△学会利用滚动文字标记的direction、behavior、loop、scrollamount、scrolldelay等属性来设置滚动文字的效果

6.3音频、视频及Flash文件

6.3.1★掌握<embed>标记的语法。△学会正确设置<embed>标记的src、loop、autostart、width、height等属性。

6.4 综合实例

学会运用所学知识完成Web页面设计

7 CSS基础

7.1 CSS概念

7.1.1了解CSS基本概念

7.1.2了解传统HTML的缺点

7.1.3 了解CSS的特点

7.1.4 了解CSS的优势

7.1.5 了解CSS编辑方法

7.2 使用CSS控制Web页面

7.2.1掌握CSS的基本语法

7.2.2掌握CSS选择器类型（包括标记选择器、类选择器、id选择器、伪类选择器、属性选择器等）

7.2.3△掌握CSS选择器声明类型

7.2.4△掌握CSS定义与引用方法（包括内联样式表(行内样式表)、内部样式表、外部样式表（链接外部样式表、导入外部样式表）等。）

7.3 CSS继承与层叠

理解CSS的继承与层叠区别

7.4 综合实例

学会运用所学知识完成Web页面设计

8 DIV与SPAN

8.1 △div图层

8.1.1 掌握div定义方法

8.1.2 学会设置div图层的属性

8.2 △图层嵌套与层叠

8.2.1学会使用多个<div>进行页面布局

8.2.2学会使用图层嵌套与图层层叠

8.3 div标记与span标记

理解div标记与span标记的使用区别

8.4 综合实例

学会运用所学知识完成Web页面设计

9 CSS样式属性

9.1 CSS属性中的单位

掌握CSS属性中绝对单位与相对单位

9.2 CSS字体样式

9.2.1 掌握字体font-size、font-style、font-variant、font-weight、font-family等属性的设置方法

9.2.2 掌握字体font复合属性的设置方法

9.3 CSS文本样式

掌握letter-spacing、text-indent、text-decoration、text-transform、text-align、vertical-align、line-height等排版样式属性的设置方法

9.4 CSS颜色与背景

9.4.1 掌握颜色属性的设置方法

9.4.2 掌握背景background-color、background-image、background-repeat、background-attachment、background-position等子属性的设置方法

9.4.3 掌握背景复合属性background的设置方法

9.5 CSS列表样式

掌握列表样式语法，学会使用list-style-type、list-style-image、list-style-position等属性美化列表的外观

9.6 CSS盒模型

9.6.1 理解CSS盒模型结构

9.6.2 学会设置边界margin、边框属性border、填充属性padding及其子属性的设置方法

9.7 综合实例

学会运用所学知识完成Web页面设计

10 DIV+CSS页面布局

10.1 页面布局设计

能够根据常规页面布局编写出DIV结构和定义出CSS样式

学会使用DIV+CSS实现简单Web页面布局

10.2 导航菜单设计

10.2.1 掌握一级水平导航菜单的设计方法

10.2.2 掌握二级水平导航菜单的设计方法

11 表格

11.1 表格

熟悉常用表格的标记及作用

11.2 表格标记

11.2.1 △掌握<table>标记语法及所有表格标记的语法

11.2.2 △会利用<table><tr><td>绘制简易表格

11.2.3 学会使用表格标题<caption>、<th>标记定义表格标题和表头

11.3 表格属性设置

11.3.1 掌握表格边框及边框样式属性设置方法

11.3.2 掌握表格宽度、高度的设置方法

11.3.3 掌握表格的背景颜色和背景图像的设置方法

11.3.4 掌握表格边框样式属性的设置方法

11.3.5 掌握表格单元格间距、边距的设置方法

11.3.6 掌握表格水平对齐属性的设置方法

11.4 设置表格行的属性

11.4.1 掌握表格行内容水平和垂直对齐的设置方法

11.5 设置单元格的属性

11.5.1 △掌握单元格跨行属性rowspan设置方法

11.5.2 △掌握单元格跨列属性colspan设置方法

11.6 表格嵌套

学会运用表格嵌套技术实现一般网页布局

11.7综合实例

学会运用所学知识完成Web页面设计

12 表单

12.1 表单概述

12.1.1 △掌握表单标记的基本语法结构以及表单中包含其它标记

12.2 定义域和域标题

掌握域和域标题标记的基本语法, 学会使用域和域标题标记设置表单分区

12.3 △表单信息输入

12.3.1 掌握单行文本输入框的属性设置方法

12.3.2 学会使用密码输入框设置用户密码

12.3.3掌握复选框checkbox设置及使用方法，学会使用checked属性将某项复选框设为预选项

12.3.4掌握单选按钮radio设置及使用方法，学会使用checked属性将某项单选按钮设为预选项

12.3.5掌握图像按钮的属性设置方法

12.3.6 掌握submit按钮的属性设置方法

12.3.7 掌握reset按钮的属性设置方法

12.3.8 掌握普通按钮的设置方法

12.3.9学会使用file文件选择框浏览文件

12.3.10学会hidden隐藏框使用方法

12.4 多行文本输入框

12.4.1 学会使用多行文本输入框标记在网页中设置多行文本的输入方法

12.4.2 掌握cols、rows、wrap等相关属性的设置多行文本区域大小

12.5 下拉列表框

12.5.1 掌握<select></select>标记的基本语法及size、multiple、name等属性的设置方法

12.5.2 学会使用<option>标记设置列表项，学会使用selected属性必将某一选项设为预选项

12.5.3 学会运用下拉列表框编写相关网页代码

12.6 综合实例

学会运用所学知识完成Web页面设计

13 HTML5基础与CSS3应用

13.1 HTML5概述

掌握元素、标记和属性相关概念。

13.1.1 HTML5的八个特点

13.1.2 HTML5的优势

13.1.3 理解HTML5新增结构元素及页面元素

13.1.4 了解HTML5废除的元素与属性

13.1.5 了解浏览器支持与选择

13.2 HTML5文档结构

13.2.1 ★掌握HTML5页面结构组成元素

13.2.2 △掌握HTML5新增结构元素的语法及使用方法（header、nav、section、articale、footer、aside等）

13.3 HTML5新增页面元素

13.3.1 △掌握hgroup标记语法及使用方法

13.3.2 △掌握figure标记与figcaption标记语法及使用方法

13.3.3 △掌握mark标记与time标记语法及使用方法

13.3.4 △ 掌握details标记与summary标记语法及使用方法

13.3.5 △掌握progress标记与meter标记语法及使用方法

13.3.6 △掌握input标记与datalist标记语法及使用方法

13.4 HTML5表单

13.4.1 △掌握HTML5新增的表单属性

13.4.2 ★学会使用HTML5新增的表单元素

13.4.3 ★学会使用HTML5新增的input类型

13.5 HTML5视频与音频

13.5.1 ★掌握video标记及属性的设置方法

13.5.2 ★掌握audio标记及属性的设置方法

13.6 CSS3基础应用

13.6.1 了解CSS3新特性

13.6.2 了解CSS3浏览器兼容性及解决方法

13.6.3 △掌握CSS3边框属性语法及设置方法

13.6.4 ★掌握CSS3转换transform属性语法及设置方法

13.6.5 ★掌握CSS3 过渡transition属性语法及设置方法

13.6.6 ★掌握CSS3动画animation语法及设置方法

13.6.7 掌握CSS3多列属性语法及设置方法

13.6.8掌握 CSS3文本效果属性语法及设置方法

13.7综合实例

学会运用所学知识完成Web页面设计

14 JavaScript基础

14.1 JavaScript概述

14.1.1 理解JavaScript在Web页面设计中作用及其特点

14.1.2 了解JavaScript在HTML中放置的位置

14.2 JavaScript程序

14.2.1 了解JavaScript语句类型、语句块标记

14.2.2 理解JavaScript函数的作用和基本语法

14.2.3 学会使用消息对话框实现页面交互

14.2.4 学会使用注释给JS代码增加功能说明

14.3 标识符和变量

14.3.1 掌握标识符、变量命名的规范

14.3.2 △掌握JavaScript中的基本数据类型，分别是字符串型、数值型、布尔型、Null型、undefined、object型

14.3.3. 掌握变量的定义语法及使用方法

14.3.4. 掌握常用的转义字符使用方法,例如\n、\r、\f、\uhhhh、\\、\

14.4 运算符和表达式

14.4.1 了解运算符和表达式的类型

14.4.2 △掌握算术、关系、逻辑、赋值、条件运算符的使用方法

14.4.2 △了解位、逗号、new、delet、typeof等运算符的使用方法

14.5 JavaScript程序控制结构

14.5.1 △掌握顺序结构程序的编写方法

14.5.2 △掌握if else分支结构程序的编写方法

14.5.3 △掌握ifelse if else if else多分支结构及switch多分支结构应用场合和编程方法

14.5.4 了解循环结构类型及应用场合

14.5.5 △掌握for、while、do while、forin的使用方法

14.5.6 理解break和continue语句在循环结构中的作用

14.6 JavaScript函数

14.6.1 掌握常用系统函数使用方法，如eval()、escape()、unescape()、parseFloat()、parseInt()、isNaN()等全局函数的使用方法，熟练使用对象的函数，如toString()、toFixed（n）、charAt(n)、indexOf()、lastIndexOf()、substring()等

14.6.2 △★掌握自定义函数的使用方法，并学会编程

14.6.3 学会使用return返回函数计算结果

14.6.4 理解局部变量与全局变量使用区别

14.7 综合实例

学会运用所学知识完成Web页面设计

15 JavaScript事件处理

15.1 JavaScript事件概述

15.1.1 理解JavaScript中事件的概念、事件基本类型

15.1.2 △掌握JavaScript中主要事件句柄

15.1.3 △掌握事件处理方法（定静态、动态指定）

15.1.4 △学会使用事件处理程序的返回值

15.2 表单事件

15.2.1 了解表单事件源和事件句柄

15.2.2 △掌握表单获得焦点、失去焦点事件、提交及重置事件、改变及选择事件处理程序的调用方法

15.3 鼠标事件

15.3.1了解鼠标事件源和事件句柄

15.3.2 △掌握鼠标单击、双击、移动事件处理程序的调用方法

15.4 键盘事件

15.4.1了解键盘事件源和事件句柄

15.4.2 △掌握键盘事件处理程序的调用方法

15.5 窗口事件

15.5.1 了解窗口事件源和事件句柄

15.5.2 △掌握窗口事件处理程序的调用方法

15.6 综合实例

学会运用所学知识完成Web页面设计

16 BOM与DOM模型

16.1 常用对象

16.1.1 △掌握Array对象的使用方法

16.1.2 △掌握Date对象处理和日期相关的方法

16.1.3 △掌握Math对象处理算术方面的使用方法

16.1.4 △掌握Number对象的使用方法

16.1.5 △掌握String对象的使用方法

16.1.5 了解Boolean对象的使用方法

16.2 HTML DOM

16.2.1 理解HTML DOM的节点树的基本概念

16.2.2 熟悉DOM节点树与HTML文件的映射关系

16.2.3 熟悉DOM节点类型

16.2.4 △掌握DOM节点的访问方法(通过对象的ID、Name、TagName访问节点)

16.2.5 学会使用DOM节点操作方法操作HTML页面上的元素，掌握DOM中innerText和innerHTML两个属性的区别，并学会使用；学会获取并设置指定元素的属性

16.3 BOM

16.3.1 理解BOM概念及BOM所包含的对象

16.3.2 掌握Window对象属性和常用方法，学会利用window对象进行简单编程

16.3.3 理解Navigate对象属性和常用方法，学会利用Navigate对象进行简单编程

16.3.4 理解Screen对象属性，学会利用Screen对象进行简单编程

16.3.5 理解History对象属性和常用方法，学会利用History对象进行简单编程

16.3.6 理解Location对象属性和常用方法，学会利用Location对象进行简单编

16.4 综合实例

学会运用所学知识完成Web页面设计

17 HTML5高级应用

17.1 HTML5 Web Storage

17.1.1 △掌握localStorage对象

17.1.2 △掌握sessionstorage对象

17.1.3 △学会使用浏览器端数据库IndexedDB来存储客户端数据

17.2 HTML5 Canvas画布

17.2.1 △掌握Canvas标记的语法及设置方法

17.2.2 理解Canvas坐标的概念

17.2.3 了解Canvas路径的常用方法，并学会使用绘制路径的方法

17.2.4 △掌握Canvas绘制线段的方法(moveTo()、lineTo())

17.2.5 △掌握Canvas绘制文本的常用方法

17.2.6 △掌握Canvas渐变的语法及设置方法

17.2.7 △掌握Canvas绘制图像的方法

17.3 HTML5 拖放

17.3.1 △学会设置元素为可拖放元素

17.3.2 了解常用的拖放事件和事件属性

17.3.3 了解dataTransfer对象的常用的属性

17.3.4 △掌握拖放操作实现步骤

17.4 HTML5 Web Workers

17.4.1 熟悉Web Worker的工作原理

17.4.2 △ 学会创建Web Worker文件

17.4.3 △ 学会创建Web Worker对象

17.4.4 △学会使用终止Web Worker

17.5 综合实例

学会运用所学知识完成Web页面设计

注：针对不同专业和不同的教学需要，建议该课程可设置为56、64、72课时或以上，可以在第13章、第14章、15章、16章和第17章中适当增加课时。具体建议如下：

(1)第13章可以设置6-8课时；

(2)第14章可以调整为4-6课时，

(3)第16章可调为4-8课时。

(4)第17章可调为4-6课时。

四、时间分配（以56学时为例）

分段标识

序

号

教学内容

教学环节（学时）

讲课

习题

实验

上机

课外

小计

第1章WEB前端开发技术综述

第2章HTML基础

第3章格式化文本与段落

第4章列表

第5章超链接与浮动框架

第6章图像与多媒体文件

第7章CSS基础

第8章DIV与SPAN

第9章CSS样式属性

第10章DIV+CSS页面布局

第11章表格

第12章表单

第14章JavaScript基础-1

第14章JavaScript基础-2

第15章JavaScript事件处理

第16章BOM与DOM-1

第16章BOM与DOM-2

第13章HTML5基础与CSS3应用-1

第13章HTML5基础与CSS3应用-2

第13章HTML5基础与CSS3应用-3

第17章HTML5高级应用-1

第17章HTML5高级应用-2

翻转课堂模式复习【计划外】

总计

五、课程说明

课程英文名称

Web Front End development technology/Web Client Programming

主要先修课程

计算机科学技术导论、信息技术基础

适用专业类别

软件工程、计算机科学与技术、信息管理与信息系统、网络工程等相关专业

主要教材（作者、教材名称、出版社）

(1) 储久良.Web前端开发技术-HTML5、CSS3、JavaScript(第3版).北京:清华大学出版社.2018.7

课程性质

通识基础□ 学科基础□ 专业选修√ 集中实践环节□

考核方式

平时（平时25%+实验25%）50%+期末考试50%

课程简介

《Web前端开发技术》（又名Web客户端编程）课程是软件工程、计算机科学与技术、信息管理与信息系统等专业的一门专业课程，也是其他计算机相关专业的公共基础课程，通过对Web前端三大注流开发技术学习和研究，让学生理解和掌握HTML语言、JavaScript脚本编程语言、CSS等相关知识，通过实验培养学生Web站点设计与开发的基本操作技能。

必开实验项目

序号

项目名称

实验内容提要

学时

实训1 Web前端开发环境配置与HTML基础

配置Web前端开发环境、HTML组成与标签使用、NotePad、EeditPlus编辑器使用、HTML+CSS+JavaScript混合编程初步。

实训2 格式化文本、段落与列表

学会使用文字与段落标记，通过不同样式的列表设计新闻条目、制度宣传展板和饭店菜单价目表。

实训3超链接与多媒体文件应用

运用超链接、图像、音视视频、背景音乐等标记设计简易灯箱画廊、媒体播放、简易网站导航、新生课表简介。

实训4 DIV+CSS综合运用

运用CSS样式属性和样式定义设计《中国教育网络》杂志和《京东商品导购》页面。

实训5 DIV+CSS布局规划

通过CSS Box的margin、border、padding、content这4个属性，设计常规页面布局和《2015年CERNET华东北地区年会》网站。

实训6 表格与表格页面布局

利用表格对网页进行合理布局，设计《网络主题研讨会》日程表和简化版《江苏教育电子政务网》。

实训7 表单页面设计

学会使用框架和浮动框架标记设计《中软卓成》产品介绍页面和改版的《大众创业万众创新》网。

实训9 JavaScript基础应用

掌握JavaScript基础、标识符、变量、运算符与表达式的定义，熟练使用消息对话框和自定义函数（如sum(n1,n2)）编写简易JavaScript程序。

实训10 JavaScript高级应用

利用JavaScript三种控制结构编程实现成绩百分制转五级制和计算∑N！。学会使用系统内部函数。

实训11 JavaScript事件分析

利用事件编程实现校园办公系统认证页面、鼠标动作捕获与响应，学会绑定事件处理程序。

实训12 DOM与BOM应用案例

利用DOM技术编程实现简易福利彩票投注程序和江苏福彩投注站彩票投注助手。

实训8 HTML5基础与CSS3应用

模仿设计当当网企业用户注册页面。学会使用HTML5结构元素设计页面布局。

实训8 HTML5基础与CSS3应用

学会使用CSS3特性设计H3C-新华三集团行业案例CSS3特效页面设计。设计纯CSS3偏光图像画廊。

实训13 HTML5高级应用案例

根据实训需要选择其中之二进行实训。项目分别为：Web Storage开发当当网图书评论页面、用HTML5 Canvas开发一个小游戏、用HTML5 Canvas开发一个小游戏、使用Web Worker做后台数值(算法)计算。

六、课内实验

（一）本课程实验的目的与要求

通过本课程的课堂学习和实验，使学生加深理解HTML5、CSS3、JavaScript三大语言的基本语法，掌握常用的Web页面设计与布局技术，理解并熟练应用JavaScript对象编程技术编写相关交互式的客户端程序，通过上机实验实践，培养学生Web页面布局设计和页面初步设计能力。

基本要求：

1.熟练掌握各种常用Web前端开发工具。

2.掌握HTML5+CSS3+JavaScript三合一技术设计技能。

2.深入学习各种网页布局技术，并解决常见Web页面设计问题。

4.掌握JavaScript程序的调试方法。

（二）本课程实验的项目和主要内容

序号

项目名称

学时

主要内容

类型

Web前端开发环境配置

下载并安装常用的Web前端开发工具和浏览器工具，熟悉开发软件和浏览器软件的功能

验证性

学生简易主页设计

(1)学会用记事本编写样例程序。(2)学会使用HTML标记，如head、body、title、p、hr等标记。(3)学会给HTML文件命名。

验证性

用EditPlus自定义HTML模板

(1)学会用EditPlus软件直接修改默认的HTML模板template.html。(2)使用EditPlus自定义HTML模板，加载新建HTML模板，并使新模板生效。

验证性

meta标记、body标记属性使用

(1)使用meta标记属性设置网页属性。(2)设置网页背景颜色和前景颜色。(3)学会使用自定义HTML模板编写HTML文档。

(4)学会使用各种颜色表示法设置各类颜色。

验证性

HTML、CSS、JavaScript综合编程

(1)采用CSS对h2、p标记样式进行重新定义。(2)采用script标记为页面添加JavaScript代码。(3)使用告警消息框弹出窗口与用户进行交互。

综合性

文本与段落标记的应用

(1)标题字的使用。(2)两种注释方式使用。(3)字体标记应用。(4)文本、段落标记及其属性的应用。

设计性

高校资讯新闻条目设计

(1)无序列表的应用。(2)样式表的定义与引用。(3)段落、图层标记及属性的应用。

设计性

设计制度宣传展板

(1)有序列表的应用。(2)样式表的定义与引用。(3)段落、图层等标记的应用。

设计性

制作饭店菜单价目表

(1)自定义列表应用；（2）样式表定义与使用；（3）图层与标题字的应用；（4）水平分隔线的应用。

设计性

设计简易灯箱画廊

(1)超链接的应用。(2)无序列表的使用。(3)图像标记的应用。(4)背景音乐的应用。(5)样式表定义与使用。

(6)浮动框架的定义与使用。

设计性

设计支持音频、视频播放的网页

(1)网页多媒体文件应用。(2)网页滚动文字的实现。

(3)段落与排版标记使用。(4)无序列表的使用。(5)字体font标记的使用。(6)样式表定义与使用。

设计性

设计简易网站导航

(1)超链接的定义与应用。(2)无序列表定义与使用。

(3)样式表的定义与使用。(4)段落与居中显示标记的使用。

综合性

设计新生课程简介

(1)超链接的定义与使用。(2)书签的定义与使用。(3)无序列表定义与使用。(4)HTML注释标记的使用。

设计性

设计《中国教育网络》杂志简介

(1)定义行内样式表(内嵌样式表/内联样式表)。(2)定义内部样式表。(3)导入(嵌入)外部样式表。(4)链接外部样式表。(5)无序列表的定义与应用。(6)定义列表的定义与应用。(7)标题字标记的使用。

设计性

设计《京东商品导购》页面

(1)图层的定义与样式应用。(2)图层、图像、标题字、超链接等标记CSS属性的设置。(3)内部样式表的定义与使用。(4)CSS盒模型的margin、border、padding、content等属性设置与应用。

设计性

DIV+CSS页面布局设计

(1)DIV创建与DIV嵌套。(2)DIV属性的设置与应用。(3)DIV样式引用方法。(4)外部样式表的定义与引用。

设计《2015年CERNET华东北地区年会》网站

(1)使用DIV+CSS布局技术年会网站页面布局。(2)设计网站首页和二级导航页面的菜单。(3)定义图层和图层嵌套。(4)定义并引用内部样式表、外部样式表。

综合性

设计《网络主题研讨会》日程表

(1)设置表格的行和列。(2)设置单元格合并(跨行rowspan和跨列colspan属性)。(3)设置表格的行tr属性。(4)设置表格单元格td属性。(5)设置表格的背景颜色与背景图像。(6)设置图层的样式属性。

设计性

设计简化版江苏教育电子政务网

(1)设置表格属性及表格行属性。(2)设置表格单元格跨列属性。(3)设置表格嵌套。(4)设置超链接属性。

(5)定义内部样式表。

综合性

设计科技工作者建言页面

(1)图层与表格混合布局。(2)表单和表单控件的综合运用。(3)样式表的应用。

综合性

设计《大学生暑期社会实践调查问卷》

(1)表单与表格嵌套应用。(2)表单控件属性设置。(3)使用表格和表格嵌套进行页面精确布局。(4)内部样式表定义与应用。

综合性

改变新闻网页中字号

(1)图层创建与应用。(2)内部样式表定义及应用。(3)自定义函数的定义与应用。(4)超链接定义与应用。

超链接实现页面字号大小变化

设计性

计算任意区间内连续自然数的累加和

(1)学会使用JavaScript编写实现计算任意区间内连续自然数的累加和sum(n1,n2)、显示累加和show()等自定义函数。(2)学会使用事件调用JavaScript函数。(3)域和域标题定义与应用。(4)内部样式表定义与应用。(5)表单、表单控件定义与设置。

设计性

消息对话框综合应用

(1) JavaScript自定义函数编写。(2)学会使用事件调用JavaScript函数。(3)域和域标题定义与应用。(4)内部样式表定义与应用。(5)表单、表单控件定义与设置。

设计性

成绩百分制转换为五级制

(1)设置图层的属性。(2)熟悉两种多分支结构。(3)熟悉JavaScript脚本编程。(4)学会定义JavaScript等级转换函数conversion(score)。

设计性

计算∑N！

(1)内部样式表定义与应用。(2)JavaScript放置与运行方式。(3)域及域标题定义与应用。(4)For循环结构编程应用。

设计性

系统内部函数使用

(1)内部样式表定义与应用。(2)脚本放置与编程。(3)JavaScript常用系统内部函数的使用。

验证性

设计校园办公系统认证页面

(1)图层创建与属性设置。(2)分支结构在程序中的运用。(3)JavaScript自定义函数的编写。(4)JavaScript变量声明与赋值。(5)HTML文档对象的获取与对象属性获取与设置。(6)事件处理程序的绑定。(7)表格与表单混合布局。

综合性

鼠标动作捕获与响应

(1)内部样式表定义与应用。(2)JavaScript放置与运行方式。(3)事件句柄和事件处理程序绑定的方式。

(4)表单与表单控件的应用。(5)页面对象的属性设置与获取。

设计性

设计简易福彩投注程序

(1)JavaScript自定义函数定义与应用。(2)多种事件指定方式使用。(3)图层的创建与属性设置。(4)循环结构和循环环嵌套结构编程。(5)JavaScript对象的属性和方法实际应用。

综合性

设计江苏福彩投注站彩票投注助手

(1)内部样式表定义与应用。(2)JavaScript自定义函数编程。(3)事件句柄和事件处理程序绑定。(4)DOM节点操作方法的应用（在列表中动态添加选项）。(5)表格与表单混合布局应用。

综合性

当当网企业用户注册页面设计

(1)HTML5新增表单类型(email、url等)的应用。(2)HTML5新增表单属性的应用。(3)表格的创建与属性设置。(4)HTML5新增结构元素的应用。(5)表单元素的验证。(6)自定义验证码生成函数与调用。

综合性

HTML5结构元素页面布局设计

(1)HTML5新增结构元素的应用。(2)结构元素样式定义。(3)图像标记的应用。(4)超链接标记的应用。

(5)结构元素浮动属性的应用。

设计性

H3C-新华三集团行业案例CSS3特效页面设计

(1)HTML5新增结构元素的应用。(2)结构元素样式定义。(3)采用无序列表设计导航栏。(4)超链接和图像标记的应用。(5)CSS3过渡和2D转换的应用。

设计性

纯CSS3偏光图像画廊

(1)HTML5新增页面元素header、hgroup标记的应用。(2)结构元素样式定义。(3)无序列表、超链接、图像标记的应用。(4)CSS3转换transform属性的应用。(5)CSS3 box-shadow属性的应用。

设计性

Web Storage开发当当网图书评论页面

（4选2）

(1)localStorage和sessionStorage对象的常用方法的应用。(2)HTML5新增结构元素的使用。(3)JavaScript函数的定义与使用。(4)循环结构遍历Web Storage对象。(5)JSON对象与字符串型对象的转换方法。(6)Date对象的使用。(7)样式表与定义与使用。

设计性

用HTML5 Canvas开发一个小游戏

(1)HTML5 Canvas新标记的应用。(2)JavaScript函数的定义与使用。(3)DOM节点访问操作。(4)动态分派对象事件句柄。(5)学会使用requestAnimationFrame()加载动画。 (6)学会使用Canvas绘制图像。 (7)学会使用Canvas绘制文本。

综合性

用HTML5拖放开发购物车

(1)HTML5拖拽新特性的应用。(2)JavaScript函数的定义与使用。(3)DOM节点访问操作。(4)动态分派对象事件句柄。(5)学会使用dataTransfer对象来设置和获取数据。(6)学会使用拖拽事件(dragstart、drop等)编写简单的应用程序。

综合性

使用Web Worker做后台数值（算法）计算

(1)创建Web Worker对象。(2)创建web worker文件。(3)定义计算两个数最小公倍数和最大公约数的函数。(4)主线程与工作线程之间通信(发送和接收数据)。

综合性

课程实验成果展示网站

课外

以个人每次实验项目结果为素材，使用各种页面布局技术，构建能够充分展示自己实验成果的网站

综合性

（三）实验说明

课程总学分

实验学时数

实验项目数

考核方式

日常考核√ 操作技能考核□ 卷面考核□ 提交实验结果√ 面试□

适用专业与年级：计算机科学与技术、软件工程、信息管理与信息系统、网络工程相关专业1-3年级

实验教材及参考书：

储久良. Web前端开发技术实验与实践-HTML5、CSS3、JavaScript（第3版）.北京: 清华大学出版社.2018.7。

七、课程实施计划

序号

教学

方式

教学内容

作业要求

教学目标

课堂讲课

第1章 Web前端开发技术综述

1.1 Web概述

1.2 Web前端开发工程师的职业要求

1.3 Web前端开发技术

1.4 Web前端开发工具

1.5 浏览器工具

1.6 综合实例

第2章 HTML基础

2.1 HTML文档结构

2.2 头部head

2.3 主体body

2.4 HTML基本语法

2.5 注释

2.6 HTML文档编写规范

2.7HTML文档类型

2.8 综合实例

习题1、

习题 2

ü 了解了解Web发展历史。

ü 了解Web前端开发工程师的职业需求。

ü 掌握Web网站相关的基本概念。

ü 理解各种Web前端开发技术及其在Web网页中的作用。

ü 熟悉各种常用的Web前端开发工具、浏览器工具，并学会使用主流开发工具。

ü 掌握HTML文档的基本结构。

ü 理解标记类型、标记语法。

ü 学会body标记属性的设置方法。

ü 学会给网页添加注释。

ü 理解元信息meta标记的作用。

ü 了解HTML文档类型。

上机实训

实训项目1-5

上机

练习

4题

1.了解Web前端开发工程师岗位需求和技术要求；2.了解Web前端开发技术基本组成；3.掌握HTML文档结构，学会编写简单HTML程序；4.学会安装并使用常用Web前端开发工具（NotePad、EditPlus、Dreamweaver等）。

课堂讲课

第3章格式化文本与段落

3.1 Web页面初步设计

3.2 格式化文本标记

3.3 段落与排版标记

3.4 综合实例

第4章列表

4.1 列表概述

4.2 无序列表

4.3 有序列表

4.4 列表嵌套

4.5 定义列表

4.6 综合实例

习题

3、习题4

ü 掌握标题字（h1～h6）标记语法及属性语法。

ü 理解文本格式化标记类型与作用，并学会使用各种样式。

ü 学会使用字体font标记。

ü 学会使用段落与排版标记。

ü 学会使用各类格式化标记设计简易的Web页面。

ü 了解列表的类型。

ü 掌握无序列表、有序列表、定义列表标记语法及属性语法。

ü 学会使用无序、有序及定义列表设计Web网页。

ü 学会使用嵌套列表设计小型网站首页。

上机实训

实训项目6-9

上机

练习

4题

1.掌握标题字、文本标记、段落与排版标记的语法。2.了解列表基本类型，掌握无序列表、有序列表、定义列表的语法并学会使用。3.掌握文字段落排版的基本规则。4.能够完成文本型Web网面的设计。

课堂讲课

第5章超链接与浮动框架

5.1 超链接概述

5.2 超链接语法、路径及分类

5.3 超链接的应用

5.4 浮动框架

5.4 综合实例

第6章图像与多媒体文件

6.1 图像

6.2 滚动文字

6.3音频、视频及Flash文件

6.4 综合实例

习题

5、习题6

ü 掌握超链接的基本标记语法和属性语法。

ü 理解超链接分类、路径、书签等概念。

ü 学会使用超链接实现文件下载。

ü 学会使用超链接实现FTP下载。

ü 学会使用超链接实现电子邮件链接。

ü 学会使用超链接实现图片链接。

ü 学会使用超链接制作书签。

ü 学会使用浮动框架实现内嵌页面的显示。

ü 掌握图像img标记语法及属性设置方法。

ü 学会设置图像热区链接。

ü 掌握滚动文字marquee标记语法及属性设置方法。

ü 掌握嵌入多媒体文件embed标记语法及属性设置方法。

ü 学会采用超链接插入动画、音频和视频类等多媒体文件。

上机实训

实训项目10-13

上机

练习

5题

1.掌握超链接的标记语法、属性语法，学会为网页添加各种超链接。2.掌握书签链接定义与语法，学会使用书签链接设计Web页面。3.掌握img和marquee标记语法与属性的设置方法。4.掌握bgsound和embed标记语法与属性的设置方法，为页面添加多媒体文件。

课堂讲课

第7章 CSS基础

7.1 CSS概念

7.2 使用CSS控制Web页面

7.3 CSS继承与层叠

7.4 综合实例

第8章 DIV与SPAN

8.1 DIV图层

8.2 图层嵌套与层叠

8.3 div标记与span标记

8.4 综合实例

习题

7、习题8

ü 了解CSS的概念、特点。

ü 掌握CSS基本语法、选择器分类与声明的结构。

ü 掌握CSS的定义及引用的方式。

ü 理解CSS继承与层叠的含义。

ü 掌握DIV标记的基本用法、常用属性。

ü 理解DIV嵌套与层叠的含义。

ü 掌握SPAN标记的语法，灵活使用SPAN标记。

ü 掌握DIV与SPAN标记在使用上的差异。

ü 学会使用DIV+CSS进行和简易页面布局。

上机实训

实训项目14-15

上机

练习

4题

1.掌握CSS基本概念、CSS类型及4种CSS样式定义的方法。2.掌握CSS中字体、排版、颜色、背景、列表等属性设置。3.掌握DIV和SPAN标记语法及标记语法，学会使用相关CSS属性来定义样式。

课堂讲课

第9章 CSS 样式属性

9.1 CSS属性值中的单位

9.2 CSS字体样式

9.3 CSS文本样式

9.4 CSS颜色与背景

9.5 CSS列表样式

9.6 CSS盒模型

9.7 综合实例

第10章 DIV+CSS页面布局

10.1 页面布局设计

10.2导航菜单设计

10.3综合实例

习题9、习题10

ü 熟悉CSS样式设置中常用的单位。

ü 掌握控制文字、文本、背景、色彩、列表等样式的属性及设置方法。

ü 理解CSS盒子模型。

ü 掌握边框、边界、填充及内容等属性及设置方法。

ü 熟练地使用DIV标记的CSS各类属性。

ü 掌握CSS定义与引用方法，学会使用外部样式表定义页面样式。

ü 熟悉各类常见的页面布局类型，能够写出相应的DIV结构及CSS规则。

ü 学会使用DIV+CSS进行页面布局，能够编写HTML代码和CSS文件。

上机实训

实训项目16-17

上机

练习

4题

1.熟悉常见网页布局结构类型。2.能够对主流商业网站布局结构进行分析。3.综合运用DIV+CSS对小型网站页面进行布局规划、编写代码实现布局效果。

课堂讲课

第11章表格

11.1 表格

11.2 表格标记

11.3 表格属性设置

11.4 设置表格行的属性

11.5 设置单元格的属性

11.6 表格嵌套

11.7 综合实例

第12章表单

12.1表单概述

12.2定义域和域标题

12.3 表单信息输入

12.4 多行文本输入框

12.5 下拉列表框

12.6 综合实例

习题

11、习题12

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

ü 掌握表格行标记的属性及设置方法。

ü 掌握表格单元格的跨行与跨列属性的设置方法。

ü 掌握表格的嵌套方法。

ü 学会在表格中嵌入各种页面元素。

ü 学会使用表格进行简易网页布局。

ü 理解Web网页中表单的概念与作用。

ü 掌握表单结构语法及属性语法。

ü 掌握表单控件(元素)标记语法及属性语法。

ü 掌握域和域标题标记语法。

ü 学会综合运用表单及表单控件(元素)设计Web网页。

上机实训

实训项目18-19

上机

练习

4题

1.掌握设计表格的各种标记及其属性语法。2.掌握表格行标记的属性及设置方法。3.掌握表格单元格的各种属性及设置方法。4.学会利用表格进行Web页面布局设计。

课堂讲课

【至少4个课时，根据需要可适当增加2-4课时】

第14章 JavaScript基础

14.1 JavaScript概述

14.2 JavaScript程序

14.3 标识符和变量

14.4 运算符和表达式

习题

14（部分）

ü 理解JavaScript程序的概念与作用。

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

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

上机实训

实训项目20-21

上机

练习

1题

1.理解表单的概念，熟练掌握表单创建方法。2.掌握表单相关属性设置。3.掌握表单输入、多行文本输入、列表框等表单控件的属性及设置方法。4.学会使用fieldset和legend标记来分组表单控件。5.学会设计用户登录、用户注册、网上调查问卷等表单页面。

课堂讲课

14.5 JavaScript程序控制结构

14.6 JavaScript函数

14.7 综合实例

习题14（部分）

ü 掌握JavaScript中顺序、分支、循环三种程序控制结构语法。

ü 掌握JavaScript函数的定义方法，并学会使用。

ü 学会综合运用JavaScript设计具有动态、交互功能的网页。

上机实训

实训项目26-28

上机

练习

1题

1.理解JavaScript脚本放置与运行的方法。2.掌握JavaScript基本构成和基础语法。3.掌握自定义函数定义与引用。

课堂讲课

【至少安排1个课时，根据需要可安排2课时】

第15章 JavaScript事件处理

15.1 JavaScript事件概述

15.2 表单事件

15.3 鼠标事件

15.4 键盘事件

15.5 窗口事件

15.6 综合实例

第16章 DOM与BOM模型

16.1 常用对象

习题

15、习题16

ü 了解JavaScript事件类型。

ü 理解事件的概念。

ü 理解事件句柄与事件处理代码相关联的方式。

ü 学会利用表单的提交及重置事件对表单的数据进行校验。

ü 理解鼠标事件中的鼠标单击及鼠标移动事件。

ü 掌握常用的键盘及窗口事件。

ü 学会使用JavaScript内置对象的常用属性及方法。

上机实训

实训项目29-31

上机

练习

1题

1.掌握JavaScript分支结构语法，并学会使用分支结构编程。2.掌握JavaScript循环结构语法，学会使用多种循环编写应用程序。3.掌握多分支if...else结构与switch结构互换编程。

课堂讲课

16.2 HTML DOM

16.3 BOM

16.4 综合实例

【根据课时安排可以选讲】

习题

ü 理解文档对象模型的节点树的构建及节点类型的划分。

ü 学会使用document对象常用方法来设计动态效果的网页。

ü 理解浏览器对象模型的各对象的层次关系。

ü 学会使用window对象的定时器及对话框方法。

ü 了解navigator、screen、history、location等对象的属性和方法。

上机实训

实训项目32-33

上机

练习

2题

1.掌握事件、事件源、事件句柄、事件代码的概念，理解它们之间的关系。2.学会指定事件处理程序的方法。3.学会编写简单的事件处理程序。

课堂讲课

13 HTML5基础与CSS3应用

13.1 HTML5概述

13.2 HTML5文档结构

13.3 HTML5新增页面元素

习题13

ü 熟悉掌握HTML5新特性。

ü 掌握HTML5页面结构。

ü 学会使用HTML5新增元素和新增属性。

ü 掌握HTML5新增表单元素及新增属性的设置方法。

上机实训

实训项目34-35

上机

练习

3题

1.理解DOM树型结构和节点的概念，学会利用DOM进行简单交互式编程。2.了解BOM结构图，学会利用window对象进行简单交互式编程。3.理解JavaScript的对象类型，掌握Array、String、Date、Number、Math等对象的常用属性和方法。

课堂讲课

13.3 HTML5新增页面元素

13.4 HTML5表单

13.5 HTML5视频与音频

习题13

ü 掌握HTML5新增表单元素及新增属性的设置方法。

ü 学会使用HTML5的Audio和Video媒体元素。

ü 学会HTML5本地存储开发简易Web应用。

上机实训

实训项目22-23

上机

练习

3题

1．HTML5新增表单类型(email、url等)的应用。2.HTML5新增表单属性的应用。

3.表格的创建与属性设置。4.HTML5新增结构元素的应用。5.表单元素的验证。6.自定义验证码生成函数与调用。7.结构元素样式定义。8.图像标记的应用。9.超链接标记的应用。10.结构元素浮动属性的应用。

课堂讲课

13.6 CSS3基础应用

13.7综合实例

17 HTML5高级应用

17.1 HTML5 Web Storage

习题13、习题17

ü 学会使用CSS3的转换、过渡和动画等特性设计页面的动态效果。

ü 学会设置与应用CSS3文本效果及多列等属性。

ü 学会使用Web本地存储对象解决客户端数据存储问题。

上机实训

实训项目24-25

上机

练习

1题

1.HTML5新增结构元素的应用。2.结构元素样式定义。3.超链接和图像标记的应用。4.CSS3过渡和2D转换的应用。5.无序列表、超链接、图像标记的应用。6.CSS3转换transform属性的应用。7.CSS3 box-shadow属性的应用。

课堂讲课

【IndexedDB可根据需要选讲】

17.2 HTML5 Canvas画布

17.3 HTML5 拖放

17.4HTML5 Web Workers

17.5 综合实例

习题17

ü 掌握Canvas基本语法和学会绘制各种图形、文字及图像。

ü 学会使用Web拖放技术解决简单实际应用问题。

ü 理解Web Worker多线程工作原理，学会使用多线程解决简单的实际应用。

上机实训

实训项目36-39（4选2）

上机

练习

1题

根据需要选择项目实训，具体要求见六、课内实验。

课外实训

实训项目40

综合习题1题

综合运用所学知识，构建一个网站，集中展示一下，一个学期的实训成果。

提供PPT课件，源码，答案，视频，6套试卷及答案，教学大纲，额外的课程资源。

30小时全程语言讲解。

内容新颖全面：紧贴Web前端开发工程师的岗位的需求，精心策划教学内容。全面讲解HTML、CSS、DIV、JavaScript、DOM与BOM、浏览器兼容性测试、网站调试与发布等内容。

实例真实丰富：从商业网站精选实例，每章再遴选一个经典的综合实例，将本章和相邻章节的知识融会贯通。

讲解图文并茂：使用大量图表、图片进行归纳与分析，以提高教学效率。

代码规范统一：提供风格统一、格式规范的源代码，培养读者良好的编程习惯。

点赞(0) 打赏

本文分类：运维培训
本文标签：无
浏览次数：2050 次浏览
发布日期：2023-06-15 09:21:19
本文链接：https://www.eruiyi.cn/cms/yunweipeixun/605.html

上一篇 > Web前端框架：是解药还是毒药？
下一篇 > 前端工程师手中的Sublime Text

评论列表共有 0 条评论

暂无评论

发表评论取消回复

热门产品
查看更多

短视频/直播电商部门岗位职责及绩效考核指标管理实施办法

在线药店设计书（范文）

x升电子有限公司商务网站项目设计书

必通网上考试书店项目设计书(范文)

（有详细评估的范文）E-WORK网络实习平台及线下实习教育

（范文）网上内衣店项目设计书

**鞋业公司开拓电子商务和校园市场营销策划方案

视频伪原创处理：短视频搬运处理方法步骤及图文视频深度创作处理

历史上的今天：04月20日