第三节-frontpageXP教程.ppt

Titel durch Klicken hinzufgenTitel durch Klicken hinzufgen,Klicken Sie,um die Textformatierung zu bearbeiten.,Ebene 1Zweite Zeile,Ebene 2Zweite Zeile,Ebene 3Zweite Zeile,Ebene 4Zweite Zeile,-,*,-,国际教育学院,专业技能课程,FrontPage XP,基础教程,FrontPage XP,基础教程,网页制作是什么？,网页制作就是根据网页效果图，把它实现成浏览器中可以浏览的网页。我们已经使用过或者听别人介绍过很多的网页制作工具。,FrontPage,，,Dreamweaver,这些都是我们平常所知道的网页设计软件，而,FrontPage,毫无疑问是一个简单易用，功能强大的网页制作工具。,如今,FrontPage,推出了新的版本，他依旧是和,Office,一起推出的，不过不同于以往的是，新版本,Office,系列软件不再是以年份来命名了，使用了新的命名方式，,MicroSoft,公司将其冠名为,Office XP,。所以我们下面介绍的就是,FrontPage XP,。毫无疑问，我们下面的网页制作过程将是一个不同于以往的全新的体验过程。,设计初步,新建站点,启动,FrontPage XP,，如果是第一次启动,FrontPage XP,时，会发现新版的,FrontPage,在用户界面上做了一些改动，在右边有一个几乎占据屏幕五分之一空间的任务窗（图一），集中了一些主要的命令，而这些任务命令会随着你操作的不同而改变。实际上，,Office XP,的每一个应用程序，从,Outlook,到,Publisher,，都有任务栏。,我们选择空白站点，因为我们需要建立的是一个站点，而不仅仅是一个页面，当然，我们在网站建立的过程中需要添加页面的时候，当然是选择建立一个空白页面了。然后弹出,Web,站点模版窗口，实际上又很多模版可供选择，如：个人站点，公司展示站点，客户支持站点等等，这些模板都是很不错的选择。为了简单起见，我们选择个人站点，图二就是用个人站点模版建立的站点的页面。,我们先切换到超链接视图状态看看,FrontPage XP,是如何设计整个站点的吧。,图中的树状结构列出了所有的页面，可以通过按加号和减号来扩展和收缩。右边列出当前页的连接，同样也可以通过按加号和减号来扩展和收缩。,FrontPage XP,基础教程,(2),基本要素,文字、超链接、图像,先新建一个页面吧，还是从一个空白的页面开始。,首先是对页面属性的设置，在网页上右键单击，选择网页属性，当然你也可以通过选择主菜单中的文件,-,属性，然后在弹出的对话框中就可以设置页面属性了，如图四。,FrontPage XP,基础教程,常规设置的是页面标题，位置，背景音乐以及使用的脚本等等；背景设置的是背景颜色，图片以及链接的颜色等等；边距设置的是页面边距等等；此外还可以设置自定义变量和语言选项等等。,文本在网站上的应用是最广泛的，一个内容充实的网站必然会用到大量的文本，而怎样编辑好这些文本成了摆在我们面前的第一问题。在以往的,HTML,编写中，经常要考虑文本前后的,HTML,标签，这实在是一种麻烦的事。不过在,FrontPage XP,中，这变成了一种简单的事情了。我们在页面中简单的添加几个字符，然后就可以通过工具栏中改变字符的属性等等，一切就像在,Word,中操作一样。（如图）,对于具体的字符属性设置，可以在选择要设置的字符以后点击右键，然后选择字体，你可以看到一个更加强劲的字体的设置选项。,如果觉得这样的设置不够规范，或者太烦了，自己懒的动手，,FrontPage XP,也为你提供了一种方便的方法,设置主题,(,格式,主题），在,FrontPage XP,中，用户可以使用的主题数有,67,个。每一个主题都有不同的外观和风格，包括按钮、背景、字体等。用户不仅可以在一个网页中采用一种主题，而且可以在整个网站中采用一种主题。而且，现在的,FrontPage XP,，拥有更多的可操作性，你可以随心所欲的修改这些主题风格。,当然，对于字符，我们也可以给他设置超级链接，选中字符以后点击右键，选择超链接，然后在超链接设置对话框中你可以发祥,FrontPage XP,的超链接设置比任何一个版本的,FrontPage,都要强，甚至于比,Dreamweaver,等工具强多了。,不仅可以设置当前文件夹，浏览过的页面以及近期使用的文件，而且可以是文档中的书签，新建文档，电子邮件地址，当然可以是直接的页面地址。我们在这里设置成,HTTP:/WWW.ZZULI.EDU.CN,FrontPage XP,基础教程,对于页面上的任何内容，我们可以加上动态,HTML,效果，选中打算加上效果的字符，图片等等，然后在主菜单中选择格式,-,动态,HTML,效果，然后就可以设置具体的,DHTML,效果了，格式是在（选择一种事件）应用（选择一种效果）（选择设置）。,FrontPage XP,基础教程,对于网页的过渡，在主菜单的格式,-,网页过渡中也可以设置。不要小看了这个小小的动态,HTML,效果和网页过渡，如果运用恰当的话，他可以为你的网页增色不少。,在网页设计上，图形并不只单纯地表达一项信息或意义，还可以表现一个网站的风格、加强网站的特色。,FrontPage XP,提供了很多绘画工具，习惯使用,Word,和,PowerPoint,用户一定不会对这些绘图工具感到陌生。用户还可以利用,Office,剪贴板把其它,Office,应用程序中制作的图片粘贴到,FrontPage XP,中。,FrontPage XP,中虽然不能直接制作现在网络上流行使用的,GIF,、,JPEG,等格式的文件，但是可以间接的插入其他软件制作好的文件。,上面我们介绍的是,FrontPage XP,中网页基本元素,文字，链接，图像文件的制作，从下面开始，我们介绍是,FrontPage XP,中的一些高级技术。虽然称为高级技术，不过他们在,FrontPage XP,中仍然是很容易就可以实现的。,FrontPage XP,基础教程,装饰一新,高级技术的使用,我们先在页面的最上方添加一个网页横幅，也就是在主菜单里选择插入,-,网页横幅，然后选择图片。然后我们在页面上可以看到这样一串字符“,将此网页添加到“导航”视图中，以便在此处显示网页横幅,”,，我们切换到导航视图，我们把页面从左边文件夹列表拖到右边的导航中，你可以看到有一条虚线出来了，这个表示的就是导航的位置。然后切换回页面视图，可以发现原来的字符已经变了模样。这里的“全新体验”是我们在前面设置的页面标题。,FrontPage XP,基础教程,FrontPage XP,中能插入的表单有所改善，能插入的表单类型如图十一所示，其中一些在其他网页制作工具里很难达到的效果都可以通过很简单的操作完成，如文件上载，试想想看，如果在,Dreamweaver,里面做这个效果，你会如何办了？在,FrontPage XP,里，当然简单了，你只需要点击一个按钮，然后剩下的一切操作都交给,FrontPage XP,了。,图十一的左下角显示的就是插入的文件上载的表单的显示，在选中这个表单以后通过表单属性就可以设置这个表单提交的内容是提交到一个文件，一个,Email,地址，或者直接放到数据库中，或者是提交给一个,ASP,等脚本文件，还可以通过选项来设置参数。,FrontPage XP,基础教程,表格在网页设计中的意义远非一般概念中的表格应用的理解，它最大的用处在于控制页面元素，使网页排版更加次序井然。除了动态,HTML,的层外，表格是唯一能将页面元素按设计者要求显示的工具。而,FrontPage XP,中的表格操作已经简单到了如同在,Word,中操作一样。如果你熟悉,Word,中表格的操作，那么,FrontPage XP,中的表格操作就很简单，如果不熟悉，那也没关系，因为它的确太简单了。关于表格的所有设置都在主菜单的表格设置中。如图十二所示。,FrontPage XP,基础教程,众所周知，,FrontPage,的每一个新版本都会推出新的或者增强功能的,WEB,组件，在,FrontPage XP,中也不例外，,FrontPage XP,的,WEB,组件是无可比拟，前所未闻的，通过这些功能强大的,WEB,组件，用户可以快速地在网页中加入高级技术。其中新增的部件包括图片库、链接条、保存到数据库、自动网页内容等。利用,FrontPage XP,的这些高级技术，用户不必进行复杂的编程就可以达到专业的效果，节省了很多时间。,除了上面这些新增的组件外，,FrontPage XP,还增加了一些新的工具，如：自动网页内容、活动讨论板、动态在线调查表、访问分析、,Top 10,列表、增强报告功能等等。,正是这些工具，使网站管理员的繁重工作变得轻松起来了。其中图片库的功能简单易用而又功能强大，下面我们看看图片库是如何使用的。,FrontPage XP,基础教程,在主菜单中选择插入,-WEB,组件,-,图片库，然后选择幻灯片版式。,FrontPage XP,中为我们提供了四种图片库版式，分别是：水平编排、蒙太奇编排、幻灯片式编排和竖直编排。这四种方式都是由,FrontPage XP,来创建缩略图的，不需要我们手工操作的。然后在图片库属性中，首先添加我们打算在这个页面中显示的图像，对于这些图像，我们可以事先定义他们在整个图象库中显示的顺序，就是通过上移、下移来达到。而且，对于每一副图片，我们都可以加上标题，而且我们可以定义这个标题显示的方式。,在主菜单的文件里面选择用浏览器预览，然后选择使用的浏览器和分辨率，点击预览，就可以在浏览器中看到我们的页面了。,FrontPage XP,基础教程,图十三 页面预览 可以看到，网页上方是预览小图片，下面是大图像。缩略图按行编排方式并可以左右滚动，而在上方选中的图片在下面的中央以完全尺寸显示。,在,FrontPage XP,中还有一些有用的网页工具，如重新计算超链接和网页优化。在以前版本中所说的,FrontPage,中页面臃肿庞大的情况在,FrontPage XP,中一无是处了，他们都不再存在了。你只需要执行一下网页优化，就可以在报告中看到你的网页已经变小很多了。在,FrontPage XP,只需要一个简单的点击就可以完成简体中文和繁体中文网页的相互转换。因此你不再需要为制作多语言网站的繁琐事情而烦劳了,打造一个天堂,一个高明的网页创作者，不仅希望能够创建出美观的页面，而且希望生成最精简和高效的,HTML,源代码。而这正是,FrontPage XP,带给你的一份礼物，你能够对网页源代码进行直接精确地控制，你能控制全局，你能感受到网页编写的所有乐趣。,FrontPage XP,俨然是一个活泼的精灵，它听你指挥，听你讲述每一个梦想。为你打造一个全新的天堂,!,FrontPage XP,基础教程,FrontPage XP,站点的建立与管理,启动,FrontPage XP,，选择菜单“文件,/,新建”，再单击“网页或站点”命令选项。在“新建网页或站点”任务窗格中，点击“根据模板新建”中的“,Web,站点模板”。,在打开的“,Web,站点模板”窗口中单击“指定新站点的位置”文本框下方的“浏览”按钮，在本地硬盘选择一个保存站点的文件夹。在左侧的站点选项卡中提供了多个站点的模板，此时可以根据自己的需要选择模板类型，这里选择“个人站点”模板，完成后单击“确定”按钮。此时系统开始创建整个站点，包括各种页面和页面主题等，同时会给出一个提示对话框显示进度。,FrontPage XP,基础教程,导航视图的使用,单击编辑窗口左侧的“导航”按钮可进入,FrontPage XP,的导航视图，在这里可以纵览网站的整体布局，并可以组织网页，创建当前站点的导航结构等。,首先我们执行菜单“视图,/,文件夹”命令打开文件夹列表窗口，然后在站点根目录下建立一个新网页。单击鼠标右键，执行“新建,/,网页”命令，并将此网页命名为,new.htm,(,如图,1),。,FrontPage XP,基础教程,完成后切换到导航视图，现在要将刚才创建的网页添加到当前导航结构中。单击“文件夹列表”中的网页，再将其拖动到结构中所需的位置，比如放在“兴趣”下面,(,如图,2),。如果要修改此网页的标题，可以用鼠标右键单击网页，再单击快捷菜单上的“重命名”即可修改当前网页的名称。,图,2,站点导航一目了然,在导航视图中还可以根据自己的需要移动网页站点内任何一个网页。移动网页的方法是，单击网页，再将其拖动到其他网页的下面或旁边即可。如果打算从导航视图中删除网页，可以单击网页后按下“,Del”,按钮。,FrontPage XP,基础教程,创建站点结构目录,我们可以根据站点的导航结构创建一个站点目录，该目录也可以包含导航结构中没有的具有超链接的网页。,首先打开刚才创建的网页,new.htm,，切换到网页视图，将插入点放在要创建目录的位置，然后执行“插入,/Web,组件”命令，在打开的对话框中，选择“目录”,(,如图,3),，并在右边的窗格中，选择“该,Web,站点”后单击“完成”按钮。,进入目录属性对话框后，在“目录初始点的网页,URL”,框中，输入作为目录起点的网页的相对,URL,，比如输入,index.htm,则表示从站点首页开始制作目录，完成后单击“确定”按钮即可在当前网页生成一份站点目录了。,FrontPage XP,基础教程,设计站点计数器,计数器可以统计并显示网页的访问次数。向网页中添加计数器的方法是，在网页视图中打开站点首页,index.htm,，将插入点放在要放置计数器的位置，然后执行“插入,/Web,组件”命令，在左边的窗格中选择“计数器”，并在右边窗格中选择计数器样式，最后单击“完成”按钮进入计数器参数设置对话框,(,如图,4),，选择一个计数器的图片样式，如果要将计数器设置成某个特定数字，可以选中“,Reset count to”,选项并输入一个数字即可。若要在计数器中显示固定位数的数字，可以选中“,Fix Number of digits”,选项，并设定相应的数值。最后单击“确定”按钮后，网页上就会显示计数器的占位符了。,FrontPage XP,基础教程,需要注意的是：计数器只有在发布到站点以后才能使用，而且要求站点必须发布到安装了,FrontPage Server Extensions,或,SharePoint,Team Services,的,Web,服务器上，这样才能正常使用,FrontPage,自定义的计数器。,FrontPage XP,基础教程,站点发布,我们可以使用,FrontPage XP,发布站点功能将自己的网站发布到,HTTP,或者,FTP,服务器上，下面以发布到,FTP,服务器为例，介绍一下发布的方法。,执行主菜单“文件,/,发布站点”命令，在“发布目标”对话框中，输入,FTP,服务器的,URL,地址，然后单击“确定”按钮，在接下来的对话框中输入你的用户名和口令并确定后，,FrontPage,即可开始将当前网站向服务器上发布，同时会出现一个发布站点对话框。,到站提示：站点的管理在网站的建设过程中是非常重要的一项工作，同时也有助于提高网站易维护性，提高网站的制作的效率。下一站我们谈谈如何用,FrontPage XP,来制作和编辑网站。,FrontPage XP,基础教程,FrontPage XP,基础教程,FrontPage XP,网页元素的制作,经过上面的学习，想必读者朋友们已经基本掌握了使用,FrontPage XP,建立和管理站点的方法，那么建立好一个站点以后，接下来的工作就是同学们最为关心的网页的制作和编辑了。我们知道，一个站点是由多个网页组成，一个网页又是由文字、图像、声音、视频、超链接等多种对象构成，这次我们就围绕网页元素的制作，来使用,FrontPage XP,一步步完成。,网页的创建,网页的创建有两种方法，一种是基于空白网页创建，另外一种就是基于,FrontPage XP,提供的网页模板快速建立。前者需要作者自己构造网页布局格式，后者无需自己构造网页布局，而只需修改网页模板中的元素即可。,基于空白网页创建网页时，点击“文件,/,新建”，再单击“网页或站点”命令，弹出“新建网页或站点”任务窗口，在“新建”之下，单击“空白网页”即可。,FrontPage XP,基础教程,基于网页模板快速建立网页时，点击“文件,/,新建”，再单击“网页或站点”命令，在“新建网页或站点”任务窗口中，在“根据模板新建”下单击“网页模板”命令。在“网页模板”对话框中，单击要使用的模板选项卡，比如“常规”选项卡，然后再单击需要使用的模板，同时在“预览”视图中会显示该模板的缩略图。最后单击“确定”按钮完成，,FronPage,XP,就会根据模板打开一个新网页了。,添加搜索引擎关键字,刚才已经建立好了一个网页，下面需要向网页中添加关键字，以使得那些能够识别关键字的搜索引擎更容易找到这个网页，从而增加浏览率。,单击“文件,/,属性”命令，打开“网页属性”对话框，单击“自定义”选项卡，在“用户变量”中单击“添加”按钮，会打开一个“系统变量”设置对话框，然后在“名称”文本框中，输入关键字的名称，比如“,xword,”,，然后在“值”文本框中，输入网站的搜索关键字，并使用逗号作为关键字之间的分隔符，最后单击“确定”按钮，如图,1,所示。,FrontPage XP,基础教程,设置边距与标题栏,如果自定义网页边距，右键单击网页，选择快捷菜单上的“网页属性”命令，进入“网页属性”对话框，然后单击“边距”选项卡，在这里可以设置网页的上、下边距，选中“指定上边距”复选框，然后在下面输入边距的高度值，如果选中“指定左边距”复选框，还需要在下面的数值框中输入网页左侧的距离值，如图所示。,在此对话框中的“常规”选项中，还可以设置网页的标题，标题可以与文件名不同，比如一个页面的文件名称为,Default.htm,，其标题可以是“我的主页”。此时在“标题”文本框中，输入要显示在网页横幅或链接栏中的文件标题文字，然后单击“确定”按钮即可，如图所示。,FrontPage XP,基础教程,应用网页主题,在“网页”视图中，打开要应用主题的网页，然后单击“格式,/,主题”命令，打开主题对话框。如果要将当前主题应用到当前被选网页，可以选择“所选的网页”选项，然后在主题列表中选择要应用的主题名称后，即可在“主题示例”之下预览，完成后单击“确定”按钮即可将当前被选主题应用到网页了。,当前网页应用主题后，网页将不再使用,Web,站点的默认主题设置，也就是说，应用到当前站点的任何主题更改都不会影响此网页主题。,插入图片,网页的制作是离不开图片的，我们来看一下如何在网页中添加图片。,在“网页”视图中，将插入点放在要插入图形的位置，然后点击“插入,/,图片,/,来自文件”命令，在打开的对话框中，选择需要的图像文件，然后单击“插入”按钮即可将图片插入到网页的当前位置。,选中刚才插入的图片，单击并拖动图形上的控点来调整其大小至合适。调整好图片的大小后，需要进行图片的环绕方式设置，在“网页”视图中，右键单击图片，然后单击快捷菜单上的“图片属性”，并选择“外观”选项卡，然后在“环绕样式”中，选择文本在图形周围的流动方式，然后在“布局”中选择图片的对齐方式，最后在“水平间距”和“垂直间距”框中，输入要在图形边缘的显示的间距，如图所示。,FrontPage XP,基础教程,超链接的设置,创建超链接的方法比较简单，首先可以选择需要制作链接的文本或图片，然后在工具栏单击“插入超链接”工具按钮，在打开的对话框中选择需要链接的网页或者文件即可，或者直接输入链接网址，比如,,，如图,5,所示。,此外，在网页中还有一种超链接方式，就是指向电子邮件，比如一些网页上经常有“给我写信”之类的链接，首先选中需要链接的文本或图片，然后单击“插入超链接”按钮，在打开的对话框中，选择“电子邮件地址”按钮，在“电子邮件地址”框中输入电子邮件地址，然后在“主题”框中，输入电子邮件邮件的主题。,经过以上几个步骤，一个网页就基本制作好了。,到站提示：经过以上几个步骤，对网页中的基本元素都进行了适当的编辑，使其更加符合你的风格。网页在制作过程中还有很多技巧，下面我们将从网页的布局讲起，介绍如何规划一个网页。,FrontPage XP,基础教程,FrontPage XP,的网页布局设计,制作一个漂亮的网页，离不开网页整体布局的设计，网页布局设计的合理与否，直接影响页面的美观。网页布局设计一般采用表格和框架，表格的使用相对来说就更加普遍了，这次我们就以表格和框架为例，来看一看如何安排网页的布局。,表格的使用,表格是由单元格按照行与列组成的，使用表格可以很好地将网页中的对象按格式编排，一般常用于页面内图片与文字的版面安排。,STEP 1,插入表格,新建一个空白网页，然后将插入点放在要插入表格的位置，执行菜单“表格,/,插入,/,表格”命令，打开插入表格对话框。在“行数”、“列数”框中分别输入,4,和,3,，在“对齐方式”框中选择表格在网页上的位置为默认，并在“边框粗细”框中输入表格边框宽度为,0,，即不需要表格边框。要改变单元格边框和内容之间的间距，可以在“单元格边距”框中输入数值，改变单元格之间的间距可以在“单元格间距”框中输入数值，如图,1,所示。,FrontPage XP,基础教程,STEP 2,表格的选择,在表格中的任意位置单击鼠标，然后执行菜单“表格,/,选择表格”命令即可选中整个表格。如果将插入点放在单元格中，执行“表格,/,选择,/,单元格”命令可以选择当前单元格。如果想一次选择多个单元格，先选中一个单元格，按住“,Ctrl”,键，再单击要选择的其他各单元格即可。,STEP 3,表格属性,在“网页”视图中，用鼠标右键单击表格，并从快捷菜单上选择“表格属性”命令，打开表格属性对话框，如图,2,所示。,在“对齐方式”下拉列表中选择表格在网页上的位置，比如“左对齐”。“浮动”选项用于指定文本是以什么方式绕表格排版，如果不需要文本绕表格排版，可以选择“默认”。此外，还可以改变单元格间距和单元格边距，以及表格的列宽和高度等。,在“边框”选项中，指定“大小”可以设置表格的边框宽度，如果不需要边框可以设置为,0,。“颜色”选项用于设置表格边框颜色，“亮边框”和“暗边框”可以为表格设置具有三维效果的双色边框，设置这两个参数的时候，要注意调节好颜色的取值。,在“背景”选项中，可以指定表格的背景色。如果打算在表格中显示背景图片，可以选择“使用背景图片”复选框，然后单击“浏览”按钮选择图片即可。,FrontPage XP,基础教程,STEP 4,巧用单元格,选择第,1,行第,2,列和第,1,行第,3,列两个单元格，然后单击鼠标右键，在快捷菜单上选择“合并单元格”命令，即可合并这两个单元格。然后将插入点定位在第,1,行第,1,列中，执行“插入,/,图片,/,来自文件”命令，插入网站的,logo,图标。接下来在第,1,行第,2,列中插入网站的,Banner,广告条。,选中表格第,2,行，将此行合并单元格，然后再单击鼠标右键，选择“拆分单元格”命令，在打开的对话框中，在“列数”右侧输入数值,5,，这样即可将此行单元格拆分成为,5,列。,选中此,5,列单元格，单击鼠标右键，执行“单元格属性”命令，在打开的对话框中，设置单元格“背景”颜色为浅灰色，如图,3,所示。最后在刚才设置的,5,个单元格中，分别输入网页的导航栏目名称，并为各个栏目设置好相应的链接。,同样道理，再合并其他单元格，并完成整个页面的制作。,FrontPage XP,基础教程,框架的使用,框架可以将浏览器窗口分成不同区域，每个区域都可以显示不同的网页。可以将一些框架中的内容永远保留在浏览器窗口中，而其余窗口则发生改变。,STEP 1,创建框架,执行菜单“文件,/,新建,/,网页或站点”命令，在打开的任务窗口中单击“网页模板”，然后选择“框架网页”选项卡，单击要使用的框架网页模板后，“确定”。,STEP 2,设置初始页,建立好框架后，即可进入框架设置界面。,单击各个框架中“设置初始网页”按钮，然后在文件夹中选择一个已创建的网页，即可在相应的框架中显示相应的网页。,此外，还可以单击“新建网页”按钮，此时,FrontPage XP,会自动在该框架中创建一个新的空白网页，这个新网页会被自动设成初始网页，读者朋友可以结合以前介绍的相关知识对框架空白网页进行设计。,框架可以作为网页布局中一项补充的工具，适当的运用可以使网页布局更加合理。,到站提示：要制作一个漂亮的网页，需要灵活运用网页布局工具，才能达到事半功倍的效果。下一站我们将在,FrontPage XP,中使用样式表,CCS,，通过样式表来给我们的主页增加特效。,FrontPage XP,基础教程,FrontPage XP,中使用样式表,FrontPage XP,可以保证用户设计网页与不同的浏览器兼容，它所提供的样式表,(CSS),功能就是其中之一。,FrontPage XP,使用样式表可以实现网页元素的加宽或紧缩字体间距、设置段落“缩进”和“段落间距”、设置边框和底纹等。,FrontPage XP,可以创建外部和内嵌式级联样式表，让我们一个一个来做。,创建外部,CSS,这是一种可以应用于多个网页的样式表，也就是说，使网站内的页面链接一个外部的样式表文件，其扩展名为,CSS,，这样就可以使多个页面使用同一个样式表文件，从而保持了整个页面的主题风格，编辑,CSS,文件可以在任意的文本处理程序中进行。在,FrontPage XP,中，提供了,CSS,文件的建立模板，可以根据需要定制自己感兴趣的模板样式。,FrontPage XP,基础教程,1,、建立样式,执行“文件,/,新建,/,网页或站点”命令，在“新建网页或站点”任务窗口中，在“根据模板新建”之下，单击“网页模板”，打开“网页模板”对话框。单击“样式表”选项卡，再单击要创建的,CSS,类型，比如垂柳样式，然后单击“确定”按钮。,此时，,FrontPage XP,会创建一个文件扩展名为,CSS,的新网页，并在“网页”视图模式中将其打开以供编辑，必须保存该网页才能在以后应用这个样式表文件。,创建,CSS,后会显示“样式”工具栏，如图,1,。在此工具栏上单击可以激活“样式”对话框。如果要修改已经保存的样式表文件，可以单击菜单“视图,/,文件夹”，然后在“文件夹”列表中双击要打开的,CSS,文件即可。,FrontPage XP,基础教程,2,、编辑样式,我们再来看看如何编辑样式。单击“样式”工具栏上的“样式”按钮或者在“格式”菜单上单击“样式”命令，进入“样式”对话框，如图。,在样式列表中，包含了多个样式，其中“,a:link,”,表示对链接文本有效，“,a:active,”,表示对激活链接有效，“,a:visited,”,对已访问文本有效，“,a:hover,”,表示当鼠标处于悬停状态时有效。,首先在左侧的“样式”框中，单击要修改的样式类型，比如“,a:link,”,，然后在下方的“列表”中选择“用户定义的样式”选项，需要注意的是，如果此时要修改标准,HTML,标记，可以选择“,HTML,标记”。接着在样式列表中双击“,a:link,”,样式，打开“修改样式”对话框，如图,3,。如果要设置对齐方式、缩进或段落间距，可以选择“段落”，设置边框和底纹可以选择“边框”，设置项目符号和编号的样式，可以选择“编号”。完成设置后，关闭所有对话框返回到,CSS,文件。这样我们就完成了一个样式的设置，可以将设置好的样式直接应用到网页文件指定的文字、段落中。,返回主界面后，执行菜单“文件,/,保存”命令，将此样式保存为,link.css,备用。,FrontPage XP,基础教程,创建内嵌式,CSS,在“网页”视图中，执行“格式,/,样式”命令，打开样式对话框，然后单击“新建”按钮，在“名称”框中输入新样式的名称为“,.pal”,，然后在“样式类型”下样式选择为“段落”。然后单击“格式”，再按照前面介绍的方法设置新样式的格式特征，比如字体、段落等。,应用样式,首先我们在“网页”视图中，打开需要应用样式表,(CSS),的网页，然后在“格式”菜单上，单击“样式表链接”，打开“链接样式表”对话框，单击“添加”按钮，在打开的“选择样式表”对话框中，选择刚才建立的,CSS,样式文件，单击“确定”后，即可将其添加在“,URL”,列表中。如果选中“所有网页”选项，可以将样式文件应用到网站所有网页中，选择“当前网页”只会在当前编辑网页中使用。另外，如果要将样式应用于网页上段落或者文字，首先可以选择要应用样式的文字，然后在工具栏的样式列表框中选择要应用的样式名称即可。,到站提示：样式在网页设计过程中比较常见，巧妙地使用样式不但可以使网页更加美观，而且还可以很好地规范站点中网页的显示效果。下一站，我们将利用,FrontPage XP,给我们的网页设计表单。,FrontPage XP,基础教程,表单在网站的制作过程中是比较常见的，举个简单的例子，我们在申请免费电子信箱或者个人主页时，需要填写一些个人信息，比如用户名、口令、密码提示信息等，收集这些信息的工具就是表单。常用表单的类型包括联系信息表单、请求表单、发货和付费方式的订购表单、反馈表单、搜索查询表单等。,制作搜索表单,对访问者来说，在一个大网站中查找文章会很不方便，这时我们可以创建一个搜索表单。执行“插入,/Web,组件”命令，打开“插入,Web,组件”对话框。在左侧窗口中选择“,Web,搜索”，在右侧窗口中选择“当前站点”，然后单击“完成”按钮打开“搜索表单属性”对话框，如图,1,所示。在“搜索表单属性”选项卡中将“输入框的标签”设置为“站内搜索：”。然后切换到“搜索结果”选项卡，设置显示查询结果时需要显示的信息和格式，选中“显示文件大小”和“选中文件日期”复选框，完成后“确定”，搜索表单就会出现在网页中了，如图,2,所示。需要注意的是，建立好的搜索表单需要发布以后才能正常工作。,FrontPage XP,基础教程,用向导创建表单,FrontPage XP,提供了表单创建向导，执行“文件,/,新建”命令，然后单击“网页或站点”，在“新建网页或站点”窗口中，在“根据模板新建”之下，单击“网页模板”，在打开的对话框中选择“常规”选项卡，并单击“表单网页向导”后“确定”。,进入表单向导后单击“下一步”按钮进入添加问题界面，单击“添加”按钮，在打开的对话框中，从“选择此问题要收集的输入类型”列表中选择需要访问者输入的数据类，比如“个人信息”，单击“下一步”按钮进入“个人信息”界面，选择需要访问者填写的信息内容，如图,3,所示。返回添加问题对话框后单击“下一步”进入“显示选项”对话框。在这里设置问题的显示类型，然后进入输出选项对话框。输出选项可以设置为,Web,或者文本文件格式，如图,4,，最后单击“下一步”按钮，完成表单设计。,FrontPage XP,基础教程,手工设计表单,执行主菜单“插入,/,表单,/,表单”命令，即可在当前页面插入一个新的表单，其中包括“提交”和“重置”两个按钮，还多出了一个虚线框，这个虚线框区域就是一个空表单，可以在这里添加表单字段。,执行主菜单“插入,/,表单,/,文本框”命令，一个新的文本框就被插入到当前表单了，然后在字段名称前输入字段名称的含义。同样，可在“插入,/,表单”菜单中选择不同的控件对象插入到当前表单中。,FrontPage XP,基础教程,双击文本框打开“文本框属性”对话框，在“名称”框中输入标识文本框的名称，如果希望访问者第一次打开表单时文本框中出现文本，可以在“初始值”框中输入要显示的文本内容，完成后在“宽度”中设置文本框宽度，最后单击“确定”按钮。此外，还可以向当前表单中插入复选框、下拉框、选项按钮等多种控件。,确认网页,访问者完成一个表单的填写并提交后，可以显示一个确认网页，用来显示访问者输入的内容。,首先新建立一个空白网页，设置其名称为“确认网页,.,htm,”,。然后打开一个已经建立好的表单网页，单击鼠标右键，选择“表单属性”命令打开“表单属性”对话框。,单击“选项”按钮，选择“确认网页”选项卡，单击“确认网页”文本框后的“浏览”按钮，选择“确认网页,.,htm,”,。然后切换到“保存的域”选项卡，这里会显示刚才制作的表单中对象的名字，单击“全部保存”按钮，最后“确定”返回表单，这样就把当前表单的确认网页指向了“确认网页,.,htm,”,。,FrontPage XP,基础教程,最后我们再在“确认网页,.,htm,”,中添加确认字段，执行“插入,/Web,组件”命令，在左边的窗口中单击“高级控件”，并在右边的窗口中双击“确认域”，然后“确定”，在“要确认的表单域名称”文本框中输入用来显示信息的域的名称，需要注意的是，此域的名称必须与设置表单域属性时为该表单域所赋的名称相匹配。每个要显示的表单都需要重复上述步骤。,使用,FrontPage,设计的表单需要发布到运行有,FrontPage Server Extensions,或,Microsoft,的,SharePoint,Team Services,的服务器上才能正常运行。,FrontPage XP,基础教程,用,FrontPage XP,做多媒体页面,给你的网页加上声音可以使它更具有吸引力，如果你现在正在做一个网页，想让大家来欣赏一下你的歌声，这样的效果一定不错吧。那该如何来实现呢？让我们先来了解一下,Frontpage,XP,支持的多种声音的格式文件，主要包括,MIDI,、,WAV,、,AIFF,和,AU,等声音格式。考虑到浏览器支持的问题，在实际使用中请尽量使用,MIDI,、,WAV,和,AU,格式的声音文件。,1.,在超链接中加入声音,在页面中输入一段文字，比如输入“我的歌”，选中后，现在就来建立超链接。点击鼠标右键，选弹出菜单中的“超链接”,(,如图,1),，在弹出对话框中的,URL,后的文本框中输入声音文件的,URL,地址，也可以单击浏览来选择，如图,1,中选择“爱下去,.MP3”,，然后单击“确定”按钮。网页发布之后，只要点击该链接，声音播放器就会开始播放该声音文件了。,FrontPage XP,基础教程,2.,为网页加上背景音乐,打开要加入背景音乐的网页，在网页任意一处单击鼠标右键，在快捷菜单中选择“网页属性”命令,(,如图,2),，在“网页属性”对话框中点击“常规”选项卡，在“位置”后的文本框中输入声音文件所在的地址，或是直接点击“浏览”按钮，在列表中选择声音文件，如果想设置声音的循环次数，就去掉“一直循环”前面的钩号，然后输入循环次数。设置好这些之后，单击“确定”按钮，完成对网页背景音乐的添加。,FrontPage XP,基础教程,3.,插入,Flash,动画,SWF,文件是,Flash,动画的一种常用格式，在,Frontpage,XP,中并不直接支持插入,SWF,格式的文件，我们可以通过一些修改而达到这个目的。这就需要在,Flash,动画中已经添加了音乐，要不就没有声音了。,首先打开一个页面，选择菜单中“插入组件高级,ActiveX”,命令,(,如图,3),，弹出“插入,ActiveX,控件”列表。然后点击“自定义”按钮，弹出对话框后，在列表中勾选“,Shockwave Flash Object”,控件。再单击“确定”按钮，在“插入,ActiveX,控件”的窗口中选择“,Shockwave Flash Object”,，这时“确定”按钮会以高亮显示，单击“确定”按钮。用鼠标双击网页中出现的白色矩形区域，会弹出“,ActiveX,控件属性”对话框，在“,Movie URL”,后的文本框中输入要插入的,Flash,动画文件的链接地址。在“,Quality”,后的下拉列表中选择,Flash,动画播放品质，一共有,5,种选项可供选择。在“,Scale”,后选择显示比例，我们选择“,Show All(,完全显示,)”,。在“,