搜索
第六章FrontPage2003第六章FrontPage2003实例6-1熟悉FrontPage2003的操作界面实例6-2利用FrontPage2003创建一个网页实例6-3查看、编辑源文件以及预览网页实例6-4利用FrontPage在网页中插入图像实例6-5建立和编辑超链接实例6-6利用FrontPage在网页中插入表格实例6-7插入表单实例6-8创建站点思考与练习第六章FrontPage2003第六章FrontPage2003FrontPage是常用的制作网页和网站的工具软件，FrontPage2003是FrontPage的最新版本，它集显示、编辑网页HTML源代码，插入文本、图片、声音、动画、表单、超链结和使用数据库和脚本语言，管理和发布站点的工具为一体，可以在同一界面中完成设计、制作、发布、管理站点的工作。本章我们将主要通过9个案例来介绍FrontPage2003的常用功能。第六章FrontPage2003实例6-1熟悉FrontPage2003的操作界面一、本例要求★熟悉FrontPage2003的菜单栏、工具栏、视图栏和主编辑区。第六章FrontPage2003二、操作步骤在windows中，使用开始菜单—“程序”-“MicrosoftFrontPage2003”，启动FrontPage2003。则会看到FrontPage2003的操作界面，如图6-1所示。图6-1操作界面第六章FrontPage2003图6-2显示了FrontPage2003的菜单栏，浏览各个菜单包括的菜单项。图6-2菜单项图6-3显示了FrontPage2003常用工具栏中的各种按钮。如，等。图6-3各种按钮第六章FrontPage2003图6-4显示了FrontPage2003格式工具栏中的各种工具。图6-4各种工具观察主编辑区，注意编辑区的左下方有四个选项卡，如图6-5所示，可以用于选择网页的显示方式。图6-5网页的显示方式第六章FrontPage20036.观察在FrontPage主界面右边有一“任务窗格”窗口，其中包括“开始工作”，“帮助”等多个任务窗格。可以方便快捷地来编辑网页。如图6-6所示。图6-6任务窗格第六章FrontPage2003三、本案例知识点FrontPage2003包括“文件”、“编辑”、“试图”、“查看”、“插入”、“格式”、“工具”、“表格”、“框架”、“窗口”、“帮助”共10个菜单，它们为用户提供了网页编辑和管理网站的各种功能：文件：包括新建、打开、关闭、保存和预览网页和站点等功能。编辑：与Office系列相同具有撤销、剪切复制、粘贴、删除和查找等功能。视图：控制网页各种视图之间的切换以及工具栏和任务窗格的显示。查看：包括选择视图栏中的各种视图方式以及显示各种工具栏按钮的功能。插入：既可以插入换行符、水平线、表单、图片和超链接等网页元素，也可以插入各种Office组件和对象格式：可以设置字体、边框、网页样式和背景图片。工具：包括设置FrontPage工具栏、选项以及网页选项和加载宏等功能。表格：主要包括在网页中插入表格以及设置表格、单元格属性。框架：主要包括对框架的删除和拆分以及设置框架属性等功能窗口：在各个网页窗口之间切换。帮助：包括FrontPage2003的帮助文档。第六章FrontPage2003FrontPage2003的工具栏与Word等Office系列大致相同．主要包括新建、打开、保存、打印、预览、剪切、复制、粘贴等常用工具按钮。主编辑区左下方的四个选项卡用于在“设计”/“拆分”/“代码”/“预览”四种视图之间互相切换。设计：可以查看编辑状态下的网页。拆分：把编辑窗口分为两部分上面显示代码，下面显示编辑状态下的网页。代码：可以查看HTML源代码。预览：可以提前预览网页在发布后的情况。第六章FrontPage2003实例6-2利用FrontPage2003创建一个网页一、本例要求★掌握利用FrontPage2003创建、保存、打开网页的步骤和方法。第六章FrontPage2003二、操作步骤使用菜单“文件”→“新建”，在弹出的“新建”任务窗格中选择“空白网页”。任务窗格消失，这时就创建了一个空白网页。在编辑区输入一段文字：“Hello,world.”。如图6-7所示图6-7输入文字第六章FrontPage2003使用菜单“文件”→“，如图6-8所示。图6-8“保存”对话框第六章FrontPage2003选择网页文件保存的位置，然后单击“更改标题”按钮，在弹出的“设置网页标题”对话框中输入新的网页标题文字“案例6-2”，如图6-9所示。单击“确定”按钮。图6-9“设置网页标题”对话框第六章FrontPage2003在“另存为”对话框中，输入新的文件名（新建的文件默认名为“index”）example6-2。选择保存类型，一般为“网页”。单击“保存”按钮，即可完成文件保存。第六章FrontPage2003三、本案例知识点若要在FrontPage中打开已存在的网页文件,则使用菜单“文件”→“打开”，弹出如图6-10所示在“打开文建”对话框中确定要打开网页文件，单击“打开”按钮或双击网页文件名即可。新建空白网页时也可以使用工具栏中的按钮。第六章FrontPage2003打开、保存网页时可以分别使用工具栏中的按钮和按钮。图6-10“打开文件”对话框第六章FrontPage2003实例6-3查看、编辑源文件以及预览网页一、本例要求掌握在FrontPage中查看、编辑源文件以及预览网页的方法第六章FrontPage2003二、操作步骤单击菜单“文件”→“打开”命令，打开在案例6-2中创建的网页example6-2。单击编辑窗口左下方的“代码。如图6-11所示。图6-11查看文件源代码第六章FrontPage2003将源文件第十一行改为：pWelcometoLanZhou!/p单击“设计”，“拆分”选项卡，观察网页主体部分文字及代码的变化。单击“预览”选项卡，可以预览网页发布后的大致情况。单击菜单“文件”→“另存为”,更改网页标题为“案例6-3”，保存文件名为example6-3。第六章FrontPage2003三、本案例知识点在查看网页的代码窗口时，可以看到不同的源代码用不同的颜色显示，HTML的标记符用紫色显示，属性名用红色显示，属性值用蓝色显示正文标题和文字用黑色显示。在查看网页的代码时，可以直接对HTML源代码进行编辑和修改。单击“预览”选项卡后看到的网页是网页发布后的大致情况，但不一定是网页在浏览器中浏览时的真实情形。如果要在指定浏览器中预览所编辑的网页。其步骤如下：1）保存所编辑的网页。第六章FrontPage20032）使用菜单“文件”→“在浏览器中预览”，在弹出的如图6-12所示的二级菜单中，选择浏览器以及分辨率等参数，即可打开相应浏览器预览网页。在此二级菜单中，选择“编辑浏览器列表”，在如图6-13所示的中可以根据需要添加、修改、删除浏览器，这样就可以利用不同的浏览器查看网页在不同的用户浏览器中的显示效果。图6-12二级菜单第六章FrontPage2003注意：如果文件未保存，此时如果预览网页，将出现一个文件为保存的提示对话框，提醒保存当前网页。如图6-14所示。图6-13编辑浏览器列表图6-14提醒保存当前网页第六章FrontPage2003实例6-4利用FrontPage在网页中插入图像一、本例要求★掌握在网页中插入图像的方法和步骤。★掌握编辑网页中图片的方法和步骤。★掌握改变图片属性的方法和步骤。第六章FrontPage2003二、操作步骤运行FrontPage，新建一个空白网页。使用菜单“插入”→“图片”→“来自文件”，从打开的“图片”对话框（如图6-15所示）中选择图像文件cup1.jpg。图6-15“图片”对话框第六章FrontPage2003单击“确定”按钮，则在网页中插入了选定的图片。如图6-16所示。图6-16网页中插入了选定的图片第六章FrontPage2003选中插入的图片，单击鼠标右健，选择“编辑图片”命令，出现“图像属性”对话框，如图6-17所示。图6-17“图像属性”对话框第六章FrontPage2003在“外观”选项卡中，选择对齐方式为“右对齐”，设定“编框粗细”为1。选中“指定大小”，设定宽度为“200”像素，选中“保持纵横比”。如图3-18所示。图6-18设定图像属性第六章FrontPage2003单击“确定”按钮，结果如图6-19所示。图6-19结果图第六章FrontPage20037.单击取文件名为example6-4，更改标题为“案例6-4”，单击“确定”按钮。8.在弹出的如图6-20所示的“保存嵌入式文件”对话框中，单击“确定”按钮。图6-20“保存嵌入式文件”对话框第六章FrontPage2003三、本案例知识点图片除了增加网页的装饰效果外，也可作为网页的导航按钮。从本地文件系统中添加图片，图片可以为GIF、JPEG、BMP等文件格式。保存网页时，FrontPage会提示将图片保存到您的站点中。若图片不是GIF或JPEG格式，使用256色或更少颜色的图片会自动地转换成GIF，而所有其他的图片会转换成JPEG格式。第六章FrontPage2003利用FrontPage不仅可以插入来自文件的图片，也可以插入Office剪贴画库中的剪贴画。插入时步骤与插入文件图片的步骤基本相同．只需在上述步骤中，将2中的“插入”→“图片”→“来自文件”改为“插入”→“图片”→“剪贴画”即可。选中插入的图片，单击菜单“视图”→“工具栏”→“图片”，在屏幕下方会弹出“图片”工具栏。工具栏如图6-21所示，利用这些工具可以对已插入网页中的图片进行编辑。图6-21“图片”工具栏第六章FrontPage2003图片”工具栏中提供了更改图片亮度、颜色对比度、转换为黑白图片、裁剪图片、试图片中的颜色变成透明、在图片上放置文本、设置图片的对齐方式和间距，创建图片的缩略等工具。在“图片属性”对话框中，有“外观”、“常规”和“视频”3个选项卡，在“外观”选项卡中可以进行图像的布局和大小参数的设置。见本案例中的图6-17。第六章FrontPage2003在“常规”选项卡中，可以选择图片源、确定图片的类型、设置图片在低分辨率下的替代表示以及图片超链接等内容，如图6-22所示。图6-22“常规”选项卡第六章FrontPage2003在“视频”选项卡中，可以选择视频源和设置播放视频的参数，如循环次数等。如图6-23所示。图6-23“视频”选项卡第六章FrontPage2003实例6-5建立和编辑超链接一、本例要求★掌握建立文本超链接的方法和步骤。★掌握建立图像超链接的方法和步骤。★掌握建立邮件超链接的方法和步骤。第六章FrontPage2003二、操作步骤运行FrontPage，在“设计”视图模式下，输入文本“兰州石化职业技术学院”。选中刚才输入的文本，然后右击鼠标弹出一个快捷键菜单，在快捷菜单中选择“超链接”菜单项（也可以单击常用工具栏的超级链接按钮），可打开如图6-24所示的“创建超链接”对话框。图6-24“超链接”菜单项第六章FrontPage2003在“插入超链接”对话框中的URL栏中输入链接的目标．地址，然后单击“确定”按钮。参照案例6-4的方法和步骤，在刚才的网页中插入图像cup.jpg。设置边框粗细为“1”，图片宽度为“200”像素，选中“保持纵横比”，其他图片属性不变。选中插入的图像，单击工具按钮。在“插入超链接”对话框中，定位网页文件example6-4.htm，单击“确定”按钮。保存网页文件为“example6-5.htm”，标题为“案例6-5”，单击“文件”→“在浏览器中预览”→MicrosoftInternetExplorer6.0。查看链接的实际效果。第六章FrontPage2003三、本案例知识点超链接是从一个网页指向另一个目的端的链接，比如说指．向另一个网页或者相同网页上的不同位置。这个目的端通常