第八编 网页制作

第八编 网页制作第一章 概述通过本章学习，您将掌握以下内容：l 知道FrontPage2000 的界面布局l 知道FrontPage2000管理器布局1.1 FrontPage 2000简介FrontPage 2000是Microsoft公司推出的网页制作工具，它功能强大、操作方便，是目前最为流行的网页制作与站点管理工具。由于采用图形化的界面以及“所见即所得“的方式编写网页，大大提高了专业网页制作人员的工作效率；同时，也可以使广大的非专业人员制作出专业级的网页。FrontPage 2000集成到Office2000中，这样，FrnotPage不仅可以利用自身强大功能，还可以充分利用Office2000中其他软件的功能，使得开发Web更加轻松自如。1.2 认识FrontPage 2000界面FrontPage 2000编辑界面和管理界面合为一体，可以在同一个界面中，利用不同的视图完成网页的编辑和站点的管理工作。121 FrontPage 2000界面 FrontPage2000的界面可以分为菜单栏、工具栏、视图栏和主编辑窗口4大部分，如图所示。l 菜单栏菜单栏以菜单命令形式为用户提供各种编辑网页和管理网页的功能，包括文件、编辑、查看、插入、格式、工具、表格、框架、窗口、帮助等10个菜单。l 工具栏工具栏以工具按钮的形式为用户提供主要的编辑和管理功能。l 视图栏视图栏中摆列着各种管理器的图标，这些管理器包括网页管理器、文件夹管理器、报表管理器、导航管理器。超链接管理器、和任务管理器等。单击管理器图标，可以切换到相应的管理器。l 主编辑窗口主编辑窗口是用户使用得最多的部分，主编辑窗口在不同的任务下显示的内容不同。在编辑网页时，有3种显示方式，即普通、HTML和预览。普通显示方式是最常用的显示方式，一般是在此方式下工作。HTML显示方式在需要直接编辑或查看网页文件的HTML代码时使用。有进直接对网页文件的HTML代码进行编辑要比使用普通方式更方便、更直接。预览显示方式在需要预先观察网页的显示效果时使用。当使用管理功能时，主编辑窗口相应地会显示各种任务下的文件或站为信息。122 FrontPage2000管理器在FrontPage 2000中共有6种管理器，分别对应着6种视图。利用这6种管理器可以编辑网页、管理站点文件和文件夹、生成报表、管理站点的导航图、编辑站点中网页间的链接以及实现任务管理。l 网页视图在网页视图下，可以实现网页的编辑、修改功能。当新建一个网页或单击视图栏中的网页图标时，可打开网页视图。网页视图分为3种显示模式，分别是普通模式、HTML模式和预览模式。在普通模式下，可以以所见即所得的方式编辑网页；在HTML模式下，可以查看或编辑网页的HTML源代码；在预览模式下，可以查看网页的最终结果。l 文件夹视图在文件夹视图下，可以实现对站点中的文件夹和各种文件夹的管理。可以删除、复制、移动或新建文件及文件夹。在视图栏中单击文件夹图标，可以打开文件夹视图。l 报表视图在报表视图中，可以查看站点的各种情况。在视图栏中单击报表图标，可打开报表视图。l 导航视图导航视图用于管理站点中各网页的层次关系。网页的层次关系将直接影响到网页中导航条的链接关系。单击视图栏中的导航图标可以切换到导航视图。l 超链接视图超链接视图用于管理站点中网页的超链接。网页的超链接包括网页中导航条的超链、网页中文字与图的超链接以及网页使用到的各种资源文件的超链接。单击视图栏中的超链接图标可以切换到超链接视图。l 任务视图任务视图可以实现站点任务的管理。站点的任务是指站点管理人员维护站点的任务，包括网页的更新、站点的检查等。单击视图栏中的任务图标可切换到任务视图。在实际使用中，常用到的视图有网页视图、文件夹视图、导航视图和超链接视图。充分利用报表视图和任务视图可更加有效地管理站点。第二章 编辑网页通过本章学习，您将掌握以下内容：l 学会怎样创建一页简单的网页l 学会怎样编辑、修饰网页2.1 创建网页这一节我们学习怎样创建页面。创建页面最简单的方法就是单击FRONTPAGE“常用”工具栏的“新建”按钮。它的右方有一个向下的小箭头，它是用来选择要新建什么，可以用“新建”按钮新建网页、站点、文件夹和任务。默认状态下是新建网页。 如果要新建网页，可以不用向下箭头键选择，而直接单击“新 图2-1新建网页对话框建”按钮。不过使用文件菜单的“新建”命令来新建网页能够有更大的选择。单击文件菜单的“新建”命令，选择“新建网页”，在“新建”对话框里，可以看到FRONTPAGE提供的许多网页模板，如图2-1所示。我们可以用这些模板来建立相应的网页。在右下角的预览框里可以看到选中模板的外观。选择“两栏正文”网页，这样就创建了一个新的分为两栏的网页了。然后点确定。使用模板可以不用总是从空白网页开始编辑，这样就省力很多。2.2 修饰文本怎样使文字更丰富、活泼呢？一个简单的方法就是使用“格式”工具栏。 字体设置：选上文字，打开格式工具栏的“字体”下拉列表框，如图2-2所示。在里面选择相应的字体就可以了。如果浏览网页的人使用的计算机没有设置的字体？浏览器会用系统默认的字体代替你设置的字体。不过，使用常用字体是一个好习惯。图2-2字体设置下拉列表字号设置：在“格式”工具栏“字号”下拉列表框中选择相应字体就可以了，如图2-3所示。工具栏上的B、I、U图标的作用是：按下B按钮，被选中的文字就会变为粗体按下I按钮，被选中的文字就会变为斜体按下u按钮，被选中的文字就会带下画线字的颜色：单击“格式”工具栏“字体颜色”按钮旁的向下箭头，如图2-4所示。选择适当的颜色，字的颜色就改变了。 图2-3 字号设置图2-4字的颜色还可以对字体进行一些其他设置。选择“格式”菜单的“字体”命令，在这里我们还可以作进一步的设置。这里除了“格式”工具栏可以做的设置以外，还可以设置许多效果。“字符间距”选项卡，如图2-5所示。它是用来设置文字的间距的。单击“间距”下拉列表，可以选择字符的间距是普通、扩充还是紧缩的。选择扩充，这时预览框的文字间距就变大了。也可以调整间距大小来改变间距，输入10，文字的间距就更大了。“定位”下拉列表：在FRONTPAGE中每一行都有一个底线，定位就是指文字相对于底线的距离。也就是把文字上下移动，现在选择“上移”，文字就向上移动了。预览框中的黑线就是行的底线。图2-5 字符间距选项卡2.3 项目符号和编号设计网页应该层次分明，结构清晰。这可以通过FRONTPAGE的列表功能解决。选中要列表的内容，单击“格式”工具栏上的“项目符号”按钮，默认情况下，项目符号是一个小黑点。你也可以选择其它的项目符号，单击“格式”菜单，选择“项目符号和编号”命令。选择“图片项目符号”选项卡，如图2-6所示。单击“浏览”按钮，点“剪贴画”，再点Web符号按钮，选择合适的图片，单击“确定”按钮。图2-6 图片项目符号选项卡图2-7设置缩进：单击工具栏上的“缩进”按钮。对有顺序的内容列表可以使用编号。单击“格式”菜单的“编号”按钮。现在有一个问题，“站点的主题”、“站点的共享边框”两行是属于“设计站点风格”的内容，可是也编号了。解决的方法是把这两项选中，单击“增加缩进”按钮，再次单击“增加缩进”按钮，这样就可以了如图2-7所示。要把这两项改为其他编号方式，可以选择“格式”菜单的“项目符号和编号按钮”，在编号框里选择合适的编号形式，单击“确定”按钮。怎样解决列表分级太多而显得不简洁的问题？方法是把子列表折叠起来，称为“折叠大纲”。将鼠标光标移到要折叠的列表的上一级处，单击“设计站点风格”，单击鼠标右键，选择“列表属性”命令，将“启用折叠大纲”和“开始时折叠复选框”选中，单击“确定”按钮。 打开它时只要单击它就打开了。2.4 插入水平线在网页中适时的插入水平线可以使层次分明。最简单的方法是插入水平线使需要分隔的部分分开。把插入点调整到插入水平线的位置，选择“插入”菜单的“水平线”命令。改变线条颜色，双击插入的线条，在弹出的“水平线属性”对话框里单击“颜色”下拉列表，如图2-8所示。 选择相应的颜色，单击“确定”按钮。图2-8 水平线属性在对话框中有“窗口宽度百分比”和“像素”选项，如图2-8所示。它们的作用是通过调整宽度数值设置线条的宽度，但是这个数值的单位却是由它后面的选择决定。比如现在选择的是窗口宽度百分比，就表示线条的宽度就是由它占所在浏览器窗口的宽度的百分比来决定的。如果我们选择像素就表示线条宽度是100像素。单击水平线，选中它。按ALT+ENTER键，直接进入水平线对话框，调整“线条高度”为5个象素，单击“确定”按钮。线条高度就变高了。水平线变化有限，装饰性不强。我们还可以插入更丰富的线条来修饰页面，那就是线条图像。 线条图像就是一个特别狭长的图像。将水平线选中，按DEL键，将水平线删除，选择“插入”菜单的“图片”命令，单击“剪贴画”选项。选择“图片”选项卡，这里把FRONTPAGE提供的剪贴画按类别放在了下面的列表框中，选择“WEB框架”，如图2-9所示。选择小石头图像，单击“插入剪辑”按钮。由小石头构成的线条就插入完成了。图2-9 剪贴画库如果想把线条缩短一点，可以在线条上单击鼠标右键，选择“图像属性”命令，打开“图片属性”对话框，选择“外观”选项卡，如图2-10所示。选择“指定大小”，将宽度的单位设置为百分比，将宽度调整为80，单击“确定”按钮。图2-10 图片属性2.5 插入时间标记、注释和预览网页251插入时间标记在INTERNET上我们经常看到许多网页上都有一个最新更新日期，用来告诉用户页面上一次更新是什么时候，这是怎么做的呢？看完下面的部分你就知道了。时间标记当活动网页被重新编辑或自动更新之后，会自动改变。设置起来也很容易：在页面末尾输入：“更新时间”，执行“插入”菜单的“日期与时间”命令，在“日期时间属性”对话框中选择“该网页上次编辑日期”，如图2-11。如果要改变日期的格式，可以单击“日期格式”下拉列表，选择合适的格式。图2-11 时间日期属性252 插入注释图2-12 注释对话框怎么在网页里插入注释呢？（在我们创建编辑和修改网页的过程中，经常需要插入一些文字，表明设计的意图和方法，在编辑网页时作为参考和提示，这就是注释。） 插入注释的方法是：普通模式下单击当前网页要插入注释的位置，把插入点设置到那里。选择“插入菜单”的“注释”命令，这样就会弹出“注释”对话框，如图2-12所示。在“注释”文本框中输入注释的内容，单击“确定”按钮。在指定的位置注释出现了。现在单击“预览”选项卡，切换到预览模式，注释没有出现。 实际上注释并不是在浏览器中显示的网页的一部分，浏览者通过浏览器是看不到网页里的注释的。253 预览新建网页设计好的页面，应该检查它在浏览器中是否显示正常。方法是，一般只要切换到预览模式就可以了。单击“预览”选项卡，在这个预览模式下的显示和在浏览器中的显示是一样的。但这并不意味着我们就不必用浏览器来检查编辑的网页了。因为即使是同一个页面，可能在不同的浏览器中显示会不太一样。比如在INTERNET EXPLORER中是这样显示的，但是在NETSCAPE中又是那样显示的。所以，我们要在自己的机器上多装几个浏览器，用来检查网页的兼容性。怎么用不同的浏览器来检查呢？选择“文件”菜单的“在浏览器中预览”选项，在浏览器列表框中选择不同的浏览器，如图2-13所示。（以INTERNET EXPLORER 5.0为例）单击“确定”按钮。就可以看到新建页面在浏览器中的效果了。图2-13 浏览器列表框这一部分内容很简单，但是这些内容在制作网页的过程中几乎每次都会用到，“万丈高楼平地起”，不要小看这些最基本的操作呀。第三章 使用图形通过本章学习您将掌握：l 在网页中插入图形l 编辑和对齐图形 3.1 插入图形如果有一个图形，怎么把它放到网页上呢？首先要看你的图形是什么格式的，也就是它扩展名是什么 只有扩展名为GIF和JPEG的图形文件才能成为我们的页面的一部分。因为这两种图形格式不仅应用广泛，而且有利于节省存贮空间。 如果图形不是这种格式，使用了其它格式的图形文件，在保存网页时FRONTPAGE会提示做格式转换，FRONTPAGE可以自动进行格式转换。 现在可我们看看怎么插入图形 选择“插入”菜单的“图片”命令，单击“来自文件”按钮。在默认情况下，FRONTPAGE认为你要插入的图片总是放在你建立的站点的目录或它的子目录下的。可以说,站点就是一个目录。我们把编辑的许多网页文件放在同一个目录下，我们称这个目录为站点的主目录。这些网页引用的图形一般也放在这个目录下。当然，我们也可以在这个目录下建立其他的子目录，再把所有的图形放在子目录里。所以搜索下拉列表只允许在主目录和主目录下的子目录进行选择。如果要插入的图片不在主目录下, 在“选择文件”对话框中进行选择。选择好文件以后，单击“确定”按钮，回到“图形”对话框。单击“确定”按钮，图形就插入了。现在单击“常用”工具栏的“保存”按钮。 在“另存为”对话框中输入新的web页文件的名字，单击“保存”按钮。出现了一个对话框, 因为我们刚才插入的文件不在站点内，现在FRONTPAGE要把它复制到站点内，可是使用什么名字，放在站点的哪个目录下呢，就要在这设置了，单击“改变文件夹”按钮，另外这儿还在需要时对图形的格式进行转换。单击“位置”按钮，在默认情况下，图形被保存在站点的主目录下，现在我们选择IMAGE目录，单击“确定”按钮。回到“嵌入式文件”窗口，再单击“确定”。这样，图形就保存在站点内了。我们还可以从INTERNET上插入一个图形。选择“插入”菜单的“图片”命令， 在URL栏内输入图片的地址，单击“确定”按钮。由于是插入网上的图片，因此在插入图形以后，应该保存一下网页，使图形存到站点内。您可能说,我不会画画，插入图片容易，可是编辑图片就不容易了。没关系，FRONTPAGE自己带有许多剪贴画，你可以把它们插入到自己的网页。 选择“插入”菜单的“图片”命令， 选择“剪贴画”。 你看，各种剪贴画都分类放好了。你可以自由地选择。不过，插入后别忘了保存网页，把剪贴画复制到站点目录下。3.2 编辑图形3.2.1设置图形透明插入图形只是在网页中运用图形的第一步，在FRONTPAGE里，还有许多对图形的设置。 你看，这个网页右边那个人的背景和左面的一样，都是白色，只是设置了图形的透明，因此就看不见白色的背底了。它是怎么实现的呢？单击左边的图形，FRONTPAGE窗口下又多了一个工具栏，我们称它为“图形”工具栏。 这一个就是设置透明的按钮，单击“透明”按钮，在右面的图形的白色部分单击，透明的设置就结束了 3.22.剪切图形 下面这两幅图像，小图是大图的一部分。 实际上小图是把大图经过修剪后得到的。这在我们只用一幅图的某一部分时特别有用。 现在我们把大图也修剪了：首先单击大图，现在“绘图”工具栏出现了。我们单击“绘图”工具栏的“剪裁”按钮。这时图形四周的小点变为了黑色的。下面还出现了一个剪切框。 调整剪切框到合适的大小，再把它移动到合适的位置，单击剪切按钮， 图片就剪切完毕了。 好像剪小了一点。 没有关系， 单击“撤消”按钮，上次的操作就被撤消了。再重新剪切一次就可以了。如果进行了很多次剪切操作，发现把图弄坏了，这时想重新剪切，该怎么办呢？ 这时我们可以单击“绘图”工具栏上的“还原”按钮，图片就被重新载入到文档中，你可以对图片重新进行处理。 3.3.3.给图形添加文本 我们可以给图形加文字。选中左边的图形，单击图形工具栏“文本”按钮，现在图形中就出现了一个文本框，输入：“别淘气”。再按一下Esc键，取消文字编辑，就选中文字框了，调整文本框到合适的位置，单击页面其他区域，文字就添加成功了。如果我要修改 单击一下要修改的文字，这时文字作为一个整体被选中了，再点一下文字，这时文本框里有光标闪烁，你可以编辑文本了，重新输入：“你真淘气”，在页面其他区域单击。 文字就修改完成了。 我们还可以撤消这次操作吗？3.3 设置特殊效果我们再来看看“绘图”工具栏的其他按钮有什么用处。 先来看一看翻转按钮组：这一个是向左翻转按钮，可以使图形逆时针翻转90度。这一个是向右翻转按钮，可以使图形顺时针翻转90度。这一个是水平翻转按钮，可以使图形左边变右边，右边变左边。这一个是垂直翻转按钮，可以使图形上边变下边，下边变上边。看这一个网页上面的一幅图是下面两幅图叠加起来的。这在FRONTPAGE里也很容易做到。 我们试一试： 单击那颗“会动的心”选中它，单击“绘图”工具栏上移一层按钮使“会动的心”和“猫”不在同一层上。 移动“会动的心”使它“跳”到桌子上，再切换到“预览”视图看一下，还不错吧？不过要注意，那个“会动的心”是一个透明的Gif动画，所以当把“心”移到桌子上时，Gif动画的背景色就透明了。 当然啦，还得要保存一下文件。下面我们来看一下图形的按钮效果：你看，这两个图标实际上是同一幅图案。 现在我们选中右边的那张，单击“绘图”工具栏的“凹凸效果”按钮，这时，图案就变成一个按钮了。 还有其他效果，比如： “对比度”按钮可以增减图形的对比度， “亮度”按钮可以调整图形的亮度， “冲蚀”按钮可以使图形半透明。这些你都可以有空试一试。并在实际使用中灵活运用。 3.4 图形与文本的对齐 一般我们插入的图形总是和文本在一起的，所以调整图形和文本的对齐方式很重要。 在默认情况下，图形自动与文本的底部对齐。这一个网页，由于默认的对齐效果，页面出现了大量的空白。这时就要调整图形的对齐属性。 在图形上单击鼠标右键，选择“图片属性”，选择“外观”选项卡我们把对齐方式调整为“左对齐”。 现在好多了吧？ 使用图形可以使网页更加丰富多彩，而且我们还可以用图形来建立超链接，使网页相互联系起来呢。 这我们会在下一节讲链接的内容中介绍。 第四章课 超链接通过本章学习，您将掌握以下内容l 在网页中用文本和图形建立超链接l 使用书签l 设置超链接的颜色l 使用图形地图4.1 用文本和图形建立链接怎样才能自己做的网页相互联系起来呢?也就是说让别人点页面上的图形或文本就跳转到其他页面呢？ 在网页里，我们把这种点击后会进行页面切换的网页界面元素叫超链接。 先来看一下用文字来建立链接。首先创建一个指向站点内其他网页的超链接。选择“插入”菜单的“超链接”命令，在文件列表框内选择“页面1.htm”文件，注意在URL文本框中显示了该文件的地址。 单击“确定”按钮.超链接就制作成功了。 我们切换到预览模式（单击预览按钮），当我们把鼠标指向“主页”两字时鼠标变成手形，单击它，我们就切换到主页了。 那么为什么不在普通模式下试呢？：因为普通模式主要是用来编辑网页的，当我们在普通模式把鼠标指向“主页”两字时鼠标没有变成小手状，因此不能进行页面切换。 不过如果按住CTRL键，鼠标就变成了小手状。这时单击就可以进行切换了。也就是说在普通模式中按住CTRL键才能激活超链接。我们也可以将超链接指向其他站点的网页。选中作为超链接的文本，单击“常用”工具栏的“超链接”按钮，这和选择插入菜单的超链接命令是一样的。 在“创建超链接”对话框里，在URL地址栏直接输入要连接的网页或网站的地址。 如果不清楚要作超链接的地址，只要单击URL地址框后面的放大镜就可以用浏览器在INTERNET上查找要链接的网页，FRONTPAGE会自动记录你找到的地址。 单击“确定”按钮就可以了。我们还可以改变已经设置好的超链接。首先确认是普通模式，在要改变的超链接下单击鼠标右键，选择“超链接属性”命令，输入新的URL地址就可以了。 要想取消超链接，删除所有URL地址框里的内容就可以了。 还有一种超链接，可以链接电子邮件。这样可以使你的网上朋友通过Email及时与你联系，这是一个网站站长和网友交流的重要手段。 首先选中要作为超链接的文本，一般文本就是你的邮箱地址，单击“超链接”按钮，单击“信封”按钮，输入你的邮箱地址， 单击“确定”按钮，退出对话框， 选择“确定”，这时超链接就建立好了。我们试一下，切换到预览模式，单击邮件链接， 这样OUTLOOK被激活了，现在就可以发Email了。刚才讲的都是用文本建立超链接，怎么用图形来建立链接呢？ 其实图形超链接和文字超链接的制作方法是一样的，只要在建立超链接时选择图形就可以了。 首先选中超链接的图形，单击箭头图形，单击“常用”工具栏“超链接”按钮，选择主页文件“页面1.htm”，单击“确定”按钮. 在普通模式中，按住CTRL键，单击箭头图形，就跳到主页页面了。 42 书 签 我们不仅可以用超链接的方法在多个网页之间进行跳转，也可以在同一个页面里跳转。它的最大优点是可以使我们迅速跳到网页的某部分。这实现起来比起到网页的超链接要稍麻烦一点。首先要定义书签。然后就直接把超链接指向书签就可以了 。书签可以是字符串，也可以是光标所在位置。 我们选中“默认名称”四个字，选择“插入”菜单“书签”命令，书签名称就是选择的文本名称。在这里，我们可以直接修改书签名称 。当你的书签名为空时，你还要自己输入一个名称。现在我们单击“确定”按钮，在普通视图里“默认名称”被加了下划虚线，表示这儿有一个书签。 现在我们讲讲光标位置书签的表示。和前面做超链接的方法是一样的，完成以后，你看，一个小旗。现在我们来建立到书签的链接。选中“书签名称”，把它作为超链接文本，单击“常用”工具栏“超链接”按钮， 在可选组框里书签下拉列表中选择相应的书签，单击“确定”。“书签名称”就变为超链接了。 修改书签：选择“插入”菜单的“书签”命令，在对话框中选中你要修改的书签，选择“转到”， 跳到相应位置，这时可以直接修改书签名称，也可以单击“清除”按钮删除书签。 4.3 设置超链接颜色在默认情况下，超链接是蓝色的，以与未访问已经访问过的超链接一般用不同的颜色过的相区别。 我们可以改变这些颜色。首先在网页上单击鼠标右键，选择“网页属性”，进入“网页属性”对话框， 选择“背景”选项卡，你可以改变一般的、已访问的和当前的超链接的颜色，这里我们单击“超链接”下拉列表框，选择绿色，单击“确定”按钮，超链接的颜色就改变了。 注意： 在需要的时候修改，如果你随便修改，可能别人就会感到迷惑，觉得很不习惯。 4.4 图形地图我们在FRONTPAGE里还可以建立图形地图，使一个图形指向多个链接目标。 图形地图是什么意思呢？当我们单击图片的不同部分时，就可以跳到页面的不同部分。这里一个图形链接了多个书签。可是，怎么制作图形地图呢？ 首先，要在图形上绘制热点。我们选中OFFICE图形， 图形上有一个个的小框框。这就是热点，当我们浏览时单击他们就可以链接到别的地方。绘图工具栏有按钮可以添加热点。这个可以添加矩形热点，我们用的就是它。这个用来添加圆形热点， 这个可以添加不规则热点。 接下来 我们按下“矩形热点”按钮，在图片的FRONTPAGE上拖一个框，接着就会弹出“创建超链接”对话框， 选择事先建立好的书签。按“确定”按钮。根据具体情况，我们可以创建链接到其他网页的链接。还可以拖动热点框调整位置，也可以拖动热点框的小黑点改变框的大小。 看上去这和改变图形的大小、位置一样。如果我们单击图形中没有热点覆盖的地方，在默认情况下不会发生跳转，有时我们也可以设置一个默认跳转位置，这样单击图形的任何地方都会跳转。 单击图形，选中OFFICE图片，单击鼠标右键，选择“图片属性”命令， 在“常规”选项卡中单击“默认超链接”中的“浏览”按钮， 选择“OFFICE全新亮相”书签。单击“确定”按钮。再在“图片属性”窗口中选择“确定”。再切换到“预览”模式，这时单击没有热点的地方就会自动跳到“OFFICE全新亮相”书签的位置。 在Internet上超链接是如此广泛的应用着，可以说整个Internet就是一个由无数个超链接连接起来的网络，要想制作好网页就一定要掌握如何使用超链接。第五章 使用表格通过本章学习，您将掌握以下内容：l 在网页中创建、设置表格l 学会使用单元格51 创建表格在FRONTPAGE的诸多功能中，制表功能也是一个很重要的方面。我们不仅利用表格显示一些有规律的数据，而且还经常对表格中的单元格进行调整，在其中放入文本和图形，达到对网页进行布局的目的。我们来看看这个网页，这是在普通模式里的效果。 文本被分成左右两栏了。文本周围有虚线包围。这些虚线实际上就是表格的框线，我们利用表格把网页分为了左右两栏。 我们切换到预览模式，框线没有了。 在普通模式看到的虚线可以便于我们编辑。由于表格框线的宽度是0，所以它在普通模式里是虚线显示的，而在浏览器里它就不显示出来。也就是说用一个看不见的表格把文字分开。怎样创建表格呢？首先把插入点调整到要插入表格的位置，单击“常用”工具栏“插入表格”按钮，拖动鼠标，直到高亮的格子的行列数与你要插入的表格相同为止。这里我们用3乘4的，也就是3行4列的。 实际上这种方法创建单元格只能将各单元格行高和列宽设置为一样的，如果要在创建表格时对表格进行设置，可以使用插入表格命令。 设置好插入点后，选择“表格”菜单的“插入”命令，单击“表格”命令， 将行数设置为3，列数设置为4，将边框粗细设置为5，将单元格间距设为3，确认指定宽度复选框选中，并选择单位为百分比， 设置百分比为80，使表格宽度为浏览器宽度的80%，单击“确定”按钮。 新建的表格边框变粗了。这是因为我们刚才设置了边框的粗细为3，另外单元格之间的分割线也变宽了，这是因为我们设置了单元格间距的结果。我们的设置也自动变为了下一次创建表格的默认设置。 还有一种创建表格的方法，你可以直接把表格画出来。 选择“查看”菜单的“工具栏”命令，单击其中的“表格”选项，这时就会显示“表格”工具栏。 单击“手绘表格”按钮，用拖动鼠标的方法画一个表格。 双击鼠标退出画表格状态。 如果画错了就单击“擦除”按钮，在要擦除的线条上拖动，这时线条会变红， 放开鼠标，线条就被擦除了。 表格工具栏的其他按钮都与表格菜单的各条命令相对应，它们的使用方法也是一样的。5.2 单元格的控制创建好表格后，就可以在表格里输入文本了。一般情况下，直接输入就可以了。当达到单元格末尾时文字会自动换行的。 可是在没有达到末尾时就要换行的话，不是按回车键不就可以了，因为这样做就把文本分成了两个段落，文本的行距就会变大。这就是使用回车键的效果。 应该这样来做。按SHIFT+ENTER键，这样文本就强制换行了。我们再输入换行文字，这时行距就正常了。 单元格里的文本与单元格的对齐方式有时也需要调整。我们可以用“格式”工具栏的左对齐、居中对齐、右对齐进行设置。在这里还有专门的设置方式。首先单击要调整格式的单元格，单击鼠标右键，选择“单元格属性”命令，在这里你不仅可以设置水平对齐方式还可以设置垂直对齐方式。 这里我们把水平对齐方式调整为“水平居中”对齐。 单击“确定”按钮，文本就水平居中对齐了。 我们还可以把水平和垂直对齐方式组合使用，这样就可以任意的调整对齐方式了，也可以同时选中多个单元格，一起设置对齐方式。 首先要知道为什么要选中单元格。有时我们要对单元格进行某种操作，比如要删除几个单元格，首先就要把这些单元格先选中。 现在我们来看一看怎么选中单元格：单击要选中的单元格，插入点就在单元格中了， 选择“表格”菜单的“选定”子菜单，单击“单元格”命令，单元格就选中了。 我们刚才已经选中了一个单元格，按住CTRL键，单击其他单元格，这些单元格就选中了。 用这种方法可以选中不连续的单元格。从一个单元连续拖动鼠标可以选中连续的单元格。 选定单元格后就可以对单元格做操作了。我们可以把几个连续单元格合成一个单元格：先把单元格一、单元格二选中，执行“表格”菜单的“合并单元格”命令，两个单元格就合并成为一个单元格了。 也可以把一个单元格分成几个单元格：我们把插入点放到要拆分的单元格里，选择“表格”菜单的“拆分单元格”命令， 在“拆分单元格”对话框里你可以设置是拆分成行还是列，这里我们选择列，并将列数设置为2，单击“确定”按钮，这样一个单元格就被拆分为两个单元格了。下面我们看看如何在表格里插入新的单元格：首先在要插入单元格的右侧单元格内单击，使插入点放在右侧单元格内，选择“表格”菜单的“插入”命令，单击“单元格”选项，一个新的单元格就放在指定位置了。 用这种方法也可以插入行和列,方法是一样的，只要执行插入命令时选择行和列就可以了。 在“单元格属性”对话框里还有一些其他设置。我们先来看一下设置背景色：选中两个单元格，单击鼠标右键，选择“单元格属性”命令，将背景色改为青色。 单元格边框的颜色也也可以在“单元格属性”对话框里设置。你可以使用这些选项来调整单元格边框的颜色； 你也可以为单元格加一个背景； 单元格的宽度和高度也可以指定； 选中不换行选项则文本在单元格内不会换行，如果文本太长单元格的宽度会自动改变。 5 3 行列操作熟悉了单元格的操作，我们现在来学习表格的行列操作。 对表格的行列操作，除了提高效率之外，还有一些特别的操作。不过我们还是从行列的选择学起吧。 我们可以用选择单元格的方法选择行和列，不过有更简便的方法：把鼠标移到表格的左边界处，这时鼠标光标会变为向右的黑色箭头，单击鼠标就可以选中箭头指向的行。把鼠标移到上边界处就可以选中列。 我们在选中一行后，按住SHIFT键不放，接着选择其他行，就可以选中连续的几行， 如果按住CTRL键，就可以选中间断的几行。也可以在按住SHIFT键不放的情况下，用键盘的上下左右键来选择。这里我们看一下用“选择”命令选择：单击要选择的行的任何一个单元格，执行“表格”菜单的“选定”命令，单击“行”命令就可以选中该行。当然，对列的选择也是类似的操作方法，选中之后可以把选中行或列删除。 注意：用DELETE键删除只能删除单元格中的内容。只要选择“表格”菜单的“删除单元格”就可以了。 你看，这一个表格的各列宽度是不同的， 现在我们选中各列，选中后我们能对列进行均分。 选择“表格”菜单的“平均分配列宽”命令，这样各列的宽度就一样了。 54 表格设置如果我们把表格看作一个整体，它还有一些特殊的设置。 我们先来看看怎样把文本转化为表格。看，这儿有用逗号隔开的数字1到8，选中它们， 选择“表格”菜单的“转换”子菜单执行“文本到表格”命令， 选择分隔符为逗号，单击“确定”按钮，这样，文本就转换为表格了。 这样以后我们就可以先输入文字再建立表格了。 再来看看怎样为表格加一个标题。单击要插入标题的单元格，选择“表格”菜单的“插入”子菜单，单击“标题”，这时表格上方出现了一个插入点， 输入表格的标题文字，标题就添加完成了。 我们提到过看不见的表格用来排版，这种看不见的表格又怎么设置呢？ 我们单击这个可见的表格，单击鼠标右键，选择“表格属性”，将边框粗细设为0， 单击“确定”按钮，切换到预览模式。 表格不见了。因为边框的粗细刚才设为0了。 当然我们也可以设置表格的背景颜色 ：切换到普通模式，在表格上单击鼠标右键， 选择“表格属性”命令， 在背景颜色下拉列表中选择一种颜色，这里我们选择绿色。下面还有使用背景的复选框，我们可以给表格添加背景。 现在我们单击确定按钮，整个表格的背景颜色就改变了作出立体效果也很简单。在表格上单击鼠标右键， 仍然选择“表格属性”命令， 将边框粗细设为5， 将亮边框颜色和暗边框颜色分别设为银灰色和灰度， 单击“确定”按钮。 看，表格的边框变粗了，立体感也加强了。 在默认情况下，表格在网页上是左对齐的，我们也可以改变这种对齐方式。 在表格上单击鼠标右键，执行“表格属性”命令，将对齐方式设置为水平居中。 这时表格就放在网页的中间了。这和设置单元格的对齐方式差不多。不过在默认情况下表格周围是不能排列文字的， 为了让文本与表格融为一体，我们使表格浮动对齐。 我们看一个例子：在表格上单击鼠标右键，选择“表格属性”，把浮动下拉列表设置为左对齐， 单击“确定”按钮。你看，这时在表格下面的文本就移上来了。 学习了这么多内容，表格的操作还真不少。其实这些操作并不难，主要是对单元格、表格行列、整个表格三个方面的操作。只要经常使用，就会很熟练的。第六章 使用框架 通过本章学习，您将掌握以下内容：l 在网页中创建、调整框架l 填充框架和保存框架网页61 创建框架你见过布告栏吗？就是那种有一个大的栏框，里面张贴着各种各样的布告的框架。布告栏可以把一个版面分成几个部分，在每一个部分里可以张贴不同的内容。 在我们的FRONTPAGE中，也可以制作这样的“布告栏”。在FRONTPAGE中我们把它叫做框架，它可以把一个浏览器窗口分成几个区域，每一个部分可以显示不同的网页。看，这些就是用框架制作的网页： 这是一个双框架网页，它把浏览器空间分成了两个框架，左框架和右框架分别显示了不同的两个网页。 这是一个三框架的网页，它分为三个框架，上面、左面和右面的框架都放着一个单独的网页。我们还可以把不同框架的网页相互联系起来：回到双框架网页中，单击左框架中的“显示主页内容”，这时在右面的框架里就会显示当前网站的主页。 刚才我们单击了左框架的超链接，它就要显示链接到的网页，可是显示在右面的框架里。这是因为右框架是左框架的目标框架，在FRONTPAGE中，一个框架的链接内容总是显示在它的目标框架里。 我们现在就来制作一个框架网页：选择“文件”菜单的“新建”命令，单击“网页”按钮，选择“框架网页”选项卡， 在这里列出了十种框架布局模板，你可以根据自己的需要选用。单击“目录”模板，在预览部分显示了框架网页的布局，上面的说明告诉我们左面的超链接内容在右面显示，这样我们就知道右框架是左框架的目标框架。有了这些信息你能够选择合适的框架模板了。 单击“确定”按钮。 我们建立的框架网页上有按钮。 这是因为刚才我们创建了一个框架网页，但是并没有指定在各个框架里显示哪个网页，就好像我们做了一个布告栏，但是并没有向里面张贴布告一样，而这些按钮就是用来让我们指定在框架里显示哪个网页的。 62 填充框架网页怎么在创建的框架网页里指定各框架所显示的网页呢？单击框架网页左框架的“新建网页”按钮， 这样就在当前框架里插入了一个新的空白网页。 我们也可以在框架中插入一个我已经事先编辑好的网页，甚至能够插入一个Internet上的网页。 单击右框架的“设置初始网页”按钮， 你可以直接在列表里选一个当前站点的网页；也可以按放大镜按钮在Internet上查找要插入的网页；单击“文件夹按钮”可以选择一个自己计算机里的网页；也可以按“文档”按钮新建一个网页。 我们在这里选择站点的主页， 单击“确定”按钮，主页就被放到右面的框架中了。我们可以按照常规编辑普通网页的方法来编辑框架里的网页。 单击要编辑的框架里的网页，输入文字， 你看，实际上和编辑普通网页一点区别也没有。我们现在选择“框架”菜单中的“在新窗口中打开”命令， 这是就在一个新窗口中打开了刚才框架中的内容网页，现在编辑起来是不是觉得宽敞多了？关闭框架内容网页窗口就可以回到刚才编辑创建的框架网页。 63 调整框架（上） 利用模板所创建的框架，框架的各种属性和样式都是按FRONTPAGE的默认设置来确定的，如果觉得很单调或是用得不方便，我们可以根据自己的需要作修改。 我们现在改变一下框架的大小：将鼠标移动到框架与框架的边界上，这时鼠标就会变成双向箭头， 拖动鼠标到合适的位置，框架的大小就改变了。 我们还能具体设置框架的大小数值：在左框架里单击鼠标右键，选择“框架属性”命令， 在“框架大小”选项区内我们可以输入合适的数值，调整框架的大小。 我们改变宽度的数值，单击数值后面的数值单位下拉列表。在这里要是选择“相对”，那么左框架宽度相对于右框架宽度的倍数将由前面数值框里的数值决定，而如果我们选择百分比，那么数值框里的数值是表示框架相对于浏览器宽度的百分比。在这里我们就选择百分比，单击“确定”按钮， 你看，这时左框架的宽度就改变了。 如果在框架里插入的网页太大，框架放不下也没关系，你看，上面这个网页的右框架里就放了一个比自己大的网页，这时框架就会自动弹出滚动条，浏览者就可以通过滚动条滚动框架里的网页了。 我们也可以具体设置一下滚动条的具体显示方式：在左框架上单击鼠标右键，选择“框架属性”命令， 单击“显示滚动条”下拉列表，这里有几个选项，“在需要时”表示由浏览器自动控制什么时候显示滚动条；“从不”表示无论框架里的网页有多大，也不显示滚动条；“始终”表示总是显示滚动条。 现在我们选择“始终”， 你看，尽管左框架里的网页不需要滚动，但是框架的垂直和水平滚动条都显示出来了。 刚才的框架属性对话框还有一些选择没有介绍。我们再次进入“框架属性”对话框： 我们可以改变初始网页的设置来在框架中放入另一个页面；如果去除“可在浏览器中调整大小”复选框就可以使浏览者不能改变框架的大小。 边距是指插入网页的正文与框架边界的距离，在默认情况下输入文字的开始处距离框架的左边界和上边界分别为12和16个像素。 框架网页是设置什么的？其实在FRONTPAGE里是这么处理框架的：我们把所有的框架定义在一个网页里面，这个用来定义所有框架的网页我们叫它框架网页；同时我们把框架里放的网页叫做内容网页。 现在我们单击“框架网页”按钮，在这里我们就可以设置框架网页的属性了，单击“框架”选项卡，在这里我们可以调整框架与框架之间的距离， 我们把它改为13，框架间的分隔条就变宽了；单击“框架网页”按钮， 把去除“显示边框”复选框的选择，单击“确定”按钮。 看，框架的分隔边框没有了。 6.4 调整框架（下）我们还可以在原有框架的基础上继续分割出新的框架。也就是说把一个框架再分为两个框架。现在我们单击右框架，把它作为要分割的当前框架，选择“框架”菜单的“拆分框架”命令，选择“拆分为行”， 单击“确定”按钮。 这和表格中的拆分单元格很象。要是不想拆分了就单击“常用”工具栏上的“撤消”按钮。当然利用“撤消”命令只能撤消上一步操作，如果你已经对网页进行了很多调整，然后想把拆分的框架再变成一个框架，就选中一个不想要的框架，然后单击“框架”菜单，选取“删除框架”命令，此框架就被删除了。 我们还可以用鼠标来分隔分割框架：将鼠标移到左右框架的边界处，这时鼠标变为了双箭头， 按住CTRL键拖动鼠标，一个新的框架就分割出来了。 竖直方向上的框架也基本一样拆分。现在右侧框架是左侧框架的目标框架。不过我们可以换一下左框架的目标框架。在普通模式下单击左侧框架选中它，输入“框架示例”几个字，并选中这几个字， 再点“超级链接”按钮， 接着点下面的”目标框架旁边的“更改目标框架”按钮。我们单击当前框架网页预览框的右下框架，这时右下框架在预览框里就高亮显示了， 单击“确定”按钮，退出“目标框架”对话框，选中“页面1.htm”，选择“确定”， 切换到预览方式，这时我们单击“框架示例”被链接到的网页就显示在右下侧的框架里了。 在框架网页里链接到的网页不一定必须放在已有框架中，也可以有其他的设置，现在我们