网页设计基础 -- FrontPage 2003 篇

1

大学计算机应用基础

安徽师范大学数学与计算机科学学院

2



第七章网页制作基础

7.1 网页制作的基本概念 7.2 用FrontPage 制作网页中的主要技术 7.3 站点的创建和发布

3



7.1 网页制作的基本概念

介绍网页、网站、超链接和网站制作的步骤等概念。7.1.1 网页7.1.2 网站7.1.3 超链接 7.1.4 网站制作的步骤

4



7.1.1 网页

网页又称为页面或 Web 页，是网站的基本信息单位，是一种可以在 www 网上传输，并被浏览器认识和翻译成页面显示出来的 HTML 格式文件。

组成 WWW 的基本元素是网页。不同的网页通过超链接联系在一起，构成了 WWW 的纵横交织结构。WWW 是由无数的 Web 服务器构成的，可以通过浏览器访问这些服务器上的网页

5



网页（续）

网址

表单

网页标题

超级链接：鼠标光标移到上面可显示为手形。

Logo ：站点的标识。

导航条：相当于图书的目录，单击可跳转到指定的页面。

浏览器窗口

6



网页制作的概念

网页制作就是根据网页效果图，把它实现成浏览器中可以浏览的网页。 FrontPage 、 Dreamweaver 、 GoLive 等都是我们平常所知道的网页设计工具，但最知名和最常用的两套热门工具是微软公司的 FrontPage 和 MacroMedia 公司的 Dreamweaver 。

7



超文本标记语言 HTML

HTML 的英文全名为 HyperText Makeup Language ，直译为超文本标记语言。它不是一种程序语言，而是一种描述文档结构的标记语言，它与操作系统平台的选择无关，只要有浏览器就可以运行 HTML 文档，显示网页内容。 HTML 语言使用了一些约定的标记，对 Web 页的内容、格式及 Web 页中的超连接进行描述，浏览器会自动根据这些标记，在屏幕上显示出相应的内容，而标记符号不会在屏幕上显示出来。

目前，较流行的浏览器有 Netscape 公司的 Netscape Navigator 和微软公司的 Internel Explorer （即 IE ）。

HTML 文档本身是文本格式的，用任何一种文本编辑器都可以对它进行编辑。

8



超文本标记语言的标记网页基本结构标记 : <HTML> ……</HTML> ：是 HTML 文档中最基本的标记，不可

缺少。 <HTML> 表示 HTML 文档的开始， </HTML> 表示 HTML文档的结束。

<HEAD>……</HEAD> ：是网页标题标记，可以提高网页文档的可读性，向浏览器提供一个信息。它可以忽略，但一般不予忽略。

<TITLE>……</TITLE> ：是网页名称标记，是 <HEAD>……</HEAD> 标记内不可缺少的标记。有 <HEAD>……</HEAD> 标记就一定要有 <TITLE>……</TITLE> 标记。

<BODY>……</BODY> ：是网页主题内容标记。其内包含了网页的全部内容，一般不可缺少。

<BODY BGCOLOR=#RRGGBB> ：使用 <BODY> 标记中的 BCOLOR 属性，可以设置网页的背景颜色。

9



超文本标记语言的标记（续） <IMG> ：是图像标记，用来加载 GIF 图像与动画。 SRC：是依附于其他标记的一个属性，依附于 <IMG> 标记时，

用来导入 GIF 图像与动画。其格式如： <IMG SRC=“GIF 格式文件的目录与文件名” > 。

<BR> ：是换行标记。表示以后的内容移到下一行。它是单向标记，没有 </BR> 。

<B>……</B> ：是粗体标记。可使其中的文字变为粗体。 <H1>……</H1> ：是正文的第一级标题标记。还有第二、三、四、五、六级标题标记，分别为 <H2>……</H2> 、 <H3>……</H3> 、 <H4>……</H4> 、 <H5>……</H5> 和 <H6>……</H6> 。级别越高，文字越小。

<P>……</P> ：是段落标记。它的作用是将其内的文字另起一段显示。段与段之间有一个空行。

10



超文本标记语言的举例

例如 :<html><head><title>例 1</title></head><body><p><font size="4"><b>第一行 </b></font> <br><i><font size="6">第二行 </font></i></p></body></html>

11



7.1.2 网站通常把一系列逻辑上可以视为一个整体的页面叫做网站，或者说，网站就是一个相互链接的网页集合，它们可以共享。网站的概念是相对的，大可以到“雅虎网”和“新浪网”这样的大网站，页面多得无法计数，而且位于多台服务器上；小可以到一些个人网站，可能只有几个网页，仅在一台服务器上占据很小的空间。

网页与网页之间的关系并不是完全相同的。主页是网站中的一个特殊网页，它是在 WWW 上进入网站的第一个网页，其中包含指向其他网页的超链接。通常主页的名称是固定的，例如叫做 index.htm 或 index.html 等。

12



7.1.3 超链接

当使用浏览器上网时，移动鼠标到页面某一地方变成手形时，这个地方就是一个超链接。

超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。含有超链接的文字通常以蓝字底线显示。

在一个网页中用来超链接的对象，可以是一段文本或者是一个图片 .当浏览者单击已经链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。

13



7.1.4 网站制作的步骤

确定主题

收集资料与素材

规划网站结构

设计网页版式

确定网站结构

制作网页元素

插入元件与排版

上传网站

维护与更新

策划与准备

制作阶段

后期工作

14



网站制作的步骤－－确定主题

网站的主题也就是网站的题材，是网站设计首先遇到的问题。

网站的定位要小，内容要精。网站的题材最好选自己擅长或者喜爱的内容。网站名称，是网站设计的一部分，而且是一个关键的要素，和现实生活中一样，网站名称是否正气、响亮、易记，这对网站的形象和宣传推广也有很大影响。

15



网站制作的步骤－－站点建设

1 搜集资料2 网站的整体规划

进行网站的整体规划也就是组织网站的内容并设计其结构。

3 网页设计与制作静态网页的设计与制作为网页添加动态效果注意：下载速度。色彩的搭配。

16



网站制作的步骤－－测试与维护

当网页设计人员制作完所有网站页面之后，需要对所设计的网页进行审查和测试，测试内容包括功能性测试和完整性测试两个方面。所谓功能性测试就是要保证网页的可用性，达到最初的组织设计目标，实现所规定的功能，读者可以方便快速地寻找到所需的内容。网页的完整性测试就是保证页面内容显示正确，链接准确，无差错无遗漏。

网站要注意经常维护更新内容，保持内容的新鲜。

17



7.2 用 FrontPage 制作网页中的主要技术

简介用 FrontPage 制作网页中的主要界面以及基本操作。7.2.1 用FrontPage制作网页 7.2.2 表格 7.2.3 网页版面的设计 7.2.4 超链接的设计 7.2.5 使用交互式按钮来优化网页

18



7.2.1 用 FrontPage 制作网页 FrontPage 2003 自问世以来，一直被公认为是最为优秀的网页制作软件之一。无论设计的是个人站点、还是企业站点， FrontPage 2003 都是创建和管理网站的必备工具。

FrontPage 2003 的启动和退出 FrontPage 2003 的网页视图网页的基本布局网页中插入 Web 组件网页中使用文本网页中使用图片设置网页属性文档保存

19



FrontPage 的启动与关闭

1. FrontPage 2002 的启动选择【开始】 /【程序】 /【 Microsoft FrontPage】菜单命令就

会启动 FrontPage 2002 。如果桌面上创建了 FrontPage 2002 的快捷方式，也可以通过双击 F

rontPage 2002 的快捷方式图标来启动。2. FrontPage 2002 的关闭

选择【文件】 /【退出】 /菜单命令。单击 FrontPage 2002窗口右上角的按钮。双击 FrontPage 2002窗口左上角的按钮。单击 FrontPage 2002窗口左上角的按钮，选择下拉菜单中的【关闭】命令。

按 Alt+F4键。

20



FrontPage 新建界面窗口界面主要由标题栏、菜单栏、工具栏、视图栏、工作区、任务栏、状态栏等部分组成。

标题栏

菜单栏

常用工具栏

格式

工具栏

窗口栏

任务

窗格

21



FrontPage 网页制作界面窗口界面主要由菜单栏、工具栏、工作区、文档

选择选项卡、快速标记选择器、网页视图选项卡等部分组成。

22



网页视图（编辑窗口）

可以用 4种视图方式查看网页的内容：设计视图：允许用户查看文档在最终产品中显示的形式，并

直接在该视图中编辑文本、图形和其他元素。代码视图：可以直接查看、编写和编辑 HTML 标记。拆分视图：对比设计视图和代码视图，审阅和编辑网页内容

。预览视图：预览网页的显示结果（ Internet Explorer 浏

览器来显示当前编辑的网页效果）。

23



网页视图－－设计视图

24



网页视图－－代码视图

25



网页视图－－预览视图

26



FrontPage 2003 视图

网页视图文件夹视图报表视图导航视图超链接视图任务视图

27



FrontPage 2003 视图－－网页视图

在网页视图下编辑一个网页时，可以使用“所见即所得”的工作方式。

28



FrontPage 2003 视图－－文件夹视图

该视图与资源管理器很相似，左边列出了站点的树状结构，右边列出了当前文件夹下的文件。

29



FrontPage 2003 视图－－报表视图

在视图中给出了当前站点的统计数据，包括“所有文件”、“图片”、“未链接的文件”、“链接的文件”、“外部超链接”与“内部超链接”等。

30



FrontPage 2003 视图－－导航视图

在导航视图的左边是文件夹列表，在右边以树形的方式显示导航的结构。

31



FrontPage 2003 视图－－超链接视图

右边显示超链接的关系，可视化显示了网页之间的超链接。

32



FrontPage 2003 视图－－任务视图

在该视图中单击鼠标右键，在弹出的快捷菜单中选择“新建任务”命令即可添加任务。

33



FrontPage 2003 基本制作 –选择网页类型

34



插入 Web 组件

35



插入 Web 组件（续）

插入字幕字幕又称

为流动文字框，在网页中以流动的方式来突出显示某个文本内容。

36




插入悬停按钮插入普通悬停按钮

插入图片悬停按钮

37




插入横幅广告网页中的横幅广告类似于幻灯片的放映，它按照事先设置的时间间隔将一组图片依次显示出来。同时还可以为横幅广告插入超链接，当访问者单击这些图片时就可以打开相应的链接内容。

38




插入站点计数器无论是个人主页还是公司网站都希望知道有多少人次访问过自己的网站，这时就需要用到站点计数器。

FrontPage 内置了多种样式的站点计数器，除此之外还可以使用图片自定义站点计数器。

39



FrontPage 2003 基本制作 –使用文本

设置段落格式插入项目符号和编号插入网页横幅插入水平线插入时间标记

40



使用文本（续）

设置段落格式如果要对网页中的文本内容进行对齐方式、缩进量、段落格式的设置可以通过格式工具栏进行。

右对齐编号减少缩进量

居中对齐两端对齐

项目符号增加缩进量

左对齐

41




插入项目符号和编号使用自动编号与项目符号等段落格式设置文档，可以使其结构清晰、一目了然。

42




插入网页横幅若想快速为网页插入标题，可使用网页横幅，但单独的

网页无法插入网页横幅。

43




插入水平线在网页制作中，常常需要插入水平线，用来分隔文本或突出重点。

44




插入时间标记时间标记是用来

显示上次编辑或最近一次修改网页的时间，访问者可通过时间标记来了解站点上的信息在上次访问之后是否更新过。

45



FrontPage 2003 基本制作 –使用图片

插入图片插入剪贴画；导入外部图片设置图片属性设置图片外观属性；设置图片常规属性；设置图片视频属性

对图片进行处理使用图片工具栏编辑图片；在图片上添加文本；创建缩略图

46



使用图片（续）

插入剪贴画 Office XP 提供了一个剪辑库，其中包含了许多剪贴画，

用户可以将它们插入到页面中应用。

47



使用图片（续）

导入外部图片在实际应用中使用最多的还是导入的外部图片。

48



使用图片工具栏编辑图片

使用图片工具栏就可以对图片进行亮度与对比度的调整，还可对图片进行裁剪、旋转与翻转等操作。

插入文件

中的图片

自动缩略图

上

移

一

层

增

加

亮

度

颜色

重

新

取

样

长方形热点

向

左

旋

转

水

平

翻

转

子增加对比度

设置图片格式

多边形热点

裁

剪

向

右

旋

转下

移

一

层垂直

翻

转降低对

比度

线

型设置透明色

突出显示热

点文

本绝

对

定

位降

低

亮

度

凹

凸

效

果

选

择圆

形

热

点

子

还

原子

49



使用图片工具栏编辑图片（续）

调整亮度

适当增加亮度适当减小亮度

50




调整对比度

增加适当对比度减少适当对比度

51




在图片上添加的文字图片上移一层图片下移一层

设置透明色后设置透明色前冲蚀模式效果

52



设置网页属性

在工作区中单击鼠标右键，选择“网页属性”菜单，可以对网页的各种总体属性进行设计。

53



文档保存

选择“文件” -“保存”菜单。出现“保存嵌入式文件”对话框。该对话框说明：网页依次需要二个文件，才能正常工作。

54



7.2.2 表格

插入表格编辑表格编辑单元格关于表格宽度的三个选项说明用于表格单元格的三个繁琐规则

55



插入表格

使用常用工具栏按钮创建表格

用菜单命令创建表格，选择“表格” -“ 插入” -“表格”菜单

手绘表格，选择“表格” -“手绘表格”菜单

56



插入表格（续）

57



编辑表格

设置表格属性选择“表格” -“属性” -“表格”菜单

单击要更改的表格的内部，在鼠标右键菜单中选择“表格属性”

58



编辑表格（续）

在快速标记选择器中，编辑表格。

擦除

插入行

手绘表格

插入列合并单元格

靠上对齐

靠下对齐

平均分布各列填充颜色

表格自动套用格式

删除单元格拆分单

元格

居中对齐

平均分布各行

根据内容调整表格

表格自动套用格式组合

向下填充

向右填充

59



编辑单元格

设置单元格属性（对齐方式，大小，边框与背景，跨距）

编辑单元格（插入单元格，删除单元格，合并单元格，拆分单元格，改变行列大小，插入行与列，移动或复制行与列）

60



关于表格宽度的三个选项说明

不指定宽度以像素为单位指定宽度按百分比指定宽度

61



用于表格单元格的三个规则

列宽度的总和应该等于表格宽度

内容至上空单元格可以消失

62



用表格布局网页

例图

63



7.2.3 网页版面的设计

为了达到一定的效果，必须进行版面的设计。根据网站的总体规划和风格，将网页分割成几个区域，然后再每个区域中填写相应的内容。

网页布局类型使用框架网页

64



网页布局－－“ T” 形结构布局

这是网页设计中应用最广泛的一种布局方式，是初学者最容易上手的布局方法。

65



网页布局－－“ T” 形结构布局（续）

66



网页布局－－“口”型结构布局

页面上、下、左、右有广告条、主菜单、友情连接等，将主要内容放在页面的中间布局方式。

67



网页布局－－ " 三 " 型结构布局

这种布局页面上横向有一些色块，将页面整体分割为几部分，色块可以是颜色块，也可以放广告条。

68



网页布局－－对称对比布局

该布局是采取左右或者上下对称的方式，一半深色，一半浅色。一般用于设计型站点。

69



网页布局－－ POP 布局

POP引自广告术语，就是指页面布局象一张宣传海报，以一张精美图片作为页面的设计中心。

70



其他布局

71



使用布局表格

FrontPage 提供了功能强大的布局表格功能，可以让用户方便的进行版面的设计。

框架网页可以在一个框架中显示各个分类的链接（即目录框架），单击其中不同的超链接时在另一个框架中显示目标网页（即目标框架）。

72



使用布局表格（续）

1 创建布局表格

73



使用布局表格（续）

2 绘制布局表格 3 设置表格属性，如右图

4 添加单元格 5 单元格的调整 6 设置单元格

74



7.2.4 超链接的设计

插入超链接创建图片热点超链接

75



超链接的概念

超链接也被称作超级链接，是指从一个位置指向另一个目标的链接。通常，超链接的目标是其他网页或本网页中其他位置上的内容，也可以是图像、多媒体文件、电子邮件地址或一个可执行的程序等等。

超链接也被称作超级链接，是指从一个位置指向另一个目标的链接。通常，超链接的目标是其他网页或本网页中其他位置上的内容，也可以是图像、多媒体文件、电子邮件地址或一个可执行的程序等等。

超链接目标：当单击超链接源时会打开网页、文件或程序等，这些被称作超链接目标。

76



文本超链接与图像超链接

根据链接载体的不同，可以将超链接分为图像链接和文本链接。

图像链接：以图像作为载体的超链接，通过鼠标指针的形状变化可以判断是否使用了超链接。

文本链接：以文本作为载体的超链接。

77



指向不同类别目标的超链接

指向当前站点中的网页或文件的文本超链接

指向本地存储器中文件的文本超链接

指向新建网页的超链接

指向互联网上的网页或文件的文本超链接

78



插入超链接

1 选择需要超链接的一些文字或一张图片

2 单击“插入” -“ 超链接”菜单或单击鼠标右键菜单中的“超链接”选项。

79



创建图像热点超链接

1 在网页中插入图片2 在“图片”工具栏上，单击与您所需形状相对应

的“热点”按钮 3 自动弹出“创建超链接”对话框4 设定超链接目标

80



7.2.5 使用交互式按钮来优化网页

1 选择“插入” -“”菜单 2 设定“交互式按钮”的各项设置

81



7.3 站点的创建和发布

简单介绍创建站点的方法，网站管理的主要界面的介绍和发布站点的方法。

7.3.1 创建站点 7.3.2 网站管理 7.3.3 发布站点

82



7.3.1 创建站点

1 选择“文件” -“新建”菜单

2 在网站模板对话框中选择一种模板产生网站框架

3 指定新网站的位置 4 单击“确定”按钮

83



创建站点（续）

84



7.3.2 网站管理

网站由 6-种视图，分别从几个方面对网站进行理。可以使用“远程网站”视图发布整个网站，或有选择地发布个别文件。

85



7.3.3 发布站点

发布站点前必须申请主页空间及域名。网页空间有免费和收费两种，免费主页空间一般在申请免费主页时提供，其空间大小和运行的支持条件会受一定限制；收费主页空间一般由网站托管机构提供，其空间大小及支持条件可供用户根据需要进行选择。

86



发布站点（续）

1 选择“远程网站”视图，设定远程网站属性对话框

2 选择远程 Web 服务器类型和远程网站位置

3 单击确定按钮

Documents

网页设计基础 -- FrontPage 2003 篇