网页制作项目教学教案案例（五篇范例）

第一篇：网页制作项目教学教案案例

《网页设计》

【项目名称】：利用表格制作菜谱

课时安排：2 授课日期：2016年6月17日，星期二

【项目目标】：

1、知识目标：

（1）表格的设置。（2）表格的布局。2能力目标：

掌握表格的插入和属性设置，通过任务综合训练学生的动手能力。

3情感目标：

培养学生团结合作，动手动脑能力，体会成功的喜悦。

【重点难点】

1、重点：表格的插入、表格属性设置。

2、难点：同上

【项目准备】

教师准备：图片准备、菜单草稿图准备。学生准备：

1、熟悉表格的制作。

2、熟悉dreamweaver软件操作。

【教学方法】

项目教学

【教学过程】

导入新课：同学们，我们已经认识及熟悉了dreamweaver的界面及相关操作，为了检验大家对知识点的掌握，我们这两节课将进行实训，参照老师的案例，大家团结起来，动手动脑，完成今天老师布置的任务。

『相关知识』

1、网页中表格的插入和设置。

2、网页中文字的插入和设置。

3、网页中图片的插入和设置。

4、利用photoshop把图片素材进行处理。

『项目实施』

一、项目任务：

利用表格制作菜谱。

二、项目要求：

1、按图中样式制作表格

2、插入相应的文字、标题字号放大。

3、插入图片（利用photoshop对图片素材进行休整）。

三、项目实施：

1、制订方案：

学生观看案例后，讨论能否独立完成，或者分小组进行制作。

2、确定方案：

因机房电脑有限，部分同学独立制作，部分同学分小组进行制作。

3、实施方案：

立意、构思、设计等。

『项目评价』

1、成果展示

将个人或小组制作作品利用投影仪播放，大家共同讨论作品，好的制作借鉴经验，有问题的地方吸取教训。

2、过程评价

学生对该项目教学进行自我评价，对完成该项目按照学习态度、项目方案、创新能力、沟通协作、项目作业等几项内容进行自评。

『项目总结』

通过两节课的制作，学生通过合作，相互交流，顺利完成该案例制作，从中也熟悉掌握了相应的知识点。

『项目拓展』

插入更多的表格、可以添加单价、宵夜等、还可设置超级链接。

『项目作业』

设计一个本班的课程表。并发布到校园网相应的栏目板块

【教学后记】

学生通过完成案例制作，有效激发学生学习兴趣及积极性，同时也便于检验学生掌握知识点情况，让学生在做中学，学中乐。

第二篇：网页制作教学案例

《网页制作》教学案例分析

【课时安排】1课时

【教学内容分析】 本节课的主题：让学生认识并利用Dreamweaver软件制作简单的网页，学会建立站点和设计有一定主题思想的主页，本课是用该软件创建环保网站，也就是用所掌握的信息技术知识解决生活中的实际问题，使学生能够学以致用。发挥信息技术学科的优势，以素质教育的新理念，增强学生的动手能力，提高学生的综合素质。

1、以教材为基石，作为构建知识的桥梁，依据《课程标准》，创造性、合理的对教材进行二次开发与重组。如：导入新课时，利用学生对美好事物的向往，激发学生的求知欲和学习兴趣；采用任务驱动教学，增强学生自学能力；对学生的评价方式，采用学生作品展示，是学生学习的一个延续，对学生学习起到一种推进的作用。

2、对教材内容进行引申与组合，让学生利用网络强大的功能搜集资料，分组搜集不同内容，包括图片与文章，采用任务驱动，协作互助的授课模式，发挥教师的主导作用，增强学生的主体地位。通过创建环保网站增强学生的审美意识与想象力，提高学生的综合能力。

【分析教学对象】

1、学生的年龄特点和认知特点：

学生对周围的一切充满了好奇，他们急于表现自己，对于教师布置的任务能够认真对待。对于Dreamweaver的知识掌握的较好，但综合运用能力尚有欠缺；能够上网搜集资料，但速度与技巧还有待提高。本节课给学生提出一个总的任务：创建环保网站，此项任务的设置合理、艺术，对于学生各项能力的提高有很大帮助。

学生创作欲强，因此本节课中，提倡、鼓励独立完成作品，培养学生热爱自然热爱环境的情感，以增强学生的保护地球、保护环境的意识。

2、在学习本节课之前学生应具备的基本知识和技能：

能掌握基本的文字修饰与排版功能并能查找指定地点的文件，会浏览网页与下载资料。

3、学习者对即将学习的内容应该具备的水平：

本课是学生初次认识Dreamweaver并能应用它制作简单的网页，培养学生综合运用知识解决问题的能力，以及各方面素质的一次综合评价。

【教学目标的设计】 1.知识目标：

（1）了解网页的概念；

（2）初识FrontPage2000并学会简单地应用；（3）了解建立网站的一般方法；

（4）学习制作包含文字、图片和声音的网页。2.技能目标：

学生通过探究学习过程中，掌握网站的建立方法与创建简单网页的操作。3.情感目标：

培养学生在学习过程，自主探究能力和分类汇总知识的能力。培养学生热爱环境、保护环境的情感并能号召人们行动起来保护地球、保护我们生存的环境。

【教学重点与难点】

（1）重点：建立网站与在网页中插入文字、图片、设置背景和背景音乐。（2）难点：将网页存在网站内并把涉及到的文件分类汇总在相应的站点文件夹中。

【教学策略设计】

1、根据教材内容和学生的实际情况，本课采用“任务驱动”、“问题──探究”等教学方法，创设一个板报展览的情境（创设情境），以逐个任务和问题驱动学生多动手、多思考、多实践，从而了解和掌握Dreamweaver的基本知识和技能。并以英语的鼓励语言和信息技术专业术语增强学生的学习兴趣。

2、本课传授给学生的学法是“问题驱动下的自主学习──分组协作学习──探究发现学习”。让学生在创建环保网站的过程中，既鼓励个性张扬，又提倡某些问题的分组协作与自主探究，指导学生对图片及文字的来源进行探究发现（从网络中搜集）。建构主义学习理论强调以学生为中心，要求学生由知识的灌输对象转变为信息加工的主体。故此本课教学过程中，以问题驱动，激发求知欲望，让学生带着逐个任务通过探究发现、相互合作、实际操作等方式，自主学习，使学生在完成任务的过程中不知不觉实现知识的传递、迁移和融合。

3、是在网络教室中完成的，利用多媒体局域网络，实现教师演示、个别指导、网上交流、作品提交及作品展示评比。在出现共性问题与个别错误时教师可以利用网络教室软件演示和个别指导，在创作作品的同时，生生可以进行网上交流。体现教师的指导、组织作用，学生主体、探究协作地位。

【教学评价设计】

1.采用小组间竞争机制，比赛哪个小组解决问题或是完成任务的速度快与质量高，增强学生协作互助的意识。

2.最后进行作品展示，评出“速度”奖，“质量”奖，“原创风味”奖等几个奖项，进一步激发学生的学习热情。对自己的作品有一个反思，增加相互学习、相互交流的机会，让学生学会自己梳理知识，增强自学能力。

【教学过程设计】

一、情景导入

先前我们学习了使用搜索引擎查找我们所需要的资料，这些资料是以网页形式存在于网络中，大家想不想拥有自己创建的网页？（激发学生的求知欲）（学生回答：想）

从这节课开始我们就学习制作网页，到底什么是网页呢？

二、问题驱动 任务一：大家打开课本阅读和浏览一些好的网站了解网页概念，网页与网站的关系？看哪个小组能最先解答该问题？

学生阅读课本（3分钟）分小组讨论自己的理解。

小结：

1.网页使用文字、图形、声音影视等多媒体的形式表达信息，使表达的信息更加鲜活；

2.问网站时看到的第一个页面（网页）就称作网站的首页或主页； 3.网页如同大家一样都必须有一个“家”，这个家就是网站； 4.存在网站中的网页之间采用了链接式的方法将网页串接起来。

任务二：在我们了解网页与网站后，会有疑问：使用什么软件制作网页呢？带着这个问题阅读课本，同时跟随课本启动这个软件。看哪个小组成员最先完成？ 学生阅读并实践„„ 小结：

大家会有疑问为什么选择它，还有别的软件吗？有，如FrontPage网页制作软件等，课本中使用了Dream weaver这个软件简单易学，并且窗口与我们使用操作系统windows都是基本一致的。

第三篇：网页制作电子教案项目备课

项目二 网页制作基础

【项目描述】

中文版Dreamweaver8是目前比较流行的网页制作工具。本项目主要介绍中文版Dreamweaver8的工作窗口及使用方法，以及HTML的基本结构。【教学目标】

1.安装Dreamweaver8，介绍其工作窗口及使用方法。

2.学会定义本地站点，并讲解规划站点结构的原则，在站点中搭建模拟结构。3.Html代码的基本结构。【项目分配】

任务一 认识Dreamweaver8。（1课时）

任务二创建本地站点，搭建模拟结构。（2课时）

任务三html代码的基本结构。（2课时）

任务一：认识Dreamweaver8（1课时）

一、教材分析：

中文版dreamweaver8是目前比较流行的网页制作工具。主要介绍中文版dreamweaver8的工作窗口以及其使用方法

二、学情分析：

本班学生都是刚接触到dreamweaver8，对于本节课知识兴趣浓厚，学习积极性高。

三、教学目标：

知识目标：初步了解中文版dreamweaver8的工作窗口、工具栏、文档窗口、浮动面板、菜单和辅助设计工具。

情感目标：通过本节课的学习使学生掌握知识的同时，提高他们的自学能力。

能力目标：通过本节课的学习培养学生动手操作能力。

四、教学重点

掌握中文版dreamweaver8的8的工作窗口、工具栏、文档窗口、浮动面板、菜单和辅助设计工具、属性面板和浮动面板显示及使用。

五、教学难点

快捷工具栏的显示及组成、使用，浮动面板的显示与隐藏菜单和辅助设计工具的作用 教学方法与过程：

（一）导入新课：提问学生对网站的了解，internet网与我们生活的联系 及重要性。引发学生思考，带着颖问进入教学课题。

（二）揭示课题：网站大部分都是由Dreamweaver8 制作出来的这节课我们就来“认识Dreamweaver8”

（三）教师演示：

1.启动Dreamweaver8从开始菜单启动，出现工作区设置对话框，选择设计器工作区。设计 器是标准的工作区。

2.Dreamweaver8工作界面认识Dreamweaver8工作界面，对掌握和提高制作效率是关键的一步。（1）标题栏：左侧有网页标题，所在位置及文件名称，右侧有最小化，最大化

和关闭。（2）菜单栏：有“文件”、“编辑”、“查看”、“插入”、“修改”、“文本”、“命令”、“站点”、“窗口”、“帮助”。（3）快捷工具栏：选择“查看”中的“工具栏”，勾选“插入”、“文档”、“标准”三项，完整的快捷工具栏就显示出来。

3.网页编辑窗口快捷工具栏下面的区域就是“网页编辑区域”。在启动Dreamweaver8时将显示一个“起始页”，包括“打开最近项目”、“创建新项目”、“从范例创建”三个方便实用的项目。可以勾选“不再显示此对话框”使它隐藏。用户可以在文档区域中进行输入文字，插入表格和编辑图片等操作。

4.属性面板网页设计中的对象都有各自的属性，属性面板的设置项目会根据对象不同而变化。

5.浮动面板根据面板的特性命名，浮动于编辑窗口之外。在窗口菜单中单击不同的命令可以打开不同的面板。在“窗口”中选择“排列面板”能够整齐地摆放在屏幕上，按F4可以隐藏和显示面板。

任务二创建本地站点，搭建模拟结构

（2课时）

一、教材分析：

掌握站点的创建方法，使用向导和高级模式设置本站点。学会建 立站点文件和文件 夹结构及管理本地站点

二、学情分析：

本班学生都是刚接触到dreamweaver8，在学习站点的建立所以能够提高学生学习兴 趣，充分发挥学生学习的积极性。

三、教学目标：

知识目标：掌握站点的创建方法，使用向导和高级模式设置本站点。学会建立站点文件和文件夹结构及管理本地站点

情感目标：通过本节课的学习使学生掌握知识的同时，提高他们的学习兴趣。

能力目标：通过本节课的学习培养学生动手操作能力。

四、教学重点：站点的创建方法、建立站点文件和文件夹结构

五、教学难点：站点的创建方法、管理本地站点

六、教学方法与过程

多媒体演示，教师讲解：

（一）创建站点

要制作一个能够被公众浏览的网站，首先需要在本地磁盘上制作这个网站，然后把这个网站上传到Internet的Web服务器上，放置在本地磁盘上的网站被称为本地站点，处于Internet上的Web服务器里的网站被称为远程站点。Dreamweaver8提供了对本地站点和远程站点强大的管理功能。

Dreamweaver8可以有效地建立并管理多个站点，搭建站点有两种方法：一是使用向导完成；二是利用高级设定完成。

（二）向导搭建站点

1.在“窗口”菜单中的“文件”面板中选择“管理站点”，2.选择“新建”/“站点”打开对话框，有“基本”和“高级”两个标签，选择“基本”。

3.在站点定义对话框中根据向导一步步操作，“输入网站名称”“是否使作服务器技术”、“选择编辑方式（编辑网页的本地副本，完成后上传。或使用本地网络直接在服务器上进行编辑。）”、选“存储位置”、“配置远程站点（选无，网站建设完成后再FTP上传。）”

完成设置，在“文件”面板中显示出刚建立的站点。

（四）管理本地站点

通常，dreamweaver8站点管理器都要对多个网站进行管理，这就需要专门的工具来完成站点的切换，添加、删除等操作，打开“文件”面板，在下拉菜单中选“管理站点”，可打开多站点管理面板。

用dreamweaver8编辑网页或进行网站管理时，每次只能操作一个站点，可选其它站点切换操作编辑。

在管理站点中，可复制站点，删除站点（文件保存在硬盘上不会被删），可导入，导出（导出为一个XML文件。）

任务三html代码的基本结构

（2课时）

一、【教学目标】

知识目标：介绍html网页的编写方法，介绍网页命名规则和html代码的基本结构。技能目标：掌握html代码的基本结构后，能在Dreamweaver8的“代码”面板，建立第一个网页页面。

情感目标：通过本次学习后，能培养学生对网页制作软件的进一步了解，增强学生学习网页设计的兴趣和欲望，熟知网页制作软件给我们设计网页带来的便捷。

二、【教学重点】

1．Html的基本概念。2．html网页的编写方法。3.建立第一个网页页面。

三、【教学难点】

html网页的编写方法。

四、【教学过程】

（一）明确项目任务（包括了导入项目任务和布置项目任务）

上节课，我们学习了创建本地站点、搭建模拟结构，我们先一起在Dreamweaver中搭建起我们的站点结构。结构搭建好了，我们今天就一起来做网页吧！

（二）制定项目实施计划（项目实施）

1．教师讲解示范：在桌面上展示一张简单网页，查看其源代码，和学生一起来分析，看看能发现什么问题。引出我们html代码的写法。详细介绍网页命名规则和html代码编写规则。

2．学生活动：学生小组讨论，分析源代码的特点。教师做好对学生的辅导检查，对做的好的学生给予鼓励。

3．教师讲解示范：制作一张简单网页。在Dreamweaver中创建一张网页：“文件”---“新建”--“html”，在“代码”面板逐个讲解作用功能，完成第一张网页。

4．学生活动：请一个小组上台演示，完成第一张网页,保存网页，在浏览器预览网页。教师做好对学生的辅导检查，对做的好的学生给予鼓励。

5．教师讲解示范：为网页添加标题。观察浏览器中显示出标题，引出中的