Frontpage2003的使用

(共63张PPT)
第7章 网页制作软件FrontPage 2003
7.1 认识中文版FrontPage 2003
7.2 网站的基本操作
7.3 网页的创建和编辑
7.4 表格和框架网页
7.5 网页动态元素
7.6 设置网页属性
7.7 网站发布
7.1 认识中文版FrontPage 2003
7.1.1 中文FrontPage 2003的窗口界面
执行“开始”→“程序”→“Microsoft Office FrontPage 2003”命令，可以启动FrontPage 2003。启动之后屏幕上就会出现如图7.1所示的中文FrontPage 2003窗口界面。它的窗口是由标题栏、菜单栏、工具栏、编辑区、状态栏和任务窗格等部分组成。
在编辑区的下方有4个标签，这是FrontPage 2003为用户编辑网页提供的4种编辑模式：“设计”、“拆分”、“代码”和“预览”。
图7.1 中文FrontPage 2003窗口界面
7.1.2 中文FrontPage 2003的视图方式
1.网页视图
设计：该方式是系统默认的编辑模式，网页的编辑制作主要是在该方式下进行，其操作界面体现了所见即所得的风格。图7.2所示的是一个人网页在该方式下的效果。
图7.2 “设计”视图方式
拆分：该方式下将编辑窗口拆分成上、下两部分：“代码”和“设计”，用户能够同时访问代码和设计网页。
代码：每个网页对应于一个文件，使用FrontPage 2003编辑网页实际上是系统自动生成相应的HTML文件。代码方式下，用户可以查看、编写和编辑HTML代码，如图7.3所示。
图7.3 “代码”视图方式
预览：进入预览方式后，用户可以查看当前网页在浏览器中的显示效果。尽管设计方式也能显示网页的静态效果，但预览方式可以查看动态效果。
2．文件夹视图
图7.4 文件夹视图
3.远程网站视图
4.报表视图
图7.5 报表视图
5.导航视图
6.超链接视图
7.任务视图
图7.6 超链接视图
7.2 网站的基本操作
7.2.1 创建新网站
下面介绍使用模板及向导来创建网站的具体操作方法：
执行“文件” →“新建”命令，在出现的“新建”任务窗格中的“新建网站”选项栏下，单击“其他网站模板”选项，弹出如图7.7所示的“网站模板”对话框。
在对话框的“指定新网站的位置”文本框中输入存放新网站文件的文件夹。
双击要使用的模板或向导，打开模板或启动向导。
在模板向导对话框中进行设置。
设置完成后单击“完成”按钮即可。
图7.7 “新建”任务窗格及“网站模板”对话框
7.2.2 保存、关闭和打开网站
1.保存网站
2.关闭网站
3.打开网站
执行“视图” →“文件夹列表”命令，在窗口中打开文件夹列表，然后在文件夹列表中指向网站，单击右键，在弹出的快捷菜单中选择“删除”命令，打开如图7.8所示的对话框，根据需要选择其中一项，单击“确定”按钮即可。
7.2.3 删除网站
图7.8 “确认删除”对话框
7.3 网页的创建和编辑
7.3.1 创建网页
1.创建网页
执行“文件” →“新建”命令，在“新建”任务窗格中的“新建网页”选项栏下，根据所需选择要创建的网页。如果要创建空白的网页，单击“空白网页”选项；如果要从FrontPage模板中创建网页，单击“其他网页模板”选项。
在“新建”任务窗格中单击“其他网页模板”选项，打开“网页模板”对话框，在对话框中选择一个模板或向导，再单击“确定”按钮即可。
2.保存、关闭和打开网页
（1）保存网页
（3）打开网页
（2）关闭网页
1.设置字体格式
设置字体的格式时，选中要设置格式的文字，执行“格式” →“字体”命令，打开 “字体”对话框，在该对话框中可以设置字体的各种属性。
2.设置段落格式
设置段落格式时，选中要设置格式的段落，然后执行“格式” →“段落”命令，打开 “段落”对话框。在对话框中用户可以设置对齐方式、缩进、段落间距等属性。
7.3.2 编辑网页
3.设置项目列表
选中要创建列表的文本，然后执行“格式” →“项目符号和编号”命令，打开如图7.9（a）所示的“项目符号和编号”对话框。
在该对话框的“图片项目符号”选项卡中，选中“使用当前主题中的图片”或“指定图片”单选项，可以设置图片项目符号列表，即将指定的图片显示在条目前。
单击“编号”选项卡，切换到“编号”选项，如图7.9（b）所示。在该选项卡中为项目列表选择一种编号方式。
单击“确定”按钮即可。
图7.9 “项目符号和编号”对话框
1.插入水平线
将插入点移到要插入水平线的位置。
执行“插入” →“水平线”命令，即在网页中插入一条系统默认的水平线。
如果要修改默认的水平线，则选中要修改的水平线后单击鼠标右键，然后从弹出的快捷菜单中选择“水平线属性”命令，或直接用鼠标双击水平线，打开如图7.10所示的“水平线属性”对话框。在此对话框中可以设置水平线的各项属性。
7.3.3 插入对象
图7.10 “水平线属性”对话框
2.插入图片
将插入点移动到要插入图片的位置。
执行“插入” →“图片”→“来自文件”命令，打开“图片”对话框。
在该对话框中选择所需的图片文件，单击“插入”按钮。
当关闭该网页时，FrontPage 2003会提示用户保存此插入的图片，打开如图7.11所示的“保存嵌入式文件”对话框。单击“确定”按钮，新插入的图片将以独立的文件形式被默认保存到网页所在的文件夹中。
图7.11 “保存嵌入式文件”对话框
3.插入视频
在网页中插入视频时，首先要将插入点移动到要插入视频的位置，然后执行“插入” →“图片”→“视频”命令，弹出 “视频”对话框，在该对话框中选择要插入的视频文件，单击“打开”按钮即可在网页中插入一个视频文件图标。如果要查看视频，可以单击网页视图编辑区下方的“预览”标签，切换到预览方式。
1.网页横幅
必须先在“导航”视图中设置网站的导航结构，然后才能使用网页横幅，否则网页横幅在该网页上不可见。
在“网页”视图中，将插入点放在要添加网页横幅的位置，然后执行“插入” →“网页横幅”命令，弹出如图7.12所示的“网页横幅属性”对话框。如果在该对话框中，单击选中“文本”按钮，将以文本形式显示网页的横幅；如果选中“图片”按钮，将以图片形式显示网页的横幅文本。
7.3.4 插入Web组件
图7.12 “网页横幅属性”对话框
2.字幕
在“网页”视图下，将鼠标移动到要创建字幕的位置。
执行“插入” →“Web组件”命令，弹出如图7.13所示的“插入Web组件”对话框。
在该对话框的“组件类型”列表中，单击“动态效果”选项。
在“选择一种效果”列表中，选中“字幕”选项。
单击“完成”按钮，弹出“字幕属性”对话框，如图7.14所示。
在“文本”文本框中输入字幕将要显示的文本，文本长度不限。
图7.13 “插入Web组件”对话框
如果要设定字幕文本的滚动方向，选中“方向”选项栏中的“左”或“右”单选项。
在“速度”选项栏可以设定字幕移动的速度。设置“延迟”增量框的值，调整字幕文本框每两次移动之间的时间间隔，单位为毫秒。在“数量”增量框里的值设置字幕文本每次移动的大小，单位是像素。
在“表现方式”选项栏里设置字幕文本的运动方式。
在“文本对齐方式”选项栏中设置字幕同四周文本的对齐方式。
11）在“大小”选项栏里可以设置字幕的大小，选中“宽度”和“高度”复选框，然后向对应的文本框里输入宽度和高度。
12）在“重复”选项栏里可以设置字幕的重复次数。
13）在“背景颜色”列表里设置字幕滚动文本的背景色。
14）设置完成后单击“确定”按钮。
图7.14 “字幕属性”对话框
3.交互式按钮
在“网页”视图中编辑窗口的底部，单击“设计”标签。
将插入点移动到要添加按钮的位置。
执行“插入” →“交互式按钮”命令，弹出如图7.15所示的“交互式按钮”对话框。
在“按钮”选项卡的“按钮”列表中，单击选择按钮样式。
在“文本”框中，键入要显示在按钮上的文本。
在“链接”框旁边，单击“浏览”按钮。
找到并单击希望按钮所链接的文件、URL 或电子邮件地址，然后单击“确定”按钮。
图7.15 “交互式按钮”对话框
4.网站计数器
在“网页”视图下将插入点移动到要插入网站计数器的位置。
执行“插入” →“Web组件”命令，弹出“Web组件”对话框。
在该对话框的“组件类型”列表里选择“计数器”选项，在“选择计数器样式”列表里选择一种计数器样式，然后单击“完成”按钮，弹出如图7.16所示的“计数器属性”对话框。
如果要将计数器设置为某个特定数字，则选中“计数器重置为”复选框，再在其后的文本框中键入数字。
如果要在计数器中显示固定位数的数字，则选中“设定数字位数”复选框，再在其后的文本框中键入数字。
如果要使用自己定义的数字图形，则选中“自定义”按钮，再在其后的文本框中键入图形文件的相对位置。
设置完成，单击“确定”按钮。
图7.16 “计数器属性”对话框
7.3.5 创建超链接
1.创建超链接
（1）创建文本超链接
在“网页”视图下，选定要建立超链接的文本，再执行“插入” →“超链接”命令或单击常用工具栏上的“超链接”按钮，或单击鼠标右键，在弹出的快捷菜单中选择“超链接”命令，打开如图7.17所示的“插入超链接”对话框。
图7.17 “插入超链接”对话框
（2）创建图片超链接
创建图片超链接的方法有两种：一种与创建文本超链接相同；另一种就是选中图片后，单击鼠标右键，在弹出的快捷菜单中选择“图片属性”命令，打开如图7.18所示的“图片属性”对话框。在“常规”选项卡的“默认超链接”栏里单击“浏览”按钮，从弹出的“编辑超链接”对话框中可以设置该图片的链接目标地址。
图7.18 “图片属性”对话框
还可以对图片的某一部分创建超链接，通常也称为设置热点。其方法是：选中某个要设置热点的图片，在图片工具栏中单击选择合适的热点设置按钮（ ），将鼠标定位到需要创建热点区域的左上角或右下角，然后拖动鼠标形成一个热点区域，松开鼠标后会自动弹出“插入超链接”对话框，在该对话框中设置要链接的目标地址即可。在浏览网页时，如果将鼠标移动到热点上，鼠标指针会变成手的形状，这时单击鼠标将跳转到相应的链接对象。
2. 创建和使用书签
在创建书签之前，首先将插入点定位到要创建书签的位置或者选定要创建书签的一些文本，然后执行“插入” →“书签”命令，打开如图7.19所示的对话框，在“书签名称”文本框中会自动显示出所选文本的内容，也可在此键入新的书签名称，最后单击“确定”按钮返回到“网页”视图，这时原来所选文本的下方出现了一条虚线，表明此处已经被建立成书签。
定义完书签之后，就可以创建链接到该书签的超链接。与前面介绍的创建超链接的方法相同，只是选择的目标地址不是网站或网页的地址，而是书签。
图7.19 “书签”对话框
7.3.6 使用网页主题
在“网页”视图中打开要设置主题的网页。
执行“格式” →“主题”命令，打开 “主题”任务窗格。在该窗格中显示了FrontPage 2003提供的所有主题图标。
单击某一主题图标右侧的下拉按钮，弹出下拉菜单。如果要对整个网站使用主题，则单击“应用为默认主题”选项；如果要对所选网页使用主题，则单击“应用于所选网页”选项。
如果要对所选主题进行修改，则单击“自定义”选项，在弹出的对话框中可以对主题的颜色、图形和文本进行修改。
7.4 表格和框架
1.表格操作
（1）在网页中创建表格
执行“表格” →“绘制表格”命令，手工绘制任意形状的表格；使用常用工具栏上的“插入表格”按钮，或执行“表格” →“插入”→“表格”命令，快速地创建一个均匀分布的表格。
（2）设置表格属性
在表格中单击右键，在弹出的快捷菜单中选择“表格属性”命令，打开如图7.20所示的“表格属性”对话框。
在该对话框中，可以设置表格的对齐方式、单元格填充、单元格间距、边框的粗细、边框的颜色、背景颜色以及表格三维边框的颜色等属性。需要说明的是，如果指定表格的边框粗细为0，则在浏览器中将不显示表格的边框线，但在FrontPage 2003的“网页”视图中将会用虚线来表示这些线条，当使用表格来布局页面时，一般应将表格的边框粗细设置为0。
图7.20 “表格属性”对话框
(3) 表格的其他操作
插入行或列
将插入点移动到想要插入行或列的位置上，执行“表格” →“插入”→“行或列”命令，打开如图7.21所示的“插入行或列”对话框，并在该对话框中选择要插入的是行还是列、要插入的行数或列数以及位置。
图7.21 “插入行或列”对话框
拆分单元格
将插入点移动到要拆分的单元格中，然后执行“表格” →“拆分单元格”命令，打开如图7.22所示的“拆分单元格”对话框。在该对话框中选择拆分成列还是拆分成行，以及拆分成多少列或行。
图7.22 “拆分单元格”对话框
合并单元格
选中要合并的单元格，然后执行“表格” →“合并单元格”命令即可。
删除单元格
选中要删除的单元格，然后执行“表格” →“删除单元格”命令即可。
给表格添加标题
将插入点放置在表格的任意一个单元格中，然后执行“表格” →“插入”→“标题”命令，则系统会自动在表格的上方空出一行，并将插入点定位到该处，输入表格的标题即可。
2.创建与编辑框架网页
（1）创建框架网页
可以利用FrontPage 2003提供的模板创建框架网页。执行“文件” →“新建”命令，打开“新建”任务窗格，在该窗格中的“新建网页”选项栏下单击“其他网页模板”选项，在弹出的“网页模板”对话框中单击“框架网页”选项卡，在其中选择一个模板，如选择“横幅和目录”模板，预览其布局，在单击“确定”按钮即可创建一个基于模板的框架网页，如图7.23所示。
图7.23 新建框架网页
网页中每一个框架都有两个按钮：“设置初始网页”和“新建网页”。单击“设置初始网页”按钮将弹出如图7.24所示的“插入超链接”对话框，可以在此设定该框架最初显示的网页地址；单击“新建网页”按钮，将出现一个空白网页供用户创建新的内容。
图7.24 设置框架网页的初始网页地址
（2）编辑框架网页
利用框架属性可以对框架进行调整和修改。在某个框架中单击鼠标右键，从弹出的快捷菜单中选择“框架属性”命令，或者执行“框架” →“框架属性”命令，均会打开如图7.25所示的“框架属性”对话框，从中可以对该框架的名称、大小、边距以及是否显示滚动条等进行设置，直接用鼠标拖动边框也可以调节框架的大小。
框架拆分方法：先选中要拆分的框架，然后执行“框架” →“拆分框架”命令，打开“拆分框架”对话框，选定拆分方向后单击“确定”按钮即可。另外，将鼠标指针移动到框架边缘，按住Ctrl键的同时拖动鼠标也能完成拆分操作。
图7.25 “框架属性”对话框
7.5 网页动态元素
7.5.1 网页动态（DHTML）效果
选定网页中要设置动态效果的文字，单击“DHTML效果”工具栏的“开启”下拉按钮，列表中提供了单击、双击、鼠标悬停和网页加载等四种事件，这里选择“网页加载”。
单击“应用”下拉列表按钮，在其中选择一种方式。本例中选择“飞入”。
从“效果”下拉列表中选择一种效果方式，例如选择“从左侧”。
设定好之后就可以在“预览”视图方式下看到设置的动态效果。
7.5.2 网页过渡效果
在需要设置过渡效果的网页中，执行“格式” →“网页过渡”命令，打开“网页过渡”对话框，如图7.26所示。在“事件”选项栏中选择一种事件，它可以是进入网页、离开网页、进入网站和离开网站。在“过渡效果”列表框中选择一种效果，例如“从左下抽出”，最后单击“确定”按钮。
图7.26 “网页过渡”对话框
7.6 设置网页属性
网页属性的设置主要是在“网页属性”对话框中完成的。切换到“网页”视图，在当前编辑的网页中单击鼠标右键，从弹出的快捷菜单中选择“网页属性”命令，或者执行“文件” →“属性”命令，均可打开“网页属性”对话框，如图7.27所示。
图7.27 “网页属性”对话框
7.7 网页发布
可以使用“远程网站”视图将文件发布到任何位置，可以将网站发布到扩展Web服务器（也称为HTTP服务器，它存储的文件的URL以http://开头）、支持文件传输协议FTP（一种通信协议，它使用户可以在网络上的远程位置之间传输文件）或基于网站的分布式创作和版本控制（WebDAV）（在万维网上发布和管理文件的应用程序协议。它为存储有关文件的信息提供支持，因此用户可以更改某个文件及其属性，而不必覆盖对于该文件进行的其它更改）的Web服务器、或文件系统上的某个位置。