PPT
【文档说明】山东专升本计算机文化基础第七版课件_第9章.ppt，共(99)页，1.483 MB，由小橙橙上传
转载请保留链接：https://www.ichengzhen.cn/view-76683.html
以下为本文档部分文字说明：
第九章网页制作目录上一页下一页结束2022/12/11计算机文化基础第九章网页制作9.1HTML简介9.2FrontPage2003概述9.3网页制作9.4网页布局9.5创建表单页面9.6网页的发布目录上一
页下一页结束2022/12/12计算机文化基础9.1HTML简介HTML即HypertextMarkupLanguage的缩写。它使用一些约定的标记（Tag）对文本进行标注，定义网页的数据格式，描述Web页中的信息，控制文本的显示。我们把用HTML语言编写的文
件称为HTML文件。它通常被存储在Web服务器上，客户端通过浏览器向Web服务器发出请求，服务器响应请求并将HTML文件发送给浏览器，然后由浏览器对文件中的标记作出相应的解释，以页面的形式呈现在用户屏幕上。因此，
我们又把HTML文档称为网页(WebPage)。目录上一页下一页结束2022/12/13计算机文化基础9.1HTML简介HTML语言是一种标记语言，简单易学。用HTML语言编写的网页实际上是一种文本文件，它以.htm或.html为扩展名，我们可以使用任
何文本处理软件（例如：记事本）编写。9.1.1HTML语言概述9.1.2HTML语言的基本语法返回目录上一页下一页结束2022/12/14计算机文化基础9.1.1HTML语言概述HTML语言是由世界性的标准化组织
W3C（WorldWideWebConsortium）制定的，通过浏览http://www.w3.org可以了解到HTML标准的最新动态。下面介绍HTML文件的基本构成和HTML文件的层次结构。目录上一页下一页结束2022/12/15计算机文化基础1.H
TML文件的基本构成Internet中的每一个HTML文件都包括文本内容和HTML标记两部分。其中，HTML标记负责控制文本显示的外观和版式，并为浏览器指定各种链接的图像、声音和其他对象的位置。多数HTML标记的书写格式如下：<标记名>文本内容</标记名>标记名写在“<>”内。多数HTM
L标记同时具有起始和结束标记，并且成对出现，但也有些HTML标记没有结束标记。另外，HTML标记不区分大小写。HTML文件的基本构成目录上一页下一页结束2022/12/16计算机文化基础某些HTML标记还具有一些属性，这些属性指定对象的特性，如背景颜色、文本字体及大
小、对齐方式等。属性一般放在“起始标记”中，格式如下：<标记名属性1=值1属性2=值2…>文本内容</标记名>其中标记名和属性之间用空格分隔。如果标记有多种属性，属性之间也要用空格分隔。HTML文件的基本构成
目录上一页下一页结束2022/12/17计算机文化基础2.HTML网页的结构现在我们先看一个简单的HTML文件，从中体会用HTML语言编写网页时的层次结构。【例9-1】用HTML语言编写一个简单的网页。<html><head><title>我的第一个Web页</title></head><b
ody><h1>欢迎进入HTML世界！</h1><p>这里我们首先介绍HTML语言的基本知识和语法。然后，讲授如何使用HTML语言编写您的Web页面。</p></body></html>目录上一页下一页结束2022/12/18计算机文化基础HTML语言概述将上述代码用文本编辑器编辑并保存为
一个扩展名为.htm的文件，双击该文件图标，在浏览器中看到如下图所示的结果。图9-1目录上一页下一页结束2022/12/19计算机文化基础从上例可以看出，一般HTML文件都是以<html>开头，以</html>结束。其文件结构
由以下两部分组成：1）头部（Head）HTML文件的头部由<head>和</head>标记定义。通常情况下，文件的标题、语言字符集信息等都放在头部信息中。最常用到的标记是<title>…</title>，它用于定义网页
文件的标题，当该网页文件被打开后，网页文件的标题将出现在浏览器的标题栏中。目录上一页下一页结束2022/12/110计算机文化基础文件结构2）正文主体（Body）正文主体是HTML文件的核心内容，由<body>和</body>标记定义。<body>标记具有一些常用的属性，格式如下：<bo
dybgcolor=#ncolor=#n>…</body>其中，bgcolor为背景颜色，color为文本颜色。n为六位十六进制数。如果网页使用背景图像，格式如下：<bodybackground="路径/图片文件名">…</body>HTML
对格式的要求并不严格，当HTML文件被浏览器扫描时，所有包含在文件中的空格、回车等均被忽略。因此你可以将一行写成两行或多行，在浏览器中结果是相同的。返回目录上一页下一页结束2022/12/111计算机文化
基础9.1.2HTML语言的基本语法1.文本布局1）段落标记<p><p>…</p>标记指定文档中一个独立的段落。通过设置align属性，控制段落的对齐方式，其值可以是left、center、right、justif
y，分别表示左对齐、居中、右对齐和两端对齐，默认值为左对齐。使用格式如下：<palign=对齐方式>…</p>2）换行标记<br><br>标记可以强制文本换行。该标记只有起始标记。3）水平线标记<hr>水平线标记<hr>
用于在网页中插入一条水平线。目录上一页下一页结束2022/12/112计算机文化基础2.文字格式HTML语言中用于文字格式化的标记有：1）标题标记<hn>格式为：<hn属性=属性值>标题文字内容</hn>
其中n说明大小级别，取值范围为1到6的数字。把标题分为6级，即h1~h6，其中h1文字最大，h6文字最小。目录上一页下一页结束2022/12/113计算机文化基础2）字体标记<font>字体标记用来对文字格式进行设置，主要具有以下属性：（1）size属性：用来控制文
字的大小，格式如下：<fontsize=n>…</font>其中n的取值范围为1～7的数字，默认值为3。<font>标记和<hn>标记都可以控制文字的大小。一般情况下，文章的标题最好由<hn>标记控制，而其余的文字由<font>标记控制。相比较而言，<font>对字体的控制更
加灵活。（2）color属性：用来控制文字的颜色，格式如下：<fontcolor=#n或英文表示的颜色>…</font>其中n是一个十六进制的六位数。（3）face属性：用来指明文字使用的字体，格式如下：<fontface
=字体名>…</font>其中字体名的选择由Windows操作系统安装的字体决定。如：宋体、楷体_GB2312、TimesNewRoman、Arial等。文字格式目录上一页下一页结束2022/12/114计算机文化基础3）字形标
记字形标记用于设置文字的粗体、斜体、下划线、上标、下标等。标记格式字形结果<B>…</B>粗体<I>…</I>斜体<U>…</U>下划线<SUP>…</SUP>上标<SUB>…</SUB>下标文字格式目录上一页下一页结束2022/12/
115计算机文化基础3.插入图片<img>标记将图片插入网页中，用于设置图片的大小以及相邻文字的排列方式。该标记具有以下属性：（1）src属性：指明图片文件所在的位置。格式如下：<imgsrc=URL>其中URL指图片文件存放的位置。（2）alt属性：图片的
文字说明，当鼠标指针指向图片时，该图片的说明性文字弹出。格式如下：<imgsrc=URLalt=说明文字>（3）width和height属性：设置图片显示区域的宽度和高度。格式如下：<imgsrc=URLwidth=n1height=n2>其中width和height属性的取值
n1和n2，可以是像素数或百分比。目录上一页下一页结束2022/12/116计算机文化基础（4）border属性：设置图片文件的边框。格式如下：<imgsrc=URLborder=n>其中n为像素数。（5）align属性：设置图片相对于文本的位置关系。格式为：<imgsrc=URLalign=
对齐方式>对齐方式可以是：top（顶端对齐）、middle（相对垂直居中）、bottom（相对底边对齐）、left（左对齐）、right（右对齐）、texttop（文本上方）等。插入图片目录上一页下一页结束
2022/12/117计算机文化基础4.插入超链接在HTML语言中，<a>和</a>标记用于设置网页中的超链接，href属性指明被超链接的文件地址。格式如下：<ahref=URL>超链接文本</a>用于表示超链接的文本一般显示为蓝色并且加下划线。在浏览器中，当鼠标指针指向该文本时，
箭头变为手形，并在浏览器的状态栏中显示该超链接的地址。若使用图片做超链接，可使用如下格式完成：<ahref=URL1><imgsrc=URL2></a>目录上一页下一页结束2022/12/118计算机文化基础5.使用表格在网页中插入一个表格，需要用到一组HTM
L标记。定义表格的有关标记如下：<table>…</table>定义表格区域。<caption>…</caption>定义表格标题。<th>…</th>定义表格头。<tr>…</tr>定义表格行。<td>…</td>定义表格单元格。
返回目录上一页下一页结束2022/12/119计算机文化基础常用的标记属性中，border属性用于设置表格边框的宽度；width、height属性用于设置表格或单元格的宽度、高度；cellspacing和cellpadding属性分别用于设置单元格之间的间隙和单元格内部空白；
align属性用于设置表格或单元格的对齐方式；bgcolor和background属性分别用于设置表格的背景颜色和背景图像。表格属性目录上一页下一页结束2022/12/120计算机文化基础9.2FrontPage2003概述虽然使用一般的文本
编辑器就可以编写HTML文档，但是使用专门的HTML编辑器或Web创作工具往往更加方便。具有“所见即所得”功能的Web页面创作工具可以使Web创作人员直接面对Web页面进行编辑修改，并且能立即看到Web页面的显示效果。FrontPage2003是微软公司开发的网页制作和网站管理
工具，它是MicrosoftOffice2003的组件之一，与Office的其他组件高度融合，界面友好，功能强大，易学易用，是目前使用较为广泛的网页制作、网站管理工具之一。目录上一页下一页结束2022/12/121计算机文化基础9.2FrontPage2003
概述9.2.1FrontPage2003的主要功能9.2.2FrontPage2003的启动与退出9.2.3网页与网站9.2.4FrontPage2003的网页视图模式9.2.5FrontPage2003中的视
图返回目录上一页下一页结束2022/12/122计算机文化基础9.2.1FrontPage2003的主要功能FrontPage2003的主要功能是制作网页和管理站点。使用FrontPage2003可以创建新的网页，也可
以打开并修改已经存在的网页。FrontPage2003提供了多种编辑网页的方式，不但可以直接修改HTML，而且可以采用“所见即所得”的方式编辑网页，还可以使用菜单命令插入各种网页元素，使用对话框修改其属性，十分灵活。返回目录上一页下一页结
束2022/12/123计算机文化基础在FrontPage2003中，可以很容易地插入文本、图片、表格、组件等元素；可以使用主题和样式表、共享边框、框架等管理网页的外观；还可以使用表单等元素设计出交互式网页。
FrontPage2003提供了强大的站点管理功能。一组相关网页和有关文件组成一个站点，站点也是FrontPage2003对网站进行管理的基本单位。在FrontPage2003中可以轻松实现设计、管理、分析、发布和维护站点等工作。FrontPage2003的主要功能目录上一页
下一页结束2022/12/124计算机文化基础9.2.3网页与网站网页是全球广域网上的基本文档，用HTML书写，通常以.htm或.html为扩展名。网页可以独立存在，但常常作为网站的一部分。网站是一组相关网页和有关
文件的组合，一般有一个特殊的网页作为浏览的起始点，称为主页（Homepage），用来引导用户访问其他网页。网站通常位于Web服务器上，客户机通过网络向Web服务器发送请求，Web服务器响应客户机的请求，并使用HTTP协议将网页和有关文件通过网络传送回客户机，客户机端使用网页浏览器就能看到
网页的内容了。目录上一页下一页结束2022/12/125计算机文化基础网页与网站在FrontPage2003中，可以建立和编辑独立的网页，也可以设计和管理站点。在站点中可以包含大量网页和各种文件，甚至可以包含子站点，而且只有在使用站点时，FrontPage20
03的许多特性才有效。通常，在FrontPage2003中建立的站点需要发布到Internet中的Web服务器上，成为真正意义上的网站，Internet上的用户才能访问。有时，可以在同一台计算机上安装Web服务器端软件，从而将站点发布到本机进行测试。用FrontPage2003也可以建立
基于本地硬盘的站点，这种站点以本机文件夹的形式存在，不需要发布到服务器，这时，需要服务器支持的功能是不可用的。返回目录上一页下一页结束2022/12/126计算机文化基础9.2.4FrontPage2003的网页视图模式FrontPage2003提供了四种网页视图模式：设计视图是打开网页首先进
入的视图，可以在其中输入文本、插入图片、插入表格等，也可以任意进行修改。代码视图中，用户可以查看、编写和编辑HTML标记。预览视图中可以看到网页在Web浏览器中的大体显示情况。FrontPage2003新增的拆分
视图将窗口工作区拆分成上、下两部分，上半部分是代码区，下半部分是设计区。无论对哪一个区域进行修改，另一个区域都会做出相应的改变。返回目录上一页下一页结束2022/12/127计算机文化基础9.2.5FrontPage2003中的视图FrontPage2003提供了以下几种视图以方
便用户对站点的管理，用户可以在不同的视图中进行相应的操作。1.网页视图2.文件夹视图3.远程网站视图4.报表视图5.导航视图6.超链接视图7.任务视图目录上一页下一页结束2022/12/128计算机文化基础9.3网页制作Web站点的开发，首先应当根据其用途进行规划，确定站点结构
，在本地磁盘上创建站点，然后再建立网页。那么什么是“站点”呢？其实站点就是一组相关网页和其他文件的集合，这些网页在Internet中表现为一个完整结构就称为“站点”。在FrontPage2003中，站点以一个特殊文件夹的形式存储。目录上一页下一页结束2022
/12/129计算机文化基础9.3网页制作9.3.1创建站点9.3.2网页编辑9.3.3插入对象9.3.4创建超链接返回目录上一页下一页结束2022/12/130计算机文化基础9.3.1创建站点使用FrontPage2003的模板和向导，用户可以轻松地创建出各种用途和风格
的站点。新建站点时，可以根据自己的需求选择不同的模板和向导。对于不同的模板和向导，其新建站点的步骤略有不同。下面以“由一个网页组成的网站”模板为例，介绍新建站点的方法。（1）单击“文件”菜单的“新建”命令，在“新建”任务窗格
中选择“新建网站”中的“由一个网页组成的网站”；（2）在弹出的“网站模板”对话框的“指定新网站的位置”框中输入新站点要保存的位置，也可使用“浏览”按钮指定新站点的位置；目录上一页下一页结束2022/12/131计算机文化基础（3）单击“确定”按钮，新建站点如下图所示返回该站点只有一个空白网页in
dex.htm（主页）和用于存储图片的文件夹images，你可以打开index.htm进行编辑，也可以进一步根据网站规划创建文件夹和新建其他网页。选择“文件”菜单的“退出”命令，可以关闭FrontPage2003。目录上一页下一页结束2022/12/132计算
机文化基础9.3.2网页编辑1.新建网页2.打开/保存网页3.预览网页4.设置文字格式5.设置段落格式6.设置网页属性返回目录上一页下一页结束2022/12/133计算机文化基础网页编辑要根据“网页模板”创建一个新的网页，可以按下面的步骤：（1）单
击“文件”菜单的“新建”命令，在“新建”任务窗格中选择“新建网页”中的“其他网页模板”。（2）在弹出的“网页模板”对话框中选择所需的网页模板，可以在“说明”及“预览”区域查看该模板的说明及预览图。（3）单击“确定”按钮，系统新建一个基于所选模板的网页。（4）单击“文件”
菜单，选择“保存”命令，弹出“另存为”对话框。在此对话框中，输入文件名进行保存。返回1.新建网页目录上一页下一页结束2022/12/134计算机文化基础在FrontPage2003中，编辑某个网页之前，需要先打开该网页。
打开网页的方法有多种，常用的有以下几种：（1）使用“文件”菜单的“打开”命令，或“常用”工具栏的“打开”按钮，在弹出的“打开文件”对话框中选择相应的网页；（2）如需要打开的文件已在打开的网站中，在文件夹视图中双击该网页图标即可将其打开。实际上，
在其他视图中双击网页图标，同样会打开指定网页。要保存一个网页，可以使用“文件”菜单的“保存”命令，或“常用”工具栏的“保存”按钮，如需另存可使用“文件”菜单的“另存为”命令。返回2.打开/保存网页网页编辑目录
上一页下一页结束2022/12/135计算机文化基础网页制作过程中，用户可以切换到“预览”视图预览网页，也可以使用“文件”菜单的“在浏览器中预览”命令预览网页。使用后者，系统会打开浏览器显示网页，如果该网页尚未保存，会
弹出对话框提示用户保存网页。返回3.预览网页网页编辑目录上一页下一页结束2022/12/136计算机文化基础4.设置文字格式同其他MicrosoftOffice组件一样，在网页中可以输入文字，复制、剪切和粘贴文字，设置文字格式，查找和替换文字等。在FrontPage2003中，
对文字的格式提供了相当完整的设定功能，文字格式的变化也因此多种多样。可以使用工具栏上的工具按钮或菜单命令快速地改变文字的外观。设置文字格式的一般操作步骤是：选中文字，单击“格式”菜单的“字体”命令，在弹出的“字体”对话框中设置字体的各种属性，也可以使用“格式
”工具栏中相应的命令按钮。虽然可以设置各种美观的字体，但是由于用户只能使用本地计算机中安装的字体显示网页，因此还是使用常见的字体为好。返回网页编辑目录上一页下一页结束2022/12/137计算机文化基础5.设置段落格式文字段落的格式编排对于一个
网页的外观是至关重要的。FrontPage2003通过按Enter键划分段落。值得注意的是，段落之间插入了一个空行。如果只是需要换行，而不是另起一个段落，按Shift+Enter键即可。实际上，按Enter键在HTML代码中插入的是<p>标记，而按Shift+E
nter键则插入的是<br>标记。段落格式主要包括对齐方式、缩进和段落间距等。设置段落格式的一般方法如下：将插入点移动到要设置格式的段落中，或是选中该段落，单击“格式”菜单的“段落”命令，在弹出的“段落”对话框中进行各种段落格式属性的设置。
返回网页编辑目录上一页下一页结束2022/12/138计算机文化基础6.设置网页属性网页属性包括网页的标题、格式、页边距等。要设置网页属性，用户可以使用“文件”菜单的“属性”命令，或者在网页的任意地方单击鼠标右键，在弹出的右键菜单中选择“网页属性”命令，FrontPage2003将显示
“网页属性”对话框。网页编辑目录上一页下一页结束2022/12/139计算机文化基础1）“常规”属性要设置网页的“常规”属性，单击“网页属性”对话框的“常规”选项卡，如下图所示。“标题”框用于给出网页的标题，网页标题将显示在浏览器的标题栏中。“背景音乐”框
用于指定网页的背景音乐，当用浏览器打开网页时，将自动播放背景音乐。背景音乐区域的“位置”框用于指定声音文件的位置，用户可以使用“浏览”按钮选择一个声音文件；“循环次数”框用于指定声音要反复播放的次数，如果选中“不限次数”复选框，表示一直不
停地播放。网页编辑目录上一页下一页结束2022/12/140计算机文化基础2）“格式”属性要设置网页的背景、颜色，可以使用“网页属性”对话框的“格式”选项卡，如下图所示。用户可以选中“背景图片”复选框，指定一个图片作为网页的背景图片。如果要将图片按水印形式添加，需要选中“使其成为水
印”复选框。通过单击相应的下拉列表框，可以设置网页的背景颜色、文本颜色以及超链接文字的颜色。当同时设置背景图片和背景颜色时，背景图片将覆盖背景色。返回网页编辑目录上一页下一页结束2022/12/141计算机文化基础9.3.3插入对象1.插入水平线2.插入图片3.插入字幕4.插入交互式按
钮5.插入站点计数器返回目录上一页下一页结束2022/12/142计算机文化基础1.插入水平线在网页中输入文本内容后，还可在不同的段落、行之间添加水平线，水平线将网页分割成几个部分，使得网页更具条理性。具体操作步骤如下：（1）在准备插入水平线的位置设置插入点；（2）单击“插入
”菜单的“水平线”命令，插入水平线。要修改水平线的外观，可以双击水平线，打开“水平线属性”对话框。“宽度”框用于设置水平线的宽度，“高度”框用于设置水平线的高度，“对齐方式”用于设置水平线在网页内水平对齐的方式，“颜色”列
表框用于设置水平线的颜色，选中“实线（无阴影）”复选框时，水平线将被设成实心线。要为线条指定自定义样式或其他格式，可以使用“样式”按钮进行设置。返回目录上一页下一页结束2022/12/143计算机文化基础2.插入图片图片可以使网页变得生动活泼，并能吸引
用户的注意。1）图片文件的格式在WWW上常用的图像文件格式是JPEG和GIF，它们都是压缩的图像格式，文件的信息量小，适合于网络传输，因此被广泛地应用在Web站点的设计中。GIF（GraphicalInterchangeFormat，图形交换格式）采用无损压缩方式，其主要特征是支持动画、
透明度、图形渐进，但GIF图像包含的颜色不能超过256种。JPEG（JointPhotographExpertGroup，联合图像专家组）格式是专为有几百万种颜色的照片和图形设计的，它采用有损压缩方式，以牺牲图
片质量换取大的压缩比例。JPEG格式支持真彩色（24位色），并且在压缩大的图像方面已被证明很有效。目录上一页下一页结束2022/12/144计算机文化基础2.插入图片2）插入图片的步骤（1）移动光标至插入图像的位置；（2）
单击“插入”菜单的“图片”命令，在子菜单中选择“来自文件”，弹出“图片”对话框；（3）利用“图片”对话框选取需要插入的图片文件，单击“插入”按钮，即可将图片插入网页中。3）设置图片属性在“图片属性”对话框的“外观”
选项卡中，可以设置图片的环绕方式、布局、大小等。插入图片目录上一页下一页结束2022/12/145计算机文化基础4）编辑图片可以使用“视图”菜单的“工具栏”命令中的“图片”子命令，使“图片”工具栏显示在屏幕上。利用图片工具栏，可以对图片的亮度、对比
度进行调整，可以旋转、翻转图片，对图片进行剪裁，设置透明颜色等操作。5）保存图片插入图片后保存网页，如果图片不在网站文件夹中，将出现“保存嵌入式文件”对话框。如果图片在网站文件夹中，就不会出现此对话框。返回插入图片目录上一页下一页结束2022/12/146计算机文化基础3.插入
字幕在制作网页时，可以将网页中的文字做成由左至右，或由右至左移动的动态效果，使网页更加形象生动。具体操作步骤如下：（1）将插入点设置在要插入移动字幕的位置或者选中作为移动字幕的文本，单击“插入”菜单的“Web组件”命令，弹出“插入Web组件”对话框，在对话框的“组件类
型”列表框中选择“动态效果”，在“选择一种效果”列表中选择“字幕”，单击“完成”按钮，“字幕属性”对话框。目录上一页下一页结束2022/12/147计算机文化基础（2）如果已经选择了作为移动字幕的文本，此文本就会出现在
“文本”框中，如果没有选择文本，可在“文本”框中输入作为移动字幕的文本。“字幕属性”对话框如下图所示：插入字幕2目录上一页下一页结束2022/12/148计算机文化基础（3）“方向”区域用于指定文本的移动方向。“速
度”区域用于指定文字的滚动速度，“延迟”框中的数值表示字幕滚动一步的时间间隔是多少毫秒，“数量”框中的数值表示字幕滚动一步的距离是多少像素。“表现方式”区域用于指定文字的表现方式。选中“重复”区域的“连续”复选框，移动字幕将连续滚动；若要设置字幕滚动有限次数，可以取消选中“连续”复
选框并输入字幕重复的次数。（4）单击“确定”按钮，即可插入字幕。返回插入字幕3目录上一页下一页结束2022/12/149计算机文化基础4.插入交互式按钮交互式按钮是一个动态按钮，当用户将鼠标指向交互式按钮时，交互式按钮会改变颜色或形状。默认情况下，交互式按钮是一个带有彩色方框的文字按钮，也可以应用
图片创建交互式按钮。（1）将插入点设置在要插入交互式按钮的位置，单击“插入”菜单的“Web组件”命令，打开“插入Web组件”对话框，在对话框的“组件类型”列表框中选择“动态效果”，在“选择一种效果”列表中选择“交互式按钮”，单击“完
成”按钮，打开对话框。目录上一页下一页结束2022/12/150计算机文化基础（2）设置按钮字体图像（3）单击“确定”按钮，即可插入交互式按钮。返回插入交互式按钮2-3目录上一页下一页结束2022/12/151计算机文化基础5.插入站点计数器（1）单击“插入”
菜单的“Web组件”命令，打开“插入Web组件”对话框，在对话框的“组件类型”列表框中选择“计数器”，在“选择计数器样式”列表中选择一种样式，单击“完成”按钮，打开“计数器属性”对话框；（2）设置计数器属性；（3）单击“确定”按钮，插入站点计数器。返回目录上一页下一页
结束2022/12/152计算机文化基础9.3.4创建超链接Web网页的强大之处就在于其超链接，使用超链接能够将Internet中的信息有机地组织起来，使人们在丰富多彩的WWW世界轻松地漫游。在浏览器中，超链接通常表现为与普通文本或图片不同的特点。将鼠标移到一
个超链接上方时，鼠标指针会变成手形。同时，与这个超链接相对应的URL会在窗口底部的状态栏显示出来。目录上一页下一页结束2022/12/153计算机文化基础创建超链接1.创建文本超链接2.创建图片超链接3.使用书签超链接4.创建电子邮件超链接5.创建下载文件超
链接返回目录上一页下一页结束2022/12/154计算机文化基础1.创建文本超链接文本超链接是指在文本上定义的超链接，单击文本超链接，会自动跳转到指向的链接目标。创建文本超链接的具体操作步骤如下：（1
）选定要定义超链接的文本，从“插入”菜单中选择“超链接”命令，或单击“常用”工具栏上的“超链接”按钮，打开“插入超链接”对话框，如下图所示；目录上一页下一页结束2022/12/155计算机文化基础（2）在“插入超链接”对话框中选择要链接的目标网页，单击“确定”按钮，插入超链接，可以看到
所选定的文本变为蓝色，并且带有下划线，说明选定的文本已经被设置为超链接文本。保存网页，在浏览器中预览效果，当鼠标移至链接文字时，鼠标指针变成手形，此时单击鼠标就跳转到目标网页。创建文本超链接目录上一页下一页结束2022/12/156计算机文化基础图片超链接是指在图片上创建的超链接，图片超
链接比文本超链接显得更加生动活泼，单击图片超链接，会自动跳转到指向的链接目标。可以将整个图片设置为超链接，也可以为图片分配一个或多个热点。热点是图片上的超链接区域，包含热点的图片称为图像映射，用户单击热点区域
可以转到相应的链接目标。2.创建图片超链接目录上一页下一页结束2022/12/157计算机文化基础（1）选定要定义超链接的图片，从“插入”菜单中选择“超链接”命令，或单击“常用”工具栏上的“超链接”按钮
，打开“插入超链接”对话框；（2）在对话框中选择要链接的目标网页，单击“确定”按钮，即可插入超链接。保存网页，在浏览器中预览效果，当鼠标移至链接图片时，鼠标指针变成手形，此时单击鼠标就跳转到目标网页。1）创建图片超
链接目录上一页下一页结束2022/12/158计算机文化基础热点可以是图片上具有某种形状的一块区域或文本，当用户单击该区域或文本时，超链接目标会显示在Web浏览器中。在FrontPage2003中，热点的形状可
以是长方形、圆形或多边形。例如我们通过山东省地图浏览山东省各城市的民俗风情，当鼠标移至地图上的各个城市时，鼠标指针变为手形，单击后打开描述该城市民俗风情的页面。2）为图片添加热点目录上一页下一页结束20
22/12/159计算机文化基础为图片添加热点，具体操作步骤如下：（1）选择需要添加热点的图片。（2）在“图片”工具栏中，单击长方形、圆形或多边形热点按钮匹配需要的形状。（3）在图片上，采用鼠标拖动操作画出所选形状。画多边形时，可单击多边形的第一个角，然后依次单击多边形其他角的位置，最后双击完成多
边形。（4）释放鼠标，弹出“插入超链接”对话框，按照插入超链接中所讲方法创建超链接即可。目录上一页下一页结束2022/12/160计算机文化基础为图片添加热点重复步骤（2）、（3）、（4），在图片上依次创建超链接到其他网页。当鼠标移动到热点区域时，光标变为手形，如下图所示。单击鼠
标，超链接的目标网页就会显示在Web浏览器窗口中。返回目录上一页下一页结束2022/12/161计算机文化基础3.使用书签超链接对于网页的超链接，往往使用户跳转到目标网页的顶端，应用书签能够更严格地控制用户到达
网页内的某个具体位置。书签是网页中被标记的位置或被标记的文本。单击书签超链接，将直接跳转到该书签所在的位置。1）插入书签（1）选中作为书签的文本，或将光标定位在要插入书签的位置。（2）选择“插入”菜单的“书签”命令，弹出“书签”对话框，如右图所示
，所选文本自动出现在“书签名称”框中。（3）单击“确定”按钮，插入书签，可以看到所选文本下方出现虚线。目录上一页下一页结束2022/12/162计算机文化基础2）创建书签超链接（1）选定要定义超链接的文本或图片；（2）从“插入”菜单中选择“超链接”命令，弹出“插入超链接”对
话框，如下图所示，在对话框的“链接到”栏单击“本文档中的位置”，选择要链接的书签；（3）单击“确定”按钮，插入书签超链接。保存网页，在浏览器中预览效果，单击页面中的书签超链接，页面会跳转到书签的位置。目录上
一页下一页结束2022/12/163计算机文化基础4.创建电子邮件超链接电子邮件超链接为用户发送电子邮件提供了极大的方便，单击电子邮件超链接后，允许用户书写电子邮件内容，并发往指定的地址。具体操作步骤如下：（1）选择作
为电子邮件超链接的文本或图片；（2）从“插入”菜单中选择“超链接”命令，弹出“插入超链接”对话框；（3）在对话框的“链接到”栏单击“电子邮件地址”，在“电子邮件地址”框中输入所需电子邮件地址，还可以在“主题”框中键入电子邮件的主题；（4）单击“确定”按钮，完成电子邮件超链接的创建
。返回目录上一页下一页结束2022/12/164计算机文化基础5.创建下载文件超链接如果要在网站中提供资料下载功能，就需要创建下载链接，网站中每个用于下载的文件要对应一个下载链接。具体操作步骤如下：（1）选择作为文
件超链接的文本或图片；（2）从“插入”菜单中选择“超链接”命令，弹出“插入超链接”对话框，在对话框中选择要下载的文件；（3）单击“确定”按钮，完成文件超链接的创建。保存网页，在浏览器中预览效果，单击创建的文件超链接时，弹出“文件下载”对话框，如下图所示，用户可以根据需要打开或保存文件。返回
目录上一页下一页结束2022/12/165计算机文化基础9.4网页布局网页的布局设计，是将文字、图片等网页元素，根据特定的内容和主题，在网页所限定的范围中进行视觉的关联与配置，从而将设计意图以视觉形式表现出来。网页的布局一般使用表格或框架来实现。目录上一页
下一页结束2022/12/166计算机文化基础9.4网页布局9.4.1创建和使用表格9.4.2创建框架9.4.3创建框架超链接返回目录上一页下一页结束2022/12/167计算机文化基础9.4.1创建和使用表格表格由单元格构成的行和列组成，单元格中可以
插入文本、图片以及其他对象。利用表格可以有条理地排列数据或组织网页布局。表格的行、列和单元格都可以进行复制、粘贴，在表格中还可以插入表格，一层层的表格嵌套使设计更加方便。FrontPage2003提供了与Word字处理软件类似的表格处理功能，在网页中可以轻松地创建
和编辑表格。目录上一页下一页结束2022/12/168计算机文化基础1.创建表格创建表格有以下三种常用方法：（1）使用“表格”菜单的“插入”子菜单中的“表格”命令，可以对插入的表格进行精确的设置，包括行和列的数目、对齐方式、单元格间距、单元格衬
距、边框粗细和背景等。（2）使用“常用”工具栏的“插入表格”按钮，快速插入表格。（3）使用“表格”菜单的“绘制表格”命令，手动绘制表格。目录上一页下一页结束2022/12/169计算机文化基础2.设置表格属性插入表格后，打开如下图所示的“表格属性”对话框，可以设置
表格属性。（1）设置表格行数和列数。（2）设置表格布局，包括设置表格的对齐方式、浮动、宽度等。（3）在“粗细”数值框中输入数值，即可设置表格边框的粗细。（4）在背景区域，可以通过“颜色”框设置单一色彩的表格背景，也可选中
“使用背景图片”复选框，用“浏览”按钮设置图片作为表格的背景。目录上一页下一页结束2022/12/170计算机文化基础3.设置单元格属性将光标放置在需要设置属性的单元格中，使用“表格”菜单的“表格属性”子菜单中的“单
元格”命令，打开如下图所示的“单元格属性”对话框，设置单元格属性。在“背景”区域中可以设置单元格的背景颜色，或使用图片作为背景。在“布局”区域可以设置水平、垂直对齐方式，指定宽度、高度、标题单元格，设置行跨距、列跨距等。在“边框”区域中可以设置单元格边框的颜色、亮边框、暗边框。目录上
一页下一页结束2022/12/171计算机文化基础创建表格后，可以对表格单元格、行和列的布局和结构进行调整，以满足不同的需要。如调整行、列或单元格；插入行、列或单元格；删除行、列或单元格；合并、拆分单元格；平均分布行高、列宽；设置单元格属性等。返回4.调整表格目录
上一页下一页结束2022/12/172计算机文化基础9.4.2创建框架框架的使用是进行网页布局设计的一种重要手段。框架将浏览器窗口划分为几个区域，每个框架中都可以显示一个独立的网页。浏览器窗口中显示的网
页实际是这些框架的集合，因此被称为框架网页。框架网页并不包含显示的内容，只是记录了该框架网页包含几个框架、其拆分方式以及每个框架中显示哪个网页（与其他网页的超链接）等。目录上一页下一页结束2022/12/173计算机文化基础在FrontPage2003中，可以使用框架网页布局模板轻松
创建框架网页。具体操作步骤如下：（1）单击“文件”菜单的“新建”命令，在“新建”任务窗格中选择“新建网页”中的“其他网页模板”。（2）在弹出的“网页模板”对话框中，切换到“框架网页”选项卡，选择所需的模板，如“目录”模板，可在“说明”及“预览”区域查看该模板的说明及预览图。1.创建
框架网页目录上一页下一页结束2022/12/174计算机文化基础（3）单击“确定”按钮，完成框架网页的创建，如下图所示；（4）每个框架中，单击“设置初始网页”按钮可以建立与已经存在网页的超链接，从而在此框架中显示该网页；单击“新建网页”按钮可以建立显示在该框
架中的新网页。创建框架网页在该图窗口底部新增了“无框架”视图模式，可以为不支持框架的浏览器创建替代网页。目录上一页下一页结束2022/12/175计算机文化基础保存框架网页需要保存框架和各个框架中的网页。例如，使用“目录”模板创建的框架网页需要保存
作为容器的框架网页和分别显示在两个框架中的两个网页。具体操作步骤如下：（1）使用“文件”菜单的“保存”命令，或单击“常用”工具栏的“保存”按钮，弹出“另存为”对话框。（2）在“另存为”对话框右边的框架网页预览图中，深蓝色的区域或边框指明了框架中正在保存的网页。进行相应设置后，单击“保存”按钮
，该网页保存完毕。（3）重复步骤（2），直至所有的框架网页都保存完毕，如使用“目录”模板创建的框架网页需要保存三次。如果某个框架网页通过单击“设置初始网页”按钮建立与已经存在网页的超链接，则不会弹出“另存为”对话框保存该网页。2.保存框架网页目录上一页下一页结束2022/
12/176计算机文化基础当使用模板创建的框架结构不能满足需要时，可以通过拆分框架制作出更为复杂的框架网页。具体操作步骤如下：（1）选择要拆分的框架，在“框架”菜单中选择“拆分框架”命令，打开“拆分框架”对话框；（4）根据需要选择“拆分为
列”或“拆分成行”选项，单击“确定”按钮完成拆分。也可按住Ctrl键拖动框架的边框实现拆分框架。3.拆分框架目录上一页下一页结束2022/12/177计算机文化基础可以从框架结构中删除指定的框架。此时系统只是把框架从框架网页中删去，而此框架中的网页文
件仍然存在。删除了一个框架后，其余框架会加宽以填充删除框架留下的空间。若框架网页只有一个框架，则不能删除该框架。删除框架的具体操作方法是：选择要删除的框架，在“框架”菜单中选择“删除框架”命令。4.删除框架目录上一页下一页结束20
22/12/178计算机文化基础在框架网页中可以设置框架的大小、框架的边距和在框架中是否显示滚动条等属性。具体操作方法是：选择框架，从“框架”菜单中选择“框架属性”命令，弹出“框架属性”对话框，如右图所示。在“名称”框中输
入新的框架名称，即可对该框架进行重命名。在“框架大小”区域中设置宽度和高度，可以改变框架的大小，也可用鼠标拖动框架的边框直接调整框架的宽度和高度。返回5.设置框架属性目录上一页下一页结束2022/12/179计算机文化基础9.4.3创建框架超链接框架超链接的使用使网页之间的组织更加灵活、有效。
1.创建框架超链接若要设置框架超链接，执行下列操作：（1）选择要创建超链接的文字或图片，从“插入”菜单中选择“超链接”命令，弹出“插入超链接”对话框；（2）在“插入超链接”对话框中选择要链接的目标网页，
单击“目标框架”按钮，出现“目标框架”对话框；（3）在“当前框架网页”区域中单击要用作目标的框架，单击“确定”按钮，返回到“插入超链接”对话框，在对话框底部标签“目标框架”后显示设置的目标框架名称；（4）单击“确定”按钮，完成框架超链接的创建。目录上一页下一
页结束2022/12/180计算机文化基础2.使用特殊的目标框架在指定目标框架时，除了当前框架外，还提供了一些特殊的框架来创建不同效果的目标框架。这些特殊框架位于“目标框架”对话框的“公用的目标区”区域中，有以下几种：
相同框架：将链接的网页显示在包含该超链接的同一个框架内。整页：将框架展开为整个窗口，显示链接网页。新建窗口：打开另外一个新窗口，显示链接网页。父框架：在当前框架的上层框架内显示链接网页。返回目录上一页下一页结束2022/12/181计算机文化基础9.5创建表单
页面表单是Web服务器与客户交互的手段。表单的作用就是收集用户的输入信息，从而实现网站与用户的交互。例如，用户可以用表单收集用户的个人资料，也可以用表单设计一个订货单，让用户指定要购买的商品名称、型号、数量等。目录上一页下一页结束2022/12/182计算机文化基础9.5创建表单页
面9.5.1插入表单域9.5.2提交表单返回目录上一页下一页结束2022/12/183计算机文化基础9.5.1插入表单域表单中至少要有一个供用户输入信息的域，一个用来把信息发送给服务器的“提交”按钮，以及一个用来清除域中现有内容的“重置”按钮。当
用户在表单中输入信息，单击“提交”按钮后，这些信息将被发送到服务器，服务器端程序将对这些信息进行处理。使用“插入”菜单的“表单”子菜单的“表单”命令，将插入一个非常简单的表单。该表单只有“提交”和“重置”两个按钮，但这是所有复杂表单的基础
，可以在其中插入更多的表单域。在FrontPage2003中，可以插入文本框、文本区、复选框、选项按钮、分组框、下拉框、按钮、高级按钮等表单域。目录上一页下一页结束2022/12/184计算机文化基础文本框用于让用户输入一行文字。
将光标放在要插入文本框的位置，使用“插入”菜单的“表单”命令，再选择“文本框”子命令，即可插入一个文本框，如下图所示。打开“文本框属性”对话框，可以设置文本框的属性。“文本框属性”对话框中，“名称”用来设置该文本框的名称，“初始值”用于设置文本框内一开始显示的内容，“宽
度”用来设置文本框所能输入字符的个数，“密码域”用来设置是否让文本框内输入的字符可见。插入文本框时，若插入点在一个已有的表单内，就把一个新的文本框插入到这个表单中。若插入点在表单之外，则创建的文本框包含“提交”和“重置”按钮。1.插入文本框目录上一页下一页结束2022/12/185
计算机文化基础文本区和文本框类似，都用于输入文本，不同之处在于文本区中可以接受多行文本。当文本区中输入内容较多时，可以拖动上下滚动条。将光标放在要插入文本区的位置，使用“插入”菜单的“表单”命令，再选择“文本区”子命令，即可插入一个文本区，如下图所示。文本区属性与文本框属性基本相
同，还可以在“行数”框中设置该文本区包含的文本行数。2.插入文本区目录上一页下一页结束2022/12/186计算机文化基础复选框是提供给用户的一个选项，一般彼此独立的多个复选框组成一组，用户可以在其中任意选择，也可以同时选中所有项，或一个都不选。将光标放在要插入复选框的
位置，使用“插入”菜单的“表单”命令，再选择“复选框”子命令，插入一个复选框，最后在复选框旁键入文字进行说明。如果需要插入多个复选框，重复以上操作即可。“复选框属性”对话框中，“名称”用于设置复选框的名称，“值”用于返回复选框是否已选中，“初始状态”选项按钮
组用于设置初始状态下该复选框是否被选中，默认为“未选中”，“Tab键次序”表示当按下Tab键切换输入焦点时，该复选框所在的次序。3.插入复选框目录上一页下一页结束2022/12/187计算机文化基础选项按钮与复选框类似，
不同的是一组选项按钮只能选中其中的一个，其外形是圆的。将光标放在要插入选项按钮的位置，使用“插入”菜单的“表单”命令，再选择“选项按钮”子命令，插入一个选项按钮，最后在选项按钮旁键入文字进行说明。如果需要插入多个选项按钮，重复以上操作即可。如下图所示，插入四个选项按钮供用户评
价自己的网页。“选项按钮属性”对话框中，“组名称”用来设置此选项按钮所属组的名称，如果把多个选项按钮编成一组，必须使它们的组名称相同。4.插入选项按钮目录上一页下一页结束2022/12/188计算机文化基础5.插入分组框如果要将一组相关的控件或文本与网页或当前表单中的其他信息分开，可以使
用分组框。将光标放在要插入分组框的位置，使用“插入”菜单的“表单”命令，再选择“分组框”子命令，即可插入分组框。“分组框属性”对话框中，“标签”用来设置分组框的名称。“对齐”用来设置分组框标签的对齐方式。6.插入下拉框下拉框用于从一个列表中选择一项或几项。从功能的角度讲，可以用
一组复选框或一组单选按钮来实现，但下拉框占用的网页空间相对较小。将光标放在要插入下拉框的位置，使用“插入”菜单的“表单”命令，再选择“下拉框”子命令，即可插入下拉框。“下拉框属性”对话框中，单击“添加”按钮，将打开“
添加选项”对话框，可以设置选项名称，指定选项的初始状态是选中还是未选中。目录上一页下一页结束2022/12/189计算机文化基础7．插入按钮和高级按钮一个表单中至少要有一个“提交”按钮和一个“重置”按钮。“提交”按钮的作用是把表单中的数据提交给Web服务器的表单处理程
序，“重置”按钮的作用是把表单中的数据清空，以便重新填写。将光标放在要插入按钮的位置，使用“插入”菜单的“表单”命令，再选择“按钮”子命令，即可插入按钮。在“按钮属性”对话框中可以设置按钮的名称、值/标签、按钮类型等属性。按钮可以设置为“提交”、“重置”或普通按钮，对于“提交”和“重置”按钮
来说，它们的动作是默认的。高级按钮的插入与属性设置与普通按钮基本相同，但是高级按钮具备更加精确的控制按钮属性的能力。返回目录上一页下一页结束2022/12/190计算机文化基础9.5.2提交表单用户结束表单操作后，单击“提交”按钮，当“提交”
按钮设置了表单结果送至何处后可以正常处理。表单处理程序对表单的处理可以是将表单结果保存为文件，或将表单结果发送至一个电子邮件地址。1.将表单结果保存为文件在表单上单击鼠标右键，在弹出的右键菜单中选择“表单属性”命令，打开“表单属性”对话框，如下图所示。目录
上一页下一页结束2022/12/191计算机文化基础2.将表单结果发送至电子邮件也可以使用电子邮件发送表单结果，当用户提交表单时，就会向指定的电子邮件地址发送一个包含表单结果的邮件。打开“表单属性”对话框，在“电子邮件地址”框中，输入要向其发送表单结果的电子邮件地址。如果只
想用电子邮件发送表单结果，而不想将其保存到文件中，可以清除文本框“文件名称”。单击“选项”按钮，在“电子邮件结果”选项卡中可以设置接收结果的电子邮件地址、电子邮件格式、邮件标题等选项。要使用FrontPage默认的表单处理程序，Web服务器必须安装Fro
ntPage服务器扩展（FrontPageServerExtension），否则表单功能将不会产生任何效用。要将表单结果发送至电子邮件，还需将服务器配置为可发送电子邮件的服务器。返回目录上一页下一页结束2022/12/192计算机文化基础9.6网页的发布9.6.1网站和网页的设计原则9.6.2
网站的发布和维护返回目录上一页下一页结束2022/12/193计算机文化基础9.6.1网站和网页的设计原则网站和网页的设计既是一项复杂的技术也是一门艺术，设计良好的网站不但可以提供丰富的信息，而且还能给用户带来愉悦的浏览体验。以下是网站和网页设计的一些基本原则。
1）目标明确，重点突出首先要明确信息发布者的性质与用途，并了解主要浏览对象及其要进行的操作，做到有的放矢。然后，对发布的信息要分清主次，面面俱到可能使浏览者难以找到有用的信息，不能达到预期目的。2）主题鲜明，层次清
晰要做到主题鲜明，首先要设计好网站的主页。主页的设计要简洁，内容不宜过多，应该在主页上建立分类栏目。网页需要有层次清晰的结构，尤其是内容较多的网页，可以根据内容进行分类，分成多个栏目，便于阅读。目录上一页下一页结束2022/12/194计算机文化基础网站和网页的设计原则3
）合理设置栏目制作网页前，要先规划好，确定合理的栏目和板块。栏目的安排要紧扣主题，既要考虑网页内容的分类，又要方便浏览，并能对浏览者起到较好的导航作用。4）正确定位整体风格网站的整体风格是指站点的整体形象给浏览者的综合感受。整体风格是非常抽象的概念，包括网站的标
志、色彩、字体、标语、版面布局、内容价值等诸多因素，需要结合整个站点进行定位。对于栏目内容跨度较大的网站，可以考虑针对不同栏目采用不同的风格。目录上一页下一页结束2022/12/195计算机文化基础5
）页面布局合理网页设计要针对所要表达的信息进行合理的布局，好的页面布局能使浏览者首先对网页内容的结构有一个清晰的认识。可以使用表格辅助页面元素的布局，也可以使用特定的布局框架。页面布局要注意保证重点内容放置在屏幕的重点
位置。6）色彩搭配，和谐统一色彩是影响整体风格的关键因素。不同的色彩搭配产生不同的效果，并可能影响到浏览者的情绪。一般来说，一个网站的标准色彩以不超过三、四种为宜，以便使页面色彩丰富而又协调统一。7）多媒体功能使用
得当除了文字信息外，网站中图片、声音、动画以及视频等多媒体信息的使用也是网页上重要的内容。它们的使用可以丰富画面，使页面更加形象生动。但这些文件都不应该太大，减少网页的下载时间，提高用户浏览信息的速度。返回网站和网
页的设计原则目录上一页下一页结束2022/12/196计算机文化基础9.6.2网站的发布和维护所谓发布网站，就是把网站中的内容上传到Web服务器上。为了便于用户发布网站，FrontPage2003提供了相当方便的发布工具。常用的通过FTP发布网站的操作步骤如下：（1）打开要发布
的网站，从“文件”菜单中选择“发布网站”命令，打开“远程网站属性”对话框，如下图所示。如果已经选择了发布目标，则该对话框不会出现。目录上一页下一页结束2022/12/197计算机文化基础站点的发布和维护（2）在“远程Web服务器类型”中选择FTP，然后在下方的“
远程网站位置”框中输入远程网站的位置。切换到“发布”选项卡，可以进行发布网站的相应设置。（3）单击“确定”按钮，FrontPage会尝试连接指定的FTP，如果需要相应的用户名和密码，则会弹出如图9-28所示的“要求提供用户名和
密码”对话框。（4）输入用户名和密码，单击“确定”按钮，FrontPage继续工作。（5）单击窗口右下角的“发布网站”按钮，开始发布网站.（6）文件传送完毕，FrontPage显示状态“成功”，表示网
站已经成功发布。通过HTTP方式上传网页与通过FTP方式非常类似。需要注意的是，通过HTTP方式上传时需要对方的服务器支持FrontPage服务器扩展才行。返回目录上一页下一页结束2022/12/198计算机文化基础谢谢使用！
辽公网安备 21102102000191号
营业执照
