网设计与制作课时说课稿省公开课金奖全国赛课一等奖微课获奖课件.pptx

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,*,课程名称：,网页设计与制作,项目三,：精品课程网站,任务四：,DIV+CSS,布局技术及应用,说课人：王慧敏,1/29,内容选取,与组织,课程目标,课程定位,课程介绍,2/29,课程定位,岗位关键领域课程 综合性 实践性 操作性,课程介绍,课程目标,网站设计与制作能力、,团体协作能力、,沟通能力、分析处理问题能力、项目实施能力,内容选取组织,以教学仿真项目和企业实际项目为载体,重构和序化教学内容,3/29,课程教学内容选取与安排,编号,知识模块安排,1,网页设计基础知识,2,网站观赏,3,网站规划与设计,4,网站效果图设计,5,网页色彩搭配网页布局,6,网页动画设计,7,页面布局与编辑,8,HTML,语言,9,CSS,层叠样式表,10,DIV+CSS,网页布局,11,模版与库应用,12,网站行为,13,表单应用,14,静态网站动态化,15,动态网站制作,16,课程设计（项目实训）,项目一 书法家庄辉个人网站,项目二 电子信息工程系迎评网站,项目三 精品课程网站,项目四 武威旅游网,项目五 佳佳商城用户及留言管理系统,4/29,课时说课,项目三：精品课程网,任务四：,DIV+CSS,布局技术及应用,5/29,提要,6/29,课时定位,任务名称,职业素质及能力培养,课时数,项目三：,精品课程网站建设,网站前期策划及策划书编写,沟通能力、策划能力、文档能力,2,网站效果图设计、切片导出及动画设计,艺术素养、Photoshop设计,动画制作能力、创新创意能力,4,DIV+CSS网页布局技术基础知识,DIV+CSS网页布局技术、团体协作、项目实施能力,3,DIV+CSS布局技术及应用,6,JavaScript脚本代码融合,JavaScript脚本代码应用能力,4,使用模版完善静态网站,掌握网站模板使用方法,2,应用行为增强网页动态效果,掌握网站行为使用方法,2,项目总结与评价,具备检验、判断能力、语言表示能力、责任意识,2,7/29,教学目标,专业能力：,1.掌握单行单列布局、二列布局、三列布局结构应用。,2.掌握DIV+CSS布局应用与技巧。,方法能力：,1.能独立进行信息筛选与加工。,2.能独立制订、实施工作计划。,3.含有分析问题、处理问题能力。,社会能力：,1.含有沟通能力及团体协作精神。,2.,含有创新能力。,8/29,教学内容,利用DIV+CSS技术布局制作精品课程网站主页。,重点,掌握,DIV+CSS,布局应用与技巧，熟练,CSS,语法规则,。,难点,深入了解布局精华,盒子模型以及怎样灵活、,简练应用。,教学内容,9/29,10/29,项目教学法,1,直观演示法,活动探究法任务驱动法,小组讨论法,宏观：,微观,11/29,启发式教学方法,利用多媒体辅助教学,12/29,以,学生为主体，以,培养学生,自主学习能力为出发点，让学生在学习中发觉问题、分析问题、处理问题。,主要应用以下方法：,自主探究法、总结反思法,13/29,项目导向,任务驱动,教师展示任务效果,教师提出任务目标,教师引导、处理疑难问题,展示与评价,布置课后拓展练习,学生自主探究,14/29,一 任务效果展示,15/29,二 提出任务目标,1、,复习什么是,CSS,盒子模型？盒子属性？（引导、讨论）,提升自学兴趣，被动,主动,深入明确本节课要实现目标，设置四个问题来分析、讨论,采取,DIV+CSS,布局技术制作精品课程网站主页,16/29,提升自学兴趣，被动,主动,深入明确本节课要实现目标，做到有放矢,2,.,在网页中，一个,div,盒子是怎样定义？（回想）,二 提出任务目标,17/29,#left,#right,提升自学兴趣，被动,主动,深入明确本节课要实现目标，做到有放矢,3.,生活中盒子有很多，同理，一张网页中盒子也有很多,(,如图,),，这些盒子是怎样放置到网页中？,(,引导、讨论）,经过插入多个,DIV,二 提出任务目标,#header,#footer,18/29,四个问题层层递进，既复习了上节课重点内容，也为下面学生自主探究打下坚实基础，帮助学生把握本节课重、难点。,4.,精品课程网站主页是由许多盒子组成，这些盒子是怎样放置到网页中？又是怎样把它摆放得有模有样？,(,引导、讨论）,经过插入多个,DIV,经过控制盒子外观,CSS,样式表,二 提出任务目标,19/29,三 学生自主探究,1,.,学生分析精品课程网站主页布局。,教师为主导 学生为主体,#header,#main_left,#right_top_kcjs,#right_top_jcjs,#right_jxzy,#right_jx,#footer,20/29,2.,依据分析，学生画出布局草图。,教师为主导 学生为主体,#header,#main_left,#right_top_kcjs,#right_topjcjs,#right_jxzy,#right_jx,#footer,三 学生自主探究,21/29,3.,依据绘制草图，在网页制作软件中放这些盒子,教师为主导 学生为主体,先堆到一起再说！,三 学生自主探究,22/29,4.,在网页制作软件中怎样将这些盒子放置到适当位置？,Css,样式表,盒子摆整齐了！,教师为主导 学生为主体,#header,#main_left,#right_top_kcjs,#right_top_jcjs,#right_jxzy,#right_jx,#footer,三 学生自主探究,23/29,四 引导、分,析、,讨论,、,处理疑难问题,教师：引导、分析、处理、演示,学生：分析、讨论、练习,讲练结合,教师有纠错 学生有反思、有总结、有提升,24/29,五 展示与评价,作品展示、（最符合结果）评价,自信感、成就感、责任心,以工作任务为根本，以学生为主体，以教师为主导，融“教、学、做、评”为一体,。,25/29,六,课后拓展练习,主页效果图 二级页面效果图,巩固本节课内容 培养动脑、动手、创新,26/29,大部分学生对盒子模型有了更深刻认识，会用“,DIV+CSS”,布局技术及制作出精品课程网站主页，能够熟练应用,css,语法规则。,27/29,整节课大部分学生伴有满足、成功、喜悦等体验，并能总结学习所得。但也有个别同学学习主动性、主动性还不够。,28/29,辛,了,苦,完,29/29,