FrontPage 2000制作讲稿
第一课
掌握站点的建立,学会软件的启动和素材的收集,了解站点的打开和关闭。
1、启动FrontPage 2000
单击任务栏上的“开始”按钮,从“程序” 菜单中选择“FrontPage”单击。
2、FrontPage 2000的界面说明 FrontPage 2000的界面可以分成菜单栏、工具栏、视图栏和主编辑窗口4大部分。
菜单栏包括【文件】、【编辑】、【查看】、【插入】、【格式】、【工具】、【表格】、【框架】、【窗口】、【帮助】等10个菜单。
主编辑窗口在编辑网页时,有3种显示方式,即普通、HTML和预览。 普通显示方式是最常用的显示方式,一般是在此方式下工作。
HTML显示方式在需要直接编辑或查看网页文件的HTML代码时使用,一般是为了实现某种特殊效果(如在网页中动态显示时间)而经常使用。
预览显示方式在需要预先观察网页的显示效果时使用。当使用管理功能时,主编辑窗口相应地会显示各种任务下的文件或站点信息。 什么是站点?站点一般简写为“Web”,实际上就是把一些信息通过Web网页的方式相互链接起来,存放在一台被称为“服务器”的计算机中,别人可以通过Web浏览器查看网页信息。
什么是主页? 主页的英文名称为“HomePage”,一般认为某个站点的第一个网页叫做主页,文件名通常是“index.htm”(index.html)或“default.htm” 3、新建站点 操作步骤:
(1)打开【文件】菜单,选择【新建】菜单项,在子菜单中选择【站点】菜单项,出现一个【新建】对话框,在对话框的【指定新站点的位置】项中输入新站点的存放位置。
(2)单击【确定】按钮。此时FrontPage会自动以新站点名建立一个站点,并显示一个正在创建站点的提示对话框,之后该站点很快便创建好了。 新建的站点只有一个主页index.htm文件,该主页还是空的,需要对它进行编辑添加内容。同时也可以添加一些网页到该站点中去。此外,我们发现该站点中包含有两个子文件夹。一个是_private文件夹,一般用来存放一些私人的文件,这些文件不会被别人看到。另一个是images文件夹,是FrontPage专门创建用来存放图像文件的文件夹,因为FrontPage图像文件
的默认目录为images。
4、关闭站点 打开【文件】菜单,选择【关闭站点】菜单项,则当前站点被关闭。
5、打开站点打开【文件】菜单,在下拉菜单选择【打开站点】,输入该站点的存放位置,然后单击【打开】按钮,站点将被重新打开。 6、收集图片 拷贝图片到新建站点的图片文件夹images中。 7、上机操作创建自己的站点,收集图片素材。
第二节 网页文本的基本制作
学习文字的输入和设置,掌握网页的新建和保存。
上节课已经介绍了如何创建一个Web站点,接下来我们将着重学习如何使用FrontPage 2000来制作网页了。
提示:本例先使用FrontPage建立一个站点。这样做,是为了
网页文件的规范管理,所有网页及图片等文件都将保存到该站点内。
1、新建网页 方法:使用工具按钮。在FrontPage 2000中单击“ ”新建网页工具按钮,在主编辑窗口将出现一个空白网页。
使用菜单命令。(1)我们也可以从【文件】菜单中选择【新建】菜单项,在子菜单中选择【网页】菜单项,出现一个对话框。(2)这个对话框中列出了很多事先设计好的网页模板。这时选择【普通网页】,单击【确定】按钮,此时在主编辑窗口中将出现一个空白网页。
2、网页属性 在空白网页中单击鼠标右键,从弹出的菜单中单击【网页属性】选项,出现网页属性对话框。在这个对话框中我们可以修改网页的多种属性。
(1)、常规属性设置。在这个对话框有5个选项卡。其中,在【常规】选项卡中我们可以修改网页的标题、背景音乐等。修改网页标题。在对话框【标题】栏内输入“我的主页”。修改背景音乐。单击【背景音乐】区域的【浏览】按钮,出现对话框,单击“”图标按钮,在硬盘目录下选择一个Wav声音文件。(2)、背景色设置。单击网页属性对话框的【背景】选项卡,就可以设置网页的背景色和图片等。修改网页的背景色。单击对话框中【颜色】区域内的“背景”项下拉选择箭头,并从颜色框中选择一种颜色,然后单击【确定】按钮,这时网页的背景颜色就变成了刚才选择的颜色。 3、文本输入 从工具栏中的【字体样式】下拉菜单选择“标题1”,然后从键盘输入“这是我的第一个主页”,按回车键。
提示:我们在输入文本的时候使用了两种按回车键的方式:直接
按回车键,按Shift键加回车键。大家可以在实际操作中自己体会一下这两
种方式的区别。
4、字体设置 (1)、选定文字 选定文字的方法有两种:
①一种方法是将鼠标指针移到待选文字段的开头,按住鼠标左键,不要松手,然后向右下方拖动,将该段文字涂黑;②另外一种方法就是用键盘上的光标箭头将插入点移到选定文字的开头,然后左手按着Shift键,右边按光标移动键(如←、↑、→、↓键),也可将所选定文字涂黑。
(2)、修饰文字 修饰文字是指文字的字体、字型、大小(字号)、颜色、效果的设置。 5、保存网页
第三课 网页的基本操作
1、保存网页
单击常规工具栏上的“”,或单击【文件】菜单再选择【保存文件】,就可以把正在编辑的网页保存起来。或直接按Ctrl+S键也可以保存网页。
如果你是在修改已经保存过的网页,修改过的网页将被重新保存。但如果是新建的网页,单击“”后会出现对话框。
在对话框中的【文件名】栏内输入网页的文件名(如“First”),单击【保存】按钮,该网页就会保存到当前的站点上。FrontPage 2000保存文件的类型主要有网页文件(.htm)、FrontPage模板(.tem)、文本文件(.txt)、超文本模板文件(.htt)等。 2、关闭网页
(1)、单击【文件】菜单并选择【关闭】,或直接按Alt+F4键,如果此时网页文件未保存,就会出现一个提示对话框。
(2)、当单击对话框中的【是】按钮时,将出现保存网页对话框,输入网页文件名并单击【保存】按钮后,网页文件将被关闭;当单击【否】按钮时,该网页文件不保存并关闭;当单击【取消】按钮时,该网页文件不关闭,并返回主编辑窗口。 3、打开网页
(1)、单击“”工具图标,或单击【文件】菜单并选择【打开】,或直接按Alt+O键,出现一个打开文件对话框。 (2)、在对话框中单击【查找范围】下拉列表框,选择文件路径。在文件列表区中列出被选中该文件路径下的所有文件。
(3)、选中一个文件,然后单击【打开】按钮,或直接双击该文件名即可打开文件。 4、预览网页
网页编辑完成后,可以用浏览器预览一下网页的效果。有两种预览网页的方式: (1)、一种是单击FrontPage 2000主编辑窗口下面的【预览】标签,就打开一个FrontPage编辑器自带的浏览器,看完之后,单击【普通】标签,又切换到编辑状态。
(2)、另一种是单击【常规】工具栏的“”图标按钮(或直接按Ctrl+Shift+B键,或单击【文件】菜单并选择【在浏览器中预览】菜单项),将启动已安装好的浏览器并打开该网页。如果在预览之前没有把修改后的或新建的网页保存起来,则将弹出一个对话框提示你应该首先保存该网页。 在发布到Internet上的前后,最好使用不同的浏览器多浏览几次。
第四课,学习图片的插入和设置。
一)插入图片
(1)新建一个空白网页,把光标定位到要插入图片的地方。
(2)单击“”工具图标,或单击【插入】菜单,选择【图片】菜单项,在子菜单中单击【来自文件】选项,在出现一个【图片】对话框的同时,还弹出一个【选择文件】对话框。
(3)在【选择文件】对话框的“搜寻”栏内选定图片的存放位置,然后从文件列表中双击某个图片文件(或选定图片文件),单击【确定】按钮,则图片插入到网页中。 二)、设置图片的属性
在网页中插入图片后,我们还要对图片的某些属性进行设置。
(1)在某个图片上单击鼠标右键后,弹出一个快捷菜单,选择图片属性。
(2)单击【图片属性】菜单项,出现图片属性对话框。在图片属性对话框中,我们可以设置图片的各种属性:
1、常规属性 【图片源】:指图片的存放位置。如果要重新选择其他一幅图片时,单击【浏览】按钮。如果要修改这幅图片,可以单击【编辑】按钮,启动自带的Image Composer软件,修改完图片后,只要退出该软件,网页图片就会自动更新。
【类型】:我们可以选择图片的类型,GIF或者是JPEG。【替代表示】:如果当前图片较大,分辨率也较高,我们应该在【低分辨率】中选定一个备用的低分辨率图像,这样在一些浏览网页的低档机显示器不能显示高分辨率
图片时,可以显示这个低分辨率的图片。此外,在“文本”栏内默认值为图片文件名加上文件长度,这是当该图片不能显示时,这些说明文字会显示出来,也就常说的图片的别名。若要修改图片的别名时,在文本框内输入即可。
2、图像的外观 单击【图片属性】对话框中的【外观】选项卡。在这个对
话框中,我们可以设置图片与文本之间的对齐方式、图片的边框粗细以及图片的大小等。
布局栏:单击【对齐方式】下拉箭头,出现一个下拉菜单,有多种
对齐方 式,在图文混排时非常有用,大家可以试试看。利用【边框粗细】可以在图片周围加上一个指定宽度的边框。值为0时,边框不显示。设置【水平间距】和【垂直间距】的值,可以改变图片与相邻内容(如文字)之间的距离。默认情况下,浏览器中显示的网页图片是实际大小的图片。如果要改变图片的大小,则在对话框的【大小】栏中调整“宽度”、“高度”的值(单位为像素或百分比)。选择“保持纵横比”选项是防止尺寸修改后的图片出现太扁或太长的“变形”现象。图片的定位,可以单击图片工具栏的图片定位按钮。图片可以随便移动,但在预览时常会与实际不一致。 三)上机操作: 在网页中插入合适的图片
第五课 学习表格的插入、编辑。
一)、表格的组成 表格的几个部分组成:表头:表格的首行,表示表格各列的名称。行:表格的一行,水平方向。列:表格的一列,垂直方向。单元格:在表格中,每个方格称为一个单元格(Cell),可以为每个单元格设置不同的属性。边框:在表格的四周,可设置有无。在每个单元格中,除了可以填写文本之外,还可以放置图片、表单等,表格的最大好处是能分类显示数据,同时还能利用表格来组织网页的整体布局。 二)、插入表格 在FrontPage 2000中插入一张表格的方法有三种: 1、使用【插入表格】工具按钮
2、使用【表格】菜单命令 说明:如果在对话框中“边框粗细”值设置为0时,则该表格线在浏览网页时不会被显示出来。 3、使用手工绘制表格
4、嵌套表格 很多时候,我们要在一张表格中插入另一张表格,其做法与前面所介绍的插入表格操作并没有太大的区别, 表格创建后,可以在单元格内输入文字、符号等,也可以删除单元格中的任何内容,这与在网页中的操作方式完全相同。 三)、在表格中插入行。使用菜单命令:将光标定位在待插入行的任意单元格内;然后单击【表格】菜单,选择【插入】菜单项,在子菜单中单击【行或列】选项,出现对话
框;在对话框中选择【行】单选按钮。在【行数】框内输入要插入的行数(例如3),并在【位置】栏中选择“所选区域下方”单选按钮。单击【确定】按钮,在光标所在行的下方插入了新的行(设为3)。(2)在表格中插入列。使用菜单命令: 将光标定位在待插入列的任意单元格中;然后单击【表格】菜单,选择【插入】菜单项,在子菜单中单击【行或列】选项,出现对话框;在对话框中选择【列】单选按钮。在【列数】框内输入要插入的列数(设为2),并在【位置】栏中选择“所选区域右方”单选按钮。单击【确定】按钮,则在当前所在列的右方插入了新的列(2列)。
四)、删除行、列或单元格 实例:以表格为例,把表格中新插入的3行、2列删除。通过删除行、列进行。操作步骤如下:先删除行:选定行:将光标移到表格中要删除的行的最左边,光标变成向右的“ ”小箭头时,单击鼠标左键,该行反色显示被选中。
删除行:单击“”图标工具,则选中行被删除。重复上述A)、B)两步骤把其余两行
”图标工
也删除。再删除列:选定列:将光标移到表格中要删除的列的最上边,光标变成向下的“ ”黑色小箭头时,单击鼠标左键。此时该列被选中。删除列:单击“
具,则选中列被删除。重复上述a)、b)两个步骤把另一列也删除。通过删除单元格进行。其操作步骤如下:选定一个单元格:单击【表格】菜单项,选择【选定】,单击【单元格】选项。选定多个单元格:选定一个单元格后,用手按住Ctrl键,不要松开,然后单击要选定的其他所有需要删除的单元格。删除单元格:单击【表格】菜单,选择【删除单元格】选项,则选中的所有单元格都会被删除。
第六课 表格的设置
1、设置表格的属性 设置整个表格的多种属性,其操作步骤如下:将光标移到表格中,单击【表格】菜单,选择【属性】,再单击【表格】选项,或在表格上单击鼠标右键,接着选择【表格属性】,出现一个对话框。对齐方式。该设置是整个表格在网页内的对齐方式,开始设为默认,可设置为左对齐、右对齐、水平居中、两端对齐。单元格边距。单元格边界与内容之间的距离。该值越大,单元格内的文字与表格线的距离越大。单元格间距。单元格与单元格之间的距离。边框粗细。设置表格外边框的宽度。如不显示外边框,可将此值设为0。此外,在【表格属性】对话框中,也可以设置表格的背景颜色、背景图片、整个表格的宽度与高度,只要单击相应按钮,就可以为表格设置各种属性。
2、设置单元格的属性 设置某个单元格的属性,也可同时设置多个单元格的属性。步骤如下:(1)选定要设置属性的单元格(如果只须设置某个单元格的属性,只需将光标移到该单元格内,无需选定该单元格);(2)单击【表格】菜单,选择【属性】,然后单击【单元格】选项,或单击鼠标右键,选择【单元格属性】选项,将会出现一个对话框。(3)在单元格属性对话框中,我们可以设置单元格的多种属性。(4)设置完毕后,单击【应用】按钮,可以预览一下设置效果。(5)单击【确定】按钮,设置结束。
3、单元格布局在这个对话框中,我们可以设置单元格的属性有:水平对齐方式。有五个选项:默认左对齐、左对齐、右对齐、水平居中、两端对齐。直对齐方式。有五个选项:默认靠上、靠上、居中、基线、靠下。行跨距。单元格跨越的行数。例如此数设为2,则这个单元格就对应两行单元格的高度。列跨距。即单元格跨越的列数。例如此数设为2,则这个单元格就对应两行单元格的宽度。标题栏。如果选择了此项,表格的第一行就变成了表格的标题。不换行。设置此项后,这个单元格中的文字不会随着表格大小的变化而自动换行。指定宽度。该单元格的最小宽度。可以是像素(Pixels)或百分数(in percent)。如果是百分比方式,该值是指该单元格占整个表格宽度的百分比。指定高度。该单元格的最小高度,一般无需指定。浏览器会根据显示窗口的大小而自动调整。边框颜色。设置边框的颜色,默认为黑色。亮边框。单元格内右边与下边框的颜色。暗边框。单元格内左边与上边框的颜色。背景单击“颜色”下拉列表框右边的箭头,可以指定每个单元格的背景颜色。没有指定时,浏览器采用默认颜色。也可以为每个单元格指定不同的背景图案,单击“浏览”按钮就可以实现这一点。 4、合并单元格步骤:(1)在表格中,选定第一列的后面的三个单元格。(2)单击“”图标工具,或单击【表格】菜单项,选择【合并单元格】选项,这时选定的三个单元格合并为一个单元格。(3)选中最后一行的后两个单元格,采用上述(2)中的操作也可以把它们合并为一个单元格。
5、拆分单元格(1)将光标定位在单元格内,单击鼠标右键,弹出一个快捷菜单,也可以单击【表格】菜单项。此时选择【拆分单元格】菜单项,(2)在【拆分单元格】对话框中,选择【拆分为行】单选按钮。(3)把【行数】的值设为2(默认值),单击【确定】按钮。(4)将光标定位在第一行右边的单元格内。(5)再次单击鼠标右键,选择【拆分单元格】菜单项,出现一个拆分单元格对话框。(6)在对话框中,选择【拆分为列】单选按钮。(7)把【列数】的值设为2(默认值),单击【确定】按钮。
第七课 表格对网页中的布局及学习框架网页的制作方法
一、表格布局:我们除了用表格组织来数据之外,还有就是用表格来组织网页内容及布局。
下面用实例来说明如何设计由一个表格所组织的网页,其操作步骤如下: (1)在空白网页中插入一个2×2的表格,将表格的边界大小设置为0; (2)在表格第一行第一列的单元格和第二行第二列的单元格中输入内容; (3)在表格中第一行第二列的单元格和第二行第一列的单元格中插入图片;得最后的效果。
二、框架网页:框架页是一种特殊格式的网页,主要由边框、网页、滚动条组成。在框架页中,每个框架都有一个网页相连接。当打开框架页时,则同时载入每个框架所相连的网页文件。其操作步骤如下:
(1)打开【文件】菜单,选择【新建】菜单项,在子菜单中选择【网页】菜单项,
出现新建对话框。
(2)在对话框中单击【框架网页】选项卡。
(3)在选项卡中选择【目录】,此时在【预览】栏中会显示被选中的框架结构图,并在上方显示说明情况。
(4)单击【确定】按钮后,出现框架结构图。
(5)新创建的框架结构共有2个网页窗口,其中一个在左边,另一个在右边。这时单击【新建网页】按钮后,我们可以在当前框架网页中输入文字、图片等内容了。(如果这时单击【设置初始网页】按钮后,将弹出一个“创建超链接”的对话框,可以为所在的框架超链接到指定的网页上去。)
(6)框架的保存:单击“
”工具按钮,出现【另存为】对话框。
保存左边框的网页文件。在对话框右面的框架示意图中,单击左边框后为蓝色,表示左边框中的网页正准备保存。在“URL”中输入文件名“in1”,单击【确定】按钮后,此时左边框的网页文件被保存起来。保存右边框的网页文件。紧接着,在对话框的框架示意图中,右边框显示为蓝色。在“URL”中输入文件名“in2”,单击【确定】按钮后,右边框的网页文件也被保存起来。保存框架本身网页。在对话框中整个框架示意图的边框为蓝色,在“URL”中输入文件名“index.htm”,单击【确定】按钮后,此时保存的是整个框架页文件。
三、框架的属性设置“框架间距”:指框架之间的边框的宽度,默认值为2。如果框架不要显示出边框时,可单击“显示边框”前面的单选框,取消“√”。
在框架页中,当要拆分某一框架时,单击框架→拆分框架→选择并确定。当要删除某一框架时,单击框架→删除框架→选择并确定。
单击要设置属性的框架,然后单击【框架】菜单,再单击【框架属性】菜单项,
出现对话框。可以在此对话框中修改框架的框架的名称、宽度、高度、边距、滚动条等属性了。