您的位置: 网站首页 > 公共课 > 计算机应用基础 > 第11章 FrontPage 2003的操作与应用 > 【11.3 编辑Web网页】

11.3 编辑Web网页

 

11.3  编辑Web网页

利用模板生成的Web网页只是提供了一个框架,要制作一张漂亮的Web网页,还需要大量的修改编辑工作。实际上,在FrontPage中编辑Web网页的方法类似于在Word中编辑文本。

11.3.1  打开Web站点以及Web网页

要修改Web网页,必须先将其打开。在文件夹视图下的文件列表中双击目标文件即可将其打开,如图11-21所示。

实际上,在导航视图下的文件列表中双击目标文件同样也能打开该文件。

在下面的章节中,除非特别声明,凡是提到打开Web网页或者编辑Web网页,该操作均是在网页视图的普通模式下进行。

11-21  文件夹视图

11.3.2  修改Web网页

打开后的文件显示在网页视图中。在利用向导和模板生成的Web网页中,FrontPage提供了大量的注释,如图11-22所示。修改即可按照这些注释进行,在合适的位置按照提示输入文本即可。

11-22  利用模板生成的Web网页

若要替换Web网页中的图片,可按以下步骤进行:

1)将要加入的图片复制到“Images”文件夹中。

2)在Web网页中右击要替换的图片,在弹出的快捷菜单中选择图片属性”菜单命令,打开如图11-23所示的图片属性对话框。

11-23  “图片属性”对话框

3)在常规选项卡中的图片源文本框中输入图片的名称。可以单击浏览按钮,打开浏览对话框以确定图片。

4)设定完毕,单击确定按钮,即完成图片的替换。

11.3.3  设置字体和段落格式

由于Web网页很强调外观,因此格式设置很重要。设置文本和段落格式的方法和Word中的方法是完全一样的。选中要设置格式的字体或者段落,执行格式字体或者段落”菜单命令,打开字体对话框或者段落对话框,如图11-24、图11-25所示。利用这两个对话框即可设置格式了。

     

11-24  字体对话框                  11-25  段落对话框

11.3.4  应用主题

一般一个Web站点应该有一个统一的主题,或者说是统一的风格。这样才能让人感觉多而不乱,且有一定的专业外观。主题就是一个统一的表现元素,如统一风格的按钮,以及统一的配色方案。

FrontPage 2003提供了许多完整主题,用户可以将主题应用到整个Web站点、一张或者多张Web网页上。实际上,利用向导或者模板创建的Web站点已经应用了某个默认的主题。用户若不满意,便可以更改这个默认的主题,或者将默认的主题删掉。

Web站点应用主题的操作步骤如下:

1)执行格式主题”菜单命令,打开如图11-26所示的主题窗格。

 

11-26  主题窗格

11-27  应用于所选用页

2)若事先已经打开了一个Web网页,则选择主题窗格中的应用于所选网页菜单命令即可,如图11-27所示。

3)设定完毕以后,单击确定按钮。这样整个站点中所有的Web网页均被应用了该主题。

要删除已经应用的主题,在图11-26所示的主题窗格中的主题列表中选择“无主题”即可。

11.3.5  修改主题

Web网页是展现个人的一个平台,千篇一律的Web网页让人厌倦。FrontPage给用户提供了很大的自由度,用户可以事先修改FrontPage提供的主题。在主题窗格中选择自定义命令,将弹出如图11-28所示的对话框。对话框中出现以下几个按钮颜色图形文本

11-28  自定义主题对话框

1.修改颜色

单击颜色按钮,打开一个自定义主题对话框,如图11-29所示。

配色方案选项卡中,FrontPage提供了大量的配色方案供用户选择,这样的配色方案是应用于整个主题的;而在自定义选项卡中,则可以为主题的每个内容设定颜色方案,如各级标题、按钮、超链接的文本等,如图11-30所示。

11-29  修改主题对话框(修改颜色)

11-30  修改主题对话框的自定义选项卡

2.修改图形

单击“自定义主题对话框的图形按钮,打开另一个自定义主题对话框,如图11-31所示。这时主要修改的是主题的背景图片以及字体。在图11-31所示的对话框左侧的图片选项卡中的背景图片文本框里表示的即为该主题的背景图片。

11-31  “自定义主题”对话框(修改图形)

3.修改文本

单击“自定义主题对话框的文本按钮,打开第三个自定义主题对话框,如图11-32所示。在对话框左上角选择要修改的文本,然后在下侧的列表中选择一种字体即可。

修改完毕,在图11-28所示的“自定义主题对话框中单击保存按钮,保存用户的修改。若用户不想覆盖FrontPage提供的主题,单击另存为按钮,为用户的主题设定一个名称。

11.3.6  设置背景和背景音乐

主题中已经提供了一种背景,在11.3.5节中,我们已经介绍了如何修改主题的背景图片。实际上,用户也可以单独设置一个背景,背景不仅仅是视觉效果,也可以是背景音乐。

Web网页已经设置了主题,则必须将主题删除以后才能设置背景。

1)打开要设置背景的Web网页。在网页视图中,单击鼠标右键,选择快捷菜单中的“网页属性”菜单命令,也可以执行“格式”→“背景”命令,打开如图11-33所示的“网页属性”对话框。

2)打开格式选项卡,如图11-33(左)所示,便可设置当前Web网页的背景。

3)若想设置Web网页的背景音乐,打开常规选项卡,如图11-33(右)所示。在背景音乐选项组中设置背景音乐,其中的循环次数表示打开Web网页以后,该背景音乐播放的次数,若选中不限次数复选框,则音乐将一直播放,直至该Web网页关闭。

4)设置完毕,单击确定按钮即可。

11-32  自定义主题对话框(修改文本)

   

11-33  网页属性对话框

11.3.7  设置Web网页动画效果

PowerPoint一样,在FrontPage中也可以设置动画,让用户的Web网页看起来更加生动活泼。FrontPage提供的动画有两种:一种是动态HTML(称为DHTML);一种是Web网页过渡效果。

1.设置动态HTML

用户可以将动态HTMLDHTML)动画效果应用到Web网页上的任何元素上,如文本、段落、图片、按钮等。DHTML是动作激发动画,也就是当用户完成诸如单击鼠标、双击鼠标、鼠标悬停等动作(称为“事件”)时,将激发这些动画。以下是设定DHTML的方法:

1)打开Web网页,选中要设定动画的元素,比如一段文本,或一张图片等。

2)执行视图工具栏动态HTML效果”菜单命令,打开DHTML效果工具栏,如图11-34所示。其有3个下拉列表框。在第一个列表框中选定一个事件,比如“网页加载”,如图11-35所示。在应用下拉列表框中选择一种动画效果,如“飞出”。最后在第三个下拉列表框中选择动画“飞出”的具体形式。这样即设置好了所选对象的动画。

11-34  DHTML效果工具栏

      

a)事件列表            b)动画效果列表               c)效果设置列表

11-35  3个下拉列表框

事件“鼠标悬停”指的是当鼠标指针停留在设置了DHTML的元素上时,动画启动。

事件“网页加载”指的是当访问者在浏览器上打开该Web网页时,动画启动。

在图11-35a)所示的事件列表中不同的事件,对应应用下拉列表框中不同的动画效果列表,如图11-35b)所示为“网页加载”事件对应的动画效果。而不同的动画效果,在第三个下拉列表框中又对应不同的效果选择,如图11-35c)为“飞入”对应的效果选择。

要删除动画效果,选中设置的动画的元素,在DHTML效果工具栏上单击删除效果按钮即可。

2.网页过渡效果

网页过渡效果是给整张Web网页设置一个动画。比如当访问者打开或者关闭站点时,设置一个Web网页的过渡效果,会让访问者觉得很友好。

设置Web网页过渡效果的操作步骤如下:

1)打开有设置过渡效果的Web网页。

2)执行格式网页过渡”菜单命令,打开如图11-36所示的网页过渡对话框。在对话框的左侧事件下拉列表框中选择一个事件,如“进入网页”。若用户想让事件发生后过渡效果重复出现,在周期文本框中设定一个效果出现的时间间隔,否则效果只是在事件发生时产生一次。最后在过渡效果中选择一种过渡效果。

11-36  网页过渡对话框

3)设置完毕,单击确定按钮。

以上的两种动画设置完毕以后,用户可以进入网页视图的预览模式下预览一下用户的效果。

11.3.8  应用超链接

Web网页中,超链接是一种核心技术,使用超链接将一个网站中的各个Web网页连接起来。不仅如此,超链接还延伸到了整个Internet,所谓“互联网”,就是依靠超链接实现“互联”。

Web网页中,可以给文本或者图片设置超链接,方法和前面介绍的一样。

1)在Web网页中选中要设置超链接的文本或者图片。

2)在常用工具栏上单击插入超链接按钮,或者直接按CtrlK组合键,打开插入超链接对话框,如图11-37所示。然后便可设置超链接,如在地址文本框中输入要链接的网站。

11-37  插入超链接对话框

3)设置完毕单击确定按钮。

在一个网站内部设置超链接时,一定要设成相对路径。因为一般是先在自己计算机上做好网站,然后再发布到Web服务器上,这样绝对路径将改变。举个例子说明,假设网站的Web网页均在同一个路径“C:/My Documents/My Webs”下,此时用户在地址文本框中输入的链接地址就不要写成绝对路径“C:/My Documents/My Webs/Interest.htm”,而输入相对路径“Interest.htm”即可。这样即使网站“搬家”,只要那些Web网页仍在My Webs文件夹中,链接也不会出错。

一个Web站点的超链接是很多的。比如有5Web网页,在这5Web网页的每一个Web网页上均要设定链接到其他4Web网页的超链接,这样就必须反复设定4×520次超链接,当Web网页很多时,将会很烦琐。这时使用链接栏(或称导航条)能方便地解决这个问题。

1)在Web网页上确定插入点(光标位置)。

2)执行插入Web组件”菜单命令,打开插入Web组件对话框,在左侧的组件类型列表框中选择链接栏”选项,然后在选择栏类型列表框中选择“包含自定义链接的链接栏”选项,如图11-38所示。

11-38  插入Web组件对话框

3)单击下一步按钮,将打开插入Web组件对话框,如图11-39所示,从中选择适当的链接栏样式后,单击下一步按钮。

4)在弹出的对话框中选择导航栏的方向,如图11-40所示,最后单击完成按钮。

    

11-39   插入Web组件对话框              11-40  插入Web组件对话框

5)此时将弹出一个对话框,提示用户输入新链接栏的名称,确定之后将打开链接栏属性对话框,单击添加链接按钮,便可为用户的链接栏添加链接,如图11-41所示。

6)设置完毕,单击确定按钮,Web网页上即自动生成了一个链接栏,如图11-42所示。

 

11-41  链接栏属性对话框               11-42  Web网页上生成的链接栏

双击链接栏,将打开链接栏属性对话框。单击链接栏,便可将其选中,按Delete键即可将其删除。