FrontPage网页制作教案（18课时）
学期教学计划
一、教材简析
本学期使用的计算机教材是江苏科学技术出版社出版的初中信息技术教科书。同时，由于配合高中阶段选修网络课程，增加部分网络知识。
本教材主要内容如下：１、网络基础知识２、网页的建立３、网页图片的处理４、网页框架的设计５、网页表格的制作６、网页表单的制作７、创建超链接８、动态网页的制作９、网站的建立
二、学情评价
１、学生学习网络和网页制作的兴趣浓厚，热情较高 ２、学生的计算机基础知识掌握不够牢 ３、学生运用电脑的能力较差 ４、部分学生上机行为不够规范
５、有些学生键盘操作不熟练，用一只手操作键盘现象较严重
二、目的要求
１、提高学生学习计算机网络知识的兴趣，注重动手能力 ２、规范学生上机行为，养成良好的习惯
３、掌握基本的网络知识和网上获取信息的能力 ４、对学生适时进行爱国主义教育
５、成绩指标：平均分80，及格率98％，高分率80％
三、教学措施
１、认真钻研，精心备课２、仔细讲授３、耐心辅导４、严格要求学生
四、教学进度
序次 课题：（内容）课时 周次
序次 课题：（内容）课时 周次 1
机房常规教育和课程安排
练习、实践
１ 10 2
网络基础知识，制作工具
动态网页制作
１ 11 3
网页的建立、网页属性设置
网站建立
１ 12 4
网页图片的处理
设置单元格式
１ 13 5
练习、实践
开始
网页框架的设计
分组做网站 7
网页表格的制作
网页表单的制作
创建超链接
第一节
网页制作基础知识
教学目标：
1、了解网站、网页、主页和HTML的基本概念
2、了解常见的网页制作工具
3、掌握Frontpage的启动和退出
教学手段：教师讲解与学生演示相结合
教学过程： 一．讲课：
一、网页及其组成
通过浏览器在www.xiexiebang.come.htm。
操作步骤： 1． 文字编辑 2． 插入图片
插入图片可使网页丰富多彩。在网页中可以使用的图片类型有多种，但最常用的是GIF和JPG格式的图片，因为这两种图片的文件长度较小，有利于提高网页的浏览速度。所以，插入其他格式的图片后，在页面存储时，系统会自动将图片格式转换成GIF或JPG格式。
3． 插入动画
在网页制作中，经常使用一些小动画，使页面生动活泼，这些小动画文件用专门的工具制作，也以GIF作为文件的扩展名。
操作步骤：
（1）依次单击“插入（I）” 菜单中的“图片（P）”、“来自文件（F）„”命令，打开“图片”对话框，单击“浏览”按钮，打开“图片”对话框，单击“浏览”按钮，从“选择文件”对话框中选择所需图片“diqiu1.gif”，单击“确定”按钮，插入动画。
（2）拖动动画到标题下方适当位置即可。
4． 插入水平线
水平线是贯穿网页宽度的细灰条，用来分隔文本成加着重符。插入水平线可以帮助我们将各类相关信息组合到一起，但同一个页面中水平线不宜过多。
调整水平线的宽度、高度、对齐方式以及颜色，就可以改变它的外观。5． 设置背景
（1）单击“格式（O）”菜单中的“背景（K）„”命令，出现“页面属性”对话框，且“背景”标签已被打开。
（2）单击“浏览（B）„”按钮，在“选择文件”对话框中浏览文件夹内容，从中搜索到所需背景图案后，单击“确定”按钮，关闭“选择文件”对话框，再单击“确定”按钮，关闭“页面属性”对话框，背景图案即可插入页面。
页面制作完成，可以单击“预览”标签，观察一下效果。
三、网页的保存 单击“文件（F）”菜单中的“保存文件（S）”命令，弹出“另存为”对话框.在“文件名（N）”列表框中输入“welcome”后，单击“保存（S）”按钮。如果要保存的页面含有图片、动画、声音等元素，FrontPage还会继续询问是否保存这些嵌入的文件，如图5-11所示。
此时最好将这些文件保存起来，以保持它们在网页中的位置，否则，当网站发生迁移时，可能因找不到这些图片、动画等文件而无法显示。另外，最好将它们保存到Images文件夹中，使网站保持清洁，便于管理和维护。练习：
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窗口与前面所学的Word窗口类似，由标题栏、菜单栏、工具栏、编辑区和状态栏组成。
2、网页文件实际上是一个按HTML语言规则编写的文本文件。我们看到的网页是浏览器对HTML文件进行逐条解释，再显示出来的结果。
HTML是英文Hyper Text Markup Language的缩写，意为“超文本标记语言”。这种语言用“<>”来标记网页中对象的格式和有关参数。网页中除了文字保存在HTML文件中外，其他对象（如声音、图象、动画等）在HTML文件中只是保存了相应的标识和有关参数，真正是内容还在这些对象的文件中。因此，这些对象的文件如果被删除或改变了位置，就不能在浏览器中正确显示出来。
[讨论]如果在两个文字之间增加了一个空格后，间距又显得太大，此时应怎样调整才能得到合适的间距呢？
[实践操作]启动FrontPage，分别建立主题为“兴趣特长”和“成长之路”的两个网页，并保存为xingqu.htm和chengzhang.htm [讲述]你在因特网上漫游时，精彩生动的图片会使人流连忘返。在自己的网页上添加美丽的图片，一定也会增加吸引力。
[演示]
1、打开网页jianjie.htm，选择“插入”→“换行符”菜单命令，弹出 “换行符属性”对话框，选择“普通换行符”，单击“确定”按钮，将光标下移一行。
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）磅”。
7、选中表格的 所有行，单击“格式”工具栏上的“居中”按钮，将文字居中。
8、选中第二行、第四行、和第六行，单击“格式”工具栏上的“突出显示颜色”按钮，选择突出显示颜色为“浅绿色”。
9、选中整个表格，单击鼠标右键，在弹出的快捷菜单中选择“表格属性”菜单命令，弹出 “表格属性”对话框。
10、选择边框颜色为“粉红色”，单击“确定”按钮，制作出 “自我简历表”。[试一试]删除表格的某一行、某一列或整个表格。[小技巧]
1、选中表格的多行、多列或多个单元格时要按住Ctrl键不放，再选取所需的行、列或单元格。
2、选中整个表格的方法：在表格的最左或最右边双击鼠标左键，当所有单元格反色显示时表示该表格被选中。[学生阅读并实践] 表格的编辑方法 用表格来安排版面 [实践操作]
1、在自己所建的xingqu.htm网页中使用表格展示自己的兴趣爱好。在chengzhang.htm网页中加入能反映自己成长过程的图片。
2、建立一个2行6列的表格，在表格中插入图片和表格。
3、将本节中所制作的主题文字、图片和表格进行混排。
[总结]
本小节我们学习了制作几个简单的文字网页，进一步熟悉了文字的设置。学会在网页中插入图片，并能利用插入的表格更方便地实现图文混排的设计，使网页看起来简洁利落。同学们对表格的使用需要进一步加强练习。
Frontpage网页制作导学案
青州一中
刘志韩
文件——新建——网页 【学习目标】
1、包括网页制作基础知识
2、站点的规划和创建
3、网页文本和图片的处理、表格和框架的应用 【学习重难点】
1、建立一个主题网站
2、建设一个网站的步骤
3、网页的美化与特效的制作 【课前预习】
思考一下多媒体信息集成的方式有哪些？
【自主学习】
1、在www中，________是信息的主要组织和表现形式。
2、用________语言编写的网页实际上是一种文本文件，以.HTML或者.HTM为扩展名，可以使用任何文本处理软件（如记事本、word等）创作或修改。
3、制作网页常用的软件有_________________和_________________。
4、网页文件的扩展名有哪些？
5、网站开发的基本过程：
网站的规划——（）——（）——网站的发布与管理——网站的评价 【合作探究与指导】
三、网站的制作
1、创建站点
文件——新建——站点（选择或创建存储站点的文件夹）
2、网页的创建与编辑
3、插入对象 水平线 图片 字幕 悬停按钮
4、创建超级链接
在对象上右击选择超级链接——选择链接的目标。
5、使用表格
表格——插入（在制作网页的过程中用表格来布局网页）
6、在站点中查看网页的编辑及网页之间的链接情况。
分步骤操作练习题：
1、新建一个站点，只有一个空白网页的站点。
2、在首页上插入“我最喜爱的明星”，然后进行修饰。
3、再新建一个空白网页。重新命名为“周杰伦”。
4、插入图片“周杰伦”，文本“周杰伦”，排版设置后保存网页。
5、再建立一张空白的网页，重新命名为“刘亦菲”。
6、插入图片“刘亦菲”，文本“刘亦菲”，排版设置后保存网页。
7、分别在首页和“周杰伦”“刘亦菲”网页建立超级链接。操作练习： 【拓展任务】
以环保为主题，利用文件夹“环保”中的素材，制作一个5页的网站。
【当堂检测】
1.在网页制作中，我们经常用下列（）办法进行页面布局。
A.文字
B.表格
C.表单
D.图片 2.使用浏览器访问网站时，第一个被访问的网页称为（）。
A.网页
B.网站
C.HTML语言
D.主页 3.网页中可使我们进行选择性浏览的称为（）。
A.文字
B.图片
C.声音
D.超链接
4.在FrontPage2000中，要建立同一个网页内的链接点，让你点选某一链接后，迅速跳到同一网页内的另一个特定位置，应采用（）链接。
A.单元格
B.表单
C.书签
D.表格 5.FrontPage 2000中，下述关于图片与链接的关系表述正确的是（）。
A.图片不能建立链接
B.一张图片只能建立一个链接
C.图片要建立链接需经过处理
D.通过设置热区，一张图片可建立多个链接 6.在FrontPage 2000“网页”视图模式下，单击“普通”标签后，在出现的“普通”窗口中，可直接进行（）。
A.网页编排
B.观察网页在浏览器中的效果
C.编辑HTML代码
D.下载图片 7.网页制作的超文本标记语言称为（）。
A.VB语言
B.HTML语言
C.BASIC语言
D.ASCII 8.在Frontpage2000网页视图方式下，单击（）标签可直接编辑HTML代码？
A.普通
B.HTML
C.预览
D.编辑 9.在FrontPage 2000中，我们想要文字左右交替移动的效果，是下列（）效果。
A.字体
B.DHTML效果
C.字幕
D.悬停按钮 10.在FrontPage 2000表格单元格中，（）项目不能输入。
A.表格
B.图形
C.背景
D.声音
作业：以我们寒假生活为主题，从互联网上搜索的素材制作一个网站。
【阅读材料】
网站设计
建立一个网站就像盖一幢大楼一样，它是一个系统工程，有自己特定的工作流程，你只有遵循这个步骤，按部就班地一步步来，才能设计出一个满意的网站。
一、确定网站主题
网站主题就是你建立的网站所要包含的主要内容，一个网站必须要有一个明确的主题。特别是对于个人网站，必须要找准一个自己最感兴趣内容，做深、做透，办出自己的特色，这样才能给用户留下深刻的印象。
二、搜集材料
明确了网站的主题以后，你就要围绕主题开始搜集材料了。常言道：“巧妇难为无米之炊”。要想让自己的网站有血有肉，能够吸引住用户，你就要尽量搜集材料，搜集得材料越多，以后制作网站就越容易。材料既可以从图书、报纸、光盘、多媒体上得来，也可以从互联网上搜集，然后把搜集的材料去粗取精，去伪存真，作为自己制作网页的素材。
三、规划网站
网站设计得成功与否，很大程度上决定于设计者的规划水平，规划网站就像设计师设计大楼一样，图纸设计好了，才能建成一座漂亮的楼房。网站规划包含的内容很多，如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等，你只有在制作网页之前把这些方面都考虑到了，才能在制作时驾轻就熟，胸有成竹。
四、选择合适的制作工具
网页制作涉及的工具比较多，首先就是网页制作工具了，目前大多数网民选用的都是所见即所得的编辑工具，这其中的优秀者当然是Dreamweaver和Frontpage了，如果是初学者，Frontpage2000是首选。除此之外，还有图片编辑工具，如Photoshop、Photoimpact等；动画制作工具，如Flash、Cool 3d、Gif Animator等；还有网页特效工具，如有声有色等，五、制作网页
材料有了，工具也选好了，下面就需要按照规划一步步地把自己的想法变成现实了，这是一个复杂而细致的过程，一定要按照先大后小、先简单后复杂来进行制作。
六、上传测试
网页制作完毕，最后要发布到Web服务器上，才能够让全世界的朋友观看，利用这些FTP工具，你可以很方便地把网站发布到自己申请的主页存放服务器上。网站上传以后，你要在浏览器中打开自己的网站，逐页逐个链接的进行测试，发现问题，及时修改，然后再上传测试。
七、推广宣传
网页做好之后，还要不断地进行宣传，这样才能让更多的朋友认识它，提高网站的访问率和知名度。推广的方法有很多，例如到搜索引擎上注册、与别的网站交换链接、加入广告链等。
八、维护更新
《网页制作FrontPage》教案
教师：张爱平
第1、2课时 网页设计概述
【教学内容】
讲解网页设计的相关术语及网站制作的基本流程。【教学目的】
使学生对网站及网页有一定的认识，激发学生学习网页设计的兴趣。【教学重点】
网页设计中的若干术语。【教学难点】
理解网页设计中的若干术语。【教学方式】
讲授式、讨论式、案例分析式。【教学参考】
1、《网页设计与制作》杨尚森 曲宏山 贾文峰等著 电子工业出版社。
2、《Internet 网页工场》Wittime工作室 重庆出版社。
3、《WEB网站设计》Joel Sklar著 高等教育出版社。
4、《HTML网页制作教程》材义语编著 铁道出版社。【新课内容】 1.1 中超级链接标志的难点。
第7、8课时HTML表格、表单与框架标志
【教学内容】
讲解HTML中制作表格、表单与框架的标志。【教学目的】
使学生掌握简单表格、表单与框架的制作。【教学重点】
* 表格中单元格的合并以及表格嵌套和叠加操作。* 框架的嵌套使用。* 表单元素标志与属性。【教学难点】
* 理解表格属性rowspan与colspan的含义以及表格嵌套实现的基本思想。
* 理解框架属性name、target的意义。* 理解表单中相应元素对应标志及属性的含义。【教学方式】 案例分析式、项目教学 【教学参考】
1、《网页设计与制作》杨尚森 曲宏山 贾文峰等著 电子工业出版社。
2、《WEB网站设计》Joel Sklar著 高等教育出版社。
3、《HTML网页制作教程》材义语编著 铁道出版社。【新课内容】 2.5 插入表格
2.5.1在网页中插入表格
表格的基本构成元素：表头，单元格，列，行
第一行第一列 第一行第二列 第二行第一列 第二行第二列
2.5.2嵌套的表格 2.5.3表格的属性设置 2.5.4单元格属性设置 2.6 表单的应用
表单在Web网页中用来给访问者填写信息，从而能获得用户信息，使网页具有交互的功能。2.6.1创建表单
2.6.2用
2.6.3定义下拉式菜单
你选修的课程：
计算机
英语
逻辑学
心理学
2.6.4定义多行文字输入区域 请输入你的详细介绍：
2.7 框架窗口
框架把窗口划分成几个子窗口，各个子窗口可以调入各自的HTML文档，最后形成充满整个窗口的网页。2.7.1框架的定义 2.7.2框架属性设置
2.7.3子窗口属性设置
SRC=“a.htm”
MarginWidth=“5”
Noresize MarginHeight=“5” Scrolling=“auto” FrameBorder=“0” FrameSpacing=“6” BorderColor=“#0000FF” Target=“rtop”> 2.7.4常见的框架窗口划分方法（1）标题和正文，分为上下两部分（2）层次结构，分为上中下三部分
（3）目录和标题，分为左上、左下、右三部分（4）标题、目录和正文，分为上、左下、右下三部分（5）嵌套目录，分为左、右上、右下三部分 2.7.5不支持框架的网页
<![CDATA[</p><p><BODY> 很抱歉，馈下使用的浏览器不支援框架功能，请转用新的浏览器。</p><h2><a name="4" >第四篇：Frontpage网页制作经验总结</a></h2><p>【摘要】Frontpage更以其功能强大、容易上手、界面亲切而著称。它采用所见即所得的方式编辑网页，利用它可以轻松的组织、编辑网页并将其发布到指定的站点上，而且在发布之后还能对更新情况进行监控以更新站点的。</p><p>【关键字】Frontpage创建站点、新建页面、文字、超链接</p><p>现在流行的网页制作软件有很多，如Macromedia公司的Dreamweaver、微软公司的Frontpage、还有Adobe Pagemill 3.0--制作多框架，表单和Image map 图像的网页工具、Netscape等等。其中Frontpage更以其功能强大、容易上手、界面亲切而著称。它采用所见即所得的方式编辑网页，利用它可以轻松的组织、编辑网页并将其发布到指定的站点上，而且在发布之后还能对更新情况进行监控以更新站点的内容。</p><p>工具准备好了，可根据你的个人喜好来选择一些素材，如图片、喜欢的文章等。现在就让我们从第一步的建立站点来踏上建造网上家园之旅。</p><p>用FRONTPAGE创建站点是很容易的。首先，我们来看一下创建一个只包含一个网页的站点。选择“文件”菜单的“新建”选项，单击“站点”命令，这时新建站点对话框就弹出来了，在“指定新站点位置”文本框中输入新站点的位置，单击“只有一个网页的站点” 图标，单击“确定”按钮。这就建立好站点了，我们现在来看一下新的站点里有什么，单击“视图”工具条的“文件夹”按钮。在文件夹列表里有一个网页文件，名字叫做“index.htm”。我们知道，每一个站点都要有一个主页，这个主页也是一个网页文件。浏览者访问站点时首先进入的就是站点的主页。主页的名字在一般情况下就叫做“index.htm”。就是说我们新建只包含一个网页的站点时，FRONTPAGE就自动为我们创建了站点的主页了。这个新建的站点主页时空的，我们可以向里面添加内容。</p><p>在文件列表里除了主页之外，还有文件夹。新建站点时，FRONTPAGE都会在站点所在位置下新建两个文件夹，一个是“images”另一个是“_private”。我们在编辑站点时可以在“image”文件夹里放置站点用到的图片。“private”文件夹比较特殊，其中的文件对浏览者来说是隐含的，我们可以把一些不想让浏览者看到的网页文件放在这个文件夹里，比如：我们可以在这个文件夹里存放注册用户的个人信息。</p><p>尽管每一个站点都要有一个主页，不过创建站点时我们仍然可以从一个空站点开始：选择“文件”菜单的“新建”命令，单击“站点”选项，在“新建站点”对话框里，我们可以选择“空站点”图标来创建一个空站点。“新建站点”对话框中还有许多其他图标，这是FRONTPAGE提供的用来创建站点模板或向导。我们创建只有一个网页的站点或者创建空站点，都是从头开始来创建一个站点，这就好像盖房子一样，首先画图纸。然而，有许多的房子都具有相似的结构和用途，所以我们可以用一张图纸盖很多相似的房子，这样就节省了许多工作。</p><p>同样的，尽管站点的风格千差万别但是有许多站点的功能和结构都是一样的，如果我们从头开始建立站点的话，就要做许多重复劳动，这时，我们就可以使用模板或向导来建立站点。模板和向导的作用就好像盖房子的图纸一样，我们不必每次建立站点时都从头开始。我们单击“个人站点”图标，用它可以迅速创建一个个人站点，输入站点所在的位置，单击“确定”按钮，这样我们刚就创建了个人站点。个人站点模板已经为我们规划好了站点的目录和建立了相关的页面。现在我们点击一下“文件夹”按钮，双击index.htm图标，看，这就是我们的个人站点的主页。哎，好象有许多文字都不对，没关系，这些文字都是可以改变的，现在写的是文字的用途，比如“主题”文字就是用来写网站标题的地方，我们只要把它改为自己喜欢的标题就可以了。返回到“文件夹”模式，双击photo.htm。也可以把风景图片换成自己的照片，只要在新建站点的基础上进一步修改就可以做出自己的个人站点了。这不仅节省了许多力气，同时也给了初学者一个良好的出发点。</p><p>那么模板和向导有什么区别呢？我们安装软件时，一步步的用对话框提示我们完成安装过程的程序就是一个向导。在FRONTPAGE里，向导也是一种模板，不过它是一种特殊的模板，它会以对话框的形式辅助你完成站点的创建过程。</p><p>现在我们选择“文件”菜单的“新建”选项，单击“站点”命令，你看，FRONTPAGE提供了两个向导：公司展示向导、讨论站点向导，使用起来都很方便，你有兴趣也可以利用向导建立一个站点。</p><p>创建页面最简单的就是单击FRONTPAGE“常用”工具栏的“新建”按钮。它的右方有一个向下的小箭头，它是用来选择要新建什么，可以用“新建”按钮新建网页、站点、文件夹和任务。默认状态下是新建网页。</p><p>如果要新建网页，可以不用向下箭头键选择，而直接单击“新建”按钮。不过使用文件菜单的“新建”命令来新建网页能够有更大的选择。单击文件菜单的“新建”命令，选择“新建网页”，在“新建”对话框里，可以看到FRONTPAGE提供的许多网页模板，我们可以用这些模板来建立相应的网页。在右下角的预览框里可以看到选中模板的外观。选择“两栏正文”网页，这样就创建了一个新的分为两栏的网页了。然后点确定。使用模板可以不用总是从空白网页开始编辑，这样就省力很多。</p><p>网上几乎所以的网页都使用图片加以点缀，在网页中插入适当的图片，能够产生图文并茂的效果。</p><p>如果有一个图形，怎么把它放到网页上呢？</p><p>首先要看你的图形是什么格式的，也就是它扩展名是什么 只有扩展名为GIF和JPEG的图形文件才能成为我们的页面的一部分。因为这两种图形格式不仅广泛，而且有利于节省存贮空间。如果图形不是这种格式，使用了其它格式的图形文件，在保存网页时FRONTPAGE会提示做格式转换，FRONTPAGE可以自动进行格式转换。</p><p>现在可我们看看怎么插入图形 选择“插入”菜单的“图片”命令，单击“来自文件”按钮。</p><p>在默认情况下，FRONTPAGE认为你要插入的图片总是放在你建立的站点的目录或它的子目录下的。可以说,站点就是一个目录。我们把编辑的许多网页文件放在同一个目录下，我们称这个目录为站点的主目录。这些网页引用的图形一般也放在这个目录下。当然，我们也可以在这个目录下建立其他的子目录，再把所有的图形放在子目录里。所以搜索下拉列表只允许在主目录和主目录下的子目录进行选择。</p><p>如果要插入的图片不在主目录下, 在“选择文件”对话框中进行选择。选择好文件以后，单击“确定”按钮，回到“图形”对话框。单击“确定”按钮，图形就插入了。现在单击“常用”工具栏的“保存”按钮。在“另存为”对话框中输入新的web页文件的名字，单击“保存”按钮。出现了一个对话框, 因为我们刚才插入的文件不在站点内，现在FRONTPAGE要把它复制到站点内，可是使用什么名字，放在站点的哪个目录下呢，就要在这设置了，单击“改变文件夹”按钮，另外这儿还在需要时对图形的格式进行转换。单击“位置”按钮，在默认情况下，图形被保存在站点的主目录下，现在我们选择IMAGE目录，单击“确定”按钮。回到“嵌入式文件”窗口，再单击“确定”。这样，图形就保存在站点内了</p><p>我们还可以从INTERNET上插入一个图形。选择“插入”菜单的“图片”命令，在URL栏内输入图片的地址，单击“确定”按钮。由于是插入网上的图片，因此在插入图形以后，应该保存一下网页，使图形存到站点内。</p><p>您可能说,我不会画画，插入图片容易，可是编辑图片就不容易了。没关系，FRONTPAGE自己带有许多剪贴画，你可以把它们插入到自己的网页。选择“插入”菜单的“图片”命令，选择“剪贴画”。你看，各种剪贴画都分类放好了。你可以自由地选</p><p>择。不过，插入后别忘了保存网页，把剪贴画复制到站点目录下。</p><p>一般我们插入的图形总是和文本在一起的，所以调整图形和文本的对齐方式很重要。在默认情况下，图形自动与文本的底部对齐。这一个网页，由于默认的对齐效果，页面出现了大量的空白。这时就要调整图形的对齐属性。在图形上单击鼠标右键，选择“图片属性”，选择“外观”选项卡我们把对齐方式调整为“左对齐”。使用图形可以使网页更加丰富多彩，而且我们还可以用图形来建立超链接，使网页相互联系起来。怎么用图形来建立链接呢？ 其实图形超链接只要在建立超链接时选择图形就可以了。首先选中超链接的图形，单击箭头图形，单击“常用”工具栏“超链接”按钮，选择主页文件“页面</p><p>1.htm”，单击“确定”按钮.在普通模式中，按住CTRL键，单击箭头图形，就跳到主页页面了。</p><p>如果我们要在图片上加上文字，单击图形工具栏“文本”按钮，现在图形中就出现了一个文本框，输入：“机软件”按一下Esc键，取消文字编辑，就选中文字框了，调整文本框到合适的位置，单击页面其他区域，文字就添加成功了。</p><p>如果我要修改 单击一下要修改的文字，这时文字作为一个整体被选中了，再点一下文字，这时文本框里有光标闪烁，你可以编辑文本了，重新输入：“计算机硬件”，在页面其他区域单击。文字就修改完成了。</p><p>怎样使文字更丰富、活泼呢？一个简单的就是使用“格式”工具栏。</p><p>字体设置：选上文字，打开格式工具栏的“字体”下拉列表框，在里面选择相应的字体就可以了。如果浏览网页的人使用的计算机没有设置的字体？浏览器会用系统默认的字体代替你设置的字体。不过，使用常用字体是一个好习惯。</p><p>字号设置：在“格式”工具栏“字号”下拉列表框中选择相应字体就可以了</p><p>工具栏上的B、I、U图标的作用是：</p><p>按下B按钮，被选中的文字就会变为粗体</p><p>按下I按钮，被选中的文字就会变为斜体</p><p>按下u按钮，被选中的文字就会带下画线</p><p>字的颜色：单击“格式”工具栏“字体颜色”按钮旁的向下箭头，选择适当的颜色，字的颜色就改变了。</p><p>还可以对字体进行一些其他设置。选择“格式”菜单的“字体”命令，在这里我们还可以作进一步的设置。这里除了“格式”工具栏可以做的设置以外，还可以设置许多效果。“字符间距”选项卡：它是用来设置文字的间距的。单击“间距”下拉列表，可以选择字符的间距是普通、扩充还是紧缩的。选择扩充，这时预览框的文字间距就变大了。也可以调整间距大小来改变间距，输入10，文字的间距就更大了。</p><p>“定位”下拉列表：在FRONTPAGE中每一行都有一个底线，定位就是指文字相对于底线的距离。也就是把文字上下移动，现在选择“上移”，文字就向上移动了。预览框中的黑线就是行的底线。</p><p>设计好的页面，应该检查它在浏览器中是否显示正常。</p><p>方法是，一般只要切换到预览模式就可以了。单击“预览”选项卡，在这个预览模式下的显示和在浏览器中的显示是一样的。但这并不意味着我们就不必用浏览器来检查编辑的网页了。因为即使是同一个页面，可能在不同的浏览器中显示会不太一样。比如在INTERNET EXPLORER中是这样显示的，但是在NETSCAPE中又是那样显示的。所以，我们要在自己的机器上多装几个浏览器，用来检查网页的兼容性。</p><p>那么为什么不用不同的浏览器来检查呢？选择“文件”菜单的“在浏览器中预览”选项，在浏览器列表框中选择不同的浏览器。（以INTERNET EXPLORER 5.0为例）单击“确定”</p><p>按钮。就可以看到新建页面在浏览器中的效果了。</p><p>怎样才能自己做的网页相互联系起来呢?也就是说让别人点页面上的图形或文本就跳转到其他页面呢？</p><p>在网页里，我们把这种点击后会进行页面切换的网页界面元素叫超链接。先来看一下用文字来建立链接。</p><p>首先创建一个指向站点内其他网页的超链接。</p><p>选择“插入”菜单的“超链接”命令，在文件列表框内选择“页面1.htm”文件，注意在URL文本框中显示了该文件的地址。单击“确定”按钮.超链接就制作成功了。我们切换到预览模式（单击预览按钮），当我们把鼠标指向“主页”两字时鼠标变成手形，单击它，我们就切换到主页了。</p><p>那么为什么不在普通模式下试呢？：因为普通模式主要是用来编辑网页的，当我们在普通模式把鼠标指向“主页”两字时鼠标没有变成小手状，因此不能进行页面切换。不过如果按住CTRL键，鼠标就变成了小手状。这时单击就可以进行切换了。也就是说在普通模式中按住CTRL键才能激活超链接。</p><p>我们也可以将超链接指向其他站点的网页。选中作为超链接的文本，单击“常用”工具栏的“超链接”按钮，这和选择插入菜单的超链接命令是一样的。在“创建超链接”对话框里，在URL地址栏直接输入要连接的网页或网站的地址。如果不清楚要作超链接的地址，只要单击URL地址框后面的放大镜就可以用浏览器在INTERNET上查找要链接的网页，FRONTPAGE会自动记录你找到的地址。单击“确定”按钮就可以了。我们还可以改变已经设置好的超链接。首先确认是普通模式，在要改变的超链接下单击鼠标右键，选择“超链接属性”命令，输入新的URL地址就可以了。要想取消超链接，删除所有URL地址框里的就可以了。还有一种超链接，可以链接邮件。这样可以使你的网上朋友通过Email及时与你联系，这是一个网站站长和网友交流的重要手段。先选中要作为超链接的文本，一般文本就是你的邮箱地址，单击“超链接”按钮，单击“信封”按钮，输入你的邮箱地址，单击“确定”按钮，退出对话框，选择“确定”，这时超链接就建立好了。我们试一下，切换到预览模式，单击邮件链接。</p><p>这样我们就差不多完成了网页的制作步骤，最后可将它发布到Web服务器上。站点发布前还要对它进行检查工作，包括超链接，页面等。</p><p>【】</p><p>〈1〉乔春源，樊天岳等。信息技术。江苏技术出版社，2001年7月。</p><p>〈2〉李振格。Office入门与提高。清华大学出版社，2001年2月。</p><p>〈3〉王超锋。网页制作。人民邮电出版社，2001年10月。</p><h2><a name="5" >第五篇：FrontPage制作简单网页(高二公开课教案)（本站推荐）</a></h2><p>FrontPage制作简单网页</p><p>（高二信息技术公开课教学教案）</p><p>［ 教学目的 ］</p><p>了解网站的基本结构、构建网站的步骤，掌握用FrontPage制作简单网页 ［ 教学重点 ］</p><p>网站规划、在网页中输入文字，插入图片和表格 ［ 教学难点 ］</p><p>在网页中输入文字，插入图片和表格 ［ 教学形式 ］ 演示与练习穿插进行 ［ 教学过程 ］ ［导入新课］</p><p>大家都很喜欢上网，因为网上有许多东西（学习资料、游戏、软件、音乐……）可供我们选择，而且许多都是免费的。这就是网络的一个很重要的特点――资源共享。这些资源都是放在一个一个网站中的。我们也可以构建一个网站，把你的珍藏整理好放上去。这样别人就可以分享你的东西。目前，在网上就有许多有名的个人网站，像华军软件、电脑之家、驱动之家、九天音乐等。［讲授新课］</p><p>要想在网上安家落户，大体上有以下三步：网站规划、网页制作和上传以布。今天我们就先来学习网站规划和简单网页的制作。</p><p>一、网站规划</p><p>（在制作网页之前要先建站，如果没有事先的准备及策划，只盲目的开始编辑网页，将要花更多的时间和精力在网站的整合上。所以要养成先建站再织网的好习惯）</p><p>1． 确定网站的主题</p><p>2． 网站要包含哪些咨训与服务 3． 构思每个网页的草图 4． 确定网页与网页之间的链接</p><p>演示：</p><p>1、用FrontPage中的导航来更直观地了解网站结构；</p><p>2、用FrontPage新建一个站点；</p><p>（1）打开FrontPage，选择“文件”－＞“新建”－＞“站点”；（2）单击“只有一个网页的站点”</p><p>注：在“文件夹列表”中显示该站点中所有的文件夹和文件。（一般新建站点后就有两个文件夹，我们一般将网站所需的图片放在“image”文件夹中，当然你也可以根据需要新建一些文件夹，但必须在一个站点中）练习：</p><p>1． 自己构建一个个人网站；</p><p>2． 新建个人网站（当然此时的个人网站还只是和个空白网页）二．制作网页“自我简介”（先展示一下做好的“自我简介”）</p><p>（一）在网页中输入文字和插入表格</p><p>1． 在网页中编辑工作区输入文字“自我简介”，居中；</p><p>2． 选中文字“自我简介”，选择“楷体＿GB2312”，字号为“6（24）磅”，粉红色）； 3． 选择“插入”－＞“换行符”，在弹出的“换行符属性”对话框中选择“普通换行符”，单击“确定”，光标移到下一行； 4． 单击“常用”工具栏上的“插入文件中的图片”按钮，弹出“图片”对话框； 5． 单击“剪贴画”按钮，在“比喻”类别中选择一幅图片，将此图片插入网页中； 6． 调整图片的大小，居中放置；</p><p>7． 选择“格式”－＞“背景”命令在网页中加入背景图片； 8． 单击“网页编辑区”下方的“预览”标签，可以预览网页的效果。</p><p>（二）制作“自我简历表”</p><p>网页中仅有一个标题和一幅图片，内容太少，下面插入一个表格 1． 单击“常用”工具栏上的“插入表格”按钮，制作一个6行2列的表格； 2． 在第一行第二列中，将单元格拆分成3列； 3． 输入“自我简历表”中的文字；</p><p>4． 选中第一、三列，将字体设为“黑体”，字号为“4（14）磅”，字型为“粗体”，选中第二、四列，将字体设为“楷体”，字号为“4（14）磅”，选中这个表格，单击“居中”按钮，选中第二、四、六行，设置颜色为“浅绿色”；选中这个表格，单击右键，选择“表格属性”命令，选择边框颜色为“粉红色”，粗细为1；单击确定。注：</p><p>1、格的边框粗细设为0，则表格不显示边框。（我们可以利用这一特点来合理安排网页的版面设置，书上163页图7.14的混合排版效果就是一例</p><p>2、“文件夹列表”中，双击某一网页，该网页就会显示在网页编辑区中，练习：</p><p>1． 在刚刚新建的站点上新建几个网页；</p><p>2． 在编辑网页时，学会使用表格来对网页进行排版。三．小结</p><p>展示和评讲学生作品</p> </div>
</article>
<a href="#" tpid="25" target="_self" class="download_card jhcdown" rel="nofollow">
<img class="download_card_pic" src="//static.xiexiebang.com/skin/default/images/icon_word.png" alt="下载FrontPage网页制作教案(18课时)word格式文档">
<div class="download_card_msg">
<div class="download_card_title" style="text-decoration:none;">下载FrontPage网页制作教案(18课时).doc</div>
<div class="download_card_tip">将本文档下载到自己电脑，方便修改和收藏，请勿使用迅雷等下载。</div>
</div>
<div class="download_card_btn">
<img src="//static.xiexiebang.com/skin/default/images/icon_download.png">
<div class="downlod_btn_right">
<div>点此处下载文档</div>
<p>文档为doc格式</p>
</div>
</div>
</a>
<div class="post-tags mt20 mb30"><span>相关专题</span>
</div>
<div class="single-info mb40"><span class="hidden-xs ">网址：https://www.xiexiebang.com/a5/2019051223/f4911b63b602fc45.html</span><br>声明：本文内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：645879355@qq.com 进行举报，并提供相关证据，工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。 </div>
<div class="single-xg mb40">
<div class="con-title">
<h3><a name="6"></a>相关范文推荐</h3>
</div>
<div class="sticky mb20">
<ul><h2 class="mb20"><a href="/jiaoxue/kejian/3a8d173b15116244.html" target="_blank">用FrontPage制作网页课件教程</a></h2><p>用FrontPage制作网页教程 【教学目标】了解用FrontPage制作课件的优势与不足，学会用FrontPage制作网页型课件。 【重点难点】重点是如何在FrontPage插入多媒体素材，难点是课件......</p><h2 class="mb20"><a href="/jiaoxue/kejian/28fcc6c51136de53.html" target="_blank">用FrontPage制作网页课件教程汇总</a></h2><p>用FrontPage制作网页课件 【教学目标】了解用FrontPage制作课件的优势与不足，学会用FrontPage制作网页型课件。 【重点难点】重点是如何在FrontPage插入多媒体素材，难点是课......</p><h2 class="mb20"><a href="/a1/2019051217/eb65100aa6bdca21.html" target="_blank">高一frontpage制作网页教程(二)</a></h2><p>应用frontpage制作网页（二） 一、网页美化 A、添加网页背景：即整个网页的背景。 在编辑窗口中选择“普通”选项卡，在编辑区单击右击选择“网页属性”调出“网页属性”对话框，选择......</p><h2 class="mb20"><a href="/a15/201905155/e0164fcbe5deed15.html" target="_blank">网页制作教案四课时</a></h2><p>网页欣赏 学习目标 知识目标：了解网页是由哪些内容组成的； 能力目标：了解网页的简单结构； 情感目标：培养学生的审美观念。 本节重点：网页的概念 难点 网页的结构 学习过程 一、导......</p><h2 class="mb20"><a href="/a1/2019051221/127f54d8edca0090.html" target="_blank">Frontpage网页设计之主页制作5篇范文</a></h2><p>网页的制作教案 一、教学目标： 1、知道站点、主页的概念，能在指定位置建立只有一个网页的站点； 2、认识FRONTPAGE的界面； 3、掌握在主页中插入文字、图片、水平线； 4、掌握页面文......</p><h2 class="mb20"><a href="/a5/2019051223/c65e010ba8b44be3.html" target="_blank">网页制作教案</a></h2><p>网页制作与设计教案 第一讲 网页设计概述 .................................................................................................................... 3 1.......</p><h2 class="mb20"><a href="/a5/2019051223/0944f29844b4da3a.html" target="_blank">《网页制作》教案范文</a></h2><p>《信息技术》第三册新课程标准教案 制作第一个网页(网页诞生了) [教学目的] 1．通过浏览几个精彩网页，激发学生制作网页的学习兴趣。 2．熟练掌握启动Frontpage 2000，熟悉Frontpa......</p><h2 class="mb20"><a href="/a5/201905130/f0b5bafafc388bd3.html" target="_blank">《网页制作》教案（范文大全）</a></h2><p>《网页制作》教案 潘有寅 一、说教材： (一)教材分析：现在网络快速发展，广大的学生接触，使用INTERNET的机会也大大增加，学生在使用网络 获取信息时，更多的是通过浏览网页这一方式，......</p></ul> </div>
</div>
</div>
</div>
<div class="right-content-box wow fadeInRight delay300 right-content">
<script src="/e/member/login/loginjs.php"></script>
<div class="sidebar">
<div id="sidebar" role="complementary">
<aside id="recent-posts-3" class="widget widget_recent_entries">
<h3 class="widget-title">猜你喜欢</h3>
<ul class="new-list"><li><a href="/a5/2019051223/5c5766cd995d68ed.html" title="网页制作教案" target="_blank">网页制作教案</a></li><li><a href="/a5/201905130/84cb5012f197b7e3.html" title="网页制作教案" target="_blank">网页制作教案</a></li><li><a href="/jiaoxue/jiaoan/2924fadc7106efeb.html" title="Frontpage教案" target="_blank">Frontpage教案</a></li><li><a href="/a15/201905155/1a48606af641ef71.html" title="Frontpage教案" target="_blank">Frontpage教案</a></li><li><a href="/a5/2019051223/a022a0f83c29056f.html" title="dreamweaver网页制作教案" target="_blank">dreamweaver网页制作教案</a></li><li><a href="/a5/2019051223/c35ea2a4d6d422b5.html" title="网页制作教案10" target="_blank">网页制作教案10</a></li><li><a href="/a5/2019051223/186e17ac96ff4b29.html" title="网页制作基础知识 教案" target="_blank">网页制作基础知识 教案</a></li><li><a href="/a5/201905130/1b6264264bab3034.html" title="网页制作教案8." target="_blank">网页制作教案8.</a></li><li><a href="/a5/2019051223/cbe404a201a379dc.html" title="动态网页制作教案（精选合集）" target="_blank">动态网页制作教案（精选合集）</a></li><li><a href="/a5/201905130/a767a396b57e8517.html" title="《网页制作工具》参考教案" target="_blank">《网页制作工具》参考教案</a></li></ul> </aside>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="footer" class="p30">
<div class="container">
<div class="footer-top clearfix">
<div class="copyr">
<div class="footer-menu clearfix mb10">
<ul class="footer-menu-con">
<li><a href="/a1/">1号文库</a></li><li><a href="/a2/">2号文库</a></li><li><a href="/a3/">3号文库</a></li><li><a href="/a4/">4号文库</a></li><li><a href="/a5/">5号文库</a></li><li><a href="/a6/">6号文库</a></li><li><a href="/a7/">7号文库</a></li><li><a href="/a8/">8号文库</a></li><li><a href="/a9/">9号文库</a></li><li><a href="/a10/">10号文库</a></li><li><a href="/a11/">11号文库</a></li><li><a href="/a12/">12号文库</a></li><li><a href="/a13/">13号文库</a></li><li><a href="/a14/">14号文库</a></li><li><a href="/a15/">15号文库</a></li>
</ul>
</div>
<p>Copyright © 2018 <a href="/">写写帮文库</a> All Rights Reserved <a target="_blank" href="http://www.beian.miit.gov.cn" rel="nofollow"> 浙ICP备11058632号</a>
<script type="text/javascript" src="//static.xiexiebang.com/skin/default/js/tj.js"></script></p> </div>
</div>
</div>
</section>
<script type='text/javascript' src='//static.xiexiebang.com/skin/default/js/superfish.js'></script>
<script type='text/javascript' src='//static.xiexiebang.com/skin/default/js/jquery.slicknav.js'></script>
<script type='text/javascript' src='//static.xiexiebang.com/skin/default/js/xs.js'></script>
<div class="right_bar hidden-xs ">
<ul>
<li class="rtbar_li1" style="left: 0px;"><a><img src="//static.xiexiebang.com/skin/default/images/rtbar_liicon3.png"><span id="call_tel"></span></a></li>
<li class="rtbar_li2"> <a href="javascript:void(0);"> <img src="//static.xiexiebang.com/skin/default/images/rtbar_liicon4.png"> </a>
<div class="rtbar_shwx" style="display: none;"> <img width="188" height="188" alt="微信二维码" src="//static.xiexiebang.com/skin/default/images/wechat.png"> </div>
</li>
<li class="rtbar_li3" style="left: 0px;"> <a href="tencent://message/?uin=2261362615&Menu=yes"> <img src="//static.xiexiebang.com/skin/default/images/rtbar_liicon2.png"> 点击咨询 </a> </li>
<li class="rtbar_li5"><a href="#1">第一篇</a></li>
<li class="rtbar_li6"><a href="#2">第二篇</a></li>
<li class="rtbar_li7"><a href="#3">第三篇</a></li>
<li class="rtbar_li8"><a href="#4">第四篇</a></li>
<li class="rtbar_li9"><a href="#5">第五篇</a></li>
<li class="rtbar_li10"><a href="#6">更 多</a></li>
<li class="rtbar_li4 gotop"> <a href=""><img src="//static.xiexiebang.com/skin/default/images/rtbar_liicon1.png"> </a></li>
</ul>
</div>
</body>
</html>]]> 