网页设计与制作课时说课稿.pptx

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