实验三 网页编辑

《实验三 网页编辑》由会员分享，可在线阅读，更多相关《实验三 网页编辑（10页珍藏版）》请在金锄头文库上搜索。

1、实验三 网页编辑一、实验目的通过本实验，学会使用 FrontPage 2000 编辑文字、设置图片、插入特殊元素、设置网 页背景色等方法。二、实验内容1.熟练掌握 FrontPage 2000 字体格式、段落格式的设置方法。 2.熟练掌握插入图片、编辑图片的方法。 3.熟练掌握网页属性设置方法。 4.了解在网页中插入特殊元素的方法。三、实验步骤FrontPage 2000 字体、段落、图片的设置方法基本上同 Word 一致，此处利用实验二中 的 2005 年 1 月试题为例，继续完成“海南在线报道”网页设计。 1.编辑文字内容 步骤 1：准备工作 （1）启动 FrontPage 2000。 （

2、2）选择“文件打开”命令，打开 D:sourcepagepage1.htm 网页文件，实验二中已根据题目要 求在此网页中建立了一不规则表格。 步骤 2：设置文字格式 （1）在表格上方输入标题“海南在线报道” ，方法： 先将光标定位在表格第一个单元格内，按下键盘上的“Enter”键，即在表格上方空出一行位置。 （2）选中标题文字，点击“格式”工具栏上的居中按钮 ，使标题显示在网页正中。并选择字体颜色后的下拉 箭头，打开调色板，设置字体颜色为“红色” ，如图 5-29 所 示。字号设置为“5 号（18 磅） ” 。 （3）根据题目要求，在表格各单元格内输入相应文字，完成后如图 5-30 所示。（4

3、）将鼠标移动到表格第二条竖线上，当鼠标变成双向箭头时，向左拖动鼠标，将单 元格宽度变窄，使文字“时事经济”竖向显示，如图 5-31 所示。 （5）将鼠标移动到第三条竖线上，用同样方法调整“聚焦海南”文字方向。 （6）分别选中“时事经济” ， “聚焦海南” ，设置字体颜色为“灰度” ，如图 5-32 所示。图 5-29 调色板图 5-31 调整单元格大小图 5-30 输入文本图 5-32 设置字体颜色图 5-34 选中图片2.在网页中使用图片 步骤 1：插入图片文件 （1）将光标定位在第 2 列第 1 行单元格中。 （2）选择“插入/图片/来自文件”命令，打开“图片”对话框的同时会弹出“选择文

4、件”对话框，在“查找范围”中选择 D:sourcepagephoto 文件夹下的 04103013.jpg，如 图 5-33 所示。 （3）点击“确定”按钮，即可返回到 FrontPage 编辑窗口，图片插入到单元格内。 （4）将光标定位在第 4 列第 1 行单元格中，用同样方法将图片 04103027.jpg 插入到 指定位置。 提示：在“选择文件”对话框中点击“查看菜单” 按钮，并选择“缩略图”选项，可在列表框中显示出图片原形，方便查找所需图片，如图 5-33 所示。 步骤 2：保存网页。 单击“保存”按钮，保存该网页。 步骤 3：查看图片属性 （1）选中网页中的图片 04103013.j

5、pg，如图 5- 34 所示。图 5-33 插入图片图 5-36 图片和网页文件存放位置（2）单击右键，在右键快捷菜单中选择“图 片属性”子选项。 （3）在弹出的“图片属性”对话框中查看 “图片源” ，如图 5-35 所示。 说明：“图片源”表示该图片存放的位置 （也称为“路径” ） 。此处表示图片存放在 photo 文 件夹下。 本例中图片和网页文件存放的位置如图 5- 36 所示。 注意：图片存放路径不能写错，否则网页将显示不出图片。 上面以 2005 年 1 月一级试题为例说明如何使用表格布局网页；下面以此网页为例，学 习网页属性设置及如何向网页中插入特殊元素。图 5-35 图片属性3.

6、网页属性设置 步骤 1：设置网页背景色 （1）选择“格式/背景”命令，打开“网页属性”对话框，选择“背景”选项卡，如 图 5-37 所示。 （2）在“颜色”区域中，通过“背景”选项的下拉箭头，选取一种颜色，如“橄榄色” 。 （3）单击“网页属性”对话框中的“确定”按钮，观察网页背景的变化。 提示：在网页设计中，要注意网页背景色与文字颜色的搭配、对比，以便使页面 效果更美观，文字内容清晰。 步骤 2：设置网页的背景图片 （1）选择“格式/背景”命令，打开“网页属性”对话框，选择“背景”选项卡。 （2）在“格式”区域中，单击“背景图片”复选框，然后单击“浏览”按钮。 （3）点击“浏览”按钮后，在打

7、开“选择背景图片”对话框的同时，会弹出一个 “选择文件”对话框，点击“取消”按钮，在“选择背景图片”对话框中查找图片。 （4）单击对话框右下方的“剪贴画”按钮，打开“剪贴画库”对话框，选择“自然 界”类别中的“（绿叶）图案”插入。 （5）返回“网页属性”对话框，观察图片文件信息出现在文本框中，如图 5-38 所示。图 5-37 设置网页背景色（6）单击“确定”按钮，观察网页背景的变化，如图 5-39 所示，步骤 1 中设置的背 景色替换成当前设置的“（绿叶）图案”背景图片，该图片采用平铺方式充满了整个网页。步骤 3：保存网页。 单击“保存”按钮，保存该网页（注意将新插入的剪贴画保存在 D:so

8、urcepagephoto 文件夹中，保存方法见实验一的步骤 4） 。 提示：对于同一网页而言，我们只能对其中一种（背景色或者背景图片）进行设置。在步骤 2 中，将“背景图片”复选框下方的“水印”复选框勾选上，再观察页面背景图片 的变化。 4.在网页中使用水平线 步骤 1：插入水平线 （1）把光标定位在标题“海南在线报道”之后，选择“插入/水平线”命令。 （2）网页中插入了一条系统默认的水平线，如图 5-40 所示。步骤 2：设置水平线的属性图 5-39 网页背景图 5-40 插入水平线图 5-38 设置网页背景图片（1）用鼠标单击水平线，选中水平线。 （2）单击右键，打开快捷菜单，从中选择“

9、水平线属性”对话框，具体参数设置如下：水平线“宽度”为 100，单位采用“窗口宽度百分比” 。 水平线“高度”为 4 个像素。 颜色为“红色” 。如图 5-41 所示。步骤 3：修饰后的水平线 单击“确定”按钮，关闭“水平线属性”对话框，网页中呈现的水平线如图 5-42 所示。步骤 4：保存网页。 单击“保存”按钮，保存该网页。 小结：“水平线”在网页中起布局作用，如上例中用 “水平线”分割页面内容。 5.设置滚动字幕 步骤 1：插入滚动字幕 （1）将鼠标定位在标题“海南在线报道”后，按下回车键，插入一行。图 5-41 插入水平线图 5-42 修饰后的水平线效果（2）光标定位在新插入行中，选择

10、“插入/组件/字幕”命令，打开“字幕属性”对话 框。 （3）在“文本”编辑框中输入“欢迎来到海南在线报道主页！” ，如图 5-43 所示。（4）单击“确定”按钮，关闭“字幕属性”对话框，输入的字幕文本出现在网页中， 如图 5-44 所示。 （5）单击“预览”按钮，观察滚动字幕的效果。 步骤 2：编辑滚动字幕 （1）鼠标指向滚动文本，单击右键，从弹出的快捷菜单中，选择“字幕属性”命令， 再次打开“字幕属性”对话框。 （2）单击对话框右下脚的“背景颜色”选项的下拉箭头，在弹出的颜色板的“标准 颜色”中选择银白色，如图 5-45 所示。图 5-43 字幕属性图 5-44 输入字幕文本（3）单击“样式

11、”按钮打开“修改样式”对话框，单击“修改样式”对话框左下角的 “格式”按钮，从弹出的列表中选择“字体”命令，如图 5-46 所示，打开“字体”对话框， 具体设置如下 字体为宋体； 字型为加粗； 字号大小为 14； 颜色为黑色。 （4）单击“确定”按钮，关闭“字体” 对话框，再次单击“确定”按钮，关闭“修改样式”对话框。 （5）单击“确定”按钮，关闭“字幕属性”对话框，完成字幕外观修饰的操作。 步骤 3：预览字幕效果 单击“预览”按钮，观察滚动字幕效果。 此时，字幕右屏幕的右边向左边滚动，当文本在左边完全小时后，字幕在右边又出现 了并向左边滚动。 6.设置悬停按钮 步骤 1：插入悬停按钮 （1）

12、将鼠标定位在滚动字幕后，按下回车键，插入一行。 （2）光标定位在新插入行中，选择“插入/组件/悬停按钮”命令，打开“悬停按钮属 性”对话框。 （3）在“按钮文本”编辑框中输入“首页” ，如图 5-47 所示。图 5-45 背景颜色调色板图 5-46 样式/字体（4）单击“确定”按钮，关闭“悬停按钮属性”对话框，悬停按钮出现在网页中，如 图 5-48 所示。 （5）单击工具栏“保存”按钮，保存该网页。（6）单击“预览”按钮，观察悬停按钮的效果。当鼠标移动到按钮上方时，按钮颜色发生改变，深蓝色按钮产生发光效果，变成蓝色。 提示：如果预览之前不保存网页，悬停按钮无法显示效果。 步骤 2：编辑悬停按钮

13、 （1）双击悬停按钮，再次打开“悬停按钮属性”对话框。 （2）单击对话框“按钮颜色”选项的下拉箭头，在弹出的颜色板的“标准颜色”中选 择绿色，如图 5-49 所示。 （3）单击对话框“效果颜色”选项的下拉箭头，在弹出的颜色板的“标准颜色”中选 择银白色，如图 5-49 所示。（4）单击对话框“效果”选项的下拉箭头，在弹出的下拉列表框中选择“填充颜色” ， 如图 5-49 所示。 （5）单击“确定”按钮，关闭“字体”对话框，再次单击“确定”按钮，关闭“修改 样式”对话框。 （6）单击“确定”按钮，关闭“悬停按钮属性”对话框，完成悬停按钮显示效果的操图 5-48 悬停按钮图 5-49 编辑悬停按钮属性图 5-47 悬停按钮属性对话框作。 步骤 3：预览悬停按钮效果 （1）单击“保存”按钮，保存该网页。 （2）单击“预览”按钮，观察悬停按钮效果。 此时，悬停按钮为绿色，鼠标移动到按钮上方时，按钮完全变成银白色。