FrontPage网页制作教案(18课时)

admin管理员组

文章数量:1530845

2023年12月23日发(作者：)

FrontPage网页制作教案（18课时）

学期教学计划

一、教材简析

本学期使用的计算机教材是江苏科学技术出版社出版的初中信息技术教科书。同时，由于配合高中阶段选修网络课程，增加部分网络知识。

本教材主要内容如下：１、网络基础知识２、网页的建立３、网页图片的处理４、网页框架的设计５、网页表格的制作６、网页表单的制作７、创建超链接８、动态网页的制作９、网站的建立

二、学情评价

１、学生学习网络和网页制作的兴趣浓厚，热情较高

２、学生的计算机基础知识掌握不够牢

３、学生运用电脑的能力较差

４、部分学生上机行为不够规范

５、有些学生键盘操作不熟练，用一只手操作键盘现象较严重

二、目的要求

１、提高学生学习计算机网络知识的兴趣，注重动手能力

２、规范学生上机行为，养成良好的习惯

３、掌握基本的网络知识和网上获取信息的能力

４、对学生适时进行爱国主义教育

５、成绩指标：平均分80，及格率98％，高分率80％

三、教学措施

１、认真钻研，精心备课２、仔细讲授３、耐心辅导４、严格要求学生

四、教学进度

序次 课题：（内容） 课时 周次 序次 课题：（内容） 课时 周次

1 机房常规教育和课程安排 1 1 10 练习、实践 １ 10

2 网络基础知识，制作工具 1 2 11 动态网页制作 １ 11

3 网页的建立、网页属性设置 1 3 12 网站建立 １ 12

4 网页图片的处理 1 4 13 设置单元格式 １ 13

5 练习、实践 1 5 14 开始

6 网页框架的设计 1 6 分组做网站

7 网页表格的制作 1 7

8 网页表单的制作 1 8

9 创建超链接 1 9

1 / 7

第一节 网页制作基础知识

教学目标：1、了解网站、网页、主页和HTML的基本概念

2、了解常见的网页制作工具

3、掌握Frontpage的启动和退出

教学手段：教师讲解与学生演示相结合

教学过程：

一．讲课：

一、网页及其组成

通过浏览器在WWW上所看到的每一幅画面都是一个网页（Web Page）。

网页是全球广域网上的基本文档，用HTML语言编写。网页中所的元素主要有文字、图片、声音、动画、影像以及链接等，通过这些元素的有机组合，就形成了包含各种信息的网页。其中，文字是网页中最常用的元素；图片可以给人以生动直观的视觉印象，适当运用图片，可以美化网页；链接的设计，可以使我们进行选择性的浏览；随着动态HTML技术的发展，人们在网页中加入声音、动画等多媒体信息，使网页更加丰富多彩。

二、常用的网页制作工具

最初，人们利用HTML语言在文本编辑器中制作网页。HTML语言是超文本标记语言（Hypertext Markup Language）的缩写，用来描述网页的结构，但不能直观的描述网页在浏览器中的效果。因此，只有熟练掌握HTML语言的专业人员才能用它制作网页。后来出现了一些网页制作工具（如CDIDA软件），降低了对HTML语言的要求，但是要实现某些功能，还必须输入相应的HTML代码。FrontPage系列软件的问世，才将人们从HTML代码中解放出来。用FrontPage软件制作网页就象在文字处理软件中编排多媒体文档一样，具有“所见即所得”的特性，而真正描述网页结构的HTML代码，则由FrontPage在幕后自动生成。这样，大家都可以方便地制作自己的网页。目前，使用较多的网页制作软件有：FrontPage、Flash、Dreamweaver等。

三、FrontPage2000的启动和退出

1． 启动

方法：单击“开始”按钮，拖动鼠标指针依次指向“程序（P）”“Microsoft FrontPage”，并单击，即可启动FrontPage2000。

2． FrontPage2000的视图方式

在FrontPage 2000视图栏中，有页面、文件夹、报表、导航、超链接、任务等六种视图方式，在网页制作和网站管理中，分别代表六种不同的工作模式。

（1）页面：用来编辑网页。

（2）文件夹：用于管理站点中的文件和文件夹。

（3）报表：用来了解整个网站的状况，报告站点中文件和超链接的状态。

（4）导航：用于帮助设计网站结构图，网页会依据结构图的形式自动产生链接。

（5）超链接：显示来自和指向站点中每一个网页的所有超级链接。

（6）任务：列出站点中要完成的任务。

根据需要，单击视图栏中的按钮，来切换不同的视图方式。如图5-2中，在页面视图下，可以直接进行网页的编辑和制作。

2 / 7

3． FrontPage2000的退出

单击“关闭”按钮即可。

练习：

1． 什么叫网页？

2． 一般情况下，网页由哪几种元素组成？

3． FrontPage 2000有几种视图方式？每种视图方式各有什么功能？

第二节 网页的建立

教学目标：使学生掌握网页建立的方法和网站建立的方法

教学难点：网站的建立

教学手段：多媒体演示

教学过程：

讲课

一、网站的建立

1．启动FrontPage 2000，依次单击“文件（F）”菜单中的“新建（N）”“站点（W）”命令，弹出“新建”对话框，如图所示。

2．单击“空站点”，然后指定新站点的位置，系统默认的位置类似于“C：My

Documentsmy Websmyweb1”，也可以自己指定网站所在的文件夹，最后单击“确定”按钮即可。

[例] 在“我的文档”中“My webs”文件夹下建立一个名为“huanbao”的网站。

操作步骤：

（1）启动FrontPage 2000。

（2）依次单击“文件（F）”菜单中的“新建（N）”“站点（W）”命令，在弹出的“新建”对话框中单击“空站点”，在“指定新站点的位置”下方的文本框中输入 “C：My Documentsmy

Webshuanbao”，最后单击“确定”按钮。

FrontPage 2000将自动在指定位置建立一个站点，首先建立 “C：My DocumentsMy

3 / 7

webshuanbao”文件夹，然后在此文件夹下，再建立一组文件夹，其中可见文件夹包括：_private和Images（存放图形文件），其余文件夹被隐藏起来

二、网页的制作

因为FrontPage2000默认的视图方式是“网页”，可以直接进行网页的编辑工作。网页编辑窗口的左下角有普通、HTML、预览三个标签，单击“普通”标签，可以直观地进行网页的编排；单击“HTML”标签，可以直接编辑HTML代码，或者输入FrontPage2000所不支持的HTML新代码，以实现动态网页的最新效果；单击“预览”标签，可以观看网页在浏览器中的情形。虽然FrontPage2000 具有“所见即所得”的功能， 在 “huanbao”网站中建立第一个网页取名为。

操作步骤：

1． 文字编辑

2． 插入图片

插入图片可使网页丰富多彩。在网页中可以使用的图片类型有多种，但最常用的是GIF和JPG格式的图片，因为这两种图片的文件长度较小，有利于提高网页的浏览速度。所以，插入其他格式的图片后，在页面存储时，系统会自动将图片格式转换成GIF或JPG格式。

3． 插入动画

在网页制作中，经常使用一些小动画，使页面生动活泼，这些小动画文件用专门的工具制作，也以GIF作为文件的扩展名。

操作步骤：

（1）依次单击“插入（I）” 菜单中的“图片（P）” 、“来自文件（F）…”命令，打开“图片”对话框，单击“浏览”按钮，打开“图片”对话框，单击“浏览”按钮， 从“选择文件”对话框中选择所需图片“”，单击“确定”按钮，插入动画。

（2）拖动动画到标题下方适当位置即可。

4． 插入水平线

水平线是贯穿网页宽度的细灰条，用来分隔文本成加着重符。插入水平线可以帮助我们将各类相关信息组合到一起，但同一个页面中水平线不宜过多。

调整水平线的宽度、高度、对齐方式以及颜色，就可以改变它的外观。

5． 设置背景

（1）单击“格式（O）”菜单中的“背景（K）…”命令，出现“页面属性”对话框，且“背景”标签已被打开。

（2）单击“浏览（B）…”按钮，在“选择文件”对话框中浏览文件夹内容，从中搜索到所需背景图案后，单击“确定”按钮，关闭“选择文件”对话框，再单击“确定”按钮，关闭“页面属性”对话框，背景图案即可插入页面。

页面制作完成，可以单击“预览”标签，观察一下效果。

三、网页的保存

单击“文件（F）”菜单中的“保存文件（S）”命令，弹出“另存为”对话框.

在“文件名（N）”列表框中输入“welcome”后，单击“保存（S）”按钮。如果要保存的页面含有图片、动画、声音等元素，FrontPage还会继续询问是否保存这些嵌入的文件，如图5-11所示。

此时最好将这些文件保存起来，以保持它们在网页中的位置，否则，当网站发生迁移时，可能因找不到这些图片、动画等文件而无法显示。另外，最好将它们保存到Images文件夹中，使网站保持清洁，便于管理和维护。

4 / 7

练习：

1． 在设计网页过程中，定义字体时要注意哪些问题？

2． 为什么在网页中通常都使用GIF或JPG格式的图片文件？

设置网页的背景时，可不可以使用较大的图片？有什么缺点？

制作“自我简介”

制作“自我简介”

一、 教学目标

1、 让学生熟悉FrontPage 2000的界面。2、 学会制作网页标题。3、 学会在网页中插入美丽的图片。4、 学会在FrontPage 2000中使用表格。

二、 重、难点使用表格

三、 教学方法演示法、讲授法、实践操作法、比较讨论法

四、 教学类型新授课

五、 教学过程

[导入]前面大家了解因特网的神奇世界，畅游了丰富多彩的网站，欣赏了精美华丽的网页。看到这么多漂亮的网页，同学们是否也想自己在网上建立一个自己的“家园”？现在我们将学习如何利用FrontPage 2000在因特网上安一个自己的“家”。

在因特网上安“家”的一般步骤大致可分为网站规划、网页制作和上传发布三个阶段。本章创建的整个网站主要由“自我简介”、“成长之路”、“兴趣特长”和“网上交流”等网页构成。

[讲授]创建网上家园，首先应将自己的有关情况展示出来，让来访者对自己有一个大概的了解。这里，先来看一个同学制作好的“自我简介”网页。

这个网页包含有图片、表格和相关文字等，下面学着制作这个网页。每个网页都有一个标题，让来访者一目了然。在“自我简介”网页中用“自我简介”几个文字来作为这个网页的标题。

[演示]1、 单击屏幕左下角的“开始”按钮，在“开始”菜单中选择“程序”→“Microsoft

FrontPage”菜单命令，进入FrontPage 窗口。

2、在网页编辑工作区输入文字“自我简介”，单击“格式”工具栏上“居中”按钮，将文字居中。

3、选中文字“自我简介”，通过“格式”工具栏的“字体”下拉列表，选择“楷体_GB2312”。

4、在“格式”工具栏选择“字号”为“24磅”，“颜色”为“粉红色”

5、单击“常用”工具栏上的“保存”按钮，弹出 “另存为”对话框。

6、在“文件名”中输入文件名“简介”后，单击“保存”按钮，保存网页。

[实践操作]

1、 使用“格式”→“字体”菜单命令也可以方便地设置字体。启动FrontPage，在编辑工作区中输入文字“兴趣爱好”，使用菜单命令改变字体。

2、 单击“HTML”标签，观察编辑工作区的变化。

[提醒]在网页设计中，对于非Windows自带的字体尽量少用，以免造成别人浏览此网页时无法显示这种字体，影响网页整体效果。

[讲授]

1、 FrontPage启动后，会自动打开一个新的空白网页窗口。FrontPage窗口与前面5 / 7

所学的Word窗口类似，由标题栏、菜单栏、工具栏、编辑区和状态栏组成。

2、 网页文件实际上是一个按HTML语言规则编写的文本文件。我们看到的网页是浏览器对HTML文件进行逐条解释，再显示出来的结果。

HTML是英文Hyper Text Markup Language的缩写，意为“超文本标记语言”。这种语言用“<>”来标记网页中对象的格式和有关参数。网页中除了文字保存在HTML文件中外，其他对象（如声音、图象、动画等）在HTML文件中只是保存了相应的标识和有关参数，真正是内容还在这些对象的文件中。因此，这些对象的文件如果被删除或改变了位置，就不能在浏览器中正确显示出来。

[讨论]如果在两个文字之间增加了一个空格后，间距又显得太大，此时应怎样调整才能得到合适的间距呢？

[实践操作]启动FrontPage，分别建立主题为“兴趣特长”和“成长之路”的两个网页，并保存为和

[讲述]你在因特网上漫游时，精彩生动的图片会使人流连忘返。在自己的网页上添加美丽的图片，一定也会增加吸引力。

[演示]1、 打开网页，选择“插入”→“换行符”菜单命令，弹出 “换行符属性”对话框，选择“普通换行符”，单击“确定”按钮，将光标下移一行。

3、 单击“常用”工具栏上的“插入文件中的图片”按钮，弹出 “图片”对话框。

4、 单击“剪贴画”按钮，弹出“剪贴画库”窗口，在“比喻”类别中找到剪贴画图片，将此图片插入到网页中。

5、 调整图片的大小，并居中放置。

插入图片[讲授]

1、 使用回车键换行时，行距较大，而采用普通换行符来换行，行距为0。

2、 FrontPage中可以插入的图片文件格式很多，如GIF、JPEG、PNG和BMP等。其中BMP格式的图片是未经过压缩的，文件较大，一般很少使用；而GIF、JPEG、PNG格式的图片都是压缩过的，文件较小，便于在网页中浏览和下载，所以经常使用。

[实践操作]

1、 在已建立的网页“成长之路”中，选择“插入”→“图片”菜单命令，加入合适的图片，并调整图片的位置和大小。

2、 在已建立的“兴趣特长”网页中，使用“常用”工具栏上的“插入文件中的图片”按钮，加入合适的图片，并调整图片的位置和大小。

3、 选择“格式”→“背景”菜单命令在网页中加入背景图片

以图片为背景的网页[讲解]在FrontPage中使用表格，可以整齐地排列文本，有效地组织数据，使整个网页看起来简洁清晰。我们下面来使用表格制作出自我情况介绍。

网页中的“自我简历表”

[演示]

1、 单击“常用”工具栏上的“插入表格”按钮，制作出一个6行2列的表格。

2、 在第一行第二列中，单击鼠标右键，在弹出的快捷菜单中，选择“拆分单元格”命令，弹出 “拆分单元格”对话框。

3、 选取“拆分为列”选项，在“列数”框中输入3，单击“确定”按钮，将此单元格分为三列。

4、输入表格中相应的文字。

5、 按住Ctrl键，单击表格的第一列和第三列，选中此两列，在“格式”工具栏上设置“字体”为“黑体”，“字号”为“4（14）磅”，“字型”为“粗体”。

6、 选中第二列和第四列，设置“字体”为“楷体”，“字号”为“4（14）磅”。

6 / 7

7、 选中表格的 所有行，单击“格式”工具栏上的“居中”按钮，将文字居中。

8、 选中第二行、第四行、和第六行，单击“格式”工具栏上的“突出显示颜色”按钮，选择突出显示颜色为“浅绿色”。

9、 选中整个表格，单击鼠标右键，在弹出的快捷菜单中选择“表格属性”菜单命令，弹出 “表格属性”对话框。

10、选择边框颜色为“粉红色”，单击“确定”按钮，制作出 “自我简历表”。

[试一试]删除表格的某一行、某一列或整个表格。

[小技巧]

1、 选中表格的多行、多列或多个单元格时要按住Ctrl键不放，再选取所需的行、列或单元格。

2、 选中整个表格的方法：在表格的最左或最右边双击鼠标左键，当所有单元格反色显示时表示该表格被选中。

[学生阅读并实践]

表格的编辑方法

用表格来安排版面

[实践操作]

1、 在自己所建的网页中使用表格展示自己的兴趣爱好。在网页中加入能反映自己成长过程的图片。

2、 建立一个2行6列的表格，在表格中插入图片和表格。

3、 将本节中所制作的主题文字、图片和表格进行混排。

[总结] 本小节我们学习了制作几个简单的文字网页，进一步熟悉了文字的设置。学会在网页中插入图片，并能利用插入的表格更方便地实现图文混排的设计，使网页看起来简洁利落。同学们对表格的使用需要进一步加强练习。

7 / 7

本文标签： 网页图片制作表格按钮