网制作教学设计公开课

1、网页制作教学设计（公开课）一体化课程教案 （首页）课程网页制作授课教师课题（项 目）名称创意型网站开发审 批学习任 务创意型网站开发授课课时16授课日期授课年 月 日至年 月曰班级13电商咼中项目（任 务）描述小李刚刚通过应聘进入了一家网 公司规模不大，主要业务是承接 作。现在公司刚接了四个不同的 务，由于公司人数不多，所以小 其中一个网站的建设，由于时间 小李选择其中一个网站，并与策 沟通和需求分析，完成资料的整 单加工，设计出基本框架，再通 具完成网页版面的制作和内容元 后通过公司服务器发布网站到互页制作公司， 7各类网站的制 J制作网站业、李要独立负责 I紧迫，现要求 划部进行快速 ?理

2、和素材的简 过网页编辑工 :素的编辑，最 :联网上。教学目标通过完成本次任务，学生能够通过多方调研明确客户需求，撰写需求确认分析说明书；通过组内讨论，做好网站开发详细计划，撰 写项目工作计划表；通过小组分工合作，自主探究学习，设计有 特色的网站；通过测试，发现存在问题并提出解决方案； 能够展示小组作品的优势和特色，并能客观 评价他人；通过基于工作情境的角色扮演，熟悉网站开 发的工作流程，并从中获得沟通表达，解决 问题的经验，体验团队合作与信息共享的乐 趣。教学重点分析客户需求；设计网站规划书；创建网站站 点；设计网页版面布局；素材编辑与修辞；内 容页制作与超链接。教学难点使用Dreamweav

3、er进行网页布局；内容页制作； 页面间的超链接。学情分析根据客户需求，开发一个商务网站，进行宣传 推广商品。该网站以信息发布、产品介绍、在 线销售、顾客服务、提升品牌形象为主要功能 和目的。学生在学习任务中首先要进行客户需 求分析，制定网站设计书，并进行创建站点和 管理站点，然后在已创建的站点上进行主页、内页设计完善网站功能，并使用多种工具进行 网页美工，最后发布与管理已建好的网站，根 据公司的要求，更新和维护网站。教学策略本次教学任务在电商实验班进行授课，采用任 务驱动，模块演示的教学方法；以学生为中心： 指导学生分组讨论、模仿训练、小组展示。教学 资源 准备场地教学楼409电子商务实验室工

4、具多媒体计算机、白板、幻灯机、资料柜、因特 网耗材设计图纸、彩色画笔课前学习 任务1、确定选择四个不同类型的网站中的哪一个花卉、海洋公园、环保、潮流一体化课程教案（内页）教学活动:1.资讯（80分钟）学习内容学生活动教师活动设计意图 和资源准 备1任务描述（10分钟）【任务描述】小李刚刚通过应聘进入了一家网 页制作公司，公司规模不大，主要业务是承接 各类网站的制作。现在公司刚接了四个不同的 制作网站业务，由于公司人数不多，所以小李 要独立负责其中一个网站的建设，由于时间紧 迫，现要求小李选择其中一个网站，并与策划 部进行快速沟通和需求分析，完成资料的整理 和素材的简单加工，设计出基本框架，再通

5、过1. 学生进 行分组组 队侮6-7 人一组）， 组成这个 任务的合 作伙伴2. 根据老 师的提示1. 帮助学 生理解任 务要求、分 析任务2. 介绍创 建站点、绘 制草图、表 格在页面 布局中的1.通过发 布任务，让 学生了解 任务，进而 让学生围 绕任务进 行任务相 关资料的 收集。网页编辑工具完成网页版面的制作和内容元 素的编辑，最后通过公司服务器发布网站到互 联网上。2.寻找任务所需资料（70分钟）浏览相关产品宣传网站，参考网页布局结构 制作网站总体设计说明书收集网页素材资源，包括旅游景点图片的拍摄 与收集，文字说明及参数及任务，寻作用，同时2.提供专找完成任提供获取题网站的务所需的资

6、讯的方相关资料，相关资料法和途径公司需求。3.学生通等信息提供因特过上网浏网查找资览相关网 站，参考网 页布局，搜 集相关素 材料（教学评价）教学活动：2.决策（80分钟）学习内容学生活动教师活动设计意图 和资源准 备1. 用户访谈，收集需求（40分钟）学生经过分组后，进行探究式学 习，学生经过讨论以小组方式拟定工 作过程，在工作过程中通过角色扮演， 小组与策划部门充分沟通，了解专题 网站的基本要求，浏览策划部门提供 的资料，收集各种需求。2. 引导需求要点（20分钟）引导学生在需求分析时重点分析 的内容需求3. 需求说明确认（20分钟）1.学生经过讨论 以小组方式拟定 工作过程，确定 网站主

7、页要呈现 的内谷与方式、 明确网站所采用 的语言、明确页 面的宽度和色彩 风格、明确导航 项目和子页内容 呈现方式、明确1.听取学 生的决策 意见，提出 可行性方 面的质疑， 提供指导 意见，帮助 形成方案 并指导学 生进行方 案优化，最1. 学生在 确定方案 的过程中， 培养团队 合作能力。2. 在模块 功能分析 阶段，能通 过自学、讨 论、提问等 方式自主引导小组填写需求说明确认表开发时间和后期终做出决学习维护要求等策，形成团3.在资料2.学生小组讨队实施方准备阶段论，利用黑板，案主要是培每个小组展示需2.指导学养学生的求要点生讨论，对团队、协学生的展助、自省能示结果指 导学生进 行优化3

8、.指导学 生寻找合 适的网站 风格力。（教学评价）教学活动：计划（40分钟）学习内容学生活动教师活动设计意图 和资源准 备在需求分析的基础上，网站建设负责人根据实 际情况，明确实施目标，确定实施方案，并将 其递交客户，由其负责人签字确定。学生分组 讨论分析 需求分析 表后制定 相应的设 计方案指导学生 优化方案 设计，审定 工作方案，制定重要 节点的项 目进度检 查计划要学生在 这个阶段 学习遇到 一个项目 任务，根据 任务制定 出完整的 方案，以便 下一步方 案的实施（教学评价）教学活动：实施（280分钟）学习内容学生活动教师活动设计意图 和资源准 备131. 准备工作（40分钟）浏览并整理

9、客户提供的资料和素材，通 过网络搜索获得额外素材。2. 站点建立与管理（40分钟）建立站点，规划站点目录文件结构，并 对站点文件实施管理。3. 网页版面布局（40分钟）认识常见的版面布局，依据用户需求， 利用布局表格设计并制作出网页的框 架。4. 图片编辑与修辞（40分钟） 运用网页编辑软件插入图像对象，并对 图像进行编排，运用图像处理软件对图 像进行简单的处理，使其适合网页呈1.以客户为主要服1.与学生通过让学务对象，根据市场分享设计生了解客的状况、公司经营商业网站户需求、设产品自身的情况等的原则，指计网站规进行综合分析，完导小组完划书、认识成以下三个方面的成需求分网页及其具体设计析调查表，

10、设计软件，（1） 首页设计指导学生来让学生（2）网站整体结根据调查完成产品构设计表获取客宣传网站（3） 发布网站户需求信的站点和2.小组讨论设计r丿息页面设计，“七彩云南”主题2.分析校最终上传旅游网站的布局图园网的布网站文件现。5. 文字编辑与修辞（40分钟） 运用网页编辑软件输入文字，并对文 字、段落进行排版，使其适合网页呈现。6. 内容页制作与超链接（40分钟） 使用网页编辑工具，制作出与主页风格 一致、图文并茂的内容页。使用超链接 实现页面间的链接。7. 网站发布（40分钟）通过FTP客户端工具上传网站文件，实 现网站对外发布，并能对网站文件进行 维护管理。3.填写网站内容规局图，引导

11、并进行发划表学生小组布4.学生通过辅助教设计主题材和上网查找资网站布局料，分组讨论，讨图论后展示讨论成果3.根据客5.通过模仿教师的户需求分操作学生独立完成析调查表站点的建立，小组填写网站完成整个小组网站规划表的站点建立4.对学生 的讨论展 示进行引 导5.展示站 点建立的 方法（教学评价）教学活动：检查（80 分钟）学习内容学生活动教师活动设计意图 和资源准 备1.提交作品（10分钟）1.学生自对网页进通过展示2.展示成果（40分钟）我检查评行测试，重成果，让学3.交流总结经验（10分钟）价自己的点对做得生了解自4修改完善作品（30分钟）作品不理想的己的学习2.提交作地方进行成果，激起品分析

12、，针对学生的兴3.展示成学生在完趣，交流总果：小组之成任务过结经验主间相互展程中遇到要是让学示自己的的普遍问生认识到工作成果，题进行点自己的不评估作品 完成质量4.小组间 相互检查 作品，并提 出修改意 见交流并 总结经验评，并将技 术文件归 档，提供规 范化技术 文档供学 生参考。足，以便继 续努力。修 改完善作 品为以后 的课程做 铺垫。（教学评价）教学活动：评价（80分钟）学习内容学生活动教师活动设计意图 和资源准 备1. 教师评价小组作品2. 完成作品检查表填写1. 听取教 师的评价 意见2. 填写作 品检查表1. 指导学 生对自己 的作品进 行评价，包 括学生的 自评和学 生互评2.

13、 指导学 生对其它 同学的作 品进行评价3. 对学生 的作品进 行评价4. 指导学 生填写作 品检查表（教学评价）广州市技师学院广州市高级技工学校31课后任务布置1、优化网站2、对网站进行维护管理教学反思广州市技师学院广州市高级技工学校广州市技师学院广州市高级技工学校创意型网站开发一一主题网站建设学习任务：建设主题网站学习目标通过完成本次任务，学生能够通过多方调研明确客户需求，撰写需求确认分析说明 书；通过组内讨论，做好网站开发详细计划，撰写项目工 作计划表；通过小组分工合作，自主探究学习，设计有特色的网 站；通过测试，发现存在问题并提出解决方案；能够展示小组作品的优势和特色，并能客观评价他

14、人；通过基于工作情境的角色扮演，熟悉网站开发的工作 流程，并从中获得沟通表达，解决问题的经验，体验 团队合作与信息共享的乐趣。建议课时：16课时广州市技师学院广州市高级技工学校资讯【任务描述】小李刚刚通过应聘进入了一家网页制作公 司，公司规模不大，主要业务是承接各类网站的制作。 现在公司刚接了四个不同的制作网站业务，分别是 花卉、 海洋公园、环保、潮流， 由于公司人数不多，所以小李要独立负 责其中一个网站的建设，由于时间紧迫，现要求小李选 择其中一个网站，并与策划部进行快速沟通和需求分析， 完成资料的整理和素材的简单加工，设计出基本框架， 再通过网页编辑工具完成网页版面的制作和内容元素的 编辑

15、，最后通过公司服务器发布网站到互联网上。明确任务后，教师帮助学生理解任务要求、分析任务, 并介绍创建站点、绘制草图、表格在页面布局中的作用， 同时提供获取资讯的方法和途径等信息。学生根据老师 的提示及任务，寻找完成任务所需要的资料。例如：1、浏览相关主题网站，参考网页布局结构2、制作网站总体设计说明书3、收集网页素材资源，包括图片、介绍文字、视频等。决策广州市技师学院广州市高级技工学校在教师协调下学生自愿分组，进行探究式学习，学 生经过讨论以小组方式拟定工作过程，确定网页素材， 网页表格的添加方式，辅助的选用，美化设计等，教师 听取学生的决策意见，提出可行性方面的质疑，提供指 导意见，帮助形成

16、方案并指导学生进行方案优化，最终 做出决策，形成团队实施方案。1、用户访谈，收集需求通过“策划部门充分沟通，了解专题网站的基本要求, 浏览策划部门提供的资料，收集各种需求网站名称脚本支持纯 HTML所用域名数据库支持否负责部门策划部联系人需求访谈记录广州市技师学院广州市高级技工学校2、引导需求要点1. 通过与用户沟通，引导用户提出具体需求2. 指导用户选择与网站主题相关的域名，要便于访问者 使用3. 根据所能提供的条件，明确网站建设的规模4. 根据用户的实际情况确定主页要呈现的内容和方式5. 明确网站所米用的语言6. 明确页面的宽度和色彩风格广州市技师学院广州市高级技工学校7. 明确导航项目和

17、子页内容呈现方式8. 明确开发时间和后期维护要求3、需求说明确认网站名称脚本支持所用域名数据库支持负责部门联系人需求要点客户意见和确认字计划在需求分析的基础上，网站建设负责人根据实际情广州市技师学院广州市高级技工学校况，明确实施目标，确定实施方案，并将其递交给客户， 由其负责人签字确认XXXXX公司网站建设方案书、背景着重陈述建站的意义和目的一、系统分析1、开发环境明确所米用的网页脚本语言，静态网页这 部分要求比 较简单2、版面要求陈述版面的宽度、长度、色彩搭配、总体风格等情况3、支持语言明确选择简体中文，还是米用多语言二、设计方案1、网站结构建议以列表的方式将网站各栏目分层呈现出来2、分块说

18、明对每一栏目进行详细说明，也可以配合简图四、网站测试与维护陈述网站测试验收的环节，明确后期的维护工作如何开 展以及双方的职责广州市技师学院广州市高级技工学校五、进度安排 陈述网站开发各阶段时间和总工期六、费用说明建议以列表的方式罗列域名、服务器配置、网站开发、 更新维护、推广等各环节的费用客户意见：字： 工作计划表:计划计划内容计划完成时间负责人设计网站规划 书创建网站的站占八、绘制首页的页 面布局草图， 规划网站页面布局结构制作网站首页制作网站分页发布网站广州市技师学院广州市高级技工学校实施学生根据计划方案完成设计和模拟，做好相关资料 的记录，教师监督学生的学习过程，通过【引导问题】 和【学

19、习思考】培养学生分析问题、解决问题的能力， 纠正学习偏差。教师下发学习任务，学生根据学习任务做好完成任 务的计划，教师对任务重点难点进行讲解和分析，学生 认真做好知识点记录，并安排好完成计划的时间和步骤, 重点掌握重要知识点，使学习计划能够按时完成，根据 计划方案操作完成设计任务，并做好相关记录。由于刚开始接触网页制作，学生对软件的使用都还 没有基础，因此，本任务应先由教师分模块演示并讲解 一些重要操作，学生同步进行模仿训练。而对知识掌握 得相对比较熟练、操作比较快的学生，在操作过程中如 果遇到问题，教师可引导学生查找相关的教材、教学参 考书中的相关内容或通过网络获取相关内容，弓I导他们 解决

20、问题。而那些对知识把握得较慢的学生，则可详细广州市技师学院广州市高级技工学校讲解或建议学生反复学习相关章节的内容。鼓励小组成 员在工作过程中互相帮助，解决在完成任务中所遇到的 问题。任务一：准备工作一、任务目标能够浏览并整理客户提供的资料和素材。能够通过 网络搜索获得素材。二、任务实现1. 小组整理提供的资料和素材，对不足够的素材通 过网络查找补充客户提供的资料和素材往往随机存放，显得比较混 乱。为了便于认识需求和后续的制作，需要将其整理、 归类。在此过程中，利用资源管理器运行文件夹整理， 熟悉文件夹和文件的建立、复制、移动、删除等操作， 从而增强对客户业务流程的认识，拓展后续制作的思路 任务

21、二：站点建立与管理一、任务目标能够建立站点与主页，规划好站点目录文件结构， 并对站点文件实施管理，二、任务实现站点创建与管理（1）新建站点广州市技师学院广州市高级技工学校站点不同于网页，一个站点不仅包含大量的网页文 件，还包括图片、动画。、视频、音频等文件，并且这些 文件是相互关联的，需要通过创建一个站点来对网站各 类元素进行集中管理。(2)站点管理可以通过在站点中创建、复制、删除文件夹和文件 对象来构建网站文件系统。一个网站编辑工具可以创建 许多站点，可以对它们进行统一管理，包括站点信息的 修改、站点的复制与删除、站点的导出与导入等操作。 网站目录结构规划在所创建的站点中规划好目标结构。 多

22、站点管理将站点导出，当系统重装或更换计算机后可以重新 导入文件，减少重新工作量。任务三：网页版面布局一、任务目标认识常见的版面布局，能够依据用户需求，利用布 局表格工具设计并制作出网页框架。二、任务实现1. 小组讨论制定网站主要布局形式并绘制草图。2. 小组制作版面布局，并定稿 任务四：图片编辑与修辞广州市技师学院广州市高级技工学校、任务目标能够运用网页编辑软件插入图片对象，并对图片 进行编排能够运用简单的处理，使其适合网页呈现。二、任务实现小组成员通过浏览整理后的资料包，找到合适的 图片，插入网页相应的位置，如果图片大小与页要求不符，不要在网页编辑软件中对图片进行大范围，拉伸 或缩小，要借助

23、其他图像处理软件进行处理后再插入， 图片插入网页后会弹出保存对话框此时保存的文件 名不要使用中文，浏览器对中文文件名不能很好的支持。任务五：文字编辑与修辞一. 任务目标能够运用网页编辑软件输入文字，并对文字、段 落进行排版，使其适合网页呈现。二、任务实现1 小组确定导航和栏目标题，使用哪种类型的导 航。2 文本区域的排版，在排版中使用 CSS样式，使 网站的风格统一。任务六：内容页制作与超链接一、任务目标 能够使用网页编辑工具，制作出与主页风格一致、广州市技师学院广州市高级技工学校图文并茂的内容页。能够使用超链接技术，实现网页之间的链接，建立页面之间的关联。二、任务实现1、内容页制作主页制作完毕后，还有大量的内容页需要制作，一般情 况下，主页与内容页的风格应保持一致，小组成员各自 负责一个分页面的制作。2.超链接小组把所有完成任务好的页面进行超链接，并没测试。填写主页尾部电子邮箱，并做好电子邮箱的链接。填写主页尾部QQ并做好对应QQ用户的应用程序的链 接。任务七：网站发布一、任务目标能够通过常用FTP客户端工具上传网站文件，实时网 站对外发布，并能进行网站文件的维护管理。二、任务实现将制好的网站通过leap