网页制作工具FrontPage(精)

第五章 FrontPage第五章 FrontPage (124)实验5.0 FrontPage的启动与建立站点 (124)任务1 FrontPage的启动与关闭 (124)任务2 建立站点 (126)实验5.1 网页制作1 (129)任务1 新建、打开与保存网页 (129)任务2 文本格式编辑 (131)任务3 插入对象 (135)作业5.1 (138)实验5.2 网页制作2 (140)任务1 网页属性设置 (140)任务2 图片操作及动态HTML效果 (143)任务3 表格操作 (145)作业5.2 (149)实验5.3 网页制作3 (151)任务1 书签超连接 (151)任务2 超连接 (154)作业5.3 (157)实验5.4 框架网页 (158)任务1 创建与保存框架网页 (158)任务2 框架属性 (161)任务3 编辑框架中的网页 (165)作业5.4 (169)实验5.0 FrontPage的启动与建立站点任务1 FrontPage的启动与关闭⒈启动FrontPage，查看网页编辑的三种工作环境；操作步骤⑴【开始】→【程序】→【Microsoft FrontPage】，出现FrontPage窗口，窗口界面的主要功能见图5.1。

124125说明程序启动后，自动进入“网页管理器”工作视图窗口，并建立名为new_page_1.hrm 的网页文件。

⑵ 分别单击【普通】、【HTML 】、【预览】三个标签，查看各窗口。

说明⑴ 由于当前打开的是一个空白网页，所以【普通】、【预览】两个窗口无内容，在以后的操作中我们会在【普通】窗口中进行网页的编辑工作，经常会使用【预览】窗口查看网页制作的效果。

⑵ 【HTML 】窗口中出现的是用HTML 语言编写的网页的源代码。

可以直接编写、修改源代码，同样可以达到编辑网页的目的。

⒉ 关闭FrontPage ，返回WINDOWS 。

操作步骤选【文件】→【退出】；（或：单击窗口右上方“×”按钮），返回WINDOWS 。

Dreamweaver和FrontPage功能比较随着网络的高速发展，各种网站也随之产生，并以惊人的速度不断增加着。

网站建设和网页制作越来越成为各大公司发展的重点。

可是，众多的网页制作工具让人眼花缭乱，难以取舍，所队我想就目前最为广泛使用的两大网页制作工具，Macromedia公司的Dreamweaver 和Microsoft公司的Frontpaqe做一个对比，让广大用户更容易找到适合自己的网页制作工具。

就网页制作本身而言，Dreamweaver和Frontpage有着许多相似的功能，如果说Frootpage是针对具有较强技术知识（比如能编程）的用户，Dreamweaver则针对具有较高创意能力的用户，因为他们能设计更有视觉化效果的页面，下面就具体谈一谈。

一、工作界面的不同Dreamweaver提供给用户的是一个简洁的工作界面，主要体现在工作窗口和HTML源代码两方面。

由于Dreamweaver采用浮动工具条方式，在需要时可以隐蔽所有的工具条，所以整个工作窗口都可用于显示你所制作的网页，让你的可视范围更大、更清晰。

对Frontpage 而言，有着与MS Word相似的工作界面、工具条，可以通过工具栏随意隐藏。

井可以快速查看HTNL源码和预览。

对于一个刚开始从事网页制作的人来说，Frontpage会让你感到非常容易上手，因为它的工作模式，更容易为大多数人所接受。

二、提供功能各有特点Dreamweaver和Frontpage的相似功能,这两个工具中的类似功能非常多。

例如Styles（样式表）。

Deamweaver在新建一个CSS Styles 时，可以创建三种不同的类型并可以定制阶层样式表单、绝对座标定位，定义作为外部文件时的使用方式等。

举一个具体的例子，在Dreamweaver中去除超链接下划线，只要在CSS Styles中新建一个样式表，在Type中的Decoration的复选框中选择none后，对超链接应用此式样就完成了。

FrontPage（网页制作）操作步骤：
（含义：→是指按动鼠标左键一下（或选中）；双击→是指连续快速按动鼠标左键两次；鼠标右键时→鼠标编辑对象时不要移动鼠标）
FrontPage编辑时一定要选中对象
菜单栏：
常用工具栏：
（1）打开题目：先打开“题目”word文档，按要求打开网页文件（找到文件所在的路径：打开“我的电脑”→“文件所在的盘符”→“文件所在的路径”）;
（2）字体和段落设置：和word一样；
（3）插入水平线：鼠标移动到相应位置→“插入”→“水平线”→选中水平线→“格式”→“属性”→可设置水平线长度、颜色等；
（4）插入图片：“插入”→“图片”→“来自文件夹的图片”→在插入图片对话框“查找范围”中正确找到图片所在的位置→插入图片；
（5）设置字幕：选中设置对象→“插入”→“组件”→“字幕”（选择相应的选项）；
（6）设置超链接：选中要设置超链接的对象→“插入”→“超链接”→“URL后面的（制作一个指向你计算机上文件的超链接）”→“查找范围”找到文件的位置→“确定”；
（7）合并单元格：选中要合并的单元格→“表格”→“合并单元格”；
（8）表格设置：选中表格→“表格”→“属性”→“表格”
（9）单元格设置：选中单元格→“表格”→“属性”→“单元格”
（10）网页属性设置：“格式”→“背景”（背景图片、颜色、音乐、标题等）；
（11）保存网页。

网页制作是什么？网页制作就是根据网页效果图，把它实现成浏览器中可以浏览的网页。

我们已经使用过或者听别人介绍过很多的网页制作工具。

FrontPage，Dreamweaver，GoLive 等等这些都是我们平常所知道的网页设计软件，而FrontPage毫无疑问是一个简单易用，功能强大的网页制作工具。

如今FrontPage推出了新的版本，他依旧是和Office 一起推出的，不过不同于以往的是，新版本Office系列软件不再是以年份来命名了，使用了新的命名方式，MicroSoft公司将其冠名为Office XP，XP是单词Experience（“体验”）的缩写。

所以我们下面介绍的就是FrontPage XP。

毫无疑问，我们下面的网页制作过程将是一个不同于以往的全新的体验过程。

设计初步――新建站点启动FrontPage XP，如果是第一次启动FrontPage XP时，会发现新版的FrontPage在用户界面上做了一些改动，在右边有一个几乎占据屏幕五分之一空间的任务窗（图一），集中了一些主要的命令，而这些任务命令会随着你操作的不同而改变。

实际上，Office XP的每一个应用程序，从Outlook到Publisher，都有任务栏。

图一 FrontPage XP界面我们选择空白站点，因为我们需要建立的是一个站点，而不仅仅是一个页面，当然，我们在网站建立的过程中需要添加页面的时候，当然是选择建立一个空白页面了。

然后弹出Web站点模版窗口，实际上又很多模版可供选择，如：个人站点，公司展示站点，客户支持站点等等，这些模板都是很不错的选择。

为了简单起见，我们选择个人站点，图二就是用个人站点模版建立的站点的页面。

图二用个人站点模板建立的站点的页面∙我们先切换到超链接视图状态看看FrontPage XP是如何设计整个站点的吧。

图三超链接视图左边的树状结构列出了所有的页面，可以通过按加号和减号来扩展和收缩。

右边列出当前页的连接，同样也可以通过按加号和减号来扩展和收缩。

FrontPage网站制作教程一、基础知识技巧（一）创建网站1、在硬盘中建立一个文件夹（将要建立的网站的位置）2、打开FrontPage网页制作软件，单击“文件”——新建——由一个网页组成的网站——找到“选项”，单击“浏览”，找到刚才建立的文件夹——单击“打开”——确定（网站创建完成）3、给网站改名字菜单栏，单击“工具”——网站设置——常规——输入名称——应用。

4、文件夹列表①打开文件夹列表的方法：菜单栏，单击“视图”——文件夹列表②增加文件夹：在文件夹列表中，单击新建文件夹，更改名称。

5、浏览制作的网页（快捷键F12）（二）网页的操作1、页边距的设置鼠标指向网页的空白处，右键单击——网页属性——高级——边距设置0像素（这样设置后网页的内容会顶格显示）2、背景设置方法①：网页空白处，右键——网页属性——格式——背景（根据个人爱好可以选择图片或者颜色）——确定方法②：菜单栏，格式——背景3、网页名字与网页标题的区别（网页的名字是在文件夹列表中我们看到的名字。

）（网页的标题是显示在浏览器上方的名称。

）右键单击——网页属性——标题（输入网页的名称）——确定4、复制网页在文件夹列表中，右键单击要复制的网页——复制——在空白处，右键——粘贴（更改名称）（三）文字操作1、导入文字菜单栏，单击“插入”——文件——选择文件类型——点击“打开”2、格式刷的使用格式刷的位置：工具栏——格式刷选中带格式的文字——点击格式刷——刷要改变的文字（注：单击格式刷使用一次，双击格式刷可以使用多次）（四）表格的操作1、插入表格菜单栏，表格——插入——表格（选择需要的行数和列数）——确定2、删除表格菜单栏，表格——选择——表格——再次点击菜单栏“表格”——删除单元格（删除表格中的行、列或者单元格，方法同上）3、插入单元格①菜单栏，表格——插入——根据需要选择②单元格中，右键——插入行或者插入列代码：table——表格 tr——行 td——单元格4、添加标题光标放在任意一个单元格中，菜单“表格”——插入——标题5、调节单元格宽和高选中单元格——菜单“表格”——根据内容调整表格、平均分布各列、平均分布各行（根据需要选择）6、合并单元格选中两个以上的单元格，右键——合并单元格7、拆分单元格光标放在需要拆分的单元格内，右键——拆分单元格——根据需要选择——确定8、文本转换成表格选中文本，菜单栏“表格”——转换——选择相应的内容——确定9、自动套用格式菜单栏，表格——表格自动套用格式，选择喜欢的样式——确定（五）项目符号和编号、图像、音频和视频等元素1、插入项目符号和编号选中文字段落，菜单栏，格式——项目符号和编号2、插入图片菜单栏，插入——图片——来自文件，找到相应的图片——插入（单击图片，出现8个黑点，可以用鼠标调节图片的大小）3、插入flash影片①菜单栏，插入——图片——flash影片——插入②设置flash内容单击flash，出现8个黑点，用鼠标拖动，可以改变flash大小双击flash，打开flash影片属性面板，进行相应的设置——确定（注意：保存flash时，要保存在同一个网站内）4、制作按钮菜单栏，插入——交互式按钮——选择喜欢的风格——确定5、添加背景音乐右键——网页属性——背景音乐——浏览——确定（六）框架1、框架的概念2、创建框架菜单栏，文件——新建——其他网页模板——框架网页（选择喜欢的风格）3、保存框架网页（多个网页）4、设置初始页选中网页，菜单栏“框架”——框架属性——设置初始页5、设置框架显示选择任意一个框架，右键——框架属性——框架网页，打开网页属性——框架，去掉“显示边框”前面的“√”——确定6、重命名框架选择框架，右键——框架属性——输入名称——确定7、调整框架①选择框架，右键——框架属性——更改宽度和高度——确定②手动更改：把光标放在两个框架的中间的线上，按住鼠标就可以惊醒拖动。

frontpage教程:编辑网页第一课：frontpage教程:网页制作基础知识1.视图与模式（一）现在进入frontpage。

单击任务栏“开始”按钮，选择“程序”选项，单击“microsoftfrontpage”选项就可以了。

可能你会发现frontpage界面和word很相似[图2－1]，这是因为编辑web页面和编辑word文档有很多同样的设置，这些设置所用的图标和word中的是一样的。

[图2－1]frontpage2000界面视图中的组框是用来切换视图的，单击里面的小图标就可以切换到不同的视图。

frontpage共有6种视图[如图2－1左]，使用不同的视图可以从不同的侧面查看设计的web 站点。

对一个web站点而言，不断更新是很重要的。

随着站点的成长，维护站点的工作量会越来越大。

建立站点可能很快，但是如果没有这6种视图的帮助，维护起来就很困难了。

这些视图的使用不用一下就全部掌握，只要知道有这些视图就可以了。

2.视图与模式（二）下面看一看同一个web站点在不同视图中是怎样显示的。

(1)单击“网页”按钮，切换到网页视图，再单击工具栏上的“文件夹列表”按钮，窗口中增加了一个文件夹列表框[图2－2]。

网页视图是用来显示选中的网页的，双击文件夹列表中的某一个htm文件，在最右方的工作区中就会显示该网页的内容。

注意，此时工作区的左下角有三个切换显示模式的选项卡[图2－3]。

单击“普通”选项卡，就切换到了普通模式。

在普通模式可以编辑网页的内容以及设置各种格式。

单击“预览”选项卡就到了预览模式。

如果要看一看当前编辑的文件在浏览器中的显示情况，就使用预览模式，在预览模式下，是不能编辑网页的。

也可以切换到html模式直接对网页对应的html文本文件进行编辑，从而为网页作一些特殊的设置，前提是你要懂一点html语言（在教程附录中有相关说明）。

(2)文件夹视图以列表的形式给出了当前web站点的文件夹和文件夹里包含的文件[图2-4]。