web前端技术应用 教案 项目一 任务二 了解网站开发流程_第1页
web前端技术应用 教案 项目一 任务二 了解网站开发流程_第2页
web前端技术应用 教案 项目一 任务二 了解网站开发流程_第3页
全文预览已结束

下载本文档

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

文档简介

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

过渡目标展示(2分钟)PPT展示本课题要完成的目标并适当解说观看了解活动1网页的开发流程(15分钟)响应前面提出的问题开发一个网站框架的总体流程：首先经过市场调查、绘制网站效果图，利用切图获取素材，其次搭建DIV+CSS，最后书写代码、完成网站的开发。市场调查明确调查什么？需求分析，分析主题是什么？风格选择何种比较合适？网站的域名和空间如何设计；团队协作这一步通常由产品经理、客户和网站设计人员共同完成；网页设计原则主题风格切合常规、不失新意，其他页面要和主题风格相统一；3.绘制网站效果图，这一步通常由开发人员和UI设计师共同完成。第一步：要确定好网站的主题，可根据网站的应用方向搜索相关资料，将自己认为比较好的网站页面都保存起来。可以用来作为所建网站主题的一个参考。第二步：要在纸上画出心中的大概草图，绘制出整个网站的主要框架结构，顶部、中部、底部等。第三步：网站效果图的元素效果填充，如按钮立体效果、网页所涉及的图片设计等。第四步：完成设计，导出效果图，通常为psd文件。4.使用切图工具获取素材第一步：利用Photoshop软件，导入设计好的psd文件。第二步：打开参考线，利用切图工具，适合批量切图、小图标等。尽量标记出所切图片的宽高、像素值等。8|Web前端技术应用第三步：保存所切图形为所需的图片格式，可以是gif、png、jpeg等。教师演示切图，保存等；学生听教师讲解，理解链接测试的类型达成教学目标活动2网页实操（20分钟）1.完成环保网的切图工作根据前面老师的演示，完成里面所有元素的一个切图工作。学生上机实操展示评价（3分钟）按生生互评、教师点评的方式评价学生完成的作品情况。完成练习计算正确率回忆

巩固课堂小结(2分钟)通过本节课的学习，

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

温馨提示

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

最新文档

评论

0/150

提交评论