一体化课程教案——基本型网站开发.doc

.一体化课程教案（首页）课 程网页制作授课教师课题（项目）名 称基本型网站开发审 批学习任务基本型网站开发授课课时24授课日期年 月 日至年 月 日授课班级项目（任务）描 述小李刚刚通过应聘进入了一家旅游公司，公司让他负责网站的维护与更新工作。公司为了能在金秋旅游节活动中迅速抢占商机，推出了“七彩云南”精品线路，希望通过制作专题网站达到增强宣传和服务客户的效果。由于时间紧迫，现要求小李与策划部进行快速沟通和需求分析，完成资料的整理和素材的简单加工，设计出基本框架，再通过网页编辑工具完成网页版面的制作和内容元素的编辑，最后通过公司服务器发布网站到互联网上。教学目标通过完成本次任务，学生能够l 通过多方调研明确客户需求，撰写需求确认分析说明书；l 通过组内讨论，做好网站开发详细计划，撰写项目工作计划表；l 通过小组分工合作，自主探究学习，设计有特色的网站；l 通过测试，发现存在问题并提出解决方案；l 能够展示小组作品的优势和特色，并能客观评价他人；l 通过基于工作情境的角色扮演，熟悉网站开发的工作流程，并从中获得沟通表达，解决问题的经验，体验团队合作与信息共享的乐趣。教学重点分析客户需求；设计网站规划书；创建网站站点；设计网页版面布局；素材编辑与修辞；内容页制作与超链接。化解方法：1）获取信息。向学生提供参考书籍、资料。2）组织讨论。组织学生以小组工作的形式，认真分析、讨论客户要求，制定网站规划书。3）个别指导。认真观察网页版面布局，准备素材。4）教师演示。在是大部分学生遇到类同的操作技术问题时进行示范教学。教学难点使用Dreamweaver进行网页布局；内容页制作；页面间的超链接。化解方法：1）小组讨论。组织小组讨论，使学生的网站规划方案逐步清楚，逐步合理。2）反复修改。组织学生在讨论的过程中，在内容页的制作中，发现问题时作出合理的修改。如，引导学生修改不合理的工序划分、内容页的制作等。3）教师指导。指导学生分析各组版面布局的利弊。在制作阶段，针对个别基础较差的学生，在版面的布局和页面间的超链接中给予指导。4）总结点评。在学生完成任务后反馈时，组织学生对各小组的网站进行功能和页面布局的点评。学情分析该班的学生是一年级下学期的学生，刚职业认知阶段的前半阶段的课程，有计算机的基础知识，学生是没有学过DW软件的，做为新学习者，现根据客户需求，开发一个“七彩云南”旅游专题网站，进行宣传推广旅游线路。该网站以信息发布、产品介绍、在线销售、顾客服务、提升品牌形象为主要功能和目的。学生在学习任务中首先要进行客户需求分析，制定网站设计书，并进行创建站点和管理站点，然后在已创建的站点上进行主页、内页设计完善网站功能，并使用多种工具进行网页美工，最后发布与管理已建好的网站，根据公司的要求，更新和维护网站。l 课程地位分析职业认知职业培养职业实践计算机应用常用软件应用电子商务基础应用办公自动化网络销售谈判广告摄影与后期处理电子商务网页制作图像处理电子支付网络客户管理网上开店实务网店装修实务EXCEL商务应用现代物流技术电子商务师实训顶岗实习毕业设计依据工学结合一体化课程体系的开发方法，召开实践专家访谈会、人才培养方案论证会，确定如上图所示的课程结构。经分析可知，电子商务网页制作课程是电子商务专业的一门职业认知课程，是在学生具备计算机应用基础知识的基础上，采取项目教学法，使学生掌握制作电子商务基本网页的能力，同时训练学生运用DW软件制作网页的工作能力，为学生下一步的网上开店实务和网店装修实务等课程的学习奠定一个扎实的操作技能的关键课程。因此，本课程对实现电子商务专业的人才培养目标的实现，起重要的支撑和促进作用。l 学习内容分析本门课程是在企业调研基础上，坚持工作过程系统化原则，反复讨论设计而成，由基本型网站开发、标准型网站开发、创意型网站开发、商业型网站开发，共4个学习任务组成。这些学习任务以“电子商务网页制作”为主线，项目由简单到复杂，由封闭到开放，层层推进。本项目是由7个子任务构成的（如上图所示），通过完成这7个任务可以完成一个基本的完整网站，是后面几个的项目完成的基础。就其设计意图及所具备的功能来看，让学生在学习该门课程内容前期，起到总体基本认知作用。教学策略1.引导文教学法在课堂教学实施过程中，教师通过设置一系列与学习目标相关联的引导问题，引导学生独立思考和自主学习，从而掌握新知识、新技术，并促使学生把学到的理论知识自觉地应用于实践，达成学习目标。这种方法既培养了学生独立学习、计划、实施和检查的能力，又培养了学生分析和解决问题的能力。2小组合作学习法学生以小组为单位，进行合作学习与讨论，充分激发个体潜能，融合集体智慧，促进解决项目需求分析、设计网站规划书等相关问题，从而提高学习和工作的效率，达到较好地完成学习任务的目的。这种方法有助于培养学生的合作精神、组织协调能力和沟通能力。3演示教学法当学生在遇到问题，且难于解释时，进行操作演示，方便学生理解与学习。如站点的建立与管理，网页版面的布局、图片的设置、超链接的设置等问题，均可能需要示范教学。4.任务驱动法教师通过布置课前作业来下达学习任务“七彩云南”网站的制作。学生根据任务要求，借助学习材料，进行自主探索和互动协作的学习实践活动；在课堂上，学生在教师的指引下，根据学习任务要求，结合工作过程要求，一步步地完成任务，从而达成既定的学习目标。这种方法改变了以往“教师讲，学生听”、以教定学的被动教学模式，有利于激发学生的学习兴趣，培养学生分析问题、解决问题的能力，提高学生自主学习及与人协作的能力。5.案例分析法在教学活动“检查”环节中，以学生的作品“七彩云南”网站为案例进行优劣分析，总结得失，分析改进方向。例如，经过对自身制作网站的工作过程的分析，学生可归纳出网站的优劣点，养成分析问题、归纳现象的习惯。教学资源准备场地教学楼409电子商务实验室工具多媒体计算机、白板、幻灯机、资料柜、因特网耗材设计图纸、彩色画笔其他课前学习任 务浏览各类的电子商务网站精选范本.一体化课程教案（内页）教学活动1:资讯 （ 80分钟）学习内容学生活动教师活动设计意图和资源准备1. 任务描述（10分钟）【任务描述】小李刚刚通过应聘进入了一家旅游公司，公司让他负责网站的维护与更新工作。公司为了能在金秋旅游节活动中迅速抢占商机，推出了“七彩云南”精品线路，希望通过制作专题网站达到增强宣传和服务客户的效果。由于时间紧迫，现要求小李与策划部进行快速沟通和需求分析，完成资料的整理和素材的简单加工，设计出基本框架，再通过网页编辑工具完成网页版面的制作和内容元素的编辑，最后通过公司服务器发布网站到互联网上。2. 寻找任务所需资料（70分钟）浏览相关产品宣传网站，参考网页布局结构制作网站总体设计说明书收集网页素材资源，包括旅游景点图片的拍摄与收集，文字说明及参数1. 学生进行分组组队（每56人一组），组成这个任务的合作伙伴2. 根据老师的提示及任务，寻找完成任务所需的相关资料3. 学生通过上网浏览相关网站，参考网页布局，搜集相关素材1. 帮助学生理解任务要求、分析任务2. 介绍创建站点、绘制草图、表格在页面布局中的作用，同时提供获取资讯的方法和途径等信息1. 通过发布任务，让学生了解任务，进而让学生围绕任务进行任务相关资料的收集。2. 提供“七彩云南”旅游专题网站的相关资料，公司需求。提供因特网查找资料（教学评价）教学活动2:决策 （ 160分钟）学习内容学生活动教师活动设计意图和资源准备引导问题为旅游公司设计旅游网站，在开始构思的时候需要充分地了解客户需求，要达到什么目的、效果？产品有什么特点？主要的客户群体是什么？以什么样的内容服务形式出现？1. 用户访谈，收集需求（40分钟）学生经过分组后，进行探究式学习，学生经过讨论以小组方式拟定工作过程，在工作过程中通过角色扮演，小组与策划部门充分沟通，了解专题网站的基本要求，浏览策划部门提供的资料，收集各种需求填写需求访谈记录表。（主要表格见工作页）2. 引导需求要点（40分钟）通过分析填写的需求访谈记录，引导学生在需求分析时重点分析的内容需求1) 通过与用户沟通，引导用户提出具体需求2) 指导用户选择与网站主题相关的域名，要便于访问者使用3) 根据所能提供的条件，明确网站建设的规模4) 根据用户的实际情况确定主页要呈现的内容和方式5) 明确网站所采用的语言6) 明确页面的宽度和色彩风格7) 明确导航项目和子页内容呈现方式8) 明确开发时间和后期维护要求3. 需求说明确认（80分钟）引导小组根据需求要点分析，填写需求说明确认表。（主要表格见工作页）1. 学生经过讨论以小组方式拟定工作过程，确定网站主页要呈现的内容与方式、明确网站所采用的语言、明确页面的宽度和色彩风格、明确导航项目和子页内容呈现方式、明确开发时间和后期维护要求等2. 学生小组讨论，利用黑板，每个小组展示需求要点1. 听取学生的决策意见，提出可行性方面的质疑，提供指导意见，帮助形成方案并指导学生进行方案优化，最终做出决策，形成团队实施方案2. 指导学生讨论，对学生的展示结果指导学生进行优化3. 指导学生寻找合适的网站风格1. 学生在确定方案的过程中，培养团队合作能力。2. 在模块功能分析阶段，能通过自学、讨论、提问等方式自主学习3. 在资料准备阶段主要是培养学生的团队、协助、自省能力。（教学评价）教学活动3: 计划 （ 80 分钟）学习内容学生活动教师活动设计意图和资源准备1. 在需求分析的基础上，网站建设负责人根据实际情况，明确实施目标，确定实施方案，并将其递交客户，由其负责人签字确定。在设计方案中主要阐述以下几点（主要表格见工作页）（1） 背景（2） 开发环境（3） 版面要求（4） 支持语言（5） 网站结构（以草图的方式画出网站的结构，分为多少个栏目）（6） 分块说明（每个栏目的具体内容）（7） 网站测试与维护（8） 进度安排（9） 费用说明2. 在完成设计方案的基础上，小组设定工作计划表，工作计划具体到个人和时间要填写清楚。（主要表格见工作页）1、学生分组讨论分析需求分析表后制定相应的设计方案2、制作详细的工作计划表指导学生优化方案设计，审定工作方案，制定重要节点的项目进度检查计划要学生在这个阶段学习遇到一个项目任务，根据任务制定出完整的方案、计划，以便下一步方案的实施（教学评价）教学活动4: 实施 （ 480分钟）学习内容学生活动教师活动设计意图和资源准备任务1.准备工作（80分钟）引导问题在建设网站的时候需要准备什么素材？有哪些素材是应该由客户提供的呢？放置素材的文件夹该如何设置？1.整理提供的资料和素材客户提供的资料和素材往往随机存放，显得比较混乱。为了便于认识需求和后续的制作，需要将其整理、归类。在此过程中，利用资源管理器运行文件夹整理，熟悉文件夹和文件的建立、复制、移动、删除等操作，从而增强对客户业务流程的认识，拓展后续制作的思路2.认真浏览图13所示的主页效果图和图14所示的子页效果图。根据网站的效果图决定需要哪些素材，对客户提供的素材进行重设计，使其页面的要求。练习：将客户提供的资料包，按预想的思路整理成整齐的资料包。任务2.站点建立与管理（40分钟）引导问题在建设网站的时候，为什么要建立站点？如何进行站点管理？学生作为网页制作的初学者，需要先熟悉网页制作的工具DW。1.认识网页编辑工具Dreamweaver是Macromedia公司的一款“所见即所得”的网页编辑工具，其启动界面如图16所示。Dreamweave采用的是Mac机浮动面板的设计风格，对于初学者来说可能会感到不适应。Dreamweave对于DHTML的支持特别好，可以轻松实现炫目的页面特效。本项目默认以Dreamweave网页编辑工具为例展开学习。打开DW，熟悉DW的界面，把DW界面的各组成部分填写在工作页的相应的标记框中。2.站点创建与管理（1）新建站点什么是站点：站点不同于网页，一个站点不仅包含大量的网页文件，还包括图片、动画。、视频、音频等文件，并且这些文件是相互关联的，需要通过创建一个站点来对网站各类元素进行集中管理。建立站点方法：在起始界面中选择“创建新项目”“dreamweaver站点”，定义站点名字，输入站点名称，并选择各相应的设置。（2）站点管理 可以通过在站点中创建、复制、删除文件夹和文件对象来构建网站文件系统。一个网站编辑工具可以创建许多站点，可以对它们进行统一管理，包括站点信息的修改、站点的复制与删除、站点的导出与导入等操作。 网站目录结构规划在所创建的站点中规划目标结构。 多站点管理选择“站点”“管理站点”菜单命令，打开“管理站点”对话框，进行站点的导入和导出。练习：1尝试用dreamweaver新建一个站点。2为“七彩云南”网站创建站点文件夹并使用Dreamweaver进行站点管理操作并写出详细步骤。任务3.网页版面布局（40分钟）引导问题网页布局的方法有哪些？常用的网页布局是如何的？（2） 常见版面布局设计网页时，不仅要合理安排内容，也要使页面美观精致，仅仅通过对文本和图片的堆积排列是不够的。Dreamweaver提供了表格、层和框架等工具，可以制作出复杂的页面结构，再配合文字和图片，就可以制作优秀的网页。几种常见的网页布局风格。(1)“厂”字形布局页面顶部为标志和广告条，下方左面为主菜单，右面显示正文信息。这是一种广泛采用的布局方式。雨点是页面结构清晰，主次分明；缺点是规矩呆板，如果色彩搭配不当，容易令人厌烦。（2）“国”字形布局也称“同”字形布局，是一些大型网站所采用的类型，即最上面是网站的标题以及横幅广告条，接下来是网站的一些基本信息。联系方式、版权声明等。（3）“三”字形布局者是一种简洁明快的网页布局，在国外用的比较多，国内比较少见。这种布局的特点是在页面上由横向两条色块将网页整个分割为三部分，色块中大多放置广告条或更新和版权提示信息。（4）“川”字形布局整个网页在垂直方向分为三列，网站的内容按栏目分布在这三列中，最大限度地突出主页的索引功能。（5）Flash布局这种布局是指整个网页就是一个Flash动画，画面一般比较绚丽、有趣，是一种比较新潮的布局方式。其实这种布局与封面型结构是类似的，不同的是由于Flash强大的功能，页面所表达的信息更丰富。其视觉效果及听觉效果如果处理得当，会是一种非常有魅力的布局。完成工作页中不同网页布局的分析（具体内容见工作附件）2实施版面布局（1）页面设置根据用户需求和效果合理设置页面属性，包括网站标题、页面边距、背景，方法如下方法一：单击“修改”菜单，选择“页面属性”菜单项。方法二：在下方属性面板中单击“页面属性”。（2）使用布局表格进行布局使用布局表格和布局单元格技术来实现网页版面定位。（具体方法见工作页附件）练习：分析网站结构任务4.图片编辑与修辞（80分钟）引导问题观察淘宝网，分析一下该网站哪些位置使用了图片，这些图片进行了什么处理技巧？通过浏览整理后的资料包，找到合适的图片，插入网页相应的位置，如果图片大小与 页要求不符，不要在网页编辑软件中对图片进行大范围，拉伸或缩小，要借助其他图像处理 软件进行处理后再插入，图片插入网页后会弹出保存对话框此时保存的文件名不要使用中文，浏览器对中文文件名不能很好的支持。第一种情况：图片直接插入（七彩云南logo图）将光标定位在要插入图像的位置上，执行“插入” “图像”命令，在弹出的“选择图像源文件”对话框中，选择图像文件或直接输入图像路径即可。第二种情况；图片作为单元格背景。为了能够在图片上方输入文字等对象，有时需要将图片作背景。选中要操作的单元格，在属性面板中寻找操作选项第三种情况，图片处理后插入。如果图片的大小等不适合网页放置的时候，可以通过图像处理软件进行图片大小处理。图像处理软件很多，现在选择最简单也最常见的图片浏览工具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分钟）引导问题设计好企业的网站后，在没有网站空间的情况下，如何才能对网站进行测试呢？IIS有什么功能？1.认识FTP和FTP操作方式FTP（File Transfer Protoeol）是文件传输协议，是网络上两台计算机之间传送文件的协议，FTP是在Internet上最早使用的协议之一，它属于网络协议组的应用层。TFP客户机可以给服务器发出命令完成下载文件，上传文件，创建或改变服务器上的目录。FTP文件传输有三种使用方式，分别是命令方式、Web方式和FTP客户端软件方式。（1）命令方式运行fip命令，开始连接FTP服务器，输入用户名和密码进入FTP服务器，通过ls命令显示出网站文件清单。（2）Web方式在浏览器地址栏中输4，回车，在弹出的“登录身份”对话框中输入自己的用户名与密码，认证通过后，即可进入FTP服务器。图1-48 FTP Web方式进入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. 写出网站测试的步骤和条件。1. 以客户为主要服务对象，根据市场的状况、公司经营产品自身的情况等进行综合分析，完成以下三个方面的具体设计（1） 首页设计（2） 网站整体结构设计（3） 发布网站2. 小组讨论设计“七彩云南”主题旅游网站的布局图3. 填写网站内容规划表4. 学生通过辅助教材和上网查找资料，分组讨论，讨论后展示讨论成果5. 通过模仿教师的操作学生独立完成站点的建立，小组完成整个小组网站的站点建立6. 通过模仿教师的操作和查找资料，小组完成网站主页和各个分页的制作及各页面之间的链接1. 与学生分享设计商业网站的原则，指导小组完成需求分析调查表，指导学生根据调查表获取客户需求信息2. 分析校园网的布局图，引导学生小组设计“七彩云南”主题旅游网站布局图3. 根据客户需求分析调查表填写网站规划表4. 对学生的讨论展示进行引导5. 展示站点建立的方法6. 展示网页布局的方法7. 展示图像、文字编辑的基本方法8. 对各小组完成的作品进行点评，指导各小组进行优化通过让学生了解客户需求、设计网站规划书、认识网页及其设计软件，来让学生完成产品宣传网站的站点和页面设计，最终上传网站文件并进行发布（教学评价）教学活动5: 检查 （ 80 分钟）学习内容学生活动教师活动设计意图和资源准备1.提交作品（10分钟）学生自我检查评价自己的作品。分析不足之处，提出改进措施等，完成个人工作日志填写。2.展示成果（40分钟）小组成员相互展示自己的工作成果，评估作品完成质量，关注团队合作，敬业勤业等职业素养的评估，各小组相互并提出修改建议。3.交流总结经验（10分钟）教师对网页进行分析测试，重点对做得不理想的地方进行分析，针对学生在完成任务过程中遇到的普遍问题进行点评，并将技术文件归档，提供规范化技术文档供学生参考。同时教师指引学生归纳总结，引导学生独立构建自己的经验和知识体系。4.修改完善作品（30分钟）继续修改作品，提交作品，展示成果。1. 学生自我检查评价自己的作品2. 提交作品3. 展示成果：小组之间相互展示自己的工作成果，评估作品完成质量4. 小组间相互检查作品，并提出修改意见交流并总结经验对网页进行测试，重点对做得不理想的地方进行分析，针对学生在完成任务过程中遇到的普遍问题进行点评，并将技术文件归档，提供规范化技术文档供学生参考。通过展示成果，让学生了解自己的学习成果，激起学生的兴趣，交流总结经验主要是让学生认识到自己的不足，以便继续努力。修改完善作品为以后的课程做铺垫。（教学评价）教学活动6:评价 （ 80 分钟）学习内容学生活动教师活动设计意图和资源准备1. 教师评价小组作品2. 完成作品检查表填写（检查表见工作页附件）1. 听取教师的评价意见2. 填写作品检查表1. 指导学生对自己的作品进行评价，包括学生的自评和学生互评2. 指导学生对其它同学的作品进行评价3. 对学生的作品进行评价4. 指导学生填写作品检查表通过自评和互评，让学生了解自己的长处和短处，继续进行改进。（教学评价）精选范本.课后任务布置1、 优化网站2、 对网站进行维护管理教学反思基本型网站开发“七彩云南”主题旅游网站学习任务：“七彩云南”主题旅游网站学习目标通过完成本次任务，学生能够l 通过多方调研明确客户需求，撰写需求确认分析说明书；l 通过组内讨论，做好网站开发详细计划，撰写项目工作计划表；l 通过小组分工合作，自主探究学习，设计有特色的网站；l 通过测试，发现存在问题并提出解决方案；l 能够展示小组作品的优势和特色，并能客观评价他人；l 通过基于工作情境的角色扮演，熟悉网站开发的工作流程，并从中获得沟通表达，解决问题的经验，体验团队合作与信息共享的乐趣。建议课时：24课时资讯 【任务描述】小李刚刚通过应聘进入了一家旅游公司，公司让他负责网站的维护与更新工作。公司为了能在金秋旅游节活动中迅速抢占商机，推出了“七彩云南”精品线路，希望通过制作专题网站达到增强宣传和服务客户的效果。由于时间紧迫，现要求小李与策划部进行快速沟通和需求分析，完成资料的整理和素材的简单加工，设计出基本框架，再通过网页编辑工具完成网页版面的制作和内容元素的编辑，最后通过公司服务器发布网站到互联网上。明确任务后，教师帮助学生理解任务要求、分析任务，并介绍创建站点、绘制草图、表格在页面布局中的作用，同时提供获取资讯的方法和途径等信息。学生根据老师的提示及任务，寻找完成任务所需要的资料。例如：1、浏览相关产品宣传网站，参考网页布局结构2、制作网站总体设计说明书3. 收集网页素材资源，包括景点图片的拍摄与收集，旅游线路、景点介绍文字说明等。决策 学习准备1. 在教师协调下学生自愿分组2. 广播教学区：多媒体广播教学设备；3. 分组实操区：配备8组工作台，每组工作台有6台电脑；4. 实物资料查询区：Dreamweaver MX2004、导学课件5. 电子资料查询区：连接Internet提供上网搜索资料；6. 作品演示区：配备投影仪及展示板； 引导问题为旅游公司设计旅游网站，在开始构思的时候需要充分地了解客户需求，要达到什么目的、效果？产品有什么特点？主要的客户群体是什么？以什么样的内容服务形式出现？在教师协调下学生自愿分组，进行探究式学习，学生经过讨论以小组方式拟定工作过程，确定网页素材，网页表格的添加方式，辅助的选用，美化设计等，教师听取学生的决策意见，提出可行性方面的质疑，提供指导意见，帮助形成方案并指导学生进行方案优化，最终做出决策，形成团队实施方案。1、用户访谈，收集需求通过“策划部门充分沟通，了解专题网站的基本要求，浏览策划部门提供的资料，收集各种需求网站名称“七彩云南”专题旅游网站脚本支持纯HTML所用域名L数据库支持否负责部门策划部联系人需求访谈记录2、引导需求要点9) 通过与用户沟通，引导用户提出具体需求10) 指导用户选择与网站主题相关的域名，要便于访问者使用11) 根据所能提供的条件，明确网站建设的规模12) 根据用户的实际情况确定主页要呈现的内容和方式13) 明确网站所采用的语言14) 明确页面的宽度和色彩风格15) 明确导航项目和子页内容呈现方式16) 明确开发时间和后期维护要求3、 需求说明确认网站名称脚本支持所用域名数据库支持负责部门联系人需求要点客户意见和确认签字 计划在需求分析的基础上，网站建设负责人根据实际情况，明确实施目标，确定实施方案，并将其递交给客户，由其负责人签字确认公司网站建设方案书一、背景着重陈述建站的意义和目的二、系统分析1、开发环境明确所采用的网页脚本语言，静态网页这一部分要求比较简单2、版面要求陈述版面的宽度、长度、色彩搭配、总体风格等情况3、支持语言明确选择简体中文，还是采用多语言三、设计方案1、网站结构建议以列表的方式将网站各栏目分层呈现出来2、分块说明对每一栏目进行详细说明，也可以配合简图四、网站测试与维护陈述网站测试验收的环节，明确后期的维护工作如何开展以及双方的职责五、进度安排陈述网站开发各阶段时间和总工期六、费用说明建议以列表的方式罗列域名、服务器配置、网站开发、更新维护、推广等各环节的费用客户意见：签字： 工作计划表：计划计划内容计划完成时间负责人设计网站规划书创建网站的站点绘制首页的页面布局草图，规划网站页面布局结构制作网站首页制作网站分页发布网站实施学生根据计划方案完成设计和模拟，做好相关资料的记录，教师监督学生的学习过程，通过【引导问题】和【学习思考】培养学生分析问题、解决问题的能力，纠正学习偏差。教师下发学习任务，学生根据学习任务做好完成任务的计划，教师对任务重点难点进行讲解和分析，学生认真做好知识点记录，并安排好完成计划的时间和步骤，重点掌握重要知识点，使学习计划能够按时完成，根据计划方案操作完成设计任务，并做好相关记录。由于刚开始接触网页制作，学生对软件的使用都还没有基础，因此，本任务应先由教师分模块演示并讲解一些重要操作，学生同步进行模仿训练。而对知识掌握得相对比较熟练、操作比较快的学生，在操作过程中如果遇到问题，教师可引导学生查找相关的教材、教学参考书中的相关内容或通过网络获取相关内容，引导他们解决问题。而那些对知识把握得较慢的学生，则可详细讲解或建议学生反复学习相关章节的内容。鼓励小组成员在工作过程中互相帮助，解决在完成任务中所遇到的问题。任务一：准备工作引导问题在建设网站的时候需要准备什么素材？有哪些素材是应该由客户提供的呢？放置素材的文件夹该如何设置？一、任务目标能够浏览并整理客户提供的资料和素材。能够通过网络搜索获得素材。二、任务实现1.整理提供的资料和素材客户提供的资料和素材往往随机存放，显得比较混乱。为了便于认识需求和后续的制作，需要将其整理、归类。在此过程中，利用资源管理器运行文件夹整理，熟悉文件夹和文件的建立、复制、移动、删除等操作，从而增强对客户业务流程的认识，拓展后续制作的思路。练一练：将客户提供的资料包，如图11所示，按预想的思路整理成整齐的资料包，如图12所示。图11图1-22.认真浏览图13所示的主页效果图和图14所示的子页效果图。图1-3图1-4任务二：站点建立与管理引导问题在建设网站的时候，为什么要建立站点？如何进行站点管理？一、任务目标能够建立站点与主页，规划好站点目录文件结构，并对站点文件实施管理，如图15所示。图1-5二、任务实现1.认识网页编辑工具Dreamweaver是Macromedia公司的一款“所见即所得”的网页编辑工具，其启动界面如图16所示。Dreamweave采用的是Mac机浮动面板的设计风格，对于初学者来说可能会感到不适应。Dreamweave对于DHTML的支持特别好，可以轻松实现炫目的页面特效。本项目默认以Dreamweave网页编辑工具为例展开学习。图1-6试一试： 请打开Dreamweaver，了解界面。将Dreamweaver界面的各组成部分填写在相应的标记框中：除了这款以外，还有 、 、 等其他网页编辑工具。2.站点创建与管理（1）新建站点站点不同于网页，一个站点不仅包含大量的网页文件，还包括图片、动画。、视频、音频等文件，并且这些文件是相互关联的，需要通过创建一个站点来对网站各类元素进行集中管理。按下面步骤新建一个站点。在起始界面中选择“创建新项目”“dreamweaver站点”如图1-7示，定义站点名字，输入“七彩云南”。图1-7由于本项目的制作网站属于纯静态网站，如图18示，选择“否，我不想使用服务器技术。”图18如图19示，单击“浏览文件夹”按钮，选择网站所在的位置文件夹。图19因为目前网站采用本地编辑，所以“您如何连接到远程服务器？”选择“无”这一项，如图110所示。图110到此为止，一个站点已经创建，请观察“文件”浮动面板。试一试：1. 尝试用dreamweaver新建一个站点。2. 创建站点是设计网站的第一步，请为我们的网站创建站点文件夹并使用Dreamweaver进行站点管理操作并写出详细步骤。 （2）站点管理 可以通过在站点中创建、复制、删除文件夹和文件对象来构建网站文件系统。一个网站编辑工具可以创建许多站点，可以对它们进行统一管理，包括站点信息的修改、站点的复制与删除、站点的导出与导入等操作。 网站目录结构规划在所创建的站点中规划好图1-11所示的目标结构。图1-11选中 ，右击，通过快捷菜单进行文件夹、主页文件的创建操作，实现图1-11所展示的效果。说明：站点文件将按类型存放，其中，files文件夹放置网页，images文件夹放置图片，jdxc文件夹放置网站相册、index.htm文件为主页文件。 多站点管理选择“站点”“管理站点”菜单命令，打开“管理站点”对话框，复制“金秋雁荡之旅专题网站”，将其主目录设置为自定义的一个文件夹，达到图1-12所示的效果。图1-12将“七彩云南”站点导出，导出后的文件名后后缀为 。当系统重装或更换计算机后可以重新导入文件，减少重新工作量。回到“文件”浮动面板，观察它的变化，尝试不同站点之间的切换。任务三：网页版面布局引导问题网页布局的方法有哪些？常用的网页布局是如何的？一、任务目标认识常见的版面布局，能够依据用户需求，利用表格工具设计并制作出网页框架。二、任务实现1常见版面布局设计网页时，不仅要合理安排内容，也要使页面美观精致，仅仅通过对文本和图片的堆积排列是不够的。Dreamweaver提供了表格、层和框架等工具，可以制作出复杂的页面结构，再配合文字和图片，就可以制作优秀的网页。接下来先认识几种常见的网页布局风格。(1)“厂”字形布局页面顶部为标志和广告条，下方左面为主菜单，右面显示正文信息。这是一种广泛采用的布局方式。雨点是页面结构清晰，主次分明；缺点是规矩呆板，如果色彩搭配不当，容易令人厌烦。（2）“国”字形布局也称“同”字形布局，是一些大型网站所采用的类型，即最上面是网站的标题以及横幅广告条，接下来是网站的一些基本信息。联系方式、版权声明等。（3）“三”字形布局者是一种简洁明快的网页布局，在国外用的比较多，国内比较少见。这种布局的特点是在页面上由横向两条色块将网页整个分割为三部分，色块中大多放置广告条或更新和版权提示信息。（4）“川”字形布局整个网页在垂直方向分为三列，网站的内容按栏目分布在这三列中，最大限度地突出主页的索引功能。（5）Flash布局这种布局是指整个网页就是一个Flash动画，画面一般比较绚丽、有趣，是一种比较新潮的布局方式。其实这种布局与封面型结构是类似的，不同的是由于Flash强大的功能，页面所表达的信息更丰富。其视觉效果及听觉效果如果处理得当，会是一种非常有魅力的布局。练一练：指出下列网页所属的类型。请分析以下网站的结构： 网站1 网站2 网站3网站4请写出上面4个网站各属于哪种网页设计框架结构1、 网站1是属于 的网页设计框架结构 2、 网站2是属于 的网页设计框架结构3、 网站3是属于 的网页设计框架结构4、 网站4是属于 的网页设计框架结构2.实施版面布局（1）页面设置根据用户需求和效果合理设置页面属性，包括网站标题、页面边距、背景等，如图1-13所示。图1-13方法一：单击“修改”菜单，选择“页面属性”菜单项。方法二：在下方属性面板中单击“页面属性”。设置页面的“外观”属性，默认字体大小为12像素，选择相应的背景图片，上边距为0像素，其他采用默认值，如图1-14所示。图1-14设置页面的“标题/编码”属性，将标题设置为“七彩云南云南长风旅行社”，如图1-15所示。图1-15（2）使用布局表格进行布局使用布局表格和布局单元格技术来实现网页版面定位。步骤1单击插入栏的下拉按钮，展开插入栏，单击“布局”选项，打开布局栏，如图1-16所示。图1-16单击“布局视图”按钮，将文档窗口切换至布局视图。在弹出的“从布局视图开始”对话框中，单击“确定”按钮，关闭该对话框，如图1-17所示。图1-17步骤2单击“绘制布局表格”按钮，绘制如图1-18所示的布局表格，表格大小为797848像素。图1-18步骤3单击“绘制布局表格”按钮，绘制嵌套表格，如图1-19所示。图1-19步骤4单击“绘制布局单元格”按钮，在上述布局表格中绘制布局单元格，效果如图1-20所示。图1-20任务四：图片编辑与修辞引导问题观察淘宝网，分析一下该网站哪些位置使用了图片，这些图片进行了什么处理技巧？ 任务目标 能够运用网页编辑软件插入图片对象，并对图片进行编排能够运用简单的处理，使其适合网页呈现。二任务实现