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