frontpage2003制作网页教程-贝博恩创新科技网

这份教程将带你从零开始，使用 FrontPage 2003 制作一个简单的个人网页。

（图片来源网络，侵删）

FrontPage 2003 制作网页完整教程

第一部分：准备工作与界面认识

什么是 FrontPage 2003？ FrontPage 是微软出的一款“所见即所得”的网页编辑器，这意味着你不需要编写复杂的 HTML 代码，只需要像在 Word 里一样打字、排版、插入图片，软件就会自动生成对应的网页代码,它非常适合初学者入门。

安装与启动 确保你已经安装了 FrontPage 2003，双击桌面图标或从“开始”菜单启动它。

认识 FrontPage 2003 的工作界面 启动后,你会看到几个核心窗口区域：

菜单栏: 文件、编辑、视图、插入、格式、表格、框架等所有命令都在这里。
工具栏: 将常用命令以图标形式展示，方便快速操作，可以通过“视图” -> “工具栏”来显示或隐藏不同的工具栏。
视图栏: 位于界面左下角，这是 FrontPage 的核心。
- 设计: 默认视图，你可以直接在页面上编辑内容,所见即所得。
- 代码: 显示当前页面的 HTML 源代码，你可以在“设计”视图里修改内容，然后切换到“代码”视图查看 FrontPage 自动生成的代码，这是学习 HTML 的好方法！
- 拆分: 将窗口一分为二，上半部分是代码，下半部分是设计视图,你可以同时在两个区域操作。
- 预览: 模拟在浏览器（如 IE）中查看网页的效果。注意： FrontPage 的预览效果可能与现代浏览器（如 Chrome, Firefox）有差异,最终测试一定要在真实浏览器中进行。
编辑区: 中间最大的区域,就是你制作网页的画布。

第二部分：创建你的第一个网页

步骤 1：创建新网页

（图片来源网络，侵删）

点击菜单栏的 “文件” -> “新建”。
在右侧的“新建网页”任务窗格中，选择 “空白网页”。
你就有了一个可以编辑的空白页面。

步骤 2：保存网页

点击 “文件” -> “保存” (或直接按快捷键 Ctrl + S)。
在弹出的“另存为”对话框中：
- 保存位置： 选择一个你容易找到的文件夹，比如在 D 盘创建一个名为 mywebsite 的文件夹。
- 文件名： 给你的网页起个名字，index.htm 或 index.html。注意： 网站首页通常命名为 index.htm 或 index.html。
- 保存类型： 选择 “网页 (.htm;.html)”。
点击“保存”。

步骤 3：设置网页标题会显示在浏览器的标题栏上,也利于搜索引擎收录。

在编辑区任意位置点击一下。
右键点击，选择 “网页属性”。
在弹出的窗口中，切换到 “常规” 选项卡。
在输入框中，输入你的网站标题，我的个人主页”。
点击“确定”。

第三部分：编辑网页内容

让我们像在 Word 里一样来编辑内容。

输入和格式化文字

（图片来源网络，侵删）

在编辑区光标闪烁的位置，直接输入文字，“欢迎来到我的个人主页！”
选中文字，然后使用 “格式”工具栏 来改变样式：
- 字体： 选择你喜欢的字体，如“宋体”、“微软雅黑”。
- 字号： 选择文字大小。
- 加粗、倾斜、下划线：快速设置文字样式。
- 对齐方式： 居中、左对齐、右对齐。

插入水平线可以插入一条水平线。

将光标放在要插入水平线的位置。
点击菜单栏 “插入” -> “水平线”。
双击这条水平线，可以修改它的属性（宽度、高度、颜色等）。

插入图片

准备一张图片（比如一张你的照片 photo.jpg），并把它和你的网页文件（index.htm）放在同一个文件夹里。（非常重要！）
将光标放在要插入图片的位置。
点击菜单栏 “插入” -> “图片” -> “来自文件...”。
在弹出的对话框中，找到你的图片文件夹，选中 photo.jpg，然后点击“插入”。
图片插入后，可以点击选中它,拖动角落的小黑点来调整大小。

创建超链接 超链接是网页的灵魂,可以让我们从一个页面跳到另一个页面。

选中你想要做成链接的文字或图片，点击这里查看我的简历”。
点击 “插入” -> “超链接” (或按快捷键 Ctrl + K)。
在弹出的“插入超链接”对话框中：
- 链接到： 选择“原有文件或网页”。
- 要显示的文字： 这里会自动显示你选中的文字。
- 地址： 输入你要链接到的网址，http://www.google.com。
- 或者： 如果你网站里有其他页面（resume.htm），可以点击“浏览文件”按钮来选择它。
点击“确定”。

第四部分：使用表格进行布局

使用表格是网页布局的经典方法，FrontPage 让这个过程变得非常简单。

插入表格

将光标放在你想插入表格的位置。
点击菜单栏 “表格” -> “插入” -> “表格...”。
在弹出的窗口中：
- 大小： 设置行数和列数，2 行 2 列。
- 对齐方式： 选择“居中”。
- 边框： 可以设置边框粗细，为了布局美观，我们可以先设置为 1，等布局好了再设为 0 来隐藏边框。
点击“确定”。

编辑表格

现在你有了一个 2x2 的表格，你可以像在 Excel 里一样,点击任意单元格进行输入文字或插入图片。
调整大小： 将鼠标移动到表格的边框线上，当鼠标变成双向箭头时,拖动即可调整行高或列宽。
合并/拆分单元格：
- 选中你想要合并的多个单元格（按住 Ctrl 键可以选中不连续的单元格）。
- 右键点击，选择 “合并单元格”。
- 拆分单元格则右键单击一个单元格，选择 “拆分单元格”。

示例布局： 你可以创建一个表格，第一行放一个横幅图片，第二行左侧放个人简介，右侧放照片,第三行放友情链接等。

第五部分：发布你的网站

制作完成后，你需要把网站文件上传到互联网上，别人才能访问，这个过程就叫“发布”。

前提条件： 你需要有一个网站空间（主机）和一个 FTP 地址，这些通常由你的网站服务商（如万网、新网等）提供。

发布步骤：

在 FrontPage 中，打开你的网站首页 index.htm。
点击菜单栏 “文件” -> “发布网站...”。
在弹出的“发布目标”对话框中：
- 指定发布站点的位置： 在输入框中，输入你的服务商提供的 FTP 地址，格式通常是 ftp://你的域名.com。
- 点击 “选项” 按钮，确保勾选了 “包含子文件夹”,这样所有页面和图片都会一起上传。
点击 “确定”。
接下来会弹出一个“要求提供网络凭据”的窗口：
- 用户名： 输入你的 FTP 用户名。
- 密码： 输入你的 FTP 密码。
- 勾选 “保存密码” 可以方便下次使用。
点击 “确定”。
FrontPage 会开始连接到你的服务器，并上传所有文件，上传成功后,你的网站就发布了！

第六部分：重要提示与进阶建议

关于图片路径： 一定要记住，网页文件（.htm）和用到的图片、其他文件必须放在同一个文件夹下，如果移动了文件，链接就会失效,这是初学者最容易犯的错误。
预览的局限性： FrontPage 2003 是为 IE 浏览器设计的，它的预览效果在 Chrome、Firefox 等现代浏览器中可能会错乱。每制作一步，最好都保存文件，然后用真实的浏览器打开 index.htm 文件来测试效果。
学习代码： 不要害怕“代码”视图，在“设计”视图中做一个操作，然后去“代码”视图看看 FrontPage 生成了什么 HTML 标签（如 <p>, <img>, <a>）,这是最快学习网页基础的方法。
过时技术： 请务必了解，FrontPage 2003 及其使用的表格布局技术在今天已经非常过时了，现代网页开发使用的是 HTML5 + CSS3 技术，通过 DIV+CSS 或 Flexbox/Grid 进行布局，更灵活、更高效、更符合标准。
进阶学习： 当你用 FrontPage 理解了网页的基本概念（超链接、图片、表格布局）后，强烈建议你转向学习现代网页技术，你可以从学习 HTML 和 CSS 开始，使用免费的代码编辑器如 Visual Studio Code。