当前位置：好文网>实用文>教案>《网页的制作》教案优秀

《网页的制作》教案优秀

相关推荐

《网页的制作》教案优秀

　　作为一名无私奉献的老师，通常需要准备好一份教案，教案是实施教学的主要依据，有着至关重要的作用。教案要怎么写呢？下面是小编精心整理的《网页的制作》教案优秀，仅供参考，欢迎大家阅读。

《网页的制作》教案优秀

《网页的制作》教案优秀1

　　学习目标:

　　制作框架网页、在网页中插入字幕和超链接知识

　　1.制作框架网页

　　框架网页是一种特殊的HTML网页，它将窗口划分成若干小窗口区域（框架）。每个框架独立显示一个不同的网页（有自己的网页名字），整个框架网页有一个总的名字。

　　框架与表格在组织网页结构时相似。表格是对页面区域进行划分，框架是对整个浏览窗口进行划分。

　　·创建框架网页：单击菜单“文件”→“新建”→“网页”，选择“框架网页”标签→选择“嵌套式层次结构”

　　·选中的框架边框为蓝色，在拆分或删除框架时应注意是否选中。

　　·隐藏框架间的横线：

　　右击框架网页→单击“框架属性”→在对话框中单击“框架网页”按钮，在“网页属性”对话框中选“框架”标签→设置“显示边框”为未选中状态。

　　·按住Ctrl键，拖动鼠标可以快速拆分框架。

　　·删除框架：单击菜单“框架”→“删除框架”。

　　·保存框架网页时注意要保存所涉及到的所有网页。

　　·更改框架链接的网页：

　　右击相应的超链接→在弹出的快捷菜单上选择“超链接属性”命令，打开“编辑超链接”对话框

　　→可直接选择列出的文件，或在“URL”框中输入网页的地址

　　→单击“目标框架”右边的“更改目标框架”按钮，在“当前框架网页”中选择目标框架。

　　2.网页中插入字幕

　　·插入字幕：光标定位插入点→单击“插入”→“组件”→“字幕”打开“字幕属性”对话框；

　　→在文本框中输入文字，选择“方向”、“速度”、“表现方式”等；

　　→选中字幕，拖动鼠标，调节字幕运动范围。

　　·修改字幕：双击字幕，可以打开“字幕属性”对话框，对字幕属性进行修改。

　　3.超链接相关网页

　　超链接是从一个网页指向另一个目标的连接。一般在网页中的某文字或图片上设置超链接。

　　·创建超链接：单击文字或图片→“常用”工具栏的“超链接”按钮，打开“创建超链接”对话框。

　　·取消超链接：选中具有超链接的文本或图片，单击“超链接”按钮，在打开的对话框中将URL栏中的内容删除。

　　·跟踪超链接：

　　在超链接上右击，在打开的'快捷菜单上选择“跟踪超链接”命令；

　　或：在普通视图中，按住Ctrl键，将光标移到超链接上，单击，会跟踪连接到超链接指向的目的位置。

　　·设置超链接文本的颜色：网页中超链接文本的颜色共有3种：未访问过的，当前正在访问的，已访问过的。FrontPage默认这3种颜色分别为蓝色，红色、深蓝色。单击“格式”→“背景”→在“网页属性”对话框→选“背景”标签，选定“超链接”、“已访问过的超链接”、“当前超链接”的颜色。

　　作业：

　　新建框架网页，建立超链接，在网页中插入字幕。7.2制作网页（框架）这一教案

《网页的制作》教案优秀2

　　一、教材分析

　　首页之外的其他网页在结构上很相似，为了给这些网站增加一些亮点，故在网页中插入了交互式按钮，交互式按钮不仅具有超链接功能，在使用过程中还会发生变化，更能引起学生的学习兴趣。

　　二、教学目标

　　1、知识性目标

　　（1）了解交互式按钮的功能；

　　（2）了解计算机主机包括的部件；

　　（3）了解网页动态效果。

　　2、技能性目标

　　（1）会设置网页的目录；

　　（2）学会插入、修改交互式按钮；

　　（3）学会复制表格。

　　3、情感性目标

　　（1）加深对计算机硬件的认识；

　　（2）培养学生分工协作的精神。

　　三、教学重、难点

　　1、教学重点

　　（1）交互式按钮的功能；

　　（2）插入、修改交互式按钮。

　　2、教学重点

　　（1）交互式按钮；

　　（2）复制表格。

　　四、教学准备

　　制作一个具有几个漂亮交互式按钮的网页。

　　五、教学过程

　　1、导入

　　教师：现在我们的`首页已经做好了，可是其他的网页还没做，但是一节课内无法做太多的，今天呀我们就来学习制作“主机”网页吧！其余的以后在做.

　　2、学习新课。

　　（1）指导学生用表格布局；

　　教师:用表格对网页进行布局方法，前一堂课我们学习了，现在就请同学们，对照课本用表格给 “主机”网页进行设置。

　　学生看书练习。

　　（2）指导学生学习插入交互式按钮；

　　教师：在网页内经常会插入具有超链接功能的按钮，单击这些按钮，便可打开其他网页，请同学们看下面具有交互式按钮的网页。

　　屏幕展示。

　　教师：下面我们就来学习如何制作交互式按钮。

　　教师示范讲解，学生观察。

　　学生练习、老师巡视指导。

　　3、巩固练习。

　　请同学们试着完成书中本课的“试一试”中的练习，在遇到困难时可小组同学相互帮助，也可以举手问老师。

　　4、总结评价。

　　教师总结后，请同学根据自己掌握的知识情况和收获，在本节课的“评一评”中打上自己的成绩。

《网页的制作》教案优秀3

　　一、学习内容分析

　　《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的日常应用，对未来展望，进行情感升华。