当前位置: 首页 > 软件教程 > 第9章 网页制作软件FrontPage 2002

第9章 网页制作软件FrontPage 2002

2011年10月25日 09:18:41 来源:濮阳市濮阳县兴濮中学 访问量:1298
第9章 网页制作软件FrontPage 2002
Internet上的信息大多是通过浏览器以网页的形式显示给大家的。网页的编辑方法很多,可以使用文本编辑器(如Windows的“记事本”),用书写HTML语言的方式来创建网页;也可使用专门的网页设计工具来编辑。常见的网页编辑软件有Microsoft FrontPage、Macromedia Dreamweaver等。本章主要介绍当今最流行的“所见即所得”的网页制作工具FrontPage 2002。
9.1  网页与网站概述
9.1.1 网页的基本概念
网页一般由文字和图片构成,复杂一些的网页还会有声音、图像、动画等多媒体内容。网页实际是一个文件,存放在某一台计算机中,而这台计算机必须是与互联网相连的。网页经由网址(URL)来识别与存取,当在浏览器输入网址后,网页文件会被传送到本地计算机,然后通过浏览器解释网页的内容,展示在浏览者眼前。几乎所有的网页都包含链接,每个超链接可以指定一个网络地址、一个网页或其他文档等,当单击某个网页的超级链接时,浏览器就会显示与其相关联的网页、文件或是相关网站。
网页的学名称作HTML文件,HTML的意思是“Hypertext Markup Language”,中文翻译为“超文本标记语言”,网页就是由HTML语言编写出来的。HTML语言只是一种标记语言,是一种可以在WWW网上传输,并被浏览器认识和翻译成页面显示出来的文件。在网页上单击鼠标右键,选择“查看源文件”项,就可通过记事本看到网页的实际内容。看到网页实际上只是一个纯文本文件,它通过各式各样的标记对页面上的文字、图片、表格、声音等元素进行描述(例如字体、颜色、大小),而浏览器则对这些标记进行解释并生成页面。
9.1.2 网站的规划设计
由于单个网页提供的信息量较少,如需提供更加详细的信息,则需要大量的网页,并且这些网页要相互关联(链接),便于查找,因此必须建立网站。通常一个网站是由众多不同内容的网页组成的,网页是网站的基本信息单位。不论是正规的商业网站还是个人网站,如果想网页丰富多彩,吸引大量用户前来访问,网站的规划设计是至关重要的。网站规划通常包括网站设计目标、网页内容的分类、网站结构、网站的表现方式,还有就是网站的发布和测试(这部分将在后面章节介绍)等。
1.网站设计目标及内容的规划
(1) 网站设计的目标
确定网站设计的目标也就是确定网站的主题。建立网站之前要有明确的目标,如:网站的作用、服务的对象、提供哪些服务等。有了目标就可以确定网站的主题了,所选主题要有立意,为目标而服务,例如:电子商务网站(提供商品服务)、网络原创文学网站(发表网络文学作品)、个人主页(展示个人风采)、电子出版物网站(提供在线阅读或订阅电子报刊)、博客网站(发布网络日志)等都是可选的网站类型。
(2) 网站内容的规划
网站内容的规划是围绕着主题进行的,包含有网站资料的收集整理以及网站栏目的设置。网站的素材除了根据需要自己创作的以外,也可以通过搜索引擎在Internet上收集各种与主题相关的素材,包括有文字,图片、声音、动画等。收集到的这些素材,还可以通过不同的处理工具如Photoshop、Flash等将其处理加工成所需的素材,放在资源库中。在组织网站内容时,必须简洁明了,直奔主题,非常有效地讲清楚想表达的内容。不同类别的网站,在内容方面差别很大,因此,网站内容规划没有固定的格式,需根据不同的网站类型来制订。例如:电子商务类网站要提供会员注册、详细的商品服务信息、信息搜索查询、定单确认、付款、个人信息保密措施、相关帮助等。网站栏目的设置一定要突出重点,方便用户。网站的栏目实质是一个网站内容的大纲索引,就好比一本书的目录,集中了各个章节的名称及页码,索引应该引导浏览者寻找网站里最主要有用的东西。在设置栏目时,要仔细考虑内容的轻重缓急,合理安排,突出重点。
2.网站的结构
(1) 网站文件的目录结构
网站的目录是指建立网站时创建的文件夹目录。如果没有对整个站点的结构进行认真的研究就匆匆上马,日后的维护工作将会很大,网页的布局也会杂乱无章、风格各异。因此,一开始就要精心规划好整个站点,把站点资源分门别类,存于不同的文件夹中,便于日后的维护与管理。如图9-1所示,是一个简单的站点文件夹结构。

9-1 站点结构
在此站点结构中,文件夹一般要用便于记忆的英文单词或缩写来命名,不要用中文名字(图9-1中文件夹名字右面括号里的中文是作者添加的说明,实际建立文件夹目录时请不要写中文)。对应文件夹名字应该存放相应的文件,如page文件夹用来存放网页,data文件夹则存放数据库方面的内容,images文件夹用来放置网页中用到的图片,temp文件夹则存放一些暂时不用的文件,这样便于查找和管理网站的文件。另外在需要的情况下,也可以创建下一级的子文件夹,但一般不超过三级为好,否则管理起来不方便。

(2) 网站中网页的链接结构
网站的链接结构是指页面之间相互链接的拓扑结构。它建立在目录结构基础之上,但可以跨越目录。形象的说:每个页面都是一个固定点,链接则是在两个固定点之间的连线。一个点可以和一个点连接,也可以和多个点连接。更重要的是,这些点并不是分布在一个平面上,而是存在于一个立体的空间中。

图9-2 分级结构图
链接结构的设计,在实际的网页制作中是非常重要一环。采用什么样的链接结构直接影响到版面的布局。常用的结构类型有:

分级结构
分级结构类似于目录系统的树型结构,由网站文件的主页开始,依次划分为一级标题、二级标题等等,逐渐细分,直到提供给浏览者具体信息。在分级结构中,主页是对整个网站文件的概括和归纳,同时提供了与下一级的链接。分级结构具有很强的层次性。如图9-2所示,就是一个网站的分级结构图。
线性结构
线性结构类似于数据结构中的线性表,用于组织本身的线性顺序形式存在的信息,可以引导浏览者按部就班地浏览整个网站文件。这种结构一般都用在意义平行的页面上。
           
图9-3 线性结构和分级结构
如图9-3(左图)所示,是网站的线性结构图。通常网站的链接结构是分级结构和线性结构相结合的,如图9-3(右图)所示,就是网站的分级结构和线性结构结合图,这样可以充分利用两种结构各自的特点,使网站结构更具有条理性、规范性,浏览起来更方便。
图9-4 Web结构图
Web结构
Web结构类似于Internet的组成结构,各网页之间形成网状连接,允许浏览者随意浏览。图9-4是Web结构图,在网站规划时,应该根据需要选择合适的网站结构
3.网站的外观设计
网站的外观设计就是整体形象的设计,包括站点CI(标志,色彩,字体,标语)、版面布局、浏览方式、交互性等诸多因素。
给网站设计一个Logo图标,这样能使浏览者一看图标都知道在什么网站。图标应放在显眼的位置上,如网页的页眉或页脚上,也可做背景,并尽量在每个页面上出现。如图9-5所示,就是两个网站的标志。
        
图9-5 两个网站标志
网站中文字的链接色彩,图片的主色彩,背景色,边框等色彩应尽量使用与标准色彩一致的色彩。在关键的标题、菜单、图片里使用统一的标准字体。
为了统一网站的外观设计,在规划站点时应考虑模板和库的使用。网页制作软件FrontPage、Dreamweaver等都提供了模板和库的设计功能,可以在不同的文档中重用页面布局和页面元素。例如,如果网站中很多网页使用相同的布局,就可使用创建模板功能为这些布局相同的网页设计一个模板,然后以该模板为基础创建新的网页。当要修改这些网页的布局时,只要修改模板就可以了,对模板的修改将反映到所有应用该模板的网页上。
如果有某一页面元素(如一幅图像)将在网站的很多网页中使用,应该先设计好该元素,并把他存入库中,然后在网页上调用他。当要修改该元素时,只要修改库中该元素即可,修改后的元素将出现在所有调用他的网页上,免除了逐页修改的麻烦。
另外,做站点规划时,要考虑站点导航系统的设计。浏览者进入网站的主要目的,就是要在网站中找到他所需的信息。这就要求我们在网站设计时合理设置好导航栏,帮助浏览者寻找到所要的信息,而且还要清楚地知道现在处在网站的什么位置,怎样返回到顶层页面。在规模较大的网站中,还应该设立搜索功能和索引,让浏览者很快找到所需的信息。还要提供一种反馈渠道,让浏览者能够与网站管理员或与本网站有关的其他人联系。
9.2 FrontPage 2002简介
FrontPage 2002(以下简称FrontPage)是微软开发的Office XP套件之一,用于创建、编辑和发布网页。它的主要功能有:网页编辑、站点管理、Web数据库的发布、图片库、跨浏览器的增强绘图工具、为Intranet或Internet用户建立工作组Web站点等。尽管用于制作网页的软件很多,但是FrontPage相对来说是最容易学习也最容易掌握的,使用它可以制作出具有专业水准的网页,让人刮目相看。
9.2.1 FrontPage的界面
1.启动FrontPage
启动FrontPage和启动Office的其他工具一样,可单击任务栏的【开始】→【程序】→【Microsoft FrontPage】,打开FrontPage窗口。FrontPage主界面是由标题栏、菜单栏、常用工具栏、视图栏、编辑区、任务窗格和状态栏构成,如图9-6所示。
视图栏位于窗口的左侧,由“网页”、“文件夹”、“报表”、“导航”、“超链接”、“任务”视图按钮组成。通过这些按钮可以方便地在各种视图之间切换,以不同方式查看站点的内容和组织结构。中间的编辑区是用来编辑网页的各种元素的,在同一个窗口中可以打开多个网页如new_page_1.htm、new_page_2.htm、new_page_3.htm等,点击标签,可以从一个网页转换到另一个网页。当往网页里粘贴内容的时候,可以选择是否保持原来的格式,或者去除粘贴内容的所有格式,用纯文本格式来粘贴,而这个选择粘贴的格式是通过“智能标签”来达到的,这一智能标签能显示快捷方式,如图9-6所示。它在很大程度上提高了工作效率。右边任务窗格主要功能包括:打开和新建网页、查看剪贴板的内容、搜索、模板管理等。
图9-6 FrontPage编辑器界面
2.退出FrontPage
当需要退出FrontPage结束其操作时,选择菜单【文件】→【退出】,或单击FrontPage标题栏目右上角的“关闭”按钮。在关闭FrontPage窗口时,如果有些文档没保存,则会出现提示窗口,询问是否保存网页,请注意保存每一个打开或修改过的网页。
9.2.2 FrontPage的视图方式
在FrontPage中可以使用不同视图方式从不同的角度浏览网站中有哪些文件以及网站的结构和层次关系。可以使用“视图”菜单进行视图方式的切换,也可以选择菜单【视图】→【视图栏】,显示或隐藏视图栏方式。在视图栏中有六个按钮,如图9-6所示,是用来在不同的视图方式之间进行切换的。下面简单介绍这些视图方式的功用:
1.网页视图方式
启动FrontPage后,以默认方式打开网页视图,显示一个名为new_page_1.htm的新网页,这种方式主要用于网页的编辑和修改。网页视图方式又分为三种显示模式即普通模式、HTML模式和预览模式,如图9-7所示。
   
(a)普通模式                     (b)HTML模式                   (c)预览模式
图9-7 网页视图模式
(1) 普通模式:可以“所见即所得”的方式进行网页编辑操作,像在Word 中那样直接键入文字并编排文字的格式,插入图像及各种网页元素,在编辑框中看到的网页与Web浏览器中看到的实际网页基本相同。如图9-7(a)所示。
(2) HTML模式:直接用HTML语言来描述网页,可以查看和修改网页的源代码。熟悉HTML语言的人可以直接用之编写网页。如图9-7(b)所示。
(3) 预览模式:可以随时切换到预览方式,查看网页浏览时的实际效果,并可提前发现一些完全能避免的错误。如图9-7(c)所示。
2.文件夹视图方式
在文件夹视图下,可以对站点中的文件夹和各种文件进行管理。像Windows资源管理器一样,可以对站点中的文件进行各种操作,如删除文件、移动文件、重命名文件等,也可以显示站点的整个文件结构。
3.报表视图方式
报表视图把网站中所有文件都集中显示在一个列表中,可用于监视重要的站点信息,如站点中的总网页数、整个站点的大小、新近添加或改变的网页、站点内未链接的文件等。还包括所有文件、图片、各种超链接、组件错误、未完成的任务和未使用的主题等。
4.导航视图方式
导航视图用于管理站点中各网页的层次关系。其中每个网页用一个矩形框表示,矩形框内显示网页的标题,网页间的关系用线段表示。在导航视图方式下可以修改网页的标题,调整网页之间的层次结构,可以打印网站组织结构图。
5.超链接视图方式
超链接视图用于开发和控制站点文件之间的实际链接关系,是把站点中的一段链接进行图形化表示。利用超链接视图可以查看所有超链接的来龙去脉。
6.任务视图方式
任务视图主要用于管理任务,可以将要完成的工作建立成多个任务,通过任务视图来编辑、分配、执行这些任务。如可以在任务视图中维护一个具有优先级的任务列表、分配任务给其它人、将任务和特定文件关联以及跟踪每项任务的状态等。
9.3 网页制作
9.3.1 网页基本操作
1.网页文件夹的建立
网页文件以及网页中所需素材文件的管理一般都是使用 Windows资源管理器在本地计算机上进行管理的。为了使用和管理的便捷,应将不同类型的文件存放在不同的文件夹中。因此在制作网页之前,要事先在本地机的D盘或E盘上创建名为Webfiles(也可为其他名字)的文件夹并在此文件夹下建立一些分类文件夹,如图9-8所示。
Webfiles文件夹是用来存放所有的网页文件和素材文件的,在申请了主页空间,上传网页文件时,要将整个Webfiles文件夹上传。Webfiles文件夹下,对应文件夹名字应该存放相应的文件,flash文件夹存放下载的flash动画或使用flash自制的动画;images文件夹存放网页中要使用的图片;music文件夹存放网页背景音乐或网页中要链接播放的音乐;page文件夹存放制作好的网页;photoshop文件夹则存放使用photoshop处理过的照片;temp文件夹存放一些暂时不用的文件。

图9-8 网页文件夹的建立
文件夹一般要用自己便于记忆的英文单词或缩写来命名,不要用中文名字。主页文件index.htm要直接放置在Webfiles文件夹下,和那些分类文件夹在同一级别里,其它网页可以保存在page文件夹中。编辑网页时要求:

(1) 在计算机的分辨率是800×600的设置下编辑网页。
(2) 单页文件大小最好不要超过70KB。
(3) 主页的文件名应该为index.htm、index.html 或default.htm、default.html。
(4) 网页文件名最好不要用中文命名,使用英文名或汉语拼音,名字尽量体现其含义。
(5) 单个页面内的动画最好不要超过5个以上,动画文件格式为GIF、JPG或FLASH。
(6)
图9-9 新建网页窗口
网页中允许下载的插件最好是Flash Player(动画播放)、Adobe Aacrobat Reader(电子阅读器),不要有太多其他的插件。
2.新建网页
网页的创建有两种方法,一种是基于空白网页创建,需要自己构造网页布局格式;另外一种就是基于FrontPage提供的网页模板快速建立,无需自己构造网页布局,而只需修改网页模板中的元素即可。具体方法如下:
(1) 基于空白网页创建网页
在FrontPage窗口中,选择菜单【文件】→【新建】→【网页或站点】,弹出“新建网页或站点”任务窗格,如图9-9所示。在任务窗格的“新建”下,单击“空白网页”即可创建一个空白的网页。
(2) 基于网页模板快速建立网页

图9-10 网页模板
选择菜单【文件】→【新建】→【网页或站点】,弹出“新建网页或站点”任务窗格,在“根据模板新建”中单击“网页模板”,打开“网页模板”对话框,如图9-10所示。单击要使用的模板选项卡,比如“常规”选项卡,然后再选择需要使用的模板,同时在“预览”视图中会显示该模板的缩略图。最后单击“确定”按钮,就会根据模板新建一个网页了。此外,还可以使用“框架网页”和“样式表”,新建网页。

3.保存网页
保存新建网页或修改过的网页的方法是:选择菜单【文件】→【保存】/【另保存】,或单击工具栏上的“保存”按钮,如果是未保存过的新建网页,则会弹出“另存为”对话框,输入要保存的网页文件名、选择保存文件的位置、确定保存文件的类型,按“保存”按钮即可保存。如果要更改网页标题(要在浏览器标题栏出现的文本),单击“更改标题”按钮,然后在“设置网页标题”对话框内键入新网页的标题。
4.打开和浏览网页
(1) 打开网页
若要打开本地计算机上的网页,选择菜单【文件】→【打开】,或单击工具栏上“打开”按钮,从“打开文件”对话框中选择要打开的网页文件。
FrontPage除了可以打开自身创建的网页之外,还能打开许多其它类型的文档,如Word文档、Excel文档、文本文档等。默认情况下,“打开文件”对话框中只列出文件夹和HTML格式的文档,不显示其他类型的文档,如果要显示其他格式的文件,则在“打开文件”对话框的“文件类型”中,选择一种文件类型或选择所有文件,这时“打开文件”对话框中将显示选择的类型文件,打开某个文件,FrontPage会自动将其转换为HTML格式。
(2) 浏览网页
在制作网页的过程中,应该经常查看一下网页的实际效果,以便进一步确认网页内容的正确性,网页的浏览方式有两种:
在FrontPage中预览
FrontPage网页编辑窗口的下部单击“预览”标签,切换的“预览模式”,可看到正在编辑网页的浏览效果。
在IE浏览器中浏览
网页制作完毕后,应该打开IE浏览器,查看网页在浏览器上浏览的效果。启动IE浏览器,选择菜单【文件】→【打开】,在弹出的对话框中选择要浏览的网页文档;也可在本地计算机上直接选择已编辑好的网页文件双击该文件名,启动浏览器并打开网页。
9.3.2 网页元素的编辑
网页元素的编辑主要包括:网页中加入文字、插入特殊文字符号、对文字的修饰和对段落的设置、文字的列表格式等。
1.文本输入及格式设置
网页中输入文字的方法很多,可直接在网页编辑窗口输入文本,也可从其他文档中使用复制/粘贴的方式将文本导入,还可在FrontPage中打开Word文档或文本文档导入文本。
对于已输入文本的设置,可以使用格式工具栏上的工具,或选择菜单【格式】→【字体】,设置文本的字体、字形、字号、颜色、效果、字符间距等。
2.插入特殊文本
网页中可以添加各种类型的特殊文本元素,如特殊符号、水平线、时间和日期、注释等。
(1) 插入特殊符号

图9-12 “水平线属性”对话框
图9-11“符号”对话框

网页中可能经常需要输入一些特殊的符号。选择菜单【插入】→【符号】,打开“符号”对话框,如图9-11所示。在“字体”中选择符号类型,再选择一个符号,单击“插入”按钮即可插入所需符号。             

(2) 加入水平线

图9-13 插入日期和时间
水平线可在网页上清晰地划分界限,对网页的布局起着重要的作用。选择菜单【插入】→【水平线】,可以添加一条水平线。在默认状态下水平线是灰色的,双击该水平线或用鼠标右键单击这条水平线,打开“水平线属性”对话框,如图9-12所示。设置水平线的大小、对齐方式、颜色等,单击“确定”按钮,即可修改水平线的属性。

(3) 插入日期和时间
要在网页中插入日期和时间,选择菜单【插入】→【日期和时间】,打开“日期和时间”对话框,如图9-13所示。如果选择“上次编辑此网页的日期”,则在网页中插入当时的日期和时间;如果选择“上次自动更新此网页的日期”,则在网页中插入最近一次更新的日期和时间。网页中日期和时间格式可以在对话框下面的“日期格式”和“时间格式”中调整,如果在“时间格式”框内选“无”表示只插入日期,不插入时间。
(4)
图9-14“注释”对话框
插入注释

图9-15 “段落”属性对话框
    网页中还可插入注释,对网页作些解释。选择菜单【插入】→【注释】,在“注释”对话框中,如图9-14所示,输入注释内容。注释文本在FrontPage中能看到,但在浏览器中是不显示的,要修改注释文本,可以双击注释,或用鼠标右键单击注释,选择“注释属性”项,即可修改注释。单击注释并按<Delete>键可删除注释。

3.段落格式设置
设置好段落格式对网页的美观易读是非常重要的。选择菜单【格式】→【段落】,打开“段落”对话框,如图9-15所示。可根据需要设置文字的对齐方式、段落缩进和段落间距等。在格式工具栏的最左边有一个“样式”框,也可以使用它来设置段落格式。
4.插入项目符号和编号列表
项目符号和编号是将整个段落作为项目条文的,因此应该事先输入要添加项目符号和编号的段落文本。然后选择菜单【格式】→【项目符号和编号】,打开“项目符号和编号方式”对话框,如图9-16所示。在对话框中,如果要设置项目符号,可选择图片项目符号和无格式项目列表;如果要编排有先后次序的项目,则选择编号列表。也可直接在格式工具栏上单击“项目符号”和“编号”按钮,设置默认情况下的项目符号和编号列表。
   
图9-16 “项目符号和编号方式”对话框
9.3.3 插入图片
创建网页时,一般都会使用图形、图片或者动画,来美化修饰网页。虽然图像格式有很多种,但网页中能够显示的图像格式却是有限的。在网页中常用的图像为GIF和JPEG格式,GIF格式的图像最多只能显示256种颜色,但是能够实现透明效果和GIF动画。JPEG格式的图像可以显示1024×1024×1024种颜色。对于一些非GIF和JPEG格式的图片,FrontPage可以自动地将这些文件转换成GIF或JPEG格式。
1.插入剪贴画
FrontPage提供了“剪贴画”图库,其中包含了大量的图片资源。选择菜单【插入】→【图片】→【剪贴画】,在“插入剪贴画”任务窗格中,输入要搜索的剪贴画名称、选择合适的搜索范围(如Office收藏集)和搜索结果类型(如剪贴画),单击“搜索”按钮,找到所需剪贴画,即可插入到网页中。也可点击任务窗格下面的“剪辑管理器”,打开“剪辑管理器”窗口,根据不同收藏夹选择需要的剪贴画。
2.插入图片文件
如果想插入其它图片,选择菜单【插入】→【图片】→【来自文件】,打开“图片”对话框,如图9-17所示。在查找范围中选择一个图片文件夹,在列表窗口中选择一个图片文件,单击对话框右下角的“插入”按钮即可插入所需图片。
在网页中插入图片实际上是插入图片的链接,因此,网页中所看到的图片并不在网页文件中,而是另存在图片文件夹(如images)中。如果要删除、改名或者移动图片所存放的位置时,要同时修改这个链接,否则链接就不存在,网页上也就看不到图片了。因此,在插入图片前应该将下载的图片或者是处理好的图片,放在指定的图片文件夹(如images)中,并将图片文件夹和网页放置在用一级文件夹下,保证图片文件路径的正确性。
图9-17 插入图片
3.图片的编辑
FrontPage提供了图形编辑工具栏,可以对图形进行编辑。用鼠标选定插入的图片,将显示如图9-18所示的图片编辑工具栏(若工具栏不显示,可选择菜单【视图】→【工具栏】→【图片】),使用工具栏上的工具可对图形进行编辑,例如加入文本、自动缩略图、图形翻转、调整黑白对比度和亮度、剪裁、设置透明色、凹凸效果、创建图像热点等。
图9-18 图形编辑工具栏
(1) 给图片添加文本

 
图9-19 制作缩略图
可以在GIF格式的图片上写字,也可指定文字格式。方法是:选定图片,单击图片工具栏的“文本”按钮 。在图片上显示的文本框中键入文字,并设置字体、颜色等。如果图片是JPEG格式或其它格式,因其不支持文本,FrontPage会提示将图片保存为GIF格式。FrontPage 将图片从一格式转换成GIF格式,图片上的颜色数目可能会减少而且图片的文件可能会变大。

(2) 制作缩略图
在网页中插入图像文件如果太大,会影响浏览器的下载速度,因此可以使用缩略图的方式,允许浏览者先看一幅小图,如果感兴趣想查看源图,则单击缩略图就可看到源图片。

图9-20 自动缩略图设置
制作缩略图的方法是:选定图片,单击图片工具栏的“自动缩略图”按钮 ,FrontPage将生成比源图小得多的缩略图,并自动添加了指向源图的超链接,单击缩略图即可查看源图。如图9-19所示,左图是源图,中图是缩略图。

自动缩略图的边框、大小和样式是可以设置的,在制作缩略图之前,选择菜单【工具】→【网页选项】,打开“网页选项”对话框,选择“自动缩略图”选项卡,如图9-20所示,在选项卡中可设置缩略图大小、边框线粗细、边缘凹凸效果,例如宽度为200像素、边缘粗细4像素、具有边缘凹凸效果。完成网页选项设置后,再使用图片工具栏制作缩略图,新生成的缩略图将会显示刚才设置的效果,如图9-19中右图的图形。
保存网页时,FrontPage会提示保存缩略图图片,一般情况下,缩略图片是与源图片保存在同一个文件夹中。
(3) 设置透明图片
在FrontPage中还可直接设置图片的透明背景,使图片看起来象完全融入到网页中。要使图片具有透明背景,制作方法是:选定图片,单击图片工具栏的“设置透明色”按钮 ,在图片背景上点击即可将图片变成透明色,如图9-21所示,左图是不透明图片,右图是经过处理后的透明图片。

 
图9-21 设置透明图片
保存网页时,FrontPage会提示将图片保存为GIF格式(只有GIF格式才支持透明颜色),保存时可以覆盖原来的图片文件,也可用新文件名保存。

4.修改图片属性
在网页上插入图片后,还可以对图片的属性进行修改,包括图片的类型、可替换的表示方式、超链接的跳转目标、以及在网页上的布局等。修改图片属性时,可在图片上单击鼠标右键选择“图片属性”项,弹出“图片属性”对话框,如图9-22所示。
在图片属性对话框中,选择“外观”选项卡,可以设置图片的布局和大小。在“环绕样式”中设置图片与文字间的环绕方式,在“布局”中设置图片在网页中的位置及图片的边框线的粗细,在“大小”中设置图片显示大小等。
在图片属性对话框中,选择“常规”选项卡,可以设置图片来源、图片类型等常规属性,这些设置包括:
“选择图片来源”:在“图片源”框中显示URL 地址或者文件的完整路径,分别表示图片来自Web网页或本机磁盘。可单击“浏览”按钮,在打开的对话框中选择另一个图片替换当前图片,也可单击“编辑”按钮对图片进行处理。
“设置图片类型”:可设定图片类型为GIF或JPEG格式。
“设置图片的替代”:为了节约时间有些用户会关闭浏览器的图片显示功能,但如果网页中用了图片作为超链接,就会影响阅读。可在“替代表示”框中设置用低分辨率图片或文字来代替图片。
“把图片作为导航按钮使用”:可在图像上设置一个跳转目标,点击图像则跳转到其他网页或打开其他文件。在“位置”框内输入要跳转的URL地址,或单击“浏览”按钮,打开“编辑超链接”对话框,指定要跳转的URL(或目标框架)。
  
图9-22 “图片属性”对话框
5.插入艺术字
FrontPage 内置了三十种艺术字样式,选择菜单【插入】→【图片】→【艺术字】,或单击绘图工具栏上的“插入艺术字”按钮,可打开“艺术字库”对话框,如图9-23(左图)所示,在对话框中选择一种艺术字样式。然后单击“确定”按钮,打开“编辑艺术字文字”对话框,如图9-23(右图)所示,在“文字”框中输入要建立具有艺术效果的文字,选择艺术字的字体、字号和字形,单击“确定”按钮,即可插入艺术字。
可使用艺术字工具栏修改艺术字属性。在艺术字上单击鼠标或选择菜单【视图】→【工具栏】→【艺术字】,弹出“艺术字”工具栏,可修改艺术字的文字、样式、形状等。还可在艺术字上单击鼠标右键选择“设置艺术字格式”项,打开“设置艺术字格式”对话框,设置艺术字的填充颜色和线条颜色、调整艺术字大小以及艺术字和文字间的环绕方式等。
   
图9-23 插入艺术字
6.插入视频

图9-24 视频属性
如果在网页上添加视频,将会给浏览者留下深刻印象。选择菜单【插入】→【图片】→【视频】,在打开的对话框中选择视频文件,单击“确定”按钮即可加入视频。可使用浏览器浏览网页的视频播放效果。

修改视频剪辑的属性,是在视频剪辑上单击鼠标右键选择“图片属性”项,打开“图片属性”对话框,单击“视频”选项卡,如图9-24所示。
在“视频源”框内显示的是视频剪辑的来源,如果要用另一个视频剪辑代替,单击“浏览”按钮,然后重新定位一个视频剪辑。还可在下面的“重复”选项中选择视频播放的次数,在“开始”选项中选择视频的播放状态等。
9.3.4 网页中的超链接
超链接是从一个网页指向另一个目的端的链接,通过超链接可以很方便地从一个页面(或网站)漫游到另一个页面(或网站)。超链接包括两部分:链接的载体以及链接的目的地址。链接的载体是指包含超链接的文字和图像,根据链接载体的不同,超链接分为图像超链接和文字超链接。链接的目的地址就是指单击超链接后所显示的内容,链接的目标是多种多样的,主要有下列几种形式:
“网页或网站”:可链接一个网页或另一个网站。
“图片”:链接(或打开)一幅图片。
“多媒体文档”:链接一个动画、视频、音乐等。
“电子邮件地址”:链接一个电子邮箱。
“其它各种类型文件”:可链接Office文档、程序文件、压缩文件等。
1.创建文本超链接
选定要超链接的文本,选择菜单【插入】→【超链接】,或者单击鼠标右键选择“超链接”项,打开“输入超链接”对话框,如图9-25(左图)所示。在“要显示的文字”框中显示的是链接文本,从“查找范围”框中可选择本地机器中的一个文件夹,在下面的“当前文件夹”列表中可选择一个要链接的网页或其他文件,在“地址”框中显示链接文件路径(URL地址),单击“确定”按钮即可。如果链接的目标不是本地机器上的文件,而是其他网站地址或电子邮箱地址,则在“地址”框内直接输入网址,如图9-25(右图)所示.。
 
图9-25 “插入超链接”对话框

图9-26 目标框架
在网页上点击超级链接时,默认情况下,新打开的网页将覆盖当前网页,如果希望在打开新网页时仍保持当前网页的打开状态,可在输入完超链接地址后,在“插入超链接”对话框中,单击“目标框架”按钮,打开“目标框架”对话框,如图9-26所示,选择“公用的目标区”列表中的“新建窗口”,按“确定”按钮,则超链接网页会在新窗口中打开。

若要修改已经设置好的超链接,可在要改变的超链接上,单击鼠标右键选择“超链接属性”项,在打开的“编辑超链接”对话框中,修改链接地址即可。要想取消超链接,则在“编辑超链接”对话框中,单击“删除超链接”按钮就可以了。
2.创建图像超链接
图像超链接和文字超链接的方法相同,选中要作超链接的图片,选择菜单【插入】→【超链接】,或者单击鼠标右键选择“超链接”项,打开“输入超链接”对话框,可创建图像超链接。还可在图像上单击鼠标右键选择“图像属性”项,打开“图片属性”对话框,在“常规”选项卡“默认超链接”栏的“位置”框中输入超链接地址,如图9-27所示。
3.
图9-27 图片属性超链接
创建书签超链接
使用超链接的方法不仅可在多个网页之间进行跳转,也可以在同一个页面里跳转。实现在同一个网页里跳转链接目标的方法是书签链接。书签是网页中被标记的位置或被标记的选中文本,是网页内部位置的一种标识,可以作为超链接的目的端,把同一网页的不同位置连接起来。另外,在同一个站点中的不同网页指定位置相连接时,往往要把目标对象定义为书签。
与超级链接不同,书签链接需要先创建书签,再进行书签链接的设置。书签可以是文本对象、图片对象或者网页空白处做对象等。
(1) 创建书签
将插入点(光标)定位在想要创建书签的位置,或者选定想要指定书签的文本,选择菜单【插入】→【书签】,打开“书签”对话框,如图9-28(左图)所示。在“书签名称”框中,键入书签的名称,单击“确定”按钮,完成书签的创建。
   
图9-28 书签超链接
(2) 建立与书签的超链接
选择要创建书签链接的文本,选择菜单【插入】→【超链接】,打开“插入超链接”对话框,单击“书签”按钮,弹出“在文档中选择位置”对话框,如图9-28(右图)所示。
如果要链接的书签在当前页面,则在书签列表中选择作为链接目标的书签,单击“确定”按钮,完成书签链接设置。如果要链接到其他网页的书签位置,则直接在“插入超链接”对话框的“地址”框中输入书签名称,如abc.htm#SQ22(即:文件名#书签名,文件名和书签名中间不能有空格,并且书签名前要加#号);或者在“插入超链接”对话框中的列表中先选择要链接的网页(如abc.htm), 再单击“书签”按钮,此时打开的“在文档中选择位置”对话框中显示的是另一个网页(abc.htm)中的书签,选择所需书签后,单击“确定”按钮即可。
删除书签的操作比较简单,选择菜单【插入】→【书签】,打开“书签”对话框,如图9-28(左图)所示,在下面的书签列表中,列出了当前网页中所有的书签名,选择一个要删除的书签,单击“清除”按钮,即可删除书签。
9.3.5 网页属性设置

 
图9-29 网页属性“常规”选项卡
    Frontpage提供的网页属性设置主要用于控制网页的整体外观,它不仅影响网页内容,还可能影响网页的标题、颜色方案或其他常规特性。设置网页属性的方法是:选择菜单【文件】→【属性】,或者在网页的任意位置单击鼠标右键选择“网页属性”项,打开“网页属性”对话框,如图9-29所示。

1.常规属性设置
在“常规”选项卡(如图9-29所示)中,可以进行如下设置:
“位置”:指定网页URL地址。
“标题”:给出网页标题。默认是“新建网页1”,可以修改标题。
“基本位置”:为可选的。如果要使某一框架中网页的所有超链接都跳转到另一框架中,则应在“默认的目标框架”框内指定目标框架名。如果已指定了目标框架名但框架中没有网页,则浏览器将打开一个新窗口用于显示超链接的目标网页。

 
图9-30 网页属性“背景”选项卡
“背景音乐”:指定浏览器在打开网页时自动播放的音乐。在“位置”框中,指定音乐文件的位置,可单击“浏览”按钮,在当前站点或本机磁盘找一个音乐文件(注意选择的音乐文件类型,有些类型的音乐文件在网页中无法播放);在“循环次数”框中,可设置音乐循环播放次数。

2.背景属性设置
网页属性对话框的“背景”选项卡,如图9-30所示,用于设置网页的背景颜色、图案和超链接的颜色等。设置方法如下:
“格式”:指定一副图像作为网页的背景图案。选择“背景图片”复选框,单击“浏览”按钮,选择一个图像文件,FrontPage会自动平铺这个背景图案,所有的网页元素,如文本和图形等,都会出现在当前背景图片上。如果要使背景图片具有水印效果,选中“水印”复选框,背景图片被设为水印(图片不会像网页一样滚动)。
“颜色”:包括“背景”、“文本”、“已访问的超链接”和“当前超链接”等颜色的选择。
l         在“背景”下拉框中选择一种颜色作为整个网页的背景颜色(注意:在无背景图片和主题的情况下,背景颜色的设置才有效果)。
l         在“文本”下拉框中选择一种文字的颜色作为网页文字的前景色。
l         在“超链接”下拉框中选择一种颜色作为未访问过的超链接颜色;从“已访问的超链接”下拉框中选择一种颜色作为已访问过的超链接颜色;在“当前超链接”下拉框中选择一种颜色作为指向的超链接颜色。
3.
图9-31 网页属性“边距”选项卡
设置网页边距
 “网页属性”对话框的“边距”选项卡,如图9-31所示,用于设置网页的上边距和左边距。设置方法是:选择“指定上边距”复选框,键入边距的像素值,设置网页的顶端页边距;选择“指定左边距”复选框,键入边距的像素值,设置网页的左端页边距。如果要最大限度的利用网页空间,可以把页边距设置为0。
9.3.6 Web插件的使用
在前面的章节里,介绍了网页中插入背景音乐以及插入视频的方法,使用网页属性加入的背景音乐不占网页空间,打开网页就直接播放音乐,但不具有交互性而且有很多其他限制;在网页中直接插入的视频,也是打开网页就播放,也不具有交互性。如果使用插件,则可以不受限制的播放各种类型的多媒体文件。插件是集成到 Web 浏览器中的软件模块之一,它可以提供一定程度的交互和多媒体功能,显示和播放各种类型的文件。这些插件可能会使用一定的显示区域,放置用于播放、暂停和重放等功能的视频控件。

图9-32 插入Web组件
FrontPage在其Web组件里提供了插件,可在网页里播放音频、视频和Flash动画等。插件的使用方法如下:

选择菜单【插入】→【Web 组件】,打开“插入Web组件”对话框,如图9-32所示,在“组件类型”中,选择“高级控件”;在右边的窗格中,双击“插件”,打开“插件属性”对话框,如图9-33所示,然后可作如下设置:
“数据源”:输入要用插件播放的视频、音频或Flash文件的 URL地址以加载插件,或单击“浏览”按钮,选择一个要播放的多媒体文件。

图9-33 插件属性
“浏览器不支持插件时显示的消息”:输入一条 HTML 或纯文本消息如“对不起,您的浏览器不支持这种文件格式的播放!”,当使用的浏览器不能播放插入的多媒体文件时,就会在网页上给出该提示信息。

“大小”:指定插件的宽度和高度(按像素)。如果选中“隐藏插件”复选框,在 Web 浏览器中查看网页时隐藏插件。
“布局”:指定插件的对齐方式、边框粗细、水平间距和垂直间距等。
如果要修改插件属性,在普通视图中,用鼠标右键单击要修改的插件,从弹出的快捷菜单中选择“插件属性”项,打开“插件属性”对话框,可以对插件的“数据源”、“大小”、“布局”等属性进行修改。
在FrontPage普通模式下,为了表示插件位置,会使用一个插头标记 ,如果切换到预览模式,插头就变成一个播放器。这个播放器名为ACTIVE MOVIE,它是IE浏览器自带的一个媒体播放插件。浏览器检测到在网页里插入了一个多媒体文件,就会在插入多媒体文件的位置显示一个ACTIVE MOVIE播放器,用它来播放多媒体,如图9-34所示,就是在浏览器或预览视图中显示的多媒体播放器,左图为视频、中图为音频、右图为Flash动画。
 
图9-34 预览视图中显示的多媒体播放器
9.4 网页中使用表格
FrontPage的表格功能很强,使用表格不仅能够清晰地表现文字、图像、表单以及其它FrontPage组件,也能提供导航工具和加强Web站点的整体布局,以条理化的方式显示数据。另外,FrontPage还可以把网页上的文本转换成表格,也能够将Word文档或Excel文档中的表格转换成HTML表格。
9.4.1 创建表格
1.绘制表格
FrontPage创建表格与 Word创建表格相似。可以使用“表格”菜单中的命令来创建表格,也可以使用工具栏中的“插入表格”按钮来创建表格,还可以用“表格”工具栏上的“手绘表格”自绘不规则表格。此外,也可将网页中的文字转换成表格。
(1) 插入表格
把光标移动到要插入表格的位置,选择菜单【表格】→【插入】→【表格】,打开“插入表格”对话框,如图9-35所示。在对话框中设置表格的行数、列数、对齐方式、边框粗细、单元格边距等,然后单击“确定”按钮,即可完成表格创建。

图9-35 “插入表格”对话框
此外,也可使用常用工具栏的“插入表格”按钮 ,按住鼠标左键向右下角拖动,直到所要的行数与列数显示出来后放开,可创建一个指定行列数的表格。  

(2) 自绘表格
选择菜单【表格】→【手绘表格】,弹出“表格”工具栏。单击“手绘表格”按钮,按住鼠标左键,从合适的位置向右下角拖动,先绘制出表格的外边框;然后添加水平线和垂直分割线来构成表格中的单元格。表格绘制完成后,再单击“手绘表格”按钮,使其变为弹起,表格绘制完成。由此可创建单元格大小不同、行列数变化的不规则表格。
(3) 文字和表格的相互转换
网页中的文本转换成表格,首先要在文本中添加分隔符,把文本分行、分列,通常是用段落标记来分行,用逗号分列(不能使用Tab分列),如图9-36(左图)所示.
       
图9-36 文本和表格的相互转换

图9-37 文本转换成表格
再选择菜单【表格】→【转换】→【文本转换成表格】,打开“文本转换成表格”对话框,如图9-36(右图)所示,在对话框中,选择文本分隔符(如逗号),单击“确定”按钮,可将文本转换成表格,转换结果如图9-37所示。

表格转换成文本的操作方法与文本转换为表格类似,只要选择菜单【表格】→【转换】→【表格转换成文本】,即可将表格转换成文本。但请注意:表格转换成文本,是将每个单元格转换为单独的一行文本,转换时先按行顺序进行转换,对一行中不同的单元格数据按照列的顺序转换,每个单元格都将转换成为一个段落。
2.编辑表格
表格的编辑主要是对表格的行、列或单元格的编辑,包括:选择、添加、删除行或列或单元格,以及合并和拆分单元格等。
(1) 选择表格的行、列或单元格
对表格的组成部分进行操作前,要先选中需要操作的对象。两种选择方法如下:
使用菜单:将光标定位在一个单元格中,分别选择菜单【表格】→【选择】下的“表格”、“列”、“行”、“单元格”项,可实现表格、列、行或单元格的选定操作。
使用鼠标:将鼠标定位在一个单元格,拖动鼠标可选中连续多个单元格;把鼠标移到表格的左边界,这时鼠标光标变为向右的黑色箭头,单击鼠标可选中箭头指向的行,拖拽鼠标则可选中多行;把鼠标移到上边界处单击鼠标就可选中列,拖拽鼠标则可选中多列。
(2) 表格中行、列、单元格的添加和删除
表格中无论是要添加还是删除行、列或单元格,都要先选定对象,再进行如下操作:

 
图9—38 “插入行或列”对话框
“添加表格中的行、列”:选择菜单【表格】→【插入】→【行或列】,打开“插入行或列”对话框,如图9-38所示,设置要插入的行数或列数,以及行或列插入的位置等。或将光标定位在行、列或单元格上,单击鼠标右键选择“插入行”或“插入列”项,可在当前行的上方插入一行或在当前列的左方插入一列。

“添加表格中的单元格”:选择菜单【表格】→【插入】→【单元格】,可以在当前选中的单元格左边添加一个单元格。
“添加表格标题”,选择菜单【表格】→【插入】→【标题】,即可在表格上方加入表格标题。(注意:添加表格标题要在合并和拆分单元格之前进行,否则无法加入标题。)
“删除表格中的行、列或单元格”:选择菜单【表格】→【删除单元格】,或单击鼠标右键选择“删除单元格”项,可将选中的行、列或单元格删除。
(3) 合并和拆分单元格
有时需要设置不规则的表格,它是由规则表格进行单元格的合并和拆分而成的。先选中要合并和拆分的单元格,再进行如下操作:
“合并单元格”:选择菜单【表格】→【合并单元格】,或单击鼠标右键选择“合并单元格”项,将所选择的若干单元格合并成一个单元格。
“拆分单元格”:选择菜单【表格】→【拆分单元格】,或单击鼠标右键选择“拆分单元格”项,打开“拆分单元格”对话框,如图9-39所示。选择要拆分的列数或行数,可将所选择的一个单元格拆分成若干单元格。

图9-39 “拆分单元格”对话框
“拆分表格”:选中要拆分表格的位置,选择菜单【表格】→【拆分表格】即可拆分表格。

(4) 表格和单元格尺寸的修改
    可以使用鼠标拖动的方式改变单元格的高度和宽度,如果按住<Shift>键拖动表格的边框,可使相邻单元格的宽度保持不变而使表格的总宽度变化。
    如果要使多个单元格的宽度相同或高度相同,则先选定这些单元格,再选择菜单【表格】→【平均分配列宽】/【平均分配行高】,这样可使所选行、列或单元格有相同的列宽或行高。
也可使用“表格”工具栏上的工具编辑表格,如插入行或列、设置对齐方式、平均分布行或列、表格自动套用格式等。
9.4.2 表格属性设置
创建表格之后,还可以对表格和单元格的属性进行修改,主要包含:布局方式、边框线的粗细、背景颜色等属性的设置。
1.表格属性设置

图9-40 “表格属性”对话框
表格属性包括表格整体的对齐方式、外框尺寸、单元格边距、表格的背景等。要修改表格属性,先将光标停留在表格的任一单元格中,选择菜单【表格】→【表格属性】→【表格】,或单击鼠标右键选择“表格属性”项,打开“表格属性”对话框,如图9-40所示,在对话框中可作如下设置:

“布局”:在“对齐方式”栏中设置表格相对于其它网页元素的位置,如居中;在“浮动”栏中设置表格与文字间的环绕方式,如左对齐;在“单元格边距”栏中设置单元格内的元素相对于单元格边框的距离,如1像素;在“单元格间距”栏中设置单元格之间的距离,如2像素;在“指定宽度”和“指定高度”栏中设置表格外边框高度和宽度。
“边框”:设置表格边框线粗细和颜色;也可设置表格亮边框和暗边框颜色;选择“显示单元格和表格边框”复选框,将颜色应用到单元格和边框。
“背景”:在“颜色”栏中设置表格的背景色,如蓝色;选择“使用背景图片”复选框,单击“浏览”按钮,选择所需的背景图片,单击“确定”按钮,给表格添加背景图片且背景图片将平铺整个表格。如果同时选择背景颜色和背景图片,则背景图片将覆盖背景颜色。
2.单元格属性设置

图9-41 “单元格属性”对话框
单元格属性是指单元格中内容的对齐方式、单元格宽度和高度、单元格边框、单元格的背景等。要修改单元格属性,先选中单元格,选择菜单【表格】→【表格属性】→【单元格】,或单击鼠标右键选择“单元格属性”项,打开“单元格属性”对话框,如图9-41所示,在对话框中可作如下设置:

“布局”:在“水平对齐方式”和“垂直对齐方式”框中,设置单元格中内容的对齐方式;在“行跨距”和“列跨距”框中设置单元格跨过的行数和列数;选择“标题单元格”复选框,设置标题单元格,文字为粗体;选择“不换行”复选框,禁止在单元格中环绕文字;在“指定宽度”和“指定高度”栏中设置单元格的高度和宽度;
“边框”:设置单元格边框线的粗细和颜色,设置单元格的亮边框和暗边框颜色(使表格的边框具有三维效果)。
“背景”:在“颜色”栏中设置单元格背景色;选择“使用背景图片”复选框,单击“浏览”按钮,选择所需的背景图片,单击“确定”按钮,给单元格添加背景图片且背景图片将平铺所选单元格。如果同时选择背景颜色和背景图片,则背景图片将覆盖背景颜色。
9.4.3 利用表格布局
Internet上许多网页都是利用表格来进行布局的,表格可以作为网页布局的基本框架,可以在表格中加入文字、图像和动画等各种内容;还可以在表格中套用表格(即在一个表格中又插入一个表格),以实现更复杂的布局。另外,灵活使用表格的背景、框线等可得到很美观的效果。如图9-42所示,就是网页表格布局的实例,在浏览器中浏览时不显示虚线。
  
图9-42 网页表格布局样例
1.设计和布局版面
布局就是以最适合浏览的方式将图片和文字排放在页面的不同位置。表格是很重要的网页元素,由于表格的单元格之间相互独立,不会相互干扰,因此表格是一种出色的用于设计Web页布局的解决方案,它们易于修改而且与大多数浏览器兼容。
在使用表格布局时,要先进行构思,多画几张布局草图,预先设计页面分为几栏,设计网页标题、图片、文字等放置的位置,先粗略布局,然后再细化。
由于显示器分辨率的设置会不同,因此同一个页面的大小可能会以800×600像素、1024×768像素等不同尺寸显示在屏幕上,一般在用表格布局时,预定网页的页面为800×600像素为好,这样的话,在使用800×600像素或1024×768像素等不同尺寸显示网页时,不会使某些元素超出屏幕以外或看不到,而影响浏览效果。
2.插入布局表格
要实现网页的排版布局,可首先向网页中插入一个或几个大表格,预先设计好行列的分布,然后把图像、文本、多媒体等页面元素分别插入到表格里合适的单元格中。
选择菜单【表格】→【插入】→【表格】,打开“插入表格”对话框,可以对所需表格的行列数及边框属性进行设置。一般用于网页排版的表格,其总宽度不大于780像素,边框线的粗细值要设置为0,这样浏览网页时就看不到表格线,以免影响网面的美观。完成设置后,单击”确定“按钮,即可完成表格创建。
可先插入一个大概样子的表格,再调整它在整个网页中的位置。如果网页内容较多,页面较长,可在同一页面上顺序插入多个表格,将不同部分的内容放置在不同表格里。还可以创建单个单元格的表格,并包含所有文本,为网页上的文字布局。在网页中加入表格后,有时对于表格的布局和背景等还需要进行细致的设置以使网页表格中的布局可以精确地达到要求,这些都可以在“表格属性”或“单元格属性”中设置。
3.在表格相应位置加入文字、图片、动画等
创建好布局的表格后,就可以在表格相应的单元格中插入文本、图片,用于布局文字和图片;也可以插入组件、控件等,用来播放动画、视频和音乐;还可在单元格中设置背景颜色或插入背景图片,增加网页的观赏性。由于在网页中常常需要加入各种图片,为了控制图片在网页中的位置,需要将文字和图片都放置在表格单元中来控制网页的布局。在单元格中插入对象时,单元格的大小会随着图片大小和文字的多少以及控件大小自动增大,但不会缩小。完成各项操作之后,一张设计美观的网页就做好了,如图9-43所示。
    
图9-43 表格布局实例
9.5 框架网页
框架同表格一样都是非常有用的网页组成元素,在FrontPage中可以非常方便地利用框架来组织页面,它可将浏览器窗口分成称为框架的不同区域,每个区域都可以显示不同的网页。一个框架网页可以包含多个框架,每个框架中只能包含一个网页,一组框架构成的网页也称为一个“框架集”。
框架网页本身并不包含可见内容,它只是用来指定要显示的其他网页及其显示方式。在一个框架中单击超链接,该超链接指向的网页通常显示在另一个框架(即目标框架)里,目标框架是显示超链接目标页的框架。如图9-44所示,就是用框架制作的网页实例,在窗口中的网页被分成两栏,左边是一个网页,右边是另一个网页。
图9-44 框架网页实例
9.5.1 创建框架网页
使用FrontPage中框架网页模板,可以创建框架网页,其中每个模板中框架间的导航都已经设置好了。从模板创建完框架网页后,只需设置要在每个框架中显示的初始网页。
选择菜单【文件】→【新建】→【网页或站点】,打开“新建网页或站点”任务窗格。在任务窗格的“根据模板新建”栏中单击“网页模板”,打开“网页模板”对话框,选择“框架网页”选项卡,如图9-45所示。
FrontPage为创建框架网页提供了10个模板,使用这些模板可以创建不同形式的框架网页。如:标题、垂直拆分、横幅和目录、脚注、目录等。可以根据需要从中选择一个模板,例如单击“目录”模板,在预览部分显示了框架网页的布局,上面的说明是:左面的超链接内容在右面显示,也即右框架是左框架的目标框架。有了这些信息就能够选择合适的框架模板。
图9-45 “网页模板”对话框
下面以“横幅和目录”框架为例,说明框架网页的制作方法。
1.框架网页的创建
进入网页视图后,选择菜单【文件】→【新建】→【网页或站点】,在打开的任务窗格中单击“网页模板”,打开“网页模板”对话框,选择“框架网页”选项卡,如图9-45所示。选择“横幅和目录”模板,单击“确定”按钮,即可创建如图9-46所示的框架网页。
图9-46 新建框架网页
使用“横幅和目录”框架网页模版创建的框架网页包含三个框架:横幅(放置滚动字幕、图片、动画、广告播放等)、目录(文字或图片的超级链接)和主框架(超级链接的网页显示在此窗口中)。如果当前网页中包含框架,网页窗口的底部可看到5种视图方式:普通、无框架、HTML、框架网页和预览,要对框架编辑修改时,切换到“普通”视图方式。
2.填充框架内容
创建新的框架网页之后,就要在每个框架中放置网页了。在各个框架内都有两个“设置初始页”和“新建网页”按钮,如果要给框架指定一个初始网页,单击“设置初始页”按钮;如果单击“新建网页”按钮,则在框架中创建一个空白的网页。
l         在主框架里,单击“设置初始页面”按钮,打开“插入超链接”对话框,在当前文件夹中选择一个事先编辑好的网页,作为该框架要链接的网页,单击“确定”按钮即可。如图9-47所示,在主框架里放置了一个已有的网页做初始网页。
l         在横幅框架里,单击“新建网页”按钮,就在当前框架里插入了一个新的空白网页,可像普通网页一样输入文字、插入图像、建立超链接。如图9-47所示,在横幅框架里新建一个空白网页,输入文字并设置蓝色背景。
l         在目录框架里,单击“新建网页”按钮,也新建一个空白网页,输入文字,给这些文字建立超链接,也即选择要链接的文字,单击鼠标右键选择“超链接”项即可。给目录框架中的文字建立超链接后,点击不同的超链接,会在主框架中显示链接的网页。

图9-47 编辑好的框架网页实例
修改和编辑框架网页与编辑普通网页方法相同,可直接在各个框架网页中编辑网页元素,如输入文字、插入图片等。

如果要删除框架,将光标停留在要删除的框架中,选择菜单【框架】→【删除框架】,可以删除框架,剩下的框架会自动撑满网页窗口。
还可以将框架拆分,选择菜单【框架】→【拆分框架】,可以将一个框架按行或列拆分成两个框架。
3.保存框架网页
使用“横幅和目录”模板创建的框架网页包含四个HTML文件:一个是框架集HTML文件,用于定义框架区域,为每个框架定义位置、名称和框架源,它本身不包含任何可见内容;另三个网页文件分别对应三个不同框架的内容(横幅、目录、主窗口)。
保存框架网页或框架中所显示网页的方法是:选择菜单【文件】→【保存】。
l         如果是第一次保存,则弹出另存为对话框,如图9-48所示,并显示框架网页布局的缩略图,深蓝色的框指明了突出显示框架中要保存的当前网页。此时,先保存整个框架网页(框架集),然后逐个保存各个框架中的网页。
l         如果是修改已保存过的网页,FrontPage会自动保存框架网页以及每个框架中的网页。保存框架网页时,如果框架中有新建网页或对已有网页修改过,会出现提示要求与框架集文件同时保存。
在FrontPage中打开框架网页时,显示的网页文件名字是框架网页(框架集)文件的名字,在打开框架网页时,会同时打开各个框架中对应的网页文件。浏览框架网页时,在浏览器地址栏中显示的是框架集的URL地址,另外三个网页的URL则隐藏起来。若要查看,可在某个框架的内容区域单击鼠标右键选择“属性”项,查看该框架网页的文件名。
图9-48 “另存为”对话框
9.5.2 设置框架属性
1.修改框架属性
框架属性的设置主要是设置:框架名称、初始网页设定、框架大小以及滚动条等。要修改某个框架属性,应先选中该框架,单击鼠标右键选择“框架属性”项,打开“框架属性”对话框,如图9-49(左图)所示。
 
图9-49 “框架属性”和“网页属性”对话框
在对话框中作如下设置:
在“名称”框中,修改框架的名字。创建超级链接时可能要用到框架名字。
在“初始网页”框中,修改框架中初始网页的名字;也可单击“浏览”按钮,在弹出的对话框中选择一个其它网页作初始网页。
在“框架大小”栏中,设置框架的宽度和高度。在数值框后,如果选择“相对”,则左框架宽度相对于右框架宽度的倍数将由前面数值框里的数值决定,如果选择百分比,则数值框里的数值是表示框架相对于浏览器宽度的百分比。
在“边距”栏中,设置框架中的内容距离框架边界的空白距离。
在“选项”栏中
l         如果选中“可在浏览器中调整大小”复选框,可在浏览器中调整框架大小。
l         单击“显示滚动条”下拉列表,可设置浏览器中滚动条的具体显示方式。
l         单击“框架网页”按钮,打开“网页属性”对话框,如图9-49(右图)所示,可设置框架网页的属性;单击“框架”选项卡,可调整框架与框架之间的距离;去掉“显示边框”复选框的选择,则不显示框架边框。
2.设置框架间的调用关系
在框架网页里链接到的网页不一定必须放在已有框架中,也可以有其他的设置。当在框架网页中点击超链接时,可以在同一框架、不同框架或新开的一个窗口中显示新内容。这种设置称为“目标框架”设置,它可以在插入超链接时设置,也可以在编辑超链接时设置,下面以插入超链接时设置为例,说明“目标框架”的设置方法。
图9-50 “插入超链接”对话框
在如图9-50所示的“插入超链接”对话框中,单击“目标框架”按钮,打开“目标框架”对话框,如图9-51所示。在对话框“公用的目标区”列表中,可以做如下设置:

l        

图9-51 “目标框架”对话框
选择“默认网页值(main)”:超链接网页将出现在默认目的框架中。(以“横幅和目录”框架为例,在目录窗口的超链接网页,将显示在主窗口中)。

l         选择“相同框架”:超链接网页将出现在同一框架中,也就是覆盖调用页面。  
l         选择“整页”:超链接网页将覆盖整个框架页面,占满整个浏览器窗口。
l         选择“新建窗口”:打开新窗口,显示超级链接网页。
l         选择“父框架”:表示把链接的网页放在包含当前框架的父框架内。(框架网页就是它定义的每个内容网页的父框架)。
9.5.3 嵌入式框架
嵌入式框架是FrontPage 2002的新功能。它和框架网页类似,不同之处在于嵌入式框架及其内容是嵌入在现有Web页中的,任何可放入普通网页的内容都可放到嵌入式框架中。
选择菜单【插入】→【嵌入式框架】,在网页中将插入一个嵌入式框架。若单击“设置初始网页”按钮,可以选择一个本地磁盘上已经编辑好的网页文件,也可以插入Internet上的任何Web页(将插入项的名称/地址写在“地址”栏中),然后单击“确定”按钮,所选网页将出现在嵌入式框架中。若单击“新建网页”按钮,则创建一个新网页。
选中嵌入式框架,单击鼠标右键选择“嵌入式框架属性”项,在打开的对话框中,可以设置嵌入式框架的属性,其设置方法和普通框架网页相同。如图9-52所示,是一个嵌入式框架网页实例,它利用了一个一行两列的表格,在表格中插入两个嵌入式框架,分别链接到Internet上的两个网站(Yahoo和Sina网站)。
图9-52 嵌入式框架网页实例
9.6 网页特殊效果设置
在FrontPage中可有多种方法给网页添加动态化的效果,既可以使用动态HTML效果和网页过渡效果,也可以使用网页动态组件产生效果。网页中添加动态效果后,可使网页生动活泼,观赏性强。
9.6.1 网页动态效果
1.动态HTML效果
动态HTML效果可以使网页元素的显示产生动画效果,这些效果包括:文本标题、图像和其他对象从各种不同位置飞入网页、文本逐个显示、旋转或者放大等。而且这些效果是和单击或双击鼠标、鼠标悬停、网页加载等动作事件绑定在一起的,不同鼠标动作的响应将产生不同的动画效果。使网页元素动态化的方法如下:
选中要设置动态效果的网页元素(如文字或图片),选择菜单【格式】→【动态HTML效果】,弹出如图9-53所示的工具栏。
在“选择一种事件”下拉列表中,选取一种引发事件,有“单击”、“双击”、“鼠标悬停”等鼠标响应事件,还有“加载网页”事件(即加载网页时产生的动画效果)。
当选定一种事件之后,“应用”框变为可用,在其下拉列表中选取一种效果。如果是鼠标响应事件,可选效果有“飞出”、“格式”和“交换图片”;对文本元素来讲,可选取“飞出”或“格式”效果,对图片元素来讲,可选取“交换图片”效果。如果是网页加载事件,则可选效果有“飞入”、“跳跃”、“缩放”、“逐字飞入”等。
在“选择设置”下拉列表中,为所选效果选择一种方式。如果在第③步中选取了“飞出”,则可在此步中从下拉列表的多种飞出方式中选出一种,如到顶端、到右下部等;如果要设置动态效果的是图片,并在第③步中选择了“交换图片”,此时的“选择设置”中的选项为“选择图片”,单击后弹出“图片”对话框,在其中选取要交换的图片。
如果要修改已设置的动态效果,同步骤①,打开DHTML效果工具栏,修改各种设置。如果要删除某种效果,可单击DHTML效果工具栏上的“删除效果”按钮。
图9-53 DHTML效果工具栏
2.网页过渡效果
网页过渡效果就是从一个网页退出,进入到另一个网页时所产生的特殊效果。在两个网页之间添加中间过渡效果,能增强网页的动感。网页过渡效果有二十多种,包括:盒状、擦出、隐藏、棋盘、抽出、缩进等,添加网页过渡效果的方法如下:
打开要设置过渡效果的网页,选择菜单【格式】→【网页过渡】,打开“网页过渡”对话框,如图9-54所示。
在“事件”框的下拉列表中,选择一个触发过渡效果的事件,如“进入网页”。
在“过渡效果”列表中,选择进入网页时的过渡效果,如“盒状收缩”。
在“周期 (秒)”框内,输入网页过渡效果持续的时间。
按同样方法设置其他事件的过度效果。如离开网页,设置离开网页时的过渡效果。
 
图9-54 “网页过渡”对话框
9.6.2 动态组件效果

图9-55 “插入Web组件”对话框
网页上使用动态组件,可使网页元素具有动画效果。选择菜单【插入】→【Web组件】,打开“插入Web组件”对话框,如图9-55所示。从“组件类型”中选择“动态效果”后,在右边显示出三种动态组件:悬挺按钮、字幕和横幅广告管理器,可以选择一个组件并设置效果。

1.悬停按钮
悬停按钮指一些有特殊显示效果的按钮,当鼠标单击或指向按钮时,该按钮能够发光或改变按钮颜色,还可以显示自定义图片或是播放声音效果;当点击按钮时,还可以跳转到一个超链接地址。
在“插入Web组件”对话框中,选择“悬停按钮”项,打开“悬停按钮属性”对话框,如图9-56(左图)所示,在对话框中作如下设置:
在“按钮文本”框内,输入悬停按钮显示的文本。使用图片作按钮就不必输入文本。
在“链接到”框中,指定单击按钮跳转到的URL地址(网页或其他文件)。单击“浏览”按钮,可以查找网页或文件的位置,并选择所需要网页或文件。
在“按钮颜色”框中,设置按钮在网页上初始显示的背景颜色。
在“背景颜色”框中,设置鼠标悬停在按钮上时按钮的背景颜色。
在“效果”框中,设置鼠标悬停在按钮上时按钮所显示的视觉效果。
在“效果颜色”框中,设置鼠标悬停在按钮上时悬停效果的颜色。
在“宽度”和“高度”框中,设置悬停按钮的大小。
单击“自定义”按钮,可打开“自定义”对话框,如图9-56(右图)所示.。可在对话框中设置鼠标单击或鼠标悬停时,播放声音或交换自定义图片。
例如:使用图片作为悬停按钮的背景,则在“自定义”对话框的“自定义图片”栏中的“按钮”框中,输入要用做悬停按钮背景图片的URL地址或单击“浏览”按钮查找图片文件;在“悬停时”框中也输入图片的URL地址或单击“浏览”按钮查找图片文件,该图片将用作悬停按钮的悬停效果,也即鼠标悬停在按钮上时显示该图片。
  
2.滚动字幕
滚动字幕是网页中比较常用的一种动态组件,一般用作欢迎词、广告等。字幕显示的是活动文本,在一个设定的框架内文本可以以不同的方式移动。

图9-57 “字幕属性”对话框
在“插入Web组件”对话框中,选择“字幕”项,打开“字幕属性”对话框,如图9-57所示,可作如下设置:

在“文本”框中,输入显示在字幕中的文本。
在“方向”框中,指定字幕上文本移动的方向,如“左”或“右”。
在“速度”框中,指定字幕上文本的移动速度。“延迟”是在字幕开始移动前的延迟时间,“数量”是字幕文本移动的增量像素值。
在“表现方式”框中,指定字幕中文本移动的三种方式,“滚动条”方式的效果是文字向一个方向运动,直到文本的尾部到达字幕区域的末端,才开始下次移动;“幻灯片”方式的效果是文字向一个方向运动,当文本的头部到达字幕区域的末端时,开始下次移动;“交替”方式的效果是文本在字幕区域中不断的来回移动。
在“大小”框中,指定字幕的大小,选择是以像素或以浏览窗口的百分比为单位。
在“重复”框中,指定字幕上文本效果的重复次数,是“连续”还是以固定的次数重复显示字幕。
在“背景色”框中,设置字幕的背景颜色。
图9-58 “横幅广告管理器属性”对话框
单击“样式”按钮,在“修改样式”对话框中的“格式”按钮中选择“字体”命令可以修改字幕文本的格式,选择“边框”命令,在“底纹”选项卡中,选择背景图片,还可以设置文本和图片一起移动。
要修改字幕,可在字幕上单击鼠标右键选择“字幕属性”项即可。
3.横幅广告
广告横幅是由几幅图片循环自动替换而实现的动态效果。横幅广告类似于PowerPoint的幻灯片播放,实际上就是把一系列图像串起来,按照事先设定的间隔依次显示出来。
在“插入Web组件”对话框中,选择“横幅广告管理器”项,打开“横幅广告管理器属性”对话框,如图9-58所示,在对话框中作如下设置:
在“宽度”与“高度”框中,设置图片显示区域的大小。
在“过渡效果”框中,设置图片的过渡方式,如分解、水平隐蔽、盒状收缩等。
在“每幅图片显示”框中,设置每幅图片显示的时间。
在“链接到”框中,设置横幅广告与其他网页的超链接,单击“浏览”可查找超链接的目标网页或文件。
单击“添加”按钮,添加要在横幅广告中显示的图片。在“显示图片”列表中显示已添加的图片并显示顺序,如果要更改图片顺序,单击“上移”或“下移”按钮,如果要删除某个图片,单击“删除”按钮即可。
9.6.3 主题的使用
主题是FrontPage中一个重要的技巧,可以为页面预先定义诸如背景图片、项目符号和编号、文本和链接的颜色、字体、水平线以及导航条等网页元素的格式,可将一个主题应用到一个或多个网页或整个网站,从而使站点各页面呈现出统一的外观。FrontPage的某些特性只有在使用主题时才有效,例如,当使用主题时,网页横幅和导航栏按钮将以图形方式显示;如果不使用主题,则以文本方式显示。如果指定某个主题为站点默认的主题,则该主题的设置会应用到站点的所有网页,以及后来添加的网页中。可以更改默认主题或删除它,更改结果将会自动应用到这个站点中。
主题的内容涉及站点配色方案、文本样式、页面背景等。如果将主题应用到当前网页,则主题样式、颜色和图形将替换当前正在使用的样式、颜色和图形,该网页不再使用站点默认的主题设置,任何应用到站点(所有网页)的主题更改不会影响当前网页。FrontPage提供了大量设计好的主题,应用这些主题可方便的设置网页外观。使用主题的方法如下:
1.选择和应用主题
选择菜单【格式】→【主题】,打开“主题”对话框,如图9-59所示。如果选择“将主题应用到”栏的“所选的网页”单选框,则表示所选主题应用于当前网页;如果选择“所有网页”单选框,则表示所选主题应用于站点的所有网页。在下面的列表中选择要应用的主题,主题的预览显示在“主题示例”中。如果要使文本和图像颜色更加鲜艳,选中“鲜艳的颜色”复选框;要使网页上的图像更加生动,选中“动态图形”复选框;要使网页具有背景图案,选中“背景图片”复选框等。
图9-59 “主题”对话框
2.去除或更改主题
对于一个已经应用了某个主题的网页,如果不想用该主题了,可选择菜单【格式】→【主题】,打开“主题”对话框,在“将主题应用到”下面的列表中选择“无主题”即可。
对所选主题还可以进行修改,主要是修改主题的颜色、图形、文本、样式等。在“主题”对话框中,单击“修改”按钮,在它的上方则会出现几个按钮,分别单击“颜色”、“图形”、“文本”这三个按钮,可对当前选定主题的颜色、图形、文本等进行修改。
9.6.4 使用CSS和JAVA制作动态网页
网页动态效果除了设置动态HTML效果、网页过渡效果以及使用动态组件产生效果外,还可以使用CSS技术和JAVA技术来控制网页的版式和给网页添加特效。
1.CSS样式表
样式用于控制文本字体、对齐方式和间距,多个样式的集合称为样式表。FrontPage已经预先设置好了一些内置样式,选择菜单【格式】→【样式】,可以应用内置样式或者修改和自定义样式。为了能更有效的控制网页的外观,使用“级联样式表”(简称CSS)技术,可以更精确地指定网页元素的位置、外观以及创建特殊效果。
CSS是Cascading Style Sheets(层叠样式表单)的简称,是设计网页样式的工具。
(1) CSS的语法规则
句法形式为:HTML标志{标志属性:属性值;标志属性:属性值;标志属性:属性值;...}
“HTML标志”:要定义样式的HTML标记,例如BODY、P、TABLE……。
“标志属性:属性值”:属性和属性值要用冒号隔开,每个属性和值都是一一对应的。多个属性之间用分号隔开。如:p {text-align:center;color:black; class=MsoNormal>为了使定义的样式表方便阅读,可以采用分行的书写格式:
p{
text-align: center;
color: black;
TEXT-INDENT: 17.95pt; MARGIN: 0cm 0cm 0pt 26.9pt; class=MsoNormal>}
本语句设置的是:段落排列居中center,段落中文字为黑色black,字体是arial 。
CSS样式表的属性包括有:文本属性、背景属性、图片属性、边框属性等,具体的属性和属性值的设置,可参阅其它参考书,此处不在详细叙述。
(2) CSS样例代码
以下是一段定义了H1(标题1)和H2(标题2)元素颜色和字体大小属性的代码。
<HEAD>
<TITLE>CSS例子</TITLE>
<STYLE TYPE=text/css>
H1 { font-size: x-large; color: red }
H2 { font-size: large; color: blue }
</STYLE>
</HEAD>
利用文本属性中的Text-decoration属性可以实现对超链接的修饰,代码是:
  <html>
  <title>link css</title>
  <head>
  <style>
   <!--
   a:link{color:green;text-decoration:none}
   a:visited{color:red;text-decoration:none}
   a:hover{color:blue;text-decoration:overline}
   -->
  </style>
  </head>
  <body>
   <p style=“
   <a href=“****”>未访问的链接</a></p>
   <p> <a href=“****”>访问过的链接</a></p>
   <p> <a href=“****”>鼠标悬停时的链接</a></p>
  </body>
</html>
此段代码定义了:“未访问的链接”文字是绿色无下划线,“访问过的链接”文字是红色无下划线,“鼠标悬停时的链接”文字是蓝色有下划线。
(3) 创建外部CSS样式表
要在站点上所有或部分网页上一致地应用相同样式时,可使用外部样式表。在一个或多个外部样式表中定义样式,并将它们链接到所有网页,便能确保所有网页的外观一致性。 
在FrontPage中新建一个样式表的方法是:选择菜单【文件】→【新建】→【网页或站点】,打开任务窗格,选择“网页模板”项,在打开的“网页模板”对话框中,选择“样式表”选项卡,并选择普通样式表。然后直接在页面上输入如下代码:
  BODY {FONT-SIZE: 9pt}
  TH {FONT-SIZE: 9pt}
  TD {FONT-SIZE: 9pt}
将样式表文件保存在和其他网页相同的文件夹中,通常外部样式表以 .css 作为文件扩展名,例如 new_page_1.css。
(4) 引用CSS样式表
FrontPage可以通过三种方式给网页添加样式表,一种是外部文件方式,一种是内部文档头方式,另一种是直接插入式。
外部文件方式
外部文件方式即将CSS写成一个文件的方式,在HTML文档头通过文件引用来进行风格控制。也就是在页面链接一个外部样式表文件,这种方法可以使多个页面使用同一个样式表,方便保持页面的主题。可以在每个HTML文件中引用这个文件,从而可使整个站点的HMTL文件在风格上保持一致,避免重复的CSS属性设置。

图9-60 “链接样式表”对话框
引用样式表的方法是:打开要编辑的网页,选择菜单【格式】→【样式表链接】,打开“链接样式表”对话框,如图9-60所示。单击“添加”按钮,在弹出窗口中选择样式表文件(如new_page_1.css),可将样式表文件引用到当前网页中。以后只需修改外部样式表,则更改就会反映到所有与该样式表相链接的网页上。

内部文档头方式
这种方式与外部文件方式区别在于这种方式是将风格直接定义在文档头<Head>…</Head>之间,而不是形成文件,这种风格定义产生作用的范围也只局限于本文件。
如果只设置当前页面的样式,就要运用嵌入的样式表,这时只需在要加入样式的网页中选择“HTML”视图方式,在头标记<head>与</head>中加入代码,如加入以下代码:
  <style type=text/css>
  BODY {FONT-SIZE: 9pt}
  TH {FONT-SIZE: 9pt}
  TD {FONT-SIZE: 9pt}
  </style>
切换到“页面”视图方式,即可见到效果,是设置表格中的文字大小为9pt。
直接插入式
直接插入式很简单,是在每个HTML标志后书写CSS属性就可以了。这种方式很直接,例如规定一个Table标志中的字为红色,字体大小为10pt,先将网页切换到“HTML”视图,再将下列代码写在<body>和</body>标志之间,代码如下:
  <Table style=color:red;font-size:10pt>
切换到“页面”视图方式,就可看到效果,是将表格中的文字设置成红色、10pt大小。
2.Jave Applet程序
Java 是由 Sun 公司开发而成的一种编程语言,利用 Jave 编写的小程序叫做Java Applet。使用它可在各式各样的网络环境中开发软件。而且,不论使用的是哪一种 WWW浏览器、计算机、操作系统,只要WWW浏览器上注明了“支持Java”,就可看到生动的主页。
Java Applet程序不能独立运行,必须经过编译,经过编译后的Java Applet程序的扩展名为.class,必须将它嵌入到HTML文件中,并由浏览器来打开运行。Java Applet主要用于在网页中设置动画、显示图片、设置动态文字等效果,
(1) 网页中加入Java程序的方法有两种:
在FrontPage中,选择菜单【插入】→【插入Web组件】,打开“插入Web组件”对话框,选择“高级控件”中的“Java小程序”,在打开的“Java小程序”对话框中,设置各种属性和参数,如指定Java小程序源、设置Java小程序参数等,然后单击“确定”按钮,即可在网页中插入Java小程序。
在HTML文档中,Java是使用<applet>...</applet>来标识的。可直接将程序代码加入到HTML文档的<body>…</body>标记中,它的格式是
<applet code=java applet的文件名 width=宽 height=高 codebase=java applet所在路径>
<param name=参数名 value=参数值 >
<param name=参数名 value=参数值 >
......
</applet>
(2) Java Applet实例
下面的例子是将:“欢迎访问彗星网站!”几个字设置为波浪文字显示在网页中。
HTML文档的<body>...</body>标记之间输入如下代码:
<applet code=SineText.class width=300 height=50>
<param name=Text value=欢迎访问彗星网站!>
<param name=Traveling value=yes>
<param name=MouseClick value=yes>
<param name=Rate value=4>
</applet>
从上面的例子看,将一个java applet小程序插入到HTML文档中共有两个步骤:
①设置java applet的属性,即在applet标签中填写code、width、height的属性值。
②设置java applet的参数,即在param标签中对应的填写name、vaule属性的值。
另外,第一句的“SineText.class”是经过编译后的Java Applet小程序,该程序应该和网页放在相同的文件夹中,在运行网页的时候,它将会一起运行。
3.JavaScript脚本语言
JavaScript是一种脚本语言,它采用小程序段的方式实现编程。像其它脚本语言一样,JavaScript也是一种解释性语言,不需要先编译,而是在程序运行过程中被逐行地解释,是通过嵌入或调入在标准的HTML语言中实现的。使用它可与HTML超文本标记语言、Java小程序一起实现在一个Web页面中链接多个对象,与Web客户交互的作用。
JavaScript主要是对浏览器的各个对象进行处理。可以根据发生的不同事件,产生不同的行为和效果。如:按下鼠标、移动鼠标等事件。
(1) JavaScript脚本语言书写方法
JavaScript必须编写在HTML文件中,直接查看网页的源代码,就可以看到Javascript程序。它是使用<Script>...</Script>来标识的,脚本代码一般放在<body>…</body>标记之间,有时也放在<head>…</head>标记之间。书写方法是:
<html>
<head>
……
</head>
<body>
<script language=“JavaScript”>
………
</script>
</body>
</html
说明:①通过标识<Script>...</Script>指明JavaScript脚本源代码将放入其间。
      ②通过属性Language =JavaScript说明标识中是使用的何种语言,这里是JavaScript语言, 表示在JavaScript中使用的语言。
(2) JavaScript程序实例
实例一:在网页的状态栏设置跑马灯文字,“欢迎访问 彗星网站!”
<head>...</head>标记之间输入如下代码:
<script>
<!--
function scroll(seed)
{
var m1 = 欢 迎 光 临
var m2 = 彗 星 网 站!
var msg=m1+ +m2;
var out = ;
var c = 1;
if (seed > 100) {
seed--;
var cmd=scroll( + seed + );
timerTwo=window.setTimeout(cmd,100);}
……
//-->
</SCRIPT>
实例二:在打开网页时,弹出三个对话框,并显示三个字符串。
HTML文档中输入如下代码;
    <html>
    <head>
    <Script Language =JavaScript>
      // JavaScript Appears here.
      alert(欢迎来到 彗星网站!);
      alert(请浏览网站内容后,多提宝贵意见!);
      alert(多谢光临,下次再来!);
    </Script>
    </Head>
    </Html>
 可在记事本中输入上面的代码,将文件保存成html格式,如文件名为test.html。 也可在FrontPage的HTML视图方式中,输入上面的代码,在浏览视图中查看结果。
说明:①test.html是HTML文档,其标识格式为标准的HTML格式。
alert()是JavaScript的窗口对象方法,其功能是弹出一个对话框并显示()中的字符串。
 ③通过<!-- ...//-->标识进行注释,它不在网页正文中显示。
9.7 表单网页
表单,是用来采集浏览器信息的一段网页,它包括反馈信息的一些表单域,是获得用户反馈信息的重要工具。如可以用表单收集客户的个人资料,然后把客户的个人资料输入数据库,也可以用表单设计一个订货单,让客户指定要购买的商品名称、型号、数量等。
9.7.1 创建表单网页
表单是由表单域和说明文字组成的,在表单中除了可以添加表单域如文本框、复选框、选项按钮、下拉框等,还可以在表单中加入任何网页元素,如文本、图片、组件等。
1.创建表单
在应用表单域之前必须先创建表单,插入表单的方法有两种:
(1) 自制表单
选择菜单【插入】→【表单】→【表单】,在网页中插入一个虚线矩形框,其中包含有两个按钮“提交”和“全部重写”,在矩形框中,可添加所需表单域。
(2) 使用“表单网页向导”创建表单 
选择菜单【文件】→【新建】→【网页或站点】,打开任务窗格,选择“网页模板”项,在“网页模板”对话框中,选择“表单网页向导”,单击“确定”按钮,弹出“表单网页向导”对话框,按照向导提示操作,最后点击“完成”按钮即可创建表单。
2.添加表单域(表单元素)
表单是存放表单域的容器,在一个表单中可以不放任何表单域,也可以放置多个表单域。选择菜单【插入】→【表单】,在其下拉子菜单中选择表单域(表单元素):
插入“文本框”:在指定位置添加一个单行文本框,只能输入一行文本。 
插入“文本区”:指定位置加入一个文本框区域,可以输入多行文本。
插入“文件上载”:在指定位置添加一个文件上载控件,可以上载一个文件。
插入“复选框”:在指定位置加人一个复选框,可以选择多个选项。
插入“选项按钮”:在指定位置添加一个单选按钮,在一组按钮中只有一个选中。
插入“分组框”:在指定位置加人一个分组框,其中的内容是与表单中信息分开的。
插入“下拉框”:在指定位置添加一个下拉列表框,可为其设置一个或多个选项。
插入“高级按钮”:在指定位置加入一个高级按钮,可以编写脚本。
如果要在表单中多次使用同一个表单域元素,可通过复制/粘贴的方式,复制多个表单域。如果要删除表单域,只需选定某个表单域,按<Delete>键即可。
如图9-61所示,是一个插入了多个表单域的表单网页实例。
图9-61 表单网页实例
9.7.2 表单属性设置
在网页的空白处单击鼠标右键选择“表单属性”项,打开“表单属性”对话框,如图9-62所示,在对话框中,提供了三种提交表单信息的方式:
(1) 发送到文件或电子邮件

图9-62 “表单属性”对话框
默认状态的表单处理器是FrontPage的表单处理器,可以在“发送到”处选择文件名或者是电子邮件地址。如果需要更详细地设置,单击下面的“选项”按钮,在打开的对话框中有四个选项卡,分别是:“文件结果”、“电子邮件结果”、“保存的域”和“确认网页”,可以对它们进行逐个设置。

(2) 发送到数据库
这种方式是将表单中的数据结果发送到指定的数据库中,单击下面的“选项”按钮,在打开的对话框中有四个选项卡,分别是:“数据库结果”、“保存的域”、“附加域”和“文件上载”,可以对它们进行逐个设置。
(3) 发送到其它对象

  
图9-63 “按钮属性”对话框
这种方式可将表单数据发送到相应的数据处理程序中,其他对象的处理程序有三种:自定义ISAPI、NSAPI、CGI或ASP脚本,讨论表单处理程序和注册表单处理程序。选择一种处理程序,单击下面的“选项”按钮,可以进行更详细的设置。

9.7.3 表单域属性设置
表单属性是对表单的保存结果进行设置,而表单域属性,是设置单个表单域(表单元素)属性如名称、类型、初始值、选定状态等。下面以按钮、复选框、下拉框为例,说明表单域属性的设置方法。
1.按钮

图9-64 “复选框属性”对话框
在表单中,双击“提交”按钮,或者在“提交”按钮上单击鼠标右键选择“表单域属性”项,打开“按钮属性”对话框,如图9-63所示。在“名称”框中,输入标识按钮的名称;在“值/标签”框中,输入显示在按钮上的文字;在“按钮类型”中,选择“提交”;在“Tab键次序”中,输入一个数字如3,则在表单中按3次Tab键,光标会定位在此按钮。

2.复选框  
在表单中,双击某个复选框,打开“复选框属性”对话框,如图9-64所示。可设置复选框的名称和值,在“初始状态栏”中,可选择该复选框的初始状态是选中还是不选中。
3.
图9-65 “下拉框属性”对话框
下拉框
在表单中,双击下拉框,打开“下拉框属性”对话框,如图9-65所示。单击“添加”按钮,在左边面的项目列表中,添加要显示在下拉框中的选项;还可以使用“修改”或“删除”按钮来修改或删除选项;使用“上移”或“下移”按钮,可以改变列表中项目的次序。在“高度”框中,输入想在下拉框中显示的文本行数。在“允许多重选项”中选择“是”,则允许在下拉框中选择多重选项。
9.7.4 提交表单
在浏览器窗口中,根据表单域填写表单信息,如果输入信息有错,可以单击“全部重写”按钮,重新填写信息,确认输入正确后,单击“提交”按钮,可将表单信息提交到收集信息的站点服务器,并会返回一个“确认网页”,保证输入信息的正确性。
9.8 网页的发布和管理
网页的发布和管理主要是申请主页空间、使用上传软件发布网页、管理和维护个人主页空间上的网页等。
9.8.1 申请个人主页空间
如果要将网页发布到Internet上,要选择一个Internent服务提供商(ISP), 要知道发布网页的ISP的Web服务器位置,要获得一个用户帐号和密码,并且在Web服务器上获取一定的存储空间,还要确保对这块存储空间拥有读写权限。目前许多大型网站都提供个人主页的免费存放服务,可以到网易(****)、中华网(****)等站点上去申请自己的个人主页空间。
在申请个人主页空间之前,先要有个人电子信箱,以便于提供免费个人主页空间的站点与你联系。再就是要找到可以免费提供个人主页空间的站点如****,主页上有申请免费个人主页空间的链接,点击该链接后,按要求填写表格,主要是申请人的一些基本情况,然后就等着发到你指定电子信箱的确认邮件,收到的邮件中会告诉你,你的用户名、密码,上传主页的方法、目录、起始页的文件规定等等相关问题。至此,你的免费主页空间申请工作完成,可以向指定的服务器传送自己的个人主页了
9.8.2 网页的发布方法
发布网页,就是把网页文件传送到与Internet相连的Web服务器上。在发布过程中,要找到一个存放和发布网页的站点,然后使用FrontPage或者利用某种发布工具软件,将制作好的网页文件传送(复制)到Web服务器上。发布网页的方法是:
1.使用发布工具软件
使用发布工具软件发布网页,也即使用FTP软件上传网页。可以在本地计算机里安装常用的图形用户界面的FTP客户端软件如CuteFTP、WS_FTP、LeapFTP等,然后使用该软件将本地计算机上制作好的网页发布到指定的服务器上。例如,前面章节提到的,在本地计算机上建立的Webfiles文件夹,就可以将它整个的上传到服务器上你申请的主页空间中。前面章节中也提到了使用CuteFTP上传文件到指定服务器的方法,请参阅。
2.使用FrontPage发布网页
如果在本地计算机上建立了站点文件夹,也可以使用FrontPage来发布站点。选择菜单【文件】→【发布站点】,在打开的对话框中设置一个Web服务器,指定要发布的网页,就可将站点发布到Web服务器上了。
3.浏览发布结果
网页发布到某个Web服务器后,通常这台计算机会随时保存上载的网页文件,并在访问者访问这些网页时把它们传送到访问者的浏览器上,就可在浏览器中预览网页了。
9.8.3 个人主页空间的管理与维护
在本地计算机中存储的网页文件要与传送到Web服务器中的文件完全相同,这样便于修改和上传。对服务器上的个人主页空间,要经常添加新的网页,更新和修改已有网页并上传至服务器,覆盖原有的网页。如果主页空间受到限制,还要定期地删除未用的或旧的文件(如图像、声音、视频文件等),避免网站空间溢出后,新的网页文件传送不上去。
 题
1.       FrontPage 2002 的界面元素包括哪些?
2.       FrontPage的视图方式有哪几种?网页视图方式下的三种显示模式的作用是什么?
3.       网页中常用的图像格式包括哪些?它们各有什么特点?
4.       如何在网页中使用书签超链接?
5.       网页中加入超链接时,超链接的目标主要有哪几种形式?
6.       网页中利用表格布局的步骤是什么?
7.       什么是框架?什么是框架集?
8.       框架网页中的目标框架有哪些?各自的作用是什么?
9.       CSS样式的语法规则是什么?引用CSS样式的方式有哪些?
10.    Java Applet与JavaScript区别是什么?如何书写它们的起始和结束标记?
编辑:王红涛
上一篇:没有了
下一篇:没有了
评论区
发表评论

评论仅供会员表达个人看法,并不表明网校同意其观点或证实其描述
教育部 中国现代教育网 不良信息 垃圾信息 网警110
郑重声明:本站全部内容均由本单位发布,本单位拥有全部运营和管理权,任何非本单位用户禁止注册。本站为教育公益服务站点,禁止将本站内容用于一切商业用途;如有任何内容侵权问题请务必联系本站站长,我们基于国家相关法律规定严格履行【通知—删除】义务。本单位一级域名因备案流程等原因,当前临时借用网校二级域名访问,使用此二级域名与本单位官网权属关系及运营管理权无关。濮阳市濮阳县兴濮中学 特此声明。
中华人民共和国电信经营许可证 ICP证 京ICP备13002626号-8 京公网安备11010502032087
联系地址:河南省濮阳县城关镇国庆路东段(新广场西侧)
北京网笑信息技术有限公司 仅提供技术支持 违法和不良信息举报中心