第八章网页制作

第八章网页制作内容摘要：

标 ， 同样会打开指定网页。 要保存一个网页 ， 可以使用 “ 文件 ” 菜单的 “ 保存 ” 命令 ， 或 “ 常用 ” 工具栏的 “ 保存 ” 按钮 ， 如需另存可使用 “ 文件 ” 菜单的 “ 另存为 ” 命令。 返 回 网页编辑 目 录 上一页 下一页 结 束 2020/11/17 39 计算机文化基础 3. 预览网页 网页制作过程中 ， 用户可以切换到 “ 预览 ” 视图预览网页 ， 也可以使用 “ 文件 ” 菜单的 “ 在浏览器中预览 ” 命令预览网页。 使用后者 ， 系统会打开浏览器显示网页 ， 如果该网页尚未保存 ， 会弹出对话框提示用户保存网页。 返 回 网页编辑 目 录 上一页 下一页 结 束 2020/11/17 40 计算机文化基础 网页编辑 4. 设置文字格式 同其他 Microsoft Office组件一样 ， 在网页中可以输入文字 ，复制 、 剪切和粘贴文字 ， 设置文字格式 ， 查找和替换文字等。 在 FrontPage 2020中 ， 对文字的格式提供了相当完整的设定功能 ， 文字格式的变化也因此多种多样。 可以使用工具栏上的工具按钮或菜单命令快速地改变文字的外观。 设置文字格式的一般操作步骤是：选中文字 ， 单击 “ 格式 ”菜单的 “ 字体 ” 命令 ， 在弹出的 “ 字体 ” 对话框中设置字体的各种属性 ， 也可以使用 “ 格式 ” 工具栏中相应的命令按钮。 虽然可以设置各种美观的字体 ， 但是由于用户只能使用本地计算机中安装的字体显示网页 ， 因此还是使用常见的字体为好。 返 回 目 录 上一页 下一页 结 束 2020/11/17 41 计算机文化基础 网页编辑 5. 设置段落格式 文字段落的格式编排对于一个网页的外观是至关重要的。 FrontPage 2020通过按 Enter键划分段落。 值得注意的是 ， 段落之间插入了一个空行。 如果只是需要换行 ， 而不是另起一个段落 ， 按 Shift+Enter键即可。 实际上 ， 按 Enter键在 HTML代码中插入的是 p标记 ， 而按 Shift+Enter键则插入的是 br标记。 段落格式主要包括对齐方式 、 缩进和段落间距等。 设置段落格式的一般方法如下： 将插入点移动到要设置格式的段落中 ， 或是选中该段落 ， 单击 “ 格式 ” 菜单的 “ 段落 ” 命令 ， 在弹出的“ 段落 ” 对话框中进行各种段落格式属性的设置。 返 回 目 录 上一页 下一页 结 束 2020/11/17 42 计算机文化基础 网页编辑 6. 设置网页属性 网页属性包括网页的标题 、 格式 、 页边距等。 要设置网页属性 ， 用户可以使用 “ 文件 ” 菜单的 “ 属性 ”命令 ， 或者在网页的任意地方单击鼠标右键 ， 在弹出的右键菜单中选择 “ 网页属性 ” 命令 ， FrontPage 2020将显示 “ 网页属性 ” 对话框。 目 录 上一页 下一页 结 束 2020/11/17 43 计算机文化基础 6. 设置网页属性 1） “ 常规 ” 属性 要设置网页的 “ 常规 ” 属性 ， 单击 “ 网页属性 ”对话框的 “ 常规 ” 选项卡。 “ 标题 ” 框用于给出网页的标题 ， 网页标题将显示在浏览器的标题栏中。 “ 背景音乐 ” 框用于指定网页的背景音乐 ， 当用浏览器打开网页时 ， 将自动播放背景音乐。 背景音乐区域的“ 位置 ” 框用于指定声音文件的位置 ， 用户可以使用“ 浏览 ” 按钮选择一个声音文件； “ 循环次数 ” 框用于指定声音要反复播放的次数 ， 如果选中 “ 不限次数 ”复选框 ， 表示一直不停地播放。 目 录 上一页 下一页 结 束 2020/11/17 44 计算机文化基础 6. 设置网页属性 2） “ 格式 ” 属性 要设置网页的背景 、 颜色 ， 可以使用 “ 网页属性 ” 对话框的 “ 格式 ” 选项卡。 用户可以选中 “ 背景图片 ” 复选框 ， 指定一个图片作为网页的背景图片。 如果要将图片按水印形式添加 ，需要选中 “ 使其成为水印 ” 复选框。 通过单击相应的下拉列表框 ， 可以设置网页的背景颜色 、 文本颜色以及超链接文字的颜色。 当同时设置背景图片和背景颜色时 ， 背景图片将覆盖背景色。 返 回 目 录 上一页 下一页 结 束 2020/11/17 45 计算机文化基础 插入对象 在网页中输入文本内容后 ， 还可在不同的段落 、行之间添加水平线 ， 水平线将网页分割成几个部分 ，使得网页更具条理性。 具体操作步骤如下： （ 1） 在准备插入水平线的位置设置插入点； （ 2） 单击 “ 插入 ” 菜单的 “ 水平线 ” 命令 ， 插入水平线。 要修改水平线的外观 ， 可以双击水平线 ， 打开“ 水平线属性 ” 对话框。 “ 宽度 ” 框用于设置水平线的宽度 ， “ 高度 ” 框用于设置水平线的高度 ， “ 对齐方式 ” 用于设置水平线在网页内水平对齐的方式 ，“ 颜色 ” 列表框用于设置水平线的颜色 ， 选中 “ 实线（ 无阴影 ） ” 复选框时 ， 水平线将被设成实心线。 要为线条指定自定义样式或其他格式 ， 可以使用 “ 样式 ”按钮进行设置。 返 回 目 录 上一页 下一页 结 束 2020/11/17 46 计算机文化基础 插入对象 2. 插入图片 图片可以使网页变得生动活泼 ， 并能吸引用户的注意。 1） 图片文件的格式 在 WWW上常用的图像文件格式是 JPEG和 GIF， 它们都是压缩的图像格式 ， 文件的信息量小 ， 适合于网络传输 ， 因此被广泛地应用在 Web站点的设计中。 GIF（ Graphical Interchange Format， 图形交换格式 ） 采用无损压缩方式 ， 其主要特征是支持动画 、 透明度 、 图形渐进 ， 但 GIF图像包含的颜色不能超过 256种。 JPEG（ Joint Photograph Expert Group， 联合图像专家组 ） 格式是专为有几百万种颜色的照片和图形设计的 ， 它采用有损压缩方式 ， 以牺牲图片质量换取大的压缩比例。 JPEG格式支持真彩色 （ 24位色 ） ， 并且在压缩大的图像方面已被证明很有效。 目 录 上一页 下一页 结 束 2020/11/17 47 计算机文化基础 2. 插入图片 2） 插入图片和设置图片属性 （ 方法同 Word） 3） 编辑图片 利用 “ 图片 ” 工具栏能够完成一些常用的图像编辑功能。 4） 保存图片 插入图片后保存网页 ， 如果图片不在网站文件夹中 ， 将出现 “ 保存嵌入式文件 ” 对话框。 如果图片在网站文件夹中 ， 就不会出现此对话框。 目 录 上一页 下一页 结 束 2020/11/17 48 计算机文化基础 插入对象 3. 插入字幕 在制作网页时 ， 可以将网页中的文字做成由左至右 ，或由右至左移动的动态效果 ， 使网页更加形象生动。 具体操作步骤如下： （ 1） 将插入点设置在要插入移动字幕的位置或者选中作为移动字幕的文本 ， 单击 “ 插入 ” 菜单的“ Web组件 ” 命令 ， 弹出 “ 插入 Web组件 ” 对话框 ，在对话框的 “ 组件类型 ” 列表框中选择 “ 动态效果 ” ，在 “ 选择一种效果 ” 列表中选择 “ 字幕 ” ， 单击 “ 完成 ” 按钮 ， 打开 “ 字幕属性 ” 对话框。 目 录 上一页 下一页 结 束 2020/11/17 49 计算机文化基础 （ 2） 如果已经选择了作为移动字幕的文本 ， 此文本就会出现在“ 文本 ” 框中 ， 如果没有选择文本 ， 可在 “ 文本 ” 框中输入作为移动字幕的文本。 （ 3） “ 方向 ” 区域用于指定文本的移动方向。 “ 速度 ” 区域用于指定文字的滚动速度 ， “ 延迟 ” 框中的数值表示字幕滚动一步的时间间隔是多少毫秒 ， “ 数量 ” 框中的数值表示字幕滚动一步的距离是多少像素。 “ 表现方式 ” 区域用于指定文字的表现方式。 选中 “ 重复 ” 区域的 “ 连续 ” 复选框 ， 移动字幕将连续滚动；若要设置字幕滚动有限次 ， 可以取消选中 “ 连续 ” 复选框并输入字幕重复的次数。 “ 背景色 ” 列表框用于设置移动字幕的背景颜色。 “ 大小 ” 区域用于设置字幕的宽度与高度。 （ 4） 单击 “ 确定 ” 按钮 ， 即可插入字幕。 3. 插入字幕 目 录 上一页 下一页 结 束 2020/11/17 50 计算机文化基础 插入对象 4. 插入交互式按钮 交互式按钮是一个动态按钮 ， 当用户将鼠标指向交互式按钮时 ， 交互式按钮会改变颜色或形状。 默认情况下 ， 交互式按钮是一个带有彩色方框的文字按钮 ， 也可以应用图片创建交互式按钮。 （ 1） 将插入点设置在要插入交互式按钮的位置 ， 单击 “ 插入 ”菜单的 “ Web组件 ” 命令 ， 打开 “ 插入 Web组件 ” 对话框 ， 在对话框的 “ 组件类型 ” 列表框中选择 “ 动态效果 ” ， 在 “ 选择一种效果 ”列表中选择 “ 交互式按钮 ” ， 单击 “ 完成 ” 按钮 ， 打开 “ 交互式按钮 ” 属性对话框。 （ 2） 设置  按钮  字体  图像 （ 3） 单击 “ 确定 ” 按钮 ， 即可插入交互式按钮。 目 录 上一页 下一页 结 束 2020/11/17 51 计算机文化基础 插入对象 5. 插入站点计数器 （ 1） 单击 “ 插入 ” 菜单的 “ Web组件 ” 命令 ，打开 “ 插入 Web组件 ” 对话框 ， 在对话框的 “ 组件类型 ” 列表框中选择 “ 计数器 ” ， 在 “ 选择计数器样式 ” 列表中选择一种样式 ， 单击 “ 完成 ”按钮 ， 打开 “ 计数器属性 ” 对话框； （ 2） 设置计数器属性； （ 3） 单击 “ 确定 ” 按钮 ， 插入站点计数器。 返 回 目 录 上一页 下一页 结 束 2020/11/17 52 计算机文化基础 创建超链接 Web网页的强大之处就在于其超链接 ， 使用超链接能够将 Inter中的信息有机地组织起来 ， 使人们在丰富多彩的 WWW世界轻松地漫游。 超链接是指从一个网页指向一个目标的链接关系 ， 这个目标可以是另一个网页 ， 也可以是相同网页上的不同位置 ， 还可以是图片 、 文件 、 电子邮件地址等。 超链接由链接载体和链接目标两部分组成。 根据链接载体的特点 ， 可以把链接分为文本超链接与图片超链接两大类。 目 录 上一页 下一页 结 束 2020/11/17 53 计算机文化基础 创建超链接 1. 创建文本超链接 文本超链接是指在文本上定义的超链接 ， 单击文本超链接 ， 会自动跳转到指向的链接目标。 创建文本超链接的具体操作步骤如下： （ 1） 选定要定义超链接的文本 ， 从 “ 插入 ” 菜单中选择 “ 超链接 ” 命令 ， 或单击 “ 常用 ” 工具栏上的 “ 超链接 ” 按钮 ，打开 “ 插入超链接 ” 对话框 ， 如下图所示； 目 录 上一页 下一页 结 束 2020/11/17 54 计算机文化基础 1. 创建文本超链接 （ 2） 在 “ 插入超链接 ” 对话框中选择要链接的目标网页 ， 单击 “ 确定 ” 按钮 ， 插入超链接 ， 可以看到所选定的文本变为蓝色 ， 并且带有下划线 ，说明选定的文本已经被设置为超链接文本。 保存网页 ， 在浏览器中预览效果。 当鼠标移至链接文字时 ， 鼠标指针变成手形 ， 此。