web前端技术应用 教案 项目二 任务一 制作网页头部_第1页
web前端技术应用 教案 项目二 任务一 制作网页头部_第2页
web前端技术应用 教案 项目二 任务一 制作网页头部_第3页
web前端技术应用 教案 项目二 任务一 制作网页头部_第4页
web前端技术应用 教案 项目二 任务一 制作网页头部_第5页
全文预览已结束

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

《Web前端技术应用》教学设计项目二任务一课题了解网站的开发流程课程名称Web前端技术应用授课班级学时安排2学时执教老师授课形式理实一体教学目标知识1.能说出web前端开发的主要开发流程；技能能熟练对项目进行市场调查；能熟练利用切图工具获取素材；能完成页面框架搭建；素养1.通过前端开发流程进行，提升团队协作能力；2.养成细致缜密的编程习惯；课程思政通过编写与调试程序，让学生切身体会到任何一个小疏忽都会导致程序运行错误。让学生明确在今后的工作岗位上养成认真、细心和严谨的作风。教学重点Div+css框架搭建；教学难点Div+css框架搭建；教学方法分析法、讨论法、演示法、引导式教学。教学环境软件环境：Win7及以上操作系统，HBuilder硬件环境：多媒体教室或软件实训室，计算机教学资源：PPT、微课视频教学过程教学环节教师活动学生活动设计意图新课导入(3分钟)创设情境：在日常工作中，如果客户告诉我们一个他的需求，比如我想做一个垃圾科普网站，你拿到这个项目后，你应该做些什么？今天我们的课程就是为了解决当我们拿到一个项目过后，我们应该从哪些地方着手，最后开发出一款客户能够满意的产品出来。集中注意力，思考问题回答问题教学

过渡目标展示(2分钟)PPT展示本课题要完成的目标并适当解说观看了解活动1网页测试的三种类型(15分钟)前面我们已经掌握了网站的开发流程了，也获得了相应的素材，现在我们要进行一个网页框架的搭建。一．概念讲解通常框架搭建所涉及到的两个知识点是div和css.其中div是html的一个标签名，css是叫层叠样式表。Ppt展示二．项目实操演练DIV框架搭建结构梳理通过前面的微课，我们已经掌握了hbuilder开发工具的一个正确使用，下面我们进行一个练习框架的搭建，框架如下图：第一步：有多少个模块，我们搭建多少个div.如上图为4个div,可先创建4个div,并为每个div,命名class属性。<body> <divclass="one">1</div> <divclass="two">2</div> <divclass="three">3</div> <divclass="four">4</div></body>第二步：为了便于观看，为每个div设置不同的颜色效果如下：代码如下：.one{height:30px; background-color:antiquewhite;}.two{background-color:aqua;}.three{background-color:blue;}.four{background-color:gray;}第三步：进行宽高设计Height=像素值，单位为px.如本练习：第四步：内容填充如第二部分分为左右两部分，就代表第二部分里面是需要另外两个div的。所以这里需要修改html和css代码<divclass="two">2 <divclass="twLeft">左</div> <divclass="twRight">右</div></div>Css样式为：将第二个div设置为弹性布局里面的两个子元素分别设置宽度和背景颜色.twLeft{ width:30%; height:100%; background-color:green;}.twRigh{ width:70%; height:100%; background-color:yellow;}学生听教师讲解，理解链接测试的类型根据老师讲解，完成练习一步一练，达到掌握的目的达成教学目标活动2网页实操（20分钟）1.完成框架搭建练习工作根据前面老师的演示，完成里面所有的布局工作。分步骤完成老师演示的内容。完成相应的代码编写工作。学生上机实操展示评价（3分钟）按生生互评、教师点评的方式评价学生完成的作品情况。完成练习计算正确率回忆

巩固课堂小结(

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论