这份教程将带你从零开始，使用 FrontPage 2003 制作一个简单的个人网页,并解释其背后的核心概念。
（图片来源网络，侵删）
第一部分：准备工作与软件安装
在开始之前,请确保你已经：
- 安装了 FrontPage 2003：你可以通过旧版软件光盘或在网上寻找可靠的资源（请注意安全风险）来安装它。
- 准备素材：
- 图片：准备几张你喜欢的照片（个人照片、风景照），格式为
.jpg或.png。 - 文本：准备好你想写在网页上的文字内容，比如你的个人介绍、兴趣爱好等。
- 一个存放所有文件的地方：在你的电脑上新建一个文件夹，例如命名为
我的网站，将所有图片和文字素材都放在这个文件夹里,这会让管理文件变得非常方便。
- 图片：准备几张你喜欢的照片（个人照片、风景照），格式为
第二部分：认识 FrontPage 2003 的工作界面
打开 FrontPage 2003，你会看到类似下面这样的界面，我们主要关注三个核心视图：设计、代码 和 预览。
- 设计视图：这是最核心的视图，你可以像在 Word 里一样，直接拖拽元素、输入文字、设置样式,所见即所得。
- 代码视图：这里显示的是网页的 HTML 代码，你可以在这里直接修改代码，或者学习 HTML 是如何工作的。
- 预览视图：点击这里的“预览”标签，可以模拟在浏览器（如 IE）中查看网页的效果。强烈建议在发布前多使用预览功能！
第三部分：创建你的第一个网页
步骤 1：创建新站点
一个“网站”通常包含多个“网页”以及相关的图片和文件,我们首先创建一个站点。
- 点击菜单栏的 文件 -> 新建。
- 在右侧的“新建网站”任务窗格中，选择 “由一个网页组成的网站”。
- 在“网站模板”对话框中，选择 “只有一个网页的网站”。
- 在“指定新网站的位置”中，选择或输入你之前创建的那个
我的网站文件夹的路径。 - 点击 “确定”。
FrontPage 会在你的 我的网站 文件夹里自动创建一些文件，最重要的是 index.htm（这是网站的首页）和一个名为 _private 的文件夹（用于存放不想被公开的文件）。
（图片来源网络，侵删）
步骤 2：编辑首页内容
在左侧的“文件夹列表”中，双击 index.htm，在右侧的“设计视图”中打开它。
- 将光标定位在页面的最上方。
- 输入你的网站标题，“欢迎来到我的个人主页”。
- 选中你刚输入的文字，在工具栏的“样式”下拉菜单中选择 1” (Heading 1),这会让你的标题变得非常大且醒目。
插入水平线
- 将光标放在标题下方。
- 点击菜单栏 插入 -> 水平线。
- 右键点击这条水平线，选择 “水平线属性”，你可以在这里修改它的宽度、高度、颜色和对齐方式,让它看起来更美观。
输入个人介绍
（图片来源网络，侵删）
- 在水平线下方，输入你的个人介绍文字。“大家好，我叫[你的名字]，是一名[你的职业/学生]，这是我的第一个个人网站，希望大家喜欢！”
- 你可以像在 Word 里一样，使用工具栏上的按钮来 加粗、倾斜 或 更改颜色。
插入图片
- 将光标放在你想要插入图片的位置。
- 点击菜单栏 插入 -> 图片 -> 来自文件...。
- 在弹出的对话框中,找到并选择你准备好的照片。
- 重要提示：确保你选择的图片就在
我的网站文件夹里，或者 FrontPage 会提示你“将图片保存到站点中”，请选择“是”，这会将图片复制到你的网站文件夹里,避免将来链接失效。 - 插入后，你可以点击图片,拖动它的边缘来调整大小。
插入超链接
超链接是网页的灵魂,它可以让你跳转到其他页面或网站。
- 链接到其他网页：选中你想要做成链接的文字，点击这里查看我的更多照片”，点击工具栏上的 “插入超链接” 按钮（像一个链条的图标），在弹出的对话框中，选择“原有文件或网页”，然后在文件列表中选择你将要创建的另一个网页（
photos.htm），点击“确定”。 - 链接到外部网站：选中文字，点击“插入超链接”，在“地址”栏中输入完整的网址，如
https://www.google.com，然后点击“确定”。
步骤 3：保存和预览
- 点击工具栏上的 “保存” 按钮。
- 切换到 “预览” 视图，看看你的网页效果如何，如果满意,就继续下一步。
第四部分：创建更多页面
一个网站只有一个页面太单调了，我们来创建一个“我的照片”页面。
- 在左侧的“文件夹列表”中，右键点击空白处，选择 新建 -> 网页。
- 在“新建”任务窗格中，选择 “空网页”。
- 给这个新网页命名，在文件夹列表中，右键点击这个
new_page_2.htm，选择 “重命名”，将其改为photos.htm。 - 打开
photos.htm“我的照片集”,并像之前一样进行格式化。 - 插入多张你的照片,并可以加上简单的说明文字。
- 别忘了保存！
回到你的首页 index.htm，确保你已经将“点击这里查看我的更多照片”这个文字链接到了 photos.htm。
第五部分：发布你的网站
当你完成了所有页面的制作后，就可以把它们“发布”到互联网上,让其他人也能看到了。
前提条件：你需要有一个网络空间（虚拟主机）和一个域名。
- 点击菜单栏 文件 -> 发布网站...。
- 在“发布目标”中，输入你的网站提供商给你的 FTP 地址，格式通常是
ftp://你的域名.com。 - 如果需要，点击“浏览”来指定要发布的文件,通常默认发布所有文件即可。
- 点击 “打开”。
- 在弹出的“要求提供用户名和密码”的对话框中，输入你的 FTP 用户名和密码。
- 点击 “确定”，FrontPage 就会开始将你网站里的所有文件（HTML、图片等）上传到服务器上。
上传成功后,你就可以通过你的域名访问到你的个人网站了！
重要提醒与后续学习
FrontPage 2003 的局限性
- 技术过时：它生成的 HTML 代码比较冗余，不符合现代 Web 标准（如 HTML5 和 CSS3）。
- 安全性问题：作为一个 20 年前的软件，它可能存在未修复的安全漏洞,不建议在连接互联网的电脑上长时间使用。
- 浏览器兼容性：用它制作的网页在现代浏览器（如 Chrome, Firefox, Edge）中可能显示不正常。
现代网页制作替代方案
如果你对网页制作产生了兴趣,强烈建议学习现代的工具和技术：
- 代码编辑器：
- Visual Studio Code (VS Code)：目前最流行、功能最强大的免费代码编辑器。
- Sublime Text：轻量、快速、优雅。
- 核心语言：
- HTML (超文本标记语言)：定义网页的结构和内容（就像你看到的 FrontPage 的“骨架”）。
- CSS (层叠样式表)：负责网页的视觉表现，如颜色、字体、布局（就像“衣服和化妆”）。
- JavaScript：为网页添加交互功能，如点击按钮、弹出窗口、动画等（就像“让网页活起来的大脑”）。
- 现代框架：
- Bootstrap：一个流行的 CSS 框架,可以让你快速构建出美观且响应式的网页。
- Vue.js / React：用于构建复杂、动态的单页应用程序。
总结一下：FrontPage 2003 是一个绝佳的“入门老师”，它让你直观地理解了网页是由什么组成的（文本、图片、链接），以及文件是如何组织的，当你掌握了这些基本概念后，就可以转向学习更现代、更强大、更灵活的工具,开启你的专业网页设计之旅！
