网页制作教学设计（总5篇）
作为一名教师，我经常要进行教学设计规划，这是为实现教学目标而进行的规划和决策活动。 好的教学设计是什么样的？ 以下是小编收集整理的网页制作教学设计。 欢迎阅读、收藏。
网页制作教学设计1
教学目标：
2.学会用表格来规划网页
3、培养中学生的创新能力和动手能力
教学任务重、难度大：
用表格规划网页培养中学生创新能力
教学流程：
1.情景导出
朋友们，你善于观察吗？ 老师会先测试大家。 我们上去看看一组图片。 让我们来看看。 你在哪里见过？ 中学月台的阳台上。 大家的观察能力真强，是的，这就是我们中学美术的特色口盘画。 虽然，我们做了很多作品：有手工作品、英语课上的练习、书法等等都是作品。 在这节课中，我们将以书法作品为例，制作一个学习园网页，将我们的作品展示在自己的班级网站中，方便我们更好地努力学习。 现在让我们上去吧！
2.新知识的发现
首先我们打开上一堂课的班级网站，在这个网站中新建一个网页，并保存为“学习场”。
班主任讲解：如何制作学习领域的网页。
1、制作网页标题：输入文字并设置文字的格式。
2、插入表格：点击“表格”中的“插入表格”，设置表格属性。 如：行、列操作、对齐方法等。同时解释了哪些是行，哪些是列网页网站标题模板制作，以及单元格的概念。
3.修改表格：调整表格的列宽和行高。
4、在中学生学习插入表格、设计网页、展示作品的基础上。 并说明您可以在单元格中插入图片和文本。 那我们就一起来做吧！ 插入图片，并在图片前面或下面对图片进行注释。
5、进一步设置单元格背景，美化网页。
6.设置超链接：通过导航栏设置文本超链接。 选择文本，右键单击选择超链接，在列表中选择要链接的网页，然后单击“确定”按钮。
7. 经班主任讲解后，中学生自行制作网页。 班主任给予指导。 （有音乐）
3、工作评价
1.学生评价：重点从网页设计、美观、知识落实等方面进行评价。
2、教师评价：对中学生的作品进行评价，并对其他中学生的评价给予更完整的解释。
四。 概括
这节课我们主要利用表格来设计网页来美化我们的网页，并通过油画的展示来学习更多的知识。
网页制作教学设计2
一、课程基本信息
课程编号：
英文名称：网页设计与制作
中文名称：网页设计与制作
课程类别：必修课
适用专业：所有专业
学期：20xx—20xx 第 2 学期
总时间：24小时
总学分：
课程简介：
本课程突出网页设计与制作的现代特征，从互联网的基础知识出发，重点介绍HTML超文本标记语言，以及所见即所得的网页设计与制作工具Dreamweaver的基本操作流程。 从静态页面到动态页面，由浅入深地介绍了网页设计和制作的全过程。 采用案例分析和亲身实践的方法，突出和突破课程的重点和难点。 并指导每一位选择课程的朋友为自己建立一个博客网站，从而提高朋友们对网页设计和制作的兴趣和爱好。 参考书：
1. 网页设计与制作教程，熊前兴民合作，科学出版社；
2. 网站及网页设计，张贵明，复旦大学出版社；
3.《网页艺术设计原理与实践策略》，王晓峰、焦岩，复旦大学出版社；
4. 网站建设典型案例，张晓，复旦大学出版社；
2.课程教学目标：
网页和网站是互联网的重要组成部分。 企业、公司和机构通过网站推广其技术和产品。 个人发布自己的主页来展示自己的风格。 人们从不同类型的网站获取必要的信息。 为此，设计和制作网页已成为计算机应用技术的一个重要方面。 本课程的主要教学目的是使中学生掌握网页设计与制作的基本知识，并能使用网页工具设计与制作常用的网页。
三、理论教学内容及要求
第 1 章，网页基础知识（1 学时）
(一)互联网基础知识
（二）www简介
(3)网页制作技术和工具介绍
第二章，超文本编辑语言 HTML（8 学分）
(1) HTML文件的基本结构
(2) 文字和段落标记
(3) 列表标记
(4)图像标记
(5) 表单标记
(6) 超链接标记
(7) 表单标记
(8) 框架标记
第3章，JavaScript语言（4学分）
(1) JavaScript语言简介
(2) JavaScript编程基础
(3)基于对象的JavaScript语言
(4) JavaScript程序示例
第 4 章，层叠样式表 CSS（1 学时）
（一）CSS概述
(2)CSS属性
第 5 章，可视化网页设计工具
(1)网页基本操作
(2) 图片、表格和超链接
(3) 形式和框架
(4)添加网页元素
（五）发布网站
第 6 章，动态网页设计语言 ASP（4 学时）
(1)ASP简介
(2)VBScript脚本基础知识
(3) ASP.External对象
（四）实用文件
第 7 章，使用 AD0 访问数据库（1 学时）
(1)连接数据库
(2)数据库检索
(3)数据库操作
摘要准备（1学分）
四、实验教学内容及要求
5. 家庭作业
6. 考试表
在最终的考核中，每位朋友都为自己设计并制作了一个博客网站。
7. 绩效评估
1.自制网站（80%）
2.每日出勤、作业（20%）及每日成绩分配：
正常出勤 5 次，每次 2 分，占合计 10% 5 次操作，每次 2 分，占合计 10%
八、实施纲要应注意的问题
根据中学生对课程内容的掌握和理解水平，适当调整进度。
网页制作教学设计3
教学目标：
1、知识与技能：
(1)理解框架的概念和使用。
（2）掌握框架网页的创建、制作、编辑和保存，了解框架的拆分方法。
(3)初步掌握框架结构与表格布局的结合制作网页。
2、流程及技巧：
（1）通过表格网页的分析，体验新知识（框架结构网页）的优势，从而促使他们学习新知识。
(2)了解框架的概念和组成，学会分析网站的结构。
3、情感心态和价值观：
（1）通过“人与植物”为主题的网页制作活动，更多地了解人与植物的和谐互动，通过故事、轶事提高中学生对植物的兴趣和认知。
(2)将表格与框架结构网页结合使用，体验创作的乐趣。
教学任务重、难度大：
1. 要点：框架的概念和使用，框架网页的创建、编辑和保存方法。
2.难点：框架的分离。
教学方法：
对比教学法、探究学习法、模仿学习法。
教案：
相关材料进行整理、分类，并按要求放置。
教学流程：
一、简介
老师展示了一组用表格制作的网页，让中学生仔细观察，找出它们的共同特征（中学生回答：网页顶部和两侧的内容是一样，只是右下部分不同），并提出问题如何快速制作这些网页？ （中学生回答：用复制粘贴快速制作）
虽然复制粘贴可以节省我们的时间，但是还有更好的方法吗？ 我们可以在同一区域只做一次吗？ 明天我们要学习的内容——带框网页的制作，可以给我们带来更多的便利。 （让中学生清楚了解带框网页的用途）
2、新增奖项
(1) 框架网页概念
从上面的例子开始，展示一个框架网页，班主任引导学生理解框架网页的概念
(2) 创建并保存框架网页
班主任让中学生先读读课本上的操作步骤，然后尝试探索操作。
任务1.创建一个“横幅和目录”结构的框架网页，创建新的顶部和左侧页面，并学会保存。
框架结构中的每个盒子都是一个独立的选项文件，即一个网页文件，所以框架确定后，需要为每个盒子指定其网页文件的来源，可以使用“新建每个框中的“网页”按钮和“设置初始页面”按钮可供选择。 在顶部和左侧页面中，单击“保存”按钮，然后开始保存。
这就是教学的难点。 可以先从框架的概念入手，然后向班主任讲解保存页面中的红色部分，教中学生注意观察。
中学生应了解框架网页的概念，通过阅读教材内容，学会自行创建新框架网页的操作，初步了解“新建网页”和“新建网页”两个按钮的区别。设置初始网页”。 根据需要模拟操作。
设计意图：培养中学生的自主能力
学习能力、课堂教学难点经过班主任讲解后模仿，有效突破难点。
(3)相关页面的制作及设置
框架网页中相关页面的制作需要结合表格进行布局、插入文字、图片和交互按钮。
任务2、顶页和左页的制作。
要求：
1. 在首页插入一个 1 行 2 列的表格，在右侧单元格中插入徽标图像，在右侧单元格中插入横幅图像。
2、在左侧页面插入一个5行1列的表格，并在每个单元格中依次插入交互按钮（共4个）。 交互按钮的文字是所显示和介绍的相关内容的摘要，并在第五个单元格中插入了一个邮箱指示器的图片。
3. 调整表格边框的粗细。
4. 设置主区域的初始页面。 （网页由班主任现成提供）
中学生制作相关页面，也是对上面所学内容的准备和复习。 教师对中学生的操作进行反馈，举行比较评价活动，对表现好的中学生给予表扬。
(4) 框架页面属性的设置
框架网页创建完成后，可以根据实际需要更改框架的属性。
任务3.调整框架的大小、设置框架的边框、设置框架窗口中的滚动条等。
提升任务：框架的分拆。
中学生自主探索和学习，可以寻求老师的帮助。 完成设置后，请朋友演示操作并解释如何设置以及为什么设置。 操作基础扎实的朋友可以在完成任务后进行延伸学习。
三、总结与评价
教师可以给出一些常用的框架应用接口，如Web邮箱页面等，引导中学生总结本节课的内容，梳理课堂知识，并让中学生分组，推荐一些优秀的作品给中学生。全班展示。
设计意图：开阔中学生的视野，让中学生了解框架的应用，教会中学生善于总结，学会如何学习。
网页制作教学设计4
本学期，我负责计算机科学与技术系软件工程专业的《网页制作》课程。 中学生74人，通过率100%。 其中90分以上的没有，80分以上的也只有少数，大部分在70到80之间，少部分在60到70之间，成绩不太理想。 一般来说，大多数中学生在日常计算机练习中都比较主动、踏实，能够自觉遵循老师的要求，但也有少数中学生自觉不自觉，需要老师督促。和学校委员会。 现将一学期的教学情况总结如下：
1、教师既要给予中学生合理的指导，又要加强自身修养，提高知识水平。
在整个教学过程中，我在教学过程中还缺乏较高的艺术修养和艺术创造力，所以我要继续学习； 另外，我还需要建立技术能力，也需要与有经验的老师多交流。 。 我相信如果只从一定的高度来看整个项目的实现会更容易理解，更有说服力，所以不能说都是中学生的原因。 归根结底就是提高你的知识水平和业务素质！
二是了解中学生，加强考核。
对于所有中学生来说，智力水平是相同的，但学习兴趣水平是不同的。 大多数中学生只肯听，选择性接受，没有知识创新，或者不去自学巩固知识，只听。 并做。 有些朋友下课后干脆把书放在一边，不予理睬。 考虑到中学生的学习心态，我个人觉得有必要强化评价体系，严把学习关，让进严出，严把作风！
3、教学内容体验
1、网页要简洁、美观。 网站的设计过程以简洁大方为主，合理的色彩搭配和主题内容解读，给访问者以赏心悦目的感觉； 并避免过多的动画和过度使用框架，以及导航不清晰、颜色混乱、没有主题的组成。
2、网站风格要统一。 所有图像和文字，包括背景颜色、区分线、字体、标题、脚注等，应风格统一，贯穿整个网站。 这样，读者看起来舒服、流畅，也会给你的网站留下“非常专业”的印象。 在知识的应用中，应使用大量合理的模板和CSS样式，避免网页中随意使用重复的字体样式和重新定义颜色，会给人一种杂乱的感觉。
3、网站布局合理。 为了防止一些“拿来主义”，一些中学生为了方便设计，使用网上流行的模板制作网页。 他们制作的网页几乎都是一样的，没有什么特色。 巩固，让观众感到无聊。 另外网页网站标题模板制作，清晰的导航可以促进浏览者阅读网页，思路一定要清晰，防止交叉链接。
4、网站容量宜小。 即使网页变得更漂亮，也能吸引浏览者，而图片和动画的容量会影响浏览速度，所以一定要注意网络容量的问题。 图像应尽可能压缩，使用单一或简单的颜色； 动画应该尽可能简单实用，用最少的帧制作最美观实用的动画，为网页增色。
但总体来说，通过整个学期网页制作的学习，中学生已经了解了网页制作所需的基本技术，也掌握了网页制作的基本技能。 但由于时间有限，知识点较多，一些重点难点问题仍需经常练习，如：静态网页的布局、CSS的定义； 动态网页中对象的综合运用等
其实，遗憾也是有的。 很多中学生反映，他们的学习兴趣更多的是动画的制作，也就是Flash的学习，而我们只给出了宽泛的解释，并不能完全满足中学生的好奇心！ 事实上，对于网页的制作，需要加强中学生配色观念和审美观的培养，以及动态网页实现技术的掌握。 使用一定的高度！
网页制作教学设计5
1. 教材依据
山西师范大学出版社《小学八年级信息技术》第2卷，第2单元“网站设计与制作”，活动1“创建个人网站”，活动2FrontPage2000。
2、设计思维
【教学指导思想】
信息技术课程是一门实践性强、创造性大、时代发展特征显着的课程。 现代教育理论主张以中学生为中心，指出中学生是“学习”的主动者，中学生是信息加工的主体，班主任的作用表现为组织、指导、帮助和促进中学生的学习，充分发挥中学生的主动性、积极性和创造力，使中学生最有效地学习，达到最好的教学效果。 因此，本项目遵循“教师为主导，中学生为主体”的设计理念，让中学生在班主任的指导下对所学内容进行探索、分析、研究，培养中学生的中学生素质。学校学生在实际操作中的科学心态和价值观。 同时，培养中学生的学习兴趣。
【教学对象分析】
中学生知识能力
教学对象为中学生八年级。 这一阶段的中学生正处于逐步产生具体逻辑思维的过程，但形象思维仍然是获取知识的重要思维方式。 本课涉及的HTML语言有其枯燥、困难的一面，中学生理解起来有一定的困难。 因此，班主任希望在教学设计中通过中学生自己的眼睛、双手和思维来发现新知识。 从而减少他们对新知识的恐惧，降低理解的难度。
中学生心理特征分析
中学生活跃、好奇、好学、心胸开阔、对信息技术感兴趣。 大多数中学生都能够熟练使用浏览器浏览网页。 他们对上网和网页非常感兴趣。 因此，在这个项目中，班主任借助中学生的这些心理，设计了一个趣味推导，从趣味中引入中学生感兴趣的网页，让中学生保持较高的学习状态。课堂上的热情。
【教学内容分析】
本课为新课，是第二单元“网站设计与制作”的第一课。 班主任把本节课的重点放在“启蒙”上，目的是激发中学生的学习兴趣和求知欲望，为顺利举办后的教学活动打下坚实的基础和铺垫。 。 本课的教学内容有两个方面，一是初识HTML语言，二是初识FrontPage2000的窗口构成。 班主任设计的重点不是让中学生完全理解HTML语言的结构，而是利用HTML语言有效引出制作网页的软件FrontPage2000，让中学生能够自然形成对使用 FrontPage2000 制作网页感兴趣。
教学内容的整合：教材中将HTML语言和FrontPage2000窗口的构成分为两个活动。 考虑到信息技术课每周只有一节课，如果第一节课只讲HTML语言，没有必要涉及制作网页的软件FrontPage2000会让中学生感到无聊。 同时，这些无聊的感觉很可能会持续一周，直到下节课。 这样一来，中学生对制作网页的兴趣远不如将两种教学内容结合起来的兴趣。也不利于今后教学活动的举办。 因此，班主任把本课的重点放在让中学生了解HTML语言与FrontPage2000之间的联系上。
三、教学目标
【知识与技能】
(1)了解网页、网站的相关知识；
(2)了解HTML标记语言的功能和结构；
(3)认识构成网页的基本元素；
（4）了解常用的网页制作软件；
（5）了解网站规划和定位的重要性，掌握网站的规划流程；
（6）了解网站设计软件FrontPage2000的窗口构成；
（7）学会设计有意义的网站主题，收集网站的相关信息，绘制网站的结构和布局。
【流程与方法】
（1）新课内容源于趣味，充分发挥中学生为主体、教师为主导的作用；
（2）引导中学生及时形成新问题，然后通过班主任的讲解示范、比较和中学生自主学习来解决问题。
【情感心态与价值观】
（1）强烈的求知欲激发中学生的学习兴趣和积极性；
（2）中学生了解信息技术前沿知识后，会对信息技术课程保持新鲜感和兴趣；
(3)中学生在不断认识自身主体地位的同时获得新知识,并从中感受到学习的乐趣。
四、教学重点和难点
重点：
1、认识构成网页内容的基本元素，了解网页布局的特点；
2、了解HTML标记语言的功能和结构；
3、学习启动FrontPage2000，了解网站设计软件FrontPage2000的窗口构成，了解各组件的功能；
4、确立网站主题，规划网站布局，学习创建新网站的基本技巧。
困难：
1、了解HTML标记语言的结构，并使用HTML语言编写简单的网页；
2、如何找到网站；
3、如何收集网站相关信息；
4. 以导航视图模式构建网站结构。
五、教学计划
①收集常用网页制作软件的相关资料；
②打开多媒体笔记本宿舍内班主任电脑和学生电脑，确保笔记本教室内广播系统正常工作；
③ 共享类文件夹；
④班级网站和网页示例。
6、教学模式的选择
“以学生为中心，班主任主导”的教学模式。
七、教学过程
一、情况介绍：
向中学生展示一批优秀的网站、网页，激发中学生创建自己的个人网站的兴趣和欲望。 当中学生观看并欣赏网站时，他们会被鼓励形成制作网页的冲动。 师生在欣赏网络作品时，回顾一下已经学过、淡化的基础知识。 问题：网页的元素和布局是什么？ 班主任对案例进行分析，与中学生一起回顾了插入文字、插入设置图片、插入设置动画以及表格的相关操作等知识。 让中学生回顾案例中的基础知识并得到启发。 并介绍本节的主题，并自己制作网页。
2.展示模板：
班主任向中学生展示本课要完成的网页。 要求中学生能够模仿并制作网页模板，然后才能自己创建新的网页模板。
三、本部分任务：
1）网页和网站有什么区别？
2）网页由哪些元素组成？ 针对给定的网页分析网页的构成元素——标题图像、标题栏、水平线、滚动字幕、图像、文本、背景等。
3）使用Photoshop对素材进行处理，给出网页中图片的标题，设计一个突出自己主题的网站标题。 扩展：使用photoshop软件、绘图软件、或者flash软件，设计出自己需要的网页图片。
4）要求中学生模仿制作网页模板，然后根据自己设定的主题制作网页模板。 中学生独立完成模板模仿，自主探索并设计出结合自己设计主题的网页模板。 群内成员可以互相交流，班主任随时检查解决中学生在学习过程中遇到的问题，并注重收集常见问题，多方位给中学生提出建议。及时的方式。 特别关注成绩不佳的人。
5）小组选择最佳模板，探索并构建该模板，然后使用该模板设计网页。
4、评价展示：
作品完成后，将提交班主任进行自评、小组互评，选出小组最佳作品提交展示。 师生共同欣赏、评价作品，挖掘作品优点，强调改进。 培养你的审美能力，挖掘你的创新能力。
5. 课堂总结
师生共同复习本课的基础知识和基本技能，强化网络道德意识、关注版权意识。
八、教学反思
在信息技术教学中，必须以新的教学理念、教学理论为指导，按照新课程标准，探索适合信息技术课堂教学的教与学新策略、新模式，挖掘信息技术课堂教学的潜力。中学生素质提升。
以前我一直以为信息技术课就是教中学生如何操作。 课堂上始终采用“老师讲，中学生听”的传统模式。 “学”在“教”之后。 现在我正在努力做出一些改进。 在本项目中，我围绕“以学生为本，教师为主导”的设计理念设计各个教学环节，积极凸显中学生的主体作用，努力提高中学生的学习效能。
实践证明我的意见是好的，实践中难免会有疏漏和细节不够的地方。 比如：由于我的观察不全面，忽视了一些中学生在学习中的心理障碍，有的中学生畏难情绪影响了他的整体学习效果； 课堂学习气氛热烈但不够和谐。 这都说明了一个问题：只注重中学生整体主体的体现，而忽视了个体。 经过思考，我认为在本节课的教学设计中，可以减少个别展示的机会，特别是对于这些学习困难的中学生。 我应该多关注他们的动态，多帮助他们。
本课的教学目标是掌握使用FrontPage制作网页的基本技能； 重点是掌握网页中插入文字和图片的方式； 困难在于插入表格来规划网页的结构。
备课时，我发现课本使用了标题、图片和文章的简单结构示例。 如果完全按照课本来听课，势必很难突破困难。 因此，我设计了一个环节，将中学生前期制作的环保报刊借助FrontPage软件制作成网页，帮助中学生突破困难。 And take five copies of typical structures in environmental protection newspapers and periodicals for middle school students. Make a demonstration film that guides middle school students to analyze the structure and plan the framework for use.
The class is carried out in the mode of self-exploration. In the previous years of study, the friends have mastered the methods of inserting tables and pictures in Word, and they have successfully completed the goal of presenting the teaching materials in FrontPage. Basically mastered the method of making a single webpage.
The next step is to break through the difficult training. Facing the tasks presented in the demonstration film and the teaching materials related prompts. At this point, the problem is focused on how to insert a layout table to realize the planned structure. However, there is no reminder in the textbooks for middle school students to explore the advantages and disadvantages of the functions of FrontPage "table" and Word "table". A few friends began to try to insert frame tables suitable for their own web page structure, while most friends did not consider structural issues at all, and started to move directly, using FrontPage as Word. It wasn't until it was difficult to place pictures and text in the desired position that I realized in the textbook that "FrontPage generally uses tables to arrange the layout positions of various contents (articles, graphics, etc.) in web pages." Is the meaning of this conversation clear? Anxious to find a solution. I asked the middle school students who realized that they should first insert the appropriate structure frame table to talk about their views. And timely show the demonstration film that is consistent with the middle school students' thinking, and present them with tips to explore the "table" function of FrontPage. At the same time, with the help of the function of Jiyu Classroom, we can show all the colleagues the research results of their peers, so that the different mental forms and wisdom of middle school students can collide, inspire each other, and successfully break through the difficulties of teaching.
[Webpage making teaching design] related articles:
Web page making teaching design07-28
Make webpage teaching design 04-20
Web page production teaching design 7 articles 11-27
Teaching design of webpage production (7 articles) 11-28
Web design and production experience 12-12
Web design and report making 01-04
Web page making teaching design general 7 articles 12-06
Teaching Design of Web Page Production (General 7 articles) 12-06
Web page making teaching design compilation 7 articles 11-30
