08 网页制作（二）.ppt

第1页：网页制作（二）封面

本课件由计算机与信息管理中心制作，主题为网页制作（二），包括网页布局、外观统一、发布网站与网页特效制作。

第2页：本讲内容提要

本讲内容提要如下。

• 网页布局：表格布局、框架组织页面
• 网页外观的统一方法：主题、共享边框、导航栏
• 发布网站
• 网页特效制作：动态 GIF 素材的制作、JavaScript 语言

第3页：表格与框架布局

表格和框架是网页布局的常用工具。

表格

在网页制作中的作用已经超越了传统意义上存放数据的范畴，成为组织数据、排列网页元素空间位置最为灵活的方法

框架

将浏览器窗口划分为功能独立的多个区域，每个框架显示一个网页内容，并且通过框架中的超链接可以更改显示在另一个框架中的网页文件

第4页：表格的创建

创建表格有以下三种方法。

菜单命令“表格”/“手绘表格”

先绘制出表格的轮廓，然后绘制表格的单元格，由此可以创建一个不规则的表格

使用“插入表格”按钮

通过指定列数和行数来快速创建一个规则的空表

菜单命令“表格”/“插入”/“表格”

用指定表格属性的方式创建表格，属性包括行数和列数、表格宽度、对齐方式、边框粗细，以及单元格边距和间距

第5页：表格的编辑

表格的编辑包含以下操作。

• 单元格的合并与拆分
• 设置单元格属性
• 设置表格属性
• 表格在网页中的编排方式
• 单元格内文本的编排方式
• 创建不规则的表格

第6页：表格布局方法

要用表格来布局网页，首先应决定表格在水平方向和垂直方向上所需的单元格数量，然后为需要跨越多行或多列的对象合并单元格。大多数网页布局采用了带有不可见边框的表格。

第7页：框架与框架集

框架是一种将浏览器窗口划分为功能独立的多个区域的常用方法。框架集定义每个框架的大小、位置、名称和初始网页，普通网页提供每个框架的内容。

框架集是一种特殊的网页，该网页定义了整体的框架布局，但不提供实际内容。

第8页：框架的创建与保存

框架的创建和保存步骤如下。

• 新建框架网页：“文件”/“新建”/“网页”，选择“框架网页”标签
• 在框架中加入网页：1）建立新网页；2）指定已经存在的网页
• 保存框架页：“文件”/“另存为”
• 可设置框架的边框、滚动条等外观属性

第9页：框架属性设置

通过“框架”/“框架属性”可设置以下项目。

• 网页名称、初始网页
• 框架大小、边距
• 滚动条、框架的可调整性、间距
• 相对大小可按比例设置，例如 30% 与 70%、20% 与 80%，或相对量 1 和 4、3 和 7

第10页：框架之间的超链接

在框架网页中，单击某框架内网页上的超链接时，被超链接所指定的网页通常在另一个框架中打开，这个框架称为目标框架，可通过“插入”/“超链接”设置。

第11页：网页一致性外观

给予网页一致性外观可使用以下三种手段。

• 主题
• 共享边框
• 导航栏

第12页：主题

主题是一组可应用在网页上的设计元素和颜色方案。

• 包括字体、图形、背景、导航栏、水平线和其他网页元素
• 主题赋予网页一致和引人注目的外观，是快速加入精彩网页内容和赋予专业外观的方法
• FrontPage 包含很多可以立即使用的主题，也可以修改这些主题以满足个体需求
• 操作：“格式”/“主题”，可加入主题、实现主题、修改主题

第13页：共享边框

共享边框是站点上一个或多个网页共享的区域，可以出现在一个网页的顶端（类似于网页页眉）、底端（类似于网页页脚）、左边或右边的区域，可通过“格式”/“共享边框”设置。

第14页：导航栏

导航栏是一组文本或按钮超链接，通过它们浏览者可以到达站点中的某一个网页。

• 典型的导航栏具有指向站点主页和主要上层网页的按钮
• 当在网页中添加一个导航栏时，FrontPage 将根据导航视图下设置的导航结构自动生成导航超链接

第15页：创建和使用表单

表单能够向网页中添加文本框、单选按钮、复选框、按钮等用户界面控件。

• 每个网页可以包含一个或多个表单，每个表单占据网页中的一个特定区域
• 表单中必须有一个元素作为“提交”按钮
• 单击“提交”按钮后，浏览器将数据传送给服务器，站点服务器需要某种程序读取这些数据并进行处理
• 程序可能将数据保存在文件或数据库中，也可能作为电子邮件发出等等

第16页：网页层次组件

组件是 FrontPage 提供的智能对象，制作人员使用它们来增加站点的功能。大部分组件需要将网页保存到 FrontPage 站点才会生效，或者需要站点服务器运行特殊的软件。

横幅广告管理器

自动产生动画效果，类似街道上的广告牌

滚动字幕

在一个方框中，里面的文字不停地沿一个方向滚动或来回滚动

悬停按钮

一种可以变化的按钮

网站计数器

显示站点被访问的次数

第17页：发布站点

发布站点的过程如下。

准备工作

在浏览器上进行预览，在报表视图下检查所有文件的状态，选择要发布的文件

发布站点

使用菜单命令“文件”/“发布站点”

示例中可通过 http://ccf.tsinghua.edu.cn/student/00class 或 ftp://ccf.tsinghua.edu.cn/student/00class 发布。

第18页：免费网页存放空间

国内外有一些公司提供免费服务，在他们的服务器上提供一定的硬盘空间存放网页。常见站点如下。

• 广州网易：http://www.nease.net
• 东方网景：http://www.east.cn.net
• 网虫之家：http://home.hn.cninfo.net
• 首都在线：http://www.263.net
• 中国人：http://www.chinaren.net

第19页：动态GIF图片制作原理

动画的形成是由连续显示数张图片所造成的视觉效果，其原理与卡通影片一样。

• 可以设定每张图片所停滞时间，从而造成不同的动画显示速度
• 先使用支持 GIF 格式的绘图软件制作或扫描得到连续图像，分别储存成不同档名的 GIF 档
• 再使用 GIF Construction Set 或 Ulead GIF Animator 等动画制作软件整合这些图像，并针对每张图像设定显示停滞时间等属性

第20页：制作动态GIF与横幅

动态 GIF 图片制作的两种常用做法如下。

使用向导快速制作动画

启动 Ulead GIF Animator 时显示启动向导引导创建动画；素材可用 Photoshop、Fireworks、Freehand 等软件逐帧刻画，再通过动画向导制作出专业级动画

快速制作横幅

先创建一个空白的动画文档，然后在图层菜单中选择添加横幅文字，子菜单中提供简易、霓虹、渐变、边框、自定义动画五种横幅效果

第21页：用JavaScript制作网页特效

许多主页的特殊效果都是用 JavaScript 来装点的。不懂编程的用户可以借助现成的 JavaScript 模式程序。

• 呼吸小秘书属于这类软件，包含窗口、鼠标、文字、菜单、其他五类共 27 种特效
• 可以先对已生成的代码进行效果预览，也可以直接修改代码
• 修改完成后复制到剪切板，即可插入到目标页面中

第22页：网页特效示例

本页为网页特效的效果演示，展示由 JavaScript 代码生成的动态效果在页面中的实际呈现。

第23页：参考资料

本讲的参考资料如下。

参考教材

教材第 9 章

上机指导手册第 7、8、9 章

网站资源

第八次大课电子讲稿（网页制作）

基本操作演示课件

常见问题列表（FAQ 分类）

优秀作业赏析（样例素材）