第10章 FrontPage 2000网页制作.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,大学计算机,第,10,章,FrontPage2000,本章主要内容：,FrontPage 2000,的功能、启动及其主窗口的组成；,站点的创建、发布、删除、打开、关闭和文件夹结构；,网页的创建、打开和保存；,网页的设计、编辑，各种网页元素的制作方法和在网页中加入动态元素的操作。,主要内容,10.1 FrontPage 2000,概述,10.2 FrontPage 2000,站点和网页的基本操作,10.3 FrontPage 2000,网页的设计,结束,10.1 FrontPage 2000,概述,FrontPage 2000,的功能,FrontPage 2000,的启动,FrontPage 2000,的视图,返回,1.,创建和管理,Web,站点,FrontPage 2000,中创建和管理站点的主要功能有：设计站点的结构或布局；对站点中的网页应用主题，管理和组织站点中文件夹和文件；在站点中进行文件的输入、输出；测试和修复超链接；发布站点；跟踪任务等。,2.,制作网页,FrontPage 2000,可以创建、设计、编辑和测试网页，当在网页中加入文本、图片、表格和表单等网页元素时，,FrontPage 2000,对它们的显示方式就像在一个实际的,Web,浏览器中所看到的一样。,返回,10.1 FrontPage 2000,概述,FrontPage 2000,的启动,图,10-1 FrontPage 2000,主窗口,返回,FrontPage 2000,的视图,“网页“视图,“文件夹“视图,“报表”视图,“导航”视图,“超链接”视图,“任务”视图,返回,“网页“视图,工作区顶部标题栏显示当前编辑的网页名称，默认名称为,“,new_page_1.htm,”,。工作区有三种状态，分别是,“,普通,”,、,“,HTML,”,和,“,预览,”,。网页编辑的默认状态是,“,普通,”,状态，一般用户在此状态下进行编辑。,“,HTML,”,状态下显示网页的,HTML,文本，一般适用需要使用,HTML,标记语言进行高级编辑的用户。,“,预览,”,状态下可以对编辑好的网页进行浏览，就像在浏览器中显示一样。,返回,“文件夹“视图,图,10-2,文件夹视图,返回,“报表”视图,图,10-3“,报表”视图,返回,“导航”视图,导航视图由若干个导航图框组成，每个图框代表一个网页文件，用户可以清晰地看到,Web,站点的主页、从页之间的逻辑关系。为了构造新的组织结构，可在导航视图内选择图框后，单击工具栏中,“,新建网页,”,按钮，新建立的网页将出现在所选图框的下方。拖动图框将改变站点的逻辑结构。若图框内包含下级网页，那么图框的名称下将显示,“,+,”,或,“,-,”,符号，分别表示折叠或展开状态。,返回,“超链接”视图,超链接不仅把站点内的网页链接在一起，而且还与,Web,上的站点相链接。超链接视图用箭头形象地显示出网页之间的链接关系，单击其中的超链接时，将自动进入与之链接的网页。右击链接视图图标之后，在快捷菜单里选择,“,移至中央,”,命令，可使该图标移动至视图窗格的中央位置，并显示其链接关系。,返回,“任务”视图,所谓任务就是计划好要完成的页面编辑、站点维护等工作。用户在建立站点时，往往有很多事情需要做，为防止忘记或漏掉，可以把它们作为任务添加到任务视图中进行管理。即使是建成的站点也需要不断地进行更新和维护，通过任务视图，可以将待完成的工作记录下来，以免遗漏。,返回,10.2 FrontPage 2000,站点和网页的基本操作,站点的基本操作,网页的基本操作,设计站点的风格,站点的发布,返回,站点的基本操作,站点的管理、更新、维护是,FrontPage 2000,的主要功能，它允许用户在其它应用程序中编辑网页，然后引入到当前站点内，从而丰富了网页的制作手段。,1.,创建站点,2.,站点的打开、关闭与删除,返回,网页的基本操作,1.,创建新的网页,2.,打开已有的网页,3.,设置网页基本属性,4.,保存网页,返回,1.,创建新的网页,图,10-6,新建网页对话框,返回,2.,打开已有的网页,图,10-7“,打开文件”对话,框,FrontPage2000,不但可以打开本地磁盘上的网页，还可以打开任何位置上的网页，甚至可以从一个,Web,站点上获取网页。,FrontPage2000,可以识别多种非,HTML,格式文件，还可以将其转换成,HTML,格式文件，并保持原文件的元素格式不变。,（,1,）选择“文件”菜单上的“打开”命令，或者单击常用工具栏上的“打开”按钮，出现“打开文件”对话框，如图,10-7,所示。,（,2,）在“打开文件”对话框中，默认的情况是从当前站点中打开一个网页，在文件列表中已经列出了当前站点中的所有网页文件。,返回,3.,设置网页基本属性,在图,10-8,对话框中有,6,个选项卡，分别是：常规、背景、边距、自定义、语言和工作组。以下简单介绍“常规”和“背景”选项卡中包含的部分属性。,(1),在“常规”选项卡“位置”文本框中，显示出当前网页的完整,URL,。如果当前网页尚未被保存，那么将会显示,unsaved:/,new_page_n.htm,。在“标题”文本框中显示的是当前网页的标题，可以给网页设置一个新的标题。,(2),在“背景”选项卡中，可以对网页的背景图片、背景颜色、文本颜色、超链接颜色等进行设置。,图,10-8“,网页属性”对话,框,返回,设计站点的风格,1.,主题,2.,共享边框,3.,导航栏,返回,1.,主题,主题是,FrontPage2000,提供的网页样式模板，它统一定义了网页中元素的外观和配色方案，包括对列表项标记、文本字体、图片、导航条和其他网页元素的统一设计。,可以在新建网页时加入主题，也可以在编辑已有网页时加入。,图,10-9“,主题”对话框,返回,2.,共享边框,共享边框是站点上一个或多个网页共享的区域，在浏览具有共享边框的网页时，该区域是始终不变的，这样将使网页具有一致的外观和风格。,使用共享边框的优点在于只需要在一处修改内容就可以更新所有网页。利用这个特性，我们可以在共享边框中添加网页中共有的内容，如站点名称，使站点名称在每个网页中都出现。,图,10-10“,共享边框”对话框,返回,3.,导航栏,导航栏是一组排列在网站主要网页上的超链接，每个链接由网站中主要网页的标题来代表。如果在每个网页上显示一个导航栏，就可以使站点的浏览者方便快捷地转向站点的主要网页。,注意：不能在独立的网页上创建导航栏。,图,10-11“,导航栏”对话框,返回,10.2.4,站点的发布,发布站点基本上就是把站点中的文件复制到服务器上，当将所有的网页和文件传送到服务器时，会自动校验网页的地址和文件的相对路径。如果目标服务器上安装了,FrontPage,服务器扩展，那么就可以使用,HTTP,来发布站点，而且所发布的站点将支持所有的,FrontPage,特征；否则，某些,FrontPage,组件（如,FrontPage,表单处理程序）将失效。另外，如果在服务器上没有安装,FrontPage,服务器扩展，在发布站点时会启动,Web Publishing Wizard,（,Web,发布向导），它利用,FTP,（文件传输协议）将站点发布到服务器上。,图,10-12“,发布站点”对话框,返回,10.3 FrontPage 2000,网页的设计,网页中的文本编辑,网页中的图片操作,网页中的表格操作,网页中的超链接与书签,网页中的表单,创建具有框架结构的网页,在网页中加入动态元素,返回,10.3.1,网页中的文本编辑,1.,设置文本与段落的格式,2.,插入水平线,3.,创建和编辑列表,返回,1.,设置文本与段落的格式,在,FrontPage2000,中，可以使用菜单命令、工具栏按钮和快捷键来进行文本编辑和格式化操作，这与在,Word,中的操作极为类似，在这里不再赘述。,需要指出的是，在网页中显示的文本是不会自动换行的，若要换行则需要按,Shift+Enter,键插入换行符（无空白行，若按回车则有空白行）,返回,2.,插入水平线,水平线用于分割网页中的不同内容，可以把网页划分成不同的主题部分。在,FrontPage2000,中，选择“插入”菜单上的“水平线”命令，就可以在当前位置插入一条水平线，它的属性是默认设置的，可以按照下面的方法修改其属性。因为水平线是独占一行的网页元素，因此如果当前位置是在行尾，水平线将被自动插入到下一行。如果当前位置是在一行文本的中间，那么水平线将把这一行文本“劈”为两个段落。,返回,3.,创建和编辑列表,列表的创建方式与,Word,相似：把光标移到需要建立列表的地方，选择“格式”菜单中的“项目符号和编号”，弹出如图,10-15,所示的“列表属性”对话框。,(1),如果以图像作为列表中的项目符号，则在“图片项目符号”选项卡中选择“指定图片”单选按钮，并输入图片文件的路径和名称。,(2),如果以小圆（方）点作为列表的项目符号，则在“无格式项目列表”选项卡中选择相应的符号。,(3),如果以编号作为列表的项目符号，则在“编号”选项卡中选择相应的编号类型。,图,10-15“,列表属性”对话框,返回,10.3.2,网页中的图片操作,1.,插入图片,2.,设置图片属性,3.,利用图片工具栏编辑图片,4.,保存包含图片的网页,返回,1.,插入图片,向网页中插入的图片文件可以是以下几种格式：,GIF,、,JPEG,、,BMP,、,PNG,、,TIF,、,MSP,、,RAS,等。其中,GIF,、,JPEG,和,PNG,格式的图片都经过压缩，对资源的要求少。如果向网页中插入的图片不是,GIF,或,JPEG,格式，,FrontPage2000,会自动将它转换成,GIF,格式（对,8,位或少于,8,位颜色的图片）或,JPEG,格式（对超过,8,位颜色的图片）。,在,FrontPage,编辑窗口中插入图片的操作方法与在,Word,文档中插入图片的方法类似,返回,2.,设置图片属性,“图片属性”对话框中有“常规”、“视频”和“外观”,3,个选项卡。,在“常规”选项卡中，可以设置图片的来源，即用新的图片替代当前图片。在类型选项中可以选择以何种格式保存图片。,在“外观”选项卡中，可以设置图片的大小、布局。,在“视频”选项卡中，可以在网页中插入一段视频剪辑,-AVI,格式的文件。,返回,3.,利用图片工具栏编辑图片,可以使用图片工具栏编辑图片，显示和隐藏图片工具栏的操作与,Word,中的操作相同，但工具栏上的按钮要丰富得多。,4.,保存包含图片的网页,保存包含图片的网页时，不仅要将网页作为一个文件保存，而且也要将图片文件单独保存起来。如果图片是当前站点下的文件，保存网页时不会出现提示。,返回,10.3.3,网页中的表格操作,1.,创建和编辑表格,2.,设置表格属性,返回,1.,创建和编辑表格,同,Word,一样，,FrontPage2000,中表格的创建也有两种方法：插入表格和手绘表格。其操作方法与,Word,类似，在这里不再赘述，读者可以参考前面的章节。,与,Word,不同的是创建表格标题。当在网页中创建了表格后，可以插入表格标题，具体操作是：打开“表格”菜单,在“插入”子菜单中选择“标题”命令，便可以在网页中当前表格上方创建表格标题。,返回,2.,设置表格属性,网页中表格可以设置的属性主要涉及标题、对齐方式、边框、单元格边距与间距以及表格与单元格背景等。,(1),标题属性,鼠标右键单击标题，从快捷菜单中选择“标题属性”命令，弹出“标题属性”对话框。可以选择将标题放在表格顶部或表格底部。,(2),表格属性,可以设置表格的大小：指定宽度和指定高度；设置对齐方式,默认是左对齐；设置单元格边距和间距；设置边框线条的粗细与颜色，当边框线条的粗细设为,0,时，在,Web,浏览器中不显示边框；设置表格背景，可以采用一种颜色作为背景，也可以用图片作为背景。,返回,图,10-18“,表格属性”对话框,10.3.4,网页中的超链接与书签,在,Web,浏览器中只要单击任意一个超链接，就会打开一个新的对象。这个对象可能是一个新的网页、一幅图片、一个程序或当前网页中的某个位置等等。如果是当前网页中的某个位置，则说明在该位置上已经建立了一个书签。,1.,文本（图片）超链接的建立与设置,2.,图片热点区域,3.,书签,返回,（,1,）、在,URL,区域输入网址。,（,2,）、超链接中，链接目标的,URL,除了可以直接输入外还可以采用以下几种方式获得：,链接到当前站点中的文件。,单击按钮 ，使用,Web,浏览器来选择网页或文件。单击该按钮后将打开浏览器，从中找出需要链接的网页或文件，但不要关闭浏览器，然后激活,FrontPage,，此时在“创建超链接”对话框的,URL,中就会显示该网址。,单击按钮，制作一个指向本地计算机上文件的超链接。单击该按钮后将打开“选择文件”对话框，此时可以选择本地计算机上任意位置下的文件。,单击按钮，可以制作发送电子邮件的超链接。当单击此超链接时默认是打开,Microsoft Outlook Express,发送电子邮件。,单击按钮，将新建一个网页并链接到该网页。,1.,文本（图片）超链接的建立与设置,图,10-20“,创建超链接”对话框,返回,2.,图片热点区域,图片热点区域是指在一幅图片上创建多个超链接点，不同的区域对应不同的超链接。一般常用于地图或产品的介绍等。如每个省是一个热点区域，分别对应不同的链接。,返回,3.,书签,书签与超链接是密不可分的。超链接用来指向不同的网页或文件，当用户在网页或文件间跳转时，超链接起导航作用。书签是指一个网页文件不同位置的标识，在网页浏览中起定位作用。当用户在浏览器中单击指向这些书签的超链接时，浏览器不但会载入相应的网页，而且会滚动屏幕到书签所在的位置。,返回,10.3.5,网页中的表单,表单是网页中对信息进行收集的载体，它使,Web,站点具有交互功能，不再仅仅是信息发布的载体。通过表单可以对用户提交的信息进行组织与处理，然后再对用户发出反馈信息。在表单中可以包含文本、图片、表格和大多数可以在网页中插入的其他对象。,FrontPage2000,为许多常规应用提供了内建的表单处理程序，可以把用户输入的各种数据传送给服务器端，服务器使用这些处理程序来处理用户的请求，并动态地生成,HTML,文件，最终对用户的请求做出响应。,返回,10.3.6,创建具有框架结构的网页,框架结构的网页将浏览器的显示窗口分成多个区域，每个区域称为一个框架，在每个框架中可以包含一个独立的、能够滚动的网页。使用框架网页，可以使得在,Web,浏览器中某个显示区域的内容保持不变，而其他区域显示的内容可根据用户所选择的超链接而改变。,图,10-24,具有三个框架的框架网页,返回,10.3.7,在网页中加入动态元素,网页中的动态元素包括：动态按钮、滚动字幕等，它们可以使网页变得生动、活泼。这种含有动态元素的网页称为动态网页。,1.,悬停按钮,2.,字幕,返回,1.,悬停按钮,悬停按钮从外观上看更像是一幅平面图片，而不是立体的按钮。要使悬停按钮实现某些规定的动作（比如当用户将鼠标移到按钮图片上时自动改变颜色），并不需要进行编程，只需在相应的对话框中进行一些设置即可。,返回,2.,字幕,字幕是用来设置一些简短文本信息，这些信息可以在设置好的位置滚动显示，从而引起浏览者的注意。,返回,谢谢！,结束,