计算机图形图像与网页制作第13章.ppt

第13章FrontPage2000快速入门,13.1FrontPage与Word13.2FrontPage2000操作概览13.3用FrontPage建立一个网站实例13.4思考与练习,13.1FrontPage与Word,1FrontPage2000的窗口结构FrontPage窗口是FrontPage2000提供的对网页创建、管理以及发布的重要工具。在FrontPage2000启动后，屏幕将出现如图13-1所示的窗口界面。该窗口主要由标题栏、菜单栏、工具栏、视图栏、编辑区、状态栏等几部分组成。,图13-1FrontPage2000窗口结构,(1)标题栏。标题栏位于FrontPage2000窗口的最上方，它由窗口的系统菜单、窗口标识、控制按钮三部分组成。(2)菜单栏。菜单栏位于标题栏的下面，它包括“文件”、“编辑”、“查看”、“插入”等菜单。在菜单中，如果某个命令的右端有个三角符号，则选择该命令后，会打开相应的下一级菜单。在菜单中选择相应的命令，就能执行相应的操作。例如选择“插入”菜单中的“组件”命令后，在屏幕中将打开下一级菜单。如果菜单中命令后面带有省略号，选择该命令后，将打开一个相应的对话框，在对话框中进行一系列的设定后单击“确定”按钮，系统将按新的设置执行命令。,(3)工具栏。FrontPage2000的工具栏由常用工具栏和格式工具栏等组成。该工具栏可通过“查看”菜单中“工具栏”选项的下一级菜单中的相应命令打开和关闭。这些工具栏都可以成为独立的窗口，其中常用工具栏包含了最常用的一些指令和工具，格式工具栏包含了一些设置网页字型、格式等的常用指令。常用工具栏位于菜单栏的下面，该工具栏由22个常用工具组成。该工具栏中包括平时最常用到的工具，这些工具的功能和Word2000的工具栏有很多相似的地方。常用工具栏中的。工具如图13-2所示。,图13-2常用工具栏,格式工具栏最主要的功能是格式化网页文字的显示方式，它的界面与Word2000几乎是一样的。格式工具栏的工具如图13-3所示。,图13-3格式工具栏,注意：单击工具栏右端的小箭头，执行“添加或删除按钮”命令，将打开一个工具栏列表框。通过单击列表框中各命令左侧带“”的小框可以显示或隐藏相应的工具按钮。,(4)视图栏。视图栏位于FrontPage2000窗口的左侧，它由六个视图模式组成，六个视图模式之间可以相互切换。只要单击视图按钮，所选的视图模式便会出现在窗口的编辑区内。也可以通过单击“查看”菜单里的视图模式命令来实现上述功能。有关视图模式的详细介绍将在下一节讲述。(5)编辑(工作)区。编辑(工作)区位于视图栏的右侧，它是编排与设计网页的主要工作区域。当用户在视图栏进行不同视图模式的切换时，网页的组成结构将以不同的形式在这个区域中出现。,(6)状态栏。状态栏位于FrontPage2000窗口的最底端，它用来显示菜单命令和工具按钮的功能说明或一些状态信息，使用户对当前状态有进一步的了解。注意：在状态栏的右侧有一个漏沙瓶的图标，旁边还有一个数值，它用来显示下载一个站点所需的大致时间(以秒为单位)。,2在网页中添加文本打开FrontPage2000的网页视图，并在其中键入文本。无论是共享边框还是网页主体，文字都会出现在光标所在位置。共享边框在网页中以点划线指明，但是在浏览器中这些线将不会出现。在输入文字时，若一行文字的长度超过屏幕的显示范围，FrontPage会自动换行而不需另外使用其他按键。若要输入的是一篇很长的文章，就需要对文章做适当的段落排列以增加页面的可读性。在输入大量文字时，单击“Enter”键即可区分段落。,3更改文本的字体和颜色在一个应用了主题的网页中添加文本，文本会自动套用主题中正文的字体和颜色。如果没有应用主题，那么文本将会使用浏览器加载网页时使用的默认字体和颜色。如果需要更改文本的字体和颜色，可以选中文本，然后单击“格式”“字体”按钮打开字体对话框，如图13-4所示，在这里可以选择新的字体和颜色。,图13-4字体对话框,4创建项目符号和编号网页中的文本一般以段落为单位显示，并且段落之间没有标志和换行符。另一种组织网页文本的方式是将其转换为列表，列表是相关的项目群，每个项目可以是一段文本或是文本与其他网页元素的结合。网页中可以显示以下两种列表：(1)编号。每个项目前都有一个单独的号码。(2)项目符号。项目前为一个符号。通过单击“项目符号”按钮或者“编号”按钮就可以将文本转换为列表。,5创建表格在复杂的网页设计中，表格的应用是最多的。FrontPage2000借鉴了Word字处理软件的表格功能，并针对网页制作过程的一些特殊情况进行了处理，真正达到了“轻松制表”的目的。在FrontPage2000中创建表格有以下三种方法。1)用按钮插入表格使用常用工具栏中的“插入表格”按钮，可以按默认的布局方式快速地插入表格。具体步骤如下：(1)将插入点设置在要插入表格的位置。(2)单击常用工具栏上的“插入表格”按钮，然后向右下方拖动鼠标，如图13-5所示，在表格框中会显示表格的大小。,图13-5“插入表格”按钮,(3)松开鼠标，在插入点位置就会显示一张空白的表格。,2)用菜单命令插入表格使用菜单命令可以对插入的表格进行精确设置，包括行和列的数目、边框尺寸以及单元格宽度等设置。具体步骤如下：(1)将插入点设置在要插入表格的位置。(2)从“表格”菜单的“插入”子菜单中选择“表格”命令，出现“插入表格”对话框，如图13-6所示。(3)在图13-6所示的“大小”区域中的“行”和“列”栏中输入表格的行数和列数。,图13-6“插入表格”对话框,(4)在“布局”区域中可以设置表格的布局方式，包括表格的对齐方式、边框大小等。(5)单击“确定”按钮，则设置的表格将出现在插入点位置。,3)手动绘制表格如果要创建一个复杂的表格，可以用鼠标控制画笔随心所欲地绘制表格。具体步骤如下：(1)从“表格”菜单中选择“手绘表格”命令，显示“表格”工具栏，如图13-7所示。,图13-7“表格”工具栏,(2)在“表格”工具栏中单击“手绘表格”按钮(左边第一个按钮)，光标变为铅笔形状。(3)在要创建表格的位置按下鼠标左键的同时拖动光标，就会出现一条虚线标识出表格的轮廓。(4)当表格的大小合适时松开鼠标，则只有一个单元格的表格即出现在网页中。(5)在表格中将铅笔光标水平方向拖动会出现一条水平的虚线，待其撑满单元格时松开鼠标就会增加一个新行。重复该步骤可创建多行表格。(6)以同样的方法为表格添加列，直到表格创建完成。,表格被引入到HTML中不仅仅是为了显示一些表格数据，表格的另一主要用途是布局。表格可以控制网页信息的排列。可以将网页的不同元素甚至是另一表格放在表格中，这样创建起来的网页布局可以在任何浏览器、显示器和电脑中表现出相同的外观。FrontPage2000使用表格来实现这一目的，例如图13-8所示的飞鱼多媒体工作室网站的主页即是由表格布局的。,图13-8飞鱼多媒体工作室网站主页,6导入图片只有文字的网页会显得很单调，达不到所需的感官效果。因此在制作网页时，一般都要在页面上加入适当的图片。1)导入当前站点中的图片如果要插入的图片已经存在于当前的站点中，则可以在当前站点中直接导入图片，方法如下：(1)将插入点设置在要插入图片的位置;(2)从“插入”菜单的“图片”子菜单中选择“来自文件”命令;(3)此时出现“图片”对话框，当前站点中的所有图片都会显示在其文件列表中，如图13-9所示，从中选择所需的图片文件；,图13-9“选择文件”对话框,(4)单击“确定”按钮，则所选图片即出现在插入点位置。,2)导入剪贴画库中的图片同所有Office程序一样，FrontPage2000也支持剪贴画功能，可以从剪贴画库中导入图片，具体步骤如下：(1)将插入点设置在要插入图片的位置；(2)从“插入”菜单的“图片”子菜单中选择“剪贴画”命令，出现“剪贴画库”对话框;(3)选中“图片”选项卡，再选择所需的图片类别，例如选择“办公室”类别；(4)此时屏幕显示出“办公室”类别中的所有图片，单击要导入的图片，在出现的菜单中选择“插入剪辑”按钮，如图13-10所示。,图13-10插入剪辑,3)从计算机中选择图片文件也可以在计算机中的文件夹中选择图片将其插入到文档中，具体步骤如下：(1)将插入点设置在要插入图片的位置；(2)从“插入”菜单的“图片”子菜单中选择“来自文件”命令，出现“图片”对话框；(3)单击“从计算机上选择一个文件”按钮，出现“选择文件”对话框；(4)在“搜索”框中选择图片所在的文件夹，如图13-11所示；(5)在文件列表中选择所需的图片文件；(6)单击“确定”按钮，则选择的图片出现在插入点的位置。,图13-11在计算机中选择图片文件,7使用Web浏览器选择网页和文件在Internet上有许多专门搜集图片的站点，可以直接连接到这些站点去寻找图片，具体步骤如下：(1)从“插入”菜单的“图片”子菜单中选择“来自文件”命令，出现“图片”对话框;(2)单击“使用Web浏览器来选择网页和文件”按钮；(3)打开FrontPage2000预设的浏览器，通常是InternetExplorer和Netscape，在浏览器中，用鼠标将网页上的图片直接拖拽到所需位置即可；(4)在选定的图片上单击鼠标右键，然后在弹出的快捷菜单中选择“图片属性”命令，最后在“图片属性”对话框中给图片添加超链接和替代文本。,8编辑图片1)调整图片的大小插入图片的大小如果不符合页面的要求，可以在要调整的图片上单击一下鼠标选定图片，用鼠标按住图片四周的任一控点向外拖拽时，可放大图片；如果是向图片中心拖拽，则可以缩小图片。除了上述的方法外，FrontPage2000还提供了一种更精确的方法来调整图片的大小。在选定的图片上单击鼠标右键，在弹出的快捷菜单中选择“图片属性”命令，此时会出现“图片属性”对话框，如图13-12所示。选中“外观”选项卡，在“大小”区域中调整图片的大小参数。,图13-12“图片属性”对话框,改变图片大小时，只是调整图片的长和宽，此时图片可能会被拉变形。因此，如果不想改变图片原来的长宽比例，就要在对话框中选中“保持纵横比”复选框，这样图片就会根据原来的长宽比例来调整大小。另外，如果原来的图形很小，尽量不要将它放得太大，以免图片失真。,2)移动图片的位置如果要移动图片的位置，请先选定图片，再将图片拖拽到想要放置的位置，放开鼠标即可。在FrontPage2000中的图片是被看作一般的字体元素，无法自由地放置在页面上的任一个位置(只能放在文字之间)，所以当页面是完全空白即没有输入任何文字时，图片就无法进行移动操作。,3)使用图片工具栏在选定图片后，在编辑区的下方就会出现“图片”工具栏，如图13-13所示。下面的步骤中将说明各个工具按钮的使用及效果。,图13-13图片工具栏,4)在图片中加上文字选择要加入文字的图片，然后单击“图片”工具栏上的“文本”按钮，此时图片中即会出现文字框。直接在文字框中输入文字，输入完成后，单击文字框以外的地方即可关闭文字，如图13-14所示。注意：要在图片中加入文字，必须先将图片转换为GIF格式。,5)制作透明图在页面上选择一个图片，单击“图片”工具栏上的“设置透明的颜色”按钮，在所选图片的白色部分单击一下，图片就会变成透明的；如果这时再单击一下，图片又会恢复原状。,图13-14在图片中加上文字,6)剪裁图片选定要剪裁的图片，单击“图片”工具栏上的“剪裁”按钮，在图片上会出现一个剪裁框。首先按照调整图片大小的方法，拖拽剪裁框四周的控点，将剪裁框调整至适当大小，然后在常用工具栏中单击“剪裁”按钮，剪裁框外的图片部分将被裁掉。,7)冲蚀及黑白图使用“图片”工具栏中的“冲蚀”按钮及“黑白模式”按钮，可以将图片洗白或是转换成黑白图。可以调整图片的对比度及亮度，方法如下：使用“图片”工具栏中的“增加对比度”按钮可以增加图片的对比度。使用“图片”工具栏中的“减低对比度”按钮可以降低图片的对比度。使用“图片”工具栏中的“增加亮度”按钮可以增加图片亮度。使用“图片”工具栏中的“减低亮度”按钮可以降低图片亮度。注意：不论我们对图片做了多少操作，只要单击“图片”工具栏中的“还原”按钮，就可以将图片回复到保存文件时的形式，包括图片大小、颜色等等。,8)制作图片的凹凸效果在“图片”工具栏中单击“凹凸效果”按钮，图片的四周会产生斜角，使图片有“按钮”的效果。9)制作样本图在“图片”工具栏中单击“还原”按钮，可以将图片变成样本图，这样就能减少图片文件的大小，节省传输时间。,9加入动态GIF文件在网页中加入动态的GIF文件就是一种动态效果，它和其他的动态图片并没有什么不同。动态的GIF图片其实是站点中采用的一种主要的动画形式，这些GIF文件是由一些软件制作出来的，其中不仅仅包括图片，还含有关于图片显示顺序、每幅图片的显示时间、两幅图片之间的间隔以及循环方面的信息。在FrontPage2000中，这些文件的扩展名和其他的GIF文件一致，也是“.GIF”，这些文件同样可以导入、添加到网页中，并可重新调整大小。但在FrontPage2000中却不能对其进行编辑。这是因为对动态的GIF文件所做的编辑，其效果会使它还原为单独的图片。FrontPage2000为了避免此类问题的发生，将图片工具栏的颜色一律变为灰色，以表示编辑功能此时不能使用。,13.2FrontPage2000操作概览,1视图FrontPage2000的用户界面有六种不同的形式，根据所选择的视图方式而定，各种不同的视图提供了不同的工作方式。我们可以在图13-15所示的视图栏中选择视图方式。不同的视图进行不同的工作，下面介绍可以选择的视图方式。,图13-15“网页”视图,1)“网页”视图“网页”视图是FrontPage2000中最常用的工作界面，如图13-15所示。网页的创建、编辑、预览等基本操作都是在此视图中进行的。该视图窗口底部有三个标签：“普通”、“HTML”和“预览”，它们分别控制网页以普通方式、HTML方式进行编辑或是预览网页的效果。,2)“文件夹”视图在“文件夹”视图中，站点显示为一组文件和文件夹，如图13-16所示。“文件夹”视图对于站点的作用与Windows资源管理器对存储在硬盘上的文件的作用和操作基本相同。在“文件夹”视图中可以通过拖拽操作移动文件或文件夹。,图13-16“文件夹”视图,3)“报表”视图使用“报表”视图可以方便地了解当前站点的文件内容、更新链接情况、组件错误、所有文件列表及变化情况等信息。当需要得到有关站点文件的详细情况时请使用“报表”视图。图13-17显示了“报表”视图中的“站点总览”报表。若要显示其他内容，可在“报表”工具栏中的“报表”下拉列表中选择所需的报表。,图13-17“报表”视图,4)“导航”视图使用“导航”视图可方便地观察站点的链接结构，这个结构很像一个单位或组织的结构图，如图13-18所示。其中，主页位于顶部，其他的网页归入下面各层中。在该视图中可以很直观地浏览网站中各网页之间的链接关系，同时也可以通过拖动鼠标将结构图中的网页拖到新位置来改变链接结构。,图13-18“导航”视图,5)“超链接”视图“超链接”视图将当前站点显示为链接文件的一个网络，它们表示了站点中各个网页之间的相互链接关系(如图13-19所示)。“超链接”视图就像一个地图，表明站点中的超链接路径，显示来自和指向着眼点中的每一页的超链接。,图13-19“超链接”视图,6)“任务”视图“任务”视图主要用来创建和管理任务。在“任务”视图中列出了当前站点中的任务，即当前站点中尚未完成的项目，如图13-20所示。,图13-20“任务”视图,13.3用FrontPage2000建立一个网站实例,13.3.1创建新的站点启动FrontPage2000之后，就可以在其中建立一个新站点，或者打开一个存在的站点。如果要建立一个新站点，在“文件”菜单的“新建”子菜单中选择“站点”命令，打开“新建”对话框，该对话框中提供了8种建立新站点的方法，如图13-21所示。,图13-21“新建”对话框,(1)“只有一个网页的站点”模板：使用此模板可以建立一个只有一个空白网页的新站点。(2)“导入站点向导”：使用此向导可以从外部导入一个已经存在的站点。(3)“个人站点”模板：使用此模板可以建立一个包含个人兴趣爱好、照片和所喜爱的站点的个人站点。(4)“公司展示向导”：使用此向导可以建立一个由图形构成的公司站点。根据所选的选项，该站点内可以含有从产品目录、自由论坛到公司联系信息的任何内容。(5)“客户支持站点”模板：使用此模板可以建立一个能够使用Web来广播产品信息和帮助信息的站点，此模板适合于任一类型的商务需要。,(6)“空站点”模板：使用此模板将建立一个没有内容的站点。(7)“讨论站点向导”：使用此向导可以建立一个交互式的站点，在这个站点上，访问者可以公布其评论意见并阅读其他人对某一给定主题的回复。(8)“项目站点”模板：使用此模板可以建立包括一系列的成员、计划、状态、归档和讨论项目的综合站点。模板实际上是根据要求建立的标准的网页或站点。该软件包括48个不同的模板，它们使用当前站点发布者所通用的建立方式。,当模板选择完成之后，必须要指定站点的存储位置。站点可以存储于硬盘或网络服务器中。如果选择将站点存储于本地硬盘，将来还需要将站点传送到网络服务器上用以发布。此站点也叫做发布站点，因为它和出版书籍的过程相类似。站点必须要放在网络服务器上才能够被访问者访问。在将站点存储到网络服务器时，需要使用服务器的名称和密码。,为新站点选择好模板和存储位置后，FrontPage2000就会创建站点中所包含的所有网页以及所需的子目录。每一个内建的模板都包括“Private”和“Image”这两个子目录。“Image”子目录中包括站点中所有的图形文件。“Private”子目录中最初不包含任何文件，它可以用来存放那些不希望被访问者访问的文件。如果模板中包含有多个网页，那么主页应命名为“Index.htm”。,13.3.2在站点中应用主题作为一个站点发布者，一个最重要的任务就是制作站点的图形外观。它由以下几个方面决定(当然也还包含其他因素)：文本和超链接的颜色。背景图形的颜色。应用的字体。图形和导航栏。另外，还要做出一个选择：在所创建的站点中的各个网页之间，要决定是否采用一致的颜色方案。,图13-22“主题”对话框,13.3.3设计站点网页1创建站点网页在编辑网页之前，先要转换到FrontPage2000的网页视图模式下。FrontPage2000的每一个站点网页都是以模板开始的。如果想从零开始，可以选择普通网页模板。单击“文件”“新建”“网页”或是单击常用工具栏中的新建网页按钮，就可以建立一个新网页。当模板选择完毕，新的网页即会出现在网页视图中，这时就可以对其进行编辑。如果站点中没有应用主题，新网页将完全是空白的。如果未对网页做任何改动就关闭当前站点，那么FrontPage2000就会删除掉这个网页，但只要做过处理，FrontPage2000就会在关闭或预览之前确认是否保存这个网页。,2在网页中添加共享边框在FrontPage2000中，可以创建站点中所有网页通用的边框区域。单击“格式”“共享边框”，就可以看到目前正在使用什么边框。这时会弹出一个对话框，指出当前正在使用的共享边框，如图13-23所示。,图13-23共享边框,FrontPage2000中的站点可以共享上、下、左、右四个边框。尽管四个边框会使得网页的其他区域所剩无几，但它们一般被用来为导航栏、站点栏和版权提示提供空间。许多FrontPage2000内建的主题都使用左边框作为导航栏，它可以出现在站点的每一个网页中。,3为网页选择背景选择背景是装饰站点的一个好方法。背景可以是某种颜色，也可以是图形。选择“格式”“背景”选项，弹出“网页属性”对话框，选择“背景”选择卡，如图13-24所示。,图13-24为网页选择背景,如果需要使用背景图片，可以单击“浏览”按钮，然后在弹出的“文件”对话框中选择文件，但背景图片的格式必须是GIF、JPG、PNG中的一种。也可以用URL指定背景图片，但这样FrontPage2000就会使用一个不属于本站点的图片。如果在背景中使用颜色，需先取消对“背景”图片的选择，然后单击“背景”颜色下拉菜单进行选择。常用的FrontPage2000颜色选项对话框中有16种基本颜色可供选择。如果以上的颜色都不合适，可以选择“其他颜色”选项进行设置。,13.3.4网页保存和发布1发布站点的条件当我们精心建立了自己的Web站点后，就可以在Internet上发布自己的成果，以实现信息共享了。站点发布应该具备下面几个条件：1)与Internet连接不管是申请网页存放空间，还是发布网页，都必须先与Internet相连。可以通过电话和调制解调器与Internet相连，也可以通过局域网与Internet相连。,2)申请网页存放空间要申请一个网页存放空间来存放自己的站点，也就是说将自己的站点放到Web服务器上。在Internet上有很多地方可以提供免费的个人主页存放地。3)支持FrontPageServerExtensionFrontPageServerExtension(FrontPage服务器扩展程序)是一个支持FrontPage服务器工具的补丁程序。如果WWW服务器上提供了FrontPage服务器扩展程序，也就是说，WWW主机上安装了FrontPageServerExtension，那么发布的步骤会简单一些。否则，网页中设置的许多动态HTML将无法正确显示。,4)发布软件发布软件是指将网站由自己的计算机传送到Internet服务商所提供的网页存放地的过程。用于网页发布的软件很多，比如CuteFTP、WS-FTP，可