《网页的制作》教案【精选7篇】

作为一名辛苦耕耘的教育工作者，往往需要进行教学设计编写工作，教学设计是实现教学目标的计划性和决策性活动。那么写教学设计需要注意哪些问题呢？下面是差异网的小编为您带来的7篇《《网页的制作》教案》，希望能对您的写作有一定的参考作用。

《网页的制作》教案 篇一

一、教学目标

1、知道站点、主页的概念，能在指定位置建立只有一个网页的站点；

2、认识FRONTPAGE的界面；

3、掌握在主页中插入文字、图片、水平线；

4、掌握页面文件与图片的保存。

二、教学重点

1、能在指定位置建立只有一个网页的站点（难点）

2、能在页面中插入文字、图片、水平线

3、掌握页面文件与图片的保存（难点）

三、学情分析

学生已经学习了WORD、POWERPOINT与上网浏览信息，对计算机的基本操作（WORD中文档的编辑，网页的浏览等）比较熟练。这使得学生主动探索、自主学习成为可能。每位学生必须完成基本任务，有能力的学生还可以完成提高篇的学习，以充分发挥学生的积极性与自主性。

四、教学方法

在教学中，一方面采用比较教学的方法，促进学生知识的迁移；另一方面，提供学生一个导学课件，让学生根据这个网络环境下的课件自己探索学习，以满足不同层次学生的需求。

五、教学过程设计

教师活动：1、引入课题：（激发兴趣，活跃气氛）

同学们喜不喜欢上网？经常上新浪、西祠胡同等，有没有同学知道新浪、西祠胡同称做什么？（网站）

浏览新浪网站，浏览的第一个页面称为什么？（主页）

我们还可以浏览其它的页面，点击超链接浏览，当鼠标变成手指的形状时有超链接。

问题1：网站是不是就是网页？用自己的语言描述一下网站的概念（网站包含多个网页，通过超链接把不同的页面链接起来）

问题2：网页是不是就是主页？（第一个页面称为主页，网站设计者可以确定哪一个是主页，主页的文件名一般为：index.htm,主页也是网页）

设计网站一般必须经过两个步骤，首先是在计算机里做好，然后发布在internet上，让所有的人访问浏览。

今天我们学习用Frontpage建立站点，制作一个主页。

先来研究一下没有发布的网站，打开教师做的网站

问：同学们看到了什么？（文件夹）

总结：

可以这样理解网站：在资源管理器里，网站表现为一个文件夹，里面存放的是所有与网站相关的文件。

打开主页，浏览页面，这是老师做的一个导学课件，将帮助大家完成学习任务。

请学生浏览教师课件，了解学习任务

2、新建站点

FP的启动

问：与word比较，有什么不同？

（增加了视图区，编辑区有三个窗口）

总结：

视图区：多种视图模式是为了方便网站的管理。制作网页时，必须在网页视图中编辑页面

普通窗口：鼠标在闪动，可编辑、修改页面，所见即所得的方式

预览窗口：浏览器中出现的效果，与PowerPoint中的“放映幻灯片”类似。

Html窗口：编写HTML（超文本标记语言，它是描述网页内容和外观的标准。）

打开导学软件，根据步骤，示范建立只有一个网页的站点，强调新站点的位置、路径的正确输入，站点的名称。

（教会学生利用导学课件，根据导学软件完成任务）

任务1：学生根据导学课件，在d:建立自己站点

教师巡视指导

请一位学生示范如何建立站点，教师总结

问：在文件夹列表中看到了什么？

分析多出的文件夹列表栏，多了一个文件夹，里面有两个子文件夹和主页，图片存放在images文件夹中）

3、编辑主页与保存主页

看效果图，请学生分析主页中的元素

总结：鲜明的主题，如：我的世界、我的宠物等，有分割页面的水平线，与主题相关的图片，对网站的简单介绍

根据导学软件，学生完成任务2：设计主页、保存主页与图片

教师巡视指导

4、总结反馈

请学生示范，讲解如何插入图片（来自剪贴画与来自文件）、插入水平线，如何保存

总结：必须切换到“普通”窗口下编辑

主页的保存中存在问题：

单击“文件”----“保存”或工具栏的“保存”按扭，弹出一个对话框，保存嵌入式文件，改变文件夹，图片必须保存在本站点images文件夹中，便于站点的管理。

5、请学生继续完成自己的主页，有能力的同学完成提高篇

教师巡视指导

6、教师与学生共同评价总结

展示学生作品，教师与学生共同评价

请学生总结今天的学习内容：建立包含一个页面的站点，主页的设计与保存。

学生活动：学生回答问题、学观察鼠标指针、学生回答问题、学生观察网站的表现形式、齐声回答、学生浏览课件，并了解本节课的学习任务、学生观察FP界面与word的不同、学生回答、学生观察教师演示不同编辑窗口的区别。学生上机操作，在指定位置建立自己站点、请先做好的学生当小老师，辅导其它学生。学生回答、学生操作，同桌互相帮助，并参考教师做的课件，利用网络环境下的课件自己探索学习，满足不同层次学生的需求、学生总结

注：课件中包含每一个操作过程的操作步骤及拓展的'知识、基本任务与提高任务的效果图。

点评：

教学课题“网页制作”作为初中阶段的最后一部分内容，难度较大，教学的深度较难掌握。这就要教师在备教材的基础上，同时还要备学生，做到对学生的情况有较为深刻地了解，以便很好地完成教学任务，达到预期的教学效果。根据教材和《中小学信息技术课程指导纲要（试行）》中的精神，本课应以“任务驱动”的方式完成，一方面教会学生了解和熟悉具体软件的基本功能，另一方面又能主动地掌握并深入学习思考。寻着这个思路授课教师在课前作了大量的课前准备制作出了相应的教学课件“网页制作”。

一、调动学生的学习热情，变被动学习为主动学习

整个教学过程张云老师采取了“引导加任务驱动”的模式进行。首先教师进行导入，导入概念，强调概念；再引导学生学习课件的使用，引导他们读懂课件中的第一个任务：建立一个只有一页的网站，（此处若能引导学生，由学生来完成，减少老师的操作，效果会更好），然后让学生模仿第一步的操作进行下面内容的学习，完成导学材料中给出的一个个任务。

二、突出重点，及时点评

张云老师在引导学生进行学习、操作后，就主动地去观察和发现学生中出现的问题，甚至于课前对可能出现的问题，也进行有预见性地准备；发现问题及时点评。（点评分为个别点评和全班点评，点评不等于教师将操作过程演示一遍。张云老师在点评建成的网站时，重点若再突出些，介绍再清楚些，效果会更好。比如：站点中内容说明不够清楚等。）

三、发挥学生的协作学习精神

张云老师在教学过程中，对有困难的学生进行个别辅导，同时还需发挥学生的协作学习的精神，充分调动学生学习的积极性，让学有余力的学生充当“小老师”，从而体会到学习的乐趣。（整个教学过程中，这点做地不够，没有充分地让师生互动起来）

四、重点突出、目标明确

最后，张老师在整个教学过程中，应再突出教学重点，明确本节课的任务。（课前的导入，最好给出教学目标，课后的小结应让学生总结他本堂课学习到哪些知识，所以感觉这节课重点不突出，内容分散。）

五、教学效果较好

由于张云老师在课前对本课作了大量的准备工作，课件制作效果较好，所以学生完成情况很好，教学任务完成情况较好。

网页制作教学计划 篇二

新学期开始，本学期我将担任11级计算机网络班《网页制作》的教学，为了有效地培养学生学习网页制作课程的兴趣，使学生逐步具备利用所学知识进行网页制作的能力，以适应信息社会的学习、工作和生活的需要；为了规范教学，我特制订教学计划如下：

一、教学指导思想：

本学期我将认真做好所教课程的各项工作。认真学习中职计算机学科的教学大纲和网页制作的相关教材，明确教学任务和教材体系，力争“教书”与“育人”贯穿始终。全面贯彻教育部关于中职教育的大政方针，努力探索计算机教学规律，在激发和培养学生的学习兴趣，养成良好的学习习惯，提高动手能力的同时，着力培养学生树立正确的荣辱观和人生观，积极推进素质教育。在教学中要充分利用计算机来培养学生的信息素养，有效地提高教育教学水平。促进学生创新精神和实践能力的培养，充分考虑学生的发展需要，强调学生自主学习，发挥教师的主导作用，学生主体作用，以学生个体发展为目标，不断提高教育教学质量。

二、学生情况分析：

上学期学生已经初步学习了部分课程，对此可能有了一定的了解，但是中职学生整体素质层次不齐，绝大多数学生学习目标明确，但也有少数学生对微机在当前和末来社会中作用认识不够。虽然有基础但是通过一个假期之后，很多知识需要巩固。但总体来看本课程学生们的学习兴趣还是很好的。

三、教材分析

我们选用的是电子工业出版社出版的《网页制作》第二版教材。本教材的编写打破了传统的学科体系，以项目为中心，一个个小任务为实例，以范例网站的建设为主线，不强求理论体系的完整性，以够用为度，以是否实用为标准。整个项目统筹考虑实训的设计，循序渐进，逐步完善，着重培养学生独立思考问题和主动解决问题的能力，力求在学习的过程中积累实际工作的经验，从而突出职业技术教育的特色。

本书共8章，前面已学习了前三章，本学期主要学习后五章。第四章打造企业留言板本章的教学重点和难点是插入表单对象的基本方法及设置表单及表单对象属性的方法。要求掌握表单、文本域、单选按钮、列表／菜单、复选框、文本区域、隐藏域、按钮、文件域、跳转菜单、字段集、【检查表单】行为、密码验证的方法等知识点。主要是通过完成企业留言板这一项目来学习的。通过总的。项目来分析逐个小任务。最终完成知识点的学习。为了更好的使同学们掌握重难点，在教学中我会精讲多练，让学生案例分析，讨论，最终上机操作，如：用户注册，163信箱等的制作。

第五章在Dreamweaver中美化页面本章教学重难点是添加、修改和删除行为的方法及在网页制作中应用行为的基本方法。要求学生掌握行为的概念、【行为】面板、常用事件、状态栏文本、弹出式菜单、打开浏览器窗口、交换图像、控制Shockwave或

Flash、弹出信息、拖动层等知识点。主要是通过逐个任务来完成教学的。首先教师演示教学案例。通过PPT课件讲授基本知识。然后通过让学生自己动手重新制作教学案例来巩固基本知识。最终通过实训让学生进一步熟悉所学知识点。

第六章站点的发布本章教学重难点是在IIS中配置FTP服务器的方法及通过Dreamweaver发布网页的方法和在模板中插入模板对象的方法。要求学生掌握安装IIS服务器、配置Web服务器、配置FTP服务器、发布网页、检查链接、改变链接、查找和替换、清理文档、保持同步等知识点。本章主要通过教师实例演示，学生动手操作来完成教学任务的。为了让学生更加熟练操作，教师主要通过多个实例操作练习的方法来完成教学。

第七章CSS样式的应用本章教学重难点是创建和设置CSS样式的方法及附加样式表的方法。要求学生掌握【CSS样式】面板、CSS样式的类别、定义CSS样式的方法、CSS的【类型】等属性对话框、3种选择器各自的特点、创建超级链接的高级CSS样式、设置单元格ID名称和样式、修改CSS样式、删除CSS样式、应用CSS样式、附加样式表、重命名样式等知识点。主要通过项目教学法来完成教学，项目的主要目的是让学生掌握CSS样式的基本知识。项目主要通过CSS样式控制购物网页的外观，一方面要熟悉CSS样式的基本使用方法，另一方面要了解购物网页页面的基本特点。本项目使用的网页布局技术仍然是表格，另外还涉及文本、图像等网页元素。

第八章网页制作综合实例本章重难点是使学生综合运用所学知识点。要求学生掌握网站设计流程、设计网页布局、各级网页制作的方法及网站的推广。本章主要是让学生自主完成学习任务，以培养学生发现问题，分析问题，解决问题的能力。同时培养学生主动学习的意识。

四、教学措施

1、计算机是一个不断发展的学科，也是一个日新月异的学科，不断会有新的计算机技术出现，教师要在第一时间了解这些动态，然后学会交给学生。因为计算机在现实生活中的应用都是最新的技术，如果与现实脱节了，那么学生现在学到的计算机知识在现实中根本就用不上。所以需要教师有良好的计算机学习能力，为学生做好引导者。

2、采用项目教学法，任务驱动式，案例讲解，实例讨论等教学法围绕“教务管理系统”组织教学内容，分解出一个个子任务分组学习，分组讨论，充分调动学生的学习积极性，开发个人潜能。

3、学生自主完成学习任务，以培养学生发现问题，分析问题，解决问题的能力。同时培养学生主动学习的意识。

4、该课程理论性和实践性均强，要求学生勤学多练，除掌握对网页制作的操作外，还应要求学生做好flash与平面设计，并引导学生综合运用。根据学生的学习情况制订贴近学生生活的实践操作以真正达到了学以致用的目的。

5、课后及时反思，撰写反思日志，积极与学生沟通，了解学生学习掌握情况，对于存在的问题及时发现纠正，对于好的经验方法进行总结创新。

6、制定激励措施，引发学生的创新积极性。对于对计算机有兴趣和独到见解的学生，可以成立兴趣小组，有老师带队，做一些新的项目和开发研究。制定一套合理的奖励机制，对于学生的创新成果给予一定的肯定和奖励，激发学生的创新热情，让学生觉得自己创新是有人欣赏，是有价值的，从而以更积极的态度投入到新的创新中。

总之，计算机在教育中的地位越来越重要，我们需要投入更多的精力来对计算机教育进行创新和研究。对于本课程的教学已远远不止于此。除了因人而异、因材施教以外，更要博览群书、拓宽视野，努力寻求新的切入点，使理论教学和实际应用更好更紧密的结合起来，培养出更多适应信息化社会的实用型和复合型人才。

《网页的制作》教案 篇三

学习目标:

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

1、制作框架网页

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

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

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

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

·隐藏框架间的横线：

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

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

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

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

·更改框架链接的网页：

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

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

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

2、网页中插入字幕

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

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

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

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

3、超链接相关网页

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

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

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

·跟踪超链接：

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

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

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

作业：

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

网页制作教学设计 篇四

教学目标：

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邮箱页面等，引导学生总结本课内容，梳理课堂知识，并让学生分组，推荐一些优秀作品进行全班展示。

设计意图：开拓学生的视野，使学生了解框架的应用，教会学生要善于总结，要学会学习的方法。

网页制作教学设计 篇五

教学目标：

1、知识与技能

（1）了解超级链接的含义及链接源和链接目标的含义，掌握同一站点内以及不同站点间网页超级链接的创建方法。

（2）掌握网页内书签的作用及创建书签链接方法，掌握交互式按钮、框架网页内超级链接的设置方法。

（3）理解热区链接的含义及创建方法。

2、过程与方法

（1）通过创建网页超级链接的操作，使学生了解网页中创建超级链接的基本方法，破除对网页链接的神秘感。

（2）通过对不同对象设置超级链接的操作，使学生总结出操作的规律，培养学生自主学习与操作的能力。

（3）通过网页不同的超级链接方法，拓展学生思维，创建多种形式的网页链接。

3、情感态度与价值观

（1）通过链接我国主要自然保护区网页，激发学生热爱祖国、热爱自然、热爱生命的激情。

（2）完成超级链接，使学生感受成功的喜悦和快乐。

教学重、难点：

1、教学重点：

（1）超级链接的含义及链接源和链接目标的含义。

（2）超链接的制作方法——给文字、图片制作超链接，制作书签链接，给交互式按钮制作超链接，框架页面内的超链接，图片区域制作超链接等。

2、教学难点

（1）书签链接中名称及对应链接位置的设定。

（2）在框架页面中制作超链接时，目标对象所选择的显示窗口形式。

教学方法与教学手段：

任务驱动法、讨论探究法、讲解与演示法、类比知识迁移法。

教学准备：

"动物——人类的朋友"站点，包括未链接的网页，如欢迎页、表格页、框架页，表单页等。

教学过程：

1、引入

展示两个主页，一个已经创建了链接，一个没有创建链接，让学生进行比较并找出区别，引出本课课题——超级链接。

提出：我们在先前的学习中，哪个软件中的相关操作与它类似？什么是超级链接？找一个例子，分析链接源和链接目标分别是什么？

学生展开交流，通过对比找出不同点，并积极思考，回答老师的问题。

设计意图：通过对比操作、交流，再辅以知识迁移，明确本节课教学内容。

2、新授

（1）站内超级链接

引导学生回顾PowerPoint中超链接的制作方法（教师提示：右击链接源，利用快捷菜单制作超链接），辅以教材中的内容，让学生自行探究并完成以下操作：

任务1同一站点内不同页面之间的链接

○1制作首页（欢迎页）到表格页的超链接。

○2给表格页内交互式按钮设置超级链接，链接到相关页面。

○3给框架页内交互式按钮设置超级链接，链接到相关页面。

教师巡视，及时指导，安排学生示范操作并讲解如何制作超链接。

交互式按钮的超链接制作要求在框架网页中演示操作。老师可以提问学生：演示者操作的对吗？有没有问题？

引导学生发现问题：超链接制作完成后需要检验（保存后预览）。

教师讲解，突破难点，再交由学生操作。

以上是同一站点内不同网页之间的链接，有时一个页面中内容过多，需要不断拖动滚动条实现阅读，能否实现快速跳转呢？

任务2同一站点内同一页面内的跳转（链接）：在"动物趣闻"页面内制作书签链接。

教师讲解：由生活中的书签引入，介绍"书签链接"的概念，然后再演示如何操作。

提示：书签链接的双向性问题（返回）。

学生认真听讲后模仿制作，教师巡视进行指导并反馈学生的完成情况。

（2）站间超级链接

仅凭我们课堂上制作的这些页面还不足以详细介绍我们的主题，此时我们还可以借助超链接，链接到因特网上的其他网站，以丰富我们的内容。

任务3借助热区链接，为"友情链接"页面制作超链接，链接我国一些自然保护区网站。

有了以上基础，可安排学生自学教材中有关热区链接的相关内容，学生探究操作后教师再安排学生进行演示，辅助以提问的形式检验学生的自学情况。

3、总结与评价

开展同学间的互助，检验其链接完成情况，推荐优秀同学做展示。引导学生分类总结本节课的知识点。

网页制作教学计划 篇六

一、教学目标

1、知道站点、主页的概念，能在指定位置建立只有一个网页的站点；

2、认识FRONTPAGE的界面；

3、掌握在主页中插入文字、图片、水平线；

4、掌握页面文件与图片的保存。

二、教学重点

1、能在指定位置建立只有一个网页的站点（难点）

2、能在页面中插入文字、图片、水平线

3、掌握页面文件与图片的保存（难点）

三、学情分析

学生已经学习了WORD、POWERPOINT与上网浏览信息，对计算机的基本操作（WORD中文档的编辑，网页的浏览等）比较熟练。这使得学生主动探索、自主学习成为可能。每位学生必须完成基本任务，有能力的学生还可以完成提高篇的学习，以充分发挥学生的积极性与自主性。

四、教学方法

在教学中，一方面采用比较教学的方法，促进学生知识的迁移；另一方面，提供学生一个导学，让学生根据这个网络环境下的自己探索学习，以满足不同层次学生的需求。

五、教学过程设计

教师活动：1、引入课题：（激发兴趣，活跃气氛）

同学们喜不喜欢上网？经常上新浪、西祠胡同等，有没有同学知道新浪、西祠胡同称做什么？（网站）

浏览新浪网站，浏览的第一个页面称为什么？（主页）

我们还可以浏览其它的页面，点击超链接浏览，当鼠标变成手指的形状时有超链接。

问题1：网站是不是就是网页？用自己的语言描述一下网站的概念（网站包含多个网页，通过超链接把不同的页面链接起来）

问题2：网页是不是就是主页？（第一个页面称为主页，网站设计者可以确定哪一个是主页，主页的文件名一般为：index.ht,主页也是网页）

设计网站一般必须经过两个步骤，首先是在计算机里做好，然后发布在internet上，让所有的人访问浏览。

今天我们学习用Frntpage建立站点，制作一个主页。

先来研究一下没有发布的网站，打开教师做的网站

网页制作教学设计 篇七

一、学习内容分析

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

以上就是差异网为大家整理的7篇《《网页的制作》教案》，希望对您的写作有所帮助。