网页制作教学设计优质课比赛优秀设计
创建站点市公开课获奖教案省名师优质课赛课一等奖教案
创建站点教案一. 引言网站是现代社会中最重要的信息传播和交流媒体之一。
无论是企业宣传还是个人展示，都离不开一个精美、易用的网站。
因此，学习如何创建一个站点是非常有价值的技能。
本教案旨在帮助学生们掌握创建站点的基本知识和技能。
二. 教学目标1. 了解什么是网站，以及网站的重要性。
2. 学习使用HTML和CSS创建基本的网站页面。
3. 掌握网站的结构和布局设计原则。
4. 学会使用各种工具和资源来优化网站的用户体验。
5. 实际操作中分析和解决常见的网站设计和开发问题。
三. 教学内容和步骤1. 什么是网站1.1 介绍网站的定义和作用。
1.2 分享网站在不同领域的应用案例。
2. 基本网页制作技术2.1 学习使用HTML创建网页的基本结构。
2.2 掌握使用CSS样式表定义网页的外观和布局。
3. 网站结构和布局设计原则3.1 介绍常见的网站结构和布局设计原则，如流线型布局、层次结构等。
3.2 分析和讨论各种网站布局的优缺点。
3.3 实践操作中演示如何设计一个具有良好结构和布局的网站。
4. 优化网站用户体验4.1 学习使用图像、颜色、字体等元素来提高网站的视觉吸引力。
4.2 了解响应式设计和移动优先原则，以适应不同设备和屏幕尺寸。
4.3 探讨网站导航和搜索功能的设计要点。
4.4 分享使用工具和技术来提高网站加载速度和性能。
5. 解决网站设计和开发问题5.1 分析和讨论常见的网站设计和开发问题，如浏览器兼容性、跨平台支持等。
5.2 掌握使用调试工具和技术来解决网站的问题。
5.3 实际操作中演示如何改进和优化一个存在问题的网站。
四. 教学方法1. 讲解：通过讲解的方式介绍相关概念和知识。
2. 演示：使用具体的案例演示如何创建站点和解决问题。
3. 实践：让学生亲自动手实验和操作，提高技能和经验。
4. 分组讨论：将学生分组，让他们共同讨论和解决问题，促进合作和学习。
五. 教学资源和评估1. 教学资源：- 电脑和互联网连接：用于学生实验和操作。
2014年黔西南州中小学信息技术优质课评选《网页制作说课》
避现实，这比大纲与教材提出的目标更有实际意义
发展与联系：为了引导学生真正走上正确的信息技术道
路，结合目前发展需要而选择网页制作中的《个人主页 设计》，更加符合发展需求，同时也是学生感兴趣的课 题，让他们认识到：不要像大多数人一样成为网虫或普 通的网民，未来要做一个真正懂得信息技术的网商，为 信息技术的发展作出应有的贡献！这也正是选题的原因。
课 题 ： 个 人 主 页 设 计
主 讲 人 ： 韦 成 继
二、学生与目标
学生基础：掌握了简单的文字及多媒体处理，并且很多 学生都会上网（聊天、玩游戏、看电影、查资料等）。 目标设定：根据学生设定的，没有受到大纲和教材的牵 制。能力目标中的“学会简单的个人网页设计”对学生 是一种挑战，学生应该乐于参与。情感态度与价值观： 让学生网络信息技术有个全新的认识，同时培养积极向 上的网络信息技术的学习态度并学会创造性地吸收网络 有利的知识。
课 题 ： 个 人 主 页 设 计
主 讲 人 ： 韦 成 继
信息技术发展特点
高速度
高淘汰 重实践
一、教材分析
课 题 ： 个 人 主 页 设 计
主 讲 人 ： 韦 成 继来自 课题：《个人主页设计》—选题开放、大胆 大纲目标：跟不上时代发展需求，没有前瞻性
教材内容：陈旧、过时，重复翻印，没有更新
课 题 ： 个 人 主 页 设 计
主 讲 人 ： 韦 成 继
谢谢各位专家、老师 批评指导！
课 题 ： 个 人 主 页 设 计
主 讲 人 ： 韦 成 继
补充：背景与原因（如有时间）
2000年10月，全国中小学信息技术工作会议颁布《全国中小学信息技术课程指 导纲要（试行）》指出：纲要计划用5-10年，到2005年全国各中小学校必须普及信 息技术并将信息技术纳入必修课。而到目前为此，中小学信息技术教材内容陈旧、 过时（如office200,windows xp早就淘汰了），很少更新，只是重复翻印。导致中小 学信息技术课堂跟不上信息技术的发展步伐，再加上学校重视不够，减少课时，挪 作它用，教师照本宣科等，在仅有的1-2节课时安排下，严重影响到学生学习信息 技术，出现“吃不饱”“长期饿”的现状，还有社会、家庭过分担心学生学习信息 技术延误学习、浪费时间、怕学成“网虫”等诸多因素，为了引导学生真正走上正 确的信息技术道路，结合目前发展需要而选择网页制作中的《个人主页设计》，更 加符合发展需求，同时也是学生感兴趣的课题，而网页制作内容在《大纲》里只是 简单的在初中和高中的相关模块里作为*号选学内容，这是从国家到学校、家庭的 重视不够、定位错误导致的结果，因此有必要让学生早些认识并掌握网络信息知识， 而不是逃避现实，我试图从我自己多年的一些研究和感悟中引导学生重新认识信息 技术的真正意义和用途并教他们初步学会简单的个人网页设计与排版。希望能起到 抛砖引玉的作用！让他们认识到：不要像我们大多数人一样成为网虫或普通的网民， 未来要做一个真正懂得信息技术的网商，为信息技术的发展作出应有的贡献！
一师一优课优质课例资源设计及制作
要点
一、优课的基本概念
优课的概念
优课指的是优质示范课例，包括一节课的教学内容设计、开发、实施和评价等所有环节的记录。典型的优课 案例通过多媒体技术，实现教学设计方案、教学课件、课堂教学视频、评测练习、教学反思等素材的整合， 是分享课堂教学过程、促进教师教学发展的有效手段。
优课的分类
理论验证型 此类课例出发点是为了倡导某种教学思想或教学理论，按照某种思想或理论设计和改进课堂教学，最终 再用该思想或理论解释教学。其价值主要是从某个角度验证某种教学思想或理论，让课堂教学与教学研 究有机结合。 此类课例主要用于印证某种教学理论，是该教学理论的实践化。
优课的规划建设
优课的规划建设
优课的设计与制作包括选题、教学设计、课堂实录、视频编辑、课例合成等步骤。
谢谢观赏
教师开展日常教学的资料来源 优课的相关资源可用于教师开展日常教学所需。
三、优课的分类与建设
优课的分类 经验分享型
自我反思型
理论验证型
优课的分类
经验分享型 此类课例通常来自于教师典型或新颖的教学方法及其随后的教学改进过程，其主要价值在于记录下教师 在教学各个环节中的“实践智慧”。 此类课例主要用于供同行借鉴，推广典型优秀教学方法，促进教师之间的资源共享、经验交流。此次“ 一师一优课，一课一名师”活动的优课主要是指该类优质课例。
视频编辑
课例合成
教学设计 教学课件 相关资源 评测练习 教学反思
优课的设计与制作
选题 优课的选题可以是针对一堂课的，也可以是针对几堂课的。
优课的设计与制作 教学设计
优课的设计与制作 课堂实录
优课的设计与制作
视频编辑 课堂片段的编辑应围绕课例的主题进行制作 镜头组接要符合人的视觉习惯和思想方式， 如：镜头组接自然，避免出现越轴和跳轴现象 在重难点和容易出现歧义的地方加上字幕或加上强调标注
网站制作教案市公开课一等奖教案省赛课金奖教案
网站制作教案一、教案简介网站制作教案旨在帮助学生掌握网站制作的基本原理和技能，通过实践操作培养学生的网站制作能力。
本教案适用于高中职业教育信息技术课程。
二、教学目标1. 了解网站制作的基本概念和流程；2. 掌握网站制作中所需的基本工具和软件的使用；3. 学会使用HTML和CSS编写简单的网页；4. 培养学生的创新思维和团队合作精神。
三、教学内容和教学步骤1. 网站制作基础知识的讲解a. 什么是网站？b. 网站制作的基本流程c. 网站制作所需的基本工具和软件介绍2. HTML基础知识的学习和练习a. HTML的基本结构和标签b. HTML文档的创建和保存c. 常用的HTML标签和属性d. 实例演示和练习3. CSS基础知识的学习和实践a. CSS的基本语法和选择器b. CSS样式的应用和效果c. 实例演示和练习4. 网站设计原则和实践a. 网站设计中的色彩搭配和布局b. 图片和多媒体元素的应用c. 网站导航和用户体验5. 团队合作与项目实践a. 学生分组进行网站制作项目b. 团队合作的重要性和技巧c. 项目规划和管理四、教学评估1. 课堂练习和作业a. HTML和CSS的基础练习题b. 网站设计和制作作业2. 项目成果评估a. 学生团队制作的网站评估b. 网站设计的创意和实用性评估五、教学资源1. 电脑实验室2. 网站制作软件和工具的安装和配置3. 网络资源和教学视频的引用六、教学反思通过本教案的实施，学生能够系统地学习和掌握网站制作的基本知识和技能，具备一定的创新思维和团队合作能力。
教学中，教师应重视培养学生的实践能力和创造力，同时鼓励学生积极参与网站制作项目，并及时给予指导和反馈。
此外，教师还应根据学生的实际水平和兴趣，适当拓展教学内容，提供更多相关资源和案例，以激发学生的学习兴趣和动力。
让网页有声有色
课题：第19课让网页有声有色
王晓丽
一、教材分析：本课是第三单元的网页制作部分的最后一课，此前，学生已经学习了如何建
立一个初具雏形的网站，通过本课的学习，学生能够对网页进行润色，让网站更加精美活泼。
学生通过掌握添加背景图片、背景音乐的方法，理解网页特效的概念，掌握添加和修改网页特效代码的方法，对网页进行修饰美化，对层次较高的学生要求能根据实际需要选择适当的
特效代码，修改并添加到网页中，并为网页添加flash动画。
二、学情分析：武原中学是一个乡镇中学，据了解，学生学习能力、学习态度、学习习惯、
信息技术基础普遍较好。
三、教学目标：
知识与技能
1. 了解加入网页背景图片和背景音乐的方法。
2. 理解网页特效的概念
3. 掌握添加特效代码，基础好的同学掌握修改特效代码的方法
过程与方法
能够根据网页的具体需要对网页进行润色。
四、情感态度与价值观：
认识网络黑客的危害，培养遵守网络公德、维护网络秩序的观念。
五、重点与难点
重点：添加网页背景图片及背景音乐，添加网页特效
难点：运用、修改特效代码
课前准备：对比网站、自主学习帮助网站、资源包
六、教学过程
环节教师活动学生活动设计意图
课前播放《成龙历险记》片段观看吸引学生注意力
导入老师编写了一段成龙历险
记的故事，让学生进入故事
情境“做反黑高手”，情境
中的问题正好需要用上本
课所学内容来解决。
学生边听老师讲
故事，边分析故
事中提出的问
题，得出本堂课
需要完成的基本
任务。
激发学生的学习兴趣
为新课要讲的三个知识点
做铺垫。
信息技术网络优质课 黑龙江省大庆市兰德学校 赵凤玲
小学信息技术网络课教学设计喜羊羊与灰太狼大庆兰德学校赵凤玲小学信息技术课网络教学设计喜羊羊与灰太狼：网络条件下文字、图片的保存[教案背景]随着互联网络的广泛应用，交互式的计算机系统结合互联网络的多媒体技术，凭借自身强大的功能，把课本与文字、图片合而为一，使学生根据自身的需要，选择媒体资料，进行自主学习成为可能。
因此，通过本课的学习，只在让学生了解互联网络的基本知识和功能，学会使用浏览器浏览网页的基本方法，掌握利用互联网络获取知识的基本方法和技能，培养学生的自主学习意识和实践能力。
[教学课题]学会利用搜索引擎，使用关键字搜索图片和文字，体验网络搜索的优势；学会图片、文字的下载、保存和整理。
[教材分析]这节课是人教版小学二年级下册第二单元的内容。
本节课在学生已经学习掌握利用中文搜索引擎查找相关信息的基本上，结合学习的年龄、兴趣、心理及认识结构的特点，按照由抽象到具体，循序渐进的原则，通过设置问题或任务，引导学生练习、探究，使网络搜索、图片、文字的保存贯穿于整个教学过程，同时，通过采用任务驱动教学法，开展与“任务”相关的探索学习活动（制作喜羊羊与灰太狼的小故事）培养了学习探索、研究的能力。
根据以上的教材分析确定本节课的三维目标如下：（1）知识与技能：掌握利用IE浏览器浏览网页的同时，掌握网页中的图片、文字的下载、保存方法，并能对这些内容进行整合应用，从而培养学生通过网络获取知识的能力和自主学习的能力。
（2）过程与方法：采用“任务驱动和小组合作”的学习模式，从学生感兴趣的身边实例入手，使学生自主确定学习需求，通过将下载的图片、文字保存到电脑里，培养了学生的小组合作意识；通过制作喜羊羊与灰太狼的小故事，培养了学生利用互络有目的的进行学习、交流，以及在实践生活中应用的能力。
（3）情感态度价值观：提高学生学习信息技术的兴趣，养成利用网络进行学习的习惯；学会进行小组合作学习，增强团队意识和实际处理问题的能力；培养学生学会分析、筛选及综合运用知识的技能，提升学生的计算机素养。
d优质课一等奖小学综合实践《简易互动媒体作品设计：插入超链接》
（龙江——仙林湖）
紫金山 鸡鸣寺
桦Байду номын сангаас村
南京地铁 号线
（龙江——仙林湖）
紫金山 鸡鸣寺
桦墅村
以桦墅村为例
探究一： 地铁站到景区怎么走？
设置“桦墅村”文本超链接，跳转到“桦墅村景点介绍“的幻灯片。
小结： 你觉得插入超链接要注意什么呢？
以桦墅村为例
探究二： 在景区迷路了怎么办？
幻灯片中虽有“桦墅村”地理位置的图片，但 图片太小，根本看不清楚，迷路了怎么办？
(如：大家好，我是**，今天我演说的内容是一起去踏青之游览南京紫金山，......)
桦 墅 村 ——西岗桦墅站
景点介绍
桦墅村隶属于南京市栖霞区西岗街 道。桦墅村山水相依，风光旖旎，获得 “江苏省水美乡村”称号。
地理位置
桦墅美丽乡村视频
返回
紫金山 ——蒋王庙站
景点介绍
紫金山位于南京市玄武区，江南四 大名山之一，是南京名胜古迹荟萃之 地。其中包括明孝陵，梅花山等。
小结
这个任务中的“链接源”和“链接目的地”是什么？ 动作按钮 —— 幻灯片
我们知道“动作按钮”是属于“形状”中的，其实 “形状”是可以的用来插入超链接的。
超级演说家
1. 同桌之间互相说一说，如果你做一名小导游， 你该如何为大家介绍景点呢？
2. 邀请两名同学，展示制作好的幻灯片，讲解介绍 景点和制作的方式等。
桦墅村智能地图网页
/?newmap=1&s=inf%2 6uid%3D61f634f64a3532786b49f31f%26wd %3D%E6%A1%A6%E5%A2%85%E6%9D%91% 26all%3D1%26c%3D315&from=alamap&tpl= map_singlepoint
微课比赛(网页设计与制作-教学设计)
《网页设计与制作》课程单元教学设计---《项目: 缥缈世界和小魔术》一、教案首页本次课标题任务10 利用图层、时间轴和行为三结合综合实现动态效果网页设计与制作所属学科理科专业计算机应用课程网页设计与制作授课班级11计算机应用适用对象计算机专业高职生上课时间15-20分钟上课地点理实一体化教室教学目的要求学生通过本次课的学习和训练，能熟悉图层、时间轴和行为三者结合实现动态效果网页的设计与制作，让网页从设计到制作更灵动。
教学目标能力目标知识目标素质目标1．能使用“图层”加载动态效果网中的对象2．能通过使用“时间轴”实现动态效果3．能灵活应用“行为”实现动态效果的控制1．动态效果网页制作“三元素”2．图层、时间轴和行为三者在实现动态效果网页的具体常规作用3．动态效果网页设计与制作三元素的使用规律或步骤1．培养学生理论联系实际的品质2．培养学生敏锐的洞察力和分析力4．培养学生举一反三设计与动手并重的素质任务与案例任务1：飘渺世界（任意飘动的对象能停能动；背景和文字颜色单击改变），此为目标任务任务2：小魔术，此为补充实例（分析+演示+总结）重点难点及解决方法重点：图层和时间轴用来实现动态效果难点：灵活应用行为实现控制动态效果解决方法：引导学生根据任务要求，在温故知新的前提下，让学生有意识挖掘理论知识点，通过补充案例的分析和现场演示，并整理要点规律，再而回到引导任务加以分析实现，完成目标任务的同时夯实了理论知识点的掌握，为将来的举一反三奠定了坚实的理论和操作基础。
学习环境选择与学习资源设计1. 学习环境选择（1）多媒体教室（2）普通教师（3）计算机实验机房（4）专业实训室2. 学习资源设计（1）多媒体课件（2）网页素材及补充实例资源库形式方法手段目标导入+实例展示、讲解+教师提问+案例分析与实现+学生代表分析、教师点评、讲解并总结参考资料1、《dreamwear mx网页设计与制作》2、《dreamwear 8网页设计与实训教程》3、网上资料二、教学设计序号步骤名称教学内容教师活动学生活动时间分配(分)工具与材料课内/课外1告知（教学内容、目的）告知：本次课的教学内容：动态效果制作篇教学目的：要求学生通过本次课的学习和训练，能熟悉图层、时间轴和行为三者结合实现动态效果网页的设计与制作，让网页从设计到制作更灵动。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
《网页制作》教学设一、教材或教学内容分）和网络本章内容在本教材中的位置处于第五章，是在文字处理Word200和将要学习的网页制础及因特网应用两章之后。
学生所学的文字处理软Wor 公司的产品，在软件的使用上有很多的共通之处Microsof软Frontpag同而不必面面俱到地在很多内容可以让学生自学所以在学frontpag的时候而第四章网络基础及因特网的应用又为学生对网页的理解奠定了基础上讲授生对网页中的基本元素——文字、图片、动画、声音等都有所了解，而网页的制所以说，学生要学的就是这种组合的方法就是将这些元素重新组合到网页上学起来就轻松然大多数学生以前都未接触过网页的制作但有了以上这些基础了本章内容按照学生已有的基础，我对教学内容分了一下类，也为教学的组织网页的制作网站的建立和管理本章内容主要由网页基础知识作打下一点基础创建超链接、图片的处理、网页框架重点是网页的制作和创建超链接，学会了这些就可以开始简单的网页制作了难点是网页框架，这部分相互之间关系比较复杂，必要时，老师在对各组个辅导时，可以给予分别讲解这个分类可以为组长安排各个组员的任务提供参考，使
分工更加合理二、教学对象的分析页6 共页1 第
信息技术课虽然已经成为初中的必修科目，但是城乡学生之间掌握
情况的差异还对一些常条件好一点的初中学生不仅已经熟练掌握了
课本上的内容，却相当大，而差一点的可以说是从高中开始才正式接触到信息技术知识的学用软件有所了解；习，他们需要多锻炼、多
指导，所以协作学习对学生的学习帮助很大。
三、教学策略的选择
及媒体的使用在教学策略的选择上，我使用的是任务驱动和协作学
习相结合的方法。
任务驱动就是要求本章内容学习完之后，每个小组都要完成自己班级网站的制这有助于激并在全班进行评比，选择最好的作为班级主页挂到学校主页上去，作，发学生参与学习的积极性。
协作学习则是让学生在学习过程中互帮互助，用较短的时间、教少的精力学到让他们在学习之后获得成就感。
因此在媒体的选更多的东西，完成一个集体项目，系统有利于教师进行分组教学和学生TOP2000系统。
TOP2000择上，我们使用的是教学过程开始之前，教师把学生按座位分成四组，每个作品的点评及成果的展示。
保证每个组都有计算机操作方面比较突组都按学生对计算机的掌握程度平均分配，使其形成能够互帮互助的学习小组。
并由他们自己选出出的，也有相对比较差的，确定在班级主页制作过程中主要完成什然后由组长根据组员的情况，组长各一名，也就是说起到一个组织者的作用。
做过网页的人都知道，做网页是一项比么任务，而在这而要学生在较短的时间内制作出像样的网页是比较困难的，较费时的工作，组长把任务分到各组员头上以个过程中，网页的设计占去了相当多的一部分时间，组员就可根据自己要完成的任务相对集中的做某方面的工作，做完以后，组
员后，在完成自己的网页后，之间进行经验交流，告诉组员自己的网页是如何制作出来的，其他组员就可在较短的时间之内这样，再重复
一遍制作过程花费的时间的不多的。
页6 共页2 第
因为每位组员都必掌握比较先进的网页制作方法，而不必再花那么多时间去探索。
也同样有自己探索学习的机会和介绍自须自己完成一个任务，所以在这个过程中，己经验的机会，使组内的每个学生都在学习中获得成就感。
四、教学过程
页6 共页3 第
页6 共页4 第
课后：大家集中各组的优势，将班级主页完成，挂到学校主页上下面是我所做出的评价：【优点】：1、对教学内容分析得体，对教学重难点把握准确，使用的软件难易适中!、对学生的基础分析到位，这样可以更好的把握教学进度!2、任务驱动法及小组合作学习的方法进行，特别在小组协作中分工相当明确，3同时也锻组长做什么，每位组员做什么都很明确，充分调动了学生的学习积极性，炼学生们
的团结协作精神!页6 共页5 第
、做到了学生为主体，教师为主导，教学过程中有师生活动和生生活动，课4堂气氛活跃，使得人人参与课堂教学。
【建议】：、信息技术教学应更多培养学生的信息素养。
1、布置课堂任务要分易、难至少两个，这样可有效调动不同层次学生的学习2积极性。
、提交教学任务后，应让学生通过教学软件或网络进行上传，并将其展示给3学生，进行互评，从而调动学生的学习积极性，提高任务的完成质量。
、建立良好的评价体系，包括教师评价学生的作业，学生对教师教学内容及4 方法的评价，学生互评等。
页6 共页6 第。