- 相关推荐
网页制作教学设计
作为一名辛苦耕耘的教育工作者，时常需要编写教学设计，借助教学设计可以提高教学效率和教学质量。你知道什么样的教学设计才能切实有效地帮助到我们吗？下面是小编精心整理的网页制作教学设计，欢迎阅读与收藏。
网页制作教学设计1
一、教材依据
辽宁师范大学出版社初中信息技术八年级上册，第二单元《网站设计与制作》，活动1“创建个人网站”以及活动2中的关于部分FrontPage20xx的内容。
二、设计思想
【教学指导思想】
信息技术课是一门实践性很强、极富创造性、具有明显时代发展性特点的课程。而现代教育理论提倡以学生为中心，强调学生“学”的主动性，学生是信息加工的主体，教师的作用体现在组织、指导、帮助和促进学生的学习、充分发挥学生的主动性、积极性和创造性，从而使学生最有效地进行学习，达到最优的教学效果。因此本课题遵循“教师主导，学生主体”的设计理念，让学生在教师的引导下，对所学的内容进行探索、分析、研究，在实践操作中培养学生科学的态度和价值观，同时培养学生的学习兴趣。
【教学对象分析】
1、学生的知识能力
教学对象是八年级的学生，这一阶段的学生正处在抽象逻辑思维逐步形成的过程中，但形象思维仍是获取知识的重要思维方式。而本节课中涉及到的HTML语言有其枯燥难懂的一面，学生在理解上存在着一定的难度，所以教师在教学设计中希望能通过学生自己的双眼、双手以及思考来发现新知识，从而减轻他们对新知识的畏惧、降低理解的难度。
2、学生心理特点分析
初中学生活泼好动、好奇心强、求知欲旺、视野广泛，对信息技术充满兴趣，大部分学生都能熟练使用浏览器浏览网页，他们对上网和网页有着极大的兴趣。所以在本课题中教师利用学生的这种心理设计了一个趣味导入，从趣味引入学生感兴趣的网页，使学生在课堂中保持着较高的学习积极性。
【教学内容分析】
本节课是新授课且是第二单元《网站设计与制作》的第一节课，教师将这节课的重心放在了“启下”上，目的是激发学生的学习兴趣和他们的求知欲，为顺利开展以后的教学活动打好基础、做好铺垫。本节课的教学内容有两个方面，一是初识HTML语言，二是初识FrontPage20xx的窗口组成。教师设计的重点并不是让学生充分理解HTML语言的结构，而是通过HTML语言能够有效地引出制作网页的'软件FrontPage20xx，继而使学生能顺其自然产生使用FrontPage20xx制作网页的兴趣。
教学内容的整合：课本上将初识HTML语言和FrontPage20xx的窗口组成分在了两个活动中，考虑到信息技术课一星期一个班只有一节课，如果第一节课只讲HTML语言，不涉及制作网页的软件FrontPage20xx，会令学生感到枯燥，同时这种枯燥感很可能会维持一个星期直到下节课，这样学生对制作网页的兴趣就远不如将两个教学内容结合起来的高，也不利于今后的教学活动开展。所以教师将本节课的重心放在让学生理解HTML语言与FrontPage20xx之间的联系上。
三、教学目标
【知识与技能】
（１）了解网页与网站的有关知识；
（２）了解HTML标识性语言的功能及结构；
（３）认识构成网页的基本元素；
（４）了解常用的制作网页的软件；
（５）了解网站策划与定位的重要性，掌握网站的规划流程；
（６）了解网站设计软件FrontPage20xx的窗口组成；
（７）学会设计有意义的网站主题，收集网站相关资料，画出网站的结构图。
【过程与方法】
（１）趣味导入新课的内容，极大地发挥学生主体、教师主导的作用；
（２）适时引导学生产生新的问题，再通过教师的讲解与演示、对比和学生的自主学习来解决问题。
【情感态度与价值观】
（１）强烈的求知欲激发学生的学习兴趣和学习积极性；
（２）了解信息技术的前沿知识后，学生会对信息技术课保持新鲜感和兴趣感；
（３）学生在不断实现自己主体地位的同时，也获得了新知识，更从中体会到了学习的快乐。
四、教学重点和难点
重点：
1、认识构成网页内容的基本元素，理解网页布局的特点；
2、了解HTML标识性语言的功能及结构；
3、学会启动FrontPage20xx，了解网站设计软件FrontPage20xx的窗口组成，理解各组成部分的功能；
4、网站主题的确立，规划网站结构图，学会创建新站点的基本方法。
难点：
1、理解HTML标识性语言的结构及应用HTML语言编写简单网页；
2、网站如何定位；
3、如何收集网站的相关信息；
4、在导航视图模式下建立网站结构。
五、教学准备
①搜集常用的网页制作软件的相关信息；
②打开多媒体电脑教室的教师机和学生机，保证电脑教室的广播系统工作正常；
③共享班级文件夹；
④示例的班级网站及网页。
六、教学模式选择
“学生主体，教师主导”的教学模式。
七、教学过程
1、情境引入：向学生展示一组优秀网站、网页，激发学生创作自己个人网站的兴趣和欲望。学生在观看，欣赏网站时，受到激励产生想制作一个网页的冲动。在师生欣赏网页作品时复习回顾已学并已淡忘的基础知识。问题：网页的构成元素及布局？教师分析案例，与学生共同回顾文字的插入、图片的插入和设置、动画的插入和设置、表格的相关操作等相关知识。让学生在案例中回顾基础，激发灵感。并引入本节主题，自己动手制作网页。
2、展示模板：
教师向学生展示本节课要完成的网页。要求学生会模仿制作出该网页模板，并能够自己创作出新的网页模板。
3、本节任务：
1）网页与网站有什么区别？
2）一个网页由哪些元素组成？对照给出的网页分析网页的组成元素—标题图片，标题栏，水平线，滚动字幕，图片，文字及背景等等。
3）用Photoshop处理素材，达到给出网页中图片标题，并设计出突出自己主题的网站标题。拓展：用photoshop软件，画图软件，或flash软件设计自己需要的网页图片。
4）要求学生会模仿制作出该网页模板，并能够根据自己确立的主题制作一个网页模板。学生自主完成模板仿制，并自主探究设计一个复合自己设计主题的网页模板。小组内成员可相互交流，教师巡视，随时解决学生在学习过程中遇到的问题，并注意收集有共性的问题，并适时给以学生以点拨。尤其关注一下学困生。
5）小组选出最佳模板，探究完善此模板，然后以此模板设计网页。4。评价展示：
作品完成，提交给教师机，自我评价，小组互评，选出小组最佳作品提交展示，师生共同赏析评价，挖掘作品优点，并指出改进之处。培养大家的审美能力，并挖掘大家的创新能力。
5、课堂小结
师生共同回顾这节课的基础知识与基本技能，并加强网络道德意识，注意版权。
八、教学反思
在信息技术教学中，必须以新的教学理念和教学理论为指导，根据新的课程标准，探索适合信息技术课堂教学的教与学的新策略和新模式来挖掘学生潜能，提高学生素质。以前我总认为信息技术课就是教会学生如何操作，课堂中总是采用“教师讲，学生听”的传统模式，是“学”跟着“教”走，只要“我说你做”就可以了。现在我尝试着做一些改进，在本课题中围绕“学生主体、教师主导”的设计理念去设计每个教学环节，积极体现学生的主体作用，努力提高学生的学习效果。
实践证明我的想法是好的，但是在实践中难免有疏忽和做的不够细的地方。比如：由于我的观察不全面，忽略了个别学生学习中的心理障碍，有些学生的畏难情绪影响到他的整个学习效果；课堂学习气氛热烈但不够和谐。这些都说明了一个问题：我仅仅注重了学生整体主体的体现，而忽略了个体。经过思考，我认为在这节课的教学设计中可以多增加个体展示的机会，特别是那些学习有困难的学生，我应该多关注他们的动态，多帮助他们。
本课的教学目标是掌握使用FrontPage制作网页的基本方法；重点是掌握在网页中插入文字和图片的方法；难点在于插入表格规划网页的结构。备课时，发现教材以一个标题，一张图片以及一篇文章的简单结构示例，如果完全依照教材进行授课，势必无法突破难点。于是设计了一个将学生前期制作的环保报刊，利用FrontPage软件制成网页的环节来帮助学生突破难点。并取学生环保报刊中具典型结构的五份。制作出引导学生分析结构，规划框架的演示片备用。
课堂以自主探究的模式展开，同学们在以往的学习中已掌握了在Word中插入表格、图片等方法，在FrontPage中他们很顺利地完成了教材呈现的目标。基本掌握了单张网页的制作方法。
接下来就是突破难点的训练。面对演示片呈现出的任务及教材相关提示。此时，问题集中到如何插入一个布局表格来实现规划好的结构。而教材上完全没有提示学生探究FrontPage “表格”与Word “表格”功能的异同。少数同学开始试着插入适合自己网页结构的框架表格，而大部分的同学则完全没有考虑结构问题，做起直接的搬移，将FrontPage当成Word来用。
直到出现无法将图片，文字放置到设想位置时，才意识到教材中“FrontPage通常用表格来安排网页中各种内容（文章、图形等）的版面位置。”这问话的含义是否明确。急着寻求解决的办法。我便让哪些意识到要先插入适当结构框架表的学生来说说他们的想法。并及时出示与学生思维一致的演示片，将探究FrontPage “表格”功能的提示呈现给他们。同时利用极域教室的功能，向全体同学展示同伴的探究结果，让学生不同的思绪方式及智慧产生碰撞，相互启示，顺利突破教学难点。
网页制作教学设计2
一、教学目标：
1、知识与技能：
（1）、了解框架结构网页的概念及在网页中的作用，了解它与表格网页的区别。
（2）、掌握框架结构网页的建立、框架结构的拆分、框架的删除等。
（3）、掌握框架中页面设置及保存的方法，如设置初始网页按钮、新建网页按钮等。
2、过程与方法：
（1）、能够区分框架结构属性设置与网页属性设置的不同点。
（2）、通过框架结构网页设计，使学生对网页的整体结构有更进一步的认识。
3、情感态度与价值观：
（1）、能够将表格与框架结构网页结合使用，在创作中体验乐趣。
（2）、培养学生网页设计的审美意识、创新意识。
二、教学重点难点：
1、教学重点：
（1）、框架网页的作用和功能，框架的建立与属性设置。
（2）、框架中各个页面之间的关联，每个框中页面的设置方法。
（3）、框架网页的保存方法。
2、教学难点：
（1）、框架结构网页中框架属性与页面属性的设置方法。
（2）、理解框架结构的多页面存储方法及各页面之间的关联。
三、教学过程：
1、创设情境、导入新课
（1）、教师展示一组表格制作的网页，引导学生找出它们的共同特点。并提问如何快捷地制作这种网页（学生回答：使用复制、粘贴快捷地制作）。
（2）、教师又提问：有没有更好的方法呢？相同的区域我们能否只做一遍呢？从而导入新课——框架网页的制作。
设计意图：通过对比、比较，引导学生思考，激发学生学习的乐趣。
2、任务驱动、自主学习
（1）、教师展示一个框架网页，引导学生理解框架网页的概念。
（2）、出示任务一：框架网页的新建与保存。教师要求学生先阅读教材中的操作步骤，再尝试完成书本第227页的实践学习。
（3）、教师讲解框架结构中的每个框都是一个独立的选项文件，即网页文件，因此当框架确定之后，需要为每个框分别指定其网页文件的来源，可以通过每个框中的“新建网页”按钮和“设置初始网页”按钮进行选择。
（4）、学生理解框架网页的概念，通过阅读教材中的内容，自学新建框架网页的操作，初步了解“新建网页”和“设置初始网页”两个按钮的不同，并认真聆听教师的讲解，注意观察，按要求模仿操作。
（5）、出示任务二：相关页面的制作与设置。教师要求学生先阅读教材中的操作步骤，再尝试完成书本第228.229页的实践学习。
（6）、学生制作相关页面，同时也是对前面所学内容的复习和回顾。教师反馈学生的操作情况，开展评比活动，对表现好的学生给与表扬。
（7）、出示任务三：框架网页属性的设置。学生自主探究学习，有问题可向教师寻求帮助。教师基础扎实的同学完成任务后可进行拓展学习。
（8）、教师请学生示范操作，并说明自己设置的.方法和原因。同时鼓励做的比较好的学生。
设计意图：培养学生的自主学习能力，对于课堂教学难点，学生在教师的讲解后模仿操作，有效突破难点。
3、展示作品、课堂小结
（1）、教师给出一些常见的框架结构应用界面，如Web邮箱页面等，引导学生总结本课内容，并让学生分组，推进一些优秀作品在全班展示。
（2）、教师点评，并鼓励完成作品比较好的学生。
设计意图：拓展学生的视野，使学生了解框架的应用方法。展示优秀作品鼓励学生，激发学生的创作欲望。
四、教学反思：
1、本节课是在学习完简单网页、表格布局网页、交互式网页的基础上，进一步页的设计方法。由于学生已经具备了一定的网页设计基础知识与技能，所以教师可以根据学生的实际情况，采用更灵活
的教学方法。教师可以简单介绍框架结构网页的功能及框架的建立与编辑方法，以及框架属性设置与网页属性设置的方法与区别。然后由学生根据教师提供的学案及演示动画，完成框架网页设计任务。
网页制作教学设计3
一、教学题目：网页的制作
二、教学目标：
1、知道站点、主页的概念，能在指定位置建立只有一个网页的站点；
2、认识frontpage的界面；
3、掌握在主页中插入文字、图片、水平线；
4、掌握页面文件与图片的保存。
三、教学重点：
1、能在指定位置建立只有一个网页的站点（难点）
2、能在页面中插入文字、图片、水平线
3、掌握页面文件与图片的保存（难点）
四、教学难点：
在教学中，一方面采用比较教学的方法，促进学生知识的迁移；另一方面，提供学生一个导学课件，让学生根据这个网络环境下的课件自己探索学习，以满足不同层次学生的需求。
五、教学过程：
教师活动：
1、引入课题：（激发兴趣，活跃气氛）
同学们喜不喜欢上网？经常上新浪、西祠胡同等，有没有同学知道新浪、西祠胡同称做什么？（网站）
浏览新浪网站，浏览的第一个页面称为什么？（主页）
我们还可以浏览其它的页面，点击超链接浏览，当鼠标变成手指的形状时有超链接。
问题1：网站是不是就是网页？用自己的语言描述一下网站的'概念（网站包含多个网页，通过超链接把不同的页面链接起来）
问题2：网页是不是就是主页？（第一个页面称为主页，网站设计者可以确定哪一个是主页，主页的文件名一般为：，主页也是网页）设计网站一般必须经过两个步骤，首先是在计算机里做好，然后发布在internet上，让所有的人访问浏览。
今天我们学习用frontpage建立站点，制作一个主页。先来研究一下没有发布的网站，打开教师做的网站问：同学们看到了什么？（文件夹）总结：
可以这样理解网站：在资源管理器里，网站表现为一个文件夹，里面存放的是所有与网站相关的文件。
打开主页，浏览页面，这是老师做的一个导学课件，将帮助大家完成学习任务。请学生浏览教师课件，了解学习任务。
2、新建站点
frontpage的启动问：与word比较，有什么不同？（增加了视图区，编辑区有三个窗口）总结：
视图区：多种视图模式是为了方便网站的管理。制作网页时，必须在网页视图中编辑页面。
普通窗口：鼠标在闪动，可编辑、修改页面，所见即所得的方式。
预览窗口：浏览器中出现的效果，与powerpoint中的“放映幻灯片”类似。html窗口：编写html（超文本标记语言，它是描述网页内容和外观的标准。）打开导学软件，根据步骤，示范建立只有一个网页的站点，强调新站点的位置、路径的正确输入，站点的名称。
任务1：学生根据导学课件，在d：建立自己站点
请一位学生示范如何建立站点，教师总结。问：在文件夹列表中看到了什么？
分析多出的文件夹列表栏，多了一个文件夹，里面有两个子文件夹和主页，图片存放在images文件夹中。
3、编辑主页与保存主页
看效果图，请学生分析主页中的元素
总结：鲜明的主题，如：我的世界、我的宠物等，有分割页面的水平线，与主题相关的图片，对网站的简单介绍
根据导学软件，学生完成任务2：设计主页、保存主页与图片
4、总结反馈
请学生示范，讲解如何插入图片（来自剪贴画与来自文件）、插入水平线，如何保存
总结：必须切换到“普通”窗口下编辑主页的保存中存在问题：
单击“文件”———“保存”或工具栏的“保存”按扭，弹出一个对话框，保存嵌入式文件，改变文件夹，图片必须保存在本站点images文件夹中，便于站点的管理。
5、请学生继续完成自己的主页，有能力的同学完成提高篇
六、小结：
展示学生作品，教师与学生共同评价请学生总结今天的学习内容：建立包含一个页面的站点，主页的设计与保存。
网页制作教学设计4
本学期计算机科学与技术系软件工程专业的《网页制作》课程由我负责，学生共74人，及格率100%。其中90分以上的没有，80分以上的只有几个，大多是在70～80之间，也有一小部分在60～70之间。成绩不是很理想，总体来说大多数学生平时上机实践比较积极、踏实，能够自觉的按照老师的要求去做，但也有少数学生自觉性差，需要老师和学委催促。现将一个学期的教学情况总结如下：
一、老师给与学生合理的引导，更要加强自身的素质修养，提高自己的知识水准。
在整个教学过程中，在教学过程中自己还缺少更高的艺术修养和艺术创造能力，所以还要不断的学习；另外就是技术上还需要完善，也需要和有经验的老师多交流，多沟通。相信只有站在一定的高度去看整个项目的实现，会更通俗易懂也更有说服力，所以也不能说都是学生的`原因，归结起来还是要提高自己的知识水平和业务素质！
二、了解学生，加强考核。
针对全体学生来说，聪明程度相当，但学习兴趣层次不同，大部分学生只愿意听后选择性的接受，而没有知识的创新利用，或者是没有下去自学，巩固知识，单一的只是听和做。有的同学，上完课后根本就直接把书丢在一边置之不理。综合学生的学习态度问题，个人认为还需要加强考核制度，从严制学，宽进严出，严肃考风！
三、教学内容心得
1、网页制作要简洁大方。网站在设计过程中以简洁大方为主，配合合理的颜色搭配和主题内容的诠释，给访问者赏心悦目的感觉；而避免过多的动画和帧的过多运用，以及不明确的导航，杂乱的颜色，没有主题的胡编乱造。
2、网站风格要统一。所有的图像、文字，包括像背景颜色、区分线、字体、标题、注脚什么的，要统一风格，贯穿全站。这样子读者看起来舒服、顺畅，也会对你的网站留下一个“很专业”的印象。知识运用中要大量配合合理的模板、CSS样式的运用而避免在网页中反复的字体样式重定义颜色的胡乱运用，参差不齐给人杂乱的感觉。
3、网站布局合理。避免一些“拿来主义”，一些学生为了设计方便，拿网上流行的模版做网页，做出的网页几乎是千篇一律，没有特色，虽然完成了网页的制作，毕竟不是出自个人之手，知识缺乏进一步巩固，且让浏览者产生厌倦。另外导航清晰化，能引领浏览者阅读网页，思路一定要清晰，避免交叉链接。
4、网站容量要小。虽然网页更加美观可以吸引浏览者，但是图片，动画容量大会影响浏览速度，所以一定要注意网络容量问题。图片尽量压缩，多采用单一色，或者简单的颜色；动画要尽量简洁实用，用最少的帧做出最漂亮实用的动画，给网页增色。
但是总体来说，通过整个学期网页制作的学习，学生已经了解了网页制作所需要的基本技术，也掌握了网页制作的基本技能。但由于时间紧迫，知识点多，一些重点难点问题还需要勤加练习，比如：静态网页中的布局和CSS的定义；动态网页中对象的综合运用等等。
当然也存在着遗憾，不少学生反映，学习爱好更多的是动画的制作即Flash的学习，而我们只是笼统的讲解，不能完全满足学生的求知欲！当然针对网页制作来说，还需要加强学生的配色观念以及审美观的培养，以及动态网页的实现技术的把握，在很多方面还需要老师和学生们进一步配合，共同学习和实战，以达到知识运用的一定高度！
