2014高中信息技术 常见网页制作工具教案 新人教版5篇

第一篇：2014高中信息技术 常见网页制作工具教案 新人教版

2014高中信息技术 常见网页制作工具教案 新人教版

古人曰：工欲善其事，必先利其器。制作网页第一件事就是选定一种网页制作软件。从原理上来讲，用Notepad或者Netscape自带的网页编辑器就可以制作。但选择一个好的编辑器会令你事半功倍！

下面介绍目前几种主流工具

1.Dreameaver 4(Dreamweaver UltraDev 4)

Dreamweaver是Web站点开发的中心环节。完全用户自定义控制，可以迅速完成页面以及站点的设计。Roundtrip HTML/Javascript行为库以及可视化编辑环境大量减少了代码的编写，同时亦保证了其专业性和兼容性。通过 Dreamweaver与其他群组产品的配合使用以及众多第三方支持可轻松完成动态发布电子商务网站的构建。到目前为止，全世界范围超过60%的专业网页设计师都在使用Dreamweaver。

2.Adobe pagemill3.0

它功能不算强大，但使用起来很方便，适合初学者制作不太复杂的主页。

其特色是有一个剪贴板，可以将任意多的文本，图形，表格拖放到里面，需要时再打开。用pagemill2.0创立多帧页十分方便，可以同时编辑各帧中的内容。

Adobe pagemill允许在HTML代码上编写和修改。

3.Netobjects Fusion2.0

它是一个与众不同的Web制作工具。以往需要由专业程序员和美工人员共同完成的复杂主页，现在你也可以轻松实现。

但它把设计者限定在其特有的工作方式中，制作时你无法编辑HTML，换言之，离开它，你将很难再创立一个相同的站点。如果一开始制作主页你就选择Netobjects，那么你很可能得永远使用它。

4.Microsoft FrontPage 2000，2002(xp)

使用FrontPage2000创立主页，你能真正体会到“功能强大，简单易用”的含义。

页面制作由FrontPage中的Editor完成，其工作窗口由3个标签页组成，分别是WYSIWYG的编辑页，HTML代码编辑页，预览页。站点管理功能由Explorer完成是2000的优势所在。预置了50种主题(Themes)，便于设计者创立页面风格一致的站点。

6.Homesite 3.0

它属于基于代码的Web制作工具，功能上给代码编辑者提供了极大的方便。

Homesite工作界面繁简由人，根据习惯，可以将其设置成像Notepad一样简单的编辑窗口，也可以在复杂的界面下工作。Homesite具有良好的站点管理功能，链接确认向导可以 1 检查一个或多个文档的链接状况。

第二篇：高中信息技术《网页制作初步》教案

高中信息技术《网页制作初步》教案

www.xiexiebang.com 教材分析

教学内容：高中信息技术第五章第二节《网页的制作》。

教学重点：网页文字处理、插入图片、动画、水平线以及设置背景的方法。

教学难点：通过网站自主学习，让学生自己建立网页。

学生分析

本课对象是高一学生，学生通过前面woRD和INTERNET的学习，对网页内容编辑、结构和效果等设计有了一定的感性认识。

教学目标

熟悉网页中的各种元素及其制作方法，初步了解网页制作过程，培养学生的自学能力和创新探索精神。

教学环境

设计“网页制作”网站，是学生通过网站在教师的引导下，实现自主学习，完成网站中每一知识点的学习，教师借助投影仪及时反馈学生在完成目标时出现的问题。

教学方法

通过网站引导学生自主学习，解决教师提出的实际问题。

教学过程

（引入）边讲边演示

展示一个简单的网页

你现在正在上网，一定去了不少站点吧！这些站点的页面都设计得非常精美，让你在浏览信息的同时，还可以得到美的享受。这么吸引人的页面，是怎么制作出来的呢？你想不想也做一个精美的个人主页呢？如果你的回答是肯定的，那我们就一起学一下FrontPage的使用。FrontPage是优秀的专业化网页设计软件之一，使用FrontPage你只要几分钟就可以建立一个自己的网页，这可是一件令人激动的事哟！

（新课）教师引导学生根据网站自学，完成教师提出具体操作要求

模块

一、教师引导学生自学“网页制作知识准备”，提出问题：

1、启动FRoNTPAGE？

2、FRoNTPAGE的三种显示模式？

3、在e:下新建空站点，取名为abc站点文件夹。

模块

二、教师引导学生自学“新建网页”，提出要求：

1、新建普通网页。

4、打开e:网站制作素材可爱的家乡高邮.htm网页。

模块

三、教师引导学生自学“文字编辑”，提出要求：

1、把高邮.htm网页中的标题设置为“5号”、绿色，“加粗”字体，“居中”对齐。

2、把高邮.htm网页中的正文字体设置为“3号”，绿色。

模块

四、教师引导学生自学“图片动画”，提出要求：

1、在网页中插入e:网站制作素材高邮风景高邮湖.jpg

2、在网页中插入e:网站制作素材高邮风景welcome.gif

模块

五、教师引导学生自学“水平线”，提出要求：

1、在网页中标题与正文之间插入水平线。

2、水平线宽度设置为100%，高度为3像素，水平居中，颜色改为绿色。

模块

六、教师引导学生自学“设置背景”，提出要求：

设置网页背景为e:网页制作网站制作素材高邮风景背景2文件

模块

七、教师引导学生自学“保存”，提出要求：

将当前网页另存到e:abc高邮.htm，并将图片保存到images文件夹中。

模块

七、教师引导学生自学“小结”，提出要求把学生分为两组，一组练习制作个人网页，一组练习制作班级网页。制作素材在e:网站制作素材练习素材中。对学生作品点评，小结。www.xiexiebang.com

第三篇：《网页制作工具》参考教案

《网页制作工具》参考教案 教学主题

网页制作工具（1）（Frontpage和Dreamweaver的使用）

教案设计

赵志

教案编号

适用年级

高二年级

教学课时

1课时

教材分析

概述：通过网页设计，了解并熟悉网页设计软件的基本使用方法，掌握常用工具的使用方法 重点：初步了解网页设计软件Dreamweaver中层和时间轴的设置，体会动态网页设计 难点：层和时间轴的设置

学习目标

1、掌握网页制作软件Dreamweaver的基本使用方法

2、学会设计和制作简单的动态网页

所需资源和环境

网络资源

使用搜索引擎查找网页设计相关的信息（包括图片、文字、视频等）

常规资源

1、浙江教育出版社2004版《信息技术基础》第五章5.3.1节配套光盘

2、教材配套教师用书

3、小组合作学习任务单

教学支撑环境

计算机网络教室、所有计算机能够上网、多媒体网络教室软件或者投影仪

教学设计

教学引导问题设计

问题

目的你知道网页上面文字的滚动效果是怎么制作出来的吗？

激发学生的好奇心

你知道如何让网页中的一幅图片动起来？

引导学生设计动态网页中图片运动的效果

你知道有哪些网页动态效果？

为学生的课后探究学习做铺垫

你知道用Dreamweaver软件如何预览你设计的动态网页？

体会动态网页的效果，进一步完善网页设计

教学过程设计

教师活动

学生活动

1、新课导入

展示全国中小学电脑制作活动中的优秀的网页制作《母亲河》，激发学生制作网页的兴趣。“工欲善其事，必先利其器”从而引出制作网页需要掌握必要的制作工具。只有掌握了必要的网页制作工具软件才能做出动感十足、耳目一新、独具体色的网页。

2、教学内容

随着因特网技术的不断发展，网页制作工具越来越多，选择一种得心应手的工具软件，能够收到事半功倍的效果。

⑴设问：面对那么诱人的网页，要想学习网页制作，我们应该选择什么样的网页制作工具，首先同学们需要先了解有哪些软件，它们各有什么样的特点？ 布置任务：请同学们完成任务单中的第一个任务。教师点拨：网页工具软件大体上分为两类：一种着眼于网页、网站整体规划使用的基本工具；另一类是着眼于网页上面的某些元素（如：漂亮的按钮、栩栩如生的动画、逼真的三维图像），使用到的辅助工具。

通常网页设计需要考虑整体思想。先全局规划网页的思想或整体风格，然后对局部的图像处理、颜色搭配、动画图片设置的优化工作。先大后小的思想。本节课先来学习基本工具Frontpage和Dreamweaver。⑵网页设计工具Frontpage：

Frontpage是微软公司开发的一款网页设计软件，其软件界面和文字编辑功能与Word软件相似，熟悉Word的人很容易学会。同时提供的模板可以令初学者很容易的制作相当美观的网页。布置任务：

请同学们完成任务单中的第二个任务：利用教师提供的素材（图片，文字内容），制作一个网页。（教师提供一个已设计的简单网页）教师评价：

⑶网页制作Dreamweaver Dreamweaver是Macromedia公司的一款专业的网页设计软件，提供了很多方便操作和使用的工具栏，如：对象工具栏、站点管理窗口、快速工具栏。并且该公司还有一系列的配套产品可用，比如图形编辑软件Fireworks、动画制作软件Flash。运用他特有的“行为”、“层”等功能可以容易的生成网页的动态效果。

下面让我们来体验Dreamweaver软件的动态网页制作 布置任务：

请同学们完成任务单中的第三个任务： 运用Dreamweaver中的层、时间轴制作动态网页——图像移动 设问

1、为什么要调整“层”与“背景图像”的大小，使其等大？ 设问

2、时间轴上面的“关键帧”有什么特点？ 设问

3、操作过程中感到最难的一个环节是什么？ 设问

4、对自己设计的作品的评价是什么？ 结尾：同学们观察到，我们设计的作品和本节课一开始展示的作品有很大的差距，原因在于，仅仅使用我们学习的Frontpage和Dreamweaver是不能制作出那么美丽的网页的，我们还需要掌握一些制作网页的辅助工具。也就是我们下节课需要讲解的“辅助工具” 最后给同学们留下了一个课后任务。

借助我们的因特网完成任务一

各小组总结不同的网页制作工具软件的特点、主要功能。

学生回忆必修教材使用Frontpage设计“故宫”主题网页的过程 学生小组合作完成任务二 填写“任务二”评价表格 小组合作完成任务三

并填写“任务三”评价表格

网页工具学习任务单

一、借助因特网，组内成员分工查询制作网页常用到的工具软件，最后汇总完成下面的表格。常用工具

主要功能（总结每个软件的主要功能）

完成人员

二、打开网页制作软件FrontPage，利用老师提供的一些素材（素材放在D盘的“网页素材”文件夹内），制作一个网页，并保存。评价表

评价指标

组长评价 合作精神

主动合作

较为合作

能够合作

需要鼓励

组员评价

用Frontpage制作网页，熟练有创意

用Frontpage制作网页，比较熟练 3

用Frontpage制作网页，制作成功

用Frontpage制作网页，还需多加练习

三、打开网页制作软件Dreamweaver，利用老师提供的素材（素材位置），制作一个动态网页，并仔细观察、琢磨其动态效果。步骤提示：（提醒：每一步都需要注意观察有没有多种方法实现同一个操作）

1、打开软件，新建一个“基本页”。（可参考课本具体步骤）

2、修改网页的标题为“我的第一个动态网页”；

3、插入“图层”，选择“描绘层”插入，找到并观察“层属性面板”，修改“背景图像”；

4、调整层的大小，使其与图像等大；

5、找到“时间轴”，将层拖入“时间轴”的第一帧内；

6、按住第15帧上的空心圆点，向右拖动到第60帧；

7、在30帧处右键点击，弹出菜单，选择“增加关键帧”；

8、对“时间轴”上的每处“关键帧”进行设置，从而产生层的运动效果；

9、在浏览器中观看这一动态网页的效果。

<学习小窍门>：具体操作，观察课本，共同讨论，集体研究，会者演示，伴随讲解，自己上机，再练一遍。

评价指标

组长评价

合作精神

主动合作 4

较为合作

能够合作

需要鼓励

组员评价

用Dreamweaver层的功能制作动态网页，熟练有创意

用Dreamweaver层的功能制作动态网页，比较熟练

用Dreamweaver层的功能制作动态网页，制作成功

用Dreamweaver层的功能制作动态网页，还需多加练习

四、请同学们课下讨论，如果要想做出漂亮的网页，还需要学习哪些方面的知识，需要掌握哪些网页制作工具？ 欠缺知识

待学软件

第四篇：高中信息技术 网页制作教案 粤教版选修3

网页制作

教学目标：

1、了解网页的主要构成内容

2、学会网页的布局

3、学会网页中插入图片，文字设置，插入超链接的方法 教学内容：

1、启动FrontPage “开始”菜单——程序——Microsoft office——Microsoft FrontPage

2、新建网页：文件——新建——空白网页

表格——表格布局 表格——插入表格

专心

爱心

用心 1

调整表格

插入图片：

1． 插入：插入——图片——剪贴画（来自文件）2． 设置：右击图片（快捷菜单）——图片属性 3． 删除：选择图片——按删除键

调整图片，单击图片，出现小黑方块，就可调整图片

专心

爱心

用心 2

文字的录入：直接录入。

复制——复制粘贴

文字的编辑：格式——字体

格式——段落

文字最后生成格式

专心

爱心

用心 3

超级链接：

1． 链接到邮箱

选择“求助信箱图片”——单击超链接按钮——选择“邮件超链接”按钮——输入邮箱地址——确定

2． 链接到其他网页、网站

选择链接文字——单击超链接按钮——输入指定网页地址——确定 3． 取消超链接

选择超链接部分——单击超链接按钮——删除URL地址栏的内容——确定

保存：文件——保存

保存位置为F：/**班级/

专心

爱心

用心 4

第五篇：浙江省高中信息技术网页制作会考知识点

浙江省高中信息技术网页制作会考知识点

一、插入网页元素：

01.文字及格式：从文本文件中复制文字内容 → 光标定位到相应单元格中 → 粘贴 → 选中文字 → 格式 → 字体（段落）→ 根据题意设置 → 确定

02.字幕组件：定位 → 插入 → 组件 → 字幕 → 输入文字设置属性 → 确定。

03.艺术字：定位 → 插入 → 图片 → 艺术字 → 选择一种式样后确定 → 输入文字设置格式后确定。

04.图片及属性：光标定位于单元格中 → 插入 → 图片 → 来自文件 → 找到并选中图片文件（一定要从考生文件夹中找图片，包括扩展名都要正确，文件类型可以选所有文件。）→ 确定 → 右击图片 → 图片属性 → 根据题意设置 → 确定（注意不能设置成单元格背景图片）

05.表格：光标定位 → “表格”菜单 → 插入 → 表格（行或列、单元格）。

06.水平线及属性：光标定位 → 插入 → 水平线 → 右击水平线 → 水平线属性 → 根据题意设置 → 确定

二、背景（颜色或图片、音乐）、属性的设置：

01.网页属性（网页背景、背景音乐、网页标题等）：在网 1

页中右击 → 网页属性 → 根据题意设置 → 确定（图片和音乐文件一定要来自自己的考生文件夹，网页标题不能插入到网页的上方）

02.表格背景、表格属性：光标定位于要设置的表格右击 → 表格属性 → 根据题意设置 → 确定

03.单元格背景、单元格属性：光标定位于要设置的单元格右击 → 单元格属性 → 根据题意设置 → 确定

三、表格的操作：

01.插入行（列）：光标定位 → 表格 → 插入 → 行或列 02.删除行（列）：选中要删除的行（列）→ 表格 → 删除单元格（正确选择行或列）

03.合并（拆分）单元格：选中要合并（拆分）的单元格 → 表格 → 合并（拆分）单元格→ 根据题意设置 → 确定

四、超链接的设置：

01.在文字（图片）上设置（修改）超链接到网站地址：选中文字（图片）→ 在选中区域右击 → 超链接（超链接属性）→ 单击“原有文件或网页”按钮 → 在地址栏中输入网址 → 确定。

示例：超链接到“中央电视台”http://常见错误：（1）只有（2）http://http://2

02.链接到文件：选中文字（图片）→ 在选中区域右击 → 超链接（超链接属性）→ 单击“原有文件或网页”按钮 → 找到并选中文件（必须到考生文件夹中去寻找所要链接的文件，包括扩展名都要正确。显示扩展名的操作：打开一个文件夹 → 工具→ 文件夹选项 →“查看”标签 → 去掉“隐藏已知文件类型的扩展名”前面的对号 → 确定）→ 确定

示例：链接文件germ.htm

常见错误： http://germ.htm

03.链接到电子邮件：选中文字（图片）→ 在选中区域右击 → 超链接（超链接属性）→ 单击“电子邮件地址”按钮 → 电子邮件地址栏中输入电子邮件地址 → 确定

示例：超链接到abc@163.com

常见错误：（1）只有myname@163.com（2）http:// myname@163.com

五、新建网页（保存位置是考生文件夹、文件名要正确）

文件 → 新建 → 空白网页（开始 → 所有程序 → Microsoft Office → Microsoft Office FrontPage 2003）→ 按照题意制作网页 → 文件 → 保存 → 选择保存位置和输入文件名 → 保存 → 关闭窗口