Web前端技术项目式教程教案美化网页.docxVIP

PAGE

PAGE3

任务六美化网页

课程名称任务名称

Web前端开发设计

美化网页

项目名称

课时

美化网页4

项目性质

授课班级

□演示性 □验证性 □设计性 √综合性

授课日期 授课地点

能力目标：

掌握设置文本阴影的方法

掌握背景的透明度

掌握设置网页字体图标

教学目标 知识目标：

了解文本阴影属性

了解CSS3背景和边框的属性素质目标：

培养学生信息搜集能力

培养学生团结合作、互帮互助的能力；

任务描述

任务展示与实现

教学内容

教学重点教学难点

教学准备

利用编辑工具编写CSS3代码并验证其效果

学生动手操作

教师讲解本任务涉及的知识点

任务小结

实现首页和二级页面的搜索框添加字体图标

实现美化意见反馈页面的提交按钮

（1）网站首页的景区图片设置透明效果

装有SublimeText3的电脑

教学课件PPT

教材：《Web前端技术项目化教程》

作业设计 1．制作旅游项目首页轮播效果图，图片在images/banners文件夹下。

教学过程

教学环节

课前组织

课程说明

教学内容与过程

（教学内容、教学方法、组织形式、教学手段）

做好课前“5分钟”教学管理（多媒体、实训室），做好上课前的各项准备工作（打开电脑、打开课件、打开软件、打开U盘中的素材位置、打开授课计划、教案等），吸引学生注意力。

【课前说明】

分别从text-shado