网页制作教学设计公开课

一体化课程教案（首页）

一体化课程教案（内页）

1

2

3

5

6

7

8

广州市技师学院 广州市高级技工学校

创意型网站开发——主题网站建设

学习任务：建设主题网站

学习目标

通过完成本次任务，学生能够

●通过多方调研明确客户需求，撰写需求确认分析说明书；

●通过组内讨论，做好网站开发详细计划，撰写项目工作计划表；

●通过小组分工合作，自主探究学习，设计有特色的网站；

●通过测试，发现存在问题并提出解决方案；

●能够展示小组作品的优势和特色，并能客观评价他人；

●通过基于工作情境的角色扮演，熟悉网站开发的工作流程，并从中获得沟通表达，解决问题的经验，

体验团队合作与信息共享的乐趣。

建议课时：16课时

资讯

【任务描述】小李刚刚通过应聘进入了一家网页制作公司，公司规模不大，主要业务是承接各类网站的制作。现在公司刚接了四个不同的制作网站业务，分别是花卉、海洋公园、环保、潮流，由于公司人数不多，所以小李要独立负责其中一个网站的建设，由于时间紧迫，现要求小李选择其中一个网站，并与策划部进行快速沟通和需求分析，完成资料的整理和素材的简单加工，设计出基本框架，再通过网页编辑工具完成网页版面的制作和内容元素的编辑，最后通过公司服务器发布网站到互联网上。

明确任务后，教师帮助学生理解任务要求、分析任务，并介绍创建站点、绘制草图、表格在页面布局中的作用，同时提供获取资讯的方法和途径等信息。学生根据老师的提示及任务，寻找完成任务所需要的资料。例如：

1、浏览相关主题网站，参考网页布局结构

2、制作网站总体设计说明书

3.收集网页素材资源，包括图片、介绍文字、视频等。

决策

在教师协调下学生自愿分组，进行探究式学习，学生经过讨论以小组方式拟定工作过程，确定网页素材，网页表格的添加方式，辅助的选用，美化设计等，教师听取学生的决策意见，提出可行性方面的质疑，提供指导意见，帮助形成方案并指导学生进行方案优化，最终做出决策，形成团队实施方案。

1、用户访谈，收集需求

通过“策划部门充分沟通，了解专题网站的基本要求，浏览策划部门提供的资料，收集各种需求

2、引导需求要点

1.通过与用户沟通，引导用户提出具体需求

2.指导用户选择与网站主题相关的域名，要便于访问者使用

3.根据所能提供的条件，明确网站建设的规模

4.根据用户的实际情况确定主页要呈现的内容和方式

5.明确网站所采用的语言

6.明确页面的宽度和色彩风格

7.明确导航项目和子页内容呈现方式

8.明确开发时间和后期维护要求

3、需求说明确认

计划

在需求分析的基础上，网站建设负责人根据实际情况，明确实施目标，确定实施方案，并将其递交给客户，由其负责人签字确认

工作计划表：

实施

学生根据计划方案完成设计和模拟，做好相关资料的记录，教师监督学生的学习过程，通过【引导问题】和【学习思考】培养学生分析问题、解决问题的能力，纠正学习偏差。

教师下发学习任务，学生根据学习任务做好完成任务的计划，教师对任务重点难点进行讲解和分析，学生认真做好知识点记录，并安排好完成计划的时间和步骤，重点掌握重要知识点，使学习计划能够按时完成，根据计划方案操作完成设计任务，并做好相关记录。

由于刚开始接触网页制作，学生对软件的使用都还没有基础，因此，本任务应先由教师分模块演示并讲解一些重要操作，学生同步进行模仿训练。而对知识掌握得相对比较熟练、操作比较快的学生，在操作过程中如果遇到问题，教师可引导学生查找相关的教材、教学参考书中的相关内容或通过网络获取相关内容，引导他们解决问题。而那些对知识把握得较慢的学生，则可详细讲解或建议学生反复学习相关章节的内容。鼓励小组成员在工作过程中互相帮助，解决在完成任务中所遇到的问题。

任务一：准备工作

一、任务目标

能够浏览并整理客户提供的资料和素材。能够通过网络搜索获得素材。

二、任务实现

1.小组整理提供的资料和素材，对不足够的素材通过网络查找补充

客户提供的资料和素材往往随机存放，显得比较混乱。为了便于认识需求和后续的制作，需要将其整理、归类。在此过程中，利用资源管理器运行文件夹整理，熟悉文件夹和文件的建立、复制、移动、删除等操作，从而增强对客户业务流程的认识，拓展后续制作的思路。

任务二：站点建立与管理

一、任务目标

能够建立站点与主页，规划好站点目录文件结构，并对站点文件实施管理，

二、任务实现

站点创建与管理

（1）新建站点

站点不同于网页，一个站点不仅包含大量的网页文件，还包括图片、动画。、视频、音频等文件，并

且这些文件是相互关联的，需要通过创建一个站点来对网站各类元素进行集中管理。

（2）站点管理

可以通过在站点中创建、复制、删除文件夹和文件对象来构建网站文件系统。一个网站编辑工具可以创建许多站点，可以对它们进行统一管理，包括站点信息的修改、站点的复制与删除、站点的导出与导入等操作。

①网站目录结构规划

在所创建的站点中规划好目标结构。

②多站点管理

将站点导出，当系统重装或更换计算机后可以重新导入文件，减少重新工作量。

任务三：网页版面布局

一、任务目标

认识常见的版面布局，能够依据用户需求，利用布局表格工具设计并制作出网页框架。

二、任务实现

1．小组讨论制定网站主要布局形式并绘制草图。

2．小组制作版面布局，并定稿

任务四：图片编辑与修辞

—﹑任务目标

能够运用网页编辑软件插入图片对象，并对图片进行编排能够运用简单的处理，使其适合网页呈现。

二﹑任务实现

小组成员通过浏览整理后的资料包，找到合适的图片，插入网页相应的位置，如果图片大小与页要求不符，不要在网页编辑软件中对图片进行大范围，拉伸或缩小，要借助其他图像处理软件进行处理后再插入，图片插入网页后会弹出‘保存’对话框此时保存的文件名不要使用中文，浏览器对中文文件名不能很好的支持。

任务五:文字编辑与修辞

一．任务目标

能够运用网页编辑软件输入文字，并对文字、段落进行排版，使其适合网页呈现。

二、任务实现

1．小组确定导航和栏目标题，使用哪种类型的导航。

2．文本区域的排版，在排版中使用CSS样式，使网站的风格统一。