07 网页制作（一）.ppt

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

本课件由计算机与信息管理中心制作，主题为网页制作（一），主要介绍 FrontPage 网页与网站制作方法。

第2页：本讲内容提要

本讲内容提要如下。

• 基本网页编辑
• 图形的插入和图形格式
• 创建超链接（超链接、书签、热点）
• 网页的布局（表格和框架）
• 创建和使用表单
• 使用网页层次组件
• FrontPage 网页与网站制作的基本步骤与网站创建方法

第3页：网站制作作业要求

网站制作作业的要求如下。

• 内容选题
• 要提交网页制作报告
• 可以以团队形式完成该作业，团队规模不超过 3 人
• 所有的文件（网页文件、素材文件、网页制作报告）要求用 WinZip 打包压缩成一个 .zip 文件，从网站提交

第4页：网页与主页

浏览器与 Web 服务器之间是以页为单位来传送信息。

网页（Web Page）

站点中的具体页面，例如 http://www.tsinghua.edu.cn/docs/cindex.html

主页（Home Page）

站点的入口页面，例如 http://www.tsinghua.edu.cn

第5页：HTML简介

HTML（HyperText Markup Language）中的命令格式需要放在尖括号中。以下是一段简单网页源码的结构。

• <HTML> 标识文档开始与结束
• <HEAD> 与 <TITLE> 定义浏览器标题栏文字
• <BODY> 与 <H1> 定义正文内容与一级标题

第6页：网页与网站的关系

网页通常成组出现，并且这组网页之间通过超链接相互组织成为反映某个主题的网站。

• 提高下载速度
• 超文本地址引用方便
• Web 页没有固定的长度

第7页：网站制作步骤

网站制作按以下步骤进行。

• 选择主题
• 规划网页（结构与链接关系）
• 组织素材
• 选择视觉外观
• 设计有效的页面布局
• 制作具体网页
• 发布网站信息

第8页：网站的三种基本结构

网站是由网页组成的，网页之间由超链接连接，其连接方式有三种。

线性网站

一页连接一页

树状网站

分层排列

非线性网站

上述两种网站的结合

第9页：网页制作的具体步骤

网页制作与发布的具体步骤如下。

• 可利用任何一种文字处理软件编辑 Web 文档（推荐：记事本）
• Web 文档以纯文本格式存放，取名为 *.html 或 *.htm，其中插入的 HTML 语言只有用浏览器才能被解释翻译
• 在浏览器中使用文件菜单打开命令，可在本地机浏览 Web 文档
• 完成编辑后，可利用 FTP 将文件及其所用到的媒体素材文件传送到某台公共 Web 服务器
• 人人均可在浏览器中 URL 处键入地址，实现异地浏览该 Web 文档
• 一旦对该 Web 文档内容进行更新，须更新它所在 Web 服务器上的相关文档

第10页：网页的基本分类

以网页的角度来看，一个网站中的众多网页主要可以分成下列两层。

导航层

承担站内导航与索引作用的页面

内容层

个人主页、兴趣爱好、个人相册、个人收藏等具体内容的页面

第11页：网站创建的基本方法

网站创建有以下几种基本方法。

• 最简单的方法：直接在网页视图中制作每一个网页文件
• 将本地机中的某个文件夹指定为 FrontPage 站点，利用 Explorer 管理这些网页
• 使用真实的站点服务器

第12页：认识FrontPage

FrontPage 是一种“所见即所得”的网站管理和网页制作工具，FrontPage 2000 属于 Office 2000 家族成员，其主要功能如下。

• 新建和修改一个网页
• 新建一个站点
• 在网页中插入一些动态元素
• 设置动态效果
• 设置网页过渡效果
• 可以直接导入 Office 其他工具的文件
• 提供网站管理信息和统计资料

第13页：FrontPage的六种视图

FrontPage 2000 提供了六种视图方式来实现网页编辑和网站创建、管理两大功能。

• 只有网页视图是用来编辑网页的
• 其他五种视图都是用来创建和管理站点的，其所做的相关设置针对整个站点
• 选择不同的视图方式，右边的编辑区中会显示不同的内容

第14页：网页视图

网页视图负责网站内个别网页的编辑，提供三种显示方式。

普通视图

“所见即所得”的编辑环境

HTML 视图

编辑和查看 HTML 源代码的环境

预览视图

IE 浏览器的预览环境

第15页：文件夹视图

文件夹视图类似 Windows 资源管理器，显示站点的所有文件和文件夹，在此视图方式下可进行文件和文件夹的新建、复制、删除、剪切、重命名、修改属性等操作。

第16页：报表视图

报表视图提供 14 种报表，帮助使用者了解站点的情况。

第17页：导航视图

导航视图用于记录站点结构，可直观查看各网页在站点中的层级位置。

第18页：超链接视图

超链接视图提供基于超链接的结构分析，以任意网页为中心，形象地说明通过超链接相连的其他网页，从微观的角度展示站点的结构。

第19页：任务视图

任务视图用于站点任务的管理。当多人同时编写一个站点时，可通过任务视图为各个成员分配任务，协调成员之间的工作。

第20页：新建网页与录入文本

基本网页编辑即可以在站点中创建新网页，也可以创建独立的网页。

• Microsoft FrontPage 内置的各类模板可以帮助创建不同类型的网页
• 网页视图中进行文本的录入和 Word 类似
• 也可以在网页中插入任何一种基于文本的文件，包括 .htm 文件、.asp 文件、.rtf 文件和 .txt 文件，以及任何 Microsoft Office 文档

第21页：设置文本格式

在 FrontPage 中可以像使用 Word 的方式来设置文本格式，也可插入特殊网页元素。

• 设置文本格式：更改字体、大小、样式、颜色、段落间距和文本的垂直位置，以及添加下划线等效果
• 插入菜单可以插入四种类型的特殊元素：换行符、水平线、符号和注释

第22页：项目符号与背景设置

基本网页编辑还包含以下功能。

• 使用项目符号和编号组织数据，使数据层次分明、重点突出
• 使用浏览器预览网页
• 使用背景色和背景音乐

第23页：三种图形格式对比

网页中常用的图形格式有三种，特性对比如下。

说明：源文件该页数据为粘连文本，表中各项按三种格式的通行特性整理，颜色数与压缩方式等以实际图像规格为准。

第24页：图形的插入

HTML 并不能包含图像，它只是包含图像文件的名称和相应的格式代码。

• 引用方式：<IMG SRC=“图像文件存放位置/图像文件名.扩展名”>
• 直接拖拽来改变图片的大小
• 使用图片属性对话框设置图片的替代文字、图片边框
• 使用图片工具栏编辑图片

第25页：建立超链接

超链接的实现方法：将某个文本串或某幅图像和其他网页的地址（URL）联系在一起。

• 标记形式：<A HREF=“网页地址/网页文件名.html”>单击此处</A> 可获得某某信息
• 可链接的目标：其他 Web 服务器上的网页文件、本地机器中网页文件、同一个网页文件中（书签）

第26页：图像映射与热点

图像映射是另一种形式的超链接，允许将不同的 URL 指定给一幅图像的不同部分，使访问者根据不同的图像区域跳转到不同的位置，这些区域称做“热点”，每一个热点与一个超链接相对应。

例如汽车生产商的站点可以用新车的图像映射：当站点访问者单击“车子”时，就会显示详细说明车子的网页。

第27页：表格与框架布局

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

表格

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

框架

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

第28页：表格的创建

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

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

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

使用“插入表格”按钮

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

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

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

第29页：表格的编辑

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

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

第30页：表格布局方法

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

第31页：框架与框架集

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

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

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

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

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

第33页：框架属性设置

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

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

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

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

第35页：网页一致性外观

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

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

第36页：主题

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

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

第37页：共享边框

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

第38页：导航栏

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

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

第39页：创建和使用表单

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

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

第40页：网页层次组件

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

横幅广告管理器

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

滚动字幕

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

悬停按钮

一种可以变化的按钮

网站计数器

显示站点被访问的次数

第41页：发布站点

发布站点的过程如下。

准备工作

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

发布站点

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

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

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

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

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

第43页：参考资料

本讲的参考资料如下。

参考教材

教材第 9 章

上机指导手册第 7 章

网站资源

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

基本操作演示课件

常见问题列表（FAQ 分类）

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

作业要求（布置作业）