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

【 案例展示 】

学习任务

重点、难点

突破方法

1. ”人才招聘”页面的设计。

1. 表单的使用。

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

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

知识目标

能力目标

素质目标

1.掌握常见表单元素；

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

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

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

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

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

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

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

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

2.具有信息安全意识；

3.具有实践动手能力；

4.具有团队协作精神。

课程思政——信息安全

【课前导学区】

   1、发布任务

         导学任务单

   2、辅学资源

         电子讲义

         电子课件

         教学设计

【 视频讲解】

知识储备及案例实现

知识储备

1、表单input元素新属性1

2、表单input元素新属性2

3、表单input元素新属性3

4、表单input元素新属性4

任务1 招聘简章页面实现

1、招聘简章页面实现

2、内联框架实现

3、文字动画效果

【 课后自测区 】

自评自测

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

   1、 材料阅读                                           【简介】信息安全意识教育。

   信息安全案例展示1

【 资料下载 】

单元设计

教学设计11-“招聘简章”页面实现 .pdf

课程教案

教案11-“招聘简章”页面实现 .pdf

演示文稿

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

任务工单

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

素材下载

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

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

    项目4 图片素材下载.rar

课内同步项目

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

课外扩展项目

   HTML5表单设计——测试

练习题

    1、练习1

疑难问题解答

     1、HTML5的表单使用技巧有哪些？