教案精选：高中信息技术《网页制作》教学设计

《6.2 网页制作》--好客青岛欢迎您1教学内容分析本节内容是浙教版《信息技术基础》第6 章第2 节内容，是本章的重点。

本章教学任务完成与否，要看学生能否通过小组合作的学习方式来完成一个主题网页的设计和制作。

通过本节内容的学习，学生将切实掌握网页的设计与制作方法，体验小组合作学习的乐趣和积极作用，同时，也是一次美育与德育（发现家乡的美，热爱家乡的美，宣传家乡的美）的过程。

2教学目标①知识与技能：了解网页策划和设计的基本过程。

②过程与方法：学会设计和制作简单网页。

③情感态度与价值观：体验小组合作学习的乐趣，感受家乡人文的魅力。

3教学重点图文混排和设置超链接、网页布局及网页元素的科学合理运用4教学难点图文混排和设置超链接5教学课时安排本小节理论上分4 课时进行。

1.①第1 课时“网站的策划和构思”（课余完成）：学生完成分工，明确本组及个人任务，初步完成网站的总体构思，并给出了手绘版的网页设计图。

②第2 课时“素材的收集与整理”（课余完成）：学生查找和收集素材，进行了初步处理。

③第3 课时，学生了解FrontPage2003 的基本操作方法，初步掌握了网页制作的简单技巧。

④第4 课时，学生分组完成主题明确的网页的制作。

（本次授课内容）6教学过程 1 学时教学活动1【活动】课前准备1. 将收集整理的素材发送到学生电脑。

2. 将学案发到学生手中。

3. 每组设定一个共享文件夹。

要求负责本组的主页制作的同学就坐于有共享文件夹的电脑前。

2【导入】课程导入好客山东视频播放网络时代如何更好的宣传自己美丽的家乡？从而导出本节课的主题-网页制作！3 玩游戏，识布局1、通过拼图游戏，让学生认识到网页布局的重要性。

盖楼——设计图纸网页——布局图2、了解常见的网页布局样式：封面型、国字型、拐角型、标题正文型等4【练习】活动一：制作简单的网页。

要求：1. 每组须完成：1 个主页,至少1 个子网页。

并在学案上画出网页布局2. 主页要有链接到子网页的文字。

高中信息技术《网页制作》教案课程概述本课程是高中信息技术课程中的一门重要课程，主要介绍网页制作的相关知识。

通过学习本课程，学生可以掌握网页制作的基本概念、HTML语言的基本语法、CSS样式表的应用等内容，从而能够独立制作简单的网页。

教学目标1.理解网页制作的基本概念和相关术语；2.掌握HTML语言的基本语法，能够编写简单的HTML网页；3.掌握CSS样式表的应用，能够为网页添加样式；4.能够使用Dreamweaver等工具制作简单的网页；5.具备较强的团队协作、沟通、解决问题的能力。

教学内容第一章网页制作基础1.网页制作的概念和历史；2.网页标准和规范；3.常用网页制作工具介绍。

第二章 HTML语言1.HTML语言的基本语法；2.HTML文档的基本结构；3.HTML文本标记；4.HTML图像标记；5.HTML超链接标记。

第三章 CSS样式表1.CSS样式表的基本语法；2.CSS的基本选择器；3.CSS的颜色和背景；4.CSS的文本和字体；5.CSS的盒子模型。

第四章网页制作实践1.使用Dreamweaver制作简单的网页；2.制作个人主页；3.制作校园网站。

教学方法1.授课讲解：讲解基本概念和相关知识点，帮助学生形成完整的知识体系；2.实验训练：通过实验帮助学生掌握具体的技能和方法；3.课堂互动：通过各种活动形式，调动学生的兴趣和积极性；4.作业实践：通过作业帮助学生巩固所学知识和技能。

评价方式1.学生平时成绩（课堂表现、作业完成情况、实验成绩）占30%；2.学生期末考试占70%。

教学进度章节内容讲解时间第一章网页制作基础1课时第二章HTML语言4课时第三章CSS样式表4课时第四章网页制作实践6课时参考资料1.《网页制作入门教程》；2.《HTML与CSS基础教程》；3.《Dreamweaver教程》；4.网上相关教程和视频。

高中信息技术课程教案网页设计与制作高中信息技术课程教案：网页设计与制作第一节：前言信息技术已经成为当今社会中不可或缺的一部分。

为了帮助学生掌握网页设计与制作的基本技能，本教案将介绍一套完整而系统的教学方案。

通过本课程的学习，学生将能够理解网页设计的原理，掌握网页制作的基本技术，并能够独立设计并制作符合规范的网页。

第二节：课程目标与要求2.1 课程目标本课程的目标是帮助学生掌握网页设计的基本原理和制作技术，具备设计和制作一个简单网页的能力。

通过课程学习，学生将能够了解网页设计与制作的流程，掌握常用的网页设计软件和HTML/CSS等网页制作语言的基本知识，熟练运用所学知识设计与制作符合需求的网页。

2.2 课程要求学生需要具备一定的计算机基础知识和操作技能，了解常用的操作系统和办公软件的使用方法。

学生应具备良好的团队合作能力和问题解决能力，能够主动思考和学习。

第三节：教学计划3.1 教学内容本课程将包括以下几个方面的内容：3.1.1 网页设计与用户体验- 了解网页设计的基本原则- 学习用户体验设计的基本概念- 掌握网页设计中常用的配色、布局和排版技巧3.1.2 网页制作技术- 学习HTML语言的基本结构和标签- 掌握CSS样式表的基本使用方法- 学习JavaScript脚本语言的基础知识3.1.3 网页设计软件的使用- 了解常用的网页设计软件，如Dreamweaver、Photoshop等- 学习使用设计软件进行网页布局和编辑3.2 教学步骤为了确保教学的系统性和连贯性，本课程将按以下步骤进行：3.2.1 理论学习- 通过课堂讲解、案例分析等方式，向学生介绍网页设计与制作的基本理论知识。

- 引导学生思考网页设计的目的和重要性，激发学生的学习兴趣。

3.2.2 实践操作- 学生将进行实践操作，使用网页设计软件和编程语言进行网页设计与制作。

- 指导学生按照设计思路和流程进行网页设计，培养学生的创造力和实践能力。

《网页制作》教学设计（5篇）作为一名优秀的教导工，通常会被要求编写教学设计，借助教学设计可以提高教学质量，收到预期的教学效果。

则写教学设计须要留意哪些问题呢？下面是我收拾的《网页制作》教学设计〔精选5篇〕，欢送阅读与收藏。

《网页制作》教学设计1一、教材或教学内容分析本章内容在本教材中的位置处于第五章,是在文字处理(Word2000)和网络根底及因特网应用两章之后。

学生所学的文字处理软件Word和将要学习的网页制作软件Frontpage同是Microsoft公司的产品,在软件的使用上有无数的共通之处,所以在学习frontpage的时候,无数内容可以让学生自学,而不必面面俱到地在课上讲授。

而第四章网络根底及因特网的应用又为学生对网页的理解奠定了根底,学生对网页中的根本元素——文字、图片、动画、声音等都有所了解,而网页的制作就是将这些元素重新组合到网页上,学生要学的就是这种组合的办法。

所以说,虽然大多数学生以前都未接触过网页的制作,但有了以上这些根底,学起来就轻巧多了。

本章内容根据学生已有的根底,我对教学内容分了一下类,也为教学的组织工作打下一点根底。

本章内容主要由网页根底学问、网站的建设和管理、网页的制作、创立超链接、图片的处理、网页框架。

重点是网页的制作和创立超链接,学会了这些就可以开场容易的网页制作了。

难点是网页框架,这局部互相之间关系比拟冗杂,必要时,教师在对各组个别辅导时,可以赋予分离解说。

这个分类可以为组长支配各个组员的任务提供参考,使分工越发合理。

二、教学对象的分析信息技术课虽然已经成为初中的必修科目,但是城乡学生之间控制状况的差别却相当大,条件好一点的初中学生不仅已经娴熟控制了课本上的内容,还对一些常用软件有所了解;而差一点的可以说是从高中开场才正式接触到信息技术学问的学习,他们须要多锻炼、多指导,所以配合学习对学生的学习帮忙很大。

三、教学策略的挑选及媒体的使用在教学策略的挑选上,我使用的是任务驱动和配合学习相结合的办法。

教案精选：高中信息技术《网页制作》教学设计教案精选：高中信息技术《网页制作》教学设计1、任务驱动本单元的学习通过完成网页作品来实现。

班级网页的信息来自学生生活的班集体，每个热爱班级、关心班级的同学都能产生一种急切地完成任务的动机，而完成任务又能给他们带来成就感和满足感。

这种心理上的内在动力驱使学生自觉地把计算机作为一种信息处理的工具来使用，由“要我学”变成“我要学”。

在教学中，教师通过创设情境，激发学生的创作欲望，把总任务划分到每节课，按照学生的制作进度来布置子任务，使学生在教师的引导下逐步达成教学目标。

2、小组协作制作班级网页是个大任务，具有一定的开放性和综合性。

因此采取小组协作学习的方式是非常必要的。

小组成员的知识程度、学习能力和思维方式都有差异，可以通过讨论、交流与合作，取长补短、拓展思路。

每个学习小组由6-8人组成，每人负责制作1-2个页面，组合成一份班级网页。

最后，各小组作品集中评比，选出优秀作品，上传到校园网上公布。

基于资源要培养学生的信息能力，就必须为他们提供大量处理信息的机会。

基于资源的学习就是让学生接触到丰富的学习资源，为学生的知识构建提供支撑。

笔者采用ASP技术自主开发了一个信息技术学习网站，该网站具有强大的交互功能，不仅能为学生创设丰富的资源环境，还为每个注册用户提供个人空间，支持作品的上传或下载，并开辟了学生论坛和教师答疑，供师生们交流和讨论。

网站的使用不仅方便学生的学，还能改善教师的教，也为师生间的交流提供了虚拟空间。

三、学习目标本单元的认知、情感和动作技能三种目标分述如下：认知目标1、能简要陈述FrontPage2000主要功能，熟悉其操作界面2、能用自己的话解释下列术语：HTML，URL，网页，主页，超链接3、能主动获取、收集班级信息，并加以分类和整理4、能客观评价网页的内容和风格，具备一定的审美能力情感目标1、具有集体荣誉感，愿意为班级的网页建设出谋划策2、具有乐于助人、团结协作的精神3、能尊重他人的劳动成果，有保护知识产权的意识动作技能目标1、能熟练地建立、打开、保存、浏览网页文件2、能按照需要建立框架网页，设置各框架中的初始网页3、能在网页中熟练地插入文字、图片、动画、水平线4、能使用简单的表格编排网页内容，使网页的结构清晰，内容整齐5、能选择合适的网页背景图案和背景音乐6、能根据实际需要使用不同的超链接，合理地组织网页7、能在网页中插入悬停按钮、滚动字幕和横幅广告管理器，使网页具有动感8、能够插入简单的表单，使网页具有初步的动态交互功能四、学习资源设计在基于资源的学习中，教师的任务就是收集、设计和管理学习资源，引导和帮助学生自主地查找并获得学习指导，通过师生间、生生间的交流与合作，完成知识的建构和技能的提高。

一、教学目标1、知道站点、主页的概念，能在指定位置建立只有一个网页的站点；2、认识FRONT的界面；3、掌握在主页中插入文字、图片、水平线；4、掌握页面文件与图片的保存。

二、教学重点1、能在指定位置建立只有一个网页的站点（难点）2、能在页面中插入文字、图片、水平线3、掌握页面文件与图片的保存（难点）三、学情分析四、教学方法在教学中，一方面采用比较教学的方法，促进学生知识的迁移；另一方面，提供学生一个导学课件，让学生根据这个网络环境下的课件自己探索学习，以满足不同层次学生的需求。

五、教学过程设计教师活动：1、引入课题：（激发兴趣，活跃气氛）同学们喜不喜欢上网？经常上新浪、西祠胡同等，有没有同学知道新浪、西祠胡同称做什么？（网站）浏览新浪网站，浏览的第一个页面称为什么？（主页）我们还可以浏览其它的页面，点击超链接浏览，当鼠标变成手指的形状时有超链接。

问题1：网站是不是就是网页？用自己的语言描述一下网站的概念（网站包含多个网页，通过超链接把不同的页面链接起来）问题2：网页是不是就是主页？（第一个页面称为主页，网站设计者可以确定哪一个是主页，主页的文件名一般为：index.htm,主页也是网页）设计网站一般必须经过两个步骤，首先是在计算机里做好，然后发布在internet上，让所有的人访问浏览。

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

先来研究一下没有发布的网站，打开教师做的网站问：同学们看到了什么？（文件夹）总结：可以这样理解网站：在资源管理器里，网站表现为一个文件夹，里面存放的是所有与网站相关的文件。

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

请学生浏览教师课件，了解学习任务2、新建站点FP的启动问：与word比较，有什么不同？总结：预览窗口：浏览器中出现的效果，与PowerPoint中的“放映幻灯片”类似。

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

4.3 网页的制作， 课题名称 用Frontpage 制作网页练习课 科目 信息技术 授课学校 宁阳一中班级26教师徐丽娜壱、教材内容分析： 《网页的制作》是粤教版网络技术应用第四章第三节的内容，涵盖了网页制作的基本过程；网页制作对提高学生的信息综合处理能力非常重要，是对必修部分信息的加工与表达内容的检验；网页制作也给学生提供了展示个性、自主、协作的机会，促使他们合作、主动、创造性学习。

二、学生特征分析本课的授课对象是高二年级学生，他们求知欲强，思维活跃，视野开阔，富有个性，他们的感知能力和思考能力较强，通过前一阶段的学习已掌握了网络技术知识和技能，他们渴望学到更多实用而有趣的网络技术知识。

FrontPage 是一个所见即所得的网页制作工具，易学易用，与Word 文字处理软件类似这种软件有利于树立学生制作网站的信心，对提高学生的信息综合处理能力作用较大。

同时又注重学生情感态度、价值观，在练习中体会信息技术带来的有利影响，提升信息素养。

三、教学目标（知识，技能，情感态度、价值观） 1、知识与技能：学习并掌握利用 frontpage2003 软件来制作网页的常用操作和技巧，能举一反三、融会贯通。

2、过程与方法：通过对调查网站的操作，网页形式答题的提交体会信息技术的广泛使用；通过对练习的操作，提高动手能力及小组合作能力。

3、情感态度与价值观：通过小组协作和问题研究活动，培养学生协作的意识和团队探索的精神，从而激 发创作热情。

四、教学重点与难点教学重点： 利用 FrontPage 新建网页并编辑；使用表格进行网页的页面布局；超链接有关内容及组件属性。

教学难点： 书签、热点超链接五、教学策略选择与设计1、采用情境教学的方式促进学生积极参与多媒体所创设情境下的建构知识活动，建立一定的探索情境，让学生观摩、思考、讨论，培养学生的观察、发现及思考的能力，激发学习兴趣。

2. 采用讲授、演示、问题启发式、任务驱动的方式，将教学重点、难点逐个攻破，并运用分层递进教学 法促进各层学生不断进步，开发学生潜能、发展个性、关注每位学生，全面提高学生的信息素养。

《网页制作》教案第一章：网页制作基础知识1.1 教学目标让学生了解网页制作的基本概念让学生掌握HTML和CSS的基本语法让学生了解网页制作的基本流程1.2 教学内容网页制作基本概念介绍HTML和CSS的基本语法介绍网页制作的基本流程介绍1.3 教学方法讲授法：讲解网页制作的基本概念、HTML和CSS的基本语法演示法：演示网页制作的基本流程1.4 教学评估课堂练习：让学生编写简单的HTML和CSS代码课后作业：让学生完成一个简单的网页制作任务第二章：HTML基本标签2.1 教学目标让学生掌握HTML的基本标签及其使用方法2.2 教学内容文本标签：`<p>`、`<h1>` ~ `<h6>`、`<br>`等图片标签：`<img>`标签：`<a>`列表标签：`<ul>`、`<ol>`、`<li>`、`<dl>`、`<dt>`、`<dd>`2.3 教学方法讲授法：讲解各个标签的作用和基本属性练习法：让学生通过练习掌握各个标签的使用方法2.4 教学评估课堂练习：让学生编写含有文本、图片、和列表的HTML代码第三章：CSS样式设计3.1 教学目标让学生掌握CSS的基本语法和使用方法让学生了解常用的CSS选择器和属性3.2 教学内容CSS基本语法：选择器、属性、值、注释内联样式：`style`属性内部样式表：`<style>`标签外部样式表：`.css`文件常用的CSS选择器和属性：`id`、`class`、`tag`、`attribute`等3.3 教学方法讲授法：讲解CSS的基本语法和常用选择器、属性练习法：让学生通过练习掌握内联样式、内部样式表和外部样式表的使用方法3.4 教学评估课堂练习：让学生编写含有内联样式、内部样式表和外部样式表的HTML代码第四章：布局与设计4.1 教学目标让学生掌握HTML和CSS的布局与设计方法4.2 教学内容盒模型：`margin`、`padding`、`border`、`width`、`height`等浮动布局：`float`、`clear`等定位：`position`、`top`、`right`、`bottom`、`left`等响应式设计：媒体查询、`max-width`、`min-width`等4.3 教学方法讲授法：讲解盒模型、浮动布局、定位和响应式设计的基本概念和用法练习法：让学生通过练习掌握各种布局与设计方法4.4 教学评估课堂练习：让学生编写一个具有多种布局与设计效果的网页代码第五章：网页特效与交互5.1 教学目标让学生掌握HTML和CSS实现简单网页特效与交互的方法5.2 教学内容鼠标悬停效果：`:hover`伪类动画与过渡：`animation`、`transition`等事件处理：`onclick`、`onmouseover`、`onmouseout`等JavaScript基础：变量、函数、条件语句、循环语句等5.3 教学方法讲授法：讲解鼠标悬停效果、动画与过渡、事件处理和JavaScript基础练习法：让学生通过练习掌握各种网页特效与交互的实现方法5.4 教学评估课堂练习：让学生编写一个具有鼠标悬停效果、动画与过渡、事件处理和简单交互的网页代码第六章：表单与数据验证6.1 教学目标让学生掌握HTML表单的基本用法让学生了解CSS在表单设计中的应用让学生学会使用JavaScript进行数据验证6.2 教学内容表单标签：`<form>`、`<input>`、`<textarea>`、`<select>`等表单属性：`type`、`name`、`value`、`placeholder`等CSS在表单设计中的应用：`label`、`fieldset`、`legend`等数据验证方法：正则表达式、JavaScript函数6.3 教学方法讲授法：讲解表单标签、属性和CSS在表单设计中的应用演示法：演示数据验证的实现方法练习法：让学生通过练习掌握表单和数据验证的实现方法6.4 教学评估课堂练习：让学生编写一个具有表单和数据验证功能的网页代码第七章：多媒体与嵌入式内容让学生掌握HTML中多媒体和嵌入式内容的基本用法7.2 教学内容音频和视频标签：`<audio>`、`<video>`图片标签：`<img>`嵌入式内容：`<iframe>`、`<embed>`、`<object>`多媒体属性：`src`、`controls`、`autoplay`、`loop`等响应式多媒体：`max-width`、`height`、`srcset`等7.3 教学方法讲授法：讲解多媒体和嵌入式内容的标签和属性练习法：让学生通过练习掌握多媒体和嵌入式内容的实现方法7.4 教学评估课堂练习：让学生编写一个含有音频、视频、图片和嵌入式内容的网页代码第八章：JavaScript进阶8.1 教学目标让学生掌握JavaScript的基本语法和高级特性让学生学会使用JavaScript进行复杂交互设计8.2 教学内容基本语法：变量、函数、条件语句、循环语句等对象和数组：`document`、`window`、`Array`、`Object`等事件处理：`addEventListener`、`attachEvent`等高级特性：闭包、原型链、异步编程（Promise、async/awt）等讲授法：讲解JavaScript的基本语法和高级特性练习法：让学生通过练习掌握JavaScript编程方法8.4 教学评估课堂练习：让学生编写一个利用JavaScript实现复杂交互功能的网页代码第九章：网页优化与性能提升9.1 教学目标让学生了解网页优化的重要性让学生掌握网页优化的方法和技巧9.2 教学内容代码优化：减少代码体积、提高代码效率资源优化：图片压缩、雪碧图、CSS Sprites、CDN等性能检测工具：浏览器开发者工具、PageSpeed Insights、Lighthouse等响应式设计：媒体查询、`max-width`、`min-width`等9.3 教学方法讲授法：讲解网页优化方法和技巧实践法：让学生使用性能检测工具进行实际网页性能分析9.4 教学评估课后作业：让学生分析并优化一个实际存在的网页性能问题第十章：网页制作项目实战10.1 教学目标让学生学会将所学知识应用于实际项目培养学生独立完成网页制作的能力10.2 教学内容项目选题：选择一个实际网页制作项目项目分析：分析项目需求、功能模块、技术选型等项目实施：按照分析结果进行网页制作项目评价：评价项目的完成情况、性能、可维护性等10.3 教学方法讲授法：讲解项目选题、分析和评价的方法实践法：让学生独立完成实际项目10.4 教学评估课后作业：让学生提交完成的实际项目并进行评价重点和难点解析1. 第五章：网页特效与交互2. 第六章：表单与数据验证3. 第八章：JavaScript进阶4. 第九章：网页优化与性能提升5. 第十章：网页制作项目实战全文总结和概括：本文针对《网页制作》教案中的五个章节进行了重点和难点的解析。

高中信息技术新课程标准教材信息技术( 2019 — 2020学年度第二学期 )学校：年级：任课教师：信息技术教案 / 高中信息技术编订：XX文讯教育机构网页制作教材简介:本教材主要用途为学习本知识能够调动学生的激情与兴趣，对相关教师和学生创造力的开发有促进作用，对教学效果提升有着积极的影响，本教学设计资料适用于高中信息技术科目, 学习后学生能得到全面的发展和提高。

本内容是按照教材的内容进行的编写，可以放心修改调整或直接进行教学使用。

（一）教学要求1、掌握网站构思的一般方法。

2、学会收集、整理素材的基本方法。

3、掌握网页制作的基本方法。

4、掌握链接网页的各种方法。

（二）教学设计建议本节安排五个课时，是本章的重点，本章教学任务完成与否，要看学生能否通过小组合作的学习方式来完成一个主题网站的设计和制作。

本节教材中安排了三个实践探究活动，包括一个讨论交流活动和两个实践体验活动，并且给出了比较详细的操作示例。

教材通过让同学们组织一个小组来共同设计、制作一个有关世界遗产的主题网站，学习网站的构思、制作以及素材收集、整理的基本方法。

我国是一个有五千年历史的文明古国，并且有九百六十万平方公里的大好河山，同学们的家乡总有一些值得纪念的人文历史和自然风光，一方面以这个主题作为网站的内容，大家比较有亲切感也容易找到素材，另一方面，通过网站制作的过程，也是一次爱国主义教育过程。

当然，教师也可以结合学校所在地的具体情况，设计制作一些更有纪念意义的主题网站，也可以结合学校近期的工作重点，设计制作一些网站。

教师可以自行决定，只要是学生感兴趣的，健康的内容都可以作为网站的主题。

设计、制作一个网站仅靠一个人的力量很难在短时间内完成，需要几个人合作完成。

在本节中，要求通过小组合作学习的方式，在小组中既有分工又有合作，在完成一个网站的规划、制作的同时，让学生充分体验小组合作学习的乐趣、积极作用和深远的影响。

在本节的教学中，可将学生分成若干个小组，每个小组五至六人，小组中的同学相互协作，共同完成一个网站的制作。