《网页设计与制作》相关资源教学设计职业活动教学设计(第2章)

1、职业活动教学设计单 元 名 称第二早商务网页布局与设计学时8单 元 简 介网站建设是一工程的性很强的工作，一般包括客户需求分析、网站栏目规划、网页版 面设计及草图绘制、网页效果图设计与制作、前台页面制作、前后台网站系统集成等几个 环节。本章主要讲述网站首页的版面设计及草图绘绘制，具体包括网页版式设计、网页颜 色搭配及文字和图片的编排，最后绘制出网站首页的草图。能力目标1、熟练掌握网页风格设计要点2、熟练掌握网页内容筹划3、熟练掌握网页布局草图的绘制实 训 内 容1、单兀综合实训： 企业网站首页草图绘制实训背景同实训一在实训一完成的根底上，为该网站首页确定网页风格并绘制草图。2、技能训练技能训练

2、2-1:典型竞争对手网站筛选与比照分析请针对上述任务教材中已选取一家典型网站，筛选另外两家网站， 并进行比照分析，将相关分析结论填入下表见教材表2-1:竞争对手网站筛选与比照分析技能训练2-2:网页配色分析请挑选国内知名的两家大型电子商务网站，分析其首页颜色的搭配情况，并将相应的结果填入下表见教材表2-2:大型电子商务网站配色方案分析技能训练2-3:子页面版式设计请依据上述任务中的网站首页版式教材中已完成首页版式设计，设计“产品展示子页面的版式，对其中文字和图片的编排方式说明理由，并绘制出“产品展示” 贝囿的示意图。技能训练2-4:使用Excel绘制网页草图请依据上述任务中 Word版网页草图

3、教材中已完成该草图绘制，在Excel中绘制出相应的草图。相 关 知 识网页配色主色调、辅助色J ;网页版式国字型、拐角型、框架型、“回字型、自由式、“另类结构；文字和图像编排；网页草图。教 学 设 计【教学方法设计】1以“任务驱动式为主要教学模式。教师通过任务把各教学目标和内容后机地 结合在一起，使学生置身于提出问题、思考问题、解决问题的动态学习过程中。学生完成 任务的同时，也完成了需要到达的学习目标的学习。2采用协作学习的教学模式。 学生在与他人进行交流与沟通的同时，互相取长补短，共同进步。3创设学习情境，激发学生的学习兴趣。 教师在导入新课时可演示不向层次的优秀 网站作品，例如国内外著名的

4、网站、优秀个人网站、教师本人制作的网站、往届学生的作 品。这些作品不但能提高学生的鉴赏能力，还可以提高学生的学习兴趣和求知欲望。【教学设计思路】本次课主要偏重实践，又有一定的理论知识。如果教师讲解得太多就会显得枯燥，因 此本次课的设计思路是从具体的目标任务入手，引导学生进行观察、思考、分析、讨论， 最后得出解决问题的方法，形成解决问题的方案，到达从理论到实践应用的目的。整个教学过程围绕赏-析-演-练-评展开。我们注重的是学生实际操作技能的培养，90分钟课堂，学生参与实践的时间比例为 50%左右。这样就让我们的学生在实践中学到真知， 与时也培养他们小组协作能力与合作精神。教师的主要任务是在于积极

5、地引导与调动学产 生，鼓励学生积极、主动地实践，从而完成任务。【教学过程设计】本学习单元共8课时：任务一网页风格设计2课时任务二网页草图绘制2课时单元综合实训课内2课时技能训练2课时具体时间安排及教学过程如卜表：教学内容教师活动学生活动教学资源观摩典 型案例、 导入新 课5分 钟课前引导学生观摩典型案例， 激发学生开发网站的热情， 引 导学生思考如何开发网站？ 介绍开发网站的一般过程。思考阱理解开 发网站的一般 过程：规划一设 计一实现一发 布管理前二个 步骤对应具体 内 容 见WYT020001 图WYT020001网站建设业务 流程图WYT010115-WYT010164 韩版风格网页样板

6、库选 用WYT010166-WYT0101215 欧版风格网页样板库选 用工程背 景概述 及分析 10分钟讲解工程背景，并做分析说 明。教师应特别强调草图绘制 的重要性，可给出本工程最终 作品WYT020212 网站首页 草图，使学生形成初步的感 性认识。邀请后,定花 卉苗木行业家 庭背景的学生 作一些简要介 绍，使学生对该 行业有一初步 认识；基于WYT020212图，初步理解本 工程的任务分 解。WYT020212 网站首页草 图任务1: 网页风 格设计 -竞争 对手网 站比照 分析25 分钟要求学生选取一到两豕网站， 教师进行点评后，引用 WYT020211 百度指数例如 图，指出利用白

7、度搜索相关网 站的方法。并以 WYT020212 典型的苗木基地网站首页截 图为例子，指出筛选典型的网 站的原那么。在此根底上给出 典型网站的评价依据 WYT020213 百度权重和 Google PR值查询结果图，并 分析网站配色、布局、内容组 织、栏目结构WYT020214典型网站栏目结构分析案例 图等学生自行选取 典型网站，并给 出理由，在教师 的组织下进行 讨论。教师点评 后，在教师的讲 解下，学习并理 解典型网站选 取与评价的方 法，理解 WYT020212 图 给出的网站的 典型性。WYT020211白度指数例如 图WYT020212典型的苗木基 地网站首页截图WYT020213

8、百度权重和 Google PR值查询结果图任务1: 网页风 格设计 一网页 配色25 分钟教师展示WYT020215冷暖色 比照图，讲述网页配色的根本 概念和方法；给出图片： WYT020217 色划、图，讲解网 贞配色的根本工具的使用。在此根底上，可引用 WYT020216辅助用色例如图 组织学生课堂讨论学生在理解了 网页配色的概 念及方法后，在 教师的引导卜 讨论WYT020216 图 中网页的配色， 并 借 用WYT020218 模 板无忧在线配 色工具使用界 面图所示工具 完本钱工程配 色方案确实定WYT020215冷暖色比照图WYT020216辅助用色例如 图WYT020217 色划

9、、图WYT020218模板无忧在线 配色工具使用界面图任务1: 网页风 格设计 一网页 版式设 计10 分钟使用动回 WYD020211网页布 局引入教学内容。通过 WYT020109 F型热点图，强 调网页版式设计的意义及重 点，并以WYT020210-WYT020215 给 出的样例分析讲解常见各种 网页版式。在理解版式设 计要点及了解 常见版式类型 的根底上，答复 WYT020212 所 示网页的版式， 并讨论确定本 工程网站首页 拟采用的版式。WYD020211网贝布局WYT020109 F型热点图WYT020210 国字型网页布 局样例WYT020211拐角型网页布 局样例WYT02

10、0212 框架型网页布 局样例图WYT020213 回字型结 构布局样例WYT020214自由式结构布 局样例WYT020215 另类结构 布局样例图WYT020216首页版式设计 示意图任务1: 网页风 格设计 -文字 和图像 编排5 分钟教师引用 WYT020217、WYT020218、WYT020219 讲 解网贝中文字和图像编排对 商务诉求表达的影响力， 要引 起学生足够的重视。教师讲解完后， 讨论并给出工 程网站首页文 字与图像的编 排方杀。WYT020217文字编排样例 图WYT020218 图像大小的 控制效果样例WYT020219 图像块状编 排样例课后实 训技能训练2-1 :

11、典型竞争对手 网站筛选与比照分析技能训练 2-2 WYD020212： 网页配色分析技能训练2-3:子页面版式设 计课后完成WYD020212技能训练2-2任务2: 草图绘 制-网 站栏目 设计40 分钟教师可组织学生分组讨论，要 求各组设计出网站的栏目，进 行交流点评后，以 WYT020211为样例，强调本 工程栏目设计的要点注意样 例中栏目的先后顺序及强调 的营销理念。基于上一学习 单元及课后实 训结果，分组讨 论设计网站栏 目结构。WYT020211网站栏目结构任务2: 草图绘 制-首 页内容 组织40 分钟教师可组织学生在给定栏目 前提下，讨论制定首页内容组 织方案，并进行点评。 WY

12、T020212 为参考样例，并 指出复杂网贝草图绘制中可 使用 Excel 工具WYT020213 为样例在确定网站栏 目有前提下，分 组讨论首页内 容组织方案WYT020212 网站首页草 图WYT020213 Excel 中绘制 的网贝草图任务2: 草图绘 制-结 构参数 设定10 分钟教师给出WYT020214页面结 构参数样例图，讲解网页尺寸 相关限定时应注意的问题，为 后续单元的学习做一铺垫。领悟理解WYT020214页面结构参数样例图课后实 训技能训练2-4：使用Excel绘制网贝草图课后完成单元实 训4课 时企业网站首页草图绘制使用动画WYD020000 企业网站草图 绘制完成实训WYD020000企业网站草图绘制教 学 资 源WYT020001、WYT010115-WYT010164、WYT010166-WYT0101215、WYT020212 、WYT020211、WYT020212、WYT020213、WYT020215、WYT020216、WYT020217、WYT020218、WYD020211、WYT020219、WYT020210、WYT020211、WYT020212、WYT020213、W