《FrontPage_2003初级入门实例2.doc》由会员分享，可在线阅读，更多相关《FrontPage_2003初级入门实例2.doc（12页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、 音乐网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
2、 创建框架网页（4）单击上框架中的“新建网页”按钮，该框架即可变成一个空白网页。（5）将光标置于该空白网页中，单击“格式”工具栏中的“插入层”按钮。，在该空白网页中插入一个层。（6）选中该层，当层的四周出现8个控制点后，将鼠标移到层右下角的控制点上，当鼠标变成。形状时，按住鼠标左键拖动，调整层的大小。（7）将鼠标移到层的左上角，当鼠标指针变成。形状时，按住鼠标左键将层拖动到网页的左上角后释放鼠标左键。（8）将光标置于该层中，选择“插入”“图片”“来自文件”命令，弹出如图14.3.5所示的“图片”对话框。图14.3.5 “图片”对话框（9）在“查找范围”下拉列表中选择图片的保存位置，然后选择所需
3、的图片，单击“插入”按钮，将该图片插入到层中。（10）单击下端左侧框架中的“新建网页”按钮，该框架即可变成一个空白网页。（11）将鼠标置于该框架网页中，单击鼠标右键，在弹出的快捷菜单中选择“在新窗口中打开网页”命令，即可在一个新窗口中打开该网页，并且在该窗口中编辑网页。（12）选择“插入”“表单”命令，插入一个表单。（13）在光标所在位置输入“关键字：”，然后选择“插入”“表单”“文本框”命令，插入一个文本框表单域。（14）双击所插入的文本框表单域，弹出如图14.3.6所示的“文本框属性”对话框。（15）在“宽度”文本框中输入“12”，然后单击“确定”按钮。（16）双击“提交”按钮，弹出如图1
4、4.3.7所示的“按钮属性”对话框。 图14.3.6 “文本框属性”对话框 图14.3.7 “按钮属性”对话框 （17）在该对话框中的“值/标签”文本框中输入“搜索”，然后单击“确定”按钮。（18）选中“重置”按钮，然后按“Delete”键，删除该按钮。（19）另起一行插入一个14行2列的表格，然后选中第一行表格，在该表格中单击鼠标右键，在弹出的快捷菜单中选择“合并单元格”命令，将这两个单元格进行合并。（20）将光标置于合并后的单元格中，选择“插入”“图片”“来自文件”命令，弹出“图片”对话框（见图14.3.5）。（21）在该对话框中选择所需的图片，然后单击“插入”按钮。（22）分别在第2行、
5、第3行和第4行的单元格中输入文本内容，输完后选中所有的文本，然后单击“格式”工具栏中的“左对齐”按钮。，设置后的效果如图14.3.8所示。图14.3.8 设置文本效果（23）按同样方法在其他单元格中插入图片、输入文本并设置文本的对齐方式。（24）关闭该网页，返回到框架网页中，制作后的框架效果如图14.3.9所示。图14.3.9 制作框架网页效果（25）单击下端右侧框架中的“新建网页”按钮，该框架即可变成一个空白网页。（26）单击“格式”工具栏中的“插入层”按钮。，在该空白网页中插入一个层。（27）选中该层，当层的四周出现8个控制点后，将鼠标移到层右下角的控制点上，当鼠标变成。形状时，按住鼠标左
6、键拖动，调整层的大小。（28）将鼠标移到层的左上角，当鼠标指针变成。形状时，按住鼠标左键将层拖动到网页的左上角后释放鼠标左键。（29）将光标置于该层中，选择“插入”“图片”“来自文件”命令，弹出“图片”对话框（见图14.3.5）。（30）在该对话框中选择所需的图片，然后单击“插入”按钮，效果如图14.3.10所示。（31）将光标置于层下方，插入一个12行2列的表格。（32）选中第一行单元格，然后在选中的第一行单元格中单击鼠标右键，在弹出的快捷菜单中选择“合并单元格”命令，将第一行单元格进行合并。（33）将光标置于合并后的单元格中输入文本“最新专辑推荐视听”，输完后选中该文本，单击“格式”工具栏
7、中的“加粗”按钮。和“居中”按钮。图14.3.10 插入图片效果（34）将光标置于该文本后按几次空格键后再输入文本“更多”。（35）将光标置于其他单元格中输入文本内容，输完后选中所有的文本，单击“格式”工具栏中的“左对齐”按钮。，将表格中的文本左对齐。（36）将光标置于表格中的任意位置，单击鼠标右键，在弹出的快捷菜单中选择“表格属性”命令，弹出“表格属性”对话框。（37）在“边框”选区中的“粗细”微调框中输入“0”，设置完成后单击“确定”按钮。（38）选择“文件”“保存”命令，弹出如图14.3.11所示的“另存为”对话框（一）。图14.3.11 “另存为”对话框（一）（39）在“保存位置”下拉
8、列表中选择上端框架网页的保存位置；在“文件名”下拉列表框中输入“Page1”，设置完成后单击“保存”按钮，弹出如图14.3.12所示的“保存嵌入式文件”对话框（一）。（40）在该对话框中保存上端框架网页中的图片，系统默认的路径与框架网页的路径相同，直接单击“确定”按钮，在保存图片的同时弹出如图14.3.13所示的“另存为”对话框（二）。（41）在“保存位置”下拉列表中选择保存上端框架网页的位置；在“文件名”下拉列表中输入“Page2”，设置完成后单击“保存”按钮，弹出如图14.3.14所示的“保存嵌入式文件”对话框（二）。（42）单击“确定”按钮，在保存图片的同时弹出如图14.3.15所示的“
9、另存为”对话框（三）。图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）在“保存位置”下拉列表中选
10、择框架网页的保存位置；在“文件名”下拉列表中输入“index”，设置完成后单击“保存”按钮。（46）单击“格式”工具栏中的“预览”按钮。，预览框架网页效果如图14.3.18所示。图14.3.18 预览框架网页效果（47）切换到网页的设计视图中，单击“格式”工具栏中的“新建普通网页”按钮。，新建一个网页。（48）单击“格式”工具栏中的“插入层”按钮。，在该空白网页中插入一个层。（49）选中该层，当层的四周出现8个控制点后，将鼠标移到层右下角的控制点上，当鼠标指针变成。形状时，按住鼠标左键拖动，调整层的大小。（50）单击该层，选择“插入”“图片”“来自文件”命令，弹出如图14.3.19所示的“图片
11、”对话框。图14.3.19 “图片”对话框（51）在该对话框中选择第一幅图片，单击“插入”按钮，将该图片插入到层中。（52）按同样方法继续插入其他两幅图片，插入后的效果如图14.3.20所示。图14.3.20 插入图片效果（53）单击“格式”工具栏中的“插入层”按钮。，在该层中再插入一个层，并调整层的大小。（54）将光标置于新插入的层中，输入文本“两只蝴蝶”，输完后按回车键另起一行继续输入其他文本，输入文本后的效果如图14.3.21所示。（55）选择“文件”“保存”命令，弹出“另存为”对话框，在“保存位置”下拉列表中选择网页的保存位置；在“文件名”下拉列表框中输入“lzhd”，单击“保存”按钮
12、，弹出“保存嵌入式文件”对话框，在该对话框中单击“确定”按钮。图14.3.21 输入文本效果（56）单击“格式”工具栏中的“新建普通网页”按钮。，新建一个空白网页。（57）单击“格式”工具栏中的“插入层”按钮。，在该空白网页中插入一个层，然后设置层的大小。（58）单击该层，然后在光标所在位置输入文本“推荐区：”，输完后选中该文本，单击“格式”工具栏中的“加粗”按钮。，使该文本加粗显示。（59）将光标置于该文本后按回车键另起一行，插入一个11行5列的表格，然后在第一行的单元格中分别输入文本“选择”、“歌曲”、“歌手”、“试听”、“下载”。（60）将光标置于第2行第1列的单元格中，选择“插入”“表
13、单”“复选框”命令，插入一个复选框表单域。（61）选中表单中的“提交”和“重置”按钮，然后按“Delete”键删除这两个按钮。（62）按同样方法在第一列的其他单元格中插入复选框表单域。（63）将光标置于第2列和第3列的单元格中，分别输入文本内容，输完后选中所有的文本，然后单击“格式”工具栏中的“左对齐”按钮。，设置后的效果如图14.3.22所示。图14.3.22 输入并设置文本效果（64）将光标置于第2行第4列的单元格中，选择“插入”“图片”“来自文件”命令，弹出“图片”对话框。（65）在该对话框中选择所需的图片，然后单击“插入”按钮，将该图片插入到单元格中。（66）按同样方法在第4列的单元格
14、中继续插入其他图片。（67）将光标置于第2行第5列的单元格中输入文本“下载1”和“下载2”。（68）按同样方法在第5列的其他单元格中输入文本。（69）选中第2列单元格，在选中的单元格中单击鼠标右键，在弹出的快捷菜单中选择“单元格属性”命令，弹出如图14.3.23所示的“单元格属性”对话框。图14.3.23 “单元格属性”对话框（70）在“背景”选区中的“颜色”下拉列表中选择一种背景颜色，然后单击“确定”按钮。（71）按同样方法设置其他单元格的背景颜色。（72）选择“文件”“保存”命令，弹出“另存为”对话框，在“保存位置”下拉列表中选择网页的保存位置；在“文件名”下拉列表框中输入“zx”，单击“
15、保存”按钮，弹出“保存嵌入式文件”对话框，在该对话框中单击“确定”按钮，制作后的网页效果如图14.3.24所示。图14.3.24 网页效果（73）打开保存过的框架网页“index”，选中下端左框架中的“最新专辑”图片，然后在该图片中单击鼠标右键，在弹出的快捷菜单中选择“超链接”命令，弹出如图14.3.25所示的“插入超链接”对话框。（74）在“查找范围”下拉列表中选择“zx”网页的保存位置，然后在其列表框中选中该网页。（75）单击“目标框架”按钮，弹出如图14.3.26所示的“目标框架”对话框。图14.3.25 “插入超链接”对话框图14.3.26 “目标框架”对话框（76）在“当前框架网页”
16、示例框中选中下端左框架，然后单击“确定”按钮，返回到“插入超链接”对话框中，再单击“确定”按钮。（77）在框架网页中的下端左框架中选中文本“两只蝴蝶”，然后在该文本中单击鼠标右键，在弹出的快捷菜单中选择“超链接”命令，弹出如图14.3.27所示的“插入超链接”对话框。图14.3.27 “插入超链接”对话框（78）在“查找范围”下拉列表中选择“lzhd”网页的保存位置，然后在其列表框中选中该网页。（79）单击“目标框架”按钮，弹出“目标框架”对话框（见图14.3.26）。（80）在“当前框架网页”示例框中选中下端右框架，然后单击“确定”按钮，返回到“插入超链接”对话框中，再单击“确定”按钮。（8
17、1）单击“格式”工具栏中的“保存”按钮。，保存设置后的框架网页。（82）本实例制作完成，在浏览器中先单击文本超链接，然后再单击图片超链接，最终效果如图14.3.1所示。12/ 示 . 果最 接片后 接本单 中浏完例 本页 架框存 。钮”/的栏工0击单钮”“ 再.框”超 插回钮”击，框音中乐框”架前） . 见”框目钮架目单页网选框后，位网 “中拉下找“话”超“ .框话链超示 .图如，链择中快弹，鼠中本在蝶只文中架下网框钮”定单框”超“返按确单，左中选示架前）话话标 话”链插 框话框“所. 如，”架目）页网中表其置存网 择表下围“框框接入的 . 如令接“选捷出键鼠中图然片辑最架端中 页框过开效网
18、示所.如页作钮定确框该框”式嵌出弹存保单“输表下件“存保选表”存保话为另弹”存”择）色景的他设样同钮按“后然景一表拉”中”景）话”属“.框对属单示 .图如命属单择中快弹键击格的在元 第本入格他的在方同”载下载“输格单第于置片片插中单 在同中中单插该”“后然的择中在框对”弹命文来片”选格的 行标将效本设 .示 果后置。按左中工格单后本中完容文入中单列和于标域单复插格其一法样钮按除键 “钮”和交中单选域表复入，框“入选格单第 标光”“手“曲”选入分元的第后的行个入行键按本置将示显本使。”“栏”格单文后，：“入置标后，击小的设，个插网在。钮”插栏”击）页白一，。按网建的栏”单效本输.钮按确中框该对文
19、嵌存出按保， “输表”文在位的择列下置“话为“，命保件择示 如后文，其续行键按输蝶蝴“入层新标将小的整，一再该。层的具式“效图 .示0.图后，图他入方同中层插该钮插单，一中框该话对“ 框框片示 弹命文“片入选，）小大调动标按状。成标鼠制角层移将后个出层当中层一中白空。钮层“栏式“页页新，按页建的中”击中计设到效页框.示所 果页览。钮览“栏”击钮钮保后完， “入拉名文置位页框中拉位保四框对为 ）话存“所 出同片在按定击三框话式嵌 ）对文入“所 ，”“后完” “中拉名“置存页择中列”“）三（”为.二（”式嵌 .二框”另 一框”文入 .）（框”的示 如同片保钮定单）（对件嵌保示. ，”“单置， 中表
20、名“置页架上保中”存“）（对存“ 出弹图保钮确“直相路框径默，图网框上话在）一框文嵌存示 如，钮保单置” “中列”文在位页框上中下位保在一（”另 ）（话为“所. 如令”“”择）钮按确后成”“中”“中框“框对”“，”格择单捷出，鼠单意的表标）齐左的表。钮齐“栏具式单的中后输本中元其标）”“入输空按本置标）效片 0 。钮中。按粗中工格击，中完听推专“入格后并标并行元行第”单合择捷快，右单格单的后，单中）格的行 插方置光示所. 果，”“后图所选框该）.图框”图，”来“入择中于标将键键放角的到将标按状。成指，左到鼠）小的调动标按状。成当点的右到鼠点控现周当该选层个插页在。按入“栏”格单页白一变框，”建
21、中框下单效网框制.示所. 如的后页框到网闭式齐对置本、入格单法样效文 示 图效置，。齐“栏工“单本有选输容本中元行行第 分钮”“后片需择框对） 见话”“，”来图入插，单并置将并行元两，命单并选捷的在右单中，表中选表 行入一另钮按删” “然钮重中钮按“击”搜中文标“中话对钮 .图框”框本 框对属“所 出，”击钮按“单然“中本宽在框话属文示. 图弹表文插击域单文一令命“”插择后：“置位在）单个入命”插择页辑口在并该中窗在可令网口新选单捷在右击中网于置）页白一可架钮页新的侧下）中层插图按插击片需后然存的中表下找在话话“ .框话片的. 图，”件“图插，该置键标放后页网将键住状。成标当上层鼠将小的整拖键按状。变标点控角到将后控出四当该层一中网在。按层“栏式“中页该光页网一成即钮页新的框网框 .页架的 如，钮“单图。卡该卡页框“. 格务新 示所.图卡选架开框”板网弹链”模其中”建“格格建新 如，建文，用00 动步作操果终 .识识接目设网保内作制页框用程作示 如乐一目作