WWW信息服务与信息搜索 - 精品课程平台

Download Report

Transcript WWW信息服务与信息搜索 - 精品课程平台 

网页制作（一）
计算机文化基础
计算机与信息管理中心
内容提要
网页与网站
网页和网站制作的基本步骤
网站创建的基本方法
认识FrontPage
管理和组织网页
网页编辑  基本网页编辑





计算机文化基础
图形的插入和图形格式
创建超链接（超链接、书签、热点）
网页的布局（表格和框架）
创建和使用表单
使用网页层次组件
FrontPage
http://ccf.tsinghua.edu.cn
2
网站制作作业
1. 内容选题
2. 要提交网页制作报告
3. 可以以团队形式完成该作业，团队规模不超过3人。
4. 所有的文件（网页文件、素材文件、网页制作报
告）要求用Winzip打包压缩成一个.zip文件,从网
站提交。
计算机文化基础
http://ccf.tsinghua.edu.cn
3
网页与主页
浏览器与Web服务器之间
是以页为单位来传送信息。
网页 ( Web Page )
http://www.tsinghua.edu.cn/docs/cindex.html
主页 ( Home Page )
http://www.tsinghua.edu.cn
计算机文化基础
http://ccf.tsinghua.edu.cn
4
超文本标记语言HTML
HyperText Markup Language
<HTML>
<HEAD>
<TITLE>欢迎光临无名的主页</TITLE>
</HEAD>
<BODY>
<H1>欢迎光临无名的主页</H1>
</BODY>
</HTML>
HTML中的命令格式需要放在<尖括号>中。
计算机文化基础
http://ccf.tsinghua.edu.cn
5
网页与网站
网页通常成组出现，并且这组网页
之间通过超链接相互组织成为反映
某个主题的网站。
……
Web服务器
 提高下载速度
 超文本地址引用方便
 Web页没有固定的长度
计算机文化基础
http://ccf.tsinghua.edu.cn
6
网站制作步骤
选择主题
规划网页（结构与链接关系）
组织素材
选择视觉外观
设计有效的页面布局
制作具体网页
发布网站信息
计算机文化基础
http://ccf.tsinghua.edu.cn
7
网站基本结构
网站是由网页组成的，网页之间是由超链接来连接的，其连接方
式有三种：线性网站、树状网站、非线性网站
线性网站：一页连接一页
树状网站：分层排列
非线性网站：上述
两种网站的结合
计算机文化基础
http://ccf.tsinghua.edu.cn
8
网页制作步骤
可利用任何一种文字处理软件编辑Web文档（推荐：记事本）
Web文档以纯文本格式存放，取名为*.html或*.htm。 其中插
入的HTML语言只有用浏览器才能被解释翻译
在浏览器中使用文件菜单打开命令，可在本地机浏览 Web文
档，完成编辑后，可利用FTP将文件及其所用到的媒体素材文
件传送到某台公共Web服务器
人人均可在浏览器中URL处，键入具体命令，实现异地浏览该
Web文档
一旦对该Web文档内容进行更新，须更新它所在Web服务器上
的相关文档
计算机文化基础
http://ccf.tsinghua.edu.cn
9
网页的基本分类
以网页的角度来看,一个网站中的众多网页
主要可以分成下列两层:
个人主页
兴趣爱好
计算机文化基础
个人收藏
导航层
个人相册
……
内容层
http://ccf.tsinghua.edu.cn
10
网站创建的基本方法
最简单的方法：直接在网页视图中制作每一个网页
文件
将本地机中的某个文件夹指定为FrontPage站点，
利用Explorer管理这些网页
使用真实的站点服务器
……
计算机文化基础
http://ccf.tsinghua.edu.cn
11
认识FrontPage
FrontPage是一种“所见即所得”的网站管理和网页制作的
工具。FrontPage2000属于Office2000家族的成员, 其主
要功能有:
新建和修改一个网页
新建一个站点
在网页中插入一些动态元素
设置动态效果
设置网页过渡效果
可以直接导入Office其他工具的文件
提供网站管理信息和统计资料
计算机文化基础
FrontPage
http://ccf.tsinghua.edu.cn
12
FrontPage 2000的操作环境
FrontPage 2000提供了六种视图方式
来实现网页的编辑和网站的创建、管理
视
图
两大功能，其中只有网页视图是用来编
辑网页的，其他五种视图都是用来创建
和管理站点的，其所做的相关设置，是
针对整个站点的。选择不同的视图方式，
右边的编辑区中会显示不同的内容。
计算机文化基础
http://ccf.tsinghua.edu.cn
13
网页视图
网页编辑的视图，负责网站内个别网页的编辑，
它提供了三种显示方式：
普通视图：
“所见即所得”的编辑环境
HTML视图:
编辑和查看HTML源代码
的环境
预览视图:
IE浏览器的预览环境。
计算机文化基础
http://ccf.tsinghua.edu.cn
14
文件夹视图
类似Windows资源
管理器,显示站点的
所有文件和文件夹,
在此视图方式下可
进行文件和文件夹
的新建、复制、删
除、剪切、重命名、
修改属性等操作。
计算机文化基础
http://ccf.tsinghua.edu.cn
15
报表视图
提供14种报表，
帮助我们了解
站点的情况。
计算机文化基础
http://ccf.tsinghua.edu.cn
16
导航视图
记录站点结构
计算机文化基础
http://ccf.tsinghua.edu.cn
17
超链接视图
提供基于超链
接的结构分析，
以任意网页为
中心，形象地
说明通过超链
接相连的其他
网页。从微观
的角度展示站
点的结构。
计算机文化基础
http://ccf.tsinghua.edu.cn
18
任务视图
站点任务的管理，当多人同时编写一个站点时,可通过
任务视图为各个成员分配任务,协调成员之间的工作。
计算机文化基础
http://ccf.tsinghua.edu.cn
19
基本网页编辑
新建、打开、保存网页
即可以在站点中创建新网页，也可以创建独立的网页。
Microsoft FrontPage 内置的各类模板可以帮助我们创建
不同类型的网页。
添加文本和插入素材文件
网页视图中进行文本的录入和word类似，也可以在网页
中插入任何一种基于文本的文件，包括 .htm 文件、.asp
文件、.rtf 文件和 .txt 文件，以及任何 Microsoft
Office 文档。
计算机文化基础
http://ccf.tsinghua.edu.cn
20
基本网页编辑
设置文本格式
在 FrontPage 中，可以像使用word的方式来设置
文本格式，如更改字体、大小、样式、颜色、段落
间距和文本的垂直位置，以及添加诸如下划线的效
果。
插入特殊网页元素
FrontPage的插入菜单可以插入四种类型的特殊
元素：换行符、水平线、符号和注释。
计算机文化基础
http://ccf.tsinghua.edu.cn
21
基本网页编辑
使用项目符号和编号
项目符号和编号是组织数据的工具，它可以使数据层次
分明、重点突出。
使用背景色和背景音乐
用浏览器预览网页
计算机文化基础
http://ccf.tsinghua.edu.cn
22
认识图形格式
GIF
JPEG
PNG
（图形交换格式）（联合图像专家组）（可移植网络图形）
可用颜色数
16777216
每幅图像的颜色
压缩
透明
半透明
动画
256
无损
单色
否
是
16777216
16777216
16777216
有损
否
否
否
16777216
无损
Alpha通道
Alpha通道
否
R
计算机文化基础
G
http://ccf.tsinghua.edu.cn
B
23
图形的插入
HTML并不能包含图像，它只是包含图像文件的名称
和相应的格式代码。
<IMG SRC=“图像文件存放位置/图像文件名.扩展名”>
图形的插入
直接拖拽来改变图片的大小
使用图片属性对话框来设置
图片的替代文字、图片边框
使用图片工具栏编辑图片
计算机文化基础
http://ccf.tsinghua.edu.cn
24
建立超链接
超链接的实现方法：将某个文本串或某幅图像和其他
网页的地址（URL）联系在一起。
<A HREF SRC=“网页地址/网页文件名.html”>
单击此处</A>可获得某某信息。
创建超链接：
其他Web服务器上的网页文件
本地机器中网页文件
同一个网页文件中（书签）
计算机文化基础
http://ccf.tsinghua.edu.cn
25
图像映射
图像映射是另一种形式的超链接，允许将不同的URL指定给一幅图
像的不同部分，使访问者根据不同的图像区域跳转到不同的位置，
这些区域称做“热点”，每一个热点与一个超链接相对应。
如下图汽车生产商的站点可以用新车的图像映射：当站点访问者单
击“车子”时，就会显示详细说明车子的网页。
计算机文化基础
http://ccf.tsinghua.edu.cn
26
网页的布局
表格和框架是网页布局的常用工具。
表格在网页制作中的作用已经超越了传统意义上的存放数
据，表格已成为组织数据、排列网页元素空间位置最为灵
活的方法。
框架也是一种常用的网页布局方法，它将浏览器窗口划分
为功能独立的多个区域，每个框架显示一个网页内容，并
且通过框架中的超链接可以更改显示在另一个框架中的网
页文件。
计算机文化基础
http://ccf.tsinghua.edu.cn
27
表格的创建
菜单命令“表格”/“手绘表格”
先绘制出表格的轮廓，然后绘制表格的单
元格, 由此可以创建一个不规则的表格。
菜单命令“表格”/“插入”/“表格”
用指定表格属性的方式创建表格，
这些属性包括表格的行数和列数、
表格宽度、对齐方式、边框粗细，
以及单元格边距和间距。
使用“插入表格”按钮
通过指定列数和行数来快速创建一个规则的空表。
计算机文化基础
http://ccf.tsinghua.edu.cn
28
表格的编辑
单元格的合并与拆分
创建不规则的表格
设置表格属性
表格在网页中的编排方式
设置单元格属性
单元格内文本的编排方式
计算机文化基础
http://ccf.tsinghua.edu.cn
29
表格布局
要用表格来布局网页，首先应决定表格在水平方向和垂直
方向上所需的单元格数量，然后为需要跨越多行或多列的
对象合并单元格。
大多数网页布局采用了带有不可见边框的表格。
计算机文化基础
http://ccf.tsinghua.edu.cn
30
框架布局
框架是一种将浏览器窗口划分为功能独立的多个区域的常用方法。框架集
定义每个框架的大小、位置、名称和初始网页，普通网页提供每个框架的
内容。一个框架的超链接可以更改显示在另一个框架中的网页。
框架集是一种特殊的网页，该网页定义了整体的框架布局，但不提供实
际内容。
框架集
框架名称
计算机文化基础
初始网页
rtop
com-t.html
rbottom
com-m.html
Left
com-1.htm
http://ccf.tsinghua.edu.cn
31
框架的创建和保存
框架组成
边框、滚动条、网页
新建框架网页
“文件” /“新建” /“网
页” ，选择“框架网页”
标签
在框架中加入网页
1）建立新网页
2）指定已经存在的网页
保存框架页
“文件” /“另存为”
计算机文化基础
http://ccf.tsinghua.edu.cn
32
框架属性设置
框架/框架属性
•网页名称
•边距
•初始网页
•滚动条
•框架大小
•框架的可调整性
•间距
相对大小：1和4
20%
30%
70% 80%
相对大小：3和7
计算机文化基础
http://ccf.tsinghua.edu.cn
33
框架之间的超链接
在框架网页中，单击某框架内网页上的超链接时，被超链接所
指定的网页通常在另一个框架中打开，这个框架称为目标框架。
插入/超链接
计算机文化基础
http://ccf.tsinghua.edu.cn
34
给予网页一致性外观
主题
共享边框
导航栏
计算机文化基础
http://ccf.tsinghua.edu.cn
35
主题
主题是一组可应用在网页上的设计元素和颜色方案，其中包括字体、
图形、背景、导航栏、水平线和其他网页元素。
主题赋予网页一致和引人注目的外观。使用主题是快速、容易地加
入精采的网页内容和赋予网页专业外观的方法。FrontPage 包含很
多可以立即使用的主题，也可以修改这些主题以满足个体的需求。
“格式” /“主
题”
加入主题
实现主题
修改主题
计算机文化基础
http://ccf.tsinghua.edu.cn
36
共享边框
共享边框是站点上一个或多个网页共享的区域。
共享边框可以出现在一个网页的顶端（类似于网页页眉）、底端（类
似于网页页脚）、左边或右边的区域。
“格式” /“共享边框”
计算机文化基础
http://ccf.tsinghua.edu.cn
37
导航栏
导航栏是一组文本或按
钮超链接，通过它们浏
览者可以到达站点中的
某一个网页。
典型的导航栏具有指向
站点主页和主要上层网
页的按钮。当我们在网
页中添加一个导航栏时，
FrontPage 将根据导航
视图下设置的导航结构
自动生成导航超链接。
计算机文化基础
http://ccf.tsinghua.edu.cn
38
创建和使用表单
表单能够向网页中添加文本框、
单选按钮、复选框、按钮等用
户界面控件。
每个网页可以包含一个或多个表
单，每个表单占据网页中的一个
特定区域。
表单中必须有一个元素作为
“提交”按钮。
单击“提交”按钮后，浏览器将数据传送给服务器，站点服务器
需要某种程序读取这些数据并进行处理。程序可能将数据保存在
文件或数据库中，也可能作为电子邮件发出等等。
计算机文化基础
http://ccf.tsinghua.edu.cn
39
使用网页层次组件
组件是FrontPage提供的智能对象，制作人员使用它们来
增加站点的功能。
大部分组件需要将网页保存到FrontPage站点才会生效，
或者需要站点服务器运行特殊的软件。
横幅广告管理器:自动产生动画效果,类似街道上
的广告牌
滚动字幕:在一个方框中,里面的文字不停地沿一个
方向滚动或来回滚动
悬停按钮：一种可以变化的按钮
网站计数器：显示站点被访问的次数
计算机文化基础
http://ccf.tsinghua.edu.cn
40
发布站点
准备工作：在浏览器上进行预览，在报表视图下，检
查所有文件的状态，选择要发布的文件。
发布站点：使用菜单命令“文件” / “发布站点”。
http://ccf.tsinghua.edu.cn/student/00class
ftp://ccf.tsinghua.edu.cn/student/00class
计算机文化基础
http://ccf.tsinghua.edu.cn
41
免费网页存放空间
国内外有一些公司提供一种免费服务，在他们
的服务器上提供一定的硬盘空间，存放网页。
广州网易：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
42
参考资料
参考教材
教材第9章
上机指导手册第7章
网站资源
第七次大课电子讲稿（网页制作）
基本操作演示课件
常见问题列表（ FAQ分类）
优秀作业赏析（样例素材）
作业要求（布置作业）
计算机文化基础
http://ccf.tsinghua.edu.cn
43