网页设计与制作个人网站作业-网页制作教学设计

网页制作教学设计（通用5篇）

作为一名教师，您经常必须为教学设计做好准备。 教学设计是为实现教学目标而进行的规划和决策活动。 好的教学设计是什么样的？ 以下是小编收集的网页制作教学设计。 欢迎阅读、收藏。

网页制作教学设计1

教学目标：

1.让学生掌握在网页中插入表格和修改表格的方法

2.学会用表格来规划网页

3.培养学生的创新能力和动手操作能力

教学中的重点和难点：

用表格规划网页，培养学生创新能力

教学流程：

一、情况介绍

同学们，你们观察力好吗？ 老师会先考验你。 我们来看一组图片。 你在哪里见过他们？ 学校露台的窗台。 你的观察力真强。 是的，这就是我们学校艺术特色的口盘画。 其实我们做了很多作品：有手工作品、作文、书法等等，语文课上都是作品。 本班我们以绘画作品为例，制作了一个学习园网页，将自己的作品展示在自己的班级网站上，以便大家更加努力地学习。 现在就让我们一起来做吧！

2.探索新知识

首先我们打开上一堂课的班级网站，在这个网站中新建一个网页，另存为“学习园地”。

教师讲解：如何创建学习园网页。

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

2、插入表格：点击“表格”中的“插入表格”，设置表格属性。 如：行列操作、对齐等。还要解释一下什么是行、什么是列、以及单元格的概念。

3.修改表格：调整表格的行高和列宽。

4、根据学生学习插入表格的情况设计网页并展示作品。 并说明可以将图片和文字插入到单元格中。 那我们就快点一起做起来吧！ 插入图片并在图片上方或下方进行注释。

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

6.设置超链接：通过导航栏设置文本超链接。 选择文本，右键选择超链接，在列表中选择要链接的网页，然后单击“确定”按钮。

7. 经过老师的讲解后，学生可以自己制作网页。 老师提供指导。 （有音乐伴奏）

3、工作评价

1. 学生评价：重点关注网页设计、美观、知识运用。

2. 教师评价：评价学生的作品并对其他学生的评价提供更完整的解释。

4. 总结

这节课我们主要用表格来设计网页，来美化我们的网页，并通过画作的展示来学习更多的知识。

网页制作教学设计2

1. 课程基本信息

课程编号：

中文名称：网页设计与制作

英文名称：网页设计与制作

课程类别：选修课

适用专业：所有专业

开学学期：20xx年-20xx年第二学期

总学时：24小时

总学分：

课程简介：

本课程突出网页设计与制作的现代特征，从互联网的基础知识出发，重点介绍HTML超文本标记语言，以及所见即所得的网页设计与制作工具Dreamweaver的基本操作流程。 从静态页面到动态页面，我们将由浅入深地介绍网页设计和制作的整个过程。 利用案例分析和个人实践来突出和突破课程的重点和难点。 并引导每一位选择该课程的学生为自己建立一个博客网站，从而提高学生对网页设计和制作的兴趣和爱好。 参考书：

1. 网页设计与制作教程，熊前兴民有限公司，科学出版社；

2. 网站及网页设计，张桂明，清华大学出版社；

3. 网页美术设计原理与实践策略，王晓峰、焦艳，清华大学出版社；

4、网站建设典型案例，张晓，清华大学出版社；

2.课程教学目标：

网页和网站是互联网的重要组成部分。 企业、公司和机构利用网站来推广其技术和产品。 个人发布主页来展示他们的风格。 人们从不同类型的网站获取所需的信息。 因此，设计和制作网页已成为计算机应用技术的一个重要方面。 本课程的主要教学目的是使学生掌握网页设计与制作的基础知识，并能使用网页工具设计与制作常用的网页。

三、理论教学内容及要求

第1章，网页基础知识（1学时）

(1)互联网基础知识

（二）www简介

(3)网页制作技术和工具介绍

第 2 章，超文本编辑语言 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 学时）

(1)CSS概述

(2)CSS属性

第 5 章，可视化网页设计工具

(1)网页基本操作

(2) 图片、表格和超链接

(3) 形式和框架

(4) 添加网页元素

（五）发布网站

第 6 章，动态网页设计语言 ASP（4 小时）

(1)ASP简介

(2)VBScript脚本基础知识

(3)ASP的内置对象

（四）实用文档

第7章，使用AD0访问数据库（1学时）

(1)数据库连接

(2)数据库检索

(3)数据库操作

总结复习（1学分）

四、实验教学内容及要求

5. 家庭作业

六、考核方法

最终评估要求每个学生为自己设计和创建一个博客网站。

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列的表格，左侧单元格插入logo图片，右侧单元格插入banner图片。

2、在左侧页面插入一个5行1列的表格，并在每个单元格中依次插入交互按钮（共4个）。 交互按钮的文字是对展示介绍相关内容的概括。 将其插入第五个单元格。 邮箱指示器的图片。

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

4. 设置主区域的初始页面。 （此页面由老师提供现成）

学生创建相关页面，这也是对之前所学内容的回顾和回顾。 教师对学生的操作进行反馈，开展比较评价活动，对表现好的学生进行表扬。

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

创建框架网页后，您可以根据实际需要更改框架的属性。

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

改进任务：框架的分拆。

学生独立探索和学习，并可以寻求老师的帮助。 完成设置后，请学生演示操作并解释如何设置以及为何设置。 操作基础扎实的学生在完成任务后可以进行延伸学习。

三、总结与评价

教师可以提供一些常用的框架结构应用接口，如Web邮箱页面等，引导学生总结课程内容，梳理课堂知识，并要求学生分组推荐一些优秀作品进行全班展示。

设计意图：开阔学生视野，让学生了解框架的应用，教会学生善于总结，学会学习。

网页制作教学设计4

本学期，我负责计算机科学与技术系软件工程专业的《网页制作》课程。 共有学生74人，通过率100%。 其中，90分以上的没有，80分以上的也只有少数。大部分在70到80之间，少部分在60到70之间，成绩不是很理想。 总体来说，大多数学生在计算机实践中都比较主动、踏实，能够自觉遵循老师的要求。 但也有少数学生自觉性较差，需要老师和校委会的督促。 现将一学期的教学情况总结如下：

1、教师既要给学生提供合理的指导，又要强化自身素质，提高知识水平。

在整个教学过程中，我还缺乏较高的艺术修养和艺术创作能力，所以我要继续学习； 另外，技术还有待提高，也需要和有经验的老师多交流。 。 我相信，只有站在一定的高度来看待整个项目的实施，才会更容易理解，也更有说服力。 因此，不能说这都是学生的错。 归根结底，我们还是需要提高自己的知识水平和职业素质！

2、了解学生，加强考核。

对于所有学生来说，智力水平是相同的，但学习兴趣水平是不同的。 大多数学生只愿意听、选择性接受，而没有创新运用知识，或者不自行学习、巩固知识。 他们只是听并做。 有些学生下课后就把书本放在一边，不予理睬。 考虑到学生的学习态度，我个人认为考核制度有待加强，严格学习，宽进严出，考试作风严肃！

三、教学内容的思考

1、网页要简洁、美观。 网站在设计过程中以简洁大方为主，合理的色彩搭配和主题内容的诠释，给访问者以赏心悦目的感觉； 避免过多的动画和过多的框架使用、导航不清晰、色彩杂乱、没有主题的随意制作。

2、网站风格要统一。 所有图像和文本，包括背景颜色、区分线、字体、标题、脚注等，必须在整个网站上具有统一的风格。 这样，读者会看起来舒服、流畅，也会给你的网站留下“非常专业”的印象。 在知识的应用中，需要大量使用合理的模板和CSS样式，避免随意使用重复的字体样式、重新定义网页中的颜色、参差不齐给人杂乱的感觉。

3、网站布局合理。 避免一些“合作主义”。 为了设计的方便，有的同学使用网上流行的模板来制作网页。 他们创建的网页几乎都是一样的，没有什么特点。 虽然他们已经完成了网页的制作，但毕竟不是个人制作的，缺乏进一步的了解。 使观众感到强化和无聊。 此外，清晰的导航可以引导浏览者阅读网页。 想法必须清晰，应避免交叉链接。

4、网站容量宜小。 虽然更漂亮的网页可以吸引浏览者，但图片和动画的容量会影响浏览速度，因此必须注意网络容量问题。 图片应尽可能压缩，多采用单一或简单的颜色； 动画应尽可能简洁实用，用最少的帧数制作出最美观实用的动画，为网页增色不少。

但总体来说，通过整个学期网页制作的学习，学生了解了网页制作所需的基本技术，掌握了网页制作的基本技能。 但由于时间有限，知识量大，一些重点难点问题仍需经常练习，如：静态网页中的布局、CSS定义； 动态网页中对象的综合运用等

当然，也有遗憾。 很多学生反映他们的学习爱好更多的是动画制作和Flash学习，但我们只给出一般性的讲解，并不能完全满足学生的求知欲！ 当然，对于网页制作，还需要加强学生配色观念和审美观的培养​​，以及动态网页实现技术的掌握。 在很多方面，需要师生进一步合作，共同学习、共同实践，实现知识的应用。 一定高度！

网页制作教学设计5

1. 教材基础

辽宁师范大学出版社，初中信息技术八年级第一册第二单元《网站设计与制作》活动一《创建个人网站》活动二有关FrontPage2000的部分内容。

2、设计思维

【教学指导思想】

信息技术课程是一门实践性强、创造性强、具有明显时代发展特征的课程。 现代教育理论主张以学生为中心，强调学生“学”的主动性。 学生是信息加工的主体。 教师的作用体现在组织、指导、帮助和促进学生的学习，充分发挥学生的主动性和积极性。 和创造力，使学生能够最有效地学习，达到最好的教学效果。 因此，本学科遵循“教师主导、学生为中心”的设计理念，让学生在教师的指导下对所学内容进行探索、分析、研究，培养学生的科学态度和价值观。实践操作的同时，也培养了学生的学习兴趣。

【教学对象分析】

学生知识能力

教学对象为八年级学生。 此阶段的学生正处于逐步形成抽象逻辑思维的过程，但形象思维仍然是获取知识的重要思维方式。 本课涉及的HTML语言枯燥难懂，学生理解有一定的难度。 因此，在教学设计中，教师希望通过学生自己的眼睛、双手和思维来发现新知识。 这减少了他们对新知识的恐惧，降低了理解的难度。

学生心理特征分析

初中生活泼好动，好奇心强，求知欲强，视野开阔，对信息技术充满兴趣。 大多数学生都能熟练使用浏览器浏览网页。 他们对互联网和网页非常感兴趣。 因此，在本课题中，老师利用学生的这种心理，设计了一个有趣的介绍，从兴趣出发，介绍学生感兴趣的网页，让学生在课堂上保持较高的学习热情。

【教学内容分析】

本课是第二单元《网站设计与制作》的新课，也是第一课。 老师这堂课以“栖霞”为中心，目的是激发学生的学习兴趣和求知的好奇心。 想要为今后教学活动的顺利开展打下坚实的基础、铺平道路。 本课的教学内容有两个方面，一是HTML语言的初次介绍，二是FrontPage2000的窗口构成的初次介绍。 教师设计的重点不是让学生完全理解HTML语言的结构，而是通过HTML语言有效地介绍用于制作网页的软件FrontPage2000，使学生自然而然地产生使用FrontPage2000制作网页的兴趣。网页。

教学内容的整合：教材将HTML语言的介绍和FrontPage2000的窗口构成分为两个活动。 考虑到信息技术课每周只有一节课卡通形象，如果第一节课只教HTML语言，那么涉及制作网页的软件FrontPage2000会让学生感到无聊。 同时，这种无聊的感觉很可能会持续一周，直到下节课。 这样一来，学生制作网页的兴趣就远远不如将两种教学内容结合起来的兴趣。 也不利于今后的教学活动。 因此，教师本课的重点是让学生了解HTML语言与FrontPage2000之间的联系。

三、教学目标

【知识与技能】

(1)了解网页、网站的相关知识；

(2)了解HTML标记语言的功能和结构；

（3）了解构成网页的基本元素；

（4）了解常用的网页制作软件；

（5）了解网站策划和定位的重要性，掌握网站策划流程；

（6）了解网站设计软件FrontPage2000的窗口构成；

（7）学习设计有意义的网站主题，收集网站相关信息，绘制网站结构图。

【流程与方法】

（一）饶有兴趣地介绍新课程内容，充分发挥学生为主体、教师为主导的作用；

（2）引导学生及时产生新的问题，然后通过教师的讲解、演示、比较以及学生的自主学习来解决问题。

[情感态度和价值观]

（1）强烈的求知欲激发学生的学习兴趣和积极性；

（2）学生了解信息技术前沿知识后，对信息技术课程保持新鲜感和兴趣；

（3）学生在不断认识自身主体地位的同时，也获得新的知识，体验学习的乐趣。

四、教学重点与难点

关键点：

1、了解构成网页内容的基本元素，了解网页布局的特点；

2、了解HTML标记语言的功能和结构；

3、学习启动FrontPage2000，了解网站设计软件FrontPage2000的窗口组件，了解各个组件的功能；

4、确立网站主题，规划网站结构图，学习创建新网站的基本方法。

困难：

1、了解HTML标记语言的结构，并使用HTML语言编写简单的网页；

2、网站如何定位；

3、如何收集网站相关信息；

4. 以导航视图模式建立网站结构。

5、教学准备

①收集常用网页制作软件的相关资料；

② 打开多媒体电脑教室的教师电脑和学生电脑，确保电脑教室的广播系统正常工作；

③共享类文件夹；

④班级网站和网页示例。

6、教学模式选择

“以学生为中心，教师为主导”的教学模式。

七、教学过程

一、情况介绍：

向学生展示一套优秀的网站和网页，激发学生创建自己的个人网站的兴趣和欲望。 当学生观看并欣赏该网站时，他们会受到启发来创建一个网页。 教师和学生在欣赏网络作品时，会回顾自己学过和遗忘的基础知识。 问题：网页的元素和布局是什么？ 教师分析案例，与学生一起复习文本的插入、图片的插入与设置、动画的插入与设置、表格的相关操作等相关知识。 让学生通过案例回顾基础知识，激发灵感。 并介绍本节的主题来制作自己的网页。

2.展示模板：

教师向学生展示本课要完成的网页。 要求学生模仿网页模板并能够自己创建新的网页模板。

3.本节任务：

1）网页和网站有什么区别？

2）网页由哪些元素组成？ 针对给定的网页分析网页的组成部分——标题图片、标题栏、水平线、滚动字幕、图片、文字和背景等。

3）使用Photoshop对素材进行处理，给出网页中图片的标题，设计一个突出自己主题的网站标题。 扩展：使用photoshop软件、绘图软件或flash软件来设计您需要的网页图像。

4) 要求学生模仿网页模板，并能够根据自己设定的主题制作网页模板。 学生独立完成模板模仿，独立探索和设计结合自己设计主题的网页模板。 群内成员可以互相交流，老师会随时巡查，解决学生学习过程中遇到的问题。 他们还注重收集常见问题，为学生提供及时指导。 特别关注有学习困难的学生。

5）团队选择最好的模板，探索并改进这个模板，然后基于这个模板设计网页。

4、评价展示：

作品完成后，提交给老师进行自评和小组互评。 选出该组的最佳作品并提交展示。 师生共同欣赏和评价作品，探讨作品的优点，指出需要改进的地方。 培养每个人的审美能力网页设计与制作个人网站作业，挖掘每个人的创新能力。

5. 课堂小结

师生们共同复习了本课的基础知识和技能，强化了网络道德、关注版权的意识。

八、教学反思

在信息技术教学中，必须以新的教学理念、教学理论为指导，根据新课程标准，探索适合信息技术课堂教学的教与学新策略、新模式，挖掘学生潜力，提高学生水平。 ' 质量。

以前我一直以为信息技术课就是教学生如何操作。 课堂上始终采用“师讲、学生听”的传统模式。 “学”在“教”之后，就是“我告诉你做”。 现在我正在努力做出一些改进。 在本项目中，我围绕“以学生为中心，教师为主导”的设计理念设计各个教学环节，积极体现学生的主体作用，努力提高学生的学习效果。

实践证明我的想法是好的，但在实践中难免会有疏漏和细节不够的地方。 例如：由于我的观察不全面，忽略了个别学生学习中的心理障碍，有的学生畏难情绪影响了他们的整个学习效果； 课堂学习气氛热烈但不够和谐。 这一切都说明了一个问题：我只关注学生的整体，而忽视了个体。 想了想，我认为这堂课的教学设计可以增加个人展示的机会，尤其是那些有学习困难的学生。 我应该多关注他们的动态，多帮助他们。

本课程的教学目标是掌握使用FrontPage创建网页的基本方法； 重点是掌握在网页中插入文字和图片的方法； 困难在于插入表格来规划网页的结构。

备课时，我发现教材使用了一个标题、一张图片和一个简单的文章结构示例。 如果完全根据教材进行教学，就不可能突破困难。 因此，我们设计了一份由学生预先制作的环保报纸，并利用FrontPage软件制作网页来帮助学生克服困难。 并选取5种结构典型的学生环保报刊。 制作演示片，引导学生分析结构、规划框架。

课程以自主探究的方式进行。 同学们在前期的学习中已经掌握了在Word中插入表格、图片等的方法。 他们顺利完成了在FrontPage上呈现教材的目标。 基本掌握了单个网页的制作方法。

接下来就是突破难点的训练。 面对演示影片中呈现的任务和教材相关提示。 此时，问题集中在如何插入布局表来实现规划的结构。 但教材并没有提示学生探究FrontPage的“表格”功能与Word“表格”的异同。 少数学生开始尝试插入适合自己网页结构的框架表格，而大多数学生根本没有考虑结构问题，开始直接搬家，用FrontPage当Word。 直到我发现我无法在教科书中意识到的预期位置上放置图片和文本，” Frontpage通常使用表来安排各种内容的布局位置（文章，图形等）网页。” 这个问题的含义清楚吗？ 渴望找到解决方案。 我问他们意识到他们需要先插入适当的结构框架以分享自己的想法的学生。 并迅速制作与学生思考一致的示范电影，并为他们提供探索前页面“表”功能的技巧。 同时，柔尤教室的功能用于向所有学生展示同龄人的研究结果，以便学生的不同思维方式和智慧的方式可以碰撞，互相启发，并成功克服了教学困难。

[网页生产教学设计]相关文章：

网页生产教学设计07-28

使网络教学设计04-20

网页生产教学设计7条11-27

网页生产教学设计（7篇文章）11-28

网页设计和生产经验12-12

网页设计和生产报告01-04

网页生产教学设计一般7章12-06

网页生产教学设计（7篇文章）12-06

网页生产教学设计编译7条11-30