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