frontpage2000教案全集.doc

1、第一节 启动 frontpage2000 建立站点和图片收集一、 教学目的：掌握站点的建立，学会软件的启动和素材的收集，了解站点的打开和关闭。二、 教学重点：创建站点，收集图片，启动 frontpage2000。三、 教学时间：2 课时四、教学步骤：1、启动 FrontPage 2000单击任务栏上的“开始” 按钮,从“ 程序” 菜单中选择 “Microsoft FrontPage”单击。2、FrontPage 2000 的界面 说明FrontPage 2000 的界面可以分成菜单栏、工具栏、视图栏和主编辑窗口4 大部分。、菜单栏包括【文件】 、 【编辑】 、 【查看】 、 【插入】 、 【格

2、式】 、 【工具】 、 【表格】 、 【框架】 、【窗口】 、 【帮助】 等 10 个菜单。工具栏单击【查看】 菜单， 选择【工具栏】 ， 在出现的下拉菜单中列出了几种不同的、工具栏，如果菜单项前面有一个对钧号“”，表明在界在上已显示此菜单项。如果再单击一下，将取消这一项的显示。、视图栏中摆列着各种管理器的图标，这些管理器包括网页管理器、文件夹管理器、报表管理器、导航管理器、超链接管理器和任务管理器等。单击管理器图标以切换到相应的管理器。、主编辑窗口在编辑网页时，有 3 种显示方式，即普通、HTML 和预览。普通显示方式是最常用的显示方式，一般是在此方式下工作。HTML 显示方式在需要直接编辑

3、或查看网页文件的 HTML 代码时使用，一般是为了实现某种特殊效果（如在网页中动态显示时间）而经常使用。预览显示方式在需要预先观察网页的显示效果时使用。当使用管理功能时，主编辑窗口相应地会显示各种任务下的文件或站点信息。什么是站点？站点一般简写为“Web”，实际上就是把一些信息通 过 Web 网页的方式相互链接起来，存放在一台被称为“服务器”的计算机中，别人可以通过 Web 浏览器查看网页信息。站点一般以国际通用的 Internet 地址来表示，例如：http:/ 或 http:/ 等，进入某个站点所见到的第一页一般称为“HomePage” ，中文的意思是“主页”。什么是主页？主页的英文名称为

4、“HomePage”，一般认为某个站点的第一个网页叫做主页，文件名通常是“index.htm” （index.html ）或“default.htm”（default.html） ，也就是在 Web 浏览器“ 地址”栏内输入一个网址后，用 户浏览到的第一个网页。用户再通过该主页的链接可以浏览到其他网页信息。3、新建站点实例：使用【只有一个网页 的站点】 模板创建一个 Web 站点。操作步骤：（1 ）打开【文件 】菜单，选择【新建】 菜单项，在子菜单中选择【站点】菜单项，出现一个【 新建】 对话 框，在对话框的【指定新站点的位置】项中输入新站点的存放位置。提示：新站点的存放位置选择是磁盘存储方式

5、，是因为考虑到实践操作中的方便。而一个站点要让在 Internet 上的用户正常浏览的话，应该通过FrontPage 的站点发布功能或 FT 文件传送方式，把该站点内容传送至能提供存放空间的 Web 服务器上去。（3 ）单击【确定 】按钮。此时 FrontPage 会自动以新站点名建立一个站点，并显示一个正在创建站点的提示对话框，之后该站点很快便创建好了。新建的站点只有一个主页 index.htm 文件，该主页还是空的，需要对它进行编辑添加内容。同时也可以添加一些网页到该站点中去。此外，我们发现该站点中包含有两个子文件夹。一个是_private 文件 夹，一般用来存放一些私人的文件，这些文件不

6、会被别人看到。另一个是 images 文件夹，是 FrontPage专门创建用来存放图像文件的文件夹，因为 FrontPage 扩展服务器的图像文件的默认目录为 images。4、关闭站点打开【文件】菜单，选择【关闭站点】菜单项，则当前站点被 关闭。5、打开站点站点内容需要修改或添加时，必须把该站点打开。操作过程如下：打开【文件】菜单，在下拉菜 单选择【打开站点】 ，出 现一个对话框，在对话框的【 文件夹 】项中输入该 站点的存放位置，然后单击 【打开】按钮，站点将被重新打开。6、收集图片拷贝图片到新建站点的图片文件夹 images 中。五、 上机操作创建自己的站点，收集图片素材。第二节 网页

7、文本的基本制作一、 教学目的：学习文字的输入和设置，掌握网页的新建和保存。二、 教学重点：文字的输入和设置, 网页的新建和保存。三、 教学时间：2 课时四、 教学步骤：上节课已经介绍了如何创建一个 Web 站点，接下 来我们将着重学习如何使用 FrontPage 2000 来制作网页了。实例说明：本例是一个简单的主页制作，通过这个例子，我们将学会如何在站点内新建一个网页、设置页面格式、文字输入及字体设定、网页的预览与保存等基本方法。提示：本例先使用 FrontPage 建立一个站点。这样做，是为了网页文件的规范管理，所有网页及图片等文件都将保存到该站点内。本例以第一节所创建的站点为例。1、新建

8、网页 方法： 使用工具按钮。在 FrontPage 2000 中单击“ ”新建网页工具按钮，在主编辑窗口将出现一个空白网页。 使用菜单命令。 （1）我 们也可以从【 文件】菜单中选择【新建】 菜单项，在子菜单中选择【网页】 菜 单项，出现一个对话框。 （2 ）这个对话框中列出了很多事先设计好的网页模板。这时选择【普通网页 】，单击【确定】按钮，此时在主编辑窗口中将出现一个空白网页。2、网页属性在空白网页中单击鼠标右键，从弹出的菜单中单击【网页属性】 选项，出现网页属性对话框。在这个对话框中我们可以修改网页的多种属性。（1） 、常规属性设置。在这个对话框中共有 5 个选项卡。其中，在【常规】选项

9、卡中我们可以修改网页的标题、背景音乐等。 修改网页标题。在对话框【标题】 栏内输入“我的主 页” 。 修改背景音乐。单击【背景音乐】 区域的【浏览】按钮，出现对话框，单击“ ”图标按钮，在硬盘目录下选择一个 Wav 声 音文件。本例使用“C:windowsMedia”目录下的“Start.wav” 文件，大家也可以自己选择其他的声音文件作为背景音乐。缺省状态下背景声音的设置为始终有声音。（2） 、背景色设置。单击网页属性对话框的【背景】选项卡，就可以设置网页的背景色和图片等。 修改网页的背景色。单击对话框中【颜色】 区域 内的“背景” 项下拉选择箭头，并从颜色框中选择一种颜色，然后单击【确定

10、】按钮，这时网页的背景颜色就变成了刚才选择的颜色。 设置背景图片。 （1）重新 单击鼠标右键，选择【 网页属性】进入对话框并单击【背景 】选项卡。 （2）然后单击在【格式】 区域 内的“背景图片” 选择框，选中后下面的“ 水印” 选择项 、文本框都不再变灰。 （3 ）这时再单击【浏览】 按钮进入网页背景图片选择对话框。 （4）单击对话框右下角的【 剪贴画】按钮，就会弹出【 剪贴画 库】 。单击【Web 背景】选项从中选择一种图案作为背景，选中后单击“ ”插入剪辑按钮。 （ 5）然后单击网页属性对话框的【确定】 按钮。这时网页背景已变成了刚才选择的图案。3、文本输入从工具栏中的【字体样 式】 下

11、拉菜单选择“标题 1”，然后从键盘输入“这是我的第一个主页”，按回车键。从【字体样 式】 下拉菜单选择 “标题 2”，输入“ 个 人信息”，然后按回车键。接着输入“姓 名：小明”，按 Shift 键加回车键 ；输入“年 龄：17”，按Shift 键加回车键；输入“就 读学校：珠海新世纪学校高一(1)班”，按 Shift 键加回车键；输入“职 务：班 长” ，按回车键。提示：我们在输入文本的时候使用了两种按回车键的方式：直接按回车键，按 Shift 键加回车键 。大家可以在实际操作中自己体会一下这两种方式的区别。从【字体 样式】 下拉菜 单选择“标题 2”，输入“ 联 系信息”，然后按回车键。接

12、着输入“地 址：广东 省珠海市 xx 大街”，按 Shift 键加回车键；输入“邮政编码：519090”，按 Shift 键加回车键；输入“电 话：（0756）xxxxxxxx”，按Shift 键加回车键；输入“电子邮箱：”，按回车键。输入“很高兴能认识您，希望能和您交朋友！”，按回车键；输入“谢谢您参观我的网页，再见！”，按回车键。4、字体设置 （1） 、选定文字 选定文字的方法有两种：一种方法是将鼠标指针移到待选文字段的开头，按住鼠标左键，不要松手，然后向右下方拖动，将该段文字涂黑；另外一种方法就是用键盘上的光标箭头将插入点移到选定文字的开头，然后左手按着 Shift 键，右 边按光标移动

13、键（如、键） ，也可将所选定文字涂黑。（2） 、修饰文字修饰文字是指文字的字体、字型、大小（字号） 、颜色、效果的设置。例：选定“这是我的第一个主页”文字后，设定文字属性的操作有以下两种：单击【格式 】菜单项，选择 【字体】后出现字体对话 框；或单击鼠标右键，在弹出的对话框中单击【字体 】选项，也将出现字体对话框。这时在对话框中的字体设为“隶书”，字型为“ 加粗”，大小为“6 （24 磅） ”，颜色为“红 色” ，效果为 默认。单击【 确定】按钮即可完成文字修饰。例中其他字体修饰的操作也类似进行。5、保存网页单击常规工具栏上的“ ”，或单击【 文件】菜单再选择【 保存文件】 ，就可以把正在编辑

14、的网页保存起来。或直接按 Ctrl+S 键也可以保存网页。如果你是在修改已经保存过的网页，修改过的网页将被重新保存。但如果是新建的网页，单击“ ”后会出现对话框。在对话框中的【文件名】 栏 内输入网页的文件名（如 “First”） ，单击【保存】按钮，该网页就会保存到当前的站点上。FrontPage 2000 保存文件的类型主要有网页文件（.htm） 、FrontPage 模板（.tem） 、文本文件（ .txt） 、超文本模板文件（.htt ）等。6、关闭网页（1 ） 、单击【 文件】菜单并选择【关闭】 ，或直接按 Alt+F4 键，如果此时网页文件未保存，就会出现一个提示对话框。（2 ）

15、、当单击对话框中的 【是】按钮时，将出现保存网页对话框，输入网页文件名并单击【保存】 按 钮后，网页文件将被关闭 ；当单击【否】按钮时，该网页文件不保存并关闭；当单击【取消】 按钮时，该 网页文件不关闭，并返回主编辑窗口。 7、打开网页（1 ） 、单击“ ”工具图标，或单击【文件】菜单并选择【打开】 ，或直接按Alt+O 键，出现一个打开 文件对话框。（2 ） 、在对话框中单击【 查 找范围】下拉列表框，选择文件路径。在文件列表区中列出被选中该文件路径下的所有文件。（3 ） 、选中一个文件，然后 单击【 打开】按钮，或直接双击该文件名即可打开文件。 8、预览网页网页编辑完成后，可以用浏览器预览

16、一下网页的效果。有两种预览网页的方式：（1） 、一种是单击 FrontPage 2000 主编辑窗口下面的 【预览】标签，就打开一个 FrontPage 编辑器自带的浏览器，看完之后，单击【 普通】标签，又切换到编辑状态。（2） 、另一种是单击 【常规】工具栏的“ ”图标按钮（或直接按Ctrl+Shift+B 键，或单击【文件】菜单并选择【 在浏览器中预览】 菜单项） ，将启动已安装好的浏览器并打开该网页。如果在预览之前没有把修改后的或新建的网页保存起来，则将弹出一个对话框提示你应该首先保存该网页。注意：在预览窗口中看到的是网页在发布后的大致样式。要看到网页在WWW 浏览器中的真实情形，必须使

17、用【在浏览器预览】菜单项查看。而且，即使是在 WWWW 浏览器中 浏览通过，不同的浏览器产生的效果不一样。在发布到 Internet 上的前后，最好使用不同的浏览器多浏览几次。第三节、图片的运用一、教学目的：学习图片的插入和设置。二、教学重点：图片的插入和设置。三、教学时间：1 课时四、教学步骤一）插入图片下面我们以一个实例来说明如何在网页中加入图片。其操作步骤如下：（1 ）新建一个空白网页，把光 标定位到要插入图片的地方。（2 ）单击“ ”工具图标，或单击【插入】菜单，选择【图片】菜单项，在子菜单中单击【 来自文件】选项，在出现一个【图片】 对话框的同时，还弹出一个【 选择文件 】对话框。（

18、3 ）在【选择 文件】对话框的“搜寻”栏内选定图片的存放位置，然后从文件列表中双击某个图片文件（或选定图片文件） ，单击【确定】 按钮，则图片插入到网页中。二） 、设置图片的属性在网页中插入图片后，我们还要对图片的某些属性进行设置。（1 ）在某个图片上单击鼠 标右键后，弹出一个快捷菜单，选择图片属性。（2 ）单击【图 片属性】菜单项，出现图片属性对话框。在图片属性对话框中，我们可以设置图片的各种属性：1、常规属性 【图片源】：指图片的存放位置。如果要重新 选择 其他一幅图片时，单击【 浏览】按钮。如果要修改 这幅图片，可以单击【编辑】按钮，启动自带的Image Composer 软件，修改完图

19、片后，只要退出该软件，网页图片就会自动更新。 【类型】：我们可以选择图 片的类型，GIF 或者是 JPEG。 在“质量”栏内一般设定为 70-80 就行了。 【替代表示 】：如果当 前图片较大，分辨率也较 高，我们应该在【低分辨率】 中选定一 个备用的低分辨率 图像，这样在一些 浏览网页的低档机显示器不能显示高分辨率图片时，可以显示这个低分辨率的图片。此外，在“文本”栏内默认值为图片文件名加上文件长度，这是当该图片不能显示时，这些说明文字会显示出来，也就常说的图片的别名。若要修改图片的别名时，在文本框内输入即可。2、图像的外观单击【图片属 性】 对话框中的 【外观】选项卡。在这个 对话框中，我

20、们可以设置图片与文本之间的对齐方式、图片的边框粗细以及图片的大小等。 布局栏：单击【对齐方式 】下拉箭头 ，出现一个下拉菜单，有多 种对齐方式，在图文混排时非常有用，大家可以试试看。利用【边框粗 细】 可以在图 片周围加上一个指定宽度的 边框。值为 0 时，边框不显示。设置【水平间 距】 和【垂直间距】的值，可以改变图片 与相邻内容（如文字）之间的距离。默认情况下，浏览器中显示的网页图片是实际大小的图片。如果要改变图片的大小，则在对话框的【 大小】 栏中调整“宽度”、 “高度”的值（单位为像素或百分比） 。选择“ 保持纵横比”选项是防止尺寸修改后的图片出现太扁或太长的“变形” 现象。图片的定位

21、，可以单击图片工具栏的图片定位按钮。图片可以随便移动，但在预览时常会与实际不一致。三）上机操作：在网页中插入合适的图片。第四节 项目符号与编号列表一、教学目的：学习使用项目符号，理清条理，理解做事步骤。二、教学重点：编号列表，图片项目符号列表，多级列表。三、教学时间：2 课时四、教学步骤：一）编号列表编号列表是在实际应用中最为常见的一种列表，编号列表的各列表项以某种形式的顺序进行排列。下面我们以一个实例说明。其操作步骤如下：1、新建一个空白网页，输 入“ 我的兴趣和爱好”标题，按回车键；2、 单击“ ”工具图标，在网页中出现“1.”，在这个编号后面输入“看书”；3、按回车键后，在“2.”后面输

22、入 “上网” ；4、重 复上述步骤，直到出 现编号“5.”。在其后面输入“踢足球”，然后按Shift+回车键 ，再输入“ 打 网球” ，按回车键；5、在 编号“6.”行上按回车键，该编号就会在屏幕上消失了；6、 将网页文件保存起来， 并在浏览器中浏览。另外，在编号列表中，列表符号可以是数字，也可以是其他符号，这些符号有：（1）大写罗马数字：如 .、.、.、. 、 ；（2）小写罗马数字：如.、.、.、.、；（3）大写英文字母：如 A.、B. 、C.、D.、；（4）小写英文字母：如 a.、b. 、c.、d. 、。当需要改变 列表编号时，其操作过程大致如下：1、 将光标定位在一个列表所在行的任意位置。2、然后单击鼠标右键，这时 将弹出一个对话框，单击其中的【 列表属性】选项，出现列表属性对话框。 （或者单击【格式】 菜 单，选择【项目符号和编号】菜单项亦可。 ）3、此 时在对话框中打开的是 【编号】选项卡。4、 单击不同的选择框，然后 单击【 确定】按钮，就可以选择不同样式的项目编号。二）项目符号列表与编号列表不同，在项目符号列表中各列表项都是通过一个特殊符号引出的。下面以一个项目符号列表的实例来说明。