使用FrontPage-2003制作网页.ppt

1、第八章 使用FrontPage 2003制作网页,第一节 FrontPage 2003概述第二节 站点的基本操作第三节 制作和美化网页第四节 框架网页第五节 表单和组件的使用第六节 发布站点第七节 应用实例论坛首页习题八,现代社会是一个网络社会，人们在日常生活中离不开网络，网络的诞生与发展，极大地方便了人们的信息交流和资源共享，推动着信息社会的飞速前进。一、FrontPage 2003功能概述FrontPage 2003是一个功能强大的网页制作软件，它可以使用户在不太了解HTML代码的情况下，使用FrontPage 2003制作优秀的网页。FrontPage 2003是在FrontPage 2

2、000的基础上升级的版本，它与以前的版本相比，工作环境更加个性化，界面操作更加方便，功能更加强大。,第一节 FrontPage 2003概述,二、FrontPage 2003的工作窗口选择“开始”“所有程序”“Microsoft office”“Microsoft office FrontPage 2003”命令，即可打开FrontPage 2003的工作窗口，如图8.1.1所示。该窗口与Office 2003的其他组件的工作窗口基本相同，用户可以在工作区中制作和编辑网页。,图8.1.1 FrontPage 2003的工作窗口,三、FrontPage 2003的基本视图FrontPage 20

3、03为用户在创建站点和编辑网页时提供了多种视图，其中网站的视图模式有网页设计视图、文件夹视图、报表视图、导航视图、超链接视图、任务视图和远程网站视图；网页的视图模式有设计视图、代码视图、拆分视图和预览视图。,1网站的视图模式网站的7种视图模式的功能如下：（1）网页设计视图。该视图是网页的编辑场所，它的主体是网页编辑器，用户可在网页编辑器中制作和编辑网页。选择“视图”“网页”命令，即可切换到该视图。（2）文件夹视图。该视图用于显示网站的层次结构，用户可以在该视图中查看网站中包含的所有内容。选择“视图”“文件夹”命令，即可切换到该视图。,（3）报表视图。该视图采用表格的形式对站点进行分析，并将网站

4、中网页的数量、超链接的数量和状态等信息显示出来。选择“视图”“报表”命令，即可切换到该视图。（4）导航视图。该视图非常直观地显示出了一个网站的组织关系和逻辑层次。用户可以十分方便地在该视图中对网页进行移动位置、重命名、添加和删除网页等操作。选择“视图”“导航”命令，即可切换到该视图。,（5）超链接视图。该视图将网站中所有的内部和外部超链接的状态显示在一个列表中，并用图标表示超链接已通过验证或已中断。选择“视图”“超链接”命令，即可切换到该视图。（6）任务视图。该视图以列表的形式显示网站中的所有已完成或尚未完成的任务，并在各个列标题下提供有关各项任务的当前信息。选择“视图”“任务”命令，即可切换

5、到该视图。,（7）远程网站视图。该视图的主要功能是向互联网发布文件，用户可使用该视图发布整个网站或有选择地发布个别文件。选择“视图”“选程网站”命令，即可切换到该视图。2网页的视图模式网页的4种视图模式的功能如下：（1）设计视图。它是FrontPage 2003默认的视图模式，它提供近似于所见即所得的界面，用户可在该视图中查看和编辑网页。,（2）代码视图。该视图提供用户查看、编写和编辑HTML标识的功能。（3）拆分视图。该视图上半部分提供代码视图，下半部分提供设计视图，可以使用户能够直观地看到编写的代码在网页中的效果。（4）预览视图。在该视图中用户可以在发布网页前提前预览网页中的内容，以便于修

6、改其中的某些细节部分。,创建站点是FrontPage 2003中所有工作的前提，只有先创建好一个站点，然后才能向站点中添加网页。一、创建站点在FrontPage 2003中，用户可以使用以下3种方法创建站点：（1）使用模板创建站点。FrontPage 2003提供了大量的模板，用户可以根据需要，基于某一种模板创建站点，具体操作如下：,第二节 站点的基本操作,1）选择“文件”“新建”命令，弹出“新建”任务窗格。2）在该任务窗格中的“新建网站”选项区中选择“其他网站模板”选项，弹出“网站模板”对话框。3）在“常规”选项卡中选择一个模板，并在右侧的网站位置下拉列表框中输入网站的位置后，单击“确定”按

7、钮，将以网页的形式打开模板文件。,（2）使用向导创建站点。FrontPage 2003提供了站点向导，用户也可以在向导的指导下创建站点，具体操作如下：1）选择“文件”“新建”命令，弹出“新建”任务窗格。2）在该任务窗格中的“新建网站”选项区中选择“由一个网页组成的网站”选项，弹出“网站模板”对话框。3）在“常规”选项卡中选择某个向导，并在右侧的网站位置下拉列表框中输入网站的位置后，单击“确定”按钮，弹出其对应的向导对话框，用户即可在向导的指导下完成站点的创建。,（3）自定义站点。如果用户已对该软件非常熟悉，也可以自定义创建站点，具体操作如下：1）选择“文件”“新建”命令，弹出“新建”任务窗格。

8、2）在该任务窗格中的“新建网站”选项区中选择“由一个网页组成的网站”选项，弹出“网站模板”对话框。3）在该对话框中选择“空白网站”选项，并在右侧的网站位置下拉列表框中输入网站的位置后，单击“确定”按钮，即可创建一个只包含两个空白文件夹private和image的站点，用户可自行创建主页及其他网页文件。,二、打开站点如果要对某个网站进行编辑修改，可先将其打开，然后再进行其他编辑操作。用户可以使用以下两种方法打开站点：（1）选择“文件”“打开网站”命令，弹出“打开网站”对话框。在该对话框中选择要打开的站点，单击“打开”按钮即可。（2）单击常用工具栏中“打开”按钮右侧的下拉按钮，在其下拉菜单中选择“

9、打开网站”命令，在弹出的“打开网站”对话框中选择要打开的站点，单击“打开”按钮即可。,三、关闭站点如果用户已完成了某个站点的编辑操作，可将其关闭。选择“文件”“关闭网站”命 令，可将当前编辑完成的站点关闭。,当用户创建好站点后，就可以根据需要，向站点中添加网页，并可以对创建的网页进行美化，使其效果更加丰富多彩。一、新建网页如果用户要在网站中创建一个新的网页，可按照以下操作步骤进行：,第三节 制作和美化网页,（1）选择“文件”“新建”命令，弹出“新建”任务窗格，如图8.3.1所示，该窗格的选项区中包括4个选项。,图8.3.1“新建”任务窗格,1）选择“空白网页”选项，可创建一个空白的网页。2）选

10、择“文本文件”选项，可创建一个文本类型的网页。3）选择“根据现有网页”选项，可在弹出的“根据现有网页新建”对话框中选择一个网页，单击“创建”按钮，即可创建一个与选中网页风格相同的网页。4）选择“其他网页模板”选项，可在弹出的“网页模板”对话框中选择合适的选项来创建网页。（2）选择“新建网页”选项区中的任意一个选项，即可创建相应形式的网页。,二、应用文本文本是网页中最基本的元素，它可以体现网页设计者的意图与思想。1输入文本用户可以按照以下操作步骤，在网页中输入文本：（1）打开要输入文本的网页。（2）将插入点置于网页中要输入文本的位置，用户可以像在Word中输入文本一样在网页中输入文本。,2格式化

11、文本在网页中输入完文本后，可以对其进行格式化，以使其整齐美观。格式化文本的具体操作如下：（1）选中要格式化的文本，选择“格式”“字体”命令，弹出“字体”对话框，如图8.3.2所示。,图8.3.2“字体”对话框,（2）用户可以在“字体”选项卡中设置文本的字体、字形、大小、颜色及其他效果；在“字符间距”选项卡中设置字符的间距、间距大小及位置。除此之外，用户也可以使用格式工具栏调整文本的字体、大小、颜色、对齐方式、缩进等。,三、应用图片及图形如果网页中全部是文字，则既影响整个页面的美观性，也会使浏览者感到疲劳，因此，在网页中适当地添加图片是非常有必要的。1插入图片用户可以在网页中插入剪贴画、图片、艺

12、术字以及自选图形，根据插入图片类型的不同，FrontPage 2003有不同的处理方法。,（1）插入剪贴画。在网页中插入剪贴画的具体操作如下：1）将插入点置于网页中要插入剪贴画的位置。2）选择“插入”“图片”“剪贴画”命令，弹出“剪贴画”任务窗格。3）在该任务窗格中的剪贴画列表框中单击任意一幅剪贴画，即可将其插入到网页中。,（2）插入图片文件。在网页中插入图片文件的具体操作如下：1）将插入点置于网页中要插入图片文件的位置。2）选择“插入”“图片”“来自文件”命令，弹出“图片”对话框。3）在该对话框中选择要插入的图片文件，单击“插入”按钮，即可将其插入到网页中。,（3）插入艺术字。在网页中插入艺

13、术字的具体操作如下：1）将插入点置于网页中要插入艺术字的位置。2）选择“插入”“图片”“艺术字”命令，在弹出的“艺术字库”对话框中设置艺术字的样式。3）设置完成后，单击“确定”按钮，在弹出的“编辑艺术字文字”对话框中设置艺术字文字及其字体。4）设置完成后，单击“确定”按钮，即可在网页中插入艺术字。,（4）插入自选图形。在网页中插入自选图形的具体操作如下：1）选择“插入”“图片”“自选图形”命令，打开自选图形工具栏。2）在工具栏中单击要插入自选图形的工具按钮，在网页中要插入自选图形的位置单击并拖动鼠标，即可绘制一个自选图形。,2编辑调整图片在网页中插入图片后，因为网页有固定的版面和样式，所以，还

14、需要对其中的图片进行相应的调整，以使其能正确显示，也更加符合设计者的要求。编辑调整图片的具体操作如下：,（1）在需要调整的图片上单击鼠标右键，从弹出的快捷菜单中选择“图片属性”命令，弹出“图片属性”对话框。（2）在“外观”选项卡中设置图片的环绕样式、布局及其大小。（3）在“常规”选项卡中设置图片的名称。（4）设置完成后，单击“确定”按钮即可。除此之外，用户还可以使用图片工具栏中的工具按钮调整图片的位置、倾斜、旋转、对比度以及亮度等参数。,四、插入列表和水平线列表是FrontPage 2003中组织数据的一种结构简洁、层次清楚的形式。它会使网页中的内容重点突出、简捷有效、层次分明、结构有序。水平

15、线的使用，会将网页分隔成几部分，以增加网页的可读性与条理性。,1插入列表网页中可以使用的列表共有6种，分别是项目符号列表、编号列表、定义列表、图像列表、菜单列表和目录列表。其中最常用的是项目符号列表，下面主要介绍该列表的插入方法。,（1）将插入点置于网页中要插入项目符号的位置，在该位置输入一行文字，按回车键另起一行。（2）单击右侧的下拉按钮，在弹出的下拉列表中选择“项目符号列表”选项。（3）在列表符号后输入文字，按回车键，主编辑窗口会自动另起一行并出现一个小黑点项目符号。用户可重复上述操作，直至插入所有项目符号列表。,2插入水平线在网页中插入水平线的具体操作如下：（1）将插入点置于网页中要插入

16、水平线的位置。（2）选择“插入”“水平线”命令，即可在当前位置插入一条水平线。（3）如果要设置该水平线的属性，可用鼠标右键单击该水平线，在弹出的快捷菜单中选择“水平线属性”命令，在弹出的“水平线属性”对话框中设置水平线的大小、宽度、高度以及颜色等属性。,五、应用表格网页中表格的主要作用有两个，一个是用于存放数据，另一个是组织页面的布局。FrontPage 2003中表格的使用与Word中表格的使用非常相似，下面简单进行介绍。1创建表格网页中的表格有两种样式，一种是普通表格，另一种是布局表格，下面分别介绍这两种表格的创建方法。,（1）创建普通表格。在FrontPage 2003中，用户可以使用以下两种方法创建普通表格：1）单击常用工具栏中的“插入表格”按钮，在弹出的虚线框中拖动鼠标选择表格的行数和列数。设置完成后，松开鼠标即可创建好表格。2）选择“表格”“插入”“表格”命令，即可弹出“插入表格”对话框。3）在“大小”选项区中的行数和列数微调框中输入行、列的数值，单击“确定”按钮，即可创建一个具有相应行、列数的表格。,（2）创建布局表格。布局表格用于控制网页的布局，在网页中创建布局表格的具