Microsoft Office FrontPage 已经在 2006 年停止开发，并且自 Office 2007 版本起被官方淘汰。 它的继任者是 Microsoft SharePoint Designer 和 Expression Web，但这两个产品也已停止支持。
这份教程主要面向需要维护或学习 FrontPage 历史网站的用户，或者纯粹出于兴趣想了解这款经典网页制作工具的人。对于任何新的网站项目，强烈建议使用现代工具，如 WordPress、Wix、Adobe Dreamweaver 或 VS Code 等代码编辑器。
第一部分：认识 Microsoft FrontPage
FrontPage 是一款“所见即所得”（What You See Is What You Get, WYSIWYG）的网页编辑器，这意味着你不需要编写复杂的 HTML 代码，而是通过类似操作 Word 文档的界面来创建和编辑网页。
核心特点：
- 图形化界面：直观的工具栏、菜单和右键菜单，让你像排版文档一样设计网页。
- 模板与向导：内置大量精美的网站模板和网页模板，让你可以快速创建一个专业的网站框架。
- 站点管理：强大的“网站管理”功能是 FrontPage 的核心，它可以管理整个网站的文件、超链接、导航结构等，是当时最先进的网站管理工具之一。
- 组件：提供大量可拖放的组件，如悬停按钮、计数器、导航栏、表单处理等，让不具备编程知识的人也能实现动态功能。
- 共享边框：可以在网站的多个页面上统一设置上、下、左、右的边框区域，用于放置公司 Logo、导航菜单、版权信息等，实现网站的统一风格。
- 发布功能：内置的 FTP 功能，可以一键将你制作好的网站上传到网络服务器上。
第二部分：FrontPage 工作环境初探
打开 FrontPage，你会看到一个熟悉的 Microsoft Office 风格界面。
主要区域：
- 菜单栏：包含文件、编辑、视图、插入、格式、工具、表格、框架等所有命令。
- 工具栏：常用命令的快捷按钮，如新建、打开、保存、预览、在浏览器中预览等，可以右键点击菜单栏区域，选择“工具栏”来显示或隐藏不同的工具栏。
- 视图栏：这是 FrontPage 的精髓所在，位于编辑窗口的左下角，它提供了四种查看和管理网站的模式：
- 网页：默认模式，用于编辑单个网页的 HTML 代码或可视化设计。
- 文件夹：显示网站中所有的文件和文件夹，类似于 Windows 资源管理器，你可以在这里创建、重命名、删除文件和文件夹。
- 报表：生成关于整个网站的详细报告，如断开的超链接、未使用的文件、组件错误等，是维护网站健康度的利器。
- 导航：以树状结构展示网站的逻辑结构，你可以在这里拖拽页面来改变网站的导航菜单，非常直观。
- 超链接：可视化地查看和编辑某个页面指向其他页面的所有超链接。
- 编辑区：中间最大的区域，是你设计和编写网页内容的地方。
- 任务窗格：通常位于右侧，提供常用命令的快捷入口，如“开始工作”、“新建网页”、“打开网站”等。
第三部分：从零开始创建你的第一个网站
我们将通过一个简单的步骤,来体验 FrontPage 的核心功能。
步骤 1：创建一个新网站
- 打开 FrontPage。
- 在右侧的“开始工作”任务窗格中，点击“新建网站”。
- 在弹出的“网站模板”对话框中，选择一个模板，为了简单起见，我们先选择“只有一个网页的网站”。
- 在“指定新网站的位置”中，选择一个本地文件夹作为你的网站根目录（
D:\MyFirstWebSite）。 - 点击“确定”。
FrontPage 会在你指定的位置创建一个网站，并自动生成一个名为 index.htm (或 index.html) 的主页，以及一个名为 _private 的隐藏文件夹（用于存放不想被公开的文件）。
步骤 2：使用“导航”视图构建网站结构
- 切换到左下角的“导航”视图。
- 你会看到一个名为“主页”的方框。
- 右键点击“主页”，选择“新建” -> “网页”。
- 重复此操作,创建几个新页面，关于我们”、“产品介绍”、“联系方式”。
- 你可以通过拖拽这些页面的方框来调整它们在导航结构中的位置，将“关于我们”拖到“主页”下面，它就会成为主页的一个子页面。
步骤 3：应用共享边框和导航栏
- 在“文件夹”视图中，双击打开
index.htm（主页）。 - 在菜单栏选择“格式” -> “共享边框”。
- 勾选“所有网页”，然后勾选“上”、“下”、“左”等位置，点击“确定”。
- 你会在主页的顶部、左侧看到灰色的占位符。
- 在左侧的共享边框区域,将光标定位，然后选择菜单栏“插入” -> “导航”。
- 在弹出的对话框中,选择“基于导航结构的栏”，然后在下面的“要添加到导航栏中的 hyperlinks:”列表中选择“主页”、“关于我们”等。
- 点击“确定”，一个导航栏就自动生成了！它会在你所有应用了共享边框的页面上显示，并且会根据你在“导航”视图中调整的结构自动更新。
步骤 4：编辑网页内容
- 回到主页的编辑区。
- 在顶部的共享边框（如果设置了），可以输入网站的标题，我的第一个网站”。
- 在中间的主内容区,像在 Word 中一样输入文字、设置标题、字体、颜色等。
- 选择菜单栏“插入” -> “图片” -> “来自文件”，可以添加你准备好的图片。
- 在“联系方式”页面中，我们可以插入一个表单。
- 将光标定位到内容区。
- 选择菜单栏“插入” -> “表单” -> “表单”，你会看到一个虚线框，里面有一个“提交”和一个“重置”按钮。
- 在虚线框内,输入“姓名：”，然后选择“插入” -> “表单” -> “文本框”。
- 再输入“留言：”，然后选择“插入” -> “表单” -> “文本区”。
- 保存页面,FrontPage 会自动处理表单提交（通常会将结果保存到网站
_private文件夹下的一个.txt文件中）。
步骤 5：预览和发布
- 预览：在编辑页面时，可以随时点击工具栏上的“在浏览器中预览”按钮（像一个地球仪的图标），看看你的网页在浏览器中实际是什么样子。
- 发布：
- 当你的网站制作完成后,选择菜单栏“文件” -> “发布网站”。
- 在弹出的对话框中,输入你网站的 FTP 地址、用户名和密码。
- 点击“发布”，FrontPage 就会自动将你本地网站的所有文件上传到服务器上。
第四部分：重要技巧与注意事项
- 图片处理：FrontPage 对图片的处理比较简单，建议先将图片用其他软件（如 Photoshop）处理成合适的尺寸和格式（通常是
.jpg或.gif），再插入到网页中，以保证网站加载速度。 - 表格布局：在 FrontPage 盛行的年代，表格是进行页面布局的主要方式，学会使用“插入” -> “表格”，并设置表格的边框为 0，可以创建出非常复杂的页面布局。
- 兼容性问题：FrontPage 生成的代码（尤其是使用其组件时）对现代浏览器的兼容性很差，如果你在维护一个旧 FrontPage 网站，可能会发现它在 Chrome、Firefox 等现代浏览器中显示错乱。
- 安全性：FrontPage 的“扩展”功能（如表单处理、计数器）需要服务器端安装特定的“FrontPage 服务器扩展”，这在现代服务器上已经很少见，且可能存在安全漏洞。
第五部分：替代方案与未来
由于 FrontPage 已经是“古董”软件，如果你有新的建站需求，请考虑以下现代替代品：
-
内容管理系统：
- WordPress：全球最流行的 CMS，功能强大，插件和主题丰富，适合博客、企业官网、电商等几乎所有类型的网站。
- Joomla / Drupal：功能同样强大的 CMS，比 WordPress 更具灵活性，但学习曲线稍陡。
-
网站构建器：
（图片来源网络，侵删）- Wix / Squarespace / Shopify：提供拖拽式可视化编辑器，上手极快，适合没有技术背景的个人用户和小型商业项目。
-
专业代码编辑器：
- Adobe Dreamweaver：集可视化编辑和强大代码编辑功能于一体，是专业网页设计师的常用工具。
- Visual Studio Code (VS Code)：免费、开源、强大的代码编辑器，通过安装插件（如 Live Server）可以实现实时预览，是现代前端开发的主流选择。
Microsoft FrontPage 是一款划时代的网页制作工具，它极大地降低了个人和中小企业创建网站的门槛，开启了“全民建网”的时代，通过本教程，你应该对它的基本操作和核心理念有了初步的了解。
虽然它已退出历史舞台,但学习它有助于你理解网页设计的基本原理，并为学习现代建站工具打下基础，对于任何新的项目，请拥抱更现代、更安全、更高效的工具。
