实用网页制作教学设计案例（通用4篇）

参考资料，少熬夜！实用网页制作教学设计案例（通用4篇）【导读指引】三一刀客最漂亮的网友为您整理分享的“实用网页制作教学设计案例（通用4篇）”文档资料，供您学习参考，希望此文档对您有所帮助，喜欢就分享给朋友们吧！网页制作教学设计案例【第一篇】1、让学生掌握在网页中插入表格的方法以及表格的修改2、学会利用表格来规划网页3、培养学生创新的能力以及动手操作的能力利用表格来规划网页，从中培养学生的创新能力一、情境导入同学们你们善于观察吗？老师先考考你们，我们一起来看一组图片，你们看看在那里看过呢？学校缓台的窗台上。你们的观察能力真的很强啊，对，这些都是我们学校美术的特色作口，盘画。其实，我们做过很多作品：有手工作品，语文课中的作文、书法等都是作品，这节课我们以绘画作口品为例，做一个学习园地网页，把我们的作品展示到自己的班级网站中，以便我们更好的努力学习。现在我们就一起来制作吧！二、新知探究首先我们来打开上节课的班级网站，在这个网站中新建一个网页，并保存成“学习园地”。教师讲解：如何制作学习园地网页。1、制作网页的标题：输入文字，并设置文字的格式。2、插入表格：单击“表格”中的“插入表格”并对表格属性进行设置。如：行、列的操作，对齐方式等。同时讲解什么是行，什么是列，以及单元格的概念。3、修改表格：调整表格行高和列宽。4、在学生学会插入表格的基础上，来设计网页，展示作品。并讲解在单元格中可以插入图片、文字。那我们就一起快快去做吧！插入图片，并在图片的上面或下面进行图片的注释。5、进一步设置单元格的背景，来美化网页。6、设置超链接：通过导航栏目，设置文字超链接。选中文字，点击右键选择超链接在列表中选择你要链接的网页，单击“确定”按钮。7、学生在教师的讲解后，学生自己动手操作制作网页。教师进行指导。（伴随音乐）三、作品评价1、生评：从网页设计上，美观程度上，知识落实上重点评价。2、师评：对学生作品进行评价，并对其它学生的评价加以更完整的解释。四、总结我们这节课主要是利用了表格来设计网页，以使来美化我们的网页，通过绘画作品的展示，学习更多的知识。参考资料，少熬夜！网页制作教学设计案例【第二篇】《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）二人一组，一位同学在手机浏览器中打开；另一位同学在电脑浏览器中打开（网址：）。浏览后回答以下问题：不同平台的浏览效果是否一致？为什么？这支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的日常应用，对未来展望，进行情感升华。网页制作教学设计案例【第三篇】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）、学生理解框架网页的概念，通过阅读教材中的内容，自学新建框架网页的操作，初步了解“新建网页”和“设置初始网页”