一体化课程教学案-基本型网站开发

一体化课程教案（首页）

课程网页制作授课教师

课题（项目）

基本型开发审批

名称

学习任务基本型开发授课课时24

授课日期年月日至年月日授课班级

小刚刚通过应聘进入了一家旅游公司，公司让他负责的维护与更新工作。公司为了能在

金秋旅游节活动中迅速抢占商机，推出了“七彩”精品线路，希望通过制作专题达到增

项目（任务）

强宣传和服务客户的效果。由于时间紧迫，现要求小与策划部进行快速沟通和需求分析，

描述

完成资料的整理和素材的简单加工，设计出基本框架，再通过网页编辑工具完成网页版

面的制作和容元素的编辑，最后通过公司服务器发布到互联网上。

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

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

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

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

教学目标

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

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

•通过基于工作情境的角色扮演，熟悉开发的工作流程，并从中获得沟通表达，解决

问题的经验，体验团队合作与信息共享的乐趣。

分析客户需求；设计规划书；创建站点；设计网页版面布局；素材编辑与修辞；容页制

作与超。

化解方法：

教学重点

1）获取信息。向学生提供参考书籍、资料。

2）组织讨论。组织学生以小组工作的形式，认真分析、讨论客户要求，制定规划书。

3）个别指导。认真观察网页版面布局，准备素材。

4）教师演示。在是大部分学生遇到类同的操作技术问题时进行示教学。

使用Dreamweaver进行网页布局；容页制作；页面间的超。

教学难点化解方法：

1）小组讨论。组织小组讨论，使学生的规划方案逐步清楚，逐步合理。

2）反复修改。组织学生在讨论的过程中，在容页的制作中，发现问题时作出合理的修改。

如，引导学生修改不合理的工序划分、容页的制作等。

3）教师指导。指导学生分析各组版面布局的利弊。在制作阶段，针对个别基础较差的学

生，在版面的布局和页面间的超中给予指导。

4）总结点评。在学生完成任务后反馈时，组织学生对各小组的进行功能和页面布局的点

评。

该班的学生是一年级下学期的学生，刚职业认知阶段的前半阶段的课程，有计算机的基

础知识，学生是没有学过DW软件的，做为新学习者，现根据客户需求，开发一个“七彩”

旅游专题，进行宣传推广旅游线路。该以信息发布、产品介绍、在线销售、顾客服务、

提升品牌形象为主要功能和目的。学生在学习任务中首先要进行客户需求分析，制定设

计书，并进行创建站点和管理站点，然后在已创建的站点上进行主页、页设计完善功能，

并使用多种工具进行网页美工，最后发布与管理已建好的，根据公司的要求，更新和维

护。

•课程地位分析

职业认知职业培养职业实践

计算机应用图像处理顶岗实习

常用软件应用电子支付毕业设计

学情分析

网络客户管理

办公自动化网上开店实务

网络销售谈判网店装修实务

广告摄影与后期如1EXCEL商务应用

电子商务网页制作现代物流技术

电子商务师实训

依据工学结合一体化课程体系的开发方法，召开实践专家访谈会、人才

培养方案论证会，确定如上图所示的课程结构。经分析可知，《电子商务网

页制作》课程是电子商务专业的一门职业认知课程，是在学生具备计算机应

用基础知识的基础上，采取项目教学法，使学生掌握制作电子商务基本网页

的能力，同时训练学生运用DW软件制作网页的工作能力，为学生下一步的网

上开店实务和网店装修实务等课程的学习奠定一个扎实的操作技能的关键课

程。因此，本课程对实现电子商务专业的人才培养目标的实现，起重要的支

撑和促进作用。

•学习容分析

本门课程是在企业调研基础上，坚持工作过程系统化原则，反复讨论设

计而成，由基本型开发、标准型开发、创意型开发、商业型开发，共4个学

习任务组成。这些学习任务以“电子商务网页制作”为主线，项目由简单到

复杂，由封闭到开放，层层推进。本项目是由7个子任务构成的（如上图所

示），通过完成这7个任务可以完成一个基本的完整，是后面几个的项目完

成的基础。就其设计意图及所具备的功能来看，让学生在学习该门课程容前

期，起到总体基本认知作用。

L引导文教学法

在课堂教学实施过程中，教师通过设置一系列与学习目标相关联的引导

问题，引导学生独立思考和自主学习，从而掌握新知识、新技术，并促使学

生把学到的理论知识自觉地应用于实践，达成学习目标。这种方法既培养了

学生独立学习、计划、实施和检查的能力，又培养了学生分析和解决问题的

教学策略能力。

2.小组合作学习法

学生以小组为单位，进行合作学习与讨论，充分激发个体潜能，融合集

体智慧，促进解决项目需求分析、设计规划书等相关问题，从而提高学习和

工作的效率，达到较好地完成学习任务的目的。这种方法有助于培养学生的

合作精神、组织协调能力和沟通能力。

3.演示教学法

当学生在遇到问题，且难于解释时，进行操作演示，方便学生理解与学

习。如站点的建立与管理，网页版面的布局、图片的设置、超的设置等问题，

均可能需要示教学。

4.任务驱动法

教师通过布置课前作业来下达学习任务一一“七彩”的制作。学生根据

任务要求，借助学习材料，进行自主探索和互动协作的学习实践活动；在课

堂上，学生在教师的指引下，根据学习任务要求，结合工作过程要求，一步

步地完成任务，从而达成既定的学习目标。这种方法改变了以往“教师讲，

学生听”、以教定学的被动教学模式，有利于激发学生的学习兴趣，培养学

生分析问题、解决问题的能力，提高学生自主学习及与人协作的能力。

5.案例分析法

在教学活动“检查”环节中，以学生的作品“七彩”为案例进行优劣分析，

总结得失，分析改进方向。例如，经过对自身制作的工作过程的分析，学生

可归纳出的优劣点，养成分析问题、归纳现象的习惯。

场地教学楼409电子商务实验室

教学工具多媒体计算机、白板、幻灯机、资料柜、因特网

资源

准备耗材设计图纸、彩色画笔

其他

课前学习

浏览各类的电子商务

任务

一体化课程教案（页）

教学活动1：资讯（80分钟）

学习容学生活动教师活动设计意图和资源准备

1.任务描述（10分钟）1.学生进行分组组1.帮助学生理解任1.通过发布任务，

【任务描述】小刚刚通过应聘进入了一家旅游公司，公司让他负责的维护与更新工作。队（每5~6人一组），务要求、分析任务让学生了解任务，进

公司为了能在金秋旅游节活动中迅速抢占商机，推出了“七彩”精品线路，希望通过制组成这个任务的合作2.介绍创建站点、而让学生围绕任务进

作专题达到增强宣传和服务客户的效果。由于时间紧迫，现要求小与策划部进行快速沟伙伴绘制草图、表格在页行任务相关资料的收

通和需求分析，完成资料的整理和素材的简单加工，设计出基本框架，再通过网页编辑2.根据老师的提示面布局中的作用，同集。

工具完成网页版面的制作和容元素的编辑，最后通过公司服务器发布到互联网上。及任务，寻找完成任时提供获取资讯的方2.提供“七彩”旅

2.寻找任务所需资料（70分钟）务所需的相关资料法和途径等信息游专题的相关资料，

浏览相关产品宣传，参考网页布局结构3.学生通过上网浏公司需求。提供因特

制作总体设计说明书览相关，参考网页布网查找资料

收集网页素材资源，包括旅游景点图片的拍摄与收集，文字说明及参数局，搜集相关素材

（教学评价）

教学活动2：决策（160分钟）

学习容学生活动教师活动设计意图和资源准备

引导问题1.学生经过讨论以小组方式拟定工1.听取学生的决策1.学生在确定方案

为旅游公司设计旅游，在开始构思的时候需要充分地了解客户需求，要

达到什么目的、效果？产品有什么特点？主要的客户群体是什么？以什作过程，确定主页要呈现的容与方式、意见，提出可行性方的过程中，培养团队

么样的容服务形式出现？明确所采用的语言、明确页面的宽度面的质疑，提供指导合作能力。

1.用户访谈，收集需求（40分钟）

和色彩风格、明确导航项目和子页容意见，帮助形成方案2.在模块功能分析

学生经过分组后，进行探究式学习，学生经过讨论以小组方式拟定

呈现方式、明确开发时间和后期维护并指导学生进行方案阶段，能通过自学、

工作过程，在工作过程过角色扮演，小组与策划部门充分沟通，了解专

要求等优化，最终做出决策，讨论、提问等方式自

题的基本要求，浏览策划部门提供的资料，收集各种需求填写需求访谈

2.学生小组讨论，利用黑板，每个形成团队实施方案主学习

记录表。（主要表格见工作页）

小组展示需求要点2.指导学生讨论，3.在资料准备阶段

网站名称一“七彩云南”专题旅游网站Q脚本支持一纯HTT.1LP

对学生的展示结果指主要是培养学生的团

所用域名一L/数据库支持2否2

负责部门2策划部。联系人“

导学生进行优化队、协助、自省能力。

需求访谈记录一

3.指导学生寻找合

适的风格

2.引导需求要点（40分钟）

通过分析填写的需求访谈记录，引导学生在需求分析时重点分析的

容需求

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

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

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

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

5）明确所采用的语言

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

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

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

3.需求说明确认（80分钟）

引导小组根据需求要点分析，填写需求说明确认表。（主要表格见工

作页）

网站名称。脚本支持。

所用域名。数据库支持。

负责部门3联系人23

需求要点Q

客户意见和确认。

签字。

（教学评价）

教学活动3：计划（80分钟）

学习容学生活动教师活动设计意图和资源准备

1.在需求分析的基础上，建设负责人根据实际情况，明确实施目标，确定实施方案，1、学生分组讨论分析指导学生优化方案设要学生在这个阶段学

并将其递交客户，由其负责人签字确定。在设计方案中主要阐述以下几点(主要表需求分析表后制定相计，审定工作方案，习遇到一个项目任

格见工作页)应的设计方案制定重要节点的项目务，根据任务制定出

(1)背景2、制作详细的工作计进度检查计划完整的方案、计划，

(2)开发环境划表以便下一步方案的实

(3)版面要求施

(4)支持语言

(5)结构(以草图的方式画出的结构，分为多少个栏目)

(6)分块说明(每个栏目的具体容)

(7)测试与维护

(8)进度安排

(9)费用说明

2.在完成设计方案的基础上，小组设定工作计划表，工作计划具体到个人和时间要填

写清楚。(主要表格见工作页)

(教学评价)

教学活动4：实施（480分钟）

学习容学生活动教师活动设计意图和资源准备

任务1.准备工作(80分钟)1.以客户为主要服务对象，根据市1.与学生分享设计通过让学生了解客户

引导问题

场的状况、公司经营产品自身的情况商业的原则，指导小需求、设计规划书、

在建设的时候需要准备什么素材？有哪些素材是应该由客户提供的

等进行综合分析，完成以下三个方面组完成需求分析调查认识网页及其设计软

呢？放置素材的文件夹该如何设置？

的具体设计表，指导学生根据调件，来让学生完成产

1.整理提供的资料和素材

(1)首页设计查表获取客户需求信品宣传的站点和页面

客户提供的资料和素材往往随机存放，显得比较混乱。为了便于认识需求

(2)整体结构设计息设计，最终上传文件

和后续的制作，需要将其整理、归类。在此过程中，利用资源管理器运行

(3)发布2.分析校园网的布并进行发布

文件夹整理，熟悉文件夹和文件的建立、复制、移动、删除等操作，从而

2.小组讨论设计“七彩”主题旅游局图，引导学生小组

增强对客户业务流程的认识，拓展后续制作的思路

的布局图设计“七彩”主题旅

2.认真浏览图1—3所示的主页效果图和图1—4所示的子页效果图。

3.填写容规划表游布局图

根据的效果图决定需要哪些素材，对客户提供的素材进行重设计，使其页

4.学生通过辅助教材和上网查找3.根据客户需求分

面的要求。

资料，分组讨论，讨论后展示讨论成析调查表填写规划表

练习：

果4.对学生的讨论展

将客户提供的资料包，按预想的思路整理成整齐的资料包。

5.通过模仿教师的操作学生独立示进行引导

完成站点的建立，小组完成整个小组5.展示站点建立的

任务2.站点建立与管理(40分钟)

引导问题的站点建立方法

在建设的时候，为什么要建立站点？如何进行站点管理？6.通过模仿教师的操作和查找资6.展示网页布局的

学生作为网页制作的初学者，需要先熟悉网页制作的工具DW。料，小组完成主页和各个分页的制作方法

1.认识网页编辑工具及各页面之间的7.展示图像、文字

Dreamweaver是Macromedia公司的一款“所见即所得"的网页编辑编辑的基本方法

工具，其启动界面如图1—6所示。Dreamweave采用的是Mac机浮动面板8.对各小组完成的

的设计风格，对于初学者来说可能会感到不适应。Dreamweave对于DHTML作品进行点评，指导

的支持特别好，可以轻松实现炫目的页面特效。各小组进行优化

本项目默认以Dreamweave网页编辑工具为例展开学习。打开DW,熟

悉DW的界面，把DW界面的各组成部分填写在工作页的相应的标记框中。

2.站点创建与管理

(1)新建站点

什么是站点：站点不同于网页，一个站点不仅包含大量的网页文件，

还包括图片、动画八视频、音频等文件，并且这些文件是相互关联的，

需要通过创建一个站点来对各类元素进行集中管理。

建立站点方法：在起始界面中选择“创建新项目"》''dreamweaver站

点”，定义站点名字，输入站点名称，并选择各相应的设置。

(2)站点管理

可以通过在站点中创建、复制、删除文件夹和文件对象来构建文件

系统。一个编辑工具可以创建许多站点，可以对它们进行统一管理，包括

站点信息的修改、站点的复制与删除、站点的导出与导入等操作。

①目录结构规划

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

②多站点管理

选择“站点”f“管理站点”菜单命令，打开“管理站点”对话框，

进行站点的导入和导出。

练习：

1.尝试用dreamweaver新建一个站点。

2.为“七彩”创建站点文件夹并使用Dreamweaver进行站点管理操作并

写出详细步骤。

任务3.网页版面布局(40分钟)

引导问题

网页布局的方法有哪些？常用的网页布局是如何的？

(2)常见版面布局

设计网页时，不仅要合理安排容，也要使页面美观精致，仅仅通过对

文本和图片的堆积排列是不够的。Dreamweaver提供了表格、层和框架等

工具，可以制作出复杂的页面结构，再配合文字和图片，就可以制作优秀

的网页。

几种常见的网页布局风格。

(1)“厂”字形布局

页面顶部为标志和广告条，下方左面为主菜单，右面显示正文信息。

这是一种广泛采用的布局方式。雨点是页面结构清晰，主次分明；缺点是

规矩呆板，如果色彩搭配不当，容易令人厌烦。

(2)“国”字形布局

也称“同”字形布局，是一些大型所采用的类型，即最上面是的标题

以及横幅广告条，接下来是的一些基本信息。联系方式、声明等。

(3)"三"字形布局

者是一种简洁明快的网页布局，在国外用的比较多，国比较少见。这

种布局的特点是在页面上由横向两条色块将网页整个分割为三部分，色块

多放置广告条或更新和提示信息。

(4)“川”字形布局

整个网页在垂直方向分为三列，的容按栏目分布在这三列中，最大限

度地突出主页的索引功能。

(5)Flash布局

这种布局是指整个网页就是一个Flash动画，画面一般比较绚丽、有

趣，是一种比较新潮的布局方式。其实这种布局与封面型结构是类似的，

不同的是由于Flash强大的功能，页面所表达的信息更丰富。其视觉效果

及听觉效果如果处理得当，会是一种非常有魅力的布局。

完成工作页中不同网页布局的分析(具体容见工作附件)

2.实施版面布局

(1)页面设置

根据用户需求和效果合理设置页面属性，包括标题、页面边距、背景,

方法如下

方法一：单击“修改”菜单，选择“页面属性”菜单项。

方法二：在下方属性面板中单击“页面属性

（2）使用布局表格进行布局

使用布局表格和布局单元格技术来实现网页版面定位。（具体方法见

工作页附件）

练习：

分析结构

任务4.图片编辑与修辞（80分钟）

引导问题

观察淘宝网，分析一下该哪些位置使用了图片，这些图片进行了什么处理

技巧？

通过浏览整理后的资料包，找到合适的图片，插入网页相应的位置，

如果图片大小与页要求不符，不要在网页编辑软件中对图片进行大围，

拉伸或缩小，要借助其他图像处理软件进行处理后再插入，图片插入

网页后会弹出‘保存'对话框此时保存的文件名不要使用中文，浏览器对

中文文件名不能很好的支持。

第一种情况：图片直接插入（七彩log。图）

将光标定位在要插入图像的位置上，执行“插入”f“图像”命令，在

弹出的“选择图像源文件”对话框中，选择图像文件或直接输入图像路径

即可。

第二种情况；图片作为单元格背景。

为了能够在图片上方输入文字等对象，有时需要将图片作背景。选中要操

作的单元格，在属性面板中寻找操作选项

第三种情况，图片处理后插入。

如果图片的大小等不适合网页放置的时候，可以通过图像处理软件进行图

片大小处理。图像处理软件很多，现在选择最简单也最常见的图片浏览工

具ACDSee来完成处理。

练习：

根据前面三种图片操作方法，将“风光美景”区域的图片排列整理

任务5.文字编辑与修辞（80分钟）

引导问题

在网页中如何输入空格？如何进行换行、换段？在网页中如何输入特殊字

符？在网页中如何输入水平线？

1.制作网页中的文字

1）确定文字输入位置。用鼠标单击网页编辑窗口中的空白区域，窗

口中随即出现闪动的光标，标识输入文字的起始位置

2）输入文本。选择适当的输入法，并在适当的位置输入一行文字，

按［ENTER］键可换段

3）按[ENTER]键，换行的行距较大，换行会形成不同的段落，而按

[SHIFT]+[ENTER]组合键，换行的行距较小，仍为同一个段落。

4）输入空格。按[CTRL]+[SHIFT]+[SPACE]组合键可输入空格

5）插入水平线。按回车键换行，执行''插入记录/HTML/水平线”命

令，为网页添加横向分隔线

6）插入特殊字符。单击“插入”一“HTML”一“特殊字符”一选

择字符

2.文本区域的排版

概况栏目有一块文本区域，需要录入文字并排版。可以通过录入文字

或通过复制操作将文字粘贴到此区域，注意：如果要复制的文本带有大量

的格式，请先通过记事本去除格式后复制。若不做任何设置，文本区域会

显得密集、混乱，不便于阅读，也不美观。对段落的设置需要用到CSS,

以使整个的文字风格统一。（具体方法见工作页）

练习：

对照效果图，完成其余容的输入和编辑，完成主页的制作。

任务6.容页制作与超（80分钟）

引导问题

在网页中怎样把页面与页面之间起来？

1..超

超是万维网的魅力所在。超简称，是指从一个网页到另一个网页对象

的关系。超是文档与文档之间的，当单击它时，超可指向另外一个页面文

件。目标可以是另外一个网页，也可以是相同网页上的不同位置，还可以

是图片、电子地址、文件，甚至是一个应用程序。以主页导航“介绍”

为例，进行超操作。选定“美食”文字标题，在文本属性面板中，单击“”

项右侧的“文件浏览”按钮，通过“选择文件”对话框，选择所要的网页

ms.htm,设置的“目标”，即网页的打开方式。

练习：

1.建立主页与其他容之间的关系，并通过预览进行测试。

2.填写主页尾部电子，并做好电子的。

3.填写主页尾部QQ,并做好对应QQ用户的应用程序的。

任务7.发布(80分钟)

引导问题

设计好企业的后，在没有空间的情况下，如何才能对进行测试呢？ns有

什么功能？

1.认识FTP和FTP操作方式

FTP(FileTransferProtoeol)是文件传输协议，是网络上两台计

算机之间传送文件的协议，FTP是在Internet上最早使用的协议之一，

它属于网络协议组的应用层。TFP客户机可以给服务器发出命令完成下载

文件，上传文件，创建或改变服务器上的目录。FTP文件传输有三种使用

方式，分别是命令方式、Web方式和FTP客户端软件方式。

(1)命令方式

运行fip218.75.2L4命令，开始连接FTP服务器，输入用户名和密

码进入FTP服务器，通过1s命令显示出文件清单。

(2)Web方式

在浏览器地址栏中输ftp：//218.75.2.14,回车，在弹出的“登录身

份”对话框中输入自己的用户名与密码，认证通过后，即可进入FTP服务

器。

图1-48FTPWeb方式

进入FTP空间后，可以通过文件操作，完成文件的上传和下载，如工作

页图1-49所示。

(3)FTP客户端软件方式

FTP客户端软件有很多，常用的FTP客户端软件有CuteFTP、Leapftp、

FlashFXP,其功能与操作方式小异，只要掌握了其中一种软件，其他软件

的使用便很容易掌握。

2.通过FTP进行发布和管理

运用上面介绍的几种FTP操作方式进行的发布和管理，现以LeapFTP

客户端软件和Dreamweaver自带的FTP联动工具为例进行介绍。(1)

LeapFTP

如果仅进行单次或临时性连接操作，可以直接在LeapFTP操作界面上

进行连接。LeapFTP有4个窗口，左上方为本地目录窗口(A),右上方为

远程目录窗口(B),左下方为队列窗口(C),右下方为状态窗口(D)。通

过在A窗口打开本地存放的目录，将要上传的文件选定后拖拉到B窗口，

在C窗口中显示上传的文件队列，所有的操作状态显示在D窗口。若要进

行永久性、固定站点操作，可以在站点管理器中进行设置并连接。

建立“七彩”站点，输入地址、用户名、密码、下次连接时不需要重

复填写，只要单击""按钮即可。

(2)Dreamweaver自带的FPT联动工具

单击“站点”菜单，选择“站点管理器”菜单项，选择相应的站点，单

击“编辑”按钮，在弹出：“站点设置”对话框中单击“高级”选项，进

行“远程信息”项的设置，设置好站点信息，在本地保存文件时，会自动

将文件上传至服务器，实现联动，使本地站点文件服务器站点文件保持一

致。

练习：

1.将制好的通过leapFTP工具上传至指定的FTP服务器。

2.写出测试的步骤和条件。

网站测试步骤」网条件

P

P*

A

*

<3

（教学评价）

教学活动5：检查（80分钟）

学习容学生活动教师活动设计意图和资源准备

1.提交作品（10分钟）1.学生自我检查评对网页进行测试，重通过展示成果，让学

学生自我检查评价自己的作品。分析不足之处，提出改进措施等，完成个人工作日志填价自己的作品点对做得不理想的地生了解自己的学习成

写。2.提交作品方进行分析，针对学果，激起学生的兴趣，

2.展示成果（40分钟）3.展示成果：小组生在完成任务过程中交流总结经验主要是

小组成员相互展示自己的工作成果，评估作品完成质量，关注团队合作，敬业勤业等职之间相互展示自己的遇到的普遍问题进行让学生认识到自己的

业素养的评估，各小组相互并提出修改建议。工作成果，评估作品点评，并将技术文件不足，以便继续努力。

3.交流总结经验（10分钟）完成质量归档，提供规化技术修改完善作品为以后

教师对网页进行分析测试，重点对做得不理想的地方进行分析，针对学生在完成任务过4.小组间相互检查文档供学生参考。的课程做铺垫。

程中遇到的普遍问题进行点评，并将技术文件归档，提供规化技术文档供学生参考。同作品，并提出修改意

时教师指引学生归纳总结，引导学生独立构建自己的经验和知识体系。见交流并总结经验

4.修改完善作品（30分钟）

继续修改作品，提交作品，展示成果。

（教学评价）

教学活动6：评价（80分钟）

学习容学生活动教师活动设计意图和资源准备

1.教师评价小组作品1.听取教师的评价1.指导学生对自己通过自评和互评，让

2.完成作品检查表填写（检查表见工作页附件）意见的作品进行评价，包学生了解自己的长处

2.填写作品检查表括学生的自评和学生和短处，继续进行改

互评进。

2.指导学生对其它

同学的作品进行评价

3.对学生的作品进

行评价

4.指导学生填写作

品检查表

（教学评价）

课后任务布置

］、优化

2：对进行维护管理

教学反思

基本型开发一一“七彩”主题旅游

学习任务：“七彩”主题旅游

学习目标

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

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

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

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

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

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

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

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

建议课时:24课时

资讯

【任务描述】小刚刚通过应聘进入了一家旅游公司，公司让他负责的维护与更新工作。公司为了能在金秋

旅游节活动中迅速抢占商机，推出了“七彩”精品线路，希望通过制作专题达到增强宣传和服务客户的效

果。由于时间紧迫，现要求小与策划部进行快速沟通和需求分析，完成资料的整理和素材的简单加工，设

计出基本框架，再通过网页编辑工具完成网页版面的制作和容元素的编辑，最后通过公司服务器发布到互

联网上。

明确任务后，教师帮助学生理解任务要求、分析任务，并介绍创建站点、绘制草图、表格在页面布局

中的作用，同时提供获取资讯的方法和途径等信息。学生根据老师的提示及任务，寻找完成任务所需要的

资料。例如：

1、浏览相关产品宣传，参考网页布局结构

2、制作总体设计说明书

3.收集网页素材资源，包括景点图片的拍摄与收集，旅游线路、景点介绍文字说明等。

决策

学习准备

1.在教师协调下学生自愿分组

2.广播教学区：多媒体广播教学设备；

3.分组实操区：配备8组工作台，每组工作台有6台电脑;

4.实物资料查询区：《DreamweaverMX2004》、导学课件

5.电子资料查询区：连接Internet提供上网搜索资料；

6.作品演示区：配备投影仪及展示板；

广

播

教

学

区

引导问题

为旅游公司设计旅游，在开始构思的时候需要充分地了解客户需求，要达到什么目的、效果？产品有什么

特点？主要的客户群体是什么？以什么样的容服务形式出现？

在教师协调下学生自愿分组，进行探究式学习，学生经过讨论以小组方式拟定工作过程，确定网页素材，

网页表格的添加方式，辅助的选用，美化设计等，教师听取学生的决策意见，提出可行性方面的质疑，提

供指导意见，帮助形成方案并指导学生进行方案优化，最终做出决策，形成团队实施方案。

1、用户访谈，收集需求

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

名称“七彩”专题旅游脚本支持纯HTML

所用域名Lyj.yunnan.数据库支持否

负责部门策划部联系人

需求访谈记录

2、引导需求要点

9）通过与用户沟通，引导用户提出具体需求

10）指导用户选择与主题相关的域名，要便于访问者使用

11）根据所能提供的条件，明确建设的规模

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

13）明确所采用的语言

14）明确页面的宽度和色彩风格

15）明确导航项目和子页容呈现方式

16）明确开发时间和后期维护要求

3、需求说明确认

名称脚本支持

所用域名数据库支持

负责部门联系人

需求要点

客户意见和确认

签字________

计划

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

由其负责人签字确认

XXXXX公司建设方案书

一、背景

着重述建站的意义和目的

二、系统分析

1、开发环境

明确所采用的网页脚本语言，静态网页这一部分要求比较简单

2、版面要求

述版面的宽度、长度、色彩搭配、总体风格等情况

3、支持语言

明确选择简体中文，还是采用多语言

三、设计方案

1、结构

建议以列表的方式将各栏目分层呈现出来

2、分块说明

对每一栏目进行详细说明，也可以配合简图

四、测试与维护

述测试验收的环节，明确后期的维护工作如何开展以及双方的职责

五、进度安排

述开发各阶段时间和总工期

六、费用说明

建议以列表的方式罗列域名、服务器配置、开发、更新维护、推广等各环节的费用

客户意见：

签字：_____________

工作计划表:

计划计划容计划完成时间负责人

设计规划书

创建的站点

绘制首页的页面布局草

图，规划页面布局结构

制作首页

制作分页

发布

实施

学生根据计划方案完成设计和模拟，做好相关资料的记录，教师监督学生的学习过程，通过【引导问

题】和【学习思考】培养学生分析问题、解决问题的能力，纠正学习偏差。

教师下发学习任务，学生根据学习任务做好完成任务的计划，教师对任务重点难点进行讲解和分析，

学生认真做好知识点记录，并安排好完成计划的时间和步骤，重点掌握重要知识点，使学习计划能够按时

完成，根据计划方案操作完成设计任务，并做好相关记录。

由于刚开始接触网页制作，学生对软件的使用都还没有基础，因此，本任务应先由教师分模块演示并

讲解一些重要操作，学生同步进行模仿训练。而对知识掌握得相对比较熟练、操作比较快的学生，在操作

过程中如果遇到问题，教师可引导学生查找相关的教材、教学参考书中的相关容或通过网络获取相关容，

引导他们解决问题。而那些对知识把握得较慢的学生，则可详细讲解或建议学生反复学习相关章节的容。

鼓励小组成员在工作过程中互相帮助，解决在完成任务中所遇到的问题。

任务一：准备工作

引导问题

在建设的时候需要准备什么素材？有哪些素材是应该由客户提供的呢？放置素材的文件夹该如何设

置？

一、任务目标

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

二、任务实现

1.整理提供的资料和素材

客户提供的资料和素材往往随机存放，显得比较混乱。为了便于认识需求和后续的制作，需要将其整

理、归类。在此过程中，利用资源管理器运行文件夹整理，熟悉文件夹和文件的建立、复制、移动、删除

等操作，从而增强对客户业务流程的认识，拓展后续制作的思路。

练一练：

将客户提供的资料包，如图1—1所示，按预想的思路整理成整齐的资料包，如图1—2所示。

文件g编辑（E）查看w）收藏@）工具（X）帮助⑻

。后退，，。•多搜索文件夹11nb

地址①）,-JF八新建文件夹vi鼠转到链接》