搜索
地理多媒体课件制作主讲人：杨洪Email:2043518599@qq.comOffice：行政楼11楼环资系办公室地理科学本科专业限制性选修课第六章FrontPage网页课件制作本章介绍FrontPage2003网页制作工具的使用，主要内容包括网站创建和发布、编辑网页、图像插入、超链接的创建、网页布局与表单的使用。2020/6/33启动FrontPage2003，其界面如左图所示。6.1FrontPage2003概述6.1.1FrontPage2003界面编辑区工具栏任务窗格菜单栏编辑模式按钮2020/6/32020/6/34与以前版本的FrontPage不同，FrontPage2003编辑模式按钮提供了4种模式：设计模式、拆分模式、代码模式和预览模式。用户不必经过选择就可直接进入编辑器和资源管理器的窗口。实质上，FrontPage2003把以前版本的资源管理器和编辑器合二为一，集二者功能于一身，用户使用起来更加方便。FrontPage2003中提供了以下6种视图：6.1FrontPage2003概述6.1.1FrontPage2003界面2020/6/32020/6/351．网页视图主要用于网页的编辑工作，它是FrontPage2003中常用的工作界面，如图6-2所示。网页的创建、编辑和预览等基本操作都是在此视图中进行，该视图窗口底部有4个标签：“设计”、“拆分”、“代码”、“预览”。设计、代码方式进行编辑，“预览”方式看网页效果。6.1FrontPage2003概述6.1.1FrontPage2003界面2020/6/32020/6/366.1FrontPage2003概述图6-2网页视图2020/6/32020/6/372．文件夹视图用于对站点中各种文件的管理。在“文件夹”视图中，站点显示为一组文件和文件夹，如图6-3所示。“文件夹”视图对于站点的作用，与Windows资源管理器对于存储在硬盘上的文件的作用和操作基本相同。在“文件夹”视图中可以通过拖动操作移动文件或文件夹。6.1FrontPage2003概述6.1.1FrontPage2003界面2020/6/32020/6/386.1FrontPage2003概述图6-3文件夹视图2020/6/32020/6/393．报表视图显示站点内各种文件的状态。在该视图方式，可以方便了解当前站点的文件内容，更新连接情况和所有文件列表及变化情况等信息。当需要得到有关站点文件的详细情况时需使用“报表”视图，如图6-4所示。6.1FrontPage2003概述6.1.1FrontPage2003界面2020/6/32020/6/3106.1FrontPage2003概述图8-4报表视图2020/6/32020/6/3114．导航视图用于在网页中创建导航条。在“导航视图”中，可方便地观察站点的链接结构，它是以组织结构图的形式表示。如图8-5所示，其中主页位于顶部，其他的网页归入下面各层中。在该视图中可以很直观地浏览网站内页之间的连接关系，同时也可以通过鼠标将结构图中的网页拖到新位置来改变链接结构。6.1FrontPage2003概述6.1.1FrontPage2003界面2020/6/32020/6/3128.1FrontPage2003概述图8-5导航视图2020/6/32020/6/3135．超链接视图显示网页内超链接的情况。“超链接”视图将当前站点显示为链接文件的一个网络，它们表示了站点中各个网页之间的相互链接关系，如图6-6所示。“超链接”视图就像一个地图，表明站点中的超链接路径。8.1FrontPage2003概述8.1.1FrontPage2003界面2020/6/32020/6/3148.1FrontPage2003概述图6-6超链接视图2020/6/32020/6/3156．任务视图将需要做的工作以任务形式显示出来，并对其做简单的管理，如图6-7所示。8.1FrontPage2003概述8.1.1FrontPage2003界面图6-7任务视图2020/6/32020/6/3161．创建单页站点用户可以自己创建新网站，也可以利用向导和模板来创建。操作步骤如下。（1）依次单击“文件/新建/站点”命令，打开如图6-8所示的对话框。（2）在“指定新网站的位置”下拉列表框中选择新站点的保存位置，也可以直接输入，如“e：\abc123”，如图6-8所示。（3）选择左边框中“只有一个网页的站点”选项，单击“确定”按钮。6.1FrontPage2003概述6.1.2创建站点与网页2020/6/32020/6/3176.1FrontPage2003概述图6-8“网站模板”对话框2020/6/32020/6/318（4）此时FrontPage就会自动创建一个单网页的网站，此网站只有一个网页，即主页。主页是一个站点的第一页，文件名通常为index.htm。在工具栏中单击“文件夹列表”按钮，出现文件夹列表，在这里可以看到所建网站的结构，如图6-9所示。6.1FrontPage2003概述图6-9网站文件结构2020/6/32020/6/319（5）此时可以向主页中加入内容（加入内容的方法在后续内容中有详细的讲解），如图6-10所示，这样，一个简单的主页就制作完成了。完成之后，可单击“预览”按钮转入预览方式下查看一下网页的制作效果。8.1FrontPage2003概述图6-9网站文件结构2020/6/32020/6/3202．创建新页用户可以向网站加入新页，其操作步骤如下：（1）单击“文件/新建/网页”（也可单击“常用”工具栏中的“新建”按钮），FrontPage2003将自动创建一个新的网页，该网页被命名为“new_page_1.htm”，但这个新页还未被加入站点中。（2）单击“文件/保存”命令，弹出“另存为”对话框，在“文件名”文本框中可更改网页的文件名。6.1FrontPage2003概述6.1.2创建站点与网页2020/6/32020/6/321（3）单击“确定”按钮返回，然后单击“保存”按钮，则新页new_page_1.htm就被加入到站点中，在“文件夹列表”框中能清楚地看到。（4）重复这一步骤，可以向站点中加入多个新页。6.1FrontPage2003概述6.1.2创建站点与网页2020/6/32020/6/3221．打开网站单击“文件/打开站点”命令，或单击“常用”工具栏上的“打开”按钮，弹出“打开文件”对话框，选择所需打开的文件。2．打开网页单击“文件/打开站点”命令，或单击“常用”工具栏上的“打开”按钮，出现对话框后，在“文件夹列表”框中用鼠标双击某个网页的文件名即可。6.1FrontPage2003概述6.1.3打开站点与网页2020/6/32020/6/3233．预览网页网页编辑完毕，除了在编辑器窗口预览之外，还可通过本机的其他浏览器软件访问自己编辑的网页，以进一步观察实际效果。具体操作如下：（1）启动本机的浏览器，例如启动IE7.0。（2）输入网址，如“e:\abc123\index.htm”，即前面所建站点的主页的网址，然后按Enter键，此时，浏览器中出现自己编辑的网页。6.1FrontPage2003概述6.1.3打开站点与网页2020/6/32020/6/3241．文本的输入要使页面正确地显示中文，必须将页面的编码设置为简体中文GB2312的编码方式。操作方法如下：打开网页，选择“文件/属性”命令，打开“网页属性”对话框，选择其中的“语言”选项卡，如图6-11所示。将“HTML编码”区域中的两个选项都设置为“简体中文（GB2312）”，单击“确认”按钮，此时就可以在页面中输入文字了。8.2编辑网页6.2.1文本编辑2020/6/32020/6/3256.2编辑网页8.2.1文本编辑图6-11“网页属性”对话框2020/6/32020/6/3262．换行与分段在一段文本末尾按下Enter键就是一段的结束。输入文字时，若一行文字的长度超过屏幕的显示范围会自动换行。6.2编辑网页6.2.1文本编辑若想将文字强制换行，但又不另起一个段落，可以单击“插入/换行符”命令，打开如图6-12所示的“换行符”对话框，从中可以选择“普通换行符”换行方式，单击“确认”按钮即可。图6-12“换行符”对话框2020/6/32020/6/3273．特殊字符的处理插入各种特殊符号的操作方法如下。（1）将光标置于要插入特殊符号的位置。（2）单击“插入/符号”命令，弹出如图6-13所示的“符号”对话框，选择要插入的特殊符号，单击“插入”按钮即可。有时候还会碰到诸如上标和下标之类的特殊符号，如X2等，此时在页面中输入X2，然后用鼠标拖曳选择X2的2，再单击“格式/字体”命令，弹出“字体”对话框，选择“上标”即可。6.2编辑网页6.2.1文本编辑2020/6/32020/6/3286.2编辑网页图6-13“符号”对话框2020/6/32020/6/3291．设置字体设置文字字体最常用的方法就是使用“格式”工具栏。若屏幕上没有出现“格式”工具栏，则单击“查看/工具栏/格式”命令，便可显示“格式”工具栏，如图6-14所示。在字体下拉框中，FrontPage2003提供了各种各样的字体。选中要设置字体的文本，然后打开字体下拉框，设置文字字体。6.2编辑网页6.2.2设置文字格式图8-14“格式”工具栏2020/6/32020/6/3302．设置字型格式工具栏中提供了3种设置方式：加粗、倾斜和下划线。选中要设置字型的文本，然后单击这些按钮就可将文本设置成相应的格式。3．设置文字颜色（1）选择要设置颜色的文本。（2）单击“格式”工具栏中的文字颜色按钮的下拉箭头，打开颜色模板。（3）在颜色模板中选择所需的颜色。6.2编辑网页6.2.2设置文字格式2020/6/32020/6/3314．设置字号设置文字字号的操作方法是：首先用鼠标拖曳选取要进行设置的文本，然后打开“格式”工具栏中的字号对话框，选择所需的字号。5．设置文字效果（1）选择要设置特殊效果的文本。（2）单击“格式/字体”命令，打开“字体”对话框，如图6-15所示。（3）在“效果”区域中选择所需的文字效果，同时可以在“预览”区域中查看所设置的效果。6.2编辑网页6.2.2设置文字格式2020/6/32020/6/3326.2编辑网页图6-15“字体”对话框6．设置字符间距（1）选择要调节字符间距的文本。（2）单击“格式/字体”命令，打开“字体”对话框，图6-15所示。单击其中的“字符间距”选项卡，设定字符间距。6.2.2设置文字格式2020/6/32020/6/3336.2编辑网页1．设置段落样式打开“格式”工具栏的样式下拉列表框，用户可从中选取样式。2．段落的对齐、缩进和间距（1）选择“格式/段落”命令，打开如图6-16所示的“段落”对话框。（2）选择对齐方式并对段落间距和缩进进行设定。（3）在“预览”区域中预览效果，满意后单击“确认”按钮。6.2.3设置段落格式2020/6/32020/6/3346.2编辑网页图6-16“段落”对话框2020/6/32020/6/3356.2编辑网页打开要设置属性的页面，单击“文件/属性”命令，打开“网页属性”对话框，选择“常规”选项卡，如图6-17所示，在“标题”文本框中可更改网页的标题。6.2.4网页属性图6-17“网页属性”对话框2020/6/32020/6/3366.2编辑网页在“网页属性”对话框中，单击“格式”选项卡，如图6-18所示。在图中可更改背景颜色、文本颜色和超链接颜色。6.2.5网页的背景图6-18“格式”选项卡2020/6/32020/6/3376.3加入图像将插入点移到要插入图片的位置，选择“插入/图片”命令后，打开“图片”对话框，如图6-19所示。在图片对话框中，选择图片文件，然后单击“插入”按钮。6.3.1插入图像图6-19“图片”对话框2020/6/32020/6/3386.3加入图像在网页中插入图像后，还可以对图像进行编辑。用鼠标单击插入的图像，在屏幕上出现“图片”工具栏