FrontPage 2003 网页制作入门

1. FrontPage 2003网页制作入门 一、创建站点 二、 视图、导航栏与共享边框 三、 网页的基本操作 四、 网页中的多媒体 五、 超级链接的使用 六、 网页中表格的使用 七、 网页中表单的使用 八、 网页中框架的使用 九、 动态网页 十、 发布站点

2. 一、创建站点 • 网页是构成WWW的基本组成单位，在网页中，可包含文字、声音、图形、图象、动画等信息，还可以包含超链接，使得可以从一个页面快速跳转到另一个页面。 • 网页是以网页文件的形式制作和保存，网页文件的扩展名是.htm或.html • 网站（Web Site）是WWW上的一个结点，网站中保存了多个网页以及站点结构，网页间用超链接联系。网页可以是站点的一部分，也可以独立存放，但只有当网页存放到网站中时，网页的许多特性才有效。 • 每个站点都有一个主页（首页），通过主页上的超链接，可以进入其他网页。通常，主页文件名为index.htm或default.htm。

3. 一、创建站点 • Frontpage 2003是Office 2003的组件之一，运行Frontpage与启动Office其他组件相同。FrontPage的主窗口中有一个视图栏，包含：网页、文件夹、报表、导航、超链接、任务。 • 1、网页。有“普通”、“HTML”和“预览”3张选项卡，可以在“普通”或“HTML”中创建、编辑网页信息，并可在“预览”中预览网页制作效果。 • 2、文件夹。用于管理站点中的网页文件夹和网页文档，可进行新建、复制、删除、移动操作。 • 3、报表。用于对网站中的文件和超链接等信息进行统计，有助于维护站点。 • 4、导航。用于对站点结构的管理，可以创建网页、更改网页间的互相链接结构。 • 5、超链接。显示站点中每一页的超链接。 • 6、任务。用于记录与创建和Web站点有关的所有细节，对于大型站点和有许多人参加创建的站点，维护管理十分有效。

4. FrontPage 2003主窗口

5. 一、创建站点 新建站点对话框 • 1、创建新站点 在FrontPage窗口中执行“文件”→“新建”→“站点”命令，在如图所示的对话框中，选择“只有一个网页的站点”模板，并指定新站点的位置，最后单击“确定”按钮。

6. 一、创建站点 • 2．新建网页 • 方法一：单击工具栏上“新建普通页面”按钮即可创建一个新的空白网页。 • 方法二：执行“文件” → “新建” → “网页” ，打开“网页模板”对话框，FrontPage提供了3套（常规、框架网页、样式表）共50种不同的模板供用户选择。 • 方法三：在FrontPage的文件夹列表框中，可以直接新建网页。只要在文件夹列表框的空白位置或某个文件夹上单击鼠标右键，选择“新建”命令，在右侧的选项中选择“网页”，可在根目录下或所选文件夹中创建一个新网页。 • 3．保存网页 • 工具栏上的“保存”按钮或“文件”→“保存”命令，均可保存当前网页。 • 若在网页中添加了图片、声音文件、ActiveX控件或其他对象，保存网页时系统将会提示将它们保存在相同的目录下。

7. 新建网页对话框

8. 二、视图、导航栏与共享边框 • FrontPage2003的视图 • “网页”视图：可以对网页的内容进行编辑和修改，但无法了解网站的整体结构。 • “文件夹”视图：用来查看网站中的文件夹的分布情况。类似资源管理器。 • “报表”视图：把许多视图以报表的形式列在一张表里，更方便管理网站。 • “导航”视图：表示各网页之间的层次关系。 • “超链接”视图：是详细显示各个文件之间超链接关系的一种视图。一般以一个网页文件为中心，发散地表示出链接的关系。 • “任务”视图：用来维护一个动态项目表的视图。

9. 二、视图、导航栏与共享边框 • 导航栏 • 导航栏是根据导航视图中网站结构自动建立的，由一组按钮或文本组成的超链接构成。 • 目的是为了用户在每一个网页上都能很方便地访问到其他相关的网页。 • 共享边框 • 是站点中一个或多个网页的公共区域，包含的内容将在该共享边框的每一个网页中出现。 • 可以在网页的顶部、左边、右边、底部创建共享边框。 • 通常把导航栏插入到网页顶部和左边的共享边框中。

10. 三、网页的基本操作 • 网页的创建、打开、保存、打印和关闭 • “文件”菜单中的相关命令。 • 网页的主题 • 主题是一种预先设计的元素与色彩方案，可将站点的所有页面和谐统一。 • 方法：“格式”菜单→“主题”命令→打开“主题”对话框 • CSS：级联样式表，可以使用CSS统一修改任何HTML样式标签如标题、段落文本的外观，或者自定义新的样式。 • 网页横幅 • 位于网页顶端，是一条可以自己选定的横幅标志，类似于广告牌。 • 可以是图片或文本形式。

11. 三、网页的基本操作 • 文本的编辑和格式化 • 包括网页标题、网页中字体的大小、颜色、各种效果及段落样式的设置等。 • 方法一：是先选中要修饰的文字，单击“格式”菜单中对应命令，例如“字体”命令，打开字体对话框。 • 方法二：用鼠标右键弹出快捷菜单，选择字体属性。选择对话框中的字体、字型、大小、效果和颜色等选项，单击“确定”按钮使设置有效，并关闭字体对话框。 • 方法三：直接通过格式工具栏上的按钮完成。在网页设计时最好使用比较常见的字体。否则，如果浏览者计算机上没有安装这种字体，那么使用这种字体的文本将不能正常显示。 • 举例:（文本字体、段落、样式）

12. 三、网页的基本操作 • 插入特殊对象 • 符号。单击“插入”菜单→“符号”打开符号对话框，选择合适的符号进行插入即可。 • 水平线。方法是：先将光标定位到要插入水平线的位置，再执行“插入”→“水平线”命令即可。双击已插入的水平线可设置水平线的属性（宽度、高度、对齐方式和颜色等）。 • 注释。注释可便于网页的维护。先定位插入点，再执行“插入”→“注释”命令，可打开“注释”对话框。注释标识文字只能在普通查看方式下显示。 • 时间戳。时间戳包含的日期和时间域会在网页被修改时自动更新。插入时间戳的方法是：将光标移到插入点，执行“插入”→“日期和时间”命令，打开“日期和时间”对话框。

13. 水平线属性对话框 日期和时间对话框

14. 四、网页中的多媒体 • 插入图片 • 定位光标→工具栏上的“插入文件中的图片“按钮 • “插入”菜单→“图片”→“来自文件”命令。 • “插入”菜单→“图片”→“剪贴画”命令可打开Microsoft剪辑库，用户可以选择合适的剪贴画插入到网页中。 • 设置图片属性 • 鼠标右键单击某一图片，执行“图片属性”命令，选择“图片属性”对话框中“外观”标签，可以设置图片的大小、对齐方式、图片的边框等。 • 举例:图片属性的设置

15. 图片属性对话框 图片工具栏

16. 四、网页中的多媒体 • 设置背景图片和颜色 • 背景可由“背景图片”和无图片的“背景颜色”构成。 • （1）添加“背景图片”的方法： • ① “格式”菜单 → “背景”命令 → “背景”选项卡； • ②鼠标右键单击FrongPage编辑区，选择“网页属性”命令中的“背景”选项卡。 • （2）设置网页“背景”颜色和“文本”颜色的方法： • ① 使用“背景”选项卡的“颜色”区域，可以设置“背景”、“文本”、“超链接”的颜色。 • ③ 使用背景图片时，所设置的背景颜色将被图片覆盖。

17. 四、网页中的多媒体 • 图片保存 • 若图片只用于一个独立的页面中，建议将图片文件与网页文件放在同一个目录。 • 若图片供某个站点中的网页使用，建议专门建立一个存放图片的文件夹，例如images文件夹。 • 网页中应用声音、动画和视频 • FrontPage2003支持的声音文件主要是PC上通用的WAV和MIDI音乐。 • 添加背景音乐 • 在网页上单击右键，在快捷菜单中选择“网页属性”

18. 五、超级链接的使用 • 超链接是 Web 的精华。超级链接是实现页面之间相互跳转的导航路径，创建超链接要指定起点和目标地址。 • 超链接一般分为文本链接和图片链接两种表现形式，就超链接的方式来说，可分为以下几种： • 1、WWW 超链接 用于访问WWW服务器，访问时使用HTTP即超文本传输协议，其URL的格式例如： http://www.ywicc.net.cn • 2、FTP超链接 用于访问FTP服务器，定义 URL 时必须使用 FTP 协议形式，如ftp://172.16.1.11 • 3、BBS 超链接 建立一个 BBS 超链接可以通过两种方法：一种是以 HTTP 协议的方式建立，另一种是以TELNET协议的方式建立，同一个 BBS 的超链接的 URL 可以同时使用 HTTP 协议和 TELNET 协议形式。 • 4、E-MAIL超链接 当定义了 E-MAIL超链接后，不需要知道对方的E-MAIL地址就可以发送电子邮件。一个E-MAIL超链接的URL必须使用MAILTO协议，如：mailto:Huangh@ywu.cn • 5、TELNET超链接 其超链接URL使用TELNET协议形式，如：telnet://xx.yy.zz 。

19. 五、超级链接的使用 • 超链接的目标地址有两种 • 绝对URL • 相对URL • 方法一：选定文本或图片，单击常用工具栏上的“超链接”按钮 • 方法二：选定文本或图片，单击鼠标右键，从弹出的快捷菜单中选择“超链接”命令，打开如图的对话框。 • 编辑超链接 • 方法：选中某个超链接，单击鼠标右键，选择“超链接属性”命令 • 或者执行“插入”→“超链接” →“编辑超链接”对话框，用户可以修改超链接的目标地址，或者删除目标地址取消该超链接。 • 浏览某个网页时，用不同的颜色区别超链接的未访问、正在访问和已访问3种情况。 • 方法：在网页空白处单击右键，选择“网页属性” • 或者执行“格式”→“背景” →“网页属性” →“背景”选项卡 • 举例：超链接设置

20. 插入超链接对话框 插入超链接的邮件对话框

21. 五、超级链接的使用 • 设置热点 • 热点是图像上具有超链接功能的区域，一幅图片上可以包含若干个热点。热点形状可以是矩形、圆形或多边形，热点位置可自行确定。 • (1)对整个图片创建一个超链接 • 方法一：与创建文本超链接相同。 • 方法二：选中图片后，单击鼠标右键，从快捷菜单中选择“图片属性”命令，在“常规”选项卡的“默认超链接”选项组中设置该图片的链接对象，即目标地址。 • 方法三：在原始图片与它对应的缩微图标之间建立链接关系。先在网页上插入一个图片，并选中它，单击图片工具栏中的“缩微”按钮，这时网页中出现一个与所选图片相对应的缩微图标。在浏览网页时，单击缩微图标即可跳转到原始图片。 • 举例：热点设置

22. 创建超链接——图片对话框

23. 五、超级链接的使用 • (2)对图片的某一部分创建超链接 • ① 选中某个欲设置热点的图片； • ② 在图片工具栏中选择合适的热点形状，鼠标成铅笔形状，将光标定位到需创建热点区域的左上角或右下角，然后拖动鼠标形成一个热点区域，松开鼠标后自动弹出“创建超链接”对话框； • ③ 在“创建超链接”对话框中设置要链接的URL地址（包括网址、文件名或电子邮件地址） • (3)在图片上建立文本热点（即在图片在又叠加文本） • ① 选定图片，单击图像工具栏上插入文本图标按钮，在图片上出现一个文本框，输入所需要的文字； • ② 双击文本框的边框，在弹出的“创建超链接”对话框中设置要链接的URL地址。

24. 五、超级链接的使用 • 书签的使用 • 当网页文件很长，超出显示屏幕时，要快速寻找网页中某个专题的内容是比较困难的。这时可以在各个专题上加上“书签”，浏览者可以通过单击书签进行跳转。 • 事实上“书签”也是一种超级链接，与一般超级链接不同的是，书签是在同一网页中的不同位置进行链接定位。 • 举例，如何创建书签？ • ① 确定各个标题对应的跳转位置，单击“插入”→“书签”命令，打开“书签”对话框，输入书签名称后“确定”，即可创建一个书签。 • ② 定义完书签后，就可以创建链接到该书签的超链接。方法与创建超链接的方法相同，只是选择的目标文件不是URL地址，而是“书签”按钮。

25. 创建书签

26. 选择书签

27. 六、网页中表格的使用 • 创建表格 • 执行“表格”→“插入”→“表格”命令，设定行数和列数，即可。 • 对行和列的编辑操作 • 一个单元格：单击单元格。 • 行或列：在某一行的左边或某一列的上面，单击鼠标就会选中一行或一列；或者单击“表格”→“选定”→“行（或列）”命令；或者Alt键+单击。 • 块：先选择一个单元格或一行(列)，按下鼠标左键在单元格上拖拽。 • 插入行或列。在要插入行或列的某个单元格中，单击鼠标右键，选择“插入行”或“插入列”命令，就会在所在行的上方，或所在列的左侧添加。 • 删除：选定行或列后执行“表格”→“删除单元格”命令，即可。 • 格式化表格 • 选定表格或单元格，执行“表格”→“表格属性”命令，打开对应的对话框。可以设置水平、垂直对齐；加边框架；底纹、背景、大小等。

28. 七、网页中表单的使用 • 在网页设计时经常需要使用表单，例如登记表、订单、文卷调查表等，主要负责数据的采集，以增强Web站点的交互功能。 • 一个表单有三个基本组成部分： • 表单标签：用于申明表单，定义采集数据的范围。 • 表单域：包括文本框、文本区、复选框、选项按钮、下拉框、按钮、图片和标签等。 • 表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器或者取消输入。 • 使用向导创建表单 • (1) 执行“文件”→“新建”→“网页”命令，从“新建网页”任务窗格中选定“网页模板”选项，在弹出的“网页模板”对话框中，单击“常规”标签，选中“表单网页向导”，单击“确定”按钮，弹出“表单网页向导”对话框，单击“下一步”按钮。

29. 表单 表单网页向导1

30. 表单网页向导2

31. 七、网页中表单的使用 表单网页向导3 • 在“在选择此问题要收集的输入类型列表框”中选中某种类型，如个人信息，这时在“说明栏”中将提示应输入的具体内容。单击“下一步”按钮，弹出如图所示的对话框，在此应设定收集信息的项目，如姓名、年龄、性别等。

32. 表单向导创建的表单

33. 七、网页中表单的使用 • 保存表单 • 表单制作完成后，还需要设置填表人所提交的表单内容的保存方式。默认方式是以文本文件保存。 • 设置方法：在表单中单击鼠标右键，快捷菜单中选择“表单属性”命令，在“发送到”选项中设置， • 可以输入目标文件名、电子邮件地址、发送到数据库或其他处理程序中。 • 表单默认保存到当前站点的——private文件夹。 • 举例：表单创建

34. 表单属性对话框

35. 八、网页中框架的使用 • WWW上的大多数网页都是框架网页，其主要特点是将浏览器窗口分割成不同的区域，每个区域呈现不同的网页内容。 • 框架网页中最大的区域通常作为主框架区，频繁变化的内容一般安排在该区域中显示。除主框架区外的其他区域相对稳定，常用于显示框架的标题和目录等。 • 使用框架网页的优点是可以避免浏览窗口的频繁切换。 • 创建框架网页 • 可以利用FrontPage提供的模板创建框架网页。 • 方法：单击“文件”→“新建”→“网页或站点”命令，从显示的“新建网页或站点”任务窗格中选择“网页模板”选项。

36. 使用框架 网页模板对话框

37. 八、网页中框架的使用 • 在“框架网页”标签中选定某种模板，如“嵌套式层次结构”模板，单击“确定”按钮即可生成与所选模板对应的框架网页。 • 网页中每一个框架都有两个按钮：“设置初始网页”和“新建网页”按钮。 • 单击“设置初始网页”按钮将弹出“插入超链接”对话框，可在此设定该框架最初显示的网页地址。 • 单击“新建网页”按钮，将出现一个空白网页供用户创建新的内容。 • 设置框架属性 • 在框架中单击鼠标右键，选择“框架属性”命令； • 或者选中某一框架，单击“框架”→“框架属性”命令 • 可以设置框架的名称、大小、边距以及是否显示滚动条等。 • 框架拆分：先选中要拆分的框架，然后执行“框架”→“拆分框架”命令，打开“拆分框架”对话框，选定拆分方向即可。

38. 框架网页

39. 框架属性对话框

40. 八、网页中框架的使用 • 设置目标框架 • 在使用框架网页时，通常只需设定其中的一个或几个框架作为浏览窗口，因此，要对它们设置超链接。不仅要指定超链接的地址，还要指定目标框架名称。通常的做法时：目录框架作为标题框架的目标框架，即单击标题框架中的某个链接将改变目录框架的显示内容；主框架是目录框架的目标框架，即单击目录框架中的某个链接将改变主框架的显示内容。 • 以图4.66所示的框架页面为例，把中间框架作为目录框架中某个超链接的目标框架，可以按以下方法进行设置： • 1、在要设置超链接的某个超文本（例如个人资料）上单击鼠标右键，选择“超链接属性”命令，打开“编辑超链接”对话框。 • 2、设置其链接目标地址后，单击对话框右侧的“目标框架”按钮，选择一个目标框架。 • 使用表格进行页面布局 • 先确定页面中各个对象所在的区域，再用表格将这些区域划分出来。将布局问题转变为表格设计。

41. 编辑超链接对话框

42. 目标框架对话框

43. 九、动态网页 • 文字的动态效果 • 选定网页中的某段文字，单击“格式“菜单”→“动态DHTML效果”命令。 • 事件：单击、双击、鼠标悬停、网页加载 • 应用：列表中提供了不同的选项。如“网页加载”时“从左侧”“飞入”等 • 选中某个已设置动态效果的网页元素，单击“DHTML效果”工具栏上的“删除效果”按钮即可取消动态效果。 • 悬停按钮 • 悬停按钮在外观上与普通按钮相同，但当鼠标指针移到这类按钮上时，会出现不同的显示效果。 • 动画效果：填充颜色、发光、凸出、凹进 • 方法：执行“插入”→“组件”→“悬停按钮”命令，打开 “悬停按钮属性”对话框，用户可设置悬停按钮的链接目标地址，在“效果”下拉列表框中选择动画效果。

44. 动态DHTML效果设置 “悬停按钮属性”对话框

45. 九、动态网页 • 使用字幕 • FrontPage允许使用滚动字幕，即在一个背景方框中，一些文字不停地沿着一个方向或来回地滚动。 • 执行“插入”→“组件”→“字幕”命令，打开 “字幕属性”对话框，可以设置字幕内容、文本格式、滚动方向、速度、表现方式等属性。 • 站点计数器 • 站点计数器用于统计网站被访问次数。 • 添加的方法为：定点插入点后，执行“插入”→“组件”→“站点计数器” 命令，打开 “站点计数器属性”对话框，设定计数器的位数（默认是5位）、样式等。 • 站点计数器必须在网站发布后才能正常显示。

46. “字幕属性”对话框 “站点计数器属性”对话框

47. 九、动态网页 • 搜索表单 • FrontPage提供搜索表单组件，它起到一个搜索引擎的作用，利用它可以实现对当前整个网站上所有文件进行全文搜索。 • 定位插入点后，执行“插入”→“组件”→“搜索表单”命令，打开“搜索表单属性”对话框。 • 网页过渡效果 • 设置网页过渡方式可以实现如随机分解、溶解等动态效果。会对网页浏览速度造成一定的影响。 • 执行“格式”→“网页过渡”命令，打开“网页过渡”对话框。在“事件”栏中选择一种事件，如进入网页、离开网页、进入站点和离开站点。在“过渡效果”列表框中选择一种效果，如“盒状收缩”，最后单击“确定”按钮。

48. 九、动态网页 “网页过渡”对话框 “搜索表单属性”对话框

49. 十、发布站点 • 站点发布是指将已经设计好的站点传送到Internet上的一个Web服务器上，这样Internet上的用户才能访问它。 • 步骤如下： • 打开需要发布的站点，执行“文件”菜单→“发布站点”命令 • 在“指定发布站点的位置”列表框中可以直接键入Web服务器的URL地址； • 选择发布网页的内容，设置完毕后，单击“发布”按钮。