1、下一页下一页返回本章首页返回本章首页上一页上一页第6章 网页制作工具FrontPage 2000 6.1 认识FrontPage 20006.2 创建站点 6.3 建立网页6.4 网页的设计6.5 框架网页6.6 设计动态网页6.7 设计交互式表单6.8 站点的发布下一页下一页返回本章首页返回本章首页上一页上一页6.1 认识FrontPage 20006.1.1 启动FrontPage 2000 6.1.2 认识FrontPage 2000窗口 下一页下一页返回本章首页返回本章首页上一页上一页6.1.1 启动FrontPage 2000v在“开始”菜单中选择“程序”级联菜单,单击“Micros
2、oft FrontPage”命令,启动FrontPage 。FrontPage的窗口由标题栏、菜单栏、工具栏、视图栏、编辑窗口(工作区)、显示网页的方式及状态栏组成。 下一页下一页返回本章首页返回本章首页上一页上一页图6.1.1 FrontPage 2000主窗口 标题栏标题栏状态栏状态栏工具栏工具栏工作区工作区视图栏视图栏菜单栏菜单栏显示网页的方式显示网页的方式下一页下一页返回本章首页返回本章首页上一页上一页6.1.2 认识FrontPage 2000窗口 v FrontPage有6种视图模式,这为网页的编写、站点的管理提供了极大的方便。可以使用不同的视图方式来浏览站点、编辑和修改站点的结构
3、。 下一页下一页返回本章首页返回本章首页上一页上一页1“网页”视图图6.1.2 “网页”视图 下一页下一页返回本章首页返回本章首页上一页上一页2“文件夹”视图 图6.1.3 “文件夹”视图 下一页下一页返回本章首页返回本章首页上一页上一页3“报表”视图图6.1.4 “报表”视图 下一页下一页返回本章首页返回本章首页上一页上一页4“导航”视图图6.1.5 “导航”视图 下一页下一页返回本章首页返回本章首页上一页上一页5.“超链接”视图图6.1.6 “超链接”视图 下一页下一页返回本章首页返回本章首页上一页上一页6“任务”视图v 单击视图栏中的“任务”按钮,切换到“任务”视图模式。将需要做的工作以
4、任务分配形式显示出来,进行简单的管理。 下一页下一页返回本章首页返回本章首页上一页上一页6.2 创建站点 6.2.1 新建站点6.2.2 站点的基本操作 下一页下一页返回本章首页返回本章首页上一页上一页6.2.1 新建站点1站点概念 站点实际上是一个文件夹,这个文件夹和普通的文件夹相比,具有了一些特殊的属性,它是计算机上的一个站点,而不是单纯的文件夹。2新建站点 启动FrontPage,单击“文件”菜单,选择其中的“新建”级联菜单,单击“站点”命令,打开 “新建站点”对话框3修改站点 下一页下一页返回本章首页返回本章首页上一页上一页图6.2.1 “新建站点”对话框 下一页下一页返回本章首页返回
5、本章首页上一页上一页3修改站点v 单击“工具”菜单,选择“站点设置”命令,打开 “站点设置”对话框(或在导航视图中单击鼠标右键,从弹出的快捷菜单中选择“站点设置”命令,也可以打开此对话框)。在“常规”选项卡中可以改变站点的名称。 下一页下一页返回本章首页返回本章首页上一页上一页图6.2.2 “站点设置”对话框下一页下一页返回本章首页返回本章首页上一页上一页6.2.2 站点的基本操作1打开和关闭站点单击“文件”菜单中的“打开站点”命令,打开 “打开站点”对话框2删除站点 单击“编辑”菜单栏中的“删除”命令。打开 “确认删除”对话框如果要将整个站点删除,则选中“删除整个站点”单选按钮;如果不想将该
6、站点下的文件删除,则可以选中“只删除此站点中的FrontPage信息,保留所有的其他文件和文件夹”单选按钮,然后单击“确定”按钮。F采用前一种方法删除站点后,该站点将变为一个普通的文件夹。下一页下一页返回本章首页返回本章首页上一页上一页图6.2.3 “打开站点”对话框下一页下一页返回本章首页返回本章首页上一页上一页图6.2.4 “确认删除”对话框下一页下一页返回本章首页返回本章首页上一页上一页6.3 建立网页6.3.1 新建网页6.3.2 网页的基本操作 下一页下一页返回本章首页返回本章首页上一页上一页6.3.1 新建网页v 创建一个新的网页有三种方法:使用空白页、使用向导和使用模板。单击“文
7、件”菜单,从下拉菜单“新建”的级联菜单中选择“网页”命令,打开“新建”对话框。单击“常规”选项卡,在列表框中显示了FrontPage提供的创建网页的26种模板,使用各类模板可以创建不同类型的网页。下一页下一页返回本章首页返回本章首页上一页上一页图6.3.1 “新建”网页对话框下一页下一页返回本章首页返回本章首页上一页上一页6.3.2 网页的基本操作 1打开网页从本地磁盘或局域网中打开网页F单击“文件”菜单中的“打开”命令,或单击工具栏上的“打开”按钮 。打开 “打开文件”对话框。在“查找范围”下拉列表框中选择站点,从文件列表中选定要打开的文件下一页下一页返回本章首页返回本章首页上一页上一页图6
8、.3.2 “打开文件”对话框下一页下一页返回本章首页返回本章首页上一页上一页1打开网页从Web站点中打开网页单击“搜索Web”图标按钮 ,打开IE浏览器窗口,从中选择所需的网页。 打开最近使用过的网页 单击“文件”下拉菜单中的“最近使用的文件”级联菜单,从中选择最近访问过的网页即可。 下一页下一页返回本章首页返回本章首页上一页上一页2保存网页v 单击“文件”菜单中的“保存文件”命令,打开 “另存为”对话框,可以选择网页文件的“保存位置”,输入网页文件的“文件名”,选择网页文件的“保存类型”。单击“更改”按钮,在打开的“设置网页标题”对话框中可以更改网页的标题。 下一页下一页返回本章首页返回本章
9、首页上一页上一页图6.3.3 “另存为”对话框 下一页下一页返回本章首页返回本章首页上一页上一页6.4 网页的设计 6.4.1 文本编辑6.4.2 设置网页背景与插入图像6.4.3 表格6.4.4 超级链接下一页下一页返回本章首页返回本章首页上一页上一页6.4.1 文本编辑1编辑文本 2水平线3图像列表 4可折叠列表 下一页下一页返回本章首页返回本章首页上一页上一页1编辑文本vFrontPage中经常使用的编辑操作有:选中文本、删除、剪切、复制、粘贴、查找、替换、文本插入等。文字格式设定有:F字体、字型、字号、字体颜色、字符间距及各种字体修饰等。段落格式设定有F行间距、段间距、左右缩进、对齐方
10、式等。 下一页下一页返回本章首页返回本章首页上一页上一页 图6.4.1 文本输入示例 下一页下一页返回本章首页返回本章首页上一页上一页2水平线v 水平线用于分割网页中的不同内容,可以把网页划分成不同的主题部分。通常用于划分标题和主体部分。 下一页下一页返回本章首页返回本章首页上一页上一页图6.4.5 “水平线属性”对话框下一页下一页返回本章首页返回本章首页上一页上一页3图像列表v 图像列表就是将普通项目符号列表中的项目符号用图像代替。 下一页下一页返回本章首页返回本章首页上一页上一页图6.4.2 “项目符号和编号方式”对话框图6.4.3 图像列表下一页下一页返回本章首页返回本章首页上一页上一页
11、6.4.2 设置网页背景与插入图像 1设置网页背景 2插入图像 下一页下一页返回本章首页返回本章首页上一页上一页1设置网页背景v网页背景包括:背景颜色和背景图片。背景颜色F鼠标右击网页编辑区,从弹出的快捷菜单中单击“网页属性”命令,打开“网页属性”对话框。单击“背景”选项卡,在“颜色”区中,可以从“背景”下拉列表中选择一种背景颜色,也可以进一步从“其他颜色”中选取自定义的颜色。下一页下一页返回本章首页返回本章首页上一页上一页图6.4.6 “网页属性”对话框下一页下一页返回本章首页返回本章首页上一页上一页背景图片 在 “网页属性”对话框中,选中“格式”区中的“背景图片”复选框,再单击“浏览”按钮
12、,从打开的 “选择背景图片”之“选择文件”对话框中查找满意的图片,或单击“剪贴画”按钮,可以从Microsoft剪贴画库中获取喜欢的图案。 下一页下一页返回本章首页返回本章首页上一页上一页图6.4.7 “选择背景图片”对话框下一页下一页返回本章首页返回本章首页上一页上一页2插入图像v与背景图片类似,插入图片的具体方法:单击“插入”菜单,选择“图片”级联菜单中的“来自文件”命令,打开“图片”对话框,查找合适的图片文件,单击“确定”按钮。也可以在“图片”对话框中的“URL”中输入网址,从网上搜索适合的图片;或单击“剪贴画”按钮,选择适合的图案。 下一页下一页返回本章首页返回本章首页上一页上一页6.
13、4.3 表格 v在FrontPage中对表格的操作与Word中的操作方法基本一致,有四种创建表格的方法:“插入表格”命令、“插入表格”按钮、手动绘制和文本转换为表格。鼠标右击表格区,单击“表格属性”命令,打开“表格属性”对话框,可以设置“布局”的对齐方式、单元格边距与间距;“边框”的粗细、颜色;“背景”的颜色及使用背景图片等。下一页下一页返回本章首页返回本章首页上一页上一页图6.4.8 制作表格的样例下一页下一页返回本章首页返回本章首页上一页上一页图6.4.9 “表格属性”对话框下一页下一页返回本章首页返回本章首页上一页上一页6.4.4 超级链接 1创建指向站点内的网页或文件夹的超链接 2创建
14、指向Web站点上的网页或文件夹的超链接 3创建指向电子邮件的超链接 4删除超链接 下一页下一页返回本章首页返回本章首页上一页上一页1创建指向站点内的网页或文件夹的超链接v在网页视图模式下,先选中需要创建超链接的对象,单击工具栏上的“插入超链接”按钮 ,再从已经建立的网站中搜索网页文件。下一页下一页返回本章首页返回本章首页上一页上一页图6.4.10 “创建超链接”对话框下一页下一页返回本章首页返回本章首页上一页上一页2创建指向Web站点上的网页或文件夹的超链接v在网页视图模式下,先选中需要创建超链接的对象,单击工具栏上的“插入超链接”按钮 ,再从URL下拉列表框中输入或选择要链接的Web站点地址
15、,如站点。下一页下一页返回本章首页返回本章首页上一页上一页3创建指向电子邮件的超链接v在网页视图模式下,先选中需要创建超链接的对象,打开“创建超链接”对话框,在URL下拉列表框中输入mailto:,或单击“制作发送电子邮件的超链接”按钮 ,打开 “创建电子邮件超链接”对话框,然后输入电子邮件地址下一页下一页返回本章首页返回本章首页上一页上一页图6.4.11 “创建电子邮件超链接”对话框下一页下一页返回本章首页返回本章首页上一页上一页4删除超链接v 在网页视图模式下,先选中已建立超链接的对象,单击工具栏上的“插入超链接”按钮,打开的“编辑超链接”对话框,将URL下拉列表框中的链接地址删除。或鼠标
16、右击已建立超链接的对象,从弹出的快捷菜单中单击“超级链接”级联菜单中的“取消超级链接”命令。下一页下一页返回本章首页返回本章首页上一页上一页6.5 框架网页 6.6.1 创建框架网页 6.6.2 保存框架网页 下一页下一页返回本章首页返回本章首页上一页上一页6.6.1 创建框架网页v FrontPage为创建框架网页提供了10种网页模板,学习其中的“嵌套式层次结构”框架模板来创建框架网页的方法。 下一页下一页返回本章首页返回本章首页上一页上一页框架网页样例:v 图6.6.1 “嵌套式层次结构”框架网页示例 下一页下一页返回本章首页返回本章首页上一页上一页 单击“文件”下拉菜单中的“新建”,从级
17、联菜单中选择“网页”命令,打开“新建”对话框,单击“框架网页”选项卡。 图6.6.2 “新建”之“框架网页”对话框下一页下一页返回本章首页返回本章首页上一页上一页 选择“嵌套式层次结构”框架模板。创建了框架网页中各框架的初始网页后,就可以编辑、修改网页元素,添加超链接等。 图6.6.3 “嵌套式层次结构”框架网页下一页下一页返回本章首页返回本章首页上一页上一页6.6.2 保存框架网页v 在网页视图模式下,先选中要保存的框架网页,然后单击工具栏上的“保存文件”按钮,打开“另存为”对话框。要将每一个框架中所涉及到的网页都要保存。 下一页下一页返回本章首页返回本章首页上一页上一页图6.6.4 框架网
18、页“另存为”对话框 下一页下一页返回本章首页返回本章首页上一页上一页6.6 设计动态网页 v 在网页中加入一些动态元素,如动态按钮、滚动字幕、计数器等,可以使网页生动、活泼。这种含有动态元素的网页称为动态网页(DHTML)。 下一页下一页返回本章首页返回本章首页上一页上一页1动态字幕v创建水平滚动的文本消息字幕在网页视图模式下,将光标放在要插入字幕的位置,或选择要显示在字幕中的文本单击“插入”菜单中的“组件”菜单,从级联菜单中选择“字幕”命令,打开“字幕属性”对话框。在“文本”框中输入字幕的内容,文本内容的长度没有限制(也可以在网页中选择文本,将其设置成字幕)。下一页下一页返回本章首页返回本章
19、首页上一页上一页图6.6.1 “字幕属性”对话框下一页下一页返回本章首页返回本章首页上一页上一页2悬停按钮在网页视图模式下,将光标置于要插入悬停按钮的位置。单击“插入”菜单中的“组件”菜单,从级联菜单中选择“悬停按钮”命令。在“按钮文本”文本框中,输入将显示在悬停按钮上的文本内容。在“按钮颜色”下拉列表框中为按钮选择一种前颜色。还可以在“背景颜色”下拉列表框中为按钮选择一种背景颜色。设置按钮的悬停效果。包括:“效果” (共有七种)及“效果颜色” 等参数值。下一页下一页返回本章首页返回本章首页上一页上一页图6.6.2 “悬停按钮属性”对话框下一页下一页返回本章首页返回本章首页上一页上一页3横幅广
20、告在网页视图模式下,将光标置于要创建横幅广告的位置。单击“插入”菜单中的“组件”菜单,从级联菜单中选择“横幅广告管理器”命令,打开“横幅广告管理器属性”对话框。在“宽度”、“高度”文本框中输入横幅广告显示区域的大小,其大小应该与广告图片的最大尺寸一致,该数值以像素为单位。在“过渡效果”下拉列表框内选择横幅广告中每个图片之间切换的效果,并在“每幅图片显示(秒)”文本框中输入每张图片在横幅广告中显示的秒数下一页下一页返回本章首页返回本章首页上一页上一页3横幅广告若希望横幅广告具有超链接功能,则在“链接到”文本框中输入超链接的目标URL单击“添加”按钮,从“添加横幅广告图片”对话框中选择要添加的图片
21、文件。按照同样的方法,将其他的图片也添加到列表框中。通过“上移”、下移“按钮可以改变列表框中图片文件的显示顺序,这个顺序也是横幅广告中图片的显示顺序下一页下一页返回本章首页返回本章首页上一页上一页图6.6.3 “横幅广告管理器属性”对话框下一页下一页返回本章首页返回本章首页上一页上一页图6.6.4 “添加横幅广告图片”对话框下一页下一页返回本章首页返回本章首页上一页上一页4站点计数器v在网页视图模式下,将光标移到要放置计数器的位置,单击工具栏上的“插入组件”按钮,从下拉菜单中选择“站点计数器”命令,打开“站点计数器属性”对话框。在“计数器样式”列表栏中,可以选择自己喜欢的计数器类型。 下一页下
22、一页返回本章首页返回本章首页上一页上一页图6.6.5 “站点计数器属性”对话框下一页下一页返回本章首页返回本章首页上一页上一页6.7 设计交互式表单 v 对于初学者,创建表单首选的方法是使用表单向导。启动表单向导的方法是:单击“文件”菜单中的“新建”菜单,从级联菜单中选择“网页”命令,在打开的“新建”对话框中双击“表单网页向导”模板。 下一页下一页返回本章首页返回本章首页上一页上一页图6.6.1 “表单网页向导”对话框之一下一页下一页返回本章首页返回本章首页上一页上一页图6.6.2 “表单网页向导”对话框之二下一页下一页返回本章首页返回本章首页上一页上一页图6.6.3 申请电子信箱表单示例下一
23、页下一页返回本章首页返回本章首页上一页上一页6.8 站点的发布 v 发布一个站点就是将已制作完成的站点上的文件复制到已经存在的某个站点文件夹中,使得这些网页成为该Web站点中的网页。我们可以将制作的站点发布到Internet上已经存在的站点(如发布到提供免费的个人网页的站点),或是本地计算机上已经存在的Web服务器的站点。下一页下一页返回本章首页返回本章首页上一页上一页发布站点的操作如下:打开要发布的站点,单击常用工具栏上的“发布站点”按钮。单击“选项”按钮,拓展选项列表。输入Web服务器的URL,或单击“浏览”按钮查找发布的位置。如果需要将当前站点中的子站点也发布到Web服务器上,则选中“包
24、含子站点”复选框下一页下一页返回本章首页返回本章首页上一页上一页v若选中“只发布更改过的网页”选项,可以让FrontPage比较本地站点上的文件与Web服务器上的文件。v若选中“发布所有网页,覆盖目标站点上已有的同名网页”选项,将会把本地站点上的文件重新发布到Web服务器上。 v如果要使用安全链接来发布,就选择“需要安全的链接”复选框。下一页下一页返回本章首页返回本章首页上一页上一页图6.8.1 “发布站点”对话框下一页下一页返回本章首页返回本章首页上一页上一页单击“发布”按钮后,开始发布。如果使用FTP发布站点,此时会出现一个要求输入用户名和密码的对话框。 图6.8.2 “要求提供用户名和密码”对话框下一页下一页返回本章首页返回本章首页上一页上一页当站点发布完毕后,弹出发布成功的信息框。单击“单击此处可以查看您发布的站点”超链接,FrontPage将自动打开浏览器访问发布到Web服务器上的站点。 下一页下一页返回本章首页返回本章首页上一页上一页图6.8.3 发布站点成功信息框