UI前端设计
袁安翠

1
2
3
4
5
6
7
8
9

任务3 在线教育网页的绘制

发布时间:2022-03-05 00:39   发布人:袁安翠   浏览次数:2001



 在线教育网页绘制 】

            

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

 

【 任务引入 】

 

 

【 项目思维导图 】


学习任务

重点、难点

突破方法

1.通道认识及抠图;

2.图层混合模式;

3.栅格系统认识;

4.在线网页的绘制。

重点:1. 通道抠图;

          2.图层混合模式;

          3.在线教育网页设计;

难点:1.通道抠图;

          2.栅格网页的绘制。

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

知识目标

能力目标

素质目标

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

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

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

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

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

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

1. 对学生进行爱国主义教育;

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

3. 培养团队合作能力。

课程思政——爱国教育

                 

效果图

                                                    

                                     在线教育网页222.jpg


【 视频讲解】

知识储备


    1、通道认识

    2、通道抠图步骤1

    3、通道抠图步骤2

    4、图层混合模式1

    5、图层混合模式2


任务实现


    1在线教育网页任务分析

    2、背景与Logo

    3、导航栏绘制

    4Banner区绘制

    5、发现好课

    6、课程区块绘制

    7、教学教研团队

    8、Footer区


拓展任务实现


    1导航栏绘制

    2、侧边栏的绘制

    3、网页主体图片绘制

    4、网页主体文字排版

    5、底部图片的绘制

    6、Footer区绘制


【 资料下载 】

活页教材

         在线教育网页绘制

课程教案

         在线教育网页绘制

演示文稿

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


任务工单

          在线教育网页绘制

素材下载

       在线网页素材.zip

       拓展任务素材.rar

课后同步项目

        教育Banner绘制

练习题

      1、练习

疑难问题解答

     1、栅格式网页怎样才能使用吗?

    2什么是蒙版voice.jpg