第九章 FrontPage2000 网页设计工具

1. 第九章 FrontPage2000网页设计工具 江苏省上冈高级中学信息组张宏芳

2. 第九章 FrontPage2000网页设计工具 • FrontPage2000概述 • FrontPage2000的组成 • FrontPage网页设计基础 • FrontPage网页设计初步 • FrontPage网页设计的布局 • 制作动态网页 • 网页的发布

3. §1 FrontPage2000概述 FrontPage2000是Microsoft公司发布的一个集网站创建、发布、管理、网页设计、编辑等多种功能于一体的站点开发软件工具，可以完成创建、维护和管理WEB站点的全部工作。 早期的网页大多采用HTML语言编写，这是比较专业的。随着越来越多的可视化网页制作工具软件的出现，如FrontPage、HotDog、HomeSite、InterDev、DreamWeaver，你可以不需要掌握专业和复杂的程序知识，就能设计出专业水平的网页。

4. §2 FrontPage2000的组成 菜单栏 工具栏 视图栏 工作区 网页显示方式

5. 一、菜单栏 菜单栏包括文件、编辑、查看、插入、格式、工具、表格、框架、窗口、帮助等十个菜单组。 选择不同的菜单项，就可以执行不同的操作。

6. 二、工具栏 FrontPage把常用的一些操作以工具按钮的形式放在工具栏中，方便用户操作。 三、视图栏 FrontPage2000共有六种视图，视图栏是用来切换视图的。使用不同的视图可以从不同的侧面查看设计的Web站点。

7. 1．网页视图 网页视图是用来显示选中的网页，网页的创建、编辑、预览等基本操作都在网页视图中进行。双击文件夹列表中的某个HTML文件，在工作区就会显示该网页的内容。 2．文件夹视图 文件夹视图以列表的形式列出当前的Web站点的文件夹里所包含的文件。 3．报表视图 报表视图给出站点的一些统计信息。

8. 4．导航视图 通过导航视图可以方便地组织站点中各网页的层次关系，如果站点设置了导航功能，就可以先在这里设置好各网页的层次关系，然后用导航栏把这种层次关系表现出来 5．链接视图 超链接视图是用来查看选中网页中设置的超链接情况。 6．任务视图 任务视图里放着关于站点维护的任务列表，如果站点需要由多人维护，他们就可以通过任务列表知道工作的进展情况。

9. 四、工作区 在工作区可以完成创建、维护和管理WEB站点的全部工作。 五、网页显示模式 网页显示模式有普通、HTML和预览三种模式。在普通模式下可以编辑网页的内容以及设置各种格式。在HTML模式下可以看到当前编辑的网页的HTML文本文件，如熟悉HTML语言则可进行修改编辑。在预览模式下，可以看到当前编辑的网页在浏览器中的显示实况，但不能编辑网页。

10. §3 FrontPage网页设计基础 一、网页设计常用术语 1．统一资源定位器 统一资源定位器（URL）是指网络上某一资源的完整地址，是网络上不同的服务器或同一服务器上不同网页的标志。 例如：以下是一个完整的URL http://www.Ecit.Edu.Cn/Network/Index.asp 一个具体的网页文件 超文本输协议 一个www服务器的主机地址 该服务器下的一个目录名

11. 2．网络文件与网站 网络文件：是一个存放在网络服务器上的完整信息的集合体。它包含一个或多个网页，这些网页以一定的方式链接在一起，成为一个整体， 站点（网站）：用来描述一组完整的信息。网络文件与服务器共同构成。

12. 3．网页与主页 网页：网络文件的基本组成部分。网页中可以有文字、表格、图象、声音和视频等信息。 主页：既像普通网页一样，可以存放各种信息。又是一个特殊的网页，它是整个网络文件的起始点和汇总点。

13. 二、创建站点 1．创建站点 选择菜单栏中的“文件”、“新建”、“站点”菜单，在“新建”站点对话框中，选择站点的类型，并指定新站点位置和名称，单击“确定”按钮。 站点创建好后，会自动创建_Private和_images两个文件夹以及index.htm主页。 用来存放网页文件 用来存放站点中所用到的图形文件

14. 2．站点设置 单击“工具”、“站点设置”命令，在打开的如下图所示的“站点设置”对话框中，进行各个选项卡的设置。

15. 二、创建网页 1．规划和设计网页 （1）站点主题 （2）站点主页 “Index.htm”主页文件 （3）站点素材 文字、图形、图像、动画、视频及声音等 （4）设计Web的结构

16. 2．网页布局 网页的布局：包括页面的整体风格、各种页面元素的排列方式以及文本、图形的格式等规划。是网站工作的重要组成部分。 （1）页面尺寸 页面尺寸与显示器的大小及分辨率有关。分辨率越高，页面显示尺寸越大。 在网页设计过程中，一般不要使网页的尺寸超过二屏。

17. （2）网页布局的技术 1）表格布局 表格的制作、应用、编辑与在Word中相同。 后面将详细介绍

18. 2）框架布局 框架布局的特点是可以把一个网页页面分成几个独立的区域，每个区域就像一个独立的网页，可以实现在一个网页内显示多个HTML文件的功能。 后面将详细介绍

19. 3．创建网页 在对网页进行了规划和设计后，单击“文件”、“新建”、“网页”，在“新建”对话框中，你可以根据网页的要求，选择“常规”、“框架网页”、“样式表”中的任何一种格式来创建网页。

20. §4 FrontPage网页设计初步 一、文字编辑 网页中的文字输入及格式的设置与Word相同。 常见的文字编辑工作： 字体、字号、颜色、字符间距、特殊效果、边框底纹。查找、替换功能

21. 二、段落格式 设置方法也与Word相同。 段落格式的基本设置： 对齐方式、行距、间距等。

22. 三、项目符号和编号 设置文档的项目符号和编号，可使网页的文字信息结构化、层次化，文档更有条理，从而提高网页的可读性。 例如：

23. 四、水平线的操作 有时需要在文章的段落之间插入一条水平线，是页面段落的区分显得更加鲜明。 例如：

24. 五、网页背景 FrontPage默认使用白色作为网页的背景，用户也可以对网页背景的颜色进行设置。 例如： 除了用单一的颜色作为网页背景外，也可以选择图片或水印作为背景。 例如：

25. 六、图片的应用 • 把光标移到需要插入图片或视频的位置 • 从“插入”菜单中选择“图片”命令 • 再选择“剪切画”或“来自文件”或“视频” 应当注意：其图片的类型必须是Gif或Jpg。 图片的编辑： 单击选中网页图片后，在编辑区的下方会出现如下所示“图片”编辑工具栏，利用图片工具栏中的各种工具可以对图片进行各种处理。

26. 七、超级链接 • 超级链接(超链接):根据超链接源的不同分为文本超链接或图片超链接 • 1．创建文本超级链接 • 选中作为超链接源的文本 • “插入”菜单中选择“超链接”命令 • 从“创建超链接”对话框中,选择超链接目标后，单击“确定”按钮。

27. 2．创建图片的超链接 • （1）为整个图片建立超链接 • 选中作为超链接源的图片 • 在“插入”菜单中选择“超链接”命令 • “创建超链接”对话框中,选择超链接目标后，单击“确定”按钮

28. （2）在图片上创建热点区或文本热点 • 热点区域:图片的某个区域位置对应有超链接。 • 1）创建热点区 • 在“网页”的视图方式下选中要创建热点的图片 • 工具栏中选择创建热点的形状 • 将光标移到图片上，此时光标变成笔状，按住鼠标左键在图片上绘制对应图象的热点范围 • 松开鼠标左键，ForntPage将自动打开“创建超链接”对话框，为热点选择一个目标

29. 2）创建文本热点 • 在“工具”栏中选择“文本”工具 • 把文本框移到合适的位置，调整大小，输入文字 • 后面的操作方法与创建热点区完全相同。

30. §5 FrontPage网页设计的布局 表格不仅可以显示文本、图片、视频等网页元素，还是控制页面布局、规划网页的有效工具。

31. 一、使用表格布局 例如：一个典型的用表格制作的网页

32. 1．表格的设计 • 选择菜单栏中的“文件”、“新建”、“网页”菜单命令。在打开的“新建”对话框中选取网页样式，如“普通网页”选项卡，单击“确定”。 • 选择菜单栏中的“表格”、“插入”、“表格”菜单命令，插入一个二行一列表格，将表格第一行调整高度，把第二行拆分为九个单元格。然后，把第一单元格和第二单元格合并。 • 在第一个表格底下插入一个二行三列表格，并调整各行的高度。利用单元格的合并把第一行的第一单元格和第二单元格合并一个单元格。

33. 选取表格或单元格，按下鼠标右键，在弹出快捷菜单中选择“表格属性”或“单元格属性”菜单命令，在“表格属性”或“单元格属性”对话框中对各表格或单元格进行属性的设置。选取表格或单元格，按下鼠标右键，在弹出快捷菜单中选择“表格属性”或“单元格属性”菜单命令，在“表格属性”或“单元格属性”对话框中对各表格或单元格进行属性的设置。 • 分别在表格不同区域中进行文字编辑、图象编辑、设置背景、超级链接等编辑工作。

34. 二、使用框架布局 框架：可以将一个网页分割为几个独立的区域，每个区域是一个框架窗口，每个框架窗口都可以单独显示一个普通网页。 一个框架网页可包含多个不同的普通网页，普通网页的设计方法对框架网页都是有效的。

35. 1．创建框架网页 • 选择菜单栏中的“文件”、“新建”、“网页”菜单命令。在打开的“新建”对话框中选取“框架网页”选项卡，在给出的框架样式中选取需要的框架样式，如标题、页脚和目录，单击“确定”。 • 如有需要，可对框架布局进行一些调整。选中某个框架窗口，单击“框架”，选择“拆分框架”、“框架属性”、“删除框架”命令对框架进行布局调整。 • 框架样式有四个独立的区域，可以建立四个普通的网页，加上框架网页本身一共是五个网页。每个区域都有“设置初始网页”和“新建网页”两个按钮。单击“设置初始网页”是指定一个已经存在的网页作为该区域的初始网页，单击“新建网页”是为该区域创建一个网页。

36. 按照网页规划，对每个框架窗口进行网页设计，其方法与普通网页设计完全相同。 • 单击“文件”、“保存”，在弹出的“另存为”对话框的“文件名(N)：”中，首先输入框架网页文件名。然后，依次输入各框架窗口网页文件名。

37. 三、 使用表单布局 表单页：具有交互性的网页 表单页作用 ：收集浏览者输入的信息 ，实现网上调查、在线查询、网上订货和在线申请 1．表单和表单域的概念 表单域：有单行文本框、滚动文本框、复选框、单选按钮、下拉菜单、普通按钮、图象、标签等八种。 表单：由一系列的表单域组成的。每个表单域都有一个名称，用户填写的数据就是通过这些表单域的名字来传递的。 一般情况下，用户的表单提交后，都会有一个“确认表单”的页面呈现在用户的面前。

38. 2．表单网页的制作 例如：如下表单网页

39. 选择菜单栏中的“文件”、“新建”、“网页”菜单命令。在打开的“新建”对话框中选取网页样式，如“普通网页”选项卡，单击“确定”。 • 插入文字、水平线、背景图 • 将光标落在插入表单处，选择菜单栏中的“插入”、“表单”、“表单”菜单命令。此时，在插入点的位置上出现一个虚线框，产生了一个表单，表单自动生成了“提交”和“全部重写”两个普通按钮，设计者可根据规划调整表单的大小

40. 按表单的设计要求，在相应的位置插入对应的表单域。比如：先输入“姓名：”，选择菜单栏中的“插入”、“表单”、“单行文本框”就插入了“单行文本框”表单域，可以根据输入字符的多少调整文本框大小。用同样的方法插入插入其它的表单域，“个人爱好：”选择菜单栏中的“插入”、“表单”、“复选框”菜单命令，插入一个“复选框”。“意见和建议：”选择菜单栏中的“插入”、“表单”、“滚动文本框”菜单命令，插入一个滚动文本框，并调整大小。按表单的设计要求，在相应的位置插入对应的表单域。比如：先输入“姓名：”，选择菜单栏中的“插入”、“表单”、“单行文本框”就插入了“单行文本框”表单域，可以根据输入字符的多少调整文本框大小。用同样的方法插入插入其它的表单域，“个人爱好：”选择菜单栏中的“插入”、“表单”、“复选框”菜单命令，插入一个“复选框”。“意见和建议：”选择菜单栏中的“插入”、“表单”、“滚动文本框”菜单命令，插入一个滚动文本框，并调整大小。 • 保存表单网页

41. 3．处理表单结果 • 表单处理程序对表单的处理有四种方式： • 使用文本文件保存 • 使用电子邮件发送表单结果 • 将表单发送到一个指定的数据库、发送给其他对象 • 在默认的情况下，表单文件将自动存放站点中_private目录下，文件名“form-results.txt”的文本文件中。

42. 4．确认表单网页 用户填写好表单后，按“提交”按钮。当把表单提交出去后，在浏览器窗口会自动出现“确认网页”，使用户确认表单信息是否已正确发送出去。

43. §6 制作动态网页 使用字幕 创建悬停按钮 插入计数器 使用横幅广告

44. 一、使用字幕 • 选择菜单栏中的“插入”、“组件”、“字幕”菜单命令。弹出 “字幕属性”对话框。 • 在文本框中输入字幕的文字“热烈祝贺东华理工学院成立五十周年”并对方向、速度、表现方式、文本对齐方式、大小、重复等参数进行设置。单击“字幕属性”对话框中的“样式”，弹出“修改样式”对话框，单击“格式”按钮，进行字体、边框等参数的设置。之后，单击“确定”按钮。

45. 二、创建悬停按钮 • 悬停按钮的效果是，当鼠标放在悬停按钮上，其颜色和形状都会发生改变，具有动态效果。 • 将光标定位在要插入“悬停按钮”的“悬停按钮示例”位置上，选择菜单栏中的“插入”、“组件”、“悬停按钮”菜单命令，在 “悬停按钮属性”对话框中进行各项设设置。 • 单击【确定】按钮，而后，将文件保存。

46. 三、使用横幅广告 • 使用横幅广告可以使多个画面在横幅广告位置上循环显示，横幅广告适合制作一些商业性广告。 • 将光标定位在要插入“横幅广告”的位置上，选择菜单栏中的“插入”、“组件”、“横幅广告管理器”菜单命令，在弹出的如图9-19所示的“横幅广告管理器属性”对话框中进行宽度、高度、过渡效果、每幅图片显示时间、添加要显示的图片等各项设置。 • 单击【确定】按钮，而后，将文件保存。

47. 四、插入计数器 • 计数器是用来统计站点访问人数。 • 将光标定位在要插入计数器的位置上，选择菜单栏中的“插入”、“组件”、“站点计数器”菜单命令。 • 在打开的“站点计数器属性”对话框中选择一种计数器样式，单击“确定“按钮。而后，将文件保存。请注意，只有当你将站点发布到Web服务器，并设置了网站的FrontPage服务器扩展后，计数器才能正常显示。

48. §6-5 插入视频及音频文件 • 1．插入视频 • 在网页中播放视频文件有两种方法： • 将视频文件插入到网页的某个位置，使它在网页种播放 • 使用超级链接指向视频文件，当访问者单击该超级链接播放

49. 将光标定位在要插入视频的位置上，选择菜单栏的“插入”、“图片”、“视频”命令。将光标定位在要插入视频的位置上，选择菜单栏的“插入”、“图片”、“视频”命令。 • 在弹出的“视频”对话框中选取一个视频文件。 • 右击视频文件，从快捷菜单中选择“图片属性”，在 “图片属性”对话框中进行循环次数、循环延时、开始播放条件等设置。

50. 2．插入音频 • 在网页中播放音频文件也有两种方法 • 使用超级链接将音频文件放置到网页的某个位置上， • 把音乐作为网页的背景音乐。