计算机文化基础计算机与信息管理中心网页制作（二）
计算机文化基础 http://ccf.tsinghua.edu.cn 2
内容提要
表格布局
框架组织页面网页布局网页外观的统一方法
主题、共享边框、导航栏发布网站网页特效制作
动态 GIF素材的制作
JavaScript语言计算机文化基础 http://ccf.tsinghua.edu.cn 3
网页的布局表格和框架是网页布局的常用工具。
表格在网页制作中的作用已经超越了传统意义上的存放数据，表格已成为组织数据、排列网页元素空间位置最为灵活的方法。
框架也是一种常用的网页布局方法，它将浏览器窗口划分为功能独立的多个区域，每个框架显示一个网页内容，并且通过框架中的超链接可以更改显示在另一个框架中的网页文件。
计算机文化基础 http://ccf.tsinghua.edu.cn 4
表格的创建菜单命令,表格,/“手绘表格,
使用,插入表格,按钮菜单命令,表格,/“插入,/“表格,
先绘制出表格的轮廓，然后绘制表格的单元格,由此可以创建一个不规则的表格。
用指定表格属性的方式创建表格，
这些属性包括表格的行数和列数、
表格宽度、对齐方式、边框粗细，
以及单元格边距和间距。
通过指定列数和行数来快速创建一个规则的空表。
计算机文化基础 http://ccf.tsinghua.edu.cn 5
表格的编辑单元格的合并与拆分设置单元格属性设置表格属性表格在网页中的编排方式单元格内文本的编排方式创建不规则的表格计算机文化基础 http://ccf.tsinghua.edu.cn 6
表格布局要用表格来布局网页，首先应决定表格在水平方向和垂直方向上所需的单元格数量，然后为需要跨越多行或多列的对象合并单元格。
大多数网页布局采用了带有不可见边框的表格。
计算机文化基础 http://ccf.tsinghua.edu.cn 7
框架布局框架是一种将浏览器窗口划分为功能独立的多个区域的常用方法。 框架集定义每个框架的大小、位置、名称和初始网页，普通网页提供每个框架的内容。一个框架的超链接可以更改显示在另一个框架中的网页。
框架集 是一种特殊的网页，该网页定义了整体的框架布局，但不提供实际内容。
框架名称 初始网页
rtop com-t.html
rbottom com-m.html
Left com-1.htm
框架集计算机文化基础 http://ccf.tsinghua.edu.cn 8
框架的创建和保存新建框架网页框架组成在框架中加入网页边框、滚动条、网页
1）建立新网页
2）指定已经存在的网页保存框架页
“文件” /“另存为”
“文件” /“新建” /“网页”,选择“框架网页”
标签计算机文化基础 http://ccf.tsinghua.edu.cn 9
框架属性设置框架 /框架属性
网页名称
初始网页
框架大小
边距
滚动条
框架的可调整性
间距
30% 70% 80%
20%
相对大小,1和 4
相对大小,3和 7
计算机文化基础 http://ccf.tsinghua.edu.cn 10
框架之间的超链接在框架网页中，单击某框架内网页上的超链接时，被超链接所指定的网页通常在另一个框架中打开，这个框架称为目标框架。
插入 /超链接计算机文化基础 http://ccf.tsinghua.edu.cn 11
给予网页一致性外观主题共享边框导航栏计算机文化基础 http://ccf.tsinghua.edu.cn 12
主题主题 是一组可应用在网页上的设计元素和颜色方案，其中包括字体、
图形、背景、导航栏、水平线和其他网页元素。
主题赋予网页一致和引人注目的外观。使用主题是快速、容易地加入精采的网页内容和赋予网页专业外观的方法。 FrontPage 包含很多可以立即使用的主题，也可以修改这些主题以满足个体的需求。
“格式” /“主题”
加入主题
实现主题
修改主题计算机文化基础 http://ccf.tsinghua.edu.cn 13
共享边框共享边框是站点上一个或多个网页共享的区域。
共享边框可以出现在一个网页的顶端（类似于网页页眉）、底端（类似于网页页脚）、左边或右边的区域。
“格式” /“共享边框”
计算机文化基础 http://ccf.tsinghua.edu.cn 14
导航栏导航栏 是一组文本或按钮超链接，通过它们浏览者可以到达站点中的某一个网页。
典型的导航栏具有指向站点主页和主要上层网页的按钮。当我们在网页中添加一个导航栏时，
FrontPage 将根据导航视图下设置的导航结构自动生成导航超链接。
计算机文化基础 http://ccf.tsinghua.edu.cn 15
创建和使用表单表单能够向网页中添加文本框、
单选按钮、复选框、按钮等用户界面控件。
每个网页可以包含一个或多个表单，每个表单占据网页中的一个特定区域。
表单中必须有一个元素作为
,提交,按钮。
单击,提交,按钮后，浏览器将数据传送给服务器，站点服务器需要某种程序读取这些数据并进行处理。程序可能将数据保存在文件或数据库中，也可能作为电子邮件发出等等。
计算机文化基础 http://ccf.tsinghua.edu.cn 16
使用网页层次组件组件是 FrontPage提供的智能对象，制作人员使用它们来增加站点的功能。
大部分组件需要将网页保存到 FrontPage站点才会生效，
或者需要站点服务器运行特殊的软件。
横幅广告管理器,自动产生动画效果,类似街道上的广告牌滚动字幕,在一个方框中,里面的文字不停地沿一个方向滚动或来回滚动悬停按钮,一种可以变化的按钮网站计数器,显示站点被访问的次数计算机文化基础 http://ccf.tsinghua.edu.cn 17
发布站点准备工作：在浏览器上进行预览，在报表视图下，检查所有文件的状态，选择要发布的文件。
发布站点：使用菜单命令,文件,/,发布站点,。
http://ccf.tsinghua.edu.cn/student/00class
ftp://ccf.tsinghua.edu.cn/student/00class
计算机文化基础 http://ccf.tsinghua.edu.cn 18
免费网页存放空间广州网易,http://www.nease.net
东方网景,http://www.east.cn.net
网虫之家,
http://home.hn.cninfo.net
首都在线,http://www.263.net
中国人,http://www.chinaren.net
国内外有一些公司提供一种免费服务，在他们的服务器上提供一定的硬盘空间，存放网页。
计算机文化基础 http://ccf.tsinghua.edu.cn 19
动态 gif图片制作动画的形成是由连续显示数张图片所造的视觉效果，其原理与卡通影片是一样的，我们可以设定每张图片所停滞时间，
从而造成不同的动画显示速度。
当要制作一张动画时，可使用有支持 GIF格式的绘图软件来制作图像 (或扫描进来的影像 )，将这些构成动画的连续数张图像分别储存成不同档名的 GIF档，然後再使用动画制作软件，如 GIF Construction Set或 Ulead GIF Animator动画制作软件来整合这些图像，针对每张图像设定相关的属性
(如显示的停滞时间 )，以完成一幅动画的制作，且在这些软件中就可以直接观看动画的显示，
计算机文化基础 http://ccf.tsinghua.edu.cn 20
动态 gif图片制作
1） 使用向导快速制作动画,在启动 ulead gifanimator 程序时,会显示一个启动向导来引导我们创建动画 。 在制作
GIF动画前要找素材,同时也可以自己设计素材 。 我们可以通过一些图像处理功能软件来对动画的每一帧进行细致的刻画,例如 Photoshop,Firkworks和 Freehand等,然后通过 ulead GIF Animator中的动画向导功能就可以制作出专业级的动画 。
2）快速制作横幅,先创建一个空白的动画文档，然后在图层菜单中选择添加横幅文字，在子菜单中可以选择五种横幅效果：简易、霓虹、渐变、边框、
自定义动画。
计算机文化基础 http://ccf.tsinghua.edu.cn 21
网页特效制作许多主页的特殊效果都是用 Javascript来装点的。不懂点编程知识人要想使用这些特效就有些困难了，因此国内共享软件作者便写了许多便于使用的 Javascript模式程序，呼吸小秘书就属于这类软件。
呼吸小秘书包含了窗口、鼠标、文字、菜单、其他等五类共
27种特效。
为了便于用户的使用您既可以先对已生成的代码进行效果预览，也可以直接修改代码。修改完成后复制到剪切板上，就可以插入到目标页面中了。
计算机文化基础 http://ccf.tsinghua.edu.cn 22
网页特效制作 http://go1.163.com/gyk1/texiao/javascript/index.htm
计算机文化基础 http://ccf.tsinghua.edu.cn 23
参考资料参考教材网站资源
教材第 9章
上机指导手册第 7,8,9章
第八次大课电子讲稿（网页制作）
基本操作演示课件
常见问题列表（ FAQ分类）
优秀作业赏析（样例素材）
计算机文化基础 http://ccf.tsinghua.edu.cn 2
内容提要
表格布局
框架组织页面网页布局网页外观的统一方法
主题、共享边框、导航栏发布网站网页特效制作
动态 GIF素材的制作
JavaScript语言计算机文化基础 http://ccf.tsinghua.edu.cn 3
网页的布局表格和框架是网页布局的常用工具。
表格在网页制作中的作用已经超越了传统意义上的存放数据，表格已成为组织数据、排列网页元素空间位置最为灵活的方法。
框架也是一种常用的网页布局方法，它将浏览器窗口划分为功能独立的多个区域，每个框架显示一个网页内容，并且通过框架中的超链接可以更改显示在另一个框架中的网页文件。
计算机文化基础 http://ccf.tsinghua.edu.cn 4
表格的创建菜单命令,表格,/“手绘表格,
使用,插入表格,按钮菜单命令,表格,/“插入,/“表格,
先绘制出表格的轮廓，然后绘制表格的单元格,由此可以创建一个不规则的表格。
用指定表格属性的方式创建表格，
这些属性包括表格的行数和列数、
表格宽度、对齐方式、边框粗细，
以及单元格边距和间距。
通过指定列数和行数来快速创建一个规则的空表。
计算机文化基础 http://ccf.tsinghua.edu.cn 5
表格的编辑单元格的合并与拆分设置单元格属性设置表格属性表格在网页中的编排方式单元格内文本的编排方式创建不规则的表格计算机文化基础 http://ccf.tsinghua.edu.cn 6
表格布局要用表格来布局网页，首先应决定表格在水平方向和垂直方向上所需的单元格数量，然后为需要跨越多行或多列的对象合并单元格。
大多数网页布局采用了带有不可见边框的表格。
计算机文化基础 http://ccf.tsinghua.edu.cn 7
框架布局框架是一种将浏览器窗口划分为功能独立的多个区域的常用方法。 框架集定义每个框架的大小、位置、名称和初始网页，普通网页提供每个框架的内容。一个框架的超链接可以更改显示在另一个框架中的网页。
框架集 是一种特殊的网页，该网页定义了整体的框架布局，但不提供实际内容。
框架名称 初始网页
rtop com-t.html
rbottom com-m.html
Left com-1.htm
框架集计算机文化基础 http://ccf.tsinghua.edu.cn 8
框架的创建和保存新建框架网页框架组成在框架中加入网页边框、滚动条、网页
1）建立新网页
2）指定已经存在的网页保存框架页
“文件” /“另存为”
“文件” /“新建” /“网页”,选择“框架网页”
标签计算机文化基础 http://ccf.tsinghua.edu.cn 9
框架属性设置框架 /框架属性
网页名称
初始网页
框架大小
边距
滚动条
框架的可调整性
间距
30% 70% 80%
20%
相对大小,1和 4
相对大小,3和 7
计算机文化基础 http://ccf.tsinghua.edu.cn 10
框架之间的超链接在框架网页中，单击某框架内网页上的超链接时，被超链接所指定的网页通常在另一个框架中打开，这个框架称为目标框架。
插入 /超链接计算机文化基础 http://ccf.tsinghua.edu.cn 11
给予网页一致性外观主题共享边框导航栏计算机文化基础 http://ccf.tsinghua.edu.cn 12
主题主题 是一组可应用在网页上的设计元素和颜色方案，其中包括字体、
图形、背景、导航栏、水平线和其他网页元素。
主题赋予网页一致和引人注目的外观。使用主题是快速、容易地加入精采的网页内容和赋予网页专业外观的方法。 FrontPage 包含很多可以立即使用的主题，也可以修改这些主题以满足个体的需求。
“格式” /“主题”
加入主题
实现主题
修改主题计算机文化基础 http://ccf.tsinghua.edu.cn 13
共享边框共享边框是站点上一个或多个网页共享的区域。
共享边框可以出现在一个网页的顶端（类似于网页页眉）、底端（类似于网页页脚）、左边或右边的区域。
“格式” /“共享边框”
计算机文化基础 http://ccf.tsinghua.edu.cn 14
导航栏导航栏 是一组文本或按钮超链接，通过它们浏览者可以到达站点中的某一个网页。
典型的导航栏具有指向站点主页和主要上层网页的按钮。当我们在网页中添加一个导航栏时，
FrontPage 将根据导航视图下设置的导航结构自动生成导航超链接。
计算机文化基础 http://ccf.tsinghua.edu.cn 15
创建和使用表单表单能够向网页中添加文本框、
单选按钮、复选框、按钮等用户界面控件。
每个网页可以包含一个或多个表单，每个表单占据网页中的一个特定区域。
表单中必须有一个元素作为
,提交,按钮。
单击,提交,按钮后，浏览器将数据传送给服务器，站点服务器需要某种程序读取这些数据并进行处理。程序可能将数据保存在文件或数据库中，也可能作为电子邮件发出等等。
计算机文化基础 http://ccf.tsinghua.edu.cn 16
使用网页层次组件组件是 FrontPage提供的智能对象，制作人员使用它们来增加站点的功能。
大部分组件需要将网页保存到 FrontPage站点才会生效，
或者需要站点服务器运行特殊的软件。
横幅广告管理器,自动产生动画效果,类似街道上的广告牌滚动字幕,在一个方框中,里面的文字不停地沿一个方向滚动或来回滚动悬停按钮,一种可以变化的按钮网站计数器,显示站点被访问的次数计算机文化基础 http://ccf.tsinghua.edu.cn 17
发布站点准备工作：在浏览器上进行预览，在报表视图下，检查所有文件的状态，选择要发布的文件。
发布站点：使用菜单命令,文件,/,发布站点,。
http://ccf.tsinghua.edu.cn/student/00class
ftp://ccf.tsinghua.edu.cn/student/00class
计算机文化基础 http://ccf.tsinghua.edu.cn 18
免费网页存放空间广州网易,http://www.nease.net
东方网景,http://www.east.cn.net
网虫之家,
http://home.hn.cninfo.net
首都在线,http://www.263.net
中国人,http://www.chinaren.net
国内外有一些公司提供一种免费服务，在他们的服务器上提供一定的硬盘空间，存放网页。
计算机文化基础 http://ccf.tsinghua.edu.cn 19
动态 gif图片制作动画的形成是由连续显示数张图片所造的视觉效果，其原理与卡通影片是一样的，我们可以设定每张图片所停滞时间，
从而造成不同的动画显示速度。
当要制作一张动画时，可使用有支持 GIF格式的绘图软件来制作图像 (或扫描进来的影像 )，将这些构成动画的连续数张图像分别储存成不同档名的 GIF档，然後再使用动画制作软件，如 GIF Construction Set或 Ulead GIF Animator动画制作软件来整合这些图像，针对每张图像设定相关的属性
(如显示的停滞时间 )，以完成一幅动画的制作，且在这些软件中就可以直接观看动画的显示，
计算机文化基础 http://ccf.tsinghua.edu.cn 20
动态 gif图片制作
1） 使用向导快速制作动画,在启动 ulead gifanimator 程序时,会显示一个启动向导来引导我们创建动画 。 在制作
GIF动画前要找素材,同时也可以自己设计素材 。 我们可以通过一些图像处理功能软件来对动画的每一帧进行细致的刻画,例如 Photoshop,Firkworks和 Freehand等,然后通过 ulead GIF Animator中的动画向导功能就可以制作出专业级的动画 。
2）快速制作横幅,先创建一个空白的动画文档，然后在图层菜单中选择添加横幅文字，在子菜单中可以选择五种横幅效果：简易、霓虹、渐变、边框、
自定义动画。
计算机文化基础 http://ccf.tsinghua.edu.cn 21
网页特效制作许多主页的特殊效果都是用 Javascript来装点的。不懂点编程知识人要想使用这些特效就有些困难了，因此国内共享软件作者便写了许多便于使用的 Javascript模式程序，呼吸小秘书就属于这类软件。
呼吸小秘书包含了窗口、鼠标、文字、菜单、其他等五类共
27种特效。
为了便于用户的使用您既可以先对已生成的代码进行效果预览，也可以直接修改代码。修改完成后复制到剪切板上，就可以插入到目标页面中了。
计算机文化基础 http://ccf.tsinghua.edu.cn 22
网页特效制作 http://go1.163.com/gyk1/texiao/javascript/index.htm
计算机文化基础 http://ccf.tsinghua.edu.cn 23
参考资料参考教材网站资源
教材第 9章
上机指导手册第 7,8,9章
第八次大课电子讲稿（网页制作）
基本操作演示课件
常见问题列表（ FAQ分类）
优秀作业赏析（样例素材）
