标签

代码略

心得

作业

练习本次实验内容，综合运用文本控制标签编写网页

备注

江西工业职业技术学院教案

课程名称

Web前端开发

授课时间

第2周第1次

授课章节

第二章HTML5基础

教学目的

知识目标

熟悉掌握常用的标签及属性

技能目标

熟练使用常用标签编写网页

教学重点

HTML常用标签及属性

教学难点

路径的表示方法

教学方法

案例讲解法，演示法

教具

计算机，多媒体

教学过程设计

（含时间分配）

1.1图片标签

1.1.1图片的格式与分辨率

GIF

1.1.2网页中使用最广泛的图片格式JPEG

PNG

1.2嵌入图片

1.2.1规范的图片标签语法格式：

1.图片的源文件src

标签的常用属性2.设置图片的提示文字alt

3.设置图片的宽度width和高度height

1.3路径的表示方法：

绝对路径和相对路径

创建超链接

创建图片链接

1.4超链接标签创建电子邮件链接

创建下载链接

链接到同一页面的不同位置

1.5表格标签

1.5.1创建表格

1.5.2设置属性

1.6元标签

语法格式：

1.7link标签

语法格式：

心得

作业

1.熟悉标签，并应用到网页制作中

备注

江西工业职业技术学院教案

课程名称

Web前端开发

授课时间

第2周第2次

授课章节

实验二使用常用标签制作页面

教学目的

知识目标

熟悉掌握常用的标签及属性

技能目标

熟练使用常用标签编写网页

教学重点

标签及属性的使用

教学难点

路径的表示方法

教学方法

案例讲解法，演示法

教具

计算机，多媒体

教学过程设计

（含时间分配）

实验内容1：

制作一个包含文字和图片的简单页面，要求使用表格实现效果

部分代码：

名茶欣赏

绿茶

红茶

乌龙茶

绿茶白茶

实验内容2：

制作三个页面，其中主页面带导航，并将其他两个页面链接到主页面上，要求能够正确使用标签

部分代码：

主页

茶叶分类

注册

心得

作业

完成课后练习题

备注

江西工业职业技术学院教案

课程名称

Web前端开发

授课时间

第3周第1次

授课章节

第三章页面元素和属性

教学目的

知识目标

掌握HTML5新增的元素和属性

技能目标

会创建简单的HTML5页面

教学重点

HTML5新增的元素和属性

教学难点

HTML5新增的元素和属性

教学方法

案例讲解法，演示法

教具

计算机，多媒体

教学过程设计

（含时间分配）

1.1结构元素

1.1.1header元素

header元素的介绍，应用举例

1.1.2article元素

article元素的介绍，应用举例

1.1.3aside元素

aside元素的介绍，应用举例

1.1.4footer元素

footer元素的介绍，应用举例

1.1.5figure和figcaption元素

figure和figcaption元素的介绍，应用举例

1.2页面结点

1.2.1section元素

section元素的介绍，应用举例

1.2.2nav元素

nav元素的介绍，应用举例

1.2.3address元素

address元素的介绍，应用举例

1.3交互元素

1.3.1progress元素

progress元素的介绍，应用举例

1.3.2meter元素

meter元素的介绍，应用举例

1.3.3details和summary元素

details元素的介绍，应用举例

1.3.4menu元素

menu元素的介绍，应用举例

1.3.5command元素

command元素的介绍，应用举例

心得

作业

课后练习

备注

江西工业职业技术学院教案

课程名称

Web前端开发

授课时间

第3周第2次

授课章节

实验三使用结构元素、页面节点和交互元素编写网页

教学目的

知识目标

熟悉结构元素、页面节点和交互元素

技能目标

能够使用结构元素、页面节点和交互元素编写网页

教学重点

教学难点

教学方法

案例讲解法，演示法

教具

计算机

教学过程设计

（含时间分配）

实验内容1：

使用结构元素编写网页

1.1创建步骤如下

①将光标放置在需要创建元素的位置上；

②输入相应的标签，如：

简单的结构的页面代码如下：

（部分代码）

实验内容2：

使用页面节点元素编写网页

2.1使用section元素定义文档中的节，语法结构如下：

2.2使用nav元素创建页面导航链接组，语法结构如下：

实验内容3：

使用交互元素制作网页

3.1progress元素制作进度，语法格式如下：

3.2progress元素实例，部分代码：

下载进度：

3.3meter元素语法格式：

…

3.4meter元素实例，部分代码：

显示度量值：

35/100

60%

InternetExplorer不支持meter标签。

心得

作业

课后练习

备注

江西工业职业技术学院教案

课程名称

Web前端开发

授课时间

第4周第1次

授课章节

第三章页面元素和属性

教学目的

知识目标

掌握HTML5新增的元素和属性

技能目标

会创建简单的HTML5页面

教学重点

HTML5新增的元素和属性

教学难点

HTML5新增的元素和属性

教学方法

案例讲解法，演示法

教具

计算机，多媒体

教学过程设计

（含时间分配）

1.1文本层次语义元素

1.1.1cite元素

cite元素的介绍

1.1.2mark元素

mark元素的介绍，应用举例

1.1.3time元素

time元素的介绍，常用属性，应用举例

1.2分组元素

1.2.1ul元素

ul元素的介绍，应用举例

1.2.2ol元素

ol元素的介绍，应用举例

1.2.3dl元素

dl元素的介绍，应用举例

1.3全局属性

1.3.1hidden属性

hidden属性的介绍，应用举例

1.3.2spellcheck属性

spellcheck属性的介绍，应用举例

1.3.3contenditable属性

contenditable属性的介绍，应用举例

1.3.4contextmenu属性

contextmenu属性的介绍，应用举例

心得

作业

课后练习

备注

江西工业职业技术学院教案

课程名称

Web前端开发

授课时间

第4周第2次

授课章节

实验四使用文本层次元素、分组元素和全局属性编写网页

教学目的

知识目标

理解文本层次元素、分组元素和全局属性

技能目标

能够运用文本层次元素、分组元素和全局属性编写网页

教学重点

教学难点

教学方法

案例讲解法，演示法

教具

计算机

教学过程设计

（含时间分配）

实验内容1：

使用文本层次语义元素制作网页

1.1使用mark元素制作带有记号的文本，语法格式如下：

…

mark元素实例，代码如下：

今日日程提醒：

下午三点1402开会

1.2time元素制作日期，语法格式如下：

…

time元素实例，代码如下：

实验内容2：

使用分组元素制作网页

2.1使用ul元素制作项目列表，语法格式如下：

• 无序列表

…

部分代码如下：

• 首页
• 博客
• 设计
• 相册
• 论坛
• 关于

实验内容3：

使用全局属性

3.1使用hidden属性

实例代码如下：

这是一个隐藏的段落

心得

作业

课后练习

备注

江西工业职业技术学院教案

课程名称

Web前端开发

授课时间

第5周第1次

授课章节

第四章构建Web表单

教学目的

知识目标

理解表单的基本组成部分

理解HTML5新曾的控件及其属性

技能目标

能够熟练构建表单

教学重点

表单控件

教学难点

教学方法

案例讲解法，演示法

教具

计算机，多媒体

教学过程设计

（含时间分配）

1.HTML5对表单的改进

1.1新增控件类型

1.2新增表单属性

2.表单结构

2.1表单的基本语法格式：

3.输入控件

3.1创建文本框，其格式如下：

3.2创建密码框，其格式如下：

3.3创建单选按钮，其格式如下：

3.4创建复选框按钮，其格式如下：

3.5创建文本区域，其格式如下：

3.6创建选择框，其格式如下：

…

…

心得

作业

制作一个关于兴趣爱好的调查表

备注

江西工业职业技术学院教案

课程名称

Web前端开发

授课时间

第5周第2次

授课章节

第四章构建Web表单

教学目的

知识目标

理解处理表单

技能目标

会对表单进行验证

教学重点

处理表单

教学难点

教学方法

案例讲解法，演示法

教具

计算机，多媒体

教学过程设计

（含时间分配）

1.1对表单进行验证，其语法格式如下：

其中regexp规定用于验证输入字段的模式

pattern验证，代码如下：

略

1.2为表单组件添加说明标签

使用labe描述表单字段用途

1.3表单提交方式的选择

在表单的结构部分已经了解到表单的提交方式method有两种可供选择，即GET或者POST，详细见课本P65表4-3

1.4表单综合实例

通过制作一个会员申请表页面，掌握表单的制作方法，具体代码略。

心得

作业

课后练习

备注

江西工业职业技术学院教案

课程名称

Web前端开发

授课时间

第6周第1次

授课章节

第五章音频与视频

教学目的

知识目标

认识audio元素和video元素

理解audio元素和video元素提供的方法、属性和事件

技能目标

会使用audio元素和video元素

教学重点

audio元素和video元素的语法

教学难点

audio元素和video元素的方法、属性和事件

教学方法

案例讲解法，演示法

教具

计算机，多媒体

教学过程设计

（含时间分配）

1.1关于解码器

1.1.1音频编解码器

1.1.2视频编解码器

1.2在HTML5中播放音频

1.2.1认识audio元素，语法结构如下：

1.2.2播放音频

为网页添加音乐文件，应用举例

1.3在HTML5中播放视频，其语法结构如下：

1.3.2播放视频，在网页中播放视频文件，应用举例

1.4音频与视频相关属性、方法与事件

1.4.1音频与视频相关属性

1.4.2音频与视频相关方法

1.4.3音频与视频相关事件

例5-4利用按钮事件控制视频播放，代码略。

心得

作业

课后练习

备注

江西工业职业技术学院教案

课程名称

Web前端开发

授课时间

第6周第2次

授课章节

实验五HTML部分综合案例—茶文化网站的制作

教学目的

知识目标

技能目标

能够利用学过的知识制作综合网站

教学重点

教学难点

表单的实现

教学方法

案例讲解法，演示法

教具

计算机

教学过程设计

（含时间分配）

1.1设计分析

作为一个茶文化网站，其页面应该简单明了，给人清新的感觉。

首先整体设计各部分内容如下：

（1）页头部分主要放置网站logo信息和导航菜单等，logo可以是一张图片或者文件信息等

（2）页头下面将主页分为左右两部分，左侧是网站简单介绍及名茶欣赏图片等，右侧为茶道的图、文、视频等具体内容介绍。

（3）页面底部是网站版权信息

1.2模块组成

在制作网站的时候，可以将整个网站划分为三大模块，即上、中、下。

（1）logo与导航菜单；

（2）主题内容；（3）注册页面的实现

心得

作业

课后练习

备注

江西工业职业技术学院教案

课程名称

Web前端开发

授课时间

第7周第1次

授课章节

第六章CSS概述第七章CSS3语法

教学目的

知识目标

理解CSS概念及其发展

掌握CSS的语法

技能目标

教学重点

CSS语法

教学难点

教学方法

案例讲解法，演示法

教具

计算机，多媒体

教学过程设计

（含时间分配）

1.CSS概述

　　1.1为什么要使用CSS样式

　　1.1.1什么是CSS样式

　　1.1.2CSS与DIV之缘

　　1.2CSS样式的发展

　　　1.2.1CSS1.0和2.0概述

1.2.2CSS的出现

1.3CSS3的前景展望

1.3.1CSS3的应用范围

1.3.2当前支持CSS3的浏览器

2.CSS3语法

2.1CSS3的语法基础

　　1.1.1CSS3的基本语法规则：

CSS样式由两部分组成：

选择器和声明块，其中选择器和声明块之间由冒号隔开，声明块被一对大括号括起来，即：

Selector{Declaration1；Declaration2；…DeclarationN；}

多个声明需要使用分号隔开。

1.1.2为样式规则添加注释

　　2.2CSS3选择器

（1）通用选择器，语法格式如下：

*{属性:

属性值；}

（2）标签选择器，语法格式如下：

标签名{属性:

属性值；}

（3）类选择器，语法格式如下：

.类选择器名称{属性:

属性值；}

（4）id选择器，语法格式如下：

#id选择器名称{属性:

属性值；}

（5）伪类选择器

CSS伪类用于向某些选择器添加特殊的效果。

（6）群组选择器

当几个元素样式属性一样时，可