《《计算机文化基础教程（第二版）第9章网页制作软件FrontPage 2000.ppt》由会员分享，可在线阅读，更多相关《《计算机文化基础教程（第二版）第9章网页制作软件FrontPage 2000.ppt（95页珍藏版）》请在三一办公上搜索。
1、第9章、网页制作软件FrontPage 2000,本章教学要求 掌握FrontPage 2000制作简单的网站；掌握简单网页的制作，超连接及常用组件的使用；掌握框架网页与表单网页的制作；掌握Windows 2000中的IIS服务在本机发布网站；,返回全课件目录,第9章、网页制作软件FrontPage 2000,本章目录第9.1节、FrontPage概述第9.2节、网站的制作第9.3节、网页制作的初步知识第9.4节、利用FrontPage处理网页文本第9.5节、网页表格的处理第9.6节、利用FrontPage处理框架网页第9.7节、利用FrontPage处理网页图像第9.8节、在网页中使用超链接
2、第9.9节、网页表单的处理第9.10节、美化网页第9.11节、利用ASP实现交互功能,返回本章首页,第9.1节、FrontPage 2000概述,本节目录9.1.1、FrontPage 2000的启动与退出 9.1.2、FrontPage 2000简介,返回本章目录,9.1.1、FrontPage 2000的启动与退出,FrontPage 2000的启动:“开始”“程序”“Microsoft FrontPage”FrontPage 2000的退出:快捷键“Alt+F4”或点击窗口右上角的小叉即可；,返回本节目录,9.1.2、FrontPage 简介（1）,FrontPage 2000的特色（1
3、）强大的网页设计功能 可以智能地完成HTML文本的编辑，并可以针对不同的浏览器对网页进行设置；可以提供对多种版本的浏览器的支持；完善了所见即所得的网页编辑操作；（2）丰富的网页设计模板、设计向导和主题样式 提供了多种网页设计模板、网页设计向导和主题样式。使用这些模板、向导和样式，即使是初学者也可以设计出具有专业水准的网站。FrontPage 2002的新增功能 FrontPage 2002在FrontPage 2000的原有功能基础上增加了图片库和增强的绘图工具，优化了更新、控制与管理站点的方法。还增加了更多的表格格式选项、Office剪贴板任务窗格、网页选项卡、自定义链接栏和电子商务等其他新
4、功能。,返回本节目录,FrontPage 2000工作界面（1）标题栏（2）菜单栏（3）常用工具栏（4）格式工具栏（5）窗口栏 网页视图：网页视图是进行网页编辑的操作界面。文件夹视图：文件夹视图的功能有些类似于Windows资源管理器，主要是用来 对网站的目录和文件夹进行管理.报表视图：报表视图主要用于查看与网页制作有关的各项参数。导航视图：导航视图用来显示和编辑网页的导航关系。超链接视图：超链接视图显示的是站点中的某个网页与其他网页之间的关系 任务视图：任务视图用来查看网站和网页设计的完成情况。（6）状态栏,9.1.2、FrontPage 简介（2）,返回本节目录,第9.2节、网站的制作,本
5、节目录9.2.1、制作网站的基本步骤9.2.2、创建站点9.2.3、管理站点,返回本章目录,9.2.1、制作网站的基本步骤（1）,网站制作的步骤大致如下 1.需求分析 2.网站整体规划 3.收集整理资料 4.准备素材 5.内容规划 6.建立站点 7.网页设计与制作 8.测试网站与网页 9.发布网站 10.维护与更新,返回本节目录,9.2.1、网站制作的基本步骤（2）,网站整体规划 进行网站的整体规划也就是组织网站的内容和设计其结构。网页制作者在明确网页制作的目的及要包括的内容之后，接下来就应该对网站进行规划，以确保文件内容条理清楚、结构合理，这样不仅可以很好地体现设计者的意图，也将使网站可维护
6、性与可扩展性增强。,返回本节目录,9.2.1、网站制作的基本步骤（3）,网站整体规划网站中各网页之间的结构关系有以下几种类型：层状结构：（如下图所示）类似于目录系统的树型结构，由网站文件的主页开始，依次划分为一级标题、二级标题等等，逐级细化，直至提供给浏览者具体信息。,9.2.1、网站制作的基本步骤（4）,网站整体规划线性结构：(如下图所示)类似于数据结构中的线性表，用于组织本身的线性顺序形式存在的信息，可以引导浏览者按部就班地浏览整个网站文件。这种结构一般都用在意义是平行的页面上。通常情况下，网站文件的结构是层状结构和线性结构相结合的。这样可以充分利用两种结构各自的特点，使网站文件既具有条理
7、性、规范性，又可同时满足设计者和浏览者的要求。,返回本节目录,9.2.1、网站制作的基本步骤（5）,网站整体规划 Web结构：(如下图所示)类似于Internet的组成结构,各 网页之间形成网状连接，允许用户随意浏览。,9.2.1、网站制作的基本步骤（6）,网页设计与制作 在开始制作网页之前，建议应用少量时间对自己要制作的主页进行总体设计，例如希望主页是怎样的风格，应该放一些什么信息，其他网页如何设计，分几层来处理等等。通常在进行网页开发时，首先都进行静态网页的制作，然后再在其中加入脚本程序、表单等。静态网页仅仅用来被动地发布信息，而不具有任何交互功能的网页，它是Web网页的重要组成部分。一个
8、好的网站首先是内容丰富，其次就是网页设计美观。,返回本节目录,9.2.1、网站制作的基本步骤（7）,网页测试 当网页设计人员制作完所有网站页面之后，需要对所设计的网页进行审查和测试，测试内容包括功能性测试和完整性测试两个方面。所谓功能性测试就是要保证网页的可用性达到最初的内容组织设计目标，实现所规定的功能，读者可方便快速地寻找到所需的内容。完整性测试就是保证页面内容显示正确，链接准确，无差错无遗漏。如果在测试过程中发现了错误，就要及时修改，在准确无误后,方可正式在Internet上发布。在进行功能性测试和完整性测试后，有的还需要掌握整个站点的结构以备日后的修改。,返回本节目录,9.2.1、网站
9、制作的基本步骤（8）,网页发布 在网页设计好，必须把它发布到互连网上，否则网站形象仍然不能展现出去。发布的服务器可以是远程，也可以是本地，但必须支持ASP，因为动态程序是建立在ASP基础上的,返回本节目录,创建新站点 选择“文件”|“新建”|“网页或站点”命令，在窗口栏打开“新建网页或站点”窗格；单击“新建”下的“空白站点”超级链接，打开“Web站点模板”对话框;单击站点模板中的“空白站点”图标，在“指定新站点的位置”文本框中输入新站点的位置。单击“确定”按钮.注意：在创建站点选择路径时，最好选择某个文件夹作为站点，而不要选择某个磁盘分区（例如F盘）作为站点，否则可能会导致整个磁盘分区瘫痪。导
10、入一个已存在的站点：选择“文件/导入”命令后根据提示依次选择需导入的站点即可。将文件夹转换为站点:可以将一个已存在的文件夹转换为站点,9.2.2、创建站点,打开站点：单击工具栏中的“打开”按钮，弹出“打开文件”对话框，在“打开文件”对话框中选择要打开得网页，选中之后，单击“打开”按钮，重命名站点：在创建站点时，如果没有为站点创建一个好的名称，可以重新为站点命名。重命名Web站点时，FrontPage 2000会用新站点名称自动更新所有内部超链接以及其他站点设置。删除站点：如果创建的站点不理想，修改起来又十分麻烦，可以将站点删除。在FrontPage 2002中选择“文件夹”视图，并选择要删除的
11、站点，单击“Delete”键，或单击鼠标右键，从弹出的快捷菜单中选择“删除”命令，就可以删除所选的站点了。注意：应用手动方式删除文件，删除的文件会自动放置于“回收站”中，而应用“删除”命令方式删除文件，被删除的文件直接从磁盘中删除，是不可恢复的。,9.2.3、管理站点,返回本节目录,第9.3节、网页制作的初步知识,本节目录9.3.1、网页的基本要素9.3.2、网页制作与美化工具,返回本章目录,9.3.1、网页的基本要素（1）,一.文字 文字是网页发布信息所用的主要形式，由文字制作出的网页占用空间小，因此，当用户浏览时，可以很快的展现在用户面前。另外，文字性网页还可以利用浏览器中“文件”菜单下的
12、“另存为”功能将其下载，便于以后长期阅读，也可对其进行编辑打印。但是没有编排点缀的纯文字网页，又会给人带来死板不活泼的感觉，使得人们不愿意再往下浏览。所以，文字性网页一定要注意编排，包括标题得字型字号，内容的层次样式，是否需要变换颜色进行点缀等等。,返回本节目录,9.3.1、网页的基本要素（2）,文字字号：网页中的文字不能太大或太小。太大会使得一个网页信息量变小，太小又使人们浏览时感到费劲。一个优秀网页中的文字，应统筹规划，大小搭配适当，给人以生动活泼之感觉。字型：在网页适当的位置采用不同的字体字型，也能使网页产生吸引人的效果。应该注意的是在报刊上变换字体字型非常普遍，它可以在不同的地方使用不
13、同的字型。但在网页制作上却要慎重。因为有些美丽的字型在制作网页的计算机上有，但将来别人浏览你的网页时，浏览者的计算机上未必装有这种字体。这样浏览者就无法得到你预想的浏览效果，甚至适得相反。如果只是标题或少量的文字，可以将采用的特殊字体制作成图形方式，就可避免其他浏览者看不到的尴尬局面了。当文本内容较多时。可以利用表格形式来实现。,返回本节目录,9.3.1、网页的基本要素（3）,文字 一个网页通常都有一个文字标题，表明本网页的主要内容。标题是否醒目，是吸引浏览者能否注意的一个关键，因此对标题的设计是很重要的。,返回本节目录,9.3.1、网页的基本要素（4）,二.图形 这里的图形概念是广义的，它可
14、以是普通的绘制图形，可以是各种图像，还可以是动画。一幅优秀的网页除了有能吸引浏览者的文字形式和内容外，图形的表现功能是不能低估的。网页上的图形格式一般使用JPEG和GIF，这两种格式具有跨平台的特性，可以在不同操作系统支持的浏览器上显示。图形在网页中通常有以下应用。菜单按钮：网页上的菜单按钮有一些是由图形制作，通常有横排和竖排两种形式，由此可以转入不同的页面;背景图形:为了加强视觉效果，有些网页在整个网页的底层放置了图形，称作背景图。,返回本节目录,9.3.1、网页的基本要素（5）,图形背景图可以使网页更加华丽，使人感到界面友好。但由于这是一个比较大的图形，需要占据较大的空间，致使网页的显示速
15、度明显变慢，所以，近期的网页以及比较著名的访问量比较大网站一般都不设置背景图形。,返回本节目录,9.3.1、网页的基本要素（6）,三.超连接 链接是网页中一种非常重要的功能，是网页中最重要、最根本的元素之一。通过链接可以从一个网页转到另一个网页，也可以从一个网站转到另一个网站。链接的标志有文字和图形两种。制作一些精美的图形作为链接按钮，使它和整个网页融为一体。,返回本节目录,9.3.1、网页的基本要素（7）,四.交互功能 Internet区别其他媒体的一个重要标志就是它的交互功能。例如在商务网站的页面上，人们经过浏览，选择了某一个产品，就需要将自己的决定通过Internet告诉这个网站，网站能
16、够自动对该产品的数据库进行检索，及时回应有还是没有，数量、规格、价格等信息。如果用户选择确定，那么网站能够返回确认信息。像这种交互功能其他媒体是无法比拟的。通常网页的交互功能都是利用表单来实现的。表单是网页中站点服务器处理的一组数据输入域，当访问者单击按钮或图形来提交表单后，数据就会传送到服务器上。,返回本节目录,9.3.2、网页制作和美化工具(1),网页制作工具1超文本标识语言（HTML）:HTML(Hypertext Markup Language)是一种专门用于Web页制作的编程语言，用来描述超文本各个部分的内容，告诉浏览器如何显示文本，怎样生成与别的文本或图像的链接点。HTML文档由文
17、本、格式化代码和导向其他文档的超链接组成。2FrontPage:FrontPage是由Microsoft公司推出的新一代Web网页制作工具。FrontPage使网页制作者能够更加方便、快捷地创建和发布网页，具有直观的网页制作和管理方法，简化了大量工作。FrontPage界面与Word、PowerPoint等软件的界面极为相似，为使用者带来了极大的方便,Microsoft公司将FrontPage封装入Office之中，成为Office家族的一员，使之功能更为强大。,返回本节目录,9.3.2、网页制作和美化工具(2),网页制作工具3.Dreamweaver:是由Macromedia公司推出的一款在
18、网页制作方面大众化的软件，它具有可视化编辑界面，用户不必编写复杂的HTML源代码就可以生成跨平台、跨浏览器的网页，不仅适合于专业网页编辑人员的需要，同时也容易被业余网友们所掌握。另外，该软件的网页动态效果与网页排版功能都比一般的软件好用，即使是初学者也能制作出相当于专业水准的网页，所以该软件是网页设计者的首选工具。该软件支持动态HTML，并采用了Roundtrip HTML技术，从而奠定了在网页高级设计功能方面的领先地位。在进行网页设计过程中，动态HTML技术能够让用户轻松设计复杂的交互式网页，产生动态效果；而Roundtrip HTML技术则可以真正支持HTML源编辑模式，不会产生冗余代码，
19、使网页渲染速度加快。因此，该软件是一种可以满足多层次需求、功能强大的可视化专业级网页设计及制作具。,返回本节目录,9.3.2、网页制作和美化工具(3),网页美化工具 为了使制作的网页更为美观，用户在利用网页制作工具制作网页时，还需利用网页美化 工具对网页进行美化。1.Photoshop：是由Adobe公司开发的图形处理软件，它是目前公认的PC机上最好的通用平面美术设计软件，它功能完善、性能稳定、使用方便，所以在几乎所有的广告、出版、软件公司，都是首选的平面制作工具。2.Fireworks：是由Macromedia公司开发的图形处理工具，它的出现使Web作图发生了革命性的变化。因为Firewor
20、ks是第一套专门为制作网页图形而设计的软件，同时也是专业的网页图形设计及制作的解决方案。作为一款为网络设计而开发的图像处理软件，Fireworks还能够自动切割图像、生成光标动态感应的JavaScript程序等等，而且Fireworks具有强大的动画功能和一个相当完美的网络图像生成器。用户可以从http:/站点下载该软件。,9.3.2、网页制作和美化工具(4),网页美化工具3.Flash:是美国Macromedia公司开发的矢量图形编辑和动画创作的专业软件，它是一种交互式动画设计工具，用它可以将音乐、声效、动画以及富有新意的界面融合在一起，以制作出高品质的网页动态效果。它主要应用于网页设计和多
21、媒体创作等领域，功能十分强大和独特，已成为交互式矢量动画的标准，在网上非常流行。Flash广泛应用于网页动画制作、教学动画演示、网上购物、在线游戏等的制作中,返回本节目录,1输入文本 利用FrontPage 创建一个网页后，在文档的编辑区域内，可以看到闪烁的光标，在此可以输入文字。在输入文字的过程中，光标也跟着向后移动。2编辑文本 应用FrontPage 编辑文本的基本操作与其他的文字处理软件有相同之处。常用的文本编辑操作有：选择、移动、复制、粘贴、剪切、删除、查找和替换等。,第9.4节、利用FrontPage处理网页文本（1）,返回本章目录,3设置文本格式 在FrontPage 中，不但可以
22、非常灵活地设置各种文本格式而且可以设置斜体、下划线、上/下标、空心、阴影等各种特效4段落式样和对齐方式（1）段落式样：FrontPage为网页设计者提供了16种样式，其中6种是段落样式。（2）对齐方式：在格式栏中有4个按钮与段落的操作有关，这4个按钮分别代表左对齐、右对齐、居中对齐和分散对齐。5编号列表 在FrontPage 中，设置编号列表可以利用按钮和按钮，是用默认的标准项目符号，也可以自定义项目符号列表。6为段落添加水平线,第9.4节、利用FrontPage处理网页文本（2）,返回本章目录,本节目录9.5.1、利用FrontPage创建表格9.5.2、利用FrontPage编辑表格9.5
23、.3、设置表格属性9.5.4、利用表格设计网页布局,第9.5节、网页表格的处理,返回本章目录,9.5.1、利用FrontPage 创建表格（1）,创建表格 FrontPage提供了强大的制表功能，使得在制作网页的过程中插入表格的操作显得简便、快捷。创建表格有以下4种方法。1使用菜单命令创建表格：如果用户希望准确地设置要创建的表格的行、列数，可以通过执行菜单命令创建所需的表格。使用这种方法，可以同时设置表格所有的属性，如行和列的数目、边框宽度等。选择“表格/插入/表格”命令，打开“插入表格”对话框；输入行数、列数，设置表格的对齐方式、边框的粗细、单元格边距和间距，单击“确定”按钮，即可得到相应的
24、表格。,返回本节目录,创建表格2使用命令按钮创建表格：在编辑网页时，使用“常用”工具栏中的“插入表格”按钮，可以快速地在网页中插入一个表格。插入表格时用户可以自由选择表格所包含的行数和列数.3绘制表格:利用前面两种方法可以建立“n乘m”单元数的表格，单元格大小会自动平均分配。如果需要的表格比较简单，则可以手动绘制表格。手动绘制表格的操作步骤如下：选择“视图/工具栏/表格”命令，打开表格对话框；单击“手绘表格”按钮，在编辑区按下鼠标左键并拖动，即可划出表格边框，再在边框内添加线条即可画出需要的格。如果有画错的线条可以用表格中的“擦除”工具擦除。4将文本转换成为表格 如果有现成的文本，可以把文本转
25、换成为表格。,9.5.1、利用FrontPage 创建表格（2）,返回本节目录,编辑表格1修改表格：应用菜单或命令按钮创建后的表格，有些是需要经过修改才能应用。修改表格主要包括修改表格的大小、合并单元格、拆分单元格等操作。（1）修改表格大小：修改表格的大小有以下两种方法。通过鼠标拖拽法可以粗略地调整表格的大小。通过“表格属性”对话框可以精确地调整表格的大小。（2）合并单元格：合并单元格的方法有以下三种：先选择要合并的单元格，然后执行“表格”|“合并单元格”命令即可。选择要合并的单元格，在选中的单元格中单击鼠标右键，从弹出的快捷菜单中选择“合并单元格”命令。选择要合并的单元格，单击“表格”工具栏
26、上的“合并单元格”按钮。,9.5.2、利用FrontPage编辑表格（1）,返回本节目录,编辑表格（3）拆分单元格：拆分单元格就是将一个单元格拆分为多个单元格。在FrontPage 中拆分单元格的方法有以下几种。将光标放在要拆分的单元格内，执行“表格”|“拆分单元格”命令，弹出“拆分单元格”对话框，如图4.9所示。在该对话框中选择“拆分为列”或“拆分为行”，单击“确定”按钮。将光标放在要拆分的单元格内，单击鼠标右键，从弹出的快捷菜单中选择“拆分单元格”命令。将光标放在要拆分的单元格内，单击“表格”工具栏上的“拆分单元格”按钮。,9.5.2、利用FrontPage编辑表格（2）,返回本节目录,编
27、辑表格 2.在表格中添加文字和图片：在表格中可以添加文字与图片（1）在表格中添加文字：在创建好的表格内按要求输入文字，调整文字的字号、字体、对齐方式等。（2）在表格中插入图片 选中要插入图片的单元格，选择“插入/图片/来自文件”（根据需要选择图片的来源）命令，打开“图片”对话框；在对话框中选择图片，选中图片文件之后，单击“插入”按钮，则图片及插入到相应的单元格里。调整图片大小及位置。3.删除表格（1）删除单元格:在FrontPage 2002中如果要删除某个单元格，可以通过以下方法：选择要删除的单元格，执行“表格/删除单元格”命令。选择要删除的单元格，并单击鼠标右键，从弹出的快捷菜单中选择“删
28、除单元格”命令。,9.5.2、利用FrontPage编辑表格（3）,返回本节目录,编辑表格（2）删除列或行：在FrontPage 中如果要删除某列或某行，可以采用以下方法：选择要删除的列或行，执行“表格/删除单元格”命令即可。选择要删除的列或行，并单击鼠标右键，从弹出的快捷菜单中选择“删除单元格”命令。（3）删除整个表格:如果要删除某个表格，只需选中此表格中的所有单元格，然后单击右键并从弹出的快捷菜单中选择“删除单元格”命令即可。删除整个表格的操作方法如下：注意：如果在删除表格、单元格、行或列时，使用Delete键删除，则只删除该表格、单元格、行或列中的文本，而不是删除表格。,9.5.2、利用
29、FrontPage编辑表格（4）,返回本节目录,表格的布局 将光标置于表格中，单击右键并从弹出的快捷菜单中选择“表格属性”命令，打开“表格属性”对话框中进行表格属性设置。（1）表格的对齐方式:FrontPage中提供了4种对齐方式：默认、左对齐、右对齐和居中。单击“表格属性”对话框中的“对齐方式”下拉列表框，可从中选择所需的对齐方式。（2）表格的浮动方式:创建一个表格后，表格的两侧是不能输入任何文字的如果进行了浮动设置，就可以获得与图片绕差不多的效果了。FrontPage 中提供了3种浮动方式：默认、左对齐和右对齐。（3）单元格的边距与间距:如果想设置表格线与表格内容间的距离或两单元格间的距离
30、，可以通过单元格边距与单元格间距两个选项来设置。,9.5.3、设置表格的属性(1),返回本节目录,为表格添加背景 应用“表格属性”对话框添加表格背景。表格背景可分为两种 形式：一是为表格添加背景颜色，二是为表格添加背景图片。（1）为表格添加背景颜色：选中表格或单元格后单击“表格属性”对话框中的“颜色”选项右侧的向下箭头，从弹出的颜色面板中选择所需的颜色，则此颜色就会显示在表格的背景层中。（2）为表格添加背景图片：选中表格或单元格后，启用“表格属性”或“单元格属性”对话框中的“使用背景图片”复选框，然后选择一个图片作为表格的背景，可为表格添加背景图片。3为表格添加边框：改变表格的边框，可以采用以
31、下方法：选择要设置边框的表格，执行“格式”|“边框和底纹”命令。在要设置边框的表格中单击鼠标右键，选择“表格属性”命令，打开“表格属性”对话框，在“边框”选项组中进行相关设置。,9.5.3、设置表格的属性(2),在网页设计中表格还有一个重要的作用，就是设计页面布局。一个空白网页布置起来比较困难，尤其是一些复杂的页面。这时可以利用表格将网页分成若干个单元格，每个单元格对应网页中的一个部分。然后，对每一部分分别进行设计和制作，这样就可以使复杂的网页设计简化，而且所设计的网页清晰、有条理性。另外，在很多网页上都有各种细线的布局效果，使得页面简洁明快、条理清楚。这些细线要么是用图像的方式生成，要么是利
32、用表格的各种特性制作而成。使用表格实现这些细线可以使页面文件更小，下载更快，因此更为实用。细线效果大致可以分为两类，一类是表格框线，另一,9.5.4、使用表格设计页面布局（1）,是各种横竖分隔线。用表格布置页面时，首先要规划页面的布置，然后利用表格的平铺和嵌套，将网页中的各元素定位在各自的位置上。由于浏览器在下载网页时，先下载整个表格，然后再下载表格中的内容。所以在用表格布置页面时，不能将整个网页的内容都放在一个大表格中，以免影响网页的下在速度。,9.5.4、使用表格设计页面布局（2）,返回本节目录,第9.6节、利用FrontPage处理框架网页,本节目录9.6.1、认识框架网页9.6.2、创
33、建框架网页9.6.3、编辑框架网页9.6.4、设置框架网页属性,返回本章目录,9.6.1、认识框架网页,框架网页是种特殊的HTML网页，它可将浏览器窗口分成不同的区域，称为框架区域。每个区域都可以显示不同的网页.（1）框架网页的特点 只要单击某一个框架区域内的超链接，其指向的网页就会在另一个框架区域中显示，而不必将整个浏览器窗口中的内容更换一遍。固定网页中的某些内容。并不是所有的浏览器都能显示框架网页，这也是框架网页的一个局限。（2）框架网页的种类：常用到的框架网页是：标题、标题页脚和目录、垂直拆分、横幅和目录、脚注、目录、嵌套式层次结构、水平拆分、页脚和自顶向下的层次结构。,返回本节目录,选
34、择“文件/新建/网页或站点”命令，打开“新建网页或站点”窗格；单击“网页模板”超级链接，打开“网页模板”对话框 单击“框架网页”选项卡，显示十种网页模板，选择其中任一种形式，在对话框右边会出现该模板形式的说明，以及模板预览。选择“嵌套式”层次结构，单击“确定”按钮，出现初始框架网页；单击每个框架中的“新建网页”按钮，各编辑区变成编辑状态，可以依次编辑各个网页。单击每一个框架区域中的“设置初始网页”按钮将打开一个对话框，可以在该对话框中选择一个网页作为框架网页最初显示的网页，并显示在框架区域中,9.6.2、创建框架网页,返回本节目录,9.6.3、编辑框架网页(1),编辑框架网页与编辑普通的网页相
35、同，也可以在框架网页中添加和格式化文本、设置网页的背景颜色和背景图片、在网页中插入图片和添加组件，还可以调整框架的大小等。1在框架网页中添加和格式化文本:与在普通的网页中添加和格式化文本相同。2调整框架的大小:在输入文本时，可能输入的文本内容比较多，但框架又比较小，所以输入文本时会有一部分文本不能显示，这样在查看文本时就有可能看不到文本的整体效果，这时可以调整框架的大小来显示文本。通常调整框架的大小的方法有两种，即通过拖动框架的边框或指定想要的确切设置来调整框架的大小。,返回本节目录,（1）拖动框架的边框调整框架大小 将光标放在要调整的框架边框上，当光标变为“”形状时，按住鼠标左键，并向下拖动
36、。按此方法调整上图中右边两个框架的大小，调整后的框架网页如图5.7所示。（2）精确设置框架大小 单击框架，将光标置于框架内，点击鼠标右键，从弹出的快捷菜单中选择“框架属性”命令，弹出“框架属性”对话框；在“框架大小”选项组中设置框架大小为固定像素数后，再指定框架的宽度和行高，单击“确定”按钮。,9.6.3、编辑框架网页(2),返回本节目录,3拆分框架:在框架网页中不但可以调整框架的大小，还可以设置网页中显示的框架的多少。在框架网页中可以任意地拆分框架。（1）拖动边框拆分框架:将光标放在要拆分的框架边框上，按住“Ctrl”健，同时按住鼠标左键拖动框架边框，拖出一段距离后放开鼠标左键和“Ctrl”
37、键，出现一个框架。（2）将框架平均分成两行或两列:将光标放在要拆分的框架边框内，选择“框架/拆分框架”命令弹出“拆分框架”对话框。选择“拆分为行”或“拆分为列”，单击“确定”按钮。,9.6.3、编辑框架网页(3),返回本节目录,4删除框架 将光标放在要删除的框架中；选择“框架/删除框架”命令。注意：从框架网页中删除框架时，该框架中显示的网页也会被删除，但是框架网页中其余的内容并没有被删除。若框架网页仅含有一个框架，就不能删除该框架。5为框架网页设置背景颜色和背景图片（1）设置框架网页的背景颜色 将光标放在要设置背景颜色的框架中；单击鼠标右键，从弹出的快捷菜单中选择“网页属性”命 令，打开“网页
38、属性”对话框；,9.6.3、编辑框架网页(4),返回本节目录,单击“背景”标签，打开“背景”选项卡；单击“背景”右侧的按钮，从弹出的颜色面板中选择背景颜色；单击“确定”按钮。（2）设置框架网页的背景图片设置框架网页的背景图片与设置框架网页的背景颜色类似。5.1.3 设置框架网页属性 设置框架的属性包括设置边框的隐藏或显示、设置框架的边距和间距以及设置框架中滚动条的显示和隐藏。,9.6.3、编辑框架网页(5),返回本节目录,设置框架的属性包括设置边框的隐藏或显示、设置框架的边距和间距以及设置框架中滚动条的显示和隐藏。1.显示和隐藏框架边框:显示和隐藏边框的操作步骤如下.将光标放在任意一个框架中；
39、单击鼠标右键，从弹出的快捷菜单中选择“框架属性”命令，弹出“框架属性”对话框；单击“框架网页”按钮，打开“网页属性”对话框；选择或禁用“显示边框”复选框，就显示和隐藏框架边框；单击“确定”按钮，回到“框架属性”对话框；单击“确定”按钮。,9.6.4、设置框架网页属性(1),返回本节目录,2.显示和隐藏框架滚动条 在“框架属性”对话框中，从“显示滚动条”的下拉列表中选择“显示”或“不显示”或者“需要时显示”。,9.6.4、设置框架网页属性(2),返回本节目录,第9.7节、利用FrontPage处理网页图像,本节目录9.7.1、图像插入9.7.2、图像属性的设置,返回本章目录,用FrontPage
40、同样可以处理网页图像，不过在FrontPage中习惯称图像为图片。利用“插入/图片”菜单命令（1）插入来自文件的图片；（2）插入来自剪贴画的图片；,9.7.1、图像的插入,返回本节目录,右击图片打开属性对话框设置属性（1）调整图片的大小；（2）移动图片位置：在FrontPage 中移动图片位置很容易，只要在图片上单击鼠标左键，然后按住鼠标左键，拖动图片之所需的位置即可；（3）更改图片的格式属性；（4）替换图片或文字：当图片太大，下载很慢时，可使用一个分辨率较低的图片代替；而当图片不能被浏览器正常显示时，可以使用一些说明性文字；（5）图片与文字的对齐方式（6）图片的环绕样式：图片的环绕样式决定了
41、文字在图片周围的排列方式。设置图片的环绕样式可以在“图片属性”对话框中通过“环绕样式”命令完成，也可在“定位”对话框中设置。,9.7.2、图像的属性设置,第9.8节、在网页中使用超链接,本节目录9.8.1、超连接简介9.8.2、创建超连接,返回本章目录,9.8.1、超连接简介（1）,超连接定义 超链接是WWW技术的核心，是网页中最重要、最根本的元素之一。超链接能够使多个孤立的网页之间产生一定的相互联系，从而使单独的网页形成一个有机的整体。超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片、一个电子邮件地址、一个文件，甚至是一个应
42、用程序。而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。,返回本节目录,9.8.1、超连接简介（2）,超连接分类按链接路径的不同超连接可分为3种类型：内部链接、锚点链接、外部链接。按使用对象的不同超连接又可分为：文本超链接、图像超链接、E-mail链接、锚点链接、多媒体文件链接、空链接等。,返回本节目录,9.8.1、超连接简介（3）,合理安排超连接的建议1.避免孤立文件的存在：应该避免存在孤立的文件，这样能使将来在修改和维护链接时有清晰的思路。2.在网页中避免使用过多的超级链接：在一个网
43、页中设置过多超链接会导致网页的观赏性不强，文件过大。如果避免不了过多的超链接，可以尝试使用下拉列表框、动态链接等一些链接方式。3.网页中的超链接不要超过4层：链接层数过多容易让人产生厌烦的感觉，在力求做到结构化的同时，应注意链接避免超过4层。4.页面较长时可以使用书签：在页面较长时，可以定义一个书签，这样能让浏览者方便地找到想要的信息。5.设置主页或上一层的链接：有些浏览者可能不是从网站的主页进入网站的，设置主页或上一层的链接，会让浏览者更加方便地浏览全部网页。,返回本节目录,9.8.1、超连接简介（4）,网站中文档路径 在创建超链接之前，首先了解网站中3种类型的文档路径：绝对路径、和根目录相
44、对路径以及和文档相对路径。绝对路径：是包含服务器协议（对于网页来说通常是http:/或ftp:/）的完全路径，绝对路径包含的是精确地址而不用考虑源文件的位置。但是如果目标文件被移动，则链接无效。创建外部超链接时必须使用绝对路径。和根目录相对的路径：是从当前站点的根目录开始的路径。站点上所有可公开的文件都存放在站点的根目录下。和根目录相对的路径使用斜杠以告诉服务器从根目录开始。和文档相对的路径：是指和当前文档所在的文件夹相对的路径。这种路径通常是最简单的路径，可以用来链接和当前文档处于同一文件夹下的文档。,返回本节目录,9.8.2、创建超连接（1）,创建文本超连接 用FrontPage 2002
45、同样可以创建文本、图片、电子邮件和书签等超链接。建立文本超链接的操作步骤如下：（1）在网页中选中要创建超级链接的文本；（2）单击工具栏中的“插入超链接”按钮，或选择“插入/超 链接”命令，弹出“插入超链接”对话框；（3）在“查找范围”下拉列表框中选择要链接的网页的位置；（4）在所显示的网页列表中选择要链接的网页文件；（5）单击“屏幕提示”按钮，弹出“设置超链接屏幕提示”对话框；（6）在“屏幕提示文字”文本框中输入在屏幕上显示的文本，在浏览器中点击该超链接时将显示这些提示文字；（7）单击“确定”按钮，回到“插入超链接”对话框；（8）单击“确定”按钮，文本超链接完成。,返回本节目录,9.8.2、创
46、建超连接（2）,创建图片超连接具体操作步骤如下：（1）在网页中选择要创建超级链接的图片；（2）单击工具栏中的“插入超链接”按钮，打开“插入超链接”对话框；（3）在“查找范围”下拉列表中选择要链接的网页的位置；（4）在显示的网页列表中选择要链接的网页；（5）单击“屏幕提示”按钮，弹出“设置超链接屏幕提示”对话框；（6）在“屏幕提示文字”输入提示的文本；（7）单击“确定”按钮，回到“插入超链接”对话框；（8）单击“确定”按钮，图片超链接完成。,返回本节目录,9.8.2、创建超连接（3）,创建电子邮件超连接 在FrontPage 2002中创建电子邮件超链接的具体方法如下：（1）选中要建立超链接的文
47、本或图片，单击工具栏中的“插入 超链接”按钮，打开“插入超链接”对话框；（2）单击“电子邮件地址”选项，对话框变成图7.24所示；（3）在“要显示的文字”文本框中输入要显示的文字，在“电 子邮件地址”文本框中输入邮件地址，在“主题”文本框 中输入主题；（4）单击“确定”按钮。,返回本节目录,9.8.2、创建超连接（4）,创建书签超连接（1）创建书签(即锚点)的步骤:将光标置于要插入书签处 选择“插入”|“书签”命令，弹出“书签”对话框；在“书签名称”文本框中输入书签的名称；单击“确定”按钮，书签创建完毕。（2）使用书签创建超链接的步骤:选中要创建超级链接的文本；单击工具栏中的“插入超链接”按钮
48、，打开“插入超链接”对话框；单击“书签”按钮，弹出“在文档中选择位置”对话框；选择要链接的书签，单击“确定”按钮，回到“插入超链接”对话框；单击“确定”按钮，完成书签的链接；图片也可以链接到书签。将图片链接到书签的方法与文本相同。,返回本节目录,9.8.2、创建超连接（5）,编辑超连接更改超级链接的颜色 在网页中单击鼠标右键，从弹出的快捷菜单中选择“网页属 性”命令，打开“网页属性”对话框；在此对话框中单击“背景”标签，打开“背景”选项卡；单击设置3种超级链接颜色状态的选项后的小三角按扭，在弹出的颜色面板中选择3种状态的颜色；设置完成后单击“确定”按钮。这样设置完成超级链接的3种状态颜色后，以
49、后创建的超级链接就会变为设置的颜色。但要注意此种方法只可以保证在同一网页中的超级链接颜色为设置的状态，当新建网页时，新网页的超级链接的状态颜色的状态还会是默认值。更改超链接的字体格式：更改字体格式可以使用两种方法：一是通过网页属性更改超链接的字体格式；二是通过超链接的属性更改超链接的字体格式。,9.8.2、创建超连接（6）,删除超连接 删除时可以使用两种方法：一是通过删除超链接对象来删除超链接；另一种是通过“编辑超链接”对话框中的“删除链接”按钮来删除超链接。删除超链接对象：彻底删除超链接是指在删除超链接的同时连同超链接文本一同删除。可以在“普通”视窗下选中超链接后按下“Delete”键，删除
50、超链接。删除超链接：在删除超级链接时，若要保留超级链接文本，可以执行以下的操作。在网页中选中创建了超级链接的文本；在工具栏中单击“插入超链接”按钮，打开“编辑超链接”对话框；单击“删除链接”按钮，然后单击“确定”按钮。,返回本节目录,在框架网页中设置超链接 在框架组中设置超级链接后，单击超级链接，该链接所指向的网页通常会在另一个框架中打开，即会在目标框架中打开。在使用FrontPage的框架网页模板所创建的框架网页下，目标框架已经设置好了。在框架组中设置超链接与在普通的网页中设置超链接相同，也可以设置文本超链接和图片超链接。1在框架中设置文本超链接:其操作步骤如下 在框架中选择要设置超链接的文
