当前位置:网站首页 >> 作文 >> 最新网页制作技巧教案 网页设计与制作教案 详案(五篇)

最新网页制作技巧教案 网页设计与制作教案 详案(五篇)

格式:DOC 上传日期:2023-05-03 14:16:03
最新网页制作技巧教案 网页设计与制作教案 详案(五篇)
时间:2023-05-03 14:16:03     小编:zxfb

作为一名教职工,总归要编写教案,教案是教学蓝图,可以有效提高教学效率。那么问题来了,教案应该怎么写?下面我帮大家找寻并整理了一些优秀的教案范文,我们一起来了解一下吧。

网页制作技巧教案 网页设计与制作教案 详案篇一

2、学会利用表格来规划网页

3、培养学生创新的能力以及动手操作的能力

利用表格来规划网页,从中培养学生的创新能力

一、情境导入

同学们你们善于观察吗?老师先考考你们,我们一起来看一组图片,你们看看在那里看过呢?学校缓台的窗台上。你们的观察能力真的很强啊,对,这些都是我们学校美术的特色作口,盘画。其实,我们做过很多作品:有手工作品,语文课中的作文、书法等都是作品,这节课我们以绘画作口品为例,做一个学习园地网页,把我们的作品展示到自己的班级网站中,以便我们更好的努力学习。现在我们就一起来制作吧!

二、新知探究

首先我们来打开上节课的班级网站,在这个网站中新建一个网页,并保存成“学习园地”。

教师讲解:如何制作学习园地网页。

1、制作网页的标题:输入文字,并设置文字的格式。

2、插入表格:单击“表格”中的“插入表格”并对表格属性进行设置。如:行、列的操作,对齐方式等。同时讲解什么是行,什么是列,以及单元格的概念。

3、修改表格:调整表格行高和列宽。

4、在学生学会插入表格的基础上,来设计网页,展示作品。并讲解在单元格中可以插入图片、文字。那我们就一起快快去做吧!插入图片,并在图片的上面或下面进行图片的注释。

5、进一步设置单元格的背景,来美化网页。

6、设置超链接:通过导航栏目,设置文字超链接。选中文字,点击右键选择超链接在列表中选择你要链接的网页,单击“确定”按钮。

7、学生在教师的讲解后,学生自己动手操作制作网页。教师进行指导。(伴随音乐)

三、作品评价

1、生评:从网页设计上,美观程度上,知识落实上重点评价。

2、师评:对学生作品进行评价,并对其它学生的评价加以更完整的解释。

四、总结

我们这节课主要是利用了表格来设计网页,以使来美化我们的网页,通过绘画作品的展示,学习更多的知识。

网页制作技巧教案 网页设计与制作教案 详案篇二

1、知识与技能

(1)了解超级链接的含义及链接源和链接目标的含义,掌握同一站点内以及不同站点间网页超级链接的创建方法。

(2)掌握网页内书签的作用及创建书签链接方法,掌握交互式按钮、框架网页内超级链接的设置方法。

(3)理解热区链接的含义及创建方法。

2、过程与方法

(1)通过创建网页超级链接的操作,使学生了解网页中创建超级链接的基本方法,破除对网页链接的神秘感。

(2)通过对不同对象设置超级链接的操作,使学生总结出操作的规律,培养学生自主学习与操作的能力。

(3)通过网页不同的超级链接方法,拓展学生思维,创建多种形式的网页链接。

3、情感态度与价值观

(1)通过链接我国主要自然保护区网页,激发学生热爱祖国、热爱自然、热爱生命的激情。

(2)完成超级链接,使学生感受成功的喜悦和快乐。

1、教学重点:

(1)超级链接的含义及链接源和链接目标的含义。

(2)超链接的制作方法——给文字、图片制作超链接,制作书签链接,给交互式按钮制作超链接,框架页面内的超链接,图片区域制作超链接等。

2、教学难点

(1)书签链接中名称及对应链接位置的设定。

(2)在框架页面中制作超链接时,目标对象所选择的显示窗口形式。

教学方法与教学手段:

任务驱动法、讨论探究法、讲解与演示法、类比知识迁移法。

教学准备:

"动物——人类的朋友"站点,包括未链接的网页,如欢迎页、表格页、框架页,表单页等。

教学过程:

1、引入

展示两个主页,一个已经创建了链接,一个没有创建链接,让学生进行比较并找出区别,引出本课课题——超级链接。

提出:我们在先前的学习中,哪个软件中的相关操作与它类似?什么是超级链接?找一个例子,分析链接源和链接目标分别是什么?

学生展开交流,通过对比找出不同点,并积极思考,回答老师的问题。

设计意图:通过对比操作、交流,再辅以知识迁移,明确本节课教学内容。

2、新授

(1)站内超级链接

引导学生回顾powerpoint中超链接的制作方法(教师提示:右击链接源,利用快捷菜单制作超链接),辅以教材中的内容,让学生自行探究并完成以下操作:

任务1同一站点内不同页面之间的链接

○1制作首页(欢迎页)到表格页的超链接。

○2给表格页内交互式按钮设置超级链接,链接到相关页面。

○3给框架页内交互式按钮设置超级链接,链接到相关页面。

教师巡视,及时指导,安排学生示范操作并讲解如何制作超链接。

交互式按钮的超链接制作要求在框架网页中演示操作。老师可以提问学生:演示者操作的对吗?有没有问题?

引导学生发现问题:超链接制作完成后需要检验(保存后预览)。

教师讲解,突破难点,再交由学生操作。

以上是同一站点内不同网页之间的链接,有时一个页面中内容过多,需要不断拖动滚动条实现阅读,能否实现快速跳转呢?

任务2同一站点内同一页面内的跳转(链接):在"动物趣闻"页面内制作书签链接。

教师讲解:由生活中的书签引入,介绍"书签链接"的概念,然后再演示如何操作。

提示:书签链接的双向性问题(返回)。

学生认真听讲后模仿制作,教师巡视进行指导并反馈学生的完成情况。

(2)站间超级链接

仅凭我们课堂上制作的这些页面还不足以详细介绍我们的主题,此时我们还可以借助超链接,链接到因特网上的其他网站,以丰富我们的内容。

任务3借助热区链接,为"友情链接"页面制作超链接,链接我国一些自然保护区网站。

有了以上基础,可安排学生自学教材中有关热区链接的相关内容,学生探究操作后教师再安排学生进行演示,辅助以提问的形式检验学生的自学情况。

3、总结与评价

开展同学间的互助,检验其链接完成情况,推荐优秀同学做展示。引导学生分类总结本节课的知识点。

网页制作技巧教案 网页设计与制作教案 详案篇三

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、本节课是在学习完简单网页、表格布局网页、交互式网页的基础上,进一步页的设计方法。由于学生已经具备了一定的网页设计基础知识与技能,所以教师可以根据学生的实际情况,采用更灵活

的教学方法。教师可以简单介绍框架结构网页的功能及框架的建立与编辑方法,以及框架属性设置与网页属性设置的方法与区别。然后由学生根据教师提供的学案及演示动画,完成框架网页设计任务。

网页制作技巧教案 网页设计与制作教案 详案篇四

1、知识与技能:

(1)理解框架的概念及用途。

(2)掌握框架网页的新建、制作、编辑与保存,了解框架的拆分方法。

(3)初步掌握将框架结构与表格布局结合使用来制作网页。

2、过程与方法:

(1)通过对表格网页的分析,体验新知识(框架结构网页)的优点,从而促进其学习新知识。

(2)理解框架的概念与组成,学会分析网站的结构。

3、情感态度与价值观:

(1)通过以"人与动物"为主题的框架结构网页制作活动,了解更多有关人与动物和谐相处的知识,通过故事趣闻,增强学生关注动物的兴趣和意识。

(2)能够将表格与框架结构网页结合使用,在创作中体验乐趣。

1、重点:框架的概念、用途, 创建、编辑与保存框架网页的方法。

2、难点:框架的拆分。

对比教学法、探究学习法、模仿学习法。

整理、归类相关素材,并按要求摆放。

1、引入

老师展示一组利用表格制作的网页,要求学生仔细观察,找出它们的一个共同特点(学生答:网页上方和左侧内容都是相同的,仅右下部分内容不一样),并提问如何快捷地制作这种网页?(学生答:使用复制粘贴快捷地制作)

尽管复制、粘贴能为我们节省时间,但有没有更好的方法呢?相同的区域我们能否只做一遍呢?今天我们要学习的内容——框架网页制作,就能给我们带来更多便捷。(让学生明确框架网页使用的场合)

2、 新授

(1)框架网页概念

由以上例子入手,再展示一个框架网页,教师引导学生理解框架网页的概念

(2)框架网页的新建与保存

教师要求学生先阅读教材中的操作步骤,再尝试进行探究操作。

任务1 创建"横幅和目录"结构的框架网页,新建top和left页面,并学会保存。

框架结构中的每个框都是一个独立的选项文件,即网页文件,因此当框架确定之后,需要为每个框分别指定其网页文件的来源,可以通过每个框中的"新建网页"按钮和"设置初始网页"按钮进行选择。在top和left页面中,单击"保存"按钮,随即开始保存。

此处为教学难点,可先由框架的概念入手,再针对保存页面中的蓝色部分,教师进行讲解,教会学生注意观察。

学生要理解框架网页的概念,通过阅读教材中的内容,自学新建框架网页的操作,初步了解"新建网页"和"设置初始网页"两个按钮的不同,并认真聆听教师的讲解,注意观察,按要求模仿操作。

设计意图:培养学生自主

学习能力,课堂教学难点在教师的讲解后模仿操作,有效突破难点。

(3)相关页面的制作与设置

框架网页中相关页面的制作,需要结合表格来布局,插入文字、图片和交互式按钮。

任务2 top和left页面的制作。

要求:

○1top页面内插入1行2列的表格,左边单元格插入logo图片,右边单元格插入banner图片。

○2 left页面内插入5行1列的表格,在每个单元格内依次插入交互式按钮(共4个),交互式按钮文字为展示介绍的相关内容概括,在第5个单元格内插入一个邮箱指示的图片。

○3调整表格边框的粗细。

○4为main区域设置初始页面。(该网页由教师提供现成的)

学生制作相关页面,同时也是对前面所学内容的复习和回顾。老师反馈学生的操作情况,开展比一比、评一评活动,对表现好的学生给予表扬。

(4)框架网页属性的设置

创建好框架网页后,可以根据实际需要改变框架的属性。

任务3 调整框架的大小、设置框架的边框、设置框架窗口中的滚动条等。

提高任务:框架的拆分。

学生自主探究学习,可向老师寻求帮助。完成设置后请同学示范操作,并说明自己设置的方法和原因。操作基础扎实的同学完成任务后可进行扩展学习。

3、 总结与评价

老师可以给出一些常见的框架结构应用界面,如web邮箱页面等,引导学生总结本课内容,梳理课堂知识,并让学生分组,推荐一些优秀作品进行全班展示。

设计意图:开拓学生的视野,使学生了解框架的应用,教会学生要善于总结,要学会学习的方法。

网页制作技巧教案 网页设计与制作教案 详案篇五

《h5快速制作网页》是苏教版《初中信息技术》8年级第3章《主题网站设计与制作》第2节《制作网页》中第1课时的内容。h5是指第5代html标记语言,其搭建的站点可方便地应用于pc、android、ios等多种平台,它为互联网内容的呈现提供了一种全新的框架和平台,包括免插件的音视频、图像、动画、本地存储以及更多酷炫的功能。通俗地说,h5是一种创建网页的方式,用h5创建的网页以文字、图片、动画、声音等相结合的富媒体出现,页面图文并茂、生动活泼、传达方便、易于推广。

本节课的学习对象是八年级的学生,处于这一年龄段的学生,思维活跃,具备一定的理解能力和较强的自学能力。通过前面的学习,学生已熟练使用wps、photoshop等软件,也掌握了规划设计主题网站的方法。本节课以ih5软件工具为平台,学习用h5快速制作网页。然而学生从未接触过ih5,对于陌生软件的学习,有些畏难情绪,觉得无从下手。但是在日常生活中,他们经常能接触到各种各样的手机h5网页,如企业宣传、个人简历、邀请函、纪念册等,这些h5网页给大家带来了全新的体验,技术本身带来的新奇感让学生心生向往。

知识与技能:能列举h5网页的特点;掌握在ih5软件中添加和编辑文字、图片、动画等元素的方法以及设置对象属性的方法,理解舞台、页面、对象之间的层级关系。

过程与方法:通过制作校园文化艺术节邀请函,经历制作h5网页的基本过程。

情感态度及价值观:感悟网页制作并非难事,软件使用有共通之处。

(一)创设情境,初认h5

以艺载德、以艺促智,一年一度的校园文化艺术节又开始了,同学们踊跃报名,比拼才艺。八年级将举行以“多彩校园,闪亮你我”为主题的汇报演出,充分展示八年级同学的青春活力和精神面貌。

思考:本次演出将要邀请家长参加,你会选择什么样的方式来做出邀请呢?(口头传达、短信、纸质邀请函等)

活动1:体验“校园文化艺术节邀请函h5”,初认h5。

(1)二人一组,一位同学在手机浏览器中打开;另一位同学在电脑浏览器中打开(网址:https://xxxxxx)。浏览后回答以下问题:

不同平台的浏览效果是否一致?为什么?

这支h5中具有哪些媒体元素?

用户能参与其中吗?

你会用什么方式推广这支h5?

小结:

(1)h5具有跨平台、支持多媒体、可交互、易推广等优势。以上特点使得h5可能成为我们发出邀请的首选。

(2)“校园文化艺术节邀请函h5”为何如此吸引人?观看视频,思考到底什么是h5?

小结:h5是指第5代html标记语言,也指用h5语言制作的一切数字产品。通俗地说,h5是一种创建网页的方式。用h5创建的网页图文并茂、生动活泼、传达方便、易于推广。

设计意图:与h5相关的概念性知识抽象、枯燥难懂,如果采用讲授法,学生并不容易理解。因此本节课创设了学生现实生活中的情境,以制作校园文化艺术节邀请函h5为主题,设计了4个问题,每个问题目标指向明确,容易引起学生的共鸣,激发学生的思考并得出结论。通过微视频用通俗易懂的语言帮助学生进一步认识h5,内化知识。

(二)根据需求,规划h5

凡事预则立,不预则废,要制作汇报演出邀请函,首先对每个页面的内容、素材等进行一个简单规划。

活动2:根据需求,选择素材,规划邀请函。

设计意图:学生已经学习过网站的规划,所以容易理解规划的重要性。教师通过搭建“规划表”这个支架,引导学生根据制作校园文化艺术节邀请函的需求,对所要制作的邀请函进行初步的规划,帮助学生理清楚每个页面的内容和所需添加的元素。

(三)知识迁移,制作h5

能够用于开发h5网页的工具很多,今天以ih5软件工具为平台,学习使用h5快速制作网页。

活动3:找“共性”,探“个性”,认识ih5软件。

(1)使用课前申请的账号,登录网址:,进入在线编辑平台。

(2)对比photoshop界面,认识ih5界面,找出相同之处和不同之处。

小结:相同之处:_______________________(菜单栏、工具面板、编辑区)

不同之处:_______________________(对象树面板)

(3)比较ps中的图层面板和ih5中的对象树面板,思考对象树面板的作用。

小结:对象树面板可以用来管理舞台中的对象,对象树中的层级关系为:舞台→页面→文本、图片等素材,每个页面中的对象上层覆盖下层。

活动4:利用ih5软件,制作邀请函h5。

(1)观看操作指导微视频,自主探究页面的制作,完成以下问题:

设置背景:选中页面1,在属性面板中找到_____________选项,添加背景图片。

添加文字:选中页面1,在工具面板中选择_____________选项。

添加图片:选中页面1,在工具面板中选择_____________选项。

小结:添加文字、图片的一般步骤:选择位置—添加对象。

(2)展示学生作品,师生共同分析存在的问题,寻求解决方式。

问题1:首页、内容页都播放同一素材。

原因分析:素材全部都添加在了舞台之中,其层级关系在内容页和首页的上一级。

问题2:内容页没有显示内容。

原因分析:素材全部都添加在了首页之中,而不是对应的内容页中。

设计意图:迁移是人类认知的一个普遍特征,因为新的学习总是建立在原有学习基础之上。学生原有的知识是photoshop软件使用,将photoshop和ih5进行对比,引导学生发现界面组成的“共性”与“个性“,让学生初步认识对象树面板,学会利用对象树面板来管理素材。在制作h5时采用局部“翻转课堂”的形式,通过高效、简短的微视频和几个思考题,引导学生思考探究;在学生遇到问题和困难时,师生共同分析问题,解决问题。给学生“瑞士奶酪式”知识建构时间,使学生从规律的获得到知识的应用有一个过渡和渐进的过程。

(四)自主探究,美化h5

活动5:美化完善邀请函h5。

(1)邀请函中的标题、内容文字等选用什么样的字体、字号合适?如何设置?

(2)如何改变图片大小,修改图片的亮度、对比度等?

(3)如何设置元素的动态效果,使得网页更生动?

小结:

(1)选中文字或图片——属性面板——修改设置。“邀请函”等标题文字字号一般选用大些,宜用饱满的字体,以达到醒目的作用;内容用于提供具体信息,文字字号可以小些。

(2)图片选用要符合主题,色彩和谐。字体颜色与背景要有一定的对比度。(3)选择要添加动态效果的对象——选择动效命令。注意:设置合理、适度的动态效果,可以给观赏者带来较好的视觉体验。

设计意图:对邀请函的美化可分成两个部分:一是对邀请函中的文字、图片进行美化,二是合理设置动态效果。单从技术角度来讲,这些操作是比较简单的,只要学会设置属性面板即可。但是邀请函的美化不是天马行空,随心所欲,还需要一定的艺术欣赏能力。因此首先让学生带着问题思考如何设置文字、图片?设置动效时需要注意的问题?得出一定的结论后,让学生带着构思去美化邀请函,以减少学生操作的盲目性。

(五)作品展示,共析h5

活动6:发布和评价作品。

(1)对于制作好的作品,将其发布到网上,这样其他人就可以通过电脑和手机访问你的作品。请保存当前的网页并发布到网上。

(2)同桌之间用发布的网址或二维码相互访问对方的作品。

(3)根据评价表对同桌的作品进行评价。

(4)根据同伴及老师意见进一步修改作品。

设计意图:学生在制作完成邀请函后,进行保存,发布就可以浏览到自己的成品,极大地提高了学生的学习兴趣。将学生的作品进行展示,师生共同赏析作品,根据评价表进行点评,给出建议,然后进一步完善作品。

(六)知识梳理,展望h5

展示思维导图,梳理本节课内容:

总结利用ih5制作网页的基本过程:

观看视频,结束本课:随着信息技术的高速发展,h5可谓是无处不在。h5可以是各种宣传网页、在线游戏,甚至户外大屏中的互动也是h5。在未来5-10年内,h5或将会成为移动互联网领域的主宰者。

设计意图:借助思维导图,将关键知识点结构化,清晰形象地呈现出各知识点的脉络关系,有助于学生从整体上把握知识,完成知识的建构。最后观看h5应用视频,了解h5的日常应用,对未来展望,进行情感升华。

全文阅读已结束,如果需要下载本文请点击

下载此文档
a.付费复制
付费获得该文章复制权限
特价:5.99元 10元
微信扫码支付
已付款请点这里
b.包月复制
付费后30天内不限量复制
特价:9.99元 10元
微信扫码支付
已付款请点这里 联系客服