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