FrontPage2003初级入门基础实例2.doc

.-http:/ishare.iask.sina.com.cn/f/20051327.html实例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所示。