九章网页制作

《九章网页制作》由会员分享，可在线阅读，更多相关《九章网页制作（81页珍藏版）》请在装配图网上搜索。

1、第九章第九章 网页制作网页制作 目 录上一页下一页退 出2022-9-23第九章 网页制作2第九章 网页制作9.1 HTML9.1 HTML简介简介 9.2 FrontPage9.2 FrontPage概述概述 9.39.3网页制作网页制作 9.49.4网页布局网页布局 9.59.5创建表单页面创建表单页面 9.69.6网页的发布网页的发布 目 录上一页下一页退 出2022-9-23第九章 网页制作39.1 HTML简介 HTML即HyperText Markup Language 的缩写。它使用一些约定的标记（Tag）对文本进行标注，定义网页的数据格式，描述Web页中的信息，控制文本的显示。

2、我们把用HTML语言编写的文件称为HTML文件。它通常被存储在Web服务器上，客户端通过浏览器向Web服务器发出请求，服务器响应请求并将HTML文件发送给浏览器，然后由浏览器对文件中的标记作出相应的解释，以页面的形式呈现在用户屏幕上。因此，我们又把HTML文档在Web浏览器中的这种表现形式称为Web页面(Web Page)。HTML语言是一种标记语言，简单易学。用HTML语言编写的网页实际上是一种文本文件，它以.htm或.html为扩展名，我们可以使用任何文本处理软件（例如：记事本）编写。目 录上一页下一页退 出2022-9-23第九章 网页制作49.1.1 HTML语言概述9.1.2 HTM

3、L语言的基本语法 9.1 HTML简介目 录上一页下一页退 出2022-9-23第九章 网页制作59.1.1 9.1.1 HTMLHTML语言概述语言概述 HTML语言是由世界性的标准化组织W3C(Wortd Wide Web Consortium)制定的。目前，其最新的标准版本是HTML 4.0。1.1.HTMLHTML文件的基本构成文件的基本构成Internet中的每一个HTML文件都包括两部分：（1）文本内容：含有需要展现的具体信息。（2）HTML标记：负责控制文本显示的外观和版式。多数HTML标记的书写格式如下：标记名文本内容标记名标记名文本内容标记名 某些HTML标记还具有一些的属性

4、（Attribute）。这些属性指定文本的一些特性，如背景颜色、字体大小、对齐方式等。标记属性的使用格式如下：标记名标记名 属性属性1=值值1 属性属性2=值值2 文本内容文本内容 标记名标记名目 录上一页下一页退 出2022-9-23第九章 网页制作69.1.1 9.1.1 HTMLHTML语言概述语言概述 标记名通常写在“”内。一般的HTML标记都具有起始和结束标记，并且成对出现，两者控制中间的文本，结束标记前要加“”。但并不是所有的HTML标记都具有起始和结束标记，有些则没有结束标记。HTML标记不区分大小写。如：HTML、html或HtMl，其结果都是一样的。标记名称和属性之间用空格分

5、隔。如果标记有多种属性，属性之间也要用空格分开。目 录上一页下一页退 出2022-9-23第九章 网页制作79.1.1 9.1.1 HTMLHTML语言概述语言概述2.2.HTMLHTML网页的结构网页的结构 HTML文件的层次结构：一般HTML文件都是以开头，又以结束。其文件结构由以下两部分组成：（1）头部（Head）HTML文件的头部由和标记定义。通常情况下，文件的标题、搜索引擎所用的关键字以及语言字符集信息等都放在头部信息中。（2）正文主体（Body）由和标记定义。标记具有一些常用的属性，格式为：其中，bgcolor为背景颜色；text为文本颜色。n为六位十六进制数。如果网页使用背景图像

6、，格式为：目 录上一页下一页退 出2022-9-23第九章 网页制作89.1.2 9.1.2 HTMLHTML语言的基本语法语言的基本语法1.1.文本布局文本布局(1)段落标记标记指定文档中一个独立的段落。使用格式如下：标记定义的两个段落之间留有一个空行。(2)换行标记 标记可以强制文本换行。该标记只有开始标记。(3)水平线标记水平线标记用于在网页中插入一条水平线。使用格式如下：(4)居中标记标记中包含的内容显示在页面中央。目 录上一页下一页退 出2022-9-23第九章 网页制作99.1.2 9.1.2 HTMLHTML语言的基本语法语言的基本语法例例9-2 9-2 在网页中设置段落和页面格

7、式。文本布局 在这里我们首先向您介绍有关HTML语言的基本知识和基本语法。然后，讲授如何使用HTML语言编写您的Web页面。段落左对齐段落居中段落右对齐 目 录上一页下一页退 出2022-9-23第九章 网页制作109.1.2 9.1.2 HTMLHTML语言的基本语法语言的基本语法2.文字格式文字格式HTML语言中用于文字格式化的标记有：（1）标题标记标记定义文字标题。标题文字将以指定大小，黑体居中显示。格式：标题文字标题文字 其中，n为1到6的数字，表示字体大小。（2）字体标记字体标记用来对文字格式进行设置，主要具有以下属性：1)size属性用来控制文字的大小，其格式为：，n=1,2,3,

8、4,5,6,7，默认值为3。2)color属性用来控制文字的颜色，其格式为：，n是一个十六进制的六位数。3)face属性用来指明文字使用的字体，其格式为：目 录上一页下一页退 出2022-9-23第九章 网页制作119.1.2 9.1.2 HTMLHTML语言的基本语法语言的基本语法（3）字形标记 设置文字的粗体、斜体、上标、下标、下划线等。标记格式 字形结果 粗体 斜体 下划线 目 录上一页下一页退 出2022-9-23第九章 网页制作129.1.2 9.1.2 HTMLHTML语言的基本语法语言的基本语法3.插入图片插入图片标记将图片插入网页中。该标记具有以下属性：(1)src属性：指明图

9、片文件所在的位置。格式：其中URL是指图片文件存放的位置。(2)alt属性：图片的文字说明，当鼠标指针指向该图片时，该说明性文字弹出。格式：(3)height和width属性：设置图片显示区域的高度和宽度。格式：其中height和width属性中n1、n2的取值为像素数，像素数越大，图片显示越大。(4)border属性：设置图片文件的边框。格式：设置图片的边框。其中n为像素数。(5)align属性：设置图片相对于文本的位置关系。格式：顶边对齐/垂直居中/底边对齐/左对齐/右对齐目 录上一页下一页退 出2022-9-23第九章 网页制作139.1.2 9.1.2 HTMLHTML语言的基本语法语

10、言的基本语法 4.超级链接超级链接在HTML语言中，和标记用于设置网页中的超链接，href属性指明被超链接的文件地址。格式：超连接文本用于表示超链接的文本一般显示为蓝色并且加下划线。在浏览器中，当鼠标指针指向该文本时，箭头变为手形，并在浏览器的状态栏中显示该链接的地址。若使用图片做超链接，可使用如下格式完成：目 录上一页下一页退 出2022-9-23第九章 网页制作149.1.2 9.1.2 HTMLHTML语言的基本语法语言的基本语法5.5.使用表格使用表格 在网页中插入一个表格，需要用到一组HTML标记。定义表格的有关标记如下：定义表格。定义表行。定义表头。定义表列。常用的标记属性：bor

11、der属性用于设置表格边框的宽度；width、height属性设定表格和表项的宽度、高度，取值可以是像素数或百分数；cellspacing 和cellpadding属性分别用于设置单元格之间的间隙和单元格内部空白；align属性设置表格和表项的对齐方式;bgcolor和background属性设置表格背景的颜色和背景图像。目 录上一页下一页退 出2022-9-23第九章 网页制作159.1.2 9.1.2 HTMLHTML语言的基本语法语言的基本语法例9-4 表格示例表格示例时间星期一 星期二 星期三 1-2节数学语文英语3-4节地理历史生物 目 录上一页下一页退 出2022-9-23第九章

12、网页制作169.2 FrontPage9.2 FrontPage概述概述 专门Web创作工具具有“所见即所得”功能,Web创作人员直接对Web页面进行编辑修改，并且能立即看到Web页面的显示效果。网页制作工具种类很多，最常用的是Macromedia公司的Dream weaver和Microsoft公司的FrontPage。Dream weaver能够快速高效地创建极具表现力和动感效果的网页，同时又提供了完善的站点管理机制。它与动画制作软件Flash、图像处理软件Firework结合，提供了一套完整的网站开发的方案。FrontPage是微软公司开发的网页制作和网站管理工具。FrontPage 2

13、000是Microsoft Office 2000组件之一，与Office其它组件高度融合。它界面友好，功能强大，易学易用，是目前使用最为广泛的网页制作、站点管理的工具。目 录上一页下一页退 出2022-9-23第九章 网页制作179.2 FrontPage9.2 FrontPage概述概述9.2.1 FrontPage的启动与退出9.2.2 FrontPage中的视图9.2.3 FrontPage的编辑方式 9.2.4 FrontPage中的视图9.2.5 FrontPage的编辑方式目 录上一页下一页退 出2022-9-23第九章 网页制作189.2.1 9.2.1 FrontPageFr

14、ontPage的主要功能的主要功能 FrontPage 2000集成了两大功能模块网页制作模块和网站管理模块。FrontPage 2000网页制作模块主要有以下一些功能：（1）强大的编辑功能 （2）制作编辑表格功能 （3）图片处理功能 （4）超级链接自动修复功能 （5）制作表单 （6）使用网页框架 （7）提供丰富的组件 （8）插入外部程序。（9）使用数据库 （10）支持动态HTML和CSS样式表目 录上一页下一页退 出2022-9-23第九章 网页制作199.2.1 9.2.1 FrontPageFrontPage的主要功能的主要功能 同时，FrontPage 2000具有强大的网站管理功能，

15、是一款方便而又实用的Web站点的发布与维护工具，主要功能有：（1）建立站点 （2）站点文件管理功能 （3）网页导航管理功能 （4）任务管理功能 （5）网站发布与维护功能目 录上一页下一页退 出2022-9-23第九章 网页制作209.2.2 9.2.2 FrontPageFrontPage的启动与退出的启动与退出1 1FrontPageFrontPage的启动的启动 FrontPage 2000可以按下列步骤启动：（1）单击“开始”按钮，在“开始”菜单中单击“程序”。（2）在“程序”菜单中单击Microsoft FrontPage。（3）打开的Microsoft FrontPage 2000窗

16、口。另外，也可以在桌面上建立FrontPage 2000快捷方式，然后在桌面上双击该图标，即可启动FrontPage 2000。2.FrontPage2.FrontPage的退出的退出 FrontPage 2000的退出有以下三种方式：(1)选取“文件”菜单中的“退出”。(2)单击操作窗口中最右上角的关闭按钮 (3)通过快捷键Alt+F4退出。目 录上一页下一页退 出2022-9-23第九章 网页制作219.2.3 9.2.3 网页与网站网页与网站 用HTML语言编写的文件称之为HTML文件，该文件需要通过Web浏览器解释并显示在屏幕上，所以它又被称为网页(Web Page)。一般而言，Web

17、站点的第一个网页被称为主页或者首页(Home Page)。其实站点就是一组相关网页和其他文件的集合。目 录上一页下一页退 出2022-9-23第九章 网页制作229.2.4 9.2.4 FrontPageFrontPage中的视图中的视图 FrontPage 2000提供了6种视图以方便用户对站点的管理，可以在不同的视图中进行不同的操作。1.“1.“网页网页”视图视图 “网页”视图是FrontPage 2000中最常用的工作界面。网页的创建、编辑、预览等基本操作都是在此视图中进行的。该视图窗口底部有三个标签：“普通”、“HTML”和“预览”。它们控制网页以普通方式、HTML方式进行编辑和对网页

18、效果进行预览。2 2.“.“文件夹文件夹”视图视图 在“文件夹”视图中，站点显示为一组文件和文件夹。在“文件夹”视图中可以创建、移动和删除文件或文件夹。3 3“报表报表”视图视图 使用“报表”视图可以方便了解当前站点的文件内容、更新链接情况、组件错误、所有文件列表及变化情况等信息。目 录上一页下一页退 出2022-9-23第九章 网页制作239.2.4 9.2.4 FrontPageFrontPage中的视图中的视图4 4“导航导航”视图视图 使用“导航”视图可方便地观察站点的链接结构。在该视图中可以很直观地浏览网站内网页之间的链接关系，同时也可以通过拖曳操作改变链接结构。5 5“超链接超链接

19、”视图视图 “超链接”视图将当前站点显示为链接文件的一个网络，它们表示了站点中各个网页之间的相互链接关系。6.“6.“任务任务”视图视图 “任务”视图主要用来创建和管理任务。在视图中列出了当前站点的“任务”，即当前站点中尚未完成的项目。目 录上一页下一页退 出2022-9-23第九章 网页制作249.2.5 9.2.5 FrontPageFrontPage的编辑方式的编辑方式 FrontPage 2000的网页视图下有三种编辑方式：普通、HTML、浏览，该视图窗口底部有三个标签：“普通”、“HTML”和“预览”。它们分别控制网页以普通方式、HTML方式进行编辑或是预览网页的效果，默认是普通方式

20、。如果切换到HTML方式，用户就可以看到FrontPage 2000自动生成的HTML代码。在HTML方式下，可以直接键入HTML代码。浏览方式实际上是用Internet Explorer来显示网页。FrontPage 2000上的工具栏可以选择打开或隐藏。FrontPage 2000最多可显示9个工具栏，分别是常用、格式、DHTML、效果、报表、表格、导航、定位、图片和样式。FrontPage 2000上的工具栏都是可以浮动的，用户可以用鼠标按住工具栏上空白的地方，把工具栏拖动到任何位置或固定在FrontPage 2000窗口的四周。FrontPage 2000的状态栏上有一个窗格，显示正在

21、编辑的网页和下载速度。目 录上一页下一页退 出2022-9-23第九章 网页制作259.3 9.3 网页制作网页制作 Web站点的开发，首先应当根据其用途规划站点，确定站点的结构，并在本地磁盘上创建站点以存储制作完成的网页及其其他相关文件。然后再发布到指定服务器上（远程站点）。9.3.1 创建站点 9.3.2 网页编辑 9.3.3 插入对象 9.3.4 创建超链接 目 录上一页下一页退 出2022-9-23第九章 网页制作269.3.19.3.1创建站点创建站点 FrontPage 2000 提供了多个模板和向导。下面以“只有一个网页的站点”模版为例，介绍新建站点的方法：（1）在FrontPa

22、ge 2000窗口中，单击“文件“菜单上的“新建”命令，再选择“站点”，FrontPage 2000将打开“新建”对话框。（2）在“新建”对话框的“指定新站点的位置”文本框中，输入存储站点的文件夹。（3）双击“只有一个网页的站点”模版，新建站点。目 录上一页下一页退 出2022-9-23第九章 网页制作279.3.29.3.2网页编辑网页编辑1 1新建网页新建网页 要创建一个新的网页，按下面的步骤操作。（1）从“文件”菜单的“新建”子菜单中选择“网页”命令。（2）出现“新建”对话框，选中“常规”选项卡。（3）选择所需的模板。（4）单击“确定”按钮，系统新建一个基于所选模板的网页。（5）此时，新

23、建的网页显示在窗口中，可以进行编辑修改等。（6）单击“文件”菜单，选择“保存文件”命令，弹出对话框，设置完成后单击“保存”按钮。（7）单击“视图”框中的“导航”图标，在“文件夹列表”中拖动新建网页到站点的结构图，将其置入相应位置。目 录上一页下一页退 出2022-9-23第九章 网页制作289.3.29.3.2网页编辑网页编辑 2 2打开网页打开网页 打开网页的方法有多种，最常用的操作步骤如下：（1）在FrontPage 2000窗口中，单击工具栏中“文件夹列表”按钮。（2）在“文件夹列表”窗口中，找到要编辑的网页，然后双击网页图标。3 3设置文字格式设置文字格式 文字格式包括字体、字型、大小

24、、颜色和修饰效果等属性。设置文字的格式操作如下：（1）选中文字。（2）单击“格式”菜单，选择“字体”命令，打开“字体”对话框。（3）可在对话框中设置字体的各种属性。目 录上一页下一页退 出2022-9-23第九章 网页制作299.3.29.3.2网页编辑网页编辑4 4设置段落格式设置段落格式 文字段落的格式编排对于一个网页的外观是至关重要的。FrontPage 2000通过按“Enter”划分段落。值得注意的是，段落之间插入了一个空行。如果只是需要换行，而不是另起一个段落，按“Shift”+“Enter”键即可。实际上，按“Enter”在HTML代码中插入的是标记，而按“Shift”+“Ent

25、er”键则插入的是标记。段落格式主要包括对齐方式、文本缩进和段落间距属性。设置方法如下：（1）将插入点移动到要设置格式的段落中。（2）单击“格式”菜单，选择“段落”命令，弹出对话框。（3）在“段落”对话框中可以设置段落的各种格式。目 录上一页下一页退 出2022-9-23第九章 网页制作309.3.29.3.2网页编辑网页编辑5 5设置项目列表设置项目列表 为列表添加项目符号或编号的具体操作如下：（1）选择要添加项目符号或编号的列表项。（2）单击“格式”工具栏上的“项目符号”按钮，可为列表添加项目符号。（3）单击“格式”工具栏上的“编号”按钮，可为列表添加编号。目 录上一页下一页退 出2022

26、-9-23第九章 网页制作319.3.29.3.2网页编辑网页编辑6 6设置网页属性设置网页属性 网页的属性包括网页的标题、位置、背景、页边距等信息。要设置网页属性，可以使用“文件”菜单上的“属性”命令，或者在网页的任意地方单击鼠标右键，在弹出的菜单中选择“属性”命令，将显示“网页属性”对话框。(1)“常规”属性 “位置”框用于指定网页的完整URL。“标题”框用于给出网页的标题。“背景音乐”框用于指定网页的背景声音。(2)“背景”属性 要设置网页的背景颜色、背景图片以及超链接的颜色，单击“网页属性”对话框的“背景”选项卡。(3)“边距”属性 在“边距”选项卡中可以设置页面的顶端页边距和左端页边

27、距。目 录上一页下一页退 出2022-9-23第九章 网页制作329.3.29.3.2网页编辑网页编辑7 7预览网页预览网页 用户可以转换到预览视图方式预览网页，还可以使用“文件”菜单上的“在浏览器中预览”命令，使用外部浏览器打开当前网页进行预览。此时，将打开“在浏览器中预览”对话框。在“浏览器”框内选择一个web浏览器，在“窗口大小”框内选辑窗口的尺寸，然后单击“预览”按钮。用户还可以单击“添加”按钮，添加其他的预览浏览器。目 录上一页下一页退 出2022-9-23第九章 网页制作339.3.39.3.3插入对象插入对象 在FrontPage 2000中，可以方便的插入符号、图片、水平线等对

28、象。1 1插入特殊符号插入特殊符号操作步骤如下：(1)在准备插入特殊符号的网页文本中设置插入点。(2)打开“插入”菜单，执行其中的“符号”命令，打开“符号”对话框。(3)在符号列表框中选择要插入的符号，此时在“插入”按钮右侧的预览框中会出现选 择的符号，单击“插入”按钮之后，即可将特殊符号插入至网页的插入点处。(4)单击“关闭”按钮。目 录上一页下一页退 出2022-9-23第九章 网页制作349.3.39.3.3插入对象插入对象2 2 插入水平线插入水平线操作步骤如下：(1)在准备插入水平线的位置设置插入点。(2)打开“插入”菜单，选择“水平线”命令，此时在网页的插入点处插入一条水平线。如果

29、插入点位于或接近行尾，则水平线将插入到下一行。将光标移动至水平线上双击，打开“水平线属性”对话框。在“宽度”栏中可设置水平线的宽度。在“高度”栏中输入水平线的高度。在“对齐方式”栏中选择水平线在网页内水平对齐的方式。在“颜色”列表框内设置水平线的颜色，系统默认的颜色是黑色。选择“实线(无阴影)”复选框时，水平线将被设置成实心线，并且在水平线的边缘上没有阴影。目 录上一页下一页退 出2022-9-23第九章 网页制作359.3.39.3.3插入对象插入对象3 插入图片插入图片 （1）图片文件的格式 在WWW上常用的图像文件格式是JPEG和GIF，它们都是压缩的图像格式，文件的信息量小，适合于网络

30、传输。图形交换格式GIF是第一种被WWW支持的图像文件格式，它采用无损压缩方式。其主要特征是支持动画、透明度、图形渐进。但GIF格式只支持256种颜色。联合照片专家组JPEG格式是专为有几百万种颜色的照片和图形设计的，它采用有损压缩方式，以牺牲图片质量换取大的压缩比例。但JPEG格式支持真彩色（24位色），并且在压缩大的图像方面已被证明很有效。目 录上一页下一页退 出2022-9-23第九章 网页制作369.3.39.3.3插入对象插入对象（2）插入图片的步骤 第一步，移动光标至想要插入图像处。第二步，单击菜单项中的“插入”，选择“图片”项，再选取二级菜单中的“来自文件(E)”，弹出对话框。第

31、三步，如果图片在该站点中，则选中图片文件并按“确定”按钮；否则单击“从计算机上选择一个文件”按钮或单击“使用web浏览器来选择网页或文件”按钮，从计算机本地硬盘中或者Internet上选中图片并按“确定”，即可将其插入网页中。（3）设置图片属性 插入的图片可以设置图片属性来调整图片的大小、对齐方式等。在选定的图片上单击鼠标右键，在快捷菜单中选择“图片属性”命令，此时会出现“图片属性”对话框，选中“外观”选项卡。目 录上一页下一页退 出2022-9-23第九章 网页制作379.3.39.3.3插入对象插入对象 在“大小”区域中调整图片的大小参数。为了防止改变图片原来的长宽比例，可以选中“保持纵横

32、比”复选框，这样图片就会根据原来的长宽比例来调整大小。单击“对齐方式”列表框，选择对齐方式。在“边框粗细”框中，输入图片边框的宽度，“0”为无边框（4）编辑图片 选中插入的图片，单击“查看”菜单中的“工具栏”，选择“图片”命令，打开图片编辑工具栏，可以对图片的亮度、对比度进行调整，可以旋转、翻转图片，对图片进行剪裁等操作。目 录上一页下一页退 出2022-9-23第九章 网页制作389.3.39.3.3插入对象插入对象4 4插入字幕插入字幕（1）将插入点设置在要插入移动字幕的位置或者选择作为移动字幕的文本。（2）单击“插入”菜单中的“组件”，选择“字幕”命令。（3）出现“字幕属性”对话框，如果

33、已经选择了作为移动字幕的文本，此文本就会出现在“文本”框中。如果没有选择文本，可在“文本”框中输入作为移动字幕的文本。（4）在“方向”区域中选择文字的移动方向。在“速度”区域中可以指定文字的移动速度，在“延迟”框中输入的数值表示在每个连续运动之间暂停的毫秒数。“数量”框中输入的数值表示文本每次移动的距离。在“表现方式”区域中可以指定文字的运动方式。选中“重复”区域的“连续”复选框，移动字幕连续不停循环，若要设置文本重复有限的次数，则取消选中并输入字幕重复的次数。在“背景颜色”列表框中可以设置移动字幕的背景颜色。（5）单击“确定”按钮。目 录上一页下一页退 出2022-9-23第九章 网页制作3

34、99.3.39.3.3插入对象插入对象 5 5插入悬停按钮插入悬停按钮 悬停按钮是一种动感按钮，当访问者将鼠标指向该按钮时，按钮就会改变颜色或形状。插入悬停按钮的基本步骤如下：（1）将插入点设置在要插入悬停按钮的位置。（2）单击“插入”菜单中的“组件”，选择“悬停按钮”命令，弹出“悬停按钮属性”对话框。目 录上一页下一页退 出2022-9-23第九章 网页制作409.3.39.3.3插入对象插入对象 （3）在“按钮文本”框中输入按钮上的文本。可单击“字体”按钮，设置文本的字体、字型、大小和文本颜色属性。“背景颜色”选项是指按钮的背景颜色，此选项一般不起作用。在“效果”列表框中选择当鼠标移到按钮

35、上时出现的视觉效果，包括“填充颜色”、“颜色对比”、“发光”、“反色发光”、“微微发光”、“凸出”和“凹进”效果。可以在“效果颜色”列表框中指定当实现某种效果时出现的颜色。（4）可以通过单击“自定义”按钮，在弹出的“自定义”对话框中进一步设置按钮的属性。（5）设置完成，按“确定”按钮。此时，设置的图片悬停按钮出现在插入点位置。目 录上一页下一页退 出2022-9-23第九章 网页制作419.3.39.3.3插入对象插入对象6 6站点计数器站点计数器 使用“站点计数器”组件可以记录访问次数或者网页被选中的次数。浏览者每次访问网页时，站点计数器中的数字就会随之增加。FrontPage 2000 提

36、供了美观的“站点计数器”组件。插入“站点计数器”的步骤如下：（1）将插入点设置在要插入站点计数器的位置。（2）单击“插入”菜单中的“组件”，选择“站点计数器”命令，出现“站点 计数器属性”对话框。（3）在“站点计数器属性”对话框中，选择所需的计数器样式。若要使用自定义的计数器样式，需在“计数器样式”区中选择“自定义图片”选项，然后在文本框中输入图片的路径及文件名。注意：如果要自定义样式，需要自行设计一个包含0到9数字的图片，然后将该图片存成GIF图片文件格式。目 录上一页下一页退 出2022-9-23第九章 网页制作429.3.39.3.3插入对象插入对象（4）选中“计数器重置为”复选框，在右

37、侧的文本框中输入计数器的起始数。（5）选中“设定数字位数”复选框，然后在右侧的文本框中输人数字作为计数器的位数。（6）单击“确定”按钮。此时，在网页中插入了一个站点计数器。值得注意的是，此组件需要Web服务器的支持才能正确显示。目 录上一页下一页退 出2022-9-23第九章 网页制作439.3.49.3.4创建超链接创建超链接1 1创建超链接创建超链接 在web网页中超链接一般有两种表现方式，即以文本方式标注的超链接和以图片方式标注的超链接。下面介绍这两种方式超链接的创建过程。（1）链接到已有的页面 创建超链接的步骤如下：第1步 选定要定义超链接的文本或图像。第2步 单击“常用”工具栏上的“

38、超链接”按钮，或者从“插入”菜单中选择“超链接”命令。第3步 出现“创建超链接”对话框，网站中的所有网页出现在文件列表中，选择链接的目标网页。第4步 单击“确定”按钮，超链接创建完成。目 录上一页下一页退 出2022-9-23第九章 网页制作449.3.49.3.4创建超链接创建超链接（2）链接到一个新建页面 在创建超链接时，也可以链接到个新创建的页面。其创建步骤如下：第1步 选定要定义超链接的文本或图像。第2步 单击“常用”工具栏上的“超链接”按钮，或者从“插入”菜单中选择“超链接”命令。第3步 出现“创建超链接”对话框，单击“创建一网页并链接到该网页”按钮。第4步 出现“新建”对话框，在“

39、常规”选项卡中选择一种网页模板。单击“确定”按钮，链接到个新的网页，然后编辑此网页。目 录上一页下一页退 出2022-9-23第九章 网页制作459.3.49.3.4创建超链接创建超链接（3）链接到计算机中的文件 在FrontPage 2000中，可以创建链接到计算机中某文件的超链接。其创建步骤如下：第1步 选定要定义超链接的文本或图像。第2步 单击“常用”工具栏上的“超链接”按钮，或者从“插入”菜单中选择“超链接”命令。第3步 出现“创建超链接”对话框，单击“制作一个指向您计算机上文件的超链接”按钮。第4步 出现“选择文件”对话框，选择要链接的文件。单击“确定”按钮，完成超链接的创建。单击窗

40、口底部的“预览”标签，切换至“预览”模式。单击此链接，就会打开链接到计算机中的文件。目 录上一页下一页退 出2022-9-23第九章 网页制作469.3.49.3.4创建超链接创建超链接（4）创建外部站点的超链接 在FrontPage 2000中，可以创建与WWW上其他站点的超链接。其创建步骤如下：第1步 选定要定义超链接的文本或图像。第2步 单击“常用”工具栏上的“超链接”按钮，或者从“插入”菜单中选择“超链接”命令。第3步 出现“创建超链接”对话框，单击“使用Web浏览器来选择网页或文件”按钮。第4步 系统自动打开Web浏览器，在“地址”栏中输入一个站点的地址，打开某个网页。切换到Fron

41、tPage窗口中，这个地址就会出现在“创建超链接”对话框中的“URL”栏中。单击“确定”按钮，完成超链接的创建。单击窗口底部的“预览”标签，切换至“预览”模式。单击此链接，就会打开链接对象的网页。目 录上一页下一页退 出2022-9-23第九章 网页制作479.3.49.3.4创建超链接创建超链接（5）创建发送电子邮件的超链接可以创建与电子邮件的超链接，以便反馈信息。具体创建步骤如下：第1步 选定要定义超链接的文本或图像。第2步 单击“常用”工具栏上的“超链接”按钮，或者从“插入”菜单中选择“超链接”命令。第3步 出现“创建超链接”对话框，单击“制作发送电子邮件的超链接”按钮。第4步 出现“创

42、建电子邮件超链接”对话框，输入一个电子邮件地址。单击“确定”按钮返回到“创建超链接”对话框，在“URL”栏中显示了你的电子邮件地址。第5步 单击“确定”按钮，完成超链接的创建。目 录上一页下一页退 出2022-9-23第九章 网页制作489.3.49.3.4创建超链接创建超链接2 2使用书签使用书签 应用书签能够更严密地控制访问者到达网页内某个具体位置。当访问者单击基于书签的超链接时，将直接跳转到这个书签所在的位置。（1）插入书签 在创建到书签的链接之前，必须要在网页中插入书签。具体步骤：第1步 将光标定位在要插入书签的位置。第2步 从“插入“菜单中选择“书签”命令。第3步 出现“书签”对话框

43、，在“书签名称”框中键人书签名称。第4步 单击“确定”按钮，出现书签标记。（2）创建到书签的超链接步骤如下：目 录上一页下一页退 出2022-9-23第九章 网页制作499.3.49.3.4创建超链接创建超链接第1步 选定要定义超链接的文本或图像。第2步 单击“常用”工具栏上的“超链接”按钮，或者从“插入”菜单中选择“超链接”命令。第3步 出现“创建超链接”对话框，选定已经插入书签的目标网页，在“可选”区域中单击“书签”下拉按钮，在列表中选择链接的书签名。第4步 单击“确定”按钮，完成超链接的制作。目 录上一页下一页退 出2022-9-23第九章 网页制作509.3.49.3.4创建超链接创建

44、超链接3使用导航栏使用导航栏 为了使浏览者能在站点中的各个网页之间的切换浏览，FrontPage 2000提供了“导航栏”功能。插入导航栏的具体步骤如下：（1）将光标设置在要插入导航栏的位置。（2）从“插入”菜单中选择“导航栏”命令。（3）出现“导航栏属性”对话框，在“要添加到网页的超链接”区域中设定所需的超链接选项。当选择了一个选项时，相应的超链接就以蓝色出现在结构示意图中。（4）在“方向和外观”区域中选择所需的方向和外观选项。（5）单击“确定”按钮，导航栏出现在网页中的插入点位置。当网站中网页的链接结构发生改变时，导航栏将自动进行调整，保持与变化后的链接结构的一致性。目 录上一页下一页退

45、出2022-9-23第九章 网页制作519.4 9.4 网页布局网页布局 网页的布局设计，是将文字、图形图像等网页元素，根据特定的内容和主题，在网页所限定的范围中，进行视觉的关联与配置，从而将设计意图以视觉形式表现出来。网页的布局一般通过表格和框架的使用来实现。9.4.1 创建和使用表格 9.4.2 创建框架 9.4.3 创建框架超链接 目 录上一页下一页退 出2022-9-23第九章 网页制作529.4.19.4.1创建和使用表格创建和使用表格 表格由行和列交叉所形成的单元格组成。在单元格中可以放置任何对象，例如文本、图像、表单、FrontPage组件等。利用表格可以有条理地排列数据或者组织

46、网页布局。表格可以将文本排列成并列的段落，或模拟文本的分栏形式，也可以利用宽度固定的表格在网页上为文本提供边界。FrontPage 2000提供了与WORD字处理软件类似的表格处理功能，在网页中可以轻松的创建和处理表格。目 录上一页下一页退 出2022-9-23第九章 网页制作539.4.19.4.1创建和使用表格创建和使用表格1 1创建表格创建表格创建表格有以下三种方法：使用“常用”工具栏中的“插入表格”按钮，可以按默认方式快速地插入表格。(1)将插入点定位在要插入表格的位置。(2)单击“常用”工具栏上的“插入表格”按钮，然后向右下方拖动鼠标，在表格框中会显示表格的大小。此时在插入点位置就会

47、显示一张空的表格。使用菜单命令可以对插入的表格进行精确的设置，包括行和列的数目、边框尺寸以及单元格宽度等。（1）将插入点定位在要插入表格的位置。（2）从“表格”菜单的“插入”子菜单中选择“表格”命令。目 录上一页下一页退 出2022-9-23第九章 网页制作549.4.19.4.1创建和使用表格创建和使用表格（3）出现“插入表格”对话框。在“大小”区域中的“行”和“列”栏中输入表格的行数和列数。（4）在“布局”区域中可以设置表格的布局方式，包括表格的对齐方式、边框粗细等。（5）单击“确定”按钮，设置的表格出现在插入点位置。可以手动绘制表格，步骤如下：（1）从“表格”菜单中选择“手绘表格”命令，

48、显示“表格”工具栏。在“表格”工具栏中单击“手绘表格”按钮，光标变为铅笔形状。（2）在要创建表格的位置按下鼠标左键的同时拖动光标。在表格大小合适时松开鼠标，个表格出现在网页中。（3）在表格内将铅笔光标沿水平方向拖动增加一个新行。在表格内将铅笔光标沿垂直方向拖动增加一个列行。重复该步骤可创建一个复杂的表格。（4）单击“表格”工具栏中的“清除”按钮，光标变为橡皮形状，单击表格线可清除该表格线。目 录上一页下一页退 出2022-9-23第九章 网页制作559.4.19.4.1创建和使用表格创建和使用表格2 2设置表格属性设置表格属性插入表格后，右单击表格，在快捷菜单中选择“表格属性”命令，即可打开的

49、“表格属性”对话框。对表格属性的设置说明如下：对表格属性的设置说明如下：对齐方式：可以选择左对齐、右对齐、水平居中和两端对齐。该属性决定表格在网页中的相对位置。浮动：可以选择左对齐、右对齐。该属性决定表格与其他网页元素的排列关系，即“文字环绕”效果。指定宽度和高度：表格的大小。可以使用决对大小“像素”或相对大小“百分比”。单元格边距：设置表格线与表格内容的距离。单元格间距：设置两个相邻单元格边框的距离。边框：粗细以像素为单位。可以选择和是的边框颜色背景：可以指定背景颜色或背景图像。目 录上一页下一页退 出2022-9-23第九章 网页制作569.4.19.4.1创建和使用表格创建和使用表格3调

50、整表格调整表格创建了表格之后，可以对各个表格单元格、行和列的布局和结构进行调整。（1）插入行或列在表格中插入行或列的步骤如下：第1步 将插入点定位在单元格内。第2步 从“表格”菜单的“插入”子菜单中选择“行或列”命令。第3步 出现“插入行或列”对话框，根据需要选中“行”或“列”单选框。然后在“行数”或“列数”选项栏中键入插入的行数或列数。第4步 在“位置”区域中选择相对于当前的插入位置。单击“确定”按钮。提示：使用“表格”工具栏上的“插入行”或“插入列”按钮可以快速表格中插入的行或列。目 录上一页下一页退 出2022-9-23第九章 网页制作579.4.19.4.1创建和使用表格创建和使用表格

51、（2）删除行、列或单元格 删除表格中的行或列的操作步骤入下：第1步 选中要删除的行、列或单元格。第2步 单击“表格”菜单中的“删除单元格”命令。或者单击“表格”工具栏中的“删除单元格”按钮。（3）合并单元格 选中一个矩形区域内的多个连续的单元格，单击“表格”菜单中的“合并单元格”命令。或者单击“表格”工具栏中的“合并单元格”按钮。（4）拆分单元格 将插入点定位在要拆分的单元格中，单击“表格”菜单中的“拆分单元格”命令。或者单击“表格”工具栏中的“拆分单元格”按钮。出现“拆分单元格”对话框，如果选择“拆分为行”选项，可以水平地拆分单元格；如果选择“拆分为列”选项，可以垂直地拆分单元格。然后在“行

52、数”或“列数”框中键人或选择拆分的数目。单击“确定”按钮。目 录上一页下一页退 出2022-9-23第九章 网页制作589.4.19.4.1创建和使用表格创建和使用表格（5）设置单元格属性 将插入点定位在单元格中，单击“表格”菜单中的“属性”，选择“单元格”命令，弹出“单元格属性”对话框。可以设置单元格中内容的布局，精确定义单元格的宽度、高度，确定单元格的背景以及边框的颜色等。目 录上一页下一页退 出2022-9-23第九章 网页制作599.4.2创建框架创建框架 框架的使用是进行网页布局设计的一种重要手段。它将浏览器窗口划分为几个区域，称为框架，在每个框架中都可以显示一个独立的网页。浏览器窗

53、口中显示的网页，实际是这些框架的集合，因此被称为框架网页。框架网页并不包含显示内容，只是记录了该框架网页包含几个框架、其拆分方式以及每个框架中显示哪个网页（与其它网页的超链接）等。目 录上一页下一页退 出2022-9-23第九章 网页制作609.4.2创建框架创建框架1创建框架创建框架 FrontPage 2000提供了最流行的框架网页布局模板，可以使用这些模板轻松地创建框架网页。具体步骤如下：（1）在“文件”菜单的“新建”子菜单中选择“网页”命令。（2）出现“新建”对话框，选中“框架网页”选项卡。（3）选择所需的模板，如“目录”模板。在“说明”区域中显示所 选模板的描述，在“预览”区域中可以

54、预览框架网页的布局。（4）单击“确定”按钮，完成框架网页的创建。在窗口的底部出现了两个新的标签，“无框架”视图为不能支持框架 的浏览器创建替代网页。“框架网页HTML”视图显示框架网页的HTML代码。在每个框架中，单击“新建网页”按钮，可以建立显示在该框架中的新网页。单击“设置初始网页”按钮，可以建立与已经存在网页的超链接，从而在此框架中显示出来。目 录上一页下一页退 出2022-9-23第九章 网页制作619.4.2创建框架创建框架2 2 保存框架网页保存框架网页保存框架网页的操作步骤如下：（1）单击“常用”工具栏中的“保存”按钮。（2）出现“另存为”对话框，在右边的框架网页预览图中，其中一

55、个框架高亮显示，表示正在保存的该网页。（3）在“文件名”框中输入网页名称。（4）单击“更改”按钮，设置网页的标题。（5）单击“保存”按钮，该网页保存完毕，框架图中的另一个框架处于高亮状态。（6）重复步骤（3）至步骤（5）的操作。（7）当对话框中的整个框架图处于高亮状态时，表示此时正在保存框架网页本身。（8）输入框架网页的文件名称及标题。（9）单击“保存”按钮。目 录上一页下一页退 出2022-9-23第九章 网页制作629.4.2创建框架创建框架3 3拆分框架拆分框架 当使用模板创建的框架结构不能满足需要时，可以通过拆分框架，制作出更为复杂的框架网页。操作步骤如下：（1）选择要拆分的框架。（2

56、）在“框架”菜单中选择“拆分框架”命令。（3)出现“拆分框架”对话框，根据需要选择“拆分为列”或“拆分成行”选项。（4）单击“确定”按钮完成拆分。4 4删除框架删除框架 可以从框架结构中删除指定的框架。此时，系统只是把框架从框架网页中删去，而此框架中的网页文件仍然存在。操作步骤是：选择要删除的框架，在“框架”菜单中选择“删除框架”命令即可。目 录上一页下一页退 出2022-9-23第九章 网页制作639.4.2创建框架创建框架5 5设置框架属性设置框架属性 通过对框架属性的设置，可以更改框架超链接的网页、调整框架大小等。基本操作如下：选择目标框架，从“框架”菜单中选择“框架属性”命令，出现“框

57、架属性”对话框。下面对“框架属性”作如下说明：名称：为每个框架命名一个名称。初始网页：这里显示该框架超链接的网页。可以通过单击“浏览”按钮选择一个网页，改变在该框架中显示的网页。框架大小：输入框架宽度和行高，确定框架的大小。边距：设置框架内显示的内容与框架之间的距离。显示滚动条：可以选择框架的滚动条显示状态。目 录上一页下一页退 出2022-9-23第九章 网页制作649.4.39.4.3创建框架超链接创建框架超链接框架超链接的使用，使网页之间的组织更加灵活、有效。1 1创建框架超链接创建框架超链接若要设置框架超链接，执行下列操作：（1）选择要定义超链接的文字或图片。（2）单击“常用”工具栏上

58、的“超链接”按钮。（3）出现“创建超链接”对话框，在“URL”框中输入链接的目 标网页。（4）单击“更改目标框架”按钮，出现“目标框架”对话框。（5）在“当前框架网页”区域中单击要用作目标的框架。目 录上一页下一页退 出2022-9-23第九章 网页制作659.4 9.4 网页布局网页布局 （6）单击“确定”按钮，返回到“创建超链接”对话框，在“目标框架”栏中显示出设置的目标框架名称。（7）单击“确定”按钮。2 2使用特殊的目标框架使用特殊的目标框架 在指定目标框架时，除了当前的框架之外，还提供了一些特殊的框架来创建不同效果的目标框架。这些特殊框架位于“目标框架”对话框中的“公用的目标区”区域

59、。相同框架：将链接得网页显示在包含该超链接的同一个框架内。整页：将框架展开为整个窗口后，显示链接网页。新建窗口：打开另为一个新窗口，显示链接网页。父框架：在当前框架的上层框架内显示链接网页。目 录上一页下一页退 出2022-9-23第九章 网页制作669.5 创建表单页面 表单是Web服务器与客户交互的手段。表单的作用就是收集浏览者的输入信息，从而实现网站与浏览者的交互。例如，用户可以用表单收集客户的个人资料，用户也可以用表单设计一个订货单，让客户指定要购买的商品名称、型号、数量等。9.5.1 插入表单域 9.5.2 提交表单 目 录上一页下一页退 出2022-9-23第九章 网页制作679.

60、5.19.5.1插入表单域插入表单域 表单是由表单域组成的，表单域是客户输入信息的区域。在FrontPage 2000中，有6种表单域：单行文本框、滚动文本框、复选框、单选按钮、下拉菜单、普通按钮。1 1单行文本框单行文本框 单行文本输入框用于让客户输入一行文字。要插入一个单行文本输入框，使用“插入”菜单上的“表单”命令，再选择“单行文本框”。要设置单行文本框的属性，可以右单击单行文本框，在弹出的快捷菜单中选择“表单属性”命令，也可以直接双击单行文本框，FrontPage 2000将打开“文本框属性”对话框。首先，要为单行文本框命名。当客户提交表单时，单行文本框的名称和内容被配对发送给Web服

61、务器端的表单处理程序。在“初始值”框内可以键入默认内容。宽度框设置单行文本框的显示宽度。如果该单行文本框用于输入口令，则选择密码域为“是”，在浏览器中，用户输入时，内容显示为“*”号。单击“验证有效姓”按钮，设置限制用户输入的规则。目 录上一页下一页退 出2022-9-23第九章 网页制作689.5.19.5.1插入表单域插入表单域2 2滚动文本框滚动文本框滚动文本框允许客户输入多行文本。要插人滚动文本框，使用“插入”菜单上的“表单”命令，再选择“滚动文本框”与单行文本框一样，设置滚动文本框的属性，可以右单击滚动文本框，在弹出的快捷菜单中选择“表单域属性”命令，或直接双击滚动文本框，Front

62、Page 2000将打开“滚动文本框属性”对话框。3 3复选框复选框复选框是提供给客户的一个选项，一般彼此独立的多个复选框组成一组，客户可以同时选中所有选项，也可以一个都不选。要插入一个复选框，使用“插入”菜单上的“表单”命令，再选择“复选框”。要修设置选框的属性，右单击复选框，在弹出的菜单中选择“表单属性”命令，或直接双击复选框，FrontPage 2000将打开“复选框属性”对话框。目 录上一页下一页退 出2022-9-23第九章 网页制作699.5.19.5.1插入表单域插入表单域 首先应当为复选框命名，当客户提交表单时，复选框的名称和状态配对发送给Web服务器端的表单处理程序。用户可以

63、结出复选框的初始状态是选中还是不选中，使用Tab键按顺序选定。4 4单选按钮单选按钮 单选按钮通常组成一组互斥的选项。客户只能选择其中一项。要插入单选按钮，使用“插入”菜单上的“表单”命令，再选择“单选按钮”。如果表单上有多个单选按钮，FrontPage 2000默认选中第一个。要修改单选按钮的属性，右单击单选按钮，在弹出的菜单中选择“表单属性”命令，或直接双击单选按钮，FrontPage 2000将打开“单选按钮属性”对话框。目 录上一页下一页退 出2022-9-23第九章 网页制作709.5.19.5.1插入表单域插入表单域 要注意的是，如果把多个单选按钮编成一组，必须使它们的组名相同。此

64、外，可以单击“验证有效性”按钮，限定客户按一定的规则做出选择。5下拉菜单（下拉列表框）下拉菜单（下拉列表框）下拉菜单用于从一个列表中选择一个或几个项，从功能的角度讲，可以用一组复选框或一组单选按钮来实现，但下拉菜单占用的空间相对较小。要插入下拉菜单，使用“插入”菜单上的“表单”命令，再选择“下拉菜单”。插入的下拉菜单是空的，用户可以右单击下拉菜单，在弹出的菜单中选择“表单属性”命令，或直接双击下拉菜单，FrontPage 2000将打开“下拉菜单属性”对话框。单击“添加”按钮，将打开“添加选项”对话框。目 录上一页下一页退 出2022-9-23第九章 网页制作719.5.19.5.1插入表单域

65、插入表单域 首先在“选项”框内输入名称，当客户提交表单时，提交的是选项的名称。如果想提交另外的值，应当选中“指定值”复选框，然后键人一个值。此外，用户还可以指定选项的初始状态是选定还是未选定。6按钮按钮 一个表单上至少要有一个“提交”按钮和一个“全部重写”按钮，“提交”按钮的作用是把表单上的数据提交给Web服务器的表单处理程序，“全部重写”按钮的作用是把表单上的数据清空，以便重新填写。要插入按钮，使用“插入”菜单上的“表单”命令，再选择“按钮”。设置按钮的属性，可以右单击按钮，在弹出的菜单中选择“表单属性”命令，或直接双击按钮，打开“按钮属性”对话框。目 录上一页下一页退 出2022-9-23

66、第九章 网页制作729.5.29.5.2提交表单提交表单Web服务器怎样获取客户在表单中填写的信息呢?当客户单击“提交”按钮后，Web服务器用表单处理程序来处理表单上的信息，表单处理程序可以是注册组件，也可以是自定义的ISAPINSAPI应用程序或CGI脚本等。表单处理程序位于web服务器端，用于处理客户提交过来的表单上的内容，或者发送确认信息给客户。要指定表单处理程序，在表单上单击鼠标右键，在弹出的菜单中选择“表单属性”命令，打开“表单属性”对话框。目 录上一页下一页退 出2022-9-23第九章 网页制作739.5.29.5.2提交表单提交表单 如果使用FrontPage 2000默认的表单处理程序，选择“发送到”。默认情况下，客户在表单上填写的信息以文本文件的形式保存到web服务器的_private文件夹，文件名为：表单_results.txt。用户还可以把表单结果发送到某个Email地址。如果不想使用FrontPage 2000默认的表单处理程序，可以选择“发送到其他对象”单选按钮，然后在下拉列表中选择“自定义ISAPI、NSAPI、CGI或ASP脚本”或者FrontPage