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

1、初二上学期第三章主题网站设计与制作第三章 主题网站设计与制作第1节 主题网站我设计一、学习目标： 1、了解网站的作用； 2、掌握网站规划的方法； 二、学习方法： 探究学习、实践学习、小组合作 三、教学过程： （一）、情景导入 随着计算机技术与网络技术的日益发展，人们已不再满足于在网上漫游和获取信息，很多人自己制作网页并在网上发布信息、交流信息。 （欣赏网站，思考网站的构成） （二）、规划网站 1、确定主题，规划网站 1）通过讨论，思考网站建设要经历哪些阶段。 学生分组讨论，并说出自己的看法 师生总结：整体规划、收集资料、制作、编辑调试和网站发布与维护等 2）通过讨论，思考优秀网站的特点是什么。

2、 学生分组讨论，并说出自己的看法 师生总结：主题明确、特色鲜明、内容丰富、图文并茂、动静结合等特点，给访问者以赏心悦目的感受。 3）规划网站：结合教材P46，小组成员相互合作，尝试规划网站。 学生分组讨论，说说规划网站要考虑哪些因素 师生总结： 明确网站建设的目的 可行性分析 网站的内容设计 网站的表现形式设计 学生自定主题，设计一个网站 4）探究学习：结合教材，小组成员相互合作，尝试完成P46探究学习。 学生分组讨论，并完成P47表格 5）欣赏“动物人类的朋友”网站，思考他的结构 学生分组讨论，并说出自己的看法 师生总结： 栏目名网页文件名主要内容 （三）、学生讨论学习，尝试规划一个网站 1

3、、学生以小组为单位，相互合作。 2、教师巡回指导。 3、作品展示，点评。 （四）、总结 1、网站规划的阶段。 2、优秀网站的特点 3、规划网站需要思考的问题四、教学反思：第2节 网站的制作（共6课时）站点创建与首页制作 第1课时一、教学目标：1.知识与技能：（1）认识Dreamweaver窗口结构。（2）了解站点与主页的概念，理解站点的意义，学会建立、删除站点。（3）掌握新建简单网页的方法，能够在网页中插入文字并进行排版，掌握图片、水平线的插入方法及属性的设置方法，能够灵活应用“页面属性”对话框，设置页面属性，如背景颜色、背景图像等。（4）掌握保存网页的方法，了解网页保存与普通文档保存的不同点

4、。2.过程与方法：（1）通过对比，掌握软件的使用方法，达到举一反三的功效。（2）通过动手设计网站的实践活动，掌握对象属性的设置方法，为今后学习其他软件奠定基础。3情感态度与价值观：（1）通过对比，了解软件学习的一般方法及规律，提高学习信息技术的信心。（2）通过创建网站和设计首页，掌握对象属性的设置方法，初步体验成功的快乐。（3）通过创建“动物人类的朋友”网站，树立人与动物和谐相处，真爱、善待和保护动物的观念。二、教学重点：（1）认识Dreamweaver窗口结构及主要菜单的功能。（2）掌握建立、删除网站的基本方法。（3）掌握简单网页设计的基本方法，如文字、图片以及水平线的插入与编辑等。（4）掌

5、握设置页面属性的一般方法。三、教学难点：（1）站点的作用和存储路径。（2）网页的保存。四、教学方法： 对比教学，探究信息，模仿学习。五、教学过程：教学过程教师活动学生活动引入 以学生一进机房就上网、浏览网页为切入点，提问：同学们非常喜欢上网，大家一般登录哪些网站呢？以此提问网站、网页和首页 喜欢上网浏览别人制作的精美网站、获取丰富的信息，是否想过直接制作网页供别人去浏览呢如今网页制作的软件有很多，如Dreamweaver、Frontpage、东方网页王等。今天我们将学习如何使用Dreamweaver来制作网页思考回答问题，明白以下几点：1.网站包含多个网页，通过超链接可以把不同的页面链接起来2

6、.网站的第一个页面称为主页，主页的文件名一般微微index.htm或者default.htm，主页也是网页新授一、 Dreamweaver启动与窗口的组成（启发与Flash软件对比）1.启动：两种方式2.窗口组成：菜单栏、工具栏、编辑区、属性窗口、面板组、文档面板（展示软件图）3.编辑区的4种工作模式：设计、拆分、代码和预览二、站点的建立由于网站中需要制作多个网页文件以及相关图片、声音文件等，所以网站建设初期就要做好管理的准备，我们以站点的形式来管理网站内部文件任务1：在D盘下建立一个站点，站点名为直接学号加姓名指导学生对照教材学习（显示）学生操作期间教师巡视课堂，做个别辅导针对学生中普通存在

7、的问题，教师可做详细讲解对学生自学后完成情况做一简单评价与总结深入一问；在网站中有图片、声音、动画等文件，如何有效管理在学生回答后，教师分析并指出网站内通常还建立多个子文件夹，分类管理网站内的文件，如通常有images文件夹，存放网页中的图片等三、设计首页引导学生分析一般首页组成情况，提出课堂制作要求任务1：新建首页，要求首页中有如下对象A网站的标题与图片徽标B网站的宗旨（文字介绍）C水平线（起分隔作用）D链接到下一页的标记（可为文字，页可为图片）其中A、B、D内容可以类比文字处理软件中对象的插入方法来进行教师师范：水平线插入方法单击“插入HTML水平线”命令四、编辑与浏览主页提出具体编辑要求

8、，引导学生利用“属性窗口”来设置相关对象的属性任务2：编辑主页A设置网站标题文字为36磅（7级）字B设置首页标题为：“欢迎您来到”C选择一张淡雅图片，将其设置为首页背景图片D设置水平线粗细为3像素E为首页加上背景音乐五、教师启发学生观察 A标题输入、字体、字号、颜色等设置方法选定文字对象属性窗口进行 B网页背景图片设置页面属性外观探究 如果图片不在网站内，计算机将提示说明？怎么操作 如果背景颜色、背景图片同时使用，其网页外观效果如何 C水平线颜色如何设置标签编辑器（难点1）D教师指导下给背景添加音乐（难点2）单击“插入媒体插件”命令六、保存并浏览网页打开软件，并结合教材仔细观察明确教师要求后，

9、阅读教材，开展对照着教材的自学同学交流自学后操作情况，可安排学生进行演示学生操作：在网站内根据需要建立多个子文件夹构思自己网站首页中各对象的布局，但必要的元素不得缺少 同学师范，讲解如何插入图像 学生模仿并完成 学生示范，讲解如何设置文字的属性 学生完成网页背景图片的设置，并探究学习 完成水平线属性设置 完成背景音乐添加 学生自行探究，按要求保存自己的网页，并预览小结引导学生进行总结提问本节课的重点知识，反馈学生相关知识掌握情况教师与学生共同评价开展同学间的作业相互检查，推荐优秀的作品，展示给全班同学，表扬完成情况好的学生与帮助他人的同学学生总结，并继续完成自己的主页，完成的同学做教师的小助手

10、，辅导需要帮助的学生六、教学反思： 表格布局网页 第2课时一、 教学目标：1.知识与技能：（1） 了解表格在网页设计中的作用。（2）掌握网页中表格的制作方法、表格属性的设置方法以及单元格的修饰与编辑方法，能够在单元格中正确插入文字和图片（3）能够根据网页设计内容，正确设计表格的结构，掌握表格嵌套的设计方法。2.过程与方法：（1）利用对比学习，培养知识迁移的能力。（2）通过用表格布局网页，进一步理解表格的作用、功能及网页设计方法的多样性，培养学生的发散思维能力。（3）通过自主探究，掌握软件的使用规则，培养自主学习的能力。3.情感态度与价值观（1）通过对比学习体验软件学习的一般方法及规律，提高自主

11、学习的能力。（2）通过运用表格布局各种网页对象（各人根据网站主题设计网页），进一步掌握各种不同对象的属性设置方法和规律，体验创造的快乐。（3）通过“动物人类的朋友”网站的设计与制作，激发关爱动物、保护动物的责任感，从而进一步树立共同改善人类生存环境的意识。二、教学重点：（1）了解表格在网页布局中的重要作用。（2）掌握插入、编辑表格的方法及表格的属性设置方法。（3）掌握单元格的修饰与属性的设置。三、教学难点： 表格的嵌套在网页布局中的应用。四、教学方法： 对比教学、探究学习、模仿学习五、教学过程：教学过程教师活动学生活动复习 以提问的方式来回顾站点的建立、网页的新建以及网页中文字、图像等对象的插

12、入认真回顾，回答教师提问导入1.观看两个页面进行比较：一个是页面工整，文本、图片摆放对称且具有一定规律，使用了表格布局，但表格边框隐藏（看不出表格痕迹）；另一个是页面凌乱。你更喜欢怎样的页面布局？提出问题，有什么办法可以到达第一个页面的效果 2.观察第三个页面，内容同第一个页面，但显现第一个页面的表格边框 学生讨论，交流（学生可能会想很多复杂的方法） 幡然领悟：原来是利用“WPS文字“程序中学习过的表格，从而明白表格在Dreamweaver中的作用新授一、分析表格结构展示一些由表格布局的网页，引导学生分析其表格结构，自然过渡到教材例子（biaoge.htm），分析结构，得出表格的布局（几行几列

13、，哪些行做了哪些处理）任务一：规划网页表格布局分层次完成该任务，基础相对弱一些的同学，仅要求读懂教材上的网页表格布局，知道规则表格的行数与列数，如何再调整至最终样式；基础扎实、操作能力较强的同学要求跳出教材，自行设计表格网页布局，并将自己的表格设计绘制在教材上建议：使用多个非嵌套的表格来布局二、完成表格布局 Dreamweaver中表格的操作和“WPS文字”软件中的表格操作类似，教师应着重引导学生进行知识迁移，对具体的操作方法，无需做过多讲解 任务二：新建一个页面，用表格布局该网页，并在该网页总放入相应内容A打开站点，新建一网页，保存为：“biaoge.htm”B按前面分析的要求插入一个表格C

14、调整表格结构（主要是行列的插入、删除、单元格的合并、拆分、调整大小等）三、充实网页页面内容 任务三：在表格中插入图片、输入文字 建议：插入图片对象前，对图片做一定处理，如选择风格统一的图片，调整图片大小至同一尺寸等 友情提醒：图片的保存四、调整表格属性，美化页面 预览制作的网页，修饰网页，让网页看起来更美观 任务四：表格属性以及单元格属性的编辑A表格属性的调整：去除网格线、设置表格背景色等 B单元格属性的调整：使用不同的颜色区分各板块 强调：学会利用属性窗口设置表格、单元格属性五、表格的嵌套 有时为了制作出更加美观的网页，我们可以使用表格的嵌套来实现 任务五：加入横向目录导航条，尝试使用表格嵌

15、套的方法解决问题 根据自己的实际情况选择任务难度，并动手分析与创意设计 请操作熟练的同学来演示规则表格的插入，联想“WPS文字”软件中的表格操作来演示网页制作中表格的基本编辑，如行列的插入、删除、单元格的合并、拆分、调整大小等，以达到调整表格结构的目的 认真操作（耗时较长） 在表格相应位置放入相应文字、图片等 根据自己的实际情况选择任务难度，可按教师具体要求修饰调整表格，也可根据自己的意图修饰调整表格（但表格边框的调整都需掌握） 学生动手制作网页总结 本节课我们学习了在Dreamweaver中插入表格、编辑表格以及表格嵌套的基本方法。请同学回答几个问题，并演示几个基本操作 展示用表格布局完成的

16、优秀作品。表扬完成任务的学生，对未完成任务的学生给予激励，鼓励他们利用课余时间继续完成回答问题1.表格在Dreamweaver中的作用：定位对象2.表格编辑的基本操作：利用表格属性和表格菜单进行六、教学反思：网页中动态效果的制作 第3课时一、教学目标：1.知识与技能：（1）理解动态网页与网页动态效果的区别。（2）掌握网页动态效果的制作。（3）掌握“插入”菜单中“图像对象”和“媒体”的使用方法，给网页增添动态效果。2.情感态度与价值观 通过自主学习网页动态效果的制作，激发在积极、主动的学习气氛中的学习兴趣以及培养探究意识和创新能力。二、教学重点： 滚动字幕、交替显示图像等动态效果的制作与Flas

17、h动画的插入。三、教学难点： 标签选择器的使用及各种效果对象的属性设置。四、教学方法： 自主探究式学习、任务驱动式教学。五、教学过程：教学过程教师活动学生活动引入 打开两张分别为静态与加有动态效果的网页，请学生比较它们给浏览者的不同感受 学生观察比较两张网页，指出它们的不同点新授任务一：滚动字幕的制作 教师巡视，个别给予指导 学生完成任务后，学生展示作品，并演示操作，小结滚动字幕以及悬停按钮设置的关键点 滚动字幕 文本的大小、字体、颜色等 表现方式 运动方向 背景色的设置任务二：交替显示图像的制作 教师巡视，个别给予指导 学生展示作品，演示操作，小结制作交替显示图像的关键点 预处理需要交替显示

18、的图像：大小 单击“插入图像对象鼠标经过图像”命令 选择两个图像：原始图像，鼠标经过图像，单击“确定”按钮任务三：网页中插入一个Flash动画 教师巡视，个别给予指导 学生展示作品，演示操作，小结插入Flash动画的关键点 Flash显示窗口的大小调整 预览模式下方可看到Flash动画的效果 插入Flash后网页的保存 学生参照教材内容自学滚动字幕的制作 观察同学的操作，并和自己的操作进行比较 学生参照教材内容自学交替显示图像的制作 观察同学的操作，并和自己的操作进行比较 学生参照教材内容自学Flash在网页中的插入方法 比较分析同学的作品，对照自己的作品，加以完善小结 学习过程评价 展示学生

19、的作品，师生给予评价，激发他们更大的主动性与积极性 归纳总结 学生对照“自我评价”表，进行过程性学习的评价六、教学反思：设计交互功能的网页 第4课时一、 教学目标：（1）了解交互网页的概念，了解表单的功能及表单元件的使用方法，了解网上信息调查的设计方法。（2）掌握表单元件的功能及使用方法，掌握表单各元件属性的设置方法。（3）在运用、学习、制作的过程中感受表单给网页带来的交互作用。二、教学重点：（1）表单元件的正确插入。（2）表单元件的属性设置。三、教学难点： 表单元件的属性设置，根据实际需要正确运用表单元件。四、教学过程：教学过程教师活动学生活动导入 让学生完成一个珍稀动物保护知识小测试 反馈

20、测试结果 完成珍稀动物保护知识小测试 认真听讲任务一 通过分析刚才的珍稀动物保护小测试来介绍表单元件 讲解简单表单的制作 布置任务一：完成简单的个人信息的表单制作 巡视并及时指出学生操作过程中的问题 认真听讲 完成任务一，根据教师的提示修改自己网页中存在的问题任务二 反馈任务一中比较普遍的问题 布置任务二：在任务一的基础上完成个人信息调查的表单 让个别学生演示任务二的制作 认真思考教师的提问，并积极地回答 自学完成任务二个别学生演示任务二任务三 布置任务三：完成环保知识、个人爱好、网站意见和建议的表单制作 演示学生作品，分析学生所运用的表单元件，讲解表单的提交 根据教师给的文字，使用正确的表单

21、元件，完成整个表单网页的制作 和教师一起分析同学的作品，积极回答问题拓展任务 布置拓展任务：修饰表单网页 展示学生作品 讲解表单的提交 完成拓展任务 欣赏学生作品并进行评价 认真听讲小结 展示其他表单网页 总结本课知识 了解多种表单网页 回顾本课所学知识五、教学反思：制作框架网页 第5课时一、 教学目标：1.知识与技能（1）理解框架的概念及用途。（2）掌握框架网页的新建、制作、编辑与保存，了解框架的拆分方法。（3）初步掌握将框架结构与表格布局结合使用来制作网页。2.过程与方法（1）通过对表格网页的分析，体验新知识（框架结构网页）的优点，从而促进学习新知识。（2）理解框架的概念与组成，学会分析网

22、站的结构。3.情感态度与价值观（1）通过以“人与动物”为主题的框架结构网页制作活动，了解更多有关人与动物和谐相处的知识，增强关注动物的兴趣和意识。（2）能够将表格与框架结构网页结合使用，在创作中体验乐趣。二、教学重点： 框架的概念、用途，创建、编辑与保存框架网页的方法。三、教学难点： 框架的拆分。四、教学方法： 对比教学、探究学习、模仿学习。五、教学过程：教学过程教师活动学生活动导入 展示一组表格制作的网页，这些网页有一个特点，要求学生仔细观察，找出该特点，并提问如何快捷地制作 尽管复制粘贴能为我们节省时间，但有没有更好的方法呢？相同的区域我们能否只做一遍呢？今天我们要学习的内容制作框架网页，

23、就能给我们带来很多快捷 仔细观察，发现：上方和左侧内容都是相同的，仅右下部分内容不一样 使用复制粘贴快捷地制作新授一、 框架网页概念 由以上例子入手，再展示一个框架网页，教师引导学生理解框架网页的概念二、框架网页的新建与保存 教师要求学生先阅读教材存在步骤，再尝试自行探究操作任务一：创建“横幅和目录”结构的框架网页，新建top和left页面，并学会保存 框架结构中的每个框都是一个独立的选项文件，即网页文件，因此当框架确定之后，需要为每个框分别指定其选项文件的来源，在Dreamweaver软件中，默认每个框都是新建网页，所以如果该框内是新建网页，则与普通网页编辑方法一样；如果需要导入一个已有的网

24、页，最简单方法就是复制、粘贴到该框架内 在“横幅和目录”框架网页中，一般top页面制作网页的标志和主题横幅，而在left页面通常制作导航目录或展示一些不常变更的信息 保存网页是教学难点，由教师讲解，可先由框架概念入手，框架结构中的每个框都是一个独立的选项文件，即网页文件，再针对保存页面中的蓝色部分，教会学生注意观察三、相关页面的制作与设置 框架网页中相关页面的制作最终结合表格来布局，插入文字、图片和交互式按钮任务二：top和left页面的制作要求1.top页面内插入1行2列的表格，左边单元格插入logo图片，右边单元格插入banner图片2.框架页面left页面内插入5行1列的表格，在每个单元

25、格内依次插入4个“交互式按钮”，按钮文字根据展示介绍的相关内容进行概括，在第5个单元格内插入一邮箱指示的图片3.调整表格边框粗细4.为main区域设置一个已有的初始页面（该网页由教师提供现成的） 反馈学生操作情况，开展比一比，评一评，看谁做得又快又好四、框架网页属性的设置 创建好框架网页后，可以根据实际需要改变框架的属性任务三：调整框架的大小、设置框架的边框、设置框架窗口中的滚动条等提高任务：框架的拆分 理解概念 阅读教材内容，自学新建框架网页的操作 阅读教材后，初步了解“新建网页”和“设置初始网页”两个按钮的不同 认真聆听教师的讲解，注意观察，并按要求模仿操作 学生制作相关页面，耗时较长，同

26、时也是对前面所学内容的复习回顾 “交互式按钮”可以利用交替显示的图像方法来制作，其文字则根据展示的内容进行概括和定义 学生自主探究学习，可向教材寻求帮助 完成设置后请学生示范操作并说明自己为什么这样设置 操作设置后请学生示范操作说明自己为什么这样设置小结 给出一些常见的框架结构应用界面，如Web邮箱页面等 引导学生总结本课内容，梳理课堂所学知识 分组推荐一优秀作品进行全班展示回顾总结本节课的知识点共同欣赏六、教学反思：网页超链接的制作 第6课时一、 教学目标：1.展示与技能（1）了解超链接的含义及链接源和链接目标的含义，掌握同一站点内以及不同站点间网页超链接的创建方法。（2）掌握网页内锚记的作

27、用及创建锚链接的方法，掌握交互式按钮、框架网页内超链接的设置方法。（3）理解热区链接的含义及创建方法。2.过程与方法（1）通过创建网页超链接的操作，了解网页中创建超链接的基本方法，消除对网页链接的神秘感。（2）通过对不同对象设置超链接的操作，总结出操作的规律，培养自主学习与操作的能力。3.情感态度与价值观 完成超链接，感受成功的喜悦和快乐。二、教学重点：（1）超链接的含义及链接源和链接目标的含义。（2）超链接的制作方法给文字、图片添加超链接，制作锚链接；给交互式按钮添加超链接，在框架页面内创建超链接等。三、教学难点：（1）锚链接的名称及对应链接位置的设定。（2）在框架页面中创建超链接时，目标对

28、象所选择的窗口显示形式。四、教学方法： 任务驱动法、讨论法、讲解与演示法、类比法。五、教学过程：教学过程教师活动学生活动导入 展示两个主页，一个已经链接好的，一个没有链接的，同座位两人比较找出区别，引出本课课题超链接 提出思考：我们在先前的学习中什么软件中的相关操作与它是类似的？什么是超链接？找一例子，分析链接源和链接目标分别是什么同座位两人操作交流，对比找出不同，并积极思考，回答教师问题新授一、站内超链接 语言引导学生回顾“WPS演示”中超链接的制作方法，教师提示右击链接源制作超链接，再辅以教材内容的阅读，自行探究完成以下操作任务一：同一站点内不同页面之间的链接1.制作首页（欢迎页）到表格页

29、的超链接2.给表格页内交互式按钮设置超链接，链接到相关页面3.给框架页内交互式按钮设置超链接，链接到相关页面 教师巡视，及时指导 安排学生示范操作并讲解如何制作超链接 交互式按钮超链接的制作，要求在框架网页中演示操作。提问学生：演示者的操作对吗？有没有问题 引导学生发现问题：超链接制作完成后的检验。保存后预览 教师讲解，突破难点，再交由学生操作 以上是同一站点内不同网页之间的链接，有时有这样一种情况：一个页面内的内容很多，需要不断拖动滚动条实现阅读，能否实现快速的跳转呢任务二：同一站点同一页面内的跳转（链接）：在动物趣闻页面内制作锚链接 教师讲解：由生活中的书签引入，介绍“锚链接”的概念，然后再演示如何操作 提示：锚链接的双向性问题（返回） 教师巡视，及时反馈二、站间超链接 仅凭我们课堂上制作的这些页面还不足以详细介绍我们的主题，此时我们还可以借助超链接，链接到因特网的其他网站上，以丰富我们的内容任务三：借助热区链接，为友情链接页面制作超链接，链接我国一些自然保护区网站 有了以上的基础，可安排学生自学教材有关热区链接的相关内容，学生探究操作后教师再安排学生演示操作，辅助以提问的形