ç¬¬ä¸ƒç« FrontPage 2003 的使用

1. 第七章 FrontPage 2003的使用 东北电力大学 信息工程学院

2. 本章教学目标 3 1 了解FrontPage 2003的基本概念 熟练掌握FrontPage 2003的基本操作 2

3. 7.1 FrontPage 2003的基本操作 FrontPage 2003的启动 1）在Windows的“开始”菜单中选择“所有程序” →“Microsoft Office”→“Microsoft Office FrontPage 2003”命令，即可启动FrontPage 2003。 FrontPage 2003操作界面

4. 7.1 FrontPage 2003的基本操作 FrontPage 2003的启动 2）在“开始”菜单中选择“程序”选项，再选择“Windows资源管理器”选项，在资源管理器窗口中双击网页文件的图标，启动FrontPage 2003。 3）在桌面上双击FrontPage 2003的快捷图标。 FrontPage 2003的退出 完成FrontPage 2003操作后，可以关闭FrontPage 2003，退出FrontPage 2003的方法如下： 1）在FrontPage 2003菜单栏上选择“文件”选项，再选择“退出”命令。 2）在FrontPage 2003窗口左上角双击窗口控制菜单按钮。 3）在FrontPage 2003窗口左上角单击窗口控制菜单按钮，在弹出的控制菜单中选择“关闭”选项。 4）按“Alt+F4”键，或单击FrontPage 2003窗口右上角的关闭按钮。

5. 7.1 FrontPage 2003的基本操作 创建网站 创建一个包含一个网页的站点 1）启动FrontPage 2003，然后进入其操作界面。 2）选择“文件”菜单→“新建”子菜单，这时右边的 “新建”任务窗格中就出现了“新建网站”和“新建 网页”选项，如图所示。 3）单击“新建网站”选项中的“由一个 网页组成的站”命令，马上就会弹出 一个“网站模板”对话框，如图所示。 在“指定新网站的位置”文本框中输 入新站点的位置，单击“只有一个网 站”图标，单击“确定”按钮。

6. 7.1 FrontPage 2003的基本操作 站点建立好之后，单击“视图”菜单中的“文件夹”命令，可以打开“文件夹”视图窗口，如图所示。

7. 7.1 FrontPage 2003的基本操作 创建一个空站点 单击“新建”任务窗格中的“新建网站”命令中的任何一项，都可以打开“网站模板”对话框，在对话框中单击“常规”选项卡，可以选择“空白网站”图标来创建一个空站点。 使用模板和向导创建站点 利用“个人网站”模板创建的个人站点主页

8. 7.1 FrontPage 2003的基本操作 设计主题 1）首先单击“任务窗格”的下拉按钮，然后选择“主题”项，在右 边的任务窗格中展开“主题”的任务窗格。 2）选择自己喜欢的主题后，在相应的主题右侧单击鼠标右键，在弹 出下拉菜单中选择将主题“应用于所选网页”，将“冰光”主题 应用于所选网页。也可以选择“自定义”选项，打开“自定义主 题”对话框，修改所选主题中的某些组成元素。

9. 7.1 FrontPage 2003的基本操作 导航条 导航条通常是由一组代表着网页间的链接关系的按钮或文本组成的，是实现网页间链接关系的手段。所谓导航结构，就是网页之间的组织结构（大多数情况下是树形结构）。 在导航视图中可执行的操作： 1）将现有网页添加到当前导航结构中。 2）添加网页标题。 3）在现有网页之下添加新网页。 4）从导航结构中删除网页。 5）保存更改而不切换视图。 6）编辑网页。

10. 7.2 编辑网页 创建网页 1、新建空白网页 1）单击“常用”工具栏中的“新建普通网页”按钮。 2）单击“文件”菜单，用鼠标指向“新建”命令。 单击“网页或站点”命令，在窗口右边的“新建”任务窗格中单击 “空白网页”。 3）也可以利用常用工具栏上的“新建”按钮右侧的下拉菜单，进行创 建新网页。 2、利用模板新建网页 1）单击“文件”菜单中的“新建”命令下的“网页或站点”，这样将 弹出“新建”任务窗格。 2）单击“其他网页模板”，系统会弹出 “网页模板”对话框。可以在 该对话框中选择不同类型的网页模板来创建新网页。

11. 7.2 编辑网页 编辑和修饰网页 设置字体 设置字号 设置字体颜色 设置字符间距 设置文字定位 1、修饰文本 2、插入项目符号和编号 3、插入水平线 4、插入时间标记 5、插入注释

12. 7.2 编辑网页 预览网页 • 通过预览视图，可以快速确定正在设计的网页是否会在Web浏览器中显示为所希望的样子。 • 预览视图对于预览尚不准备提交的设计意图更为有用。 选择浏览器中预览网页的方式

13. 7.2 编辑网页 使用图形 1、插入图片 1）插入来自文件的图片 2）插入来自Internet上的图片 3）插入FrontPage自带的剪贴画中的图片 注：把插入的图片都保存到网站的文件夹下，确保媒体图片链接的正确。

14. 7.2 编辑网页 使用图形 2、剪切图形 1）单击要剪切的图片，使图片工具栏显示出来。（或者单击鼠标右键，选择快捷菜单“显示图片工具栏”） 2）在工具栏中选择“裁剪”按钮。 3）调整裁剪框到适合的大小，移动到合适的位置。 4）单击“裁剪”按钮，图片即裁剪完毕。 3、编辑图片（利用工具栏） 4、图片属性设置（“图片属性”对话框） 5、图片与文本的对齐（图片属性外观）

15. 7.3 超链接 用文本和图片建立超链接 1、对文本建立超链接 • 链接到本网站中的其他网页 • 链接到其他网站中的网页 • 更改已经设置好的超链接 • 取消已经设置好的超链接 • 链接到电子邮箱 “插入超链接”对话框 2、在图片中建立超链接（建立热点区域） 书签（在页面间进行跳转） 1、插入书签 2、修改书签 “插入书签”对话框

16. 7.3 超链接 设置超链接颜色 网页属性→格式→设置超链接颜色 当前网页设置为“无主题” 创建热点 • 选中要创建热点的图形 • 创建热点 已经创建有4个热点的图片

17. 7.4 美化网页 认识样式表 • 样式是由唯一名称标识的格式特征集合。可以使用样式在一个简单的任务中快速设置一组网页元素的格式。使用样式能够简化网页的格式代码，加快下载显示的速度，也减少了需要上传的代码数量，大大减少了重复劳动的工作量。” 创建样式表 1、设置字体样式 1）打开素材文件。选中文本“饭店简介”，选择菜单中的“格式”→“样式”命令。 素材实例

18. 7.4 美化网页 2）弹出“样式”对话框，在对话框中选中要修改的样式，单击“修改”按钮。 3）弹出“修改样式”对话框，在对话框中单击“格式”按钮，在弹出的快捷菜单中选择“字体”选项。 4）弹出“字体”对话框，在对话框中将“字体”设置为华文新魏，字形设置为加粗，大小设置为18pt，颜色设置为红色。3）弹出“修改样式”对话框，在对话框中单击“格式”按钮，在弹出的快捷菜单中选择“字体”选项。 “样式”对话框 “字体”对话框 “修改样式”对话框

19. 7.4 美化网页 9）弹出“字体”对话框，在对话框中将字体设置为宋体，字形设置为普通，大小设置为12pt，颜色设置为绿色。 10）单击“确定”按钮，添加到“修改样式”对话框中，单击“确定”按钮，添加到“样式”对话框中。 11）单击“确定”按钮，应用字体样式。 12）保存文档，在浏览器中预览，效果如图所示。 预览效果图

20. 7.4 美化网页 创建样式表 2、设置段落样式 1）打开素材文件。 2）选中要应用样式的文本，选择菜单中的“格式”→“样式”命令。 3）弹出“样式”对话框，在对话框中选中要修改的样式，单击“修改”按钮。 4）弹出“修改样式”对话框，在对话框中单击“格式”按钮，在弹出的下拉列表中选择“段落”选项。 5）弹出“段落”对话框，在对话框中将对齐方式设置为右对齐，行距大小设置为1.5倍行距。 6）单击“确定”按钮，添加到“修改样式”对话框中，单击“确定”按钮，添加到“样式”对话框中。 素材实例

21. 7.4 美化网页 创建样式表 7）单击“确定”按钮，应用样式。保存文档，在浏览器中预览，效果如图所示。 预览效果图

22. 7.4 美化网页 创建样式表 3、设置边框样式 1）打开素材文件，如右图所示。 2）选择菜单中的“格式”→“样式”命令，弹出“样式”对话框，单击“新建”按钮。 素材实例

23. 7.4 美化网页 创建样式表 3、设置边框样式 3）弹出“新样式”对话框，在对话框中的“名称(选择器)”文本框中输入“biankp”，在样式类型下拉列表中选择段落。 “新样式”对话框 4）在对话框中单击“格式”按钮，在弹出的下拉列表中选择“边框”选项。 5）弹出“边框和底纹”对话框，在对话框中的“设置”选项区中单击“方框”，“样式”列表框中选择实线，颜色设置为绿色，宽度设置为3。 “边框和底纹”对话框

24. 7.4 美化网页 创建样式表 3、设置边框样式 6）单击“确定”按钮，添加到“新样式”对话框中，单击“确定”按钮，添加到“样式”对话框中。 7）单击“确定”按钮，新建样式。选中要应用样式的部分，在“样式”工具栏中，单击“类”文本框后面的下拉列表，应用样式。 8）保存文档，在浏览器中预览，效果如右图所示。 预览效果图

25. 7.4 美化网页 创建样式表 4、设置背景样式 1）打开素材文件。 2）选择菜单中的“格式”→“样式”命令，弹出“样式”对话框，在对话框中单击“新建”按钮。 3）弹出“新样式”对话框，在对话框中的“名称(选择器)”文本框中输入“beij”，在“样式类型”下拉列表中选择“段落”。 4）在对话框中单击“格式”按钮，在弹出的下拉列表中选择“边框”选项。 5）弹出“边框和底纹”对话框，在对话框中切换到“底纹”选项卡，在“图案”区域中单击“背景图片”文本框后面的“浏览”按钮，弹出“选择背景图片”对话框。 6）在对话框中选择图像2005128101236384646.jpg，单击“打开”按钮，添加到“背景图片”文本框中。 7）单击“确定”按钮，添加到“修改样式”对话框中，单击“确定”按钮，添加到“样式”对话框中。

26. 7.4 美化网页 创建样式表 4、设置背景样式 8）单击“确定”按钮，新建样式。选中要应用样式的部分，在“样式”工具栏中，单击“类”文本框后面的下拉列表，应用样式。 9）保存文档，在浏览器中预览，效果如图所示。 预览效果图

27. 7.4 美化网页 创建样式表 5、设置位置样式 1）打开素材文件。 2）选择菜单中的“格式”→“样式”命令，弹出“样式”对话框，在对话框中单击“新建”按钮。 3）弹出“新样式”对话框，在对话框中的“名称(选择器)”文本框中输入“j”，在“样式类型”下拉列表中选择“段落”。 4）在对话框中单击“格式”按钮，在弹出的下拉列表中选择“定位”选项。 5）弹出“定位”对话框，在对话框中将环绕方式设置为无，定位样式设置为绝对，在位置与大小区域中将左边设置为180，顶端设置为250，宽度设置为150，高度设置为80，Z-顺序设置为2。 “定位”对话框

28. 7.4 美化网页 创建样式表 5、设置位置样式 6）单击“确定”按钮，添加到“新样式”对话框中，单击“确定”按钮，添加到“样式”对话框中。 7）保存文档，在浏览器中预览，效果如右图所示。 预览效果图

29. 7.5 使用Web组件 使用字幕 • 先在网页中输入字幕的文本内容，然后选择文本执行插入字幕操作。 • 先设定好字幕文本的格式，包括字体、字形、字号和颜色等。 素材实例

30. 7.5 使用Web组件 使用字幕 1）打开素材文件，将光标放在要插入字幕的位置，选择菜单中的“插入”→“Web组件”选项。 2）弹出“插入Web组件”对话框，在对话框中的“组件类型”列表框中选择“动态效果”选项，在“选择一种效果”列表中选择“字幕”选项。 “插入Web组件”对话框

31. 7.5 使用Web组件 使用字幕 4）单击“完成”按钮，弹出“字幕属性”对话框，在对话框中进行相应的设置。 5）单击“确定”按钮，插入字幕。保存文档，在浏览器中预览，效果如下图所示。 预览效果图

32. 7.5 使用Web组件 插入交互式按钮 1）打开素材文件，将光标放在要插入交互式按钮的位置，选择菜单中的“插入”→“Web组件”选项。 2）弹出“插入Web组件”对话框，在对话框中的“组件类型”列表框中选择“动态效果”选项，在“选择一种效果”列表中选择“交互式按钮”选项。 “插入Web组件”对话框

33. 7.5 使用Web组件 插入交互式按钮 3）单击“完成”按钮，弹出“交互式按钮”对话框，在对话框中选择“按钮”选项卡，在“按钮”列表框中选择“发光胶囊2”，“文本”文本框中输入“旅游景点”。 4）在对话框中切换到“字体”选项卡，将“字体”设置为幼圆，字形设置为倾斜，字号设置为12，初始字体颜色设置为绿色，悬停时字体颜色设置为红色，按下时字体颜色设置为蓝色。 5）在对话框中切换到“图像”选项卡，勾选“保持比例”复选框。 “图像”选项卡

34. 7.5 使用Web组件 插入交互式按钮 6）单击“确定”按钮，插入交互式按钮。 7）保存文档，在浏览器中预览效果。 预览效果图

35. 7.5 使用Web组件 插入站点计数器 1）选择菜单中的“插入”→“Web组件”命令，弹出“插入Web组件”对话框。 2）在对话框中的“组件类型”列表框中选择“计数器”选项，在“选择计数器样式”列表中选择“黑底橙色数字”选项，如图所示。 3）单击“完成”按钮，弹出“计数器属性”对话框。 4）单击“确定”按钮，即可插入站点计数器。 “计数器属性”对话框

36. 7.6 使用表单 用表单网页向导创建表单 1）选择菜单中的“文件”→“新建”命令，弹出“新建”窗口。 2）在窗口中单击“其他网页模板”弹出“网页模板”对话框。 3）在对话框中选择“表单网页向导”选项，单击“确定”按钮，弹出“表单网页向导”对话框，介绍表单向导的作用。 “网页模板”对话框 “表单网页向导”对话框

37. 7.6 使用表单 用表单网页向导创建表单 4）单击“下一步”按钮，在弹出的对话框中可以选择添加、定义、表单内容。 5）单击“添加”按钮，在弹出的对话框中选择“选择此问题要收集的输入类型”，这里选择“联系信息”选项。 6）单击“下一步”按钮，在弹出的对话框中选择“请选择要从用户处收集的项目”。 7）单击“下一步”按钮，在弹出的对话框中设置表单网页的样式。 “选择要从用户处收集的项目 ”对话框 设置“显示”选项

38. 7.6 使用表单 用表单网页向导创建表单 8）单击“下一步”按钮，在弹出的对话框中设置提交表单的储存形式和储存该结果的文件名。 9）单击“下一步”按钮，出现完成向导设置对话框。 10）单击“完成”按钮，生成如下图所示的表单网页。 利用向导创建的表单网页

39. 7.6 使用表单 1、插入文本框 插入表单元素 2、插入文本区 3、插入复选框

40. 7.7 站点的发布 Web站点发布的概念 发布Web 站点通常指的是将组成Web站点的全部文件复制到某个特殊目录。通常有下列两种情况： • 使站点可供公开查看 • 制作站点的备份 发布Web站点 原理: 将本地硬盘上站点的所有待发布的文件拷贝到站点服务器上。有两种发布站点的方法： • 利用HTTP发布站点 • 利用FTP来发布站点