|
第五章 FrontPage 实验5.0 FrontPage的启动与建立站点任务1FrontPage的启动与关闭 ⒈ 启动FrontPage，查看网页编辑的三种工作环境； 操作步骤 ⑴ 【开始】→【程序】→【Microsoft FrontPage】，出现FrontPage窗口，窗口界面的主要功能见图5.1。 file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image002.gif
说明 程序启动后，自动进入“网页管理器”工作视图窗口，并建立名为new_page_1.hrm的网页文件。 ⑵ 分别单击【普通】、【HTML】、【预览】三个标签，查看各窗口。 说明 ⑴ 由于当前打开的是一个空白网页，所以【普通】、【预览】两个窗口无内容，在以后的操作中我们会在【普通】窗口中进行网页的编辑工作，经常会使用【预览】窗口查看网页制作的效果。 ⑵ 【HTML】窗口中出现的是用HTML语言编写的网页的源代码。可以直接编写、修改源代码，同样可以达到编辑网页的目的。 file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image004.gif⒉ 关闭FrontPage，返回WINDOWS。 操作步骤 选【文件】→【退出】；（或：单击窗口右上方“×”按钮），返回WINDOWS。 如果当前窗口中的内容在最近的一次保存后已经有所改变，这时会出现“确认”对话框（图5.2），要求用户选择，可以根据自己的目的选相应的按钮即可。 任务2 建立站点⒈ 在A盘创建一个名为“FPLX”的站点，站点模板为“只有一个网页的站点”； 操作步骤 ⑴ 【文件】→【新建】→【站点】，出现“新建”对话框； ⑵ 在“站点”页面中选“只有一个网页的站点”，在“指定新站点的位置”文本框中输入“A:\FPLX”，【确定】（图5.3）。 file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image006.gif
实验与思考 在FrontPage中，用【打开】或【打开站点】命令观察A盘根目录，用“资源管理器”观察A盘根目录，在两种方式下观察到的刚建立的站点的显示方式有何不同（图5.4）？请分析FrontPage中创建站点FPLX与用“资源管理器”建立“FPLX”文件夹的不同。
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image008.gif
说明 打开站点文件夹FPLX，在文件夹中包含了两个文件夹_privata、images。_privata一般用来存放一些私人的文件，这些文件不希望别人使用。Images用来存放图像文件。站点中还包含2个隐含文件夹，用来存放一些特殊的文件。 ⒉ 将FP1文件夹中的全部素材文件导入“FPLX”站点中； 操作步骤 ⑴ 【文件】→【打开站点】，在“打开站点”对话框中选A盘、FPLX→【打开】（图5.5）； file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image010.gif
⑵ 【文件】→【导入】，出现“导入”对话框，单击“添加文件”按钮，出现“将文件添加到文件列表”对话框（图5.6）； ⑶ 选A盘、FP1文件夹中全部文件，单击【打开】按钮，返回“导入”对话框。 ⑷ 此时，“导入”对话框中出现fp1文件夹中的文件，并且【确定】按钮不再灰化，单击【确定】。
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image012.gif
⒊ 查看站点结构。 操作步骤 ⑴ 单击视图窗口中的【文件夹】图标，在文件夹列表框内逐一查看各文件夹的内容，了解站点的整体结构（图5.7）。 再回到【网页】窗口，逐一查看各文件夹内容，体会各窗口的不同之处。 说明 file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image014.gif
① 如果在【网页】查看中没有出现“文件夹列表”栏，可以在【查看】菜单中单击【文件夹列表】命令,即可出现“文件夹列表”栏； ② 在站点中包含了自身的文件以及文件夹的管理，使用非常方便。 ⑵ 分别单击【报表】、【导航】、【超连接】、【任务】等图标，查看各窗口信息。 说明 由于是一个新站点，许多地方都还没有内容。
实验5.1 网页制作1任务1 新建、打开与保存网页
| | file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image016.gif |
打开站点“FP1”，完成以下操作，并按照题目要求保存文件，样文见图5.8。
打开站点操作： 【文件】→【打开站点】，在“打开站点”对话框中选FP1文件夹，【打开】。 ⒈ 新建一个模板名称为“带有两个边栏的一栏正文”的网页。将网页的标题设置为“我的网页”并以文件名FP1RW1a.htm保存在“FP1”站点中。
| | file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image019.gif |
操作步骤 ⑴ 【文件】→【新建】→【网页】，出现“新建”对话框（图5.9）， ⑵ 在【常规】页面中选择题目要求的一种网页模板，【确定】。 ⑶ 在“标题”框中输入“我的网页”（图5.10）。 当完成了所有的编辑后，即可存盘保存。 ⑷【文件】→【另存为】，出现“另存为”对话框（图5.11）， file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image021.gif
⑸ 设定：保存位置FP1、文件名类型WEB、文件名FP1RW1a后单击【保存】按钮保存。 注意： ① 由于是新建的网页，故选【另存为】，即使选【保存】系统也会自动跳出【另存为】对话框！ ② 由于我们在新建网页前，已经打开站点FP1，所以【另存为】对话框中保存位置自动设为“FP1”站点（文件夹）。 ⒉ 打开与保存已建网页 file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image023.gif打开站点“FP1”中名为FP1RW1a.htm的网页，将网页标题改为“我的网页A”。将编辑后的网页以原文件名保存在“FP1”站点中。 操作步骤 ⑴ 当我们需要修改已经建立的网页，就先要用“打开”命令将文件打开。 方法1：【文件】→【打开】，出现“打开”对话框（见图5.12），选择文件后，单击【打开】按钮，出现图5.13(A)界面。 方法2：在“我的电脑”或“资源管理器”中选中该网页文件，右击，在快捷菜单中选【编辑】命令，出现图5.13(A)界面。 注意： 选择方法2时，选中网页文件后，千万不能象打开WORD或EXCEL文件那样双击该文件名（FP1RW1.htm），因为双击网页文件名是运行该网页，而非编辑！ 我们在编辑开始时，已经打开“FP1”站点，而FP1RW1a.htm是保存在FP1站点内的。因此使用方法1时，在“打开文件”对话框的“查找范围”文本框已经定位在FP1，只需在文件窗口中选择文件FP1RW1a.htm即可，非常方便！我们推荐使用方法1，而方法2在网页设计中不推荐使用。 ⑵ 编辑：光标定位在标题处，将其改为“我的网页A”(图5.13(B)界面)。 file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image025.gif ⑶ 将编辑后的网页以原文件名存盘保存：【文件】→【保存】。 注意： 【保存】操作并不关闭FrontPage窗口，可以继续编辑。 实验与思考 对打开的网页进行编辑后的保存一般有两种情况： ① 将编辑后的网页以原文件名存盘保存（见上面⒉⑶）； ② 原文件（FP1RW1a.htm）内容不变，将编辑修改后的网页以新文件名(例如FP1RW1b.htm)保存，则应选【文件】→【另存为】命令，操作方法同图5.11。 问题： ①【另存为】后当前编辑窗口中的文件是：FP1RW1a.htm还是FP1RW1b.htm？ ② 观察文件FP1RW1a.htm、FP1RW1b.htm，比较两文件中的标题的区别并记下结果。此时再将文件FP1RW1b.htm的标题改为“我的网页B”，并选【另存为】命令，以FP1RW1c.htm保存。再次比较FP1RW1a.htm、FP1RW1b.htm、FP1RW1c.htm中的标题，你可以总结出什么结论？ 任务2 文本格式编辑file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image027.gif
打开站点“FP1”，新建一个模板为“普通网页”的网页。完成如下操作后以文件名FP1RW2.htm保存在“FP1”站点中，样文见图5.14。
打开站点操作： 【文件】→【打开站点】，在“打开站点”对话框中选FP1文件夹，【打开】。 ⒈ 输入标题：计算机的诞生与发展，楷体、6号（24磅）、加粗倾斜、蓝色，居中对齐； 操作步骤 ⑴ 新建网页操作：【文件】→【新建】→【网页】，在“新建”对话框的【常规】页面中，选择“普通网页”模板，【确定】（参见图5.9）。 ⑵ 在网页中输入文字：计算机的诞生与发展； file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image030.gif file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image033.gif⑶选中文字，【格式】→【字体】，在“字体”对话框的“字体”页面中，选择楷体、6号（24磅）、加粗倾斜、蓝色后【确定】（图5.15）； ⑷ 光标定位在标题行，选“居中”快捷按钮（图5.16）。 实验与思考 字体、字型、字号以及颜色的设置是否可以通过快捷按钮一一实现？ ⒉ 复制文档。另起一行，并将FPTEXT1.TXT文件中的第1～3行的文字复制到空白行的开始处（左对齐），并设置该3行文字为双倍行间距；
操作步骤 ⑴ 打开FPTest1.TXT文件，选中前三行文字，选【编辑】→【复制】（图5.17）； ⑵ 在FrontPage窗口中，将光标移入下一行（图5.18），选【编辑】→【粘贴】； 由于粘贴后的文字是居中对齐，还需将其左对齐（图5.19）； file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image036.gif
⑶ 光标定位在该三行文字中的任意位置，选【格式】→【段落】，出现“段落”对话框，在“行距大小”栏中选“双倍行距”，【确定】（图5.20）。 file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image039.gif
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image040.gif实验与思考 ① 粘贴的文字为何会自动居中对齐？ ② 请实验并体会“段落”对话框（图5.20）中其它各项设置，如：对齐方式，缩进，段落间距等的效果。 ⒊ 项目符号和编号：设置第⑵题中的3行文字为带有“■”的项目符号列表。 操作步骤 ⑴ 选中该三行文字，选【格式】→【项目符号和编号】，出现“列表属性”对话框，选“无格式项目列表”页面，选带有“■”的项目符号列表，【确定】（图5.21）。 问题： 从结果看，只有第一行满足要求，而其余行没有变化，这是为什么，你能找出原因吗？ ⑵ 第2行的解决方法见图5.22，再用同样的方法设置第3行。 file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image042.gif
实验与思考 ① 如果你找到了上述问题的原因的话，应该有更标准的设置方法，请试试。 ② 如果要将带有“■”的项目符号列表改为数字编号的列表，你能否在列表属性中找到相应的设置？ 保存网页：
| | file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image044.gif |
【文件】→【另存为】，选FP1文件夹，输入FP1RW2.htm，【保存】。
任务3 插入对象打开站点“FP1”中文件FP513.htm，进行如下的插入操作后以文件名FP1RW3.htm保存在“FP1”站点中，样文见图5.23。 打开站点与网页操作： ⑴ 【文件】→【打开站点】，在“打开站点”对话框中选FP1文件夹，【打开】。 ⑵ 【文件】→【打开】，在“打开文件”对话框中选FP513.htm，【打开】。 ⒈ 插入水平线：在文字下方插入一条水平线，并设置水平线的属性为：宽度80％，高度4像素，左对齐，褐色； 操作步骤 ⑴ 光标移到下一空行行首，选【插入】→【水平线】，出现水平线； file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image047.gif
⑵ 选中水平线，【格式】→【属性】（或右击→【属性】），出现“水平线属性”对话框，按题目要求设置宽度80％，高度4像素，左对齐，褐色后【确定】（图5.24）。 注意： 在FrontPage的许多设置中都有：百分比和像素的选项，本题“宽度80％”，即为百分比，如果改为“宽度80像素”，则要选像素，宽度框中仍为80。 实验与思考 “宽度80％”与“宽度80像素”在效果上有何区别？ ⒉ 插入日期和时间：在水平线的下方插入一行该网页上次自动更新的日期和时间，日期格式为：××××年××月××日，时间格式为：××:××； 操作步骤 ⑴ 光标移到水平线的下一行行首，选【插入】→【日期和时间】，出现“日期时间属性”； ⑵ 按照要求选中“该网页上次自动更新的日期和时间”，设置日期格式为：××××年××月××日，时间格式为：××:××，【确定】（图5.25）。 file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image049.gif
⒊ 插入计数器：在“日期和时间”的后面插入站点计数器，选第5行样式，数字位数为6位，并右对齐； file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image051.gif
操作步骤 file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image054.gif
⑴ 光标定位在“日期和时间”的后面，选【插入】→【组件】→【站点计数器】，出现“站点计数器属性”对话框，按题目要求设置第5行样式，数字位数为6位，【确定】（图5.26）； ⑵ 选中“计数器”，单击“右对齐”快捷按钮（图5.27）。 实验与思考 当你将“计数器”右对齐时，为何之前插入的“日期和时间”也随之右对齐？ ⒋ 插入字幕：在“日期和时间”行的下方插入字幕：计算机的诞生与发展，方向向右，延迟速度为60，交替表现方式，宽度：60％，高度：30像素，背景颜色为浅蓝色； 操作步骤 ⑴ 光标移到“计数器”所在行的下一行，选【插入】→【组件】→【字幕】，出现“字幕属性”对话框； file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image056.gif
⑵ 按题目要求输入文本为“计算机的诞生与发展”，设置方向向右，延迟速度为60，交替表现方式，宽度：60％，高度：30像素，背景颜色为浅蓝色，【确定】（图5.28）。 观察字幕的效果 单击FrontPage编辑窗口下方的【预览】标签进入预览窗口（图5.1），查看字幕的动态效果。再单击【普通】标签返回编辑窗口。 file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image059.gif
⒌ 在字幕的下一行插入名为“详细内容”的悬停按钮，按钮颜色：浅蓝色，凹进效果，高度为30，字体为：倾斜、18号、深蓝色。（图5.29） 操作步骤 ⑴ 另起一行，选【插入】→【组件】→【悬停按钮】，出现“悬停按钮属性”对话框； ⑵ 按题目要求输入按钮文本为“详细内容”，设置按钮颜色：浅蓝色，凹进效果，高度为30，字体为：倾斜、18号、深蓝色，【确定】。 说明： 字体的设置，需要单击“字体”按钮，在出现的“字体”对话框中实现（见右图）。 实验与思考 如果要将网页中已有的一段文字(比如“计算机的发展趋势”)设置为“字幕”，应如何操作？ ⒍ 修改字幕的属性，将重复次数设为3次。 操作步骤 选中字幕，选【格式】→【属性】，出现“字幕属性”对话框，按要求设置重复次数设为3次，【确定】（图5.30）。 file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image062.gif
实验与思考 ⑴水平线、日期和时间、组件（站点计数器、字幕、悬停按钮）的属性是否都可以按此方法修改？ ⑵一般都喜欢使用“右击→选相应插件的属性”，出现对话框，再修改属性。请对上述5种插件逐一试一试？ 保存网页：【文件】→【另存为】，选FP1文件夹，输入FP1RW3.htm，【保存】。 作业5.1⒈ 新建站点并导入文件。在A盘根目录创建一个名为“FPLX1”的站点，站点模板为“只有一个网页的站点”。将A盘LX1文件夹中的所有文件导入到“FPLX1”站点中。 ⒉ 在站点中新建网页。打开“FPLX1”站点，在站点中新建一个模板名称为“普通网页”的新网页； ⒊ 保存网页。将新建网页以文件名：A.HTM保存在A盘FPLX1站点中； 继续对该网页进行编辑，并注意不断保存更新的结果！ ⒋ 插入文字与水平线。 ⑴ 分三行输入文字：第1行：词二首、第2行：满江红、第3行：水调歌头； ⑵ 另起一行，插入宽80像素、高3像素、紫色的水平线； ⑶ 将名为FPSC1.txt文件中的内容复制到水平线下方； ⒌ 编辑网页。 ⑴ 设置第1行：词二首，为楷体、5号（18磅）加粗、褐色，居中对齐；第2、3行文字为4号、蓝色、左对齐； ⑵ 设置第2、3行文字为带有i、ii的项目符号列表； ⑶ 设置第2、3行段落间距为2倍行间距； 在水平线下方的“满江红”、“【宋】岳飞”、“水调歌头”3行的行尾插入回车符，设置“满江红”、“水调歌头”段落居中对齐，其余段落左对齐； ⒍ 插入对象。 ⑴ 在水平线的上方插入站点计数器，选第2行样式，数字位数为3位，并右对齐； ⑵ 在“站点计数器”后面插入日期和时间，格式为：该网页上次自动更新的日期和时间，日期：××/××/××(日/月/年)，时间：××:××:××； ⑶ 设置以下两行文字为字幕： file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image064.gif“——【宋】岳飞”，字幕属性为：方向向右，延迟速度为40，幻灯片表现方式，背景颜色为浅蓝色，字体幼园、加粗14磅、红色、加浅蓝色凹线边框； “——【宋】苏轼”，字幕属性为：方向向左，延迟速度为80，滚动条表现方式，背景颜色为蓝绿色，字体隶书、12磅、深蓝色，字符间距扩充5磅，蓝绿色嵌入式边框； ⑷ 在文字最后另起一行，插入名为“更多诗词”的悬停按钮，按钮颜色：粉红色，字型加粗倾斜。 结果参见样文5.31：
实验5.2 网页制作2任务1 网页属性设置打开站点“FP2”中文件FP521.htm，作如下操作，样文见图5.32。 file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image066.gif
打开站点与网页： ⑴ 【文件】→【打开站点】，在“打开站点”对话框中选FP2文件夹，【打开】； ⑵ 【文件】→【打开】，在“打开文件”对话框中选FP521.htm，【打开】。 ⒈ 设置“进入网页”的过渡效果为“圆形放射”，周期为2秒； 操作步骤
| | file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image068.gif |
⑴ 选【格式】→【网页过渡】，出现“网页过渡”对话框；
⑵ 按照题目要求设置事件为“进入网页”，周期为2秒，过渡效果为“圆形放射”，【确定】。(图5.33) ⒉ 设置网页的标题为“计算机简介”，为网页设置背景 音乐为FP2文件夹中的FPYL01.WAV，播放3次， 操作步骤 ⑴ 选【格式】→【背景】，出现“网页属性”对话框； ⑵ 选“常规”页面，按题目要求设置标题为“计算机简介”，背景音乐为FP2文件夹中的FPYL01.WAV，播放3次，【确定】。(图5.34) file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image071.gif ⒊ 将FP2文件夹中名为FP001.jpg的图片作为网页的背景，以文件名FP2RW1a.htm保存在“FP2”站点中； file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image074.gif
操作步骤 ⑴ 选【格式】→【背景】，出现“网页属性”对话框； ⑵ 选“背景”页面，单击【浏览】出现“选择文件”对话框，选择FP2文件夹中FP001.JPG，单击“【确定】”返回“网页属性”对话框,再次单击“【确定】”。(图5.35) 预览 单击FrontPage编辑窗口下方的【预览】标签，出现预览窗口（图5.1），观察设置的效果。再单击【普通】标签返回编辑窗口。 ⑶ 保存：选【文件】→【另存为】，以文件名FP2RW1a.htm保存在“FP2”站点中。 ⒋ 为网页应用主题“蓝图”中的“鲜艳的颜色”和“背景图片”，不应用“动态图形”和“应用CSS”，并以文件名FP2RW1b.htm保存在FP2站点中。 操作步骤 ⑴选【格式】→【主题】，出现“主题”对话框； file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image076.gif
⑵选“蓝图”主题，在“鲜艳的颜色”前打“√”，取消“动态图形”前的“√”，“背景图片”前的“√”不变，“应用CSS”前本来无“√”仍然不变，【确定】；(图5.36) ⑶保存：选【文件】→【另存为】，以文件名FP2RW1b.htm保存在“FP2”站点中。 file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image078.gif当我们以文件名FP2RW1b.htm保存时，会跳出“保存嵌入式文件”对话框（图5.37），这是由于设置主题时产生了5幅图片（文件），要求用户指定其存放位置，一般可以按默认的路径存放，即直接单击“【确定】”按钮即可。 实验与思考 ① 找一找“主题”设置中产生的5个图片文件存放在何处了？在以后的其他操作中千万不能将该5个文件搬家或删除！ ② 在FP2RW1b.htm文件中，查看前面第⒉、⒊题中设置的背景音乐与背景图片是否还存在？请总结一下“主题”设置会影响哪些背景的设置。 任务2 图片操作及动态HTML效果打开“FP2”站点中名为FP522.htm的文件，作如下操作后以文件名FP2RW2.htm保存在“FP2”站点中，样文见图5.38。
| | file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image080.gif |
打开站点与网页： ⑴ 【文件】→【打开站点】，在“打开站点”对话框中选FP2文件夹，【打开】。 ⑵ 【文件】→【打开】，在“打开文件”对话框中选FP522.htm，【打开】。 ⒈ 在第二段文字开始处插入图片FP002.jpg； 操作步骤 ⑴ 光标定位在第二段文字开始处，选【插入】→【图片】→【来自文件】，出现“选择文件”对话框； file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image082.gif
⑵ 选FP2文件夹中图片文件FP002.jpg，【确定】（图5.39）。 ⒉ 设置图片右对齐，宽度按比例缩小到100像素，水平间距20（像素）； 操作步骤 ⑴ 选中图片，【格式】→【属性】（或右击→【图片属性】），出现“图片属性”对话框； ⑵ 选【外观】页面，设置图片右对齐，宽度按比例缩小到100像素，水平间距20（像素），【确定】（图5.40）。 file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image084.gif
实验与思考 ① 请分别设置并观察图片的其他对齐方式，如：左对齐，绝对、相对垂直对齐等； ② 改变FrontPage窗口大小，观察图片的变化。如果将图片大小设置为宽度50％，高度40％，再改变FrontPage窗口大小并观察图片的变化，你能得出什么结论？ file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image086.gif
③ 设置图片的垂直间距为30像素，观察之； ⒊ 为该图片应用动态HTML效果：当鼠标悬停时图片交换成FP003.jpg。 操作步骤 ⑴ 选中图片，选【格式】→【动态HTML效果】，出现“DHTML效果”对话框； ⑵ 按照题目要求设置：鼠标悬停、交换图片、图片为FP2文件夹中的FP003.jpg，关闭对话框（图5.41）。 ⒋ 给第一段文字（标题）加动态HTML效果：单击鼠标时文字周围出现粉红色双线边框； 操作步骤 file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image088.gif
光标定位在标题行，选【格式】→【动态HTML效果】，出现“DHTML效果”对话框设置：单击、格式、选择边框操作后关闭对话框（图5.42）。 保存网页： 【文件】→【另存为】，选FP2文件夹，输入FP2RW2.htm，【保存】。 file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image090.gif任务3 表格操作打开“FP2”站点中名为FP523.htm的文件，完成以下操作后以文件名FP2RW3.htm保存在FP2站点中，样文见图5.43。
打开站点与网页： ⑴ 【文件】→【打开站点】，在“打开站点”对话框中选FP2文件夹，【打开】。 ⑵ 【文件】→【打开】，在“打开文件”对话框中选FP523.htm，【打开】。 ⒈ 在表格第2列右侧插入一列，删除编号为“2”的一行（即第3行）； 操作步骤 ⑴ 选中表格第2列，选【表格】→【插入】→【行或列】，出现“插入行或列”对话框； ⑵ 按要求设置后【确定】（图5.44）。 file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image092.gif
实验与思考 ① 同样，可以用右击方式选插入列（行）命令，它与选择菜单命令的操作有和区别？ ② 插入一列后，表格总宽度是否发生变化，变化的是什么？ ⑶ 选中表格中编号为“2”的行，选【表格】→【删除单元格】（图5.45）。 file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image094.gif
说明 表格操作中，无“删除行（列）”操作命令！ ⒉ 将表格中“名称”所在列拆分为两列，并将编号为“1”、“3”的2个单元格合并； 操作步骤 ⑴ 选中“名称”列,选【表格】→【拆分单元格】，出现“拆分单元格”对话框，按要求设置后【确定】（图5.46）； file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image096.gif
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image099.gif
⑵ 选择编号为“1”、“3”的2个单元格（图5.47a），右击→【合并单元格】。 注意 合并后，会在“1”的后面自动插入一个换行符，使得2、3两行高度发生变化，可以将换行符删除（图5.47b），恢复原来行的高度。 ⒊ 设置表格第1行单元格的属性为：文字水平居中，边框深蓝色，背景粉红色； 操作步骤 ⑴ 选中第1行，右击→【单元格属性】，出现 “单元格属性”对话框；
| | file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image101.gif |
⑵ 按照题目要求设置属性为：文字水平居中，边框深蓝色，背景粉红色，【确定】（图5.48）。
⒋ 设置表格属性：表格右对齐，宽度为400象素，边框粗细4像素，将图片FP004.gif作为背景图片； 操作步骤 ⑴ 光标定位在表格中任何位置，右击→【表格属性】，出现 “表格属性”对话框； ⑵ 按照题目要求设置（图5.49）后【确定】。 file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image103.gif
注意 表格属性与单元格属性的区别！ file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image106.gif
⒌ 在已有表格的上方插入一个宽度为300像素的2行4列的表格，表格左对齐，单元格间距为6； 操作步骤 ⑴ 光标定位在表格的上方，选【表格】→【插入】→【表格】，出现 “插入表格”对话框； ⑵ 设置表格2行4列，左对齐，宽度300像素，单元格间距为6，【确定】（图5.50）。 保存网页： 【文件】→【另存为】，选FP2文件夹，输入FP2RW3.htm，【保存】。 作业5.2打开站点FPLX2，对B.htm网页文件作如下编辑后保存（样文参见图5.51）。 file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image108.gif
⒈ 表格操作。 ⑴ 在表格下方插入3行； ⑵ 表格第2～5行以行为单位，将每一行3个单元格合并为1个单元格。将第1行第3单元格拆分为2列； ⑶ 表格属性：表格水平居中，边框粗细为0，单元格间距为1，表格宽度、高度均为100％，蓝绿色背景； ⑷ 单元格属性：第1行4个单元格均水平对齐，宽度25％，背景为浅绿色。第2～4行单元格为白色字体、宽度100％； ⒉ 文本编辑。 ⑴ 在表格上方输入文字“诗词浏览”，楷体、6号（24磅）加粗倾斜、蓝色，居中对齐； ⑵ 将文件“词二首.doc”中的词“满江红”复制到第2行单元格中，词“水调歌头”复制到第4行单元格中； ⑶ 段落设置：设置“满江红”段居中对齐、“怒发冲冠，……”段左对齐、“【宋】岳飞”段右对齐；以相同的格式设置第4行单元格中文字内容； ⒊ 网页属性。 设置网页背景图片为image001.jpg，背景音乐为fpyl03.wav； ⒋ 图片与动态效果。 ⑴ 将图片“返回.gif”分别复制到第3、5行单元格中，右对齐。以正好容纳单元格中内容为准调整表格的行高。 ⑵ 设置第3、5行单元格中图片的动态HTML效果为：鼠标悬停时图片交换为“返回_down.gif”； 设置“诗词浏览”所在行的动态HTML效果为：鼠标单击时出现浅绿色凸线样式方框；
实验5.3 网页制作3任务1 书签超连接file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image110.giffile:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image111.gif
打开“FP3”站点中名为FP531.htm的文件，完成如下操作后以文件名FP3RW1.htm保存在“FP3”站点中，样文见图5.52。 打开站点与网页： ⑴ 【文件】→【打开站点】，在“打开站点”对话框中选FP3文件夹，【打开】。 ⑵ 【文件】→【打开】，在“打开文件”对话框中选FP531.htm，【打开】。 ⒈ 定义书签：对标题文字“计算机”以及水平线下方的文字“计算机的诞生”、图片分别建立书签，书签名称依次为“计算机”、“诞生”、“CPU”； 作步骤 ⑴ 选中文字“计算机的诞生”，选【插入】→【书签】，出现“书签”对话框，由于书签名与文字内容正好一致，直接【确定】即可（图5.53）； file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image113.gif
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image115.gif
⑵ 选中文字“计算机的诞生”，选【插入】→【书签】，出现“书签”对话框，修改书签名为“诞生”后【确定】（图5.54）。 ⑶ 选中图片，选【插入】→【书签】，出现“书签”对话框，输入书签名“CPU”后【确定】（图5.55）。
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image117.gif
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image119.gif
⒉ 建立超级链接：将文字“计算机诞生”、名为“Pentium芯片”的悬停按钮以及“箭头”图片字依次分别超级链接到名为“诞生”、“CPU”、“计算机”的书签处。 操作步骤 ⑴ 选中文字“计算机诞生”，选【插入】→【超连接】，出现“创建超连接”对话框， 设置级链接到名为“诞生”的书签后【确定】（图5.56）； ⑵ 选中名为“Pentium芯片”的悬停按钮，【右击】→【悬停按钮属性】，在出现的“悬停按钮属性”对话框中单击【浏览】按钮，出现“选择悬停按钮超连接”对话框，链接到名为“CPU”的书签后【确定】（图5.57）； file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image121.gif
⑶选中图片，选【插入】→【超连接】，出现“创建超连接”对话框，设置级链接到名为“计算机”的书签后【确定】（图5.58）； file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image123.gif
用同样的方法设置另一个图片的超连接。 预览 切换到【预览】窗口，分别单击各超连接，体会书签超链接的作用。 实验与思考 是否可以在“URL”文本框中直接输入“＃书签名”？比较两种方法的优缺点。 保存网页：【文件】→【另存为】，选FP3文件夹，输入FP3RW1.htm，【保存】。 任务2 超连接打开“FP3”站点中的文件FP532.htm，完成如下操作后以文件名FP3RW2.htm保存在“FP3”站点中，样文参见图5.59。 file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image125.gif
打开站点与网页： ⑴ 【文件】→【打开站点】，在“打开站点”对话框中选FP3文件夹，【打开】。 file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image127.gif
⑵ 【文件】→【打开】，在“打开文件”对话框中选FP532.htm，【打开】。 ⒈ 对文字“WWW链接”建立超连接，链接到域名为www.sju.js.cn的站点（图5.60）； 操作步骤 ⑴ 选中文字“WWW链接”，选【插入】→【超连接】，出现“创建超连接”对话框； ⑵ 在“URL”文本框中字母“http://”的后面直接输入域名www.sju.js.cn，【确定】； ⒉ 对文字file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image128.gif“链接Email”建立电子邮件地址为shuzz139@sju.js.cn的电子邮件超连接（图5.61）； file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image130.gif
操作步骤 ⑴ 选中文字“链接Email”，选【插入】→【超连接】，出现“创建超连接”对话框； ⑵ 单击“制作发送电子邮件的超连接”按钮，出现的“创建电子邮件超连接”对话框； ⑶ 在“创建电子邮件超连接”对话框中输入邮件地址“shuzz139@sju.js.cn”，【确定】，返回“创建超连接”对话框； ⑷ 这时在“创建超连接”对话框的“URL”文本框中出现已经添加了“mailto：”的电子邮件的地址，【确定】。 说明 可以直接在“URL”文本框中输入电子邮件地址，但必须在地址前加“mailto:”！正确的输入地址应是mailto:shuzz139@sju.js.cn。 file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image132.gif
⒊ 对文字“链接网页”建立超连接，链接到FP2文件夹中的名为FP2RW1a.HTM网页（图5.62）； 操作步骤 ⑴ 选中文字“链接网页”，选【插入】→【超连接】，出现“创建超连接”对话框； ⑵ 单击“制作一个指向您计算机上文件的超连接”按钮，出现的“选择文件”对话框； ⑶ 在“选择文件”对话框中选择FP2文件夹中FP2RW1a.htm文件，【确定】。 说明 当第⑶步操作结束时，系统不再回到“创建超连接”对话框，这与链接电子邮件超连接不同。 实验与思考 选中已经建立链接的文字“链接网页”，选【插入】→【超连接】或：右击→【超连接属性】，在出现的“编辑超连接”对话框中你将会在“URL”文本框中看到“../FP2/FP2RW1a.htm”你能解释“../FP2”的含义吗？ ⒋ 对标有“链接图片”名字的图片建立超链接，链接到文件名为FP005.JPG的图片（图5.63）。 file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image134.gif 操作步骤 ⑴ 选中标有“链接图片”名字的图片，选【插入】→【超连接】，出现“创建超连接”对话框； ⑵ 单击“制作一个指向您计算机上文件的超连接”按钮，出现的“选择文件”对话框； ⑶ 在“选择文件”对话框中选择FP2文件夹中FP2RW1a.htm文件，【确定】。 说明 在第⑶步操作结束时，系统不再回到“创建超连接”对话框，这与链接网页操作相同。 实验与思考 选中已经建立链接的图片，选【插入】→【超连接】或：右击→【超连接属性】，在出现的“编辑超连接”对话框中你将会在“URL”文本框中看到“FP005.jpg”。你能解释同样是链接文件，为什么与链接网页操作出现的“../FP2/FP2RW1a.htm”不同？ 预览 切换到【预览】窗口，分别单击各超连接，体会各种超链接。 保存网页：【文件】→【另存为】，选FP3文件夹，输入FP3RW2.htm，【保存】。 小结 ⒈ 超连接可以使你当前的网页跳转到其它地方。超连接的目的地可以是其它的网站、网页，也可以是电子邮件地址、一幅图片、一个WORD文档、一个EXCEL工作簿，甚至是一个应用程序。目的地也可以某网页（或本网页）中某一位置，这时需要使用书签定位，即书签式超连接。 ⒉ 一般在“创建超连接”对话框中实现各种不同的超连接。通常可以使用对话框中提供的各种按钮、下拉列表框等进行超连接操作，具体如下： 书签链接：使用书签下拉列表框； 电子邮件链接：使用“制作发送电子邮件的超连接”按钮； 网页、图片等文件形式的链接：使用“制作一个指向您计算机上文件的超连接”按钮； 指向某网站：可以直接输入网站的域名。 作业5.3打开站点FPLX2，对B.htm网页文件作如下编辑后保存。 ⒈ 书签超链接。 ⑴ 定义第2行单元格中“满江红”、第4行单元格中“水调歌头”为书签，书签名即文字本身，表格上方的文字“诗词浏览”以“TOP”为书签名定义为书签； ⑵ 将第1行单元格中“满江红”、“水调歌头”分别超连接到定义的书签，第3、5行图片分别超连接到名为TOP的书签； ⒉ 超连接。 ⑴ 将第1行单元格中“唐诗二首”超连接到“唐诗二首.htm”； ⑵ 在第1行第4单元格中输入文字“更多诗词”，并超连接到：ccf.tsinghua.edu.cn； ⑶ 在表格第5行左侧插入名为“联系我们”的悬停按钮，按钮颜色为蓝绿色，并超连接到电子信箱：shu139@sju.js.cn；
实验5.4 框架网页任务1 创建与保存框架网页
| | file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image136.gif |
打开“FP4”站点，完成如下操作后以题目要求的文件名保存在“FP4”站点中，样文见图5.64。
打开站点操作： 【文件】→【打开站点】，在“打开站点”对话框中选FP4，【打开】。 file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image138.gif
⒈ 新建一个模板为“横幅和目录框架网页”的框架网页（图5.65）； 操作步骤 ⑴ 【文件】→【新建】→【网页】，出现“新建”对话框； ⑵ 在“框架网页”页面中选“横幅和目录”模板，【确定】,出现一个新的框架网页。 ⒉ 设置每个框架中的内容： A) 在横幅框架中输入文字“计算机 信息技术”，隶书、加粗、6号字、粉红色，并居中对齐； 操作步骤 file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image140.gif
⑴ 单击横幅中“新建网页”按钮，出现空白网页（图5.66）； file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image142.gif
⑵ 在空白网页中输入文字“计算机信息技术”，并设置：隶书、加粗、6号、粉红色以及居中对齐等（图5.67左图）。 B) 在左框架中分行键入“简介”、“WORD文档”、“Excel表格”、“PowerPoint”、“理论自学题目”； 操作步骤 ⑴ 单击左框架中“新建网页”按钮，出现空白网页； ⑵ 在空白网页中分行输入文字“简介”、“WORD文档”、“Excel表格”、“PowerPoint”、“理论自学题目”等，参见图5.67左图。 C) 右框架超连接到FP4文件夹中名为hua.htm的网页； 操作步骤 ⑴ 单击右框架中“设置初始网页”按钮，出现“创建超连接”对话框（图5.67）； ⑵ 在“创建超连接”对话框中选FP4文件夹、简介.htm文件，【确定】，结果参见图5.64。 ⒊ 保存框架网页。横幅命名为top.htm、左框架命名为left.htm、整个网页框架命名为index.htm，分别保存到FP4文件夹中。 操作步骤 ⑴ 选【文件】→【另存为】，出现“另存为”对话框； ⑵ 本框架由“横幅”、“左”、“右”框架三部分以及“主”框架组成，系统将会给每一个框架建立（链接）对应的网页文件，因此需要保存的网页文件原则上应该有四个。 file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image144.gif 首先出现的是主框架的保存界面（图5.68左图），选FP4文件夹，在文件名框中输入index.htm，单击“保存”按钮； 接着出现横幅框架的保存界面（图5.68右图），选FP4文件夹，在文件名框中输入Top.htm，单击“保存”按钮； file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image146.gif再次出现的是左框架的保存界面（图5.69），选FP4文件夹，在文件名框中输入left.htm，单击“保存”按钮。 实验与思考 ① 在保存时为什么没有出现右框架的保存界面？保存一个框架网页时，哪个网页是一定要求用户保存的，而其它网页的保存遵循何种规则? ② 我们在为每个框架建立网页时一般有几种链接方式？“设置初始网页”与“新建网页”按钮应如何正确使用？
任务2 框架属性打开站点“FP4”中名为index.htm的网页，完成如下编辑操作后保存在“FP4”站点中，样文见图5.70。
| | file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image148.gif |
打开站点与网页： ⑴ 【文件】→【打开站点】，在“打开站点”对话框中选FP4文件夹，【打开】。 ⑵ 【文件】→【打开】，在“打开文件”对话框中选index.htm，【打开】。 ⒈ 设置横幅框架的高度为50像素，边距的高度6，不显示滚动条。设置框架间距为10，显示边框，见图5.71； file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image150.gif
操作步骤 ⑴ 光标定位在横幅框架内，选【框架】→【框架属性】，出现“框架属性”对话框； ⑵ 在“框架属性”对话框中设置：“框架大小”栏中高度为50像素，“边距”栏中高度6，“选项”栏的“显示滚动条”文本框中选“从不”； ⑶ 单击“框架网页”按钮，出现“网页属性”对话框； ⑷ 在“网页属性”对话框中选“框架”页面，设置：框架间距为10，选中“显示边框”（打勾）。 说明 边距的高度、宽度是指所选定的网页内容与所在框架的上边框、左边框的距离，是某框架的属性；在“网页属性”中的框架间距是指分割框架的框线的粗细程度，是整个框架的属性，见图5.72。 file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image152.gif
⒉ 将右框架的初始网页更换为“简介.htm”,见图5.73。 file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image154.gif
操作步骤 ⑴ 光标定位在右框架内，选【框架】→【框架属性】，出现“框架属性”对话框； ⑵ 在“框架属性”对话框中，单击“初始网页”文本框右侧的【浏览】按钮，出现“编辑超连接”对话框；
⑶ 选中“hua.htm”文件，单击【确定】，返回“框架属性”对话框，单击【确定】。 ⒊ 拆分框架。将左框架拆分为上下两个框架，并设定左上框架的高度为190像素，左下框架插入FP4文件夹中图片FP002.JPG； 操作步骤 ⑴ 光标定位在左框架内，选【框架】→【拆分框架】，出现“拆分框架”对话框。在“拆分框架”对话框中选“拆分成行”，【确定】（图5.74），结果见图5.75左图； file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image156.gif
| | file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image158.gif |
⑵ 单击左下框架中【新建网页】按钮，出现空白网页。再选【插入】→【图片】→【来自文件】，出现“图片”对话框（图5.75）。在“图片”对话框中选FP4文件夹中图片FP002.JPG，【确定】(图5.76左图)； ⑶ 光标定位在左上框架内，选【框架】→【框架属性】，出现“框架属性”对话框，在“框架属性”对话框中设置“框架大小”中的高度为190像素，【确定】（图5.76）。 file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image160.gif
⒋ 保存修改结果，左下框架网页命名为left1.htm。 操作步骤 file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image162.gif
⑴ 【文件】→【保存文件】， 出现“另存为”对话框，这是因为拆分框架后增加了一个左下框架，因此系统要求用户输入对应的网页文件名（图5.77）； ⑵ 选FP4文件夹，在文件名框中输入LEFT1.HTM，单击【保存】。 注意 在【保存文件】操作会自动对主框架网页文件“index.htm”以及其他已经链接的网页进行保存！ 任务3 编辑框架中的网页file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image164.gif打开站点“FP4”中名为index.htm的网页，完成如下编辑操作后保存在“FP4”站点中，样文见图5.78。 打开站点与网页： ⑴ 【文件】→【打开站点】，在“打开站点”对话框中选FP4文件夹，【打开】。 ⑵ 【文件】→【打开】，在“打开文件”对话框中选index.htm，【打开】。 ⒈ 设置横幅框架中的网页背景音乐为FPYL02.WAV，背景为蓝绿色，对文字“计算机信息技术”应用DHTML效果：当网页加载时应用从左侧到右侧擦除效果； 操作步骤 ⑴ 光标定位在横幅框架内，右击→【网页属性】。分别在“常规”页面中设置背景音乐FPYL02.WAV，在“背景”页面中设置蓝绿色背景，【确定】（图5.79）； ⑵ 【格式】→【动态DHTML效果】，出现“DHTML效果”对话框，设置：开启为“网页加载”，应用为“擦除”、“从左侧到右侧”，关闭对话框（图5.80）； file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image167.gif
⑶ 保存修改结果。由于横幅框架链接的top.htm网页文件进行了以上的修改，所以需要保存。具体操作是：在保证横幅框架被选中（有深蓝色粗边框）的前提下，选【框架】→【保存网页】(图5.81)。
| | file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image169.gif |
⒉ 对左（上、下）框架建立超连接的操作分别如下： ⑴“简介”超连接到网页“简介.htm”，目标框架为“网页默认值(main)”； ⑵“WORD文档”超连接到文件名为“机器语言.doc”的WORD文档，目标框架为“新建窗口”； ⑶“EXCLEL表格”超连接到文件名为“房产信息.xls”的电子表格，目标框架为“contents1”（左下框架）； ⑷“理论自学题目”超连接到名为yl.exe的可执行文件，目标框架为“网页默认值(main)”； ⑸ “POWERPOINT”超连接到文件名为“CPU外观.htm”的网页形式演示文稿(由“CPU外观.PPT”文件生成)，目标框架为“新建窗口”。 操作步骤 ⑴ 选中文字“简介”，选【插入】→【超连接】，出现“创建超连接”对话框，在对话框中选“简介.htm”,由于“目标框架”中已是“网页默认值(main)”不必改变，单击【确定】即可（图5.82）； file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image172.gif
⑵ 选中文字“WORD文档”，选【插入】→【超连接】，出现“创建超连接”对话框，在对话框中选“机器语言.doc”（图5.82）,单击“目标框架”右侧的【更改目标框架】按钮，出现“目标框架”对话框，选“公用的目标区”中“新建窗口”（图5.83（B）），单击【确定】返回“创建超连接”对话框，再单击“创建超连接”对话框的【确定】按钮； file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image174.gif ⑶ 选中文字“EXCLEL表格”，选【插入】→【超连接】，出现“创建超连接”对话框，在对话框中选“房产信息.xls”（图5.82）,单击“目标框架”右侧的【更改目标框架】按钮，出现“目标框架”对话框，单击“当前框架网页”中的左下框架（图5.83（A）），单击【确定】返回“创建超连接”对话框，再单击“创建超连接”对话框的【确定】按钮；
| | file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image176.gif |
⑷ 选中文字“理论自学题目”，选【插入】→【超连接】，出现“创建超连接”对话框，在对话框中选“yl.exe”,由于“目标框架”中已是“网页默认值(main)”不必改变，单击【确定】即可（图5.84）； ⑸ 启动PowerPoint，打开“CPU外观.PPT”文件，【文件】→【另存为web页】，在“文件名”框中系统会自动生成文件名相同、但扩展名为.htm的文件名“CPU外观.htm”，可以直接单击【保存】（图5.84），关闭PowerPoint； 回到FrontPage界面，选中文字“POWERPOINT”，选【插入】→【超连接】，出现“创建超连接”对话框； 单击【更改目标框架】按钮，在“目标框架”中选“新建窗口”，【确定】，返回“创建超连接”对话框（图5.83(B)）； file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image178.gif
在对话框中单击URL框右侧【制作一个指向您计算机上文件的超连接】按钮，出现“选择文件”对话框，选FP4文件夹、文件CPU外观.htm，【确定】（图5.85）。
| | file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image180.gif |
实验与思考 假如先选择文件CPU外观.htm，再设置目标框架为“新建窗口”，一次可以完成操作吗？是何原因造成，应如何操作。 保存左上框架的修改结果。由于左上框架链接的left.htm网页文件进行了以上的修改（超连接），所以需要保存。具体操作是：在保证左上框架被选中（有深蓝色粗边框）的前提下，选【框架】→【保存网页】(图5.86A)。 ⑹ 选中左下框架中的图片，选【插入】→【超连接】，出现“创建超连接”对话框，在对话框中选“hua.htm”,单击“目标框架”右侧的【更改目标框架】按钮，出现“目标框架”对话框，单击“当前框架网页”中右框架，单击【确定】返回“创建超连接”对话框，再单击“创建超连接”对话框的【确定】按钮（图5.87）；
| | file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image182.gif |
保存左下框架的修改结果： 由于左下框架链接的left1.htm网页文件进行了图片超连接，所以需要保存。具体操作是：在保证左下框架被选中（有深蓝色粗边框）的前提下，选【框架】→【保存网页】(图5.86B)。 ⒊ 将修改后的各网页均以原文件名保存。 操作步骤 分析以上操作，改变了TOP.HTM、LEFT.HTM、LEFT1.HTM三个网页，因此需要再次保存。事实上，如果是严格按照上面介绍的步骤操作的，那么已经分别保存了，但涉及主框架文件index.htm修改没有保存。选【文件】→【保存文件】，将index.htm以及链接的各网页文件保存。 作业5.4打开站点FPLX4，对INDEX.htm文件作如下编辑后保存（样文参见图5.88）。 ⒈ 框架操作。 ⑴ 上框架：框架高度80像素，从不显示滚动条； ⑵ 左框架：框架宽度120像素，不可在浏览器中调整大小、在需要时显示滚动条； ⑶ 右框架：拆分为上下2个框架，设置右上框架高度300像素，右下框架高度为相对30、从不显示滚动条，保存右下框架网页文件名为“d.htm” ⑷ 整个框架的间距设为0； ⒉ 各框架网页设置。 ⑴ 上框架： ① 将“知识花絮”设置为字幕，方向向右，延迟速度为150，交替表现方式，字体隶书、加粗14磅、绿色； file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtml1/01/clip_image184.gif② 将BJS.JPG作为背景图片 ③ 超连接： “五笔字型键位”超连接到文件“五笔键位.xls”、目标框架为“bootom1”（右上框架）； “电子商务”超连接到“电子商务.htm”（由“电子商务.ppt”演示文稿文件生成）、目标框架为“bootom1”； “媒体的定义”超连接到“媒体.htm”、目标框架为“bootom1”； ⑵ 左框架： ① 在图片下方插入日期和时间，格式为：该网页上次自动更新的日期和时间，日期：××年××月、无时间； ② 在“日期和时间”下方插入站点计数器，选第3行样式，数字位数为4位； ③ 设置图片动态HTML效果为单击鼠标时图片交换为“tp0019.jpg”； ④ 为本网页应用主题“羊皮纸”中的“鲜艳的颜色”、和“背景图片”，不应用“动态图形”和“应用CSS”； ⑶ 右上框架： ① 更改初始网页为“媒体.htm”； ② 设置“进入网页”的过渡效果为“盒状收缩”、周期为3秒； ③ 将第二行表格中各单元格中文字分别对应超连接到标有⑴、⑵、⑶、⑷、⑸的数字序号开始的段落。在标有⑴、⑵、⑶、⑷、⑸的段落之后的空行处靠右插入图片fh.gif，且设置单击图片时能够回到文章开始处； ⑷ 右下框架： ① 为本网页应用主题“粗条型”中的“动态图形”和“背景图片”，不应用“鲜艳的颜色”和“应用CSS”； ② 插入背景音乐为fpyl02.wav； ③ 插入一行名称分别为“更多知识”、“请提建议”的2个悬停按钮，按钮的宽度为200像素。“更多知识”超连接到www.google.com、目标框架为“新建窗口”，“请提建议”超连接到电子信箱xyz123@sju.js.cn，目标框架为“新建窗口”；
| 
发表于 2012-1-19 14:48:26
,看看，参考一下