九年级信息技术下学期 Frontpage2003的使用课件

第7章网页制作软件FrontPage2003

7.1

认识中文版FrontPage20037.2网站的基本操作

7.3

网页的创建和编辑7.4

表格和框架网页7.5

网页动态元素7.6设置网页属性7.7网站发布7.1认识中文版FrontPage2003

7.1.1

中文FrontPage2003的窗口界面

执行“开始”→“程序”→“MicrosoftOfficeFrontPage2003”命令，可以启动FrontPage2003。启动之后屏幕上就会出现如图7.1所示的中文FrontPage2003窗口界面。它的窗口是由标题栏、菜单栏、工具栏、编辑区、状态栏和任务窗格等部分组成。在编辑区的下方有4个标签，这是FrontPage2003为用户编辑网页提供的4种编辑模式：“设计”、“拆分”、“代码”和“预览”。图7.1中文FrontPage2003窗口界面

7.1.2中文FrontPage2003的视图方式

1.网页视图设计：该方式是系统默认的编辑模式，网页的编辑制作主要是在该方式下进行，其操作界面体现了所见即所得的风格。图7.2所示的是一个人网页在该方式下的效果。图7.2“设计”视图方式

拆分：该方式下将编辑窗口拆分成上、下两部分：“代码”和“设计”，用户能够同时访问代码和设计网页。代码：每个网页对应于一个文件，使用FrontPage2003编辑网页实际上是系统自动生成相应的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.插入图片将插入点移动到要插入图片的位置。执行“插入”→“图片”→“来自文件”命令，打开“图片”对话框。在该对话框中选择所需的图片文件，单击“插入”按钮。当关闭该网页时，FrontPage2003会提示用户保存此插入的图片，打开如图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使用网页主题在“网页”视图中打开要设置主题的网页。执行“格式”→“主题”命令，打开“主题”任务窗格。在该窗格中显示了FrontPage2003提供的所有主题图标。单击某一主题图标右侧的下拉按钮，弹出下拉菜单。如果要对整个网站使用主题，则单击“应用为默认主题”选项；如果要对所选网页使用主题，则单击“应用于所选网页”选项。如果要对所选主题进行修改，则单击“自定义”选项，在弹出的对话框中可以对主题的颜色、图形和文本进行修改。7.4表格和框架1.表格操作（1）在网页中创建表格执行“表格”→“绘制表格”命令，手工绘制任意形状的表格；使用常用工具栏上的“插入表格”按钮，或执行“表格”→“插入”→“表格”命令，快速地创建一个均匀分布的表格。（2）设置表格属性在表格中单击右键，在弹出的快捷菜单中选择“表格属性”命令，打开如图7.20所示的“表格属性”对话框。在该对话框中，可以设置表格的对齐方式、单元格填充、单元格间距、边框的粗细、边框的颜色、背景颜色以及表格三维边框的颜色等属性。需要说明的是，如果指定表格的边框粗细为0，则在浏览器中将不显示表格的边框线，但在FrontPage2003的“网页”视图中将会用虚线来表示这些线条，当使用表格来布局页面时，一般应将表格的边框粗细设置为0。图7.20“表格属性”对话框(3)表格的其他操作插入行或列将插入点移动到想要插入行或列的位置上，执行“表格”→“插入”→“行或列”命令，打开如图7.21所示的“插入行或列”对话框，并在该对话框中选择要插入的是行还是列、要插入的行数或列数以及位置。图7.21“插入行或列”对话框拆分单元格将插入点移动到要拆分的单元格中，然后执行“表格”→“拆分单元格”命令，打开如图7.22所示的“拆分单元格”对话框。在该对话框中选择拆分成列还是拆分成行，以及拆分成多少列或行。图7.22“拆分单元格”对话框合并单元格选中要合并的单元格，然后执行“表格”→“合并单元格”命令即可。删除单元格选中要删除的单元格，然后执行“表格”→“删除单元格”命令即可。给表格添加标题将插入点放置在表格的任意一个单元格中，然后执行“表格”→“插入”→“标题”命令，则系统会自动在表格的上方空出一行，并将插入点定位到该处，输入表格的标题即可。2.创建与编辑框架网页（1）创建框架网页可以利用FrontPage2003提供的模板创建框架网页。执行“文件”→“新建”命令，打开“新建”任务窗格，在该窗格中的“新建网页”选项栏下单击“其他网页模板”选项，在弹出的“网页模板”对话框中单击“框架网页”选项卡，在其中选择一个模板，如选择“横幅和目录”模板，预览其布局，在单击“确定”按钮即可创建一个基于模板的框架网页，如图7.23所示。图7.23新建框架网页网页中每一个框架都有两个按钮：“设置初始网页”和“新建网页”。单击“设置初始网页”按钮将弹出如图7.24所示的“插入超链接”对话框，可以在此设定该框架最初显示的网页地址；单击“新建网页”按钮，将出现一个空白网页供用户创建新的内容。图7.24设置框架网页的初始网页地址（2）编辑框架网页利用框架属性可以对框架进行调整和修改。在某个框架中单击鼠标右键，从弹出的快捷菜单中选择“框架属性”命令，或者执行“框架”→“框架属性”命令，均会打开如图7.25所示的“框架属性”对话框，从中可以对该框架的名称、大小、边距以及是否显示滚动条等进行设置，直接用鼠标拖动边框也可以调节框架的大小。框架拆分方法：先选中要拆分的框架，然后执行“框架”→“拆分框架”命令，打开“拆分框架”对话框，选定拆分方向后单击“确定”按钮即可。另外，将鼠标指针移动到框架边缘，按住Ctrl键的同时拖动鼠标也能完成拆分操作。图7.25“框架属性”对话框7.5网页动态元素7.5.1

网页动态（DHTML）效果选定网页中要设置动态效果的文字，单击“DHTML效果”工具栏的“开