初二上学期-第三章主题网站设计与制作

第三章主题网站设计与制作第1节主题网站我设计一、学习目标：1、了解网站的作用；2、掌握网站规划的方法；二、学习方法：探究学习、实践学习、小组合作三、教学过程：（一）、情景导入随着计算机技术与网络技术的日益发展，人们已不再满足于在网上漫游和获取信息，很多人自己制作网页并在网上发布信息、交流信息。（欣赏网站，思考网站的构成）（二）、规划网站1、确定主题，规划网站1）通过讨论，思考网站建设要经历哪些阶段。学生分组讨论，并说出自己的看法师生总结：整体规划、收集资料、制作、编辑调试和网站发布与维护等2）通过讨论，思考优秀网站的特点是什么。学生分组讨论，并说出自己的看法师生总结：主题明确、特色鲜明、内容丰富、图文并茂、动静结合等特点，给访问者以赏心悦目的感受。3）规划网站：结合教材P46，小组成员相互合作，尝试规划网站。学生分组讨论，说说规划网站要考虑哪些因素师生总结：①明确网站建设的目的②可行性分析③网站的内容设计④网站的表现形式设计⑤学生自定主题，设计一个网站4）探究学习：结合教材，小组成员相互合作，尝试完成P46探究学习。学生分组讨论，并完成P47表格5）欣赏“动物——人类的朋友”网站，思考他的结构学生分组讨论，并说出自己的看法师生总结：栏目名网页文件名主要内容（三）、学生讨论学习，尝试规划一个网站1、学生以小组为单位，相互合作。2、教师巡回指导。3、作品展示，点评。（四）、总结1、网站规划的阶段。2、优秀网站的特点3、规划网站需要思考的问题四、教学反思：第2节网站的制作（共6课时）站点创建与首页制作第1课时一、教学目标：1.知识与技能：（1）认识Dreamweaver窗口结构。（2）了解站点与主页的概念，理解站点的意义，学会建立、删除站点。（3）掌握新建简单网页的方法，能够在网页中插入文字并进行排版，掌握图片、水平线的插入方法及属性的设置方法，能够灵活应用“页面属性”对话框，设置页面属性，如背景颜色、背景图像等。（4）掌握保存网页的方法，了解网页保存与普通文档保存的不同点。2.过程与方法：（1）通过对比，掌握软件的使用方法，达到举一反三的功效。（2）通过动手设计网站的实践活动，掌握对象属性的设置方法，为今后学习其他软件奠定基础。3．情感态度与价值观：（1）通过对比，了解软件学习的一般方法及规律，提高学习信息技术的信心。（2）通过创建网站和设计首页，掌握对象属性的设置方法，初步体验成功的快乐。（3）通过创建“动物——人类的朋友”网站，树立人与动物和谐相处，真爱、善待和保护动物的观念。二、教学重点：（1）认识Dreamweaver窗口结构及主要菜单的功能。（2）掌握建立、删除网站的基本方法。（3）掌握简单网页设计的基本方法，如文字、图片以及水平线的插入与编辑等。（4）掌握设置页面属性的一般方法。三、教学难点：（1）站点的作用和存储路径。（2）网页的保存。四、教学方法：对比教学，探究信息，模仿学习。五、教学过程：教学过程教师活动学生活动引入以学生一进机房就上网、浏览网页为切入点，提问：同学们非常喜欢上网，大家一般登录哪些网站呢？以此提问网站、网页和首页喜欢上网浏览别人制作的精美网站、获取丰富的信息，是否想过直接制作网页供别人去浏览呢如今网页制作的软件有很多，如Dreamweaver、Frontpage、东方网页王等。今天我们将学习如何使用Dreamweaver来制作网页思考回答问题，明白以下几点：1.网站包含多个网页，通过超链接可以把不同的页面链接起来2.网站的第一个页面称为主页，主页的文件名一般微微index.htm或者default.htm，主页也是网页新授一、Dreamweaver启动与窗口的组成（启发与Flash软件对比）1.启动：两种方式2.窗口组成：菜单栏、工具栏、编辑区、属性窗口、面板组、文档面板（展示软件图）3.编辑区的4种工作模式：设计、拆分、代码和预览二、站点的建立由于网站中需要制作多个网页文件以及相关图片、声音文件等，所以网站建设初期就要做好管理的准备，我们以站点的形式来管理网站内部文件任务1：在D盘下建立一个站点，站点名为直接学号加姓名指导学生对照教材学习（显示）学生操作期间教师巡视课堂，做个别辅导针对学生中普通存在的问题，教师可做详细讲解对学生自学后完成情况做一简单评价与总结深入一问；在网站中有图片、声音、动画等文件，如何有效管理在学生回答后，教师分析并指出网站内通常还建立多个子文件夹，分类管理网站内的文件，如通常有images文件夹，存放网页中的图片等三、设计首页引导学生分析一般首页组成情况，提出课堂制作要求任务1：新建首页，要求首页中有如下对象A．网站的标题与图片徽标B．网站的宗旨（文字介绍）C．水平线（起分隔作用）D．链接到下一页的标记（可为文字，页可为图片）其中A、B、D内容可以类比文字处理软件中对象的插入方法来进行教师师范：水平线插入方法单击“插入→HTML→水平线”命令四、编辑与浏览主页提出具体编辑要求，引导学生利用“属性窗口”来设置相关对象的属性任务2：编辑主页A．设置网站标题文字为36磅（7级）字B．设置首页标题为：“欢迎您来到……”C．选择一张淡雅图片，将其设置为首页背景图片打开软件，并结合教材仔细观察明确教师要求后，阅读教材，开展对照着教材的自学同学交流自学后操作情况，可安排学生进行演示学生操作：在网站内根据需要建立多个子文件夹构思自己网站首页中各对象的布局，但必要的元素不得缺少同学师范，讲解如何插入图像学生模仿并完成D．设置水平线粗细为3像素E．为首页加上背景音乐五、教师启发学生观察A．标题输入、字体、字号、颜色等设置方法——选定文字对象——属性窗口进行B．网页背景图片设置——页面属性——外观探究●如果图片不在网站内，计算机将提示说明？怎么操作●如果背景颜色、背景图片同时使用，其网页外观效果如何C．水平线颜色如何设置——标签编辑器（难点1）D．教师指导下给背景添加音乐（难点2）单击“插入→媒体→插件”命令六、保存并浏览网页学生示范，讲解如何设置文字的属性学生完成网页背景图片的设置，并探究学习完成水平线属性设置完成背景音乐添加学生自行探究，按要求保存自己的网页，并预览小结引导学生进行总结提问本节课的重点知识，反馈学生相关知识掌握情况教师与学生共同评价开展同学间的作业相互检查，推荐优秀的作品，展示给全班同学，表扬完成情况好的学生与帮助他人的同学学生总结，并继续完成自己的主页，完成的同学做教师的小助手，辅导需要帮助的学生六、教学反思：表格布局网页第2课时一、教学目标：1.知识与技能：（1）了解表格在网页设计中的作用。（2）掌握网页中表格的制作方法、表格属性的设置方法以及单元格的修饰与编辑方法，能够在单元格中正确插入文字和图片（3）能够根据网页设计内容，正确设计表格的结构，掌握表格嵌套的设计方法。2.过程与方法：（1）利用对比学习，培养知识迁移的能力。（2）通过用表格布局网页，进一步理解表格的作用、功能及网页设计方法的多样性，培养学生的发散思维能力。（3）通过自主探究，掌握软件的使用规则，培养自主学习的能力。3.情感态度与价值观（1）通过对比学习体验软件学习的一般方法及规律，提高自主学习的能力。（2）通过运用表格布局各种网页对象（各人根据网站主题设计网页），进一步掌握各种不同对象的属性设置方法和规律，体验创造的快乐。（3）通过“动物——人类的朋友”网站的设计与制作，激发关爱动物、保护动物的责任感，从而进一步树立共同改善人类生存环境的意识。二、教学重点：（1）了解表格在网页布局中的重要作用。（2）掌握插入、编辑表格的方法及表格的属性设置方法。（3）掌握单元格的修饰与属性的设置。三、教学难点：表格的嵌套在网页布局中的应用。四、教学方法：对比教学、探究学习、模仿学习五、教学过程：教学过程教师活动学生活动复习以提问的方式来回顾站点的建立、网页的新建以及网页中文字、图像等对象的插入认真回顾，回答教师提问导入1.观看两个页面进行比较：一个是页面工整，文本、图片摆放对称且具有一定规律，使用了表格布局，但表格边框隐藏（看不出表格痕迹）；另一个是页面凌乱。你更喜欢怎样的页面布局？提出问题，有什么办法可以到达第一个页面的效果2.观察第三个页面，内容同第一个页面，但显现第一个页面的表格边框学生讨论，交流（学生可能会想很多复杂的方法）幡然领悟：原来是利用“WPS文字“程序中学习过的表格，从而明白表格在Dreamweaver中的作用新授一、分析表格结构展示一些由表格布局的网页，引导学生分析其表格结构，自然过渡到教材例子（biaoge.htm），分析结构，得出表格的布局（几行几列，哪些行做了哪些处理）任务一：规划网页表格布局分层次完成该任务，基础相对弱一些的同学，仅要求读懂教材上的网页表格布局，知道规则表格的行数与列数，如何再调整至最终样式；基础扎实、操作能力较强的同学要求跳出教材，自行设计表格网页布局，并将自己的表格设计绘制在教材上建议：使用多个非嵌套的表格来布局二、完成表格布局Dreamweaver中表格的操作和“WPS文字”软件中的表格操作类似，教师应着重引导学生进行知识迁移，对具体的操作方法，无需做过多讲解任务二：新建一个页面，用表格布局该网页，并在该网页总放入相应内容A．打开站点，新建一网页，保存为：“biaoge.htm”B．按前面分析的要求插入一个表格C．调整表格结构（主要是行列的插入、删除、单元格的合并、拆分、调整大小等）三、充实网页页面内容任务三：在表格中插入图片、输入文字建议：插入图片对象前，对图片做一定处理，如选择风格统一的图片，调整图片大小至同一尺寸等友情提醒：图片的保存四、调整表格属性，美化页面预览制作的网页，修饰网页，让网页看起来更美观任务四：表格属性以及单元格属性的编辑A．表格属性的调整：去除网格线、设置表格背景色等B．单元格属性的调整：使用不同的颜色区分各板块强调：学会利用属性窗口设置表格、单元格属性五、表格的嵌套有时为了制作出更加美观的网页，我们可以使用表格的嵌套来实现任务五：加入横向目录导航条，尝试使用表格嵌套的方法解决问题根据自己的实际情况选择任务难度，并动手分析与创意设计请操作熟练的同学来演示规则表格的插入，联想“WPS文字”软件中的表格操作来演示网页制作中表格的基本编辑，如行列的插入、删除、单元格的合并、拆分、调整大小等，以达到调整表格结构的目的认真操作（耗时较长）在表格相应位置放入相应文字、图片等根据自己的实际情况选择任务难度，可按教师具体要求修饰调整表格，也可根据自己的意图修饰调整表格（但表格边框的调整都需掌握）学生动手制作网页总结本节课我们学习了在Dreamweaver中插入表格、编辑表格以及表格嵌套的基本方法。请同学回答几个问题，并演示几个基本操作展示用表格布局完成的优秀作品。表扬完成任务的学生，对未完成任务的学生给予激励，鼓励他们回答问题1.表格在Dreamweaver中的作用：定位对象2.表格编辑的基本操作：利用表格属性和表格菜单利用课余时间继续完成进行六、教学反思：网页中动态效果的制作第3课时一、教学目标：1.知识与技能：（1）理解动态网页与网页动态效果的区别。（2）掌握网页动态效果的制作。（3）掌握“插入”菜单中“图像对象”和“媒体”的使用方法，给网页增添动态效果。2.情感态度与价值观通过自主学习网页动态效果的制作，激发在积极、主动的学习气氛中的学习兴趣以及培养探究意识和创新能力。二、教学重点：滚动字幕、交替显示图像等动态效果的制作与Flash动画的插入。三、教学难点：标签选择器的使用及各种效果对象的属性设置。四、教学方法：自主探究式学习、任务驱动式教学。五、教学过程：教学过程教师活动学生活动引入打开两张分别为静态与加有动态效果的网页，请学生比较它们给浏览者的不同感受学生观察比较两张网页，指出它们的不同点新授任务一：滚动字幕的制作教师巡视，个别给予指导学生完成任务后，学生展示作品，并演示操作，小结滚动字幕以及悬停按钮设置的关键点滚动字幕◆文本的大小、字体、颜色等◆表现方式◆运动方向◆背景色的设置任务二：交替显示图像的制作教师巡视，个别给予指导学生展示