九章网页制作.ppt

《九章网页制作.ppt》由会员分享，可在线阅读，更多相关《九章网页制作.ppt（81页珍藏版）》请在三一办公上搜索。

1、第九章 网页制作,2023/6/25,第九章 网页制作,2,第九章 网页制作,9.1 HTML简介 9.2 FrontPage概述 9.3网页制作 9.4网页布局 9.5创建表单页面 9.6网页的发布,2023/6/25,第九章 网页制作,3,9.1 HTML简介,HTML即HyperText Markup Language 的缩写。它使用一些约定的标记（Tag）对文本进行标注，定义网页的数据格式，描述Web页中的信息，控制文本的显示。我们把用HTML语言编写的文件称为HTML文件。它通常被存储在Web服务器上，客户端通过浏览器向Web服务器发出请求，服务器响应请求并将HTML文件发送给浏览器

2、，然后由浏览器对文件中的标记作出相应的解释，以页面的形式呈现在用户屏幕上。因此，我们又把HTML文档在Web浏览器中的这种表现形式称为Web页面(Web Page)。HTML语言是一种标记语言，简单易学。用HTML语言编写的网页实际上是一种文本文件，它以.htm或.html为扩展名，我们可以使用任何文本处理软件（例如：记事本）编写。,2023/6/25,第九章 网页制作,4,9.1.1 HTML语言概述9.1.2 HTML语言的基本语法,9.1 HTML简介,2023/6/25,第九章 网页制作,5,9.1.1 HTML语言概述,HTML语言是由世界性的标准化组织W3C(Wortd Wide

3、Web Consortium)制定的。目前，其最新的标准版本是HTML 4.0。1.HTML文件的基本构成Internet中的每一个HTML文件都包括两部分：（1）文本内容：含有需要展现的具体信息。（2）HTML标记：负责控制文本显示的外观和版式。多数HTML标记的书写格式如下：标记名文本内容标记名 某些HTML标记还具有一些的属性（Attribute）。这些属性指定文本的一些特性，如背景颜色、字体大小、对齐方式等。标记属性的使用格式如下：标记名 属性1=值1 属性2=值2 文本内容 标记名,2023/6/25,第九章 网页制作,6,9.1.1 HTML语言概述,标记名通常写在“”内。一般的H

4、TML标记都具有起始和结束标记，并且成对出现，两者控制中间的文本，结束标记前要加“”。但并不是所有的HTML标记都具有起始和结束标记，有些则没有结束标记。HTML标记不区分大小写。如：HTML、html或HtMl，其结果都是一样的。标记名称和属性之间用空格分隔。如果标记有多种属性，属性之间也要用空格分开。,2023/6/25,第九章 网页制作,7,9.1.1 HTML语言概述,2.HTML网页的结构 HTML文件的层次结构：一般HTML文件都是以开头，又以结束。其文件结构由以下两部分组成：（1）头部（Head）HTML文件的头部由和标记定义。通常情况下，文件的标题、搜索引擎所用的关键字以及语言

5、字符集信息等都放在头部信息中。（2）正文主体（Body）由和标记定义。标记具有一些常用的属性，格式为：其中，bgcolor为背景颜色；text为文本颜色。n为六位十六进制数。如果网页使用背景图像，格式为：,2023/6/25,第九章 网页制作,8,9.1.2 HTML语言的基本语法,1.文本布局(1)段落标记标记指定文档中一个独立的段落。使用格式如下：标记定义的两个段落之间留有一个空行。(2)换行标记 标记可以强制文本换行。该标记只有开始标记。(3)水平线标记水平线标记用于在网页中插入一条水平线。使用格式如下：(4)居中标记标记中包含的内容显示在页面中央。,2023/6/25,第九章 网页制作

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

7、,2,3,4,5,6,7，默认值为3。2)color属性用来控制文字的颜色，其格式为：，n是一个十六进制的六位数。3)face属性用来指明文字使用的字体，其格式为：,2023/6/25,第九章 网页制作,11,9.1.2 HTML语言的基本语法,（3）字形标记 设置文字的粗体、斜体、上标、下标、下划线等。,2023/6/25,第九章 网页制作,12,9.1.2 HTML语言的基本语法,3.插入图片标记将图片插入网页中。该标记具有以下属性：(1)src属性：指明图片文件所在的位置。格式：其中URL是指图片文件存放的位置。(2)alt属性：图片的文字说明，当鼠标指针指向该图片时，该说明性文字弹出。

8、格式：(3)height和width属性：设置图片显示区域的高度和宽度。格式：其中height和width属性中n1、n2的取值为像素数，像素数越大，图片显示越大。(4)border属性：设置图片文件的边框。格式：设置图片的边框。其中n为像素数。(5)align属性：设置图片相对于文本的位置关系。格式：顶边对齐/垂直居中/底边对齐/左对齐/右对齐,2023/6/25,第九章 网页制作,13,9.1.2 HTML语言的基本语法,4.超级链接在HTML语言中，和标记用于设置网页中的超链接，href属性指明被超链接的文件地址。格式：超连接文本用于表示超链接的文本一般显示为蓝色并且加下划线。在浏览器中

9、，当鼠标指针指向该文本时，箭头变为手形，并在浏览器的状态栏中显示该链接的地址。若使用图片做超链接，可使用如下格式完成：,2023/6/25,第九章 网页制作,14,9.1.2 HTML语言的基本语法,5.使用表格 在网页中插入一个表格，需要用到一组HTML标记。定义表格的有关标记如下：定义表格。定义表行。定义表头。定义表列。常用的标记属性：border属性用于设置表格边框的宽度；width、height属性设定表格和表项的宽度、高度，取值可以是像素数或百分数；cellspacing 和cellpadding属性分别用于设置单元格之间的间隙和单元格内部空白；align属性设置表格和表项的对齐方式

10、;bgcolor和background属性设置表格背景的颜色和背景图像。,2023/6/25,第九章 网页制作,15,9.1.2 HTML语言的基本语法,例9-4 表格示例表格示例时间星期一 星期二 星期三 1-2节数学语文英语3-4节地理历史生物,2023/6/25,第九章 网页制作,16,9.2 FrontPage概述,专门Web创作工具具有“所见即所得”功能,Web创作人员直接对Web页面进行编辑修改，并且能立即看到Web页面的显示效果。网页制作工具种类很多，最常用的是Macromedia公司的Dream weaver和Microsoft公司的FrontPage。Dream weaver

11、能够快速高效地创建极具表现力和动感效果的网页，同时又提供了完善的站点管理机制。它与动画制作软件Flash、图像处理软件Firework结合，提供了一套完整的网站开发的方案。FrontPage是微软公司开发的网页制作和网站管理工具。FrontPage 2000是Microsoft Office 2000组件之一，与Office其它组件高度融合。它界面友好，功能强大，易学易用，是目前使用最为广泛的网页制作、站点管理的工具。,2023/6/25,第九章 网页制作,17,9.2 FrontPage概述,9.2.1 FrontPage的启动与退出9.2.2 FrontPage中的视图9.2.3 Fron

12、tPage的编辑方式 9.2.4 FrontPage中的视图9.2.5 FrontPage的编辑方式,2023/6/25,第九章 网页制作,18,9.2.1 FrontPage的主要功能,FrontPage 2000集成了两大功能模块网页制作模块和网站管理模块。FrontPage 2000网页制作模块主要有以下一些功能：（1）强大的编辑功能（2）制作编辑表格功能（3）图片处理功能（4）超级链接自动修复功能（5）制作表单（6）使用网页框架（7）提供丰富的组件（8）插入外部程序。（9）使用数据库（10）支持动态HTML和CSS样式表,2023/6/25,第九章 网页制作,19,9.2.1 Fron

13、tPage的主要功能,同时，FrontPage 2000具有强大的网站管理功能，是一款方便而又实用的Web站点的发布与维护工具，主要功能有：（1）建立站点（2）站点文件管理功能（3）网页导航管理功能（4）任务管理功能（5）网站发布与维护功能,2023/6/25,第九章 网页制作,20,9.2.2 FrontPage的启动与退出,1FrontPage的启动 FrontPage 2000可以按下列步骤启动：（1）单击“开始”按钮，在“开始”菜单中单击“程序”。（2）在“程序”菜单中单击Microsoft FrontPage。（3）打开的Microsoft FrontPage 2000窗口。另外，也

14、可以在桌面上建立FrontPage 2000快捷方式，然后在桌面上双击该图标，即可启动FrontPage 2000。2.FrontPage的退出 FrontPage 2000的退出有以下三种方式：(1)选取“文件”菜单中的“退出”。(2)单击操作窗口中最右上角的关闭按钮(3)通过快捷键Alt+F4退出。,2023/6/25,第九章 网页制作,21,9.2.3 网页与网站,用HTML语言编写的文件称之为HTML文件，该文件需要通过Web浏览器解释并显示在屏幕上，所以它又被称为网页(Web Page)。一般而言，Web站点的第一个网页被称为主页或者首页(Home Page)。其实站点就是一组相关网

15、页和其他文件的集合。,2023/6/25,第九章 网页制作,22,9.2.4 FrontPage中的视图,FrontPage 2000提供了6种视图以方便用户对站点的管理，可以在不同的视图中进行不同的操作。1.“网页”视图“网页”视图是FrontPage 2000中最常用的工作界面。网页的创建、编辑、预览等基本操作都是在此视图中进行的。该视图窗口底部有三个标签：“普通”、“HTML”和“预览”。它们控制网页以普通方式、HTML方式进行编辑和对网页效果进行预览。2.“文件夹”视图 在“文件夹”视图中，站点显示为一组文件和文件夹。在“文件夹”视图中可以创建、移动和删除文件或文件夹。3“报表”视图

16、使用“报表”视图可以方便了解当前站点的文件内容、更新链接情况、组件错误、所有文件列表及变化情况等信息。,2023/6/25,第九章 网页制作,23,9.2.4 FrontPage中的视图,4“导航”视图 使用“导航”视图可方便地观察站点的链接结构。在该视图中可以很直观地浏览网站内网页之间的链接关系，同时也可以通过拖曳操作改变链接结构。5“超链接”视图“超链接”视图将当前站点显示为链接文件的一个网络，它们表示了站点中各个网页之间的相互链接关系。6.“任务”视图“任务”视图主要用来创建和管理任务。在视图中列出了当前站点的“任务”，即当前站点中尚未完成的项目。,2023/6/25,第九章 网页制作,

17、24,9.2.5 FrontPage的编辑方式,FrontPage 2000的网页视图下有三种编辑方式：普通、HTML、浏览，该视图窗口底部有三个标签：“普通”、“HTML”和“预览”。它们分别控制网页以普通方式、HTML方式进行编辑或是预览网页的效果，默认是普通方式。如果切换到HTML方式，用户就可以看到FrontPage 2000自动生成的HTML代码。在HTML方式下，可以直接键入HTML代码。浏览方式实际上是用Internet Explorer来显示网页。FrontPage 2000上的工具栏可以选择打开或隐藏。FrontPage 2000最多可显示9个工具栏，分别是常用、格式、DHT

18、ML、效果、报表、表格、导航、定位、图片和样式。FrontPage 2000上的工具栏都是可以浮动的，用户可以用鼠标按住工具栏上空白的地方，把工具栏拖动到任何位置或固定在FrontPage 2000窗口的四周。FrontPage 2000的状态栏上有一个窗格，显示正在编辑的网页和下载速度。,2023/6/25,第九章 网页制作,25,9.3 网页制作,Web站点的开发，首先应当根据其用途规划站点，确定站点的结构，并在本地磁盘上创建站点以存储制作完成的网页及其其他相关文件。然后再发布到指定服务器上（远程站点）。9.3.1 创建站点 9.3.2 网页编辑 9.3.3 插入对象 9.3.4 创建超链

19、接,2023/6/25,第九章 网页制作,26,9.3.1创建站点,FrontPage 2000 提供了多个模板和向导。下面以“只有一个网页的站点”模版为例，介绍新建站点的方法：（1）在FrontPage 2000窗口中，单击“文件“菜单上的“新建”命令，再选择“站点”，FrontPage 2000将打开“新建”对话框。（2）在“新建”对话框的“指定新站点的位置”文本框中，输入存储站点的文件夹。（3）双击“只有一个网页的站点”模版，新建站点。,2023/6/25,第九章 网页制作,27,9.3.2网页编辑,1新建网页 要创建一个新的网页，按下面的步骤操作。（1）从“文件”菜单的“新建”子菜单中

20、选择“网页”命令。（2）出现“新建”对话框，选中“常规”选项卡。（3）选择所需的模板。（4）单击“确定”按钮，系统新建一个基于所选模板的网页。（5）此时，新建的网页显示在窗口中，可以进行编辑修改等。（6）单击“文件”菜单，选择“保存文件”命令，弹出对话框，设置完成后单击“保存”按钮。（7）单击“视图”框中的“导航”图标，在“文件夹列表”中拖动新建网页到站点的结构图，将其置入相应位置。,2023/6/25,第九章 网页制作,28,9.3.2网页编辑,2打开网页 打开网页的方法有多种，最常用的操作步骤如下：（1）在FrontPage 2000窗口中，单击工具栏中“文件夹列表”按钮。（2）在“文件夹

21、列表”窗口中，找到要编辑的网页，然后双击网页图标。3设置文字格式 文字格式包括字体、字型、大小、颜色和修饰效果等属性。设置文字的格式操作如下：（1）选中文字。（2）单击“格式”菜单，选择“字体”命令，打开“字体”对话框。（3）可在对话框中设置字体的各种属性。,2023/6/25,第九章 网页制作,29,9.3.2网页编辑,4设置段落格式 文字段落的格式编排对于一个网页的外观是至关重要的。FrontPage 2000通过按“Enter”划分段落。值得注意的是，段落之间插入了一个空行。如果只是需要换行，而不是另起一个段落，按“Shift”+“Enter”键即可。实际上，按“Enter”在HTML代

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

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

24、.3.2网页编辑,7预览网页 用户可以转换到预览视图方式预览网页，还可以使用“文件”菜单上的“在浏览器中预览”命令，使用外部浏览器打开当前网页进行预览。此时，将打开“在浏览器中预览”对话框。在“浏览器”框内选择一个web浏览器，在“窗口大小”框内选辑窗口的尺寸，然后单击“预览”按钮。用户还可以单击“添加”按钮，添加其他的预览浏览器。,2023/6/25,第九章 网页制作,33,9.3.3插入对象,在FrontPage 2000中，可以方便的插入符号、图片、水平线等对象。1插入特殊符号操作步骤如下：(1)在准备插入特殊符号的网页文本中设置插入点。(2)打开“插入”菜单，执行其中的“符号”命令，打

25、开“符号”对话框。(3)在符号列表框中选择要插入的符号，此时在“插入”按钮右侧的预览框中会出现选 择的符号，单击“插入”按钮之后，即可将特殊符号插入至网页的插入点处。(4)单击“关闭”按钮。,2023/6/25,第九章 网页制作,34,9.3.3插入对象,2 插入水平线操作步骤如下：(1)在准备插入水平线的位置设置插入点。(2)打开“插入”菜单，选择“水平线”命令，此时在网页的插入点处插入一条水平线。如果插入点位于或接近行尾，则水平线将插入到下一行。将光标移动至水平线上双击，打开“水平线属性”对话框。在“宽度”栏中可设置水平线的宽度。在“高度”栏中输入水平线的高度。在“对齐方式”栏中选择水平线

26、在网页内水平对齐的方式。在“颜色”列表框内设置水平线的颜色，系统默认的颜色是黑色。选择“实线(无阴影)”复选框时，水平线将被设置成实心线，并且在水平线的边缘上没有阴影。,2023/6/25,第九章 网页制作,35,9.3.3插入对象,3 插入图片（1）图片文件的格式 在WWW上常用的图像文件格式是JPEG和GIF，它们都是压缩的图像格式，文件的信息量小，适合于网络传输。图形交换格式GIF是第一种被WWW支持的图像文件格式，它采用无损压缩方式。其主要特征是支持动画、透明度、图形渐进。但GIF格式只支持256种颜色。联合照片专家组JPEG格式是专为有几百万种颜色的照片和图形设计的，它采用有损压缩方

27、式，以牺牲图片质量换取大的压缩比例。但JPEG格式支持真彩色（24位色），并且在压缩大的图像方面已被证明很有效。,2023/6/25,第九章 网页制作,36,9.3.3插入对象,（2）插入图片的步骤 第一步，移动光标至想要插入图像处。第二步，单击菜单项中的“插入”，选择“图片”项，再选取二级菜单中的“来自文件(E)”，弹出对话框。第三步，如果图片在该站点中，则选中图片文件并按“确定”按钮；否则单击“从计算机上选择一个文件”按钮或单击“使用web浏览器来选择网页或文件”按钮，从计算机本地硬盘中或者Internet上选中图片并按“确定”，即可将其插入网页中。（3）设置图片属性 插入的图片可以设置图

28、片属性来调整图片的大小、对齐方式等。在选定的图片上单击鼠标右键，在快捷菜单中选择“图片属性”命令，此时会出现“图片属性”对话框，选中“外观”选项卡。,2023/6/25,第九章 网页制作,37,9.3.3插入对象,在“大小”区域中调整图片的大小参数。为了防止改变图片原来的长宽比例，可以选中“保持纵横比”复选框，这样图片就会根据原来的长宽比例来调整大小。单击“对齐方式”列表框，选择对齐方式。在“边框粗细”框中，输入图片边框的宽度，“0”为无边框（4）编辑图片 选中插入的图片，单击“查看”菜单中的“工具栏”，选择“图片”命令，打开图片编辑工具栏，可以对图片的亮度、对比度进行调整，可以旋转、翻转图片

29、，对图片进行剪裁等操作。,2023/6/25,第九章 网页制作,38,9.3.3插入对象,4插入字幕（1）将插入点设置在要插入移动字幕的位置或者选择作为移动字幕的文本。（2）单击“插入”菜单中的“组件”，选择“字幕”命令。（3）出现“字幕属性”对话框，如果已经选择了作为移动字幕的文本，此文本就会出现在“文本”框中。如果没有选择文本，可在“文本”框中输入作为移动字幕的文本。（4）在“方向”区域中选择文字的移动方向。在“速度”区域中可以指定文字的移动速度，在“延迟”框中输入的数值表示在每个连续运动之间暂停的毫秒数。“数量”框中输入的数值表示文本每次移动的距离。在“表现方式”区域中可以指定文字的运动

30、方式。选中“重复”区域的“连续”复选框，移动字幕连续不停循环，若要设置文本重复有限的次数，则取消选中并输入字幕重复的次数。在“背景颜色”列表框中可以设置移动字幕的背景颜色。（5）单击“确定”按钮。,2023/6/25,第九章 网页制作,39,9.3.3插入对象,5插入悬停按钮 悬停按钮是一种动感按钮，当访问者将鼠标指向该按钮时，按钮就会改变颜色或形状。插入悬停按钮的基本步骤如下：（1）将插入点设置在要插入悬停按钮的位置。（2）单击“插入”菜单中的“组件”，选择“悬停按钮”命令，弹出“悬停按钮属性”对话框。,2023/6/25,第九章 网页制作,40,9.3.3插入对象,（3）在“按钮文本”框中

31、输入按钮上的文本。可单击“字体”按钮，设置文本的字体、字型、大小和文本颜色属性。“背景颜色”选项是指按钮的背景颜色，此选项一般不起作用。在“效果”列表框中选择当鼠标移到按钮上时出现的视觉效果，包括“填充颜色”、“颜色对比”、“发光”、“反色发光”、“微微发光”、“凸出”和“凹进”效果。可以在“效果颜色”列表框中指定当实现某种效果时出现的颜色。（4）可以通过单击“自定义”按钮，在弹出的“自定义”对话框中进一步设置按钮的属性。（5）设置完成，按“确定”按钮。此时，设置的图片悬停按钮出现在插入点位置。,2023/6/25,第九章 网页制作,41,9.3.3插入对象,6站点计数器 使用“站点计数器”组

32、件可以记录访问次数或者网页被选中的次数。浏览者每次访问网页时，站点计数器中的数字就会随之增加。FrontPage 2000 提供了美观的“站点计数器”组件。插入“站点计数器”的步骤如下：（1）将插入点设置在要插入站点计数器的位置。（2）单击“插入”菜单中的“组件”，选择“站点计数器”命令，出现“站点 计数器属性”对话框。（3）在“站点计数器属性”对话框中，选择所需的计数器样式。若要使用自定义的计数器样式，需在“计数器样式”区中选择“自定义图片”选项，然后在文本框中输入图片的路径及文件名。注意：如果要自定义样式，需要自行设计一个包含0到9数字的图片，然后将该图片存成GIF图片文件格式。,2023

33、/6/25,第九章 网页制作,42,9.3.3插入对象,（4）选中“计数器重置为”复选框，在右侧的文本框中输入计数器的起始数。（5）选中“设定数字位数”复选框，然后在右侧的文本框中输人数字作为计数器的位数。（6）单击“确定”按钮。此时，在网页中插入了一个站点计数器。值得注意的是，此组件需要Web服务器的支持才能正确显示。,2023/6/25,第九章 网页制作,43,9.3.4创建超链接,1创建超链接 在web网页中超链接一般有两种表现方式，即以文本方式标注的超链接和以图片方式标注的超链接。下面介绍这两种方式超链接的创建过程。（1）链接到已有的页面 创建超链接的步骤如下：第1步 选定要定义超链接

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

35、对话框，在“常规”选项卡中选择一种网页模板。单击“确定”按钮，链接到个新的网页，然后编辑此网页。,2023/6/25,第九章 网页制作,45,9.3.4创建超链接,（3）链接到计算机中的文件 在FrontPage 2000中，可以创建链接到计算机中某文件的超链接。其创建步骤如下：第1步 选定要定义超链接的文本或图像。第2步 单击“常用”工具栏上的“超链接”按钮，或者从“插入”菜单中选择“超链接”命令。第3步 出现“创建超链接”对话框，单击“制作一个指向您计算机上文件的超链接”按钮。第4步 出现“选择文件”对话框，选择要链接的文件。单击“确定”按钮，完成超链接的创建。单击窗口底部的“预览”标签，

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

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

38、，在“URL”栏中显示了你的电子邮件地址。第5步 单击“确定”按钮，完成超链接的创建。,2023/6/25,第九章 网页制作,48,9.3.4创建超链接,2使用书签 应用书签能够更严密地控制访问者到达网页内某个具体位置。当访问者单击基于书签的超链接时，将直接跳转到这个书签所在的位置。（1）插入书签 在创建到书签的链接之前，必须要在网页中插入书签。具体步骤：第1步 将光标定位在要插入书签的位置。第2步 从“插入“菜单中选择“书签”命令。第3步 出现“书签”对话框，在“书签名称”框中键人书签名称。第4步 单击“确定”按钮，出现书签标记。（2）创建到书签的超链接步骤如下：,2023/6/25,第九章

39、 网页制作,49,9.3.4创建超链接,第1步 选定要定义超链接的文本或图像。第2步 单击“常用”工具栏上的“超链接”按钮，或者从“插入”菜单中选择“超链接”命令。第3步 出现“创建超链接”对话框，选定已经插入书签的目标网页，在“可选”区域中单击“书签”下拉按钮，在列表中选择链接的书签名。第4步 单击“确定”按钮，完成超链接的制作。,2023/6/25,第九章 网页制作,50,9.3.4创建超链接,3使用导航栏 为了使浏览者能在站点中的各个网页之间的切换浏览，FrontPage 2000提供了“导航栏”功能。插入导航栏的具体步骤如下：（1）将光标设置在要插入导航栏的位置。（2）从“插入”菜单中

40、选择“导航栏”命令。（3）出现“导航栏属性”对话框，在“要添加到网页的超链接”区域中设定所需的超链接选项。当选择了一个选项时，相应的超链接就以蓝色出现在结构示意图中。（4）在“方向和外观”区域中选择所需的方向和外观选项。（5）单击“确定”按钮，导航栏出现在网页中的插入点位置。当网站中网页的链接结构发生改变时，导航栏将自动进行调整，保持与变化后的链接结构的一致性。,2023/6/25,第九章 网页制作,51,9.4 网页布局,网页的布局设计，是将文字、图形图像等网页元素，根据特定的内容和主题，在网页所限定的范围中，进行视觉的关联与配置，从而将设计意图以视觉形式表现出来。网页的布局一般通过表格和框

41、架的使用来实现。9.4.1 创建和使用表格 9.4.2 创建框架 9.4.3 创建框架超链接,2023/6/25,第九章 网页制作,52,9.4.1创建和使用表格,表格由行和列交叉所形成的单元格组成。在单元格中可以放置任何对象，例如文本、图像、表单、FrontPage组件等。利用表格可以有条理地排列数据或者组织网页布局。表格可以将文本排列成并列的段落，或模拟文本的分栏形式，也可以利用宽度固定的表格在网页上为文本提供边界。FrontPage 2000提供了与WORD字处理软件类似的表格处理功能，在网页中可以轻松的创建和处理表格。,2023/6/25,第九章 网页制作,53,9.4.1创建和使用表

42、格,1创建表格创建表格有以下三种方法：使用“常用”工具栏中的“插入表格”按钮，可以按默认方式快速地插入表格。(1)将插入点定位在要插入表格的位置。(2)单击“常用”工具栏上的“插入表格”按钮，然后向右下方拖动鼠标，在表格框中会显示表格的大小。此时在插入点位置就会显示一张空的表格。使用菜单命令可以对插入的表格进行精确的设置，包括行和列的数目、边框尺寸以及单元格宽度等。（1）将插入点定位在要插入表格的位置。（2）从“表格”菜单的“插入”子菜单中选择“表格”命令。,2023/6/25,第九章 网页制作,54,9.4.1创建和使用表格,（3）出现“插入表格”对话框。在“大小”区域中的“行”和“列”栏中

43、输入表格的行数和列数。（4）在“布局”区域中可以设置表格的布局方式，包括表格的对齐方式、边框粗细等。（5）单击“确定”按钮，设置的表格出现在插入点位置。可以手动绘制表格，步骤如下：（1）从“表格”菜单中选择“手绘表格”命令，显示“表格”工具栏。在“表格”工具栏中单击“手绘表格”按钮，光标变为铅笔形状。（2）在要创建表格的位置按下鼠标左键的同时拖动光标。在表格大小合适时松开鼠标，个表格出现在网页中。（3）在表格内将铅笔光标沿水平方向拖动增加一个新行。在表格内将铅笔光标沿垂直方向拖动增加一个列行。重复该步骤可创建一个复杂的表格。（4）单击“表格”工具栏中的“清除”按钮，光标变为橡皮形状，单击表格线

44、可清除该表格线。,2023/6/25,第九章 网页制作,55,9.4.1创建和使用表格,2设置表格属性插入表格后，右单击表格，在快捷菜单中选择“表格属性”命令，即可打开的“表格属性”对话框。对表格属性的设置说明如下：对齐方式：可以选择左对齐、右对齐、水平居中和两端对齐。该属性决定表格在网页中的相对位置。浮动：可以选择左对齐、右对齐。该属性决定表格与其他网页元素的排列关系，即“文字环绕”效果。指定宽度和高度：表格的大小。可以使用决对大小“像素”或相对大小“百分比”。单元格边距：设置表格线与表格内容的距离。单元格间距：设置两个相邻单元格边框的距离。边框：粗细以像素为单位。可以选择和是的边框颜色背景

45、：可以指定背景颜色或背景图像。,2023/6/25,第九章 网页制作,56,9.4.1创建和使用表格,3调整表格创建了表格之后，可以对各个表格单元格、行和列的布局和结构进行调整。（1）插入行或列在表格中插入行或列的步骤如下：第1步 将插入点定位在单元格内。第2步 从“表格”菜单的“插入”子菜单中选择“行或列”命令。第3步 出现“插入行或列”对话框，根据需要选中“行”或“列”单选框。然后在“行数”或“列数”选项栏中键入插入的行数或列数。第4步 在“位置”区域中选择相对于当前的插入位置。单击“确定”按钮。提示：使用“表格”工具栏上的“插入行”或“插入列”按钮可以快速表格中插入的行或列。,2023/

46、6/25,第九章 网页制作,57,9.4.1创建和使用表格,（2）删除行、列或单元格 删除表格中的行或列的操作步骤入下：第1步 选中要删除的行、列或单元格。第2步 单击“表格”菜单中的“删除单元格”命令。或者单击“表格”工具栏中的“删除单元格”按钮。（3）合并单元格 选中一个矩形区域内的多个连续的单元格，单击“表格”菜单中的“合并单元格”命令。或者单击“表格”工具栏中的“合并单元格”按钮。（4）拆分单元格 将插入点定位在要拆分的单元格中，单击“表格”菜单中的“拆分单元格”命令。或者单击“表格”工具栏中的“拆分单元格”按钮。出现“拆分单元格”对话框，如果选择“拆分为行”选项，可以水平地拆分单元格

47、；如果选择“拆分为列”选项，可以垂直地拆分单元格。然后在“行数”或“列数”框中键人或选择拆分的数目。单击“确定”按钮。,2023/6/25,第九章 网页制作,58,9.4.1创建和使用表格,（5）设置单元格属性 将插入点定位在单元格中，单击“表格”菜单中的“属性”，选择“单元格”命令，弹出“单元格属性”对话框。可以设置单元格中内容的布局，精确定义单元格的宽度、高度，确定单元格的背景以及边框的颜色等。,2023/6/25,第九章 网页制作,59,9.4.2创建框架,框架的使用是进行网页布局设计的一种重要手段。它将浏览器窗口划分为几个区域，称为框架，在每个框架中都可以显示一个独立的网页。浏览器窗口

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

49、确定”按钮，完成框架网页的创建。在窗口的底部出现了两个新的标签，“无框架”视图为不能支持框架 的浏览器创建替代网页。“框架网页HTML”视图显示框架网页的HTML代码。在每个框架中，单击“新建网页”按钮，可以建立显示在该框架中的新网页。单击“设置初始网页”按钮，可以建立与已经存在网页的超链接，从而在此框架中显示出来。,2023/6/25,第九章 网页制作,61,9.4.2创建框架,2 保存框架网页保存框架网页的操作步骤如下：（1）单击“常用”工具栏中的“保存”按钮。（2）出现“另存为”对话框，在右边的框架网页预览图中，其中一个框架高亮显示，表示正在保存的该网页。（3）在“文件名”框中输入网页名

50、称。（4）单击“更改”按钮，设置网页的标题。（5）单击“保存”按钮，该网页保存完毕，框架图中的另一个框架处于高亮状态。（6）重复步骤（3）至步骤（5）的操作。（7）当对话框中的整个框架图处于高亮状态时，表示此时正在保存框架网页本身。（8）输入框架网页的文件名称及标题。（9）单击“保存”按钮。,2023/6/25,第九章 网页制作,62,9.4.2创建框架,3拆分框架 当使用模板创建的框架结构不能满足需要时，可以通过拆分框架，制作出更为复杂的框架网页。操作步骤如下：（1）选择要拆分的框架。（2）在“框架”菜单中选择“拆分框架”命令。（3)出现“拆分框架”对话框，根据需要选择“拆分为列”或“拆分成