第一部分：认识 FrontPage 2003
在开始之前,我们先来了解一下这个软件。
（图片来源网络，侵删）
什么是 FrontPage 2003？
FrontPage 2003 是微软公司发布的一款“所见即所得”（What You See Is What You Get, WYSIWYG）的网页制作软件，它属于 Office 2003 办公套件的一员，对于初学者和非专业程序员来说，它最大的优点是无需编写复杂的 HTML 代码,就能通过直观的界面创建出功能丰富的网页。
FrontPage 2003 的主要特点
- 可视化编辑器：像编辑 Word 文档一样编辑网页,直接看到最终效果。
- 模板和向导：提供大量精美的网页模板和网站向导，可以快速创建个人网站、公司网站等。
- 组件功能强大：内置了多种组件，如悬停按钮、计数器、网站搜索、导航栏等,让网页交互变得简单。
- 强大的网站管理功能：可以轻松管理整个网站的所有文件、超链接和任务,检查错误。
- 发布功能便捷：内置 FTP（文件传输协议）功能,可以一键将制作好的网站上传到互联网服务器。
启动 FrontPage 2003
- 点击 Windows “开始” 菜单。
- 选择 “所有程序” -> “Microsoft Office” -> “Microsoft Office FrontPage 2003”。
启动后，你会看到主界面,它主要由以下几个部分组成：
- 菜单栏：包含所有命令（文件、编辑、视图、插入、格式等）。
- 工具栏：常用命令的快捷按钮（如新建、保存、预览等）。
- 视图栏：切换网页和网站的不同视图（网页、文件夹、报表、导航、任务）。
- 编辑区：你主要工作的地方,在这里设计和编辑网页内容。
- 状态栏：显示当前编辑状态和一些提示信息。
第二部分：创建你的第一个网站
我们将从最基础的“从零开始创建一个网站”开始。
步骤 1：新建一个网站
- 启动 FrontPage 2003。
- 在右侧的 “开始工作” 窗格中，点击 “新建网站”。
- 在弹出的 “网站模板” 对话框中，选择 “只有一个网页的网站”。
- 在 “网站模板” 下方的 “指定新网站的位置” 文本框中，为你的网站选择一个存放位置，你可以创建一个名为
MyWebSite的文件夹,并选择它。 - 点击 “确定”。
FrontPage 会在你指定的位置创建一个网站，并自动生成一个名为 index.htm 的主页文件。
（图片来源网络，侵删）
步骤 2：认识网站视图
在 FrontPage 窗口的左下角，你会看到几个视图按钮,它们是管理网站的核心：
- 网页视图：默认视图，用于编辑单个网页，你可以在底部的 “设计”、“代码”、**“拆分” 和 “预览” 之间切换。
- 设计：可视化编辑模式。
- 代码：查看和编辑 HTML 源代码。
- 拆分：上半部分显示代码，下半部分显示设计效果，适合初学者学习 HTML。
- 预览：在浏览器中预览网页效果。
- 文件夹视图：像 Windows 资源管理器一样，查看网站中的所有文件和文件夹，在这里你可以重命名、删除、新建文件和文件夹。
- 报表视图：生成网站的健康报告，例如检查断掉的链接、未使用的文件等。
- 导航视图：以树状结构展示网站中各个网页之间的层级关系,这对于设置导航栏至关重要。
- 任务视图：用来管理网站开发过程中的待办事项。
步骤 3：编辑你的主页
让我们来编辑 index.htm 这个主页。
- 确保你处于 “网页视图” 的 “设计” 模式下。
- 你会看到一个空白的页面，光标在左上角闪烁，你可以像在 Word 里一样直接输入文字，“欢迎来到我的个人网站！”
- 选中文字，可以通过 “格式” 菜单或工具栏来设置字体、大小、颜色、对齐方式等。
第三部分：丰富你的网页内容
一个静态的网页很无聊,我们来添加一些更丰富的元素。
插入图片
- 将光标定位到你想要插入图片的位置。
- 点击菜单栏 “插入” -> “图片” -> “来自文件...”。
- 在弹出的对话框中，找到你电脑里的一张图片（如
.jpg,.gif,.png格式），点击 “插入”。 - 提示：为了方便网站管理，建议先将所有图片文件（如
images文件夹）放入你的网站文件夹中，你可以通过 “文件夹视图” 来创建images文件夹,并将图片复制进去。
创建超链接
超链接是网页的灵魂,它可以把不同的页面连接起来。
（图片来源网络，侵删）
- 选中你想要添加超链接的文字或图片。
- 点击工具栏上的 “超链接” 按钮（一个地球和链子的图标）。
- 在弹出的 “插入超链接” 对话框中：
- 链接到： 选择 “原有文件或网页”。
- 要显示的文字： 这里会自动显示你选中的文字。
- 地址： 输入你想要跳转到的网址，
https://www.baidu.com。 - 或者，点击右侧的 “文件...” 按钮,可以选择你网站内部的另一个网页文件。
- 点击 “确定”。
使用“组件”添加特效
FrontPage 的“组件”是其一大特色,能让你轻松实现一些动态效果。
-
悬停按钮：
- 插入 -> **Web 组件。
- 在左侧选择 “动态效果”，在右侧选择 “悬停按钮”。
- 点击 “完成”，在弹出的对话框中设置按钮的文本、颜色、悬停时的效果等。
- 点击 “确定”,一个动态按钮就出现了。
-
计数器：
- 插入 -> Web 组件。
- 在左侧选择 “计数器”,在右侧选择一种样式。
- 点击 “完成”,可以设置计数器的初始值和位数。
- 注意：FrontPage 自带的计数器需要服务器端支持（如 FrontPage 服务器扩展），如果你的虚拟主机不支持，这个计数器将无法工作，对于个人学习,可以忽略。
第四部分：添加导航栏
如果你的网站有多个页面（如“首页”、“关于我”、“我的相册”），导航栏是必不可少的,它能自动生成页面间的链接。
步骤 1：设置导航结构
- 切换到 “导航视图”。
- 你会看到
index.htm（主页）的图标。 - 右键点击
index.htm，选择 “新建网页”，这会创建一个与主页同级的子页，默认名为new_page_1.htm，你可以重命名为about.htm。 - 再次右键点击
index.htm，选择 “新建网页”，这次选择 “网页” 选项卡下的 和边栏的网页”，点击 “确定”,这会创建一个二级子页。 - 拖动这些页面图标，可以调整它们的层级关系，将
about.htm拖到index.htm下面,表示它是主页的一个分支。
步骤 2：在网页中插入导航栏
- 切换回 “网页视图”，打开
index.htm。 - 将光标定位到你想要放置导航栏的位置。
- 插入 -> 导航栏...。
- 在弹出的对话框中：
- 要添加到导航栏的网页： 选择 “主页”。
- 方向和外观： 选择 “水平” 或 “垂直”,以及按钮或文本样式。
- 点击 “确定”。
- 重复此步骤，为其他页面（如
about.htm）也添加导航栏，子页的导航栏会包含“上一页”、“下一页”、“返回到父页
