本项目我们首先进行“招聘简章”页面的设计，通过本页面的设计，我们熟悉HTML5表单元素的使用，熟练使用表单元素进行页面规划布局，并能进行表单提交前的表单验证效果实现。

【 案例展示 】

学习任务

重点、难点

突破方法

1. ”工作岗位”页面的设计。

1. 表单的使用。

2. 教学难点：表单的验证。

采用翻转课堂、项目导入的教学模式，采用分组讨论、案例教学、演示动画等教学方法，运用在线教学平台。

知识目标

能力目标

素质目标

1.掌握常见表单元素；

2.掌握HTML5中新添加的表单元素；

3.熟悉表单提交的不同方式；

4.了解表单验证的相关知识点。

1.能够熟练使用已有的模板进行制作页面改造页面；

2.能灵活应用表单元素进行页面布局；

3.能利用JS实现简单交互效果；

4.能进行“人才招聘”页面的代码书写。

1.具有计划、组织和协调能力；

2.具有信息安全意识；

3.具有实践动手能力；

4.具有团队协作精神。

课程思政——信息安全

【课前导学区】

   1、发布任务

         导学任务单

   2、辅学资源

         电子讲义

         电子课件

         教学设计

【 视频讲解】

知识储备及案例实现

任务2 “工作岗位”页面实现

1、form表单的设计

2、表单整体样式

3、表单标签元素样式

4、input框统一风格

5、多选框样式

6、按钮样式

表单验证

1、JavaScript表单对象

2、JavaScript表单验证实例

3、JavaScript城市选择实例

4、JavaScript一些位置属性

【 课后自测区 】

自评自测

     扫描二维码回答问题                                   扫描二维码自测

    1、 材料阅读                                         【简介】信息安全意识案例展示。

   信息安全教育案例展示2

【 资料下载 】

单元设计

教学设计12-“工作岗位”页面实现.pdf

课程教案

 教案12-“工作岗位”页面实现.pdf

演示文稿

 项目4 公司网站“人才招聘“页面设计.pptx

任务工单

公司网站“人才招聘”的页面设计

素材下载

     1、区块划分前基本的css文件.rar

    项目4 移动端图片素材下载.rar

    项目4 图片素材下载.rar

课内同步项目

   “人才招聘”移动端页面设计

课外扩展项目

      HTML5表单设计

       style07.css

       自动完成功能

练习题

   1、练习1

疑难问题解答

    1、HTML5的优缺点及特性有哪些？