作为一名老师，时常要开展教学设计的准备工作，教学设计是实现教学目标的计划性和决策性活动。一份好的教学设计是什么样子的呢？的小编精心为您带来了网页制作教学设计【4篇】，希望大家可以喜欢并分享出去。
一、课程基本信息
课程编号：
中文名称：网页设计与制作
英文名称：Web Design and Production课程类别：选修课适用专业：所有专业
开课学期：20xx—20xx第2学期总学时：24学时总学分：1课程简介：
本课程突出网页设计与制作的现代特点，从Internet的基础知识入手，重点介绍HTML超文本标记语言，以及所见即所得的网页设计制作工具Dreamweaver的基本操作流程。从静态页面到动态页面由浅入深的介绍网页设计与制作全过程。采用案例分析和亲自实践的方式突出、突破课程的重点和难点。并指导每一名选课的同学为自己建一个博客网站，以此提高同学对网页设计与制作的兴趣和爱好。参考书：
1、网页设计与制作教程，熊前兴闵联营，科学出版社；
2、网站与网页设计，张贵明，清华大学出版社；
3、网页美术设计原理及实战策略，王晓峰焦燕，清华大学出版社；
4、网站建设典型案例，张枭，清华大学出版社；
二、课程教学目标：
网页和网站是Internet的重要组成部分，企业、公司和机构通过网站来宣传推介自己的技术和产品，个人发布主页展示自己的风采，人们从不同类型的网站来获取需要的信息。因此，设计与制作网页已经成为计算机应用技术的一个重要方面。本课程的主要教学目的是使学生掌握网页设计与制作的基础知识，能运用网页工具设计和制作常用网页。
三、理论教学内容与要求
第一章、网页的基础知识（1学时）
（1）Internet基础知识
（2）www简介
（3）网页制作的技术和工具介绍
第二章、超文本编辑语言HTML（8学时）
（1）HTML文件的基本结构
（2）文字和段落标记
（3）列表标记
（4）图片标记
（5）表格标记
（6）超链接标记
（7）表单标记
（8）框架标记
第三章、JavaScript语言（4学时）
（1）JavaScript语言简介
（2）JavaScript编程基础
（3）基于对象的JavaScript语言
（4）JavaScript程序实例
第四章、层叠样式表CSS（1学时）
（1）CSS概述
（2）CSS属性
第五章、可视化网页设计工具
（1）网页的基本操作
（2）图像、表格与超链接
（3）表单与框架
（4）添加网页元素
（5）发布站点
第六章、动态网页设计语言ASP（4学时）
（1）ASP简介
（2）VBScript脚本基础
（3）ASP的内置对象
（4）实用文件
第七章、利用AD0访问数据库（1学时）
（1）数据库的连接
（2）数据库的检索
（3）数据库的操作
总结复习（1学时）
四、实验教学内容与要求
五、作业
六、考核方式
期末考核每个同学为自己设计制作一个博客网站。
七、成绩评定
1、自制网站（80%）
2、平时考勤、作业（20%）平时成绩分配：
平时考勤5次，每次2分，共占10%作业5次，每次2分，共占10%
八、执行大纲时应注意的问题
根据学生对课程内容的掌握和理解程度会对进度做适当的调整。
教学目标：
1、知识与技能
（1）了解超级链接的含义及链接源和链接目标的含义，掌握同一站点内以及不同站点间网页超级链接的创建方法。
（2）掌握网页内书签的作用及创建书签链接方法，掌握交互式按钮、框架网页内超级链接的设置方法。
（3）理解热区链接的含义及创建方法。
2、过程与方法
（1）通过创建网页超级链接的操作，使学生了解网页中创建超级链接的基本方法，破除对网页链接的神秘感。
（2）通过对不同对象设置超级链接的操作，使学生总结出操作的规律，培养学生自主学习与操作的能力。
（3）通过网页不同的超级链接方法，拓展学生思维，创建多种形式的网页链接。
3、情感态度与价值观
（1）通过链接我国主要自然保护区网页，激发学生热爱祖国、热爱自然、热爱生命的激情。
（2）完成超级链接，使学生感受成功的喜悦和快乐。
教学重、难点：
1、教学重点：
（1）超级链接的含义及链接源和链接目标的含义。
（2）超链接的制作方法——给文字、图片制作超链接，制作书签链接，给交互式按钮制作超链接，框架页面内的超链接，图片区域制作超链接等。
2、教学难点
（1）书签链接中名称及对应链接位置的设定。
（2）在框架页面中制作超链接时，目标对象所选择的显示窗口形式。
教学方法与教学手段：
任务驱动法、讨论探究法、讲解与演示法、类比知识迁移法。
教学准备：
"动物——人类的朋友"站点，包括未链接的网页，如欢迎页、表格页、框架页，表单 www. 页等。
教学过程：
1、引入
展示两个主页，一个已经创建了链接，一个没有创建链接，让学生进行比较并找出区别，引出本课课题——超级链接。
提出：我们在先前的学习中，哪个软件中的相关操作与它类似？什么是超级链接？找一个例子，分析链接源和链接目标分别是什么？
学生展开交流，通过对比找出不同点，并积极思考，回答老师的问题。
设计意图：通过对比操作、交流，再辅以知识迁移，明确本节课教学内容。
2、新授
（1）站内超级链接
引导学生回顾PowerPoint中超链接的制作方法（教师提示：右击链接源，利用快捷菜单制作超链接），辅以教材中的内容，让学生自行探究并完成以下操作：
任务1同一站点内不同页面之间的链接
○1制作首页（欢迎页）到表格页的超链接。
○2给表格页内交互式按钮设置超级链接，链接到相关页面。
○3给框架页内交互式按钮设置超级链接，链接到相关页面。
教师巡视，及时指导，安排学生示范操作并讲解如何制作超链接。
交互式按钮的超链接制作要求在框架网页中演示操作。老师可以提问学生：演示者操作的对吗？有没有问题？
引导学生发现问题：超链接制作完成后需要检验（保存后预览）。
教师讲解，突破难点，再交由学生操作。
以上是同一站点内不同网页之间的链接，有时一个页面中内容过多，需要不断拖动滚动条实现阅读，能否实现快速跳转呢？
任务2同一站点内同一页面内的跳转（链接）：在"动物趣闻"页面内制作书签链接。
教师讲解：由生活中的书签引入，介绍"书签链接"的概念，然后再演示如何操作。
提示：书签链接的双向性问题（返回）。
学生认真听讲后模仿制作，教师巡视进行指导并反馈学生的完成情况。
（2）站间超级链接
仅凭我们课堂上制作的这些页面还不足以详细介绍我们的主题，此时我们还可以借助超链接，链接到因特网上的其他网站，以丰富我们的内容。
任务3借助热区链接，为"友情链接"页面制作超链接，链接我国一些自然保护区网站。
有了以上基础，可安排学生自学教材中有关热区链接的相关内容，学生探究操作后教师再安排学生进行演示，辅助以提问的形式检验学生的自学情况。
3、总结与评价
开展同学间的互助，检验其链接完成情况，推荐优秀同学做展示。引导学生分类总结本节课的知识点。
教学目标：
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的日常应用，对未来展望，进行情感升华。