Download presentation
Presentation is loading. Please wait.
1
第八章 网页制作 8-1 HTML简介 8-2 Frontpage 2000概述 8-3 网页制作 8-4 网页布局 8-5 使用表单
8-3 网页制作 8-4 网页布局 8-5 使用表单 8-6 发布站点 山东工业职业学院信息技术系
2
8-1 HTML简介 WWW的产生是Internet发展史上的一个重要里程碑，是信息社会的支柱。WWW内容丰富、功能强大、便于交互，支持文字、图像、声音、动画、视频等各种多媒体信息。在WWW中，网页是信息的主要组织和表示形式。 山东工业职业学院信息技术系
3
HTML是Hyper Text Markup Language（超文本标记语言）的缩写
HTML语言编写的网页实际上是一种文本文件，以．htm或．html为扩展名，可以使用任何文本处理软件（如记事本、Word等）创作或修改。 山东工业职业学院信息技术系
4
HTML语言概述 书写格式为：<标记名>文本内容</标记名> 属性一般放在“开始标记”中，包含属性的标记的格式为：
<标记名 属性1=值1 属性2=值2．．>文本内容</标记名> 山东工业职业学院信息技术系
5
<title>我的第一个网页</title> </head> <body>
［例］一个简单的网页。 <html> <head> <title>我的第一个网页</title> </head> <body> <p>欢迎进入HTML世界！！</p> 我们将学习关于网页制作方面的基础知识。 </body> </html> 山东工业职业学院信息技术系
6
效果如图8-1： 图8-1 第一个网页的运行结果 山东工业职业学院信息技术系
7
HTML文件以<html>开头，以</html>结束，其文件结构由以下两部分组成： （1）头部
HTML文件的头部由<head>和</head>标记定义。通常情况下，文件的标题、语言字符集信息等都放在头部信息中。 （2）正文主体 正文主体是HTML文件的核心内容，是不可或缺的，由<body>和</body>标记定义。<body>标记具有一些常用的属性，格式如下：<body bgcolor=#n color=#n>．．．</body> 山东工业职业学院信息技术系
8
1．文本布局 3.图片标记<img> 段落标记<p> 换行标记<br> 水平线标记<hr>
HTML语言的基本语法 1．文本布局 段落标记<p> 换行标记<br> 水平线标记<hr> 3.图片标记<img> 2．文字格式 标题标记<hn> 字体标记<font> 4．超链接 山东工业职业学院信息技术系
9
<p><a href=“10．0．0．1/img/01.jpg”>学院风景</a></p>
［例］一个包含图片和超链接的网页。 <html> <head><title>山东工业职业学院</title></head><body> <img src=http：//10．1．2．3/2.Jpg alt=“山东工业职业学院”border=1 width=177 heigh=216> <p><a href=“10．0．0．1/img/01.jpg”>学院风景</a></p> </body〉<html> 运行结果为在页面上显示一个图片和一个超链接，在点击超链接后会出现另一张图片。 山东工业职业学院信息技术系
10
表格是网页中经常使用的工具在网页中使用表格，需要用到一组HTML标记，它们是：
5．使用表格 表格是网页中经常使用的工具在网页中使用表格，需要用到一组HTML标记，它们是： <table>．．．</table>定义表格。 <tr>．．．</tr>定义表行。 <td>．．．</td>定义表列。 山东工业职业学院信息技术系
11
<table border="1" width="100%"> <tr>
［例］表格示例 <html><head><title>表格</title></head><body> <table border="1" width="100%"> <tr> <td width="20%">姓名</td> <td width="20%">语文</td> <td width="20%">数学</td> <td width="20%">英语</td> <td width="20%">物理</td> </tr> <td width="20%">张军</td> <td width="20%">78</td> <td width="20%">88</td> 山东工业职业学院信息技术系
12
<td width="20%">56</td>
</tr> <tr> <td width="20%">王红</td> <td width="20%">77</td> <td width="20%">83</td> <td width="20%">82</td> 山东工业职业学院信息技术系
13
<td width="20%">李强</td>
</tr> </table></body></html> 运行效果图： 山东工业职业学院信息技术系
14
图8-2 表格示例 山东工业职业学院信息技术系
15
8-2 Frontpage 2000概述 FrontPage 2000的启动 单击“开始“按钮，在“开始”菜单中单击“程序”
在“程序“菜单中单击Microsoft FrontPage 在桌面上建立FrontPage 2000快捷方式 山东工业职业学院信息技术系
16
FrontPage2000的窗口 山东工业职业学院信息技术系
17
FrontPage 2000的退出 选取“文件”菜单中的“退出”。 单击操作窗口中右上角的“关闭”按钮。 按快捷键Alt+F4。
山东工业职业学院信息技术系
18
8-3 网页制作 要开发Web站点，首先应当根据其用途规划站点，确定站点的结构，并在本地磁盘上创建站点，然后再建立网页，并将网页发布到网站上。 站点是一组相关网页和其他文件的集合，这些文件通过超链接形成一个完整的结构，就称为“站点”。在FrontPage 2000中，站点是磁盘上的一个特殊文件夹。 山东工业职业学院信息技术系
19
（1）点击“文件”菜单里的“新建”子菜单并选择“站点”，打开“新建”对话框；
8-3-1 创建站点 使用FrontPage 2000的向导和模板，用户可以轻松地创建出各种用途和风格的新站点。新建站点时，可以根据自己的需求选择不同的模板和向导。以“只有一个网页的站点”模板为例，介绍新建站点的方法。 （1）点击“文件”菜单里的“新建”子菜单并选择“站点”，打开“新建”对话框； （2 )“新建”对话框，“指定新站点的位置”，即选择或创建存储站点的文件夹； （3）双击“只有一个网页的站点”模板，新建站点 山东工业职业学院信息技术系
20
山东工业职业学院信息技术系
21
选择“文件”菜单的“退出”命令，可以关闭FrontPage 2000。要再次对该站点进行操作，在启动FrontPage 2000后使用“文件”菜单中的“打开站点”命令打开该站点。
山东工业职业学院信息技术系
22
8-3-2网页编辑 1．新建网页 要创建一个新的网页，按下面的步骤操作：
（1）从“文件”菜单里的“新建”子菜单中选择“网页”命令，出现“新建”对话框； （2）在“常规”选项卡中，选择所需的模板，可在“说明”及“预览”区域查看该模板的说明及预览图。如果要建一个空白网页，可选中“普通网页”模板； （3）单击“确定”按钮，系统新建一个基于所选模板的网页，在FrontPage 2000窗口中，可以对其进行编辑修改等； 山东工业职业学院信息技术系
23
（4）单击“文件”菜单，选择“保存文件”命令，弹出“另存为”对话框，在该对话框中，单击“更改”按钮修改网页标题，在“文件名”文本框中输入网页文件名，如news．htm设置完成后单击“保存”按钮；
（5）单击“视图”框中的“导航”图标，在“文件夹列表”中拖动新建网页到站点的结构图，将其置入相应位置，此时，双击该网页图标可切换到网页视图，若网页中包含导航栏，拖动网页时导航栏会自动更新链接关系。 山东工业职业学院信息技术系
24
在FrontPage 2000中，打开网页的方法有多种，常用的操作步骤如下：
2．打开网页 在FrontPage 2000中，打开网页的方法有多种，常用的操作步骤如下： （1）在FrontPage 2000窗口中，单击工具栏中的“文件夹列表”按钮； （2）在文件夹列表窗口中，找到要编辑的网页，然后双击网页图标，即可打开网页。实际上，在其他视图中双击网页图标，同样会打开指定网页。 山东工业职业学院信息技术系
25
3．设置文字格式 一般网页都由文本、图片等内容构成，同其他Microsft office组件一样，FrontPage 2000允许在网页中可以输入文字，复制、剪切和粘贴文字，查找和替换文字，等等。也可以设置文字的格式。可以使用FrontPage 2000的工具栏上的工具按钮或者菜单命令，快速地改变文字的格式。 山东工业职业学院信息技术系
26
4．设置段落格式 在FrontPage 2000中，通过按回车键划分段落。如果只是需要换行，按【Shift+Enter】键即可（在Word 2000中同样适用）。实际上，按Enter键在HTML代码中插入的是<p>标记，而【Shift+Enter】键则插入的是<br>标记。 山东工业职业学院信息技术系
27
5．网页属性 网页的属性包括网页的标题、位置、背景、页边距等。要设置网页属性，用户可以使用“文件”菜单里的“属性”命令或者在网页的任意地方单击鼠标右键，在弹出的菜单中选择“属性”命令，FrontPage 2000将显示“网页属性”对话框 山东工业职业学院信息技术系
28
6．预览网页 网页制作过程中，用户可以随时对网页进行预览。可以转换到预览视图方式，还可以使用“文件”菜单上的“在浏览器中预览”命令，使用外部浏览器打开当前网页进行预览。 山东工业职业学院信息技术系
29
8-3-3 插入对象 1．水平线 在网页中输入文本内容之后，还可在不同的段落行之间添加水平线，以增强视觉效果。
插入对象 1．水平线 在网页中输入文本内容之后，还可在不同的段落行之间添加水平线，以增强视觉效果。 （1）将光标移动到准备插入水平线的位置，选择“插入”菜单的“水平线”命令，即可在插入点处插入一条水平线； （2）将鼠标移动至水平线上双击，打开“水平线属性”对话框；设置水平线 山东工业职业学院信息技术系
30
2．图片 （1）图片文件的格式 在WWW上，图片文件的格式很多，最常见的是JPEG和GIF。这两种格式的文件较小，适合网络传输。GIF文件采用无损压缩方式，主要特征是支持简单动画、透明背景、图形渐进等。JPEG格式是专为高清晰度照片等设计的，采用有损压缩方式，具有很高的压缩比例。 山东工业职业学院信息技术系
31
（2）插入图片的步骤 <1>确定图片的插入点；
<2>单击“插入”菜单，选择“图片”中的“来自文件”，弹出“图片”对话框，如果图片已存储在站点中，就直接在列表中选择图片；否则，单击“从计算机上选择一个文件”按钮制或单击“使用Web浏览器来选择网页或文件”按钮，从本地计算机硬盘中或者Internet上选中图片； 3）设置图片属性 山东工业职业学院信息技术系
32
（4）编辑图片 单击图片，右击“工具栏”的空白区域，选中快捷菜单中的“图片”，打开图片编辑工具栏，以对图片的亮度、对比度进行调整，可以旋转、翻转图片，可以裁剪图片，等等。 山东工业职业学院信息技术系
33
在网页中加入移动字幕，会使网页看起来更活泼。 在FrontPage 2000中插入移动字幕的步骤如下：
3．字幕 在网页中加入移动字幕，会使网页看起来更活泼。 在FrontPage 2000中插入移动字幕的步骤如下： （1）将插入点设置在要插入移动字幕的位置或者选择作为移动字幕的文本。 （2）单击“插入”菜单中的“组件”，选择“字幕”命令，出现“字幕属性”对话框 山东工业职业学院信息技术系
34
悬停按钮是一种动感按钮，在浏览器中，当访问者将鼠标指向该按钮时，按钮就会改变颜色或形状。插入悬停按钮的基本步骤如下：
4．悬停按钮 悬停按钮是一种动感按钮，在浏览器中，当访问者将鼠标指向该按钮时，按钮就会改变颜色或形状。插入悬停按钮的基本步骤如下： （1）将插入点设置在要插入悬停按钮的位置 （2）单击“插入”菜单中的“组件”，选择“悬停按钮”命令，弹出“悬停按钮属性“对话框 山东工业职业学院信息技术系
35
（4）可以通过单击“自定义”按钮进一步设置按钮的属性。 （5）设置完成，按“确定”按钮
（3）在“按钮文本”框中输入按钮上的文本；可单击“字体”按钮，设置文本的字体、字形、大小和文本颜色；按钮的“背景颜色”一般不起作用；在“效果”列表框中选择当鼠标移到按钮上时出现的视觉效果，可以选择“填充颜色”、“颜色对比”、“发光”、“反色发光”、“微微发光”、“凸出”和“凹进”等效果；可以在“效果颜色”列表框中指定当实现某一种效果时出现的颜色。 （4）可以通过单击“自定义”按钮进一步设置按钮的属性。 （5）设置完成，按“确定”按钮 山东工业职业学院信息技术系
36
8-3-4创建超链接 Web网页的魅力之所在是超链接，可以说，没有超链接网页就失去了其真正的意义。 1．创建超链接
在Web网页中超链接一般有两种表现方式，即以文本方式标注的超链接和以图片方式标注的超链接。利用FrontPage 2000可以很方便地创建指向当前网站的另一个网页或WWW中的另一个站点或者 地址等的文本超链接或图片超链接。 山东工业职业学院信息技术系
37
如果要链接的网页已经存在，创建超链接的步骤如下： <1>点击选定要定义超链接的文本或图片；
（1）链接到已有的网页 如果要链接的网页已经存在，创建超链接的步骤如下： <1>点击选定要定义超链接的文本或图片； <2>单击“常用”工具栏上的“超链接”按钮时，或者从“插入”菜单中选择“超链接”命令，出现“创建超链接”对话框 山东工业职业学院信息技术系
38
<3>在网站中的网页文件列表中选择链接的目标网页； <4>单击“确定”按钮。 （2）链接到一个新建网页
如果要链接的网页还不存在，可以创建链接到一个新创建的网页，步骤如下： <1>在“创建超链接”对话框中单击“创建一网页并链接到该网页”按钮，出现“新建”对话框； <2>在“常规”选项卡中选择一种网页模板，单击“确定”按钮，链接到一个新的网页； <3>编辑此新建网页，保存网页时输入新文件的文件名。 山东工业职业学院信息技术系
39
在FrontPage 2000中，可以创建链接到本地计算机中某个文件的超链接，步骤如下：
（3）链接到计算机中的文件 在FrontPage 2000中，可以创建链接到本地计算机中某个文件的超链接，步骤如下： <1>在“创建超链接”对话框中单击“制作一个指向您计算机上文件的超链接”按钮，出现“选择文件”对话框。 <2>选择要链接的文件，单击“确定”按钮，完成超链接的创建。如果网页发布到网站以后，链接到本地计算机的文件的超链接仍然保留，网上用户就无法正常浏览。发布网页时，FrontPage 2000会自动将该链接文件一并发布，并修改超链接的设置。 山东工业职业学院信息技术系
40
创建与WWW上其他站点的超链接的步骤如下：
（4）链接到外部站点 创建与WWW上其他站点的超链接的步骤如下： <1>在“创建超链接”对话框中单击“使用Web浏览器来选择网页或文件”按钮，系统自动打开Web浏览器； <2>在“地址”栏中输入一个站点的地址，打开某个网页； <3>切换至FrontPage 2000窗口中，浏览器中网页的地址就会出现在“创建超链接”对话框的“URL”栏中 <5>链接到电子邮件地址 山东工业职业学院信息技术系
41
在创建到书签的链接之前，必须要在网页中插入书签。 <1>将光标定位在要插入书签的位置；
2．使用书签 单击一个网页的超链接，浏览器中显示的是网页的顶端。如果网页的内容较多，用户不得不使用浏览器的滚动条进行调节。应用书签可以将打开的网页直接滚动到需要的位置，方便了用户的浏览。 （1）插入书签 在创建到书签的链接之前，必须要在网页中插入书签。 <1>将光标定位在要插入书签的位置； <2>点击“插入”菜单的“书签”命令 <3>在“书签名称”框中键入书签名称； <4>单击“确定”按钮，网页中出现书签标记。 山东工业职业学院信息技术系
42
<1>在“创建超链接”对话框中，选定已经插入书签的目标网页，在“可选”区域中单击“书签”下拉按钮，在列表中选择链接的书签名称；
（2）创建到书签的超链接 步骤如下： <1>在“创建超链接”对话框中，选定已经插入书签的目标网页，在“可选”区域中单击“书签”下拉按钮，在列表中选择链接的书签名称； <2>单击“确定”按钮，完成超链接的制作。 山东工业职业学院信息技术系
43
（2）从“插入”菜单中选择“导航栏”命令，出现“导航栏属性”对话框
3．使用导航栏 为了使浏览者能在站点中的各个网页之间的切换浏览，可以在每一个网页中分别设定链接到各网页的超链接，但是这样做非常繁琐，为此，FrontPage 2000提供了“导航栏”功能。 （1）将光标设置在要插入导航栏的位置； （2）从“插入”菜单中选择“导航栏”命令，出现“导航栏属性”对话框 （3）“在要添加到网页的超链接”区域中设定所需的超链接选项，当选择了一个选项时，相应的超链接就以蓝色出现在结构示意图中；在“方向和外观”区域中选择所需的方向和外观选项； 山东工业职业学院信息技术系
44
（4）单击“确定”按钮，导航栏出现在网页中的插入点位置。
当网站中的网页的链接结构发生改变时，导航栏将自动进行调整，保持与变化后的链接结构的一致性。 山东工业职业学院信息技术系
45
8-4 网页布局 网页的布局设计是将文字、图形、图像等网页元素，根据特定的内容和主题，在网页所限定的范围中进行视觉的关联与配置，从而将设计意图以视觉形式表现出来。 网页的布局一般通过使用表格和框架来实现。 山东工业职业学院信息技术系
46
8-4-1使用表格 表格由行和列交叉所形成的单元格组成。在单元格中可以放置任何对象，例如文本、图像、表单、FrontPage组件等。利用表格可以有条理地排列数据或者组织网页布局。表格可以将文本排列成并列的段落，或模拟文本的分栏形式，也可以利用宽度固定的表格在网页上为文本提供边界。 山东工业职业学院信息技术系
47
FrontPage 2000提供了与Word字处理软件类似的表格处理功能 1．创建表格 （1）使用“插入表格按钮”创建
使用“常用”工具栏中的“插入表格”按钮，可以按默认方式快速地插入表格。 （2）使用菜单命令创建 （3）手动绘制 山东工业职业学院信息技术系
48
插入表格后，右击表格，在快捷菜单中选择“表格属性”命令，可打开“表格属性”对话框。
2．设置表格属性 插入表格后，右击表格，在快捷菜单中选择“表格属性”命令，可打开“表格属性”对话框。 可设置以下参数： 对齐方式 浮动：决定表格与其他网页元素的排列关系，即“文字环绕”效果。 指定宽度和高度 单元格边距 单元格间距。 边框背景 山东工业职业学院信息技术系
49
创建了表格之后，可以对表格单元格、行和列的布局和结构进行调整。
3．调整表格 创建了表格之后，可以对表格单元格、行和列的布局和结构进行调整。 （1）插入行或列 （2）删除行、列或单元格 （3）合并单元格 （4）拆分单元格 （5）设置单元格属性 山东工业职业学院信息技术系
50
8-4-2使用框架 使用框架是进行网页布局设计的一种重要手段。框架将浏览器窗口划分为几个区域，在每个框架中都可以显示一个独立的网页。浏览器窗口中显示的网页实际是这些框架的集合，因此被称为框架网页。框架网页并不包含显示内容，只是记录了该框架网页包含几个框架、拆分方式以及每个框架中显示哪个网页（与其他网页的超链接）等。 山东工业职业学院信息技术系
51
FrontPage 2000提供了最流行的框架网页布局模板，可以使用这些模板轻松地创建框架网页。 具体步骤如下：
1．创建框架 FrontPage 2000提供了最流行的框架网页布局模板，可以使用这些模板轻松地创建框架网页。 具体步骤如下： （1）在“文件”菜单的“新建”子菜单中选择“网页”命令，打开“新建”对话框； 山东工业职业学院信息技术系
52
图8-24 新建框架网页 山东工业职业学院信息技术系
53
图8-25 目录框架网页 山东工业职业学院信息技术系
54
（3）点击所需的模板，如“目录”模板，在“说明”区域中显示所选模板的描述，在“预览”区域中预览框架网页的布局；
（2）点击“框架网页”选项卡，如图8-24 （3）点击所需的模板，如“目录”模板，在“说明”区域中显示所选模板的描述，在“预览”区域中预览框架网页的布局； （4）单击“确定”按钮，完成框架网页的创建，如图8-25所示。 山东工业职业学院信息技术系
55
2．保存框架网页 保存框架网页的步骤如下： （1）单击“常用”工具栏中的“保存”按钮，出现“另存为”对话框。在右边的框架网页预览图中，有一个高亮显示的框架，表示要保存的是该网页，见图8-26； 山东工业职业学院信息技术系
56
图8-26 保存顶框架中的网页 山东工业职业学院信息技术系
57
（2）选定“保存位置”，输入网页“文件名”； （3）单击“更改”按钮，设置网页的标题；
（4）单击“保存”按钮，该网页保存完毕，同时框架预览图中的另一个框架被高亮显示； （5）重复步骤（2）~（4）的操作； 山东工业职业学院信息技术系
58
图8-27 高亮显示的框架页 山东工业职业学院信息技术系
59
网页本身，输入框架网页的文件名称及标题，单击“保存“按钮。 3．拆分框架
（6）当图8-26的对话框中的整个框架处于高亮状态时（如图8-27），表示要保存的是框架 网页本身，输入框架网页的文件名称及标题，单击“保存“按钮。 3．拆分框架 当使用模板创建的框架结构不能满足需要时，可以通过拆分框架制作出更为复杂的框架网页。操作步骤如下： 山东工业职业学院信息技术系
60
（2）在“框架”菜单中选择“拆分框架”命令，出现“拆分框架”对话框，见图8-28； （3）根据需要选择“拆分为列”或“拆分成行”；
（1）打开框架网页，选择要拆分的框架； （2）在“框架”菜单中选择“拆分框架”命令，出现“拆分框架”对话框，见图8-28； （3）根据需要选择“拆分为列”或“拆分成行”； （4）单击“确定”按钮，完成拆分。 山东工业职业学院信息技术系
61
图8-28 拆分框架 山东工业职业学院信息技术系
62
可以从框架结构中删除指定的框架。此时，系统只是把框架从框架网页中删去，而此框架中的网页文件仍然存在。
4．删除框架 可以从框架结构中删除指定的框架。此时，系统只是把框架从框架网页中删去，而此框架中的网页文件仍然存在。 方法是：打开框架网页，选择要删除的框架，单击“框架”菜单的“删除框架”命令。 5．设置框架属性 通过对框架属性的设置，可以更改框架的超链接网页、调整框架大小等。 山东工业职业学院信息技术系
63
图8-29 框架属性对话框 山东工业职业学院信息技术系
64
方法是：打开框架文件，选择所需框架，单击“框架”菜单的“框架属性”命令，显示如图8-29所示的“框架属性”对话框，设置框架属性。
框架的“框架属性”包括： 名称：为每个框架命名一个名称。 初始网页：即链接到该框架的网页，在浏览器中打开框架网页时，将首先显示该网页。框架大小：包括框架的宽度或行高。 山东工业职业学院信息技术系
65
边距：设置框架内显示的内容与框架边框之间的距离。 显示滚动条：可以设置框架的滚动条的显示状态。
单击“框架网页”按钮，弹出如图8-30所示“网页属性”对话框，可以调整框架间距。清除对话框“显示边框”的选择，可以隐藏框架边框。 山东工业职业学院信息技术系
66
图8-30 网页属性对话框 山东工业职业学院信息技术系
67
框架的使用，使网站的组织更加灵活。若要设置框架的超链接，执行下列操作： （1）打开包含该超链接的网页，选择要定义超链接的文字或图片；
6．创建框架的超链接 框架的使用，使网站的组织更加灵活。若要设置框架的超链接，执行下列操作： （1）打开包含该超链接的网页，选择要定义超链接的文字或图片； （2）单击“常用”工具栏上的“超链接”按钮后，出现“创建超链接”对话框； （3）在“URL”框中输入链接的目标网页； （4）单击“更改目标框架”按钮，出现“目标框架”对话框； 山东工业职业学院信息技术系
68
（5）在“当前框架网页”区域中单击要用作目标的框架； （6）单击“确定”按钮，返回到“创建超链接”对话框； （7）单击“确定”按钮。
在“目标框架”对话框中，“公用的目标区”中包含一些特殊的设置，用来指定点击超链接时所打开的网页的显示方式： 山东工业职业学院信息技术系
69
相同框架：将链接的网页显示在包含该超链接的同一个框架内。 整页：将框架展开为整个窗口后，显示链接网页。
新建窗口：打开另外一个浏览器窗口，显示链接网页。 父框架：在包含当前框架的框架网页内显示链接网页。 山东工业职业学院信息技术系
70
8-5 使用表单 表单是Web服务器与用户交互的手段。用户将自己的信息输入到表单中，提交到WWW服务器，服务器对不同用户提交的信息作出不同的响应，从而实现交互。例如，某厂商可以用表单设计一个订货单，让客户提交要购买的商品名称、型号、数量等，当订货单提交到服务器后，厂商就可以收集这些订货单，安排生产。 山东工业职业学院信息技术系
71
8-5-1 创建表单 表单是由表单域组成的，表单域是供用户输入信息的对象。在Frontpage2000中，有6种表单域，它们是单行文本框、滚动文本框、复选框、单选按钮、下拉菜单、命令按钮等。 1．单行文本框 单行文本框用于接收一行文字，如用户姓名。要在打开的网页中插入一个单行文本输入框，单击“插入”菜单，选择“表单”下的“单行文本框”。如果这是网页中的第一个表单，网页显示如图8-31所示： 山东工业职业学院信息技术系
72
图8-31 文本框 图8-32 文本框属性 山东工业职业学院信息技术系
73
右击单行文本框控件，选择“表单域属性”命令，或者双击该单行文本框，Frontpage2000将打开“文本框属性”对话框，如图8-32。
表单及表单中的每个表单域都必须有惟一的名称。在图8-32所示的对话框中，输入单行文本框的“名称”和“初始值”（打开网页时在单行文本框中自动填写该“初始值”），设置单行文本框的显示字符个数一一“宽度”（不同于所接受的文本的字符个数）。如果该单行文本框用于接受用户输入的口令，则选择密码域为“是”，在浏览器中，单行文本框中的内容显示为若干个”*”号。“验证有效性”用于设置对输入的字符的限制，如指定最多允许输入几个字符等。 山东工业职业学院信息技术系
74
滚动文本框用于接受多行文本的输入，比如商品描述、客户意见等。
2．滚动文本框 滚动文本框用于接受多行文本的输入，比如商品描述、客户意见等。 与单行文本框类似，可以设置滚动文本框的属性。不同的是，对于单行文本框，如果输入的字符数多于显示“宽度”，会发生字符滚动，多余的字符被隐藏，而对于滚动文本框，则自动换行，超出文本框“高度”的行会被隐藏起来。 山东工业职业学院信息技术系
75
复选框包含一组相对独立的选项，用户可以选中其中的若干项，也可以一个都不选，比如用户的个人喜好。同一表单中，每个复选框需要单独命名。
3．复选框 复选框包含一组相对独立的选项，用户可以选中其中的若干项，也可以一个都不选，比如用户的个人喜好。同一表单中，每个复选框需要单独命名。 山东工业职业学院信息技术系
76
4．单选按钮 可以使用单选按钮组成一组互斥的选项，用户只能选择其中一项，比如用户的性别。
表单中可以包含若干个单选按钮组，每组拥有一个名称一一组名，即同一组单选按钮的名称必须相同 山东工业职业学院信息技术系
77
下拉菜单用于接受对一个列表的选择，可以选择其中的一项或几项。从功能上讲，可以用一组复选框或一组单选按钮来实现，但下拉菜单占用的网页空间较小。
5．下拉菜单（下拉列表） 下拉菜单用于接受对一个列表的选择，可以选择其中的一项或几项。从功能上讲，可以用一组复选框或一组单选按钮来实现，但下拉菜单占用的网页空间较小。 在表单中，要插入一个下拉菜单，可双击下拉菜单，打开“下拉菜单属性”对话框。单击“添加”按钮打开“添加选项”对话框如图8-33所示。 山东工业职业学院信息技术系
78
在“选项”文本框内输入选项的名称，如单位名称，它将显示在浏览器的下拉菜单中，供用户选择。如果想提交的表单数据是另外的值，比如用编号表示单位，则选中并输入“指定值”。
山东工业职业学院信息技术系
79
6．命令按钮 每个表单上至少包含一个“提交”按钮和一个“全部重写”按钮，它们是在创建表单时自动创建的。用户点击“提交”按钮，可以把表单上的数据提交给Web服务器的表单处理程序，点击“全部重写”按钮，可清除用户的输入数据，以便重新填写。 山东工业职业学院信息技术系
80
提交表单 Web服务器怎样获取和处理用户提交的表单信息呢？当用户单击“提交”按钮后，浏览器将表单数据发送到Web服务器，Web服务器用表单处理程序来接收并处理表单数据。 表单处理程序可以是服务器上的注册控件，也可以是由网站开发者定义的ISAPI/NSAPI应用程序或CGI脚本等。表单处理程序位于Web服务器上。 设置表单的表单处理程序的方法是： 打开包含表单的网页，在表单上单击鼠标右键，在弹出菜单中选择“表单属性”，打开“表单属性”对话框，如图8-34所示。 山东工业职业学院信息技术系
81
图8-34 表单属性 山东工业职业学院信息技术系
82
图8-35 发送到其他对象 山东工业职业学院信息技术系
83
如果使用Frontpage 2000默认的表单处理程序，选择“发送到”。默认情况下，用户提交的表单数据以文本文件的形式保存到Web服务器的_private文件夹中，文件名为：表单名_results.txt如果不想使用FrontPage 2000默认的表单处理程序，可以选择“发送到其他对象”，然后选择“自定义ISAPI、NSAPI、CGI或ASP脚本”、FrontPage 2000预定义的“讨论表单处理程序”或者“注册表单处理程序”等，如图8-35所示。 需要说明的是，要使用FrontPage 2000默认的表单处理程序或FrontPage 2000预定义的“讨论表单处理程序”或者“注册表单处理程序”，必须在Web服务器上安装Frontpage 2000服务器扩展。 山东工业职业学院信息技术系
84
8-6 发布站点 所谓发布站点，就是把创建或修改后的站点内容上传到WWW服务器以便用户浏览FrontPage2000提供了一个相当方便的站点发布工具，可以快速地发布用FrontPage 2000创建的站点。发布站点的基本方法是： 1．在Frontpage 2000中，打开要发布的站点； 2．在“常用“工具栏中单击“发布站点“按钮，如图8-36所示； 山东工业职业学院信息技术系
85
图8-36 发布站点 山东工业职业学院信息技术系
86
3．在“指定发布站点的位置”文本框中输入网站的URL或IP地址；
4．单击“发布”按钮，FrontPage 2000开始检测WWW服务器的状态，与服务器连接成功后，会出现“要求提供用户名和密码”对话框； 5．输入服务器为用户开辟的用户名和密码后，单击“确定”按钮，开始站点的发布过程； 6．发布成功后，应在浏览器中打开站点仔细检查，以发现可能存在的错误，如网页显示异常、链接错误等。 如果WWW服务器上未安装FrontPage 2000服务器扩展，可以选择使用FTP文件上传方式发布站点。FrontPage 2000的站点发布向导支持FTP文件上传。 山东工业职业学院信息技术系
87
本章的主要内容就演示到这里 谢谢观看 山东工业职业学院信息技术系
Similar presentations
