资源预览内容
第1页 / 共10页
第2页 / 共10页
第3页 / 共10页
第4页 / 共10页
第5页 / 共10页
第6页 / 共10页
第7页 / 共10页
第8页 / 共10页
第9页 / 共10页
第10页 / 共10页
亲,该文档总共10页全部预览完了,如果喜欢就下载吧!
资源描述
实验三 网页编辑一、实验目的通过本实验,学会使用 FrontPage 2000 编辑文字、设置图片、插入特殊元素、设置网 页背景色等方法。二、实验内容1.熟练掌握 FrontPage 2000 字体格式、段落格式的设置方法。 2.熟练掌握插入图片、编辑图片的方法。 3.熟练掌握网页属性设置方法。 4.了解在网页中插入特殊元素的方法。三、实验步骤FrontPage 2000 字体、段落、图片的设置方法基本上同 Word 一致,此处利用实验二中 的 2005 年 1 月试题为例,继续完成“海南在线报道”网页设计。 1.编辑文字内容 步骤 1:准备工作 (1)启动 FrontPage 2000。 (2)选择“文件打开”命令,打开 D:sourcepagepage1.htm 网页文件,实验二中已根据题目要 求在此网页中建立了一不规则表格。 步骤 2:设置文字格式 (1)在表格上方输入标题“海南在线报道” ,方法: 先将光标定位在表格第一个单元格内,按下键盘上的“Enter”键,即在表格上方空出一行位置。 (2)选中标题文字,点击“格式”工具栏上的居中按钮 ,使标题显示在网页正中。并选择字体颜色后的下拉 箭头,打开调色板,设置字体颜色为“红色” ,如图 5-29 所 示。字号设置为“5 号(18 磅) ” 。 (3)根据题目要求,在表格各单元格内输入相应文字,完成后如图 5-30 所示。(4)将鼠标移动到表格第二条竖线上,当鼠标变成双向箭头时,向左拖动鼠标,将单 元格宽度变窄,使文字“时事经济”竖向显示,如图 5-31 所示。 (5)将鼠标移动到第三条竖线上,用同样方法调整“聚焦海南”文字方向。 (6)分别选中“时事经济” , “聚焦海南” ,设置字体颜色为“灰度” ,如图 5-32 所示。图 5-29 调色板图 5-31 调整单元格大小图 5-30 输入文本图 5-32 设置字体颜色图 5-34 选中图片2.在网页中使用图片 步骤 1:插入图片文件 (1)将光标定位在第 2 列第 1 行单元格中。 (2)选择“插入/图片/来自文件”命令,打开“图片”对话框的同时会弹出“选择文 件”对话框,在“查找范围”中选择 D:sourcepagephoto 文件夹下的 04103013.jpg,如 图 5-33 所示。 (3)点击“确定”按钮,即可返回到 FrontPage 编辑窗口,图片插入到单元格内。 (4)将光标定位在第 4 列第 1 行单元格中,用同样方法将图片 04103027.jpg 插入到 指定位置。 提示:在“选择文件”对话框中点击“查看菜单” 按钮,并选择“缩略图”选项,可在列表框中显示出图片原形,方便查找所需图片,如图 5-33 所示。 步骤 2:保存网页。 单击“保存”按钮,保存该网页。 步骤 3:查看图片属性 (1)选中网页中的图片 04103013.jpg,如图 5- 34 所示。图 5-33 插入图片图 5-36 图片和网页文件存放位置(2)单击右键,在右键快捷菜单中选择“图 片属性”子选项。 (3)在弹出的“图片属性”对话框中查看 “图片源” ,如图 5-35 所示。 说明:“图片源”表示该图片存放的位置 (也称为“路径” ) 。此处表示图片存放在 photo 文 件夹下。 本例中图片和网页文件存放的位置如图 5- 36 所示。 注意:图片存放路径不能写错,否则网页将显示不出图片。 上面以 2005 年 1 月一级试题为例说明如何使用表格布局网页;下面以此网页为例,学 习网页属性设置及如何向网页中插入特殊元素。图 5-35 图片属性3.网页属性设置 步骤 1:设置网页背景色 (1)选择“格式/背景”命令,打开“网页属性”对话框,选择“背景”选项卡,如 图 5-37 所示。 (2)在“颜色”区域中,通过“背景”选项的下拉箭头,选取一种颜色,如“橄榄色” 。 (3)单击“网页属性”对话框中的“确定”按钮,观察网页背景的变化。 提示:在网页设计中,要注意网页背景色与文字颜色的搭配、对比,以便使页面 效果更美观,文字内容清晰。 步骤 2:设置网页的背景图片 (1)选择“格式/背景”命令,打开“网页属性”对话框,选择“背景”选项卡。 (2)在“格式”区域中,单击“背景图片”复选框,然后单击“浏览”按钮。 (3)点击“浏览”按钮后,在打开“选择背景图片”对话框的同时,会弹出一个 “选择文件”对话框,点击“取消”按钮,在“选择背景图片”对话框中查找图片。 (4)单击对话框右下方的“剪贴画”按钮,打开“剪贴画库”对话框,选择“自然 界”类别中的“(绿叶)图案”插入。 (5)返回“网页属性”对话框,观察图片文件信息出现在文本框中,如图 5-38 所示。图 5-37 设置网页背景色(6)单击“确定”按钮,观察网页背景的变化,如图 5-39 所示,步骤 1 中设置的背 景色替换成当前设置的“(绿叶)图案”背景图片,该图片采用平铺方式充满了整个网页。步骤 3:保存网页。 单击“保存”按钮,保存该网页(注意将新插入的剪贴画保存在 D:sourcepagephoto 文件夹中,保存方法见实验一的步骤 4) 。 提示:对于同一网页而言,我们只能对其中一种(背景色或者背景图片)进行设置。在步骤 2 中,将“背景图片”复选框下方的“水印”复选框勾选上,再观察页面背景图片 的变化。 4.在网页中使用水平线 步骤 1:插入水平线 (1)把光标定位在标题“海南在线报道”之后,选择“插入/水平线”命令。 (2)网页中插入了一条系统默认的水平线,如图 5-40 所示。步骤 2:设置水平线的属性图 5-39 网页背景图 5-40 插入水平线图 5-38 设置网页背景图片(1)用鼠标单击水平线,选中水平线。 (2)单击右键,打开快捷菜单,从中选择“水平线属性”对话框,具体参数设置如下:水平线“宽度”为 100,单位采用“窗口宽度百分比” 。 水平线“高度”为 4 个像素。 颜色为“红色” 。如图 5-41 所示。步骤 3:修饰后的水平线 单击“确定”按钮,关闭“水平线属性”对话框,网页中呈现的水平线如图 5-42 所示。步骤 4:保存网页。 单击“保存”按钮,保存该网页。 小结:“水平线”在网页中起布局作用,如上例中用 “水平线”分割页面内容。 5.设置滚动字幕 步骤 1:插入滚动字幕 (1)将鼠标定位在标题“海南在线报道”后,按下回车键,插入一行。图 5-41 插入水平线图 5-42 修饰后的水平线效果(2)光标定位在新插入行中,选择“插入/组件/字幕”命令,打开“字幕属性”对话 框。 (3)在“文本”编辑框中输入“欢迎来到海南在线报道主页!” ,如图 5-43 所示。(4)单击“确定”按钮,关闭“字幕属性”对话框,输入的字幕文本出现在网页中, 如图 5-44 所示。 (5)单击“预览”按钮,观察滚动字幕的效果。 步骤 2:编辑滚动字幕 (1)鼠标指向滚动文本,单击右键,从弹出的快捷菜单中,选择“字幕属性”命令, 再次打开“字幕属性”对话框。 (2)单击对话框右下脚的“背景颜色”选项的下拉箭头,在弹出的颜色板的“标准 颜色”中选择银白色,如图 5-45 所示。图 5-43 字幕属性图 5-44 输入字幕文本(3)单击“样式”按钮打开“修改样式”对话框,单击“修改样式”对话框左下角的 “格式”按钮,从弹出的列表中选择“字体”命令,如图 5-46 所示,打开“字体”对话框, 具体设置如下 字体为宋体; 字型为加粗; 字号大小为 14; 颜色为黑色。 (4)单击“确定”按钮,关闭“字体” 对话框,再次单击“确定”按钮,关闭“修改样式”对话框。 (5)单击“确定”按钮,关闭“字幕属性”对话框,完成字幕外观修饰的操作。 步骤 3:预览字幕效果 单击“预览”按钮,观察滚动字幕效果。 此时,字幕右屏幕的右边向左边滚动,当文本在左边完全小时后,字幕在右边又出现 了并向左边滚动。 6.设置悬停按钮 步骤 1:插入悬停按钮 (1)将鼠标定位在滚动字幕后,按下回车键,插入一行。 (2)光标定位在新插入行中,选择“插入/组件/悬停按钮”命令,打开“悬停按钮属 性”对话框。 (3)在“按钮文本”编辑框中输入“首页” ,如图 5-47 所示。图 5-45 背景颜色调色板图 5-46 样式/字体(4)单击“确定”按钮,关闭“悬停按钮属性”对话框,悬停按钮出现在网页中,如 图 5-48 所示。 (5)单击工具栏“保存”按钮,保存该网页。(6)单击“预览”按钮,观察悬停按钮的效果。当鼠标移动到按钮上方时,按钮颜色发生改变,深蓝色按钮产生发光效果,变成蓝色。 提示:如果预览之前不保存网页,悬停按钮无法显示效果。 步骤 2:编辑悬停按钮 (1)双击悬停按钮,再次打开“悬停按钮属性”对话框。 (2)单击对话框“按钮颜色”选项的下拉箭头,在弹出的颜色板的“标准颜色”中选 择绿色,如图 5-49 所示。 (3)单击对话框“效果颜色”选项的下拉箭头,在弹出的颜色板的“标准颜色”中选 择银白色,如图 5-49 所示。(4)单击对话框“效果”选项的下拉箭头,在弹出的下拉列表框中选择“填充颜色” , 如图 5-49 所示。 (5)单击“确定”按钮,关闭“字体”对话框,再次单击“确定”按钮,关闭“修改 样式”对话框。 (6)单击“确定”按钮,关闭“悬停按钮属性”对话框,完成悬停按钮显示效果的操图 5-48 悬停按钮图 5-49 编辑悬停按钮属性图 5-47 悬停按钮属性对话框作。 步骤 3:预览悬停按钮效果 (1)单击“保存”按钮,保存该网页。 (2)单击“预览”按钮,观察悬停按钮效果。 此时,悬停按钮为绿色,鼠标移动到按钮上方时,按钮完全变成银白色。
网站客服QQ:2055934822
金锄头文库版权所有
经营许可证:蜀ICP备13022795号 | 川公网安备 51140202000112号