第一节 FrontPage 2003的新增功能

网学网为需要FrontPage教程的朋友们搜集整理了第一节  FrontPage 2003的新增功能相关资料，希望对各位网友有所帮助!

实例3  音乐网

1．制作目的

本例制作一个音乐网，如图14.3.1所示。在制作过程中，将用到框架网页的创建、制作框架内容、保存框架网页、设置目标链接、层等知识。

图14.3.1  最终效果图

2．操作步骤

（1）启动FrontPage 2003应用程序，选择“文件”→“新建”命令，弹出如图14.3.2所示的“新建”任务窗格。

（2）在“新建网页”选区中单击“其他网页模板”超链接，在弹出的“网页模板”对话框中打开“框架网页”选项卡，如图14.3.3所示。

图14.3.2  “新建”任务窗格                         图14.3.3 “框架网页”选项卡                

（3）在该选项卡中选中。。。图标，单击“确定”按钮，创建如图14.3.4所示的框架网页。

图14.3.4 创建框架网页

（4）单击上框架中的“新建网页”按钮，该框架即可变成一个空白网页。

（5）将光标置于该空白网页中，单击“格式”工具栏中的“插入层”按钮。。。，在该空白网页中插入一个层。

（6）选中该层，当层的四周出现8个控制点后，将鼠标移到层右下角的控制点上，当鼠标变成。。。形状时，按住鼠标左键拖动，调整层的大小。

（7）将鼠标移到层的左上角，当鼠标指针变成。。。形状时，按住鼠标左键将层拖动到网页的左上角后释放鼠标左键。

（8）将光标置于该层中，选择“插入”→“图片”→“来自文件”命令，弹出如图14.3.5所示的“图片”对话框。

图14.3.5 “图片”对话框

（9）在“查找范围”下拉列表中选择图片的保存位置，然后选择所需的图片，单击“插入”按钮，将该图片插入到层中。

（10）单击下端左侧框架中的“新建网页”按钮，该框架即可变成一个空白网页。

（11）将鼠标置于该框架网页中，单击鼠标右键，在弹出的快捷菜单中选择“在新窗口中打开网页”命令，即可在一个新窗口中打开该网页，并且在该窗口中编辑网页。

（12）选择“插入”→“表单”命令，插入一个表单。

（13）在光标所在位置输入“关键字：”，然后选择“插入”→“表单”→“文本框”命令，插入一个文本框表单域。

（14）双击所插入的文本框表单域，弹出如图14.3.6所示的“文本框属性”对话框。

（15）在“宽度”文本框中输入“12”，然后单击“确定”按钮。

（16）双击“提交”按钮，弹出如图14.3.7所示的“按钮属性”对话框。

   图14.3.6 “文本框属性”对话框                 图14.3.7  “按钮属性”对话框        

（17）在该对话框中的“值/标签”文本框中输入“搜索”，然后单击“确定”按钮。

（18）选中“重置”按钮，然后按“Delete”键，删除该按钮。

（19）另起一行插入一个14行2列的表格，然后选中第一行表格，在该表格中单击鼠标右键，在弹出的快捷菜单中选择“合并单元格”命令，将这两个单元格进行合并。

（20）将光标置于合并后的单元格中，选择“插入”→“图片”→“来自文件”命令，弹出“图片”对话框（见图14.3.5）。

（21）在该对话框中选择所需的图片，然后单击“插入”按钮。

（22）分别在第2行、第3行和第4行的单元格中输入文本内容，输完后选中所有的文本，然后单击“格式”工具栏中的“左对齐”按钮。。。，设置后的效果如图14.3.8所示。

图14.3.8 设置文本效果

（23）按同样方法在其他单元格中插入图片、输入文本并设置文本的对齐方式。

（24）关闭该网页，返回到框架网页中，制作后的框架效果如图14.3.9所示。

图14.3.9 制作框架网页效果

（25）单击下端右侧框架中的“新建网页”按钮，该框架即可变成一个空白网页。

（26）单击“格式”工具栏中的“插入层”按钮。。。，在该空白网页中插入一个层。

（27）选中该层，当层的四周出现8个控制点后，将鼠标移到层右下角的控制点上，当鼠标变成。。。形状时，按住鼠标左键拖动，调整层的大小。

（28）将鼠标移到层的左上角，当鼠标指针变成。。。形状时，按住鼠标左键将层拖动到网页的左上角后释放鼠标左键。

（29）将光标置于该层中，选择“插入”→“图片”→“来自文件”命令，弹出“图片”对话框（见图14.3.5）。

（30）在该对话框中选择所需的图片，然后单击“插入”按钮，效果如图14.3.10所示。

（31）将光标置于层下方，插入一个12行2列的表格。

（32）选中第一行单元格，然后在选中的第一行单元格中单击鼠标右键，在弹出的快捷菜单中选择“合并单元格”命令，将第一行单元格进行合并。

（33）将光标置于合并后的单元格中输入文本“最新专辑推荐视听”，输完后选中该文本，单击“格式”工具栏中的“加粗”按钮。。。和“居中”按钮。。。。

图14.3.10 插入图片效果

（34）将光标置于该文本后按几次空格键后再输入文本“更多……”。

（35）将光标置于其他单元格中输入文本内容，输完后选中所有的文本，单击“格式”工具栏中的“左对齐”按钮。。。，将表格中的文本左对齐。

（36）将光标置于表格中的任意位置，单击鼠标右键，在弹出的快捷菜单中选择“表格属性”命令，弹出“表格属性”对话框。

（37）在“边框”选区中的“粗细”微调框中输入“0”，设置完成后单击“确定”按钮。

（38）选择“文件”→“保存”命令，弹出如图14.3.11所示的“另存为”对话框（一）。

图14.3.11 “另存为”对话框（一）

（39）在“保存位置”下拉列表中选择上端框架网页的保存位置；在“文件名”下拉列表框中输入“Page1”，设置完成后单击“保存”按钮，弹出如图14.3.12所示的“保存嵌入式文件”对话框（一）。

（40）在该对话框中保存上端框架网页中的图片，系统默认的路径与框架网页的路径相同，直接单击“确定”按钮，在保存图片的同时弹出如图14.3.13所示的“另存为”对话框（二）。

（41）在“保存位置”下拉列表中选择保存上端框架网页的位置；在“文件名”下拉列表中输入“Page2”，设置完成后单击“保存”按钮，弹出如图14.3.14所示的“保存嵌入式文件”对话框（二）。

（42）单击“确定”按钮，在保存图片的同时弹出如图14.3.15所示的“另存为”对话框（三）。

图14.3.12 “保存嵌入式文件”对话框（一）

图14.3.13 “另存为”对话框（二）

图14.3.14 “保存嵌入式文件”对话框（二）

图14.3.15 “另存为”对话框（三）

（43）在“保存位置”下拉列表中选择框架网页的保存位置；在“文件名”下拉列表中输入“Page3”，设置完成后单击“保存”按钮，弹出如图14.3.16所示的“保存嵌入式文件”对话框（三）。

图14.3.16 “保存嵌入式文件”对话框（三）

（44）单击“确定”按钮，在保存图片的同时弹出如图14.3.17所示的“另存为”对话框（四）。

图14.3.17 “另存为”对话框（四）

（45）在“保存位置”下拉列表中选择框架网页的保存位置；在“文件名”下拉列表中输入“index”，设置完成后单击“保存”按钮。

（46）单击“格式”工具栏中的“预览”按钮。。。，预览框架网页效果如图14.3.18所示。

图14.3.18 预览框架网页效果

（47）切换到网页的设计视图中，单击“格式”工具栏中的“新建普通网页”按钮。。。，新建一个网页。

（48）单击“格式”工具栏中的“插入层”按钮。。。，在该空白网页中插入一个层。

（49）选中该层，当层的四周出现8个控制点后，将鼠标移到层右下角的控制点上，当鼠标指针变成。。。形状时，按住鼠标左键拖动，调整层的大小。

（50）单击该层，选择“插入”→“图片”→“来自文件”命令，弹出如图14.3.19所示的“图片”对话框。

图14.3.19 “图片”对话框

（51）在该对话框中选择第一幅图片，单击“插入”按钮，将该图片插入到层中。

（52）按同样方法继续插入其他两幅图片，插入后的效果如图14.3.20所示。

图14.3.20 插入图片效果

（53）单击“格式”工具栏中的“插入层”按钮。。。，在该层中再插入一个层，并调整层的大小。

（54）将光标置于新插入的层中，输入文本“两只蝴蝶”，输完后按回车键另起一行继续输入其他文本，输入文本后的效果如图14.3.21所示。

（55）选择“文件”→“保存”命令，弹出“另存为”对话框，在“保存位置”下拉列表中选择网页的保存位置；在“文件名”下拉列表框中输入“lzhd”，单击“保存”按钮，弹出“保存嵌入式文件”对话框，在该对话框中单击“确定”按钮。

图14.3.21 输入文本效果

（56）单击“格式”工具栏中的“新建普通网页”按钮。。。，新建一个空白网页。

（57）单击“格式”工具栏中的“插入层”按钮。。。，在该空白网页中插入一个层，然后设置层的大小。

（58）单击该层，然后在光标所在位置输入文本“推荐区：”，输完后选中该文本，单击“格式”工具栏中的“加粗”按钮。。。，使该文本加粗显示。

（59）将光标置于该文本后按回车键另起一行，插入一个11行5列的表格，然后在第一行的单元格中分别输入文本“选择”、“歌曲”、“歌手”、“试听”、“下载”。

（60）将光标置于第2行第1列的单元格中，选择“插入”→“表单”→“复选框”命令，插入一个复选框表单域。

（61）选中表单中的“提交”和“重置”按钮，然后按“Delete”键删除这两个按钮。

（62）按同样方法在第一列的其他单元格中插入复选框表单域。

（63）将光标置于第2列和第3列的单元格中，分别输入文本内容，输完后选中所有的文本，然后单击“格式”工具栏中的“左对齐”按钮。。。，设置后的效果如图14.3.22所示。

图14.3.22 输入并设置文本效果

（64）将光标置于第2行第4列的单元格中，选择“插入”→“图片”→“来自文件”命令，弹出“图片”对话框。

（65）在该对话框中选择所需的图片，然后单击“插入”按钮，将该图片插入到单元格中。

（66）按同样方法在第4列的单元格中继续插入其他图片。

（67）将光标置于第2行第5列的单元格中输入文本“下载1”和“下载2”。

（68）按同样方法在第5列的其他单元格中输入文本。

（69）选中第2列单元格，在选中的单元格中单击鼠标右键，在弹出的快捷菜单中选择“单元格属性”命令，弹出如图14.3.23所示的“单元格属性”对话框。

图14.3.23 “单元格属性”对话框

（70）在“背景”选区中的“颜色”下拉列表中选择一种背景颜色，然后单击“确定”按钮。

（71）按同样方法设置其他单元格的背景颜色。

（72）选择“文件”→“保存”命令，弹出“另存为”对话框，在“保存位置”下拉列表中选择网页的保存位置；在“文件名”下拉列表框中输入“zx”，单击“保存”按钮，弹出“保存嵌入式文件”对话框，在该对话框中单击“确定”按钮，制作后的网页效果如图14.3.24所示。

图14.3.24 网页效果

（73）打开保存过的框架网页“index”，选中下端左框架中的“最新专辑”图片，然后在该图片中单击鼠标右键，在弹出的快捷菜单中选择“超链接”命令，弹出如图14.3.25所示的“插入超链接”对话框。

（74）在“查找范围”下拉列表中选择“zx”网页的保存位置，然后在其列表框中选中该网页。

（75）单击“目标框架”按钮，弹出如图14.3.26所示的“目标框架”对话框。

图14.3.25 “插入超链接”对话框

图14.3.26 “目标框架”对话框

（76）在“当前框架网页”示例框中选中下端左框架，然后单击“确定”按钮，返回到“插入超链接”对话框中，再单击“确定”按钮。

（77）在框架网页中的下端左框架中选中文本“两只蝴蝶”，然后在该文本中单击鼠标右键，在弹出的快捷菜单中选择“超链接”命令，弹出如图14.3.27所示的“插入超链接”对话框。

图14.3.27 “插入超链接”对话框

（78）在“查找范围”下拉列表中选择“lzhd”网页的保存位置，然后在其列表框中选中该网页。

（79）单击“目标框架”按钮，弹出“目标框架”对话框（见图14.3.26）。

（80）在“当前框架网页”示例框中选中下端右框架，然后单击“确定”按钮，返回到“插入超链接”对话框中，再单击“确定”按钮。

（81）单击“格式”工具栏中的“保存”按钮。。。，保存设置后的框架网页。

（82）本实例制作完成，在浏览器中先单击文本超链接，然后再单击图片超链接，最终效果如图14.3.1所示。