html与FrontPage网页制作.ppt

《html与FrontPage网页制作.ppt》由会员分享，可在线阅读，更多相关《html与FrontPage网页制作.ppt（96页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

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

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

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

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

5、有些则没有结束标记。具有起始和结束标记，有些则没有结束标记。HTML标标记记不不区区分分大大小小写写。如如：HTML、html或或HtMl，其结果都是一样的。其结果都是一样的。标标记记名名称称和和属属性性之之间间用用空空格格分分隔隔。如如果果标标记记有有多多种种属属性性，属性之间也要用空格分开。属性之间也要用空格分开。目录上一页下一页退出2023/1/1第九章 网页制作79.1.1 9.1.1 HTMLHTML语言概述语言概述2.2.HTMLHTML网页的结构网页的结构 HTML文件的层次结构：一般HTML文件都是以以 html开开头头，又又以以/html结结束束。其文件结构由以下两部分组成：

6、（1 1）头部（）头部（HeadHead）HTML文件的头部由和标记定义。通常情况下，文件的标题、搜索引擎所用的关键字以及语言字符集信息等都放在头部信息中。（2 2）正文主体（）正文主体（BodyBody）由和标记定义。标记具有一些常用的属性，格式为：其中，bgcolor为背景颜色；text为文本颜色。n为六位十六进制数。如果网页使用背景图像，格式为：目录上一页下一页退出2023/1/1第九章 网页制作89.1.2 9.1.2 HTMLHTML语言的基本语法语言的基本语法1.1.文本布局文本布局(1)(1)段落标记段落标记 P标记指定文档中一个独立的段落。使用格式如下：标记定义的两个段落之间留

7、有一个空行。(2)(2)换行标记换行标记 br 标记可以强制文本换行。该标记只有开始标记。(3)(3)水平线标记水平线标记 hr水平线标记用于在网页中插入一条水平线。使用格式如下：(4)(4)居中标记居中标记 center标记中包含的内容显示在页面中央。目录上一页下一页退出2023/1/1第九章 网页制作99.1.2 9.1.2 HTMLHTML语言的基本语法语言的基本语法例例9-2 9-2 在网页中设置段落和页面格式。在网页中设置段落和页面格式。html 文本布局文本布局/title 在在这这里里我我们们首首先先向向您您介介绍绍有有关关HTMLHTML语语言言的的基基本本知知识识和和基基本本

8、语语法法。br然后，讲授如何使用然后，讲授如何使用HTMLHTML语言编写您的语言编写您的WebWeb页面。页面。/p段落左对齐段落左对齐 p align=center 段落居中段落居中 p align=right 段落右对齐段落右对齐/center 目录上一页下一页退出2023/1/1第九章 网页制作109.1.2 9.1.2 HTMLHTML语言的基本语法语言的基本语法2.文字格式文字格式HTML语言中用于文字格式化的标记有：（1 1）标题标记）标题标记 h标记定义文字标题。标题文字将以指定大小，黑体居中显示。格式：标题文字标题文字 其中，n为1到6的数字，表示字体大小。（2 2）字体标记

9、）字体标记 font字体标记用来对文字格式进行设置，主要具有以下属性：1)size属性用来控制文字的大小，其格式为：，n=1,2,3,4,5,6,7，默认值为3。2)color属性用来控制文字的颜色，其格式为：，n是一个十六进制的六位数。3)face属性用来指明文字使用的字体，其格式为：目录上一页下一页退出2023/1/1第九章 网页制作119.1.2 9.1.2 HTMLHTML语言的基本语法语言的基本语法（3）字形标记 设置文字的粗体、斜体、上标、下标、下划线等。标记格式 字形结果 粗体 斜体 下划线 目录上一页下一页退出2023/1/1第九章 网页制作129.1.2 9.1.2 HTML

10、HTML语言的基本语法语言的基本语法3.插入图片插入图片标记将图片插入网页中。该标记具有以下属性：(1)(1)srcsrc属性：属性：指明图片文件所在的位置。格式：其中URL是指图片文件存放的位置。(2)(2)altalt属属性性：图片的文字说明，当鼠标指针指向该图片时，该说明性文字弹出。格式：(3)(3)heightheight和和widthwidth属性：属性：设置图片显示区域的高度和宽度。格式：其中height和width属性中n1、n2的取值为像素数，像素数越大，图片显示越大。(4)(4)borderborder属性：属性：设置图片文件的边框。格式：设置图片的边框。其中n为像素数。(5

11、)(5)alignalign属性：属性：设置图片相对于文本的位置关系。格式：顶边对齐/垂直居中/底边对齐/左对齐/右对齐目录上一页下一页退出2023/1/1第九章 网页制作139.1.2 9.1.2 HTMLHTML语言的基本语法语言的基本语法 4.超级链接超级链接在HTML语言中，a和和/a标标记记用用于于设设置置网网页页中中的的超超链链接接，hrefhref属属性指明被超链接的文件地址。性指明被超链接的文件地址。格式：超连接文本用于表示超链接的文本一般显示为蓝色并且加下划线。在浏览器中，当鼠标指针指向该文本时，箭头变为手形，并在浏览器的状态栏中显示该链接的地址。若使用图片做超链接，可使用如

12、下格式完成：目录上一页下一页退出2023/1/1第九章 网页制作149.1.2 9.1.2 HTMLHTML语言的基本语法语言的基本语法5.5.使用表格使用表格 在网页中插入一个表格，需要用到一组HTML标记。定义表格的有关标记如下：定义表格。定义表行。定义表头。定义表列。常用的标记属性：border属性用于设置表格边框的宽度；width、height属性设定表格和表项的宽度、高度，取值可以是像素数或百分数；cellspacing 和cellpadding属性分别用于设置单元格之间的间隙和单元格内部空白；align属性设置表格和表项的对齐方式;bgcolor和background属性设置表格背

13、景的颜色和背景图像。目录上一页下一页退出2023/1/1第九章 网页制作159.1.2 9.1.2 HTMLHTML语言的基本语法语言的基本语法例9-4 表格示例表格示例时间星期一 星期二 星期三 1-2节数学语文英语3-4节地理历史生物 目录上一页下一页退出2023/1/1第九章 网页制作169.2 9.2 FrontPageFrontPage概述概述 专门Web创作工具具有“所见即所得”功能,Web创作人员直接对Web页面进行编辑修改，并且能立即看到Web页面的显示效果。FrontPage是微软公司开发的网网页页制制作作和和网网站站管管理理工工具具。FrontPage 2003是Micro

14、soft Office 2003组件之一，与Office其它组件高度融合。它界面友好，功能强大，易学易用，是目前使用最为广泛的网页制作、站点管理的工具。目录上一页下一页退出2023/1/1第九章 网页制作17。网页制作步骤1、首先在Internet网上申请网站的主页空间和域名。在很多门户网站都提供免费的服务，但代价是要在你的主页上留有该网站的广告。如果你是为一个企业做的网站，最好不要用这种免费的空间，因为它必竟不能保障你所做的网站的安全2、然后在自己的计算机上设计出网页。可以利用一些网页的制作工具。如：网页编辑软件FontPage2003；图片处理软件，如PhotoShop；动画的制作软件，如

15、Flash等等。3、通过FTP（文件传输）软件，将网页、有关的图片文件、动画文件以及相关其它文件传到网上。4、登记搜索引擎。为自己所做的网站进行宣传，让广大的Internet网络用户能够知道你的存在，否则你所做的网站就毫无意义，因为别人无法知道你的网页。目录上一页下一页退出2023/1/1第九章 网页制作189.2 9.2 FrontPageFrontPage概述概述9.2.1 FrontPage的启动与退出9.2.2 FrontPage中的视图9.2.3 FrontPage的编辑方式 9.2.4 FrontPage中的视图9.2.5 FrontPage的编辑方式目录上一页下一页退出2023/

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

17、ontPage的主要功能的主要功能 同时，FrontPage 2003具有强大的网站管理功能，是一款方便而又实用的Web站点的发布与维护工具，主要功能有：（1）建立站点 （2）站点文件管理功能 （3）网页导航管理功能 （4）任务管理功能 （5）网站发布与维护功能目录上一页下一页退出2023/1/1第九章 网页制作219.2.2 9.2.2 FrontPageFrontPage的启动与退出的启动与退出1 1FrontPageFrontPage的启动的启动 FrontPage 2003可以按下列步骤启动：（1）单击“开始”按钮，在“开始”菜单中单击“程序”。（2）在“程序”菜单中单击Microso

18、ft FrontPage。（3）打开的Microsoft FrontPage 2003窗口。另外，也可以在桌面上建立FrontPage 2003快捷方式，然后在桌面上双击该图标，即可启动FrontPage 2003。2.FrontPage2.FrontPage的退出的退出 FrontPage 2003的退出有以下三种方式：(1)选取“文件”菜单中的“退出”。(2)单击操作窗口中最右上角的关闭按钮 (3)通过快捷键Alt+F4退出。目录上一页下一页退出2023/1/1第九章 网页制作229.2.3 9.2.3 网页与网站网页与网站 用HTML语言编写的文件称之为HTML文件，该文件需要通过Web

19、浏览器解释并显示在屏幕上，所以它又被称为网页(Web Page)。一般而言，Web站点的第一个网页被称为主页或者首页(Home Page)。其实站站点点就就是是一一组组相相关关网网页页和和其其他他文文件件的的集合。集合。目录上一页下一页退出2023/1/1第九章 网页制作239.2.4 9.2.4 FrontPageFrontPage中的视图中的视图FrontPage 2003提供了7种视图以方便用户对站点的管理，可以在不同的视图中进行不同的操作。1.网页视图2.文件夹视图3.远程网站视图4.报表视图5.导航视图6.超链接视图7.任务视图目录上一页下一页退出2023/1/1第九章 网页制作24

20、9.2.4 9.2.4 FrontPageFrontPage中的视图中的视图1.1.“网页网页”视图视图“网页”视图是FrontPage 2003中最常用的最常用的工作界面。网页的创建、编辑、预览等基本操作都是在此视图中进行的。2 2.“文件夹文件夹”视图视图 在“文件夹”视图中，站点显示为一组文件和文件夹。在“文件夹”视图中可以创建、移动和删除文件或文件夹。3 3“报表报表”视图视图 使用“报表”视图可以方便了解当前站点的文件内容、更新链接情况、组件错误、所有文件列表及变化情况等信息。4 4“导航导航”视图视图 使用“导航”视图可方便地观察站点的链接结构。在该视图中可以很直观地浏览网站内网页

21、之间的链接关系，同时也可以通过拖曳操作改变链接结构。5 5“超链接超链接”视图视图 “超链接”视图将当前站点显示为链接文件的一个网络，它们表示了站点中各个网页之间的相互链接关系。6.6.“任务任务”视图视图 “任务”视图主要用来创建和管理任务。在视图中列出了当前站点的“任务”，即当前站点中尚未完成的项目。目录上一页下一页退出2023/1/1第九章 网页制作259.2.5 9.2.5 FrontPageFrontPage的编辑方式的编辑方式FrontPage 2003的网页视图下有四种方式：设计、代码、预览、拆分。设计视图是打开网页首先进入的视图，可以在其中输入文本、插入图片、插入表格等，也可以

22、任意进行修改。代码视图中，用户可以查看、编写和编辑HTML标记。预览视图中可以看到网页在Web浏览器中的大体显示情况。FrontPage 2003新增的拆分视图将窗口工作区拆分成上、下两部分，上半部分是代码区，下半部分是设计区。无论对哪一个区域进行修改，另一个区域都会做出相应的改变。目录上一页下一页退出2023/1/1第九章 网页制作269.3 9.3 网页制作网页制作 Web站点的开发，首先应当根据其用途规划站点，确定站点的结构，并在本地磁盘上创建站点以存储制作完成的网页及其他相关文件。然后再发布到指定服务器上（远程站点）。9.3.1 创建站点 9.3.2 网页编辑 9.3.3 插入对象 9

23、.3.4 创建超链接 目录上一页下一页退出2023/1/1第九章 网页制作279.3.19.3.1创建站点创建站点 FrontPage 2003 提供了多个模板和向导。下面以“只有一个网页的站点”模版为例，介绍新建站点的方法：（1）在FrontPage 2003窗口中，单击“文件“菜单上的“新建”命令，再选择“站点”，FrontPage 2003将打开“新建”对话框。（2）在“新建”对话框的“指定新站点的位置”文本框中，输入存储站点的文件夹。（3）双击“只有一个网页的站点”模版，新建站点。目录上一页下一页退出2023/1/1第九章 网页制作289.3.29.3.2网页编辑网页编辑1 1新建网页

24、新建网页 要创建一个新的网页，按下面的步骤操作。（1）从“文件”菜单的“新建”子菜单中选择“网页”命令。（2）出现“新建”对话框，选中“常规”选项卡。（3）选择所需的模板。（4）单击“确定”按钮，系统新建一个基于所选模板的网页。（5）此时，新建的网页显示在窗口中，可以进行编辑修改等。（6）单击“文件”菜单，选择“保存文件”命令，弹出对话框，设置完成后单击“保存”按钮。（7）单击“视图”框中的“导航”图标，在“文件夹列表”中拖动新建网页到站点的结构图，将其置入相应位置。目录上一页下一页退出2023/1/1第九章 网页制作299.3.29.3.2网页编辑网页编辑 2 2打开网页打开网页 打开网页的

25、方法有多种，最常用的操作步骤如下：（1）在FrontPage 2003窗口中，单击工具栏中“文件夹列表”按钮。（2）在“文件夹列表”窗口中，找到要编辑的网页，然后双击网页图标。3 3设置文字格式设置文字格式 文字格式包括字体、字型、大小、颜色和修饰效果等属性。设置文字的格式操作如下：（1）选中文字。（2）单击“格式”菜单，选择“字体”命令，打开“字体”对话框。（3）可在对话框中设置字体的各种属性。目录上一页下一页退出2023/1/1第九章 网页制作309.3.29.3.2网页编辑网页编辑4 4设置段落格式设置段落格式 文字段落的格式编排对于一个网页的外观是至关重要的。FrontPage 200

26、3通过按“Enter”划分段落。值得注意的是，段落之间插入了一个空行。如果只是需要换行，而不是另起一个段落，按“Shift”+“Enter”键即可。实际上，按“Enter”在HTML代码中插入的是标记，而按“Shift”+“Enter”键则插入的是标记。段落格式主要包括对齐方式、文本缩进和段落间距属性。设置方法如下：（1）将插入点移动到要设置格式的段落中。（2）单击“格式”菜单，选择“段落”命令，弹出对话框。（3）在“段落”对话框中可以设置段落的各种格式。目录上一页下一页退出2023/1/1第九章 网页制作319.3.29.3.2网页编辑网页编辑5 5设置项目列表设置项目列表 为列表添加项目符

27、号或编号的具体操作如下：（1）选择要添加项目符号或编号的列表项。（2）单击“格式”工具栏上的“项目符号”按钮，可为列表添加项目符号。（3）单击“格式”工具栏上的“编号”按钮，可为列表添加编号。目录上一页下一页退出2023/1/1第九章 网页制作329.3.29.3.2网页编辑网页编辑6 6设置网页属性设置网页属性 网页的属性包括网页的标题、位置、背景、页边距等信息。要设置网页属性，可以使用“文件”菜单上的“属性”命令，或者在网页的任意地方单击鼠标右键，在弹出的菜单中选择“属性”命令，将显示“网页属性”对话框。(1)“常规”属性 “位置”框用于指定网页的完整URL。“标题”框用于给出网页的标题。

28、“背景音乐”框用于指定网页的背景声音。(2)“背景”属性 要设置网页的背景颜色、背景图片以及超链接的颜色，单击“网页属性”对话框的“背景”选项卡。(3)“边距”属性 在“边距”选项卡中可以设置页面的顶端页边距和左端页边距。目录上一页下一页退出2023/1/1第九章 网页制作339.3.29.3.2网页编辑网页编辑7 7预览网页预览网页 用户可以转换到预览视图方式预览网页，还可以使用“文件”菜单上的“在浏览器中预览”命令，使用外部浏览器打开当前网页进行预览。此时，将打开“在浏览器中预览”对话框。在“浏览器”框内选择一个web浏览器，在“窗口大小”框内选辑窗口的尺寸，然后单击“预览”按钮。用户还可

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

30、入水平线的位置设置插入点。(2)打开“插入”菜单，选择“水平线”命令，此时在网页的插入点处插入一条水平线。如果插入点位于或接近行尾，则水平线将插入到下一行。将光标移动至水平线上双击，打开“水平线属性”对话框。在“宽度”栏中可设置水平线的宽度。在“高度”栏中输入水平线的高度。在“对齐方式”栏中选择水平线在网页内水平对齐的方式。在“颜色”列表框内设置水平线的颜色，系统默认的颜色是黑色。选择“实线(无阴影)”复选框时，水平线将被设置成实心线，并且在水平线的边缘上没有阴影。目录上一页下一页退出2023/1/1第九章 网页制作369.3.39.3.3插入对象插入对象3 插入图片插入图片（1）图片文件的格

31、式在WWW上常用的图像文件格式是JPEG和GIF，它们都是压缩的图像格式，文件的信息量小，适合于网络传输。图形交换格式GIF是第一种被WWW支持的图像文件格式，它采用无损压缩方式。其主要特征是支持动画、透明度、图形渐进。但GIF格式只支持256种颜色。联合照片专家组JPEG格式是专为有几百万种颜色的照片和图形设计的，它采用有损压缩方式，以牺牲图片质量换取大的压缩比例。但JPEG格式支持真彩色（24位色），并且在压缩大的图像方面已被证明很有效。目录上一页下一页退出2023/1/1第九章 网页制作379.3.39.3.3插入对象插入对象（2）插入图片的步骤 第一步，移动光标至想要插入图像处。第二步

32、，单击菜单项中的“插入”，选择“图片”项，再选取二级菜单中的“来自文件(E)”，弹出对话框。第三步，如果图片在该站点中，则选中图片文件并按“确定”按钮；否则单击“从计算机上选择一个文件”按钮或单击“使用web浏览器来选择网页或文件”按钮，从计算机本地硬盘中或者Internet上选中图片并按“确定”，即可将其插入网页中。目录上一页下一页退出2023/1/1第九章 网页制作389.3.39.3.3插入对象插入对象（3）设置图片属性 插入的图片可以设置图片属性来调整图片的大小、对齐方式等。在选定的图片上单击鼠标右键，在快捷菜单中选择“图片属性”命令，此时会出现“图片属性”对话框，选中“外观”选项卡。

33、在“大小”区域中调整图片的大小参数。为了防止改变图片原来的长宽比例，可以选中“保持纵横比”复选框，这样图片就会根据原来的长宽比例来调整大小。单击“对齐方式”列表框，选择对齐方式。在“边框粗细”框中，输入图片边框的宽度，“0”为无边框（4）编辑图片 选中插入的图片，单击“查看”菜单中的“工具栏”，选择“图片”命令，打开图片编辑工具栏，可以对图片的亮度、对比度进行调整，可以旋转、翻转图片，对图片进行剪裁等操作。目录上一页下一页退出2023/1/1第九章 网页制作399.3.39.3.3插入对象插入对象4 4插入字幕插入字幕（1）将插入点设置在要插入移动字幕的位置或者选择作为移动字幕的文本。（2）单

34、击“插入”菜单中的“组件”，选择“字幕”命令。（3）出现“字幕属性”对话框，如果已经选择了作为移动字幕的文本，此文本就会出现在“文本”框中。如果没有选择文本，可在“文本”框中输入作为移动字幕的文本。（4）在“方向”区域中选择文字的移动方向。在“速度”区域中可以指定文字的移动速度，在“延迟”框中输入的数值表示在每个连续运动之间暂停的毫秒数。“数量”框中输入的数值表示文本每次移动的距离。在“表现方式”区域中可以指定文字的运动方式。选中“重复”区域的“连续”复选框，移动字幕连续不停循环，若要设置文本重复有限的次数，则取消选中并输入字幕重复的次数。在“背景颜色”列表框中可以设置移动字幕的背景颜色。（5

35、）单击“确定”按钮。目录上一页下一页退出2023/1/1第九章 网页制作409.3.39.3.3插入对象插入对象 5 5插入悬停按钮插入悬停按钮 悬悬停停按按钮钮是是一一种种动动感感按按钮钮，当访问者将鼠标指向该按钮时，按钮就会改变颜色或形状。插入悬停按钮的基本步骤如下：（1）将插入点设置在要插入悬停按钮的位置。（2）单击“插入”菜单中的“组件”，选择“悬停按钮”命令，弹出“悬停按钮属性”对话框。目录上一页下一页退出2023/1/1第九章 网页制作419.3.39.3.3插入对象插入对象 （3）在“按钮文本”框中输入按钮上的文本。可单击“字体”按钮，设置文本的字体、字型、大小和文本颜色属性。“

36、背景颜色”选项是指按钮的背景颜色，此选项一般不起作用。在“效果”列表框中选择当鼠标移到按钮上时出现的视觉效果，包括“填充颜色”、“颜色对比”、“发光”、“反色发光”、“微微发光”、“凸出”和“凹进”效果。可以在“效果颜色”列表框中指定当实现某种效果时出现的颜色。（4）可以通过单击“自定义”按钮，在弹出的“自定义”对话框中进一步设置按钮的属性。（5）设置完成，按“确定”按钮。此时，设置的图片悬停按钮出现在插入点位置。目录上一页下一页退出2023/1/1第九章 网页制作429.3.39.3.3插入对象插入对象6 6站点计数器站点计数器 使用“站点计数器”组件可以记录访问次数或者网页被选中的次数。浏

37、览者每次访问网页时，站点计数器中的数字就会随之增加。插入“站点计数器”的步骤如下：（1）将插入点设置在要插入站点计数器的位置。（2）单击“插入”菜单中的“组件”，选择“站点计数器”命令，出现“站点 计数器属性”对话框。（3）在“站点计数器属性”对话框中，选择所需的计数器样式。若要使用自定义的计数器样式，需在“计数器样式”区中选择“自定义图片”选项，然后在文本框中输入图片的路径及文件名。注意：如果要自定义样式，需要自行设计一个包含0到9数字的图片，然后将该图片存成GIF图片文件格式。目录上一页下一页退出2023/1/1第九章 网页制作439.3.39.3.3插入对象插入对象（4）选中“计数器重置

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

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

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

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

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

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

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

45、一页下一页退出2023/1/1第九章 网页制作519.3.49.3.4创建超链接创建超链接3使用导航栏使用导航栏为为了了使使浏浏览览者者能能在在站站点点中中的的各各个个网网页页之之间间的的切切换换浏浏览览,FrontPage 2003提供了提供了“导航栏导航栏”功能。功能。插入导航栏的具体步骤如下：（1）将光标设置在要插入导航栏的位置。（2）从“插入”菜单中选择“导航栏”命令。（3）出现“导航栏属性”对话框，在“要添加到网页的超链接”区域中设定所需的超链接选项。当选择了一个选项时，相应的超链接就以蓝色出现在结构示意图中。（4）在“方向和外观”区域中选择所需的方向和外观选项。（5）单击“确定”按

46、钮，导航栏出现在网页中的插入点位置。当网站中网页的链接结构发生改变时，导航栏将自动进行调整，保持与变化后的链接结构的一致性。目录上一页下一页退出2023/1/1第九章 网页制作529.4 9.4 网页布局网页布局网网页页的的布布局局设设计计，是是将将文文字字、图图形形图图像像等等网网页页元元素素，根根据据特特定定的的内内容容和和主主题题，在在网网页页所所限限定定的的范范围围中中，进进行行视视觉觉的的关关联联与与配配置置，从从而而将将设设计计意意图图以以视视觉觉形形式表现出来。式表现出来。网页的布局一般通过表格和框架表格和框架的使用来实现。9.4.1 创建和使用表格 9.4.2 创建框架 9.4

47、.3 创建框架超链接 目录上一页下一页退出2023/1/1第九章 网页制作539.4.19.4.1创建和使用表格创建和使用表格表格由行和列交叉所形成的单元格组成。在单元格中可以放置任何对象，例如文本、图像、表单、FrontPage组件等。利用表格可以有有条条理理地地排排列列数数据据或或者者组组织织网网页页布布局局。表格可以将文本排列成并列的段落，或模拟文本的分栏形式，也可以利用宽度固定的表格在网页上为文本提供边界。FrontPage 2003提供了与WORD字处理软件类似的表格处理功能，在网页中可以轻松的创建和处理表格。目录上一页下一页退出2023/1/1第九章 网页制作549.4.19.4.

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

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

50、可创建一个复杂的表格。（4）单击“表格”工具栏中的“清除”按钮，光标变为橡皮形状，单击表格线可清除该表格线。目录上一页下一页退出2023/1/1第九章 网页制作569.4.19.4.1创建和使用表格创建和使用表格2 2设置表格属性设置表格属性插入表格后，右单击表格，在快捷菜单中选择“表格属性”命令，即可打开的“表格属性”对话框。对表格属性的设置说明如下：对表格属性的设置说明如下：对齐方式：可以选择左对齐、右对齐、水平居中和两端对齐。该属性决定表格在网页中的相对位置。浮动：可以选择左对齐、右对齐。该属性决定表格与其他网页元素的排列关系，即“文字环绕”效果。指定宽度和高度：表格的大小。可以使用决对