1
2
3
4
5
6

任务2 “员工展示”页面实现

发布时间:2023-11-21 11:08   发布人:袁安翠   浏览次数:122


 项目5:公司网站“员工风采”页面设计 】

        

       本项目我们首先进行“员工风采”页面的设计,通过本页面的设计,我们熟悉音频视频内容的规划,熟练使用<video><audio>进行页面规划布局,并能进行JavaScipt交互效果的添加。


【 案例展示 】

image.png


学习任务

重点、难点

突破方法

1. ”员工展示”页面实现。

1.媒体元素<video><audio>的灵活应用

2. 教学难点:多媒体元素应用及交互

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

知识目标

能力目标

素质目标

1.了解多媒体元素的使用;

2.掌握HTML5中div块级元素进行页面布局;
3.掌握CSS过渡样式的使用;

4.掌握“员工展示”的页面实现。


1.能灵活应用块级元素div进行页面布局;

2. 能进行鼠标悬停样式的添加;

3.能利用过渡样式美化页面;

4.能进行“员工展示”页面的代码书写。


1.具有爱岗敬意意识;

2.具有榜样引领的意识。

3.具有的职业素养与职业自信。

4.具有职业自豪感。

课程思政——爱岗敬业

  

               

 

【课前导学区】

  

               划重点.jpg          

 

   1、发布任务

          导学任务单

   2、辅学资源

         电子讲义

         电子课件

         教学设计

【 视频讲解】

知识储备及案例实现



任务2 “员工展示”页面实现

1、员工展示页面内容

2、员工风采样式

3、页面交互效果



【 课后自测区 】

自评自测

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


       image.png                                             image.png

   1、 材料阅读                                           【简介】2022-2-23感动中国十大人物展示

   感动中国的十大人物展示2

   

【 资料下载 】

单元设计

 

教学设计15-“员工展示”页面实现.pdf


课程教案

教案15-“员工展示”页面实现.pdf

演示文稿

 项目5 公司网站“员工风采“页面设计.pptx


任务工单

公司网站“员工风采”的页面设计

素材下载

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

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

    项目5 图片素材下载.rar

课内同步项目

  “员工风采”移动端页面设计

课外扩展项目

   验证密码页

练习题

  1、练习1

疑难问题解答

    1、JavaScript名字的由来。spacer.gif