网页制作教学设计(公开课).doc

一体化课程教案（首页）课 程网页制作授课教师课题（项目）名 称创意型网站开发审 批学习任务创意型网站开发授课课时16授课日期 年 月 日至 年 月 日授课班级13电商高中项目（任务）描 述小李刚刚通过应聘进入了一家网页制作公司，公司规模不大，主要业务是承接各类网站的制作。现在公司刚接了四个不同的制作网站业务，由于公司人数不多，所以小李要独立负责其中一个网站的建设，由于时间紧迫，现要求小李选择其中一个网站，并与策划部进行快速沟通和需求分析，完成资料的整理和素材的简单加工，设计出基本框架，再通过网页编辑工具完成网页版面的制作和内容元素的编辑，最后通过公司服务器发布网站到互联网上。教学目标通过完成本次任务，学生能够l 通过多方调研明确客户需求，撰写需求确认分析说明书；l 通过组内讨论，做好网站开发详细计划，撰写项目工作计划表；l 通过小组分工合作，自主探究学习，设计有特色的网站；l 通过测试，发现存在问题并提出解决方案；l 能够展示小组作品的优势和特色，并能客观评价他人；l 通过基于工作情境的角色扮演，熟悉网站开发的工作流程，并从中获得沟通表达，解决问题的经验，体验团队合作与信息共享的乐趣。教学重点分析客户需求；设计网站规划书；创建网站站点；设计网页版面布局；素材编辑与修辞；内容页制作与超链接。教学难点使用Dreamweaver进行网页布局；内容页制作；页面间的超链接。学情分析根据客户需求，开发一个商务网站，进行宣传推广商品。该网站以信息发布、产品介绍、在线销售、顾客服务、提升品牌形象为主要功能和目的。学生在学习任务中首先要进行客户需求分析，制定网站设计书，并进行创建站点和管理站点，然后在已创建的站点上进行主页、内页设计完善网站功能，并使用多种工具进行网页美工，最后发布与管理已建好的网站，根据公司的要求，更新和维护网站。教学策略本次教学任务在电商实验班进行授课，采用任务驱动，模块演示的教学方法；以学生为中心：指导学生分组讨论、模仿训练、小组展示。教学资源准备场地教学楼409电子商务实验室工具多媒体计算机、白板、幻灯机、资料柜、因特网耗材设计图纸、彩色画笔课前学习任 务1、确定选择四个不同类型的网站中的哪一个花卉、海洋公园、环保、潮流一体化课程教案（内页）教学活动:1.资讯 （ 80分钟）学习内容学生活动教师活动设计意图和资源准备1. 任务描述（10分钟）【任务描述】小李刚刚通过应聘进入了一家网页制作公司，公司规模不大，主要业务是承接各类网站的制作。现在公司刚接了四个不同的制作网站业务，由于公司人数不多，所以小李要独立负责其中一个网站的建设，由于时间紧迫，现要求小李选择其中一个网站，并与策划部进行快速沟通和需求分析，完成资料的整理和素材的简单加工，设计出基本框架，再通过网页编辑工具完成网页版面的制作和内容元素的编辑，最后通过公司服务器发布网站到互联网上。2. 寻找任务所需资料（70分钟）浏览相关产品宣传网站，参考网页布局结构制作网站总体设计说明书收集网页素材资源，包括旅游景点图片的拍摄与收集，文字说明及参数1. 学生进行分组组队（每6-7人一组），组成这个任务的合作伙伴2. 根据老师的提示及任务，寻找完成任务所需的相关资料3. 学生通过上网浏览相关网站，参考网页布局，搜集相关素材1. 帮助学生理解任务要求、分析任务2. 介绍创建站点、绘制草图、表格在页面布局中的作用，同时提供获取资讯的方法和途径等信息1. 通过发布任务，让学生了解任务，进而让学生围绕任务进行任务相关资料的收集。2. 提供专题网站的相关资料，公司需求。提供因特网查找资料（教学评价）教学活动: 2.决策 （ 80分钟）学习内容学生活动教师活动设计意图和资源准备1. 用户访谈，收集需求（40分钟）学生经过分组后，进行探究式学习，学生经过讨论以小组方式拟定工作过程，在工作过程中通过角色扮演，小组与策划部门充分沟通，了解专题网站的基本要求，浏览策划部门提供的资料，收集各种需求。2. 引导需求要点（20分钟）引导学生在需求分析时重点分析的内容需求3. 需求说明确认（20分钟）引导小组填写需求说明确认表1. 学生经过讨论以小组方式拟定工作过程，确定网站主页要呈现的内容与方式、明确网站所采用的语言、明确页面的宽度和色彩风格、明确导航项目和子页内容呈现方式、明确开发时间和后期维护要求等2. 学生小组讨论，利用黑板，每个小组展示需求要点1. 听取学生的决策意见，提出可行性方面的质疑，提供指导意见，帮助形成方案并指导学生进行方案优化，最终做出决策，形成团队实施方案2. 指导学生讨论，对学生的展示结果指导学生进行优化3. 指导学生寻找合适的网站风格1. 学生在确定方案的过程中，培养团队合作能力。2. 在模块功能分析阶段，能通过自学、讨论、提问等方式自主学习3. 在资料准备阶段主要是培养学生的团队、协助、自省能力。（教学评价）教学活动: 计划 （40 分钟）学习内容学生活动教师活动设计意图和资源准备在需求分析的基础上，网站建设负责人根据实际情况，明确实施目标，确定实施方案，并将其递交客户，由其负责人签字确定。学生分组讨论分析需求分析表后制定相应的设计方案指导学生优化方案设计，审定工作方案，制定重要节点的项目进度检查计划要学生在这个阶段学习遇到一个项目任务，根据任务制定出完整的方案，以便下一步方案的实施（教学评价）教学活动: 实施 （ 280分钟）学习内容学生活动教师活动设计意图和资源准备1.准备工作（40分钟）浏览并整理客户提供的资料和素材，通过网络搜索获得额外素材。2.站点建立与管理（40分钟）建立站点，规划站点目录文件结构，并对站点文件实施管理。3.网页版面布局（40分钟）认识常见的版面布局，依据用户需求，利用布局表格设计并制作出网页的框架。4.图片编辑与修辞（40分钟）运用网页编辑软件插入图像对象，并对图像进行编排，运用图像处理软件对图像进行简单的处理，使其适合网页呈现。5. 文字编辑与修辞（40分钟）运用网页编辑软件输入文字，并对文字、段落进行排版，使其适合网页呈现。6. 内容页制作与超链接（40分钟）使用网页编辑工具，制作出与主页风格一致、图文并茂的内容页。使用超链接实现页面间的链接。7. 网站发布（40分钟）通过FTP客户端工具上传网站文件，实现网站对外发布，并能对网站文件进行维护管理。1. 以客户为主要服务对象，根据市场的状况、公司经营产品自身的情况等进行综合分析，完成以下三个方面的具体设计（1） 首页设计（2） 网站整体结构设计（3） 发布网站2. 小组讨论设计“七彩云南”主题旅游网站的布局图3. 填写网站内容规划表4. 学生通过辅助教材和上网查找资料，分组讨论，讨论后展示讨论成果5. 通过模仿教师的操作学生独立完成站点的建立，小组完成整个小组网站的站点建立1. 与学生分享设计商业网站的原则，指导小组完成需求分析调查表，指导学生根据调查表获取客户需求信息2. 分析校园网的布局图，引导学生小组设计主题网站布局图3. 根据客户需求分析调查表填写网站规划表4. 对学生的讨论展示进行引导5. 展示站点建立的方法通过让学生了解客户需求、设计网站规划书、认识网页及其设计软件，来让学生完成产品宣传网站的站点和页面设计，最终上传网站文件并进行发布（教学评价）教学活动: 检查 （ 80 分钟）学习内容学生活动教师活动设计意图和资源准备1.提交作品（10分钟）2.展示成果（40分钟）3.交流总结经验（10分钟）4.修改完善作品（30分钟）1. 学生自我检查评价自己的作品2. 提交作品3. 展示成果：小组之间相互展示自己的工作成果，评估作品完成质量4. 小组间相互检查作品，并提出修改意见交流并总结经验对网页进行测试，重点对做得不理想的地方进行分析，针对学生在完成任务过程中遇到的普遍问题进行点评，并将技术文件归档，提供规范化技术文档供学生参考。通过展示成果，让学生了解自己的学习成果，激起学生的兴趣，交流总结经验主要是让学生认识到自己的不足，以便继续努力。修改完善作品为以后的课程做铺垫。（教学评价）教学活动:评价 （ 80 分钟）学习内容学生活动教师活动设计意图和资源准备1. 教师评价小组作品2. 完成作品检查表填写1. 听取教师的评价意见2. 填写作品检查表1. 指导学生对自己的作品进行评价，包括学生的自评和学生互评2. 指导学生对其它同学的作品进行评价3. 对学生的作品进行评价4. 指导学生填写作品检查表（教学评价）17 广州市技师学院 广州市高级技工学校课后任务布置1、 优化网站2、 对网站进行维护管理教学反思创意型网站开发主题网站建设学习任务：建设主题网站学习目标通过完成本次任务，学生能够l 通过多方调研明确客户需求，撰写需求确认分析说明书；l 通过组内讨论，做好网站开发详细计划，撰写项目工作计划表；l 通过小组分工合作，自主探究学习，设计有特色的网站；l 通过测试，发现存在问题并提出解决方案；l 能够展示小组作品的优势和特色，并能客观评价他人；l 通过基于工作情境的角色扮演，熟悉网站开发的工作流程，并从中获得沟通表达，解决问题的经验，体验团队合作与信息共享的乐趣。建议课时：16课时资讯 【任务描述】小李刚刚通过应聘进入了一家网页制作公司，公司规模不大，主要业务是承接各类网站的制作。现在公司刚接了四个不同的制作网站业务，分别是花卉、海洋公园、环保、潮流，由于公司人数不多，所以小李要独立负责其中一个网站的建设，由于时间紧迫，现要求小李选择其中一个网站，并与策划部进行快速沟通和需求分析，完成资料的整理和素材的简单加工，设计出基本框架，再通过网页编辑工具完成网页版面的制作和内容元素的编辑，最后通过公司服务器发布网站到互联网上。明确任务后，教师帮助学生理解任务要求、分析任务，并介绍创建站点、绘制草图、表格在页面布局中的作用，同时提供获取资讯的方法和途径等信息。学生根据老师的提示及任务，寻找完成任务所需要的资料。例如：1、浏览相关主题网站，参考网页布局结构2、制作网站总体设计说明书3. 收集网页素材资源，包括图片、介绍文字、视频等。决策 在教师协调下学生自愿分组，进行探究式学习，学生经过讨论以小组方式拟定工作过程，确定网页素材，网页表格的添加方式，辅助的选用，美化设计等，教师听取学生的决策意见，提出可行性方面的质疑，提供指导意见，帮助形成方案并指导学生进行方案优化，最终做出决策，形成团队实施方案。1、用户访谈，收集需求通过“策划部门充分沟通，了解专题网站的基本要求，浏览策划部门提供的资料，收集各种需求网站名称脚本支持纯HTML所用域名数据库支持否负责部门策划部联系人需求访谈记录2、引导需求要点1. 通过与用户沟通，引导用户提出具体需求2. 指导用户选择与网站主题相关的域名，要便于访问者使用3. 根据所能提供的条件，明确网站建设的规模4. 根据用户的实际情况确定主页要呈现的内容和方式5. 明确网站所采用的语言6. 明确页面的宽度和色彩风格7. 明确导航项目和子页内容呈现方式8. 明确开发时间和后期维护要求3、 需求说明确认网站名称脚本支持所用域名数据库支持负责部门联系人需求要点客户意见和确认签字 计划在需求分析的基础上，网站建设负责人根据实际情况，明确实施目标，确定实施方案，并将其递交给客户，由其负责人签字确认公司网站建设方案书一、背景着重陈述建站的意义和目的二、系统分析1、开发环境明确所采用的网页脚本语言，静态网页这一部分要求比较简单2、版面要求陈述版面的宽度、长度、色彩搭配、总体风格等情况3、支持语言明确选择简体中文，还是采用多语言三、设计方案1、网站结构建议以列表的方式将网站各栏目分层呈现出来2、分块说明对每一栏目进行详细说明，也可以配合简图四、网站测试与维护陈述网站测试验收的环节，明确后期的维护工作如何开展以及双方的职责五、进度安排陈述网站开发各阶段时间和总工期六、费用说明建议以列表的方式罗列域名、服务器配置、网站开发、更新维护、推广等各环节的费用客户意见：签字： 工作计划表：计划计划内容计划完成时间负责人设计网站规划书创建网站的站点绘制首页的页面布局草图，规划网站页面布局结构制作网站首页制作网站分页发布网站实施学生根据计划方案完成设计和模拟，做好相关资料的记录，教师监督学生的学习过程，通过【引导问题】和【学习思考】培养学生分析问题、解决问题的能力，纠正学习偏差。教师下发学习任务，学生根据学习任务做好完成任务的计划，教师对任务重点难点进行讲解和分析，学生认真做好知识点记录，并安排好完成计划的时间和步骤，重点掌握重要知识点，使学习计划能够按时完成，根据计划方案操作完成设计任务，并做好相关记录。由于刚开始接触网页制作，学生对软件的使用都还没有基础，因此，本任务应先由教师分模块演示并讲解一些重要操作，学生同步进行模仿训练。而对知识掌握得相对比较熟练、操作比较快的学生，在操作过程中如果遇到问题，教师可引导学生查找相关的教材、教学参考书中的相关内容或通过网络获取相关内容，引导他们解决问题。而那些对知识把握得较慢的学生，则可详细讲解或建议学生反复学习相关章节的内容。鼓励小组成员在工作过程中互相帮助，解决在完成任务中所遇到的问题。任务一：准备工作一、任务目标能够浏览并整理客户提供的资料和素材。能够通过网络搜索获得素材。二、任务实现1.小组整理提供的资料和素材，对不足够的素材通过网络查找补充客户提供的资料和素材往往随机存放，显得比较混乱。为了便于认识需求和后续的制作，需要将其整理、归类。在此过程中，利用资源管理器运行文件夹整理，熟悉文件夹和文件的建立、复制、移动、删除等操作，从而增强对客户业务流程的认识，拓展后续制作的思路。任务二：站点建立与管理一、任务目标能够建立站点与主页，规划好站点目录文件结构，并对站点文件实施管理，二、任务实现站点创建与管理（1）新建站点站点不同于网页，一个站点不仅包含大量的网页文件，还包括图片、动画。、视频、音频等文件，并且这些文件是相互关联的，需要通过创建一个站点来对网站各类元素进行集中管理。（2）站点管理 可以通过在站点中创建、复制、删除文件夹和文件对象来构建网站文件系统。一个网站编辑工具可以创建许多站点，可以对它们进行统一管理，包括站点信息的修改、站点的复制与删除、站点的导出与导入等操作。 网站目录结构规划在所创建的站点中规划好目标结构。 多站点管理将站点导出，当系统重装或更换计算机后可以重新导入文件，减少重新工作量。任务三：网页版面布局一、任务目标认识常见的版面布局，能够依据用户需求，利用布局表格工具设计并制作出网页框架。二、任务实现1小组讨论制定网站主要布局形式并绘制草图。2小组制作版面布局，并定稿任务四：图片编辑与修辞任务目标 能够运用网页编辑软件插入图片对象，并对图片进行编排能够运用简单的处理，使其适合网页呈现。二任务实现 小组成员通过浏览整理后的资料包，找到合适的图片，插入网页相应的位置，如果图片大小与 页要求不符，不要在网页编辑软件中对图片进行大范围，拉伸或缩小，要借助其他图像处理软件进行处理后再插入，图片插入网页后会弹出保存对话框此时保存的文件名不要使用中文，浏览器对中文文件名不能很好的支持。任务五:文字编辑与修辞一任务目标 能够运用网页编辑软件输入文字，并对文字、段落进行排版，使其适合网页呈现。二、任务实现1小组确定导航和栏目标题，使用哪种类型的导航。2文本区域的排版，在排版中使用CSS样式，使网站的风格统一。任务六：内容页制作与超链接一、任务目标能够使用网页编辑工具，制作出与主页风格一致、图文并茂的内容页。能够使用超链接技术，实现网页之间的链接，建立页面之间的关联。二、任务实现1、内容页制作主页制作完毕后，还有大量的内容页需要制作，一般情况下，主页与内容页的风格应保持一致，小组成员各自负责一个分页面的制作。2.超链接小组把所有完成任务好的页面进行超链接，并没测试。填写主页尾部电子邮箱,并做好电子邮箱的链接。填写主页尾部QQ,并做好对应QQ用户的应用程序的链接。任务七：网站发布一任务目标能够通过常用FTP客户端工具上传网站文件，实时网站对外发布，并能进行网站文件的维护管理。二任务实现将制好的网站通过leapFTP工具上传至指定的FTP服务器。检查1、 小组自我检查评价自己的作品。分析不足之处，提出改进措施等，完成小组和个人工作日志填写。2、 继续修改作品。3、 提交作品。4、 展示成果：小组相互展示自己的工作成果，评估作品完成质量，关注团队合作，敬业勤业等职业素养的评估，并提出修改建议。5、 修改并完善作品。6、 教师检查作品。7、 交流并总结经验：教师对网页进行分析测试，重点对做得不理想的地方进行分析，针对学生在完成任务过程中遇到的普遍问题进行点评，并将技术文件归档，提供规范化技术文档供学生参考。同时教师指引学生归纳总结，引导学生独立构建自己的经验和知识体系。评价1、教师指导学生对自己的作品进行评价，包括学生的自评和学生互评。2、教师指导学生对其它同学的作品进行评价。3、教师对学生的作品进行评价。4、指导学生填写作品评价表和个人考核评价表。小组作品检查表班 级：学生姓名：学 号：作品简述检查主体检查内容改进前改进后小组自检存在问题改进意见成绩评定小组互检建议成绩评定互评人签名综合检查建议成绩评定教师签名注：1、 学生互评，可以由学习小组长或者其他学生完成互评。2、 综合评定，可由任课教师、科代表、学习委员完成综合评定。3、 成绩评定按百分制评定，最终成绩的评定以改进后的成果为主。4、 本表填写完成后，将以电子文档形式存档，作为期末总评成绩的评定依据之一。个人评价表项目评价项目分值评分创意型网站开发能够合理进行网页布局15能够运用网页编辑工具完成多种形式内容元素的编辑15能够按照页面的逻辑关系将网页合理组织起来15小组团队合作情况15实训报告书写认真完整，字迹清楚，页面整洁20组织纪律性强、无迟到、早退、缺课现象20评价方式自我评价小组评价教师评价评分