网页的制作教案
作为一位杰出的老师，常常需要准备教案，教案是保证教学取得成功、提高教学质量的基本条件。写教案需要注意哪些格式呢？以下是小编帮大家整理的网页的制作教案，希望能够帮助到大家。
网页的制作教案1
教学目标：
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、总结与评价
开展同学间的互助，检验其链接完成情况，推荐优秀同学做展示。引导学生分类总结本节课的知识点。
网页的制作教案2
新学期开始，本学期我将担任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、制定激励措施，引发学生的创新积极性。对于对计算机有兴趣和独到见解的学生，可以成立兴趣小组，有老师带队，做一些新的项目和开发研究。制定一套合理的奖励机制，对于学生的创新成果给予一定的肯定和奖励，激发学生的创新热情，让学生觉得自己创新是有人欣赏，是有价值的，从而以更积极的态度投入到新的创新中。
总之，计算机在教育中的地位越来越重要，我们需要投入更多的精力来对计算机教育进行创新和研究。对于本课程的教学已远远不止于此。除了因人而异、因材施教以外，更要博览群书、拓宽视野，努力寻求新的切入点，使理论教学和实际应用更好更紧密的结合起来，培养出更多适应信息化社会的实用型和复合型人才。
网页的制作教案3
教材分析
在学习《网页的设计与制作》之前，学生已初步掌握了网络信息的搜索、浏览和下载，以及电子邮件的使用等内容。因此，学生已经具备了获取信息的能力，但多数学生对网站网页的了解也仅仅只停留在这种简单的操作层面上。本节教学中通过网页、网站基本概念的了解，让学生理解网页的基本元素构成和经常使用的构件，了解超文本标记语言HTML，通过对网页制作工具的比较学习，了解不同常用网页制作工具的特点，为下一节的学习打下基础。
学情分析
在学习本单元之前，学生已初步具备获取信息的能力，他们学习了网络基础知识，掌握了网络信息的浏览、搜索和下载以及电子邮件的收发、文件传输等技能。学生希望自己能制作网页，并将网页发布在Internet上。因此学生对本单元学习的兴趣很大。学生在学习本单元前已经学过Word应用软件的使用方法，并掌握一定的文字输入、图片的编辑、表格的插入等技巧，这对于本单元的学习非常有利。
教学目标
1、知识与技能
（1）了解网页、网站的基本概念，理解网页的基本元素。
（2）了解基本的网页制作软件的界面和特点。
（3）了解网站的地址标识——URL，超文本标记语言HTML，了解超文本传输协议HTTP。
2、过程与方法
（1）通过对一个网站网页的分析，了解网页、网站的基本概念，理解网页的基本元素。
（2）通过教师的演示和讲解，初步了解基本的网页制作工具软件的界面和特点。
3、情感态度与价值观
（1）培养学生严谨求实的学习态度。
（2）培养学生学习中勇于探索、崇尚科学的意志和品德。
重点难点
重点：网页的基本元素
难点：网页的基本元素，构件
设计思想
同学们喜欢上网，但是有一部分学生不能区分网站和网页，在设计时，我首先与语文学科整合，结合语文教材内容，播放《再别康桥》flash动画朗读版，以此来创设快乐课堂学习情境，进而引入徐志摩文学网，让学生思考网站和网页有什么联系？引出本节课的`主题，以提高学生的学习兴趣和求知欲望。当学生对网站与网页有了一定的认识之后，引导同学们自主去探究发现构成网页的基本元素有哪些？有什么作用？接着组织学生继续讨论、交流网页中除了三种基本元素外，还有哪些经常使用的构件？然后引导学生查看网页的源文件，从而顺利引导到对Dreamweaver网页制作软件的了解，为本章后面的知识学习作铺垫。
教学流程
教师活动设计创设情境，激发学生的学习兴趣引入课题幻灯显示《再别康桥》flash动画朗读版，指出诗很美，作者笔下的康桥更是让人向往，激发学生的求知欲。引导学生进入徐志摩文学网，对URL、http作一定的解释。现在大家看到的是什么？（进入到徐志摩文学网页面让学生回答）引出本节课的主题“网站和网页”，让大家思考网站与网页有什么联系？
1、从美学角度出发，创设快乐课堂学习情境。
2、与语文学科整合，结合语文教材《再别康桥》，引入徐志摩文学网。
3、学生明确本节课的学习主题内容。
教师提问：在徐志摩文学网中，各位同学是否发现了神往已久的康桥，除此之外，还发现了什么？
学生活动：用发现法去找出有关康桥风景欣赏中的任一张图片，再别康桥的诗和徐志摩简介网页。 网站与网页有什么联系？
教师总结：网站包含多个网页，通过超链接把不同的页面链接起来。构成网页的基本元素有文字、图形和超链接。网页中常见的图象有jpg和Gif。网站的首页即为主页。
学生活动在桌面上新建一个以自己号次命名的文件夹，进入徐志摩文学网完成以下任务：
课堂任务一，触摸网页的基本三要素：
1、要求下载康桥风景欣赏中的任一张图片，文件名改为kq
2、保存再别康桥这首诗，复制，粘贴到word文档中，文件名改为zbkq
3、要求下载徐志摩简介网页网页揭秘刚才我们了解了网页的基本元素、构件，这些不但美化了网页，还丰富了网页内容，增强了网页功能。下面让我们来看一看网页究竟是怎样组织的。以课堂在线网站为例，选择滚动字幕，点击“查看”菜单中的“源文件”命令。
教师总结：网页中包含的文字、图像、超链接和表格等基本元素及构件是由超文本标记语言（HyperText Markup Language，简称HTML）进行描述的。HTML是一种超文本标记语言，由网络浏览器解释执行，最后将解释结果显示出来。几乎所有的网页都是用超文本标记语言编写的，下面就让我们利用记事本来体验一下。
网页制作工具比较
1、用HTML语言制作网页，让学生对照老师的任务提示，观察一下一个简单的HTML网页文件的浏览结果变化。（提示学生选择“查看”菜单中的“源文件”命令进行修改。）
2、用网页制作工具软件制作网页在“文件”菜单中用使用Frontpage编辑上述网页，比较两者特点。
教师总结：除了Dreamweaver之外，还有比较专业的网页制作工具Frontpage，一般我们使用Dreamweaver进行网页制作。
1、学生听、看老师讲解和演示，并思考。
2、学生操作实践学生任务：将size="3"改为size="6"，color="#FF0000"改为color="#000000"，观察其变化。
本节课涉及到的基本概念较多，考虑到前面已经有过文字小结，因此，这里改用选择题的形式来帮助学生整理和巩固。学生完成“课堂在线——网站和网页”中的“课堂练习”。教师巡回检查，个别辅导有困难的学生。学生操作练习，完成课堂练习。 “在线批改”可以让学生及时纠错，并据此判断学生是否掌握本节课的内容。交流与评价每位同学学习完本课，并完成实践过程之后对自己的学习情况进行自我评价，完成“课堂在线——网站和网页”中的“交流评价”。指导学生进行自我评价，并根据反馈的结果适当点评。学生自评，通过大屏幕实时显示评价结果，教师可以及时地点评学生的学习情况。
本课小结
本节课主要讲了网站和网页的基本内容，网页的基本元素、构件及网页制作工具等。学生对本节课的内容知识进行回忆小结根据本节课的学习内容，要求学生设计一幅个人网站的主页。思考、设计，为下面的课做准备学习拓展拓展网页构件的使用，让学生根据表单的信息进行注册，查询，通过输入、查询等功能来激发学生的学习兴趣，让学生更能理解学过的数据库管理有关知识。
网页的制作教案4
一、教学目标
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的不同、学生回答、学生观察教师演示不同编辑窗口的区别。学生上机操作，在指定位置建立自己站点、请先做好的学生当小老师，辅导其它学生。学生回答、学生操作，同桌互相帮助，并参考教师做的课件，利用网络环境下的课件自己探索学习，满足不同层次学生的需求、学生总结
注：课件中包含每一个操作过程的操作步骤及拓展的知识、基本任务与提高任务的效果图。
点评：
教学课题“网页制作”作为初中阶段的最后一部分内容，难度较大，教学的深度较难掌握。这就要教师在备教材的基础上，同时还要备学生，做到对学生的情况有较为深刻地了解，以便很好地完成教学任务，达到预期的教学效果。根据教材和《中小学信息技术课程指导纲要（试行）》中的精神，本课应以“任务驱动”的方式完成，一方面教会学生了解和熟悉具体软件的基本功能，另一方面又能主动地掌握并深入学习思考。寻着这个思路授课教师在课前作了大量的课前准备制作出了相应的教学课件“网页制作”。
网页的制作教案5
教学目标：
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邮箱页面等，引导学生总结本课内容，梳理课堂知识，并让学生分组，推荐一些优秀作品进行全班展示。
设计意图：开拓学生的视野，使学生了解框架的应用，教会学生要善于总结，要学会学习的方法。
网页的制作教案6
学习目标：
制作框架网页、在网页中插入字幕和超链接知识
1、制作框架网页
框架网页是一种特殊的HTML网页，它将窗口划分成若干小窗口区域（框架）。每个框架独立显示一个不同的网页（有自己的网页名字），整个框架网页有一个总的名字。
框架与表格在组织网页结构时相似。表格是对页面区域进行划分，框架是对整个浏览窗口进行划分。
·创建框架网页：单击菜单“文件”→“新建”→“网页”，选择“框架网页”标签→选择“嵌套式层次结构”
·选中的框架边框为蓝色，在拆分或删除框架时应注意是否选中。
·隐藏框架间的横线：
右击框架网页→单击“框架属性”→在对话框中单击“框架网页”按钮，在“网页属性”对话框中选“框架”标签→设置“显示边框”为未选中状态。
·按住Ctrl键，拖动鼠标可以快速拆分框架。
·删除框架：单击菜单“框架”→“删除框架”。
·保存框架网页时注意要保存所涉及到的所有网页。
·更改框架链接的网页：
右击相应的`超链接→在弹出的快捷菜单上选择“超链接属性”命令，打开“编辑超链接”对话框
→可直接选择列出的文件，或在“URL”框中输入网页的地址
→单击“目标框架”右边的“更改目标框架”按钮，在“当前框架网页”中选择目标框架。
2、网页中插入字幕
·插入字幕：光标定位插入点→单击“插入”→“组件”→“字幕”打开“字幕属性”对话框；
→在文本框中输入文字，选择“方向”、“速度”、“表现方式”等；
→选中字幕，拖动鼠标，调节字幕运动范围。
·修改字幕：双击字幕，可以打开“字幕属性”对话框，对字幕属性进行修改。
3、超链接相关网页
超链接是从一个网页指向另一个目标的连接。一般在网页中的某文字或图片上设置超链接。
·创建超链接：单击文字或图片→“常用”工具栏的“超链接”按钮，打开“创建超链接”对话框。
·取消超链接：选中具有超链接的文本或图片，单击“超链接”按钮，在打开的对话框中将URL栏中的内容删除。
·跟踪超链接：在超链接上右击，在打开的快捷菜单上选择“跟踪超链接”命令；
或：在普通视图中，按住Ctrl键，将光标移到超链接上，单击，会跟踪连接到超链接指向的目的位置。
·设置超链接文本的颜色：网页中超链接文本的颜色共有3种：未访问过的，当前正在访问的，已访问过的。FrontPage默认这3种颜色分别为蓝色，红色、深蓝色。单击“格式”→“背景”→在“网页属性”对话框→选“背景”标签，选定“超链接”、“已访问过的超链接”、“当前超链接”的颜色。
作业：
新建框架网页，建立超链接，在网页中插入字幕。
网页的制作教案7
一、教材分析
首页之外的其他网页在结构上很相似，为了给这些网站增加一些亮点，故在网页中插入了交互式按钮，交互式按钮不仅具有超链接功能，在使用过程中还会发生变化，更能引起学生的学习兴趣。
二、教学目标
1、知识性目标
（1）了解交互式按钮的功能；
（2） 了解计算机主机包括的部件；
（3）了解网页动态效果。
2、技能性目标
（1）会设置网页的目录；
（2）学会插入、修改交互式按钮；
（3）学会复制表格。
3、情感性目标
（1）加深对计算机硬件的认识；
（2）培养学生分工协作的精神。
三、教学重、难点
1、教学重点
（1）交互式按钮的功能；
（2）插入、修改交互式按钮。
2、教学重点
（1）交互式按钮；
（2）复制表格。
四、教学准备
制作一个具有几个漂亮交互式按钮的网页。
五、教学过程
1、导入
教师：现在我们的首页已经做好了，可是其他的网页还没做，但是一节课内无法做太多的，今天呀我们就来学习制作“主机”网页吧！其余的以后在做.
2、学习新课。
（1）指导学生用表格布局；
教师:用表格对网页进行布局方法，前一堂课我们学习了，现在就请同学们，对照课本用表格给 “主机”网页进行设置。
学生看书练习。
（2）指导学生学习插入交互式按钮；
教师：在网页内经常会插入具有超链接功能的按钮，单击这些按钮，便可打开其他网页，请同学们看下面具有交互式按钮的网页。
屏幕展示。
教师：下面我们就来学习如何制作交互式按钮。
教师示范讲解，学生观察。
学生练习、老师巡视指导。
3、巩固练习。
请同学们试着完成书中本课的“试一试”中的`练习，在遇到困难时可小组同学相互帮助，也可以举手问老师。
4、总结评价。
教师总结后，请同学根据自己掌握的知识情况和收获，在本节课的“评一评”中打上自己的成绩。
网页的制作教案8
一、学习内容分析
《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，在属性面板中找到XXXXXX选项，添加背景图片。
添加文字：选中页面1，在工具面板中选择XXXXXX选项。
添加图片：选中页面1，在工具面板中选择XXXXXX选项。
小结：添加文字、图片的一般步骤：选择位置—添加对象。
（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的日常应用，对未来展望，进行情感升华。
【网页的制作教案】相关文章：
《网页的制作》教案01-16
《网页的制作》教案3篇01-17
网页制作07-03
网页制作的心得12-08
网页制作实习日志06-27
网页制作教学方案07-03
网页制作的教学方案07-03
flash网页制作规范07-03
《网页制作》教学课程07-03