2020年春，一场突如其来的新冠疫情打破了我们的常规教学，疫情期间，教育部提出推行了“停课不停学”的线上教学，在线教育呈现出了日新月异的新发展，我们在线教育资源的丰富性和共享性，还是非常让我们自豪的。今天我们就来讲解一款在线教育网页的绘制。通过本任务的学习，同学们熟悉网页的基本参数指标及布局形式，能熟练应用栅格进行页面各部分的绘制。

【 任务引入 】

【 项目思维导图 】

学习任务

重点、难点

突破方法

1.通道认识及抠图；

2.图层混合模式；

3.栅格系统认识；

4.在线网页的绘制。

重点：1. 通道抠图；

          2.图层混合模式；

          3.在线教育网页设计；

难点：1.通道抠图；

          2.栅格网页的绘制。

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

知识目标

能力目标

素质目标

1.掌握PS中通道的简单抠图；

2.掌握图层混合模式使用；

3.了解栅格系统的相关概念；

4.掌握利用栅格进行网页绘制技巧。

1.能够熟练应用PS中的通道及图层混合模式；

2.能利用栅格进行网页的绘制。

1. 养成积极主动学习意识；

2. 养成勤于动手的习惯；

3. 培养团队合作能力。

课程思政——爱国教育

效果图

【 视频讲解】

知识储备

    1、通道认识

    2、通道抠图步骤1

    3、通道抠图步骤2

    4、图层混合模式1

    5、图层混合模式2

任务实现

    1、在线教育网页任务分析

    2、背景与Logo

    3、导航栏绘制

    4、Banner区绘制

    5、发现好课

    6、课程区块绘制

    7、教学教研团队

    8、Footer区

拓展任务实现

    1、导航栏绘制

    2、侧边栏的绘制

    3、网页主体图片绘制

    4、网页主体文字排版

    5、底部图片的绘制

    6、Footer区绘制

【 资料下载 】

单元设计

         在线教育网页设计

课程教案

         在线教育网页设计

演示文稿

        4、在线教育网页的绘制.pdf

任务工单

          在线教育网页设计

素材下载

       在线网页素材.zip

       拓展任务素材.rar

课内同步项目

         教育Banner绘制

练习题

       1、练习1

疑难问题解答

     1、HBuilder需要注册才能使用吗？