1、1,6.4 网页制作工具FrontPage 2000,6.4.1 认识FrontPage 2000 6.4.2 创建站点 6.4.3 建立网页 6.4.4 网页的设计 6.4.5 框架网页 6.4.6 设计动态网页 6.4.7 设计交互式表单 6.4.8 站点的发布,2,6.4.1 认识FrontPage 2000,6.4.1.1 启动FrontPage 2000 6.4.1.2 认识FrontPage 2000窗口,3,6.4.1.1 启动FrontPage 2000,在“开始”菜单中选择“程序”级联菜单,单击“Microsoft FrontPage”命令,启动FrontPage 。,Fro
2、ntPage的窗口由标题栏、菜单栏、工具栏、视图栏、编辑窗口(工作区)、显示网页的方式及状态栏组成。,4,图 FrontPage 2000主窗口,5,6.4.1.2 认识FrontPage 2000窗口,FrontPage有6种视图模式,这为网页的编写、站点的管理提供了极大的方便。可以使用不同的视图方式来浏览站点、编辑和修改站点的结构。,6,1“网页”视图,图6.4.1.2 “网页”视图,7,2“文件夹”视图,图6.4.1.3 “文件夹”视图,8,3“报表”视图,图6.4.1.4 “报表”视图,9,4“导航”视图,图6.4.1.5 “导航”视图,10,5“超链接”视图,图6.4.1.6 “超链
3、接”视图,11,单击视图栏中的“任务”按钮,切换到“任务”视图模式。将需要做的工作以任务分配形式显示出来,进行简单的管理。,6“任务”视图,12,6.4.2 创建站点,6.4.2.1 新建站点 6.4.2.2 站点的基本操作,13,6.4.2.1 新建站点,1站点概念 2新建站点 3修改站点,14,站点实际上是一个文件夹,这个文件夹和普通的文件夹相比,具有了一些特殊的属性,它是计算机上的一个站点,而不是单纯的文件夹。,1站点概念,15,启动FrontPage,单击“文件”菜单,选择其中的“新建”级联菜单,单击“站点”命令,打开 “新建站点”对话框 。,2新建站点,16,图6.4.2.1 “新建
4、站点”对话框,17,单击“工具”菜单,选择“站点设置”命令,打开 “站点设置”对话框(或在导航视图中单击鼠标右键,从弹出的快捷菜单中选择“站点设置”命令,也可以打开此对话框)。在“常规”选项卡中可以改变站点的名称。,3修改站点,18,图6.4.2.2 “站点设置”对话框,19,6.4.2.2 站点的基本操作,1打开和关闭站点 2删除站点,20,单击“文件”菜单中的“打开站点”命令,打开 “打开站点”对话框。,1打开和关闭站点,21,图6.4.2.3 “打开站点”对话框,22,单击“编辑”菜单栏中的“删除”命令。打开 “确认删除”对话框。,2删除站点,如果要将整个站点删除,则选中“删除整个站点”
5、单选按钮;,如果不想将该站点下的文件删除,则可以选中“只删除此站点中的FrontPage信息,保留所有的其他文件和文件夹”单选按钮,然后单击“确定”按钮。,采用后一种方法删除站点后,该站点将变为一个普通的文件夹。,23,图6.4.2.4 “确认删除”对话框,24,6.4.3 建立网页,6.4.3.1 新建网页 6.4.3.2 网页的基本操作,25,6.4.3.1 新建网页,创建一个新的网页有三种方法:使用空白页、使用向导和使用模板。单击“文件”菜单,从下拉菜单“新建”的级联菜单中选择“网页”命令,打开“新建”对话框。,单击“常规”选项卡,在列表框中显示了FrontPage提供的创建网页的26种
6、模板,使用各类模板可以创建不同类型的网页。,26,图6.4.3.1 “新建”网页对话框,27,6.4.3.2 网页的基本操作,1打开网页 2保存网页,28,从本地磁盘或局域网中打开网页。,1打开网页,单击“文件”菜单中的“打开”命令,或单击工具栏上的“打开”按钮 。打开 “打开文件”对话框。在“查找范围”下拉列表框中选择站点,从文件列表中选定要打开的文件。,29,图6.4.3.2 “打开文件”对话框,30,从Web站点中打开网页。,单击“搜索Web”图标按钮 ,打开IE浏览器窗口,从中选择所需的网页。,打开最近使用过的网页。,单击“文件”下拉菜单中的“最近使用的文件”级联菜单,从中选择最近访问
7、过的网页即可。,31,单击“文件”菜单中的“保存文件”命令,打开 “另存为”对话框,可以选择网页文件的“保存位置”,输入网页文件的“文件名”,选择网页文件的“保存类型”。单击“更改”按钮,在打开的“设置网页标题”对话框中可以更改网页的标题。,2保存网页,32,图6.4.3.3 “另存为”对话框,33,6.4.4 网页的设计,6.4.4.1 文本编辑 6.4.4.2 设置网页背景与插入图像 6.4.4.3 表格 6.4.4.4 超级链接,34,6.4.4.1 文本编辑,1编辑文本 2图像列表 3可折叠列表 4水平线,35,FrontPage中经常使用的编辑操作有:选中文本、删除、剪切、复制、粘贴
8、、查找、替换、文本插入等。文字格式设定有:字体、字型、字号、字体颜色、字符间距及各种字体修饰等。段落格式设定有:行间距、段间距、左右缩进、对齐方式等。,1编辑文本,36,图6.4.4.1 文本输入示例,37,图像列表就是将普通项目符号列表中的项目符号用图像代替。,2图像列表,38,图6.4.4.2 “项目符号和编号方式”对话框,图6.4.4.3 图像列表,39,通过折叠列表可以使列表像资源管理器中的文件夹一样,用鼠标单击才能显示下一级列表,再用鼠标单击又折叠起来,从而使页面清晰整洁。,3可折叠列表,40,图6.4.4.4 可折叠列表,41,水平线用于分割网页中的不同内容,可以把网页划分成不同的
9、主题部分。通常用于划分标题和主体部分。,4水平线,42,图6.4.4.5 “水平线属性”对话框,43,6.4.4.2 设置网页背景与插入图像,1设置网页背景 2插入图像,44,网页背景包括:背景颜色和背景图片。,1设置网页背景,背景颜色,鼠标右击网页编辑区,从弹出的快捷菜单中单击“网页属性”命令,打开“网页属性”对话框。单击“背景”选项卡,在“颜色”区中,可以从“背景”下拉列表中选择一种背景颜色,也可以进一步从“其他颜色”中选取自定义的颜色。,45,图6.4.4.6 “网页属性”对话框,46,背景图片,在 “网页属性”对话框中,选中“格式”区中的“背景图片”复选框,再单击“浏览”按钮,从打开的
10、 “选择背景图片”之“选择文件”对话框中查找满意的图片,或单击“剪贴画”按钮,可以从Microsoft剪贴画库中获取喜欢的图案。,47,图6.4.4.7 “选择背景图片”对话框,48,与背景图片类似,插入图片的具体方法:单击“插入”菜单,选择“图片”级联菜单中的“来自文件”命令,打开“图片”对话框,查找合适的图片文件,单击“确定”按钮。也可以在“图片”对话框中的“URL”中输入网址,从网上搜索适合的图片;或单击“剪贴画”按钮,选择适合的图案。,2插入图像,49,6.4.4.3 表格,在FrontPage中对表格的操作与Word中的操作方法基本一致,有四种创建表格的方法:“插入表格”命令、“插入
11、表格”按钮、手动绘制和文本转换为表格。,鼠标右击表格区,单击“表格属性”命令,打开“表格属性”对话框,可以设置“布局”的对齐方式、单元格边距与间距;“边框”的粗细、颜色;“背景”的颜色及使用背景图片等。,50,图6.4.4.8 制作表格的样例,51,图6.4.4.9 “表格属性”对话框,52,6.4.4.4 超级链接,1创建指向站点内的网页或文件夹的超链接 2创建指向Web站点上的网页或文件夹的超链接 3创建指向电子邮件的超链接 4删除超链接,53,1创建指向站点内的网页或文件夹的超链接,在网页视图模式下,先选中需要创建超链接的对象,单击工具栏上的“插入超链接”按钮 ,再从已经建立的网站中搜索
12、网页文件。,54,55,2创建指向Web站点上的网页或文件夹的超链接,在网页视图模式下,先选中需要创建超链接的对象,单击工具栏上的“插入超链接”按钮 ,再从URL下拉列表框中输入或选择要链接的Web站点地址,如站点。,56,3创建指向电子邮件的超链接,在网页视图模式下,先选中需要创建超链接的对象,打开“创建超链接”对话框,在URL下拉列表框中输入mailto:,或单击“制作发送电子邮件的超链接”按钮 ,打开 “创建电子邮件超链接”对话框,然后输入电子邮件地址。,57,图6.4.4.11 “创建电子邮件超链接”对话框,58,在网页视图模式下,先选中已建立超链接的对象,单击工具栏上的“插入超链接”
13、按钮,打开的“编辑超链接”对话框,将URL下拉列表框中的链接地址删除。或鼠标右击已建立超链接的对象,从弹出的快捷菜单中单击“超级链接”级联菜单中的“取消超级链接”命令。,4删除超链接,59,6.4.5 框架网页,6.4.5.1 创建框架网页 6.4.5.2 保存框架网页,60,6.4.5.1 创建框架网页,FrontPage为创建框架网页提供了10种网页模板,学习其中的“嵌套式层次结构”框架模板来创建框架网页的方法。,61,框架网页样例:,图6.4.5.1 “嵌套式层次结构”框架网页示例,62,单击“文件”下拉菜单中的“新建”,从级联菜单中选择“网页”命令,打开“新建”对话框,单击“框架网页”
14、选项卡。,图6.4.5.2 “新建”之“框架网页”对话框,63,选择“嵌套式层次结构”框架模板。创建了框架网页中各框架的初始网页后,就可以编辑、修改网页元素,添加超链接等。,图6.4.5.3 “嵌套式层次结构”框架网页,64,6.4.5.2 保存框架网页,在网页视图模式下,先选中要保存的框架网页,然后单击工具栏上的“保存文件”按钮,打开“另存为”对话框。要将每一个框架中所涉及到的网页都要保存。,65,图6.4.5.4 框架网页“另存为”对话框,66,6.4.6 设计动态网页,在网页中加入一些动态元素,如动态按钮、滚动字幕、计数器等,可以使网页生动、活泼。这种含有动态元素的网页称为动态网页(DH
15、TML)。,1动态字幕 2悬停按钮 3横幅广告 4站点计数器,67,创建水平滚动的文本消息字幕。,1动态字幕,在网页视图模式下,将光标放在要插入字幕的位置,或选择要显示在字幕中的文本。,单击“插入”菜单中的“组件”菜单,从级联菜单中选择“字幕”命令,打开“字幕属性”对话框。在“文本”框中输入字幕的内容,文本内容的长度没有限制(也可以在网页中选择文本,将其设置成字幕)。,68,图6.4.6.1 “字幕属性”对话框,69,在网页视图模式下,将光标置于要插入悬停按钮的位置。单击“插入”菜单中的“组件”菜单,从级联菜单中选择“悬停按钮”命令。,2悬停按钮,在“按钮文本”文本框中,输入将显示在悬停按钮上
16、的文本内容。在“按钮颜色”下拉列表框中为按钮选择一种前颜色。还可以在“背景颜色”下拉列表框中为按钮选择一种背景颜色。,设置按钮的悬停效果。包括:“效果” (共有七种)及“效果颜色” 等参数值。,70,图6.4.6.2 “悬停按钮属性”对话框,71,在网页视图模式下,将光标置于要创建横幅广告的位置。单击“插入”菜单中的“组件”菜单,从级联菜单中选择“横幅广告管理器”命令,打开“横幅广告管理器属性”对话框。,3横幅广告,在“宽度”、“高度”文本框中输入横幅广告显示区域的大小,其大小应该与广告图片的最大尺寸一致,该数值以像素为单位。在“过渡效果”下拉列表框内选择横幅广告中每个图片之间切换的效果,并在
17、“每幅图片显示(秒)”文本框中输入每张图片在横幅广告中显示的秒数。,72,若希望横幅广告具有超链接功能,则在“链接到”文本框中输入超链接的目标URL。,单击“添加”按钮,从“添加横幅广告图片”对话框中选择要添加的图片文件。按照同样的方法,将其他的图片也添加到列表框中。通过“上移”、下移“按钮可以改变列表框中图片文件的显示顺序,这个顺序也是横幅广告中图片的显示顺序。,73,图6.4.6.3 “横幅广告管理器属性”对话框,74,图6.4.6.4 “添加横幅广告图片”对话框,75,在网页视图模式下,将光标移到要放置计数器的位置,单击工具栏上的“插入组件”按钮,从下拉菜单中选择“站点计数器”命令,打开
18、“站点计数器属性”对话框。在“计数器样式”列表栏中,可以选择自己喜欢的计数器类型。,4站点计数器,76,图6.4.6.5 “站点计数器属性”对话框,77,6.4.7 设计交互式表单,对于初学者,创建表单首选的方法是使用表单向导。启动表单向导的方法是:单击“文件”菜单中的“新建”菜单,从级联菜单中选择“网页”命令,在打开的“新建”对话框中双击“表单网页向导”模板。,78,图6.4.7.1 “表单网页向导”对话框之一,79,图6.4.7.2 “表单网页向导”对话框之二,80,图6.4.7.3 申请电子信箱表单示例,81,6.4.8 站点的发布,发布一个站点就是将已制作完成的站点上的文件复制到已经存
19、在的某个站点文件夹中,使得这些网页成为该Web站点中的网页。我们可以将制作的站点发布到Internet上已经存在的站点(如发布到提供免费的个人网页的站点),或是本地计算机上已经存在的Web服务器的站点。,发布站点的操作如下:,82,打开要发布的站点,单击常用工具栏上的“发布站点”按钮。单击“选项”按钮,拓展选项列表。,输入Web服务器的URL,或单击“浏览”按钮查找发布的位置。,83,如果需要将当前站点中的子站点也发布到Web服务器上,则选中“包含子站点”复选框。,若选中“只发布更改过的网页”选项,可以让FrontPage比较本地站点上的文件与Web服务器上的文件。,若选中“发布所有网页,覆盖目标站点上已有的同名网页”选项,将会把本地站点上的文件重新发布到Web服务器上。,如果要使用安全链接来发布,就选择“需要安全的链接”复选框。,84,图6.4.8.1 “发布站点”对话框,85,单击“发布”按钮后,开始发布。如果使用FTP发布站点,此时会出现一个要求输入用户名和密码的对话框。,图6.4.8.2 “要求提供用户名和密码”对话框,86,当站点发布完毕后,弹出发布成功的信息框。单击“单击此处可以查看您发布的站点”超链接,FrontPage将自动打开浏览器访问发布到Web服务器上的站点。,图6.4.8.3 发布站点成功信息框,